[release-2.0] fix: ui is not updated after the theme is activated in the production (#753)

This is an automated cherry-pick of #746

/assign ruibaby

```release-note
修复 Console 端激活主题之后页面没有更新数据的问题。
```

src/stores/theme.ts

@@ -1,20 +1,14 @@
 import { apiClient } from "@/utils/api-client";
 import type { Theme } from "@halo-dev/api-client";
 import { defineStore } from "pinia";
+import { ref } from "vue";
 
-interface ThemeStoreState {
+export const useThemeStore = defineStore("theme", () => {
-  activatedTheme?: Theme;
+  const activatedTheme = ref<Theme>();
-}
 
-export const useThemeStore = defineStore("theme", {
+  async function fetchActivatedTheme() {
-  state: (): ThemeStoreState => ({
-    activatedTheme: undefined,
-  }),
-  actions: {
-    async fetchActivatedTheme() {
     try {
-        const { data } =
+      const { data } = await apiClient.extension.configMap.getv1alpha1ConfigMap(
-          await apiClient.extension.configMap.getv1alpha1ConfigMap(
         {
           name: "system",
         },
@@ -37,10 +31,11 @@ export const useThemeStore = defineStore("theme", {
           }
         );
 
-        this.activatedTheme = themeData;
+      activatedTheme.value = themeData;
     } catch (e) {
       console.error("Failed to fetch active theme", e);
     }
-    },
+  }
-  },
+
+  return { activatedTheme, fetchActivatedTheme };
 });