style(frontend): 优化前端样式和界面细节

- 统一并丰富主题色变量，新增多级浅色和圆角、阴影变量
- 调整应用头部布局及风格，增加logo子标题和用户头像显示
- 细化分类导航样式，添加品类图标和渐变背景
- 优化颜色选择器的交互动效和样式细节
- 美化设计预览组件，提升边框圆角和阴影效果
- 调整子类型面板布局、尺寸及交互动画效果
- 修正全局样式中字体和滚动条的表现，增强用户体验
- 统一按钮、标签等控件的圆角和颜色渐变样式
- 增强Element Plus UI组件的主题覆盖和交互状态样式

frontend/src/components/CategoryNav.vue

@@ -1,7 +1,8 @@
 <template>
   <nav class="category-nav">
-    <div class="nav-header">
-      <h3>玉石品类</h3>
+    <div class="nav-brand">
+      <h3 class="brand-title">玉 宗</h3>
+      <span class="brand-sub">YUZONG JEWELRY</span>
     </div>
     <ul class="category-list">
       <li
@@ -11,6 +12,7 @@
         :class="{ active: currentCategory?.id === category.id }"
         @click="handleSelect(category)"
       >
+        <span class="category-icon">{{ getCategoryIcon(category.name) }}</span>
         <span class="category-name">{{ category.name }}</span>
       </li>
     </ul>
@@ -30,52 +32,93 @@ const currentCategory = computed(() => categoryStore.currentCategory)
 const handleSelect = (category: Category) => {
   categoryStore.selectCategory(category)
 }
+
+// 品类图标映射
+const getCategoryIcon = (name: string): string => {
+  const iconMap: Record<string, string> = {
+    '牌子': '🏷️',
+    '珠子': '🔵',
+    '手把件': '🤲',
+    '雕刻件': '💎',
+    '摆件': '🏺',
+    '手镯': '⭕',
+    '耳钉': '⭐',
+    '耳饰': '🌙',
+    '手链': '🔗',
+    '项链': '📿',
+    '戒指': '💍',
+    '表带': '⌚',
+    '随形': '🗿',
+    '吊坠': '🔻',
+    '珠串': '📿',
+  }
+  for (const [key, icon] of Object.entries(iconMap)) {
+    if (name.includes(key)) return icon
+  }
+  return '💠'
+}
 </script>
 
 <style scoped lang="scss">
 $primary-color: #5B7E6B;
 $primary-light: #8BAF9C;
+$primary-lighter: #D4E5DB;
 $bg-color: #FAF8F5;
 $border-color: #E8E4DF;
 $text-primary: #2C2C2C;
 $text-secondary: #6B6B6B;
+$text-light: #999999;
 
 .category-nav {
-  width: 200px;
-  min-width: 200px;
+  width: 220px;
+  min-width: 220px;
   height: 100%;
-  background-color: #fff;
-  border-right: 1px solid $border-color;
+  background: linear-gradient(180deg, #f7f9f7 0%, #f0f4f1 100%);
   display: flex;
   flex-direction: column;
+  border-right: 1px solid rgba($border-color, 0.5);
 }
 
-.nav-header {
-  padding: 20px 16px;
-  border-bottom: 1px solid $border-color;
+.nav-brand {
+  padding: 24px 20px 20px;
+  text-align: center;
+  border-bottom: 1px solid rgba($border-color, 0.4);
 
-  h3 {
-    font-size: 16px;
-    font-weight: 500;
-    color: $text-primary;
-    margin: 0;
+  .brand-title {
+    font-size: 26px;
+    font-weight: 700;
+    color: $primary-color;
+    letter-spacing: 8px;
+    margin: 0 0 4px 0;
+  }
+
+  .brand-sub {
+    font-size: 10px;
+    color: $text-light;
     letter-spacing: 2px;
+    font-weight: 400;
   }
 }
 
 .category-list {
   list-style: none;
   margin: 0;
-  padding: 0;
+  padding: 12px 12px;
   flex: 1;
   overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 
 .category-item {
-  padding: 14px 20px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
   cursor: pointer;
+  border-radius: 12px;
   transition: all 0.25s ease;
-  border-bottom: 1px solid $border-color;
 
   &:hover {
     background-color: rgba($primary-color, 0.06);
@@ -83,18 +126,29 @@ $text-secondary: #6B6B6B;
 
   &.active {
     background-color: $primary-color;
-    
+
+    .category-icon {
+      filter: brightness(1.2);
+    }
+
     .category-name {
       color: #fff;
-      font-weight: 500;
+      font-weight: 600;
     }
   }
 }
 
+.category-icon {
+  font-size: 16px;
+  width: 24px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
 .category-name {
   font-size: 14px;
   color: $text-secondary;
   letter-spacing: 1px;
-  transition: color 0.25s ease;
+  transition: all 0.25s ease;
 }
 </style>