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

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

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;
     }
   }