Web_BLV_OA_Exam_Prod/.trae/documents/UI视觉全面升级方案.md

UI视觉升级与品牌化实施方案

本计划旨在对现有系统进行全面的视觉升级，重点引入全新的色彩规范（Mars Green）并实施严格的Logo展示规范。

1. 视觉系统构建 (Visual System)

目标: 建立以"Mars Green"为核心的科技感视觉体系。

• 色彩规范 (Colors):
  • 主色 (Primary): #008C8C (Mars Green)。
  • 辅助色 (Secondary): #00A3A3 (明亮), #006666 (深沉)。
  • 中性色: 调整灰度色阶，配合青色调，营造冷峻科技感。
  • 操作: 更新 tailwind.config.js 的 colors 配置，更新 src/main.tsx 的 Ant Design token。
• Logo 占位组件 (Brand Identity):
  • 组件化: 创建 src/components/common/Logo.tsx。
  • 规格:
    • Primary: 100x40px (Nav Left), 带 "Placeholder" 水印 (15% opacity)。
    • Secondary: 80x30px (Footer Right), 简化版。
  • 可配置性: 使用 CSS 变量或 Props 控制路径，预留未来替换接口。
  • 响应式: 移动端自动切换为图标模式或缩小比例。

2. 全局样式配置 (Global Configuration)

• Ant Design 主题:
  • colorPrimary: #008C8C。
  • borderRadius: 8px (圆角适中，兼顾亲和力与专业感)。
  • fontFamily: 优先使用系统字体栈，配合 Inter。
• 排版系统:
  • 建立 8px 网格间距系统 (Spacing Token)。
  • 优化全局字号与行高。

3. 布局与组件改造 (Layout & Components)

目标: 植入品牌元素，优化空间布局。

• 通用布局组件 (Layouts):
  • AdminLayout.tsx:
    • 顶部导航栏左侧植入 100x40px Logo 区域。
    • 底部增加 Footer 区域，右侧植入 80x30px Logo。
    • 调整侧边栏配色，呼应主色调。
  • 用户端页面 (HomePage.tsx):
    • 重构页面结构，从单一居中容器改为 Header - Content - Footer 结构。
    • 确保 Logo 在首屏清晰可见。
• 组件样式微调:
  • Button: 增加高度至 40px/48px，增强点击感。
  • Card: 优化阴影 (Shadow) 和圆角，减少视觉噪点。
  • Input: 统一高度和边框颜色。

4. 实施步骤

1. 核心配置: 修改 tailwind.config.js 和 src/main.tsx，确立 Mars Green 主调。
2. 组件开发: 实现 Logo 组件。
3. 布局重构:
   • 改造 AdminLayout，加入 Header/Footer Logo 区域。
   • 改造 HomePage，加入 Header/Footer 结构。
4. 样式覆盖: 遍历主要页面，替换旧的颜色类名 (如 text-blue-600 -> text-primary-600)，调整间距。
5. 验证: 检查 Logo 尺寸、位置及水印效果，验证移动端适配。

5. 交付物

• 更新后的 UI 代码库。
• 响应式设计规范文档 (含 Logo 使用规范)。
• 视觉走查清单。

请确认执行。