sion/monisuo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化

Browse Source
This commit is contained in:
sion123
2026-03-28 18:17:20 +08:00
parent 22128e66ce
commit 9625d3388f
3 changed files with 0 additions and 907 deletions
Download Patch File Download Diff File Expand all files Collapse all files

461
flutter_monisuo/specs/modernization-v2.md
View File

@@ -1,461 +0,0 @@
# Flutter Monisuo 现代化改造规范 v2.0
## 目标
将 Flutter Monisuo 应用打造为现代化、简约、专业的虚拟货币交易平台，参考 SuperDesign 设计原则。
## 设计原则
### 1. 现代化简约风格
- **Vercel/Linear 风格**：干净的深色主题，微妙的阴影，大量留白
- **避免过时设计**：不使用 Bootstrap 蓝、沉重的阴影、复杂的渐变
- **微交互**：细腻的动画反馈（150-400ms）
### 2. 明暗主题支持
- 完整的 Light/Dark 主题切换
- 使用 ColorScheme 管理主题
- 主题切换时平滑过渡
### 3. 颜色系统（基于 OKLCH 转换）
#### 现代深色主题
```dart
// Vercel/Linear 风格
background: Color(0xFF0A0A0B) // oklch(0.098 0.005 270)
cardBackground: Color(0xFF111113) // oklch(0.148 0.004 270)
primary: Color(0xFF00D4AA) // 品牌青绿色
primaryForeground: Color(0xFFFFFFFF)
secondary: Color(0xFF1C1C1F)
muted: Color(0xFF27272A)
border: Color(0xFF27272A)
```
#### 现代浅色主题
```dart
background: Color(0xFFFFFFFF) // oklch(1 0 0)
cardBackground: Color(0xFFFAFAFA) // oklch(0.98 0 0)
primary: Color(0xFF00B894) // 品牌青绿色（深色版）
primaryForeground: Color(0xFFFFFFFF)
secondary: Color(0xFFF4F4F5)
muted: Color(0xFFE4E4E7)
border: Color(0xFFE4E4E7)
```
#### 涨跌色（明暗通用）
```dart
up: Color(0xFF00C853) // 涨/买入（绿色）
down: Color(0xFFFF5252) // 跌/卖出（红色）
```
### 4. 字体系统
#### 使用 Google Fonts
```yaml
dependencies:
google_fonts: ^6.1.0
```
#### 字体选择
- **主字体**：Inter（现代、清晰）
- **数字字体**：JetBrains Mono（等宽，用于价格/数量）
- **回退字体**：system-ui
#### 字号系统
```dart
// 标题
displayLarge: 32sp, weight: 700
displayMedium: 24sp, weight: 600
displaySmall: 20sp, weight: 600
// 正文
bodyLarge: 16sp, weight: 400
bodyMedium: 14sp, weight: 400
bodySmall: 12sp, weight: 400
// 数字（等宽）
numberLarge: 20sp, JetBrains Mono
numberMedium: 16sp, JetBrains Mono
numberSmall: 14sp, JetBrains Mono
```
### 5. 间距系统
```dart
class Spacing {
static const double xs = 4.0; // 0.25rem
static const double sm = 8.0; // 0.5rem
static const double md = 16.0; // 1rem
static const double lg = 24.0; // 1.5rem
static const double xl = 32.0; // 2rem
static const double xxl = 48.0; // 3rem
}
```
### 6. 圆角系统
```dart
class BorderRadius {
static const double sm = 4.0;
static const double md = 8.0;
static const double lg = 12.0;
static const double xl = 16.0;
static const double xxl = 24.0;
static const double full = 9999.0;
}
```
### 7. 阴影系统
```dart
// 微妙的阴影（Vercel 风格）
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 4,
offset: Offset(0, 2),
)
// 悬停阴影
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 8,
offset: Offset(0, 4),
)
```
### 8. 动画系统
```dart
class AnimationDurations {
static const Duration fast = Duration(milliseconds: 150);
static const Duration normal = Duration(milliseconds: 250);
static const Duration slow = Duration(milliseconds: 400);
static const Duration verySlow = Duration(milliseconds: 600);
}
// Curves
Curves.easeOutCubic // 入场动画
Curves.easeInOutCubic // 过渡动画
Curves.elasticOut // 弹性反馈
```
## 组件设计规范
### 1. 按钮
#### 主要按钮（Primary）
```dart
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Theme.of(context).colorScheme.primary,
foregroundColor: Theme.of(context).colorScheme.onPrimary,
minimumSize: Size(44, 44), // 触摸目标
padding: EdgeInsets.symmetric(horizontal: Spacing.lg, vertical: Spacing.md),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(BorderRadius.md),
),
elevation: 0, // 现代风格：无阴影或微阴影
),
)
```
#### 次要按钮（Secondary）
```dart
OutlinedButton(
style: OutlinedButton.styleFrom(
minimumSize: Size(44, 44),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(BorderRadius.md),
),
side: BorderSide(color: Theme.of(context).colorScheme.border),
),
)
```
#### 幽灵按钮（Ghost）
```dart
TextButton(
style: TextButton.styleFrom(
minimumSize: Size(44, 44),
),
)
```
### 2. 卡片
```dart
Card(
elevation: 0, // 使用边框代替阴影
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(BorderRadius.lg),
side: BorderSide(
color: Theme.of(context).colorScheme.border,
width: 1,
),
),
color: Theme.of(context).colorScheme.cardBackground,
child: Padding(
padding: EdgeInsets.all(Spacing.md),
child: Column(...),
),
)
```
### 3. 输入框
```dart
TextFormField(
decoration: InputDecoration(
filled: true,
fillColor: Theme.of(context).colorScheme.cardBackground,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(BorderRadius.md),
borderSide: BorderSide(color: Theme.of(context).colorScheme.border),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(BorderRadius.md),
borderSide: BorderSide(color: Theme.of(context).colorScheme.border),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(BorderRadius.md),
borderSide: BorderSide(
color: Theme.of(context).colorScheme.primary,
width: 2,
),
),
contentPadding: EdgeInsets.symmetric(
horizontal: Spacing.md,
vertical: Spacing.sm,
),
),
)
```
### 4. 现代弹窗
#### 标准弹窗
```dart
showDialog(
context: context,
builder: (context) => Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(BorderRadius.xl),
),
backgroundColor: Theme.of(context).colorScheme.cardBackground,
child: Container(
padding: EdgeInsets.all(Spacing.lg),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 标题
Text(
'Dialog Title',
style: Theme.of(context).textTheme.displaySmall,
),
SizedBox(height: Spacing.md),
// 内容
Text('Dialog content here...'),
SizedBox(height: Spacing.lg),
// 按钮
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(child: Text('Cancel')),
SizedBox(width: Spacing.sm),
ElevatedButton(child: Text('Confirm')),
],
),
],
),
),
),
);
```
#### 底部抽屉（Bottom Sheet）
```dart
showModalBottomSheet(
context: context,
isScrollControlled: true,
backgroundColor: Colors.transparent,
builder: (context) => Container(
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.cardBackground,
borderRadius: BorderRadius.vertical(
top: Radius.circular(BorderRadius.xl),
),
),
padding: EdgeInsets.all(Spacing.lg),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// 拖动指示器
Container(
width: 40,
height: 4,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.muted,
borderRadius: BorderRadius.circular(2),
),
),
SizedBox(height: Spacing.md),
// 内容
...
],
),
),
);
```
### 5. 列表项
```dart
ListTile(
contentPadding: EdgeInsets.symmetric(
horizontal: Spacing.md,
vertical: Spacing.sm,
),
leading: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.secondary,
borderRadius: BorderRadius.circular(BorderRadius.md),
),
child: Icon(icon, size: 20),
),
title: Text(
title,
style: Theme.of(context).textTheme.bodyLarge,
),
subtitle: Text(
subtitle,
style: Theme.of(context).textTheme.bodySmall,
),
trailing: Icon(Icons.chevron_right, size: 20),
)
```
## 页面布局规范
### 1. 通用布局
```dart
Scaffold(
backgroundColor: Theme.of(context).colorScheme.background,
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.background,
elevation: 0,
title: Text('Page Title'),
),
body: SafeArea(
child: SingleChildScrollView(
padding: EdgeInsets.all(Spacing.md),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 内容
],
),
),
),
)
```
### 2. 响应式布局
```dart
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth >= 1024) {
// 桌面布局
return _DesktopLayout();
} else if (constraints.maxWidth >= 768) {
// 平板布局
return _TabletLayout();
} else {
// 移动布局
return _MobileLayout();
}
},
)
```
## 主题切换实现
### 1. 主题 Provider
```dart
class ThemeProvider extends ChangeNotifier {
ThemeMode _themeMode = ThemeMode.system;
ThemeMode get themeMode => _themeMode;
void toggleTheme() {
_themeMode = _themeMode == ThemeMode.light
? ThemeMode.dark
: ThemeMode.light;
notifyListeners();
}
void setTheme(ThemeMode mode) {
_themeMode = mode;
notifyListeners();
}
}
```
### 2. 主题切换按钮
```dart
IconButton(
icon: Icon(
Provider.of<ThemeProvider>(context).themeMode == ThemeMode.light
? Icons.dark_mode
: Icons.light_mode,
),
onPressed: () {
Provider.of<ThemeProvider>(context, listen: false).toggleTheme();
},
)
```
## 无障碍设计
### 1. 对比度
- 所有文字/背景组合 >= 4.5:1（WCAG AA）
- 大文字（18sp+）>= 3:1
### 2. 触摸目标
- 最小触摸目标 44x44
### 3. 语义化
```dart
Semantics(
label: 'Submit button',
button: true,
child: ElevatedButton(...),
)
```
## 禁止事项
- ❌ 使用过时的 Bootstrap 蓝 (#007bff)
- ❌ 沉重的阴影
- ❌ 复杂的渐变
- ❌ 文字与背景颜色相同
- ❌ 对比度 < 4.5:1
- ❌ 触摸目标 < 44x44
- ❌ 硬编码颜色值
- ❌ 不一致的间距/圆角
## 验证清单
- [ ] 明暗主题切换正常
- [ ] 所有页面风格一致
- [ ] 对比度 >= 4.5:1
- [ ] 触摸目标 >= 44x44
- [ ] flutter analyze 无错误
- [ ] 响应式布局正常
- [ ] 动画流畅（60fps）
- [ ] 无硬编码颜色
- [ ] 间距/圆角一致

237
flutter_monisuo/specs/theme-design.md
View File

@@ -1,237 +0,0 @@
# 数字货币应用主题设计规范
## 设计原则
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 主题配置

209
flutter_monisuo/specs/theme-modernization.md
View File

@@ -1,209 +0,0 @@
# Monisuo Flutter 主题现代化规范
## 项目概况
- **项目名称**: flutter_monisuo (虚拟货币模拟交易平台)
- **技术栈**: Flutter 3 + Dart + shadcn_ui 0.52.1
- **当前状态**: 已集成 shadcn_ui，部分页面已重构
## 现代化目标
### 1. 统一设计系统
#### 1.1 主题配置
- 当前：Slate 深色主题
- 目标：
- 统一配色方案（品牌色、涨跌色、中性色）
- 完善的深色/浅色模式支持
- 自定义品牌色系统
#### 1.2 间距系统
- 标准化 padding/margin/gap
- 使用统一的间距 token
- 响应式布局适配
#### 1.3 组件样式
- 所有按钮统一使用 ShadButton
- 所有卡片统一使用 ShadCard
- 所有输入框统一使用 ShadInputFormField
- 所有图标统一使用 LucideIcons
### 2. 页面现代化
#### 2.1 核心页面（高优先级）
1. **首页 (home_page.dart)**
- 使用 ShadCard 展示资产概览
- 使用 ShadButton 进行快捷操作
- 添加 flutter_animate 动画
2. **行情页面 (market_page.dart)**
- 币种列表使用 ShadCard
- 价格变化使用 ShadBadge
- 搜索框使用 ShadInput
3. **交易页面 (trade_page.dart)**
- 买入/卖出使用不同颜色的 ShadButton
- 数量输入使用 ShadInputFormField
- 币种选择使用 ShadSelect
4. **资产页面 (asset_page.dart)**
- 总资产使用大号 ShadCard
- 充值/提现使用 ShadButton
- 资金列表使用 ShadListTile
5. **个人中心 (mine_page.dart)**
- 菜单项使用统一布局
- 设置项使用 ShadSwitch
- 退出登录使用 ShadButton.destructive
#### 2.2 认证页面（中优先级）
1. **登录页面 (login_page.dart)**
- 已有示例：login_page_shadcn.dart
- 需要替换原文件
2. **注册页面 (register_page.dart)**
- 创建 shadcn 版本
- 完整表单验证
#### 2.3 主框架（高优先级）
1. **主页面 (main_page.dart)**
- 已有示例：main_page_shadcn.dart
- 需要替换原文件
- 优化底部导航
### 3. 自定义组件
创建业务特定组件：
#### 3.1 CoinCard - 币种卡片
```dart
class CoinCard extends StatelessWidget {
final String name;
final String code;
final double price;
final double change24h;
final String iconUrl;
// 使用 ShadCard + ShadAvatar + ShadBadge
}
```
#### 3.2 TradeButton - 交易按钮
```dart
class TradeButton extends StatelessWidget {
final bool isBuy;
final VoidCallback onPressed;
// 买入：绿色 ShadButton
// 卖出：红色 ShadButton.destructive
}
```
#### 3.3 AssetCard - 资产卡片
```dart
class AssetCard extends StatelessWidget {
final String title;
final double balance;
final double change;
// 使用 ShadCard + 大号文本
}
```
#### 3.4 PriceChart - 价格图表
```dart
class PriceChart extends StatelessWidget {
final List<double> prices;
final bool isUp;
// 使用 flutter_animate 添加动画
}
```
### 4. 动画系统
使用 flutter_animate 添加动画：
#### 4.1 页面切换动画
- 淡入淡出
- 滑动效果
#### 4.2 列表加载动画
- 交错淡入
- 滑动进入
#### 4.3 交互反馈动画
- 按钮点击缩放
- 卡片悬停效果
### 5. 主题定制
#### 5.1 品牌色系统
```dart
// 自定义品牌色
const brandGreen = Color(0xFF00D4AA); // 品牌绿
const upColor = Color(0xFF10B981); // 涨
const downColor = Color(0xFFEF4444); // 跌
```
#### 5.2 配色方案选择
- **Slate**（当前）：专业、稳重
- 可选：Zinc（现代）、Blue（活力）
## 禁止事项
- ❌ 不要修改业务逻辑
- ❌ 不要修改 API 调用
- ❌ 不要修改数据模型
- ❌ 不要删除现有功能
- ❌ 不要改变 Provider 逻辑
## 验证标准
### 功能验证
- [ ] 用户可以登录/注册
- [ ] 可以查看行情
- [ ] 可以进行交易
- [ ] 可以查看资产
- [ ] 可以修改设置
### 视觉验证
- [ ] 所有页面使用统一的组件
- [ ] 所有页面有一致的间距
- [ ] 所有页面有流畅的动画
- [ ] 深色模式完美支持
### 代码验证
- [ ] 无 Dart 分析错误
- [ ] 无 Flutter 警告
- [ ] 构建成功
- [ ] 无运行时错误
## 重构优先级
### P0 - 立即执行
1. 替换 main_page.dart 为 shadcn 版本
2. 替换 login_page.dart 为 shadcn 版本
3. 重构 home_page.dart
### P1 - 高优先级
1. 重构 market_page.dart
2. 重构 trade_page.dart
3. 重构 asset_page.dart
### P2 - 中优先级
1. 重构 mine_page.dart
2. 重构 register_page.dart
3. 创建自定义组件
### P3 - 低优先级
1. 优化动画
2. 添加高级效果
3. 性能优化
## 参考资源
- [shadcn_ui Flutter 文档](https://flutter-shadcn-ui.mariuti.com/)
- [Lucide Icons Flutter](https://pub.dev/packages/lucide_icons_flutter)
- [flutter_animate](https://pub.dev/packages/flutter_animate)
- [REFACTOR_PLAN.md](../REFACTOR_PLAN.md) - 已有的重构计划