feat: 更新颜色变量为SCSS主题变量，优化样式结构

Author: weilei

packages/element-x-ui/src/components/ThoughtChain/main.vue

@@ -52,7 +52,6 @@
 <script>
 import { get } from 'lodash'
 import ElXTypewriter from '../Typewriter/main.vue'
-
 export default {
     name: 'ElXThoughtChain',
     components: {
@@ -120,11 +119,12 @@ export default {
     data() {
         return {
             colorArr: {
-                info: 'var(--el-color-primary)',
-                success: 'var(--el-color-success)',
-                warning: 'var(--el-color-warning)',
-                danger: 'var(--el-color-danger)',
-                primary: 'var(--el-color-primary)',
+                // 使用与SCSS变量对应的字符串表示
+                info: 'var(--color-info, #909399)',
+                success: 'var(--color-success, #67C23A)',
+                warning: 'var(--color-warning, #E6A23C)',
+                danger: 'var(--color-danger, #F56C6C)',
+                primary: 'var(--color-primary, #409EFF)',
             },
             defaultActiveNodes: [],
         }
@@ -200,8 +200,6 @@ export default {
         getEle() {
             if (this.getLineColor && this.$refs.timelineRef && this.lineGradient) {
                 const ele = this.$refs.timelineRef.$el.children[0].children
-                console.log(ele)
-
                 this.setRadialGradient(this.getLineColor, ele)
             }
         },

packages/element-x-ui/src/styles/ThoughtChain.scss

@@ -9,15 +9,15 @@
     .el-button {
       cursor: default !important;
 
-      &:active {
-        background-color: $--el-x-fill-color !important;
-        border-color: $--el-x-fill-color !important;
-      }
-
-      &:hover {
-        background-color: $--el-x-fill-color !important;
-        border-color: $--el-x-fill-color !important;
-      }
+      // &:active {
+      //   background-color: $--el-x-fill-color !important;
+      //   border-color: $--el-x-fill-color !important;
+      // }
+
+      // &:hover {
+      //   background-color: $--el-x-fill-color !important;
+      //   border-color: $--el-x-fill-color !important;
+      // }
     }
   }
 
@@ -110,5 +110,4 @@
   100% {
     transform: rotate(360deg);
   }
-}
-
+}

packages/element-x-ui/src/theme/var.scss

@@ -1,6 +1,18 @@
 @import "~element-ui/packages/theme-chalk/src/common/var";
 
+:root {
+  --color-primary: #{$--color-primary};
+  --color-success: #{$--color-success};
+  --color-warning: #{$--color-warning};
+  --color-danger: #{$--color-danger};
+  --color-info: #{$--color-info};
+
+  $--el-x-color-primary: $--color-primary;
+  $--el-x-color-success: $--color-success;
+}
+
 $--el-x-color-primary: $--color-primary;
+$--el-x-color-success: $--color-success;
 // 字体大小
 $--el-x-font-size-small: $--font-size-small !default;
 $--el-x-font-size-base: $--font-size-base !default;