feat: redesign ticket workbench ui

frontend/src/features/tickets/TicketCreatePage.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react'
+import { Bot } from 'lucide-react'
 
 import { AppField } from '@/components/app/AppField'
 import { AppPageHeader } from '@/components/app/AppPageHeader'
+import { AppSection } from '@/components/app/AppSection'
+import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Textarea } from '@/components/ui/textarea'
@@ -41,52 +43,83 @@ export function TicketCreatePage() {
 
   return (
     <main className="min-h-screen bg-background p-6 text-foreground">
-      <div className="mx-auto max-w-4xl">
-        <AppPageHeader title="Create Ticket" description="Record a confirmed support request." />
-        <Card className="mt-4">
-          <CardContent>
-            <form className="grid gap-4" onSubmit={handleSubmit}>
-              <AppField label="Title">
-                <Input required value={form.title} onChange={(event) => updateField('title', event.target.value)} />
+      <div className="mx-auto grid max-w-6xl gap-4">
+        <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="请先说明现象、出现时间和可复现条件。">
+              <AppField label="工单标题">
+                <Input
+                  required
+                  placeholder="例如：生产环境登录后跳转失败"
+                  value={form.title}
+                  onChange={(event) => updateField('title', event.target.value)}
+                />
               </AppField>
-              <AppField label="Description">
+              <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="用于技术支持人员快速判断优先级和处理路径。">
               <div className="grid gap-4 md:grid-cols-2">
-                <AppField label="Priority">
+                <AppField label="优先级">
                   <Select value={form.priority} onValueChange={(value) => updateField('priority', value as TicketInput['priority'])}>
                     <SelectTrigger className="w-full">
-                      <SelectValue placeholder="Priority" />
+                      <SelectValue placeholder="请选择优先级" />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="low">Low</SelectItem>
-                      <SelectItem value="medium">Medium</SelectItem>
-                      <SelectItem value="high">High</SelectItem>
-                      <SelectItem value="urgent">Urgent</SelectItem>
+                      <SelectItem value="low">低</SelectItem>
+                      <SelectItem value="medium">中</SelectItem>
+                      <SelectItem value="high">高</SelectItem>
+                      <SelectItem value="urgent">紧急</SelectItem>
                     </SelectContent>
                   </Select>
                 </AppField>
-                <AppField label="Related System">
-                  <Input value={form.related_system} onChange={(event) => updateField('related_system', event.target.value)} />
+                <AppField label="关联系统">
+                  <Input
+                    placeholder="例如：CRM、财务系统、数据中台"
+                    value={form.related_system}
+                    onChange={(event) => updateField('related_system', event.target.value)}
+                  />
                 </AppField>
-                <AppField label="Impact Scope">
-                  <Input value={form.impact_scope} onChange={(event) => updateField('impact_scope', event.target.value)} />
+                <AppField label="影响范围">
+                  <Input
+                    placeholder="例如：单个用户、某部门、全部用户"
+                    value={form.impact_scope}
+                    onChange={(event) => updateField('impact_scope', event.target.value)}
+                  />
                 </AppField>
-                <AppField label="Environment">
-                  <Input value={form.environment} onChange={(event) => updateField('environment', event.target.value)} />
+                <AppField label="运行环境">
+                  <Input
+                    placeholder="例如：生产环境、测试环境、Windows 终端"
+                    value={form.environment}
+                    onChange={(event) => updateField('environment', event.target.value)}
+                  />
                 </AppField>
               </div>
+            </AppSection>
               {error ? <p className="text-sm text-danger">{error}</p> : null}
               <div className="flex justify-end">
-                <Button type="submit">Create</Button>
+              <Button type="submit">提交工单</Button>
               </div>
-            </form>
-          </CardContent>
-        </Card>
+          </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>
   )