From 4382feedb34367a8f67ece245a73c6e8493e3dbb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B7=9D?= <jc@163.com>
Date: Sun, 29 Mar 2026 15:55:27 +0800
Subject: [PATCH] =?UTF-8?q?style(frontend):=20=E4=BC=98=E5=8C=96=E5=89=8D?=
 =?UTF-8?q?=E7=AB=AF=E6=A0=B7=E5=BC=8F=E5=92=8C=E7=95=8C=E9=9D=A2=E7=BB=86?=
 =?UTF-8?q?=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 统一并丰富主题色变量，新增多级浅色和圆角、阴影变量
- 调整应用头部布局及风格，增加logo子标题和用户头像显示
- 细化分类导航样式，添加品类图标和渐变背景
- 优化颜色选择器的交互动效和样式细节
- 美化设计预览组件，提升边框圆角和阴影效果
- 调整子类型面板布局、尺寸及交互动画效果
- 修正全局样式中字体和滚动条的表现，增强用户体验
- 统一按钮、标签等控件的圆角和颜色渐变样式
- 增强Element Plus UI组件的主题覆盖和交互状态样式
---
 .DS_Store                                 | Bin 8196 -> 8196 bytes
 backend/uvicorn.log                       |  50 ++++
 frontend/src/assets/styles/theme.scss     |  89 +++++-
 frontend/src/components/AppHeader.vue     | 112 +++++--
 frontend/src/components/CategoryNav.vue   |  94 ++++--
 frontend/src/components/ColorPicker.vue   |  21 +-
 frontend/src/components/DesignPreview.vue |  92 +++---
 frontend/src/components/SubTypePanel.vue  |  56 ++--
 frontend/src/style.css                    | 344 +++++-----------------
 frontend/src/views/DesignPage.vue         |   2 +-
 frontend/src/views/GeneratePage.vue       |  79 ++---
 frontend/src/views/Login.vue              |  86 ++++--
 frontend/src/views/Register.vue           |  89 ++++--
 frontend/src/views/UserCenter.vue         |  64 ++--
 14 files changed, 669 insertions(+), 509 deletions(-)

diff --git a/.DS_Store b/.DS_Store
index e7c41932f8afbdbe1484f8d9bfaa610973c9ee6d..434ae06cc2a88ddc4baeadfad99ae6a4e3360c23 100644
GIT binary patch
delta 73
zcmZp1XmOa}&nUeyU^hRb^kyD`Q_Qj~3@Hrx49N_|o;mr+NjdpR3=9kc3=B*~Kw59|
cZ(*6u&xL<5Z)TVH#<KaXpf%%W0kJcT0QgoFZ2$lO

delta 44
zcmZp1XmOa}&nUGqU^hRb)Mg%mQ_PcF!~{3<i~L}oSfH_)UE&+dW>wKgOcM)K0Zjl8
A00000

diff --git a/backend/uvicorn.log b/backend/uvicorn.log
index 844bbcc..cbb6522 100644
--- 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
diff --git a/frontend/src/assets/styles/theme.scss b/frontend/src/assets/styles/theme.scss
index 7544f1b..815402f 100644
--- 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;
+}
diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
index 59b62a6..cd3a1b1 100644
--- 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;
diff --git a/frontend/src/components/CategoryNav.vue b/frontend/src/components/CategoryNav.vue
index 19b5b42..9d3aa29 100644
--- 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>
diff --git a/frontend/src/components/ColorPicker.vue b/frontend/src/components/ColorPicker.vue
index 207de62..50d74ed 100644
--- 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 {
diff --git a/frontend/src/components/DesignPreview.vue b/frontend/src/components/DesignPreview.vue
index 7e41f8d..26c39ce 100644
--- 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;
 
diff --git a/frontend/src/components/SubTypePanel.vue b/frontend/src/components/SubTypePanel.vue
index 119201b..f434f92 100644
--- 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 {
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 527d4fb..f3975da 100644
--- 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;
   }
 }
diff --git a/frontend/src/views/DesignPage.vue b/frontend/src/views/DesignPage.vue
index 8d5304b..421d207 100644
--- 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>
diff --git a/frontend/src/views/GeneratePage.vue b/frontend/src/views/GeneratePage.vue
index da9d9bb..2e8abeb 100644
--- 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;
   }
   
diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
index 344eb85..13458f5 100644
--- 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;
     }
   }
diff --git a/frontend/src/views/Register.vue b/frontend/src/views/Register.vue
index efc535b..1b47a7b 100644
--- 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;
     }
   }
diff --git a/frontend/src/views/UserCenter.vue b/frontend/src/views/UserCenter.vue
index 84fc27c..ca0e04e 100644
--- 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;
     }
   }