feat(ui): 应用新设计系统到 Flutter 项目
- 更新颜色系统为 Material Design 3 * Primary: #72dcff (青色) * Secondary: #dd8bfb (紫色) * Tertiary: #afffd1 (绿色) - 创建新的 UI 组件 * GlassPanel: 毛玻璃效果面板 * NeonGlow: 霓虹光效组件 * GradientButton: 渐变按钮组件 - 更新所有页面样式 * 交易页面 (trade_page.dart) * 行情页面 (market_page.dart) * 资产页面 (asset_page.dart) * 我的页面 (mine_page.dart) * 订单页面 (orders_page.dart) - 支持深色和浅色主题 - 所有 UI 文字使用中文 - 保持现有 API 接口不变 变更统计: - 9 个文件修改 - 1,893 行新增 - 691 行删除 - 3 个新组件
This commit is contained in:
@@ -1,52 +1,96 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:shadcn_ui/shadcn_ui.dart';
|
||||
|
||||
/// "The Kinetic Vault" & "The Ethereal Terminal" 双主题颜色系统
|
||||
/// Material Design 3 颜色系统 - "The Kinetic Vault" & "The Ethereal Terminal"
|
||||
///
|
||||
/// 深色主题: "The Kinetic Vault" - 高端加密编辑风格
|
||||
/// 深色主题: "The Kinetic Vault" - 赛博朋克风格
|
||||
/// 浅色主题: "The Ethereal Terminal" - 高端金融科技风格
|
||||
///
|
||||
/// 设计原则：
|
||||
/// - 无边框规则: 禁止 1px solid 边框，使用层次色变化
|
||||
/// - 层次化设计: 通过 surface-container 层次而非阴影
|
||||
/// - Material Design 3 配色方案
|
||||
/// - Glass Panel 毛玻璃效果
|
||||
/// - Neon Glow 霓虹光效
|
||||
/// - 渐变 CTA: primary → primary_container (135度)
|
||||
class AppColorScheme {
|
||||
AppColorScheme._();
|
||||
|
||||
// ============================================
|
||||
// 深色主题 - "The Kinetic Vault"
|
||||
// 深色主题 - "The Kinetic Vault" (Material Design 3)
|
||||
// ============================================
|
||||
|
||||
/// 背景基色 - 最深
|
||||
static const Color darkBackground = Color(0xFF0b0e14);
|
||||
|
||||
/// Surface 层次 (从低到高)
|
||||
static const Color darkSurfaceLowest = Color(0xFF0d1017);
|
||||
/// Surface 层次 (从低到高) - Material Design 3 规范
|
||||
static const Color darkSurfaceDim = Color(0xFF0b0e14);
|
||||
static const Color darkSurfaceLowest = Color(0xFF000000);
|
||||
static const Color darkSurfaceLow = Color(0xFF10131a);
|
||||
static const Color darkSurface = Color(0xFF151921);
|
||||
static const Color darkSurfaceHigh = Color(0xFF1a1f2a);
|
||||
static const Color darkSurfaceHighest = Color(0xFF22262f);
|
||||
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);
|
||||
|
||||
/// Ghost Border - 后备边框
|
||||
/// 兼容旧名称
|
||||
static const Color darkSurfaceContainerLowest = darkSurfaceLowest;
|
||||
static const Color darkSurfaceContainerLow = darkSurfaceLow;
|
||||
static const Color darkSurfaceHigh = darkSurfaceContainerHigh;
|
||||
static const Color darkSurfaceHighest = darkSurfaceContainerHighest;
|
||||
|
||||
/// Ghost Border
|
||||
static const Color darkOutline = Color(0xFF73757d);
|
||||
static const Color darkOutlineVariant = Color(0xFF45484f);
|
||||
|
||||
/// Primary - Neon Blue (主要交互)
|
||||
/// Primary - Neon Cyan (青色 - 主要交互)
|
||||
static const Color darkPrimary = Color(0xFF72dcff);
|
||||
static const Color darkPrimaryContainer = Color(0xFF4ac8f0);
|
||||
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);
|
||||
|
||||
/// Secondary - Electric Purple (次要强调)
|
||||
/// Secondary - Electric Purple (紫色 - 次要强调)
|
||||
static const Color darkSecondary = Color(0xFFdd8bfb);
|
||||
static const Color darkSecondaryContainer = Color(0xFF2d1f3d);
|
||||
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);
|
||||
|
||||
/// Tertiary - Emerald Green (仅用于成功/盈利/买入)
|
||||
/// Tertiary - Neon Green (绿色 - 仅用于成功/盈利/买入)
|
||||
static const Color darkTertiary = Color(0xFFafffd1);
|
||||
static const Color darkTertiaryContainer = Color(0xFF1a3d2d);
|
||||
static const Color darkTertiaryDim = Color(0xFF00efa0);
|
||||
static const Color darkTertiaryContainer = Color(0xFF00ffab);
|
||||
static const Color darkTertiaryFixed = Color(0xFF00ffab);
|
||||
static const Color darkTertiaryFixedDim = Color(0xFF00efa0);
|
||||
static const Color darkOnTertiary = Color(0xFF006642);
|
||||
static const Color darkOnTertiaryContainer = Color(0xFF005c3b);
|
||||
static const Color darkOnTertiaryFixed = Color(0xFF00472d);
|
||||
static const Color darkOnTertiaryFixedVariant = Color(0xFF006742);
|
||||
|
||||
/// Error - Neon Red (红色 - 错误/卖出)
|
||||
static const Color darkError = Color(0xFFff716c);
|
||||
static const Color darkErrorDim = Color(0xFFd7383b);
|
||||
static const Color darkErrorContainer = Color(0xFF9f0519);
|
||||
static const Color darkOnError = Color(0xFF490006);
|
||||
static const Color darkOnErrorContainer = Color(0xFFffa8a3);
|
||||
|
||||
/// 文本色
|
||||
static const Color darkOnSurface = Color(0xFFecedf6);
|
||||
static const Color darkOnSurfaceVariant = Color(0xFFa9abb3);
|
||||
static const Color darkOnSurfaceMuted = Color(0xFF6b6d75);
|
||||
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);
|
||||
|
||||
// ============================================
|
||||
// 浅色主题 - "The Ethereal Terminal"
|
||||
@@ -56,11 +100,11 @@ class AppColorScheme {
|
||||
static const Color lightBackground = Color(0xFFf5f7f9);
|
||||
|
||||
/// Surface 层次 (从低到高)
|
||||
static const Color lightSurfaceLowest = Color(0xFFffffff); // Elevated (pop)
|
||||
static const Color lightSurfaceLow = Color(0xFFeef1f3); // Softly recessed
|
||||
static const Color lightSurface = Color(0xFFf5f7f9); // Base canvas
|
||||
static const Color lightSurfaceHigh = Color(0xFFe8ebef); // Elevated
|
||||
static const Color lightSurfaceHighest = Color(0xFFd9dde0); // Navigation anchor
|
||||
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);
|
||||
|
||||
/// Ghost Border
|
||||
static const Color lightOutlineVariant = Color(0xFFc4c8cc);
|
||||
@@ -82,6 +126,29 @@ class AppColorScheme {
|
||||
static const Color lightOnSurfaceVariant = Color(0xFF5a5d60);
|
||||
static const Color lightOnSurfaceMuted = Color(0xFF8a8d90);
|
||||
|
||||
// ============================================
|
||||
// Glass Panel 毛玻璃效果颜色
|
||||
// ============================================
|
||||
|
||||
/// Glass Panel 背景色 - rgba(34, 38, 47, 0.4)
|
||||
static const Color glassPanelBackground = Color(0x6622262f);
|
||||
|
||||
/// Glass Panel 边框色 - rgba(69, 72, 79, 0.15)
|
||||
static const Color glassPanelBorder = Color(0x2645484f);
|
||||
|
||||
// ============================================
|
||||
// Neon Glow 霓虹光效颜色
|
||||
// ============================================
|
||||
|
||||
/// Primary Glow - rgba(114, 220, 255, 0.15)
|
||||
static const Color neonGlowPrimary = Color(0x2672dcff);
|
||||
|
||||
/// Secondary Glow - rgba(221, 139, 251, 0.15)
|
||||
static const Color neonGlowSecondary = Color(0x26dd8bfb);
|
||||
|
||||
/// Tertiary Glow - rgba(175, 255, 209, 0.2)
|
||||
static const Color neonGlowTertiary = Color(0x33afffd1);
|
||||
|
||||
// ============================================
|
||||
// 语义色 - 明暗通用
|
||||
// ============================================
|
||||
@@ -90,10 +157,13 @@ class AppColorScheme {
|
||||
static const Color up = darkTertiary;
|
||||
static const Color success = darkTertiary;
|
||||
|
||||
/// 跌/卖出/错误
|
||||
static const Color down = Color(0xFFFF5252);
|
||||
/// 跌/卖出/错误 - 使用 Material Design 3 error
|
||||
static const Color down = Color(0xFFff716c);
|
||||
static const Color error = down;
|
||||
|
||||
/// 静默/禁用/次要
|
||||
static const Color muted = darkOnSurfaceVariant;
|
||||
|
||||
/// 警告
|
||||
static const Color warning = Color(0xFFFF9800);
|
||||
|
||||
@@ -123,14 +193,14 @@ class AppColorScheme {
|
||||
|
||||
/// 买入按钮渐变
|
||||
static const LinearGradient buyGradient = LinearGradient(
|
||||
colors: [darkTertiary, Color(0xFF7de8b8)],
|
||||
colors: [darkTertiary, darkTertiaryContainer],
|
||||
begin: Alignment(-0.7, -0.7),
|
||||
end: Alignment(0.7, 0.7),
|
||||
);
|
||||
|
||||
/// 卖出按钮渐变
|
||||
static const LinearGradient sellGradient = LinearGradient(
|
||||
colors: [down, Color(0xFFe84545)],
|
||||
colors: [darkError, darkErrorDim],
|
||||
begin: Alignment(-0.7, -0.7),
|
||||
end: Alignment(0.7, 0.7),
|
||||
);
|
||||
@@ -149,15 +219,15 @@ class AppColorScheme {
|
||||
static ShadColorScheme get darkShad => ShadColorScheme(
|
||||
background: darkBackground,
|
||||
foreground: darkOnSurface,
|
||||
card: darkSurface,
|
||||
card: darkSurfaceContainer,
|
||||
cardForeground: darkOnSurface,
|
||||
popover: darkSurfaceHigh,
|
||||
popover: darkSurfaceContainerHigh,
|
||||
popoverForeground: darkOnSurface,
|
||||
primary: darkPrimary,
|
||||
primaryForeground: darkBackground,
|
||||
primaryForeground: darkOnPrimary,
|
||||
secondary: darkSecondary,
|
||||
secondaryForeground: darkOnSurface,
|
||||
muted: darkSurfaceHigh,
|
||||
muted: darkSurfaceContainerHigh,
|
||||
mutedForeground: darkOnSurfaceVariant,
|
||||
accent: darkPrimary.withValues(alpha: 0.15),
|
||||
accentForeground: darkPrimary,
|
||||
@@ -181,7 +251,7 @@ class AppColorScheme {
|
||||
popover: lightSurfaceLowest,
|
||||
popoverForeground: lightOnSurface,
|
||||
primary: lightPrimary,
|
||||
primaryForeground: Color(0xFFFFFFFF),
|
||||
primaryForeground: const Color(0xFFFFFFFF),
|
||||
secondary: lightSecondary,
|
||||
secondaryForeground: lightOnSurface,
|
||||
muted: lightSurfaceHigh,
|
||||
@@ -189,7 +259,7 @@ class AppColorScheme {
|
||||
accent: lightPrimary.withValues(alpha: 0.1),
|
||||
accentForeground: lightPrimary,
|
||||
destructive: error,
|
||||
destructiveForeground: Color(0xFFFFFFFF),
|
||||
destructiveForeground: const Color(0xFFFFFFFF),
|
||||
border: lightOutlineVariant.withValues(alpha: 0.5),
|
||||
input: lightOutlineVariant.withValues(alpha: 0.3),
|
||||
ring: lightPrimary,
|
||||
@@ -197,26 +267,42 @@ class AppColorScheme {
|
||||
);
|
||||
|
||||
// ============================================
|
||||
// Material ColorScheme - 深色主题
|
||||
// Material ColorScheme - 深色主题 (Material Design 3)
|
||||
// ============================================
|
||||
|
||||
static ColorScheme get darkMaterial => ColorScheme.dark(
|
||||
primary: darkPrimary,
|
||||
onPrimary: darkBackground,
|
||||
onPrimary: darkOnPrimary,
|
||||
primaryContainer: darkPrimaryContainer,
|
||||
onPrimaryContainer: darkOnPrimaryContainer,
|
||||
secondary: darkSecondary,
|
||||
onSecondary: darkOnSurface,
|
||||
onSecondary: darkOnSecondary,
|
||||
secondaryContainer: darkSecondaryContainer,
|
||||
onSecondaryContainer: darkOnSecondaryContainer,
|
||||
tertiary: darkTertiary,
|
||||
onTertiary: darkBackground,
|
||||
error: error,
|
||||
onError: darkOnSurface,
|
||||
onTertiary: darkOnTertiary,
|
||||
tertiaryContainer: darkTertiaryContainer,
|
||||
onTertiaryContainer: darkOnTertiaryContainer,
|
||||
error: darkError,
|
||||
onError: darkOnError,
|
||||
errorContainer: darkErrorContainer,
|
||||
onErrorContainer: darkOnErrorContainer,
|
||||
surface: darkSurface,
|
||||
onSurface: darkOnSurface,
|
||||
surfaceDim: darkSurfaceDim,
|
||||
surfaceBright: darkSurfaceBright,
|
||||
surfaceContainerLowest: darkSurfaceLowest,
|
||||
surfaceContainerLow: darkSurfaceLow,
|
||||
surfaceContainer: darkSurface,
|
||||
surfaceContainerHigh: darkSurfaceHigh,
|
||||
surfaceContainerHighest: darkSurfaceHighest,
|
||||
surfaceContainer: darkSurfaceContainer,
|
||||
surfaceContainerHigh: darkSurfaceContainerHigh,
|
||||
surfaceContainerHighest: darkSurfaceContainerHighest,
|
||||
onSurfaceVariant: darkOnSurfaceVariant,
|
||||
outline: darkOutline,
|
||||
outlineVariant: darkOutlineVariant,
|
||||
inverseSurface: darkInverseSurface,
|
||||
onInverseSurface: darkInverseOnSurface,
|
||||
inversePrimary: darkInversePrimary,
|
||||
surfaceTint: darkSurfaceTint,
|
||||
);
|
||||
|
||||
// ============================================
|
||||
@@ -225,13 +311,13 @@ class AppColorScheme {
|
||||
|
||||
static ColorScheme get lightMaterial => ColorScheme.light(
|
||||
primary: lightPrimary,
|
||||
onPrimary: Color(0xFFFFFFFF),
|
||||
onPrimary: const Color(0xFFFFFFFF),
|
||||
secondary: lightSecondary,
|
||||
onSecondary: Color(0xFFFFFFFF),
|
||||
onSecondary: const Color(0xFFFFFFFF),
|
||||
tertiary: lightTertiary,
|
||||
onTertiary: Color(0xFFFFFFFF),
|
||||
onTertiary: const Color(0xFFFFFFFF),
|
||||
error: error,
|
||||
onError: Color(0xFFFFFFFF),
|
||||
onError: const Color(0xFFFFFFFF),
|
||||
surface: lightSurface,
|
||||
onSurface: lightOnSurface,
|
||||
surfaceContainerLowest: lightSurfaceLowest,
|
||||
@@ -255,14 +341,14 @@ class AppColorScheme {
|
||||
@Deprecated('Use darkBackground instead')
|
||||
static const Color _darkBackground = darkBackground;
|
||||
|
||||
@Deprecated('Use darkSurface instead')
|
||||
static const Color _darkCardBackground = darkSurface;
|
||||
@Deprecated('Use darkSurfaceContainer instead')
|
||||
static const Color _darkCardBackground = darkSurfaceContainer;
|
||||
|
||||
@Deprecated('Use darkSurfaceHigh instead')
|
||||
static const Color _darkSecondary = darkSurfaceHigh;
|
||||
@Deprecated('Use darkSurfaceContainerHigh instead')
|
||||
static const Color _darkSecondary = darkSurfaceContainerHigh;
|
||||
|
||||
@Deprecated('Use darkSurfaceHigh instead')
|
||||
static const Color _darkMuted = darkSurfaceHigh;
|
||||
@Deprecated('Use darkSurfaceContainerHigh instead')
|
||||
static const Color _darkMuted = darkSurfaceContainerHigh;
|
||||
|
||||
@Deprecated('Use darkOutlineVariant instead')
|
||||
static const Color _darkBorder = darkOutlineVariant;
|
||||
|
||||
Reference in New Issue
Block a user