fix(V0.2): 拖动可靠性重做 —— 把手入口 + 打卡排序接入实际渲染视图

问题定位:
- 打卡页实际渲染的是 MergedView (CheckinPage 路由), 上次改的 HabitView
  是未使用的旧组件, 打包时被 tree-shake, 线上自然无任何效果
- 任务列表长按抬起后一动即脱手: touch-action:pan-y 下手指出现纵向分量,
  WebView/渲染器直接把触摸判给滚动并 pointercancel, touchmove preventDefault
  拦不住已决定的滚动 (看板可用只因该模式下页面无纵向可滚祖先)

修复:
- 新增 ⠿ 拖动把手 (touch-action:none): 浏览器按规范完全不接管该触摸,
  按下立即拖动, CDP 触摸仿真验证: 垂直拖动穿过可滚列表正常落点,
  跨组(每天/每周/每月)正确拒绝; 任务行把手拖动换列, 打卡卡片把手组内排序
- useRowDrag/useHabitDrag 抽出 armListeners, 新增 bindHandle 立即激活路径
- MergedView: 组内排序改按 sortOrder (服务端已返回), 拖动落位乐观更新 +
  POST /checkin/habits/reorder, 失败回滚; 打卡点击加拖动余波保护
- 长按路径保留为补充入口 (不可滚场景仍可用)

src/components/checkin/useHabitDrag.js

@@ -1,12 +1,17 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 
-// 打卡项组内拖动排序
+// 打卡项组内拖动排序 (MergedView 分组列表)
-//   手势与任务列表/看板一致: 长按 400ms 原位抬起(震动), 之后拖动;
+//   两条触发路径, 状态机共用:
-//   elementFromPoint 命中同一周期组内的 [data-habit-row] 作为落点,
+//   1. 把手 (bindHandle, 推荐): 卡片右侧 ⠿ 把手 touch-action:none,
-//   按指针在目标卡上半/下半决定插到其前/后, 松手提交。
+//      指针按下立即激活 —— 浏览器按规范完全不接管该触摸, 指针流不会被
-//   只允许组内 (每天/每周/每月/每年) 排序, 命中其他组视为无效落点。
+//      滚动抢占取消, 在 Android WebView 上 100% 可靠;
-//   激活后用非 passive touchmove preventDefault 拦截浏览器滚动接管,
+//   2. 长按 (bind): 长按 400ms 原位抬起(震动)后拖动。pan-y 下列表一旦
-//   保证纵向拖动期间指针事件持续派发 (同 useRowDrag 的教训)。
+//      可滚动, 手指纵向抖动即触发浏览器滚动接管 (pointercancel), 手势
+//      被取消 —— 该路径在整页可滚的场景不可靠, 仅作补充入口。
+//   拖动中 elementFromPoint 命中同组 [data-habit-row] 作为落点 (data-habit-period
+//   必须与拖动项一致, 即只在 每天/每周/每月 组内排序), 按指针在目标卡
+//   上半/下半决定插到其前/后, 松手提交。
+//   激活后用非 passive touchmove preventDefault 尽力拦截滚动接管。
 export default function useHabitDrag({ onDrop }) {
   const [dragItem, setDragItem] = useState(null)       // 拖动中的打卡项 (视觉态)
   const [over, setOver] = useState(null)               // { id, after } 落点
@@ -30,8 +35,12 @@ export default function useHabitDrag({ onDrop }) {
     const el = document.elementFromPoint(x, y)
     const rowEl = el?.closest?.('[data-habit-row]')
     if (!rowEl) return null
+    // 只认同一周期组的落点
+    if (rowEl.dataset.habitPeriod !== st.current.item?.period) return null
     const r = rowEl.getBoundingClientRect()
-    return { id: Number(rowEl.dataset.habitId), after: y > r.top + r.height / 2 }
+    const id = Number(rowEl.dataset.habitId)
+    if (id === st.current.item.id) return null
+    return { id, after: y > r.top + r.height / 2 }
   }
 
   const onMove = (ev) => {
@@ -44,9 +53,8 @@ export default function useHabitDrag({ onDrop }) {
     }
     ev.preventDefault()
     const hit = hitRow(ev.clientX, ev.clientY)
-    // 只认同一周期组的落点
+    if (hit) { s.over = hit; setOver(hit) }
-    if (hit && hit.id !== s.item.id) { s.over = hit; setOver(hit) }
+    else if (s.over) { s.over = null; setOver(null) }
-    else { s.over = null; setOver(null) }
   }
 
   const onUp = () => {
@@ -58,40 +66,64 @@ export default function useHabitDrag({ onDrop }) {
     cleanup()
   }
 
-  /** 绑定到卡片: 卡片元素需设置 touch-action: pan-y */
+  // 指针监听装配: instant=true 时按下即激活 (把手路径), 否则长按 400ms 激活
-  const bind = useCallback((item) => ({
+  const armListeners = (ev, instant, item) => {
-    onPointerDown: (ev) => {
+    try { ev.currentTarget.setPointerCapture(ev.pointerId) } catch { /* ignore */ }
-      if (ev.button !== undefined && ev.button !== 0) return
+    const el = ev.currentTarget
-      st.current = { ...st.current, startX: ev.clientX, startY: ev.clientY, item, active: false }
+    const move = (e2) => onMove(e2)
+    const tm = (e2) => { if (st.current.active) e2.preventDefault() }
+    const up = () => { onUp(); detach() }
+    const cancel = () => {
+      if (st.current.active) lastEnd.current = Date.now()
+      cleanup()
+      detach()
+    }
+    const detach = () => {
+      el.removeEventListener('pointermove', move)
+      el.removeEventListener('pointerup', up)
+      el.removeEventListener('pointercancel', cancel)
+      el.removeEventListener('touchmove', tm)
+    }
+    el.addEventListener('pointermove', move)
+    el.addEventListener('pointerup', up)
+    el.addEventListener('pointercancel', cancel)
+    el.addEventListener('touchmove', tm, { passive: false })
+
+    if (instant) {
+      st.current.active = true
+      setDragItem(item)
+      if (navigator.vibrate) navigator.vibrate(15)
+    } else {
       st.current.timer = setTimeout(() => {
         st.current.active = true
         setDragItem(item)
         if (navigator.vibrate) navigator.vibrate(15)
       }, 400)
-      try { ev.currentTarget.setPointerCapture(ev.pointerId) } catch { /* ignore */ }
+    }
-      const el = ev.currentTarget
+  }
-      const move = (e2) => onMove(e2)
+
-      const tm = (e2) => { if (st.current.active) e2.preventDefault() }
+  /** 绑定到卡片: 卡片需 touch-action: pan-y (长按路径) */
-      const up = () => { onUp(); detach() }
+  const bind = useCallback((item) => ({
-      const cancel = () => {
+    onPointerDown: (ev) => {
-        if (st.current.active) lastEnd.current = Date.now()
+      if (ev.button !== undefined && ev.button !== 0) return
-        cleanup()
+      st.current = { ...st.current, startX: ev.clientX, startY: ev.clientY, item, active: false, over: null }
-        detach()
+      armListeners(ev, false, item)
-      }
-      const detach = () => {
-        el.removeEventListener('pointermove', move)
-        el.removeEventListener('pointerup', up)
-        el.removeEventListener('pointercancel', cancel)
-        el.removeEventListener('touchmove', tm)
-      }
-      el.addEventListener('pointermove', move)
-      el.addEventListener('pointerup', up)
-      el.addEventListener('pointercancel', cancel)
-      el.addEventListener('touchmove', tm, { passive: false })
     },
     onContextMenu: (ev) => ev.preventDefault(),
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }), [])
 
-  return { dragItem, over, bind, cancel: cleanup, justEnded }
+  /** 绑定到拖动把手: 把手需 touch-action: none, 按下即拖 */
+  const bindHandle = useCallback((item) => ({
+    onPointerDown: (ev) => {
+      if (ev.button !== undefined && ev.button !== 0) return
+      ev.stopPropagation() // 不触发卡片自身的长按路径
+      st.current = { ...st.current, startX: ev.clientX, startY: ev.clientY, item, active: false, over: null }
+      armListeners(ev, true, item)
+    },
+    onContextMenu: (ev) => ev.preventDefault(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), [])
+
+  return { dragItem, over, bind, bindHandle, cancel: cleanup, justEnded }
 }

src/components/task/TaskRow.jsx

@@ -8,7 +8,7 @@ const statusLabel = (s) => (s === 'done' ? '完成' : s === 'doing' ? '执行中
 //   复选框 / ⋯ 是独立控件: pointerdown 不冒泡, 不发起拖动,
 //   避免长按行后抬手时合成的 click 落在控件上误触状态切换
 export default function TaskRow({
-  task, onToggle, onClick, onMore, bindDrag, dragTarget, indent = false, children,
+  task, onToggle, onClick, onMore, bindDrag, bindDragHandle, dragTarget, indent = false, children,
 }) {
   const done = task.status === 'done'
   return (
@@ -58,6 +58,13 @@ export default function TaskRow({
                   → {dragTarget.name}
                 </span>
               )}
+              {bindDragHandle && (
+                <span
+                  className="grip"
+                  title="拖动换列"
+                  {...bindDragHandle(task)}
+                >⠿</span>
+              )}
               <span
                 className="more"
                 onClick={(e) => { e.stopPropagation(); onMore?.(task) }}

src/components/task/useRowDrag.js

@@ -59,7 +59,31 @@ export default function useRowDrag({ columns, onDrop }) {
     cleanup()
   }
 
-  /** 绑定到列表行: 行元素需设置 touch-action: pan-y */
+  // 指针监听装配 (capture + 非 passive touchmove: 激活后尽力拦截滚动接管)
+  const armListeners = (ev) => {
+    try { ev.currentTarget.setPointerCapture(ev.pointerId) } catch { /* ignore */ }
+    const el = ev.currentTarget
+    const move = (e2) => onMove(e2)
+    const tm = (e2) => { if (st.current.active) e2.preventDefault() }
+    const up = () => { onUp(); detach() }
+    const cancel = () => {
+      if (st.current.active) lastEnd.current = Date.now()
+      cleanup()
+      detach()
+    }
+    const detach = () => {
+      el.removeEventListener('pointermove', move)
+      el.removeEventListener('pointerup', up)
+      el.removeEventListener('pointercancel', cancel)
+      el.removeEventListener('touchmove', tm)
+    }
+    el.addEventListener('pointermove', move)
+    el.addEventListener('pointerup', up)
+    el.addEventListener('pointercancel', cancel)
+    el.addEventListener('touchmove', tm, { passive: false })
+  }
+
+  /** 绑定到列表行: 行元素需设置 touch-action: pan-y (长按路径, 可滚场景不可靠) */
   const bind = useCallback((task) => ({
     onPointerDown: (ev) => {
       if (ev.button !== undefined && ev.button !== 0) return
@@ -71,34 +95,31 @@ export default function useRowDrag({ columns, onDrop }) {
         if (navigator.vibrate) navigator.vibrate(15)
         setDrag({ task, fromIdx, toIdx: fromIdx })
       }, 400)
-      try { ev.currentTarget.setPointerCapture(ev.pointerId) } catch { /* ignore */ }
+      armListeners(ev)
-      const el = ev.currentTarget
-      const move = (e2) => onMove(e2)
-      // 激活后拦截触摸滚动: pan-y 下纵向分量稍大浏览器即接管手势并派发
-      // pointercancel (列表是整页长滚动容器, 必现), 非 passive touchmove
-      // preventDefault 才能真正拦住, 拖动期间指针事件得以持续派发
-      const tm = (e2) => { if (st.current.active) e2.preventDefault() }
-      const up = () => { onUp(); detach() }
-      const cancel = () => {
-        if (st.current.active) lastEnd.current = Date.now()
-        cleanup()
-        detach()
-      }
-      const detach = () => {
-        el.removeEventListener('pointermove', move)
-        el.removeEventListener('pointerup', up)
-        el.removeEventListener('pointercancel', cancel)
-        el.removeEventListener('touchmove', tm)
-      }
-      el.addEventListener('pointermove', move)
-      el.addEventListener('pointerup', up)
-      el.addEventListener('pointercancel', cancel)
-      el.addEventListener('touchmove', tm, { passive: false })
     },
     // 长按不弹系统菜单 (配合 CSS user-select:none, 防长按变文字选择)
     onContextMenu: (ev) => ev.preventDefault(),
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }), [ordered, onDrop])
 
-  return { drag, bind, cancel: cleanup, justEnded }
+  /** 绑定到行尾拖动把手: 把手需 touch-action: none, 按下立即拖动。
+   *  pan-y 下整页可滚时浏览器滚动接管会取消指针流 (Android WebView 必现),
+   *  把手路径浏览器完全不接管, 是可靠入口。 */
+  const bindHandle = useCallback((task) => ({
+    onPointerDown: (ev) => {
+      if (ev.button !== undefined && ev.button !== 0) return
+      const fromIdx = ordered.findIndex((c) => c.id === task.columnId)
+      if (fromIdx < 0) return
+      ev.stopPropagation() // 不触发行自身的长按路径
+      st.current = { ...st.current, startX: ev.clientX, startY: ev.clientY, task, fromIdx, toIdx: fromIdx, active: false }
+      st.current.active = true
+      if (navigator.vibrate) navigator.vibrate(15)
+      setDrag({ task, fromIdx, toIdx: fromIdx })
+      armListeners(ev)
+    },
+    onContextMenu: (ev) => ev.preventDefault(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), [ordered, onDrop])
+
+  return { drag, bind, bindHandle, cancel: cleanup, justEnded }
 }

src/pages/checkin/MergedView.jsx

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

@@ -53,6 +53,7 @@ export default function ListView({
                   onClick={() => { if (!drag.justEnded()) onOpen(t) }}
                   onMore={onMore}
                   bindDrag={drag.bind}
+                  bindDragHandle={drag.bindHandle}
                   dragTarget={dragging ? orderedCols[dragging.toIdx] : null}
                 />
                 {kids.length > 0 && (

src/styles/globals.css

@@ -678,6 +678,25 @@ body.me-safe-top .app-safe-top { height: 0; }
 .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 {
+  touch-action: none; -webkit-user-select: none; user-select: none;
+  color: #c2c7cf; font-size: 14px; line-height: 1; padding: 8px 2px;
+  cursor: grab; flex-shrink: 0; align-self: center;
+}
+.grip:active { color: var(--color-primary); }
+.task-right .grip { margin-right: 2px; }
+
+/* MergedView 打卡卡拖动排序 */
+.mv-view { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
+.mv-view input, .mv-view textarea { -webkit-user-select: text; user-select: text; }
+.mv-card { touch-action: pan-y; }
+.mv-card.dragging { opacity: .55; outline: 2px dashed var(--color-primary); outline-offset: 1px; }
+.mv-card.dragover { outline: 2px solid var(--color-primary); outline-offset: 1px; }
+.mv-card.dragover.after { border-bottom: 3px solid var(--color-primary); }
+.mv-card.dragover.before { border-top: 3px solid var(--color-primary); }
+
 /* ----- 日历视图 ----- */
 .calendar-view { padding: 0 12px 20px; }
 .cal-month-bar { display: flex; align-items: center; gap: 10px; padding: 8px 2px; }