feat(studio/robot-authors): manual edit form
Adds an "编辑" action opening a sheet form to edit a robot author's status, persona, positioning, target readers, and the article/image/publishing style objects (JSON-validated as objects). Saves via the existing admin PUT endpoint, then refetches the enriched list.
This commit is contained in:
@@ -0,0 +1,218 @@
|
|||||||
|
import { useEffect } from 'react'
|
||||||
|
import { useForm } from 'react-hook-form'
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod'
|
||||||
|
import { z } from 'zod'
|
||||||
|
import { useMutation, useQueryClient } from '@tanstack/react-query'
|
||||||
|
import { toast } from 'sonner'
|
||||||
|
import type { StudioRobotAuthor } from '@/api/types'
|
||||||
|
import { updateRobotAuthor } from '@/api/modules/studio'
|
||||||
|
import { handleApiError } from '@/lib/errors'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Label } from '@/components/ui/label'
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select'
|
||||||
|
import {
|
||||||
|
Sheet,
|
||||||
|
SheetContent,
|
||||||
|
SheetDescription,
|
||||||
|
SheetFooter,
|
||||||
|
SheetHeader,
|
||||||
|
SheetTitle,
|
||||||
|
} from '@/components/ui/sheet'
|
||||||
|
import { StatusPill } from '@/components/status-pill'
|
||||||
|
import { Textarea } from '@/components/ui/textarea'
|
||||||
|
|
||||||
|
const STATUSES = ['pending', 'profiling', 'ready', 'paused'] as const
|
||||||
|
|
||||||
|
/** A JSON-object text field: empty is allowed (→ null), otherwise must parse to an object. */
|
||||||
|
const jsonObject = z.string().refine(
|
||||||
|
(value) => {
|
||||||
|
const trimmed = value.trim()
|
||||||
|
if (!trimmed) return true
|
||||||
|
try {
|
||||||
|
const parsed = JSON.parse(trimmed)
|
||||||
|
return typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed)
|
||||||
|
} catch {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ message: 'JSON 格式错误(需为对象 {…})' },
|
||||||
|
)
|
||||||
|
|
||||||
|
const schema = z.object({
|
||||||
|
persona: z.string(),
|
||||||
|
positioning: z.string(),
|
||||||
|
target_readers: z.string(),
|
||||||
|
status: z.enum(STATUSES),
|
||||||
|
article_style: jsonObject,
|
||||||
|
image_style: jsonObject,
|
||||||
|
publishing_rules: jsonObject,
|
||||||
|
})
|
||||||
|
|
||||||
|
type FormValues = z.infer<typeof schema>
|
||||||
|
|
||||||
|
const asText = (value: unknown) =>
|
||||||
|
value == null ? '' : JSON.stringify(value, null, 2)
|
||||||
|
|
||||||
|
const parseObject = (value: string) => {
|
||||||
|
const trimmed = value.trim()
|
||||||
|
return trimmed ? (JSON.parse(trimmed) as Record<string, unknown>) : null
|
||||||
|
}
|
||||||
|
|
||||||
|
interface RobotAuthorEditSheetProps {
|
||||||
|
author: StudioRobotAuthor | null
|
||||||
|
onOpenChange: (open: boolean) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export function RobotAuthorEditSheet({ author, onOpenChange }: RobotAuthorEditSheetProps) {
|
||||||
|
const queryClient = useQueryClient()
|
||||||
|
const form = useForm<FormValues>({
|
||||||
|
resolver: zodResolver(schema),
|
||||||
|
defaultValues: {
|
||||||
|
persona: '',
|
||||||
|
positioning: '',
|
||||||
|
target_readers: '',
|
||||||
|
status: 'pending',
|
||||||
|
article_style: '',
|
||||||
|
image_style: '',
|
||||||
|
publishing_rules: '',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!author) return
|
||||||
|
form.reset({
|
||||||
|
persona: author.persona ?? '',
|
||||||
|
positioning: author.positioning ?? '',
|
||||||
|
target_readers: author.target_readers ?? '',
|
||||||
|
status: author.status,
|
||||||
|
article_style: asText(author.article_style),
|
||||||
|
image_style: asText(author.image_style),
|
||||||
|
publishing_rules: asText(author.publishing_rules),
|
||||||
|
})
|
||||||
|
}, [author, form])
|
||||||
|
|
||||||
|
const mutation = useMutation({
|
||||||
|
mutationFn: (values: FormValues) => {
|
||||||
|
if (!author) throw new Error('no author')
|
||||||
|
return updateRobotAuthor(author.id, {
|
||||||
|
persona: values.persona.trim() || null,
|
||||||
|
positioning: values.positioning.trim() || null,
|
||||||
|
target_readers: values.target_readers.trim() || null,
|
||||||
|
status: values.status,
|
||||||
|
article_style: parseObject(values.article_style),
|
||||||
|
image_style: parseObject(values.image_style),
|
||||||
|
publishing_rules: parseObject(values.publishing_rules),
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
toast.success('已保存')
|
||||||
|
void queryClient.invalidateQueries({ queryKey: ['studio-robot-authors'] })
|
||||||
|
onOpenChange(false)
|
||||||
|
},
|
||||||
|
onError: (error) => handleApiError(error, form.setError),
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Sheet open={author !== null} onOpenChange={onOpenChange}>
|
||||||
|
<SheetContent className="flex w-full flex-col gap-0 overflow-y-auto sm:max-w-xl">
|
||||||
|
<SheetHeader>
|
||||||
|
<SheetTitle>编辑机器人作者</SheetTitle>
|
||||||
|
<SheetDescription className="break-all">
|
||||||
|
{author?.display_name || author?.user_uid}
|
||||||
|
</SheetDescription>
|
||||||
|
</SheetHeader>
|
||||||
|
|
||||||
|
<form
|
||||||
|
onSubmit={form.handleSubmit((values) => mutation.mutate(values))}
|
||||||
|
className="flex flex-col gap-4 px-4 pb-4"
|
||||||
|
>
|
||||||
|
<Field label="状态">
|
||||||
|
<Select
|
||||||
|
value={form.watch('status')}
|
||||||
|
onValueChange={(value) => form.setValue('status', value as FormValues['status'])}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-40">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{STATUSES.map((s) => (
|
||||||
|
<SelectItem key={s} value={s}>
|
||||||
|
<StatusPill status={s} />
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</Field>
|
||||||
|
|
||||||
|
<Field label="人设" error={form.formState.errors.persona?.message}>
|
||||||
|
<Textarea rows={3} {...form.register('persona')} placeholder="务实的家电维修师傅…" />
|
||||||
|
</Field>
|
||||||
|
<Field label="内容定位" error={form.formState.errors.positioning?.message}>
|
||||||
|
<Textarea rows={2} {...form.register('positioning')} />
|
||||||
|
</Field>
|
||||||
|
<Field label="目标读者" error={form.formState.errors.target_readers?.message}>
|
||||||
|
<Textarea rows={2} {...form.register('target_readers')} />
|
||||||
|
</Field>
|
||||||
|
|
||||||
|
<Field
|
||||||
|
label="写作风格 (JSON)"
|
||||||
|
error={form.formState.errors.article_style?.message}
|
||||||
|
>
|
||||||
|
<Textarea
|
||||||
|
rows={5}
|
||||||
|
className="font-mono text-xs"
|
||||||
|
{...form.register('article_style')}
|
||||||
|
placeholder={'{\n "tone": "…"\n}'}
|
||||||
|
/>
|
||||||
|
</Field>
|
||||||
|
<Field label="配图风格 (JSON)" error={form.formState.errors.image_style?.message}>
|
||||||
|
<Textarea rows={5} className="font-mono text-xs" {...form.register('image_style')} />
|
||||||
|
</Field>
|
||||||
|
<Field
|
||||||
|
label="发布规则 (JSON)"
|
||||||
|
error={form.formState.errors.publishing_rules?.message}
|
||||||
|
>
|
||||||
|
<Textarea
|
||||||
|
rows={4}
|
||||||
|
className="font-mono text-xs"
|
||||||
|
{...form.register('publishing_rules')}
|
||||||
|
/>
|
||||||
|
</Field>
|
||||||
|
|
||||||
|
<SheetFooter className="px-0">
|
||||||
|
<Button type="submit" disabled={mutation.isPending}>
|
||||||
|
{mutation.isPending ? '保存中…' : '保存'}
|
||||||
|
</Button>
|
||||||
|
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
|
||||||
|
取消
|
||||||
|
</Button>
|
||||||
|
</SheetFooter>
|
||||||
|
</form>
|
||||||
|
</SheetContent>
|
||||||
|
</Sheet>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function Field({
|
||||||
|
label,
|
||||||
|
error,
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
label: string
|
||||||
|
error?: string
|
||||||
|
children: React.ReactNode
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="grid gap-1.5">
|
||||||
|
<Label>{label}</Label>
|
||||||
|
{children}
|
||||||
|
{error && <p className="text-sm text-destructive">{error}</p>}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -11,6 +11,7 @@ import { useListPage } from '@/lib/list-page'
|
|||||||
import { CategoryPicker } from '@/features/categories/category-picker'
|
import { CategoryPicker } from '@/features/categories/category-picker'
|
||||||
import { useCategoryOptions } from '@/features/categories/use-categories'
|
import { useCategoryOptions } from '@/features/categories/use-categories'
|
||||||
import { DetailSheet } from '@/features/studio/detail-sheet'
|
import { DetailSheet } from '@/features/studio/detail-sheet'
|
||||||
|
import { RobotAuthorEditSheet } from '@/features/studio/robot-author-edit-sheet'
|
||||||
import { DataTable } from '@/components/data-table/data-table'
|
import { DataTable } from '@/components/data-table/data-table'
|
||||||
import { PageHeader } from '@/components/page-header'
|
import { PageHeader } from '@/components/page-header'
|
||||||
import { StatusPill } from '@/components/status-pill'
|
import { StatusPill } from '@/components/status-pill'
|
||||||
@@ -37,6 +38,7 @@ function RobotAuthorsPage() {
|
|||||||
const [status, setStatus] = useState('all')
|
const [status, setStatus] = useState('all')
|
||||||
const [categoryId, setCategoryId] = useState<string | null>(null)
|
const [categoryId, setCategoryId] = useState<string | null>(null)
|
||||||
const [detail, setDetail] = useState<StudioRobotAuthor | null>(null)
|
const [detail, setDetail] = useState<StudioRobotAuthor | null>(null)
|
||||||
|
const [editing, setEditing] = useState<StudioRobotAuthor | null>(null)
|
||||||
const { nameOf } = useCategoryOptions()
|
const { nameOf } = useCategoryOptions()
|
||||||
|
|
||||||
const filters: ListParams = {}
|
const filters: ListParams = {}
|
||||||
@@ -112,6 +114,9 @@ function RobotAuthorsPage() {
|
|||||||
<Button size="sm" variant="ghost" onClick={() => setDetail(row.original)}>
|
<Button size="sm" variant="ghost" onClick={() => setDetail(row.original)}>
|
||||||
详情
|
详情
|
||||||
</Button>
|
</Button>
|
||||||
|
<Button size="sm" variant="outline" onClick={() => setEditing(row.original)}>
|
||||||
|
编辑
|
||||||
|
</Button>
|
||||||
{row.original.status === 'paused' ? (
|
{row.original.status === 'paused' ? (
|
||||||
<Button size="sm" variant="outline" onClick={() => setAuthorStatus(row.original, 'ready')}>
|
<Button size="sm" variant="outline" onClick={() => setAuthorStatus(row.original, 'ready')}>
|
||||||
恢复
|
恢复
|
||||||
@@ -189,6 +194,8 @@ function RobotAuthorsPage() {
|
|||||||
{ label: '发布规则', value: detail?.publishing_rules },
|
{ label: '发布规则', value: detail?.publishing_rules },
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<RobotAuthorEditSheet author={editing} onOpenChange={(open) => !open && setEditing(null)} />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user