From 23d6d8153248ab340d6070c6021ac2ec8c260979 Mon Sep 17 00:00:00 2001
From: hypercross <helios.tnak@gmail.com>
Date: Fri, 27 Feb 2026 15:33:23 +0800
Subject: [PATCH] refactor: panel reorg

---
 .../md-deck/editor-panel/LayerEditorPanel.tsx | 54 +++++++++++++++++++
 .../editor-panel/PropertiesEditorPanel.tsx    | 39 +-------------
 src/components/md-deck/editor-panel/index.ts  |  3 ++
 src/components/md-deck/index.tsx              |  9 ++--
 4 files changed, 64 insertions(+), 41 deletions(-)
 create mode 100644 src/components/md-deck/editor-panel/LayerEditorPanel.tsx

diff --git a/src/components/md-deck/editor-panel/LayerEditorPanel.tsx b/src/components/md-deck/editor-panel/LayerEditorPanel.tsx
new file mode 100644
index 0000000..ef6944f
--- /dev/null
+++ b/src/components/md-deck/editor-panel/LayerEditorPanel.tsx
@@ -0,0 +1,54 @@
+import { For } from 'solid-js';
+import type { DeckStore } from '../hooks/deckStore';
+
+export interface LayerEditorPanelProps {
+  store: DeckStore;
+}
+
+/**
+ * 图层编辑面板：图层可见性切换、位置编辑、复制代码
+ */
+export function LayerEditorPanel(props: LayerEditorPanelProps) {
+  const { store } = props;
+
+  return (
+    <div class="w-64 flex-shrink-0">
+      <h3 class="font-bold mb-2">图层</h3>
+
+      <div class="space-y-2">
+        <For each={store.state.layerConfigs}>
+          {(layer) => (
+            <div class="flex items-center gap-2">
+              <input
+                type="checkbox"
+                checked={layer.visible}
+                onChange={() => store.actions.toggleLayerVisible(layer.prop)}
+                class="cursor-pointer"
+              />
+              <span class="text-sm flex-1">{layer.prop}</span>
+              <button
+                onClick={() => store.actions.setEditingLayer(store.state.editingLayer === layer.prop ? null : layer.prop)}
+                class={`text-xs px-2 py-0.5 rounded cursor-pointer ${
+                  store.state.editingLayer === layer.prop
+                    ? 'bg-blue-500 text-white'
+                    : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+                }`}
+              >
+                {store.state.editingLayer === layer.prop ? '✓ 框选' : '编辑'}
+              </button>
+            </div>
+          )}
+        </For>
+      </div>
+
+      <hr class="my-4" />
+
+      <button
+        onClick={store.actions.copyCode}
+        class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded text-sm font-medium cursor-pointer"
+      >
+        📋 复制代码
+      </button>
+    </div>
+  );
+}
diff --git a/src/components/md-deck/editor-panel/PropertiesEditorPanel.tsx b/src/components/md-deck/editor-panel/PropertiesEditorPanel.tsx
index 177b62b..e27b2d7 100644
--- a/src/components/md-deck/editor-panel/PropertiesEditorPanel.tsx
+++ b/src/components/md-deck/editor-panel/PropertiesEditorPanel.tsx
@@ -1,4 +1,3 @@
-import { For } from 'solid-js';
 import type { DeckStore } from '../hooks/deckStore';
 
 export interface PropertiesEditorPanelProps {
@@ -6,7 +5,7 @@ export interface PropertiesEditorPanelProps {
 }
 
 /**
- * 右侧：卡牌属性编辑面板
+ * 卡牌属性编辑面板：尺寸、网格、字体、出血、内边距
  */
 export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
   const { store } = props;
@@ -85,42 +84,6 @@ export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
             onInput={(e) => store.actions.setPadding(e.target.value)}
           />
         </div>
-
-        <hr class="my-4" />
-
-        <h4 class="font-medium text-sm text-gray-700">图层</h4>
-        <For each={store.state.layerConfigs}>
-          {(layer) => (
-            <div class="flex items-center gap-2">
-              <input
-                type="checkbox"
-                checked={layer.visible}
-                onChange={() => store.actions.toggleLayerVisible(layer.prop)}
-                class="cursor-pointer"
-              />
-              <span class="text-sm flex-1">{layer.prop}</span>
-              <button
-                onClick={() => store.actions.setEditingLayer(store.state.editingLayer === layer.prop ? null : layer.prop)}
-                class={`text-xs px-2 py-0.5 rounded cursor-pointer ${
-                  store.state.editingLayer === layer.prop
-                    ? 'bg-blue-500 text-white'
-                    : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
-                }`}
-              >
-                {store.state.editingLayer === layer.prop ? '✓ 框选' : '编辑位置'}
-              </button>
-            </div>
-          )}
-        </For>
-
-        <hr class="my-4" />
-
-        <button
-          onClick={store.actions.copyCode}
-          class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded text-sm font-medium cursor-pointer"
-        >
-          📋 复制代码
-        </button>
       </div>
     </div>
   );
diff --git a/src/components/md-deck/editor-panel/index.ts b/src/components/md-deck/editor-panel/index.ts
index 5b7192c..3fb7e3c 100644
--- a/src/components/md-deck/editor-panel/index.ts
+++ b/src/components/md-deck/editor-panel/index.ts
@@ -1,3 +1,6 @@
 export { DataEditorPanel } from './DataEditorPanel';
 export { PropertiesEditorPanel } from './PropertiesEditorPanel';
+export { LayerEditorPanel } from './LayerEditorPanel';
 export type { DataEditorPanelProps } from './DataEditorPanel';
+export type { PropertiesEditorPanelProps } from './PropertiesEditorPanel';
+export type { LayerEditorPanelProps } from './LayerEditorPanel';
diff --git a/src/components/md-deck/index.tsx b/src/components/md-deck/index.tsx
index fa1ec49..4065ad4 100644
--- a/src/components/md-deck/index.tsx
+++ b/src/components/md-deck/index.tsx
@@ -4,7 +4,7 @@ import { resolvePath } from '../utils/path';
 import { createDeckStore } from './hooks/deckStore';
 import { DeckHeader } from './DeckHeader';
 import { DeckContent } from './DeckContent';
-import { DataEditorPanel, PropertiesEditorPanel } from './editor-panel';
+import {DataEditorPanel, LayerEditorPanel, PropertiesEditorPanel} from './editor-panel';
 
 interface DeckProps {
   size?: string;
@@ -107,9 +107,12 @@ customElement<DeckProps>('md-deck', {
         <DeckContent store={store} isLoading={store.state.isLoading} />
       </div>
 
-      {/* 右侧：属性编辑表单 */}
+      {/* 右侧：属性/图层编辑面板 */}
       <Show when={store.state.isEditing && !store.state.fixed}>
-        <PropertiesEditorPanel store={store} />
+        <div class="flex gap-4">
+          <PropertiesEditorPanel store={store} />
+          <LayerEditorPanel store={store} />
+        </div>
       </Show>
     </div>
   );