# 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 使用规范)。
- 视觉走查清单。

请确认执行。