Files
gpf_pet_hospital/frontend/COLOR_UPDATE.md
wangziqi 77eb648b38 完善统计功能并优化前端界面
后端:
- 扩展 StatsController,新增趋势分析(/trends)和今日待办(/today-todos)接口
- 更新 application-dev.yml 数据库配置(端口3306,允许公钥检索)
- 完善 pom.xml Maven 编译器插件和 Lombok 版本配置
- 添加 build-with-idea.sh 构建脚本

前端:
- 新增 Register.vue 注册页面
- 优化 Dashboard 仪表盘布局和数据统计展示
- 改进 MainLayout 侧边栏样式和品牌展示
- 更新 Login 登录页面样式
- 新增 theme.css 主题样式文件
- 扩展 API 接口(statsTrends、todayTodos)
- 更新路由和全局样式

文档:
- 添加功能检查报告和功能列表文档
2026-02-11 16:11:31 +08:00

1.9 KiB
Raw Permalink Blame History

配色更新说明

更新内容

已将项目的紫色配色(#667eea、#764ba2全面更换为清新青绿色系

新配色方案

主色调

  • 主色: #0d9488 (teal-600) - 清新的青绿色
  • 辅助色: #14b8a6 (teal-500) - 亮青绿色
  • 深色: #115e59 (teal-700) - 深青绿
  • 浅色: #5eead4 (teal-300) - 浅青绿

功能色(保持不变)

  • 成功: #10b981 (green-500)
  • 警告: #f59e0b (amber-500)
  • 危险: #ef4444 (red-500)
  • 信息: #3b82f6 (blue-500)

中性色(保持不变)

  • 背景: #f8fafc (slate-50)
  • 面板: #ffffff (white)
  • 文字: #1e293b (slate-800)
  • 次要文字: #64748b (slate-500)
  • 边框: #e2e8f0 (slate-200)

修改的文件列表

  1. frontend/src/styles/global.css - 全局CSS变量和组件样式
  2. frontend/src/pages/Dashboard.vue - 仪表盘页面
  3. frontend/src/layouts/MainLayout.vue - 主布局
  4. frontend/src/pages/Login.vue - 登录页面
  5. frontend/src/pages/Register.vue - 注册页面

视觉效果对比

修改前(紫色系)

  • 主色:紫蓝色 #667eea → #764ba2
  • 风格:科技感较强,但略显沉重

修改后(青绿色系)

  • 主色:青绿色 #0d9488 → #14b8a6
  • 风格:清新自然,专业医疗感,更加舒适护眼

特点

  1. 医疗感: 青绿色常用于医疗健康领域,给人专业、可靠的感觉
  2. 清新感: 比紫色更加清爽,视觉疲劳度更低
  3. 自然感: 接近自然界的颜色,与宠物医院的主题更契合
  4. 现代感: 当前流行的设计配色,简洁大方

建议

如果还需要调整配色,可以考虑以下方案:

  1. 医疗蓝: #2563eb#3b82f6 (更传统医疗感)
  2. 薄荷绿: #10b981#34d399 (更活泼年轻)
  3. 暖橙色: #f97316#fb923c (更温馨友好)
  4. 深蓝: #1e40af#3b82f6 (更稳重专业)