feat: 优化

.agents/skills/monisuo-dev/SKILL.md

@@ -1,7 +1,6 @@
 ---
 name: monisuo-dev
 description: Monisuo 项目结构化开发流程技能。用于需求分析、模块化开发、测试验证、构建部署的完整工作流。
-version: 1.0.0
 ---
 
 # Monisuo 开发技能

flutter_monisuo/lib/core/theme/app_color_scheme.dart

@@ -26,6 +26,7 @@ class AppColorScheme {
   static const Color darkSurface = Color(0xFF151921);
   static const Color darkSurfaceHigh = Color(0xFF1a1f2a);
   static const Color darkSurfaceHighest = Color(0xFF22262f);
+  static const Color darkSurfaceBright = Color(0xFF282c36);
 
   /// Ghost Border - 后备边框
   static const Color darkOutlineVariant = Color(0xFF45484f);

flutter_monisuo/lib/ui/pages/home/home_page.dart

@@ -1,14 +1,15 @@
+import 'dart:ui';
 import 'package:flutter/material.dart';
 import 'package:shadcn_ui/shadcn_ui.dart';
 import 'package:provider/provider.dart';
 import 'package:flutter_animate/flutter_animate.dart';
 import '../../../core/theme/app_color_scheme.dart';
 import '../../../core/theme/app_spacing.dart';
+import '../../../data/models/account_models.dart';
 import '../../../providers/asset_provider.dart';
 import '../../../providers/auth_provider.dart';
-import '../../shared/ui_constants.dart';
 
-/// 首页 - 使用 shadcn_ui 现代化设计
+/// 首页 - "The Kinetic Vault" 设计风格
 class HomePage extends StatefulWidget {
   const HomePage({super.key});
 
@@ -35,34 +36,40 @@ class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin
   @override
   Widget build(BuildContext context) {
     super.build(context);
-    final theme = ShadTheme.of(context);
 
     return Scaffold(
-      backgroundColor: theme.colorScheme.background,
+      backgroundColor: AppColorScheme.darkBackground,
       body: Consumer<AssetProvider>(
         builder: (context, provider, _) {
           return RefreshIndicator(
             onRefresh: () => provider.refreshAll(force: true),
-            color: theme.colorScheme.primary,
+            color: AppColorScheme.darkPrimary,
             child: SingleChildScrollView(
               physics: const AlwaysScrollableScrollPhysics(),
-              padding: AppSpacing.pagePadding,
+              padding: const EdgeInsets.fromLTRB(24, 8, 24, 100),
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                  SizedBox(height: AppSpacing.sm),
+                  // 用户问候
-                  _Header(),
+                  _GreetingSection().animate().fadeIn(duration: 300.ms).slideX(begin: -0.1, end: 0),
-                  SizedBox(height: AppSpacing.lg + AppSpacing.sm),
+                  const SizedBox(height: 16),
-                  _AssetOverviewCard(overview: provider.overview),
+                  // 玻璃拟态余额卡片
-                  SizedBox(height: AppSpacing.md),
+                  _GlassBalanceCard(overview: provider.overview)
-                  _QuickActions(
+                      .animate()
+                      .fadeIn(duration: 400.ms, delay: 100.ms)
+                      .slideY(begin: 0.1, end: 0),
+                  const SizedBox(height: 24),
+                  // 快捷操作
+                  _QuickActionsGrid(
                     onDeposit: _showDeposit,
                     onWithdraw: _showWithdraw,
                     onTransfer: _showTransfer,
-                    onTrade: _navigateToTrade,
+                  ).animate().fadeIn(duration: 500.ms, delay: 200.ms),
-                  ),
+                  const SizedBox(height: 32),
-                  SizedBox(height: AppSpacing.lg),
+                  // 持仓部分
-                  _HoldingsList(holdings: provider.holdings),
+                  _HoldingsSection(holdings: provider.holdings)
+                      .animate()
+                      .fadeIn(duration: 500.ms, delay: 300.ms),
                 ],
               ),
             ),
@@ -138,7 +145,7 @@ class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin
     context.read<AssetProvider>().transfer(direction: 1, amount: amount);
   });
 
-  void _showAmountDialog(String title, Function(String) onSubmit) {
+  void _showAmountDialog(String title, void Function(String) onSubmit) {
     final controller = TextEditingController();
     final formKey = GlobalKey<ShadFormState>();
 
@@ -171,187 +178,500 @@ class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin
       ),
     );
   }
-
-  void _navigateToTrade() {
-    // 切换到交易页 - 通过 MainController
-  }
 }
 
-/// 头部组件
+/// 用户问候区域
-class _Header extends StatelessWidget {
+class _GreetingSection extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
-    final theme = ShadTheme.of(context);
-
     return Consumer<AuthProvider>(
       builder: (context, auth, _) {
-        final user = auth.user;
+        return Column(
-        return Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            _Avatar(text: user?.avatarText),
+            Text(
-            SizedBox(width: AppSpacing.sm + AppSpacing.xs),
+              'Welcome back,',
-            Expanded(
+              style: TextStyle(
-              child: Column(
+                color: AppColorScheme.darkOnSurfaceVariant,
-                crossAxisAlignment: CrossAxisAlignment.start,
+                fontSize: 14,
-                children: [
+                letterSpacing: 0.5,
-                  Text(
+              ),
-                    '你好，${user?.username ?? '用户'}',
+            ),
-                    style: theme.textTheme.large.copyWith(fontWeight: FontWeight.bold),
+            const SizedBox(height: 4),
-                  ),
+            Text(
-                  SizedBox(height: AppSpacing.xs),
+              'Hello, ${auth.user?.username ?? 'User'}',
-                  Text('欢迎来到模拟所', style: theme.textTheme.muted),
+              style: const TextStyle(
-                ],
+                color: AppColorScheme.darkOnSurface,
+                fontWeight: FontWeight.bold,
+                fontSize: 24,
               ),
             ),
           ],
-        ).animate().fadeIn(duration: 300.ms).slideX(begin: -0.1, end: 0);
+        );
       },
     );
   }
 }
 
-/// 头像组件
+/// 玻璃拟态余额卡片
-class _Avatar extends StatelessWidget {
+class _GlassBalanceCard extends StatelessWidget {
-  final String? text;
+  final AssetOverview? overview;
 
-  const _Avatar({this.text});
+  const _GlassBalanceCard({required this.overview});
 
   @override
   Widget build(BuildContext context) {
-    final theme = ShadTheme.of(context);
+    return Container(
-
+      width: double.infinity,
-    return CircleAvatar(
+      padding: const EdgeInsets.all(32),
-      radius: 20,
+      decoration: BoxDecoration(
-      backgroundColor: theme.colorScheme.primary.withValues(alpha: 0.2),
+        color: AppColorScheme.darkSurfaceBright.withValues(alpha: 0.4),
-      child: Text(
+        borderRadius: BorderRadius.circular(32),
-        text ?? 'U',
+        border: Border.all(
-        style: TextStyle(color: theme.colorScheme.primary, fontWeight: FontWeight.bold),
+          color: AppColorScheme.darkOutlineVariant.withValues(alpha: 0.1),
+        ),
+      ),
+      child: Stack(
+        children: [
+          // 装饰性发光 - 右上
+          Positioned(
+            top: -48,
+            right: -48,
+            child: Container(
+              width: 128,
+              height: 128,
+              decoration: BoxDecoration(
+                shape: BoxShape.circle,
+                color: AppColorScheme.darkPrimary.withValues(alpha: 0.2),
+              ),
+            ),
+          ),
+          // 装饰性发光 - 左下
+          Positioned(
+            bottom: -48,
+            left: -48,
+            child: Container(
+              width: 128,
+              height: 128,
+              decoration: BoxDecoration(
+                shape: BoxShape.circle,
+                color: AppColorScheme.darkSecondary.withValues(alpha: 0.1),
+              ),
+            ),
+          ),
+          // 内容
+          Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              // 总余额标签
+              Row(
+                children: [
+                  Text(
+                    'TOTAL BALANCE',
+                    style: TextStyle(
+                      color: AppColorScheme.darkOnSurfaceVariant,
+                      fontSize: 11,
+                      letterSpacing: 2,
+                      fontWeight: FontWeight.w500,
+                    ),
+                  ),
+                  const SizedBox(width: 8),
+                  Icon(
+                    LucideIcons.eye,
+                    color: AppColorScheme.darkOnSurfaceVariant,
+                    size: 14,
+                  ),
+                ],
+              ),
+              const SizedBox(height: 8),
+              // 余额数值
+              Row(
+                crossAxisAlignment: CrossAxisAlignment.end,
+                children: [
+                  Text(
+                    overview?.totalAsset ?? '0.00',
+                    style: const TextStyle(
+                      color: AppColorScheme.darkOnSurface,
+                      fontWeight: FontWeight.w900,
+                      fontSize: 48,
+                      letterSpacing: -2,
+                    ),
+                  ),
+                  const SizedBox(width: 8),
+                  Padding(
+                    padding: const EdgeInsets.only(bottom: 8),
+                    child: Text(
+                      'USDT',
+                      style: TextStyle(
+                        color: AppColorScheme.darkPrimary,
+                        fontWeight: FontWeight.bold,
+                        fontSize: 20,
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+              const SizedBox(height: 16),
+              // 今日盈亏
+              Container(
+                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+                decoration: BoxDecoration(
+                  color: AppColorScheme.up.withValues(alpha: 0.1),
+                  borderRadius: BorderRadius.circular(8),
+                ),
+                child: Row(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Icon(
+                      LucideIcons.trendingUp,
+                      color: AppColorScheme.up,
+                      size: 16,
+                    ),
+                    const SizedBox(width: 4),
+                    Text(
+                      '+0.00%',
+                      style: TextStyle(
+                        color: AppColorScheme.up,
+                        fontWeight: FontWeight.bold,
+                        fontSize: 14,
+                      ),
+                    ),
+                    const SizedBox(width: 8),
+                    Text(
+                      "Today's PNL",
+                      style: TextStyle(
+                        color: AppColorScheme.darkOnSurfaceVariant,
+                        fontSize: 12,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ],
       ),
     );
   }
 }
 
-/// 资产总览卡片
+/// 快捷操作网格
-class _AssetOverviewCard extends StatelessWidget {
+class _QuickActionsGrid extends StatelessWidget {
-  final dynamic overview;
+  final VoidCallback onDeposit;
+  final VoidCallback onWithdraw;
+  final VoidCallback onTransfer;
 
-  const _AssetOverviewCard({required this.overview});
+  const _QuickActionsGrid({
+    required this.onDeposit,
+    required this.onWithdraw,
+    required this.onTransfer,
+  });
 
   @override
   Widget build(BuildContext context) {
-    final theme = ShadTheme.of(context);
+    return Row(
-
+      mainAxisAlignment: MainAxisAlignment.spaceAround,
-    return Container(
-      width: double.infinity,
-      padding: EdgeInsets.all(AppSpacing.lg + AppSpacing.sm),
-      decoration: BoxDecoration(
-        gradient: AppColorScheme.assetCardGradient,
-        borderRadius: BorderRadius.circular(AppRadius.xl),
-      ),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Text('总资产(USDT)', style: theme.textTheme.small.copyWith(color: Colors.white70)),
-          SizedBox(height: AppSpacing.sm),
-          Text(
-            overview?.totalAsset ?? '0.00',
-            style: theme.textTheme.h2.copyWith(color: Colors.white, fontWeight: FontWeight.bold),
-          ),
-          SizedBox(height: AppSpacing.lg + AppSpacing.sm),
-          Row(
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-            children: [
-              _AssetItem(label: '资金账户', value: overview?.fundBalance ?? '0.00'),
-              _AssetItem(label: '交易账户', value: overview?.tradeBalance ?? '0.00'),
-            ],
-          ),
-        ],
-      ),
-    ).animate().fadeIn(duration: 400.ms).slideY(begin: 0.1, end: 0);
-  }
-}
-
-/// 资产项
-class _AssetItem extends StatelessWidget {
-  final String label;
-  final String value;
-
-  const _AssetItem({required this.label, required this.value});
-
-  @override
-  Widget build(BuildContext context) {
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        Text(label, style: const TextStyle(fontSize: 12, color: Colors.white70)),
+        _QuickActionBtn(
-        SizedBox(height: AppSpacing.xs),
+          icon: LucideIcons.plusCircle,
-        Text(value, style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w600, color: Colors.white)),
+          label: '充值',
+          color: AppColorScheme.darkPrimary,
+          onTap: onDeposit,
+        ),
+        _QuickActionBtn(
+          icon: LucideIcons.wallet,
+          label: '提现',
+          color: AppColorScheme.darkSecondary,
+          onTap: onWithdraw,
+        ),
+        _QuickActionBtn(
+          icon: LucideIcons.arrowRightLeft,
+          label: '划转',
+          color: AppColorScheme.up,
+          onTap: onTransfer,
+        ),
+        _QuickActionBtn(
+          icon: LucideIcons.lineChart,
+          label: '交易',
+          color: AppColorScheme.darkPrimary,
+          onTap: () {
+            // TODO: 实现跳转到交易页面的功能
+          },
+        ),
       ],
     );
   }
 }
 
-/// 快捷操作
+/// 快捷操作按钮
-class _QuickActions extends StatelessWidget {
+class _QuickActionBtn extends StatefulWidget {
-  final VoidCallback onDeposit;
-  final VoidCallback onWithdraw;
-  final VoidCallback onTransfer;
-  final VoidCallback onTrade;
-
-  const _QuickActions({
-    required this.onDeposit,
-    required this.onWithdraw,
-    required this.onTransfer,
-    required this.onTrade,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return ShadCard(
-      padding: AppSpacing.cardPadding,
-      child: Row(
-        mainAxisAlignment: MainAxisAlignment.spaceAround,
-        children: [
-          _ActionButton(icon: LucideIcons.arrowDownToLine, text: '充值', color: AppColorScheme.success, onTap: onDeposit),
-          _ActionButton(icon: LucideIcons.arrowUpFromLine, text: '提现', color: AppColorScheme.warning, onTap: onWithdraw),
-          _ActionButton(icon: LucideIcons.arrowRightLeft, text: '划转', color: AppColorScheme.info, onTap: onTransfer),
-          _ActionButton(icon: LucideIcons.trendingUp, text: '交易', color: AppColorScheme.info, onTap: onTrade),
-        ],
-      ),
-    ).animate().fadeIn(duration: 500.ms, delay: 100.ms);
-  }
-}
-
-/// 操作按钮
-class _ActionButton extends StatelessWidget {
   final IconData icon;
-  final String text;
+  final String label;
   final Color color;
   final VoidCallback onTap;
 
-  const _ActionButton({
+  const _QuickActionBtn({
     required this.icon,
-    required this.text,
+    required this.label,
     required this.color,
     required this.onTap,
   });
 
   @override
-  Widget build(BuildContext context) {
+  State<_QuickActionBtn> createState() => _QuickActionBtnState();
-    final theme = ShadTheme.of(context);
+}
 
+class _QuickActionBtnState extends State<_QuickActionBtn> {
+  bool _isPressed = false;
+
+  @override
+  Widget build(BuildContext context) {
     return GestureDetector(
-      onTap: onTap,
+      onTap: widget.onTap,
+      onTapDown: (_) => setState(() => _isPressed = true),
+      onTapUp: (_) => setState(() => _isPressed = false),
+      onTapCancel: () => setState(() => _isPressed = false),
       child: Column(
         children: [
-          Container(
+          AnimatedContainer(
-            width: 48,
+            duration: const Duration(milliseconds: 200),
-            height: 48,
+            width: 56,
-            decoration: BoxDecoration(color: color.withValues(alpha: 0.15), shape: BoxShape.circle),
+            height: 56,
-            child: Icon(icon, color: color, size: 22),
+            decoration: BoxDecoration(
+              shape: BoxShape.circle,
+              color: AppColorScheme.darkSurfaceHigh,
+              border: Border.all(
+                color: widget.color.withValues(alpha: 0.2),
+              ),
+              boxShadow: _isPressed
+                  ? [
+                      BoxShadow(
+                        color: widget.color.withValues(alpha: 0.4),
+                        blurRadius: 20,
+                        spreadRadius: 0,
+                      ),
+                    ]
+                  : null,
+            ),
+            child: Icon(
+              widget.icon,
+              color: widget.color,
+              size: 24,
+            ),
+          ),
+          const SizedBox(height: 8),
+          Text(
+            widget.label,
+            style: TextStyle(
+              color: AppColorScheme.darkOnSurfaceVariant,
+              fontSize: 11,
+              fontWeight: FontWeight.w500,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+/// 持仓部分
+class _HoldingsSection extends StatelessWidget {
+  final List<AccountTrade> holdings;
+
+  const _HoldingsSection({required this.holdings});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        // 标题行
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            const Text(
+              '我的持仓',
+              style: TextStyle(
+                color: AppColorScheme.darkOnSurface,
+                fontWeight: FontWeight.bold,
+                fontSize: 18,
+                letterSpacing: -0.5,
+              ),
+            ),
+            TextButton(
+              onPressed: () {},
+              style: TextButton.styleFrom(
+                foregroundColor: AppColorScheme.darkPrimary,
+                padding: const EdgeInsets.symmetric(horizontal: 8),
+              ),
+              child: Row(
+                children: [
+                  const Text(
+                    'Assets Detail',
+                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
+                  ),
+                  const SizedBox(width: 4),
+                  Icon(
+                    LucideIcons.chevronRight,
+                    size: 16,
+                    color: AppColorScheme.darkPrimary,
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+        const SizedBox(height: 16),
+        // 持仓内容
+        holdings.isEmpty ? const _EmptyHoldings() : _HoldingsList(holdings: holdings),
+      ],
+    );
+  }
+}
+
+/// 空持仓状态
+class _EmptyHoldings extends StatelessWidget {
+  const _EmptyHoldings();
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: double.infinity,
+      padding: const EdgeInsets.symmetric(vertical: 48, horizontal: 24),
+      decoration: BoxDecoration(
+        color: AppColorScheme.darkSurfaceLow.withValues(alpha: 0.5),
+        borderRadius: BorderRadius.circular(40),
+        border: Border.all(
+          color: AppColorScheme.darkOutlineVariant.withValues(alpha: 0.1),
+        ),
+      ),
+      child: Column(
+        children: [
+          // 3D 钱包图标
+          SizedBox(
+            width: 128,
+            height: 128,
+            child: Stack(
+              children: [
+                // 背景模糊效果
+                Positioned.fill(
+                  child: Transform.rotate(
+                    angle: 0.2,
+                    child: Container(
+                      decoration: BoxDecoration(
+                        borderRadius: BorderRadius.circular(24),
+                        gradient: LinearGradient(
+                          colors: [
+                            AppColorScheme.darkPrimary.withValues(alpha: 0.2),
+                            AppColorScheme.darkSecondary.withValues(alpha: 0.2),
+                          ],
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+                // 主钱包图标
+                Positioned.fill(
+                  child: Center(
+                    child: Container(
+                      width: 80,
+                      height: 80,
+                      decoration: BoxDecoration(
+                        color: AppColorScheme.darkSurfaceHighest,
+                        borderRadius: BorderRadius.circular(24),
+                        border: Border.all(
+                          color: AppColorScheme.darkOutlineVariant.withValues(alpha: 0.2),
+                        ),
+                        boxShadow: [
+                          BoxShadow(
+                            color: Colors.black.withValues(alpha: 0.3),
+                            blurRadius: 24,
+                            offset: const Offset(0, 8),
+                          ),
+                        ],
+                      ),
+                      child: Icon(
+                        LucideIcons.wallet,
+                        color: AppColorScheme.darkPrimary,
+                        size: 40,
+                      ),
+                    ),
+                  ),
+                ),
+                // 代币图标
+                Positioned(
+                  top: 8,
+                  right: 16,
+                  child: Container(
+                    width: 40,
+                    height: 40,
+                    decoration: BoxDecoration(
+                      shape: BoxShape.circle,
+                      color: AppColorScheme.up.withValues(alpha: 0.2),
+                      border: Border.all(
+                        color: AppColorScheme.up.withValues(alpha: 0.3),
+                      ),
+                    ),
+                    child: Icon(
+                      LucideIcons.coins,
+                      color: AppColorScheme.up,
+                      size: 20,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+          const SizedBox(height: 24),
+          const Text(
+            'No holdings yet.',
+            style: TextStyle(
+              color: AppColorScheme.darkOnSurface,
+              fontWeight: FontWeight.w600,
+              fontSize: 16,
+            ),
+          ),
+          const SizedBox(height: 8),
+          Text(
+            '暂无持仓，快去交易吧~',
+            style: TextStyle(
+              color: AppColorScheme.darkOnSurfaceVariant,
+              fontSize: 14,
+            ),
+          ),
+          const SizedBox(height: 32),
+          // 开始交易按钮
+          Container(
+            decoration: BoxDecoration(
+              gradient: AppColorScheme.darkCtaGradient,
+              borderRadius: BorderRadius.circular(12),
+              boxShadow: [
+                BoxShadow(
+                  color: AppColorScheme.darkPrimary.withValues(alpha: 0.3),
+                  blurRadius: 30,
+                  offset: const Offset(0, 10),
+                ),
+              ],
+            ),
+            child: Material(
+              color: Colors.transparent,
+              child: InkWell(
+                onTap: () {},
+                borderRadius: BorderRadius.circular(12),
+                child: const Padding(
+                  padding: EdgeInsets.symmetric(horizontal: 40, vertical: 16),
+                  child: Text(
+                    'Start Trading',
+                    style: TextStyle(
+                      color: AppColorScheme.darkBackground,
+                      fontWeight: FontWeight.w900,
+                      fontSize: 16,
+                      letterSpacing: -0.5,
+                    ),
+                  ),
+                ),
+              ),
+            ),
           ),
-          SizedBox(height: AppSpacing.sm),
-          Text(text, style: TextStyle(fontSize: 12, color: theme.colorScheme.foreground)),
         ],
       ),
     );
@@ -360,97 +680,51 @@ class _ActionButton extends StatelessWidget {
 
 /// 持仓列表
 class _HoldingsList extends StatelessWidget {
-  final List<dynamic> holdings;
+  final List<AccountTrade> holdings;
 
   const _HoldingsList({required this.holdings});
 
   @override
   Widget build(BuildContext context) {
-    final theme = ShadTheme.of(context);
-
-    return ShadCard(
-      padding: AppSpacing.cardPadding,
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Row(
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-            children: [
-              Text('我的持仓', style: theme.textTheme.large.copyWith(fontWeight: FontWeight.bold)),
-              Icon(LucideIcons.chevronRight, color: theme.colorScheme.mutedForeground, size: 20),
-            ],
-          ),
-          SizedBox(height: AppSpacing.md),
-          if (holdings.isEmpty)
-            _EmptyHoldings()
-          else
-            _HoldingsListView(holdings: holdings),
-        ],
-      ),
-    ).animate().fadeIn(duration: 500.ms, delay: 200.ms);
-  }
-}
-
-/// 空持仓提示
-class _EmptyHoldings extends StatelessWidget {
-  @override
-  Widget build(BuildContext context) {
-    final theme = ShadTheme.of(context);
-
-    return Center(
-      child: Padding(
-        padding: EdgeInsets.all(AppSpacing.xl),
-        child: Column(
-          children: [
-            Icon(LucideIcons.wallet, size: 48, color: theme.colorScheme.mutedForeground),
-            SizedBox(height: AppSpacing.sm + AppSpacing.xs),
-            Text('暂无持仓', style: theme.textTheme.muted),
-            SizedBox(height: AppSpacing.xs),
-            Text('快去交易吧~', style: theme.textTheme.muted.copyWith(fontSize: 12)),
-          ],
-        ),
-      ),
-    );
-  }
-}
-
-/// 持仓列表视图
-class _HoldingsListView extends StatelessWidget {
-  final List<dynamic> holdings;
-
-  const _HoldingsListView({required this.holdings});
-
-  @override
-  Widget build(BuildContext context) {
-    final theme = ShadTheme.of(context);
     final displayHoldings = holdings.length > 5 ? holdings.sublist(0, 5) : holdings;
 
-    return ListView.separated(
+    return Container(
-      shrinkWrap: true,
+      decoration: BoxDecoration(
-      physics: const NeverScrollableScrollPhysics(),
+        color: AppColorScheme.darkSurface.withValues(alpha: 0.5),
-      itemCount: displayHoldings.length,
+        borderRadius: BorderRadius.circular(24),
-      separatorBuilder: (_, __) => Divider(color: theme.colorScheme.border, height: 1),
+        border: Border.all(
-      itemBuilder: (context, index) {
+          color: AppColorScheme.darkOutlineVariant.withValues(alpha: 0.1),
-        return _HoldingItem(holding: displayHoldings[index])
+        ),
-            .animate()
+      ),
-            .fadeIn(delay: Duration(milliseconds: 50 * index));
+      child: ListView.separated(
-      },
+        shrinkWrap: true,
+        physics: const NeverScrollableScrollPhysics(),
+        padding: const EdgeInsets.all(16),
+        itemCount: displayHoldings.length,
+        separatorBuilder: (_, __) => Divider(
+          color: AppColorScheme.darkOutlineVariant.withValues(alpha: 0.1),
+          height: 1,
+        ),
+        itemBuilder: (context, index) {
+          return _HoldingItem(holding: displayHoldings[index])
+              .animate()
+              .fadeIn(delay: Duration(milliseconds: 50 * index));
+        },
+      ),
     );
   }
 }
 
 /// 持仓项
 class _HoldingItem extends StatelessWidget {
-  final dynamic holding;
+  final AccountTrade holding;
 
   const _HoldingItem({required this.holding});
 
   @override
   Widget build(BuildContext context) {
-    final theme = ShadTheme.of(context);
-
     return Padding(
-      padding: EdgeInsets.symmetric(vertical: AppSpacing.sm),
+      padding: const EdgeInsets.symmetric(vertical: 12),
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
@@ -458,18 +732,34 @@ class _HoldingItem extends StatelessWidget {
             children: [
               CircleAvatar(
                 radius: 18,
-                backgroundColor: theme.colorScheme.primary.withValues(alpha: 0.1),
+                backgroundColor: AppColorScheme.darkPrimary.withValues(alpha: 0.1),
                 child: Text(
                   holding.coinCode.substring(0, 1),
-                  style: TextStyle(color: theme.colorScheme.primary, fontWeight: FontWeight.bold),
+                  style: const TextStyle(
+                    color: AppColorScheme.darkPrimary,
+                    fontWeight: FontWeight.bold,
+                  ),
                 ),
               ),
-              SizedBox(width: AppSpacing.sm + AppSpacing.xs),
+              const SizedBox(width: 12),
               Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                  Text(holding.coinCode, style: theme.textTheme.large.copyWith(fontWeight: FontWeight.bold)),
+                  Text(
-                  Text(holding.quantity, style: theme.textTheme.muted),
+                    holding.coinCode,
+                    style: const TextStyle(
+                      color: AppColorScheme.darkOnSurface,
+                      fontWeight: FontWeight.bold,
+                      fontSize: 16,
+                    ),
+                  ),
+                  Text(
+                    holding.quantity,
+                    style: TextStyle(
+                      color: AppColorScheme.darkOnSurfaceVariant,
+                      fontSize: 12,
+                    ),
+                  ),
                 ],
               ),
             ],
@@ -477,12 +767,20 @@ class _HoldingItem extends StatelessWidget {
           Column(
             crossAxisAlignment: CrossAxisAlignment.end,
             children: [
-              Text('${holding.currentValue} USDT', style: theme.textTheme.small.copyWith(fontWeight: FontWeight.w500)),
+              Text(
+                '${holding.currentValue} USDT',
+                style: const TextStyle(
+                  color: AppColorScheme.darkOnSurface,
+                  fontWeight: FontWeight.w500,
+                  fontSize: 14,
+                ),
+              ),
               Text(
                 holding.formattedProfitRate,
                 style: TextStyle(
                   color: holding.isProfit ? AppColorScheme.up : AppColorScheme.down,
                   fontSize: 12,
+                  fontWeight: FontWeight.w500,
                 ),
               ),
             ],

flutter_monisuo/lib/ui/pages/main/main_page.dart

@@ -1,5 +1,9 @@
+import 'dart:ui';
 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 '../../../providers/auth_provider.dart';
 import '../home/home_page.dart';
 import '../market/market_page.dart';
 import '../trade/trade_page.dart';
@@ -15,7 +19,7 @@ class _NavItem {
   const _NavItem({required this.label, required this.icon, required this.page});
 }
 
-/// 主页面（使用 shadcn_ui 风格）
+/// 主页面 - "The Kinetic Vault" 设计风格
 class MainPage extends StatefulWidget {
   const MainPage({super.key});
 
@@ -27,12 +31,12 @@ class _MainPageState extends State<MainPage> {
   int _currentIndex = 0;
   final Set<int> _loadedPages = {0};
 
-  static const _navItems = [
+  static final _navItems = [
-    _NavItem(label: '首页', icon: LucideIcons.house, page: HomePage()),
+    _NavItem(label: '首页', icon: LucideIcons.house, page: const HomePage()),
-    _NavItem(label: '行情', icon: LucideIcons.trendingUp, page: MarketPage()),
+    _NavItem(label: '行情', icon: LucideIcons.trendingUp, page: const MarketPage()),
-    _NavItem(label: '交易', icon: LucideIcons.arrowLeftRight, page: TradePage()),
+    _NavItem(label: '交易', icon: LucideIcons.arrowLeftRight, page: const TradePage()),
-    _NavItem(label: '资产', icon: LucideIcons.wallet, page: AssetPage()),
+    _NavItem(label: '资产', icon: LucideIcons.wallet, page: const AssetPage()),
-    _NavItem(label: '我的', icon: LucideIcons.user, page: MinePage()),
+    _NavItem(label: '我的', icon: LucideIcons.user, page: const MinePage()),
   ];
 
   void _onTabChanged(int index) {
@@ -44,13 +48,21 @@ class _MainPageState extends State<MainPage> {
 
   @override
   Widget build(BuildContext context) {
-    final theme = ShadTheme.of(context);
-
     return Scaffold(
-      body: LazyIndexedStack(
+      backgroundColor: AppColorScheme.darkBackground,
-        index: _currentIndex,
+      body: Column(
-        loadedIndexes: _loadedPages,
+        children: [
-        children: _navItems.map((item) => item.page).toList(),
+          // 公共顶部导航栏
+          const _TopAppBar(),
+          // 页面内容
+          Expanded(
+            child: LazyIndexedStack(
+              index: _currentIndex,
+              loadedIndexes: _loadedPages,
+              children: _navItems.map((item) => item.page).toList(),
+            ),
+          ),
+        ],
       ),
       bottomNavigationBar: _BottomNavBar(
         items: _navItems,
@@ -61,7 +73,121 @@ class _MainPageState extends State<MainPage> {
   }
 }
 
-/// 底部导航栏
+/// 顶部导航栏 - 玻璃拟态效果
+class _TopAppBar extends StatelessWidget {
+  const _TopAppBar();
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 64,
+      decoration: BoxDecoration(
+        color: AppColorScheme.darkSurfaceBright.withValues(alpha: 0.4),
+        boxShadow: [
+          BoxShadow(
+            color: AppColorScheme.darkPrimary.withValues(alpha: 0.06),
+            blurRadius: 64,
+            offset: const Offset(0, 32),
+          ),
+        ],
+      ),
+      child: ClipRRect(
+        child: BackdropFilter(
+          filter: ImageFilter.blur(sigmaX: 24, sigmaY: 24),
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 24),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                // 左侧头像和标题
+                Consumer<AuthProvider>(
+                  builder: (context, auth, _) {
+                    return Row(
+                      children: [
+                        // 头像
+                        Container(
+                          width: 32,
+                          height: 32,
+                          decoration: BoxDecoration(
+                            shape: BoxShape.circle,
+                            border: Border.all(
+                              color: AppColorScheme.darkOutlineVariant.withValues(alpha: 0.2),
+                            ),
+                          ),
+                          child: CircleAvatar(
+                            backgroundColor: AppColorScheme.darkSurfaceHigh,
+                            child: Text(
+                              auth.user?.avatarText ?? 'U',
+                              style: const TextStyle(
+                                color: AppColorScheme.darkPrimary,
+                                fontWeight: FontWeight.bold,
+                                fontSize: 12,
+                              ),
+                            ),
+                          ),
+                        ),
+                        const SizedBox(width: 12),
+                        // 标题
+                        const Text(
+                          'The Kinetic Vault',
+                          style: TextStyle(
+                            color: AppColorScheme.darkPrimary,
+                            fontWeight: FontWeight.w900,
+                            letterSpacing: -0.5,
+                            fontSize: 16,
+                          ),
+                        ),
+                      ],
+                    );
+                  },
+                ),
+                // 右侧操作按钮
+                Row(
+                  children: [
+                    _IconBtn(
+                      icon: LucideIcons.search,
+                      onTap: () {},
+                    ),
+                    const SizedBox(width: 8),
+                    _IconBtn(
+                      icon: LucideIcons.bell,
+                      onTap: () {},
+                    ),
+                  ],
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// 图标按钮
+class _IconBtn extends StatelessWidget {
+  final IconData icon;
+  final VoidCallback onTap;
+
+  const _IconBtn({required this.icon, required this.onTap});
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Container(
+        padding: const EdgeInsets.all(8),
+        child: Icon(
+          icon,
+          color: AppColorScheme.darkOnSurfaceVariant,
+          size: 22,
+        ),
+      ),
+    );
+  }
+}
+
+/// 底部导航栏 - "The Kinetic Vault" 设计风格
 class _BottomNavBar extends StatelessWidget {
   final List<_NavItem> items;
   final int currentIndex;
@@ -75,25 +201,41 @@ class _BottomNavBar extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final theme = ShadTheme.of(context);
-
     return Container(
       decoration: BoxDecoration(
-        color: theme.colorScheme.background,
+        color: AppColorScheme.darkSurfaceLow.withValues(alpha: 0.8),
-        border: Border(top: BorderSide(color: theme.colorScheme.border)),
+        borderRadius: const BorderRadius.vertical(top: Radius.circular(32)),
+        border: Border(
+          top: BorderSide(
+            color: AppColorScheme.darkOutlineVariant.withValues(alpha: 0.15),
+          ),
+        ),
+        boxShadow: [
+          BoxShadow(
+            color: Colors.black.withValues(alpha: 0.5),
+            blurRadius: 40,
+            offset: const Offset(0, -10),
+          ),
+        ],
       ),
-      child: SafeArea(
+      child: ClipRRect(
-        child: Padding(
+        borderRadius: const BorderRadius.vertical(top: Radius.circular(32)),
-          padding: const EdgeInsets.symmetric(vertical: 8),
+        child: BackdropFilter(
-          child: Row(
+          filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
-            mainAxisAlignment: MainAxisAlignment.spaceAround,
+          child: SafeArea(
-            children: items.asMap().entries.map((entry) {
+            child: Padding(
-              return _NavItemWidget(
+              padding: const EdgeInsets.fromLTRB(16, 8, 16, 24),
-                item: entry.value,
+              child: Row(
-                isSelected: entry.key == currentIndex,
+                mainAxisAlignment: MainAxisAlignment.spaceAround,
-                onTap: () => onTap(entry.key),
+                children: items.asMap().entries.map((entry) {
-              );
+                  return _NavItemWidget(
-            }).toList(),
+                    item: entry.value,
+                    isSelected: entry.key == currentIndex,
+                    onTap: () => onTap(entry.key),
+                  );
+                }).toList(),
+              ),
+            ),
           ),
         ),
       ),
@@ -115,28 +257,31 @@ class _NavItemWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final theme = ShadTheme.of(context);
+    final color = isSelected ? AppColorScheme.darkPrimary : AppColorScheme.darkOnSurfaceVariant;
-    final color = isSelected ? theme.colorScheme.primary : theme.colorScheme.mutedForeground;
 
     return GestureDetector(
       onTap: onTap,
       behavior: HitTestBehavior.opaque,
-      child: Container(
+      child: AnimatedContainer(
-        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+        duration: const Duration(milliseconds: 300),
-        child: Column(
+        padding: const EdgeInsets.all(12),
-          mainAxisSize: MainAxisSize.min,
+        decoration: isSelected
-          children: [
+            ? BoxDecoration(
-            Icon(item.icon, color: color, size: 24),
+                color: AppColorScheme.darkPrimary.withValues(alpha: 0.1),
-            const SizedBox(height: 4),
+                borderRadius: BorderRadius.circular(16),
-            Text(
+                boxShadow: [
-              item.label,
+                  BoxShadow(
-              style: TextStyle(
+                    color: AppColorScheme.darkPrimary.withValues(alpha: 0.3),
-                fontSize: 12,
+                    blurRadius: 15,
-                color: color,
+                    spreadRadius: 0,
-                fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
+                  ),
-              ),
+                ],
-            ),
+              )
-          ],
+            : null,
+        child: Icon(
+          item.icon,
+          color: color,
+          size: 24,
         ),
       ),
     );