create-yss-spec 2.1.8 → 2.1.10

package/template/.claude/skills/yss-components/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: "yss-components"
-description: Use when YSS UI 组件开发规范与最佳实践。涉及页面布局、YTable、YssFormily、YTree、Header 区块、空态与弹窗等页面搭建场景时必须使用。
+description: Use when YSS Vue 页面涉及布局、YTable、YEditTable、YFormily、YTree、ConditionBuilder、空态、弹窗或业务组件选型。
 ---
 
 # YSS 页面组件开发标准
@@ -9,11 +9,32 @@ description: Use when YSS UI 组件开发规范与最佳实践。涉及页面布
 
 ## 0. 权威资料与边界
 
-- YSS UI 组件文档：`http://192.168.164.27:3200/components`
+- YSS UI 组件文档：`http://192.168.164.27:3200/components`（组件契约以该手册为准；本技能依据 2026-08-18 可见内容整理）
 - 本地引用索引：`references/frontend-docs.md`
 
 本技能只负责页面组件、布局和交互呈现规范。请求、分页参数、接口映射交给 `yss-hook` 或 `api-integration`；完整页面生成流程交给 `yss-page-module-development`；表格/树高度细节交给 `yss-use-table-height` 或 `yss-use-tree-height`。
 
+组件文档与当前项目的已验证用法冲突时，先检查当前项目代码和依赖版本，再决定是否迁移；不得把上游 Ant Design Vue、vxe-table、Univer 或 Monaco 的未验证 API 当作 YSS 顶层契约。
+
+## 0.1 组件选型速查
+
+| 场景 | 首选组件 | 关键边界 |
+| --- | --- | --- |
+| 常规动作、权限控制、操作下拉 | `YButton`、`AuthorityDropdown` | 用 `permissionCode` + `fallback` 控制隐藏/禁用；按需导入下拉必须使用 `AuthorityDropdown`，不使用仅全量注册的 `YDropdown` 别名。 |
+| 信息分组、统计卡片 | `YCard` | 组件不处理卡片布局；使用 CSS Grid/Flex 排版，`padding` 与 `bodyStyle.padding` 同时提供时以后者为准。 |
+| 左树右表、上下内容区 | `YSplitPane` | 轻内容使用默认实时拖拽；树、宽表、编辑器、图表等重内容使用 `resize-mode="deferred"` + `collapse-animation="transform"`。 |
+| 树、目录、资源导航 | `YTree` | 受控选择使用 `v-model:selected-keys`；大量节点必须给 `height`，再按需设置 `virtual`，不能只靠 CSS 高度。 |
+| 查询、编辑、详情表单 | `YFormily` | 新代码使用公开导出 `YFormily`；`YssFormily` 仅为历史兼容名。查询动作、展开状态和跨字段联动都以 schema / `scope` / `x-reactions` 表达。 |
+| 常规展示、选择、分页、筛选、操作列 | `YTable` | 远程分页和远程筛选由 Hook 管理；多选必须声明业务 `row-config.keyField`，不能依赖内部 `_X_ROW_KEY`。 |
+| 行内编辑、单元格校验、拖拽排序 | `YEditTable` | 只在确有编辑闭环时使用；保存前调用 `validate()`，以 `v-model:data` 与公开 `updateRow` 事件接回受控数据。 |
+| 嵌套 AND/OR、字段-操作符-值联动 | `YConditionBuilder` | 保存和请求映射在 Hook；组件只维护 `ConditionGroup`。复杂筛选不是把字段硬编码回普通 `YFormily` 模板。 |
+| 月视图、排班、日程状态 | `YMonthCalendar` | 是单日期选择与展示月份的独立状态，不是日期范围输入器；范围查询继续在 `YFormily` 的日期字段完成。 |
+| SQL / JSON / 配置编辑、日志阅读 | `YMonaco` / `YMonacoDiff` | 容器变更后必要时调用 `layout()`；日志追加使用 `appendContent()`，不反复 `setValue()`。 |
+| Cron 配置 | `YCron` | 输出为七段 `秒 分 时 天 月 周 年`；只使用其 `v-model`、`disabled`、`show-second`、`show-year` 公开契约。 |
+| 类 Excel 协作编辑 | `YSheet` | 必须给明确高度；只通过 Facade API 更新工作簿，卸载后释放实例；评估 Univer/React/RxJS 的包体影响。 |
+| 两步文件导入与失败结果下载 | `YFileImport` | 默认阻止 Upload 自动上传；在 `nextStep` / `finalImport` 事件中由业务实现校验、上传和结果回显。 |
+| 图表 | `YssEcharts` | 先阅读当前版本组件页面与项目现有图表实践，再确定 option、数据更新和容器尺寸方案。 |
+
 ## 1. 触发场景
 
 当需求涉及以下任一内容时，优先按本技能执行：
@@ -21,7 +42,7 @@ description: Use when YSS UI 组件开发规范与最佳实践。涉及页面布
 - 新建页面或重构页面结构
 - 左树右表、左右分栏、主从布局
 - YTable 列渲染、分页、空态
-- YssFormily 查询区与 schema 配置
+- YFormily（或历史代码中的 YssFormily）查询区与 schema 配置
 - 页面级弹窗、详情抽屉、Header 信息区
 
 ## 2. 页面目录规范
@@ -49,9 +70,9 @@ views/PageName/
 - `index.vue` 仅编排页面，不承载复杂数据转换
 - `components/` 放展示型或区块型组件
 - `hooks/` 放页面业务逻辑 Hook
-- `schemas/` 放 YssFormily 元数据定义
+- `schemas/` 放 YFormily 元数据定义
 
-## 3. 页面骨架规范
+## 3. 页面骨架规范（YSplitPane + YTree）
 
 页面容器使用 `YSplitPane`，并提供宽度边界与 `storage-key`。
 
@@ -81,13 +102,17 @@ views/PageName/
 - 左侧区域承载目录、筛选树、统计导航
 - 右侧区域按顺序组织 Header、查询区、数据区
 - 右侧无选中对象时必须提供明确空态
+- 尺寸需要受控时使用 `v-model:left-width`（纵向使用 `v-model:top-height`）；`storage-key` 仅保存用户尺寸，不替代页面状态。
+- 左树使用业务主键配置 `field-names`，选中状态使用 `v-model:selected-keys`。树数据量大时传入明确 `height`，必要时启用虚拟滚动；搜索区通过 `#search`、`#header-left`、`#header-right` 扩展，不复制内置搜索逻辑。
+- 节点“更多”操作使用 `get-node-actions` 和 `@action`；默认点击更多会选中该节点，若不应改变主内容选择，显式设置 `:select-on-action-click="false"`。
+- 折叠树时默认保留内容状态（`destroy-on-collapse=false`）。只有确需释放重 DOM、且允许丢失树展开/勾选/滚动状态时才设为 `true`。
 
-## 4. 查询区规范（YssFormily）
+## 4. 查询区规范（YFormily）
 
 查询表单必须采用 schema 驱动，页面中只负责绑定 `schema`、`scope`、初始值与插槽。
 
 ```vue
-<YssFormily
+<YFormily
   ref="formRef"
   :schema="searchSchema"
   :model-value="initialValues"
@@ -99,7 +124,7 @@ views/PageName/
       <a-input v-model:value="searchVal" />
     </a-input-group>
   </template>
-</YssFormily>
+</YFormily>
 ```
 
 schema 约束：
@@ -107,6 +132,10 @@ schema 约束：
 - 使用 `FormLayout + FormGrid + FormItem` 组织字段
 - 按钮区使用 `AutoButtonGroup + Submit`
 - 行为通过 `onSubmit: '{{ handleQuery }}'` 等 scope 方法绑定
+- 新页面统一使用 `YFormily`；`YssFormily` 不作为新代码的组件名或类型来源。
+- 查询表单需要折叠时启用 `collapsible`，并用 `v-model:expanded` 管理外部状态。使用 `#actions` 自定义操作区后，组件会把折叠入口置于其左侧；不要再手写第二套展开逻辑。
+- 字段显隐、禁用、数据源联动使用 `x-reactions`；单字段输入优先监听底层组件的 `onUpdate:value`，选择/失焦事件以 Ant Design Vue 对应事件为准。复杂异步、副作用和跨页面可复用逻辑下沉到 Hook。
+- 详情页使用 `mode="2"`，字段插槽固定为 `#detail-<path>`（路径中的 `.` 替换为 `-`）；不要为只读页另建一套模板。
 
 ## 5. 数据区规范（YTable）
 
@@ -133,6 +162,22 @@ schema 约束：
 - 先固定序号列，再拼接动态列
 - 列字段名与接口字段保持一致
 - 长文本列优先 `showOverflow` 或省略显示
+- 按业务主键设置 `:row-config="{ keyField: 'id', useKey: true }"`；涉及刷新、树表、勾选或批量操作时这是必需项。
+- 分页数据来自服务端时在 `pagination` 中明确 `remote: true`，由 Hook 响应 `page-change` / `size-change` 后刷新数据和 `total`；不得让组件在远程数据上再次切片。
+- 远程列筛选监听 `filter-change`，列上提供稳定的 `filters`，并设置 `filterMethod: () => true` 禁用 vxe-table 本地过滤；本地筛选才编写真实 `filterMethod`。
+- 多选首列为 `type: 'checkbox'`，用 `v-model:selected-row-keys` 或 `v-model:selected-rows` 受控。批量动作放在 `#toolbar-right`，成功后重置选中键或调用 `clearSelection()`。
+- 插槽统一使用 kebab-case：`#<field>-header`、`#<field>-filter`、`#expand-row`、`#group-header`、`#toolbar-left`、`#toolbar-right`。不要把 camelCase 旧兼容写法用于新模板。
+- 最后一列宽度必须精确控制时设置 `:auto-flex-column="false"`；默认自动填满余宽。数据量达到组件阈值时让默认 `virtualXConfig` / `virtualYConfig` 生效，避免手动拼接分页假象。
+
+### 5.1 可编辑表格的升级条件
+
+只有同时满足“用户需要在行内编辑”和“编辑前校验、保存或取消回退”时，从 `YTable` 升级到 `YEditTable`：
+
+- 列通过 `component`（可为纯函数）声明编辑器；按行差异由 `cellProps(ctx)` 决定，函数不得有副作用。
+- 必填和自定义校验通过 `editRules` / `customRule` 声明，提交前调用 `tableRef.value.validate()`；校验失败不得发起保存请求。
+- 以 `v-model:data` 接收完整数据，或在 Vue 模板监听公开 `updateRow` 事件的 kebab-case 写法 `@update-row` 接收单元格变更；保存失败由业务层回退受控数据或保持编辑态，不能假定组件自动持久化。
+- 行级候选项优先级为“行对象 `rowOptionsFieldName`（默认 `options`）→ 列 `options` → `optionsMap[field]`”。字段联动、异步候选和清空关联值必须落在 Hook 的单一数据流中。
+- 编辑表的表头筛选仍是 `filterable + filters + filterMethod`；编辑态 `filterOptions` 只过滤该行下拉候选，二者不可混用。
 
 ## 6. 交互状态规范
 
@@ -143,6 +188,36 @@ schema 约束：
 - `selected`：依赖选中节点时，未选中显示引导空态
 - `error`：请求失败提示 `message.error`
 
+### 6.1 复杂条件、日历和导入的状态契约
+
+#### `YConditionBuilder`
+
+- 用于可嵌套的 AND/OR 条件树，根值必须是 `ConditionGroup`：`{ id, type: 'GROUP', logicalOp: 'AND' | 'OR', children }`；叶子是 `{ id, type: 'LEAF', field, operator, value, betweenValue1?, betweenValue2? }`。
+- 静态操作符使用 `operator-options`；字段切换需改变操作符或值候选时使用 `get-operators(field)` 与 `load-values({ q, field, operator })`。远程字段搜索使用 `load-fields(q)`。
+- 默认严格校验；提交前调用 `ref.validate()`。只有明确允许未完成草稿时才能关闭 `strict-mode`。
+- 嵌套深度由 `max-depth` 限制（默认 3）。条件树到接口筛选 DSL 的序列化、恢复与错误兜底必须放在 `hooks/useXxx.ts`，保留组件内的标准模型。
+- `readonly` 已废弃且不生效；展示态统一传 `disabled`。
+
+#### `YMonthCalendar`
+
+- `v-model` 管理一个选中 `Dayjs`，`v-model:month` 管理展示月份；两者不要混为一个日期范围字段。
+- `valid-range` 限制可选范围，`disabled-date` 处理业务禁用日期。`validRange` 起止传反时组件会自动交换，但业务仍应在 Hook 中规范化输入。
+- 需要连续假期/日程视觉时使用 `cell-layout="grid"` 和 `#date-cell` / `#date-cell-extra`；自定义单元格必须根据 `isToday`、`isSelected`、`isDisabled` 等上下文自行保留状态语义。
+- 父容器高度确定且需要填满时才使用 `fill-height`；它要求父容器有明确高度。键盘、右键或双击动作接入 `select`、`cell-contextmenu`、`cell-dblclick`，不覆盖组件默认焦点行为。
+
+#### `YFileImport`
+
+- 以 `v-model` 管理弹窗显示；选择文件、`nextStep` 校验/预检、结果回显、`finalImport` 确认构成两步流程。事件会提供 `fileList`、`loadingName` 和 `close`。
+- 默认 `beforeUpload` 始终返回 `false`，因此不能期待 `action` 自动上传。需要直传时只在 `upload-props.customRequest` 实现，文件类型规则由 `accept` 或 `file-type-list` 统一配置。
+- `importResult` 用于展示成功、失败和总数；失败文件下载用 `exportErrorData` 事件。遮罩、居中等弹窗配置只放 `modal-props`，上传器配置只放 `upload-props`。
+
+### 6.2 编辑器、Cron、Sheet 与图表
+
+- `YMonaco` 默认 `auto-layout`；在分栏折叠、抽屉打开等容器尺寸变化后确认编辑器已布局。只读日志使用 `language="log"` 或 `"yss-log"`，并用 `appendContent()` 追加；超大内容避免频繁重设完整字符串。
+- `YCron` 的业务值就是七段表达式。页面仅负责双向绑定和禁用态；Cron 到后端调度模型的转换、时区和生效校验属于接口/Hook 层。
+- `YSheet` 的 `modelValue` 是工作簿数据；初始化后经 `getUniverAPI()` / `getWorkbook()` 的 Facade 修改并用 `save()` 取值，禁止直接改 `IWorkbookData`。必须设置容器高度；使用前确认 optionalDependencies 已被私服安装成功。
+- `YssEcharts` 的 option、数据更新策略和容器尺寸以当前版本手册与项目既有实践为准；不得把原生 ECharts 初始化、实例销毁和 ResizeObserver 再复制进页面层。
+
 ## 7. 组件编码规范
 
 - 使用 `<script setup lang="ts">`
@@ -220,7 +295,7 @@ schema 约束：
 满足任一条件即可触发本技能：
 
 - 用户提到“页面搭建、页面重构、页面区块拆分”
-- 用户提到“YTable、YssFormily、YTree、YSplitPane”
+- 用户提到“YTable、YEditTable、YFormily、YTree、YSplitPane、ConditionBuilder”
 - 用户提到“左树右表、查询区、表格区、空态、详情弹窗”
 - 用户要求“参考 QualityReportData 做一个新页面”
 
@@ -234,7 +309,7 @@ schema 约束：
 应触发示例：
 
 - “帮我按 QualityReportData 的结构搭一个新页面，左侧树右侧表格。”
-- “把这个页面查询区改成 YssFormily schema 驱动。”
+- “把这个页面查询区改成 YFormily schema 驱动。”
 - “YTable 需要加分页和空态，顺便补一个详情弹窗。”
 
 不应优先触发示例：

package/template/.claude/skills/yss-design-system/SKILL.md

@@ -80,7 +80,7 @@ description: Use when YSS 产品设计系统与 Ant Design 企业级 UI 风格
 | Spec 后做页面 / 原型 / 交互说明 | `yss-prototype-stage` → `product-design:index` |
 | 低保真原型进入高保真前评审 | `prototype-review` |
 | 低保真评审通过后的高保真 HTML 原型 | `yss-prototype-stage`；`high-fidelity-html-prototype` 仅兼容入口 |
-| 低保真线框或流程图 | `product-design:index` 或 `wireframe-prototype` 兼容入口 |
+| 低保真线框或流程图 | `product-design:index` |
 | 前端页面实现 | `yss-ui` / `yss-page-module-development` |
 | 表单 schema | `yss-formily` |
 | YTable / YTree / 高度自适应 | `yss-components` / `yss-use-table-height` / `yss-use-tree-height` |

package/template/.claude/skills/yss-hook/SKILL.md

@@ -1,47 +1,54 @@
 ---
 name: "yss-hook"
-description: Use when YSS 业务逻辑 Hook 开发规范与最佳实践。涉及 useRequest、分页查询、参数管理、数据转换、树数据加载等逻辑抽象时必须使用。
+description: Use when YSS Vue 页面涉及 vue-hooks-plus/useRequest、分页、请求缓存、轮询、URL query、异步 loading、数据转换或树数据加载。
 ---
 
 # YSS Hook 开发标准
 
-Use this skill when you need to extract page logic into `views/**/hooks/useXxx.ts` or when a page has repeated request, pagination, tree loading, or parameter handling.
+本技能用于将 `views/**` 的请求、状态与数据映射收敛到 `hooks/useXxx.ts`。页面组件只保留布局、事件绑定和渲染。
 
-## Authoritative Docs And Boundary
+## 0. 权威资料与边界
 
 - YSS UI Hooks documentation: `http://192.168.164.27:3200/hooks`
+- Vue Hooks Plus `useRequest`: `https://inhiblabcore.github.io/vue-hooks-plus/zh/hooks/useRequest/quick-start`
 - Local reference index: `references/frontend-docs.md`
 
-This skill owns page business logic hooks: request execution, pagination, parameter merging, selection state, and response mapping. Use `api-integration` when the task needs Orval API import/mutator details. Use `yss-components` for layout and component rendering. Use `yss-use-table-height` or `yss-use-tree-height` for height calculations.
+本技能负责请求执行、分页/筛选参数、选择状态、响应映射和页面级调度。接口导入与 Orval mutator 使用 `api-integration`；布局、组件与交互呈现使用 `yss-components`；高度计算分别使用 `yss-use-table-height` 或 `yss-use-tree-height`。
 
-中文说明：这个技能只管页面业务逻辑 Hook。组件怎么摆交给 `yss-components`，接口怎么导入和调用交给 `api-integration`，高度计算交给高度专项技能。
+官方 `@yss-ui/hooks` 当前公开 `useFullscreen`、`useTreeHeight`、`useTableHeight`、`useLoading`、`usePollingTask` 与 `useUrlState`。`useRequest`、防抖、缓存或重试不属于这套公开 YSS Hooks 契约。仅当项目已批准 `vue-hooks-plus` 及其具体版本时，才可使用第 3 节的 `useRequest`；不得把它命名或包装成 YSS 官方 API。
 
-## Core rule
+## 0.1 Hook 选型速查
 
-- Keep data fetching, parameter merging, and result mapping inside hooks.
-- Keep page components focused on layout, event wiring, and rendering.
-- Use one hook per business domain, not one hook per tiny helper.
+| 场景 | 首选 Hook / 模式 | 关键边界 |
+| --- | --- | --- |
+| 单次列表、详情、导出、提交请求 | 当前项目已批准的请求库；若为 Vue Hooks Plus，使用 `useRequest` | 业务 Hook 维护 loading、参数、映射和异常；不要以 `usePollingTask` 代替请求状态管理。 |
+| 搜索防抖、缓存/SWR、失败重试或请求轮询 | 已批准的 `vue-hooks-plus/useRequest` | 仅用已锁定版本的 API；同一数据源只能有一个轮询调度器。 |
+| 单个异步动作的 loading / 回调 | `useLoading` | 使用 `withLoading()` 包装动作；默认捕获错误并返回 `undefined`，需要上抛才设 `rethrowError: true`。 |
+| 后台静默刷新、多接口轮询 | `usePollingTask` | 调度和页面 loading 解耦；在写入结果前检查 `isCurrent()`，请求库支持时传入 `signal`。 |
+| 地址栏筛选、分页或详情定位 | `useUrlState` | query 是扁平字符串视图；默认 `history + replace` 不触发路由重建，依赖路由守卫时显式用 `strategy: 'router'`。 |
+| 全屏预览、编辑器、图表 | `useFullscreen` | 真实全屏必须由用户手势触发；页面全屏仅是 CSS 覆盖层，不调用浏览器 Fullscreen API。 |
+| 树或表格自适应高度 | `useTreeHeight` / `useTableHeight` | 按各自专项技能实现；高度 Hook 不负责请求或业务状态。 |
 
-## Recommended hook shape
+## 1. 基本分层
+
+- 将请求执行、参数合并、响应映射与数据竞争处理放在 `hooks/useXxx.ts`；页面只保留布局、事件绑定和渲染。
+- 以业务域划分 Hook，而不是为每个微小工具函数各建一个 Hook。
+- 每个对外动作都必须有明确的 loading、成功、失败和数据陈旧策略；不要把这些分支留给模板或页面组件。
+
+## 2. 列表 / 分页 Hook
+
+下面示例仅说明**已批准**的 `useRequest` 具有 `manual`、`run`、`onSuccess`、`onError` 时的组织方式；`vue-hooks-plus` 的专属契约见第 3 节，其他请求库以实际 API 为准。
 
 ```ts
 export function useReportTable() {
-  const loading = ref(false);
   const tableData = ref<any[]>([]);
-  const currentParams = ref({
-    page: 1,
-    pageSize: 20,
-  });
-
+  const currentParams = ref({ page: 1, pageSize: 20 });
   const pagination = reactive({
-    current: 1,
-    pageSize: 20,
-    total: 0,
-    showSizeChanger: true,
-    showQuickJumper: true,
+    current: 1, pageSize: 20, total: 0,
+    showSizeChanger: true, showQuickJumper: true,
   });
 
-  const { run: fetchList } = useRequest(apiFn, {
+  const { loading, run: fetchList } = useRequest(apiFn, {
     manual: true,
     onSuccess: (res) => {
       tableData.value = res?.data?.list || [];
@@ -52,80 +59,142 @@ export function useReportTable() {
       pagination.total = 0;
     },
   });
-
   const query = (params: Record<string, any>) => {
     currentParams.value = { ...currentParams.value, ...params };
     return fetchList(currentParams.value);
   };
-
   const handlePageChange = (current: number, pageSize: number) => {
     pagination.current = current;
     pagination.pageSize = pageSize;
     return query({ page: current, pageSize });
   };
-
-  return {
-    loading,
-    tableData,
-    currentParams,
-    pagination,
-    query,
-    handlePageChange,
-  };
+  return { loading, tableData, currentParams, pagination, query, handlePageChange };
 }
 ```
 
-## Request rules
+- 仅当项目已批准的请求库支持时使用 `useRequest`；通常使用 `manual: true`，除非需求明确要求挂载即请求。
+- `currentParams` 是唯一参数源。筛选变化重置 `page: 1`；翻页只改 `page/pageSize`；刷新、导出和编辑后重载复用它。
+- 在 Hook 内处理成功、失败、空数据和响应映射；旧列表会误导时才在失败时清空。
+- 树数据同样由 Hook 暴露 `treeData`、`treeLoading`、`selectedKey`、`handleSelect`，并在其中处理会触发加载的选中副作用。
 
-- Prefer `useRequest` for all page requests.
-- Use `manual: true` unless the request must fire on mount.
-- Handle success and failure in the hook, not in the page component.
-- Reset list state on failure when stale data would be misleading.
+## 3. `vue-hooks-plus/useRequest`（项目已批准时）
 
-## Parameter rules
+`useRequest` 接收返回 `Promise<TData>` 的 service，并以插件组合管理 `loading`、`data`、`error`、`params`。自动模式默认在组件初始化时执行；`manual: true` 时用 `run` 或 `runAsync` 发起请求。
 
-- Keep `currentParams` as the single source of truth.
-- Reset `page` to `1` when filters change.
-- Update only `page/pageSize` on pagination actions.
-- Reuse `currentParams` for refresh, export, and submit after edit.
+```ts
+import { useRequest } from 'vue-hooks-plus';
+
+const { data, error, loading, params, run, runAsync, refresh, mutate, cancel } = useRequest(
+  searchReports,
+  {
+    manual: true,
+    debounceWait: 300,
+    onSuccess: (result, requestParams) => {
+      tableData.value = result.list;
+      pagination.total = result.total;
+    },
+    onError: (cause) => { requestError.value = cause; },
+  },
+);
+```
 
-## Tree data rules
+- `run` 会捕获异常并交给 `onError`；`runAsync` 返回 `Promise`，调用处必须自行 `catch`。`refresh` / `refreshAsync` 使用上一次 `params` 重发请求；不要在页面重拼参数。
+- `mutate(nextData | updater)` 用于乐观更新；启用 `rollbackOnError` 时，远端失败会恢复更新前数据。先保存局部错误 / 刷新策略，不能只依赖乐观 UI。
+- `cancel()` 会忽略当前 Promise 的结果和错误，并会取消仍在等待执行的防抖调用；它**不会**终止底层 Promise。若 transport 支持真正中止，service 才能额外使用其已验证的 `AbortSignal` 支持。
+- 搜索场景优先 `debounceWait`（毫秒），并按需要配置 `debounceLeading`、`debounceTrailing`、`debounceMaxWait`。组件卸载与后一次请求的竞态响应会被库忽略；需要提前停止时调用 `cancel()`。不要再叠加自定义 timer / 序号，除非已验证当前版本或 transport 存在库无法覆盖的缺口。
+- `useRequest` 的并发语义在文档版本间出现差异：页面说明从 v2.4.0 起手动调用可独立执行，而 Options 表仍列出 `concurrent`（默认 `false`）控制新旧请求关系。启用并发前，必须以项目锁定版本的类型、测试与行为为准；搜索和同一资源写入默认采用单一最新请求策略。
 
-Use the same pattern for tree data:
+### 3.1 缓存、刷新与重试
 
-- keep the request and tree mapping in the hook
-- expose `treeData`, `treeLoading`, `selectedKey`, and `handleSelect`
-- keep selection side effects in the hook when they affect data loading
+- `cacheKey` 成功后会全局共享 data 和 params：同 key 的并发实例共用 Promise、数据同步。因此 key 必须包含稳定的业务身份与影响结果的参数；不同租户、用户、筛选条件或权限视图不能共用 key。副作用、实时性强或权限敏感结果默认不启用共享缓存。
+- `staleTime` 内数据视为新鲜，不重新请求；`cacheTime` 到期清除缓存。没有 `staleTime` 时，重新挂载会先展示缓存、再后台请求（SWR）。编辑 / 提交成功后的显式 `refresh` 优先于等待 SWR。
+- `refreshOnWindowFocus: true` 在 `visibilitychange` / `focus` 后刷新，使用 `focusTimespan`（默认 5000ms）限频。只给允许后台重取的读模型开启；编辑中的表单、一次性动作和高成本查询默认关闭。
+- `retryCount` 控制失败后的重试次数，`-1` 为无限重试；未设 `retryInterval` 时按 2s、4s…且最高 30s 的指数退避。仅对暂时性网络 / 可恢复服务错误设置有限重试；认证授权、参数校验、业务拒绝、显式取消和非幂等写操作禁止自动重试。`cancel()` 可停止正在等待的重试。
+- `loadingDelay` 可延迟 loading 变为 `true`，避免短请求闪烁；它不延迟请求，也不能作为防抖替代。
 
-## Return contract
+### 3.2 请求轮询与依赖刷新
 
-Expose only what the page needs:
+- `pollingInterval > 0` 启用请求轮询；每次请求完成后等待间隔再发下一次。`manual: true` 时，先 `run/runAsync` 才启动。`pollingWhenHidden` 默认 `true`；仅在业务允许后台继续请求时保留，需暂停则显式设为 `false`。`pollingErrorRetryCount` 默认 `-1`，必须为生产读模型配置有限值或明确停止条件。
+- 同一数据源只能选择 `useRequest` 轮询或 YSS `usePollingTask` 之一，禁止嵌套或同时运行。手动刷新前 `cancel()` 当前请求 / 轮询，执行带 loading 的 `refresh`，再依据明确业务规则恢复轮询。
+- `refreshDeps` 仅在非 manual 自动模式生效；传入 `WatchSource[]` 精确声明依赖，或在理解捕获范围后用 `true` 自动收集。筛选列表通常使用显式 `query` 并在筛选变化时重置页码，不以 `refreshDeps` 隐式驱动复杂参数。
 
-- loading flags
-- list or tree data
-- current params
-- pagination or selection state
-- request and action methods
+## 4. 单一异步动作：`useLoading`
+
+`useLoading(initialValue?)` 返回 `loading`、`setLoading`、`toggleLoading` 与 `withLoading`。用 `withLoading` 包装提交、删除、导出等动作，并把刷新或状态修正写在回调中。
+
+```ts
+const { loading: removeLoading, withLoading } = useLoading();
+
+async function remove(id: string) {
+  // `withLoading` 不等同于去重锁；快速重复点击须显式短路。
+  if (removeLoading.value) return;
+  await withLoading(() => deleteReport(id), {
+    onSuccess: async () => { await query(currentParams.value); },
+    onError: (error) => { actionError.value = error; },
+  });
+}
+```
+
+- 确认弹窗属于页面 / 组件交互层；Hook 接收“已确认”的业务意图并负责执行、loading、结果更新和最小动作面。
+- `withLoading` 默认捕获异常并返回 `undefined`；调用方确实需要捕获时才设置 `rethrowError: true`。可用 `onSuccess`、`onError`、`onFinally` 或 `keepLoadingOnError` 定义行为。
+- 不要让一个全局 `loading` 掩盖多个互不相关动作；为删除、保存、导出等分别暴露必要状态。
+
+## 5. 搜索竞态、取消与并行详情
+
+`@yss-ui/hooks` 没有通用防抖、取消、缓存或重试 Hook。项目已批准 Vue Hooks Plus 时，优先遵循第 3 节；否则先确认项目请求库是否已提供这些能力，再在业务 Hook 中以最小实现处理：
+
+- 搜索建议：维护 timer、递增请求序号和（仅当客户端支持时）`AbortController`；新输入先清除旧 timer、递增序号并取消旧请求；响应写入前比较序号；在 `onScopeDispose` 清理 timer 并中止请求。不要把这些逻辑放在页面组件。
+- 并行详情：每个独立区域返回自己的 `{ data, loading, error, refresh }`，`refreshAll` 可以用 `Promise.allSettled` 聚合；某一区域失败不得清空或阻塞其他区域，也必须可单独刷新。
+- 提交类动作应回滚局部乐观状态；查询类动作只在旧数据会误导时清空。
+
+```ts
+function createDetailPanel<T>(load: () => Promise<T>) {
+  const data = ref<T>();
+  const error = ref<unknown>();
+  const { loading, withLoading } = useLoading();
+  const refresh = () => withLoading(load, {
+    onSuccess: (result) => { data.value = result; error.value = undefined; },
+    onError: (cause) => { error.value = cause; },
+  });
+  return { data, error, loading, refresh };
+}
+
+const refreshAll = () => Promise.allSettled([
+  profile.refresh(), permissions.refresh(), audit.refresh(),
+]);
+```
+
+## 6. 轮询：`usePollingTask`
+
+`usePollingTask` 是通用调度器，不管理业务数据、loading 或错误状态，也不能替代请求 Hook。它在本轮任务结束后用 `setTimeout` 安排下一轮，避免 `setInterval` 造成重叠堆积。若同一数据源已采用第 3.2 节的 `useRequest` 请求轮询，不得再使用本 Hook。
+
+```ts
+const polling = usePollingTask(async ({ isCurrent, signal }) => {
+  const result = await fetchStatus({ signal }); // 仅在客户端支持 signal 时传入
+  if (!isCurrent()) return;
+  status.value = result;
+}, { interval: 5_000, autoStart: true, pauseWhenHidden: true });
+```
 
-## Implementation order
+- `start`、`stop`、`restart` 会推进 generation；异步结果写入前必须调用 `isCurrent()`。`signal` 只有请求库真正支持时才能中止网络请求。
+- `stop()` 停止但保留 interval；`setInterval(0)` 停止并把当前 interval 置零。`runNow()` 可立即执行，`restart({ immediate: false })` 可避免手动刷新后紧接着重复请求。
+- 手动搜索 / 刷新时：先 `stop()`，走带 loading 的手动请求，再按需要 `restart()`；不可让轮询与手动请求同时竞争同一状态。
+- 默认页面隐藏时暂停后续调度；正在执行的任务不会自动取消。`continueOnError`、`resumeMode` 和 `concurrent` 必须按接口语义显式选择。
 
-1. Define the state domains: list, pagination, filters, tree, detail.
-2. Write the request entry with `useRequest`.
-3. Normalize parameters with one merged params object.
-4. Map API responses into page-ready state.
-5. Expose a minimal action surface to the page.
+## 7. URL、全屏与高度类 Hooks
 
-## Checklist
+- `useUrlState()`：返回扁平字符串 `state`、`setState`、`clearKeys`、`clearState`。`setState` 合并状态，`undefined`、`null`、空字符串删除键。默认 `mode: 'replace'`、`strategy: 'history'`；需要路由守卫或导航语义时用 `strategy: 'router'`。
+- `useFullscreen(target, options?)`：返回 `isFullscreen`、`enterFullscreen`、`exitFullscreen`、`toggleFullscreen`、`isEnabled`。浏览器真全屏需要用户手势；`pageFullscreen` 是 CSS 模拟全屏，可配置 `className`、`zIndex`，并可用 `escTip` 控制提示。
+- `useTreeHeight` 与 `useTableHeight` 通过 `ResizeObserver` 计算可用高度。树的 `extraOffset` 仅用于 YTree 内置 `filterable` 搜索区；表格可配置 `boundaryRef` 避免尺寸反馈循环，并可扣除分页、工具栏或新增按钮高度。具体布局约束交由 `yss-use-tree-height` / `yss-use-table-height`。
 
-- no duplicated request flow in the page component
-- no split source of truth for params
-- success, failure, and empty-data cases are handled
-- data mapping happens in the hook, not the template
-- pagination and tree loading are decoupled when they represent different domains
+## 8. 返回契约与自检
 
-## Do not
+对页面只暴露必要的 loading、数据、错误、当前参数、分页 / 选择状态和动作方法。实现前依次定义状态域、单一参数源、请求入口、响应映射和页面动作面。
 
-- do not copy the same request logic into multiple pages
-- do not keep pagination state in both the hook and the component
-- do not let the page component perform nontrivial response mapping
-- do not mix unrelated domains into one hook unless they are inseparable
+- 页面没有重复请求、响应映射或防抖竞态逻辑。
+- 参数没有双数据源；筛选、分页、刷新和导出遵循同一份参数。
+- 成功、失败、空数据、陈旧响应和重复点击均有行为定义。
+- 并行区域可独立展示失败和刷新；轮询不会覆盖更新后的手动结果。
+- 使用 Vue Hooks Plus 时，已确认包版本；缓存 key 已隔离身份和筛选；重试、焦点刷新和隐藏页轮询均有明确的开启理由。
+- 不将 YSS `usePollingTask` 与 `useRequest` 轮询叠加，也不将 `cancel()` 误认为能终止底层网络请求。
+- 不复制同一请求到多个页面，不在页面和 Hook 同时维护分页，也不把无关业务域揉进一个 Hook。

package/template/.claude/skills/yss-hook/references/frontend-docs.md

@@ -1,9 +1,10 @@
 # yss-hook Frontend Documentation
 
-Generated: 2026-08-17T12:03:37.436Z
+Generated: 2026-08-18T00:00:00+08:00
 
 Use these YSS UI documentation entry points as authoritative references when local repo examples are insufficient.
 
 - hooks: http://192.168.164.27:3200/hooks
+- vue-hooks-plus/useRequest: https://inhiblabcore.github.io/vue-hooks-plus/zh/hooks/useRequest/quick-start
 
-When documentation and local code differ, inspect the current project code before editing and prefer established local usage.
+When documentation and local code differ, inspect the current project code before editing and prefer established local usage. `vue-hooks-plus` is a third-party request library, not an `@yss-ui/hooks` API; confirm the package and version are approved before using its options.