hypercross
/
ttrpg-tools
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: deck layer editor ui

This commit is contained in:
hypercross 2026-02-28 12:28:23 +08:00
parent f53dc847ca
commit 5c26fa407d
1 changed files with 33 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/md-deck/editor-panel/LayerEditorPanel.tsx
View File

@ -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>
)}