@nocobase/plugin-flow-engine 2.1.0-alpha.9 → 2.1.0-beta.10

package/dist/ai/docs/runjs/context/import-async.md

@@ -1,16 +1,16 @@
 # ctx.importAsync()
 
-Dynamically load **ESM modules** or **CSS** via URL, applicable to various RunJS scenarios. Use `ctx.importAsync()` when third-party ESM libraries are required, and `ctx.requireAsync()` for UMD/AMD libraries. Passing a `.css` address will load and inject the styles into the page.
+Dynamically loads **ESM modules** or **CSS** by URL; use in all RunJS scenarios. For third-party ESM use `ctx.importAsync()`; for UMD/AMD use `ctx.requireAsync()`. Pass a `.css` URL to load and inject styles.
 
 ## Use Cases
 
 | Scenario | Description |
-|------|------|
-| **JSBlock** | Dynamically load ESM libraries such as Vue, ECharts, or Tabulator to implement custom charts, tables, dashboards, etc. |
-| **JSField / JSItem / JSColumn** | Load lightweight ESM utility libraries (e.g., dayjs plugins) to assist in rendering. |
-| **Workflow / Action Events** | Load dependencies on demand before executing business logic. |
+|----------|-------------|
+| **JSBlock** | Load Vue, ECharts, Tabulator, etc. for custom charts, tables, boards |
+| **JSField / JSItem / JSColumn** | Load small ESM utils (e.g. dayjs plugins) for rendering |
+| **Event flow / action events** | Load dependencies then run logic |
 
-## Type Definition
+## Type
 
 ```ts
 importAsync<T = any>(url: string): Promise<T>;
@@ -19,134 +19,90 @@ importAsync<T = any>(url: string): Promise<T>;
 ## Parameters
 
 | Parameter | Type | Description |
-|------|------|------|
-| `url` | `string` | The address of the ESM module or CSS. Supports shorthand `<package>@<version>` or subpaths `<package>@<version>/<file-path>` (e.g., `vue@3.4.0`, `dayjs@1/plugin/relativeTime.js`), which will be concatenated with the CDN prefix according to the configuration. Full URLs are also supported. When a `.css` file is passed, it will be loaded and injected as a style. For libraries depending on React, you can append `?deps=react@18.2.0,react-dom@18.2.0` to ensure they share the same React instance with the page. |
+|-----------|------|-------------|
+| `url` | `string` | ESM or CSS URL. Supports shorthand `<package>@<version>` or subpath `<package>@<version>/<path>` (e.g. `vue@3.4.0`, `dayjs@1/plugin/relativeTime.js`), resolved with configured CDN prefix; full URLs also supported. For `.css` URLs, loads and injects styles. For React-dependent libs add `?deps=react@18.2.0,react-dom@18.2.0` to share the same React instance. |
 
-## Return Value
+## Returns
 
-- A Promise that resolves to the module's namespace object.
+- Resolved module namespace object (Promise value).
 
-## URL Format Description
+## URL format
 
-- **ESM and CSS**: In addition to ESM modules, loading CSS is also supported (pass a `.css` URL to load and inject it into the page).
-- **Shorthand Format**: Defaults to **https://esm.sh** as the CDN prefix if not configured. For example, `vue@3.4.0` actually requests `https://esm.sh/vue@3.4.0`.
-- **?deps**: Libraries that depend on React (such as `@dnd-kit/core`, `react-big-calendar`) should append `?deps=react@18.2.0,react-dom@18.2.0` to avoid conflicts with the page's React instance, which could lead to "Invalid hook call" errors.
-- **Self-hosted CDN**: You can specify an internal network or self-hosted service via environment variables:
-  - **ESM_CDN_BASE_URL**: The base URL for the ESM CDN (default is `https://esm.sh`).
-  - **ESM_CDN_SUFFIX**: Optional suffix (e.g., `/+esm` for jsDelivr).
-  - For self-hosted services, refer to: [nocobase/esm-server](https://github.com/nocobase/esm-server)
+- **ESM and CSS**: Besides ESM, you can load CSS (pass a `.css` URL; it is injected into the page).
+- **Shorthand**: When not configured, **https://esm.sh** is used as CDN prefix. E.g. `vue@3.4.0` → `https://esm.sh/vue@3.4.0`.
+- **?deps**: For React-dependent libs (e.g. `@dnd-kit/core`, `react-big-calendar`) add `?deps=react@18.2.0,react-dom@18.2.0` to avoid Invalid hook call from multiple React instances.
+- **Self-hosted CDN**: Set env vars for intranet or custom service:
+  - **ESM_CDN_BASE_URL**: ESM CDN base (default `https://esm.sh`)
+  - **ESM_CDN_SUFFIX**: Optional suffix (e.g. jsDelivr `/+esm`)
+  - Reference: [nocobase/esm-server](https://github.com/nocobase/esm-server)
 
-## Difference from ctx.requireAsync()
+## vs ctx.requireAsync()
 
-- **ctx.importAsync()**: Loads **ESM modules** and returns the module namespace. Suitable for modern libraries (ESM builds like Vue, dayjs, etc.).
-- **ctx.requireAsync()**: Loads **UMD/AMD** modules or scripts that attach to the global scope. Often used for UMD libraries like ECharts or FullCalendar. If a library provides both ESM and UMD, `ctx.importAsync()` is preferred.
+- **ctx.importAsync()**: Loads **ESM**; returns module namespace; good for Vue, dayjs, etc. (ESM builds).
+- **ctx.requireAsync()**: Loads **UMD/AMD** or global scripts; good for ECharts, FullCalendar (UMD), etc. If a lib has ESM, prefer `ctx.importAsync()`.
 
 ## Examples
 
-### Basic Usage
-
-Demonstrates the most basic usage of dynamically loading ESM modules and CSS by package name or full URL.
+### Basic
 
 ```javascript
 const Vue = await ctx.importAsync('vue@3.4.0');
-// Equivalent to loading from https://esm.sh/vue@3.4.0
 
 const relativeTime = await ctx.importAsync('dayjs@1/plugin/relativeTime.js');
-// With subpath (e.g., dayjs plugin)
 
 const pkg = await ctx.importAsync('https://cdn.example.com/my-module.js');
-// Full URL
 
 await ctx.importAsync('https://cdn.example.com/theme.css');
-// Load CSS and inject into the page
 ```
 
-### ECharts Example
-
-Use ECharts to draw a sales overview chart with bar and line graphs.
+### ECharts
 
 ```ts
-// 1. Dynamically load ECharts module
 const echarts = await ctx.importAsync('echarts@5.4.3');
 
-// 2. Create chart container and render
 const chartEl = document.createElement('div');
 chartEl.style.width = '100%';
 chartEl.style.height = '400px';
 ctx.render(chartEl);
 
-// 3. Initialize ECharts instance
 const chart = echarts.init(chartEl);
 
-// 4. Configure chart
 const option = {
-  title: {
-    text: 'Sales Overview',
-    left: 'center',
-  },
-  tooltip: {
-    trigger: 'axis',
-  },
-  legend: {
-    data: ['Sales', 'Profit'],
-    top: '10%',
-  },
-  xAxis: {
-    type: 'category',
-    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
-  },
-  yAxis: {
-    type: 'value',
-  },
+  title: { text: 'Sales Overview', left: 'center' },
+  tooltip: { trigger: 'axis' },
+  legend: { data: ['Sales', 'Profit'], top: '10%' },
+  xAxis: { type: 'category', data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] },
+  yAxis: { type: 'value' },
   series: [
-    {
-      name: 'Sales',
-      type: 'bar',
-      data: [120, 200, 150, 80, 70, 110],
-    },
-    {
-      name: 'Profit',
-      type: 'line',
-      data: [20, 40, 30, 15, 12, 25],
-    },
+    { name: 'Sales', type: 'bar', data: [120, 200, 150, 80, 70, 110] },
+    { name: 'Profit', type: 'line', data: [20, 40, 30, 15, 12, 25] },
   ],
 };
 
-// 5. Set option and render chart
 chart.setOption(option);
 
-// 6. Optional: Responsive sizing
-window.addEventListener('resize', () => {
-  chart.resize();
-});
+window.addEventListener('resize', () => chart.resize());
 
-// 7. Optional: Event listener
 chart.on('click', (params) => {
   ctx.message.info(`Clicked ${params.seriesName} on ${params.name}, value: ${params.value}`);
 });
 ```
 
-### Tabulator Example
-
-Demonstrates rendering a data table with pagination and row click events in a block using Tabulator.
+### Tabulator
 
 ```ts
-// 1. Load Tabulator styles
 await ctx.importAsync('tabulator-tables@6.2.5/dist/css/tabulator.min.css');
 
-// 2. Dynamically load Tabulator module
 const { TabulatorFull } = await ctx.importAsync('tabulator-tables@6.2.5');
 
-// 3. Create table container and render
 const tableEl = document.createElement('div');
 ctx.render(tableEl);
 
-// 4. Initialize Tabulator table
 const table = new TabulatorFull(tableEl, {
   data: [
-    { id: 1, name: 'Alice', age: 25, city: 'New York' },
-    { id: 2, name: 'Bob', age: 30, city: 'London' },
-    { id: 3, name: 'Charlie', age: 28, city: 'Paris' },
+    { id: 1, name: 'Alice', age: 25, city: 'Beijing' },
+    { id: 2, name: 'Bob', age: 30, city: 'Shanghai' },
+    { id: 3, name: 'Charlie', age: 28, city: 'Guangzhou' },
   ],
   columns: [
     { title: 'ID', field: 'id', width: 80 },
@@ -159,30 +115,22 @@ const table = new TabulatorFull(tableEl, {
   paginationSize: 10,
 });
 
-// 5. Optional: Event listener
 table.on('rowClick', (e, row) => {
   const rowData = row.getData();
   ctx.message.info(`Row clicked: ${rowData.name}`);
 });
 ```
 
-### FullCalendar (ESM) Example
-
-Shows how to load FullCalendar and its plugins via ESM and render a basic monthly view calendar.
+### FullCalendar (ESM)
 
 ```ts
-// 1. Dynamically load FullCalendar core module
 const { Calendar } = await ctx.importAsync('@fullcalendar/core@6.1.20');
-
-// 2. Dynamically load dayGrid plugin
 const dayGridPlugin = await ctx.importAsync('@fullcalendar/daygrid@6.1.20');
 
-// 3. Create calendar container and render
 const calendarEl = document.createElement('div');
 calendarEl.id = 'calendar';
 ctx.render(calendarEl);
 
-// 4. Initialize and render calendar
 const calendar = new Calendar(calendarEl, {
   plugins: [dayGridPlugin.default || dayGridPlugin],
   headerToolbar: {
@@ -195,160 +143,22 @@ const calendar = new Calendar(calendarEl, {
 calendar.render();
 ```
 
-### dnd-kit Simple Drag-and-Drop Example
+### dnd-kit (with ?deps)
 
-Uses `@dnd-kit/core` to implement a minimal example of dragging a Box to a target area within a block.
+For React-based libs like `@dnd-kit/core`, use `?deps=react@18.2.0,react-dom@18.2.0` so the same React instance is used and hooks work:
 
 ```ts
-// 1. Load React, react-dom, @dnd-kit/core (?deps ensures same React instance to avoid Invalid hook call)
 const React = await ctx.importAsync('react@18.2.0');
 const { createRoot } = await ctx.importAsync('react-dom@18.2.0/client');
 const core = await ctx.importAsync('@dnd-kit/core@6.3.1?deps=react@18.2.0,react-dom@18.2.0');
-const { DndContext, closestCenter, PointerSensor, useSensor, useSensors, useDraggable, useDroppable } = core;
-
-function DraggableBox() {
-  const { attributes, listeners, setNodeRef, transform } = useDraggable({ id: 'box' });
-  const style = {
-    padding: 12,
-    marginBottom: 8,
-    background: '#e6f7ff',
-    cursor: 'grab',
-    transform: transform ? 'translate3d(' + transform.x + 'px,' + transform.y + 'px,0)' : undefined,
-  };
-  return React.createElement('div', { ref: setNodeRef, style, ...attributes, ...listeners }, 'Drag me');
-}
-
-function DropZone() {
-  const { setNodeRef, isOver } = useDroppable({ id: 'zone' });
-  return React.createElement(
-    'div',
-    {
-      ref: setNodeRef,
-      style: { padding: 24, background: isOver ? '#b7eb8f' : '#f5f5f5', borderRadius: 8, minHeight: 80 },
-    },
-    'Drop here',
-  );
-}
-
-function App() {
-  const sensors = useSensors(useSensor(PointerSensor));
-  function onDragEnd(e) {
-    if (e.over && e.over.id === 'zone') ctx.message.success('Dropped in zone');
-  }
-  return React.createElement(
-    DndContext,
-    { sensors, collisionDetection: closestCenter, onDragEnd },
-    React.createElement(
-      'div',
-      { style: { maxWidth: 280 } },
-      React.createElement(DraggableBox),
-      React.createElement(DropZone),
-    ),
-  );
-}
-
-// 2. Render
-ctx.render(<App />);
+// Use core (DndContext, useDraggable, useDroppable, etc.) with React
 ```
 
-This example relies only on `@dnd-kit/core` to trigger a notification when a Box is dropped into a specific area, demonstrating the simplest drag-and-drop interaction combining `ctx.importAsync` and React in RunJS.
-
-### dnd-kit Sortable List Example
-
-Implements a vertical sortable list using dnd-kit's core, sortable, and utilities.
-
-```ts
-// 1. Load React and dnd-kit related packages (?deps ensures same React instance)
-const React = await ctx.importAsync('react@18.2.0');
-const { createRoot } = await ctx.importAsync('react-dom@18.2.0/client');
-const dndCore = await ctx.importAsync('@dnd-kit/core@6.3.1?deps=react@18.2.0,react-dom@18.2.0');
-const dndSortable = await ctx.importAsync('@dnd-kit/sortable@10.0.0?deps=react@18.2.0,react-dom@18.2.0');
-const dndUtils = await ctx.importAsync('@dnd-kit/utilities@3.2.2');
-
-const { useState } = React;
-const { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } = dndCore;
-const {
-  arrayMove,
-  SortableContext,
-  sortableKeyboardCoordinates,
-  verticalListSortingStrategy,
-  useSortable,
-} = dndSortable;
-const { CSS } = dndUtils;
-
-// 2. SortableItem component (must be inside SortableContext)
-function SortableItem(props) {
-  const { id, label } = props;
-  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    padding: '12px 16px',
-    marginBottom: 8,
-    background: '#f5f5f5',
-    borderRadius: 6,
-    cursor: 'grab',
-  };
-  return React.createElement('div', { ref: setNodeRef, style, ...attributes, ...listeners }, label);
-}
-
-// 3. App: DndContext + SortableContext + Drag end handler
-const labels = { 1: 'First', 2: 'Second', 3: 'Third', 4: 'Fourth' };
-function App() {
-  const [items, setItems] = useState([1, 2, 3, 4]);
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
-  );
-
-  function handleDragEnd(event) {
-    const { active, over } = event;
-    if (over && active.id !== over.id) {
-      setItems((prev) => {
-        const oldIndex = prev.indexOf(active.id);
-        const newIndex = prev.indexOf(over.id);
-        return arrayMove(prev, oldIndex, newIndex);
-      });
-      ctx.message.success('List reordered');
-    }
-  }
-
-  return React.createElement(
-    DndContext,
-    {
-      sensors,
-      collisionDetection: closestCenter,
-      onDragEnd: handleDragEnd,
-    },
-    React.createElement(
-      SortableContext,
-      { items, strategy: verticalListSortingStrategy },
-      React.createElement(
-        'div',
-        { style: { maxWidth: 320 } },
-        items.map((id) => React.createElement(SortableItem, { key: id, id, label: labels[id] })),
-      ),
-    ),
-  );
-}
-
-// 4. Create container and mount React
-const rootEl = document.createElement('div');
-ctx.render(rootEl);
-createRoot(rootEl).render(React.createElement(App));
-```
-
-This example uses `@dnd-kit/core`, `@dnd-kit/sortable`, and `@dnd-kit/utilities` to implement a sortable list that updates its order and displays a "List reordered" message after dragging.
-
-### react-big-calendar Example
-
-Renders a calendar component supporting event display in the current block using `react-big-calendar` and `date-fns` for localization.
+### react-big-calendar
 
 ```tsx
-// 1. Load styles (ctx.importAsync uses ctx.loadCSS for .css files)
 await ctx.importAsync('react-big-calendar@1.11.4/lib/css/react-big-calendar.css');
 
-// 2. Load React, react-dom, react-big-calendar, date-fns, and locale (ensuring same React instance)
 const React = await ctx.importAsync('react@18.2.0');
 const { Calendar, dateFnsLocalizer } = await ctx.importAsync('react-big-calendar@1.11.4?deps=react@18.2.0,react-dom@18.2.0');
 const { format, parse, startOfWeek, getDay } = await ctx.importAsync('date-fns@2.30.0');
@@ -367,7 +177,6 @@ const events = [
   { title: 'Meeting', start: new Date(2026, 0, 29, 10, 0), end: new Date(2026, 0, 29, 11, 0) },
 ];
 
-// 3. Render React Calendar
 ctx.render(
   <Calendar
     localizer={localizer}
@@ -379,110 +188,13 @@ ctx.render(
 );
 ```
 
-### frappe-gantt Example
-
-Uses `frappe-gantt` to render a Gantt chart view showing task start/end times and progress.
-
-```ts
-// 1. Dynamically load Gantt styles and constructor
-// Depends on ESM_CDN_BASE_URL (default https://esm.sh), shorthand paths can be used
-await ctx.importAsync('frappe-gantt@1.0.4/dist/frappe-gantt.css');
-const Gantt = await ctx.importAsync('frappe-gantt@1.0.4');
-
-// 2. Prepare task data
-let tasks = [
-  {
-    id: '1',
-    name: 'Redesign website',
-    start: '2016-12-28',
-    end: '2016-12-31',
-    progress: 20,
-  },
-  {
-    id: '2',
-    name: 'Develop new feature',
-    start: '2017-01-01',
-    end: '2017-01-05',
-    progress: 40,
-    dependencies: '1',
-  },
-  {
-    id: '3',
-    name: 'QA & testing',
-    start: '2017-01-06',
-    end: '2017-01-10',
-    progress: 10,
-    dependencies: '2',
-  },
-];
-
-// 3. Create container and render
-const ganttEl = document.createElement('div');
-ganttEl.id = 'gantt';
-ganttEl.style.height = '400px';
-ctx.render(ganttEl);
-
-// 4. Initialize Gantt chart
-let gantt = new Gantt('#gantt', tasks, {
-  view_mode: 'Day', // View granularity: 'Quarter Day' | 'Half Day' | 'Day' | 'Week' | 'Month'
-  language: 'en',
-  bar_height: 24,
-  padding: 18,
-  custom_popup_html(task) {
-    return `
-      <div class="details-container">
-        <h5>${task.name}</h5>
-        <p>Start: ${task._start.toISOString().slice(0, 10)}</p>
-        <p>End: ${task._end.toISOString().slice(0, 10)}</p>
-        <p>Progress: ${task.progress}%</p>
-      </div>
-    `;
-  },
-});
-```
-
-### @asseinfo/react-kanban Example
-
-Utilizes `@asseinfo/react-kanban` to render a basic Kanban board with columns like Backlog and Doing within a block.
-
-```ts
-// 1. Load styles (ctx.importAsync directly loads .css)
-await ctx.importAsync('@asseinfo/react-kanban@2.2.0/dist/styles.css');
-
-// 2. Load React, react-dom, @asseinfo/react-kanban (?deps ensures same React instance)
-const React = await ctx.importAsync('react@18.2.0');
-const { default: Board } = await ctx.importAsync('@asseinfo/react-kanban@2.2.0?deps=react@18.2.0,react-dom@18.2.0');
-
-const board = {
-  columns: [
-    {
-      id: 1,
-      title: 'Backlog',
-      cards: [
-        { id: 1, title: 'Add card', description: 'Add capability to add a card in a column' },
-      ],
-    },
-    {
-      id: 2,
-      title: 'Doing',
-      cards: [
-        { id: 2, title: 'Drag-n-drop support', description: 'Move a card between the columns' },
-      ],
-    },
-  ],
-};
-
-// 4. Mount the board
-ctx.render(<Board initialBoard={board} />);
-```
-
 ## Notes
 
-- This feature depends on an external network or CDN. In internal network environments, **ESM_CDN_BASE_URL** must be configured to point to a self-hosted service.
-- When a library provides both ESM and UMD, prefer `ctx.importAsync()` for better module semantics.
-- For libraries depending on React, ensure you append `?deps=react@18.2.0,react-dom@18.2.0`. The version must match the React version used by the page, otherwise, an "Invalid hook call" error may occur.
+- Depends on network/CDN; for intranet set **ESM_CDN_BASE_URL** to your own service.
+- When a lib has both ESM and UMD, prefer `ctx.importAsync()` for better module semantics.
+- For React-dependent libs always add `?deps=react@18.2.0,react-dom@18.2.0` (or the version your app uses) to avoid Invalid hook call.
 
 ## Related
 
-- [ctx.requireAsync()](./require-async.md): Load UMD/AMD or globally attached scripts, suitable for UMD libraries like ECharts and FullCalendar.
-- [ctx.render()](./render.md): Render content into a container.
+- [ctx.requireAsync()](./require-async.md): load UMD/AMD or global scripts; good for ECharts, FullCalendar (UMD)
+- [ctx.render()](./render.md): render into container

package/dist/ai/docs/runjs/context/init-resource.md

@@ -1,12 +1,12 @@
 # ctx.initResource()
 
-**Initializes** the resource for the current context. If `ctx.resource` does not already exist, it creates one of the specified type and binds it to the context; if it already exists, it is used directly. Afterward, it can be accessed via `ctx.resource`.
+**Initializes** the current context’s resource: if `ctx.resource` does not exist, creates one of the given type and binds it; otherwise uses the existing one. After that you can use `ctx.resource`.
 
 ## Use Cases
 
-Generally used in **JSBlock** (independent block) scenarios. Most blocks, popups, and other components have `ctx.resource` pre-bound and do not require manual calls. JSBlock has no resource by default, so you must call `ctx.initResource(type)` before loading data via `ctx.resource`.
+Typically used only in **JSBlock** (standalone block). Most blocks and popups already have `ctx.resource`; JSBlock does not, so call `ctx.initResource(type)` first, then use `ctx.resource`.
 
-## Type Definition
+## Type
 
 ```ts
 initResource(
@@ -18,18 +18,18 @@ initResource(
 |-----------|------|-------------|
 | `type` | `string` | Resource type: `'APIResource'`, `'SingleRecordResource'`, `'MultiRecordResource'`, `'SQLResource'` |
 
-**Returns**: The resource instance in the current context (i.e., `ctx.resource`).
+**Returns**: The resource instance in the current context (i.e. `ctx.resource`).
 
-## Difference from ctx.makeResource()
+## Relation to ctx.makeResource()
 
 | Method | Behavior |
 |--------|----------|
-| `ctx.initResource(type)` | Creates and binds if `ctx.resource` does not exist; returns the existing one if it does. Ensures `ctx.resource` is available. |
-| `ctx.makeResource(type)` | Only creates and returns a new instance, does **not** write to `ctx.resource`. Suitable for scenarios requiring multiple independent resources or temporary use. |
+| `ctx.initResource(type)` | Creates and binds if `ctx.resource` is missing; otherwise returns existing. Ensures `ctx.resource` is set |
+| `ctx.makeResource(type)` | Creates a new instance and returns it; **does not** set `ctx.resource`. Use when you need multiple resources or a temporary one |
 
 ## Examples
 
-### List Data (MultiRecordResource)
+### List data (MultiRecordResource)
 
 ```ts
 ctx.initResource('MultiRecordResource');
@@ -39,17 +39,17 @@ const rows = ctx.resource.getData();
 ctx.render(<pre>{JSON.stringify(rows, null, 2)}</pre>);
 ```
 
-### Single Record (SingleRecordResource)
+### Single record (SingleRecordResource)
 
 ```ts
 ctx.initResource('SingleRecordResource');
 ctx.resource.setResourceName('users');
-ctx.resource.setFilterByTk(1); // Specify primary key
+ctx.resource.setFilterByTk(1);
 await ctx.resource.refresh();
 const record = ctx.resource.getData();
 ```
 
-### Specify Data Source
+### Specify data source
 
 ```ts
 ctx.initResource('MultiRecordResource');
@@ -60,15 +60,15 @@ await ctx.resource.refresh();
 
 ## Notes
 
-- In most block scenarios (Forms, Tables, Details, etc.) and popups, `ctx.resource` is already pre-bound by the runtime environment, so calling `ctx.initResource` is unnecessary.
-- Manual initialization is only required in contexts like JSBlock where there is no default resource.
-- After initialization, you must call `setResourceName(name)` to specify the collection, and then call `refresh()` to load the data.
+- In most blocks (form, table, detail, etc.) and popups, `ctx.resource` is already bound; no need to call `ctx.initResource`.
+- Only in contexts like JSBlock that have no resource by default do you need to initialize.
+- After init, call `setResourceName(name)` and then `refresh()` to load data.
 
 ## Related
 
-- [ctx.resource](./resource.md) — The resource instance in the current context
-- [ctx.makeResource()](./make-resource.md) — Creates a new resource instance without binding it to `ctx.resource`
-- [MultiRecordResource](../resource/multi-record-resource.md) — Multiple records/List
-- [SingleRecordResource](../resource/single-record-resource.md) — Single record
-- [APIResource](../resource/api-resource.md) — General API resource
-- [SQLResource](../resource/sql-resource.md) — SQL query resource
+- [ctx.resource](./resource.md): resource in current context
+- [ctx.makeResource()](./make-resource.md): create resource without binding to `ctx.resource`
+- [MultiRecordResource](../resource/multi-record-resource.md)
+- [SingleRecordResource](../resource/single-record-resource.md)
+- [APIResource](../resource/api-resource.md)
+- [SQLResource](../resource/sql-resource.md)