seeder-st2110-components 1.2.6 → 1.2.8

package/dist/index.css

@@ -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.js

@@ -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 => {
@@ -48,6 +48,7 @@ const useHardwareWebSocket = socketUrl => {
     ps_status: systemStatus
   };
 };
+var useHardwareWebSocket$1 = useHardwareWebSocket;
 
 const UsageItem = /*#__PURE__*/memo(_ref => {
   let {
@@ -83,6 +84,7 @@ const UsageItem = /*#__PURE__*/memo(_ref => {
     })]
   });
 });
+var UsageItem$1 = UsageItem;
 
 const getTemperature = (supermicro, sensors) => {
   return supermicro?.cpu_temperature ?? sensors?.temperatures?.coretemp?.[0]?.current;
@@ -100,29 +102,29 @@ const useHardwareUsage = function (ps_status) {
     } = ps_status;
     return /*#__PURE__*/jsxs("div", {
       className: "flex",
-      children: [/*#__PURE__*/jsxs(UsageItem, {
+      children: [/*#__PURE__*/jsxs(UsageItem$1, {
         text: "CPU Usage",
         iconClass: "icon-CPU",
         children: [cpu_percent, "%"]
-      }), /*#__PURE__*/jsxs(UsageItem, {
+      }), /*#__PURE__*/jsxs(UsageItem$1, {
         text: "CPU Temperature",
         iconClass: "icon-wendu",
         children: [getTemperature(supermicro, sensors_temperatures), "\u2103"]
-      }), mem && /*#__PURE__*/jsxs(UsageItem, {
+      }), mem && /*#__PURE__*/jsxs(UsageItem$1, {
         text: "Memory Usage",
         iconClass: "icon-shiyongshuai",
         showRam: showRam,
         ramValue: (mem.total / (1024 * 1024 * 1024)).toFixed(1),
         children: [mem.percent, "%"]
-      }), supermicro?.nic_temperature && /*#__PURE__*/jsxs(UsageItem, {
+      }), supermicro?.nic_temperature && /*#__PURE__*/jsxs(UsageItem$1, {
         text: "NIC Temperature",
         iconClass: "icon-wuliwangka",
         children: [supermicro.nic_temperature, "\u2103"]
-      }), gpu_stats?.length > 0 && /*#__PURE__*/jsx(UsageItem, {
+      }), gpu_stats?.length > 0 && /*#__PURE__*/jsx(UsageItem$1, {
         text: "GPU Usage",
         iconClass: "icon-gpufuwu",
         children: gpu_stats[0]["utilization.gpu"]
-      }), supermicro?.gpu_temperature && /*#__PURE__*/jsxs(UsageItem, {
+      }), supermicro?.gpu_temperature && /*#__PURE__*/jsxs(UsageItem$1, {
         text: "GPU Temperature",
         iconClass: "icon-wendu",
         children: [supermicro.gpu_temperature, "\u2103"]
@@ -130,6 +132,7 @@ const useHardwareUsage = function (ps_status) {
     });
   }, [ps_status]);
 };
+var useHardwareUsage$1 = useHardwareUsage;
 
 const AuthorizationModal = _ref => {
   let {
@@ -219,6 +222,7 @@ const AuthorizationModal = _ref => {
     })
   });
 };
+var AuthorizationModal$1 = AuthorizationModal;
 
 const DEFAULT_AUTH = {
   accredit_status: false,
@@ -292,7 +296,7 @@ const useAuth = options => {
     }
   };
   const modal = showModal && /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(AuthorizationModal, {
+    children: [/*#__PURE__*/jsx(AuthorizationModal$1, {
       onOk: auth,
       onCancel: closeModal,
       authData: authData
@@ -610,6 +614,7 @@ const useUpgrade = _ref => {
   });
   return [upgradeElement];
 };
+var useUpgrade$1 = useUpgrade;
 
 const useSystemOperations = function () {
   let {
@@ -665,6 +670,7 @@ const useSystemOperations = function () {
     handleMenuClick
   };
 };
+var useSystemOperations$1 = useSystemOperations;
 
 const PopoverContent = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -1230,6 +1236,7 @@ const useDirectoryTree = _ref => {
     removeFile
   };
 };
+var useDirectoryTree$1 = useDirectoryTree;
 
 const UpgradeManager = _ref => {
   let {
@@ -1244,7 +1251,7 @@ const UpgradeManager = _ref => {
     children,
     ...dropdownProps
   } = _ref;
-  const [upgradeElement] = useUpgrade({
+  const [upgradeElement] = useUpgrade$1({
     menuItems,
     onMenuClick,
     downloadFiles,
@@ -1274,6 +1281,7 @@ UpgradeManager.defaultProps = {
   trigger: ["hover"],
   placement: "bottomRight"
 };
+var UpgradeManager$1 = UpgradeManager;
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -2551,6 +2559,7 @@ SystemOperations.propTypes = {
   okText: PropTypes.string,
   run: PropTypes.func
 };
+var SystemOperations$1 = SystemOperations;
 
 const defaultFieldConfigs = {
   clock_class: {
@@ -3175,5 +3184,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$1 as AuthorizationModal, NetworkSettingsModal$1 as NetworkSettingsModal, PresetModal, PtpModal$1 as PtpModal, SystemOperations$1 as SystemOperations, UpgradeManager$1 as UpgradeManager, useAuth, useDirectoryTree$1 as useDirectoryTree, useHardwareUsage$1 as useHardwareUsage, useHardwareWebSocket$1 as useHardwareWebSocket, useSystemOperations$1 as useSystemOperations, useUpgrade$1 as useUpgrade };
 //# sourceMappingURL=index.esm.js.map