@qynpm/ui 1.0.8 → 1.0.11

package/README.md

@@ -1,8 +1,10 @@
 # @qynpm/ui
 
-起印体系内抽离出来的 Vue 3 UI 组件包，当前主要包含基础输入组件、选择器组件、区块容器、底部操作栏，以及上传、弹窗、备注图文等通用能力。
-
-## 安装
+起印体系内抽离出来的 Vue 3 UI 组件包，当前主要包含基础输入组件、选择器组件、区块容器、底部操作栏，以及上传、弹窗、备注图文等通用能力。
+
+录单拆包的 transform 实际代码盘点见 [录单拆包迁移总览](../record-order-migration.md)。其中记录了 `QyImagePreview`、凭证上传模式、设计文件管理等后续 UI 缺口。`QyRichTextEditor` 属于录单追加信息的独立业务组件，不进入当前全局 UI 基础包。
+
+## 安装
 
 ```bash
 pnpm add @qynpm/ui
@@ -32,16 +34,26 @@ app.use(QyUI)
 也可以按需引入：
 
 ```ts
-import {
-  QyUpload,
-  QyVoucherUpload,
+import {
+  QyUpload,
+  QyImage,
+  QyImagePreview,
+  QyImageUpload,
   QyDialog,
   QyRemarkImage,
   QyInput,
-  QyMoneyInput,
-  QyRadioGroup,
-  QySelect,
-  QyRemoteSelect,
+  QyInputNumber,
+  QyMoneyInput,
+  QyDatePicker,
+  QyCheckbox,
+  QyAutocomplete,
+  QyMenuActions,
+  QyTableColumnSettings,
+  QyRadioGroup,
+  QySelect,
+  QyTreeSelect,
+  QyRemoteSelect,
+  QySelectionDialog,
   QyFormSection,
   QyActionBar,
   QySearchInput,
@@ -54,20 +66,30 @@ import {
 ```ts
 import QyInput from '@qynpm/ui/qy-input'
 import QyMoneyInput from '@qynpm/ui/qy-money-input'
-import QyRadioGroup from '@qynpm/ui/qy-radio-group'
-import QySelect from '@qynpm/ui/qy-select'
-import QyRemoteSelect from '@qynpm/ui/qy-remote-select'
+import QyRadioGroup from '@qynpm/ui/qy-radio-group'
+import QySelect from '@qynpm/ui/qy-select'
+import QyTreeSelect from '@qynpm/ui/qy-tree-select'
+import QyRemoteSelect from '@qynpm/ui/qy-remote-select'
+import QySelectionDialog from '@qynpm/ui/qy-selection-dialog'
 import QyFormSection from '@qynpm/ui/qy-form-section'
 import QyActionBar from '@qynpm/ui/qy-action-bar'
 import QySearchInput from '@qynpm/ui/qy-search-input'
 import QyRecordQuoteSearch from '@qynpm/ui/qy-record-quote-search'
-import QyDialog from '@qynpm/ui/qy-dialog'
-import QyUpload from '@qynpm/ui/qy-upload'
-import QyVoucherUpload from '@qynpm/ui/qy-voucher-upload'
+import QyDialog from '@qynpm/ui/qy-dialog'
+import QyUpload from '@qynpm/ui/qy-upload'
+import QyImage from '@qynpm/ui/qy-image'
+import QyImagePreview from '@qynpm/ui/qy-image-preview'
+import QyImageUpload from '@qynpm/ui/qy-image-upload'
 import QyRemarkImage from '@qynpm/ui/qy-remark-image'
-```
-
-## 组件说明
+import QyInputNumber from '@qynpm/ui/qy-input-number'
+import QyDatePicker from '@qynpm/ui/qy-date-picker'
+import QyCheckbox from '@qynpm/ui/qy-checkbox'
+import QyAutocomplete from '@qynpm/ui/qy-autocomplete'
+import QyMenuActions from '@qynpm/ui/qy-menu-actions'
+import QyTableColumnSettings from '@qynpm/ui/qy-table-column-settings'
+```
+
+## 组件说明
 
 ### `QyUpload`
 
@@ -88,12 +110,14 @@ import QyRemarkImage from '@qynpm/ui/qy-remark-image'
 - `api`
 - `tokenKey`
 - `name`
+- `uploadRequest`
 
 其中：
 
 - `api` 为必填
 - `tokenKey` 不传时默认使用 `Admin-Token`
 - `name` 不传时默认使用 `file`
+- `uploadRequest` 可接入宿主项目自己的 request、baseURL、鉴权和错误处理；不传时使用组件默认 XHR 上传
 
 值协议：
 
@@ -103,22 +127,153 @@ import QyRemarkImage from '@qynpm/ui/qy-remark-image'
 - `showText=false` 可隐藏文字备注区；如仍需粘贴入口，可开启 `showPasteInput`
 - `defaultValue` 仍保留给老页面做非受控初始化；新页面建议优先使用 `v-model`
 
-### `QyVoucherUpload`
+### `QyImageUpload`
 
-凭证上传组件，基于 `QyUpload` 的薄封装，适合财审凭证、收款凭证、返现凭证等纯图片凭证场景。
+图片/文件字段上传组件，基于 `QyUpload` 的薄封装，适合商品图、设计图、成本附图、凭证图片集合、单视频字段等场景。
 
 固定协议：
 
-- `v-model` 为 `string[]`
+- 默认 `multiple=false`，`v-model` 为单个 URL 字符串
+- `multiple=true` 时，`v-model` 为 URL 数组
+- 单图默认 `limit=1`，多图默认 `limit=9`
 - 默认 `name="files"`
 - 默认 `showText=false`
-- 默认开启纯粘贴输入条，用于恢复“粘贴图片上传”的凭证交互
-- 默认 `pastePlaceholder="粘贴图片上传"`
-- 默认 `size="90px"`
-
-如果需要图片加文字备注，请直接使用 `QyUpload`。
-
-### `QyDialog`
+- 默认开启纯粘贴输入条
+- 默认 `size="128px"`
+- 支持 `supportVideo`、`fileType`、`fileSize`
+- 支持透传 `uploadRequest`，用于接入宿主项目上传请求
+
+`QyImageUpload` 不保留旧 `imageUpload` 的 `successUpload(fileList)` 和旧 `CopyImgUpload` 的 `fullPathList` 协议。旧页面后续替换时，应在页面层把旧回调/取值改成直接绑定 `v-model`。
+
+### `QyImage`
+
+图片展示组件，计划承接旧 `packages/qiyin/components/Image`，并作为 `@qynpm/table-schema` 的 `image` 列渲染底座。
+
+这是后续替代旧 `useCol` 的前置组件。旧 `useCol/render/imageRender.vue` 的表格列渲染不应该在 `@qynpm/table-schema` 内重复维护一套通用图片组件，而应组合 `QyImage`。
+
+必须完整覆盖旧能力：
+
+- `src` 图片地址。
+- `width / height / size` 缩略图尺寸。
+- `fit` 图片填充方式，透传 `ElImage`。
+- 加载中状态。
+- 加载失败状态。
+- `error` 事件。
+- `placeholder` 空图占位。
+- `compressor` 压缩缩略图参数。
+- 旧域名兼容：`http` 转 `https`，`ys.diansan.com` 转 `admin.qiyinbz.com`。
+- 旧缩略图参数：点三域名使用 `?small=true&style=image/resize,h_{h},w_{w}`，其他域名使用 `?w={w}`。
+- 失败兜底：缩略图请求失败后请求原图 blob，并用浏览器 canvas 压缩成 dataURL 展示。
+- `preview / previewList / initialIndex` 图片预览。
+
+失败兜底属于旧公共图片组件能力，不是录单业务逻辑。当前实现不新增 `compressorjs`，使用浏览器原生 `fetch + blob + canvas` 完成压缩；如果后续发现必须完全等价旧 `compressorjs` 的压缩细节，再单独评估是否新增依赖。
+
+建议新组件 API：
+
+```ts
+type QyImageProps = {
+  src?: string
+  width?: number | string
+  height?: number | string
+  size?: number
+  fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
+  placeholder?: boolean
+  compressor?: boolean | {
+    w?: number
+    h?: number
+    q?: number
+  }
+  preview?: boolean
+  previewList?: string[]
+  initialIndex?: number
+}
+```
+
+表格 image 列后续直接组合 `QyImage` 和 `QyImagePreview`，不要在 `@qynpm/table-schema` 里复制一份通用图片组件。
+
+已完成：
+
+- 创建 `@qiyin/UI/qy-image` 入口。
+- 创建 `src/docs/QyImageDoc.vue` playground 文档。
+- 补 `index.js / index.d.ts / package.json exports / files`。
+- 补构建入口，确保 `@qynpm/ui/qy-image` 可按需引入。
+- 补失败压缩兜底，不新增 `compressorjs`。
+- 补 `preview` 接入，可点击打开 `QyImagePreview`。
+
+### `QyImagePreview`
+
+图片预览组件，承接旧 `useCol/render/imageRender.vue` 中动态创建 `ElImageViewer` 的逻辑。
+
+需要支持：
+
+- `urlList` 图片列表。
+- `initialIndex` 初始预览索引。
+- 打开时控制 `body.style.overflow = 'hidden'`。
+- 关闭时恢复 body 滚动并销毁实例。
+- 支持直接作为组件使用，也支持函数式调用，例如 `openQyImagePreview({ urlList, initialIndex })`。
+
+该能力是 `@qynpm/table-schema` 完整迁移 image 列的前置能力。table-schema 不应该长期维护一份独立图片预览逻辑。
+
+### `QyCheckbox`
+
+复选框基础组件，基于 `ElCheckbox` 做薄封装，统一 `v-model`、`change`、`focus`、`blur` 事件和单组件入口。
+
+主要用于普通表单复选框，以及 `@qynpm/table-schema` 的 `edit-checkbox` 渲染器底座。
+
+### `QyAutocomplete`
+
+自动完成输入基础组件，基于 `ElAutocomplete` 做薄封装，支持本地 `options` 过滤和 Element Plus 原生 `fetchSuggestions` 透传。
+
+默认协议：
+
+- `v-model` 绑定输入值。
+- `options` 支持 `{ value }` 列表，也支持通过 `valueKey` 映射其它字段。
+- 默认按 `option.value.includes(query)` 过滤。
+- 支持 `select / change / input / clear / focus / blur` 事件。
+
+该组件作为 `@qynpm/table-schema` 的 `edit-autocomplete` 渲染器底座，表格 row 写回逻辑仍留在 table-schema。
+
+### `QyMenuActions`
+
+表格行操作 UI 底座，承接旧 `useCol/render/menu.vue` 的通用展示能力。
+
+支持：
+
+- `inline` 横向操作模式。
+- `popover` 更多操作模式。
+- `actions` 列表。
+- `hidden / disabled / loading` 支持布尔值或按行上下文计算。
+- `type` 控制默认、主色、成功、警告、危险操作色。
+- `confirmMethod(action, context)` 由宿主注入确认逻辑。
+- `action(action, context)` 只在可执行且确认通过后触发。
+
+`QyMenuActions` 不内置权限、路由、缓存、弹窗实例、消息提示，也不直接执行业务方法。权限过滤和业务执行应留在 `@qynpm/table-schema` adapter 或宿主页面。
+
+### `QyTableColumnSettings`
+
+表格列设置 UI 底座，承接旧 `useCol/render/setup.vue` 的通用 UI 能力。
+
+支持：
+
+- 列列表展示。
+- 当前选中列。
+- 置顶、置底、上移、下移。
+- 固定左侧、固定右侧、取消固定。
+- 列宽编辑。
+- 显隐开关。
+- 恢复默认。
+- 删除缓存。
+
+业务缓存读写仍由 `@qynpm/table-schema` 的 settings adapter 或宿主 adapter 负责，UI 组件只负责展示和编辑 settings。
+
+### 编辑类基础组件（待评估）
+
+旧 `useCol` 的 `edit-input / edit-autocomplete` 有一套“展示态 -> 点击编辑 -> blur/enter 写回”的通用交互。后续有两种选择：
+
+- 如果表格外也需要该交互，补 `QyInlineEditInput` 和 `QyAutocompleteInput`。
+- 如果只服务表格列，先放在 `@qynpm/table-schema` renderer 内部，避免 UI 包过早扩大。
+
+### `QyDialog`
 
 弹窗组件，支持：
 
@@ -128,6 +283,73 @@ import QyRemarkImage from '@qynpm/ui/qy-remark-image'
 - 自定义 footer
 - 移动端自动全屏
 
+### `QySelectionDialog`
+
+数据选择弹窗底座，参考老 `@qiyin/components/Dialog` 的核心能力迁移，但不内置任何 ERP 接口或权限逻辑。
+
+适合业务 wrapper 组合：
+
+- 店铺选择
+- 人员选择
+- 商品选择
+- 物料/工艺/属性选择
+
+核心能力：
+
+- `QyDialog` 弹窗容器
+- `fetchMethod(query)` 或兼容老 `query(query)` 加载表格数据
+- `selectionMode="single | multiple | none"`，兼容老 `selection="single | multi | none"`
+- `modelValue` 管理确认后的已选行，`selected` 兼容老 `Dialog` 初始已选行
+- `rowKey` 控制唯一键
+- `labelKey` 控制已选标签展示
+- `searchKey`、分类、类型筛选
+- 类型筛选内部使用 `QySelect`，可通过 `typeSelectProps` 透传下拉属性
+- `columns` / `cols` 插槽渲染业务列
+- `side`、`search`、`toolbar` 插槽扩展业务区域
+- Element Plus 原生分页
+
+`QySelectionDialog` 只解决“怎么选”，不解决“选什么”。业务接口、字段映射、权限判断应放在宿主项目 wrapper 中。
+
+迁移业务选择器前，建议先阅读：
+
+- [选择弹窗迁移规范](./选择弹窗迁移规范.md)
+
+选择状态采用“弹窗草稿 + 确认提交”协议：
+
+- 行点击、勾选、删除标签、粘贴只修改弹窗内部草稿，并触发 `selection-change(rows)`。
+- 点击确认后才触发 `update:modelValue(rows)`、`confirm(rows)` 和兼容老 `Dialog` 的 `submit({ selection, rows, query })`。
+- 点击取消或关闭会丢弃草稿选择，不会污染宿主表单中的 `v-model`。
+- `search` / `handleQuerySearch` 会重置到第一页并查询；分页切换会按当前条件查询。
+
+主要扩展点：
+
+- `columns` / `cols`：表格列，`cols` 用于兼容老 `Dialog`。
+- `side`：左侧业务区域，例如分类树、部门树。
+- `search`：完全自定义查询区，插槽参数为 `{ query, search, reset }`。
+- `toolbar`：搜索区右侧操作区，插槽参数为 `{ query, search }`。
+- `getTableRef`、`getTableData`、`getSelection`：用于业务 wrapper 做必要的桥接。
+
+### `QyRemarkImage`
+
+备注图片组件，承接旧 `@qiyin/components/remarkImage` 的“备注文本 + 单图”协议。
+
+支持：
+
+- `defaultValue` 解析 `[url:图片地址]备注文本`
+- `defaultImage` 独立图片默认值
+- `change(value, imageUrl)` 输出完整备注值和图片地址
+- 粘贴图片上传
+- 悬浮预览和删除图片
+- `uploadRequest` 自定义上传请求
+
+默认上传会使用：
+
+- `api`，默认 `/permission-api/common/uploads`
+- `tokenKey`，默认 `Admin-Token`
+- `uploadName`，默认 `files`
+
+如果宿主项目有统一 request、baseURL、鉴权、错误处理或登录失效处理，应优先传入 `uploadRequest`，不要在组件内部写死项目请求实现。
+
 ### `QyInput`
 
 输入组件，第一版定位为 `ElInput` 的轻量包装层，重点支持：
@@ -150,6 +372,36 @@ import QyRemarkImage from '@qynpm/ui/qy-remark-image'
 - `allowNegative`
 - 兼容常见 slots 与 expose 方法
 
+### `QyInputNumber`
+
+数字输入组件，第一版定位为 `ElInputNumber` 的轻量包装层，重点支持：
+
+- 保持 `number / null` 值语义
+- `min / max`
+- `step`
+- `step-strictly`
+- `precision`
+- `controls / controls-position`
+- 兼容 `focus / blur` expose 方法
+
+金额、费用、税费等财务录入场景请优先使用 `QyMoneyInput`，不要用 `QyInputNumber` 做金额格式化。
+
+### `QyDatePicker`
+
+日期选择组件，第一版定位为 `ElDatePicker` 的轻量包装层，重点支持：
+
+- 保持和 `ElDatePicker` 接近的使用方式
+- `date / datetime / daterange / datetimerange` 等常见类型
+- `format / value-format`
+- `default-time`
+- `shortcuts`
+- `disabled-date`
+- 默认弹层挂载到 `body`
+- `normalize-range-end-time` 查询场景结束时间归一化
+- 兼容 `focus / blur / handleOpen / handleClose` expose 方法
+
+`normalize-range-end-time` 默认关闭。只有查询表单需要把范围结束值从当天 `00:00:00` 归一为 `23:59:59` 时再显式开启，避免影响普通日期选择。
+
 ### `QyRadioGroup`
 
 单选组组件，第一版定位为 `ElRadioGroup` 的轻量包装层，重点支持：
@@ -168,18 +420,35 @@ import QyRemarkImage from '@qynpm/ui/qy-remark-image'
 - `value`：映射后的选项值
 - `disabled`：是否禁用
 
-### `QySelect`
-
-选择器组件，第一版定位为 `ElSelect` 的轻量包装层，重点支持：
+### `QySelect`
+
+选择器组件，第一版定位为 `ElSelect` 的轻量包装层，重点支持：
 
 - `options` 直出
 - `labelKey / valueKey / disabledKey` 映射
 - 单选 / 多选
 - `collapse-tags`
-- 默认弹层挂载策略
-- 保留原生 slot 扩展
-
-### `QyRemoteSelect`
+- 默认弹层挂载策略
+- 保留原生 slot 扩展
+
+### `QyTreeSelect`
+
+树选择组件，第一版定位为 `ElTreeSelect` 的轻量包装层，重点支持：
+
+- `options` 树数据直出
+- 兼容 `ElTreeSelect` 的 `data` 参数
+- `labelKey / valueKey / childrenKey / disabledKey` 字段映射
+- 单选 / 多选
+- `check-strictly`
+- `collapse-tags`
+- 默认弹层挂载策略
+- 保留原始节点字段，便于业务 slot 和后续透传使用
+
+`QyTreeSelect` 只处理树选择器的通用 UI 协议，不内置远程请求、权限过滤或业务接口格式化。业务接口返回字段不一致时，优先通过字段映射解决，避免每个页面先手写一遍 tree map。
+
+为降低迁移成本，`QyTreeSelect` 的 `clearable`、`filterable`、`check-strictly`、`render-after-expand`、`fit-input-width` 等默认行为尽量跟随 `ElTreeSelect`。业务需要搜索、清空、父子不联动时应显式传参。
+
+### `QyRemoteSelect`
 
 远程选择器组件，基于 `QySelect` 组合实现，重点支持：
 
@@ -280,22 +549,181 @@ import QyRemarkImage from '@qynpm/ui/qy-remark-image'
 </template>
 ```
 
-### QyVoucherUpload
+### QyImageUpload
+
+单图字段：
 
 ```vue
 <template>
-  <QyVoucherUpload
-    v-model="payImgs"
+  <QyImageUpload
+    v-model="imageUrl"
+    api="/permission-api/common/uploads"
+    :file-size="5"
+  />
+</template>
+```
+
+### QyImage
+
+```vue
+<template>
+  <QyImage
+    src="https://img.example.com/a.jpg"
+    :size="48"
+    fit="cover"
+    preview
+    :compressor="{ w: 200, h: 200, q: 50 }"
+  />
+</template>
+```
+
+函数式预览：
+
+```ts
+import { openQyImagePreview } from '@qynpm/ui'
+
+openQyImagePreview({
+  urlList: ['https://img.example.com/a.jpg'],
+  initialIndex: 0
+})
+```
+
+多图字段：
+
+```vue
+<template>
+  <QyImageUpload
+    v-model="payImages"
     api="/permission-api/common/uploads"
+    multiple
     :limit="9"
-    :file-size="10"
   />
 </template>
 ```
 
-### QyDialog
+接入宿主项目上传请求：
+
+```vue
+<template>
+  <QyImageUpload
+    v-model="payImgs"
+    name="files"
+    multiple
+    :upload-request="uploadFile"
+  />
+</template>
+
+<script setup lang="ts">
+import { request } from '@qiyin/utils'
+
+async function uploadFile({ formData }) {
+  return request({
+    url: '/permission-api/common/uploads',
+    method: 'POST',
+    data: formData
+  })
+}
+</script>
+```
+
+### QyRemarkImage
+
+默认上传：
+
+```vue
+<template>
+  <QyRemarkImage
+    :default-value="remark"
+    api="/permission-api/common/uploads"
+    upload-name="files"
+    @change="handleRemarkChange"
+  />
+</template>
+
+<script setup lang="ts">
+function handleRemarkChange(value: string, imageUrl?: string) {
+  remark.value = value
+  remarkImage.value = imageUrl || ''
+}
+</script>
+```
+
+接入宿主项目上传请求：
 
 ```vue
+<template>
+  <QyRemarkImage
+    :default-value="remark"
+    :upload-request="uploadRemarkImage"
+    @change="handleRemarkChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { request } from '@qiyin/utils'
+
+async function uploadRemarkImage({ formData }) {
+  return request({
+    url: '/permission-api/common/uploads',
+    method: 'POST',
+    data: formData
+  })
+}
+
+function handleRemarkChange(value: string, imageUrl?: string) {
+  remark.value = value
+  remarkImage.value = imageUrl || ''
+}
+</script>
+```
+
+### QyMenuActions
+
+```vue
+<template>
+  <QyMenuActions
+    :row="row"
+    :row-index="0"
+    :actions="actions"
+    :confirm-method="confirmAction"
+    @action="handleAction"
+  />
+</template>
+
+<script setup lang="ts">
+const row = { id: 1, status: 'draft' }
+const actions = [
+  { key: 'edit', label: '编辑' },
+  { key: 'delete', label: '删除', type: 'danger', confirm: true }
+]
+
+function confirmAction(action, context) {
+  return window.confirm(`确认${action.label}？`)
+}
+
+function handleAction(action, context) {
+  // 业务执行、消息提示和权限判断留在宿主或 table-schema adapter。
+}
+</script>
+```
+
+### QyTableColumnSettings
+
+```vue
+<template>
+  <QyTableColumnSettings
+    v-model="visible"
+    :settings="settings"
+    :default-settings="defaultSettings"
+    @confirm="saveSettings"
+    @delete-cache="removeSettingsCache"
+  />
+</template>
+```
+
+### QyDialog
+
+```vue
 <template>
 <QyDialog title="标题" @confirm="handleConfirm">
   内容区域
@@ -330,6 +758,36 @@ import QyRemarkImage from '@qynpm/ui/qy-remark-image'
 </template>
 ```
 
+### QyInputNumber
+
+```vue
+<template>
+  <QyInputNumber
+    v-model="productNum"
+    :min="0"
+    :step="1"
+    :precision="0"
+    controls-position="right"
+    placeholder="请输入数量"
+  />
+</template>
+```
+
+### QyDatePicker
+
+```vue
+<template>
+  <QyDatePicker
+    v-model="dateRange"
+    type="datetimerange"
+    value-format="YYYY-MM-DD HH:mm:ss"
+    format="YYYY-MM-DD HH:mm:ss"
+    :default-time="defaultTime"
+    normalize-range-end-time
+  />
+</template>
+```
+
 ### QyRadioGroup
 
 ```vue
@@ -441,13 +899,16 @@ import QyRemarkImage from '@qynpm/ui/qy-remark-image'
 - 当前版本更适合体系内拆包复用
 - 上传默认值仍然保留了现有项目约定，后续如果完全独立对外，可以再继续抽离
 - `QyInput` 第一版优先兼容 `ElInput`，后续再逐步补统一输入规则
+- `QyInputNumber` 第一版优先兼容 `ElInputNumber`，保持数字输入语义，不承接金额格式化
 - `QyRadioGroup` 第一版优先兼容 `ElRadioGroup`，不内置字典请求或复杂表单联动
 - `QySelect` 第一版优先兼容 `ElSelect`，不内置远程字典或复杂请求能力
+- `QyDatePicker` 第一版优先兼容 `ElDatePicker`，查询结束时间归一化需要显式开启
 - `QyRemoteSelect` 负责远程请求状态和回显保留，不承接具体业务接口协议转换
 - `QyFormSection` 只负责区块壳，不替代 `@qiyin/form` 的 schema / 校验能力
-- `QyActionBar` 只负责底部布局壳，不负责编排按钮业务逻辑
-- `QySearchInput` 第一版已经覆盖建议搜索场景，但仍然不承接页面级副作用
-- `QyRecordQuoteSearch` 只承接报价单搜索入口逻辑，不直接改整页录单状态
+- `QyActionBar` 只负责底部布局壳，不负责编排按钮业务逻辑
+- `QySearchInput` 第一版已经覆盖建议搜索场景，但仍然不承接页面级副作用
+- `QyRecordQuoteSearch` 只承接报价单搜索入口逻辑，不直接改整页录单状态
+- `QyImage` 负责通用图片显示，不负责表格列取值、formatter、水印和列设置；这些由 `@qynpm/table-schema` 组合
 
 ## 当前联调说明
 
@@ -455,7 +916,7 @@ import QyRemarkImage from '@qynpm/ui/qy-remark-image'
 
 开关位置：
 
-- [vite.config.ts](/vite.config.ts)
+- `qy-workspace` 顶层 `vite.config.ts`
 
 当前配置：
 
@@ -466,8 +927,8 @@ const ENABLE_LOCAL_QIYIN_DEBUG = true
 规则如下：
 
 1. 当值为 `true` 时
-- `@qynpm/ui` 映射到本地 [@qiyin/UI/lib/index.js](/@qiyin/UI/lib/index.js)
-- `@qynpm/form` / `@qiyin/form` 映射到本地 [@qiyin/form/index.ts](/@qiyin/form/index.ts)
+- `@qynpm/ui` 映射到本地 [lib/index.js](./lib/index.js)
+- `@qynpm/form` / `@qiyin/form` 映射到本地 [../form/index.ts](../form/index.ts)
 - 消费项目开发时可以直接联调 `UI` 与 `form`
 
 2. 当值为 `false` 时