diff --git a/stash-web/src/App.css b/stash-web/src/App.css
index 0a66434..d1224f9 100644
--- a/stash-web/src/App.css
+++ b/stash-web/src/App.css
@@ -1008,7 +1008,7 @@
   width: 260px;
 }
 
-/* 折叠箭头：与前台侧栏 Menu 的 caret 同一套画法（CSS 画的 6px 角标） */
+/* 折叠箭头：外观交给 @stash/ui 的 Caret，这里只管按钮盒与占位 */
 .group-caret {
   display: inline-flex;
   flex: none;
@@ -1023,36 +1023,10 @@
   cursor: pointer;
 }
 
-.group-caret::before {
-  content: '';
-  width: 6px;
-  height: 6px;
-  border-left: 1px solid currentColor;
-  border-bottom: 1px solid currentColor;
-  opacity: 0.4;
-  transform: rotate(315deg);
-  transition:
-    transform var(--su-duration-base) var(--su-ease-in-out),
-    opacity var(--su-duration-base) var(--su-ease-in-out);
-}
-
-.group-caret:hover::before {
-  opacity: 0.7;
-}
-
-.group-caret-open::before {
-  opacity: 0.7;
-  transform: rotate(135deg);
-}
-
 .group-caret-empty {
   cursor: default;
 }
 
-.group-caret-empty::before {
-  display: none;
-}
-
 /* 分组图标选择：搜索 + 图标网格 */
 .icon-picker {
   display: flex;
@@ -1312,65 +1286,14 @@ a.entry-href:hover {
   width: 100%;
 }
 
-.cards-side-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--su-space-1);
-}
 
-.cards-side-item {
-  display: flex;
-  align-items: center;
-  gap: var(--su-space-2);
-  padding: var(--su-space-2) var(--su-space-3);
-  border: none;
-  border-radius: var(--su-radius-sm);
-  background: transparent;
-  color: var(--su-text-main);
-  font-size: var(--su-font-size-md);
-  text-align: left;
-  cursor: pointer;
-}
 
-.cards-drag-handle {
-  flex: none;
-  color: var(--su-text-placeholder);
-  font-size: var(--su-font-size-sm);
-  line-height: 1;
-  cursor: grab;
-}
 
-.cards-side-item.is-dragging {
-  opacity: 0.45;
-}
 
-.cards-side-item.is-over {
-  outline: 1px dashed var(--su-color-primary);
-  outline-offset: -1px;
-}
 
-.cards-side-item:hover {
-  background-color: var(--su-bg-card);
-}
 
-.cards-side-item.is-active {
-  background-color: var(--su-bg-card);
-  color: var(--su-color-primary);
-  font-weight: 600;
-}
 
-.cards-side-title {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 
-.cards-side-count {
-  color: var(--su-text-muted);
-  font-size: var(--su-font-size-sm);
-  font-weight: 400;
-}
 
 /* 拖动说明夹在「新建卡片」和卡片列表之间：上方靠按钮的外边距，下方留一点呼吸 */
 .cards-drag-hint {
diff --git a/stash-web/src/components/admin/AdminNext.tsx b/stash-web/src/components/admin/AdminNext.tsx
index 420fed5..e93d591 100644
--- a/stash-web/src/components/admin/AdminNext.tsx
+++ b/stash-web/src/components/admin/AdminNext.tsx
@@ -2,6 +2,7 @@ import {
   Brand,
   Button,
   Card,
+  Caret,
   Empty,
   FormField,
   Icon,
@@ -14,6 +15,7 @@ import {
   PasswordInput,
   Select,
   Space,
+  SortableList,
   Switch,
   Table,
   Tabs,
@@ -602,11 +604,13 @@ function GroupsPanel({
                 {hasChildren ? (
                   <button
                     type="button"
-                    className={`group-caret${open ? ' group-caret-open' : ''}`}
+                    className="group-caret"
                     aria-label={open ? `折叠 ${node.title}` : `展开 ${node.title}`}
                     aria-expanded={open}
                     onClick={() => toggle(node.key)}
-                  />
+                  >
+                    <Caret open={open} />
+                  </button>
                 ) : (
                   <span className="group-caret group-caret-empty" aria-hidden="true" />
                 )}
@@ -1383,8 +1387,6 @@ function CardsPanel({
   const [newOpen, setNewOpen] = useState(false)
   const [newTitle, setNewTitle] = useState('')
   const [newBusy, setNewBusy] = useState(false)
-  const [dragId, setDragId] = useState<number | null>(null)
-  const [overId, setOverId] = useState<number | null>(null)
   const [reordering, setReordering] = useState(false)
 
   useEffect(() => {
@@ -1420,25 +1422,12 @@ function CardsPanel({
     onReload()
   }
 
-  const reorder = async (targetId: number) => {
-    const from = dragId
-    setDragId(null)
-    setOverId(null)
-    if (from === null || from === targetId) return
-
-    const original = cards.map((card) => card.id)
-    const fromIndex = original.indexOf(from)
-    const targetIndex = original.indexOf(targetId)
-    if (fromIndex < 0 || targetIndex < 0) return
-
-    const ids = original.filter((id) => id !== from)
-    const targetAfter = ids.indexOf(targetId)
-    // 向下拖时插到目标之后，保证能拖到列表最后一项；向上拖时插到目标之前
-    const insertAt = fromIndex < targetIndex ? targetAfter + 1 : targetAfter
-    ids.splice(insertAt, 0, from)
-
+  /** 排序：组件给回完整的 key 顺序，逐个写 sort 字段 */
+  const reorder = async (keys: string[]) => {
     setReordering(true)
-    const results = await Promise.all(ids.map((id, index) => updateCard(id, { sort: index })))
+    const results = await Promise.all(
+      keys.map((key, index) => updateCard(Number(key), { sort: index })),
+    )
     setReordering(false)
     if (results.some((result) => !result.ok)) {
       toast.error('排序保存失败')
@@ -1474,54 +1463,18 @@ function CardsPanel({
             </Text>
           )}
 
-          <div className="cards-side-list">
-            {cards.map((card) => (
-              <button
-                key={card.id}
-                type="button"
-                draggable={!reordering}
-                className={[
-                  'cards-side-item',
-                  active?.id === card.id ? 'is-active' : '',
-                  dragId === card.id ? 'is-dragging' : '',
-                  overId === card.id && dragId !== null && dragId !== card.id ? 'is-over' : '',
-                ]
-                  .filter(Boolean)
-                  .join(' ')}
-                onClick={() => setActiveId(card.id)}
-                onDragStart={(event) => {
-                  setDragId(card.id)
-                  event.dataTransfer.effectAllowed = 'move'
-                  event.dataTransfer.setData('text/plain', String(card.id))
-                }}
-                onDragOver={(event) => {
-                  event.preventDefault()
-                  if (overId !== card.id) setOverId(card.id)
-                }}
-                onDrop={(event) => {
-                  event.preventDefault()
-                  void reorder(card.id)
-                }}
-                onDragEnd={() => {
-                  setDragId(null)
-                  setOverId(null)
-                }}
-              >
-                <span className="cards-drag-handle" aria-hidden="true">
-                  ⋮⋮
-                </span>
-                <span className="cards-side-title">{card.title}</span>
-                <span className="cards-side-count">
-                  {card.key === 'local-service' ? projects.length : card.groups.length}
-                </span>
-              </button>
-            ))}
-            {cards.length === 0 && (
-              <Text size="sm" tone="muted">
-                还没有卡片，先新建一张。
-              </Text>
-            )}
-          </div>
+          <SortableList
+            items={cards.map((card) => ({
+              key: String(card.id),
+              label: card.title,
+              meta: card.key === 'local-service' ? projects.length : card.groups.length,
+            }))}
+            activeKey={active === undefined ? undefined : String(active.id)}
+            onSelect={(key) => setActiveId(Number(key))}
+            onReorder={(keys) => void reorder(keys)}
+            disabled={reordering}
+            emptyText="还没有卡片，先新建一张。"
+          />
         </aside>
 
         <div className="cards-main">