(# @libeilong/react-admin-form

基于 Formily 与 Ant Design 的表单组件集合，封装了常用表单元素、上传、位置选择等扩展组件与若干便捷 Hook，方便在后台管理系统中快速构建表单界面。

核心特性

• 丰富的表单元素封装（Input、Select、DatePicker、Upload 等）
• 基于 createElement / createRender 的统一渲染工厂，便于扩展自定义控件
• 常用布局组件 FormGrid
• 地图/地点/位置相关的 Hook：useLocationSelect、usePoiSelect 等
• 与 @libeilong/react-admin、@libeilong/map-js-sdk 协同工作

包信息

• 名称: @libeilong/react-admin-form
• 版本: 0.10.3
• License: MIT

安装 在 monorepo 中通常由 root 管理依赖；单独安装：

pnpm add @libeilong/react-admin-form

注意：本包声明 antd 和 react 为 peerDependencies，请在项目中安装匹配版本。

快速开始（示例） 仓库内包含 example 演示：

cd packages/react-admin-form/example
pnpm install
pnpm start

示例默认使用 parcel，打开浏览器查看页面。

导出概览

• registerPopupManager：从 @libeilong/react-admin 转发的弹层注册函数
• 表单渲染工具与元素：createElement, createRender, renderInput, Input, Select, DatePicker, Upload, CustomSelect, AutoComplete, SingleUpload 等（见 src/form）
• 布局组件：FormGrid（位于 src/components/FormGrid.tsx）
• Hooks：useAsyncDataSource, useFieldValueCache, useLocationSelect, useMapKeywordAutoComplete, usePoiSelect
• Form、FormItem：直接导出自 @formily/antd-v5

主要用法示例

1. 使用 Formily 元素（简略示例）：

import React from 'react'
import { Form, FormItem } from '@formily/antd-v5'
import { Input, Select } from '@libeilong/react-admin-form'

export default function Demo(){
	return (
		<Form>
			<FormItem name="name" title="姓名">
				<Input name="name" />
			</FormItem>
			<FormItem name="type" title="类型">
				<Select name="type" />
			</FormItem>
		</Form>
	)
}

2. 使用 createRender / createElement 创建自定义渲染器

import { createRender, createElement } from '@libeilong/react-admin-form'
import { Input as AntInput } from '@formily/antd-v5'

const MyRender = createRender(AntInput)
const MyElement = createElement(AntInput)

3. FormGrid：简单的响应式列布局

import { FormGrid } from '@libeilong/react-admin-form'

<FormGrid>
	<div>列1</div>
	<div>列2</div>
	<div>列3</div>
</FormGrid>

Hooks 简要说明

• useAsyncDataSource(pattern, service)：把异步数据源绑定到字段（用于 Select 的动态数据）
• useFieldValueCache(pattern)：为字段值做本地缓存，以提升体验
• useLocationSelect(pattern, adapter, opts?)：为 CustomSelect 注入位置选择行为（弹出地图选择器），opts.renderValue 可自定义展示
• usePoiSelect(pattern, adapter, opts?)：为 CustomSelect 注入地点选择行为，返回 Poi 并可以自定义展示
• useMapKeywordAutoComplete(pattern, adapter)：用于地图关键字自动补全（适配器依赖 @libeilong/map-js-sdk）

示例：为表单字段绑定位置选择器

import { useLocationSelect } from '@libeilong/react-admin-form'
import { BaseMap } from '@libeilong/map-js-sdk'

// 在组件初始化处调用
useLocationSelect('address', new BaseMap(), { text: '选择位置' })

自定义控件与 Upload

• 本包提供封装好的上传控件 Upload 与 SingleUpload，并导出类型 UploadProps / UploadValue，便于在 Formily 中使用。

构建与发布

• 使用 tsdown 构建：

pnpm --filter @libeilong/react-admin-form run build

发布前 prepublishOnly 会自动执行 tsdown。

示例扩展建议

• 我可以为 example 添加一个完整的表单页面，演示 useLocationSelect/usePoiSelect 与上传控件的联用，并加入简单的 mock API。

贡献

• 欢迎提交 issue 与 PR。请保持代码风格并在 PR 中包含简短说明与可复现示例。

许可证 MIT )