@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> | 左右分割条 | | StandardTable | <standard-table> 及 7 个子组件 | 标准表格（基于 vxe-table） | | StandardTree | <standard-tree> | 标准树（transparent 透明模式） |

StandardAdvancedQuery 为 StandardFilterbar 内部依赖，随包发布但不单独暴露。

安装

npm i @addytse/standard-ui

前置依赖（peerDependencies）

使用方项目必须已安装并全局注册以下库：

// main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

Vue.use(ElementUI)
Vue.use(VXETable)

| 包 | 版本要求 | 备注 | | --- | --- | --- | | vue | ^2.6.0 | | | element-ui | ^2.15.0 | 全部组件依赖 | | vxe-table | ^3.6.0 | 仅 StandardTable 依赖 |

使用

方式一：全局注册（推荐）

import StandardComponents from '@addytse/standard-ui'

Vue.use(StandardComponents)

注册后所有页面模板可直接使用上述标签，无需 import：

<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-table>

方式二：局部注册

import StandardComponents from '@addytse/standard-ui'

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
  }
}

各组件详细用法

各组件完整 API（属性、事件、方法、示例）见原项目文档 src/components/README.md（已随包源码保留在 Git 仓库的 src/components/README.md）。

开发与构建

# 安装依赖
npm install

# 构建组件库（产物输出到 dist/）
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 均通过全局注册的组件标签使用。

发布到 npm

# 1. 确认版本号并构建
npm run build

# 2. 登录 npm（首次发布需要；无账号先到 https://www.npmjs.com 注册）
npm login

# 3. 发布（publishConfig.access 已设为 public）
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/ 中的组件一一对应。组件有改动时，复制对应组件目录到本仓库并升级版本号重新发布。