;
+ }
+}
\ No newline at end of file
diff --git a/workspaces/ts-vue2/packages/cust/cust_h5_tree_library/src/components/cwd-tree-select/index.ts b/workspaces/ts-vue2/packages/cust/cust_h5_tree_library/src/components/cwd-tree-select/index.ts
new file mode 100644
index 00000000..6dbd4cf4
--- /dev/null
+++ b/workspaces/ts-vue2/packages/cust/cust_h5_tree_library/src/components/cwd-tree-select/index.ts
@@ -0,0 +1,7 @@
+import CwdTreeSelect from './index.vue';
+
+export {
+ CwdTreeSelect,
+};
+
+export default CwdTreeSelect;
diff --git a/workspaces/ts-vue2/packages/cust/cust_h5_tree_library/src/components/cwd-tree-select/index.vue b/workspaces/ts-vue2/packages/cust/cust_h5_tree_library/src/components/cwd-tree-select/index.vue
new file mode 100644
index 00000000..4bd8aee6
--- /dev/null
+++ b/workspaces/ts-vue2/packages/cust/cust_h5_tree_library/src/components/cwd-tree-select/index.vue
@@ -0,0 +1,1989 @@
+
+
+
+
+
+
+
+
+
{{ placeholder }}
+
+
+
+
+ {{ getItemText(item) }}
+ ×
+
+
+
+ +{{ selectedItems.length - maxTagCount }}
+
+
+
+ {{ selectedItems.length > 0 ? getItemText(selectedItems[0]) : '' }}
+
+
+
+
+
+
+
+ ×
+
+
+ ▼
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 📄
+ {{ searchQuery ? '未找到匹配项' : '暂无数据' }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
任意字段作为父节点字段测试
+
+ ✅ 已彻底修复：现在完全支持任意字段名作为父节点字段，不再依赖预设列表
+
+
+
+
🎯 修复后的工作原理
+
+ ✅ 简化逻辑：
+ • 配置了父节点字段选择器 → 完全使用该字段构建树结构
+ • 未配置父节点字段选择器 → 所有数据显示为平铺列表
+ • 完全移除预设字段和自动检测机制
+
+
+
+
+
+
+
✅ 用户的aapid字段
+
+
+
数据结构：
+
{{ JSON.stringify(aapidData, null, 2) }}
+
+
+
+
字段配置：
+
• 值字段: id
+
• 文本字段: name
+
• 父节点字段: aapid（通过属性选择器选择）
+
+
+
+
+
+ 选中值: {{ aapidValue || '无' }}
+
+
+
+ ✅ 修复后效果：
+ • "测试4" 作为根节点（aapid=0，数据中没有id=0的项）
+ • "测试5" 作为 "测试4" 的子节点（aapid=123）
+
+
+
+
+
+
🚀 自定义字段名
+
+
+
数据结构：
+
{{ JSON.stringify(customData, null, 2) }}
+
+
+
+
字段配置：
+
• 值字段: uuid
+
• 文本字段: title
+
• 父节点字段: superior_node_id（通过属性选择器选择）
+
+
+
+
+
+ 选中值: {{ customValue || '无' }}
+
+
+
+ ✅ 预期结果：
+ • "根部门" 作为根节点（superior_node_id=null）
+ • "研发部" 作为 "根部门" 的子节点
+
+
+
+
+
+
+
📋 对比：未配置时的平铺显示
+
+ 验证未配置父节点字段时，数据显示为平铺列表
+
+
+
+
+
aapid数据 - 无配置
+
+ 不配置父节点字段，应该显示为平铺列表
+
+
+
+
+
+ 选中: {{ aapidFlatValue || '无' }}
+
+
+
+ 📋 预期：所有数据显示为平铺列表
+
+
+
+
+
自定义数据 - 无配置
+
+ 不配置父节点字段，应该显示为平铺列表
+
+
+
+
+
+ 选中: {{ customFlatValue || '无' }}
+
+
+
+ 📋 预期：所有数据显示为平铺列表
+
+
+
+
+
+
+
+
🔢 数字0的特殊处理
+
+ 验证数字0被正确处理为有效的父节点ID
+
+
+
+
+
包含0作为有效父ID
+
+
{{ JSON.stringify(zeroData, null, 2) }}
+
+
+
+
+
+ 选中: {{ zeroValue || '无' }}
+
+
+
+ ✅ 预期："CEO"是根节点，"总监"是"CEO"的子节点
+
+
+
+
+
null/undefined作为根节点标识
+
+
{{ JSON.stringify(nullData, null, 2) }}
+
+
+
+
+
+ 选中: {{ nullValue || '无' }}
+
+
+
+ ✅ 预期："董事长"是根节点，"经理"是"董事长"的子节点
+
+
+
+
+
+
+
+
🐛 调试方法：
+
+ - 打开浏览器开发者工具Console面板
+ - 查看🔧标记的字段映射日志
+ - 查看🌳标记的树构建日志
+ - 确认日志中有"ONLY PropertySelectSetter"字样
+ - 确认不再有任何自动检测相关的日志
+
+
+
+ 🎉 修复确认：现在任何字段名都应该能正确工作，完全不再依赖预设字段列表！
+
+
+
+
配置vs未配置对比测试
+
+ 对比配置父节点字段和未配置父节点字段的不同效果
+
+
+
+
测试数据：
+
{{ JSON.stringify(testData, null, 2) }}
+
+
+
+
+
+
📋 未配置父节点字段
+
+ 配置：不指定父节点字段
+
+
+
+
+
+ 选中值: {{ noConfigValue || '无' }}
+
+
+
+ 📋 效果：所有数据显示为平铺列表，无树形结构
+
+
+
+
+
+
🌳 配置了父节点字段
+
+ 配置：通过属性选择器指定custom_parent字段
+
+
+
+
+
+ 选中值: {{ configuredValue || '无' }}
+
+
+
+ 🌳 效果：根据custom_parent字段构建树形结构
+
+
+
+
+
+
+
🔍 结果分析：
+
+
+
未配置模式：
+
+ • 所有数据都作为根节点显示
+ • 显示为平铺列表，没有任何层级关系
+ • 不会进行任何字段的自动检测
+
+
+
+
+
配置模式：
+
+ • 完全使用PropertySelectSetter配置的字段
+ • 根据字段值构建正确的树形结构
+ • 不会回退到任何自动检测逻辑
+
+
+
+
+ 💡 核心改进：逻辑更加简单清晰，用户选择什么字段，就用什么字段，不再有任何预设和自动检测！
+
+
+
+
+
+
⚠️ 重要配置说明
+
+ 要显示树形结构，必须在IDE中配置以下字段：
+ • 值字段：选择 deptId 字段
+ • 文本字段：选择 name 字段
+ • 父节点字段：选择 parentDeptId 字段（关键！）
+ 如果不配置父节点字段，只会显示平铺列表！
+
+
+
+
+
自定义组件输入框高度
+
+ 通过 height 属性控制组件输入框的高度
+
+
+
+
+ 当前组件高度: {{ height }}px，下拉面板高度: {{ dropdownHeight }}px
+
+
+
+
+
小高度 (32px)
+
+
+
+
+
默认高度 (44px)
+
+
+
+
+
大高度 (64px)
+
+
+
+
响应式高度演示
+
+ 动态调整组件高度，观察组件的适应效果
+
+
+
+
+
+ {{ componentHeight }}px
+
+
+
+
+
+ {{ panelHeight }}px
+
+
+
+
+
+
+
+
当前配置:
+
组件高度: {{ componentHeight }}px
+
下拉面板高度: {{ panelHeight }}px
+
+
+
极端情况测试
+
+ 测试组件在极端高度下的表现
+
+
+
+
+
超小高度 (24px)
+
+
+
+
+
超大高度 (100px)
+
+
+
+
+
+
多选模式 - 不同高度
+
+
+
紧凑模式 (32px)
+
+
+
+
+
宽松模式 (56px)
+
+
+
+
+
+
+
🎯 CwdTreeSelect 树形结构配置指南
+
+ 问题症状：组件只显示平铺列表，没有树形层级结构
+ 解决方案：在IDE的属性面板中正确配置字段映射
+
+
+
+
+
+
+
⚙️ IDE配置步骤
+
+
+
+
+
1️⃣ 值字段配置
+
+ 在属性面板中找到"值字段"
+ 点击选择器，选择：
+ deptId
+
+
+
+
+
2️⃣ 文本字段配置
+
+ 在属性面板中找到"文本字段"
+ 点击选择器，选择：
+ name
+
+
+
+
+
3️⃣ 父节点字段配置（关键！）
+
+ 在属性面板中找到"父节点字段"
+ 点击选择器，选择：
+ parentDeptId
+
+
+
+
+
+
✅ 配置完成后的效果：
+
+ 组件会自动根据 parentDeptId 字段构建树形结构，显示正确的父子关系和展开/收起功能
+
+
+
+
+
+
+
+
+
+
+
❌ 错误配置（未配置父节点字段）
+
+
+
+ 配置：只配置了值字段和文本字段，未配置父节点字段
+
+
+
+
+
+ 选中值: {{ wrongValue || '无' }}
+
+
+
+ 结果：显示为平铺列表，没有树形结构
+
+
+
+
+
+
+
+
✅ 正确配置（包含父节点字段）
+
+
+
+ 配置：值字段=deptId, 文本字段=name, 父节点字段=parentDeptId
+
+
+
+
+
+ 选中值: {{ correctValue || '无' }}
+
+
+
+ 结果：显示为树形结构，支持展开/收起
+
+
+
+
+
+
+
+
📋 数据结构分析
+
{{ JSON.stringify(userData, null, 2) }}
+
+
+ 预期树结构：
+ 📁 中铁工业 (deptId: 13000000, parentDeptId: 10000000 - 父节点不存在，成为根节点)
+ ├── 📁 中铁工业本部 (parentDeptId: 13000000)
+ │ └── 📄 公司领导及高管 (parentDeptId: 13000001)
+ └── 📄 中铁山桥 (parentDeptId: 13000000)
+
+
+
+
+
+
🤔 常见问题排查
+
+ Q: 为什么配置了字段还是显示平铺？
+ A: 请检查控制台日志，确保字段选择器函数被正确调用
+
+ Q: 如何确认字段配置是否生效？
+ A: 打开控制台，应该看到类似 "🔧 [Field Mapping] getParentDeptIdField called" 的日志
+
+ Q: 数据是嵌套格式怎么办？
+ A: 组件会自动提取嵌套对象（如 lCAPDepartment），无需特殊处理
+
+
+
+
快速测试您的配置
+
+ 使用以下测试组件验证您的字段配置是否正确
+
+
+
+
+
+
测试结果：
+
+
选中值: {{ testValue || '无' }}
+
+
+
+ ✅ 成功标志：
+ • 下拉框中显示 "中铁工业" 作为根节点
+ • "中铁工业" 前面有展开箭头 ▶
+ • 点击箭头可以展开显示子节点
+ • 控制台有 "🔧 [Field Mapping]" 相关日志
+
+
+
+
CwdTreeSelect 问题详细调试
+
+ 用户问题：无论选择什么字段，都是平铺显示，没有树形结构
+
+
+
+
+
🔍 问题分析步骤
+
+ - 检查数据源：确认原始数据结构是否正确
+ - 检查字段映射：确认PropertySelectSetter是否被正确调用
+ - 检查树构建：确认buildTreeFromFlatData是否正确执行
+ - 检查渲染：确认TreeNode组件是否正确显示children
+
+
+
+
+
+
📋 测试数据
+
{{ JSON.stringify(testData, null, 2) }}
+
+ 预期结构：测试4(id=123) 作为根节点，测试5(id=456) 作为测试4的子节点
+
+
+
+
+
+
✅ 配置aapid字段测试
+
+ 配置：值字段=id, 文本字段=name, 父节点字段=aapid
+
+
+
+
+
+ 选中值: {{ selectedValue || '无' }}
+
+
+
+ ✅ 预期效果：
+ • 测试4 显示为根节点（因为aapid=0，数据中没有id=0的项目）
+ • 测试5 显示为 测试4 的子节点（因为aapid=123，指向测试4的id）
+ • 应该能看到展开/收起的箭头图标
+
+
+
+
+
+
📋 未配置字段对比
+
+ 配置：值字段=id, 文本字段=name, 父节点字段=未配置
+
+
+
+
+
+ 选中值: {{ flatValue || '无' }}
+
+
+
+ 📋 预期效果：
+ • 所有数据显示为平铺列表，没有层级关系
+ • 不应该有展开/收起图标
+
+
+
+
+
+
🐛 调试方法
+
+
+
1. 打开浏览器Console面板
+
+ F12 → Console，清空控制台后重新选择下拉框
+
+
+
+
+
2. 查看关键日志
+
+ • 🔧 标记：字段映射函数调用
+ • 🌳 标记：树构建过程
+ • 🌱 标记：根节点识别
+ • 🌿 标记：子节点添加
+ • ❌ 标记：错误或异常情况
+
+
+
+
+
3. 关键检查点
+
+ • getAapidField 是否被调用并返回正确值
+ • buildTreeFromFlatData 是否构建出正确的树结构
+ • TreeNode 是否正确获取和显示 children
+ • 是否有任何错误导致回退到平铺显示
+
+
+
+
+ ⚠️ 注意：如果仍然显示为平铺结构，请将完整的Console日志截图或复制给开发者
+
+
+
+
+
分步调试验证
+
+ 逐步验证每个环节，找出问题所在
+
+
+
+
+
步骤1：数据源验证
+
+
原始数据：
+
{{ JSON.stringify(step1Data, null, 2) }}
+
+
+
验证要点：
+
+ - id=123 的项，aapid=0
+ - id=456 的项，aapid=123（指向id=123）
+ - 预期：123为根节点，456为123的子节点
+
+
+
+
+
+
+
步骤2：字段映射验证
+
+ 手动测试字段映射函数：
+
+
+
+ 项目1：
+ • getIdField: {{ getIdField(step1Data[0]) }}
+ • getNameField: {{ getNameField(step1Data[0]) }}
+ • getAapidField: {{ getAapidField(step1Data[0]) }}
+
+
+ 项目2：
+ • getIdField: {{ getIdField(step1Data[1]) }}
+ • getNameField: {{ getNameField(step1Data[1]) }}
+ • getAapidField: {{ getAapidField(step1Data[1]) }}
+
+
+
+ 预期结果：所有字段映射函数都应该返回正确的值
+
+
+
+
+
+
步骤3：组件渲染验证
+
+
+
+
+ 选中值: {{ step3Value || '无' }}
+
+
+
+
检查要点：
+
+ - 下拉框中是否显示为树形结构
+ - 是否有展开/收起箭头
+ - Console中是否有正确的调试日志
+
+
+
+
+
+
+
步骤4：不同字段名测试
+
+
+
测试数据（使用parent123字段）：
+
{{ JSON.stringify(parent123Data, null, 2) }}
+
+
+
+
+
+ 选中值: {{ step4Value || '无' }}
+
+
+
+
+
+
🚨 问题总结
+
+ 如果以上所有测试都显示为平铺结构，说明问题可能在：
+
+ - PropertySelectSetter没有被正确传递
+ - 树构建逻辑有根本性错误
+ - TreeNode组件渲染逻辑有问题
+
+
+
+ 请务必检查Console中的完整日志，并将问题相关的错误信息提供给开发者。
+
+
+
+
+
树构建调试工具
+
+ 调试为什么选择了父节点字段后没有形成树层级结构
+
+
+
+
+
+
测试1：用户实际数据 (fid字段)
+
+
数据结构：
+
{{ JSON.stringify(data1, null, 2) }}
+
+
+
+ 字段配置： 值字段=getIdField, 文本字段=getNameField, 父节点字段=getFidField
+
+
+
+
+
+ 选中值: {{ value1 || '无' }}
+
+
+
+ 预期结果： "测试"(id:123,fid:0) 作为根节点，"测试1"(id:456,fid:123) 作为其子节点
+
+
+
+
+
+
测试2：标准数据格式 (fid字段)
+
+
数据结构：
+
{{ JSON.stringify(data2, null, 2) }}
+
+
+
+ 字段配置： 值字段=getIdField, 文本字段=getNameField, 父节点字段=getFidField
+
+
+
+
+
+ 选中值: {{ value2 || '无' }}
+
+
+
+ 预期结果： 应该显示正确的多层树结构
+
+
+
+
+
+
+
对比：自动检测 vs 属性选择器
+
+ 对比同一数据源使用自动检测和属性选择器的效果
+
+
+
+
+
自动检测父节点字段
+
+ 配置：未指定父节点字段，自动检测
+
+
+
+
+
+ 选中: {{ autoValue || '无' }}
+
+
+
+
+
属性选择器配置
+
+ 配置：通过PropertySelectSetter选择fid字段
+
+
+
+
+
+ 选中: {{ selectorValue || '无' }}
+
+
+
+
+
+
+
🔍 调试步骤：
+
+ - 打开浏览器开发者工具的Console面板
+ - 观察组件日志输出，检查字段选择器是否正确工作
+ - 检查树构建过程中的节点关系映射
+ - 验证父子节点ID的匹配逻辑
+ - 确认数字0是否被正确处理为有效的父节点ID
+
+
+
+
分步调试流程
+
+ 手动验证每个步骤是否正常工作
+
+
+
+
+
步骤1：数据源检查
+
+
原始数据：
+
{{ JSON.stringify(testData, null, 2) }}
+
+
+
+
+
+
步骤2：字段选择器测试
+
+
+ 数据项 {{ index + 1 }}:
+ 值字段={{ getIdField(item) }},
+ 文本字段={{ getNameField(item) }},
+ 父节点字段={{ getFidField(item) }}
+
+
+
+
+
+
+
步骤3：组件渲染测试
+
+
+
+
+ 当前选中值: {{ debugValue || '无' }}
+
+
+
+
+
+
步骤4：预期结果验证
+
+
应该看到：
+
+ - 下拉面板中显示树形结构
+ - "测试" 作为根节点（因为 fid=0 且数据中没有 id=0 的节点）
+ - "测试1" 作为 "测试" 的子节点（因为 fid=123 对应父节点id=123）
+ - 可以展开/收起节点
+ - Console中有详细的调试日志
+
+
+
+
+
字段映射问题调试工具
+
+ ✅ 已彻底修复：完全移除自动检测机制，现在选择什么字段名，该字段就作为父节点字段
+
+
+
+
🎯 新工作原理
+
+ ✅ 只有一种模式：PropertySelectSetter配置优先
+ • 如果配置了父节点字段选择器，完全使用该字段
+ • 如果未配置父节点字段选择器，所有数据都显示为平铺结构（无树形层级）
+ • 完全移除预设字段列表和自动检测机制
+
+
+
+
+
+
+
✅ 用户问题：aapid 字段
+
+
+
数据结构：
+
{{ JSON.stringify(userData, null, 2) }}
+
+
+
+
配置说明：
+
+ • 值字段: getIdField (选择 id)
+ • 文本字段: getNameField (选择 name)
+ • 父节点字段: getAapidField (选择 aapid)
+
+
+
+
+
+
+ 选中值: {{ userValue || '无' }}
+
+
+
+ ✅ 修复后效果:
+ "测试4" 作为根节点（aapid=0）
+ "测试5" 作为 "测试4" 的子节点（aapid=123）
+
+
+
+
+
+
📋 对比：无配置平铺显示
+
+
+
测试数据：
+
{{ JSON.stringify(userData, null, 2) }}
+
+
+
+
配置说明：
+
+ • 值字段: getIdField (选择 id)
+ • 文本字段: getNameField (选择 name)
+ • 父节点字段: 未配置
+
+
+
+
+
+
+ 选中值: {{ flatValue || '无' }}
+
+
+
+ 📋 预期效果:
+ 所有数据显示为平铺列表，无树形层级结构
+
+
+
+
+
+
+
🚀 任意字段名测试
+
+ 测试各种奇怪字段名的支持情况
+
+
+
+
测试数据：
+
{{ JSON.stringify(otherData, null, 2) }}
+
+
+
+ 字段映射： uuid → value, title → text, upper_id → parentId
+
+
+
+
+
+ 选中值: {{ otherValue || '无' }}
+
+
+
+ ✅ 预期效果:
+ 根据upper_id字段构建树结构，支持任意字段名
+
+
+
+
+
+
🐛 调试信息查看：
+
+ - 打开浏览器开发者工具 Console 面板
+ - 查看带有🔧标记的日志，确认字段映射过程
+ - 查看带有🌳标记的日志，了解树构建过程
+ - 确认是否有"ONLY PropertySelectSetter"的日志
+ - 验证不再有自动检测的相关日志
+
+
+
+ 🎉 修复确认： 现在任意字段名都应该能正确工作，不再依赖预设的字段列表！
+
+
+
+
任意字段名批量测试
+
+ ✅ 验证修复效果：测试各种奇怪字段名是否都能正确工作
+
+
+
+
{{ testCase.title }}
+
+
+ 父节点字段: {{ testCase.fieldName }}
+
+
+
+
+ 查看测试数据
+ {{ JSON.stringify(testCase.data, null, 2) }}
+
+
+
+
+
+
+ 选中: {{ testCase.value || '无' }}
+
+
+
+ ✅ 预期: {{ testCase.expectation }}
+
+
+
+
+
🎯 测试要点
+
+ - parent123: 用户反映的问题字段，现在应该正常工作
+ - weird_field_name: 包含下划线的奇怪字段名
+ - f123abc: 数字+字母混合的字段名
+ - xyz789: 完全自定义的字段名
+
+
+
+ ✅ 成功标准：所有字段名都应该能形成正确的树结构，不再有任何限制！
+
+
+
+
🔧 PropertySelectSetter 配置验证工具
+
+ 问题诊断：字段选择器返回undefined，需要检查IDE中的字段配置
+
+
+
+
+
🚨 问题确认
+
+ 从您的日志可以看出：
+
+ - hasParentIdField: true - 说明配置了父节点字段
+ - parentId: undefined - 但字段选择器返回undefined
+ - 所有节点都成为根节点 - 因为undefined被判断为根节点标识符
+
+
+
+ 结论：IDE中的父节点字段选择器没有正确工作，需要重新配置。
+
+
+
+
+
+
+
📋 手动验证正确的字段选择器
+
+ 以下是正确配置的字段选择器，可以作为参考
+
+
+
+
+
+
✅ 正确配置示例
+
+ 字段映射：
+ • 值字段: 返回 item.deptId
+ • 文本字段: 返回 item.name
+ • 父节点字段: 返回 item.parentDeptId
+
+
+
+
+
+ 选中值: {{ correctValue || '无' }}
+
+
+
+
+
+
❌ 错误配置模拟
+
+ 字段映射：
+ • 值字段: 返回 item.deptId
+ • 文本字段: 返回 item.name
+ • 父节点字段: 返回 undefined（错误！）
+
+
+
+
+
+ 选中值: {{ brokenValue || '无' }}
+
+
+
+
+
+
+
+
🔍 数据结构验证
+
+ 原始数据结构（经过嵌套提取后）：
+
+
+
+
{{ JSON.stringify(flattenedTestData, null, 2) }}
+
+
+
+
字段验证：
+
+ -
+ 第{{index+1}}项:
+
deptId="{{ item.deptId }}",
+ name="{{ item.name }}",
+ parentDeptId="{{ item.parentDeptId }}"
+
+
+
+
+
+
+
+
💡 解决方案
+
+
请按以下步骤重新配置IDE中的字段选择器：
+
+ -
+ 打开IDE页面编辑器，选中您的树选择组件
+
+ -
+ 在右侧属性面板中找到"父节点字段"配置项
+
+ -
+ 点击字段选择器下拉框，确保选择了
parentDeptId 字段
+
+ -
+ 保存配置并刷新页面，观察控制台日志是否有改善
+
+ -
+ 验证：应该看到
"🔗 PropertySelectSetter最终结论-子节点" 的日志
+
+
+
+
+ ✅ 成功标志：控制台中应该出现详细的字段访问日志，且parentId不再是undefined
+
+
+
+
+
+
+
🐛 如果问题仍然存在
+
+ 请检查浏览器控制台中
"🔧 [PropertySelectSetter 详细调试]" 组合日志：
+
+ - parentIdField类型: 应该是 "function"
+ - 函数执行结果: 不应该是 undefined
+ - 数据项字段列表: 应该包含 parentDeptId
+
+
+
+
+
🔍 实时调试助手
+
+ 实时监控PropertySelectSetter的工作情况
+
+
+
+
📊 实时统计
+
+
+ 调用次数: {{ debugStats.callCount }}
+
+
+ 返回undefined次数: {{ debugStats.undefinedCount }}
+
+
+ 返回有效值次数: {{ debugStats.validCount }}
+
+
+
+
+
+
+
+ 选中值: {{ debugValue || '无' }}
+ 调试提示: 请查看控制台中带有 "🔧 [PropertySelectSetter 详细调试]" 的日志组
+
+
+
+
+
低代码开发平台使用示例
+
+ 在低代码平台中，你可以通过拖拽组件到插槽中来自定义下拉面板内容
+
+
+
基础树选择器（默认模式）
+
+
+
带自定义头部的树选择器
+
+
+
+
+
+ 🏷️ 技术栈选择
+
+
+ 请选择您熟悉的技术栈，可以多选
+
+
+
+
带自定义底部的树选择器
+
+
+
+
+
+ 已选择 {{ selectedCount }} 项
+
+
+
+
+
+
+
+
+ 💡 低代码开发提示:
+ 1. 在低代码平台中，可以直接拖拽文本、按钮、布局等组件到插槽中
+ 2. 支持配置组件的样式、事件和数据绑定
+ 3. 实时预览效果，所见即所得
+
+
+
+
自定义空状态（低代码配置）
+
+
+
+
+
📋
+
+ 暂无选项数据
+
+
+ 请联系管理员配置选项或稍后重试
+
+
+
+
+
+
+
自定义加载状态（低代码配置）
+
+
+
+
+
🚀
+
+ 数据加载中...
+
+
+ 正在从服务器获取最新数据
+
+
+
+
+
+
+
完整的低代码自定义示例
+
+ 这个示例展示了如何在低代码平台中使用所有插槽来构建一个完整的选择器界面
+
+
+
+
+
+
+
+ 🎯 技能评估
+
+
+ 请选择您掌握的技术技能，支持多选
+
+
+
+
+
+ 已选择 {{ selectedCount }} 项技能
+
+
+ {{ getSkillLevel() }}
+
+
+
+
+
+
+
+
+
+
+
+
+
快捷选择:
+
+
+ {{ tag }}
+
+
+
+
+
+
+
+
+ 🎉 选择结果:
+
+
+ 还没有选择任何技能
+
+
+
+ {{ skill }}
+
+
+
+ 技能等级: {{ getSkillLevel() }} | 完成度: {{ getCompletionRate() }}%
+
+
+
+
+
+
+ 💡 低代码开发说明
+
+
+ • 头部插槽：拖入文本、图片等组件来设计标题区域
+ • 底部插槽：拖入按钮、统计组件来添加操作功能
+ • 支持数据绑定、事件配置和样式自定义
+ • 实时预览，快速构建专业的选择器界面
+
+
+
+
弹出层位置调试工具
+
+ 详细调试自动位置计算逻辑，查看Console输出
+
+
+
+
+
🔝 页面顶部区域测试
+
+ 预期：下方空间充足，应该向下弹出
+
+
+
+
+
相对定位 + 自动方向
+
+
+ 选中: {{ topValue1 || '无' }}
+
+
+
+
+
Body挂载 + 自动方向
+
+
+ 选中: {{ topValue2 || '无' }}
+
+
+
+
+
+ ✅ 预期结果：两个选择器都应该向下弹出，Console中显示 "bottom" 方向
+
+
+
+
+
+
+
📏 中间填充区域
+
滚动到底部测试向上弹出
+
+ 当前视口高度: {{ viewportHeight }}px
+ 滚动位置: {{ scrollTop }}px
+
+
+
+
+
+
+
🔻 页面底部区域测试
+
+ 预期：下方空间不足，应该向上弹出
+
+
+
+
+
相对定位 + 自动方向
+
+
+ 选中: {{ bottomValue1 || '无' }}
+
+
+
+
+
Body挂载 + 自动方向
+
+
+ 选中: {{ bottomValue2 || '无' }}
+
+
+
+
+
+ ✅ 预期结果：两个选择器都应该向上弹出，Console中显示 "top" 方向
+
+
+
+
+
+
🎯 强制方向测试
+
+ 测试强制指定弹出方向是否生效
+
+
+
+
+
强制向上弹出 (placement="top")
+
+
+ 选中: {{ forceTopValue || '无' }}
+
+
+
+
+
强制向下弹出 (placement="bottom")
+
+
+ 选中: {{ forceBottomValue || '无' }}
+
+
+
+
+
+ ✅ 预期结果：左边向上弹，右边向下弹，无论位置如何
+
+
+
+
+
+
🐛 实时调试信息
+
视口高度: {{ viewportHeight }}px
+
滚动位置: {{ scrollTop }}px
+
滚动百分比: {{ scrollPercentage }}%
+
+ 打开浏览器Console查看详细位置计算日志
+
+
+
+
边界情况测试
+
+ 测试各种边界情况下的弹出层位置
+
+
+
+
+
小空间测试
+
+
+
+
顶部位置（空间很小）
+
+
+
+
+
+
中部位置
+
+
+
+
+
+
底部位置（空间很小）
+
+
+
+
+
+
+
+
+
+
+
大数据量测试
+
+
+
+
+
🧪 测试要点：
+
+ - 小空间适应：在空间受限时能否正确调整方向和高度
+ - 边界检测：是否能防止弹出层超出视口
+ - 自适应高度：是否能根据可用空间调整最大高度
+ - 性能表现：大数据量时位置计算是否流畅
+
+
+
+
弹出层位置智能调整测试
+
+ 测试在不同位置时弹出层的智能定位功能
+
+
+
+
+
页面顶部区域 - 向下弹出
+
+ 在页面顶部时，下方有充足空间，弹出层应该向下展开
+
+
+
+
+
相对定位 + 自动方向
+
+
+
+
+
挂载到Body + 自动方向
+
+
+
+
+
强制向上弹出
+
+
+
+
+
+
+
+
中间填充区域 - 滚动到底部测试
+
+
+
+
+
页面底部区域 - 向上弹出
+
+ 在页面底部时，下方空间不足，弹出层应该向上展开
+
+
+
+
+
相对定位 + 自动方向
+
+
+ 选中: {{ value4 || '无' }}
+
+
+
+
+
挂载到Body + 自动方向
+
+
+ 选中: {{ value5 || '无' }}
+
+
+
+
+
强制向下弹出
+
+
+ 选中: {{ value6 || '无' }}
+
+
+
+
+
+
+
+
📋 配置说明：
+
+ 🎯 appendToBody: 是否将弹出层挂载到body元素下
+ • true: 解决容器遮挡问题，适用于复杂布局
+ • false: 相对定位，适用于简单场景
+
+ 🎯 placement: 弹出方向控制
+ • auto: 智能判断，优先向下，空间不足时向上
+ • bottom: 强制向下弹出
+ • top: 强制向上弹出
+
+ 🎯 智能定位逻辑:
+ 1. 计算上下可用空间
+ 2. 优先使用下方空间
+ 3. 下方空间不足且上方空间更大时，向上弹出
+ 4. 动态调整最大高度以适应可用空间
+
+
+
+
+
+
🧪 测试方法：
+
+ - 在页面顶部打开下拉框，观察是否向下弹出
+ - 滚动到页面底部，打开下拉框，观察是否向上弹出
+ - 对比相对定位和body挂载的区别
+ - 测试强制方向设置是否生效
+ - 滚动页面时，body挂载的弹出层是否跟随移动
+
+
+
+
容器遮挡问题测试
+
+ 测试在有遮挡的容器中使用appendToBody解决显示问题
+
+
+
+
+
正常容器（无遮挡）
+
+
+
+
相对定位
+
+
+
+
+
挂载到Body
+
+
+
+
+
+
+
+
+
有遮挡的容器（overflow: hidden + 固定高度）
+
+
+
+
相对定位 - 会被遮挡
+
+
+ ⚠ 弹出层会被容器遮挡
+
+
+
+
+
挂载到Body - 不被遮挡
+
+
+ ✅ 弹出层正常显示
+
+
+
+
+
+
+
+
+
滚动容器测试
+
+
+
+
容器顶部
+
+
+
+
+
容器中部
+
+
+
+
+
容器底部
+
+
+
+
+
+
+
+
💡 使用建议：
+
+ 🎯 何时使用 appendToBody="true"：
+ 1. 父容器设置了 overflow: hidden
+ 2. 在弹框、抽屉等浮层组件内部
+ 3. 复杂的嵌套布局中
+ 4. 需要确保弹出层不被遮挡
+
+ 🎯 何时使用 appendToBody="false"：
+ 1. 简单的页面布局
+ 2. 没有容器遮挡问题
+ 3. 性能要求较高的场景
+ 4. 希望弹出层跟随页面滚动
+
+
+
+
属性选择器配置父节点字段
+
+ 在属性面板中通过下拉选择器选择数据字段作为父节点字段，无需手动输入字段名
+
+
+
+
+
+
示例1：选择 parentCode 字段
+
+
字段配置：
+
+ 值字段: getCodeField | 文本字段: getTitleField | 父节点字段: getParentCodeField
+
+
+
+
+
+
+ 选中值: {{ value1 || '无' }}
+
+
+
+ 查看数据结构
+ {{ JSON.stringify(deptData, null, 2) }}
+
+
+
+
+
+
示例2：选择 superiorId 字段
+
+
字段配置：
+
+ 值字段: getOrgIdField | 文本字段: getOrgNameField | 父节点字段: getSuperiorIdField
+
+
+
+
+
+
+ 选中值: {{ value2 || '无' }}
+
+
+
+ 查看数据结构
+ {{ JSON.stringify(orgData, null, 2) }}
+
+
+
+
+
+
+
示例3：对比不同父节点字段的效果
+
+ 同一数据源，选择不同的父节点字段，构建不同的树结构
+
+
+
+
+
选择 parent_id 字段
+
+ 父节点字段: getParentIdField
+
+
+
+
+
+ 选中值: {{ value3a || '无' }}
+
+
+
+
+
选择 fid 字段
+
+ 父节点字段: getFidField
+
+
+
+
+
+ 选中值: {{ value3b || '无' }}
+
+
+
+
+
+ 查看测试数据结构
+ {{ JSON.stringify(mixedData, null, 2) }}
+
+
+
+
+
✅ 属性选择器的优势：
+
+ - 🎯 智能识别：自动识别数据源中的可用字段
+ - ⚡ 方便快捷：通过下拉选择器快速选择字段
+ - 🔧 类型安全：确保选择的字段在数据中真实存在
+ - 🎨 用户友好：无需记住字段名，可视化选择
+ - 📝 减少错误：避免手动输入字段名时的拼写错误
+ - 🔄 动态更新：数据源字段变化时自动更新可选项
+
+
+
+
属性选择器 vs 自动检测对比
+
+ 对比属性选择器配置和自动检测的效果差异
+
+
+
+
+
+
属性选择器配置
+
+ 配置：通过属性面板选择 parent_id 字段
+
+
+
+
+
+ 选中: {{ selectorValue || '无' }}
+
+
+
+ 选择器优势：
+ 精确控制，可视化选择，避免字段名错误
+
+
+
+
+
+
自动检测
+
+ 配置：未指定父节点字段，自动检测
+
+
+
+
+
+ 选中: {{ autoValue || '无' }}
+
+
+
+ 检测规则：
+ 按优先级查找: parentId > parent_id > pid > parentid > parent > pId > fid
+
+
+
+
+
+
测试数据：
+
{{ JSON.stringify(testData, null, 2) }}
+
+
+
+
📋 配置方式对比：
+
+
+
+ | 配置方式 |
+ 优势 |
+ 适用场景 |
+
+
+
+
+ | 属性选择器 |
+ 精确控制、可视化操作、类型安全 |
+ 自定义字段名、复杂数据结构 |
+
+
+ | 自动检测 |
+ 零配置、快速上手、适应标准字段 |
+ 标准字段命名、快速原型 |
+
+
+
+
+
+
用户实际数据字段测试
+
+ 测试用户提供的实际数据：id、name、aapid 字段
+
+
+
+
原始数据：
+
{{ JSON.stringify(testData, null, 2) }}
+
+
+
+
属性选择器配置：
+
+ 值字段: getIdField (选择id字段)
+ 文本字段: getNameField (选择name字段)
+ 父节点字段: getAapidField (选择aapid字段)
+
+
+
+
+
+ 选中值: {{ selectedValue || '无' }}
+
+
+
+
+
✅ 预期结果：
+
+ - "测试4" (id:123, aapid:0) - 作为根节点显示
+ - "测试5" (id:456, aapid:123) - 作为"测试4"的子节点显示
+ - 能够正确展开/收起树节点
+ - 选择功能正常工作
+
+
+
+
+
🔧 关键修复：
+
+ 问题：数字0被错误地当作"根节点标识"处理
+ 解决：只有null、undefined、空字符串才视为根节点，数字0是有效的父节点ID
+
+
+
+
随机字段名全面测试
+
+ 测试各种随机字段名，验证属性选择器的通用性
+
+
+
+
+
+
测试1：xyz999abc 字段
+
+ 父节点字段: getXyz999abcField
+
+
+
+
+
+ 选中: {{ value1 || '无' }}
+
+
+
+ 查看数据
+ {{ JSON.stringify(data1, null, 2) }}
+
+
+
+
+
+
测试2：superiorCode 字段
+
+ 父节点字段: getSuperiorCodeField
+
+
+
+
+
+ 选中: {{ value2 || '无' }}
+
+
+
+ 查看数据
+ {{ JSON.stringify(data2, null, 2) }}
+
+
+
+
+
+
测试3：parentKey 字段
+
+ 父节点字段: getParentKeyField
+
+
+
+
+
+ 选中: {{ value3 || '无' }}
+
+
+
+ 查看数据
+ {{ JSON.stringify(data3, null, 2) }}
+
+
+
+
+
+
对比：用户的 aapid 字段
+
+ 父节点字段: getAapidField
+
+
+
+
+
+ 选中: {{ userValue || '无' }}
+
+
+
+ 查看数据
+ {{ JSON.stringify(userData, null, 2) }}
+
+
+
+
+
+
🎯 测试结论：
+
+ ✅ 任意字段名支持：PropertySelectSetter 能够识别和选择任何字段名
+ ✅ 数据类型兼容：支持数字、字符串等不同类型的ID值
+ ✅ 空值处理：正确处理 null、0、空字符串等各种空值情况
+ ✅ 树构建：能够基于任意字段名构建正确的树形结构
+
+
+
+
带头部和底部插槽的树选择器
+
+ 使用 header 和 footer 插槽自定义下拉面板的头部和底部内容
+
+
+
+
+
+ 🌟 技术栈分类
+
+
+ 请选择您熟悉的技术栈，支持多选
+
+
+
+
+
+
+
+
+ 选中项数: {{ selectedCount }}
+
+
+
+
自定义空状态
+
+
+
+
🔍
+
+ 暂无可选项
+
+
+ 请联系管理员添加选项数据
+
+
+
+
+
+
+
+
完全自定义下拉面板
+
+ 使用默认插槽完全替换下拉面板内容，实现自定义的选择界面
+
+
+
+
🎨 选择你喜欢的颜色
+
+
+
+
+ {{ color.name }}
+
+
+
+
+
+
+ 当前选择:
+
+ {{ selectedColorName || '未选择' }}
+
+
+
+
+
+
+
+
+
+
+ 当前值: {{ selectedValue || '未选择' }}
+ 颜色名称: {{ selectedColorName || '无' }}
+
+
+
选项卡风格的选择面板
+
+ 使用插槽实现分类选项卡的选择界面
+
+
+
+
+
+
+ {{ category.name }}
+
+
+
+
+
+
+
+
+
+ 已选择 {{ selectedValues.length }} 个技能
+
+
+
+
+
+
+
+
+
+
选中的技能:
+
+
+ {{ skill }}
+
+
+
+
+
标准树结构测试
+
+ 测试标准的 value/text/parentId 字段格式
+
+
+
+
+
+
数据结构分析:
+
+
原始数据: {{ treeData.length }} 条
+
选中值: {{ selectedValue || '无' }}
+
+
+
原始数据:
+
{{ JSON.stringify(treeData, null, 2) }}
+
+
+
+ ✅ 预期结果: 应该显示为两级树结构，根节点1和根节点2各有子节点
+
+
+
数字ID树结构测试
+
+ 测试 id/name/pid 字段格式，ID为数字类型
+
+
+
+
+
+
数据结构分析:
+
+
原始数据: {{ treeData.length }} 条
+
选中值: {{ selectedValue || '无' }}
+
字段映射: id→value, name→text, pid→parentId
+
+
+
原始数据:
+
{{ JSON.stringify(treeData, null, 2) }}
+
+
+
+ ✅ 预期结果: 应该正确显示部门层级结构，即使ID是数字类型
+
+
+
混合类型树结构测试
+
+ 测试ID和父ID类型不一致的情况（数字vs字符串）
+
+
+
+
+
+
数据结构分析:
+
+
原始数据: {{ treeData.length }} 条
+
选中值: {{ selectedValue || '无' }}
+
注意: 存在类型混合问题
+
+
+
原始数据:
+
{{ JSON.stringify(treeData, null, 2) }}
+
+
+
+ ⚠️ 预期结果: 组件应该处理类型不一致问题，统一转换为字符串进行比较
+
+
+
问题数据树结构测试
+
+ 测试各种异常的父ID值（空字符串、不存在的父节点等）
+
+
+
+
+
+
数据结构分析:
+
+
原始数据: {{ treeData.length }} 条
+
选中值: {{ selectedValue || '无' }}
+
包含异常父ID值
+
+
+
原始数据:
+
{{ JSON.stringify(treeData, null, 2) }}
+
+
+
+ 🔧 预期结果: 组件应该容错处理，将无效父ID的节点都显示为根节点
+
+
+
用户实际数据测试
+
+ 测试用户提供的实际数据格式: id/name/fid (fid=0为根节点)
+
+
+
+
+
+
数据结构分析:
+
+
原始数据: {{ userData.length }} 条
+
选中值: {{ selectedValue || '无' }}
+
字段映射: id→value, name→text, fid→parentId
+
注意: fid=0 视为根节点
+
+
+
原始数据:
+
{{ JSON.stringify(userData, null, 2) }}
+
+
+
+ ✅ 预期结果: "测试"作为根节点，"测试1"作为其子节点
+
+
+
树结构构建对比测试
+
+ 对比不同数据格式的树结构构建效果
+
+
+
+
+
+
标准格式 (value/text/parentId)
+
+
+ 选中: {{ standardValue || '无' }}
+
+
+
+
+
+
数字ID格式 (id/name/pid)
+
+
+ 选中: {{ numberValue || '无' }}
+
+
+
+
+
+
用户格式 (id/name/fid)
+
+
+ 选中: {{ userValue || '无' }}
+
+
+
+
+
+
构建结果分析:
+
+
+
标准格式数据:
+
{{ JSON.stringify(standardData, null, 2) }}
+
+
+
数字ID格式数据:
+
{{ JSON.stringify(numberData, null, 2) }}
+
+
+
用户格式数据:
+
{{ JSON.stringify(userData, null, 2) }}
+
+
+
+
+
+ 📊 对比目标: 三种格式都应该构建出正确的树结构，验证字段映射和类型转换的正确性
+
+
+
Vue2 Teleport兼容性修复测试
+
+ 修复Vue2中不支持teleport导致的弹出层不显示问题
+
+
+
+
+
页面顶部 - 向下弹出测试
+
+
+
+
相对定位（不挂载到body）
+
+
+ 选中: {{ value1 || '无' }}
+
+
+
+
+
挂载到body（修复后）
+
+
+ 选中: {{ value2 || '无' }}
+
+
+
+
+
+ ✅ 预期结果：两个选择器都应该能正常弹出向下的下拉面板
+
+
+
+
+
+
滚动到底部进行向上弹出测试
+
+
+
+
+
页面底部 - 向上弹出测试
+
+
+
+
相对定位 + 向上弹出
+
+
+ 选中: {{ value3 || '无' }}
+
+
+
+
+
Body挂载 + 向上弹出
+
+
+ 选中: {{ value4 || '无' }}
+
+
+
+
+
+
强制向上弹出测试
+
+
+
相对定位 + 强制向上
+
+
+
+
+
Body挂载 + 强制向上
+
+
+
+
+
+
+ ✅ 预期结果：所有选择器都应该能正常弹出向上的下拉面板
+
+
+
+
+
+
🔧 修复说明：
+
+
问题：Vue2不支持teleport组件，导致弹出层无法正确渲染
+
解决方案：
+
+ - 移除teleport组件，使用v-if条件渲染
+ - appendToBody=false时，使用相对定位
+ - appendToBody=true时，使用固定定位挂载到body
+ - 保持原有的智能位置计算和样式控制
+
+
+
+
+
+
+
🧪 测试要点：
+
+ - 弹出层显示：所有配置下弹出层都应该正常显示
+ - 位置计算：向上/向下弹出方向应该正确
+ - 样式渲染：弹出层样式应该正确应用
+ - 交互功能：选择、展开/收起功能正常
+ - 遮挡处理：appendToBody应该能解决遮挡问题
+
+
+