From 5c07304165d7a0f44337c8dcfc924d700c4508fd Mon Sep 17 00:00:00 2001
From: ZvonimirSun <hi@iszy.xyz>
Date: Fri, 23 Feb 2024 17:29:39 +0800
Subject: [PATCH] chore

---
 src/App.vue           |   2 +
 src/pages/Home.vue    | 147 ++++++++++++++++++++++--------------------
 src/pages/Loading.vue |  13 ++++
 src/pages/index.ts    |   1 +
 src/plugins/Router.ts |   6 +-
 vite.config.ts        |   2 +-
 6 files changed, 98 insertions(+), 73 deletions(-)
 create mode 100644 src/pages/Loading.vue

diff --git a/src/App.vue b/src/App.vue
index 20cec81cc..3dcfa9767 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -61,6 +61,8 @@
           <div
             v-if="route.meta?.type !== 'tool'"
             class="container"
+            w-full
+            h-full
           >
             <router-view />
           </div>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 7b39570b9..12a84ab0b 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -1,83 +1,85 @@
 <template>
-  <el-row
-    v-if="settings.showSearch"
-    :gutter="8"
-  >
-    <el-col>
-      <div class="search-wrapper">
-        <span class="i-icon-park-outline-search" />
-        <el-input
-          v-model="searchStr"
-          placeholder="搜索工具"
-        />
-      </div>
-    </el-col>
-  </el-row>
-  <template
-    v-for="(item, index) in toolMenus"
-    :key="item.id"
-  >
+  <div class="home-page">
     <el-row
-      :gutter="16"
-      :style="{
-        padding: '0 .8rem .4rem',
-        marginTop: index === 0 && settings.showSearch ? '3.3rem' : '2.5rem'
-      }"
+      v-if="settings.showSearch"
+      :gutter="8"
     >
-      <el-col
-        :span="24"
-        class="typeNameCol"
-      >
-        <div class="typeName">
-          <span
-            v-if="item.icon"
-            :class="item.icon"
+      <el-col>
+        <div class="search-wrapper">
+          <span class="i-icon-park-outline-search" />
+          <el-input
+            v-model="searchStr"
+            placeholder="搜索工具"
           />
-          <div>{{ item.type }}</div>
         </div>
       </el-col>
-      <el-col
-        v-for="(tool) in item.children"
-        :key="tool.id"
-        :xs="12"
-        :sm="8"
-        :md="6"
-        :lg="4"
-        :xl="3"
+    </el-row>
+    <template
+      v-for="(item, index) in toolMenus"
+      :key="item.id"
+    >
+      <el-row
+        :gutter="16"
+        :style="{
+          padding: '0 .8rem .4rem',
+          marginTop: index === 0 && settings.showSearch ? '3.3rem' : '2.5rem'
+        }"
       >
-        <router-link
-          :target="(settings.openInNewTab || isExternalLink(tool.link)) ? '_blank' : ''"
-          :to="isExternalLink(tool.link) ? ('/redirect?url='+tool.link) : (tool.link||'')"
+        <el-col
+          :span="24"
+          class="typeNameCol"
         >
-          <el-tooltip
-            placement="top"
-            :show-after="200"
-            :content="tool.name"
+          <div class="typeName">
+            <span
+              v-if="item.icon"
+              :class="item.icon"
+            />
+            <div>{{ item.type }}</div>
+          </div>
+        </el-col>
+        <el-col
+          v-for="(tool) in item.children"
+          :key="tool.id"
+          :xs="12"
+          :sm="8"
+          :md="6"
+          :lg="4"
+          :xl="3"
+        >
+          <router-link
+            :target="(settings.openInNewTab || isExternalLink(tool.link)) ? '_blank' : ''"
+            :to="isExternalLink(tool.link) ? ('/redirect?url='+tool.link) : (tool.link||'')"
           >
-            <div
-              class="tool"
-              :class="{toolCollected:isFav(tool.name)}"
+            <el-tooltip
+              placement="top"
+              :show-after="200"
+              :content="tool.name"
             >
-              <span class="toolName">{{ tool.name }}</span>
-              <span
-                v-if="isFav(tool.name)"
-                class="fav collected"
-                @click.prevent="updateFav({name:tool.name,link:tool.link||'',add:false})"
-              ><span class="i-icon-park-solid-star" /></span>
-              <span
-                v-else
-                class="fav"
-                @click.prevent="updateFav({name:tool.name,link:tool.link||'',add:true})"
+              <div
+                class="tool"
+                :class="{toolCollected:isFav(tool.name)}"
               >
-                <span class="nonHover"><span class="i-icon-park-outline-star" /></span>
-                <span class="hovered"><span class="i-icon-park-solid-star" /></span>
-              </span>
-            </div>
-          </el-tooltip>
-        </router-link>
-      </el-col>
-    </el-row>
-  </template>
+                <span class="toolName">{{ tool.name }}</span>
+                <span
+                  v-if="isFav(tool.name)"
+                  class="fav collected"
+                  @click.prevent="updateFav({name:tool.name,link:tool.link||'',add:false})"
+                ><span class="i-icon-park-solid-star" /></span>
+                <span
+                  v-else
+                  class="fav"
+                  @click.prevent="updateFav({name:tool.name,link:tool.link||'',add:true})"
+                >
+                  <span class="nonHover"><span class="i-icon-park-outline-star" /></span>
+                  <span class="hovered"><span class="i-icon-park-solid-star" /></span>
+                </span>
+              </div>
+            </el-tooltip>
+          </router-link>
+        </el-col>
+      </el-row>
+    </template>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -102,6 +104,13 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
+.home-page {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  padding: 1.6rem;
+}
+
 .search-wrapper {
   display: inline-flex;
   width: 100%;
diff --git a/src/pages/Loading.vue b/src/pages/Loading.vue
new file mode 100644
index 000000000..8052e466a
--- /dev/null
+++ b/src/pages/Loading.vue
@@ -0,0 +1,13 @@
+<template>
+  <div
+    v-loading="true"
+    h-full
+    w-full
+  />
+</template>
+
+<style scoped lang="scss">
+:deep(.el-loading-mask) {
+  background-color: var(--el-bg-color-page)
+}
+</style>
diff --git a/src/pages/index.ts b/src/pages/index.ts
index 258bd9b2f..474c6a303 100644
--- a/src/pages/index.ts
+++ b/src/pages/index.ts
@@ -3,3 +3,4 @@ export { default as Page404 } from './404.vue'
 export { default as Home } from './Home.vue'
 export { default as Offline } from './Offline.vue'
 export { default as Redirect } from './Redirect.vue'
+export { default as Loading } from './Loading.vue'
diff --git a/src/plugins/Router.ts b/src/plugins/Router.ts
index 080dbf6cb..2c6fcb196 100644
--- a/src/plugins/Router.ts
+++ b/src/plugins/Router.ts
@@ -87,7 +87,7 @@ const internalRoutes: RouteRecordRaw[] = [
     path: '/logout',
     name: '登出',
     component: () => h(RouterView),
-    beforeEnter: (to, from, next) => {
+    beforeEnter: (_, from, next) => {
       userStore.logout().then(() => next(from))
     }
   },
@@ -119,7 +119,7 @@ const router = createRouter({
   routes
 })
 
-router.beforeEach(async (to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
+router.beforeEach(async (to: RouteLocationNormalized, _: RouteLocationNormalized, next: NavigationGuardNext) => {
   userStore.checkToken().then()
   // 在线应用离线直接跳转
   if (to.meta.offline === false && !navigator.onLine) {
@@ -149,7 +149,7 @@ router.beforeEach(async (to: RouteLocationNormalized, from: RouteLocationNormali
   }
 })
 
-router.afterEach((to, from, failure) => {
+router.afterEach((to, _, failure) => {
   if (!failure) {
     document.title = getPageTitle(to.meta.title || to.name?.toString())
     if (to.name && to.meta.type === 'tool') {
diff --git a/vite.config.ts b/vite.config.ts
index 3db56a08c..abee774ce 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -144,7 +144,7 @@ export default defineConfig({
                 maxEntries: 30
               },
               cacheableResponse: {
-                statuses: [0, 200]
+                statuses: [200]
               }
             }
           },