From d3e0a6533eacecc50aa5c2534c5890a78ccf13e8 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Fri, 19 Feb 2021 16:55:39 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BB=A3=E7=A0=81=E5=92=8C=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Editor/Thumbnails/index.vue         | 26 +++++++------------
 src/views/Editor/index.vue                    |  4 +--
 src/views/Screen/index.vue                    |  4 +--
 src/views/components/ThumbnailSlide/index.vue |  4 +--
 4 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/src/views/Editor/Thumbnails/index.vue b/src/views/Editor/Thumbnails/index.vue
index 0f0ab408..608015ca 100644
--- a/src/views/Editor/Thumbnails/index.vue
+++ b/src/views/Editor/Thumbnails/index.vue
@@ -17,15 +17,13 @@
     >
       <template #item="{ element, index }">
         <div
-          class="thumbnail-wrapper"
-          :class="{ 'active': slideIndex === index }"
+          class="thumbnail-item"
+          :class="{ 'selected': slideIndex === index }"
           @mousedown="changSlideIndex(index)"
           v-contextmenu="contextmenusThumbnailItem"
         >
-          <div class="slide-index">{{ fillDigit(index + 1, 2) }}</div>
-          <div class="thumbnail">
-            <ThumbnailSlide :slide="element" :size="120" />
-          </div>
+          <div class="label">{{ fillDigit(index + 1, 2) }}</div>
+          <ThumbnailSlide class="thumbnail" :slide="element" :size="120" />
         </div>
       </template>
     </Draggable>
@@ -108,7 +106,7 @@ export default defineComponent({
         },
         {
           text: '开始演示',
-          subText: 'Ctrl+F',
+          subText: 'Ctrl + F',
           handler: enterScreening,
         },
       ]
@@ -150,7 +148,7 @@ export default defineComponent({
         { divider: true },
         {
           text: '从当前页演示',
-          subText: 'Ctrl+F',
+          subText: 'Ctrl + F',
           handler: enterScreening,
         },
       ]
@@ -194,7 +192,7 @@ export default defineComponent({
   flex: 1;
   overflow: auto;
 }
-.thumbnail-wrapper {
+.thumbnail-item {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -204,8 +202,8 @@ export default defineComponent({
     outline: 1px solid rgba($color: $themeColor, $alpha: .15);
   }
 
-  &.active {
-    .slide-index {
+  &.selected {
+    .label {
       color: $themeColor;
     }
     .thumbnail {
@@ -213,11 +211,7 @@ export default defineComponent({
     }
   }
 }
-.thumbnail {
-  width: 120px;
-  height: 67.5px;
-}
-.slide-index {
+.label {
   font-size: 12px;
   color: #999;
   width: 20px;
diff --git a/src/views/Editor/index.vue b/src/views/Editor/index.vue
index b1de568d..c49ab158 100644
--- a/src/views/Editor/index.vue
+++ b/src/views/Editor/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="hamster-ppt-editor">
+  <div class="pptist-editor">
     <EditorHeader class="layout-header" />
     <div class="layout-content">
       <Thumbnails class="layout-content-left" />
@@ -41,7 +41,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.hamster-ppt-editor {
+.pptist-editor {
   height: 100%;
 }
 .layout-header {
diff --git a/src/views/Screen/index.vue b/src/views/Screen/index.vue
index ea21ff66..2c3d2608 100644
--- a/src/views/Screen/index.vue
+++ b/src/views/Screen/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="hamster-ppt-screen">
+  <div class="pptist-screen">
     <div 
       class="slide-list"
       @mousewheel="$event => mousewheelListener($event)"
@@ -268,7 +268,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.hamster-ppt-screen {
+.pptist-screen {
   width: 100%;
   height: 100%;
   position: relative;
diff --git a/src/views/components/ThumbnailSlide/index.vue b/src/views/components/ThumbnailSlide/index.vue
index daff3590..6a0c15a5 100644
--- a/src/views/components/ThumbnailSlide/index.vue
+++ b/src/views/components/ThumbnailSlide/index.vue
@@ -6,7 +6,7 @@
     }"
   >
     <div 
-      class="elements-wrapper"
+      class="elements"
       :style="{
         width: VIEWPORT_SIZE + 'px',
         height: VIEWPORT_SIZE * VIEWPORT_ASPECT_RATIO + 'px',
@@ -68,7 +68,7 @@ export default defineComponent({
   background-color: #fff;
   overflow: hidden;
 }
-.elements-wrapper {
+.elements {
   transform-origin: 0 0;
 }
 .background {