@utogether/udp-core 1.0.0

package/src/assets/svg/loading.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="60px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50" xml:space="preserve">
+    <rect x="0" y="7.6416" width="4" height="14.7168" fill="#FF6700" opacity="0.2">
+        <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
+        <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
+        <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
+    </rect>
+    <rect x="8" y="5.1416" width="4" height="19.7168" fill="#FF6700" opacity="0.2">
+        <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
+        <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
+        <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
+    </rect>
+    <rect x="16" y="7.3584" width="4" height="15.2832" fill="#FF6700" opacity="0.2">
+        <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
+        <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
+        <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
+    </rect>
+</svg>

package/src/assets/svg/mdi_keyboard_esc.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M1 7h6v2H3v2h4v2H3v2h4v2H1V7m10 0h4v2h-4v2h2a2 2 0 0 1 2 2v2c0 1.11-.89 2-2 2H9v-2h4v-2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2m8 0h2a2 2 0 0 1 2 2v1h-2V9h-2v6h2v-1h2v1c0 1.11-.89 2-2 2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2Z"></path></svg>

package/src/assets/svg/refresh.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"><path d="M400 148l-21.12-24.57A191.43 191.43 0 0 0 240 64C134 64 48 150 48 256s86 192 192 192a192.09 192.09 0 0 0 181.07-128" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="32"></path><path d="M464 68.45V220a4 4 0 0 1-4 4H308.45a4 4 0 0 1-2.83-6.83L457.17 65.62a4 4 0 0 1 6.83 2.83z" fill="currentColor"></path></svg>

package/src/assets/svg/system.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="icon" viewBox="0 0 1024 1024"><path d="M554 849.574c0 23.365-18.635 42.307-42 42.307s-42-18.941-42-42.307V662.719c0-23.365 18.635-42.307 42-42.307v-7.051c23.365 0 42 25.993 42 49.358z"/><path d="M893 888.5c0 17.397-14.103 31.5-31.5 31.5h-700c-17.397 0-31.5-14.103-31.5-31.5s14.103-31.5 31.5-31.5h700c17.397 0 31.5 14.103 31.5 31.5m33-714.074C926 135.484 894.686 105 855.744 105H168.256C129.314 105 98 135.484 98 174.426V533h828zM98 630.988C98 669.931 129.314 702 168.256 702h687.488C894.686 702 926 669.931 926 630.988V596H98z"/></svg>

package/src/components/ReCountTo/README.md

@@ -0,0 +1,2 @@
+normal 普通数字动画组件  
+rebound 回弹式数字动画组件

package/src/components/ReCountTo/index.ts

@@ -0,0 +1,18 @@
+/*
+ * @Author: wei.li
+ * @Date: 2022-05-26 10:12:11
+ * @LastEditors: wei.li
+ * @LastEditTime: 2022-07-07 13:54:51
+ * @Description: file content
+ */
+import { withInstall } from '@utogether/utils';
+import reNormalCountTo from './src/normal';
+import reboundCountTo from './src/rebound';
+
+/** 普通数字动画组件 */
+const ReNormalCountTo = withInstall(reNormalCountTo);
+
+/** 回弹式数字动画组件 */
+const ReboundCountTo = withInstall(reboundCountTo);
+
+export { ReNormalCountTo, ReboundCountTo };

package/src/components/ReCountTo/src/normal/index.tsx

@@ -0,0 +1,165 @@
+import { defineComponent, reactive, computed, watch, onMounted, unref } from 'vue';
+import { countToProps } from './props';
+import { isNumber } from 'xe-utils';
+
+export default defineComponent({
+  name: 'NormalNumber',
+  props: countToProps,
+  emits: ['mounted', 'callback'],
+  setup(props, { emit }) {
+    const state = reactive<{
+      localStartVal: number;
+      printVal: number | null;
+      displayValue: string;
+      paused: boolean;
+      localDuration: number | null;
+      startTime: number | null;
+      timestamp: number | null;
+      rAF: any;
+      remaining: number | null;
+      color: string;
+      fontSize: string;
+    }>({
+      localStartVal: props.startVal,
+      displayValue: formatNumber(props.startVal),
+      printVal: null,
+      paused: false,
+      localDuration: props.duration,
+      startTime: null,
+      timestamp: null,
+      remaining: null,
+      rAF: null,
+      color: null,
+      fontSize: '16px'
+    });
+
+    const getCountDown = computed(() => {
+      return props.startVal > props.endVal;
+    });
+
+    watch([() => props.startVal, () => props.endVal], () => {
+      if (props.autoplay) {
+        start();
+      }
+    });
+
+    function start() {
+      const { startVal, duration, color, fontSize } = props;
+      state.localStartVal = startVal;
+      state.startTime = null;
+      state.localDuration = duration;
+      state.paused = false;
+      state.color = color;
+      state.fontSize = fontSize;
+      state.rAF = requestAnimationFrame(count);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    function pauseResume() {
+      if (state.paused) {
+        resume();
+        state.paused = false;
+      } else {
+        pause();
+        state.paused = true;
+      }
+    }
+
+    function pause() {
+      cancelAnimationFrame(state.rAF);
+    }
+
+    function resume() {
+      state.startTime = null;
+      state.localDuration = +(state.remaining as number);
+      state.localStartVal = +(state.printVal as number);
+      requestAnimationFrame(count);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    function reset() {
+      state.startTime = null;
+      cancelAnimationFrame(state.rAF);
+      state.displayValue = formatNumber(props.startVal);
+    }
+
+    function count(timestamp: number) {
+      const { useEasing, easingFn, endVal } = props;
+      if (!state.startTime) state.startTime = timestamp;
+      state.timestamp = timestamp;
+      const progress = timestamp - state.startTime;
+      state.remaining = (state.localDuration as number) - progress;
+      if (useEasing) {
+        if (unref(getCountDown)) {
+          state.printVal =
+            state.localStartVal -
+            easingFn(progress, 0, state.localStartVal - endVal, state.localDuration as number);
+        } else {
+          state.printVal = easingFn(
+            progress,
+            state.localStartVal,
+            endVal - state.localStartVal,
+            state.localDuration as number
+          );
+        }
+      } else {
+        if (unref(getCountDown)) {
+          state.printVal =
+            state.localStartVal -
+            (state.localStartVal - endVal) * (progress / (state.localDuration as number));
+        } else {
+          state.printVal =
+            state.localStartVal +
+            (endVal - state.localStartVal) * (progress / (state.localDuration as number));
+        }
+      }
+      if (unref(getCountDown)) {
+        state.printVal = state.printVal < endVal ? endVal : state.printVal;
+      } else {
+        state.printVal = state.printVal > endVal ? endVal : state.printVal;
+      }
+      state.displayValue = formatNumber(state.printVal);
+      if (progress < (state.localDuration as number)) {
+        state.rAF = requestAnimationFrame(count);
+      } else {
+        emit('callback');
+      }
+    }
+
+    function formatNumber(num: number | string) {
+      const { decimals, decimal, separator, suffix, prefix } = props;
+      num = Number(num).toFixed(decimals);
+      num += '';
+      const x = num.split('.');
+      let x1 = x[0];
+      const x2 = x.length > 1 ? decimal + x[1] : '';
+      const rgx = /(\d+)(\d{3})/;
+      if (separator && !isNumber(separator)) {
+        while (rgx.test(x1)) {
+          x1 = x1.replace(rgx, '$1' + separator + '$2');
+        }
+      }
+      return prefix + x1 + x2 + suffix;
+    }
+
+    onMounted(() => {
+      if (props.autoplay) {
+        start();
+      }
+      emit('mounted');
+    });
+
+    return () => (
+      <>
+        <span
+          style={{
+            color: props.color,
+            fontSize: props.fontSize
+          }}
+        >
+          {state.displayValue}
+        </span>
+      </>
+    );
+  }
+});

package/src/components/ReCountTo/src/normal/props.ts

@@ -0,0 +1,37 @@
+/*
+ * @Author: levi7754 levi7754@163.com
+ * @Date: 2023-06-19 09:14:18
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2023-10-09 11:05:26
+ * @FilePath: /sitzone-mes/src/components/ReCountTo/src/normal/props.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import type { PropType } from 'vue';
+import propTypes from '@/utils/propTypes';
+export const countToProps = {
+  startVal: propTypes.number.def(0),
+  endVal: propTypes.number.def(2020),
+  duration: propTypes.number.def(1300),
+  autoplay: propTypes.bool.def(true),
+  decimals: {
+    type: Number as PropType<number>,
+    required: false,
+    default: 0,
+    validator(value: number) {
+      return value >= 0;
+    }
+  },
+  color: propTypes.string.def(),
+  fontSize: propTypes.string.def(),
+  decimal: propTypes.string.def('.'),
+  separator: propTypes.string.def(','),
+  prefix: propTypes.string.def(''),
+  suffix: propTypes.string.def(''),
+  useEasing: propTypes.bool.def(true),
+  easingFn: {
+    type: Function as PropType<(t: number, b: number, c: number, d: number) => number>,
+    default(t: number, b: number, c: number, d: number) {
+      return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
+    }
+  }
+};

package/src/components/ReCountTo/src/rebound/index.tsx

@@ -0,0 +1,67 @@
+/*
+ * @Author: wei.li
+ * @Date: 2022-05-24 11:26:59
+ * @LastEditors: wei.li
+ * @LastEditTime: 2022-08-24 11:28:37
+ * @Description: file content
+ */
+import './rebound.css';
+import { defineComponent, ref, unref, onBeforeMount, onBeforeUnmount } from 'vue';
+import { reboundProps } from './props';
+
+export default defineComponent({
+  name: 'ReboundNumber',
+  props: reboundProps,
+  setup(props) {
+    const ulRef = ref();
+    const timer = ref(null);
+
+    onBeforeMount(() => {
+      const ua = navigator.userAgent.toLowerCase();
+      const testUA = regexp => regexp.test(ua);
+      const isSafari = testUA(/safari/g) && !testUA(/chrome/g);
+
+      // Safari浏览器的兼容代码
+      isSafari &&
+        (timer.value = setTimeout(() => {
+          ulRef.value.setAttribute(
+            'style',
+            `
+        animation: none;
+        transform: translateY(calc(var(--i) * -9.09%))
+      `
+          );
+        }, props.delay * 1000));
+    });
+
+    onBeforeUnmount(() => {
+      clearTimeout(unref(timer));
+    });
+
+    return () => (
+      <>
+        <div class="scroll-num" style={{ '--i': props.i, '--delay': props.delay }}>
+          <ul ref="ulRef" style={{ fontSize: '32px' }}>
+            <li>0</li>
+            <li>1</li>
+            <li>2</li>
+            <li>3</li>
+            <li>4</li>
+            <li>5</li>
+            <li>6</li>
+            <li>7</li>
+            <li>8</li>
+            <li>9</li>
+            <li>0</li>
+          </ul>
+
+          <svg width="0" height="0">
+            <filter id="blur">
+              <feGaussianBlur in="SourceGraphic" stdDeviation={`0 ${props.blur}`} />
+            </filter>
+          </svg>
+        </div>
+      </>
+    );
+  }
+});

package/src/components/ReCountTo/src/rebound/props.ts

@@ -0,0 +1,14 @@
+import type { PropType } from 'vue';
+import propTypes from '@/utils/propTypes';
+export const reboundProps = {
+  delay: propTypes.number.def(1),
+  blur: propTypes.number.def(2),
+  i: {
+    type: Number as PropType<number>,
+    required: false,
+    default: 0,
+    validator(value: number) {
+      return value < 10 && value >= 0 && Number.isInteger(value);
+    }
+  }
+};

package/src/components/ReCountTo/src/rebound/rebound.css

@@ -0,0 +1,77 @@
+.scroll-num {
+  width: var(--width, 20px);
+  height: var(--height, calc(var(--width, 20px) * 1.8));
+  color: var(--color, #333);
+  font-size: var(--height, calc(var(--width, 20px) * 1.1));
+  line-height: var(--height, calc(var(--width, 20px) * 1.8));
+  text-align: center;
+  overflow: hidden;
+  animation: enhance-bounce-in-down 1s calc(var(--delay) * 1s) forwards;
+}
+
+ul {
+  animation:
+    move 0.3s linear infinite,
+    bounce-in-down 1s calc(var(--delay) * 1s) forwards;
+}
+
+@keyframes move {
+  from {
+    transform: translateY(-90%);
+    filter: url(#blur);
+  }
+
+  to {
+    transform: translateY(1%);
+    filter: url(#blur);
+  }
+}
+
+@keyframes bounce-in-down {
+  from {
+    transform: translateY(calc(var(--i) * -9.09% - 7%));
+    filter: none;
+  }
+
+  25% {
+    transform: translateY(calc(var(--i) * -9.09% + 3%));
+  }
+
+  50% {
+    transform: translateY(calc(var(--i) * -9.09% - 1%));
+  }
+
+  70% {
+    transform: translateY(calc(var(--i) * -9.09% + 0.6%));
+  }
+
+  85% {
+    transform: translateY(calc(var(--i) * -9.09% - 0.3%));
+  }
+
+  to {
+    transform: translateY(calc(var(--i) * -9.09%));
+  }
+}
+
+@keyframes enhance-bounce-in-down {
+  25% {
+    transform: translateY(8%);
+  }
+
+  50% {
+    transform: translateY(-4%);
+  }
+
+  70% {
+    transform: translateY(2%);
+  }
+
+  85% {
+    transform: translateY(-1%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}

package/src/components/ReCropper/index.ts

@@ -0,0 +1,14 @@
+/*
+ * @Author: wei.li
+ * @Date: 2022-05-26 10:12:11
+ * @LastEditors: wei.li
+ * @LastEditTime: 2022-07-07 13:55:03
+ * @Description: file content
+ */
+import reCropper from './src';
+import { withInstall } from '@utogether/utils';
+
+/** ͼƬ�ü���� */
+export const ReCropper = withInstall(reCropper);
+
+export default ReCropper;

package/src/components/ReCropper/src/index.tsx

@@ -0,0 +1,141 @@
+import type { CSSProperties } from 'vue';
+import { defineComponent, onMounted, nextTick, ref, unref, computed, type PropType } from 'vue';
+import { templateRef } from '@vueuse/core';
+import { useAttrs } from '@utogether/utils';
+
+import Cropper from 'cropperjs';
+import 'cropperjs/dist/cropper.css';
+
+type Options = Cropper.Options;
+
+const defaultOptions: Cropper.Options = {
+  aspectRatio: 16 / 9,
+  zoomable: true,
+  zoomOnTouch: true,
+  zoomOnWheel: true,
+  cropBoxMovable: true,
+  cropBoxResizable: true,
+  toggleDragModeOnDblclick: true,
+  autoCrop: true,
+  background: true,
+  highlight: true,
+  center: true,
+  responsive: true,
+  restore: true,
+  checkCrossOrigin: true,
+  checkOrientation: true,
+  scalable: true,
+  modal: true,
+  guides: true,
+  movable: true,
+  rotatable: true
+};
+
+const props = {
+  src: {
+    type: String,
+    required: true
+  },
+  alt: {
+    type: String
+  },
+  width: {
+    type: [String, Number],
+    default: ''
+  },
+  height: {
+    type: [String, Number],
+    default: '360px'
+  },
+  crossorigin: {
+    type: String || Object,
+    default: undefined
+  },
+  imageStyle: {
+    type: Object as PropType<CSSProperties>,
+    default() {
+      return {};
+    }
+  },
+  options: {
+    type: Object as PropType<Options>,
+    default() {
+      return {};
+    }
+  }
+};
+
+export default defineComponent({
+  name: 'SuCropper',
+  props,
+  setup(props) {
+    const cropper: any = ref<Nullable<Cropper>>(null);
+    const imgElRef = templateRef<HTMLImageElement | null>('imgElRef', null);
+
+    const isReady = ref<boolean>(false);
+
+    const getImageStyle = computed((): CSSProperties => {
+      return {
+        height: props.height,
+        width: props.width,
+        maxWidth: '100%',
+        ...props.imageStyle
+      };
+    });
+
+    const getWrapperStyle = computed((): CSSProperties => {
+      const { height, width } = props;
+      return {
+        width: `${width}`.replace(/px/, '') + 'px',
+        height: `${height}`.replace(/px/, '') + 'px'
+      };
+    });
+
+    function init() {
+      const imgEl = unref(imgElRef);
+      if (!imgEl) {
+        return;
+      }
+      cropper.value = new Cropper(imgEl, {
+        ...defaultOptions,
+        ready: () => {
+          isReady.value = true;
+        },
+        ...props.options
+      });
+    }
+
+    onMounted(() => {
+      nextTick(() => {
+        init();
+      });
+    });
+
+    return {
+      props,
+      imgElRef,
+      cropper,
+      getWrapperStyle,
+      getImageStyle
+    };
+  },
+
+  render() {
+    return (
+      <>
+        <div
+          class={useAttrs({ excludeListeners: true, excludeKeys: ['class'] })}
+          style={this.getWrapperStyle}
+        >
+          <img
+            ref="imgElRef"
+            src={this.props.src}
+            alt={this.props.alt}
+            crossorigin={this.props.crossorigin}
+            style={this.getImageStyle}
+          />
+        </div>
+      </>
+    );
+  }
+});

package/src/components/ReFlicker/index.css

@@ -0,0 +1,39 @@
+.point {
+  width: var(--point-width);
+  height: var(--point-height);
+  background: var(--point-background);
+  position: relative;
+  border-radius: var(--point-border-radius);
+}
+
+.point-flicker:after {
+  background: var(--point-background);
+}
+
+.point-flicker:before,
+.point-flicker:after {
+  content: '';
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  position: absolute;
+  border-radius: var(--point-border-radius);
+  animation: flicker 1.2s ease-out infinite;
+}
+
+@keyframes flicker {
+  0% {
+    transform: scale(0.5);
+    opacity: 1;
+  }
+
+  30% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(var(--point-scale));
+    opacity: 0;
+  }
+}

package/src/components/ReFlicker/index.ts

@@ -0,0 +1,50 @@
+/*
+ * @Author: wei.li
+ * @Date: 2022-05-24 11:26:59
+ * @LastEditors: wei.li
+ * @LastEditTime: 2024-07-02 08:42:13
+ * @Description: 圆点、方形闪烁动画组件
+ */
+import './index.css';
+import { h, defineComponent, type Component } from 'vue';
+
+export interface attrsType {
+  width?: string;
+  height?: string;
+  borderRadius?: number | string;
+  background?: string;
+  scale?: number | string;
+}
+
+/**
+ * 圆点、方形闪烁动画组件
+ * @param width 可选 string 宽
+ * @param height 可选 string 高
+ * @param borderRadius 可选 number | string 传0为方形、传50%或者不传为圆形
+ * @param background 可选 string 闪烁颜色
+ * @param scale 可选 number | string 闪烁范围，默认2，值越大闪烁范围越大
+ * @returns Component
+ */
+export function useRenderFlicker(attrs?: attrsType): Component {
+  return defineComponent({
+    name: 'SuFlicker',
+    render() {
+      return h(
+        'div',
+        {
+          class: 'point point-flicker',
+          style: {
+            '--point-width': attrs?.width ?? '12px',
+            '--point-height': attrs?.height ?? '12px',
+            '--point-background': attrs?.background ?? 'var(--el-color-primary)',
+            '--point-border-radius': attrs?.borderRadius ?? '50%',
+            '--point-scale': attrs?.scale ?? '2'
+          }
+        },
+        {
+          default: () => []
+        }
+      );
+    }
+  });
+}

package/src/components/ReFlop/index.ts

@@ -0,0 +1,14 @@
+/*
+ * @Author: wei.li
+ * @Date: 2022-05-26 10:12:11
+ * @LastEditors: wei.li
+ * @LastEditTime: 2022-07-07 13:55:14
+ * @Description: file content
+ */
+import reFlop from './src/index.vue';
+import { withInstall } from '@utogether/utils';
+
+/** ʱ�䷭����� */
+export const ReFlop = withInstall(reFlop);
+
+export default ReFlop;