feat: add support for setting console's favicon (#788)

#### What type of PR is this?

/kind feature

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

Console 支持使用系统设置中的 Favicon。

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/3010

#### Screenshots:

![2022-12-20 19 40 48](https://user-images.githubusercontent.com/21301288/208658754-d62f9d46-7f15-412f-80e2-17fd9729ca8f.gif)


#### Special notes for your reviewer:

测试方式：

1. 进入系统设置。
2. 设置任意一个图片为 Favicon。
3. 观察 Console 的站标是否被修改。

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

```release-note
Console 端支持设置 Favicon
```

index.html

@@ -10,10 +10,8 @@
     />
     <meta content="noindex,nofollow" name="robots" />
     <title>Halo</title>
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" href="/favicon.ico" type="image/png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" href="/favicon.ico" type="image/svg+xml" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-    <link rel="manifest" href="/site.webmanifest" />
     <meta name="msapplication-TileColor" content="#da532c" />
     <meta name="theme-color" content="#ffffff" />
     <%- injectScript %>

public/browserconfig.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<browserconfig>
-    <msapplication>
-        <tile>
-            <square150x150logo src="./mstile-150x150.png"/>
-            <TileColor>#da532c</TileColor>
-        </tile>
-    </msapplication>
-</browserconfig>

public/site.webmanifest

@@ -1,19 +0,0 @@
-{
-  "name": "",
-  "short_name": "",
-  "icons": [
-    {
-      "src": "./android-chrome-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "./android-chrome-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ],
-  "theme_color": "#ffffff",
-  "background_color": "#ffffff",
-  "display": "standalone"
-}

src/App.vue

@@ -1,7 +1,12 @@
 <script lang="ts" setup>
 import { RouterView, useRoute } from "vue-router";
-import { watch } from "vue";
+import { computed, watch } from "vue";
 import { useTitle } from "@vueuse/core";
+import { useFavicon } from "@vueuse/core";
+import { useSystemConfigMapStore } from "./stores/system-configmap";
+import { storeToRefs } from "pinia";
+
+const { configMap } = storeToRefs(useSystemConfigMapStore());
 
 const AppName = "Halo";
 const route = useRoute();
@@ -18,6 +23,25 @@ watch(
     title.value = AppName;
   }
 );
+
+// Favicon
+const defaultFavicon = "/console/favicon.ico";
+
+const favicon = computed(() => {
+  if (!configMap?.value?.data?.["basic"]) {
+    return defaultFavicon;
+  }
+
+  const basic = JSON.parse(configMap.value.data["basic"]);
+
+  if (basic.favicon) {
+    return basic.favicon;
+  }
+
+  return defaultFavicon;
+});
+
+useFavicon(favicon);
 </script>
 
 <template>

src/main.ts

@@ -19,6 +19,7 @@ import type { RouteRecordRaw } from "vue-router";
 import { useThemeStore } from "./stores/theme";
 import { useSystemStatesStore } from "./stores/system-states";
 import { useUserStore } from "./stores/user";
+import { useSystemConfigMapStore } from "./stores/system-configmap";
 
 const app = createApp(App);
 
@@ -235,6 +236,10 @@ async function initApp() {
     const systemStateStore = useSystemStatesStore();
     await systemStateStore.fetchSystemStates();
 
+    // load system configMap
+    const systemConfigMapStore = useSystemConfigMapStore();
+    await systemConfigMapStore.fetchSystemConfigMap();
+
     if (systemStateStore.states.isSetup) {
       await loadActivatedTheme();
     }

src/modules/system/settings/SystemSetting.vue

@@ -9,6 +9,7 @@ import { VButton } from "@halo-dev/components";
 import { useSettingForm } from "@/composables/use-setting-form";
 import { useRouteParams } from "@vueuse/router";
 import type { FormKitSchemaCondition, FormKitSchemaNode } from "@formkit/core";
+import { useSystemConfigMapStore } from "@/stores/system-configmap";
 
 const group = useRouteParams<string>("group");
 
@@ -29,6 +30,13 @@ const formSchema = computed(() => {
     ?.formSchema as (FormKitSchemaCondition | FormKitSchemaNode)[];
 });
 
+const systemConfigMapStore = useSystemConfigMapStore();
+
+const handleSave = async () => {
+  await handleSaveConfigMap();
+  await systemConfigMapStore.fetchSystemConfigMap();
+};
+
 await handleFetchSettings();
 await handleFetchConfigMap();
 </script>
@@ -44,7 +52,7 @@ await handleFetchConfigMap();
           :actions="false"
           :preserve="true"
           type="form"
-          @submit="handleSaveConfigMap"
+          @submit="handleSave"
         >
           <FormKitSchema
             :schema="formSchema"

src/stores/system-configmap.ts

@@ -0,0 +1,30 @@
+import { apiClient } from "@/utils/api-client";
+import type { ConfigMap } from "@halo-dev/api-client";
+import { defineStore } from "pinia";
+
+interface SystemConfigMapState {
+  configMap?: ConfigMap;
+}
+
+export const useSystemConfigMapStore = defineStore({
+  id: "system-configmap",
+  state: (): SystemConfigMapState => ({
+    configMap: undefined,
+  }),
+  actions: {
+    async fetchSystemConfigMap() {
+      try {
+        const { data } =
+          await apiClient.extension.configMap.getv1alpha1ConfigMap(
+            {
+              name: "system",
+            },
+            { mute: true }
+          );
+        this.configMap = data;
+      } catch (error) {
+        console.error("Failed to fetch system configMap", error);
+      }
+    },
+  },
+});