@pactor-app/skills 1.35.0 → 1.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pactor-app/skills",
-  "version": "1.35.0",
+  "version": "1.40.0",
   "description": "Agent skills for rapidly building pactor Server-Driven UI applications",
   "keywords": [
     "pactor",

package/pactor-dsl/SKILL.md

@@ -181,7 +181,33 @@ Facts that are NOT guessable and must be followed:
 
 - Top level is `{ dsl, page, state?, dataSources?, actions?, components?, lifecycle?, body? }` — `page` is a wrapper object, `dsl: '1.0'` is mandatory.
 - `Table` reads data via an **expression** (`dataSource: ${data.customers}`), not a source name; column templates use the `cell` key (not `render`) with `${row.x}` scope; pagination is `pagination: { pageSize: 5 }`.
-- Form fields bind via `props.name`; the submit button uses `submit: true` (not `htmlType`); `Form onSubmit` receives all values as `${event.<field>}`.
+- **Inside `Form`, every form control must be wrapped in a `Field`** (`Input`/`NumberInput`/`Select`/`Textarea`/`RadioGroup`/`Checkbox`/`Switch`/`Slider`/`DatePicker` …): label / required / description / error belong to `Field`, the control keeps only its own props (`name` / `placeholder` / `value` / `options` / `rules`). Search-bar buttons (查询/重置) also go inside a `Field` so they align with the inputs; **multiple buttons in one `Field` are placed side by side directly — adjacent buttons get spacing automatically (`[&>button+button]:ml-2`), no extra wrapper or margin needed** (use a `Flex` with `gap` inside the `Field` only when aligning mixed content, e.g. a right-aligned button row). Fields bind via `props.name`; the submit button uses `submit: true` (not `htmlType`); `Form onSubmit` receives all values as `${event.<field>}`.
+
+```yaml
+- type: Form
+  props: { layout: inline }
+  children:
+    - type: Field
+      props: { label: 关键词 }
+      children:
+        - type: Input
+          props: { name: keyword, placeholder: 输入关键词 }
+    - type: Field
+      props: { label: 状态 }
+      children:
+        - type: Select
+          props:
+            name: status
+            options:
+              - { label: 启用, value: enabled }
+              - { label: 停用, value: disabled }
+    - type: Field            # 查询/重置按钮同样放 Field 内，与输入框对齐
+      children:
+        - type: Button
+          props: { text: 查询, variant: primary, submit: true }
+        - type: Button
+          props: { text: 重置 }
+```
 - `navigate` takes `to`; `message` takes `text` + `messageType` (a `type` key in action `params` disables expression evaluation).
 - Query linkage = `onSubmit: [setState, reload]`; the data source's `params` referencing `${state.x}` pick up new values on reload.
 
@@ -357,6 +383,7 @@ pnpm pactor create my-app
 - **Do not** rely on frontend permission checks for security; enforce authorization on backend APIs.
 - **Do not** forget to import `@pactor-app/ui/styles.css` when using the default shadcn kit (`@pactor-app/chat/styles.css` additionally for chat surfaces).
 - **Do not** put a `type` key in action `params` (see the events workflow pitfall).
+- **Do not** place bare form controls directly under `Form`; wrap every control (including search-bar buttons) in a `Field`.
 - **Do not** expect DslNode slots (sidebar / toolbar / inspector / …) to render outside a page runtime; in pure React hosts pass ReactNode instead.
 
 ## References (bundled — works from npm install)

package/pactor-dsl/references/dsl-authoring.md

@@ -178,7 +178,9 @@ Event payloads (`${event}`):
 | Button `onClick` | none |
 | Input / Select / Switch `onChange` | the new value (`${event}`) |
 | Tabs `onChange` | new active key |
-| Table `onChange` | `{ current, pageSize, total }` |
+| Table `onChange` | `{ current, pageSize, total, field?, order? }` |
+| Table `onSelectChange` | selected row keys array (`rowSelection: true`) |
+| Table `onRowDrop` | `{ dragKey, dropKey, position: 'before' \| 'after' }` (`rowDraggable: true`) |
 | Form `onSubmit` | all values (`${event.name}`) |
 | Form `onValuesChange` | ONLY the changed field `{ <field>: newValue }` |
 
@@ -198,6 +200,7 @@ Action catalog:
 | `call` | `name` | run a top-level named action, inherits caller scope |
 | `delay` | `ms` | wait |
 | `form.setValues` | `values` (req), `form?` (default `default`) | write field values; does NOT trigger validation or onValuesChange |
+| `form.submit` | `form?` (default `default`) | trigger the form's native submit — runs validation and `onSubmit`; for submit buttons outside the `<form>` DOM (e.g. Drawer `footer` slot) |
 | `overlay.open` / `overlay.close` | see below | open overlay and await close; close `payload` becomes open's result |
 
 `overlay.open` params: `{ overlay: { type: modal|drawer, title?, width?, content: <DslNode> | page: { pageId }, params? } }`. Overlay content evaluates in overlay scope: `${params.x}` = injected params, `${parent.x}` = parent page snapshot, `${state}`/`${data}` still live.
@@ -249,17 +252,24 @@ body:
               - action: reload
                 params: { dataSource: customers }
           children:
-            - type: Input
-              props: { name: keyword, label: Keyword, placeholder: Name / owner }
-            - type: Select
-              props:
-                name: status
-                label: Status
-                options:
-                  - { label: Enabled, value: active }
-                  - { label: Disabled, value: inactive }
-            - type: Button
-              props: { text: Search, variant: primary, submit: true }   # submit: true, NOT htmlType
+            - type: Field                      # Form 内控件必须放 Field 内（label 归 Field）
+              props: { label: Keyword }
+              children:
+                - type: Input
+                  props: { name: keyword, placeholder: Name / owner }
+            - type: Field
+              props: { label: Status }
+              children:
+                - type: Select
+                  props:
+                    name: status
+                    options:
+                      - { label: Enabled, value: active }
+                      - { label: Disabled, value: inactive }
+            - type: Field                      # 查询按钮也放 Field 内，与输入框对齐
+              children:
+                - type: Button
+                  props: { text: Search, variant: primary, submit: true }   # submit: true, NOT htmlType
     - type: Card
       props: { title: Customer Data }
       children:
@@ -315,15 +325,19 @@ events:
                       - action: message
                         params: { messageType: error, text: Save failed, please retry }
             children:
-              - type: Input
-                props:
-                  name: name
-                  label: Name
-                  value: ${params.name}    # field-level initial value (row data backfill)
-                  rules:
-                    - { required: true, message: Please enter a name }
-              - type: Button
-                props: { text: Save, variant: primary, submit: true }
+              - type: Field
+                props: { label: Name, required: true }
+                children:
+                  - type: Input
+                    props:
+                      name: name
+                      value: ${params.name}    # field-level initial value (row data backfill)
+                      rules:
+                        - { required: true, message: Please enter a name }
+              - type: Field
+                children:
+                  - type: Button
+                    props: { text: Save, variant: primary, submit: true }
     - action: if                           # runs after the drawer closes; cancel (X / mask / Esc) skips
       params:
         condition: ${actions.editResult.success}
@@ -334,6 +348,60 @@ events:
             params: { messageType: success, text: Customer updated }
 ```
 
+### 8.2.1 Controlled overlay nodes (state + `open` expression)
+
+Alternative to `overlay.open`: declare `Drawer` / `Dialog` / `AlertDialog` as ordinary DSL nodes with `open: ${state.x}` and drive them with `setState`. Use this when the overlay is a fixed part of the page tree (templates, statically known content). Key wiring:
+
+```yaml
+state: { drawerOpen: false }
+body:
+  type: Page
+  children:
+    - type: Button                            # open
+      props: { text: 新建, variant: primary }
+      events:
+        onClick:
+          - action: setState
+            params: { drawerOpen: true }
+    - type: Drawer
+      props:
+        title: 编辑
+        open: "${state.drawerOpen}"
+        style: { width: 480, maxWidth: 'none' }
+        okText: 保存                          # 默认 footer [取消, 保存]
+      events:
+        onClose:                              # 关闭图标 / mask / Esc / 默认「取消」
+          - action: setState
+            params: { drawerOpen: false }
+        onOk:                                 # 默认「保存」→ form.submit 桥接校验 + onSubmit
+          - action: form.submit
+      children:
+        - type: Form
+          events:
+            onSubmit:
+              - action: message
+                params: { messageType: success, text: 保存成功 }
+              - action: setState
+                params: { drawerOpen: false }
+          children:
+            - type: Field
+              props: { label: 名称, required: true }
+              children:
+                - type: Input
+                  props:
+                    name: name
+                    rules:
+                      - { required: true, message: 请输入名称 }
+```
+
+Rules of thumb:
+
+- `Drawer` 默认带右上角关闭图标（`closable: false` 关闭）与默认 footer（[取消 → onClose, 确定 → onOk]，右对齐、固定底部）；关闭链路在未 wiring `onClose` 时也会默认自闭合，wiring `onClose` 回写 state 是推荐做法。
+- 表单抽屉优先用 `okText` + `events.onOk: form.submit`（最简）；需要非按钮组布局时才给 `footer` 传 DslNode 或 `false`。
+- A `submit: true` button only submits the enclosing `<form>`; from the `footer` slot (outside the `<form>` DOM) use the `form.submit` action instead — it runs the same validation + `onSubmit` chain.
+- `AlertDialog` in controlled mode never self-closes: wire BOTH `events.onConfirm` and `events.onCancel` to `setState x=false`.
+- `${form.x}` is written to state only on successful submit; for per-step data in a wizard, submit at each step (or read Form values only after submit).
+
 ### 8.3 Server-side pagination
 
 Table's own `pagination` paginates the data already bound to it (client-side). For a server-paginated API, turn it off and pair the table with a standalone `Pagination` component driving state + reload:
@@ -372,6 +440,28 @@ dataSources:
 
 Table also supports `rowKey` (row key field, default `'id'`); Table `onChange` (`{ current, pageSize, total }`) exists for its built-in client-side pager.
 
+### 8.3.1 Table extras: tree data, row drag, sticky header
+
+```yaml
+- type: Table
+  props:
+    dataSource: ${data.menus}            # rows containing a `children` array render as a tree table automatically
+    childrenColumnName: children         # default; set another field name, or false to disable tree mode
+    indentSize: 16                       # px per tree level (default 16); expand toggles render in the first column
+    defaultExpandAllRows: true           # start fully expanded (default: all collapsed, toggle via the row arrow)
+    rowDraggable: true                   # grip handle column; drag to reorder within the same parent level
+    scrollY: 400                         # px; body scrolls vertically with the header stuck on top
+  events:
+    onRowDrop:                           # reorder already applied internally; use this to persist
+      - action: request
+        params:
+          url: /api/menus/reorder
+          method: POST
+          body: ${event}                 # { dragKey, dropKey, position }
+```
+
+Tree tables sort recursively per level and paginate by top-level rows. Sortable columns (`sorter: true`), `rowSelection`, fixed columns (`fixed: right` on the action column) all compose with the above.
+
 ### 8.4 Confirm then act
 
 ```yaml
@@ -396,23 +486,67 @@ events:
 state:
   cityMap: { Zhejiang: [{ label: Hangzhou, value: Hangzhou }], Jiangsu: [{ label: Nanjing, value: Nanjing }] }
   cityOptions: []
-# fields:
-- type: Select
-  props: { name: region, label: Province, options: [{ label: Zhejiang, value: Zhejiang }, { label: Jiangsu, value: Jiangsu }] }
-  events:
-    onChange:
-      - action: form.setValues             # clear the child field first
-        params: { values: { city: '' } }   # add `form: edit` when targeting a named form
-      - action: setState                   # then update child options (computed member access)
-        params: { cityOptions: ${state.cityMap[event]} }
-- type: Select
-  props:
-    name: city
-    label: City
-    options: ${state.cityOptions}
-    disabled: ${state.cityOptions.length === 0}
+# fields (each control wrapped in Field, as required inside Form):
+- type: Field
+  props: { label: Province }
+  children:
+    - type: Select
+      props: { name: region, options: [{ label: Zhejiang, value: Zhejiang }, { label: Jiangsu, value: Jiangsu }] }
+      events:
+        onChange:
+          - action: form.setValues             # clear the child field first
+            params: { values: { city: '' } }   # add `form: edit` when targeting a named form
+          - action: setState                   # then update child options (computed member access)
+            params: { cityOptions: ${state.cityMap[event]} }
+- type: Field
+  props: { label: City }
+  children:
+    - type: Select
+      props:
+        name: city
+        options: ${state.cityOptions}
+        disabled: ${state.cityOptions.length === 0}
 ```
 
+### 8.6 Card list page (CardList / EntityCard business components)
+
+`CardList` renders a grid of `EntityCard` summary cards in one node — no `For` + nested `Flex`/`Text`/`Tag` scaffolding. Item fields mirror `EntityCard` props; extra business fields ride along and come back in event payloads.
+
+```yaml
+state:
+  plugins:
+    - id: 1
+      icon: users                      # Icon whitelist name (or `logo` image URL)
+      title: 用户管理
+      subtitle: v0.1.0                 # auxiliary line under the title
+      description: 管理插件安装状态与运行生命周期，支持启停与依赖检查。
+      tags: [{ text: 已安装, color: success }]   # Tag colors: default/success/warning/error/info
+      actions: [{ text: 停用 }]        # footer buttons, right-aligned, muted bar
+body:
+  - type: CardList
+    props:
+      items: ${state.plugins}
+      columns: 3                       # grid columns, default 3; 1 = single wide rows
+      gap: 16                          # default 16
+      showCount: true                  # footer "共 N 个" count line
+      # createText: 新建插件           # dashed "create" placeholder card in the first cell
+      # hoverable: true                # whole-card pointer + hover highlight
+    events:
+      onCreateClick: { action: message, params: { messageType: info, text: open create dialog } }
+      onItemClick: { action: message, params: { messageType: info, text: "进入详情：${event.item.title}" } }
+      onItemAction:                    # ${event} = { key, text, item, index }
+        - action: confirm
+          id: opConfirm
+          params: { title: "确认${event.text}「${event.item.title}」？" }
+        - action: if
+          params:
+            condition: ${actions.opConfirm}
+            then: [{ action: message, params: { messageType: success, text: done } }]
+```
+
+- `EntityCard` standalone: `icon`/`logo`, `title`, `subtitle`, `tags[]`, `description` (two-line clamp), `meta` (right side of the middle row), `actions[]` (`{ text, key?, variant?, danger? }`), `footerBackground` (muted footer bar, default `true`), `hoverable`. Events `onClick` (whole card) and `onAction` (`{ key, text, index }`) — footer button clicks never trigger the card click.
+- Empty `items` renders an `Empty` state (`emptyText` overrides the default).
+
 ## 9. Common mistakes (observed — do not do these)
 
 | Wrong | Right |
@@ -423,6 +557,10 @@ state:
 | Column template key `render` | `cell` |
 | `pagination: true` | `pagination: { pageSize: 10 }` |
 | `htmlType: submit` | `submit: true` |
+| Bare `Input`/`Select`/`Button` directly under `Form` | Wrap every form control (incl. search-bar buttons) in `Field`; label / required / description / error belong to `Field` |
+| Relying on `Field required: true` for validation | It is a visual `*` marker only — declare `rules: [{ required: true, message: ... }]` on the CONTROL (`Input`/`Select`/…); Form validates control rules on submit |
+| `style` / `className` as node-level keys (sibling of `props:`) | They are component props — always nest them inside `props: { className: ..., style: ... }`; node-level keys are silently ignored |
+| `children` nested inside `props:` | `children` is a NODE-level key (sibling of `props:`); nested under `props:` it is silently dropped |
 | `navigate` param `path` / `url` | `to` |
 | `message` param `type: success` | `messageType: success` — a `type` (or `action`) key inside action `params` makes the engine treat params as a nested DSL/action config and SKIP expression evaluation |
 | Reading full form values in `onValuesChange` | It only carries the changed field; use `onSubmit` or `${form.x}` |

package/pactor-prd/SKILL.md

@@ -2,7 +2,7 @@
 name: pactor-prd
 description: |
   Use when PRD or markdown wireframes drive Pactor YAML pages (skill id pactor-prd). Greenfield: copy template/ into a new repo. Incremental: in an existing Pactor project, add or update pages from new/changed wireframe files (DSL, sitemap, menus, data API, styles). Triggers: pactor-prd, prd-to-app, 线框图增量, 已有项目加页面, PRD 更新页面.
-version: 1.4.0
+version: 1.5.0
 ---
 
 # PRD → YAML 页面应用生成
@@ -17,6 +17,7 @@ version: 1.4.0
 ## 输入要求
 
 - PRD/线框图：总览 README（模块 × 页面 × 优先级）+ 分页线框 markdown（ASCII + 区域 + 交互）
+- **接口文档/说明（可选）**：API 路径、方法、参数、返回结构；存在时页面 dataSources 直接对接文档接口，不再走 `/api/d/...` 约定
 - **增量**：可只提供 **变更的线框图文件** 列表（或 PRD 目录 + 标明 diff 范围）
 - 原产品代码仓（可选）：抽设计令牌、自定义 CSS、交互
 - 目标：空目录（新建工程）或已有工程根目录（增量）
@@ -25,7 +26,7 @@ version: 1.4.0
 
 ## 红线（必须遵守）
 
-1. **dataSources 一律 `type: http`**，指向 `/api/d/...`，不写 `type: service`，便于后续替换真实接口
+1. **dataSources 一律 `type: http`，不写 `type: service`**；**PRD 含接口文档/说明时，url 取文档中的接口地址**（方法、路径、返回形状对齐，见「1. 输入解析」）；无接口文档时指向 `/api/d/...`（转发层空数据回退，后续按 `references/data-api.md` 接真实接口）
 2. **布局与间距以样板页为准**：新建工程时以 `template/` 同类页为准；**增量时以目标工程内同模块/同类型页**为准。线框图只提取结构与功能，不逐像素还原 ASCII
 3. **样式与原产品一致**：主题令牌（含深浅色）、自定义 CSS、换肤入口全部移植对齐，见 `references/theme-and-style.md`
 4. **功能与原产品一致**：线框图描述的筛选/搜索/跳转/弹窗/提交等交互必须经 events/actions 闭环可用，禁止只画静态骨架；错误分支（校验失败提示等）也要实现
@@ -48,6 +49,7 @@ version: 1.4.0
 
 - 读 README / 变更线框图：模块树、页面 id（kebab-case）、path、菜单、P0/P1/P2
 - 逐页读线框：页面类型、区域、字段、交互
+- **接口文档解析**：PRD 含接口文档/说明时，提取「资源 → 路径 / 方法 / 返回形状」接口清单，页面 dataSources 以该清单为准；无接口文档则按 `references/data-api.md` 命名约定写 `/api/d/...`
 - **新建工程**：输出全量 **页面清单表**（`references/page-inventory-and-files.md`）
 - **增量**：扫描工程现状清单 + 输出 **delta 表**（add / update / deprecate，`references/incremental-wireframe-delta.md`）；P2 不建文件
 
@@ -72,7 +74,7 @@ version: 1.4.0
 - 校验见 `page-inventory-and-files.md`（全量）或 `incremental-wireframe-delta.md`（增量）
 - 按 `references/component-mapping.md` 映射组件；按 `references/page-templates.md` 选列表/详情/表单模板（**数据列表页直接复制 `yaml/models/data-list.yaml` 替换占位符**）；表单一律 `Form` 包裹
 - 同步更新 `sitemap.yaml` 的 `pages` + `menus`（hidden 详情/编辑带 `activeMenu`）
-- 每页 dataSources 全部 `type: http`，url 按 `references/data-api.md` 命名约定直接写最终接口路径（无后端时转发层返回空数据，无需 mock）；交互 events + actions 闭环
+- 每页 dataSources 全部 `type: http`：**有接口文档 → url 取文档接口地址**；无 → 按 `references/data-api.md` 命名约定写 `/api/d/...`（转发层空数据回退，无需 mock）；交互 events + actions 闭环
 
 ### 4. 样式移植
 

package/pactor-prd/references/component-mapping.md

@@ -13,7 +13,7 @@
 | 下拉筛选（操作人等枚举） | `Select` | `options` 可绑 `${data.xxx}`（接口下发选项，单段路径） |
 | 日期范围筛选 | `DatePicker` | range 模式绑 state，onChange reload |
 | 数据表格 | `Table` | `columns` + `dataSource: ${data.x.items}`；操作列按钮统一 `Button variant: link`；「编辑」与「新建」共用同一表单，仅以预填数据区分（initialValues / form.setValues） |
-| 卡片网格（约 3-4 列） | `Grid` + `Card` | `columns: 3, gap: 16`；「添加卡」用 `Card` 虚线边框自定义样式 |
+| 卡片网格（约 3-4 列） | `CardList`（业务组件） | 数据项直接携带 `icon`/`title`/`subtitle`/`tags`/`description`/`meta`/`actions` 字段；`columns`、`createText`（首格虚线新建卡）、`showCount`、事件 `onItemClick`/`onItemAction`/`onCreateClick`（`${event}` 含 item/index/key）；单卡即 `EntityCard`，无需 `For`+`Card` 手写三层结构 |
 | 状态徽标（启用/停用/告警） | `Badge` / `StatusBadge` | 颜色语义化，状态文案取自线框图 |
 | 启停开关图标（⏻） | `StatusToggleIcon` | 卡片/行内启停，onChange 闭环动作 + reload |
 | 权限控制显隐（无权限隐藏新建卡等） | 表达式 `hidden` / `if` 动作 | 绑 `${data.session.permissions}` 等，按会话裁剪 |

package/pactor-prd/references/data-api.md

@@ -1,4 +1,6 @@
-# 数据接口层（纯转发 + 空数据约定）
+# 数据接口层（接口文档优先 + 纯转发空数据约定）
+
+**接口文档驱动（优先）**：PRD/产品文档含接口文档或接口说明时，页面 dataSources 的 url 直接取文档中的接口地址——方法、参数、返回形状均以文档为准，不再使用下述 `/api/d/...` 命名约定。同源相对路径直接写；跨域绝对地址写完整 URL（`type: http` 原生支持）。转发层与命名约定仅在**无接口文档**时兜底。
 
 页面 DSL 的 http 数据源统一入口：`app/api/d/[...parts]/route.ts`（**纯转发层，不含任何路径映射**）。**路径即契约**：DSL 中的 url（如 `/api/d/providers`）就是服务端接口路径；转发层按相同路径、方法、查询与请求体原样转发到 `$NEXT_PUBLIC_API_BASE_URL/api/d/<parts>`（携带会话 cookie，匿名 401）。
 
@@ -25,7 +27,7 @@
 
 ## 对页面 yaml 的要求
 
-- dataSources 一律 `type: http`，url 按命名约定直接写最终接口路径
+- dataSources 一律 `type: http`；有接口文档时 url 取文档接口地址（方法/返回形状对齐），否则按命名约定写 `/api/d/...` 最终路径
 - 列表接口返回形状约定 `{ items, total, filters? }`；详情接口对空 id 返回空对象而非 404（新建预填链路依赖）
 - 选项类接口（如下拉的操作人列表）用单段路径，页面 `options: ${data.xxx}` 绑定
 - 写操作走 `ops/` 前缀 POST，页面提交闭环（request → message → reload）不依赖返回体内容

package/pactor-prd/template/src/pactor/components/index.ts

@@ -3,9 +3,8 @@
 /**
  * 页面 DSL 引用的自定义组件注册表（页面级自定义组件
  * `components={{...}}`），经 SitemapApp 的 `components` prop 全局注册。
+ * ChipFilter / ChipNode 快筛组件已内置在 @pactor-app/ui，无需在此注册。
  */
-import { ChipNode } from "./chip-node";
-import { ChipFilter } from "./chip-filter";
 import { StatusBadge } from "./status-badge";
 import { LogStatus } from "./log-status";
 import { DebugChat } from "./debug-chat";
@@ -13,8 +12,6 @@ import { CardLink, StatusToggleIcon, TextLink } from "./card-links";
 import { ThemeSwitcher } from "./theme-switcher";
 
 export const pactorComponents: Record<string, unknown> = {
-  ChipNode,
-  ChipFilter,
   StatusBadge,
   LogStatus,
   DebugChat,

package/pactor-prd/template/src/pactor/components/chip-filter.tsx

@@ -1,89 +0,0 @@
-"use client";
-
-/**
- * 快筛 Chip 组（列表页共享的自定义组件）：Chip 列表整体作为单一组件，
- * 选项（value / 文案 / 计数 / 色点）由接口返回，页面 DSL 不再逐枚硬编码 ChipNode。
- * 选项文案含计数，由接口侧预计算（表达式引擎不支持数组方法与函数调用）。
- *
- * 兼容各列表页的两种交互（Provider / Model / Route / Client / ClientTemplate）：
- * - mode="single"：单选，value 为字符串。点击已选项回到 allValue（默认 'all'），
- *   与「状态 / 类型」单选快筛的 toggle 语义一致；
- * - mode="multi"：多选，value 为已选值数组。选项中含 value === allValue 的
- *   「全部」项时，点击它清空选择、仅在无选择时高亮（标签 / 厂商快筛语义）；
- *   不含「全部」项时纯切换、不选即全部（Provider 类型快筛语义）。
- *
- * DSL 用法（${event} = 新值，single 为字符串 / multi 为数组）：
- *   {
- *     type: "ChipFilter",
- *     props: {
- *       mode: single,
- *       value: "${state.statusChip}",
- *       items: "${data.providers.filters.status}",
- *     },
- *     events: { onChange: [setState, reload] },
- *   }
- */
-import { ChipNode } from "./chip-node";
-
-export interface ChipFilterItem {
-  /** 提交值（'all' 为约定的「全部」项，可用 allValue 改写） */
-  value: string;
-  /** 展示文案（含计数，接口预计算） */
-  text: string;
-  /** 可选状态色点 */
-  dot?: string;
-}
-
-export function ChipFilter({
-  items,
-  mode = "single",
-  value,
-  allValue = "all",
-  onChange,
-}: {
-  items?: ChipFilterItem[];
-  mode?: "single" | "multi";
-  value?: string | string[];
-  allValue?: string;
-  onChange?: (value: string | string[]) => void;
-}) {
-  if (!Array.isArray(items)) return null;
-  const selectedValues = Array.isArray(value) ? value : [];
-  return (
-    <>
-      {items.map((item) => {
-        const selected =
-          mode === "multi"
-            ? item.value === allValue
-              ? selectedValues.length === 0
-              : selectedValues.includes(item.value)
-            : (value ?? allValue) === item.value;
-        return (
-          <ChipNode
-            key={item.value}
-            text={item.text}
-            dot={item.dot}
-            selected={selected}
-            onClick={() => {
-              if (mode === "multi") {
-                if (item.value === allValue) {
-                  onChange?.([]);
-                } else {
-                  onChange?.(
-                    selected
-                      ? selectedValues.filter((v) => v !== item.value)
-                      : [...selectedValues, item.value],
-                  );
-                }
-              } else {
-                onChange?.(
-                  selected && item.value !== allValue ? allValue : item.value,
-                );
-              }
-            }}
-          />
-        );
-      })}
-    </>
-  );
-}

package/pactor-prd/template/src/pactor/components/chip-node.tsx

@@ -1,46 +0,0 @@
-"use client";
-
-/**
- * 快筛 Chip（Provider / Model / Route 列表页共享的自定义组件）。
- * 未选中 = outline 小按钮（border-border，hover 走 accent）；
- * 选中 = 主色实底 + 主色前景文字（一眼可辨的激活态）。
- * text / selected 由运行时对 props 模板求值后传入（selected 接收布尔表达式结果）；
- * dot 为可选状态色点（Provider 状态快筛使用）；
- * 点击动作由 DSL 节点 events.onClick 注入（运行时执行为回调，语义同 Button onClick）。
- *
- * DSL 用法：
- *   {
- *     type: "ChipNode",
- *     props: {
- *       text: "全部 ${counts.all.enabled}/${counts.all.total}",
- *       selected: "${state.statusChip == 'all'}",
- *     },
- *     events: { onClick: [setState / reload ...] },
- *   }
- */
-export function ChipNode({
-  text,
-  selected,
-  dot,
-  onClick,
-}: {
-  text?: string;
-  selected?: boolean;
-  dot?: string;
-  onClick?: () => void;
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={`inline-flex h-8 shrink-0 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-xl border px-3 text-xs font-medium outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 ${
-        selected
-          ? "border-primary bg-primary text-primary-foreground shadow-sm"
-          : "border-border bg-card hover:bg-accent hover:text-accent-foreground"
-      }`}
-    >
-      {dot ? <span style={{ color: dot, fontSize: 10 }}>●</span> : null}
-      {text}
-    </button>
-  );
-}