From bbdf32fbbb958803f0f8201f00ea3e384da99ae7 Mon Sep 17 00:00:00 2001
From: lcy0620 <lc1043571047@163.com>
Date: Wed, 19 Mar 2025 10:48:54 +0800
Subject: [PATCH] feat(cascader): [cascader,tree] dark theme adaptation (#3136)

* feat(cascader): [cascader,transfer,tree] dark theme adaptation

* feat(cascader): [cascader,transfer,tree] dark theme adaptation

* feat(cascader): [cascader,transfer,tree] dark theme adaptation

* feat(cascader): [cascader,transfer,tree] dark theme adaptation

* feat(cascader): [cascader,transfer,tree] dark theme adaptation

* feat(cascader): [cascader,transfer,tree] dark theme adaptation

* feat(cascader): [cascader,transfer,tree] dark theme adaptation
---
 .../pc/app/cascader/filterable-composition-api.vue |  2 +-
 .../sites/demos/pc/app/cascader/filterable.vue     |  2 +-
 .../app/transfer/custom-render-composition-api.vue |  2 +-
 .../sites/demos/pc/app/transfer/custom-render.vue  |  2 +-
 .../demos/pc/app/tree/icons-composition-api.vue    |  4 ++--
 examples/sites/demos/pc/app/tree/icons.vue         |  4 ++--
 packages/theme/src/cascader-menu/index.less        |  2 +-
 packages/theme/src/cascader-node/index.less        | 14 ++++++++++----
 packages/theme/src/cascader-node/vars.less         |  2 +-
 packages/theme/src/cascader/index.less             |  9 +++------
 packages/theme/src/cascader/vars.less              |  4 +++-
 packages/theme/src/transfer/index.less             |  4 +++-
 packages/theme/src/transfer/vars.less              |  2 ++
 packages/theme/src/tree/index.less                 |  4 +++-
 14 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/examples/sites/demos/pc/app/cascader/filterable-composition-api.vue b/examples/sites/demos/pc/app/cascader/filterable-composition-api.vue
index 456a47b81..01b66117b 100644
--- a/examples/sites/demos/pc/app/cascader/filterable-composition-api.vue
+++ b/examples/sites/demos/pc/app/cascader/filterable-composition-api.vue
@@ -209,6 +209,6 @@ const options = ref([
 <style scoped lang="less">
 .no-data {
   text-align: center;
-  line-height: 240px;
+  line-height: 200px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/cascader/filterable.vue b/examples/sites/demos/pc/app/cascader/filterable.vue
index ce215ea96..ac266061d 100644
--- a/examples/sites/demos/pc/app/cascader/filterable.vue
+++ b/examples/sites/demos/pc/app/cascader/filterable.vue
@@ -217,6 +217,6 @@ export default {
 <style scoped lang="less">
 .no-data {
   text-align: center;
-  line-height: 240px;
+  line-height: 200px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/transfer/custom-render-composition-api.vue b/examples/sites/demos/pc/app/transfer/custom-render-composition-api.vue
index b1410f13b..a42f27c47 100644
--- a/examples/sites/demos/pc/app/transfer/custom-render-composition-api.vue
+++ b/examples/sites/demos/pc/app/transfer/custom-render-composition-api.vue
@@ -55,6 +55,6 @@ header {
 }
 :deep(.red) {
   font-weight: bold;
-  color: red;
+  color: #d94838;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/transfer/custom-render.vue b/examples/sites/demos/pc/app/transfer/custom-render.vue
index 99c9db7cc..81832d553 100644
--- a/examples/sites/demos/pc/app/transfer/custom-render.vue
+++ b/examples/sites/demos/pc/app/transfer/custom-render.vue
@@ -65,6 +65,6 @@ header {
 }
 :deep(.red) {
   font-weight: bold;
-  color: red;
+  color: #d94838;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/tree/icons-composition-api.vue b/examples/sites/demos/pc/app/tree/icons-composition-api.vue
index 1915ca621..ca3e8aaac 100644
--- a/examples/sites/demos/pc/app/tree/icons-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/icons-composition-api.vue
@@ -5,9 +5,9 @@
       :data="data"
       show-checkbox
       :expand-icon="expandIcon"
-      expand-icon-color="#c2c2c2"
+      expand-icon-color="#5291FF"
       :shrink-icon="shrinkIcon"
-      shrink-icon-color="#191919"
+      shrink-icon-color="#5291FF"
     >
       <template #prefix="{ node }">
         <component v-if="node.data.icon === 'file'" :is="tinyIconFile"></component>
diff --git a/examples/sites/demos/pc/app/tree/icons.vue b/examples/sites/demos/pc/app/tree/icons.vue
index 1af35bac6..5cb88f9c4 100644
--- a/examples/sites/demos/pc/app/tree/icons.vue
+++ b/examples/sites/demos/pc/app/tree/icons.vue
@@ -5,9 +5,9 @@
       :data="data"
       show-checkbox
       :expand-icon="expandIcon"
-      expand-icon-color="#c2c2c2"
+      expand-icon-color="#5291FF"
       :shrink-icon="shrinkIcon"
-      shrink-icon-color="#191919"
+      shrink-icon-color="#5291FF"
     >
       <template #prefix="{ node }">
         <component v-if="node.data.icon === 'file'" :is="tinyIconFile"></component>
diff --git a/packages/theme/src/cascader-menu/index.less b/packages/theme/src/cascader-menu/index.less
index f8b192fbc..67f6f4b1b 100644
--- a/packages/theme/src/cascader-menu/index.less
+++ b/packages/theme/src/cascader-menu/index.less
@@ -33,7 +33,7 @@
   }
 
   & &__wrap {
-    min-height: 204px;
+    min-height: 208px;
   }
   // tiny 新增： 直接使用级联面板时，高度要放开，不能被 tiny-scrollbar限制了
   & &__wrap-expand {
diff --git a/packages/theme/src/cascader-node/index.less b/packages/theme/src/cascader-node/index.less
index 7b47bfd07..30386d842 100644
--- a/packages/theme/src/cascader-node/index.less
+++ b/packages/theme/src/cascader-node/index.less
@@ -29,12 +29,12 @@
     background: var(--tv-CascaderNode-selectable-active-bg-color);
     color: var(--tv-CascaderNode-selectable-text-color);
     &:hover {
-      background: var(--tv-CascaderNode-selectable-hover-bg-color);
+      background: var(--tv-CascaderNode-hover-bg-color);
     }
   }
 
   &.in-active-path:hover {
-    background: var(--tv-CascaderNode-selectable-hover-bg-color);
+    background: var(--tv-CascaderNode-hover-bg-color);
   }
 
   &:not(.is-disabled):not(.in-active-path):not(.is-active) {
@@ -62,7 +62,7 @@
 
   &__prefix,
   &__postfix {
-    font-size: var(--tv-CascaderNode-icon-font-size);
+    font-size: var(--tv-CascaderNode-icon-size);
     fill: var(--tv-CascaderNode-icon-color);
   }
 
@@ -73,6 +73,9 @@
     }
     .@{cascader-node-prefix-cls}__label {
       font-weight: var(--tv-CascaderNode-active-font-weight);
+      svg {
+        fill: var(--tv-CascaderNode-active-icon-color);
+      }
     }
   }
 
@@ -99,7 +102,10 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-
+    svg {
+      font-size: var(--tv-CascaderNode-icon-size);
+      fill: var(--tv-CascaderNode-icon-color);
+    }
     // 兼容ie10-ie11
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
       flex-basis: auto;
diff --git a/packages/theme/src/cascader-node/vars.less b/packages/theme/src/cascader-node/vars.less
index 82e9256da..01f0cf675 100644
--- a/packages/theme/src/cascader-node/vars.less
+++ b/packages/theme/src/cascader-node/vars.less
@@ -26,7 +26,7 @@
   // 下拉列表子项禁用状态时的背景色
   --tv-CascaderNode-disabled-bg-color: var(--tv-color-bg-disabled, #f0f0f0);
   // 下拉列表子项的icon图标的字体大小
-  --tv-CascaderNode-icon-font-size: var(--tv-font-size-sm, 12px);
+  --tv-CascaderNode-icon-size: var(--tv-font-size-sm, 12px);
   // 下拉列表子项的icon图标的色
   --tv-CascaderNode-icon-color: var(--tv-color-icon, #808080);
   // 下拉列表子项禁用时的icon图标的色
diff --git a/packages/theme/src/cascader/index.less b/packages/theme/src/cascader/index.less
index 717f00184..a2d4ed547 100644
--- a/packages/theme/src/cascader/index.less
+++ b/packages/theme/src/cascader/index.less
@@ -114,13 +114,10 @@
       .@{cascader-prefix-cls}-panel {
         justify-content: flex-start;
         align-items: flex-start;
+        border: solid 1px var(--tv-Cascader-border-color);
       }
-      .@{cascader-prefix-cls}-menu {
-        border: 1px solid #e4e7ed;
-        background:var(--tv-Cascader-dropdown-bg-color);
-        &:not(:first-child) {
-          margin-left: -1px;
-        }
+      .@{cascader-prefix-cls}-menu {  
+        background:var(--tv-Cascader-dropdown-bg-color);   
         .@{cascader-prefix-cls}-menu__wrap {
           height: auto;
           padding-bottom: 6px;
diff --git a/packages/theme/src/cascader/vars.less b/packages/theme/src/cascader/vars.less
index 05cf619c1..6f9b69919 100644
--- a/packages/theme/src/cascader/vars.less
+++ b/packages/theme/src/cascader/vars.less
@@ -15,6 +15,8 @@
   --tv-Cascader-font-size: var(--tv-font-size-default, 14px);
   // 输入框图标字体大小
   --tv-Cascader-input-icon-font-size: 10px; // 无对应变量
+  // 下拉菜单边框色
+  --tv-Cascader-border-color: var(--tv-color-border-divider);
   // 悬浮时显示的边框色
   --tv-Cascader-hover-border-color: var(--tv-color-border-hover, #191919);
   // 聚焦时显示的边框色
@@ -54,7 +56,7 @@
   // 下拉列表子项悬浮时的背景色（没有生效）
   --tv-Cascader-item-hover-bg-color: var(--tv-color-bg-hover);
   // 搜索后下拉列表无匹配数据的文本色
-  --tv-Cascader-empty-text-color: var(--tv-color-text-weaken, #808080);
+  --tv-Cascader-empty-text-color: var(--tv-color-text-secondary);
   // 搜索框的文本色（没有生效）
   --tv-Cascader-search-input-text-color: var(--tv-color-text, #191919);
   // 搜索框的占位符的文本色（没有生效）
diff --git a/packages/theme/src/transfer/index.less b/packages/theme/src/transfer/index.less
index 5584a6b42..e70edaf51 100644
--- a/packages/theme/src/transfer/index.less
+++ b/packages/theme/src/transfer/index.less
@@ -153,7 +153,9 @@
     text-align: left;
     padding-right: var(--tv-Transfer-panel-body-padding-right);
     padding-left: var(--tv-Transfer-panel-body-padding-left);
-
+    .tiny-table.simple table tbody tr:has(td svg.is-check) {
+      background-color: var(--tv-Transfer-panel-item-active-bg-color);
+    }
     &.is-with-footer {
       padding-bottom: var(--tv-Transfer-panel-body-footer-padding-bottom);
       height: var(--tv-Transfer-panel-body-footer-height);
diff --git a/packages/theme/src/transfer/vars.less b/packages/theme/src/transfer/vars.less
index 1e1d520dd..9a559c345 100644
--- a/packages/theme/src/transfer/vars.less
+++ b/packages/theme/src/transfer/vars.less
@@ -83,6 +83,8 @@
   --tv-Transfer-panel-item-hover-text-color: var(--tv-color-text, #191919);
   // 面板悬浮时背景色
   --tv-Transfer-panel-item-hover-bg-color: var(--tv-color-bg, #f5f5f5);
+  // 面板选中时背景色
+  --tv-Transfer-panel-item-active-bg-color: var(--tv-color-bg-active-emphasize-light);
   // 面板搜索框高度
   --tv-Transfer-panel-filter-height: 32px;
   // 面板搜索框字体大小
diff --git a/packages/theme/src/tree/index.less b/packages/theme/src/tree/index.less
index d3fc6e4f7..93aa42b61 100644
--- a/packages/theme/src/tree/index.less
+++ b/packages/theme/src/tree/index.less
@@ -360,8 +360,10 @@
     overflow: hidden;
     padding-left: var(--tv-Tree-node-padding-left);
 
-    svg {
+    & > svg {
       fill: var(--tv-Tree-node-operate-icon-color);
+      font-size: var(--tv-Tree-node-operate-icon-font-size);
+      margin-right: calc(var(--tv-Tree-node-label-margin-left) / 2);
       &:hover {
         fill: var(--tv-Tree-node-checked-icon-color);
       }