@maketribe/ms-app 3.0.6 → 3.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maketribe/ms-app",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "description": "",
   "main": "dist/cjs",
   "files": [
@@ -20,8 +20,8 @@
     "vue-router": "^4.2.4",
     "@maketribe/dm": "^3.0.4",
     "@maketribe/utils": "^1.1.1",
-    "@maketribe/locale": "^1.0.5",
-    "@maketribe/request": "^1.1.2"
+    "@maketribe/request": "^1.1.2",
+    "@maketribe/locale": "^1.0.5"
   },
   "scripts": {
     "build": "npm run clean && npm run build:js && npm run build:type && npm run build:style",

package/src/components/data-model/data-form/data-form.tsx

@@ -58,7 +58,7 @@ export default defineComponent({
         await dataForm.init();
 
         if (unref(dataForm).autoReset) {
-          unref(dataForm).resetWidthOriginalData();
+          unref(dataForm).reset();
         }
 
         const disposable = new Disposable();

package/src/components/data-model/data-form/views/form/form.tsx

@@ -7,7 +7,13 @@ import {
   ref,
   unref,
 } from "vue";
-import { ElDivider, ElForm, FormItemRule, FormRules } from "element-plus";
+import {
+  ElDivider,
+  ElForm,
+  FormItemRule,
+  FormRules,
+  FormContext,
+} from "element-plus";
 import { formProps } from "./form-options";
 import { FormColumn, FormModel } from "@maketribe/dm";
 import MKDataFormItem from "../../data-form-item";
@@ -19,7 +25,9 @@ export default defineComponent({
   setup(props, { slots }) {
     const formUID = uid++;
 
-    const formEl = ref<FormModel | null>(null);
+    const formEl = ref<FormContext | null>(null);
+    // formEl.value.vali
+    (window as any).a = formEl;
 
     const dataForm = computed(() => props.dataForm);
 
@@ -82,7 +90,10 @@ export default defineComponent({
       unref(dataForm).formModels.push({
         id: formUID,
         validate: async () => {
-          return unref(formEl)?.validate() ?? false;
+          return unref(formEl)?.validateField() ?? false;
+        },
+        reset: () => {
+          unref(formEl)?.resetFields();
         },
       });
     });

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

@@ -16,9 +16,7 @@ export default defineComponent({
     });
 
     const handleSelectClick = async (e: MouseEvent) => {
-      const response = await MKMaterialSelect({
-        allowMaterialTypeValues: ["1"],
-      });
+      const response = await MKMaterialSelect();
 
       if (response.success) {
         modelValue.value = response.path;

package/src/components/markdown-editor/markdown-editor.tsx

@@ -68,9 +68,7 @@ export default defineComponent({
             tip: "素材",
             icon: `<svg><use xlink:href="#icon-image" /></svg>`,
             click: async () => {
-              const response = await MKMaterialSelect({
-                allowMaterialTypeValues: ["1"],
-              });
+              const response = await MKMaterialSelect();
 
               if (!response.success) {
                 return;

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

@@ -32,10 +32,12 @@ async function MaterialSelect(
   options?: MKMaterialSelectOptions,
   appContext?: AppContext
 ) {
+  options?.allowMaterialTypeValues;
   return new Promise((resolve, reject) => {
     showDialog(
       {
         ...options,
+        allowMaterialTypeValues: options?.allowMaterialTypeValues ?? ["1"],
         onMaterialChange: (material: Material) => {
           resolve({ success: true, data: material, path: material.path });
         },

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

@@ -47,9 +47,7 @@ export default defineComponent({
           editor.ui.registry.addButton("material", {
             icon: "image",
             onAction: async () => {
-              const response = await MKMaterialSelect({
-                allowMaterialTypeValues: ["1"],
-              });
+              const response = await MKMaterialSelect();
 
               if (!response.success) {
                 return;

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/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/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 || "",
     };