From 3827e14a83f66cb1a660325fb3070bf88411433c Mon Sep 17 00:00:00 2001
From: bboysoul <bboysoulcn@gmail.com>
Date: Mon, 7 Sep 2026 15:55:55 +0800
Subject: [PATCH] feat: add visible habit check controls

---
 frontend/src/MvpPanel.vue  | 16 ++++++++++------
 frontend/src/style.css     |  2 +-
 frontend/src/style.test.ts | 13 +++++++++++++
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/frontend/src/MvpPanel.vue b/frontend/src/MvpPanel.vue
index 34ec381..6cfb60c 100644
--- a/frontend/src/MvpPanel.vue
+++ b/frontend/src/MvpPanel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
-import { Activity, ArchiveRestore, Download, FileJson, LogOut, RefreshCw, Trash2, Upload, X } from 'lucide-vue-next'
+import { Activity, ArchiveRestore, Check, Download, FileJson, LogOut, RefreshCw, Trash2, Upload, X } from 'lucide-vue-next'
 import { dateKey, isHabitComplete, isHabitScheduledToday, mergePage, nextHabitSwipeValue, previousHabitSwipeValue, shouldToggleRowSwipe } from './lib/mvp-utils'
 import { csrfHeader } from './lib/csrf'
 
@@ -183,14 +183,18 @@ function cancelHabitSwipe(h?: Habit) {
 }
 async function toggleHabitFromButton(h: Habit) {
   const current = logFor(h, todayKey.value)?.value
+  const previous = current ?? 0
   const next = isDone(h, todayKey.value)
     ? previousHabitSwipeValue(h.kind, current)
     : nextHabitSwipeValue(h.kind, current, h.target ?? 1)
-  await safe(async () => {
+  setLocalHabitValue(h, next)
+  try {
     await request(`/habits/${h.id}/logs/${todayKey.value}`, { method: 'PUT', body: JSON.stringify({ value: next }) })
-    await loadHabits()
     emit('notice', next > Number(current ?? 0) ? '已记录一次 🎉' : '已减少一次')
-  })
+  } catch (e) {
+    setLocalHabitValue(h, previous)
+    error.value = e instanceof Error ? e.message : '请求失败'
+  }
 }
 async function addHabit() {
   if (!habitName.value.trim()) return
@@ -299,9 +303,9 @@ onBeforeUnmount(() => {
       <!-- 今日习惯：只展示“今天该做”的习惯，复用正式习惯行样式 -->
       <div v-if="view === 'today-habits' && !busy" class="habit-list today-habit-list">
         <article v-for="h in todayHabits" :key="h.id" class="habit-row swipeable" :class="{ done: isDone(h, todayKey), ready: Math.abs(habitSwipeOffsets[h.id] ?? 0) >= 64 }" :style="{ '--swipe-x': `${habitSwipeOffsets[h.id] ?? 0}px` }" @pointerdown="startHabitPointer(h, $event)" @pointermove="moveHabitPointer(h, $event)" @pointerup="finishHabitPointer(h, $event)" @pointercancel="cancelHabitPointer(h)" @touchstart.passive="startHabitSwipe(h, $event)" @touchmove.passive="moveHabitSwipe(h, $event)" @touchend="finishHabitSwipe(h, $event)" @touchcancel="cancelHabitSwipe(h)">
+          <button class="task-check habit-check" :aria-label="isDone(h, todayKey) ? `减少${h.name}一次` : `完成${h.name}一次`" :aria-pressed="isDone(h, todayKey)" @click.stop="toggleHabitFromButton(h)"><span class="task-check-mark"><Check v-if="isDone(h, todayKey)" /></span></button>
           <div class="habit-main">
             <span><span class="habit-name">{{ h.name }}</span><small v-if="habitProgressText(h)">{{ habitProgressText(h) }}</small></span>
-            <button class="sr-only" :aria-label="isDone(h, todayKey) ? `减少${h.name}一次` : `完成${h.name}一次`" @click.stop="toggleHabitFromButton(h)">切换习惯状态</button>
           </div>
         </article>
         <div v-if="!todayHabits.length" class="empty-panel">今天没有安排习惯，轻松一下吧。</div>
@@ -324,9 +328,9 @@ onBeforeUnmount(() => {
       <!-- 习惯列表支持整行滑动记录。 -->
       <div v-if="view === 'habits'" class="habit-list">
         <article v-for="h in habits" :key="h.id" class="habit-row swipeable" :class="{ done: isDone(h, todayKey), ready: Math.abs(habitSwipeOffsets[h.id] ?? 0) >= 64 }" :style="{ '--swipe-x': `${habitSwipeOffsets[h.id] ?? 0}px` }" @pointerdown="startHabitPointer(h, $event)" @pointermove="moveHabitPointer(h, $event)" @pointerup="finishHabitPointer(h, $event)" @pointercancel="cancelHabitPointer(h)" @touchstart.passive="startHabitSwipe(h, $event)" @touchmove.passive="moveHabitSwipe(h, $event)" @touchend="finishHabitSwipe(h, $event)" @touchcancel="cancelHabitSwipe(h)">
+          <button class="task-check habit-check" :aria-label="isDone(h, todayKey) ? `减少${h.name}一次` : `完成${h.name}一次`" :aria-pressed="isDone(h, todayKey)" @click.stop="toggleHabitFromButton(h)"><span class="task-check-mark"><Check v-if="isDone(h, todayKey)" /></span></button>
           <div class="habit-main">
             <span><span class="habit-name">{{ h.name }}</span><small v-if="habitProgressText(h)">{{ habitProgressText(h) }}</small></span>
-            <button class="sr-only" :aria-label="isDone(h, todayKey) ? `减少${h.name}一次` : `完成${h.name}一次`" :aria-pressed="isDone(h, todayKey)" @click.stop="toggleHabitFromButton(h)">切换习惯状态</button>
           </div>
           <button class="icon ghost" aria-label="归档习惯" @click="archiveHabit(h)"><Trash2 /></button>
         </article>
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 752c6e2..3365f2d 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -23,7 +23,7 @@ main{min-width:0;padding:27px 34px 50px;overflow:auto;background:linear-gradient
 .habit-row .icon.ghost:hover{color:var(--danger)}
 .numeric-habit>span:first-child{display:grid;gap:3px}.numeric-habit small{font-size:11px;color:var(--muted)}
 .numeric-action{display:flex;gap:6px;align-items:center}.numeric-action input{width:74px;border:1px solid var(--line);border-radius:8px;padding:7px;background:#fff}.numeric-action .soft-button{min-height:44px;padding:9px 12px}
-.habit-row>.icon.ghost{width:44px;height:44px;flex:0 0 44px}
+.habit-row>.icon.ghost{width:44px;height:44px;flex:0 0 44px}.habit-check{margin-left:-4px}.habit-row.done .habit-check .task-check-mark{background:#71856b;border-color:#71856b;color:#fff}
 .empty-panel{text-align:center;color:var(--muted)}
 .settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tool-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.tool-card>svg{color:var(--accent);width:25px;height:25px}.tool-card p{margin:0;color:var(--muted);font-size:13px}.tool-card.wide{grid-column:1/-1}.file-button input{display:none}.tool-card pre{width:100%;max-height:180px;overflow:auto;background:#f8f3e8;padding:10px;border-radius:8px;font-size:10px}.session-row,.audit-row{width:100%;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:9px 0}.session-row span{display:grid}.session-row small,.audit-row small{color:var(--muted);font-size:11px}.inline-error{padding:9px;border-radius:8px;color:var(--danger);background:#fff0ed}.settings.active{background:var(--accent-soft);color:#b7421e;font-weight:700}
 @media(max-width:800px){.settings-grid{grid-template-columns:1fr}.tool-card.wide{grid-column:auto}.habit-row{padding:5px 4px 5px 8px}.habit-main{padding:10px 2px}.numeric-action input{width:62px}}
diff --git a/frontend/src/style.test.ts b/frontend/src/style.test.ts
index 83450f9..d1a7ae3 100644
--- a/frontend/src/style.test.ts
+++ b/frontend/src/style.test.ts
@@ -72,6 +72,19 @@ describe('task and habit row decoration', () => {
     expect(css).toContain('.task-check:focus-visible{')
   })
 
+  it('shows the same visible round check control for boolean and numeric habits in both views', () => {
+    expect(mvpPanel).not.toContain('class="sr-only" :aria-label="isDone(h, todayKey)')
+    expect(mvpPanel.match(/class="task-check habit-check"/g)?.length).toBe(2)
+    expect(mvpPanel.match(/class="task-check-mark"/g)?.length).toBe(2)
+    expect(mvpPanel.match(/<Check v-if="isDone\(h, todayKey\)"/g)?.length).toBe(2)
+    expect(css).toContain('.habit-check{')
+    expect(mvpPanel).toContain('@pointerdown="startHabitPointer')
+    const toggleBlock = mvpPanel.slice(mvpPanel.indexOf('async function toggleHabitFromButton'), mvpPanel.indexOf('async function addHabit'))
+    expect(toggleBlock).toContain('setLocalHabitValue(h, next)')
+    expect(toggleBlock).toContain('setLocalHabitValue(h, previous)')
+    expect(toggleBlock).not.toContain('await loadHabits()')
+  })
+
   it('does not draw a left border on task or habit rows', () => {
     expect(css).toContain('.task-row{border-left:0;')
     expect(css).toContain('.habit-row{border-left:0;')