@maketribe/ms-app 3.0.5 → 3.0.7

package/src/components/material-select/material-select-api.ts

@@ -4,6 +4,7 @@ import type {
   IMKMaterialSelect,
   MKMaterialSelectOptions,
 } from "./material-select-type";
+import { Material } from "../../dataview";
 
 const initInstance = (
   props: any,
@@ -31,15 +32,17 @@ async function MaterialSelect(
   options?: MKMaterialSelectOptions,
   appContext?: AppContext
 ) {
+  options?.allowMaterialTypeValues;
   return new Promise((resolve, reject) => {
     showDialog(
       {
         ...options,
-        onSelect: (path: string) => {
-          resolve({ success: true, data: path });
+        allowMaterialTypeValues: options?.allowMaterialTypeValues ?? ["1"],
+        onMaterialChange: (material: Material) => {
+          resolve({ success: true, data: material, path: material.path });
         },
         onCancel: () => {
-          resolve({ success: false, data: "" });
+          resolve({ success: false, data: null, path: "" });
         },
       },
       appContext ?? (MaterialSelect as unknown as IMKMaterialSelect)._context

package/src/components/material-select/material-select-options.ts

@@ -1,15 +1,19 @@
 import { ExtractPropTypes } from "vue";
-import { MaterialMan } from "../../dataview";
+import { Material, MaterialMan, MaterialType } from "../../dataview";
 import { buildProps } from "@maketribe/utils";
 
 export const materialSelectProps = buildProps({
   materialMan: { type: MaterialMan },
   modelValue: { type: String },
+  allowMaterialTypeValues: {
+    type: Array<MaterialType["value"]>,
+  },
 });
 
 export type MaterialSelectProps = ExtractPropTypes<typeof materialSelectProps>;
 
 export const materialSelectEmits = {
+  materialChange: (material: Material) => true,
   "update:model-value": (path: any) => typeof path === "string",
   select: (path: any) => typeof path === "string",
   cancel: () => true,

package/src/components/material-select/material-select-type.ts

@@ -1,14 +1,16 @@
-import { MaterialMan } from "../../dataview";
+import { Material, MaterialMan, MaterialType } from "../../dataview";
 import type { AppContext } from "vue";
 
 export interface MKMaterialSelectOptions {
   materialMan?: MaterialMan;
+  allowMaterialTypeValues: MaterialType["value"][];
 }
 
 export interface IMKMaterialSelect {
   (options?: MKMaterialSelectOptions, appContext?: AppContext): Promise<{
     success: boolean;
-    data: string;
+    data: Material | null;
+    path: string;
   }>;
   _context: AppContext | null;
 }

package/src/components/material-select/material-select.tsx

@@ -14,7 +14,7 @@ import {
   materialSelectProps,
 } from "./material-select-options";
 import { MaterialComponents } from "../../core";
-import { MaterialMan } from "../../dataview";
+import { Material, MaterialMan } from "../../dataview";
 import { useHttpRequest } from "../../composables/use-http-request";
 
 export default defineComponent({
@@ -32,6 +32,7 @@ export default defineComponent({
       ) as MaterialMan);
 
     const selectedPath = ref("");
+    const selectedMaterial: Ref<Material | null> = ref(null);
     const visible: Ref<boolean> = ref(true);
 
     watch(
@@ -42,10 +43,21 @@ export default defineComponent({
       { immediate: true }
     );
 
+    watch(
+      computed(() => props.allowMaterialTypeValues),
+      (allowMaterialTypeValues) => {
+        materialMan.setAllowAccessMaterialTypeValues(
+          allowMaterialTypeValues ?? []
+        );
+      },
+      { immediate: true }
+    );
+
     const handleConfirmClick = () => {
       visible.value = false;
       emit("update:model-value", unref(selectedPath));
       emit("select", unref(selectedPath));
+      emit("materialChange", unref(selectedMaterial)!);
     };
 
     const handleCancelClick = () => {
@@ -80,8 +92,9 @@ export default defineComponent({
         >
           <MaterialList
             selectedPath={unref(selectedPath)}
-            onUpdate:selected-path={(v: string) => {
-              selectedPath.value = v;
+            onSelectedChange={(material: Material) => {
+              selectedPath.value = material.path;
+              selectedMaterial.value = material;
             }}
             class="mk-material-select__list"
             materialMan={materialMan}

package/src/components/rich-text-editor/rich-text-editor.tsx

@@ -10,12 +10,12 @@ import {
 } from "vue";
 import { MKMaterialSelect } from "../material-select";
 import TinyMCE from "tinymce";
+import "tinymce/skins/ui/oxide/content.js";
+import "tinymce/skins/content/default/content.js";
 import "tinymce/themes/silver/theme.min.js";
 import "tinymce/models/dom/model.min.js";
 import "tinymce/icons/default/icons.min.js";
-import "tinymce/skins/ui/oxide/content.js";
 import "tinymce/skins/ui/oxide/skin.js";
-// import "tinymce/plugins/image";
 import "tinymce/plugins/link";
 import "tinymce/plugins/table";
 import "tinymce/plugins/fullscreen";
@@ -39,6 +39,7 @@ export default defineComponent({
         plugins: ["link", "table", "fullscreen"],
         branding: false,
         menubar: false,
+        content_css: "ui/default/content.css",
         toolbar:
           "undo redo | bold italic underline strikethrough | alignleft aligncenter alignright | outdent indent | link | material | table | hr | removeformat | fullscreen",
         language: "zh-Hans",
@@ -52,7 +53,9 @@ export default defineComponent({
                 return;
               }
 
-              editor.insertContent(`<img src="${response.data}" alt="">`);
+              editor.insertContent(
+                `<img src="${response.path}" alt="${response.data!.id}">`
+              );
             },
           });
 

package/src/components/verify-dialog/verify-dialog-option.ts

@@ -18,6 +18,7 @@ export const verifyDialogProps = buildProps({
 
 export const verifyDialogEmits = {
   "update:visible": (modelValue: any) => true,
-  verifySuccessful: (modelValue: any) => true,
+
+  confirm: (modelValue: any) => true,
 };
 export type VerifyDialogProps = ExtractPropTypes<typeof verifyDialogEmits>;

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

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

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/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/menu/Menu.ts

@@ -43,6 +43,7 @@ export class Menu extends Disposable {
         return new MenuNode({
           id: menuInfo.id,
           route,
+          type: menuInfo.type,
           iconName: menuInfo.iconName || "",
           title: menuInfo.title || "",
           permissionPoints,

package/src/core/menu/MenuNode.ts

@@ -8,6 +8,7 @@ interface MenuNodeOptions {
   title: string;
   permissionPoints: PermissionPoint[];
   children: MenuNode[];
+  type: string;
   parent?: MenuNode | null;
 }
 
@@ -18,15 +19,18 @@ export class MenuNode {
   title: string;
   permissionPoints: PermissionPoint[];
   route: Route | null;
+  type: string;
   children: MenuNode[];
   parent: MenuNode | null;
 
   constructor(options: MenuNodeOptions) {
-    const { id, children, route, iconName, title, permissionPoints } = options;
+    const { id, children, route, iconName, title, permissionPoints, type } =
+      options;
 
     this.id = id;
     this.route = route ?? null;
     this.iconName = iconName;
+    this.type = type;
     this.title = title;
     this.children = children;
     this.parent = options.parent ?? null;

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

@@ -0,0 +1,25 @@
+import { DataForm, FormColumn } from "@maketribe/dm";
+import { defineDataForm } from "../../define-data-form";
+
+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() {
+    this.setColumns([
+      new FormColumn({ name: "id", label: "编号" }),
+      new FormColumn({ name: "ipAddress", label: "IP地址", required: true }),
+    ]);
+  }
+}
+
+defineDataForm(DenyIPAccessListForm);

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

@@ -0,0 +1,82 @@
+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() {
+    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";

package/src/dataview/index.ts

@@ -5,3 +5,5 @@ export * from "./role";
 export * from "./route";
 export * from "./config";
 export * from "./material";
+export * from "./ip-white-list";
+export * from "./deny-ip-access-list";

package/src/dataview/ip-white-list/IPWhitelistForm.ts

@@ -0,0 +1,22 @@
+import { DataForm, FormColumn } from "@maketribe/dm";
+import { defineDataForm } from "../../define-data-form";
+
+export type IPWhitelist = {
+  id: string;
+  ipAddress: string;
+};
+
+export class IPWhitelistForm<T = IPWhitelist, F = T> extends DataForm<T, F> {
+  constructor(options = {}) {
+    super({ name: "ms-access-ip-whitelist", ...options });
+  }
+
+  async initialize() {
+    this.setColumns([
+      new FormColumn({ name: "id", label: "编号" }),
+      new FormColumn({ name: "ipAddress", label: "IP地址", required: true }),
+    ]);
+  }
+}
+
+defineDataForm(IPWhitelistForm);

package/src/dataview/ip-white-list/IPWhitelistTable.ts

@@ -0,0 +1,79 @@
+import {
+  ActionButton,
+  DataTable,
+  DeleteButton,
+  EditButton,
+  TableActionColumn,
+  TableColumn,
+  Messager,
+} from "@maketribe/dm";
+import { defineDataTable } from "../../define-data-table";
+import { IPWhitelist } from "./IPWhitelistForm";
+
+export class IPWhitelistTable<T = IPWhitelist, F = T> extends DataTable<T, F> {
+  constructor(options = {}) {
+    super({ name: "ms-access-ip-whitelist", ...options });
+  }
+
+  async 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(IPWhitelistTable);

package/src/dataview/ip-white-list/index.ts

@@ -0,0 +1,2 @@
+export * from "./IPWhitelistForm";
+export * from "./IPWhitelistTable";

package/src/dataview/material/MaterialMan.ts

@@ -19,6 +19,7 @@ export class MaterialMan {
   currentMaterialTypeId: MaterialType["value"] | null;
 
   materialTypes: MaterialType[] = [];
+  materialTypeValues: MaterialType["value"][] = [];
 
   materialGroupTable: MaterialGroupTable;
   materialTable: MaterialTable;
@@ -144,6 +145,22 @@ export class MaterialMan {
     this.initd = true;
   }
 
+  setAllowAccessMaterialTypeValues(
+    materialTypeValues: MaterialType["value"][]
+  ) {
+    this.materialTypeValues = materialTypeValues;
+  }
+
+  getMaterialType() {
+    if (!this.materialTypeValues.length) {
+      return this.materialTypes;
+    }
+
+    return this.materialTypes.filter((materialType) =>
+      this.materialTypeValues.includes(materialType.value)
+    );
+  }
+
   setCurrentMaterialGroupId(materialGoupId: MaterialGroupNode["id"] | null) {
     this.currentMaterialGroupId = materialGoupId;
 

package/src/dataview/material/MaterialTable.ts

@@ -92,7 +92,7 @@ export class MaterialTable
     return {
       id: item.id,
       materialGroupId: item.materialGroupId || null,
-      type: item.type || "string",
+      type: item.type ? `${item.type}` : "1",
       desc: item.desc || "",
       path: item.path || "",
     };