ai-coding/deploy-ease-platform
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
dengqichen 2025-01-10 13:49:59 +08:00
parent 967c79a618
commit 8a15130a31
1 changed files with 120 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
frontend/src/pages/Deploy/Application/List/components/ApplicationModal.tsx
View File

@ -37,7 +37,7 @@ import {applicationFormSchema, type ApplicationFormValues} from "../schema";
import {Textarea} from "@/components/ui/textarea"; import {Textarea} from "@/components/ui/textarea";
import {Command, CommandEmpty, CommandGroup, CommandInput, CommandItem} from "@/components/ui/command"; import {Command, CommandEmpty, CommandGroup, CommandInput, CommandItem} from "@/components/ui/command";
import {ScrollArea} from "@/components/ui/scroll-area"; import {ScrollArea} from "@/components/ui/scroll-area";
import {Check} from "lucide-react"; import {Check, ChevronDown, Search} from "lucide-react";
import {cn} from "@/lib/utils"; import {cn} from "@/lib/utils";
import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover"; import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
@ -241,6 +241,7 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
)} )}
/> />
<div className="grid grid-cols-2 gap-4">
<FormField <FormField
control={form.control} control={form.control}
name="gitInstanceId" name="gitInstanceId"
@ -248,9 +249,9 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
<FormItem> <FormItem>
<FormLabel>Git实例</FormLabel> <FormLabel>Git实例</FormLabel>
<Select <Select
disabled={isEdit}
onValueChange={(value) => { onValueChange={(value) => {
field.onChange(Number(value)); field.onChange(Number(value));
form.setValue('repositoryGroupId', undefined);
handleGitInstanceChange(Number(value)); handleGitInstanceChange(Number(value));
}} }}
value={field.value?.toString()} value={field.value?.toString()}
@ -261,8 +262,11 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
</SelectTrigger> </SelectTrigger>
</FormControl> </FormControl>
<SelectContent> <SelectContent>
{gitInstances.map(instance => ( {gitInstances.map((instance) => (
<SelectItem key={instance.id} value={instance.id.toString()}> <SelectItem
key={instance.id}
value={instance.id.toString()}
>
{instance.name} {instance.name}
</SelectItem> </SelectItem>
))} ))}
@ -276,41 +280,87 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
<FormField <FormField
control={form.control} control={form.control}
name="repositoryGroupId" name="repositoryGroupId"
render={({field}) => ( render={({field}) => {
const [searchValue, setSearchValue] = React.useState("");
const filteredGroups = repositoryGroups.filter(group =>
group.name.toLowerCase().includes(searchValue.toLowerCase())
);
return (
<FormItem> <FormItem>
<FormLabel>代码仓库组</FormLabel> <FormLabel>代码仓库组</FormLabel>
<Select <Popover>
disabled={!form.watch('gitInstanceId')} <PopoverTrigger asChild>
onValueChange={(value) => {
form.setValue("repositoryGroupId", Number(value));
}}
value={field.value?.toString()}
>
<FormControl> <FormControl>
<SelectTrigger> <Button
<SelectValue variant="outline"
placeholder={!form.watch('gitInstanceId') role="combobox"
disabled={!form.watch('gitInstanceId')}
className={cn(
"w-full justify-between",
!field.value && "text-muted-foreground"
)}
>
{field.value
? repositoryGroups.find(
(group) => group.id === field.value
)?.name
: !form.watch('gitInstanceId')
? "请先选择Git实例" ? "请先选择Git实例"
: "请选择代码仓库组" : "请选择代码仓库组"}
} <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
/> </Button>
</SelectTrigger>
</FormControl> </FormControl>
<SelectContent> </PopoverTrigger>
{repositoryGroups.map((group) => ( <PopoverContent className="w-[--radix-popover-trigger-width] p-0">
<SelectItem <div className="flex items-center border-b px-3">
<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
<input
placeholder="搜索代码仓库组..."
className="flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
/>
</div>
<ScrollArea className="h-[200px]">
{filteredGroups.length === 0 ? (
<div className="p-4 text-center text-sm text-muted-foreground">
未找到代码仓库组
</div>
) : (
filteredGroups.map((group) => (
<div
key={group.id} key={group.id}
value={group.id.toString()} className={cn(
"relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground",
group.id === field.value && "bg-accent text-accent-foreground"
)}
onClick={() => {
form.setValue("repositoryGroupId", group.id);
setSearchValue("");
// 关闭 Popover
const popoverTrigger = document.querySelector('[role="combobox"]');
if (popoverTrigger) {
(popoverTrigger as HTMLElement).click();
}
}}
> >
{group.name} {group.name}
</SelectItem> {group.id === field.value && (
))} <Check className="ml-auto h-4 w-4" />
</SelectContent> )}
</Select> </div>
))
)}
</ScrollArea>
</PopoverContent>
</Popover>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} );
}}
/> />
</div>
<FormField <FormField
control={form.control} control={form.control}