@qisen/vte

v0.5.0-beta.6

Published

a month ago

VTE-branded config-driven business page components for Vue 3.

0High
0Medium
0Low

qisen

VTE

VTE 是一套面向 Vue 3 企业后台的配置化列表页组件。它用一份 VteViewConfig 描述字段、搜索、表格、按钮、分组、分页和个性化设置，让业务页面可以复用统一的列表页能力。

VTE 适合以下场景：

多个业务模块需要统一表格、搜索、分页、按钮和空态样式。
列表页需要支持字段显隐、列宽、固定列、行高和用户视图保存。
前后端希望使用稳定的查询参数结构，减少每个页面重复拼装筛选、排序和分页。

完整组件说明见 docs/组件文档/README.md。

外部业务项目通过 npm 接入时推荐按 UI 库选择 @qisen/vte-element-plus 或 @qinsen/vte-ant-design。完整步骤见外部项目安装与使用。

安装与开发

npm install
npm run dev
npm run build
npm run build:preview
npm run preview
npm test

npm run build 会构建组件库到 dist/。
npm run preview 会构建演示项目到 dist-preview/ 并启动预览服务，默认地址通常是 http://localhost:4173。

基础接入

import { createApp } from 'vue';
import VtePlugin from '@qisen/vte-element-plus';
import 'element-plus/dist/index.css';
import 'vxe-table/lib/style.css';
import 'vxe-pc-ui/es/loading/style.css';
import 'vxe-pc-ui/es/tooltip/style.css';
import 'vxe-pc-ui/es/pulldown/style.css';
import '@qisen/vte-element-plus/style.css';
import App from './App.vue';

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

如果业务项目使用 Ant Design Vue，可以改用独立子入口：

import { createApp } from 'vue';
import VtePlugin from '@qinsen/vte-ant-design';
import 'ant-design-vue/dist/reset.css';
import 'vxe-table/lib/style.css';
import 'vxe-pc-ui/es/loading/style.css';
import 'vxe-pc-ui/es/tooltip/style.css';
import 'vxe-pc-ui/es/pulldown/style.css';
import '@qinsen/vte-ant-design/style.css';
import App from './App.vue';

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

两个适配器互斥使用即可。VTE 主入口不会直接导入 element-plus 或 ant-design-vue，对应 UI 库和样式需要业务入口自行引入。

演示项目默认使用 Element Plus，访问 /?ui=ant-design-vue 可以切换到 Ant Design Vue 适配器；页面右上角也提供两个 UI 适配器的切换入口。演示页会把当前场景写入 demo 参数，例如 /?ui=ant-design-vue&demo=field-types-form 可直接查看 Ant Design Vue 下的字段类型和表单场景。

也可以命名导入组件：

<script setup lang="ts">
import { Vte, VtePage } from 'vte';
import type { VtePageData, VteViewConfig } from 'vte';

interface OrderRow extends Record<string, unknown> {
  id: number;
  order_no: string;
}

const view: VteViewConfig<OrderRow> = {
  view_key: 'sales_order',
  name: '销售订单',
  cells: [
    { field: 'order_no', title: '订单编号', type: 'text', search: true, default_operator: 'like' }
  ]
};

const data: VtePageData<OrderRow> = {
  list: [{ id: 1, order_no: 'SO-001' }],
  total: 1,
  page: 1,
  size: 10
};
</script>

<template>
  <Vte :view="view" :data="data">
    <VtePage />
  </Vte>
</template>

使用模式

完整列表页

VtePage 会自动组合视图页签、分组、搜索、工具栏、设置、批量栏、表格和分页。

<template>
  <Vte :view="view" :views="views" :data="data" @command="handleCommand">
    <VtePage>
      <template #cell-order_no="{ value }">
        <button class="vte-link" type="button">{{ value }}</button>
      </template>
    </VtePage>
  </Vte>
</template>

手动组合

需要调整模块位置时，可以直接组合子组件。

<template>
  <Vte :view="view" :data="data">
    <VteSearch />
    <VteToolbar>
      <VteSettings />
    </VteToolbar>
    <VteTable />
    <VtePagination />
  </Vte>
</template>

独立表格

只需要表格展示和字段个性化时，可以直接使用 VteTable。

<template>
  <VteTable :view="view" :data="rows" />
</template>

API 与文档

演示项目

演示项目位于 example/，当前覆盖：

完整列表页：视图、分组、搜索、工具栏、表格、分页和云端视图配置。
根组件 Table：在 <Vte> 上下文中组合表格和分页。
搜索和 Table：自定义搜索字段、表格、分页和行操作。
独立 Table 个性化：不包裹 <Vte> 时的字段配置和本地持久化。
字段类型和表单：文本、数字、日期、单选、多选、链接、附件、图片和模型字段的展示与编辑。
表头筛选和 Ref：表头筛选面板、排序、tableProps 透传和实例方法。
大数据边界案例：空结果、长文本 tooltip、金额范围、近期日期和多状态分布。

发布说明

当前版本为 0.5.0-beta.6。1.0 仍是后续稳定版目标，不代表当前已经进入稳定版。

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

VTE