refactor: alignment icons

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: '', label: '默认', icon: alignCenterIcon },
-  { value: 'l', label: '← 左' },
+  { value: 'l', label: '左对齐', icon: alignLeftIcon },
-  { value: 'c', label: '≡ 中' },
+  { value: 'c', label: '居中', icon: alignCenterIcon },
-  { value: 'r', label: '→ 右' }
+  { 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 'l': return alignLeftIcon;
-    case 'c': return '≡';
+    case 'r': return alignRightIcon;
-    case 'r': return '⫸';
+    default: return alignCenterIcon;
-    default: return '≡';
   }
 }
 
@@ -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 || '')}
+                  <img src={AlignIconSrc(layer.align || '')} alt="align" class="w-5 h-5 not-prose" />
                 </button>
                 {openDropdown() === `align-${layer.prop}` && (
                   <div 
@@ -188,9 +190,9 @@ function LayerEditorPanel(props: LayerEditorPanelProps) {
                       {(opt) => (
                         <button
                           onClick={() => updateLayerAlign(layer.prop, opt.value as 'l' | 'c' | 'r' | undefined || undefined)}
-                          class="block w-full text-left px-3 py-1.5 text-sm hover:bg-gray-100 cursor-pointer whitespace-nowrap"
+                          class="flex items-center gap-2 w-full px-3 py-1.5 text-sm hover:bg-gray-100 cursor-pointer whitespace-nowrap"
                         >
-                          {opt.label}
+                          <img src={opt.icon} alt="" class="w-4 h-4 not-prose max-w-none" />
                         </button>
                       )}
                     </For>
@@ -273,4 +275,4 @@ function LayerEditorPanel(props: LayerEditorPanelProps) {
   );
 }
 
-export { LayerEditorPanel };
+export { LayerEditorPanel };