feat: add prompt for users to reload page after plugin update

ui/console-src/modules/system/plugins/components/PluginListItem.vue

@@ -29,6 +29,7 @@ import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
 import AuthorField from "./entity-fields/AuthorField.vue";
 import LogoField from "./entity-fields/LogoField.vue";
+import ReloadField from "./entity-fields/ReloadField.vue";
 import SwitchField from "./entity-fields/SwitchField.vue";
 
 const { currentUserHasPermission } = usePermission();
@@ -219,6 +220,14 @@ const { startFields, endFields } = useEntityFieldItemExtensionPoint<Plugin>(
           description: props.plugin.spec.version,
         },
       },
+      {
+        position: "end",
+        priority: 41,
+        component: markRaw(ReloadField),
+        props: {
+          plugin: props.plugin,
+        },
+      },
       {
         position: "end",
         priority: 50,

ui/console-src/modules/system/plugins/components/entity-fields/ReloadField.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { IconInformation, VButton } from "@halo-dev/components";
+import { PluginStatusPhaseEnum, type Plugin } from "@halo-dev/api-client";
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    plugin: Plugin;
+  }>(),
+  {}
+);
+
+const enabledJsModulesInfo =
+  (window["enabledPlugins"] as { name: string; version: string }[]) || [];
+
+const currentJsModuleInfo = enabledJsModulesInfo.find((jsModuleInfo) => {
+  return jsModuleInfo.name === props.plugin.metadata.name;
+});
+
+const needsReloadWindow = computed(() => {
+  const { version } = props.plugin.spec;
+  const { phase } = props.plugin.status || {};
+
+  const isStarted = PluginStatusPhaseEnum.Started === phase;
+
+  return isStarted && version !== currentJsModuleInfo?.version;
+});
+
+function handleReloadWindow() {
+  window.location.reload();
+}
+</script>
+
+<template>
+  <VButton v-if="needsReloadWindow" size="xs" @click="handleReloadWindow">
+    <template #icon>
+      <IconInformation class="h-full w-full" />
+    </template>
+    {{ $t("core.plugin.operations.reload_window.button") }}
+  </VButton>
+</template>
+
+<style lang="scss" scoped></style>

ui/console-src/setup/setupModules.ts

@@ -10,46 +10,80 @@ import type { App } from "vue";
 import type { RouteRecordRaw } from "vue-router";
 
 export function setupCoreModules(app: App) {
-  modules.forEach((module) => {
+  modules.forEach((module) => registerModule(app, module, true));
-    registerModule(app, module, true);
-  });
 }
 
 export async function setupPluginModules(app: App) {
   const pluginModuleStore = usePluginModuleStore();
-  try {
-    const { load } = useScriptTag(
-      `/apis/api.console.halo.run/v1alpha1/plugins/-/bundle.js?t=${Date.now()}`
-    );
-
-    await load();
-
-    const enabledPluginNames = window["enabledPluginNames"] as string[];
-
-    enabledPluginNames.forEach((name) => {
-      const module = window[name];
-      if (module) {
-        registerModule(app, module, false);
-        pluginModuleStore.registerPluginModule(name, module);
-      }
-    });
-  } catch (e) {
-    const message = i18n.global.t("core.plugin.loader.toast.entry_load_failed");
-    console.error(message, e);
-    Toast.error(message);
-  }
 
   try {
-    await loadStyle(
+    await loadPluginBundle();
-      `/apis/api.console.halo.run/v1alpha1/plugins/-/bundle.css?t=${Date.now()}`
+    await registerEnabledPlugins(app, pluginModuleStore);
-    );
+    await loadPluginStyles();
-  } catch (e) {
+  } catch (error) {
-    const message = i18n.global.t("core.plugin.loader.toast.style_load_failed");
+    handleError(error);
-    console.error(message, e);
-    Toast.error(message);
   }
 }
 
+async function loadPluginBundle() {
+  const { load } = useScriptTag(
+    `/apis/api.console.halo.run/v1alpha1/plugins/-/bundle.js?t=${Date.now()}`
+  );
+  await load();
+}
+
+async function registerEnabledPlugins(
+  app: App,
+  pluginModuleStore: ReturnType<typeof usePluginModuleStore>
+) {
+  const enabledPlugins = window["enabledPlugins"] as {
+    name: string;
+    value: string;
+  }[];
+
+  if (enabledPlugins) {
+    enabledPlugins.forEach((plugin) =>
+      registerPluginIfAvailable(app, pluginModuleStore, plugin.name)
+    );
+  }
+
+  // @Deprecated: Compatibility solution, will be removed in the future
+  const enabledPluginNames = window["enabledPluginNames"] as string[];
+  if (enabledPluginNames) {
+    enabledPluginNames.forEach((name) =>
+      registerPluginIfAvailable(app, pluginModuleStore, name)
+    );
+  }
+}
+
+function registerPluginIfAvailable(
+  app: App,
+  pluginModuleStore: ReturnType<typeof usePluginModuleStore>,
+  name: string
+) {
+  const module = window[name];
+  if (module) {
+    registerModule(app, module, false);
+    pluginModuleStore.registerPluginModule(name, module);
+  }
+}
+
+async function loadPluginStyles() {
+  await loadStyle(
+    `/apis/api.console.halo.run/v1alpha1/plugins/-/bundle.css?t=${Date.now()}`
+  );
+}
+
+function handleError(error: unknown) {
+  const message =
+    error instanceof Error && error.message.includes("style")
+      ? i18n.global.t("core.plugin.loader.toast.style_load_failed")
+      : i18n.global.t("core.plugin.loader.toast.entry_load_failed");
+
+  console.error(message, error);
+  Toast.error(message);
+}
+
 function registerModule(app: App, pluginModule: PluginModule, core: boolean) {
   if (pluginModule.components) {
     Object.keys(pluginModule.components).forEach((key) => {

ui/src/locales/en.yaml

@@ -940,6 +940,8 @@ core:
       remote_download:
         title: Remote download address detected, do you want to download?
         description: "Please carefully verify whether this address can be trusted: {url}"
+      reload_window:
+        button: Reload required
     filters:
       status:
         items:

ui/src/locales/zh-CN.yaml

@@ -876,6 +876,8 @@ core:
       remote_download:
         title: 检测到了远程下载地址，是否需要下载？
         description: 请仔细鉴别此地址是否可信：{url}
+      reload_window:
+        button: 需要重载页面
     filters:
       status:
         items:

ui/src/locales/zh-TW.yaml

@@ -856,6 +856,8 @@ core:
       remote_download:
         title: 偵測到遠端下載地址，是否需要下載？
         description: 請仔細鑑別此地址是否可信：{url}
+      reload_window:
+        button: 需要重載頁面
     filters:
       status:
         items:

ui/uc-src/setup/setupModules.ts

@@ -10,46 +10,80 @@ import type { App } from "vue";
 import type { RouteRecordRaw } from "vue-router";
 
 export function setupCoreModules(app: App) {
-  modules.forEach((module) => {
+  modules.forEach((module) => registerModule(app, module, true));
-    registerModule(app, module, true);
-  });
 }
 
 export async function setupPluginModules(app: App) {
   const pluginModuleStore = usePluginModuleStore();
-  try {
-    const { load } = useScriptTag(
-      `/apis/api.console.halo.run/v1alpha1/plugins/-/bundle.js?t=${Date.now()}`
-    );
-
-    await load();
-
-    const enabledPluginNames = window["enabledPluginNames"] as string[];
-
-    enabledPluginNames.forEach((name) => {
-      const module = window[name];
-      if (module) {
-        registerModule(app, module, false);
-        pluginModuleStore.registerPluginModule(name, module);
-      }
-    });
-  } catch (e) {
-    const message = i18n.global.t("core.plugin.loader.toast.entry_load_failed");
-    console.error(message, e);
-    Toast.error(message);
-  }
 
   try {
-    await loadStyle(
+    await loadPluginBundle();
-      `/apis/api.console.halo.run/v1alpha1/plugins/-/bundle.css?t=${Date.now()}`
+    await registerEnabledPlugins(app, pluginModuleStore);
-    );
+    await loadPluginStyles();
-  } catch (e) {
+  } catch (error) {
-    const message = i18n.global.t("core.plugin.loader.toast.style_load_failed");
+    handleError(error);
-    console.error(message, e);
-    Toast.error(message);
   }
 }
 
+async function loadPluginBundle() {
+  const { load } = useScriptTag(
+    `/apis/api.console.halo.run/v1alpha1/plugins/-/bundle.js?t=${Date.now()}`
+  );
+  await load();
+}
+
+async function registerEnabledPlugins(
+  app: App,
+  pluginModuleStore: ReturnType<typeof usePluginModuleStore>
+) {
+  const enabledPlugins = window["enabledPlugins"] as {
+    name: string;
+    value: string;
+  }[];
+
+  if (enabledPlugins) {
+    enabledPlugins.forEach((plugin) =>
+      registerPluginIfAvailable(app, pluginModuleStore, plugin.name)
+    );
+  }
+
+  // @Deprecated: Compatibility solution, will be removed in the future
+  const enabledPluginNames = window["enabledPluginNames"] as string[];
+  if (enabledPluginNames) {
+    enabledPluginNames.forEach((name) =>
+      registerPluginIfAvailable(app, pluginModuleStore, name)
+    );
+  }
+}
+
+function registerPluginIfAvailable(
+  app: App,
+  pluginModuleStore: ReturnType<typeof usePluginModuleStore>,
+  name: string
+) {
+  const module = window[name];
+  if (module) {
+    registerModule(app, module, false);
+    pluginModuleStore.registerPluginModule(name, module);
+  }
+}
+
+async function loadPluginStyles() {
+  await loadStyle(
+    `/apis/api.console.halo.run/v1alpha1/plugins/-/bundle.css?t=${Date.now()}`
+  );
+}
+
+function handleError(error: unknown) {
+  const message =
+    error instanceof Error && error.message.includes("style")
+      ? i18n.global.t("core.plugin.loader.toast.style_load_failed")
+      : i18n.global.t("core.plugin.loader.toast.entry_load_failed");
+
+  console.error(message, error);
+  Toast.error(message);
+}
+
 function registerModule(app: App, pluginModule: PluginModule, core: boolean) {
   if (pluginModule.components) {
     Object.keys(pluginModule.components).forEach((key) => {