@zjhc/ui 0.0.0-stage → 0.1.0

package/theme-chalk/src/common/var.scss

@@ -0,0 +1,154 @@
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:math';
+
+// 定义可用的主题类型
+$types: primary, success, warning, danger, error, info;
+// 默认颜色映射，使用 deep-merge 来允许用户自定义颜色映射覆盖默认值
+$colors: () !default;
+$colors: map.deep-merge(
+  (
+    'white': #ffffff,
+    // 白色和黑色作为基本颜色选项
+    'black': #000000,
+    'primary': (
+      'base': #094194,
+    ),
+    'success': (
+      'base': #1ebcaf,
+    ),
+    'warning': (
+      'base': #ffc23e,
+    ),
+    'danger': (
+      'base': #fa5e45,
+    ),
+    'error': (
+      'base': #fa5e45,
+    ),
+    'info': (
+      'base': #909399,
+    ),
+  ),
+  $colors
+);
+// 主色调
+$color-white: map.get($colors, 'white') !default; // 白色
+$color-black: map.get($colors, 'black') !default; // 黑色
+
+// 应用场景颜色
+$color-primary: map.get(
+  $colors,
+  'primary',
+  'base'
+) !default; // 主要颜色，默认使用'base'色调
+$color-success: map.get(
+  $colors,
+  'success',
+  'base'
+) !default; // 成功状态颜色，默认使用'base'色调
+$color-warning: map.get(
+  $colors,
+  'warning',
+  'base'
+) !default; // 警告状态颜色，默认使用'base'色调
+$color-error: map.get(
+  $colors,
+  'error',
+  'base'
+) !default; // 错误状态颜色，默认使用'base'色调
+$color-info: map.get(
+  $colors,
+  'info',
+  'base'
+) !default; // 信息状态颜色，默认使用'base'色调
+
+/**
+ * 该@mixin用于根据指定的颜色类型、级别和混合模式，创建一个新颜色等级并将其添加到全局颜色地图中。
+ * @param $type {string} - 颜色的类型（例如：primary, success等）。
+ * @param $number {int} - 颜色的级别，用于计算颜色的混合程度。
+ * @param $mode {string} - 混合模式，默认为'light'。可用于指定颜色是明度混合还是饱和度混合等。
+ * @param $mix-color {color} - 用于混合的颜色，默认为白色($color-white)。
+ */
+
+@mixin set-color-mix-level(
+  $type,
+  $number,
+  $mode: 'light',
+  $mix-color: $color-white
+) {
+  // 深度合并颜色地图，添加新的颜色等级
+  $colors: map.deep-merge(
+    (
+      $type: (
+        '#{$mode}-#{$number}':
+          color.mix(
+            $mix-color,
+            map.get($colors, $type, 'base'),
+            math.percentage(math.div($number, 10))
+          ),
+      ),
+    ),
+    $colors
+  ) !global; // 将局部变量转换为全局变量，确保新的颜色等级可以在整个项目中使用
+}
+
+@each $type in $types {
+  @for $i from 1 through 9 {
+    @include set-color-mix-level($type, $i, 'light', $color-white);
+  }
+}
+
+@each $type in $types {
+  @include set-color-mix-level($type, 2, 'dark', $color-black);
+}
+
+// 文本颜色
+$text-color: () !default;
+$text-color: map.merge(
+  (
+    'primary': #333133,
+    'regular': #606266,
+    'secondary': #909399,
+    'placeholder': #a8abb2,
+    'disabled': #c0c4cc,
+  ),
+  $text-color
+);
+// 边框颜色
+$border-color: () !default;
+$border-color: map.merge(
+  (
+    '': #dcdfe6,
+    'light': #e4e7ed,
+    'lighter': #ebeef5,
+    'extra-light': #f2f6fc,
+    'dark': #d4d7de,
+    'darker': #cdd0d6,
+  ),
+  $border-color
+);
+// 填充颜色
+$fill-color: () !default;
+$fill-color: map.merge(
+  (
+    '': #f0f2f5,
+    'light': #f5f7fa,
+    'lighter': #fafafa,
+    'extra-light': #fafcff,
+    'dark': #ebedf0,
+    'darker': #e6e8eb,
+    'blank': #ffffff,
+  ),
+  $fill-color
+);
+// 背景颜色
+$bg-color: () !default;
+$bg-color: map.merge(
+  (
+    '': #ffffff,
+    'page': #f2f3f5,
+    'overlay': #ffffff,
+  ),
+  $bg-color
+);

package/theme-chalk/src/complextable.scss

@@ -0,0 +1,47 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/function' as *;
+
+// background-color: var();
+@include b(advance) {
+  @include e(layout) {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    // padding: 20px;
+  }
+  @include e(toolbar) {
+    margin-bottom: 12px;
+    &.is-line {
+      display: flex;
+      align-items: center;
+      @include meb(false, toolbar, table) {
+        flex: 1;
+      }
+    }
+  }
+  @include e(grid) {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    overflow: hidden;
+    & {
+      .el-table {
+        height: 100%;
+        .el-link + .el-link {
+          margin-left: 0;
+        }
+        .el-link {
+          margin-right: 12px;
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+  }
+  @include e(pagination) {
+    margin-top: 16px;
+  }
+}

package/theme-chalk/src/dark/css-vars.scss

@@ -0,0 +1,35 @@
+// CSS3 var
+@use './var' as *;
+@use '../mixins/_var.scss' as *;
+@use '../mixins/mixins.scss' as *;
+
+html.dark {
+  color-scheme: dark;
+
+  // hex colors
+  @each $type in (primary, success, warning, danger, error, info) {
+    @include set-css-color-type($colors, $type);
+  }
+
+  // --el-box-shadow-#{$type}
+  @include set-component-css-var('box-shadow', $box-shadow);
+
+  // color-scheme
+  // Background --el-bg-color-#{$type}
+  @include set-component-css-var('bg-color', $bg-color);
+  // --el-text-color-#{$type}
+  @include set-component-css-var('text-color', $text-color);
+  // --el-border-color-#{$type}
+  @include set-component-css-var('border-color', $border-color);
+  // Fill --el-fill-color-#{$type}
+  @include set-component-css-var('fill-color', $fill-color);
+  @include set-component-css-var('mask-color', $mask-color);
+}
+
+@include dark(card) {
+  @include set-component-css-var('card', $card);
+}
+
+@include dark(empty) {
+  @include set-component-css-var('empty', $empty);
+}

package/theme-chalk/src/dark/var.scss

@@ -0,0 +1,198 @@
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:math';
+
+@use '../common/var.scss' as common;
+@use '../mixins/mixins.scss' as *;
+@use '../mixins/function' as *;
+// @use '../color/index.scss' as *;
+
+
+$colors: (
+  ) !default;
+
+@each $type in common.$types {
+  $colors: map.deep-merge(($type: ('base': map.get(common.$colors, $type, 'base'),
+      ),
+    ),
+    $colors ) !global;
+}
+
+// https://sass-lang.com/documentation/values/maps#immutability
+// mix colors with white/black to generate light/dark level
+@mixin set-color-mix-level($type,
+  $number,
+  $mode: 'light',
+  $mix-color: $color-white) {
+  // hex mix color
+  $colors: map.deep-merge(($type: ('#{$mode}-#{$number}': color.mix($mix-color,
+          map.get($colors, $type, 'base'),
+          math.percentage(math.div($number, 10))),
+      ),
+    ),
+    $colors ) !global;
+
+  // for designer to view transparent
+  // $colors: map.deep-merge(
+  //   (
+  //     $type: (
+  //       '#{$mode}-#{$number}':
+  //         rgba(map.get($colors, $type, 'base'), math.div(10 - $number, 10)),
+  //     ),
+  //   ),
+  //   $colors
+  // ) !global;
+}
+
+// Background
+$bg-color: (
+  ) !default;
+$bg-color: map.merge(('page': #0a0a0a,
+      '': #141414,
+      'overlay': #1d1e1f,
+    ),
+    $bg-color
+);
+
+// dark-mode
+@each $type in common.$types {
+  @for $i from 1 through 9 {
+    @include set-color-mix-level($type, $i, 'light', map.get($bg-color, ''));
+  }
+}
+
+@each $type in common.$types {
+  @include set-color-mix-level($type, 2, 'dark', common.$color-white);
+}
+
+// border
+$border-color-base: #f5f8ff;
+$border-color: (
+  ) !default;
+$border-color: map.merge(('darker': rgba($border-color-base, 0.35),
+      'dark': rgba($border-color-base, 0.3),
+      '': rgba($border-color-base, 0.25),
+      'light': rgba($border-color-base, 0.2),
+      'lighter': rgba($border-color-base, 0.15),
+      'extra-light': rgba($border-color-base, 0.1),
+    ),
+    $border-color
+);
+
+// mix to hex to avoid overlay issues
+@each $key,
+$val in $border-color {
+  $border-color: map.merge($border-color,
+    ($key: mix-overlay-color($val, map.get($bg-color, '')),
+    )) !global;
+}
+
+// Box-shadow
+$box-shadow: (
+  ) !default;
+$box-shadow: map.merge(('': (0px 12px 32px 4px rgba(0, 0, 0, 0.36),
+        0px 8px 20px rgba(0, 0, 0, 0.72),
+      ),
+      'light': (0px 0px 12px rgba(0, 0, 0, 0.72),
+      ),
+      'lighter': (0px 0px 6px rgba(0, 0, 0, 0.72),
+      ),
+      'dark': (0px 16px 48px 16px rgba(0, 0, 0, 0.72),
+        0px 12px 32px #000000,
+        0px 8px 16px -8px #000000,
+      ),
+    ),
+    $box-shadow
+);
+
+// fill
+$fill-color-base: #fafcff;
+$fill-color: (
+  ) !default;
+$fill-color: map.merge(('darker': rgba($fill-color-base, 0.2),
+      'dark': rgba($fill-color-base, 0.16),
+      '': rgba($fill-color-base, 0.12),
+      'light': rgba($fill-color-base, 0.08),
+      'lighter': rgba($fill-color-base, 0.04),
+      'extra-light': rgba($fill-color-base, 0.02),
+      'blank': transparent,
+    ),
+    $fill-color
+);
+
+// mix to hex to avoid overlay issues
+@each $key,
+$val in $fill-color {
+  @if ($key !='blank') {
+    $fill-color: map.merge($fill-color,
+      ($key: mix-overlay-color($val, map.get($bg-color, '')),
+      )) !global;
+  }
+}
+
+// text
+$text-color-base: #f0f5ff;
+$text-color: (
+  ) !default;
+$text-color: map.merge(('primary': rgba($text-color-base, 0.95),
+      'regular': rgba($text-color-base, 0.85),
+      'secondary': rgba($text-color-base, 0.65),
+      'placeholder': rgba($text-color-base, 0.55),
+      'disabled': rgba($text-color-base, 0.4),
+    ),
+    $text-color
+);
+
+// mix to hex to avoid overlay issues
+@each $key,
+$val in $text-color {
+  $text-color: map.merge($text-color,
+    ($key: mix-overlay-color($val, map.get($bg-color, '')),
+    )) !global;
+}
+
+// mask
+$mask-color: (
+  ) !default;
+$mask-color: map.merge(('': rgba(0, 0, 0, 0.8),
+      'extra-light': rgba(0, 0, 0, 0.3),
+    ),
+    $mask-color
+);
+
+// Button
+// css3 var in packages/theme-chalk/src/button.scss
+$button: (
+  ) !default;
+$button: map.merge(('disabled-text-color': rgba(255, 255, 255, 0.5),
+    ),
+    $button
+);
+
+
+
+// card
+$card: (
+  ) !default;
+$card: map.merge(('bg-color': getCssVar('bg-color', 'overlay'),
+    ),
+    $card
+);
+
+// Empty
+// css3 var in packages/theme-chalk/src/empty.scss
+$empty: (
+  ) !default;
+$empty: map.merge(('fill-color-0': getCssVar('color-black'),
+      'fill-color-1': #4b4b52,
+      'fill-color-2': #36383d,
+      'fill-color-3': #1e1e20,
+      'fill-color-4': #262629,
+      'fill-color-5': #202124,
+      'fill-color-6': #212224,
+      'fill-color-7': #1b1c1f,
+      'fill-color-8': #1c1d1f,
+      'fill-color-9': #18181a,
+    ),
+    $empty
+);

package/theme-chalk/src/document-tables.scss

@@ -0,0 +1,133 @@
+@use 'mixins/config' as *;
+@use 'mixins/mixins' as *;
+
+
+
+@include b(tab) {
+  @include e(item){
+    @include m(text){
+       padding: 0 15px;
+       width: 100%;
+       display: block;
+       white-space: nowrap;      /* 保持文本在一行内 */
+        overflow: hidden;         /* 隐藏溢出的内容 */
+        text-overflow: ellipsis;
+        display: block;
+    }
+  }
+}
+  .cn-zjhc-my-label {
+    width: 112px;
+    max-width: 112px;
+    min-width: 50px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    &.cn-zjhc-label_large {
+      width: 122px;
+      max-width: 122px;
+    }
+    &.cn-zjhc-label_mini {
+      width: 80px;
+      max-width: 80px;
+    }
+  }
+  .cn-zjhc-label-text {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .cn-zjhc-value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .cn-zjhc-my-content {
+    min-width: 50px;
+    max-width: 130px;
+    &.cn-zjhc-content_mini {
+      width: 80px;
+    }
+    &.cn-zjhc-content_common {
+      width: 130px;
+    }
+  }
+  
+  .cn-zjhc-my-content_grey {
+    background: var(--zjhc-light-backgound-color);
+  }
+  .cn-zjhc-my-content_white {
+    background: #fff;
+  }
+  .cn-zjhc-my-label_yellow {
+    background: #fef9e5 !important;
+  }
+  .cn-zjhc-my-label_blue {
+    background: rgba(223, 240, 255, 1) !important;
+  }
+  .cn-zjhc-my-content_yellow {
+    background: #fefbef;
+  }
+  .cn-zjhc-my-content_blue {
+    background: rgba(244, 250, 255, 0.9);
+  }
+  .cn-zjhc-has-option {
+    color: var(--el-color-primary);
+    cursor: pointer;
+    i {
+      color: var(--el-color-primary);
+      margin-right: 4px;
+    }
+  }
+  .cn-zjhc-has-option .cn-zjhc-underline:hover {
+    text-decoration: underline;
+  }
+  .cn-zjhc-table_group-title {
+    color: #333;
+    font-size: 15px;
+    border-left: 3px solid var(--el-color-primary);
+    padding-left: 10px;
+    margin: 10px 0;
+  }
+  .cn-zjhc-table_group-title .cn-zjhc-edit-btn {
+    color: var(--el-color-primary);
+    margin-left: 20px;
+  }
+  .cn-zjhc-pagination {
+    margin: 10px 0;
+  }
+  
+  .el-descriptions__cell {
+    white-space: nowrap;
+  }
+  .cn-zjhc-my-label-hide {
+    display: none;
+  }
+  .cn-zjhc-grey-text {
+    color: #aaa !important;
+  }
+  .tip-tooltip {
+    max-width: 268px;
+  }
+  .cn-zjhc-content-right-button {
+    min-width: 50px;
+    max-width: 130px;
+    height: 28px;
+    padding: 0 22px 0 11px;
+    float: right;
+    border: none;
+    border-left: 1px solid var(--el-border-color-lighter);
+    position: relative;
+    right: -11px;
+    z-index: 1;
+  }
+  .cn-zjhc-content-right-button.cn-zjhc-disabled {
+    background: rgb(250, 251, 252);
+    color: rgba(9, 65, 148, 0.4);
+  }
+  .cn-zjhc-content-right-button.el-button--text:not(.is-disabled):hover {
+    border-left: 1px solid var(--el-border-color-lighter);
+    background: rgb(250, 251, 252);
+    color: rgba(9, 65, 148, 0.4);
+  }

package/theme-chalk/src/group-container.scss

@@ -0,0 +1,139 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/function' as *;
+
+@include b(complex) {
+  @include e(table) {
+    min-width: 1422px;
+    display: flex;
+    & {
+      .el-row {
+        border-left: 1px solid var(--el-border-color);
+        border-top: 1px solid var(--el-border-color);
+        font-size: var(--el-font-size-base);
+        position: relative;
+      }
+      .el-row + .el-row {
+        border-left: none;
+      }
+      .el-col {
+        border-right: 1px solid var(--el-border-color);
+        border-bottom: 1px solid var(--el-border-color);
+        padding: 0 10px;
+        height: var(--el-height-size-base);
+        line-height: var(--el-height-size-base);
+        white-space: nowrap; /* 保持文本在一行内 */
+        overflow: hidden; /* 隐藏溢出的内容 */
+        text-overflow: ellipsis;
+        color: #000;
+      }
+    }
+  }
+  @include e(nesting) {
+    @include m(col) {
+      padding: 0 !important;
+      height: auto !important;
+      border-bottom: none !important ;
+      border-right: none !important ;
+    }
+    @include m(row) {
+      border-left: none !important;
+      border-top: none !important;
+    }
+  }
+  @include e(coltext) {
+    @include m(disabled) {
+      color: #aaa !important;
+    }
+  }
+  @include e(labellink) {
+    @include m(disabled) {
+      color: var(--el-primary-opactiy05) !important;
+      & {
+        .el-icon {
+          vertical-align: middle;
+          margin-right: 6px;
+          margin-top: -4px;
+          font-size: 16px;
+        }
+      }
+    }
+  }
+  @include e(label) {
+    @include m(title) {
+      background: var(--el-table-label-bg-color);
+      color: var(--el-text-color-regular) !important;
+    }
+    @include m(yellow) {
+      background: var(--el-table-sub-label-bg-color);
+      color: var(--el-text-color-regular) !important;
+    }
+    @include m(link) {
+      color: var(--el-color-primary) !important;
+      cursor: pointer;
+      &:hover {
+        text-decoration: underline;
+      }
+      & {
+        .el-icon {
+          vertical-align: middle;
+          margin-right: 6px;
+          font-size: 18px;
+          margin-top: -4px;
+        }
+      }
+    }
+  }
+  @include e(value) {
+    @include m(yellow01) {
+      background: var(--el-table-sub-value-bg-color);
+    }
+    @include m(grey01) {
+      background: var(--el-table-value-bg-color);
+    }
+  }
+}
+@include b(group) {
+  @include e(container) {
+    padding: 8px 16px;
+    &.is-border {
+      border: 1px solid var(--el-border-color);
+      border-radius: 5px;
+      padding: 15px;
+    }
+    & {
+      @include meb(false, layout, advance) {
+        padding: 0;
+      }
+    }
+  }
+  @include e(header) {
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+  }
+  @include e(box) {
+    border: 1px solid var(--el-border-color);
+    background-color: var(--el-bg-color);
+    border-radius: 5px;
+    padding: 8px 0; //避免嵌套container的时候左右间距过大
+  }
+  @include e(title) {
+    font-size: getCssVar('group', 'header', 'title', 'size');
+    font-weight: bold;
+    border-left: 4px solid var(--el-color-primary);
+    color: getCssVar('group', 'header', 'title', 'color');
+    position: relative;
+    line-height: 1;
+    padding-left: 8px;
+    margin-right: 24px;
+  }
+  @include e(toolbar) {
+    display: flex;
+    .el-button--text {
+      padding: 0;
+    }
+    .el-button--text + .el-button--text {
+      margin-left: 12px;
+    }
+  }
+}