feat(admin): 卡片新建弹窗、标题保存/删除与拖动排序

- 新建卡片改为弹窗输入标题，确认新建/取消关闭，创建后自动选中
- 卡片标题右侧增加「保存」「删除」按钮
- 左侧卡片支持拖拽排序，顺序写入 card.sort 并影响首页卡片顺序
- 标签栏与内容增加间距，卡片列表加拖动手柄与提示
- Playwright 验证：弹窗取消/确认、按钮、拖动后 API 顺序变化

stash-web/src/App.css

@@ -979,6 +979,7 @@
 
 .admin-tabs {
   overflow: visible;
+  margin-bottom: var(--su-space-5);
 }
 
 .admin-create {
@@ -1287,6 +1288,7 @@ a.entry-href:hover {
   grid-template-columns: 220px minmax(0, 1fr);
   gap: var(--su-space-4);
   align-items: start;
+  margin-top: var(--su-space-4);
 }
 
 .cards-side {
@@ -1304,6 +1306,10 @@ a.entry-href:hover {
   margin: var(--su-space-2) 0 var(--su-space-3);
 }
 
+.cards-side-new > button {
+  width: 100%;
+}
+
 .cards-side-list {
   display: flex;
   flex-direction: column;
@@ -1313,7 +1319,6 @@ a.entry-href:hover {
 .cards-side-item {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: var(--su-space-2);
   padding: var(--su-space-2) var(--su-space-3);
   border: none;
@@ -1325,6 +1330,23 @@ a.entry-href:hover {
   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);
 }
@@ -1336,6 +1358,7 @@ a.entry-href:hover {
 }
 
 .cards-side-title {
+  flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1347,6 +1370,11 @@ a.entry-href:hover {
   font-weight: 400;
 }
 
+.cards-drag-hint {
+  display: block;
+  margin-top: var(--su-space-3);
+}
+
 .cards-main {
   min-width: 0;
 }

stash-web/src/components/admin/AdminNext.tsx

@@ -1242,8 +1242,12 @@ function CardsPanel({
   const options = useMemo(() => flattenCardsGroups(groups), [groups])
   const [activeId, setActiveId] = useState<number | null>(cards[0]?.id ?? null)
   const [pendingId, setPendingId] = useState<number | null>(null)
+  const [newOpen, setNewOpen] = useState(false)
   const [newTitle, setNewTitle] = useState('')
-  const [busy, setBusy] = useState(false)
+  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(() => {
     if (cards.length === 0) {
@@ -1264,81 +1268,170 @@ function CardsPanel({
   const active = cards.find((card) => card.id === activeId) ?? cards[0]
 
   const create = async () => {
-    setBusy(true)
+    setNewBusy(true)
     const result = await createCard(newTitle.trim())
-    setBusy(false)
+    setNewBusy(false)
     if (!result.ok) {
       toast.error(result.error)
       return
     }
     setNewTitle('')
+    setNewOpen(false)
     setPendingId(result.id)
     toast.success('卡片已创建')
     onReload()
   }
 
+  const reorder = async (targetId: number) => {
+    const from = dragId
+    setDragId(null)
+    setOverId(null)
+    if (from === null || from === targetId) return
+
+    const ids = cards.map((card) => card.id)
+    const start = ids.indexOf(from)
+    if (start < 0) return
+    ids.splice(start, 1)
+    const to = ids.indexOf(targetId)
+    ids.splice(to, 0, from)
+
+    setReordering(true)
+    const results = await Promise.all(ids.map((id, index) => updateCard(id, { sort: index })))
+    setReordering(false)
+    if (results.some((result) => !result.ok)) {
+      toast.error('排序保存失败')
+      onReload()
+      return
+    }
+    toast.success('顺序已保存')
+    onReload()
+  }
+
   return (
-    <div className="cards-manager">
-      <aside className="cards-side">
-        <Text size="sm" tone="muted">
-          卡片
-        </Text>
-        <div className="cards-side-new">
+    <>
+      <div className="cards-manager">
+        <aside className="cards-side">
+          <Text size="sm" tone="muted">
+            卡片
+          </Text>
+          <div className="cards-side-new">
+            <Button
+              size="sm"
+              icon={<Icon name="add_line" />}
+              onClick={() => {
+                setNewTitle('')
+                setNewOpen(true)
+              }}
+            >
+              新建卡片
+            </Button>
+          </div>
+
+          <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.groups.length}</span>
+              </button>
+            ))}
+            {cards.length === 0 && (
+              <Text size="sm" tone="muted">
+                还没有卡片，先新建一张。
+              </Text>
+            )}
+          </div>
+
+          {cards.length > 1 && (
+            <Text size="sm" tone="muted" className="cards-drag-hint">
+              拖动卡片可调整首页顺序
+            </Text>
+          )}
+        </aside>
+
+        <div className="cards-main">
+          {active === undefined ? (
+            <Text tone="muted">新建一张卡片开始配置。</Text>
+          ) : (
+            <CardTable
+              key={active.id}
+              card={active}
+              options={options}
+              onReload={onReload}
+              onDelete={onDelete}
+            />
+          )}
+        </div>
+      </div>
+
+      <Modal
+        open={newOpen}
+        onClose={() => {
+          if (!newBusy) setNewOpen(false)
+        }}
+        title="新建卡片"
+        size="sm"
+        footer={
+          <Space gap="sm" justify="end">
+            <Button variant="secondary" onClick={() => setNewOpen(false)}>
+              取消
+            </Button>
+            <Button
+              loading={newBusy}
+              disabled={newTitle.trim() === ''}
+              icon={<Icon name="check_line" />}
+              onClick={() => void create()}
+            >
+              确认新建
+            </Button>
+          </Space>
+        }
+      >
+        <FormField label="卡片标题" htmlFor="new-card-title">
           <Input
+            id="new-card-title"
             value={newTitle}
-            placeholder="新卡片标题"
-            aria-label="新卡片标题"
+            placeholder="如 常用推荐"
             onChange={(event) => setNewTitle(event.target.value)}
             onKeyDown={(event) => {
               if (event.key === 'Enter' && newTitle.trim() !== '') void create()
             }}
           />
-          <Button
-            size="sm"
-            icon={<Icon name="add_line" />}
-            loading={busy}
-            disabled={newTitle.trim() === ''}
-            aria-label="新建卡片"
-            onClick={() => void create()}
-          >
-            新建
-          </Button>
-        </div>
-
-        <div className="cards-side-list">
-          {cards.map((card) => (
-            <button
-              key={card.id}
-              type="button"
-              className={`cards-side-item${active?.id === card.id ? ' is-active' : ''}`}
-              onClick={() => setActiveId(card.id)}
-            >
-              <span className="cards-side-title">{card.title}</span>
-              <span className="cards-side-count">{card.groups.length}</span>
-            </button>
-          ))}
-          {cards.length === 0 && (
-            <Text size="sm" tone="muted">
-              还没有卡片，先新建一张。
-            </Text>
-          )}
-        </div>
-      </aside>
-
-      <div className="cards-main">
-        {active === undefined ? (
-          <Text tone="muted">新建一张卡片开始配置。</Text>
-        ) : (
-          <CardTable
-            key={active.id}
-            card={active}
-            options={options}
-            onReload={onReload}
-            onDelete={onDelete}
-          />
-        )}
-      </div>
-    </div>
+        </FormField>
+      </Modal>
+    </>
   )
 }
 
@@ -1402,6 +1495,7 @@ function CardTable({
       setTitle(card.title)
       return
     }
+    toast.success('卡片已保存')
     onReload()
   }
 
@@ -1413,9 +1507,14 @@ function CardTable({
             value={title}
             aria-label={`${card.title} 标题`}
             onChange={(event) => setTitle(event.target.value)}
-            onBlur={() => void saveTitle()}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') void saveTitle()
+            }}
           />
         </div>
+        <Button variant="secondary" size="sm" onClick={() => void saveTitle()}>
+          保存
+        </Button>
         <Button
           variant="ghost"
           size="sm"
@@ -1423,7 +1522,9 @@ function CardTable({
           icon={<Icon name="delete_2_line" />}
           aria-label="删除卡片"
           onClick={() => onDelete(card.id, card.title)}
-        />
+        >
+          删除
+        </Button>
       </div>
 
       <Text size="sm" tone="muted">