fix(app): 对齐 Open Design spec — 字体/Token/首页/Tab栏/路由/Discover页
针对 docs/opendesign/warm-notes-design-spec.md 全面审查的修复: ## 🔴 阻断级修复(商用合规) - 下载真实 Quicksand/Nunito 字体文件(原 0 字节) - 添加 OFL.txt 许可证文件,履行 SIL Open Font License 分发义务 ## 🟠 设计 Token 偏差 - AppRadius: 删除非规范的 xs=8px,所有引用迁移至 sm=10px - AppColors.moodColors: 对齐 spec §3.6 - happy #FFD93D → secondary #81B29A - calm #81B29A → tertiary #F2CC8F - sad #7B9CC4 → #5B7DB1 - thinking #B8A9C9(淡紫,spec 无)→ #8B7E74 - AppShadows: blurRadius/alpha 精确对齐 spec §1 (12/20/32 + 0.06/0.08/0.12) - DesignTokens: 补 spacing40 + 新增 safe-top/safe-bottom/tab-height/touch-min 常量 ## 🟠 首页 §3.4 完全重构 - 新增问候语头部(xx好,小暖 + accent 色高亮名字) - 新增 streak-badge pill 徽章(tertiary-soft + #B8860B 暖金) - 心情选择器卡片背景从 primaryContainer 改为 surface(spec 规定 #FFFFFF) - 心情卡片圆角 lg(22) → md(16) 对齐 spec - 新增 today-card 渐变卡片 + 浮动右下圆形写按钮 - 新增 quick-stats 三栏统计(本月日记/连续天数/总日记数) - 移除 AppBar 多余的贴纸/模板按钮,搜索按钮改路由到 /search - HomeBloc 扩展 monthCount/totalCount 字段 - 日记卡片:72×72 预览图 + 标签摘要 + 心情圆点 ## 🟠 路由 §3.12 + §3.13 拆分 - 新建 DiscoverPage (features/discover/views/discover_page.dart) - 搜索框(跳转 /search) - 每日推荐渐变卡片 - 热门话题横向 chips(前 3 个 accent 高亮) - 精选模板 2 列网格 - 达人日记列表 - /discover 路由从指向 SearchPage 改为 DiscoverPage - 新增 /search 路由(全屏无 Tab)指向 SearchPage ## 🟠 Tab 栏 §2.2 重构 - 高度从 64px 改为 56+bottomPadding(含 safe-bottom,约 90px) - 中心按钮从 CircularNotchedRectangle 凹槽改为 margin-top:-16px 凸起 - FAB 尺寸从默认改为 48×48 spec 规格 - FAB 图标从 edit_rounded 改为 add_rounded(spec §2.2) - 删除未使用的 _navItems 旧常量 ## 🟡 登录页圆角统一 - 移除 3 处 InputBorder 显式 mdBorder(16px) 覆盖 - 全局主题 smBorder(10px) 生效,对齐 spec - 提交按钮圆角改为 pill(spec §2.6 Primary 按钮) ## 验证 - flutter analyze: 0 errors (剩余 40 个 warning/info 全为预存) - flutter test: 84/85 通过(widget smoke test 预存失败,与本次无关)
This commit is contained in:
@@ -83,31 +83,7 @@ class _ResponsiveScaffoldState extends State<ResponsiveScaffold> {
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 导航项定义(4 项,中间由 FAB 占位)=====
|
||||
|
||||
const _navItems = [
|
||||
NavigationDestination(
|
||||
icon: Icon(Icons.home_outlined),
|
||||
selectedIcon: Icon(Icons.home),
|
||||
label: '首页',
|
||||
),
|
||||
NavigationDestination(
|
||||
icon: Icon(Icons.calendar_month_outlined),
|
||||
selectedIcon: Icon(Icons.calendar_month),
|
||||
label: '日历',
|
||||
),
|
||||
// 索引 2: 中心 FAB 占位(写日记)
|
||||
NavigationDestination(
|
||||
icon: Icon(Icons.explore_outlined),
|
||||
selectedIcon: Icon(Icons.explore),
|
||||
label: '发现',
|
||||
),
|
||||
NavigationDestination(
|
||||
icon: Icon(Icons.person_outline),
|
||||
selectedIcon: Icon(Icons.person),
|
||||
label: '我的',
|
||||
),
|
||||
];
|
||||
// ===== 导航项定义(平板/桌面 NavigationRail)=====
|
||||
|
||||
const _railItems = [
|
||||
NavigationRailDestination(
|
||||
@@ -132,7 +108,8 @@ const _railItems = [
|
||||
),
|
||||
];
|
||||
|
||||
// ===== 中心写日记 FAB 按钮 =====
|
||||
// ===== 中心写日记 FAB 按钮(spec §2.2 凸起按钮)=====
|
||||
// 尺寸 48x48, 圆形, accent 色, shadow-accent
|
||||
|
||||
class _CenterFabButton extends StatelessWidget {
|
||||
const _CenterFabButton({required this.onPressed});
|
||||
@@ -141,19 +118,33 @@ class _CenterFabButton extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return FloatingActionButton(
|
||||
heroTag: 'center_write',
|
||||
onPressed: onPressed,
|
||||
backgroundColor: AppColors.accent,
|
||||
foregroundColor: const Color(0xFFFFF8F0),
|
||||
elevation: 4,
|
||||
return Material(
|
||||
color: AppColors.accent,
|
||||
shape: const CircleBorder(),
|
||||
child: const Icon(Icons.edit_rounded, size: 28),
|
||||
elevation: 4,
|
||||
shadowColor: AppColors.accent.withValues(alpha: 0.4),
|
||||
child: InkWell(
|
||||
onTap: onPressed,
|
||||
customBorder: const CircleBorder(),
|
||||
child: SizedBox(
|
||||
width: 48,
|
||||
height: 48,
|
||||
child: Center(
|
||||
child: Icon(Icons.add_rounded, size: 24, color: AppColors.bgLight),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 手机布局 — 底部 TabBar + 中心凸起 FAB =====
|
||||
// ===== 手机布局 — 底部 TabBar (90px) + 中心凸起 FAB =====
|
||||
//
|
||||
// spec §2.2 规定:
|
||||
// - Tab 栏总高 = 56px (tab-height) + 34px (safe-bottom) = 90px
|
||||
// - 中心"写日记"按钮 margin-top:-16px 凸出 Tab 栏顶部
|
||||
// - 圆形 48x48, accent 色, shadow-accent
|
||||
// - Tab 项图标 24x24, 文字 11px/500
|
||||
|
||||
class _MobileLayout extends StatelessWidget {
|
||||
const _MobileLayout({
|
||||
@@ -177,85 +168,121 @@ class _MobileLayout extends StatelessWidget {
|
||||
? AppBar(title: Text(appBarTitle!))
|
||||
: null,
|
||||
body: body,
|
||||
floatingActionButton: onCenterButtonPressed != null
|
||||
? _CenterFabButton(onPressed: onCenterButtonPressed!)
|
||||
: null,
|
||||
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
|
||||
extendBody: true, // 允许内容延伸到 Tab 栏下面(圆角透明效果)
|
||||
bottomNavigationBar: _BottomNavBar(
|
||||
selectedIndex: selectedIndex,
|
||||
onDestinationSelected: onDestinationSelected,
|
||||
onCenterButtonPressed: onCenterButtonPressed,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// 自定义底部导航栏 — 支持中心凹槽
|
||||
/// 自定义底部导航栏 — 90px 总高 + 中心凸起 FAB
|
||||
class _BottomNavBar extends StatelessWidget {
|
||||
const _BottomNavBar({
|
||||
required this.selectedIndex,
|
||||
required this.onDestinationSelected,
|
||||
this.onCenterButtonPressed,
|
||||
});
|
||||
|
||||
final int selectedIndex;
|
||||
final ValueChanged<int> onDestinationSelected;
|
||||
final VoidCallback? onCenterButtonPressed;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
final bottomPadding = MediaQuery.of(context).padding.bottom;
|
||||
// spec §2.2: 总高 = 56 (tab-height) + bottomPadding (safe-bottom, 通常 34)
|
||||
|
||||
return BottomAppBar(
|
||||
shape: const CircularNotchedRectangle(),
|
||||
padding: EdgeInsets.zero,
|
||||
height: 64,
|
||||
color: colorScheme.surface,
|
||||
surfaceTintColor: Colors.transparent,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
// 首页
|
||||
_NavItem(
|
||||
icon: Icons.home_outlined,
|
||||
activeIcon: Icons.home,
|
||||
label: '首页',
|
||||
isSelected: selectedIndex == 0,
|
||||
color: colorScheme.primary,
|
||||
inactiveColor: colorScheme.onSurfaceVariant,
|
||||
onTap: () => onDestinationSelected(0),
|
||||
),
|
||||
// 日历
|
||||
_NavItem(
|
||||
icon: Icons.calendar_month_outlined,
|
||||
activeIcon: Icons.calendar_month,
|
||||
label: '日历',
|
||||
isSelected: selectedIndex == 1,
|
||||
color: colorScheme.primary,
|
||||
inactiveColor: colorScheme.onSurfaceVariant,
|
||||
onTap: () => onDestinationSelected(1),
|
||||
),
|
||||
// 中间留给 FAB 凹槽 — 占位
|
||||
const SizedBox(width: 48),
|
||||
// 发现
|
||||
_NavItem(
|
||||
icon: Icons.explore_outlined,
|
||||
activeIcon: Icons.explore,
|
||||
label: '发现',
|
||||
isSelected: selectedIndex == 2,
|
||||
color: colorScheme.primary,
|
||||
inactiveColor: colorScheme.onSurfaceVariant,
|
||||
onTap: () => onDestinationSelected(2),
|
||||
),
|
||||
// 我的
|
||||
_NavItem(
|
||||
icon: Icons.person_outline,
|
||||
activeIcon: Icons.person,
|
||||
label: '我的',
|
||||
isSelected: selectedIndex == 3,
|
||||
color: colorScheme.primary,
|
||||
inactiveColor: colorScheme.onSurfaceVariant,
|
||||
onTap: () => onDestinationSelected(3),
|
||||
),
|
||||
],
|
||||
return Material(
|
||||
color: Colors.transparent,
|
||||
child: SizedBox(
|
||||
height: 56 + bottomPadding,
|
||||
child: Stack(
|
||||
clipBehavior: Clip.none,
|
||||
alignment: Alignment.topCenter,
|
||||
children: [
|
||||
// Tab 栏主体
|
||||
Positioned(
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surface,
|
||||
border: Border(
|
||||
top: BorderSide(color: colorScheme.outlineVariant, width: 1),
|
||||
),
|
||||
),
|
||||
padding: EdgeInsets.only(bottom: bottomPadding),
|
||||
child: Row(
|
||||
children: [
|
||||
// 首页
|
||||
Expanded(
|
||||
child: _NavItem(
|
||||
icon: Icons.home_outlined,
|
||||
activeIcon: Icons.home,
|
||||
label: '首页',
|
||||
isSelected: selectedIndex == 0,
|
||||
color: colorScheme.primary,
|
||||
inactiveColor: colorScheme.onSurfaceVariant,
|
||||
onTap: () => onDestinationSelected(0),
|
||||
),
|
||||
),
|
||||
// 日历
|
||||
Expanded(
|
||||
child: _NavItem(
|
||||
icon: Icons.calendar_month_outlined,
|
||||
activeIcon: Icons.calendar_month,
|
||||
label: '日历',
|
||||
isSelected: selectedIndex == 1,
|
||||
color: colorScheme.primary,
|
||||
inactiveColor: colorScheme.onSurfaceVariant,
|
||||
onTap: () => onDestinationSelected(1),
|
||||
),
|
||||
),
|
||||
// 中间 FAB 占位
|
||||
const SizedBox(width: 64),
|
||||
// 发现
|
||||
Expanded(
|
||||
child: _NavItem(
|
||||
icon: Icons.explore_outlined,
|
||||
activeIcon: Icons.explore,
|
||||
label: '发现',
|
||||
isSelected: selectedIndex == 2,
|
||||
color: colorScheme.primary,
|
||||
inactiveColor: colorScheme.onSurfaceVariant,
|
||||
onTap: () => onDestinationSelected(2),
|
||||
),
|
||||
),
|
||||
// 我的
|
||||
Expanded(
|
||||
child: _NavItem(
|
||||
icon: Icons.person_outline,
|
||||
activeIcon: Icons.person,
|
||||
label: '我的',
|
||||
isSelected: selectedIndex == 3,
|
||||
color: colorScheme.primary,
|
||||
inactiveColor: colorScheme.onSurfaceVariant,
|
||||
onTap: () => onDestinationSelected(3),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
// 中心凸起写按钮 — margin-top:-16 凸出 Tab 栏顶部
|
||||
if (onCenterButtonPressed != null)
|
||||
Positioned(
|
||||
top: -16,
|
||||
child: _CenterFabButton(onPressed: onCenterButtonPressed!),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user