seeder-st2110-components 1.6.1 → 1.6.3

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import React, { memo, useState, useCallback, useMemo, useEffect, useRef } from 'react';
-import { Tooltip, App, Modal, Form, Input, Alert, message, Dropdown, Spin, Divider, Typography, InputNumber, ConfigProvider, Badge, Switch, Select, List, Empty, Button, Space, Flex, Checkbox, Row, Col } from 'antd';
+import { Tooltip, App, Modal, Form, Input, Alert, message, Dropdown, Spin, Select, Divider, Typography, InputNumber, ConfigProvider, Badge, Switch, List, Empty, Button, Space, Flex, Checkbox, Row, Col } from 'antd';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useWebSocket, useInterval } from 'ahooks';
 import { LoadingOutlined, ExclamationCircleFilled, PlusOutlined } from '@ant-design/icons';
@@ -790,6 +790,601 @@ const useSystemOperations = function () {
 };
 var useSystemOperations$1 = useSystemOperations;
 
+var isCheckBoxInput = (element) => element.type === 'checkbox';
+
+var isDateObject = (value) => value instanceof Date;
+
+var isNullOrUndefined = (value) => value == null;
+
+const isObjectType = (value) => typeof value === 'object';
+var isObject = (value) => !isNullOrUndefined(value) &&
+    !Array.isArray(value) &&
+    isObjectType(value) &&
+    !isDateObject(value);
+
+var getEventValue = (event) => isObject(event) && event.target
+    ? isCheckBoxInput(event.target)
+        ? event.target.checked
+        : event.target.value
+    : event;
+
+var getNodeParentName = (name) => name.substring(0, name.search(/\.\d+(\.|$)/)) || name;
+
+var isNameInFieldArray = (names, name) => names.has(getNodeParentName(name));
+
+var isPlainObject = (tempObject) => {
+    const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
+    return (isObject(prototypeCopy) && prototypeCopy.hasOwnProperty('isPrototypeOf'));
+};
+
+var isWeb = typeof window !== 'undefined' &&
+    typeof window.HTMLElement !== 'undefined' &&
+    typeof document !== 'undefined';
+
+function cloneObject(data) {
+    let copy;
+    const isArray = Array.isArray(data);
+    const isFileListInstance = typeof FileList !== 'undefined' ? data instanceof FileList : false;
+    if (data instanceof Date) {
+        copy = new Date(data);
+    }
+    else if (!(isWeb && (data instanceof Blob || isFileListInstance)) &&
+        (isArray || isObject(data))) {
+        copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));
+        if (!isArray && !isPlainObject(data)) {
+            copy = data;
+        }
+        else {
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    copy[key] = cloneObject(data[key]);
+                }
+            }
+        }
+    }
+    else {
+        return data;
+    }
+    return copy;
+}
+
+var isKey = (value) => /^\w*$/.test(value);
+
+var isUndefined = (val) => val === undefined;
+
+var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
+
+var stringToPath = (input) => compact(input.replace(/["|']|\]/g, '').split(/\.|\[/));
+
+var get = (object, path, defaultValue) => {
+    if (!path || !isObject(object)) {
+        return defaultValue;
+    }
+    const result = (isKey(path) ? [path] : stringToPath(path)).reduce((result, key) => isNullOrUndefined(result) ? result : result[key], object);
+    return isUndefined(result) || result === object
+        ? isUndefined(object[path])
+            ? defaultValue
+            : object[path]
+        : result;
+};
+
+var isBoolean = (value) => typeof value === 'boolean';
+
+var set = (object, path, value) => {
+    let index = -1;
+    const tempPath = isKey(path) ? [path] : stringToPath(path);
+    const length = tempPath.length;
+    const lastIndex = length - 1;
+    while (++index < length) {
+        const key = tempPath[index];
+        let newValue = value;
+        if (index !== lastIndex) {
+            const objValue = object[key];
+            newValue =
+                isObject(objValue) || Array.isArray(objValue)
+                    ? objValue
+                    : !isNaN(+tempPath[index + 1])
+                        ? []
+                        : {};
+        }
+        if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
+            return;
+        }
+        object[key] = newValue;
+        object = object[key];
+    }
+};
+
+const EVENTS = {
+    BLUR: 'blur',
+    FOCUS_OUT: 'focusout',
+    CHANGE: 'change',
+};
+const VALIDATION_MODE = {
+    onBlur: 'onBlur',
+    onChange: 'onChange',
+    onSubmit: 'onSubmit',
+    onTouched: 'onTouched',
+    all: 'all',
+};
+
+const HookFormContext = React.createContext(null);
+HookFormContext.displayName = 'HookFormContext';
+/**
+ * This custom hook allows you to access the form context. useFormContext is intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop. To be used with {@link FormProvider}.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
+ *
+ * @returns return all useForm methods
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const methods = useForm();
+ *   const onSubmit = data => console.log(data);
+ *
+ *   return (
+ *     <FormProvider {...methods} >
+ *       <form onSubmit={methods.handleSubmit(onSubmit)}>
+ *         <NestedInput />
+ *         <input type="submit" />
+ *       </form>
+ *     </FormProvider>
+ *   );
+ * }
+ *
+ *  function NestedInput() {
+ *   const { register } = useFormContext(); // retrieve all hook methods
+ *   return <input {...register("test")} />;
+ * }
+ * ```
+ */
+const useFormContext = () => React.useContext(HookFormContext);
+
+var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
+    const result = {
+        defaultValues: control._defaultValues,
+    };
+    for (const key in formState) {
+        Object.defineProperty(result, key, {
+            get: () => {
+                const _key = key;
+                if (control._proxyFormState[_key] !== VALIDATION_MODE.all) {
+                    control._proxyFormState[_key] = !isRoot || VALIDATION_MODE.all;
+                }
+                localProxyFormState && (localProxyFormState[_key] = true);
+                return formState[_key];
+            },
+        });
+    }
+    return result;
+};
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+/**
+ * This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form application.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/useformstate) • [Demo](https://codesandbox.io/s/useformstate-75xly)
+ *
+ * @param props - include options on specify fields to subscribe. {@link UseFormStateReturn}
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const { register, handleSubmit, control } = useForm({
+ *     defaultValues: {
+ *     firstName: "firstName"
+ *   }});
+ *   const { dirtyFields } = useFormState({
+ *     control
+ *   });
+ *   const onSubmit = (data) => console.log(data);
+ *
+ *   return (
+ *     <form onSubmit={handleSubmit(onSubmit)}>
+ *       <input {...register("firstName")} placeholder="First Name" />
+ *       {dirtyFields.firstName && <p>Field is dirty.</p>}
+ *       <input type="submit" />
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
+function useFormState(props) {
+    const methods = useFormContext();
+    const { control = methods.control, disabled, name, exact } = props || {};
+    const [formState, updateFormState] = React.useState(control._formState);
+    const _localProxyFormState = React.useRef({
+        isDirty: false,
+        isLoading: false,
+        dirtyFields: false,
+        touchedFields: false,
+        validatingFields: false,
+        isValidating: false,
+        isValid: false,
+        errors: false,
+    });
+    useIsomorphicLayoutEffect(() => control._subscribe({
+        name,
+        formState: _localProxyFormState.current,
+        exact,
+        callback: (formState) => {
+            !disabled &&
+                updateFormState({
+                    ...control._formState,
+                    ...formState,
+                });
+        },
+    }), [name, disabled, exact]);
+    React.useEffect(() => {
+        _localProxyFormState.current.isValid && control._setValid(true);
+    }, [control]);
+    return React.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
+}
+
+var isString = (value) => typeof value === 'string';
+
+var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) => {
+    if (isString(names)) {
+        isGlobal && _names.watch.add(names);
+        return get(formValues, names, defaultValue);
+    }
+    if (Array.isArray(names)) {
+        return names.map((fieldName) => (isGlobal && _names.watch.add(fieldName),
+            get(formValues, fieldName)));
+    }
+    isGlobal && (_names.watchAll = true);
+    return formValues;
+};
+
+var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
+
+function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
+    if (isPrimitive(object1) || isPrimitive(object2)) {
+        return object1 === object2;
+    }
+    if (isDateObject(object1) && isDateObject(object2)) {
+        return object1.getTime() === object2.getTime();
+    }
+    const keys1 = Object.keys(object1);
+    const keys2 = Object.keys(object2);
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+    if (_internal_visited.has(object1) || _internal_visited.has(object2)) {
+        return true;
+    }
+    _internal_visited.add(object1);
+    _internal_visited.add(object2);
+    for (const key of keys1) {
+        const val1 = object1[key];
+        if (!keys2.includes(key)) {
+            return false;
+        }
+        if (key !== 'ref') {
+            const val2 = object2[key];
+            if ((isDateObject(val1) && isDateObject(val2)) ||
+                (isObject(val1) && isObject(val2)) ||
+                (Array.isArray(val1) && Array.isArray(val2))
+                ? !deepEqual(val1, val2, _internal_visited)
+                : val1 !== val2) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+/**
+ * Custom hook to subscribe to field change and isolate re-rendering at the component level.
+ *
+ * @remarks
+ *
+ * [API](https://react-hook-form.com/docs/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)
+ *
+ * @example
+ * ```tsx
+ * const { control } = useForm();
+ * const values = useWatch({
+ *   name: "fieldName"
+ *   control,
+ * })
+ * ```
+ */
+function useWatch(props) {
+    const methods = useFormContext();
+    const { control = methods.control, name, defaultValue, disabled, exact, compute, } = props || {};
+    const _defaultValue = React.useRef(defaultValue);
+    const _compute = React.useRef(compute);
+    const _computeFormValues = React.useRef(undefined);
+    _compute.current = compute;
+    const defaultValueMemo = React.useMemo(() => control._getWatch(name, _defaultValue.current), [control, name]);
+    const [value, updateValue] = React.useState(_compute.current ? _compute.current(defaultValueMemo) : defaultValueMemo);
+    useIsomorphicLayoutEffect(() => control._subscribe({
+        name,
+        formState: {
+            values: true,
+        },
+        exact,
+        callback: (formState) => {
+            if (!disabled) {
+                const formValues = generateWatchOutput(name, control._names, formState.values || control._formValues, false, _defaultValue.current);
+                if (_compute.current) {
+                    const computedFormValues = _compute.current(formValues);
+                    if (!deepEqual(computedFormValues, _computeFormValues.current)) {
+                        updateValue(computedFormValues);
+                        _computeFormValues.current = computedFormValues;
+                    }
+                }
+                else {
+                    updateValue(formValues);
+                }
+            }
+        },
+    }), [control, disabled, name, exact]);
+    React.useEffect(() => control._removeUnmounted());
+    return value;
+}
+
+/**
+ * Custom hook to work with controlled component, this function provide you with both form and field level state. Re-render is isolated at the hook level.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/usecontroller) • [Demo](https://codesandbox.io/s/usecontroller-0o8px)
+ *
+ * @param props - the path name to the form field value, and validation rules.
+ *
+ * @returns field properties, field and form state. {@link UseControllerReturn}
+ *
+ * @example
+ * ```tsx
+ * function Input(props) {
+ *   const { field, fieldState, formState } = useController(props);
+ *   return (
+ *     <div>
+ *       <input {...field} placeholder={props.name} />
+ *       <p>{fieldState.isTouched && "Touched"}</p>
+ *       <p>{formState.isSubmitted ? "submitted" : ""}</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+function useController(props) {
+    const methods = useFormContext();
+    const { name, disabled, control = methods.control, shouldUnregister, defaultValue, } = props;
+    const isArrayField = isNameInFieldArray(control._names.array, name);
+    const defaultValueMemo = React.useMemo(() => get(control._formValues, name, get(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
+    const value = useWatch({
+        control,
+        name,
+        defaultValue: defaultValueMemo,
+        exact: true,
+    });
+    const formState = useFormState({
+        control,
+        name,
+        exact: true,
+    });
+    const _props = React.useRef(props);
+    const _registerProps = React.useRef(control.register(name, {
+        ...props.rules,
+        value,
+        ...(isBoolean(props.disabled) ? { disabled: props.disabled } : {}),
+    }));
+    _props.current = props;
+    const fieldState = React.useMemo(() => Object.defineProperties({}, {
+        invalid: {
+            enumerable: true,
+            get: () => !!get(formState.errors, name),
+        },
+        isDirty: {
+            enumerable: true,
+            get: () => !!get(formState.dirtyFields, name),
+        },
+        isTouched: {
+            enumerable: true,
+            get: () => !!get(formState.touchedFields, name),
+        },
+        isValidating: {
+            enumerable: true,
+            get: () => !!get(formState.validatingFields, name),
+        },
+        error: {
+            enumerable: true,
+            get: () => get(formState.errors, name),
+        },
+    }), [formState, name]);
+    const onChange = React.useCallback((event) => _registerProps.current.onChange({
+        target: {
+            value: getEventValue(event),
+            name: name,
+        },
+        type: EVENTS.CHANGE,
+    }), [name]);
+    const onBlur = React.useCallback(() => _registerProps.current.onBlur({
+        target: {
+            value: get(control._formValues, name),
+            name: name,
+        },
+        type: EVENTS.BLUR,
+    }), [name, control._formValues]);
+    const ref = React.useCallback((elm) => {
+        const field = get(control._fields, name);
+        if (field && elm) {
+            field._f.ref = {
+                focus: () => elm.focus && elm.focus(),
+                select: () => elm.select && elm.select(),
+                setCustomValidity: (message) => elm.setCustomValidity(message),
+                reportValidity: () => elm.reportValidity(),
+            };
+        }
+    }, [control._fields, name]);
+    const field = React.useMemo(() => ({
+        name,
+        value,
+        ...(isBoolean(disabled) || formState.disabled
+            ? { disabled: formState.disabled || disabled }
+            : {}),
+        onChange,
+        onBlur,
+        ref,
+    }), [name, disabled, formState.disabled, onChange, onBlur, ref, value]);
+    React.useEffect(() => {
+        const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
+        control.register(name, {
+            ..._props.current.rules,
+            ...(isBoolean(_props.current.disabled)
+                ? { disabled: _props.current.disabled }
+                : {}),
+        });
+        const updateMounted = (name, value) => {
+            const field = get(control._fields, name);
+            if (field && field._f) {
+                field._f.mount = value;
+            }
+        };
+        updateMounted(name, true);
+        if (_shouldUnregisterField) {
+            const value = cloneObject(get(control._options.defaultValues, name));
+            set(control._defaultValues, name, value);
+            if (isUndefined(get(control._formValues, name))) {
+                set(control._formValues, name, value);
+            }
+        }
+        !isArrayField && control.register(name);
+        return () => {
+            (isArrayField
+                ? _shouldUnregisterField && !control._state.action
+                : _shouldUnregisterField)
+                ? control.unregister(name)
+                : updateMounted(name, false);
+        };
+    }, [name, control, isArrayField, shouldUnregister]);
+    React.useEffect(() => {
+        control._setDisabledField({
+            disabled,
+            name,
+        });
+    }, [disabled, name, control]);
+    return React.useMemo(() => ({
+        field,
+        formState,
+        fieldState,
+    }), [field, formState, fieldState]);
+}
+
+/**
+ * Component based on `useController` hook to work with controlled component.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/usecontroller/controller) • [Demo](https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw) • [Video](https://www.youtube.com/watch?v=N2UNk_UCVyA)
+ *
+ * @param props - the path name to the form field value, and validation rules.
+ *
+ * @returns provide field handler functions, field and form state.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const { control } = useForm<FormValues>({
+ *     defaultValues: {
+ *       test: ""
+ *     }
+ *   });
+ *
+ *   return (
+ *     <form>
+ *       <Controller
+ *         control={control}
+ *         name="test"
+ *         render={({ field: { onChange, onBlur, value, ref }, formState, fieldState }) => (
+ *           <>
+ *             <input
+ *               onChange={onChange} // send value to hook form
+ *               onBlur={onBlur} // notify when input is touched
+ *               value={value} // return updated value
+ *               ref={ref} // set ref for focus management
+ *             />
+ *             <p>{formState.isSubmitted ? "submitted" : ""}</p>
+ *             <p>{fieldState.isTouched ? "touched" : ""}</p>
+ *           </>
+ *         )}
+ *       />
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
+const Controller = (props) => props.render(useController(props));
+
+// 获取 LSM 中的IP映射列表
+async function get_lsm_data() {
+  return request('/api/get_lsm_data', {
+    method: 'GET'
+  });
+}
+
+const useLSMLabel = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const [lsmList, setLsmList] = useState([]);
+  const {
+    name,
+    label = "Label",
+    control,
+    onLsmSelect,
+    fetchLsmData = get_lsm_data,
+    formItemProps = {},
+    selectProps = {},
+    fieldNames = {
+      label: 'label',
+      value: 'label'
+    }
+  } = props;
+  useEffect(() => {
+    const loadLsmData = async () => {
+      try {
+        const res = await fetchLsmData();
+        if (res !== null && res !== void 0 && res.length) {
+          setLsmList(res);
+        }
+      } catch (error) {
+        console.error('Failed to fetch LSM data:', error);
+      }
+    };
+    loadLsmData();
+  }, [fetchLsmData]);
+  const renderLSMField = () => /*#__PURE__*/jsx(Controller, {
+    name: name,
+    control: control,
+    render: _ref => {
+      let {
+        field
+      } = _ref;
+      return /*#__PURE__*/jsx(Form.Item, _objectSpread2(_objectSpread2({
+        label: label
+      }, formItemProps), {}, {
+        children: /*#__PURE__*/jsx(Select, _objectSpread2(_objectSpread2(_objectSpread2({}, field), selectProps), {}, {
+          options: lsmList,
+          fieldNames: fieldNames,
+          allowClear: true,
+          showSearch: true,
+          optionFilterProp: "label",
+          onChange: (value, option) => {
+            field.onChange(value);
+            onLsmSelect === null || onLsmSelect === void 0 || onLsmSelect(value === undefined ? undefined : option);
+          },
+          placeholder: selectProps.placeholder || 'Please select label'
+        }))
+      }));
+    }
+  });
+  return renderLSMField;
+};
+
 const NetworkFieldGroup = _ref => {
   var _fieldConfig$netmask$, _fieldConfig$netmask;
   let {
@@ -1041,8 +1636,6 @@ const NetworkSettingsModal = _ref2 => {
     setSubmitLoading(true);
     try {
       const values = await form.validateFields();
-      // console.log("Direct form values:", values);
-
       const updatePromises = [];
 
       // 更新LAN配置
@@ -1086,16 +1679,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({
@@ -1407,7 +1997,7 @@ const LeftList = /*#__PURE__*/memo(_ref => {
     showDescription = false,
     texts = {
       newButton: "New Preset",
-      removeButton: "Remove"
+      removeButton: "Delete"
     }
   } = _ref;
   // 动态计算列布局
@@ -1418,7 +2008,7 @@ const LeftList = /*#__PURE__*/memo(_ref => {
       className: "list-container",
       children: /*#__PURE__*/jsx(List, {
         header: /*#__PURE__*/jsxs("div", {
-          className: "grid ".concat(gridColumns, " w-full list-header"),
+          className: "grid ".concat(gridColumns, " gap-2 w-full list-header"),
           children: [/*#__PURE__*/jsx("div", {
             children: "Name"
           }), /*#__PURE__*/jsx("div", {
@@ -1436,14 +2026,27 @@ const LeftList = /*#__PURE__*/memo(_ref => {
           },
           onClick: () => onSelectPreset(item),
           children: /*#__PURE__*/jsxs("div", {
-            className: "grid ".concat(gridColumns, " w-full text-text-normal"),
+            className: "grid ".concat(gridColumns, " gap-2 w-full text-text-normal"),
             children: [/*#__PURE__*/jsx("div", {
-              title: item.name,
-              children: item.name || "Untitled Preset"
+              className: "min-w-0",
+              children: /*#__PURE__*/jsx(Typography.Text, {
+                ellipsis: true,
+                title: item.name,
+                children: item.name || "Untitled Preset"
+              })
             }), /*#__PURE__*/jsx("div", {
-              children: item.create_time
+              className: "min-w-0",
+              children: /*#__PURE__*/jsx(Typography.Text, {
+                ellipsis: true,
+                children: item.create_time
+              })
             }), showDescription && /*#__PURE__*/jsx("div", {
-              children: item.description
+              className: "min-w-0",
+              children: /*#__PURE__*/jsx(Typography.Text, {
+                ellipsis: true,
+                title: item.description,
+                children: item.description
+              })
             })]
           })
         }),
@@ -1459,7 +2062,7 @@ const LeftList = /*#__PURE__*/memo(_ref => {
                   onClick: onAddNew,
                   className: "p-0 h-auto",
                   icon: /*#__PURE__*/jsx(PlusOutlined, {}),
-                  children: "Create new preset"
+                  children: "Create New Preset"
                 })
               })
             })
@@ -1475,18 +2078,16 @@ const LeftList = /*#__PURE__*/memo(_ref => {
         size: "middle",
         children: [/*#__PURE__*/jsx(Button, {
           type: "default",
-          icon: /*#__PURE__*/jsx(PlusOutlined, {}),
-          style: {
-            padding: "20px 12px"
-          },
+          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"
-          },
+          type: "default"
+          // style={{ padding: "20px 12px" }}
+          ,
           className: "btn-gray",
           onClick: onRemove,
           children: texts.removeButton
@@ -1523,8 +2124,8 @@ const RightDetailForm = /*#__PURE__*/memo(_ref3 => {
     originalPresetData,
     fields = {
       name: {
-        label: "Preset Name",
-        placeholder: "Enter preset name",
+        label: "Name",
+        placeholder: "Please enter name",
         required: true
       }
     },
@@ -1532,7 +2133,7 @@ const RightDetailForm = /*#__PURE__*/memo(_ref3 => {
       loadButton: "Load",
       saveButton: "Save"
     },
-    presetChanged
+    presetChanged // 作用：在切换选中预设时强制触发 Checkbox 的重新初始化
   } = _ref3;
   const [initialSelected, setInitialSelected] = useState([]);
   const currentSelected = Form.useWatch('category_list', form) || [];
@@ -1592,32 +2193,40 @@ const RightDetailForm = /*#__PURE__*/memo(_ref3 => {
       },
       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'));
-            }
-          }
-        }],
+        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__*/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'));
-          }
-        }],
+        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__*/jsx(Checkbox.Group, {
           className: "grid grid-cols-2 gap-2",
           onChange: handleCheckboxChange,
@@ -1633,7 +2242,10 @@ const RightDetailForm = /*#__PURE__*/memo(_ref3 => {
         children: /*#__PURE__*/jsx(Input.TextArea, {
           rows: 4,
           placeholder: fields.description.placeholder,
-          disabled: isEditing
+          disabled: isEditing,
+          style: {
+            resize: 'none'
+          }
         })
       })]
     }), isEditing ? /*#__PURE__*/jsx(SubmitButton, _objectSpread2(_objectSpread2({
@@ -1666,20 +2278,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"
     },
@@ -1697,16 +2309,19 @@ const Preset = _ref => {
   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();
       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);
     }
@@ -1714,7 +2329,7 @@ const Preset = _ref => {
   const handleSelectPreset = useCallback(preset => {
     setSelectedPreset(preset);
     form.setFieldsValue(preset);
-    setPresetChanged(prev => prev + 1); // 触发react更新
+    setPresetChanged(prev => prev + 1);
   }, [form]);
   const handleAddNew = useCallback(() => {
     var _fields$category_list;
@@ -1752,18 +2367,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();
         }
@@ -1771,7 +2412,7 @@ const Preset = _ref => {
     } catch (error) {
       console.error('Failed to delete preset:', error);
     }
-  }, [selectedPreset, form, AntdModal, AntdMessage, fetchPresetList, texts]);
+  }, [selectedPreset, form, AntdModal, AntdMessage, texts, removePreset, getPresetList]);
   const handleLoadPreset = useCallback(async loadData => {
     if (!loadData) return;
 
@@ -1827,27 +2468,53 @@ const Preset = _ref => {
   const handleSave = 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]);
+
+  // 初始化数据
+  useEffect(() => {
+    fetchPresetList();
+  }, [fetchPresetList]);
   return /*#__PURE__*/jsx(Modal, {
     title: texts.title,
     width: width,
@@ -3712,5 +4379,5 @@ function DraggableNumberInput(_ref2) {
   }));
 }
 
-export { AuthorizationModal$1 as AuthorizationModal, CommonHeader$1 as CommonHeader, DraggableNumberInput, NetworkSettingsModal$1 as NetworkSettingsModal, PresetModal, PtpModal$1 as PtpModal, SystemOperations$1 as SystemOperations, UpgradeManager$1 as UpgradeManager, useAuth, useHardwareUsage$1 as useHardwareUsage, useSystemOperations$1 as useSystemOperations, useUpgrade$1 as useUpgrade };
+export { AuthorizationModal$1 as AuthorizationModal, CommonHeader$1 as CommonHeader, DraggableNumberInput, NetworkSettingsModal$1 as NetworkSettingsModal, PresetModal, PtpModal$1 as PtpModal, SystemOperations$1 as SystemOperations, UpgradeManager$1 as UpgradeManager, useAuth, useHardwareUsage$1 as useHardwareUsage, useLSMLabel, useSystemOperations$1 as useSystemOperations, useUpgrade$1 as useUpgrade };
 //# sourceMappingURL=index.esm.js.map