refactor: deck layer editor ui

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
+              </div>
-                  onClick={() => store.actions.setEditingLayer(store.state.editingLayer === layer.prop ? null : layer.prop)}
+              <div class="flex items-center gap-2">
-                  class={`text-xs px-2 py-1 rounded cursor-pointer ${
+                <label class="text-xs text-gray-600">字体/mm</label>
-                    store.state.editingLayer === layer.prop
+                <input
-                      ? 'bg-blue-500 text-white'
+                  type="number"
-                      : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+                  value={layer.fontSize || ''}
-                  }`}
+                  placeholder="默认"
-                >
+                  onChange={(e) => {
-                  {store.state.editingLayer === layer.prop ? '✓ 框选' : '框选'}
+                    const value = e.target.value;
-                </button>
+                    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>
           )}