From 80d37edca99091d2e4974efff5e2d0a8a0bd8df8 Mon Sep 17 00:00:00 2001
From: Jerry Yan <792602257@qq.com>
Date: Fri, 1 May 2026 10:47:02 +0800
Subject: [PATCH] feat(web): requirement kanban list and detail with phase flow

---
 .../views/projects/RequirementDetailView.vue  | 179 ++++++++++++++
 .../views/projects/RequirementListView.vue    | 219 ++++++++++++++++++
 2 files changed, 398 insertions(+)
 create mode 100644 web/src/views/projects/RequirementDetailView.vue
 create mode 100644 web/src/views/projects/RequirementListView.vue

diff --git a/web/src/views/projects/RequirementDetailView.vue b/web/src/views/projects/RequirementDetailView.vue
new file mode 100644
index 0000000..e63e002
--- /dev/null
+++ b/web/src/views/projects/RequirementDetailView.vue
@@ -0,0 +1,179 @@
+<template>
+  <AppShell>
+    <NSpin :show="loading">
+      <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">
+              {{ data.requirement.status === 'open' ? '开放' : '关闭' }}
+            </NTag>
+          </div>
+          <div class="flex items-center gap-2">
+            <NButton
+              v-if="data.requirement.status === 'open'"
+              type="warning"
+              size="small"
+              :loading="toggling"
+              @click="onClose"
+            >
+              关闭需求
+            </NButton>
+            <NButton
+              v-else
+              type="primary"
+              size="small"
+              :loading="toggling"
+              @click="onReopen"
+            >
+              重新开放
+            </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">
+            <NButton
+              :type="phase === data.requirement.phase ? 'primary' : 'default'"
+              :secondary="phase !== data.requirement.phase"
+              size="small"
+              :disabled="phase === data.requirement.phase"
+              @click="onPhaseClick(phase)"
+            >
+              {{ PHASE_LABELS[phase] }}
+            </NButton>
+            <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">
+            {{ data.requirement.description }}
+          </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">
+              <NThing>
+                <template #header>
+                  <span class="font-mono text-xs text-gray-400 mr-2">#{{ issue.number }}</span>
+                  <span class="text-sm font-medium">{{ issue.title }}</span>
+                </template>
+                <template #header-extra>
+                  <NTag
+                    :type="issue.status === 'open' ? 'success' : 'default'"
+                    size="tiny"
+                  >
+                    {{ issue.status === 'open' ? '开放' : '关闭' }}
+                  </NTag>
+                </template>
+              </NThing>
+            </NListItem>
+          </NList>
+          <NEmpty v-else description="暂无关联 Issue" />
+        </NCard>
+      </div>
+
+      <div v-else-if="!loading" class="text-gray-400 text-sm py-8 text-center">
+        需求不存在或无权访问。
+      </div>
+    </NSpin>
+  </AppShell>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useDialog } from 'naive-ui'
+import {
+  NCard,
+  NButton,
+  NTag,
+  NSpin,
+  NList,
+  NListItem,
+  NThing,
+  NEmpty,
+} from 'naive-ui'
+import AppShell from '@/layouts/AppShell.vue'
+import { projectsApi } from '@/api/projects'
+import { useRequirementsStore } from '@/stores/requirements'
+import type { Phase, RequirementDetail } from '@/api/projects'
+
+const PHASES: Phase[] = ['planning', 'auditing', 'implementing', 'reviewing', 'done']
+
+const PHASE_LABELS: Record<Phase, string> = {
+  planning: '规划中',
+  auditing: '审核中',
+  implementing: '实施中',
+  reviewing: '评审中',
+  done: '已完成',
+}
+
+const route = useRoute()
+const router = useRouter()
+const dialog = useDialog()
+const store = useRequirementsStore()
+
+const slug = route.params.slug as string
+const number = Number(route.params.number)
+
+const loading = ref(false)
+const toggling = ref(false)
+const data = ref<RequirementDetail | null>(null)
+
+async function fetchData() {
+  loading.value = true
+  try {
+    data.value = await projectsApi.getRequirement(slug, number)
+  } finally {
+    loading.value = false
+  }
+}
+
+function onPhaseClick(target: Phase) {
+  if (!data.value || data.value.requirement.phase === target) return
+  const targetLabel = PHASE_LABELS[target]
+  dialog.warning({
+    title: '切换阶段',
+    content: `确认将需求移至「${targetLabel}」阶段？`,
+    positiveText: '确认',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      await store.changePhase(slug, number, target)
+      // Refresh local data to reflect the change
+      data.value = await projectsApi.getRequirement(slug, number)
+    },
+  })
+}
+
+async function onClose() {
+  toggling.value = true
+  try {
+    await store.close(slug, number)
+    data.value = await projectsApi.getRequirement(slug, number)
+  } finally {
+    toggling.value = false
+  }
+}
+
+async function onReopen() {
+  toggling.value = true
+  try {
+    await store.reopen(slug, number)
+    data.value = await projectsApi.getRequirement(slug, number)
+  } finally {
+    toggling.value = false
+  }
+}
+
+onMounted(fetchData)
+</script>
diff --git a/web/src/views/projects/RequirementListView.vue b/web/src/views/projects/RequirementListView.vue
new file mode 100644
index 0000000..6196893
--- /dev/null
+++ b/web/src/views/projects/RequirementListView.vue
@@ -0,0 +1,219 @@
+<template>
+  <AppShell>
+    <NSpin :show="store.loading">
+      <div class="space-y-4">
+        <!-- Header -->
+        <div class="flex items-center justify-between">
+          <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>
+            <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-for="phase in PHASES"
+            :key="phase"
+            class="flex-shrink-0 w-60 bg-gray-50 rounded-lg p-3 space-y-2"
+            @dragover.prevent
+            @drop="onDrop($event, phase)"
+          >
+            <div class="text-sm font-medium text-gray-600 px-1">
+              {{ PHASE_LABELS[phase] }}
+              <span class="ml-1 text-gray-400 text-xs">({{ columnItems(phase).length }})</span>
+            </div>
+            <NCard
+              v-for="r in columnItems(phase)"
+              :key="r.id"
+              size="small"
+              class="cursor-grab active:cursor-grabbing"
+              draggable="true"
+              @dragstart="onDragStart($event, r.number)"
+              @click="goDetail(r.number)"
+            >
+              <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">
+                    {{ r.status === 'open' ? '开放' : '关闭' }}
+                  </NTag>
+                </div>
+                <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>
+          </div>
+        </div>
+
+        <!-- Table view -->
+        <NDataTable
+          v-if="viewMode === 'table'"
+          :columns="columns"
+          :data="store.items"
+          :row-props="rowProps"
+          :bordered="false"
+          striped
+        />
+
+        <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">
+      <NForm @submit.prevent="onSubmit">
+        <NFormItem label="标题">
+          <NInput v-model:value="form.title" placeholder="需求标题" />
+        </NFormItem>
+        <NFormItem label="描述">
+          <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>
+        </div>
+      </NForm>
+      <p v-if="createError" class="text-red-500 text-sm mt-2">{{ createError }}</p>
+    </NModal>
+  </AppShell>
+</template>
+
+<script setup lang="ts">
+import { h, ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import {
+  NCard,
+  NButton,
+  NTag,
+  NRadioGroup,
+  NRadioButton,
+  NDataTable,
+  NModal,
+  NForm,
+  NFormItem,
+  NInput,
+  NSpin,
+} from 'naive-ui'
+import type { DataTableColumns } from 'naive-ui'
+import AppShell from '@/layouts/AppShell.vue'
+import { useRequirementsStore } from '@/stores/requirements'
+import type { Phase, Requirement } from '@/api/projects'
+
+const PHASES: Phase[] = ['planning', 'auditing', 'implementing', 'reviewing', 'done']
+
+const PHASE_LABELS: Record<Phase, string> = {
+  planning: '规划中',
+  auditing: '审核中',
+  implementing: '实施中',
+  reviewing: '评审中',
+  done: '已完成',
+}
+
+const route = useRoute()
+const router = useRouter()
+const store = useRequirementsStore()
+
+const slug = route.params.slug as string
+const viewMode = ref<'kanban' | 'table'>('kanban')
+
+// ---- Kanban ----
+function columnItems(phase: Phase): Requirement[] {
+  return store.items.filter((r) => r.phase === phase)
+}
+
+function onDragStart(e: DragEvent, number: number) {
+  e.dataTransfer?.setData('text/plain', String(number))
+}
+
+async function onDrop(e: DragEvent, target: Phase) {
+  const raw = e.dataTransfer?.getData('text/plain')
+  if (!raw) return
+  const number = parseInt(raw, 10)
+  if (isNaN(number)) return
+  const item = store.items.find((r) => r.number === number)
+  if (!item || item.phase === target) return
+  await store.changePhase(slug, number, target)
+}
+
+// ---- Table ----
+const columns: DataTableColumns<Requirement> = [
+  {
+    title: '#',
+    key: 'number',
+    width: 60,
+    render: (row) => h('span', { class: 'font-mono text-xs text-gray-400' }, `#${row.number}`),
+  },
+  {
+    title: '标题',
+    key: 'title',
+  },
+  {
+    title: '阶段',
+    key: 'phase',
+    width: 100,
+    render: (row) =>
+      h(NTag, { size: 'small' }, { default: () => PHASE_LABELS[row.phase] }),
+  },
+  {
+    title: '状态',
+    key: 'status',
+    width: 80,
+    render: (row) =>
+      h(
+        NTag,
+        { size: 'small', type: row.status === 'open' ? 'success' : 'default' },
+        { default: () => (row.status === 'open' ? '开放' : '关闭') },
+      ),
+  },
+]
+
+function rowProps(row: Requirement) {
+  return {
+    style: 'cursor: pointer',
+    onClick: () => goDetail(row.number),
+  }
+}
+
+function goDetail(number: number) {
+  router.push({ name: 'requirement-detail', params: { slug, number } })
+}
+
+// ---- Create modal ----
+const showCreate = ref(false)
+const creating = ref(false)
+const createError = ref('')
+const form = ref({ title: '', description: '' })
+
+async function onSubmit() {
+  createError.value = ''
+  if (!form.value.title.trim()) {
+    createError.value = '标题不能为空'
+    return
+  }
+  creating.value = true
+  try {
+    const r = await store.create(slug, {
+      title: form.value.title,
+      description: form.value.description || undefined,
+    })
+    showCreate.value = false
+    form.value = { title: '', description: '' }
+    goDetail(r.number)
+  } catch (e) {
+    createError.value = e instanceof Error ? e.message : '创建失败'
+  } finally {
+    creating.value = false
+  }
+}
+
+onMounted(() => store.refresh(slug))
+</script>