feat: show progress bars for numeric habits

frontend/src/MvpPanel.vue

@@ -178,6 +178,12 @@ function habitProgressText(h: Habit) {
   if (h.kind !== 'numeric') return ''
   return `${Number(logFor(h, todayKey.value)?.value ?? 0)} / ${h.target ?? 1}`
 }
+function habitProgressMax(h: Habit) {
+  return Math.max(Number(h.target ?? 1), 1)
+}
+function habitProgressValue(h: Habit) {
+  return Math.min(Math.max(Number(logFor(h, todayKey.value)?.value ?? 0), 0), habitProgressMax(h))
+}
 
 function setLocalHabitValue(h: Habit, next: number | boolean) {
   habits.value = habits.value.map((item) => item.id !== h.id
@@ -403,6 +409,7 @@ onBeforeUnmount(() => {
           <div class="habit-main">
             <span class="habit-name">{{ h.name }}</span>
             <small v-if="habitProgressText(h)" class="habit-progress">{{ habitProgressText(h) }}</small>
+            <progress v-if="h.kind === 'numeric'" class="habit-progress-bar" :value="habitProgressValue(h)" :max="habitProgressMax(h)" :aria-label="`${h.name}进度：${habitProgressText(h)}`"></progress>
           </div>
         </article>
         <div v-if="!visibleTodayHabits.length && !busy" class="empty-panel today-empty-panel"><span>{{ hideCompletedHabits && todayHabits.length ? '已完成的习惯已隐藏。' : '今天没有安排习惯，轻松一下吧。' }}</span><button v-if="!hideCompletedHabits || !todayHabits.length" class="soft-button empty-action" @click="openHabitComposer"><Check/>添加习惯</button></div>
@@ -429,6 +436,7 @@ onBeforeUnmount(() => {
           <div class="habit-main">
             <span class="habit-name">{{ h.name }}</span>
             <small v-if="habitProgressText(h)" class="habit-progress">{{ habitProgressText(h) }}</small>
+            <progress v-if="h.kind === 'numeric'" class="habit-progress-bar" :value="habitProgressValue(h)" :max="habitProgressMax(h)" :aria-label="`${h.name}进度：${habitProgressText(h)}`"></progress>
           </div>
           <button class="icon ghost" aria-label="归档习惯" @click="archiveHabit(h)"><Trash2 /></button>
         </article>