一些UI调整和小功能补充

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "hamster_ppt",
+  "name": "pptist",
   "version": "0.0.1",
   "private": true,
   "scripts": {

src/hooks/useLockElement.ts

@@ -18,6 +18,7 @@ export default () => {
       if(activeElementIdList.value.includes(element.id)) element.lock = true
     }
     store.commit(MutationTypes.UPDATE_SLIDE, { elements: newElementList })
+    store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, [])
     addHistorySnapshot()
   }
 
@@ -38,6 +39,7 @@ export default () => {
       }
     }
     store.commit(MutationTypes.UPDATE_SLIDE, { elements: newElementList })
+    store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, [handleElement.id])
     addHistorySnapshot()
   }
 

src/hooks/useScreening.ts

@@ -10,6 +10,11 @@ export default () => {
     store.commit(MutationTypes.SET_SCREENING, true)
   }
 
+  const enterScreeningFromStart = () => {
+    store.commit(MutationTypes.UPDATE_SLIDE_INDEX, 0)
+    enterScreening()
+  }
+
   const exitScreening = () => {
     store.commit(MutationTypes.SET_SCREENING, false)
     if(isFullscreen()) exitFullscreen()
@@ -17,6 +22,7 @@ export default () => {
 
   return {
     enterScreening,
+    enterScreeningFromStart,
     exitScreening,
   }
 }

src/views/Editor/Canvas/MouseSelection.vue

@@ -43,7 +43,8 @@ export default {
 <style lang="scss" scoped>
 .mouse-selection {
   position: absolute;
-  background: rgba(150, 150, 150, 0.25);
+  background-color: rgba($themeColor, 0.1);
+  border: 1px solid $themeColor;
   z-index: 200;
 
   &.quadrant-1 {

src/views/Editor/Canvas/index.vue

@@ -202,7 +202,7 @@ export default defineComponent({
           handler: pasteElement,
         },
         {
-          text: '网格参考线',
+          text: '网格线',
           handler: toggleGridLines,
         },
         {

src/views/Editor/EditorHeader/index.vue

@@ -14,11 +14,11 @@
         <div class="menu-item"><IconEdit /> 编辑</div>
         <template #overlay>
           <Menu>
-            <MenuItem>撤销</MenuItem>
-            <MenuItem>重做</MenuItem>
-            <MenuItem>添加页面</MenuItem>
-            <MenuItem>删除页面</MenuItem>
-            <MenuItem>网格参考线</MenuItem>
+            <MenuItem @click="undo()">撤销</MenuItem>
+            <MenuItem @click="redo()">重做</MenuItem>
+            <MenuItem @click="createSlide()">添加页面</MenuItem>
+            <MenuItem @click="deleteSlide()">删除页面</MenuItem>
+            <MenuItem @click="toggleGridLines()">{{ showGridLines ? '关闭网格线' : '打开网格线' }}</MenuItem>
           </Menu>
         </template>
       </Dropdown>
@@ -26,8 +26,8 @@
         <div class="menu-item"><IconSlide /> 演示</div>
         <template #overlay>
           <Menu>
-            <MenuItem>从头开始</MenuItem>
-            <MenuItem>从当前页开始</MenuItem>
+            <MenuItem @click="enterScreeningFromStart()">从头开始</MenuItem>
+            <MenuItem @click="enterScreening()">从当前页开始</MenuItem>
           </Menu>
         </template>
       </Dropdown>
@@ -57,16 +57,36 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
+import { useStore } from 'vuex'
+import { MutationTypes, State } from '@/store'
 import useScreening from '@/hooks/useScreening'
+import useSlideHandler from '@/hooks/useSlideHandler'
+import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 export default defineComponent({
   name: 'editor-header',
   setup() {
-    const { enterScreening } = useScreening()
+    const store = useStore<State>()
+
+    const { enterScreening, enterScreeningFromStart } = useScreening()
+    const { createSlide, deleteSlide } = useSlideHandler()
+    const { redo, undo } = useHistorySnapshot()
+
+    const showGridLines = computed(() => store.state.showGridLines)
+    const toggleGridLines = () => {
+      store.commit(MutationTypes.SET_GRID_LINES_STATE, !showGridLines.value)
+    }
 
     return {
       enterScreening,
+      enterScreeningFromStart,
+      createSlide,
+      deleteSlide,
+      redo,
+      undo,
+      toggleGridLines,
+      showGridLines,
     }
   },
 })