UI优化

src/hooks/useScreening.ts

@@ -0,0 +1,22 @@
+import { useStore } from 'vuex'
+import { State, MutationTypes } from '@/store'
+import { enterFullscreen, exitFullscreen, isFullscreen } from '@/utils/fullscreen'
+
+export default () => {
+  const store = useStore<State>()
+
+  const enterScreening = () => {
+    enterFullscreen()
+    store.commit(MutationTypes.SET_SCREENING, true)
+  }
+
+  const exitScreening = () => {
+    store.commit(MutationTypes.SET_SCREENING, false)
+    if(isFullscreen()) exitFullscreen()
+  }
+
+  return {
+    enterScreening,
+    exitScreening,
+  }
+}

src/mocks/index.ts

@@ -5,24 +5,6 @@ export const slides: Slide[] = [
     id: 'xsxa123',
     elements: [
       {
-        id: 'sdasaxsxs',
-        type: 'chart',
-        left: 100,
-        top: 100,
-        width: 400,
-        height: 400,
-        chartType: 'pie',
-        data: {
-          labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
-          series: [
-            [5, 2, 4, 2, 10],
-          ],
-        },
-        options: {
-          donut: true,
-        },
-      },
-      {
         id: 'sdasaxs',
         type: 'chart',
         left: 600,

src/plugins/iconPark.ts

@@ -94,6 +94,8 @@ import {
   Platte,
   UpOne,
   DownOne,
+  SeoFolder,
+  CloseSmall,
 } from '@icon-park/vue-next'
 
 export default {
@@ -169,7 +171,6 @@ export default {
     app.component('IconTextItalic', TextItalic)
     app.component('IconTextUnderline', TextUnderline)
     app.component('IconStrikethrough', Strikethrough)
-    app.component('IconEdit', Edit)
     app.component('IconQuote', Quote)
     app.component('IconList', List)
     app.component('IconOrderedList', OrderedList)
@@ -188,6 +189,7 @@ export default {
     app.component('IconMinus', Minus)
     app.component('IconCheck', Check)
     app.component('IconClose', Close)
+    app.component('IconCloseSmall', CloseSmall)
     
     // 图表
     app.component('IconChartRing', ChartRing)
@@ -221,5 +223,7 @@ export default {
     app.component('IconNewlybuild', Newlybuild)
     app.component('IconEffects', Effects)
     app.component('IconRotate', Rotate)
+    app.component('IconEdit', Edit)
+    app.component('IconSeoFolder', SeoFolder)
   }
 }

src/views/Editor/EditorHeader/index.vue

@@ -1,26 +1,39 @@
 <template>
   <div class="editor-header">
     <div class="left">
-      <div class="menu-item">文件</div>
-      <div class="menu-item">编辑</div>
-      <div class="menu-item">设置</div>
-      <div class="menu-item">演示</div>
-      <div class="menu-item">帮助</div>
+      <div class="menu-item"><IconSeoFolder /> 文件</div>
+      <div class="menu-item"><IconEdit /> 编辑</div>
+      <div class="menu-item"><IconSettingOne /> 设置</div>
+      <div class="menu-item"><IconSlide /> 演示</div>
+      <div class="menu-item"><IconHelpcenter /> 帮助</div>
     </div>
 
     <div class="right">
-      <div class="menu-item icon">
-        <IconGithub />
-      </div>
+      <Tooltip :mouseLeaveDelay="0" title="幻灯片放映">
+        <div class="menu-item" @click="enterScreening()">
+          <IconSlide size="18" fill="#666" style="margin-top: 2px;" />
+        </div>
+      </Tooltip>
+      <Tooltip :mouseLeaveDelay="0" title="Github 仓库">
+        <div class="menu-item"><IconGithub size="18" fill="#666" /></div>
+      </Tooltip>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import useScreening from '@/hooks/useScreening'
 
 export default defineComponent({
   name: 'editor-header',
+  setup() {
+    const { enterScreening } = useScreening()
+
+    return {
+      enterScreening,
+    }
+  },
 })
 </script>
 
@@ -42,10 +55,5 @@ export default defineComponent({
   font-size: 13px;
   margin: 0 10px;
   cursor: pointer;
-
-  &.icon {
-    font-size: 20px;
-    color: #666;
-  }
 }
 </style>

src/views/Editor/Thumbnails/index.vue

@@ -4,7 +4,7 @@
     @mousedown="() => setThumbnailsFocus(true)"
     v-click-outside="() => setThumbnailsFocus(false)"
   >
-    <div class="add-slide" @click="createSlide()">+ 添加幻灯片</div>
+    <div class="add-slide" @click="createSlide()"><IconPlus /> 添加幻灯片</div>
     <Draggable 
       class="thumbnail-list"
       :modelValue="slides"

src/views/Editor/Toolbar/ElementAnimationPanel.vue

@@ -24,7 +24,9 @@
             </div>
           </div>
         </template>
-        <Button class="element-animation-btn">{{handleElementAnimation || '点击选择动画'}}</Button>
+        <Button class="element-animation-btn">
+          <IconEffects style="margin-right: 5px;" /> {{handleElementAnimation || '点击选择动画'}}
+        </Button>
       </Popover>
     </div>
     
@@ -48,7 +50,7 @@
               <IconPlayOne class="handler-btn" @click="runAnimation(element.elId, element.type)" />
             </Tooltip>
             <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="删除">
-              <IconDelete class="handler-btn" @click="deleteAnimation(element.elId)" />
+              <IconCloseSmall class="handler-btn" @click="deleteAnimation(element.elId)" />
             </Tooltip>
           </div>
         </div>
@@ -230,13 +232,13 @@ export default defineComponent({
 }
 
 .sequence-item {
-  height: 32px;
+  height: 36px;
   display: flex;
   align-items: center;
   border: 1px solid $borderColor;
   padding: 6px;
   border-radius: $borderRadius;
-  margin-bottom: 5px;
+  margin-bottom: 8px;
 
   &.active {
     border-color: $themeColor;

src/views/Editor/useHotkey.ts

@@ -2,7 +2,6 @@ import { computed, onMounted, onUnmounted } from 'vue'
 import { useStore } from 'vuex'
 import { State, MutationTypes } from '@/store'
 import { KEYS } from '@/configs/hotkey'
-import { enterFullscreen } from '@/utils/fullscreen'
 
 import useSlideHandler from '@/hooks/useSlideHandler'
 import useLockElement from '@/hooks/useLockElement'
@@ -12,6 +11,7 @@ import useCopyAndPasteElement from '@/hooks/useCopyAndPasteElement'
 import useSelectAllElement from '@/hooks/useSelectAllElement'
 import useMoveElement from '@/hooks/useMoveElement'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
+import useScreening from '@/hooks/useScreening'
 
 export default () => {
   const store = useStore<State>()
@@ -39,6 +39,7 @@ export default () => {
   const { selectAllElement } = useSelectAllElement()
   const { moveElement } = useMoveElement()
   const { redo, undo } = useHistorySnapshot()
+  const { enterScreening } = useScreening()
 
   const copy = () => {
     if(activeElementIdList.value.length) copyElement()
@@ -85,11 +86,6 @@ export default () => {
     createSlide()
   }
 
-  const enterScreening = () => {
-    enterFullscreen()
-    store.commit(MutationTypes.SET_SCREENING, true)
-  }
-
   const keydownListener = (e: KeyboardEvent) => {
     const { ctrlKey, shiftKey } = e
     const key = e.key.toUpperCase()

src/views/Screen/index.vue

@@ -64,10 +64,11 @@ import { useStore } from 'vuex'
 import throttle from 'lodash/throttle'
 import { MutationTypes, State } from '@/store'
 import { Slide } from '@/types/slides'
-import { exitFullscreen, isFullscreen } from '@/utils/fullscreen'
 import { VIEWPORT_ASPECT_RATIO, VIEWPORT_SIZE } from '@/configs/canvas'
 import { KEYS } from '@/configs/hotkey'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
+import { isFullscreen } from '@/utils/fullscreen'
+import useScreening from '@/hooks/useScreening'
 
 import ScreenSlide from './ScreenSlide.vue'
 import SlideThumbnails from './SlideThumbnails.vue'
@@ -116,9 +117,11 @@ export default defineComponent({
       slideHeight.value = height
     }
 
+    const { exitScreening } = useScreening()
+
     const windowResizeListener = () => {
       setSlideContentSize()
-      if(!isFullscreen()) store.commit(MutationTypes.SET_SCREENING, false)
+      if(!isFullscreen()) exitScreening()
     }
 
     const animationIndex = ref(0)
@@ -212,7 +215,7 @@ export default defineComponent({
         {
           text: '结束放映',
           subText: 'ESC',
-          handler: exitFullscreen,
+          handler: exitScreening,
         },
       ]
     }