fix: ui is not updated after the theme is activated in the production (#746)

#### 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 端激活主题之后页面没有更新数据的问题。
```
pull/750/head^2
Ryan Wang 2022-12-07 10:50:53 +08:00 committed by GitHub
parent 7bbad8bd73
commit 26ed1ecf04
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 33 additions and 38 deletions

View File

@ -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 };
});