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

- 统一并丰富主题色变量，新增多级浅色和圆角、阴影变量 - 调整应用头部布局及风格，增加logo子标题和用户头像显示 - 细化分类导航样式，添加品类图标和渐变背景 - 优化颜色选择器的交互动效和样式细节 - 美化设计预览组件，提升边框圆角和阴影效果 - 调整子类型面板布局、尺寸及交互动画效果 - 修正全局样式中字体和滚动条的表现，增强用户体验 - 统一按钮、标签等控件的圆角和颜色渐变样式 - 增强Element Plus UI组件的主题覆盖和交互状态样式
2026-03-29 15:55:27 +08:00
parent 5f3cda2a63
commit 4382feedb3
14 changed files with 669 additions and 509 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/backend/uvicorn.log
+++ b/backend/uvicorn.log
@@ -220,3 +220,53 @@ INFO:     Finished server process [76199]
 INFO:     Started server process [83069]
 INFO:     Waiting for application startup.
 INFO:     Application startup complete.
+WARNING:  StatReload detected changes in 'app/services/prompt_builder.py'. Reloading...
+INFO:     Shutting down
+INFO:     Waiting for application shutdown.
+INFO:     Application shutdown complete.
+INFO:     Finished server process [83069]
+✅ 上传目录已准备: uploads
+👋 应用已关闭
+INFO:     Started server process [903]
+INFO:     Waiting for application startup.
+INFO:     Application startup complete.
+✅ 上传目录已准备: uploads
+INFO:     127.0.0.1:53852 - "POST /api/auth/login HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53856 - "GET /api/auth/me HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53862 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53865 - "GET /api/categories/1/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53866 - "GET /api/categories/1/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53870 - "GET /api/categories/2/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53872 - "GET /api/categories/2/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53877 - "GET /api/categories/3/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53878 - "GET /api/categories/3/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53883 - "GET /api/categories/4/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53885 - "GET /api/categories/4/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:53890 - "GET /api/categories HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54023 - "GET /api/categories/1/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54021 - "GET /api/categories/1/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54029 - "GET /api/categories/2/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54027 - "GET /api/categories/2/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54050 - "GET /api/categories/4/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54048 - "GET /api/categories/4/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54076 - "GET /api/categories/4/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54075 - "GET /api/categories/4/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54092 - "GET /api/categories/6/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54091 - "GET /api/categories/6/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54098 - "GET /api/categories/7/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54096 - "GET /api/categories/7/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54104 - "GET /api/categories/8/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54102 - "GET /api/categories/8/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54110 - "GET /api/categories/9/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54109 - "GET /api/categories/9/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54117 - "GET /api/categories/10/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54115 - "GET /api/categories/10/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54123 - "GET /api/categories/11/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54121 - "GET /api/categories/11/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54131 - "GET /api/categories/12/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54129 - "GET /api/categories/12/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54134 - "GET /api/categories/13/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54140 - "GET /api/categories/1/colors HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54139 - "GET /api/categories/1/sub-types HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54330 - "GET /api/auth/me HTTP/1.1" 200 OK
+INFO:     127.0.0.1:54332 - "GET /api/categories HTTP/1.1" 200 OK
--- a/frontend/src/assets/styles/theme.scss
+++ b/frontend/src/assets/styles/theme.scss
@@ -1,25 +1,67 @@
 // 玉宗品牌色 - 中式雅致风格
 $primary-color: #5B7E6B;      // 青玉色 - 主色调
 $primary-light: #8BAF9C;      // 浅青
+$primary-lighter: #D4E5DB;    // 极浅青
 $primary-dark: #3D5A4A;       // 深青
 $secondary-color: #C4A86C;    // 金缕色 - 辅助色
+$secondary-light: #E0D1A8;    // 浅金
 $bg-color: #FAF8F5;           // 暖白底色
 $bg-dark: #F0EDE8;            // 深一级底色
+$bg-card: #FFFFFF;            // 卡片底色
 $text-primary: #2C2C2C;       // 主文字
 $text-secondary: #6B6B6B;     // 次要文字
 $text-light: #999999;         // 辅助文字
+$text-placeholder: #BFBFBF;   // 占位文字
 $border-color: #E8E4DF;       // 边框色
+$border-light: #F0EDE8;       // 浅边框
 $ink-color: #1A1A2E;          // 墨色

+// 圆角
+$radius-sm: 8px;
+$radius: 12px;
+$radius-lg: 16px;
+$radius-xl: 20px;
+$radius-pill: 999px;
+
+// 阴影
+$shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
+$shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+$shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
+
 // Element Plus 主题覆盖
 :root {
+  // 颜色
  --el-color-primary: #{$primary-color};
  --el-color-primary-light-3: #{$primary-light};
+  --el-color-primary-light-5: #a8c7b5;
+  --el-color-primary-light-7: #{$primary-lighter};
+  --el-color-primary-light-8: #dfeee5;
+  --el-color-primary-light-9: #eaf4ee;
  --el-color-primary-dark-2: #{$primary-dark};
  --el-bg-color: #{$bg-color};
+  --el-bg-color-overlay: #{$bg-card};
  --el-border-color: #{$border-color};
+  --el-border-color-light: #{$border-light};
  --el-text-color-primary: #{$text-primary};
  --el-text-color-regular: #{$text-secondary};
+  --el-text-color-secondary: #{$text-light};
+  --el-text-color-placeholder: #{$text-placeholder};
+  --el-fill-color-light: #{$bg-color};
+  --el-fill-color-lighter: #{$bg-color};
+
+  // 圆角
+  --el-border-radius-base: #{$radius-sm};
+  --el-border-radius-small: 6px;
+  --el-border-radius-round: #{$radius-pill};
+
+  // 字体
+  --el-font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', -apple-system, sans-serif;
+  --el-font-size-base: 14px;
+
+  // 阴影
+  --el-box-shadow: #{$shadow};
+  --el-box-shadow-light: #{$shadow-sm};
+  --el-box-shadow-lighter: 0 1px 4px rgba(0, 0, 0, 0.03);
 }

 // 全局基础样式
@@ -30,7 +72,7 @@ $ink-color: #1A1A2E;          // 墨色
 }

 body {
-  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', -apple-system, sans-serif;
  background-color: $bg-color;
  color: $text-primary;
  -webkit-font-smoothing: antialiased;
@@ -39,6 +81,10 @@ body {
 // 滚动条美化
 ::-webkit-scrollbar {
  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
 }
 ::-webkit-scrollbar-thumb {
  background: $border-color;
@@ -47,3 +93,44 @@ body {
 ::-webkit-scrollbar-thumb:hover {
  background: $text-light;
 }
+
+// Element Plus 组件全局样式增强
+.el-button--primary {
+  background-color: $primary-color !important;
+  border-color: $primary-color !important;
+  border-radius: $radius-sm !important;
+
+  &:hover, &:focus {
+    background-color: $primary-dark !important;
+    border-color: $primary-dark !important;
+  }
+}
+
+.el-input__wrapper {
+  border-radius: $radius-sm !important;
+  transition: all 0.25s ease !important;
+}
+
+.el-textarea__inner {
+  border-radius: $radius !important;
+}
+
+.el-card {
+  border-radius: $radius !important;
+  border: 1px solid $border-light !important;
+  box-shadow: $shadow-sm !important;
+}
+
+.el-dialog {
+  border-radius: $radius-lg !important;
+}
+
+.el-message-box {
+  border-radius: $radius !important;
+}
+
+.el-dropdown-menu {
+  border-radius: $radius-sm !important;
+  border: 1px solid $border-light !important;
+  box-shadow: $shadow !important;
+}
--- a/frontend/src/components/AppHeader.vue
+++ b/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;
--- a/frontend/src/components/CategoryNav.vue
+++ b/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>
--- a/frontend/src/components/ColorPicker.vue
+++ b/frontend/src/components/ColorPicker.vue
@@ -44,12 +44,12 @@ $text-primary: #2C2C2C;
 $text-secondary: #6B6B6B;

 .color-picker {
-  margin-top: 24px;
+  margin-top: 28px;
 }

 .picker-title {
  font-size: 15px;
-  font-weight: 500;
+  font-weight: 600;
  color: $text-primary;
  margin: 0 0 16px 0;
  letter-spacing: 1px;
@@ -66,21 +66,26 @@ $text-secondary: #6B6B6B;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
-  padding: 8px;
-  border-radius: 8px;
+  padding: 10px;
+  border-radius: 12px;
  transition: all 0.25s ease;

  &:hover {
    background-color: rgba($primary-color, 0.06);
+    .color-swatch {
+      transform: scale(1.08);
+    }
  }

  &.active {
+    background-color: rgba($primary-color, 0.08);
    .color-swatch {
-      box-shadow: 0 0 0 3px $secondary-color;
+      transform: scale(1.1);
+      box-shadow: 0 0 0 3px $secondary-color, 0 4px 12px rgba(0, 0, 0, 0.12);
    }
    .color-name {
      color: $primary-color;
-      font-weight: 500;
+      font-weight: 600;
    }
  }
 }
@@ -89,9 +94,9 @@ $text-secondary: #6B6B6B;
  width: 48px;
  height: 48px;
  border-radius: 50%;
-  border: 2px solid $border-color;
+  border: 2px solid rgba($border-color, 0.6);
  transition: all 0.25s ease;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.3);
 }

 .color-name {
--- a/frontend/src/components/DesignPreview.vue
+++ b/frontend/src/components/DesignPreview.vue
@@ -606,10 +606,13 @@ const goToUserCenter = () => {
 <style scoped lang="scss">
 $primary-color: #5B7E6B;
 $primary-light: #8BAF9C;
+$primary-lighter: #D4E5DB;
+$primary-dark: #3D5A4A;
 $secondary-color: #C4A86C;
 $bg-color: #FAF8F5;
 $bg-dark: #F0EDE8;
 $border-color: #E8E4DF;
+$border-light: #F0EDE8;
 $text-primary: #2C2C2C;
 $text-secondary: #6B6B6B;
 $text-light: #999999;
@@ -625,8 +628,8 @@ $text-light: #999999;
  gap: 8px;
  padding: 4px;
  background: #fff;
-  border-radius: 10px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  border-radius: 14px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
 }

 .view-tab {
@@ -634,7 +637,7 @@ $text-light: #999999;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid transparent;
-  border-radius: 8px;
+  border-radius: 10px;
  font-size: 14px;
  color: $text-secondary;
  cursor: pointer;
@@ -658,9 +661,10 @@ $text-light: #999999;
  position: absolute;
  top: 16px;
  left: 16px;
-  background: rgba(0, 0, 0, 0.5);
-  padding: 4px 12px;
-  border-radius: 12px;
+  background: rgba(0, 0, 0, 0.45);
+  padding: 4px 14px;
+  border-radius: 20px;
+  backdrop-filter: blur(4px);
 }

 .indicator-text {
@@ -671,9 +675,9 @@ $text-light: #999999;
 .preview-container {
  position: relative;
  background: #fff;
-  border-radius: 12px;
+  border-radius: 16px;
  padding: 24px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  overflow: hidden;
 }

@@ -690,8 +694,8 @@ $text-light: #999999;
 .design-image {
  max-width: 100%;
  max-height: 450px;
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  cursor: zoom-in;
  
  :deep(img) {
@@ -711,7 +715,7 @@ $text-light: #999999;
  width: 300px;
  height: 300px;
  background: $bg-color;
-  border-radius: 8px;
+  border-radius: 12px;
  color: $text-light;
  
  .el-icon {
@@ -737,8 +741,9 @@ $text-light: #999999;
  gap: 8px;
  background: rgba(255, 255, 255, 0.95);
  padding: 8px 12px;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  backdrop-filter: blur(4px);
 }

 .zoom-btn {
@@ -749,7 +754,7 @@ $text-light: #999999;
  height: 32px;
  background: transparent;
  border: 1px solid $border-color;
-  border-radius: 6px;
+  border-radius: 8px;
  cursor: pointer;
  color: $text-secondary;
  transition: all 0.2s ease;
@@ -775,18 +780,18 @@ $text-light: #999999;

 .design-info {
  background: #fff;
-  border-radius: 12px;
+  border-radius: 16px;
  padding: 20px 24px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
 }

 .info-title {
  font-size: 15px;
-  font-weight: 500;
+  font-weight: 600;
  color: $text-primary;
  margin: 0 0 16px 0;
  padding-bottom: 12px;
-  border-bottom: 1px solid $border-color;
+  border-bottom: 1px solid $border-light;
  letter-spacing: 1px;
 }

@@ -824,7 +829,7 @@ $text-light: #999999;

 .action-buttons {
  display: flex;
-  gap: 16px;
+  gap: 12px;
  flex-wrap: wrap;
 }

@@ -834,8 +839,9 @@ $text-light: #999999;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
-  border-radius: 8px;
-  font-size: 15px;
+  border-radius: 12px;
+  font-size: 14px;
+  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
@@ -847,14 +853,13 @@ $text-light: #999999;
 }

 .download-btn {
-  background: $primary-color;
+  background: linear-gradient(135deg, $primary-color, $primary-dark);
  color: #fff;
  border: none;
  
  &:hover {
-    background: #4a6a5a;
    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba($primary-color, 0.3);
+    box-shadow: 0 6px 20px rgba($primary-color, 0.3);
  }
 }

@@ -870,14 +875,13 @@ $text-light: #999999;
 }

 .model3d-btn {
-  background: #8E44AD;
+  background: linear-gradient(135deg, $primary-light, $primary-color);
  color: #fff;
  border: none;
  
  &:hover:not(:disabled) {
-    background: #7D3C98;
    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(#8E44AD, 0.3);
+    box-shadow: 0 6px 20px rgba($primary-color, 0.25);
  }
  
  &:disabled {
@@ -888,18 +892,18 @@ $text-light: #999999;

 .model3d-section {
  background: #fff;
-  border-radius: 12px;
+  border-radius: 16px;
  padding: 20px 24px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
 }

 .section-title {
  font-size: 15px;
-  font-weight: 500;
+  font-weight: 600;
  color: $text-primary;
  margin: 0 0 16px 0;
  padding-bottom: 12px;
-  border-bottom: 1px solid $border-color;
+  border-bottom: 1px solid $border-light;
  letter-spacing: 1px;
 }

@@ -925,19 +929,19 @@ $text-light: #999999;
  display: inline-flex;
  align-items: center;
  gap: 4px;
-  padding: 6px 14px;
-  font-size: 12px;
-  color: #666;
-  background: #f5f5f5;
-  border: 1px solid #e0e0e0;
-  border-radius: 6px;
+  padding: 8px 16px;
+  font-size: 13px;
+  color: $text-secondary;
+  background: $bg-color;
+  border: 1px solid $border-color;
+  border-radius: 20px;
  cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.25s ease;

  &:hover {
    color: $primary-color;
    border-color: $primary-color;
-    background: rgba($primary-color, 0.05);
+    background: rgba($primary-color, 0.04);
  }

  &:disabled {
@@ -949,7 +953,7 @@ $text-light: #999999;
 }

 .model-viewer-wrapper {
-  border-radius: 8px;
+  border-radius: 12px;
  overflow: hidden;
  background: $bg-color;
 }
@@ -957,13 +961,13 @@ $text-light: #999999;
 // 视频区域样式
 .video-section {
  background: #fff;
-  border-radius: 12px;
+  border-radius: 16px;
  padding: 20px 24px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
 }

 .video-wrapper {
-  border-radius: 8px;
+  border-radius: 12px;
  overflow: hidden;
  background: #000;
 }
@@ -983,7 +987,7 @@ $text-light: #999999;
 }

 .video-btn {
-  background: linear-gradient(135deg, #e040fb 0%, #7c4dff 100%) !important;
+  background: linear-gradient(135deg, $secondary-color, #a89058) !important;
  color: #fff !important;
  border: none !important;

--- a/frontend/src/components/SubTypePanel.vue
+++ b/frontend/src/components/SubTypePanel.vue
@@ -203,16 +203,19 @@ const goToGenerate = () => {
 <style scoped lang="scss">
 $primary-color: #5B7E6B;
 $primary-light: #8BAF9C;
+$primary-lighter: #D4E5DB;
+$primary-dark: #3D5A4A;
 $secondary-color: #C4A86C;
 $bg-color: #FAF8F5;
 $border-color: #E8E4DF;
+$border-light: #F0EDE8;
 $text-primary: #2C2C2C;
 $text-secondary: #6B6B6B;
 $text-light: #999999;

 .subtype-panel {
  flex: 1;
-  padding: 32px 40px;
+  padding: 36px 44px;
  overflow-y: auto;
  background-color: $bg-color;
 }
@@ -227,8 +230,9 @@ $text-light: #999999;
 }

 .empty-icon {
-  color: $border-color;
+  color: $primary-light;
  margin-bottom: 24px;
+  opacity: 0.6;
 }

 .empty-text {
@@ -263,8 +267,8 @@ $text-light: #999999;
 }

 .panel-title {
-  font-size: 20px;
-  font-weight: 500;
+  font-size: 22px;
+  font-weight: 600;
  color: $text-primary;
  margin: 0 0 8px 0;
  letter-spacing: 2px;
@@ -273,19 +277,19 @@ $text-light: #999999;
 .panel-desc {
  font-size: 14px;
  color: $text-secondary;
-  margin: 0 0 24px 0;
+  margin: 0 0 28px 0;
 }

 // 牌型卡片网格
 .card-grid {
  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px;
 }

 .subtype-card {
  background: #fff;
-  border-radius: 8px;
+  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s ease;
@@ -293,13 +297,13 @@ $text-light: #999999;
  border: 2px solid transparent;

  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+    transform: translateY(-3px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  }

  &.active {
    border-color: $primary-color;
-    box-shadow: 0 4px 16px rgba($primary-color, 0.2);
+    box-shadow: 0 4px 16px rgba($primary-color, 0.15);
  }
 }

@@ -318,8 +322,8 @@ $text-light: #999999;
 }

 .card-placeholder {
-  width: 60px;
-  height: 60px;
+  width: 56px;
+  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, $primary-light, $primary-color);
  display: flex;
@@ -327,7 +331,7 @@ $text-light: #999999;
  justify-content: center;

  span {
-    font-size: 24px;
+    font-size: 22px;
    color: #fff;
    font-weight: 500;
  }
@@ -336,12 +340,13 @@ $text-light: #999999;
 .card-info {
  padding: 12px;
  text-align: center;
-  border-top: 1px solid $border-color;
+  border-top: 1px solid $border-light;
 }

 .card-name {
  font-size: 14px;
  color: $text-primary;
+  font-weight: 500;
 }

 // 尺寸标签网格
@@ -352,10 +357,10 @@ $text-light: #999999;
 }

 .size-tag {
-  padding: 10px 20px;
+  padding: 10px 22px;
  background: #fff;
  border: 1px solid $border-color;
-  border-radius: 6px;
+  border-radius: 20px;
  font-size: 14px;
  color: $text-secondary;
  cursor: pointer;
@@ -364,6 +369,7 @@ $text-light: #999999;
  &:hover {
    border-color: $primary-light;
    color: $primary-color;
+    background: rgba($primary-color, 0.04);
  }

  &.active {
@@ -378,11 +384,12 @@ $text-light: #999999;
  display: flex;
  flex-direction: column;
  align-items: center;
-  padding: 40px;
+  padding: 48px 40px;
  background: #fff;
-  border-radius: 12px;
+  border-radius: 16px;
  text-align: center;
  margin-bottom: 24px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }

 .intro-icon {
@@ -400,23 +407,24 @@ $text-light: #999999;
 .action-bar {
  margin-top: 32px;
  padding-top: 24px;
-  border-top: 1px solid $border-color;
+  border-top: 1px solid $border-light;
 }

 .btn-primary {
-  padding: 12px 32px;
-  background-color: $primary-color;
+  padding: 14px 36px;
+  background: linear-gradient(135deg, $primary-color, $primary-dark);
  color: #fff;
  border: none;
-  border-radius: 6px;
+  border-radius: 12px;
  font-size: 15px;
+  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  letter-spacing: 2px;

  &:hover {
-    background-color: #4a6a5a;
-    transform: translateY(-1px);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba($primary-color, 0.3);
  }

  &:active {
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1,296 +1,108 @@
+/* ========================================
+   玉宗珠宝设计系统 - 全局基础样式
+   ======================================== */
+
 :root {
-  --text: #6b6375;
-  --text-h: #08060d;
-  --bg: #fff;
-  --border: #e5e4e7;
-  --code-bg: #f4f3ec;
-  --accent: #aa3bff;
-  --accent-bg: rgba(170, 59, 255, 0.1);
-  --accent-border: rgba(170, 59, 255, 0.5);
-  --social-bg: rgba(244, 243, 236, 0.5);
-  --shadow:
-    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+  /* 品牌色系 */
+  --yz-primary: #5B7E6B;
+  --yz-primary-light: #8BAF9C;
+  --yz-primary-lighter: #D4E5DB;
+  --yz-primary-dark: #3D5A4A;
+  --yz-secondary: #C4A86C;
+  --yz-secondary-light: #E0D1A8;

-  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --mono: ui-monospace, Consolas, monospace;
+  /* 背景色 */
+  --yz-bg: #FAF8F5;
+  --yz-bg-dark: #F0EDE8;
+  --yz-bg-card: #FFFFFF;

-  font: 18px/145% var(--sans);
-  letter-spacing: 0.18px;
-  color-scheme: light dark;
-  color: var(--text);
-  background: var(--bg);
+  /* 文字色 */
+  --yz-text: #2C2C2C;
+  --yz-text-secondary: #6B6B6B;
+  --yz-text-light: #999999;
+  --yz-text-placeholder: #BFBFBF;
+
+  /* 边框 & 分割线 */
+  --yz-border: #E8E4DF;
+  --yz-border-light: #F0EDE8;
+  --yz-divider: #F0EDE8;
+
+  /* 阴影 */
+  --yz-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
+  --yz-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+  --yz-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
+
+  /* 圆角 */
+  --yz-radius-sm: 8px;
+  --yz-radius: 12px;
+  --yz-radius-lg: 16px;
+  --yz-radius-xl: 20px;
+  --yz-radius-pill: 999px;
+
+  /* 字体 */
+  --yz-font: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', -apple-system, sans-serif;
+
+  /* 过渡 */
+  --yz-transition: all 0.25s ease;
+  --yz-transition-fast: all 0.15s ease;
+
+  font-family: var(--yz-font);
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--yz-text);
+  background: var(--yz-bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
-
-  @media (max-width: 1024px) {
-    font-size: 16px;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --text: #9ca3af;
-    --text-h: #f3f4f6;
-    --bg: #16171d;
-    --border: #2e303a;
-    --code-bg: #1f2028;
-    --accent: #c084fc;
-    --accent-bg: rgba(192, 132, 252, 0.15);
-    --accent-border: rgba(192, 132, 252, 0.5);
-    --social-bg: rgba(47, 48, 58, 0.5);
-    --shadow:
-      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
-  }
-
-  #social .button-icon {
-    filter: invert(1) brightness(2);
-  }
 }

 body {
  margin: 0;
+  min-height: 100vh;
 }

-h1,
-h2 {
-  font-family: var(--heading);
-  font-weight: 500;
-  color: var(--text-h);
-}
-
-h1 {
-  font-size: 56px;
-  letter-spacing: -1.68px;
-  margin: 32px 0;
-  @media (max-width: 1024px) {
-    font-size: 36px;
-    margin: 20px 0;
-  }
-}
-h2 {
-  font-size: 24px;
-  line-height: 118%;
-  letter-spacing: -0.24px;
-  margin: 0 0 8px;
-  @media (max-width: 1024px) {
-    font-size: 20px;
-  }
-}
-p {
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--yz-font);
+  color: var(--yz-text);
+  font-weight: 600;
  margin: 0;
 }

-code,
-.counter {
-  font-family: var(--mono);
-  display: inline-flex;
-  border-radius: 4px;
-  color: var(--text-h);
+h1 { font-size: 28px; letter-spacing: 2px; }
+h2 { font-size: 22px; letter-spacing: 1.5px; }
+h3 { font-size: 18px; letter-spacing: 1px; }
+h4 { font-size: 16px; letter-spacing: 0.5px; }
+
+p { margin: 0; }
+
+a {
+  color: var(--yz-primary);
+  text-decoration: none;
+  transition: var(--yz-transition-fast);
 }
-
-code {
-  font-size: 15px;
-  line-height: 135%;
-  padding: 4px 8px;
-  background: var(--code-bg);
-}
-
-.counter {
-  font-size: 16px;
-  padding: 5px 10px;
-  border-radius: 5px;
-  color: var(--accent);
-  background: var(--accent-bg);
-  border: 2px solid transparent;
-  transition: border-color 0.3s;
-  margin-bottom: 24px;
-
-  &:hover {
-    border-color: var(--accent-border);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-  }
-}
-
-.hero {
-  position: relative;
-
-  .base,
-  .framework,
-  .vite {
-    inset-inline: 0;
-    margin: 0 auto;
-  }
-
-  .base {
-    width: 170px;
-    position: relative;
-    z-index: 0;
-  }
-
-  .framework,
-  .vite {
-    position: absolute;
-  }
-
-  .framework {
-    z-index: 1;
-    top: 34px;
-    height: 28px;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
-      scale(1.4);
-  }
-
-  .vite {
-    z-index: 0;
-    top: 107px;
-    height: 26px;
-    width: auto;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
-      scale(0.8);
-  }
+a:hover {
+  color: var(--yz-primary-dark);
 }

 #app {
-  width: 1126px;
+  width: 100%;
  max-width: 100%;
-  margin: 0 auto;
-  text-align: center;
-  border-inline: 1px solid var(--border);
-  min-height: 100svh;
+  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
 }

-#center {
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-  place-content: center;
-  place-items: center;
-  flex-grow: 1;
-
-  @media (max-width: 1024px) {
-    padding: 32px 20px 24px;
-    gap: 18px;
-  }
+/* 全局选中态 */
+::selection {
+  background: var(--yz-primary-lighter);
+  color: var(--yz-text);
 }

-#next-steps {
-  display: flex;
-  border-top: 1px solid var(--border);
-  text-align: left;
-
-  & > div {
-    flex: 1 1 0;
-    padding: 32px;
-    @media (max-width: 1024px) {
-      padding: 24px 20px;
-    }
-  }
-
-  .icon {
-    margin-bottom: 16px;
-    width: 22px;
-    height: 22px;
-  }
-
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    text-align: center;
-  }
-}
-
-#docs {
-  border-right: 1px solid var(--border);
-
-  @media (max-width: 1024px) {
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-  }
-}
-
-#next-steps ul {
-  list-style: none;
-  padding: 0;
-  display: flex;
-  gap: 8px;
-  margin: 32px 0 0;
-
-  .logo {
-    height: 18px;
-  }
-
-  a {
-    color: var(--text-h);
-    font-size: 16px;
-    border-radius: 6px;
-    background: var(--social-bg);
-    display: flex;
-    padding: 6px 12px;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-    transition: box-shadow 0.3s;
-
-    &:hover {
-      box-shadow: var(--shadow);
-    }
-    .button-icon {
-      height: 18px;
-      width: 18px;
-    }
-  }
-
-  @media (max-width: 1024px) {
-    margin-top: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    li {
-      flex: 1 1 calc(50% - 8px);
-    }
-
-    a {
-      width: 100%;
-      justify-content: center;
-      box-sizing: border-box;
-    }
-  }
-}
-
-#spacer {
-  height: 88px;
-  border-top: 1px solid var(--border);
-  @media (max-width: 1024px) {
-    height: 48px;
-  }
-}
-
-.ticks {
-  position: relative;
-  width: 100%;
-
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    top: -4.5px;
-    border: 5px solid transparent;
-  }
-
-  &::before {
-    left: 0;
-    border-left-color: var(--border);
-  }
-  &::after {
-    right: 0;
-    border-right-color: var(--border);
+/* 响应式基础 */
+@media (max-width: 768px) {
+  :root {
+    font-size: 13px;
  }
 }
--- a/frontend/src/views/DesignPage.vue
+++ b/frontend/src/views/DesignPage.vue
@@ -22,7 +22,7 @@ onMounted(() => {
 <style scoped lang="scss">
 .design-page {
  display: flex;
-  height: calc(100vh - 60px);
+  height: calc(100vh - 64px);
  background-color: #FAF8F5;
 }
 </style>
--- a/frontend/src/views/GeneratePage.vue
+++ b/frontend/src/views/GeneratePage.vue
@@ -476,17 +476,19 @@ onUnmounted(() => {
 <style scoped lang="scss">
 $primary-color: #5B7E6B;
 $primary-light: #8BAF9C;
+$primary-lighter: #D4E5DB;
 $primary-dark: #3D5A4A;
 $secondary-color: #C4A86C;
 $bg-color: #FAF8F5;
 $bg-dark: #F0EDE8;
 $border-color: #E8E4DF;
+$border-light: #F0EDE8;
 $text-primary: #2C2C2C;
 $text-secondary: #6B6B6B;
 $text-light: #999999;

 .generate-page {
-  min-height: calc(100vh - 60px);
+  min-height: calc(100vh - 64px);
  background-color: $bg-color;
  padding-bottom: 60px;
 }
@@ -496,27 +498,28 @@ $text-light: #999999;
  display: flex;
  align-items: center;
  gap: 24px;
-  padding: 20px 40px;
+  padding: 16px 40px;
  background: #fff;
-  border-bottom: 1px solid $border-color;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
 }

 .back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
-  padding: 8px 16px;
+  padding: 8px 18px;
  background: transparent;
  border: 1px solid $border-color;
-  border-radius: 6px;
+  border-radius: 20px;
  color: $text-secondary;
  font-size: 14px;
  cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.25s ease;
  
  &:hover {
    border-color: $primary-color;
    color: $primary-color;
+    background: rgba($primary-color, 0.04);
  }
 }

@@ -591,7 +594,7 @@ $text-light: #999999;

 .section-title {
  font-size: 24px;
-  font-weight: 500;
+  font-weight: 600;
  color: $text-primary;
  margin: 0 0 8px 0;
  letter-spacing: 2px;
@@ -610,14 +613,15 @@ $text-light: #999999;
 // 参数面板
 .params-panel {
  background: #fff;
-  border-radius: 12px;
-  padding: 24px 28px;
+  border-radius: 16px;
+  padding: 28px 32px;
  margin-bottom: 28px;
-  border: 1px solid $border-color;
+  border: 1px solid $border-light;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
 }

 .param-group {
-  margin-bottom: 18px;
+  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
@@ -627,9 +631,9 @@ $text-light: #999999;
 .param-label {
  display: block;
  font-size: 13px;
-  font-weight: 500;
+  font-weight: 600;
  color: $text-secondary;
-  margin-bottom: 8px;
+  margin-bottom: 10px;
  letter-spacing: 1px;

  .param-hint {
@@ -648,19 +652,20 @@ $text-light: #999999;

 .tag-item {
  display: inline-block;
-  padding: 6px 14px;
+  padding: 7px 16px;
  background: $bg-color;
  border: 1px solid $border-color;
-  border-radius: 16px;
+  border-radius: 20px;
  font-size: 13px;
  color: $text-secondary;
  cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.25s ease;
  user-select: none;

  &:hover {
    border-color: $primary-light;
    color: $primary-color;
+    background: rgba($primary-color, 0.04);
  }

  &.active {
@@ -674,7 +679,7 @@ $text-light: #999999;
  width: 130px;

  :deep(.el-input__inner) {
-    border-radius: 16px;
+    border-radius: 20px;
    font-size: 13px;
  }
 }
@@ -685,7 +690,7 @@ $text-light: #999999;

 .prompt-title {
  font-size: 16px;
-  font-weight: 500;
+  font-weight: 600;
  color: $text-primary;
  margin: 0;
  letter-spacing: 1px;
@@ -695,9 +700,9 @@ $text-light: #999999;
  :deep(.el-textarea__inner) {
    background: #fff;
    border: 2px solid $border-color;
-    border-radius: 12px;
+    border-radius: 14px;
    padding: 20px;
-    font-size: 16px;
+    font-size: 15px;
    line-height: 1.8;
    color: $text-primary;
    transition: all 0.3s ease;
@@ -708,7 +713,7 @@ $text-light: #999999;
    
    &:focus {
      border-color: $primary-color;
-      box-shadow: 0 0 0 4px rgba($primary-color, 0.1);
+      box-shadow: 0 0 0 4px rgba($primary-color, 0.08);
    }
  }
  
@@ -728,16 +733,16 @@ $text-light: #999999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
-  padding: 16px 48px;
+  padding: 16px 52px;
  background: linear-gradient(135deg, $primary-color, $primary-dark);
  color: #fff;
  border: none;
-  border-radius: 12px;
+  border-radius: 14px;
  font-size: 17px;
-  font-weight: 500;
+  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
-  letter-spacing: 2px;
+  letter-spacing: 3px;
  
  .el-icon {
    font-size: 20px;
@@ -745,7 +750,7 @@ $text-light: #999999;
  
  &:hover:not(:disabled) {
    transform: translateY(-2px);
-    box-shadow: 0 8px 24px rgba($primary-color, 0.4);
+    box-shadow: 0 8px 28px rgba($primary-color, 0.35);
  }
  
  &:active:not(:disabled) {
@@ -764,16 +769,18 @@ $text-light: #999999;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
-  background: $primary-color;
+  background: linear-gradient(135deg, $primary-color, $primary-dark);
  color: #fff;
  border: none;
-  border-radius: 8px;
+  border-radius: 12px;
  font-size: 15px;
+  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  
  &:hover {
-    background: $primary-dark;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba($primary-color, 0.3);
  }
 }

@@ -783,7 +790,7 @@ $text-light: #999999;
  justify-content: center;
  margin-top: 32px;
  padding-top: 24px;
-  border-top: 1px solid $border-color;
+  border-top: 1px solid $border-light;
 }

 .btn-regenerate {
@@ -794,7 +801,7 @@ $text-light: #999999;
  background: #fff;
  color: $text-secondary;
  border: 1px solid $border-color;
-  border-radius: 8px;
+  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
@@ -802,6 +809,7 @@ $text-light: #999999;
  &:hover {
    border-color: $primary-color;
    color: $primary-color;
+    background: rgba($primary-color, 0.04);
  }
 }

@@ -812,7 +820,7 @@ $text-light: #999999;
  left: 0;
  right: 0;
  bottom: 0;
-  background: rgba(255, 255, 255, 0.95);
+  background: rgba(250, 248, 245, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
@@ -833,8 +841,8 @@ $text-light: #999999;
 }

 .ink-drop {
-  width: 16px;
-  height: 16px;
+  width: 14px;
+  height: 14px;
  background: $primary-color;
  border-radius: 50%;
  animation: ink-spread 1.4s ease-in-out infinite;
@@ -864,6 +872,7 @@ $text-light: #999999;
  color: $text-primary;
  letter-spacing: 2px;
  margin: 0;
+  font-weight: 500;
 }

 .loading-hint {
@@ -875,7 +884,7 @@ $text-light: #999999;
 // 响应式
@media (max-width: 768px) {
  .page-header {
-    padding: 16px 20px;
+    padding: 12px 20px;
    gap: 16px;
  }
  
--- a/frontend/src/views/Login.vue
+++ b/frontend/src/views/Login.vue
@@ -3,7 +3,8 @@
    <div class="login-card">
      <!-- 品牌区域 -->
      <div class="brand-section">
-        <h1 class="brand-name">玉宗</h1>
+        <h1 class="brand-name">玉 宗</h1>
+        <p class="brand-en">YUZONG JEWELRY</p>
        <p class="brand-subtitle">珠宝设计大师</p>
      </div>

@@ -105,22 +106,41 @@ const handleLogin = async () => {
 </script>

 <style scoped lang="scss">
+$primary-color: #5B7E6B;
+$primary-dark: #3D5A4A;
+$primary-lighter: #D4E5DB;
+
 .login-page {
-  min-height: calc(100vh - 108px);
+  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
-  background-color: #FAF8F5;
+  background: linear-gradient(160deg, #FAF8F5 0%, #f0f4f1 40%, #e8efe9 100%);
  padding: 24px;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 10%;
+    right: 10%;
+    width: 300px;
+    height: 300px;
+    background: radial-gradient(circle, rgba($primary-color, 0.05) 0%, transparent 70%);
+    border-radius: 50%;
+    pointer-events: none;
+  }
 }

 .login-card {
  width: 100%;
-  max-width: 400px;
-  padding: 48px 40px;
+  max-width: 420px;
+  padding: 48px 44px;
  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
+  border-radius: 20px;
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06);
+  position: relative;
+  z-index: 1;
 }

 .brand-section {
@@ -129,10 +149,18 @@ const handleLogin = async () => {

  .brand-name {
    font-size: 36px;
-    font-weight: 600;
-    color: #5B7E6B;
-    letter-spacing: 8px;
-    margin: 0 0 8px 0;
+    font-weight: 700;
+    color: $primary-color;
+    letter-spacing: 10px;
+    margin: 0 0 4px 0;
+  }
+
+  .brand-en {
+    font-size: 10px;
+    color: #999;
+    letter-spacing: 3px;
+    margin: 0 0 12px 0;
+    opacity: 0.7;
  }

  .brand-subtitle {
@@ -145,12 +173,18 @@ const handleLogin = async () => {

 .login-form {
  :deep(.el-input__wrapper) {
-    border-radius: 8px;
-    padding: 4px 12px;
+    border-radius: 10px;
+    padding: 6px 14px;
+    box-shadow: 0 0 0 1px #E8E4DF inset !important;
+    transition: all 0.25s ease;
+
+    &:hover, &.is-focus {
+      box-shadow: 0 0 0 1px $primary-color inset !important;
+    }
  }

  :deep(.el-input__prefix) {
-    color: #999;
+    color: #bbb;
  }

  :deep(.el-form-item) {
@@ -160,24 +194,24 @@ const handleLogin = async () => {

 .login-button {
  width: 100%;
-  height: 48px;
-  border-radius: 8px;
+  height: 50px;
+  border-radius: 12px;
  font-size: 16px;
-  font-weight: 500;
-  background-color: #5B7E6B;
-  border-color: #5B7E6B;
-  letter-spacing: 2px;
+  font-weight: 600;
+  background: linear-gradient(135deg, $primary-color, $primary-dark);
+  border-color: $primary-color;
+  letter-spacing: 3px;

  &:hover,
  &:focus {
-    background-color: #3D5A4A;
-    border-color: #3D5A4A;
+    background: linear-gradient(135deg, $primary-dark, #2d4638);
+    border-color: $primary-dark;
  }
 }

 .footer-links {
  text-align: center;
-  margin-top: 24px;
+  margin-top: 28px;
  font-size: 14px;

  .text {
@@ -185,13 +219,13 @@ const handleLogin = async () => {
  }

  .link {
-    color: #5B7E6B;
+    color: $primary-color;
    text-decoration: none;
    margin-left: 4px;
-    font-weight: 500;
+    font-weight: 600;

    &:hover {
-      color: #3D5A4A;
+      color: $primary-dark;
      text-decoration: underline;
    }
  }
--- a/frontend/src/views/Register.vue
+++ b/frontend/src/views/Register.vue
@@ -3,7 +3,8 @@
    <div class="register-card">
      <!-- 品牌区域 -->
      <div class="brand-section">
-        <h1 class="brand-name">玉宗</h1>
+        <h1 class="brand-name">玉 宗</h1>
+        <p class="brand-en">YUZONG JEWELRY</p>
        <p class="brand-subtitle">创建您的账户</p>
      </div>

@@ -144,34 +145,60 @@ const handleRegister = async () => {
 </script>

 <style scoped lang="scss">
+$primary-color: #5B7E6B;
+$primary-dark: #3D5A4A;
+
 .register-page {
-  min-height: calc(100vh - 108px);
+  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
-  background-color: #FAF8F5;
+  background: linear-gradient(160deg, #FAF8F5 0%, #f0f4f1 40%, #e8efe9 100%);
  padding: 24px;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 15%;
+    left: 8%;
+    width: 250px;
+    height: 250px;
+    background: radial-gradient(circle, rgba($primary-color, 0.04) 0%, transparent 70%);
+    border-radius: 50%;
+    pointer-events: none;
+  }
 }

 .register-card {
  width: 100%;
-  max-width: 400px;
-  padding: 48px 40px;
+  max-width: 420px;
+  padding: 48px 44px;
  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
+  border-radius: 20px;
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06);
+  position: relative;
+  z-index: 1;
 }

 .brand-section {
  text-align: center;
-  margin-bottom: 40px;
+  margin-bottom: 36px;

  .brand-name {
    font-size: 36px;
-    font-weight: 600;
-    color: #5B7E6B;
-    letter-spacing: 8px;
-    margin: 0 0 8px 0;
+    font-weight: 700;
+    color: $primary-color;
+    letter-spacing: 10px;
+    margin: 0 0 4px 0;
+  }
+
+  .brand-en {
+    font-size: 10px;
+    color: #999;
+    letter-spacing: 3px;
+    margin: 0 0 12px 0;
+    opacity: 0.7;
  }

  .brand-subtitle {
@@ -184,39 +211,45 @@ const handleRegister = async () => {

 .register-form {
  :deep(.el-input__wrapper) {
-    border-radius: 8px;
-    padding: 4px 12px;
+    border-radius: 10px;
+    padding: 6px 14px;
+    box-shadow: 0 0 0 1px #E8E4DF inset !important;
+    transition: all 0.25s ease;
+
+    &:hover, &.is-focus {
+      box-shadow: 0 0 0 1px $primary-color inset !important;
+    }
  }

  :deep(.el-input__prefix) {
-    color: #999;
+    color: #bbb;
  }

  :deep(.el-form-item) {
-    margin-bottom: 24px;
+    margin-bottom: 22px;
  }
 }

 .register-button {
  width: 100%;
-  height: 48px;
-  border-radius: 8px;
+  height: 50px;
+  border-radius: 12px;
  font-size: 16px;
-  font-weight: 500;
-  background-color: #5B7E6B;
-  border-color: #5B7E6B;
-  letter-spacing: 2px;
+  font-weight: 600;
+  background: linear-gradient(135deg, $primary-color, $primary-dark);
+  border-color: $primary-color;
+  letter-spacing: 3px;

  &:hover,
  &:focus {
-    background-color: #3D5A4A;
-    border-color: #3D5A4A;
+    background: linear-gradient(135deg, $primary-dark, #2d4638);
+    border-color: $primary-dark;
  }
 }

 .footer-links {
  text-align: center;
-  margin-top: 24px;
+  margin-top: 28px;
  font-size: 14px;

  .text {
@@ -224,13 +257,13 @@ const handleRegister = async () => {
  }

  .link {
-    color: #5B7E6B;
+    color: $primary-color;
    text-decoration: none;
    margin-left: 4px;
-    font-weight: 500;
+    font-weight: 600;

    &:hover {
-      color: #3D5A4A;
+      color: $primary-dark;
      text-decoration: underline;
    }
  }
--- a/frontend/src/views/UserCenter.vue
+++ b/frontend/src/views/UserCenter.vue
@@ -396,14 +396,16 @@ const handleChangePassword = async () => {
 <style scoped lang="scss">
 $primary-color: #5B7E6B;
 $primary-dark: #3D5A4A;
+$primary-lighter: #D4E5DB;
 $bg-color: #FAF8F5;
 $border-color: #E8E4DF;
+$border-light: #F0EDE8;
 $text-primary: #2C2C2C;
 $text-secondary: #6B6B6B;
 $text-light: #999999;

 .user-center {
-  min-height: calc(100vh - 108px);
+  min-height: calc(100vh - 64px);
  background-color: $bg-color;
  padding: 32px 24px;
 }
@@ -414,8 +416,8 @@ $text-light: #999999;
 }

 .page-title {
-  font-size: 28px;
-  font-weight: 600;
+  font-size: 26px;
+  font-weight: 700;
  color: $text-primary;
  margin: 0 0 24px 0;
  letter-spacing: 2px;
@@ -423,22 +425,22 @@ $text-light: #999999;

 .user-tabs {
  background: #fff;
-  border-radius: 12px;
+  border-radius: 16px;
  padding: 24px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);

  :deep(.el-tabs__nav-wrap::after) {
    height: 1px;
-    background-color: $border-color;
+    background-color: $border-light;
  }

  :deep(.el-tabs__item) {
-    font-size: 16px;
+    font-size: 15px;
    color: $text-secondary;
    
    &.is-active {
      color: $primary-color;
-      font-weight: 500;
+      font-weight: 600;
    }
    
    &:hover {
@@ -448,6 +450,7 @@ $text-light: #999999;

  :deep(.el-tabs__active-bar) {
    background-color: $primary-color;
+    border-radius: 2px;
  }
 }

@@ -489,19 +492,20 @@ $text-light: #999999;
  }

  .empty-text {
-    font-size: 16px;
+    font-size: 15px;
    color: $text-secondary;
    margin: 0 0 24px 0;
  }

  .create-btn {
-    background-color: $primary-color;
+    background: linear-gradient(135deg, $primary-color, $primary-dark);
    border-color: $primary-color;
    padding: 12px 32px;
    font-size: 15px;
+    border-radius: 12px;

    &:hover {
-      background-color: $primary-dark;
+      background: linear-gradient(135deg, $primary-dark, #2d4638);
      border-color: $primary-dark;
    }
  }
@@ -517,24 +521,24 @@ $text-light: #999999;

 .design-card {
  background: #fff;
-  border-radius: 8px;
+  border-radius: 14px;
  overflow: hidden;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  cursor: pointer;
-  transition: transform 0.2s, box-shadow 0.2s;
-  border: 1px solid $border-color;
+  transition: all 0.25s ease;
+  border: 1px solid $border-light;

  &:hover {
    transform: translateY(-4px);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
  }
 }

 .card-image {
  position: relative;
  width: 100%;
-  padding-top: 75%; // 4:3 aspect ratio
-  background-color: #f5f5f5;
+  padding-top: 75%;
+  background-color: $bg-color;
  overflow: hidden;

  img {
@@ -544,6 +548,11 @@ $text-light: #999999;
    width: 100%;
    height: 100%;
    object-fit: cover;
+    transition: transform 0.3s ease;
+  }
+
+  .design-card:hover & img {
+    transform: scale(1.03);
  }

  .no-image {
@@ -557,7 +566,7 @@ $text-light: #999999;
    justify-content: center;
    color: $text-light;
    font-size: 14px;
-    background-color: #f9f9f9;
+    background-color: $bg-color;
  }
 }

@@ -569,7 +578,7 @@ $text-light: #999999;
  font-size: 12px;
  color: $primary-color;
  margin-bottom: 8px;
-  font-weight: 500;
+  font-weight: 600;
 }

 .card-prompt {
@@ -623,7 +632,7 @@ $text-light: #999999;

  :deep(.el-pager li.is-active) {
    color: $primary-color;
-    font-weight: 500;
+    font-weight: 600;
  }
 }

@@ -635,14 +644,14 @@ $text-light: #999999;
 }

 .password-section {
-  border-top: 1px solid $border-color;
+  border-top: 1px solid $border-light;
  margin-top: 24px;
  padding-top: 32px;
 }

 .section-title {
  font-size: 18px;
-  font-weight: 500;
+  font-weight: 600;
  color: $text-primary;
  margin: 0 0 24px 0;
 }
@@ -654,19 +663,20 @@ $text-light: #999999;
  }

  :deep(.el-input__wrapper) {
-    border-radius: 6px;
+    border-radius: 10px;
  }

  :deep(.el-input.is-disabled .el-input__wrapper) {
-    background-color: #f9f9f9;
+    background-color: $bg-color;
  }

  :deep(.el-button--primary) {
-    background-color: $primary-color;
+    background: linear-gradient(135deg, $primary-color, $primary-dark);
    border-color: $primary-color;
+    border-radius: 10px;

    &:hover {
-      background-color: $primary-dark;
+      background: linear-gradient(135deg, $primary-dark, #2d4638);
      border-color: $primary-dark;
    }
  }