feat(V0.2): 打卡与日历合并为单视图, 打卡内容按 每天/每周/每月 分组

实现设计文档 §11.5「日历与打卡合并」待确认项 (界面设计.html 2.12 ②).

结构:
- CheckinPage 由 3 个 tab 收敛为 2 个: 打卡(含日历) / 清单
- 新增 MergedView.jsx: 上为月历, 下为当日打卡项
  (原 CalendarView + HabitView 的展示/交互合并到一个组件)

按规格落地:
- 月历: 月份切换 + 回到今天; 去掉「昨天/今天/明天」分段; 日期格 38→31px
- 分组: 每天 → 每周 → 每月, 组标题左侧 3px 主色竖条 + 右侧项数; 去掉「每年」分组
  (若存在历史 year 项则归入"其它周期"分组, 避免数据凭空消失)
- 卡片紧凑化: 内边距 12→8px, 环形 58→42px (环宽 6→5), 间距 10→7px
- 操作: 撤销 / 编辑 / 归档 由卡片底部三个文字链接收进「⋯」底部面板
- 联动: 点日期即切换当日数据; 未来日期只读, 按钮灰显「计划」
- 组内仍按「未完成在前、已完成在后」排序 (F-CK-16)

样式: globals.css 新增 .mv-* 段 (月历/分组/紧凑卡片/操作面板), 数值与设计稿一致.

服务端无需改动: habits 接口已返回 period/periodLabel/expectedPerDay/canCheck 等字段.
This commit is contained in:
jif2.zhang
2026-10-24 08:30:48 +08:00
parent 99cedce4ed
commit 330e6585d9
3 changed files with 490 additions and 7 deletions
+6 -7
View File
@@ -1,20 +1,19 @@
import { useState } from 'react'
import PageHeader from '../../components/PageHeader.jsx'
import SwipeTabs from '../../components/SwipeTabs.jsx'
import HabitView from './HabitView.jsx'
import CalendarView from './CalendarView.jsx'
import MergedView from './MergedView.jsx'
import ListView from './ListView.jsx'
import { toDateStr } from './date.js'
// 打卡页: 三个视图 —— 打卡(环形进度) / 日历(今天·昨天·明天) / 清单(检查清单 + 模板)
// 注: 打卡与日历的合并视图正在设计确认中, 确认后此处收敛为 日历(含打卡) / 清单 两个视图
// 打卡页: 两个视图 —— 日历(含打卡) / 清单
// V0.2.1 界面调整 (设计文档 §11.5): 原「打卡」与「日历」两个 tab 合并为一个视图,
// 上日历下打卡、按 每天/每周/每月 分组、去掉「昨天今天明天」分段.
export default function CheckinPage() {
const [active, setActive] = useState('habit')
const [active, setActive] = useState('calendar')
const [date, setDate] = useState(() => toDateStr())
const tabs = [
{ key: 'habit', label: '打卡', render: () => <HabitView date={date} /> },
{ key: 'calendar', label: '日历', render: () => <CalendarView date={date} onDateChange={setDate} /> },
{ key: 'calendar', label: '打卡', render: () => <MergedView date={date} onDateChange={setDate} /> },
{ key: 'list', label: '清单', render: () => <ListView /> },
]