From 5c26fa407d5350d188e1a45cc248c1aa331793d8 Mon Sep 17 00:00:00 2001
From: hypercross <helios.tnak@gmail.com>
Date: Sat, 28 Feb 2026 12:28:23 +0800
Subject: [PATCH] refactor: deck layer editor ui

---
 .../md-deck/editor-panel/LayerEditorPanel.tsx | 44 ++++++++++++++-----
 1 file changed, 33 insertions(+), 11 deletions(-)

diff --git a/src/components/md-deck/editor-panel/LayerEditorPanel.tsx b/src/components/md-deck/editor-panel/LayerEditorPanel.tsx
index c9bfbcc..b622888 100644
--- a/src/components/md-deck/editor-panel/LayerEditorPanel.tsx
+++ b/src/components/md-deck/editor-panel/LayerEditorPanel.tsx
@@ -25,6 +25,13 @@ export function LayerEditorPanel(props: LayerEditorPanelProps) {
     }
   };
 
+  const updateLayerFontSize = (layerProp: string, fontSize?: number) => {
+    const layer = store.state.layerConfigs.find(l => l.prop === layerProp);
+    if (layer) {
+      store.actions.updateLayerConfig(layerProp, { ...layer, fontSize });
+    }
+  };
+
   return (
     <div class="w-64 flex-shrink-0">
       <h3 class="font-bold mb-2 mt-0">图层</h3>
@@ -32,7 +39,7 @@ export function LayerEditorPanel(props: LayerEditorPanelProps) {
       <div class="space-y-2">
         <For each={store.state.layerConfigs}>
           {(layer) => (
-            <div class="flex flex-col gap-1 p-2 bg-gray-50 rounded">
+            <div class="flex flex-row flex-wrap gap-1 p-2 bg-gray-50 rounded">
               <div class="flex items-center gap-2">
                 <input
                   type="checkbox"
@@ -42,6 +49,16 @@ export function LayerEditorPanel(props: LayerEditorPanelProps) {
                 />
                 <span class="text-sm flex-1">{layer.prop}</span>
               </div>
+                <button
+                    onClick={() => store.actions.setEditingLayer(store.state.editingLayer === layer.prop ? null : layer.prop)}
+                    class={`text-xs px-2 py-1 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 class="flex items-center gap-2">
                 <select
                   value={layer.orientation || 'n'}
@@ -54,16 +71,21 @@ export function LayerEditorPanel(props: LayerEditorPanelProps) {
                     )}
                   </For>
                 </select>
-                <button
-                  onClick={() => store.actions.setEditingLayer(store.state.editingLayer === layer.prop ? null : layer.prop)}
-                  class={`text-xs px-2 py-1 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>
+              <div class="flex items-center gap-2">
+                <label class="text-xs text-gray-600">字体/mm</label>
+                <input
+                  type="number"
+                  value={layer.fontSize || ''}
+                  placeholder="默认"
+                  onChange={(e) => {
+                    const value = e.target.value;
+                    updateLayerFontSize(layer.prop, value ? Number(value) : undefined);
+                  }}
+                  class="w-16 text-xs px-2 py-1 rounded border border-gray-300 bg-white"
+                  step="0.1"
+                  min="0.1"
+                />
               </div>
             </div>
           )}