[feature] 增加配置项移动排序功能

RavenHogWarts · Jun 11, 2024 · 3d7e34e · 3d7e34e
1 parent fd20b41
commit 3d7e34e
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/src/manager/types.ts b/src/manager/types.ts
@@ -20,7 +20,7 @@ export interface IconDetail {
   id: string;
   image: ImageDetail;
   type: IconType;
-  sort?: number;
+  sort: number;
   label?: string;
   path?: string;
   extension?: string[];

diff --git a/src/setting/defaultSetting.ts b/src/setting/defaultSetting.ts
@@ -9,6 +9,7 @@ export const DEFAULT_SETTINGS: CustomIconsConfig = {
         color: "",
       },
       type: "lucide",
+      sort: 0,
     },
     icons: [],
   },
@@ -19,6 +20,7 @@ export const DEFAULT_SETTINGS: CustomIconsConfig = {
         src: "crown",
         color: "",
       },
+      sort: 0,
       type: "lucide",
     },
     icons: [],
@@ -30,6 +32,7 @@ export const DEFAULT_SETTINGS: CustomIconsConfig = {
         src: "file-text",
         color: "",
       },
+      sort: 0,
       type: "lucide",
     },
     icons: [],

diff --git a/src/ui/settings/form/IconsDetailForm.tsx b/src/ui/settings/form/IconsDetailForm.tsx
@@ -1,5 +1,4 @@
 import { CustomIconsConfig, DefaultIconConfig, ExtraProps, IconDetail, IconType } from "@/src/manager/types";
-import { getResourcePathWithType } from '@/src/util/path';
 import DynamicIcon from '@/src/ui/componets/DynamicIcon';
 import IconsDispaly from "../../componets/IconsDispaly";
 
@@ -17,16 +16,31 @@ function IconsDetailForm(props:{
     onChange(newIconConfig);
   }
   const handleAdd = () => {
+    const newIndex = iconConfig.length > 0 ? iconConfig[iconConfig.length - 1].sort + 1 : 0;
     const { image, type } = currentDefaultIconConfig;
     const newIcon = {
       ...new DefaultIconConfig(configKey),
       image,
       type,
+      sort: newIndex,
       [extraProps]: '',
     };
     const newIconConfig = [...iconConfig, newIcon];
     onChange(newIconConfig);
   };
+  const handleMove = (index: number, direction: 'up' | 'down') => {
+    let newIconConfig = [...iconConfig];
+    if ((direction === 'up' && index > 0) || (direction === 'down' && index < newIconConfig.length - 1)) {
+      if (direction === 'up') {
+        [newIconConfig[index - 1], newIconConfig[index]] = [newIconConfig[index], newIconConfig[index - 1]];
+      } else {
+        [newIconConfig[index], newIconConfig[index + 1]] = [newIconConfig[index + 1], newIconConfig[index]];
+      }
+      newIconConfig.forEach((item, idx) => item.sort = idx);
+      newIconConfig.sort((a, b) => a.sort - b.sort);
+      onChange(newIconConfig);
+    }
+  };
   const handleSrcChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
     const newIconConfig = [...iconConfig];
     newIconConfig[index] = {
@@ -64,10 +78,10 @@ function IconsDetailForm(props:{
             <div className='form-toolbar'>
               <div className='form-label'>{rule.id}</div>
               <div className='form-tools'>
-                <div className='menu-item ci-up'>
+                <div className='menu-item ci-up' onClick={() => handleMove(index, 'up')}>
                   <DynamicIcon name='chevron-up'/>
                 </div>
-                <div className='menu-item ci-down'>
+                <div className='menu-item ci-down' onClick={() => handleMove(index, 'down')}>
                   <DynamicIcon name='chevron-down'/>
                 </div>
               </div>