From 81718e53f91897bf172f3e1995bae6d02e66b897 Mon Sep 17 00:00:00 2001
From: Jerry Yan <792602257@qq.com>
Date: Fri, 1 May 2026 10:53:02 +0800
Subject: [PATCH] style(web): lint --fix sweep + disable no-undef for ts/vue
 (DOM globals)

---
 web/eslint.config.js                          |   3 +
 web/src/views/HomeView.vue                    |   4 +-
 web/src/views/auth/LoginView.vue              |  29 ++++-
 web/src/views/projects/IssueDetailView.vue    |  46 ++++++--
 web/src/views/projects/IssueListView.vue      |  54 +++++++--
 web/src/views/projects/ProjectHomeView.vue    |  50 ++++++--
 web/src/views/projects/ProjectListView.vue    | 108 ++++++++++++++----
 .../views/projects/RequirementDetailView.vue  |  63 ++++++++--
 .../views/projects/RequirementListView.vue    |  86 +++++++++++---
 9 files changed, 362 insertions(+), 81 deletions(-)

diff --git a/web/eslint.config.js b/web/eslint.config.js
index 637b6a0..db98714 100644
--- a/web/eslint.config.js
+++ b/web/eslint.config.js
@@ -35,6 +35,9 @@ export default [
     files: ['**/*.{ts,tsx,vue}'],
     rules: {
       'vue/multi-word-component-names': 'off',
+      // TypeScript/vue-tsc 已经做名字解析；no-undef 在 .vue 内对 DOM 全局
+      // (DragEvent / HTMLElement 等) 误报，关掉走 TS 校验。
+      'no-undef': 'off',
       '@typescript-eslint/no-unused-vars': [
         'error',
         { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
diff --git a/web/src/views/HomeView.vue b/web/src/views/HomeView.vue
index 8ceeaa7..0133b0e 100644
--- a/web/src/views/HomeView.vue
+++ b/web/src/views/HomeView.vue
@@ -1,7 +1,9 @@
 <template>
   <AppShell>
     <div class="space-y-4">
-      <h2 class="text-xl font-semibold">欢迎，{{ auth.user?.display_name }}</h2>
+      <h2 class="text-xl font-semibold">
+        欢迎，{{ auth.user?.display_name }}
+      </h2>
       <p>这是占位 dashboard。后续 plan 会接入项目/工作区/Issue。</p>
     </div>
   </AppShell>
diff --git a/web/src/views/auth/LoginView.vue b/web/src/views/auth/LoginView.vue
index 5cd4260..19458b5 100644
--- a/web/src/views/auth/LoginView.vue
+++ b/web/src/views/auth/LoginView.vue
@@ -1,19 +1,38 @@
 <template>
   <div class="min-h-screen flex items-center justify-center p-4">
     <div class="w-full max-w-sm space-y-4">
-      <h1 class="text-2xl font-semibold">登录</h1>
+      <h1 class="text-2xl font-semibold">
+        登录
+      </h1>
       <NForm @submit.prevent="onSubmit">
         <NFormItem label="邮箱">
-          <NInput v-model:value="email" placeholder="admin@local" />
+          <NInput
+            v-model:value="email"
+            placeholder="admin@local"
+          />
         </NFormItem>
         <NFormItem label="密码">
-          <NInput v-model:value="password" type="password" show-password-on="click" />
+          <NInput
+            v-model:value="password"
+            type="password"
+            show-password-on="click"
+          />
         </NFormItem>
-        <NButton type="primary" attr-type="submit" :loading="loading" block>
+        <NButton
+          type="primary"
+          attr-type="submit"
+          :loading="loading"
+          block
+        >
           登录
         </NButton>
       </NForm>
-      <p v-if="error" class="text-red-500 text-sm">{{ error }}</p>
+      <p
+        v-if="error"
+        class="text-red-500 text-sm"
+      >
+        {{ error }}
+      </p>
     </div>
   </div>
 </template>
diff --git a/web/src/views/projects/IssueDetailView.vue b/web/src/views/projects/IssueDetailView.vue
index 4840241..513d4d3 100644
--- a/web/src/views/projects/IssueDetailView.vue
+++ b/web/src/views/projects/IssueDetailView.vue
@@ -1,13 +1,21 @@
 <template>
   <AppShell>
     <NSpin :show="loading">
-      <div v-if="issue" class="space-y-6">
+      <div
+        v-if="issue"
+        class="space-y-6"
+      >
         <!-- Header -->
         <div class="flex items-center justify-between">
           <div class="flex items-center gap-3">
             <span class="text-gray-400 font-mono text-sm">#{{ issue.number }}</span>
-            <h1 class="text-2xl font-semibold">{{ issue.title }}</h1>
-            <NTag :type="issue.status === 'open' ? 'success' : 'default'" size="small">
+            <h1 class="text-2xl font-semibold">
+              {{ issue.title }}
+            </h1>
+            <NTag
+              :type="issue.status === 'open' ? 'success' : 'default'"
+              size="small"
+            >
               {{ issue.status === 'open' ? '开放' : '关闭' }}
             </NTag>
           </div>
@@ -30,7 +38,12 @@
             >
               重新开放
             </NButton>
-            <NButton size="small" @click="router.back()">返回</NButton>
+            <NButton
+              size="small"
+              @click="router.back()"
+            >
+              返回
+            </NButton>
           </div>
         </div>
 
@@ -52,7 +65,13 @@
               {{ issue.assignee_id ? `已指派：${issue.assignee_id}` : '暂未指派' }}
             </span>
             <div class="flex items-center gap-2">
-              <NButton size="small" :loading="assigning" @click="onAssignToMe">指派给我</NButton>
+              <NButton
+                size="small"
+                :loading="assigning"
+                @click="onAssignToMe"
+              >
+                指派给我
+              </NButton>
               <NButton
                 v-if="issue.assignee_id"
                 size="small"
@@ -67,14 +86,25 @@
 
         <!-- Description card -->
         <NCard title="描述">
-          <p v-if="issue.description" class="text-gray-700 whitespace-pre-wrap">
+          <p
+            v-if="issue.description"
+            class="text-gray-700 whitespace-pre-wrap"
+          >
             {{ issue.description }}
           </p>
-          <p v-else class="text-gray-400 text-sm">暂无描述</p>
+          <p
+            v-else
+            class="text-gray-400 text-sm"
+          >
+            暂无描述
+          </p>
         </NCard>
       </div>
 
-      <div v-else-if="!loading" class="text-gray-400 text-sm py-8 text-center">
+      <div
+        v-else-if="!loading"
+        class="text-gray-400 text-sm py-8 text-center"
+      >
         Issue 不存在或无权访问。
       </div>
     </NSpin>
diff --git a/web/src/views/projects/IssueListView.vue b/web/src/views/projects/IssueListView.vue
index 94506be..bc6ec08 100644
--- a/web/src/views/projects/IssueListView.vue
+++ b/web/src/views/projects/IssueListView.vue
@@ -4,8 +4,15 @@
       <div class="space-y-4">
         <!-- Header -->
         <div class="flex items-center justify-between">
-          <h1 class="text-2xl font-semibold">Issue 列表</h1>
-          <NButton type="primary" @click="showCreate = true">新建 Issue</NButton>
+          <h1 class="text-2xl font-semibold">
+            Issue 列表
+          </h1>
+          <NButton
+            type="primary"
+            @click="showCreate = true"
+          >
+            新建 Issue
+          </NButton>
         </div>
 
         <!-- Filter chips -->
@@ -44,20 +51,36 @@
           striped
         />
 
-        <div v-if="!loading && items.length === 0" class="text-gray-400 text-sm py-8 text-center">
+        <div
+          v-if="!loading && items.length === 0"
+          class="text-gray-400 text-sm py-8 text-center"
+        >
           暂无 Issue。
         </div>
       </div>
     </NSpin>
 
     <!-- Create modal -->
-    <NModal v-model:show="showCreate" preset="card" title="新建 Issue" class="w-full max-w-md">
+    <NModal
+      v-model:show="showCreate"
+      preset="card"
+      title="新建 Issue"
+      class="w-full max-w-md"
+    >
       <NForm @submit.prevent="onSubmit">
         <NFormItem label="标题">
-          <NInput v-model:value="form.title" placeholder="Issue 标题" />
+          <NInput
+            v-model:value="form.title"
+            placeholder="Issue 标题"
+          />
         </NFormItem>
         <NFormItem label="描述">
-          <NInput v-model:value="form.description" type="textarea" :rows="4" placeholder="（可选）" />
+          <NInput
+            v-model:value="form.description"
+            type="textarea"
+            :rows="4"
+            placeholder="（可选）"
+          />
         </NFormItem>
         <NFormItem label="挂载到 Requirement（可选）">
           <NSelect
@@ -68,11 +91,24 @@
           />
         </NFormItem>
         <div class="flex justify-end gap-2 mt-4">
-          <NButton @click="showCreate = false">取消</NButton>
-          <NButton type="primary" attr-type="submit" :loading="creating">创建</NButton>
+          <NButton @click="showCreate = false">
+            取消
+          </NButton>
+          <NButton
+            type="primary"
+            attr-type="submit"
+            :loading="creating"
+          >
+            创建
+          </NButton>
         </div>
       </NForm>
-      <p v-if="createError" class="text-red-500 text-sm mt-2">{{ createError }}</p>
+      <p
+        v-if="createError"
+        class="text-red-500 text-sm mt-2"
+      >
+        {{ createError }}
+      </p>
     </NModal>
   </AppShell>
 </template>
diff --git a/web/src/views/projects/ProjectHomeView.vue b/web/src/views/projects/ProjectHomeView.vue
index 7b667db..a88e9ba 100644
--- a/web/src/views/projects/ProjectHomeView.vue
+++ b/web/src/views/projects/ProjectHomeView.vue
@@ -1,32 +1,64 @@
 <template>
   <AppShell>
     <NSpin :show="store.loading">
-      <div v-if="store.current" class="space-y-6">
+      <div
+        v-if="store.current"
+        class="space-y-6"
+      >
         <!-- Header -->
         <div class="flex items-center justify-between">
           <div class="space-y-1">
             <div class="flex items-center gap-3">
-              <h1 class="text-2xl font-semibold">{{ store.current.name }}</h1>
-              <NTag :type="store.current.visibility === 'private' ? 'warning' : 'info'" size="small">
+              <h1 class="text-2xl font-semibold">
+                {{ store.current.name }}
+              </h1>
+              <NTag
+                :type="store.current.visibility === 'private' ? 'warning' : 'info'"
+                size="small"
+              >
                 {{ store.current.visibility === 'private' ? '私有' : '内部' }}
               </NTag>
-              <NTag v-if="store.current.archived_at" size="small">已归档</NTag>
+              <NTag
+                v-if="store.current.archived_at"
+                size="small"
+              >
+                已归档
+              </NTag>
             </div>
-            <p class="text-gray-500 text-sm font-mono">{{ store.current.slug }}</p>
+            <p class="text-gray-500 text-sm font-mono">
+              {{ store.current.slug }}
+            </p>
           </div>
         </div>
 
         <!-- Description -->
-        <p v-if="store.current.description" class="text-gray-600">{{ store.current.description }}</p>
+        <p
+          v-if="store.current.description"
+          class="text-gray-600"
+        >
+          {{ store.current.description }}
+        </p>
 
         <!-- Nav buttons -->
         <div class="flex gap-3">
-          <NButton type="primary" @click="goRequirements">需求列表</NButton>
-          <NButton @click="goIssues">Issue 列表</NButton>
+          <NButton
+            type="primary"
+            @click="goRequirements"
+          >
+            需求列表
+          </NButton>
+          <NButton @click="goIssues">
+            Issue 列表
+          </NButton>
         </div>
       </div>
 
-      <div v-else-if="!store.loading" class="text-gray-400 text-sm">项目不存在或无权访问。</div>
+      <div
+        v-else-if="!store.loading"
+        class="text-gray-400 text-sm"
+      >
+        项目不存在或无权访问。
+      </div>
     </NSpin>
   </AppShell>
 </template>
diff --git a/web/src/views/projects/ProjectListView.vue b/web/src/views/projects/ProjectListView.vue
index 2a2717a..b4ba150 100644
--- a/web/src/views/projects/ProjectListView.vue
+++ b/web/src/views/projects/ProjectListView.vue
@@ -4,18 +4,31 @@
       <div class="space-y-6">
         <!-- Header -->
         <div class="flex items-center justify-between">
-          <h1 class="text-2xl font-semibold">项目</h1>
+          <h1 class="text-2xl font-semibold">
+            项目
+          </h1>
           <div class="flex items-center gap-4">
             <div class="flex items-center gap-2">
               <span class="text-sm text-gray-500">显示已归档</span>
-              <NSwitch v-model:value="store.includeArchived" @update:value="store.refresh()" />
+              <NSwitch
+                v-model:value="store.includeArchived"
+                @update:value="store.refresh()"
+              />
             </div>
-            <NButton type="primary" @click="showCreate = true">新建项目</NButton>
+            <NButton
+              type="primary"
+              @click="showCreate = true"
+            >
+              新建项目
+            </NButton>
           </div>
         </div>
 
         <!-- Active projects grid -->
-        <div v-if="store.activeItems.length > 0" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div
+          v-if="store.activeItems.length > 0"
+          class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"
+        >
           <NCard
             v-for="p in store.activeItems"
             :key="p.id"
@@ -25,20 +38,34 @@
             <div class="space-y-2">
               <div class="flex items-center justify-between">
                 <span class="font-medium">{{ p.name }}</span>
-                <NTag :type="p.visibility === 'private' ? 'warning' : 'info'" size="small">
+                <NTag
+                  :type="p.visibility === 'private' ? 'warning' : 'info'"
+                  size="small"
+                >
                   {{ p.visibility === 'private' ? '私有' : '内部' }}
                 </NTag>
               </div>
-              <p class="text-sm text-gray-500 line-clamp-2">{{ p.description || '暂无描述' }}</p>
-              <p class="text-xs text-gray-400 font-mono">{{ p.slug }}</p>
+              <p class="text-sm text-gray-500 line-clamp-2">
+                {{ p.description || '暂无描述' }}
+              </p>
+              <p class="text-xs text-gray-400 font-mono">
+                {{ p.slug }}
+              </p>
             </div>
           </NCard>
         </div>
-        <div v-else-if="!store.loading" class="text-gray-400 text-sm">暂无活跃项目。</div>
+        <div
+          v-else-if="!store.loading"
+          class="text-gray-400 text-sm"
+        >
+          暂无活跃项目。
+        </div>
 
         <!-- Archived projects -->
         <template v-if="store.includeArchived && store.archivedItems.length > 0">
-          <h2 class="text-base font-medium text-gray-500">已归档</h2>
+          <h2 class="text-base font-medium text-gray-500">
+            已归档
+          </h2>
           <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
             <NCard
               v-for="p in store.archivedItems"
@@ -49,10 +76,16 @@
               <div class="space-y-2">
                 <div class="flex items-center justify-between">
                   <span class="font-medium">{{ p.name }}</span>
-                  <NTag size="small">已归档</NTag>
+                  <NTag size="small">
+                    已归档
+                  </NTag>
                 </div>
-                <p class="text-sm text-gray-500 line-clamp-2">{{ p.description || '暂无描述' }}</p>
-                <p class="text-xs text-gray-400 font-mono">{{ p.slug }}</p>
+                <p class="text-sm text-gray-500 line-clamp-2">
+                  {{ p.description || '暂无描述' }}
+                </p>
+                <p class="text-xs text-gray-400 font-mono">
+                  {{ p.slug }}
+                </p>
               </div>
             </NCard>
           </div>
@@ -61,29 +94,62 @@
     </NSpin>
 
     <!-- Create project modal -->
-    <NModal v-model:show="showCreate" preset="card" title="新建项目" class="w-full max-w-md">
+    <NModal
+      v-model:show="showCreate"
+      preset="card"
+      title="新建项目"
+      class="w-full max-w-md"
+    >
       <NForm @submit.prevent="onSubmit">
         <NFormItem label="Slug（URL 标识）">
-          <NInput v-model:value="form.slug" placeholder="my-project" />
+          <NInput
+            v-model:value="form.slug"
+            placeholder="my-project"
+          />
         </NFormItem>
         <NFormItem label="名称">
-          <NInput v-model:value="form.name" placeholder="My Project" />
+          <NInput
+            v-model:value="form.name"
+            placeholder="My Project"
+          />
         </NFormItem>
         <NFormItem label="描述">
-          <NInput v-model:value="form.description" type="textarea" :rows="3" placeholder="（可选）" />
+          <NInput
+            v-model:value="form.description"
+            type="textarea"
+            :rows="3"
+            placeholder="（可选）"
+          />
         </NFormItem>
         <NFormItem label="可见性">
           <NRadioGroup v-model:value="form.visibility">
-            <NRadio value="private">私有</NRadio>
-            <NRadio value="internal">内部</NRadio>
+            <NRadio value="private">
+              私有
+            </NRadio>
+            <NRadio value="internal">
+              内部
+            </NRadio>
           </NRadioGroup>
         </NFormItem>
         <div class="flex justify-end gap-2 mt-4">
-          <NButton @click="showCreate = false">取消</NButton>
-          <NButton type="primary" attr-type="submit" :loading="creating">创建</NButton>
+          <NButton @click="showCreate = false">
+            取消
+          </NButton>
+          <NButton
+            type="primary"
+            attr-type="submit"
+            :loading="creating"
+          >
+            创建
+          </NButton>
         </div>
       </NForm>
-      <p v-if="createError" class="text-red-500 text-sm mt-2">{{ createError }}</p>
+      <p
+        v-if="createError"
+        class="text-red-500 text-sm mt-2"
+      >
+        {{ createError }}
+      </p>
     </NModal>
   </AppShell>
 </template>
diff --git a/web/src/views/projects/RequirementDetailView.vue b/web/src/views/projects/RequirementDetailView.vue
index e63e002..d4cd134 100644
--- a/web/src/views/projects/RequirementDetailView.vue
+++ b/web/src/views/projects/RequirementDetailView.vue
@@ -1,13 +1,21 @@
 <template>
   <AppShell>
     <NSpin :show="loading">
-      <div v-if="data" class="space-y-6">
+      <div
+        v-if="data"
+        class="space-y-6"
+      >
         <!-- Header -->
         <div class="flex items-center justify-between">
           <div class="flex items-center gap-3">
             <span class="text-gray-400 font-mono text-sm">#{{ data.requirement.number }}</span>
-            <h1 class="text-2xl font-semibold">{{ data.requirement.title }}</h1>
-            <NTag :type="data.requirement.status === 'open' ? 'success' : 'default'" size="small">
+            <h1 class="text-2xl font-semibold">
+              {{ data.requirement.title }}
+            </h1>
+            <NTag
+              :type="data.requirement.status === 'open' ? 'success' : 'default'"
+              size="small"
+            >
               {{ data.requirement.status === 'open' ? '开放' : '关闭' }}
             </NTag>
           </div>
@@ -30,13 +38,21 @@
             >
               重新开放
             </NButton>
-            <NButton size="small" @click="router.back()">返回</NButton>
+            <NButton
+              size="small"
+              @click="router.back()"
+            >
+              返回
+            </NButton>
           </div>
         </div>
 
         <!-- Phase flow bar -->
         <div class="flex items-center gap-1">
-          <template v-for="(phase, idx) in PHASES" :key="phase">
+          <template
+            v-for="(phase, idx) in PHASES"
+            :key="phase"
+          >
             <NButton
               :type="phase === data.requirement.phase ? 'primary' : 'default'"
               :secondary="phase !== data.requirement.phase"
@@ -46,22 +62,39 @@
             >
               {{ PHASE_LABELS[phase] }}
             </NButton>
-            <span v-if="idx < PHASES.length - 1" class="text-gray-300 text-xs">›</span>
+            <span
+              v-if="idx < PHASES.length - 1"
+              class="text-gray-300 text-xs"
+            >›</span>
           </template>
         </div>
 
         <!-- Description -->
         <NCard title="描述">
-          <p v-if="data.requirement.description" class="text-gray-700 whitespace-pre-wrap">
+          <p
+            v-if="data.requirement.description"
+            class="text-gray-700 whitespace-pre-wrap"
+          >
             {{ data.requirement.description }}
           </p>
-          <p v-else class="text-gray-400 text-sm">暂无描述</p>
+          <p
+            v-else
+            class="text-gray-400 text-sm"
+          >
+            暂无描述
+          </p>
         </NCard>
 
         <!-- Linked Issues -->
         <NCard title="关联 Issue">
-          <NList v-if="data.issues.length > 0" :show-divider="false">
-            <NListItem v-for="issue in data.issues" :key="issue.id">
+          <NList
+            v-if="data.issues.length > 0"
+            :show-divider="false"
+          >
+            <NListItem
+              v-for="issue in data.issues"
+              :key="issue.id"
+            >
               <NThing>
                 <template #header>
                   <span class="font-mono text-xs text-gray-400 mr-2">#{{ issue.number }}</span>
@@ -78,11 +111,17 @@
               </NThing>
             </NListItem>
           </NList>
-          <NEmpty v-else description="暂无关联 Issue" />
+          <NEmpty
+            v-else
+            description="暂无关联 Issue"
+          />
         </NCard>
       </div>
 
-      <div v-else-if="!loading" class="text-gray-400 text-sm py-8 text-center">
+      <div
+        v-else-if="!loading"
+        class="text-gray-400 text-sm py-8 text-center"
+      >
         需求不存在或无权访问。
       </div>
     </NSpin>
diff --git a/web/src/views/projects/RequirementListView.vue b/web/src/views/projects/RequirementListView.vue
index 6196893..30da5f5 100644
--- a/web/src/views/projects/RequirementListView.vue
+++ b/web/src/views/projects/RequirementListView.vue
@@ -4,18 +4,35 @@
       <div class="space-y-4">
         <!-- Header -->
         <div class="flex items-center justify-between">
-          <h1 class="text-2xl font-semibold">需求列表</h1>
+          <h1 class="text-2xl font-semibold">
+            需求列表
+          </h1>
           <div class="flex items-center gap-3">
-            <NRadioGroup v-model:value="viewMode" size="small">
-              <NRadioButton value="kanban">看板</NRadioButton>
-              <NRadioButton value="table">表格</NRadioButton>
+            <NRadioGroup
+              v-model:value="viewMode"
+              size="small"
+            >
+              <NRadioButton value="kanban">
+                看板
+              </NRadioButton>
+              <NRadioButton value="table">
+                表格
+              </NRadioButton>
             </NRadioGroup>
-            <NButton type="primary" @click="showCreate = true">新建需求</NButton>
+            <NButton
+              type="primary"
+              @click="showCreate = true"
+            >
+              新建需求
+            </NButton>
           </div>
         </div>
 
         <!-- Kanban view -->
-        <div v-if="viewMode === 'kanban'" class="flex gap-3 overflow-x-auto pb-2">
+        <div
+          v-if="viewMode === 'kanban'"
+          class="flex gap-3 overflow-x-auto pb-2"
+        >
           <div
             v-for="phase in PHASES"
             :key="phase"
@@ -39,14 +56,22 @@
               <div class="space-y-1">
                 <div class="flex items-center justify-between gap-1">
                   <span class="text-xs text-gray-400 font-mono">#{{ r.number }}</span>
-                  <NTag :type="r.status === 'open' ? 'success' : 'default'" size="tiny">
+                  <NTag
+                    :type="r.status === 'open' ? 'success' : 'default'"
+                    size="tiny"
+                  >
                     {{ r.status === 'open' ? '开放' : '关闭' }}
                   </NTag>
                 </div>
-                <p class="text-sm font-medium leading-snug">{{ r.title }}</p>
+                <p class="text-sm font-medium leading-snug">
+                  {{ r.title }}
+                </p>
               </div>
             </NCard>
-            <div v-if="columnItems(phase).length === 0" class="text-xs text-gray-300 text-center py-4">
+            <div
+              v-if="columnItems(phase).length === 0"
+              class="text-xs text-gray-300 text-center py-4"
+            >
               拖放到此处
             </div>
           </div>
@@ -62,27 +87,56 @@
           striped
         />
 
-        <div v-if="!store.loading && store.items.length === 0" class="text-gray-400 text-sm py-8 text-center">
+        <div
+          v-if="!store.loading && store.items.length === 0"
+          class="text-gray-400 text-sm py-8 text-center"
+        >
           暂无需求，点击「新建需求」创建第一条。
         </div>
       </div>
     </NSpin>
 
     <!-- Create modal -->
-    <NModal v-model:show="showCreate" preset="card" title="新建需求" class="w-full max-w-md">
+    <NModal
+      v-model:show="showCreate"
+      preset="card"
+      title="新建需求"
+      class="w-full max-w-md"
+    >
       <NForm @submit.prevent="onSubmit">
         <NFormItem label="标题">
-          <NInput v-model:value="form.title" placeholder="需求标题" />
+          <NInput
+            v-model:value="form.title"
+            placeholder="需求标题"
+          />
         </NFormItem>
         <NFormItem label="描述">
-          <NInput v-model:value="form.description" type="textarea" :rows="4" placeholder="（可选）" />
+          <NInput
+            v-model:value="form.description"
+            type="textarea"
+            :rows="4"
+            placeholder="（可选）"
+          />
         </NFormItem>
         <div class="flex justify-end gap-2 mt-4">
-          <NButton @click="showCreate = false">取消</NButton>
-          <NButton type="primary" attr-type="submit" :loading="creating">创建</NButton>
+          <NButton @click="showCreate = false">
+            取消
+          </NButton>
+          <NButton
+            type="primary"
+            attr-type="submit"
+            :loading="creating"
+          >
+            创建
+          </NButton>
         </div>
       </NForm>
-      <p v-if="createError" class="text-red-500 text-sm mt-2">{{ createError }}</p>
+      <p
+        v-if="createError"
+        class="text-red-500 text-sm mt-2"
+      >
+        {{ createError }}
+      </p>
     </NModal>
   </AppShell>
 </template>