基本功能完成，下一步开始美化UI

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

@@ -0,0 +1,58 @@
+# 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 使用规范)。
+- 视觉走查清单。
+
+请确认执行。