业务组件库的核心是将业务逻辑沉淀为可复用、可测试、可配置的组合函数，再封装成语义清晰的UI组件；采用“组合函数+基础组件”双层结构，通过provide/inject、props/emits实现通信，配置前置到组合函数参数，形成稳定复用链路。
构建基于组合式 API 的业务组件库，核心不是堆砌组件，而是把业务逻辑沉淀为可复用、可测试、可配置的组合函数（Composable），再封装成语义清晰的 UI 组件。它不是 Ant Design 的复制，而是你团队真实协作流程和领域规则的代码映射。
聚焦业务逻辑，而非 UI 样式
业务组件库的价值不在按钮或表格长得像不像 Ant Design，而在于它是否承载了你们的业务约束。比如：
- “审批按钮”要自动判断当前用户角色、单据状态、权限码，禁用/高亮/弹窗提示逻辑全部收口在
useApprovalButton里 - “客户选择器”需支持模糊搜索、最近使用、部门树筛选、多选校验规则——这些不是 UI 行为，是领域规则，应抽成
useCustomerSelector - “金额输入框”强制带千分位、小数点后两位、负数限制、币种联动，封装为
useCurrencyInput，返回value、formatted、isValid等响应式状态
组件结构：两层封装，职责分明
每个业务组件推荐采用“组合函数 + 基础组件”的双层结构：
- 底层是
useXXX()函数：纯逻辑，无 DOM，只依赖 Vue 组合式 API（ref、computed、watch、provide/inject），可单独单元测试 - 上层是
XXXSelect.vue或XXXForm.vue：仅负责模板渲染、事件绑定、样式接入，调用对应组合函数并透传 props
例如：ProjectSelector.vue 内部只写 const { projects, loading, loadProjects, select } = useProjectSelection(props)，所有过滤、分页、缓存、错误重试都在 useProjectSelection 中实现。
立即学习“前端免费学习笔记（深入）”；
跨组件通信与状态共享设计
避免全局 store 或事件总线。用组合式 API 提供更轻量、更可控的方式：
- 父子通信：用
defineProps/defineEmits显式声明，不隐式依赖 - 同级或深层嵌套：用
provide/inject注入组合函数返回的状态对象，例如provide('formContext', useFormContext())，子组件直接inject('formContext')获取验证方法和错误字段 - 跨路由页面共享：将关键业务状态（如当前项目 ID、用户偏好）封装为
useGlobalState()，内部用localStorage持久化 +watch同步变更
主题与定制能力前置到组合层
样式定制不应只靠 CSS 变量或覆盖类名。把可配置项提前到组合函数参数中：
useDataTable({ rowActions: ['edit', 'delete', 'export'], emptyText: '暂无数据' })useDateRangePicker({ format: 'YYYY-MM-DD HH:mm', showTime: true, disabledDate: (date) => date.isBefore(dayjs()) })
这样，UI 组件只需按约定渲染，而业务方通过传参即可调整行为，无需 fork 或 patch 组件源码。
不复杂但容易忽略：真正让业务组件库活起来的，不是写了多少组件，而是有没有形成“组合函数 → 基础组件 → 业务页面”的稳定链路，以及每次新增需求时，第一反应是“能不能复用或扩展现有组合函数”，而不是“再写一个新组件”。
