From 6617e2024b03a92364d9b5f482edc726eef4cee0 Mon Sep 17 00:00:00 2001
From: ocean_gao <gaopandyx@163.com>
Date: Tue, 13 Aug 2024 15:18:00 +0800
Subject: [PATCH] =?UTF-8?q?feat(SelectTree):=20=E5=A2=9E=E5=8A=A0=20filter?=
 =?UTF-8?q?TextHighlight=20=E8=BF=87=E6=BB=A4=E6=96=87=E6=9C=AC=E6=98=AF?=
 =?UTF-8?q?=E5=90=A6=E9=AB=98=E4=BA=AE=E6=98=BE=E7=A4=BA=E7=9A=84=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E9=A1=B9=20(#878)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* docs(SelectTree): 代码规范

* feat(SelectTree): 增加 filterTextHighlight 过滤文本是否高亮显示的配置项

* docs(Select): 可过滤示例补充
---
 components/select-tree/selectTree.vue         |  7 +++
 components/tree/props.ts                      |  2 +
 components/tree/treeNode.tsx                  | 13 ++++-
 .../components/select/filterable.vue          |  9 ++--
 .../components/selectTree/filterable.vue      | 54 +++++++++++--------
 .../.vitepress/components/selectTree/index.md | 41 ++++++++++----
 .../components/selectTree/multiple.vue        |  4 +-
 .../components/selectTree/withPath.vue        |  3 ++
 docs/.vitepress/components/tree/common.vue    |  1 -
 9 files changed, 94 insertions(+), 40 deletions(-)

diff --git a/components/select-tree/selectTree.vue b/components/select-tree/selectTree.vue
index cbd3ee19d..c36fe1142 100644
--- a/components/select-tree/selectTree.vue
+++ b/components/select-tree/selectTree.vue
@@ -61,6 +61,8 @@
                         virtualList
                         :style="dropdownStyle"
                         :class="`${prefixCls}-dropdown is-max-height`"
+                        :filterText="filterText"
+                        :filterTextHighlight="filterTextHighlight"
                         @update:nodeList="onChangeNodeList"
                         @select="handleSelect"
                         @check="handleCheck"
@@ -101,6 +103,8 @@
                             :inline="inline"
                             :remote="remote"
                             :loadData="loadData"
+                            :filterText="filterText"
+                            :filterTextHighlight="filterTextHighlight"
                             @update:nodeList="onChangeNodeList"
                             @select="handleSelect"
                             @check="handleCheck"
@@ -200,6 +204,7 @@ export default defineComponent({
         'focus',
         'blur',
         'clear',
+        'filter',
     ],
     setup(props, { emit, attrs }) {
         useTheme();
@@ -409,6 +414,7 @@ export default defineComponent({
 
         const handleFilterTextChange = (val: string) => {
             filterText.value = val;
+            emit('filter', val);
         };
 
         const refTree = ref(null);
@@ -473,6 +479,7 @@ export default defineComponent({
             isError,
             attrs,
             innerDisabled,
+            filterText,
         };
     },
 });
diff --git a/components/tree/props.ts b/components/tree/props.ts
index 3bc89eb00..cdc3e8674 100644
--- a/components/tree/props.ts
+++ b/components/tree/props.ts
@@ -111,6 +111,8 @@ export const treeProps = {
         type: Boolean,
         default: false,
     },
+    filterText: String,
+    filterTextHighlight: Boolean,
 } as const satisfies ComponentObjectPropsOptions;
 
 export const treePropsDefaultValue = extractPropsDefaultValue(treeProps);
diff --git a/components/tree/treeNode.tsx b/components/tree/treeNode.tsx
index aa406b756..cea67cdc6 100644
--- a/components/tree/treeNode.tsx
+++ b/components/tree/treeNode.tsx
@@ -14,6 +14,7 @@ import CaretDownOutlined from '../icon/CaretDownOutlined';
 import LoadingOutlined from '../icon/LoadingOutlined';
 import Checkbox from '../checkbox';
 import FEllipsis from '../ellipsis';
+import TextHightlight from '../text-highlight';
 import { COMPONENT_NAME, INDENT } from './const';
 import useTreeNode from './useTreeNode';
 
@@ -253,8 +254,16 @@ export default defineComponent({
             return (
                 <FEllipsis
                     class={`${prefixCls}-content-label`}
-                    content={props.label}
-                />
+                >
+                    {root.props.filterTextHighlight && root.props.filterText
+                        ? (
+                            <TextHightlight strict searchValues={[root.props.filterText]}>
+                                {props.label}
+                            </TextHightlight>
+                            )
+                        : props.label
+                    }
+                </FEllipsis>
             );
         };
 
diff --git a/docs/.vitepress/components/select/filterable.vue b/docs/.vitepress/components/select/filterable.vue
index 9b80a463a..7772dd0e3 100644
--- a/docs/.vitepress/components/select/filterable.vue
+++ b/docs/.vitepress/components/select/filterable.vue
@@ -43,7 +43,10 @@
                         :key="item.label"
                         :value="item.value"
                     >
-                        <FTextHighlight :searchValues="[filterText]" strict>{{ item.label }}</FTextHighlight>
+                        <FEllipsis>
+                            <FTextHighlight v-if="filterText" :searchValues="[filterText]" strict>{{ item.label }}</FTextHighlight>
+                            <template v-else>{{ item.label }}</template>
+                        </FEllipsis>
                     </FOption>
                 </FSelectGroupOption>
             </FSelect>
@@ -60,7 +63,7 @@ const filterTextHighlight = ref(false);
 const optionList = reactive([
     {
         value: 'HuNan',
-        label: '湖南',
+        label: '湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南',
     },
     {
         value: 'HuBei',
@@ -91,7 +94,7 @@ const cityOptions = [
             },
             {
                 value: '湖南',
-                label: '湖南',
+                label: '湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南',
             },
             {
                 value: '河南',
diff --git a/docs/.vitepress/components/selectTree/filterable.vue b/docs/.vitepress/components/selectTree/filterable.vue
index 8a5838cb4..a5295275b 100644
--- a/docs/.vitepress/components/selectTree/filterable.vue
+++ b/docs/.vitepress/components/selectTree/filterable.vue
@@ -1,24 +1,42 @@
 <template>
-    <FSpace>
-        <div>
-            默认：
-            <FSelectTree :data="data" filterable virtualList />
-        </div>
+    <FForm>
+        <FFormItem label="是否高亮:">
+            <FRadioGroup
+                v-model="filterTextHighlight"
+                :options="[
+                    { label: '否(默认)', value: false },
+                    { label: '是', value: true },
+                ]"
+            />
+        </FFormItem>
+    </FForm>
+
+    <FDivider />
 
-        <div>
-            自定义过滤函数：
+    <FForm :labelWidth="130">
+        <FFormItem label="默认:">
+            <FSelectTree :data="data" filterable :filterTextHighlight="filterTextHighlight" @filter="handleFilter" />
+        </FFormItem>
+        <FFormItem label="自定义过滤函数:">
             <FSelectTree
                 :data="data"
                 filterable
                 :filter="filter"
                 virtualList
+                :filterTextHighlight="filterTextHighlight"
             />
-        </div>
-    </FSpace>
+        </FFormItem>
+    </FForm>
 </template>
 
-<script>
-import { reactive } from 'vue';
+<script setup>
+import { reactive, ref } from 'vue';
+
+const filterTextHighlight = ref(false);
+
+function handleFilter(query) {
+    console.log('[selectTree.filterable] filter:', query);
+}
 
 function createData(level = 4, baseKey = '') {
     if (!level) {
@@ -49,17 +67,9 @@ function createLabel(level) {
     }
 }
 
-export default {
-    setup() {
-        const data = reactive(createData(4));
-        const filter = (text, option) => {
-            return option.label.indexOf(text) !== -1;
-        };
-        return {
-            data,
-            filter,
-        };
-    },
+const data = reactive(createData(4));
+const filter = (text, option) => {
+    return option.label.indexOf(text) !== -1;
 };
 </script>
 
diff --git a/docs/.vitepress/components/selectTree/index.md b/docs/.vitepress/components/selectTree/index.md
index 621068f48..51d90f9a0 100644
--- a/docs/.vitepress/components/selectTree/index.md
+++ b/docs/.vitepress/components/selectTree/index.md
@@ -16,50 +16,67 @@ app.use(FSelectTree);
 
 适用广泛的基础单选
 
---COMMON
+:::demo
+common.vue
+:::
 
 ### 可清空
 
 包含清空按钮，可将选择器清空为初始状态
 
---CLEARABLE
+:::demo
+clearable.vue
+:::
 
 ### 基础多选
 
 适用性较广的基础多选，用 `Tag` 展示已选项
 
---MULTIPLE
+:::demo
+multiple.vue
+:::
 
 ### 可搜索
 
 可以利用搜索功能快速查找选项
 
---FILTERABLE
+:::demo
+filterable.vue
+:::
 
 ### 禁用状态
 
 选择器不可用状态
 
---DISABLED
+:::demo
+disabled.vue
+:::
 
 ### 虚拟列表
 
 设置`virtualList`属性，处理大数据。
---VIRTUALLIST
+
+:::demo
+virtualList.vue
+:::
 
 ### 控制回填内容
 
---LABELFIELD
+:::demo
+labelField.vue
+:::
 
 ### 无数据
 
---NODATA
+:::demo
+nodata.vue
+:::
 
 ### 获取选中路径
 
---WITHPATH
-
---CODE
+:::demo
+withPath.vue
+:::
 
 ## SelectTree Props
 
@@ -79,6 +96,7 @@ app.use(FSelectTree);
 | modelValue / v-model  | 选中的值                                                                                                                                                                | number / string / array                          | -                     |
 | filterable            | 是否支持过滤选项                                                                                                                                                        | boolean                                          | `false`               |
 | filter                | 自定义过滤函数                                                                                                                                                          | (pattern: string, option: TreeOption) => boolean | `-`                   |
+| filterTextHighlight   | 过滤文本是否高亮                                                                                                                                                        | boolean                                          | `false`               |
 | data                  | 展示数据                                                                                                                                                                | Array\<TreeOption\>                              | `[]`                  |
 | accordion             | 手风琴模式，是否保持同级节点中只有一个节点展开                                                                                                                          | boolean                                          | `false`               |
 | defaultExpandAll      | 是否默认展开所有节点，当有 `expandedKeys` 时，`defaultExpandAll` 将失效                                                                                                 | boolean                                          | `false`               |
@@ -105,6 +123,7 @@ app.use(FSelectTree);
 | blur          | 当选择器失去焦点时触发                                                       | event                         |
 | focus         | 当选择器获得焦点时触发                                                       | event                         |
 | clear         | 点击清除按钮时触发                                                           | event                         |
+| filter        | 过滤事件                                                                     | ( query: String)              |
 
 ## SelectTree Methods
 
diff --git a/docs/.vitepress/components/selectTree/multiple.vue b/docs/.vitepress/components/selectTree/multiple.vue
index c0e12f47c..230ee2b65 100644
--- a/docs/.vitepress/components/selectTree/multiple.vue
+++ b/docs/.vitepress/components/selectTree/multiple.vue
@@ -5,7 +5,9 @@
         <FRadio value="parent">parent</FRadio>
         <FRadio value="child">child</FRadio>
     </FRadioGroup>
-    <br>
+
+    <FDivider />
+
     <FSelectTree
         :data="data"
         multiple
diff --git a/docs/.vitepress/components/selectTree/withPath.vue b/docs/.vitepress/components/selectTree/withPath.vue
index caf1ec00e..e3fbace30 100644
--- a/docs/.vitepress/components/selectTree/withPath.vue
+++ b/docs/.vitepress/components/selectTree/withPath.vue
@@ -19,6 +19,9 @@
                 <FRadio value="child">child</FRadio>
             </FRadioGroup>
         </FFormItem>
+
+        <FDivider />
+
         <FFormItem label="单选：">
             <FSelectTree
                 v-model="singleValue"
diff --git a/docs/.vitepress/components/tree/common.vue b/docs/.vitepress/components/tree/common.vue
index 529dacd34..9bb4c2e92 100644
--- a/docs/.vitepress/components/tree/common.vue
+++ b/docs/.vitepress/components/tree/common.vue
@@ -49,7 +49,6 @@ function createLabel(level) {
 export default {
     setup() {
         const data1 = reactive(createData(3));
-        console.log(JSON.stringify(data1, null, 2));
         const data2 = [
             {
                 label: '二生三',