github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: 多选工具栏显示逻辑优化

Browse Source
This commit is contained in:
zxc 2025-03-08 17:00:26 +08:00
parent db4a16f50e
commit 3c8e7759e8
4 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/types/toolbar.ts
View File

@ -5,5 +5,6 @@ export const enum ToolbarStates {
EL_POSITION = 'elPosition', EL_POSITION = 'elPosition',
SLIDE_DESIGN = 'slideDesign', SLIDE_DESIGN = 'slideDesign',
SLIDE_ANIMATION = 'slideAnimation', SLIDE_ANIMATION = 'slideAnimation',
MULTI_STYLE = 'multiStyle',
MULTI_POSITION = 'multiPosition', MULTI_POSITION = 'multiPosition',
} }

10
src/views/Editor/Toolbar/ElementStylePanel/index.vue
View File

@ -19,7 +19,6 @@ import TableStylePanel from './TableStylePanel.vue'
import LatexStylePanel from './LatexStylePanel.vue' import LatexStylePanel from './LatexStylePanel.vue'
import VideoStylePanel from './VideoStylePanel.vue' import VideoStylePanel from './VideoStylePanel.vue'
import AudioStylePanel from './AudioStylePanel.vue' import AudioStylePanel from './AudioStylePanel.vue'
import MultiStylePanel from './MultiStylePanel.vue'
const panelMap = { const panelMap = {
[ElementTypes.TEXT]: TextStylePanel, [ElementTypes.TEXT]: TextStylePanel,
@ -33,16 +32,9 @@ const panelMap = {
[ElementTypes.AUDIO]: AudioStylePanel, [ElementTypes.AUDIO]: AudioStylePanel,
} }
const { activeElementIdList, activeElementList, handleElement, activeGroupElementId } = storeToRefs(useMainStore()) const { handleElement } = storeToRefs(useMainStore())
const currentPanelComponent = computed<unknown>(() => { const currentPanelComponent = computed<unknown>(() => {
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 return handleElement.value ? (panelMap[handleElement.value.type] || null) : null
}) })
</script> </script>

2
src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue → src/views/Editor/Toolbar/MultiStylePanel.vue
View File

@ -139,7 +139,7 @@ import emitter, { EmitterEvents } from '@/utils/emitter'
import { FONTS } from '@/configs/font' import { FONTS } from '@/configs/font'
import useHistorySnapshot from '@/hooks/useHistorySnapshot' import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import SVGLine from '../common/SVGLine.vue' import SVGLine from './common/SVGLine.vue'
import ColorButton from '@/components/ColorButton.vue' import ColorButton from '@/components/ColorButton.vue'
import TextColorButton from '@/components/TextColorButton.vue' import TextColorButton from '@/components/TextColorButton.vue'
import ColorPicker from '@/components/ColorPicker/index.vue' import ColorPicker from '@/components/ColorPicker/index.vue'

16
src/views/Editor/Toolbar/index.vue
View File

@ -24,6 +24,7 @@ import ElementAnimationPanel from './ElementAnimationPanel.vue'
import SlideDesignPanel from './SlideDesignPanel.vue' import SlideDesignPanel from './SlideDesignPanel.vue'
import SlideAnimationPanel from './SlideAnimationPanel.vue' import SlideAnimationPanel from './SlideAnimationPanel.vue'
import MultiPositionPanel from './MultiPositionPanel.vue' import MultiPositionPanel from './MultiPositionPanel.vue'
import MultiStylePanel from './MultiStylePanel.vue'
import SymbolPanel from './SymbolPanel.vue' import SymbolPanel from './SymbolPanel.vue'
import Tabs from '@/components/Tabs.vue' import Tabs from '@/components/Tabs.vue'
@ -33,7 +34,7 @@ interface ElementTabs {
} }
const mainStore = useMainStore() const mainStore = useMainStore()
const { activeElementIdList, handleElement, toolbarState } = storeToRefs(mainStore) const { activeElementIdList, activeElementList, activeGroupElementId, handleElement, toolbarState } = storeToRefs(mainStore)
const elementTabs = computed<ElementTabs[]>(() => { const elementTabs = computed<ElementTabs[]>(() => {
if (handleElement.value?.type === 'text') { if (handleElement.value?.type === 'text') {
@ -56,8 +57,8 @@ const slideTabs = [
{ label: '动画', key: ToolbarStates.EL_ANIMATION }, { label: '动画', key: ToolbarStates.EL_ANIMATION },
] ]
const multiSelectTabs = [ const multiSelectTabs = [
{ label: '样式', key: ToolbarStates.EL_STYLE }, { label: '样式（多选）', key: ToolbarStates.MULTI_STYLE },
{ label: '位置', key: ToolbarStates.MULTI_POSITION }, { label: '位置（多选）', key: ToolbarStates.MULTI_POSITION },
] ]
const setToolbarState = (value: ToolbarStates) => { const setToolbarState = (value: ToolbarStates) => {
@ -66,7 +67,13 @@ const setToolbarState = (value: ToolbarStates) => {
const currentTabs = computed(() => { const currentTabs = computed(() => {
if (!activeElementIdList.value.length) return slideTabs 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 return elementTabs.value
}) })
@ -84,6 +91,7 @@ const currentPanelComponent = computed(() => {
[ToolbarStates.EL_ANIMATION]: ElementAnimationPanel, [ToolbarStates.EL_ANIMATION]: ElementAnimationPanel,
[ToolbarStates.SLIDE_DESIGN]: SlideDesignPanel, [ToolbarStates.SLIDE_DESIGN]: SlideDesignPanel,
[ToolbarStates.SLIDE_ANIMATION]: SlideAnimationPanel, [ToolbarStates.SLIDE_ANIMATION]: SlideAnimationPanel,
[ToolbarStates.MULTI_STYLE]: MultiStylePanel,
[ToolbarStates.MULTI_POSITION]: MultiPositionPanel, [ToolbarStates.MULTI_POSITION]: MultiPositionPanel,
[ToolbarStates.SYMBOL]: SymbolPanel, [ToolbarStates.SYMBOL]: SymbolPanel,
} }