docs: update QueryList docs (#2475)

docs/guide/scenes/query-list.md

@@ -1,11 +1,49 @@
-# Query List
+# Query list
 
-The current query list solution corresponding to formily is [AList](https://alist.wiki), the unified list component of Alibaba.
-Specific reference to AList writing.
+Because Formily Schema can completely describe the UI, we can simply abstract out the QueryList/QueryForm/QueryTable components to combine to implement the query list component. The following is only the pseudo code, because the query list scenario usually involves a lot of business packaging. At present, Formily hasn't figured out how to consider both versatility and quick start of business, so it will not open up specific components for the time being.
 
-In 1.x, we provided the React Hook of useFormTableQuery for users to use, but found that the Hook
+But you can take a look at the pseudo-code first. If these components are officially implemented, the usage will definitely be like this:
 
-- In simple scenarios, the useTable in [ahooks](https://ahooks.js.org/) can actually solve the problem
-- In complex scenarios, the abstraction of useFormTableQuery is not high, and it will still lead to a lot of boilerplate code. On the contrary, [AList](https://alist.wiki) performs well in complex scenarios.
+```tsx pure
+import React from 'react'
+import { Void, Object, Array, String } from './MySchemaField'
+export default () => (
+  <Void
+    x-component="QueryList"
+    x-component-props={{
+      service: (params) => fetchRecords(params),
+    }}
+  >
+    <Object name="query" x-component="QueryForm">
+      <String name="name" x-component="Input" />
+      <String name="id" x-component="Input" />
+    </Object>
+    <Void name="toolbar" x-component="QueryToolbar"></Void>
+    <Array name="list" x-component="QueryTable">
+      <Object>
+        <Void x-component="QueryTable.Column">
+          <String name="name" x-component="PreviewText" />
+        </Void>
+        <Void x-component="QueryTable.Column">
+          <String name="id" x-component="PreviewText" />
+        </Void>
+      </Object>
+    </Array>
+  </Void>
+)
+```
 
-So, let the professional project solve the professional field. Formily's positioning is always the form.
+## Ideas
+
+- QueryList
+  - Mainly responsible for sending requests at the top level, and issuing query methods to QueryForm and QueryTable for consumption through React Context
+  - Query parameters need to call `form.query('query')` to find the field of QueryForm, and then take out the value of the field to send the request
+  - When you have finished querying the data, you need to call `form.query('list')` to find the QueryTable field, and then fill in the table data for the value of the field model
+- QueryTable
+  - The idea is very similar to that of ArrayTable. The main thing is to parse the Schema subtree and assemble the Columns data needed by the Table by yourself. If you want to support column merging and row merging, you need to parse more complex data
+  - Based on props.value for rendering Table structure
+  - Rely on RecursionField to render the internal data of the Table Column
+  - Rely on the query method passed down from the context to achieve paging query
+- QueryForm
+  - There is no special logic, the main thing is to combine Form+FormGrid to realize a query form layout
+  - Realize query form query by relying on the query method passed down from the context

docs/guide/scenes/query-list.zh-CN.md

@@ -1,10 +1,49 @@
 # 查询列表
 
-查询列表目前 formily 对应的解决方案是阿里巴巴统一列表组件 [AList](https://alist.wiki)，具体参考 AList 写法
+因为 Formily Schema 是可以完全描述 UI 的，所以我们可以简单的抽象出 QueryList/QueryForm/QueryTable 几个组件来组合实现查询列表组件,以下只是给出伪代码，因为查询列表场景通常都会涉及大量业务封装，目前 Formily 还没想好怎么既考虑通用性又能考虑业务快速上手，所以暂时不开放出具体组件。
 
-在 1.x 中，我们提供了 useFormTableQuery 的 React Hook 给用户使用，但是发现，该 Hook
+不过可以先看看伪代码，如果官方实现这几个组件，那使用方式肯定会是这样：
 
-- 在简单场景，其实使用 [ahooks](https://ahooks.js.org/)中的 useTable 就能解决问题
-- 复杂场景，useFormTableQuery 的抽象度又并不高，还是会导致很多样板代码，相反 [AList](https://alist.wiki) 在复杂场景的表现则很优秀
+```tsx pure
+import React from 'react'
+import { Void, Object, Array, String } from './MySchemaField'
+export default () => (
+  <Void
+    x-component="QueryList"
+    x-component-props={{
+      service: (params) => fetchRecords(params),
+    }}
+  >
+    <Object name="query" x-component="QueryForm">
+      <String name="name" x-component="Input" />
+      <String name="id" x-component="Input" />
+    </Object>
+    <Void name="toolbar" x-component="QueryToolbar"></Void>
+    <Array name="list" x-component="QueryTable">
+      <Object>
+        <Void x-component="QueryTable.Column">
+          <String name="name" x-component="PreviewText" />
+        </Void>
+        <Void x-component="QueryTable.Column">
+          <String name="id" x-component="PreviewText" />
+        </Void>
+      </Object>
+    </Array>
+  </Void>
+)
+```
 
-所以，专业的领域就让专业的项目去解决吧，Formily 的定位始终还是表单
+## 思路
+
+- QueryList
+  - 主要负责在顶层发请求，通过 React Context 下发 query 方法给 QueryForm 和 QueryTable 消费
+  - 查询参数需要调用`form.query('query')`找到 QueryForm 的字段，然后取出字段的 value，用于发请求
+  - 当查询完数据了，需要调用`form.query('list')`找到 QueryTable 的字段，然后给字段模型的 value 填 table 数据
+- QueryTable
+  - 思路跟 ArrayTable 非常相似，主要就是解析 Schema 子树，自己拼装出 Table 需要的 Columns 数据，如果想支持列合并，行合并，就需要解析更复杂的数据
+  - 基于 props.value 用于渲染 Table 结构
+  - 依赖 RecursionField 用于渲染 Table Column 内部数据
+  - 依赖上下文传下来的 query 方法实现分页查询
+- QueryForm
+  - 没什么特殊逻辑，主要就是组合 Form+FormGrid 实现一个查询表单布局
+  - 依赖上下文传下来的 query 方法实现查询表单查询