docs/docs/cn/shared-components/index.md
NocoBase client v2 内置了一批公共组件。写插件页面、设置页或表单时，可以直接使用这些组件，复用 NocoBase 已经准备好的 UI 和交互。
| 我想要…… | 去哪里看 |
|---|---|
| 控制底层全屏扫码器 | CodeScanner |
| 在 dialog 里放一个标准表单 | DialogFormLayout |
| 在 drawer 里放一个标准表单 | DrawerFormLayout |
只允许选择 $env 环境变量 | EnvVariableInput |
| 输入文件大小并统一保存为字节数 | FileSizeInput |
| 编辑 JSON / JSON5 配置 | JsonTextArea |
| 密码输入并显示强度提示 | PasswordInput |
| 从接口异步加载 Select 选项 | RemoteSelexct |
| 输入框里支持扫码 | ScanInput |
| 让字段同时支持常量和变量 | TypedVariableInput |
让单行字段支持 {{ $env.X }}、{{ $user.name }} 这类变量 | VariableInput |
| 在 JSON / JSON5 配置中插入变量 | VariableJsonTextArea |
| 让多行文本支持变量 | VariableTextArea |
| 给 Collection 做多条件筛选 | CollectionFilter |
| 把 Collection 筛选面板嵌入页面 | CollectionFilterPanel |
| 自定义 antd Table 拖拽行 | SortableRow |
| 自定义 Table 拖拽手柄列 | SortHandle |
| 在设置页里展示列表、选择行、拖拽排序 | Table |
| 使用 Ant Design 图标或注册自定义图标 | Icon |
| 给插件内部扩展项做注册表 | createFormRegistry |
在客户端插件中按需引入组件，然后像普通 React 组件一样使用：
import { RemoteSelect, Table } from '@nocobase/client-v2';
function SettingsPage() {
return (
<>
<RemoteSelect request={loadOptions} />
<Table rowKey="id" columns={columns} dataSource={records} />
</>
);
}
默认用 React + Antd 写页面就行。遇到下面这些 NocoBase 插件里的高频场景时，再优先查这里的组件：
如果只是普通输入框、按钮、提示信息，直接用 Antd 组件更直接。