From a5faf03588dafdc8f1576a44e3dbb8535adabccc Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Thu, 5 Aug 2021 21:19:20 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E9=A1=B5=E9=9D=A2=E8=AE=BE=E8=AE=A1?=
 =?UTF-8?q?=E6=A0=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/state.ts                            |  2 +-
 src/types/toolbar.ts                          |  4 +-
 ...ideStylePanel.vue => SlideDesignPanel.vue} | 38 ++++++++++++++++---
 src/views/Editor/Toolbar/index.vue            |  6 +--
 4 files changed, 39 insertions(+), 11 deletions(-)
 rename src/views/Editor/Toolbar/{SlideStylePanel.vue => SlideDesignPanel.vue} (93%)

diff --git a/src/store/state.ts b/src/store/state.ts
index 6568ab91..642bc311 100644
--- a/src/store/state.ts
+++ b/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, // 幻灯片页面数据
diff --git a/src/types/toolbar.ts b/src/types/toolbar.ts
index fb7822a4..9f412976 100644
--- a/src/types/toolbar.ts
+++ b/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',
 }
\ No newline at end of file
diff --git a/src/views/Editor/Toolbar/SlideStylePanel.vue b/src/views/Editor/Toolbar/SlideDesignPanel.vue
similarity index 93%
rename from src/views/Editor/Toolbar/SlideStylePanel.vue
rename to src/views/Editor/Toolbar/SlideDesignPanel.vue
index fb3de198..59eee20c 100644
--- a/src/views/Editor/Toolbar/SlideStylePanel.vue
+++ b/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="theme-list">
+    <div class="title dropdown" :class="{ 'active': showPresetThemes }" @click="togglePresetThemesVisible()" style="margin-top: 20px;">
+      预置主题 <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;
diff --git a/src/views/Editor/Toolbar/index.vue b/src/views/Editor/Toolbar/index.vue
index 099e76fc..e9cceb47 100644
--- a/src/views/Editor/Toolbar/index.vue
+++ b/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,
       }