(name: string, of?: any): R;
+}
+```
+
+示例
+
+```ts
+import axios from 'axios';
+
+// 不传参时，内部直接创建 axios 实例
+const apiClient = new APIClient();
+
+// 提供 AxiosRequestConfig 配置参数
+const apiClient = new APIClient({
+ baseURL: '',
+});
+
+// 提供 AxiosInstance
+const instance = axios.create({
+ baseURL: '',
+});
+const apiClient = new APIClient(instance);
+
+// 常规请求
+const response = await apiClient.request({ url });
+
+// NocoBase 特有的资源操作
+const response = await apiClient.resource('posts').list();
+
+// 请求共享
+const { data, loading, run } = apiClient.service('uid');
+```
+
+`api.service(uid)` 的例子，ComponentB 里刷新 ComponentA 的请求数据
+
+(
+ service: AxiosRequestConfig
| ResourceActionOptions
| FunctionService,
+ options?: Options,
+);
+```
+
+支持 `axios.request(config)`，config 详情查看 [axios](https://github.com/axios/axios#request-config)
+
+```ts
+const { data, loading, refresh, run, params } = useRequest({ url: '/users' });
+
+// useRequest 里传的是 AxiosRequestConfig，所以 run 里传的也是 AxiosRequestConfig
+run({
+ params: {
+ pageSize: 20,
+ }
+});
+```
+
+例子如下：
+
+{data?.data?.name}
;
+});
diff --git a/packages/core/client/docs/zh-CN/core/request/demos/demo2.tsx b/packages/core/client/docs/zh-CN/core/request/demos/demo2.tsx
new file mode 100644
index 0000000000..823a5dbb41
--- /dev/null
+++ b/packages/core/client/docs/zh-CN/core/request/demos/demo2.tsx
@@ -0,0 +1,23 @@
+import { APIClient, APIClientProvider, compose, useRequest } from '@nocobase/client';
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+
+const apiClient = new APIClient();
+
+const mock = new MockAdapter(apiClient.axios);
+
+mock.onGet('/users:get').reply(200, {
+ data: { id: 1, name: 'John Smith' },
+});
+
+const providers = [[APIClientProvider, { apiClient }]];
+
+export default compose(...providers)(() => {
+ const { data } = useRequest<{
+ data: any;
+ }>({
+ url: 'users:get',
+ method: 'get',
+ });
+ return {data?.data?.name}
;
+});
diff --git a/packages/core/client/docs/zh-CN/core/request/demos/demo3.tsx b/packages/core/client/docs/zh-CN/core/request/demos/demo3.tsx
new file mode 100644
index 0000000000..d27bf0470f
--- /dev/null
+++ b/packages/core/client/docs/zh-CN/core/request/demos/demo3.tsx
@@ -0,0 +1,69 @@
+import { uid } from '@formily/shared';
+import { APIClient, APIClientProvider, useAPIClient, useRequest } from '@nocobase/client';
+import { Button, Input, Space, Table } from 'antd';
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+
+const apiClient = new APIClient();
+
+const mock = new MockAdapter(apiClient.axios);
+const sleep = (value: number) => new Promise((resolve) => setTimeout(resolve, value));
+
+mock.onGet('/users:list').reply(async () => {
+ await sleep(1000);
+ return [
+ 200,
+ {
+ data: [
+ { id: 1, name: uid() },
+ { id: 2, name: uid() },
+ ],
+ },
+ ];
+});
+
+const ComponentA = () => {
+ console.log('ComponentA');
+ const { data, loading } = useRequest<{
+ data: any;
+ }>(
+ {
+ url: 'users:list',
+ method: 'get',
+ },
+ {
+ uid: 'test', // 当指定了 uid 的 useRequest 的结果，可以通过 api.service(uid) 获取
+ },
+ );
+ return (
+
+ );
+};
+
+const ComponentB = () => {
+ console.log('ComponentB');
+ const apiClient = useAPIClient();
+ return (
+
+
+
+
+ );
+};
+
+export default () => {
+ return (
+
+
+
+
+
+
+ );
+};
diff --git a/packages/core/client/docs/zh-CN/core/request/index.md b/packages/core/client/docs/zh-CN/core/request/index.md
new file mode 100644
index 0000000000..d442a20194
--- /dev/null
+++ b/packages/core/client/docs/zh-CN/core/request/index.md
@@ -0,0 +1,167 @@
+# APIClient
+
+## APIClient
+
+```ts
+class APIClient {
+ // axios 实例
+ axios: AxiosInstance;
+ // 缓存带 uid 的 useRequest({}, {uid}) 的结果，可供其他组件调用
+ services: Record>;
+ // 构造器
+ constructor(instance?: AxiosInstance | AxiosRequestConfig);
+ // 客户端请求，支持 AxiosRequestConfig 和 ResourceActionOptions
+ request, D = any>(config: AxiosRequestConfig | ResourceActionOptions): Promise;
+ // 获取资源
+ resource(name: string, of?: any): R;
+}
+```
+
+示例
+
+```ts
+import axios from 'axios';
+
+// 不传参时，内部直接创建 axios 实例
+const apiClient = new APIClient();
+
+// 提供 AxiosRequestConfig 配置参数
+const apiClient = new APIClient({
+ baseURL: '',
+});
+
+// 提供 AxiosInstance
+const instance = axios.create({
+ baseURL: '',
+});
+const apiClient = new APIClient(instance);
+
+// 常规请求
+const response = await apiClient.request({ url });
+
+// NocoBase 特有的资源操作
+const response = await apiClient.resource('posts').list();
+
+// 请求共享
+const { data, loading, run } = apiClient.service('uid');
+```
+
+`api.service(uid)` 的例子，ComponentB 里刷新 ComponentA 的请求数据
+
+(
+ service: AxiosRequestConfig
| ResourceActionOptions
| FunctionService,
+ options?: Options,
+);
+```
+
+支持 `axios.request(config)`，config 详情查看 [axios](https://github.com/axios/axios#request-config)
+
+```ts
+const { data, loading, refresh, run, params } = useRequest({ url: '/users' });
+
+// useRequest 里传的是 AxiosRequestConfig，所以 run 里传的也是 AxiosRequestConfig
+run({
+ params: {
+ pageSize: 20,
+ }
+});
+```
+
+例子如下：
+
+Loading...
;
const AppError: FC<{ error: Error }> = ({ error }) => {
return (
-
Load Plugin Error
+
App Error
{error?.message}
{process.env.__TEST__ && error?.stack}
= RemoteSelectProps
& {
+ action?: string;
+ multiple?: boolean;
};
```
+
+## Basic Usage
+
+
+ {fieldSchema.name}
+
+
+ );
+ },
+ { displayName: 'MyBlock' },
+);
+
+const App = getAppComponent({
+ designable: true,
+ schema: {
+ type: 'void',
+ name: 'root',
+ 'x-component': 'DndContext',
+ properties: {
+ block1: {
+ type: 'void',
+ 'x-decorator': 'BlockItem',
+ 'x-component': 'MyBlock',
+ 'x-settings': 'simpleSettings',
+ },
+ block2: {
+ type: 'void',
+ 'x-decorator': 'BlockItem',
+ 'x-component': 'MyBlock',
+ 'x-settings': 'simpleSettings',
+ },
+ block3: {
+ type: 'void',
+ 'x-decorator': 'BlockItem',
+ 'x-component': 'MyBlock',
+ 'x-settings': 'simpleSettings',
+ },
+ },
+ },
+ appOptions: {
+ schemaSettings: [simpleSettings],
+ components: {
+ MyBlock,
+ },
+ },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/block-item/index.md b/packages/core/client/src/schema-component/antd/block-item/index.md
index c2f97b4ffe..842def429d 100644
--- a/packages/core/client/src/schema-component/antd/block-item/index.md
+++ b/packages/core/client/src/schema-component/antd/block-item/index.md
@@ -1,11 +1,22 @@
----
-group:
- title: Schema Components
- order: 3
----
-
# BlockItem
-普通的装饰器（Decorator）组件，无特殊 UI 效果，一般用在 x-decorator 中。用于提供区块的管理，如拖拽功能、当前节点的 SettingsForm。CardItem 和 FormItem 组件都是基于 BlockItem 实现，也具备以上相同功能。
+普通的装饰器（Decorator）组件，无 UI 效果，一般用在 `x-decorator` 中。
-
diff --git a/packages/core/client/src/schema-component/antd/color-picker/demos/new-demos/basic.tsx b/packages/core/client/src/schema-component/antd/color-picker/demos/new-demos/basic.tsx
new file mode 100644
index 0000000000..f45203b915
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/color-picker/demos/new-demos/basic.tsx
@@ -0,0 +1,20 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+ schema: {
+ type: 'void',
+ name: 'root',
+ 'x-decorator': 'FormV2',
+ 'x-component': 'ShowFormData',
+ properties: {
+ test: {
+ type: 'string',
+ title: 'Test',
+ 'x-decorator': 'FormItem',
+ 'x-component': 'ColorPicker',
+ },
+ },
+ },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/color-picker/demos/new-demos/read-pretty.tsx b/packages/core/client/src/schema-component/antd/color-picker/demos/new-demos/read-pretty.tsx
new file mode 100644
index 0000000000..d666c4ac11
--- /dev/null
+++ b/packages/core/client/src/schema-component/antd/color-picker/demos/new-demos/read-pretty.tsx
@@ -0,0 +1,22 @@
+import { getAppComponent } from '@nocobase/test/web';
+
+const App = getAppComponent({
+ schema: {
+ type: 'void',
+ name: 'root',
+ 'x-decorator': 'FormV2',
+ 'x-component': 'ShowFormData',
+ 'x-pattern': 'readPretty',
+ properties: {
+ test: {
+ type: 'string',
+ default: '#8BBB11',
+ title: 'Test',
+ 'x-decorator': 'FormItem',
+ 'x-component': 'ColorPicker',
+ },
+ },
+ },
+});
+
+export default App;
diff --git a/packages/core/client/src/schema-component/antd/color-picker/index.md b/packages/core/client/src/schema-component/antd/color-picker/index.md
index f30325a471..9240492f54 100644
--- a/packages/core/client/src/schema-component/antd/color-picker/index.md
+++ b/packages/core/client/src/schema-component/antd/color-picker/index.md
@@ -1,18 +1,17 @@
----
-group:
- title: Schema Components
- order: 3
----
-
# ColorPicker
-## Examples
-
-### Basic
-
-
+颜色选择器，其基于 ant-design [ColorPicker](https://ant.design/components/color-picker/) 组件进行封装。
+```ts
+interface ColorPickerProps extends Omit
{
+ onChange?: (color: string) => void;
+}
+```
+## Basic Usage
+