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 || '')} + align {openDropdown() === `align-${layer.prop}` && (
( )} @@ -273,4 +275,4 @@ function LayerEditorPanel(props: LayerEditorPanelProps) { ); } -export { LayerEditorPanel }; \ No newline at end of file +export { LayerEditorPanel }; diff --git a/src/components/md-deck/editor-panel/icons/align-center.png b/src/components/md-deck/editor-panel/icons/align-center.png new file mode 100644 index 0000000..171c8c7 Binary files /dev/null and b/src/components/md-deck/editor-panel/icons/align-center.png differ diff --git a/src/components/md-deck/editor-panel/icons/align-left.png b/src/components/md-deck/editor-panel/icons/align-left.png new file mode 100644 index 0000000..8bd0a71 Binary files /dev/null and b/src/components/md-deck/editor-panel/icons/align-left.png differ diff --git a/src/components/md-deck/editor-panel/icons/align-right.png b/src/components/md-deck/editor-panel/icons/align-right.png new file mode 100644 index 0000000..1e2008e Binary files /dev/null and b/src/components/md-deck/editor-panel/icons/align-right.png differ