feat(theme): 重构颜色系统为双主题设计并添加渐变组件
- 引入 "The Kinetic Vault"(深色)和 "The Ethereal Terminal"(浅色)双主题系统 - 重构颜色方案,使用层次化 surface 容器替代边框,遵循无边框设计规则 - 添加渐变预设(CTA、买入/卖出、资产卡片)和渐变按钮组件 - 更新圆角系统,明确按钮、卡片、输入框和标签的圆角规范 - 统一文本样式系统,使用 Space Grotesk(标题)和 Manrope(正文)字体 - 更新现有组件(AssetCard、CoinCard、TradeButton)以遵循新设计规范 - 添加向后兼容的已废弃常量,确保现有代码正常运行
This commit is contained in:
@@ -1,8 +1,14 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:shadcn_ui/shadcn_ui.dart';
|
||||
import '../../core/theme/app_color_scheme.dart';
|
||||
import '../../core/theme/app_spacing.dart';
|
||||
|
||||
/// 币种卡片组件 - 用于显示币种信息
|
||||
///
|
||||
/// 设计规则:
|
||||
/// - 使用 surface 层次而非边框
|
||||
/// - 圆角: xl (16px) 卡片, sm (4px) 涨跌标签
|
||||
/// - 涨跌标签: 15% 透明度背景
|
||||
class CoinCard extends StatelessWidget {
|
||||
final String code;
|
||||
final String name;
|
||||
@@ -28,12 +34,12 @@ class CoinCard extends StatelessWidget {
|
||||
final theme = ShadTheme.of(context);
|
||||
|
||||
return ShadCard(
|
||||
padding: const EdgeInsets.all(16),
|
||||
padding: const EdgeInsets.all(AppSpacing.md),
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
child: Row(
|
||||
children: [
|
||||
// 图标
|
||||
// 图标 - 圆形
|
||||
Container(
|
||||
width: 44,
|
||||
height: 44,
|
||||
@@ -52,7 +58,7 @@ class CoinCard extends StatelessWidget {
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
const SizedBox(width: AppSpacing.sm),
|
||||
// 名称
|
||||
Expanded(
|
||||
child: Column(
|
||||
@@ -71,12 +77,12 @@ class CoinCard extends StatelessWidget {
|
||||
],
|
||||
),
|
||||
),
|
||||
// 涨跌幅
|
||||
// 涨跌幅 - Dynamic Chip
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
|
||||
decoration: BoxDecoration(
|
||||
color: getChangeBackgroundColor(isUp),
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
borderRadius: BorderRadius.circular(AppRadius.sm),
|
||||
),
|
||||
child: Text(
|
||||
change,
|
||||
|
||||
Reference in New Issue
Block a user