@gwall/std-ui

@gwall/std-ui

巨沃标准 Vue 3 组件库。由低代码平台物料组件（gw-*）标准化改造而来：保留能力、改变调用方式—— 全部组件为标准 Vue 3 + TypeScript 组件（defineProps / defineEmits / v-model / defineExpose）， 去除低代码运行时依赖（变量池、new Function 事件脚本、宿主全局对象），视觉与交互和原组件保持一致。

• Vue ^3.2.47 + Element Plus ^2.7.3 + @element-plus/icons-vue ^2.1.0（peer 依赖）
• ESM 产物 + preserveModules，支持按需引入与 tree shaking
• 第一批组件：GwStdButton / GwStdInput / GwStdSelect
• 第二批组件：GwStdForm / GwStdTable / GwStdDialog
• 第三批组件：GwStdTree / GwStdUpload / GwStdTabs
• 第四批组件：GwStdRadio / GwStdCheckbox / GwStdSwitch / GwStdGroupCheckbox
• 第五批组件：GwStdDate / GwStdTimePicker / GwStdCascader
• 第六批组件：GwStdRate / GwStdSlider / GwStdTag / GwStdNumber
• 第七批组件：GwStdAlert / GwStdColorPicker / GwStdMark / GwStdDivider / GwStdIcon / GwStdText
• 第八批组件：GwStdProvinceCity / GwStdRichEditor / GwStdDynamicSelect / GwStdCustomData
• 第九批组件：GwStdSqlRuleInput
• 第十批组件：GwStdSelectVirtualized / GwStdDynamicConfig
• 第十一批组件：GwStdFileUpload / GwStdPictureUpload / GwStdUploadManage
• 第十二批组件：GwStdCard / GwStdDrawer / GwStdFormDrawer / GwStdVerticalTabs / GwStdIterator / GwStdDivideContainer / GwStdElevatorTabs
• 第十三批组件：GwStdListCard / GwStdPhotoWall / GwStdCronExpression / GwStdFlowChart
• 第十四批组件：GwStdProgress / GwStdTimeline / GwStdSteps / GwStdDeliverySteps / GwStdQrcode
• 第十五批组件：GwStdCarousel / GwStdRoleCard / GwStdDimensionCard / GwStdSquareData / GwStdMediaGallery / GwStdDataVisualization
• 第十六批组件：GwStdGroupList / GwStdDataMapping / GwStdPermissionTransfer / GwStdCalendar / GwStdMap / GwStdListGenerate
• 第十七批组件：GwStdPagination / GwStdImage / GwStdCardMsg / GwStdCustomCard / GwStdCustomInfo
• 第十八批组件：GwStdScanTable / GwStdExcelChart / GwStdComment / GwStdLinkForm（GwStdExcelChart 已于后续移除）
• 第十九批组件：GwStdTrackingNumber / GwStdNumberCard / GwStdUserCard / GwStdNotification / GwStdDataList
• 第二十批组件：GwStdBarChart / GwStdLineChart / GwStdPieChart / GwStdProgressChart / GwStdQuickAccess（引入 echarts peer 依赖）
• 第二十一批组件：GwStdHtmlText / GwStdIconButtonGroup / GwStdIframe / GwStdElectronicScale / GwStdApiDebug / GwStdCodeEditor（引入 codemirror peer 依赖）
• 第二十二批组件：GwStdDropdownButton / GwStdButtonGroup / GwStdExpression / GwStdLogicDesignerLog（引入 panzoom peer 依赖）
• 第二十三批组件：GwStdScreenRecord / GwStdRapidModeling（projectDesigner 因依赖平台宿主注入的设计器本体不可迁移，跳过）
• 第二十四批组件：GwStdChartTitle / GwStdTimeSelect / GwStdMenuIcon / GwStdLogsShow / GwStdMultilevelTable / GwStdMagnifier（前两者由图表件内部件公开化；multilevelTable 原组件即未实现、magnifier 原组件为半成品，均按现状保留能力补全）
• 第二十五批组件：GwStdAnnexShow / GwStdElevatorFloatDetails / GwStdProjectDesigner（projectDesigner 为注入壳：设计器本体由宿主注入，diff/合并逻辑保留为纯函数）
• 第二十六批组件：GwStdMagnifyingGlass / GwStdMagnifyingGlassNew / GwStdDragVariables（两个放大镜 + 可拖拽变量列表；magnifyGlassNew 完整弹窗渲染低代码页面改 #dialog 插槽注入，联合搜索参数保留为 buildOrSearchParams 纯函数）
• 第二十七批组件：GwStdGridLayout / GwStdChartContainer（栅格表单容器 + 仪表盘网格容器；格子内低代码指标组件改作用域插槽，新增 peer 依赖 vue-grid-layout；同批 flex 布局容器 GwStdLayout 已于第三十二批移除）
• 第二十八批组件：GwStdBillsSetting / GwStdPageConfigPanel（单据设置页 + 页面配置面板；原 billsSetting 其余 7 个配置页已注释停用不迁移，经插槽扩展；写死配置接口改 fetchConfig/saveConfig 注入）
• 第二十九批组件：GwStdQueryModule / GwStdQueryCondition（查询模块 + 条件行；0.0.3 起查询模块为内核 1:1 移植版——原低代码运行时内核约万行整体搬运，方案管理/常用条件/字段显隐排序/折叠锁定/联动查询原行为保留，声明式 groups prop 直传字段池，原变量池脚本改 @search 等事件，方案持久化接口经 api prop 注入；GwStdQueryCondition 条件行保留为独立小组件）
• 第三十批组件：GwStdLogicDesigner / GwStdLogicNodePanel / GwStdLogicLineConfig / GwStdLogicCondition / GwStdLogicContextMenu（逻辑设计器 jsPlumb 画布：组件拖入、连线、容器、框选复制粘贴、撤销、自动排版、缩放平移；getComponent/getFlowConfig/updateFlowConfig/executeFlow 四接口改 props + 函数注入，节点表单改 #node-form 插槽）
• 第三十一批组件：GwStdNewTable（标准列表，原 gw-newTable 全家族：el-table 标准模式 + fastMode VTable 性能模式、九类行内编辑器、表头自定义/筛选、右键菜单、同步/异步/前端勾选导出、合计、子表展开、标记底色、跨页全选、拖拽排序、行列锁定；全部取数与配置持久化改函数注入 props，事件脚本改 emits，setEvent 16 方法改 defineExpose；新增 peer 依赖 @visactor/vue-vtable、@visactor/vtable-editors）
• 第三十二批组件：GwStdNewTableConfig 列表配置面板 + createGwStdTableConfigStore 工厂（原 gw-newTable 设计器属性面板链 13 文件整体移植：设计列表/字段勾选/查询条件配置/列属性/按钮配置/浮窗配置/历史记录；variablePoolStore 改工厂伪造，历史记录等 11 接口经 api prop 注入默认同域 fetch fail-soft，vuedraggable 改 sortablejs，图标字体复用 query-module iconfont 资产）；同时移除 GwStdLayout（弹性布局容器，宿主可自行以 flex 容器替代，GwStdGridLayout 不受影响）
• 第三十三批组件：GwStdImportDialog 数据导入弹窗（原 componentsExtra/Upload/UploadDialog：拖拽多选上传 + 重名/类型/大小/数量校验 + 导入模板下载 + 上传到服务器；后端 apiName 与非标 api 改 uploadRequest 函数注入）

安装

npm install @gwall/std-ui

本地更新并重新安装同版本 .tgz 后，需重启宿主 Vite 并强制重建依赖缓存：npm run dev -- --force。仅刷新浏览器可能混用旧预编译组件 JS 与新 style.css，造成导航按钮边框、操作换行、抽屉布局等样式失效。

宿主项目需自行安装并注册 peer 依赖：

npm install vue element-plus @element-plus/icons-vue
# 图表件（GwStdBarChart / GwStdLineChart / GwStdPieChart）额外需要 echarts ^5
npm install echarts
# 代码编辑器（GwStdCodeEditor）额外需要 codemirror ^5 与其 Vue3 包装
npm install codemirror@^5 codemirror-editor-vue3
# 连线画布：数据映射（GwStdDataMapping）需要 jsplumb；逻辑流程日志（GwStdLogicDesignerLog）需要 jsplumb + panzoom
npm install jsplumb panzoom

重要：组件模板内部使用 el-button / el-select 等全局组件，宿主必须全局注册 Element Plus （app.use(ElementPlus)），仅用 unplugin 按需解析器无法命中组件库内部的 el-* 组件。

引入方式

全量引入

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import '@gwall/std-ui/style.css'; // 组件库样式（button/form 等扩展样式汇总）
import App from './App.vue';

createApp(App).use(ElementPlus).mount('#app');

<script setup lang="ts">
import { GwStdButton, GwStdInput, GwStdSelect } from '@gwall/std-ui';
</script>

按需引入（推荐）

<script setup lang="ts">
import { GwStdButton } from '@gwall/std-ui/button';
import { GwStdInput } from '@gwall/std-ui/input';
import { GwStdSelect } from '@gwall/std-ui/select';
import '@gwall/std-ui/style.css'; // 样式一次引入即可（体积很小）
</script>

按需入口：@gwall/std-ui/button、@gwall/std-ui/input、@gwall/std-ui/select、 @gwall/std-ui/form、@gwall/std-ui/table、@gwall/std-ui/dialog、 @gwall/std-ui/tree、@gwall/std-ui/upload、@gwall/std-ui/tabs、 @gwall/std-ui/radio、@gwall/std-ui/checkbox、@gwall/std-ui/switch、@gwall/std-ui/group-checkbox、 @gwall/std-ui/date、@gwall/std-ui/time-picker、@gwall/std-ui/cascader、 @gwall/std-ui/rate、@gwall/std-ui/slider、@gwall/std-ui/tag、@gwall/std-ui/number、 @gwall/std-ui/alert、@gwall/std-ui/color-picker、@gwall/std-ui/mark、@gwall/std-ui/divider、 @gwall/std-ui/icon、@gwall/std-ui/text、 @gwall/std-ui/province-city、@gwall/std-ui/rich-editor、@gwall/std-ui/dynamic-select、@gwall/std-ui/custom-data、 @gwall/std-ui/sql-rule-input、@gwall/std-ui/select-virtualized、@gwall/std-ui/dynamic-config、 @gwall/std-ui/file-upload、@gwall/std-ui/picture-upload、@gwall/std-ui/upload-manage、 @gwall/std-ui/card、@gwall/std-ui/drawer、@gwall/std-ui/form-drawer、@gwall/std-ui/vertical-tabs、 @gwall/std-ui/iterator、@gwall/std-ui/divide-container、@gwall/std-ui/elevator-tabs、 @gwall/std-ui/list-card、@gwall/std-ui/photo-wall、@gwall/std-ui/cron-expression、@gwall/std-ui/flow-chart、 @gwall/std-ui/progress、@gwall/std-ui/timeline、@gwall/std-ui/steps、@gwall/std-ui/delivery-steps、@gwall/std-ui/qrcode、 @gwall/std-ui/carousel、@gwall/std-ui/role-card、@gwall/std-ui/dimension-card、@gwall/std-ui/square-data、 @gwall/std-ui/media-gallery、@gwall/std-ui/data-visualization、 @gwall/std-ui/group-list、@gwall/std-ui/data-mapping、@gwall/std-ui/permission-transfer、 @gwall/std-ui/calendar、@gwall/std-ui/map、@gwall/std-ui/list-generate、 @gwall/std-ui/pagination、@gwall/std-ui/image、@gwall/std-ui/card-msg、 @gwall/std-ui/custom-card、@gwall/std-ui/custom-info、 @gwall/std-ui/scan-table、 @gwall/std-ui/comment、@gwall/std-ui/link-form、 @gwall/std-ui/tracking-number、@gwall/std-ui/number-card、@gwall/std-ui/user-card、 @gwall/std-ui/notification、@gwall/std-ui/data-list、 @gwall/std-ui/bar-chart、@gwall/std-ui/line-chart、@gwall/std-ui/pie-chart、 @gwall/std-ui/progress-chart、@gwall/std-ui/quick-access、@gwall/std-ui/chart-shared（时段工具）、 @gwall/std-ui/html-text、@gwall/std-ui/icon-button-group、@gwall/std-ui/iframe、 @gwall/std-ui/electronic-scale、@gwall/std-ui/api-debug、@gwall/std-ui/code-editor、 @gwall/std-ui/dropdown-button、@gwall/std-ui/button-group、@gwall/std-ui/expression、@gwall/std-ui/logic-designer-log、 @gwall/std-ui/screen-record、@gwall/std-ui/rapid-modeling、 @gwall/std-ui/chart-title、@gwall/std-ui/time-select、@gwall/std-ui/menu-icon、 @gwall/std-ui/logs-show、@gwall/std-ui/multilevel-table、@gwall/std-ui/magnifier、 @gwall/std-ui/annex-show、@gwall/std-ui/elevator-float-details、@gwall/std-ui/project-designer、 @gwall/std-ui/magnifying-glass、@gwall/std-ui/magnifying-glass-new、@gwall/std-ui/drag-variables、 @gwall/std-ui/grid-layout、@gwall/std-ui/chart-container、 @gwall/std-ui/page-config-panel、@gwall/std-ui/bills-setting、@gwall/std-ui/query-module、@gwall/std-ui/logic-designer、 @gwall/std-ui/new-table、@gwall/std-ui/import-dialog， 未引入的组件模块会被 tree shaking 移除。

图标字体说明

组件沿用低代码平台的图标 class 约定：gicon gicon-xxx。gicon / gwicon 字体文件不在本包内， 由宿主环境提供（与原平台一致）。传入 'gicon-xxx' 图标名时：

• 宿主已引入平台字体 → 正常渲染；
• 未引入 → 图标位为空，不影响其它功能。

element-plus 图标（组件对象，如 :icon="Search"）与图片地址（http(s):// / data:image）不依赖平台字体，开箱可用。

GwStdButton 按钮

由 gw-button 改造。el-button 全部能力透传，另扩展平台按钮类型、下拉模式、浮标提示、遮挡检测。

<GwStdButton type="primary" :loading="saving" @click="onSave">保存</GwStdButton>

<GwStdButton
  type="primary"
  :items="[{ label: '新增' }, { label: '编辑', helpText: '编辑选中行' }, { label: '删除', disabled: true }]"
  @select="(item, index) => console.log(item, index)"
>更多操作</GwStdButton>

Props

GwStdButtonDropdownItem：{ label: string; icon?: string | Component; disabled?: boolean; helpText?: string }

Emits

click(MouseEvent)、select(item, index)、covered-change(boolean)

GwStdInput 输入框

由 gw-input 改造。text / textarea / number 三态，数值过滤与精度格式化、可锁定、可选内置表单项。

<!-- 普通用法 -->
<GwStdInput v-model="name" placeholder="请输入名称" clearable />

<!-- 数值 + 精度：type '1' 截断 / '2' 四舍五入，失焦生效 -->
<GwStdInput v-model="price" type="number" :precision="{ value: 2, type: '2' }" :default-precision="2" />

<!-- 内置表单项：传 label / rule / rules / name 任意一项即渲染 el-form-item 结构 -->
<GwStdInput v-model="email" label="邮箱" name="email" rule="email-req" required />

<!-- 可锁定（原 inputInlineLock）：有值才可锁定，v-model:locked 受控 -->
<GwStdInput v-model="amount" lockable v-model:locked="locked" />

Props（常用）

rule 支持低代码全部内置规则：required、email、phone、idCard、length、date、url、price、 ip、zipCode、chinese 等，加 -req 后缀表示必填版（如 email-req）；rules 可传 element-plus FormItemRule 叠加自定义校验。name 即 el-form-item 的 prop，配合 el-form 的 model 与 validate() 使用。

Emits

update:modelValue、update:locked、change、focus、blur、enter、prefix-click、suffix-click、clear

Expose

focus()、blur()

GwStdSelect 下拉选择

由 gw-select 改造。单选/多选/限选、色点、折叠标签、底部全选/清空/反选、分组过滤、默认选中、类型归一化。

<!-- 基础 -->
<GwStdSelect v-model="status" :options="statusOptions" label="状态" placeholder="请选择" />

<!-- 带色点：选项携带 colors 字段即自动展示 -->
<GwStdSelect v-model="status" :options="[{ label: '待处理', value: '1', colors: '#f56c6c' }]" />

<!-- 多选 + 折叠标签 + 默认全选 -->
<GwStdSelect v-model="tags" :options="options" multiple collapse-tags :max-collapse-tags="2"
  collapse-tags-tooltip select-all-default />

<!-- 分组过滤：选项 groupcode 命中 filterCodes 才显示（原 filterCode 变量池版） -->
<GwStdSelect v-model="v" :options="options" :filter-codes="['status']" />

<!-- 值类型归一化：选项值与 v-model 均为 number -->
<GwStdSelect v-model="num" :options="options" value-type="number" />

Props（常用）

Emits

update:modelValue、change、focus、blur、visible-change、remove-tag、clear、enter

Expose

focus()、getSelectedOption()（按当前值返回选中的选项对象，多选返回数组）

远程数据源（原 bindData/bindType 的替代）

原组件的字典 / 数据源远程加载依赖平台宿主（Request、G.top().G.sysDictOptions），标准版由调用方拉取后传入 options：

<script setup lang="ts">
import { ref } from 'vue';
import { GwStdSelect } from '@gwall/std-ui/select';
import { getDict } from '@/api'; // 业务侧接口

const options = ref([]);
const loadOptions = async () => {
	options.value = await getDict('warehouse'); // [{ label, value, colors }]
};
</script>

<template>
	<GwStdSelect v-model="warehouse" :options="options" label="仓库"
		select-first @focus="loadOptions" @visible-change="(v) => v && loadOptions()" />
</template>

GwStdForm 动态表单（第二批，原 gw-dynamic-form）

配置驱动的动态表单：一份 fields 配置渲染整表，内置校验、回车流转、分组折叠与锚点导航、业务周格式日期。

<script setup lang="ts">
import { ref } from 'vue';
import { GwStdForm } from '@gwall/std-ui/form';
import type { GwStdFormFieldGroup } from '@gwall/std-ui/form';

const formData = ref<Record<string, any>>({});
const fields: GwStdFormFieldGroup[] = [
	{
		group: '基础信息',
		list: [
			{ key: 'skuCode', name: '商品编码', required: true, default: 'SKU-001' },
			{ key: 'qty', name: '数量', type: 'integer' },
			{ key: 'status', name: '状态', type: 'select', options: [{ label: '待处理', value: '1' }] },
		],
	},
	{
		group: '补充信息',
		list: [
			{ key: 'yearWeek', name: '年周', type: 'date', format: 'yyyy-ww' }, // 业务周格式
			{ key: 'frozen', name: '冻结', type: 'switch', options: { activeValue: '1', inactiveValue: '0' } },
		],
	},
];
</script>

<template>
	<GwStdForm ref="formRef" v-model="formData" :fields="fields" is-group :row-number="3" />
</template>

字段类型（GwStdFormField.type）

input（默认）/ password / letter（仅字母）/ integer（仅整数）/ number（数值，失焦修正）/ select / selectAdd（多选可创建）/ date / dateTime / time / switch / text（纯展示）； date / dateTime 支持 format: 'yyyy-ww' | 'yyyyww' | 'yyyy-WW' | 'yyyyWW' 业务周格式与 isRange 范围模式。

Props（常用）

Emits / Expose

• emits：update:modelValue、change(key, value)、enter(key)、enter-complete(values)（回车流转到末尾且全部校验通过）、reset
• expose：reset()（恢复 default 配置值）、submitForm(): Promise<values | false>、validate()、validateField(key)、clearValidate()、focusField(key)、getFormModel()

GwStdTable 表格（第二批，原 gw-table）

列配置驱动的表格：格式化列、行内编辑、可点击列、switch 列、操作列、多选/单选、跨页序号、受控分页。 数据与分页完全受控（原内置 Request 远程取数移除，由调用方请求后传入）。

<script setup lang="ts">
import { ref, computed } from 'vue';
import { GwStdTable } from '@gwall/std-ui/table';
import type { GwStdTableColumn } from '@gwall/std-ui/table';

const columns: GwStdTableColumn[] = [
	{ prop: 'skuCode', label: '商品编码', width: 130 },
	{ prop: 'status', label: '状态', formatType: 'select', format: '1:待处理/2:已完成', width: 100 },
	{ prop: 'qty', label: '数量', formatType: 'precision', format: '2', width: 90 },
	{ prop: 'enabled', label: '启停', formatType: 'switch', width: 80 },
	{ prop: 'createTime', label: '创建时间', formatType: 'time', format: 'yyyy-MM-dd HH:mm' },
	{ prop: 'remark', label: '备注', editable: true },
];
const pageNum = ref(1);
const pageSize = ref(10);
</script>

<template>
	<GwStdTable
		:data="rows" :columns="columns" selection is-index
		:operate-items="[{ label: '编辑' }]"
		:total="total" v-model:page-num="pageNum" v-model:page-size="pageSize"
		@operate="(row, item) => {}" @current-change="loadData"
	/>
</template>

列配置（GwStdTableColumn）

prop / label / width / minWidth / fixed / align / sortable / hidden（原 ishidden 'Y'）/ editable（原 isedit 'Y'，行内 el-input）/ clickable（原 clickHandle，蓝字加粗 + column-click 事件）/ formatType：select（'a:1/b:2' 键值映射）、image（首图 + 预览）、time（日期格式化）、 fieldStr（固定文本）、precision（小数位）、switch（'1'/'0' 开关）。

Props（常用）

Emits / Expose

• emits：update:pageNum、update:pageSize、size-change、current-change、selection-change、select、select-all、 row-click（自动切换选中态）、row-dblclick、cell-click、cell-dblclick、header-dragend、 column-click、column-switch、cell-change、operate
• expose：getSelection()、getSelectedPrimaryKeys(fields?)、toggleRowSelection(row, selected?)、 clearSelection()、toggleAllSelection()、setCurrentRow(row)、doLayout()、getTableRef()

GwStdDialog 弹窗（第二批，原 gw-dialog）

基于 el-dialog 实现的原 gw-dialog 视觉与行为：头部 44px 底部分隔线、底部 40px 按钮区、 buttonsConfig 底部按钮（'取消'/'关闭' 自动关闭）、btnPosition 对齐、拖拽记位。

<script setup lang="ts">
import { ref } from 'vue';
import { GwStdDialog } from '@gwall/std-ui/dialog';
import type { GwStdDialogButtonItem } from '@gwall/std-ui/dialog';

const visible = ref(false);
const buttons: GwStdDialogButtonItem[] = [
	{ label: '关闭' },                       // label 为'取消'/'关闭'时点击自动关闭
	{ label: '保存', type: 'primary' },      // 其余按钮抛 btn-click
];
</script>

<template>
	<GwStdDialog v-model="visible" title="订单详情" :width="600" :items="buttons" draggable @btn-click="onBtn">
		<p>内容</p>
	</GwStdDialog>
</template>

Props（常用）

Emits / 插槽

• emits：update:modelValue、open、opened、close、closed、confirm（默认确定按钮）、 btn-click(item, index)、beforeClose(done)
• 插槽：default（内容）、footer（完全自定义底部）、header（with-header=false 时）

GwStdTree 虚拟滚动树（第三批，原 gw-tree）

基于 el-tree-v2 的虚拟滚动大树组件，保留原组件全部交互：自管理复选框（父子联动/半选）、 过滤（isFilter + filterShowChildren）、目录/叶子图标分流、label 后缀字段、右键菜单（支持二级）、 高亮字段、单击/双击分流（300ms 检测）、容器高度自适应（ResizeObserver）。

万级节点性能设计完整保留：内部以 WeakMap 按对象身份分配唯一 key（防止业务 key 重复导致勾选串联）、 markRaw 阻止节点被深层代理、勾选态用 Set 自底向上推导。

<script setup lang="ts">
import { ref } from 'vue';
import { GwStdTree } from '@gwall/std-ui/tree';
import type { GwStdTreeContextItem } from '@gwall/std-ui/tree';

const treeData = ref<any[]>([
	{ id: 'area-sh', label: '华东区域', isDir: true, children: [
		{ id: 'wh-sh', label: '上海一号仓', checked: true },
	] },
]);

const contextItems: GwStdTreeContextItem[] = [
	{ label: '新增子节点' },
	{ label: '更多', children: [{ label: '删除' }] },
];
</script>

<template>
	<div style="height: 300px">
		<GwStdTree
			node-key="id"
			:data="treeData"
			show-checkbox
			is-filter
			show-icon
			directory-icon="gicon-wenjianjia"
			:context-items="contextItems"
			@check-change="(nodes, keys) => console.log(keys)"
		/>
	</div>
</template>

Props（常用）

容器高度自适应：组件内部用 ResizeObserver 取父级高度驱动 el-tree-v2 滚动区（外层给固定高度即可）。

Emits / Expose

• emits：node-click(node)、node-dblclick(node)、check-change(checkedNodes, checkedKeys)、 context-select(item, parentItem, node)
• expose：getCheckedNodes / getCheckedKeys / setCheckedKeys / setCurrentKey / filter(text) / updateNode(partialData)（按业务 key 局部更新）/ getTreeRef（el-tree-v2 实例）

GwStdUpload 导入上传（第三批，原 gw-upload）

导入/上传按钮 + 弹窗确认 + 文件校验 + 模板下载。上传请求由调用方注入（uploadRequest prop）， 替代原组件对宿主 Request 的依赖；响应为文件流时自动下载（Content-Disposition 文件名解析、 扩展名补全），响应为 JSON 时按平台 {success, data} 结构处理。

<script setup lang="ts">
import { ref } from 'vue';
import { GwStdUpload } from '@gwall/std-ui/upload';
import type { GwStdUploadFile } from '@gwall/std-ui/upload';
import { myUploadApi } from '@/api';

const files = ref<GwStdUploadFile[]>([]);
const uploadRequest = (formData: FormData) => myUploadApi(formData); // 返回 {success, data:[{fileid,url,name}]}
</script>

<template>
	<GwStdUpload
		v-model="files"
		label="导入Excel"
		type="primary"
		file-type=".xls,.xlsx"
		:file-size="{ value: 10, type: 'MB' }"
		:upload-request="uploadRequest"
		@success="(res) => console.log(res)"
	/>
</template>

Props（常用）

Emits / Expose

• emits：before-upload(done)（打开弹窗前，调 done() 继续）、success(响应)、error、 pop-submit(files)（autoUpload=false）、remove(file, index)、update:modelValue
• expose：open()（直接开弹窗）、submit()、clearFiles()、getFileIds()（fileid 逗号串）

GwStdTabs 页签（第三批，原 gw-tab）

el-tabs 底座 + 原 tab-container 视觉（选中色/加粗/下划线高度/间距全部可配）， 支持配置驱动（tabs + 具名插槽）与 default 插槽（自行放置 el-tab-pane）双模式。

<script setup lang="ts">
import { ref } from 'vue';
import { GwStdTabs } from '@gwall/std-ui/tabs';
import type { GwStdTabItem } from '@gwall/std-ui/tabs';

const active = ref('1');
const tabs: GwStdTabItem[] = [
	{ label: '基本信息', name: '1' },
	{ label: '操作日志', name: '2', lazy: true },
];
</script>

<template>
	<GwStdTabs v-model="active" :tabs="tabs" :line-height="40" :font-size="12" active-color="#409eff" active-bold>
		<template #tab-1><div>页签一</div></template>
		<template #tab-2><div>页签二</div></template>
	</GwStdTabs>
</template>

Props（常用）

插槽

• 配置驱动：#tab-{name} 或 #tab-{index+1}（作用域含 {tab, index}）
• default：无 tabs 配置时自行放置 el-tab-pane

GwStdRadio / GwStdCheckbox / GwStdSwitch / GwStdGroupCheckbox（第四批）

第四批选择类组件：GwStdRadio（原 gw-radio）、GwStdCheckbox（原 gw-checkbox）、 GwStdSwitch（原 gw-switch）、GwStdGroupCheckbox（原 gw-group-checkbox 分组多选按钮组）。 均支持可选表单项包装（传 label / required / rules / name 时渲染 el-form-item，change 触发校验）。

<script setup lang="ts">
import { ref } from 'vue';
import { GwStdRadio } from '@gwall/std-ui/radio';
import { GwStdCheckbox } from '@gwall/std-ui/checkbox';
import { GwStdSwitch } from '@gwall/std-ui/switch';
import { GwStdGroupCheckbox } from '@gwall/std-ui/group-checkbox';
import type { GwStdGroupCheckboxGroup } from '@gwall/std-ui/group-checkbox';

const options = [
	{ label: '标准件', value: '1' },
	{ label: '定制品', value: '2' },
];

const radioValue = ref('');
const checkboxValue = ref<string[]>([]);
const switchValue = ref(false);
const groupValue = ref<Record<string, string>>({});
const groups: GwStdGroupCheckboxGroup[] = [
	{ title: '销售渠道', field: 'channel', list: [{ key: 'online', name: '线上商城' }] },
];
</script>

<template>
	<GwStdRadio v-model="radioValue" :options="options" label="类型" required select-first />
	<GwStdCheckbox v-model="checkboxValue" :options="options" label="标签" select-all />
	<GwStdSwitch v-model="switchValue" label="启用" active-value="1" inactive-value="0" />
	<GwStdGroupCheckbox v-model="groupValue" :groups="groups" label="适用范围" :group-columns="2" />
</template>

GwStdRadio Props（常用）

emits：update:modelValue、change；expose：focus()、getRadioRef()

GwStdCheckbox Props（常用）

emits：update:modelValue、change；expose：getCheckboxRef()

GwStdSwitch Props（常用）

emits：update:modelValue、change；expose：focus()、getSwitchRef()

GwStdGroupCheckbox Props（常用）

分组多选按钮组：组标题复选框支持整组全选/半选，组内为按钮式选项； 输出值为 { [分组输出键]: '值1,值2' }，输出键由 condition_alias_field 拼接（全空时 group_N）， bm/tj 为 alias/condition 的兼容别名；hideEmptyValue=true（默认）时无选中的分组键不出现在输出值中。

emits：update:modelValue、change(value, groups)（groups 含勾选态）； expose：getValue()、getGroups()

GwStdDate / GwStdTimePicker / GwStdCascader（第五批）

第五批日期时间与级联组件：GwStdDate（原 gw-date，业务周格式核心）、 GwStdTimePicker（原 gw-timePicker）、GwStdCascader（原 gw-cascader，末级值/全路径互转）。 均支持可选表单项包装（传 label / required / rules / name 时渲染 el-form-item）。 组件不再内置 el-config-provider locale 注入，多语言由宿主统一配置。

GwStdDate Props（常用）

emits：update:modelValue、change、focus、blur；expose：focus()、blur()、getPickerRef()

业务周格式说明：年周（yyyy-ww → 2026-31）星期日起始、1 月 1 日所在周为第 1 周； 月周（yyyy-WW → 2026-05）按当月日历格计算。月周格式不含月份，回显优先使用本次选择缓存的日期。

GwStdTimePicker Props（常用）

emits：update:modelValue、change、focus、blur；expose：focus()、blur()、getPickerRef()

GwStdCascader Props（常用）

级联选择核心能力：getLastVal 决定存储形态——true 时 v-model 只存末级值 （组件在 get 端自动递归查找全路径回显），false（默认）存全路径数组；多选为对应形态的数组。 字段名可通过 props-value / props-label / props-children 映射。

emits：update:modelValue、change（存储形态值）、focus、blur； expose：focus()、blur()、getPathByValue(value)、getCascaderRef()

<script setup lang="ts">
import { ref } from 'vue';
import { GwStdDate } from '@gwall/std-ui/date';
import { GwStdTimePicker } from '@gwall/std-ui/time-picker';
import { GwStdCascader } from '@gwall/std-ui/cascader';

const week = ref(''); // 业务年周：'2026-31'
const time = ref('');
const area = ref('yuhang'); // 末级值，自动找全父级路径回显
const options = [
	{ value: 'zhejiang', label: '浙江省', children: [{ value: 'yuhang', label: '余杭区' }] },
];
</script>

<template>
	<GwStdDate v-model="week" value-format="yyyy-ww" label="年周" />
	<GwStdTimePicker v-model="time" label="送达时间" current-date />
	<GwStdCascader v-model="area" :options="options" get-last-val label="所在区县" />
</template>

GwStdRate / GwStdSlider / GwStdTag / GwStdNumber（第六批）

第六批轻量件：GwStdRate（原 gw-rate 评分）、GwStdSlider（原 gw-slider 滑块）、 GwStdTag（原 gw-tag 标签，三模式 + 分组配色）、GwStdNumber（原 gw-number 计数器）。 均支持可选表单项包装（传 label / required / rules / name 时渲染 el-form-item）。

GwStdRate Props（常用）

emits：update:modelValue、change；expose：getRateRef()

GwStdSlider Props（常用）

emits：update:modelValue、change（松手）、input（拖动实时，标准版补充）； expose：getSliderRef()

GwStdTag Props（常用）

三种展示模式：单值（一个标签）、数组（每项一个标签）、多标签（multi-tag + 对象数组， 显示 tagNameField：tagValueField，按 tagNameField 分组取马卡龙色，同组同色）。 color 自定义色优先；effect 三主题由 CSS 变量控制（light = 10% 透明度浅色底）。

emits：update:modelValue、close(node)（节点已移除；对象项字段解构到顶层、 基本类型项挂 item，含 index）、tag-click(node)；expose：removeTag(index)

GwStdNumber Props（常用）

emits：update:modelValue、change(value, oldValue)、focus、blur； expose：focus()、blur()、getNumberRef()

<script setup lang="ts">
import { ref } from 'vue';
import { GwStdRate } from '@gwall/std-ui/rate';
import { GwStdSlider } from '@gwall/std-ui/slider';
import { GwStdTag } from '@gwall/std-ui/tag';
import { GwStdNumber } from '@gwall/std-ui/number';

const score = ref(3);
const range = ref<number[]>([20, 60]);
const qty = ref(5);
const multiTags = ref([
	{ warehouse: '上海一号仓', goodsType: '食品' },
	{ warehouse: '杭州二号仓', goodsType: '生鲜' },
]);
</script>

<template>
	<GwStdRate v-model="score" label="评分" allow-half />
	<GwStdSlider v-model="range" label="范围" range />
	<GwStdNumber v-model="qty" label="数量" :min="1" :precision="0" />
	<GwStdTag v-model="multiTags" label="多标签" multi-tag tag-name-field="warehouse"
		tag-value-field="goodsType" :min-tags="1" closable />
</template>

GwStdAlert / GwStdColorPicker / GwStdMark / GwStdDivider / GwStdIcon / GwStdText（第七批）

第七批静态展示与轻交互件：GwStdAlert（原 gw-Alert 警告提示）、GwStdColorPicker（原 gw-color 颜色选择）、 GwStdMark（原 gw-mark 批注）、GwStdDivider（原 gw-divider 分隔线）、GwStdIcon（原 gw-icon 独立图标）、 GwStdText（原 gw-text 文本展示）。

GwStdAlert Props（常用）

插槽 default 优先于 description；emits：close

GwStdColorPicker Props（常用）

emits：update:modelValue、change；expose：getColorPickerRef()；支持表单项包装

GwStdMark Props（常用）

GwStdDivider Props

direction（horizontal / vertical，默认 horizontal）、contentPosition（left / center / right，默认 center）、 borderStyle（默认 solid）；文案走默认插槽（原 label）

GwStdIcon Props（常用）

emits：click；三态变色逻辑与原组件一致（点击色 > 悬停色 > 选中色 > 默认色）

GwStdText Props（常用）

emits：click

<script setup lang="ts">
import { ref } from 'vue';
import { GwStdAlert } from '@gwall/std-ui/alert';
import { GwStdColorPicker } from '@gwall/std-ui/color-picker';
import { GwStdMark } from '@gwall/std-ui/mark';
import { GwStdDivider } from '@gwall/std-ui/divider';
import { GwStdIcon } from '@gwall/std-ui/icon';
import { GwStdText } from '@gwall/std-ui/text';
import { Search } from '@element-plus/icons-vue';

const color = ref('#409EFF');
const markVisible = ref(false);
</script>

<template>
	<GwStdAlert title="提示" type="warning" show-icon description="第一行&#10;第二行" />
	<GwStdColorPicker v-model="color" label="主题色" :predefine="['#409EFF', '#67C23A']" />
	<GwStdMark :number="1" type="danger" title="批注" describe="描述内容" v-model:visible="markVisible" />
	<GwStdDivider content-position="left">分组标题</GwStdDivider>
	<GwStdIcon :icon="Search" :font-size="24" color="#909399" enter-color="#409eff" />
	<GwStdText v-model="textValue" center font-weight="bold" />
</template>

GwStdProvinceCity 省市区选择（第八批，原 gw-provinceCity）

基于 el-cascader + element-china-area-data（peer 依赖，宿主需安装）。 内置四种数据类型，编码型与文本型互转，支持邮编式 6 位行政区划码回显。

emits：update:modelValue / change / focus / blur

expose：getLabels()（编码 → label 数组）、setValueByLabels(labels)（label → 编码并写入 v-model，失败返回 null）、 setByAdCode(adCode)（邮编式 6 位码回显：前 2 位省 / 3-4 位市 / 5-6 位区县；provinceAndCityData 直辖市 11/12/31/50 取 [省, 区县]）、 isCodeType()、getCascaderRef()

<script setup lang="ts">
import { ref } from 'vue';
import { GwStdProvinceCity } from '@gwall/std-ui/province-city';

const area = ref<string[]>([]);
</script>

<template>
	<GwStdProvinceCity v-model="area" label="所在地区" type="regionData" required name="area" />
</template>

GwStdRichEditor 富文本编辑器（第八批，原 gw-richEditor）

基于 vue3-quill（自 0.0.3 起已内置打包进本组件库产物，宿主无需安装 vue3-quill/quill， 也无需任何 optimizeDeps 预构建配置；quill 的 core/snow/bubble 样式随本包 style.css 汇总， 无需自行引入）。表单项校验错误时编辑器红框提示。

历史背景：vue3-quill 以 .vue 源码形式发布且内部 import quill from 'quill'（CJS）， 宿主 Vite dev 依赖扫描进不了 .vue，曾导致 does not provide an export named 'default' 报错、需宿主配置 optimizeDeps: { include: ['quill'] }；现随包内置后此问题不复存在。

emits：update:modelValue / change({ html, text, quill }) / focus(quill) / blur(quill)；expose：getEditor()

<script setup lang="ts">
import { ref } from 'vue';
import { GwStdRichEditor } from '@gwall/std-ui/rich-editor';

const content = ref('');
const toolbar = [['bold', 'italic'], [{ list: 'ordered' }, { list: 'bullet' }], ['clean']];
</script>

<template>
	<GwStdRichEditor v-model="content" label="描述" name="desc" height="180px" :toolbar="toolbar" />
</template>

GwStdDynamicSelect 动态条件选择（第八批，原 gw-dynamicSelect）

多字段条件输入组：每行「label + 勾选框 + 输入框（可带按钮）」，勾选启用输入并清空原值，取消勾选恢复禁用与 placeholder。

emits：update:modelValue / change / enter({ name, value, row }) / buttonClick({ name, value, row }) / checkChange(row)

expose：reset()（恢复 fields 初始配置、清空值与勾选）、clearField(name)（清空指定字段值）

<script setup lang="ts">
import { ref } from 'vue';
import { GwStdDynamicSelect } from '@gwall/std-ui/dynamic-select';

const value = ref<Record<string, any>>({});
const fields = [
	{ name: 'orderNo', label: '订单号', placeholder: '请输入订单号', checked: false, disabled: true, buttonLabel: '查询' },
	{ name: 'warehouse', label: '仓库', placeholder: '自动生成', checked: true, disabled: false },
];
</script>

<template>
	<GwStdDynamicSelect v-model="value" :fields="fields" label-width="110px" @button-click="(p) => query(p)" />
</template>

GwStdCustomData 数据卡片（第八批，原 gw-customData）

数据展示卡片组：items 定义展示项、config 定义栅格与样式，值从 modelValue 对象按 item.value 取。

emits：itemClick(item, index)（原 item.event 脚本）

样式说明：card 为阴影卡片 + 右侧图标圆底（${backgroundColor}20 半透明）；cardStyleTwo 为整卡 allBackgroundColor 背景的紧凑样式； 栅格宽度按 calc((100% - space*(columns-1)px) / columns) 计算、列尾不留间距；图标支持 gicon/gwicon 字体（随包样式）、element 图标组件与图片地址。

<script setup lang="ts">
import { GwStdCustomData } from '@gwall/std-ui/custom-data';

const value = { orderCount: 128, todayOut: 3560 };
const items = [
	{ label: '订单总数', value: 'orderCount', icon: 'gicon-dingdan', fontColor: '#409eff', backgroundColor: '#409eff' },
	{ label: '今日出库', value: 'todayOut', icon: 'gicon-chuku', fontColor: '#67c23a', backgroundColor: '#67c23a' },
];
</script>

<template>
	<GwStdCustomData :model-value="value" :items="items" :config="{ style: 'card', columns: 2, space: 16 }" />
</template>

GwStdSqlRuleInput 规则配置（第九批，原 gw-sqlRuleInput）

数据模板规则配置：点击输入框打开两步式配置弹窗——步骤1 勾选数据表、配置表间关联（主表 BFS 可达过滤）； 步骤2 可视化构建规则表达式（字段/运算符/输入值 token 拖拽编排），实时校验并生成 SQL WHERE 语句。

数据源注入（替代原 Request 远程取数）：dbTables 静态传入 > fetchTables 函数 > 内置演示表（DEFAULT_TABLES）。

emits：update:modelValue（JSON 字符串）/ change(config)（解析后的完整对象）/ open / close

expose：open() / close() / getSql() / getConfig()

子路径还导出工具：validateSqlRule(tokens, tables, dbTables)、generateSqlRule(tokens, tables)、 SQL_RULE_DEMO_TABLES（内置演示表）、全套类型（GwStdSqlRuleConfig 等）。

<script setup lang="ts">
import { ref } from 'vue';
import { GwStdSqlRuleInput, type GwStdSqlRuleConfig } from '@gwall/std-ui/sql-rule-input';

const value = ref('');
const onRuleChange = (cfg: GwStdSqlRuleConfig) => console.log(cfg.sql);
</script>

<template>
	<GwStdSqlRuleInput v-model="value" label="规则配置" name="rule" required :fetch-tables="loadTables" :fetch-fields="loadFields" @change="onRuleChange" />
</template>

GwStdSelectVirtualized 虚拟滚动下拉（第十批，原 gw-selectVirtualized）

基于 el-select-v2 的大数据量下拉：万级选项仅渲染可视区域，交互与 GwStdSelect 对齐 （色点、折叠标签、底部全选/清空/反选、默认选中、分组码过滤），另有显示层保护—— 多选结果超 50 条自动折叠为 +N（选中值仍完整保存），tooltip 最多展示 200 条。

emits：update:modelValue、change、focus、blur、visible-change、remove-tag、clear、keydownEnter

expose：focus()、getSelectRef()

<script setup lang="ts">
import { ref } from 'vue';
import { GwStdSelectVirtualized } from '@gwall/std-ui/select-virtualized';

const value = ref<any[]>([]);
// 万级选项：虚拟滚动，多选全选也不卡顿
const options = Array.from({ length: 10000 }, (_, i) => ({ label: `数据-${i + 1}`, value: i }));
</script>

<template>
	<GwStdSelectVirtualized v-model="value" :options="options" multiple select-all-default filterable label="数据" />
</template>

GwStdDynamicConfig 列表增项（第十批，原 gw-dynamicConfig）

配置驱动的动态行编辑器：columns 定义每列控件类型，v-model 绑定行数组，内置增删行、 必填校验、checkbox 列头全选、远程选项列注入。低代码专用子组件列（放大镜/表达式/规则配置/XML 编辑器） 以 type: 'slot' 具名插槽 #列名 替代（作用域含 { row, index, item }）。

列配置（GwStdDynamicConfigColumn）：prop / label / type（input、text、select、selectMultiple、 createSelect、checkbox、radio、switch、timePicker、datePicker、selectDataSource、checkboxDataSource、 radioDataSource、slot）/ span / required / disabled / isHidden / placeholder / options（'1:启用' 字符串或对象数组）/ bindValue / bindLabel / defaultValue: { type: 1|2|3, value }（1 原样 / 2 数字 / 3 布尔，多选类型逗号拆分）/ explanatoryNote（列头问号气泡）/ dataConfig（multiple、filterable、type、format、valueFormat、 bindValue、bindName、onFocusQuery 聚焦刷新、optionsList 初始选项）。

emits：update:modelValue、change(rows)、row-click(row, item, index)（行/单元格聚焦，原 setRowData）、 add(rows)、delete(rows)

expose：onValid(): Promise<boolean>（全部行必填校验）、addRow()、deleteRow(index)

<script setup lang="ts">
import { ref } from 'vue';
import { GwStdDynamicConfig } from '@gwall/std-ui/dynamic-config';
import type { GwStdDynamicConfigColumn } from '@gwall/std-ui/dynamic-config';

const rows = ref<Record<string, any>[]>([]);
const columns: GwStdDynamicConfigColumn[] = [
	{ prop: 'field', label: '字段', type: 'select', required: true, options: ['1:订单号', '2:商品编码'] },
	{ prop: 'value', label: '值', type: 'input', required: true, placeholder: '请输入值' },
	{ prop: 'warehouse', label: '仓库', type: 'selectDataSource', dataConfig: { filterable: true } },
];
const fetchOptions = async (prop: string) => (prop === 'warehouse' ? await getWarehouses() : []);
</script>

<template>
	<GwStdDynamicConfig ref="dcRef" v-model="rows" :columns="columns" :fetch-options="fetchOptions" label="条件配置" index-num one-line-default />
</template>

GwStdFileUpload / GwStdPictureUpload / GwStdUploadManage（第十一批）

第十一批上传三件：GwStdFileUpload（原 gw-fileUpload 文件上传）、GwStdPictureUpload （原 gw-pictureUpload 图片上传）、GwStdUploadManage（原 gw-uploadManage 附件管理）。 前两者为 el-upload action 直传模式（表单内选择即上传，区别于第三批 GwStdUpload 的弹窗确认 + uploadRequest 注入模式）；附件管理为「按钮 + 附件表格 + 拖拽上传弹窗」三段式， 全部请求注入式。

GwStdFileUpload Props（常用）

文件列表自定义渲染：文件名截断 + 下载链接 + 删除图标。emits：update:modelValue、 change、success(response, file, fileList)、error、remove(file)、exceed； expose：getUploadRef()。

GwStdPictureUpload Props（常用）

同 GwStdFileUpload（fileTypes 按 image/[后缀] 校验 mime），picture-card 卡片模式： el-image 预览（preview-src-list 大图、initial-index 定位）、上传成功角标、卡片悬浮 预览/删除操作按钮、达到上限隐藏加号卡片。

emits：上述全部 + preview(file)。

GwStdUploadManage Props（常用）

行结构（GwStdUploadManageFile）：fileName / fileSize(KB) / crna 上传人 / crdt 上传时间 / downLoadUrl（http 原样、相对路径拼 baseUrl）/ fileId。预览分流：图片后缀内置查看弹窗， 其余 window.open；下载为 a 标签触发；删除走 ElMessageBox 确认 + deleteRequest + 自动刷新。

emits：upload-success(response)、delete-success(response, file)、operate(row, type)、 error(type, error)、before-upload；expose：open()、refresh()、submit()、 clearFiles()、getUploadRef()、getTableRef()。

<script setup lang="ts">
import { ref } from 'vue';
import { GwStdUploadManage } from '@gwall/std-ui/upload-manage';
import { uploadApi, deleteFileApi, getFileListApi } from '@/api';

const umRef = ref();
const uploadRequest = (formData: FormData) => uploadApi(formData); // POST 附件接口
const deleteRequest = (file: any) => deleteFileApi({ fileid: file.fileId });
const fetchFiles = () => getFileListApi({ keys: orderNo, uploadType: 'component' });
</script>

<template>
	<GwStdUploadManage
		ref="umRef"
		label="上传附件"
		:fetch-files="fetchFiles"
		:upload-request="uploadRequest"
		:delete-request="deleteRequest"
		:file-type="'doc,docx,pdf,jpg,png'"
		:file-size="{ value: 10, type: 'MB' }"
	/>
</template>

容器件（第十二批）

第十二批 7 个容器组件，由 containerModule 改造：GwStdCard（原 card）、GwStdDrawer（原 drawer）、 GwStdFormDrawer（原 formDrawer）、GwStdVerticalTabs（原 verticalTabs）、GwStdIterator（原 iterator）、 GwStdDivideContainer（原 divideContainer）、GwStdElevatorTabs（原 elevatorTabs）。 原组件的设计器画布机制（选中边框 gwBorders、拖拽 gw-draggable、变量池 widget/options、setEvent 事件注册） 全部去除，能力以标准 props / slots / emits 提供。

GwStdCard 卡片

el-card 包装，保留原 body 10px 内边距与 header 能力。

插槽 default / header；emits click

GwStdDrawer 抽屉

el-drawer 包装。原设计器画布抽屉（绝对定位白盒 + 遮罩 + 选中边框）改为标准 v-model 弹层。

emits：update:modelValue、open、opened、close、closed；expose：getDrawerRef()、open()、close()

GwStdFormDrawer 表单抽屉

对齐原运行态：无默认标题栏，外侧 30px 工具栏、上下分组、拖拽调宽及中间全屏/返回按钮。 默认插槽渲染原生表单；也支持 src、formId / formSrcBuilder(formId, context) 嵌入页面。

默认插槽、#panel-{action或code}、#footer 的作用域为 {formType, row, readonly, index, activePanel, close, refresh}；#header 沿用 el-drawer 作用域。 内置日志、附件、设置可被对应面板插槽覆盖；自定义选中型按钮通过 code 切换面板。

emits：原生命周期及 iframeLoad(event)、back；另有 button-click(button, context)、refresh(context)、 form-change(context)、record-change(row, index)、panel-change(panel)、confirm(context)、 settings-saved(config, options)、fullscreen-change(bool)、resize(px)、close-error(error)， 以及 update:formType / update:row / update:activePanel / update:size。 expose：getDrawerRef()、getIframeRef()、reload()、refresh()、toggleFullScreen()、handleButtonClick(button)、 open({formType, row})、openAdd(row?)、openEdit(row)、openPreview(row)、close()、getContext()。

GwStdVerticalTabs 纵向页签

左侧 el-tree 导航（原 leftTreeBox 200px）+ 右侧内容区；叶节点点击切换页签（父节点仅展开）， 内容区按平铺叶节点 v-show 切换（不销毁）。

emits：update:modelValue、change(code)；插槽 #tab-{code}（作用域 {tab}）； expose：setActive(code)、getFlatTabs()、getTreeRef()

GwStdIterator 迭代器

数据驱动卡片列表：每行渲染一张卡片（default 插槽作用域 {row, index, iteratorIndex}）， 可选左上角勾选框，选中/单击/双击分别抛事件。原远程分页取数（pubPage）由调用方完成后传 data。

emits：update:modelValue、select(rows, keys, keysMap)（keysMap 即原 multipleKeys 各主键字段逗号串）、 row-click(row, index, currentKey)、row-dblclick(row, index, currentValue)； expose：getSelectedRows()、getSelectedKeys()、clearSelection()

<script setup lang="ts">
import { ref } from 'vue';
import { GwStdIterator } from '@gwall/std-ui/iterator';

const selected = ref<any[]>([]);
const rows = await fetchSkus(); // 调用方取数
</script>

<template>
	<GwStdIterator v-model="selected" :data="rows" primary-key="id" @row-click="(row) => openDetail(row)">
		<template #default="{ row }">
			<div class="sku-card">{{ row.name }}</div>
		</template>
	</GwStdIterator>
</template>

GwStdDivideContainer 分割容器

双区域 + 可拖拽分隔条：direction 左右/上下分隔、mirror 镜像布局（-reverse）、 固定侧尺寸（原 selectRange + range）、hover 分隔条显示折叠按钮（折叠某侧归零）。

emits：resize(fixedPx)（拖拽结束）、collapse(pane)； expose：collapse(pane)、expand()、reset()；插槽 #first / #second

分隔条折叠按钮原用 gicon 上/下箭头字体图标，标准版改用 element-plus CaretTop/CaretBottom/CaretLeft/CaretRight（按方向分流），不依赖平台字体。

GwStdElevatorTabs 电梯页签

电梯导航 + 分组页签双模式（原 displayType elevator-tab / normal-tab）。电梯模式：顶部横向按钮组或 右上角浮窗导航（可折叠）+ 纵向滚动内容区 + 滚动联动高亮 + 点击平滑滚动 + 区块折叠 （+/- 图标、折叠时高度锁标题行）+ 全部收起/展开。分组页签模式：多组 el-tabs 卡片（原 tabsBox）， 组右上角展开/收起（收起时只留页签头），有 children 的一级开启新组、后续单页签并入该组（原 collapseInfoOther）。 子页签默认以右侧覆盖面板打开明细表单（宽度 70%，仅覆盖所属列表内容区），列表宽度不超过 550px 时自动铺满列表并隐藏调宽手柄，保证页签和操作可读。支持切换、关闭、拖动左边缘调宽及列表区域内全屏；也接受原配置的平铺 bindCode 关联。面板不参与列表布局，主信息和列表标题不被遮挡，从可见列表打开时不改变滚动位置，切换电梯/页签模式保留已挂载的明细内容。 需要将子页签直接显示为电梯区块或组内页签时，设置 child-display="sections"。

emits：update:modelValue、change(prop)（点击导航/页签）、collapse(tab, collapsed)、update:type、type-change(type)、 detail-open(parentProp, childProp)、detail-change(parentProp, childProp)、detail-close(parentProp)、detail-fullscreen(parentProp, fullscreen)、detail-resize(parentProp, width)、detail-tool(action, parentProp, childProp)（宿主接入保存、刷新、上一条/下一条；返回和全屏自带行为）； 插槽 #tab-{prop}（父页签作用域 {tab, index, openDetail(childProp?)}，明细页签作用域 {tab, index, parent, close()}）； #tab-actions（展开时标题右侧按钮，作用域 {tab, index, openDetail(childProp?)}）、#tab-abstract（收起时标题摘要，作用域 {tab, index}）； #detail-actions（明细页签行右侧的保存/返回等操作，作用域 {parent, tab, close()}；自动为操作预留宽度）； expose：scrollToTab(prop)、toggleCollapseAll(collapsed?)、toggleCollapse(tab)、setActive(prop)、 openDetailForm(parentProp, childProp?)、closeDetailForm(parentProp)。

<GwStdElevatorTabs :tabs="[{ prop: 'orders', label: '订单', children: [{ prop: 'detail', label: '订单详情' }] }]">
  <template #tab-orders="{ openDetail }"><el-button @click="openDetail('detail')">查看明细</el-button></template>
  <template #tab-detail><OrderDetail /></template>
</GwStdElevatorTabs>

主从表单布局可参考 demo/ElevatorFormExample.vue：主信息和明细列表为两个一级页签，明细信息放入列表页签的 children，新增/删除放入 #tab-actions。列表插槽占满一行，列表高度由内部容器设置；主信息使用五列、顶部标签和下边框输入框。

GwStdFormDrawer 可传 initialFullscreen（默认 false）控制每次打开时的全屏状态，showResizeControls（默认 true）控制中部伸缩按钮；隐藏按钮不影响拖动调宽和工具栏全屏。通过 rows / row / rowKey 接入当前页记录，record-change 通知宿主重新回填。

GwStdNewTable.getRows() 返回当前页数组快照；compactPagination（默认未设置）可显式切换左侧紧凑分页，未传时仍沿用原 compactMode 配置。明细打开/关闭时由宿主切换此 prop，detail-nav-change 配合 selectPreviousLine() / selectNextLine() 接入明细导航。

#toolbar 可放保存/返回等表单操作，显示为导航上方的 32px 操作行，明细覆盖面板会避开此行。带子表单的区块默认显示全屏按钮，tab.fullscreen: false 可关闭，普通区块可用 tab.fullscreen: true 开启；全屏仅铺满电梯内容区，退出时恢复滚动位置。原型预览：开发服务的 /?elevator-form，默认左侧单据列表、右侧 55% 表单抽屉，支持记录切换、编辑保存及明细浮层；内置操作图标随组件打包原平台字体，不依赖宿主加载 gicon。

滚动联动说明：滚动内容区时按区块可视状态反向高亮导航（仅同步 v-model，不触发 change）； 点击导航后 2 秒内暂停联动（平滑滚动期间避免高亮抖动，与原组件一致）。原页签按钮面包屑 （tabsButtonByTab）、摘要配置（tabsAbstractByTab）分别由 #tab-actions、#tab-abstract 插槽承载； 页签显隐由 show 控制，关闭明细前的未保存校验由宿主通过 beforeDetailClose 提供。

系统件（第十三批）

原 systemModule 中的四个业务组件：GwStdListCard（原 tableList 列表卡片）、GwStdPhotoWall（原 photoWall 照片墙）、 GwStdCronExpression（原 cronExpression cron 表达式）、GwStdFlowChart（原 flowChart 流程图）。

GwStdListCard 列表卡片

卡片式数据列表（原 tableList）：标题栏 + 状态标签（default 行内 / style1 右上角悬浮）、24 栅格字段布局（列 span）、 字典 / 时间 / 精度（截断、四舍五入）列格式化、动态行背景（跨列阈值 / 文本规则）、斑马纹、选中高亮、 行内编辑（列 editable）、右侧纵向 / 底部横条操作按钮、空值列隐藏。

<GwStdListCard
	:data="rows"
	:columns="columns"
	title-key="orderNo"
	state-key="status"
	state-map="1:待处理/2:已完成"
	state-bg-map="1:#e6a23c/2:#67c23a"
	stripe
	:buttons="[{ label: '查看' }]"
	@button-click="onCardButton"
/>