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
@@ -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 /> },
|
||||
]
|
||||
|
||||
|
||||
@@ -0,0 +1,415 @@
|
||||
// 打卡 · 日历与打卡合并视图 (V0.2.1 界面调整, 设计文档 §11.5)
|
||||
// - 上: 月历 (月份切换 + 回到今天), 去掉「昨天/今天/明天」分段
|
||||
// - 下: 当日打卡项, 按 每天 / 每周 / 每月 分组 (去掉「每年」分组)
|
||||
// - 卡片紧凑化: 内边距 8px, 环形 42px/环宽 5, 间距 7px
|
||||
// - 撤销 / 编辑 / 归档 收进「⋯」底部面板
|
||||
// - 未来日期只读, 按钮灰显「计划」
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import {
|
||||
Button, Dialog, DotLoading, Empty, Input, Popup, Selector, Stepper, Toast,
|
||||
} from 'antd-mobile'
|
||||
import RingProgress, { Celebrate } from '../../components/RingProgress.jsx'
|
||||
import { checkinApi } from '../../api/checkin.js'
|
||||
import useRefreshOnVisible from '../../hooks/useRefreshOnVisible.js'
|
||||
import {
|
||||
toDateStr, addDays, addMonths, monthGrid, weekdayLabels, dayLabel, fmtMonth,
|
||||
} from './date.js'
|
||||
|
||||
// 分组顺序: 每天 → 每周 → 每月 (去掉每年)
|
||||
const GROUP_ORDER = ['day', 'week', 'month']
|
||||
const GROUP_LABEL = { day: '每天', week: '每周', month: '每月' }
|
||||
|
||||
const PERIOD_OPTIONS = [
|
||||
{ label: '每天', value: 'day' },
|
||||
{ label: '每周', value: 'week' },
|
||||
{ label: '每月', value: 'month' },
|
||||
{ label: '每年', value: 'year' },
|
||||
]
|
||||
|
||||
const COLORS = ['#1677ff', '#00b578', '#ff8f1f', '#ff3141', '#a855f7', '#14b8a6', '#f43f9e']
|
||||
const EMPTY_FORM = { id: null, name: '', period: 'day', target: 1, color: COLORS[0], note: '' }
|
||||
|
||||
export default function MergedView({ date, onDateChange }) {
|
||||
const today = toDateStr()
|
||||
const [month, setMonth] = useState(() => date.slice(0, 7))
|
||||
const [cal, setCal] = useState(null) // 月历数据 { days, rate }
|
||||
const [detail, setDetail] = useState(null) // 选中日详情 { today, date, items, summary, isFuture }
|
||||
const [err, setErr] = useState('')
|
||||
const [bursts, setBursts] = useState({})
|
||||
const [sheetItem, setSheetItem] = useState(null) // 「⋯」面板对应的打卡项
|
||||
const [form, setForm] = useState(EMPTY_FORM)
|
||||
const [showForm, setShowForm] = useState(false)
|
||||
|
||||
// ---------- 数据加载 ----------
|
||||
const loadCal = useCallback((silent) => {
|
||||
if (!silent) setErr('')
|
||||
checkinApi.calendar(month)
|
||||
.then(setCal)
|
||||
.catch((e) => { if (!silent) setErr(e.message) })
|
||||
}, [month])
|
||||
|
||||
const loadDetail = useCallback((silent) => {
|
||||
if (!silent) setErr('')
|
||||
checkinApi.habits(date)
|
||||
.then(setDetail)
|
||||
.catch((e) => { if (!silent) setErr(e.message) })
|
||||
}, [date])
|
||||
|
||||
useEffect(() => { loadCal(false) }, [loadCal])
|
||||
useEffect(() => { setDetail(null); loadDetail(false) }, [loadDetail])
|
||||
useRefreshOnVisible(() => { loadCal(true); loadDetail(true) })
|
||||
|
||||
// 切换日期时若跨月, 同步月份
|
||||
useEffect(() => {
|
||||
const m = date.slice(0, 7)
|
||||
setMonth((cur) => (cur === m ? cur : m))
|
||||
}, [date])
|
||||
|
||||
const days = useMemo(() => monthGrid(month), [month])
|
||||
const byDate = useMemo(() => {
|
||||
const map = new Map()
|
||||
;(cal?.days || []).forEach((d) => map.set(d.date, d))
|
||||
return map
|
||||
}, [cal])
|
||||
|
||||
const items = detail?.items || []
|
||||
const isFuture = !!detail?.isFuture
|
||||
|
||||
// 按周期分组: 每天 → 每周 → 每月. "每年" 不在合并视图中展示, 但若存在
|
||||
// 历史 year 项则归入"每月"之外的单列, 避免数据凭空消失.
|
||||
const groups = useMemo(() => {
|
||||
const bucket = new Map()
|
||||
for (const it of items) {
|
||||
const key = GROUP_ORDER.includes(it.period) ? it.period : 'other'
|
||||
if (!bucket.has(key)) bucket.set(key, [])
|
||||
bucket.get(key).push(it)
|
||||
}
|
||||
// 组内排序: 未完成在前, 已完成在后 (沿用 F-CK-16 默认口径)
|
||||
for (const arr of bucket.values()) {
|
||||
arr.sort((a, b) => Number(a.completed) - Number(b.completed) || a.id - b.id)
|
||||
}
|
||||
const order = [...GROUP_ORDER, 'other']
|
||||
return order.filter((k) => bucket.has(k)).map((k) => ({
|
||||
key: k,
|
||||
label: GROUP_LABEL[k] || '其它周期',
|
||||
items: bucket.get(k),
|
||||
}))
|
||||
}, [items])
|
||||
|
||||
const summary = detail?.summary || { total: 0, done: 0 }
|
||||
const fireBurst = (id) => setBursts((m) => ({ ...m, [id]: (m[id] || 0) + 1 }))
|
||||
|
||||
// ---------- 打卡 / 撤销 (乐观更新) ----------
|
||||
async function doCheck(item) {
|
||||
if (!item.canCheck || isFuture) return
|
||||
const before = detail
|
||||
setDetail((d) => ({
|
||||
...d,
|
||||
items: d.items.map((x) => {
|
||||
if (x.id !== item.id) return x
|
||||
const done = x.done + 1
|
||||
const countOnDate = (x.countOnDate || 0) + 1
|
||||
return {
|
||||
...x,
|
||||
done,
|
||||
remaining: Math.max(0, x.target - done),
|
||||
percent: Math.min(1, done / x.target),
|
||||
completed: done >= x.target,
|
||||
over: Math.max(0, done - x.target),
|
||||
countOnDate,
|
||||
dayDone: countOnDate >= x.expectedPerDay,
|
||||
}
|
||||
}),
|
||||
}))
|
||||
try {
|
||||
const res = await checkinApi.check(item.id, date)
|
||||
const fresh = await checkinApi.habits(date)
|
||||
setDetail(fresh)
|
||||
if (res.item?.completed) fireBurst(item.id)
|
||||
loadCal(true)
|
||||
} catch (e) {
|
||||
setDetail(before)
|
||||
Toast.show({ content: e.message || '打卡失败' })
|
||||
}
|
||||
}
|
||||
|
||||
async function doUncheck(item) {
|
||||
const before = detail
|
||||
setDetail((d) => ({
|
||||
...d,
|
||||
items: d.items.map((x) => {
|
||||
if (x.id !== item.id) return x
|
||||
const done = Math.max(0, x.done - 1)
|
||||
const countOnDate = Math.max(0, (x.countOnDate || 0) - 1)
|
||||
return {
|
||||
...x,
|
||||
done,
|
||||
remaining: Math.max(0, x.target - done),
|
||||
percent: Math.min(1, done / x.target),
|
||||
completed: done >= x.target,
|
||||
over: Math.max(0, done - x.target),
|
||||
countOnDate,
|
||||
dayDone: countOnDate >= x.expectedPerDay,
|
||||
}
|
||||
}),
|
||||
}))
|
||||
try {
|
||||
await checkinApi.uncheck(item.id, date)
|
||||
const fresh = await checkinApi.habits(date)
|
||||
setDetail(fresh)
|
||||
loadCal(true)
|
||||
} catch (e) {
|
||||
setDetail(before)
|
||||
Toast.show({ content: e.message || '撤销失败' })
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 新建 / 编辑 / 归档 ----------
|
||||
function openCreate() {
|
||||
setForm(EMPTY_FORM)
|
||||
setShowForm(true)
|
||||
}
|
||||
|
||||
function openEdit(item) {
|
||||
setSheetItem(null)
|
||||
setForm({ id: item.id, name: item.name, period: item.period, target: item.target, color: item.color, note: item.note })
|
||||
setShowForm(true)
|
||||
}
|
||||
|
||||
async function submitForm() {
|
||||
const name = String(form.name || '').trim()
|
||||
if (!name) return Toast.show({ content: '请填写名称' })
|
||||
if (name.length > 20) return Toast.show({ content: '名称不能超过 20 个字' })
|
||||
const payload = { name, period: form.period, target: Number(form.target) || 1, color: form.color, note: form.note }
|
||||
try {
|
||||
if (form.id) await checkinApi.updateHabit(form.id, payload)
|
||||
else await checkinApi.createHabit(payload)
|
||||
setShowForm(false)
|
||||
setForm(EMPTY_FORM)
|
||||
loadDetail(true)
|
||||
loadCal(true)
|
||||
} catch (e) {
|
||||
Toast.show({ content: e.message || '保存失败' })
|
||||
}
|
||||
}
|
||||
|
||||
async function doArchive(item) {
|
||||
setSheetItem(null)
|
||||
const ok = await Dialog.confirm({
|
||||
content: `归档「${item.name}」？归档后不再出现在待办，历史记录保留。`,
|
||||
confirmText: '归档',
|
||||
cancelText: '取消',
|
||||
})
|
||||
if (!ok) return
|
||||
try {
|
||||
await checkinApi.deleteHabit(item.id)
|
||||
Toast.show({ content: '已归档' })
|
||||
loadDetail(true)
|
||||
loadCal(true)
|
||||
} catch (e) {
|
||||
Toast.show({ content: e.message || '操作失败' })
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 渲染 ----------
|
||||
return (
|
||||
<div className="mv-view">
|
||||
{/* 月历 */}
|
||||
<div className="mv-cal">
|
||||
<div className="mv-month">
|
||||
<span className="arrow" onClick={() => setMonth((m) => addMonths(m, -1))}>‹</span>
|
||||
<b>{fmtMonth(month)}</b>
|
||||
<span className="arrow" onClick={() => setMonth((m) => addMonths(m, 1))}>›</span>
|
||||
<span className="today" onClick={() => onDateChange(today)}>回到今天</span>
|
||||
</div>
|
||||
|
||||
<div className="mv-grid mv-wd">
|
||||
{weekdayLabels().map((w) => <span key={w}>{w}</span>)}
|
||||
</div>
|
||||
<div className="mv-grid">
|
||||
{days.map((d) => {
|
||||
const info = byDate.get(d)
|
||||
const inMonth = d.slice(0, 7) === month
|
||||
const status = info?.status || 'empty'
|
||||
return (
|
||||
<div
|
||||
key={d}
|
||||
className={
|
||||
'mv-day' + (inMonth ? '' : ' out') + (d === date ? ' sel' : '') +
|
||||
(info?.isToday ? ' today' : '') + (info?.isFuture ? ' future' : '')
|
||||
}
|
||||
onClick={() => onDateChange(d)}
|
||||
>
|
||||
<span>{Number(d.slice(8, 10))}</span>
|
||||
{inMonth && status !== 'empty' && <i className={status} />}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{cal && (
|
||||
<div className="mv-rate">
|
||||
<span>本月完成率</span>
|
||||
<b>{Math.round((cal.rate || 0) * 100)}%</b>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{err && <div className="error-banner">{err}<span className="retry-link" onClick={() => { loadCal(false); loadDetail(false) }}>重试</span></div>}
|
||||
|
||||
{/* 当日栏 */}
|
||||
<div className="mv-daybar">
|
||||
{dayLabel(date, detail?.today || today)}
|
||||
{isFuture
|
||||
? <span className="badge">计划（不可打卡）</span>
|
||||
: <span className="badge">已完成 {summary.done} / {summary.total}</span>}
|
||||
<span className="sum">点环即打卡</span>
|
||||
</div>
|
||||
|
||||
{detail === null && !err && <div className="monitor-loading"><DotLoading /> 加载中...</div>}
|
||||
|
||||
{detail !== null && items.length === 0 && (
|
||||
<div className="checkin-empty">
|
||||
<Empty description="当天没有打卡项" />
|
||||
<Button color="primary" size="small" onClick={openCreate}>创建第一个打卡项</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 分组列表 */}
|
||||
<div className="mv-groups">
|
||||
{groups.map((g) => (
|
||||
<div key={g.key}>
|
||||
<div className="mv-ghead">{g.label}<span className="cnt">{g.items.length} 项</span></div>
|
||||
{g.items.map((item) => (
|
||||
<div key={item.id} className={'mv-card' + (item.completed ? ' done' : '')}>
|
||||
<RingProgress
|
||||
size={42}
|
||||
stroke={5}
|
||||
percent={item.percent}
|
||||
done={item.done}
|
||||
target={item.target}
|
||||
over={item.over}
|
||||
completed={item.completed}
|
||||
color={item.color}
|
||||
onClick={() => doCheck(item)}
|
||||
/>
|
||||
<div className="mv-main">
|
||||
<div className="mv-name">{item.name}</div>
|
||||
<div className="mv-meta">
|
||||
{item.periodLabel} {item.target} 次 · 当日 {item.countOnDate || 0}/{item.expectedPerDay}
|
||||
{item.streak > 0 && <span className="st">连续 {item.streak}</span>}
|
||||
</div>
|
||||
</div>
|
||||
{isFuture ? (
|
||||
<div className="mv-btn grey">计划</div>
|
||||
) : (
|
||||
<div
|
||||
className={'mv-btn' + (item.completed ? ' grey' : '')}
|
||||
onClick={() => doCheck(item)}
|
||||
>
|
||||
{item.completed ? '再打一次' : '打卡'}
|
||||
</div>
|
||||
)}
|
||||
<div className="mv-more" onClick={() => setSheetItem(item)}>⋯</div>
|
||||
<Celebrate fire={bursts[item.id] || 0} color={item.color} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{detail !== null && (
|
||||
<div className="mv-add-wrap">
|
||||
<Button block fill="outline" size="small" onClick={openCreate} style={{ margin: '4px 12px 12px' }}>
|
||||
+ 新建打卡项
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 「⋯」操作面板: 撤销 / 编辑 / 归档 */}
|
||||
<Popup
|
||||
visible={!!sheetItem}
|
||||
onMaskClick={() => setSheetItem(null)}
|
||||
bodyStyle={{ borderTopLeftRadius: 12, borderTopRightRadius: 12, paddingBottom: 16 }}
|
||||
>
|
||||
{sheetItem && (
|
||||
<div className="mv-sheet">
|
||||
<div className="sheet-title">{sheetItem.name}</div>
|
||||
<div
|
||||
className={'mv-sheet-row' + (sheetItem.done > 0 ? '' : ' disabled')}
|
||||
onClick={() => { if (sheetItem.done > 0) { doUncheck(sheetItem); setSheetItem(null) } }}
|
||||
>
|
||||
<span>撤销上次打卡</span>
|
||||
<span className="k">今日 {sheetItem.countOnDate || 0} 次</span>
|
||||
</div>
|
||||
<div className="mv-sheet-row" onClick={() => openEdit(sheetItem)}>
|
||||
<span>编辑打卡项</span>
|
||||
<span className="k">名称 / 周期 / 目标</span>
|
||||
</div>
|
||||
<div className="mv-sheet-row danger" onClick={() => doArchive(sheetItem)}>
|
||||
<span>归档</span>
|
||||
<span className="k">历史记录保留</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Popup>
|
||||
|
||||
{/* 新建 / 编辑表单 */}
|
||||
<Popup
|
||||
visible={showForm}
|
||||
onMaskClick={() => setShowForm(false)}
|
||||
bodyStyle={{ borderTopLeftRadius: 12, borderTopRightRadius: 12, paddingBottom: 16 }}
|
||||
>
|
||||
<div className="form-popup">
|
||||
<div className="form-title">{form.id ? '编辑打卡项' : '新建打卡项'}</div>
|
||||
<div className="form-field">
|
||||
<label>名称</label>
|
||||
<Input
|
||||
placeholder="例如：喝水 / 健身 / 读书"
|
||||
value={form.name}
|
||||
maxLength={20}
|
||||
onChange={(v) => setForm((f) => ({ ...f, name: v }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-field">
|
||||
<label>周期</label>
|
||||
<Selector
|
||||
options={PERIOD_OPTIONS}
|
||||
value={[form.period]}
|
||||
onChange={(v) => setForm((f) => ({ ...f, period: v[0] }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-field">
|
||||
<label>目标次数（周期内）</label>
|
||||
<Stepper min={1} max={999} value={form.target} onChange={(v) => setForm((f) => ({ ...f, target: v }))} />
|
||||
</div>
|
||||
<div className="form-field">
|
||||
<label>颜色</label>
|
||||
<div className="color-row">
|
||||
{COLORS.map((c) => (
|
||||
<span
|
||||
key={c}
|
||||
className={'color-dot' + (form.color === c ? ' active' : '')}
|
||||
style={{ background: c }}
|
||||
onClick={() => setForm((f) => ({ ...f, color: c }))}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-field">
|
||||
<label>备注（可选）</label>
|
||||
<Input
|
||||
placeholder="补充说明"
|
||||
value={form.note}
|
||||
onChange={(v) => setForm((f) => ({ ...f, note: v }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-actions">
|
||||
<Button block color="primary" onClick={submitForm}>保存</Button>
|
||||
<Button block fill="outline" onClick={() => setShowForm(false)} style={{ marginTop: 8 }}>取消</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Popup>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user