From 1a9003261d85370ce2cd8c76b88a1d681ce4e78e Mon Sep 17 00:00:00 2001
From: eafonyang <eafonyang@gmail.com>
Date: Thu, 16 Jul 2026 09:50:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/src/routes/models.js                  |  6 ++-
 frontend/package.json                         |  2 +-
 frontend/pnpm-lock.yaml                       | 15 ++++--
 frontend/src/components/TabsView.vue          | 12 +++--
 frontend/src/layout/index.vue                 | 28 +++++-----
 frontend/src/router/index.js                  |  8 +--
 frontend/src/styles/lux-theme.css             | 52 +++++++++++++++---
 frontend/src/views/blacklist/index.vue        | 14 +++--
 frontend/src/views/brand/index.vue            | 13 +++--
 frontend/src/views/home/index.vue             | 14 ++---
 frontend/src/views/login/index.vue            |  4 +-
 .../views/model/components/EqCacheDialog.vue  |  8 +--
 .../model/components/ModelFormDialog.vue      | 53 ++++++++++++-------
 .../model/components/PushProgressDialog.vue   | 10 ++--
 .../views/model/components/PushViewDialog.vue |  4 +-
 frontend/src/views/model/index.vue            | 53 +++++++++++--------
 .../src/views/ota-target-device/index.vue     | 14 +++--
 frontend/src/views/ota/index.vue              | 24 +++++----
 frontend/src/views/share-code/log.vue         | 13 +++--
 frontend/src/views/system/users/index.vue     | 14 +++--
 .../views/toolbox/luxsin-controller/index.vue |  2 +-
 frontend/vite.config.js                       |  2 +-
 22 files changed, 241 insertions(+), 124 deletions(-)

diff --git a/backend/src/routes/models.js b/backend/src/routes/models.js
index bd83c09..400f690 100644
--- a/backend/src/routes/models.js
+++ b/backend/src/routes/models.js
@@ -455,7 +455,11 @@ router.put('/api/models/:model_id', upload.single('measurement_file'), async (re
 
     if (newBrandName !== dbModel.brand_name || newName !== dbModel.name) {
       const existing = await Model.findOne({
-        where: { brand_name: newBrandName, name: newName },
+        where: {
+          brand_name: newBrandName,
+          name: newName,
+          id: { [Op.ne]: modelId },
+        },
       });
       if (existing) {
         logger.warn(`Model already exists: brand_name=${newBrandName}, name=${newName}`);
diff --git a/frontend/package.json b/frontend/package.json
index 0a4ff9f..db26435 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,7 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@element-plus/icons-vue": "^2.1.0",
+    "@lucide/vue": "^1.24.0",
     "axios": "^1.5.0",
     "element-plus": "^2.3.14",
     "vue": "^3.3.4",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 94b5375..3868631 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -8,9 +8,9 @@ importers:
 
   .:
     dependencies:
-      '@element-plus/icons-vue':
-        specifier: ^2.1.0
-        version: 2.3.2(vue@3.5.35)
+      '@lucide/vue':
+        specifier: ^1.24.0
+        version: 1.24.0(vue@3.5.35)
       axios:
         specifier: ^1.5.0
         version: 1.17.0
@@ -224,6 +224,11 @@ packages:
   '@jridgewell/sourcemap-codec@1.5.5':
     resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
 
+  '@lucide/vue@1.24.0':
+    resolution: {integrity: sha512-5bNPX0G2YEWdUlBYk7pE8SgDg/f1mkIFpJ9vtE44pW/cwRz7Ioc0tOTESoVJAPvxIELSmYekX+XXIJMjsswNIg==}
+    peerDependencies:
+      vue: '>=3.0.1'
+
   '@rollup/rollup-android-arm-eabi@4.62.2':
     resolution: {integrity: sha512-6o7ZLZK+BeenkZCFNDXqpbjw9bD6nuWonvS/lwQJp7NoVVxm6p3qE7qQ5jGuBjiFsgvqjD8mZAU5oWxTmbOeOg==}
     cpu: [arm]
@@ -805,6 +810,10 @@ snapshots:
 
   '@jridgewell/sourcemap-codec@1.5.5': {}
 
+  '@lucide/vue@1.24.0(vue@3.5.35)':
+    dependencies:
+      vue: 3.5.35
+
   '@rollup/rollup-android-arm-eabi@4.62.2':
     optional: true
 
diff --git a/frontend/src/components/TabsView.vue b/frontend/src/components/TabsView.vue
index e79e10d..0b5d284 100644
--- a/frontend/src/components/TabsView.vue
+++ b/frontend/src/components/TabsView.vue
@@ -55,20 +55,24 @@
 <script setup>
 import { computed, markRaw, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { Document, List, Upload, Collection, House, User, Tools } from '@element-plus/icons-vue'
+import { FileText, List, Upload, Layers, House, User, ToolCase, UserX, Crosshair, SlidersHorizontal } from '@lucide/vue'
 import { TABS_STORAGE_KEY, HOME_PATH } from '@/utils/tabs'
 
 const router = useRouter()
 const route = useRoute()
 
 const iconMap = markRaw({
-  document: Document,
+  document: FileText,
+  'file-text': FileText,
   list: List,
   upload: Upload,
-  collection: Collection,
+  collection: Layers,
   home: House,
   user: User,
-  tools: Tools
+  'user-x': UserX,
+  crosshair: Crosshair,
+  tools: ToolCase,
+  'sliders-horizontal': SlidersHorizontal
 })
 
 function resolveTabIcon(iconKey) {
diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue
index dc60c0c..a4fd67a 100644
--- a/frontend/src/layout/index.vue
+++ b/frontend/src/layout/index.vue
@@ -49,11 +49,11 @@
             >
               <el-sub-menu index="1">
                 <template #title>
-                  <el-icon><Headset /></el-icon>
+                  <el-icon><Headphones /></el-icon>
                   <span>耳机管理</span>
                 </template>
                 <el-menu-item index="/brand">
-                  <el-icon><Collection /></el-icon>
+                  <el-icon><Layers /></el-icon>
                   <span>品牌管理</span>
                 </el-menu-item>
                 <el-menu-item index="/model">
@@ -67,35 +67,35 @@
                   <span>升级管理</span>
                 </template>
                 <el-menu-item index="/ota">
-                  <el-icon><Document /></el-icon>
+                  <el-icon><FileText /></el-icon>
                   <span>OTA 管理</span>
                 </el-menu-item>
                 <el-menu-item index="/blacklist">
-                  <el-icon><Warning /></el-icon>
-                  <span>黑名单管理</span>
+                  <el-icon><UserX /></el-icon>
+                  <span>黑名单</span>
                 </el-menu-item>
                 <el-menu-item index="/ota-target-device">
-                  <el-icon><Aim /></el-icon>
+                  <el-icon><Crosshair /></el-icon>
                   <span>定向升级</span>
                 </el-menu-item>
               </el-sub-menu>
               <el-sub-menu index="share-code">
                 <template #title>
-                  <el-icon><Share /></el-icon>
+                  <el-icon><Share2 /></el-icon>
                   <span>分享码</span>
                 </template>
                 <el-menu-item index="/share-code/log">
-                  <el-icon><Document /></el-icon>
+                  <el-icon><FileText /></el-icon>
                   <span>分享日志</span>
                 </el-menu-item>
               </el-sub-menu>
               <el-sub-menu index="toolbox">
                 <template #title>
-                  <el-icon><Tools /></el-icon>
+                  <el-icon><ToolCase /></el-icon>
                   <span>工具箱</span>
                 </template>
                 <el-menu-item index="/toolbox/luxsin-controller">
-                  <el-icon><Operation /></el-icon>
+                  <el-icon><SlidersHorizontal /></el-icon>
                   <span>luxsin-controller</span>
                 </el-menu-item>
               </el-sub-menu>
@@ -164,7 +164,7 @@
 import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import { Headset, Collection, List, Upload, Document, Share, User, Warning, Aim, Tools, Operation } from '@element-plus/icons-vue'
+import { Headphones, Layers, List, Upload, FileText, Share2, User, UserX, Crosshair, ToolCase, SlidersHorizontal } from '@lucide/vue'
 import { clearAuth, getUser, isSuperAdmin } from '@/utils/auth'
 import TabsView from '@/components/TabsView.vue'
 import SidebarLogo from '@/components/SidebarLogo.vue'
@@ -199,10 +199,10 @@ watch(
 )
 
 const railNavItems = [
-  { title: '耳机管理', icon: Headset },
+  { title: '耳机管理', icon: Headphones },
   { title: '升级管理', icon: Upload },
-  { title: '分享码', icon: Share },
-  { title: '工具箱', icon: Tools }
+  { title: '分享码', icon: Share2 },
+  { title: '工具箱', icon: ToolCase }
 ]
 
 function handleRailClick() {
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index b99fdf6..d942add 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -38,19 +38,19 @@ const routes = [
         path: '/ota',
         name: 'Ota',
         component: () => import('@/views/ota/index.vue'),
-        meta: { title: 'OTA 管理', icon: 'upload' }
+        meta: { title: 'OTA 管理', icon: 'file-text' }
       },
       {
         path: '/blacklist',
         name: 'BlackList',
         component: () => import('@/views/blacklist/index.vue'),
-        meta: { title: '黑名单管理', icon: 'document' }
+        meta: { title: '黑名单管理', icon: 'user-x' }
       },
       {
         path: '/ota-target-device',
         name: 'OtaTargetDevice',
         component: () => import('@/views/ota-target-device/index.vue'),
-        meta: { title: '定向升级', icon: 'document' }
+        meta: { title: '定向升级', icon: 'crosshair' }
       },
       {
         path: '/share-code/log',
@@ -68,7 +68,7 @@ const routes = [
         path: '/toolbox/luxsin-controller',
         name: 'LuxsinController',
         component: () => import('@/views/toolbox/luxsin-controller/index.vue'),
-        meta: { title: 'luxsin-controller', icon: 'tools' }
+        meta: { title: 'luxsin 控制器', icon: 'sliders-horizontal' }
       }
     ]
   }
diff --git a/frontend/src/styles/lux-theme.css b/frontend/src/styles/lux-theme.css
index 46178c9..9651002 100644
--- a/frontend/src/styles/lux-theme.css
+++ b/frontend/src/styles/lux-theme.css
@@ -103,34 +103,34 @@ body {
 .lux-orb {
   position: absolute;
   border-radius: 50%;
-  filter: blur(80px);
   opacity: 0.34;
+  contain: layout style paint;
 }
 
 .lux-orb-1 {
   width: min(52vw, 400px);
   height: min(52vw, 400px);
-  background: #22d3ee;
   top: -12%;
   left: -8%;
+  background: radial-gradient(circle at center, #22d3ee 0%, rgba(34, 211, 238, 0.4) 35%, transparent 70%);
 }
 
 .lux-orb-2 {
   width: min(48vw, 360px);
   height: min(48vw, 360px);
-  background: #a78bfa;
   top: 40%;
   right: -12%;
   opacity: 0.28;
+  background: radial-gradient(circle at center, #a78bfa 0%, rgba(167, 139, 250, 0.4) 35%, transparent 70%);
 }
 
 .lux-orb-3 {
   width: min(42vw, 320px);
   height: min(42vw, 320px);
-  background: #fb7185;
   bottom: -8%;
   left: 20%;
   opacity: 0.18;
+  background: radial-gradient(circle at center, #fb7185 0%, rgba(251, 113, 133, 0.4) 35%, transparent 70%);
 }
 
 .lux-shell-body {
@@ -175,6 +175,8 @@ body {
   border-right: 1px solid var(--lux-glass-border);
   box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
   transition: width 0.30s ease, box-shadow 0.30s ease;
+  transform: translateZ(0);
+  will-change: width;
   z-index: 100;
 }
 
@@ -313,6 +315,32 @@ body {
   z-index: 8 !important;
 }
 
+/* 骨架屏深色主题配色（冷调蓝灰，融入深蓝黑背景） */
+.lux-shell .el-skeleton {
+  --el-fill-color-lighter: rgba(100, 116, 139, 0.16);
+  --el-skeleton-color: rgba(100, 116, 139, 0.08);
+}
+
+.lux-shell .el-skeleton .el-skeleton__item {
+  background: rgba(100, 116, 139, 0.14);
+}
+
+.lux-shell .el-skeleton.is-animated .el-skeleton__item {
+  background: linear-gradient(
+    90deg,
+    rgba(100, 116, 139, 0.10) 25%,
+    rgba(120, 140, 160, 0.22) 50%,
+    rgba(100, 116, 139, 0.10) 75%
+  );
+  background-size: 200% 100%;
+  animation: lux-skeleton-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes lux-skeleton-pulse {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
 /* ──────────────────────────────────────────
  * 底栏
  * ────────────────────────────────────────── */
@@ -598,6 +626,8 @@ body {
     0 0 0 1px rgba(255, 255, 255, 0.06) inset,
     0 1px 0 rgba(255, 255, 255, 0.1) inset;
   position: relative;
+  transform: translateZ(0);
+  will-change: transform, opacity;
 }
 
 /* 光照渐变叠层 (登录框 ::before) */
@@ -608,6 +638,7 @@ body {
   background: linear-gradient(145deg, rgba(255, 255, 255, 0.14) 0%, transparent 45%);
   pointer-events: none;
   z-index: 0;
+  contain: strict;
 }
 
 /* 顶部青色辉光 (登录框 ::after) */
@@ -621,6 +652,7 @@ body {
   background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.4), transparent);
   pointer-events: none;
   z-index: 2;
+  contain: strict;
 }
 
 .el-overlay .el-dialog > * {
@@ -907,34 +939,34 @@ body {
 .lux-orb {
   position: absolute;
   border-radius: 50%;
-  filter: blur(80px);
   opacity: 0.34;
+  contain: layout style paint;
 }
 
 .lux-orb-1 {
   width: min(52vw, 400px);
   height: min(52vw, 400px);
-  background: #22d3ee;
   top: -12%;
   left: -8%;
+  background: radial-gradient(circle at center, #22d3ee 0%, rgba(34, 211, 238, 0.4) 35%, transparent 70%);
 }
 
 .lux-orb-2 {
   width: min(48vw, 360px);
   height: min(48vw, 360px);
-  background: #a78bfa;
   top: 40%;
   right: -12%;
   opacity: 0.28;
+  background: radial-gradient(circle at center, #a78bfa 0%, rgba(167, 139, 250, 0.4) 35%, transparent 70%);
 }
 
 .lux-orb-3 {
   width: min(42vw, 320px);
   height: min(42vw, 320px);
-  background: #fb7185;
   bottom: -8%;
   left: 20%;
   opacity: 0.18;
+  background: radial-gradient(circle at center, #fb7185 0%, rgba(251, 113, 133, 0.4) 35%, transparent 70%);
 }
 
 .lux-shell-body {
@@ -977,6 +1009,8 @@ body {
   border-right: 1px solid rgba(255, 255, 255, 0.08);
   box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
   transition: width 0.30s ease, box-shadow 0.30s ease;
+  transform: translateZ(0);
+  will-change: width;
   z-index: 100;
 }
 
@@ -1221,6 +1255,8 @@ body {
     0 25px 50px -12px rgba(0, 0, 0, 0.5),
     0 0 0 1px rgba(255, 255, 255, 0.06) inset,
     0 1px 0 rgba(255, 255, 255, 0.1) inset;
+  transform: translateZ(0);
+  will-change: transform, opacity;
 }
 
 .el-overlay .el-dialog__header {
diff --git a/frontend/src/views/blacklist/index.vue b/frontend/src/views/blacklist/index.vue
index 8a2f6c5..9bd48fe 100644
--- a/frontend/src/views/blacklist/index.vue
+++ b/frontend/src/views/blacklist/index.vue
@@ -39,7 +39,7 @@
         </el-form-item>
         <el-form-item>
           <el-button type="primary" circle :icon="Search" title="搜索" @click="handleSearch" />
-          <el-button circle :icon="Refresh" title="重置" @click="handleReset" />
+          <el-button circle :icon="RefreshCw" title="重置" @click="handleReset" />
         </el-form-item>
       </el-form>
     </el-card>
@@ -50,8 +50,14 @@
         <el-button type="primary" circle :icon="Plus" title="新增黑名单" @click="handleAdd" />
       </div>
 
-      <div class="table-loading-host" v-loading="loading">
-      <el-table :data="tableData" border stripe style="width: 100%">
+      <div class="table-loading-host">
+      <el-skeleton v-if="loading" animated>
+        <template #template>
+          <el-skeleton-item variant="rect" style="height: 40px; margin-bottom: 4px; border-radius: 4px" />
+          <el-skeleton-item v-for="i in 6" :key="i" variant="rect" style="height: 48px; margin-bottom: 4px; border-radius: 4px" />
+        </template>
+      </el-skeleton>
+      <el-table v-else :data="tableData" border stripe style="width: 100%">
         <el-table-column prop="id" label="ID" width="70" />
         <el-table-column label="OTA 版本" min-width="200" show-overflow-tooltip>
           <template #default="{ row }">
@@ -135,7 +141,7 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Search, Refresh, Plus } from '@element-plus/icons-vue'
+import { Search, RefreshCw, Plus } from '@lucide/vue'
 import { getBlackList, createBlackList, updateBlackList, deleteBlackList } from '@/api/blacklist'
 import { getOtaList } from '@/api/ota'
 
diff --git a/frontend/src/views/brand/index.vue b/frontend/src/views/brand/index.vue
index c5fdff8..316fdf9 100644
--- a/frontend/src/views/brand/index.vue
+++ b/frontend/src/views/brand/index.vue
@@ -12,7 +12,7 @@
         </el-form-item>
         <el-form-item>
           <el-button type="primary" circle :icon="Search" title="搜索" @click="handleSearch" />
-          <el-button circle :icon="Refresh" title="重置" @click="handleReset" />
+          <el-button circle :icon="RefreshCw" title="重置" @click="handleReset" />
         </el-form-item>
       </el-form>
     </el-card>
@@ -23,8 +23,15 @@
         <el-button type="primary" circle :icon="Plus" title="新增品牌" @click="handleAdd" />
       </div>
 
-      <div class="table-loading-host" v-loading="loading">
+      <div class="table-loading-host">
+      <el-skeleton v-if="loading" animated>
+        <template #template>
+          <el-skeleton-item variant="rect" style="height: 40px; margin-bottom: 4px; border-radius: 4px" />
+          <el-skeleton-item v-for="i in 6" :key="i" variant="rect" style="height: 48px; margin-bottom: 4px; border-radius: 4px" />
+        </template>
+      </el-skeleton>
       <el-table
+        v-else
         :data="tableData"
         border
         stripe
@@ -100,7 +107,7 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Search, Refresh, Plus } from '@element-plus/icons-vue'
+import { Search, RefreshCw, Plus } from '@lucide/vue'
 import { getBrands, createBrand, updateBrand, deleteBrand } from '@/api/brand'
 
 const loading = ref(false)
diff --git a/frontend/src/views/home/index.vue b/frontend/src/views/home/index.vue
index 2abab1e..fc77d66 100644
--- a/frontend/src/views/home/index.vue
+++ b/frontend/src/views/home/index.vue
@@ -50,7 +50,7 @@
             </div>
           </template>
           <div v-if="todayLoading" class="home-today-loading">
-            <el-icon class="is-loading"><Loading /></el-icon>
+            <el-icon class="is-loading"><LoaderCircle /></el-icon>
           </div>
           <div v-else-if="todayModels.length === 0" class="home-today-empty">
             暂无新增
@@ -75,7 +75,7 @@
             </div>
           </template>
           <div v-if="todayLoading" class="home-today-loading">
-            <el-icon class="is-loading"><Loading /></el-icon>
+            <el-icon class="is-loading"><LoaderCircle /></el-icon>
           </div>
           <div v-else-if="todayOtas.length === 0" class="home-today-empty">
             暂无新增
@@ -97,7 +97,7 @@
 <script setup>
 import { computed, ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { House, Collection, List, Document, Share, Upload, Loading, Tools } from '@element-plus/icons-vue'
+import { House, Layers, List, FileText, Share2, Upload, LoaderCircle, ToolCase } from '@lucide/vue'
 import { getUser } from '@/utils/auth'
 import { getTodayStats } from '@/api/dashboard'
 
@@ -111,11 +111,11 @@ const todayModels = ref([])
 const todayOtas = ref([])
 
 const quickLinks = [
-  { path: '/brand', title: '耳机品牌管理', desc: '维护耳机品牌信息', icon: Collection, colorClass: 'icon-cyan' },
+  { path: '/brand', title: '耳机品牌管理', desc: '维护耳机品牌信息', icon: Layers, colorClass: 'icon-cyan' },
   { path: '/model', title: '耳机型号管理', desc: '维护耳机型号与配置', icon: List, colorClass: 'icon-coral' },
-  { path: '/ota', title: 'OTA 管理', desc: '固件升级包管理', icon: Document, colorClass: 'icon-cyan' },
-  { path: '/share-code/log', title: '分享日志', desc: '查看分享码使用记录', icon: Share, colorClass: 'icon-coral' },
-  { path: '/toolbox/luxsin-controller', title: 'Luxsin 控制器', desc: '局域网设备数据同步', icon: Tools, colorClass: 'icon-cyan' }
+  { path: '/ota', title: 'OTA 管理', desc: '固件升级包管理', icon: FileText, colorClass: 'icon-cyan' },
+  { path: '/share-code/log', title: '分享日志', desc: '查看分享码使用记录', icon: Share2, colorClass: 'icon-coral' },
+  { path: '/toolbox/luxsin-controller', title: 'Luxsin 控制器', desc: '局域网设备数据同步', icon: ToolCase, colorClass: 'icon-cyan' }
 ]
 
 function formatTime(isoStr) {
diff --git a/frontend/src/views/login/index.vue b/frontend/src/views/login/index.vue
index 700a9a7..f11b1a2 100644
--- a/frontend/src/views/login/index.vue
+++ b/frontend/src/views/login/index.vue
@@ -75,7 +75,7 @@
             show-password
             autocomplete="current-password"
             placeholder="请输入密码"
-            :prefix-icon="Key"
+            :prefix-icon="KeyRound"
             @keyup.enter="handleSubmit"
           />
         </el-form-item>
@@ -101,7 +101,7 @@
 import { reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import { User, Lock, Headset, Key } from '@element-plus/icons-vue'
+import { User, Lock, KeyRound } from '@lucide/vue'
 import { login } from '@/api/auth'
 import { setToken, setUser } from '@/utils/auth'
 import { clearTabsStorage, HOME_PATH } from '@/utils/tabs'
diff --git a/frontend/src/views/model/components/EqCacheDialog.vue b/frontend/src/views/model/components/EqCacheDialog.vue
index fc5896b..576b441 100644
--- a/frontend/src/views/model/components/EqCacheDialog.vue
+++ b/frontend/src/views/model/components/EqCacheDialog.vue
@@ -8,7 +8,7 @@
     @closed="resetEqCacheDialog"
   >
     <div v-if="eqCacheView === 'loading'" class="push-view-loading">
-      <el-icon class="is-loading"><Loading /></el-icon>
+      <el-icon class="is-loading"><LoaderCircle /></el-icon>
       加载中…
     </div>
     <div v-else-if="eqCacheView === 'empty'">
@@ -34,10 +34,10 @@
               v-if="eqCacheFieldLoadingKey === key"
               class="is-loading eq-cache-key-icon"
             >
-              <Loading />
+              <LoaderCircle />
             </el-icon>
             <el-icon v-else class="eq-cache-key-icon">
-              <ArrowDown />
+              <ChevronDown />
             </el-icon>
           </button>
           <div
@@ -66,7 +66,7 @@
 <script setup>
 import { ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
-import { Loading, ArrowDown } from '@element-plus/icons-vue'
+import { LoaderCircle, ChevronDown } from '@lucide/vue'
 import { getModelEqCache, getModelEqCacheField } from '@/api/model'
 import VueJsonPretty from 'vue-json-pretty'
 import 'vue-json-pretty/lib/styles.css'
diff --git a/frontend/src/views/model/components/ModelFormDialog.vue b/frontend/src/views/model/components/ModelFormDialog.vue
index f43bff7..21ff963 100644
--- a/frontend/src/views/model/components/ModelFormDialog.vue
+++ b/frontend/src/views/model/components/ModelFormDialog.vue
@@ -46,21 +46,13 @@
       </div>
 
       <el-form-item label="品牌名称" prop="brand_name">
-        <el-select
+        <el-autocomplete
           v-model="formData.brand_name"
-          placeholder="请选择品牌"
-          filterable
-          allow-create
-          default-first-option
+          placeholder="请输入或选择品牌"
+          clearable
+          :fetch-suggestions="queryBrandSuggestions"
           style="width: 100%"
-        >
-          <el-option
-            v-for="brand in brandOptions"
-            :key="brand.id"
-            :label="brand.name"
-            :value="brand.name"
-          />
-        </el-select>
+        />
         <div v-if="showBrandNotInDbTip" class="brand-not-in-db-tip">
           品牌「{{ (formData.brand_name || '').trim() }}」尚未在品牌库中，可继续填写并保存；保存新型号时将自动创建该品牌。
         </div>
@@ -108,7 +100,7 @@
           accept=".csv,.txt,.json"
           drag
         >
-          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+          <el-icon class="el-icon--upload"><FileUp /></el-icon>
           <div class="el-upload__text">
             拖拽文件到此处或<em>点击上传</em>
           </div>
@@ -161,8 +153,8 @@ import { ElMessage } from 'element-plus'
 import {
   Link,
   CircleCheck,
-  UploadFilled
-} from '@element-plus/icons-vue'
+  FileUp
+} from '@lucide/vue'
 import {
   createModel,
   updateModel,
@@ -205,7 +197,7 @@ const formData = reactive({
 
 const formRules = {
   brand_name: [
-    { required: true, message: '请选择品牌名称', trigger: 'change' }
+    { required: true, message: '请输入品牌名称', trigger: 'blur' }
   ],
   name: [
     { required: true, message: '请输入型号名称', trigger: 'blur' },
@@ -213,6 +205,29 @@ const formRules = {
   ]
 }
 
+// ---- 品牌搜索建议 ----
+
+function queryBrandSuggestions(queryString, cb) {
+  const q = queryString.trim().toLowerCase()
+  const results = q
+    ? props.brandOptions.filter(b => b.name.toLowerCase().includes(q)).map(b => ({ value: b.name }))
+    : props.brandOptions.map(b => ({ value: b.name }))
+  cb(results)
+}
+
+// ---- 品牌大小写对齐 ----
+
+/**
+ * 将品牌名对齐到数据库中已有品牌的大小写形式。
+ * 如果找到不区分大小写的匹配，返回 DB 版本；否则返回原始输入。
+ */
+function normalizeBrandName(name) {
+  const n = (name || '').trim().toLowerCase()
+  if (!n) return name
+  const match = props.brandOptions.find(b => String(b.name || '').trim().toLowerCase() === n)
+  return match ? match.name : name
+}
+
 // ---- 品牌检测 ----
 
 function brandNameExistsInOptions(name) {
@@ -310,7 +325,7 @@ const handleSquigLinkFetch = async (selectedFile) => {
       squigLinkCsv.value = data.csv_content
       squigLinkDataUrl.value = data.data_url || ''
       if (!formData.id) {
-        if (data.brand_name) formData.brand_name = data.brand_name
+        if (data.brand_name) formData.brand_name = normalizeBrandName(data.brand_name)
         if (data.model_name) formData.name = data.model_name
         formData.source = 'Eafonyoung'
         formData.form = data.form || formData.form || 'in-ear'
@@ -357,7 +372,7 @@ const handleSubmit = async (continueAfter = false) => {
     if (valid) {
       submitLoading.value = true
       try {
-        const brandTrimmed = formData.brand_name.trim()
+        const brandTrimmed = normalizeBrandName(formData.brand_name.trim())
         if (!formData.id) {
           const brandOk = await ensureBrandExistsForNewModel(brandTrimmed)
           if (!brandOk) return
diff --git a/frontend/src/views/model/components/PushProgressDialog.vue b/frontend/src/views/model/components/PushProgressDialog.vue
index 7b113a0..049d48b 100644
--- a/frontend/src/views/model/components/PushProgressDialog.vue
+++ b/frontend/src/views/model/components/PushProgressDialog.vue
@@ -25,13 +25,13 @@
         </div>
         <span class="step-status">
           <el-icon v-if="pushSteps.validate === 'loading'" class="is-loading step-icon-loading">
-            <Loading />
+            <LoaderCircle />
           </el-icon>
           <el-icon v-else-if="pushSteps.validate === 'success'" class="step-icon-success">
             <CircleCheck />
           </el-icon>
           <el-icon v-else-if="pushSteps.validate === 'error'" class="step-icon-error">
-            <CircleClose />
+            <CircleX />
           </el-icon>
         </span>
       </li>
@@ -47,13 +47,13 @@
         </div>
         <span class="step-status">
           <el-icon v-if="pushSteps.push === 'loading'" class="is-loading step-icon-loading">
-            <Loading />
+            <LoaderCircle />
           </el-icon>
           <el-icon v-else-if="pushSteps.push === 'success'" class="step-icon-success">
             <CircleCheck />
           </el-icon>
           <el-icon v-else-if="pushSteps.push === 'error'" class="step-icon-error">
-            <CircleClose />
+            <CircleX />
           </el-icon>
         </span>
       </li>
@@ -77,7 +77,7 @@
 <script setup>
 import { ref, reactive, computed } from 'vue'
 import { ElMessage } from 'element-plus'
-import { Loading, CircleCheck, CircleClose } from '@element-plus/icons-vue'
+import { LoaderCircle, CircleCheck, CircleX } from '@lucide/vue'
 import { validatePushToMeilisearch, pushToMeilisearch } from '@/api/model'
 
 const props = defineProps({
diff --git a/frontend/src/views/model/components/PushViewDialog.vue b/frontend/src/views/model/components/PushViewDialog.vue
index fb5ab1c..01d0185 100644
--- a/frontend/src/views/model/components/PushViewDialog.vue
+++ b/frontend/src/views/model/components/PushViewDialog.vue
@@ -6,7 +6,7 @@
     @update:model-value="$emit('update:modelValue', $event)"
   >
     <div v-if="loading" class="push-view-loading">
-      <el-icon class="is-loading"><Loading /></el-icon>
+      <el-icon class="is-loading"><LoaderCircle /></el-icon>
       加载中…
     </div>
     <template v-else-if="!pushed">
@@ -27,7 +27,7 @@
 </template>
 
 <script setup>
-import { Loading } from '@element-plus/icons-vue'
+import { LoaderCircle } from '@lucide/vue'
 
 defineProps({
   modelValue: { type: Boolean, default: false },
diff --git a/frontend/src/views/model/index.vue b/frontend/src/views/model/index.vue
index af0f5e4..e516530 100644
--- a/frontend/src/views/model/index.vue
+++ b/frontend/src/views/model/index.vue
@@ -3,20 +3,14 @@
     <el-card class="search-card">
       <el-form :inline="true" :model="searchForm" class="search-form">
         <el-form-item label="品牌名称">
-          <el-select
+          <el-autocomplete
             v-model="searchForm.brand_name"
-            placeholder="请选择品牌"
-            filterable
+            placeholder="请输入或选择品牌"
             clearable
+            :fetch-suggestions="queryBrandSuggestions"
             style="width: 200px"
-          >
-            <el-option
-              v-for="brand in brandOptions"
-              :key="brand.id"
-              :label="brand.name"
-              :value="brand.name"
-            />
-          </el-select>
+            @keyup.enter="handleSearch"
+          />
         </el-form-item>
         <el-form-item label="型号名称">
           <el-input
@@ -28,7 +22,7 @@
         </el-form-item>
         <el-form-item>
           <el-button type="primary" circle :icon="Search" title="搜索" @click="handleSearch" />
-          <el-button circle :icon="Refresh" title="重置" @click="handleReset" />
+          <el-button circle :icon="RefreshCw" title="重置" @click="handleReset" />
         </el-form-item>
       </el-form>
     </el-card>
@@ -51,14 +45,21 @@
             :disabled="selectedIds.length === 0"
             @click="handleCopySelectedNames"
           >
-            <el-icon><CopyDocument /></el-icon>
+            <el-icon><Copy /></el-icon>
             复制 「{{ selectedIds.length }}」
           </el-button>
         </div>
       </div>
 
-      <div class="table-loading-host" v-loading="loading">
+      <div class="table-loading-host">
+      <el-skeleton v-if="loading" animated>
+        <template #template>
+          <el-skeleton-item variant="rect" style="height: 40px; margin-bottom: 4px; border-radius: 4px" />
+          <el-skeleton-item v-for="i in 6" :key="i" variant="rect" style="height: 48px; margin-bottom: 4px; border-radius: 4px" />
+        </template>
+      </el-skeleton>
       <el-table
+        v-else
         ref="tableRef"
         :data="tableData"
         border
@@ -79,7 +80,7 @@
                 title="复制品牌名称"
                 @click.stop="handleCopyBrand(scope.row)"
               >
-                <CopyDocument />
+                <Copy />
               </el-icon>
             </div>
           </template>
@@ -93,7 +94,7 @@
                 title="复制品牌+型号"
                 @click.stop="handleCopyName(scope.row)"
               >
-                <CopyDocument />
+                <Copy />
               </el-icon>
             </div>
           </template>
@@ -140,7 +141,7 @@
                   :loading="moreActionLoadingId === scope.row.id"
                 >
                   更多操作
-                  <el-icon class="el-icon--right"><ArrowDown /></el-icon>
+                  <el-icon class="el-icon--right"><ChevronDown /></el-icon>
                 </el-button>
                 <template #dropdown>
                   <el-dropdown-menu>
@@ -220,12 +221,12 @@ import { ref, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import {
   Search,
-  Refresh,
+  RefreshCw,
   Plus,
   Upload,
-  ArrowDown,
-  CopyDocument
-} from '@element-plus/icons-vue'
+  ChevronDown,
+  Copy
+} from '@lucide/vue'
 import {
   deleteModel,
   getModelMeasurement,
@@ -253,6 +254,16 @@ const {
   formatDateTime
 } = useModelList(tableRef)
 
+// ---- 品牌搜索建议 ----
+const queryBrandSuggestions = (queryString, cb) => {
+  const list = Array.isArray(brandOptions.value) ? brandOptions.value : []
+  const q = (queryString || '').trim().toLowerCase()
+  const results = q
+    ? list.filter(b => b.name.toLowerCase().includes(q)).map(b => ({ value: b.name }))
+    : list.map(b => ({ value: b.name }))
+  cb(results)
+}
+
 // ---- 对话框状态 ----
 const formDialogVisible = ref(false)
 const moreActionLoadingId = ref(null)
diff --git a/frontend/src/views/ota-target-device/index.vue b/frontend/src/views/ota-target-device/index.vue
index 0baab20..1039175 100644
--- a/frontend/src/views/ota-target-device/index.vue
+++ b/frontend/src/views/ota-target-device/index.vue
@@ -39,7 +39,7 @@
         </el-form-item>
         <el-form-item>
           <el-button type="primary" circle :icon="Search" title="搜索" @click="handleSearch" />
-          <el-button circle :icon="Refresh" title="重置" @click="handleReset" />
+          <el-button circle :icon="RefreshCw" title="重置" @click="handleReset" />
         </el-form-item>
       </el-form>
     </el-card>
@@ -50,8 +50,14 @@
         <el-button type="primary" circle :icon="Plus" title="新增定向设备" @click="handleAdd" />
       </div>
 
-      <div class="table-loading-host" v-loading="loading">
-      <el-table :data="tableData" border stripe style="width: 100%">
+      <div class="table-loading-host">
+      <el-skeleton v-if="loading" animated>
+        <template #template>
+          <el-skeleton-item variant="rect" style="height: 40px; margin-bottom: 4px; border-radius: 4px" />
+          <el-skeleton-item v-for="i in 6" :key="i" variant="rect" style="height: 48px; margin-bottom: 4px; border-radius: 4px" />
+        </template>
+      </el-skeleton>
+      <el-table v-else :data="tableData" border stripe style="width: 100%">
         <el-table-column prop="id" label="ID" width="70" />
         <el-table-column label="OTA 版本" min-width="220" show-overflow-tooltip>
           <template #default="{ row }">
@@ -135,7 +141,7 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Search, Refresh, Plus } from '@element-plus/icons-vue'
+import { Search, RefreshCw, Plus } from '@lucide/vue'
 import {
   getOtaTargetDeviceList,
   createOtaTargetDevice,
diff --git a/frontend/src/views/ota/index.vue b/frontend/src/views/ota/index.vue
index f28f5df..d97e808 100644
--- a/frontend/src/views/ota/index.vue
+++ b/frontend/src/views/ota/index.vue
@@ -55,7 +55,7 @@
         </el-form-item>
         <el-form-item>
           <el-button type="primary" circle :icon="Search" title="搜索" @click="handleSearch" />
-          <el-button circle :icon="Refresh" title="重置" @click="handleReset" />
+          <el-button circle :icon="RefreshCw" title="重置" @click="handleReset" />
         </el-form-item>
       </el-form>
     </el-card>
@@ -66,8 +66,14 @@
         <el-button type="primary" circle :icon="Plus" title="新增 OTA" @click="handleAdd" />
       </div>
 
-      <div class="table-loading-host" v-loading="loading">
-      <el-table :data="tableData" border stripe style="width: 100%">
+      <div class="table-loading-host">
+      <el-skeleton v-if="loading" animated>
+        <template #template>
+          <el-skeleton-item variant="rect" style="height: 40px; margin-bottom: 4px; border-radius: 4px" />
+          <el-skeleton-item v-for="i in 6" :key="i" variant="rect" style="height: 48px; margin-bottom: 4px; border-radius: 4px" />
+        </template>
+      </el-skeleton>
+      <el-table v-else :data="tableData" border stripe style="width: 100%">
         <el-table-column prop="id" label="ID" width="70" />
         <el-table-column prop="verCode" label="版本号" width="90" />
         <el-table-column prop="verName" label="版本名" width="200">
@@ -91,7 +97,7 @@
                 title="复制包地址"
                 @click.stop="handleCopyUrl(row)"
               >
-                <CopyDocument />
+                <Copy />
               </el-icon>
             </div>
           </template>
@@ -129,18 +135,18 @@
             >
               <el-button type="info" size="small">
                 更多操作
-                <el-icon class="el-icon--right"><ArrowDown /></el-icon>
+                <el-icon class="el-icon--right"><ChevronDown /></el-icon>
               </el-button>
               <template #dropdown>
                 <el-dropdown-menu>
                   <el-dropdown-item command="blacklist">
-                    <el-icon style="margin-right:4px"><Warning /></el-icon>黑名单
+                    <el-icon style="margin-right:4px"><UserX /></el-icon>黑名单
                   </el-dropdown-item>
                   <el-dropdown-item command="target">
-                    <el-icon style="margin-right:4px"><Aim /></el-icon>定向升级
+                    <el-icon style="margin-right:4px"><Crosshair /></el-icon>定向升级
                   </el-dropdown-item>
                   <el-dropdown-item command="delete" divided>
-                    <el-icon style="margin-right:4px;color:#f56c6c"><Delete /></el-icon>删除
+                    <el-icon style="margin-right:4px;color:#f56c6c"><Trash2 /></el-icon>删除
                   </el-dropdown-item>
                 </el-dropdown-menu>
               </template>
@@ -382,7 +388,7 @@
 <script setup>
 import { ref, reactive, computed, onMounted, watch, nextTick } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Search, Refresh, Plus, CopyDocument, Warning, Aim, ArrowDown, Delete } from '@element-plus/icons-vue'
+import { Search, RefreshCw, Plus, Copy, UserX, Crosshair, ChevronDown, Trash2 } from '@lucide/vue'
 import { getOtaList, createOta, updateOta, deleteOta, uploadOtaPackage } from '@/api/ota'
 import { getBlackList, createBlackList, deleteBlackList } from '@/api/blacklist'
 import { getOtaTargetDeviceList, createOtaTargetDevice, deleteOtaTargetDevice } from '@/api/otaTargetDevice'
diff --git a/frontend/src/views/share-code/log.vue b/frontend/src/views/share-code/log.vue
index f6e602f..28ff364 100644
--- a/frontend/src/views/share-code/log.vue
+++ b/frontend/src/views/share-code/log.vue
@@ -52,7 +52,7 @@
         </el-form-item>
         <el-form-item>
           <el-button type="primary" circle :icon="Search" title="搜索" @click="handleSearch" />
-          <el-button circle :icon="Refresh" title="重置" @click="handleReset" />
+          <el-button circle :icon="RefreshCw" title="重置" @click="handleReset" />
         </el-form-item>
       </el-form>
     </el-card>
@@ -62,8 +62,15 @@
         <span class="title">分享日志</span>
       </div>
 
-      <div class="table-loading-host" v-loading="loading">
+      <div class="table-loading-host">
+      <el-skeleton v-if="loading" animated>
+        <template #template>
+          <el-skeleton-item variant="rect" style="height: 40px; margin-bottom: 4px; border-radius: 4px" />
+          <el-skeleton-item v-for="i in 6" :key="i" variant="rect" style="height: 48px; margin-bottom: 4px; border-radius: 4px" />
+        </template>
+      </el-skeleton>
       <el-table
+        v-else
         :data="tableData"
         border
         stripe
@@ -142,7 +149,7 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
-import { Search, Refresh } from '@element-plus/icons-vue'
+import { Search, RefreshCw } from '@lucide/vue'
 import VueJsonPretty from 'vue-json-pretty'
 import 'vue-json-pretty/lib/styles.css'
 import { getShareCodeLogs } from '@/api/shareCodeLog'
diff --git a/frontend/src/views/system/users/index.vue b/frontend/src/views/system/users/index.vue
index 49cc146..b43d2e3 100644
--- a/frontend/src/views/system/users/index.vue
+++ b/frontend/src/views/system/users/index.vue
@@ -12,7 +12,7 @@
         </el-form-item>
         <el-form-item>
           <el-button type="primary" circle :icon="Search" title="搜索" @click="handleSearch" />
-          <el-button circle :icon="Refresh" title="重置" @click="handleReset" />
+          <el-button circle :icon="RefreshCw" title="重置" @click="handleReset" />
         </el-form-item>
       </el-form>
     </el-card>
@@ -23,8 +23,14 @@
         <el-button type="primary" circle :icon="Plus" title="新建账号" @click="handleAdd" />
       </div>
 
-      <div class="table-loading-host" v-loading="loading">
-      <el-table :data="tableData" border stripe style="width: 100%">
+      <div class="table-loading-host">
+      <el-skeleton v-if="loading" animated>
+        <template #template>
+          <el-skeleton-item variant="rect" style="height: 40px; margin-bottom: 4px; border-radius: 4px" />
+          <el-skeleton-item v-for="i in 6" :key="i" variant="rect" style="height: 48px; margin-bottom: 4px; border-radius: 4px" />
+        </template>
+      </el-skeleton>
+      <el-table v-else :data="tableData" border stripe style="width: 100%">
         <el-table-column prop="id" label="ID" width="70" />
         <el-table-column prop="username" label="用户名" min-width="140" />
         <el-table-column prop="is_super_admin" label="超级管理员" width="120">
@@ -160,7 +166,7 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Search, Refresh, Plus } from '@element-plus/icons-vue'
+import { Search, RefreshCw, Plus } from '@lucide/vue'
 import { getUsers, createUser, updateUser, deleteUser } from '@/api/user'
 
 const loading = ref(false)
diff --git a/frontend/src/views/toolbox/luxsin-controller/index.vue b/frontend/src/views/toolbox/luxsin-controller/index.vue
index 0cc252b..c61208e 100644
--- a/frontend/src/views/toolbox/luxsin-controller/index.vue
+++ b/frontend/src/views/toolbox/luxsin-controller/index.vue
@@ -73,7 +73,7 @@
 <script setup>
 import { ref } from 'vue'
 import { ElMessage } from 'element-plus'
-import { ArrowRight } from '@element-plus/icons-vue'
+import { ArrowRight } from '@lucide/vue'
 
 defineOptions({ name: 'LuxsinController' })
 
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 572506d..770f026 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -35,7 +35,7 @@ export default defineConfig({
         manualChunks: {
           'vendor-vue': ['vue', 'vue-router'],
           'vendor-element-plus': ['element-plus'],
-          'vendor-element-icons': ['@element-plus/icons-vue'],
+          'vendor-lucide': ['@lucide/vue'],
         }
       }
     }