feat(V0.2): 打卡 / 日历 / 清单模块
- 数据: Habit/CheckIn/CheckList/CheckListItem/CheckListTemplate + 迁移 + 重新生成 client
- 后端: server/checkin/period.js 周期计算(日/周/月/年, 周一起始, Asia/Shanghai)
/api/checkin/* 打卡项CRUD/打卡/撤销/补打/某日详情/月历
/api/checklists/* 清单与检查项CRUD/勾选/全选/复制/模板(系统预置出差·回老家)
- 前端: 底部新增「打卡」Tab -> /checkin, 页内三视图
环形进度 RingProgress + 完成特效(粒子/光晕/触感, 可关闭)
打卡视图: 待办列表/乐观更新/撤销/新建编辑
日历视图: 月历网格 + 今天·昨天·明天 + 日期标记/完成率
清单视图: 场景清单/勾选进度条/模板生成/另存模板/归档
- 文档: docs/V0.2/需求文档.md 补充实现约定(附录B)与接口清单
This commit is contained in:
cheney
@@ -7,6 +7,7 @@ import MacroPage from './pages/MacroPage.jsx'
|
||||
import MonitorPage from './pages/MonitorPage.jsx'
|
||||
import ServerDetail from './pages/monitor/ServerDetail.jsx'
|
||||
import MePage from './pages/MePage.jsx'
|
||||
import CheckinPage from './pages/checkin/CheckinPage.jsx'
|
||||
import { useAuth } from './auth/AuthContext.jsx'
|
||||
|
||||
// 已登录访问 /login 自动回首页
|
||||
@@ -36,6 +37,8 @@ export default function App() {
|
||||
<Route path="/macro/*" element={<MacroPage />} />
|
||||
<Route path="/monitor" element={<MonitorPage />} />
|
||||
<Route path="/monitor/server/:uuid" element={<ServerDetail />} />
|
||||
{/* V0.2 打卡 / 日历 / 清单 */}
|
||||
<Route path="/checkin" element={<CheckinPage />} />
|
||||
<Route path="/me" element={<MePage />} />
|
||||
</Route>
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
import { api } from './client.js'
|
||||
|
||||
const q = (params) => {
|
||||
const s = new URLSearchParams()
|
||||
Object.entries(params || {}).forEach(([k, v]) => {
|
||||
if (v !== undefined && v !== null && v !== '') s.set(k, v)
|
||||
})
|
||||
const str = s.toString()
|
||||
return str ? '?' + str : ''
|
||||
}
|
||||
|
||||
// 打卡 / 日历
|
||||
export const checkinApi = {
|
||||
habits: (date) => api('/checkin/habits' + q({ date })),
|
||||
day: (date) => api('/checkin/day' + q({ date })),
|
||||
calendar: (month) => api('/checkin/calendar' + q({ month })),
|
||||
createHabit: (body) => api('/checkin/habits', { method: 'POST', body }),
|
||||
updateHabit: (id, body) => api(`/checkin/habits/${id}`, { method: 'PUT', body }),
|
||||
deleteHabit: (id, hard) => api(`/checkin/habits/${id}${hard ? '?hard=1' : ''}`, { method: 'DELETE' }),
|
||||
check: (id, date, note) => api(`/checkin/habits/${id}/check`, { method: 'POST', body: { date, note } }),
|
||||
uncheck: (id, date) => api(`/checkin/habits/${id}/check` + q({ date }), { method: 'DELETE' }),
|
||||
}
|
||||
|
||||
// 检查清单
|
||||
export const checklistApi = {
|
||||
lists: (archived) => api('/checklists' + q({ archived: archived ? 1 : 0 })),
|
||||
list: (id) => api(`/checklists/${id}`),
|
||||
create: (body) => api('/checklists', { method: 'POST', body }),
|
||||
update: (id, body) => api(`/checklists/${id}`, { method: 'PUT', body }),
|
||||
remove: (id) => api(`/checklists/${id}`, { method: 'DELETE' }),
|
||||
duplicate: (id) => api(`/checklists/${id}/duplicate`, { method: 'POST', body: {} }),
|
||||
addItem: (id, body) => api(`/checklists/${id}/items`, { method: 'POST', body }),
|
||||
updateItem: (itemId, body) => api(`/checklists/items/${itemId}`, { method: 'PUT', body }),
|
||||
removeItem: (itemId) => api(`/checklists/items/${itemId}`, { method: 'DELETE' }),
|
||||
checkAll: (id, done) => api(`/checklists/${id}/check-all`, { method: 'POST', body: { done } }),
|
||||
templates: () => api('/checklists/templates'),
|
||||
createTemplate: (body) => api('/checklists/templates', { method: 'POST', body }),
|
||||
removeTemplate: (id) => api(`/checklists/templates/${id}`, { method: 'DELETE' }),
|
||||
}
|
||||
@@ -8,6 +8,7 @@ const TABS = [
|
||||
{ key: '/', name: 'home', label: '首页' },
|
||||
{ key: '/macro', name: 'macro', label: '宏观' },
|
||||
{ key: '/monitor', name: 'monitor', label: '监控' },
|
||||
{ key: '/checkin', name: 'checkin', label: '打卡' },
|
||||
{ key: '/me', name: 'me', label: '我' },
|
||||
]
|
||||
|
||||
@@ -46,4 +47,4 @@ export default function BottomNav() {
|
||||
))}
|
||||
</TabBar>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,139 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
|
||||
// 环形进度组件 (F-CK-03/04/05, U-01)
|
||||
// props:
|
||||
// percent: 0~1 完成度
|
||||
// size: 外框尺寸(px)
|
||||
// stroke: 环宽(px)
|
||||
// color: 进度色
|
||||
// completed: 是否达标 (达标时显示对勾而非数字)
|
||||
// done/target: 中心文案
|
||||
// onClick: 可选, 点击整个环触发 (用于"点环即打卡")
|
||||
export default function RingProgress({
|
||||
percent = 0,
|
||||
size = 58,
|
||||
stroke = 6,
|
||||
color = '#1677ff',
|
||||
completed = false,
|
||||
done = 0,
|
||||
target = 1,
|
||||
over = 0,
|
||||
children,
|
||||
onClick,
|
||||
disabled = false,
|
||||
}) {
|
||||
const p = Math.max(0, Math.min(1, Number(percent) || 0))
|
||||
const r = (size - stroke) / 2
|
||||
const c = 2 * Math.PI * r
|
||||
const offset = c * (1 - p)
|
||||
|
||||
return (
|
||||
<div
|
||||
className={'ring-wrap' + (onClick ? ' clickable' : '') + (disabled ? ' disabled' : '')}
|
||||
style={{ width: size, height: size }}
|
||||
onClick={disabled ? undefined : onClick}
|
||||
>
|
||||
<svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="ring-svg">
|
||||
{/* 背景环 */}
|
||||
<circle
|
||||
cx={size / 2} cy={size / 2} r={r}
|
||||
fill="none" stroke="#ececf0" strokeWidth={stroke}
|
||||
/>
|
||||
{/* 进度环: 从 12 点方向顺时针 */}
|
||||
<circle
|
||||
className="ring-bar"
|
||||
cx={size / 2} cy={size / 2} r={r}
|
||||
fill="none" stroke={color} strokeWidth={stroke} strokeLinecap="round"
|
||||
strokeDasharray={c} strokeDashoffset={offset}
|
||||
transform={`rotate(-90 ${size / 2} ${size / 2})`}
|
||||
/>
|
||||
</svg>
|
||||
<div className="ring-center">
|
||||
{children !== undefined ? children : (
|
||||
completed ? (
|
||||
<svg className="ring-check" width="20" height="20" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M4 12.5l5 5L20 6.5" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
) : (
|
||||
<span className="ring-num">
|
||||
{done}
|
||||
<em>/{target}</em>
|
||||
</span>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
{over > 0 && <span className="ring-over">+{over}</span>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 完成特效 (F-CK-07, U-02/U-03/U-07)
|
||||
// props: fire 计数器(每次 +1 触发一次), color 主色
|
||||
// 尊重"特效开关": localStorage iboard_celebrate === '0' 时不播放
|
||||
export function Celebrate({ fire = 0, color = '#1677ff' }) {
|
||||
const [burst, setBurst] = useState(0)
|
||||
const [visible, setVisible] = useState(false)
|
||||
const prev = useRef(fire)
|
||||
const timer = useRef(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (fire === prev.current) return
|
||||
prev.current = fire
|
||||
if (fire <= 0) return
|
||||
if (!effectsEnabled()) return
|
||||
setBurst((n) => n + 1)
|
||||
setVisible(true)
|
||||
haptic()
|
||||
clearTimeout(timer.current)
|
||||
timer.current = setTimeout(() => setVisible(false), 900)
|
||||
return () => clearTimeout(timer.current)
|
||||
}, [fire])
|
||||
|
||||
if (!visible) return null
|
||||
const dots = Array.from({ length: 14 }, (_, i) => i)
|
||||
return (
|
||||
<div className="celebrate" key={burst}>
|
||||
<span className="celebrate-ring" style={{ borderColor: color }} />
|
||||
{dots.map((i) => {
|
||||
const angle = (360 / dots.length) * i + (i % 2 ? 8 : -8)
|
||||
const dist = 26 + (i % 4) * 8
|
||||
return (
|
||||
<i
|
||||
key={i}
|
||||
style={{
|
||||
background: i % 3 === 0 ? '#ffc53d' : color,
|
||||
'--a': angle + 'deg',
|
||||
'--d': dist + 'px',
|
||||
animationDelay: (i % 3) * 40 + 'ms',
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 特效全局开关 (默认开)
|
||||
export function effectsEnabled() {
|
||||
try {
|
||||
if (localStorage.getItem('iboard_celebrate') === '0') return false
|
||||
} catch { /* ignore */ }
|
||||
// 系统"减弱动效"偏好时降级
|
||||
if (typeof window !== 'undefined' && window.matchMedia) {
|
||||
try {
|
||||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return false
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
export function setEffectsEnabled(v) {
|
||||
try { localStorage.setItem('iboard_celebrate', v ? '1' : '0') } catch { /* ignore */ }
|
||||
}
|
||||
|
||||
// 轻量触感反馈 (Web Vibration API; Tauri Android WebView 支持)
|
||||
export function haptic(ms = 18) {
|
||||
try {
|
||||
if (typeof navigator !== 'undefined' && navigator.vibrate) navigator.vibrate(ms)
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
@@ -22,6 +22,15 @@ const ICONS = {
|
||||
<path d="M3 12h4l2-5 4 10 2-5h6" fill={active ? 'currentColor' : 'none'} fillOpacity={active ? 0.12 : 0} />
|
||||
</svg>
|
||||
),
|
||||
// 打卡: 日历 + 对勾
|
||||
checkin: (active) => (
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={active ? 2.2 : 1.8} strokeLinecap="round" strokeLinejoin="round">
|
||||
<rect x="3" y="5" width="18" height="16" rx="2" fill={active ? 'currentColor' : 'none'} fillOpacity={active ? 0.12 : 0} />
|
||||
<path d="M3 10h18" />
|
||||
<path d="M8 3v4M16 3v4" />
|
||||
<path d="M9 15.5l2.2 2.2L15.5 13" />
|
||||
</svg>
|
||||
),
|
||||
me: (active) => (
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={active ? 2.2 : 1.8} strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="12" cy="8" r="4" fill={active ? 'currentColor' : 'none'} fillOpacity={active ? 0.15 : 0} />
|
||||
@@ -34,4 +43,4 @@ export default function TabIcon({ name, active }) {
|
||||
const render = ICONS[name]
|
||||
if (!render) return null
|
||||
return <span className="tab-icon">{render(!!active)}</span>
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,173 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { Button, DotLoading, Empty, Segmented, Toast } from 'antd-mobile'
|
||||
import { 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'
|
||||
|
||||
// 日历视图: 月历网格 + 今天/昨天/明天 三视图 + 日期标记 (F-CL-*)
|
||||
export default function CalendarView({ date, onDateChange }) {
|
||||
const today = toDateStr()
|
||||
const [month, setMonth] = useState(() => date.slice(0, 7))
|
||||
const [cal, setCal] = useState(null) // 月历数据
|
||||
const [detail, setDetail] = useState(null) // 选中日详情
|
||||
const [err, setErr] = useState('')
|
||||
const [bursts, setBursts] = useState({})
|
||||
|
||||
const loadCal = useCallback((silent) => {
|
||||
if (!silent) setErr('')
|
||||
checkinApi.calendar(month)
|
||||
.then(setCal)
|
||||
.catch((e) => { if (!silent) setErr(e.message) })
|
||||
}, [month])
|
||||
|
||||
const loadDetail = useCallback((silent) => {
|
||||
checkinApi.day(date).then(setDetail).catch(() => {})
|
||||
}, [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 quickValue = useMemo(() => {
|
||||
if (date === today) return 0
|
||||
if (date === addDays(today, -1)) return -1
|
||||
if (date === addDays(today, 1)) return 1
|
||||
return null
|
||||
}, [date, today])
|
||||
|
||||
async function checkFromCalendar(item) {
|
||||
if (!item.canCheck) return
|
||||
const snapshot = 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, countOnDate,
|
||||
percent: Math.min(1, done / x.target),
|
||||
completed: done >= x.target,
|
||||
over: Math.max(0, done - x.target),
|
||||
dayDone: countOnDate >= x.expectedPerDay,
|
||||
}
|
||||
}),
|
||||
}))
|
||||
try {
|
||||
const res = await checkinApi.check(item.id, date)
|
||||
const fresh = await checkinApi.day(date)
|
||||
setDetail(fresh)
|
||||
if (res.item.completed) setBursts((m) => ({ ...m, [item.id]: (m[item.id] || 0) + 1 }))
|
||||
loadCal(true)
|
||||
} catch (e) {
|
||||
setDetail(snapshot)
|
||||
Toast.show({ content: e.message || '打卡失败' })
|
||||
}
|
||||
}
|
||||
|
||||
const items = detail?.items || []
|
||||
const isFuture = !!detail?.isFuture
|
||||
|
||||
return (
|
||||
<div className="calendar-view">
|
||||
<div className="cal-month-bar">
|
||||
<span className="cal-arrow" onClick={() => setMonth((m) => addMonths(m, -1))}>‹</span>
|
||||
<span className="cal-month">{fmtMonth(month)}</span>
|
||||
<span className="cal-arrow" onClick={() => setMonth((m) => addMonths(m, 1))}>›</span>
|
||||
<span className="cal-today-btn" onClick={() => onDateChange(today)}>回到今天</span>
|
||||
</div>
|
||||
|
||||
<div className="cal-quick">
|
||||
<Segmented
|
||||
options={[
|
||||
{ label: '昨天', value: -1 },
|
||||
{ label: '今天', value: 0 },
|
||||
{ label: '明天', value: 1 },
|
||||
]}
|
||||
value={quickValue}
|
||||
onChange={(v) => onDateChange(addDays(today, Number(v)))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{err && <div className="error-banner">{err}<span className="retry-link" onClick={() => loadCal(false)}>重试</span></div>}
|
||||
|
||||
<div className="cal-grid">
|
||||
<div className="cal-weekday">
|
||||
{weekdayLabels().map((w) => <span key={w}>{w}</span>)}
|
||||
</div>
|
||||
<div className="cal-days">
|
||||
{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={
|
||||
'cal-day' + (inMonth ? '' : ' out') + (d === date ? ' selected' : '') +
|
||||
(info?.isToday ? ' today' : '') + (info?.isFuture ? ' future' : '')
|
||||
}
|
||||
onClick={() => onDateChange(d)}
|
||||
>
|
||||
<span className="cal-day-num">{Number(d.slice(8, 10))}</span>
|
||||
{inMonth && status !== 'empty' && (
|
||||
<span className={'cal-dot ' + status} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{cal && (
|
||||
<div className="cal-rate">本月完成率 <strong>{Math.round((cal.rate || 0) * 100)}%</strong></div>
|
||||
)}
|
||||
|
||||
<div className="cal-detail">
|
||||
<div className="cal-detail-title">
|
||||
{dayLabel(date, today)} · {date}
|
||||
{isFuture && <span className="habit-badge">计划（不可打卡）</span>}
|
||||
</div>
|
||||
|
||||
{detail === null && <div className="monitor-loading"><DotLoading /> 加载中...</div>}
|
||||
{detail !== null && items.length === 0 && <Empty description="当天没有打卡项" />}
|
||||
|
||||
{items.map((item) => (
|
||||
<div key={item.id} className={'cal-item' + (item.completed ? ' done' : '')}>
|
||||
<span className="cal-item-dot" style={{ background: item.color }} />
|
||||
<span className="cal-item-name">{item.name}</span>
|
||||
<span className="cal-item-meta">
|
||||
{item.periodLabel} {item.target} 次 · 当日 {item.countOnDate || 0}/{item.expectedPerDay}
|
||||
</span>
|
||||
<span className="cal-item-right">
|
||||
{item.canCheck ? (
|
||||
<Button size="mini" color={item.dayDone ? 'default' : 'primary'} onClick={() => checkFromCalendar(item)}>
|
||||
{item.dayDone ? '已达标' : '打卡'}
|
||||
</Button>
|
||||
) : (
|
||||
<span className="cal-item-plan">{item.dayDone ? '计划' : '待办'}</span>
|
||||
)}
|
||||
</span>
|
||||
<Celebrate fire={bursts[item.id] || 0} color={item.color} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import { useState } from 'react'
|
||||
import { NavBar } from 'antd-mobile'
|
||||
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())
|
||||
|
||||
const tabs = [
|
||||
{ key: 'habit', label: '打卡', render: () => <HabitView date={date} /> },
|
||||
{ key: 'calendar', label: '日历', render: () => <CalendarView date={date} onDateChange={setDate} /> },
|
||||
{ key: 'list', label: '清单', render: () => <ListView /> },
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="page-with-navbar">
|
||||
<NavBar back={null}>打卡</NavBar>
|
||||
<div className="checkin-content">
|
||||
<SwipeTabs tabs={tabs} active={active} onChange={setActive} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,290 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import {
|
||||
Button, Dialog, DotLoading, Empty, Input, Popup, Selector, Stepper, Toast,
|
||||
} from 'antd-mobile'
|
||||
import RingProgress, { Celebrate, effectsEnabled, setEffectsEnabled } from '../../components/RingProgress.jsx'
|
||||
import { checkinApi } from '../../api/checkin.js'
|
||||
import useRefreshOnVisible from '../../hooks/useRefreshOnVisible.js'
|
||||
import { toDateStr, dayLabel } from './date.js'
|
||||
|
||||
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 HabitView({ date, onDateChange }) {
|
||||
const [data, setData] = useState(null) // { today, date, items, summary }
|
||||
const [err, setErr] = useState('')
|
||||
const [bursts, setBursts] = useState({}) // { habitId: 触发计数 }
|
||||
const [form, setForm] = useState(EMPTY_FORM)
|
||||
const [showForm, setShowForm] = useState(false)
|
||||
const [effects, setEffects] = useState(effectsEnabled())
|
||||
|
||||
const load = useCallback((silent) => {
|
||||
if (!silent) setErr('')
|
||||
checkinApi.habits(date)
|
||||
.then((d) => setData(d))
|
||||
.catch((e) => { if (!silent) setErr(e.message) })
|
||||
}, [date])
|
||||
|
||||
useEffect(() => { load(false) }, [load])
|
||||
useRefreshOnVisible(() => load(true))
|
||||
|
||||
const items = useMemo(() => {
|
||||
const list = data?.items || []
|
||||
// 未完成在前, 已完成在后 (F-CK-16 默认排序)
|
||||
return [...list].sort((a, b) => Number(a.completed) - Number(b.completed) || a.id - b.id)
|
||||
}, [data])
|
||||
|
||||
const fireBurst = (id) => setBursts((m) => ({ ...m, [id]: (m[id] || 0) + 1 }))
|
||||
|
||||
// 乐观更新: 先本地 +1, 成功用服务端结果覆盖, 失败回滚 (F-SY-06/E-02)
|
||||
async function doCheck(item) {
|
||||
const before = data
|
||||
const patch = (it) => {
|
||||
const done = it.done + 1
|
||||
return {
|
||||
...it,
|
||||
done,
|
||||
remaining: Math.max(0, it.target - done),
|
||||
percent: Math.min(1, done / it.target),
|
||||
completed: done >= it.target,
|
||||
over: Math.max(0, done - it.target),
|
||||
countOnDate: (it.countOnDate || 0) + 1,
|
||||
dayDone: (it.countOnDate || 0) + 1 >= it.expectedPerDay,
|
||||
}
|
||||
}
|
||||
setData((d) => ({ ...d, items: d.items.map((x) => (x.id === item.id ? patch(x) : x)) }))
|
||||
try {
|
||||
const res = await checkinApi.check(item.id, date)
|
||||
setData((d) => ({ ...d, items: d.items.map((x) => (x.id === item.id ? res.item : x)) }))
|
||||
if (res.item.completed) fireBurst(item.id)
|
||||
} catch (e) {
|
||||
setData(before)
|
||||
Toast.show({ content: e.message || '打卡失败' })
|
||||
}
|
||||
}
|
||||
|
||||
async function doUncheck(item) {
|
||||
const before = data
|
||||
setData((d) => ({
|
||||
...d,
|
||||
items: d.items.map((x) => {
|
||||
if (x.id !== item.id) return x
|
||||
const done = Math.max(0, x.done - 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: Math.max(0, (x.countOnDate || 0) - 1),
|
||||
}
|
||||
}),
|
||||
}))
|
||||
try {
|
||||
const res = await checkinApi.uncheck(item.id, date)
|
||||
setData((d) => ({ ...d, items: d.items.map((x) => (x.id === item.id ? res.item : x)) }))
|
||||
} catch (e) {
|
||||
setData(before)
|
||||
Toast.show({ content: e.message || '撤销失败' })
|
||||
}
|
||||
}
|
||||
|
||||
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)
|
||||
load(true)
|
||||
} catch (e) {
|
||||
Toast.show({ content: e.message || '保存失败' })
|
||||
}
|
||||
}
|
||||
|
||||
async function removeHabit(item) {
|
||||
const ok = await Dialog.confirm({
|
||||
content: `归档「${item.name}」？归档后不再出现在待办，历史记录保留。`,
|
||||
confirmText: '归档',
|
||||
cancelText: '取消',
|
||||
})
|
||||
if (!ok) return
|
||||
try {
|
||||
await checkinApi.deleteHabit(item.id)
|
||||
Toast.show({ content: '已归档' })
|
||||
load(true)
|
||||
} catch (e) {
|
||||
Toast.show({ content: e.message || '操作失败' })
|
||||
}
|
||||
}
|
||||
|
||||
const summary = data?.summary || { total: 0, done: 0 }
|
||||
const isToday = data ? data.date === data.today : true
|
||||
|
||||
return (
|
||||
<div className="habit-view">
|
||||
<div className="habit-head">
|
||||
<div className="habit-head-left">
|
||||
<div className="habit-date">{dayLabel(date, data?.today || toDateStr())}</div>
|
||||
<div className="habit-summary">
|
||||
已完成 <strong>{summary.done}</strong> / {summary.total}
|
||||
{!isToday && <span className="habit-badge">非今天</span>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="habit-head-right">
|
||||
<Button size="mini" fill="outline" color="primary" onClick={() => setEffects((v) => {
|
||||
const next = !v
|
||||
setEffectsEnabled(next)
|
||||
return next
|
||||
})}>
|
||||
{effects ? '特效开' : '特效关'}
|
||||
</Button>
|
||||
<Button size="mini" color="primary" onClick={() => { setForm(EMPTY_FORM); setShowForm(true) }}>
|
||||
+ 新建
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{err && (
|
||||
<div className="error-banner">
|
||||
{err}
|
||||
<span className="retry-link" onClick={() => load(false)}>重试</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data === null && !err && <div className="monitor-loading"><DotLoading /> 加载中...</div>}
|
||||
|
||||
{data !== null && !err && items.length === 0 && (
|
||||
<div className="checkin-empty">
|
||||
<Empty description="还没有打卡项" />
|
||||
<Button color="primary" size="small" onClick={() => { setForm(EMPTY_FORM); setShowForm(true) }}>
|
||||
创建第一个打卡项
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="habit-list">
|
||||
{items.map((item) => (
|
||||
<div key={item.id} className={'habit-card' + (item.completed ? ' done' : '')}>
|
||||
<RingProgress
|
||||
percent={item.percent}
|
||||
done={item.done}
|
||||
target={item.target}
|
||||
over={item.over}
|
||||
completed={item.completed}
|
||||
color={item.color}
|
||||
onClick={() => doCheck(item)}
|
||||
/>
|
||||
<div className="habit-main">
|
||||
<div className="habit-name">{item.name}</div>
|
||||
<div className="habit-meta">
|
||||
{item.periodLabel} {item.target} 次
|
||||
{item.streak > 0 && <span className="habit-streak">连续 {item.streak}</span>}
|
||||
</div>
|
||||
{item.note && <div className="habit-note">{item.note}</div>}
|
||||
<div className="habit-range">
|
||||
{item.periodStart === item.periodEnd
|
||||
? '今日'
|
||||
: `${item.periodStart.slice(5)} ~ ${item.periodEnd.slice(5)}`}
|
||||
{item.over > 0 && <span className="habit-over">超额 {item.over}</span>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="habit-actions">
|
||||
<Button
|
||||
size="mini"
|
||||
color={item.completed ? 'default' : 'primary'}
|
||||
onClick={() => doCheck(item)}
|
||||
>
|
||||
{item.completed ? '再打一次' : '打卡'}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="habit-foot">
|
||||
{item.done > 0 && (
|
||||
<span className="habit-link" onClick={() => doUncheck(item)}>撤销</span>
|
||||
)}
|
||||
<span
|
||||
className="habit-link"
|
||||
onClick={() => {
|
||||
setForm({ id: item.id, name: item.name, period: item.period, target: item.target, color: item.color, note: item.note })
|
||||
setShowForm(true)
|
||||
}}
|
||||
>编辑</span>
|
||||
<span className="habit-link danger" onClick={() => removeHabit(item)}>归档</span>
|
||||
</div>
|
||||
<Celebrate fire={bursts[item.id] || 0} color={item.color} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 新建 / 编辑 */}
|
||||
<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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,291 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import {
|
||||
Button, Dialog, DotLoading, Empty, Input, Popup, Segmented, Selector, Toast,
|
||||
} from 'antd-mobile'
|
||||
import { Celebrate } from '../../components/RingProgress.jsx'
|
||||
import { checklistApi } from '../../api/checkin.js'
|
||||
import useRefreshOnVisible from '../../hooks/useRefreshOnVisible.js'
|
||||
|
||||
const SCENES = ['出差', '回老家', '其他']
|
||||
|
||||
// 清单视图: 出差/回老家等场景的一次性检查清单 (F-LS-*)
|
||||
export default function ListView() {
|
||||
const [archived, setArchived] = useState(false)
|
||||
const [lists, setLists] = useState(null)
|
||||
const [err, setErr] = useState('')
|
||||
const [openId, setOpenId] = useState(null)
|
||||
const [newItem, setNewItem] = useState({})
|
||||
const [bursts, setBursts] = useState({})
|
||||
const [templates, setTemplates] = useState([])
|
||||
const [showForm, setShowForm] = useState(false)
|
||||
const [form, setForm] = useState({ title: '', scene: '出差', templateId: '' })
|
||||
|
||||
const load = useCallback((silent) => {
|
||||
if (!silent) setErr('')
|
||||
checklistApi.lists(archived)
|
||||
.then((d) => setLists(d.items || []))
|
||||
.catch((e) => { if (!silent) setErr(e.message) })
|
||||
}, [archived])
|
||||
|
||||
useEffect(() => { setLists(null); load(false) }, [load])
|
||||
useRefreshOnVisible(() => load(true))
|
||||
|
||||
useEffect(() => {
|
||||
checklistApi.templates().then((d) => setTemplates(d.items || [])).catch(() => {})
|
||||
}, [])
|
||||
|
||||
const withProgress = useCallback((list) => {
|
||||
const items = list.items || []
|
||||
const done = items.filter((i) => i.done).length
|
||||
return {
|
||||
...list,
|
||||
total: items.length,
|
||||
done,
|
||||
percent: items.length > 0 ? done / items.length : 0,
|
||||
completed: items.length > 0 && done === items.length,
|
||||
}
|
||||
}, [])
|
||||
|
||||
const patchList = (id, updater) =>
|
||||
setLists((prev) => (prev || []).map((l) => (l.id === id ? updater(l) : l)))
|
||||
|
||||
// 勾选: 乐观更新 + 服务端确认 (F-LS-03, F-SY-06)
|
||||
async function toggleItem(listId, item) {
|
||||
const snapshot = lists
|
||||
const next = !item.done
|
||||
patchList(listId, (l) => withProgress({
|
||||
...l,
|
||||
items: l.items.map((i) => (i.id === item.id ? { ...i, done: next } : i)),
|
||||
}))
|
||||
try {
|
||||
await checklistApi.updateItem(item.id, { done: next })
|
||||
const l = (lists || []).find((x) => x.id === listId)
|
||||
const updated = withProgress({
|
||||
...l,
|
||||
items: l.items.map((i) => (i.id === item.id ? { ...i, done: next } : i)),
|
||||
})
|
||||
if (updated.completed) setBursts((m) => ({ ...m, [listId]: (m[listId] || 0) + 1 }))
|
||||
} catch (e) {
|
||||
setLists(snapshot)
|
||||
Toast.show({ content: e.message || '更新失败' })
|
||||
}
|
||||
}
|
||||
|
||||
async function addItem(listId, title) {
|
||||
const t = String(title || '').trim()
|
||||
if (!t) return
|
||||
try {
|
||||
const { item } = await checklistApi.addItem(listId, { title: t })
|
||||
patchList(listId, (l) => withProgress({ ...l, items: [...l.items, item] }))
|
||||
setNewItem((m) => ({ ...m, [listId]: '' }))
|
||||
} catch (e) {
|
||||
Toast.show({ content: e.message || '添加失败' })
|
||||
}
|
||||
}
|
||||
|
||||
async function removeItem(listId, itemId) {
|
||||
const snapshot = lists
|
||||
patchList(listId, (l) => withProgress({ ...l, items: l.items.filter((i) => i.id !== itemId) }))
|
||||
try {
|
||||
await checklistApi.removeItem(itemId)
|
||||
} catch (e) {
|
||||
setLists(snapshot)
|
||||
Toast.show({ content: e.message || '删除失败' })
|
||||
}
|
||||
}
|
||||
|
||||
async function checkAll(listId, done) {
|
||||
const snapshot = lists
|
||||
patchList(listId, (l) => withProgress({ ...l, items: l.items.map((i) => ({ ...i, done })) }))
|
||||
try {
|
||||
const { item } = await checklistApi.checkAll(listId, done)
|
||||
patchList(listId, () => withProgress(item))
|
||||
if (item.completed) setBursts((m) => ({ ...m, [listId]: (m[listId] || 0) + 1 }))
|
||||
} catch (e) {
|
||||
setLists(snapshot)
|
||||
Toast.show({ content: e.message || '操作失败' })
|
||||
}
|
||||
}
|
||||
|
||||
async function createList() {
|
||||
const title = String(form.title || '').trim()
|
||||
if (!title) return Toast.show({ content: '请填写清单名称' })
|
||||
try {
|
||||
await checklistApi.create({ title, scene: form.scene, templateId: form.templateId || undefined })
|
||||
setShowForm(false)
|
||||
setForm({ title: '', scene: '出差', templateId: '' })
|
||||
load(true)
|
||||
} catch (e) {
|
||||
Toast.show({ content: e.message || '创建失败' })
|
||||
}
|
||||
}
|
||||
|
||||
async function duplicate(list) {
|
||||
try {
|
||||
await checklistApi.duplicate(list.id)
|
||||
Toast.show({ content: '已复制为新清单' })
|
||||
load(true)
|
||||
} catch (e) {
|
||||
Toast.show({ content: e.message || '复制失败' })
|
||||
}
|
||||
}
|
||||
|
||||
async function saveAsTemplate(list) {
|
||||
try {
|
||||
await checklistApi.createTemplate({
|
||||
name: list.title,
|
||||
scene: list.scene || '其他',
|
||||
items: (list.items || []).map((i) => ({ title: i.title, note: i.note })),
|
||||
})
|
||||
Toast.show({ content: '已保存为模板' })
|
||||
const d = await checklistApi.templates()
|
||||
setTemplates(d.items || [])
|
||||
} catch (e) {
|
||||
Toast.show({ content: e.message || '保存失败' })
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleArchive(list) {
|
||||
try {
|
||||
await checklistApi.update(list.id, { archived: !list.archived })
|
||||
Toast.show({ content: list.archived ? '已恢复到进行中' : '已归档' })
|
||||
load(true)
|
||||
} catch (e) {
|
||||
Toast.show({ content: e.message || '操作失败' })
|
||||
}
|
||||
}
|
||||
|
||||
async function removeList(list) {
|
||||
const ok = await Dialog.confirm({ content: `删除「${list.title}」？`, confirmText: '删除', cancelText: '取消' })
|
||||
if (!ok) return
|
||||
try {
|
||||
await checklistApi.remove(list.id)
|
||||
load(true)
|
||||
} catch (e) {
|
||||
Toast.show({ content: e.message || '删除失败' })
|
||||
}
|
||||
}
|
||||
|
||||
const sorted = useMemo(() => lists || [], [lists])
|
||||
|
||||
return (
|
||||
<div className="list-view">
|
||||
<div className="list-view-head">
|
||||
<Segmented
|
||||
options={[{ label: '进行中', value: 'active' }, { label: '已归档', value: 'archived' }]}
|
||||
value={archived ? 'archived' : 'active'}
|
||||
onChange={(v) => setArchived(v === 'archived')}
|
||||
/>
|
||||
<Button size="mini" color="primary" onClick={() => setShowForm(true)}>+ 新建</Button>
|
||||
</div>
|
||||
|
||||
{err && <div className="error-banner">{err}<span className="retry-link" onClick={() => load(false)}>重试</span></div>}
|
||||
{lists === null && !err && <div className="monitor-loading"><DotLoading /> 加载中...</div>}
|
||||
{lists !== null && !err && sorted.length === 0 && (
|
||||
<Empty description={archived ? '暂无归档清单' : '还没有检查清单'} />
|
||||
)}
|
||||
|
||||
<div className="checklist-wrap">
|
||||
{sorted.map((list) => {
|
||||
const open = openId === list.id
|
||||
return (
|
||||
<div key={list.id} className={'checklist-card' + (list.completed ? ' done' : '')}>
|
||||
<div className="checklist-head" onClick={() => setOpenId(open ? null : list.id)}>
|
||||
<div className="checklist-title-row">
|
||||
<span className="checklist-title">{list.title}</span>
|
||||
{list.scene && <span className="checklist-scene">{list.scene}</span>}
|
||||
</div>
|
||||
<div className="checklist-progress-row">
|
||||
<div className="checklist-bar">
|
||||
<div
|
||||
className="checklist-bar-fill"
|
||||
style={{ width: Math.round((list.percent || 0) * 100) + '%' }}
|
||||
/>
|
||||
</div>
|
||||
<span className="checklist-count">{list.done}/{list.total}</span>
|
||||
<span className={'checklist-arrow' + (open ? ' open' : '')}>›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{open && (
|
||||
<div className="checklist-body">
|
||||
{(list.items || []).map((item) => (
|
||||
<div key={item.id} className={'checklist-item' + (item.done ? ' done' : '')}>
|
||||
<span
|
||||
className="check-box"
|
||||
onClick={(e) => { e.stopPropagation(); toggleItem(list.id, item) }}
|
||||
>
|
||||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none">
|
||||
<path d="M4 12.5l5 5L20 6.5" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
<span className="checklist-item-title" onClick={() => toggleItem(list.id, item)}>
|
||||
{item.title}
|
||||
{item.note && <em>{item.note}</em>}
|
||||
</span>
|
||||
<span className="checklist-item-del" onClick={() => removeItem(list.id, item.id)}>×</span>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="checklist-add">
|
||||
<Input
|
||||
placeholder="添加检查项"
|
||||
value={newItem[list.id] || ''}
|
||||
onChange={(v) => setNewItem((m) => ({ ...m, [list.id]: v }))}
|
||||
onEnterPress={() => addItem(list.id, newItem[list.id])}
|
||||
/>
|
||||
<Button size="mini" color="primary" onClick={() => addItem(list.id, newItem[list.id])}>添加</Button>
|
||||
</div>
|
||||
|
||||
<div className="checklist-actions">
|
||||
<span className="habit-link" onClick={() => checkAll(list.id, true)}>全选</span>
|
||||
<span className="habit-link" onClick={() => checkAll(list.id, false)}>全不选</span>
|
||||
<span className="habit-link" onClick={() => duplicate(list)}>复制</span>
|
||||
<span className="habit-link" onClick={() => saveAsTemplate(list)}>存为模板</span>
|
||||
<span className="habit-link" onClick={() => toggleArchive(list)}>{list.archived ? '恢复' : '归档'}</span>
|
||||
<span className="habit-link danger" onClick={() => removeList(list)}>删除</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<Celebrate fire={bursts[list.id] || 0} color="#00b578" />
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<Popup
|
||||
visible={showForm}
|
||||
onMaskClick={() => setShowForm(false)}
|
||||
bodyStyle={{ borderTopLeftRadius: 12, borderTopRightRadius: 12, paddingBottom: 16 }}
|
||||
>
|
||||
<div className="form-popup">
|
||||
<div className="form-title">新建检查清单</div>
|
||||
<div className="form-field">
|
||||
<label>名称</label>
|
||||
<Input placeholder="例如：出差 · 杭州" value={form.title} onChange={(v) => setForm((f) => ({ ...f, title: v }))} />
|
||||
</div>
|
||||
<div className="form-field">
|
||||
<label>场景</label>
|
||||
<Selector
|
||||
options={SCENES.map((s) => ({ label: s, value: s }))}
|
||||
value={[form.scene]}
|
||||
onChange={(v) => setForm((f) => ({ ...f, scene: v[0] }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-field">
|
||||
<label>从模板生成（可选）</label>
|
||||
<Selector
|
||||
options={[{ label: '不使用模板', value: '' }, ...templates.map((t) => ({ label: t.name, value: String(t.id) }))]}
|
||||
value={[form.templateId]}
|
||||
onChange={(v) => setForm((f) => ({ ...f, templateId: v[0] }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-actions">
|
||||
<Button block color="primary" onClick={createList}>创建</Button>
|
||||
<Button block fill="outline" onClick={() => setShowForm(false)} style={{ marginTop: 8 }}>取消</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Popup>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
// 前端日期/周期工具: 与 server/checkin/period.js 保持同一套口径 (Asia/Shanghai)
|
||||
export const TZ = 'Asia/Shanghai'
|
||||
|
||||
const FMT = new Intl.DateTimeFormat('en-CA', {
|
||||
timeZone: TZ, year: 'numeric', month: '2-digit', day: '2-digit',
|
||||
})
|
||||
|
||||
/** 任意时间 -> 本地日历日 "YYYY-MM-DD" */
|
||||
export function toDateStr(d = new Date()) {
|
||||
return FMT.format(d instanceof Date ? d : new Date(d))
|
||||
}
|
||||
|
||||
function toUTC(s) {
|
||||
const [y, m, d] = String(s).split('-').map(Number)
|
||||
return new Date(Date.UTC(y, (m || 1) - 1, d || 1))
|
||||
}
|
||||
|
||||
function fromUTC(dt) {
|
||||
return dt.toISOString().slice(0, 10)
|
||||
}
|
||||
|
||||
export function addDays(s, n) {
|
||||
const d = toUTC(s)
|
||||
d.setUTCDate(d.getUTCDate() + n)
|
||||
return fromUTC(d)
|
||||
}
|
||||
|
||||
export function addMonths(s, n) {
|
||||
const [y, m] = String(s).split('-').map(Number)
|
||||
const first = new Date(Date.UTC(y, (m || 1) - 1 + n, 1))
|
||||
const day = Number(String(s).slice(8, 10)) || 1
|
||||
const lastDay = new Date(Date.UTC(first.getUTCFullYear(), first.getUTCMonth() + 1, 0)).getUTCDate()
|
||||
first.setUTCDate(Math.min(day, lastDay))
|
||||
return fromUTC(first)
|
||||
}
|
||||
|
||||
/** 周一为一周第一天 */
|
||||
export function startOfWeek(s) {
|
||||
const dow = (toUTC(s).getUTCDay() + 6) % 7
|
||||
return addDays(s, -dow)
|
||||
}
|
||||
|
||||
export const PERIOD_LABEL = { day: '每天', week: '每周', month: '每月', year: '每年' }
|
||||
|
||||
export function periodRange(period, s) {
|
||||
switch (period) {
|
||||
case 'week': {
|
||||
const start = startOfWeek(s)
|
||||
return { start, end: addDays(start, 6) }
|
||||
}
|
||||
case 'month': {
|
||||
const start = String(s).slice(0, 8) + '01'
|
||||
const [y, m] = String(s).split('-').map(Number)
|
||||
return { start, end: fromUTC(new Date(Date.UTC(y, m || 1, 0))) }
|
||||
}
|
||||
case 'year': {
|
||||
const y = String(s).slice(0, 4)
|
||||
return { start: y + '-01-01', end: y + '-12-31' }
|
||||
}
|
||||
default: return { start: s, end: s }
|
||||
}
|
||||
}
|
||||
|
||||
/** 月历网格: 返回 6*7 = 42 天 (含前后月的补位), 周一起始 */
|
||||
export function monthGrid(monthStr) {
|
||||
const first = monthStr + '-01'
|
||||
const gridStart = startOfWeek(first)
|
||||
const days = []
|
||||
for (let i = 0; i < 42; i++) days.push(addDays(gridStart, i))
|
||||
return days
|
||||
}
|
||||
|
||||
export function weekdayLabels() {
|
||||
return ['一', '二', '三', '四', '五', '六', '日']
|
||||
}
|
||||
|
||||
/** 相对今天的文案: 昨天 / 今天 / 明天 / MM-DD */
|
||||
export function dayLabel(dateStr, today = toDateStr()) {
|
||||
if (dateStr === today) return '今天'
|
||||
if (dateStr === addDays(today, -1)) return '昨天'
|
||||
if (dateStr === addDays(today, 1)) return '明天'
|
||||
return dateStr.slice(5).replace('-', '/')
|
||||
}
|
||||
|
||||
export function fmtMonth(monthStr) {
|
||||
const [y, m] = monthStr.split('-')
|
||||
return y + '年' + Number(m) + '月'
|
||||
}
|
||||
@@ -500,3 +500,171 @@ input, textarea, select { font: inherit; }
|
||||
color: #fff;
|
||||
}
|
||||
.oil-day.future .oil-day-status { color: rgba(255,255,255,.85); }
|
||||
|
||||
/* ================== 打卡 / 日历 / 清单 (V0.2) ================== */
|
||||
.checkin-content { padding: 0 0 16px; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
|
||||
.checkin-content .adm-tabs-content { --content-padding: 0; }
|
||||
|
||||
/* ----- 环形进度 ----- */
|
||||
.ring-wrap { position: relative; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; }
|
||||
.ring-wrap.clickable { cursor: pointer; }
|
||||
.ring-wrap.disabled { opacity: .5; }
|
||||
.ring-svg { display: block; }
|
||||
.ring-bar { transition: stroke-dashoffset 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
|
||||
.ring-center {
|
||||
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
|
||||
font-size: 13px; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.ring-num em { font-style: normal; font-size: 10px; color: var(--color-muted); font-weight: 400; }
|
||||
.ring-check { animation: ring-check-in 0.32s ease; }
|
||||
@keyframes ring-check-in { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
|
||||
.ring-over {
|
||||
position: absolute; right: -2px; bottom: -2px; font-size: 10px; font-weight: 600;
|
||||
color: #fff; background: #ff8f1f; border-radius: 8px; padding: 0 4px; line-height: 14px;
|
||||
}
|
||||
|
||||
/* ----- 完成特效 ----- */
|
||||
.celebrate { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
|
||||
.celebrate i {
|
||||
position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
|
||||
border-radius: 50%; animation: burst-fly 0.7s ease-out forwards;
|
||||
}
|
||||
@keyframes burst-fly {
|
||||
0% { transform: rotate(var(--a)) translateX(0) scale(1); opacity: 1; }
|
||||
70% { opacity: 1; }
|
||||
100% { transform: rotate(var(--a)) translateX(var(--d)) scale(0.3); opacity: 0; }
|
||||
}
|
||||
.celebrate-ring {
|
||||
position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
|
||||
border-radius: 50%; border: 2px solid var(--color-primary); animation: ring-pulse 0.7s ease-out forwards;
|
||||
}
|
||||
@keyframes ring-pulse {
|
||||
0% { transform: scale(0.3); opacity: 0.9; }
|
||||
100% { transform: scale(1.7); opacity: 0; }
|
||||
}
|
||||
|
||||
/* ----- 打卡视图 ----- */
|
||||
.habit-view { padding: 0 12px 20px; }
|
||||
.habit-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; padding: 10px 2px; }
|
||||
.habit-date { font-size: 18px; font-weight: 700; color: var(--color-text); }
|
||||
.habit-summary { font-size: 12px; color: var(--color-muted); margin-top: 2px; }
|
||||
.habit-summary strong { color: var(--color-primary); font-size: 14px; }
|
||||
.habit-badge { margin-left: 6px; font-size: 11px; color: #ad6800; background: #fff7e6; border-radius: 4px; padding: 1px 5px; }
|
||||
.habit-head-right { display: flex; gap: 6px; flex-shrink: 0; }
|
||||
.checkin-empty { padding: 48px 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
|
||||
|
||||
.habit-list { display: flex; flex-direction: column; gap: 10px; }
|
||||
.habit-card {
|
||||
position: relative; background: #fff; border-radius: 10px; padding: 12px;
|
||||
display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ring main actions" "foot foot foot";
|
||||
gap: 8px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
.habit-card:active { background: #fafafa; }
|
||||
.habit-card.done { background: #f7fbf8; }
|
||||
.habit-card .ring-wrap { grid-area: ring; }
|
||||
.habit-main { grid-area: main; min-width: 0; }
|
||||
.habit-actions { grid-area: actions; display: flex; align-items: center; }
|
||||
.habit-foot {
|
||||
grid-area: foot; display: flex; gap: 14px; padding-top: 8px; border-top: 1px dashed var(--color-border);
|
||||
}
|
||||
.habit-name { font-size: 15px; font-weight: 600; color: var(--color-text); word-break: break-all; }
|
||||
.habit-meta { font-size: 12px; color: var(--color-muted); margin-top: 3px; }
|
||||
.habit-streak { margin-left: 8px; color: #ff8f1f; background: rgba(255,143,31,.12); border-radius: 4px; padding: 1px 6px; }
|
||||
.habit-note { font-size: 11px; color: var(--color-muted); margin-top: 3px; }
|
||||
.habit-range { font-size: 11px; color: var(--color-muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
|
||||
.habit-over { margin-left: 8px; color: #ff8f1f; }
|
||||
.habit-link { font-size: 12px; color: var(--color-primary); cursor: pointer; }
|
||||
.habit-link.danger { color: var(--color-danger); }
|
||||
|
||||
/* ----- 日历视图 ----- */
|
||||
.calendar-view { padding: 0 12px 20px; }
|
||||
.cal-month-bar { display: flex; align-items: center; gap: 10px; padding: 8px 2px; }
|
||||
.cal-month { font-size: 16px; font-weight: 700; color: var(--color-text); }
|
||||
.cal-arrow { font-size: 20px; color: var(--color-muted); cursor: pointer; padding: 0 4px; line-height: 1; }
|
||||
.cal-today-btn { margin-left: auto; font-size: 12px; color: var(--color-primary); cursor: pointer; }
|
||||
.cal-quick { padding: 2px 0 10px; }
|
||||
.cal-grid { background: #fff; border-radius: 10px; padding: 8px 6px 10px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
|
||||
.cal-weekday, .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); }
|
||||
.cal-weekday span { text-align: center; font-size: 11px; color: var(--color-muted); padding: 4px 0; }
|
||||
.cal-day {
|
||||
position: relative; height: 38px; display: flex; flex-direction: column; align-items: center;
|
||||
justify-content: center; border-radius: 8px; cursor: pointer;
|
||||
}
|
||||
.cal-day-num { font-size: 13px; color: var(--color-text); font-variant-numeric: tabular-nums; }
|
||||
.cal-day.out .cal-day-num { color: #c8c8c8; }
|
||||
.cal-day.future .cal-day-num { color: #b0b0b0; }
|
||||
.cal-day.today .cal-day-num { color: var(--color-primary); font-weight: 700; }
|
||||
.cal-day.selected { background: var(--color-primary); }
|
||||
.cal-day.selected .cal-day-num { color: #fff; font-weight: 600; }
|
||||
.cal-dot { width: 5px; height: 5px; border-radius: 50%; margin-top: 3px; }
|
||||
.cal-dot.partial { background: #ffc53d; }
|
||||
.cal-dot.full { background: #00b578; }
|
||||
.cal-dot.over { background: #a855f7; }
|
||||
.cal-day.selected .cal-dot { background: #fff; }
|
||||
.cal-rate { font-size: 12px; color: var(--color-muted); padding: 8px 2px; }
|
||||
.cal-rate strong { color: var(--color-primary); }
|
||||
.cal-detail { margin-top: 6px; }
|
||||
.cal-detail-title { font-size: 14px; font-weight: 600; color: var(--color-text); padding: 6px 2px 8px; }
|
||||
.cal-item {
|
||||
position: relative; display: flex; align-items: center; gap: 8px; background: #fff;
|
||||
border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
|
||||
}
|
||||
.cal-item.done { background: #f7fbf8; }
|
||||
.cal-item-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
||||
.cal-item-name { font-size: 14px; font-weight: 600; color: var(--color-text); }
|
||||
.cal-item-meta { font-size: 11px; color: var(--color-muted); flex: 1; text-align: right; font-variant-numeric: tabular-nums; }
|
||||
.cal-item-right { flex-shrink: 0; }
|
||||
.cal-item-plan { font-size: 12px; color: var(--color-muted); }
|
||||
|
||||
/* ----- 清单视图 ----- */
|
||||
.list-view { padding: 0 12px 20px; }
|
||||
.list-view-head { display: flex; align-items: center; gap: 8px; padding: 8px 0 10px; }
|
||||
.list-view-head .adm-segmented { flex: 1; }
|
||||
.checklist-wrap { display: flex; flex-direction: column; gap: 10px; }
|
||||
.checklist-card {
|
||||
position: relative; background: #fff; border-radius: 10px; padding: 12px;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.04);
|
||||
}
|
||||
.checklist-card.done { background: #f7fbf8; }
|
||||
.checklist-head { cursor: pointer; }
|
||||
.checklist-title-row { display: flex; align-items: center; gap: 8px; }
|
||||
.checklist-title { font-size: 15px; font-weight: 600; color: var(--color-text); }
|
||||
.checklist-scene { font-size: 11px; color: var(--color-primary); background: #f0f5ff; border-radius: 4px; padding: 1px 6px; }
|
||||
.checklist-progress-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
|
||||
.checklist-bar { flex: 1; height: 6px; border-radius: 3px; background: #f0f0f0; overflow: hidden; }
|
||||
.checklist-bar-fill { height: 100%; border-radius: 3px; background: #00b578; transition: width 0.4s ease; }
|
||||
.checklist-count { font-size: 12px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
|
||||
.checklist-arrow { color: var(--color-muted); transition: transform 0.2s ease; }
|
||||
.checklist-arrow.open { transform: rotate(90deg); }
|
||||
.checklist-body { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--color-border); }
|
||||
.checklist-item { display: flex; align-items: center; gap: 8px; padding: 7px 0; }
|
||||
.check-box {
|
||||
width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #d0d0d0; flex-shrink: 0;
|
||||
display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
|
||||
transition: background 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
.check-box svg { opacity: 0; transition: opacity 0.15s ease; }
|
||||
.checklist-item.done .check-box { background: #00b578; border-color: #00b578; }
|
||||
.checklist-item.done .check-box svg { opacity: 1; }
|
||||
.checklist-item-title { flex: 1; font-size: 14px; color: var(--color-text); cursor: pointer; }
|
||||
.checklist-item-title em { display: block; font-style: normal; font-size: 11px; color: var(--color-muted); margin-top: 2px; }
|
||||
.checklist-item.done .checklist-item-title { color: #a0a0a0; text-decoration: line-through; }
|
||||
.checklist-item-del { color: #ccc; font-size: 18px; line-height: 1; padding: 0 4px; cursor: pointer; }
|
||||
.checklist-add { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
|
||||
.checklist-add .adm-input { flex: 1; border: 1px solid var(--color-border); border-radius: 6px; padding: 6px 8px; }
|
||||
.checklist-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
|
||||
|
||||
/* ----- 表单弹窗 (打卡项 / 清单) ----- */
|
||||
.form-popup { padding: 16px 16px 8px; }
|
||||
.form-title { font-size: 16px; font-weight: 700; color: var(--color-text); margin-bottom: 12px; }
|
||||
.form-field { margin-bottom: 14px; }
|
||||
.form-field > label { display: block; font-size: 12px; color: var(--color-muted); margin-bottom: 6px; }
|
||||
.form-field .adm-input { border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 10px; }
|
||||
.form-actions { margin-top: 18px; }
|
||||
.color-row { display: flex; gap: 10px; flex-wrap: wrap; }
|
||||
.color-dot {
|
||||
width: 26px; height: 26px; border-radius: 50%; cursor: pointer; display: inline-block;
|
||||
border: 2px solid transparent; transition: transform 0.15s ease;
|
||||
}
|
||||
.color-dot.active { border-color: rgba(0,0,0,.25); transform: scale(1.12); }
|
||||
|
||||
Reference in New Issue
Block a user