@apform-ui/core 1.7.2 → 1.7.4
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 +144 -71
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,106 +1,179 @@
|
|
|
1
1
|
# @apform-ui/core
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
基于 Element Plus 的企业级 Vue 3 UI 组件库，为 Schema Platform 提供统一设计语言。
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@apform-ui/core)
|
|
6
|
+
[](https://github.com/nan1010082085/apform-ui/blob/main/LICENSE)
|
|
4
7
|
|
|
5
8
|
## 安装
|
|
6
9
|
|
|
7
10
|
```bash
|
|
8
|
-
npm install @apform-ui/core
|
|
11
|
+
npm install @apform-ui/core
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
需要同时安装 peer dependencies：
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install element-plus@2.14.2 vue@^3.5.0
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## 快速开始
|
|
21
|
+
|
|
22
|
+
```typescript
|
|
23
|
+
import {
|
|
24
|
+
PageShell,
|
|
25
|
+
PageHeader,
|
|
26
|
+
ContentPanel,
|
|
27
|
+
CardTable,
|
|
28
|
+
FilterBar,
|
|
29
|
+
} from '@apform-ui/core'
|
|
30
|
+
|
|
31
|
+
// 样式（按需引入）
|
|
32
|
+
import '@apform-ui/core/tokens.css'
|
|
33
|
+
import '@apform-ui/core/design-tokens.css'
|
|
34
|
+
import '@apform-ui/core/styles/element-override.css'
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
```vue
|
|
38
|
+
<template>
|
|
39
|
+
<PageShell>
|
|
40
|
+
<PageHeader title="用户管理">
|
|
41
|
+
<template #actions>
|
|
42
|
+
<el-button type="primary">新增</el-button>
|
|
43
|
+
</template>
|
|
44
|
+
</PageHeader>
|
|
45
|
+
<ContentPanel>
|
|
46
|
+
<FilterBar :filters="filters" @search="onSearch" />
|
|
47
|
+
<CardTable :data="users" :columns="columns" />
|
|
48
|
+
</ContentPanel>
|
|
49
|
+
</PageShell>
|
|
50
|
+
</template>
|
|
9
51
|
```
|
|
10
52
|
|
|
11
53
|
## 组件
|
|
12
54
|
|
|
55
|
+
### 布局与导航
|
|
56
|
+
|
|
13
57
|
| 组件 | 说明 |
|
|
14
58
|
|------|------|
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
17
|
-
| `
|
|
18
|
-
| `
|
|
19
|
-
| `
|
|
20
|
-
| `Skeleton` | 骨架屏（card/list/table） |
|
|
21
|
-
| `CardGridSkeleton` | 卡片网格骨架 |
|
|
22
|
-
| `EmptyState` | 空状态占位 |
|
|
23
|
-
| `ErrorBoundary` | 错误边界 |
|
|
24
|
-
| `FilterTabs` | 筛选标签栏 |
|
|
25
|
-
| `ConfirmDialog` | 确认弹框 |
|
|
26
|
-
| `FormDialog` | 表单弹框 |
|
|
27
|
-
| `Toast` | 轻提示 |
|
|
28
|
-
| `AppUserPanel` | 用户入口面板（props + logout emit） |
|
|
29
|
-
| `SliderCaptcha` | 滑块验证码（须注入 fetchCaptcha） |
|
|
30
|
-
| `DocumentPreviewPanel` / `DocumentPreviewDrawer` | 文档预览（纯展示，无 API） |
|
|
31
|
-
| `PdfPreviewCard` / `ExcelPreviewCard` | PDF/Excel 预览（optional peer 增强） |
|
|
32
|
-
| `AssistantPicker` / `ModelPicker` | 对话智能体 / 模型选择器（props 驱动） |
|
|
33
|
-
| `JsonCard` / `JsonDetailDialog` / `SchemaLitePreview` | JSON / Schema 预览 |
|
|
59
|
+
| `PageShell` | 页面外壳，统一页面结构 |
|
|
60
|
+
| `PageHeader` | 页头，支持标题、操作按钮、面包屑 |
|
|
61
|
+
| `BreadcrumbNav` | 面包屑导航 |
|
|
62
|
+
| `ContentPanel` | 内容面板 |
|
|
63
|
+
| `SectionToggle` | 折叠区域 |
|
|
34
64
|
|
|
35
|
-
|
|
65
|
+
### 数据展示
|
|
66
|
+
|
|
67
|
+
| 组件 | 说明 |
|
|
68
|
+
|------|------|
|
|
69
|
+
| `CardTable` | 卡片表格 |
|
|
70
|
+
| `CardGridSkeleton` | 卡片网格骨架屏 |
|
|
71
|
+
| `StatusTag` | 状态标签 |
|
|
72
|
+
| `JsonCard` | JSON 数据卡片 |
|
|
73
|
+
| `JsonDetailDialog` | JSON 详情弹窗 |
|
|
74
|
+
| `TableRowActions` | 表格行操作按钮 |
|
|
75
|
+
| `TruncatedTooltipText` | 超长文本省略 + Tooltip |
|
|
76
|
+
| `UserAvatar` | 用户头像 |
|
|
77
|
+
|
|
78
|
+
### 表单与输入
|
|
36
79
|
|
|
37
|
-
|
|
|
38
|
-
|
|
39
|
-
| `
|
|
40
|
-
| `
|
|
41
|
-
| `
|
|
42
|
-
| `
|
|
43
|
-
| `
|
|
44
|
-
| `
|
|
45
|
-
| `
|
|
80
|
+
| 组件 | 说明 |
|
|
81
|
+
|------|------|
|
|
82
|
+
| `FilterBar` | 筛选栏 |
|
|
83
|
+
| `FilterTabs` | 筛选标签页 |
|
|
84
|
+
| `SearchForm` | 搜索表单 |
|
|
85
|
+
| `FieldRow` | 表单字段行 |
|
|
86
|
+
| `HintText` | 字段提示文本 |
|
|
87
|
+
| `AppPagination` | 分页器 |
|
|
88
|
+
| `SliderCaptcha` | 滑块验证码 |
|
|
46
89
|
|
|
47
|
-
|
|
90
|
+
### 反馈与弹窗
|
|
48
91
|
|
|
49
|
-
|
|
92
|
+
| 组件 | 说明 |
|
|
93
|
+
|------|------|
|
|
94
|
+
| `AppDialog` | 通用弹窗 |
|
|
95
|
+
| `FormDialog` | 表单弹窗 |
|
|
96
|
+
| `ConfirmDialog` | 确认弹窗 |
|
|
97
|
+
| `Toast` | 轻提示 |
|
|
98
|
+
| `ErrorBoundary` | 错误边界 |
|
|
99
|
+
| `EmptyState` | 空状态 |
|
|
100
|
+
| `LoadingDots` | 加载动画 |
|
|
101
|
+
| `Skeleton` | 骨架屏 |
|
|
50
102
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
103
|
+
### AI / 对话
|
|
104
|
+
|
|
105
|
+
| 组件 | 说明 |
|
|
106
|
+
|------|------|
|
|
107
|
+
| `Chat/MessageBubble` | 消息气泡 |
|
|
108
|
+
| `Chat/MessageList` | 消息列表 |
|
|
109
|
+
| `Chat/Composer` | 输入框 |
|
|
110
|
+
| `Chat/ConversationHeader` | 会话头部 |
|
|
111
|
+
| `Chat/ModelPicker` | 模型选择器 |
|
|
112
|
+
| `Chat/AssistantPicker` | 助手选择器 |
|
|
113
|
+
| `Chat/SessionSidebar` | 会话侧边栏 |
|
|
114
|
+
| `Chat/RunStatusBar` | 运行状态条 |
|
|
115
|
+
| `Chat/ProcessingDrawer` | 处理抽屉 |
|
|
116
|
+
| `Chat/ApprovalCard` | 审批卡片 |
|
|
117
|
+
|
|
118
|
+
### 文件预览
|
|
54
119
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
120
|
+
| 组件 | 说明 |
|
|
121
|
+
|------|------|
|
|
122
|
+
| `DocumentPreview` | 文档预览（PDF/Excel/图片） |
|
|
123
|
+
| `PdfPreviewCard` | PDF 预览卡（需 `pdfjs-dist`） |
|
|
124
|
+
| `ExcelPreviewCard` | Excel 预览卡（需 `xlsx`） |
|
|
125
|
+
| `SchemaLitePreview` | Schema 轻量预览 |
|
|
58
126
|
|
|
59
|
-
|
|
127
|
+
### 通用
|
|
60
128
|
|
|
61
|
-
|
|
|
129
|
+
| 组件 | 说明 |
|
|
62
130
|
|------|------|
|
|
63
|
-
| `
|
|
64
|
-
| `
|
|
131
|
+
| `AppIcon` | 图标组件 |
|
|
132
|
+
| `AppUserPanel` | 用户信息面板 |
|
|
65
133
|
|
|
66
|
-
##
|
|
134
|
+
## Composables
|
|
67
135
|
|
|
68
|
-
```
|
|
69
|
-
<script setup>
|
|
136
|
+
```typescript
|
|
70
137
|
import {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
138
|
+
useToast, // 轻提示
|
|
139
|
+
useConfirm, // 确认对话框
|
|
140
|
+
useMessage, // 消息通知
|
|
141
|
+
useDebounceFn, // 防抖函数
|
|
142
|
+
useClientPagination, // 客户端分页
|
|
143
|
+
useDataLoading, // 数据加载状态
|
|
144
|
+
useChatScroll, // 对话滚动
|
|
145
|
+
useClipboard, // 剪贴板操作
|
|
74
146
|
} from '@apform-ui/core'
|
|
75
|
-
import '@apform-ui/core/tokens.css'
|
|
76
|
-
import '@apform-ui/core/design-tokens.css'
|
|
77
|
-
|
|
78
|
-
const msg = useMessage()
|
|
79
|
-
const { confirm, confirmDelete } = useConfirm()
|
|
80
|
-
</script>
|
|
81
|
-
|
|
82
|
-
<template>
|
|
83
|
-
<AppIcon name="setting" :size="18" />
|
|
84
|
-
<StatusTag status="approved" />
|
|
85
|
-
<EmptyState icon="files" title="暂无数据" />
|
|
86
|
-
<AppPagination v-model:current-page="page" :total="100" />
|
|
87
|
-
</template>
|
|
88
147
|
```
|
|
89
148
|
|
|
90
|
-
##
|
|
149
|
+
## 主题
|
|
150
|
+
|
|
151
|
+
内置暗色 / 明亮两套主题，通过 CSS 变量自定义：
|
|
91
152
|
|
|
92
153
|
```css
|
|
93
|
-
|
|
94
|
-
|
|
154
|
+
:root {
|
|
155
|
+
--apform-primary-color: #409eff;
|
|
156
|
+
--apform-bg-color: #ffffff;
|
|
157
|
+
--apform-text-color: #303133;
|
|
158
|
+
}
|
|
95
159
|
```
|
|
96
160
|
|
|
97
|
-
|
|
161
|
+
引入暗色主题：
|
|
98
162
|
|
|
99
|
-
|
|
163
|
+
```typescript
|
|
164
|
+
import '@apform-ui/core/theme/dark.css'
|
|
165
|
+
```
|
|
100
166
|
|
|
101
|
-
##
|
|
167
|
+
## 样式文件
|
|
102
168
|
|
|
103
|
-
|
|
|
169
|
+
| 路径 | 说明 |
|
|
104
170
|
|------|------|
|
|
105
|
-
|
|
|
106
|
-
|
|
|
171
|
+
| `@apform-ui/core/style.css` | 组件样式（全量） |
|
|
172
|
+
| `@apform-ui/core/tokens.css` | 设计 Token |
|
|
173
|
+
| `@apform-ui/core/design-tokens.css` | 设计系统 Token |
|
|
174
|
+
| `@apform-ui/core/styles/element-override.css` | Element Plus 样式覆盖 |
|
|
175
|
+
| `@apform-ui/core/styles/fg-theme.css` | 前台主题 |
|
|
176
|
+
|
|
177
|
+
## 许可证
|
|
178
|
+
|
|
179
|
+
[MIT](https://github.com/nan1010082085/apform-ui/blob/main/LICENSE)
|