From 8c74dcc0f46c497366ef72788d69b1de3f1821da Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Thu, 25 May 2023 14:18:29 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E6=A0=B7=E5=BC=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=EF=BC=8C=E9=80=8F=E6=98=8E=E8=89=B2=E6=84=9F=E8=A7=89?=
 =?UTF-8?q?=E6=8C=BA=E5=A5=BD=E7=9C=8B=E7=9A=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |   4 +-
 src/components/{ => main}/t-backTop.vue       |   2 +-
 src/components/{ => main}/t-calendar.vue      | 197 +++++++++++-------
 src/components/{ => main}/t-pool.vue          | 123 ++++++-----
 src/components/{ => main}/t-position.vue      | 124 +++++------
 src/components/{ => main}/t-sidebar.vue       |  12 +-
 src/components/{ => main}/t-switchTheme.vue   |   2 +-
 .../{ => mini}/t-calendar-material.vue        |   0
 src/components/{ => mini}/t-mini-avatar.vue   |   0
 src/components/{ => mini}/t-mini-weapon.vue   |   0
 src/components/{ => overlay}/t-confirm.vue    |   4 +-
 src/components/{ => overlay}/t-loading.vue    |   0
 src/pages/Achievements.vue                    |   2 +-
 src/pages/Announcements.vue                   |   2 +-
 src/pages/Config.vue                          |   4 +-
 src/pages/Home.vue                            |   8 +-
 src/pages/WIKI/Character.vue                  |   2 +-
 src/pages/WIKI/GCG.vue                        |   2 +-
 src/pages/WIKI/Weapon.vue                     |   2 +-
 src/views/t-anno-json.vue                     |   4 +-
 src/views/t-anno.vue                          |   4 +-
 src/views/t-lottery.vue                       |   4 +-
 src/views/t-news.vue                          |   2 +-
 src/views/t-post-json.vue                     |   4 +-
 src/views/t-post.vue                          |   4 +-
 25 files changed, 280 insertions(+), 232 deletions(-)
 rename src/components/{ => main}/t-backTop.vue (96%)
 rename src/components/{ => main}/t-calendar.vue (69%)
 rename src/components/{ => main}/t-pool.vue (72%)
 rename src/components/{ => main}/t-position.vue (54%)
 rename src/components/{ => main}/t-sidebar.vue (92%)
 rename src/components/{ => main}/t-switchTheme.vue (95%)
 rename src/components/{ => mini}/t-calendar-material.vue (100%)
 rename src/components/{ => mini}/t-mini-avatar.vue (100%)
 rename src/components/{ => mini}/t-mini-weapon.vue (100%)
 rename src/components/{ => overlay}/t-confirm.vue (94%)
 rename src/components/{ => overlay}/t-loading.vue (100%)

diff --git a/src/App.vue b/src/App.vue
index 06e7388b..8917f5a6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,8 +15,8 @@
 <script lang="ts" setup>
 // vue
 import { onMounted, ref } from "vue";
-import TSidebar from "./components/t-sidebar.vue";
-import TBackTop from "./components/t-backTop.vue";
+import TSidebar from "./components/main/t-sidebar.vue";
+import TBackTop from "./components/main/t-backTop.vue";
 // tauri
 import { app, event, fs, window } from "@tauri-apps/api";
 // store
diff --git a/src/components/t-backTop.vue b/src/components/main/t-backTop.vue
similarity index 96%
rename from src/components/t-backTop.vue
rename to src/components/main/t-backTop.vue
index 296a6702..d2511716 100644
--- a/src/components/t-backTop.vue
+++ b/src/components/main/t-backTop.vue
@@ -1,7 +1,7 @@
 <template>
   <transition name="fade">
     <div v-show="canTop" class="back-top" @click="handleScrollTop">
-      <img src="../assets/icons/arrow-top.svg" alt="back-icon">
+      <img src="../../assets/icons/arrow-top.svg" alt="back-icon">
     </div>
   </transition>
 </template>
diff --git a/src/components/t-calendar.vue b/src/components/main/t-calendar.vue
similarity index 69%
rename from src/components/t-calendar.vue
rename to src/components/main/t-calendar.vue
index b5959032..4af091c9 100644
--- a/src/components/t-calendar.vue
+++ b/src/components/main/t-calendar.vue
@@ -1,60 +1,61 @@
 <template>
-  <v-list class="calendar-card">
-    <v-list-item>
-      <v-list-item-title style="color: #fec90b; margin-left: 10px; margin-bottom: 10px; font-family: Genshin, serif">
-        <v-icon color="#EBD49E">
+  <div class="calendar-box">
+    <div class="calendar-title">
+      <div class="calendar-title-left">
+        <v-icon size="small">
           mdi-calendar-clock
         </v-icon>
-        今日素材
-        <span style="color: #faf7e8">{{ dateNow }}</span>
+        <span>今日素材</span>
+        <span>{{ dateNow }}</span>
+      </div>
+      <div class="calendar-title-right">
         <v-btn
           v-for="text of btnText"
           :key="text.week"
-          class="calendar-btn"
+          class="calendar-title-btn"
           :style="{
-            border: text.week === weekNow ? '2px solid var(--btn-bg-1)' : '0',
-            background: text.week === btnNow ? 'var(--btn-bg-1)' : 'var(--calendar-btn-bg)',
-            color: '#faf7e8',
-            marginBottom: '1px'
+            boxShadow: text.week === weekNow ? '0 0 5px #FEC90B' : 'none',
+            background: text.week === btnNow ? 'rgba(0,0,0,0.8)' : 'rgba(0,0,0,0.3)',
           }"
           @click="getContents(text.week)"
         >
           {{ text.text }}
         </v-btn>
-      </v-list-item-title>
-      <div class="calendar-box">
-        <div class="calendar-single">
-          <div class="calendar-title">
-            天赋培养
-          </div>
-          <div class="cards-grid">
-            <div
-              v-for="item in characterCards"
-              :key="item.id"
-              class="card-box"
-              @click="selectContent(item, 'character')"
-            >
-              <TMiniAvatar size="100px" :model-value="item" />
-            </div>
-          </div>
-        </div>
-        <div class="calendar-single">
-          <div class="calendar-title">
-            武器突破
-          </div>
-          <div class="cards-grid">
-            <div
-              v-for="item in weaponCards"
-              :key="item.id"
-              class="card-box"
-              @click="selectContent(item, 'weapon')"
-            >
-              <TMiniWeapon size="100px" :model-value="item" />
-            </div>
-          </div>
+      </div>
+    </div>
+    <div class="calendar-divider" />
+    <div class="calendar-sub">
+      <div class="calendar-sub-title">
+        <img src="/src/assets/icons/arrow-right.svg" alt="character">
+        <span>角色突破</span>
+      </div>
+      <div class="cards-grid">
+        <div
+          v-for="item in characterCards"
+          :key="item.id"
+          class="card-box"
+          @click="selectContent(item, 'character')"
+        >
+          <TMiniAvatar size="100px" :model-value="item" />
         </div>
       </div>
-    </v-list-item>
+    </div>
+    <div class="calendar-sub">
+      <div class="calendar-sub-title">
+        <img src="/src/assets/icons/arrow-right.svg" alt="character">
+        <span>武器突破</span>
+      </div>
+      <div class="cards-grid">
+        <div
+          v-for="item in weaponCards"
+          :key="item.id"
+          class="card-box"
+          @click="selectContent(item, 'weapon')"
+        >
+          <TMiniWeapon size="100px" :model-value="item" />
+        </div>
+      </div>
+    </div>
     <v-snackbar v-model="snackbar" :timeout="1500" :color="snackbarColor">
       {{ snackbarText }}
     </v-snackbar>
@@ -87,7 +88,7 @@
           <div class="detail-btn">
             <v-btn @click="showDetail(selectedItem)">
               <template #append>
-                <img src="../assets/icons/arrow-right.svg" alt="right">
+                <img src="../../assets/icons/arrow-right.svg" alt="right">
               </template>
               详情
             </v-btn>
@@ -98,19 +99,19 @@
         <v-icon>mdi-close</v-icon>
       </div>
     </v-overlay>
-  </v-list>
+  </div>
 </template>
 <script lang="ts" setup>
 // vue
 import { computed, onMounted, ref } from "vue";
-import TMiniAvatar from "./t-mini-avatar.vue";
-import TMiniWeapon from "./t-mini-weapon.vue";
-import TCalendarMaterial from "./t-calendar-material.vue";
+import TMiniAvatar from "../mini/t-mini-avatar.vue";
+import TMiniWeapon from "../mini/t-mini-weapon.vue";
+import TCalendarMaterial from "../mini/t-calendar-material.vue";
 // data
-import { AppCalendarData } from "../data";
+import { AppCalendarData } from "../../data";
 // interface
-import { OBC_CONTENT_API } from "../plugins/Mys/interface/utils";
-import { createTGWindow } from "../utils/TGWindow";
+import { OBC_CONTENT_API } from "../../plugins/Mys/interface/utils";
+import { createTGWindow } from "../../utils/TGWindow";
 
 // loading
 const loading = ref(true as boolean);
@@ -212,45 +213,79 @@ function getContents (day: number) {
 }
 </script>
 <style lang="css" scoped>
-/* calendar 大盒子 */
-.calendar-card {
-    margin-top: 10px;
-    font-family: Genshin-Light, serif;
-    background: var(--content-bg-1);
-    border-radius: 10px;
-}
-
-.calendar-btn {
-    margin-left: 10px;
-    font-family: Genshin-Light, serif;
-    color: var(--btn-text-1);
-    border-radius: 10px;
-}
-
 .calendar-box {
-    margin: 5px;
-}
-
-.calendar-single {
-    margin-bottom: 10px;
-    background: var(--content-bg-2);
-    color: var(--content-bg-1);
-    border-radius: 10px;
+  margin-bottom: 10px;
+  padding: 10px;
+  background: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+  border-radius: 5px;
 }
 
 .calendar-title {
-    font-size: 1.5rem;
-    font-family: Genshin, serif;
-    color: #546D8B;
-    padding-left: 15px;
-    padding-top: 10px;
+  height: 45px;
+  font-size: 20px;
+  display: flex;
+  color:rgba(255, 255, 255, 0.8);
+}
+
+.calendar-title-left {
+  width: 20%;
+  height: 45px;
+  font-family: Genshin, serif;
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+}
+
+.calendar-title-left span {
+  margin-left: 10px;
+}
+
+.calendar-title-right {
+  width: 80%;
+  font-family: Genshin-Light, serif;
+  height: 45px;
+}
+
+.calendar-title-btn {
+    margin-left: 10px;
+    border-radius: 5px;
+}
+
+.calendar-divider {
+  width: 100%;
+  height: 2px;
+  border-radius: 2px;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.calendar-sub {
+    margin: 5px;
+}
+
+.calendar-sub-title {
+  background: rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: center;
+  height: 30px;
+  padding: 0 10px;
+  margin: 5px 0;
+  border-radius: 5px;
+  font-family: Genshin-Light, serif;
+  color: rgba(255, 255, 255, 0.8);
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
+}
+
+.calendar-sub-title img {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
 }
 
 .cards-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-    grid-gap: 10px;
-    padding: 10px;
+    grid-gap: 8px;
 }
 
 /* overlay 盒子 */
diff --git a/src/components/t-pool.vue b/src/components/main/t-pool.vue
similarity index 72%
rename from src/components/t-pool.vue
rename to src/components/main/t-pool.vue
index 9d69f5fc..3da93d86 100644
--- a/src/components/t-pool.vue
+++ b/src/components/main/t-pool.vue
@@ -1,65 +1,63 @@
 <template>
-  <v-list class="pool-card">
-    <v-list-item>
-      <v-list-item-title style="color: #fec90b; margin-left: 10px; font-family: Genshin, serif">
-        <img src="../assets/icons/icon-wish.svg" alt="wish" class="pool-wish-icon">
-        限时祈愿
-      </v-list-item-title>
-      <div v-if="!loading" class="pool-grid">
-        <v-card
-          v-for="pool in poolCards"
-          :key="pool.post_id"
-          style="background: var(--content-bg-2); color: #546d8b; border-radius: 10px"
-        >
-          <v-list style="background: var(--content-bg-2); color: #546d8b">
-            <v-list-item :title="pool.title" :subtitle="pool.subtitle">
-              <template #prepend>
-                <v-img :src="pool.voice.icon" class="pool-sideIcon" />
-              </template>
-              <template v-if="pool.voice.url" #append>
-                <audio :src="pool.voice.url" controls />
-              </template>
-            </v-list-item>
-          </v-list>
-          <div class="pool-cover" @click="toPost(pool)">
-            <img :src="pool.cover" alt="cover">
+  <div class="pool-box">
+    <div class="pool-title">
+      <img src="../../assets/icons/icon-wish.svg" alt="wish" class="pool-title-icon">
+      限时祈愿
+    </div>
+    <div v-if="!loading" class="pool-grid">
+      <v-card
+        v-for="pool in poolCards"
+        :key="pool.post_id"
+        style="background: var(--content-bg-2); color: #546d8b; border-radius: 10px"
+      >
+        <v-list style="background: var(--content-bg-2); color: #546d8b">
+          <v-list-item :title="pool.title" :subtitle="pool.subtitle">
+            <template #prepend>
+              <v-img :src="pool.voice.icon" class="pool-sideIcon" />
+            </template>
+            <template v-if="pool.voice.url" #append>
+              <audio :src="pool.voice.url" controls />
+            </template>
+          </v-list-item>
+        </v-list>
+        <div class="pool-cover" @click="toPost(pool)">
+          <img :src="pool.cover" alt="cover">
+        </div>
+        <div class="pool-character">
+          <div v-for="character in pool.characters" :key="character.url" @click="toOuter(character.url, pool.title)">
+            <img :src="character.icon" class="pool-icon" alt="character">
           </div>
-          <div class="pool-character">
-            <div v-for="character in pool.characters" :key="character.url" @click="toOuter(character.url, pool.title)">
-              <img :src="character.icon" class="pool-icon" alt="character">
-            </div>
-            <div class="pool-clock">
-              <v-progress-circular :model-value="poolTimePass[pool.post_id]" size="100" width="10" :color="poolColor[pool.post_id]">
-                {{ poolTimeGet[pool.post_id] }}
-              </v-progress-circular>
-            </div>
+          <div class="pool-clock">
+            <v-progress-circular :model-value="poolTimePass[pool.post_id]" size="100" width="10" :color="poolColor[pool.post_id]">
+              {{ poolTimeGet[pool.post_id] }}
+            </v-progress-circular>
           </div>
-          <v-card-text>
-            <span style="width: 60%">
-              <v-icon>mdi-calendar-clock</v-icon>
-              {{ pool.time.start }}~{{ pool.time.end }}
-            </span>
-          </v-card-text>
-        </v-card>
-      </div>
-    </v-list-item>
+        </div>
+        <v-card-text>
+          <span style="width: 60%">
+            <v-icon>mdi-calendar-clock</v-icon>
+            {{ pool.time.start }}~{{ pool.time.end }}
+          </span>
+        </v-card-text>
+      </v-card>
+    </div>
     <v-snackbar v-model="showBar" :color="barColor" timeout="1000">
       {{ barText }}
     </v-snackbar>
-  </v-list>
+  </div>
 </template>
 <script lang="ts" setup>
 // vue
 import { ref, onMounted, onUnmounted } from "vue";
 import { useRouter } from "vue-router";
 // store
-import { useHomeStore } from "../store/modules/home";
+import { useHomeStore } from "../../store/modules/home";
 // utils
-import { createTGWindow } from "../utils/TGWindow";
+import { createTGWindow } from "../../utils/TGWindow";
 // plugins
-import MysOper from "../plugins/Mys";
+import MysOper from "../../plugins/Mys";
 // interface
-import { GachaCard, GachaData } from "../plugins/Mys/interface/gacha";
+import { GachaCard, GachaData } from "../../plugins/Mys/interface/gacha";
 
 // vue
 const router = useRouter();
@@ -211,18 +209,29 @@ onUnmounted(() => {
 </script>
 
 <style lang="css" scoped>
-.pool-wish-icon {
-  width: 20px;
-  height: 20px;
-  display: inline-block;
+.pool-box {
+  margin-bottom: 10px;
+  padding: 10px;
+  font-family: Genshin, serif;
+  background: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+  border-radius: 5px;
 }
 
-.pool-card {
-  font-family: Genshin, serif;
-  width: 100%;
-  background: var(--content-bg-1);
-  border-radius: 10px;
-  margin-top: 10px;
+.pool-title {
+  color:rgba(255, 255, 255, 0.8);
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
+  font-size: 20px;
+  display: flex;
+}
+
+.pool-title-icon {
+  width: 25px;
+  height: 25px;
+  transform: translate(0, 2px);
+  margin-right: 10px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.3);
 }
 
 .pool-grid {
diff --git a/src/components/t-position.vue b/src/components/main/t-position.vue
similarity index 54%
rename from src/components/t-position.vue
rename to src/components/main/t-position.vue
index 427c07ed..0423142f 100644
--- a/src/components/t-position.vue
+++ b/src/components/main/t-position.vue
@@ -1,62 +1,57 @@
 <template>
-  <v-list class="position-card">
-    <v-list-item>
-      <v-list-item-title style="color: #fec90b; margin-left: 10px; font-family: Genshin, serif">
-        <img src="../assets/icons/board.svg" alt="act" class="position-act-icon">
-        近期活动
-      </v-list-item-title>
-      <div v-if="!loading" class="position-grid">
-        <v-card
-          v-for="card in positionCards"
-          :key="card.post_id"
-          style="background: var(--content-bg-2); color: #546d8b; border-radius: 10px"
-        >
-          <v-list style="background: var(--content-bg-2); color: #546d8b">
-            <v-list-item :title="card.title" :subtitle="card.abstract">
-              <template #prepend>
-                <v-avatar rounded="0" style="cursor: pointer" @click="toPost(card)">
-                  <v-img :src="card.icon" style="border-radius: 10px" />
-                </v-avatar>
-              </template>
-            </v-list-item>
-          </v-list>
-          <v-divider class="border-opacity-75" />
-          <v-card-text>
-            <span style="width: 60%">
-              <v-icon>mdi-calendar-clock</v-icon>
-              {{ card.time.start }}~{{ card.time.end }}
-            </span>
-          </v-card-text>
-          <v-card-actions>
-            <span style="width: 80%; margin-left: 10px">
-              <v-icon>mdi-clock-outline</v-icon>
-              剩余时间：
-              <span v-if="positionTimeGet[card.post_id] !== '已结束'" style="color: #90caf9">{{
-                positionTimeGet[card.post_id]
-              }}</span>
-              <span v-if="positionTimeGet[card.post_id] === '已结束'" style="color: #ff6d6d">已结束</span>
-            </span>
-            <v-btn class="card-btn" @click="toPost(card)">
-              <template #prepend>
-                <img src="../assets/icons/circle-check.svg" alt="check">查看
-              </template>
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </div>
-    </v-list-item>
-  </v-list>
+  <div class="position-box">
+    <div class="position-title">
+      <img src="../../assets/icons/board.svg" alt="act" class="position-icon">
+      近期活动
+    </div>
+    <div v-if="!loading" class="position-grid">
+      <v-card
+        v-for="card in positionCards"
+        :key="card.post_id"
+        style="background: var(--content-bg-2); color: #546d8b; border-radius: 5px"
+      >
+        <v-list style="background: var(--content-bg-2); color: #546d8b">
+          <v-list-item :title="card.title" :subtitle="card.abstract">
+            <template #prepend>
+              <v-avatar rounded="0" style="cursor: pointer" @click="toPost(card)">
+                <v-img :src="card.icon" style="border-radius: 10px" />
+              </v-avatar>
+            </template>
+            <template #append>
+              <v-btn variant="outlined" @click="toPost(card)">
+                查看
+              </v-btn>
+            </template>
+          </v-list-item>
+        </v-list>
+        <v-divider class="border-opacity-75" />
+        <v-card-text>
+          <div style="min-width: 200px;display: inline-block">
+            <v-icon>mdi-calendar-clock</v-icon>
+            {{ card.time.start }} ~ {{ card.time.end }}
+          </div>
+          <div style="min-width: 200px;display: inline-block">
+            <v-icon>mdi-clock-outline</v-icon>剩余时间：
+            <span v-if="positionTimeGet[card.post_id] !== '已结束'" style="color: #90caf9">{{
+              positionTimeGet[card.post_id]
+            }}</span>
+            <span v-if="positionTimeGet[card.post_id] === '已结束'" style="color: #ff6d6d">已结束</span>
+          </div>
+        </v-card-text>
+      </v-card>
+    </div>
+  </div>
 </template>
 <script lang="ts" setup>
 // vue
 import { ref, onMounted, onUnmounted } from "vue";
 import { useRouter } from "vue-router";
 // utils
-import { createTGWindow } from "../utils/TGWindow";
+import { createTGWindow } from "../../utils/TGWindow";
 // plugins
-import MysOper from "../plugins/Mys";
+import MysOper from "../../plugins/Mys";
 // interface
-import { PositionCard } from "../plugins/Mys/interface/position";
+import { PositionCard } from "../../plugins/Mys/interface/position";
 
 // vue
 const router = useRouter();
@@ -143,22 +138,31 @@ onUnmounted(() => {
 </script>
 
 <style lang="css" scoped>
-.position-act-icon {
-  width: 20px;
-  height: 20px;
-  display: inline-block;
+.position-box {
+  margin-bottom: 10px;
+  padding: 10px;
+  font-family: Genshin, serif;
+  background: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+  border-radius: 5px;
 }
 
-.position-card {
-  margin-top: 10px;
-  font-family: Genshin, serif;
-  background: var(--content-bg-1);
-  border-radius: 10px;
+.position-title {
+  color:rgba(255, 255, 255, 0.8);
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
+  font-size: 20px;
+  display: flex;
+}
+
+.position-icon {
+  width: 25px;
+  height: 25px;
+  margin-right: 10px;
 }
 
 .position-grid {
   display: grid;
-  grid-template-columns: repeat(3, minmax(400px, 1fr));
+  grid-template-columns: repeat(3, minmax(calc(400px + 2rem), 1fr));
   grid-gap: 20px;
   margin-top: 10px;
 }
diff --git a/src/components/t-sidebar.vue b/src/components/main/t-sidebar.vue
similarity index 92%
rename from src/components/t-sidebar.vue
rename to src/components/main/t-sidebar.vue
index f01674bc..183ccde8 100644
--- a/src/components/t-sidebar.vue
+++ b/src/components/main/t-sidebar.vue
@@ -26,7 +26,7 @@
       </v-list-item>
       <v-list-item title="公告" value="announcements" link href="/announcements">
         <template #prepend>
-          <img src="../assets/icons/board.svg" alt="annoIcon" class="side-icon">
+          <img src="../../assets/icons/board.svg" alt="annoIcon" class="side-icon">
         </template>
       </v-list-item>
       <v-list-item title="咨讯" value="news" link href="/news/2">
@@ -36,7 +36,7 @@
       </v-list-item>
       <v-list-item title="成就" value="achievements" link href="/achievements">
         <template #prepend>
-          <img src="../assets/icons/achievements.svg" alt="achievementsIcon" class="side-icon">
+          <img src="../../assets/icons/achievements.svg" alt="achievementsIcon" class="side-icon">
         </template>
       </v-list-item>
       <v-divider />
@@ -56,7 +56,7 @@
         </template>
         <v-list-item title="GCG" value="wiki-GCG" link href="/wiki/GCG">
           <template #prepend>
-            <img src="../assets/icons/GCG.svg" alt="gcgIcon" class="side-icon">
+            <img src="../../assets/icons/GCG.svg" alt="gcgIcon" class="side-icon">
           </template>
         </v-list-item>
         <v-list-item title="角色图鉴" value="wiki-character" link href="/wiki/character">
@@ -90,7 +90,7 @@
         </v-list-item>
         <v-list-item title="设置" value="config" link href="/config">
           <template #prepend>
-            <img src="../assets/icons/setting.svg" alt="setting" class="side-icon">
+            <img src="../../assets/icons/setting.svg" alt="setting" class="side-icon">
           </template>
         </v-list-item>
       </div>
@@ -104,8 +104,8 @@ import { computed, ref, onMounted } from "vue";
 // tauri
 import { event } from "@tauri-apps/api";
 // store
-import { useAppStore } from "../store/modules/app";
-import { useUserStore } from "../store/modules/user";
+import { useAppStore } from "../../store/modules/app";
+import { useUserStore } from "../../store/modules/user";
 
 const appStore = useAppStore();
 const userStore = useUserStore();
diff --git a/src/components/t-switchTheme.vue b/src/components/main/t-switchTheme.vue
similarity index 95%
rename from src/components/t-switchTheme.vue
rename to src/components/main/t-switchTheme.vue
index 2635acc9..2d3863b4 100644
--- a/src/components/t-switchTheme.vue
+++ b/src/components/main/t-switchTheme.vue
@@ -13,7 +13,7 @@ import { computed, onMounted } from "vue";
 // tauri
 import { event } from "@tauri-apps/api";
 // store
-import { useAppStore } from "../store/modules/app";
+import { useAppStore } from "../../store/modules/app";
 
 // store
 const appStore = useAppStore();
diff --git a/src/components/t-calendar-material.vue b/src/components/mini/t-calendar-material.vue
similarity index 100%
rename from src/components/t-calendar-material.vue
rename to src/components/mini/t-calendar-material.vue
diff --git a/src/components/t-mini-avatar.vue b/src/components/mini/t-mini-avatar.vue
similarity index 100%
rename from src/components/t-mini-avatar.vue
rename to src/components/mini/t-mini-avatar.vue
diff --git a/src/components/t-mini-weapon.vue b/src/components/mini/t-mini-weapon.vue
similarity index 100%
rename from src/components/t-mini-weapon.vue
rename to src/components/mini/t-mini-weapon.vue
diff --git a/src/components/t-confirm.vue b/src/components/overlay/t-confirm.vue
similarity index 94%
rename from src/components/t-confirm.vue
rename to src/components/overlay/t-confirm.vue
index 5759703f..4fdbcbbe 100644
--- a/src/components/t-confirm.vue
+++ b/src/components/overlay/t-confirm.vue
@@ -13,13 +13,13 @@
         </div>
         <div class="confirm-btn-box">
           <button class="confirm-btn" @click="onCancel">
-            <img class="btn-icon" src="../assets/icons/circle-cancel.svg" alt="cancel">
+            <img class="btn-icon" src="../../assets/icons/circle-cancel.svg" alt="cancel">
             <span class="btn-text">
               {{ cancel }}
             </span>
           </button>
           <button class="confirm-btn" @click="onConfirm">
-            <img class="btn-icon" src="../assets/icons/circle-check.svg" alt="confirm">
+            <img class="btn-icon" src="../../assets/icons/circle-check.svg" alt="confirm">
             <span class="btn-text">
               {{ confirm }}
             </span>
diff --git a/src/components/t-loading.vue b/src/components/overlay/t-loading.vue
similarity index 100%
rename from src/components/t-loading.vue
rename to src/components/overlay/t-loading.vue
diff --git a/src/pages/Achievements.vue b/src/pages/Achievements.vue
index 30f473f3..9de9d71c 100644
--- a/src/pages/Achievements.vue
+++ b/src/pages/Achievements.vue
@@ -110,7 +110,7 @@
 <script lang="ts" setup>
 // vue
 import { onMounted, ref, onBeforeMount, computed } from "vue";
-import TLoading from "../components/t-loading.vue";
+import TLoading from "../components/overlay/t-loading.vue";
 // tauri
 import { dialog, fs } from "@tauri-apps/api";
 // Store
diff --git a/src/pages/Announcements.vue b/src/pages/Announcements.vue
index 9a676665..c7620291 100644
--- a/src/pages/Announcements.vue
+++ b/src/pages/Announcements.vue
@@ -95,7 +95,7 @@
 // vue
 import { onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
-import TLoading from "../components/t-loading.vue";
+import TLoading from "../components/overlay/t-loading.vue";
 // store
 import { useAppStore } from "../store/modules/app";
 // utils
diff --git a/src/pages/Config.vue b/src/pages/Config.vue
index ba37dea1..ace95b78 100644
--- a/src/pages/Config.vue
+++ b/src/pages/Config.vue
@@ -175,8 +175,8 @@
 <script lang="ts" setup>
 // vue
 import { computed, onMounted, ref } from "vue";
-import TLoading from "../components/t-loading.vue";
-import TConfirm from "../components/t-confirm.vue";
+import TLoading from "../components/overlay/t-loading.vue";
+import TConfirm from "../components/overlay/t-confirm.vue";
 // tauri
 import { fs, app, os } from "@tauri-apps/api";
 // store
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 93fe3ce3..048741fc 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -6,10 +6,10 @@
 <script lang="ts" setup>
 // vue
 import { ref, markRaw, onMounted, onUnmounted, onUpdated } from "vue";
-import TLoading from "../components/t-loading.vue";
-import TPool from "../components/t-pool.vue";
-import TPosition from "../components/t-position.vue";
-import TCalendar from "../components/t-calendar.vue";
+import TLoading from "../components/overlay/t-loading.vue";
+import TPool from "../components/main/t-pool.vue";
+import TPosition from "../components/main/t-position.vue";
+import TCalendar from "../components/main/t-calendar.vue";
 // store
 import { useHomeStore } from "../store/modules/home";
 import { useAppStore } from "../store/modules/app";
diff --git a/src/pages/WIKI/Character.vue b/src/pages/WIKI/Character.vue
index 1f53a0ab..ebf55aab 100644
--- a/src/pages/WIKI/Character.vue
+++ b/src/pages/WIKI/Character.vue
@@ -12,7 +12,7 @@
 <script lang="ts" setup>
 // vue
 import { ref, computed } from "vue";
-import TMiniAvatar from "../../components/t-mini-avatar.vue";
+import TMiniAvatar from "../../components/mini/t-mini-avatar.vue";
 // utils
 import { createTGWindow } from "../../utils/TGWindow";
 import { AppCharacterData } from "../../data";
diff --git a/src/pages/WIKI/GCG.vue b/src/pages/WIKI/GCG.vue
index dd584d77..7f8effcc 100644
--- a/src/pages/WIKI/GCG.vue
+++ b/src/pages/WIKI/GCG.vue
@@ -98,7 +98,7 @@
 <script lang="ts" setup>
 // vue
 import { ref, onMounted, computed } from "vue";
-import TLoading from "../../components/t-loading.vue";
+import TLoading from "../../components/overlay/t-loading.vue";
 // utils
 import { createTGWindow } from "../../utils/TGWindow";
 import { AppGCGData } from "../../data";
diff --git a/src/pages/WIKI/Weapon.vue b/src/pages/WIKI/Weapon.vue
index f4cd587a..372f3e5c 100644
--- a/src/pages/WIKI/Weapon.vue
+++ b/src/pages/WIKI/Weapon.vue
@@ -12,7 +12,7 @@
 <script lang="ts" setup>
 // vue
 import { ref, computed } from "vue";
-import TMiniWeapon from "../../components/t-mini-weapon.vue";
+import TMiniWeapon from "../../components/mini/t-mini-weapon.vue";
 // utils
 import { createTGWindow } from "../../utils/TGWindow";
 import { AppWeaponData } from "../../data";
diff --git a/src/views/t-anno-json.vue b/src/views/t-anno-json.vue
index bf3dadb8..0e05922c 100644
--- a/src/views/t-anno-json.vue
+++ b/src/views/t-anno-json.vue
@@ -19,8 +19,8 @@
 import { ref, onMounted, reactive } from "vue";
 import { useRoute } from "vue-router";
 import JsonViewer from "vue-json-viewer";
-import TLoading from "../components/t-loading.vue";
-import TSwitchTheme from "../components/t-switchTheme.vue";
+import TLoading from "../components/overlay/t-loading.vue";
+import TSwitchTheme from "../components/main/t-switchTheme.vue";
 // tauri
 import { appWindow } from "@tauri-apps/api/window";
 // utils
diff --git a/src/views/t-anno.vue b/src/views/t-anno.vue
index d5bc36f8..177d5c4c 100644
--- a/src/views/t-anno.vue
+++ b/src/views/t-anno.vue
@@ -19,8 +19,8 @@
 // vue
 import { ref, onMounted } from "vue";
 import { useRoute } from "vue-router";
-import TLoading from "../components/t-loading.vue";
-import TSwitchTheme from "../components/t-switchTheme.vue";
+import TLoading from "../components/overlay/t-loading.vue";
+import TSwitchTheme from "../components/main/t-switchTheme.vue";
 // tauri
 import { appWindow } from "@tauri-apps/api/window";
 // plugins
diff --git a/src/views/t-lottery.vue b/src/views/t-lottery.vue
index 90e83912..dbb20834 100644
--- a/src/views/t-lottery.vue
+++ b/src/views/t-lottery.vue
@@ -73,8 +73,8 @@
 import { ref, onMounted, reactive, onUpdated } from "vue";
 import { useRoute } from "vue-router";
 import JsonViewer from "vue-json-viewer";
-import TLoading from "../components/t-loading.vue";
-import TSwitchTheme from "../components/t-switchTheme.vue";
+import TLoading from "../components/overlay/t-loading.vue";
+import TSwitchTheme from "../components/main/t-switchTheme.vue";
 // tauri
 import { appWindow } from "@tauri-apps/api/window";
 // store
diff --git a/src/views/t-news.vue b/src/views/t-news.vue
index d9fe8460..6999e3ae 100644
--- a/src/views/t-news.vue
+++ b/src/views/t-news.vue
@@ -218,7 +218,7 @@
 // vue
 import { onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import TLoading from "../components/t-loading.vue";
+import TLoading from "../components/overlay/t-loading.vue";
 // store
 import { useAppStore } from "../store/modules/app";
 // plugin
diff --git a/src/views/t-post-json.vue b/src/views/t-post-json.vue
index 01d1e224..245d7784 100644
--- a/src/views/t-post-json.vue
+++ b/src/views/t-post-json.vue
@@ -15,8 +15,8 @@
 import { ref, onMounted, reactive } from "vue";
 import { useRoute } from "vue-router";
 import JsonViewer from "vue-json-viewer";
-import TLoading from "../components/t-loading.vue";
-import TSwitchTheme from "../components/t-switchTheme.vue";
+import TLoading from "../components/overlay/t-loading.vue";
+import TSwitchTheme from "../components/main/t-switchTheme.vue";
 // tauri
 import { appWindow } from "@tauri-apps/api/window";
 // plugins
diff --git a/src/views/t-post.vue b/src/views/t-post.vue
index 45dcd68c..18daca77 100644
--- a/src/views/t-post.vue
+++ b/src/views/t-post.vue
@@ -10,12 +10,12 @@
 // vue
 import { ref, onMounted } from "vue";
 import { useRoute } from "vue-router";
-import TLoading from "../components/t-loading.vue";
+import TLoading from "../components/overlay/t-loading.vue";
 // tauri
 import { appWindow } from "@tauri-apps/api/window";
 // plugins
 import MysOper from "../plugins/Mys";
-import TSwitchTheme from "../components/t-switchTheme.vue";
+import TSwitchTheme from "../components/main/t-switchTheme.vue";
 
 // loading
 const loading = ref(true as boolean);