添加右侧工具栏结构

src/types/toolbar.ts

@@ -1,4 +1,4 @@
-export type ToolbarState = 'elAnimation' | 'elStyle' | 'elPosition' | 'slideStyle' | 'slideAnimation' | 'multiPosition' | 'multiCommand'
+export type ToolbarState = 'elAnimation' | 'elStyle' | 'elPosition' | 'slideStyle' | 'slideAnimation' | 'multiPosition'
 
 export const ToolbarStates = {
   EL_ANIMATION: 'elAnimation',
@@ -7,5 +7,4 @@ export const ToolbarStates = {
   SLIDE_STYLE: 'slideStyle',
   SLIDE_ANIMATION: 'slideAnimation',
   MULTI_POSITION: 'multiPosition',
-  MULTI_COMMAND: 'multiCommand',
 }

src/views/Editor/Canvas/Operate/index.vue

@@ -2,7 +2,6 @@
   <div
     class="operate"
     :class="{ 'multi-select': isMultiSelect && !isActive }"
-    v-if="isSelected"
     :style="{
       top: elementInfo.top * canvasScale + 'px',
       left: elementInfo.left * canvasScale + 'px',
@@ -11,6 +10,7 @@
     }"
   >
     <component
+      v-if="isSelected"
       :is="currentOperateComponent"
       :elementInfo="elementInfo"
       :isActiveGroupElement="isActiveGroupElement"

src/views/Editor/Toolbar/ElementAnimationPanel.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="element-animation-panel">
+    element-animation-panel
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'element-animation-panel',
+})
+</script>

src/views/Editor/Toolbar/ElementPositionPanel.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="element-positopn-panel">
+    element-positopn-panel
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'element-positopn-panel',
+})
+</script>

src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="image-style-panel">
+    image-style-panel
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'image-style-panel',
+})
+</script>

src/views/Editor/Toolbar/ElementStylePanel/LineStylePanel.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="line-style-panel">
+    line-style-panel
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'line-style-panel',
+})
+</script>

src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="shape-style-panel">
+    shape-style-panel
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'shape-style-panel',
+})
+</script>

src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="text-style-panel">
+    text-style-panel
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'text-style-panel',
+})
+</script>

src/views/Editor/Toolbar/ElementStylePanel/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="element-style-panel">
+    <component :is="currentPanelComponent"></component>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, Ref } from 'vue'
+import { useStore } from 'vuex'
+import { State } from '@/store'
+import { ElementTypes, PPTElement } from '@/types/slides'
+
+import TextStylePanel from './TextStylePanel.vue'
+import ImageStylePanel from './ImageStylePanel.vue'
+import ShapeStylePanel from './ShapeStylePanel.vue'
+import LineStylePanel from './LineStylePanel.vue'
+
+export default defineComponent({
+  name: 'element-style-panel',
+  setup() {
+    const store = useStore<State>()
+    const handleElement: Ref<PPTElement> = computed(() => store.getters.handleElement)
+
+    const currentPanelComponent = computed(() => {
+      const panelMap = {
+        [ElementTypes.TEXT]: TextStylePanel,
+        [ElementTypes.IMAGE]: ImageStylePanel,
+        [ElementTypes.SHAPE]: ShapeStylePanel,
+        [ElementTypes.LINE]: LineStylePanel,
+      }
+      return panelMap[handleElement.value.type] || null
+    })
+
+    return {
+      currentPanelComponent,
+    }
+  },
+})
+</script>

src/views/Editor/Toolbar/MultiPositionPanel.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="multi-position-panel">
+    multi-position-panel
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'multi-position-panel',
+})
+</script>

src/views/Editor/Toolbar/SlideAnimationPanel.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="slide-animation-panel">
+    slide-animation-panel
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'slide-animation-panel',
+})
+</script>

src/views/Editor/Toolbar/SlideStylePanel.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="slide-style-panel">
+    slide-style-panel
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'slide-style-panel',
+})
+</script>

src/views/Editor/Toolbar/index.vue

@@ -10,7 +10,7 @@
       >{{tab.label}}</div>
     </div>
     <div class="content">
-
+      <component :is="currentPanelComponent"></component>
     </div>
   </div>
 </template>
@@ -21,6 +21,13 @@ import { useStore } from 'vuex'
 import { MutationTypes, State } from '@/store'
 import { ToolbarState, ToolbarStates } from '@/types/toolbar'
 
+import ElementStylePanel from './ElementStylePanel/index.vue'
+import ElementPositionPanel from './ElementPositionPanel.vue'
+import ElementAnimationPanel from './ElementAnimationPanel.vue'
+import SlideStylePanel from './SlideStylePanel.vue'
+import SlideAnimationPanel from './SlideAnimationPanel.vue'
+import MultiPositionPanel from './MultiPositionPanel.vue'
+
 export default defineComponent({
   name: 'toolbar',
   setup() {
@@ -38,7 +45,7 @@ export default defineComponent({
     ]
     const multiSelectTabs = [
       { label: '位置', value: ToolbarStates.MULTI_POSITION },
-      { label: '操作', value: ToolbarStates.MULTI_COMMAND },
+      { label: '样式', value: ToolbarStates.EL_STYLE },
     ]
 
     const setToolbarState = (value: ToolbarState) => {
@@ -59,10 +66,23 @@ export default defineComponent({
       }
     })
 
+    const currentPanelComponent = computed(() => {
+      const panelMap = {
+        [ToolbarStates.EL_STYLE]: ElementStylePanel,
+        [ToolbarStates.EL_POSITION]: ElementPositionPanel,
+        [ToolbarStates.EL_ANIMATION]: ElementAnimationPanel,
+        [ToolbarStates.SLIDE_STYLE]: SlideStylePanel,
+        [ToolbarStates.SLIDE_ANIMATION]: SlideAnimationPanel,
+        [ToolbarStates.MULTI_POSITION]: MultiPositionPanel,
+      }
+      return panelMap[toolbarState.value] || null
+    })
+
     return {
       toolbarState,
       currentTabs,
       setToolbarState,
+      currentPanelComponent,
     }
   },
 })