Compare commits
3 Commits
2c8bcc2acc
...
c259fb4504
| Author | SHA1 | Date | |
|---|---|---|---|
| c259fb4504 | |||
| 9760f7a8a1 | |||
| dc6a8afc9a |
@@ -1,218 +0,0 @@
|
||||
# 应用新设计系统功能规格
|
||||
|
||||
## 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
|
||||
**状态**: ✅ 准备就绪
|
||||
@@ -1,88 +0,0 @@
|
||||
# 底部导航栏优化 - 添加图标下方文字
|
||||
|
||||
## 1. 功能概述
|
||||
- **功能名称**: 底部导航栏添加文字标签
|
||||
- **优先级**: P1
|
||||
- **负责人**: 开发团队
|
||||
- **预计工期**: 30 分钟
|
||||
|
||||
## 2. 业务背景
|
||||
|
||||
### 当前痛点
|
||||
- 底部导航栏只有图标,没有文字
|
||||
- 用户需要猜测每个图标的功能
|
||||
- 用户体验不够友好
|
||||
|
||||
### 解决方案
|
||||
- 在图标下方添加文字标签
|
||||
- 提高可识别性和易用性
|
||||
|
||||
### 预期收益
|
||||
- ✅ 提升用户体验
|
||||
- ✅ 提高导航清晰度
|
||||
- ✅ 符合 Material Design 规范
|
||||
|
||||
## 3. UI/UX 设计
|
||||
|
||||
### 当前样式
|
||||
```
|
||||
[🏠] [📈] [💱] [💰] [👤]
|
||||
```
|
||||
|
||||
### 修改后样式
|
||||
```
|
||||
[🏠] [📈] [💱] [💰] [👤]
|
||||
首页 行情 交易 资产 我的
|
||||
```
|
||||
|
||||
## 4. 技术方案
|
||||
|
||||
### 修改文件
|
||||
- `lib/ui/pages/main/main_page.dart`
|
||||
|
||||
### 修改内容
|
||||
|
||||
**当前代码**:
|
||||
```dart
|
||||
Icon(
|
||||
item.icon,
|
||||
size: 24,
|
||||
color: isActive ? AppColorScheme.darkPrimary : AppColorScheme.darkOnSurfaceVariant,
|
||||
)
|
||||
```
|
||||
|
||||
**修改后代码**:
|
||||
```dart
|
||||
Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
item.icon,
|
||||
size: 24,
|
||||
color: isActive ? colorScheme.primary : colorScheme.onSurfaceVariant,
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
item.label,
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: isActive ? colorScheme.primary : colorScheme.onSurfaceVariant,
|
||||
fontWeight: isActive ? FontWeight.w600 : FontWeight.normal,
|
||||
),
|
||||
),
|
||||
],
|
||||
)
|
||||
```
|
||||
|
||||
## 5. 验收标准
|
||||
|
||||
- [ ] 每个图标下方都有文字标签
|
||||
- [ ] 文字清晰可读
|
||||
- [ ] 激活状态文字加粗
|
||||
- [ ] 支持主题切换
|
||||
- [ ] 不影响现有功能
|
||||
|
||||
---
|
||||
|
||||
**创建日期**: 2026-03-24 02:50 GMT+8
|
||||
**状态**: 待执行
|
||||
@@ -1,93 +0,0 @@
|
||||
# 修复主题切换功能 - 动态颜色系统
|
||||
|
||||
## 1. 功能概述
|
||||
- **功能名称**: 修复主题切换,支持明暗主题动态切换
|
||||
- **优先级**: P0
|
||||
- **负责人**: 开发团队
|
||||
- **预计工期**: 2 小时
|
||||
|
||||
## 2. 业务背景
|
||||
|
||||
### 当前痛点
|
||||
- 所有页面使用硬编码的 `AppColorScheme.dark*` 颜色
|
||||
- 主题切换功能不生效
|
||||
- 只有深色主题,没有浅色主题
|
||||
- 用户体验不一致
|
||||
|
||||
### 解决方案
|
||||
- 使用 `Theme.of(context)` 动态获取当前主题颜色
|
||||
- 所有页面支持明暗主题切换
|
||||
- 统一使用 Theme Provider 提供的主题
|
||||
|
||||
### 预期收益
|
||||
- ✅ 主题切换功能正常工作
|
||||
- ✅ 支持深色和浅色主题
|
||||
- ✅ 提升用户体验
|
||||
- ✅ 代码更规范
|
||||
|
||||
## 3. 技术方案
|
||||
|
||||
### 3.1 问题代码示例
|
||||
|
||||
**❌ 错误写法**(当前):
|
||||
```dart
|
||||
Container(
|
||||
color: AppColorScheme.darkBackground, // 硬编码深色
|
||||
child: Text(
|
||||
'Hello',
|
||||
style: TextStyle(color: AppColorScheme.darkOnSurface), // 硬编码
|
||||
),
|
||||
)
|
||||
```
|
||||
|
||||
**✅ 正确写法**(修复后):
|
||||
```dart
|
||||
Container(
|
||||
color: Theme.of(context).colorScheme.background, // 动态
|
||||
child: Text(
|
||||
'Hello',
|
||||
style: TextStyle(color: Theme.of(context).colorScheme.onSurface), // 动态
|
||||
),
|
||||
)
|
||||
```
|
||||
|
||||
### 3.2 修改策略
|
||||
|
||||
1. **替换所有硬编码颜色**
|
||||
- `AppColorScheme.darkBackground` → `Theme.of(context).colorScheme.background`
|
||||
- `AppColorScheme.darkOnSurface` → `Theme.of(context).colorScheme.onSurface`
|
||||
- 等等...
|
||||
|
||||
2. **确保 ThemeProvider 正常工作**
|
||||
- 检查 ThemeProvider 实现
|
||||
- 确保明暗主题配置正确
|
||||
|
||||
3. **测试主题切换**
|
||||
- 在"我的"页面测试主题切换
|
||||
- 验证所有页面响应主题变化
|
||||
|
||||
## 4. 需要修改的文件
|
||||
|
||||
### 主要页面
|
||||
1. `lib/ui/pages/home/home_page.dart` - 首页
|
||||
2. `lib/ui/pages/market/market_page.dart` - 行情页面
|
||||
3. `lib/ui/pages/trade/trade_page.dart` - 交易页面
|
||||
4. `lib/ui/pages/asset/asset_page.dart` - 资产页面
|
||||
5. `lib/ui/pages/mine/mine_page.dart` - 我的页面
|
||||
6. `lib/ui/pages/orders/*.dart` - 订单页面
|
||||
|
||||
### 组件
|
||||
7. `lib/ui/components/*.dart` - 所有组件
|
||||
|
||||
## 5. 验收标准
|
||||
|
||||
- [ ] 所有页面使用动态颜色(Theme.of(context))
|
||||
- [ ] 主题切换功能正常工作
|
||||
- [ ] 深色主题显示正常
|
||||
- [ ] 浅色主题显示正常
|
||||
- [ ] 所有页面响应主题变化
|
||||
- [ ] flutter analyze 0 errors
|
||||
|
||||
---
|
||||
|
||||
**创建日期**: 2026-03-24 02:34 GMT+8
|
||||
@@ -133,6 +133,30 @@ class AppColorScheme {
|
||||
static const Color lightOnSurfaceVariant = Color(0xFF475569);
|
||||
static const Color lightOnSurfaceMuted = Color(0xFF94A3B8);
|
||||
|
||||
// ============================================
|
||||
// 精選卡片漸變色 (Featured Card Gradients)
|
||||
// ============================================
|
||||
|
||||
/// BTC 卡片漸變 - 深藍色 (#1A1A2E → #0F3460)
|
||||
static const LinearGradient btcCardGradient = LinearGradient(
|
||||
colors: [Color(0xFF1A1A2E), Color(0xFF0F3460)],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
);
|
||||
|
||||
/// BTC 柱狀圖顏色 - 金色
|
||||
static const Color btcBarColor = Color(0xFFD4AF37);
|
||||
|
||||
/// ETH 卡片漸變 - 深紫色 (#1A1040 → #312E81)
|
||||
static const LinearGradient ethCardGradient = LinearGradient(
|
||||
colors: [Color(0xFF1A1040), Color(0xFF312E81)],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
);
|
||||
|
||||
/// ETH 柱狀圖顏色 - 紫色
|
||||
static const Color ethBarColor = Color(0xFF818CF8);
|
||||
|
||||
// ============================================
|
||||
// Glass Panel 毛玻璃效果顏色
|
||||
// ============================================
|
||||
|
||||
@@ -2,15 +2,12 @@ import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:shadcn_ui/shadcn_ui.dart';
|
||||
import '../../../core/theme/app_color_scheme.dart';
|
||||
import '../../../core/theme/app_spacing.dart';
|
||||
import '../../../core/theme/app_theme.dart';
|
||||
import '../../../core/theme/app_theme_extension.dart';
|
||||
import '../../../core/theme/app_spacing.dart';
|
||||
import '../../../core/utils/toast_utils.dart';
|
||||
import '../../../providers/asset_provider.dart';
|
||||
|
||||
/// 充值頁面 — 獨立頁面,替代彈窗
|
||||
/// 充值页面
|
||||
class DepositPage extends StatefulWidget {
|
||||
const DepositPage({super.key});
|
||||
|
||||
@@ -20,24 +17,44 @@ class DepositPage extends StatefulWidget {
|
||||
|
||||
class _DepositPageState extends State<DepositPage> {
|
||||
final _amountController = TextEditingController();
|
||||
final _formKey = GlobalKey<ShadFormState>();
|
||||
final _amountFocus = FocusNode();
|
||||
bool _isSubmitting = false;
|
||||
|
||||
// 充值結果狀態
|
||||
// 充值结果
|
||||
bool _showResult = false;
|
||||
String? _orderNo;
|
||||
String? _amount;
|
||||
String? _walletAddress;
|
||||
String _walletNetwork = 'TRC20';
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_amountController.addListener(() => setState(() {}));
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_amountController.dispose();
|
||||
_amountFocus.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// 业务逻辑
|
||||
// ============================================
|
||||
|
||||
Future<void> _submitDeposit() async {
|
||||
if (!_formKey.currentState!.saveAndValidate()) return;
|
||||
final text = _amountController.text;
|
||||
final n = double.tryParse(text);
|
||||
if (text.isEmpty || n == null || n <= 0) {
|
||||
ToastUtils.showError('請輸入有效金額');
|
||||
return;
|
||||
}
|
||||
if (n < 1000) {
|
||||
ToastUtils.showError('單筆最低充值 1000 USDT');
|
||||
return;
|
||||
}
|
||||
if (_isSubmitting) return;
|
||||
|
||||
setState(() => _isSubmitting = true);
|
||||
@@ -52,8 +69,10 @@ class _DepositPageState extends State<DepositPage> {
|
||||
_showResult = true;
|
||||
_orderNo = response.data!['orderNo'] as String? ?? '';
|
||||
_amount = response.data!['amount']?.toString() ?? '0.00';
|
||||
_walletAddress = response.data!['walletAddress'] as String? ?? '';
|
||||
_walletNetwork = response.data!['walletNetwork'] as String? ?? 'TRC20';
|
||||
_walletAddress =
|
||||
response.data!['walletAddress'] as String? ?? '';
|
||||
_walletNetwork =
|
||||
response.data!['walletNetwork'] as String? ?? 'TRC20';
|
||||
});
|
||||
} else {
|
||||
ToastUtils.showError(response.message ?? '申請失敗');
|
||||
@@ -89,7 +108,8 @@ class _DepositPageState extends State<DepositPage> {
|
||||
if (confirmed != true || !mounted) return;
|
||||
|
||||
try {
|
||||
final response = await context.read<AssetProvider>().confirmPay(_orderNo!);
|
||||
final response =
|
||||
await context.read<AssetProvider>().confirmPay(_orderNo!);
|
||||
if (!mounted) return;
|
||||
|
||||
if (response.success) {
|
||||
@@ -104,27 +124,28 @@ class _DepositPageState extends State<DepositPage> {
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// 構建 UI
|
||||
// 构建 UI
|
||||
// ============================================
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = context.colors;
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: colorScheme.background,
|
||||
backgroundColor: colorScheme.surface,
|
||||
appBar: AppBar(
|
||||
leading: IconButton(
|
||||
icon: const Icon(LucideIcons.arrowLeft, size: 20),
|
||||
icon: Icon(LucideIcons.arrowLeft,
|
||||
color: colorScheme.onSurface, size: 20),
|
||||
onPressed: () => Navigator.of(context).pop(),
|
||||
),
|
||||
title: Text(
|
||||
'充值',
|
||||
style: AppTextStyles.headlineLarge(context).copyWith(
|
||||
color: colorScheme.onSurface,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
backgroundColor: colorScheme.background,
|
||||
backgroundColor: Colors.transparent,
|
||||
elevation: 0,
|
||||
scrolledUnderElevation: 0,
|
||||
centerTitle: true,
|
||||
@@ -133,183 +154,221 @@ class _DepositPageState extends State<DepositPage> {
|
||||
);
|
||||
}
|
||||
|
||||
/// 表單視圖 — 輸入充值金額
|
||||
// ============================================
|
||||
// 表单视图
|
||||
// ============================================
|
||||
|
||||
Widget _buildFormView() {
|
||||
final colorScheme = context.colors;
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(AppSpacing.lg),
|
||||
padding: const EdgeInsets.fromLTRB(
|
||||
AppSpacing.md, AppSpacing.xs, AppSpacing.md, AppSpacing.xl),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// 幣種選擇卡片
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(AppSpacing.md),
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surfaceContainer,
|
||||
borderRadius: BorderRadius.circular(AppRadius.lg),
|
||||
border: Border.all(
|
||||
color: colorScheme.outlineVariant.withValues(alpha: 0.3),
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Container(
|
||||
width: 40,
|
||||
height: 40,
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.primary.withValues(alpha: 0.1),
|
||||
borderRadius: BorderRadius.circular(AppRadius.md),
|
||||
),
|
||||
child: Icon(
|
||||
LucideIcons.coins,
|
||||
color: colorScheme.primary,
|
||||
size: 20,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: AppSpacing.md),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'USDT',
|
||||
style: AppTextStyles.headlineMedium(context).copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
'Tether USD',
|
||||
style: AppTextStyles.bodySmall(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.xl),
|
||||
|
||||
// 金額輸入
|
||||
Text(
|
||||
'充值金額',
|
||||
style: AppTextStyles.bodyLarge(context).copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.sm),
|
||||
ShadForm(
|
||||
key: _formKey,
|
||||
child: ShadInputFormField(
|
||||
id: 'amount',
|
||||
controller: _amountController,
|
||||
placeholder: const Text('請輸入充值金額'),
|
||||
keyboardType: const TextInputType.numberWithOptions(decimal: true),
|
||||
validator: (v) {
|
||||
if (v == null || v.isEmpty) return '請輸入金額';
|
||||
final n = double.tryParse(v);
|
||||
if (n == null || n <= 0) return '請輸入有效金額';
|
||||
if (n < 1000) return '單筆最低充值 1000 USDT';
|
||||
return null;
|
||||
},
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.sm),
|
||||
|
||||
// 最低金額提示
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppSpacing.md,
|
||||
vertical: AppSpacing.sm,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColorScheme.info.withValues(alpha: 0.08),
|
||||
borderRadius: BorderRadius.circular(AppRadius.md),
|
||||
border: Border.all(
|
||||
color: AppColorScheme.info.withValues(alpha: 0.15),
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(Icons.info_outline, size: 16, color: AppColorScheme.info),
|
||||
const SizedBox(width: AppSpacing.sm),
|
||||
Text(
|
||||
'單筆最低充值 1000 USDT',
|
||||
style: AppTextStyles.bodySmall(context).copyWith(
|
||||
color: AppColorScheme.info,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.xl),
|
||||
|
||||
// 操作說明
|
||||
Text(
|
||||
'操作流程',
|
||||
style: AppTextStyles.bodyLarge(context).copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.md),
|
||||
_buildStepItem(1, '輸入充值金額並提交申請'),
|
||||
_buildStepItem(2, '向指定錢包地址轉賬'),
|
||||
_buildStepItem(3, '點擊「已打款」確認'),
|
||||
_buildStepItem(4, '等待管理員審核通過'),
|
||||
|
||||
const SizedBox(height: AppSpacing.xxl),
|
||||
|
||||
// 提交按鈕
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
height: 50,
|
||||
child: ElevatedButton(
|
||||
onPressed: _isSubmitting ? null : _submitDeposit,
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: colorScheme.primary,
|
||||
foregroundColor: colorScheme.onPrimary,
|
||||
disabledBackgroundColor: colorScheme.primary.withValues(alpha: 0.5),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadius.lg),
|
||||
),
|
||||
elevation: 0,
|
||||
),
|
||||
child: _isSubmitting
|
||||
? const SizedBox(
|
||||
width: 20,
|
||||
height: 20,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2,
|
||||
color: Colors.white,
|
||||
),
|
||||
)
|
||||
: Text(
|
||||
'下一步',
|
||||
style: AppTextStyles.headlineMedium(context).copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
color: colorScheme.onPrimary,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
// 币种行
|
||||
_buildCoinRow(colorScheme),
|
||||
const SizedBox(height: AppSpacing.lg),
|
||||
|
||||
// 安全提示
|
||||
_buildSecurityTip(),
|
||||
// 金额输入
|
||||
_buildAmountLabel(colorScheme),
|
||||
const SizedBox(height: AppSpacing.sm),
|
||||
_buildAmountInput(colorScheme),
|
||||
const SizedBox(height: AppSpacing.sm),
|
||||
|
||||
// 最低金额提示
|
||||
_buildMinTip(colorScheme),
|
||||
const SizedBox(height: AppSpacing.xl),
|
||||
|
||||
// 操作流程
|
||||
_buildSteps(colorScheme),
|
||||
const SizedBox(height: AppSpacing.xxl),
|
||||
|
||||
// 提交按钮
|
||||
_buildSubmitButton(colorScheme, '下一步', _submitDeposit),
|
||||
const SizedBox(height: AppSpacing.md),
|
||||
|
||||
// 底部提示
|
||||
_buildBottomTip(colorScheme),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// 結果視圖 — 展示錢包地址和確認打款
|
||||
Widget _buildCoinRow(ColorScheme colorScheme) {
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surface,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
border: Border.all(
|
||||
color: colorScheme.outlineVariant.withValues(alpha: 0.5),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Text(
|
||||
'USDT',
|
||||
style: AppTextStyles.bodyLarge(context).copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
'Tether USD',
|
||||
style: AppTextStyles.bodySmall(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildAmountLabel(ColorScheme colorScheme) {
|
||||
return Text(
|
||||
'充值金額',
|
||||
style: AppTextStyles.bodyMedium(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildAmountInput(ColorScheme colorScheme) {
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
height: 52,
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surface,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
border: Border.all(
|
||||
color: _amountFocus.hasFocus
|
||||
? colorScheme.secondary
|
||||
: colorScheme.outlineVariant.withValues(alpha: 0.5),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: TextField(
|
||||
controller: _amountController,
|
||||
focusNode: _amountFocus,
|
||||
keyboardType:
|
||||
const TextInputType.numberWithOptions(decimal: true),
|
||||
inputFormatters: [
|
||||
FilteringTextInputFormatter.allow(RegExp(r'^\d*\.?\d{0,8}')),
|
||||
],
|
||||
style: TextStyle(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: colorScheme.onSurface,
|
||||
),
|
||||
decoration: InputDecoration(
|
||||
hintText: '0.00',
|
||||
hintStyle: TextStyle(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.w600,
|
||||
color:
|
||||
colorScheme.onSurfaceVariant.withValues(alpha: 0.3),
|
||||
),
|
||||
border: InputBorder.none,
|
||||
contentPadding: EdgeInsets.zero,
|
||||
isDense: true,
|
||||
),
|
||||
),
|
||||
),
|
||||
Text(
|
||||
'USDT',
|
||||
style: AppTextStyles.bodyMedium(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildMinTip(ColorScheme colorScheme) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 4),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(LucideIcons.info,
|
||||
size: 13, color: colorScheme.onSurfaceVariant),
|
||||
const SizedBox(width: 6),
|
||||
Text(
|
||||
'单笔最低充值 1000 USDT',
|
||||
style: AppTextStyles.bodySmall(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSteps(ColorScheme colorScheme) {
|
||||
final steps = [
|
||||
'輸入充值金額並提交申請',
|
||||
'向指定錢包地址轉賬',
|
||||
'點擊「已打款」確認',
|
||||
'等待管理員審核通過',
|
||||
];
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'操作流程',
|
||||
style: AppTextStyles.bodyMedium(context).copyWith(
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
...steps.asMap().entries.map((e) => Padding(
|
||||
padding: const EdgeInsets.only(bottom: 10),
|
||||
child: Row(
|
||||
children: [
|
||||
Text(
|
||||
'${e.key + 1}.',
|
||||
style: AppTextStyles.bodySmall(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(
|
||||
child: Text(
|
||||
e.value,
|
||||
style: AppTextStyles.bodySmall(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
)),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// 结果视图
|
||||
// ============================================
|
||||
|
||||
Widget _buildResultView() {
|
||||
final colorScheme = context.colors;
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(AppSpacing.lg),
|
||||
padding: const EdgeInsets.fromLTRB(
|
||||
AppSpacing.md, AppSpacing.xs, AppSpacing.md, AppSpacing.xl),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
@@ -317,27 +376,19 @@ class _DepositPageState extends State<DepositPage> {
|
||||
Center(
|
||||
child: Column(
|
||||
children: [
|
||||
Container(
|
||||
width: 56,
|
||||
height: 56,
|
||||
decoration: BoxDecoration(
|
||||
color: context.appColors.up.withValues(alpha: 0.12),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: Icon(
|
||||
Icons.check_circle_outline_rounded,
|
||||
color: context.appColors.up,
|
||||
size: 32,
|
||||
),
|
||||
Icon(
|
||||
LucideIcons.circleCheck,
|
||||
size: 48,
|
||||
color: colorScheme.secondary,
|
||||
),
|
||||
const SizedBox(height: AppSpacing.md),
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
'充值申請成功',
|
||||
style: AppTextStyles.headlineLarge(context).copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
style: AppTextStyles.headlineSmall(context).copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.xs),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
'請向以下地址轉賬完成充值',
|
||||
style: AppTextStyles.bodyMedium(context).copyWith(
|
||||
@@ -349,113 +400,28 @@ class _DepositPageState extends State<DepositPage> {
|
||||
),
|
||||
const SizedBox(height: AppSpacing.xl),
|
||||
|
||||
// 訂單信息
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(AppSpacing.md),
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surfaceContainer,
|
||||
borderRadius: BorderRadius.circular(AppRadius.lg),
|
||||
border: Border.all(
|
||||
color: colorScheme.outlineVariant.withValues(alpha: 0.3),
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
_buildInfoRow('訂單號', _orderNo ?? ''),
|
||||
const SizedBox(height: AppSpacing.sm),
|
||||
Divider(color: colorScheme.outlineVariant.withValues(alpha: 0.2), height: 1),
|
||||
const SizedBox(height: AppSpacing.sm),
|
||||
_buildInfoRow('充值金額', '${_amount ?? "0.00"} USDT', isBold: true),
|
||||
],
|
||||
),
|
||||
),
|
||||
// 订单信息
|
||||
_buildInfoCard(colorScheme),
|
||||
const SizedBox(height: AppSpacing.lg),
|
||||
|
||||
// 錢包地址
|
||||
Text(
|
||||
'收款地址',
|
||||
style: AppTextStyles.bodyLarge(context).copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.sm),
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(AppSpacing.md),
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surfaceContainer,
|
||||
borderRadius: BorderRadius.circular(AppRadius.lg),
|
||||
border: Border.all(
|
||||
color: colorScheme.outlineVariant.withValues(alpha: 0.3),
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
_walletAddress ?? '',
|
||||
style: AppTextStyles.bodyMedium(context).copyWith(
|
||||
fontFamily: 'monospace',
|
||||
),
|
||||
),
|
||||
),
|
||||
GestureDetector(
|
||||
onTap: () {
|
||||
Clipboard.setData(ClipboardData(text: _walletAddress ?? ''));
|
||||
ToastUtils.showSuccess('地址已複製到剪貼板');
|
||||
},
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(AppSpacing.sm),
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.primary.withValues(alpha: 0.1),
|
||||
borderRadius: BorderRadius.circular(AppRadius.sm),
|
||||
),
|
||||
child: Icon(
|
||||
LucideIcons.copy,
|
||||
size: 16,
|
||||
color: colorScheme.primary,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: AppSpacing.sm),
|
||||
Text(
|
||||
'網絡: $_walletNetwork',
|
||||
style: AppTextStyles.bodySmall(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// 收款地址
|
||||
_buildAddressCard(colorScheme),
|
||||
const SizedBox(height: AppSpacing.md),
|
||||
|
||||
// 重要提示
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(AppSpacing.md),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColorScheme.warning.withValues(alpha: 0.08),
|
||||
borderRadius: BorderRadius.circular(AppRadius.md),
|
||||
border: Border.all(
|
||||
color: AppColorScheme.warning.withValues(alpha: 0.15),
|
||||
),
|
||||
),
|
||||
// 提示
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 4),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Icon(Icons.info_outline, size: 18, color: AppColorScheme.warning),
|
||||
const SizedBox(width: AppSpacing.sm),
|
||||
Icon(LucideIcons.info,
|
||||
size: 13, color: colorScheme.onSurfaceVariant),
|
||||
const SizedBox(width: 6),
|
||||
Expanded(
|
||||
child: Text(
|
||||
'轉賬完成後請點擊下方「已打款」按鈕確認,管理員審核通過後資金將到賬。',
|
||||
style: AppTextStyles.bodyMedium(context).copyWith(
|
||||
color: AppColorScheme.warning,
|
||||
'轉賬完成後請點擊「已打款」確認,管理員審核通過後資金將到賬。',
|
||||
style: AppTextStyles.bodySmall(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -464,24 +430,24 @@ class _DepositPageState extends State<DepositPage> {
|
||||
),
|
||||
const SizedBox(height: AppSpacing.xl),
|
||||
|
||||
// 操作按鈕
|
||||
// 操作按钮
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: SizedBox(
|
||||
height: 50,
|
||||
height: 48,
|
||||
child: OutlinedButton(
|
||||
onPressed: () => Navigator.of(context).pop(),
|
||||
style: OutlinedButton.styleFrom(
|
||||
side: BorderSide(color: colorScheme.outline),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadius.lg),
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
),
|
||||
),
|
||||
child: Text(
|
||||
'稍後確認',
|
||||
style: AppTextStyles.headlineSmall(context).copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
style: AppTextStyles.bodyMedium(context).copyWith(
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -490,22 +456,22 @@ class _DepositPageState extends State<DepositPage> {
|
||||
const SizedBox(width: AppSpacing.md),
|
||||
Expanded(
|
||||
child: SizedBox(
|
||||
height: 50,
|
||||
height: 48,
|
||||
child: ElevatedButton(
|
||||
onPressed: _confirmPay,
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: colorScheme.primary,
|
||||
foregroundColor: colorScheme.onPrimary,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadius.lg),
|
||||
),
|
||||
backgroundColor: colorScheme.onSurface,
|
||||
foregroundColor: colorScheme.surface,
|
||||
elevation: 0,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
),
|
||||
),
|
||||
child: Text(
|
||||
'已打款',
|
||||
style: AppTextStyles.headlineSmall(context).copyWith(
|
||||
style: AppTextStyles.bodyMedium(context).copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
color: colorScheme.onPrimary,
|
||||
color: colorScheme.surface,
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -513,100 +479,191 @@ class _DepositPageState extends State<DepositPage> {
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: AppSpacing.lg),
|
||||
_buildSecurityTip(),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// 輔助組件
|
||||
// ============================================
|
||||
|
||||
Widget _buildStepItem(int step, String text) {
|
||||
final colorScheme = context.colors;
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: AppSpacing.sm + AppSpacing.xs),
|
||||
child: Row(
|
||||
Widget _buildInfoCard(ColorScheme colorScheme) {
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surface,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
border: Border.all(
|
||||
color: colorScheme.outlineVariant.withValues(alpha: 0.5),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
Container(
|
||||
width: 24,
|
||||
height: 24,
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.primary.withValues(alpha: 0.1),
|
||||
borderRadius: BorderRadius.circular(AppRadius.sm),
|
||||
),
|
||||
child: Center(
|
||||
child: Text(
|
||||
'$step',
|
||||
style: AppTextStyles.labelSmall(context).copyWith(
|
||||
color: colorScheme.primary,
|
||||
fontWeight: FontWeight.bold,
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
'訂單號',
|
||||
style: AppTextStyles.bodySmall(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: AppSpacing.sm),
|
||||
Expanded(
|
||||
child: Text(
|
||||
text,
|
||||
style: AppTextStyles.bodyMedium(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
Text(
|
||||
_orderNo ?? '',
|
||||
style: AppTextStyles.bodySmall(context).copyWith(
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
Divider(
|
||||
height: 1,
|
||||
color: colorScheme.outlineVariant.withValues(alpha: 0.3)),
|
||||
const SizedBox(height: 10),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
'充值金額',
|
||||
style: AppTextStyles.bodySmall(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
'${_amount ?? "0.00"} USDT',
|
||||
style: AppTextStyles.bodyMedium(context).copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildInfoRow(String label, String value, {bool isBold = false}) {
|
||||
final colorScheme = context.colors;
|
||||
return Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
Widget _buildAddressCard(ColorScheme colorScheme) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
label,
|
||||
'收款地址',
|
||||
style: AppTextStyles.bodyMedium(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
Flexible(
|
||||
child: Text(
|
||||
value,
|
||||
style: AppTextStyles.bodyMedium(context).copyWith(
|
||||
fontWeight: isBold ? FontWeight.bold : FontWeight.w400,
|
||||
const SizedBox(height: AppSpacing.sm),
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surface,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
border: Border.all(
|
||||
color: colorScheme.outlineVariant.withValues(alpha: 0.5),
|
||||
width: 1,
|
||||
),
|
||||
textAlign: TextAlign.right,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
_walletAddress ?? '',
|
||||
style: AppTextStyles.bodyMedium(context).copyWith(
|
||||
fontFamily: 'monospace',
|
||||
),
|
||||
),
|
||||
),
|
||||
GestureDetector(
|
||||
onTap: () {
|
||||
Clipboard.setData(
|
||||
ClipboardData(text: _walletAddress ?? ''));
|
||||
ToastUtils.showSuccess('地址已複製');
|
||||
},
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(4),
|
||||
child: Icon(
|
||||
LucideIcons.copy,
|
||||
size: 16,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'网络: $_walletNetwork',
|
||||
style: AppTextStyles.bodySmall(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSecurityTip() {
|
||||
final colorScheme = context.colors;
|
||||
return Container(
|
||||
// ============================================
|
||||
// 共享组件
|
||||
// ============================================
|
||||
|
||||
Widget _buildSubmitButton(
|
||||
ColorScheme colorScheme, String text, VoidCallback onPressed) {
|
||||
return SizedBox(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(AppSpacing.md),
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surfaceContainer,
|
||||
borderRadius: BorderRadius.circular(AppRadius.md),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.verified_user_outlined,
|
||||
size: 14,
|
||||
color: colorScheme.onSurfaceVariant.withValues(alpha: 0.5),
|
||||
height: 48,
|
||||
child: ElevatedButton(
|
||||
onPressed: _isSubmitting ? null : onPressed,
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: colorScheme.onSurface,
|
||||
foregroundColor: colorScheme.surface,
|
||||
disabledBackgroundColor:
|
||||
colorScheme.surfaceContainerHighest,
|
||||
disabledForegroundColor: colorScheme.onSurfaceVariant,
|
||||
elevation: 0,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
),
|
||||
const SizedBox(width: AppSpacing.xs),
|
||||
),
|
||||
child: _isSubmitting
|
||||
? SizedBox(
|
||||
width: 20,
|
||||
height: 20,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2,
|
||||
valueColor: AlwaysStoppedAnimation<Color>(
|
||||
colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
)
|
||||
: Text(
|
||||
text,
|
||||
style: TextStyle(
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildBottomTip(ColorScheme colorScheme) {
|
||||
return Center(
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(LucideIcons.shieldCheck,
|
||||
size: 13, color: colorScheme.onSurfaceVariant),
|
||||
const SizedBox(width: 4),
|
||||
Text(
|
||||
'資金安全由平台全程保障',
|
||||
style: AppTextStyles.bodySmall(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant.withValues(alpha: 0.5),
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,16 +1,13 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:shadcn_ui/shadcn_ui.dart';
|
||||
import '../../../core/theme/app_color_scheme.dart';
|
||||
import '../../../core/theme/app_spacing.dart';
|
||||
import '../../../core/theme/app_theme.dart';
|
||||
import '../../../core/theme/app_theme_extension.dart';
|
||||
import '../../../core/theme/app_spacing.dart';
|
||||
import '../../../core/utils/toast_utils.dart';
|
||||
import '../../../providers/asset_provider.dart';
|
||||
import '../../shared/ui_constants.dart';
|
||||
|
||||
/// 提現頁面 — 獨立頁面,替代彈窗
|
||||
/// 提现页面
|
||||
class WithdrawPage extends StatefulWidget {
|
||||
final String? balance;
|
||||
|
||||
@@ -24,17 +21,16 @@ class _WithdrawPageState extends State<WithdrawPage> {
|
||||
final _amountController = TextEditingController();
|
||||
final _addressController = TextEditingController();
|
||||
final _contactController = TextEditingController();
|
||||
final _formKey = GlobalKey<ShadFormState>();
|
||||
final _amountFocus = FocusNode();
|
||||
bool _isSubmitting = false;
|
||||
|
||||
final _feeNotifier = ValueNotifier<String>('提現將扣除 10% 手續費');
|
||||
final _networksNotifier = ValueNotifier<List<String>>([]);
|
||||
final _selectedNetworkNotifier = ValueNotifier<String?>(null);
|
||||
List<String> _networks = [];
|
||||
String? _selectedNetwork;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_amountController.addListener(_onAmountChanged);
|
||||
_amountController.addListener(() => setState(() {}));
|
||||
_loadNetworks();
|
||||
}
|
||||
|
||||
@@ -43,47 +39,57 @@ class _WithdrawPageState extends State<WithdrawPage> {
|
||||
_amountController.dispose();
|
||||
_addressController.dispose();
|
||||
_contactController.dispose();
|
||||
_feeNotifier.dispose();
|
||||
_networksNotifier.dispose();
|
||||
_selectedNetworkNotifier.dispose();
|
||||
_amountFocus.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _onAmountChanged() {
|
||||
final amount = double.tryParse(_amountController.text) ?? 0;
|
||||
if (amount > 0) {
|
||||
final fee = amount * 0.1;
|
||||
final receivable = amount - fee;
|
||||
_feeNotifier.value =
|
||||
'手續費(10%): -${fee.toStringAsFixed(2)} USDT\n應收款: ${receivable.toStringAsFixed(2)} USDT';
|
||||
} else {
|
||||
_feeNotifier.value = '提現將扣除 10% 手續費';
|
||||
}
|
||||
}
|
||||
// ============================================
|
||||
// 业务逻辑
|
||||
// ============================================
|
||||
|
||||
void _loadNetworks() {
|
||||
context.read<AssetProvider>().getWalletNetworks().then((list) {
|
||||
if (mounted) {
|
||||
_networksNotifier.value = list;
|
||||
if (list.isNotEmpty) {
|
||||
_selectedNetworkNotifier.value = list.first;
|
||||
}
|
||||
setState(() {
|
||||
_networks = list;
|
||||
if (list.isNotEmpty) _selectedNetwork = list.first;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
String get _feeText {
|
||||
final amount = double.tryParse(_amountController.text) ?? 0;
|
||||
if (amount > 0) {
|
||||
final fee = amount * 0.1;
|
||||
final receivable = amount - fee;
|
||||
return '手續費(10%): -${fee.toStringAsFixed(2)} USDT | 應收款: ${receivable.toStringAsFixed(2)} USDT';
|
||||
}
|
||||
return '提現將扣除 10% 手續費';
|
||||
}
|
||||
|
||||
Future<void> _submitWithdraw() async {
|
||||
if (!_formKey.currentState!.saveAndValidate()) return;
|
||||
final amount = double.tryParse(_amountController.text);
|
||||
if (amount == null || amount <= 0) {
|
||||
ToastUtils.showError('請輸入有效金額');
|
||||
return;
|
||||
}
|
||||
final address = _addressController.text.trim();
|
||||
if (address.isEmpty) {
|
||||
ToastUtils.showError('請輸入提現地址');
|
||||
return;
|
||||
}
|
||||
if (_isSubmitting) return;
|
||||
|
||||
setState(() => _isSubmitting = true);
|
||||
try {
|
||||
final response = await context.read<AssetProvider>().withdraw(
|
||||
amount: _amountController.text,
|
||||
withdrawAddress: _addressController.text,
|
||||
withdrawContact:
|
||||
_contactController.text.isNotEmpty ? _contactController.text : null,
|
||||
network: _selectedNetworkNotifier.value,
|
||||
withdrawAddress: address,
|
||||
withdrawContact: _contactController.text.trim().isNotEmpty
|
||||
? _contactController.text.trim()
|
||||
: null,
|
||||
network: _selectedNetwork,
|
||||
);
|
||||
if (!mounted) return;
|
||||
|
||||
@@ -101,309 +107,400 @@ class _WithdrawPageState extends State<WithdrawPage> {
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// 構建 UI
|
||||
// 构建 UI
|
||||
// ============================================
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = context.colors;
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: colorScheme.background,
|
||||
backgroundColor: colorScheme.surface,
|
||||
appBar: AppBar(
|
||||
leading: IconButton(
|
||||
icon: const Icon(LucideIcons.arrowLeft, size: 20),
|
||||
icon: Icon(LucideIcons.arrowLeft,
|
||||
color: colorScheme.onSurface, size: 20),
|
||||
onPressed: () => Navigator.of(context).pop(),
|
||||
),
|
||||
title: Text(
|
||||
'提現',
|
||||
style: AppTextStyles.headlineLarge(context).copyWith(
|
||||
color: colorScheme.onSurface,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
backgroundColor: colorScheme.background,
|
||||
backgroundColor: Colors.transparent,
|
||||
elevation: 0,
|
||||
scrolledUnderElevation: 0,
|
||||
centerTitle: true,
|
||||
),
|
||||
body: SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(AppSpacing.lg),
|
||||
padding: const EdgeInsets.fromLTRB(
|
||||
AppSpacing.md, AppSpacing.xs, AppSpacing.md, AppSpacing.xl),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// 餘額顯示
|
||||
// 可用余额
|
||||
if (widget.balance != null) ...[
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(AppSpacing.md),
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surfaceContainer,
|
||||
borderRadius: BorderRadius.circular(AppRadius.lg),
|
||||
border: Border.all(
|
||||
color: colorScheme.outlineVariant.withValues(alpha: 0.3),
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
'可用餘額',
|
||||
style: AppTextStyles.bodyMedium(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
'${widget.balance} USDT',
|
||||
style: AppTextStyles.headlineMedium(context).copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: context.appColors.up,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
_buildBalanceRow(colorScheme),
|
||||
const SizedBox(height: AppSpacing.lg),
|
||||
],
|
||||
|
||||
// 表單
|
||||
ShadForm(
|
||||
key: _formKey,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// 提現金額
|
||||
Text(
|
||||
'提現金額',
|
||||
style: AppTextStyles.bodyLarge(context).copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.sm),
|
||||
ShadInputFormField(
|
||||
id: 'amount',
|
||||
controller: _amountController,
|
||||
placeholder: const Text('請輸入提現金額 (USDT)'),
|
||||
keyboardType:
|
||||
const TextInputType.numberWithOptions(decimal: true),
|
||||
validator: Validators.amount,
|
||||
),
|
||||
const SizedBox(height: AppSpacing.sm),
|
||||
// 提现金额
|
||||
_buildSectionLabel(colorScheme, '提現金額'),
|
||||
const SizedBox(height: AppSpacing.sm),
|
||||
_buildAmountInput(colorScheme),
|
||||
const SizedBox(height: AppSpacing.sm),
|
||||
|
||||
// 手續費提示
|
||||
ValueListenableBuilder<String>(
|
||||
valueListenable: _feeNotifier,
|
||||
builder: (_, feeText, __) {
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppSpacing.md,
|
||||
vertical: AppSpacing.sm,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surfaceContainer,
|
||||
borderRadius: BorderRadius.circular(AppRadius.md),
|
||||
),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Icon(Icons.info_outline,
|
||||
size: 14, color: colorScheme.onSurfaceVariant),
|
||||
const SizedBox(width: AppSpacing.xs),
|
||||
Expanded(
|
||||
child: Text(
|
||||
feeText,
|
||||
style: AppTextStyles.bodySmall(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
const SizedBox(height: AppSpacing.lg),
|
||||
// 手续费提示
|
||||
_buildFeeTip(colorScheme),
|
||||
const SizedBox(height: AppSpacing.lg),
|
||||
|
||||
// 提現網絡
|
||||
ValueListenableBuilder<List<String>>(
|
||||
valueListenable: _networksNotifier,
|
||||
builder: (_, networks, __) {
|
||||
if (networks.isEmpty) return const SizedBox.shrink();
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'提現網絡',
|
||||
style: AppTextStyles.bodyLarge(context).copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.sm),
|
||||
ValueListenableBuilder<String?>(
|
||||
valueListenable: _selectedNetworkNotifier,
|
||||
builder: (_, selected, __) {
|
||||
return SizedBox(
|
||||
width: double.infinity,
|
||||
child: ShadSelect<String>(
|
||||
placeholder: const Text('選擇提現網絡'),
|
||||
initialValue: selected,
|
||||
selectedOptionBuilder: (context, val) =>
|
||||
Text(val),
|
||||
onChanged: (value) {
|
||||
if (value != null) {
|
||||
_selectedNetworkNotifier.value = value;
|
||||
}
|
||||
},
|
||||
options: networks
|
||||
.map((n) =>
|
||||
ShadOption(value: n, child: Text(n)))
|
||||
.toList(),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
const SizedBox(height: AppSpacing.lg),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
// 提现网络
|
||||
if (_networks.isNotEmpty) ...[
|
||||
_buildSectionLabel(colorScheme, '提現網絡'),
|
||||
const SizedBox(height: AppSpacing.sm),
|
||||
_buildNetworkSelector(colorScheme),
|
||||
const SizedBox(height: AppSpacing.lg),
|
||||
],
|
||||
|
||||
// 目標地址
|
||||
Text(
|
||||
'目標地址',
|
||||
style: AppTextStyles.bodyLarge(context).copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.sm),
|
||||
ShadInputFormField(
|
||||
id: 'address',
|
||||
controller: _addressController,
|
||||
placeholder: const Text('請輸入提現地址'),
|
||||
validator: (v) => Validators.required(v, '提現地址'),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.lg),
|
||||
// 目标地址
|
||||
_buildSectionLabel(colorScheme, '目標地址'),
|
||||
const SizedBox(height: AppSpacing.sm),
|
||||
_buildAddressInput(colorScheme),
|
||||
const SizedBox(height: AppSpacing.lg),
|
||||
|
||||
// 聯繫方式
|
||||
Text(
|
||||
'聯繫方式(可選)',
|
||||
style: AppTextStyles.bodyLarge(context).copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.sm),
|
||||
ShadInputFormField(
|
||||
id: 'contact',
|
||||
controller: _contactController,
|
||||
placeholder: const Text('方便客服與您聯繫'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// 联系方式
|
||||
_buildSectionLabel(colorScheme, '聯繫方式(可選)'),
|
||||
const SizedBox(height: AppSpacing.sm),
|
||||
_buildContactInput(colorScheme),
|
||||
const SizedBox(height: AppSpacing.xl),
|
||||
|
||||
// 安全提示
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(AppSpacing.md),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColorScheme.warning.withValues(alpha: 0.08),
|
||||
borderRadius: BorderRadius.circular(AppRadius.md),
|
||||
border: Border.all(
|
||||
color: AppColorScheme.warning.withValues(alpha: 0.15),
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Icon(Icons.shield_outlined,
|
||||
size: 16, color: AppColorScheme.warning),
|
||||
const SizedBox(width: AppSpacing.xs),
|
||||
Text(
|
||||
'安全提示',
|
||||
style: AppTextStyles.labelLarge(context).copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColorScheme.warning,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: AppSpacing.sm),
|
||||
Text(
|
||||
'• 請仔細核對提現地址,地址錯誤將導致資產無法找回\n'
|
||||
'• 提現申請提交後需等待管理員審批\n'
|
||||
'• 提現將扣除 10% 手續費',
|
||||
style: AppTextStyles.bodySmall(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
height: 1.6,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
_buildSecurityTips(colorScheme),
|
||||
const SizedBox(height: AppSpacing.xl),
|
||||
|
||||
// 提交按鈕
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
height: 50,
|
||||
child: ElevatedButton(
|
||||
onPressed: _isSubmitting ? null : _submitWithdraw,
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: colorScheme.primary,
|
||||
foregroundColor: colorScheme.onPrimary,
|
||||
disabledBackgroundColor:
|
||||
colorScheme.primary.withValues(alpha: 0.5),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(AppRadius.lg),
|
||||
),
|
||||
elevation: 0,
|
||||
),
|
||||
child: _isSubmitting
|
||||
? const SizedBox(
|
||||
width: 20,
|
||||
height: 20,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2,
|
||||
color: Colors.white,
|
||||
),
|
||||
)
|
||||
: Text(
|
||||
'提交申請',
|
||||
style: AppTextStyles.headlineMedium(context).copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
color: colorScheme.onPrimary,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.lg),
|
||||
// 提交按钮
|
||||
_buildSubmitButton(colorScheme),
|
||||
const SizedBox(height: AppSpacing.md),
|
||||
|
||||
// 底部安全保障
|
||||
Center(
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.verified_user_outlined,
|
||||
size: 14,
|
||||
color: colorScheme.onSurfaceVariant.withValues(alpha: 0.5),
|
||||
),
|
||||
const SizedBox(width: AppSpacing.xs),
|
||||
Text(
|
||||
'資金安全由平台全程保障',
|
||||
style: AppTextStyles.bodySmall(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant.withValues(alpha: 0.5),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
_buildBottomTip(colorScheme),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// 组件
|
||||
// ============================================
|
||||
|
||||
Widget _buildBalanceRow(ColorScheme colorScheme) {
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surface,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
border: Border.all(
|
||||
color: colorScheme.outlineVariant.withValues(alpha: 0.5),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
'可用餘額',
|
||||
style: AppTextStyles.bodyMedium(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
'${widget.balance} USDT',
|
||||
style: AppTextStyles.bodyMedium(context).copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSectionLabel(ColorScheme colorScheme, String text) {
|
||||
return Text(
|
||||
text,
|
||||
style: AppTextStyles.bodyMedium(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildAmountInput(ColorScheme colorScheme) {
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
height: 52,
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surface,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
border: Border.all(
|
||||
color: _amountFocus.hasFocus
|
||||
? colorScheme.secondary
|
||||
: colorScheme.outlineVariant.withValues(alpha: 0.5),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: TextField(
|
||||
controller: _amountController,
|
||||
focusNode: _amountFocus,
|
||||
keyboardType:
|
||||
const TextInputType.numberWithOptions(decimal: true),
|
||||
inputFormatters: [
|
||||
FilteringTextInputFormatter.allow(RegExp(r'^\d*\.?\d{0,8}')),
|
||||
],
|
||||
style: TextStyle(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: colorScheme.onSurface,
|
||||
),
|
||||
decoration: InputDecoration(
|
||||
hintText: '0.00',
|
||||
hintStyle: TextStyle(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.w600,
|
||||
color:
|
||||
colorScheme.onSurfaceVariant.withValues(alpha: 0.3),
|
||||
),
|
||||
border: InputBorder.none,
|
||||
contentPadding: EdgeInsets.zero,
|
||||
isDense: true,
|
||||
),
|
||||
),
|
||||
),
|
||||
Text(
|
||||
'USDT',
|
||||
style: AppTextStyles.bodyMedium(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildFeeTip(ColorScheme colorScheme) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 4),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(LucideIcons.info,
|
||||
size: 13, color: colorScheme.onSurfaceVariant),
|
||||
const SizedBox(width: 6),
|
||||
Expanded(
|
||||
child: Text(
|
||||
_feeText,
|
||||
style: AppTextStyles.bodySmall(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildNetworkSelector(ColorScheme colorScheme) {
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
height: 48,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surface,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
border: Border.all(
|
||||
color: colorScheme.outlineVariant.withValues(alpha: 0.5),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
child: DropdownButtonHideUnderline(
|
||||
child: DropdownButton<String>(
|
||||
value: _selectedNetwork,
|
||||
isExpanded: true,
|
||||
hint: Text(
|
||||
'選擇提現網絡',
|
||||
style: AppTextStyles.bodyMedium(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
items: _networks
|
||||
.map((n) => DropdownMenuItem(
|
||||
value: n,
|
||||
child: Text(n),
|
||||
))
|
||||
.toList(),
|
||||
onChanged: (value) {
|
||||
if (value != null) setState(() => _selectedNetwork = value);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildAddressInput(ColorScheme colorScheme) {
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
height: 48,
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surface,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
border: Border.all(
|
||||
color: colorScheme.outlineVariant.withValues(alpha: 0.5),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
alignment: Alignment.center,
|
||||
child: TextField(
|
||||
controller: _addressController,
|
||||
style: AppTextStyles.bodyMedium(context),
|
||||
decoration: InputDecoration(
|
||||
hintText: '請輸入提現地址',
|
||||
hintStyle: AppTextStyles.bodyMedium(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant.withValues(alpha: 0.5),
|
||||
),
|
||||
border: InputBorder.none,
|
||||
contentPadding: EdgeInsets.zero,
|
||||
isDense: true,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildContactInput(ColorScheme colorScheme) {
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
height: 48,
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surface,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
border: Border.all(
|
||||
color: colorScheme.outlineVariant.withValues(alpha: 0.5),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
alignment: Alignment.center,
|
||||
child: TextField(
|
||||
controller: _contactController,
|
||||
style: AppTextStyles.bodyMedium(context),
|
||||
decoration: InputDecoration(
|
||||
hintText: '方便客服與您聯繫',
|
||||
hintStyle: AppTextStyles.bodyMedium(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant.withValues(alpha: 0.5),
|
||||
),
|
||||
border: InputBorder.none,
|
||||
contentPadding: EdgeInsets.zero,
|
||||
isDense: true,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSecurityTips(ColorScheme colorScheme) {
|
||||
final tips = [
|
||||
'請仔細核對提現地址,地址錯誤將導致資產無法找回',
|
||||
'提現申請提交後需等待管理員審批',
|
||||
'提現將扣除 10% 手續費',
|
||||
];
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: tips
|
||||
.map((t) => Padding(
|
||||
padding: const EdgeInsets.only(bottom: 6),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'• ',
|
||||
style: AppTextStyles.bodySmall(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Text(
|
||||
t,
|
||||
style: AppTextStyles.bodySmall(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
))
|
||||
.toList(),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSubmitButton(ColorScheme colorScheme) {
|
||||
return SizedBox(
|
||||
width: double.infinity,
|
||||
height: 48,
|
||||
child: ElevatedButton(
|
||||
onPressed: _isSubmitting ? null : _submitWithdraw,
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: colorScheme.onSurface,
|
||||
foregroundColor: colorScheme.surface,
|
||||
disabledBackgroundColor: colorScheme.surfaceContainerHighest,
|
||||
disabledForegroundColor: colorScheme.onSurfaceVariant,
|
||||
elevation: 0,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
),
|
||||
),
|
||||
child: _isSubmitting
|
||||
? SizedBox(
|
||||
width: 20,
|
||||
height: 20,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2,
|
||||
valueColor: AlwaysStoppedAnimation<Color>(
|
||||
colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
)
|
||||
: Text(
|
||||
'提交申請',
|
||||
style: TextStyle(
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildBottomTip(ColorScheme colorScheme) {
|
||||
return Center(
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(LucideIcons.shieldCheck,
|
||||
size: 13, color: colorScheme.onSurfaceVariant),
|
||||
const SizedBox(width: 4),
|
||||
Text(
|
||||
'資金安全由平台全程保障',
|
||||
style: AppTextStyles.bodySmall(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,12 +2,12 @@ import 'dart:math';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:shadcn_ui/shadcn_ui.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import '../../../core/theme/app_color_scheme.dart';
|
||||
import '../../../core/theme/app_spacing.dart';
|
||||
import '../../../core/theme/app_theme.dart';
|
||||
import '../../../core/theme/app_theme_extension.dart';
|
||||
import '../../../data/models/coin.dart';
|
||||
import '../../../providers/market_provider.dart';
|
||||
import '../../components/glass_panel.dart';
|
||||
import '../../components/coin_icon.dart';
|
||||
import '../main/main_page.dart';
|
||||
|
||||
@@ -64,21 +64,21 @@ class _MarketPageState extends State<MarketPage>
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// 頁面標題 "行情"
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(bottom: AppSpacing.sm),
|
||||
child: Text(
|
||||
'行情',
|
||||
style: AppTextStyles.displaySmall(context),
|
||||
Text(
|
||||
'行情',
|
||||
style: AppTextStyles.displaySmall(context).copyWith(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.w800,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppSpacing.md),
|
||||
// 搜索框
|
||||
_buildSearchBar(context),
|
||||
const SizedBox(height: AppSpacing.md),
|
||||
// 精選區域:BTC + ETH 卡片
|
||||
_buildFeaturedSection(provider),
|
||||
const SizedBox(height: AppSpacing.md),
|
||||
// 分區標題:全部幣種 + 更多
|
||||
_buildSectionHeader(),
|
||||
const SizedBox(height: AppSpacing.md),
|
||||
// 幣種列表卡片
|
||||
// 全部幣種列表(含表頭)
|
||||
_buildCoinList(provider),
|
||||
],
|
||||
),
|
||||
@@ -89,6 +89,39 @@ class _MarketPageState extends State<MarketPage>
|
||||
);
|
||||
}
|
||||
|
||||
/// 搜索框
|
||||
Widget _buildSearchBar(BuildContext context) {
|
||||
return GestureDetector(
|
||||
onTap: () {
|
||||
// TODO: 彈出搜索界面
|
||||
},
|
||||
child: Container(
|
||||
height: 40,
|
||||
decoration: BoxDecoration(
|
||||
color: context.colors.surfaceContainerHigh,
|
||||
borderRadius: BorderRadius.circular(AppRadius.md),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.md),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
LucideIcons.search,
|
||||
size: 16,
|
||||
color: context.colors.onSurfaceVariant,
|
||||
),
|
||||
const SizedBox(width: AppSpacing.sm),
|
||||
Text(
|
||||
'搜索幣種名稱或代碼',
|
||||
style: AppTextStyles.bodyMedium(context).copyWith(
|
||||
color: context.appColors.onSurfaceMuted,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// 精選區域:BTC + ETH 大卡片
|
||||
Widget _buildFeaturedSection(MarketProvider provider) {
|
||||
final featured = provider.featuredCoins;
|
||||
@@ -103,7 +136,7 @@ class _MarketPageState extends State<MarketPage>
|
||||
Expanded(child: _FeaturedCard(coin: btc))
|
||||
else
|
||||
const Expanded(child: SizedBox.shrink()),
|
||||
const SizedBox(width: AppSpacing.sm + AppSpacing.xs),
|
||||
const SizedBox(width: 10),
|
||||
if (eth != null)
|
||||
Expanded(child: _FeaturedCard(coin: eth))
|
||||
else
|
||||
@@ -112,26 +145,7 @@ class _MarketPageState extends State<MarketPage>
|
||||
);
|
||||
}
|
||||
|
||||
/// 分區標題:全部幣種 + 更多
|
||||
Widget _buildSectionHeader() {
|
||||
return Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
'全部幣種',
|
||||
style: AppTextStyles.headlineLarge(context),
|
||||
),
|
||||
Text(
|
||||
'更多 >',
|
||||
style: AppTextStyles.bodyMedium(context).copyWith(
|
||||
color: context.colors.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
/// 幣種列表
|
||||
/// 幣種列表(含表頭)
|
||||
Widget _buildCoinList(MarketProvider provider) {
|
||||
final coins = provider.otherCoins;
|
||||
|
||||
@@ -152,18 +166,77 @@ class _MarketPageState extends State<MarketPage>
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
child: ListView.separated(
|
||||
shrinkWrap: true,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
itemCount: coins.length,
|
||||
separatorBuilder: (_, __) => Divider(
|
||||
height: 1,
|
||||
thickness: 1,
|
||||
color: context.colors.outlineVariant.withValues(alpha: 0.5 * 0.15),
|
||||
indent: AppSpacing.md,
|
||||
endIndent: AppSpacing.md,
|
||||
),
|
||||
itemBuilder: (context, index) => _CoinRow(coin: coins[index]),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// 表頭行
|
||||
_buildListHeader(context),
|
||||
// 列表項
|
||||
ListView.separated(
|
||||
shrinkWrap: true,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
itemCount: coins.length,
|
||||
separatorBuilder: (_, __) => Divider(
|
||||
height: 1,
|
||||
thickness: 1,
|
||||
color: context.colors.outlineVariant.withValues(alpha: 0.5 * 0.15),
|
||||
indent: AppSpacing.md,
|
||||
endIndent: AppSpacing.md,
|
||||
),
|
||||
itemBuilder: (context, index) => _CoinRow(coin: coins[index]),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// 列表表頭行:幣種 | 最新價 | 漲跌幅
|
||||
Widget _buildListHeader(BuildContext context) {
|
||||
return const Padding(
|
||||
padding: EdgeInsets.fromLTRB(
|
||||
AppSpacing.md,
|
||||
AppSpacing.sm + AppSpacing.xs,
|
||||
AppSpacing.md,
|
||||
AppSpacing.sm,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
'幣種',
|
||||
style: TextStyle(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColorScheme.darkOnSurfaceVariant,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(
|
||||
width: 90,
|
||||
child: Text(
|
||||
'最新價',
|
||||
textAlign: TextAlign.right,
|
||||
style: TextStyle(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColorScheme.darkOnSurfaceVariant,
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(width: AppSpacing.sm),
|
||||
SizedBox(
|
||||
width: 72,
|
||||
child: Text(
|
||||
'漲跌幅',
|
||||
textAlign: TextAlign.right,
|
||||
style: TextStyle(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColorScheme.darkOnSurfaceVariant,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
@@ -195,7 +268,7 @@ class _MarketPageState extends State<MarketPage>
|
||||
}
|
||||
}
|
||||
|
||||
/// 精選卡片:BTC / ETH (130px 高度,含迷你柱狀圖)
|
||||
/// 精選卡片:BTC / ETH (148px 高度,漸變背景,含迷你柱狀圖)
|
||||
class _FeaturedCard extends StatelessWidget {
|
||||
final Coin coin;
|
||||
|
||||
@@ -204,60 +277,78 @@ class _FeaturedCard extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final isUp = coin.isUp;
|
||||
final changeColor =
|
||||
isUp ? context.appColors.up : context.appColors.down;
|
||||
final changeBgColor = isUp
|
||||
? context.appColors.upBackground
|
||||
: context.appColors.downBackground;
|
||||
final isBtc = coin.code == 'BTC';
|
||||
|
||||
return GlassPanel(
|
||||
final gradient =
|
||||
isBtc ? AppColorScheme.btcCardGradient : AppColorScheme.ethCardGradient;
|
||||
final barColor =
|
||||
isBtc ? AppColorScheme.btcBarColor : AppColorScheme.ethBarColor;
|
||||
final changeBgColor = isUp
|
||||
? AppColorScheme.darkTertiary.withValues(alpha: 0.2)
|
||||
: AppColorScheme.darkError.withValues(alpha: 0.2);
|
||||
final changeColor = isUp
|
||||
? AppColorScheme.darkTertiary
|
||||
: AppColorScheme.darkError;
|
||||
|
||||
return Container(
|
||||
height: 148,
|
||||
padding: const EdgeInsets.all(AppSpacing.md),
|
||||
height: 130,
|
||||
decoration: BoxDecoration(
|
||||
gradient: gradient,
|
||||
borderRadius: BorderRadius.circular(AppRadius.lg),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
// 第一行:幣種名稱 + 漲跌徽章
|
||||
// 第一行:交易對名 + 漲跌幅標籤
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
'${coin.code}/USDT',
|
||||
style: AppTextStyles.labelLarge(context), // 縮小文字
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs + 2, vertical: 2),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppSpacing.xs + 2,
|
||||
vertical: 2,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: changeBgColor,
|
||||
borderRadius: BorderRadius.circular(AppRadius.sm),
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
),
|
||||
child: Text(
|
||||
coin.formattedChange,
|
||||
style: AppTextStyles.labelSmall(context).copyWith(
|
||||
style: TextStyle(
|
||||
color: changeColor,
|
||||
fontSize: 10, // 縮小文字
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
// 第二行:價格
|
||||
// 第二行:大號價格
|
||||
Text(
|
||||
'\$${_formatFeaturedPrice(coin)}',
|
||||
style: AppTextStyles.headlineLarge(context).copyWith( // 縮小文字
|
||||
fontWeight: FontWeight.bold,
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.w800,
|
||||
height: 1.2,
|
||||
),
|
||||
),
|
||||
// 第三行:幣種全名
|
||||
Text(
|
||||
coin.name,
|
||||
style: AppTextStyles.bodySmall(context).copyWith( // 縮小文字
|
||||
color: context.colors.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
// 第四行:迷你柱狀圖
|
||||
// 第三行:迷你柱狀圖
|
||||
Expanded(
|
||||
child: _MiniBarChart(isUp: isUp, seed: coin.code.hashCode),
|
||||
child: _MiniBarChart(
|
||||
barColor: barColor,
|
||||
seed: coin.code.hashCode,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -291,17 +382,13 @@ class _FeaturedCard extends StatelessWidget {
|
||||
|
||||
/// 迷你柱狀圖(模擬價格走勢)
|
||||
class _MiniBarChart extends StatelessWidget {
|
||||
final bool isUp;
|
||||
final Color barColor;
|
||||
final int seed;
|
||||
|
||||
const _MiniBarChart({required this.isUp, required this.seed});
|
||||
const _MiniBarChart({required this.barColor, required this.seed});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final barColor = isUp
|
||||
? context.appColors.up
|
||||
: context.appColors.down;
|
||||
|
||||
// 生成隨機但確定的高度序列
|
||||
final heights = _generateHeights();
|
||||
|
||||
@@ -311,7 +398,7 @@ class _MiniBarChart extends StatelessWidget {
|
||||
children: heights.map((h) {
|
||||
return Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(left: 2), // 增加間距
|
||||
padding: const EdgeInsets.only(left: 2),
|
||||
child: Container(
|
||||
height: h,
|
||||
decoration: BoxDecoration(
|
||||
@@ -327,8 +414,8 @@ class _MiniBarChart extends StatelessWidget {
|
||||
|
||||
List<double> _generateHeights() {
|
||||
final random = Random(seed);
|
||||
final base = 6.0; // 降低基礎高度
|
||||
final range = 12.0; // 降低範圍
|
||||
const base = 6.0;
|
||||
const range = 12.0;
|
||||
return List.generate(6, (_) => base + random.nextDouble() * range);
|
||||
}
|
||||
}
|
||||
@@ -352,11 +439,18 @@ class _CoinRow extends StatelessWidget {
|
||||
onTap: () => _navigateToTrade(context),
|
||||
behavior: HitTestBehavior.opaque,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.md, vertical: 14),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppSpacing.md,
|
||||
vertical: 14,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
// 頭像:圓形字母頭像
|
||||
_CoinAvatar(letter: coin.displayIcon, code: coin.code),
|
||||
// 頭像:36px 圓形
|
||||
CoinIcon(
|
||||
symbol: coin.code,
|
||||
size: 36,
|
||||
isCircle: true,
|
||||
),
|
||||
const SizedBox(width: AppSpacing.sm + AppSpacing.xs),
|
||||
// 幣種信息:交易對 + 全名
|
||||
Expanded(
|
||||
@@ -366,7 +460,9 @@ class _CoinRow extends StatelessWidget {
|
||||
children: [
|
||||
Text(
|
||||
'${coin.code}/USDT',
|
||||
style: AppTextStyles.numberMedium(context),
|
||||
style: AppTextStyles.numberMedium(context).copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
@@ -376,30 +472,36 @@ class _CoinRow extends StatelessWidget {
|
||||
],
|
||||
),
|
||||
),
|
||||
// 右側:價格 + 漲跌標籤
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
'\$${coin.formattedPrice}',
|
||||
style: AppTextStyles.numberMedium(context),
|
||||
// 價格(固定寬度90,右對齊)
|
||||
SizedBox(
|
||||
width: 90,
|
||||
child: Text(
|
||||
'\$${coin.formattedPrice}',
|
||||
textAlign: TextAlign.right,
|
||||
style: AppTextStyles.numberMedium(context),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: AppSpacing.sm),
|
||||
// 漲跌幅標籤(固定寬度72)
|
||||
SizedBox(
|
||||
width: 72,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppSpacing.xs + 2,
|
||||
vertical: 4,
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.xs + 2, vertical: 2),
|
||||
decoration: BoxDecoration(
|
||||
color: changeBgColor,
|
||||
borderRadius: BorderRadius.circular(AppRadius.sm),
|
||||
),
|
||||
child: Text(
|
||||
coin.formattedChange,
|
||||
style: AppTextStyles.labelMedium(context).copyWith(
|
||||
color: changeColor,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: changeBgColor,
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
),
|
||||
child: Text(
|
||||
coin.formattedChange,
|
||||
textAlign: TextAlign.center,
|
||||
style: AppTextStyles.labelSmall(context).copyWith(
|
||||
color: changeColor,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -413,31 +515,17 @@ class _CoinRow extends StatelessWidget {
|
||||
}
|
||||
}
|
||||
|
||||
/// 幣種頭像組件
|
||||
class _CoinAvatar extends StatelessWidget {
|
||||
final String letter;
|
||||
final String code;
|
||||
|
||||
const _CoinAvatar({required this.letter, required this.code});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
// 使用新的 CoinIcon 组件
|
||||
return CoinIcon(
|
||||
symbol: code,
|
||||
size: 36,
|
||||
isCircle: true,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// 空狀態
|
||||
class _EmptyState extends StatelessWidget {
|
||||
final IconData icon;
|
||||
final String message;
|
||||
final VoidCallback? onRetry;
|
||||
|
||||
const _EmptyState({required this.icon, required this.message, this.onRetry});
|
||||
const _EmptyState({
|
||||
required this.icon,
|
||||
required this.message,
|
||||
this.onRetry,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
@@ -1,34 +1,29 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../../../core/theme/app_color_scheme.dart';
|
||||
import '../../../../core/theme/app_spacing.dart';
|
||||
import '../../../../core/theme/app_theme.dart';
|
||||
|
||||
/// 退出登錄按鈕
|
||||
/// 退出登录按钮
|
||||
class LogoutButton extends StatelessWidget {
|
||||
final VoidCallback onLogout;
|
||||
const LogoutButton({super.key, required this.onLogout});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GestureDetector(
|
||||
onTap: onLogout,
|
||||
child: Container(
|
||||
width: double.infinity,
|
||||
height: 48,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColorScheme.down.withOpacity(0.05),
|
||||
borderRadius: BorderRadius.circular(AppRadius.lg),
|
||||
border: Border.all(
|
||||
color: AppColorScheme.down.withOpacity(0.15),
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return SizedBox(
|
||||
width: double.infinity,
|
||||
height: 48,
|
||||
child: OutlinedButton(
|
||||
onPressed: onLogout,
|
||||
style: OutlinedButton.styleFrom(
|
||||
foregroundColor: colorScheme.error,
|
||||
side: BorderSide(color: colorScheme.error),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
),
|
||||
),
|
||||
child: Center(
|
||||
child: Text(
|
||||
'退出登錄',
|
||||
style: AppTextStyles.headlineMedium(context).copyWith(
|
||||
color: AppColorScheme.down,
|
||||
),
|
||||
),
|
||||
child: const Text(
|
||||
'退出登錄',
|
||||
style: TextStyle(fontSize: 15, fontWeight: FontWeight.w500),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
@@ -1,16 +1,12 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import 'package:shadcn_ui/shadcn_ui.dart';
|
||||
import '../../../../core/theme/app_color_scheme.dart';
|
||||
import '../../../../core/theme/app_spacing.dart';
|
||||
import '../../../../core/theme/app_theme_extension.dart';
|
||||
import '../kyc_page.dart';
|
||||
import '../welfare_center_page.dart';
|
||||
import 'menu_group_container.dart';
|
||||
import 'menu_row.dart';
|
||||
import 'menu_trailing_widgets.dart';
|
||||
|
||||
/// 菜單分組1 - 福利中心 / 實名認證 / 安全設置 / 消息通知
|
||||
/// 菜单分组1 - 福利中心 / 实名认证 / 安全设置 / 消息通知
|
||||
class MenuGroup1 extends StatelessWidget {
|
||||
final int kycStatus;
|
||||
final void Function(String) onShowComingSoon;
|
||||
@@ -23,13 +19,14 @@ class MenuGroup1 extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return MenuGroupContainer(
|
||||
child: Column(
|
||||
children: [
|
||||
// 福利中心
|
||||
MenuRow(
|
||||
icon: LucideIcons.gift,
|
||||
iconColor: AppColorScheme.darkSecondary, // gold
|
||||
iconColor: colorScheme.secondary,
|
||||
title: '福利中心',
|
||||
onTap: () {
|
||||
Navigator.push(
|
||||
@@ -39,15 +36,14 @@ class MenuGroup1 extends StatelessWidget {
|
||||
},
|
||||
),
|
||||
const Divider(height: 1),
|
||||
// 實名認證
|
||||
MenuRow(
|
||||
icon: LucideIcons.shieldCheck,
|
||||
iconColor: context.appColors.up,
|
||||
iconColor: colorScheme.secondary,
|
||||
title: '實名認證',
|
||||
trailing: KycBadge(kycStatus: kycStatus),
|
||||
onTap: () {
|
||||
if (kycStatus == 2) {
|
||||
showKycStatusDialog(context);
|
||||
_showKycStatusDialog(context);
|
||||
} else {
|
||||
Navigator.push(
|
||||
context,
|
||||
@@ -57,18 +53,16 @@ class MenuGroup1 extends StatelessWidget {
|
||||
},
|
||||
),
|
||||
const Divider(height: 1),
|
||||
// 安全設置
|
||||
MenuRow(
|
||||
icon: LucideIcons.lock,
|
||||
iconColor: context.colors.onSurfaceVariant,
|
||||
iconColor: colorScheme.onSurfaceVariant,
|
||||
title: '安全設置',
|
||||
onTap: () => onShowComingSoon('安全設置'),
|
||||
),
|
||||
const Divider(height: 1),
|
||||
// 消息通知
|
||||
MenuRow(
|
||||
icon: LucideIcons.bell,
|
||||
iconColor: context.colors.onSurfaceVariant,
|
||||
iconColor: colorScheme.onSurfaceVariant,
|
||||
title: '消息通知',
|
||||
trailing: const RedDotIndicator(),
|
||||
onTap: () => onShowComingSoon('消息通知'),
|
||||
@@ -79,23 +73,16 @@ class MenuGroup1 extends StatelessWidget {
|
||||
}
|
||||
}
|
||||
|
||||
/// 顯示 KYC 認證狀態對話框
|
||||
void showKycStatusDialog(BuildContext context) {
|
||||
showShadDialog(
|
||||
void _showKycStatusDialog(BuildContext context) {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (ctx) => ShadDialog.alert(
|
||||
title: Row(
|
||||
children: [
|
||||
Icon(Icons.check_circle, color: AppColorScheme.up, size: 20),
|
||||
SizedBox(width: AppSpacing.sm),
|
||||
const Text('實名認證'),
|
||||
],
|
||||
),
|
||||
description: const Text('您的實名認證已通過'),
|
||||
builder: (ctx) => AlertDialog(
|
||||
title: const Text('實名認證'),
|
||||
content: const Text('您的實名認證已通過'),
|
||||
actions: [
|
||||
ShadButton(
|
||||
child: const Text('確定'),
|
||||
TextButton(
|
||||
onPressed: () => Navigator.of(ctx).pop(),
|
||||
child: const Text('确定'),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
@@ -1,11 +1,6 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../../../core/theme/app_spacing.dart';
|
||||
import '../../../../core/theme/app_theme_extension.dart';
|
||||
|
||||
/// 菜單分組容器 - 統一的圓角卡片樣式
|
||||
///
|
||||
/// 所有菜單分組共享相同的容器樣式:背景色、圓角、邊框。
|
||||
/// 通過 [child] 傳入菜單項 Column。
|
||||
/// 菜单分组容器
|
||||
class MenuGroupContainer extends StatelessWidget {
|
||||
final Widget child;
|
||||
|
||||
@@ -13,14 +8,16 @@ class MenuGroupContainer extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
clipBehavior: Clip.antiAlias,
|
||||
decoration: BoxDecoration(
|
||||
color: context.appColors.surfaceCard,
|
||||
borderRadius: BorderRadius.circular(AppRadius.lg),
|
||||
color: colorScheme.surface,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
border: Border.all(
|
||||
color: context.appColors.ghostBorder,
|
||||
color: colorScheme.outlineVariant.withValues(alpha: 0.5),
|
||||
),
|
||||
),
|
||||
child: child,
|
||||
|
||||
@@ -1,12 +1,8 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../../../core/theme/app_spacing.dart';
|
||||
import '../../../../core/theme/app_theme.dart';
|
||||
import '../../../../core/theme/app_theme_extension.dart';
|
||||
|
||||
/// 單行菜單項:圖標 + 標題 + 尾部組件 (chevron)
|
||||
///
|
||||
/// 圖標顏色 (通常是使用主題色)
|
||||
/// 单行菜单项:图标 + 标题 + 尾部
|
||||
class MenuRow extends StatelessWidget {
|
||||
final IconData icon;
|
||||
final Color iconColor;
|
||||
@@ -25,38 +21,30 @@ class MenuRow extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return InkWell(
|
||||
onTap: onTap,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
|
||||
child: Row(
|
||||
children: [
|
||||
// Icon in 36x36 rounded container
|
||||
Container(
|
||||
width: 36,
|
||||
height: 36,
|
||||
decoration: BoxDecoration(
|
||||
color: context.appColors.surfaceCardHigh,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Center(
|
||||
child: Icon(icon, size: 18, color: iconColor),
|
||||
),
|
||||
),
|
||||
Icon(icon, size: 18, color: iconColor),
|
||||
const SizedBox(width: 10),
|
||||
// Title
|
||||
Expanded(
|
||||
child: Text(
|
||||
title,
|
||||
style: AppTextStyles.headlineMedium(context),
|
||||
style: AppTextStyles.bodyLarge(context).copyWith(
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
),
|
||||
// Trailing
|
||||
if (trailing != null)
|
||||
if (trailing != null) trailing!,
|
||||
if (trailing == null)
|
||||
Icon(
|
||||
LucideIcons.chevronRight,
|
||||
size: 16,
|
||||
color: context.colors.onSurfaceVariant,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
@@ -1,178 +1,96 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import '../../../../core/theme/app_color_scheme.dart';
|
||||
import '../../../../core/theme/app_spacing.dart';
|
||||
import '../../../../core/theme/app_theme.dart';
|
||||
import '../../../../core/theme/app_theme_extension.dart';
|
||||
import '../../../../providers/theme_provider.dart';
|
||||
|
||||
/// KYC 狀態徽章 (e.g. "已認證" green badge + chevron)
|
||||
///
|
||||
/// 根據 [kycStatus] 顯示不同狀態:
|
||||
/// - 2: 已認證(綠色)
|
||||
/// - 1: 審核中(橙色)
|
||||
/// - 其他: 僅顯示 chevron
|
||||
/// KYC 状态文字
|
||||
class KycBadge extends StatelessWidget {
|
||||
final int kycStatus;
|
||||
const KycBadge({super.key, required this.kycStatus});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final green = context.appColors.up;
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
if (kycStatus == 2) {
|
||||
return Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
|
||||
decoration: BoxDecoration(
|
||||
color: green.withValues(alpha: 0.1),
|
||||
borderRadius: BorderRadius.circular(AppRadius.sm),
|
||||
),
|
||||
child: Text(
|
||||
'已認證',
|
||||
style: AppTextStyles.labelMedium(context).copyWith(
|
||||
color: green,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Icon(
|
||||
LucideIcons.chevronRight,
|
||||
size: 16,
|
||||
color: context.colors.onSurfaceVariant,
|
||||
),
|
||||
],
|
||||
return Text(
|
||||
'已認證',
|
||||
style: AppTextStyles.bodySmall(context).copyWith(
|
||||
color: colorScheme.secondary,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
if (kycStatus == 1) {
|
||||
return Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColorScheme.warning.withValues(alpha: 0.1),
|
||||
borderRadius: BorderRadius.circular(AppRadius.sm),
|
||||
),
|
||||
child: Text(
|
||||
'審核中',
|
||||
style: AppTextStyles.labelMedium(context).copyWith(
|
||||
color: AppColorScheme.warning,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Icon(
|
||||
LucideIcons.chevronRight,
|
||||
size: 16,
|
||||
color: context.colors.onSurfaceVariant,
|
||||
),
|
||||
],
|
||||
return Text(
|
||||
'審核中',
|
||||
style: AppTextStyles.bodySmall(context).copyWith(
|
||||
color: colorScheme.tertiary,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return Icon(
|
||||
LucideIcons.chevronRight,
|
||||
size: 16,
|
||||
color: context.colors.onSurfaceVariant,
|
||||
return Text(
|
||||
'未認證',
|
||||
style: AppTextStyles.bodySmall(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// 紅點指示器 - 消息通知 + chevron
|
||||
/// 红点指示器
|
||||
class RedDotIndicator extends StatelessWidget {
|
||||
const RedDotIndicator({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Container(
|
||||
width: 8,
|
||||
height: 8,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColorScheme.down,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Icon(
|
||||
LucideIcons.chevronRight,
|
||||
size: 16,
|
||||
color: context.colors.onSurfaceVariant,
|
||||
),
|
||||
],
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
return Container(
|
||||
width: 8,
|
||||
height: 8,
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.error,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// 深色模式切換行
|
||||
/// 深色模式切换行
|
||||
class DarkModeRow extends StatelessWidget {
|
||||
const DarkModeRow({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final themeProvider = context.watch<ThemeProvider>();
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
|
||||
child: Row(
|
||||
children: [
|
||||
// Icon in 36x36 rounded container
|
||||
Container(
|
||||
width: 36,
|
||||
height: 36,
|
||||
decoration: BoxDecoration(
|
||||
color: context.appColors.surfaceCardHigh,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Center(
|
||||
child: Icon(
|
||||
LucideIcons.moon,
|
||||
size: 18,
|
||||
color: context.colors.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
Icon(
|
||||
LucideIcons.moon,
|
||||
size: 18,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: Text(
|
||||
'深色模式',
|
||||
style: AppTextStyles.headlineMedium(context),
|
||||
),
|
||||
),
|
||||
// Toggle switch - matching .pen design (44x24 rounded pill)
|
||||
GestureDetector(
|
||||
onTap: () => themeProvider.toggleTheme(),
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
width: 44,
|
||||
height: 24,
|
||||
padding: const EdgeInsets.all(2),
|
||||
decoration: BoxDecoration(
|
||||
color: context.appColors.surfaceCardHigh,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: AnimatedAlign(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
alignment:
|
||||
themeProvider.isDarkMode
|
||||
? Alignment.centerRight : Alignment.centerLeft,
|
||||
child: Container(
|
||||
width: 20,
|
||||
height: 20,
|
||||
decoration: BoxDecoration(
|
||||
color: context.colors.onSurface,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
style: AppTextStyles.bodyLarge(context).copyWith(
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Switch(
|
||||
value: themeProvider.isDarkMode,
|
||||
onChanged: (_) => themeProvider.toggleTheme(),
|
||||
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
@@ -1,60 +1,59 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../../../core/theme/app_spacing.dart';
|
||||
import '../../../../core/theme/app_theme.dart';
|
||||
import '../../../../core/theme/app_theme_extension.dart';
|
||||
import 'avatar_circle.dart';
|
||||
|
||||
/// 用戶資料卡片 - 頭像 + 用戶名 + 徽章 + chevron
|
||||
/// 用户资料卡片
|
||||
class ProfileCard extends StatelessWidget {
|
||||
final dynamic user;
|
||||
const ProfileCard({super.key, required this.user});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.all(20),
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: context.appColors.surfaceCard,
|
||||
borderRadius: BorderRadius.circular(AppRadius.lg),
|
||||
color: colorScheme.surface,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
border: Border.all(
|
||||
color: context.appColors.ghostBorder,
|
||||
color: colorScheme.outlineVariant.withValues(alpha: 0.5),
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
// Avatar
|
||||
AvatarCircle(
|
||||
radius: 24,
|
||||
fontSize: 18,
|
||||
radius: 22,
|
||||
fontSize: 16,
|
||||
text: user?.avatarText,
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
// Name + badge column
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
user?.username ?? '未登錄',
|
||||
style: AppTextStyles.headlineLarge(context),
|
||||
style: AppTextStyles.bodyLarge(context).copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
'普通用戶',
|
||||
style: AppTextStyles.bodyMedium(context).copyWith(
|
||||
fontWeight: FontWeight.normal,
|
||||
style: AppTextStyles.bodySmall(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// Chevron
|
||||
Icon(
|
||||
LucideIcons.chevronRight,
|
||||
size: 16,
|
||||
color: context.colors.onSurfaceVariant,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
@@ -1,19 +1,16 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:shadcn_ui/shadcn_ui.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import '../../../core/theme/app_color_scheme.dart';
|
||||
import '../../../core/theme/app_spacing.dart';
|
||||
import '../../../core/theme/app_theme.dart';
|
||||
import '../../../core/theme/app_spacing.dart';
|
||||
import '../../../providers/auth_provider.dart';
|
||||
import '../auth/login_page.dart';
|
||||
import 'components/about_dialog_helpers.dart';
|
||||
import 'components/avatar_circle.dart';
|
||||
import 'components/logout_button.dart';
|
||||
import 'components/menu_group1.dart';
|
||||
import 'components/menu_group2.dart';
|
||||
import 'components/profile_card.dart';
|
||||
|
||||
/// 我的頁面 - 匹配 .pen 設計稿
|
||||
/// 我的页面
|
||||
class MinePage extends StatefulWidget {
|
||||
const MinePage({super.key});
|
||||
|
||||
@@ -32,7 +29,7 @@ class _MinePageState extends State<MinePage>
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: colorScheme.background,
|
||||
backgroundColor: colorScheme.surface,
|
||||
body: Consumer<AuthProvider>(
|
||||
builder: (context, auth, _) {
|
||||
return SingleChildScrollView(
|
||||
@@ -55,12 +52,6 @@ class _MinePageState extends State<MinePage>
|
||||
SizedBox(height: AppSpacing.lg),
|
||||
LogoutButton(onLogout: () => _handleLogout(auth)),
|
||||
SizedBox(height: AppSpacing.md),
|
||||
Text(
|
||||
'System Build v1.0.0',
|
||||
style: AppTextStyles.bodySmall(context).copyWith(
|
||||
color: colorScheme.onSurfaceVariant.withOpacity(0.5),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
@@ -70,21 +61,15 @@ class _MinePageState extends State<MinePage>
|
||||
}
|
||||
|
||||
void _showComingSoon(String feature) {
|
||||
showShadDialog(
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (context) => ShadDialog.alert(
|
||||
title: Row(
|
||||
children: [
|
||||
Icon(Icons.construction, color: AppColorScheme.warning, size: 20),
|
||||
SizedBox(width: AppSpacing.sm),
|
||||
const Text('功能開發中'),
|
||||
],
|
||||
),
|
||||
description: Text('$feature功能正在開發中,敬請期待~'),
|
||||
builder: (ctx) => AlertDialog(
|
||||
title: const Text('功能開發中'),
|
||||
content: Text('$feature功能正在開發中,敬請期待'),
|
||||
actions: [
|
||||
ShadButton(
|
||||
TextButton(
|
||||
onPressed: () => Navigator.of(ctx).pop(),
|
||||
child: const Text('知道了'),
|
||||
onPressed: () => Navigator.of(context).pop(),
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -92,37 +77,29 @@ class _MinePageState extends State<MinePage>
|
||||
}
|
||||
|
||||
void _showAboutDialog() {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
showShadDialog(
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (context) => ShadDialog(
|
||||
builder: (ctx) => AlertDialog(
|
||||
title: Row(
|
||||
children: [
|
||||
AvatarCircle(radius: 20, fontSize: 16),
|
||||
SizedBox(width: AppSpacing.sm + AppSpacing.xs),
|
||||
AvatarCircle(radius: 16, fontSize: 12),
|
||||
const SizedBox(width: 8),
|
||||
const Text('模擬所'),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
content: const Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'虛擬貨幣模擬交易平臺',
|
||||
style: TextStyle(color: colorScheme.onSurfaceVariant),
|
||||
),
|
||||
SizedBox(height: AppSpacing.md),
|
||||
InfoRow(icon: Icons.code, text: '版本: 1.0.0'),
|
||||
SizedBox(height: AppSpacing.sm),
|
||||
InfoRow(
|
||||
icon: Icons.favorite,
|
||||
text: 'Built with Flutter & Material Design 3'),
|
||||
Text('虛擬貨幣模擬交易平臺'),
|
||||
SizedBox(height: 8),
|
||||
Text('版本: 1.0.0'),
|
||||
],
|
||||
),
|
||||
actions: [
|
||||
ShadButton(
|
||||
child: const Text('確定'),
|
||||
onPressed: () => Navigator.of(context).pop(),
|
||||
TextButton(
|
||||
onPressed: () => Navigator.of(ctx).pop(),
|
||||
child: const Text('确定'),
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -130,18 +107,19 @@ class _MinePageState extends State<MinePage>
|
||||
}
|
||||
|
||||
void _handleLogout(AuthProvider auth) {
|
||||
showShadDialog(
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (ctx) => ShadDialog.alert(
|
||||
title: const Text('確認退出'),
|
||||
description: const Text('確定要退出登錄嗎?'),
|
||||
builder: (ctx) => AlertDialog(
|
||||
title: const Text('退出登錄'),
|
||||
content: const Text('確定要退出登錄嗎?'),
|
||||
actions: [
|
||||
ShadButton.outline(
|
||||
child: const Text('取消'),
|
||||
TextButton(
|
||||
onPressed: () => Navigator.of(ctx).pop(),
|
||||
child: Text('取消',
|
||||
style: TextStyle(color: colorScheme.onSurfaceVariant)),
|
||||
),
|
||||
ShadButton.destructive(
|
||||
child: const Text('退出'),
|
||||
TextButton(
|
||||
onPressed: () async {
|
||||
Navigator.of(ctx).pop();
|
||||
await auth.logout();
|
||||
@@ -152,6 +130,8 @@ class _MinePageState extends State<MinePage>
|
||||
);
|
||||
}
|
||||
},
|
||||
child: Text('退出', style: TextStyle(color: colorScheme.error)),
|
||||
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user