From d8c14531e0d0c8d0b743ded535c7b51887b6cb48 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 20 Jun 2022 12:25:36 +0800
Subject: [PATCH] feat: bundle core modules

---
 packages/shared/src/types/plugin.ts     |  2 +-
 src/main.ts                             | 53 ++++++++++++-------------
 src/modules/index.ts                    | 27 +++++++++++++
 src/modules/system/roles/RoleDetail.vue | 23 +++++++----
 src/modules/system/users/module.ts      |  1 -
 5 files changed, 68 insertions(+), 38 deletions(-)
 create mode 100644 src/modules/index.ts

diff --git a/packages/shared/src/types/plugin.ts b/packages/shared/src/types/plugin.ts
index 795806c6..052e6cec 100644
--- a/packages/shared/src/types/plugin.ts
+++ b/packages/shared/src/types/plugin.ts
@@ -15,7 +15,7 @@ export interface Plugin {
   name: string;
 
   /**
-   * This components will be registered when plugin is activated.
+   * These components will be registered when plugin is activated.
    */
   components?: Component[];
 
diff --git a/src/main.ts b/src/main.ts
index 2313f516..fb485453 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -8,18 +8,8 @@ import "./setup/setupStyles";
 import { setupComponents } from "./setup/setupComponents";
 import { registerMenu } from "@/router/menus.config";
 
-// modules
-import dashboardModule from "./modules/dashboard/module";
-import postModule from "./modules/contents/posts/module";
-import sheetModule from "./modules/contents/sheets/module";
-import commentModule from "./modules/contents/comments/module";
-import attachmentModule from "./modules/contents/attachments/module";
-import themeModule from "./modules/interface/themes/module";
-import menuModule from "./modules/interface/menus/module";
-import pluginModule from "./modules/system/plugins/module";
-import userModule from "./modules/system/users/module";
-import roleModule from "./modules/system/roles/module";
-import settingModule from "./modules/system/settings/module";
+// core modules
+import { coreModules } from "./modules";
 
 const app = createApp(App);
 
@@ -27,20 +17,35 @@ setupComponents(app);
 
 app.use(createPinia());
 
-async function registerModule(pluginModule: Plugin) {
+function registerModule(pluginModule: Plugin) {
   if (pluginModule.components) {
+    if (!Array.isArray(pluginModule.components)) {
+      console.error(`${pluginModule.name}: Plugin components must be an array`);
+      return;
+    }
+
     for (const component of pluginModule.components) {
       component.name && app.component(component.name, component);
     }
   }
 
   if (pluginModule.routes) {
+    if (!Array.isArray(pluginModule.routes)) {
+      console.error(`${pluginModule.name}: Plugin routes must be an array`);
+      return;
+    }
+
     for (const route of pluginModule.routes) {
       router.addRoute(route);
     }
   }
 
   if (pluginModule.menus) {
+    if (!Array.isArray(pluginModule.menus)) {
+      console.error(`${pluginModule.name}: Plugin menus must be an array`);
+      return;
+    }
+
     for (const group of pluginModule.menus) {
       for (const menu of group.items) {
         registerMenu(group.name, menu);
@@ -50,19 +55,7 @@ async function registerModule(pluginModule: Plugin) {
 }
 
 function loadCoreModules() {
-  Array.from<Plugin>([
-    dashboardModule,
-    postModule,
-    sheetModule,
-    commentModule,
-    attachmentModule,
-    themeModule,
-    menuModule,
-    pluginModule,
-    userModule,
-    roleModule,
-    settingModule,
-  ]).forEach(registerModule);
+  coreModules.forEach(registerModule);
 }
 
 function loadPluginModules() {
@@ -72,8 +65,12 @@ function loadPluginModules() {
 initApp();
 
 async function initApp() {
-  loadCoreModules();
-  loadPluginModules();
+  try {
+    loadCoreModules();
+    loadPluginModules();
+  } catch (e) {
+    console.error(e);
+  }
   app.use(router);
   app.mount("#app");
 }
diff --git a/src/modules/index.ts b/src/modules/index.ts
new file mode 100644
index 00000000..afc15222
--- /dev/null
+++ b/src/modules/index.ts
@@ -0,0 +1,27 @@
+import dashboardModule from "./dashboard/module";
+import postModule from "./contents/posts/module";
+import sheetModule from "./contents/sheets/module";
+import commentModule from "./contents/comments/module";
+import attachmentModule from "./contents/attachments/module";
+import themeModule from "./interface/themes/module";
+import menuModule from "./interface/menus/module";
+import pluginModule from "./system/plugins/module";
+import userModule from "./system/users/module";
+import roleModule from "./system/roles/module";
+import settingModule from "./system/settings/module";
+
+const coreModules = [
+  dashboardModule,
+  postModule,
+  sheetModule,
+  commentModule,
+  attachmentModule,
+  themeModule,
+  menuModule,
+  pluginModule,
+  userModule,
+  roleModule,
+  settingModule,
+];
+
+export { coreModules };
diff --git a/src/modules/system/roles/RoleDetail.vue b/src/modules/system/roles/RoleDetail.vue
index 68c4ddf8..f9d3e5dc 100644
--- a/src/modules/system/roles/RoleDetail.vue
+++ b/src/modules/system/roles/RoleDetail.vue
@@ -13,6 +13,7 @@ import { useRoute, useRouter } from "vue-router";
 import { roles } from "@/modules/system/roles/roles-mock";
 import { ref } from "vue";
 import { users } from "@/modules/system/users/users-mock";
+import { Starport } from "vue-starport";
 
 const route = useRoute();
 
@@ -127,15 +128,21 @@ const handleRouteToUser = (username: string) => {
                       <div class="flex items-center px-4 py-4">
                         <div class="flex min-w-0 flex-1 items-center">
                           <div class="flex-shrink-0">
-                            <div
-                              class="h-12 w-12 overflow-hidden rounded border bg-white hover:shadow-sm"
+                            <Starport
+                              :duration="400"
+                              :port="`user-profile-${user.name}`"
+                              class="h-12 w-12"
                             >
-                              <img
-                                :alt="user.name"
-                                :src="user.avatar"
-                                class="h-full w-full"
-                              />
-                            </div>
+                              <div
+                                class="overflow-hidden rounded border bg-white hover:shadow-sm"
+                              >
+                                <img
+                                  :alt="user.name"
+                                  :src="user.avatar"
+                                  class="h-full w-full"
+                                />
+                              </div>
+                            </Starport>
                           </div>
                           <div
                             class="min-w-0 flex-1 px-4 md:grid md:grid-cols-2 md:gap-4"
diff --git a/src/modules/system/users/module.ts b/src/modules/system/users/module.ts
index 7ddfbab9..8f6acfc2 100644
--- a/src/modules/system/users/module.ts
+++ b/src/modules/system/users/module.ts
@@ -29,7 +29,6 @@ export default definePlugin({
         {
           path: ":username",
           component: UserProfileLayout,
-          alias: ["profile"],
           children: [
             {
               path: "detail",