refactor: 优化字号主题体系，参考成熟交易平台标准

- 重构主题字号体系 (h1-h4, body, amount等) - 修复16个页面文件中的硬编码字号 - 新字号层级参考币安/OKX标准 - Display: 22/20/18px (总资产、价格) - Headline: 15/14/13px (标题、副标题) - Body: 13/12/11px (正文、辅助文字) - Label: 11/10/9px (标签) - Number: 22/16/13px (数字)
2026-04-01 12:49:17 +08:00
parent 3f4d2d8b9a
commit ed25bb2da4
14 changed files with 126 additions and 118 deletions
--- a/flutter_monisuo/lib/core/theme/app_text_styles.dart
+++ b/flutter_monisuo/lib/core/theme/app_text_styles.dart
@@ -14,7 +14,7 @@ class AppTextStyles {

  /// H1 - 页面大标题
  static const TextStyle h1 = TextStyle(
-    fontSize: 28,
+    fontSize: 22,
    fontWeight: FontWeight.bold,
    color: AppColors.textPrimary,
    height: 1.3,
@@ -22,7 +22,7 @@ class AppTextStyles {

  /// H2 - 区块标题
  static const TextStyle h2 = TextStyle(
-    fontSize: 24,
+    fontSize: 18,
    fontWeight: FontWeight.bold,
    color: AppColors.textPrimary,
    height: 1.3,
@@ -30,7 +30,7 @@ class AppTextStyles {

  /// H3 - 卡片标题
  static const TextStyle h3 = TextStyle(
-    fontSize: 20,
+    fontSize: 16,
    fontWeight: FontWeight.w600,
    color: AppColors.textPrimary,
    height: 1.4,
@@ -38,7 +38,7 @@ class AppTextStyles {

  /// H4 - 小标题
  static const TextStyle h4 = TextStyle(
-    fontSize: 18,
+    fontSize: 15,
    fontWeight: FontWeight.w600,
    color: AppColors.textPrimary,
    height: 1.4,
@@ -50,7 +50,7 @@ class AppTextStyles {

  /// Body1 - 主要正文
  static const TextStyle body1 = TextStyle(
-    fontSize: 16,
+    fontSize: 14,
    fontWeight: FontWeight.normal,
    color: AppColors.textPrimary,
    height: 1.5,
@@ -58,7 +58,7 @@ class AppTextStyles {

  /// Body2 - 次要正文
  static const TextStyle body2 = TextStyle(
-    fontSize: 14,
+    fontSize: 13,
    fontWeight: FontWeight.normal,
    color: AppColors.textPrimary,
    height: 1.5,
@@ -86,7 +86,7 @@ class AppTextStyles {

  /// Hint - 提示文字
  static const TextStyle hint = TextStyle(
-    fontSize: 14,
+    fontSize: 13,
    fontWeight: FontWeight.normal,
    color: AppColors.textHint,
    height: 1.4,
@@ -98,7 +98,7 @@ class AppTextStyles {

  /// 金额/价格 - 大号数字
  static const TextStyle amount = TextStyle(
-    fontSize: 32,
+    fontSize: 22,
    fontWeight: FontWeight.bold,
    color: AppColors.textPrimary,
    height: 1.2,
@@ -107,7 +107,7 @@ class AppTextStyles {

  /// 价格 - 标准数字
  static const TextStyle price = TextStyle(
-    fontSize: 18,
+    fontSize: 16,
    fontWeight: FontWeight.w600,
    color: AppColors.textPrimary,
    height: 1.3,
@@ -116,7 +116,7 @@ class AppTextStyles {

  /// 价格变化 - 涨跌幅
  static const TextStyle priceChange = TextStyle(
-    fontSize: 14,
+    fontSize: 13,
    fontWeight: FontWeight.w600,
    height: 1.3,
    fontFeatures: [FontFeature.tabularFigures()],
@@ -124,7 +124,7 @@ class AppTextStyles {

  /// 按钮文字
  static const TextStyle button = TextStyle(
-    fontSize: 16,
+    fontSize: 14,
    fontWeight: FontWeight.w600,
    color: AppColors.textPrimary,
    height: 1.2,
@@ -132,7 +132,7 @@ class AppTextStyles {

  /// 链接文字
  static const TextStyle link = TextStyle(
-    fontSize: 14,
+    fontSize: 13,
    fontWeight: FontWeight.w500,
    color: AppColors.textLink,
    decoration: TextDecoration.underline,
--- a/flutter_monisuo/lib/core/theme/app_theme.dart
+++ b/flutter_monisuo/lib/core/theme/app_theme.dart
@@ -26,9 +26,8 @@ class AppTheme {
        elevation: 0,
        scrolledUnderElevation: 0,
        centerTitle: true,
-        // 【优化】使用 Inter 字体替代 Space Grotesk，提升专业金融感
        titleTextStyle: GoogleFonts.inter(
-          fontSize: 18,
+          fontSize: 15,
          fontWeight: FontWeight.w600,
          color: AppColorScheme.darkOnSurface,
        ),
@@ -81,9 +80,8 @@ class AppTheme {
            borderRadius: BorderRadius.circular(AppRadius.xxl),
          ),
          elevation: 0,
-          // 【优化】使用 Inter 字体替代 Manrope，提升专业金融感
          textStyle: GoogleFonts.inter(
-            fontSize: 16,
+            fontSize: 14,
            fontWeight: FontWeight.w600,
          ),
        ),
@@ -131,9 +129,8 @@ class AppTheme {
        elevation: 0,
        scrolledUnderElevation: 0,
        centerTitle: true,
-        // 【优化】使用 Inter 字体替代 Space Grotesk，提升专业金融感
        titleTextStyle: GoogleFonts.inter(
-          fontSize: 18,
+          fontSize: 16,
          fontWeight: FontWeight.w600,
          color: AppColorScheme.lightOnSurface,
        ),
@@ -188,9 +185,8 @@ class AppTheme {
            borderRadius: BorderRadius.circular(AppRadius.xxl),
          ),
          elevation: 0,
-          // 【优化】使用 Inter 字体替代 Manrope，提升专业金融感
          textStyle: GoogleFonts.inter(
-            fontSize: 16,
+            fontSize: 14,
            fontWeight: FontWeight.w600,
          ),
        ),
@@ -227,30 +223,30 @@ class AppTextStyles {
  AppTextStyles._();

  // ============================================
-  // Display - 大标题
+  // Display - 核心数字 (价格/余额)
+  // 参考 Binance/OKX 紧凑专业风格
  // ============================================

-  /// D1 - 大标题 (48px) - Hero moments
+  /// D1 - 总资产余额 (22px)
  static TextStyle displayLarge(BuildContext context) => GoogleFonts.inter(
-    fontSize: 48,
+    fontSize: 22,
    fontWeight: FontWeight.w700,
    color: Theme.of(context).colorScheme.onSurface,
-    height: 1.1,
-    letterSpacing: -0.02,
-  );
-
-  /// D2 - 中标题 (36px)
-  static TextStyle displayMedium(BuildContext context) => GoogleFonts.inter(
-    fontSize: 36,
-    fontWeight: FontWeight.w600,
-    color: Theme.of(context).colorScheme.onSurface,
-    height: 1.2,
+    height: 1.15,
    letterSpacing: -0.01,
  );

-  /// D3 - 小标题 (28px)
+  /// D2 - 主价格 (20px)
+  static TextStyle displayMedium(BuildContext context) => GoogleFonts.inter(
+    fontSize: 20,
+    fontWeight: FontWeight.w600,
+    color: Theme.of(context).colorScheme.onSurface,
+    height: 1.2,
+  );
+
+  /// D3 - 次要价格 (18px)
  static TextStyle displaySmall(BuildContext context) => GoogleFonts.inter(
-    fontSize: 28,
+    fontSize: 18,
    fontWeight: FontWeight.w600,
    color: Theme.of(context).colorScheme.onSurface,
    height: 1.25,
@@ -260,22 +256,25 @@ class AppTextStyles {
  // Headline - 标题
  // ============================================

+  /// 区域标题 (15px)
  static TextStyle headlineLarge(BuildContext context) => GoogleFonts.inter(
-    fontSize: 24,
+    fontSize: 15,
    fontWeight: FontWeight.w600,
    color: Theme.of(context).colorScheme.onSurface,
    height: 1.3,
  );

+  /// 卡片标题 (14px)
  static TextStyle headlineMedium(BuildContext context) => GoogleFonts.inter(
-    fontSize: 20,
+    fontSize: 14,
    fontWeight: FontWeight.w600,
    color: Theme.of(context).colorScheme.onSurface,
    height: 1.35,
  );

+  /// 副标题 (13px)
  static TextStyle headlineSmall(BuildContext context) => GoogleFonts.inter(
-    fontSize: 18,
+    fontSize: 13,
    fontWeight: FontWeight.w500,
    color: Theme.of(context).colorScheme.onSurface,
    height: 1.4,
@@ -285,74 +284,83 @@ class AppTextStyles {
  // Body - 正文
  // ============================================

+  /// 主要正文 (13px)
  static TextStyle bodyLarge(BuildContext context) => GoogleFonts.inter(
-    fontSize: 16,
+    fontSize: 13,
    fontWeight: FontWeight.w400,
    color: Theme.of(context).colorScheme.onSurface,
-    height: 1.5,
+    height: 1.45,
  );

+  /// 次要正文 (12px)
  static TextStyle bodyMedium(BuildContext context) => GoogleFonts.inter(
-    fontSize: 14,
-    fontWeight: FontWeight.w400,
-    color: Theme.of(context).colorScheme.onSurface,
-    height: 1.5,
-  );
-
-  static TextStyle bodySmall(BuildContext context) => GoogleFonts.inter(
    fontSize: 12,
    fontWeight: FontWeight.w400,
-    color: Theme.of(context).colorScheme.onSurfaceVariant,
+    color: Theme.of(context).colorScheme.onSurface,
    height: 1.45,
  );

+  /// 辅助文字 (11px)
+  static TextStyle bodySmall(BuildContext context) => GoogleFonts.inter(
+    fontSize: 11,
+    fontWeight: FontWeight.w400,
+    color: Theme.of(context).colorScheme.onSurfaceVariant,
+    height: 1.4,
+  );
+
  // ============================================
  // Label - 标签
  // ============================================

+  /// 常规标签 (11px)
  static TextStyle labelLarge(BuildContext context) => GoogleFonts.inter(
-    fontSize: 14,
-    fontWeight: FontWeight.w500,
-    color: Theme.of(context).colorScheme.onSurface,
-    height: 1.4,
-  );
-
-  static TextStyle labelMedium(BuildContext context) => GoogleFonts.inter(
-    fontSize: 12,
-    fontWeight: FontWeight.w500,
-    color: Theme.of(context).colorScheme.onSurfaceVariant,
-    height: 1.4,
-  );
-
-  static TextStyle labelSmall(BuildContext context) => GoogleFonts.inter(
    fontSize: 11,
    fontWeight: FontWeight.w500,
+    color: Theme.of(context).colorScheme.onSurface,
+    height: 1.35,
+  );
+
+  /// 小标签 (10px)
+  static TextStyle labelMedium(BuildContext context) => GoogleFonts.inter(
+    fontSize: 10,
+    fontWeight: FontWeight.w500,
    color: Theme.of(context).colorScheme.onSurfaceVariant,
-    height: 1.4,
+    height: 1.35,
+  );
+
+  /// 极小标签 (9px)
+  static TextStyle labelSmall(BuildContext context) => GoogleFonts.inter(
+    fontSize: 9,
+    fontWeight: FontWeight.w500,
+    color: Theme.of(context).colorScheme.onSurfaceVariant,
+    height: 1.35,
  );

  // ============================================
  // 数字/金额 - Inter (等宽特性)
  // ============================================

+  /// 大号数字 (22px) - 主价格、总资产
  static TextStyle numberLarge(BuildContext context) => GoogleFonts.inter(
-    fontSize: 24,
+    fontSize: 22,
    fontWeight: FontWeight.w600,
    color: Theme.of(context).colorScheme.onSurface,
-    height: 1.2,
+    height: 1.15,
    fontFeatures: const [FontFeature.tabularFigures()],
  );

+  /// 中号数字 (16px) - 次要价格、数量
  static TextStyle numberMedium(BuildContext context) => GoogleFonts.inter(
-    fontSize: 18,
+    fontSize: 16,
    fontWeight: FontWeight.w500,
    color: Theme.of(context).colorScheme.onSurface,
    height: 1.25,
    fontFeatures: const [FontFeature.tabularFigures()],
  );

+  /// 小号数字 (13px) - 涨跌幅、小量
  static TextStyle numberSmall(BuildContext context) => GoogleFonts.inter(
-    fontSize: 14,
+    fontSize: 13,
    fontWeight: FontWeight.w500,
    color: Theme.of(context).colorScheme.onSurface,
    height: 1.3,
@@ -365,72 +373,72 @@ class AppTextStyles {

  @Deprecated('Use displaySmall instead')
  static const TextStyle heading1 = TextStyle(
-    fontSize: 28,
+    fontSize: 18,
    fontWeight: FontWeight.bold,
    color: Color(0xFFFFFFFF),
  );

  @Deprecated('Use headlineLarge instead')
  static const TextStyle heading2 = TextStyle(
-    fontSize: 24,
+    fontSize: 15,
    fontWeight: FontWeight.bold,
    color: Color(0xFFFFFFFF),
  );

  @Deprecated('Use headlineMedium instead')
  static const TextStyle heading3 = TextStyle(
-    fontSize: 18,
+    fontSize: 14,
    fontWeight: FontWeight.w600,
    color: Color(0xFFFFFFFF),
  );

  @Deprecated('Use headlineSmall instead')
  static const TextStyle heading4 = TextStyle(
-    fontSize: 16,
+    fontSize: 13,
    fontWeight: FontWeight.w600,
    color: Color(0xFFFFFFFF),
  );

  @Deprecated('Use bodyLarge instead')
  static const TextStyle body1 = TextStyle(
-    fontSize: 16,
+    fontSize: 13,
    color: Color(0xFFFFFFFF),
  );

  @Deprecated('Use bodyMedium instead')
  static const TextStyle body2 = TextStyle(
-    fontSize: 14,
+    fontSize: 12,
    color: Color(0xFFFFFFFF),
  );

  @Deprecated('Use labelSmall instead')
  static const TextStyle caption = TextStyle(
-    fontSize: 12,
+    fontSize: 11,
    color: Color(0xFFA1A1AA),
  );

  @Deprecated('Use labelSmall instead')
  static const TextStyle hint = TextStyle(
-    fontSize: 14,
+    fontSize: 12,
    color: Color(0xFF71717A),
  );

  @Deprecated('Use numberMedium instead')
  static const TextStyle price = TextStyle(
-    fontSize: 20,
+    fontSize: 16,
    fontWeight: FontWeight.bold,
    color: Color(0xFFFFFFFF),
  );

  @Deprecated('Use numberSmall with color instead')
  static const TextStyle change = TextStyle(
-    fontSize: 14,
+    fontSize: 13,
    fontWeight: FontWeight.w600,
  );

  @Deprecated('Use numberSmall instead')
  static const TextStyle number = TextStyle(
-    fontSize: 16,
+    fontSize: 13,
    fontWeight: FontWeight.w500,
    color: Color(0xFFFFFFFF),
  );