fix：按html的假数据demo

lib/theme/app_icons.dart

@@ -1,10 +1,45 @@
 import 'package:flutter/widgets.dart';
-import 'package:phosphor_flutter/phosphor_flutter.dart';
+import 'package:remixicon/remixicon.dart';
 
 abstract final class AppIcons {
-  static const IconData sparkle = PhosphorIconsRegular.sparkle;
-  static const IconData article = PhosphorIconsRegular.article;
-  static const IconData bank = PhosphorIconsRegular.bank;
-  static const IconData headphones = PhosphorIconsRegular.headphones;
-  static const IconData user = PhosphorIconsRegular.user;
+  static const IconData sparkle = Remix.star_line;
+  static const IconData sparkleFill = Remix.star_fill;
+  static const IconData article = Remix.article_line;
+  static const IconData articleFill = Remix.article_fill;
+  static const IconData bank = Remix.bank_line;
+  static const IconData bankFill = Remix.bank_fill;
+  static const IconData headphones = Remix.headphone_line;
+  static const IconData headphonesFill = Remix.headphone_fill;
+  static const IconData user = Remix.user_3_line;
+  static const IconData userFill = Remix.user_3_fill;
+
+  static const IconData search = Remix.search_line;
+  static const IconData filter = Remix.equalizer_line;
+  static const IconData sort = Remix.arrow_down_line;
+  static const IconData arrowRight = Remix.arrow_right_s_line;
+  static const IconData arrowLeft = Remix.arrow_left_s_line;
+  static const IconData play = Remix.play_fill;
+  static const IconData pause = Remix.pause_fill;
+  static const IconData playCircle = Remix.play_circle_fill;
+  static const IconData heart = Remix.heart_3_line;
+  static const IconData heartFill = Remix.heart_3_fill;
+  static const IconData externalLink = Remix.external_link_line;
+  static const IconData warning = Remix.error_warning_line;
+  static const IconData music = Remix.music_2_line;
+  static const IconData disc = Remix.disc_line;
+  static const IconData history = Remix.history_line;
+  static const IconData settings = Remix.settings_3_line;
+  static const IconData fileList = Remix.file_list_3_line;
+  static const IconData shield = Remix.shield_check_line;
+
+  static IconData tabIcon(int index, {required bool selected}) {
+    return switch (index) {
+      0 => selected ? sparkleFill : sparkle,
+      1 => selected ? articleFill : article,
+      2 => selected ? bankFill : bank,
+      3 => selected ? headphonesFill : headphones,
+      4 => selected ? userFill : user,
+      _ => selected ? sparkleFill : sparkle,
+    };
+  }
 }

lib/theme/app_theme.dart

@@ -1,98 +1,100 @@
 import 'package:flutter/material.dart';
 
+import 'yanting_text.dart';
+import 'yanting_tokens.dart';
 import 'wise_tokens.dart';
 
 ThemeData buildAppTheme() {
   final scheme = ColorScheme.fromSeed(
-    seedColor: WiseColors.primary,
-    primary: WiseColors.primary,
-    secondary: WiseColors.secondary,
-    tertiary: WiseColors.accent,
-    surface: WiseColors.surface,
+    seedColor: YantingColors.primary,
+    primary: YantingColors.primary,
+    onPrimary: YantingColors.primaryForeground,
+    secondary: YantingColors.secondary,
+    onSecondary: YantingColors.secondaryForeground,
+    tertiary: YantingColors.link,
+    surface: YantingColors.card,
+    onSurface: YantingColors.foreground,
+    error: YantingColors.destructive,
+    outline: YantingColors.border,
   );
   return ThemeData(
     useMaterial3: true,
     colorScheme: scheme,
-    fontFamily: 'Inter',
-    scaffoldBackgroundColor: WiseColors.canvas,
+    fontFamily: YantingText.fontFamily,
+    fontFamilyFallback: YantingText.fontFallback,
+    scaffoldBackgroundColor: YantingColors.background,
     appBarTheme: const AppBarTheme(
-      backgroundColor: WiseColors.canvas,
-      foregroundColor: WiseColors.primary,
+      backgroundColor: YantingColors.background,
+      foregroundColor: YantingColors.foreground,
       elevation: 0,
       centerTitle: false,
-      titleTextStyle: TextStyle(
-        color: WiseColors.primary,
-        fontSize: 22,
-        fontWeight: FontWeight.w800,
-      ),
+      titleTextStyle: YantingText.sectionTitle,
     ),
     cardTheme: const CardThemeData(
-      color: WiseColors.surface,
+      color: YantingColors.card,
       elevation: 0,
       margin: EdgeInsets.zero,
       shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.all(Radius.circular(WiseRadius.md)),
+        side: BorderSide(color: YantingColors.border),
+      ),
+    ),
+    dividerTheme: const DividerThemeData(
+      color: YantingColors.border,
+      thickness: 1,
+      space: 1,
+    ),
+    inputDecorationTheme: InputDecorationTheme(
+      filled: true,
+      fillColor: YantingColors.background,
+      hintStyle: YantingText.body.copyWith(
+        color: YantingColors.mutedForeground,
+      ),
+      contentPadding: const EdgeInsets.symmetric(horizontal: 14),
+      border: OutlineInputBorder(
+        borderRadius: BorderRadius.circular(YantingRadius.md),
+        borderSide: const BorderSide(color: YantingColors.input),
+      ),
+      enabledBorder: OutlineInputBorder(
+        borderRadius: BorderRadius.circular(YantingRadius.md),
+        borderSide: const BorderSide(color: YantingColors.input),
+      ),
+      focusedBorder: OutlineInputBorder(
+        borderRadius: BorderRadius.circular(YantingRadius.md),
+        borderSide: const BorderSide(color: YantingColors.foreground),
       ),
     ),
     navigationBarTheme: NavigationBarThemeData(
-      backgroundColor: WiseColors.surface,
-      indicatorColor: WiseColors.secondary200,
+      backgroundColor: YantingColors.background,
+      indicatorColor: Colors.transparent,
       labelTextStyle: WidgetStateProperty.resolveWith(
-        (states) => TextStyle(
+        (states) => YantingText.meta.copyWith(
           color: states.contains(WidgetState.selected)
-              ? WiseColors.primary
-              : WiseColors.textTertiary,
+              ? YantingColors.foreground
+              : YantingColors.mutedForeground,
           fontSize: 11,
-          fontWeight: FontWeight.w700,
+          fontWeight: states.contains(WidgetState.selected)
+              ? FontWeight.w600
+              : FontWeight.w400,
         ),
       ),
       iconTheme: WidgetStateProperty.resolveWith(
         (states) => IconThemeData(
           color: states.contains(WidgetState.selected)
-              ? WiseColors.primary
-              : WiseColors.textTertiary,
+              ? YantingColors.foreground
+              : YantingColors.mutedForeground,
         ),
       ),
     ),
     textTheme: const TextTheme(
-      headlineSmall: TextStyle(
-        color: WiseColors.ink,
-        fontSize: 26,
-        height: 1.18,
-        fontWeight: FontWeight.w800,
-      ),
-      titleLarge: TextStyle(
-        color: WiseColors.ink,
-        fontSize: 21,
-        height: 1.22,
-        fontWeight: FontWeight.w800,
-      ),
-      titleMedium: TextStyle(
-        color: WiseColors.ink,
-        fontSize: 17,
-        height: 1.25,
-        fontWeight: FontWeight.w800,
-      ),
-      bodyLarge: TextStyle(
-        color: WiseColors.ink,
-        fontSize: 16,
-        height: 1.55,
-      ),
-      bodyMedium: TextStyle(
-        color: WiseColors.ink700,
-        fontSize: 14,
-        height: 1.5,
-      ),
-      bodySmall: TextStyle(
-        color: WiseColors.textSecondary,
-        fontSize: 12,
-        height: 1.45,
-      ),
-      labelSmall: TextStyle(
-        color: WiseColors.textSecondary,
-        fontSize: 11,
-        fontWeight: FontWeight.w700,
-      ),
+      headlineSmall: YantingText.appTitle,
+      titleLarge: YantingText.sectionTitle,
+      titleMedium: YantingText.cardTitle,
+      bodyLarge: YantingText.body,
+      bodyMedium: YantingText.sub,
+      bodySmall: YantingText.meta,
+      labelLarge: YantingText.chip,
+      labelSmall: YantingText.badge,
     ),
   );
 }

lib/theme/wise_tokens.dart

@@ -1,39 +1,41 @@
 import 'package:flutter/material.dart';
 
+import 'yanting_tokens.dart';
+
 final class WiseColors {
-  static const primary = Color(0xFF163300);
-  static const primarySoft = Color(0xFF1F4708);
-  static const secondary = Color(0xFF9FE870);
-  static const secondary200 = Color(0xFFE2F6D5);
-  static const accent = Color(0xFF00A2DD);
-  static const canvas = Color(0xFFF4F6F3);
-  static const ink = Color(0xFF0E0F0C);
-  static const ink700 = Color(0xFF454745);
-  static const textSecondary = Color(0xFF5D7079);
-  static const textTertiary = Color(0xFF768E9C);
-  static const surface = Colors.white;
-  static const border = Color(0x1A000000);
-  static const positive = Color(0xFF008026);
-  static const warning = Color(0xFF9A6500);
-  static const negative = Color(0xFFCF2929);
+  static const primary = YantingColors.foreground;
+  static const primarySoft = YantingColors.primaryForeground;
+  static const secondary = YantingColors.primary;
+  static const secondary200 = YantingColors.brandSoft;
+  static const accent = YantingColors.link;
+  static const canvas = YantingColors.background;
+  static const ink = YantingColors.foreground;
+  static const ink700 = YantingColors.secondaryForeground;
+  static const textSecondary = YantingColors.mutedForeground;
+  static const textTertiary = YantingColors.mutedForeground;
+  static const surface = YantingColors.card;
+  static const border = YantingColors.border;
+  static const positive = YantingColors.chart2;
+  static const warning = Color(0xFF9A6A00);
+  static const negative = YantingColors.destructive;
 }
 
 final class WiseSpacing {
-  static const x1 = 4.0;
-  static const x2 = 8.0;
-  static const x3 = 12.0;
-  static const x4 = 16.0;
-  static const x5 = 20.0;
-  static const x6 = 24.0;
-  static const x8 = 32.0;
-  static const x10 = 40.0;
+  static const x1 = YantingSpacing.x1;
+  static const x2 = YantingSpacing.x2;
+  static const x3 = YantingSpacing.cardGap;
+  static const x4 = YantingSpacing.screenX;
+  static const x5 = YantingSpacing.screenX;
+  static const x6 = YantingSpacing.x6;
+  static const x8 = YantingSpacing.x8;
+  static const x10 = YantingSpacing.x10;
 }
 
 final class WiseRadius {
-  static const sm = 10.0;
-  static const md = 16.0;
+  static const sm = YantingRadius.sm;
+  static const md = YantingRadius.xl;
   static const lg = 24.0;
-  static const pill = 999.0;
+  static const pill = YantingRadius.pill;
 }
 
 final class WiseMotion {
@@ -43,26 +45,12 @@ final class WiseMotion {
 }
 
 final class WiseShadows {
-  static const card = [
-    BoxShadow(
-      color: Color(0x14000000),
-      blurRadius: 20,
-      offset: Offset(0, 6),
-    ),
-  ];
-  static const elevated = [
-    BoxShadow(
-      color: Color(0x24000000),
-      blurRadius: 32,
-      offset: Offset(0, 10),
-    ),
-  ];
+  static const card = <BoxShadow>[];
+  static const elevated = <BoxShadow>[];
 }
 
 const wiseFontStack = [
-  'Inter',
-  '-apple-system',
-  'BlinkMacSystemFont',
+  'DM Sans',
   'PingFang SC',
   'Microsoft YaHei',
   'Helvetica Neue',

lib/theme/yanting_text.dart

@@ -0,0 +1,106 @@
+import 'package:flutter/material.dart';
+
+import 'yanting_tokens.dart';
+
+abstract final class YantingText {
+  static const fontFamily = 'DM Sans';
+  static const fontFallback = [
+    'PingFang SC',
+    'Microsoft YaHei',
+    'Helvetica Neue',
+    'Arial',
+    'sans-serif',
+  ];
+
+  static const appTitle = TextStyle(
+    color: YantingColors.foreground,
+    fontFamily: fontFamily,
+    fontFamilyFallback: fontFallback,
+    fontSize: 34,
+    height: 1.15,
+    letterSpacing: 0,
+    fontWeight: FontWeight.w800,
+  );
+
+  static const sectionTitle = TextStyle(
+    color: YantingColors.foreground,
+    fontFamily: fontFamily,
+    fontFamilyFallback: fontFallback,
+    fontSize: 22,
+    height: 1.2,
+    letterSpacing: 0,
+    fontWeight: FontWeight.w700,
+  );
+
+  static const cardTitle = TextStyle(
+    color: YantingColors.foreground,
+    fontFamily: fontFamily,
+    fontFamilyFallback: fontFallback,
+    fontSize: 19,
+    height: 1.4,
+    letterSpacing: 0,
+    fontWeight: FontWeight.w600,
+  );
+
+  static const listTitle = TextStyle(
+    color: YantingColors.foreground,
+    fontFamily: fontFamily,
+    fontFamilyFallback: fontFallback,
+    fontSize: 16.5,
+    height: 1.45,
+    letterSpacing: 0,
+    fontWeight: FontWeight.w600,
+  );
+
+  static const body = TextStyle(
+    color: YantingColors.foreground,
+    fontFamily: fontFamily,
+    fontFamilyFallback: fontFallback,
+    fontSize: 15,
+    height: 1.6,
+    letterSpacing: 0,
+    fontWeight: FontWeight.w400,
+  );
+
+  static const sub = TextStyle(
+    color: YantingColors.mutedForeground,
+    fontFamily: fontFamily,
+    fontFamilyFallback: fontFallback,
+    fontSize: 15,
+    height: 1.45,
+    letterSpacing: 0,
+    fontWeight: FontWeight.w400,
+  );
+
+  static const meta = TextStyle(
+    color: YantingColors.mutedForeground,
+    fontFamily: fontFamily,
+    fontFamilyFallback: fontFallback,
+    fontSize: 13,
+    height: 1.5,
+    letterSpacing: 0,
+    fontWeight: FontWeight.w400,
+    fontFeatures: YantingTypographyFeatures.tabularNums,
+  );
+
+  static const chip = TextStyle(
+    color: YantingColors.secondaryForeground,
+    fontFamily: fontFamily,
+    fontFamilyFallback: fontFallback,
+    fontSize: 15,
+    height: 1.2,
+    letterSpacing: 0,
+    fontWeight: FontWeight.w500,
+  );
+
+  static const badge = TextStyle(
+    color: YantingColors.mutedForeground,
+    fontFamily: fontFamily,
+    fontFamilyFallback: fontFallback,
+    fontSize: 12,
+    height: 1.5,
+    letterSpacing: 0,
+    fontWeight: FontWeight.w500,
+    fontFeatures: YantingTypographyFeatures.tabularNums,
+  );
+}

lib/theme/yanting_tokens.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+
+abstract final class YantingColors {
+  static const background = Color(0xFFFFFFFF);
+  static const foreground = Color(0xFF171717);
+  static const card = Color(0xFFFFFFFF);
+  static const primary = Color(0xFFA3E635);
+  static const primaryForeground = Color(0xFF3F6212);
+  static const secondary = Color(0xFFF4F4F5);
+  static const secondaryForeground = Color(0xFF27272A);
+  static const muted = Color(0xFFF5F5F5);
+  static const mutedForeground = Color(0xFF737373);
+  static const border = Color(0xFFE5E5E5);
+  static const input = Color(0xFFE5E5E5);
+  static const destructive = Color(0xFFEF4444);
+  static const warning = Color(0xFF9A6A00);
+  static const chart2 = Color(0xFF84CC16);
+  static const brandSoft = Color(0xFFEEFBD8);
+  static const brandSoftBorder = Color(0xFFD6F5A8);
+  static const link = Color(0xFF2563EB);
+  static const canvas = background;
+}
+
+abstract final class YantingSpacing {
+  static const x1 = 4.0;
+  static const x2 = 8.0;
+  static const x3 = 12.0;
+  static const cardGap = 14.0;
+  static const x4 = 16.0;
+  static const cardPadding = 18.0;
+  static const screenX = 20.0;
+  static const x6 = 24.0;
+  static const sectionGap = 30.0;
+  static const x8 = 32.0;
+  static const x10 = 40.0;
+  static const tabBarHeight = 56.0;
+}
+
+abstract final class YantingRadius {
+  static const base = 7.2;
+  static const sm = 3.2;
+  static const md = 5.2;
+  static const xl = 11.2;
+  static const pill = 9999.0;
+}
+
+abstract final class YantingBorders {
+  static const card = BorderSide(color: YantingColors.border);
+  static const soft = BorderSide(color: YantingColors.brandSoftBorder);
+}
+
+abstract final class YantingTypographyFeatures {
+  static const tabularNums = [FontFeature.tabularFigures()];
+}