seeder-st2110-components 1.6.0 → 1.6.2

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var react = require('react');
+var React = require('react');
 var antd = require('antd');
 var jsxRuntime = require('react/jsx-runtime');
 var ahooks = require('ahooks');
@@ -80,7 +80,7 @@ const formatBytes = function (bytes) {
   const i = Math.floor(Math.log(bytes) / Math.log(k));
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
 };
-const UsageItem = /*#__PURE__*/react.memo(_ref => {
+const UsageItem = /*#__PURE__*/React.memo(_ref => {
   let {
     title,
     iconClass,
@@ -110,8 +110,8 @@ const UsageItem = /*#__PURE__*/react.memo(_ref => {
 var UsageItem$1 = UsageItem;
 
 const useHardwareWebSocket = socketUrl => {
-  const [systemStatus, setSystemStatus] = react.useState();
-  const handleMessage = react.useCallback(message => {
+  const [systemStatus, setSystemStatus] = React.useState();
+  const handleMessage = React.useCallback(message => {
     try {
       if (message) {
         setSystemStatus(prev => _objectSpread2(_objectSpread2({}, prev), message));
@@ -234,7 +234,7 @@ const useHardwareUsage = socketUrl => {
   const {
     ps_status
   } = useHardwareWebSocket$1(socketUrl);
-  return react.useMemo(() => {
+  return React.useMemo(() => {
     if (!ps_status || typeof ps_status !== 'object') return null;
     const statusItems = getItems(getDetail(ps_status));
     return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -266,7 +266,7 @@ const AuthorizationModal = _ref => {
   const {
     message
   } = antd.App.useApp();
-  const [code, setCode] = react.useState('');
+  const [code, setCode] = React.useState('');
   const {
     accredit_status: isActivated,
     message: statusMessage = 'Unactivated',
@@ -360,13 +360,13 @@ const useAuth = options => {
     autoShowModal = true
   } = options || {};
   const [messageApi, contextHolder] = antd.message.useMessage();
-  const [showModal, setShowModal] = react.useState(false); // 默认隐藏
-  const [authData, setAuthData] = react.useState(defaultAuthData);
-  const [isRegistered, setIsRegistered] = react.useState(false);
-  const [loading, setLoading] = react.useState(false);
-  const openModal = react.useCallback(() => setShowModal(true), []);
-  const closeModal = react.useCallback(() => setShowModal(false), []);
-  react.useEffect(() => {
+  const [showModal, setShowModal] = React.useState(false); // 默认隐藏
+  const [authData, setAuthData] = React.useState(defaultAuthData);
+  const [isRegistered, setIsRegistered] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
+  const openModal = React.useCallback(() => setShowModal(true), []);
+  const closeModal = React.useCallback(() => setShowModal(false), []);
+  React.useEffect(() => {
     async function loadAuthInfo() {
       try {
         setLoading(true);
@@ -442,22 +442,22 @@ const useUpgrade = _ref => {
     uploadCompleteDelay = 3000,
     statusPollingInterval = 1000
   } = _ref;
-  const [isSpinning, setIsSpinning] = react.useState(false);
-  const [interval, setInterval] = react.useState(undefined); // 间隔时间，当设置值为 undefined 时会停止计时器
-  const inputRef = react.useRef(null);
-  const [currentStatus, setCurrentStatus] = react.useState('idle'); // 'idle' | 'uploading' | 'upgrading'
-  const isUploadCompleteRef = react.useRef(false); // 安装包上传是否完成
-  const [uploadProgress, setUploadProgress] = react.useState(0);
+  const [isSpinning, setIsSpinning] = React.useState(false);
+  const [interval, setInterval] = React.useState(undefined); // 间隔时间，当设置值为 undefined 时会停止计时器
+  const inputRef = React.useRef(null);
+  const [currentStatus, setCurrentStatus] = React.useState('idle'); // 'idle' | 'uploading' | 'upgrading'
+  const isUploadCompleteRef = React.useRef(false); // 安装包上传是否完成
+  const [uploadProgress, setUploadProgress] = React.useState(0);
 
   // 分别创建独立的取消令牌
-  const uploadCancelToken = react.useRef(axios.CancelToken.source());
-  const statusCancelToken = react.useRef(axios.CancelToken.source());
+  const uploadCancelToken = React.useRef(axios.CancelToken.source());
+  const statusCancelToken = React.useRef(axios.CancelToken.source());
   const showLoader = () => setIsSpinning(true);
   const hideLoader = () => setIsSpinning(false);
 
   // 构建菜单项 - 确保至少包含download和upload
   // 构建菜单项 - 最终完美版本
-  const finalMenuItems = react.useMemo(() => {
+  const finalMenuItems = React.useMemo(() => {
     const hasDownload = menuItems.some(item => item.key === 'download');
     const hasUpload = menuItems.some(item => item.key === 'upload');
     if (hasDownload && hasUpload) {
@@ -694,7 +694,7 @@ const useUpgrade = _ref => {
   ahooks.useInterval(fetchUpgradeStatus, interval);
 
   // 组件卸载时清理
-  react.useEffect(() => {
+  React.useEffect(() => {
     return () => {
       uploadCancelToken.current.cancel();
       statusCancelToken.current.cancel();
@@ -748,7 +748,7 @@ const useSystemOperations = function () {
   const {
     modal: AntdModal
   } = antd.App.useApp();
-  const doAction = react.useCallback(action => {
+  const doAction = React.useCallback(action => {
     try {
       AntdModal.confirm({
         icon: /*#__PURE__*/jsxRuntime.jsx(icons.ExclamationCircleFilled, {}),
@@ -772,14 +772,14 @@ const useSystemOperations = function () {
       console.error("".concat(action.toUpperCase(), " ERROR: "), error);
     }
   }, [AntdModal, confirmTitle, cancelText, okText, onPowerOff, onRestart]);
-  const getMenuItems = react.useCallback(() => [{
+  const getMenuItems = React.useCallback(() => [{
     key: "poweroff",
     label: "Power Off"
   }, {
     key: "restart",
     label: "Restart"
   }], []);
-  const handleMenuClick = react.useCallback(_ref => {
+  const handleMenuClick = React.useCallback(_ref => {
     let {
       key
     } = _ref;
@@ -881,15 +881,15 @@ const NetworkSettingsModal = _ref2 => {
     modal
   } = antd.App.useApp();
   const [form] = antd.Form.useForm();
-  const [st2110Interfaces, setSt2110Interfaces] = react.useState([]);
-  const [lanConfigs, setLanConfigs] = react.useState([]);
-  const [submitLoading, setSubmitLoading] = react.useState(false);
-  const [isInitialized, setIsInitialized] = react.useState(false);
-  const initializationStatus = react.useRef({
+  const [st2110Interfaces, setSt2110Interfaces] = React.useState([]);
+  const [lanConfigs, setLanConfigs] = React.useState([]);
+  const [submitLoading, setSubmitLoading] = React.useState(false);
+  const [isInitialized, setIsInitialized] = React.useState(false);
+  const initializationStatus = React.useRef({
     hasFetched: false,
     hasInitialized: false
   });
-  const preparedFieldConfig = react.useMemo(() => {
+  const preparedFieldConfig = React.useMemo(() => {
     const config = _objectSpread2({}, fieldConfig);
 
     // 确保LAN和QSFP的配置存在
@@ -907,7 +907,7 @@ const NetworkSettingsModal = _ref2 => {
     }
     return config;
   }, [fieldConfig, showNetmask, sections]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!open) return;
     const fetchData = async () => {
       if (initializationStatus.current.hasFetched) return;
@@ -954,7 +954,7 @@ const NetworkSettingsModal = _ref2 => {
   }, [open, getLanConfig, getSysConfig, sections]);
 
   // 当模态框关闭时重置状态
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!open) {
       setIsInitialized(false);
       setLanConfigs([]);
@@ -968,7 +968,7 @@ const NetworkSettingsModal = _ref2 => {
   }, [open, form]);
 
   // 动态初始值配置
-  const initialValues = react.useMemo(() => {
+  const initialValues = React.useMemo(() => {
     const values = {};
     if (sections.includes('LAN') && lanConfigs.length > 0) {
       values.LAN = lanConfigs.map(config => _objectSpread2({
@@ -993,13 +993,13 @@ const NetworkSettingsModal = _ref2 => {
   }, [lanConfigs, st2110Interfaces, sections, showNetmask]);
 
   // 当初始值准备好后设置表单值
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (isInitialized && !initializationStatus.current.hasInitialized) {
       form.setFieldsValue(initialValues);
       initializationStatus.current.hasInitialized = true;
     }
   }, [isInitialized, form, initialValues]);
-  const handleSuccess = react.useCallback(async function () {
+  const handleSuccess = React.useCallback(async function () {
     let {
       messageText = 'Success',
       isPopup = !!restart,
@@ -1039,7 +1039,7 @@ const NetworkSettingsModal = _ref2 => {
     }
     onClose();
   }, [message, modal, getSysConfig, restart, getConfig, sections, onClose]);
-  const handleSubmit = react.useCallback(async () => {
+  const handleSubmit = React.useCallback(async () => {
     setSubmitLoading(true);
     try {
       const values = await form.validateFields();
@@ -1088,16 +1088,13 @@ const NetworkSettingsModal = _ref2 => {
       const allSucceeded = results.every(result => result.status === 'fulfilled');
       if (allSucceeded) {
         handleSuccess();
-      } else {
-        message.error('Some configurations failed to update');
       }
     } catch (error) {
       console.error('Failed to update configurations: ', error);
-      message.error('Failed to update configurations');
     } finally {
       setSubmitLoading(false);
     }
-  }, [form, sections, lanConfigs, st2110Interfaces, updateLanConfig, updateSysConfig, handleSuccess, message]);
+  }, [form, sections, lanConfigs, st2110Interfaces, updateLanConfig, updateSysConfig, handleSuccess]);
 
   // 合并默认模态框属性和传入的属性
   const mergedModalProps = _objectSpread2({
@@ -1150,7 +1147,7 @@ const NetworkSettingsModal = _ref2 => {
     })), restartRemark]
   }));
 };
-var NetworkSettingsModal$1 = /*#__PURE__*/react.memo(NetworkSettingsModal);
+var NetworkSettingsModal$1 = /*#__PURE__*/React.memo(NetworkSettingsModal);
 
 const defaultFieldConfigs = {
   clock_class: {
@@ -1276,12 +1273,12 @@ const PtpModal = _ref => {
     modalProps = {},
     formProps = {}
   } = _ref;
-  const [ptpStatus, setPtpStatus] = react.useState(null);
+  const [ptpStatus, setPtpStatus] = React.useState(null);
   const [form] = antd.Form.useForm();
   const {
     message
   } = antd.App.useApp();
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (open) {
       getPtpInfo().then(data => {
         if (data !== null && data !== void 0 && data[0]) {
@@ -1291,7 +1288,7 @@ const PtpModal = _ref => {
       });
     }
   }, [open, form, getPtpInfo]);
-  const ptpStatusArray = react.useMemo(() => {
+  const ptpStatusArray = React.useMemo(() => {
     if (!ptpStatus) return [];
     return convertPtpStatusToArray(ptpStatus, fieldConfigs, fieldOrder);
   }, [ptpStatus]);
@@ -1396,9 +1393,9 @@ const PtpModal = _ref => {
     }))
   }));
 };
-var PtpModal$1 = /*#__PURE__*/react.memo(PtpModal);
+var PtpModal$1 = /*#__PURE__*/React.memo(PtpModal);
 
-const LeftList = /*#__PURE__*/react.memo(_ref => {
+const LeftList = /*#__PURE__*/React.memo(_ref => {
   let {
     dataSource,
     selectedPresetId,
@@ -1409,7 +1406,7 @@ const LeftList = /*#__PURE__*/react.memo(_ref => {
     showDescription = false,
     texts = {
       newButton: "New Preset",
-      removeButton: "Remove"
+      removeButton: "Delete"
     }
   } = _ref;
   // 动态计算列布局
@@ -1420,7 +1417,7 @@ const LeftList = /*#__PURE__*/react.memo(_ref => {
       className: "list-container",
       children: /*#__PURE__*/jsxRuntime.jsx(antd.List, {
         header: /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: "grid ".concat(gridColumns, " w-full list-header"),
+          className: "grid ".concat(gridColumns, " gap-2 w-full list-header"),
           children: [/*#__PURE__*/jsxRuntime.jsx("div", {
             children: "Name"
           }), /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -1438,14 +1435,27 @@ const LeftList = /*#__PURE__*/react.memo(_ref => {
           },
           onClick: () => onSelectPreset(item),
           children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-            className: "grid ".concat(gridColumns, " w-full text-text-normal"),
+            className: "grid ".concat(gridColumns, " gap-2 w-full text-text-normal"),
             children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-              title: item.name,
-              children: item.name || "Untitled Preset"
+              className: "min-w-0",
+              children: /*#__PURE__*/jsxRuntime.jsx(antd.Typography.Text, {
+                ellipsis: true,
+                title: item.name,
+                children: item.name || "Untitled Preset"
+              })
             }), /*#__PURE__*/jsxRuntime.jsx("div", {
-              children: item.create_time
+              className: "min-w-0",
+              children: /*#__PURE__*/jsxRuntime.jsx(antd.Typography.Text, {
+                ellipsis: true,
+                children: item.create_time
+              })
             }), showDescription && /*#__PURE__*/jsxRuntime.jsx("div", {
-              children: item.description
+              className: "min-w-0",
+              children: /*#__PURE__*/jsxRuntime.jsx(antd.Typography.Text, {
+                ellipsis: true,
+                title: item.description,
+                children: item.description
+              })
             })]
           })
         }),
@@ -1461,7 +1471,7 @@ const LeftList = /*#__PURE__*/react.memo(_ref => {
                   onClick: onAddNew,
                   className: "p-0 h-auto",
                   icon: /*#__PURE__*/jsxRuntime.jsx(icons.PlusOutlined, {}),
-                  children: "Create new preset"
+                  children: "Create New Preset"
                 })
               })
             })
@@ -1477,18 +1487,16 @@ const LeftList = /*#__PURE__*/react.memo(_ref => {
         size: "middle",
         children: [/*#__PURE__*/jsxRuntime.jsx(antd.Button, {
           type: "default",
-          icon: /*#__PURE__*/jsxRuntime.jsx(icons.PlusOutlined, {}),
-          style: {
-            padding: "20px 12px"
-          },
+          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"
-          },
+          type: "default"
+          // style={{ padding: "20px 12px" }}
+          ,
           className: "btn-gray",
           onClick: onRemove,
           children: texts.removeButton
@@ -1515,7 +1523,7 @@ const SubmitButton = _ref2 => {
     })
   });
 };
-const RightDetailForm = /*#__PURE__*/react.memo(_ref3 => {
+const RightDetailForm = /*#__PURE__*/React.memo(_ref3 => {
   let {
     form,
     onSave,
@@ -1525,8 +1533,8 @@ const RightDetailForm = /*#__PURE__*/react.memo(_ref3 => {
     originalPresetData,
     fields = {
       name: {
-        label: "Preset Name",
-        placeholder: "Enter preset name",
+        label: "Name",
+        placeholder: "Please enter name",
         required: true
       }
     },
@@ -1534,16 +1542,16 @@ const RightDetailForm = /*#__PURE__*/react.memo(_ref3 => {
       loadButton: "Load",
       saveButton: "Save"
     },
-    presetChanged
+    presetChanged // 作用：在切换选中预设时强制触发 Checkbox 的重新初始化
   } = _ref3;
-  const [initialSelected, setInitialSelected] = react.useState([]);
+  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(() => {
+  React.useEffect(() => {
     if (hasCategoryList) {
       const currentValue = form.getFieldValue('category_list') || [];
       setInitialSelected(currentValue);
@@ -1551,7 +1559,7 @@ const RightDetailForm = /*#__PURE__*/react.memo(_ref3 => {
   }, [presetChanged, form, hasCategoryList]); // 当presetChanged变化时更新
 
   // 动态生成 checkbox 选项
-  const checkboxOptions = react.useMemo(() => {
+  const checkboxOptions = React.useMemo(() => {
     if (!hasCategoryList) return [];
     return fields.category_list.options.map(category => {
       const isInitiallySelected = initialSelected.includes(category.name);
@@ -1594,32 +1602,40 @@ const RightDetailForm = /*#__PURE__*/react.memo(_ref3 => {
       },
       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'));
-            }
-          }
-        }],
+        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'));
+        //       }
+        //     }
+        //   }
+        // ]}
+        ,
+        required: true,
         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'));
-          }
-        }],
+        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'));
+        //     }
+        //   }
+        // ]}
+        ,
+        required: true,
         children: /*#__PURE__*/jsxRuntime.jsx(antd.Checkbox.Group, {
           className: "grid grid-cols-2 gap-2",
           onChange: handleCheckboxChange,
@@ -1635,7 +1651,10 @@ const RightDetailForm = /*#__PURE__*/react.memo(_ref3 => {
         children: /*#__PURE__*/jsxRuntime.jsx(antd.Input.TextArea, {
           rows: 4,
           placeholder: fields.description.placeholder,
-          disabled: isEditing
+          disabled: isEditing,
+          style: {
+            resize: 'none'
+          }
         })
       })]
     }), isEditing ? /*#__PURE__*/jsxRuntime.jsx(SubmitButton, _objectSpread2(_objectSpread2({
@@ -1668,20 +1687,20 @@ const Preset = _ref => {
     // 字段配置
     fields = {
       name: {
-        label: "Preset Name",
-        placeholder: "Enter preset name",
+        label: "Name",
+        placeholder: "Please enter name",
         required: true
       }
     },
     texts = {
       title: "Preset Management",
       emptyText: "Select a preset from the list to view details",
-      deleteConfirm: "Are you sure to delete preset",
+      deleteConfirm: "Are you sure you want to delete preset",
       loadConfirm: "Are you sure you want to load preset",
       loadText: "Loading...",
       successText: "Success",
       newButton: "New Preset",
-      removeButton: "Remove",
+      removeButton: "Delete",
       loadButton: "Load",
       saveButton: "Save"
     },
@@ -1694,31 +1713,34 @@ const Preset = _ref => {
     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 [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 () => {
+  const fetchPresetList = React.useCallback(async () => {
     try {
       const data = await getPresetList();
       const presets = (data === null || data === void 0 ? void 0 : data.preset_list) || data || [];
       setPresetList(presets);
+
+      // 自动选中第一个预设
+      if (presets.length > 0) {
+        const firstPreset = presets[0];
+        setSelectedPreset(firstPreset);
+        form.setFieldsValue(firstPreset);
+        setPresetChanged(prev => prev + 1);
+      }
     } catch (error) {
       console.error('Failed to fetch preset list:', error);
     }
   }, [getPresetList]);
-  const handleSelectPreset = react.useCallback(preset => {
+  const handleSelectPreset = React.useCallback(preset => {
     setSelectedPreset(preset);
     form.setFieldsValue(preset);
-    setPresetChanged(prev => prev + 1); // 触发react更新
+    setPresetChanged(prev => prev + 1);
   }, [form]);
-  const handleAddNew = react.useCallback(() => {
+  const handleAddNew = React.useCallback(() => {
     var _fields$category_list;
     const unsavedPreset = presetList.find(item => !item.id);
     if (unsavedPreset) {
@@ -1740,7 +1762,7 @@ const Preset = _ref => {
     setSelectedPreset(newPreset);
     form.setFieldsValue(newPreset);
   }, [form, presetList, AntdMessage]);
-  const handleRemove = react.useCallback(async () => {
+  const handleRemove = React.useCallback(async () => {
     if (!selectedPreset) return;
 
     // 检查是否为新建的未保存数据（无id）
@@ -1754,18 +1776,44 @@ const Preset = _ref => {
         cancelText: 'No',
         okText: 'Yes',
         onOk: async () => {
+          // 在删除前记录当前选中项的位置
+          const currentIndex = presetList.findIndex(item => isUnsavedPreset ? !item.id : item.id === selectedPreset.id);
           if (!isUnsavedPreset) {
             await removePreset({
               id: selectedPreset.id
             });
             AntdMessage.success(texts.successText);
-            // 刷新列表
-            await fetchPresetList();
           } else {
+            // 移除未保存的预设
             setPresetList(prev => prev.filter(item => !!item.id));
           }
 
-          // 重置表单和选择状态
+          // 获取删除后的列表
+          const updatedList = isUnsavedPreset ? presetList.filter(item => !!item.id) : await getPresetList().then(data => (data === null || data === void 0 ? void 0 : data.preset_list) || data || []);
+
+          // 更新列表
+          setPresetList(updatedList);
+          if (updatedList.length > 0) {
+            // 计算下一个索引
+            let nextIndex = 0;
+            if (currentIndex > 0) {
+              // 如果删除的不是最后一项
+              if (currentIndex < updatedList.length) {
+                nextIndex = currentIndex; // 保持相同位置
+              } else {
+                nextIndex = updatedList.length - 1; // 选最后一个
+              }
+            }
+            const nextPreset = updatedList[nextIndex];
+            if (nextPreset) {
+              setSelectedPreset(nextPreset);
+              form.setFieldsValue(nextPreset);
+              setPresetChanged(prev => prev + 1);
+              return;
+            }
+          }
+
+          // 列表为空
           setSelectedPreset(null);
           form.resetFields();
         }
@@ -1773,8 +1821,8 @@ const Preset = _ref => {
     } catch (error) {
       console.error('Failed to delete preset:', error);
     }
-  }, [selectedPreset, form, AntdModal, AntdMessage, fetchPresetList, texts]);
-  const handleLoadPreset = react.useCallback(async loadData => {
+  }, [selectedPreset, form, AntdModal, AntdMessage, texts, removePreset, getPresetList]);
+  const handleLoadPreset = React.useCallback(async loadData => {
     if (!loadData) return;
 
     // 显示确认对话框
@@ -1826,30 +1874,56 @@ const Preset = _ref => {
       }
     });
   }, [loadPreset, texts, AntdMessage, AntdModal, onLoadSuccess, onLoadError]);
-  const handleSave = react.useCallback(async () => {
+  const handleSave = React.useCallback(async () => {
     setLoading(true);
     try {
-      const values = await form.validateFields();
-      console.log('Form values:', values);
+      var _fields$name, _fields$category_list2;
+      const values = await form.getFieldsValue();
+
+      // 验证预设名称
+      if ((_fields$name = fields.name) !== null && _fields$name !== void 0 && _fields$name.required) {
+        if (!values.name || values.name.trim() === '') {
+          AntdMessage.error('Name is required.');
+          return; // 直接返回 不执行
+        }
+      }
+
+      // 验证分类列表
+      if ((_fields$category_list2 = fields.category_list) !== null && _fields$category_list2 !== void 0 && _fields$category_list2.required) {
+        if (!values.category_list || values.category_list.length === 0) {
+          AntdMessage.error('No category selected.');
+          return;
+        }
+      }
       await savePreset(values);
       AntdMessage.success(texts.successText);
+      const savedPresetName = values.name;
+
       // 刷新列表
-      await fetchPresetList();
+      const data = await getPresetList();
+      const presets = (data === null || data === void 0 ? void 0 : data.preset_list) || data || [];
+      setPresetList(presets);
 
-      // 重置表单和选择状态
-      setSelectedPreset(null);
-      form.resetFields();
-    } catch (error) {
-      if (error.errorFields) {
-        // 表单验证错误
-        console.error('Form validation failed:', error.errorFields);
+      // 在刷新后的列表中查找同名的预设
+      const newlySavedPreset = presets.find(item => item.name === savedPresetName);
+      if (newlySavedPreset) {
+        setSelectedPreset(newlySavedPreset);
+        form.setFieldsValue(newlySavedPreset);
+        setPresetChanged(prev => prev + 1);
       } else {
-        console.error('Failed to save preset:', error);
+        setSelectedPreset(values);
       }
+    } catch (error) {
+      console.error('Failed to save preset:', error);
     } finally {
       setLoading(false);
     }
-  }, [form, AntdMessage, fetchPresetList, savePreset, texts]);
+  }, [form, AntdMessage, texts, savePreset, getPresetList]);
+
+  // 初始化数据
+  React.useEffect(() => {
+    fetchPresetList();
+  }, [fetchPresetList]);
   return /*#__PURE__*/jsxRuntime.jsx(antd.Modal, {
     title: texts.title,
     width: width,
@@ -1913,9 +1987,9 @@ const Preset = _ref => {
     })
   });
 };
-var PresetModal = /*#__PURE__*/react.memo(Preset);
+var PresetModal = /*#__PURE__*/React.memo(Preset);
 
-const _excluded = ["menuItems", "onMenuClick", "downloadFiles", "upgradeExecute", "upgradeStatus", "acceptFileTypes", "uploadCompleteDelay", "statusPollingInterval", "children"];
+const _excluded$1 = ["menuItems", "onMenuClick", "downloadFiles", "upgradeExecute", "upgradeStatus", "acceptFileTypes", "uploadCompleteDelay", "statusPollingInterval", "children"];
 const UpgradeManager = _ref => {
   let {
       menuItems = [],
@@ -1928,7 +2002,7 @@ const UpgradeManager = _ref => {
       statusPollingInterval = 1000,
       children
     } = _ref,
-    dropdownProps = _objectWithoutProperties(_ref, _excluded);
+    dropdownProps = _objectWithoutProperties(_ref, _excluded$1);
   const [upgradeElement] = useUpgrade$1({
     menuItems,
     onMenuClick,
@@ -3323,7 +3397,9 @@ const CommonHeader = _ref => {
     getSocketUrl = defaultGetSocketUrl,
     logoProps = {},
     className = '',
-    style = {}
+    style = {},
+    // 新增插槽
+    leftContent // 左侧额外内容
   } = _ref;
   const [logo] = useSpaLogo$1(logoProps);
 
@@ -3353,7 +3429,7 @@ const CommonHeader = _ref => {
           },
           children: productInfo.version
         })]
-      })]
+      }), leftContent]
     }), /*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
       align: "center",
       gap: 10,
@@ -3397,8 +3473,324 @@ CommonHeader.propTypes = {
 };
 var CommonHeader$1 = CommonHeader;
 
+const _excluded = ["value", "min", "max", "className", "disablePointerLock", "modifierKeys", "decimalPlaces", "onChange", "onDragStart", "onDragEnd", "style"];
+
+// 默认配置
+const DEFAULT_DECIMAL_PLACES = 2;
+
+// src/react/defaults-and-utils.ts
+// eslint-disable-next-line no-var
+var defaultModifiers = {
+  default: {
+    multiplier: 1,
+    sensitivity: 1
+  }
+  // ctrlKey: { multiplier: 1, sensitivity: 1 },
+  // shiftKey: { multiplier: 10, sensitivity: 0.5 },
+  // metaKey: { multiplier: 1, sensitivity: 1 },
+  // altKey: { multiplier: 1, sensitivity: 1 }
+};
+
+// multiplier: 控制每次鼠标移动时数值变化的基本单位 multiplier: 1- 鼠标移动1像素，值变化1 multiplier: 10- 鼠标移动1像素，值变化10
+// sensitivity: 控制数值变化的灵敏度 sensitivity: 1- 正常灵敏度 sensitivity: 0.5- 减半灵敏度，需要移动2像素才能产生正常1像素的效果
+
+// 修改 formatNumber 函数，强制显示1位小数
+function formatNumber(value) {
+  let decimalPlaces = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_DECIMAL_PLACES;
+  return new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: decimalPlaces,
+    maximumFractionDigits: decimalPlaces,
+    useGrouping: false
+  }).format(value);
+}
+function handleArrow(e, multiplier, value) {
+  if (e.key === "ArrowUp") {
+    return value + multiplier;
+  }
+  if (e.key === "ArrowDown") {
+    return value - multiplier;
+  }
+  return value;
+}
+
+// eslint-disable-next-line no-var
+var DragCursor = _ref => {
+  let {
+    cursorPosition
+  } = _ref;
+  return /* @__PURE__ */React.createElement("div", {
+    style: {
+      position: "fixed",
+      left: 0,
+      top: 0,
+      width: "100vw",
+      height: "100vh",
+      pointerEvents: "none"
+    }
+  }, /* @__PURE__ */React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    style: {
+      position: "absolute",
+      left: cursorPosition.x,
+      top: cursorPosition.y,
+      transform: "translate(-50%, -50%)",
+      pointerEvents: "none"
+    }
+  }, /* @__PURE__ */React.createElement("path", {
+    fill: "#000",
+    stroke: "#fff",
+    strokeLinejoin: "round",
+    d: "M6.5 9a.5.5 0 0 0-.8-.4l-4 3a.5.5 0 0 0 0 .8l4 3a.5.5 0 0 0 .8-.4v-1.5h11V15a.5.5 0 0 0 .8.4l4-3a.5.5 0 0 0 0-.8l-4-3a.5.5 0 0 0-.8.4v1.5h-11V9Z",
+    style: {
+      filter: "drop-shadow( 0px 2px 1px rgba(0, 0, 0, .35))"
+    }
+  })));
+};
+
+// eslint-disable-next-line no-var
+var noop = () => {};
+function DraggableNumberInput(_ref2) {
+  let {
+      value,
+      min,
+      max,
+      className = "",
+      disablePointerLock = false,
+      modifierKeys,
+      decimalPlaces = DEFAULT_DECIMAL_PLACES,
+      onChange = noop,
+      onDragStart = noop,
+      onDragEnd = noop,
+      style
+    } = _ref2,
+    restProps = _objectWithoutProperties(_ref2, _excluded);
+  const inputRef = React.useRef(null);
+  const [isMouseDown, setIsMouseDown] = React.useState(false);
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [localValue, setLocalValue] = React.useState(() => formatNumber(value, decimalPlaces));
+  const [cursorPosition, setCursorPosition] = React.useState({
+    x: 0,
+    y: 0
+  });
+  const totalMovement = React.useRef(0);
+  const startValue = React.useRef(0);
+  const startX = React.useRef(0);
+  const currentMultiplier = React.useRef(1);
+
+  // === 新增：编辑状态跟踪 ===
+  const [isEditing, setIsEditing] = React.useState(false);
+  const lastExternalValueRef = React.useRef(value);
+
+  // 修改 formatNumber 调用，传入 decimalPlaces
+  const formatValue = React.useCallback(val => {
+    return formatNumber(val, decimalPlaces);
+  }, [decimalPlaces]);
+  const constrainedOnChange = React.useCallback(newValue => {
+    let constrainedValue = newValue;
+    if (typeof min === "number") {
+      constrainedValue = Math.max(min, constrainedValue);
+    }
+    if (typeof max === "number") {
+      constrainedValue = Math.min(max, constrainedValue);
+    }
+    onChange(constrainedValue);
+  }, [onChange, min, max]);
+  React.useEffect(() => {
+    // 只有当用户不在编辑状态，且外部值真正变化时才更新
+    if (!isEditing && lastExternalValueRef.current !== value) {
+      const formattedValue = formatValue(value);
+      setLocalValue(formattedValue);
+      lastExternalValueRef.current = value;
+    }
+  }, [value, formatValue, isEditing]);
+  const handleInputChange = e => {
+    const val = e.target.value;
+
+    // 标记为编辑状态
+    setIsEditing(true);
+    setLocalValue(val);
+
+    // 允许输入中间状态，不立即触发onChange
+    if (val === '' || val === '-' || val === '.' || val.endsWith('.')) {
+      return; // 输入中，不触发onChange
+    }
+    const num = parseFloat(val);
+    if (!isNaN(num)) {
+      constrainedOnChange(num);
+    }
+  };
+  const handleBlur = () => {
+    // 退出编辑状态
+    setIsEditing(false);
+    const num = parseFloat(localValue);
+    if (!isNaN(num)) {
+      // 根据 decimalPlaces 进行四舍五入
+      const precision = Math.pow(10, decimalPlaces);
+      const processedValue = Math.round(num * precision) / precision;
+      const formattedValue = formatValue(processedValue);
+
+      // 更新显示值
+      setLocalValue(formattedValue);
+      lastExternalValueRef.current = processedValue;
+      // 触发外部变化
+      constrainedOnChange(processedValue);
+    } else {
+      // 如果输入无效，重置为当前外部值
+      const formattedValue = formatValue(value);
+      setLocalValue(formattedValue);
+    }
+  };
+  const handleMouseDown = React.useCallback(e => {
+    if (!inputRef.current) return;
+    let x = 0,
+      y = 0;
+    if ("clientX" in e && "clientY" in e) {
+      [x, y] = [e.clientX, e.clientY];
+    }
+    if ("touches" in e) {
+      [x, y] = [e.touches[0].clientX, e.touches[0].clientY];
+    }
+    setIsMouseDown(true);
+    startX.current = x;
+    startValue.current = value;
+    totalMovement.current = 0;
+    setCursorPosition({
+      x,
+      y
+    });
+  }, [value, disablePointerLock]);
+  const updateDelta = React.useCallback(e => {
+    if (!isMouseDown) return;
+    applyMovement(totalMovement.current, e);
+  }, [isMouseDown]);
+  const getModifiers = React.useCallback(e => {
+    const mods = _objectSpread2(_objectSpread2({}, defaultModifiers), modifierKeys);
+    for (const key in mods) {
+      if (key !== "default" && e[key]) {
+        currentMultiplier.current = mods[key].multiplier;
+        return mods[key];
+      }
+    }
+    currentMultiplier.current = mods.default.multiplier;
+    return mods.default;
+  }, [modifierKeys]);
+  const applyMovement = React.useCallback((newMovement, e) => {
+    const {
+      sensitivity,
+      multiplier
+    } = getModifiers(e);
+    const delta = newMovement * sensitivity * multiplier;
+    let newValue = startValue.current + delta;
+    // 根据 decimalPlaces 进行精度控制
+    const precision = Math.pow(10, decimalPlaces);
+    newValue = Math.round(newValue * precision) / precision;
+    newValue = Object.is(newValue, -0) ? 0 : newValue;
+    constrainedOnChange(newValue);
+  }, [constrainedOnChange, getModifiers, decimalPlaces]);
+  const handleArrowKeyDown = e => {
+    if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+      e.preventDefault();
+      const {
+        multiplier
+      } = getModifiers(e);
+      const newValue = handleArrow(e, multiplier, value);
+      constrainedOnChange(newValue);
+    }
+  };
+  const handleModifierKeyDuringDrag = React.useCallback(e => {
+    if (e.key === "Shift" || e.key === "Control" || e.key === "Meta" || e.key === "Alt") {
+      updateDelta(e);
+    }
+  }, [updateDelta]);
+  const handleMouseMove = React.useCallback(e => {
+    if (!isMouseDown) return;
+    if ("touches" in e) {
+      e.preventDefault();
+    }
+    if (!disablePointerLock && document.pointerLockElement && !("touches" in e)) {
+      setCursorPosition(prev => {
+        const width = window.innerWidth;
+        const height = window.innerHeight;
+        const x2 = (prev.x + e.movementX + width) % width;
+        const y = (prev.y + e.movementY + height) % height;
+        return {
+          x: x2,
+          y
+        };
+      });
+    }
+    const x = "touches" in e ? e.touches[0].clientX : e.clientX;
+    const newMovement = disablePointerLock || "touches" in e ? x - startX.current : totalMovement.current + e.movementX;
+    if (!isDragging && newMovement !== 0) {
+      if (!disablePointerLock && !("touches" in e)) {
+        var _inputRef$current, _inputRef$current$req;
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || (_inputRef$current$req = _inputRef$current.requestPointerLock) === null || _inputRef$current$req === void 0 || _inputRef$current$req.call(_inputRef$current);
+      }
+      setIsDragging(true);
+      document.addEventListener("keydown", handleModifierKeyDuringDrag);
+      document.addEventListener("keyup", handleModifierKeyDuringDrag);
+      onDragStart();
+    }
+    totalMovement.current = newMovement;
+    applyMovement(newMovement, e);
+  }, [isMouseDown, disablePointerLock, startX, isDragging, onDragStart, applyMovement]);
+  const handleMouseUp = React.useCallback(() => {
+    setIsMouseDown(false);
+    totalMovement.current = 0;
+    if (isDragging) {
+      setIsDragging(false);
+      document.removeEventListener("keydown", handleModifierKeyDuringDrag);
+      document.removeEventListener("keyup", handleModifierKeyDuringDrag);
+      onDragEnd();
+    }
+    if (document.pointerLockElement) {
+      document.exitPointerLock();
+    }
+  }, [isDragging, onDragEnd, disablePointerLock]);
+  React.useEffect(() => {
+    if (isMouseDown) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("touchmove", handleMouseMove, {
+        passive: false
+      });
+      document.addEventListener("mouseup", handleMouseUp);
+      document.addEventListener("touchend", handleMouseUp);
+      return () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        document.removeEventListener("touchmove", handleMouseMove);
+        document.removeEventListener("touchend", handleMouseUp);
+      };
+    }
+  }, [isMouseDown, handleMouseMove, handleMouseUp]);
+  return /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("input", _objectSpread2({
+    ref: inputRef,
+    type: "text",
+    inputMode: "numeric",
+    pattern: "-?[0-9]*\\.?[0-9]*",
+    value: localValue,
+    onChange: handleInputChange,
+    onBlur: handleBlur,
+    onMouseDown: handleMouseDown,
+    onTouchStart: handleMouseDown,
+    onKeyDown: handleArrowKeyDown,
+    className: "draggable-number-input ".concat(className, " ").concat(isDragging ? "dragging" : ""),
+    style: _objectSpread2(_objectSpread2({}, {
+      cursor: "ew-resize",
+      userSelect: "none",
+      caretColor: isDragging ? "transparent" : "initial"
+    }), style)
+  }, restProps)), isDragging && !disablePointerLock && /* @__PURE__ */React.createElement(DragCursor, {
+    cursorPosition
+  }));
+}
+
 exports.AuthorizationModal = AuthorizationModal$1;
 exports.CommonHeader = CommonHeader$1;
+exports.DraggableNumberInput = DraggableNumberInput;
 exports.NetworkSettingsModal = NetworkSettingsModal$1;
 exports.PresetModal = PresetModal;
 exports.PtpModal = PtpModal$1;