hyper
6bcdca3a77
- 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
60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
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>
|
|
);
|
|
}
|