From f48b7ef6edafad42943b3e5f10be4c57454426f8 Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Fri, 26 May 2023 13:33:08 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20TLoading=20=E2=86=92=20TOL?=
 =?UTF-8?q?oading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/main/t-loading.vue     |  93 ----------------------
 src/components/overlay/to-loading.vue | 106 ++++++++++++++++++++++++++
 2 files changed, 106 insertions(+), 93 deletions(-)
 delete mode 100644 src/components/main/t-loading.vue
 create mode 100644 src/components/overlay/to-loading.vue

diff --git a/src/components/main/t-loading.vue b/src/components/main/t-loading.vue
deleted file mode 100644
index 484fe644..00000000
--- a/src/components/main/t-loading.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-  <TOverlay v-model="show">
-    <div class="loading-div">
-      <div class="loading-content">
-        <div class="loading-title">
-          {{ title }}
-          <v-progress-circular v-show="!empty" indeterminate color="#f4d8a8" />
-        </div>
-        <div v-if="subtitle !== ''" class="loading-subtitle">
-          {{ subtitle }}
-        </div>
-        <div v-if="!empty" class="loading-img">
-          <img src="/source/UI/loading.webp" alt="loading">
-        </div>
-        <div v-else class="loading-img">
-          <img src="/source/UI/empty.webp" alt="empty">
-        </div>
-        <div v-if="content !== ''" class="loading-text">
-          {{ content }}
-        </div>
-      </div>
-    </div>
-  </TOverlay>
-</template>
-<script lang="ts" setup>
-// vue
-import { watch, ref } from "vue";
-import TOverlay from "./t-overlay.vue";
-
-interface LoadingProps {
-  modelValue: boolean;
-  title?: string;
-  subtitle?: string;
-  content?: string;
-  empty?: boolean;
-}
-
-const show = ref(true);
-
-const props = withDefaults(defineProps<LoadingProps>(), {
-  modelValue: true,
-  title: "加载中",
-  subtitle: "",
-  content: "",
-  empty: false,
-});
-
-watch(() => props.modelValue, (v) => {
-  show.value = v;
-});
-</script>
-<style lang="css" scoped>
-.loading-div {
-  display: flex;
-  width: 50%;
-  height: 50%;
-  background: rgb(255 255 255 / 10%);
-  box-shadow: 0 0 10px rgb(0 0 0 / 40%);
-  border-radius: 20px;
-}
-
-.loading-content {
-  width: 100%;
-  margin: 20px;
-  display: flex;
-  border: #f4d8a8 1px solid;
-  border-radius: 20px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.loading-title {
-  font-size: 2rem;
-  font-family: Genshin, serif;
-  font-weight: 600;
-  color: #f4d8a8;
-}
-
-.loading-subtitle {
-  font-size: 1rem;
-  font-family: Genshin-Light, serif;
-  color: #f4d8a8;
-}
-
-.loading-img {
-  width: 256px;
-  height: 256px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-</style>
diff --git a/src/components/overlay/to-loading.vue b/src/components/overlay/to-loading.vue
new file mode 100644
index 00000000..efcf781b
--- /dev/null
+++ b/src/components/overlay/to-loading.vue
@@ -0,0 +1,106 @@
+<template>
+  <TOverlay v-model="show" :blur-val="'5px'">
+    <div class="tol-div">
+      <div class="tol-box">
+        <div class="tol-title">
+          <slot name="title">
+            {{ title }}
+          </slot>
+          <v-progress-circular v-show="!empty" indeterminate color="#f4d8a8" />
+        </div>
+        <div v-if="subtitle" class="tol-subtitle">
+          <slot name="subtitle">
+            {{ subtitle }}
+          </slot>
+        </div>
+        <div class="tol-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">
+          </slot>
+        </div>
+      </div>
+    </div>
+  </TOverlay>
+</template>
+<script lang="ts" setup>
+// vue
+import { ref, watch } from "vue";
+import TOverlay from "../main/t-overlay.vue";
+
+interface LoadingProps {
+  modelValue: boolean;
+  title?: string;
+  subtitle?: string;
+  empty?: boolean;
+}
+
+const show = ref(true);
+
+const props = withDefaults(defineProps<LoadingProps>(), {
+  modelValue: true,
+  title: "加载中",
+  empty: false,
+});
+
+watch(() => props.modelValue, (v) => {
+  show.value = v;
+});
+</script>
+<style lang="css" scoped>
+.tol-div {
+  display: flex;
+  min-width: 800px;
+  min-height: 300px;
+  padding: 15px;
+  background: rgb(255 255 255 / 5%);
+  box-shadow: 0 0 10px rgb(0 0 0 / 50%);
+  border-radius: 15px;
+}
+
+.tol-box {
+  width: 100%;
+  padding: 10px;
+  display: flex;
+  box-sizing: content-box;
+  border: #f4d8a8 1px solid;
+  color: #f4d8a8;
+  border-radius: 5px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.tol-title {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 2rem;
+  font-family: Genshin, serif;
+  font-weight: 600;
+}
+
+.tol-subtitle {
+  width: 100%;
+  text-align: center;
+  font-size: 1rem;
+  height: 25px;
+  font-family: Genshin-Light, serif;
+}
+
+.tol-img {
+  width: 100%;
+  height: 200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.tol-img:deep(img) {
+  max-height: 200px;
+  max-width: 100%;
+  border-radius: 5px;
+}
+</style>