@ctzy-web-client/plugin-component-vue 1.0.0

package/style/advance-select.scss

@@ -0,0 +1,316 @@
+@use 'common/var' as *;
+@use 'mixins/mixins' as *;
+
+@mixin advance-select-active {
+  background-color: getCssVar('advance-select', 'reference-active-bg-color');
+
+  //   @include e(caret) {
+  //     opacity: 1;
+  //   }
+}
+
+@include b(advance-select) {
+  @include set-component-css-var('advance-select', $advance-select);
+  display: inline-block;
+
+  $spacing-line-color: getCssVar('advance-select', 'spacing-line-color');
+  $spacing-line-size: getCssVar('advance-select', 'spacing-line-size');
+
+  @include e(input-wrapper) {
+    height: getCssVar('advance-select', 'input-height');
+    box-shadow: 0 $spacing-line-size 0 0 $spacing-line-color;
+    margin-bottom: $spacing-line-size;
+
+    .el-input__wrapper {
+      box-shadow: none;
+    }
+  }
+
+  @include e(reference) {
+    display: inline-flex;
+    align-items: center;
+    padding: getCssVar('advance-select', 'reference-padding');
+    border-radius: getCssVar('advance-select', 'reference-border-radius');
+    color: getCssVar('advance-select', 'reference-text-color');
+    cursor: pointer;
+    transition: 0.2s ease-out;
+
+    @include pseudo(hover) {
+      @include advance-select-active();
+    }
+    @include when(active) {
+      @include advance-select-active();
+    }
+  }
+    @include e(pct-reference) {
+        display: inline-flex;
+        align-items: center;
+        //padding: getCssVar('advance-select', 'reference-padding');
+        border-radius: getCssVar('advance-select', 'reference-border-radius');
+        color: getCssVar('advance-select', 'reference-text-color');
+        cursor: pointer;
+        transition: 0.2s ease-out;
+        width: 100%;
+    }
+
+
+  @include e(top) {
+    padding: 4px 0;
+    box-shadow: 0 $spacing-line-size 0 0 $spacing-line-color;
+    margin-bottom: $spacing-line-size;
+  }
+
+  @include e(content) {
+    @include set-component-css-var('advance-select', $advance-select);
+
+    @include when(single) {
+      .#{$namespace}-advance-select__clear {
+        margin-left: 0;
+      }
+    }
+  }
+
+  @include e(bottom) {
+    padding: 4px 0;
+    box-shadow: 0 calc(0px - $spacing-line-size) 0 0 $spacing-line-color;
+    margin-bottom: $spacing-line-size;
+  }
+
+  @include e(label) {
+    margin-right: getCssVar('advance-select', 'label-margin-right');
+    // opacity: 0.7;
+  }
+
+  @include e(content) {
+    font-weight: 500;
+  }
+
+  @include e(caret) {
+    margin-left: getCssVar('advance-select', 'caret-margin-left');
+    // opacity: 0.3;
+    transition: 0.2s ease-out;
+  }
+
+  @include e(operation) {
+    padding: 0;
+    font-size: 14px;
+    line-height: 22px;
+
+    @include when(border) {
+      box-shadow: 0 $spacing-line-size 0 0 $spacing-line-color;
+      margin-bottom: $spacing-line-size;
+    }
+  }
+
+  @include e(selection-wrapper) {
+    padding: 6px 12px;
+  }
+
+  @include e(selection) {
+    display: inline-block;
+    vertical-align: top;
+    color: getCssVar('text-color', 'placeholder');
+
+    @include when(has-selected) {
+      color: getCssVar('text-color', 'primary');
+    }
+  }
+
+  &__popper &__clear {
+    padding: 0;
+    margin: 0 0 0 16px;
+    border: none;
+    line-height: 22px;
+    vertical-align: top;
+    font-size: 14px;
+  }
+
+  @include e(input) {
+    width: 100%;
+    height: 100%;
+    font-size: 14px;
+    line-height: 40px;
+    border: none;
+    outline: none;
+  }
+
+  @include e(list) {
+    padding: 4px 0;
+  }
+
+  @include e(empty) {
+    font-size: 14px;
+    line-height: 22px;
+    padding: 6px 12px;
+    color: getCssVar('text-color', 'regular');
+  }
+}
+
+@include b(advance-option) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+    height: 22px;
+  line-height: 22px;
+  padding: 5px 12px;
+  color: getCssVar('text-color', 'primary');
+  cursor: pointer;
+    box-sizing: unset !important;
+  @include pseudo(hover) {
+    background-color: #e8f8ff;
+  }
+
+  @include e(content) {
+    flex: 1;
+    width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  @include e(selected) {
+    color: getCssVar('color-primary');
+  }
+
+  @include e(content-label) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+// .#{$namespace}-advance-select {
+//   display: inline-block;
+//   &__input-wrapper {
+//     height: 40px;
+//     box-shadow: 0 1px 0 0 rgb(0 0 0 / 5%);
+//     margin-bottom: 1px;
+
+//     .el-input__wrapper {
+//       box-shadow: none;
+//     }
+//   }
+
+//   &__reference {
+//     display: inline-flex;
+//     align-items: center;
+//     padding: 3px 6px;
+//     border-radius: 4px;
+//     color: $black-1;
+//     cursor: pointer;
+//     transition: 0.2s ease-out;
+
+//     &:hover,
+//     &.is-active {
+//       background-color: #f2f4f6;
+
+//       .#{$namespace}-advance-select__caret {
+//         opacity: 1;
+//       }
+//     }
+//   }
+
+//   &__top {
+//     padding: 4px 0;
+//     box-shadow: 0 1px 0 0 rgb(0 0 0 / 5%);
+//     margin-bottom: 1px;
+//   }
+
+//   &__bottom {
+//     padding: 4px 0;
+//     box-shadow: 0 -1px 0 0 rgb(0 0 0 / 5%);
+//     margin-top: 1px;
+//   }
+
+//   &__label {
+//     margin-right: 6px;
+//     opacity: 0.7;
+//   }
+
+//   &__caret {
+//     margin-left: 3px;
+//     opacity: 0.3;
+//     transition: 0.2s ease-out;
+//   }
+
+//   &__operation {
+//     padding: 0;
+//     font-size: 14px;
+//     line-height: 22px;
+
+//     &.is-border {
+//       box-shadow: 0 1px 0 0 rgb(0 0 0 / 5%);
+//       margin-bottom: 1px;
+//     }
+//   }
+
+//   &__selection-wrapper {
+//     padding: 6px 12px;
+//   }
+
+//   &__selection {
+//     display: inline-block;
+//     vertical-align: top;
+//     color: $black-4;
+
+//     &.is-has-selected {
+//       color: $black-1;
+//     }
+//   }
+
+//   &__popper &__clear {
+//     padding: 0;
+//     margin: 0 0 0 16px;
+//     border: none;
+//     line-height: 22px;
+//     vertical-align: top;
+//     font-size: 14px;
+//   }
+
+//   &__input {
+//     width: 100%;
+//     height: 100%;
+//     font-size: 14px;
+//     line-height: 40px;
+//     border: none;
+//     outline: none;
+//   }
+
+//   &__list {
+//     padding: 4px 0;
+//   }
+
+//   &__empty {
+//     font-size: 14px;
+//     line-height: 22px;
+//     padding: 6px 12px;
+//     color: $black-3;
+//   }
+// }
+
+// .#{$namespace}-advance-option {
+//   display: flex;
+//   justify-content: space-between;
+//   align-items: center;
+//   font-size: 14px;
+//   line-height: 22px;
+//   padding: 6px 12px;
+//   color: $black-1;
+//   cursor: pointer;
+
+//   &:hover {
+//     background: $hoverBgColor;
+//   }
+
+//   &__content {
+//     flex: 1;
+//     width: 0;
+//     overflow: hidden;
+//     text-overflow: ellipsis;
+//     white-space: nowrap;
+//   }
+
+//   &__selected {
+//     color: $primaryColor;
+//   }
+// }

package/style/breadcrumb-select.scss

@@ -0,0 +1,80 @@
+@use './mixins/mixins' as *;
+@use './common/var' as *;
+
+@include b(breadcrumb-item) {
+  @include e(dropdown) {
+    padding: 8px !important;
+
+    .ptp-qiehuan {
+      font-size: 18px;
+    }
+  }
+
+  @include e(content) {
+    margin: 0 6px;
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  @include e(top) {
+    &-empty {
+      padding: 12px 12px;
+      font-size: 14px;
+      line-height: 22px;
+      color: getCssVar('text-color', 'regular');
+    }
+  }
+
+  @include e(opt) {
+    padding: 6px 12px !important;
+    color: getCssVar('color-primary');
+    cursor: pointer;
+
+    &-label {
+      margin-left: 4px;
+    }
+
+    &:hover {
+      background: #e8f8ff;
+    }
+  }
+}
+
+// .bwa-breadcrumb-item {
+//   &__dropdown {
+//     padding: 8px !important;
+
+//     .ptp-qiehuan {
+//       font-size: 18px;
+//     }
+//   }
+
+//   &__content {
+//     margin: 0 6px;
+//     font-size: 14px;
+//     font-weight: 600;
+//   }
+
+//   &__top {
+//     &-empty {
+//       padding: 12px 12px;
+//       font-size: 14px;
+//       line-height: 22px;
+//       color: var.$black-3;
+//     }
+//   }
+
+//   &__opt {
+//     padding: 6px 12px !important;
+//     color: var.$primaryColor;
+//     cursor: pointer;
+
+//     &-label {
+//       margin-left: 4px;
+//     }
+
+//     &:hover {
+//       background: var.$hoverBgColor;
+//     }
+//   }
+// }

package/style/common/var.scss

@@ -0,0 +1,240 @@
+@use 'sass:map';
+@use '../mixins/function' as *;
+
+$types: primary, success, warning, danger, error;
+
+$colors: () !default;
+$colors: map.deep-merge(
+  (
+    'white': #ffffff,
+    'black': #000000,
+    'primary': (
+      'base': #19bbff,
+    ),
+    'success': (
+      'base': #2dc86d,
+    ),
+    'warning': (
+      'base': #ffa901,
+    ),
+    'danger': (
+      'base': #ff7052,
+    ),
+    'error': (
+      'base': #ff7052,
+    ),
+  ),
+  $colors
+);
+
+$color-white: map.get($colors, 'white') !default;
+$color-black: map.get($colors, 'black') !default;
+$color-primary: map.get($colors, 'primary', 'base') !default;
+$color-success: map.get($colors, 'success', 'base') !default;
+$color-warning: map.get($colors, 'warning', 'base') !default;
+$color-danger: map.get($colors, 'danger', 'base') !default;
+$color-error: map.get($colors, 'error', 'base') !default;
+
+$primaryColor: $color-primary;
+$successColor: $color-success;
+$warningColor: $color-warning;
+$dangerColor: $color-danger;
+$errorColor: $color-error;
+
+$text-color: () !default;
+$text-color: map.merge(
+  (
+    'primary': #24515d,
+    'regular': #7c979e,
+    'placeholder': #b0c0c5,
+    'disabled': #c0c4cc,
+  ),
+  $text-color
+);
+
+$border-radius: () !default;
+$border-radius: map.merge(
+  (
+    'base': 4px,
+    'circle': 100%,
+  ),
+  $border-radius
+);
+
+$border-color: () !default;
+$border-color: map.merge(
+  (
+    '': rgba(234, 238, 239, 1),
+  ),
+  $border-radius
+);
+
+$spacing-size: () !default;
+$spacing-size: map.merge(
+  (
+    'module': 24px,
+    'input': 24px,
+    'filter': 24px,
+    'button': 16px,
+  ),
+  $spacing-size
+);
+
+$fill-color: () !default;
+$fill-color: map.merge(
+  (
+    'blank': #ffffff,
+    'grey': #f0f3f7,
+  ),
+  $fill-color
+);
+
+$hoverBgColor: #e8f8ff;
+
+$primarySelectColor: #e8f8ff;
+
+$black-1: #24515d;
+$black-3: #7c979e;
+$black-4: #b0c0c5;
+$bgColor: #f0f3f7;
+
+$leftPanelWidth: 240px;
+
+$fontWeight: (
+  'title': 600,
+  'text': 400,
+);
+
+$fontSize: (
+  'title': 16px,
+  'text': 14px,
+  'tips': 12px,
+);
+
+$gap: (
+  'module': 24px,
+  'input': 24px,
+  'filter': 24px,
+  'button': 16px,
+);
+
+$panel: () !default;
+$panel: map.merge(
+  (
+    'bg-color': getCssVar('fill-color', 'blank'),
+    'border-color': getCssVar('border-color'),
+    'header-height': 48px,
+    'header-line-height': 48px,
+    'header-padding': 0 20px,
+    'tools-padding': 20px,
+    'body-padding': 20px,
+    'footer-padding': 20px,
+  ),
+  $panel
+);
+
+$layout: () !default;
+$layout: map.merge(
+  (
+    'left-panel-width': 240px,
+    'spacing-size': getCssVar('spacing-size', 'module'),
+  ),
+  $layout
+);
+
+$datatable: () !default;
+$datatable: map.merge(
+  (
+    'pagination-padding-top': 20px,
+    'pagination-line-height': 36px,
+    'pagination-info-margin-right': 16px,
+    'pagination-info-font-size': 12px,
+    'pagination-info-text-color': #547781,
+  ),
+  $datatable
+);
+
+$progress: () !default;
+$progress: map.merge(
+  (
+    'height': 8px,
+    'default-color': #eaeeef,
+    'percent-margin-left': 8px,
+    'percent-color': getCssVar('text-color', 'regular'),
+    'default-percent-width': 'auto',
+    'default-tooltip-width': 'auto',
+    'info-item-text-color': getCssVar('text-color', 'primary'),
+    'info-item-margin': 3px 0,
+    'info-item-dot-size': 6px,
+    'info-item-dot-border-radius': getCssVar('border-radius', 'circle'),
+    'info-item-dot-margin-right': 4px,
+  ),
+  $progress
+);
+
+$datatable-settings: () !default;
+$datatable-settings: map.merge(
+  (
+    'padding': 5px 0,
+    'width': 220px,
+    'header-height': 40px,
+    'header-margin': 0 11px,
+    'header-text-color': getCssVar('text-color', 'primary'),
+    'border-color': getCssVar('border-color'),
+    'tools-text-color': getCssVar('text-color', 'placeholder'),
+    'search-padding': 12px 0 8px,
+    'search-magin': 0 11px,
+    'main-margin': 0 11px,
+    'section-header-text-color': getCssVar('text-color', 'regular'),
+    'section-header-margin': 8px 0,
+    'section-empty-text-color': getCssVar('text-color', 'regular'),
+    'section-spacing': 16px,
+    'field-item-height': 36px,
+    'field-item-text-color': getCssVar('text-color', 'primary'),
+  ),
+  $datatable-settings
+);
+
+$menu: () !default;
+$menu: map.merge(
+  (
+    'icon-size': 14px,
+    'icon-color': #547781,
+    'icon-left': 32px,
+    'active-text-color': getCssVar('color-primary'),
+    'content-padding-left': 40px,
+    'item-spacing': 8px,
+    'item-height': 40px,
+    'item-text-color': getCssVar('text-color', 'primary'),
+    'item-hover-bg-color': rgba(176, 192, 197, 0.15),
+    'item-active-bg-color': #cde9f5,
+    'bar-width': 4px,
+  ),
+  $menu
+);
+
+$advance-select: () !default;
+$advance-select: map.merge(
+  (
+    'input-height': 40px,
+    'spacing-line-color': rgb(0 0 0 / 5%),
+    'spacing-line-size': 1px,
+    'reference-padding': 3px 6px,
+    'reference-border-radius': getCssVar('border-radius', 'base'),
+    'reference-text-color': getCssVar('text-color', 'primary'),
+    'reference-active-bg-color': #f2f4f6,
+    'label-margin-right': 6px,
+    'caret-margin-left': 3px,
+  ),
+  $advance-select
+);
+
+$breadcrumb-item: () !default;
+
+$panel-tabs: () !default;
+$panel-tabs: map.merge(
+  (
+    'item-spacing': 8px,
+  ),
+  $panel-tabs
+);

package/style/common.scss

@@ -0,0 +1,48 @@
+.justify-between {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .align-center {
+    display: flex;
+    align-items: center;
+  }
+  
+  .flex-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .flex-column {
+    flex-direction: column;
+  }
+  
+  .text-center {
+    text-align: center;
+  }
+  
+  .flex-end {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+  
+  .flex-1 {
+    flex: 1;
+  }
+  
+  .full-width {
+    width: 100%;
+  }
+  
+  $fontSizes: 12 14 16 20 24 26 28 30;
+  $lineHeights: 20px 22px 24px 28px 32px 34px 36px 38px;
+  
+  @each $e in $fontSizes {
+    $i: index($fontSizes, $e);
+    .font-size-#{$e} {
+      font-size: $e + px;
+      line-height: nth($lineHeights, $i);
+    }
+  }