From 017bed2d81ad2fbabe8ab7eda3936632f40305c4 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sat, 15 Jul 2023 10:39:47 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E5=8D=87=E7=BA=A7=20ant-design-vue=20?=
 =?UTF-8?q?v4.0.0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 babel.config.js                               |  9 ---
 package-lock.json                             | 71 ++++++++++++++++---
 package.json                                  |  4 +-
 src/App.vue                                   | 20 +++++-
 src/assets/styles/antd.scss                   | 35 ++++-----
 src/assets/styles/global.scss                 | 63 ++++++++++++++--
 src/assets/styles/prosemirror.scss            | 14 ++--
 src/components/CheckboxButton.vue             |  2 +
 src/views/Editor/Canvas/index.vue             |  2 +-
 src/views/Editor/CanvasTool/index.vue         | 32 ++++-----
 src/views/Editor/EditorHeader/index.vue       |  2 +-
 src/views/Editor/ExportDialog/ExportImage.vue |  1 +
 src/views/Editor/ExportDialog/ExportJSON.vue  |  7 +-
 src/views/Editor/ExportDialog/ExportPDF.vue   |  1 +
 src/views/Editor/ExportDialog/ExportPPTX.vue  |  1 +
 .../ExportDialog/ExportSpecificFile.vue       |  1 +
 src/views/Editor/ExportDialog/index.vue       |  2 +-
 src/views/Editor/Thumbnails/index.vue         |  2 +-
 .../Editor/Toolbar/ElementAnimationPanel.vue  |  4 +-
 .../ChartStylePanel/index.vue                 |  4 +-
 .../ElementStylePanel/ImageStylePanel.vue     |  2 +-
 .../ElementStylePanel/LatexStylePanel.vue     |  2 +-
 .../ElementStylePanel/TextStylePanel.vue      |  6 +-
 .../Editor/Toolbar/common/ColorButton.vue     |  5 +-
 src/views/Editor/index.vue                    |  2 +-
 src/views/Screen/WritingBoardTool.vue         |  6 +-
 vue.config.js                                 | 11 ---
 27 files changed, 201 insertions(+), 110 deletions(-)

diff --git a/babel.config.js b/babel.config.js
index e495266b..00aba061 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -3,15 +3,6 @@ module.exports = {
     '@vue/cli-plugin-babel/preset',
   ],
   plugins: [
-    [
-      'import',
-      {
-        libraryName: 'ant-design-vue',
-        libraryDirectory: 'es',
-        style: true,
-      },
-      'antdv',
-    ],
     [
       'import',
       {
diff --git a/package-lock.json b/package-lock.json
index 5fd79324..b45e8f16 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "dependencies": {
         "@icon-park/vue-next": "^1.4.2",
         "animate.css": "^4.1.1",
-        "ant-design-vue": "^3.2.20",
+        "ant-design-vue": "^4.0.0",
         "chartist": "^1.3.0",
         "clipboard": "^2.0.11",
         "core-js": "^3.8.3",
@@ -2249,6 +2249,16 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmmirror.com/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmmirror.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -4368,17 +4378,20 @@
       }
     },
     "node_modules/ant-design-vue": {
-      "version": "3.2.20",
-      "resolved": "https://registry.npmmirror.com/ant-design-vue/-/ant-design-vue-3.2.20.tgz",
-      "integrity": "sha512-YWpMfGaGoRastIXEYfCoJiaRiDHk4chqtYhlKQM5GqPt6NfvrM1Vg2e60yHtjxlZjed91wCMm0rAmyUr7Hwzdg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/ant-design-vue/-/ant-design-vue-4.0.0.tgz",
+      "integrity": "sha512-6V8DxHPv3HJYDdv48W/KFOUjeZDsYJhFlk13HFSKCJSR2MQs4YnPIAC+rWie9vYcVEKbO+cQDqiOM3cBoHMNUQ==",
       "dependencies": {
         "@ant-design/colors": "^6.0.0",
         "@ant-design/icons-vue": "^6.1.0",
         "@babel/runtime": "^7.10.5",
-        "@ctrl/tinycolor": "^3.4.0",
+        "@ctrl/tinycolor": "^3.5.0",
+        "@emotion/hash": "^0.9.0",
+        "@emotion/unitless": "^0.8.0",
         "@simonwep/pickr": "~1.8.0",
         "array-tree-filter": "^2.1.0",
         "async-validator": "^4.0.0",
+        "csstype": "^3.1.1",
         "dayjs": "^1.10.5",
         "dom-align": "^1.12.1",
         "dom-scroll-into-view": "^2.0.0",
@@ -4387,6 +4400,8 @@
         "resize-observer-polyfill": "^1.5.1",
         "scroll-into-view-if-needed": "^2.2.25",
         "shallow-equal": "^1.0.0",
+        "stylis": "^4.1.3",
+        "throttle-debounce": "^5.0.0",
         "vue-types": "^3.0.0",
         "warning": "^4.0.0"
       },
@@ -13118,6 +13133,11 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/stylis/-/stylis-4.3.0.tgz",
+      "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ=="
+    },
     "node_modules/sugarss": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/sugarss/-/sugarss-2.0.0.tgz",
@@ -13479,6 +13499,14 @@
         "node": ">= 10.13.0"
       }
     },
+    "node_modules/throttle-debounce": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
+      "integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==",
+      "engines": {
+        "node": ">=12.22"
+      }
+    },
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmmirror.com/through/-/through-2.3.8.tgz",
@@ -16715,6 +16743,16 @@
       "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
       "dev": true
     },
+    "@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
+    "@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmmirror.com/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
     "@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmmirror.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -18458,17 +18496,20 @@
       }
     },
     "ant-design-vue": {
-      "version": "3.2.20",
-      "resolved": "https://registry.npmmirror.com/ant-design-vue/-/ant-design-vue-3.2.20.tgz",
-      "integrity": "sha512-YWpMfGaGoRastIXEYfCoJiaRiDHk4chqtYhlKQM5GqPt6NfvrM1Vg2e60yHtjxlZjed91wCMm0rAmyUr7Hwzdg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/ant-design-vue/-/ant-design-vue-4.0.0.tgz",
+      "integrity": "sha512-6V8DxHPv3HJYDdv48W/KFOUjeZDsYJhFlk13HFSKCJSR2MQs4YnPIAC+rWie9vYcVEKbO+cQDqiOM3cBoHMNUQ==",
       "requires": {
         "@ant-design/colors": "^6.0.0",
         "@ant-design/icons-vue": "^6.1.0",
         "@babel/runtime": "^7.10.5",
-        "@ctrl/tinycolor": "^3.4.0",
+        "@ctrl/tinycolor": "^3.5.0",
+        "@emotion/hash": "^0.9.0",
+        "@emotion/unitless": "^0.8.0",
         "@simonwep/pickr": "~1.8.0",
         "array-tree-filter": "^2.1.0",
         "async-validator": "^4.0.0",
+        "csstype": "^3.1.1",
         "dayjs": "^1.10.5",
         "dom-align": "^1.12.1",
         "dom-scroll-into-view": "^2.0.0",
@@ -18477,6 +18518,8 @@
         "resize-observer-polyfill": "^1.5.1",
         "scroll-into-view-if-needed": "^2.2.25",
         "shallow-equal": "^1.0.0",
+        "stylis": "^4.1.3",
+        "throttle-debounce": "^5.0.0",
         "vue-types": "^3.0.0",
         "warning": "^4.0.0"
       }
@@ -25542,6 +25585,11 @@
         }
       }
     },
+    "stylis": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/stylis/-/stylis-4.3.0.tgz",
+      "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ=="
+    },
     "sugarss": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/sugarss/-/sugarss-2.0.0.tgz",
@@ -25831,6 +25879,11 @@
         }
       }
     },
+    "throttle-debounce": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
+      "integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmmirror.com/through/-/through-2.3.8.tgz",
diff --git a/package.json b/package.json
index 04c25d89..170ac4a2 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@icon-park/vue-next": "^1.4.2",
     "animate.css": "^4.1.1",
-    "ant-design-vue": "^3.2.20",
+    "ant-design-vue": "^4.0.0",
     "chartist": "^1.3.0",
     "clipboard": "^2.0.11",
     "core-js": "^3.8.3",
@@ -67,8 +67,6 @@
     "eslint": "^8.34.0",
     "eslint-plugin-vue": "^9.9.0",
     "husky": "8.0.3",
-    "less": "^3.5.0",
-    "less-loader": "^7.1.0",
     "sass": "^1.32.13",
     "sass-loader": "^8.0.2",
     "stylelint": "^13.8.0",
diff --git a/src/App.vue b/src/App.vue
index f6f121cd..5c2d454e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,19 @@
 <template>
-  <Screen v-if="screening" />
-  <Editor v-else-if="_isPC" />
-  <Mobile v-else />
+  <ConfigProvider
+    :theme="{
+      token: {
+        colorPrimary: '#d14424',
+        colorText: '#41464b',
+        borderRadius: 2,
+        fontSize: 13,
+        lineHeight: 1.5715,
+      },
+    }"
+  >
+    <Screen v-if="screening" />
+    <Editor v-else-if="_isPC" />
+    <Mobile v-else />
+  </ConfigProvider>
 </template>
 
 <script lang="ts" setup>
@@ -16,6 +28,8 @@ import Editor from './views/Editor/index.vue'
 import Screen from './views/Screen/index.vue'
 import Mobile from './views/Mobile/index.vue'
 
+import { ConfigProvider } from 'ant-design-vue'
+
 const _isPC = isPC()
 
 const mainStore = useMainStore()
diff --git a/src/assets/styles/antd.scss b/src/assets/styles/antd.scss
index c938d13b..2713c763 100644
--- a/src/assets/styles/antd.scss
+++ b/src/assets/styles/antd.scss
@@ -5,28 +5,19 @@
   padding-top: 5px !important;
 }
 .ant-popover-arrow {
-  display: none;
+  display: none !important;
 }
 .ant-popover-inner {
-  box-shadow: $boxShadow;
-  border: 1px solid $borderColor;
-}
-.ant-popover-inner-content {
-  padding: 12px !important;
+  box-shadow: $boxShadow !important;
+  border: 1px solid $borderColor !important;
 }
 
 // dropdown
 .ant-dropdown-menu {
   min-width: 150px;
-  box-shadow: $boxShadow;
-  border: 1px solid $borderColor;
-  margin-top: -4px;
-}
-.ant-dropdown-menu-item {
-
-  &:hover {
-    background-color: rgba($color: $themeColor, $alpha: .2);
-  }
+  box-shadow: $boxShadow !important;
+  border: 1px solid $borderColor !important;
+  margin-top: -4px !important;
 }
 
 // button
@@ -43,10 +34,10 @@
 
 // slider
 .ant-slider-track {
-  background-color: $themeColor;
+  background-color: $themeColor !important;
 }
 .ant-slider-handle {
-  border-color: $themeColor;
+  border-color: $themeColor !important;
 }
 
 // select
@@ -54,16 +45,14 @@
   user-select: none;
   overflow: hidden;
 }
-.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
-  background-color: rgba($color: $themeColor, $alpha: .2);
+.ant-select-arrow {
+  font-size: 13px !important;
 }
 
 // tooltip
 .ant-tooltip-inner {
   font-size: 12px;
 }
-
-// input
-.ant-input-number-input {
-  line-height: 30px;
+.ant-tooltip .ant-tooltip-arrow::before {
+  height: 4px !important;
 }
\ No newline at end of file
diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss
index c1cd7580..5c156ce7 100644
--- a/src/assets/styles/global.scss
+++ b/src/assets/styles/global.scss
@@ -19,6 +19,11 @@ time, mark, audio, video {
   box-sizing: border-box;
 }
 
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
 article,
 aside,
 details,
@@ -33,20 +38,20 @@ section {
   display: block;
 }
 
-body {
-  line-height: 1;
-  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-}
-
 html,
 body {
-  width: 100% !important;
+  width: 100%;
   height: 100%;
   overflow: hidden;
   background-color: #fff;
   color: $textColor;
 }
 
+body {
+  line-height: 1;
+  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+
 ol,
 ul {
   list-style: none;
@@ -72,6 +77,52 @@ a {
   text-decoration: none;
 }
 
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  color: inherit;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+textarea {
+  overflow: auto;
+  resize: vertical;
+}
+
+a,
+area,
+button,
+[role='button'],
+input:not([type='range']),
+label,
+select,
+summary,
+textarea {
+  touch-action: manipulation;
+}
+
 ::-webkit-scrollbar {
   width: 5px;
   height: 5px;
diff --git a/src/assets/styles/prosemirror.scss b/src/assets/styles/prosemirror.scss
index 3d4247bb..15f1735c 100644
--- a/src/assets/styles/prosemirror.scss
+++ b/src/assets/styles/prosemirror.scss
@@ -18,11 +18,11 @@
 
   p {
     text-indent: var(--textIndent);
-  }
-
-  p + p {
     margin-top: var(--paragraphSpace);
   }
+  p:first-child {
+    margin-top: 0;
+  }
 
   ul {
     list-style-type: disc;
@@ -44,10 +44,10 @@
 
   code {
     background-color: $borderColor;
-    padding: 1px 3px;
+    padding: 2px 6px;
     margin: 0 1px;
-    border-radius: 2px;
-    font-family: inherit;
+    border-radius: 4px;
+    font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
   }
 
   blockquote {
@@ -57,7 +57,7 @@
     margin-left: 0;
     margin-right: 0;
     font-style: italic;
-    border-left: 5px solid #ccc;
+    border-left: 4px solid #ddd;
   }
 
   [data-indent='1'] {
diff --git a/src/components/CheckboxButton.vue b/src/components/CheckboxButton.vue
index 64c11b36..7cc160c8 100644
--- a/src/components/CheckboxButton.vue
+++ b/src/components/CheckboxButton.vue
@@ -21,7 +21,9 @@ defineProps({
   font-size: 13px;
   padding: 0 15px;
   height: 32px;
+  line-height: 32px;
   text-align: center;
+  color: $textColor;
   cursor: pointer;
 
   &:hover {
diff --git a/src/views/Editor/Canvas/index.vue b/src/views/Editor/Canvas/index.vue
index be946764..643f09b6 100644
--- a/src/views/Editor/Canvas/index.vue
+++ b/src/views/Editor/Canvas/index.vue
@@ -83,7 +83,7 @@
     <Ruler :viewportStyles="viewportStyles" v-if="showRuler" />
 
     <Modal
-      v-model:visible="linkDialogVisible" 
+      v-model:open="linkDialogVisible" 
       :footer="null" 
       centered
       :width="540"
diff --git a/src/views/Editor/CanvasTool/index.vue b/src/views/Editor/CanvasTool/index.vue
index b1227cb8..d62c331f 100644
--- a/src/views/Editor/CanvasTool/index.vue
+++ b/src/views/Editor/CanvasTool/index.vue
@@ -10,11 +10,11 @@
     </div>
 
     <div class="add-element-handler">
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入文字">
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入文字" :align="{ offset: [0, 0] }">
         <div class="handler-item group-btn">
           <IconFontSize class="icon" :class="{ 'active': creatingElement?.type === 'text' }" @click="drawText()" />
           
-          <Popover trigger="click" v-model:visible="textTypeSelectVisible">
+          <Popover trigger="click" v-model:open="textTypeSelectVisible">
             <template #content>
               <div class="text-type-item" @click="() => { drawText(); textTypeSelectVisible = false }"><IconTextRotationNone /> 横向文本框</div>
               <div class="text-type-item" @click="() => { drawText(true); textTypeSelectVisible = false }"><IconTextRotationDown /> 竖向文本框</div>
@@ -24,49 +24,49 @@
         </div>
       </Tooltip>
       <FileInput @change="files => insertImageElement(files)">
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入图片">
+        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入图片" :align="{ offset: [0, 0] }">
           <IconPicture class="handler-item" />
         </Tooltip>
       </FileInput>
-      <Popover trigger="click" v-model:visible="shapePoolVisible">
+      <Popover trigger="click" v-model:open="shapePoolVisible">
         <template #content>
           <ShapePool @select="shape => drawShape(shape)" />
         </template>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入形状">
+        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入形状" :align="{ offset: [0, 0] }">
           <IconGraphicDesign class="handler-item" :class="{ 'active': creatingElement?.type === 'shape' }" />
         </Tooltip>
       </Popover>
-      <Popover trigger="click" v-model:visible="linePoolVisible">
+      <Popover trigger="click" v-model:open="linePoolVisible">
         <template #content>
           <LinePool @select="line => drawLine(line)" />
         </template>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入线条">
+        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入线条" :align="{ offset: [0, 0] }">
           <IconConnection class="handler-item" :class="{ 'active': creatingElement?.type === 'line' }" />
         </Tooltip>
       </Popover>
-      <Popover trigger="click" v-model:visible="chartPoolVisible">
+      <Popover trigger="click" v-model:open="chartPoolVisible">
         <template #content>
           <ChartPool @select="chart => { createChartElement(chart); chartPoolVisible = false }" />
         </template>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入图表">
+        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入图表" :align="{ offset: [0, 0] }">
           <IconChartProportion class="handler-item" />
         </Tooltip>
       </Popover>
-      <Popover trigger="click" v-model:visible="tableGeneratorVisible">
+      <Popover trigger="click" v-model:open="tableGeneratorVisible">
         <template #content>
           <TableGenerator
             @close="tableGeneratorVisible = false"
             @insert="({ row, col }) => { createTableElement(row, col); tableGeneratorVisible = false }"
           />
         </template>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入表格">
+        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入表格" :align="{ offset: [0, 0] }">
           <IconInsertTable class="handler-item" />
         </Tooltip>
       </Popover>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入公式">
+      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入公式" :align="{ offset: [0, 0] }">
         <IconFormula class="handler-item" @click="latexEditorVisible = true" />
       </Tooltip>
-      <Popover trigger="click" v-model:visible="mediaInputVisible">
+      <Popover trigger="click" v-model:open="mediaInputVisible">
         <template #content>
           <MediaInput 
             @close="mediaInputVisible = false"
@@ -74,7 +74,7 @@
             @insertAudio="src => { createAudioElement(src); mediaInputVisible = false }"
           />
         </template>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入音视频">
+        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入音视频" :align="{ offset: [0, 0] }">
           <IconVideoTwo class="handler-item" />
         </Tooltip>
       </Popover>
@@ -82,7 +82,7 @@
 
     <div class="right-handler">
       <IconMinus class="handler-item viewport-size" @click="scaleCanvas('-')" />
-      <Popover trigger="click" v-model:visible="canvasScaleVisible">
+      <Popover trigger="click" v-model:open="canvasScaleVisible">
         <template #content>
           <div class="viewport-size-preset">
             <div 
@@ -102,7 +102,7 @@
     </div>
 
     <Modal
-      v-model:visible="latexEditorVisible" 
+      v-model:open="latexEditorVisible" 
       :footer="null" 
       centered
       :width="880"
diff --git a/src/views/Editor/EditorHeader/index.vue b/src/views/Editor/EditorHeader/index.vue
index 3c673e6a..eeafb0fe 100644
--- a/src/views/Editor/EditorHeader/index.vue
+++ b/src/views/Editor/EditorHeader/index.vue
@@ -71,7 +71,7 @@
       width="320"
       placement="right"
       :closable="false"
-      :visible="hotkeyDrawerVisible"
+      :open="hotkeyDrawerVisible"
       @close="hotkeyDrawerVisible = false"
     >
       <HotkeyDoc />
diff --git a/src/views/Editor/ExportDialog/ExportImage.vue b/src/views/Editor/ExportDialog/ExportImage.vue
index 23500e8e..86985dd9 100644
--- a/src/views/Editor/ExportDialog/ExportImage.vue
+++ b/src/views/Editor/ExportDialog/ExportImage.vue
@@ -159,6 +159,7 @@ const expImage = () => {
   .title {
     width: 100px;
     position: relative;
+    line-height: 1;
 
     &::after {
       content: attr(data-range);
diff --git a/src/views/Editor/ExportDialog/ExportJSON.vue b/src/views/Editor/ExportDialog/ExportJSON.vue
index 39fdef34..7f4e1c30 100644
--- a/src/views/Editor/ExportDialog/ExportJSON.vue
+++ b/src/views/Editor/ExportDialog/ExportJSON.vue
@@ -39,11 +39,12 @@ const { exportJSON } = useExport()
 .preview {
   width: 100%;
   height: calc(100% - 100px);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
   background-color: #f9f9f9;
   color: #0451a5;
+  overflow: auto;
+}
+pre {
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
 }
 .btns {
   width: 300px;
diff --git a/src/views/Editor/ExportDialog/ExportPDF.vue b/src/views/Editor/ExportDialog/ExportPDF.vue
index 4eddab70..ca6b6cb1 100644
--- a/src/views/Editor/ExportDialog/ExportPDF.vue
+++ b/src/views/Editor/ExportDialog/ExportPDF.vue
@@ -139,6 +139,7 @@ const expPDF = () => {
 
   .title {
     width: 100px;
+    line-height: 1;
   }
   .config-item {
     flex: 1;
diff --git a/src/views/Editor/ExportDialog/ExportPPTX.vue b/src/views/Editor/ExportDialog/ExportPPTX.vue
index bd7b3cc1..668a7dc6 100644
--- a/src/views/Editor/ExportDialog/ExportPPTX.vue
+++ b/src/views/Editor/ExportDialog/ExportPPTX.vue
@@ -103,6 +103,7 @@ const selectedSlides = computed(() => {
   .title {
     width: 100px;
     position: relative;
+    line-height: 1;
 
     &::after {
       content: attr(data-range);
diff --git a/src/views/Editor/ExportDialog/ExportSpecificFile.vue b/src/views/Editor/ExportDialog/ExportSpecificFile.vue
index 823cd75d..ecd2d8ab 100644
--- a/src/views/Editor/ExportDialog/ExportSpecificFile.vue
+++ b/src/views/Editor/ExportDialog/ExportSpecificFile.vue
@@ -95,6 +95,7 @@ const selectedSlides = computed(() => {
   .title {
     width: 100px;
     position: relative;
+    line-height: 1;
 
     &::after {
       content: attr(data-range);
diff --git a/src/views/Editor/ExportDialog/index.vue b/src/views/Editor/ExportDialog/index.vue
index 6c7e18f7..6a249f72 100644
--- a/src/views/Editor/ExportDialog/index.vue
+++ b/src/views/Editor/ExportDialog/index.vue
@@ -60,7 +60,7 @@ const currentDialogComponent = computed(() => {
 
 <style lang="scss" scoped>
 .export-dialog {
-  margin: -24px;
+  margin: -20px -24px;
 }
 .tabs {
   height: 50px;
diff --git a/src/views/Editor/Thumbnails/index.vue b/src/views/Editor/Thumbnails/index.vue
index c1f4d5d5..9437a0e5 100644
--- a/src/views/Editor/Thumbnails/index.vue
+++ b/src/views/Editor/Thumbnails/index.vue
@@ -7,7 +7,7 @@
   >
     <div class="add-slide">
       <div class="btn" @click="createSlide()"><IconPlus class="icon" />添加幻灯片</div>
-      <Popover trigger="click" placement="bottomLeft" v-model:visible="presetLayoutPopoverVisible">
+      <Popover trigger="click" placement="bottomLeft" v-model:open="presetLayoutPopoverVisible">
         <template #content>
           <LayoutPool @select="slide => { createSlideByTemplate(slide); presetLayoutPopoverVisible = false }" />
         </template>
diff --git a/src/views/Editor/Toolbar/ElementAnimationPanel.vue b/src/views/Editor/Toolbar/ElementAnimationPanel.vue
index 4846e81b..45380678 100644
--- a/src/views/Editor/Toolbar/ElementAnimationPanel.vue
+++ b/src/views/Editor/Toolbar/ElementAnimationPanel.vue
@@ -3,8 +3,8 @@
     <div class="element-animation" v-if="handleElement">
       <Popover 
         trigger="click" 
-        v-model:visible="animationPoolVisible" 
-        @visibleChange="visible => handlePopoverVisibleChange(visible)"
+        v-model:open="animationPoolVisible" 
+        @openChange="visible => handlePopoverVisibleChange(visible)"
       >
         <template #content>
           <div class="tabs">
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
index 4050f253..7ff9f1e0 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
@@ -101,7 +101,7 @@
       </Popover>
     </div>
     <ButtonGroup class="row">
-      <Popover trigger="click" v-model:visible="presetThemesVisible">
+      <Popover trigger="click" v-model:open="presetThemesVisible">
         <template #content>
           <div class="preset-themes">
             <div class="preset-theme" v-for="(item, index) in presetChartThemes" :key="index">
@@ -135,7 +135,7 @@
     <ElementOutline />
 
     <Modal
-      v-model:visible="chartDataEditorVisible" 
+      v-model:open="chartDataEditorVisible" 
       :footer="null" 
       centered
       :closable="false"
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
index b69efbb4..6c3ef161 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
@@ -9,7 +9,7 @@
 
     <ButtonGroup class="row">
       <Button style="flex: 5;" @click="clipImage()"><IconTailoring class="btn-icon" /> 裁剪图片</Button>
-      <Popover trigger="click" v-model:visible="clipPanelVisible">
+      <Popover trigger="click" v-model:open="clipPanelVisible">
         <template #content>
           <div class="clip">
             <div class="title">按形状：</div>
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/LatexStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/LatexStylePanel.vue
index c1b63e7a..3b08e585 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/LatexStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/LatexStylePanel.vue
@@ -28,7 +28,7 @@
     </div>
 
     <Modal
-      v-model:visible="latexEditorVisible" 
+      v-model:open="latexEditorVisible" 
       :footer="null" 
       centered
       :width="880"
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
index 7ec1b3a2..88ebc365 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
@@ -163,7 +163,7 @@
         ><IconFormatBrush /></CheckboxButton>
       </Tooltip>
       <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="超链接">
-        <Popover placement="bottomRight" trigger="click" v-model:visible="linkPopoverVisible">
+        <Popover placement="bottomRight" trigger="click" v-model:open="linkPopoverVisible">
           <template #content>
             <div class="link-popover">
               <Input v-model:value="link" placeholder="请输入超链接" />
@@ -210,7 +210,7 @@
             @click="emitRichTextCommand('bulletList')"
           ><IconList /></Button>
         </Tooltip>
-        <Popover trigger="click" v-model:visible="bulletListPanelVisible">
+        <Popover trigger="click" v-model:open="bulletListPanelVisible">
           <template #content>
             <div class="list-wrap">
               <ul class="list" 
@@ -235,7 +235,7 @@
             @click="emitRichTextCommand('orderedList')"
           ><IconOrderedList /></Button>
         </Tooltip>
-        <Popover trigger="click" v-model:visible="orderedListPanelVisible">
+        <Popover trigger="click" v-model:open="orderedListPanelVisible">
           <template #content>
             <div class="list-wrap">
               <ul class="list" 
diff --git a/src/views/Editor/Toolbar/common/ColorButton.vue b/src/views/Editor/Toolbar/common/ColorButton.vue
index 8d50235e..3da4509d 100644
--- a/src/views/Editor/Toolbar/common/ColorButton.vue
+++ b/src/views/Editor/Toolbar/common/ColorButton.vue
@@ -37,9 +37,8 @@ defineProps({
   height: 100%;
 }
 .color-btn-icon {
-  width: 30px;
-  font-size: 12px;
-  margin-top: 2px;
+  width: 34px;
+  font-size: 13px;
   color: #bfbfbf;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/Editor/index.vue b/src/views/Editor/index.vue
index 03b40128..166d894f 100644
--- a/src/views/Editor/index.vue
+++ b/src/views/Editor/index.vue
@@ -19,7 +19,7 @@
   <SelectPanel v-if="showSelectPanel" />
 
   <Modal
-    :visible="!!dialogForExport" 
+    :open="!!dialogForExport" 
     :footer="null" 
     centered
     :closable="false"
diff --git a/src/views/Screen/WritingBoardTool.vue b/src/views/Screen/WritingBoardTool.vue
index cf9f81ee..efea7676 100644
--- a/src/views/Screen/WritingBoardTool.vue
+++ b/src/views/Screen/WritingBoardTool.vue
@@ -28,7 +28,7 @@
     >
       <div class="tools" @mousedown.stop>
         <div class="tool-content">
-          <Popover trigger="click" :visible="sizePopoverType === 'pen'">
+          <Popover trigger="click" :open="sizePopoverType === 'pen'">
             <template #content>
               <div class="size">
                 <div class="label">墨迹粗细：</div>
@@ -39,7 +39,7 @@
               <div class="btn" :class="{ 'active': writingBoardModel === 'pen' }" @click="changeModel('pen')"><IconWrite class="icon" /></div>
             </Tooltip>
           </Popover>
-          <Popover trigger="click" :visible="sizePopoverType === 'mark'">
+          <Popover trigger="click" :open="sizePopoverType === 'mark'">
             <template #content>
               <div class="size">
                 <div class="label">墨迹粗细：</div>
@@ -50,7 +50,7 @@
               <div class="btn" :class="{ 'active': writingBoardModel === 'mark' }" @click="changeModel('mark')"><IconHighLight class="icon" /></div>
             </Tooltip>
           </Popover>
-          <Popover trigger="click" :visible="sizePopoverType === 'eraser'">
+          <Popover trigger="click" :open="sizePopoverType === 'eraser'">
             <template #content>
               <div class="size">
                 <div class="label">橡皮大小：</div>
diff --git a/vue.config.js b/vue.config.js
index 4d98222c..2eee9835 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -12,17 +12,6 @@ module.exports = {
           @import '~@/assets/styles/mixin.scss';
         `,
       },
-      less: {
-        lessOptions: {
-          modifyVars: {
-            'primary-color': '#d14424',
-            'text-color': '#41464b',
-            'font-size-base': '13px',
-            'border-radius-base': '2px',
-          },
-          javascriptEnabled: true,
-        },
-      },
     },
   },
   configureWebpack: {