From 4ca853e159279b82d5be87606908c5e8b18b1571 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Wed, 26 Oct 2022 11:10:14 +0800
Subject: [PATCH] refactor: load the logo as an inline svg
 (halo-dev/console#664)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind improvement
/milestone 2.0

#### What this PR does / why we need it:

以 inline svg 的形式加载 Logo，解决因为加载 svg 文件导致的页面抖动问题。

#### Special notes for your reviewer:

/cc @halo-dev/sig-halo-console

测试方式：检查登录页面、初始化页面、侧边菜单顶部的 Logo 是否加载正常。

#### Does this PR introduce a user-facing change?

```release-note
以 inline svg 的形式加载 Logo，解决因为加载 svg 文件导致的页面抖动问题。
```
---
 src/layouts/BasicLayout.vue                   |  4 +-
 .../themes/components/ThemeListModal.vue      |  2 -
 .../themes/components/ThemeUploadModal.vue    |  2 +-
 src/modules/system/users/Login.vue            |  4 +-
 src/views/system/Setup.vue                    |  4 +-
 vite.config.ts                                | 40 ++++++++++++-------
 vitest.config.ts                              |  6 +--
 7 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/src/layouts/BasicLayout.vue b/src/layouts/BasicLayout.vue
index b03ae89cf..1b3125f1d 100644
--- a/src/layouts/BasicLayout.vue
+++ b/src/layouts/BasicLayout.vue
@@ -12,7 +12,7 @@ import {
 import { RoutesMenu } from "@/components/menu/RoutesMenu";
 import type { MenuGroupType, MenuItemType } from "@halo-dev/console-shared";
 import type { User } from "@halo-dev/api-client";
-import logo from "@/assets/logo.svg";
+import IconLogo from "~icons/core/logo?width=5rem&height=2rem";
 import {
   RouterView,
   useRoute,
@@ -185,7 +185,7 @@ onMounted(generateMenus);
   <div class="flex h-full">
     <aside class="navbar fixed hidden h-full overflow-y-auto md:block">
       <div class="logo flex justify-center pt-5 pb-7">
-        <img :src="logo" alt="Halo Logo" style="width: 78px" />
+        <IconLogo />
       </div>
       <div class="px-3">
         <div
diff --git a/src/modules/interface/themes/components/ThemeListModal.vue b/src/modules/interface/themes/components/ThemeListModal.vue
index 75575a4dc..13c0c41cd 100644
--- a/src/modules/interface/themes/components/ThemeListModal.vue
+++ b/src/modules/interface/themes/components/ThemeListModal.vue
@@ -67,8 +67,6 @@ const handleFetchThemes = async () => {
       page: 0,
       size: 0,
       uninstalled: activeTab.value !== "installed",
-      page: 0,
-      size: 0,
     });
     themes.value = data.items;
 
diff --git a/src/modules/interface/themes/components/ThemeUploadModal.vue b/src/modules/interface/themes/components/ThemeUploadModal.vue
index 2b1dd48cd..38a3d8ff8 100644
--- a/src/modules/interface/themes/components/ThemeUploadModal.vue
+++ b/src/modules/interface/themes/components/ThemeUploadModal.vue
@@ -2,7 +2,7 @@
 import { VModal } from "@halo-dev/components";
 import FilePondUpload from "@/components/upload/FilePondUpload.vue";
 import { apiClient } from "@/utils/api-client";
-import { computed, mergeProps, ref } from "vue";
+import { computed, ref } from "vue";
 import type { Theme } from "@halo-dev/api-client";
 
 const props = withDefaults(
diff --git a/src/modules/system/users/Login.vue b/src/modules/system/users/Login.vue
index f4b7241f8..fbba6b042 100644
--- a/src/modules/system/users/Login.vue
+++ b/src/modules/system/users/Login.vue
@@ -7,13 +7,13 @@ import {
 } from "@halo-dev/components";
 import { v4 as uuid } from "uuid";
 import qs from "qs";
-import logo from "@/assets/logo.svg";
 import { inject, onBeforeMount, onMounted, ref } from "vue";
 import { submitForm } from "@formkit/vue";
 import router from "@/router";
 import axios from "axios";
 import type { User } from "@halo-dev/api-client";
 import { setFocus } from "@/formkit/utils/focus";
+import IconLogo from "~icons/core/logo?width=5rem&height=2rem";
 
 interface LoginForm {
   _csrf: string;
@@ -73,7 +73,7 @@ onMounted(() => {
 </script>
 <template>
   <div class="flex h-screen flex-col items-center justify-center">
-    <img :src="logo" alt="Logo" class="mb-8 w-20" />
+    <IconLogo class="mb-8" />
     <div class="login-form flex w-72 flex-col gap-4">
       <FormKit
         id="login-form"
diff --git a/src/views/system/Setup.vue b/src/views/system/Setup.vue
index 1805ee703..752fba1a9 100644
--- a/src/views/system/Setup.vue
+++ b/src/views/system/Setup.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import logo from "@/assets/logo.svg";
+import IconLogo from "~icons/core/logo?width=5rem&height=2rem";
 import { useSettingForm } from "@/composables/use-setting-form";
 import { useSystemStatesStore } from "@/stores/system-states";
 import { apiClient } from "@/utils/api-client";
@@ -115,7 +115,7 @@ onMounted(async () => {
 
 <template>
   <div class="flex h-screen flex-col items-center justify-center">
-    <img :src="logo" alt="Logo" class="mb-8 w-20" />
+    <IconLogo class="mb-8" />
     <div class="flex w-72 flex-col gap-4">
       <FormKit
         id="setup-form"
diff --git a/vite.config.ts b/vite.config.ts
index fabd4f56b..eb57dab37 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,4 +1,5 @@
 import { fileURLToPath, URL } from "url";
+import fs from "fs";
 import { defineConfig, loadEnv } from "vite";
 import Vue from "@vitejs/plugin-vue";
 import VueJsx from "@vitejs/plugin-vue-jsx";
@@ -8,6 +9,30 @@ import { VitePWA } from "vite-plugin-pwa";
 import Icons from "unplugin-icons/vite";
 import { setupLibraryExternal } from "./src/build/library-external";
 
+export const sharedPlugins = [
+  Vue(),
+  VueJsx(),
+  VueSetupExtend(),
+  Compression(),
+  Icons({
+    compiler: "vue3",
+    customCollections: {
+      core: {
+        logo: () => fs.readFileSync("./src/assets/logo.svg", "utf-8"),
+      },
+    },
+  }),
+  VitePWA({
+    manifest: {
+      name: "Halo",
+      short_name: "Halo",
+      description: "Web Client For Halo",
+      theme_color: "#fff",
+    },
+    disable: true,
+  }),
+];
+
 export default ({ mode }: { mode: string }) => {
   const env = loadEnv(mode, process.cwd(), "");
   const isProduction = mode === "production";
@@ -15,20 +40,7 @@ export default ({ mode }: { mode: string }) => {
   return defineConfig({
     base: env.VITE_BASE_URL,
     plugins: [
-      Vue(),
-      VueJsx(),
-      VueSetupExtend(),
-      Compression(),
-      Icons({ compiler: "vue3" }),
-      VitePWA({
-        manifest: {
-          name: "Halo",
-          short_name: "Halo",
-          description: "Web Client For Halo",
-          theme_color: "#fff",
-        },
-        disable: true,
-      }),
+      ...sharedPlugins,
       ...setupLibraryExternal(isProduction, env.VITE_BASE_URL),
     ],
     resolve: {
diff --git a/vitest.config.ts b/vitest.config.ts
index 9b947996a..11569d53e 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,10 +1,10 @@
 import { defineConfig } from "vitest/config";
-import Vue from "@vitejs/plugin-vue";
-import VueJsx from "@vitejs/plugin-vue-jsx";
 import { fileURLToPath, URL } from "url";
 
+import { sharedPlugins } from "./vite.config";
+
 export default defineConfig({
-  plugins: [Vue(), VueJsx()],
+  plugins: [sharedPlugins],
   resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url)),