@maketribe/ms-app 3.0.1 → 3.0.4

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,6 +1,6 @@
 {
   "name": "@maketribe/ms-app",
-  "version": "3.0.1",
+  "version": "3.0.4",
   "description": "",
   "main": "dist/cjs",
   "files": [
@@ -10,16 +10,17 @@
   "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": "^3.0.0",
-    "@maketribe/locale": "^1.0.4",
-    "@maketribe/request": "^1.1.0",
-    "@maketribe/utils": "^1.1.0",
-    "@maketribe/dm-ui": "^3.0.0"
+    "@maketribe/dm": "^3.0.3",
+    "@maketribe/dm-ui": "^3.0.2",
+    "@maketribe/utils": "^1.1.1",
+    "@maketribe/locale": "^1.0.5",
+    "@maketribe/request": "^1.1.2"
   },
   "scripts": {
     "build": "npm run clean && npm run build:js && npm run build:type && npm run build:style",

package/src/ConfigComponents.ts

@@ -0,0 +1,20 @@
+import { ElInput, ElInputNumber } from "element-plus";
+import { Components } from "@maketribe/dm";
+
+export class ConfigComponents extends Components {
+  constructor() {
+    super();
+
+    this.registerComponent({
+      name: "MKFormInput",
+      title: "输入框",
+      component: ElInput,
+    });
+
+    this.registerComponent({
+      name: "MKFormInputNumber",
+      title: "数值输入框",
+      component: ElInputNumber,
+    });
+  }
+}

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

@@ -0,0 +1,246 @@
+import {
+  createRouter,
+  createWebHashHistory,
+  Router as VueRouter,
+} from "vue-router";
+import { HttpRequest, R, WebHttpRequest } from "@maketribe/request";
+import { IComponents, DataModel, Components } from "@maketribe/dm";
+import { I18n } from "@maketribe/locale";
+
+import { Event, md5 } from "@maketribe/utils";
+import { UserSession } from "./UserSession";
+import { authBeforeEach } from "./router-middleware";
+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;
+  appID: string;
+  logo?: string;
+  locale?: string;
+  vueRouter?: VueRouter;
+  dataTableComponents?: IComponents;
+  dataFormComponents?: IComponents;
+  dataFilterComponents?: IComponents;
+  whereFilterComponents?: IComponents;
+}
+
+export class MSAppClient {
+  static instance: MSAppClient | null = null;
+
+  origin: string = "";
+
+  private _options: Required<MSAppClientOptions>;
+
+  projectName: string;
+
+  logo: string;
+
+  appID: string;
+
+  userSession: UserSession | null = null;
+
+  httpRequest: HttpRequest;
+
+  ready: boolean = false;
+
+  initd: boolean = false;
+
+  pageManager: PageManager;
+
+  /**
+   * @deprecated
+   * @description 使用 MSAppClient.instance.userSession.userInfo
+   */
+  get userInfo() {
+    return this.userSession?.userInfo ?? null;
+  }
+
+  i18n: I18n;
+
+  dataTableComponents: IComponents;
+  dataFormComponents: IComponents;
+  dataFilterComponents: IComponents;
+  whereFilterComponents: IComponents;
+
+  vueRouter: VueRouter;
+
+  beforeInitUserSessionEvent: Event<{ userSession: UserSession }> = new Event();
+
+  userSessionChangeEvent: Event<{ userSession: UserSession | null }> =
+    new Event();
+
+  constructor(options: MSAppClientOptions) {
+    this._options = this._normalizeOptions(options);
+
+    this.appID = this._options.appID;
+
+    this.logo = this._options.logo;
+
+    this.projectName = options.projectName;
+
+    this.i18n = I18n.instance;
+    this.i18n.setCurrentLanguageName(this._options.locale);
+
+    this.dataTableComponents = this._options.dataTableComponents;
+    this.dataFormComponents = this._options.dataFormComponents;
+    this.dataFilterComponents = this._options.dataFilterComponents;
+    this.whereFilterComponents = this._options.whereFilterComponents;
+
+    this.vueRouter = this._options.vueRouter;
+
+    this.pageManager = this._options.pageManager;
+
+    HttpRequest.appID = this.appID;
+
+    this.httpRequest = this._options.httpRequest;
+
+    DataModel.setHttpRequest(this.httpRequest);
+  }
+
+  setUserSession(userSession: UserSession | null) {
+    if (this.userSession) {
+      this.userSession.dispose();
+    }
+
+    this.userSession = userSession;
+
+    this.userSessionChangeEvent.emit({ userSession });
+  }
+
+  private _normalizeOptions(
+    options: MSAppClientOptions
+  ): Required<MSAppClientOptions> {
+    return {
+      appID: options.appID,
+      projectName: options.projectName,
+      httpRequest: options.httpRequest ?? new WebHttpRequest(),
+      origin: options.origin,
+      logo: options.logo || "",
+      locale: options.locale || "zh-cn",
+      vueRouter:
+        options.vueRouter ??
+        createRouter({
+          history: createWebHashHistory(),
+          routes: [],
+        }),
+      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() {
+    return this.i18n;
+  }
+
+  getOptions() {
+    return this._options;
+  }
+
+  async loadCurrentUserSession(options?: {
+    accessToken: string;
+    xAccessToken: string;
+  }) {
+    const userSession = (this.userSession = new UserSession({
+      msAppClient: this,
+      ...options,
+    }));
+    this.userSession = null;
+
+    this.beforeInitUserSessionEvent.emit({ userSession });
+    const userSessionInitResult = await userSession.init();
+
+    if (userSessionInitResult?.data.code !== 200) {
+      userSession.dispose();
+      return userSessionInitResult!;
+    }
+
+    this.setUserSession(userSession);
+  }
+
+  async init() {
+    if (this.initd) {
+      return;
+    }
+
+    this.vueRouter.beforeEach(async (to, from, next) => {
+      const route = await authBeforeEach(this, to, from);
+
+      if (route) {
+        next(route);
+        return;
+      }
+
+      next();
+    });
+
+    this.pageManager.init();
+    this.pageManager.setMSAppCLient(this);
+
+    this.httpRequest.getInterceptors().response.use((config) => {
+      if (config.data.code === 401) {
+        if (this.userSession) {
+          this.userSession.lock();
+        } else {
+          this.vueRouter.push({ name: "login" });
+        }
+      }
+      return config;
+    });
+
+    this.initd = true;
+  }
+
+  async login(account: string, password: string, code: string) {
+    const response = await this.httpRequest.request<R<LoginResult>>({
+      url: "/api/ms-login/login",
+      method: "POST",
+      data: { account, password: md5(`mkbl#${password}`), vCode: code },
+    });
+
+    if (response.data.code === 200) {
+      await this.loadCurrentUserSession({
+        accessToken: response.headers[ACCESS_TOKEN_HEADER],
+        xAccessToken: response.headers[X_ACCESS_TOKEN_HEADER],
+      });
+    }
+
+    return response;
+  }
+
+  async modifyPassword(account: 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/modify-password",
+      method: "POST",
+      data: { account, vCode: code },
+    });
+
+    return response;
+  }
+
+  async logout() {
+    this.userSession?.dispose();
+    this.setUserSession(null);
+
+    return this.httpRequest.get("/api/ms-login/logout");
+  }
+}

package/src/MSDataFilterComponents.ts

@@ -0,0 +1,6 @@
+import { DataFilterComponents } from "@maketribe/dm-ui";
+export class MSDataFilterComponents extends DataFilterComponents {
+  constructor() {
+    super();
+  }
+}

package/src/MSDataFormComponents.ts

@@ -0,0 +1,12 @@
+import { DataFormComponents } from "@maketribe/dm-ui";
+import { MKImageSelect } from "./components/image-select";
+export class MSDataFormComponents extends DataFormComponents {
+  constructor() {
+    super();
+    this.registerComponent({
+      name: "MKImageSelect",
+      title: "图片选择",
+      component: MKImageSelect,
+    });
+  }
+}

package/src/MSDataTableComponents.ts

@@ -0,0 +1,6 @@
+import { DataTableComponents } from "@maketribe/dm-ui";
+export class MSDataTableComponents extends DataTableComponents {
+  constructor() {
+    super();
+  }
+}

package/src/MaterialComponents.ts

@@ -0,0 +1,26 @@
+import { Components } from "@maketribe/dm";
+import { MKFileView, MKImageView, MKVideoView } from "@maketribe/dm-ui";
+
+export class MaterialComponents extends Components {
+  constructor() {
+    super();
+
+    this.registerComponent({
+      name: "MKImageView",
+      title: "图片",
+      component: MKImageView,
+    });
+
+    this.registerComponent({
+      name: "MKFileView",
+      title: "文件",
+      component: MKFileView,
+    });
+
+    this.registerComponent({
+      name: "MKVideoView",
+      title: "视频",
+      component: MKVideoView,
+    });
+  }
+}