feat(任务/打卡): 已归档页面按原型重做; 打卡日历完成度改 4 档配色
Docker Build and Push / build-image (push) Successful in 1m27s
Docker Build and Push / build-image (push) Successful in 1m27s
一、已归档任务管理: 按评审通过的原型落地 (docs/V0.2/任务模块/已归档任务管理-原型.html)
- 去掉「任务类型」过滤: 类型是弱维度, 归档场景几乎不按它检索, 反而占掉一整行;
类型标签仍在行内展示。
- 关键词输入框前加常驻标签「标题」, 框内占位改为「输入关键词」。
- 归档时间新增快捷项: 全部 / 本周 / 本月 / 本季度 / 自定义;
选中后下方灰字回显实际区间 (本周=周一起算, 区间截至今天, 不跨未来);
「自定义」才展开两个日期选择器。
- 补上「筛选」按钮 (带生效条件数徽标) 与「重置」: 条件先编辑, 点按钮统一提交。
原实现改任一条件就即时重查, 连点会连发请求, 输关键词时列表会闪。
- 列表上方显示已应用条件标签 (可单独 ✕ 撤销) + 命中条数。
- 列表行重排: 标题独占一行, 元信息收成一行 (#编号 · 看板列 · 归档于日期),
「恢复 / 删除」由右侧竖排改到底部右侧横排, 降低行高。
- 空状态区分「这个项目还没有归档任务」(提示去 ⋯ 菜单归档) 与
「没有符合条件的归档任务」(建议放宽条件)。
- 修正日期边界: archivedList 的 from/to 原来直接拼 'T00:00:00Z',
本地选的日期会偏移 8 小时, 当天凌晨的归档被漏掉; 改为按本地时区换算成 UTC 瞬时。
二、打卡日历完成度配色: 由 3 档改 4 档
小半 (ratio < 0.5) -> 红 #ff3141
大半 (0.5 <= r < 1) -> 橘 #ff8f1f
完成 (r = 1) -> 蓝 #1677ff
超额 -> 绿 #00b578
注意服务端统计时把 actual 封顶在 expected (`Math.min(cnt, exp)`),
所以 ratio 永远 <= 1,**超额只能靠 status === 'over' 判断**,不能看比例;
DayRing 内新增 tierOf() 统一分级,图例同步改为四档。
验证 (真实 Windows 外壳 + CDP):
- 打卡页: 图例显示「小半/大半/完成/超额」, 计算样式分别为
rgb(255,49,65) / rgb(255,143,31) / rgb(22,119,255) / rgb(0,181,120);
当月实际渲染出 low=5 / high=1 / over=1。
- 已归档页: 筛选行标签为 标题/看板列/归档时间; 时间选项五项齐全;
按钮为 重置/筛选; 点「本周」回显 2026-10-26 ~ 2026-10-28, 点「筛选」后
徽标显示 1、条件标签可撤销、命中条数正确。
- 归档 → 已归档列表可见 → 恢复 全链路走通 (含上次修好的 TDZ 问题),
服务端确认 archived 由 t 变回 f。
- 控制台无异常。
This commit is contained in:
@@ -2,16 +2,31 @@
|
||||
//
|
||||
// 为什么是环而不是圆点:
|
||||
// 旧实现是 4px 小圆点, 只按状态上色 —— 3/5 和 5/5 都是同一个绿点,
|
||||
// 看不出"当天做到几成"。改成环形后 **弧长 = 当天完成比例**, 颜色仍表状态:
|
||||
// 0 < actual < expected -> 弧长按比例 (部分完成 / 半填充)
|
||||
// actual >= expected -> 整圈 (全部完成 / 实心)
|
||||
// actual = 0 且 expected > 0 -> 只有底环 (未开始 / 空心)
|
||||
// 看不出"当天做到几成"。改成环形后 **弧长 = 当天完成比例**, 颜色表状态:
|
||||
// 0 < actual < expected -> 弧长按比例 (部分完成)
|
||||
// actual >= expected -> 整圈 (全部完成)
|
||||
// actual = 0 且 expected > 0 -> 只有底环 (未开始)
|
||||
// expected = 0 由父组件判断, 不渲染本组件 (当天没有应打卡项)
|
||||
//
|
||||
// 颜色不写在这里: 由 CSS 按 `.mv-day` 作用域上色 (各视图调色板可能不同)。
|
||||
// 颜色分级 (4 档, 由 CSS 按 `.mv-day` 作用域上色, 各视图可各自调色板):
|
||||
// 小半 (ratio < 0.5) -> 红
|
||||
// 大半 (0.5 <= r < 1) -> 橘
|
||||
// 完成 (r = 1) -> 蓝
|
||||
// 超额 -> 绿
|
||||
// 注意: 服务端统计时把 actual 封顶在 expected (`Math.min(cnt, exp)`),
|
||||
// 所以 ratio 永远 <= 1, **超额只能靠 status === 'over' 判断**, 不能看比例。
|
||||
const DEFAULT_SIZE = 30
|
||||
const DEFAULT_STROKE = 2.5
|
||||
|
||||
/** 4 档分级: 小半 / 大半 / 完成 / 超额 */
|
||||
function tierOf(status, p) {
|
||||
if (status === 'over') return 'over'
|
||||
if (status === 'full') return 'full'
|
||||
if (p <= 0) return 'empty'
|
||||
if (p >= 1) return 'full'
|
||||
return p < 0.5 ? 'low' : 'high'
|
||||
}
|
||||
|
||||
export default function DayRing({
|
||||
status = 'partial',
|
||||
ratio = 0,
|
||||
@@ -19,6 +34,7 @@ export default function DayRing({
|
||||
stroke = DEFAULT_STROKE,
|
||||
}) {
|
||||
const p = Math.max(0, Math.min(1, Number(ratio) || 0))
|
||||
const tier = tierOf(status, p)
|
||||
const r = (size - stroke) / 2
|
||||
const c = 2 * Math.PI * r
|
||||
const half = size / 2
|
||||
@@ -37,7 +53,7 @@ export default function DayRing({
|
||||
/>
|
||||
{p > 0 && (
|
||||
<circle
|
||||
className={'day-ring-bar ' + status}
|
||||
className={'day-ring-bar ' + tier}
|
||||
cx={half} cy={half} r={r}
|
||||
fill="none" strokeWidth={stroke}
|
||||
strokeDasharray={c}
|
||||
|
||||
Reference in New Issue
Block a user