kivii-public-components

基于 Vue 3 + Naive UI 的公共组件库，提供开箱即用的数据表格组件，支持搜索、分页、列配置、增删改等能力。

特性

• 自包含设计，无需宿主安装或配置 Naive UI
• 支持动态列配置、搜索字段配置
• 内置分页、排序、筛选
• 支持自定义动作、数据转换规则
• 支持暗色/亮色主题

安装

# npm
npm install kivii-public-components

# pnpm
pnpm add kivii-public-components

# yarn
yarn add kivii-public-components

前置依赖：宿主项目需要安装 Vue 3（组件本身已内置 Naive UI，无需额外安装）。

pnpm add vue

快速开始

1. 引入样式

在项目入口文件（main.ts 或根组件）中引入 CSS：

import 'kivii-public-components/style'

2. 使用组件

<template>
  <TableIndex :uiConfig="config" />
</template>

<script setup lang="ts">
import { TableIndex } from 'kivii-public-components'

const config = {
  Type: 'YourApp.Entities.Invoice',
  InternalCode: '发票管理',
  IsDefault: true,
  InitQuery: '/api/Invoice/Query.json',
  GetUrl: '/api/UiConfig/Get.json',
  SetUrl: '/api/UiConfig/Set.json',
}
</script>

API

TableIndex Props

| 参数 | 类型 | 必填 | 说明 | |------|------|------|------| | uiConfig | UiConfig | 否 | 表格配置对象，包含接口地址和实体类型 |

UiConfig 配置项

| 字段 | 类型 | 必填 | 说明 | |------|------|------|------| | Type | string | 是 | 实体类型标识，用于获取列结构，例如 'YourApp.Entities.Invoice' | | InternalCode | string | 是 | 当前视图的唯一标识，用于保存/读取列配置 | | IsDefault | boolean | 否 | 是否使用默认列配置，默认 true | | InitQuery | string | 是 | 数据查询接口地址（GET），例如 '/api/Invoice/Query.json' | | GetUrl | string | 是 | 读取 UI 配置接口地址（GET） | | SetUrl | string | 是 | 保存 UI 配置接口地址（POST） | | InitDelete | string | 否 | 删除接口地址（POST），不配置则禁用删除功能 | | CreateVueUrl | string | 否 | 新建表单动态组件的 URL，用于加载远程 Vue 组件 |

接口约定

组件内部使用 axios 调用接口，需后端按以下格式返回数据。

查询接口 InitQuery（GET）

{
  "Data": [...],
  "Total": 100
}

列结构接口 /Server/Entity/{Type}（GET）

[
  { "Field": "Name", "Label": "名称", "DataType": "string" },
  { "Field": "Amount", "Label": "金额", "DataType": "number" }
]

完整示例

<template>
  <div style="padding: 16px;">
    <TableIndex :uiConfig="tableConfig" />
  </div>
</template>

<script setup lang="ts">
import { TableIndex } from 'kivii-public-components'
import 'kivii-public-components/style'

const tableConfig = {
  Type: 'YourApp.Entities.Order',
  InternalCode: '订单列表',
  IsDefault: true,
  InitQuery: '/api/Order/Query.json',
  GetUrl: '/api/UiConfig/Get.json',
  SetUrl: '/api/UiConfig/Set.json',
  InitDelete: '/api/Order/Delete.json',
  CreateVueUrl: '/forms/orderForm.vue',
}
</script>

注意事项

接口代理

组件内部接口请求使用相对路径，本地开发时请在宿主项目的 Vite 配置中设置代理：

// vite.config.ts
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'https://your-api-server.com',
        changeOrigin: true,
      },
    },
  },
})

无需配置 Naive UI Provider

本组件已在内部封装了 NConfigProvider、NMessageProvider、NDialogProvider，宿主项目无需安装或注册 Naive UI，直接使用即可。

版本记录

| 版本 | 说明 | |------|------| | 0.1.2 | 组件自包含 Provider，宿主无需 Naive UI | | 0.1.1 | 修复发布配置，排除无关文件 | | 0.1.0 | 初始版本 |

License

MIT