@nocobase/plugin-ai 2.2.0-alpha.1 → 2.2.0-alpha.10

package/dist/ai/docs/nocobase/interface-builder/blocks/data-blocks/gantt.md

@@ -0,0 +1,204 @@
+---
+pkg: '@nocobase/plugin-gantt'
+title: 'Gantt Block'
+description: 'The Gantt block displays record start and end dates and progress on a timeline. It is suitable for project planning, task scheduling, and milestone tracking, and supports title fields, date fields, progress fields, color fields, time scale, the left table, and event popup settings.'
+keywords: 'Gantt block,Gantt,project planning,task scheduling,timeline,progress management,UI building,NocoBase'
+---
+
+# Gantt Block
+
+## Introduction
+
+The Gantt block displays record start and end dates and progress on a timeline. It is suitable for project planning, task scheduling, milestone tracking, and other scenarios where you need to view task duration by time.
+
+![](https://static-docs.nocobase.com/Project-tasks-06-11-2026_11_30_AM.png)
+
+## Installation
+
+This block is a built-in plugin and does not require additional installation.
+
+## Add Block
+
+After selecting the Gantt block and choosing a data table, configure the fields required by the Gantt block in the popup:
+
+1. Select the title field, which is used to display the task name
+2. Select the start date field, which is used to determine the task start time
+3. Select the end date field, which is used to determine the task end time
+4. Optionally select the progress field, which is used to display and drag to update task progress
+5. Optionally select the color field, which is used to distinguish different tasks
+6. Select the time scale, which controls the granularity of the timeline
+
+After completing the configuration, you can create the Gantt block.
+
+![](<https://static-docs.nocobase.com/Project-tasks-06-11-2026_11_27_AM%20(1).png>)
+
+![](https://static-docs.nocobase.com/Project-tasks-06-11-2026_11_27_AM.png)
+
+## Block Settings
+
+![](https://static-docs.nocobase.com/Project-tasks-06-11-2026_11_28_AM.png)
+
+### Gantt Fields
+
+Gantt fields determine how records are mapped to timeline tasks.
+
+They include:
+
+- The title field determines the name displayed on the task bar
+- The start date field determines where the task bar starts
+- The end date field determines where the task bar ends
+- The progress field determines the progress displayed inside the task bar
+- The color field determines the task bar color
+- The time scale determines whether the timeline is displayed by hour, day, week, month, and so on
+
+### Title Field
+
+Used to display the task name. Usually, you can select a string field such as task name, project name, or title.
+
+### Start Date Field
+
+Used to specify the task start time. The Gantt block uses this field to place the task on the timeline.
+
+### End Date Field
+
+Used to specify the task end time. When the start date and end date are the same, the task is displayed as a shorter time range.
+
+### Progress Field
+
+Used to display task completion progress, and supports updating it by dragging the progress handle on the task bar.
+
+The progress field uses a float field. Data is stored from `0` to `1`, and displayed as a percentage in the Gantt block. For example, `0.6` is displayed as `60%`.
+
+### Color Field
+
+Used to set the task bar color, making it easier to distinguish different task types, statuses, or priorities.
+
+The color field supports:
+
+- Single select field
+- Color field
+
+If a single select field is used, the Gantt block will prioritize the color configured for the selected option.
+
+### Time Scale
+
+Used to control the timeline display granularity.
+
+Currently supported:
+
+- Hour
+- Quarter of day
+- Half of day
+- Day
+- Week
+- Month
+- Year
+- Quarter
+
+For short task spans, use hour, half-day, or day. For longer task spans, use week, month, quarter, or year.
+
+### Show Table
+
+When enabled, the Gantt block displays a table area on the left. You can configure table columns to show key task attributes.
+
+When disabled, the block only displays the timeline on the right. This is suitable when page space is limited or you only need to view scheduling.
+
+### Table Width
+
+Used to set the width of the left table area. This setting only appears when Show table is enabled.
+
+If there are many table fields, increase the table width. If only a few fields are kept, reduce the width and leave more space for the timeline.
+
+### Enable Drag to Reschedule
+
+When enabled, you can drag task bars on the timeline to adjust start and end dates.
+
+Details:
+
+- Drag the whole task bar to adjust both the start date and end date
+- Drag the handles on both sides of the task bar to adjust the start date or end date
+- Drag the progress handle to update the progress field
+
+If you do not want users to modify schedules directly in the Gantt block, disable this option.
+
+### Scroll to Today on First Display
+
+When enabled, the Gantt block automatically scrolls to today when it is first displayed.
+
+This option is suitable for projects with long task spans. When the page opens, users can first see tasks near the current date.
+
+### Event Popup Settings
+
+Used to configure how a task bar opens after being clicked.
+
+You can configure:
+
+- Open mode, such as drawer, dialog, or page
+- Popup size
+- Popup template
+
+After clicking a task bar, NocoBase opens the current record according to this configuration, making it convenient to view or edit task details.
+
+### Data Scope
+
+Used to limit the data displayed in the Gantt block.
+
+For example: only show tasks under the current project, or only show unfinished tasks.
+
+For more details, refer to [Data Scope](../block-settings/data-scope).
+
+### Page Size
+
+Used to control the number of records loaded per page. When there are many records, users can switch pages to view more tasks.
+
+### Show Row Numbers
+
+When enabled, the left table displays row numbers, making it easier to locate records when there are many tasks.
+
+### Tree Table
+
+If the current data table is a tree table, the Gantt block can enable tree table mode. After enabling it, the left table displays records by parent-child hierarchy, and the timeline on the right displays tasks in the same hierarchy.
+
+In tree table mode, you can also configure Expand all rows by default.
+
+## Configure Fields
+
+The left table area uses table columns to display record fields.
+
+![](https://static-docs.nocobase.com/Project-tasks-06-11-2026_11_29_AM.png)
+
+### Add Fields
+
+After Show table is enabled, you can add field columns to the left table. Field settings can refer to [Table Column](../../fields/generic/table-column).
+
+### Actions Column
+
+The Gantt block includes an actions column by default. You can add record actions such as view, edit, and delete to the actions column.
+
+If Event popup settings have already been configured, you can also click the task bar on the right to open record details.
+
+## Configure Actions
+
+The Gantt block supports configuring global actions at the top. Available action types depend on the enabled capabilities in the current environment.
+
+![](<https://static-docs.nocobase.com/Project-tasks-06-11-2026_11_29_AM%20(1).png>)
+
+### Built-in Actions
+
+- Today: quickly scroll to today
+- Expand/Collapse: expand or collapse all rows in tree table mode
+
+### Global Actions
+
+- [Add New](../../actions/types/add-new)
+- [Popup](../../actions/types/pop-up)
+- [Link](../../actions/types/link)
+- [Refresh](../../actions/types/refresh)
+- [Filter](../../actions/types/filter)
+- [Bulk Edit](../../actions/types/bulk-edit)
+- [Bulk Update](../../actions/types/bulk-update)
+- [Trigger Workflow](../../actions/types/trigger-workflow)
+- [Custom Request](../../actions/types/custom-request)
+- [JS Item](../../actions/types/js-item)
+- [JS Action](../../actions/types/js-action)
+- [AI Employee](../../actions/types/ai-employee)

package/dist/ai/docs/nocobase/interface-builder/blocks/data-blocks/map.md

@@ -0,0 +1,105 @@
+---
+pkg: '@nocobase/plugin-map'
+title: 'Map Block'
+description: 'The Map block displays collection records on AMap or Google Maps, and supports point, line, polygon, and circle fields.'
+keywords: 'Map Block,AMap,Google Maps,Point,Line,Polygon,Circle,NocoBase'
+---
+
+# Map block
+
+## Introduction
+
+The Map block displays geographic data from a collection on a map. It is suitable for scenarios such as store locations, customer addresses, device distribution, route tracking, and area management.
+
+The Map block supports AMap and Google Maps. It can render point, line, polygon, and circle fields, and can open record views or run block actions from map overlays.
+
+![Map block interface](https://static-docs.nocobase.com/20260615162922.png)
+
+## Installation
+
+The Map block is provided by the built-in `@nocobase/plugin-map` plugin. Enable the plugin before adding the block.
+
+After enabling the plugin, go to "Plugin settings / Map manager" and configure the map provider:
+
+- **AMap**: configure `Access key`, plus `securityJsCode` or `serviceHost`
+- **Google Maps**: configure `Api key`
+
+If the map cannot be loaded, check whether the key is valid, whether the domain whitelist includes the current access domain, and whether the browser can access the selected map provider.
+
+## Prepare map fields
+
+Before adding a Map block, create at least one map field in the target collection. You can find these field types in the "Map-based geometry" group:
+
+| Field type | Usage                                                                 |
+| ---------- | --------------------------------------------------------------------- |
+| Point      | Marks a single location, such as a store, device, or customer address |
+| Line       | Represents a route or track                                           |
+| Polygon    | Represents an area                                                    |
+| Circle     | Represents a radius around a center point                             |
+
+When creating the field, choose the "Map type". This determines whether the field editor and the block use AMap or Google Maps.
+
+## Add block
+
+In page configuration mode, click "Add block" and choose "Map" from "Data Blocks".
+
+![Add a Map block from Data Blocks](https://static-docs.nocobase.com/20260615163017.png)
+
+When creating the block, configure:
+
+1. Select the collection to display.
+2. Select the "Map field" used to draw map overlays. It can be a field in the current collection or a map field reached through an association field.
+3. Optionally select the "Marker field". When the map field is a point field, this field is used as the point label.
+
+If the collection has no available map field, the "Map field" selector will be empty. Add a point, line, polygon, or circle field to the collection first.
+
+## Block settings
+
+### Map field and marker field
+
+Used to change the map field displayed by the block and the marker label field.
+
+The marker field only applies to point fields. It is usually a text field such as name, address, or code.
+
+### Data scope
+
+Used to restrict the records displayed in the Map block.
+
+For large datasets, configure a data scope or add filter actions to narrow the displayed records. The Map block loads all records that match the data scope without pagination.
+
+For more details, see: [Set Data Scope](/interface-builder/blocks/block-settings/data-scope)
+
+### Concatenation order field
+
+Used to sort point records and connect them into a route.
+
+This setting only takes effect when the map field is a point field.
+
+### Default zoom level
+
+Used to set the initial zoom level of the map.
+
+## Actions
+
+The Map block supports adding actions at the top of the block, such as:
+
+- Filter
+- Add new
+- Popup
+- Link
+- Refresh
+- Custom request
+- AI employee
+- JS action
+
+Clicking a map overlay triggers the record opening flow, which is usually used to open a popup, drawer, or another record view.
+
+## Select records
+
+The Map block provides selection tools in the upper-left corner:
+
+- Location icon: exits selection mode and returns to normal viewing
+- Selection icon: enters selection mode and lets you draw a polygon area on the map
+- Confirm icon: confirms the current selection area and adds records inside it to the selected state
+
+Selected records are synced to the block resource and can be used by later block actions.

package/dist/ai/docs/nocobase/interface-builder/fields/field-settings/scan-input.md

@@ -0,0 +1,43 @@
+---
+title: "Scan Code Input"
+description: "Field settings: enable scan code input for text form fields, supporting writing field values through QR codes or barcodes."
+keywords: "scan code input,QR code,barcode,field settings,interface builder,NocoBase"
+---
+
+# Scan Code Input
+
+## Introduction
+
+Scan code input is used for text fields in editable forms. After it is enabled, a scan button appears on the right side of the field input. Users can scan a QR code or barcode, or select an image from the album for recognition, and write the recognized result into the current field.
+
+It is typically suitable for entering values such as device numbers, asset codes, order numbers, and tracking numbers that are inconvenient to type manually.
+
+## Supported Fields
+
+Scan code input is mainly used for text-based fields, such as:
+
+- Single line text
+- Mobile phone
+- Email
+- URL
+- UUID
+- Nano ID
+
+If the field is read-only, in reading mode, or does not support editable input itself, the scan code input configuration will not be shown.
+
+## Configuration
+
+Select the corresponding field in a form block, open the field configuration menu, and find `Scan Code Input Settings`.
+
+Options include:
+
+- `Enable scan code input`: after enabling, a scan button is shown on the right side of the input box
+- `Disable manual input`: after enabling, users can only write the field value by scanning and cannot edit the input box manually
+
+After `Enable scan code input` is turned off, `Disable manual input` also becomes inactive.
+
+## Usage
+
+After the user clicks the scan button on the right side of the field, they can use the camera to recognize a QR code or barcode. Browser-based scanning requires permission to access the camera. In mobile environments that support native scan capabilities, the native mobile scan capability is used first.
+
+If it is not convenient to use the camera directly, users can also click `Album` to select an image for recognition.

package/dist/ai/docs/nocobase/interface-builder/fields/field-settings/validation-rules.md

@@ -30,10 +30,14 @@ Most fields support the configuration of validation rules. After a field is conf
 ![20251028230554](https://static-docs.nocobase.com/20251028230554.png)
 
 
-### Frontend Validation in Field Configuration
+### Client-Side Validation Rules in Field Settings
 
 Validation rules set in the field configuration will trigger frontend validation to ensure user input complies with the regulations.
 
+If the corresponding collection field already has validation rules, those rules are shown in the validation settings under **Server-side field validation rules**. They are inherited from the data source field configuration and are read-only here. If you need to change them, edit the collection field in Data source → Collection configuration.
+
+Rules added under **Client-side validation rules** only apply to the current field component. They do not change the collection field configuration. When both groups exist, NocoBase applies the inherited field rules and client-side validation rules together.
+
 
 ![20251028230105](https://static-docs.nocobase.com/20251028230105.png)
 
@@ -45,4 +49,4 @@ Validation rules set in the field configuration will trigger frontend validation
 **Text fields** also support custom regex validation to meet specific format requirements.
 
 
-![20251028230903](https://static-docs.nocobase.com/20251028230903.png)
+![20251028230903](https://static-docs.nocobase.com/20251028230903.png)

package/dist/ai/docs/nocobase/interface-builder/index.md

@@ -16,12 +16,9 @@ Edit mode:
 ![20251023215951](https://static-docs.nocobase.com/20251023215951.png)
 
 
-## Layout Template
+## UI Layout
 
-NocoBase ships with a default layout template: navigation on the top and left, and a content area on the right.
-
-
-![未命名.002](https://static-docs.nocobase.com/未命名.002.jpeg)
+NocoBase provides desktop and mobile layouts. The desktop layout works well for standard administration and adapts its navigation and page content on phones. The mobile layout provides separate mobile navigation and page configuration. See [UI Layout](./ui-layout/index.md) for details.
 
 
 ## Configuration Options
@@ -55,4 +52,8 @@ Action configuration options:
 Table column configuration options:
 
 
-![20251023221814](https://static-docs.nocobase.com/20251023221814.png)
+![20251023221814](https://static-docs.nocobase.com/20251023221814.png)
+
+## Related links
+
+- [UI Layout](./ui-layout/index.md) — Learn about desktop and mobile layouts

package/dist/ai/docs/nocobase/interface-builder/ui-layout/desktop.md

@@ -0,0 +1,97 @@
+---
+title: "Desktop Layout"
+description: "Learn about the navigation structure, page building, route management, and narrow-screen responsive behavior of the NocoBase desktop layout."
+keywords: "desktop layout,UI layout,narrow-screen responsive,page building,route management,UI Editor,NocoBase"
+---
+
+# Desktop Layout
+
+In NocoBase, the **desktop layout** is the default application interface. It is designed for data management, form entry, business configuration, and everyday work on a computer, and can also be used on mobile devices.
+
+The desktop layout is available at `/admin` by default. If the application has its own access prefix, the actual URL automatically includes that prefix.
+
+![20260715224020](https://static-docs.nocobase.com/20260715224020.png)
+
+![20260715224603](https://static-docs.nocobase.com/20260715224603.png)
+
+## Build a page
+
+### Step 1: Open the desktop layout
+
+Visit `/admin` to open the desktop layout. After signing in, the application usually opens this layout directly.
+
+![20260715225049](https://static-docs.nocobase.com/20260715225049.png)
+
+### Step 2: Open UI Editor
+
+Click 「UI Editor」 in the upper-right corner of the page to enter UI building mode. Configuration entries then appear around menus, pages, blocks, fields, and actions.
+
+![20260715225155_rec_](https://static-docs.nocobase.com/20260715225155_rec_.gif)
+
+### Step 3: Create menus and pages
+
+You can add groups, pages, or links in the navigation area, and enable tabs for a page. After creating a page, open it and add the blocks you need.
+
+Page content is built in the same way as other interfaces: add [blocks](../blocks/index.md) first, then configure [fields](../fields/index.md) and [actions](../actions/index.md) for your business needs.
+
+![20260715225316_rec_](https://static-docs.nocobase.com/20260715225316_rec_.gif)
+
+### Step 4: Configure page content
+
+Add table, form, details, filter, or other blocks to the page, then adjust the fields, actions, and arrangement of the blocks. Each change is reflected directly on the current page.
+
+![20260715225424_rec_](https://static-docs.nocobase.com/20260715225424_rec_.gif)
+
+## Manage routes and menus
+
+When you add a page or link in the navigation area, it also appears in the [Route Manager](../../routes/index.md). Changes made in the Route Manager also update the menu.
+
+The desktop layout supports these common route types:
+
+- **Group** — Organizes multiple pages and links under the same navigation group.
+- **Page** — Opens a page where you can continue adding blocks.
+- **Link** — Opens an internal or external URL.
+- **Tab** — Organizes multiple content tabs within a page.
+
+In the Route Manager, you can add, edit, delete, show, or hide routes. It is often the more convenient place to reorganize the entire menu structure.
+
+![20260715225711_rec_](https://static-docs.nocobase.com/20260715225711_rec_.gif)
+
+## Responsive behavior on narrow screens
+
+The desktop layout can be used directly on a phone or in a narrow browser window. In narrow-screen mode, it still uses the same desktop routes and pages. It does not automatically switch to the mobile layout.
+
+### Layout changes
+
+The navigation menu collapses, and top actions move into a more compact entry. Page margins and spacing between blocks also shrink, while the content area adapts to the visible height of the mobile browser.
+
+UI Editor is not available on narrow screens. To change menus or pages, you need to return to a desktop browser and make the changes there.
+
+![20260715224603](https://static-docs.nocobase.com/20260715224603.png)
+
+### How page content adapts
+
+Common components also adjust their interactions for narrow screens, making them easier to use on a phone. For instance, multi-column blocks switch to a single column, tables allow horizontal scrolling for columns that extend beyond the screen, and pagination and action entries become more compact. Selection, date and time, filter, and subpage interactions also use forms that are easier to operate on a phone.
+
+:::tip Desktop responsiveness and the mobile layout
+
+If you only access the application from a phone occasionally, the responsive desktop layout is usually enough. If you need separate bottom navigation, mobile pages, and mobile workflows, build a [mobile layout](./mobile.md) as well.
+
+:::
+
+## Recommendations
+
+- Use the desktop layout by default for work performed mainly on a computer.
+- Finish building the page on a wide screen, then narrow the window to check its responsive behavior.
+- If a page contains many table columns or horizontal actions, keep only the necessary content to reduce the workload on smaller screens.
+- If the desktop and mobile workflows differ significantly, separate pages are usually clearer.
+
+## Related links
+
+- [UI layout overview](./index.md) — Compare desktop and mobile layout use cases
+- [Mobile layout](./mobile.md) — Build separate mobile navigation and pages
+- [Blocks](../blocks/index.md) — Add and configure blocks on a page
+- [Fields](../fields/index.md) — Configure fields in tables, forms, and details blocks
+- [Actions](../actions/index.md) — Configure actions on pages and blocks
+- [Route Manager](../../routes/index.md) — Manage desktop menus and routes in one place
+- [Permission configuration](../../users-permissions/acl/permissions.md) — Control which desktop routes each role can access

package/dist/ai/docs/nocobase/interface-builder/ui-layout/index.md

@@ -0,0 +1,50 @@
+---
+title: "UI Layout"
+description: "An overview of NocoBase UI layouts, including desktop and mobile layout features, use cases, and how their configurations relate."
+keywords: "UI layout,desktop layout,mobile layout,responsive layout,mobile pages,NocoBase"
+---
+
+# UI Layout
+
+NocoBase provides desktop and mobile layouts. Both layouts support UI building, so you can create pages and configure blocks, fields, and actions within them.
+
+The desktop layout is the default choice and works well for everyday administration and data processing on a computer. If you need dedicated navigation and pages for mobile devices, you can build a mobile layout as well.
+
+## Desktop layout
+
+The [desktop layout](./desktop.md) is available at `/admin` by default. It consists of top navigation, side navigation, and a page content area, making it suitable for common business scenarios such as managing tables, entering form data, and viewing records.
+
+The desktop layout also supports responsive behavior on narrow screens. When a page is displayed on a smaller screen, the navigation, spacing, and common components adjust to fit while continuing to use the existing desktop menus and pages.
+
+![20260715224020](https://static-docs.nocobase.com/20260715224020.png)
+
+## Mobile layout
+
+The [mobile layout](./mobile.md) is available at `/mobile` by default. It uses a bottom tab bar for primary navigation and provides separate mobile pages, links, and page tabs.
+
+The mobile layout works well for frequent phone-based tasks such as on-site data entry, mobile approvals, task processing, and data lookup. You can build and preview pages in a desktop browser, then use a QR code to check the result on a physical device.
+
+![20260715230725](https://static-docs.nocobase.com/20260715230725.png)
+
+## Which layout should I use?
+
+Use the desktop layout by default.
+
+| I want to... | Recommended layout |
+| --- | --- |
+| Work mainly on a computer and occasionally access pages from a phone | [Desktop layout](./desktop.md) |
+| Design separate navigation, pages, and workflows for phones | [Mobile layout](./mobile.md) |
+| Provide a complete experience for both computers and mobile devices | Build the desktop and mobile layouts separately |
+
+## How the configurations relate
+
+The desktop and mobile layouts use the same data sources and business data. You can use the same data table to build separate pages for different devices.
+
+Menus, routes, and page configurations are maintained separately. Changes to a desktop page do not automatically update its mobile counterpart, and changes to mobile navigation do not affect desktop navigation. [Route access permissions](../../users-permissions/acl/permissions.md) also need to be configured separately for each layout.
+
+## Related links
+
+- [Desktop layout](./desktop.md) — Build desktop pages and learn how they behave on narrow screens
+- [Mobile layout](./mobile.md) — Build separate mobile navigation and pages
+- [Route Manager](../../routes/index.md) — Manage desktop and mobile pages, links, and menus
+- [Permission configuration](../../users-permissions/acl/permissions.md) — Control which menus and pages each role can access