You've already forked agentic-coding-workflow
feat(web): requirement kanban list and detail with phase flow
This commit is contained in:
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user