perf: 代码优化、UI优化

src/assets/styles/antd.scss

@@ -21,10 +21,8 @@
 }
 .ant-dropdown-menu {
   box-shadow: $boxShadow;
-  border: 1px solid $borderColor;
 }
 .ant-dropdown-menu-item {
-  transition: none;
 
   &:hover {
     background-color: rgba($color: $themeColor, $alpha: .2);

src/components/ColorPicker/index.vue

@@ -57,7 +57,7 @@
       ></div>
     </div>
 
-    <div class="recent-colors-title">最近使用：</div>
+    <div class="recent-colors-title" v-if="recentColors.length">最近使用：</div>
     <div class="recent-colors">
       <div
         v-for="c in recentColors"

src/store/actions.ts

@@ -2,28 +2,28 @@ import { ActionTree } from 'vuex'
 import { IndexableTypeArray } from 'dexie'
 import { State } from './state'
 import { ActionTypes, MutationTypes } from './constants'
-import db, { Snapshot } from '@/utils/database'
+import { snapshotDB, Snapshot } from '@/utils/database'
 
 export const actions: ActionTree<State, State> = {
   async [ActionTypes.INIT_SNAPSHOT_DATABASE]({ commit, state }) {
-    const snapshots: Snapshot[] = await db.snapshots.orderBy('id').toArray()
+    const snapshots: Snapshot[] = await snapshotDB.snapshots.orderBy('id').toArray()
     const lastSnapshot = snapshots.slice(-1)[0]
 
     if (lastSnapshot) {
-      db.snapshots.clear()
+      snapshotDB.snapshots.clear()
     }
 
     const newFirstSnapshot = {
       index: state.slideIndex,
       slides: state.slides,
     }
-    await db.snapshots.add(newFirstSnapshot)
+    await snapshotDB.snapshots.add(newFirstSnapshot)
     commit(MutationTypes.SET_SNAPSHOT_CURSOR, 0)
     commit(MutationTypes.SET_SNAPSHOT_LENGTH, 1)
   },
 
   async [ActionTypes.ADD_SNAPSHOT]({ state, commit }) {
-    const allKeys = await db.snapshots.orderBy('id').keys()
+    const allKeys = await snapshotDB.snapshots.orderBy('id').keys()
 
     let needDeleteKeys: IndexableTypeArray = []
 
@@ -35,7 +35,7 @@ export const actions: ActionTree<State, State> = {
       index: state.slideIndex,
       slides: state.slides,
     }
-    await db.snapshots.add(snapshot)
+    await snapshotDB.snapshots.add(snapshot)
 
     let snapshotLength = allKeys.length - needDeleteKeys.length + 1
 
@@ -44,10 +44,10 @@ export const actions: ActionTree<State, State> = {
       snapshotLength--
     }
     if (snapshotLength >= 2) {
-      db.snapshots.update(allKeys[snapshotLength - 2] as number, { index: state.slideIndex })
+      snapshotDB.snapshots.update(allKeys[snapshotLength - 2] as number, { index: state.slideIndex })
     }
 
-    await db.snapshots.bulkDelete(needDeleteKeys)
+    await snapshotDB.snapshots.bulkDelete(needDeleteKeys)
 
     commit(MutationTypes.SET_SNAPSHOT_CURSOR, snapshotLength - 1)
     commit(MutationTypes.SET_SNAPSHOT_LENGTH, snapshotLength)
@@ -57,7 +57,7 @@ export const actions: ActionTree<State, State> = {
     if (state.snapshotCursor <= 0) return
 
     const snapshotCursor = state.snapshotCursor - 1
-    const snapshots: Snapshot[] = await db.snapshots.orderBy('id').toArray()
+    const snapshots: Snapshot[] = await snapshotDB.snapshots.orderBy('id').toArray()
     const snapshot = snapshots[snapshotCursor]
     const { index, slides } = snapshot
 
@@ -71,7 +71,7 @@ export const actions: ActionTree<State, State> = {
     if (state.snapshotCursor >= state.snapshotLength - 1) return
 
     const snapshotCursor = state.snapshotCursor + 1
-    const snapshots: Snapshot[] = await db.snapshots.orderBy('id').toArray()
+    const snapshots: Snapshot[] = await snapshotDB.snapshots.orderBy('id').toArray()
     const snapshot = snapshots[snapshotCursor]
     const { index, slides } = snapshot
 

src/utils/database.ts

@@ -18,4 +18,4 @@ class SnapshotDatabase extends Dexie {
   }
 }
 
-export default new SnapshotDatabase()
+export const snapshotDB = new SnapshotDatabase()

src/views/Editor/Canvas/ElementCreateSelection.vue

@@ -15,7 +15,7 @@
       >
 				<path
           :d="lineData.path" 
-          stroke="#888" 
+          stroke="#d14424" 
           fill="none" 
           stroke-width="1" 
           stroke-linecap 
@@ -200,9 +200,10 @@ export default defineComponent({
 }
 .selection {
   position: absolute;
+  opacity: .8;
 
   &:not(.line) {
-    border: 1px solid #888;
+    border: 1px solid $themeColor;
   }
 }
 </style>

src/views/Editor/Canvas/ViewportBackground.vue

@@ -1,6 +1,6 @@
 <template>
   <div 
-    class="slide-background"
+    class="viewport-background"
     :style="backgroundStyle"
   >
     <GridLines v-if="showGridLines" />
@@ -15,7 +15,7 @@ import GridLines from './GridLines.vue'
 import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
 
 export default defineComponent({
-  name: 'slide-background',
+  name: 'viewport-background',
   components: {
     GridLines,
   },
@@ -35,7 +35,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.slide-background {
+.viewport-background {
   width: 100%;
   height: 100%;
   background-position: center;

src/views/Editor/Canvas/index.vue

@@ -45,7 +45,7 @@
           :scaleElement="scaleElement"
           :dragLineElement="dragLineElement"
         />
-        <SlideBackground />
+        <ViewportBackground />
       </div>
 
       <div 
@@ -101,7 +101,7 @@ import useScreening from '@/hooks/useScreening'
 
 import EditableElement from './EditableElement.vue'
 import MouseSelection from './MouseSelection.vue'
-import SlideBackground from './SlideBackground.vue'
+import ViewportBackground from './ViewportBackground.vue'
 import AlignmentLine from './AlignmentLine.vue'
 import ElementCreateSelection from './ElementCreateSelection.vue'
 import MultiSelectOperate from './Operate/MultiSelectOperate.vue'
@@ -112,7 +112,7 @@ export default defineComponent({
   components: {
     EditableElement,
     MouseSelection,
-    SlideBackground,
+    ViewportBackground,
     AlignmentLine,
     ElementCreateSelection,
     MultiSelectOperate,

src/views/Editor/EditorHeader/index.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="editor-header">
     <div class="left">
-      <Dropdown :trigger="['click']">
-        <div class="menu-item"><IconEdit /> <span class="text">编辑</span></div>
+      <Dropdown :trigger="['click']" @visibleChange="visible => editDropdownVisible = visible">
+        <div class="menu-item" :class="['dropdown-menu', { 'active': editDropdownVisible }]">
+          <IconEdit /> <span class="text">编辑</span>
+        </div>
         <template #overlay>
           <Menu>
             <MenuItem @click="undo()">撤销</MenuItem>
@@ -14,8 +16,10 @@
           </Menu>
         </template>
       </Dropdown>
-      <Dropdown :trigger="['click']">
-        <div class="menu-item"><IconPpt /> <span class="text">演示</span></div>
+      <Dropdown :trigger="['click']" @visibleChange="visible => screenDropdownVisible = visible">
+        <div class="menu-item" :class="['dropdown-menu', { 'active': screenDropdownVisible }]">
+          <IconPpt /> <span class="text">演示</span>
+        </div>
         <template #overlay>
           <Menu>
             <MenuItem @click="enterScreeningFromStart()">从头开始</MenuItem>
@@ -23,8 +27,10 @@
           </Menu>
         </template>
       </Dropdown>
-      <Dropdown :trigger="['click']">
-        <div class="menu-item"><IconHelpcenter /> <span class="text">帮助</span></div>
+      <Dropdown :trigger="['click']" @visibleChange="visible => helpDropdownVisible = visible">
+        <div class="menu-item" :class="['dropdown-menu', { 'active': helpDropdownVisible }]">
+          <IconHelpcenter /> <span class="text">帮助</span>
+        </div>
         <template #overlay>
           <Menu>
             <MenuItem @click="openDoc()">开发文档</MenuItem>
@@ -40,11 +46,9 @@
           <IconPpt size="18" fill="#666" style="margin-top: 2px;" />
         </div>
       </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" title="Github 仓库">
-        <a href="https://github.com/pipipi-pikachu/PPTist" target="_blank">
-          <div class="menu-item"><IconGithub size="18" fill="#666" /></div>
-        </a>
-      </Tooltip>
+      <a href="https://github.com/pipipi-pikachu/PPTist" target="_blank">
+        <div class="menu-item"><IconGithub size="18" fill="#666" /></div>
+      </a>
     </div>
 
     <Drawer
@@ -81,6 +85,10 @@ export default defineComponent({
     const { createSlide, deleteSlide } = 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)
@@ -112,6 +120,9 @@ export default defineComponent({
       resetSlides,
       openDoc,
       hotkeyDrawerVisible,
+      editDropdownVisible,
+      screenDropdownVisible,
+      helpDropdownVisible,
     }
   },
 })
@@ -132,16 +143,24 @@ export default defineComponent({
   align-items: center;
 }
 .menu-item {
-  height: 70%;
+  height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 13px;
-  margin: 0 10px;
+  padding: 0 10px;
   cursor: pointer;
 
   .text {
     margin-left: 4px;
   }
 }
+
+.dropdown-menu {
+  transition: background-color .2s;
+
+  &.active {
+    background-color: $lightGray;
+  }
+}
 </style>

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

@@ -52,7 +52,7 @@
               :value="filter.value"
               @change="value => updateFilter(filter, value)"
             />
-            <div class="value">{{`${filter.value}${filter.unit}`}}</div>
+            <div class="value">{{filter.value}}</div>
           </div>
         </div>
       </template>