510 lines
34 KiB
Vue
510 lines
34 KiB
Vue
<script setup lang="ts">
|
|
import { computed, nextTick, onMounted, ref, watch } from 'vue'
|
|
import {
|
|
ArchiveRestore, CalendarDays, CalendarHeart, Check, ChevronDown, ChevronRight, CirclePlus, Folder,
|
|
GripVertical, Inbox, ListChecks, ListTodo, Menu, Pencil, Plus, Search,
|
|
Settings, Trash2, X, Repeat2, Ellipsis,
|
|
} from 'lucide-vue-next'
|
|
import { filterTasks, fromDateTimeLocal, groupTaskTree, renderMarkdown, toDateTimeLocal } from './lib/task-utils'
|
|
import { defaultView, isTaskView, nextTotalAfterLocalTaskAdd, quickTaskFields, shouldToggleRowSwipe } from './lib/mvp-utils'
|
|
import { csrfHeader } from './lib/csrf'
|
|
import MvpPanel from './MvpPanel.vue'
|
|
import CountdownPanel from './CountdownPanel.vue'
|
|
|
|
type FolderItem = { id: string; name: string }
|
|
type TaskList = { id: string; folder_id: string | null; name: string; is_inbox: boolean }
|
|
type Task = { id: string; list_id: string; parent_id: string | null; title: string; description: string; priority: number; completed: boolean; version: number; due_at: string | null; subtasks?: Task[] }
|
|
type View = 'tasks' | 'today' | 'upcoming' | 'trash' | 'habits' | 'countdowns' | 'settings'
|
|
|
|
const initialized = ref<boolean | null>(null)
|
|
const authReady = ref(false)
|
|
const authenticated = ref(false)
|
|
const username = ref('')
|
|
const password = ref('')
|
|
const folders = ref<FolderItem[]>([])
|
|
const lists = ref<TaskList[]>([])
|
|
const archivedLists = ref<TaskList[]>([])
|
|
const tasks = ref<Task[]>([])
|
|
const trash = ref<Task[]>([])
|
|
const activeList = ref('')
|
|
const activeView = ref<View>(defaultView())
|
|
const selectedTask = ref<Task | null>(null)
|
|
const title = ref('')
|
|
const query = ref('')
|
|
const error = ref('')
|
|
const notice = ref('')
|
|
const loading = ref(false)
|
|
const mobileSidebar = ref(false)
|
|
const sidebarCollapsed = ref(false)
|
|
const mobileDetail = ref(false)
|
|
const mobileMore = ref(false)
|
|
const moreSettingsOpen = ref(false)
|
|
const markdownPreview = ref(false)
|
|
const showCompleted = ref(true)
|
|
const page = ref(1)
|
|
const pageSize = 50
|
|
const totalTasks = ref(0)
|
|
const totalPages = computed(() => Math.max(1, Math.ceil(totalTasks.value / pageSize)))
|
|
const expandedFolders = ref(new Set<string>())
|
|
const navigationLoaded = ref(false)
|
|
const taskSwipeStart = ref<{ id: string; x: number; y: number } | null>(null)
|
|
const taskSwipeOffsets = ref<Record<string, number>>({})
|
|
let suppressTaskClickId = ''
|
|
|
|
function toggleSidebar() {
|
|
const compact = window.matchMedia('(max-width: 930px)').matches
|
|
if (compact) {
|
|
mobileSidebar.value = !mobileSidebar.value
|
|
} else {
|
|
sidebarCollapsed.value = !sidebarCollapsed.value
|
|
}
|
|
}
|
|
|
|
const modalVisible = ref(false)
|
|
const modalTitle = ref('')
|
|
const modalLabel = ref('')
|
|
const modalValue = ref('')
|
|
const modalConfirmText = ref('确定')
|
|
const modalResolve = ref<((value: string | null) => void) | null>(null)
|
|
function askText(title: string, label = '', initial = '', confirmText = '确定') {
|
|
return new Promise<string | null>((resolve) => {
|
|
modalTitle.value = title
|
|
modalLabel.value = label
|
|
modalValue.value = initial
|
|
modalConfirmText.value = confirmText
|
|
modalVisible.value = true
|
|
modalResolve.value = resolve
|
|
})
|
|
}
|
|
function closeModal() {
|
|
modalVisible.value = false
|
|
if (modalResolve.value) { modalResolve.value(null); modalResolve.value = null }
|
|
}
|
|
function confirmModal() {
|
|
modalVisible.value = false
|
|
if (modalResolve.value) { modalResolve.value(modalValue.value); modalResolve.value = null }
|
|
}
|
|
|
|
const activeName = computed(() => {
|
|
if (activeView.value === 'trash') return '回收站'
|
|
if (activeView.value === 'today') return '今天'
|
|
if (activeView.value === 'upcoming') return '最近 7 天'
|
|
if (activeView.value === 'habits') return '习惯'
|
|
if (activeView.value === 'countdowns') return '倒数日'
|
|
if (activeView.value === 'settings') return '设置与数据'
|
|
return lists.value.find((item) => item.id === activeList.value)?.name || '收集箱'
|
|
})
|
|
const sourceTasks = computed(() => activeView.value === 'trash' ? trash.value : tasks.value)
|
|
const visibleTasks = computed(() => {
|
|
const now = new Date()
|
|
const end = new Date(now); end.setDate(end.getDate() + 7)
|
|
let result = sourceTasks.value
|
|
if (['habits','settings'].includes(activeView.value)) return []
|
|
if (activeView.value === 'today') result = result.filter((task) => task.due_at && new Date(task.due_at).toDateString() === now.toDateString())
|
|
if (activeView.value === 'upcoming') result = result.filter((task) => task.due_at && new Date(task.due_at) >= now && new Date(task.due_at) <= end)
|
|
return query.value.trim() ? filterTasks(result, query.value) : result
|
|
})
|
|
const selectedTaskSubtasks = computed(() => selectedTask.value?.subtasks ?? [])
|
|
const filteredTaskTree = computed(() => groupTaskTree(visibleTasks.value))
|
|
const taskTree = computed(() => filteredTaskTree.value)
|
|
let searchTimer: number | undefined
|
|
watch(query, () => {
|
|
if (searchTimer) window.clearTimeout(searchTimer)
|
|
if (!isTaskView(activeView.value)) return
|
|
page.value = 1
|
|
searchTimer = window.setTimeout(() => loadAll(), 250)
|
|
})
|
|
watch(showCompleted, () => {
|
|
if (isTaskView(activeView.value)) { page.value = 1; loadAll() }
|
|
})
|
|
|
|
async function api(path: string, options: RequestInit = {}) {
|
|
const headers = new Headers(options.headers || {})
|
|
if (!headers.has('Content-Type') && options.body && !(options.body instanceof FormData)) {
|
|
headers.set('Content-Type', 'application/json')
|
|
}
|
|
const csrf = csrfHeader(options.method)
|
|
if (csrf['x-csrf-token']) headers.set('x-csrf-token', csrf['x-csrf-token'])
|
|
const response = await fetch('/api/v1' + path, {
|
|
credentials: 'include',
|
|
headers,
|
|
...options,
|
|
})
|
|
if (!response.ok) {
|
|
let message = '请求失败'
|
|
try { const body = await response.json(); message = typeof body.detail === 'string' ? body.detail : message } catch { /* noop */ }
|
|
throw new Error(message)
|
|
}
|
|
return response.status === 204 ? null : response.json()
|
|
}
|
|
|
|
function toast(message: string) {
|
|
notice.value = message
|
|
window.setTimeout(() => { if (notice.value === message) notice.value = '' }, 2400)
|
|
}
|
|
function fail(reason: unknown) { error.value = reason instanceof Error ? reason.message : '请求失败' }
|
|
|
|
async function bootstrap() {
|
|
authReady.value = false
|
|
try {
|
|
const status = await api('/setup/status')
|
|
initialized.value = status.initialized
|
|
if (status.initialized) {
|
|
const data = await api('/bootstrap')
|
|
authenticated.value = true
|
|
folders.value = data.folders ?? []
|
|
lists.value = data.lists ?? []
|
|
navigationLoaded.value = true
|
|
activeList.value = data.inbox_id || lists.value.find((item: TaskList) => item.is_inbox)?.id || lists.value[0]?.id || ''
|
|
expandedFolders.value = new Set(folders.value.map((folder) => folder.id))
|
|
await loadAll()
|
|
}
|
|
} catch {
|
|
authenticated.value = false
|
|
initialized.value ??= true
|
|
} finally {
|
|
authReady.value = true
|
|
}
|
|
}
|
|
async function submitAuth() {
|
|
error.value = ''
|
|
try {
|
|
const path = initialized.value ? '/auth/login' : '/setup/initialize'
|
|
await api(path, { method: 'POST', body: JSON.stringify({ username: username.value, password: password.value }) })
|
|
initialized.value = true; authenticated.value = true
|
|
const data = await api('/bootstrap')
|
|
folders.value = data.folders ?? []
|
|
lists.value = data.lists ?? []
|
|
navigationLoaded.value = true
|
|
activeList.value = data.inbox_id || lists.value.find((item: TaskList) => item.is_inbox)?.id || lists.value[0]?.id || ''
|
|
expandedFolders.value = new Set(folders.value.map((folder) => folder.id))
|
|
await loadAll()
|
|
} catch (reason) { fail(reason) }
|
|
}
|
|
async function loadTaskPages(path: string) {
|
|
const rows: Task[] = []
|
|
let cursor: string | null = null
|
|
do {
|
|
const separator = path.includes('?') ? '&' : '?'
|
|
const data = await api(cursor ? `${path}${separator}cursor=${encodeURIComponent(cursor)}` : path)
|
|
rows.push(...(data.items ?? data))
|
|
cursor = data.next_cursor ?? null
|
|
} while (cursor)
|
|
return rows
|
|
}
|
|
function isoAtLocalDayOffset(offset: number) {
|
|
const day = new Date()
|
|
day.setDate(day.getDate() + offset)
|
|
day.setHours(0, 0, 0, 0)
|
|
return day.toISOString()
|
|
}
|
|
async function loadTasksPage() {
|
|
const params = new URLSearchParams({ page: String(page.value), page_size: String(pageSize) })
|
|
if (query.value) params.set('q', query.value)
|
|
else if (activeView.value === 'tasks' && activeList.value) params.set('list_id', activeList.value)
|
|
if (activeView.value === 'today') { params.set('due_from', isoAtLocalDayOffset(0)); params.set('due_to', isoAtLocalDayOffset(1)) }
|
|
if (activeView.value === 'upcoming') { params.set('due_from', isoAtLocalDayOffset(0)); params.set('due_to', isoAtLocalDayOffset(8)) }
|
|
if (!showCompleted.value && activeView.value !== 'trash') params.set('completed', 'false')
|
|
const data = await api(`/tasks?${params}`)
|
|
tasks.value = data.items ?? []
|
|
totalTasks.value = data.total ?? tasks.value.length
|
|
}
|
|
async function loadNavigation(force = false) {
|
|
if (!force && navigationLoaded.value) return
|
|
const [folderData, listData] = await Promise.all([api('/folders'), api('/lists')])
|
|
folders.value = folderData; lists.value = listData
|
|
navigationLoaded.value = true
|
|
if (!lists.value.some((item) => item.id === activeList.value)) {
|
|
activeList.value = lists.value.find((item) => item.is_inbox)?.id || lists.value[0]?.id || ''
|
|
}
|
|
expandedFolders.value = new Set(folders.value.map((folder) => folder.id))
|
|
await loadArchivedLists()
|
|
}
|
|
async function loadAll() {
|
|
loading.value = true; error.value = ''
|
|
try {
|
|
if (!navigationLoaded.value) await loadNavigation()
|
|
await loadTasksPage()
|
|
if (page.value > totalPages.value) { page.value = totalPages.value; await loadTasksPage() }
|
|
} catch (reason) { fail(reason) } finally { loading.value = false }
|
|
}
|
|
async function refreshAll() {
|
|
navigationLoaded.value = false
|
|
await loadAll()
|
|
}
|
|
async function loadTrashPage() {
|
|
const data = await api(`/trash?page=${page.value}&page_size=${pageSize}`)
|
|
trash.value = data.items ?? []
|
|
totalTasks.value = data.total ?? trash.value.length
|
|
}
|
|
async function loadTrash() {
|
|
loading.value = true; error.value = ''
|
|
try { await loadTrashPage() } catch (reason) { fail(reason) } finally { loading.value = false }
|
|
}
|
|
async function switchView(view: View, listId?: string) {
|
|
activeView.value = view
|
|
if (listId) activeList.value = listId
|
|
page.value = 1
|
|
selectedTask.value = null; mobileSidebar.value = false; mobileDetail.value = false; mobileMore.value = false
|
|
if (view === 'trash') await loadTrash()
|
|
else if (view === 'today') await loadTodayView()
|
|
else if (!isTaskView(view)) tasks.value = []
|
|
else await loadAll()
|
|
}
|
|
async function addTask() {
|
|
const inboxId = lists.value.find((item) => item.is_inbox)?.id || activeList.value
|
|
if (!title.value.trim() || !inboxId) return
|
|
try {
|
|
const fields = quickTaskFields(activeView.value, activeList.value, inboxId)
|
|
const task = await api('/tasks', { method: 'POST', body: JSON.stringify({ title: title.value.trim(), ...fields }) })
|
|
tasks.value.push(task); totalTasks.value = nextTotalAfterLocalTaskAdd(totalTasks.value); title.value = ''; selectTask(task); mobileDetail.value = true; toast('任务已添加')
|
|
} catch (reason) { fail(reason) }
|
|
}
|
|
async function loadTodayView() {
|
|
await loadAll()
|
|
}
|
|
async function patchTask(task: Task, patch: Partial<Task>) {
|
|
const updated = await api(`/tasks/${task.id}`, { method: 'PATCH', body: JSON.stringify({ ...patch, version: task.version }) })
|
|
const index = tasks.value.findIndex((item) => item.id === task.id)
|
|
if (index >= 0) tasks.value[index] = { ...tasks.value[index], ...updated }
|
|
if (selectedTask.value?.id === task.id) selectedTask.value = { ...selectedTask.value, ...updated }
|
|
return updated as Task
|
|
}
|
|
async function toggle(task: Task) {
|
|
try { await patchTask(task, { completed: !task.completed }); toast(task.completed ? '已重新打开' : '完成啦') } catch (reason) { fail(reason) }
|
|
}
|
|
function isInteractiveTarget(target: EventTarget | null) {
|
|
return target instanceof Element && Boolean(target.closest('button,input,select,textarea,a,label'))
|
|
}
|
|
function startTaskSwipe(task: Task, event: TouchEvent) {
|
|
if (activeView.value === 'trash' || loading.value || isInteractiveTarget(event.target)) return
|
|
const touch = event.touches[0]
|
|
if (touch) {
|
|
taskSwipeStart.value = { id: task.id, x: touch.clientX, y: touch.clientY }
|
|
taskSwipeOffsets.value[task.id] = 0
|
|
}
|
|
}
|
|
function moveTaskSwipe(task: Task, event: TouchEvent) {
|
|
const start = taskSwipeStart.value
|
|
const touch = event.touches[0]
|
|
if (!start || start.id !== task.id || !touch) return
|
|
const deltaX = touch.clientX - start.x
|
|
const deltaY = touch.clientY - start.y
|
|
if (Math.abs(deltaX) > Math.abs(deltaY)) {
|
|
if ((!task.completed && deltaX > 0) || (task.completed && deltaX < 0)) {
|
|
taskSwipeOffsets.value[task.id] = Math.max(-92, Math.min(deltaX, 92))
|
|
}
|
|
}
|
|
}
|
|
async function finishTaskSwipe(task: Task, event: TouchEvent) {
|
|
const start = taskSwipeStart.value
|
|
taskSwipeStart.value = null
|
|
const offset = taskSwipeOffsets.value[task.id] ?? 0
|
|
taskSwipeOffsets.value[task.id] = 0
|
|
if (!start || start.id !== task.id || activeView.value === 'trash' || loading.value) return
|
|
const touch = event.changedTouches[0]
|
|
const deltaX = touch ? touch.clientX - start.x : 0
|
|
const deltaY = touch ? touch.clientY - start.y : 0
|
|
const expectedDirection = task.completed ? deltaX < 0 : deltaX > 0
|
|
if (touch && expectedDirection && shouldToggleRowSwipe(Math.abs(deltaX), deltaY)) {
|
|
suppressTaskClickId = task.id
|
|
window.setTimeout(() => { if (suppressTaskClickId === task.id) suppressTaskClickId = '' }, 400)
|
|
await toggle(task)
|
|
} else if (offset) {
|
|
taskSwipeOffsets.value[task.id] = 0
|
|
}
|
|
}
|
|
function cancelTaskSwipe(task?: Task) {
|
|
taskSwipeStart.value = null
|
|
if (task) taskSwipeOffsets.value[task.id] = 0
|
|
}
|
|
function selectTaskUnlessSwiped(task: Task) {
|
|
if (suppressTaskClickId === task.id) {
|
|
suppressTaskClickId = ''
|
|
return
|
|
}
|
|
selectTask(task)
|
|
}
|
|
async function saveTask() {
|
|
if (!selectedTask.value?.title.trim()) return
|
|
try {
|
|
const task = selectedTask.value
|
|
await patchTask(task, { title: task.title.trim(), description: task.description, priority: Number(task.priority), due_at: fromDateTimeLocal(toDateTimeLocal(task.due_at)), list_id: task.list_id } as Partial<Task>)
|
|
toast('已保存')
|
|
} catch (reason) { fail(reason) }
|
|
}
|
|
async function removeTask(task: Task) {
|
|
if (!window.confirm(`把“${task.title}”移到回收站？`)) return
|
|
try { await api(`/tasks/${task.id}`, { method: 'DELETE' }); tasks.value = tasks.value.filter((item) => item.id !== task.id && item.parent_id !== task.id); selectedTask.value = null; mobileDetail.value = false; toast('已移到回收站') } catch (reason) { fail(reason) }
|
|
}
|
|
async function restoreTask(task: Task) {
|
|
try { await api(`/tasks/${task.id}/restore`, { method: 'POST' }); trash.value = trash.value.filter((item) => item.id !== task.id); toast('任务已恢复') } catch (reason) { fail(reason) }
|
|
}
|
|
async function purgeTask(task: Task) {
|
|
if (!window.confirm(`永久删除“${task.title}”？这个操作不能撤销。`)) return
|
|
try { await api(`/trash/${task.id}`, { method: 'DELETE' }); trash.value = trash.value.filter((item) => item.id !== task.id); toast('已永久删除') } catch (reason) { fail(reason) }
|
|
}
|
|
async function addSubtask() {
|
|
if (!selectedTask.value) return
|
|
const subtaskTitle = (await askText('添加子任务', '子任务名称', '', '添加'))?.trim()
|
|
if (!subtaskTitle) return
|
|
try { const child = await api('/tasks', { method: 'POST', body: JSON.stringify({ title: subtaskTitle, list_id: selectedTask.value.list_id, parent_id: selectedTask.value.id }) }); if (selectedTask.value) selectedTask.value.subtasks = [...(selectedTask.value.subtasks ?? []), child]; tasks.value.push(child); toast('子任务已添加') } catch (reason) { fail(reason) }
|
|
}
|
|
function selectTask(task: Task) {
|
|
selectedTask.value = { ...task, subtasks: task.subtasks ? [...task.subtasks] : [] }
|
|
markdownPreview.value = false; moreSettingsOpen.value = false; mobileDetail.value = true
|
|
}
|
|
async function createFolder() {
|
|
const name = (await askText('新建文件夹', '文件夹名称', '', '创建'))?.trim(); if (!name) return
|
|
try { folders.value.push(await api('/folders', { method: 'POST', body: JSON.stringify({ name }) })); toast('文件夹已创建') } catch (reason) { fail(reason) }
|
|
}
|
|
async function createList(folderId: string | null = null) {
|
|
const name = (await askText('新建清单', '清单名称', '', '创建'))?.trim(); if (!name) return
|
|
try { const item = await api('/lists', { method: 'POST', body: JSON.stringify({ name, folder_id: folderId }) }); lists.value.push(item); await switchView('tasks', item.id); toast('清单已创建') } catch (reason) { fail(reason) }
|
|
}
|
|
async function renameEntity(kind: 'folders' | 'lists', item: FolderItem | TaskList) {
|
|
const name = (await askText('重命名', kind === 'lists' ? '清单名称' : '文件夹名称', item.name, '保存'))?.trim(); if (!name || name === item.name) return
|
|
try { const updated = await api(`/${kind}/${item.id}`, { method: 'PATCH', body: JSON.stringify({ name }) }); Object.assign(item, updated); toast('已重命名') } catch (reason) { fail(reason) }
|
|
}
|
|
async function deleteEntity(kind: 'folders' | 'lists', item: FolderItem | TaskList) {
|
|
if (kind === 'lists') {
|
|
const answer = await askText(`归档清单「${item.name}」？`, '', '', '归档')
|
|
if (answer === null) return
|
|
try { await api(`/${kind}/${item.id}`, { method: 'DELETE' }); await loadArchivedLists(); await refreshAll(); toast('清单已归档') } catch (reason) { fail(reason) }
|
|
return
|
|
}
|
|
const answer = await askText(`删除文件夹「${item.name}」？`, '', '', '删除')
|
|
if (answer === null) return
|
|
try { await api(`/${kind}/${item.id}`, { method: 'DELETE' }); await refreshAll(); toast('已删除') } catch (reason) { fail(reason) }
|
|
}
|
|
async function loadArchivedLists() {
|
|
try { archivedLists.value = await api('/lists?archived=true') } catch { archivedLists.value = [] }
|
|
}
|
|
async function restoreList(item: TaskList) {
|
|
try { await api(`/lists/${item.id}/restore`, { method: 'POST' }); await loadArchivedLists(); await refreshAll(); toast('清单已恢复') } catch (reason) { fail(reason) }
|
|
}
|
|
function toggleFolder(id: string) { const next = new Set(expandedFolders.value); next.has(id) ? next.delete(id) : next.add(id); expandedFolders.value = next }
|
|
function formatDue(value: string | null) { return value ? new Intl.DateTimeFormat('zh-CN', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }).format(new Date(value)) : '' }
|
|
function focusQuick() { nextTick(() => document.querySelector<HTMLInputElement>('.quick-input')?.focus()) }
|
|
function previousPage() {
|
|
if (page.value <= 1 || loading.value) return
|
|
page.value -= 1
|
|
activeView.value === 'trash' ? loadTrash() : isTaskView(activeView.value) ? loadAll() : undefined
|
|
}
|
|
function nextPage() {
|
|
if (page.value >= totalPages.value || loading.value) return
|
|
page.value += 1
|
|
activeView.value === 'trash' ? loadTrash() : isTaskView(activeView.value) ? loadAll() : undefined
|
|
}
|
|
|
|
onMounted(bootstrap)
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="!authReady" class="center"><span class="loader" />正在打开 dodo…</div>
|
|
<div v-else-if="!authenticated" class="auth-shell">
|
|
<section class="auth-card">
|
|
<div class="brand">do<span>do</span></div><p>{{ initialized ? '欢迎回来，继续把生活理顺。' : '创建你的 dodo' }}</p>
|
|
<label>用户名<input v-model="username" autocomplete="username" placeholder="你的用户名"></label>
|
|
<label>密码<input v-model="password" type="password" autocomplete="current-password" placeholder="至少 12 位" @keyup.enter="submitAuth"></label>
|
|
<button class="primary" @click="submitAuth">{{ initialized ? '登录' : '开始使用' }}</button>
|
|
<small v-if="error" role="alert">{{ error }}</small>
|
|
</section>
|
|
</div>
|
|
<div v-else class="shell" :class="{ 'sidebar-collapsed': sidebarCollapsed }">
|
|
<div v-if="mobileSidebar || mobileDetail" class="scrim" @click="mobileSidebar=false;mobileDetail=false" />
|
|
<aside class="sidebar" :class="{ open: mobileSidebar }">
|
|
<div class="brand-row"><div class="brand small">do<span>do</span></div><button class="icon mobile-only" aria-label="关闭菜单" @click="mobileSidebar=false"><X /></button></div>
|
|
<nav class="primary-nav">
|
|
<button :class="{ active: activeView==='tasks' && lists.find(l=>l.id===activeList)?.is_inbox }" @click="switchView('tasks', lists.find(l=>l.is_inbox)?.id)"><Inbox />收集箱</button>
|
|
<button :class="{ active: activeView==='today' }" @click="switchView('today')"><ListTodo />今天</button>
|
|
<button :class="{ active: activeView==='countdowns' }" @click="switchView('countdowns')"><CalendarHeart />倒数日</button>
|
|
<button :class="{ active: activeView==='upcoming' }" @click="switchView('upcoming')"><CalendarDays />最近 7 天</button>
|
|
<button :class="{ active: activeView==='habits' }" @click="switchView('habits')"><Repeat2 />习惯</button>
|
|
<button :class="{ active: activeView==='trash' }" @click="switchView('trash')"><Trash2 />回收站</button>
|
|
</nav>
|
|
<div class="section-title"><span>我的清单</span><span><button class="mini-icon" aria-label="新建文件夹" @click="createFolder"><Folder /></button><button class="mini-icon" aria-label="新建清单" @click="createList(null)"><Plus /></button></span></div>
|
|
<div class="folders">
|
|
<div v-for="folder in folders" :key="folder.id" class="folder-block">
|
|
<div class="folder-row"><button :title="folder.name" :aria-label="folder.name" @click="toggleFolder(folder.id)"><ChevronDown v-if="expandedFolders.has(folder.id)"/><ChevronRight v-else/><Folder/><span>{{folder.name}}</span></button><span class="row-actions"><button aria-label="重命名文件夹" @click="renameEntity('folders',folder)"><Pencil/></button><button aria-label="删除文件夹" @click="deleteEntity('folders',folder)"><Trash2/></button><button aria-label="在文件夹中新建清单" @click="createList(folder.id)"><Plus/></button></span></div>
|
|
<div v-for="list in lists.filter(l=>l.folder_id===folder.id && !l.is_inbox)" v-show="expandedFolders.has(folder.id)" :key="list.id" class="list-row" :class="{active:activeView==='tasks'&&activeList===list.id}"><button class="list-row-main" :title="list.name" :aria-label="list.name" @click="switchView('tasks',list.id)"><i/><span>{{list.name}}</span></button><span class="row-actions"><button aria-label="重命名清单" @click="renameEntity('lists',list)"><Pencil/></button><button aria-label="归档清单" @click="deleteEntity('lists',list)"><ArchiveRestore/></button></span></div>
|
|
</div>
|
|
<div v-for="list in lists.filter(l=>!l.folder_id&&!l.is_inbox)" :key="list.id" class="list-row" :class="{active:activeView==='tasks'&&activeList===list.id}"><button class="list-row-main" :title="list.name" :aria-label="list.name" @click="switchView('tasks',list.id)"><i/><span>{{list.name}}</span></button><span class="row-actions"><button aria-label="重命名清单" @click="renameEntity('lists',list)"><Pencil/></button><button aria-label="归档清单" @click="deleteEntity('lists',list)"><ArchiveRestore/></button></span></div>
|
|
<template v-if="archivedLists.length">
|
|
<div class="section-title"><span>已归档清单</span></div>
|
|
<div v-for="list in archivedLists" :key="list.id" class="list-row archived-row"><button class="list-row-main" :title="list.name" :aria-label="`恢复清单：${list.name}`" @click="restoreList(list)"><ArchiveRestore/><span>{{list.name}}</span></button><span class="row-actions"><button aria-label="恢复清单" @click="restoreList(list)"><ArchiveRestore/>恢复</button></span></div>
|
|
</template>
|
|
</div>
|
|
<button class="settings" :class="{active:activeView==='settings'}" @click="switchView('settings')"><Settings />设置</button>
|
|
</aside>
|
|
|
|
<main>
|
|
<header class="topbar">
|
|
<button class="icon" :aria-label="(sidebarCollapsed ? '展开' : '收起') + '菜单'" :aria-expanded="sidebarCollapsed ? 'false' : 'true'" @click="toggleSidebar"><Menu /></button>
|
|
<div><h1>{{ activeName }}</h1></div>
|
|
<label v-if="['tasks','today','upcoming','trash'].includes(activeView)" class="search"><Search/><input v-model="query" placeholder="搜索任务…" aria-label="搜索任务"><kbd>⌘ K</kbd></label>
|
|
</header>
|
|
<template v-if="['habits','settings'].includes(activeView)">
|
|
<MvpPanel :key="activeView" :view="activeView as 'habits'|'settings'" @changed="refreshAll" @notice="toast" />
|
|
</template>
|
|
<CountdownPanel v-else-if="activeView==='countdowns'" @notice="toast" />
|
|
<template v-else>
|
|
<template v-if="activeView==='today'">
|
|
<h3 class="section-heading"><ListTodo/>今日任务</h3>
|
|
</template>
|
|
<form v-if="activeView!=='trash'" class="quick" @submit.prevent="addTask"><CirclePlus/><input v-model="title" class="quick-input" placeholder="添加任务，按回车保存"><button>添加</button></form>
|
|
<div class="list-toolbar"><label v-if="activeView!=='trash'"><input v-model="showCompleted" type="checkbox"> 显示已完成</label><span>第 {{page}} / {{totalPages}} 页 · 共 {{totalTasks}} 项</span><button v-if="query" class="link" @click="query=''">清除搜索</button></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 class="task-list" :class="{loading}">
|
|
<template v-for="node in taskTree" :key="node.task.id">
|
|
<article class="task-row swipeable" :class="{done:node.task.completed,selected:selectedTask?.id===node.task.id,ready:Math.abs(taskSwipeOffsets[node.task.id] ?? 0) >= 64}" :style="{ '--swipe-x': `${taskSwipeOffsets[node.task.id] ?? 0}px`, '--swipe-width': `${Math.abs(taskSwipeOffsets[node.task.id] ?? 0)}px` }" @touchstart.passive="startTaskSwipe(node.task, $event)" @touchmove.passive="moveTaskSwipe(node.task, $event)" @touchend="finishTaskSwipe(node.task, $event)" @touchcancel="cancelTaskSwipe(node.task)">
|
|
<span class="swipe-bg" :class="{ cancel: node.task.completed }">{{ node.task.completed ? '↩ 未完成' : '✓ 完成' }}</span>
|
|
<div class="task-main" role="button" tabindex="0" @click="activeView==='trash'?undefined:selectTaskUnlessSwiped(node.task)" @keydown.enter="activeView==='trash'?undefined:selectTaskUnlessSwiped(node.task)" @keydown.space.prevent="activeView==='trash'?undefined:selectTaskUnlessSwiped(node.task)"><strong>{{node.task.title}}</strong><span class="meta"><span v-if="node.task.due_at"><CalendarDays/>{{formatDue(node.task.due_at)}}</span><span v-if="node.subtasks.length"><ListChecks/>{{node.subtasks.filter(t=>t.completed).length}}/{{node.subtasks.length}}</span></span></div>
|
|
<button v-if="activeView!=='trash'" class="sr-only" :aria-label="node.task.completed ? `重新打开${node.task.title}` : `完成${node.task.title}`" :aria-pressed="node.task.completed" @click.stop="toggle(node.task)">切换任务状态</button>
|
|
<span v-if="node.task.priority" class="priority" :class="`p${node.task.priority}`">{{['','低','中','高'][node.task.priority]}}</span>
|
|
<button v-if="activeView==='trash'" class="restore" @click="restoreTask(node.task)"><ArchiveRestore/>恢复</button>
|
|
<button v-else class="icon ghost" aria-label="删除任务" @click.stop="removeTask(node.task)"><Trash2/></button>
|
|
<button v-if="activeView==='trash'" class="icon danger ghost" aria-label="永久删除" @click.stop="purgeTask(node.task)"><X/></button>
|
|
</article>
|
|
<article v-for="subtask in node.subtasks" :key="subtask.id" class="task-row subtask swipeable" :class="{done:subtask.completed,ready:Math.abs(taskSwipeOffsets[subtask.id] ?? 0) >= 64}" :style="{ '--swipe-x': `${taskSwipeOffsets[subtask.id] ?? 0}px`, '--swipe-width': `${Math.abs(taskSwipeOffsets[subtask.id] ?? 0)}px` }" @touchstart.passive="startTaskSwipe(subtask, $event)" @touchmove.passive="moveTaskSwipe(subtask, $event)" @touchend="finishTaskSwipe(subtask, $event)" @touchcancel="cancelTaskSwipe(subtask)"><span class="swipe-bg" :class="{ cancel: subtask.completed }">{{ subtask.completed ? '↩ 未完成' : '✓ 完成' }}</span><GripVertical/><div class="task-main" role="button" tabindex="0" @click="selectTaskUnlessSwiped(subtask)" @keydown.enter="selectTaskUnlessSwiped(subtask)" @keydown.space.prevent="selectTaskUnlessSwiped(subtask)"><strong>{{subtask.title}}</strong></div><button class="sr-only" :aria-label="subtask.completed ? `重新打开${subtask.title}` : `完成${subtask.title}`" :aria-pressed="subtask.completed" @click.stop="toggle(subtask)">切换任务状态</button></article>
|
|
</template>
|
|
<div v-if="!visibleTasks.length&&!loading" class="empty"><ListTodo/><b>{{query?'没有匹配的任务':'这里还很安静'}}</b><span>{{query?'换个关键词试试':'写下第一件想完成的小事吧'}}</span></div>
|
|
</section>
|
|
<div v-if="activeView==='today'">
|
|
<h3 class="section-heading"><Repeat2/>今日习惯</h3>
|
|
<MvpPanel view="today-habits" @changed="refreshAll" @notice="toast" />
|
|
</div>
|
|
</template>
|
|
</main>
|
|
|
|
<aside class="detail" :class="{open:mobileDetail}">
|
|
<div class="detail-head"><span>任务详情</span><button class="icon mobile-only" aria-label="关闭详情" @click="mobileDetail=false"><X/></button></div>
|
|
<div v-if="selectedTask" class="detail-form">
|
|
<div class="detail-title"><button class="check large" :class="`p${selectedTask.priority}`" @click="toggle(selectedTask)"><Check v-if="selectedTask.completed"/></button><textarea v-model="selectedTask.title" rows="2" aria-label="任务标题" @blur="saveTask"/></div>
|
|
<label>清单<select v-model="selectedTask.list_id" @change="saveTask"><option v-for="list in lists" :key="list.id" :value="list.id">{{list.name}}</option></select></label>
|
|
<label>截止时间<input :value="toDateTimeLocal(selectedTask.due_at)" type="datetime-local" @change="selectedTask!.due_at=($event.target as HTMLInputElement).value;saveTask()"></label>
|
|
<div class="field markdown"><div class="field-label"><span>备注</span><span><button :class="{active:!markdownPreview}" @click="markdownPreview=false">编辑</button><button :class="{active:markdownPreview}" @click="markdownPreview=true">预览</button></span></div><div v-if="markdownPreview" class="markdown-preview" v-html="renderMarkdown(selectedTask.description)"/><textarea v-else v-model="selectedTask.description" rows="9" placeholder="支持 Markdown…" @blur="saveTask"/></div>
|
|
<div class="subtasks"><div class="field-label"><span>子任务</span><button class="link" @click="addSubtask"><Plus/>添加</button></div><button v-for="subtask in selectedTaskSubtasks" :key="subtask.id" class="subtask-detail" @click="toggle(subtask)"><span class="check"><Check v-if="subtask.completed"/></span><span :class="{strike:subtask.completed}">{{subtask.title}}</span></button><span v-if="!selectedTaskSubtasks.length" class="hint">把这件事拆成更小的步骤</span></div>
|
|
<details class="more-settings" :open="moreSettingsOpen" @toggle="moreSettingsOpen=($event.target as HTMLDetailsElement).open"><summary>更多设置</summary><div class="more-settings-body">
|
|
<label>优先级<select v-model.number="selectedTask.priority" @change="saveTask"><option :value="0">无</option><option :value="1">低</option><option :value="2">中</option><option :value="3">高</option></select></label>
|
|
</div></details>
|
|
<div class="detail-actions"><button class="secondary" @click="saveTask">保存更改</button><button class="danger-text" @click="removeTask(selectedTask)"><Trash2/>移到回收站</button></div>
|
|
</div>
|
|
<div v-else class="paper"><ListChecks/><b>选中一个任务</b><p>日期、优先级、子任务和 Markdown 备注会出现在这里。</p></div>
|
|
</aside>
|
|
|
|
<div v-if="mobileMore" class="more-mask" @click.self="mobileMore=false"><section id="mobile-more-menu" class="more-sheet" role="dialog" aria-modal="true" aria-label="更多导航"><div class="more-sheet-head"><b>更多</b><button class="icon" aria-label="关闭更多菜单" @click="mobileMore=false"><X/></button></div><button @click="switchView('settings')"><Settings/>设置与数据</button></section></div>
|
|
<nav class="bottom" aria-label="主要导航"><button :class="{active:activeView==='today'}" @click="switchView('today')"><ListTodo/><span>今天</span></button><button :class="{active:activeView==='habits'}" @click="switchView('habits')"><Repeat2/><span>习惯</span></button><button :class="{active:activeView==='countdowns'}" @click="switchView('countdowns')"><CalendarHeart/><span>倒数日</span></button><button :class="{active:mobileMore||['tasks','upcoming','trash','settings'].includes(activeView)}" aria-haspopup="dialog" aria-controls="mobile-more-menu" :aria-expanded="mobileMore" @click="mobileMore=!mobileMore"><Ellipsis/><span>更多</span></button></nav>
|
|
<button v-if="['tasks','today','upcoming'].includes(activeView)" class="fab" aria-label="添加任务" @click="focusQuick"><CirclePlus/></button>
|
|
<Transition name="toast"><div v-if="notice" class="toast" role="status">{{notice}}</div></Transition>
|
|
<div v-if="error" class="error-toast" role="alert">{{error}}<button @click="error=''"><X/></button></div>
|
|
<div v-if="modalVisible" class="modal-mask" @click.self="closeModal">
|
|
<div class="modal-box" role="dialog" aria-modal="true">
|
|
<h3>{{ modalTitle }}</h3>
|
|
<label v-if="modalLabel">{{ modalLabel }}<input v-model="modalValue" class="modal-input" autofocus @keyup.enter="confirmModal"></label>
|
|
<div class="modal-actions"><button class="secondary" @click="closeModal">取消</button><button class="primary-small" @click="confirmModal">{{ modalConfirmText }}</button></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|