refactor(layout, views): streamline sidebar and button components

- Simplified the sidebar structure in `index.vue` by consolidating class bindings and removing unnecessary line breaks for improved readability.
- Updated button components in `lss/index.vue` to use Iconify for icons, enhancing visual consistency and reducing dependency on Element Plus icons.
- Adjusted button layouts to ensure proper alignment and spacing, improving overall user interface aesthetics.

src/layout/index.vue

@@ -42,7 +42,7 @@
               :class="{ 'layout__nav-item--active': isGroupActive(item) }"
               @click="toggleSubMenu(item.path)"
             >
-              <Icon :icon="item.icon" class="layout__nav-icon" />
+              <Icon :icon="item.icon" width="20" height="20" class="layout__nav-icon" />
               <span v-show="sidebarOpened || isMobile">{{ t(item.title) }}</span>
               <svg
                 v-show="sidebarOpened || isMobile"
@@ -64,7 +64,7 @@
                 :class="{ 'layout__nav-item--active': isActive(child.path) }"
                 @click="isMobile && closeSidebar()"
               >
-                <Icon :icon="child.icon" class="layout__nav-icon" />
+                <Icon :icon="child.icon" width="20" height="20" class="layout__nav-icon" />
                 <span v-show="sidebarOpened || isMobile">{{ t(child.title) }}</span>
               </router-link>
             </div>
@@ -77,7 +77,7 @@
             :class="{ 'layout__nav-item--active': isActive(item.path) }"
             @click="isMobile && closeSidebar()"
           >
-            <Icon :icon="item.icon" class="layout__nav-icon" />
+            <Icon :icon="item.icon" width="20" height="20" class="layout__nav-icon" />
             <span v-show="sidebarOpened || isMobile">{{ t(item.title) }}</span>
           </router-link>
         </template>
@@ -218,14 +218,14 @@ const menuItems: MenuItem[] = [
   {
     path: '/lss-manage',
     title: 'LSS 管理',
-    icon: 'mdi:power-plug',
-    children: [{ path: '/lss-manage/list', title: 'LSS 列表', icon: 'mdi:format-list-bulleted' }]
+    icon: 'mdi:connection',
+    children: [{ path: '/lss-manage/list', title: 'LSS 列表', icon: 'mdi:list-box' }]
   },
   {
     path: '/live-stream-manage',
     title: 'LiveStream 管理',
-    icon: 'mdi:broadcast',
-    children: [{ path: '/live-stream-manage/list', title: 'LiveStream 列表', icon: 'mdi:format-list-bulleted' }]
+    icon: 'mdi:video-wireless',
+    children: [{ path: '/live-stream-manage/list', title: 'LiveStream 列表', icon: 'mdi:list-box ' }]
   },
   { path: '/cc', title: 'Cloudflare Stream', icon: 'mdi:cloud' },
   { path: '/camera-vendor', title: '摄像头配置', icon: 'mdi:cctv' },

src/views/lss/index.vue

@@ -30,10 +30,12 @@
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" :icon="Search" data-id="btn-search" @click="handleSearch">
+          <el-button type="primary" data-id="btn-search" @click="handleSearch">
+            <Icon icon="mdi:magnify" width="16" height="16" style="margin-right: 4px" />
             {{ t('查询') }}
           </el-button>
-          <el-button type="info" :icon="RefreshRight" data-id="btn-reset" @click="handleReset">
+          <el-button type="info" data-id="btn-reset" @click="handleReset">
+            <Icon icon="mdi:refresh" width="16" height="16" style="margin-right: 4px" />
             {{ t('重置') }}
           </el-button>
         </el-form-item>
@@ -168,9 +170,7 @@
                       <div class="tooltip-example">{{ t('Status') }} [yy-mm-dd 00:00:00]</div>
                     </div>
                   </template>
-                  <el-icon class="heartbeat-info-icon">
-                    <QuestionFilled />
-                  </el-icon>
+                  <Icon icon="mdi:help-circle" class="heartbeat-info-icon" width="16" height="16" />
                 </el-tooltip>
               </el-form-item>
               <el-form-item :label="t('ably') + ':'" prop="ably">
@@ -220,9 +220,18 @@
                   </el-select>
                 </el-form-item>
                 <el-form-item>
-                  <el-button type="primary" :icon="Search" @click="handleCameraSearch">{{ t('查询') }}</el-button>
-                  <el-button type="info" :icon="RefreshRight" @click="handleCameraReset">{{ t('重置') }}</el-button>
-                  <el-button type="primary" :icon="Plus" @click="handleAddCamera">{{ t('新增') }}</el-button>
+                  <el-button type="primary" @click="handleCameraSearch">
+                    <Icon icon="mdi:magnify" width="16" height="16" style="margin-right: 4px" />
+                    {{ t('查询') }}
+                  </el-button>
+                  <el-button type="info" @click="handleCameraReset">
+                    <Icon icon="mdi:refresh" width="16" height="16" style="margin-right: 4px" />
+                    {{ t('重置') }}
+                  </el-button>
+                  <el-button type="primary" @click="handleAddCamera">
+                    <Icon icon="mdi:plus" width="16" height="16" style="margin-right: 4px" />
+                    {{ t('新增') }}
+                  </el-button>
                 </el-form-item>
               </el-form>
             </div>
@@ -349,9 +358,18 @@
                   </el-select>
                 </el-form-item>
                 <el-form-item>
-                  <el-button type="primary" :icon="Search" @click="handleCameraSearch">{{ t('查询') }}</el-button>
-                  <el-button type="info" :icon="RefreshRight" @click="handleCameraReset">{{ t('重置') }}</el-button>
-                  <el-button type="primary" :icon="Plus" @click="handleAddCamera">{{ t('新增') }}</el-button>
+                  <el-button type="primary" @click="handleCameraSearch">
+                    <Icon icon="mdi:magnify" width="16" height="16" style="margin-right: 4px" />
+                    {{ t('查询') }}
+                  </el-button>
+                  <el-button type="info" @click="handleCameraReset">
+                    <Icon icon="mdi:refresh" width="16" height="16" style="margin-right: 4px" />
+                    {{ t('重置') }}
+                  </el-button>
+                  <el-button type="primary" @click="handleAddCamera">
+                    <Icon icon="mdi:plus" width="16" height="16" style="margin-right: 4px" />
+                    {{ t('新增') }}
+                  </el-button>
                 </el-form-item>
               </el-form>
             </div>
@@ -392,8 +410,12 @@
               </el-table-column>
               <el-table-column :label="t('设备控制')" min-width="100" align="center" fixed="right">
                 <template #default="{ row }">
-                  <el-button type="primary" link :icon="Edit" @click="handleEditCamera(row)" />
-                  <el-button type="danger" link :icon="Delete" @click="handleDeleteCamera(row)" />
+                  <el-button type="primary" link @click="handleEditCamera(row)">
+                    <Icon icon="mdi:note-edit-outline" width="20" height="20" />
+                  </el-button>
+                  <el-button type="danger" link @click="handleDeleteCamera(row)">
+                    <Icon icon="mdi:delete" width="20" height="20" />
+                  </el-button>
                   <el-button link :class="['crosshairs-btn', { active: !row.streamSn }]" @click="handleViewCamera(row)">
                     <Icon icon="mdi:crosshairs" />
                   </el-button>
@@ -418,11 +440,20 @@
                   </el-select>
                 </el-form-item>
                 <el-form-item>
-                  <el-button type="primary" :icon="Search">{{ t('查询') }}</el-button>
-                  <el-button type="info" :icon="RefreshRight">{{ t('重置') }}</el-button>
+                  <el-button type="primary">
+                    <Icon icon="mdi:magnify" width="16" height="16" style="margin-right: 4px" />
+                    {{ t('查询') }}
+                  </el-button>
+                  <el-button type="info">
+                    <Icon icon="mdi:refresh" width="16" height="16" style="margin-right: 4px" />
+                    {{ t('重置') }}
+                  </el-button>
                 </el-form-item>
               </el-form>
-              <el-button type="primary" :icon="Plus">{{ t('新增') }}</el-button>
+              <el-button type="primary">
+                <Icon icon="mdi:plus" width="16" height="16" style="margin-right: 4px" />
+                {{ t('新增') }}
+              </el-button>
             </div>
             <el-empty :description="t('暂无推币机数据')" />
           </div>
@@ -442,11 +473,20 @@
                   </el-select>
                 </el-form-item>
                 <el-form-item>
-                  <el-button type="primary" :icon="Search">{{ t('查询') }}</el-button>
-                  <el-button type="info" :icon="RefreshRight">{{ t('重置') }}</el-button>
+                  <el-button type="primary">
+                    <Icon icon="mdi:magnify" width="16" height="16" style="margin-right: 4px" />
+                    {{ t('查询') }}
+                  </el-button>
+                  <el-button type="info">
+                    <Icon icon="mdi:refresh" width="16" height="16" style="margin-right: 4px" />
+                    {{ t('重置') }}
+                  </el-button>
                 </el-form-item>
               </el-form>
-              <el-button type="primary" :icon="Plus">{{ t('新增') }}</el-button>
+              <el-button type="primary">
+                <Icon icon="mdi:plus" width="16" height="16" style="margin-right: 4px" />
+                {{ t('新增') }}
+              </el-button>
             </div>
             <el-empty :description="t('暂无其他设备数据')" />
           </div>
@@ -596,7 +636,7 @@
 
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed, watch } from 'vue'
-import { Search, RefreshRight, Delete, View, Edit, VideoCamera, Plus, QuestionFilled } from '@element-plus/icons-vue'
+// Element Plus icons removed - using Iconify instead
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Icon } from '@iconify/vue'
 import type { FormInstance, FormRules } from 'element-plus'