refactor: migrate sortable (#10204)

* refactor: rename sortable dir

* refactor: migrate Sortable to the ui package

* feat: add stories for Sortable

* refactor: add scroller to the vertical story

* refactor: improve hints and width

* refactor: simplify item style

* fix: lint errors

* chore: dependencies

* refactor: move hooks

* fix: import errors

* style: format

* style: format

Author: alephpiece

packages/ui/package.json

@@ -17,14 +17,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
-  "keywords": [
-    "ui",
-    "components",
-    "react",
-    "tailwindcss",
-    "typescript",
-    "cherry-studio"
-  ],
+  "keywords": ["ui", "components", "react", "tailwindcss", "typescript", "cherry-studio"],
   "author": "Cherry Studio",
   "license": "MIT",
   "repository": {
@@ -43,6 +36,10 @@
     "tailwindcss": "^4.1.13"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "clsx": "^2.1.1",
     "lucide-react": "^0.525.0"
   },
@@ -79,10 +76,7 @@
   "engines": {
     "node": ">=18.0.0"
   },
-  "files": [
-    "dist",
-    "README.md"
-  ],
+  "files": ["dist", "README.md"],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

packages/ui/src/components/index.ts

@@ -63,6 +63,7 @@ export { default as ImageToolButton } from './interactive/ImageToolButton'
 export { default as InfoPopover } from './interactive/InfoPopover'
 export { default as InfoTooltip } from './interactive/InfoTooltip'
 export { default as Selector } from './interactive/Selector'
+export { Sortable } from './interactive/Sortable'
 export { default as WarnTooltip } from './interactive/WarnTooltip'
 
 // Composite Components (复合组件)

packages/ui/src/components/interactive/Sortable/ItemRenderer.tsx

@@ -0,0 +1,110 @@
+import type { DraggableSyntheticListeners } from '@dnd-kit/core'
+import type { Transform } from '@dnd-kit/utilities'
+import { CSS } from '@dnd-kit/utilities'
+import React, { useEffect } from 'react'
+import styled from 'styled-components'
+
+import { cn } from '../../../utils'
+import type { RenderItemType } from './types'
+
+interface ItemRendererProps<T> {
+  ref?: React.Ref<HTMLDivElement>
+  index?: number
+  item: T
+  renderItem: RenderItemType<T>
+  dragging?: boolean
+  dragOverlay?: boolean
+  ghost?: boolean
+  transform?: Transform | null
+  transition?: string | null
+  listeners?: DraggableSyntheticListeners
+}
+
+export function ItemRenderer<T>({
+  ref,
+  index,
+  item,
+  renderItem,
+  dragging,
+  dragOverlay,
+  ghost,
+  transform,
+  transition,
+  listeners,
+  ...props
+}: ItemRendererProps<T>) {
+  useEffect(() => {
+    if (!dragOverlay) {
+      return
+    }
+
+    document.body.style.cursor = 'grabbing'
+
+    return () => {
+      document.body.style.cursor = ''
+    }
+  }, [dragOverlay])
+
+  const wrapperStyle = {
+    transition,
+    transform: CSS.Transform.toString(transform ?? null)
+  } as React.CSSProperties
+
+  return (
+    <ItemWrapper ref={ref} data-index={index} className={cn({ dragOverlay: dragOverlay })} style={{ ...wrapperStyle }}>
+      <DraggableItem
+        className={cn({ dragging: dragging, dragOverlay: dragOverlay, ghost: ghost })}
+        {...listeners}
+        {...props}>
+        {renderItem(item, { dragging: !!dragging })}
+      </DraggableItem>
+    </ItemWrapper>
+  )
+}
+
+const ItemWrapper = styled.div`
+  box-sizing: border-box;
+  transform-origin: 0 0;
+  touch-action: manipulation;
+
+  &.dragOverlay {
+    --scale: 1.02;
+    z-index: 999;
+    position: relative;
+  }
+`
+
+const DraggableItem = styled.div`
+  position: relative;
+  box-sizing: border-box;
+  cursor: pointer; /* default cursor for items */
+  touch-action: manipulation;
+  transform-origin: 50% 50%;
+  transform: scale(var(--scale, 1));
+
+  &.dragging:not(.dragOverlay) {
+    z-index: 0;
+    opacity: 0.25;
+
+    &:not(.ghost) {
+      opacity: 0;
+    }
+  }
+
+  &.dragOverlay {
+    cursor: inherit;
+    animation: pop 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
+    transform: scale(var(--scale));
+    opacity: 1;
+    pointer-events: none; /* prevent pointer events on drag overlay */
+  }
+
+  @keyframes pop {
+    0% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(var(--scale));
+    }
+  }
+`