npm - seeder-st2110-components - Versions diffs - 1.2.6 → 1.2.7 - Mend

seeder-st2110-components 1.2.6 → 1.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.css ADDED Viewed

@@ -0,0 +1 @@

+ .preset-management .w-full{width:100%}.preset-management .h-full{height:100%}.preset-management .h-auto{height:auto}.preset-management .p-0{padding:0}.preset-management .p-4{padding:16px}.preset-management .p-6{padding:24px}.preset-management .p-8{padding:32px}.preset-management .block{display:block}.preset-management .mx-auto{margin-left:auto;margin-right:auto}.preset-management .text-gray-400{color:#9ca3af}.preset-management .text-text-normal{color:#bfbfbf}.preset-management .grid{display:grid}.preset-management .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.preset-management .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.preset-management .ant-modal .ant-modal-content{padding:0}.preset-management .ant-modal-header{padding-block-start:24px;padding-inline:24px}.preset-management .ant-spin-nested-loading{margin-block-start:0}.preset-management .left-list-wrapper{display:flex;flex-direction:column;position:relative}.preset-management .left-list-wrapper:after{background-color:rgba(0,0,0,.3);bottom:0;content:"";display:block;position:absolute;right:0;top:0;width:1px}.preset-management .left-list-wrapper .list-container{flex:1;overflow-y:auto}.preset-management .left-list-wrapper .list-container::-webkit-scrollbar-track-piece{background:#282828;box-shadow:0 1px 1px 0 #282828}.preset-management .left-list-wrapper .list-container::-webkit-scrollbar{width:5px}.preset-management .left-list-wrapper .list-container::-webkit-scrollbar-thumb{background:#141414;border-radius:2em;box-shadow:0 1px 1px 0 #282828}.preset-management .left-list-wrapper .list-header{color:hsla(0,0%,100%,.75);font-weight:500;padding-block:4px;padding-inline:24px}.preset-management .left-list-wrapper .list-item{background-color:transparent;cursor:pointer;transition-duration:.15s;transition-property:background-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}.preset-management .left-list-wrapper .list-item.selected{background-color:hsla(0,0%,100%,.12)}.preset-management .submit-btn-wrapper{bottom:0;left:0;margin-block-start:0;padding:16px 24px;position:absolute;right:0;text-align:right}

package/dist/index.esm.css ADDED Viewed

@@ -0,0 +1 @@

package/dist/index.esm.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { useState, useCallback, useEffect, memo, useMemo, useRef, forwardRef, useContext, createContext } from 'react';
 import { useWebSocket, useInterval } from 'ahooks';
-import { Tooltip, Space, Flex, Divider, App, Modal, Form, Input, Alert, message, Dropdown, Spin, Popover, Button, Popconfirm, Typography, Empty, ConfigProvider, Tree, InputNumber, Badge, Switch, Select } from 'antd';
+import { Tooltip, Space, Flex, Divider, App, Modal, Form, Input, Alert, message, Dropdown, Spin, Popover, Button, Popconfirm, Typography, Empty, ConfigProvider, Tree, InputNumber, Badge, Switch, Select, List, Checkbox, Row, Col } from 'antd';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { LoadingOutlined, ExclamationCircleFilled, FolderOpenOutlined, FolderOutlined } from '@ant-design/icons';
+import { LoadingOutlined, ExclamationCircleFilled, FolderOpenOutlined, FolderOutlined, PlusOutlined } from '@ant-design/icons';
 import axios from 'axios';
 const useHardwareWebSocket = socketUrl => {
@@ -3175,5 +3175,475 @@ const NetworkSettingsModal = _ref2 => {
 };
 var NetworkSettingsModal$1 = /*#__PURE__*/memo(NetworkSettingsModal);
-export { AuthorizationModal, NetworkSettingsModal$1 as NetworkSettingsModal, PtpModal$1 as PtpModal, SystemOperations, UpgradeManager, useAuth, useDirectoryTree, useHardwareUsage, useHardwareWebSocket, useSystemOperations, useUpgrade };
+const LeftList = /*#__PURE__*/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__*/jsxs("div", {
+    className: "h-full left-list-wrapper",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "list-container",
+      children: /*#__PURE__*/jsx(List, {
+        header: /*#__PURE__*/jsxs("div", {
+          className: `grid ${gridColumns} w-full list-header`,
+          children: [/*#__PURE__*/jsx("div", {
+            children: "Name"
+          }), /*#__PURE__*/jsx("div", {
+            children: "Create Time"
+          }), showDescription && /*#__PURE__*/jsx("div", {
+            children: "Description"
+          })]
+        }),
+        dataSource: dataSource,
+        rowKey: "id",
+        renderItem: item => /*#__PURE__*/jsx(List.Item, {
+          className: `list-item ${selectedPresetId === item.id ? 'selected' : ''}`,
+          style: {
+            padding: "9px 24px"
+          },
+          onClick: () => onSelectPreset(item),
+          children: /*#__PURE__*/jsxs("div", {
+            className: `grid ${gridColumns} w-full text-text-normal`,
+            children: [/*#__PURE__*/jsx("div", {
+              title: item.name,
+              children: item.name || "Untitled Preset"
+            }), /*#__PURE__*/jsx("div", {
+              children: item.create_time
+            }), showDescription && /*#__PURE__*/jsx("div", {
+              children: item.description
+            })]
+          })
+        }),
+        locale: {
+          emptyText: /*#__PURE__*/jsx("div", {
+            className: "p-8",
+            children: /*#__PURE__*/jsx(Empty, {
+              image: Empty.PRESENTED_IMAGE_SIMPLE,
+              description: /*#__PURE__*/jsx("span", {
+                className: "text-gray-400",
+                children: /*#__PURE__*/jsx(Button, {
+                  type: "link",
+                  onClick: onAddNew,
+                  className: "p-0 h-auto",
+                  icon: /*#__PURE__*/jsx(PlusOutlined, {}),
+                  children: "Create new preset"
+                })
+              })
+            })
+          })
+        }
+      })
+    }), hasPresets && /*#__PURE__*/jsx("div", {
+      className: "p-4",
+      style: {
+        paddingInline: 24
+      },
+      children: /*#__PURE__*/jsxs(Space, {
+        size: "middle",
+        children: [/*#__PURE__*/jsx(Button, {
+          type: "default",
+          icon: /*#__PURE__*/jsx(PlusOutlined, {}),
+          style: {
+            padding: "20px 12px"
+          },
+          className: "btn-gray",
+          onClick: onAddNew,
+          children: texts.newButton
+        }), /*#__PURE__*/jsx(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__*/jsx("div", {
+    className: "submit-btn-wrapper",
+    children: /*#__PURE__*/jsx(Button, {
+      className: "btn-gray",
+      loading: loading,
+      onClick: action,
+      disabled: disabled,
+      children: children
+    })
+  });
+};
+const RightDetailForm = /*#__PURE__*/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] = useState([]);
+  const currentSelected = Form.useWatch('category_list', form) || [];
+  // 检查是否包含category_list字段
+  const hasCategoryList = fields.category_list !== null && fields.category_list !== undefined;
+  // 初始化 category_list 的选择状态
+  useEffect(() => {
+    if (hasCategoryList) {
+      const currentValue = form.getFieldValue('category_list') || [];
+      setInitialSelected(currentValue);
+    }
+  }, [presetChanged, form, hasCategoryList]); // 当presetChanged变化时更新
+  // 动态生成 checkbox 选项
+  const checkboxOptions = 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__*/jsxs(Flex, {
+    vertical: true,
+    className: "h-full",
+    children: [/*#__PURE__*/jsxs(Form, {
+      form: form,
+      layout: "vertical",
+      autoComplete: "off",
+      style: {
+        flex: 1,
+        overflowY: 'auto'
+      },
+      children: [/*#__PURE__*/jsx(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__*/jsx(Input, {
+          placeholder: fields.name.placeholder,
+          disabled: isEditing
+        })
+      }), hasCategoryList && /*#__PURE__*/jsx(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__*/jsx(Checkbox.Group, {
+          className: "grid grid-cols-2 gap-2",
+          children: checkboxOptions.map(category => /*#__PURE__*/jsx(Checkbox, {
+            value: category.name,
+            disabled: category.disabled,
+            children: category.label
+          }, category.name))
+        })
+      }), fields.description && /*#__PURE__*/jsx(Form.Item, {
+        name: "description",
+        label: fields.description.label,
+        children: /*#__PURE__*/jsx(Input.TextArea, {
+          rows: 4,
+          placeholder: fields.description.placeholder,
+          disabled: isEditing
+        })
+      })]
+    }), isEditing ? /*#__PURE__*/jsx(SubmitButton, {
+      action: onLoad,
+      ...(hasCategoryList && {
+        disabled: !currentSelected.length
+      }),
+      children: texts.loadButton
+    }) : /*#__PURE__*/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
+  } = App.useApp();
+  const [presetList, setPresetList] = useState([]);
+  const [selectedPreset, setSelectedPreset] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [presetChanged, setPresetChanged] = useState(0);
+  const [form] = Form.useForm();
+  // 获取预设列表
+  useEffect(() => {
+    fetchPresetList();
+  }, []);
+  const fetchPresetList = 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 = useCallback(preset => {
+    setSelectedPreset(preset);
+    form.setFieldsValue(preset);
+    // setPresetChanged(prev => prev + 1); // 触发更新
+  }, [form]);
+  const handleAddNew = 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 = useCallback(async () => {
+    if (!selectedPreset) return;
+    // 检查是否为新建的未保存数据（无id）
+    const isUnsavedPreset = !selectedPreset.id;
+    const presetName = selectedPreset.name || 'Untitled Preset';
+    try {
+      AntdModal.confirm({
+        icon: /*#__PURE__*/jsx(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 = useCallback(async () => {
+    if (!selectedPreset?.id) return;
+    // 显示加载模态框
+    const modalInstance = Modal.info({
+      title: texts.loadText,
+      content: /*#__PURE__*/jsx(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 = 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__*/jsx(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__*/jsxs(Row, {
+      gutter: 0,
+      className: "h-full w-full",
+      children: [/*#__PURE__*/jsx(Col, {
+        span: 14,
+        className: "h-full",
+        children: /*#__PURE__*/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__*/jsx(Col, {
+        span: 10,
+        className: "h-full p-6",
+        children: selectedPreset ? /*#__PURE__*/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__*/jsx(Flex, {
+          vertical: true,
+          justify: "center",
+          align: "center",
+          className: "h-full text-gray-400",
+          children: /*#__PURE__*/jsx(Empty, {
+            image: Empty.PRESENTED_IMAGE_SIMPLE,
+            description: texts.emptyText
+          })
+        })
+      })]
+    })
+  });
+};
+var PresetModal = /*#__PURE__*/memo(Preset);
+export { AuthorizationModal, NetworkSettingsModal$1 as NetworkSettingsModal, PresetModal, PtpModal$1 as PtpModal, SystemOperations, UpgradeManager, useAuth, useDirectoryTree, useHardwareUsage, useHardwareWebSocket, useSystemOperations, useUpgrade };
 //# sourceMappingURL=index.esm.js.map