@maketribe/ms-app 3.0.30 → 3.0.32

package/src/page/index/dv/ms-role/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <DefaultSingleListDialogPage :data-table="roleTable" />
+
+  <ElDialog v-model="isShowDialog" appendToBody width="80%">
+    <MKRolePermissionConfig
+      :rolePermissionConfigTable="rolePermissionConfigTable"
+    />
+  </ElDialog>
+</template>
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import { ElDialog } from "element-plus";
+import DefaultSingleListDialogPage from "../default/single/list/dialog.vue";
+import { RoleTable, RolePermissionConfigTable } from "../../../../dataview";
+import { MKRolePermissionConfig } from "../../../../components";
+import { DataModelDefines } from "../../../../core";
+
+const roleTable = reactive(
+  DataModelDefines.instance.getDataTable("ms-role")!
+) as RoleTable;
+const rolePermissionConfigTable = reactive(
+  new RolePermissionConfigTable()
+) as RolePermissionConfigTable;
+
+const isShowDialog = ref(false);
+
+roleTable.configRolePermissionEvent.on(({ item }) => {
+  rolePermissionConfigTable.selectRolePermission(item);
+
+  isShowDialog.value = true;
+});
+</script>

package/src/page/index/material/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <MKMaterialList :material-man="materialMan" />
+</template>
+<script setup lang="ts">
+import { reactive } from "vue";
+import { MaterialMan } from "../../../dataview";
+import { MKMaterialList } from "../../../components";
+import { MSAppClient, MaterialComponents } from "../../../core";
+
+const materialMan = reactive(
+  new MaterialMan({
+    components: new MaterialComponents(),
+    httpRequest: MSAppClient.instance!.httpRequest,
+  })
+) as MaterialMan;
+</script>

package/src/page/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { MKLayout } from "../layouts";
+</script>
+
+<template>
+  <MKLayout>
+    <RouterView />
+  </MKLayout>
+</template>

package/src/page/login/index.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="login-wrap">
+    <div class="login-bg">
+      <div class="login-bg-block"></div>
+      <div class="login-bg-block"></div>
+    </div>
+    <div class="login-root">
+      <div class="login-main">
+        <div class="form-container">
+          <div class="form-wrap">
+            <div class="form-title" v-if="!forgotPassword">
+              账号登录
+              <span class="notify">
+                没有账号？<ElButton
+                  link
+                  class="operaBtn"
+                  @click="router.push('/signup')"
+                >
+                  申请使用
+                </ElButton>
+              </span>
+            </div>
+            <div class="form-title" v-else>账号重置</div>
+            <ElForm
+              :model="loginFormData"
+              :rules="rules"
+              size="large"
+              ref="formEl"
+              @submit.native.prevent
+            >
+              <ElFormItem prop="account">
+                <ElInput
+                  v-model="loginFormData.account"
+                  placeholder="帐号"
+                  @keyup.enter.native.prevent="verifyHandle"
+                />
+              </ElFormItem>
+              <ElFormItem prop="password" v-if="!forgotPassword">
+                <ElInput
+                  v-model="loginFormData.password"
+                  type="password"
+                  placeholder="密码"
+                  @keyup.enter.native.prevent="verifyHandle"
+                />
+              </ElFormItem>
+              <ElFormItem>
+                <ElRow style="width: 100%">
+                  <ElCol :span="12">
+                    <ElButton
+                      link
+                      class="operaBtn"
+                      @click="forgotPassword = !forgotPassword"
+                      >{{
+                        forgotPassword ? "返回登陆" : "忘记密码？"
+                      }}</ElButton
+                    >
+                  </ElCol>
+                </ElRow>
+              </ElFormItem>
+              <ElFormItem>
+                <ElButton
+                  type="primary"
+                  style="width: 100%"
+                  :loading="loading"
+                  @click="verifyHandle"
+                  :disabled="loginDisabled"
+                  v-if="!forgotPassword"
+                >
+                  登陆
+                </ElButton>
+                <ElButton
+                  type="primary"
+                  style="width: 100%"
+                  :loading="loading"
+                  @click="verifyHandle"
+                  :disabled="resetDisabled"
+                  v-else
+                >
+                  重置
+                </ElButton>
+              </ElFormItem>
+            </ElForm>
+            <ElDivider></ElDivider>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <MKVerifyDialog
+    ref="verifyDialog"
+    :scene="scene"
+    v-model:visible="verifyVisible"
+    v-if="verifyVisible"
+    @confirm="handleLogin"
+  />
+</template>
+
+<script setup lang="ts">
+import { ElMessage, ElForm, ElFormItem } from "element-plus";
+import { useMSAppClient } from "../../composables";
+import { MKVerifyDialog } from "../../components";
+import { Ref, computed, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
+
+defineOptions({
+  mkRoute: {
+    name: "login",
+    path: "/login",
+    meta: {
+      isAuthorization: false,
+    },
+  },
+});
+
+const verifyDialog: Ref<{ fail: () => void } | null> = ref(null);
+
+// 记住登陆状态
+const rememberLoginState = ref(false);
+
+const formEl: Ref<any> = ref(null);
+
+const system = useMSAppClient()!;
+
+const router = useRouter();
+
+const loading = ref(false);
+
+const loginDisabled = computed(
+  () => !loginFormData.account || !loginFormData.password
+);
+const resetDisabled = computed(() => !loginFormData.account);
+
+const forgotPassword = ref(false);
+const scene = computed(() =>
+  forgotPassword.value ? "ModifyPassword" : "Login"
+);
+
+const rules = {
+  account: [{ required: true, message: "账号必填" }],
+  password: [{ required: true, message: "密码必填" }],
+};
+
+const loginFormData = reactive({
+  account: "",
+  password: "",
+  vCode: "code",
+});
+const verifyVisible = ref(false);
+
+const verifyHandle = async () => {
+  const result = await formEl.value?.validate();
+  if (!result) {
+    return;
+  }
+  verifyVisible.value = true;
+};
+
+const handleLogin = async (v: string) => {
+  loginFormData.vCode = v;
+  try {
+    loading.value = true;
+    if (forgotPassword.value) {
+      const { data } = await system.modifyPassword(
+        loginFormData.account,
+        loginFormData.vCode
+      );
+      if (data.code !== 200) {
+        ElMessage.error(data.msg || "重置邮箱失败！");
+        return;
+      }
+      ElMessage.success("重置密码邮件已发送到邮箱");
+      forgotPassword.value = false;
+    } else {
+      const { data } = await system.login(
+        loginFormData.account,
+        loginFormData.password,
+        loginFormData.vCode
+      );
+
+      if (data.code !== 200) {
+        ElMessage.error(data.msg || "登录失败!");
+        return;
+      }
+      verifyVisible.value = false;
+
+      router.push({ path: "/" });
+    }
+  } catch (e) {
+    ElMessage.error("登录失败");
+  } finally {
+    verifyVisible.value = false;
+    loading.value = false;
+  }
+};
+</script>

package/src/page/signup/index.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="login-wrap">
+    <div class="login-bg">
+      <div class="login-bg-block"></div>
+      <div class="login-bg-block"></div>
+    </div>
+    <div class="login-root">
+      <div class="login-main">
+        <div class="form-container">
+          <div class="form-wrap">
+            <div class="form-title" v-if="!forgotPassword">
+              账号注册
+              <span class="notify">
+                已有账号？<ElButton
+                  link
+                  class="operaBtn"
+                  @click="router.push('/login')"
+                >
+                  返回登录
+                </ElButton>
+              </span>
+            </div>
+            <div class="form-title" v-else>账号重置</div>
+            <ElForm
+              :model="signFormData"
+              :rules="rules"
+              size="large"
+              ref="formEl"
+            >
+              <ElFormItem prop="account">
+                <ElInput v-model="signFormData.account" placeholder="帐号" />
+              </ElFormItem>
+              <ElFormItem prop="email">
+                <ElInput v-model="signFormData.email" placeholder="邮箱" />
+              </ElFormItem>
+              <ElFormItem prop="name">
+                <ElInput v-model="signFormData.name" placeholder="姓名" />
+              </ElFormItem>
+              <ElFormItem prop="nickName">
+                <ElInput v-model="signFormData.nickName" placeholder="昵称" />
+              </ElFormItem>
+              <ElFormItem prop="phone">
+                <ElInput v-model="signFormData.phone" placeholder="手机号" />
+              </ElFormItem>
+
+              <ElFormItem>
+                <ElButton
+                  type="primary"
+                  style="width: 100%"
+                  :loading="loading"
+                  @click="verifyHandle"
+                >
+                  提交申请
+                </ElButton>
+              </ElFormItem>
+            </ElForm>
+            <ElDivider></ElDivider>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <MKVerifyDialog
+    :scene="scene"
+    v-model:visible="verifyVisible"
+    v-if="verifyVisible"
+    @verifySuccessful="handleSign"
+  />
+</template>
+
+<script setup lang="ts">
+import { Ref, computed, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
+import { FormRules } from "element-plus";
+import { Messager } from "@maketribe/dm";
+import { useHttpRequest } from "../../composables";
+import { MKVerifyDialog } from "../../components";
+
+defineOptions({
+  mkRoute: {
+    name: "signup",
+    path: "/signup",
+    meta: {
+      isAuthorization: false,
+    },
+  },
+});
+
+const formEl: Ref<any> = ref(null);
+
+const router = useRouter();
+
+const httpRequest = useHttpRequest()!;
+
+const loading = ref(false);
+
+const verifyVisible = ref(false);
+
+const forgotPassword = ref(false);
+const scene = computed(() =>
+  forgotPassword.value ? "ModifyPassword" : "Login"
+);
+const rules: FormRules = {
+  account: [{ required: true, message: "账号必填" }],
+  email: [
+    {
+      required: true,
+      trigger: "change",
+      validator: (rule, value, callback) => {
+        if (!value) {
+          callback(new Error("邮箱必填"));
+        } else if (
+          !/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)
+        ) {
+          callback(new Error("邮箱规则不符"));
+        } else {
+          callback();
+        }
+      },
+    },
+  ],
+  name: [{ required: true, message: "姓名必填" }],
+};
+
+const verifyHandle = async () => {
+  const result = await formEl.value.validate();
+  if (!result) {
+    return;
+  }
+  verifyVisible.value = true;
+};
+
+const signFormData = reactive({
+  account: "",
+  email: "",
+  name: "",
+  nickName: "",
+  phone: "",
+});
+
+const handleSign = async (v: string) => {
+  const result = await httpRequest.post(
+    "/api/dv/ms-member/apply/account",
+    signFormData
+  );
+  if (result.data.code != 200) {
+    Messager.instance.error(result.data.msg || "注册失败");
+    return;
+  }
+  verifyVisible.value = false;
+  Messager.instance.success({ message: "注册成功,请联系管理员通过验证" });
+};
+
+// 记住登陆状态
+const rememberLoginState = ref(false);
+</script>

package/src/router-middleware/auth.ts

@@ -0,0 +1,31 @@
+import { RouteLocationNormalized, RouteLocationRaw } from "vue-router";
+import type { MSAppClient } from "../core";
+
+export const authBeforeEach = async (
+  msAppClient: MSAppClient,
+  to: RouteLocationNormalized,
+  from: RouteLocationNormalized
+): Promise<RouteLocationRaw | void> => {
+  if (to.meta.isAuthorization === false) {
+    return;
+  }
+
+  let userSession = msAppClient.userSession;
+
+  if (!userSession) {
+    try {
+      await msAppClient.loadCurrentUserSession();
+
+      userSession = msAppClient.userSession;
+
+      if (!userSession) {
+        return { name: "login" };
+      }
+
+      // 因为登陆成功会添加用户可以访问的路由，这里给到vue-router去重新resolve
+      return { path: to.fullPath };
+    } catch (e) {
+      return { name: "login" };
+    }
+  }
+};

package/src/router-middleware/index.ts

@@ -0,0 +1 @@
+export * from "./auth";

package/src/tokens/index.ts

@@ -0,0 +1 @@
+export * from "./ms-app-client";

package/src/tokens/ms-app-client.ts

@@ -0,0 +1,10 @@
+import { InjectionKey } from "vue";
+import { MSAppClient } from "../core";
+
+export interface MSAppClientContext {
+  msAppClient: MSAppClient;
+}
+
+export const MSAPPCLIENT_CONTEXT_KEY: InjectionKey<MSAppClientContext> = Symbol(
+  "msAppClientContextKey"
+);

package/src/utils.ts

@@ -0,0 +1,233 @@
+import { encodePath } from "ufo";
+
+enum SegmentParserState {
+  initial,
+  static,
+  dynamic,
+  optional,
+  catchall,
+}
+
+interface ScannedFile {
+  path: string;
+  module: any;
+}
+
+enum SegmentTokenType {
+  static,
+  dynamic,
+  optional,
+  catchall,
+}
+
+interface SegmentToken {
+  type: SegmentTokenType;
+  value: string;
+}
+
+export function generateRoutesFromFiles(files: ScannedFile[]) {
+  const routes: any[] = [];
+
+  for (const file of files) {
+    const segments = file.path.split("/");
+
+    const route: Record<string, any> = {
+      meta: {},
+      ...file.module.mkRoute,
+      key: "",
+      path: "",
+      component: async () => file.module,
+      children: [],
+    };
+
+    let parent = routes;
+
+    for (const segment of segments) {
+      const tokens = parseSegment(segment);
+      const segmentName = tokens.map(({ value }) => value).join("");
+
+      route.key += (route.key && "/") + segmentName;
+
+      const path = route.path + getRoutePath(tokens).replace(/\/index$/, "/");
+      const child = parent.find(
+        (parentRoute) =>
+          parentRoute.key === route.key && parentRoute.path === path
+      );
+
+      if (child && child.children) {
+        parent = child.children;
+        route.path = "";
+      } else if (segmentName === "index" && !route.path) {
+        route.path += "/";
+      } else if (segmentName !== "index") {
+        route.path += getRoutePath(tokens);
+      }
+    }
+
+    route.path = file.module.mkRoute?.path || route.path;
+
+    parent.push(route);
+  }
+
+  return prepareRoutes(routes);
+}
+
+function getRoutePath(tokens: SegmentToken[]) {
+  return tokens.reduce((path, token) => {
+    return (
+      path +
+      (token.type === SegmentTokenType.optional
+        ? `:${token.value}?`
+        : token.type === SegmentTokenType.dynamic
+        ? `:${token.value}()`
+        : token.type === SegmentTokenType.catchall
+        ? `:${token.value}(.*)*`
+        : encodePath(token.value).replace(/:/g, "\\:"))
+    );
+  }, "/");
+}
+
+const PARAM_CHAR_RE = /[\w\d_.]/;
+
+function parseSegment(segment: string) {
+  let state: SegmentParserState = SegmentParserState.initial;
+
+  let i = 0;
+
+  let buffer = "";
+  const tokens: SegmentToken[] = [];
+
+  function consumeBuffer() {
+    if (!buffer) {
+      return;
+    }
+
+    if (state === SegmentParserState.initial) {
+      throw new Error("错误的状态");
+    }
+
+    tokens.push({
+      type:
+        state === SegmentParserState.static
+          ? SegmentTokenType.static
+          : state === SegmentParserState.dynamic
+          ? SegmentTokenType.dynamic
+          : state === SegmentParserState.optional
+          ? SegmentTokenType.optional
+          : SegmentTokenType.catchall,
+      value: buffer,
+    });
+
+    buffer = "";
+  }
+
+  while (i < segment.length) {
+    const c = segment[i];
+
+    switch (state) {
+      case SegmentParserState.initial:
+        buffer = "";
+
+        if (c === "[") {
+          state = SegmentParserState.dynamic;
+        } else {
+          i--;
+          state = SegmentParserState.static;
+        }
+
+        break;
+      case SegmentParserState.static:
+        if (c === "[") {
+          consumeBuffer();
+          state = SegmentParserState.dynamic;
+        } else {
+          buffer += c;
+        }
+        break;
+      case SegmentParserState.catchall:
+      case SegmentParserState.dynamic:
+      case SegmentParserState.optional:
+        if (buffer === "...") {
+          buffer = "";
+          state = SegmentParserState.catchall;
+        }
+
+        if (c === "[" && state === SegmentParserState.dynamic) {
+          state = SegmentParserState.optional;
+        }
+
+        if (
+          c === "]" &&
+          (state !== SegmentParserState.optional || segment[i - 1] === "]")
+        ) {
+          if (!buffer) {
+            throw new Error("空参数");
+          }
+          consumeBuffer();
+          state = SegmentParserState.initial;
+        } else if (PARAM_CHAR_RE.test(c)) {
+          buffer += c;
+        }
+        break;
+    }
+
+    i++;
+  }
+
+  if (state === SegmentParserState.dynamic) {
+    throw new Error(`Unfinished param "${buffer}"`);
+  }
+
+  consumeBuffer();
+
+  return tokens;
+}
+
+function findRouteByKey(key: string, routes: any[]): any | undefined {
+  for (const route of routes) {
+    if (route.key === key) {
+      return route;
+    }
+  }
+  return findRouteByKey(key, routes);
+}
+
+function prepareRoutes(routes: any[], parent?: any, keys = new Set<string>()) {
+  for (const route of routes) {
+    // Remove -index
+    if (route.key) {
+      route.key = route.key.replace(/\/index$/, "").replace(/\//g, "-");
+
+      if (keys.has(route.key)) {
+        const existingRoute = findRouteByKey(route.key, routes);
+        const extra = existingRoute?.name
+          ? `is the same as \`${existingRoute.file}\``
+          : "is a duplicate";
+        console.warn(
+          `Route name generated for \`${route.file}\` ${extra}. You may wish to set a custom name using \`definePageMeta\` within the page file.`
+        );
+      }
+    }
+
+    route.path = route.path.replace(/\/\//g, "/");
+
+    // Remove leading / if children route
+    if (parent && route.path.startsWith("/")) {
+      route.path = route.path.slice(1);
+    }
+
+    if (route.children?.length) {
+      route.children = prepareRoutes(route.children, route, keys);
+    }
+
+    // if (route.children?.find((childRoute: any) => childRoute.path === "")) {
+    //   delete route.key;
+    // }
+
+    if (route.key) {
+      keys.add(route.key);
+    }
+  }
+
+  return routes;
+}