feat(Tree): 节点选择箭头图标样式优化，增加点击区域

WeBankFinTech · Dec 4, 2024 · bec26f4 · bec26f4
1 parent 8029e7c
commit bec26f4
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/components/tree/style/index.less b/components/tree/style/index.less
@@ -4,7 +4,7 @@
 
 @tree-prefix-cls: ~'@{cls-prefix}-tree';
 @tree-indent: 16px;
-@tree-switcher-width: 16px;
+@tree-switcher-width: calc(@font-size-head + @padding-xs);
 @tree-selected-background-color: var(--f-hover-color-light);
 
 .@{tree-prefix-cls} {
@@ -73,10 +73,13 @@
         display: flex;
         align-items: center;
         justify-content: center;
+    }
+    &-node-checkbox {
         margin-right: @padding-xs;
     }
     &-node-switcher {
         width: @tree-switcher-width;
+        padding-right: @padding-xs;
         font-size: @font-size-head;
         &.no-expand {
             width: 0; // 保留 margin-right，使得没有 switcher 的时候 tree node 仍有一定左边距

diff --git a/docs/.vitepress/components/tree/fix.vue b/docs/.vitepress/components/tree/fix.vue
@@ -4,7 +4,7 @@
 
 <script>
 import { h, reactive } from 'vue';
-import { PictureOutlined, PlusCircleOutlined } from '@fesjs/fes-design/icon';
+import { AppstoreOutlined, PictureOutlined, PlusCircleOutlined } from '@fesjs/fes-design/icon';
 
 function createData(level = 1, baseKey = '', prefix, suffix) {
     if (!level) {
@@ -13,7 +13,12 @@ function createData(level = 1, baseKey = '', prefix, suffix) {
     return Array.apply(null, { length: 2 }).map((_, index) => {
         const key = `${baseKey}${level}${index}`;
         return {
-            label: createLabel(level),
+            label: () => h('div', {
+                class: 'fix-node-content',
+            }, [
+                createLabel(level),
+                h(AppstoreOutlined),
+            ]),
             value: key,
             children: createData(level - 1, key, prefix, suffix),
             prefix: prefix ? () => h(PictureOutlined) : null,
@@ -47,3 +52,13 @@ export default {
     },
 };
 </script>
+
+<style>
+.fix-node-content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: start;
+    gap: 5px;
+}
+</style>