From c6194ae1dd9432a2f07168765964169030a4e7d6 Mon Sep 17 00:00:00 2001 From: sladro Date: Sun, 14 Sep 2025 18:59:54 +0800 Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84:=20=E5=AE=8C=E6=88=90Home?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2UI=E8=AE=BE=E8=AE=A1=E5=85=A8=E9=9D=A2?= =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 主要改进: - 修复CSS变量使用，避免硬编码颜色 - 精简元素尺寸，图标从90px降至40px - 修复侧边栏布局，使用fixed定位 - 统一所有角标为圆形设计 - 丰富页面内容，添加真实数据展示 - 优化快速访问模块设计 - 更新CLAUDE.md文档，记录UI设计教训 技术细节: - 侧边栏固定定位，不随页面滚动 - 顶部导航改为面包屑 + 操作按钮 - 统计卡片添加趋势指示和可视化 - 功能模块卡片优化布局和内容 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- .claude/settings.local.json | 3 +- CLAUDE.md | 113 ++- src/assets/styles/variables.css | 21 +- src/views/Home.vue | 1227 +++++++++++++++++++++++++++---- 4 files changed, 1219 insertions(+), 145 deletions(-) diff --git a/.claude/settings.local.json b/.claude/settings.local.json index dd6ba29..5e968a0 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -4,7 +4,8 @@ "mcp__puppeteer__puppeteer_screenshot", "mcp__puppeteer__puppeteer_click", "mcp__puppeteer__puppeteer_fill", - "Bash(git add:*)" + "Bash(git add:*)", + "mcp__sequential-thinking__sequentialthinking" ], "deny": [], "ask": [] diff --git a/CLAUDE.md b/CLAUDE.md index fa3c39c..c18aa4d 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -78,4 +78,115 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co - 图表数据实时生成，确保演示效果 ## 当前状态 -项目目前只有PRD文档，需要从零开始搭建Vue3纯前端演示项目，所有数据通过Mock生成。 \ No newline at end of file +项目目前只有PRD文档，需要从零开始搭建Vue3纯前端演示项目，所有数据通过Mock生成。 + +## UI设计规范与教训（重要！） + +### 🚨 UI开发失败案例与教训 + +以下是2024年实际开发中的严重错误，后续AI必须避免： + +#### 1. CSS变量使用原则 +**❌ 错误示例** +```css +.sidebar { + background: linear-gradient(135deg, #667eea 0%, #764ba2 20%); /* 硬编码颜色 */ + width: 280px; /* 硬编码尺寸 */ +} +``` + +**✅ 正确做法** +```css +.sidebar { + background: var(--gradient-brand); /* 使用已定义变量 */ + width: var(--sidebar-width); /* 复用尺寸变量 */ +} +``` + +#### 2. 元素尺寸控制 +**❌ 错误：巨大元素** +- 标题字号 60px+ +- 图标尺寸 80-100px +- 按钮高度 60px+ + +**✅ 正确：精致设计** +- 页面标题：24-32px +- 导航图标：16-18px（容器40px） +- 按钮高度：36-44px +- 数字展示：32-48px（特殊强调） + +#### 3. 布局基础原则 +**❌ 严重错误** +```css +.sidebar { + position: relative; /* 导致侧边栏随页面滚动 */ +} +``` + +**✅ 必须这样** +```css +.sidebar { + position: fixed; + left: 0; + top: 0; + bottom: 0; + overflow-y: auto; +} +.main-content { + margin-left: var(--sidebar-width); +} +``` + +#### 4. 细节一致性 +**必须统一的元素：** +- 所有角标：`border-radius: 50px`（完全圆形） +- 图标容器：统一圆角矩形 +- 卡片圆角：统一使用 `var(--radius-lg)` +- 阴影效果：必须使用变量 `var(--shadow-md)` + +#### 5. 内容真实性 +**❌ 空洞内容** +- "已完成" +- "待处理" +- "功能说明" + +**✅ 专业内容** +- "本月完成率 92.5%" +- "待审核任务 8项（实践报告3，互评5）" +- "支持多维度评价体系，包含企业实践、教师点评等多角色协同" + +### 现代UI设计检查清单 + +开发任何UI组件前，必须自问： + +- [ ] **颜色**：是否全部使用CSS变量？ +- [ ] **尺寸**：图标是否精致（16-20px）？文字是否适中？ +- [ ] **布局**：导航是否固定？内容区是否正确偏移？ +- [ ] **一致性**：圆角、阴影、间距是否统一？ +- [ ] **内容**：数据是否具体真实？描述是否专业？ +- [ ] **交互**：hover效果是否流畅？过渡是否自然？ +- [ ] **响应式**：不同屏幕是否正常显示？ + +### 设计审美标准 + +**优秀设计特征：** +- 小而精致的图标 + 清晰标签 +- 适度的留白和间距 +- 微妙的动画（0.2-0.3s） +- 统一的视觉语言 +- 层次分明的信息架构 + +**失败设计特征：** +- 巨大突兀的元素 +- 不一致的样式混用 +- 生硬的交互反馈 +- 杂乱的颜色搭配 +- 基础的布局错误 + +### 关键提醒 +作为AI，你必须： +1. 先查看现有CSS变量，绝不硬编码 +2. 参考现有组件样式，保持一致性 +3. 测试滚动和固定定位 +4. 注意细节的统一性 +5. 使用真实、专业的内容填充 \ No newline at end of file diff --git a/src/assets/styles/variables.css b/src/assets/styles/variables.css index ec5bc2c..2fea35b 100644 --- a/src/assets/styles/variables.css +++ b/src/assets/styles/variables.css @@ -79,13 +79,30 @@ --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); --gradient-brand: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); --gradient-success: linear-gradient(135deg, var(--success) 0%, var(--success-light) 100%); + --gradient-sidebar: linear-gradient(180deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%); + --gradient-card-primary: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%); + --gradient-card-secondary: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%); + --gradient-card-success: linear-gradient(135deg, #10b981 0%, #34d399 100%); + --gradient-card-warning: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); + --gradient-mesh: radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%), + radial-gradient(circle at 80% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%), + radial-gradient(circle at 40% 20%, rgba(16, 185, 129, 0.05) 0%, transparent 50%); + + /* 毛玻璃效果 */ + --glass-bg: rgba(255, 255, 255, 0.1); + --glass-border: rgba(255, 255, 255, 0.2); + --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); + --glass-blur: blur(10px); /* 布局尺寸 */ - --sidebar-width: 240px; - --header-height: 64px; + --sidebar-width: 280px; + --header-height: 72px; --container-max: 1200px; /* 动画 */ --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + --transition-spring: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); + --animation-float: float 3s ease-in-out infinite; + --animation-glow: glow 2s ease-in-out infinite; } \ No newline at end of file diff --git a/src/views/Home.vue b/src/views/Home.vue index 7a8bf86..b2706f5 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -5,26 +5,38 @@