el-plus 0.0.83 → 0.0.85
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/CHANGELOG.md +12 -0
- package/dist/index.css +1 -1
- package/dist/index.full.js +147 -40
- package/dist/index.full.min.js +4 -4
- package/dist/index.full.min.js.map +1 -1
- package/dist/index.full.min.mjs +4 -4
- package/dist/index.full.min.mjs.map +1 -1
- package/dist/index.full.mjs +145 -41
- package/docs/api-examples.md +49 -0
- package/docs/components/attachment.md +111 -0
- package/docs/components/buttons.md +108 -0
- package/docs/components/custom-column.md +70 -0
- package/docs/components/date-picker-range.md +61 -0
- package/docs/components/dialog.md +104 -0
- package/docs/components/footer-info.md +101 -0
- package/docs/components/form.md +178 -0
- package/docs/components/header.md +80 -0
- package/docs/components/index.md +23 -0
- package/docs/components/input.md +87 -0
- package/docs/components/link.md +63 -0
- package/docs/components/search-list-page.md +84 -0
- package/docs/components/select.md +163 -0
- package/docs/components/table.md +133 -0
- package/docs/components/title.md +70 -0
- package/docs/components/use-choose-dialog.md +115 -0
- package/docs/components/use-confirm-dialog.md +87 -0
- package/docs/components/use-form-dialog.md +87 -0
- package/docs/guide/markdown-examples.md +85 -0
- package/docs/index.md +25 -0
- package/docs/pages/detail.md +84 -0
- package/docs/pages/list.md +75 -0
- package/es/cli/src/commands/gen-docs.d.ts +2 -0
- package/es/cli/src/commands/install.d.ts +13 -0
- package/es/cli/src/commands/parse.d.ts +2 -0
- package/es/cli/src/index.d.ts +2 -0
- package/es/cli/src/parser/modao.d.ts +33 -0
- package/es/components/buttons/index.d.ts +45 -45
- package/es/components/buttons/src/buttons-vue.d.ts +16 -16
- package/es/components/buttons/src/buttons.d.ts +1 -1
- package/es/components/date-picker-range/index.d.ts +3 -3
- package/es/components/date-picker-range/src/date-picker-range.vue.d.ts +1 -1
- package/es/components/footer-info/index.d.ts +66 -0
- package/es/components/footer-info/index.mjs +8 -0
- package/es/components/footer-info/index.mjs.map +1 -0
- package/es/components/footer-info/src/footer-info.d.ts +28 -0
- package/es/components/footer-info/src/footer-info.mjs +43 -0
- package/es/components/footer-info/src/footer-info.mjs.map +1 -0
- package/es/components/footer-info/src/footer-info.vue.d.ts +34 -0
- package/es/components/footer-info/src/footer-info.vue.mjs +6 -0
- package/es/components/footer-info/src/footer-info.vue.mjs.map +1 -0
- package/es/components/footer-info/src/footer-info.vue2.mjs +65 -0
- package/es/components/footer-info/src/footer-info.vue2.mjs.map +1 -0
- package/es/components/footer-info/style/css.d.ts +2 -0
- package/es/components/footer-info/style/css.mjs +5 -0
- package/es/components/footer-info/style/css.mjs.map +1 -0
- package/es/components/footer-info/style/index.d.ts +2 -0
- package/es/components/footer-info/style/index.mjs +5 -0
- package/es/components/footer-info/style/index.mjs.map +1 -0
- package/es/components/form/src/form-item-vue.mjs +6 -2
- package/es/components/form/src/form-item-vue.mjs.map +1 -1
- package/es/components/header/src/header.d.ts +1 -1
- package/es/components/header/src/header.mjs.map +1 -1
- package/es/components/index.d.ts +1 -0
- package/es/components/index.mjs +2 -0
- package/es/components/index.mjs.map +1 -1
- package/es/components/input/index.d.ts +3 -3
- package/es/components/input/src/input.vue.d.ts +1 -1
- package/es/components/link/index.d.ts +6 -6
- package/es/components/link/src/link.d.ts +1 -1
- package/es/components/link/src/link.vue.d.ts +3 -3
- package/es/components/search-list-page/index.d.ts +12 -12
- package/es/components/search-list-page/src/search-list-page.vue.d.ts +4 -4
- package/es/components/search-list-page/src/use-search-list-page.d.ts +4 -4
- package/es/components.mjs +3 -1
- package/es/components.mjs.map +1 -1
- package/es/index.mjs +2 -0
- package/es/index.mjs.map +1 -1
- package/es/package.json.mjs +1 -1
- package/lib/cli/src/commands/gen-docs.d.ts +2 -0
- package/lib/cli/src/commands/install.d.ts +13 -0
- package/lib/cli/src/commands/parse.d.ts +2 -0
- package/lib/cli/src/index.d.ts +2 -0
- package/lib/cli/src/parser/modao.d.ts +33 -0
- package/lib/components/buttons/index.d.ts +45 -45
- package/lib/components/buttons/src/buttons-vue.d.ts +16 -16
- package/lib/components/buttons/src/buttons.d.ts +1 -1
- package/lib/components/date-picker-range/index.d.ts +3 -3
- package/lib/components/date-picker-range/src/date-picker-range.vue.d.ts +1 -1
- package/lib/components/footer-info/index.d.ts +66 -0
- package/lib/components/footer-info/index.js +15 -0
- package/lib/components/footer-info/index.js.map +1 -0
- package/lib/components/footer-info/src/footer-info.d.ts +28 -0
- package/lib/components/footer-info/src/footer-info.js +46 -0
- package/lib/components/footer-info/src/footer-info.js.map +1 -0
- package/lib/components/footer-info/src/footer-info.vue.d.ts +34 -0
- package/lib/components/footer-info/src/footer-info.vue.js +10 -0
- package/lib/components/footer-info/src/footer-info.vue.js.map +1 -0
- package/lib/components/footer-info/src/footer-info.vue2.js +69 -0
- package/lib/components/footer-info/src/footer-info.vue2.js.map +1 -0
- package/lib/components/footer-info/style/css.d.ts +2 -0
- package/lib/components/footer-info/style/css.js +7 -0
- package/lib/components/footer-info/style/css.js.map +1 -0
- package/lib/components/footer-info/style/index.d.ts +2 -0
- package/lib/components/footer-info/style/index.js +7 -0
- package/lib/components/footer-info/style/index.js.map +1 -0
- package/lib/components/form/src/form-item-vue.js +5 -1
- package/lib/components/form/src/form-item-vue.js.map +1 -1
- package/lib/components/header/src/header.d.ts +1 -1
- package/lib/components/header/src/header.js.map +1 -1
- package/lib/components/index.d.ts +1 -0
- package/lib/components/index.js +5 -0
- package/lib/components/index.js.map +1 -1
- package/lib/components/input/index.d.ts +3 -3
- package/lib/components/input/src/input.vue.d.ts +1 -1
- package/lib/components/link/index.d.ts +6 -6
- package/lib/components/link/src/link.d.ts +1 -1
- package/lib/components/link/src/link.vue.d.ts +3 -3
- package/lib/components/search-list-page/index.d.ts +12 -12
- package/lib/components/search-list-page/src/search-list-page.vue.d.ts +4 -4
- package/lib/components/search-list-page/src/use-search-list-page.d.ts +4 -4
- package/lib/components.js +3 -1
- package/lib/components.js.map +1 -1
- package/lib/index.js +11 -6
- package/lib/index.js.map +1 -1
- package/lib/package.json.js +1 -1
- package/package.json +2 -1
- package/theme-chalk/footer-info.css +1 -0
- package/theme-chalk/index.css +1 -1
- package/theme-chalk/src/footer-info.scss +18 -0
- package/theme-chalk/src/index.scss +1 -0
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# useConfirmDialog 确认对话框
|
|
2
|
+
|
|
3
|
+
基于 useFormDialog 实现的确认对话框,内置 textarea 输入框,适用于审批意见、备注填写等场景。
|
|
4
|
+
|
|
5
|
+
## 基本用法
|
|
6
|
+
|
|
7
|
+
```vue
|
|
8
|
+
<template>
|
|
9
|
+
<el-button @click="handleConfirm">审批</el-button>
|
|
10
|
+
<ConfirmDialog />
|
|
11
|
+
</template>
|
|
12
|
+
|
|
13
|
+
<script setup lang="tsx">
|
|
14
|
+
import { useConfirmDialog } from 'el-plus'
|
|
15
|
+
|
|
16
|
+
const ConfirmDialog = useConfirmDialog({
|
|
17
|
+
title: '审批确认',
|
|
18
|
+
placeholder: '请输入审批意见',
|
|
19
|
+
})
|
|
20
|
+
|
|
21
|
+
const handleConfirm = async () => {
|
|
22
|
+
try {
|
|
23
|
+
const result = await ConfirmDialog.start()
|
|
24
|
+
console.log '确认,意见:', result.value)
|
|
25
|
+
} catch (e) {
|
|
26
|
+
console.log('取消')
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
</script>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Options
|
|
33
|
+
|
|
34
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
35
|
+
|------|------|------|--------|
|
|
36
|
+
| title | 对话框标题 | `string` | - |
|
|
37
|
+
| width | 对话框宽度 | `string` | `'50%'` |
|
|
38
|
+
| dialogProps | 对话框属性,继承自 useDialog | `DialogOptions` | - |
|
|
39
|
+
| rows | textarea 行数 | `number` | `5` |
|
|
40
|
+
| maxlength | 最大输入长度 | `number` | `500` |
|
|
41
|
+
| minlength | 最小输入长度 | `number` | - |
|
|
42
|
+
| showWordLimit | 显示字数统计 | `boolean` | `true` |
|
|
43
|
+
| placeholder | 输入框占位符 | `string` | - |
|
|
44
|
+
| rules | 表单验证规则 | `FormItemProps['rules']` | - |
|
|
45
|
+
| required | 是否必填 | `boolean` | `true` |
|
|
46
|
+
|
|
47
|
+
## 自定义验证
|
|
48
|
+
|
|
49
|
+
```tsx
|
|
50
|
+
const ConfirmDialog = useConfirmDialog({
|
|
51
|
+
title: '驳回原因',
|
|
52
|
+
required: true,
|
|
53
|
+
rules: [
|
|
54
|
+
{ required: true, message: '请输入驳回原因', trigger: 'blur' },
|
|
55
|
+
{ min: 10, message: '驳回原因不能少于10个字', trigger: 'blur' },
|
|
56
|
+
],
|
|
57
|
+
placeholder: '请输入驳回原因(不少于10个字)',
|
|
58
|
+
})
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## 非必填确认
|
|
62
|
+
|
|
63
|
+
```tsx
|
|
64
|
+
const ConfirmDialog = useConfirmDialog({
|
|
65
|
+
title: '备注',
|
|
66
|
+
required: false, // 非必填
|
|
67
|
+
placeholder: '请输入备注(选填)',
|
|
68
|
+
})
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## 返回值
|
|
72
|
+
|
|
73
|
+
确认时返回表单数据对象:
|
|
74
|
+
|
|
75
|
+
```ts
|
|
76
|
+
{
|
|
77
|
+
value: string // textarea 输入的内容
|
|
78
|
+
}
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
## 方法
|
|
82
|
+
|
|
83
|
+
| 方法 | 说明 | 类型 |
|
|
84
|
+
|------|------|------|
|
|
85
|
+
| start | 打开对话框并返回 Promise | `() => Promise<{ value: string }>` |
|
|
86
|
+
| open | 打开对话框 | `() => void` |
|
|
87
|
+
| close | 关闭对话框 | `() => void` |
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# useFormDialog 表单对话框
|
|
2
|
+
|
|
3
|
+
基于 useDialog 实现的表单对话框,集成 EpForm 组件,支持表单验证。
|
|
4
|
+
|
|
5
|
+
## 基本用法
|
|
6
|
+
|
|
7
|
+
```vue
|
|
8
|
+
<template>
|
|
9
|
+
<el-button @click="openDialog">打开表单对话框</el-button>
|
|
10
|
+
<FormDialog />
|
|
11
|
+
</template>
|
|
12
|
+
|
|
13
|
+
<script setup lang="tsx">
|
|
14
|
+
import { useFormDialog } from 'el-plus'
|
|
15
|
+
|
|
16
|
+
const formItemList = [
|
|
17
|
+
{ prop: 'name', label: '姓名', required: true },
|
|
18
|
+
{ prop: 'age', label: '年龄' },
|
|
19
|
+
]
|
|
20
|
+
|
|
21
|
+
const FormDialog = useFormDialog({
|
|
22
|
+
title: '用户信息',
|
|
23
|
+
formItemList,
|
|
24
|
+
dialogProps: {
|
|
25
|
+
destroyOnClose: true, // 关闭时销毁对话框内容
|
|
26
|
+
},
|
|
27
|
+
})
|
|
28
|
+
|
|
29
|
+
const openDialog = async () => {
|
|
30
|
+
try {
|
|
31
|
+
const formData = await FormDialog.start()
|
|
32
|
+
console.log('表单数据', formData)
|
|
33
|
+
} catch (e) {
|
|
34
|
+
console.log('取消')
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
</script>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Options
|
|
41
|
+
|
|
42
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
43
|
+
|------|------|------|--------|
|
|
44
|
+
| title | 对话框标题 | `string` | - |
|
|
45
|
+
| width | 对话框宽度 | `string` | `'80%'` |
|
|
46
|
+
| dialogProps | 对话框属性,继承自 useDialog | `DialogOptions` | - |
|
|
47
|
+
| formData | 表单数据对象 | `object` | - |
|
|
48
|
+
| formItemList | 表单项配置,参考 [EpForm](./form.md) | `FormItemProps[]` | - |
|
|
49
|
+
| onBeforeConfirm | 确认前回调,可用于额外处理 | `(formData, resolve) => Promise<void>` | - |
|
|
50
|
+
| onBeforeCancel | 取消前回调 | `(formData, resolve) => Promise<void>` | - |
|
|
51
|
+
|
|
52
|
+
## 自定义表单数据
|
|
53
|
+
|
|
54
|
+
```tsx
|
|
55
|
+
const formData = reactive({
|
|
56
|
+
name: '',
|
|
57
|
+
age: '',
|
|
58
|
+
})
|
|
59
|
+
|
|
60
|
+
const FormDialog = useFormDialog({
|
|
61
|
+
title: '编辑用户',
|
|
62
|
+
formData, // 传入外部表单数据
|
|
63
|
+
formItemList,
|
|
64
|
+
})
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## 确认前处理
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
const FormDialog = useFormDialog({
|
|
71
|
+
title: '提交表单',
|
|
72
|
+
formItemList,
|
|
73
|
+
onBeforeConfirm: async (formData, resolve) => {
|
|
74
|
+
// 可以在此处进行额外的异步操作
|
|
75
|
+
await api.submit(formData)
|
|
76
|
+
resolve(formData)
|
|
77
|
+
},
|
|
78
|
+
})
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
## 方法
|
|
82
|
+
|
|
83
|
+
| 方法 | 说明 | 类型 |
|
|
84
|
+
|------|------|------|
|
|
85
|
+
| start | 打开对话框并返回 Promise | `() => Promise<FormData>` |
|
|
86
|
+
| open | 打开对话框 | `() => void` |
|
|
87
|
+
| close | 关闭对话框 | `() => void` |
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
# Markdown Extension Examples
|
|
2
|
+
|
|
3
|
+
This page demonstrates some of the built-in markdown extensions provided by VitePress.
|
|
4
|
+
|
|
5
|
+
## Syntax Highlighting
|
|
6
|
+
|
|
7
|
+
VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
|
|
8
|
+
|
|
9
|
+
**Input**
|
|
10
|
+
|
|
11
|
+
````md
|
|
12
|
+
```js{4}
|
|
13
|
+
export default {
|
|
14
|
+
data () {
|
|
15
|
+
return {
|
|
16
|
+
msg: 'Highlighted!'
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
```
|
|
21
|
+
````
|
|
22
|
+
|
|
23
|
+
**Output**
|
|
24
|
+
|
|
25
|
+
```js{4}
|
|
26
|
+
export default {
|
|
27
|
+
data () {
|
|
28
|
+
return {
|
|
29
|
+
msg: 'Highlighted!'
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Custom Containers
|
|
36
|
+
|
|
37
|
+
**Input**
|
|
38
|
+
|
|
39
|
+
```md
|
|
40
|
+
::: info
|
|
41
|
+
This is an info box.
|
|
42
|
+
:::
|
|
43
|
+
|
|
44
|
+
::: tip
|
|
45
|
+
This is a tip.
|
|
46
|
+
:::
|
|
47
|
+
|
|
48
|
+
::: warning
|
|
49
|
+
This is a warning.
|
|
50
|
+
:::
|
|
51
|
+
|
|
52
|
+
::: danger
|
|
53
|
+
This is a dangerous warning.
|
|
54
|
+
:::
|
|
55
|
+
|
|
56
|
+
::: details
|
|
57
|
+
This is a details block.
|
|
58
|
+
:::
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
**Output**
|
|
62
|
+
|
|
63
|
+
::: info
|
|
64
|
+
This is an info box.
|
|
65
|
+
:::
|
|
66
|
+
|
|
67
|
+
::: tip
|
|
68
|
+
This is a tip.
|
|
69
|
+
:::
|
|
70
|
+
|
|
71
|
+
::: warning
|
|
72
|
+
This is a warning.
|
|
73
|
+
:::
|
|
74
|
+
|
|
75
|
+
::: danger
|
|
76
|
+
This is a dangerous warning.
|
|
77
|
+
:::
|
|
78
|
+
|
|
79
|
+
::: details
|
|
80
|
+
This is a details block.
|
|
81
|
+
:::
|
|
82
|
+
|
|
83
|
+
## More
|
|
84
|
+
|
|
85
|
+
Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).
|
package/docs/index.md
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
---
|
|
2
|
+
# https://vitepress.dev/reference/default-theme-home-page
|
|
3
|
+
layout: home
|
|
4
|
+
|
|
5
|
+
hero:
|
|
6
|
+
name: "el-plus-docs"
|
|
7
|
+
text: "宏信组件文档"
|
|
8
|
+
tagline: My great project tagline
|
|
9
|
+
actions:
|
|
10
|
+
- theme: brand
|
|
11
|
+
text: Markdown Examples
|
|
12
|
+
link: /markdown-examples
|
|
13
|
+
- theme: alt
|
|
14
|
+
text: API Examples
|
|
15
|
+
link: /api-examples
|
|
16
|
+
|
|
17
|
+
features:
|
|
18
|
+
- title: Feature A
|
|
19
|
+
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
|
|
20
|
+
- title: Feature B
|
|
21
|
+
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
|
|
22
|
+
- title: Feature C
|
|
23
|
+
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
|
|
24
|
+
---
|
|
25
|
+
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
# 详情页面
|
|
2
|
+
|
|
3
|
+
详情页面用于展示和编辑单条数据,组件自由组合。
|
|
4
|
+
|
|
5
|
+
## 页面结构
|
|
6
|
+
|
|
7
|
+
详情页无固定结构,根据业务需求自由组合以下组件:
|
|
8
|
+
|
|
9
|
+
- **EpHeader**: 顶部操作栏(可选)
|
|
10
|
+
- **EpForm**: 表单容器(可选)
|
|
11
|
+
- **EpTitle**: 标题分组(可选)
|
|
12
|
+
- **EpTable**: 明细表格(可选)
|
|
13
|
+
- **EpAttachment**: 附件管理(可选)
|
|
14
|
+
|
|
15
|
+
## 完整示例
|
|
16
|
+
|
|
17
|
+
> 完整示例参考:[play/src/views/demo/detail.vue](../../play/src/views/demo/detail.vue)
|
|
18
|
+
|
|
19
|
+
```vue
|
|
20
|
+
<template>
|
|
21
|
+
<div>
|
|
22
|
+
<!-- 组件自由组合,以下仅为示例 -->
|
|
23
|
+
<EpHeader
|
|
24
|
+
:buttons="headerButtons"
|
|
25
|
+
></EpHeader>
|
|
26
|
+
|
|
27
|
+
<EpForm
|
|
28
|
+
ref="epForm"
|
|
29
|
+
:formItemList="formItemList"
|
|
30
|
+
v-model="formData"
|
|
31
|
+
labelPosition="left"
|
|
32
|
+
></EpForm>
|
|
33
|
+
</div>
|
|
34
|
+
</template>
|
|
35
|
+
|
|
36
|
+
<script setup lang="tsx">
|
|
37
|
+
import type { FormProps, HeaderProps } from 'el-plus'
|
|
38
|
+
import {useNavigation} from 'el-plus'
|
|
39
|
+
import { reactive, computed, useTemplateRef } from 'vue'
|
|
40
|
+
import { useRoute, useRouter } from 'vue-router'
|
|
41
|
+
|
|
42
|
+
defineOptions({
|
|
43
|
+
name: 'DemoDetail'
|
|
44
|
+
})
|
|
45
|
+
|
|
46
|
+
const route = useRoute()
|
|
47
|
+
const router = useRouter()
|
|
48
|
+
const epForm = useTemplateRef('epForm')
|
|
49
|
+
const { isEdit } = useNavigation()
|
|
50
|
+
const id = route.query.id
|
|
51
|
+
|
|
52
|
+
// 顶部按钮 - 参考 EpHeader 文档
|
|
53
|
+
const headerButtons: HeaderProps['buttons'] = [
|
|
54
|
+
// 按钮配置
|
|
55
|
+
]
|
|
56
|
+
|
|
57
|
+
// 表单数据
|
|
58
|
+
const formData = reactive({
|
|
59
|
+
// 字段定义
|
|
60
|
+
})
|
|
61
|
+
|
|
62
|
+
// 表单配置 - 组件自由组合,参考各组件文档
|
|
63
|
+
const formItemList = ref<FormProps['formItemList']>([
|
|
64
|
+
// 组件自由组合
|
|
65
|
+
])
|
|
66
|
+
|
|
67
|
+
// 保存
|
|
68
|
+
const handleSave = async () => {
|
|
69
|
+
const valid = await epForm.value?.validate()
|
|
70
|
+
if (valid) {
|
|
71
|
+
// TODO: 调用保存接口
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
// 加载数据
|
|
76
|
+
if (isEdit.value === 'edit' && id) {
|
|
77
|
+
// TODO: 调用接口获取详情
|
|
78
|
+
}
|
|
79
|
+
</script>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## 组件文档
|
|
83
|
+
|
|
84
|
+
> 查看所有可用组件:[组件文档索引](../components/index.md)
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
# 列表页面
|
|
2
|
+
|
|
3
|
+
列表页面是最常见的业务页面类型,使用 EpSearchListPage 组件实现。
|
|
4
|
+
|
|
5
|
+
## 页面结构
|
|
6
|
+
|
|
7
|
+
- **EpSearchListPage**: 列表页容器组件,集成搜索表单和数据表格
|
|
8
|
+
- 组件自由组合,参考各组件文档配置
|
|
9
|
+
|
|
10
|
+
## 完整示例
|
|
11
|
+
|
|
12
|
+
> 完整示例参考:[play/src/views/demo/list.vue](../../play/src/views/demo/list.vue)
|
|
13
|
+
|
|
14
|
+
```vue
|
|
15
|
+
<template>
|
|
16
|
+
<EpSearchListPage
|
|
17
|
+
:form-item-list="formItemList"
|
|
18
|
+
:form-data="formData"
|
|
19
|
+
:columns="columns"
|
|
20
|
+
:left-buttons="leftButtons"
|
|
21
|
+
api="/api/your-api/page"
|
|
22
|
+
:add="handleAdd"
|
|
23
|
+
show-selection-col
|
|
24
|
+
:action-buttons="actionButtons"
|
|
25
|
+
/>
|
|
26
|
+
</template>
|
|
27
|
+
|
|
28
|
+
<script setup lang="tsx">
|
|
29
|
+
import { ref, reactive } from 'vue'
|
|
30
|
+
import { useNavigation } from 'el-plus'
|
|
31
|
+
import type { SearchListPageProps } from 'el-plus'
|
|
32
|
+
|
|
33
|
+
defineOptions({
|
|
34
|
+
name: 'DemoList'
|
|
35
|
+
})
|
|
36
|
+
|
|
37
|
+
const { $goto } = useNavigation()
|
|
38
|
+
|
|
39
|
+
const formData = reactive({
|
|
40
|
+
// 表单数据
|
|
41
|
+
})
|
|
42
|
+
|
|
43
|
+
// 搜索表单配置 - 组件自由组合
|
|
44
|
+
const formItemList = ref<SearchListPageProps['formItemList']>([
|
|
45
|
+
// 参考各组件文档配置
|
|
46
|
+
])
|
|
47
|
+
|
|
48
|
+
// 表格列配置
|
|
49
|
+
const columns:SearchListPageProps['columns'] = [
|
|
50
|
+
// 参考 EpTable 文档
|
|
51
|
+
]
|
|
52
|
+
|
|
53
|
+
// 左侧按钮配置
|
|
54
|
+
const leftButtons:SearchListPageProps['leftButtons']=[
|
|
55
|
+
// 按钮配置
|
|
56
|
+
]
|
|
57
|
+
|
|
58
|
+
// 行操作按钮
|
|
59
|
+
const actionButtons:SearchListPageProps['actionButtons']=[
|
|
60
|
+
// 操作按钮配置
|
|
61
|
+
]
|
|
62
|
+
|
|
63
|
+
// 新增
|
|
64
|
+
const handleAdd = () => {
|
|
65
|
+
$goto({
|
|
66
|
+
name: 'DemoDetail',
|
|
67
|
+
query: { mode: 'add' }
|
|
68
|
+
})
|
|
69
|
+
}
|
|
70
|
+
</script>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
## 组件文档
|
|
74
|
+
|
|
75
|
+
> 查看所有可用组件:[组件文档索引](../components/index.md)
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Command } from 'commander';
|
|
2
|
+
export type AgentType = 'claude-code' | 'qoder' | 'cursor' | 'windsurf' | 'trae' | 'trae-cn' | 'cline' | 'copilot' | 'gemini-cli' | 'opencode' | 'goose' | 'universal';
|
|
3
|
+
export interface AgentConfig {
|
|
4
|
+
name: string;
|
|
5
|
+
displayName: string;
|
|
6
|
+
skillsDir: string;
|
|
7
|
+
globalSkillsDir: string | undefined;
|
|
8
|
+
detectInstalled: () => Promise<boolean>;
|
|
9
|
+
installMode: 'skill' | 'rules';
|
|
10
|
+
rulesFile?: string;
|
|
11
|
+
}
|
|
12
|
+
export declare const agents: Record<AgentType, AgentConfig>;
|
|
13
|
+
export declare const installCommand: Command;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
export type ListSectionType = 'form' | 'toolbar' | 'table' | 'dialog';
|
|
2
|
+
export type DetailSectionType = 'header' | 'title' | 'form' | 'table' | 'attachment' | 'footer' | 'dialog';
|
|
3
|
+
export type SectionType = ListSectionType | DetailSectionType;
|
|
4
|
+
export type PageType = 'list' | 'detail' | 'mixed';
|
|
5
|
+
export type FormFieldType = 'input' | 'select' | 'date' | 'dateRange' | 'textarea' | 'number' | 'radio' | 'checkbox' | 'unknown';
|
|
6
|
+
export interface FormField {
|
|
7
|
+
label: string;
|
|
8
|
+
fieldType: FormFieldType;
|
|
9
|
+
}
|
|
10
|
+
export interface PageSection {
|
|
11
|
+
type: SectionType;
|
|
12
|
+
title?: string;
|
|
13
|
+
labels: string[];
|
|
14
|
+
buttons: string[];
|
|
15
|
+
tableHeaders: string[];
|
|
16
|
+
formFields?: FormField[];
|
|
17
|
+
}
|
|
18
|
+
export interface ParsedPageData {
|
|
19
|
+
title: string;
|
|
20
|
+
sections: PageSection[];
|
|
21
|
+
pageType: PageType;
|
|
22
|
+
rawText: string;
|
|
23
|
+
url: string;
|
|
24
|
+
}
|
|
25
|
+
export declare class ModaoParser {
|
|
26
|
+
private browser;
|
|
27
|
+
private page;
|
|
28
|
+
init(): Promise<void>;
|
|
29
|
+
close(): Promise<void>;
|
|
30
|
+
parse(url: string): Promise<ParsedPageData>;
|
|
31
|
+
private delay;
|
|
32
|
+
}
|
|
33
|
+
export declare function parseModaoPage(url: string): Promise<ParsedPageData>;
|
|
@@ -25,7 +25,7 @@ export declare const EpButtons: {
|
|
|
25
25
|
};
|
|
26
26
|
readonly type: {
|
|
27
27
|
readonly default: "default";
|
|
28
|
-
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "text" | "success" | "
|
|
28
|
+
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "text" | "success" | "primary" | "warning" | "info" | "default" | "danger", unknown>>;
|
|
29
29
|
readonly required: false;
|
|
30
30
|
readonly validator: ((val: unknown) => boolean) | undefined;
|
|
31
31
|
readonly __epPropKey: true;
|
|
@@ -54,12 +54,25 @@ export declare const EpButtons: {
|
|
|
54
54
|
readonly autoInsertSpace: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
|
|
55
55
|
readonly tag: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown, "button", boolean>;
|
|
56
56
|
}>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
|
|
57
|
+
readonly list: Partial<Omit<import("element-plus").ButtonProps, "disabled"> & {
|
|
58
|
+
name: string;
|
|
59
|
+
prop: string;
|
|
60
|
+
permission: string;
|
|
61
|
+
onClick: (e: MouseEvent | import("el-plus/es").TableScope) => void;
|
|
62
|
+
scopedSlots: Record<string, () => import("vue").VNode>;
|
|
63
|
+
disabled: import("el-plus/es/utils").IDisabled;
|
|
64
|
+
confirm: boolean;
|
|
65
|
+
confirmText: string;
|
|
66
|
+
} & {} & {
|
|
67
|
+
show?: (boolean | ((T: unknown) => boolean)) | undefined;
|
|
68
|
+
hide?: (boolean | ((T: unknown) => boolean)) | undefined;
|
|
69
|
+
}>[];
|
|
57
70
|
readonly link: boolean;
|
|
58
71
|
readonly circle: boolean;
|
|
59
72
|
readonly text: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
|
73
|
+
readonly type: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "text" | "success" | "primary" | "warning" | "info" | "default" | "danger", unknown>;
|
|
60
74
|
readonly size: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>;
|
|
61
75
|
readonly loading: boolean;
|
|
62
|
-
readonly type: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "text" | "success" | "default" | "primary" | "warning" | "info" | "danger", unknown>;
|
|
63
76
|
readonly plain: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
|
64
77
|
readonly nativeType: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "button" | "reset" | "submit", unknown>;
|
|
65
78
|
readonly loadingIcon: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>;
|
|
@@ -69,19 +82,6 @@ export declare const EpButtons: {
|
|
|
69
82
|
readonly dark: boolean;
|
|
70
83
|
readonly autoInsertSpace: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
|
71
84
|
readonly tag: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>;
|
|
72
|
-
readonly list: Partial<Omit<import("element-plus").ButtonProps, "disabled"> & {
|
|
73
|
-
name: string;
|
|
74
|
-
prop: string;
|
|
75
|
-
permission: string;
|
|
76
|
-
onClick: (e: MouseEvent | import("el-plus/es").TableScope) => void;
|
|
77
|
-
scopedSlots: Record<string, () => import("vue").VNode>;
|
|
78
|
-
disabled: import("el-plus/es/utils").IDisabled;
|
|
79
|
-
confirm: boolean;
|
|
80
|
-
confirmText: string;
|
|
81
|
-
} & {} & {
|
|
82
|
-
show?: (boolean | ((T: unknown) => boolean)) | undefined;
|
|
83
|
-
hide?: (boolean | ((T: unknown) => boolean)) | undefined;
|
|
84
|
-
}>[];
|
|
85
85
|
}, true, {}, {}, import("vue").GlobalComponents, {
|
|
86
86
|
[x: string]: (import("vue").ObjectDirective<import("el-plus/es/directives/repeat-click").RepeatClickEl, import("el-plus/es/directives/repeat-click").RepeatClickOptions, string, any> & {
|
|
87
87
|
name: string;
|
|
@@ -121,7 +121,7 @@ export declare const EpButtons: {
|
|
|
121
121
|
};
|
|
122
122
|
readonly type: {
|
|
123
123
|
readonly default: "default";
|
|
124
|
-
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "text" | "success" | "
|
|
124
|
+
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "text" | "success" | "primary" | "warning" | "info" | "default" | "danger", unknown>>;
|
|
125
125
|
readonly required: false;
|
|
126
126
|
readonly validator: ((val: unknown) => boolean) | undefined;
|
|
127
127
|
readonly __epPropKey: true;
|
|
@@ -150,12 +150,25 @@ export declare const EpButtons: {
|
|
|
150
150
|
readonly autoInsertSpace: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
|
|
151
151
|
readonly tag: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown, "button", boolean>;
|
|
152
152
|
}>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
|
|
153
|
+
readonly list: Partial<Omit<import("element-plus").ButtonProps, "disabled"> & {
|
|
154
|
+
name: string;
|
|
155
|
+
prop: string;
|
|
156
|
+
permission: string;
|
|
157
|
+
onClick: (e: MouseEvent | import("el-plus/es").TableScope) => void;
|
|
158
|
+
scopedSlots: Record<string, () => import("vue").VNode>;
|
|
159
|
+
disabled: import("el-plus/es/utils").IDisabled;
|
|
160
|
+
confirm: boolean;
|
|
161
|
+
confirmText: string;
|
|
162
|
+
} & {} & {
|
|
163
|
+
show?: (boolean | ((T: unknown) => boolean)) | undefined;
|
|
164
|
+
hide?: (boolean | ((T: unknown) => boolean)) | undefined;
|
|
165
|
+
}>[];
|
|
153
166
|
readonly link: boolean;
|
|
154
167
|
readonly circle: boolean;
|
|
155
168
|
readonly text: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
|
169
|
+
readonly type: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "text" | "success" | "primary" | "warning" | "info" | "default" | "danger", unknown>;
|
|
156
170
|
readonly size: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>;
|
|
157
171
|
readonly loading: boolean;
|
|
158
|
-
readonly type: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "text" | "success" | "default" | "primary" | "warning" | "info" | "danger", unknown>;
|
|
159
172
|
readonly plain: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
|
160
173
|
readonly nativeType: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "button" | "reset" | "submit", unknown>;
|
|
161
174
|
readonly loadingIcon: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>;
|
|
@@ -165,19 +178,6 @@ export declare const EpButtons: {
|
|
|
165
178
|
readonly dark: boolean;
|
|
166
179
|
readonly autoInsertSpace: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
|
167
180
|
readonly tag: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>;
|
|
168
|
-
readonly list: Partial<Omit<import("element-plus").ButtonProps, "disabled"> & {
|
|
169
|
-
name: string;
|
|
170
|
-
prop: string;
|
|
171
|
-
permission: string;
|
|
172
|
-
onClick: (e: MouseEvent | import("el-plus/es").TableScope) => void;
|
|
173
|
-
scopedSlots: Record<string, () => import("vue").VNode>;
|
|
174
|
-
disabled: import("el-plus/es/utils").IDisabled;
|
|
175
|
-
confirm: boolean;
|
|
176
|
-
confirmText: string;
|
|
177
|
-
} & {} & {
|
|
178
|
-
show?: (boolean | ((T: unknown) => boolean)) | undefined;
|
|
179
|
-
hide?: (boolean | ((T: unknown) => boolean)) | undefined;
|
|
180
|
-
}>[];
|
|
181
181
|
}>;
|
|
182
182
|
__isFragment?: never;
|
|
183
183
|
__isTeleport?: never;
|
|
@@ -196,7 +196,7 @@ export declare const EpButtons: {
|
|
|
196
196
|
};
|
|
197
197
|
readonly type: {
|
|
198
198
|
readonly default: "default";
|
|
199
|
-
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "text" | "success" | "
|
|
199
|
+
readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "text" | "success" | "primary" | "warning" | "info" | "default" | "danger", unknown>>;
|
|
200
200
|
readonly required: false;
|
|
201
201
|
readonly validator: ((val: unknown) => boolean) | undefined;
|
|
202
202
|
readonly __epPropKey: true;
|
|
@@ -225,12 +225,25 @@ export declare const EpButtons: {
|
|
|
225
225
|
readonly autoInsertSpace: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
|
|
226
226
|
readonly tag: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown, "button", boolean>;
|
|
227
227
|
}>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
|
|
228
|
+
readonly list: Partial<Omit<import("element-plus").ButtonProps, "disabled"> & {
|
|
229
|
+
name: string;
|
|
230
|
+
prop: string;
|
|
231
|
+
permission: string;
|
|
232
|
+
onClick: (e: MouseEvent | import("el-plus/es").TableScope) => void;
|
|
233
|
+
scopedSlots: Record<string, () => import("vue").VNode>;
|
|
234
|
+
disabled: import("el-plus/es/utils").IDisabled;
|
|
235
|
+
confirm: boolean;
|
|
236
|
+
confirmText: string;
|
|
237
|
+
} & {} & {
|
|
238
|
+
show?: (boolean | ((T: unknown) => boolean)) | undefined;
|
|
239
|
+
hide?: (boolean | ((T: unknown) => boolean)) | undefined;
|
|
240
|
+
}>[];
|
|
228
241
|
readonly link: boolean;
|
|
229
242
|
readonly circle: boolean;
|
|
230
243
|
readonly text: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
|
244
|
+
readonly type: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "text" | "success" | "primary" | "warning" | "info" | "default" | "danger", unknown>;
|
|
231
245
|
readonly size: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>;
|
|
232
246
|
readonly loading: boolean;
|
|
233
|
-
readonly type: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "text" | "success" | "default" | "primary" | "warning" | "info" | "danger", unknown>;
|
|
234
247
|
readonly plain: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
|
235
248
|
readonly nativeType: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "button" | "reset" | "submit", unknown>;
|
|
236
249
|
readonly loadingIcon: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>;
|
|
@@ -240,19 +253,6 @@ export declare const EpButtons: {
|
|
|
240
253
|
readonly dark: boolean;
|
|
241
254
|
readonly autoInsertSpace: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
|
242
255
|
readonly tag: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component) | ((new (...args: any[]) => (string | import("vue").Component) & {}) | (() => string | import("vue").Component))[], unknown, unknown>;
|
|
243
|
-
readonly list: Partial<Omit<import("element-plus").ButtonProps, "disabled"> & {
|
|
244
|
-
name: string;
|
|
245
|
-
prop: string;
|
|
246
|
-
permission: string;
|
|
247
|
-
onClick: (e: MouseEvent | import("el-plus/es").TableScope) => void;
|
|
248
|
-
scopedSlots: Record<string, () => import("vue").VNode>;
|
|
249
|
-
disabled: import("el-plus/es/utils").IDisabled;
|
|
250
|
-
confirm: boolean;
|
|
251
|
-
confirmText: string;
|
|
252
|
-
} & {} & {
|
|
253
|
-
show?: (boolean | ((T: unknown) => boolean)) | undefined;
|
|
254
|
-
hide?: (boolean | ((T: unknown) => boolean)) | undefined;
|
|
255
|
-
}>[];
|
|
256
256
|
}, {}, string, {}, import("vue").GlobalComponents, {
|
|
257
257
|
[x: string]: (import("vue").ObjectDirective<import("el-plus/es/directives/repeat-click").RepeatClickEl, import("el-plus/es/directives/repeat-click").RepeatClickOptions, string, any> & {
|
|
258
258
|
name: string;
|