feat:新增pure-admin前端

Yi.Pure.Vue3/src/components/ReSplitPane/iconfont/iconfont.css

@@ -0,0 +1,23 @@
+@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";
+}

Yi.Pure.Vue3/src/components/ReSplitPane/iconfont/iconfont.js

@@ -0,0 +1,65 @@
+!(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"),
+        (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);

Yi.Pure.Vue3/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
+    }
+  ]
+}

Yi.Pure.Vue3/src/components/ReSplitPane/index.css

@@ -0,0 +1,49 @@
+.clearfix::after {
+  visibility: hidden;
+  display: block;
+  font-size: 0;
+  content: " ";
+  clear: both;
+  height: 0;
+}
+
+.vue-splitter-container {
+  height: 100%;
+  position: relative;
+}
+
+.vue-splitter-container-mask {
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.splitter-pane.vertical.splitter-paneL {
+  position: absolute;
+  left: 0;
+  height: 100%;
+  padding-right: 3px;
+}
+
+.splitter-pane.vertical.splitter-paneR {
+  position: absolute;
+  right: 0;
+  height: 100%;
+  padding-left: 3px;
+}
+
+.splitter-pane.horizontal.splitter-paneL {
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.splitter-pane.horizontal.splitter-paneR {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  padding-top: 3px;
+}

Yi.Pure.Vue3/src/components/ReSplitPane/index.tsx

@@ -0,0 +1,136 @@
+import "./index.css";
+import resizer from "./resizer";
+import { type PropType, defineComponent, ref, unref, computed } from "vue";
+
+export interface ContextProps {
+  minPercent: number;
+  defaultPercent: number;
+  split: string;
+}
+
+/** 切割面板组件 */
+export default defineComponent({
+  name: "SplitPane",
+  components: { resizer },
+  props: {
+    splitSet: {
+      type: Object as PropType<ContextProps>,
+      require: true
+    }
+  },
+  emits: ["resize"],
+  setup(props, ctx) {
+    const active = ref(false);
+    const hasMoved = ref(false);
+    const percent = ref(props.splitSet?.defaultPercent);
+    const type = props.splitSet?.split === "vertical" ? "width" : "height";
+    const resizeType = props.splitSet?.split === "vertical" ? "left" : "top";
+
+    const leftClass = ref([
+      "splitter-pane splitter-paneL",
+      props.splitSet?.split
+    ]);
+
+    const rightClass = ref([
+      "splitter-pane splitter-paneR",
+      props.splitSet?.split
+    ]);
+
+    const cursor = computed(() => {
+      return active.value
+        ? props.splitSet?.split === "vertical"
+          ? { cursor: "col-resize" }
+          : { cursor: "row-resize" }
+        : { cursor: "default" };
+    });
+
+    const onClick = (): void => {
+      if (!hasMoved.value) {
+        percent.value = 50;
+        ctx.emit("resize", percent.value);
+      }
+    };
+
+    const onMouseDown = (): void => {
+      active.value = true;
+      hasMoved.value = false;
+    };
+
+    const onMouseUp = (): void => {
+      active.value = false;
+    };
+
+    const onMouseMove = (e: any): void => {
+      if (e.buttons === 0 || e.which === 0) {
+        active.value = false;
+      }
+
+      if (active.value) {
+        let offset = 0;
+        let target = e.currentTarget;
+        if (props.splitSet?.split === "vertical") {
+          while (target) {
+            offset += target.offsetLeft;
+            target = target.offsetParent;
+          }
+        } else {
+          while (target) {
+            offset += target.offsetTop;
+            target = target.offsetParent;
+          }
+        }
+
+        const currentPage =
+          props.splitSet?.split === "vertical" ? e.pageX : e.pageY;
+        const targetOffset =
+          props.splitSet?.split === "vertical"
+            ? e.currentTarget.offsetWidth
+            : e.currentTarget.offsetHeight;
+        const percents =
+          Math.floor(((currentPage - offset) / targetOffset) * 10000) / 100;
+
+        if (
+          percents > props.splitSet?.minPercent &&
+          percents < 100 - props.splitSet?.minPercent
+        ) {
+          percent.value = percents;
+        }
+
+        ctx.emit("resize", percent.value);
+
+        hasMoved.value = true;
+      }
+    };
+
+    return () => (
+      <>
+        <div
+          class="vue-splitter-container clearfix"
+          style={unref(cursor)}
+          onMouseup={() => onMouseUp()}
+          onMousemove={() => onMouseMove(event)}
+        >
+          <div
+            class={unref(leftClass)}
+            style={{ [unref(type)]: unref(percent) + "%" }}
+          >
+            {ctx.slots.paneL()}
+          </div>
+          <resizer
+            style={`${unref([resizeType])}:${unref(percent)}%`}
+            split={props.splitSet?.split}
+            onMousedown={() => onMouseDown()}
+            onClick={() => onClick()}
+          ></resizer>
+          <div
+            class={unref(rightClass)}
+            style={{ [unref(type)]: 100 - unref(percent) + "%" }}
+          >
+            {ctx.slots.paneR()}
+          </div>
+          <div v-show={unref(active)} class="vue-splitter-container-mask"></div>
+        </div>
+      </>
+    );
+  }
+});

Yi.Pure.Vue3/src/components/ReSplitPane/resizer.css

@@ -0,0 +1,47 @@
+@import "./iconfont/iconfont.css";
+
+.splitter-pane-resizer {
+  box-sizing: border-box;
+  background: #000;
+  position: absolute;
+  opacity: 0.2;
+  z-index: 1;
+  background-clip: padding;
+  background-clip: padding-box;
+}
+
+.splitter-pane-resizer.horizontal {
+  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: 6px;
+  height: 100%;
+  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%);
+}

Yi.Pure.Vue3/src/components/ReSplitPane/resizer.tsx

@@ -0,0 +1,23 @@
+import "./resizer.css";
+import { computed, unref, defineComponent } from "vue";
+
+export default defineComponent({
+  name: "Resizer",
+  props: {
+    split: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(props) {
+    const classes = computed(() => {
+      return ["splitter-pane-resizer", props.split, props.className].join(" ");
+    });
+
+    return () => <div class={unref(classes)}></div>;
+  }
+});