From 94ca93fb21be5c59d6cf36608932eac7a859734e Mon Sep 17 00:00:00 2001
From: yqllin <524123601@qq.com>
Date: Fri, 26 Jan 2024 17:02:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(Select):=20=E5=A2=9E=E5=8A=A0=20OptionList?=
 =?UTF-8?q?=20=E9=A1=B6=E9=83=A8=E6=8F=92=E6=A7=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/select/select.vue                | 25 +++++++++-
 components/select/style/index.less          |  9 +++-
 docs/.vitepress/components/select/addon.vue | 51 ++++++---------------
 docs/.vitepress/components/select/index.md  | 16 ++++---
 4 files changed, 54 insertions(+), 47 deletions(-)

diff --git a/components/select/select.vue b/components/select/select.vue
index dfb4fcba..826b3e1a 100644
--- a/components/select/select.vue
+++ b/components/select/select.vue
@@ -37,6 +37,13 @@
                 />
             </template>
             <template #default>
+                <div
+                    v-if="$slots.header"
+                    :class="`${prefixCls}-addon ${prefixCls}-option-header`"
+                    @mousedown.prevent
+                >
+                    <slot name="header" />
+                </div>
                 <OptionList
                     :hoverOptionValue="hoverOptionValue"
                     :options="filteredOptions"
@@ -54,10 +61,18 @@
                     @mousedown.prevent
                 />
                 <div
-                    v-if="$slots.addon"
-                    :class="`${prefixCls}-addon`"
+                    v-if="$slots.footer"
+                    :class="`${prefixCls}-addon ${prefixCls}-option-footer`"
+                    @mousedown.prevent
+                >
+                    <slot name="footer" />
+                </div>
+                <div
+                    v-else-if="$slots.addon"
+                    :class="`${prefixCls}-addon ${prefixCls}-option-footer`"
                     @mousedown.prevent
                 >
+                    {{ warnDeprecatedSlot() }}
                     <slot name="addon" />
                 </div>
             </template>
@@ -440,6 +455,11 @@ export default defineComponent({
             }
         };
 
+        const warnDeprecatedSlot = () =>
+            console.warn(
+                '[FSelect]: addon 插槽即将废弃，请使用 footer 插槽代替',
+            );
+
         return {
             prefixCls,
             isOpenedRef,
@@ -465,6 +485,7 @@ export default defineComponent({
             hoverOptionValue,
             onHover,
             onKeyDown,
+            warnDeprecatedSlot,
         };
     },
 });
diff --git a/components/select/style/index.less b/components/select/style/index.less
index 1961f918..557c7ca1 100644
--- a/components/select/style/index.less
+++ b/components/select/style/index.less
@@ -35,8 +35,15 @@
     &-addon {
         .text();
         padding: @padding-xs;
-        border-top: var(--f-border-width-base) var(--f-border-style-base)
+
+        @border-line:var(--f-border-width-base) var(--f-border-style-base)
             var(--f-border-color-split);
+        &.@{select-prefix-cls}-option-header {
+            border-bottom: @border-line;
+        }
+        &.@{select-prefix-cls}-option-footer {
+            border-top: @border-line;
+        }
     }
     &-null {
         text-align: center;
diff --git a/docs/.vitepress/components/select/addon.vue b/docs/.vitepress/components/select/addon.vue
index 9745309a..e96fb1f8 100644
--- a/docs/.vitepress/components/select/addon.vue
+++ b/docs/.vitepress/components/select/addon.vue
@@ -1,44 +1,21 @@
 <template>
-    <FSelect
-        filterable
-        valueField="key"
-        labelField="name"
-        :options="optionList"
-    >
-        <template #addon>
-            <div class="addon">如果你点开了这个例子，可能你需要它</div>
+    <FSelect filterable :options="optionList">
+        <template #header>
+            <div>如果你点开了这个例子</div>
+        </template>
+        <template #footer>
+            <div>可能你需要它</div>
         </template>
     </FSelect>
 </template>
-<script>
-import { reactive } from 'vue';
-
-const TOTAL_COUNT = 10000;
+<script setup lang="ts">
+import { ref } from 'vue';
 
-const DataItems = [];
-let count = TOTAL_COUNT;
-while (count--) {
-    const index = TOTAL_COUNT - count;
-    DataItems.push({
-        name: index,
-        key: index,
-    });
-}
+const TOTAL_COUNT = 20;
 
-export default {
-    setup() {
-        const optionList = reactive(DataItems);
-        return {
-            optionList,
-        };
-    },
-};
+const optionList = ref(
+    new Array(TOTAL_COUNT)
+        .fill(undefined)
+        .map((_, index) => ({ value: index + 1, label: index + 1 })),
+);
 </script>
-<style scoped>
-.fes-select {
-    width: 200px;
-}
-.action {
-    border-top: 1px;
-}
-</style>
diff --git a/docs/.vitepress/components/select/index.md b/docs/.vitepress/components/select/index.md
index 590ed910..e93b6477 100644
--- a/docs/.vitepress/components/select/index.md
+++ b/docs/.vitepress/components/select/index.md
@@ -118,7 +118,7 @@ clearable.vue
 nodata.vue
 :::
 
-### 底部插槽
+### 顶部、底部插槽
 
 如果你点开了这个例子，可能你需要它
 
@@ -175,13 +175,15 @@ selectGroupOption.vue
 
 ## Select Slots
 
-| 名称    | 说明                                           | 参数                                               |
-| ------- | ---------------------------------------------- | -------------------------------------------------- |
-| default | option 和 selectGroupOption 组件列表           | -                                                  |
-| empty   | 无选项的内容                                   | -                                                  |
-| option  | 自定义 `Option` 内容                           | _{ value, label, disabled, isSelected }_           |
+| 名称    | 说明                                          | 参数                                               |
+|---------|---------------------------------------------|----------------------------------------------------|
+| default | option 和 selectGroupOption 组件列表          | -                                                  |
+| empty   | 无选项的内容                                  | -                                                  |
+| option  | 自定义 `Option` 内容                          | _{ value, label, disabled, isSelected }_           |
 | tag     | 控制标签的渲染，自定义选中选项在选择框如何展示 | _{ option: SelectOption, handleClose: ()=> void }_ |
-| addon   | 弹框底部显示自定义的内容                       | -                                                  |
+| header  | 弹框顶部显示自定义的内容                      | -                                                  |
+| footer  | 弹框底部显示自定义的内容                      | -                                                  |
+| addon   | 即将废弃，请使用 footer                        | -                                                  |
 
 ## Select Methods