chore(dev): 新增 Windows 本地实时预览脚本 win:dev (不打包)

改完前端 UI 想立刻在 Windows 外壳里看效果, 原本要 tauri build 打包。实际外壳
用 tauri-plugin-hotswap, 启动时优先读 %APPDATA%\<identifier>\hotswap\ 下的覆盖
包, 没有才回退 exe 内置 dist —— 与线上 OTA 同一条路径。因此只构建前端并写进
覆盖目录 + 重启外壳即可, 不编译 Rust、不打 NSIS/便携包、不重装。

  npm run win:dev                  构建(shell 模式) + 挂载 + 重启
  npm run win:dev -- --no-build    复用现有 dist, 只挂载+重启 (~2s)
  npm run win:dev -- --clear       卸载覆盖, 回到内置前端
  npm run win:dev -- --no-launch   只改覆盖目录, 不碰外壳进程

读插件源码得到的两个硬约束 (写错会被静默丢弃或启动即回滚), 脚本已处理:
- min_binary_version 必须 == 外壳版本: 默认 DiscardOnUpgrade 在 binary > min 时
  丢弃缓存, 而安全线又要求 binary >= min, 只能取等号;
- confirmed 必须为 true: 默认 SingleLaunch 对未确认版本启动即回滚。
另: 目录名须为 seq-<数字>; sequence 取 Date.now() 让 OTA 检查认为已是最新,
避免线上更新顶掉本地版本。

README 补「Windows 本地实时预览(不打包)」章节: 用法/原理/约束表/注意事项。

README.md

@@ -274,3 +274,47 @@ Web 端不会自动下载包，也不会替换前端代码。
 - 由于只有 `master` 会部署，**迁移真正作用到生产库的唯一时机就是 master 发布**；
   开发分支上的迁移不会被自动应用，请在合并到 `master` 前确认可回滚。
 - 本地改了 `prisma/schema.prisma` 后：写迁移 SQL → `npx prisma migrate deploy` 验证 → 提交迁移目录。
+
+---
+
+## Windows 本地实时预览（不打包）
+
+改完前端 UI 想立刻在 **Windows 外壳**里看效果，不必 `tauri build`、不必打 NSIS/便携包、也不必重装。
+
+```bash
+npm run win:dev                  # 构建(shell 模式) + 挂载 + 重启外壳
+npm run win:dev -- --no-build    # 复用现有 dist, 只挂载+重启 (最快, 约 2 秒)
+npm run win:dev -- --no-launch   # 只挂载, 自己手动启动外壳
+npm run win:dev -- --exe "D:\path\iBoard.exe"
+npm run win:dev -- --clear       # 卸载覆盖, 外壳回到内置前端
+```
+
+### 原理
+
+外壳用 `tauri-plugin-hotswap`，启动时**先看覆盖目录有没有生效的前端包，没有才回退到 exe 内置的 `dist`**。
+这和线上 OTA 走的是同一条路径，所以只要把新构建的 `dist` 写进覆盖目录再重启外壳即可：
+
+```
+%APPDATA%\com.iboard.app\hotswap\
+  current              ← 文本文件, 内容为生效的目录名 (如 seq-1793068631298)
+  seq-1793068631298\   ← 本次前端 (dist 内容) + hotswap-meta.json
+```
+
+`hotswap-meta.json` 里有两个字段是**硬约束**，改错会导致覆盖包被丢弃或立刻回滚：
+
+| 字段 | 取值 | 原因 |
+| --- | --- | --- |
+| `min_binary_version` | **必须等于**外壳版本（当前 `0.2.1`） | 默认策略 `DiscardOnUpgrade` 在 `binary > min` 时丢弃缓存；安全线又要求 `binary >= min`，故只能取等号 |
+| `confirmed` | **必须为 `true`** | 默认策略 `SingleLaunch` 对未确认版本会在启动时立即回滚 |
+
+另外 `sequence` 取 `Date.now()`（大值），让 OTA 检查认为"已是最新"，避免线上更新把本地版本顶掉。
+
+### 注意
+
+- 覆盖目录就是外壳**真实的 OTA 落地目录**，挂载期间"我的"页会显示本地版本（`0.2.1-local`）；
+  测完建议 `npm run win:dev -- --clear` 复原，避免影响后续正常 OTA。
+- 脚本按 `src-tauri/tauri.conf.json` 的 `identifier` 推导覆盖目录，换 identifier 后无需改脚本。
+- 这只适用于**前端**改动。改了 `src-tauri/`（Rust/原生层、权限、CSP）必须重新打包外壳。
+- 想要带 HMR 的完整开发循环（改代码即时刷新、免手动重启）用 `npm run tauri:dev`，
+  代价是首次要编译一次 debug 版 Rust 二进制。
+

package.json

@@ -11,6 +11,7 @@
     "build:shell": "vite build --mode shell",
     "build:win": "node scripts/build-windows.mjs",
     "build:win:debug": "node scripts/build-windows.mjs --debug",
+    "win:dev": "node scripts/dev-windows-live.mjs",
     "build:ota": "node scripts/build-ota.mjs",
     "preview": "vite preview",
     "start": "node --experimental-strip-types --no-warnings server/index.js",

scripts/dev-windows-live.mjs

@@ -0,0 +1,172 @@
+#!/usr/bin/env node
+// Windows 外壳「本地实时预览」: 不打包, 直接把新前端挂到已安装外壳上跑
+//
+// 原理: 外壳用 tauri-plugin-hotswap, 启动时先看 %APPDATA%\<identifier>\hotswap\
+//   是否有生效的覆盖包, 有就从该目录读前端资源, 没有才回退到 exe 内置的 dist。
+//   所以只要构建 dist 并写进覆盖目录, 重启外壳即可看到改动 —— 无需 tauri build,
+//   无需重打 NSIS/APK, 也不用重装。
+//
+// 用法:
+//   npm run win:dev              # 构建(shell 模式) + 挂载 + 重启外壳
+//   npm run win:dev -- --no-build   # 复用现有 dist, 只挂载+重启 (最快)
+//   npm run win:dev -- --no-launch  # 只挂载, 不重启
+//   npm run win:dev -- --exe "D:\path\iBoard.exe"
+//   npm run win:dev -- --clear   # 卸载覆盖, 外壳回到内置版本
+//
+// 覆盖目录里生成的东西 (全部可删):
+//   hotswap/seq-<时间戳>/        本次前端 (dist 内容) + hotswap-meta.json
+//   hotswap/current              指向 seq-<时间戳> 的指针文件
+//
+// 注意: 覆盖目录是外壳的真实 OTA 落地目录, 挂载期间「我的」页会显示本地版本;
+//       --clear 会清掉本脚本产生的覆盖, 恢复正常 OTA 行为。
+import { spawnSync } from 'node:child_process'
+import fs from 'node:fs'
+import os from 'node:os'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
+const args = process.argv.slice(2)
+const has = (f) => args.includes(f)
+const val = (f, d) => { const i = args.indexOf(f); return i >= 0 && args[i + 1] ? args[i + 1] : d }
+
+const CLEAR = has('--clear')
+const NO_BUILD = has('--no-build')
+const NO_LAUNCH = has('--no-launch')
+
+const conf = JSON.parse(fs.readFileSync(path.join(root, 'src-tauri', 'tauri.conf.json'), 'utf8'))
+const APP_ID = conf.identifier // 覆盖目录名 = 外壳 identifier
+const BINARY_VERSION = conf.version // 外壳版本: min_binary_version 必须与它相等
+const APP_VERSION = JSON.parse(fs.readFileSync(path.join(root, 'package.json'), 'utf8')).version
+
+const HOTSWAP_DIR = path.join(os.homedir(), 'AppData', 'Roaming', APP_ID, 'hotswap')
+
+function log(msg) { console.log(`[win:dev] ${msg}`) }
+function die(msg) { console.error(`[win:dev] 错误: ${msg}`); process.exit(1) }
+
+/** 找已安装的外壳 exe */
+function findExe() {
+  const explicit = val('--exe', '')
+  if (explicit) return explicit
+  const candidates = [
+    'C:\\Program Files\\iboard\\iBoard.exe',
+    'C:\\Program Files\\iBoard\\iBoard.exe',
+    path.join(root, 'src-tauri', 'target', 'release', 'iBoard.exe'),
+    path.join(root, 'src-tauri', 'target', 'debug', 'iBoard.exe'),
+  ]
+  return candidates.find((p) => fs.existsSync(p)) || ''
+}
+
+/** 清掉覆盖目录里本脚本(或上次 OTA)留下的生效版本 */
+function clearOverride() {
+  if (!fs.existsSync(HOTSWAP_DIR)) { log('覆盖目录不存在, 无需清理'); return }
+  const current = path.join(HOTSWAP_DIR, 'current')
+  if (fs.existsSync(current)) { fs.rmSync(current); log('已移除 current 指针') }
+  let n = 0
+  for (const e of fs.readdirSync(HOTSWAP_DIR)) {
+    if (/^seq-\d+$/.test(e)) { fs.rmSync(path.join(HOTSWAP_DIR, e), { recursive: true, force: true }); n++ }
+  }
+  log(`已移除 ${n} 个覆盖版本目录 -> 外壳将回退到内置前端`)
+}
+
+/** 构建前端 (shell 模式: VITE_API_BASE 指向远端后端, 与打包口径一致) */
+function buildFrontend() {
+  const vite = path.join(root, 'node_modules', 'vite', 'bin', 'vite.js')
+  if (!fs.existsSync(vite)) die('未找到 vite, 请先 npm install')
+  // esbuild 需要可写的临时目录; 指向仓库内, 避免系统 TEMP 权限问题
+  const tmp = path.join(root, '.esbuild-tmp')
+  fs.mkdirSync(tmp, { recursive: true })
+  log('构建前端 (vite build --mode shell) ...')
+  const r = spawnSync(process.execPath, [vite, 'build', '--mode', 'shell'], {
+    cwd: root,
+    stdio: 'inherit',
+    env: { ...process.env, TEMP: tmp, TMP: tmp },
+  })
+  if (r.status !== 0) die('前端构建失败')
+}
+
+/** 把 dist 挂成生效的 hotswap 覆盖包 */
+function installOverride() {
+  const dist = path.join(root, 'dist')
+  if (!fs.existsSync(path.join(dist, 'index.html'))) die('dist/index.html 不存在, 请先构建')
+
+  fs.mkdirSync(HOTSWAP_DIR, { recursive: true })
+  const seq = Date.now() // 单调递增; 取大值可让 OTA 检查认为"已是最新", 不会覆盖本次本地版本
+  const dirName = `seq-${seq}`
+  const dir = path.join(HOTSWAP_DIR, dirName)
+
+  fs.rmSync(dir, { recursive: true, force: true })
+  fs.mkdirSync(dir, { recursive: true })
+  fs.cpSync(dist, dir, { recursive: true })
+
+  // 元数据字段见 tauri-plugin-hotswap/src/manifest.rs
+  //   min_binary_version 必须 == 外壳版本: 默认 DiscardOnUpgrade 策略在
+  //   binary > min 时会丢弃缓存; 而安全线又要求 binary >= min, 故只能取等号
+  //   confirmed 必须为 true: 默认 SingleLaunch 策略对未确认版本会在启动时立刻回滚
+  fs.writeFileSync(path.join(dir, 'hotswap-meta.json'), JSON.stringify({
+    version: `${APP_VERSION}-local`,
+    sequence: seq,
+    min_binary_version: BINARY_VERSION,
+    confirmed: true,
+    unconfirmed_launch_count: 0,
+  }, null, 2))
+
+  fs.writeFileSync(path.join(HOTSWAP_DIR, 'current'), dirName)
+
+  // 保留策略只留最近 2 个, 顺手清掉更早的本地版本
+  const olds = fs.readdirSync(HOTSWAP_DIR)
+    .filter((e) => /^seq-\d+$/.test(e) && e !== dirName)
+    .sort()
+    .slice(0, -1)
+  for (const o of olds) fs.rmSync(path.join(HOTSWAP_DIR, o), { recursive: true, force: true })
+
+  log(`已挂载覆盖包: ${dirName}`)
+  log(`  版本 ${APP_VERSION}-local (外壳 ${BINARY_VERSION})`)
+  return dirName
+}
+
+/** 结束正在运行的外壳 (需要重启才会读取覆盖包) */
+function stopRunning(exe) {
+  const r = spawnSync('tasklist', ['/FI', 'IMAGENAME eq iBoard.exe', '/NH'], { encoding: 'utf8' })
+  const out = r.stdout || ''
+  if (!/iBoard\.exe/i.test(out)) return false
+  log('检测到外壳正在运行, 结束它以便重启 ...')
+  spawnSync('taskkill', ['/IM', 'iBoard.exe', '/F'], { stdio: 'inherit' })
+  return true
+}
+
+function launch(exe) {
+  if (!exe) {
+    log('未找到外壳 exe, 跳过启动。可用 --exe 指定路径, 或手动启动后再验证。')
+    return
+  }
+  log(`启动: ${exe}`)
+  // 用 Start-Process 让外壳脱离本进程, 脚本退出后应用继续运行
+  const ps = `Start-Process -FilePath '${exe.replace(/'/g, "''")}'`
+  const r = spawnSync('powershell.exe', ['-NoProfile', '-Command', ps], { stdio: 'inherit' })
+  if (r.status !== 0) log('启动命令返回非 0, 请手动启动外壳')
+}
+
+// ---------- main ----------
+// --no-launch 表示"不碰外壳进程": 既不结束也不启动, 只改覆盖目录
+if (CLEAR) {
+  if (!NO_LAUNCH) stopRunning()
+  clearOverride()
+  if (!NO_LAUNCH) launch(findExe())
+  else log('已清理。外壳下次启动即回到内置前端 (当前若在运行, 重启后生效)。')
+  process.exit(0)
+}
+
+if (!NO_BUILD) buildFrontend()
+installOverride()
+
+const exe = findExe()
+if (!NO_LAUNCH) {
+  stopRunning(exe)
+  launch(exe)
+} else {
+  log('已挂载。外壳下次启动生效 (当前若在运行, 重启后生效)。')
+}
+
+log('完成。改完 UI 后重跑 `npm run win:dev` 即可看到新版本 (想更快可加 --no-build 复用 dist)。')
+log('恢复到内置版本: `npm run win:dev -- --clear`')

src/components/checkin/DayRing.jsx

@@ -0,0 +1,50 @@
+// 打卡日历的日期标记: 环形进度 (F-CL-06)
+//
+// 为什么是环而不是圆点:
+//   旧实现是 4px 小圆点, 只按状态上色 —— 3/5 和 5/5 都是同一个绿点,
+//   看不出"当天做到几成"。改成环形后 **弧长 = 当天完成比例**, 颜色仍表状态:
+//     0 < actual < expected -> 弧长按比例 (部分完成 / 半填充)
+//     actual >= expected    -> 整圈        (全部完成 / 实心)
+//     actual = 0 且 expected > 0 -> 只有底环 (未开始 / 空心)
+//   expected = 0 由父组件判断, 不渲染本组件 (当天没有应打卡项)
+//
+// 颜色不写在这里: 由 CSS 按 `.mv-day` 作用域上色 (各视图调色板可能不同)。
+const DEFAULT_SIZE = 30
+const DEFAULT_STROKE = 2.5
+
+export default function DayRing({
+  status = 'partial',
+  ratio = 0,
+  size = DEFAULT_SIZE,
+  stroke = DEFAULT_STROKE,
+}) {
+  const p = Math.max(0, Math.min(1, Number(ratio) || 0))
+  const r = (size - stroke) / 2
+  const c = 2 * Math.PI * r
+  const half = size / 2
+  return (
+    <svg
+      className="day-ring"
+      width={size}
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      aria-hidden="true"
+    >
+      <circle
+        className="day-ring-bg"
+        cx={half} cy={half} r={r}
+        fill="none" strokeWidth={stroke}
+      />
+      {p > 0 && (
+        <circle
+          className={'day-ring-bar ' + status}
+          cx={half} cy={half} r={r}
+          fill="none" strokeWidth={stroke}
+          strokeDasharray={c}
+          strokeDashoffset={c * (1 - p)}
+          transform={`rotate(-90 ${half} ${half})`}
+        />
+      )}
+    </svg>
+  )
+}

src/pages/checkin/CalendarView.jsx

@@ -1,173 +0,0 @@
-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>
-  )
-}

src/pages/checkin/HabitView.jsx

@@ -1,338 +0,0 @@
-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 useHabitDrag from '../../components/checkin/useHabitDrag.js'
-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 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 || []
-    // 手动排序优先 (sortOrder), 拖动排序后覆盖 F-CK-16 的"未完成在前"
-    return [...list].sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0) || a.id - b.id)
-  }, [data])
-
-  // 按周期分组 (每天/每周/每月/每年), 组内顺序 = 手动排序
-  const groups = useMemo(() => {
-    const out = []
-    for (const p of PERIOD_OPTIONS) {
-      const list = items.filter((i) => i.period === p.value)
-      if (list.length) out.push({ key: p.value, label: p.label, list })
-    }
-    const known = new Set(PERIOD_OPTIONS.map((p) => p.value))
-    const rest = items.filter((i) => !known.has(i.period))
-    if (rest.length) out.push({ key: 'other', label: '其他', list: rest })
-    return out
-  }, [items])
-
-  const drag = useHabitDrag({ onDrop: reorderHabit })
-
-  // 组内拖动落位: 重排后按展平顺序整体重写 sortOrder
-  async function reorderHabit(dragged, targetId, after) {
-    const snapshot = data
-    const g = groups.find((x) => x.key === dragged.period)
-    if (!g) return
-    const rest = g.list.filter((i) => i.id !== dragged.id)
-    const ti = rest.findIndex((i) => i.id === targetId)
-    if (ti < 0) return
-    rest.splice(after ? ti + 1 : ti, 0, dragged)
-    const flat = groups.map((x) => (x.key === g.key ? rest : x.list)).flat()
-    const withOrder = flat.map((it, i) => ({ ...it, sortOrder: i }))
-    setData((d) => ({ ...d, items: withOrder }))
-    try {
-      await checkinApi.reorderHabits(flat.map((i) => i.id))
-    } catch (e) {
-      setData(snapshot)
-      Toast.show({ content: e.message || '排序保存失败' })
-    }
-  }
-
-  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" 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">
-        {groups.map((g) => (
-          <div key={g.key}>
-            <div className="habit-group-title">
-              {g.label}
-              <span className="cnt">{g.list.length}</span>
-            </div>
-            {g.list.map((item) => (
-              <div
-                key={item.id}
-                data-habit-row
-                data-habit-id={item.id}
-                className={
-                  'habit-card'
-                  + (item.completed ? ' done' : '')
-                  + (drag.dragItem?.id === item.id ? ' dragging' : '')
-                  + (drag.over?.id === item.id ? ` dragover ${drag.over.after ? 'after' : 'before'}` : '')
-                }
-                {...drag.bind(item)}
-              >
-                <RingProgress
-                  percent={item.percent}
-                  done={item.done}
-                  target={item.target}
-                  over={item.over}
-                  completed={item.completed}
-                  color={item.color}
-                  onClick={() => { if (!drag.justEnded()) 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={() => { if (!drag.justEnded()) doCheck(item) }}
-                  >
-                    {item.completed ? '再打一次' : '打卡'}
-                  </Button>
-                </div>
-                <div className="habit-foot">
-                  {item.done > 0 && (
-                    <span className="habit-link" onClick={() => { if (!drag.justEnded()) doUncheck(item) }}>撤销</span>
-                  )}
-                  <span
-                    className="habit-link"
-                    onClick={() => {
-                      if (drag.justEnded()) return
-                      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={() => { if (!drag.justEnded()) removeHabit(item) }}>归档</span>
-                </div>
-                <Celebrate fire={bursts[item.id] || 0} color={item.color} />
-              </div>
-            ))}
-          </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>
-  )
-}

src/pages/checkin/MergedView.jsx

@@ -9,6 +9,7 @@ import {
   Button, Dialog, DotLoading, Empty, Input, Popup, Selector, Stepper, Toast,
 } from 'antd-mobile'
 import RingProgress, { Celebrate } from '../../components/RingProgress.jsx'
+import DayRing from '../../components/checkin/DayRing.jsx'
 import useHabitDrag from '../../components/checkin/useHabitDrag.js'
 import { checkinApi } from '../../api/checkin.js'
 import useRefreshOnVisible from '../../hooks/useRefreshOnVisible.js'
@@ -266,6 +267,8 @@ export default function MergedView({ date, onDateChange }) {
             const info = byDate.get(d)
             const inMonth = d.slice(0, 7) === month
             const status = info?.status || 'empty'
+            // 环的弧长 = 当天完成比例 (F-CL-06); 未来日期不画环 (计划 != 未完成)
+            const showRing = inMonth && !!info && !info.isFuture && (info.expected || 0) > 0
             return (
               <div
                 key={d}
@@ -275,8 +278,12 @@ export default function MergedView({ date, onDateChange }) {
                 }
                 onClick={() => onDateChange(d)}
               >
-                <span>{Number(d.slice(8, 10))}</span>
+                <span className="mv-day-inner">
-                {inMonth && status !== 'empty' && <i className={status} />}
+                  {showRing && (
+                    <DayRing status={status} ratio={(info.actual || 0) / info.expected} size={26} stroke={2.2} />
+                  )}
+                  <span>{Number(d.slice(8, 10))}</span>
+                </span>
               </div>
             )
           })}
@@ -284,8 +291,13 @@ export default function MergedView({ date, onDateChange }) {
 
         {cal && (
           <div className="mv-rate">
-            <span>本月完成率</span>
+            <span>本月完成率 <b>{Math.round((cal.rate || 0) * 100)}%</b></span>
-            <b>{Math.round((cal.rate || 0) * 100)}%</b>
+            {/* 图例: 弧长=完成比例, 颜色=状态 */}
+            <span className="mv-legend">
+              <i className="partial" />部分
+              <i className="full" />完成
+              <i className="over" />超额
+            </span>
           </div>
         )}
       </div>

src/pages/task/TaskDetail.jsx

@@ -128,13 +128,15 @@ export default function TaskDetail({ task, projectCode, columns, members, tasks,
    *  这里始终按 String() 比对, 不要 Number(): 否则结果变 NaN, 落库列被改成 "NaN" 报「看板列不存在」 */
   function pickColumn() {
     const current = String(task.columnId)
-    ActionSheet.show({
+    const handler = ActionSheet.show({
       actions: (columns || []).map((c) => ({
         text: c.name + (String(c.id) === current ? ' ✓' : ''),
         key: String(c.id),
       })),
       cancelText: '取消',
       onAction: async (item) => {
+        // 选中即收起 sheet (与项目视图 ⋯ 菜单同口径); 否则改完列 sheet 还挂在那
+        handler.close?.()
         const columnId = String(item.key)
         if (columnId === current) return
         try {
@@ -200,28 +202,35 @@ export default function TaskDetail({ task, projectCode, columns, members, tasks,
         borderTopLeftRadius: 12,
         borderTopRightRadius: 12,
         maxHeight: `calc(88vh - ${kb}px)`,
-        overflowY: 'auto',
+        // 三段式: 固定头 / 滚动体 / 固定底 (标题与保存按钮始终可见)
-        padding: `16px 16px calc(env(safe-area-inset-bottom, 0px) + 20px + ${kb}px)`,
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        padding: 0,
       }}
     >
-      <div className="sheet-title">{task.title}</div>
+      {/* 固定头部: 标题 + 看板列/状态 + 编号 */}
-      {fullId && (
+      <div className="td-head">
-        <div className="sheet-idrow">
+        <div className="sheet-title">{task.title}</div>
-          <span
+        {/* 看板列 · 状态 与完整任务编号同一行, 编号靠右 (点按复制) */}
-            className="task-id-chip"
+        <div className="sheet-sub">
-            role="button"
+          <span className="sub-meta">{currentCol?.name} · {STATUS_LABEL[task.status]}</span>
-            title="点击复制完整任务编号"
+          {fullId && (
-            onClick={copyId}
+            <span
-          >
+              className="task-id-chip"
-            <span className="tid">{fullId}</span>
+              role="button"
-            <span className="tid-copy">{copied ? '已复制' : '复制'}</span>
+              title="点击复制完整任务编号"
-          </span>
+              onClick={copyId}
+            >
+              <span className="tid">{fullId}</span>
+              <span className="tid-copy">{copied ? '已复制' : '复制'}</span>
+            </span>
+          )}
         </div>
-      )}
-      <div className="sheet-sub">
-        {currentCol?.name} · {STATUS_LABEL[task.status]}
       </div>
 
+      {/* 可滚动主体: 只有这一段滚动 */}
+      <div className="td-body">
       <div className="field">
         <label>标题</label>
         <input
@@ -386,8 +395,15 @@ export default function TaskDetail({ task, projectCode, columns, members, tasks,
           }}
         />
       </div>
+      </div>{/* /.td-body */}
 
-      <div className="btn-primary" onClick={save}>{saving ? '保存中…' : '保存'}</div>
+      {/* 固定底部: 保存 (键盘弹出时随 kb 上抬) */}
+      <div
+        className="td-foot"
+        style={{ paddingBottom: `calc(env(safe-area-inset-bottom, 0px) + 12px + ${kb}px)` }}
+      >
+        <div className="btn-primary" onClick={save}>{saving ? '保存中…' : '保存'}</div>
+      </div>
 
       <UserPicker
         visible={picker === 'assignee'}

src/styles/globals.css

@@ -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-inner {
-.mv-day i.full { background: #00b578; }
+  position: relative; width: 26px; height: 26px;
-.mv-day i.over { background: #ff6b6b; }
+  display: flex; align-items: center; justify-content: center;
-.mv-day.sel i { background: #fff; }
+}
+.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; }
@@ -1199,18 +1135,37 @@ body.me-safe-top .app-safe-top { height: 0; }
 .cs-count { font-size: 11px; color: #999; margin-left: 8px; }
 
 /* ---- 任务详情 ---- */
+/* 三段式弹层: 固定头 / 滚动体 / 固定底 —— 标题与保存按钮始终可见 */
+.td-head {
+  flex: 0 0 auto; padding: 16px 16px 8px; background: #fff;
+  border-bottom: 1px solid var(--color-border);
+}
+.td-body {
+  flex: 1 1 auto; min-height: 0; overflow-y: auto;
+  padding: 12px 16px 4px;
+  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
+}
+.td-foot {
+  flex: 0 0 auto; padding: 10px 16px 12px; background: #fff;
+  border-top: 1px solid var(--color-border);
+}
+/* 底部固定后不再需要上外边距 */
+.td-foot .btn-primary { margin-top: 0; }
 .sheet-title {
   font-size: 16px; font-weight: 700; margin-bottom: 4px; word-break: break-word;
   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
 }
+/* 详情页副标题行: 左侧「看板列 · 状态」, 右侧完整任务编号 (点按复制) */
 .sheet-sub {
+  display: flex; align-items: center; gap: 8px;
   font-size: 11.5px; color: #999; margin-bottom: 14px;
+}
+.sheet-sub .sub-meta {
+  flex: 1 1 auto; min-width: 0;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
-/* 详情页标题下的完整任务编号 (项目编号-序号): 点按复制 */
-.sheet-idrow { margin: -1px 0 6px; }
 .task-id-chip {
-  display: inline-flex; align-items: center; gap: 6px;
+  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
   font-size: 11px; line-height: 1; font-weight: 600;
   color: #5b6b7c; background: #eef2f6; border-radius: 999px; padding: 5px 9px;
   cursor: pointer; -webkit-user-select: none; user-select: none;