主题颜色

ui/dasadmin/src/styles/mixins.scss

@@ -1,14 +1,40 @@
+@use 'sass:math';
+@use 'sass:map';
+
 @mixin set-css-var-value($name, $value) {
     #{joinVarName($name)}: #{$value};
 }
 
 @function joinVarName($list) {
     $name: '--ba';
+
     @each $item in $list {
-        @if $item != '' {
+        @if $item !='' {
-            $name: $name + '-' + $item;
+            $name: '#{$name}-#{$item}';
         }
     }
+
+    @return $name;
+}
+
+@mixin set-css-var-value2($name, $value) {
+    @if $value=='' {}
+
+    @else {
+        #{joinVarName2($name)}: #{$value};
+    }
+
+}
+
+@function joinVarName2($list) {
+    $name: '--el';
+
+    @each $item in $list {
+        @if $item !='' {
+            $name: #{$name}+'-'+#{$item};
+        }
+    }
+
     @return $name;
 }
 
@@ -20,11 +46,27 @@
  * 通过映射设置所有的CSS变量
  */
 @mixin set-component-css-var($name, $variables) {
-    @each $attribute, $value in $variables {
+
-        @if $attribute == 'default' {
+    @each $attribute,
+    $value in $variables {
+        @if $attribute =='default' {
             #{getCssVarName($name)}: #{$value};
-        } @else {
+        }
+
+        @else {
             #{getCssVarName($name, $attribute)}: #{$value};
         }
     }
 }
+
+@mixin set-css-color-type($colors, $type) {
+    @include set-css-var-value2(('color', $type), map.get($colors, $type, 'base'));
+
+    @each $i in (3, 5, 7, 8, 9) {
+        @include set-css-var-value2(('color', $type, 'light', $i),
+            map.get($colors, $type, 'light-#{$i}'));
+    }
+
+    @include set-css-var-value2(('color', $type, 'dark-2'),
+        map.get($colors, $type, 'dark-2'));
+}

ui/dasadmin/src/styles/var.scss

@@ -17,6 +17,8 @@ $colors: map.deep-merge(( // 白色和黑色作为基本颜色选项
             ),
             'warning': ('base': #e6a23c,
             ),
+            'danger': ('base': #f56c6c,
+            ),
             'error': ('base': #f56c6c,
             ),
             'info': ('base': #909399,
@@ -33,38 +35,45 @@ $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-danger: map.get($colors, 'danger', 'base') !default;
 $color-error: map.get($colors, 'error', 'base') !default; // 错误状态颜色，默认使用'base'色调
 $color-info: map.get($colors, 'info', 'base') !default; // 信息状态颜色，默认使用'base'色调
 
-// @mixin set-color-mix-level($type,
-//     $number,
-//     $mode: 'light',
-//     $mix-color: $color-white) {
-//     $colors: map.deep-merge(($type: ('#{$mode}-#{$number}': mix($mix-color,
-//                     map.get($colors, $type, 'base'),
-//                     math.percentage(math.div($number, 10))),
-//             ),
-//         ),
-//         $colors ) !global;
-// }
 
-// @mixin set-css-color-type($colors, $type) {
+@mixin set-color-mix-level($type,
-//     @include set-css-var-value(('color', $type), map.get($colors, $type, 'base'));
+    $number,
+    $mode: 'light',
+    $mix-color: $color-white) {
+    $colors: map.deep-merge(($type: ('#{$mode}-#{$number}': mix($mix-color,
+                    map.get($colors, $type, 'base'),
+                    math.percentage(math.div($number, 10))),
+            ),
+        ),
+        $colors ) !global;
+}
 
-//     @each $i in (3, 5, 7, 8, 9) {
+// $colors.primary.light-i
-//         @include set-css-var-value(('color', $type, 'light', $i),
+// --el-color-primary-light-i
-//             map.get($colors, $type, 'light-#{$i}'));
+// 10% 53a8ff
-//     }
+// 20% 66b1ff
+// 30% 79bbff
+// 40% 8cc5ff
+// 50% a0cfff
+// 60% b3d8ff
+// 70% c6e2ff
+// 80% d9ecff
+// 90% ecf5ff
+@each $type in $types {
+    @for $i from 1 through 9 {
+        @include set-color-mix-level($type, $i, 'light', $color-white);
+    }
+}
 
-//     @include set-css-var-value(('color', $type, 'dark-2'),
+// --el-color-primary-dark-2
-//         map.get($colors, $type, 'dark-2'));
+@each $type in $types {
-// }
+    @include set-color-mix-level($type, 2, 'dark', $color-black);
+}
 
-// @each $type in $types {
-//     @for $i from 1 through 9 {
-//         @include set-color-mix-level($type, $i, 'light', $color-white);
-//     }
-// }
 
 // // --el-color-primary-dark-2
 // @each $type in $types {
@@ -95,11 +104,11 @@ $border-color: map.merge(('': #f6f6f6,
 
 
 :root {
-    --el-color-primary: #0064AA !important;
+    // --el-color-primary: #0064AA !important;
 
-    // @each $type in $types {
+    @each $type in $types {
-    //     @include set-css-color-type($colors, $type);
+        @include set-css-color-type($colors, $type);
-    // }
+    }
 
     @include set-css-var-value('main-space', $main-space);
     @include set-css-var-value('color-primary-light', $primary-light);

ui/dasadmin/src/utils/layout.ts

@@ -12,7 +12,7 @@ export function mainHeight(extra = 0): CSSProperties {
     let height = extra
     const adminLayoutMainExtraHeight: anyObj = {
         Default: 70,
-        Classic: 148,
+        Classic: 150,
         Streamline: 60,
     }
     if (isAdminApp()) {