mirror of https://github.com/halo-dev/halo
refactor: remove plugin loading status panel
Signed-off-by: Ryan Wang <i@ryanc.cc>pull/3445/head
parent
759f63fc89
commit
5d84e4de1c
|
@ -1,64 +0,0 @@
|
||||||
<script lang="ts" setup>
|
|
||||||
import type { PropType } from "vue";
|
|
||||||
import { onMounted, ref } from "vue";
|
|
||||||
import AutoAnimate from "@formkit/auto-animate";
|
|
||||||
import type { LoadingMessage } from "@/loading-message";
|
|
||||||
|
|
||||||
defineProps({
|
|
||||||
messages: {
|
|
||||||
type: Array as PropType<LoadingMessage[]>,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const list = ref<HTMLElement>();
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
if (list.value) {
|
|
||||||
AutoAnimate(list.value, {});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div id="loader"></div>
|
|
||||||
<div class="absolute right-0 bottom-10 w-96">
|
|
||||||
<ul ref="list" class="space-y-2 text-gray-500">
|
|
||||||
<li
|
|
||||||
v-for="(message, index) in messages"
|
|
||||||
:key="index"
|
|
||||||
:class="{
|
|
||||||
'text-red-600': message.type === 'error',
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
{{ message.message }}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
height: 100%;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
#loader {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
margin: auto;
|
|
||||||
border: solid 3px #e5e5e5;
|
|
||||||
border-top-color: #333;
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
animation: spin 0.6s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,4 +0,0 @@
|
||||||
export interface LoadingMessage {
|
|
||||||
type: "error" | "info";
|
|
||||||
message: string;
|
|
||||||
}
|
|
73
src/main.ts
73
src/main.ts
|
@ -1,8 +1,7 @@
|
||||||
import type { DirectiveBinding } from "vue";
|
import type { DirectiveBinding } from "vue";
|
||||||
import { createApp, ref } from "vue";
|
import { createApp } from "vue";
|
||||||
import { createPinia } from "pinia";
|
import { createPinia } from "pinia";
|
||||||
import App from "./App.vue";
|
import App from "./App.vue";
|
||||||
import LoadingMessageContainer from "./LoadingMessageContainer.vue";
|
|
||||||
import router from "./router";
|
import router from "./router";
|
||||||
import type {
|
import type {
|
||||||
MenuGroupType,
|
MenuGroupType,
|
||||||
|
@ -11,7 +10,6 @@ import type {
|
||||||
} from "@halo-dev/admin-shared";
|
} from "@halo-dev/admin-shared";
|
||||||
import { apiClient, setApiUrl } from "@halo-dev/admin-shared";
|
import { apiClient, setApiUrl } from "@halo-dev/admin-shared";
|
||||||
import { menus, minimenus, registerMenu } from "./router/menus.config";
|
import { menus, minimenus, registerMenu } from "./router/menus.config";
|
||||||
import type { LoadingMessage } from "@/loading-message";
|
|
||||||
// setup
|
// setup
|
||||||
import "./setup/setupStyles";
|
import "./setup/setupStyles";
|
||||||
import { setupComponents } from "./setup/setupComponents";
|
import { setupComponents } from "./setup/setupComponents";
|
||||||
|
@ -23,20 +21,6 @@ import type { User } from "@halo-dev/api-client";
|
||||||
import { hasPermission } from "@/utils/permission";
|
import { hasPermission } from "@/utils/permission";
|
||||||
import { useRoleStore } from "@/stores/role";
|
import { useRoleStore } from "@/stores/role";
|
||||||
|
|
||||||
// TODO 实验性
|
|
||||||
const messages = ref<LoadingMessage[]>([]);
|
|
||||||
const messageContainerApp = createApp({
|
|
||||||
data: () => ({
|
|
||||||
messages: messages,
|
|
||||||
}),
|
|
||||||
components: {
|
|
||||||
LoadingMessageContainer,
|
|
||||||
},
|
|
||||||
template: `
|
|
||||||
<LoadingMessageContainer :messages="messages"/>`,
|
|
||||||
});
|
|
||||||
messageContainerApp.mount("#app");
|
|
||||||
|
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
|
|
||||||
setupComponents(app);
|
setupComponents(app);
|
||||||
|
@ -82,16 +66,7 @@ function registerModule(pluginModule: Plugin) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function loadCoreModules() {
|
function loadCoreModules() {
|
||||||
const coreLoadStartTime = Date.now();
|
|
||||||
messages.value.push({
|
|
||||||
type: "info",
|
|
||||||
message: "Loading core modules...",
|
|
||||||
});
|
|
||||||
coreModules.forEach(registerModule);
|
coreModules.forEach(registerModule);
|
||||||
messages.value.push({
|
|
||||||
type: "info",
|
|
||||||
message: `All core modules loaded(${Date.now() - coreLoadStartTime}ms)`,
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const pluginStore = usePluginStore();
|
const pluginStore = usePluginStore();
|
||||||
|
@ -127,11 +102,6 @@ function loadStyle(href: string) {
|
||||||
const pluginErrorMessages: Array<string> = [];
|
const pluginErrorMessages: Array<string> = [];
|
||||||
|
|
||||||
async function loadPluginModules() {
|
async function loadPluginModules() {
|
||||||
messages.value.push({
|
|
||||||
type: "info",
|
|
||||||
message: "Loading plugins...",
|
|
||||||
});
|
|
||||||
|
|
||||||
const { data } =
|
const { data } =
|
||||||
await apiClient.extension.plugin.listpluginHaloRunV1alpha1Plugin();
|
await apiClient.extension.plugin.listpluginHaloRunV1alpha1Plugin();
|
||||||
|
|
||||||
|
@ -148,26 +118,12 @@ async function loadPluginModules() {
|
||||||
|
|
||||||
if (entry) {
|
if (entry) {
|
||||||
try {
|
try {
|
||||||
messages.value.push({
|
|
||||||
type: "info",
|
|
||||||
message: `${plugin.metadata.name}: Loading entry module...`,
|
|
||||||
});
|
|
||||||
|
|
||||||
const { load } = useScriptTag(
|
const { load } = useScriptTag(
|
||||||
`${import.meta.env.VITE_API_URL}${plugin.status?.entry}`
|
`${import.meta.env.VITE_API_URL}${plugin.status?.entry}`
|
||||||
);
|
);
|
||||||
|
|
||||||
const entryLoadStartTime = Date.now();
|
|
||||||
|
|
||||||
await load();
|
await load();
|
||||||
|
|
||||||
messages.value.push({
|
|
||||||
type: "info",
|
|
||||||
message: `${plugin.metadata.name}: Loaded entry module(${
|
|
||||||
Date.now() - entryLoadStartTime
|
|
||||||
}ms)`,
|
|
||||||
});
|
|
||||||
|
|
||||||
const pluginModule = window[plugin.metadata.name];
|
const pluginModule = window[plugin.metadata.name];
|
||||||
|
|
||||||
if (pluginModule) {
|
if (pluginModule) {
|
||||||
|
@ -177,10 +133,6 @@ async function loadPluginModules() {
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
const message = `${plugin.metadata.name}: Failed load plugin entry module`;
|
const message = `${plugin.metadata.name}: Failed load plugin entry module`;
|
||||||
messages.value.push({
|
|
||||||
type: "error",
|
|
||||||
message,
|
|
||||||
});
|
|
||||||
console.error(message, e);
|
console.error(message, e);
|
||||||
pluginErrorMessages.push(message);
|
pluginErrorMessages.push(message);
|
||||||
}
|
}
|
||||||
|
@ -188,26 +140,9 @@ async function loadPluginModules() {
|
||||||
|
|
||||||
if (stylesheet) {
|
if (stylesheet) {
|
||||||
try {
|
try {
|
||||||
messages.value.push({
|
|
||||||
type: "info",
|
|
||||||
message: `${plugin.metadata.name}: Loading stylesheet...`,
|
|
||||||
});
|
|
||||||
const styleLoadStartTime = Date.now();
|
|
||||||
|
|
||||||
await loadStyle(`${import.meta.env.VITE_API_URL}${stylesheet}`);
|
await loadStyle(`${import.meta.env.VITE_API_URL}${stylesheet}`);
|
||||||
|
|
||||||
messages.value.push({
|
|
||||||
type: "info",
|
|
||||||
message: `${plugin.metadata.name}: Loaded stylesheet(${
|
|
||||||
Date.now() - styleLoadStartTime
|
|
||||||
}ms)`,
|
|
||||||
});
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
const message = `${plugin.metadata.name}: Failed load plugin stylesheet`;
|
const message = `${plugin.metadata.name}: Failed load plugin stylesheet`;
|
||||||
messages.value.push({
|
|
||||||
type: "error",
|
|
||||||
message,
|
|
||||||
});
|
|
||||||
console.error(message, e);
|
console.error(message, e);
|
||||||
pluginErrorMessages.push(message);
|
pluginErrorMessages.push(message);
|
||||||
}
|
}
|
||||||
|
@ -216,11 +151,6 @@ async function loadPluginModules() {
|
||||||
pluginStore.registerPlugin(plugin);
|
pluginStore.registerPlugin(plugin);
|
||||||
}
|
}
|
||||||
|
|
||||||
messages.value.push({
|
|
||||||
type: "info",
|
|
||||||
message: "All plugins loaded",
|
|
||||||
});
|
|
||||||
|
|
||||||
if (pluginErrorMessages.length > 0) {
|
if (pluginErrorMessages.length > 0) {
|
||||||
alert(pluginErrorMessages.join("\n"));
|
alert(pluginErrorMessages.join("\n"));
|
||||||
}
|
}
|
||||||
|
@ -274,7 +204,6 @@ async function initApp() {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
} finally {
|
} finally {
|
||||||
app.use(router);
|
app.use(router);
|
||||||
messageContainerApp.unmount();
|
|
||||||
app.mount("#app");
|
app.mount("#app");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue