feat(web): workflow import & export

web/src/views/Workflow/components/AddChatVariable/ChatVariableModal.tsx

@@ -1,3 +1,15 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2025-12-30 13:59:36 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-02-28 16:19:26
+ */
+/**
+ * ChatVariableModal Component
+ * 
+ * This component provides a modal for adding or editing chat variables in workflows.
+ * It supports various variable types and provides appropriate input fields based on the selected type.
+ */
 import { forwardRef, useImperativeHandle, useState } from 'react';
 import { Form, Input, Select, InputNumber } from 'antd';
 import { useTranslation } from 'react-i18next';
@@ -8,54 +20,86 @@ import RbModal from '@/components/RbModal'
 
 const FormItem = Form.Item;
 
+/**
+ * Props for ChatVariableModal component
+ */
 interface ChatVariableModalProps {
+  /**
+   * Callback function to refresh variable list
+   * @param {ChatVariable} value - The variable data
+   * @param {number} [editIndex] - Optional index for editing existing variable
+   */
   refresh: (value: ChatVariable, editIndex?: number) => void;
 }
 
+/**
+ * Supported variable types
+ */
 const types = [
-  'string',
-  'number', 
-  'boolean',
+  'string',          // String type
+  'number',          // Number type
+  'boolean',         // Boolean type
+  'object',          // Object type
+  'array[string]',   // Array of strings
+  'array[number]',   // Array of numbers
+  'array[boolean]',  // Array of booleans
+  'array[object]',   // Array of objects
 ]
 
+/**
+ * ChatVariableModal component
+ */
 const ChatVariableModal = forwardRef<ChatVariableModalRef, ChatVariableModalProps>(({
   refresh
 }, ref) => {
   const { t } = useTranslation();
-  const [visible, setVisible] = useState(false);
-  const [form] = Form.useForm<ChatVariable>();
-  const [loading, setLoading] = useState(false)
-  const [editIndex, setEditIndex] = useState<number | undefined>(undefined)
-  const type = Form.useWatch('type', form);
 
-  // 封装取消方法，添加关闭弹窗逻辑
+  // State management
+  const [visible, setVisible] = useState(false);           // Modal visibility
+  const [form] = Form.useForm<ChatVariable>();            // Form instance
+  const [loading, setLoading] = useState(false);           // Loading state
+  const [editIndex, setEditIndex] = useState<number | undefined>(undefined); // Index of variable being edited
+  const type = Form.useWatch('type', form);                // Current selected type
+
+  /**
+   * Handle modal close
+   */
   const handleClose = () => {
     setVisible(false);
     form.resetFields();
-    setLoading(false)
-    setEditIndex(undefined)
+    setLoading(false);
+    setEditIndex(undefined);
   };
 
+  /**
+   * Handle modal open
+   */
   const handleOpen = (variable?: ChatVariable, index?: number) => {
     setVisible(true);
     if (variable) {
-      const { default: _, ...rest } = variable
-      form.setFieldsValue({ ...rest })
-      setEditIndex(index)
+      // Exclude 'default' property and set form values
+      const { default: _, ...rest } = variable;
+      form.setFieldsValue({ ...rest });
+      setEditIndex(index);
     } else {
+      // Reset form for new variable
       form.resetFields();
-      setEditIndex(undefined)
+      setEditIndex(undefined);
     }
   };
-  // 封装保存方法，添加提交逻辑
+
+  /**
+   * Handle save/submit action
+   */
   const handleSave = () => {
     form.validateFields().then((values) => {
-      refresh({ ...values, default: values.defaultValue }, editIndex)
-      handleClose()
-    })
-  }
+      // Create variable with 'default' property mapped from 'defaultValue'
+      refresh({ ...values, default: values.defaultValue }, editIndex);
+      handleClose();
+    });
+  };
 
-  // 暴露给父组件的方法
+  // Expose handleOpen method to parent component via ref
   useImperativeHandle(ref, () => ({
     handleOpen
   }));
@@ -74,6 +118,7 @@ const ChatVariableModal = forwardRef<ChatVariableModalRef, ChatVariableModalProp
         layout="vertical"
         scrollToFirstError={{ behavior: 'instant', block: 'end', focus: true }}
       >
+        {/* Variable name field */}
         <FormItem
           name="name"
           label={t('workflow.config.parameter-extractor.name')}
@@ -84,6 +129,8 @@ const ChatVariableModal = forwardRef<ChatVariableModalRef, ChatVariableModalProp
         >
           <Input placeholder={t('common.enter')} />
         </FormItem>
+        
+        {/* Variable type field */}
         <FormItem
           name="type"
           label={t('workflow.config.parameter-extractor.type')}
@@ -98,6 +145,8 @@ const ChatVariableModal = forwardRef<ChatVariableModalRef, ChatVariableModalProp
             }))}
           />
         </FormItem>
+        
+        {/* Default value field - dynamic based on type */}
         <Form.Item
           name="defaultValue"
           label={t('workflow.config.parameter-extractor.default')}
@@ -119,6 +168,8 @@ const ChatVariableModal = forwardRef<ChatVariableModalRef, ChatVariableModalProp
             : <Input placeholder={t('common.enter')} />
           }
         </Form.Item>
+        
+        {/* Variable description field */}
         <FormItem
           name="description"
           label={t('workflow.config.parameter-extractor.desc')}