kivii-public-components 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +178 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,180 @@
|
|
|
1
|
-
#
|
|
1
|
+
# kivii-public-components
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
基于 Vue 3 + Naive UI 的公共组件库，提供开箱即用的数据表格组件，支持搜索、分页、列配置、增删改等能力。
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## 特性
|
|
6
|
+
|
|
7
|
+
- 自包含设计，无需宿主安装或配置 Naive UI
|
|
8
|
+
- 支持动态列配置、搜索字段配置
|
|
9
|
+
- 内置分页、排序、筛选
|
|
10
|
+
- 支持自定义动作、数据转换规则
|
|
11
|
+
- 支持暗色/亮色主题
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## 安装
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
# npm
|
|
19
|
+
npm install kivii-public-components
|
|
20
|
+
|
|
21
|
+
# pnpm
|
|
22
|
+
pnpm add kivii-public-components
|
|
23
|
+
|
|
24
|
+
# yarn
|
|
25
|
+
yarn add kivii-public-components
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
**前置依赖**：宿主项目需要安装 Vue 3（组件本身已内置 Naive UI，无需额外安装）。
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
pnpm add vue
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
---
|
|
35
|
+
|
|
36
|
+
## 快速开始
|
|
37
|
+
|
|
38
|
+
### 1. 引入样式
|
|
39
|
+
|
|
40
|
+
在项目入口文件（`main.ts` 或根组件）中引入 CSS：
|
|
41
|
+
|
|
42
|
+
```ts
|
|
43
|
+
import 'kivii-public-components/style'
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### 2. 使用组件
|
|
47
|
+
|
|
48
|
+
```vue
|
|
49
|
+
<template>
|
|
50
|
+
<TableIndex :uiConfig="config" />
|
|
51
|
+
</template>
|
|
52
|
+
|
|
53
|
+
<script setup lang="ts">
|
|
54
|
+
import { TableIndex } from 'kivii-public-components'
|
|
55
|
+
|
|
56
|
+
const config = {
|
|
57
|
+
Type: 'YourApp.Entities.Invoice',
|
|
58
|
+
InternalCode: '发票管理',
|
|
59
|
+
IsDefault: true,
|
|
60
|
+
InitQuery: '/api/Invoice/Query.json',
|
|
61
|
+
GetUrl: '/api/UiConfig/Get.json',
|
|
62
|
+
SetUrl: '/api/UiConfig/Set.json',
|
|
63
|
+
}
|
|
64
|
+
</script>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
## API
|
|
70
|
+
|
|
71
|
+
### TableIndex Props
|
|
72
|
+
|
|
73
|
+
| 参数 | 类型 | 必填 | 说明 |
|
|
74
|
+
|------|------|------|------|
|
|
75
|
+
| `uiConfig` | `UiConfig` | 否 | 表格配置对象，包含接口地址和实体类型 |
|
|
76
|
+
|
|
77
|
+
### UiConfig 配置项
|
|
78
|
+
|
|
79
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
80
|
+
|------|------|------|------|
|
|
81
|
+
| `Type` | `string` | 是 | 实体类型标识，用于获取列结构，例如 `'YourApp.Entities.Invoice'` |
|
|
82
|
+
| `InternalCode` | `string` | 是 | 当前视图的唯一标识，用于保存/读取列配置 |
|
|
83
|
+
| `IsDefault` | `boolean` | 否 | 是否使用默认列配置，默认 `true` |
|
|
84
|
+
| `InitQuery` | `string` | 是 | 数据查询接口地址（GET），例如 `'/api/Invoice/Query.json'` |
|
|
85
|
+
| `GetUrl` | `string` | 是 | 读取 UI 配置接口地址（GET） |
|
|
86
|
+
| `SetUrl` | `string` | 是 | 保存 UI 配置接口地址（POST） |
|
|
87
|
+
| `InitDelete` | `string` | 否 | 删除接口地址（POST），不配置则禁用删除功能 |
|
|
88
|
+
| `CreateVueUrl` | `string` | 否 | 新建表单动态组件的 URL，用于加载远程 Vue 组件 |
|
|
89
|
+
|
|
90
|
+
### 接口约定
|
|
91
|
+
|
|
92
|
+
组件内部使用 axios 调用接口，需后端按以下格式返回数据。
|
|
93
|
+
|
|
94
|
+
**查询接口 `InitQuery`（GET）**
|
|
95
|
+
|
|
96
|
+
```json
|
|
97
|
+
{
|
|
98
|
+
"Data": [...],
|
|
99
|
+
"Total": 100
|
|
100
|
+
}
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
**列结构接口 `/Server/Entity/{Type}`（GET）**
|
|
104
|
+
|
|
105
|
+
```json
|
|
106
|
+
[
|
|
107
|
+
{ "Field": "Name", "Label": "名称", "DataType": "string" },
|
|
108
|
+
{ "Field": "Amount", "Label": "金额", "DataType": "number" }
|
|
109
|
+
]
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
---
|
|
113
|
+
|
|
114
|
+
## 完整示例
|
|
115
|
+
|
|
116
|
+
```vue
|
|
117
|
+
<template>
|
|
118
|
+
<div style="padding: 16px;">
|
|
119
|
+
<TableIndex :uiConfig="tableConfig" />
|
|
120
|
+
</div>
|
|
121
|
+
</template>
|
|
122
|
+
|
|
123
|
+
<script setup lang="ts">
|
|
124
|
+
import { TableIndex } from 'kivii-public-components'
|
|
125
|
+
import 'kivii-public-components/style'
|
|
126
|
+
|
|
127
|
+
const tableConfig = {
|
|
128
|
+
Type: 'YourApp.Entities.Order',
|
|
129
|
+
InternalCode: '订单列表',
|
|
130
|
+
IsDefault: true,
|
|
131
|
+
InitQuery: '/api/Order/Query.json',
|
|
132
|
+
GetUrl: '/api/UiConfig/Get.json',
|
|
133
|
+
SetUrl: '/api/UiConfig/Set.json',
|
|
134
|
+
InitDelete: '/api/Order/Delete.json',
|
|
135
|
+
CreateVueUrl: '/forms/orderForm.vue',
|
|
136
|
+
}
|
|
137
|
+
</script>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
---
|
|
141
|
+
|
|
142
|
+
## 注意事项
|
|
143
|
+
|
|
144
|
+
### 接口代理
|
|
145
|
+
|
|
146
|
+
组件内部接口请求使用相对路径，本地开发时请在宿主项目的 Vite 配置中设置代理：
|
|
147
|
+
|
|
148
|
+
```ts
|
|
149
|
+
// vite.config.ts
|
|
150
|
+
export default defineConfig({
|
|
151
|
+
server: {
|
|
152
|
+
proxy: {
|
|
153
|
+
'/api': {
|
|
154
|
+
target: 'https://your-api-server.com',
|
|
155
|
+
changeOrigin: true,
|
|
156
|
+
},
|
|
157
|
+
},
|
|
158
|
+
},
|
|
159
|
+
})
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
### 无需配置 Naive UI Provider
|
|
163
|
+
|
|
164
|
+
本组件已在内部封装了 `NConfigProvider`、`NMessageProvider`、`NDialogProvider`，宿主项目**无需安装或注册 Naive UI**，直接使用即可。
|
|
165
|
+
|
|
166
|
+
---
|
|
167
|
+
|
|
168
|
+
## 版本记录
|
|
169
|
+
|
|
170
|
+
| 版本 | 说明 |
|
|
171
|
+
|------|------|
|
|
172
|
+
| 0.1.2 | 组件自包含 Provider，宿主无需 Naive UI |
|
|
173
|
+
| 0.1.1 | 修复发布配置，排除无关文件 |
|
|
174
|
+
| 0.1.0 | 初始版本 |
|
|
175
|
+
|
|
176
|
+
---
|
|
177
|
+
|
|
178
|
+
## License
|
|
179
|
+
|
|
180
|
+
MIT
|