feat: initialize shadcn ui

frontend/src/features/design-system/DesignSystemPreview.tsx

@@ -23,7 +23,7 @@ export function DesignSystemPreview() {
             <Button>Primary</Button>
             <Button variant="secondary">Secondary</Button>
             <Button variant="ghost">Ghost</Button>
-            <Button variant="danger">Danger</Button>
+            <Button variant="destructive">Danger</Button>
           </CardContent>
         </Card>
 

frontend/src/features/tickets/TicketCreatePage.tsx

@@ -5,7 +5,7 @@ import { AppPageHeader } from '@/components/app/AppPageHeader'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
-import { Select } from '@/components/ui/select'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Textarea } from '@/components/ui/textarea'
 
 import { createTicket } from './api'
@@ -58,11 +58,16 @@ export function TicketCreatePage() {
               </AppField>
               <div className="grid gap-4 md:grid-cols-2">
                 <AppField label="Priority">
-                  <Select value={form.priority} onChange={(event) => updateField('priority', event.target.value as TicketInput['priority'])}>
-                    <option value="low">Low</option>
-                    <option value="medium">Medium</option>
-                    <option value="high">High</option>
-                    <option value="urgent">Urgent</option>
+                  <Select value={form.priority} onValueChange={(value) => updateField('priority', value as TicketInput['priority'])}>
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="Priority" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="low">Low</SelectItem>
+                      <SelectItem value="medium">Medium</SelectItem>
+                      <SelectItem value="high">High</SelectItem>
+                      <SelectItem value="urgent">Urgent</SelectItem>
+                    </SelectContent>
                   </Select>
                 </AppField>
                 <AppField label="Related System">

frontend/src/features/tickets/TicketListPage.tsx

@@ -7,7 +7,7 @@ import { AppStatusBadge } from '@/components/app/AppStatusBadge'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
-import { Select } from '@/components/ui/select'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { formatDateTime } from '@/lib/format'
 
 import { listTickets } from './api'
@@ -15,12 +15,12 @@ import type { Ticket } from './types'
 
 export function TicketListPage() {
   const [tickets, setTickets] = React.useState<Ticket[]>([])
-  const [status, setStatus] = React.useState('')
+  const [status, setStatus] = React.useState('all')
   const [q, setQ] = React.useState('')
   const [error, setError] = React.useState('')
 
   React.useEffect(() => {
-    listTickets({ status, q })
+    listTickets({ status: status === 'all' ? '' : status, q })
       .then(setTickets)
       .catch((reason: unknown) => setError(reason instanceof Error ? reason.message : '加载失败'))
   }, [status, q])
@@ -35,12 +35,17 @@ export function TicketListPage() {
         />
         <div className="grid gap-2 md:grid-cols-[1fr_180px]">
           <Input onChange={(event) => setQ(event.target.value)} placeholder="Search ticket no or title" value={q} />
-          <Select onChange={(event) => setStatus(event.target.value)} value={status}>
-            <option value="">All statuses</option>
-            <option value="pending">Pending</option>
-            <option value="in_progress">In progress</option>
-            <option value="resolved">Resolved</option>
-            <option value="closed">Closed</option>
+          <Select onValueChange={setStatus} value={status}>
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="All statuses" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All statuses</SelectItem>
+              <SelectItem value="pending">Pending</SelectItem>
+              <SelectItem value="in_progress">In progress</SelectItem>
+              <SelectItem value="resolved">Resolved</SelectItem>
+              <SelectItem value="closed">Closed</SelectItem>
+            </SelectContent>
           </Select>
         </div>
         {error ? <AppEmptyState title="Unable to load tickets" description={error} /> : null}