优化

flutter_monisuo/specs/theme-design.md

@@ -0,0 +1,237 @@
+# 数字货币应用主题设计规范
+
+## 设计原则
+
+1. **一致性** - 所有页面使用统一的设计语言
+2. **可读性** - 确保文字与背景对比度充足 (WCAG AA 标准)
+3. **响应式** - 适配不同屏幕尺寸
+4. **专业性** - 符合金融/交易类应用的专业感
+5. **无障碍** - 避免颜色冲突，支持色盲用户
+
+---
+
+## 颜色系统
+
+### 主色调 (Primary)
+
+```
+主色:      #00D4AA (青绿色 - 代表增长、积极)
+主色浅:    #00E6B8
+主色深:    #00B894
+```
+
+### 涨跌色 (Trading Colors)
+
+```
+涨/买入:   #00C853 (标准绿 - 国际通用)
+跌/卖出:   #FF5252 (标准红 - 国际通用)
+```
+
+### 背景色 (Dark Theme)
+
+```
+背景主色:      #0F0F1A (深蓝黑)
+卡片背景:      #1A1A2E (深蓝紫)
+输入框背景:    #16213E (深蓝)
+模态框背景:    #1E1E32
+```
+
+### 文字颜色
+
+```
+主要文字:      #FFFFFF (白色)
+次要文字:      #B0B0C0 (灰蓝)
+提示文字:      #6B6B80 (暗灰)
+禁用文字:      #4A4A5A
+链接文字:      #00D4AA
+```
+
+### 边框与分割线
+
+```
+边框:          rgba(255, 255, 255, 0.08)
+分割线:        rgba(255, 255, 255, 0.06)
+聚焦边框:      #00D4AA
+```
+
+### 功能色
+
+```
+成功:      #00C853
+警告:      #FF9800
+错误:      #FF5252
+信息:      #2196F3
+充值:      #00C853
+提现:      #FF9800
+划转:      #2196F3
+```
+
+---
+
+## 间距系统
+
+```dart
+static const double xs = 4.0;
+static const double sm = 8.0;
+static const double md = 16.0;
+static const double lg = 24.0;
+static const double xl = 32.0;
+static const double xxl = 48.0;
+```
+
+## 圆角系统
+
+```dart
+static const double sm = 8.0;   // 小组件
+static const double md = 12.0;  // 按钮、输入框
+static const double lg = 16.0;  // 卡片
+static const double xl = 24.0;  // 大卡片
+static const double full = 999.0; // 圆形
+```
+
+---
+
+## 文字排版
+
+### 字号
+
+```
+h1: 28px - 页面大标题
+h2: 24px - 区块标题
+h3: 20px - 卡片标题
+h4: 18px - 小标题
+body1: 16px - 正文
+body2: 14px - 次要正文
+caption: 12px - 辅助文字
+small: 11px - 极小文字
+```
+
+### 字重
+
+```
+bold: 700 (标题)
+semibold: 600 (强调)
+medium: 500 (正文)
+regular: 400 (辅助)
+```
+
+---
+
+## 组件规范
+
+### 按钮
+
+1. **主按钮**
+   - 高度: 48px
+   - 圆角: 12px
+   - 背景: 主题色渐变
+   - 文字: 白色, 16px, semibold
+
+2. **买入按钮**
+   - 背景: #00C853 渐变
+   - 文字: 白色
+
+3. **卖出按钮**
+   - 背景: #FF5252 渐变
+   - 文字: 白色
+
+4. **轮廓按钮**
+   - 边框: 1px solid border
+   - 背景: 透明
+   - 文字: 主题色
+
+### 输入框
+
+- 高度: 48px
+- 圆角: 12px
+- 背景: #16213E
+- 边框: 1px solid rgba(255,255,255,0.1)
+- 聚焦边框: #00D4AA
+- 文字: 白色
+- 提示: #6B6B80
+
+### 卡片
+
+- 圆角: 16px
+- 背景: #1A1A2E
+- 内边距: 16px-20px
+- 阴影: 无 (扁平设计)
+
+### 涨跌标签
+
+- 圆角: 6px
+- 内边距: 6px 10px
+- 涨: 背景 rgba(0,200,83,0.15), 文字 #00C853
+- 跌: 背景 rgba(255,82,82,0.15), 文字 #FF5252
+
+### 底部导航
+
+- 高度: 60px + safeArea
+- 背景: #0F0F1A
+- 边框: top 1px solid rgba(255,255,255,0.08)
+- 选中色: #00D4AA
+- 未选中色: #6B6B80
+
+---
+
+## 响应式断点
+
+```dart
+// 手机竖屏
+const double mobile = 360;
+
+// 手机横屏/小平板
+const double tablet = 768;
+
+// 平板/桌面
+const double desktop = 1024;
+```
+
+---
+
+## 动画规范
+
+- 标准时长: 200ms-300ms
+- 缓动曲线: easeOutCubic
+- 页面转场: 300ms
+- 按钮反馈: 150ms
+
+---
+
+## 无障碍设计
+
+1. **对比度**: 所有文字与背景对比度 >= 4.5:1
+2. **触摸目标**: 最小 44x44px
+3. **状态反馈**: 不仅依赖颜色区分
+4. **焦点指示**: 明显的焦点样式
+
+---
+
+## 禁止事项
+
+1. ❌ 文字与背景颜色相同
+2. ❌ 纯黑色背景 (#000000)
+3. ❌ 纯白色文字在浅色背景
+4. ❌ 低对比度组合 (对比度 < 4.5)
+5. ❌ 仅用颜色区分状态
+6. ❌ 过小的触摸目标 (< 44px)
+7. ❌ 不一致的组件样式
+8. ❌ 硬编码颜色值
+
+---
+
+## 实现清单
+
+### 核心文件
+
+1. `lib/core/theme/app_colors.dart` - 颜色定义
+2. `lib/core/theme/app_theme.dart` - 主题配置
+3. `lib/core/theme/app_text_styles.dart` - 文字样式
+4. `lib/core/theme/app_spacing.dart` - 间距常量
+5. `lib/ui/shared/ui_constants.dart` - 整合导出
+
+### 需要优化的文件
+
+- 所有 UI 页面文件
+- 所有 UI 组件文件
+- main.dart 主题配置