Skip to content

Commit 7a62063

Browse files
safe1inesafe1ine
committed
refactor(ui): refine sidebar and task dialog layout
1 parent e4bea0c commit 7a62063

File tree

3 files changed

+55
-41
lines changed

3 files changed

+55
-41
lines changed

‎frontend/src/components/console/nav/nav-project.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ export default function NavProject() {
124124
const isCollapsed = !isMobile && state === "collapsed"
125125

126126
return (
127-
<SidebarGroup>
127+
<SidebarGroup className="mt-4 p-0">
128128
<CreateDefaultTaskDialog
129129
open={defaultTaskDialogOpen}
130130
onOpenChange={setDefaultTaskDialogOpen}
@@ -179,7 +179,7 @@ export default function NavProject() {
179179
<SidebarMenuItem>
180180
<div
181181
className={cn(
182-
"group/default-row flex w-full items-center gap-1 overflow-hidden rounded-md text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 my-1",
182+
"group/default-row flex w-full items-center gap-1 overflow-hidden rounded-md pl-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 my-1",
183183
isUnlinkedActive && "font-medium text-primary"
184184
)}
185185
>
@@ -295,7 +295,7 @@ export default function NavProject() {
295295
<SidebarMenuItem key={projectId}>
296296
<div
297297
className={cn(
298-
"group/project-row flex w-full items-center gap-1 overflow-hidden rounded-md text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 my-1",
298+
"group/project-row flex w-full items-center gap-1 overflow-hidden rounded-md pl-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 my-1",
299299
isProjectActive && "font-medium text-primary"
300300
)}
301301
>
@@ -409,7 +409,7 @@ export default function NavProject() {
409409
</SidebarMenuButton>
410410
</SidebarMenuItem>
411411
)}
412-
<SidebarMenuItem className="-mx-2 mt-2">
412+
<SidebarMenuItem className="mt-2">
413413
<SidebarMenuButton onClick={() => setAddDialogOpen(true)}>
414414
<IconFolderPlus />
415415
<span>添加项目</span>

‎frontend/src/components/console/nav/user-sidebar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default function UserSidebar({
2222

2323
return (
2424
<Sidebar variant="inset" collapsible="icon" {...props}>
25-
<SidebarHeader>
25+
<SidebarHeader className="p-0">
2626
<SidebarMenu>
2727
<SidebarMenuItem>
2828
<SidebarMenuButton size="lg" asChild>
@@ -40,7 +40,7 @@ export default function UserSidebar({
4040
<SidebarContent>
4141
<NavProject />
4242
</SidebarContent>
43-
<SidebarFooter>
43+
<SidebarFooter className="p-0">
4444
<NavCheckin />
4545
<div className="flex items-stretch gap-2 group-data-[collapsible=icon]:flex-col">
4646
<NavCommunity

‎frontend/src/components/console/task/create-default-task-dialog.tsx‎

Lines changed: 49 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ import { Command, CommandGroup, CommandItem, CommandList } from "@/components/ui
2121
import {
2222
Dialog,
2323
DialogContent,
24-
DialogDescription,
2524
DialogFooter,
2625
DialogHeader,
2726
DialogTitle,
@@ -31,6 +30,8 @@ import {
3130
DropdownMenuContent,
3231
DropdownMenuItem,
3332
DropdownMenuPortal,
33+
DropdownMenuRadioGroup,
34+
DropdownMenuRadioItem,
3435
DropdownMenuSub,
3536
DropdownMenuSubContent,
3637
DropdownMenuSubTrigger,
@@ -536,13 +537,10 @@ export default function CreateDefaultTaskDialog({
536537
}
537538

538539
return (
539-
<Dialog open={open} onOpenChange={onOpenChange}>
540+
<Dialog open={open} onOpenChange={onOpenChange}>
540541
<DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-2xl">
541542
<DialogHeader>
542-
<DialogTitle>新建空项目</DialogTitle>
543-
<DialogDescription>
544-
先完成与任务页一致的选择交互，后续再接实际任务创建。
545-
</DialogDescription>
543+
<DialogTitle>创建任务</DialogTitle>
546544
</DialogHeader>
547545

548546
<div className="space-y-4">
@@ -560,10 +558,10 @@ export default function CreateDefaultTaskDialog({
560558
className="min-h-36 resize-none"
561559
/>
562560

563-
<div className="flex flex-wrap gap-2">
561+
<div className="flex flex-wrap items-center gap-2">
564562
<Popover open={taskTypePopoverOpen} onOpenChange={setTaskTypePopoverOpen}>
565563
<PopoverTrigger asChild>
566-
<Button size="sm" variant="outline" className="rounded-full text-primary hover:text-primary">
564+
<Button size="sm" variant="outline" className="rounded-md text-primary hover:text-primary">
567565
{taskType === ConstsTaskType.TaskTypeDevelop && <><IconTerminal2 /><span>开发</span></>}
568566
{taskType === ConstsTaskType.TaskTypeDesign && <><IconVocabulary /><span>设计</span></>}
569567
{taskType === ConstsTaskType.TaskTypeReview && <><IconBug /><span>审查</span></>}
@@ -645,7 +643,7 @@ export default function CreateDefaultTaskDialog({
645643
size="sm"
646644
variant="outline"
647645
className={cn(
648-
"max-w-[240px] rounded-full",
646+
"max-w-[240px] rounded-md",
649647
selectedRepo && "text-primary hover:text-primary"
650648
)}
651649
>
@@ -862,7 +860,7 @@ export default function CreateDefaultTaskDialog({
862860
size="sm"
863861
variant="outline"
864862
className={cn(
865-
"rounded-full",
863+
"rounded-md",
866864
selectedSkill.length > 0 && "text-primary hover:text-primary"
867865
)}
868866
>
@@ -912,41 +910,57 @@ export default function CreateDefaultTaskDialog({
912910
</Tabs>
913911
</PopoverContent>
914912
</Popover>
915-
</div>
916-
917-
<Separator />
918913

919-
<div className="space-y-4">
920-
<Field>
921-
<FieldLabel>大模型</FieldLabel>
922-
<FieldContent>
923-
<Select value={selectedModelId} onValueChange={setSelectedModelId}>
924-
<SelectTrigger className="w-full">
925-
<SelectValue placeholder="选择大模型" />
926-
</SelectTrigger>
927-
<SelectContent>
928-
{models.map((model) => (
929-
<SelectItem
930-
key={model.id}
931-
value={model.id || ""}
932-
disabled={!canUseModelBySubscription(model, subscription)}
933-
>
914+
<DropdownMenu>
915+
<DropdownMenuTrigger asChild>
916+
<Button
917+
size="sm"
918+
variant="outline"
919+
className="ml-auto max-w-[220px] rounded-md"
920+
>
921+
{selectedModel ? (
922+
<>
923+
<Icon name={getBrandFromModelName(selectedModel.model || "")} className="size-4" />
924+
<span className="truncate">{selectedModel.model}</span>
925+
</>
926+
) : (
927+
<span className="truncate">大模型</span>
928+
)}
929+
<IconChevronDown className="size-3.5 text-muted-foreground" />
930+
</Button>
931+
</DropdownMenuTrigger>
932+
<DropdownMenuContent align="end" className="min-w-[320px]">
933+
<DropdownMenuRadioGroup value={selectedModelId} onValueChange={setSelectedModelId}>
934+
{models.map((model) => (
935+
<DropdownMenuRadioItem
936+
key={model.id}
937+
value={model.id || ""}
938+
disabled={!canUseModelBySubscription(model, subscription)}
939+
className="w-full justify-between gap-3 pr-2 [&>[data-slot=dropdown-menu-radio-item-indicator]]:hidden"
940+
>
941+
<div className="flex min-w-0 items-center gap-2">
934942
<Icon name={getBrandFromModelName(model.model || "")} className="size-4" />
935-
{model.model}
943+
<span className="truncate">{model.model}</span>
944+
</div>
945+
<div className="flex shrink-0 items-center justify-end gap-1.5">
936946
{model.owner?.type !== ConstsOwnerType.OwnerTypePublic && getOwnerTypeBadge(model.owner)}
937947
{model.owner?.type === ConstsOwnerType.OwnerTypePublic && model.is_free === true && (
938948
<Badge className="!text-primary-foreground">免费</Badge>
939949
)}
940950
{model.owner?.type === ConstsOwnerType.OwnerTypePublic && model.access_level === "pro" && (
941951
<Badge variant="secondary">专业版</Badge>
942952
)}
943-
</SelectItem>
944-
))}
945-
</SelectContent>
946-
</Select>
947-
</FieldContent>
948-
</Field>
953+
</div>
954+
</DropdownMenuRadioItem>
955+
))}
956+
</DropdownMenuRadioGroup>
957+
</DropdownMenuContent>
958+
</DropdownMenu>
959+
</div>
949960

961+
<Separator />
962+
963+
<div className="space-y-4">
950964
<Collapsible
951965
open={advancedOptionsOpen}
952966
onOpenChange={setAdvancedOptionsOpen}

0 commit comments

Comments
 (0)