277 lines
7.3 KiB
Dart
277 lines
7.3 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
/// 颜色定义 - 精确还原 Profile PRD
|
|
class AppColors {
|
|
// 文字颜色
|
|
static const Color textPrimary = Color(0xFF1F2937);
|
|
static const Color textSecondary = Color(0xFF9CA3AF);
|
|
static const Color textHint = Color(0xFFD1D5DB); // Arrow icon color
|
|
|
|
// 背景颜色
|
|
static const Color background = Color(0xFFFAFBFC);
|
|
static const Color cardSurface = Color(
|
|
0xCCFFFFFF,
|
|
); // rgba(255, 255, 255, 0.8)
|
|
|
|
// Story Page
|
|
static const Color storyBackground = Color(0xFFFDF9F3);
|
|
static const Color storyTitle = Color(0xFF4B2404);
|
|
static const Color storyText = Color(0xFF374151);
|
|
|
|
// Bookshelf (Story Book) - CSS .story-book, .story-slot
|
|
static const Color bookshelfBg = Color(
|
|
0x8CFFFFFF,
|
|
); // rgba(255, 255, 255, 0.55)
|
|
static const Color bookshelfBorder = Color(
|
|
0x99FFFFFF,
|
|
); // rgba(255, 255, 255, 0.6)
|
|
static const Color bookCountBg = Color(
|
|
0x80FFFFFF,
|
|
); // rgba(255, 255, 255, 0.5)
|
|
static const Color slotBg = Color(0x99FFFFFF); // rgba(255, 255, 255, 0.6)
|
|
static const Color slotClickableBg = Color(
|
|
0x66FFFFFF,
|
|
); // rgba(255, 255, 255, 0.4)
|
|
static const Color slotBorder = Color(0x0D000000); // rgba(0, 0, 0, 0.05)
|
|
static const Color slotTitleBarBg = Color(0x99000000); // rgba(0, 0, 0, 0.6)
|
|
static const Color slotFilledShadow = Color(0x1A000000); // rgba(0, 0, 0, 0.1)
|
|
static const Color emptyPlusColor = Color(0xFF9CA3AF);
|
|
static const Color bookTitleColor = Color(0xFF1F2937);
|
|
static const Color bookCountColor = Color(0xFF6B7280);
|
|
|
|
// 状态颜色
|
|
static const Color notificationDot = Color(0xFFEF4444);
|
|
static const Color badgeNew = Color(0xFFEF4444);
|
|
|
|
// 按钮/交互
|
|
static const Color iconBtnBg = Color(0x40FFFFFF); // rgba(255, 255, 255, 0.25)
|
|
static const Color iconBtnBorder = Color(
|
|
0x66FFFFFF,
|
|
); // rgba(255, 255, 255, 0.4)
|
|
|
|
// 危险操作
|
|
static const Color danger = Color(0xFFEF4444);
|
|
|
|
// 表单 & 列表
|
|
static const Color formLabel = Color(0xFF6B7280);
|
|
static const Color sectionTitle = Color(0xFF9CA3AF);
|
|
static const Color divider = Color(0x0D000000); // rgba(0, 0, 0, 0.05)
|
|
|
|
// 渐变色 (Avatar & Buttons)
|
|
static const List<Color> avatarGradient = [
|
|
Color(0xFFECCFA8),
|
|
Color(0xFFC99672),
|
|
];
|
|
static const List<Color> saveBtnGradient = [
|
|
Color(0xFFECCFA8),
|
|
Color(0xFFC99672),
|
|
];
|
|
static const List<Color> btnCapybaraGradient = [
|
|
Color(0xFFECCFA8),
|
|
Color(0xFFC99672),
|
|
];
|
|
|
|
// 产品卡片渐变
|
|
static const List<Color> gradientCapybara = [
|
|
Color(0xFFE6B98D),
|
|
Color(0xFFE8C9A8),
|
|
Color(0xFFD4A373),
|
|
Color(0xFFB07D5A),
|
|
];
|
|
static const List<Color> gradientBadgeAI = [
|
|
Color(0xFF22D3EE),
|
|
Color(0xFF60A5FA),
|
|
Color(0xFF818CF8),
|
|
Color(0xFFA78BFA),
|
|
];
|
|
static const List<Color> gradientBadgeBasic = [
|
|
Color(0xFFC084FC),
|
|
Color(0xFFD8B4FE),
|
|
Color(0xFFC4B5FD),
|
|
Color(0xFFA78BFA),
|
|
];
|
|
static const List<Color> gradientBracelet = [
|
|
Color(0xFFFDBA74),
|
|
Color(0xFFFB923C),
|
|
Color(0xFFFBAF85),
|
|
Color(0xFFE07B54),
|
|
];
|
|
static const List<Color> gradientVSinger = [
|
|
Color(0xFF34D399),
|
|
Color(0xFF5EEAD4),
|
|
Color(0xFF22D3EE),
|
|
Color(0xFF2DD4BF),
|
|
];
|
|
|
|
// 遮罩
|
|
static const Color overlay = Color(0x80000000); // implied for modal overlay
|
|
}
|
|
|
|
/// 字体样式 - Inter
|
|
class AppTextStyles {
|
|
// Profile Title
|
|
static const TextStyle title = TextStyle(
|
|
fontFamily: 'Inter',
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.w600,
|
|
color: AppColors.textPrimary,
|
|
);
|
|
|
|
// User Name
|
|
static const TextStyle userName = TextStyle(
|
|
fontFamily: 'Inter',
|
|
fontSize: 20,
|
|
fontWeight: FontWeight.w600,
|
|
color: AppColors.textPrimary,
|
|
);
|
|
|
|
// User ID
|
|
static const TextStyle userId = TextStyle(
|
|
fontFamily: 'Inter',
|
|
fontSize: 13,
|
|
fontWeight: FontWeight.w400,
|
|
color: AppColors.textSecondary,
|
|
);
|
|
|
|
// Menu Text
|
|
static const TextStyle menuText = TextStyle(
|
|
fontFamily: 'Inter',
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.w400,
|
|
color: AppColors.textPrimary,
|
|
);
|
|
|
|
// Badge Text
|
|
static const TextStyle badge = TextStyle(
|
|
fontFamily: 'Inter',
|
|
fontSize: 10,
|
|
fontWeight: FontWeight.w400,
|
|
color: Colors.white,
|
|
);
|
|
|
|
// Modal Title
|
|
static const TextStyle modalTitle = TextStyle(
|
|
fontFamily: 'Inter',
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.w600,
|
|
color: AppColors.textPrimary,
|
|
);
|
|
|
|
// Book specific styles
|
|
static const TextStyle bookTitle = TextStyle(
|
|
fontFamily: 'Inter',
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.w700,
|
|
color: AppColors.textPrimary,
|
|
);
|
|
|
|
static const TextStyle bookCount = TextStyle(
|
|
fontFamily: 'Inter',
|
|
fontSize: 13,
|
|
fontWeight: FontWeight.w600,
|
|
color: AppColors.textSecondary,
|
|
);
|
|
|
|
static const TextStyle slotTitle = TextStyle(
|
|
fontFamily: 'Inter',
|
|
fontSize: 10,
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.w400,
|
|
);
|
|
|
|
// PRD: font-size: 24px, color: #9CA3AF, font-weight: 300, opacity: 0.7
|
|
static const TextStyle emptyPlus = TextStyle(
|
|
fontSize: 24,
|
|
fontWeight: FontWeight.w300,
|
|
color: Color(0xB39CA3AF), // #9CA3AF with 0.7 opacity
|
|
);
|
|
|
|
static const TextStyle createStoryBtn = TextStyle(
|
|
fontSize: 17,
|
|
fontWeight: FontWeight.w600,
|
|
color: Colors.white,
|
|
);
|
|
}
|
|
|
|
/// 间距定义
|
|
class AppSpacing {
|
|
static const double xs = 4.0;
|
|
static const double sm = 8.0;
|
|
static const double md = 16.0;
|
|
static const double lg = 20.0;
|
|
static const double xl = 24.0;
|
|
}
|
|
|
|
/// 圆角定义
|
|
class AppRadius {
|
|
static const double card = 20.0;
|
|
static const double button = 22.0; // 44px height / 2
|
|
static const double avatar = 32.0; // 64px size / 2
|
|
static const double badge = 10.0;
|
|
}
|
|
|
|
/// 阴影定义
|
|
class AppShadows {
|
|
static const BoxShadow card = BoxShadow(
|
|
color: Color(0x148B5E3C), // rgba(139, 94, 60, 0.08)
|
|
blurRadius: 20,
|
|
offset: Offset(0, 4),
|
|
);
|
|
|
|
static const BoxShadow btnCapybara = BoxShadow(
|
|
color: Color(0x59C99672), // rgba(201, 150, 114, 0.35)
|
|
blurRadius: 15,
|
|
offset: Offset(0, 4),
|
|
);
|
|
|
|
static const BoxShadow storyBook = BoxShadow(
|
|
color: Color(0x08000000), // rgba(0,0,0,0.03)
|
|
blurRadius: 40,
|
|
offset: Offset(0, 10),
|
|
);
|
|
|
|
static const BoxShadow storySlotFilled = BoxShadow(
|
|
color: Color(0x1A000000), // rgba(0,0,0,0.1)
|
|
blurRadius: 12,
|
|
offset: Offset(0, 4),
|
|
);
|
|
|
|
static const List<BoxShadow> createBtn = [
|
|
BoxShadow(color: Color(0x59C99672), blurRadius: 15), // glow
|
|
BoxShadow(color: Color(0x40C99672), blurRadius: 30), // outer glow
|
|
BoxShadow(
|
|
color: Color(0x66C99672),
|
|
blurRadius: 20,
|
|
offset: Offset(0, 6),
|
|
), // depth
|
|
];
|
|
}
|
|
|
|
/// Story Book Spacing
|
|
class StoryBookSpacing {
|
|
static const double bookPadding = 24.0;
|
|
static const double gridGap = 12.0;
|
|
static const double bookCoverMarginBottom = 20.0;
|
|
static const EdgeInsets bookCountPadding = EdgeInsets.symmetric(
|
|
horizontal: 10,
|
|
vertical: 4,
|
|
);
|
|
static const EdgeInsets titleBarPadding = EdgeInsets.symmetric(
|
|
horizontal: 6,
|
|
vertical: 4,
|
|
);
|
|
// PRD: padding: 16px 48px
|
|
static const EdgeInsets createBtnPadding = EdgeInsets.symmetric(
|
|
horizontal: 48, // PRD: 48px
|
|
vertical: 16, // PRD: 16px
|
|
);
|
|
}
|
|
|
|
/// Story Book Radius
|
|
class StoryBookRadius {
|
|
static const double book = 24.0;
|
|
static const double slot = 12.0;
|
|
static const double bookCount = 12.0;
|
|
static const double createBtn = 29.0;
|
|
}
|