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

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

frontend/src/components/AppHeader.vue

@@ -2,7 +2,8 @@
   <header class="app-header">
     <div class="header-left">
       <router-link to="/" class="logo">
-        <span class="logo-text">玉宗</span>
+        <span class="logo-text">玉 宗</span>
+        <span class="logo-sub">YUZONG JEWELRY</span>
       </router-link>
     </div>
     <nav class="header-nav">
@@ -14,6 +15,7 @@
       <template v-if="isLoggedIn">
         <el-dropdown trigger="click" @command="handleCommand">
           <span class="user-dropdown">
+            <span class="user-avatar">{{ avatarChar }}</span>
             <span class="user-nickname">{{ userNickname }}</span>
             <el-icon><ArrowDown /></el-icon>
           </span>
@@ -45,6 +47,7 @@ const userStore = useUserStore()
 const isLoggedIn = computed(() => !!userStore.token)
 const userNickname = computed(() => userStore.userInfo?.nickname || '用户')
 const isAdmin = computed(() => !!userStore.userInfo?.is_admin)
+const avatarChar = computed(() => (userStore.userInfo?.nickname || '用')[0])
 
 const handleCommand = (command: string) => {
   if (command === 'user') {
@@ -57,49 +60,82 @@ const handleCommand = (command: string) => {
 </script>
 
 <style scoped lang="scss">
+$primary-color: #5B7E6B;
+$primary-dark: #3D5A4A;
+$text-secondary: #6B6B6B;
+$text-primary: #2C2C2C;
+$border-color: #E8E4DF;
+$bg-color: #FAF8F5;
+
 .app-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 60px;
+  height: 64px;
   padding: 0 32px;
   background-color: #fff;
-  border-bottom: 1px solid #E8E4DF;
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
+  position: sticky;
+  top: 0;
+  z-index: 100;
 }
 
 .header-left {
   .logo {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     text-decoration: none;
+    gap: 2px;
   }
   .logo-text {
-    font-size: 24px;
-    font-weight: 600;
-    color: #5B7E6B;
-    letter-spacing: 4px;
+    font-size: 22px;
+    font-weight: 700;
+    color: $primary-color;
+    letter-spacing: 6px;
+    line-height: 1.2;
+  }
+  .logo-sub {
+    font-size: 9px;
+    color: $text-secondary;
+    letter-spacing: 2.5px;
+    font-weight: 400;
+    opacity: 0.7;
   }
 }
 
 .header-nav {
   display: flex;
-  gap: 32px;
+  gap: 8px;
 
   .nav-link {
-    color: #6B6B6B;
+    color: $text-secondary;
     text-decoration: none;
-    font-size: 15px;
-    padding: 8px 0;
-    border-bottom: 2px solid transparent;
-    transition: all 0.3s;
+    font-size: 14px;
+    padding: 8px 20px;
+    border-radius: 20px;
+    transition: all 0.25s ease;
+    font-weight: 500;
+
+    &:hover {
+      color: $primary-color;
+      background: rgba($primary-color, 0.06);
+    }
 
-    &:hover,
     &.router-link-active {
-      color: #5B7E6B;
-      border-bottom-color: #5B7E6B;
+      color: #fff;
+      background: $primary-color;
     }
 
     &.admin-link {
       color: #E6A23C;
-      &:hover, &.router-link-active { color: #E6A23C; border-bottom-color: #E6A23C; }
+      &:hover {
+        background: rgba(#E6A23C, 0.08);
+      }
+      &.router-link-active {
+        color: #fff;
+        background: #E6A23C;
+      }
     }
   }
 }
@@ -107,26 +143,27 @@ const handleCommand = (command: string) => {
 .header-right {
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: 12px;
 
   .auth-link {
-    color: #6B6B6B;
+    color: $text-secondary;
     text-decoration: none;
     font-size: 14px;
-    padding: 6px 16px;
-    transition: color 0.3s;
+    padding: 8px 20px;
+    border-radius: 20px;
+    transition: all 0.25s ease;
 
     &:hover {
-      color: #5B7E6B;
+      color: $primary-color;
+      background: rgba($primary-color, 0.06);
     }
 
     &.auth-register {
-      background-color: #5B7E6B;
+      background-color: $primary-color;
       color: #fff;
-      border-radius: 4px;
 
       &:hover {
-        background-color: #3D5A4A;
+        background-color: $primary-dark;
       }
     }
   }
@@ -134,18 +171,35 @@ const handleCommand = (command: string) => {
   .user-dropdown {
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 8px;
     cursor: pointer;
-    color: #2C2C2C;
+    color: $text-primary;
     font-size: 14px;
+    padding: 6px 12px;
+    border-radius: 20px;
+    transition: all 0.25s ease;
 
     &:hover {
-      color: #5B7E6B;
+      background: rgba($primary-color, 0.06);
+      color: $primary-color;
     }
   }
 
+  .user-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, $primary-color, $primary-dark);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
   .user-nickname {
-    max-width: 120px;
+    max-width: 100px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;