feat: unify task and habit pages with Today

2026-09-18 10:51:57 +08:00
parent 6d568273ef
commit 978c4b87ed
9 changed files with 204 additions and 20 deletions
@@ -25,6 +25,7 @@ import AppSheet from './components/AppSheet.vue'
 import AppDialog, { type AppDialogOptions } from './components/AppDialog.vue'
 import { shanghaiDateKey, useTaskDueClock, watchShanghaiDateRollover } from './lib/task-due-clock'
 import { readTodaySectionCollapse, writeTodaySectionCollapse, type TodaySectionCollapse } from './lib/today-section-collapse'
+import { loadTaskOpenTotal } from './lib/task-open-total'

 type FolderItem = { id: string; name: string }
 type TaskList = { id: string; folder_id: string | null; name: string; is_inbox: boolean }
@@ -103,6 +104,7 @@ const todaySectionCollapse = ref<TodaySectionCollapse>(readTodaySectionCollapse(
 const page = ref(1)
 const pageSize = 50
 const totalTasks = ref(0)
+const taskOpenTotal = ref<number | null>(null)
 const hiddenCompletedTaskCount = ref(0)
 const todayTaskTotal = ref(0)
 const todayTaskCompleted = ref(0)
@@ -165,6 +167,7 @@ const selectedRepeatConfig = ref<TaskRepeatConfig>(defaultRepeatConfig())
 const weekdayOptions = [{ value: 'MO', label: '一' }, { value: 'TU', label: '二' }, { value: 'WE', label: '三' }, { value: 'TH', label: '四' }, { value: 'FR', label: '五' }, { value: 'SA', label: '六' }, { value: 'SU', label: '日' }]
 let recurrenceLoadToken = 0
 let todaySummaryLoadToken = 0
+let taskOpenTotalLoadToken = 0
 let todayEnvironmentLoadToken = 0
 const habitComposer = ref<InstanceType<typeof MvpPanel> | null>(null)
 const countdownComposer = ref<InstanceType<typeof CountdownPanel> | null>(null)
@@ -553,6 +556,18 @@ async function loadTasksPage(request = beginLatestRequest('tasks')) {
  if (!isLatestRequest('tasks', request)) return
  tasks.value = data.items ?? []
  totalTasks.value = data.total ?? tasks.value.length
+  if (activeView.value === 'tasks' && !showCompleted.value && !query.value) taskOpenTotal.value = totalTasks.value
+  if (activeView.value === 'tasks' && (showCompleted.value || query.value)) {
+    const token = ++taskOpenTotalLoadToken
+    const listId = activeList.value
+    const openParams = new URLSearchParams({ page: '1', page_size: '1', completed: 'false' })
+    if (listId) openParams.set('list_id', listId)
+    loadTaskOpenTotal(
+      () => api(`/tasks?${openParams}`),
+      () => token === taskOpenTotalLoadToken && isLatestRequest('tasks', request) && activeView.value === 'tasks' && activeList.value === listId,
+      value => { taskOpenTotal.value = value },
+    )
+  }
  hiddenCompletedTaskCount.value = 0
  if (!showCompleted.value && !query.value && activeView.value !== 'trash' && tasks.value.length === 0) {
    const completedParams = new URLSearchParams(params)
@@ -589,6 +604,10 @@ async function preloadCountdowns() {
 }
 async function loadAll() {
  const request = beginLatestRequest('tasks')
+  if (activeView.value === 'tasks') {
+    taskOpenTotal.value = null
+    ++taskOpenTotalLoadToken
+  }
  loading.value = true
  error.value = ''
  try {
@@ -655,6 +674,8 @@ async function switchView(view: View, listId?: string) {
    todayEnvironmentLoading.value = false
  }
  activeView.value = view
+  taskOpenTotal.value = null
+  ++taskOpenTotalLoadToken
  if (!query.value) mobileSearchOpen.value = false
  searchPullDistance.value = 0
  if (view !== 'trash') beginLatestRequest('trash')
@@ -1504,22 +1525,22 @@ onUnmounted(() => {
      </AppSheet>
    </aside>

-    <main :class="{'today-main':activeView==='today'}" @touchstart="startSearchPull" @touchmove="moveSearchPull" @touchend="finishSearchPull" @touchcancel="cancelSearchPull">
+    <main :class="{'today-main':activeView==='today','list-main':activeView==='tasks'||activeView==='habits'}" @touchstart="startSearchPull" @touchmove="moveSearchPull" @touchend="finishSearchPull" @touchcancel="cancelSearchPull">
      <header class="topbar" :inert="memoBackgroundInert ? true : undefined">
        <button class="icon" :aria-label="(sidebarCollapsed ? '展开' : '收起') + '菜单'" :aria-expanded="sidebarCollapsed ? 'false' : 'true'" @click="toggleSidebar"><Menu /></button>
-        <div v-if="activeView!=='today'" class="topbar-title"><h1 :title="activeName">{{ activeName }}</h1></div>
+        <div v-if="!['today','tasks','habits'].includes(activeView)" class="topbar-title"><h1 :title="activeName">{{ activeName }}</h1></div>
        <div v-if="['today', 'tasks', 'upcoming', 'habits'].includes(activeView)" class="topbar-actions">
-          <CompletedFilterPill v-if="activeView!=='today'" v-model="showCompleted" class="topbar-filter" />
+          <CompletedFilterPill v-if="activeView==='upcoming'" v-model="showCompleted" class="topbar-filter" />
          <button class="icon topbar-refresh" :class="{spinning:refreshing}" type="button" aria-label="刷新当前页面" title="刷新" :disabled="refreshing || loading" @click="refreshCurrentView"><RefreshCw /></button>
        </div>
-        <div v-if="taskSearchAvailable" class="search-reveal" :class="{'mobile-search-open':mobileSearchOpen,'mobile-search-pulling':searchPullDistance>0}" :style="searchRevealStyle">
+        <div v-if="taskSearchAvailable && activeView!=='tasks'" class="search-reveal" :class="{'mobile-search-open':mobileSearchOpen,'mobile-search-pulling':searchPullDistance>0}" :style="searchRevealStyle">
          <button ref="taskSearchToggle" class="task-search-toggle" type="button" :aria-label="mobileSearchOpen ? '收起搜索任务' : '展开搜索任务'" :aria-expanded="mobileSearchOpen" aria-controls="task-search-panel" @click="toggleTaskSearch"><Search/></button>
          <span class="search-pull-hint" aria-hidden="true">{{searchPullDistance >= 56 ? '松开搜索' : '下拉搜索'}}</span>
          <label id="task-search-panel" class="search"><Search/><input ref="searchInput" v-model="query" placeholder="搜索任务…" aria-label="搜索任务" @keydown="handleTaskSearchKeydown"><kbd>⌘ K</kbd></label>
        </div>
      </header>
      <template v-if="['habits','settings'].includes(activeView)">
-        <MvpPanel ref="habitComposer" :key="activeView" :view="activeView as 'habits'|'settings'" :show-completed="showCompleted" @changed="refreshAll" @notice="toast" />
+        <MvpPanel ref="habitComposer" :key="activeView" :view="activeView as 'habits'|'settings'" :show-completed="showCompleted" @update:show-completed="showCompleted=$event" @changed="refreshAll" @notice="toast" />
      </template>
      <MemoPanel v-else-if="activeView==='memos'" ref="memoPanel" :request="api" @scope="memoTrash=$event==='trash'" @detail="memoDetailOpen=$event" @notice="toast" />
      <CountdownPanel ref="countdownComposer" v-else-if="activeView==='countdowns'" @notice="toast" />
@@ -1530,6 +1551,15 @@ onUnmounted(() => {
          <p class="today-remaining">还有 {{ todayTaskRemaining + todayHabitRemaining }} 项待完成</p>
          <CompletedFilterPill v-model="showCompleted" class="today-inline-filter" />
        </section>
+        <section v-if="activeView==='tasks'" class="list-page-context">
+          <div><h1 class="list-page-title" :title="activeName">{{ activeName }}</h1><p class="list-page-summary">{{ taskOpenTotal === null ? '待完成统计暂不可用' : `还有 ${taskOpenTotal} 项待完成` }}</p></div>
+          <CompletedFilterPill v-model="showCompleted" class="list-inline-filter" />
+        </section>
+        <div v-if="activeView==='tasks'" class="list-search-reveal" :class="{'mobile-search-open':mobileSearchOpen}">
+          <label id="task-list-search-panel" class="list-search"><Search/><input ref="searchInput" v-model="query" placeholder="搜索任务…" aria-label="搜索任务" @keydown="handleTaskSearchKeydown"><kbd>⌘ K</kbd></label>
+          <button v-if="query" class="list-search-clear" type="button" @click="query=''">清除搜索</button>
+          <button ref="taskSearchToggle" class="task-search-toggle" type="button" :aria-label="mobileSearchOpen ? '收起搜索任务' : '展开搜索任务'" :aria-expanded="mobileSearchOpen" aria-controls="task-list-search-panel" @click="toggleTaskSearch"><Search/></button>
+        </div>
        <template v-if="activeView==='today'">
          <section v-if="overdueTaskTree.length" class="overdue-section today-collapsible-section">
            <button id="today-overdue-heading" class="today-section-toggle" type="button" :aria-expanded="!todaySectionCollapse.overdue" aria-controls="today-overdue" @click="toggleTodaySection('overdue')"><span class="today-section-title">逾期</span><span class="today-section-summary">{{overdueTaskTree.length}}</span><span class="today-section-chevron" aria-hidden="true">{{ todaySectionCollapse.overdue ? '›' : '⌄' }}</span></button>
@@ -1541,9 +1571,11 @@ onUnmounted(() => {
          </section>
          <button id="today-tasks-heading" class="today-section-toggle today-section-anchor" type="button" :aria-expanded="!todaySectionCollapse.tasks" aria-controls="today-tasks" @click="toggleTodaySection('tasks')"><span class="today-section-title">今天</span><span class="today-section-summary">{{totalTasks}}</span><span class="today-section-chevron" aria-hidden="true">{{ todaySectionCollapse.tasks ? '›' : '⌄' }}</span></button>
        </template>
-      <div v-if="activeView!=='today'" class="list-toolbar"><span v-if="activeView==='trash' || totalPages > 1 || totalTasks > 0">{{ totalPages > 1 ? `第 ${page} / ${totalPages} 页 · ` : '' }}共 {{totalTasks}} 项</span><span class="list-toolbar-actions"><button v-if="query" class="link" @click="query=''">清除搜索</button><button v-if="taskReorderAvailable" class="soft-button reorder-mode-toggle task-reorder-toggle" type="button" :aria-pressed="taskReorderMode" @click="taskReorderMode=!taskReorderMode;cancelTaskReorder()">{{ taskReorderMode ? '完成' : '调整顺序' }}</button></span></div>
+        <div v-if="activeView==='tasks'" id="task-list-heading" class="list-section-heading"><span id="task-list-title" class="list-section-title">任务</span><span class="list-section-count">{{ totalTasks }}</span><button v-if="taskReorderAvailable" class="list-section-action" type="button" :aria-pressed="taskReorderMode" @click="taskReorderMode=!taskReorderMode;cancelTaskReorder()">{{ taskReorderMode ? '完成' : '调整顺序' }}</button></div>
+      <div v-if="activeView!=='today' && activeView!=='tasks'" class="list-toolbar"><span v-if="activeView==='trash' || totalPages > 1 || totalTasks > 0">{{ totalPages > 1 ? `第 ${page} / ${totalPages} 页 · ` : '' }}共 {{totalTasks}} 项</span><span class="list-toolbar-actions"><button v-if="query" class="link" @click="query=''">清除搜索</button><button v-if="taskReorderAvailable" class="soft-button reorder-mode-toggle task-reorder-toggle" type="button" :aria-pressed="taskReorderMode" @click="taskReorderMode=!taskReorderMode;cancelTaskReorder()">{{ taskReorderMode ? '完成' : '调整顺序' }}</button></span></div>
+      <div v-if="activeView==='tasks' && totalPages > 1" class="list-page-meta"><span>第 {{ page }} / {{ totalPages }} 页 · 共 {{ totalTasks }} 项</span></div>
      <div v-if="activeView!=='trash' && totalPages > 1" class="pager"><button class="secondary" :disabled="page<=1 || loading" @click="previousPage">上一页</button><span>{{page}} / {{totalPages}}</span><button class="secondary" :disabled="page>=totalPages || loading" @click="nextPage">下一页</button></div>
-      <section :id="activeView==='today' ? 'today-tasks' : undefined" class="task-list plain-list" :class="{loading}" v-show="activeView!=='today' || !todaySectionCollapse.tasks" :role="activeView==='today' ? 'region' : undefined" :aria-labelledby="activeView==='today' ? 'today-tasks-heading' : undefined">
+      <section :id="activeView==='today' ? 'today-tasks' : undefined" class="task-list plain-list" :class="{loading}" v-show="activeView!=='today' || !todaySectionCollapse.tasks" :role="activeView==='today' ? 'region' : undefined" :aria-labelledby="activeView==='today' ? 'today-tasks-heading' : activeView==='tasks' ? 'task-list-title' : undefined">
        <template v-for="node in taskTree" :key="node.task.id">
          <article :data-task-id="node.task.id" class="task-row swipeable" :class="{done:node.task.completed,'task-row--trash':activeView==='trash','just-completed': justCompletedTaskIds.has(node.task.id),'completion-exiting':completionExitingTaskIds.has(node.task.id),selected:selectedTask?.id===node.task.id,ready:Math.abs(taskSwipeOffsets[node.task.id] ?? 0) >= 64,reordering:taskReorder?.id===node.task.id,'reorder-target':taskReorderTarget===node.task.id}" :style="{ '--swipe-x': `${taskSwipeOffsets[node.task.id] ?? 0}px`, '--reorder-y': `${taskReorder?.id === node.task.id ? taskReorder.offsetY : 0}px` }" @pointerdown="startTaskPointer(node.task, $event)" @pointermove="moveTaskPointer(node.task, $event)" @pointerup="finishTaskPointer(node.task, $event)" @pointercancel="cancelTaskPointer(node.task)" @touchstart.passive="startTaskSwipe(node.task, $event)" @touchmove.passive="moveTaskSwipe(node.task, $event)" @touchend="finishTaskSwipe(node.task, $event)" @touchcancel="cancelTaskSwipe(node.task)">
            <button v-if="taskReorderMode" class="drag-handle task-drag-handle" :disabled="Boolean(query) || totalPages > 1" aria-label="上下拖动任务排序" title="上下拖动排序" @pointerdown.stop="startTaskReorder(node.task, $event)" @pointermove.stop="moveTaskReorder(node.task, $event)" @pointerup.stop="finishTaskReorder(node.task, $event)" @pointercancel.stop="cancelTaskReorder"><GripVertical/></button>