diff --git a/src/components/md-deck/editor-panel/LayerEditorPanel.tsx b/src/components/md-deck/editor-panel/LayerEditorPanel.tsx
index 1951473..f589982 100644
--- a/src/components/md-deck/editor-panel/LayerEditorPanel.tsx
+++ b/src/components/md-deck/editor-panel/LayerEditorPanel.tsx
@@ -1,5 +1,8 @@
import { For, createSignal, onCleanup, onMount } from 'solid-js';
import type { DeckStore } from '../hooks/deckStore';
+import alignLeftIcon from './icons/align-left.png';
+import alignCenterIcon from './icons/align-center.png';
+import alignRightIcon from './icons/align-right.png';
export interface LayerEditorPanelProps {
store: DeckStore;
@@ -13,10 +16,10 @@ const ORIENTATION_OPTIONS = [
] as const;
const ALIGN_OPTIONS = [
- { value: '', label: '默认' },
- { value: 'l', label: '← 左' },
- { value: 'c', label: '≡ 中' },
- { value: 'r', label: '→ 右' }
+ { value: '', label: '默认', icon: alignCenterIcon },
+ { value: 'l', label: '左对齐', icon: alignLeftIcon },
+ { value: 'c', label: '居中', icon: alignCenterIcon },
+ { value: 'r', label: '右对齐', icon: alignRightIcon }
] as const;
const FONT_PRESETS = [3, 5, 8, 12] as const;
@@ -31,12 +34,11 @@ function OrientationIcon(value: string): string {
}
}
-function AlignIcon(value: string): string {
+function AlignIconSrc(value: string): string {
switch (value) {
- case 'l': return '⫷';
- case 'c': return '≡';
- case 'r': return '⫸';
- default: return '≡';
+ case 'l': return alignLeftIcon;
+ case 'r': return alignRightIcon;
+ default: return alignCenterIcon;
}
}
@@ -172,12 +174,12 @@ function LayerEditorPanel(props: LayerEditorPanelProps) {
e.stopPropagation();
setOpenDropdown(openDropdown() === `align-${layer.prop}` ? null : `align-${layer.prop}`);
}}
- class={`w-7 h-7 text-sm rounded cursor-pointer flex items-center justify-center bg-gray-200 text-gray-700 hover:bg-gray-300 ${
+ class={`w-7 h-7 rounded cursor-pointer flex items-center justify-center bg-gray-200 hover:bg-gray-300 ${
!layer.visible ? 'invisible pointer-events-none' : ''
}`}
title="对齐"
>
- {AlignIcon(layer.align || '')}
+
{openDropdown() === `align-${layer.prop}` && (