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:
iven
2026-06-02 09:11:46 +08:00
parent b320641d9c
commit 181bfb1f3e
20 changed files with 1410 additions and 351 deletions

View File

@@ -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!),
),
],
),
),
);
}