From 485d75820b684b241b048e66274a0660b862d63a Mon Sep 17 00:00:00 2001
From: xiaomai <xiaomai@ramatex.com.my>
Date: Wed, 22 Oct 2025 17:52:17 +0800
Subject: [PATCH] feat(ui): overhaul interface with Nuxt UI

Integrate the Nuxt UI component library and completely revamp the application's user interface to improve usability, aesthetics, and maintainability.

- Replace all custom components and native browser dialogs (`alert`, `prompt`, `confirm`) with Nuxt UI components like `UCard`, `UButton`, `UModal`, and `UNotifications`.
- Refactor the main page by extracting the sidebar into dedicated panel components: `CategoryPanel`, `BoardSummaryPanel`, and `HistoryPanel`.
- Redesign all major components (Toolbar, Board, Stage, Task) for a cleaner layout and improved information hierarchy.
- Implement user-friendly modals for all creation, editing, and deletion flows, providing a more consistent user experience.
- Add toast notifications to provide immediate feedback for user actions.
---
 app.config.ts                           |  24 ++
 app.vue                                 |  19 +-
 components/Board.vue                    | 105 +++++--
 components/MergeModal.vue               | 121 +++++---
 components/StageColumn.vue              | 246 ++++++++++++++--
 components/TaskCard.vue                 |  96 ++++--
 components/TaskModal.vue                | 243 +++++++++++----
 components/Toolbar.vue                  | 272 +++++++++++++----
 components/dialogs/StageModal.vue       |  76 +++++
 components/panels/BoardSummaryPanel.vue |  73 +++++
 components/panels/CategoryPanel.vue     | 213 ++++++++++++++
 components/panels/HistoryPanel.vue      |  92 ++++++
 layouts/default.vue                     |   5 +
 nuxt.config.ts                          |   8 +-
 package.json                            |   5 +-
 pages/index.vue                         | 143 +++++----
 pnpm-lock.yaml                          | 373 ++++++++++++++++++++++++
 stores/board.ts                         |  24 +-
 tailwind.config.ts                      |   3 +-
 19 files changed, 1823 insertions(+), 318 deletions(-)
 create mode 100644 app.config.ts
 create mode 100644 components/dialogs/StageModal.vue
 create mode 100644 components/panels/BoardSummaryPanel.vue
 create mode 100644 components/panels/CategoryPanel.vue
 create mode 100644 components/panels/HistoryPanel.vue
 create mode 100644 layouts/default.vue

diff --git a/app.config.ts b/app.config.ts
new file mode 100644
index 0000000..dafe8ed
--- /dev/null
+++ b/app.config.ts
@@ -0,0 +1,24 @@
+export default defineAppConfig({
+  ui: {
+    primary: 'sky',
+    gray: 'slate',
+    notifications: {
+      position: 'bottom-right'
+    },
+    button: {
+      default: {
+        color: 'neutral'
+      }
+    },
+    card: {
+      default: {
+        header: {
+          padding: 'px-4 py-3'
+        },
+        body: {
+          padding: 'px-4 py-4'
+        }
+      }
+    }
+  }
+})
diff --git a/app.vue b/app.vue
index 4799088..e08691d 100644
--- a/app.vue
+++ b/app.vue
@@ -1,11 +1,18 @@
 <template>
-  <div class="min-h-full bg-slate-950 text-slate-100">
-    <NuxtPage />
-  </div>
+  <UApp>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+    <UNotifications />
+  </UApp>
 </template>
 
 <script setup lang="ts">
-const config = useRuntimeConfig().public
-useHead({ title: config.appTitle })
+const config = useRuntimeConfig().public;
+useHead({
+  titleTemplate: (title) => {
+    if (!title || title === config.appTitle) return config.appTitle;
+    return `${title} · ${config.appTitle}`;
+  },
+});
 </script>
-
diff --git a/components/Board.vue b/components/Board.vue
index 4aa0608..1c959b8 100644
--- a/components/Board.vue
+++ b/components/Board.vue
@@ -1,44 +1,95 @@
 <template>
-  <div class="p-3 overflow-auto grid gap-3" :style="gridStyle">
-    <div v-for="(col, colIndex) in columns" :key="colIndex" class="flex flex-col gap-3 min-w-[320px]">
-      <StageColumn v-for="sid in col" :key="sid" :stage-id="sid" :query="query" :category="category" />
+  <UCard class="flex h-full flex-col">
+    <template #header>
+      <div class="flex flex-wrap items-center gap-3">
+        <div class="flex flex-col">
+          <span class="text-sm font-medium text-slate-200">看板阶段</span>
+          <span class="text-xs text-slate-400">
+            共 {{ totalStages }} 个阶段，分布在 {{ columns.length }} 列
+          </span>
+        </div>
+        <div class="flex-1" />
+        <UTooltip text="新增阶段">
+          <UButton color="primary" icon="i-heroicons-plus-circle-20-solid" @click="openStageModal()">
+            添加阶段
+          </UButton>
+        </UTooltip>
+        <UTooltip text="新增列（用于分组阶段）">
+          <UButton color="neutral" variant="soft" icon="i-heroicons-view-columns-20-solid" @click="addColumn">
+            添加列
+          </UButton>
+        </UTooltip>
+      </div>
+    </template>
+
+    <div class="relative flex-1">
+      <div class="flex h-full gap-4 overflow-x-auto pb-6 pr-2">
+        <div
+          v-for="(col, colIndex) in columns"
+          :key="`column-${colIndex}`"
+          class="flex min-w-[320px] flex-col gap-4"
+        >
+          <div class="flex items-center justify-between text-xs uppercase tracking-wide text-slate-400">
+            <span>列 {{ colIndex + 1 }}</span>
+            <UBadge color="neutral" variant="soft" :label="`${col.length} 个阶段`" />
+          </div>
+          <StageColumn
+            v-for="sid in col"
+            :key="sid"
+            :stage-id="sid"
+            :query="query"
+            :category="category"
+            :column-index="colIndex"
+          />
+        </div>
+      </div>
+
+      <div
+        v-if="!columns.length || !totalStages"
+        class="absolute inset-0 flex flex-col items-center justify-center gap-4 text-slate-400"
+      >
+        <UIcon name="i-heroicons-queue-list-20-solid" class="h-10 w-10 text-slate-600" />
+        <div class="text-sm">暂无阶段。点击“添加阶段”开始构建看板。</div>
+      </div>
     </div>
-  </div>
-  <div v-if="!columns.length || !columns[0]?.length" class="text-center text-slate-400 py-10">
-    暂无阶段。点击左侧“添加阶段”创建。
-  </div>
-  <div class="px-3 pb-3">
-    <button class="px-3 py-1 rounded bg-slate-800/60 border border-border hover:bg-slate-800" @click="addColumn">添加列</button>
-  </div>
-  <div class="px-3 pb-3">
-    <button class="px-3 py-1 rounded bg-slate-800/60 border border-border hover:bg-slate-800" @click="addStage">添加阶段</button>
-  </div>
-  
+  </UCard>
+
+  <StageModal v-model:open="stageModalOpen" :default-column="stageModalColumn" @submit="createStage" />
 </template>
 
 <script setup lang="ts">
 import { useBoardStore } from '~/stores/board'
 import StageColumn from './StageColumn.vue'
+import StageModal from '~/components/dialogs/StageModal.vue'
 
 const store = useBoardStore()
-const props = defineProps<{ query: string; category: string | '' }>()
-const columns = computed(() => store.board.layout?.columns || [])
 
-const gridStyle = computed(() => ({
-  gridAutoFlow: 'column',
-  gridAutoRows: '1fr'
-}))
+const props = defineProps<{ query: string; category: string | '' }>()
+
+const toast = useToast()
+
+const columns = computed(() => store.board.layout?.columns || [])
+const totalStages = computed(() => store.board.stages.length)
+
+const stageModalOpen = ref(false)
+const stageModalColumn = ref(0)
+
+function openStageModal(column = 0) {
+  stageModalColumn.value = column
+  stageModalOpen.value = true
+}
+
+function createStage(payload: { title: string; column: number }) {
+  stageModalOpen.value = false
+  const column = Math.max(0, Math.min(payload.column, columns.value.length ? columns.value.length - 1 : 0))
+  store.addStage(payload.title.trim(), column)
+  toast.add({ color: 'primary', title: `已创建阶段「${payload.title}」` })
+}
 
 function addColumn() {
   if (!store.board.layout.columns) store.board.layout.columns = []
   store.board.layout.columns.push([])
   store.log('column-add', { count: store.board.layout.columns.length })
-}
-function addStage() {
-  const title = prompt('阶段名称？')
-  if (!title) return
-  const colIndex = store.board.layout.columns.length ? 0 : 0
-  store.addStage(title.trim(), colIndex)
+  toast.add({ color: 'neutral', title: `新增列，当前共有 ${store.board.layout.columns.length} 列` })
 }
 </script>
-
diff --git a/components/MergeModal.vue b/components/MergeModal.vue
index 524c7ee..6b7d804 100644
--- a/components/MergeModal.vue
+++ b/components/MergeModal.vue
@@ -1,55 +1,84 @@
 <template>
-  <div v-if="open" class="fixed inset-0 bg-black/60 flex items-center justify-center p-4">
-    <div class="w-[1000px] max-w-[95vw] max-h-[90vh] rounded-lg border border-border bg-panel flex flex-col">
-      <div class="flex items-center justify-between px-3 py-2 border-b border-border">
-        <h2 class="font-semibold">导入/合并 预览</h2>
-        <button class="px-2 py-1 rounded bg-slate-800/60 border border-border hover:bg-slate-800" @click="close">✕</button>
-      </div>
-      <div class="p-3 overflow-auto space-y-3">
-        <div class="flex items-center gap-3">
-          <div>
-            <label class="text-sm text-slate-400 mr-2">策略</label>
-            <select v-model="policy" class="px-2 py-1 rounded bg-slate-900 border border-border">
-              <option value="prefer-import">冲突优先：导入文件</option>
-              <option value="prefer-current">冲突优先：当前看板</option>
-            </select>
+  <UModal v-model="open" :ui="{ width: 'max-w-3xl' }">
+    <UCard>
+      <template #header>
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-2">
+            <UIcon name="i-heroicons-arrow-down-tray-20-solid" class="h-5 w-5 text-sky-400" />
+            <span class="font-semibold">导入/合并预览</span>
           </div>
-          <label class="text-sm flex items-center gap-2">
-            <input type="checkbox" v-model="removeMissing" /> 同步删除在导入文件中不存在的任务/阶段
-          </label>
+          <UBadge color="neutral" variant="soft">来源文件：{{ name || '未命名' }}</UBadge>
         </div>
-        <div class="grid grid-cols-3 gap-2">
-          <div class="rounded border border-border bg-slate-900 p-3">
-            <div class="text-sm text-slate-400">任务新增</div>
-            <div class="text-2xl font-bold">{{ diff?.tasks?.added?.length || 0 }}</div>
-          </div>
-          <div class="rounded border border-border bg-slate-900 p-3">
-            <div class="text-sm text-slate-400">任务删除</div>
-            <div class="text-2xl font-bold">{{ diff?.tasks?.removed?.length || 0 }}</div>
-          </div>
-          <div class="rounded border border-border bg-slate-900 p-3">
-            <div class="text-sm text-slate-400">任务修改</div>
-            <div class="text-2xl font-bold">{{ diff?.tasks?.modified?.length || 0 }}</div>
-          </div>
+      </template>
+
+      <div class="space-y-6">
+        <UAlert
+          color="primary"
+          variant="soft"
+          title="合并前请确认策略"
+          description="导入文件将与当前看板数据对比。请选择冲突策略及是否删除缺失项目。"
+        />
+
+        <div class="flex flex-wrap items-center gap-4">
+          <UFormGroup label="冲突策略" name="policy" class="w-64">
+            <USelectMenu
+              v-model="policy"
+              :options="policies"
+              value-attribute="value"
+              option-attribute="label"
+            />
+          </UFormGroup>
+          <UCheckbox v-model="removeMissing">
+            同步删除在导入文件中不存在的任务/阶段
+          </UCheckbox>
         </div>
-        <div class="rounded border border-border bg-slate-900 p-3 text-xs whitespace-pre-wrap">
-          <div>文件：{{ name }}</div>
-          <div>Tasks: +{{ diff?.tasks?.added?.length || 0 }} -{{ diff?.tasks?.removed?.length || 0 }} ~{{ diff?.tasks?.modified?.length || 0 }}</div>
-          <div>Stages: +{{ diff?.stages?.added?.length || 0 }} -{{ diff?.stages?.removed?.length || 0 }} ~{{ diff?.stages?.modified?.length || 0 }}</div>
-          <div>Layout changed: {{ diff?.layout?.changed ? 'Yes' : 'No' }}</div>
+
+        <div class="grid gap-3 md:grid-cols-3">
+          <UCard variant="soft" class="border border-emerald-500/20 bg-emerald-500/5 text-emerald-200">
+            <p class="text-xs uppercase tracking-wide opacity-70">任务新增</p>
+            <p class="text-3xl font-semibold">{{ diff?.tasks?.added?.length || 0 }}</p>
+          </UCard>
+          <UCard variant="soft" class="border border-rose-500/20 bg-rose-500/5 text-rose-200">
+            <p class="text-xs uppercase tracking-wide opacity-70">任务删除</p>
+            <p class="text-3xl font-semibold">{{ diff?.tasks?.removed?.length || 0 }}</p>
+          </UCard>
+          <UCard variant="soft" class="border border-amber-500/20 bg-amber-500/5 text-amber-200">
+            <p class="text-xs uppercase tracking-wide opacity-70">任务修改</p>
+            <p class="text-3xl font-semibold">{{ diff?.tasks?.modified?.length || 0 }}</p>
+          </UCard>
+        </div>
+
+        <UCard variant="soft" class="border border-slate-800 bg-slate-900/70 text-xs text-slate-300">
+          <div class="space-y-1">
+            <div class="flex items-center gap-2">
+              <UIcon name="i-heroicons-document-duplicate-20-solid" class="h-4 w-4 text-slate-500" />
+              <span>Tasks: +{{ diff?.tasks?.added?.length || 0 }} / -{{ diff?.tasks?.removed?.length || 0 }} / ~{{ diff?.tasks?.modified?.length || 0 }}</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <UIcon name="i-heroicons-queue-list-20-solid" class="h-4 w-4 text-slate-500" />
+              <span>Stages: +{{ diff?.stages?.added?.length || 0 }} / -{{ diff?.stages?.removed?.length || 0 }} / ~{{ diff?.stages?.modified?.length || 0 }}</span>
+            </div>
+            <div class="flex items-center gap-2">
+              <UIcon name="i-heroicons-view-columns-20-solid" class="h-4 w-4 text-slate-500" />
+              <span>布局是否变化：{{ diff?.layout?.changed ? '是' : '否' }}</span>
+            </div>
+          </div>
+        </UCard>
+
+        <div class="flex justify-end gap-2">
+          <UButton color="neutral" variant="ghost" @click="open = false">取消</UButton>
+          <UButton color="primary" icon="i-heroicons-arrow-up-tray-20-solid" @click="apply">应用合并</UButton>
         </div>
       </div>
-      <div class="flex items-center gap-2 px-3 py-2 border-t border-border">
-        <button class="px-3 py-1 rounded bg-accent text-slate-900 font-medium hover:brightness-110" @click="apply">应用合并</button>
-      </div>
-    </div>
-  </div>
+    </UCard>
+  </UModal>
 </template>
 
 <script setup lang="ts">
 import { useBoardStore } from '~/stores/board'
 
 const store = useBoardStore()
+
 const open = defineModel<boolean>('open', { required: true })
 const imported = defineModel<any>('imported', { required: true })
 const diff = defineModel<any>('diff', { required: true })
@@ -57,10 +86,14 @@ const name = defineModel<string>('name', { required: true })
 
 const policy = ref<'prefer-import' | 'prefer-current'>('prefer-import')
 const removeMissing = ref(false)
-function close(){ open.value = false }
-function apply(){
+
+const policies = [
+  { label: '冲突优先：导入文件', value: 'prefer-import' },
+  { label: '冲突优先：当前看板', value: 'prefer-current' }
+]
+
+function apply() {
   store.applyMerge(imported.value, policy.value, removeMissing.value)
-  close()
+  open.value = false
 }
 </script>
-
diff --git a/components/StageColumn.vue b/components/StageColumn.vue
index 7ef010b..6c93c16 100644
--- a/components/StageColumn.vue
+++ b/components/StageColumn.vue
@@ -1,75 +1,261 @@
 <template>
-  <div class="rounded-lg border border-border bg-panel">
-    <div class="flex items-center justify-between px-3 py-2 border-b border-border">
-      <div class="font-semibold">{{ stage?.title || '未命名阶段' }}</div>
-      <div class="flex items-center gap-2 text-sm">
-        <button class="px-2 py-1 rounded bg-slate-800/60 border border-border hover:bg-slate-800" @click="onAdd">添加任务</button>
-        <button class="px-2 py-1 rounded bg-slate-800/60 border border-border hover:bg-slate-800" @click="onRename">重命名</button>
-        <button class="px-2 py-1 rounded bg-slate-800/60 border border-border hover:bg-slate-800" @click="onMoveCol">移列</button>
-        <button class="px-2 py-1 rounded bg-slate-800/60 border border-border hover:bg-slate-800" @click="onDelete">删除</button>
+  <UCard class="flex h-full flex-col border border-slate-800 bg-slate-950/60">
+    <template #header>
+      <div class="flex items-start gap-2">
+        <div class="min-w-0 flex-1">
+          <div v-if="editingTitle" class="space-y-2">
+            <UInput
+              v-model="titleDraft"
+              size="sm"
+              placeholder="阶段名称"
+              autofocus
+              @keyup.enter="saveTitle"
+            />
+            <div class="flex items-center gap-2">
+              <UButton size="2xs" color="primary" icon="i-heroicons-check-20-solid" @click="saveTitle">
+                保存
+              </UButton>
+              <UButton size="2xs" color="neutral" variant="ghost" @click="cancelEdit">
+                取消
+              </UButton>
+            </div>
+          </div>
+          <div v-else class="flex flex-wrap items-center gap-2">
+            <h3 class="truncate font-semibold">{{ stage?.title || '未命名阶段' }}</h3>
+            <UBadge size="xs" color="neutral" variant="soft">{{ tasksCount }} 个任务</UBadge>
+          </div>
+        </div>
+        <div class="flex items-center gap-1">
+          <UTooltip text="添加任务">
+            <UButton size="xs" color="primary" variant="soft" icon="i-heroicons-plus-20-solid" @click="onAdd" />
+          </UTooltip>
+          <UDropdown :items="dropdownItems">
+            <UButton size="xs" color="neutral" variant="ghost" icon="i-heroicons-ellipsis-horizontal-20-solid" />
+          </UDropdown>
+        </div>
+      </div>
+    </template>
+
+    <div
+      class="flex flex-1 flex-col gap-3 overflow-auto rounded-lg border border-dashed border-slate-800 bg-slate-950/50 p-2 transition"
+      :data-stage-id="stageId"
+      @dragover.prevent="onDragOver"
+      @dragleave="over = false"
+      @drop.prevent="onDrop"
+      :class="{ 'border-sky-400/60 bg-sky-500/10': over }"
+    >
+      <TaskCard
+        v-for="tid in filteredTasks"
+        :key="tid"
+        :task-id="tid"
+      />
+      <div v-if="!filteredTasks.length" class="py-6 text-center text-xs text-slate-500">
+        暂无匹配的任务。
       </div>
     </div>
-    <div class="p-2 flex flex-col gap-2 min-h-[60px]" :data-stage-id="stageId" @dragover.prevent="onDragOver" @dragleave="over=false" @drop.prevent="onDrop" :class="{ 'outline outline-2 outline-accent/60 outline-offset-[-4px] rounded-md': over }">
-      <TaskCard v-for="tid in filteredTasks" :key="tid" :task-id="tid" @dragging="(v) => dragging.value = v" />
-    </div>
-  </div>
+  </UCard>
+
+  <UModal v-model="moveOpen">
+    <UCard>
+      <template #header>
+        <div class="flex items-center gap-2">
+          <UIcon name="i-heroicons-view-columns-20-solid" class="h-5 w-5 text-sky-400" />
+          <span class="font-semibold">移动阶段</span>
+        </div>
+      </template>
+      <div class="space-y-4">
+        <UFormGroup label="目标列" name="column">
+          <USelectMenu
+            v-model="moveColumn"
+            :options="columnOptions"
+            value-attribute="value"
+            option-attribute="label"
+          />
+        </UFormGroup>
+        <div class="flex justify-end gap-2">
+          <UButton color="neutral" variant="ghost" @click="moveOpen = false">取消</UButton>
+          <UButton color="primary" @click="moveStage">移动</UButton>
+        </div>
+      </div>
+    </UCard>
+  </UModal>
+
+  <UModal v-model="deleteOpen">
+    <UCard>
+      <template #header>
+        <div class="flex items-center gap-2">
+          <UIcon name="i-heroicons-exclamation-triangle-20-solid" class="h-5 w-5 text-amber-400" />
+          <span class="font-semibold">删除阶段</span>
+        </div>
+      </template>
+      <p class="text-sm text-slate-300">
+        确定删除该阶段吗？仅当阶段中没有任务时才能删除。
+      </p>
+      <div class="mt-6 flex justify-end gap-2">
+        <UButton color="neutral" variant="ghost" @click="deleteOpen = false">取消</UButton>
+        <UButton color="rose" @click="removeStage">删除</UButton>
+      </div>
+    </UCard>
+  </UModal>
 </template>
 
 <script setup lang="ts">
 import { useBoardStore } from '~/stores/board'
 import TaskCard from './TaskCard.vue'
 
+const props = defineProps<{ stageId: string; query: string; category: string | ''; columnIndex: number }>()
 const store = useBoardStore()
-const props = defineProps<{ stageId: string; query: string; category: string | '' }>()
+const toast = useToast()
+
 const stage = computed(() => store.stageById(props.stageId))
 const tasks = computed(() => stage.value?.tasks || [])
+const tasksCount = computed(() => tasks.value.length)
+
 const filteredTasks = computed(() => {
   const q = (props.query || '').toLowerCase()
   const c = props.category
   return tasks.value.filter((tid) => {
     const t = store.taskById(tid)
     if (!t) return false
-    const hitText = !q || t.title.toLowerCase().includes(q) || (t.description || '').toLowerCase().includes(q)
+    const hitText =
+      !q ||
+      t.title.toLowerCase().includes(q) ||
+      (t.description || '').toLowerCase().includes(q)
     const hitCat = !c || t.category === c
     return hitText && hitCat
   })
 })
 
 const over = ref(false)
-const dragging = ref(false)
 function onDragOver(e: DragEvent) {
   e.dataTransfer!.dropEffect = 'move'
   over.value = true
 }
 function onDrop(e: DragEvent) {
   over.value = false
-  const taskId = e.dataTransfer?.getData('text/task'); if (!taskId) return
+  const taskId = e.dataTransfer?.getData('text/task')
+  if (!taskId) return
   const list = (e.currentTarget as HTMLElement).querySelectorAll('[data-task]')
   const y = e.clientY
   let index = list.length
   for (let i = 0; i < list.length; i++) {
     const rect = (list[i] as HTMLElement).getBoundingClientRect()
-    if (y < rect.top + rect.height / 2) { index = i; break }
+    if (y < rect.top + rect.height / 2) {
+      index = i
+      break
+    }
   }
   store.moveTask(taskId, props.stageId, index)
 }
-function onAdd() { store.addTask(props.stageId) }
-function onRename() {
-  const title = prompt('新的阶段名称？', stage.value?.title || '')
-  if (!title) return
-  store.renameStage(props.stageId, title.trim())
+
+function onAdd() {
+  const task = store.addTask(props.stageId)
+  toast.add({ color: 'primary', title: '已创建新任务', description: task.title })
 }
-function onDelete() {
-  if (!confirm('删除该阶段？仅空阶段可删除')) return
-  if (!store.deleteStage(props.stageId)) alert('阶段非空或不存在')
+
+const editingTitle = ref(false)
+const titleDraft = ref('')
+
+watch(
+  stage,
+  (value) => {
+    if (!value) return
+    titleDraft.value = value.title
+  },
+  { immediate: true }
+)
+
+function startEdit() {
+  editingTitle.value = true
+  titleDraft.value = stage.value?.title || ''
 }
-function onMoveCol() {
+
+function saveTitle() {
+  if (!titleDraft.value.trim()) {
+    toast.add({ color: 'rose', title: '阶段名称不能为空' })
+    return
+  }
+  store.renameStage(props.stageId, titleDraft.value.trim())
+  editingTitle.value = false
+  toast.add({ color: 'neutral', title: '阶段名称已更新' })
+}
+
+function cancelEdit() {
+  editingTitle.value = false
+  titleDraft.value = stage.value?.title || ''
+}
+
+const moveOpen = ref(false)
+const moveColumn = ref(props.columnIndex)
+
+watch(
+  () => props.columnIndex,
+  (value) => {
+    moveColumn.value = value
+  }
+)
+
+const columnOptions = computed(() =>
+  (store.board.layout?.columns || []).map((_, index) => ({
+    label: `列 ${index + 1}`,
+    value: index
+  }))
+)
+
+function moveStage() {
   const cols = store.board.layout.columns
-  if (!cols.length) return alert('暂无列')
-  const ans = prompt(`移动到第几列（1 - ${cols.length}）?`, '1')
-  const target = Math.max(1, Math.min(Number(ans) || 1, cols.length)) - 1
-  cols.forEach((col) => { const i = col.indexOf(props.stageId); if (i !== -1) col.splice(i, 1) })
+  const target = moveColumn.value
+  if (!cols[target]) {
+    toast.add({ color: 'rose', title: '目标列不存在' })
+    return
+  }
+  cols.forEach((col) => {
+    const i = col.indexOf(props.stageId)
+    if (i !== -1) col.splice(i, 1)
+  })
   cols[target].push(props.stageId)
   store.log('stage-move-column', { id: props.stageId, to: target })
+  toast.add({ color: 'neutral', title: `阶段已移动到第 ${target + 1} 列` })
+  moveOpen.value = false
 }
+
+const deleteOpen = ref(false)
+
+function removeStage() {
+  const success = store.deleteStage(props.stageId)
+  if (!success) {
+    toast.add({ color: 'rose', title: '阶段中仍有任务，无法删除' })
+    return
+  }
+  deleteOpen.value = false
+  toast.add({ color: 'neutral', title: '阶段已删除' })
+}
+
+const dropdownItems = computed(() => [
+  [
+    {
+      label: '重命名',
+      icon: 'i-heroicons-pencil-square-20-solid',
+      click: () => startEdit()
+    },
+    {
+      label: '移动到列',
+      icon: 'i-heroicons-view-columns-20-solid',
+      click: () => {
+        moveColumn.value = props.columnIndex
+        moveOpen.value = true
+      }
+    }
+  ],
+  [
+    {
+      label: '删除阶段',
+      icon: 'i-heroicons-trash-20-solid',
+      click: () => {
+        deleteOpen.value = true
+      },
+      color: 'rose'
+    }
+  ]
+])
 </script>
diff --git a/components/TaskCard.vue b/components/TaskCard.vue
index b331959..5a0ded9 100644
--- a/components/TaskCard.vue
+++ b/components/TaskCard.vue
@@ -1,16 +1,54 @@
 <template>
-  <div class="grid grid-cols-[20px_1fr_auto] items-center gap-2 p-2 rounded-lg bg-card border border-border shadow" draggable="true" data-task :data-id="taskId" @dragstart="onDragStart">
-    <div class="opacity-70 select-none cursor-grab">⋮⋮</div>
-    <div>
-      <div class="font-semibold">{{ task?.title || '(无标题)' }}</div>
-      <div class="text-xs text-slate-400">步骤: {{ stat }}</div>
+  <UCard
+    class="group cursor-grab select-none border border-slate-800 bg-slate-900/80 transition hover:border-sky-500/40"
+    data-task
+    :data-id="taskId"
+    draggable="true"
+    @dragstart="onDragStart"
+  >
+    <div class="flex items-start gap-3">
+      <div class="flex h-6 w-6 items-center justify-center rounded-md bg-slate-800/80 text-xs text-slate-400">
+        <UIcon name="i-heroicons-arrows-up-down-20-solid" class="h-4 w-4" />
+      </div>
+      <div class="min-w-0 flex-1 space-y-2">
+        <div class="flex flex-wrap items-center gap-2">
+          <h4 class="truncate font-semibold text-slate-100">{{ task?.title || '未命名任务' }}</h4>
+          <UBadge size="xs" color="neutral" variant="subtle">{{ stat }}</UBadge>
+        </div>
+        <div v-if="hasSteps" class="space-y-1">
+          <UProgress :value="progress" color="primary" class="h-1.5" />
+          <p class="text-[11px] text-slate-400">步骤完成度 {{ progress }}%</p>
+        </div>
+        <p v-if="task?.description" class="line-clamp-2 text-xs text-slate-400">
+          {{ task.description }}
+        </p>
+      </div>
+      <div class="flex flex-col items-end gap-2">
+        <UBadge
+          size="xs"
+          variant="soft"
+          :style="{
+            backgroundColor: `${categoryColor}1A`,
+            color: categoryColor,
+            borderColor: `${categoryColor}33`
+          }"
+        >
+          {{ categoryTitle }}
+        </UBadge>
+        <UButton
+          size="2xs"
+          color="primary"
+          variant="soft"
+          icon="i-heroicons-pencil-square-20-solid"
+          @click.stop="modalOpen = true"
+        >
+          详情
+        </UButton>
+      </div>
     </div>
-    <div class="flex items-center gap-2">
-      <span class="text-[11px] px-2 py-0.5 rounded-full border border-black/30 whitespace-nowrap" :style="chipStyle">{{ categoryTitle }}</span>
-      <button class="px-2 py-1 rounded bg-slate-800/60 border border-border hover:bg-slate-800" @click="openModal">编辑</button>
-    </div>
-  </div>
-  <TaskModal v-if="open" :task-id="taskId" @close="open=false" />
+  </UCard>
+
+  <TaskModal v-model:open="modalOpen" :task-id="taskId" />
 </template>
 
 <script setup lang="ts">
@@ -19,21 +57,35 @@ import TaskModal from './TaskModal.vue'
 
 const store = useBoardStore()
 const props = defineProps<{ taskId: string }>()
+
 const task = computed(() => store.taskById(props.taskId))
-const category = computed(() => store.categoryById(task.value?.category as string))
-const categoryTitle = computed(() => category.value?.title || '未分类')
-const chipStyle = computed(() => ({ background: `#${(category.value?.color||'888888')}33`, borderColor: `#${(category.value?.color||'888888')}` }))
-const stat = computed(() => {
-  const steps = task.value?.steps || []
-  const done = steps.filter(s => s.done).length
-  return `${done}/${steps.length}`
+const category = computed(() => {
+  const id = task.value?.category
+  return id ? store.categoryById(id) : null
 })
-const open = ref(false)
-function openModal(){ open.value = true }
+
+const categoryTitle = computed(() => category.value?.title || '未分类')
+const categoryColor = computed(() => `#${(category.value?.color || '64748b').padStart(6, '0')}`)
+
+const steps = computed(() => task.value?.steps || [])
+const hasSteps = computed(() => steps.value.length > 0)
+
+const stat = computed(() => {
+  const done = steps.value.filter((s) => s.done).length
+  return `${done}/${steps.value.length}`
+})
+
+const progress = computed(() => {
+  if (!steps.value.length) return 0
+  const done = steps.value.filter((s) => s.done).length
+  return Math.round((done / steps.value.length) * 100)
+})
+
+const modalOpen = ref(false)
+
 function onDragStart(e: DragEvent) {
   e.dataTransfer?.setData('text/task', props.taskId)
+  e.dataTransfer?.setDragImage(new Image(), 0, 0)
   e.dataTransfer!.effectAllowed = 'move'
-  emit('dragging', true)
 }
-const emit = defineEmits<{ (e:'dragging', v:boolean): void }>()
 </script>
diff --git a/components/TaskModal.vue b/components/TaskModal.vue
index 86c90d2..96d39d3 100644
--- a/components/TaskModal.vue
+++ b/components/TaskModal.vue
@@ -1,68 +1,211 @@
 <template>
-  <div class="fixed inset-0 bg-black/60 flex items-center justify-center p-4">
-    <div class="w-[720px] max-w-[95vw] max-h-[90vh] rounded-lg border border-border bg-panel flex flex-col">
-      <div class="flex items-center justify-between px-3 py-2 border-b border-border">
-        <h2 class="font-semibold">编辑任务</h2>
-        <button class="px-2 py-1 rounded bg-slate-800/60 border border-border hover:bg-slate-800" @click="$emit('close')">✕</button>
-      </div>
-      <div class="p-3 overflow-auto space-y-3">
-        <div class="grid grid-cols-[90px_1fr] gap-3 items-start">
-          <label class="pt-1 text-sm text-slate-400">标题</label>
-          <input v-model="title" class="px-2 py-1 rounded bg-slate-900 border border-border" />
+  <UModal v-model="open" :ui="{ width: 'max-w-2xl' }">
+    <UCard>
+      <template #header>
+        <div class="flex items-center gap-2">
+          <UIcon name="i-heroicons-pencil-square-20-solid" class="h-5 w-5 text-sky-400" />
+          <span class="font-semibold">编辑任务</span>
         </div>
-        <div class="grid grid-cols-[90px_1fr] gap-3 items-start">
-          <label class="pt-1 text-sm text-slate-400">类别</label>
-          <select v-model="category" class="px-2 py-1 rounded bg-slate-900 border border-border">
-            <option value="">未分类</option>
-            <option v-for="c in store.board.categories" :key="c.uuid" :value="c.uuid">{{ c.title }}</option>
-          </select>
+      </template>
+
+      <form class="space-y-5" @submit.prevent="save">
+        <UFormGroup label="标题" name="title">
+          <UInput v-model="form.title" placeholder="任务标题" autofocus />
+        </UFormGroup>
+
+        <div class="grid gap-4 sm:grid-cols-2">
+          <UFormGroup label="类别" name="category">
+            <USelectMenu
+              v-model="form.category"
+              :options="categoryOptions"
+              value-attribute="value"
+              option-attribute="label"
+              searchable
+              placeholder="选择类别"
+            />
+          </UFormGroup>
+          <UFormGroup label="摘要" name="summary">
+            <UInput v-model="summary" placeholder="用于步骤的快速概览（可选）" />
+          </UFormGroup>
         </div>
-        <div class="grid grid-cols-[90px_1fr] gap-3 items-start">
-          <label class="pt-1 text-sm text-slate-400">描述</label>
-          <textarea v-model="desc" rows="6" class="px-2 py-1 rounded bg-slate-900 border border-border"></textarea>
-        </div>
-        <div class="grid grid-cols-[90px_1fr] gap-3 items-start">
-          <label class="pt-1 text-sm text-slate-400">步骤</label>
-          <div class="space-y-2">
-            <div v-for="(s, i) in steps" :key="i" class="grid grid-cols-[24px_1fr_24px] items-center gap-2">
-              <input type="checkbox" v-model="s.done" />
-              <input v-model="s.details" class="px-2 py-1 rounded bg-slate-900 border border-border" />
-              <button class="text-sm" @click="steps.splice(i,1)">🗑</button>
+
+        <UFormGroup label="详细描述" name="description">
+          <UTextarea
+            v-model="form.description"
+            placeholder="补充任务背景、验收标准等……"
+            :rows="6"
+          />
+        </UFormGroup>
+
+        <div class="space-y-3">
+          <div class="flex items-center justify-between">
+            <span class="text-sm font-medium text-slate-200">步骤清单</span>
+            <UButton size="xs" color="primary" variant="soft" icon="i-heroicons-plus-20-solid" @click="addStep">
+              添加步骤
+            </UButton>
+          </div>
+          <div v-if="!form.steps.length" class="rounded border border-slate-800 bg-slate-900/70 px-3 py-4 text-sm text-slate-400">
+            暂无步骤。添加步骤帮助团队追踪完成情况。
+          </div>
+          <div v-else class="space-y-3">
+            <div
+              v-for="(step, index) in form.steps"
+              :key="step.id"
+              class="flex items-start gap-3 rounded border border-slate-800 bg-slate-900/80 p-3"
+            >
+              <UCheckbox v-model="step.done" class="mt-1.5" />
+              <div class="min-w-0 flex-1 space-y-2">
+                <UInput
+                  v-model="step.details"
+                  placeholder="步骤内容"
+                />
+                <p class="text-[11px] text-slate-500">步骤 {{ index + 1 }}</p>
+              </div>
+              <UTooltip text="删除步骤">
+                <UButton
+                  size="xs"
+                  color="neutral"
+                  variant="ghost"
+                  icon="i-heroicons-trash-20-solid"
+                  @click="removeStep(index)"
+                />
+              </UTooltip>
             </div>
-            <button class="px-2 py-1 rounded bg-slate-800/60 border border-border hover:bg-slate-800" @click="steps.push({details:'新步骤', done:false})">添加步骤</button>
           </div>
         </div>
+
+        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <UButton
+            color="rose"
+            variant="soft"
+            icon="i-heroicons-trash-20-solid"
+            @click.prevent="deleteOpen = true"
+          >
+            删除任务
+          </UButton>
+          <div class="flex items-center gap-2">
+            <UButton color="neutral" variant="ghost" @click="open = false">取消</UButton>
+            <UButton type="submit" color="primary" icon="i-heroicons-check-20-solid">保存</UButton>
+          </div>
+        </div>
+      </form>
+    </UCard>
+  </UModal>
+
+  <UModal v-model="deleteOpen">
+    <UCard>
+      <template #header>
+        <div class="flex items-center gap-2">
+          <UIcon name="i-heroicons-exclamation-triangle-20-solid" class="h-5 w-5 text-amber-400" />
+          <span class="font-semibold">删除任务</span>
+        </div>
+      </template>
+      <p class="text-sm text-slate-300">
+        确定要删除该任务吗？此操作不可撤销。
+      </p>
+      <div class="mt-6 flex justify-end gap-2">
+        <UButton color="neutral" variant="ghost" @click="deleteOpen = false">取消</UButton>
+        <UButton color="rose" @click="removeTask">永久删除</UButton>
       </div>
-      <div class="flex items-center gap-2 px-3 py-2 border-t border-border">
-        <button class="px-3 py-1 rounded bg-red-500/90 text-white hover:brightness-110" @click="onDelete">删除</button>
-        <div class="flex-1" />
-        <button class="px-3 py-1 rounded bg-accent text-slate-900 font-medium hover:brightness-110" @click="onSave">保存</button>
-      </div>
-    </div>
-  </div>
-  
+    </UCard>
+  </UModal>
 </template>
 
 <script setup lang="ts">
 import { useBoardStore } from '~/stores/board'
+import { uuid } from '~/utils/uuid'
+
+const props = defineProps<{ taskId: string }>()
+const open = defineModel<boolean>('open', { default: false })
 
 const store = useBoardStore()
-const props = defineProps<{ taskId: string }>()
-const t = computed(() => store.taskById(props.taskId))
-const title = ref(t.value?.title || '')
-const desc = ref(t.value?.description || '')
-const category = ref<string | ''>((t.value?.category as string) || '')
-const steps = ref(JSON.parse(JSON.stringify(t.value?.steps || [])))
+const toast = useToast()
 
-function onSave() {
-  store.editTask(props.taskId, { title: title.value.trim() || t.value?.title, description: desc.value, category: category.value || null, steps: steps.value })
-  emit('close')
+interface StepDraft {
+  id: string
+  details: string
+  done: boolean
 }
-function onDelete() {
-  if (!confirm('删除该任务？此操作不可撤销')) return
+
+const form = reactive({
+  title: '',
+  category: '' as string | '',
+  description: '',
+  steps: [] as StepDraft[]
+})
+
+const summary = ref('')
+
+const categoryOptions = computed(() => [
+  { label: '未分类', value: '' },
+  ...store.board.categories.map((c) => ({ label: c.title, value: c.uuid }))
+])
+
+watch(
+  () => open.value,
+  (value) => {
+    if (value) hydrate()
+  }
+)
+
+watch(
+  () => props.taskId,
+  () => {
+    if (open.value) hydrate()
+  }
+)
+
+function hydrate() {
+  const task = store.taskById(props.taskId)
+  if (!task) return
+  form.title = task.title
+  form.category = (task.category as string) || ''
+  form.description = task.description || ''
+  summary.value = ''
+  form.steps = (task.steps || []).map((step) => ({
+    id: uuid(),
+    details: step.details,
+    done: step.done
+  }))
+}
+
+function addStep() {
+  form.steps.push({
+    id: uuid(),
+    details: summary.value ? summary.value : `步骤 ${form.steps.length + 1}`,
+    done: false
+  })
+  summary.value = ''
+}
+
+function removeStep(index: number) {
+  form.steps.splice(index, 1)
+}
+
+function save() {
+  if (!form.title.trim()) {
+    toast.add({ color: 'rose', title: '任务标题不能为空' })
+    return
+  }
+  store.editTask(props.taskId, {
+    title: form.title.trim(),
+    description: form.description.trim(),
+    category: form.category || null,
+    steps: form.steps.map((step) => ({
+      details: step.details.trim(),
+      done: step.done
+    }))
+  })
+  toast.add({ color: 'primary', title: '任务已保存' })
+  open.value = false
+}
+
+const deleteOpen = ref(false)
+
+function removeTask() {
   store.removeTask(props.taskId)
-  emit('close')
+  toast.add({ color: 'rose', title: '任务已删除' })
+  deleteOpen.value = false
+  open.value = false
 }
-const emit = defineEmits(['close'])
 </script>
-
diff --git a/components/Toolbar.vue b/components/Toolbar.vue
index e658b06..071abf7 100644
--- a/components/Toolbar.vue
+++ b/components/Toolbar.vue
@@ -1,35 +1,106 @@
 <template>
-  <div class="flex flex-wrap items-center gap-2 p-3 border-b border-border bg-panel">
-    <div class="flex items-center gap-2">
-      <h1 class="text-lg font-semibold">{{ appTitle }}</h1>
-      <span class="text-xs text-slate-400">{{ fileStatus }}</span>
+  <UCard>
+    <template #header>
+      <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div class="flex flex-wrap items-center gap-3">
+          <div class="flex items-center gap-2">
+            <UIcon name="i-heroicons-squares-2x2-20-solid" class="h-5 w-5 text-sky-400" />
+            <span class="text-lg font-semibold">{{ appTitle }}</span>
+          </div>
+          <UBadge
+            :color="store.dirty ? 'primary' : 'neutral'"
+            variant="soft"
+            class="text-xs"
+          >
+            {{ fileStatus }}
+          </UBadge>
+        </div>
+        <div class="flex flex-wrap items-center gap-2">
+          <UButton color="neutral" variant="soft" icon="i-heroicons-folder-open-20-solid" @click="triggerOpen">
+            打开文件
+          </UButton>
+          <UButton color="primary" icon="i-heroicons-arrow-down-tray-20-solid" @click="onSave">
+            导出 JSON
+          </UButton>
+          <UButton color="neutral" variant="soft" icon="i-heroicons-arrow-path-rounded-square-20-solid" @click="triggerImport">
+            导入/合并
+          </UButton>
+          <UButton color="neutral" variant="ghost" icon="i-heroicons-plus-circle-20-solid" @click="newOpen = true">
+            新建看板
+          </UButton>
+          <UDropdown :items="localMenu" mode="hover">
+            <UButton color="neutral" variant="ghost" icon="i-heroicons-device-phone-mobile-20-solid">
+              本地存储
+            </UButton>
+          </UDropdown>
+        </div>
+      </div>
+    </template>
+
+    <div class="grid gap-3 lg:grid-cols-4">
+      <UInput
+        v-model="q"
+        icon="i-heroicons-magnifying-glass-20-solid"
+        placeholder="搜索任务（标题或描述）"
+        color="neutral"
+      />
+      <USelectMenu
+        v-model="cat"
+        :options="categoryOptions"
+        value-attribute="value"
+        option-attribute="label"
+        searchable
+        placeholder="筛选类别"
+      />
+      <UInput
+        v-model="actor"
+        icon="i-heroicons-user-circle-20-solid"
+        placeholder="记录操作人名称（写入历史）"
+      />
+      <div class="flex items-center justify-end text-xs text-slate-400">
+        最近保存于：{{ lastSaved }}
+      </div>
     </div>
-    <div class="flex-1" />
-    <div class="flex items-center gap-2">
-      <label class="px-3 py-1 rounded bg-slate-800/60 border border-border cursor-pointer hover:bg-slate-800">
-        <input type="file" class="hidden" accept="application/json" @change="onOpen" />
-        打开…
-      </label>
-      <button class="px-3 py-1 rounded bg-accent text-slate-900 font-medium hover:brightness-110" @click="onSave">保存/导出</button>
-      <label class="px-3 py-1 rounded bg-slate-800/60 border border-border cursor-pointer hover:bg-slate-800">
-        <input type="file" class="hidden" accept="application/json" @change="onImport" />
-        导入/合并…
-      </label>
-      <button class="px-3 py-1 rounded bg-slate-800/60 border border-border hover:bg-slate-800" @click="onNew">新建</button>
-      <span class="w-px h-6 bg-border mx-1" />
-      <input v-model="actor" placeholder="你的名字（记录历史）" class="px-2 py-1 rounded bg-slate-900 border border-border w-48" />
-      <span class="w-px h-6 bg-border mx-1" />
-      <input v-model="q" placeholder="搜索任务…" class="px-2 py-1 rounded bg-slate-900 border border-border w-56" />
-      <select v-model="cat" class="px-2 py-1 rounded bg-slate-900 border border-border">
-        <option value="">筛选：全部类别</option>
-        <option v-for="c in store.board.categories" :key="c.uuid" :value="c.uuid">{{ c.title }}</option>
-      </select>
-      <span class="w-px h-6 bg-border mx-1" />
-      <button class="px-3 py-1 rounded bg-slate-800/60 border border-border hover:bg-slate-800" @click="onLoadLocal">从本地读取</button>
-      <button class="px-3 py-1 rounded bg-slate-800/60 border border-border hover:bg-slate-800" @click="onSaveLocal">保存到本地</button>
-      <button class="px-3 py-1 rounded bg-slate-800/60 border border-border hover:bg-slate-800" @click="onClearLocal">清空本地</button>
-    </div>
-  </div>
+  </UCard>
+
+  <input ref="openInput" type="file" accept="application/json" class="hidden" @change="handleOpen" />
+  <input ref="importInput" type="file" accept="application/json" class="hidden" @change="handleImport" />
+
+  <UModal v-model="newOpen">
+    <UCard>
+      <template #header>
+        <div class="flex items-center gap-2">
+          <UIcon name="i-heroicons-plus-circle-20-solid" class="h-5 w-5 text-sky-400" />
+          <span class="font-semibold">新建看板</span>
+        </div>
+      </template>
+      <div class="space-y-4 text-sm text-slate-300">
+        <p>当前更改尚未导出。继续新建将清空现有看板数据。</p>
+      </div>
+      <div class="mt-6 flex justify-end gap-2">
+        <UButton color="neutral" variant="ghost" @click="newOpen = false">取消</UButton>
+        <UButton color="primary" @click="createNewBoard">确认新建</UButton>
+      </div>
+    </UCard>
+  </UModal>
+
+  <UModal v-model="clearLocalOpen">
+    <UCard>
+      <template #header>
+        <div class="flex items-center gap-2">
+          <UIcon name="i-heroicons-exclamation-triangle-20-solid" class="h-5 w-5 text-amber-400" />
+          <span class="font-semibold">清空本地缓存</span>
+        </div>
+      </template>
+      <p class="text-sm text-slate-300">
+        清空后将无法恢复，确认继续吗？
+      </p>
+      <div class="mt-6 flex justify-end gap-2">
+        <UButton color="neutral" variant="ghost" @click="clearLocalOpen = false">取消</UButton>
+        <UButton color="rose" @click="clearLocalData">清空数据</UButton>
+      </div>
+    </UCard>
+  </UModal>
 </template>
 
 <script setup lang="ts">
@@ -37,6 +108,8 @@ import { useBoardStore } from '~/stores/board'
 
 const store = useBoardStore()
 const config = useRuntimeConfig().public
+const toast = useToast()
+
 const appTitle = computed(() => config.appTitle)
 const actor = computed({
   get: () => store.board.meta?.actor || '',
@@ -45,15 +118,40 @@ const actor = computed({
 const q = defineModel<string>('query', { required: true })
 const cat = defineModel<string | ''>('category', { required: true })
 
+const openInput = ref<HTMLInputElement | null>(null)
+const importInput = ref<HTMLInputElement | null>(null)
+
+const categoryOptions = computed(() => [
+  { label: '全部类别', value: '' },
+  ...store.board.categories.map((c) => ({ label: c.title, value: c.uuid }))
+])
+
 const fileStatus = computed(() => {
-  const name = store.filename || '(未命名)'
-  const a = store.board.meta?.actor ? ` | 操作人：${store.board.meta.actor}` : ''
-  const star = store.dirty ? ' *' : ''
-  return `${name}${star}${a}`
+  const name = store.filename || '未命名'
+  const indicator = store.dirty ? '（未保存修改）' : '（已同步）'
+  return `${name} ${indicator}`
 })
 
-function onOpen(e: Event) {
-  const input = e.target as HTMLInputElement
+const lastSaved = computed(() => {
+  const ts = store.board.meta?.modifiedAt
+  if (!ts) return '尚未记录'
+  try {
+    return new Intl.DateTimeFormat('zh-CN', { dateStyle: 'short', timeStyle: 'short' }).format(new Date(ts))
+  } catch {
+    return ts
+  }
+})
+
+function triggerOpen() {
+  openInput.value?.click()
+}
+
+function triggerImport() {
+  importInput.value?.click()
+}
+
+function handleOpen(event: Event) {
+  const input = event.target as HTMLInputElement
   const file = input.files?.[0]
   if (!file) return
   const reader = new FileReader()
@@ -62,21 +160,19 @@ function onOpen(e: Event) {
       const json = JSON.parse(String(reader.result))
       store.setBoard(json, file.name)
       store.log('load-file', { name: file.name, size: file.size })
+      toast.add({ color: 'primary', title: `已载入 ${file.name}` })
     } catch (err: any) {
-      alert('解析 JSON 失败：' + err.message)
+      toast.add({ color: 'rose', title: '解析 JSON 失败', description: err?.message })
     }
   }
   reader.readAsText(file)
   input.value = ''
 }
-function onSave() { store.downloadCurrent() }
-function onNew() {
-  if (store.dirty && !confirm('当前更改尚未保存，确定新建吗？')) return
-  store.setBoard({ categories: [], stages: [], tasks: [], layout: { columns: [] }, meta: { id: 'open-kanban', version: '1.0.0', createdAt: new Date().toISOString(), modifiedAt: new Date().toISOString(), actor: store.board.meta?.actor, history: [] } }, '')
-  store.log('new-board', {})
-}
-function onImport(e: Event) {
-  const input = e.target as HTMLInputElement
+
+const emit = defineEmits<{ (e: 'open-merge', imported: any, diff: any, name: string): void }>()
+
+function handleImport(event: Event) {
+  const input = event.target as HTMLInputElement
   const file = input.files?.[0]
   if (!file) return
   const reader = new FileReader()
@@ -84,23 +180,89 @@ function onImport(e: Event) {
     try {
       const data = JSON.parse(String(reader.result))
       const diff = store.diffBoards(store.board as any, data)
-      // emit event for MergeModal
       emit('open-merge', data, diff, file.name)
+      toast.add({ color: 'neutral', title: `已分析 ${file.name}` })
     } catch (err: any) {
-      alert('解析 JSON 失败：' + err.message)
+      toast.add({ color: 'rose', title: '解析 JSON 失败', description: err?.message })
     }
   }
   reader.readAsText(file)
   input.value = ''
 }
-function onLoadLocal() {
-  if (!store.loadFromLocal()) alert('本地不存在保存的数据')
-}
-function onSaveLocal() { store.saveToLocal() }
-function onClearLocal() {
-  if (confirm('清空本地保存？')) store.clearLocal()
+
+function onSave() {
+  store.downloadCurrent()
+  toast.add({ color: 'primary', title: '已导出文件' })
 }
 
-const emit = defineEmits<{ (e: 'open-merge', imported: any, diff: any, name: string): void }>()
+const newOpen = ref(false)
+
+function createNewBoard() {
+  store.setBoard(
+    {
+      categories: [],
+      stages: [],
+      tasks: [],
+      layout: { columns: [] },
+      meta: {
+        id: 'open-kanban',
+        version: '1.0.0',
+        createdAt: new Date().toISOString(),
+        modifiedAt: new Date().toISOString(),
+        actor: store.board.meta?.actor,
+        history: []
+      }
+    },
+    ''
+  )
+  store.log('new-board', {})
+  toast.add({ color: 'neutral', title: '已创建新的空白看板' })
+  newOpen.value = false
+}
+
+function loadLocal() {
+  if (!store.loadFromLocal()) {
+    toast.add({ color: 'rose', title: '本地没有保存的数据' })
+    return
+  }
+  toast.add({ color: 'neutral', title: '已从本地加载看板' })
+}
+
+function saveLocal() {
+  store.saveToLocal()
+  toast.add({ color: 'primary', title: '已同步至本地存储' })
+}
+
+const clearLocalOpen = ref(false)
+
+function clearLocalData() {
+  store.clearLocal()
+  toast.add({ color: 'neutral', title: '本地数据已清空' })
+  clearLocalOpen.value = false
+}
+
+const localMenu = computed(() => [
+  [
+    {
+      label: '保存至本地',
+      icon: 'i-heroicons-arrow-down-on-square-20-solid',
+      click: () => saveLocal()
+    },
+    {
+      label: '从本地恢复',
+      icon: 'i-heroicons-arrow-up-on-square-20-solid',
+      click: () => loadLocal()
+    }
+  ],
+  [
+    {
+      label: '清空本地缓存',
+      icon: 'i-heroicons-trash-20-solid',
+      click: () => {
+        clearLocalOpen.value = true
+      },
+      color: 'rose'
+    }
+  ]
+])
 </script>
-
diff --git a/components/dialogs/StageModal.vue b/components/dialogs/StageModal.vue
new file mode 100644
index 0000000..c7406e6
--- /dev/null
+++ b/components/dialogs/StageModal.vue
@@ -0,0 +1,76 @@
+<template>
+  <UModal v-model="open">
+    <UCard>
+      <template #header>
+        <div class="flex items-center gap-2">
+          <UIcon name="i-heroicons-plus-circle-20-solid" class="h-5 w-5 text-sky-400" />
+          <span class="font-semibold">添加阶段</span>
+        </div>
+      </template>
+
+      <form class="space-y-4" @submit.prevent="handleSubmit">
+        <UFormGroup label="阶段名称" name="title">
+          <UInput v-model="form.title" placeholder="例如：待办、进行中、已完成…" autofocus />
+        </UFormGroup>
+
+        <UFormGroup v-if="columnOptions.length" label="放置到列" name="column">
+          <USelectMenu
+            v-model="form.column"
+            :options="columnOptions"
+            value-attribute="value"
+            option-attribute="label"
+          />
+        </UFormGroup>
+        <p v-else class="text-xs text-slate-400">
+          尚未创建列，新增阶段时系统会自动建立第一列。
+        </p>
+
+        <div class="flex justify-end gap-2">
+          <UButton color="neutral" variant="ghost" @click="open = false">取消</UButton>
+          <UButton type="submit" color="primary">创建阶段</UButton>
+        </div>
+      </form>
+    </UCard>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+import { useBoardStore } from '~/stores/board'
+
+const store = useBoardStore()
+const toast = useToast()
+
+const props = defineProps<{ defaultColumn?: number }>()
+const open = defineModel<boolean>('open', { required: true })
+const emit = defineEmits<{ (e: 'submit', payload: { title: string; column: number }): void }>()
+
+const form = reactive({
+  title: '',
+  column: 0
+})
+
+const columnOptions = computed(() =>
+  (store.board.layout?.columns || []).map((_, index) => ({
+    label: `列 ${index + 1}`,
+    value: index
+  }))
+)
+
+watch(
+  () => open.value,
+  (value) => {
+    if (!value) return
+    form.title = ''
+    const defaultColumn = props.defaultColumn ?? 0
+    form.column = columnOptions.value[defaultColumn] ? defaultColumn : 0
+  }
+)
+
+function handleSubmit() {
+  if (!form.title.trim()) {
+    toast.add({ color: 'rose', title: '请输入阶段名称' })
+    return
+  }
+  emit('submit', { title: form.title.trim(), column: form.column })
+}
+</script>
diff --git a/components/panels/BoardSummaryPanel.vue b/components/panels/BoardSummaryPanel.vue
new file mode 100644
index 0000000..057fe50
--- /dev/null
+++ b/components/panels/BoardSummaryPanel.vue
@@ -0,0 +1,73 @@
+<template>
+  <UCard>
+    <template #header>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-2">
+          <UIcon name="i-heroicons-chart-bar-20-solid" class="h-5 w-5 text-emerald-400" />
+          <span class="font-semibold">看板概览</span>
+        </div>
+        <UBadge
+          v-if="lastModified"
+          :label="`更新于：${lastModified}`"
+          color="neutral"
+          variant="soft"
+          class="text-xs"
+        />
+      </div>
+    </template>
+
+    <div class="grid grid-cols-3 gap-3 text-sm">
+      <UCard variant="soft" class="border border-emerald-500/10 bg-emerald-500/5 text-emerald-200">
+        <div class="space-y-1">
+          <p class="text-xs uppercase tracking-wide opacity-80">任务</p>
+          <p class="text-2xl font-semibold">{{ tasksCount }}</p>
+        </div>
+      </UCard>
+      <UCard variant="soft" class="border border-sky-500/10 bg-sky-500/5 text-sky-200">
+        <div class="space-y-1">
+          <p class="text-xs uppercase tracking-wide opacity-80">阶段</p>
+          <p class="text-2xl font-semibold">{{ stagesCount }}</p>
+        </div>
+      </UCard>
+      <UCard variant="soft" class="border border-violet-500/10 bg-violet-500/5 text-violet-200">
+        <div class="space-y-1">
+          <p class="text-xs uppercase tracking-wide opacity-80">列</p>
+          <p class="text-2xl font-semibold">{{ columnsCount }}</p>
+        </div>
+      </UCard>
+    </div>
+
+    <div class="mt-4 space-y-2 text-xs text-slate-400">
+      <div class="flex items-center gap-2">
+        <UIcon name="i-heroicons-user-circle-20-solid" class="h-4 w-4 text-slate-500" />
+        <span>当前操作人：{{ actor || '未设置' }}</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <UIcon name="i-heroicons-document-duplicate-20-solid" class="h-4 w-4 text-slate-500" />
+        <span>文件来源：{{ filename }}</span>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+import { useBoardStore } from '~/stores/board'
+
+const store = useBoardStore()
+
+const columnsCount = computed(() => store.board.layout?.columns?.length || 0)
+const stagesCount = computed(() => store.board.stages.length)
+const tasksCount = computed(() => store.board.tasks.length)
+const actor = computed(() => store.board.meta?.actor || '')
+const filename = computed(() => store.filename || '未命名')
+
+const lastModified = computed(() => {
+  const ts = store.board.meta?.modifiedAt
+  if (!ts) return ''
+  try {
+    return new Intl.DateTimeFormat('zh-CN', { dateStyle: 'short', timeStyle: 'short' }).format(new Date(ts))
+  } catch {
+    return ts
+  }
+})
+</script>
diff --git a/components/panels/CategoryPanel.vue b/components/panels/CategoryPanel.vue
new file mode 100644
index 0000000..2566d04
--- /dev/null
+++ b/components/panels/CategoryPanel.vue
@@ -0,0 +1,213 @@
+<template>
+  <UCard>
+    <template #header>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-2">
+          <UIcon name="i-heroicons-tag-20-solid" class="h-5 w-5 text-sky-400" />
+          <span class="font-semibold">类别管理</span>
+        </div>
+        <UBadge :label="categories.length" color="neutral" variant="subtle" />
+      </div>
+    </template>
+
+    <div class="space-y-4">
+      <p v-if="!categories.length" class="text-sm text-slate-400">
+        当前看板还没有类别。新建类别以便在任务中进行筛选和标识。
+      </p>
+
+      <div v-else class="space-y-3">
+        <UCard v-for="cat in categories" :key="cat.uuid" variant="soft" class="border-slate-800">
+          <div class="flex flex-col gap-3">
+            <div class="flex items-center gap-3">
+              <span
+                class="h-3 w-3 rounded-full ring-2 ring-slate-900"
+                :style="{ backgroundColor: drafts[cat.uuid]?.color || '#64748b' }"
+              />
+              <UInput
+                v-model="drafts[cat.uuid].title"
+                size="sm"
+                placeholder="类别名称"
+                @blur="saveCategory(cat.uuid)"
+                @keyup.enter="saveCategory(cat.uuid)"
+              />
+              <UTooltip text="更新类别">
+                <UButton icon="i-heroicons-check-20-solid" size="sm" color="primary" variant="soft" @click="saveCategory(cat.uuid)" />
+              </UTooltip>
+              <UTooltip text="删除类别">
+                <UButton icon="i-heroicons-trash-20-solid" size="sm" color="rose" variant="ghost" @click="askRemove(cat)" />
+              </UTooltip>
+            </div>
+            <div class="flex items-center gap-2 text-xs text-slate-400">
+              <span>颜色</span>
+              <input
+                :value="drafts[cat.uuid].color"
+                type="color"
+                class="h-8 w-14 cursor-pointer rounded border border-slate-800 bg-transparent"
+                @input="(e) => updateDraftColor(cat.uuid, e)"
+                @change="saveCategory(cat.uuid)"
+              />
+              <code class="rounded bg-slate-900/60 px-2 py-1">{{ drafts[cat.uuid].color.toUpperCase() }}</code>
+            </div>
+          </div>
+        </UCard>
+      </div>
+
+      <UButton icon="i-heroicons-plus-circle-20-solid" block color="primary" @click="openCreate">
+        新建类别
+      </UButton>
+    </div>
+  </UCard>
+
+  <UModal v-model="createOpen">
+    <UCard>
+      <template #header>
+        <div class="flex items-center gap-2">
+          <UIcon name="i-heroicons-plus-circle-20-solid" class="h-5 w-5 text-sky-400" />
+          <span class="font-semibold">添加类别</span>
+        </div>
+      </template>
+      <form class="space-y-4" @submit.prevent="createCategory">
+        <UFormGroup label="类别名称" name="title">
+          <UInput v-model="createForm.title" placeholder="例如：优先级、类型…" autofocus />
+        </UFormGroup>
+        <UFormGroup label="颜色" name="color">
+          <div class="flex items-center gap-3">
+            <input v-model="createForm.color" type="color" class="h-10 w-16 rounded border border-slate-800 bg-transparent" />
+            <code class="rounded bg-slate-900/60 px-2 py-1">{{ createForm.color.toUpperCase() }}</code>
+          </div>
+        </UFormGroup>
+        <div class="flex justify-end gap-2">
+          <UButton color="neutral" variant="ghost" @click="createOpen = false">取消</UButton>
+          <UButton type="submit" color="primary">保存</UButton>
+        </div>
+      </form>
+    </UCard>
+  </UModal>
+
+  <UModal v-model="removeOpen">
+    <UCard>
+      <template #header>
+        <div class="flex items-center gap-2">
+          <UIcon name="i-heroicons-exclamation-triangle-20-solid" class="h-5 w-5 text-amber-400" />
+          <span class="font-semibold">删除类别</span>
+        </div>
+      </template>
+      <div class="space-y-4 text-sm">
+        <p>
+          确定要删除类别
+          <span class="font-medium text-slate-100">“{{ removeTarget?.title }}”</span>
+          吗？
+        </p>
+        <p class="text-slate-400">
+          若该类别被任务引用，将无法删除。
+        </p>
+      </div>
+      <div class="flex justify-end gap-2">
+        <UButton color="neutral" variant="ghost" @click="removeOpen = false">取消</UButton>
+        <UButton color="rose" @click="confirmRemove">立即删除</UButton>
+      </div>
+    </UCard>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+import { useBoardStore } from '~/stores/board'
+import type { Category } from '~/types/schema'
+
+const store = useBoardStore()
+const toast = useToast()
+
+const categories = computed(() => store.board.categories)
+
+const drafts = reactive<Record<string, { title: string; color: string }>>({})
+
+watch(
+  categories,
+  (cats) => {
+    cats.forEach((cat) => {
+      if (!drafts[cat.uuid]) {
+        drafts[cat.uuid] = {
+          title: cat.title,
+          color: `#${(cat.color || '888888').padStart(6, '0')}`
+        }
+      } else {
+        drafts[cat.uuid].title = cat.title
+        drafts[cat.uuid].color = `#${(cat.color || '888888').padStart(6, '0')}`
+      }
+    })
+    Object.keys(drafts).forEach((id) => {
+      if (!cats.find((c) => c.uuid === id)) delete drafts[id]
+    })
+  },
+  { immediate: true, deep: true }
+)
+
+const createOpen = ref(false)
+const createForm = reactive({
+  title: '',
+  color: '#38bdf8'
+})
+
+function openCreate() {
+  createForm.title = ''
+  createForm.color = '#38bdf8'
+  createOpen.value = true
+}
+
+function createCategory() {
+  if (!createForm.title.trim()) {
+    toast.add({ color: 'rose', title: '类别名称不能为空' })
+    return
+  }
+  const color = createForm.color.replace('#', '').slice(0, 6) || '888888'
+  const created = store.addCategory(createForm.title.trim(), color)
+  drafts[created.uuid] = {
+    title: created.title,
+    color: `#${color.toUpperCase()}`
+  }
+  toast.add({ color: 'primary', title: `已创建类别「${created.title}」` })
+  createOpen.value = false
+}
+
+function sanitizeDraft(id: string) {
+  const draft = drafts[id]
+  if (!draft) return
+  draft.title = draft.title.trim() || '未命名类别'
+  draft.color = `#${draft.color.replace('#', '').slice(0, 6) || '888888'}`
+}
+
+function saveCategory(id: string) {
+  const draft = drafts[id]
+  if (!draft) return
+  sanitizeDraft(id)
+  store.updateCategory(id, {
+    title: draft.title,
+    color: draft.color.replace('#', '').slice(0, 6)
+  })
+}
+
+function updateDraftColor(id: string, event: Event) {
+  const value = (event.target as HTMLInputElement).value
+  drafts[id].color = value
+}
+
+const removeOpen = ref(false)
+const removeTarget = ref<Category | null>(null)
+
+function askRemove(cat: Category) {
+  removeTarget.value = cat
+  removeOpen.value = true
+}
+
+function confirmRemove() {
+  if (!removeTarget.value) return
+  const ok = store.removeCategory(removeTarget.value.uuid)
+  if (!ok) {
+    toast.add({ color: 'rose', title: '该类别正在被任务引用，无法删除' })
+    return
+  }
+  toast.add({ color: 'neutral', title: `已删除类别「${removeTarget.value.title}」` })
+  removeOpen.value = false
+  removeTarget.value = null
+}
+</script>
diff --git a/components/panels/HistoryPanel.vue b/components/panels/HistoryPanel.vue
new file mode 100644
index 0000000..f1eb59d
--- /dev/null
+++ b/components/panels/HistoryPanel.vue
@@ -0,0 +1,92 @@
+<template>
+  <UCard>
+    <template #header>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-2">
+          <UIcon name="i-heroicons-clock-20-solid" class="h-5 w-5 text-amber-400" />
+          <span class="font-semibold">历史记录</span>
+        </div>
+        <UButton
+          size="2xs"
+          color="neutral"
+          variant="ghost"
+          icon="i-heroicons-trash-20-solid"
+          @click="clearOpen = true"
+        >
+          清空
+        </UButton>
+      </div>
+    </template>
+
+    <div class="space-y-2">
+      <div v-if="!entries.length" class="rounded border border-slate-800 bg-slate-900/70 px-3 py-4 text-sm text-slate-400">
+        暂无历史记录。
+      </div>
+      <div v-else class="max-h-72 space-y-2 overflow-auto pr-1 text-xs">
+        <div
+          v-for="entry in entries"
+          :key="entry.id"
+          class="rounded border border-slate-800 bg-slate-900/70 px-3 py-3"
+        >
+          <div class="flex items-center justify-between gap-2">
+            <span class="font-medium text-slate-200">{{ entry.type }}</span>
+            <span class="text-[10px] text-slate-500">{{ formatTime(entry.ts) }}</span>
+          </div>
+          <div class="mt-1 flex items-center gap-2 text-[11px] text-slate-400">
+            <UIcon name="i-heroicons-user-20-solid" class="h-3.5 w-3.5" />
+            <span>{{ entry.actor || '系统' }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </UCard>
+
+  <UModal v-model="clearOpen">
+    <UCard>
+      <template #header>
+        <div class="flex items-center gap-2">
+          <UIcon name="i-heroicons-exclamation-triangle-20-solid" class="h-5 w-5 text-amber-400" />
+          <span class="font-semibold">清空历史</span>
+        </div>
+      </template>
+      <p class="text-sm text-slate-300">
+        清空后将只能在本地重新积累记录。仍然继续吗？
+      </p>
+      <div class="mt-6 flex justify-end gap-2">
+        <UButton color="neutral" variant="ghost" @click="clearOpen = false">取消</UButton>
+        <UButton color="rose" @click="clearHistory">确认清空</UButton>
+      </div>
+    </UCard>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+import { useBoardStore } from '~/stores/board'
+
+const store = useBoardStore()
+const toast = useToast()
+
+const entries = computed(() => {
+  const list = store.board.meta?.history || []
+  return list.slice(-200).reverse()
+})
+
+function formatTime(ts: string) {
+  try {
+    return new Intl.DateTimeFormat('zh-CN', { dateStyle: 'short', timeStyle: 'short' }).format(new Date(ts))
+  } catch {
+    return ts
+  }
+}
+
+const clearOpen = ref(false)
+
+function clearHistory() {
+  clearOpen.value = false
+  if (!store.board.meta) return
+  store.board.meta.history = []
+  store.board.meta.modifiedAt = new Date().toISOString()
+  store.log('history-clear', {})
+  toast.add({ color: 'neutral', title: '历史记录已清空' })
+}
+</script>
diff --git a/layouts/default.vue b/layouts/default.vue
new file mode 100644
index 0000000..88a1e66
--- /dev/null
+++ b/layouts/default.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="min-h-screen bg-slate-950 text-slate-100">
+    <slot />
+  </div>
+</template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 0af4f4b..c210f33 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,6 +1,6 @@
 // Nuxt 4 configuration
 export default defineNuxtConfig({
-  modules: ['@pinia/nuxt', '@nuxtjs/tailwindcss'],
+  modules: ['@nuxt/ui', '@pinia/nuxt', '@nuxtjs/tailwindcss'],
   css: ['~/assets/css/tailwind.css'],
   typescript: {
     strict: true
@@ -10,6 +10,11 @@ export default defineNuxtConfig({
       title: 'Kanban'
     }
   },
+  ui: {
+    global: true,
+    primary: 'sky',
+    gray: 'slate'
+  },
   tailwindcss: {
     viewer: false
   },
@@ -22,4 +27,3 @@ export default defineNuxtConfig({
     }
   }
 });
-
diff --git a/package.json b/package.json
index 9223af4..c2e8037 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,8 @@
     "tailwindcss": "^3.4.13",
     "postcss": "^8.4.47",
     "autoprefixer": "^10.4.19",
-    "@types/node": "^20.11.30"
+    "@types/node": "^20.11.30",
+    "@nuxt/ui": "^2.15.1",
+    "@nuxt/icon": "^1.5.0"
   }
 }
-
diff --git a/pages/index.vue b/pages/index.vue
index 0b9acdc..5a06761 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,106 +1,95 @@
 <template>
-  <div class="grid" style="grid-template-rows: auto 1fr; height: calc(100vh);">
+  <UContainer class="mx-auto max-w-7xl space-y-6 py-8">
     <Toolbar v-model:query="query" v-model:category="category" @open-merge="openMerge" />
-    <div class="grid" style="grid-template-columns: 280px 1fr;">
-      <aside class="overflow-auto p-3 border-r border-border bg-panel">
-        <section class="mb-4">
-          <h3 class="text-sm font-semibold text-slate-400 mb-2">类别</h3>
-          <div class="flex flex-col gap-2">
-            <div v-for="c in store.board.categories" :key="c.uuid" class="flex items-center gap-2 p-2 rounded border border-border bg-slate-900">
-              <span class="w-4 h-4 rounded" :style="{ background: '#'+(c.color||'888888') }" />
-              <input v-model="c.title" class="flex-1 px-2 py-1 rounded bg-slate-950 border border-border" @change="onCatChange(c)" />
-              <input v-model="c.color" placeholder="hex" class="w-24 px-2 py-1 rounded bg-slate-950 border border-border" @change="onCatChange(c)" />
-              <button class="px-2 py-1 rounded bg-slate-800/60 border border-border hover:bg-slate-800" @click="delCat(c.uuid)">删除</button>
-            </div>
-            <button class="px-3 py-1 rounded bg-slate-800/60 border border-border hover:bg-slate-800" @click="addCat">添加类别</button>
-          </div>
-        </section>
-        <section class="mb-4 text-sm text-slate-400">
-          <h3 class="text-sm font-semibold text-slate-400 mb-2">布局</h3>
-          <div>列数：{{ store.board.layout.columns.length }}</div>
-          <div>阶段总数：{{ store.board.stages.length }}</div>
-        </section>
-        <section>
-          <h3 class="text-sm font-semibold text-slate-400 mb-2">历史</h3>
-          <div class="flex flex-col gap-2 text-xs max-h-[40vh] overflow-auto">
-            <div v-for="h in (store.board.meta?.history||[]).slice().reverse().slice(0,200)" :key="h.id" class="p-2 rounded border border-border bg-slate-900">{{ h.ts }} {{ h.actor?('@'+h.actor):'' }} {{ h.type }}</div>
-          </div>
-          <div class="mt-2">
-            <button class="px-2 py-1 rounded bg-slate-800/60 border border-border hover:bg-slate-800" @click="clearHistory">清空历史（写入本地）</button>
-          </div>
-        </section>
-      </aside>
-      <main>
+
+    <div class="grid gap-6 xl:grid-cols-[320px_1fr]">
+      <div class="space-y-6">
+        <CategoryPanel />
+        <BoardSummaryPanel />
+        <HistoryPanel />
+      </div>
+      <div class="space-y-6">
         <Board :query="query" :category="category" />
-      </main>
+      </div>
     </div>
 
-    <!-- Merge modal -->
-    <MergeModal v-model:open="mergeOpen" v-model:imported="imported" v-model:diff="diff" v-model:name="name" />
-  </div>
+    <MergeModal
+      v-model:open="mergeOpen"
+      v-model:imported="imported"
+      v-model:diff="diff"
+      v-model:name="importName"
+    />
+  </UContainer>
 </template>
 
 <script setup lang="ts">
 import Toolbar from '~/components/Toolbar.vue'
 import Board from '~/components/Board.vue'
 import MergeModal from '~/components/MergeModal.vue'
+import CategoryPanel from '~/components/panels/CategoryPanel.vue'
+import BoardSummaryPanel from '~/components/panels/BoardSummaryPanel.vue'
+import HistoryPanel from '~/components/panels/HistoryPanel.vue'
 import { useBoardStore } from '~/stores/board'
 
 const store = useBoardStore()
 const config = useRuntimeConfig().public
+const toast = useToast()
 
-// Try load from query or config
-onMounted(async () => {
-  const qp = new URL(window.location.href).searchParams.get('file')
+const query = ref('')
+const category = ref('')
+
+const mergeOpen = ref(false)
+const imported = ref<any>({})
+const diff = ref<any>({})
+const importName = ref('导入文件')
+
+function openMerge(data: any, d: any, name: string) {
+  imported.value = data
+  diff.value = d
+  importName.value = name
+  mergeOpen.value = true
+}
+
+async function bootstrap() {
+  const currentUrl = typeof window !== 'undefined' ? window.location.href : ''
+  const qp = currentUrl ? new URL(currentUrl).searchParams.get('file') : null
   const fileToLoad = qp || config.autoLoadFile || ''
   if (fileToLoad) {
     try {
       const res = await fetch(fileToLoad, { cache: 'no-store' })
       if (res.ok) {
-        store.setBoard(await res.json(), fileToLoad)
+        const data = await res.json()
+        store.setBoard(data, fileToLoad)
         store.log('load-file', { name: fileToLoad, via: qp ? 'query' : 'config' })
+        toast.add({ color: 'primary', title: `已自动加载 ${fileToLoad}` })
         return
       }
-    } catch (e) {}
+    } catch (error: any) {
+      toast.add({ color: 'rose', title: '自动加载失败', description: error?.message })
+    }
   }
-  // else try local storage
   if (!store.loadFromLocal()) {
-    // else set empty
-    store.setBoard({ categories: [], stages: [], tasks: [], layout: { columns: [] }, meta: { id: 'open-kanban', version: '1.0.0', createdAt: new Date().toISOString(), modifiedAt: new Date().toISOString(), actor: '', history: [] } }, '')
+    store.setBoard(
+      {
+        categories: [],
+        stages: [],
+        tasks: [],
+        layout: { columns: [] },
+        meta: {
+          id: 'open-kanban',
+          version: '1.0.0',
+          createdAt: new Date().toISOString(),
+          modifiedAt: new Date().toISOString(),
+          actor: '',
+          history: []
+        }
+      },
+      ''
+    )
   }
+}
+
+onMounted(() => {
+  bootstrap()
 })
-
-const query = ref('')
-const category = ref('')
-
-function addCat(){
-  const title = prompt('类别名称？'); if (!title) return
-  const color = prompt('颜色 hex（不含 #）？', '70bafa') || '70bafa'
-  store.board.categories.push({ uuid: crypto.randomUUID?.() || Math.random().toString(36).slice(2), title: title.trim(), color: color.replace(/#/g,'').slice(0,6) })
-  store.log('category-add', {})
-}
-function delCat(id: string){
-  // prevent delete if used
-  const used = store.board.tasks.some(t => t.category === id)
-  if (used) return alert('该类别已被任务引用，无法删除')
-  store.board.categories = store.board.categories.filter(c => c.uuid !== id)
-  store.log('category-delete', { id })
-}
-function onCatChange(c: any){ store.log('category-update', { id: c.uuid }) }
-function clearHistory(){
-  if (!store.board.meta) return
-  if (confirm('清空历史记录？将写入本地。')){
-    store.board.meta.history = []
-    store.board.meta.modifiedAt = new Date().toISOString()
-    store.log('history-clear', {})
-  }
-}
-
-// Merge modal state
-const mergeOpen = ref(false)
-const imported = ref<any>({})
-const diff = ref<any>({})
-const name = ref('导入文件')
-function openMerge(data: any, d: any, n: string){ imported.value = data; diff.value = d; name.value = n; mergeOpen.value = true }
 </script>
-
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 604c973..0f0901e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,6 +24,12 @@ importers:
         specifier: ^3.23.8
         version: 3.25.76
     devDependencies:
+      '@nuxt/icon':
+        specifier: ^1.5.0
+        version: 1.15.0(magicast@0.3.5)(vite@7.1.11(@types/node@20.19.23)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
+      '@nuxt/ui':
+        specifier: ^2.15.1
+        version: 2.22.3(magicast@0.3.5)(vite@7.1.11(@types/node@20.19.23)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))(yaml@2.8.1)(zod@3.25.76)
       '@nuxtjs/tailwindcss':
         specifier: ^6.11.4
         version: 6.14.0(magicast@0.3.5)(yaml@2.8.1)
@@ -49,6 +55,12 @@ packages:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
 
+  '@antfu/install-pkg@1.1.0':
+    resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
+
+  '@antfu/utils@8.1.1':
+    resolution: {integrity: sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==}
+
   '@babel/code-frame@7.27.1':
     resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
     engines: {node: '>=6.9.0'}
@@ -347,6 +359,35 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@headlessui/tailwindcss@0.2.2':
+    resolution: {integrity: sha512-xNe42KjdyA4kfUKLLPGzME9zkH7Q3rOZ5huFihWNWOQFxnItxPB3/67yBI8/qBfY8nwBRx5GHn4VprsoluVMGw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      tailwindcss: ^3.0 || ^4.0
+
+  '@headlessui/vue@1.7.23':
+    resolution: {integrity: sha512-JzdCNqurrtuu0YW6QaDtR2PIYCKPUWq28csDyMvN4zmGccmE7lz40Is6hc3LA4HFeCI7sekZ/PQMTNmn9I/4Wg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      vue: ^3.2.0
+
+  '@iconify-json/heroicons@1.2.3':
+    resolution: {integrity: sha512-n+vmCEgTesRsOpp5AB5ILB6srsgsYK+bieoQBNlafvoEhjVXLq8nIGN4B0v/s4DUfa0dOrjwE/cKJgIKdJXOEg==}
+
+  '@iconify/collections@1.0.608':
+    resolution: {integrity: sha512-uMbaErE6TzDb04peWVFYjc9cweBD+j1nFBHi5EEcA1u1mXJAyePF01VzH6dimurrhivvU+nRmuYfiC8GPDyG6g==}
+
+  '@iconify/types@2.0.0':
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+
+  '@iconify/utils@2.3.0':
+    resolution: {integrity: sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==}
+
+  '@iconify/vue@5.0.0':
+    resolution: {integrity: sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==}
+    peerDependencies:
+      vue: '>=3'
+
   '@ioredis/commands@1.4.0':
     resolution: {integrity: sha512-aFT2yemJJo+TZCmieA7qnYGQooOS7QfNmYrzGtsYd3g9j5iDP8AimYYAesf79ohjbLG12XxC4nG5DyEnC88AsQ==}
 
@@ -430,6 +471,9 @@ packages:
     peerDependencies:
       vite: '>=6.0'
 
+  '@nuxt/icon@1.15.0':
+    resolution: {integrity: sha512-kA0rxqr1B601zNJNcOXera8CyYcxUCEcT7dXEC7rwAz71PRCN5emf7G656eKEQgtqrD4JSj6NQqWDgrmFcf/GQ==}
+
   '@nuxt/kit@3.19.3':
     resolution: {integrity: sha512-ze46EW5xW+UxDvinvPkYt2MzR355Az1lA3bpX8KDialgnCwr+IbkBij/udbUEC6ZFbidPkfK1eKl4ESN7gMY+w==}
     engines: {node: '>=18.12.0'}
@@ -447,6 +491,26 @@ packages:
     engines: {node: '>=18.12.0'}
     hasBin: true
 
+  '@nuxt/ui@2.22.3':
+    resolution: {integrity: sha512-895SAzqCCT5JAc1JQ8nAmmpwdKCJqArY8ifL/PNtD681FKSdXiSPxODGnpqpovM/ws6bvoRwglA7BtwAJ5ySBg==}
+    peerDependencies:
+      joi: ^17.13.0
+      superstruct: ^2.0.0
+      valibot: ^1.0.0
+      yup: ^1.6.0
+      zod: ^3.24.0
+    peerDependenciesMeta:
+      joi:
+        optional: true
+      superstruct:
+        optional: true
+      valibot:
+        optional: true
+      yup:
+        optional: true
+      zod:
+        optional: true
+
   '@nuxt/vite-builder@4.1.3':
     resolution: {integrity: sha512-yrblLSpGW6h9k+sDZa+vtevQz/6JLrPAj3n97HrEmVa6qB+4sE4HWtkMNUtWsOPe60sAm9usRsjDUkkiHZ0DpA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -457,6 +521,9 @@ packages:
       rolldown:
         optional: true
 
+  '@nuxtjs/color-mode@3.5.2':
+    resolution: {integrity: sha512-cC6RfgZh3guHBMLLjrBB2Uti5eUoGM9KyauOaYS9ETmxNWBMTvpgjvSiSJp1OFljIXPIqVTJ3xtJpSNZiO3ZaA==}
+
   '@nuxtjs/tailwindcss@6.14.0':
     resolution: {integrity: sha512-30RyDK++LrUVRgc2A85MktGWIZoRQgeQKjE4CjjD64OXNozyl+4ScHnnYgqVToMM6Ch2ZG2W4wV2J0EN6F0zkQ==}
 
@@ -828,6 +895,9 @@ packages:
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
+  '@popperjs/core@2.11.8':
+    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
+
   '@poppinss/colors@4.1.5':
     resolution: {integrity: sha512-FvdDqtcRCtz6hThExcFOgW0cWX+xwSMWcRuQe5ZEb2m7cVQOAVZOIMt+/v9RxGiD9/OY16qJBXK4CVKWAPalBw==}
 
@@ -1039,6 +1109,37 @@ packages:
   '@speed-highlight/core@1.2.7':
     resolution: {integrity: sha512-0dxmVj4gxg3Jg879kvFS/msl4s9F3T9UXC1InxgOf7t5NvcPD97u/WTA5vL/IxWHMn7qSxBozqrnnE2wvl1m8g==}
 
+  '@standard-schema/spec@1.0.0':
+    resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
+
+  '@tailwindcss/aspect-ratio@0.4.2':
+    resolution: {integrity: sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ==}
+    peerDependencies:
+      tailwindcss: '>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1'
+
+  '@tailwindcss/container-queries@0.1.1':
+    resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==}
+    peerDependencies:
+      tailwindcss: '>=3.2.0'
+
+  '@tailwindcss/forms@0.5.10':
+    resolution: {integrity: sha512-utI1ONF6uf/pPNO68kmN1b8rEwNXv3czukalo8VtJH8ksIkZXr3Q3VYudZLkCsDd4Wku120uF02hYK25XGPorw==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1'
+
+  '@tailwindcss/typography@0.5.19':
+    resolution: {integrity: sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
+
+  '@tanstack/virtual-core@3.13.12':
+    resolution: {integrity: sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==}
+
+  '@tanstack/vue-virtual@3.13.12':
+    resolution: {integrity: sha512-vhF7kEU9EXWXh+HdAwKJ2m3xaOnTTmgcdXcF2pim8g4GvI7eRrk2YRuV5nUlZnd/NbCIX4/Ja2OZu5EjJL06Ww==}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.0.0
+
   '@tybys/wasm-util@0.10.1':
     resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
 
@@ -1058,6 +1159,9 @@ packages:
   '@types/web-bluetooth@0.0.20':
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
 
+  '@types/web-bluetooth@0.0.21':
+    resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
+
   '@unhead/vue@2.0.19':
     resolution: {integrity: sha512-7BYjHfOaoZ9+ARJkT10Q2TjnTUqDXmMpfakIAsD/hXiuff1oqWg1xeXT5+MomhNcC15HbiABpbbBmITLSHxdKg==}
     peerDependencies:
@@ -1167,12 +1271,72 @@ packages:
   '@vueuse/core@11.3.0':
     resolution: {integrity: sha512-7OC4Rl1f9G8IT6rUfi9JrKiXy4bfmHhZ5x2Ceojy0jnd3mHNEvV4JaRygH362ror6/NZ+Nl+n13LPzGiPN8cKA==}
 
+  '@vueuse/core@13.9.0':
+    resolution: {integrity: sha512-ts3regBQyURfCE2BcytLqzm8+MmLlo5Ln/KLoxDVcsZ2gzIwVNnQpQOL/UKV8alUqjSZOlpFZcRNsLRqj+OzyA==}
+    peerDependencies:
+      vue: ^3.5.0
+
+  '@vueuse/integrations@13.9.0':
+    resolution: {integrity: sha512-SDobKBbPIOe0cVL7QxMzGkuUGHvWTdihi9zOrrWaWUgFKe15cwEcwfWmgrcNzjT6kHnNmWuTajPHoIzUjYNYYQ==}
+    peerDependencies:
+      async-validator: ^4
+      axios: ^1
+      change-case: ^5
+      drauu: ^0.4
+      focus-trap: ^7
+      fuse.js: ^7
+      idb-keyval: ^6
+      jwt-decode: ^4
+      nprogress: ^0.2
+      qrcode: ^1.5
+      sortablejs: ^1
+      universal-cookie: ^7 || ^8
+      vue: ^3.5.0
+    peerDependenciesMeta:
+      async-validator:
+        optional: true
+      axios:
+        optional: true
+      change-case:
+        optional: true
+      drauu:
+        optional: true
+      focus-trap:
+        optional: true
+      fuse.js:
+        optional: true
+      idb-keyval:
+        optional: true
+      jwt-decode:
+        optional: true
+      nprogress:
+        optional: true
+      qrcode:
+        optional: true
+      sortablejs:
+        optional: true
+      universal-cookie:
+        optional: true
+
+  '@vueuse/math@13.9.0':
+    resolution: {integrity: sha512-Qk2jqlaEGKwwe2/MBGtUd8nPpzoQPSQTfm2d30NPywjpYdpbI+WqOAE99MuSq9kIRoU7Xq3IYBtxMaLTy6lpsA==}
+    peerDependencies:
+      vue: ^3.5.0
+
   '@vueuse/metadata@11.3.0':
     resolution: {integrity: sha512-pwDnDspTqtTo2HwfLw4Rp6yywuuBdYnPYDq+mO38ZYKGebCUQC/nVj/PXSiK9HX5otxLz8Fn7ECPbjiRz2CC3g==}
 
+  '@vueuse/metadata@13.9.0':
+    resolution: {integrity: sha512-1AFRvuiGphfF7yWixZa0KwjYH8ulyjDCC0aFgrGRz8+P4kvDFSdXLVfTk5xAN9wEuD1J6z4/myMoYbnHoX07zg==}
+
   '@vueuse/shared@11.3.0':
     resolution: {integrity: sha512-P8gSSWQeucH5821ek2mn/ciCk+MS/zoRKqdQIM3bHq6p7GXDAJLmnRRKmF5F65sAVJIfzQlwR3aDzwCn10s8hA==}
 
+  '@vueuse/shared@13.9.0':
+    resolution: {integrity: sha512-e89uuTLMh0U5cZ9iDpEI2senqPGfbPRTHM/0AaQkcxnpqjkZqDYP8rpfm7edOz8s+pOCOROEy1PIveSW8+fL5g==}
+    peerDependencies:
+      vue: ^3.5.0
+
   abbrev@3.0.1:
     resolution: {integrity: sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -1923,6 +2087,10 @@ packages:
     resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
     engines: {node: '>=18'}
 
+  globals@15.15.0:
+    resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
+    engines: {node: '>=18'}
+
   globby@15.0.0:
     resolution: {integrity: sha512-oB4vkQGqlMl682wL1IlWd02tXCbquGWM4voPEI85QmNKCaw8zGTm1f1rubFgkg3Eli2PtKlFgrnmUqasbQWlkw==}
     engines: {node: '>=20'}
@@ -2211,6 +2379,9 @@ packages:
     resolution: {integrity: sha512-zPPuIt+ku1iCpFBRwseMcPYQ1cJL8l60rSmKeOuGfOXyE6YnTBmf2aEFNL2HQGrD0cPcLO/t+v9RTgC+fwEh/g==}
     engines: {node: ^4.8.4 || ^6.10.1 || ^7.10.1 || >= 8.1.4}
 
+  kolorist@1.8.0:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
+
   launch-editor@2.11.1:
     resolution: {integrity: sha512-SEET7oNfgSaB6Ym0jufAdCeo3meJVeCaaDyzRygy0xsp2BFKCprcfHljTq4QkzTLUxEKkFK6OK4811YM2oSrRg==}
 
@@ -2326,6 +2497,10 @@ packages:
     resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
     engines: {node: '>=12'}
 
+  mini-svg-data-uri@1.4.4:
+    resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
+    hasBin: true
+
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
@@ -2818,6 +2993,10 @@ packages:
     peerDependencies:
       postcss: ^8.4.32
 
+  postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+
   postcss-selector-parser@6.1.2:
     resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
     engines: {node: '>=4'}
@@ -3179,6 +3358,9 @@ packages:
     peerDependencies:
       tailwindcss: 1 || 2 || 2.0.1-compat || 3
 
+  tailwind-merge@2.6.0:
+    resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
+
   tailwindcss@3.4.18:
     resolution: {integrity: sha512-6A2rnmW5xZMdw11LYjhcI5846rt9pbLSabY5XPxo+XWdxwZaFEn47Go4NzFiHu9sNNmr/kXivP1vStfvMaK1GQ==}
     engines: {node: '>=14.0.0'}
@@ -3640,6 +3822,13 @@ snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
 
+  '@antfu/install-pkg@1.1.0':
+    dependencies:
+      package-manager-detector: 1.5.0
+      tinyexec: 1.0.1
+
+  '@antfu/utils@8.1.1': {}
+
   '@babel/code-frame@7.27.1':
     dependencies:
       '@babel/helper-validator-identifier': 7.27.1
@@ -3913,6 +4102,43 @@ snapshots:
   '@esbuild/win32-x64@0.25.11':
     optional: true
 
+  '@headlessui/tailwindcss@0.2.2(tailwindcss@3.4.18(yaml@2.8.1))':
+    dependencies:
+      tailwindcss: 3.4.18(yaml@2.8.1)
+
+  '@headlessui/vue@1.7.23(vue@3.5.22(typescript@5.9.3))':
+    dependencies:
+      '@tanstack/vue-virtual': 3.13.12(vue@3.5.22(typescript@5.9.3))
+      vue: 3.5.22(typescript@5.9.3)
+
+  '@iconify-json/heroicons@1.2.3':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify/collections@1.0.608':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify/types@2.0.0': {}
+
+  '@iconify/utils@2.3.0':
+    dependencies:
+      '@antfu/install-pkg': 1.1.0
+      '@antfu/utils': 8.1.1
+      '@iconify/types': 2.0.0
+      debug: 4.4.3
+      globals: 15.15.0
+      kolorist: 1.8.0
+      local-pkg: 1.1.2
+      mlly: 1.8.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@iconify/vue@5.0.0(vue@3.5.22(typescript@5.9.3))':
+    dependencies:
+      '@iconify/types': 2.0.0
+      vue: 3.5.22(typescript@5.9.3)
+
   '@ioredis/commands@1.4.0': {}
 
   '@isaacs/cliui@8.0.2':
@@ -4096,6 +4322,28 @@ snapshots:
       - utf-8-validate
       - vue
 
+  '@nuxt/icon@1.15.0(magicast@0.3.5)(vite@7.1.11(@types/node@20.19.23)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))':
+    dependencies:
+      '@iconify/collections': 1.0.608
+      '@iconify/types': 2.0.0
+      '@iconify/utils': 2.3.0
+      '@iconify/vue': 5.0.0(vue@3.5.22(typescript@5.9.3))
+      '@nuxt/devtools-kit': 2.6.5(magicast@0.3.5)(vite@7.1.11(@types/node@20.19.23)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))
+      '@nuxt/kit': 3.19.3(magicast@0.3.5)
+      consola: 3.4.2
+      local-pkg: 1.1.2
+      mlly: 1.8.0
+      ohash: 2.0.11
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      std-env: 3.10.0
+      tinyglobby: 0.2.15
+    transitivePeerDependencies:
+      - magicast
+      - supports-color
+      - vite
+      - vue
+
   '@nuxt/kit@3.19.3(magicast@0.3.5)':
     dependencies:
       c12: 3.3.1(magicast@0.3.5)
@@ -4178,6 +4426,52 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
+  '@nuxt/ui@2.22.3(magicast@0.3.5)(vite@7.1.11(@types/node@20.19.23)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))(yaml@2.8.1)(zod@3.25.76)':
+    dependencies:
+      '@headlessui/tailwindcss': 0.2.2(tailwindcss@3.4.18(yaml@2.8.1))
+      '@headlessui/vue': 1.7.23(vue@3.5.22(typescript@5.9.3))
+      '@iconify-json/heroicons': 1.2.3
+      '@nuxt/icon': 1.15.0(magicast@0.3.5)(vite@7.1.11(@types/node@20.19.23)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
+      '@nuxt/kit': 4.1.3(magicast@0.3.5)
+      '@nuxtjs/color-mode': 3.5.2(magicast@0.3.5)
+      '@nuxtjs/tailwindcss': 6.14.0(magicast@0.3.5)(yaml@2.8.1)
+      '@popperjs/core': 2.11.8
+      '@standard-schema/spec': 1.0.0
+      '@tailwindcss/aspect-ratio': 0.4.2(tailwindcss@3.4.18(yaml@2.8.1))
+      '@tailwindcss/container-queries': 0.1.1(tailwindcss@3.4.18(yaml@2.8.1))
+      '@tailwindcss/forms': 0.5.10(tailwindcss@3.4.18(yaml@2.8.1))
+      '@tailwindcss/typography': 0.5.19(tailwindcss@3.4.18(yaml@2.8.1))
+      '@vueuse/core': 13.9.0(vue@3.5.22(typescript@5.9.3))
+      '@vueuse/integrations': 13.9.0(fuse.js@7.1.0)(vue@3.5.22(typescript@5.9.3))
+      '@vueuse/math': 13.9.0(vue@3.5.22(typescript@5.9.3))
+      defu: 6.1.4
+      fuse.js: 7.1.0
+      ohash: 2.0.11
+      pathe: 2.0.3
+      scule: 1.3.0
+      tailwind-merge: 2.6.0
+      tailwindcss: 3.4.18(yaml@2.8.1)
+    optionalDependencies:
+      zod: 3.25.76
+    transitivePeerDependencies:
+      - async-validator
+      - axios
+      - change-case
+      - drauu
+      - focus-trap
+      - idb-keyval
+      - jwt-decode
+      - magicast
+      - nprogress
+      - qrcode
+      - sortablejs
+      - supports-color
+      - tsx
+      - universal-cookie
+      - vite
+      - vue
+      - yaml
+
   '@nuxt/vite-builder@4.1.3(@types/node@20.19.23)(magicast@0.3.5)(rollup@4.52.5)(terser@5.44.0)(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))(yaml@2.8.1)':
     dependencies:
       '@nuxt/kit': 4.1.3(magicast@0.3.5)
@@ -4235,6 +4529,15 @@ snapshots:
       - vue-tsc
       - yaml
 
+  '@nuxtjs/color-mode@3.5.2(magicast@0.3.5)':
+    dependencies:
+      '@nuxt/kit': 3.19.3(magicast@0.3.5)
+      pathe: 1.1.2
+      pkg-types: 1.3.1
+      semver: 7.7.3
+    transitivePeerDependencies:
+      - magicast
+
   '@nuxtjs/tailwindcss@6.14.0(magicast@0.3.5)(yaml@2.8.1)':
     dependencies:
       '@nuxt/kit': 3.19.3(magicast@0.3.5)
@@ -4482,6 +4785,8 @@ snapshots:
 
   '@polka/url@1.0.0-next.29': {}
 
+  '@popperjs/core@2.11.8': {}
+
   '@poppinss/colors@4.1.5':
     dependencies:
       kleur: 4.1.5
@@ -4635,6 +4940,33 @@ snapshots:
 
   '@speed-highlight/core@1.2.7': {}
 
+  '@standard-schema/spec@1.0.0': {}
+
+  '@tailwindcss/aspect-ratio@0.4.2(tailwindcss@3.4.18(yaml@2.8.1))':
+    dependencies:
+      tailwindcss: 3.4.18(yaml@2.8.1)
+
+  '@tailwindcss/container-queries@0.1.1(tailwindcss@3.4.18(yaml@2.8.1))':
+    dependencies:
+      tailwindcss: 3.4.18(yaml@2.8.1)
+
+  '@tailwindcss/forms@0.5.10(tailwindcss@3.4.18(yaml@2.8.1))':
+    dependencies:
+      mini-svg-data-uri: 1.4.4
+      tailwindcss: 3.4.18(yaml@2.8.1)
+
+  '@tailwindcss/typography@0.5.19(tailwindcss@3.4.18(yaml@2.8.1))':
+    dependencies:
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 3.4.18(yaml@2.8.1)
+
+  '@tanstack/virtual-core@3.13.12': {}
+
+  '@tanstack/vue-virtual@3.13.12(vue@3.5.22(typescript@5.9.3))':
+    dependencies:
+      '@tanstack/virtual-core': 3.13.12
+      vue: 3.5.22(typescript@5.9.3)
+
   '@tybys/wasm-util@0.10.1':
     dependencies:
       tslib: 2.8.1
@@ -4654,6 +4986,8 @@ snapshots:
 
   '@types/web-bluetooth@0.0.20': {}
 
+  '@types/web-bluetooth@0.0.21': {}
+
   '@unhead/vue@2.0.19(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       hookable: 5.5.3
@@ -4846,8 +5180,30 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/core@13.9.0(vue@3.5.22(typescript@5.9.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 13.9.0
+      '@vueuse/shared': 13.9.0(vue@3.5.22(typescript@5.9.3))
+      vue: 3.5.22(typescript@5.9.3)
+
+  '@vueuse/integrations@13.9.0(fuse.js@7.1.0)(vue@3.5.22(typescript@5.9.3))':
+    dependencies:
+      '@vueuse/core': 13.9.0(vue@3.5.22(typescript@5.9.3))
+      '@vueuse/shared': 13.9.0(vue@3.5.22(typescript@5.9.3))
+      vue: 3.5.22(typescript@5.9.3)
+    optionalDependencies:
+      fuse.js: 7.1.0
+
+  '@vueuse/math@13.9.0(vue@3.5.22(typescript@5.9.3))':
+    dependencies:
+      '@vueuse/shared': 13.9.0(vue@3.5.22(typescript@5.9.3))
+      vue: 3.5.22(typescript@5.9.3)
+
   '@vueuse/metadata@11.3.0': {}
 
+  '@vueuse/metadata@13.9.0': {}
+
   '@vueuse/shared@11.3.0(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       vue-demi: 0.14.10(vue@3.5.22(typescript@5.9.3))
@@ -4855,6 +5211,10 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/shared@13.9.0(vue@3.5.22(typescript@5.9.3))':
+    dependencies:
+      vue: 3.5.22(typescript@5.9.3)
+
   abbrev@3.0.1: {}
 
   abort-controller@3.0.0:
@@ -5586,6 +5946,8 @@ snapshots:
     dependencies:
       ini: 4.1.1
 
+  globals@15.15.0: {}
+
   globby@15.0.0:
     dependencies:
       '@sindresorhus/merge-streams': 4.0.0
@@ -5889,6 +6251,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  kolorist@1.8.0: {}
+
   launch-editor@2.11.1:
     dependencies:
       picocolors: 1.1.1
@@ -6006,6 +6370,8 @@ snapshots:
 
   mimic-fn@4.0.0: {}
 
+  mini-svg-data-uri@1.4.4: {}
+
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.12
@@ -6688,6 +7054,11 @@ snapshots:
       postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
+  postcss-selector-parser@6.0.10:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
   postcss-selector-parser@6.1.2:
     dependencies:
       cssesc: 3.0.0
@@ -7072,6 +7443,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  tailwind-merge@2.6.0: {}
+
   tailwindcss@3.4.18(yaml@2.8.1):
     dependencies:
       '@alloc/quick-lru': 5.2.0
diff --git a/stores/board.ts b/stores/board.ts
index 5aac1ec..5fd2a89 100644
--- a/stores/board.ts
+++ b/stores/board.ts
@@ -113,6 +113,28 @@ export const useBoardStore = defineStore('board', () => {
   const stageById = (id: string) => board.value.stages.find(s => s.uuid === id)
   const categoryById = (id: string) => board.value.categories.find(c => c.uuid === id)
 
+  function addCategory(title: string, color: string) {
+    const c: Category = { uuid: uuid(), title, color }
+    board.value.categories.push(c)
+    log('category-add', { id: c.uuid, title, color })
+    return c
+  }
+  function updateCategory(id: string, patch: Partial<Category>) {
+    const c = categoryById(id)
+    if (!c) return false
+    const before = JSON.parse(JSON.stringify(c))
+    Object.assign(c, patch)
+    log('category-update', { id, before, after: c })
+    return true
+  }
+  function removeCategory(id: string) {
+    const used = board.value.tasks.some(t => t.category === id)
+    if (used) return false
+    board.value.categories = board.value.categories.filter(c => c.uuid !== id)
+    log('category-delete', { id })
+    return true
+  }
+
   function addStage(title: string, colIndex = 0) {
     const s: Stage = { uuid: uuid(), title, tasks: [] }
     board.value.stages.push(s)
@@ -188,8 +210,8 @@ export const useBoardStore = defineStore('board', () => {
     setBoard, setActor, log, saveToLocal, loadFromLocal, clearLocal,
     toJSON, downloadCurrent, applyMerge,
     addStage, renameStage, deleteStage, addTask, removeTask, editTask, moveTask,
+    addCategory, updateCategory, removeCategory,
     taskById, stageById, categoryById,
     diffBoards
   }
 })
-
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 9cf19ea..7f64e91 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -19,6 +19,5 @@ export default {
       }
     }
   },
-  plugins: []
+  plugins: [],
 } satisfies Config
-