1
This commit is contained in:
dengqichen
parent
fe0004bbac
commit
4ac633d295
138
frontend/src/components/ui/sheet.tsx
Normal file
138
frontend/src/components/ui/sheet.tsx
Normal file
@ -0,0 +1,138 @@
|
||||
import * as React from "react"
|
||||
import * as SheetPrimitive from "@radix-ui/react-dialog"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { X } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Sheet = SheetPrimitive.Root
|
||||
|
||||
const SheetTrigger = SheetPrimitive.Trigger
|
||||
|
||||
const SheetClose = SheetPrimitive.Close
|
||||
|
||||
const SheetPortal = SheetPrimitive.Portal
|
||||
|
||||
const SheetOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Overlay
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
))
|
||||
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
|
||||
|
||||
const sheetVariants = cva(
|
||||
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
||||
{
|
||||
variants: {
|
||||
side: {
|
||||
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
||||
bottom:
|
||||
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
||||
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
|
||||
right:
|
||||
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
side: "right",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
interface SheetContentProps
|
||||
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
|
||||
VariantProps<typeof sheetVariants> {}
|
||||
|
||||
const SheetContent = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Content>,
|
||||
SheetContentProps
|
||||
>(({ side = "right", className, children, ...props }, ref) => (
|
||||
<SheetPortal>
|
||||
<SheetOverlay />
|
||||
<SheetPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(sheetVariants({ side }), className)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</SheetPrimitive.Close>
|
||||
</SheetPrimitive.Content>
|
||||
</SheetPortal>
|
||||
))
|
||||
SheetContent.displayName = SheetPrimitive.Content.displayName
|
||||
|
||||
const SheetHeader = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col space-y-2 text-center sm:text-left",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
SheetHeader.displayName = "SheetHeader"
|
||||
|
||||
const SheetFooter = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
SheetFooter.displayName = "SheetFooter"
|
||||
|
||||
const SheetTitle = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn("text-lg font-semibold text-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SheetTitle.displayName = SheetPrimitive.Title.displayName
|
||||
|
||||
const SheetDescription = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SheetDescription.displayName = SheetPrimitive.Description.displayName
|
||||
|
||||
export {
|
||||
Sheet,
|
||||
SheetPortal,
|
||||
SheetOverlay,
|
||||
SheetTrigger,
|
||||
SheetClose,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetFooter,
|
||||
SheetTitle,
|
||||
SheetDescription,
|
||||
}
|
||||
@ -1,9 +1,27 @@
|
||||
import React, {useEffect} from 'react';
|
||||
import {Drawer, Space, Tabs, TabsProps} from 'antd';
|
||||
import React from 'react';
|
||||
import {Tabs, TabsProps} from 'antd';
|
||||
import {Cell} from '@antv/x6';
|
||||
import {NodeDefinitionResponse} from "@/pages/Workflow/NodeDesign/types";
|
||||
import {BetaSchemaForm} from '@ant-design/pro-form';
|
||||
import {convertJsonSchemaToColumns} from '@/utils/jsonSchemaUtils';
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetFooter,
|
||||
} from "@/components/ui/sheet";
|
||||
import {Button} from "@/components/ui/button";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import {Input} from "@/components/ui/input";
|
||||
import {useForm} from "react-hook-form";
|
||||
import {zodResolver} from "@hookform/resolvers/zod";
|
||||
import * as z from "zod";
|
||||
|
||||
interface NodeConfigDrawerProps {
|
||||
visible: boolean;
|
||||
@ -24,38 +42,51 @@ const NodeConfigDrawer: React.FC<NodeConfigDrawerProps> = ({
|
||||
onOk,
|
||||
onCancel,
|
||||
}) => {
|
||||
const handleSubmit = async (values: any) => {
|
||||
// 创建动态的 schema
|
||||
const createFormSchema = (schema: any) => {
|
||||
if (!schema?.properties) return z.object({});
|
||||
|
||||
const schemaFields: Record<string, any> = {};
|
||||
Object.entries(schema.properties).forEach(([key, property]: [string, any]) => {
|
||||
switch (property.type) {
|
||||
case 'string':
|
||||
schemaFields[key] = property.required ? z.string() : z.string().optional();
|
||||
break;
|
||||
case 'number':
|
||||
schemaFields[key] = property.required ? z.number() : z.number().optional();
|
||||
break;
|
||||
case 'boolean':
|
||||
schemaFields[key] = property.required ? z.boolean() : z.boolean().optional();
|
||||
break;
|
||||
default:
|
||||
schemaFields[key] = z.any();
|
||||
}
|
||||
});
|
||||
return z.object(schemaFields);
|
||||
};
|
||||
|
||||
const panelFormSchema = createFormSchema(nodeDefinition?.panelVariablesSchema);
|
||||
const localFormSchema = createFormSchema(nodeDefinition?.localVariablesSchema);
|
||||
|
||||
const panelForm = useForm<z.infer<typeof panelFormSchema>>({
|
||||
resolver: zodResolver(panelFormSchema),
|
||||
defaultValues: nodeDefinition?.panelVariables || {},
|
||||
});
|
||||
|
||||
const localForm = useForm<z.infer<typeof localFormSchema>>({
|
||||
resolver: zodResolver(localFormSchema),
|
||||
defaultValues: nodeDefinition?.localVariables || {},
|
||||
});
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
// 将表单数据分离为 panelVariables 和 localVariables
|
||||
const panelVariables: Variables = {};
|
||||
const localVariables: Variables = {};
|
||||
|
||||
// 处理 panelVariablesSchema 中定义的字段
|
||||
if (nodeDefinition?.panelVariablesSchema?.properties) {
|
||||
Object.entries(nodeDefinition.panelVariablesSchema.properties).forEach(([key, property]) => {
|
||||
if (values[key] !== undefined) {
|
||||
panelVariables[key] = values[key];
|
||||
} else if (property.default !== undefined) {
|
||||
panelVariables[key] = property.default;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 处理 localVariablesSchema 中定义的字段
|
||||
if (nodeDefinition?.localVariablesSchema?.properties) {
|
||||
Object.entries(nodeDefinition.localVariablesSchema.properties).forEach(([key, property]) => {
|
||||
if (values[key] !== undefined) {
|
||||
localVariables[key] = values[key];
|
||||
} else if (property.default !== undefined) {
|
||||
localVariables[key] = property.default;
|
||||
}
|
||||
});
|
||||
}
|
||||
const panelValues = await panelForm.handleSubmit((data) => data)();
|
||||
const localValues = await localForm.handleSubmit((data) => data)();
|
||||
|
||||
const updatedNodeDefinition = {
|
||||
...nodeDefinition,
|
||||
panelVariables,
|
||||
localVariables
|
||||
panelVariables: panelValues,
|
||||
localVariables: localValues
|
||||
};
|
||||
onOk(updatedNodeDefinition);
|
||||
} catch (error) {
|
||||
@ -63,56 +94,71 @@ const NodeConfigDrawer: React.FC<NodeConfigDrawerProps> = ({
|
||||
}
|
||||
};
|
||||
|
||||
const renderFormFields = (schema: any, form: any) => {
|
||||
if (!schema?.properties) return null;
|
||||
|
||||
return Object.entries(schema.properties).map(([key, property]: [string, any]) => (
|
||||
<FormField
|
||||
key={key}
|
||||
control={form.control}
|
||||
name={key}
|
||||
render={({field}) => (
|
||||
<FormItem>
|
||||
<FormLabel>{property.title || key}</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} placeholder={property.description} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
));
|
||||
};
|
||||
|
||||
const items: TabsProps['items'] = [
|
||||
nodeDefinition?.panelVariablesSchema && {
|
||||
key: 'panel',
|
||||
label: '面板变量',
|
||||
children: (
|
||||
<BetaSchemaForm
|
||||
layoutType="Form"
|
||||
columns={convertJsonSchemaToColumns(nodeDefinition.panelVariablesSchema)}
|
||||
onFinish={handleSubmit}
|
||||
initialValues={nodeDefinition.panelVariables || {}}
|
||||
submitter={false}
|
||||
/>
|
||||
<Form {...panelForm}>
|
||||
<form className="space-y-4">
|
||||
{renderFormFields(nodeDefinition.panelVariablesSchema, panelForm)}
|
||||
</form>
|
||||
</Form>
|
||||
)
|
||||
},
|
||||
nodeDefinition?.localVariablesSchema && {
|
||||
key: 'local',
|
||||
label: '环境变量',
|
||||
children: (
|
||||
<BetaSchemaForm
|
||||
layoutType="Form"
|
||||
columns={convertJsonSchemaToColumns(nodeDefinition.localVariablesSchema)}
|
||||
onFinish={handleSubmit}
|
||||
initialValues={nodeDefinition.localVariables || {}}
|
||||
submitter={false}
|
||||
readonly={true}
|
||||
/>
|
||||
<Form {...localForm}>
|
||||
<form className="space-y-4">
|
||||
{renderFormFields(nodeDefinition.localVariablesSchema, localForm)}
|
||||
</form>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
].filter(Boolean) as TabsProps['items'];
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
title={`编辑节点 - ${nodeDefinition?.nodeName || ''}`}
|
||||
placement="right"
|
||||
width={480}
|
||||
onClose={onCancel}
|
||||
open={visible}
|
||||
>
|
||||
<Sheet open={visible} onOpenChange={(open) => !open && onCancel()}>
|
||||
<SheetContent side="right" className="w-[480px] sm:w-[480px]">
|
||||
<SheetHeader>
|
||||
<SheetTitle>编辑节点 - {nodeDefinition?.nodeName || ''}</SheetTitle>
|
||||
</SheetHeader>
|
||||
<div className="flex-1 overflow-y-auto py-6">
|
||||
<Tabs items={items}/>
|
||||
<div style={{ position: 'absolute', bottom: 0, width: '100%', borderTop: '1px solid #e8e8e8', padding: '10px 16px', textAlign: 'right', left: 0, background: '#fff' }}>
|
||||
<Space>
|
||||
<button onClick={onCancel} className="ant-btn">
|
||||
取消
|
||||
</button>
|
||||
<button onClick={() => document.querySelector('form')?.submit()} className="ant-btn ant-btn-primary">
|
||||
确定
|
||||
</button>
|
||||
</Space>
|
||||
</div>
|
||||
</Drawer>
|
||||
<SheetFooter>
|
||||
<Button variant="outline" onClick={onCancel}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={handleSubmit}>
|
||||
确定
|
||||
</Button>
|
||||
</SheetFooter>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user