diff --git a/frontend/src/features/tasks/TaskFiltersPanel.vue b/frontend/src/features/tasks/TaskFiltersPanel.vue
new file mode 100644
index 0000000..d807906
--- /dev/null
+++ b/frontend/src/features/tasks/TaskFiltersPanel.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useTaskStore } from '@/stores/task'
+const taskStore = useTaskStore()
+</script>
+
+<template>
+  <div class="sidebar-panel filters">
+    <div class="field"><label>状态</label><select v-model="taskStore.filterStatus" class="select"><option value="all">全部</option><option value="todo">待办</option><option value="in_progress">进行中</option><option value="done">已完成</option><option value="cancelled">已取消</option></select></div>
+    <div class="field"><label>优先级</label><select v-model="taskStore.filterPriority" class="select"><option value="all">全部</option><option value="high">高</option><option value="medium">中</option><option value="low">低</option></select></div>
+    <div class="field"><label>来源</label><select v-model="taskStore.filterSource" class="select"><option value="all">全部</option><option value="user">用户</option><option value="note">笔记</option><option value="agent">Agent</option></select></div>
+    <div class="task-counts"><p><span>待办</span><strong>{{ taskStore.todoTasks.length }}</strong></p><p><span>进行中</span><strong>{{ taskStore.inProgressTasks.length }}</strong></p><p><span>已完成</span><strong>{{ taskStore.doneTasks.length }}</strong></p></div>
+  </div>
+</template>
+
+<style scoped>
+.filters { display: grid; gap: var(--space-md); }
+.task-counts { display: grid; gap: var(--space-xs); padding-top: var(--space-md); border-top: 1px solid var(--color-border-subtle); }
+.task-counts p { display: flex; justify-content: space-between; color: var(--color-text-secondary); }
+</style>
diff --git a/frontend/src/features/tasks/TasksView.vue b/frontend/src/features/tasks/TasksView.vue
new file mode 100644
index 0000000..8016655
--- /dev/null
+++ b/frontend/src/features/tasks/TasksView.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import type { TaskItem, TaskStatus } from '@/contracts'
+import { useTaskStore } from '@/stores/task'
+
+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: '' })
+
+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 }
+
+async function saveTask() {
+  actionError.value = ''
+  try {
+    if (editingId.value) await taskStore.updateTask(editingId.value, { ...form, due_date: form.due_date || undefined })
+    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 : '任务保存失败' }
+}
+
+async function setStatus(task: TaskItem, status: TaskStatus) {
+  try { await taskStore.updateTask(task.task_id, { status }) } catch (error) { actionError.value = error instanceof Error ? error.message : '状态更新失败' }
+}
+
+async function remove(task: TaskItem) {
+  if (!confirm(`确定删除任务“${task.title}”吗？`)) return
+  try { await taskStore.deleteTask(task.task_id) } catch (error) { actionError.value = error instanceof Error ? error.message : '任务删除失败' }
+}
+</script>
+
+<template>
+  <section class="feature-page">
+    <header class="feature-header"><div><h1>任务</h1><p>管理用户、笔记和 Agent 产生的行动项。</p></div><button class="button-primary" @click="resetForm(); showForm = true">＋ 新建任务</button></header>
+    <div v-if="taskStore.error || actionError" class="error-banner">{{ taskStore.error || actionError }}</div>
+    <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="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>
+  </section>
+</template>
+
+<style scoped>
+.task-list { display: grid; gap: var(--space-md); }
+.task-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-md); }
+.status-check { width: 26px; height: 26px; border: 2px solid var(--color-border-default); border-radius: var(--radius-full); }
+.status-check.done { border-color: var(--color-success); background: var(--color-success); color: white; }
+.task-title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); }
+.task-content p { margin: var(--space-xs) 0; }
+.task-content .subtle { display: flex; flex-wrap: wrap; gap: var(--space-md); }
+.completed { text-decoration: line-through; color: var(--color-text-tertiary); }
+@media (max-width: 700px) { .task-card { grid-template-columns: auto 1fr; } .task-card > .inline-actions { grid-column: 2; } }
+</style>
diff --git a/frontend/src/stores/task.ts b/frontend/src/stores/task.ts
index 8ed4140..a640dcd 100644
--- a/frontend/src/stores/task.ts
+++ b/frontend/src/stores/task.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import type { TaskItem, TaskStatus, TaskPriority, TaskSource } from '@/contracts'
-import { mockTasks } from '@/services/taskService'
+import { createTask as createTaskRequest, deleteTask as deleteTaskRequest, listTasks, mockTasks, updateTask as updateTaskRequest } from '@/services/taskService'
 
 export const useTaskStore = defineStore('task', () => {
   const tasks = ref<TaskItem[]>(mockTasks)
@@ -9,6 +9,7 @@ export const useTaskStore = defineStore('task', () => {
   const filterPriority = ref<TaskPriority | 'all'>('all')
   const filterSource = ref<TaskSource | 'all'>('all')
   const isLoading = ref(false)
+  const error = ref<string | null>(null)
 
   const filteredTasks = computed(() => {
     return tasks.value.filter((t) => {
@@ -26,27 +27,19 @@ export const useTaskStore = defineStore('task', () => {
   async function loadTasks() {
     isLoading.value = true
     try {
-      const { listTasks } = await import('@/services/taskService')
       const resp = await listTasks()
       tasks.value = resp.items
+      error.value = null
+    } catch (reason) {
+      error.value = reason instanceof Error ? reason.message : '任务加载失败'
     } finally {
       isLoading.value = false
     }
   }
 
   async function createTask(data: { title: string; description?: string; priority?: TaskPriority; due_date?: string; note_id?: string }) {
-    const newTask: TaskItem = {
-      task_id: `t-${Date.now()}`,
-      title: data.title,
-      description: data.description,
-      status: 'todo',
-      priority: data.priority || 'medium',
-      due_date: data.due_date,
-      note_id: data.note_id,
-      source: 'user',
-      created_at: new Date().toISOString(),
-      updated_at: new Date().toISOString(),
-    }
+    const newTask = await createTaskRequest(data)
+    newTask.priority = data.priority || 'medium'
     tasks.value.unshift(newTask)
     return newTask
   }
@@ -54,12 +47,13 @@ export const useTaskStore = defineStore('task', () => {
   async function updateTask(taskId: string, data: Partial<Pick<TaskItem, 'title' | 'description' | 'status' | 'priority' | 'due_date'>>) {
     const task = tasks.value.find((t) => t.task_id === taskId)
     if (task) {
-      Object.assign(task, data)
-      task.updated_at = new Date().toISOString()
+      const updated = await updateTaskRequest(taskId, data)
+      Object.assign(task, updated, data)
     }
   }
 
   async function deleteTask(taskId: string) {
+    await deleteTaskRequest(taskId)
     const idx = tasks.value.findIndex((t) => t.task_id === taskId)
     if (idx > -1) tasks.value.splice(idx, 1)
   }
@@ -78,6 +72,7 @@ export const useTaskStore = defineStore('task', () => {
     inProgressTasks,
     doneTasks,
     isLoading,
+    error,
     loadTasks,
     createTask,
     updateTask,