npmapps 1.0.21 → 1.0.23

package/app/wujie-vue3-child/src/views/aiCoach/departmentPersonnel/index.jsx

@@ -0,0 +1,1459 @@
+import { defineComponent, ref } from 'vue'
+import DepartmentSelector from './components/DepartmentSelector.jsx'
+import PersonnelSelector from './components/PersonnelSelector.jsx'
+import DepartmentPersonnelSelector from './components/DepartmentPersonnelSelector.jsx'
+import DepartmentSelectorV2 from './components/DepartmentSelectorV2.jsx'
+import OptionsSelector from './components/OptionsSelector.jsx'
+
+/**
+ * 部门人员选择组件
+ * @description 用于选择部门和人员
+ */
+export default defineComponent({
+    name: 'DepartmentPersonnel',
+
+    setup() {
+        // 折叠面板状态（控制哪些面板展开）
+        const activeNames = ref([])
+
+        // ===== 部门选择器相关 =====
+        // 单选模式 - 已选部门
+        const singleSelectedDepartment = ref(null)
+
+        // 多选模式 - 已选部门
+        const multipleSelectedDepartments = ref([ { id: 910, label: '后端开发组' },
+            { id: 911, label: '前端开发组' },
+            { id: 912, label: '测试组' }])
+
+        // 多选 - collapse-tags 模式
+        const collapseTagsDepartments = ref([ { id: 910, label: '后端开发组' },
+            { id: 911, label: '前端开发组' },
+            { id: 912, label: '测试组' }])
+
+        // 多选 - collapse-tags-tooltip 模式
+        const collapseTagsTooltipDepartments = ref([ { id: 910, label: '后端开发组' },
+            { id: 911, label: '前端开发组' },
+            { id: 912, label: '测试组' }])
+
+        // 多选 - max-collapse-tags 模式
+        const maxCollapseTagsDepartments = ref([])
+
+        // 按钮模式 - 单选
+        const buttonModeSingleDepartment = ref(null)
+
+        // 按钮模式 - 多选
+        const buttonModeMultipleDepartments = ref([])
+
+        // ===== 人员选择器相关 =====
+        // 单选模式 - 已选人员
+        const singleSelectedPersonnel = ref(null)
+
+        // 多选模式 - 已选人员
+        const multipleSelectedPersonnel = ref([])
+
+        // 多选 - collapse-tags 模式
+        const collapseTagsPersonnel = ref([])
+
+        // 多选 - collapse-tags-tooltip 模式
+        const collapseTagsTooltipPersonnel = ref([])
+
+        // 多选 - max-collapse-tags 模式
+        const maxCollapseTagsPersonnel = ref([])
+
+        // 按部门过滤的人员选择
+        const departmentFilteredPersonnel = ref([])
+        const selectedDepartmentForFilter = ref(911) // 默认选择前端开发组
+
+        // 按钮模式 - 单选
+        const buttonModeSinglePersonnel = ref(null)
+
+        // 按钮模式 - 多选
+        const buttonModeMultiplePersonnel = ref([])
+
+        // ===== 三栏人员选择器相关 =====
+        // 单选模式 - 已选人员
+        const threeColumnSinglePersonnel = ref(null)
+
+        // 多选模式 - 已选人员
+        const threeColumnMultiplePersonnel = ref([
+    {
+        "id": 1001,
+        "name": "张伟",
+        "departmentId": 1,
+        "position": "部门总经理",
+        "phone": "13800000001",
+        "email": "zhangwei@bank.com"
+    },
+    {
+        "id": 1002,
+        "name": "王芳",
+        "departmentId": 11,
+        "position": "招聘中心主任",
+        "phone": "13800000002",
+        "email": "wangfang@bank.com"
+    }
+])
+
+        // 多选 - collapse-tags 模式
+        const threeColumnCollapseTagsPersonnel = ref([])
+
+        // 多选 - collapse-tags-tooltip 模式
+        const threeColumnCollapseTagsTooltipPersonnel = ref([])
+
+        // 多选 - max-collapse-tags 模式
+        const threeColumnMaxCollapseTagsPersonnel = ref([])
+
+        // 不默认选择第一个部门
+        const threeColumnNoDefaultDepartment = ref([])
+
+        // 按钮模式 - 单选
+        const threeColumnButtonSinglePersonnel = ref(null)
+
+        // 按钮模式 - 多选
+        const threeColumnButtonMultiplePersonnel = ref([])
+
+        // ===== V2 版本选择器（基于 PopoverSelector）=====
+        // 单选模式
+        const v2SingleDepartment = ref(null)
+
+        // 多选模式
+        const v2MultipleDepartments = ref([])
+
+        // 按钮模式 - 单选
+        const v2ButtonSingleDepartment = ref(null)
+
+        // 按钮模式 - 多选
+        const v2ButtonMultipleDepartments = ref([])
+
+        // ===== 通用选项选择器相关 =====
+        // 模拟选项数据
+        const statusOptions = [
+            { label: '全部', value: '' },
+            { label: '待审核', value: 'pending' },
+            { label: '已通过', value: 'approved' },
+            { label: '已拒绝', value: 'rejected' },
+            { label: '已关闭', value: 'closed' }
+        ]
+
+        const priorityOptions = [
+            { label: '全部', value: '' },
+            { label: '低', value: 1 },
+            { label: '中', value: 2 },
+            { label: '高', value: 3 },
+            { label: '紧急', value: 4 }
+        ]
+
+        // 单选模式 - 状态选择
+        const singleStatusOption = ref(null)
+
+        // 多选模式 - 优先级选择
+        const multiplePriorityOptions = ref([])
+
+        // 按钮模式 - 单选
+        const buttonSingleStatus = ref(null)
+
+        // 按钮模式 - 多选
+        const buttonMultiplePriority = ref([])
+
+        // 无搜索框模式
+        const noFilterStatus = ref(null)
+
+        // ===== 反显演示数据 =====
+        // 部门单选反显
+        const refluxDept = ref({ id: 911, label: '前端开发组' })
+
+        // 部门多选反显
+        const refluxDepts = ref([
+            { id: 910, label: '后端开发组' },
+            { id: 911, label: '前端开发组' },
+            { id: 912, label: '测试组' }
+        ])
+
+        // 人员单选反显
+        const refluxPerson = ref({
+            id: 10245,
+            name: '张三',
+            position: '高级工程师',
+            phone: '13800138001',
+            email: 'zhangsan@example.com'
+        })
+
+        // 人员多选反显
+        const refluxPersons = ref([
+            { id: 10245, name: '张三', position: '高级工程师', phone: '13800138001' },
+            { id: 10246, name: '李四', position: '中级工程师', phone: '13800138002' },
+            { id: 10247, name: '王五', position: '初级工程师', phone: '13800138003' }
+        ])
+
+        /**
+         * 处理单选部门选择变化
+         * @param {number|string} selected - 选中的部门ID
+         */
+        const handleSingleChange = (selected) => {
+            console.log('单选 - 已选部门ID:', selected)
+        }
+
+        /**
+         * 处理多选部门选择变化
+         * @param {Array} selected - 选中的部门ID列表
+         */
+        const handleMultipleChange = (selected) => {
+            console.log('多选 - 已选部门ID列表:', selected)
+        }
+
+        /**
+         * 处理单选人员选择变化
+         * @param {number|string} selected - 选中的人员ID
+         */
+        const handleSinglePersonnelChange = (selected) => {
+            console.log('单选 - 已选人员ID:', selected)
+        }
+
+        /**
+         * 处理多选人员选择变化
+         * @param {Array} selected - 选中的人员ID列表
+         */
+        const handleMultiplePersonnelChange = (selected) => {
+            console.log('多选 - 已选人员ID列表:', selected)
+        }
+
+        /**
+         * 处理三栏选择器单选人员变化
+         * @param {number|string} selected - 选中的人员ID
+         */
+        const handleThreeColumnSingleChange = (selected) => {
+            console.log('三栏选择器 - 单选 - 已选人员ID:', selected)
+        }
+
+        /**
+         * 处理三栏选择器多选人员变化
+         * @param {Array} selected - 选中的人员ID列表
+         */
+        const handleThreeColumnMultipleChange = (selected) => {
+            console.log('三栏选择器 - 多选 - 已选人员ID列表:', selected)
+        }
+
+        /**
+         * 处理选项选择器单选变化
+         * @param {Object} selected - 选中的选项对象
+         */
+        const handleOptionSingleChange = (selected) => {
+            console.log('选项选择器 - 单选 - 已选选项:', selected)
+        }
+
+        /**
+         * 处理选项选择器多选变化
+         * @param {Array} selected - 选中的选项对象列表
+         */
+        const handleOptionMultipleChange = (selected) => {
+            console.log('选项选择器 - 多选 - 已选选项列表:', selected)
+        }
+
+        return () => {
+            return (
+                <div style={{ padding: '20px' }}>
+                    <h2>部门人员选择组件演示</h2>
+
+                    <el-collapse v-model={activeNames.value} style={{ marginTop: '20px' }}>
+                        {/* ==================== 部门选择器 ==================== */}
+                        <el-collapse-item name="1">
+                            {{
+                                title: () => (
+                                    <h2 style={{ margin: 0, color: '#409eff', fontSize: '18px' }}>
+                                        📋 部门选择器演示
+                                    </h2>
+                                ),
+                                default: () => (
+                                    <div style={{ padding: '10px 0' }}>
+
+                        {/* 单选模式演示 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '10px' }}>
+                                <h3 style={{ margin: 0 }}>1. 单选模式</h3>
+                                <el-button
+                                    size="small"
+                                    type="primary"
+                                    onClick={() => {
+                                        singleSelectedDepartment.value = { id: 911, label: '前端开发组' }
+                                    }}
+                                >
+                                    测试反显
+                                </el-button>
+                                <el-button
+                                    size="small"
+                                    onClick={() => {
+                                        singleSelectedDepartment.value = null
+                                    }}
+                                >
+                                    清空
+                                </el-button>
+                            </div>
+                            <div style={{ maxWidth: '400px' }}>
+                                <DepartmentSelector
+                                    v-model={singleSelectedDepartment.value}
+                                    placeholder="请选择部门（单选）"
+                                    multiple={false}
+                                    clearable={true}
+                                    onChange={handleSingleChange}
+                                />
+                            </div>
+                            {singleSelectedDepartment.value && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选部门: {JSON.stringify(singleSelectedDepartment.value)}
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 多选模式 - 默认 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '10px' }}>
+                                <h3 style={{ margin: 0 }}>2. 多选模式 - 默认（显示所有标签）</h3>
+                                <el-button
+                                    size="small"
+                                    type="primary"
+                                    onClick={() => {
+                                        multipleSelectedDepartments.value = [
+                                            { id: 910, label: '后端开发组' },
+                                            { id: 911, label: '前端开发组' },
+                                            { id: 912, label: '测试组' }
+                                        ]
+                                    }}
+                                >
+                                    测试反显
+                                </el-button>
+                                <el-button
+                                    size="small"
+                                    onClick={() => {
+                                        multipleSelectedDepartments.value = []
+                                    }}
+                                >
+                                    清空
+                                </el-button>
+                            </div>
+                            <div style={{ maxWidth: '400px' }}>
+                                <DepartmentSelector
+                                    v-model={multipleSelectedDepartments.value}
+                                    placeholder="请选择部门（多选）"
+                                    multiple={true}
+                                    clearable={true}
+                                    onChange={handleMultipleChange}
+                                />
+                            </div>
+                            {multipleSelectedDepartments.value.length > 0 && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选 {multipleSelectedDepartments.value.length} 个部门
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 多选模式 - collapse-tags */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>3. 多选模式 - collapse-tags（折叠标签）</h3>
+                            <div style={{ maxWidth: '400px' }}>
+                                <DepartmentSelector
+                                    v-model={collapseTagsDepartments.value}
+                                    placeholder="请选择部门（折叠显示）"
+                                    multiple={true}
+                                    clearable={true}
+                                    collapseTags={true}
+                                    onChange={handleMultipleChange}
+                                />
+                            </div>
+                            {collapseTagsDepartments.value.length > 0 && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选 {collapseTagsDepartments.value.length} 个部门
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 多选模式 - collapse-tags-tooltip */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>4. 多选模式 - collapse-tags-tooltip（悬停显示详情）</h3>
+                            <div style={{ maxWidth: '400px' }}>
+                                <DepartmentSelector
+                                    v-model={collapseTagsTooltipDepartments.value}
+                                    placeholder="请选择部门（悬停显示）"
+                                    multiple={true}
+                                    clearable={true}
+                                    collapseTags={true}
+                                    collapseTagsTooltip={true}
+                                    onChange={handleMultipleChange}
+                                />
+                            </div>
+                            {collapseTagsTooltipDepartments.value.length > 0 && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选 {collapseTagsTooltipDepartments.value.length} 个部门
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 多选模式 - max-collapse-tags */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>5. 多选模式 - max-collapse-tags（限制显示2个标签）</h3>
+                            <div style={{ maxWidth: '400px' }}>
+                                <DepartmentSelector
+                                    v-model={maxCollapseTagsDepartments.value}
+                                    placeholder="请选择部门（最多显示2个）"
+                                    multiple={true}
+                                    clearable={true}
+                                    maxCollapseTags={2}
+                                    onChange={handleMultipleChange}
+                                />
+                            </div>
+                            {maxCollapseTagsDepartments.value.length > 0 && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选 {maxCollapseTagsDepartments.value.length} 个部门
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 按钮模式 - 单选 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>6. 按钮模式 - 单选（带标签）</h3>
+                            <div style={{ maxWidth: '400px' }}>
+                                <DepartmentSelector
+                                    v-model={buttonModeSingleDepartment.value}
+                                    placeholder="请选择部门"
+                                    displayType="button"
+                                    label="部门:"
+                                    multiple={false}
+                                    clearable={true}
+                                    onChange={handleSingleChange}
+                                />
+                            </div>
+                            {buttonModeSingleDepartment.value && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选部门ID: {buttonModeSingleDepartment.value}
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 按钮模式 - 多选 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>7. 按钮模式 - 多选（带标签 + 数量徽章）</h3>
+                            <div style={{ maxWidth: '400px' }}>
+                                <DepartmentSelector
+                                    v-model={buttonModeMultipleDepartments.value}
+                                    placeholder="请选择部门"
+                                    displayType="button"
+                                    label="所属部门:"
+                                    multiple={true}
+                                    clearable={true}
+                                    onChange={handleMultipleChange}
+                                />
+                            </div>
+                            {buttonModeMultipleDepartments.value.length > 0 && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选 {buttonModeMultipleDepartments.value.length} 个部门
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 禁用状态演示 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>8. 禁用状态</h3>
+                            <div style={{ maxWidth: '400px' }}>
+                                <DepartmentSelector
+                                    v-model={singleSelectedDepartment.value}
+                                    placeholder="禁用状态"
+                                    disabled={true}
+                                />
+                            </div>
+                        </div>
+                                    </div>
+                                ),
+                            }}
+                        </el-collapse-item>
+
+                        {/* ==================== 人员选择器 ==================== */}
+                        <el-collapse-item name="2">
+                            {{
+                                title: () => (
+                                    <h2 style={{ margin: 0, color: '#67c23a', fontSize: '18px' }}>
+                                        👥 人员选择器演示
+                                    </h2>
+                                ),
+                                default: () => (
+                                    <div style={{ padding: '10px 0' }}>
+
+                        {/* 单选模式演示 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '10px' }}>
+                                <h3 style={{ margin: 0 }}>1. 单选模式</h3>
+                                <el-button
+                                    size="small"
+                                    type="primary"
+                                    onClick={() => {
+                                        singleSelectedPersonnel.value = {
+                                            id: 10245,
+                                            name: '张三',
+                                            position: '高级工程师',
+                                            phone: '13800138001',
+                                            email: 'zhangsan@example.com'
+                                        }
+                                    }}
+                                >
+                                    测试反显
+                                </el-button>
+                                <el-button
+                                    size="small"
+                                    onClick={() => {
+                                        singleSelectedPersonnel.value = null
+                                    }}
+                                >
+                                    清空
+                                </el-button>
+                            </div>
+                            <div style={{ maxWidth: '400px' }}>
+                                <PersonnelSelector
+                                    v-model={singleSelectedPersonnel.value}
+                                    placeholder="请选择人员（单选）"
+                                    multiple={false}
+                                    clearable={true}
+                                    onChange={handleSinglePersonnelChange}
+                                />
+                            </div>
+                            {singleSelectedPersonnel.value && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选人员: {JSON.stringify(singleSelectedPersonnel.value)}
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 多选模式 - 默认 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '10px' }}>
+                                <h3 style={{ margin: 0 }}>2. 多选模式 - 默认（显示所有标签）</h3>
+                                <el-button
+                                    size="small"
+                                    type="primary"
+                                    onClick={() => {
+                                        multipleSelectedPersonnel.value = [
+                                            { id: 10245, name: '张三', position: '高级工程师', phone: '13800138001' },
+                                            { id: 10246, name: '李四', position: '中级工程师', phone: '13800138002' },
+                                            { id: 10247, name: '王五', position: '初级工程师', phone: '13800138003' }
+                                        ]
+                                    }}
+                                >
+                                    测试反显
+                                </el-button>
+                                <el-button
+                                    size="small"
+                                    onClick={() => {
+                                        multipleSelectedPersonnel.value = []
+                                    }}
+                                >
+                                    清空
+                                </el-button>
+                            </div>
+                            <div style={{ maxWidth: '400px' }}>
+                                <PersonnelSelector
+                                    v-model={multipleSelectedPersonnel.value}
+                                    placeholder="请选择人员（多选）"
+                                    multiple={true}
+                                    clearable={true}
+                                    onChange={handleMultiplePersonnelChange}
+                                />
+                            </div>
+                            {multipleSelectedPersonnel.value.length > 0 && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选 {multipleSelectedPersonnel.value.length} 个人员
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 多选模式 - collapse-tags */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>3. 多选模式 - collapse-tags（折叠标签）</h3>
+                            <div style={{ maxWidth: '400px' }}>
+                                <PersonnelSelector
+                                    v-model={collapseTagsPersonnel.value}
+                                    placeholder="请选择人员（折叠显示）"
+                                    multiple={true}
+                                    clearable={true}
+                                    collapseTags={true}
+                                    onChange={handleMultiplePersonnelChange}
+                                />
+                            </div>
+                            {collapseTagsPersonnel.value.length > 0 && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选 {collapseTagsPersonnel.value.length} 个人员
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 多选模式 - collapse-tags-tooltip */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>4. 多选模式 - collapse-tags-tooltip（悬停显示详情）</h3>
+                            <div style={{ maxWidth: '400px' }}>
+                                <PersonnelSelector
+                                    v-model={collapseTagsTooltipPersonnel.value}
+                                    placeholder="请选择人员（悬停显示）"
+                                    multiple={true}
+                                    clearable={true}
+                                    collapseTags={true}
+                                    collapseTagsTooltip={true}
+                                    onChange={handleMultiplePersonnelChange}
+                                />
+                            </div>
+                            {collapseTagsTooltipPersonnel.value.length > 0 && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选 {collapseTagsTooltipPersonnel.value.length} 个人员
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 多选模式 - max-collapse-tags */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>5. 多选模式 - max-collapse-tags（限制显示2个标签）</h3>
+                            <div style={{ maxWidth: '400px' }}>
+                                <PersonnelSelector
+                                    v-model={maxCollapseTagsPersonnel.value}
+                                    placeholder="请选择人员（最多显示2个）"
+                                    multiple={true}
+                                    clearable={true}
+                                    maxCollapseTags={2}
+                                    onChange={handleMultiplePersonnelChange}
+                                />
+                            </div>
+                            {maxCollapseTagsPersonnel.value.length > 0 && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选 {maxCollapseTagsPersonnel.value.length} 个人员
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 按部门过滤人员 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>6. 按部门过滤人员（显示前端开发组的人员）</h3>
+                            <div style={{ maxWidth: '400px' }}>
+                                <PersonnelSelector
+                                    v-model={departmentFilteredPersonnel.value}
+                                    placeholder="请选择人员（前端开发组）"
+                                    multiple={true}
+                                    clearable={true}
+                                    departmentId={selectedDepartmentForFilter.value}
+                                    onChange={handleMultiplePersonnelChange}
+                                />
+                            </div>
+                            {departmentFilteredPersonnel.value.length > 0 && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选 {departmentFilteredPersonnel.value.length} 个人员
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 按钮模式 - 单选 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>7. 按钮模式 - 单选（带标签）</h3>
+                            <div style={{ maxWidth: '400px' }}>
+                                <PersonnelSelector
+                                    v-model={buttonModeSinglePersonnel.value}
+                                    placeholder="请选择人员"
+                                    displayType="button"
+                                    label="人员:"
+                                    multiple={false}
+                                    clearable={true}
+                                    onChange={handleSinglePersonnelChange}
+                                />
+                            </div>
+                            {buttonModeSinglePersonnel.value && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选人员ID: {buttonModeSinglePersonnel.value}
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 按钮模式 - 多选 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>8. 按钮模式 - 多选（带标签 + 数量徽章）</h3>
+                            <div style={{ maxWidth: '400px' }}>
+                                <PersonnelSelector
+                                    v-model={buttonModeMultiplePersonnel.value}
+                                    placeholder="请选择人员"
+                                    displayType="button"
+                                    label="选择人员:"
+                                    multiple={true}
+                                    clearable={true}
+                                    onChange={handleMultiplePersonnelChange}
+                                />
+                            </div>
+                            {buttonModeMultiplePersonnel.value.length > 0 && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选 {buttonModeMultiplePersonnel.value.length} 个人员
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 禁用状态演示 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>9. 禁用状态</h3>
+                            <div style={{ maxWidth: '400px' }}>
+                                <PersonnelSelector
+                                    v-model={singleSelectedPersonnel.value}
+                                    placeholder="禁用状态"
+                                    disabled={true}
+                                />
+                            </div>
+                        </div>
+                                    </div>
+                                ),
+                            }}
+                        </el-collapse-item>
+
+                        {/* ==================== 三栏人员选择器 ==================== */}
+                        <el-collapse-item name="3">
+                            {{
+                                title: () => (
+                                    <h2 style={{ margin: 0, color: '#e6a23c', fontSize: '18px' }}>
+                                        🏢 三栏人员选择器演示（部门树 + 人员列表 + 已选人员）
+                                    </h2>
+                                ),
+                                default: () => (
+                                    <div style={{ padding: '10px 0' }}>
+
+                        {/* 单选模式演示 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '10px' }}>
+                                <h3 style={{ margin: 0 }}>1. 单选模式</h3>
+                                <el-button
+                                    size="small"
+                                    type="primary"
+                                    onClick={() => {
+                                        threeColumnSinglePersonnel.value = {
+                                            id: 1001,
+                                            name: '张伟',
+                                            departmentId: 1,
+                                            position: '部门总经理',
+                                            phone: '13800000001',
+                                            email: 'zhangwei@bank.com'
+                                        }
+                                    }}
+                                >
+                                    测试反显
+                                </el-button>
+                                <el-button
+                                    size="small"
+                                    onClick={() => {
+                                        threeColumnSinglePersonnel.value = null
+                                    }}
+                                >
+                                    清空
+                                </el-button>
+                            </div>
+                            <div style={{ maxWidth: '600px' }}>
+                                <DepartmentPersonnelSelector
+                                    v-model={threeColumnSinglePersonnel.value}
+                                    placeholder="请选择人员（单选）"
+                                    multiple={false}
+                                    clearable={true}
+                                    onChange={handleThreeColumnSingleChange}
+                                />
+                            </div>
+                            {threeColumnSinglePersonnel.value && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选人员: {JSON.stringify(threeColumnSinglePersonnel.value)}
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 多选模式 - 默认 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '10px' }}>
+                                <h3 style={{ margin: 0 }}>2. 多选模式 - 默认（显示所有标签）</h3>
+                                <el-button
+                                    size="small"
+                                    type="primary"
+                                    onClick={() => {
+                                        threeColumnMultiplePersonnel.value = [
+                                            {
+                                                id: 1001,
+                                                name: '张伟',
+                                                departmentId: 1,
+                                                position: '部门总经理',
+                                                phone: '13800000001',
+                                                email: 'zhangwei@bank.com'
+                                            },
+                                            {
+                                                id: 1002,
+                                                name: '王芳',
+                                                departmentId: 11,
+                                                position: '招聘中心主任',
+                                                phone: '13800000002',
+                                                email: 'wangfang@bank.com'
+                                            }
+                                        ]
+                                    }}
+                                >
+                                    测试反显
+                                </el-button>
+                                <el-button
+                                    size="small"
+                                    onClick={() => {
+                                        threeColumnMultiplePersonnel.value = []
+                                    }}
+                                >
+                                    清空
+                                </el-button>
+                            </div>
+                            <div style={{ maxWidth: '600px' }}>
+                                <DepartmentPersonnelSelector
+                                    v-model={threeColumnMultiplePersonnel.value}
+                                    placeholder="请选择人员（多选）"
+                                    multiple={true}
+                                    clearable={true}
+                                    onChange={handleThreeColumnMultipleChange}
+                                />
+                            </div>
+                            {threeColumnMultiplePersonnel.value.length > 0 && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选 {threeColumnMultiplePersonnel.value.length} 个人员
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 多选模式 - collapse-tags */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>3. 多选模式 - collapse-tags（折叠标签）</h3>
+                            <div style={{ maxWidth: '600px' }}>
+                                <DepartmentPersonnelSelector
+                                    v-model={threeColumnCollapseTagsPersonnel.value}
+                                    placeholder="请选择人员（折叠显示）"
+                                    multiple={true}
+                                    clearable={true}
+                                    collapseTags={true}
+                                    onChange={handleThreeColumnMultipleChange}
+                                />
+                            </div>
+                            {threeColumnCollapseTagsPersonnel.value.length > 0 && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选 {threeColumnCollapseTagsPersonnel.value.length} 个人员
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 多选模式 - collapse-tags-tooltip */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>4. 多选模式 - collapse-tags-tooltip（悬停显示详情）</h3>
+                            <div style={{ maxWidth: '600px' }}>
+                                <DepartmentPersonnelSelector
+                                    v-model={threeColumnCollapseTagsTooltipPersonnel.value}
+                                    placeholder="请选择人员（悬停显示）"
+                                    multiple={true}
+                                    clearable={true}
+                                    collapseTags={true}
+                                    collapseTagsTooltip={true}
+                                    onChange={handleThreeColumnMultipleChange}
+                                />
+                            </div>
+                            {threeColumnCollapseTagsTooltipPersonnel.value.length > 0 && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选 {threeColumnCollapseTagsTooltipPersonnel.value.length} 个人员
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 多选模式 - max-collapse-tags */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>5. 多选模式 - max-collapse-tags（限制显示2个标签）</h3>
+                            <div style={{ maxWidth: '600px' }}>
+                                <DepartmentPersonnelSelector
+                                    v-model={threeColumnMaxCollapseTagsPersonnel.value}
+                                    placeholder="请选择人员（最多显示2个）"
+                                    multiple={true}
+                                    clearable={true}
+                                    maxCollapseTags={2}
+                                    onChange={handleThreeColumnMultipleChange}
+                                />
+                            </div>
+                            {threeColumnMaxCollapseTagsPersonnel.value.length > 0 && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选 {threeColumnMaxCollapseTagsPersonnel.value.length} 个人员
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 禁用状态演示 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>6. 禁用状态</h3>
+                            <div style={{ maxWidth: '600px' }}>
+                                <DepartmentPersonnelSelector
+                                    v-model={threeColumnSinglePersonnel.value}
+                                    placeholder="禁用状态"
+                                    disabled={true}
+                                />
+                            </div>
+                        </div>
+
+                        {/* 不默认选择第一个部门 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>7. 不默认选择第一个部门（需要手动选择部门）</h3>
+                            <div style={{ maxWidth: '600px' }}>
+                                <DepartmentPersonnelSelector
+                                    v-model={threeColumnNoDefaultDepartment.value}
+                                    placeholder="请先选择部门"
+                                    multiple={true}
+                                    clearable={true}
+                                    defaultSelectFirstDepartment={false}
+                                    onChange={handleThreeColumnMultipleChange}
+                                />
+                            </div>
+                            {threeColumnNoDefaultDepartment.value.length > 0 && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选 {threeColumnNoDefaultDepartment.value.length} 个人员
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 按钮模式 - 单选 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>8. 按钮模式 - 单选（带标签）</h3>
+                            <div style={{ maxWidth: '600px' }}>
+                                <DepartmentPersonnelSelector
+                                    v-model={threeColumnButtonSinglePersonnel.value}
+                                    placeholder="请选择人员"
+                                    displayType="button"
+                                    label="选择人员:"
+                                    multiple={false}
+                                    clearable={true}
+                                    onChange={handleThreeColumnSingleChange}
+                                />
+                            </div>
+                            {threeColumnButtonSinglePersonnel.value && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选人员ID: {threeColumnButtonSinglePersonnel.value}
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 按钮模式 - 多选 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>9. 按钮模式 - 多选（带标签 + 数量徽章）</h3>
+                            <div style={{ maxWidth: '600px' }}>
+                                <DepartmentPersonnelSelector
+                                    v-model={threeColumnButtonMultiplePersonnel.value}
+                                    placeholder="请选择人员"
+                                    displayType="button"
+                                    label="已选人员:"
+                                    multiple={true}
+                                    clearable={true}
+                                    onChange={handleThreeColumnMultipleChange}
+                                />
+                            </div>
+                            {threeColumnButtonMultiplePersonnel.value.length > 0 && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选 {threeColumnButtonMultiplePersonnel.value.length} 个人员
+                                </div>
+                            )}
+                        </div>
+                                    </div>
+                                ),
+                            }}
+                        </el-collapse-item>
+
+                        {/* ==================== V2 版本选择器（基于 PopoverSelector）==================== */}
+                        <el-collapse-item name="4">
+                            {{
+                                title: () => (
+                                    <h2 style={{ margin: 0, color: '#f56c6c', fontSize: '18px' }}>
+                                        🔧 V2 版本 - 基于 PopoverSelector 通用组件（解耦设计）
+                                    </h2>
+                                ),
+                                default: () => (
+                                    <div style={{ padding: '10px 0' }}>
+                        <div style={{ marginBottom: '20px', padding: '12px', background: '#fef0f0', borderRadius: '4px', color: '#f56c6c', fontSize: '14px' }}>
+                            💡 这是使用通用 PopoverSelector 组件构建的新版本，展示了如何通过插槽解耦触发器和悬浮窗内容
+                        </div>
+
+                        {/* 输入框模式 - 单选 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>1. 输入框模式 - 单选</h3>
+                            <div style={{ maxWidth: '400px' }}>
+                                <DepartmentSelectorV2
+                                    v-model={v2SingleDepartment.value}
+                                    placeholder="请选择部门（V2单选）"
+                                    multiple={false}
+                                    clearable={true}
+                                    onChange={handleSingleChange}
+                                />
+                            </div>
+                            {v2SingleDepartment.value && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选部门ID: {v2SingleDepartment.value}
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 输入框模式 - 多选 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>2. 输入框模式 - 多选</h3>
+                            <div style={{ maxWidth: '400px' }}>
+                                <DepartmentSelectorV2
+                                    v-model={v2MultipleDepartments.value}
+                                    placeholder="请选择部门（V2多选）"
+                                    multiple={true}
+                                    clearable={true}
+                                    onChange={handleMultipleChange}
+                                />
+                            </div>
+                            {v2MultipleDepartments.value.length > 0 && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选 {v2MultipleDepartments.value.length} 个部门
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 按钮模式 - 单选 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>3. 按钮模式 - 单选（带标签）</h3>
+                            <div style={{ maxWidth: '400px' }}>
+                                <DepartmentSelectorV2
+                                    v-model={v2ButtonSingleDepartment.value}
+                                    placeholder="请选择部门"
+                                    displayType="button"
+                                    label="部门:"
+                                    multiple={false}
+                                    clearable={true}
+                                    onChange={handleSingleChange}
+                                />
+                            </div>
+                            {v2ButtonSingleDepartment.value && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选部门ID: {v2ButtonSingleDepartment.value}
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 按钮模式 - 多选 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>4. 按钮模式 - 多选（带标签 + 数量徽章）</h3>
+                            <div style={{ maxWidth: '400px' }}>
+                                <DepartmentSelectorV2
+                                    v-model={v2ButtonMultipleDepartments.value}
+                                    placeholder="请选择部门"
+                                    displayType="button"
+                                    label="所属部门:"
+                                    multiple={true}
+                                    clearable={true}
+                                    onChange={handleMultipleChange}
+                                />
+                            </div>
+                            {v2ButtonMultipleDepartments.value.length > 0 && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选 {v2ButtonMultipleDepartments.value.length} 个部门
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 说明 */}
+                        <div style={{ marginTop: '30px', padding: '16px', background: '#f4f4f5', borderRadius: '4px' }}>
+                            <h4 style={{ marginBottom: '12px', color: '#303133' }}>💡 V2 版本优势：</h4>
+                            <ul style={{ margin: 0, paddingLeft: '20px', color: '#606266', fontSize: '14px', lineHeight: '1.8' }}>
+                                <li>✅ <strong>解耦设计</strong>：触发器和悬浮窗内容完全分离，通过插槽组合</li>
+                                <li>✅ <strong>高度可复用</strong>：PopoverSelector 可用于任何需要悬浮窗的场景</li>
+                                <li>✅ <strong>灵活配置</strong>：支持自定义宽度、高度、位置、样式等</li>
+                                <li>✅ <strong>易于扩展</strong>：可以轻松创建人员选择器、日期选择器等其他选择器</li>
+                                <li>✅ <strong>代码更简洁</strong>：业务逻辑专注于数据处理，UI 交互由通用组件处理</li>
+                            </ul>
+                        </div>
+                                    </div>
+                                ),
+                            }}
+                        </el-collapse-item>
+
+                        {/* ==================== 反显演示 ==================== */}
+                        <el-collapse-item name="5">
+                            {{
+                                title: () => (
+                                    <h2 style={{ margin: 0, color: '#67c23a', fontSize: '18px' }}>
+                                        ⭐ 反显演示（v-model 直接绑定对象）
+                                    </h2>
+                                ),
+                                default: () => (
+                                    <div style={{ padding: '10px 0' }}>
+                        <div style={{ marginBottom: '20px', padding: '12px', background: '#f0f9ff', borderRadius: '4px', color: '#0369a1', fontSize: '14px' }}>
+                            💡 <strong>v-model 直接绑定完整对象</strong>，无需 defaultData，无需加载大量数据。<br/>
+                            单选绑定对象：<code>{`{ id: 911, label: '前端开发组' }`}</code><br/>
+                            多选绑定数组：<code>{`[{ id: 910, label: '后端开发组' }, ...]`}</code>
+                        </div>
+
+                        {/* 部门选择器 - 单选反显 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>1. 部门选择器 - 单选反显</h3>
+                            <div style={{ maxWidth: '400px' }}>
+                                <DepartmentSelector
+                                    v-model={refluxDept.value}
+                                    placeholder="请选择部门"
+                                    clearable={true}
+                                    onChange={(dept) => {
+                                        console.log('选中部门对象:', dept)
+                                        refluxDept.value = dept
+                                    }}
+                                />
+                            </div>
+                            <div style={{ marginTop: '8px', color: '#606266', fontSize: '13px', background: '#f5f5f5', padding: '8px', borderRadius: '4px' }}>
+                                <div><strong>v-model:</strong> {JSON.stringify(refluxDept.value)}</div>
+                                <div style={{ color: '#67c23a', marginTop: '4px' }}>✅ 直接显示 "{refluxDept.value?.label}"，无需加载数据</div>
+                            </div>
+                        </div>
+
+                        {/* 部门选择器 - 多选反显 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>2. 部门选择器 - 多选反显</h3>
+                            <div style={{ maxWidth: '400px' }}>
+                                <DepartmentSelector
+                                    v-model={refluxDepts.value}
+                                    placeholder="请选择部门"
+                                    multiple={true}
+                                    clearable={true}
+                                    onChange={(depts) => {
+                                        console.log('选中部门列表:', depts)
+                                        refluxDepts.value = depts
+                                    }}
+                                />
+                            </div>
+                            <div style={{ marginTop: '8px', color: '#606266', fontSize: '13px', background: '#f5f5f5', padding: '8px', borderRadius: '4px' }}>
+                                <div><strong>v-model:</strong> {refluxDepts.value.map(d => d.label).join(', ')}</div>
+                                <div><strong>数量:</strong> {refluxDepts.value.length} 个部门</div>
+                                <div style={{ color: '#67c23a', marginTop: '4px' }}>✅ 直接显示标签，无需加载数据</div>
+                            </div>
+                        </div>
+
+                        {/* 人员选择器 - 单选反显 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>3. 人员选择器 - 单选反显</h3>
+                            <div style={{ maxWidth: '400px' }}>
+                                <PersonnelSelector
+                                    v-model={refluxPerson.value}
+                                    placeholder="请选择人员"
+                                    clearable={true}
+                                    onChange={(person) => {
+                                        console.log('选中人员对象:', person)
+                                        refluxPerson.value = person
+                                    }}
+                                />
+                            </div>
+                            <div style={{ marginTop: '8px', color: '#606266', fontSize: '13px', background: '#f5f5f5', padding: '8px', borderRadius: '4px' }}>
+                                <div><strong>v-model:</strong> {refluxPerson.value?.name} - {refluxPerson.value?.position}</div>
+                                <div style={{ color: '#67c23a', marginTop: '4px' }}>✅ 直接显示 "{refluxPerson.value?.name}"，无需加载数据</div>
+                            </div>
+                        </div>
+
+                        {/* 人员选择器 - 多选反显 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>4. 人员选择器 - 多选反显（按钮模式）</h3>
+                            <div style={{ maxWidth: '400px' }}>
+                                <PersonnelSelector
+                                    v-model={refluxPersons.value}
+                                    displayType="button"
+                                    label="项目成员:"
+                                    placeholder="请选择成员"
+                                    multiple={true}
+                                    clearable={true}
+                                    onChange={(persons) => {
+                                        console.log('选中人员列表:', persons)
+                                        refluxPersons.value = persons
+                                    }}
+                                />
+                            </div>
+                            <div style={{ marginTop: '8px', color: '#606266', fontSize: '13px', background: '#f5f5f5', padding: '8px', borderRadius: '4px' }}>
+                                <div><strong>v-model:</strong> {refluxPersons.value.map(p => p.name).join(', ')}</div>
+                                <div><strong>数量:</strong> {refluxPersons.value.length} 个成员</div>
+                                <div style={{ color: '#67c23a', marginTop: '4px' }}>✅ 按钮显示 "{refluxPersons.value[0]?.name} +{refluxPersons.value.length - 1}"</div>
+                            </div>
+                        </div>
+
+                        {/* 使用场景说明 */}
+                        <div style={{ marginTop: '30px', padding: '16px', background: '#f0f9ff', borderRadius: '4px' }}>
+                            <h4 style={{ marginBottom: '12px', color: '#0369a1' }}>💡 典型使用场景：</h4>
+                            <ul style={{ margin: 0, paddingLeft: '20px', color: '#0c4a6e', fontSize: '14px', lineHeight: '1.8' }}>
+                                <li><strong>编辑页面</strong>：从接口获取详情，包含完整对象，直接绑定 v-model</li>
+                                <li><strong>详情查看</strong>：只展示已选数据，不需要加载全量数据</li>
+                                <li><strong>表单回填</strong>：页面刷新或路由跳转回来，从 localStorage 恢复完整对象</li>
+                                <li><strong>性能优化</strong>：避免组件初始化时加载大量部门/人员数据（可能几千条）</li>
+                            </ul>
+                        </div>
+
+                        {/* 代码示例 */}
+                        <div style={{ marginTop: '20px', padding: '16px', background: '#fafafa', borderRadius: '4px', fontSize: '13px', fontFamily: 'monospace' }}>
+                            <div style={{ marginBottom: '8px', fontWeight: 'bold', color: '#333' }}>代码示例：</div>
+                            <pre style={{ margin: 0, overflow: 'auto' }}>{`// ✅ 正确做法：v-model 直接绑定完整对象
+const dept = ref({ id: 911, label: '前端开发组' })
+<DepartmentSelector v-model={dept.value} />
+
+// 多选
+const depts = ref([
+  { id: 910, label: '后端开发组' },
+  { id: 911, label: '前端开发组' }
+])
+<DepartmentSelector v-model={depts.value} multiple={true} />
+
+// 实际场景：从接口获取完整对象
+onMounted(async () => {
+  const userInfo = await fetchUserInfo(userId.value)
+  // 后端返回完整的部门对象
+  dept.value = {
+    id: userInfo.departmentId,
+    label: userInfo.departmentName
+  }
+  // 或者直接使用后端返回的对象
+  dept.value = userInfo.department
+})`}</pre>
+                        </div>
+                                    </div>
+                                ),
+                            }}
+                        </el-collapse-item>
+
+                        {/* ==================== 通用选项选择器 ==================== */}
+                        <el-collapse-item name="6">
+                            {{
+                                title: () => (
+                                    <h2 style={{ margin: 0, color: '#9333ea', fontSize: '18px' }}>
+                                        🎯 通用选项选择器演示（OptionsSelector）
+                                    </h2>
+                                ),
+                                default: () => (
+                                    <div style={{ padding: '10px 0' }}>
+                        <div style={{ marginBottom: '20px', padding: '12px', background: '#faf5ff', borderRadius: '4px', color: '#9333ea', fontSize: '14px' }}>
+                            💡 <strong>通用选项选择器</strong>：基于 PopoverSelector 构建，可用于任何简单的下拉选择场景，如状态选择、优先级选择等。
+                        </div>
+
+                        {/* 输入框模式 - 单选 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '10px' }}>
+                                <h3 style={{ margin: 0 }}>1. 输入框模式 - 单选（状态选择器）</h3>
+                                <el-button
+                                    size="small"
+                                    type="primary"
+                                    onClick={() => {
+                                        singleStatusOption.value = { label: '已通过', value: 'approved' }
+                                    }}
+                                >
+                                    测试反显
+                                </el-button>
+                                <el-button
+                                    size="small"
+                                    onClick={() => {
+                                        singleStatusOption.value = null
+                                    }}
+                                >
+                                    清空
+                                </el-button>
+                            </div>
+                            <div style={{ maxWidth: '300px' }}>
+                                <OptionsSelector
+                                    v-model={singleStatusOption.value}
+                                    options={statusOptions}
+                                    placeholder="请选择状态"
+                                    clearable={true}
+                                    onChange={handleOptionSingleChange}
+                                />
+                            </div>
+                            {singleStatusOption.value && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选状态: {JSON.stringify(singleStatusOption.value)}
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 输入框模式 - 多选 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '10px' }}>
+                                <h3 style={{ margin: 0 }}>2. 输入框模式 - 多选（优先级选择器）</h3>
+                                <el-button
+                                    size="small"
+                                    type="primary"
+                                    onClick={() => {
+                                        multiplePriorityOptions.value = [
+                                            { label: '高', value: 3 },
+                                            { label: '紧急', value: 4 }
+                                        ]
+                                    }}
+                                >
+                                    测试反显
+                                </el-button>
+                                <el-button
+                                    size="small"
+                                    onClick={() => {
+                                        multiplePriorityOptions.value = []
+                                    }}
+                                >
+                                    清空
+                                </el-button>
+                            </div>
+                            <div style={{ maxWidth: '300px' }}>
+                                <OptionsSelector
+                                    v-model={multiplePriorityOptions.value}
+                                    options={priorityOptions}
+                                    placeholder="请选择优先级"
+                                    multiple={true}
+                                    clearable={true}
+                                    onChange={handleOptionMultipleChange}
+                                />
+                            </div>
+                            {multiplePriorityOptions.value.length > 0 && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选 {multiplePriorityOptions.value.length} 个优先级: {multiplePriorityOptions.value.map(p => p.label).join(', ')}
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 按钮模式 - 单选 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>3. 按钮模式 - 单选（带标签）</h3>
+                            <div style={{ maxWidth: '400px' }}>
+                                <OptionsSelector
+                                    v-model={buttonSingleStatus.value}
+                                    options={statusOptions}
+                                    placeholder="请选择状态"
+                                    displayType="button"
+                                    label="状态:"
+                                    clearable={true}
+                                    onChange={handleOptionSingleChange}
+                                />
+                            </div>
+                            {buttonSingleStatus.value && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选状态: {buttonSingleStatus.value.label}
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 按钮模式 - 多选 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>4. 按钮模式 - 多选（带标签 + 数量徽章）</h3>
+                            <div style={{ maxWidth: '400px' }}>
+                                <OptionsSelector
+                                    v-model={buttonMultiplePriority.value}
+                                    options={priorityOptions}
+                                    placeholder="请选择优先级"
+                                    displayType="button"
+                                    label="优先级:"
+                                    multiple={true}
+                                    clearable={true}
+                                    onChange={handleOptionMultipleChange}
+                                />
+                            </div>
+                            {buttonMultiplePriority.value.length > 0 && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选 {buttonMultiplePriority.value.length} 个优先级
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 无搜索框模式 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>5. 无搜索框模式（选项较少时）</h3>
+                            <div style={{ maxWidth: '300px' }}>
+                                <OptionsSelector
+                                    v-model={noFilterStatus.value}
+                                    options={statusOptions}
+                                    placeholder="请选择状态"
+                                    filterable={false}
+                                    clearable={true}
+                                    onChange={handleOptionSingleChange}
+                                />
+                            </div>
+                            {noFilterStatus.value && (
+                                <div style={{ marginTop: '8px', color: '#606266', fontSize: '14px' }}>
+                                    已选状态: {noFilterStatus.value.label}
+                                </div>
+                            )}
+                        </div>
+
+                        {/* 自定义宽度和高度 */}
+                        <div style={{ marginBottom: '30px' }}>
+                            <h3>6. 自定义宽度和高度</h3>
+                            <div style={{ maxWidth: '400px' }}>
+                                <OptionsSelector
+                                    v-model={singleStatusOption.value}
+                                    options={statusOptions}
+                                    placeholder="请选择状态"
+                                    width={180}
+                                    maxHeight={200}
+                                    clearable={true}
+                                    onChange={handleOptionSingleChange}
+                                />
+                            </div>
+                        </div>
+
+                        {/* 使用说明 */}
+                        <div style={{ marginTop: '30px', padding: '16px', background: '#faf5ff', borderRadius: '4px' }}>
+                            <h4 style={{ marginBottom: '12px', color: '#9333ea' }}>💡 使用场景：</h4>
+                            <ul style={{ margin: 0, paddingLeft: '20px', color: '#581c87', fontSize: '14px', lineHeight: '1.8' }}>
+                                <li><strong>状态筛选</strong>：订单状态、任务状态、审批状态等</li>
+                                <li><strong>优先级选择</strong>：任务优先级、重要程度等</li>
+                                <li><strong>类型分类</strong>：文档类型、标签类型等</li>
+                                <li><strong>简单枚举</strong>：性别、是否启用等固定选项</li>
+                                <li><strong>替代原生 Select</strong>：更灵活的样式和交互控制</li>
+                            </ul>
+                        </div>
+
+                        {/* 代码示例 */}
+                        <div style={{ marginTop: '20px', padding: '16px', background: '#fafafa', borderRadius: '4px', fontSize: '13px', fontFamily: 'monospace' }}>
+                            <div style={{ marginBottom: '8px', fontWeight: 'bold', color: '#333' }}>代码示例：</div>
+                            <pre style={{ margin: 0, overflow: 'auto' }}>{`// 1. 定义选项数据
+const statusOptions = [
+  { label: '全部', value: '' },
+  { label: '待审核', value: 'pending' },
+  { label: '已通过', value: 'approved' },
+  { label: '已拒绝', value: 'rejected' }
+]
+
+// 2. 定义状态
+const selectedStatus = ref(null)  // 单选
+const selectedStatuses = ref([]) // 多选
+
+// 3. 使用组件
+// 单选
+<OptionsSelector
+  v-model={selectedStatus.value}
+  options={statusOptions}
+  placeholder="请选择状态"
+  clearable={true}
+  onChange={(val) => console.log('选中:', val)}
+/>
+
+// 多选
+<OptionsSelector
+  v-model={selectedStatuses.value}
+  options={statusOptions}
+  placeholder="请选择状态"
+  multiple={true}
+  clearable={true}
+/>
+
+// 按钮模式
+<OptionsSelector
+  v-model={selectedStatus.value}
+  options={statusOptions}
+  displayType="button"
+  label="状态:"
+/>
+
+// 无搜索框
+<OptionsSelector
+  v-model={selectedStatus.value}
+  options={statusOptions}
+  filterable={false}
+/>
+
+// 自定义宽度和高度
+<OptionsSelector
+  v-model={selectedStatus.value}
+  options={statusOptions}
+  width={180}
+  maxHeight={200}
+/>`}</pre>
+                        </div>
+                                    </div>
+                                ),
+                            }}
+                        </el-collapse-item>
+                    </el-collapse>
+                </div>
+            )
+        }
+    },
+})