refactor: align select composition with shadcn

This commit is contained in:
hailin
2026-07-02 15:28:19 +08:00
parent 37d83c9ac8
commit 2de36c3da6
6 changed files with 46 additions and 32 deletions

View File

@@ -10,7 +10,7 @@ import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
type PreviewRow = { type PreviewRow = {
id: number id: number
@@ -75,9 +75,11 @@ export function DesignSystemPreview() {
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="all">全部状态</SelectItem> <SelectGroup>
<SelectItem value="pending">待处理</SelectItem> <SelectItem value="all">全部状态</SelectItem>
<SelectItem value="in_progress">处理中</SelectItem> <SelectItem value="pending">待处理</SelectItem>
<SelectItem value="in_progress">处理中</SelectItem>
</SelectGroup>
</SelectContent> </SelectContent>
</Select> </Select>
</AppFilterBar> </AppFilterBar>

View File

@@ -7,7 +7,7 @@ import { AppSection } from '@/components/app/AppSection'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert' import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Textarea } from '@/components/ui/textarea' import { Textarea } from '@/components/ui/textarea'
import { getTicket } from '@/features/tickets/api' import { getTicket } from '@/features/tickets/api'
@@ -114,8 +114,10 @@ export function SolutionCreatePage() {
<SelectValue placeholder="选择状态" /> <SelectValue placeholder="选择状态" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="draft">草稿</SelectItem> <SelectGroup>
<SelectItem value="published">发布</SelectItem> <SelectItem value="draft">草稿</SelectItem>
<SelectItem value="published">发布</SelectItem>
</SelectGroup>
</SelectContent> </SelectContent>
</Select> </Select>
</AppField> </AppField>

View File

@@ -9,7 +9,7 @@ import { Badge } from '@/components/ui/badge'
import { Card, CardContent } from '@/components/ui/card' import { Card, CardContent } from '@/components/ui/card'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { formatDateTime } from '@/lib/format' import { formatDateTime } from '@/lib/format'
import { listSolutions } from './api' import { listSolutions } from './api'
@@ -117,9 +117,11 @@ export function SolutionListPage() {
<SelectValue placeholder="全部状态" /> <SelectValue placeholder="全部状态" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="all">全部状态</SelectItem> <SelectGroup>
<SelectItem value="published">已发布</SelectItem> <SelectItem value="all">全部状态</SelectItem>
<SelectItem value="draft">草稿</SelectItem> <SelectItem value="published">已发布</SelectItem>
<SelectItem value="draft">草稿</SelectItem>
</SelectGroup>
</SelectContent> </SelectContent>
</Select> </Select>
</AppFilterBar> </AppFilterBar>

View File

@@ -2,7 +2,7 @@ import * as React from 'react'
import { AppSection } from '@/components/app/AppSection' import { AppSection } from '@/components/app/AppSection'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Textarea } from '@/components/ui/textarea' import { Textarea } from '@/components/ui/textarea'
import { addTicketComment } from './api' import { addTicketComment } from './api'
@@ -37,8 +37,10 @@ export function TicketComments({ ticketId, onCommentAdded }: TicketCommentsProps
<SelectValue placeholder="选择回复类型" /> <SelectValue placeholder="选择回复类型" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="internal">内部备注</SelectItem> <SelectGroup>
<SelectItem value="public">用户可见回复</SelectItem> <SelectItem value="internal">内部备注</SelectItem>
<SelectItem value="public">用户可见回复</SelectItem>
</SelectGroup>
</SelectContent> </SelectContent>
</Select> </Select>
<Textarea <Textarea

View File

@@ -8,7 +8,7 @@ import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { Badge } from '@/components/ui/badge' import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Textarea } from '@/components/ui/textarea' import { Textarea } from '@/components/ui/textarea'
import { createTicket } from './api' import { createTicket } from './api'
@@ -79,10 +79,12 @@ export function TicketCreatePage() {
<SelectValue placeholder="请选择优先级" /> <SelectValue placeholder="请选择优先级" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="low">低</SelectItem> <SelectGroup>
<SelectItem value="medium">中</SelectItem> <SelectItem value="low">低</SelectItem>
<SelectItem value="high">高</SelectItem> <SelectItem value="medium">中</SelectItem>
<SelectItem value="urgent">紧急</SelectItem> <SelectItem value="high">高</SelectItem>
<SelectItem value="urgent">紧急</SelectItem>
</SelectGroup>
</SelectContent> </SelectContent>
</Select> </Select>
</AppField> </AppField>

View File

@@ -3,7 +3,7 @@ import { RotateCcw } from 'lucide-react'
import { AppFilterBar } from '@/components/app/AppFilterBar' import { AppFilterBar } from '@/components/app/AppFilterBar'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
type TicketFilterBarProps = { type TicketFilterBarProps = {
q: string q: string
@@ -43,13 +43,15 @@ export function TicketFilterBar({
<SelectValue placeholder="全部状态" /> <SelectValue placeholder="全部状态" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="all">全部状态</SelectItem> <SelectGroup>
<SelectItem value="pending_info">待补充</SelectItem> <SelectItem value="all">全部状态</SelectItem>
<SelectItem value="pending">待处理</SelectItem> <SelectItem value="pending_info">待补充</SelectItem>
<SelectItem value="in_progress">处理中</SelectItem> <SelectItem value="pending">待处理</SelectItem>
<SelectItem value="pending_confirm">待确认</SelectItem> <SelectItem value="in_progress">处理中</SelectItem>
<SelectItem value="resolved">已解决</SelectItem> <SelectItem value="pending_confirm">待确认</SelectItem>
<SelectItem value="closed">已关闭</SelectItem> <SelectItem value="resolved">已解决</SelectItem>
<SelectItem value="closed">已关闭</SelectItem>
</SelectGroup>
</SelectContent> </SelectContent>
</Select> </Select>
<Select onValueChange={onPriorityChange} value={priority}> <Select onValueChange={onPriorityChange} value={priority}>
@@ -57,11 +59,13 @@ export function TicketFilterBar({
<SelectValue placeholder="全部优先级" /> <SelectValue placeholder="全部优先级" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="all">全部优先级</SelectItem> <SelectGroup>
<SelectItem value="low">低</SelectItem> <SelectItem value="all">全部优先级</SelectItem>
<SelectItem value="medium">中</SelectItem> <SelectItem value="low">低</SelectItem>
<SelectItem value="high">高</SelectItem> <SelectItem value="medium">中</SelectItem>
<SelectItem value="urgent">紧急</SelectItem> <SelectItem value="high">高</SelectItem>
<SelectItem value="urgent">紧急</SelectItem>
</SelectGroup>
</SelectContent> </SelectContent>
</Select> </Select>
<Input <Input