@cimom-ui/standard-ui 1.1.6 → 1.1.7

package/README.md

@@ -1,31 +1,37 @@
-# @addytse/standard-ui
-
-IPQC 标准组件库：基于 **Vue 2.6 + Element UI 2.x + vxe-table 3.x** 的通用业务组件封装，从 IPQC-Web 项目 `src/components` 抽取而来，作为独立 npm 包发布，供其它项目复用。
-
-## 组件清单
-
-| 组件 | 标签 | 说明 |
-| --- | --- | --- |
-| StandardButton | `<standard-button>` | 标准按钮（固定 mini，透传 el-button，支持单/双标签写法） |
-| StandardDialog | `<standard-dialog>` | 标准弹窗（确定不自动关闭，由父组件控制） |
-| StandardContainer | `<standard-container>` | 标准布局容器（纵向/横向排列 + 主轴百分比占位） |
-| StandardFilterbar | `<standard-filterbar>` | 标准筛选栏（主/次条件区、导出、高级查询） |
-| StandardForm | `<standard-form>` + `<standard-form-item>` | 标准表单（label 宽度自动计算） |
-| StandardHalfArea | `<standard-half-area>` | 半区容器（left/right 半区位置、transparent 透明模式） |
-| StandardInput | `<standard-input>` | 标准输入框（自动去首尾空格） |
-| StandardPage | `<standard-page>` | 标准页面容器（client 客户端高度、vertical 纵向分栏模式） |
-| StandardSplitter | `<standard-splitter>` | 左右分割条 |
-| StandardSelect | `<standard-select>` | 标准下拉选择（单选/多选、远程搜索） |
-| StandardTimePick | `<standard-time-pick>` | 标准时间选择（年月日 / 年月日时分秒） |
-| StandardTable | `<standard-table>` 及 7 个子组件 | 标准表格（基于 vxe-table） |
-| StandardTree | `<standard-tree>` | 标准树（transparent 透明模式） |
+# @cimom-ui/standard-ui
+
+标准组件库：基于 **Vue 2.6 + Element UI 2.x + vxe-table 3.24.x** 的通用业务组件封装，供其它项目复用。
+
+> 共 **14 个顶层组件**。
+
+## 组件总览
+
+| 组件 | 标签 | 形态 | 说明 |
+| --- | --- | --- | --- |
+| StandardButton | `<standard-button>` | 单/双标签 | 标准按钮（固定 mini，透传 el-button） |
+| StandardInput | `<standard-input>` | 单/双标签 | 标准输入框（自动 trim、可仅数字） |
+| StandardSelect | `<standard-select>` | 单标签 | 标准下拉（单选/多选、远程搜索） |
+| StandardTimePick | `<standard-time-pick>` | 单标签 | 标准时间选择（年月日 / 年月日时分秒） |
+| StandardDialog | `<standard-dialog>` | 双标签 | 标准弹窗（confirm 不自动关闭） |
+| StandardContainer | `<standard-container>` | 双标签 | 标准布局容器（方向/百分比占位） |
+| StandardFilterbar | `<standard-filterbar>` | 单标签 | 标准筛选栏（主/次条件、导出、高级查询） |
+| StandardForm + Item | `<standard-form>` + `<standard-form-item>` | 双标签 | 标准表单（label 宽度自动计算、span 栅格） |
+| StandardHalfArea | `<standard-half-area>` | 双标签 | 半区容器（left/right、transparent 模式） |
+| StandardPage | `<standard-page>` | 双标签 | 页面骨架（client 模式高度） |
+| StandardSplitter | `<standard-splitter>` | 单标签 | 左右分割条（px / percent） |
+| StandardTable + 子组件 | `<standard-table>` 及 7 个子组件 | 双标签 | 标准表格（基于 vxe-table） |
+| StandardTabs + TabPane | `<standard-tabs>` + `<standard-tab-pane>` | 双标签 | 标准页签（卡片样式内聚） |
+| StandardTree | `<standard-tree>` | 单标签 | 标准树（搜索 + 节点 + 底部按钮） |
 
 > `StandardAdvancedQuery` 为 `StandardFilterbar` 内部依赖，随包发布但不单独暴露。
+>
+> 命名约定：属性表列出的属性名为**模板传参写法（kebab-case）**，与代码 prop（camelCase）一一对应
+> （如 `number-only` ↔ `numberOnly`、`default-expanded-keys` ↔ `defaultExpandedKeys`）；事件名统一 kebab-case。
 
 ## 安装
 
 ```bash
-npm i @addytse/standard-ui
+npm i @cimom-ui/standard-ui
 ```
 
 ### 前置依赖（peerDependencies）
@@ -48,52 +54,433 @@ Vue.use(VXETable)
 | --- | --- | --- |
 | vue | ^2.6.0 | |
 | element-ui | ^2.15.0 | 全部组件依赖 |
-| vxe-table | ^3.6.0 | 仅 StandardTable 依赖 |
+| vxe-table | ^3.24.0 | 仅 StandardTable 依赖 |
+| @vxe-ui/core | ^3.4.24 | vxe-table 3.24 运行时依赖（本包 dependencies 已声明，随包自动安装，无需手动安装） |
+
+## 注册方式
+
+### 全局注册（推荐）
+
+在入口统一注册一次，页面模板直接使用标签，**业务页面内无需 import**：
+
+```js
+// src/main.js
+import StandardComponents from '@cimom-ui/standard-ui';
+Vue.use(StandardComponents);
+```
+
+### 局部注册（按需）
+
+```js
+// 业务页面
+import { StandardTable, StandardButton } from '@/components';
+
+// npm 包（lib 构建产物仅保留默认导出，组件挂载为默认导出对象的属性）
+import StandardComponents from '@cimom-ui/standard-ui';
+
+export default {
+  components: {
+    'standard-table': StandardComponents.StandardTable,
+    'standard-button': StandardComponents.StandardButton
+  }
+}
+
+// 子组件挂载于主组件静态属性
+// 'standard-column': StandardTable.Column,
+// 'standard-toolbar-left': StandardTable.ToolbarLeft
+```
+
+## 组件 API
+
+### 标准按钮 StandardButton
+
+支持**单标签**（`label` prop）与**双标签**（默认插槽文案，优先于 `label`）；内部固定 `size="mini"`，其余属性/事件透传 `el-button`。
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| label | String | `''` | 按钮文案 |
+| icon | String | `''` | 图标类名（如 `el-icon-upload2`） |
+| type | String | `''` | `primary / success / warning / danger / info / text` |
+
+```html
+<standard-button label="查询" type="primary" icon="el-icon-search"
+                 :loading="loading" @click="onSearch" />
+<standard-button label="导出" icon="el-icon-upload2" @click="onExport" />
+<standard-button type="danger" @click="onDelete">删除</standard-button>
+```
+
+### 标准输入框 StandardInput
+
+支持**单标签**与**双标签**（默认插槽内容显示为输入框右侧附加内容，常用于单位）；内部固定 `size="mini"`、可清空、自动 trim。
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| value | String/Number | `''` | v-model 绑定值 |
+| placeholder | String | `'请输入'` | 占位文案 |
+| number-only | Boolean | `false` | 仅允许输入数字（0-9，非数字自动过滤） |
+
+**事件**：`@enter`（回车）；其余（focus/blur/clear 等）透传。
+**插槽**：默认插槽 → append（右侧附加）；具名 `prepend` / `prefix` / `suffix`。
+
+```html
+<standard-input v-model="keyword" placeholder="请输入关键字" @enter="onSearch" />
+<standard-input v-model="form.qty" number-only>个</standard-input>
+```
+
+### 标准下拉 StandardSelect
+
+单选绑定任意值；`multiple` 多选时绑定值必须为数组。内部固定 `size="mini"`、可清空、可筛选；远程模式自动开启 `filterable` / `reserve-keyword`。
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| value | String/Number/Array | `''` | v-model 绑定值 |
+| options | Array | `[]` | 静态选项（`[{label,value}]` 或原始对象数组） |
+| option-props | Object | `{label:'label',value:'value'}` | 选项字段映射 |
+| remote | String/Function | `''` | 远程搜索方法（函数或父组件方法名） |
+| multiple | Boolean | `false` | 多选模式 |
+| filterable | Boolean | `true` | 可筛选（远程模式强制开启） |
+| clearable | Boolean | `true` | 可清空 |
+| disabled | Boolean | `false` | 禁用 |
+| placeholder | String | `'请选择'` | 占位文案 |
+
+**事件**：`@change` / `@visible-change`，其余透传 `el-select`。
+**远程约定**：remote 方法返回 Promise；返回值支持数组或接口响应结构（自动提取 `Datas`）；组件自动防抖 300ms、管理 loading、首次挂载与下拉展开（无数据）时自动拉取。
+
+```html
+<standard-select v-model="form.type" :options="typeOptions" />
+<standard-select v-model="form.types" multiple :options="typeOptions" />
+<standard-select v-model="form.cmoLot" remote="remoteWorkCmo"
+                 :option-props="{ label: 'CMO_LOT', value: 'CMO_LOT' }"
+                 placeholder="请选择工单编号" />
+```
+
+### 标准时间选择 StandardTimePick
+
+`type="date"`（默认，年月日）/ `type="datetime"`（年月日时分秒）；内部固定 `size="mini"`、可清空、弹出面板右对齐。
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| value | String/Date/Array | `''` | v-model 绑定值 |
+| type | String | `'date'` | `date` / `datetime` |
+| value-format | String | `''` | 未传按 type 匹配 `yyyy-MM-dd` / `yyyy-MM-dd HH:mm:ss` |
+| placeholder | String | `''` | 未传按 type 匹配"请选择日期 / 请选择时间" |
+| clearable | Boolean | `true` | 可清空 |
+| disabled | Boolean | `false` | 禁用 |
+| picker-options | Object | `null` | 日期面板配置（disabledDate 等） |
+
+```html
+<standard-time-pick v-model="form.checkDate" />
+<standard-time-pick v-model="form.checkTime" type="datetime" />
+<standard-time-pick v-model="form.date" :picker-options="pickerOptions" />
+```
+
+### 标准弹窗 StandardDialog
+
+双标签，默认插槽放弹窗内容。
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| visible | Boolean | `false` | v-model 控制显隐 |
+| title | String | `''` | 弹窗标题 |
+| show-cancel | Boolean | `true` | 显示"取消"按钮 |
+| show-confirm | Boolean | `true` | 显示"确定"按钮 |
+| confirm-loading | Boolean | `false` | 确定按钮加载态 |
+
+**事件**：`@confirm`（**不自动关闭**，父组件处理业务后自行关闭）、`@cancel`（自动关闭）、`@close`。
+
+```html
+<standard-dialog v-model="dialogVisible" title="新增节点"
+                 :confirm-loading="saving" @confirm="handleConfirm">
+  <standard-form ref="editForm" :model="form" :rules="formRules">
+    <!-- 表单内容 -->
+  </standard-form>
+</standard-dialog>
+```
+
+### 标准布局容器 StandardContainer
+
+双标签；无装饰样式（无边框/背景/内边距），仅管理排列方向与尺寸。
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| direction | String | `'column'` | `column` 纵向 / `row` 横向 |
+| size | Number | `100` | 占父容器主轴百分比（0-100） |
+| height / width | Number | `null` | 显式高宽（px），优先级高于 size |
+
+```html
+<standard-container direction="column" height="420px">
+  <standard-container :size="60">上</standard-container>
+  <standard-container :size="40" direction="row">
+    <standard-container :size="30">左</standard-container>
+    <standard-container :size="70">右</standard-container>
+  </standard-container>
+</standard-container>
+```
+
+### 标准筛选栏 StandardFilterbar
+
+单标签。`v-model` 绑定 `searchBar`：`{ searchCondition, searchVariable, mainConditionCount }`。
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| search-bar | Object | 必填 | v-model 绑定配置对象 |
+| show-export | Boolean | `false` | 显示"导出"按钮 |
+| show-expand | Boolean | `true` | 显示"更多"（关闭后次区常显） |
+| show-advanced-query | Boolean | `false` | 以"高级查询"弹窗替代"更多" |
+| loading | Boolean | `false` | 查询按钮加载态 |
+| reset-trigger-search | Boolean | `false` | 重置后自动触发查询 |
+
+**事件（必接）**：`@search`；可选 `@export` / `@reset` / `@render-error`。
+
+**条件类型 `type`**：
 
-## 使用
+| type | 控件 | 说明 |
+| --- | --- | --- |
+| `text` | el-input | 输入框，回车即查询 |
+| `date` | el-date-picker | 年月日，`yyyy-MM-dd` |
+| `datetime` | el-date-picker | 年月日时分秒，`yyyy-MM-dd HH:mm:ss` |
+| `select` | el-select 单选 | 配 `selectSource` 静态选项或 `remote` 远程方法 |
+| `select-multi` | el-select 多选 | 绑定值必须为数组 |
 
-### 方式一：全局注册（推荐）
+**条件配置字段**：`label`（标题）、`value`（键，必须存在于 searchVariable）、`type`、`isMain: 'Y'`（主区）、`placeholder`、`clearable`、`width`（数字 px 或 CSS 字符串）、`selectSource`、`remote`（函数或父组件方法名字符串）、`optionProps: { label, value }`。
+
+```html
+<standard-filterbar v-model="searchBar" show-export reset-trigger-search
+                    :loading="loading" @search="onSearch" @export="onExport" />
+```
 
 ```js
-import StandardComponents from '@addytse/standard-ui'
+searchBar: {
+  searchCondition: [
+    { label: '开始时间', value: 'startTime', type: 'datetime', isMain: 'Y', clearable: false },
+    { label: '工单编号', value: 'cmoLot', type: 'select', isMain: 'Y',
+      remote: 'remoteWorkCmo', optionProps: { label: 'CMO_LOT', value: 'CMO_LOT' } },
+    { label: '检验结果', value: 'cresult', type: 'select',
+      selectSource: [{ label: '全部', value: '-1' }, { label: '合格', value: '1' }] },
+  ],
+  searchVariable: { startTime: '', cmoLot: '', cresult: '-1' }, // key 与 value 一一对应，初始值即重置目标
+}
+```
+
+### 标准表单 StandardForm / StandardFormItem
+
+双标签，默认插槽放 `<standard-form-item>`。
+
+| 属性（Form） | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| model | Object | `{}` | v-model 表单数据 |
+| rules | Object | `null` | 校验规则（同 el-form） |
+| size | String | `'mini'` | 控件尺寸 |
+| label-position | String | `'right'` | label 位置 |
+| width | Number/String | `null` | 表单宽度（数字=px，如 `'600px'`） |
+
+| 属性（FormItem） | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| label | String | `''` | 标签文案（参与 label 宽度自动计算） |
+| prop | String | `''` | 校验字段名 |
+| span | Number | `24` | 栅格 1-24（**必须数字绑定 `:span="12"`**） |
+
+**对外方法（ref）**：`validate` / `resetFields` / `clearValidate`。
+
+```html
+<standard-form ref="editForm" :model="form" :rules="rules" width="600px">
+  <standard-form-item label="节点名称" prop="CNAME" :span="12">
+    <standard-input v-model="form.CNAME" placeholder="请输入节点名称" />
+  </standard-form-item>
+  <standard-form-item label="排序号" :span="12">
+    <el-input-number v-model="form.CSEQ" :min="1" :max="999" controls-position="right" />
+  </standard-form-item>
+  <standard-form-item label="备注">
+    <el-input v-model.trim="form.CREMARK" type="textarea" :rows="3" />
+  </standard-form-item>
+</standard-form>
+```
+
+### 标准半区 StandardHalfArea
+
+双标签，默认插槽放半区内容。
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| left | Boolean | `false` | 左半区：宽度由页面显式指定（`flex: 0 0 auto`） |
+| right | Boolean | `false` | 右半区：`flex: 1 1 0%` 占满剩余宽度 |
+| transparent | Boolean | `false` | 透明模式：不绘制卡片外观，仅保留布局 |
 
-Vue.use(StandardComponents)
+```html
+<section class="page-body">
+  <standard-half-area transparent :style="leftPanelStyle"><!-- 左 --></standard-half-area>
+  <standard-splitter v-model="leftPercent" unit="percent" @drag-end="recalculateAll" />
+  <standard-half-area right transparent><!-- 右 --></standard-half-area>
+</section>
 ```
 
-注册后所有页面模板可直接使用上述标签，无需 import：
+### 标准页面骨架 StandardPage
+
+双标签，默认插槽放整页内容（筛选区/内容区/弹窗）。根节点自带 16px 内边距 + 视口高度 + 白底 + 隐藏溢出 + 纵向 flex。
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| client | Boolean | `false` | 客户端模式高度 `calc(100vh - 29px)`；否则 `calc(100vh - 135px)` |
+| vertical | Boolean | `false` | 纵向分栏模式：插槽内容置于横向 flex 内容主体层（左树/左面板 + 右内容） |
 
 ```html
-<standard-button label="查询" type="primary" icon="el-icon-search" @click="onSearch" />
-<standard-table :table-data="tableData" :loading="loading" height="100%">
-  <standard-toolbar-left :buttons="toolbarButtons" />
-  <standard-column type="seq" title="序号" width="60" align="center" />
-  <standard-column field="name" title="名称" min-width="120" />
-  <standard-footer-right :current-page="currentPage" :page-size="pageSize"
-                         :total="total" @page-change="onPageChange" />
+<standard-page :client="isCilent">
+  <standard-filterbar v-model="searchBar" @search="onSearch" />
+  <standard-table ...><!-- 表格区 --></standard-table>
+</standard-page>
+```
+
+### 标准分割条 StandardSplitter
+
+单标签。拖拽改变左右框体宽度。
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| value | Number | `260` | v-model 绑定左侧宽度 |
+| unit | String | `'px'` | `px` / `percent` |
+| min-width | Number | `200` | px 模式最小宽度 |
+| max-ratio | Number | `0.6` | px 模式最大占容器比例 |
+| min-pixel | Number | `320` | percent 模式两侧最小像素 |
+| max-half-percent | Number | `45` | percent 模式单侧百分比上限 |
+
+**事件**：`@input`（拖拽中实时）、`@change`（拖拽结束）、`@drag-start` / `@drag-end`（拖拽结束重算表格）。
+
+### 标准表格 StandardTable（含 7 个子组件）
+
+双标签。数据接口：`table-data` 表格数据、`table-operation` 操作列按钮；区域内容全部通过插槽内子组件声明。
+
+**主组件属性**：
+
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| table-data | Array | `[]` | 表格数据（必填） |
+| table-operation | Array | `[]` | 操作列按钮 `[{ active, text, method, width, color }]`；`active` 支持布尔或函数 `(row, btn)` |
+| loading | Boolean | `false` | 加载态 |
+| height | String | `'100%'` | 表格高度 |
+| show-footer | Boolean | `false` | 显示底部栏（含 footer 子组件时自动显示） |
+| show-update-time | Boolean | `true` | 底部栏左侧"数据更新时间" |
+| show-checkbox | Boolean | `false` | 首列多选框 |
+| show-adjustment | Boolean | `false` | "调整"列设置按钮 |
+| footer-method | Function | `null` | 表尾合计方法 |
+| tree-config / row-config / menu-config | Object | `null` | 树形模式 / 行主键 / 右键菜单（vxe-table 原样透传） |
+
+**事件**：`@current-change`（行选中）、`@toggle-tree-expand`（树形展开变化）、`@selection-change`（多选变化）、`@menu-click`（右键菜单点击）、`@op-click`（操作列按钮点击）。
+**对外方法（ref）**：`recalculate()`、`setAllTreeExpand(expanded)`、`clearSelection()`、`getSelection()`、`setCurrentRow(row)`、`exportData(options)`。
+
+**子组件**：
+
+| 子组件 | 说明 |
+| --- | --- |
+| `<standard-toolbar-left :buttons>` | 工具栏左区；`buttons: [{ type, icon, text, title, method, show }]`，method 支持函数或方法名字符串；也支持默认插槽 |
+| `<standard-toolbar-right show-adjustment>` | 工具栏右区（插槽内容自动靠右） |
+| `<standard-toolbar-empty>` | 工具栏空占位（主组件内置，可省略） |
+| `<standard-column type/field/title/width/min-width/fixed/align/sortable/show-overflow/resizable/tree-node/formatter>` | 声明列；支持作用域插槽 `#default="{ row }"` |
+| `<standard-footer-left :text>` | 底部栏左侧文本 |
+| `<standard-footer-right :current-page :page-size :page-sizes :total :layout @page-change>` | 分页；`page-change` 参数 `{ currentPage, pageSize, type }` |
+| `<standard-footer-empty>` | 底部空占位（主组件内置，可省略） |
+
+**列宽/对齐约定（速查）**：
+
+| 列类型 | 建议列宽 | align |
+| --- | --- | --- |
+| 序号（type="seq"） | 60 | —（fixed="left"） |
+| 状态/单位/层级 | 80 | center |
+| 排序号 | 70 | center |
+| 操作人/检验人/修改人 | 90~100 | 左 |
+| 编码/类型/工序 | 110~130 | 编码 center，其余左 |
+| 时间类 | 150~170 | 左 |
+| 备注 | min-width 150~160 | 左 |
+| 树节点名称列 | min-width 220 | 左（tree-node + fixed="left"） |
+
+**用法示例**：
+
+```html
+<standard-table ref="mainTable" :table-data="tableData" :table-operation="tableOperation"
+                :loading="loading" :show-update-time="false" :footer-method="summaryMethod">
+  <standard-toolbar-left>
+    <standard-button type="primary" icon="el-icon-plus" label="新增" @click="onAdd" />
+  </standard-toolbar-left>
+  <standard-toolbar-right show-adjustment>
+    <standard-input v-model="keyword" placeholder="请输入关键字" @enter="onSearch" />
+  </standard-toolbar-right>
+  <standard-footer-left :text="footerText" />
+  <standard-footer-right
+    :current-page="pageParams.currentPage" :page-size="pageParams.pageSize"
+    :page-sizes="[10, 20, 50, 100]" :total="pageParams.totalResult"
+    @page-change="onPageChange"
+  />
+  <standard-column type="seq" title="序号" :width="60" :min-width="60" fixed="left" />
+  <standard-column field="CITEM_NO" title="产品型号" :min-width="120" sortable />
+  <standard-column field="CRESULT" title="检验结果" :width="100" :min-width="100" align="center">
+    <template #default="{ row }">
+      <el-tag v-if="row.CRESULT == 1" size="mini" type="success">合格</el-tag>
+      <el-tag v-else size="mini" type="danger">不合格</el-tag>
+    </template>
+  </standard-column>
 </standard-table>
 ```
 
-### 方式二：局部注册
+**树形模式**（需 `tree-config` + `row-config`，节点列加 `tree-node`）：
 
 ```js
-import StandardComponents from '@addytse/standard-ui'
+treeConfig: { transform: true, rowField: 'id', parentField: 'parentId', trigger: 'row', indent: 20 },
+rowConfig: { keyField: 'id' },   // 与 rowField 保持一致
+```
 
-export default {
-  components: {
-    'standard-table': StandardComponents.StandardTable,
-    'standard-column': StandardComponents.StandardTable.Column,
-    'standard-toolbar-left': StandardComponents.StandardTable.ToolbarLeft,
-    'standard-toolbar-right': StandardComponents.StandardTable.ToolbarRight,
-    'standard-footer-left': StandardComponents.StandardTable.FooterLeft,
-    'standard-footer-right': StandardComponents.StandardTable.FooterRight,
-    'standard-footer-empty': StandardComponents.StandardTable.FooterEmpty
-  }
-}
+### 标准页签 StandardTabs / StandardTabPane
+
+双标签，卡片样式内聚（tabs 头部与内容区联通为同一张卡片）。
+
+| 属性（Tabs） | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| value | String | `''` | v-model 当前激活 pane 的 name |
+| lazy | Boolean | `false` | 懒加载（首次切换到该 pane 才渲染内容） |
+
+```html
+<standard-tabs v-model="rightActiveTab" lazy @tab-click="onRightTabClick">
+  <standard-tab-pane label="检验项目明细" name="item">
+    <standard-table ...><!-- 内容 --></standard-table>
+  </standard-tab-pane>
+  <standard-tab-pane label="检验记录" name="record"><!-- ... --></standard-tab-pane>
+</standard-tabs>
 ```
 
-## 各组件详细用法
+### 标准树 StandardTree
+
+单标签。顶部搜索栏 + 树主体 + 底部"全部展开/收起"按钮，卡片外观内置。
 
-各组件完整 API（属性、事件、方法、示例）见原项目文档 `src/components/README.md`（已随包源码保留在 Git 仓库的 `src/components/README.md`）。
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| tree-data | Array | `[]` | v-model 树数据（嵌套结构） |
+| tree-props | Object | `{label:'label',children:'children'}` | 字段映射 |
+| node-key | String | `'id'` | 节点唯一键字段 |
+| default-expanded-keys | Array | `[]` | 默认展开节点 |
+| search-placeholder | String | `'请输入节点名称搜索'` | 搜索框占位 |
+| transparent | Boolean | `false` | 透明模式：嵌入 `standard-half-area` 时去除自身卡片外观并占满父容器 |
+
+**事件**：`@node-click` / `@node-expand` / `@node-collapse`。
+**对外方法（ref）**：`setCurrentKey(key)`（设置/取消选中）、`filter(keyword)`（过滤树）。
+
+```html
+<standard-tree ref="configTree" v-model="treeData" node-key="id" :default-expanded-keys="[1]"
+               transparent @node-click="handleNodeClick" />
+```
+
+数据格式（节点显示文本取 `tree-props` 的 label 字段，子节点放 `tree-props` 的 children 字段）：
+
+```js
+treeData: [
+  { id: 1, label: '首件检验', children: [
+    { id: 11, label: '电压测试' },
+    { id: 12, label: '外观检验' },
+  ] },
+  { id: 2, label: '巡检检验' },   // 叶子节点可不写 children
+]
+```
+
+## 组件必接事件速查
+
+**必接事件清单**：`standard-filterbar` 的 `@search`；`standard-footer-right` 的 `@page-change`；`standard-dialog` 的 `@confirm`；`standard-splitter` 的 `@drag-end`（联动页）；`standard-tree` 的 `@node-click`。
 
 ## 开发与构建
 
@@ -109,7 +496,28 @@ npm run build
 
 - 使用 `@vue/cli-service` 的 lib 模式打包，输出 `dist/standard-ui.common.js`（CommonJS）与 `dist/standard-ui.umd.min.js`（UMD，供 CDN）。
 - 样式（scss）已内联进 JS 产物，使用方无需单独引入 css。
-- `vue` 由构建工具自动 external；组件代码不 import 任何第三方库，element-ui / vxe-table 均通过全局注册的组件标签使用。
+- `vue` 由构建工具自动 external；element-ui 除 `StandardTabs` 的 `TabPane` 子组件（`import { TabPane } from 'element-ui'`）外均通过全局注册的组件标签使用。`src/index.js` 会 import vxe-table（仅用于 install 时执行 `VXETable.setup({ zIndex: 5000 })`）。因此 element-ui、vxe-table 及其运行时依赖 `@vxe-ui/core` 的部分代码会打包进 dist 产物。
+
+## vxe-table 3.24 升级说明（使用方须知）
+
+本包 peerDependencies 已由 `^3.8.0` 提升为 `^3.24.0`，请将使用方项目的 vxe-table 同步升级：
+
+```bash
+npm i vxe-table@^3.24.0
+```
+
+- **使用方式没有区别**：`import VXETable from 'vxe-table'` + `import 'vxe-table/lib/style.css'` + `Vue.use(VXETable)` 的注册写法在 3.24 与 3.8 完全一致，无需改动；本包所有组件的 API（属性/事件/插槽）均无变化。
+- **StandardTable 用到的 vxe-table 能力全部兼容**：`z-index` 属性、`menu-config`、`tree-config`、`row-config`、多选框、`sortable`、固定列、树形展开、右键菜单等在 3.24 均可用，包内代码已完成适配。
+- **⚠️ vxe-table 3.24 的上游坑（必须知道）**：vxe-table 3.24 的代码运行时依赖新拆分的 `@vxe-ui/core` 包，但其 `package.json` 未声明该依赖，直接安装 vxe-table@3.24.x 的项目在运行时/打包时会报 `Cannot find module '@vxe-ui/core'`。本包已在 `dependencies` 中声明 `@vxe-ui/core ^3.4.24`，随本包安装自动带上；**若使用方项目还直接使用 vxe-table（且不依赖本包），需自行 `npm i @vxe-ui/core@^3.4.24`**。
+- **从 3.6/3.8 直接升级到 3.24 时，使用方直接使用 vxe-table 的地方需注意**（不涉及本包组件）：
+  - 纵向/横向虚拟滚动默认关闭（v3.7 起 `scroll-y.enabled` / `scroll-x.enabled` 默认 `false`），大列表渲染行数变多；如依赖虚拟滚动请自行 `VXETable.setup({ scrollY: { enabled: true }, scrollX: { enabled: true } })` 开启。
+  - `tree-config` 旧参数 `line` / `hasChild` / `children` 已更名为 `showLine` / `hasChildField` / `childrenField`（旧参数保留兼容，新代码建议直接使用新参数）。
+  - vxe 内置图标 `fixed` / `fixed-fill` 更名为 `fixed-left` / `fixed-left-fill`（此项不向下兼容，仅在使用方直接用到 vxe 图标时受影响）。
+  - 渲染器 `menus` / `commands` / `formats` 的注册由传函数改为传对象（旧方式保留兼容）。
+  - 列宽拖拽手柄 DOM 类名 `.vxe-resizable` 更名为 `.vxe-table--resizable-col-bar`；右键菜单分组容器类名 `.vxe-context-menu--option-wrapper` 更名为 `.vxe-table--context-menu-group-wrapper`（v3.24 起）。**仅影响直接对这些 DOM 类名写 CSS/选择器的使用方**，本包内部样式与逻辑已同时兼容新旧类名。
+- **z-index 说明**：本包 install 时执行 `VXETable.setup({ zIndex: 5000 })`，但由于 vxe-table 被打包进 dist 产物（未 external），该设置只作用于产物内的副本；使用方项目自身的 vxe-table 全局配置不受影响。若需要提升 vxe-table 弹层（右键菜单/tooltip）层级，请在使用方 `main.js` 中自行 `VXETable.setup({ zIndex: 5000 })`，或直接给 `<standard-table>` 传 `z-index` 属性（原样透传给 vxe-table）。vxe-table 3.24 全局默认 z-index 仍为 999，与 3.8 一致。
+- **样式仍需自行引入**：`vxe-table/lib/style.css` 照常由使用方引入，本包不内置 vxe-table 样式。
+- **Vue 2.6 兼容**：vxe-table 3.24 未引入 `@vue/composition-api`，Vue 2.6 环境可直接使用（3.24 为 vxe-table 的 Vue 2 线最终版本，4.x 仅支持 Vue 3）。
 
 ## 发布到 npm
 
@@ -129,7 +537,3 @@ npm publish
 - 发布内容由 `package.json` 的 `files: ["dist"]` 控制，仅发布构建产物与 README，源码不入包。
 - 包名已采用小写形式，符合 npm 公共源命名规范，可直接 `npm publish` 发布。
 - 版本更新遵循 semver：`npm version patch|minor|major` 后再次 `npm publish`。
-
-## 与 IPQC-Web 源码的同步
-
-本包源码目录 `src/components/` 与 `IPQC-Web前端/src/components/` 中的组件一一对应。组件有改动时，复制对应组件目录到本仓库并升级版本号重新发布。