高频类型置顶需同步保障数据流（后端选项排序+前端查找逻辑）、类型流（as const固化联合类型）、事件流（onMouseDown阻止冒泡）三线协同，任一环节缺失均导致默认值不显示或交互异常。
下拉框默认值不显示高频类型？优先级逻辑没配对
字段类型下拉框的“默认推荐值”不是靠视觉排序决定的，而是由后端返回的选项数组顺序 + 前端渲染逻辑共同控制。如果你改了 ui 顺序但默认选中项没变，大概率是 value 和 defaultvalue 没对齐，或者组件在初始化时直接取了第一个 options[0].value 而非你标记的“高频项”。
实操建议：
- 确保后端返回的
options数组中，高频类型（如"string"、"number"）排在前面，且每个选项带明确value和isFrequent: true标识 - 前端组件初始化时，别直接用
options[0].value作默认值；改用查找逻辑：options.find(opt => opt.isFrequent)?.value || options[0].value - 如果用的是
Ant Design的Select，注意defaultValue是受控属性，必须和value同步，否则首次渲染会忽略你的“置顶”意图
CSS 美化下拉项导致 hover/active 失效？伪类被覆盖了
给 option 或 item 加 background-color 或 padding 很容易破坏原生交互态样式，尤其当使用 emotion、styled-components 或全局 CSS 时，:hover、:active 甚至键盘导航焦点都可能失效。
实操建议：
- 避免直接重写
option标签样式（原生select下不可控）；改用支持自定义菜单的组件，如Ant Design Select的dropdownRender或React-Select的components.Option - 若必须用 CSS，优先用
[aria-selected="true"]、[aria-expanded="true"]等可访问性属性做状态钩子，比依赖:hover更可靠 - 高频项加视觉标识（如小火苗图标 ?）时，用
::before伪元素 +content，别动布局属性，防止列表高度错乱
为什么改了 options 顺序，TypeScript 类型推导还报错？union 类型没收缩
当把高频类型硬编码进 options 数组，又希望 value 类型能自动缩小（比如只允许 "string" | "number" | "boolean"），但 TypeScript 仍推导为 string，说明类型没有显式绑定到数据源。
实操建议：
- 用
as const断言高频类型数组：const frequentTypes = ["string", "number", "boolean"] as const，再用typeof frequentTypes[number]构建联合类型 - 不要从接口或 API 响应里直接 infer 类型——运行时数据结构不可控，类型系统无法信任；高频类型必须在编译期固化
- 如果选项来自后端配置，至少在前端定义一个
ALLOWED_TYPES常量做白名单校验，类型守门和运行时守门得一起上
移动端点击下拉项延迟或失焦？事件冒泡没截断
美化后的下拉项常包裹多层 div，点击时触发多次 onMouseDown → onClick → onBlur，导致选项刚点中就收起，尤其在 iOS Safari 上更明显。
实操建议：
- 所有自定义下拉项容器必须加
onMouseDown={e => e.preventDefault()}，阻止默认聚焦行为干扰 - 避免在
onClick里调用input.focus()或手动setOpen(false)；改用组件自身的onSelect回调（如React-Select的onChange） - 检查是否无意中给父级加了
pointer-events: none或touch-action: manipulation，这两个 CSS 属性在部分安卓 WebView 下会吃掉第一次点击
"string"。
