Fullstack/iboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(打卡): 日历日期标记改为比例环, 并移除无引用死代码

Browse Source 
日期标记 (F-CL-06): 旧实现是只按状态上色的 4px 圆点, 看不出完成度 ——
3/5 与 5/5 是同一个绿点。改为环形进度, 弧长 = 当天完成比例:
  expected = 0        -> 不画环 (当天没有应打卡项)
  expected > 0, 0 次  -> 空心环 (未开始)
  部分完成            -> 弧长按比例 (半填充)
  达标 / 超额         -> 整圈 (实心; 超额换色区分)
未来日期不画环 (计划 != 未完成); 选中日改用白环, 弧长仍表完成度;
「本月完成率」右侧补图例。

- 新增 components/checkin/DayRing.jsx (共享环形标记, 颜色交由 CSS 按视图上色)
- MergedView 日历格子接入该环
- 删除无引用死代码: pages/checkin/CalendarView.jsx (173 行) 与
  HabitView.jsx (338 行) —— V0.2.1 合并「打卡/日历」tab 后遗留, 全库扫描确认
  无任何 import/动态 import 引用; 连带清理仅服务于它们的 CSS
  (保留仍被 ListView 使用的 .habit-link)

验证: 桩 fetch 渲染真实 MergedView, 15 项断言通过 —— 空心环 / 弧长 25%·50%
精确匹配 / 整圈 / 三态配色 / 未来不画环 / 选中日白弧 60% / 图例 / 旧圆点已移除。
This commit is contained in:
jif2.zhang
2026-10-27 15:48:14 +08:00
parent 32f404ac90
commit 0fc45aa6ec
5 changed files with 90 additions and 603 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/globals.css
+24 -88
View File
@@ -666,54 +666,11 @@ body.me-safe-top .app-safe-top { height: 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); }
/* 打卡项分组 + 长按拖动排序 (组内) */
.habit-view { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.habit-view input, .habit-view textarea { -webkit-user-select: text; user-select: text; }
.habit-group-title {
display: flex; align-items: center; gap: 7px; padding: 10px 2px 4px;
font-size: 12px; color: var(--color-muted); font-weight: 600;
}
.habit-group-title::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: var(--color-primary); }
.habit-group-title .cnt { color: #b8bcc4; font-weight: 400; }
.habit-card { touch-action: pan-y; }
.habit-card.dragging { opacity: 0.55; outline: 2px dashed var(--color-primary); outline-offset: 1px; }
.habit-card.dragover { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.habit-card.dragover.after { border-bottom: 3px solid var(--color-primary); }
.habit-card.dragover.before { border-top: 3px solid var(--color-primary); }
/* 拖动把手 (⠿): touch-action:none —— 浏览器完全不接管该触摸,
指针流不会被滚动抢占取消, 是 Android WebView 上唯一可靠的拖动入口 */
.grip {
@@ -777,46 +734,6 @@ body.me-safe-top .app-safe-top { height: 0; }
box-shadow: 0 12px 28px rgba(15,23,42,.28);
}
/* ----- 日历视图 ----- */
.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; }
@@ -938,6 +855,12 @@ body.me-safe-top .app-safe-top { height: 0; }
/* 上: 月历; 下: 当日打卡项, 按 每天/每周/每月 分组. 卡片紧凑化. */
.mv-view { display: flex; flex-direction: column; min-height: 0; }
/* ---- 日期标记环 (共享, 见 components/checkin/DayRing.jsx) ----
弧长 = 当天完成比例; 颜色按状态由各视图 CSS 分别上色 (调色板不同) */
.day-ring { position: absolute; inset: 0; pointer-events: none; }
.day-ring-bg { stroke: #e6e9ee; }
.day-ring-bar { stroke-linecap: round; }
/* ---- 月历 ---- */
.mv-cal { background: #fff; border-radius: 10px; margin: 8px 12px 0; padding: 6px 6px 8px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.mv-month { display: flex; align-items: center; gap: 8px; padding: 2px 4px 6px; }
@@ -955,13 +878,26 @@ body.me-safe-top .app-safe-top { height: 0; }
.mv-day.future { color: #b0b0b0; }
.mv-day.today { color: var(--color-primary); font-weight: 700; }
.mv-day.sel { background: var(--color-primary); color: #fff; font-weight: 600; }
.mv-day i { width: 4px; height: 4px; border-radius: 50%; margin-top: 2px; }
.mv-day i.partial { background: #ff8f1f; }
.mv-day i.full { background: #00b578; }
.mv-day i.over { background: #ff6b6b; }
.mv-day.sel i { background: #fff; }
/* 日期标记: 环形进度 (弧长=完成比例) */
.mv-day-inner {
position: relative; width: 26px; height: 26px;
display: flex; align-items: center; justify-content: center;
}
.mv-day .day-ring-bar.partial { stroke: #ff8f1f; }
.mv-day .day-ring-bar.full { stroke: #00b578; }
.mv-day .day-ring-bar.over { stroke: #ff6b6b; }
/* 选中日: 蓝底之上改用白色环, 弧长仍表达完成度 */
.mv-day.sel .day-ring-bg { stroke: rgba(255, 255, 255, .38); }
.mv-day.sel .day-ring-bar { stroke: #fff; }
.mv-rate { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--color-muted); padding: 7px 6px 0; }
.mv-rate b { color: var(--color-primary); }
/* 图例: 环颜色 -> 状态 */
.mv-legend { display: inline-flex; align-items: center; gap: 4px; color: #b0b6bf; }
.mv-legend i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-left: 5px; }
.mv-legend i:first-child { margin-left: 0; }
.mv-legend i.partial { background: #ff8f1f; }
.mv-legend i.full { background: #00b578; }
.mv-legend i.over { background: #ff6b6b; }
/* ---- 当日栏 ---- */
.mv-daybar { display: flex; align-items: center; gap: 8px; padding: 10px 14px 2px; font-size: 13px; font-weight: 600; }