@@ -7,17 +7,17 @@ const taskStore = useTaskStore()
const showForm = ref ( false )
const editingId = ref < string | null > ( null )
const actionError = ref ( '' )
const form = reactive ( { title : '' , description : '' , priority : 'medium' as TaskItem [ 'priority' ] , due _date : '' , note _id : '' } )
const form = reactive ( { title : '' , description : '' , due _date : '' , note _id : '' } )
onMounted ( ( ) => { void taskStore . loadTasks ( ) } )
function resetForm ( ) { editingId . value = null ; form . title = '' ; form . description = '' ; form . priority = 'medium' ; form . due _date = '' ; form . note _id = '' }
function editTask ( task : TaskItem ) { editingId . value = task . task _id ; Object . assign ( form , { title : task . title , description : task . description ? ? '' , priority : task . priority , due _date : task . due _date ? . slice ( 0 , 16 ) ? ? '' , note _id : task . note _id ? ? '' } ) ; showForm . value = true }
function resetForm ( ) { editingId . value = null ; form . title = '' ; form . description = '' ; form . due _date = '' ; form . note _id = '' }
function editTask ( task : TaskItem ) { editingId . value = task . task _id ; Object . assign ( form , { title : task . title , description : task . description ? ? '' , due _date : task . due _date ? . slice ( 0 , 16 ) ? ? '' , note _id : task . note _id ? ? '' } ) ; showForm . value = true }
async function saveTask ( ) {
actionError . value = ''
try {
if ( editingId . value ) await taskStore . updateTask ( editingId . value , { ... form , due _date : form . due _date || undefined } )
if ( editingId . value ) await taskStore . updateTask ( editingId . value , { ... form , due _date : form . due _date || undefined , note _id : form . note _id || null } )
else await taskStore . createTask ( { ... form , due _date : form . due _date || undefined , note _id : form . note _id || undefined } )
showForm . value = false ; resetForm ( )
} catch ( error ) { actionError . value = error instanceof Error ? error . message : '任务保存失败' }
@@ -40,12 +40,12 @@ async function remove(task: TaskItem) {
< div v-if = "taskStore.filteredTasks.length" class="task-list" >
< article v-for = "task in taskStore.filteredTasks" :key="task.task_id" class="item-card task-card" >
< button class = "status-check" : class = "{ done: task.status === 'done' }" title = "切换完成状态" @click ="setStatus(task, task.status === 'done' ? 'todo' : 'done')" > {{ task.status = = = ' done ' ? ' ✓ ' : ' ' }} < / button >
< div class = "task-content" > < div class = "task-title" > < strong : class = "{ completed: task.status === 'done' }" > { { task . title } } < / strong > < span class = "badge" : class = "{ error: task.priority === 'high', warning: task.priority === 'medium' }" > { { task . priority } } < / span > < span class = "badge info" > { { task . source } } < / span > < / div > < p v-if = "task.description" class="muted">{{ task.description }}</p><div class="subtle"><span>{{ task.status }}</span><span v-if="task.due_date">截止 {{ new Date(task.due_date).toLocaleString() }}</span><span v-if="task.note_title " > 关联 ： {{ task.note_title }} < / span > < / div > < / div >
< div class = "task-content" > < div class = "task-title" > < strong : class = "{ completed: task.status === 'done' }" > { { task . title } } < / strong > < / div > < p v-if = "task.description" class="muted">{{ task.description }}</p><div class="subtle"><span>{{ task.status }}</span><span v-if="task.due_date">截止 {{ new Date(task.due_date).toLocaleString() }}</span><span v-if="task.note_id " > 关联 Note ： {{ task.note_id }} < / span > < / div > < / div >
< div class = "inline-actions" > < button class = "icon-button" @click ="editTask(task)" > 编辑 < / button > < button class = "button-danger" @click ="remove(task)" > 删除 < / button > < / div >
< / article >
< / div >
< div v-else class = "empty-state" > < div > < strong > { { taskStore . isLoading ? '正在加载任务…' : '没有符合条件的任务' } } < / strong > < p > 创建一项任务 ， 或调整左侧筛选条件 。 < / p > < / div > < / div >
< div v-if = "showForm" class="modal-backdrop" @click.self="showForm = false"><div class="modal"><h2>{{ editingId ? '编辑任务' : '新建任务' }}</h2><form @submit.prevent="saveTask"><div class="field"><label>标题</label><input v-model="form.title" class="input" required /></div><div class="field"><label>描述</label><textarea v-model="form.description" class="textarea" /></div><div class="form-grid"><div class="field"><label>优先级</label><select v-model="form.priority" class="select"><option value="high">高</option><option value="medium">中</option><option value="low">低</option></select></div><div class="field"><label>截止时间</label><input v-model="form.due_date" class="input" type="datetime-local" /></div></div>< div class="field"><label>关联 Note ID</label><input v-model="form.note_id" class="input" /></div><div class="inline-actions"><button class="button-primary">保存</button><button type="button" class="button-secondary" @click="showForm = false" > 取消 < / button > < / div > < / form > < / div > < / div >
< div v-if = "showForm" class="modal-backdrop" @click.self="showForm = false"><div class="modal"><h2>{{ editingId ? '编辑任务' : '新建任务' }}</h2><form @submit.prevent="saveTask"><div class="field"><label>标题</label><input v-model="form.title" class="input" required /></div><div class="field"><label>描述</label><textarea v-model="form.description" class="textarea" /></div><div class="field"><label>截止时间</label><input v-model="form.due_date" class="input" type="datetime-local" /></div><div class="field"><label>关联 Note ID</label><input v-model="form.note_id" class="input" /></div><div class="inline-actions"><button class="button-primary">保存</button><button type="button" class="button-secondary" @click="showForm = false" > 取消 < / button > < / div > < / form > < / div > < / div >
< / section >
< / template >
