@keqi.gress/plugin-ui 1.0.0 → 1.3.0
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 +326 -102
- package/dist/components/types.d.ts +184 -0
- package/dist/components/types.d.ts.map +1 -0
- package/dist/index.cjs +952 -11
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +15 -5
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +953 -12
- package/dist/index.js.map +1 -1
- package/dist/style.css +2944 -19
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,155 +1,379 @@
|
|
|
1
|
-
# @gress/plugin-ui
|
|
1
|
+
# @keqi.gress/plugin-ui
|
|
2
2
|
|
|
3
|
-
Gress 插件 UI 组件和样式包 -
|
|
3
|
+
Gress 插件 UI 组件和样式包 - 提供统一的设计系统、通用组件和完整的样式系统。
|
|
4
4
|
|
|
5
5
|
## 📦 安装
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm install @gress/plugin-ui
|
|
8
|
+
npm install @keqi.gress/plugin-ui
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
## 🚀 快速开始
|
|
12
12
|
|
|
13
|
-
### 导入样式
|
|
14
|
-
|
|
15
|
-
在你的插件入口文件中导入样式:
|
|
13
|
+
### 1. 导入样式
|
|
16
14
|
|
|
17
15
|
```typescript
|
|
18
|
-
|
|
16
|
+
// main.ts
|
|
17
|
+
import '@keqi.gress/plugin-ui/dist/style.css'
|
|
19
18
|
```
|
|
20
19
|
|
|
21
|
-
###
|
|
20
|
+
### 2. 使用组件
|
|
22
21
|
|
|
23
|
-
```
|
|
24
|
-
|
|
22
|
+
```vue
|
|
23
|
+
<template>
|
|
24
|
+
<PageContainer>
|
|
25
|
+
<PageHeader title="我的页面" breadcrumb="首页 / 我的页面" />
|
|
26
|
+
<PageContent>
|
|
27
|
+
<CardList>
|
|
28
|
+
<div class="card">卡片内容</div>
|
|
29
|
+
</CardList>
|
|
30
|
+
</PageContent>
|
|
31
|
+
</PageContainer>
|
|
32
|
+
</template>
|
|
25
33
|
|
|
26
|
-
|
|
27
|
-
|
|
34
|
+
<script setup lang="ts">
|
|
35
|
+
import { PageContainer, PageHeader, PageContent, CardList } from '@keqi.gress/plugin-ui'
|
|
36
|
+
</script>
|
|
37
|
+
```
|
|
28
38
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
39
|
+
## 📚 组件列表
|
|
40
|
+
|
|
41
|
+
### 布局组件(3个)
|
|
42
|
+
|
|
43
|
+
#### PageContainer
|
|
44
|
+
页面容器组件,提供统一的页面布局。
|
|
35
45
|
|
|
36
|
-
|
|
37
|
-
|
|
46
|
+
```vue
|
|
47
|
+
<PageContainer>
|
|
48
|
+
<!-- 页面内容 -->
|
|
49
|
+
</PageContainer>
|
|
38
50
|
```
|
|
39
51
|
|
|
40
|
-
|
|
52
|
+
#### PageContent
|
|
53
|
+
页面内容区域组件。
|
|
41
54
|
|
|
42
55
|
```vue
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
<div v-else>
|
|
48
|
-
<!-- 你的内容 -->
|
|
49
|
-
</div>
|
|
50
|
-
</template>
|
|
56
|
+
<PageContent>
|
|
57
|
+
<!-- 内容 -->
|
|
58
|
+
</PageContent>
|
|
59
|
+
```
|
|
51
60
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
61
|
+
#### PageHeader
|
|
62
|
+
页面头部组件,显示标题和面包屑。
|
|
63
|
+
|
|
64
|
+
```vue
|
|
65
|
+
<PageHeader
|
|
66
|
+
title="页面标题"
|
|
67
|
+
breadcrumb="首页 / 当前页"
|
|
68
|
+
/>
|
|
55
69
|
```
|
|
56
70
|
|
|
57
|
-
|
|
71
|
+
**Props:**
|
|
72
|
+
- `title` (string, required): 页面标题
|
|
73
|
+
- `breadcrumb` (string, optional): 面包屑文本
|
|
58
74
|
|
|
59
|
-
###
|
|
75
|
+
### 数据展示组件(3个)
|
|
60
76
|
|
|
61
|
-
####
|
|
77
|
+
#### CardList
|
|
78
|
+
卡片列表容器,自动响应式布局。
|
|
62
79
|
|
|
63
|
-
|
|
80
|
+
```vue
|
|
81
|
+
<CardList size="medium" min-width="300px">
|
|
82
|
+
<div class="card">卡片1</div>
|
|
83
|
+
<div class="card">卡片2</div>
|
|
84
|
+
</CardList>
|
|
85
|
+
```
|
|
64
86
|
|
|
65
|
-
|
|
66
|
-
- `
|
|
67
|
-
- `
|
|
87
|
+
**Props:**
|
|
88
|
+
- `size` ('small' | 'medium' | 'large', optional): 卡片尺寸
|
|
89
|
+
- `minWidth` (string, optional): 最小宽度
|
|
68
90
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
- `error` - 错误对象
|
|
72
|
-
- `isEmpty` - 空状态
|
|
73
|
-
- `execute(fn, options?)` - 执行异步操作
|
|
91
|
+
#### PagePagination
|
|
92
|
+
分页组件。
|
|
74
93
|
|
|
75
|
-
|
|
94
|
+
```vue
|
|
95
|
+
<PagePagination
|
|
96
|
+
v-model:page="currentPage"
|
|
97
|
+
v-model:page-size="pageSize"
|
|
98
|
+
:total="total"
|
|
99
|
+
:page-sizes="[10, 20, 50, 100]"
|
|
100
|
+
:show-size-picker="true"
|
|
101
|
+
/>
|
|
102
|
+
```
|
|
76
103
|
|
|
77
|
-
|
|
104
|
+
**Props:**
|
|
105
|
+
- `page` (number, required): 当前页码
|
|
106
|
+
- `pageSize` (number, required): 每页条数
|
|
107
|
+
- `total` (number, required): 总条数
|
|
108
|
+
- `pageSizes` (number[], optional): 每页条数选项
|
|
109
|
+
- `showSizePicker` (boolean, optional): 是否显示每页条数选择器
|
|
110
|
+
|
|
111
|
+
**Events:**
|
|
112
|
+
- `update:page`: 页码变化
|
|
113
|
+
- `update:pageSize`: 每页条数变化
|
|
114
|
+
|
|
115
|
+
#### LogViewer
|
|
116
|
+
日志查看器组件,支持过滤、主题切换和自动滚动。
|
|
117
|
+
|
|
118
|
+
```vue
|
|
119
|
+
<LogViewer
|
|
120
|
+
:logs="logs"
|
|
121
|
+
:loading="loading"
|
|
122
|
+
:auto-scroll="true"
|
|
123
|
+
default-theme="light"
|
|
124
|
+
@refresh="handleRefresh"
|
|
125
|
+
@clear="handleClear"
|
|
126
|
+
/>
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
**Props:**
|
|
130
|
+
- `logs` (LogItem[], required): 日志列表
|
|
131
|
+
- `loading` (boolean, optional): 是否加载中
|
|
132
|
+
- `autoScroll` (boolean, optional): 是否自动滚动到底部
|
|
133
|
+
- `defaultTheme` ('light' | 'dark', optional): 默认主题
|
|
134
|
+
|
|
135
|
+
**Events:**
|
|
136
|
+
- `refresh`: 刷新日志
|
|
137
|
+
- `clear`: 清空日志
|
|
78
138
|
|
|
79
|
-
|
|
80
|
-
- `isMobile` - 是否移动端 (< 768px)
|
|
81
|
-
- `isTablet` - 是否平板 (768px - 1280px)
|
|
82
|
-
- `isDesktop` - 是否桌面端 (>= 1280px)
|
|
83
|
-
- `width` - 窗口宽度
|
|
84
|
-
- `height` - 窗口高度
|
|
139
|
+
### 交互组件(2个)
|
|
85
140
|
|
|
86
|
-
|
|
141
|
+
#### FilterPanel
|
|
142
|
+
过滤面板组件,支持基础和高级字段。
|
|
87
143
|
|
|
88
|
-
|
|
144
|
+
```vue
|
|
145
|
+
<FilterPanel
|
|
146
|
+
v-model:filters="filters"
|
|
147
|
+
v-model:show-advanced="showAdvanced"
|
|
148
|
+
:basic-fields="basicFields"
|
|
149
|
+
:advanced-fields="advancedFields"
|
|
150
|
+
@search="handleSearch"
|
|
151
|
+
@reset="handleReset"
|
|
152
|
+
/>
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
**Props:**
|
|
156
|
+
- `filters` (Record<string, unknown>, required): 过滤器值对象
|
|
157
|
+
- `basicFields` (FilterFieldConfig[], required): 基础字段配置
|
|
158
|
+
- `advancedFields` (FilterFieldConfig[], optional): 高级字段配置
|
|
159
|
+
- `showAdvanced` (boolean, optional): 是否展开高级字段
|
|
160
|
+
- `searchText` (string, optional): 搜索按钮文本
|
|
161
|
+
- `resetText` (string, optional): 重置按钮文本
|
|
162
|
+
|
|
163
|
+
**Events:**
|
|
164
|
+
- `update:filters`: 过滤器值变化
|
|
165
|
+
- `update:showAdvanced`: 展开状态变化
|
|
166
|
+
- `search`: 搜索
|
|
167
|
+
- `reset`: 重置
|
|
168
|
+
|
|
169
|
+
#### UniversalModal
|
|
170
|
+
通用弹窗组件,支持多种位置和可调整大小。
|
|
89
171
|
|
|
172
|
+
```vue
|
|
173
|
+
<UniversalModal
|
|
174
|
+
v-model:show="showModal"
|
|
175
|
+
title="弹窗标题"
|
|
176
|
+
subtitle="副标题"
|
|
177
|
+
position="right"
|
|
178
|
+
width="600px"
|
|
179
|
+
:show-mask="true"
|
|
180
|
+
:resizable="true"
|
|
181
|
+
:show-fullscreen="true"
|
|
182
|
+
@confirm="handleConfirm"
|
|
183
|
+
>
|
|
184
|
+
<div>弹窗内容</div>
|
|
185
|
+
</UniversalModal>
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
**Props:**
|
|
189
|
+
- `show` (boolean, required): 是否显示弹窗
|
|
190
|
+
- `title` (string, optional): 标题
|
|
191
|
+
- `subtitle` (string, optional): 副标题
|
|
192
|
+
- `position` ('center' | 'left' | 'right' | 'top' | 'bottom', optional): 位置
|
|
193
|
+
- `width` (string | number, optional): 宽度
|
|
194
|
+
- `height` (string | number, optional): 高度
|
|
195
|
+
- `showMask` (boolean, optional): 是否显示遮罩
|
|
196
|
+
- `maskClosable` (boolean, optional): 点击遮罩是否关闭
|
|
197
|
+
- `resizable` (boolean, optional): 是否可调整大小
|
|
198
|
+
- `showFullscreen` (boolean, optional): 显示全屏按钮
|
|
199
|
+
|
|
200
|
+
**Events:**
|
|
201
|
+
- `update:show`: 显示状态变化
|
|
202
|
+
- `close`: 关闭
|
|
203
|
+
- `cancel`: 取消
|
|
204
|
+
- `confirm`: 确认
|
|
205
|
+
|
|
206
|
+
**Slots:**
|
|
207
|
+
- `header`: 自定义头部
|
|
208
|
+
- `default`: 内容区域
|
|
209
|
+
- `footer`: 自定义底部
|
|
210
|
+
|
|
211
|
+
### 反馈组件(3个)
|
|
212
|
+
|
|
213
|
+
#### LoadingState
|
|
90
214
|
加载状态组件。
|
|
91
215
|
|
|
92
|
-
|
|
216
|
+
```vue
|
|
217
|
+
<LoadingState message="加载中..." />
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
**Props:**
|
|
221
|
+
- `message` (string, optional): 加载提示文本
|
|
93
222
|
|
|
223
|
+
#### EmptyState
|
|
94
224
|
空状态组件。
|
|
95
225
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
226
|
+
```vue
|
|
227
|
+
<EmptyState
|
|
228
|
+
message="暂无数据"
|
|
229
|
+
description="请尝试其他筛选条件"
|
|
230
|
+
/>
|
|
231
|
+
```
|
|
99
232
|
|
|
100
|
-
|
|
233
|
+
**Props:**
|
|
234
|
+
- `message` (string, optional): 主要提示文本
|
|
235
|
+
- `description` (string, optional): 描述文本
|
|
101
236
|
|
|
237
|
+
#### ErrorState
|
|
102
238
|
错误状态组件。
|
|
103
239
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
240
|
+
```vue
|
|
241
|
+
<ErrorState
|
|
242
|
+
message="加载失败"
|
|
243
|
+
:error="error"
|
|
244
|
+
@retry="handleRetry"
|
|
245
|
+
/>
|
|
246
|
+
```
|
|
247
|
+
|
|
248
|
+
**Props:**
|
|
249
|
+
- `message` (string, optional): 错误提示文本
|
|
250
|
+
- `error` (Error | string, optional): 错误对象或消息
|
|
107
251
|
|
|
108
|
-
|
|
252
|
+
**Events:**
|
|
253
|
+
- `retry`: 重试
|
|
109
254
|
|
|
110
|
-
|
|
255
|
+
## 🎨 样式系统
|
|
256
|
+
|
|
257
|
+
### CSS 变量
|
|
258
|
+
|
|
259
|
+
包提供了完整的 CSS 变量系统,支持运行时主题定制:
|
|
111
260
|
|
|
112
261
|
```css
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
--
|
|
116
|
-
--
|
|
117
|
-
--
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
--
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
--spacing-
|
|
133
|
-
--spacing-
|
|
134
|
-
--spacing-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
--radius-md
|
|
139
|
-
--radius-lg
|
|
140
|
-
|
|
141
|
-
/* 阴影 */
|
|
142
|
-
--shadow-sm
|
|
143
|
-
--shadow-md
|
|
144
|
-
--shadow-lg
|
|
145
|
-
|
|
146
|
-
/* 字体 */
|
|
147
|
-
--font-size-xs
|
|
148
|
-
--font-size-sm
|
|
149
|
-
--font-size-md
|
|
150
|
-
--font-size-lg
|
|
262
|
+
:root {
|
|
263
|
+
/* 主色 */
|
|
264
|
+
--primary-color: #18a058;
|
|
265
|
+
--primary-hover: #36ad6a;
|
|
266
|
+
--primary-pressed: #0c7a43;
|
|
267
|
+
|
|
268
|
+
/* 背景色 */
|
|
269
|
+
--body-color: #f5f5f5;
|
|
270
|
+
--card-color: #ffffff;
|
|
271
|
+
|
|
272
|
+
/* 文字色 */
|
|
273
|
+
--text-color: #333333;
|
|
274
|
+
--text-color-secondary: #666666;
|
|
275
|
+
|
|
276
|
+
/* 边框 */
|
|
277
|
+
--border-color: #e0e0e6;
|
|
278
|
+
--border-radius: 4px;
|
|
279
|
+
|
|
280
|
+
/* 间距 */
|
|
281
|
+
--spacing-xs: 4px;
|
|
282
|
+
--spacing-sm: 8px;
|
|
283
|
+
--spacing-md: 16px;
|
|
284
|
+
--spacing-lg: 24px;
|
|
285
|
+
--spacing-xl: 32px;
|
|
286
|
+
}
|
|
151
287
|
```
|
|
152
288
|
|
|
289
|
+
### SCSS Mixins
|
|
290
|
+
|
|
291
|
+
```scss
|
|
292
|
+
// 在组件中使用
|
|
293
|
+
<style lang="scss" scoped>
|
|
294
|
+
@import "@/styles/variables.scss";
|
|
295
|
+
@import "@/styles/mixins.scss";
|
|
296
|
+
|
|
297
|
+
.my-component {
|
|
298
|
+
@include card-shadow;
|
|
299
|
+
@include custom-scrollbar;
|
|
300
|
+
}
|
|
301
|
+
</style>
|
|
302
|
+
```
|
|
303
|
+
|
|
304
|
+
## 🔧 Composables
|
|
305
|
+
|
|
306
|
+
### useLoadingState
|
|
307
|
+
|
|
308
|
+
管理加载状态的组合式函数。
|
|
309
|
+
|
|
310
|
+
```typescript
|
|
311
|
+
import { useLoadingState } from '@keqi.gress/plugin-ui'
|
|
312
|
+
|
|
313
|
+
const { isLoading, startLoading, stopLoading, withLoading } = useLoadingState()
|
|
314
|
+
|
|
315
|
+
// 手动控制
|
|
316
|
+
startLoading()
|
|
317
|
+
// ... 异步操作
|
|
318
|
+
stopLoading()
|
|
319
|
+
|
|
320
|
+
// 自动包装
|
|
321
|
+
await withLoading(async () => {
|
|
322
|
+
await fetchData()
|
|
323
|
+
})
|
|
324
|
+
```
|
|
325
|
+
|
|
326
|
+
### useResponsive
|
|
327
|
+
|
|
328
|
+
响应式断点检测。
|
|
329
|
+
|
|
330
|
+
```typescript
|
|
331
|
+
import { useResponsive, breakpoints } from '@keqi.gress/plugin-ui'
|
|
332
|
+
|
|
333
|
+
const { isMobile, isTablet, isDesktop, currentBreakpoint } = useResponsive()
|
|
334
|
+
|
|
335
|
+
console.log(breakpoints) // { mobile: 768, tablet: 1024, desktop: 1280 }
|
|
336
|
+
```
|
|
337
|
+
|
|
338
|
+
## 📖 类型支持
|
|
339
|
+
|
|
340
|
+
包提供完整的 TypeScript 类型定义:
|
|
341
|
+
|
|
342
|
+
```typescript
|
|
343
|
+
import type {
|
|
344
|
+
PageHeaderProps,
|
|
345
|
+
CardListProps,
|
|
346
|
+
PagePaginationProps,
|
|
347
|
+
LogItem,
|
|
348
|
+
LogViewerProps,
|
|
349
|
+
FilterFieldConfig,
|
|
350
|
+
UniversalModalProps,
|
|
351
|
+
PositionType
|
|
352
|
+
} from '@keqi.gress/plugin-ui'
|
|
353
|
+
```
|
|
354
|
+
|
|
355
|
+
## 🎯 设计原则
|
|
356
|
+
|
|
357
|
+
1. **零依赖设计** - 不强制依赖 Naive UI 或其他 UI 库
|
|
358
|
+
2. **插槽优先** - 支持自定义渲染
|
|
359
|
+
3. **CSS 变量** - 支持运行时主题定制
|
|
360
|
+
4. **TypeScript** - 完整的类型支持
|
|
361
|
+
5. **响应式** - 移动端友好
|
|
362
|
+
|
|
363
|
+
## 📦 包信息
|
|
364
|
+
|
|
365
|
+
- **版本**: 1.3.0
|
|
366
|
+
- **大小**: 63.23 kB (未压缩) / 9.21 kB (gzip)
|
|
367
|
+
- **组件数量**: 11 个
|
|
368
|
+
- **依赖**: Vue 3.3+
|
|
369
|
+
|
|
370
|
+
## 🔗 相关链接
|
|
371
|
+
|
|
372
|
+
- [CHANGELOG](./CHANGELOG_V1.3.md)
|
|
373
|
+
- [组件迁移计划](./COMPONENT_MIGRATION_PLAN.md)
|
|
374
|
+
- [样式系统集成](./STYLE_SYSTEM_INTEGRATION.md)
|
|
375
|
+
- [使用示例](./USAGE_EXAMPLES.md)
|
|
376
|
+
|
|
153
377
|
## 📄 License
|
|
154
378
|
|
|
155
379
|
MIT
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 组件类型定义
|
|
3
|
+
*/
|
|
4
|
+
export interface PageHeaderProps {
|
|
5
|
+
/** 页面标题 */
|
|
6
|
+
title: string;
|
|
7
|
+
/** 面包屑文本(可选) */
|
|
8
|
+
breadcrumb?: string;
|
|
9
|
+
}
|
|
10
|
+
export interface CardListProps {
|
|
11
|
+
/** 卡片尺寸 */
|
|
12
|
+
size?: 'small' | 'medium' | 'large';
|
|
13
|
+
/** 最小宽度(自定义) */
|
|
14
|
+
minWidth?: string;
|
|
15
|
+
}
|
|
16
|
+
export interface PagePaginationProps {
|
|
17
|
+
/** 当前页码 */
|
|
18
|
+
page: number;
|
|
19
|
+
/** 每页条数 */
|
|
20
|
+
pageSize: number;
|
|
21
|
+
/** 总条数 */
|
|
22
|
+
total: number;
|
|
23
|
+
/** 每页条数选项 */
|
|
24
|
+
pageSizes?: number[];
|
|
25
|
+
/** 是否显示每页条数选择器 */
|
|
26
|
+
showSizePicker?: boolean;
|
|
27
|
+
}
|
|
28
|
+
export interface PagePaginationEmits {
|
|
29
|
+
(e: 'update:page', value: number): void;
|
|
30
|
+
(e: 'update:pageSize', value: number): void;
|
|
31
|
+
}
|
|
32
|
+
export interface LogItem {
|
|
33
|
+
id: number | string;
|
|
34
|
+
status?: string;
|
|
35
|
+
timestamp?: string;
|
|
36
|
+
level?: string;
|
|
37
|
+
message?: string;
|
|
38
|
+
body?: Record<string, any>;
|
|
39
|
+
category?: string;
|
|
40
|
+
logger?: string;
|
|
41
|
+
sequence?: number;
|
|
42
|
+
logContent?: string;
|
|
43
|
+
errorMessage?: string;
|
|
44
|
+
createTime?: string;
|
|
45
|
+
threadName?: string;
|
|
46
|
+
className?: string;
|
|
47
|
+
[key: string]: any;
|
|
48
|
+
}
|
|
49
|
+
export interface LogViewerProps {
|
|
50
|
+
/** 日志列表 */
|
|
51
|
+
logs: LogItem[];
|
|
52
|
+
/** 是否加载中 */
|
|
53
|
+
loading?: boolean;
|
|
54
|
+
/** 是否自动滚动到底部 */
|
|
55
|
+
autoScroll?: boolean;
|
|
56
|
+
/** 默认主题 */
|
|
57
|
+
defaultTheme?: 'light' | 'dark';
|
|
58
|
+
}
|
|
59
|
+
export interface LogViewerEmits {
|
|
60
|
+
(e: 'refresh'): void;
|
|
61
|
+
(e: 'clear'): void;
|
|
62
|
+
}
|
|
63
|
+
export type FilterFieldType = 'input' | 'select' | 'date' | 'date-range';
|
|
64
|
+
export interface FilterFieldConfig {
|
|
65
|
+
/** 字段键名 */
|
|
66
|
+
key: string;
|
|
67
|
+
/** 字段标签 */
|
|
68
|
+
label?: string;
|
|
69
|
+
/** 字段类型 */
|
|
70
|
+
type?: FilterFieldType;
|
|
71
|
+
/** 占位符 */
|
|
72
|
+
placeholder?: string;
|
|
73
|
+
/** 选项列表(用于 select 类型) */
|
|
74
|
+
options?: Array<{
|
|
75
|
+
label: string;
|
|
76
|
+
value: unknown;
|
|
77
|
+
}>;
|
|
78
|
+
/** 是否可清除 */
|
|
79
|
+
clearable?: boolean;
|
|
80
|
+
/** 跨列数(仅在高级字段中有效) */
|
|
81
|
+
span?: number;
|
|
82
|
+
/** 自定义插槽名称 */
|
|
83
|
+
slotName?: string;
|
|
84
|
+
/** 组件额外属性 */
|
|
85
|
+
componentProps?: Record<string, unknown>;
|
|
86
|
+
}
|
|
87
|
+
export interface FilterPanelProps {
|
|
88
|
+
/** 过滤器值对象 */
|
|
89
|
+
filters: Record<string, unknown>;
|
|
90
|
+
/** 基础字段配置 */
|
|
91
|
+
basicFields: FilterFieldConfig[];
|
|
92
|
+
/** 高级字段配置 */
|
|
93
|
+
advancedFields?: FilterFieldConfig[];
|
|
94
|
+
/** 是否展开高级字段 */
|
|
95
|
+
showAdvanced?: boolean;
|
|
96
|
+
/** 搜索按钮文本 */
|
|
97
|
+
searchText?: string;
|
|
98
|
+
/** 重置按钮文本 */
|
|
99
|
+
resetText?: string;
|
|
100
|
+
/** 展开按钮文本 */
|
|
101
|
+
expandText?: string;
|
|
102
|
+
/** 收起按钮文本 */
|
|
103
|
+
collapseText?: string;
|
|
104
|
+
/** 操作按钮对齐方式 */
|
|
105
|
+
actionAlign?: 'left' | 'right';
|
|
106
|
+
}
|
|
107
|
+
export interface FilterPanelEmits {
|
|
108
|
+
(event: 'update:filters', value: Record<string, unknown>): void;
|
|
109
|
+
(event: 'update:showAdvanced', value: boolean): void;
|
|
110
|
+
(event: 'search'): void;
|
|
111
|
+
(event: 'reset'): void;
|
|
112
|
+
}
|
|
113
|
+
export type PositionType = 'center' | 'left' | 'right' | 'top' | 'bottom';
|
|
114
|
+
export interface UniversalModalProps {
|
|
115
|
+
/** 是否显示弹窗 */
|
|
116
|
+
show: boolean;
|
|
117
|
+
/** 标题 */
|
|
118
|
+
title?: string;
|
|
119
|
+
/** 副标题 */
|
|
120
|
+
subtitle?: string;
|
|
121
|
+
/** 图标 URL */
|
|
122
|
+
iconUrl?: string;
|
|
123
|
+
/** 图标大小 */
|
|
124
|
+
iconSize?: number;
|
|
125
|
+
/** 宽度 */
|
|
126
|
+
width?: string | number;
|
|
127
|
+
/** 高度 */
|
|
128
|
+
height?: string | number;
|
|
129
|
+
/** 最大宽度 */
|
|
130
|
+
maxWidth?: string | number;
|
|
131
|
+
/** 最大高度 */
|
|
132
|
+
maxHeight?: string | number;
|
|
133
|
+
/** 位置 */
|
|
134
|
+
position?: PositionType;
|
|
135
|
+
/** 顶部距离 */
|
|
136
|
+
top?: string | number;
|
|
137
|
+
/** 底部距离 */
|
|
138
|
+
bottom?: string | number;
|
|
139
|
+
/** 左侧距离 */
|
|
140
|
+
left?: string | number;
|
|
141
|
+
/** 右侧距离 */
|
|
142
|
+
right?: string | number;
|
|
143
|
+
/** 是否显示遮罩 */
|
|
144
|
+
showMask?: boolean;
|
|
145
|
+
/** 点击遮罩是否关闭 */
|
|
146
|
+
maskClosable?: boolean;
|
|
147
|
+
/** 隐藏头部 */
|
|
148
|
+
hideHeader?: boolean;
|
|
149
|
+
/** 隐藏底部 */
|
|
150
|
+
hideFooter?: boolean;
|
|
151
|
+
/** 隐藏关闭按钮 */
|
|
152
|
+
hideClose?: boolean;
|
|
153
|
+
/** 显示取消按钮 */
|
|
154
|
+
showCancel?: boolean;
|
|
155
|
+
/** 显示确认按钮 */
|
|
156
|
+
showConfirm?: boolean;
|
|
157
|
+
/** 显示全屏按钮 */
|
|
158
|
+
showFullscreen?: boolean;
|
|
159
|
+
/** 是否可调整大小 */
|
|
160
|
+
resizable?: boolean;
|
|
161
|
+
/** 取消按钮文本 */
|
|
162
|
+
cancelText?: string;
|
|
163
|
+
/** 确认按钮文本 */
|
|
164
|
+
confirmText?: string;
|
|
165
|
+
/** 头部自定义类名 */
|
|
166
|
+
headerClass?: string;
|
|
167
|
+
/** 内容自定义类名 */
|
|
168
|
+
bodyClass?: string;
|
|
169
|
+
/** 底部自定义类名 */
|
|
170
|
+
footerClass?: string;
|
|
171
|
+
/** 自定义类名 */
|
|
172
|
+
customClass?: string;
|
|
173
|
+
/** z-index */
|
|
174
|
+
zIndex?: number;
|
|
175
|
+
/** 是否全屏 */
|
|
176
|
+
fullscreen?: boolean;
|
|
177
|
+
}
|
|
178
|
+
export interface UniversalModalEmits {
|
|
179
|
+
(e: 'update:show', value: boolean): void;
|
|
180
|
+
(e: 'close'): void;
|
|
181
|
+
(e: 'cancel'): void;
|
|
182
|
+
(e: 'confirm'): void;
|
|
183
|
+
}
|
|
184
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"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"}
|