docs(theme): update documentation and clean up deprecated color scheme definitions

Removed outdated compatibility aliases and deprecated methods from AppColorScheme, and updated CLAUDE.md to reflect new theme system requirements with centralized color management and no hard-coded values in UI components.
2026-04-05 23:37:27 +08:00
parent 189609f337
commit f5ac578892
39 changed files with 20289 additions and 1260 deletions
--- a/flutter_monisuo/lib/ui/pages/auth/login_page.dart
+++ b/flutter_monisuo/lib/ui/pages/auth/login_page.dart
@@ -4,6 +4,7 @@ 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 '../../../providers/auth_provider.dart';
 import '../main/main_page.dart';
 import 'register_page.dart';
@@ -26,9 +27,6 @@ class _LoginPageState extends State<LoginPage> {
  static const _inputHeight = 52.0;
  static const _buttonHeight = 52.0;

-  /// 设计稿 radius-lg = 14
-  static const _designRadiusLg = 14.0;
-
  @override
  void dispose() {
    _usernameController.dispose();
@@ -86,18 +84,18 @@ class _LoginPageState extends State<LoginPage> {
            gradient: const LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
-              colors: [Color(0xFF1F2937), Color(0xFF374151)],
+              colors: [AppColorScheme.darkSurfaceContainerHigh, AppColorScheme.darkOutline],
            ),
          ),
          alignment: Alignment.center,
          child: Text(
            'M',
-            style: TextStyle(
+            style: AppTextStyles.displayLarge(context).copyWith(
              fontSize: 32,
              fontWeight: FontWeight.w800,
              color: isDark
                  ? AppColorScheme.darkOnSurface
-                  : Colors.white,
+                  : AppColorScheme.darkOnPrimary,
            ),
          ),
        ),
@@ -105,9 +103,7 @@ class _LoginPageState extends State<LoginPage> {
        // 品牌名 "MONISUO"
        Text(
          'MONISUO',
-          style: TextStyle(
-            fontSize: 28,
-            fontWeight: FontWeight.w800,
+          style: AppTextStyles.displayLarge(context).copyWith(
            letterSpacing: 3,
            color: isDark
                ? AppColorScheme.darkOnSurface
@@ -119,9 +115,7 @@ class _LoginPageState extends State<LoginPage> {
        // 标语
        Text(
          '虚拟货币模拟交易平台',
-          style: TextStyle(
-            fontSize: 13,
-            fontWeight: FontWeight.normal,
+          style: AppTextStyles.bodyLarge(context).copyWith(
            color: isDark
                ? AppColorScheme.darkOnSurfaceVariant
                : AppColorScheme.lightOnSurfaceVariant,
@@ -174,11 +168,10 @@ class _LoginPageState extends State<LoginPage> {
        decoration: ShadDecoration(
          border: ShadBorder.all(
            color: borderColor,
-            radius: BorderRadius.circular(_designRadiusLg),
+            radius: AppRadius.radiusLg,
          ),
        ),
-        style: TextStyle(
-          fontSize: 14,
+        style: AppTextStyles.headlineMedium(context).copyWith(
          color: isDark
              ? AppColorScheme.darkOnSurface
              : AppColorScheme.lightOnSurface,
@@ -218,11 +211,10 @@ class _LoginPageState extends State<LoginPage> {
        decoration: ShadDecoration(
          border: ShadBorder.all(
            color: borderColor,
-            radius: BorderRadius.circular(_designRadiusLg),
+            radius: AppRadius.radiusLg,
          ),
        ),
-        style: TextStyle(
-          fontSize: 14,
+        style: AppTextStyles.headlineMedium(context).copyWith(
          color: isDark
              ? AppColorScheme.darkOnSurface
              : AppColorScheme.lightOnSurface,
@@ -235,10 +227,10 @@ class _LoginPageState extends State<LoginPage> {
    // 设计稿: accent-primary = light:#1F2937 / dark:#D4AF37
    final buttonColor = isDark
        ? AppColorScheme.darkSecondary
-        : const Color(0xFF1F2937);
+        : AppColorScheme.darkSurfaceContainerHigh;
    final textColor = isDark
        ? AppColorScheme.darkBackground
-        : Colors.white;
+        : AppColorScheme.darkOnPrimary;

    return Consumer<AuthProvider>(
      builder: (context, auth, _) {
@@ -250,7 +242,7 @@ class _LoginPageState extends State<LoginPage> {
            foregroundColor: textColor,
            decoration: ShadDecoration(
              border: ShadBorder.all(
-                radius: BorderRadius.circular(_designRadiusLg),
+                radius: AppRadius.radiusLg,
              ),
            ),
            child: auth.isLoading
@@ -263,8 +255,7 @@ class _LoginPageState extends State<LoginPage> {
                  )
                : Text(
                    '登录',
-                    style: TextStyle(
-                      fontSize: 16,
+                    style: AppTextStyles.headlineLarge(context).copyWith(
                      fontWeight: FontWeight.w700,
                      color: textColor,
                    ),
@@ -283,7 +274,7 @@ class _LoginPageState extends State<LoginPage> {
    // gold-accent: light=#F59E0B / dark=#D4AF37
    final goldColor = isDark
        ? AppColorScheme.darkSecondary
-        : const Color(0xFFF59E0B);
+        : AppColorScheme.darkSecondaryFixed;
    final secondaryTextColor = isDark
        ? AppColorScheme.darkOnSurfaceVariant
        : AppColorScheme.lightOnSurfaceVariant;
@@ -295,9 +286,7 @@ class _LoginPageState extends State<LoginPage> {
        children: [
          Text(
            '还没有账户？',
-            style: TextStyle(
-              fontSize: 13,
-              fontWeight: FontWeight.normal,
+            style: AppTextStyles.bodyLarge(context).copyWith(
              color: secondaryTextColor,
            ),
          ),
@@ -306,8 +295,7 @@ class _LoginPageState extends State<LoginPage> {
            onTap: _navigateToRegister,
            child: Text(
              '立即注册',
-              style: TextStyle(
-                fontSize: 13,
+              style: AppTextStyles.bodyLarge(context).copyWith(
                fontWeight: FontWeight.w600,
                color: goldColor,
              ),
--- a/flutter_monisuo/lib/ui/pages/auth/register_page.dart
+++ b/flutter_monisuo/lib/ui/pages/auth/register_page.dart
@@ -2,10 +2,10 @@ import 'dart:typed_data';
 import 'package:flutter/material.dart';
 import 'package:shadcn_ui/shadcn_ui.dart';
 import 'package:provider/provider.dart';
-import 'package:google_fonts/google_fonts.dart';
 import 'package:image_picker/image_picker.dart';
 import '../../../core/theme/app_color_scheme.dart';
 import '../../../core/theme/app_spacing.dart';
+import '../../../core/theme/app_theme.dart';
 import '../../../providers/auth_provider.dart';
 import '../../components/glass_panel.dart';
 import '../../components/neon_glow.dart';
@@ -81,7 +81,7 @@ class _RegisterPageState extends State<RegisterPage> {
    return Scaffold(
      backgroundColor: colorScheme.background,
      appBar: AppBar(
-        backgroundColor: Colors.transparent,
+        backgroundColor: AppColorScheme.darkBackground.withValues(alpha: 0),
        elevation: 0,
        leading: IconButton(
          icon: Icon(LucideIcons.chevronLeft, color: colorScheme.onSurface),
@@ -124,7 +124,7 @@ class _RegisterPageState extends State<RegisterPage> {
            height: 2,
            color: _currentStep > 0
                ? AppColorScheme.up
-                : colorScheme.outlineVariant.withOpacity(0.2),
+                : colorScheme.outlineVariant.withValues(alpha: 0.2),
          ),
        ),
        _buildStepCircle(
@@ -150,10 +150,10 @@ class _RegisterPageState extends State<RegisterPage> {

    if (isComplete) {
      circleColor = AppColorScheme.up;
-      textColor = Colors.white;
+      textColor = AppColorScheme.darkOnPrimary;
    } else if (isActive) {
      circleColor = colorScheme.primary;
-      textColor = Colors.white;
+      textColor = AppColorScheme.darkOnPrimary;
    } else {
      circleColor = colorScheme.surfaceContainerHigh;
      textColor = colorScheme.onSurfaceVariant;
@@ -173,19 +173,17 @@ class _RegisterPageState extends State<RegisterPage> {
                ? Icon(LucideIcons.check, size: 16, color: textColor)
                : Text(
                    number,
-                    style: TextStyle(
-                      fontSize: 14,
+                    style: AppTextStyles.headlineMedium(context).copyWith(
                      fontWeight: FontWeight.bold,
                      color: textColor,
                    ),
                  ),
          ),
        ),
-        SizedBox(height: 4),
+        SizedBox(height: AppSpacing.xs),
        Text(
          label,
-          style: TextStyle(
-            fontSize: 11,
+          style: AppTextStyles.bodySmall(context).copyWith(
            color: colorScheme.onSurfaceVariant,
          ),
        ),
@@ -204,14 +202,13 @@ class _RegisterPageState extends State<RegisterPage> {
          Center(
            child: Text(
              '创建账号',
-              style: GoogleFonts.spaceGrotesk(
-                fontSize: 18,
+              style: AppTextStyles.displaySmall(context).copyWith(
                fontWeight: FontWeight.bold,
                color: colorScheme.onSurface,
              ),
            ),
          ),
-          SizedBox(height: 48),
+          SizedBox(height: AppSpacing.xxl),

          // 用户名
          TextFormField(
@@ -228,7 +225,7 @@ class _RegisterPageState extends State<RegisterPage> {
              return null;
            },
          ),
-          SizedBox(height: 16),
+          SizedBox(height: AppSpacing.md),

          // 密码
          TextFormField(
@@ -252,7 +249,7 @@ class _RegisterPageState extends State<RegisterPage> {
              return null;
            },
          ),
-          SizedBox(height: 16),
+          SizedBox(height: AppSpacing.md),

          // 确认密码
          TextFormField(
@@ -276,7 +273,7 @@ class _RegisterPageState extends State<RegisterPage> {
              return null;
            },
          ),
-          SizedBox(height: 16),
+          SizedBox(height: AppSpacing.md),

          // 推广码（可选）
          TextFormField(
@@ -287,7 +284,7 @@ class _RegisterPageState extends State<RegisterPage> {
              prefixIcon: Icon(Icons.card_giftcard, color: colorScheme.onSurfaceVariant),
            ),
          ),
-          SizedBox(height: 32),
+          SizedBox(height: AppSpacing.xl),

          // 下一步按钮
          SizedBox(
@@ -304,13 +301,13 @@ class _RegisterPageState extends State<RegisterPage> {
              showGlow: true,
            ),
          ),
-          SizedBox(height: 16),
+          SizedBox(height: AppSpacing.md),

          // 登录链接
          Center(
            child: TextButton(
              onPressed: () => Navigator.pop(context),
-              child: const Text('已有账号？立即登录', style: TextStyle(fontSize: 14)),
+              child: Text('已有账号？立即登录', style: AppTextStyles.headlineMedium(context)),
            ),
          ),
        ],
@@ -334,7 +331,7 @@ class _RegisterPageState extends State<RegisterPage> {
                  Container(
                    padding: EdgeInsets.all(AppSpacing.sm),
                    decoration: BoxDecoration(
-                      color: colorScheme.primary.withOpacity(0.1),
+                      color: colorScheme.primary.withValues(alpha: 0.1),
                      borderRadius: BorderRadius.circular(AppRadius.md),
                    ),
                    child: Icon(
@@ -349,17 +346,15 @@ class _RegisterPageState extends State<RegisterPage> {
                    children: [
                      Text(
                        '身份验证',
-                        style: GoogleFonts.spaceGrotesk(
-                          fontSize: 16,
+                        style: AppTextStyles.headlineLarge(context).copyWith(
                          fontWeight: FontWeight.bold,
                          color: colorScheme.onSurface,
                        ),
                      ),
-                      SizedBox(height: 2),
+                      SizedBox(height: AppSpacing.xs),
                      Text(
                        '上传身份证正反面完成注册',
-                        style: TextStyle(
-                          fontSize: 12,
+                        style: AppTextStyles.bodyMedium(context).copyWith(
                          color: colorScheme.onSurfaceVariant,
                        ),
                      ),
@@ -372,8 +367,7 @@ class _RegisterPageState extends State<RegisterPage> {
              // 身份证正面
              Text(
                '身份证正面（人像面）',
-                style: TextStyle(
-                  fontSize: 13,
+                style: AppTextStyles.bodyLarge(context).copyWith(
                  fontWeight: FontWeight.w600,
                  color: colorScheme.onSurface,
                ),
@@ -391,8 +385,7 @@ class _RegisterPageState extends State<RegisterPage> {
              // 身份证反面
              Text(
                '身份证反面（国徽面）',
-                style: TextStyle(
-                  fontSize: 13,
+                style: AppTextStyles.bodyLarge(context).copyWith(
                  fontWeight: FontWeight.w600,
                  color: colorScheme.onSurface,
                ),
@@ -431,9 +424,9 @@ class _RegisterPageState extends State<RegisterPage> {
        Container(
          padding: EdgeInsets.all(AppSpacing.md),
          decoration: BoxDecoration(
-            color: AppColorScheme.up.withOpacity(0.06),
-            borderRadius: BorderRadius.circular(AppRadius.lg),
-            border: Border.all(color: AppColorScheme.up.withOpacity(0.12)),
+            color: AppColorScheme.up.withValues(alpha: 0.06),
+            borderRadius: AppRadius.radiusLg,
+            border: Border.all(color: AppColorScheme.up.withValues(alpha: 0.12)),
          ),
          child: Row(
            children: [
@@ -442,9 +435,8 @@ class _RegisterPageState extends State<RegisterPage> {
              Expanded(
                child: Text(
                  '您的身份信息将被加密存储，仅用于身份验证',
-                  style: TextStyle(
-                    fontSize: 11,
-                    color: AppColorScheme.up.withOpacity(0.8),
+                  style: AppTextStyles.bodySmall(context).copyWith(
+                    color: AppColorScheme.up.withValues(alpha: 0.8),
                  ),
                ),
              ),
@@ -472,16 +464,16 @@ class _RegisterPageState extends State<RegisterPage> {
        height: 140,
        decoration: BoxDecoration(
          color: hasImage
-              ? AppColorScheme.up.withOpacity(0.06)
-              : colorScheme.surfaceContainerHigh.withOpacity(0.3),
-          borderRadius: BorderRadius.circular(AppRadius.xl),
+              ? AppColorScheme.up.withValues(alpha: 0.06)
+              : colorScheme.surfaceContainerHigh.withValues(alpha: 0.3),
+          borderRadius: AppRadius.radiusXl,
          border: Border.all(
-            color: hasImage ? AppColorScheme.up.withOpacity(0.3) : Colors.transparent,
+            color: hasImage ? AppColorScheme.up.withValues(alpha: 0.3) : AppColorScheme.darkBackground.withValues(alpha: 0),
          ),
        ),
        child: hasImage
            ? ClipRRect(
-                borderRadius: BorderRadius.circular(AppRadius.xl),
+                borderRadius: AppRadius.radiusXl,
                child: Stack(
                  fit: StackFit.passthrough,
                  children: [
@@ -499,7 +491,7 @@ class _RegisterPageState extends State<RegisterPage> {
                          gradient: LinearGradient(
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
-                            colors: [Colors.transparent, Colors.black54],
+                            colors: [AppColorScheme.darkBackground.withValues(alpha: 0), AppColorScheme.darkSurfaceLowest.withValues(alpha: 0.6)],
                          ),
                          borderRadius: BorderRadius.only(
                            bottomLeft: Radius.circular(AppRadius.xl),
@@ -511,10 +503,9 @@ class _RegisterPageState extends State<RegisterPage> {
                          children: [
                            Text(
                              '$label已选择',
-                              style: TextStyle(
-                                fontSize: 12,
+                              style: AppTextStyles.bodyMedium(context).copyWith(
                                fontWeight: FontWeight.w600,
-                                color: Colors.white,
+                                color: AppColorScheme.darkOnPrimary,
                              ),
                            ),
                            GestureDetector(
@@ -530,12 +521,12 @@ class _RegisterPageState extends State<RegisterPage> {
                                });
                              },
                              child: Container(
-                                padding: EdgeInsets.all(4),
+                                padding: EdgeInsets.all(AppSpacing.xs),
                                decoration: BoxDecoration(
-                                  color: Colors.white24,
+                                  color: AppColorScheme.darkOnPrimary.withValues(alpha: 0.15),
                                  shape: BoxShape.circle,
                                ),
-                                child: Icon(LucideIcons.x, size: 14, color: Colors.white),
+                                child: Icon(LucideIcons.x, size: 14, color: AppColorScheme.darkOnPrimary),
                              ),
                            ),
                          ],
@@ -547,7 +538,7 @@ class _RegisterPageState extends State<RegisterPage> {
              )
            : CustomPaint(
                painter: _DashedBorderPainter(
-                  color: colorScheme.onSurfaceVariant.withOpacity(0.2),
+                  color: colorScheme.onSurfaceVariant.withValues(alpha: 0.2),
                  borderRadius: AppRadius.xl,
                ),
                child: Column(
@@ -556,22 +547,20 @@ class _RegisterPageState extends State<RegisterPage> {
                    Icon(
                      LucideIcons.camera,
                      size: 28,
-                      color: colorScheme.onSurfaceVariant.withOpacity(0.5),
+                      color: colorScheme.onSurfaceVariant.withValues(alpha: 0.5),
                    ),
                    SizedBox(height: AppSpacing.sm),
                    Text(
                      '点击上传$label',
-                      style: TextStyle(
-                        fontSize: 13,
-                        color: colorScheme.onSurfaceVariant.withOpacity(0.6),
+                      style: AppTextStyles.bodyLarge(context).copyWith(
+                        color: colorScheme.onSurfaceVariant.withValues(alpha: 0.6),
                      ),
                    ),
-                    SizedBox(height: 4),
+                    SizedBox(height: AppSpacing.xs),
                    Text(
                      '支持 JPG、PNG 格式',
-                      style: TextStyle(
-                        fontSize: 11,
-                        color: colorScheme.onSurfaceVariant.withOpacity(0.4),
+                      style: AppTextStyles.bodySmall(context).copyWith(
+                        color: colorScheme.onSurfaceVariant.withValues(alpha: 0.4),
                      ),
                    ),
                  ],