chore: update

package.json

@@ -31,17 +31,17 @@
     "@logicflow/core": "0.7.1",
     "@logicflow/extension": "0.7.1",
     "@pureadmin/components": "^1.0.2",
-    "@vueuse/core": "^8.0.0",
-    "@vueuse/motion": "^2.0.0-beta.9",
-    "@vueuse/shared": "^8.0.0",
+    "@vueuse/core": "^8.2.0",
+    "@vueuse/motion": "^2.0.0-beta.12",
+    "@vueuse/shared": "^8.2.0",
     "animate.css": "^4.1.1",
     "axios": "^0.26.1",
     "cropperjs": "^1.5.12",
     "css-color-function": "^1.3.3",
     "dayjs": "^1.11.0",
     "driver.js": "^0.9.8",
-    "echarts": "^5.3.0",
-    "element-plus": "^2.1.4",
+    "echarts": "^5.3.1",
+    "element-plus": "^2.1.5",
     "element-resize-detector": "^1.2.3",
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
@@ -58,7 +58,7 @@
     "rgb-hex": "^4.0.0",
     "v-contextmenu": "3.0.0",
     "vue": "^3.2.31",
-    "vue-i18n": "^9.2.0-beta.32",
+    "vue-i18n": "^9.2.0-beta.33",
     "vue-json-pretty": "^2.0.2",
     "vue-router": "^4.0.14",
     "vue-types": "^4.1.1",
@@ -71,11 +71,11 @@
   "devDependencies": {
     "@commitlint/cli": "13.1.0",
     "@commitlint/config-conventional": "13.1.0",
-    "@iconify-icons/ep": "^1.1.3",
-    "@iconify-icons/fa": "^1.1.1",
-    "@iconify-icons/fa-solid": "^1.1.2",
-    "@iconify-icons/ri": "^1.1.1",
-    "@iconify/vue": "^3.1.4",
+    "@iconify-icons/ep": "^1.2.4",
+    "@iconify-icons/fa": "^1.2.2",
+    "@iconify-icons/fa-solid": "^1.2.2",
+    "@iconify-icons/ri": "^1.2.1",
+    "@iconify/vue": "^3.2.0",
     "@intlify/vite-plugin-vue-i18n": "^3.3.1",
     "@pureadmin/theme": "^0.0.1",
     "@types/element-resize-detector": "1.1.3",
@@ -118,12 +118,12 @@
     "stylelint-config-recommended": "^6.0.0",
     "stylelint-config-standard": "^24.0.0",
     "stylelint-order": "^5.0.0",
-    "typescript": "^4.6.2",
+    "typescript": "^4.6.3",
     "unplugin-element-plus": "^0.3.1",
-    "vite": "^2.9.0-beta.4",
+    "vite": "^2.9.0-beta.8",
     "vite-plugin-live-reload": "^2.1.0",
     "vite-plugin-mock": "^2.9.6",
-    "vite-plugin-remove-console": "^0.0.6",
+    "vite-plugin-remove-console": "^0.0.7",
     "vite-plugin-style-import": "1.4.1",
     "vite-plugin-windicss": "^1.8.3",
     "vite-svg-loader": "2.2.0",

src/components/ReSplitPane/iconfont/iconfont.css

@@ -0,0 +1,22 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3268330 */
+  src: url("iconfont.woff2?t=1647939915215") format("woff2"),
+    url("iconfont.woff?t=1647939915215") format("woff"),
+    url("iconfont.ttf?t=1647939915215") format("truetype");
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-tuozhuai1:before {
+  content: "\e647";
+}
+
+.icon-tuozhuai1-copy:before {
+  content: "\eda3";
+}

src/components/ReSplitPane/iconfont/iconfont.js

@@ -0,0 +1,66 @@
+!(function (e) {
+  var t,
+    n,
+    c,
+    o,
+    s,
+    i =
+      '<svg><symbol id="icon-tuozhuai1" viewBox="0 0 1024 1024"><path d="M576 896c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m-256 0c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m256-192c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m-256 0c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m256-192c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m-256 0c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m256-192c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m-256 0c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m256-192c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m-256 0c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z" fill="#2c2c2c" ></path></symbol><symbol id="icon-tuozhuai1-copy" viewBox="0 0 1024 1024"><path d="M128 576c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m0-256c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m192 256c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m0-256c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m192 256.00000001c35.2 0 64 28.8 64 63.99999999s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-63.99999999z m0-256.00000001c35.2 0 64 28.8 64 64s-28.8 64-64 63.99999999-64-28.8-64-63.99999999 28.8-64 64-64z m192 256c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m0-256c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m192 256c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m0-256c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z" fill="#2c2c2c" ></path></symbol></svg>',
+    d = (d = document.getElementsByTagName("script"))[
+      d.length - 1
+    ].getAttribute("data-injectcss"),
+    m = function (e, t) {
+      t.parentNode.insertBefore(e, t);
+    };
+  if (d && !e.__iconfont__svg__cssinject__) {
+    e.__iconfont__svg__cssinject__ = !0;
+    try {
+      document.write(
+        "<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>"
+      );
+    } catch (e) {
+      console && console.log(e);
+    }
+  }
+  function l() {
+    s || ((s = !0), c());
+  }
+  function a() {
+    try {
+      o.documentElement.doScroll("left");
+    } catch (e) {
+      return void setTimeout(a, 50);
+    }
+    l();
+  }
+  (t = function () {
+    var e,
+      t = document.createElement("div");
+    (t.innerHTML = i),
+      (i = null),
+      (t = t.getElementsByTagName("svg")[0]) &&
+        (t.setAttribute("aria-hidden", "true"),
+        (t.style.position = "absolute"),
+        (t.style.width = 0),
+        (t.style.height = 0),
+        (t.style.overflow = "hidden"),
+        // eslint-disable-next-line no-self-assign
+        (t = t),
+        (e = document.body).firstChild ? m(t, e.firstChild) : e.appendChild(t));
+  }),
+    document.addEventListener
+      ? ~["complete", "loaded", "interactive"].indexOf(document.readyState)
+        ? setTimeout(t, 0)
+        : ((n = function () {
+            document.removeEventListener("DOMContentLoaded", n, !1), t();
+          }),
+          document.addEventListener("DOMContentLoaded", n, !1))
+      : document.attachEvent &&
+        ((c = t),
+        (o = e.document),
+        (s = !1),
+        a(),
+        (o.onreadystatechange = function () {
+          "complete" == o.readyState && ((o.onreadystatechange = null), l());
+        }));
+})(window);

src/components/ReSplitPane/iconfont/iconfont.json

@@ -0,0 +1,23 @@
+{
+  "id": "3268330",
+  "name": "split",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "22378774",
+      "name": "拖拽",
+      "font_class": "tuozhuai1",
+      "unicode": "e647",
+      "unicode_decimal": 58951
+    },
+    {
+      "icon_id": "23570521",
+      "name": "拖拽",
+      "font_class": "tuozhuai1-copy",
+      "unicode": "eda3",
+      "unicode_decimal": 60835
+    }
+  ]
+}

src/components/ReSplitPane/index.tsx

@@ -35,16 +35,12 @@ export default defineComponent({
       props.splitSet?.split
     ]);
 
-    const userSelect = computed(() => {
-      return active.value ? "none" : "";
-    });
-
     const cursor = computed(() => {
       return active.value
         ? props.splitSet?.split === "vertical"
-          ? "col-resize"
-          : "row-resize"
-        : "";
+          ? { cursor: "col-resize" }
+          : { cursor: "row-resize" }
+        : { cursor: "default" };
     });
 
     const onClick = (): void => {
@@ -109,7 +105,7 @@ export default defineComponent({
       <>
         <div
           class="vue-splitter-container clearfix"
-          style={(unref(cursor), unref(userSelect))}
+          style={unref(cursor)}
           onMouseup={() => onMouseUp()}
           onMousemove={() => onMouseMove(event)}
         >

src/components/ReSplitPane/resizer.css

@@ -1,3 +1,5 @@
+@import "./iconfont/iconfont.css";
+
 .splitter-pane-resizer {
   box-sizing: border-box;
   background: #000;
@@ -9,19 +11,37 @@
 }
 
 .splitter-pane-resizer.horizontal {
-  height: 11px;
-  margin: -5px 0;
-  border-top: 5px solid rgb(255 255 255 / 0%);
-  border-bottom: 5px solid rgb(255 255 255 / 0%);
-  cursor: row-resize;
+  height: 6px;
   width: 100%;
+  background: #e5e6eb;
+  cursor: row-resize;
+}
+
+.splitter-pane-resizer.horizontal:before {
+  content: "\eda3";
+  font-family: "iconfont";
+  font-size: 13px;
+  color: #000;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .splitter-pane-resizer.vertical {
-  width: 11px;
+  width: 6px;
   height: 100%;
-  margin-left: -5px;
-  border-left: 5px solid rgb(255 255 255 / 0%);
-  border-right: 5px solid rgb(255 255 255 / 0%);
+  background: #e5e6eb;
   cursor: col-resize;
 }
+
+.splitter-pane-resizer.vertical:before {
+  content: "\e647";
+  font-family: "iconfont";
+  font-size: 13px;
+  color: #000;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

src/views/components/split-pane/index.vue

@@ -56,13 +56,14 @@ $H: 70vh;
   text-align: center;
   font-size: 50px;
   color: #fff;
+  border: 1px solid #e5e6eb;
 
   .dv-a,
   .dv-b,
   .dv-c {
     width: $W;
     height: $W;
-    background: rgba($color: dodgerblue, $alpha: 0.8);
+    color: rgba($color: dodgerblue, $alpha: 0.8);
     line-height: $H;
   }
 
@@ -72,11 +73,11 @@ $H: 70vh;
   }
 
   .dv-b {
-    background: rgba($color: #000, $alpha: 0.8);
+    color: rgba($color: #000, $alpha: 0.8);
   }
 
   .dv-c {
-    background: rgba($color: #ce272d, $alpha: 0.8);
+    color: rgba($color: #ce272d, $alpha: 0.8);
   }
 }
 </style>