@allbluecn/admin-app 0.2.6 → 0.3.1

package/src/components/ai-prompts/prompt-editor.tsx

@@ -0,0 +1,328 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// apps/admin/src/components/ai-prompts/prompt-editor.tsx
+import { useCallback, useEffect, useState } from "react"
+import type {
+  SystemPromptSectionDTO,
+  SystemPromptTemplateDTO,
+} from "@allbluecn/kernel"
+import { useMutation } from "@tanstack/react-query"
+import { Link } from "@tanstack/react-router"
+import { ArrowLeft, Loader2, Save, ShieldCheck } from "lucide-react"
+
+import { m } from "@/paraglide/messages.js"
+import { toast } from "@/components/ui/toast"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Field, FieldContent, FieldLabel } from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
+import { Switch } from "@/components/ui/switch"
+import { Textarea } from "@/components/ui/textarea"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { activatePromptTemplateFn } from "@/server/serverFns/ai-prompts/activate"
+import { getPromptTemplateFn } from "@/server/serverFns/ai-prompts/get"
+import { rollbackPromptTemplateFn } from "@/server/serverFns/ai-prompts/rollback"
+import { savePromptTemplateFn } from "@/server/serverFns/ai-prompts/save"
+import { SectionEditor } from "./section-editor"
+import { VariablePanel } from "./variable-panel"
+import { PreviewPanel } from "./preview-panel"
+import { VersionHistory } from "./version-history"
+import {
+  extractUsedVariables,
+  renumberSections,
+  type PromptSectionDTO,
+  type PromptVariableDTO,
+  type PromptVersionSummary,
+} from "./prompt-utils"
+
+interface PromptEditorProps {
+  template: SystemPromptTemplateDTO
+  versions: PromptVersionSummary[]
+}
+
+/** 分区编辑态：在 DTO 基础上带「模板中已引用的变量名」，供变量面板展示说明 */
+interface PromptSectionState extends PromptSectionDTO {
+  usedVariables?: string[]
+}
+
+function toSectionState(
+  sections: PromptSectionDTO[],
+  usedVariables: string[],
+): PromptSectionState[] {
+  return sections.map((s) => ({ ...s, usedVariables }))
+}
+
+export function PromptEditor({ template, versions: initialVersions }: PromptEditorProps) {
+  const [sections, setSections] = useState<PromptSectionState[]>(
+    toSectionState(template.sections, extractUsedVariables(template.sections)),
+  )
+  const [variables, setVariables] = useState<PromptVariableDTO[]>(template.variables ?? [])
+  const [name, setName] = useState(template.name)
+  const [description, setDescription] = useState(template.description ?? "")
+  const [note, setNote] = useState("")
+  const [expectedVersion, setExpectedVersion] = useState(template.version)
+  const [isActive, setIsActive] = useState(template.isActive)
+  const [versions, setVersions] = useState<PromptVersionSummary[]>(initialVersions)
+
+  useEffect(() => {
+    setSections(
+      toSectionState(template.sections, extractUsedVariables(template.sections)),
+    )
+    setVariables(template.variables ?? [])
+    setName(template.name)
+    setDescription(template.description ?? "")
+    setNote("")
+    setExpectedVersion(template.version)
+    setIsActive(template.isActive)
+    setVersions(initialVersions)
+  }, [template, initialVersions])
+
+  const applyTemplate = useCallback(
+    (tpl: SystemPromptTemplateDTO, list: PromptVersionSummary[]) => {
+      setSections(
+        toSectionState(tpl.sections, extractUsedVariables(tpl.sections)),
+      )
+      setVariables(tpl.variables ?? [])
+      setName(tpl.name)
+      setDescription(tpl.description ?? "")
+      setExpectedVersion(tpl.version)
+      setIsActive(tpl.isActive)
+      setVersions(list)
+    },
+    [],
+  )
+
+  const refresh = useCallback(async () => {
+    const res = await getPromptTemplateFn({ data: { key: template.key } })
+    applyTemplate(res.template, res.versions)
+  }, [applyTemplate, template.key])
+
+  const usedVariables = extractUsedVariables(sections)
+
+  const saveMutation = useMutation({
+    mutationFn: () =>
+      savePromptTemplateFn({
+        data: {
+          key: template.key,
+          expectedVersion,
+          name: name.trim(),
+          description: description.trim() ? description : null,
+          sections: renumberSections(
+            sections.map(({ usedVariables: _used, ...rest }) => rest),
+          ),
+          variables: variables.filter((v) => v.name.trim() !== ""),
+          note: note.trim() || undefined,
+        },
+      }),
+    onSuccess: async () => {
+      toast.success(m["admin-ai_prompts_toast_saved"]())
+      setNote("")
+      await refresh()
+    },
+    onError: (err) =>
+      toast.error(
+        err instanceof Error ? err.message : m["admin-ai_prompts_toast_save_failed"](),
+      ),
+  })
+
+  const activateMutation = useMutation({
+    mutationFn: (next: boolean) =>
+      activatePromptTemplateFn({ data: { key: template.key, isActive: next } }),
+    onSuccess: (res) => setIsActive(res.isActive),
+    onError: (err) =>
+      toast.error(
+        err instanceof Error ? err.message : m["admin-ai_prompts_toast_failed"](),
+      ),
+  })
+
+  const rollbackMutation = useMutation({
+    mutationFn: (version: number) =>
+      rollbackPromptTemplateFn({
+        data: { key: template.key, version, expectedVersion },
+      }),
+    onSuccess: async () => {
+      toast.success(m["admin-ai_prompts_toast_rolled_back"]({ version: rollbackMutation.variables ?? 0 }))
+      setNote("")
+      await refresh()
+    },
+    onError: (err) =>
+      toast.error(
+        err instanceof Error ? err.message : m["admin-ai_prompts_toast_failed"](),
+      ),
+  })
+
+  const handleActivate = (checked: boolean) => {
+    if (template.isProtected && !checked) {
+      toast.error(m["admin-ai_prompts_toast_protected_locked"]())
+      return
+    }
+    activateMutation.mutate(checked)
+  }
+
+  const switchControl = (
+    <Switch
+      size="sm"
+      checked={isActive}
+      onCheckedChange={handleActivate}
+      disabled={activateMutation.isPending}
+    />
+  )
+
+  return (
+    <div className="space-y-5">
+      <div className="flex flex-wrap items-center gap-3">
+        <Button render={<Link to="/ai-prompts" aria-label={m["admin-ai_prompts_back"]()} />} variant="ghost" size="icon-sm" nativeButton={false}>
+            <ArrowLeft />
+          </Button>
+        <div className="min-w-0">
+          <div className="flex flex-wrap items-center gap-2">
+            <h1 className="text-lg font-semibold truncate">{template.name}</h1>
+            <Badge variant="outline" className="font-mono">
+              v{expectedVersion}
+            </Badge>
+            {template.isProtected && (
+              <Badge variant="secondary" className="gap-1">
+                <ShieldCheck className="size-3.5" />
+                {m["admin-ai_prompts_badge_protected"]()}
+              </Badge>
+            )}
+          </div>
+          <p className="font-mono text-xs text-muted-foreground">{template.key}</p>
+        </div>
+
+        <div className="ml-auto flex items-center gap-2">
+          {template.isProtected ? (
+            <Tooltip>
+              <TooltipTrigger render={<span className="inline-flex" />}>{switchControl}</TooltipTrigger>
+              <TooltipContent>{m["admin-ai_prompts_protected_hint"]()}</TooltipContent>
+            </Tooltip>
+          ) : (
+            switchControl
+          )}
+          <span className="text-sm text-muted-foreground">
+            {m["admin-ai_prompts_active"]()}
+          </span>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 gap-5 xl:grid-cols-2">
+        <div className="space-y-5">
+          <div className="space-y-3">
+            <Field>
+              <FieldContent>
+                <FieldLabel>{m["admin-ai_prompts_name"]()}</FieldLabel>
+                <Input
+                  value={name}
+                  placeholder={m["admin-ai_prompts_name_placeholder"]()}
+                  onChange={(e) => setName(e.target.value)}
+                />
+              </FieldContent>
+            </Field>
+            <Field>
+              <FieldContent>
+                <FieldLabel>{m["admin-ai_prompts_description"]()}</FieldLabel>
+                <Textarea
+                  className="min-h-16 resize-y"
+                  value={description}
+                  placeholder={m["admin-ai_prompts_description_placeholder"]()}
+                  onChange={(e) => setDescription(e.target.value)}
+                />
+              </FieldContent>
+            </Field>
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <h2 className="text-sm font-medium">
+                {m["admin-ai_prompts_sections_title"]()}
+              </h2>
+              <span className="text-xs text-muted-foreground">
+                {m["admin-ai_prompts_sections_hint"]()}
+              </span>
+            </div>
+            <SectionEditor sections={sections} onChange={setSections} />
+          </div>
+
+          <div className="space-y-2">
+            <h2 className="text-sm font-medium">
+              {m["admin-ai_prompts_variables_title"]()}
+            </h2>
+            <VariablePanel
+              variables={variables}
+              onChange={setVariables}
+              usedVariables={usedVariables}
+            />
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <h2 className="text-sm font-medium">
+            {m["admin-ai_prompts_preview_title"]()}
+          </h2>
+          <p className="text-xs text-muted-foreground">
+            {m["admin-ai_prompts_preview_hint"]()}
+          </p>
+          <PreviewPanel
+            key={template.key}
+            sections={sections}
+            variables={variables}
+          />
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <VersionHistory
+          versions={versions}
+          currentVersion={expectedVersion}
+          rollbackPending={rollbackMutation.isPending}
+          onRollback={(version) => rollbackMutation.mutate(version)}
+        />
+      </div>
+
+      <div className="sticky bottom-0 flex flex-wrap items-center gap-3 rounded-md border border-border bg-background p-3 shadow-sm">
+        <div className="flex-1 min-w-48">
+          <Input
+            value={note}
+            maxLength={200}
+            placeholder={m["admin-ai_prompts_note_placeholder"]()}
+            onChange={(e) => setNote(e.target.value)}
+          />
+        </div>
+        <span className="text-xs text-muted-foreground">
+          {m["admin-ai_prompts_cache_hint"]()}
+        </span>
+        <Button
+          type="button"
+          disabled={saveMutation.isPending || !name.trim()}
+          onClick={() => saveMutation.mutate()}
+        >
+          {saveMutation.isPending ? (
+            <Loader2 className="animate-spin" />
+          ) : (
+            <Save />
+          )}
+          {m["admin-ai_prompts_save"]()}
+        </Button>
+      </div>
+    </div>
+  )
+}

package/src/components/ai-prompts/prompt-table.tsx

@@ -0,0 +1,141 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// apps/admin/src/components/ai-prompts/prompt-table.tsx
+import { useMutation } from "@tanstack/react-query"
+import { Link, useRouter } from "@tanstack/react-router"
+import { Edit, ShieldCheck } from "lucide-react"
+import { formatTimestamp } from "@allbluecn/web-app/lib/datetime"
+
+import { m } from "@/paraglide/messages.js"
+import { toast } from "@/components/ui/toast"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Switch } from "@/components/ui/switch"
+import { DataTable, type AdminColumnDef } from "@/components/data-table/data-table"
+import { activatePromptTemplateFn } from "@/server/serverFns/ai-prompts/activate"
+import type { PromptTemplateRow } from "./prompt-utils"
+
+export function PromptTable({ data }: { data: PromptTemplateRow[] }) {
+  const router = useRouter()
+
+  const toggleMutation = useMutation({
+    mutationFn: (vars: { key: string; isActive: boolean }) =>
+      activatePromptTemplateFn({ data: vars }),
+    onSuccess: async () => {
+      toast.success(m["admin-ai_prompts_toast_activated"]())
+      await router.invalidate()
+    },
+    onError: (err) =>
+      toast.error(
+        err instanceof Error ? err.message : m["admin-ai_prompts_toast_failed"](),
+      ),
+  })
+
+  const columns: AdminColumnDef<PromptTemplateRow>[] = [
+    {
+      accessorKey: "key",
+      header: m["admin-ai_prompts_columns_key"](),
+      meta: { style: { width: "15%" } },
+      cell: ({ row }: any) => (
+        <span className="font-mono text-sm">{row.original.key}</span>
+      ),
+    },
+    {
+      accessorKey: "name",
+      header: m["admin-ai_prompts_columns_name"](),
+      cell: ({ row }: any) => (
+        <span className="font-medium">{row.original.name}</span>
+      ),
+    },
+    {
+      accessorKey: "version",
+      header: m["admin-ai_prompts_columns_version"](),
+      meta: { style: { width: "7rem" } },
+      cell: ({ row }: any) => (
+        <Badge variant="outline" className="font-mono">
+          v{row.original.version}
+        </Badge>
+      ),
+    },
+    {
+      accessorKey: "isActive",
+      header: m["admin-ai_prompts_columns_active"](),
+      meta: { style: { width: "6rem" } },
+      cell: ({ row }: any) => (
+        <div onClick={(e) => e.stopPropagation()}>
+          <Switch
+            checked={row.original.isActive}
+            onCheckedChange={(checked: boolean) =>
+              toggleMutation.mutate({
+                key: row.original.key,
+                isActive: checked,
+              })
+            }
+            disabled={toggleMutation.isPending}
+          />
+        </div>
+      ),
+    },
+    {
+      accessorKey: "isProtected",
+      header: m["admin-ai_prompts_columns_protected"](),
+      meta: { style: { width: "6rem" } },
+      cell: ({ row }: any) =>
+        row.original.isProtected ? (
+          <Badge variant="secondary" className="gap-1">
+            <ShieldCheck className="size-3.5" />
+            {m["admin-ai_prompts_badge_protected"]()}
+          </Badge>
+        ) : (
+          <span className="text-muted-foreground">—</span>
+        ),
+    },
+    {
+      accessorKey: "updatedAt",
+      header: m["admin-ai_prompts_columns_updatedAt"](),
+      meta: { style: { width: "9rem" } },
+      cell: ({ row }: any) => (
+        <span className="text-sm text-muted-foreground">
+          {formatTimestamp(row.original.updatedAt)}
+        </span>
+      ),
+    },
+    {
+      accessorKey: "id",
+      header: () => null,
+      meta: { style: { width: "4rem" } },
+      cell: ({ row }: any) => (
+        <div onClick={(e) => e.stopPropagation()}>
+          <Button render={<Link to="/ai-prompts/$key" params={{ key: row.original.key }} />} variant="ghost" size="icon-xs" aria-label={m["admin-ai_prompts_edit"]({ key: row.original.key })} nativeButton={false}>
+              <Edit />
+            </Button>
+        </div>
+      ),
+    },
+  ]
+
+  return (
+    <DataTable
+      data={data}
+      columns={columns}
+      onRowClick={(row) =>
+        router.navigate({ to: "/ai-prompts/$key", params: { key: row.key } })
+      }
+    />
+  )
+}

package/src/components/ai-prompts/prompt-utils.ts

@@ -0,0 +1,124 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// apps/admin/src/components/ai-prompts/prompt-utils.ts
+import type {
+  PromptVariableDefDTO,
+  SystemPromptSectionDTO,
+  SystemPromptTemplateDTO,
+} from "@allbluecn/kernel"
+
+export type PromptSectionDTO = SystemPromptSectionDTO
+export type PromptVariableDTO = PromptVariableDefDTO
+
+export interface PromptTemplateRow {
+  id: string
+  key: string
+  name: string
+  version: number
+  isActive: boolean
+  isProtected: boolean
+  updatedAt: string
+}
+
+export interface PromptVersionSummary {
+  id: string
+  version: number
+  note: string | null
+  createdBy: string | null
+  createdAt: string
+}
+
+export interface PromptEditorData {
+  template: SystemPromptTemplateDTO
+  versions: PromptVersionSummary[]
+}
+
+export interface PreviewSectionResult {
+  id: string
+  order: number
+  text: string
+}
+
+export type PreviewResult =
+  | { ok: true; sections: PreviewSectionResult[] }
+  | { ok: false; error: string }
+
+const TEMPLATE_VAR_RE = /\{\{\s*([^{}]+?)\s*\}\}/g
+const VALID_VAR_NAME_RE = /^[A-Za-z_][A-Za-z0-9_]*$/
+
+/** 从分区模板提取已引用的变量名（与 kernel interpolateTemplate 的校验规则一致） */
+export function extractUsedVariables(
+  sections: PromptSectionDTO[],
+): string[] {
+  const used = new Set<string>()
+  for (const section of sections) {
+    for (const match of section.template.matchAll(TEMPLATE_VAR_RE)) {
+      const name = match[1].trim()
+      if (VALID_VAR_NAME_RE.test(name)) used.add(name)
+    }
+  }
+  return [...used]
+}
+
+/** 新增分区：id 不可改（按 id 过滤依赖它），order 顺延到末尾 */
+export function appendSection(sections: PromptSectionDTO[]): PromptSectionDTO[] {
+  const nextOrder = sections.reduce((max, s) => Math.max(max, s.order), 0) + 1
+  return [...sections, { id: `sec_${Date.now()}`, order: nextOrder, template: "" }]
+}
+
+/** 上下移动：交换数组位置后整体重排 order，保证 order 与展示顺序一致 */
+export function moveSection(
+  sections: PromptSectionDTO[],
+  index: number,
+  delta: -1 | 1,
+): PromptSectionDTO[] {
+  const target = index + delta
+  if (target < 0 || target >= sections.length) return sections
+  const next = sections.slice()
+  ;[next[index], next[target]] = [next[target], next[index]]
+  return renumberSections(next)
+}
+
+export function removeSection(
+  sections: PromptSectionDTO[],
+  index: number,
+): PromptSectionDTO[] {
+  return renumberSections(sections.filter((_, i) => i !== index))
+}
+
+export function renumberSections(
+  sections: PromptSectionDTO[],
+): PromptSectionDTO[] {
+  return sections
+    .slice()
+    .sort((a, b) => a.order - b.order)
+    .map((s, i) => ({ ...s, order: i + 1 }))
+}
+
+export function addVariable(
+  variables: PromptVariableDTO[],
+): PromptVariableDTO[] {
+  return [...variables, { name: "", description: "" }]
+}
+
+export function removeVariable(
+  variables: PromptVariableDTO[],
+  index: number,
+): PromptVariableDTO[] {
+  return variables.filter((_, i) => i !== index)
+}