feat(md-deck): Add card list navigation and tabbed editor panels

- Move card tab selector to a left sidebar (CardList) with pagination - Replace separate side toggle and layer panels with EditorTabs - Move copy code button from layer panel to DeckHeader - Simplify PropertiesEditorPanel by removing front/back toggle and using a select for shape
2026-08-07 11:20:26 +08:00
parent 18cad20d2c
commit 6bcdca3a77
6 changed files with 203 additions and 107 deletions
@@ -0,0 +1,86 @@
+import { For, Show, createEffect, createSignal, on } from "solid-js";
+import type { DeckStore } from "./hooks/deckStore";
+
+export interface CardListProps {
+  store: DeckStore;
+}
+
+const PAGE_SIZE = 10;
+
+/**
+ * 卡牌列表：左侧垂直导航，每行高度一致，按页分页
+ */
+export function CardList(props: CardListProps) {
+  const { store } = props;
+  const [page, setPage] = createSignal(0);
+
+  const totalPages = () =>
+    Math.max(1, Math.ceil(store.state.cards.length / PAGE_SIZE));
+
+  const pageCards = () => {
+    const start = page() * PAGE_SIZE;
+    return store.state.cards.slice(start, start + PAGE_SIZE);
+  };
+
+  // 当活动卡牌变化时，自动跳转到其所在页（只响应 activeTab，避免与手动翻页互相干扰）
+  createEffect(
+    on(
+      () => store.state.activeTab,
+      (tab) => {
+        setPage(Math.floor(tab / PAGE_SIZE));
+      },
+    ),
+  );
+
+  return (
+    <nav class="w-44 shrink-0 border-r border-gray-200 pr-3 flex flex-col">
+      <div class="flex flex-col gap-1 flex-1">
+        <For each={pageCards()}>
+          {(card, index) => {
+            const globalIndex = () => page() * PAGE_SIZE + index();
+            const active = store.state.activeTab === globalIndex();
+            return (
+              <button
+                onClick={() => store.actions.setActiveTab(globalIndex())}
+                class={`flex items-center gap-2 w-full text-left px-3 py-2 rounded text-sm font-medium transition-colors cursor-pointer ${
+                  active
+                    ? "bg-blue-100 text-blue-600"
+                    : "text-gray-600 hover:bg-gray-100"
+                }`}
+              >
+                <span class="shrink-0 text-xs text-gray-400 tabular-nums w-5">
+                  {globalIndex() + 1}
+                </span>
+                <span class="truncate">
+                  {card.label || card.name || `Card ${globalIndex() + 1}`}
+                </span>
+              </button>
+            );
+          }}
+        </For>
+      </div>
+
+      <Show when={totalPages() > 1}>
+        <div class="flex items-center justify-between mt-2 pt-2 border-t border-gray-200">
+          <button
+            onClick={() => setPage(Math.max(0, page() - 1))}
+            disabled={page() === 0}
+            class="px-2 py-1 rounded text-sm text-gray-600 hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
+          >
+            ‹
+          </button>
+          <span class="text-xs text-gray-500 tabular-nums">
+            {page() + 1} / {totalPages()}
+          </span>
+          <button
+            onClick={() => setPage(Math.min(totalPages() - 1, page() + 1))}
+            disabled={page() >= totalPages() - 1}
+            class="px-2 py-1 rounded text-sm text-gray-600 hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
+          >
+            ›
+          </button>
+        </div>
+      </Show>
+    </nav>
+  );
+}