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>