我已经阅读了文档的核心设计方案。根据文档要求，我将创建一个完整的前端样例，包含：

1. 通用基础数据联想控件组件 - 支持多字段搜索、状态过滤、分页加载
2. 演示页面 - 展示各种业务场景的使用示例

让我先读取现有的相关组件作为参考：

现在我已经了解了项目的组件结构。让我创建完整的前端样例：

现在让我创建一个业务表单示例页面，展示更完整的业务场景：

现在让我更新主页，添加到演示页面的导航链接：

我已经根据文档完成了前端样例的设计和实现。以下是我创建的内容：

主要组件

1. /components/base-data-select/index.tsx - 通用基础数据联想选择控件

   • 支持多字段模糊搜索（中文名称/英文名称/标准编码/助记码）
   • 300ms 输入防抖，避免频繁请求
   • 分页加载 + 滚动到底部自动加载更多
   • 支持状态过滤（业务场景/管理场景）
   • 可配置展示选项（状态标签、助记码、英文名称等）

2. /components/base-data-select/status-badge.tsx - 状态标签组件

   • 显示启用/禁用/冻结三种状态

3. /types/base-data.ts - TypeScript 类型定义

   • 包含所有基础数据类型枚举、状态枚举、接口定义

4. /lib/mock-data.ts - 模拟数据

   • 包含港口、船公司、仓库、货种、货主、币种、箱型等模拟数据

演示页面

1. 主页 (/app/page.tsx) - 组件配置演示

   • 业务场景示例（水运货代模块 / 仓储管理模块）
   • 配置选项演示（数据类型、状态过滤、展示选项）
   • 状态说明文档

2. 海运订单 (/app/demo/shipping-order/page.tsx) - 完整业务表单示例

   • 展示在实际订单表单中的使用方式

3. 入库单 (/app/demo/warehouse-inbound/page.tsx) - 仓储业务表单示例

   • 展示危险品货物提醒等仓储特殊场景

现在我将修改组件，将下拉列表改为多列表格形式，带表头：

我已将下拉列表组件升级为多列表格形式。主要改动包括：

1. 表头行 - 新增固定表头，显示各列标题（编码、名称、英文名、助记码、状态）
2. 列配置系统 - 支持自定义列宽、对齐方式、自定义渲染函数
3. 表格布局 - 使用 flex 布局模拟表格，支持斑马纹样式
4. 默认宽度增加 - popoverWidth 默认从 400px 增加到 600px 以适应多列展示