From 3c8e7759e8f80f55693c07573d4e10dea181d0ff Mon Sep 17 00:00:00 2001 From: zxc <1171051090@qq.com> Date: Sat, 8 Mar 2025 17:00:26 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E5=A4=9A=E9=80=89=E5=B7=A5=E5=85=B7?= =?UTF-8?q?=E6=A0=8F=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/types/toolbar.ts | 1 + .../Editor/Toolbar/ElementStylePanel/index.vue | 10 +--------- .../{ElementStylePanel => }/MultiStylePanel.vue | 2 +- src/views/Editor/Toolbar/index.vue | 16 ++++++++++++---- 4 files changed, 15 insertions(+), 14 deletions(-) rename src/views/Editor/Toolbar/{ElementStylePanel => }/MultiStylePanel.vue (99%) diff --git a/src/types/toolbar.ts b/src/types/toolbar.ts index 5e878816..11b8742f 100644 --- a/src/types/toolbar.ts +++ b/src/types/toolbar.ts @@ -5,5 +5,6 @@ export const enum ToolbarStates { EL_POSITION = 'elPosition', SLIDE_DESIGN = 'slideDesign', SLIDE_ANIMATION = 'slideAnimation', + MULTI_STYLE = 'multiStyle', MULTI_POSITION = 'multiPosition', } \ No newline at end of file diff --git a/src/views/Editor/Toolbar/ElementStylePanel/index.vue b/src/views/Editor/Toolbar/ElementStylePanel/index.vue index 14a015d2..01eba5d9 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/index.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/index.vue @@ -19,7 +19,6 @@ import TableStylePanel from './TableStylePanel.vue' import LatexStylePanel from './LatexStylePanel.vue' import VideoStylePanel from './VideoStylePanel.vue' import AudioStylePanel from './AudioStylePanel.vue' -import MultiStylePanel from './MultiStylePanel.vue' const panelMap = { [ElementTypes.TEXT]: TextStylePanel, @@ -33,16 +32,9 @@ const panelMap = { [ElementTypes.AUDIO]: AudioStylePanel, } -const { activeElementIdList, activeElementList, handleElement, activeGroupElementId } = storeToRefs(useMainStore()) +const { handleElement } = storeToRefs(useMainStore()) const currentPanelComponent = computed(() => { - if (activeElementIdList.value.length > 1) { - if (!activeGroupElementId.value) return MultiStylePanel - - const activeGroupElement = activeElementList.value.find(item => item.id === activeGroupElementId.value) - return activeGroupElement ? (panelMap[activeGroupElement.type] || null) : null - } - return handleElement.value ? (panelMap[handleElement.value.type] || null) : null }) \ No newline at end of file diff --git a/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue b/src/views/Editor/Toolbar/MultiStylePanel.vue similarity index 99% rename from src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue rename to src/views/Editor/Toolbar/MultiStylePanel.vue index 2cf59d79..0bd98383 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue +++ b/src/views/Editor/Toolbar/MultiStylePanel.vue @@ -139,7 +139,7 @@ import emitter, { EmitterEvents } from '@/utils/emitter' import { FONTS } from '@/configs/font' import useHistorySnapshot from '@/hooks/useHistorySnapshot' -import SVGLine from '../common/SVGLine.vue' +import SVGLine from './common/SVGLine.vue' import ColorButton from '@/components/ColorButton.vue' import TextColorButton from '@/components/TextColorButton.vue' import ColorPicker from '@/components/ColorPicker/index.vue' diff --git a/src/views/Editor/Toolbar/index.vue b/src/views/Editor/Toolbar/index.vue index d353fe0e..77f6af81 100644 --- a/src/views/Editor/Toolbar/index.vue +++ b/src/views/Editor/Toolbar/index.vue @@ -24,6 +24,7 @@ import ElementAnimationPanel from './ElementAnimationPanel.vue' import SlideDesignPanel from './SlideDesignPanel.vue' import SlideAnimationPanel from './SlideAnimationPanel.vue' import MultiPositionPanel from './MultiPositionPanel.vue' +import MultiStylePanel from './MultiStylePanel.vue' import SymbolPanel from './SymbolPanel.vue' import Tabs from '@/components/Tabs.vue' @@ -33,7 +34,7 @@ interface ElementTabs { } const mainStore = useMainStore() -const { activeElementIdList, handleElement, toolbarState } = storeToRefs(mainStore) +const { activeElementIdList, activeElementList, activeGroupElementId, handleElement, toolbarState } = storeToRefs(mainStore) const elementTabs = computed(() => { if (handleElement.value?.type === 'text') { @@ -56,8 +57,8 @@ const slideTabs = [ { label: '动画', key: ToolbarStates.EL_ANIMATION }, ] const multiSelectTabs = [ - { label: '样式', key: ToolbarStates.EL_STYLE }, - { label: '位置', key: ToolbarStates.MULTI_POSITION }, + { label: '样式（多选）', key: ToolbarStates.MULTI_STYLE }, + { label: '位置（多选）', key: ToolbarStates.MULTI_POSITION }, ] const setToolbarState = (value: ToolbarStates) => { @@ -66,7 +67,13 @@ const setToolbarState = (value: ToolbarStates) => { const currentTabs = computed(() => { if (!activeElementIdList.value.length) return slideTabs - else if (activeElementIdList.value.length > 1) return multiSelectTabs + else if (activeElementIdList.value.length > 1) { + if (!activeGroupElementId.value) return multiSelectTabs + + const activeGroupElement = activeElementList.value.find(item => item.id === activeGroupElementId.value) + if (activeGroupElement) return elementTabs.value + return multiSelectTabs + } return elementTabs.value }) @@ -84,6 +91,7 @@ const currentPanelComponent = computed(() => { [ToolbarStates.EL_ANIMATION]: ElementAnimationPanel, [ToolbarStates.SLIDE_DESIGN]: SlideDesignPanel, [ToolbarStates.SLIDE_ANIMATION]: SlideAnimationPanel, + [ToolbarStates.MULTI_STYLE]: MultiStylePanel, [ToolbarStates.MULTI_POSITION]: MultiPositionPanel, [ToolbarStates.SYMBOL]: SymbolPanel, }