From cd5741692abb1e4e958e948924fb4ce9b026696a Mon Sep 17 00:00:00 2001 From: hypercross Date: Mon, 30 Mar 2026 12:54:53 +0800 Subject: [PATCH] refactor: alignment icons --- .../md-deck/editor-panel/LayerEditorPanel.tsx | 30 ++++++++++-------- .../editor-panel/icons/align-center.png | Bin 0 -> 1002 bytes .../md-deck/editor-panel/icons/align-left.png | Bin 0 -> 1006 bytes .../editor-panel/icons/align-right.png | Bin 0 -> 996 bytes 4 files changed, 16 insertions(+), 14 deletions(-) create mode 100644 src/components/md-deck/editor-panel/icons/align-center.png create mode 100644 src/components/md-deck/editor-panel/icons/align-left.png create mode 100644 src/components/md-deck/editor-panel/icons/align-right.png 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 0000000000000000000000000000000000000000..171c8c721926d96dd68f37e2c3d3d2f47bfc8af2 GIT binary patch literal 1002 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