@maketribe/ms-app 3.0.0

package/dist/style/src/page/login.scss

@@ -0,0 +1,107 @@
+.login-wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  overflow: auto;
+  z-index: 9;
+
+  > .login-bg {
+    background-color: #fcfcfc;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    overflow: hidden;
+
+    > .login-bg-block {
+      width: 80vh;
+      height: 200%;
+      background-color: #0078f5;
+      position: absolute;
+      top: 0;
+
+      &:nth-child(1) {
+        left: 100%;
+        transform-origin: 0% 50%;
+        transform: rotate(-30deg) translate(0%, -50%);
+      }
+      &:nth-child(2) {
+        right: 100%;
+        transform-origin: 0% 0%;
+        transform: rotate(-30deg) translate(-10%, 0%);
+      }
+    }
+  }
+
+  .operaBtn {
+    color: #0078f5;
+  }
+
+  .notify {
+    color: #202d40;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.login-root {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  min-height: 100%;
+  align-items: center;
+  background-color: initial;
+  z-index: 1;
+  padding: 5%;
+  box-sizing: border-box;
+}
+
+.login-main {
+  position: relative;
+  width: 100%;
+  min-width: 320px;
+}
+
+.form-container {
+  transform-origin: top;
+  display: flex;
+  justify-content: center;
+}
+
+.form-wrap {
+  width: 440px;
+  max-width: calc(100vw - 28px);
+  padding: 30px;
+  position: relative;
+  overflow: hidden;
+  background: hsla(0, 0%, 95%, 0.5);
+  -webkit-backdrop-filter: blur(30px);
+  backdrop-filter: blur(30px);
+}
+
+.form-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 33px;
+  margin: 0 0 30px;
+  color: #202d40;
+  font-size: 20px;
+  font-weight: 600;
+
+  span {
+    height: 20px;
+    color: #8592a5;
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  a {
+    color: #06f;
+  }
+}

package/gulpfile.ts

@@ -0,0 +1 @@
+export * from "../../scripts/build-style/gulpfile";

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@maketribe/ms-app",
+  "version": "3.0.0",
+  "description": "",
+  "main": "dist/cjs",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@element-plus/icons": "^0.0.11",
+    "element-plus": "^2.3.7",
+    "vue": "^3.3.4",
+    "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"
+  },
+  "scripts": {
+    "build": "npm run clean && npm run build:js && npm run build:type && npm run build:style",
+    "build:js": "rollup --config rollup.config.mjs",
+    "build:type": "npm run build:type:cjs && npm run build:type:esm",
+    "build:type:cjs": "vue-tsc --project tsconfig.build.json --declaration --emitDeclarationOnly --outDir dist/cjs",
+    "build:type:esm": "vue-tsc --project tsconfig.build.json --declaration --emitDeclarationOnly --outDir dist/esm",
+    "build:style": "gulp --required @esbuild-kit/cjs-loader buildStyle",
+    "clean": "rimraf dist"
+  },
+  "module": "dist/esm",
+  "types": "dist/esm/index.d.ts"
+}

package/rollup.config.mjs

@@ -0,0 +1,11 @@
+import glob from "fast-glob";
+import vueBaseConfig from "../../scripts/rollup.vue-base.mjs";
+
+export default vueBaseConfig({
+  name: "@maketribe/ms-app",
+  input: glob.sync("src/**/*.{ts,tsx,vue}", {
+    cwd: process.cwd(),
+    absolute: true,
+    onlyFiles: true,
+  }),
+});

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/MSAppClient.ts

@@ -0,0 +1,343 @@
+import {
+  createRouter,
+  createWebHashHistory,
+  Router as VueRouter,
+} from "vue-router";
+import { HttpRequest, R, WebHttpRequest } from "@maketribe/request";
+import { IComponents, DataModel } from "@maketribe/dm";
+import { I18n } from "@maketribe/locale";
+
+import { createDisposable, 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";
+
+export interface MSAppClientOptions {
+  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;
+
+  /**
+   * @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;
+
+    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: [],
+        }),
+      dataTableComponents:
+        options.dataTableComponents ?? new MSDataTableComponents(),
+      dataFormComponents:
+        options.dataFormComponents ?? new MSDataFormComponents(),
+      dataFilterComponents:
+        options.dataFilterComponents ?? new MSDataFilterComponents(),
+      whereFilterComponents:
+        options.whereFilterComponents ?? new MSDataFilterComponents(),
+    };
+  }
+  getI18n() {
+    return this.i18n;
+  }
+
+  getOptions() {
+    return this._options;
+  }
+
+  async loadCurrentUserSession() {
+    const userSession = (this.userSession = new UserSession({
+      msAppClient: this,
+    }));
+    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;
+    }
+
+    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);
+
+      if (route) {
+        next(route);
+        return;
+      }
+
+      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.httpRequest.getInterceptors().response.use((config) => {
+      if (config.data.code === 401) {
+        this.vueRouter.push({ name: "login" });
+      }
+      return config;
+    });
+
+    this.initd = true;
+  }
+
+  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",
+      data: { account, password: md5(`mkbl#${password}`), vCode: code },
+    });
+
+    if (response.data.code === 200) {
+      await this.loadCurrentUserSession();
+    }
+
+    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);
+
+    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,
+    });
+  }
+}

package/src/PermissionPointManager.ts

@@ -0,0 +1,26 @@
+export interface PermissionPoint {
+  id: number;
+  menuId: string;
+  key: string;
+  name: string;
+}
+
+export class PermissionPointManager {
+  permissionPoints: PermissionPoint[];
+
+  constructor() {
+    this.permissionPoints = [];
+  }
+
+  setPermissionPoints(permissionPoints: PermissionPoint[]) {
+    this.permissionPoints = permissionPoints;
+  }
+
+  init() {}
+
+  getPermissionPointsByMenuID(menuID: string): PermissionPoint[] {
+    return this.permissionPoints.filter(
+      (permissionPoint) => permissionPoint.menuId === menuID
+    );
+  }
+}