PPTist 幻灯片工具栏Toolbar部分

工具栏目录：

common是一些公用属性的文件，包含一些蒙版颜色、启用滤镜、翻转等样式
ElementStylePanel是一些元素样式
SlideDesignPanel是幻灯片的样式
当下目录也有一些 ElementAnimationPanel(元素动画)和ElementPositopnPanel（元素位置）面板、MultiPositionPanel和MultiStylePanel面板、SlideAnimationPanel

设计了三种情况下的工具栏：

单选元素状态
选择幻灯片缩略图状态
多选元素状态

const elementTabs = [
{ label: '样式', key: ToolbarStates.EL_STYLE },
{ label: '位置', key: ToolbarStates.EL_POSITION },
{ label: '动画', key: ToolbarStates.EL_ANIMATION },
]
const slideTabs = [
{ label: '设计', key: ToolbarStates.SLIDE_DESIGN },
{ label: '切换', key: ToolbarStates.SLIDE_ANIMATION },
{ label: '动画', key: ToolbarStates.EL_ANIMATION },
]
const multiSelectTabs = [
{ label: '样式（多选）', key: ToolbarStates.MULTI_STYLE },
{ label: '位置（多选）', key: ToolbarStates.MULTI_POSITION },
]

//面板的映射
const currentPanelComponent = computed(() => {
const panelMap = {
[ToolbarStates.EL_STYLE]: ElementStylePanel,
[ToolbarStates.EL_POSITION]: ElementPositionPanel,
[ToolbarStates.EL_ANIMATION]: ElementAnimationPanel,
[ToolbarStates.SLIDE_DESIGN]: SlideDesignPanel,
[ToolbarStates.SLIDE_ANIMATION]: SlideAnimationPanel,
[ToolbarStates.MULTI_STYLE]: MultiStylePanel,
[ToolbarStates.MULTI_POSITION]: MultiPositionPanel,
}
return panelMap[toolbarState.value] || null
})

activeElementIdList.value的值是选择元素的值，存在以下几种情况：

activeElementIdList.length === 0：未选中 → 显示 slideTabs（幻灯片相关属性面板）
activeElementIdList.length === 1：单选 → 显示 elementTabs（单个元素属性面板）
activeElementIdList.length > 1：多选

- 检查activeGroupElementId，如果为空，说明是普通多选，显示多选标签页
- 不为空，就是组合内单选了一个元素，查找 activeGroupElementId 对应的元素是否在 activeElementList中，如果找到，说明是在组合内选中了某个子元素，显示elementTabs，没有找到就是multiSelectTabs（多选样式面板）
  
  const currentTabs = computed(() => {
  if (!activeElementIdList.value.length) return slideTabs
  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
return multiSelectTabs
```
  }
  return elementTabs
  })

watch监听currentTabs的变化

复制代码

watch(currentTabs, () => {
  const currentTabsValue: ToolbarStates[] = currentTabs.value.map(tab => tab.key)
  if (!currentTabsValue.includes(toolbarState.value)) {
    mainStore.setToolbarState(currentTabsValue[0])
  }
})

执行流程：

监听 currentTabs 的变化（由 activeElementIdList、activeGroupElementId 等驱动）
提取新标签页的 key 数组：currentTabsValue
检查当前 toolbarState 是否在新列表中
如果不在，自动切换到第一个可用标签页：currentTabsValue $0$