You've already forked agentic-coding-workflow
feat(web): WorkspaceListView and create modal
This commit is contained in:
@@ -0,0 +1,117 @@
|
|||||||
|
<template>
|
||||||
|
<AppShell>
|
||||||
|
<NSpin :show="store.loading">
|
||||||
|
<div class="space-y-6">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<h1 class="text-2xl font-semibold">
|
||||||
|
工作区
|
||||||
|
</h1>
|
||||||
|
<NButton
|
||||||
|
type="primary"
|
||||||
|
@click="showCreate = true"
|
||||||
|
>
|
||||||
|
新建工作区
|
||||||
|
</NButton>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Workspace list -->
|
||||||
|
<NDataTable
|
||||||
|
:columns="columns"
|
||||||
|
:data="store.list"
|
||||||
|
:loading="store.loading"
|
||||||
|
:row-props="rowProps"
|
||||||
|
:bordered="false"
|
||||||
|
striped
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="!store.loading && store.list.length === 0"
|
||||||
|
class="text-gray-400 text-sm py-8 text-center"
|
||||||
|
>
|
||||||
|
暂无工作区，点击「新建工作区」创建第一个。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</NSpin>
|
||||||
|
|
||||||
|
<!-- Create workspace modal -->
|
||||||
|
<WorkspaceCreateModal
|
||||||
|
v-if="showCreate"
|
||||||
|
:project-slug="projectSlug"
|
||||||
|
@close="showCreate = false"
|
||||||
|
@created="onCreated"
|
||||||
|
/>
|
||||||
|
</AppShell>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { h, ref, computed, onMounted } from 'vue'
|
||||||
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
|
import { NButton, NDataTable, NTag, NSpin, useMessage } from 'naive-ui'
|
||||||
|
import type { DataTableColumns } from 'naive-ui'
|
||||||
|
import AppShell from '@/layouts/AppShell.vue'
|
||||||
|
import { useWorkspacesStore } from '@/stores/workspaces'
|
||||||
|
import type { SyncStatus, Workspace } from '@/api/types'
|
||||||
|
import WorkspaceCreateModal from './components/WorkspaceCreateModal.vue'
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const router = useRouter()
|
||||||
|
const store = useWorkspacesStore()
|
||||||
|
const msg = useMessage()
|
||||||
|
|
||||||
|
const projectSlug = computed(() => route.params.slug as string)
|
||||||
|
const showCreate = ref(false)
|
||||||
|
|
||||||
|
const SYNC_TAG_TYPE: Record<SyncStatus, 'success' | 'info' | 'warning' | 'error'> = {
|
||||||
|
idle: 'success',
|
||||||
|
cloning: 'info',
|
||||||
|
syncing: 'info',
|
||||||
|
error: 'error',
|
||||||
|
}
|
||||||
|
|
||||||
|
const columns: DataTableColumns<Workspace> = [
|
||||||
|
{ title: '名称', key: 'name' },
|
||||||
|
{
|
||||||
|
title: 'Slug',
|
||||||
|
key: 'slug',
|
||||||
|
render: (row) => h('span', { class: 'font-mono text-xs text-gray-500' }, row.slug),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '同步状态',
|
||||||
|
key: 'sync_status',
|
||||||
|
width: 120,
|
||||||
|
render: (row) =>
|
||||||
|
h(
|
||||||
|
NTag,
|
||||||
|
{ type: SYNC_TAG_TYPE[row.sync_status] ?? 'default', size: 'small' },
|
||||||
|
{ default: () => row.sync_status },
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{ title: '默认分支', key: 'default_branch' },
|
||||||
|
{
|
||||||
|
title: '上次同步',
|
||||||
|
key: 'last_synced_at',
|
||||||
|
render: (row) => row.last_synced_at ?? '—',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
function rowProps(row: Workspace) {
|
||||||
|
return {
|
||||||
|
style: 'cursor: pointer',
|
||||||
|
onClick: () => router.push(`/p/${projectSlug.value}/w/${row.slug}`),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onCreated() {
|
||||||
|
showCreate.value = false
|
||||||
|
store.fetchByProject(projectSlug.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
try {
|
||||||
|
await store.fetchByProject(projectSlug.value)
|
||||||
|
} catch (e: unknown) {
|
||||||
|
msg.error('加载工作区失败：' + (e instanceof Error ? e.message : String(e)))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,196 @@
|
|||||||
|
<template>
|
||||||
|
<NModal
|
||||||
|
:show="true"
|
||||||
|
preset="card"
|
||||||
|
title="新建工作区"
|
||||||
|
:style="{ width: '560px' }"
|
||||||
|
@close="emit('close')"
|
||||||
|
>
|
||||||
|
<NForm
|
||||||
|
label-placement="left"
|
||||||
|
:label-width="100"
|
||||||
|
>
|
||||||
|
<NFormItem
|
||||||
|
label="Slug"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<NInput
|
||||||
|
v-model:value="form.slug"
|
||||||
|
placeholder="小写字母/数字/连字符，1–32 位"
|
||||||
|
/>
|
||||||
|
</NFormItem>
|
||||||
|
<NFormItem label="名称">
|
||||||
|
<NInput v-model:value="form.name" />
|
||||||
|
</NFormItem>
|
||||||
|
<NFormItem label="描述">
|
||||||
|
<NInput
|
||||||
|
v-model:value="form.description"
|
||||||
|
type="textarea"
|
||||||
|
:rows="3"
|
||||||
|
placeholder="（可选）"
|
||||||
|
/>
|
||||||
|
</NFormItem>
|
||||||
|
<NFormItem
|
||||||
|
label="Git 远端"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<NInput
|
||||||
|
v-model:value="form.git_remote_url"
|
||||||
|
placeholder="https://... / git@... / ssh://..."
|
||||||
|
/>
|
||||||
|
</NFormItem>
|
||||||
|
<NFormItem label="默认分支">
|
||||||
|
<NInput v-model:value="form.default_branch" />
|
||||||
|
</NFormItem>
|
||||||
|
<NFormItem label="凭据类型">
|
||||||
|
<NSelect
|
||||||
|
v-model:value="form.credential.kind"
|
||||||
|
:options="kindOptions"
|
||||||
|
/>
|
||||||
|
</NFormItem>
|
||||||
|
<NFormItem
|
||||||
|
v-if="form.credential.kind === 'pat'"
|
||||||
|
label="用户名"
|
||||||
|
>
|
||||||
|
<NInput
|
||||||
|
v-model:value="form.credential.username"
|
||||||
|
placeholder="GitHub 通常填 git 或用户名"
|
||||||
|
/>
|
||||||
|
</NFormItem>
|
||||||
|
<NFormItem
|
||||||
|
v-if="form.credential.kind === 'pat'"
|
||||||
|
label="Token"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<NInput
|
||||||
|
v-model:value="form.credential.secret"
|
||||||
|
type="password"
|
||||||
|
show-password-on="click"
|
||||||
|
/>
|
||||||
|
</NFormItem>
|
||||||
|
<NFormItem
|
||||||
|
v-if="form.credential.kind === 'ssh_key'"
|
||||||
|
label="私钥（PEM）"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<NInput
|
||||||
|
v-model:value="form.credential.secret"
|
||||||
|
type="textarea"
|
||||||
|
:autosize="{ minRows: 4, maxRows: 8 }"
|
||||||
|
/>
|
||||||
|
</NFormItem>
|
||||||
|
</NForm>
|
||||||
|
<template #footer>
|
||||||
|
<NSpace justify="end">
|
||||||
|
<NButton @click="emit('close')">
|
||||||
|
取消
|
||||||
|
</NButton>
|
||||||
|
<NButton
|
||||||
|
type="primary"
|
||||||
|
:loading="submitting"
|
||||||
|
@click="submit"
|
||||||
|
>
|
||||||
|
创建
|
||||||
|
</NButton>
|
||||||
|
</NSpace>
|
||||||
|
</template>
|
||||||
|
</NModal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import {
|
||||||
|
NModal,
|
||||||
|
NForm,
|
||||||
|
NFormItem,
|
||||||
|
NInput,
|
||||||
|
NSelect,
|
||||||
|
NButton,
|
||||||
|
NSpace,
|
||||||
|
useMessage,
|
||||||
|
} from 'naive-ui'
|
||||||
|
import { useWorkspacesStore } from '@/stores/workspaces'
|
||||||
|
import type { CredentialKind, CredentialUpsertBody } from '@/api/types'
|
||||||
|
|
||||||
|
interface CredentialFormState {
|
||||||
|
kind: CredentialKind
|
||||||
|
username: string
|
||||||
|
secret: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CreateFormState {
|
||||||
|
slug: string
|
||||||
|
name: string
|
||||||
|
description: string
|
||||||
|
git_remote_url: string
|
||||||
|
default_branch: string
|
||||||
|
credential: CredentialFormState
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<{ projectSlug: string }>()
|
||||||
|
const emit = defineEmits<{ close: []; created: [] }>()
|
||||||
|
|
||||||
|
const store = useWorkspacesStore()
|
||||||
|
const msg = useMessage()
|
||||||
|
|
||||||
|
const form = ref<CreateFormState>({
|
||||||
|
slug: '',
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
git_remote_url: '',
|
||||||
|
default_branch: 'main',
|
||||||
|
credential: {
|
||||||
|
kind: 'pat',
|
||||||
|
username: 'git',
|
||||||
|
secret: '',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const submitting = ref(false)
|
||||||
|
|
||||||
|
const kindOptions: { label: string; value: CredentialKind }[] = [
|
||||||
|
{ label: 'HTTPS PAT', value: 'pat' },
|
||||||
|
{ label: 'SSH Key', value: 'ssh_key' },
|
||||||
|
{ label: '公开仓库（无凭据）', value: 'none' },
|
||||||
|
]
|
||||||
|
|
||||||
|
function buildCredential(): CredentialUpsertBody {
|
||||||
|
if (form.value.credential.kind === 'none') {
|
||||||
|
return { kind: 'none' }
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
kind: form.value.credential.kind,
|
||||||
|
username: form.value.credential.username,
|
||||||
|
secret: form.value.credential.secret,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function submit() {
|
||||||
|
// 必填字段前置校验：与 ProjectListView/RequirementListView 保持一致，避免空请求穿透到后端。
|
||||||
|
if (!form.value.slug.trim() || !form.value.git_remote_url.trim()) {
|
||||||
|
msg.error('Slug 与 Git 远端为必填')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (form.value.credential.kind !== 'none' && !form.value.credential.secret) {
|
||||||
|
msg.error('请填写凭据 secret')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
submitting.value = true
|
||||||
|
try {
|
||||||
|
await store.create(props.projectSlug, {
|
||||||
|
slug: form.value.slug,
|
||||||
|
name: form.value.name || form.value.slug,
|
||||||
|
description: form.value.description,
|
||||||
|
git_remote_url: form.value.git_remote_url,
|
||||||
|
default_branch: form.value.default_branch || 'main',
|
||||||
|
credential: buildCredential(),
|
||||||
|
})
|
||||||
|
msg.success('工作区创建成功，正在异步克隆')
|
||||||
|
emit('created')
|
||||||
|
} catch (e: unknown) {
|
||||||
|
msg.error('创建失败：' + (e instanceof Error ? e.message : String(e)))
|
||||||
|
} finally {
|
||||||
|
submitting.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Reference in New Issue
Block a user