feat:新增pure-admin前端

Yi.Pure.Vue3/src/components/ReFlop/index.ts

@@ -0,0 +1,7 @@
+import reFlop from "./src/index.vue";
+import { withInstall } from "@pureadmin/utils";
+
+/** 时间翻牌组件 */
+export const ReFlop = withInstall(reFlop);
+
+export default ReFlop;

Yi.Pure.Vue3/src/components/ReFlop/src/filpper.css

@@ -0,0 +1,184 @@
+.m-flipper {
+  display: inline-block;
+  position: relative;
+  width: 60px;
+  height: 100px;
+  line-height: 100px;
+  border: solid 1px #000;
+  border-radius: 10px;
+  background: #fff;
+  font-size: 66px;
+  color: #fff;
+  box-shadow: 0 0 6px rgb(0 0 0 / 50%);
+  text-align: center;
+  font-family: "Helvetica Neue";
+}
+
+.m-flipper .digital::before,
+.m-flipper .digital::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  background: #000;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.m-flipper .digital::before {
+  top: 0;
+  bottom: 50%;
+  border-radius: 10px 10px 0 0;
+  border-bottom: solid 1px #666;
+}
+
+.m-flipper .digital::after {
+  top: 50%;
+  bottom: 0;
+  border-radius: 0 0 10px 10px;
+  line-height: 0;
+}
+
+/* 向下翻 */
+.m-flipper.down .front::before {
+  z-index: 3;
+}
+
+.m-flipper.down .back::after {
+  z-index: 2;
+  transform-origin: 50% 0%;
+  transform: perspective(160px) rotateX(180deg);
+}
+
+.m-flipper.down .front::after,
+.m-flipper.down .back::before {
+  z-index: 1;
+}
+
+.m-flipper.down.go .front::before {
+  transform-origin: 50% 100%;
+  animation: frontFlipDown 0.6s ease-in-out both;
+  box-shadow: 0 -2px 6px rgb(255 255 255 / 30%);
+  backface-visibility: hidden;
+}
+
+.m-flipper.down.go .back::after {
+  animation: backFlipDown 0.6s ease-in-out both;
+}
+
+/* 向上翻 */
+.m-flipper.up .front::after {
+  z-index: 3;
+}
+
+.m-flipper.up .back::before {
+  z-index: 2;
+  transform-origin: 50% 100%;
+  transform: perspective(160px) rotateX(-180deg);
+}
+
+.m-flipper.up .front::before,
+.m-flipper.up .back::after {
+  z-index: 1;
+}
+
+.m-flipper.up.go .front::after {
+  transform-origin: 50% 0;
+  animation: frontFlipUp 0.6s ease-in-out both;
+  box-shadow: 0 2px 6px rgb(255 255 255 / 30%);
+  backface-visibility: hidden;
+}
+
+.m-flipper.up.go .back::before {
+  animation: backFlipUp 0.6s ease-in-out both;
+}
+
+@keyframes frontFlipDown {
+  0% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(-180deg);
+  }
+}
+
+@keyframes backFlipDown {
+  0% {
+    transform: perspective(160px) rotateX(180deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+}
+
+@keyframes frontFlipUp {
+  0% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(180deg);
+  }
+}
+
+@keyframes backFlipUp {
+  0% {
+    transform: perspective(160px) rotateX(-180deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+}
+
+.m-flipper .number0::before,
+.m-flipper .number0::after {
+  content: "0";
+}
+
+.m-flipper .number1::before,
+.m-flipper .number1::after {
+  content: "1";
+}
+
+.m-flipper .number2::before,
+.m-flipper .number2::after {
+  content: "2";
+}
+
+.m-flipper .number3::before,
+.m-flipper .number3::after {
+  content: "3";
+}
+
+.m-flipper .number4::before,
+.m-flipper .number4::after {
+  content: "4";
+}
+
+.m-flipper .number5::before,
+.m-flipper .number5::after {
+  content: "5";
+}
+
+.m-flipper .number6::before,
+.m-flipper .number6::after {
+  content: "6";
+}
+
+.m-flipper .number7::before,
+.m-flipper .number7::after {
+  content: "7";
+}
+
+.m-flipper .number8::before,
+.m-flipper .number8::after {
+  content: "8";
+}
+
+.m-flipper .number9::before,
+.m-flipper .number9::after {
+  content: "9";
+}

Yi.Pure.Vue3/src/components/ReFlop/src/filpper.tsx

@@ -0,0 +1,92 @@
+import "./filpper.css";
+import propTypes from "@/utils/propTypes";
+import { defineComponent, ref } from "vue";
+
+const props = {
+  // front paper text
+  // 前牌文字
+  frontText: propTypes.number.def(0),
+  // back paper text
+  // 后牌文字
+  backText: propTypes.number.def(1),
+  // flipping duration, please be consistent with the CSS animation-duration value.
+  // 翻牌动画时间，与CSS中设置的animation-duration保持一致
+  duration: propTypes.number.def(600)
+};
+
+export default defineComponent({
+  name: "ReFlop",
+  props,
+  setup(props) {
+    const { frontText, backText, duration } = props;
+    const isFlipping = ref(false);
+    const flipType = ref("down");
+    const frontTextFromData = ref(frontText);
+    const backTextFromData = ref(backText);
+
+    const textClass = (number: number) => {
+      return "number" + number;
+    };
+
+    const flip = (type: string, front: number, back: number) => {
+      // 如果处于翻转中，则不执行
+      if (isFlipping.value) return false;
+      frontTextFromData.value = front;
+      backTextFromData.value = back;
+      // 根据传递过来的type设置翻转方向
+      flipType.value = type;
+      // 设置翻转状态为true
+      isFlipping.value = true;
+
+      setTimeout(() => {
+        // 设置翻转状态为false
+        isFlipping.value = false;
+        frontTextFromData.value = back;
+      }, duration);
+    };
+
+    // 下翻牌
+    const flipDown = (front: any, back: any): void => {
+      flip("down", front, back);
+    };
+
+    // 上翻牌
+    const flipUp = (front: any, back: any): void => {
+      flip("up", front, back);
+    };
+
+    // 设置前牌文字
+    function setFront(text: number): void {
+      frontTextFromData.value = text;
+    }
+
+    // 设置后牌文字
+    const setBack = (text: number): void => {
+      backTextFromData.value = text;
+    };
+
+    return {
+      flipType,
+      isFlipping,
+      frontTextFromData,
+      backTextFromData,
+      textClass,
+      flipDown,
+      flipUp,
+      setFront,
+      setBack
+    };
+  },
+
+  render() {
+    const main = `m-flipper ${this.flipType} ${this.isFlipping ? "go" : ""}`;
+    const front = `digital front ${this.textClass(this.frontTextFromData)}`;
+    const back = `digital back ${this.textClass(this.backTextFromData)}`;
+    return (
+      <div class={main}>
+        <div class={front} />
+        <div class={back} />
+      </div>
+    );
+  }
+});

Yi.Pure.Vue3/src/components/ReFlop/src/index.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import flippers from "./filpper";
+import { ref, unref, nextTick, onUnmounted } from "vue";
+
+defineOptions({
+  name: "ReFlop"
+});
+
+const timer = ref(null);
+const flipObjs = ref([]);
+
+const flipperHour1 = ref();
+const flipperHour2 = ref();
+const flipperMinute1 = ref();
+const flipperMinute2 = ref();
+const flipperSecond1 = ref();
+const flipperSecond2 = ref();
+
+// 初始化数字
+const init = () => {
+  const now = new Date();
+  const nowTimeStr = formatDate(new Date(now.getTime()), "hhiiss");
+  for (let i = 0; i < flipObjs.value.length; i++) {
+    flipObjs?.value[i]?.setFront(nowTimeStr[i]);
+  }
+};
+
+// 开始计时
+const run = () => {
+  timer.value = setInterval(() => {
+    // 获取当前时间
+    const now = new Date();
+    const nowTimeStr = formatDate(new Date(now.getTime() - 1000), "hhiiss");
+    const nextTimeStr = formatDate(now, "hhiiss");
+    for (let i = 0; i < flipObjs.value.length; i++) {
+      if (nowTimeStr[i] === nextTimeStr[i]) {
+        continue;
+      }
+      flipObjs?.value[i]?.flipDown(nowTimeStr[i], nextTimeStr[i]);
+    }
+  }, 1000);
+};
+
+// 正则格式化日期
+const formatDate = (date: Date, dateFormat: string) => {
+  /* 单独格式化年份，根据y的字符数量输出年份
+     * 例如：yyyy => 2019
+            yy => 19
+            y => 9
+     */
+  if (/(y+)/.test(dateFormat)) {
+    dateFormat = dateFormat.replace(
+      RegExp.$1,
+      (date.getFullYear() + "").substr(4 - RegExp.$1.length)
+    );
+  }
+  // 格式化月、日、时、分、秒
+  const o = {
+    "m+": date.getMonth() + 1,
+    "d+": date.getDate(),
+    "h+": date.getHours(),
+    "i+": date.getMinutes(),
+    "s+": date.getSeconds()
+  };
+  for (const k in o) {
+    if (new RegExp(`(${k})`).test(dateFormat)) {
+      // 取出对应的值
+      const str = o[k] + "";
+      /* 根据设置的格式，输出对应的字符
+       * 例如: 早上8时，hh => 08，h => 8
+       * 但是，当数字>=10时，无论格式为一位还是多位，不做截取，这是与年份格式化不一致的地方
+       * 例如: 下午15时，hh => 15, h => 15
+       */
+      dateFormat = dateFormat.replace(
+        RegExp.$1,
+        RegExp.$1.length === 1 ? str : padLeftZero(str)
+      );
+    }
+  }
+  return dateFormat;
+};
+
+// 日期时间补零
+const padLeftZero = (str: string | any[]) => {
+  return ("00" + str).substr(str.length);
+};
+
+nextTick(() => {
+  flipObjs.value = [
+    unref(flipperHour1),
+    unref(flipperHour2),
+    unref(flipperMinute1),
+    unref(flipperMinute2),
+    unref(flipperSecond1),
+    unref(flipperSecond2)
+  ];
+
+  init();
+  run();
+});
+
+onUnmounted(() => {
+  if (timer.value) {
+    clearInterval(timer.value);
+    timer.value = null;
+  }
+});
+</script>
+
+<template>
+  <div class="flip-clock">
+    <flippers ref="flipperHour1" />
+    <flippers ref="flipperHour2" />
+    <em>:</em>
+    <flippers ref="flipperMinute1" />
+    <flippers ref="flipperMinute2" />
+    <em>:</em>
+    <flippers ref="flipperSecond1" />
+    <flippers ref="flipperSecond2" />
+  </div>
+</template>
+
+<style>
+.flip-clock .m-flipper {
+  margin: 0 3px;
+}
+
+.flip-clock em {
+  display: inline-block;
+  font-size: 66px;
+  font-style: normal;
+  line-height: 102px;
+  vertical-align: top;
+}
+</style>