@utogether/udp-core 1.0.1-beta.3 → 1.0.1-beta.5

package/dist/{utogether-Bkptx2lB.js → utogether-DXDcsKt7.js}

@@ -1,6 +1,6 @@
 import { computed as W, ref as L } from "vue";
 import { useGlobal as g, storageLocal as u, deviceDetection as H, cookies as C, storageSession as M } from "@utogether/utils";
-import { y as P, j as E, s as j, g as h, v as d, z as J, l as K, m as R, n as V, u as S, r as G, o as O, A as x, B as Z } from "./index-ZdgOD7cF.js";
+import { z as P, j as E, s as j, g as h, w as d, A as J, l as K, m as R, n as V, u as S, r as G, o as O, B as x, C as Z } from "./index-BDE4-ZvN.js";
 import { useI18n as f } from "vue-i18n";
 import { defineStore as v } from "pinia";
 function I() {

package/index.ts

@@ -1,36 +1,40 @@
-/*
- * @Author: levi7754 levi7754@163.com
- * @Date: 2024-04-14 19:10:28
- * @LastEditors: wei.li
- * @LastEditTime: 2024-06-26 17:08:49
- * @FilePath: /udp-front/packages/udp-core/index.ts
- * @Description:
- */
-
-import UInit from './src/main';
-export default UInit;
-
-import { store } from './src/store';
-import hasAuthority from './src/utils/authority';
-
-import { useSystemStoreHook as useSystemStore } from './src/store/modules/system';
-import { useMultiTagsStoreHook as useMultiTagsStore } from './src/store/modules/multiTags';
-import { usePermissionStoreHook as usePermissionStore } from './src/store/modules/permission';
-
-import { handleAliveRoute, delCurrentRoute } from './src/router/utils';
-
-import { lifeCycleEvent } from './src/utils/lifecycle';
-
-import { getServiceApi } from './src/api';
-
-export {
-  store,
-  hasAuthority,
-  useSystemStore,
-  useMultiTagsStore,
-  usePermissionStore,
-  delCurrentRoute,
-  handleAliveRoute,
-  getServiceApi,
-  lifeCycleEvent
-};
+/*
+ * @Author: levi7754 levi7754@163.com
+ * @Date: 2024-04-14 19:10:28
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-07-27 11:04:41
+ * @FilePath: /udp-front/packages/udp-core/index.ts
+ * @Description:
+ */
+
+import UInit from './src/main';
+export default UInit;
+
+import { store } from './src/store';
+import hasAuthority from './src/utils/authority';
+
+import { useSystemStoreHook as useSystemStore } from './src/store/modules/system';
+import { useMultiTagsStoreHook as useMultiTagsStore } from './src/store/modules/multiTags';
+import { usePermissionStoreHook as usePermissionStore } from './src/store/modules/permission';
+
+import { handleAliveRoute, delCurrentRoute } from './src/router/utils';
+import { constantRoutes, remainingRouters, routerBefore } from './src/router';
+
+import { lifeCycleEvent } from './src/utils/lifecycle';
+
+import { getServiceApi } from './src/api';
+
+export {
+  store,
+  hasAuthority,
+  useSystemStore,
+  useMultiTagsStore,
+  usePermissionStore,
+  delCurrentRoute,
+  handleAliveRoute,
+  getServiceApi,
+  lifeCycleEvent,
+  routerBefore,
+  constantRoutes,
+  remainingRouters
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@utogether/udp-core",
   "private": false,
-  "version": "1.0.1-beta.3",
+  "version": "1.0.1-beta.5",
   "description": "",
   "type": "module",
   "main1": "index.ts",

package/src/App.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <template>
-  <el-config-provider size="small" :z-index="12000" :locale="currentLocale">
+  <el-config-provider size="small" :z-index="5555" :locale="currentLocale">
     <router-view />
   </el-config-provider>
 </template>

package/src/api/index.ts

@@ -6,6 +6,7 @@
  * @Description: API封装
  */
 import { http } from '@utogether/utils';
+// import { http } from '../utils/udp/http';
 import { getEnv } from '../config';
 
 // 路由相关服务
@@ -20,7 +21,6 @@ export const getServiceApi = () => {
 
 export const setRouter = router => {
   http.setRouter(router);
-  console.log('====url', getBaseURL());
   // http.setBaseUrl(getBaseURL());
 };
 

package/src/components/udp/count-down.vue

@@ -0,0 +1,536 @@
+<template>
+  <div class="flip-clock">
+    <template v-for="data in timeData" :key="data.label">
+      <span v-show="data.show" :id="data.elementId" class="flip-clock__piece">
+        <div v-if="flipAnimation">
+          <span
+            class="flip-clock__card flip-card"
+            :style="countdownSize ? `font-size:${countdownSize}` : ''"
+          >
+            <b class="flip-card__top">{{ twoDigits(data.current) }}</b>
+            <b class="flip-card__bottom" :data-value="twoDigits(data.current)" />
+            <b class="flip-card__back" :data-value="twoDigits(data.previous)" />
+            <b class="flip-card__back-bottom" :data-value="twoDigits(data.previous)" />
+          </span>
+        </div>
+        <div v-else>
+          <span class="no-animation__card">{{ twoDigits(data.current) }}</span>
+        </div>
+        <span
+          v-if="showLabels"
+          class="flip-clock__slot"
+          :style="labelSize ? `font-size:${labelSize}` : ''"
+          >{{ data.label }}</span
+        >
+      </span>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'SuCountdown'
+};
+</script>
+
+<script setup lang="ts">
+import { computed, onBeforeMount, onMounted, onUnmounted, ref, watch } from 'vue';
+import dayjs from 'dayjs';
+
+const props = defineProps({
+  countdown: {
+    type: Boolean,
+    default: false
+  },
+  deadline: {
+    type: String,
+    required: false,
+    default: dayjs().add(5, 'days').format('YYYY-MM-DD HH:mm:ss')
+  },
+  deadlineISO: {
+    type: String,
+    required: false
+  },
+  deadlineDate: {
+    type: Date,
+    required: false
+  },
+  countdownSize: {
+    type: String,
+    required: false
+    // default:"2.2rem"
+  },
+
+  labelSize: {
+    type: String,
+    required: false
+    // default:"2.2rem"
+  },
+  stop: {
+    type: Boolean,
+    required: false
+  },
+  flipAnimation: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  showDays: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  showHours: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  showMinutes: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  showSeconds: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  showLabels: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  labels: {
+    type: Object,
+    required: false,
+    default: function () {
+      return {
+        days: 'Days',
+        hours: 'Hours',
+        minutes: 'Minutes',
+        seconds: 'Seconds'
+      };
+    }
+  },
+  mainColor: {
+    type: String,
+    default: '#EC685C'
+  },
+  secondFlipColor: {
+    type: String,
+    default: props => props.mainColor
+  },
+  mainFlipBackgroundColor: {
+    type: String,
+    default: '#222222'
+  },
+  secondFlipBackgroundColor: {
+    type: String,
+    default: '#393939'
+  },
+  labelColor: {
+    type: String,
+    default: '#222222'
+  }
+});
+
+const now = ref(Math.trunc(new Date().getTime() / 1000));
+const date = ref<number>(0);
+const interval = ref();
+const diff = ref(0);
+const show = ref(false);
+const timeData = ref([
+  {
+    current: 0,
+    previous: 0,
+    label: props.labels.days,
+    elementId: 'flip-card-days-' + Date.now(),
+    show: props.showDays
+  },
+  {
+    current: 0,
+    previous: 0,
+    label: props.labels.hours,
+    elementId: 'flip-card-hours-' + Date.now(),
+    show: props.showHours
+  },
+  {
+    current: 0,
+    previous: 0,
+    label: props.labels.minutes,
+    elementId: 'flip-card-minutes-' + Date.now(),
+    show: props.showMinutes
+  },
+  {
+    current: 0,
+    previous: 0,
+    label: props.labels.seconds,
+    elementId: 'flip-card-seconds-' + Date.now(),
+    show: props.showSeconds
+  }
+]);
+
+const updateAllCards = () => {
+  updateTime(0, days);
+  updateTime(1, hours);
+  updateTime(2, minutes);
+  updateTime(3, seconds);
+};
+
+const twoDigits = value => {
+  if (value != undefined) {
+    if (value.toString().length <= 1) {
+      return '0' + value.toString();
+    }
+    return value.toString();
+  } else {
+    return '00';
+  }
+};
+
+const updateTime = (idx, newValue) => {
+  if (idx >= timeData.value.length || newValue === undefined) {
+    return;
+  }
+
+  // if (window['requestAnimationFrame']) {
+  //     frame = requestAnimationFrame(updateTime.bind(this));
+  // }
+
+  const d = timeData.value[idx];
+  const val = newValue.value < 0 ? 0 : newValue.value;
+  const el = document.querySelector(`#${d.elementId}`);
+
+  if (val !== d.current) {
+    d.previous = d.current;
+    d.current = val;
+
+    if (el) {
+      el.classList.remove('flip');
+      // @ts-ignore
+      void el.offsetWidth;
+      el.classList.add('flip');
+    }
+
+    if (idx === 0) {
+      const els = el!.querySelectorAll('span b');
+      if (els) {
+        //@ts-ignore
+        for (const e of els) {
+          const cls = e.classList[0];
+          if (newValue.value / 1000 >= 1) {
+            if (!cls.includes('-4digits')) {
+              const newCls = cls + '-4digits';
+              e.classList.add(newCls);
+              e.classList.remove(cls);
+            }
+          } else {
+            if (cls.includes('-4digits')) {
+              const newCls = cls.replace('-4digits', '');
+              e.classList.add(newCls);
+              e.classList.remove(cls);
+            }
+          }
+        }
+      } else {
+        console.log('....');
+      }
+    }
+  }
+};
+
+const seconds = computed(() => {
+  if (props.countdown) {
+    return Math.trunc(diff.value) % 60;
+  }
+  return Math.trunc(now.value) % 60;
+});
+
+const minutes = computed(() => {
+  if (props.countdown) {
+    return Math.trunc(diff.value / 60) % 60;
+  }
+  return Math.trunc(now.value / 60) % 60;
+});
+const hours = computed(() => {
+  if (props.countdown) {
+    return Math.trunc(diff.value / 60 / 60) % 24;
+  }
+  return new Date(now.value * 1000).getHours();
+  // return Math.trunc(now.value / 60 / 60) % 24;
+});
+const days = computed(() => {
+  if (props.countdown) {
+    return Math.trunc(diff.value / 60 / 60 / 24);
+  }
+  return Math.trunc(now.value / 60 / 60 / 24);
+});
+
+watch(
+  () => props.deadline,
+  newVal => {
+    const endTime = newVal as unknown as String;
+    date.value = Math.trunc(Date.parse(endTime.replace(/-/g, '/')) / 1000);
+    if (!date.value) {
+      throw new Error("Invalid props value, correct the 'deadline'");
+    }
+  }
+);
+
+watch(now, () => {
+  if (props.countdown) {
+    diff.value = date.value - now.value;
+    if (diff.value <= 0 || props.stop) {
+      diff.value = 0;
+      updateTime(3, 0);
+    } else {
+      updateAllCards();
+    }
+  } else {
+    updateAllCards();
+  }
+});
+
+watch(diff, newVal => {
+  if (newVal == 0) {
+    // emit('timeElapsed');
+    updateAllCards();
+  }
+});
+
+onMounted(() => {
+  if (diff.value !== 0) {
+    show.value = true;
+  }
+});
+
+onBeforeMount(() => {
+  if (props.countdown) {
+    if (!props.deadline) {
+      throw new Error("Missing props 'deadline'");
+    }
+    const endTime = props.deadline;
+    let epoch = Date.parse(endTime.replace(/-/g, '/'));
+    if (props.deadlineDate != null) {
+      epoch = Date.parse(props.deadlineDate.toDateString());
+    }
+    if (props.deadlineISO) {
+      epoch = Date.parse(props.deadlineISO);
+    }
+    date.value = Math.trunc(epoch / 1000);
+    if (!date.value) {
+      throw new Error("Invalid props value, correct the 'deadline'");
+    }
+  }
+  interval.value = setInterval(() => {
+    now.value = Math.trunc(new Date().getTime() / 1000);
+  }, 1000);
+});
+
+onUnmounted(() => {
+  // if (window['cancelAnimationFrame']) {
+  //     cancelAnimationFrame(frame);
+  // }
+  clearInterval(interval.value);
+});
+</script>
+
+<style lang="scss">
+.no-animation__card {
+  font-weight: 500;
+  font-size: 2rem;
+  line-height: 1.5;
+  display: block;
+  color: v-bind(mainColor);
+}
+
+.flip-clock {
+  text-align: center;
+  perspective: 600px;
+  margin: 0 auto;
+
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+  }
+}
+
+.flip-clock__piece {
+  display: inline-block;
+  margin: 0 0.2vw;
+
+  @media (min-width: 1000px) {
+    margin: 0 5px;
+  }
+}
+
+.flip-clock__slot {
+  font-size: 1rem;
+  line-height: 1.5;
+  display: block;
+  color: v-bind(labelColor);
+}
+
+$halfHeight: 0.72em;
+$borderRadius: 0.15em;
+
+.flip-card {
+  display: block;
+  position: relative;
+  padding-bottom: $halfHeight;
+  font-size: 2.25rem;
+  line-height: 0.95;
+}
+
+@media (min-width: 1000px) {
+  .flip-clock__slot {
+    font-size: 1.2rem;
+  }
+
+  .flip-card {
+    font-size: 3rem;
+  }
+}
+
+.flip-card__top,
+.flip-card__bottom,
+.flip-card__back-bottom,
+.flip-card__back::before,
+.flip-card__back::after {
+  display: block;
+  height: $halfHeight;
+  color: v-bind(mainColor);
+  background: v-bind(mainFlipBackgroundColor);
+  padding: 0.23em 0.15em 0.4em;
+  border-radius: $borderRadius $borderRadius 0 0;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  transform-style: preserve-3d;
+  width: 2.1em;
+  height: $halfHeight;
+}
+
+.flip-card__top-4digits,
+.flip-card__bottom-4digits,
+.flip-card__back-bottom-4digits,
+.flip-card__back-4digits::before,
+.flip-card__back-4digits::after {
+  display: block;
+  height: $halfHeight;
+  color: v-bind(mainColor);
+  background: v-bind(mainFlipBackgroundColor);
+  padding: 0.23em 0.15em 0.4em;
+  border-radius: $borderRadius $borderRadius 0 0;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  transform-style: preserve-3d;
+  width: 2.65em;
+  height: $halfHeight;
+}
+
+.flip-card__bottom,
+.flip-card__back-bottom,
+.flip-card__bottom-4digits,
+.flip-card__back-bottom-4digits {
+  color: v-bind(secondFlipColor);
+  position: absolute;
+  top: 50%;
+  left: 0;
+  border-top: solid 1px #000;
+  background: v-bind(secondFlipBackgroundColor);
+  border-radius: 0 0 $borderRadius $borderRadius;
+  pointer-events: none;
+  overflow: hidden;
+  z-index: 2;
+}
+
+.flip-card__back-bottom,
+.flip-card__back-bottom-4digits {
+  z-index: 1;
+}
+
+.flip-card__bottom::after,
+.flip-card__back-bottom::after,
+.flip-card__bottom-4digits::after,
+.flip-card__back-bottom-4digits::after {
+  display: block;
+  margin-top: -$halfHeight;
+}
+
+.flip-card__back::before,
+.flip-card__bottom::after,
+.flip-card__back-bottom::after,
+.flip-card__back-4digits::before,
+.flip-card__bottom-4digits::after,
+.flip-card__back-bottom-4digits::after {
+  content: attr(data-value);
+}
+
+.flip-card__back,
+.flip-card__back-4digits {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  left: 0%;
+  pointer-events: none;
+}
+
+.flip-card__back::before,
+.flip-card__back-4digits::before {
+  position: relative;
+  overflow: hidden;
+  z-index: -1;
+}
+
+.flip .flip-card__back::before,
+.flip .flip-card__back-4digits::before {
+  z-index: 1;
+  animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
+  animation-fill-mode: both;
+  transform-origin: center bottom;
+}
+
+.flip .flip-card__bottom,
+.flip .flip-card__bottom-4digits {
+  transform-origin: center top;
+  animation-fill-mode: both;
+  animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
+}
+
+@keyframes flipTop {
+  0% {
+    transform: rotateX(0deg);
+    z-index: 2;
+  }
+
+  0%,
+  99% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: rotateX(-90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes flipBottom {
+  0%,
+  50% {
+    z-index: -1;
+    transform: rotateX(90deg);
+    opacity: 0;
+  }
+
+  51% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+    transform: rotateX(0deg);
+    z-index: 5;
+  }
+}
+</style>