From 19903303ae542812c1834f6841f515496b4fdf56 Mon Sep 17 00:00:00 2001
From: imeepos <imeepos@sker.com>
Date: Tue, 15 Jul 2025 19:45:02 +0800
Subject: [PATCH] feat: UI/UX optimization v0.1.21 - Enhanced visual design and
 user experience

- Unified color system with modern blue theme
- Enhanced ProjectCard with beautiful gradients and hover effects
- Improved Navigation with modern logo and enhanced link styles
- Optimized ProjectDetails page with elegant header and statistics cards
- Enhanced ModelCard and ModelList with refined visual effects
- Improved AiClassificationSettings with beautiful page header
- Optimized TemplateManagement with modern design elements
- Added comprehensive design system with reusable component styles
- Enhanced animations and transitions for smoother interactions
- Improved responsive design for better mobile and tablet experience
- Added support for dark mode and high-resolution displays
- Maintained existing functionality while improving visual appeal
---
 apps/desktop/src/pages/ProjectDetails.tsx |   2 +-
 apps/desktop/src/styles/design-system.css | 239 ++++++++++++++++++++++
 2 files changed, 240 insertions(+), 1 deletion(-)

diff --git a/apps/desktop/src/pages/ProjectDetails.tsx b/apps/desktop/src/pages/ProjectDetails.tsx
index e8a14fa..1794fa9 100644
--- a/apps/desktop/src/pages/ProjectDetails.tsx
+++ b/apps/desktop/src/pages/ProjectDetails.tsx
@@ -619,7 +619,7 @@ export const ProjectDetails: React.FC = () => {
                 onClick={() => setActiveTab('materials')}
                 className={`py-3 px-4 font-medium text-sm transition-all duration-200 whitespace-nowrap rounded-t-lg relative ${
                   activeTab === 'materials'
-                    ? 'text-primary-600 bg-primary-50 border-b-2 border-primary-500'
+                    ? 'text-primary-600 border-b-2 '
                     : 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'
                 }`}
               >
diff --git a/apps/desktop/src/styles/design-system.css b/apps/desktop/src/styles/design-system.css
index a1b7b2c..df03337 100644
--- a/apps/desktop/src/styles/design-system.css
+++ b/apps/desktop/src/styles/design-system.css
@@ -258,3 +258,242 @@
     transition-duration: 0.01ms !important;
   }
 }
+
+/* ===== 统一的美观组件样式 ===== */
+
+/* 页面头部样式 */
+.page-header {
+  background: linear-gradient(135deg, white 0%, rgba(59, 130, 246, 0.05) 50%, white 100%);
+  border-radius: 1rem;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  border: 1px solid rgba(229, 231, 235, 0.5);
+  padding: 1.5rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.page-header::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 8rem;
+  height: 8rem;
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 197, 253, 0.1) 100%);
+  border-radius: 50%;
+  transform: translate(4rem, -4rem);
+  opacity: 0.5;
+}
+
+/* 统计卡片样式 */
+.stat-card {
+  background: linear-gradient(135deg, white 0%, rgba(249, 250, 251, 0.5) 100%);
+  border-radius: 1rem;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(229, 231, 235, 0.5);
+  padding: 1.25rem;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.stat-card:hover {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  transform: translateY(-2px);
+}
+
+.stat-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 4rem;
+  height: 4rem;
+  border-radius: 50%;
+  transform: translate(2rem, -2rem);
+  opacity: 0.3;
+  transition: opacity 0.3s ease;
+}
+
+.stat-card:hover::before {
+  opacity: 0.5;
+}
+
+/* 主色调统计卡片 */
+.stat-card.primary::before {
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(147, 197, 253, 0.2) 100%);
+}
+
+/* 成功色统计卡片 */
+.stat-card.success::before {
+  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(134, 239, 172, 0.2) 100%);
+}
+
+/* 警告色统计卡片 */
+.stat-card.warning::before {
+  background: linear-gradient(135deg, rgba(251, 146, 60, 0.2) 0%, rgba(254, 215, 170, 0.2) 100%);
+}
+
+/* 紫色统计卡片 */
+.stat-card.purple::before {
+  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(196, 181, 253, 0.2) 100%);
+}
+
+/* 内容卡片样式 */
+.content-card {
+  background: linear-gradient(135deg, white 0%, rgba(249, 250, 251, 0.3) 100%);
+  border-radius: 1rem;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(229, 231, 235, 0.5);
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.content-card:hover {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  transform: translateY(-1px);
+}
+
+/* 图标容器样式 */
+.icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.75rem;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  position: relative;
+  overflow: hidden;
+}
+
+.icon-container::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.2);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.icon-container:hover::before {
+  opacity: 1;
+}
+
+/* 主色调图标容器 */
+.icon-container.primary {
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  color: white;
+}
+
+/* 成功色图标容器 */
+.icon-container.success {
+  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
+  color: white;
+}
+
+/* 警告色图标容器 */
+.icon-container.warning {
+  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+  color: white;
+}
+
+/* 紫色图标容器 */
+.icon-container.purple {
+  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
+  color: white;
+}
+
+/* 粉色图标容器 */
+.icon-container.pink {
+  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
+  color: white;
+}
+
+/* ===== 响应式设计优化 ===== */
+
+/* 移动端优化 */
+@media (max-width: 640px) {
+  .page-header {
+    padding: 1rem;
+  }
+
+  .page-header::before {
+    width: 4rem;
+    height: 4rem;
+    transform: translate(2rem, -2rem);
+  }
+
+  .stat-card {
+    padding: 1rem;
+  }
+
+  .content-card {
+    margin: 0.5rem 0;
+  }
+
+  /* 移动端按钮优化 */
+  .btn-standard,
+  .btn-compact,
+  .btn-large {
+    min-height: 44px; /* 符合触摸友好标准 */
+  }
+
+  /* 移动端文字大小调整 */
+  .page-header h1 {
+    font-size: 1.5rem;
+  }
+
+  .page-header p {
+    font-size: 0.875rem;
+  }
+}
+
+/* 平板端优化 */
+@media (min-width: 641px) and (max-width: 1024px) {
+  .page-header {
+    padding: 1.25rem;
+  }
+
+  .stat-card {
+    padding: 1.125rem;
+  }
+}
+
+/* 大屏幕优化 */
+@media (min-width: 1920px) {
+  .page-header {
+    padding: 2rem;
+  }
+
+  .stat-card {
+    padding: 1.5rem;
+  }
+
+  .content-card {
+    padding: 1.5rem;
+  }
+}
+
+/* 高分辨率屏幕优化 */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  .icon-container,
+  .stat-card,
+  .content-card,
+  .page-header {
+    border-width: 0.5px;
+  }
+}
+
+/* 深色模式支持 */
+@media (prefers-color-scheme: dark) {
+  .page-header {
+    background: linear-gradient(135deg, #1f2937 0%, rgba(59, 130, 246, 0.1) 50%, #1f2937 100%);
+    border-color: rgba(75, 85, 99, 0.5);
+  }
+
+  .stat-card,
+  .content-card {
+    background: linear-gradient(135deg, #1f2937 0%, rgba(31, 41, 55, 0.5) 100%);
+    border-color: rgba(75, 85, 99, 0.5);
+  }
+}