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

190
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,76 +241,126 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
)} )}
/> />
<FormField <div className="grid grid-cols-2 gap-4">
control={form.control} <FormField
name="gitInstanceId" control={form.control}
render={({field}) => ( name="gitInstanceId"
<FormItem> render={({field}) => (
<FormLabel>Git实例</FormLabel> <FormItem>
<Select <FormLabel>Git实例</FormLabel>
disabled={isEdit} <Select
onValueChange={(value) => { onValueChange={(value) => {
field.onChange(Number(value)); field.onChange(Number(value));
handleGitInstanceChange(Number(value)); form.setValue('repositoryGroupId', undefined);
}} handleGitInstanceChange(Number(value));
value={field.value?.toString()} }}
> value={field.value?.toString()}
<FormControl> >
<SelectTrigger> <FormControl>
<SelectValue placeholder="请选择Git实例"/> <SelectTrigger>
</SelectTrigger> <SelectValue placeholder="请选择Git实例"/>
</FormControl> </SelectTrigger>
<SelectContent> </FormControl>
{gitInstances.map(instance => ( <SelectContent>
<SelectItem key={instance.id} value={instance.id.toString()}> {gitInstances.map((instance) => (
{instance.name} <SelectItem
</SelectItem> key={instance.id}
))} value={instance.id.toString()}
</SelectContent> >
</Select> {instance.name}
<FormMessage/> </SelectItem>
</FormItem> ))}
)} </SelectContent>
/> </Select>
<FormMessage/>
</FormItem>
)}
/>
<FormField <FormField
control={form.control} control={form.control}
name="repositoryGroupId" name="repositoryGroupId"
render={({field}) => ( render={({field}) => {
<FormItem> const [searchValue, setSearchValue] = React.useState("");
<FormLabel>代码仓库组</FormLabel> const filteredGroups = repositoryGroups.filter(group =>
<Select group.name.toLowerCase().includes(searchValue.toLowerCase())
disabled={!form.watch('gitInstanceId')} );
onValueChange={(value) => {
form.setValue("repositoryGroupId", Number(value)); return (
}} <FormItem>
value={field.value?.toString()} <FormLabel>代码仓库组</FormLabel>
> <Popover>
<FormControl> <PopoverTrigger asChild>
<SelectTrigger> <FormControl>
<SelectValue <Button
placeholder={!form.watch('gitInstanceId') variant="outline"
? "请先选择Git实例" role="combobox"
: "请选择代码仓库组" disabled={!form.watch('gitInstanceId')}
} className={cn(
/> "w-full justify-between",
</SelectTrigger> !field.value && "text-muted-foreground"
</FormControl> )}
<SelectContent> >
{repositoryGroups.map((group) => ( {field.value
<SelectItem ? repositoryGroups.find(
key={group.id} (group) => group.id === field.value
value={group.id.toString()} )?.name
> : !form.watch('gitInstanceId')
{group.name} ? "请先选择Git实例"
</SelectItem> : "请选择代码仓库组"}
))} <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</SelectContent> </Button>
</Select> </FormControl>
<FormMessage /> </PopoverTrigger>
</FormItem> <PopoverContent className="w-[--radix-popover-trigger-width] p-0">
)} <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}
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.id === field.value && (
<Check className="ml-auto h-4 w-4" />
)}
</div>
))
)}
</ScrollArea>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
);
}}
/>
</div>
<FormField <FormField
control={form.control} control={form.control}