From 90b93883864bde9af3aa854d49246c5e1ed066f1 Mon Sep 17 00:00:00 2001
From: imsyy <one@imsyy.top>
Date: Tue, 26 Dec 2023 16:17:41 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E6=94=AF=E6=8C=81=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E7=AB=99=E7=82=B9=E7=9B=AE=E5=BD=95=20#18?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                       |   5 +-
 src/components/HotList.vue |  89 ++++++++++++++---------
 vite.config.js             | 145 +++++++++++++++++++------------------
 3 files changed, 131 insertions(+), 108 deletions(-)

diff --git a/.env b/.env
index a4b4a9b..dec51eb 100644
--- a/.env
+++ b/.env
@@ -3,4 +3,7 @@
 VITE_GLOBAL_API="https://api-hot.imsyy.top"
 
 # ICP 备案号
-VITE_ICP = "豫ICP备2022018134号-1"
\ No newline at end of file
+VITE_ICP = "豫ICP备2022018134号-1"
+
+# 全局目录
+VITE_DIR = "/"
\ No newline at end of file
diff --git a/src/components/HotList.vue b/src/components/HotList.vue
index 4e5724f..fff212f 100644
--- a/src/components/HotList.vue
+++ b/src/components/HotList.vue
@@ -25,7 +25,7 @@
     </template>
     <n-scrollbar class="news-list" ref="scrollbarRef">
       <Transition name="fade" mode="out-in">
-        <template v-if="loadingError">
+        <div v-if="loadingError" class="error">
           <n-result
             size="small"
             status="500"
@@ -33,43 +33,51 @@
             description="生活总会遇到不如意的事情"
             style="margin-top: 40px"
           />
-        </template>
-        <template v-else-if="!hotListData || listLoading">
-          <div class="loading">
-            <n-skeleton text round :repeat="10" height="20px" />
-          </div>
-        </template>
-        <template v-else>
-          <div class="lists" :id="hotData.name + 'Lists'">
-            <div
-              class="item"
-              v-for="(item, index) in hotListData.data.slice(0, 15)"
-              :key="item"
+          <n-button
+            size="small"
+            secondary
+            strong
+            round
+            @click.stop="getHotListsData(hotData.name)"
+          >
+            <template #icon>
+              <n-icon :component="Refresh" />
+            </template>
+            重试
+          </n-button>
+        </div>
+        <div v-else-if="!hotListData || listLoading" class="loading">
+          <n-skeleton text round :repeat="10" height="20px" />
+        </div>
+        <div v-else class="lists" :id="hotData.name + 'Lists'">
+          <div
+            class="item"
+            v-for="(item, index) in hotListData.data.slice(0, 15)"
+            :key="item"
+          >
+            <n-text
+              class="num"
+              :class="
+                index === 0
+                  ? 'one'
+                  : index === 1
+                  ? 'two'
+                  : index === 2
+                  ? 'three'
+                  : null
+              "
+              :depth="2"
+              >{{ index + 1 }}</n-text
             >
-              <n-text
-                class="num"
-                :class="
-                  index === 0
-                    ? 'one'
-                    : index === 1
-                    ? 'two'
-                    : index === 2
-                    ? 'three'
-                    : null
-                "
-                :depth="2"
-                >{{ index + 1 }}</n-text
-              >
-              <n-text
-                :style="{ fontSize: store.listFontSize + 'px' }"
-                class="text"
-                @click.stop="jumpLink(item)"
-              >
-                {{ item.title }}
-              </n-text>
-            </div>
+            <n-text
+              :style="{ fontSize: store.listFontSize + 'px' }"
+              class="text"
+              @click.stop="jumpLink(item)"
+            >
+              {{ item.title }}
+            </n-text>
           </div>
-        </template>
+        </div>
       </Transition>
     </n-scrollbar>
     <template #footer>
@@ -294,6 +302,15 @@ onMounted(() => {
       right: 0;
     }
 
+    .error {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .n-button {
+        margin-top: 12px;
+      }
+    }
+
     .loading {
       display: flex;
       flex-direction: column;
diff --git a/vite.config.js b/vite.config.js
index 0d6a8d2..95f7354 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,82 +1,85 @@
 import { fileURLToPath, URL } from "node:url";
-
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
+import { NaiveUiResolver } from "unplugin-vue-components/resolvers";
+import { VitePWA } from "vite-plugin-pwa";
 import vue from "@vitejs/plugin-vue";
 import AutoImport from "unplugin-auto-import/vite";
 import Components from "unplugin-vue-components/vite";
-import { NaiveUiResolver } from "unplugin-vue-components/resolvers";
-import { VitePWA } from "vite-plugin-pwa";
 
-export default defineConfig({
-  plugins: [
-    vue(),
-    AutoImport({
-      imports: [
-        "vue",
-        {
-          "naive-ui": [
-            "useDialog",
-            "useMessage",
-            "useNotification",
-            "useLoadingBar",
+export default defineConfig(({ mode }) => {
+  return {
+    base: loadEnv(mode, process.cwd())["VITE_DIR"],
+    plugins: [
+      vue(),
+      AutoImport({
+        imports: [
+          "vue",
+          {
+            "naive-ui": [
+              "useDialog",
+              "useMessage",
+              "useNotification",
+              "useLoadingBar",
+            ],
+          },
+        ],
+      }),
+      Components({
+        resolvers: [NaiveUiResolver()],
+      }),
+      // PWA
+      VitePWA({
+        registerType: "autoUpdate",
+        workbox: {
+          cleanupOutdatedCaches: true,
+          runtimeCaching: [
+            {
+              urlPattern: /(.*?)\.(woff2|woff|ttf)/,
+              handler: "CacheFirst",
+              options: {
+                cacheName: "file-cache",
+              },
+            },
+            {
+              urlPattern:
+                /(.*?)\.(webp|png|jpe?g|svg|gif|bmp|psd|tiff|tga|eps)/,
+              handler: "CacheFirst",
+              options: {
+                cacheName: "image-cache",
+              },
+            },
           ],
         },
-      ],
-    }),
-    Components({
-      resolvers: [NaiveUiResolver()],
-    }),
-    // PWA
-    VitePWA({
-      registerType: "autoUpdate",
-      workbox: {
-        cleanupOutdatedCaches: true,
-        runtimeCaching: [
-          {
-            urlPattern: /(.*?)\.(woff2|woff|ttf)/,
-            handler: "CacheFirst",
-            options: {
-              cacheName: "file-cache",
+        manifest: {
+          name: "今日热榜",
+          short_name: "DailyHot",
+          description: "汇聚全网热点，热门尽览无余",
+          display: "standalone",
+          start_url: "/",
+          theme_color: "#fff",
+          background_color: "#efefef",
+          icons: [
+            {
+              src: "/ico/favicon.png",
+              sizes: "200x200",
+              type: "image/png",
             },
-          },
-          {
-            urlPattern: /(.*?)\.(webp|png|jpe?g|svg|gif|bmp|psd|tiff|tga|eps)/,
-            handler: "CacheFirst",
-            options: {
-              cacheName: "image-cache",
-            },
-          },
-        ],
-      },
-      manifest: {
-        name: "今日热榜",
-        short_name: "DailyHot",
-        description: "汇聚全网热点，热门尽览无余",
-        display: "standalone",
-        start_url: "/",
-        theme_color: "#fff",
-        background_color: "#efefef",
-        icons: [
-          {
-            src: "/ico/favicon.png",
-            sizes: "200x200",
-            type: "image/png",
-          },
-        ],
-      },
-    }),
-  ],
-  resolve: {
-    alias: {
-      "@": fileURLToPath(new URL("./src", import.meta.url)),
-    },
-  },
-  build: {
-    minify: "terser",
-    terserOptions: {
-      compress: {
-        pure_funcs: ["console.log"],
+          ],
+        },
+      }),
+    ],
+    resolve: {
+      alias: {
+        "@": fileURLToPath(new URL("./src", import.meta.url)),
       },
     },
-  },
+    build: {
+      minify: "terser",
+      terserOptions: {
+        compress: {
+          pure_funcs: ["console.log"],
+        },
+      },
+    },
+  };
 });