refactor: break down & clean up

2026-02-27 15:22:51 +08:00
parent 8ddc2a672a
commit c6580b7c69
14 changed files with 404 additions and 318 deletions
@@ -0,0 +1,47 @@
+import { For } from 'solid-js';
+import type { DeckStore } from './hooks/deckStore';
+
+export interface DeckHeaderProps {
+  store: DeckStore;
+}
+
+/**
+ * 卡牌预览头部：编辑按钮和 Tab 选择器
+ */
+export function DeckHeader(props: DeckHeaderProps) {
+  const { store } = props;
+
+  return (
+    <div class="flex items-center gap-2 border-b border-gray-200 pb-2 mb-4">
+      {/* 编辑按钮 */}
+      <button
+        onClick={() => store.actions.setIsEditing(!store.state.isEditing)}
+        class={`px-3 py-1 rounded text-sm font-medium transition-colors cursor-pointer ${
+          store.state.isEditing && !store.state.fixed
+            ? 'bg-blue-100 text-blue-600'
+            : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+        }`}
+      >
+        {store.state.isEditing ? '✓ 编辑中' : '✏️ 编辑'}
+      </button>
+
+      {/* Tab 选择器 */}
+      <div class="flex gap-1 overflow-x-auto flex-1 min-w-0 flex-wrap">
+        <For each={store.state.cards}>
+          {(card, index) => (
+            <button
+              onClick={() => store.actions.setActiveTab(index())}
+              class={`font-medium transition-colors flex-shrink-0 min-w-[1.6em] cursor-pointer px-2 py-1 rounded ${
+                store.state.activeTab === index()
+                  ? 'bg-blue-100 text-blue-600 border-b-2 border-blue-600'
+                  : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'
+              }`}
+            >
+              {card.label || card.name || `Card ${index() + 1}`}
+            </button>
+          )}
+        </For>
+      </div>
+    </div>
+  );
+}