@maketribe/ms-app 3.0.6 → 3.0.8

package/src/components/verify-dialog/verify-dialog.tsx

@@ -2,20 +2,30 @@ import {
   computed,
   defineComponent,
   unref,
-  Fragment,
   ref,
   onMounted,
   watch,
+  Ref,
 } from "vue";
+import { ElDialog, ElSlider, ElButton } from "element-plus";
 import { useHttpRequest } from "../../composables";
 import { verifyDialogProps, verifyDialogEmits } from "./verify-dialog-option";
-import { ElDialog, ElSlider, ElButton } from "element-plus";
+import { Disposable, createDisposable } from "@maketribe/utils";
 
 export default defineComponent({
   name: "MKVerifyDialog",
   props: verifyDialogProps,
   emits: verifyDialogEmits,
-  setup(props, { emit }) {
+  // expose: ["fail"],
+  setup(props, { emit, expose }) {
+    const wrapperEl: Ref<HTMLElement | null> = ref(null);
+    const buttonEl: Ref<HTMLElement | null> = ref(null);
+    const grandEl: Ref<HTMLElement | null> = ref(null);
+    // 样式默认宽度是48px
+    let slideWidth: number = 48;
+
+    const isError = ref(false);
+
     const deg = ref(0);
 
     const httpRequest = useHttpRequest();
@@ -48,9 +58,68 @@ export default defineComponent({
       return response.data ?? null;
     };
 
-    const verifyConfirm = async () => {
-      emit("verifySuccessful", deg.value.toString());
+    const handleSwitchConfirm = () => {
+      emit("confirm", unref(deg));
+    };
+
+    const handleMouseDown = (mouseDownEvent: MouseEvent) => {
+      if (unref(isError)) {
+        return;
+      }
+
+      const disposable = new Disposable();
+
+      const totalWidth = unref(wrapperEl)!.getBoundingClientRect().width;
+
+      const handleMouseMove = (event: MouseEvent) => {
+        // 限定宽度范围
+        slideWidth = Math.min(
+          Math.max(event.clientX - mouseDownEvent.clientX + 48, 48),
+          totalWidth
+        );
+
+        deg.value = Math.floor(((slideWidth - 48) / (totalWidth - 48)) * 360);
+
+        unref(grandEl)!.style.width = `${slideWidth}px`;
+        unref(buttonEl)!.style.transform = `translateX(${slideWidth - 48}px)`;
+      };
+
+      const handleMouseUp = (event: MouseEvent) => {
+        if (deg.value !== 0) {
+          handleSwitchConfirm();
+        }
+
+        disposable.dispose();
+      };
+
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+
+      disposable.register(
+        createDisposable(() => {
+          document.removeEventListener("mousemove", handleMouseMove);
+          document.removeEventListener("mouseup", handleMouseUp);
+        })
+      );
+    };
+
+    const reset = () => {
+      unref(grandEl)!.style.width = ``;
+      unref(buttonEl)!.style.transform = ``;
     };
+
+    expose({
+      fail: () => {
+        isError.value = true;
+
+        setTimeout(() => {
+          isError.value = false;
+
+          reset();
+        }, 1000);
+      },
+    });
+
     onMounted(() => {
       watch(
         visible,
@@ -72,25 +141,12 @@ export default defineComponent({
     return () => {
       return (
         <ElDialog
-          model-value={visible.value}
+          modelValue={visible.value}
+          onUpdate:modelValue={(v: boolean) => (visible.value = v)}
           modal-class="mk-verify-dialog"
           width={props.width}
-          showClose={false}
+          title="请完成下方验证后继续操作"
           appendToBody
-          v-slots={{
-            footer: () => {
-              return (
-                <Fragment>
-                  <ElButton type={"primary"} onClick={verifyConfirm}>
-                    确定
-                  </ElButton>
-                  <ElButton onClick={() => (visible.value = false)}>
-                    取消
-                  </ElButton>
-                </Fragment>
-              );
-            },
-          }}
         >
           <div class="mk-verify-dialog__wrapper">
             <div
@@ -98,14 +154,24 @@ export default defineComponent({
               ref="imageEl"
               style={imageStyle.value}
             />
+            <div class="mk-verify-dialog__coordinate" />
+          </div>
+          <div class={["mk-verify-switch", unref(isError) ? "is-error" : ""]}>
+            <div
+              class="mk-verify-switch__wrapper"
+              ref={((el: HTMLDivElement) => (wrapperEl.value = el)) as any}
+            >
+              <div
+                class="mk-verify-switch__button-grand"
+                ref={((el: HTMLDivElement) => (grandEl.value = el)) as any}
+              />
+              <div
+                class="mk-verify-switch__button"
+                ref={((el: HTMLDivElement) => (buttonEl.value = el)) as any}
+                onMousedown={handleMouseDown}
+              />
+            </div>
           </div>
-          <ElSlider
-            model-value={deg.value}
-            onUpdate:modelValue={(v) => (deg.value = v as number)}
-            show-tooltip={false}
-            min={0}
-            max={360}
-          />
         </ElDialog>
       );
     };

package/src/constants/index.ts

@@ -1,3 +1,6 @@
+export * from "./pattern";
 export * from "./token";
 export * from "./route";
 export * from "./menu";
+export * from "./region";
+export * from "./log";

package/src/constants/log.ts

@@ -0,0 +1,5 @@
+export enum LoginLogType {
+  SUCCESS = 1,
+  FAILURE = 2,
+  LOCK = 3,
+}

package/src/constants/menu.ts

@@ -1,4 +1,5 @@
 export enum MenuType {
-  Container = 1,
-  Menu = 2,
+  Container = "1",
+  Menu = "2",
+  SystemSettings = "3",
 }

package/src/constants/pattern.ts

@@ -0,0 +1,4 @@
+export const IP_PATTERN =
+  /^(1\d\d|2[0-4]\d|25[0-5]|[1-9]\d|\d)\.(1\d\d|2[0-4]\d|25[0-5]|[1-9]\d|\d)\.(1\d\d|2[0-4]\d|25[0-5]|[1-9]\d|\d)\.(1\d\d|2[0-4]\d|25[0-5]|[1-9]\d|\d)$/;
+
+export const EMAIL_PATTERN = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;

package/src/constants/region.ts

@@ -0,0 +1,6 @@
+export enum RegionLevel {
+  Province = 1,
+  City = 2,
+  District = 3,
+  Town = 4,
+}

package/src/core/DataModelDefines.ts

@@ -1,4 +1,4 @@
-import { DataTable, DataForm } from "@maketribe/dm";
+import { DataTable, DataForm, DataTree } from "@maketribe/dm";
 
 export type DataTableClass = {
   new (options: any): DataTable;
@@ -8,6 +8,10 @@ export type DataFormClass = {
   new (options: any): DataForm;
 };
 
+export type DataTreeClass = {
+  new (options: any): DataTree;
+};
+
 /**
  * 数据模型缓存
  *
@@ -19,10 +23,12 @@ export class DataModelDefines {
 
   private _dataTableDefines: Map<string, DataTableClass>;
   private _dataFormDefines: Map<string, DataFormClass>;
+  private _dataTreeDefines: Map<string, DataTreeClass>;
 
   constructor() {
     this._dataTableDefines = new Map();
     this._dataFormDefines = new Map();
+    this._dataTreeDefines = new Map();
   }
 
   getDataTable(name: string): DataTable | null {
@@ -37,6 +43,12 @@ export class DataModelDefines {
     return DataFormDefine ? new DataFormDefine({}) : null;
   }
 
+  getDataTree(name: string): DataTree | null {
+    const DataTreeDefine = this._dataTreeDefines.get(name);
+
+    return DataTreeDefine ? new DataTreeDefine({}) : null;
+  }
+
   registerDataTableDefine<T extends DataTableClass>(
     name: string,
     DataTableDefine: T
@@ -50,4 +62,11 @@ export class DataModelDefines {
   ) {
     this._dataFormDefines.set(name, dataFormDefine);
   }
+
+  registerDataTreeDefine<T extends DataTreeClass>(
+    name: string,
+    dataTreeDefine: T
+  ) {
+    this._dataTreeDefines.set(name, dataTreeDefine);
+  }
 }

package/src/core/MSAppClient.ts

@@ -220,6 +220,10 @@ export class MSAppClient {
     return response;
   }
 
+  formatURL(url: string) {
+    return url;
+  }
+
   async modifyPassword(account: string, code: string) {
     type LoginResult = {
       account: string;

package/src/core/PageManager.ts

@@ -34,7 +34,7 @@ export class PageManager {
 
   init() {
     this.addNormalPage({
-      name: "mk-ms-main",
+      name: "mk-ms-layout",
       path: "/",
       component: () => import("../page/index.vue"),
     });
@@ -58,21 +58,31 @@ export class PageManager {
     });
 
     this.addExtendsPage({
-      name: "ms-material/list",
+      name: "dv/ms-material/list",
       path: "/material-list",
       component: () => import("../page/index/material/index.vue"),
+      meta: { name: "ms-material" },
     });
 
     this.addExtendsPage({
-      name: "ms-member/list",
+      name: "dv/ms-member/single/list/normal",
       path: "/dv/ms-member",
       component: () => import("../page/index/dv/ms-member/index.vue"),
+      meta: { name: "ms-member" },
     });
 
     this.addExtendsPage({
-      name: "ms-role/list",
+      name: "dv/ms-role/single/list/dialog",
       path: "/dv/ms-role",
       component: () => import("../page/index/dv/ms-role/index.vue"),
+      meta: { name: "ms-role" },
+    });
+
+    this.addExtendsPage({
+      name: "dv/local-log/single/tree/dialog",
+      path: "/log/local",
+      component: () => import("../page/index/dv/local-log/index.vue"),
+      meta: { name: "local-log" },
     });
 
     this.msAppClientChangeEvent.on(({ msAppClient }) => {
@@ -115,7 +125,8 @@ export class PageManager {
           if (!this.extendsPages.find((page) => page.name === "notFound")) {
             this.addExtendsPage({
               name: "notFound",
-              path: "/:pathMatch(.*)*",
+              // path: ":pathMatch(.*)*",
+              path: "",
               component: () => import("../page/index/404.vue"),
             });
           }
@@ -127,7 +138,7 @@ export class PageManager {
 
             if (!vueRoute) {
               addedExtendsPageNames.push(extendsPage.name as string);
-              vueRouter.addRoute("mk-ms-main", extendsPage);
+              vueRouter.addRoute("mk-ms-layout", extendsPage);
             }
           }
 

package/src/core/Router.ts

@@ -2,7 +2,7 @@ import { Disposable, Event, createDisposable } from "@maketribe/utils";
 import { Route } from "../dataview";
 import type { UserSession } from "./UserSession";
 
-const NORMALIZE_ROUTE_NAME_REG = /^([^\\]+)\/(.+)$/;
+const NORMALIZE_ROUTE_NAME_REG = /^dv\/([^/]+)\/([^/]+)(\/.+)?$/;
 
 export class Router extends Disposable {
   userSession: UserSession;
@@ -46,16 +46,78 @@ export class Router extends Disposable {
         const action = match[2];
 
         switch (action) {
+          case "single":
+            const [listType, type] = match[3].slice(1).split("/");
+
+            switch (listType) {
+              case "list":
+                switch (type) {
+                  case "normal":
+                    vueRouter.addRoute("mk-ms-layout", {
+                      name: defaultPageRoute.name,
+                      path: `/dv/${name}`,
+                      component: () =>
+                        import(
+                          "../page/index/dv/default/single/list/normal.vue"
+                        ),
+                      meta: { name },
+                    });
+                    break;
+                  case "dialog":
+                    vueRouter.addRoute("mk-ms-layout", {
+                      name: defaultPageRoute.name,
+                      path: `/dv/${name}`,
+                      component: () =>
+                        import(
+                          "../page/index/dv/default/single/list/dialog.vue"
+                        ),
+                      meta: { name },
+                    });
+                    break;
+                }
+
+                break;
+              case "tree":
+                switch (type) {
+                  case "dialog":
+                    vueRouter.addRoute("mk-ms-layout", {
+                      name: defaultPageRoute.name,
+                      path: `/dv/${name}`,
+                      component: () =>
+                        import(
+                          "../page/index/dv/default/single/tree/dialog.vue"
+                        ),
+                      meta: { name },
+                    });
+                    break;
+                }
+              case "table-tree":
+                switch (type) {
+                  case "dialog":
+                    vueRouter.addRoute("mk-ms-layout", {
+                      name: defaultPageRoute.name,
+                      path: `/dv/${name}`,
+                      component: () =>
+                        import(
+                          "../page/index/dv/default/single/table-tree/dialog.vue"
+                        ),
+                      meta: { name },
+                    });
+                    break;
+                }
+            }
+
+            break;
           case "list":
-            vueRouter.addRoute("mk-ms-main", {
+            vueRouter.addRoute("mk-ms-layout", {
               name: defaultPageRoute.name,
               path: `/dv/${name}`,
-              component: () => import("../page/index/dv/default/index.vue"),
+              component: () => import("../page/index/dv/default/table.vue"),
               meta: { name },
             });
             break;
           case "edit":
-            vueRouter.addRoute("mk-ms-main", {
+            vueRouter.addRoute("mk-ms-layout", {
               name: defaultPageRoute.name,
               path: `/dv/${name}/:id`,
               component: () => import("../page/index/dv/default/edit.vue"),
@@ -63,21 +125,13 @@ export class Router extends Disposable {
             });
             break;
           case "add":
-            vueRouter.addRoute("mk-ms-main", {
+            vueRouter.addRoute("mk-ms-layout", {
               name: defaultPageRoute.name,
               path: `/dv/${name}/add`,
               component: () => import("../page/index/dv/default/add.vue"),
               meta: { name },
             });
             break;
-          case "tree":
-            vueRouter.addRoute("mk-ms-main", {
-              name: defaultPageRoute.name,
-              path: `/dv/${name}`,
-              component: () => import("../page/index/dv/default/tree.vue"),
-              meta: { name },
-            });
-            break;
         }
       }
     }

package/src/core/UserInfo.ts

@@ -20,7 +20,7 @@ export class UserInfo {
   account: string;
   email: string;
   nickName: string;
-  avatar: URL | null;
+  avatar: string;
   isLocked: boolean;
   isSuper: boolean;
   payload: any;
@@ -45,10 +45,10 @@ export class UserInfo {
 
     try {
       this.avatar = payload.avatarPath
-        ? new URL(payload.avatarPath, msAppClient.origin)
-        : null;
+        ? new URL(payload.avatarPath, msAppClient.origin).toString()
+        : "";
     } catch (e) {
-      this.avatar = null;
+      this.avatar = "";
     }
 
     this.payload = payload;

package/src/core/component/ConfigComponents.ts

@@ -6,13 +6,16 @@ export class ConfigComponents extends Components {
     super();
 
     this.registerComponent({
-      name: "MKFormInput",
+      name: "MKConfigInput",
       title: "输入框",
       component: ElInput,
+      defaultProps: {
+        type: "textarea",
+      },
     });
 
     this.registerComponent({
-      name: "MKFormInputNumber",
+      name: "MKConfigInputNumber",
       title: "数值输入框",
       component: ElInputNumber,
     });

package/src/core/component/DataTableComponents.ts

@@ -47,5 +47,13 @@ export class DataTableComponents extends Components {
         () => import("../../components/column-components/column-select")
       ),
     });
+
+    this.registerComponent({
+      name: "MKColumnJson",
+      title: "JSON",
+      component: defineAsyncComponent(
+        () => import("../../components/column-components/column-json")
+      ),
+    });
   }
 }

package/src/dataview/config/ConfigForm.ts

@@ -1,12 +1,11 @@
 import {
-  Components,
   DataForm,
   DataFormOptions,
   FormColumn,
   IComponents,
 } from "@maketribe/dm";
 import { defineDataForm } from "../../define-data-form";
-import { ITypeResolver } from "../../core";
+import { ConfigComponents, ITypeResolver } from "../../core";
 
 export type Config<T = any> = {
   id: string;
@@ -29,10 +28,12 @@ export class ConfigForm
   constructor(options: ConfigFormOptions = {}) {
     super({ name: "ms-cfg", ...options });
 
-    this.configComponent = options.configComponent ?? new Components();
+    this.configComponent = options.configComponent ?? new ConfigComponents();
   }
 
   protected async initialize() {
+    await super.initialize();
+
     const defaultType = "string";
     this.setColumns([
       new FormColumn({ name: "id", label: "编号" }),
@@ -99,9 +100,9 @@ export class ConfigForm
   resolveType(type: string) {
     switch (type) {
       case "int":
-        return "MKFormInputNumber";
+        return "MKConfigInputNumber";
       default:
-        return "MKFormInput";
+        return "MKConfigInput";
     }
   }
 

package/src/dataview/config/ConfigTable.ts

@@ -26,6 +26,8 @@ export class ConfigTable extends DataTable<Config> {
   }
 
   protected async initialize() {
+    await super.initialize();
+
     this.setColumns([
       new TableColumn({ name: "id", label: "编号", visible: false }),
       new TableColumn({ name: "key", label: "配置键" }),
@@ -65,4 +67,6 @@ export class ConfigTable extends DataTable<Config> {
   }
 }
 
+(window as any).ConfigTable = ConfigTable;
+
 defineDataTable(ConfigTable);

package/src/dataview/deny-ip-access-list/DenyIPAccessListForm.ts

@@ -0,0 +1,33 @@
+import { DataForm, FormColumn } from "@maketribe/dm";
+import { defineDataForm } from "../../define-data-form";
+import { IP_PATTERN } from "../../constants";
+
+export type DenyIPAccessList = {
+  id: string;
+  ipAddress: string;
+};
+
+export class DenyIPAccessListForm<T = DenyIPAccessList, F = T> extends DataForm<
+  T,
+  F
+> {
+  constructor(options = {}) {
+    super({ name: "ms-deny-access-ip-list", ...options });
+  }
+
+  async initialize() {
+    await super.initialize();
+
+    this.setColumns([
+      new FormColumn({ name: "id", label: "编号" }),
+      new FormColumn({
+        name: "ipAddress",
+        label: "IP地址",
+        required: true,
+        rules: [{ message: "请输入正确的IP", pattern: IP_PATTERN }],
+      }),
+    ]);
+  }
+}
+
+defineDataForm(DenyIPAccessListForm);

package/src/dataview/deny-ip-access-list/DenyIPAccessListTable.ts

@@ -0,0 +1,84 @@
+import {
+  ActionButton,
+  DataTable,
+  DeleteButton,
+  EditButton,
+  TableActionColumn,
+  TableColumn,
+  Messager,
+} from "@maketribe/dm";
+import { defineDataTable } from "../../define-data-table";
+import { DenyIPAccessList } from "./DenyIPAccessListForm";
+
+export class DenyIPAccessListTable<
+  T = DenyIPAccessList,
+  F = T
+> extends DataTable<T, F> {
+  constructor(options = {}) {
+    super({ name: "ms-deny-access-ip-list", ...options });
+  }
+
+  async initialize() {
+    await super.initialize();
+
+    this.setColumns([
+      new TableColumn({ name: "ipAddress", label: "IP地址" }),
+      new TableColumn({ name: "createdAt", label: "创建时间" }),
+      new TableActionColumn({
+        width: "180px",
+        buttons: [
+          new EditButton(),
+          new DeleteButton({ label: "移除" }),
+          new ActionButton({
+            label: "禁用",
+            type: "danger",
+            handler: async (row) => {
+              this.loadingManager.startLoading();
+
+              const result = await this.dataViewRequest.callDVRequest({
+                action: `disable/${row.id}`,
+              });
+
+              this.loadingManager.completeLoading();
+              if (result.data.code !== 200) {
+                Messager.instance.error({
+                  message: result.data.msg || "禁用失败",
+                });
+                return;
+              }
+              Messager.instance.success({ message: "禁用成功" });
+
+              this.load();
+            },
+            predicate: (row) => row.valid === 1,
+          }),
+          new ActionButton({
+            label: "启用",
+            type: "success",
+            handler: async (row) => {
+              this.loadingManager.startLoading();
+
+              const result = await this.dataViewRequest.callDVRequest({
+                action: `enable/${row.id}`,
+              });
+
+              this.loadingManager.completeLoading();
+              if (result.data.code !== 200) {
+                Messager.instance.error({
+                  message: result.data.msg || "启用失败",
+                });
+                return;
+              }
+              Messager.instance.success({ message: "启用成功" });
+
+              this.load();
+            },
+            predicate: (row) => row.valid === 0,
+          }),
+        ],
+      }),
+    ]);
+  }
+}
+
+defineDataTable(DenyIPAccessListTable);

package/src/dataview/deny-ip-access-list/index.ts

@@ -0,0 +1,2 @@
+export * from "./DenyIPAccessListForm";
+export * from "./DenyIPAccessListTable";