style: 优化为黑金/白金配色方案

- 暗色主题: 黑金传奇 (深黑 + 真金)
- 亮色主题: 白金殿堂 (纯白 + 金色)
- 统一品牌色: 金色强调
- 提升专业金融感
This commit is contained in:
2026-03-30 03:14:00 +08:00
parent 81d6cdb1af
commit f32c48900b
87 changed files with 23415 additions and 23459 deletions

View File

@@ -1,36 +1,42 @@
import 'package:flutter/material.dart';
import 'package:shadcn_ui/shadcn_ui.dart';
/// Material Design 3 颜色系统 - "The Kinetic Vault" & "The Ethereal Terminal"
/// Material Design 3 颜色系统 - "黑金传奇" & "白金殿堂"
///
/// 深色主题: "The Kinetic Vault" - 赛博朋克风格
/// 浅色主题: "The Ethereal Terminal" - 高端金融科技风格
/// 深色主题: "黑金传奇" (Black & Gold)
/// 深邃黑底 + 专业蓝主色 + 真金强调 → 赛博朋克科技感 × 金融奢华感
/// 背景 #0A0E14 | 主色 #1E3A8A | 强调 #D4AF37
///
/// 浅色主题: "白金殿堂" (White & Gold)
/// 纯净白底 + 专业蓝主色 + 亮金强调 → 高端金融科技 × 尊贵品质感
/// 背景 #FAFAFA | 主色 #1E40AF | 强调 #FFD700
///
/// 设计原则:
/// - Material Design 3 配色方案
/// - Glass Panel 毛玻璃效果
/// - Neon Glow 霓虹光效
/// - Gold Glow 金色光效(原 Neon Glow
/// - 渐变 CTA: primary → primary_container (135度)
class AppColorScheme {
AppColorScheme._();
// ============================================
// 深色主题 - "The Kinetic Vault" (Material Design 3)
// 深色主题 - "黑金传奇" (Material Design 3)
// 背景 #0A0E14 | 主色 #1E3A8A | 强调 #D4AF37
// ============================================
/// 背景基色 -
static const Color darkBackground = Color(0xFF0b0e14);
/// 背景基色 - 深邃黑
static const Color darkBackground = Color(0xFF0A0E14);
/// Surface 层次 (从低到高) - Material Design 3 规范
static const Color darkSurfaceDim = Color(0xFF0b0e14);
static const Color darkSurfaceDim = Color(0xFF0A0E14);
static const Color darkSurfaceLowest = Color(0xFF000000);
static const Color darkSurfaceLow = Color(0xFF10131a);
static const Color darkSurface = Color(0xFF0b0e14);
static const Color darkSurfaceContainer = Color(0xFF161a21);
static const Color darkSurfaceContainerHigh = Color(0xFF1c2028);
static const Color darkSurfaceContainerHighest = Color(0xFF22262f);
static const Color darkSurfaceBright = Color(0xFF282c36);
static const Color darkSurfaceVariant = Color(0xFF22262f);
static const Color darkSurfaceLow = Color(0xFF0F1219);
static const Color darkSurface = Color(0xFF0A0E14);
static const Color darkSurfaceContainer = Color(0xFF151921);
static const Color darkSurfaceContainerHigh = Color(0xFF1B1F28);
static const Color darkSurfaceContainerHighest = Color(0xFF21252F);
static const Color darkSurfaceBright = Color(0xFF272B35);
static const Color darkSurfaceVariant = Color(0xFF21252F);
/// 兼容旧名称
static const Color darkSurfaceContainerLowest = darkSurfaceLowest;
@@ -42,27 +48,27 @@ class AppColorScheme {
static const Color darkOutline = Color(0xFF73757d);
static const Color darkOutlineVariant = Color(0xFF45484f);
/// Primary - Neon Cyan (青色 - 主要交互)
static const Color darkPrimary = Color(0xFF72dcff);
static const Color darkPrimaryDim = Color(0xFF00c3ed);
static const Color darkPrimaryContainer = Color(0xFF00d2ff);
static const Color darkPrimaryFixed = Color(0xFF00d2ff);
static const Color darkPrimaryFixedDim = Color(0xFF00c3ed);
static const Color darkOnPrimary = Color(0xFF004c5e);
static const Color darkOnPrimaryContainer = Color(0xFF004253);
static const Color darkOnPrimaryFixed = Color(0xFF002c38);
static const Color darkOnPrimaryFixedVariant = Color(0xFF004c5e);
/// Primary - 专业蓝 #1E3A8A (主要交互)
static const Color darkPrimary = Color(0xFF1E3A8A);
static const Color darkPrimaryDim = Color(0xFF1E40AF);
static const Color darkPrimaryContainer = Color(0xFF3B82F6);
static const Color darkPrimaryFixed = Color(0xFF3B82F6);
static const Color darkPrimaryFixedDim = Color(0xFF2563EB);
static const Color darkOnPrimary = Color(0xFFFFFFFF);
static const Color darkOnPrimaryContainer = Color(0xFFBFDBFE);
static const Color darkOnPrimaryFixed = Color(0xFFFFFFFF);
static const Color darkOnPrimaryFixedVariant = Color(0xFFE0E7FF);
/// Secondary - Electric Purple (紫色 - 次要强调)
static const Color darkSecondary = Color(0xFFdd8bfb);
static const Color darkSecondaryDim = Color(0xFFce7eec);
static const Color darkSecondaryContainer = Color(0xFF6e208c);
static const Color darkSecondaryFixed = Color(0xFFf2c1ff);
static const Color darkSecondaryFixedDim = Color(0xFFebadff);
static const Color darkOnSecondary = Color(0xFF4c0068);
static const Color darkOnSecondaryContainer = Color(0xFFf1bfff);
static const Color darkOnSecondaryFixed = Color(0xFF580078);
static const Color darkOnSecondaryFixedVariant = Color(0xFF792c97);
/// Secondary - 真金 #D4AF37 (黑金强调)
static const Color darkSecondary = Color(0xFFD4AF37);
static const Color darkSecondaryDim = Color(0xFFB8960E);
static const Color darkSecondaryContainer = Color(0xFFE8C84A);
static const Color darkSecondaryFixed = Color(0xFFE8C84A);
static const Color darkSecondaryFixedDim = Color(0xFFD4AF37);
static const Color darkOnSecondary = Color(0xFF1F2937);
static const Color darkOnSecondaryContainer = Color(0xFF1F2937);
static const Color darkOnSecondaryFixed = Color(0xFF1F2937);
static const Color darkOnSecondaryFixedVariant = Color(0xFF374151);
/// Tertiary - Neon Green (绿色 - 仅用于成功/盈利/买入)
static const Color darkTertiary = Color(0xFFafffd1);
@@ -89,36 +95,37 @@ class AppColorScheme {
static const Color darkOnBackground = Color(0xFFecedf6);
static const Color darkInverseSurface = Color(0xFFf9f9ff);
static const Color darkInverseOnSurface = Color(0xFF52555c);
static const Color darkInversePrimary = Color(0xFF00687f);
static const Color darkSurfaceTint = Color(0xFF72dcff);
static const Color darkInversePrimary = Color(0xFF1E40AF);
static const Color darkSurfaceTint = Color(0xFFD4AF37);
// ============================================
// 浅色主题 - "The Ethereal Terminal"
// 浅色主题 - "白金殿堂"
// 背景 #FAFAFA | 主色 #1E40AF | 强调 #FFD700
// ============================================
/// 背景基色 - 珍珠
static const Color lightBackground = Color(0xFFf5f7f9);
/// 背景基色 - 纯净
static const Color lightBackground = Color(0xFFFAFAFA);
/// Surface 层次 (从低到高)
static const Color lightSurfaceLowest = Color(0xFFffffff);
static const Color lightSurfaceLow = Color(0xFFeef1f3);
static const Color lightSurface = Color(0xFFf5f7f9);
static const Color lightSurfaceHigh = Color(0xFFe8ebef);
static const Color lightSurfaceHighest = Color(0xFFd9dde0);
static const Color lightSurfaceLow = Color(0xFFF5F5F5);
static const Color lightSurface = Color(0xFFFAFAFA);
static const Color lightSurfaceHigh = Color(0xFFF0F0F0);
static const Color lightSurfaceHighest = Color(0xFFE8E8E8);
/// Ghost Border
static const Color lightOutlineVariant = Color(0xFFc4c8cc);
static const Color lightOutlineVariant = Color(0xFFD0D0D0);
/// Primary - Plasma (主要交互)
static const Color lightPrimary = Color(0xFF0050d4);
static const Color lightPrimaryContainer = Color(0xFF7b9cff);
/// Primary - 专业蓝 #1E40AF (主要交互)
static const Color lightPrimary = Color(0xFF1E40AF);
static const Color lightPrimaryContainer = Color(0xFF3B82F6);
/// Secondary - Pulse indicator
static const Color lightSecondary = Color(0xFF8319da);
static const Color lightSecondaryContainer = Color(0xFFe8d4fa);
/// Secondary - 亮金 #FFD700 (白金强调色)
static const Color lightSecondary = Color(0xFFD4AF37);
static const Color lightSecondaryContainer = Color(0xFFFFE44D);
/// Tertiary - Success (买入/盈利)
static const Color lightTertiary = Color(0xFF00a878);
static const Color lightTertiary = Color(0xFF00875A);
static const Color lightTertiaryContainer = Color(0xFFd4f5e9);
/// 文本色
@@ -130,23 +137,23 @@ class AppColorScheme {
// Glass Panel 毛玻璃效果颜色
// ============================================
/// Glass Panel 背景色 - rgba(34, 38, 47, 0.4)
static const Color glassPanelBackground = Color(0x6622262f);
/// Glass Panel 背景色 - rgba(33, 37, 47, 0.4)
static const Color glassPanelBackground = Color(0x6621252F);
/// Glass Panel 边框色 - rgba(69, 72, 79, 0.15)
static const Color glassPanelBorder = Color(0x2645484f);
// ============================================
// Neon Glow 霓虹光效颜色
// Gold Glow 金色光效颜色(原 Neon Glow
// ============================================
/// Primary Glow - rgba(114, 220, 255, 0.15)
static const Color neonGlowPrimary = Color(0x2672dcff);
/// Primary Glow - 金色光晕 rgba(212, 175, 55, 0.15)
static const Color neonGlowPrimary = Color(0x26D4AF37);
/// Secondary Glow - rgba(221, 139, 251, 0.15)
static const Color neonGlowSecondary = Color(0x26dd8bfb);
/// Secondary Glow - 蓝色光晕 rgba(30, 58, 138, 0.15)
static const Color neonGlowSecondary = Color(0x261E3A8A);
/// Tertiary Glow - rgba(175, 255, 209, 0.2)
/// Tertiary Glow - 绿色光晕 rgba(175, 255, 209, 0.2)
static const Color neonGlowTertiary = Color(0x33afffd1);
// ============================================
@@ -217,7 +224,7 @@ class AppColorScheme {
end: Alignment(0.7, 0.7),
);
/// 浅色 CTA 渐变 (Plasma)
/// 浅色 CTA 渐变
static const LinearGradient lightCtaGradient = LinearGradient(
colors: [lightPrimary, lightPrimaryContainer],
begin: Alignment(-0.7, -0.7),
@@ -241,7 +248,7 @@ class AppColorScheme {
end: Alignment(0.7, 0.7),
);
/// 资产卡片渐变
/// 资产卡片渐变 - 蓝→金
static const LinearGradient assetCardGradient = LinearGradient(
colors: [darkPrimary, darkSecondary],
begin: Alignment.topLeft,
@@ -265,14 +272,14 @@ class AppColorScheme {
secondaryForeground: darkOnSurface,
muted: darkSurfaceContainerHigh,
mutedForeground: darkOnSurfaceVariant,
accent: darkPrimary.withValues(alpha: 0.15),
accentForeground: darkPrimary,
accent: darkSecondary.withValues(alpha: 0.15),
accentForeground: darkSecondary,
destructive: error,
destructiveForeground: darkOnSurface,
border: darkOutlineVariant.withValues(alpha: 0.15),
input: darkOutlineVariant.withValues(alpha: 0.15),
ring: darkPrimary,
selection: darkPrimary.withValues(alpha: 0.3),
ring: darkSecondary,
selection: darkSecondary.withValues(alpha: 0.3),
);
// ============================================
@@ -292,14 +299,14 @@ class AppColorScheme {
secondaryForeground: lightOnSurface,
muted: lightSurfaceHigh,
mutedForeground: lightOnSurfaceVariant,
accent: lightPrimary.withValues(alpha: 0.1),
accentForeground: lightPrimary,
accent: lightSecondary.withValues(alpha: 0.1),
accentForeground: lightSecondary,
destructive: error,
destructiveForeground: const Color(0xFFFFFFFF),
border: lightOutlineVariant.withValues(alpha: 0.5),
input: lightOutlineVariant.withValues(alpha: 0.3),
ring: lightPrimary,
selection: lightPrimary.withValues(alpha: 0.2),
ring: lightSecondary,
selection: lightSecondary.withValues(alpha: 0.2),
);
// ============================================
@@ -354,11 +361,11 @@ class AppColorScheme {
/// 浅色主题 Surface 色 (扩展)
static const Color lightSurfaceBright = Color(0xFFffffff);
static const Color lightSurfaceDim = Color(0xFFe8ebef);
static const Color lightSurfaceVariant = Color(0xFFe8ebef);
static const Color lightSurfaceContainer = Color(0xFFf0f2f4);
static const Color lightSurfaceContainerHigh = Color(0xFFe8ebef);
static const Color lightSurfaceContainerHighest = Color(0xFFd9dde0);
static const Color lightSurfaceDim = Color(0xFFF0F0F0);
static const Color lightSurfaceVariant = Color(0xFFF0F0F0);
static const Color lightSurfaceContainer = Color(0xFFF5F5F5);
static const Color lightSurfaceContainerHigh = Color(0xFFF0F0F0);
static const Color lightSurfaceContainerHighest = Color(0xFFE8E8E8);
static ColorScheme get lightMaterial => ColorScheme.light(
primary: lightPrimary,
@@ -389,7 +396,7 @@ class AppColorScheme {
onSurfaceVariant: lightOnSurfaceVariant,
outline: lightOutline,
outlineVariant: lightOutlineVariant,
inverseSurface: const Color(0xFF1c2028),
inverseSurface: const Color(0xFF1B1F28),
onInverseSurface: const Color(0xFFecedf6),
inversePrimary: darkPrimary,
surfaceTint: lightPrimary,

View File

@@ -26,7 +26,8 @@ class AppTheme {
elevation: 0,
scrolledUnderElevation: 0,
centerTitle: true,
titleTextStyle: GoogleFonts.spaceGrotesk(
// 【优化】使用 Inter 字体替代 Space Grotesk,提升专业金融感
titleTextStyle: GoogleFonts.inter(
fontSize: 18,
fontWeight: FontWeight.w600,
color: AppColorScheme.darkOnSurface,
@@ -80,7 +81,8 @@ class AppTheme {
borderRadius: BorderRadius.circular(AppRadius.xxl),
),
elevation: 0,
textStyle: GoogleFonts.manrope(
// 【优化】使用 Inter 字体替代 Manrope提升专业金融感
textStyle: GoogleFonts.inter(
fontSize: 16,
fontWeight: FontWeight.w600,
),
@@ -129,7 +131,8 @@ class AppTheme {
elevation: 0,
scrolledUnderElevation: 0,
centerTitle: true,
titleTextStyle: GoogleFonts.spaceGrotesk(
// 【优化】使用 Inter 字体替代 Space Grotesk,提升专业金融感
titleTextStyle: GoogleFonts.inter(
fontSize: 18,
fontWeight: FontWeight.w600,
color: AppColorScheme.lightOnSurface,
@@ -185,7 +188,8 @@ class AppTheme {
borderRadius: BorderRadius.circular(AppRadius.xxl),
),
elevation: 0,
textStyle: GoogleFonts.manrope(
// 【优化】使用 Inter 字体替代 Manrope提升专业金融感
textStyle: GoogleFonts.inter(
fontSize: 16,
fontWeight: FontWeight.w600,
),
@@ -218,17 +222,16 @@ class AppTheme {
/// "The Kinetic Vault" & "The Ethereal Terminal" 文字样式系统
///
/// Display/Headlines: Space Grotesk (编辑风格)
/// Body/Labels: Manrope (实用风格)
/// 【优化】统一使用 Inter 字体(专业金融风格,币安同款字体)
class AppTextStyles {
AppTextStyles._();
// ============================================
// Display - 编辑风格 (Space Grotesk)
// Display - 大标题
// ============================================
/// D1 - 大标题 (48px) - Hero moments
static TextStyle displayLarge(BuildContext context) => GoogleFonts.spaceGrotesk(
static TextStyle displayLarge(BuildContext context) => GoogleFonts.inter(
fontSize: 48,
fontWeight: FontWeight.w700,
color: Theme.of(context).colorScheme.onSurface,
@@ -237,7 +240,7 @@ class AppTextStyles {
);
/// D2 - 中标题 (36px)
static TextStyle displayMedium(BuildContext context) => GoogleFonts.spaceGrotesk(
static TextStyle displayMedium(BuildContext context) => GoogleFonts.inter(
fontSize: 36,
fontWeight: FontWeight.w600,
color: Theme.of(context).colorScheme.onSurface,
@@ -246,7 +249,7 @@ class AppTextStyles {
);
/// D3 - 小标题 (28px)
static TextStyle displaySmall(BuildContext context) => GoogleFonts.spaceGrotesk(
static TextStyle displaySmall(BuildContext context) => GoogleFonts.inter(
fontSize: 28,
fontWeight: FontWeight.w600,
color: Theme.of(context).colorScheme.onSurface,
@@ -254,24 +257,24 @@ class AppTextStyles {
);
// ============================================
// Headline - 编辑风格 (Space Grotesk)
// Headline - 标题
// ============================================
static TextStyle headlineLarge(BuildContext context) => GoogleFonts.spaceGrotesk(
static TextStyle headlineLarge(BuildContext context) => GoogleFonts.inter(
fontSize: 24,
fontWeight: FontWeight.w600,
color: Theme.of(context).colorScheme.onSurface,
height: 1.3,
);
static TextStyle headlineMedium(BuildContext context) => GoogleFonts.spaceGrotesk(
static TextStyle headlineMedium(BuildContext context) => GoogleFonts.inter(
fontSize: 20,
fontWeight: FontWeight.w600,
color: Theme.of(context).colorScheme.onSurface,
height: 1.35,
);
static TextStyle headlineSmall(BuildContext context) => GoogleFonts.spaceGrotesk(
static TextStyle headlineSmall(BuildContext context) => GoogleFonts.inter(
fontSize: 18,
fontWeight: FontWeight.w500,
color: Theme.of(context).colorScheme.onSurface,
@@ -279,24 +282,24 @@ class AppTextStyles {
);
// ============================================
// Body - 实用风格 (Manrope)
// Body - 正文
// ============================================
static TextStyle bodyLarge(BuildContext context) => GoogleFonts.manrope(
static TextStyle bodyLarge(BuildContext context) => GoogleFonts.inter(
fontSize: 16,
fontWeight: FontWeight.w400,
color: Theme.of(context).colorScheme.onSurface,
height: 1.5,
);
static TextStyle bodyMedium(BuildContext context) => GoogleFonts.manrope(
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.manrope(
static TextStyle bodySmall(BuildContext context) => GoogleFonts.inter(
fontSize: 12,
fontWeight: FontWeight.w400,
color: Theme.of(context).colorScheme.onSurfaceVariant,
@@ -304,24 +307,24 @@ class AppTextStyles {
);
// ============================================
// Label - 实用风格 (Manrope)
// Label - 标签
// ============================================
static TextStyle labelLarge(BuildContext context) => GoogleFonts.manrope(
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.manrope(
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.manrope(
static TextStyle labelSmall(BuildContext context) => GoogleFonts.inter(
fontSize: 11,
fontWeight: FontWeight.w500,
color: Theme.of(context).colorScheme.onSurfaceVariant,
@@ -329,10 +332,10 @@ class AppTextStyles {
);
// ============================================
// 数字/金额 - Space Grotesk (等宽特性)
// 数字/金额 - Inter (等宽特性)
// ============================================
static TextStyle numberLarge(BuildContext context) => GoogleFonts.spaceGrotesk(
static TextStyle numberLarge(BuildContext context) => GoogleFonts.inter(
fontSize: 24,
fontWeight: FontWeight.w600,
color: Theme.of(context).colorScheme.onSurface,
@@ -340,7 +343,7 @@ class AppTextStyles {
fontFeatures: const [FontFeature.tabularFigures()],
);
static TextStyle numberMedium(BuildContext context) => GoogleFonts.spaceGrotesk(
static TextStyle numberMedium(BuildContext context) => GoogleFonts.inter(
fontSize: 18,
fontWeight: FontWeight.w500,
color: Theme.of(context).colorScheme.onSurface,
@@ -348,7 +351,7 @@ class AppTextStyles {
fontFeatures: const [FontFeature.tabularFigures()],
);
static TextStyle numberSmall(BuildContext context) => GoogleFonts.spaceGrotesk(
static TextStyle numberSmall(BuildContext context) => GoogleFonts.inter(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Theme.of(context).colorScheme.onSurface,

View File

@@ -259,31 +259,8 @@ class _NeonButtonState extends State<NeonButton>
}
LinearGradient? get _gradient {
if (widget.type == NeonButtonType.outline) return null;
final isDark = Theme.of(context).brightness == Brightness.dark;
final colorScheme = Theme.of(context).colorScheme;
switch (widget.type) {
case NeonButtonType.primary:
return LinearGradient(
colors: [colorScheme.primary, colorScheme.primaryContainer],
begin: const Alignment(-0.7, -0.7),
end: const Alignment(0.7, 0.7),
);
case NeonButtonType.secondary:
return LinearGradient(
colors: [colorScheme.secondary, colorScheme.secondaryContainer ?? colorScheme.secondary],
begin: const Alignment(-0.7, -0.7),
end: const Alignment(0.7, 0.7),
);
case NeonButtonType.tertiary:
return AppColorScheme.getBuyGradient(isDark);
case NeonButtonType.error:
return AppColorScheme.sellGradient;
default:
return null;
}
// 【优化】移除所有渐变效果,改为纯色背景,提升专业金融感
return null;
}
@override

View File

@@ -129,24 +129,19 @@ class _BottomNavBar extends StatelessWidget {
),
],
),
child: ClipRRect(
borderRadius: BorderRadius.vertical(top: Radius.circular(AppRadius.xxl + AppSpacing.sm)),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: AppSpacing.md, sigmaY: AppSpacing.md),
child: SafeArea(
child: Padding(
padding: EdgeInsets.fromLTRB(AppSpacing.md, AppSpacing.sm, AppSpacing.md, AppSpacing.lg),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: items.asMap().entries.map((entry) {
return _NavItemWidget(
item: entry.value,
isSelected: entry.key == currentIndex,
onTap: () => onTap(entry.key),
);
}).toList(),
),
),
// 【优化】移除毛玻璃效果,保持简洁的半透明背景
child: SafeArea(
child: Padding(
padding: EdgeInsets.fromLTRB(AppSpacing.md, AppSpacing.sm, AppSpacing.md, AppSpacing.lg),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: items.asMap().entries.map((entry) {
return _NavItemWidget(
item: entry.value,
isSelected: entry.key == currentIndex,
onTap: () => onTap(entry.key),
);
}).toList(),
),
),
),