✨ loading函数式调用

src/components/func/geetest.vue

@@ -23,21 +23,18 @@ const showInner = ref<boolean>(false);
 
 const geetestEl = useTemplateRef<HTMLDivElement>("geetestRef");
 
-watch(show, () => {
+watch(
-  if (show.value) {
+  () => show.value,
-    showOuter.value = true;
+  () => {
-    setTimeout(() => {
+    if (show.value) {
-      showInner.value = true;
+      showOuter.value = true;
-    }, 100);
+      setTimeout(() => (showInner.value = true), 100);
-  } else {
+    } else {
-    setTimeout(() => {
+      setTimeout(() => (showInner.value = false), 100);
-      showInner.value = false;
+      setTimeout(() => (showOuter.value = false), 300);
-    }, 100);
+    }
-    setTimeout(() => {
+  },
-      showOuter.value = false;
+);
-    }, 300);
-  }
-});
 
 async function displayBox(
   props: TGApp.Plugins.Mys.Geetest.reqResp,
@@ -58,24 +55,18 @@ async function displayBox(
         if (geetestEl.value === null) return;
         geetestEl.value.innerHTML = "";
         captchaObj.appendTo("#geetest");
-        captchaObj.onReady(() => {
+        captchaObj.onReady(() => (show.value = true));
-          show.value = true;
+        captchaObj.onSuccess(() => {
-        });
-        captchaObj.onSuccess(async () => {
           const validate = captchaObj.getValidate();
           resolve(validate);
         });
-        captchaObj.onClose(() => {
+        captchaObj.onClose(() => (show.value = false));
-          show.value = false;
-        });
       },
     );
   });
 }
 
-defineExpose({
+defineExpose({ displayBox });
-  displayBox,
-});
 </script>
 <style lang="css" scoped>
 .func-geetest-outer-enter-active,
@@ -116,7 +107,7 @@ defineExpose({
 
 .geetest-overlay {
   position: fixed;
-  z-index: 100;
+  z-index: 999;
   top: 0;
   left: 0;
   display: flex;
@@ -124,7 +115,7 @@ defineExpose({
   height: 100%;
   align-items: center;
   justify-content: center;
-  backdrop-filter: blur(20px);
+  backdrop-filter: blur(10px);
   background: rgb(0 0 0 / 50%);
 }
 

src/components/func/loading.ts

@@ -0,0 +1,73 @@
+/**
+ * @file component/func/loading.ts
+ * @description loading 组件封装，函数式调用
+ * @since Beta v0.6.3
+ */
+
+import type { ComponentInternalInstance, VNode } from "vue";
+import { h, render } from "vue";
+
+import loading from "./loading.vue";
+
+const loadingId = "tg-func-loading";
+
+export type LoadingParams = { show: boolean; title: string; subtitle?: string; empty?: boolean };
+
+/**
+ * @description 自定义 loading 组件
+ * @since Beta v0.6.3
+ * @return LoadingInstance
+ */
+interface LoadingInstance extends ComponentInternalInstance {
+  exposeProxy: {
+    displayBox: (props: LoadingParams) => void;
+  };
+}
+
+function renderBox(props: LoadingParams): VNode {
+  const container = document.createElement("div");
+  container.id = loadingId;
+  const boxVNode: VNode = h(loading, props);
+  render(boxVNode, container);
+  document.body.appendChild(container);
+  return boxVNode;
+}
+
+let loadingInstance: VNode;
+
+function showLoadingFull(show: boolean, title: string, sub: string, empty: boolean): void {
+  const params: LoadingParams = { show: show, title: title, subtitle: sub, empty: empty };
+  if (loadingInstance !== undefined) {
+    const boxVue = <LoadingInstance>loadingInstance.component;
+    return boxVue.exposeProxy.displayBox(params);
+  } else {
+    loadingInstance = renderBox(params);
+    return showLoadingFull(show, title, sub, empty);
+  }
+}
+
+function showLoadingStart(title: string, sub?: string): void {
+  showLoadingFull(true, title, sub ?? "", false);
+}
+
+function showLoadingUpdate(title: string, sub?: string, empty?: boolean): void {
+  showLoadingFull(true, title, sub ?? "", empty ?? false);
+}
+
+function showLoadingEmpty(title: string, sub?: string): void {
+  showLoadingFull(true, title, sub ?? "", true);
+}
+
+function showLoadingEnd(): void {
+  showLoadingFull(false, "", "", false);
+}
+
+const showLoading = {
+  _: showLoadingFull,
+  start: showLoadingStart,
+  update: showLoadingUpdate,
+  empty: showLoadingEmpty,
+  end: showLoadingEnd,
+};
+
+export default showLoading;

src/components/func/loading.vue

@@ -0,0 +1,192 @@
+<template>
+  <transition name="func-loading">
+    <div v-show="showBox || showOuter" class="loading-overlay">
+      <transition name="func-loading-inner">
+        <div v-show="showInner" class="loading-container">
+          <div class="loading-box">
+            <div class="loading-title">
+              <span>{{ data.title }}</span>
+              <span class="loading-circle" v-show="!empty" />
+            </div>
+            <div class="loading-subtitle">{{ data.subtitle }}</div>
+            <div class="loading-img">
+              <img v-if="!empty" src="/source/UI/loading.webp" alt="loading" />
+              <img v-else src="/source/UI/empty.webp" alt="empty" />
+            </div>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </transition>
+</template>
+<script lang="ts" setup>
+import { reactive, ref, watch, onMounted, toRaw } from "vue";
+
+import { LoadingParams } from "./loading.js";
+
+const showBox = ref<boolean>(false);
+const showOuter = ref<boolean>(false);
+const showInner = ref<boolean>(false);
+
+const props = defineProps<LoadingParams>();
+const data = reactive<LoadingParams>(toRaw(props));
+
+watch(
+  () => showBox.value,
+  () => {
+    if (showBox.value) {
+      showOuter.value = true;
+      setTimeout(() => (showInner.value = true), 100);
+      return;
+    }
+    setTimeout(() => (showInner.value = false), 100);
+    setTimeout(() => (showOuter.value = false), 300);
+  },
+);
+
+onMounted(() => displayBox(props));
+
+function displayBox(params: LoadingParams): void {
+  if (params.show != showBox.value && !params.show) {
+    showBox.value = false;
+    setTimeout(() => {
+      data.title = "";
+      data.subtitle = "";
+      data.empty = false;
+    }, 500);
+    return;
+  }
+  data.title = params.title;
+  data.subtitle = params.subtitle;
+  data.empty = params.empty;
+  showBox.value = true;
+}
+
+defineExpose({ displayBox });
+</script>
+<style lang="css" scoped>
+.func-loading-outer-enter-active,
+.func-loading-outer-leave-active,
+.func-loading-inner-enter-active {
+  transition: all 0.3s;
+}
+
+.func-loading-inner-leave-active {
+  transition: all 0.5s ease-in-out;
+}
+
+.func-loading-inner-enter-from {
+  opacity: 0;
+  transform: scale(1.5);
+}
+
+.func-loading-inner-enter-to,
+.func-loading-inner-leave-from {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.func-loading-outer-enter-to,
+.func-loading-outer-leave-from {
+  opacity: 1;
+}
+
+.func-loading-outer-enter-from,
+.func-loading-outer-leave-to {
+  opacity: 0;
+}
+
+.func-loading-inner-leave-to {
+  opacity: 0;
+  transform: scale(0);
+}
+
+.loading-overlay {
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(20px);
+  background: rgb(0 0 0 / 50%);
+}
+
+.loading-container {
+  display: flex;
+  min-width: 800px;
+  min-height: 300px;
+  padding: 15px;
+  border-radius: 15px;
+  background: rgb(255 255 255 / 5%);
+  box-shadow: 0 0 10px rgb(0 0 0 / 50%);
+}
+
+.loading-box {
+  display: flex;
+  width: 100%;
+  box-sizing: content-box;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  border: #f4d8a8 1px solid;
+  border-radius: 5px;
+  color: #f4d8a8;
+}
+
+.loading-title {
+  display: flex;
+  width: 100%;
+  height: 50px;
+  align-items: center;
+  justify-content: center;
+  column-gap: 5px;
+  font-family: var(--font-title);
+  font-size: 2rem;
+  font-weight: 600;
+}
+
+.loading-circle {
+  width: 40px;
+  height: 40px;
+  border: 5px solid #f4d8a8;
+  border-radius: 100%;
+  border-top-color: transparent;
+  animation: circle infinite 0.75s linear;
+}
+
+@keyframes circle {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-subtitle {
+  width: 100%;
+  height: 25px;
+  font-size: 1rem;
+  text-align: center;
+}
+
+.loading-img {
+  display: flex;
+  width: 100%;
+  height: 200px;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    max-width: 100%;
+    max-height: 200px;
+    border-radius: 5px;
+  }
+}
+</style>

src/components/overlay/to-loading.vue

@@ -1,19 +1,19 @@
 <template>
   <TOverlay v-model="show" :blur-val="'5px'">
-    <div class="tol-div">
+    <div class="loading-container">
-      <div class="tol-box">
+      <div class="loading-box">
-        <div class="tol-title">
+        <div class="loading-title">
           <slot name="title">
             {{ title }}
           </slot>
           <v-progress-circular v-show="!empty" indeterminate color="#f4d8a8" />
         </div>
-        <div v-if="subtitle" class="tol-subtitle">
+        <div v-if="subtitle" class="loading-subtitle">
           <slot name="subtitle">
             {{ subtitle }}
           </slot>
         </div>
-        <div class="tol-img">
+        <div class="loading-img">
           <slot name="img">
             <img v-if="!empty" src="/source/UI/loading.webp" alt="loading" />
             <img v-else src="/source/UI/empty.webp" alt="empty" />
@@ -52,7 +52,7 @@ watch(
 );
 </script>
 <style lang="css" scoped>
-.tol-div {
+.loading-container {
   display: flex;
   min-width: 800px;
   min-height: 300px;
@@ -62,7 +62,7 @@ watch(
   box-shadow: 0 0 10px rgb(0 0 0 / 50%);
 }
 
-.tol-box {
+.loading-box {
   display: flex;
   width: 100%;
   box-sizing: content-box;
@@ -75,7 +75,7 @@ watch(
   color: #f4d8a8;
 }
 
-.tol-title {
+.loading-title {
   display: flex;
   width: 100%;
   height: 50px;
@@ -86,7 +86,7 @@ watch(
   font-weight: 600;
 }
 
-.tol-subtitle {
+.loading-subtitle {
   width: 100%;
   height: 25px;
   font-family: Genshin-Light, serif;
@@ -94,7 +94,7 @@ watch(
   text-align: center;
 }
 
-.tol-img {
+.loading-img {
   display: flex;
   width: 100%;
   height: 200px;
@@ -102,7 +102,7 @@ watch(
   justify-content: center;
 }
 
-.tol-img:deep(img) {
+.loading-img:deep(img) {
   max-width: 100%;
   max-height: 200px;
   border-radius: 5px;