From 00447726fae372d5e137e9d753a1702b70a6dca6 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Wed, 7 Dec 2022 10:50:53 +0800
Subject: [PATCH] fix: ui is not updated after the theme is activated in the
 production (halo-dev/console#746)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind bug
/milestone 2.0.1

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

修复在生产环境，激活主题之后，界面数据没有更新的问题。

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

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

#### Special notes for your reviewer:

测试方式：

1. 使用 `pnpm build` 构建此 PR。
2. 在 Halo 配置 `halo.console.location` 为 Console 项目的 dist 目录，比如：`file:/Users/ryanwang/Workspace/github/ruibaby/halo-console/dist/`
3. 安装若干主题，激活其中一个，检查页面 UI 元素是否更新。

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

```release-note
修复 Console 端激活主题之后页面没有更新数据的问题。
```
---
 src/stores/theme.ts | 71 +++++++++++++++++++++------------------------
 1 file changed, 33 insertions(+), 38 deletions(-)

diff --git a/src/stores/theme.ts b/src/stores/theme.ts
index a58e012ec..2b92128af 100644
--- a/src/stores/theme.ts
+++ b/src/stores/theme.ts
@@ -1,46 +1,41 @@
 import { apiClient } from "@/utils/api-client";
 import type { Theme } from "@halo-dev/api-client";
 import { defineStore } from "pinia";
+import { ref } from "vue";
 
-interface ThemeStoreState {
-  activatedTheme?: Theme;
-}
+export const useThemeStore = defineStore("theme", () => {
+  const activatedTheme = ref<Theme>();
 
-export const useThemeStore = defineStore("theme", {
-  state: (): ThemeStoreState => ({
-    activatedTheme: undefined,
-  }),
-  actions: {
-    async fetchActivatedTheme() {
-      try {
-        const { data } =
-          await apiClient.extension.configMap.getv1alpha1ConfigMap(
-            {
-              name: "system",
-            },
-            { mute: true }
-          );
+  async function fetchActivatedTheme() {
+    try {
+      const { data } = await apiClient.extension.configMap.getv1alpha1ConfigMap(
+        {
+          name: "system",
+        },
+        { mute: true }
+      );
 
-        if (!data.data?.theme) {
-          return;
-        }
-
-        const themeConfig = JSON.parse(data.data.theme);
-
-        const { data: themeData } =
-          await apiClient.extension.theme.getthemeHaloRunV1alpha1Theme(
-            {
-              name: themeConfig.active,
-            },
-            {
-              mute: true,
-            }
-          );
-
-        this.activatedTheme = themeData;
-      } catch (e) {
-        console.error("Failed to fetch active theme", e);
+      if (!data.data?.theme) {
+        return;
       }
-    },
-  },
+
+      const themeConfig = JSON.parse(data.data.theme);
+
+      const { data: themeData } =
+        await apiClient.extension.theme.getthemeHaloRunV1alpha1Theme(
+          {
+            name: themeConfig.active,
+          },
+          {
+            mute: true,
+          }
+        );
+
+      activatedTheme.value = themeData;
+    } catch (e) {
+      console.error("Failed to fetch active theme", e);
+    }
+  }
+
+  return { activatedTheme, fetchActivatedTheme };
 });