From 1fbc6cab5b47507d096f097a4a669b8cb6a01126 Mon Sep 17 00:00:00 2001
From: kongkx <kongkx.yang@gmail.com>
Date: Thu, 10 Sep 2026 14:10:03 +0800
Subject: [PATCH] refactor(studio): validate editors with zod

---
 .../studio/category-brief-edit-sheet.tsx      | 94 +++++--------------
 src/features/studio/subtopic-edit-sheet.tsx   | 67 +++++--------
 2 files changed, 45 insertions(+), 116 deletions(-)

diff --git a/src/features/studio/category-brief-edit-sheet.tsx b/src/features/studio/category-brief-edit-sheet.tsx
index afe2ac5..046c0cc 100644
--- a/src/features/studio/category-brief-edit-sheet.tsx
+++ b/src/features/studio/category-brief-edit-sheet.tsx
@@ -1,83 +1,31 @@
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Controller, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
+import { z } from 'zod'
+import { createCategoryBrief, updateCategoryBrief, type CategoryBriefPayload } from '@/api/modules/studio'
 import type { StudioCategoryBrief } from '@/api/types'
-import {
-  createCategoryBrief,
-  updateCategoryBrief,
-  type CategoryBriefPayload,
-} from '@/api/modules/studio'
-import { handleApiError } from '@/lib/errors'
-import { CategoryPicker } from '@/features/categories/category-picker'
 import { Button } from '@/components/ui/button'
 import { Label } from '@/components/ui/label'
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'
 import { Textarea } from '@/components/ui/textarea'
+import { CategoryPicker } from '@/features/categories/category-picker'
+import { handleApiError } from '@/lib/errors'
 
-interface Props {
-  brief: StudioCategoryBrief | null
-  creating: boolean
-  onOpenChange: (open: boolean) => void
-  onSaved: () => void
-}
-
+const schema = z.object({ category_id: z.string().min(1, '请选择分类'), description: z.string(), target_audience: z.string(), content_angles: z.string(), risk_notes: z.string() })
+type FormValues = z.infer<typeof schema>
+interface Props { brief: StudioCategoryBrief | null; creating: boolean; onOpenChange: (open: boolean) => void; onSaved: () => void }
 export function CategoryBriefEditSheet({ brief, creating, onOpenChange, onSaved }: Props) {
-  const open = creating || brief !== null
-  const [categoryId, setCategoryId] = useState<string | null>(null)
-  const [description, setDescription] = useState('')
-  const [targetAudience, setTargetAudience] = useState('')
-  const [contentAngles, setContentAngles] = useState('')
-  const [riskNotes, setRiskNotes] = useState('')
-  const [saving, setSaving] = useState(false)
-
-  useEffect(() => {
-    setCategoryId(brief?.category_id ?? null)
-    setDescription(brief?.description ?? '')
-    setTargetAudience(brief?.target_audience ?? '')
-    setContentAngles(brief?.content_angles?.join('\n') ?? '')
-    setRiskNotes(brief?.risk_notes ?? '')
-  }, [brief, creating])
-
-  const save = async () => {
-    if (!categoryId) {
-      toast.error('请选择分类')
-      return
-    }
-
-    const payload: CategoryBriefPayload = {
-      category_id: categoryId,
-      description: description.trim() || null,
-      target_audience: targetAudience.trim() || null,
-      content_angles: contentAngles.split('\n').map((value) => value.trim()).filter(Boolean),
-      risk_notes: riskNotes.trim() || null,
-    }
-
-    setSaving(true)
-    try {
-      if (brief) await updateCategoryBrief(brief.id, payload)
-      else await createCategoryBrief(payload)
-      toast.success(brief ? '分类简报已更新' : '分类简报已创建')
-      onSaved()
-      onOpenChange(false)
-    } catch (error) {
-      handleApiError(error)
-    } finally {
-      setSaving(false)
-    }
+  const form = useForm<FormValues>({ resolver: zodResolver(schema), defaultValues: { category_id: '', description: '', target_audience: '', content_angles: '', risk_notes: '' } })
+  useEffect(() => { form.reset({ category_id: brief?.category_id ?? '', description: brief?.description ?? '', target_audience: brief?.target_audience ?? '', content_angles: brief?.content_angles?.join('\n') ?? '', risk_notes: brief?.risk_notes ?? '' }) }, [brief, creating, form])
+  const submit = async (values: FormValues) => {
+    const payload: CategoryBriefPayload = { category_id: values.category_id, description: values.description.trim() || null, target_audience: values.target_audience.trim() || null, content_angles: values.content_angles.split('\n').map((value) => value.trim()).filter(Boolean), risk_notes: values.risk_notes.trim() || null }
+    try { if (brief) await updateCategoryBrief(brief.id, payload); else await createCategoryBrief(payload); toast.success(brief ? '分类简报已更新' : '分类简报已创建'); onSaved(); onOpenChange(false) } catch (error) { handleApiError(error, form.setError) }
   }
-
-  return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="w-full overflow-y-auto sm:max-w-xl">
-        <SheetHeader><SheetTitle>{brief ? '编辑分类简报' : '新建分类简报'}</SheetTitle></SheetHeader>
-        <div className="grid gap-5 px-4 pb-8">
-          <div className="grid gap-2"><Label>分类</Label><CategoryPicker value={categoryId} onChange={setCategoryId} /></div>
-          <div className="grid gap-2"><Label htmlFor="brief-description">定位描述</Label><Textarea id="brief-description" value={description} onChange={(e) => setDescription(e.target.value)} /></div>
-          <div className="grid gap-2"><Label htmlFor="brief-audience">目标受众</Label><Textarea id="brief-audience" value={targetAudience} onChange={(e) => setTargetAudience(e.target.value)} /></div>
-          <div className="grid gap-2"><Label htmlFor="brief-angles">内容切入角度</Label><Textarea id="brief-angles" value={contentAngles} onChange={(e) => setContentAngles(e.target.value)} placeholder="每行一个角度" /></div>
-          <div className="grid gap-2"><Label htmlFor="brief-risks">风险提示</Label><Textarea id="brief-risks" value={riskNotes} onChange={(e) => setRiskNotes(e.target.value)} /></div>
-          <Button disabled={saving} onClick={save}>{saving ? '保存中…' : '保存'}</Button>
-        </div>
-      </SheetContent>
-    </Sheet>
-  )
+  const fieldError = (name: keyof FormValues) => form.formState.errors[name]?.message
+  return <Sheet open={creating || brief !== null} onOpenChange={onOpenChange}><SheetContent className="w-full overflow-y-auto sm:max-w-xl"><SheetHeader><SheetTitle>{brief ? '编辑分类简报' : '新建分类简报'}</SheetTitle></SheetHeader><form className="grid gap-5 px-4 pb-8" onSubmit={form.handleSubmit(submit)}>
+    <Field label="分类" error={fieldError('category_id')}><Controller control={form.control} name="category_id" render={({ field }) => <CategoryPicker value={field.value || null} onChange={(value) => field.onChange(value ?? '')} />} /></Field>
+    <Field label="定位描述" error={fieldError('description')}><Textarea {...form.register('description')} /></Field><Field label="目标受众" error={fieldError('target_audience')}><Textarea {...form.register('target_audience')} /></Field><Field label="内容切入角度" error={fieldError('content_angles')}><Textarea {...form.register('content_angles')} placeholder="每行一个角度" /></Field><Field label="风险提示" error={fieldError('risk_notes')}><Textarea {...form.register('risk_notes')} /></Field><Button type="submit" disabled={form.formState.isSubmitting}>{form.formState.isSubmitting ? '保存中…' : '保存'}</Button>
+  </form></SheetContent></Sheet>
 }
+function Field({ label, error, children }: { label: string; error?: string; children: React.ReactNode }) { return <div className="grid gap-2"><Label>{label}</Label>{children}{error && <p className="text-sm text-destructive">{error}</p>}</div> }
diff --git a/src/features/studio/subtopic-edit-sheet.tsx b/src/features/studio/subtopic-edit-sheet.tsx
index ae4b4ef..044e73d 100644
--- a/src/features/studio/subtopic-edit-sheet.tsx
+++ b/src/features/studio/subtopic-edit-sheet.tsx
@@ -1,56 +1,37 @@
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Controller, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import type { StudioSubtopic } from '@/api/types'
+import { z } from 'zod'
 import { createSubtopic, updateSubtopic, type SubtopicPayload } from '@/api/modules/studio'
-import { handleApiError } from '@/lib/errors'
-import { CategoryPicker } from '@/features/categories/category-picker'
+import type { StudioSubtopic } from '@/api/types'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'
 import { Textarea } from '@/components/ui/textarea'
+import { CategoryPicker } from '@/features/categories/category-picker'
+import { handleApiError } from '@/lib/errors'
 
+const schema = z.object({
+  category_id: z.string().min(1, '请选择分类'), title: z.string().trim().min(1, '请填写标题').max(255, '不能超过 255 个字符'),
+  target_audience: z.string(), pain_points: z.string(), content_value: z.string(),
+  expandability_score: z.string().refine((value) => value === '' || (/^\d+$/.test(value) && Number(value) <= 10), '必须是 0–10 的整数'),
+  status: z.enum(['active', 'archived']),
+})
+type FormValues = z.infer<typeof schema>
 interface Props { subtopic: StudioSubtopic | null; creating: boolean; onOpenChange: (open: boolean) => void; onSaved: () => void }
-
 export function SubtopicEditSheet({ subtopic, creating, onOpenChange, onSaved }: Props) {
-  const open = creating || subtopic !== null
-  const [categoryId, setCategoryId] = useState<string | null>(null)
-  const [title, setTitle] = useState('')
-  const [targetAudience, setTargetAudience] = useState('')
-  const [painPoints, setPainPoints] = useState('')
-  const [contentValue, setContentValue] = useState('')
-  const [score, setScore] = useState('')
-  const [status, setStatus] = useState<StudioSubtopic['status']>('active')
-  const [saving, setSaving] = useState(false)
-
-  useEffect(() => {
-    setCategoryId(subtopic?.category_id ?? null); setTitle(subtopic?.title ?? '')
-    setTargetAudience(subtopic?.target_audience ?? ''); setPainPoints(subtopic?.pain_points ?? '')
-    setContentValue(subtopic?.content_value ?? ''); setScore(subtopic?.expandability_score?.toString() ?? '')
-    setStatus(subtopic?.status ?? 'active')
-  }, [subtopic, creating])
-
-  const save = async () => {
-    if (!categoryId || !title.trim()) { toast.error('请选择分类并填写标题'); return }
-    const numericScore = score === '' ? null : Number(score)
-    if (numericScore !== null && (!Number.isInteger(numericScore) || numericScore < 0 || numericScore > 10)) { toast.error('可扩展性评分必须是 0–10 的整数'); return }
-    const payload: SubtopicPayload = { category_id: categoryId, title: title.trim(), target_audience: targetAudience.trim() || null, pain_points: painPoints.trim() || null, content_value: contentValue.trim() || null, expandability_score: numericScore, status }
-    setSaving(true)
-    try {
-      if (subtopic) await updateSubtopic(subtopic.id, payload); else await createSubtopic(payload)
-      toast.success(subtopic ? '子话题已更新' : '子话题已创建'); onSaved(); onOpenChange(false)
-    } catch (error) { handleApiError(error) } finally { setSaving(false) }
+  const form = useForm<FormValues>({ resolver: zodResolver(schema), defaultValues: { category_id: '', title: '', target_audience: '', pain_points: '', content_value: '', expandability_score: '', status: 'active' } })
+  useEffect(() => { form.reset({ category_id: subtopic?.category_id ?? '', title: subtopic?.title ?? '', target_audience: subtopic?.target_audience ?? '', pain_points: subtopic?.pain_points ?? '', content_value: subtopic?.content_value ?? '', expandability_score: subtopic?.expandability_score?.toString() ?? '', status: subtopic?.status ?? 'active' }) }, [subtopic, creating, form])
+  const submit = async (values: FormValues) => {
+    const payload: SubtopicPayload = { category_id: values.category_id, title: values.title.trim(), target_audience: values.target_audience.trim() || null, pain_points: values.pain_points.trim() || null, content_value: values.content_value.trim() || null, expandability_score: values.expandability_score === '' ? null : Number(values.expandability_score), status: values.status }
+    try { if (subtopic) await updateSubtopic(subtopic.id, payload); else await createSubtopic(payload); toast.success(subtopic ? '子话题已更新' : '子话题已创建'); onSaved(); onOpenChange(false) } catch (error) { handleApiError(error, form.setError) }
   }
-
-  return <Sheet open={open} onOpenChange={onOpenChange}><SheetContent className="w-full overflow-y-auto sm:max-w-xl"><SheetHeader><SheetTitle>{subtopic ? '编辑子话题' : '新建子话题'}</SheetTitle></SheetHeader><div className="grid gap-5 px-4 pb-8">
-    <div className="grid gap-2"><Label>分类</Label><CategoryPicker value={categoryId} onChange={setCategoryId} /></div>
-    <div className="grid gap-2"><Label htmlFor="subtopic-title">标题</Label><Input id="subtopic-title" value={title} maxLength={255} onChange={(e) => setTitle(e.target.value)} /></div>
-    <div className="grid gap-2"><Label htmlFor="subtopic-audience">目标受众</Label><Textarea id="subtopic-audience" value={targetAudience} onChange={(e) => setTargetAudience(e.target.value)} /></div>
-    <div className="grid gap-2"><Label htmlFor="subtopic-pains">读者痛点</Label><Textarea id="subtopic-pains" value={painPoints} onChange={(e) => setPainPoints(e.target.value)} /></div>
-    <div className="grid gap-2"><Label htmlFor="subtopic-value">内容价值</Label><Textarea id="subtopic-value" value={contentValue} onChange={(e) => setContentValue(e.target.value)} /></div>
-    <div className="grid gap-2"><Label htmlFor="subtopic-score">可扩展性评分（0–10）</Label><Input id="subtopic-score" type="number" min={0} max={10} step={1} value={score} onChange={(e) => setScore(e.target.value)} /></div>
-    <div className="grid gap-2"><Label>状态</Label><Select value={status} onValueChange={(value) => setStatus(value as StudioSubtopic['status'])}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent><SelectItem value="active">启用</SelectItem><SelectItem value="archived">归档</SelectItem></SelectContent></Select></div>
-    <Button disabled={saving} onClick={save}>{saving ? '保存中…' : '保存'}</Button>
-  </div></SheetContent></Sheet>
+  const fieldError = (name: keyof FormValues) => form.formState.errors[name]?.message
+  return <Sheet open={creating || subtopic !== null} onOpenChange={onOpenChange}><SheetContent className="w-full overflow-y-auto sm:max-w-xl"><SheetHeader><SheetTitle>{subtopic ? '编辑子话题' : '新建子话题'}</SheetTitle></SheetHeader><form className="grid gap-5 px-4 pb-8" onSubmit={form.handleSubmit(submit)}>
+    <Field label="分类" error={fieldError('category_id')}><Controller control={form.control} name="category_id" render={({ field }) => <CategoryPicker value={field.value || null} onChange={(value) => field.onChange(value ?? '')} />} /></Field><Field label="标题" error={fieldError('title')}><Input maxLength={255} {...form.register('title')} /></Field><Field label="目标受众" error={fieldError('target_audience')}><Textarea {...form.register('target_audience')} /></Field><Field label="读者痛点" error={fieldError('pain_points')}><Textarea {...form.register('pain_points')} /></Field><Field label="内容价值" error={fieldError('content_value')}><Textarea {...form.register('content_value')} /></Field><Field label="可扩展性评分（0–10）" error={fieldError('expandability_score')}><Input type="number" min={0} max={10} step={1} {...form.register('expandability_score')} /></Field><Field label="状态" error={fieldError('status')}><Controller control={form.control} name="status" render={({ field }) => <Select value={field.value} onValueChange={field.onChange}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent><SelectItem value="active">启用</SelectItem><SelectItem value="archived">归档</SelectItem></SelectContent></Select>} /></Field><Button type="submit" disabled={form.formState.isSubmitting}>{form.formState.isSubmitting ? '保存中…' : '保存'}</Button>
+  </form></SheetContent></Sheet>
 }
+function Field({ label, error, children }: { label: string; error?: string; children: React.ReactNode }) { return <div className="grid gap-2"><Label>{label}</Label>{children}{error && <p className="text-sm text-destructive">{error}</p>}</div> }