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
This commit is contained in:
@@ -0,0 +1,59 @@
|
||||
import { createSignal } from "solid-js";
|
||||
import type { DeckStore } from "./hooks/deckStore";
|
||||
import { LayerEditorPanel, PropertiesEditorPanel } from "./editor-panel";
|
||||
|
||||
export interface EditorTabsProps {
|
||||
store: DeckStore;
|
||||
}
|
||||
|
||||
type TabKey = "sizing" | "front" | "back";
|
||||
|
||||
/**
|
||||
* 编辑面板:尺寸 / 正面图层 / 背面图层 用标签页切换,节省横向空间
|
||||
*/
|
||||
export function EditorTabs(props: EditorTabsProps) {
|
||||
const { store } = props;
|
||||
const [tab, setTab] = createSignal<TabKey>("sizing");
|
||||
|
||||
const tabs: { key: TabKey; label: string }[] = [
|
||||
{ key: "sizing", label: "尺寸" },
|
||||
{ key: "front", label: "正面图层" },
|
||||
{ key: "back", label: "背面图层" },
|
||||
];
|
||||
|
||||
const selectTab = (key: TabKey) => {
|
||||
setTab(key);
|
||||
// 切换正/背面标签时,同步预览的显示面
|
||||
if (key === "front") store.actions.setActiveSide("front");
|
||||
if (key === "back") store.actions.setActiveSide("back");
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="w-64 shrink-0">
|
||||
{/* 标签页切换 */}
|
||||
<div class="flex gap-1 mb-3">
|
||||
{tabs.map((t) => (
|
||||
<button
|
||||
onClick={() => selectTab(t.key)}
|
||||
class={`flex-1 px-3 py-1.5 rounded text-sm font-medium cursor-pointer ${
|
||||
tab() === t.key
|
||||
? "bg-blue-600 text-white"
|
||||
: "bg-gray-100 text-gray-600 hover:bg-gray-200"
|
||||
}`}
|
||||
>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{tab() === "sizing" ? (
|
||||
<PropertiesEditorPanel store={store} />
|
||||
) : (
|
||||
<LayerEditorPanel
|
||||
store={store}
|
||||
side={tab() === "front" ? "front" : "back"}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user