feat(admin): Admin V2 — Ant Design Pro 纯 SPA 重写

Next.js SSR/hydration 与 SWR fetch-on-mount 存在根本冲突： hydration 卸载组件时 abort 的请求仍占用后端 DB 连接， retry 循环耗尽 PostgreSQL 连接池导致后端完全卡死。 admin-v2 使用 Vite + React + antd 纯 SPA 彻底消除此问题： - 12 页面全部完成（Login, Dashboard, Accounts, Providers, Models, API Keys, Usage, Relay, Config, Prompts, Logs, Agent Templates） - ProTable + ProForm + ProLayout 统一 UI 模式 - TanStack Query + Axios + Zustand 数据层 - JWT 自动刷新 + 401 重试机制 - 全部 18 网络请求 200 OK，零 ERR_ABORTED 同时更新 troubleshooting 第 13 节和 SaaS 平台文档。
2026-03-30 09:35:59 +08:00
parent 13c0b18bbc
commit a7d33d0207
52 changed files with 8102 additions and 118 deletions
--- a/admin-v2/src/pages/Prompts.tsx
+++ b/admin-v2/src/pages/Prompts.tsx
@@ -0,0 +1,228 @@
+// ============================================================
+// 提示词管理
+// ============================================================
+
+import { useState } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { Button, message, Tag, Modal, Form, Input, Select, Space, Popconfirm, Descriptions, Tabs, Typography } from 'antd'
+import { PlusOutlined } from '@ant-design/icons'
+import type { ProColumns } from '@ant-design/pro-components'
+import { ProTable } from '@ant-design/pro-components'
+import { promptService } from '@/services/prompts'
+import type { PromptTemplate, PromptVersion } from '@/types'
+
+const { TextArea } = Input
+const { Text } = Typography
+
+const sourceLabels: Record<string, string> = { builtin: '内置', custom: '自定义' }
+const statusLabels: Record<string, string> = { active: '活跃', deprecated: '已废弃', archived: '已归档' }
+const statusColors: Record<string, string> = { active: 'green', deprecated: 'orange', archived: 'default' }
+
+export default function Prompts() {
+  const queryClient = useQueryClient()
+  const [form] = Form.useForm()
+  const [createOpen, setCreateOpen] = useState(false)
+  const [detailName, setDetailName] = useState<string | null>(null)
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['prompts'],
+    queryFn: () => promptService.list(),
+  })
+
+  const { data: detailData } = useQuery({
+    queryKey: ['prompt-detail', detailName],
+    queryFn: () => promptService.get(detailName!),
+    enabled: !!detailName,
+  })
+
+  const { data: versionsData } = useQuery({
+    queryKey: ['prompt-versions', detailName],
+    queryFn: () => promptService.listVersions(detailName!),
+    enabled: !!detailName,
+  })
+
+  const createMutation = useMutation({
+    mutationFn: (data: Parameters<typeof promptService.create>[0]) => promptService.create(data),
+    onSuccess: () => {
+      message.success('创建成功')
+      queryClient.invalidateQueries({ queryKey: ['prompts'] })
+      setCreateOpen(false)
+      form.resetFields()
+    },
+    onError: (err: Error) => message.error(err.message || '创建失败'),
+  })
+
+  const archiveMutation = useMutation({
+    mutationFn: (name: string) => promptService.archive(name),
+    onSuccess: () => {
+      message.success('已归档')
+      queryClient.invalidateQueries({ queryKey: ['prompts'] })
+    },
+    onError: (err: Error) => message.error(err.message || '归档失败'),
+  })
+
+  const rollbackMutation = useMutation({
+    mutationFn: ({ name, version }: { name: string; version: number }) =>
+      promptService.rollback(name, version),
+    onSuccess: () => {
+      message.success('回滚成功')
+      queryClient.invalidateQueries({ queryKey: ['prompts'] })
+      queryClient.invalidateQueries({ queryKey: ['prompt-detail', detailName] })
+      queryClient.invalidateQueries({ queryKey: ['prompt-versions', detailName] })
+    },
+    onError: (err: Error) => message.error(err.message || '回滚失败'),
+  })
+
+  const columns: ProColumns<PromptTemplate>[] = [
+    { title: '名称', dataIndex: 'name', width: 200, render: (_, r) => <Text code>{r.name}</Text> },
+    { title: '分类', dataIndex: 'category', width: 100 },
+    { title: '描述', dataIndex: 'description', width: 200, ellipsis: true },
+    {
+      title: '来源',
+      dataIndex: 'source',
+      width: 80,
+      render: (_, r) => <Tag>{sourceLabels[r.source]}</Tag>,
+    },
+    { title: '版本', dataIndex: 'current_version', width: 70 },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      width: 90,
+      render: (_, r) => <Tag color={statusColors[r.status]}>{statusLabels[r.status]}</Tag>,
+    },
+    {
+      title: '操作',
+      width: 180,
+      render: (_, record) => (
+        <Space>
+          <Button size="small" onClick={() => setDetailName(record.name)}>详情</Button>
+          {record.status === 'active' && (
+            <Popconfirm title="确定归档此提示词？" onConfirm={() => archiveMutation.mutate(record.name)}>
+              <Button size="small" danger>归档</Button>
+            </Popconfirm>
+          )}
+        </Space>
+      ),
+    },
+  ]
+
+  const handleCreate = async () => {
+    const values = await form.validateFields()
+    createMutation.mutate(values)
+  }
+
+  const versionColumns: ProColumns<PromptVersion>[] = [
+    { title: '版本', dataIndex: 'version', width: 60 },
+    { title: '更新说明', dataIndex: 'changelog', width: 200, ellipsis: true },
+    { title: '最低版本', dataIndex: 'min_app_version', width: 100, render: (_, r) => r.min_app_version || '-' },
+    {
+      title: '创建时间',
+      dataIndex: 'created_at',
+      width: 180,
+      render: (_, r) => new Date(r.created_at).toLocaleString('zh-CN'),
+    },
+    {
+      title: '操作',
+      width: 80,
+      render: (_, record) => (
+        <Popconfirm
+          title={`确定回滚到版本 ${record.version}？`}
+          onConfirm={() => detailName && rollbackMutation.mutate({ name: detailName, version: record.version })}
+        >
+          <Button size="small">回滚</Button>
+        </Popconfirm>
+      ),
+    },
+  ]
+
+  return (
+    <div>
+      <ProTable<PromptTemplate>
+        columns={columns}
+        dataSource={data?.items ?? []}
+        loading={isLoading}
+        rowKey="id"
+        search={false}
+        toolBarRender={() => [
+          <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => { form.resetFields(); setCreateOpen(true) }}>
+            新建提示词
+          </Button>,
+        ]}
+        pagination={{
+          total: data?.total ?? 0,
+          pageSize: data?.page_size ?? 20,
+          current: data?.page ?? 1,
+          showSizeChanger: false,
+        }}
+      />
+
+      <Modal
+        title="新建提示词"
+        open={createOpen}
+        onOk={handleCreate}
+        onCancel={() => { setCreateOpen(false); form.resetFields() }}
+        confirmLoading={createMutation.isPending}
+        width={640}
+      >
+        <Form form={form} layout="vertical">
+          <Form.Item name="name" label="名称" rules={[{ required: true }]}>
+            <Input placeholder="唯一标识" />
+          </Form.Item>
+          <Form.Item name="category" label="分类" rules={[{ required: true }]}>
+            <Input placeholder="如 system, tool" />
+          </Form.Item>
+          <Form.Item name="description" label="描述">
+            <TextArea rows={2} />
+          </Form.Item>
+          <Form.Item name="system_prompt" label="系统提示词" rules={[{ required: true }]}>
+            <TextArea rows={6} />
+          </Form.Item>
+          <Form.Item name="user_prompt_template" label="用户提示词模板">
+            <TextArea rows={4} />
+          </Form.Item>
+        </Form>
+      </Modal>
+
+      <Modal
+        title={`提示词详情: ${detailName || ''}`}
+        open={!!detailName}
+        onCancel={() => setDetailName(null)}
+        footer={null}
+        width={800}
+      >
+        <Tabs items={[
+          {
+            key: 'info',
+            label: '基本信息',
+            children: detailData ? (
+              <Descriptions column={2} bordered size="small">
+                <Descriptions.Item label="名称">{detailData.name}</Descriptions.Item>
+                <Descriptions.Item label="分类">{detailData.category}</Descriptions.Item>
+                <Descriptions.Item label="来源">{sourceLabels[detailData.source]}</Descriptions.Item>
+                <Descriptions.Item label="状态">{statusLabels[detailData.status]}</Descriptions.Item>
+                <Descriptions.Item label="当前版本">{detailData.current_version}</Descriptions.Item>
+                <Descriptions.Item label="描述" span={2}>{detailData.description || '-'}</Descriptions.Item>
+              </Descriptions>
+            ) : null,
+          },
+          {
+            key: 'versions',
+            label: '版本历史',
+            children: (
+              <ProTable<PromptVersion>
+                columns={versionColumns}
+                dataSource={versionsData ?? []}
+                rowKey="id"
+                search={false}
+                toolBarRender={false}
+                pagination={false}
+                size="small"
+                loading={!versionsData}
+              />
+            ),
+          },
+        ]} />
+      </Modal>
+    </div>
+  )
+}