UI优化，画笔工具优化

2021-01-16 21:11:18 +08:00 · 2021-01-16 21:11:18 +08:00 · 0df6812fd6
parent 4dc53e2fe9
commit 0df6812fd6
9 changed files with 135 additions and 35 deletions
--- a/src/assets/styles/antd.scss
+++ b/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;
-}
-.ant-slider-track {
-  background-color: $themeColor;
-}
-.ant-slider-handle {
-  border-color: $themeColor;
-}
-.ant-select {
-  user-select: none;
-}
+
+// tooltip
 .ant-tooltip-inner {
  font-size: 12px;
 }
--- a/src/components/Contextmenu/ContextmenuContent.vue
+++ b/src/components/Contextmenu/ContextmenuContent.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;
--- a/src/components/Contextmenu/index.vue
+++ b/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: {
--- a/src/main.ts
+++ b/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)
--- a/src/plugins/iconPark.ts
+++ b/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)
  }
 }
--- a/src/views/Editor/EditorHeader/index.vue
+++ b/src/views/Editor/EditorHeader/index.vue
@ -1,11 +1,45 @@
 <template>
  <div class="editor-header">
    <div class="left">
-      <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>
+      <Dropdown :trigger="['click']">
+        <div class="menu-item"><IconSeoFolder /> 文件</div>
+        <template #overlay>
+          <Menu>
+            <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">
--- a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
+++ b/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;
--- a/src/views/Screen/WritingBoardTool.vue
+++ b/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,
    }
  },
 })
--- a/src/views/Screen/index.vue
+++ b/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',