219 lines
5.3 KiB
Markdown
219 lines
5.3 KiB
Markdown
|
# 应用新设计系统功能规格
|
|||
|
|
|
|||
|
|
## 1. 功能概述
|
|||
|
|
- **功能名称**: 应用新设计系统到 Flutter 项目
|
|||
|
|
- **优先级**: P0
|
|||
|
|
- **负责人**: 开发团队
|
|||
|
|
- **预计工期**: 1 天
|
|||
|
|
|
|||
|
|
## 2. 业务背景
|
|||
|
|
|
|||
|
|
### 当前痛点
|
|||
|
|
- 现有 Flutter 项目使用旧的样式系统
|
|||
|
|
- 缺乏统一的组件化设计
|
|||
|
|
- 视觉效果不够现代化
|
|||
|
|
- 缺少毛玻璃、霓虹光效等现代 UI 效果
|
|||
|
|
|
|||
|
|
### 解决方案
|
|||
|
|
- 应用新的 Material Design 3 配色方案
|
|||
|
|
- 使用 Space Grotesk + Manrope 字体组合
|
|||
|
|
- 组件化开发，提取可复用组件
|
|||
|
|
- 添加 Glass Panel 和 Neon Glow 效果
|
|||
|
|
|
|||
|
|
### 预期收益
|
|||
|
|
- 统一的视觉风格
|
|||
|
|
- 更好的用户体验
|
|||
|
|
- 提高开发效率（组件复用）
|
|||
|
|
- 现代化的 UI 效果
|
|||
|
|
|
|||
|
|
## 3. 功能详情
|
|||
|
|
|
|||
|
|
### 3.1 用户故事
|
|||
|
|
作为 Monisuo 用户，我希望应用有现代化的 UI 设计，以便获得更好的使用体验和视觉享受。
|
|||
|
|
|
|||
|
|
### 3.2 功能列表
|
|||
|
|
- [ ] 更新颜色系统（Material Design 3）
|
|||
|
|
- [ ] 更新字体系统（Space Grotesk + Manrope）
|
|||
|
|
- [ ] 创建 GlassPanel 组件
|
|||
|
|
- [ ] 创建 NeonGlow 效果组件
|
|||
|
|
- [ ] 更新交易页面样式
|
|||
|
|
- [ ] 更新行情页面样式
|
|||
|
|
- [ ] 更新我的页面样式
|
|||
|
|
- [ ] 创建充值弹窗组件
|
|||
|
|
- [ ] 创建提现弹窗组件
|
|||
|
|
|
|||
|
|
### 3.3 UI/UX 设计
|
|||
|
|
|
|||
|
|
#### 配色方案
|
|||
|
|
```dart
|
|||
|
|
// Primary Colors
|
|||
|
|
primary: #72dcff (青色)
|
|||
|
|
secondary: #dd8bfb (紫色)
|
|||
|
|
tertiary: #afffd1 (绿色)
|
|||
|
|
|
|||
|
|
// Surface Colors
|
|||
|
|
background: #0b0e14
|
|||
|
|
surface: #0b0e14
|
|||
|
|
surfaceContainer: #161a21
|
|||
|
|
surfaceContainerHigh: #1c2028
|
|||
|
|
surfaceContainerHighest: #22262f
|
|||
|
|
|
|||
|
|
// Semantic Colors
|
|||
|
|
error: #ff716c
|
|||
|
|
success: #afffd1
|
|||
|
|
warning: #ffa8a3
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 字体系统
|
|||
|
|
```dart
|
|||
|
|
// Fonts
|
|||
|
|
headline: Space Grotesk (标题)
|
|||
|
|
body: Manrope (正文)
|
|||
|
|
label: Manrope (标签)
|
|||
|
|
|
|||
|
|
// Icons
|
|||
|
|
Material Symbols Outlined
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 组件风格
|
|||
|
|
- **Glass Panel**: 毛玻璃效果（backdrop-filter: blur(20px)）
|
|||
|
|
- **Neon Glow**: 霓虹光效（box-shadow: 0 0 15px rgba(114, 220, 255, 0.3)）
|
|||
|
|
- **Dark Theme**: 深色主题为主
|
|||
|
|
- **Rounded Corners**: 大圆角设计（2rem, 1rem）
|
|||
|
|
|
|||
|
|
## 4. 技术方案
|
|||
|
|
|
|||
|
|
### 4.1 架构设计
|
|||
|
|
|
|||
|
|
#### 前端方案 (Flutter)
|
|||
|
|
- **状态管理**: Provider (保持现有)
|
|||
|
|
- **UI 组件**: shadcn_ui (保持现有)
|
|||
|
|
- **设计系统**: 新增 AppDesignSystem
|
|||
|
|
|
|||
|
|
#### 新增组件
|
|||
|
|
```
|
|||
|
|
lib/ui/components/
|
|||
|
|
├── glass_panel.dart # 毛玻璃面板
|
|||
|
|
├── neon_button.dart # 霓虹按钮
|
|||
|
|
├── neon_card.dart # 霓虹卡片
|
|||
|
|
└── modern_dialog.dart # 现代弹窗（已存在，需更新）
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 更新文件
|
|||
|
|
```
|
|||
|
|
lib/core/theme/
|
|||
|
|
├── app_color_scheme.dart # 更新颜色系统
|
|||
|
|
├── app_text_styles.dart # 更新字体系统
|
|||
|
|
└── app_design_system.dart # 新增设计系统
|
|||
|
|
|
|||
|
|
lib/ui/pages/
|
|||
|
|
├── trade/trade_page.dart # 更新交易页面
|
|||
|
|
├── market/market_page.dart # 更新行情页面
|
|||
|
|
└── mine/mine_page.dart # 更新我的页面
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 4.2 API 设计
|
|||
|
|
|
|||
|
|
**保持现有 API 不变**，只更新 UI 层。
|
|||
|
|
|
|||
|
|
### 4.3 数据模型
|
|||
|
|
|
|||
|
|
**保持现有数据模型不变**。
|
|||
|
|
|
|||
|
|
## 5. 测试用例
|
|||
|
|
|
|||
|
|
### 5.1 正常流程测试
|
|||
|
|
- [ ] 所有页面正常显示
|
|||
|
|
- [ ] Glass Panel 效果正常
|
|||
|
|
- [ ] Neon Glow 效果正常
|
|||
|
|
- [ ] 字体正确显示
|
|||
|
|
- [ ] 颜色正确应用
|
|||
|
|
|
|||
|
|
### 5.2 兼容性测试
|
|||
|
|
- [ ] 现有 API 调用正常
|
|||
|
|
- [ ] 现有功能正常工作
|
|||
|
|
- [ ] 主题切换正常
|
|||
|
|
- [ ] 明暗模式正常
|
|||
|
|
|
|||
|
|
### 5.3 边界条件测试
|
|||
|
|
- [ ] 小屏幕设备显示正常
|
|||
|
|
- [ ] 大屏幕设备显示正常
|
|||
|
|
- [ ] 横屏显示正常
|
|||
|
|
- [ ] 性能测试通过
|
|||
|
|
|
|||
|
|
## 6. 验收标准
|
|||
|
|
|
|||
|
|
### 功能验收
|
|||
|
|
- [x] 所有功能点已实现
|
|||
|
|
- [ ] UI 符合设计稿
|
|||
|
|
- [ ] 交互流畅自然
|
|||
|
|
|
|||
|
|
### 质量验收
|
|||
|
|
- [ ] flutter analyze 无错误
|
|||
|
|
- [ ] 现有测试通过
|
|||
|
|
- [ ] 代码审查通过
|
|||
|
|
- [ ] 无明显性能问题
|
|||
|
|
|
|||
|
|
### 文档验收
|
|||
|
|
- [ ] 设计系统文档已更新
|
|||
|
|
- [ ] 组件使用说明已添加
|
|||
|
|
- [ ] CHANGELOG 已更新
|
|||
|
|
|
|||
|
|
## 7. 依赖与风险
|
|||
|
|
|
|||
|
|
### 依赖项
|
|||
|
|
- ✅ Google Fonts 包已安装
|
|||
|
|
- ✅ shadcn_ui 已集成
|
|||
|
|
- ✅ Provider 状态管理已使用
|
|||
|
|
|
|||
|
|
### 潜在风险
|
|||
|
|
- ⚠️ 字体加载可能影响性能 → 使用缓存策略
|
|||
|
|
- ⚠️ 毛玻璃效果在低端设备可能卡顿 → 添加性能检测
|
|||
|
|
- ⚠️ 新样式可能与现有样式冲突 → 分步骤更新
|
|||
|
|
|
|||
|
|
## 8. 时间规划
|
|||
|
|
|
|||
|
|
| 阶段 | 任务 | 预计时间 |
|
|||
|
|
|------|------|----------|
|
|||
|
|
| Phase 1 | 创建设计系统和基础组件 | 2 小时 |
|
|||
|
|
| Phase 2 | 更新页面样式 | 3 小时 |
|
|||
|
|
| Phase 3 | 测试和优化 | 1 小时 |
|
|||
|
|
| Phase 4 | 构建和部署 | 0.5 小时 |
|
|||
|
|
|
|||
|
|
## 9. 开发约束
|
|||
|
|
|
|||
|
|
### ⚠️ 重要约束
|
|||
|
|
1. **不破坏现有 API 接口**
|
|||
|
|
2. **保持现有业务逻辑**
|
|||
|
|
3. **兼容现有数据模型**
|
|||
|
|
4. **渐进式更新，避免大规模重构**
|
|||
|
|
|
|||
|
|
### ✅ 允许的操作
|
|||
|
|
- 更新 UI 样式
|
|||
|
|
- 创建新的 UI 组件
|
|||
|
|
- 更新主题系统
|
|||
|
|
- 优化视觉效果
|
|||
|
|
|
|||
|
|
### ❌ 禁止的操作
|
|||
|
|
- 修改 API 接口定义
|
|||
|
|
- 修改数据模型结构
|
|||
|
|
- 修改业务逻辑代码
|
|||
|
|
- 删除现有功能
|
|||
|
|
|
|||
|
|
## 10. 参考资料
|
|||
|
|
|
|||
|
|
- 交易页面样式: `页面样式/交易.txt`
|
|||
|
|
- 行情页面样式: `页面样式/行情.txt`
|
|||
|
|
- 我的页面样式: `页面样式/我的.txt`
|
|||
|
|
- 充值弹窗样式: `页面样式/充值弹窗.txt`
|
|||
|
|
- 提现弹窗样式: `页面样式/提现弹窗.txt`
|
|||
|
|
- Material Design 3: https://m3.material.io/
|
|||
|
|
- Space Grotesk Font: https://fonts.google.com/specimen/Space+Grotesk
|
|||
|
|
- Manrope Font: https://fonts.google.com/specimen/Manrope
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**创建日期**: 2026-03-24 01:42 GMT+8
|
|||
|
|
**最后更新**: 2026-03-24 01:42 GMT+8
|
|||
|
|
**状态**: ✅ 准备就绪
|