update

package.json

@@ -9,7 +9,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@ant-design/icons-vue": "^5.1.8",
+    "@ant-design/icons-vue": "^5.1.9",
     "animate.css": "^4.1.1",
     "ant-design-vue": "^2.0.0-rc.3",
     "clipboard": "^2.0.6",

src/assets/styles/antd.scss

@@ -14,6 +14,9 @@
 .ant-btn {
   font-size: 13px !important;
 }
+.ant-radio-group {
+  font-size: 13px !important;
+}
 .ant-select-item-option-content {
   font-size: 13px !important;
 }
@@ -28,4 +31,7 @@
 }
 .ant-select {
   user-select: none;
+}
+.ant-tooltip-inner {
+  font-size: 12px;
 }

src/components/CheckboxButton.vue

@@ -21,7 +21,7 @@ export default {
   outline: 0;
   background-color: #fff;
   border: 1px solid #d9d9d9;
-  font-size: 12px;
+  font-size: 13px;
   padding: 0 15px;
   height: 32px;
   text-align: center;

src/components/CheckboxButtonGroup.vue

@@ -15,7 +15,7 @@ export default {
   display: flex;
   align-items: center;
 
-  ::v-deep .checkbox-button {
+  ::v-deep(.checkbox-button) {
     border-radius: 0;
     border-left-width: 0;
     border-right-width: 0;

src/components/IconFont.ts

@@ -0,0 +1,7 @@
+/* eslint-disable */
+
+import { createFromIconfontCN } from '@ant-design/icons-vue'
+
+export default createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_2317509_4g5g5hxi0xh.js',
+}) as any

src/views/Editor/Toolbar/ElementAnimationPanel.vue

@@ -44,8 +44,12 @@
           <div class="index">{{index + 1}}</div>
           <div class="text">【{{element.elType}}】{{element.animationType}}</div>
           <div class="handler">
-            <PlayCircleOutlined class="handler-btn" @click="runAnimation(element.elId, element.type)" />
-            <CloseOutlined class="handler-btn" @click="deleteAnimation(element.elId)" />
+            <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="预览">
+              <PlayCircleOutlined class="handler-btn" @click="runAnimation(element.elId, element.type)" />
+            </Tooltip>
+            <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="删除">
+              <CloseOutlined class="handler-btn" @click="deleteAnimation(element.elId)" />
+            </Tooltip>
           </div>
         </div>
       </template>
@@ -63,7 +67,7 @@ import { ELEMENT_TYPE } from '@/configs/element'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import Draggable from 'vuedraggable'
-import { Button, Divider, Popover } from 'ant-design-vue'
+import { Button, Divider, Popover, Tooltip } from 'ant-design-vue'
 import {
   PlayCircleOutlined,
   CloseOutlined,
@@ -85,6 +89,7 @@ export default defineComponent({
     PlayCircleOutlined,
     CloseOutlined,
     Popover,
+    Tooltip,
   },
   setup() {
     const store = useStore<State>()

src/views/Editor/Toolbar/ElementPositionPanel.vue

@@ -1,20 +1,40 @@
 <template>
   <div class="element-positopn-panel">
     <ButtonGroup class="row">
-      <Button style="flex: 1;" @click="orderElement(handleElement, 'top')">顶</Button>
-      <Button style="flex: 1;" @click="orderElement(handleElement, 'bottom')">底</Button>
-      <Button style="flex: 1;" @click="orderElement(handleElement, 'up')">上移</Button>
-      <Button style="flex: 1;" @click="orderElement(handleElement, 'down')">下移</Button>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="置顶层">
+        <Button style="flex: 1;" @click="orderElement(handleElement, 'top')"><IconFont type="icon-layer-top" /></Button>
+      </Tooltip>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="置底层">
+        <Button style="flex: 1;" @click="orderElement(handleElement, 'bottom')"><IconFont type="icon-layer-bottom" /></Button>
+      </Tooltip>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="上移一层">
+        <Button style="flex: 1;" @click="orderElement(handleElement, 'up')"><IconFont type="icon-layer-up" /></Button>
+      </Tooltip>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="下移一层">
+        <Button style="flex: 1;" @click="orderElement(handleElement, 'down')"><IconFont type="icon-layer-down" /></Button>
+      </Tooltip>
     </ButtonGroup>
     <ButtonGroup class="row">
-      <Button style="flex: 1;" @click="alignElementToCanvas('left')">左</Button>
-      <Button style="flex: 1;" @click="alignElementToCanvas('horizontal')">中</Button>
-      <Button style="flex: 1;" @click="alignElementToCanvas('right')">右</Button>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="左对齐">
+        <Button style="flex: 1;" @click="alignElementToCanvas('left')"><IconFont type="icon-align-left" /></Button>
+      </Tooltip>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="水平居中">
+        <Button style="flex: 1;" @click="alignElementToCanvas('horizontal')"><IconFont type="icon-align-vertical-center" /></Button>
+      </Tooltip>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="右对齐">
+        <Button style="flex: 1;" @click="alignElementToCanvas('right')"><IconFont type="icon-align-right" /></Button>
+      </Tooltip>
     </ButtonGroup>
     <ButtonGroup class="row">
-      <Button style="flex: 1;" @click="alignElementToCanvas('top')">上</Button>
-      <Button style="flex: 1;" @click="alignElementToCanvas('vertical')">中</Button>
-      <Button style="flex: 1;" @click="alignElementToCanvas('bottom')">下</Button>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="上对齐">
+        <Button style="flex: 1;" @click="alignElementToCanvas('top')"><IconFont type="icon-align-top" /></Button>
+      </Tooltip>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="垂直居中">
+        <Button style="flex: 1;" @click="alignElementToCanvas('vertical')"><IconFont type="icon-align-horizontal-center" /></Button>
+      </Tooltip>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="下对齐">
+        <Button style="flex: 1;" @click="alignElementToCanvas('bottom')"><IconFont type="icon-align-bottom" /></Button>
+      </Tooltip>
     </ButtonGroup>
 
     <Divider />
@@ -54,8 +74,12 @@
           style="flex: 4;"
         />
         <template v-if="['image', 'shape'].includes(handleElement.type)">
-          <LockOutlined style="flex: 1;" class="icon-btn" @click="updateFixedRatio(false)" v-if="fixedRatio" />
-          <UnlockOutlined style="flex: 1;" class="icon-btn" @click="updateFixedRatio(true)" v-else />
+          <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="解除宽高比锁定" v-if="fixedRatio">
+            <LockOutlined style="flex: 1;" class="icon-btn" @click="updateFixedRatio(false)" />
+          </Tooltip>
+          <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="宽高比锁定" v-else>
+            <UnlockOutlined style="flex: 1;" class="icon-btn" @click="updateFixedRatio(true)" />
+          </Tooltip>
         </template>
         <div style="flex: 1;" v-else></div>
         <InputNumber 
@@ -81,8 +105,12 @@
 
       <div class="row">
         <div style="flex: 3;">旋转：</div>
-        <RotateLeftOutlined class="icon-btn" @click="updateRotate45('-')" style="flex: 2;" />
-        <RotateRightOutlined class="icon-btn" @click="updateRotate45('+')" style="flex: 2;" />
+        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="逆时针旋转">
+          <RotateLeftOutlined class="icon-btn" @click="updateRotate45('-')" style="flex: 2;" />
+        </Tooltip>
+        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="顺时针旋转">
+          <RotateRightOutlined class="icon-btn" @click="updateRotate45('+')" style="flex: 2;" />
+        </Tooltip>
         <div style="flex: 1;"></div>
         <InputNumber 
           :min="-180"
@@ -107,13 +135,14 @@ import useOrderElement from '@/hooks/useOrderElement'
 import useAlignElementToCanvas from '@/hooks/useAlignElementToCanvas'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
-import { InputNumber, Divider, Button } from 'ant-design-vue'
+import { InputNumber, Divider, Button, Tooltip } from 'ant-design-vue'
 import {
   LockOutlined,
   UnlockOutlined,
   RotateLeftOutlined,
   RotateRightOutlined,
 } from '@ant-design/icons-vue'
+import IconFont from '@/components/IconFont'
 
 export default defineComponent({
   name: 'element-positopn-panel',
@@ -122,10 +151,12 @@ export default defineComponent({
     Divider,
     Button,
     ButtonGroup: Button.Group,
+    Tooltip,
     LockOutlined,
     UnlockOutlined,
     RotateLeftOutlined,
     RotateRightOutlined,
+    IconFont,
   },
   setup() {
     const store = useStore<State>()

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

@@ -29,10 +29,12 @@
             @update:modelValue="value => emitRichTextCommand('color', value)"
           />
         </template>
-        <Button class="text-color-btn" style="flex: 1;">
-          <FontColorsOutlined />
-          <div class="text-color-block" :style="{ backgroundColor: richTextAttrs.color }"></div>
-        </Button>
+        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字颜色">
+          <Button class="text-color-btn" style="flex: 1;">
+            <FontColorsOutlined />
+            <div class="text-color-block" :style="{ backgroundColor: richTextAttrs.color }"></div>
+          </Button>
+        </Tooltip>
       </Popover>
       <Popover trigger="click">
         <template #content>
@@ -41,10 +43,12 @@
             @update:modelValue="value => emitRichTextCommand('backcolor', value)"
           />
         </template>
-        <Button class="text-color-btn" style="flex: 1;">
-          <HighlightOutlined />
-          <div class="text-color-block" :style="{ backgroundColor: richTextAttrs.backcolor }"></div>
-        </Button>
+        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字高亮">
+          <Button class="text-color-btn" style="flex: 1;">
+            <HighlightOutlined />
+            <div class="text-color-block" :style="{ backgroundColor: richTextAttrs.backcolor }"></div>
+          </Button>
+        </Tooltip>
       </Popover>
       <Popover trigger="click">
         <template #content>
@@ -53,61 +57,81 @@
             @update:modelValue="value => updateFill(value)"
           />
         </template>
-        <Button class="text-color-btn" style="flex: 1;">
-          <BgColorsOutlined />
-          <div class="text-color-block" :style="{ backgroundColor: fill }"></div>
-        </Button>
+        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文本框填充">
+          <Button class="text-color-btn" style="flex: 1;">
+            <BgColorsOutlined />
+            <div class="text-color-block" :style="{ backgroundColor: fill }"></div>
+          </Button>
+        </Tooltip>
       </Popover>
     </ButtonGroup>
 
     <CheckboxButtonGroup class="row">
-      <CheckboxButton 
-        style="flex: 1;"
-        :checked="richTextAttrs.bold"
-        @click="emitRichTextCommand('bold')"
-      ><BoldOutlined /></CheckboxButton>
-      <CheckboxButton 
-        style="flex: 1;"
-        :checked="richTextAttrs.em"
-        @click="emitRichTextCommand('em')"
-      ><ItalicOutlined /></CheckboxButton>
-      <CheckboxButton 
-        style="flex: 1;"
-        :checked="richTextAttrs.underline"
-        @click="emitRichTextCommand('underline')"
-      ><UnderlineOutlined /></CheckboxButton>
-      <CheckboxButton 
-        style="flex: 1;"
-        :checked="richTextAttrs.strikethrough"
-        @click="emitRichTextCommand('strikethrough')"
-      ><StrikethroughOutlined /></CheckboxButton>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="加粗">
+        <CheckboxButton 
+          style="flex: 1;"
+          :checked="richTextAttrs.bold"
+          @click="emitRichTextCommand('bold')"
+        ><BoldOutlined /></CheckboxButton>
+      </Tooltip>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="斜体">
+        <CheckboxButton 
+          style="flex: 1;"
+          :checked="richTextAttrs.em"
+          @click="emitRichTextCommand('em')"
+        ><ItalicOutlined /></CheckboxButton>
+      </Tooltip>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="下划线">
+        <CheckboxButton 
+          style="flex: 1;"
+          :checked="richTextAttrs.underline"
+          @click="emitRichTextCommand('underline')"
+        ><UnderlineOutlined /></CheckboxButton>
+      </Tooltip>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="删除线">
+        <CheckboxButton 
+          style="flex: 1;"
+          :checked="richTextAttrs.strikethrough"
+          @click="emitRichTextCommand('strikethrough')"
+        ><StrikethroughOutlined /></CheckboxButton>
+      </Tooltip>
     </CheckboxButtonGroup>
 
     <CheckboxButtonGroup class="row">
-      <CheckboxButton
-        style="flex: 1;"
-        :checked="richTextAttrs.superscript"
-        @click="emitRichTextCommand('superscript')"
-      >上</CheckboxButton>
-      <CheckboxButton
-        style="flex: 1;"
-        :checked="richTextAttrs.subscript"
-        @click="emitRichTextCommand('subscript')"
-      >下</CheckboxButton>
-      <CheckboxButton
-        style="flex: 1;"
-        :checked="richTextAttrs.code"
-        @click="emitRichTextCommand('code')"
-      >码</CheckboxButton>
-      <CheckboxButton
-        style="flex: 1;"
-        :checked="richTextAttrs.blockquote"
-        @click="emitRichTextCommand('blockquote')"
-      >引</CheckboxButton>
-      <CheckboxButton
-        style="flex: 1;"
-        @click="emitRichTextCommand('clear')"
-      >清</CheckboxButton>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="上标">
+        <CheckboxButton
+          style="flex: 1;"
+          :checked="richTextAttrs.superscript"
+          @click="emitRichTextCommand('superscript')"
+        ><IconFont type="icon-superscript" /></CheckboxButton>
+      </Tooltip>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="下标">
+        <CheckboxButton
+          style="flex: 1;"
+          :checked="richTextAttrs.subscript"
+          @click="emitRichTextCommand('subscript')"
+        ><IconFont type="icon-subscript" /></CheckboxButton>
+      </Tooltip>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="行内代码">
+        <CheckboxButton
+          style="flex: 1;"
+          :checked="richTextAttrs.code"
+          @click="emitRichTextCommand('code')"
+        ><IconFont type="icon-code" /></CheckboxButton>
+      </Tooltip>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="引用">
+        <CheckboxButton
+          style="flex: 1;"
+          :checked="richTextAttrs.blockquote"
+          @click="emitRichTextCommand('blockquote')"
+        ><IconFont type="icon-blockquote" /></CheckboxButton>
+      </Tooltip>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="清除格式">
+        <CheckboxButton
+          style="flex: 1;"
+          @click="emitRichTextCommand('clear')"
+        ><IconFont type="icon-clear" /></CheckboxButton>
+      </Tooltip>
     </CheckboxButtonGroup>
 
     <Divider />
@@ -118,22 +142,32 @@
       :value="richTextAttrs.align"
       @change="e => emitRichTextCommand('align', e.target.value)"
     >
-      <RadioButton value="left" style="flex: 1;"><AlignLeftOutlined /></RadioButton>
-      <RadioButton value="center" style="flex: 1;"><AlignCenterOutlined /></RadioButton>
-      <RadioButton value="right" style="flex: 1;"><AlignRightOutlined /></RadioButton>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="左对齐">
+        <RadioButton value="left" style="flex: 1;"><AlignLeftOutlined /></RadioButton>
+      </Tooltip>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="居中">
+        <RadioButton value="center" style="flex: 1;"><AlignCenterOutlined /></RadioButton>
+      </Tooltip>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="右对齐">
+        <RadioButton value="right" style="flex: 1;"><AlignRightOutlined /></RadioButton>
+      </Tooltip>
     </RadioGroup>
 
     <CheckboxButtonGroup class="row">
-      <CheckboxButton 
-        style="flex: 1;" 
-        :checked="richTextAttrs.bulletList"
-        @click="emitRichTextCommand('bulletList')"
-      ><UnorderedListOutlined /></CheckboxButton>
-      <CheckboxButton 
-        style="flex: 1;" 
-        :checked="richTextAttrs.orderedList"
-        @click="emitRichTextCommand('orderedList')"
-      ><OrderedListOutlined /></CheckboxButton>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="项目符号">
+        <CheckboxButton 
+          style="flex: 1;" 
+          :checked="richTextAttrs.bulletList"
+          @click="emitRichTextCommand('bulletList')"
+        ><UnorderedListOutlined /></CheckboxButton>
+      </Tooltip>
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="编号">
+        <CheckboxButton 
+          style="flex: 1;" 
+          :checked="richTextAttrs.orderedList"
+          @click="emitRichTextCommand('orderedList')"
+        ><OrderedListOutlined /></CheckboxButton>
+      </Tooltip>
     </CheckboxButtonGroup>
 
     <Divider />
@@ -177,7 +211,7 @@ import ElementShadow from '../common/ElementShadow.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
 import CheckboxButton from '@/components/CheckboxButton.vue'
 import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue'
-import { Select, Input, Button, Divider, Popover, Radio } from 'ant-design-vue'
+import { Select, Input, Button, Divider, Popover, Radio, Tooltip } from 'ant-design-vue'
 import {
   FontColorsOutlined,
   HighlightOutlined,
@@ -194,6 +228,7 @@ import {
   ColumnHeightOutlined,
   ColumnWidthOutlined,
 } from '@ant-design/icons-vue'
+import IconFont from '@/components/IconFont'
 
 export default defineComponent({
   name: 'text-style-panel',
@@ -213,6 +248,7 @@ export default defineComponent({
     Popover,
     RadioGroup: Radio.Group,
     RadioButton: Radio.Button,
+    Tooltip,
     FontColorsOutlined,
     HighlightOutlined,
     BgColorsOutlined,
@@ -227,6 +263,7 @@ export default defineComponent({
     UnorderedListOutlined,
     ColumnHeightOutlined,
     ColumnWidthOutlined,
+    IconFont,
   },
   setup() {
     const store = useStore<State>()