fix: Fix the miniapp sorting problem, resolve #1725

- 修复小程序拖动排序不生效的问题
- 修复小程序拖动排序时列表滚动排序不生效的问题

src/renderer/src/pages/settings/DisplaySettings/MiniAppIconsManager.tsx

@@ -23,50 +23,6 @@ interface MiniAppManagerProps {
 
 type ListType = 'visible' | 'disabled'
 
-// 添加 reorderLists 函数的接口定义
-interface ReorderListsParams {
-  sourceList: MinAppType[]
-  destList: MinAppType[]
-  sourceIndex: number
-  destIndex: number
-  isSameList: boolean
-}
-
-interface ReorderListsResult {
-  sourceList: MinAppType[]
-  destList: MinAppType[]
-}
-
-// 添加 reorderLists 函数
-const reorderLists = ({
-  sourceList,
-  destList,
-  sourceIndex,
-  destIndex,
-  isSameList
-}: ReorderListsParams): ReorderListsResult => {
-  if (isSameList) {
-    // 在同一列表内重新排序
-    const newList = [...sourceList]
-    const [removed] = newList.splice(sourceIndex, 1)
-    newList.splice(destIndex, 0, removed)
-    return {
-      sourceList: newList,
-      destList: destList
-    }
-  } else {
-    // 在不同列表间移动
-    const newSourceList = [...sourceList]
-    const [removed] = newSourceList.splice(sourceIndex, 1)
-    const newDestList = [...destList]
-    newDestList.splice(destIndex, 0, removed)
-    return {
-      sourceList: newSourceList,
-      destList: newDestList
-    }
-  }
-}
-
 const MiniAppIconsManager: FC<MiniAppManagerProps> = ({
   visibleMiniApps,
   disabledMiniApps,
@@ -92,25 +48,35 @@ const MiniAppIconsManager: FC<MiniAppManagerProps> = ({
       if (!result.destination) return
 
       const { source, destination } = result
-      const sourceList = source.droppableId as ListType
-      const destList = destination.droppableId as ListType
 
-      if (source.droppableId === destination.droppableId) return
+      if (source.droppableId === destination.droppableId) {
+        // 在同一列表内重新排序
+        const list = source.droppableId === 'visible' ? [...visibleMiniApps] : [...disabledMiniApps]
+        const [removed] = list.splice(source.index, 1)
+        list.splice(destination.index, 0, removed)
 
-      const newLists = reorderLists({
+        if (source.droppableId === 'visible') {
-        sourceList: sourceList === 'visible' ? visibleMiniApps : disabledMiniApps,
+          handleListUpdate(list, disabledMiniApps)
-        destList: destList === 'visible' ? visibleMiniApps : disabledMiniApps,
+        } else {
-        sourceIndex: source.index,
+          handleListUpdate(visibleMiniApps, list)
-        destIndex: destination.index,
+        }
-        isSameList: sourceList === destList
+        return
-      })
+      }
 
-      handleListUpdate(
+      // 在不同列表间移动
-        sourceList === 'visible' ? newLists.sourceList : newLists.destList,
+      const sourceList = source.droppableId === 'visible' ? [...visibleMiniApps] : [...disabledMiniApps]
-        sourceList === 'visible' ? newLists.destList : newLists.sourceList
+      const destList = destination.droppableId === 'visible' ? [...visibleMiniApps] : [...disabledMiniApps]
-      )
+
+      const [removed] = sourceList.splice(source.index, 1)
+      const targetList = destList.filter((app) => app.id !== removed.id)
+      targetList.splice(destination.index, 0, removed)
+
+      const newVisibleMiniApps = destination.droppableId === 'visible' ? targetList : sourceList
+      const newDisabledMiniApps = destination.droppableId === 'disabled' ? targetList : sourceList
+
+      handleListUpdate(newVisibleMiniApps, newDisabledMiniApps)
     },
-    [disabledMiniApps, handleListUpdate, visibleMiniApps]
+    [visibleMiniApps, disabledMiniApps, handleListUpdate]
   )
 
   const onMoveMiniApp = useCallback(
@@ -153,17 +119,15 @@ const MiniAppIconsManager: FC<MiniAppManagerProps> = ({
             <Droppable droppableId={listType}>
               {(provided: DroppableProvided) => (
                 <ProgramList ref={provided.innerRef} {...provided.droppableProps}>
-                  <ScrollContainer>
+                  {(listType === 'visible' ? visibleMiniApps : disabledMiniApps).map((program, index) => (
-                    {(listType === 'visible' ? visibleMiniApps : disabledMiniApps).map((program, index) => (
+                    <Draggable key={program.id} draggableId={String(program.id)} index={index}>
-                      <Draggable key={program.id} draggableId={String(program.id)} index={index}>
+                      {(provided: DraggableProvided) => renderProgramItem(program, provided, listType)}
-                        {(provided: DraggableProvided) => renderProgramItem(program, provided, listType)}
+                    </Draggable>
-                      </Draggable>
+                  ))}
-                    ))}
+                  {disabledMiniApps.length === 0 && listType === 'disabled' && (
-                    {disabledMiniApps.length === 0 && listType === 'disabled' && (
+                    <EmptyPlaceholder>{t('settings.display.minApp.empty')}</EmptyPlaceholder>
-                      <EmptyPlaceholder>{t('settings.display.minApp.empty')}</EmptyPlaceholder>
+                  )}
-                    )}
+                  {provided.placeholder}
-                    {provided.placeholder}
-                  </ScrollContainer>
                 </ProgramList>
               )}
             </Droppable>
@@ -181,12 +145,6 @@ const AppLogo = styled.img`
   object-fit: contain;
 `
 
-const ScrollContainer = styled.div`
-  overflow-y: auto;
-  height: 100%;
-  padding-right: 5px;
-`
-
 const ProgramSection = styled.div`
   display: flex;
   gap: 20px;
@@ -208,13 +166,29 @@ const ProgramList = styled.div`
   height: 365px;
   min-height: 365px;
   padding: 10px;
-  padding-right: 5px;
   background: var(--color-background-soft);
   border-radius: 8px;
   border: 1px solid var(--color-border);
-  display: flex;
+  overflow-y: auto;
-  flex-direction: column;
+
-  overflow-y: hidden;
+  scroll-behavior: smooth;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--color-border);
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--color-border-hover);
+  }
 `
 
 const ProgramItem = styled.div`