feat(UI): 四 Tab 头部统一 + 清单模板分类 + 宏观 tab 顺序与溢出提示

头部统一
- 新增 PageHeader 组件: 高度 23px (原 NavBar 45px 的一半), 标题 12px 主色加粗, 背景取页面底色
- 打卡 / 宏观 / 监控 三页各自引用, 互不影响; 宏观与监控补齐「宏观」「监控」标题
- 「我」页移除 NavBar 空白条, 蓝色头像区直接贴顶 (不引用 PageHeader, 与其余三页解耦)
- 清理失效样式 .me-navbar

清单模板分类
- 分段由 2 项扩为 3 项: 进行中 / 已归档 / 模板; 右上角按钮随分段切换
- 模板独立增删改查: 新增 GET /templates/:id、PUT /templates/:id; 预置模板拒绝改删
- 模板按名称字母顺序排序 (Intl.Collator zh-Hans-CN, 中文按拼音/数字按数值), 前后端同口径
- 新建清单去掉场景选择器, 仅保留名称; scene 改为沿用模板自带场景
- 模板改为从右侧滑出 78vw 面板选择, 首项「不使用模板」

宏观 tab
- 顺序改为 报警 → 新闻 → 油价 → 经济数据 → 策略研究 → 经济文章, 默认选中新闻
- /macro 由路由直接重定向到 /macro/news, activeFromPath 兜底同样返回 news
- SwipeTabs 增加右侧溢出提示: 渐变遮罩 + 主色圆底箭头, 可点击向右翻页, 滚到末尾自动消失
- 切换 tab 时自动把激活项滚到可视区中央
This commit is contained in:
cheney
2026-10-23 16:40:32 +08:00
parent 5f41cb05b7
commit c765755906
11 changed files with 623 additions and 136 deletions
+4 -3
View File
@@ -1,12 +1,13 @@
import { useState } from 'react'
import { NavBar } from 'antd-mobile'
import PageHeader from '../../components/PageHeader.jsx'
import SwipeTabs from '../../components/SwipeTabs.jsx'
import HabitView from './HabitView.jsx'
import CalendarView from './CalendarView.jsx'
import ListView from './ListView.jsx'
import { toDateStr } from './date.js'
// 打卡页: 一个页面三个视图 —— 打卡(环形进度) / 日历(今天·昨天·明天) / 清单(场景检查)
// 打卡页: 三个视图 —— 打卡(环形进度) / 日历(今天·昨天·明天) / 清单(检查清单 + 模板)
// 注: 打卡与日历的合并视图正在设计确认中, 确认后此处收敛为 日历(含打卡) / 清单 两个视图
export default function CheckinPage() {
const [active, setActive] = useState('habit')
const [date, setDate] = useState(() => toDateStr())
@@ -19,7 +20,7 @@ export default function CheckinPage() {
return (
<div className="page-with-navbar">
<NavBar back={null}>打卡</NavBar>
<PageHeader title="打卡" />
<div className="checkin-content">
<SwipeTabs tabs={tabs} active={active} onChange={setActive} />
</div>