UI优化，画笔工具优化

src/assets/styles/antd.scss

@@ -1,3 +1,4 @@
+// popover
 .ant-popover {
   padding-top: 5px !important;
 }
@@ -11,6 +12,26 @@
 .ant-popover-inner-content {
   padding: 12px !important;
 }
+
+// dropdown
+.ant-dropdown {
+  min-width: 120px;
+  animation: none !important;
+}
+.ant-dropdown-menu {
+  box-shadow: $boxShadow;
+  border: 1px solid $borderColor;
+}
+.ant-dropdown-menu-item {
+  font-size: 13px;
+  transition: none;
+
+  &:hover {
+    background-color: #e1e1e1;
+  }
+}
+
+// button
 .ant-btn {
   font-size: 13px !important;
 
@@ -18,27 +39,35 @@
     padding: 0;
   }
 }
+
+// radio
 .ant-radio-group {
   font-size: 13px !important;
 }
+.ant-radio-button-wrapper {
+  text-align: center;
+}
+
+// slider
+.ant-slider-track {
+  background-color: $themeColor;
+}
+.ant-slider-handle {
+  border-color: $themeColor;
+}
+
+// select
+.ant-select {
+  user-select: none;
+}
 .ant-select-selection-item {
   font-size: 13px;
 }
 .ant-select-item-option-content {
   font-size: 13px !important;
 }
-.ant-radio-button-wrapper {
+
-  text-align: center;
+// tooltip
-}
-.ant-slider-track {
-  background-color: $themeColor;
-}
-.ant-slider-handle {
-  border-color: $themeColor;
-}
-.ant-select {
-  user-select: none;
-}
 .ant-tooltip-inner {
   font-size: 12px;
 }

src/components/Contextmenu/MenuContent.vue

@@ -1,18 +1,18 @@
 <template>
-  <ul class="contextmenu-content">
+  <ul class="menu-content">
     <template v-for="(menu, index) in menus">
       <li
         v-if="!menu.hide"
-        class="contextmenu-item"
+        class="menu-item"
         :key="menu.text || index"
         @click.stop="handleClickMenuItem(menu)"
         :class="{'divider': menu.divider, 'disable': menu.disable}"
       >
-        <div class="contextmenu-item-content" :class="{'has-sub-menu': menu.children}" v-if="!menu.divider">
+        <div class="menu-item-content" :class="{'has-sub-menu': menu.children}" v-if="!menu.divider">
           <span class="text">{{menu.text}}</span>
           <span class="sub-text" v-if="menu.subText && !menu.children">{{menu.subText}}</span>
 
-          <contextmenu-content 
+          <menu-content 
             class="sub-menu" 
             :style="{
               [subMenuPosition]: '112.5%',
@@ -32,7 +32,7 @@ import { PropType, defineComponent } from 'vue'
 import { ContextmenuItem } from './types'
 
 export default defineComponent({
-  name: 'contextmenu-content',
+  name: 'menu-content',
   props: {
     menus: {
       type: Array as PropType<ContextmenuItem[]>,
@@ -55,7 +55,7 @@ $menuWidth: 160px;
 $menuHeight: 30px;
 $subMenuWidth: 120px;
 
-.contextmenu-content {
+.menu-content {
   width: $menuWidth;
   padding: 5px 0;
   background: #fff;
@@ -65,7 +65,7 @@ $subMenuWidth: 120px;
   list-style: none;
   margin: 0;
 }
-.contextmenu-item {
+.menu-item {
   padding: 0 20px;
   color: #555;
   font-size: 12px;
@@ -76,7 +76,7 @@ $subMenuWidth: 120px;
   background-color: #fff;
   cursor: pointer;
 
-  &:not(.disable):hover > .contextmenu-item-content > .sub-menu {
+  &:not(.disable):hover > .menu-item-content > .sub-menu {
     display: block;
   }
 
@@ -98,7 +98,7 @@ $subMenuWidth: 120px;
     cursor: no-drop;
   }
 }
-.contextmenu-item-content {
+.menu-item-content {
   display: flex;
   align-items: center;
   justify-content: space-between;

src/components/Contextmenu/index.vue

@@ -13,7 +13,7 @@
     }"
     @contextmenu.prevent
   >
-    <ContextmenuContent 
+    <MenuContent 
       :menus="menus"
       :subMenuPosition="style.subMenuPosition" 
       :handleClickMenuItem="handleClickMenuItem" 
@@ -25,7 +25,7 @@
 import { computed, defineComponent, PropType } from 'vue'
 import { ContextmenuItem, Axis } from './types'
 
-import ContextmenuContent from './ContextmenuContent.vue'
+import MenuContent from './MenuContent.vue'
 
 const MENU_WIDTH = 160
 const MENU_HEIGHT = 30
@@ -35,7 +35,7 @@ const SUB_MENU_WIDTH = 120
 export default defineComponent({
   name: 'contextmenu',
   components: {
-    ContextmenuContent,
+    MenuContent,
   },
   props: {
     axis: {

src/main.ts

@@ -31,6 +31,8 @@ import {
   Radio,
   Input,
   Modal,
+  Dropdown,
+  Menu,
 } from 'ant-design-vue'
 
 const app = createApp(App)
@@ -51,6 +53,9 @@ app.component('RadioButton', Radio.Button)
 app.component('Input', Input)
 app.component('InputGroup', Input.Group)
 app.component('Modal', Modal)
+app.component('Dropdown', Dropdown)
+app.component('Menu', Menu)
+app.component('MenuItem', Menu.Item)
 
 app.directive('contextmenu', Contextmenu)
 app.directive('click-outside', ClickOutside)

src/plugins/iconPark.ts

@@ -96,6 +96,8 @@ import {
   DownOne,
   SeoFolder,
   CloseSmall,
+  Undo,
+  Transform,
 } from '@icon-park/vue-next'
 
 export default {
@@ -225,5 +227,7 @@ export default {
     app.component('IconRotate', Rotate)
     app.component('IconEdit', Edit)
     app.component('IconSeoFolder', SeoFolder)
+    app.component('IconUndo', Undo)
+    app.component('IconTransform', Transform)
   }
 }

src/views/Editor/EditorHeader/index.vue

@@ -1,11 +1,45 @@
 <template>
   <div class="editor-header">
     <div class="left">
-      <div class="menu-item"><IconSeoFolder /> 文件</div>
+      <Dropdown :trigger="['click']">
-      <div class="menu-item"><IconEdit /> 编辑</div>
+        <div class="menu-item"><IconSeoFolder /> 文件</div>
-      <div class="menu-item"><IconSettingOne /> 设置</div>
+        <template #overlay>
-      <div class="menu-item"><IconSlide /> 演示</div>
+          <Menu>
-      <div class="menu-item"><IconHelpcenter /> 帮助</div>
+            <MenuItem>导出JSON文件</MenuItem>
+            <MenuItem>保存到本地</MenuItem>
+          </Menu>
+        </template>
+      </Dropdown>
+      <Dropdown :trigger="['click']">
+        <div class="menu-item"><IconEdit /> 编辑</div>
+        <template #overlay>
+          <Menu>
+            <MenuItem>撤销</MenuItem>
+            <MenuItem>重做</MenuItem>
+            <MenuItem>添加页面</MenuItem>
+            <MenuItem>删除页面</MenuItem>
+          </Menu>
+        </template>
+      </Dropdown>
+      <Dropdown :trigger="['click']">
+        <div class="menu-item"><IconSlide /> 演示</div>
+        <template #overlay>
+          <Menu>
+            <MenuItem>从头开始</MenuItem>
+            <MenuItem>从当前页开始</MenuItem>
+          </Menu>
+        </template>
+      </Dropdown>
+      <Dropdown :trigger="['click']">
+        <div class="menu-item"><IconHelpcenter /> 帮助</div>
+        <template #overlay>
+          <Menu>
+            <MenuItem>开发文档</MenuItem>
+            <MenuItem>常见使用问题</MenuItem>
+            <MenuItem>快捷键</MenuItem>
+          </Menu>
+        </template>
+      </Dropdown>
     </div>
 
     <div class="right">

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

@@ -6,7 +6,7 @@
     ></div>
 
     <ButtonGroup class="row">
-      <Button style="flex: 5;" @click="clipImage()">裁剪图片</Button>
+      <Button style="flex: 5;" @click="clipImage()"><IconTailoring class="btn-icon" /> 裁剪图片</Button>
       <Popover trigger="click" v-model:visible="clipPanelVisible">
         <template #content>
           <div class="clip">
@@ -56,7 +56,7 @@
           </div>
         </div>
       </template>
-      <Button class="full-width-btn">设置滤镜</Button>
+      <Button class="full-width-btn"><IconColorFilter class="btn-icon" /> 设置滤镜</Button>
     </Popover>
     
     <div class="row">
@@ -85,9 +85,9 @@
     <Divider />
     
     <FileInput @change="files => replaceImage(files)">
-      <Button class="full-width-btn">替换图片</Button>
+      <Button class="full-width-btn"><IconTransform class="btn-icon" /> 替换图片</Button>
     </FileInput>
-    <Button class="full-width-btn" @click="resetImage()">重置样式</Button>
+    <Button class="full-width-btn" @click="resetImage()"><IconUndo class="btn-icon" /> 重置样式</Button>
   </div>
 </template>
 
@@ -366,6 +366,9 @@ export default defineComponent({
   width: 100%;
   margin-bottom: 10px;
 }
+.btn-icon {
+  margin-right: 3px;
+}
 
 .filter {
   width: 280px;

src/views/Screen/WritingBoardTool.vue

@@ -6,6 +6,7 @@
         :color="writingBoardColor" 
         :model="writingBoardModel" 
         v-if="writingBoardVisible" 
+        v-contextmenu="contextmenus"
       />
     </teleport>
 
@@ -13,7 +14,7 @@
       <div class="btn" @click="changePen()">画笔</div>
       <div class="btn" @click="changeEraser()">橡皮擦</div>
       <div class="btn" @click="clearCanvas()">擦除所有墨迹</div>
-      <div class="btn" @click="closeWritingBoard()">关闭画笔</div>
+      <div class="btn" @click="closeWritingBoard()">退出画笔</div>
       <div class="colors">
         <div 
           class="color" 
@@ -31,6 +32,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 import WritingBoard from '@/components/WritingBoard.vue'
+import { ContextmenuItem } from '@/components/Contextmenu/types'
 
 const writingBoardColors = ['#000000', '#ffffff', '#1e497b', '#4e81bb', '#e2534d', '#9aba60', '#8165a0', '#47acc5', '#f9974c']
 
@@ -72,6 +74,29 @@ export default defineComponent({
       emit('close')
     }
 
+    const contextmenus = (): ContextmenuItem[] => {
+      return [
+        {
+          text: '画笔',
+          handler: changePen,
+          disable: writingBoardModel.value === 'pen',
+        },
+        {
+          text: '橡皮擦',
+          handler: changeEraser,
+          disable: writingBoardModel.value === 'eraser',
+        },
+        {
+          text: '擦除所有墨迹',
+          handler: clearCanvas,
+        },
+        {
+          text: '退出画笔',
+          handler: closeWritingBoard,
+        },
+      ]
+    }
+
     return {
       writingBoardRef,
       writingBoardVisible,
@@ -83,6 +108,7 @@ export default defineComponent({
       clearCanvas,
       changeColor,
       closeWritingBoard,
+      contextmenus,
     }
   },
 })

src/views/Screen/index.vue

@@ -211,7 +211,6 @@ export default defineComponent({
           disable: slideIndex.value >= slides.value.length - 1,
           handler: () => turnNextSlide(),
         },
-        { divider: true },
         {
           text: '结束放映',
           subText: 'ESC',