feat(ui): 优化组件样式并添加现代弹窗模板

- 更新 trade_button.dart 使用新颜色系统
- 更新 coin_card.dart 使用新颜色系统
- 更新 asset_card.dart 使用新颜色系统
- 创建 modern_dialog.dart 现代弹窗模板
- 创建 modern_bottom_sheet.dart 现代底部抽屉模板

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

flutter_monisuo/lib/ui/components/asset_card.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:shadcn_ui/shadcn_ui.dart';
-import '../../core/theme/app_colors.dart';
+import '../../core/theme/app_color_scheme.dart';
 
 /// 资产卡片组件 - 用于显示资产总览
 class AssetCard extends StatelessWidget {
@@ -13,9 +13,9 @@ class AssetCard extends StatelessWidget {
   final Gradient? gradient;
   final VoidCallback? onTap;
 
-  // 默认渐变色 - 使用品牌蓝
+  // 默认渐变色 - 使用品牌青绿色
   static const defaultGradient = LinearGradient(
-    colors: [Color(0xFF2563EB), Color(0xFF1D4ED8)],
+    colors: [AppColorScheme.primaryDark, Color(0xFF00B894)],
     begin: Alignment.topLeft,
     end: Alignment.bottomRight,
   );
@@ -54,7 +54,7 @@ class AssetCard extends StatelessWidget {
           borderRadius: BorderRadius.circular(20),
           boxShadow: [
             BoxShadow(
-              color: Colors.black.withOpacity(0.1),
+              color: Colors.black.withValues(alpha: 0.1),
               blurRadius: 10,
               offset: const Offset(0, 4),
             ),
@@ -72,7 +72,7 @@ class AssetCard extends StatelessWidget {
                 ),
                 const Spacer(),
                 if (onTap != null)
-                  Icon(
+                  const Icon(
                     LucideIcons.chevronRight,
                     color: Colors.white70,
                     size: 18,
@@ -161,9 +161,6 @@ class AssetCardCompact extends StatelessWidget {
   final bool? isUp;
   final VoidCallback? onTap;
 
-  static const upColor = Color(0xFF00C853);
-  static const downColor = Color(0xFFFF5252);
-
   const AssetCardCompact({
     super.key,
     required this.title,
@@ -176,6 +173,7 @@ class AssetCardCompact extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = ShadTheme.of(context);
+    final isValueUp = isUp ?? true;
 
     return ShadCard(
       padding: const EdgeInsets.all(16),
@@ -205,13 +203,13 @@ class AssetCardCompact extends StatelessWidget {
               Container(
                 padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
                 decoration: BoxDecoration(
-                  color: (isUp ?? true) ? upColor.withOpacity(0.2) : downColor.withOpacity(0.2),
+                  color: getChangeBackgroundColor(isValueUp),
                   borderRadius: BorderRadius.circular(6),
                 ),
                 child: Text(
                   change!,
                   style: TextStyle(
-                    color: (isUp ?? true) ? upColor : downColor,
+                    color: getChangeColor(isValueUp),
                     fontWeight: FontWeight.w600,
                   ),
                 ),

flutter_monisuo/lib/ui/components/coin_card.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:shadcn_ui/shadcn_ui.dart';
-import '../../core/constants/app_colors.dart';
+import '../../core/theme/app_color_scheme.dart';
 
 /// 币种卡片组件 - 用于显示币种信息
 class CoinCard extends StatelessWidget {
@@ -38,7 +38,7 @@ class CoinCard extends StatelessWidget {
               width: 44,
               height: 44,
               decoration: BoxDecoration(
-                color: theme.colorScheme.primary.withOpacity(0.1),
+                color: theme.colorScheme.primary.withValues(alpha: 0.1),
                 shape: BoxShape.circle,
               ),
               child: Center(
@@ -75,13 +75,13 @@ class CoinCard extends StatelessWidget {
             Container(
               padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
               decoration: BoxDecoration(
-                color: AppColors.getChangeBackgroundColor(isUp),
+                color: getChangeBackgroundColor(isUp),
                 borderRadius: BorderRadius.circular(6),
               ),
               child: Text(
                 change,
                 style: TextStyle(
-                  color: AppColors.getChangeColor(isUp),
+                  color: getChangeColor(isUp),
                   fontWeight: FontWeight.w600,
                 ),
               ),

flutter_monisuo/lib/ui/components/trade_button.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:shadcn_ui/shadcn_ui.dart';
+import '../../core/theme/app_color_scheme.dart';
 
 /// 交易按钮组件 - 买入/卖出按钮
 class TradeButton extends StatelessWidget {
@@ -9,10 +10,6 @@ class TradeButton extends StatelessWidget {
   final bool isLoading;
   final bool fullWidth;
 
-  // 颜色常量
-  static const buyColor = Color(0xFF00C853);
-  static const sellColor = Color(0xFFFF5252);
-
   const TradeButton({
     super.key,
     this.isBuy = true,
@@ -42,7 +39,7 @@ class TradeButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final color = isBuy ? buyColor : sellColor;
+    final color = isBuy ? AppColorScheme.up : AppColorScheme.down;
     final text = isBuy ? '买入${coinCode != null ? ' $coinCode' : ''}' : '卖出${coinCode != null ? ' $coinCode' : ''}';
     final icon = isBuy ? LucideIcons.arrowDownToLine : LucideIcons.arrowUpFromLine;
 

flutter_monisuo/lib/ui/shared/modern_bottom_sheet.dart

@@ -0,0 +1,309 @@
+import 'package:flutter/material.dart';
+import 'package:shadcn_ui/shadcn_ui.dart';
+import '../../core/theme/app_spacing.dart';
+
+/// 现代底部抽屉模板 - 基于 modernization-v2.md 规范
+///
+/// 使用方法：
+/// ```dart
+/// ModernBottomSheet.show(
+///   context: context,
+///   title: '选择币种',
+///   child: YourContentWidget(),
+/// );
+/// ```
+class ModernBottomSheet extends StatelessWidget {
+  final String? title;
+  final Widget? titleWidget;
+  final Widget child;
+  final double? height;
+  final bool showDragHandle;
+  final bool showCloseButton;
+  final VoidCallback? onClose;
+
+  const ModernBottomSheet({
+    super.key,
+    this.title,
+    this.titleWidget,
+    required this.child,
+    this.height,
+    this.showDragHandle = true,
+    this.showCloseButton = false,
+    this.onClose,
+  });
+
+  /// 显示底部抽屉
+  static Future<T?> show<T>({
+    required BuildContext context,
+    String? title,
+    Widget? titleWidget,
+    required Widget child,
+    double? height,
+    bool showDragHandle = true,
+    bool showCloseButton = false,
+    bool isScrollControlled = true,
+    bool isDismissible = true,
+    bool enableDrag = true,
+  }) {
+    return showModalBottomSheet<T>(
+      context: context,
+      isScrollControlled: isScrollControlled,
+      isDismissible: isDismissible,
+      enableDrag: enableDrag,
+      backgroundColor: Colors.transparent,
+      builder: (context) => ModernBottomSheet(
+        title: title,
+        titleWidget: titleWidget,
+        child: child,
+        height: height,
+        showDragHandle: showDragHandle,
+        showCloseButton: showCloseButton,
+      ),
+    );
+  }
+
+  /// 显示操作列表
+  static Future<T?> showActions<T>({
+    required BuildContext context,
+    String? title,
+    required List<ModernSheetAction> actions,
+  }) {
+    return show(
+      context: context,
+      title: title,
+      child: _ActionList(actions: actions),
+    );
+  }
+
+  /// 显示确认操作
+  static Future<bool> confirmAction({
+    required BuildContext context,
+    required String title,
+    String? description,
+    String confirmText = '确认',
+    String cancelText = '取消',
+    bool isDestructive = false,
+  }) async {
+    final result = await show<int>(
+      context: context,
+      title: title,
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          if (description != null) ...[
+            Text(
+              description,
+              style: Theme.of(context).textTheme.bodyMedium,
+            ),
+            const SizedBox(height: AppSpacing.lg),
+          ],
+          Row(
+            children: [
+              Expanded(
+                child: ShadButton.outline(
+                  onPressed: () => Navigator.of(context).pop(0),
+                  child: Text(cancelText),
+                ),
+              ),
+              const SizedBox(width: AppSpacing.md),
+              Expanded(
+                child: ShadButton(
+                  backgroundColor: isDestructive
+                    ? ShadTheme.of(context).colorScheme.destructive
+                    : null,
+                  onPressed: () => Navigator.of(context).pop(1),
+                  child: Text(confirmText),
+                ),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+    return result == 1;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ShadTheme.of(context);
+    final bottomPadding = MediaQuery.of(context).padding.bottom;
+
+    return Container(
+      decoration: BoxDecoration(
+        color: theme.colorScheme.card,
+        borderRadius: const BorderRadius.vertical(
+          top: Radius.circular(AppRadius.xxl),
+        ),
+      ),
+      constraints: height != null
+          ? BoxConstraints(maxHeight: height!)
+          : null,
+      child: SingleChildScrollView(
+        child: Padding(
+          padding: EdgeInsets.only(
+            left: AppSpacing.lg,
+            right: AppSpacing.lg,
+            top: AppSpacing.md,
+            bottom: bottomPadding + AppSpacing.lg,
+          ),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              // 拖动指示器
+              if (showDragHandle) _buildDragHandle(theme),
+              // 标题行
+              if (title != null || titleWidget != null || showCloseButton)
+                _buildHeader(context, theme),
+              // 内容
+              child,
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildDragHandle(ShadThemeData theme) {
+    return Center(
+      child: Container(
+        width: 40,
+        height: 4,
+        margin: const EdgeInsets.only(bottom: AppSpacing.md),
+        decoration: BoxDecoration(
+          color: theme.colorScheme.muted,
+          borderRadius: BorderRadius.circular(2),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildHeader(BuildContext context, ShadThemeData theme) {
+    return Padding(
+      padding: const EdgeInsets.only(bottom: AppSpacing.md),
+      child: Row(
+        children: [
+          // 标题
+          Expanded(
+            child: titleWidget ?? Text(
+              title!,
+              style: theme.textTheme.h3.copyWith(
+                fontWeight: FontWeight.w600,
+              ),
+            ),
+          ),
+          // 关闭按钮
+          if (showCloseButton)
+            GestureDetector(
+              onTap: () {
+                Navigator.of(context).pop();
+                onClose?.call();
+              },
+              child: Icon(
+                LucideIcons.x,
+                size: 20,
+                color: theme.colorScheme.mutedForeground,
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+}
+
+/// 操作列表
+class _ActionList extends StatelessWidget {
+  final List<ModernSheetAction> actions;
+
+  const _ActionList({required this.actions});
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ShadTheme.of(context);
+
+    return Column(
+      children: actions.asMap().entries.map((entry) {
+        final index = entry.key;
+        final action = entry.value;
+
+        return Column(
+          children: [
+            if (index > 0 && actions[index - 1].isDivider)
+              Divider(color: theme.colorScheme.border, height: 1),
+            _ActionTile(action: action),
+          ],
+        );
+      }).toList(),
+    );
+  }
+}
+
+/// 操作项
+class _ActionTile extends StatelessWidget {
+  final ModernSheetAction action;
+
+  const _ActionTile({required this.action});
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ShadTheme.of(context);
+
+    return InkWell(
+      onTap: () {
+        Navigator.of(context).pop(action.returnValue);
+        action.onPressed?.call();
+      },
+      child: Container(
+        width: double.infinity,
+        padding: const EdgeInsets.symmetric(
+          horizontal: AppSpacing.md,
+          vertical: AppSpacing.md,
+        ),
+        child: Row(
+          children: [
+            if (action.icon != null) ...[
+              Icon(
+                action.icon,
+                size: 20,
+                color: action.isDestructive
+                    ? theme.colorScheme.destructive
+                    : theme.colorScheme.foreground,
+              ),
+              const SizedBox(width: AppSpacing.md),
+            ],
+            Expanded(
+              child: Text(
+                action.label,
+                style: TextStyle(
+                  fontSize: 16,
+                  color: action.isDestructive
+                      ? theme.colorScheme.destructive
+                      : theme.colorScheme.foreground,
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// 底部抽屉操作配置
+class ModernSheetAction {
+  final String label;
+  final IconData? icon;
+  final dynamic returnValue;
+  final bool isDestructive;
+  final bool isDivider;
+  final VoidCallback? onPressed;
+
+  const ModernSheetAction({
+    required this.label,
+    this.icon,
+    this.returnValue,
+    this.isDestructive = false,
+    this.isDivider = false,
+    this.onPressed,
+  });
+}

flutter_monisuo/lib/ui/shared/modern_dialog.dart

@@ -0,0 +1,207 @@
+import 'package:flutter/material.dart';
+import 'package:shadcn_ui/shadcn_ui.dart';
+import '../../core/theme/app_spacing.dart';
+
+/// 现代弹窗模板 - 基于 modernization-v2.md 规范
+///
+/// 使用方法：
+/// ```dart
+/// ModernDialog.show(
+///   context: context,
+///   title: '确认操作',
+///   description: '确定要执行此操作吗？',
+///   actions: [
+///     ModernDialogAction(label: '取消', isDestructive: false),
+///     ModernDialogAction(label: '确认', isPrimary: true),
+///   ],
+/// );
+/// ```
+class ModernDialog extends StatelessWidget {
+  final String? title;
+  final Widget? titleWidget;
+  final String? description;
+  final Widget? content;
+  final List<ModernDialogAction>? actions;
+  final VoidCallback? onClose;
+
+  const ModernDialog({
+    super.key,
+    this.title,
+    this.titleWidget,
+    this.description,
+    this.content,
+    this.actions,
+    this.onClose,
+  });
+
+  /// 显示现代弹窗
+  static Future<T?> show<T>({
+    required BuildContext context,
+    String? title,
+    Widget? titleWidget,
+    String? description,
+    Widget? content,
+    List<ModernDialogAction>? actions,
+    bool barrierDismissible = true,
+  }) {
+    return showDialog<T>(
+      context: context,
+      barrierDismissible: barrierDismissible,
+      builder: (context) => ModernDialog(
+        title: title,
+        titleWidget: titleWidget,
+        description: description,
+        content: content,
+        actions: actions,
+      ),
+    );
+  }
+
+  /// 显示确认弹窗
+  static Future<bool> confirm({
+    required BuildContext context,
+    required String title,
+    String? description,
+    String confirmText = '确认',
+    String cancelText = '取消',
+    bool isDestructive = false,
+  }) async {
+    final result = await show<bool>(
+      context: context,
+      title: title,
+      description: description,
+      actions: [
+        ModernDialogAction(label: cancelText, returnValue: false),
+        ModernDialogAction(
+          label: confirmText,
+          returnValue: true,
+          isPrimary: true,
+          isDestructive: isDestructive,
+        ),
+      ],
+    );
+    return result ?? false;
+  }
+
+  /// 显示信息弹窗
+  static Future<void> info({
+    required BuildContext context,
+    required String title,
+    String? description,
+    String buttonText = '知道了',
+  }) {
+    return show(
+      context: context,
+      title: title,
+      description: description,
+      actions: [
+        ModernDialogAction(label: buttonText, isPrimary: true),
+      ],
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = ShadTheme.of(context);
+
+    return Dialog(
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(AppRadius.xl),
+      ),
+      backgroundColor: theme.colorScheme.card,
+      child: Container(
+        padding: const EdgeInsets.all(AppSpacing.lg),
+        constraints: const BoxConstraints(maxWidth: 400),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            // 标题
+            if (titleWidget != null)
+              titleWidget!
+            else if (title != null)
+              Text(
+                title!,
+                style: theme.textTheme.h3.copyWith(
+                  fontWeight: FontWeight.w600,
+                ),
+              ),
+            if (title != null || titleWidget != null)
+              const SizedBox(height: AppSpacing.md),
+            // 描述
+            if (description != null) ...[
+              Text(
+                description!,
+                style: theme.textTheme.muted,
+              ),
+              const SizedBox(height: AppSpacing.md),
+            ],
+            // 自定义内容
+            if (content != null) ...[
+              content!,
+              const SizedBox(height: AppSpacing.lg),
+            ],
+            // 按钮
+            if (actions != null && actions!.isNotEmpty)
+              Row(
+                mainAxisAlignment: MainAxisAlignment.end,
+                children: _buildActions(context),
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  List<Widget> _buildActions(BuildContext context) {
+    return actions!.asMap().entries.map((entry) {
+      final index = entry.key;
+      final action = entry.value;
+
+      return Padding(
+        padding: EdgeInsets.only(left: index > 0 ? AppSpacing.sm : 0),
+        child: _buildActionButton(context, action),
+      );
+    }).toList();
+  }
+
+  Widget _buildActionButton(BuildContext context, ModernDialogAction action) {
+    final theme = ShadTheme.of(context);
+
+    if (action.isPrimary) {
+      return ShadButton(
+        backgroundColor: action.isDestructive ? theme.colorScheme.destructive : theme.colorScheme.primary,
+        onPressed: () {
+          Navigator.of(context).pop(action.returnValue);
+          action.onPressed?.call();
+        },
+        child: Text(action.label),
+      );
+    }
+
+    return ShadButton.outline(
+      onPressed: () {
+        Navigator.of(context).pop(action.returnValue);
+        action.onPressed?.call();
+      },
+      child: Text(action.label),
+    );
+  }
+}
+
+/// 弹窗按钮配置
+class ModernDialogAction {
+  final String label;
+  final dynamic returnValue;
+  final bool isPrimary;
+  final bool isDestructive;
+  final VoidCallback? onPressed;
+
+  const ModernDialogAction({
+    required this.label,
+    this.returnValue,
+    this.isPrimary = false,
+    this.isDestructive = false,
+    this.onPressed,
+  });
+}