perf: 页面设计栏优化

src/store/state.ts

@@ -48,7 +48,7 @@ export const state: State = {
   showGridLines: false, // 显示网格线
   creatingElement: null, // 正在插入的元素信息，需要绘制插入的元素需要（文字、形状、线条）
   availableFonts: [], // 当前环境可用字体
-  toolbarState: 'slideStyle', // 右侧工具栏状态
+  toolbarState: 'slideDesign', // 右侧工具栏状态
   viewportRatio: 0.5625, // 可是区域比例，默认16:9
   theme: theme, // 主题样式
   slides: slides, // 幻灯片页面数据

src/types/toolbar.ts

@@ -1,10 +1,10 @@
-export type ToolbarState = 'elAnimation' | 'elStyle' | 'elPosition' | 'slideStyle' | 'slideAnimation' | 'multiPosition'
+export type ToolbarState = 'elAnimation' | 'elStyle' | 'elPosition' | 'slideDesign' | 'slideAnimation' | 'multiPosition'
 
 export const ToolbarStates = {
   EL_ANIMATION: 'elAnimation',
   EL_STYLE: 'elStyle',
   EL_POSITION: 'elPosition',
-  SLIDE_STYLE: 'slideStyle',
+  SLIDE_DESIGN: 'slideDesign',
   SLIDE_ANIMATION: 'slideAnimation',
   MULTI_POSITION: 'multiPosition',
 }

src/views/Editor/Toolbar/SlideDesignPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="slide-style-panel">
+  <div class="slide-design-panel">
     <div class="title">背景填充</div>
     <div class="row">
       <Select 
@@ -166,8 +166,10 @@
       </Popover>
     </div>
 
-    <div class="title" style="margin-top: 20px;">预置主题：</div>
+    <div class="title dropdown" :class="{ 'active': showPresetThemes }" @click="togglePresetThemesVisible()" style="margin-top: 20px;">
-    <div class="theme-list">
+      预置主题 <IconDown class="icon" />
+    </div>
+    <div class="theme-list" v-if="showPresetThemes">
       <div 
         class="theme-item" 
         v-for="(item, index) in themes" 
@@ -191,7 +193,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
 import { MutationTypes, useStore } from '@/store'
 import { Slide, SlideBackground, SlideTheme } from '@/types/slides'
 import { PRESET_THEMES } from '@/configs/theme'
@@ -205,7 +207,7 @@ const themes = PRESET_THEMES
 const webFonts = WEB_FONTS
 
 export default defineComponent({
-  name: 'slide-style-panel',
+  name: 'slide-design-panel',
   components: {
     ColorButton,
   },
@@ -335,6 +337,12 @@ export default defineComponent({
       addHistorySnapshot()
     }
 
+    // 是否显示预设主题
+    const showPresetThemes = ref(true)
+    const togglePresetThemesVisible = () => {
+      showPresetThemes.value = !showPresetThemes.value
+    }
+
     // 设置画布尺寸（宽高比例）
     const updateViewportRatio = (value: number) => {
       store.commit(MutationTypes.SET_VIEWPORT_RATIO, value)
@@ -354,12 +362,17 @@ export default defineComponent({
       applyThemeAllSlide,
       viewportRatio,
       updateViewportRatio,
+      showPresetThemes,
+      togglePresetThemesVisible,
     }
   },
 })
 </script>
 
 <style lang="scss" scoped>
+.slide-design-panel {
+  user-select: none;
+}
 .row {
   width: 100%;
   display: flex;
@@ -368,6 +381,21 @@ export default defineComponent({
 }
 .title {
   margin-bottom: 10px;
+
+  &.dropdown {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    .icon {
+      margin-left: 5px;
+      transition: transform $transitionDelayFast;
+    }
+
+    &:not(.active) .icon {
+      transform: rotate(-90deg);
+    }
+  }
 }
 .background-image-wrapper {
   margin-bottom: 10px;

src/views/Editor/Toolbar/index.vue

@@ -23,7 +23,7 @@ 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 SlideDesignPanel from './SlideDesignPanel.vue'
 import SlideAnimationPanel from './SlideAnimationPanel.vue'
 import MultiPositionPanel from './MultiPositionPanel.vue'
 
@@ -39,7 +39,7 @@ export default defineComponent({
       { label: '动画', value: ToolbarStates.EL_ANIMATION },
     ]
     const slideTabs = [
-      { label: '页面样式', value: ToolbarStates.SLIDE_STYLE },
+      { label: '设计', value: ToolbarStates.SLIDE_DESIGN },
       { label: '切换', value: ToolbarStates.SLIDE_ANIMATION },
       { label: '动画', value: ToolbarStates.EL_ANIMATION },
     ]
@@ -71,7 +71,7 @@ export default defineComponent({
         [ToolbarStates.EL_STYLE]: ElementStylePanel,
         [ToolbarStates.EL_POSITION]: ElementPositionPanel,
         [ToolbarStates.EL_ANIMATION]: ElementAnimationPanel,
-        [ToolbarStates.SLIDE_STYLE]: SlideStylePanel,
+        [ToolbarStates.SLIDE_DESIGN]: SlideDesignPanel,
         [ToolbarStates.SLIDE_ANIMATION]: SlideAnimationPanel,
         [ToolbarStates.MULTI_POSITION]: MultiPositionPanel,
       }