jif2.zhang
330e6585d9
实现设计文档 §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 等字段.
29 lines
1.1 KiB
React
29 lines
1.1 KiB
React
import { useState } from 'react'
|
|
import PageHeader from '../../components/PageHeader.jsx'
|
|
import SwipeTabs from '../../components/SwipeTabs.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('calendar')
|
|
const [date, setDate] = useState(() => toDateStr())
|
|
|
|
const tabs = [
|
|
{ key: 'calendar', label: '打卡', render: () => <MergedView date={date} onDateChange={setDate} /> },
|
|
{ key: 'list', label: '清单', render: () => <ListView /> },
|
|
]
|
|
|
|
return (
|
|
<div className="page-with-navbar">
|
|
<PageHeader title="打卡" />
|
|
<div className="checkin-content">
|
|
<SwipeTabs tabs={tabs} active={active} onChange={setActive} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|