refactor(V0.2): 详情页精简 + 列表行样式调整

- 任务详情: 移除底部「拷贝到其他项目 / 删除任务」按钮 (⋯ 菜单仍保留入口), 清理相关死代码
- 列表子任务: 改为与普通任务同构的两行布局 (标题 + 左侧状态点/状态文字, 字体略小)
- 列表任务卡片第二行不再显示看板分组标签

server/routes/checkin.js

@@ -76,6 +76,7 @@ function buildItem(habit, byDate, date, today) {
     id: habit.id,
     name: habit.name,
     period: habit.period,
+    sortOrder: habit.sortOrder,
     periodLabel: PERIOD_LABEL[habit.period] || '每天',
     target,
     color: habit.color,
@@ -141,8 +142,9 @@ router.post('/habits', async (req, res, next) => {
     if (!PERIODS.includes(period)) return res.status(400).json({ error: '周期类型不合法' })
     const t = Math.floor(Number(target))
     if (!Number.isFinite(t) || t < 1) return res.status(400).json({ error: '目标次数需为 ≥1 的整数' })
+    const last = await prisma.habit.findFirst({ where: { userId }, orderBy: { sortOrder: 'desc' }, select: { sortOrder: true } })
     const row = await prisma.habit.create({
-      data: { userId, name: cleanName, period, target: t, color: String(color), icon: String(icon), note: String(note || '') },
+      data: { userId, name: cleanName, period, target: t, color: String(color), icon: String(icon), note: String(note || ''), sortOrder: (last?.sortOrder ?? -1) + 1 },
     })
     res.json({ item: row })
   } catch (e) { next(e) }
@@ -182,6 +184,21 @@ router.put('/habits/:id', async (req, res, next) => {
   } catch (e) { next(e) }
 })
 
+// POST /api/checkin/habits/reorder  { ids: [习惯id 的新顺序] }  按数组下标重写 sortOrder
+router.post('/habits/reorder', async (req, res, next) => {
+  try {
+    const userId = req.user.sub
+    const ids = Array.isArray((req.body || {}).ids) ? req.body.ids.map(Number).filter(Number.isFinite) : []
+    if (!ids.length) return res.status(400).json({ error: 'ids 不能为空' })
+    const habits = await prisma.habit.findMany({ where: { userId, id: { in: ids } } })
+    if (habits.length !== new Set(ids).size) return res.status(400).json({ error: '包含无效的打卡项' })
+    await prisma.$transaction(
+      ids.map((id, i) => prisma.habit.update({ where: { id }, data: { sortOrder: i } })),
+    )
+    res.json({ ok: true })
+  } catch (e) { next(e) }
+})
+
 // DELETE /api/checkin/habits/:id?hard=1  默认归档(保留历史), hard=1 物理删除
 router.delete('/habits/:id', async (req, res, next) => {
   try {

src/api/checkin.js

@@ -16,6 +16,7 @@ export const checkinApi = {
   calendar: (month) => api('/checkin/calendar' + q({ month })),
   createHabit: (body) => api('/checkin/habits', { method: 'POST', body }),
   updateHabit: (id, body) => api(`/checkin/habits/${id}`, { method: 'PUT', body }),
+  reorderHabits: (ids) => api('/checkin/habits/reorder', { method: 'POST', body: { ids } }),
   deleteHabit: (id, hard) => api(`/checkin/habits/${id}${hard ? '?hard=1' : ''}`, { method: 'DELETE' }),
   check: (id, date, note) => api(`/checkin/habits/${id}/check`, { method: 'POST', body: { date, note } }),
   uncheck: (id, date) => api(`/checkin/habits/${id}/check` + q({ date }), { method: 'DELETE' }),

src/components/checkin/useHabitDrag.js

@@ -0,0 +1,97 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+// 打卡项组内拖动排序
+//   手势与任务列表/看板一致: 长按 400ms 原位抬起(震动), 之后拖动;
+//   elementFromPoint 命中同一周期组内的 [data-habit-row] 作为落点,
+//   按指针在目标卡上半/下半决定插到其前/后, 松手提交。
+//   只允许组内 (每天/每周/每月/每年) 排序, 命中其他组视为无效落点。
+//   激活后用非 passive touchmove preventDefault 拦截浏览器滚动接管,
+//   保证纵向拖动期间指针事件持续派发 (同 useRowDrag 的教训)。
+export default function useHabitDrag({ onDrop }) {
+  const [dragItem, setDragItem] = useState(null)       // 拖动中的打卡项 (视觉态)
+  const [over, setOver] = useState(null)               // { id, after } 落点
+  const st = useRef({ timer: null, active: false, startX: 0, startY: 0, item: null, over: null })
+  const lastEnd = useRef(0)
+
+  const cleanup = useCallback(() => {
+    if (st.current.timer) { clearTimeout(st.current.timer); st.current.timer = null }
+    st.current.active = false
+    st.current.over = null
+    setDragItem(null)
+    setOver(null)
+  }, [])
+
+  useEffect(() => () => cleanup(), [cleanup])
+
+  /** 拖动刚结束 (350ms 内): 抑制松手合成的 click 误触打卡 */
+  const justEnded = useCallback(() => Date.now() - lastEnd.current < 350, [])
+
+  const hitRow = (x, y) => {
+    const el = document.elementFromPoint(x, y)
+    const rowEl = el?.closest?.('[data-habit-row]')
+    if (!rowEl) return null
+    const r = rowEl.getBoundingClientRect()
+    return { id: Number(rowEl.dataset.habitId), after: y > r.top + r.height / 2 }
+  }
+
+  const onMove = (ev) => {
+    const s = st.current
+    if (!s.active) {
+      if (s.timer && (Math.abs(ev.clientX - s.startX) > 10 || Math.abs(ev.clientY - s.startY) > 10)) {
+        clearTimeout(s.timer); s.timer = null
+      }
+      return
+    }
+    ev.preventDefault()
+    const hit = hitRow(ev.clientX, ev.clientY)
+    // 只认同一周期组的落点
+    if (hit && hit.id !== s.item.id) { s.over = hit; setOver(hit) }
+    else { s.over = null; setOver(null) }
+  }
+
+  const onUp = () => {
+    const s = st.current
+    if (s.active && s.item) {
+      lastEnd.current = Date.now()
+      if (s.over && s.over.id !== s.item.id) onDrop?.(s.item, s.over.id, s.over.after)
+    }
+    cleanup()
+  }
+
+  /** 绑定到卡片: 卡片元素需设置 touch-action: pan-y */
+  const bind = useCallback((item) => ({
+    onPointerDown: (ev) => {
+      if (ev.button !== undefined && ev.button !== 0) return
+      st.current = { ...st.current, startX: ev.clientX, startY: ev.clientY, item, active: false }
+      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() }
+      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 })
+    },
+    onContextMenu: (ev) => ev.preventDefault(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }), [])
+
+  return { dragItem, over, bind, cancel: cleanup, justEnded }
+}

src/components/task/TaskRow.jsx

@@ -1,7 +1,10 @@
 import StatusDot from './StatusDot.jsx'
 
+const statusLabel = (s) => (s === 'done' ? '完成' : s === 'doing' ? '执行中' : '未开始')
+
 // 列表视图的一行 (Todoist 风格, T-UI-01)
 //   点击行体 → 打开详情; 长按 400ms 后左右拖动换列 (bindDrag 来自 useRowDrag)
+//   子任务与普通任务同构: 标题一行 + 状态元信息一行 (字体略小), 不显示分组标签
 //   复选框 / ⋯ 是独立控件: pointerdown 不冒泡, 不发起拖动,
 //   避免长按行后抬手时合成的 click 落在控件上误触状态切换
 export default function TaskRow({
@@ -27,18 +30,20 @@ export default function TaskRow({
         </div>
 
         {indent ? (
-          <>
+          <div className="sub-main">
             <span className="sub-title">{task.title}</span>
-            <StatusDot status={task.status} pill />
-          </>
+            <div className="task-meta sub">
+              <StatusDot status={task.status} />
+              <span>{statusLabel(task.status)}</span>
+            </div>
+          </div>
         ) : (
           <>
             <div className="task-main">
               <div className="task-title">{task.title}</div>
               <div className="task-meta">
                 <StatusDot status={task.status} />
-                <span>{task.status === 'done' ? '完成' : task.status === 'doing' ? '执行中' : '未开始'}</span>
-                {task.column?.name && <span className="col">{task.column.name}</span>}
+                <span>{statusLabel(task.status)}</span>
                 <span className={`assignee${task.assignee ? '' : ' none'}`}>
                   {task.assignee?.name || '未指派'}
                 </span>

src/components/task/useColumnDrag.js

@@ -99,6 +99,8 @@ export default function useColumnDrag({ onDrop, scrollSelector = '.board-wrap' }
       try { ev.currentTarget.setPointerCapture(ev.pointerId) } catch { /* ignore */ }
       const el = ev.currentTarget
       const move = (e2) => onPointerMove(e2)
+      // 激活后拦截触摸滚动: 防纵向分量触发浏览器接管 (pointercancel), 同 useRowDrag
+      const tm = (e2) => { if (st.current.active) e2.preventDefault() }
       const up = (e2) => { onPointerUp(e2); detach() }
       const cancel = () => {
         if (st.current.active) lastEnd.current = Date.now()
@@ -109,10 +111,12 @@ export default function useColumnDrag({ onDrop, scrollSelector = '.board-wrap' }
         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(),

src/components/task/useRowDrag.js

@@ -74,6 +74,10 @@ export default function useRowDrag({ columns, onDrop }) {
       try { ev.currentTarget.setPointerCapture(ev.pointerId) } catch { /* ignore */ }
       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()
@@ -84,10 +88,12 @@ export default function useRowDrag({ columns, onDrop }) {
         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(),

src/pages/checkin/HabitView.jsx

@@ -3,6 +3,7 @@ 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'
@@ -38,10 +39,45 @@ export default function HabitView({ date, onDateChange }) {
 
   const items = useMemo(() => {
     const list = data?.items || []
-    // 未完成在前, 已完成在后 (F-CK-16 默认排序)
-    return [...list].sort((a, b) => Number(a.completed) - Number(b.completed) || a.id - b.id)
+    // 手动排序优先 (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)
@@ -169,54 +205,74 @@ export default function HabitView({ date, onDateChange }) {
       )}
 
       <div className="habit-list">
-        {items.map((item) => (
-          <div key={item.id} className={'habit-card' + (item.completed ? ' done' : '')}>
-            <RingProgress
-              percent={item.percent}
-              done={item.done}
-              target={item.target}
-              over={item.over}
-              completed={item.completed}
-              color={item.color}
-              onClick={() => doCheck(item)}
-            />
-            <div className="habit-main">
-              <div className="habit-name">{item.name}</div>
-              <div className="habit-meta">
-                {item.periodLabel} {item.target} 次
-                {item.streak > 0 && <span className="habit-streak">连续 {item.streak}</span>}
-              </div>
-              {item.note && <div className="habit-note">{item.note}</div>}
-              <div className="habit-range">
-                {item.periodStart === item.periodEnd
-                  ? '今日'
-                  : `${item.periodStart.slice(5)} ~ ${item.periodEnd.slice(5)}`}
-                {item.over > 0 && <span className="habit-over">超额 {item.over}</span>}
-              </div>
+        {groups.map((g) => (
+          <div key={g.key}>
+            <div className="habit-group-title">
+              {g.label}
+              <span className="cnt">{g.list.length}</span>
             </div>
-            <div className="habit-actions">
-              <Button
-                size="mini"
-                color={item.completed ? 'default' : 'primary'}
-                onClick={() => doCheck(item)}
+            {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)}
               >
-                {item.completed ? '再打一次' : '打卡'}
-              </Button>
-            </div>
-            <div className="habit-foot">
-              {item.done > 0 && (
-                <span className="habit-link" onClick={() => doUncheck(item)}>撤销</span>
-              )}
-              <span
-                className="habit-link"
-                onClick={() => {
-                  setForm({ id: item.id, name: item.name, period: item.period, target: item.target, color: item.color, note: item.note })
-                  setShowForm(true)
-                }}
-              >编辑</span>
-              <span className="habit-link danger" onClick={() => removeHabit(item)}>归档</span>
-            </div>
-            <Celebrate fire={bursts[item.id] || 0} color={item.color} />
+                <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>

src/pages/task/TaskDetail.jsx

@@ -1,10 +1,9 @@
 import { useEffect, useState } from 'react'
-import { ActionSheet, Dialog, Popup, Toast } from 'antd-mobile'
+import { ActionSheet, Popup, Toast } from 'antd-mobile'
 import { taskApi } from '../../api/task.js'
 import { STATUS_OPTIONS, STATUS_LABEL } from './date.js'
 import UserPicker from '../../components/task/UserPicker.jsx'
 import StatusDot from '../../components/task/StatusDot.jsx'
-import CopyTaskPopup from '../../components/task/CopyTaskPopup.jsx'
 import useKeyboardInset from '../../hooks/useKeyboardInset.js'
 import useOverlayBack from '../../hooks/useOverlayBack.js'
 
@@ -25,7 +24,6 @@ export default function TaskDetail({ task, columns, members, tasks, onClose, onS
   const [newSub, setNewSub] = useState('')
   const [saving, setSaving] = useState(false)
   const [picker, setPicker] = useState(null)   // 'assignee' | 'members'
-  const [copyOpen, setCopyOpen] = useState(false)
   const [parentPick, setParentPick] = useState(false) // 转为子任务: 选择父任务
 
   // 键盘弹出插入量: 抬升弹层内容, 输入框不被遮挡
@@ -132,25 +130,7 @@ export default function TaskDetail({ task, columns, members, tasks, onClose, onS
     }
   }
 
-  async function removeTask() {
-    const ok = await Dialog.confirm({
-      content: subs.length
-        ? `删除该任务？将一并删除 ${subs.length} 条子任务。`
-        : '删除该任务？',
-      confirmText: '删除',
-    })
-    if (!ok) return
-    try {
-      await taskApi.remove(task.id)
-      Toast.show({ content: '已删除' })
-      onSaved?.()
-    } catch (e) {
-      Toast.show({ content: e.message })
-    }
-  }
-
-  return (
-    <Popup
+  return (    <Popup
       visible
       onMaskClick={onClose}
       position="bottom"
@@ -278,10 +258,6 @@ export default function TaskDetail({ task, columns, members, tasks, onClose, onS
       </div>
 
       <div className="btn-primary" onClick={save}>{saving ? '保存中…' : '保存'}</div>
-      <div className="btn-ghost" onClick={() => setCopyOpen(true)}>拷贝到其他项目</div>
-      <div className="btn-danger" onClick={removeTask}>
-        删除任务{subs.length > 0 && <span className="del-hint">（将一并删除 {subs.length} 条子任务）</span>}
-      </div>
 
       <UserPicker
         visible={picker === 'assignee'}
@@ -301,13 +277,6 @@ export default function TaskDetail({ task, columns, members, tasks, onClose, onS
         onConfirm={(ids) => setForm((p) => ({ ...p, memberIds: Array.isArray(ids) ? ids : [] }))}
       />
 
-      <CopyTaskPopup
-        task={task}
-        visible={copyOpen}
-        onClose={() => setCopyOpen(false)}
-        onDone={onChanged}
-      />
-
       {/* 转为子任务: 从项目内顶层任务中选父任务 */}
       <Popup
         visible={parentPick}

src/styles/globals.css

@@ -663,6 +663,21 @@ body.me-safe-top .app-safe-top { height: 0; }
 .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); }
+
 /* ----- 日历视图 ----- */
 .calendar-view { padding: 0 12px 20px; }
 .cal-month-bar { display: flex; align-items: center; gap: 10px; padding: 8px 2px; }
@@ -948,20 +963,21 @@ body.me-safe-top .app-safe-top { height: 0; }
 .task-title { font-size: 14px; display: flex; align-items: center; gap: 6px; word-break: break-word; }
 .task-row.done .task-title { color: #a0a0a0; text-decoration: line-through; }
 .task-meta { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 11px; color: #999; flex-wrap: wrap; }
-.task-meta .col { color: var(--color-primary); background: #f0f5ff; border-radius: 4px; padding: 0 5px; }
 .task-meta .assignee { font-size: 12px; font-weight: 600; color: var(--color-text); }
 .task-meta .assignee.none { color: #b8bcc4; font-weight: 400; }
 .task-meta .members { font-size: 10.5px; color: #a7adb6; }
 .task-right { display: flex; align-items: center; flex-shrink: 0; }
 .more { color: #c2c7cf; font-size: 16px; line-height: 1; padding: 0 2px; cursor: pointer; }
 .sub-row {
-  display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 8px;
+  display: flex; align-items: flex-start; gap: 8px; background: #fff; border-radius: 8px;
   padding: 8px 12px 8px 30px; margin: -2px 12px 7px 26px; box-shadow: 0 1px 2px rgba(0,0,0,.03);
   position: relative; cursor: pointer;
 }
 .sub-row::before { content: ""; position: absolute; left: 14px; top: 0; bottom: 0; width: 1px; background: #e9ecf0; }
-.sub-row .box { width: 16px; height: 16px; }
-.sub-title { flex: 1; font-size: 13px; color: #444; }
+.sub-row .box { width: 16px; height: 16px; margin-top: 2px; }
+.sub-main { flex: 1; min-width: 0; }
+.sub-title { display: block; font-size: 13px; color: #444; }
+.sub-row .task-meta { font-size: 10.5px; margin-top: 2px; gap: 5px; }
 .sub-row.done .sub-title { color: #a8a8a8; text-decoration: line-through; }
 .collapse { font-size: 11px; color: var(--color-primary); padding: 2px 0 8px 30px; margin: 0 12px; cursor: pointer; }
 .sub-add-hint { font-size: 11px; color: #b8bcc4; padding: 0 0 8px 44px; cursor: pointer; }