@maketribe/ms-app 3.0.4 → 3.0.6

package/dist/style/src/components/material-item.scss

@@ -16,5 +16,8 @@
   &__title {
     font-size: 12px;
     padding: 5px 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 }

package/dist/style/src/components/pagination.scss

@@ -0,0 +1,16 @@
+.mk-pagination {
+  margin-top: 8px;
+  display: flex;
+
+  &__left {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    font-size: 12px;
+
+    b {
+      padding: 0 3px;
+      color: #40a9ff;
+    }
+  }
+}

package/dist/style/src/components/svg-icon.scss

@@ -0,0 +1,15 @@
+.mk-svg-icon {
+  display: inline-flex;
+
+  svg {
+    width: 1em;
+    height: 1em;
+    fill: currentColor;
+    overflow: hidden;
+    vertical-align: -0.15em;
+  }
+
+  .el-icon {
+    display: inline;
+  }
+}

package/dist/style/src/components/table/column-select.scss

@@ -0,0 +1,41 @@
+.mk-column-selection {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+
+  @at-root {
+    &-header {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .el-checkbox {
+        height: auto;
+      }
+    }
+  }
+
+  &__selection {
+    display: none;
+
+    .el-checkbox {
+      height: auto;
+    }
+  }
+
+  &:hover,
+  &.is-selected {
+    .mk-column-selection__selection {
+      display: inline-flex;
+    }
+
+    .mk-column-selection__index {
+      display: none;
+    }
+  }
+}

package/dist/style/src/components/table/index.scss

@@ -0,0 +1,2 @@
+@use "./column-select.scss";
+@use "./record-column.scss";

package/dist/style/src/components/table/record-column.scss

@@ -0,0 +1,33 @@
+.mk-record-column {
+  text-align: left;
+
+  &-field {
+    display: flex;
+
+    &__left {
+      width: var(--mk-record-column-label-width);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding-right: 20px;
+    }
+
+    &__right {
+      width: 0;
+      flex: 1;
+    }
+
+    .mk-column-selection {
+      position: relative;
+      justify-content: flex-start;
+
+      &__index {
+        display: none;
+      }
+
+      &__selection {
+        display: inline-flex;
+      }
+    }
+  }
+}

package/dist/style/src/components/table-view.scss

@@ -0,0 +1,60 @@
+.mk-table-view {
+  &__header {
+    padding: 10px;
+    width: 100%;
+    box-sizing: border-box;
+    justify-content: space-between !important;
+  }
+
+  &__selection-tip {
+    display: flex;
+    width: 100%;
+    height: 32px;
+    line-height: 32px;
+    justify-content: space-between;
+
+    padding: 0 10px;
+    font-size: 14px;
+    color: var(--el-text-color-regular);
+    background: #e6f7ff;
+    box-sizing: border-box;
+    border: 1px solid #91d5ff;
+
+    .selection-count {
+      color: #40a9ff;
+    }
+
+    &-left {
+      display: flex;
+      align-items: center;
+      flex: 1;
+    }
+
+    &-right {
+      display: flex;
+      align-items: center;
+    }
+
+    .el-button {
+      height: 30px;
+    }
+  }
+
+  .el-table {
+    z-index: 0;
+    height: 100%;
+  }
+
+  .el-card {
+    &__header {
+      padding: 0;
+    }
+
+    &__body {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      box-sizing: border-box;
+    }
+  }
+}

package/dist/style/src/components/upload-file.scss

@@ -0,0 +1,3 @@
+.mk-upload-file {
+  display: inline-block;
+}

package/dist/style/src/components/upload-image.scss

@@ -0,0 +1,55 @@
+.mk-upload-image {
+  position: relative;
+  width: var(--mk-upload-image-size);
+  height: var(--mk-upload-image-size);
+
+  &__upload {
+    width: 100%;
+    height: 100%;
+  }
+
+  &__select {
+    width: var(--mk-upload-image-size);
+    height: var(--mk-upload-image-size);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 20px;
+  }
+
+  &__image {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-content: center;
+  }
+
+  .el-image {
+    width: 100%;
+    height: 100%;
+  }
+
+  &__mask {
+    display: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: calc(100% - 2px);
+    height: calc(100% - 2px);
+    background-color: rgba(0, 0, 0, 0.5);
+    font-size: 20px;
+    color: white;
+    justify-content: center;
+    align-items: center;
+    border-radius: 6px;
+
+    .mk-svg-icon {
+      cursor: pointer;
+    }
+  }
+
+  &.is-image:hover &__mask {
+    display: flex;
+  }
+}

package/dist/style/src/components/video-view.scss

@@ -0,0 +1,39 @@
+.mk-video-view {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+
+  &__tools {
+    display: none;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.4);
+  }
+
+  &:hover {
+    .mk-video-view__tools {
+      display: flex;
+    }
+  }
+
+  .el-icon {
+    height: 100%;
+  }
+
+  @at-root {
+    &__video {
+      width: 100%;
+      height: 500px;
+    }
+
+    &__dialog-header {
+      text-align: right;
+    }
+  }
+}

package/dist/style/src/index.scss

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

package/dist/style/src/layouts/default/bar.scss

@@ -7,7 +7,11 @@
   color: white;
 
   &__logo {
-    padding: 8px 0;
+    overflow: hidden;
+    width: 64px;
+    height: 64px;
+    border-radius: 4px;
+    margin: 8px auto;
   }
 
   &__items {
@@ -28,31 +32,48 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 64px;
     width: 64px;
     margin: 0 auto;
+    flex-direction: column;
+    cursor: pointer;
+    margin-top: 10px;
+    padding: 8px 0;
 
     &-button {
       display: flex;
       align-items: center;
       justify-content: center;
-      cursor: pointer;
       width: 25px;
       height: 25px;
       background-color: rgba(157, 157, 157, 1);
       border-radius: 4px;
     }
 
+    &-title {
+      font-size: 12px;
+      padding: 5px 5px 0 5px;
+      overflow: hidden;
+      text-overflow: clip;
+      white-space: normal;
+      width: 100%;
+      box-sizing: border-box;
+      text-align: center;
+    }
+
     &.is-active {
       background: white;
       border-radius: 4px;
 
       .mk-bar__item-button {
-        width: 40px;
-        height: 40px;
+        // width: 40px;
+        // height: 40px;
         background-color: rgba(255, 132, 75, 1);
       }
 
+      .mk-bar__item-title {
+        color: #333;
+      }
+
       &.has-children {
         border-top-right-radius: 0px;
         border-bottom-right-radius: 0px;
@@ -69,10 +90,6 @@
     }
   }
 
-  &__setting {
-    cursor: pointer;
-  }
-
   .mk-logo {
     width: 65px;
     height: 65px;
@@ -80,4 +97,28 @@
     background-size: contain;
     background-position: center center;
   }
+
+  @at-root {
+    &-settings {
+      &__icon {
+        cursor: pointer;
+      }
+
+      &__item {
+        display: flex;
+        padding: 5px 3px;
+        align-items: center;
+        cursor: pointer;
+
+        &-icon {
+          margin-right: 10px;
+        }
+
+        &:hover {
+          background-color: rgb(236, 245, 255);
+        }
+
+      }
+    }
+  }
 }

package/dist/style/src/theme/theme.scss

@@ -0,0 +1,251 @@
+@forward "element-plus/theme-chalk/src/common/var.scss" with (
+  $header: (
+    "padding": 0px,
+  ),
+  $alert: (
+    "padding": 5px 16px,
+  )
+);
+@use "element-plus/theme-chalk/src/index.scss" as *;
+
+:root {
+  --el-border-radius-base: 0;
+  --el-card-border-radius: 0;
+  --el-box-shadow-light: none;
+}
+.el-image-viewer__mask {
+  background: transparent;
+}
+
+.mk-overlay {
+  backdrop-filter: blur(3px);
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.el-image-viewer__wrapper,
+.el-overlay {
+  backdrop-filter: blur(3px);
+  background-color: rgba(0, 0, 0, 0.1);
+  outline: none;
+
+  // 重写浮层样式,解决低版本浏览器样式bug
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  .el-overlay-dialog {
+    width: 100%;
+    height: 100%;
+  }
+  .el-overlay-message-box {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.el-menu {
+  .mk-svg-icon {
+    .el-icon {
+      width: auto;
+      font-size: inherit;
+      margin: 0;
+    }
+  }
+}
+
+// 修改默认tabs央视
+.el-tabs {
+  width: 100%;
+  height: 100%;
+  &.el-tabs--top {
+    display: flex;
+    flex-direction: column;
+    .el-tabs__content {
+      flex: 1 1;
+      height: 100%;
+    }
+  }
+  &.el-tabs--left {
+    .el-tabs__content,
+    .el-tab-pane {
+      height: 100%;
+    }
+  }
+}
+.el-card {
+  --el-card-padding: 12px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  &.not-header-border {
+    .el-card__header {
+      border-bottom: none;
+      padding-bottom: 0;
+    }
+  }
+  .el-card__header {
+    .el-button--mini {
+      padding: 7px;
+    }
+
+    .header-box {
+      display: flex;
+      justify-content: flex-end;
+      &-main {
+        flex: 1;
+        padding-right: 10px;
+        width: 0;
+      }
+
+      &-tools {
+        display: flex;
+        justify-content: flex-end;
+      }
+    }
+  }
+  .el-card__body {
+    height: 100%;
+    overflow: auto;
+  }
+}
+.el-table__expand-icon {
+  vertical-align: middle;
+}
+.el-descriptions__body
+  .el-descriptions__table.is-bordered
+  .el-descriptions__cell {
+  .el-form-item--default {
+    margin-bottom: 0;
+  }
+}
+.el-calendar {
+  --el-calendar-cell-width: auto;
+}
+.el-tree {
+  height: 100%;
+  .el-tree-node {
+    .el-tree-node__content {
+      height: auto;
+      min-height: 46px;
+      display: flex;
+      box-sizing: border-box;
+      width: 100%;
+      padding: 0 6px;
+      > .el-tree-node__label {
+        flex: 1 1;
+        width: 100%;
+      }
+    }
+  }
+  .el-vl__wrapper {
+    height: 100%;
+    .el-tree-virtual-list {
+      height: 100%;
+    }
+  }
+}
+
+.el-input-number.is-controls-right {
+  .el-input__inner {
+    text-align: left;
+  }
+}
+
+.el-overlay {
+  > .el-drawer {
+    .el-drawer__body {
+      padding-top: 0px;
+    }
+  }
+}
+.el-overlay-dialog {
+  overflow: hidden;
+  > .el-dialog {
+    top: 50%;
+    margin-top: 0;
+    transform: translateY(-50%);
+    &.mini-modal {
+      .el-dialog__header {
+        display: none;
+      }
+      .el-dialog__body {
+        padding: 0;
+      }
+    }
+  }
+}
+.el-select-dropdown__wrap {
+  .el-tree .el-tree-node {
+    width: 100%;
+    .el-tree-node__content {
+      width: 100%;
+      .el-select-dropdown__item {
+        width: 100%;
+      }
+    }
+  }
+}
+.el-form-item__content {
+  align-items: flex-start !important;
+}
+
+.el-card {
+  --el-card-border-radius: 0;
+}
+.el-tag {
+  --el-tag-border-radius: 0;
+}
+.el-popper {
+  .el-popover {
+    padding: 0;
+    > div {
+      margin: var(--el-popover-padding);
+    }
+    &__title {
+      margin: 0;
+      padding: var(--el-popover-padding);
+      border-bottom: 1px solid var(--el-popover-border-color);
+    }
+  }
+}
+.el-popover {
+  &__title {
+    margin: 0 0 var(--el-popover-padding) 0 !important;
+    padding: var(--el-popover-padding);
+    border-bottom: 1px solid var(--el-popover-border-color);
+  }
+}
+// 表格头
+.el-table th.el-table__cell {
+  font-size: var(--el-font-size-base);
+  font-weight: bold;
+  background: #fafafa !important;
+}
+.el-table .el-table__cell {
+  text-align: center;
+}
+
+.el-descriptions__body
+  .el-descriptions__table.is-bordered
+  .el-descriptions__cell {
+  &.label-required {
+    position: relative;
+    &.is-right {
+      padding-right: 15px;
+    }
+    &::after {
+      content: "";
+      width: 4px;
+      display: block;
+      height: 4px;
+      background-color: var(--el-color-danger);
+      position: absolute;
+      right: 5px;
+      top: 50%;
+      border-radius: 4px;
+      overflow: hidden;
+      transform: translateY(-50%);
+    }
+  }
+}