seeder-st2110-components 1.2.6 → 1.2.7

package/dist/index.js

@@ -3177,8 +3177,479 @@ const NetworkSettingsModal = _ref2 => {
 };
 var NetworkSettingsModal$1 = /*#__PURE__*/react.memo(NetworkSettingsModal);
 
+const LeftList = /*#__PURE__*/react.memo(_ref => {
+  let {
+    dataSource,
+    selectedPresetId,
+    onSelectPreset,
+    onAddNew,
+    onRemove,
+    hasPresets = dataSource.length > 0,
+    showDescription = false,
+    texts = {
+      newButton: "New Preset",
+      removeButton: "Remove"
+    }
+  } = _ref;
+  // 动态计算列布局
+  const gridColumns = showDescription ? "grid-cols-3" : "grid-cols-2";
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "h-full left-list-wrapper",
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "list-container",
+      children: /*#__PURE__*/jsxRuntime.jsx(antd.List, {
+        header: /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: `grid ${gridColumns} w-full list-header`,
+          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+            children: "Name"
+          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+            children: "Create Time"
+          }), showDescription && /*#__PURE__*/jsxRuntime.jsx("div", {
+            children: "Description"
+          })]
+        }),
+        dataSource: dataSource,
+        rowKey: "id",
+        renderItem: item => /*#__PURE__*/jsxRuntime.jsx(antd.List.Item, {
+          className: `list-item ${selectedPresetId === item.id ? 'selected' : ''}`,
+          style: {
+            padding: "9px 24px"
+          },
+          onClick: () => onSelectPreset(item),
+          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: `grid ${gridColumns} w-full text-text-normal`,
+            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+              title: item.name,
+              children: item.name || "Untitled Preset"
+            }), /*#__PURE__*/jsxRuntime.jsx("div", {
+              children: item.create_time
+            }), showDescription && /*#__PURE__*/jsxRuntime.jsx("div", {
+              children: item.description
+            })]
+          })
+        }),
+        locale: {
+          emptyText: /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "p-8",
+            children: /*#__PURE__*/jsxRuntime.jsx(antd.Empty, {
+              image: antd.Empty.PRESENTED_IMAGE_SIMPLE,
+              description: /*#__PURE__*/jsxRuntime.jsx("span", {
+                className: "text-gray-400",
+                children: /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
+                  type: "link",
+                  onClick: onAddNew,
+                  className: "p-0 h-auto",
+                  icon: /*#__PURE__*/jsxRuntime.jsx(icons.PlusOutlined, {}),
+                  children: "Create new preset"
+                })
+              })
+            })
+          })
+        }
+      })
+    }), hasPresets && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "p-4",
+      style: {
+        paddingInline: 24
+      },
+      children: /*#__PURE__*/jsxRuntime.jsxs(antd.Space, {
+        size: "middle",
+        children: [/*#__PURE__*/jsxRuntime.jsx(antd.Button, {
+          type: "default",
+          icon: /*#__PURE__*/jsxRuntime.jsx(icons.PlusOutlined, {}),
+          style: {
+            padding: "20px 12px"
+          },
+          className: "btn-gray",
+          onClick: onAddNew,
+          children: texts.newButton
+        }), /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
+          type: "default",
+          style: {
+            padding: "20px 12px"
+          },
+          className: "btn-gray",
+          onClick: onRemove,
+          children: texts.removeButton
+        })]
+      })
+    })]
+  });
+});
+const SubmitButton = _ref2 => {
+  let {
+    loading,
+    action,
+    children,
+    disabled = false
+  } = _ref2;
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "submit-btn-wrapper",
+    children: /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
+      className: "btn-gray",
+      loading: loading,
+      onClick: action,
+      disabled: disabled,
+      children: children
+    })
+  });
+};
+const RightDetailForm = /*#__PURE__*/react.memo(_ref3 => {
+  let {
+    form,
+    onSave,
+    onLoad,
+    isLoading,
+    isEditing,
+    fields = {
+      name: {
+        label: "Preset Name",
+        placeholder: "Enter preset name",
+        required: true
+      }
+    },
+    texts = {
+      loadButton: "Load",
+      saveButton: "Save"
+    },
+    presetChanged
+  } = _ref3;
+  const [initialSelected, setInitialSelected] = react.useState([]);
+  const currentSelected = antd.Form.useWatch('category_list', form) || [];
+
+  // 检查是否包含category_list字段
+  const hasCategoryList = fields.category_list !== null && fields.category_list !== undefined;
+
+  // 初始化 category_list 的选择状态
+  react.useEffect(() => {
+    if (hasCategoryList) {
+      const currentValue = form.getFieldValue('category_list') || [];
+      setInitialSelected(currentValue);
+    }
+  }, [presetChanged, form, hasCategoryList]); // 当presetChanged变化时更新
+
+  // 动态生成 checkbox 选项
+  const checkboxOptions = react.useMemo(() => {
+    if (!hasCategoryList) return [];
+    return fields.category_list.options.map(category => {
+      const isInitiallySelected = initialSelected.includes(category.name);
+      const shouldDisable = isEditing ? !isInitiallySelected : false;
+      return {
+        ...category,
+        disabled: shouldDisable
+      };
+    });
+  }, [initialSelected, isEditing, hasCategoryList, fields.category_list]);
+  return /*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
+    vertical: true,
+    className: "h-full",
+    children: [/*#__PURE__*/jsxRuntime.jsxs(antd.Form, {
+      form: form,
+      layout: "vertical",
+      autoComplete: "off",
+      style: {
+        flex: 1,
+        overflowY: 'auto'
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx(antd.Form.Item, {
+        name: "name",
+        label: fields.name.label,
+        rules: [{
+          required: fields.name.required,
+          validator: async (_, value) => {
+            if (!value || value.trim() === '') {
+              return Promise.reject(new Error('Preset name cannot be empty or spaces only'));
+            }
+          }
+        }],
+        children: /*#__PURE__*/jsxRuntime.jsx(antd.Input, {
+          placeholder: fields.name.placeholder,
+          disabled: isEditing
+        })
+      }), hasCategoryList && /*#__PURE__*/jsxRuntime.jsx(antd.Form.Item, {
+        name: "category_list",
+        label: fields.category_list.label,
+        rules: [{
+          required: fields.category_list.required,
+          message: 'Please select at least one category',
+          validator: (_, value) => {
+            if (value && value.length > 0) {
+              return Promise.resolve();
+            }
+            return Promise.reject(new Error('Please select at least one category'));
+          }
+        }],
+        children: /*#__PURE__*/jsxRuntime.jsx(antd.Checkbox.Group, {
+          className: "grid grid-cols-2 gap-2",
+          children: checkboxOptions.map(category => /*#__PURE__*/jsxRuntime.jsx(antd.Checkbox, {
+            value: category.name,
+            disabled: category.disabled,
+            children: category.label
+          }, category.name))
+        })
+      }), fields.description && /*#__PURE__*/jsxRuntime.jsx(antd.Form.Item, {
+        name: "description",
+        label: fields.description.label,
+        children: /*#__PURE__*/jsxRuntime.jsx(antd.Input.TextArea, {
+          rows: 4,
+          placeholder: fields.description.placeholder,
+          disabled: isEditing
+        })
+      })]
+    }), isEditing ? /*#__PURE__*/jsxRuntime.jsx(SubmitButton, {
+      action: onLoad,
+      ...(hasCategoryList && {
+        disabled: !currentSelected.length
+      }),
+      children: texts.loadButton
+    }) : /*#__PURE__*/jsxRuntime.jsx(SubmitButton, {
+      action: onSave,
+      loading: isLoading,
+      children: texts.saveButton
+    })]
+  });
+});
+
+const Preset = _ref => {
+  let {
+    open,
+    onClose,
+    // API 方法通过 props 传入
+    getPresetList,
+    savePreset,
+    removePreset,
+    loadPreset,
+    // 字段配置
+    fields = {
+      name: {
+        label: "Preset Name",
+        placeholder: "Enter preset name",
+        required: true
+      }
+    },
+    texts = {
+      title: "Preset Management",
+      emptyText: "Select a preset from the list to view details",
+      deleteConfirm: "Are you sure to delete preset",
+      loadText: "Loading...",
+      successText: "Success",
+      newButton: "New Preset",
+      removeButton: "Remove",
+      loadButton: "Load",
+      saveButton: "Save"
+    },
+    // 样式定制
+    width = 1000,
+    height = 680,
+    className = ""
+  } = _ref;
+  const {
+    message: AntdMessage,
+    modal: AntdModal
+  } = antd.App.useApp();
+  const [presetList, setPresetList] = react.useState([]);
+  const [selectedPreset, setSelectedPreset] = react.useState(null);
+  const [loading, setLoading] = react.useState(false);
+  const [presetChanged, setPresetChanged] = react.useState(0);
+  const [form] = antd.Form.useForm();
+
+  // 获取预设列表
+  react.useEffect(() => {
+    fetchPresetList();
+  }, []);
+  const fetchPresetList = react.useCallback(async () => {
+    try {
+      const data = await getPresetList();
+      if (data?.preset_list) {
+        setPresetList(data.preset_list);
+      }
+    } catch (error) {
+      console.error('Failed to fetch preset list:', error);
+    }
+  }, [getPresetList]);
+  const handleSelectPreset = react.useCallback(preset => {
+    setSelectedPreset(preset);
+    form.setFieldsValue(preset);
+    // setPresetChanged(prev => prev + 1); // 触发更新
+  }, [form]);
+  const handleAddNew = react.useCallback(() => {
+    const unsavedPreset = presetList.find(item => !item.id);
+    if (unsavedPreset) {
+      AntdMessage.warning('Existing unsaved preset detected.');
+      return;
+    }
+
+    // 创建新的数据，包含所有配置的字段
+    const newPreset = Object.keys(fields).reduce((acc, fieldName) => {
+      acc[fieldName] = '';
+      return acc;
+    }, {});
+
+    // 特殊处理 category_list
+    if (fields.category_list?.options) {
+      newPreset.category_list = fields.category_list.options.map(item => item.name);
+    }
+    setPresetList([...presetList, newPreset]);
+    setSelectedPreset(newPreset);
+    form.setFieldsValue(newPreset);
+  }, [form, presetList, AntdMessage]);
+  const handleRemove = react.useCallback(async () => {
+    if (!selectedPreset) return;
+
+    // 检查是否为新建的未保存数据（无id）
+    const isUnsavedPreset = !selectedPreset.id;
+    const presetName = selectedPreset.name || 'Untitled Preset';
+    try {
+      AntdModal.confirm({
+        icon: /*#__PURE__*/jsxRuntime.jsx(icons.ExclamationCircleFilled, {}),
+        title: `${texts.deleteConfirm} "${presetName}"?`,
+        cancelText: 'No',
+        okText: 'Yes',
+        onOk: async () => {
+          if (!isUnsavedPreset) {
+            await removePreset({
+              id: selectedPreset.id
+            });
+            AntdMessage.success(texts.successText);
+            // 刷新列表
+            await fetchPresetList();
+          } else {
+            setPresetList(prev => prev.filter(item => !!item.id));
+          }
+
+          // 重置表单和选择状态
+          setSelectedPreset(null);
+          form.resetFields();
+        }
+      });
+    } catch (error) {
+      console.error('Failed to delete preset:', error);
+    }
+  }, [selectedPreset, form, AntdModal, AntdMessage, fetchPresetList, texts]);
+  const handleLoadPreset = react.useCallback(async () => {
+    if (!selectedPreset?.id) return;
+
+    // 显示加载模态框
+    const modalInstance = antd.Modal.info({
+      title: texts.loadText,
+      content: /*#__PURE__*/jsxRuntime.jsx(antd.Spin, {
+        size: "large",
+        className: "block mx-auto"
+      }),
+      maskClosable: false,
+      okButtonProps: {
+        style: {
+          display: 'none'
+        }
+      }
+    });
+    try {
+      await loadPreset({
+        id: selectedPreset.id,
+        ...(selectedPreset.category_list && {
+          category_list: selectedPreset.category_list
+        })
+      });
+      // 成功时延迟关闭
+      setTimeout(() => {
+        modalInstance.destroy();
+        AntdMessage.success(texts.successText);
+      }, 1000);
+    } catch (error) {
+      console.error('Failed to load preset:', error);
+      modalInstance.destroy();
+    }
+  }, [selectedPreset, loadPreset, texts, AntdMessage]);
+  const handleSave = react.useCallback(async () => {
+    setLoading(true);
+    try {
+      const values = await form.validateFields();
+      console.log('Form values:', values);
+      await savePreset(values);
+      AntdMessage.success(texts.successText);
+      // 刷新列表
+      await fetchPresetList();
+
+      // 重置表单和选择状态
+      setSelectedPreset(null);
+      form.resetFields();
+    } catch (error) {
+      if (error.errorFields) {
+        // 表单验证错误
+        console.error('Form validation failed:', error.errorFields);
+      } else {
+        console.error('Failed to save preset:', error);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, [form, AntdMessage, fetchPresetList, savePreset, texts]);
+  return /*#__PURE__*/jsxRuntime.jsx(antd.Modal, {
+    title: texts.title,
+    width: width,
+    open: open,
+    wrapClassName: `preset-management ${className}`,
+    footer: null,
+    onCancel: onClose,
+    centered: true,
+    styles: {
+      body: {
+        height: `${height}px`
+      }
+    },
+    children: /*#__PURE__*/jsxRuntime.jsxs(antd.Row, {
+      gutter: 0,
+      className: "h-full w-full",
+      children: [/*#__PURE__*/jsxRuntime.jsx(antd.Col, {
+        span: 14,
+        className: "h-full",
+        children: /*#__PURE__*/jsxRuntime.jsx(LeftList, {
+          dataSource: presetList,
+          selectedPresetId: selectedPreset?.id,
+          onSelectPreset: handleSelectPreset,
+          onAddNew: handleAddNew,
+          onRemove: handleRemove,
+          showDescription: !!fields.description // 根据 fields 判断是否显示 description
+          ,
+          texts: {
+            newButton: texts.newButton,
+            removeButton: texts.removeButton
+          }
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(antd.Col, {
+        span: 10,
+        className: "h-full p-6",
+        children: selectedPreset ? /*#__PURE__*/jsxRuntime.jsx(RightDetailForm, {
+          form: form,
+          onSave: handleSave,
+          onLoad: handleLoadPreset,
+          isLoading: loading,
+          isEditing: !!selectedPreset?.id,
+          fields: fields,
+          texts: {
+            loadButton: texts.loadButton,
+            saveButton: texts.saveButton
+          },
+          presetChanged: presetChanged
+        }) : /*#__PURE__*/jsxRuntime.jsx(antd.Flex, {
+          vertical: true,
+          justify: "center",
+          align: "center",
+          className: "h-full text-gray-400",
+          children: /*#__PURE__*/jsxRuntime.jsx(antd.Empty, {
+            image: antd.Empty.PRESENTED_IMAGE_SIMPLE,
+            description: texts.emptyText
+          })
+        })
+      })]
+    })
+  });
+};
+var PresetModal = /*#__PURE__*/react.memo(Preset);
+
 exports.AuthorizationModal = AuthorizationModal;
 exports.NetworkSettingsModal = NetworkSettingsModal$1;
+exports.PresetModal = PresetModal;
 exports.PtpModal = PtpModal$1;
 exports.SystemOperations = SystemOperations;
 exports.UpgradeManager = UpgradeManager;