@maketribe/ms-app 3.0.0 → 3.0.3

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;
+}

package/gulpfile.ts

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

package/rollup.config.mjs

@@ -1,11 +0,0 @@
-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/style/components/image-select.scss

@@ -1,13 +0,0 @@
-.img-select {
-  display: flex;
-  &-content {
-    width: 200px;
-    cursor: pointer;
-  }
-  &-icon {
-    border: 1px dashed var(--el-input-border-color, var(--el-border-color));
-    cursor: pointer;
-    width: 200px;
-    height: 200px;
-  }
-}

package/style/components/index.scss

@@ -1,9 +0,0 @@
-@use "./material-group.scss";
-@use "./material-item.scss";
-@use "./material-list.scss";
-@use "./role-permission-config.scss";
-@use "./menu-permission-table.scss";
-@use "./material-select.scss";
-@use "./image-select.scss";
-@use "./verify-dialog.scss";
-@use "./member-table.scss";

package/style/components/material-group.scss

@@ -1,38 +0,0 @@
-.mk-material-group {
-  display: flex;
-  flex-direction: column;
-  width: 200px;
-  height: 100%;
-
-  &__header {
-    height: 46px;
-    padding: 0 10px;
-    border-bottom: var(--mk-material-list-border);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    &-title{
-      line-height: 46px;
-    }
-  }
-
-  &__main {
-    flex: 1;
-    height: 100%;
-    overflow: hidden;
-  }
-
-  &__footer {
-    text-align: center;
-  }
-
-  &__tools {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    &-item {
-      margin-right: 5px;
-    }
-  }
-}

package/style/components/material-item.scss

@@ -1,20 +0,0 @@
-.mk-material-item {
-  --el-card-padding: 0;
-
-  position: relative;
-  display: inline-block;
-  width: 200px;
-  border: 1px solid #e4e7ed;
-  border-radius: 0;
-
-  &__preview {
-    position: relative;
-    height: 150px;
-    background: #f5f7fa;
-  }
-
-  &__title {
-    font-size: 12px;
-    padding: 5px 10px;
-  }
-}

package/style/components/material-list.scss

@@ -1,67 +0,0 @@
-
-
-
-.mk-material-list {
-  --mk-material-list-border: 1px solid #f6f6f6;
-  background-color: #fff;
-
-  display: flex;
-  height: 100%;
-  border: var(--mk-material-list-border);
-
-  &__main {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    border-left: var(--mk-material-list-border);
-  }
-
-  &__header {
-    display: flex;
-    justify-content: space-between;
-    height: 46px;
-    line-height: 46px;
-    padding: 0 10px;
-    border-bottom: var(--mk-material-list-border);
-  }
-
-  &__body {
-    height: 0;
-    flex: 1 0 0px;
-    .el-scrollbar {
-      height: calc(100% - 47px);
-    }
-  }
-
-  &__footer {
-   display: flex;
-   justify-content: flex-end;
-   padding-right: 10px;
-  }
-
-  &__wrapper {
-    padding: 10px;
-  }
-
-  &__types {
-    display: flex;
-    height: 100%;
-  }
-
-  &__type {
-    height: 100%;
-    padding: 0 5px;
-    cursor: pointer;
-    &.is-active {
-      border-bottom: 1px solid #40a9ff;
-    }
-  }
-
-  &__item {
-    margin: 5px;
-
-    &.is-current {
-      border-color: #40a9ff;
-    }
-  }
-}

package/style/components/material-select.scss

@@ -1,23 +0,0 @@
-.mk-material-select {
-  &__list {
-    height: 500px !important;
-  }
-
-  .mk-material-list {
-    &__item {
-      cursor: pointer;
-    }
-  }
-
-  .el-dialog__header {
-    display: none;
-  }
-
-  .el-dialog__body {
-    padding: 0;
-  }
-
-  .el-dialog__footer {
-    padding: 10px;
-  }
-}

package/style/components/member-table.scss

@@ -1,9 +0,0 @@
-// .dialogClass {
-//   height: 70%;
-//   display: flex;
-//   flex-direction: column;
-
-//   .el-dialog__body {
-//     height: 100%;
-//   }
-// }

package/style/components/menu-permission-table.scss

@@ -1,43 +0,0 @@
-.mk-menu-permission {
-  display: flex;
-  height: 100%;
-
-  &__permission {
-    width: 0;
-    flex: 1;
-
-    &-table {
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-
-      .el-table {
-        flex: 1;
-      }
-    }
-  }
-
-  &__menu {
-    width: 370px;
-    display: flex;
-    flex-direction: column;
-
-    &-main {
-      flex: 1;
-      height: 0;
-    }
-
-    &-footer {
-      margin-top: 10px;
-      text-align: center;
-    }
-  }
-}
-.dataFormPageDialog{
-  height: 70%;
-  display: flex;
-  flex-direction: column;
-  .el-dialog__body{
-    height: 100%;
-  }
-}

package/style/components/role-permission-config.scss

@@ -1,18 +0,0 @@
-.role-permission-config {
-  &__permission-point,
-  &__menu {
-    .el-checkbox__label {
-      flex: 1;
-      width: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  &__permission-point {
-    width: 100px;
-  }
-  &__menu {
-    width: 100%;
-  }
-}

package/style/components/verify-dialog.scss

@@ -1,16 +0,0 @@
-.mk-verify-dialog {
-  &__wrapper {
-    width: 200px;
-    height: 200px;
-    border-radius: 50%;
-    overflow: hidden;
-    margin: auto;
-  }
-
-  &__image {
-    width: 200px;
-    height: 200px;
-    background-position: center center;
-    background-size: 320px 320px;
-  }
-}

package/style/index.scss

@@ -1,4 +0,0 @@
-@use "@maketribe/dm-ui/dist/style/src/index.scss" as *;
-@use "./components/index.scss" as *;
-@use "./layouts" as *;
-@use "./page/login.scss" as *;

package/style/layouts/index.scss

@@ -1 +0,0 @@
-@use "./manager-system";

package/style/layouts/manager-system/aside.scss

@@ -1,116 +0,0 @@
-.mk-aside {
-  display: flex;
-  height: 100%;
-  user-select: none;
-
-  &-bar {
-    display: flex;
-    flex-direction: column;
-    width: 64px;
-    height: 100%;
-    background-color: #282c34;
-    color: white;
-
-    .el-scrollbar__bar {
-      display: none;
-    }
-
-    &__logo {
-      display: flex;
-      height: 64px;
-      padding: 10px;
-      box-sizing: border-box;
-
-      .mk-logo {
-        flex: 1;
-        background-size: contain;
-      }
-    }
-
-    &__icons {
-      flex: 1;
-      height: 0;
-    }
-
-    &__item {
-      position: relative;
-      padding: 5px;
-      width: 64px;
-      height: 64px;
-      box-sizing: border-box;
-
-      cursor: pointer;
-
-      &.is-active {
-        .mk-aside-bar__item-main {
-          background-color: #409eff;
-        }
-      }
-
-      &-main {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 54px;
-        height: 54px;
-        font-size: 14px;
-        text-align: center;
-        white-space: nowrap;
-        overflow: hidden;
-        box-sizing: border-box;
-        border-radius: 5px;
-      }
-
-      &-icon {
-        display: block !important;
-        margin-bottom: 4px;
-      }
-
-      &-label {
-        font-size: 12px;
-      }
-    }
-  }
-
-  &-panel {
-    --el-text-color-primary: #515a6e;
-    width: 200px;
-    color: #515a6e;
-    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-    background-color: white;
-    transition: var(--el-transition-all);
-    overflow: hidden;
-
-    &.is-collapse {
-      width: 0;
-    }
-
-    &__title {
-      margin-top: 5px;
-      padding: 0 15px;
-      font-size: 20px;
-      line-height: 55px;
-      text-align: center;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    &__wrapper {
-      width: 200px;
-    }
-
-    &__divider {
-      margin: 4px 0 15px 0;
-      white-space: nowrap;
-
-      .el-divider__text {
-        font-weight: 400;
-      }
-    }
-
-    &__content {
-      padding: 0 10px;
-    }
-  }
-}