feat: finish ticket create visual experience

frontend/src/features/tickets/TicketCreatePage.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react'
-import { Bot } from 'lucide-react'
+import { AlertCircle, Bot, CheckCircle2, Lightbulb, Send } from 'lucide-react'
 
 import { AppField } from '@/components/app/AppField'
 import { AppPageHeader } from '@/components/app/AppPageHeader'
 import { AppSection } from '@/components/app/AppSection'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -25,6 +26,7 @@ const initialForm: TicketInput = {
 export function TicketCreatePage() {
   const [form, setForm] = React.useState<TicketInput>(initialForm)
   const [error, setError] = React.useState('')
+  const [submitting, setSubmitting] = React.useState(false)
 
   function updateField<Key extends keyof TicketInput>(field: Key, value: TicketInput[Key]) {
     setForm((current) => ({ ...current, [field]: value }))
@@ -33,21 +35,35 @@ export function TicketCreatePage() {
   async function handleSubmit(event: React.FormEvent) {
     event.preventDefault()
     setError('')
+    setSubmitting(true)
     try {
       const ticket = await createTicket(form)
       window.location.hash = `/tickets/${ticket.id}`
     } catch (reason) {
-      setError(reason instanceof Error ? reason.message : '创建失败')
+      setError(reason instanceof Error ? reason.message : '创建工单失败，请检查必填信息或稍后重试。')
+    } finally {
+      setSubmitting(false)
     }
   }
 
   return (
     <main className="min-h-screen bg-background p-6 text-foreground">
-      <div className="mx-auto grid max-w-6xl gap-4">
-        <AppPageHeader title="创建工单" description="记录明确的技术支持请求，便于后续分派、排查和复用方案。" />
+      <div className="mx-auto grid max-w-6xl gap-5">
+        <AppPageHeader
+          title="创建工单"
+          description="记录明确的技术支持请求，便于后续分派、排查和复用方案。"
+        />
         <form className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_340px]" onSubmit={handleSubmit}>
           <div className="grid gap-4">
-            <AppSection title="问题描述" description="请先说明现象、出现时间和可复现条件。">
+            {error ? (
+              <Alert variant="destructive">
+                <AlertCircle className="size-4" />
+                <AlertTitle>创建工单失败</AlertTitle>
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            ) : null}
+
+            <AppSection title="基础信息" description="先说明这张工单要解决什么问题。">
               <AppField label="工单标题">
                 <Input
                   required
@@ -56,18 +72,9 @@ export function TicketCreatePage() {
                   onChange={(event) => updateField('title', event.target.value)}
                 />
               </AppField>
-              <div className="mt-4">
-                <AppField label="问题描述">
-                <Textarea
-                  required
-                  placeholder="请描述影响范围、报错信息、操作步骤和已尝试的处理方式。"
-                  value={form.description}
-                  onChange={(event) => updateField('description', event.target.value)}
-                />
-              </AppField>
-              </div>
             </AppSection>
-            <AppSection title="处理属性" description="用于技术支持人员快速判断优先级和处理路径。">
+
+            <AppSection title="影响与优先级" description="帮助支持团队判断响应顺序和处理风险。">
               <div className="grid gap-4 md:grid-cols-2">
                 <AppField label="优先级">
                   <Select value={form.priority} onValueChange={(value) => updateField('priority', value as TicketInput['priority'])}>
@@ -82,13 +89,6 @@ export function TicketCreatePage() {
                     </SelectContent>
                   </Select>
                 </AppField>
-                <AppField label="关联系统">
-                  <Input
-                    placeholder="例如：CRM、财务系统、数据中台"
-                    value={form.related_system}
-                    onChange={(event) => updateField('related_system', event.target.value)}
-                  />
-                </AppField>
                 <AppField label="影响范围">
                   <Input
                     placeholder="例如：单个用户、某部门、全部用户"
@@ -96,6 +96,18 @@ export function TicketCreatePage() {
                     onChange={(event) => updateField('impact_scope', event.target.value)}
                   />
                 </AppField>
+              </div>
+            </AppSection>
+
+            <AppSection title="环境与系统" description="补充问题发生的系统域和运行环境。">
+              <div className="grid gap-4 md:grid-cols-2">
+                <AppField label="关联系统">
+                  <Input
+                    placeholder="例如：CRM、财务系统、数据中台"
+                    value={form.related_system}
+                    onChange={(event) => updateField('related_system', event.target.value)}
+                  />
+                </AppField>
                 <AppField label="运行环境">
                   <Input
                     placeholder="例如：生产环境、测试环境、Windows 终端"
@@ -105,20 +117,60 @@ export function TicketCreatePage() {
                 </AppField>
               </div>
             </AppSection>
-              {error ? <p className="text-sm text-danger">{error}</p> : null}
-              <div className="flex justify-end">
-              <Button type="submit">提交工单</Button>
+
+            <AppSection title="问题描述" description="请描述现象、出现时间、复现步骤和已尝试的处理方式。">
+              <AppField label="详细描述">
+                <Textarea
+                  required
+                  placeholder="请描述影响范围、报错信息、操作步骤和已尝试的处理方式。"
+                  value={form.description}
+                  onChange={(event) => updateField('description', event.target.value)}
+                />
+              </AppField>
+            </AppSection>
+
+            <AppSection title="提交确认" description="提交后工单会进入待处理队列。">
+              <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+                <div className="flex items-start gap-2 text-sm text-muted-foreground">
+                  <CheckCircle2 className="mt-0.5 size-4" />
+                  <span>请确认标题和问题描述已足够支持技术人员开始排查。</span>
+                </div>
+                <Button type="submit" disabled={submitting}>
+                  <Send className="size-4" />
+                  {submitting ? '提交中...' : '提交工单'}
+                </Button>
               </div>
+            </AppSection>
+          </div>
+
+          <div className="grid content-start gap-4">
+            <AppSection title="建单提示" description="高质量工单能减少来回确认。">
+              <div className="grid gap-3 text-sm text-muted-foreground">
+                <div className="flex gap-2">
+                  <Lightbulb className="mt-0.5 size-4" />
+                  <span>标题建议包含系统、场景和异常现象。</span>
+                </div>
+                <div className="flex gap-2">
+                  <Lightbulb className="mt-0.5 size-4" />
+                  <span>描述中写清楚复现步骤、报错信息和影响范围。</span>
+                </div>
+                <div className="flex gap-2">
+                  <Lightbulb className="mt-0.5 size-4" />
+                  <span>紧急优先级应只用于阻断生产或大范围影响问题。</span>
+                </div>
+              </div>
+            </AppSection>
+
+            <AppSection
+              title="AI 建单辅助"
+              description="后续阶段能力预留"
+              action={<Badge variant="ai"><Bot className="size-3" /> 即将接入</Badge>}
+            >
+              <p className="text-sm text-muted-foreground">
+                后续阶段将接入建单 Agent，用于补全字段、追问缺失信息和推荐相似问题。
+              </p>
+            </AppSection>
           </div>
-          <AppSection
-            title="AI 建单辅助"
-            description="后续阶段能力预留"
-            action={<Badge variant="ai"><Bot className="size-3" /> 即将接入</Badge>}
-          >
-            <p className="text-sm text-muted-foreground">
-              后续阶段将接入建单 Agent，用于补全字段、追问缺失信息和推荐相似问题。
-            </p>
-          </AppSection>
         </form>
       </div>
     </main>