@maketribe/ms-app 3.0.0

package/style/components/index.scss

@@ -0,0 +1,9 @@
+@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

@@ -0,0 +1,38 @@
+.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

@@ -0,0 +1,20 @@
+.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

@@ -0,0 +1,67 @@
+
+
+
+.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

@@ -0,0 +1,23 @@
+.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

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

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

@@ -0,0 +1,43 @@
+.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

@@ -0,0 +1,18 @@
+.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

@@ -0,0 +1,16 @@
+.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

@@ -0,0 +1,4 @@
+@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

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

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

@@ -0,0 +1,116 @@
+.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;
+    }
+  }
+}

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

@@ -0,0 +1,129 @@
+.mk-header {
+  background-color: white;
+  box-shadow: 0 -1px 4px rgba(0, 21, 41, 0.08);
+
+  &-tools {
+    display: flex;
+    align-items: center;
+
+    &__item {
+      margin-right: 10px;
+      cursor: pointer;
+    }
+  }
+
+  &-breadcrumb {
+    .mk-svg-icon {
+      margin-right: 5px;
+    }
+  }
+
+  &-nav {
+    display: flex;
+    height: 64px;
+    padding: 0 20px;
+    border-bottom: 1px solid #f6f6f6;
+    justify-content: space-between;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 14px;
+    user-select: none;
+
+    .mk-svg-icon {
+      font-size: 16px;
+    }
+
+    &__main {
+      display: flex;
+      align-items: center;
+    }
+
+    &__tools {
+      display: flex;
+      align-items: center;
+    }
+
+    &__user {
+      cursor: pointer;
+      &-info {
+        box-shadow: none;
+        outline: none;
+      }
+    }
+
+    &__arrow {
+      padding: 5px;
+      font-size: 10px !important;
+    }
+
+    &__aside-fold {
+      cursor: pointer;
+      color: var(--el-color-grey);
+      font-size: 0;
+      margin-right: 20px;
+    }
+  }
+
+  &-tabs {
+    display: flex;
+    width: 100%;
+    height: 40px;
+    padding: 0 20px;
+    box-sizing: border-box;
+
+    .el-tabs {
+      width: 100%;
+
+      .mk-svg-icon {
+        margin-right: 5px;
+        flex-shrink: 0;
+      }
+
+      .el-tabs__item {
+        padding: 0 20px !important;
+        $maskUrl: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==");
+        mask: $maskUrl;
+        mask-size: 100% 100%;
+        flex-shrink: 0;
+
+        + .el-tabs__item {
+          margin-left: -18px;
+        }
+
+        .el-icon.is-icon-close {
+          width: 0;
+          flex-shrink: 0;
+        }
+
+        &:hover {
+          color: var(--el-text-color-primary);
+          background-color: #dee1e6;
+
+          .el-icon.is-icon-close {
+            width: 1em;
+          }
+        }
+
+        &.is-active {
+          color: var(--el-color-primary);
+          background-color: var(--el-color-primary-light-9);
+
+          .el-icon.is-icon-close {
+            width: 1em;
+          }
+        }
+      }
+
+      &__header {
+        margin: 0;
+      }
+
+      &__nav-wrap::after {
+        display: none;
+      }
+
+      &__active-bar {
+        display: none;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+@use "./menu.scss";
+@use "./aside.scss";
+@use "./header.scss";
+@use "./manager-system.scss";

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

@@ -0,0 +1,26 @@
+.mk-manager-system {
+  display: flex;
+  height: 100%;
+  background-color: rgb(246, 248, 249);
+
+  &__aside {
+    height: 100%;
+  }
+
+  &__main {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    width: 0;
+  }
+
+  &__header {
+    z-index: 1;
+  }
+
+  &__content {
+    flex: 1;
+    height: 0;
+    padding: 10px;
+  }
+}

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

@@ -0,0 +1,47 @@
+.mk-menu {
+  border: none;
+
+  --el-menu-item-height: 50px;
+  --el-menu-level-padding: 17px;
+  --el-menu-icon-width: 14px;
+
+  .el-sub-menu {
+    & + .el-menu-item,
+    & + .el-sub-menu,
+    .el-menu-item:first-child,
+    .el-sub-menu:first-child {
+      margin-top: 5px;
+    }
+
+    &__title {
+      &:hover {
+        color: var(--el-color-primary);
+      }
+    }
+  }
+
+  .el-menu-item {
+    border-radius: 5px;
+
+    & + .el-menu-item,
+    & + .el-sub-menu {
+      margin-top: 5px;
+    }
+
+    &.is-active {
+      background-color: var(--el-color-primary-light-9);
+    }
+
+    &:hover {
+      color: var(--el-color-primary);
+    }
+  }
+
+  &-item {
+    & &__icon {
+      margin-right: 3px;
+      width: 1em;
+      font-size: inherit;
+    }
+  }
+}

package/style/page/login.scss

@@ -0,0 +1,107 @@
+.login-wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  overflow: auto;
+  z-index: 9;
+
+  > .login-bg {
+    background-color: #fcfcfc;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    overflow: hidden;
+
+    > .login-bg-block {
+      width: 80vh;
+      height: 200%;
+      background-color: #0078f5;
+      position: absolute;
+      top: 0;
+
+      &:nth-child(1) {
+        left: 100%;
+        transform-origin: 0% 50%;
+        transform: rotate(-30deg) translate(0%, -50%);
+      }
+      &:nth-child(2) {
+        right: 100%;
+        transform-origin: 0% 0%;
+        transform: rotate(-30deg) translate(-10%, 0%);
+      }
+    }
+  }
+
+  .operaBtn {
+    color: #0078f5;
+  }
+
+  .notify {
+    color: #202d40;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.login-root {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  min-height: 100%;
+  align-items: center;
+  background-color: initial;
+  z-index: 1;
+  padding: 5%;
+  box-sizing: border-box;
+}
+
+.login-main {
+  position: relative;
+  width: 100%;
+  min-width: 320px;
+}
+
+.form-container {
+  transform-origin: top;
+  display: flex;
+  justify-content: center;
+}
+
+.form-wrap {
+  width: 440px;
+  max-width: calc(100vw - 28px);
+  padding: 30px;
+  position: relative;
+  overflow: hidden;
+  background: hsla(0, 0%, 95%, 0.5);
+  -webkit-backdrop-filter: blur(30px);
+  backdrop-filter: blur(30px);
+}
+
+.form-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 33px;
+  margin: 0 0 30px;
+  color: #202d40;
+  font-size: 20px;
+  font-weight: 600;
+
+  span {
+    height: 20px;
+    color: #8592a5;
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  a {
+    color: #06f;
+  }
+}

package/tsconfig.build.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "paths": {
+      "@maketribe/*": ["packages/*"]
+    }
+  }
+}