58 lines
2.8 KiB
Markdown
58 lines
2.8 KiB
Markdown
|
# 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 使用规范)。
|
|||
|
|
- 视觉走查清单。
|
|||
|
|
|
|||
|
|
请确认执行。
|