refactor: remove plugin loading status panel

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/3445/head
Ryan Wang 2022-07-29 11:41:01 +08:00
parent 759f63fc89
commit 5d84e4de1c
3 changed files with 1 additions and 140 deletions

View File

@ -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>

View File

@ -1,4 +0,0 @@
export interface LoadingMessage {
type: "error" | "info";
message: string;
}

View File

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