perf: 样式和代码优化

src/views/Editor/EditorHeader/index.vue

@@ -1,10 +1,8 @@
 <template>
   <div class="editor-header">
     <div class="left">
-      <Dropdown :trigger="['click']" @visibleChange="visible => editDropdownVisible = visible">
-        <div class="menu-item" :class="['dropdown-menu', { 'active': editDropdownVisible }]">
-          <IconEdit /> <span class="text">编辑</span>
-        </div>
+      <Dropdown :trigger="['click']">
+        <div class="menu-item"><IconEdit /> <span class="text">编辑</span></div>
         <template #overlay>
           <Menu>
             <MenuItem @click="undo()">撤销</MenuItem>
@@ -16,10 +14,8 @@
           </Menu>
         </template>
       </Dropdown>
-      <Dropdown :trigger="['click']" @visibleChange="visible => screenDropdownVisible = visible">
-        <div class="menu-item" :class="['dropdown-menu', { 'active': screenDropdownVisible }]">
-          <IconPpt /> <span class="text">演示</span>
-        </div>
+      <Dropdown :trigger="['click']">
+        <div class="menu-item"><IconPpt /> <span class="text">演示</span></div>
         <template #overlay>
           <Menu>
             <MenuItem @click="enterScreeningFromStart()">从头开始</MenuItem>
@@ -27,10 +23,8 @@
           </Menu>
         </template>
       </Dropdown>
-      <Dropdown :trigger="['click']" @visibleChange="visible => helpDropdownVisible = visible">
-        <div class="menu-item" :class="['dropdown-menu', { 'active': helpDropdownVisible }]">
-          <IconHelpcenter /> <span class="text">帮助</span>
-        </div>
+      <Dropdown :trigger="['click']">
+        <div class="menu-item"><IconHelpcenter /> <span class="text">帮助</span></div>
         <template #overlay>
           <Menu>
             <MenuItem @click="openDoc()">开发文档</MenuItem>
@@ -84,10 +78,6 @@ export default defineComponent({
     const { createSlide, deleteSlide, resetSlides } = useSlideHandler()
     const { redo, undo } = useHistorySnapshot()
 
-    const editDropdownVisible = ref(false)
-    const screenDropdownVisible = ref(false)
-    const helpDropdownVisible = ref(false)
-
     const showGridLines = computed(() => store.state.showGridLines)
     const toggleGridLines = () => {
       store.commit(MutationTypes.SET_GRID_LINES_STATE, !showGridLines.value)
@@ -111,9 +101,6 @@ export default defineComponent({
       resetSlides,
       openDoc,
       hotkeyDrawerVisible,
-      editDropdownVisible,
-      screenDropdownVisible,
-      helpDropdownVisible,
     }
   },
 })
@@ -140,18 +127,15 @@ export default defineComponent({
   align-items: center;
   font-size: 13px;
   padding: 0 10px;
+  transition: background-color .2s;
   cursor: pointer;
 
+  &:hover {
+    background-color: $lightGray;
+  }
+
   .text {
     margin-left: 4px;
   }
 }
-
-.dropdown-menu {
-  transition: background-color .2s;
-
-  &.active {
-    background-color: $lightGray;
-  }
-}
 </style>

src/views/Editor/Toolbar/SlideStylePanel.vue

@@ -98,6 +98,17 @@
 
     <Divider />
 
+    <div class="row">
+      <div style="flex: 2;">画布尺寸：</div>
+      <Select style="flex: 3;" :value="viewportRatio" @change="value => updateViewportRatio(value)">
+        <SelectOption :value="0.5625">宽屏 16 : 9</SelectOption>
+        <SelectOption :value="0.625">宽屏 16 ：10</SelectOption>
+        <SelectOption :value="0.75">标准 4 ：3</SelectOption>
+      </Select>
+    </div>
+
+    <Divider />
+
     <div class="title">全局主题</div>
     <div class="row">
       <div style="flex: 2;">字体：</div>
@@ -176,17 +187,6 @@
     </div>
 
     <div class="row"><Button style="flex: 1;" @click="applyThemeAllSlide()">应用主题到全部</Button></div>
-
-    <Divider />
-
-    <div class="row">
-      <div style="flex: 2;">画布尺寸：</div>
-      <Select style="flex: 3;" :value="viewportRatio" @change="value => updateViewportRatio(value)">
-        <SelectOption :value="0.5625">宽屏 16 : 9</SelectOption>
-        <SelectOption :value="0.625">宽屏 16 ：10</SelectOption>
-        <SelectOption :value="0.75">标准 4 ：3</SelectOption>
-      </Select>
-    </div>
   </div>
 </template>
 

src/views/components/element/TableElement/CustomTextarea.vue

@@ -81,4 +81,11 @@ export default defineComponent({
     }
   },
 })
-</script>
+</script>
+
+<style lang="scss" scoped>
+.custom-textarea {
+  border: 0;
+  outline: 0;
+}
+</style>

src/views/components/element/TableElement/EditableTable.vue

@@ -706,8 +706,6 @@ table {
   .cell-text {
     min-height: 32px;
     padding: 5px;
-    border: 0;
-    outline: 0;
     line-height: 1.5;
     user-select: none;
     cursor: text;