feat: 主题色更换

mengqiuleo · Jun 3, 2023 · 0f38593 · 0f38593
1 parent 0fca1b3
commit 0f38593
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 35 deletions.
diff --git a/packages/tree/src/App.vue b/packages/tree/src/App.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
-import vxeTree from './vxe-tree/tree';
+import vTree from './vxe-tree/tree';
 
 const data = ref([
   {
@@ -72,8 +72,8 @@ const treeRef = ref(null);
 
 <template>
   <div class="container">
-    <vxeTree class="mb-2" :data="data" accordion ref="treeRef">
-    </vxeTree>
+    <vTree class="mb-2" :data="data" check accordion ref="treeRef">
+    </vTree>
 
   </div>
 </template>

diff --git a/packages/tree/src/checkbox/checkbox.scss b/packages/tree/src/checkbox/checkbox.scss
@@ -1,4 +1,4 @@
-$vxe-prefix: vxe;
+@import '../vxe-tree/tree-var.scss';
 
 $font-size-map: (
   md: 12px,
@@ -41,10 +41,10 @@ $checkbox-label-height-map: (
   &.active,
   &.half-checked {
     &:not(.disabled) .#{$vxe-prefix}-checkbox__material:not(.custom-color) {
-      border-color: #5e7ce0;
+      border-color: $vxe-brand;
     }
     .#{$vxe-prefix}-checkbox--bordered {
-      border-color: #5e7ce0;
+      border-color: $vxe-brand;
     }
   }
 
@@ -61,7 +61,7 @@ $checkbox-label-height-map: (
       transition: background-size 0.2s ease-in-out, border-color 0.2s ease-in-out;
 
       &:hover {
-        border-color: #5e7ce0;
+        border-color: $vxe-brand;
       }
     }
   }
@@ -75,7 +75,7 @@ $checkbox-label-height-map: (
 
   &.half-checked {
     .#{$vxe-prefix}-checkbox__material:not(.custom-color) {
-      background-color: #5e7ce0;
+      background-color: $vxe-brand;
 
       & > .#{$vxe-prefix}-checkbox__halfchecked-bg {
         opacity: 1;
@@ -105,7 +105,7 @@ $checkbox-label-height-map: (
     user-select: none;
     border: 1px solid #adb0b8;
     border-radius: 2px;
-    background: linear-gradient(#5e7ce0, #5e7ce0) no-repeat 50%/0;
+    background: linear-gradient($vxe-brand, $vxe-brand) no-repeat 50%/0;
     margin-right: 8px;
     vertical-align: text-bottom;
 
@@ -141,7 +141,7 @@ $checkbox-label-height-map: (
       &:focus,
       &:active,
       &:hover {
-        background-color: #5e7ce0;
+        background-color: $vxe-brand;
       }
 
       // 激活状态深色

diff --git a/packages/tree/src/vxe-tree/basic.scss b/packages/tree/src/vxe-tree/basic.scss
diff --git a/packages/tree/src/vxe-tree/components/icon-open.tsx b/packages/tree/src/vxe-tree/components/icon-open.tsx
@@ -8,8 +8,8 @@ export const IconOpen = (): JSX.Element => (
     class="svg-icon svg-icon-close"
   >
     <g stroke-width="1" fill="none" fill-rule="evenodd">
-      <rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#5e7ce0"></rect>
-      <rect x="4" y="7" width="8" height="2" fill="#5e7ce0"></rect>
+      <rect x="0.5" y="0.5" width="15" height="15" rx="2" stroke="#90a4b7"></rect>
+      <rect x="4" y="7" width="8" height="2" fill="#90a4b7"></rect>
     </g>
   </svg>
 );
diff --git a/packages/tree/src/vxe-tree/components/tree-node.tsx b/packages/tree/src/vxe-tree/components/tree-node.tsx
@@ -69,8 +69,7 @@ export default defineComponent({
         },
         onClick: (event: MouseEvent) => {
           event.stopPropagation();
-        },
-        color: '#18a058'
+        }
       };
     });
 

diff --git a/packages/tree/src/vxe-tree/tree-var.scss b/packages/tree/src/vxe-tree/tree-var.scss
@@ -1,12 +1,32 @@
-$vxe-brand: var(--vxe-brand, #5e7ce0);                           // 品牌色
+$vxe-prefix: vxe;
+
+$keyframe-blue: #5e7ce0;
+
+
+:root {
+  --vxe-brand: #5e7ce0; //?CheckBox颜色
+  --vxe-border-radius: 4px;
+  --vxe-list-item-selected-bg: #f2f5fc; //?selected颜色
+  --vxe-danger: #f66f6a;
+  --vxe-font-size-icon: 16px;
+  --vxe-icon-fill-active: #5e7ce0;
+  --vxe-info: #5e7ce0;
+  --vxe-icon-text: #252b3a;
+  --vxe-list-item-hover-bg: #f2f2f3; //?hover颜色
+  --vxe-dividing-line: #dfe1e6;
+  --vxe-text-weak: #575d6c;
+  --vxe-font-size: 14px;
+}
+
+$vxe-brand: var(--vxe-brand, #5e7ce0);                           //* 品牌色(主要颜色)
 $vxe-border-radius: var(--vxe-border-radius, 4px); //一般圆角
 $vxe-list-item-selected-bg:  var(--vxe-list-item-selected-bg, #f2f5fc);
 $vxe-danger: var(--vxe-danger, #f66f6a);                         // 失败、错误、告警
 $vxe-font-size-icon: var(--vxe-font-size-icon, 16px); //图标大小
 $vxe-icon-fill-active: var(--vxe-icon-fill-active, #5e7ce0);             // svg图标 高亮填充色（激活状态）
 $vxe-info: var(--vxe-info, #5e7ce0);                             // 通知、一般提示、执行中
 $vxe-icon-text: var(--vxe-icon-text, #252b3a);                           // 文字图标颜色，同 正文颜色
-$vxe-list-item-hover-bg: var(--vxe-list-item-hover-bg, #f2f2f3);                         // 列表类型普通选项悬停背景
+$vxe-list-item-hover-bg: var(--vxe-list-item-hover-bg, #f2f2f3);     //* 列表类型普通选项悬停背景(hover颜色)
 $vxe-dividing-line: var(--vxe-dividing-line, #dfe1e6);           // 内容分割线，用于内容之间的分割
 $vxe-disabled-text: var(--vxe-dividing-line, #dfe1e6);           // 内容分割线，用于内容之间的分割
 $vxe-text-weak: var(--vxe-text-weak, #575d6c);                   // 弱化的正文信息（手风琴子项，表头）

diff --git a/packages/tree/src/vxe-tree/tree.scss b/packages/tree/src/vxe-tree/tree.scss
@@ -1,10 +1,6 @@
-@import './basic.scss';
+// @import './basic.scss';
 @import './tree-var.scss';
 
-$vxe-prefix: vxe;
-
-$keyframe-blue: #5e7ce0;
-
 .#{$vxe-prefix}-text-ellipsis {
   text-overflow: ellipsis;
   overflow: hidden;
@@ -14,6 +10,7 @@ $keyframe-blue: #5e7ce0;
 .#{$vxe-prefix}-tree-indicator {
   height: 1px;
   background-color: $vxe-brand;
+
   position: absolute;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -69,8 +69,7 @@ export default defineComponent({ @@
             },
             onClick: (event: MouseEvent) => {
               event.stopPropagation();
-            },
-            color: '#18a058'
+            }
           };
         });
@@ Expand Down @@