@maketribe/ms-app 3.0.0 → 3.0.3

package/dist/style/src/layouts/manager-system/menu.scss

@@ -1,47 +1,229 @@
-.mk-menu {
-  border: none;
+@mixin menuVars {
+  --el-menu-bg-color: #001428;
+  --el-menu-text-color: rgb(192, 196, 204);
+  --el-menu-hover-bg-color: rgba(64, 158, 255, 0.06);
+  --el-menu-active-color: white;
+  --el-menu-item-height: 40px;
+  --el-menu-sub-item-height: 40px;
+}
 
-  --el-menu-item-height: 50px;
-  --el-menu-level-padding: 17px;
-  --el-menu-icon-width: 14px;
+@mixin commonMenu {
+  user-select: none;
 
-  .el-sub-menu {
-    & + .el-menu-item,
-    & + .el-sub-menu,
-    .el-menu-item:first-child,
-    .el-sub-menu:first-child {
-      margin-top: 5px;
+  .el-menu-item {
+    & + .el-menu-item {
+      margin-top: 4px;
     }
 
-    &__title {
-      &:hover {
-        color: var(--el-color-primary);
+    & + .el-sub-menu {
+      .el-sub-menu__title {
+        margin-top: 4px;
       }
     }
   }
 
-  .el-menu-item {
-    border-radius: 5px;
+  .el-sub-menu {
+    & + .el-menu-item {
+      margin-top: 4px;
+    }
 
-    & + .el-menu-item,
     & + .el-sub-menu {
-      margin-top: 5px;
+      .el-sub-menu__title {
+        margin-top: 4px;
+      }
     }
 
     &.is-active {
-      background-color: var(--el-color-primary-light-9);
+      > .el-sub-menu__title {
+        color: var(--el-menu-active-color);
+        background-color: var(--el-me nu-hover-bg-color);
+      }
     }
+  }
+}
+
+.mk-menu {
+  @include menuVars();
 
-    &:hover {
-      color: var(--el-color-primary);
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  height: 100%;
+  background-color: var(--el-menu-bg-color);
+
+  @include commonMenu();
+
+  @at-root {
+    .mk-menu__popper {
+      @include menuVars();
+      @include commonMenu();
+
+      .mk-svg-icon {
+        margin-right: 8px;
+      }
+
+      .el-menu-item {
+        &.is-active {
+          background-color: var(--el-menu-hover-bg-color);
+        }
+      }
     }
   }
 
-  &-item {
-    & &__icon {
-      margin-right: 3px;
-      width: 1em;
-      font-size: inherit;
+  .el-menu {
+    flex: 1;
+    border: none;
+
+    .mk-svg-icon {
+      margin-right: 8px;
+    }
+
+    .el-menu-item {
+      &.is-active {
+        background-color: var(--el-menu-hover-bg-color);
+      }
+    }
+
+    .el-sub-menu.is-opened {
+      .el-sub-menu__title {
+        margin-bottom: 4px;
+      }
+    }
+
+    > .el-sub-menu,
+    > .el-menu-item {
+      position: relative;
+    }
+  }
+
+  > .el-menu {
+    > .is-active {
+      &::before {
+        content: "";
+        position: absolute;
+        width: 2px;
+        left: 0;
+        top: 50%;
+        height: 0%;
+        transform: translate(0, -50%);
+        background-color: var(--el-color-primary);
+      }
+    }
+  }
+
+  &__footer {
+    --el-fill-color: var(--el-menu-hover-bg-color);
+    --el-fill-color-light: var(--el-menu-hover-bg-color);
+
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    border-top: 1px solid rgb(30, 50, 60);
+    padding: 0 20px;
+    height: 56px;
+
+    .el-button {
+      color: var(--el-menu-text-color);
+      width: 32px;
+      font-size: 16px;
+    }
+  }
+
+  &--collapse {
+    width: 54px;
+
+    .el-menu {
+      &--collapse {
+        width: 54px;
+      }
+
+      .mk-svg-icon {
+        margin-right: 0;
+      }
+
+      .el-menu-item,
+      .el-sub-menu__title {
+        padding: 0;
+        justify-content: center;
+      }
+
+      > .is-active {
+        &::before {
+          height: 100%;
+        }
+      }
+    }
+
+    .mk-logo {
+      padding: 0;
+      justify-content: center;
+
+      &__logo {
+        margin-right: 0;
+      }
+
+      span {
+        display: none;
+      }
+    }
+
+    .mk-menu__footer {
+      padding: 0;
+      justify-content: center;
+    }
+  }
+
+  @media screen and (max-width: 1000px) {
+    .mk-menu__footer {
+      display: none;
     }
   }
 }
+
+// .mk-menu {
+//   border: none;
+
+//   --el-menu-item-height: 50px;
+//   --el-menu-level-padding: 17px;
+//   --el-menu-icon-width: 14px;
+
+//   .el-sub-menu {
+//     & + .el-menu-item,
+//     & + .el-sub-menu,
+//     .el-menu-item:first-child,
+//     .el-sub-menu:first-child {
+//       margin-top: 5px;
+//     }
+
+//     &__title {
+//       &:hover {
+//         color: var(--el-color-primary);
+//       }
+//     }
+//   }
+
+//   .el-menu-item {
+//     border-radius: 5px;
+
+//     & + .el-menu-item,
+//     & + .el-sub-menu {
+//       margin-top: 5px;
+//     }
+
+//     &.is-active {
+//       background-color: var(--el-color-primary-light-9);
+//     }
+
+//     &:hover {
+//       color: var(--el-color-primary);
+//     }
+//   }
+
+//   &-item {
+//     & &__icon {
+//       margin-right: 3px;
+//       width: 1em;
+//       font-size: inherit;
+//     }
+//   }
+// }

package/package.json

@@ -1,22 +1,26 @@
 {
   "name": "@maketribe/ms-app",
-  "version": "3.0.0",
+  "version": "3.0.3",
   "description": "",
   "main": "dist/cjs",
+  "files": [
+    "dist"
+  ],
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@element-plus/icons": "^0.0.11",
+    "@element-plus/icons-vue": "^2.1.0",
     "element-plus": "^2.3.7",
     "vue": "^3.3.4",
+    "ufo": "^1.3.1",
     "lodash-es": "^4.17.21",
     "vue-router": "^4.2.4",
-    "@maketribe/dm": "^1.1.0",
-    "@maketribe/dm-ui": "^1.1.0",
-    "@maketribe/utils": "^1.1.0",
-    "@maketribe/locale": "^1.0.4",
-    "@maketribe/request": "^1.1.0"
+    "@maketribe/dm": "^3.0.2",
+    "@maketribe/dm-ui": "^3.0.2",
+    "@maketribe/utils": "^1.1.1",
+    "@maketribe/locale": "^1.0.5",
+    "@maketribe/request": "^1.1.1"
   },
   "scripts": {
     "build": "npm run clean && npm run build:js && npm run build:type && npm run build:style",

package/src/DataModelDefines.ts

@@ -0,0 +1,53 @@
+import { DataTable, DataForm } from "@maketribe/dm";
+
+export type DataTableClass = {
+  new (options: any): DataTable;
+};
+
+export type DataFormClass = {
+  new (options: any): DataForm;
+};
+
+/**
+ * 数据模型缓存
+ *
+ * 如果需要让自定义数据模型可以交给该类缓存，需要完成以下约束
+ * - 可以只传递name就可以创建出对应的类的实例
+ */
+export class DataModelDefines {
+  static instance = new DataModelDefines();
+
+  private _dataTableDefines: Map<string, DataTableClass>;
+  private _dataFormDefines: Map<string, DataFormClass>;
+
+  constructor() {
+    this._dataTableDefines = new Map();
+    this._dataFormDefines = new Map();
+  }
+
+  getDataTable(name: string): DataTable | null {
+    const DataTableDefine = this._dataTableDefines.get(name);
+
+    return DataTableDefine ? new DataTableDefine({}) : null;
+  }
+
+  getDataForm(name: string): DataForm | null {
+    const DataFormDefine = this._dataFormDefines.get(name);
+
+    return DataFormDefine ? new DataFormDefine({}) : null;
+  }
+
+  registerDataTableDefine<T extends DataTableClass>(
+    name: string,
+    DataTableDefine: T
+  ) {
+    this._dataTableDefines.set(name, DataTableDefine);
+  }
+
+  registerDataFormDefine<T extends DataFormClass>(
+    name: string,
+    dataFormDefine: T
+  ) {
+    this._dataFormDefines.set(name, dataFormDefine);
+  }
+}

package/src/MSAppClient.ts

@@ -4,22 +4,24 @@ import {
   Router as VueRouter,
 } from "vue-router";
 import { HttpRequest, R, WebHttpRequest } from "@maketribe/request";
-import { IComponents, DataModel } from "@maketribe/dm";
+import { IComponents, DataModel, Components } from "@maketribe/dm";
 import { I18n } from "@maketribe/locale";
 
-import { createDisposable, Event, md5 } from "@maketribe/utils";
+import { Event, md5 } from "@maketribe/utils";
 import { UserSession } from "./UserSession";
-import { MSDataTableComponents } from "./MSDataTableComponents";
-import { MSDataFormComponents } from "./MSDataFormComponents";
-import { MSDataFilterComponents } from "./MSDataFilterComponents";
-import LoginPage from "./page/login/index.vue";
-import SignUpPage from "./page/signup/index.vue";
 import { authBeforeEach } from "./router-middleware";
-import MaterialListPage from "./page/index/material/index.vue";
-import MemberListPage from "./page/index/dv/ms-member/index.vue";
-import RoleListPage from "./page/index/dv/ms-role/index.vue";
+import { PageManager } from "./PageManager";
+import { ACCESS_TOKEN_HEADER, X_ACCESS_TOKEN_HEADER } from "./constants";
+
+export type LoginResult = {
+  account: string;
+  email: string;
+  nickName: string;
+  avatarPath: string;
+};
 
 export interface MSAppClientOptions {
+  pageManager?: PageManager;
   projectName: string;
   httpRequest?: HttpRequest;
   origin: string;
@@ -54,6 +56,8 @@ export class MSAppClient {
 
   initd: boolean = false;
 
+  pageManager: PageManager;
+
   /**
    * @deprecated
    * @description 使用 MSAppClient.instance.userSession.userInfo
@@ -95,6 +99,8 @@ export class MSAppClient {
 
     this.vueRouter = this._options.vueRouter;
 
+    this.pageManager = this._options.pageManager;
+
     HttpRequest.appID = this.appID;
 
     this.httpRequest = this._options.httpRequest;
@@ -128,14 +134,11 @@ export class MSAppClient {
           history: createWebHashHistory(),
           routes: [],
         }),
-      dataTableComponents:
-        options.dataTableComponents ?? new MSDataTableComponents(),
-      dataFormComponents:
-        options.dataFormComponents ?? new MSDataFormComponents(),
-      dataFilterComponents:
-        options.dataFilterComponents ?? new MSDataFilterComponents(),
-      whereFilterComponents:
-        options.whereFilterComponents ?? new MSDataFilterComponents(),
+      pageManager: options.pageManager ?? new PageManager(),
+      dataTableComponents: options.dataTableComponents ?? new Components(),
+      dataFormComponents: options.dataFormComponents ?? new Components(),
+      dataFilterComponents: options.dataFilterComponents ?? new Components(),
+      whereFilterComponents: options.whereFilterComponents ?? new Components(),
     };
   }
   getI18n() {
@@ -146,9 +149,13 @@ export class MSAppClient {
     return this._options;
   }
 
-  async loadCurrentUserSession() {
+  async loadCurrentUserSession(options?: {
+    accessToken: string;
+    xAccessToken: string;
+  }) {
     const userSession = (this.userSession = new UserSession({
       msAppClient: this,
+      ...options,
     }));
     this.userSession = null;
 
@@ -168,36 +175,8 @@ export class MSAppClient {
       return;
     }
 
-    let vueRoutes = this.vueRouter.getRoutes();
-
-    const loginRoute = vueRoutes.find((route) => route.name === "login");
-
-    if (!loginRoute) {
-      this.vueRouter.addRoute({
-        name: "login",
-        path: "/login",
-        meta: {
-          isAuthorization: false,
-        },
-        component: LoginPage,
-      });
-    }
-
-    const signupRoute = vueRoutes.find((route) => route.name === "login");
-
-    if (!signupRoute) {
-      this.vueRouter.addRoute({
-        name: "signup",
-        path: "/signup",
-        meta: {
-          isAuthorization: false,
-        },
-        component: SignUpPage,
-      });
-    }
-
     this.vueRouter.beforeEach(async (to, from, next) => {
-      const route = await authBeforeEach(to, from);
+      const route = await authBeforeEach(this, to, from);
 
       if (route) {
         next(route);
@@ -207,88 +186,16 @@ export class MSAppClient {
       next();
     });
 
-    this.beforeInitUserSessionEvent.on(({ userSession }) => {
-      userSession.register(
-        userSession.beforeInitRouterEvent.on(() => {
-          const routes = userSession.vueRouter.getRoutes();
-
-          const materialRoute =
-            userSession.router.getRouteByName("ms-material/list");
-
-          // 如果可以访问素材
-          if (materialRoute) {
-            const materialVueRoute = routes.find(
-              (route) => route.name === "ms-material/list"
-            );
-
-            // 但是没有素材页面，给默认素材页
-            if (!materialVueRoute) {
-              userSession.vueRouter.addRoute("mk-ms-main", {
-                name: materialRoute.name,
-                path: "/material-list",
-                component: MaterialListPage,
-              });
-
-              userSession.register(
-                createDisposable(() => {
-                  userSession.vueRouter.removeRoute(materialRoute.name);
-                })
-              );
-            }
-          }
-
-          const memberListRoute =
-            userSession.router.getRouteByName("ms-member/list");
-
-          if (memberListRoute) {
-            const memberListVueRoute = routes.find(
-              (route) => route.name === "ms-member/list"
-            );
-
-            if (!memberListVueRoute) {
-              userSession.vueRouter.addRoute("mk-ms-main", {
-                name: memberListRoute.name,
-                path: "/dv/ms-member",
-                component: MemberListPage,
-              });
-
-              userSession.register(
-                createDisposable(() => {
-                  userSession.vueRouter.removeRoute(memberListRoute.name);
-                })
-              );
-            }
-          }
-
-          const roleListRoute =
-            userSession.router.getRouteByName("ms-role/list");
-
-          if (roleListRoute) {
-            const roleListVueRoute = routes.find(
-              (route) => route.name === "ms-role/list"
-            );
-
-            if (!roleListVueRoute) {
-              userSession.vueRouter.addRoute("mk-ms-main", {
-                name: roleListRoute.name,
-                path: "/dv/ms-role",
-                component: RoleListPage,
-              });
-
-              userSession.register(
-                createDisposable(() => {
-                  userSession.vueRouter.removeRoute(roleListRoute.name);
-                })
-              );
-            }
-          }
-        })
-      );
-    });
+    this.pageManager.init();
+    this.pageManager.setMSAppCLient(this);
 
     this.httpRequest.getInterceptors().response.use((config) => {
       if (config.data.code === 401) {
-        this.vueRouter.push({ name: "login" });
+        if (this.userSession) {
+          this.userSession.lock();
+        } else {
+          this.vueRouter.push({ name: "login" });
+        }
       }
       return config;
     });
@@ -297,13 +204,6 @@ export class MSAppClient {
   }
 
   async login(account: string, password: string, code: string) {
-    type LoginResult = {
-      account: string;
-      email: string;
-      nickName: string;
-      avatarPath: string;
-    };
-
     const response = await this.httpRequest.request<R<LoginResult>>({
       url: "/api/ms-login/login",
       method: "POST",
@@ -311,7 +211,10 @@ export class MSAppClient {
     });
 
     if (response.data.code === 200) {
-      await this.loadCurrentUserSession();
+      await this.loadCurrentUserSession({
+        accessToken: response.headers[ACCESS_TOKEN_HEADER],
+        xAccessToken: response.headers[X_ACCESS_TOKEN_HEADER],
+      });
     }
 
     return response;
@@ -338,6 +241,6 @@ export class MSAppClient {
     this.userSession?.dispose();
     this.setUserSession(null);
 
-    this.httpRequest.get("/api/ms-login/logout");
+    return this.httpRequest.get("/api/ms-login/logout");
   }
 }

package/src/MSDataFormComponents.ts

@@ -5,7 +5,7 @@ export class MSDataFormComponents extends DataFormComponents {
     super();
     this.registerComponent({
       name: "MKImageSelect",
-      title: "输入框",
+      title: "图片选择",
       component: MKImageSelect,
     });
   }