@suzhou-lab/page-components 1.0.2 → 1.0.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 +42 -0
- package/filter-form.vue +7 -7
- package/list-page.vue +14 -14
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -527,6 +527,37 @@ npx install-skills
|
|
|
527
527
|
|--------|------|
|
|
528
528
|
| `listPage.tableHeight` | 动态计算的表格可用高度，表格通过 `inject` + `:height="tableHeight"` 绑定 |
|
|
529
529
|
|
|
530
|
+
**CSS 变量**
|
|
531
|
+
|
|
532
|
+
| 变量 | 默认值 | 说明 |
|
|
533
|
+
|------|--------|------|
|
|
534
|
+
| `--list-page-spacing` | `16px` | 卡片间距、内边距 |
|
|
535
|
+
| `--list-page-card-radius` | `6px` | 卡片圆角 |
|
|
536
|
+
| `--list-page-thead-bg` | `#E2EDFF` | 表头背景色 |
|
|
537
|
+
| `--list-page-gutter-bg` | `#F1F3F7` | 固定列/滚动条轨道背景 |
|
|
538
|
+
| `--list-page-toolbar-item-gap` | `10px` | 工具栏项间距 |
|
|
539
|
+
| `--list-page-table-icon-offset` | `10px` | 表头排序/筛选图标右侧偏移 |
|
|
540
|
+
| `--list-page-table-icon-with-filter-offset` | `22px` | 同时有排序+筛选时图标偏移 |
|
|
541
|
+
| `--list-page-table-header-padding-offset` | `10px` | 表头单元格内边距额外偏移 |
|
|
542
|
+
| `--list-page-scrollbar-width` | `8px` | 滚动条宽度 |
|
|
543
|
+
| `--list-page-scrollbar-height` | `8px` | 滚动条高度 |
|
|
544
|
+
| `--list-page-scrollbar-thumb-bg` | `#c0c4cc` | 滚动条滑块颜色 |
|
|
545
|
+
| `--list-page-scrollbar-thumb-radius` | `4px` | 滚动条滑块圆角 |
|
|
546
|
+
| `--list-page-pagination-btn-size` | `32px` | 分页按钮尺寸 |
|
|
547
|
+
| `--list-page-pagination-btn-radius` | `2px` | 分页按钮/输入框圆角 |
|
|
548
|
+
| `--list-page-pagination-btn-font-size` | `14px` | 分页按钮字号 |
|
|
549
|
+
| `--list-page-pagination-btn-color` | `#323233` | 分页按钮文字色 |
|
|
550
|
+
| `--list-page-pagination-active-bg` | `#1F87F0` | 分页激活背景色 |
|
|
551
|
+
| `--list-page-pagination-active-color` | `#FFFFFF` | 分页激活文字色 |
|
|
552
|
+
| `--list-page-pagination-text-color` | `#333` | 分页文字色 |
|
|
553
|
+
| `--list-page-pagination-input-bg` | `#F1F3F7` | 分页下拉背景 |
|
|
554
|
+
| `--list-page-pagination-input-border` | `#DCDEE0` | 分页跳转输入框边框 |
|
|
555
|
+
| `--list-page-pagination-jump-margin` | `8px` | 分页跳转左边距 |
|
|
556
|
+
| `--list-page-pagination-total-margin` | `4px` | 分页总数右边距 |
|
|
557
|
+
| `--list-page-table-filter-icon-scale` | `1` | 筛选图标缩放 |
|
|
558
|
+
| `--list-page-table-header-cell-height` | `24px` | 表头单元格高度 |
|
|
559
|
+
| `--list-page-table-header-cell-border-right` | `1px solid rgba(…)` | 表头列边框 |
|
|
560
|
+
|
|
530
561
|
### 9.2 `<filter-form>`
|
|
531
562
|
|
|
532
563
|
**Props**
|
|
@@ -569,6 +600,17 @@ npx install-skills
|
|
|
569
600
|
| `component` | `Component` | 自定义组件（type=`custom` 时） |
|
|
570
601
|
| `attrs` | `Object` | 自定义组件的额外属性 |
|
|
571
602
|
|
|
603
|
+
**CSS 变量**
|
|
604
|
+
|
|
605
|
+
| 变量 | 默认值 | 说明 |
|
|
606
|
+
|------|--------|------|
|
|
607
|
+
| `--filter-form-item-mb` | `18px` | 表单项下边距 |
|
|
608
|
+
| `--filter-form-input-height` | `40px` | 输入框高度 |
|
|
609
|
+
| `--filter-form-input-radius` | `4px` | 输入框圆角 |
|
|
610
|
+
| `--filter-form-collapse-font-size` | `14px` | 折叠按钮字号 |
|
|
611
|
+
| `--filter-form-chevron-margin` | `4px` | 折叠图标左间距 |
|
|
612
|
+
| `--filter-form-tag-font-size` | `12px` | Cascader 标签字号 |
|
|
613
|
+
|
|
572
614
|
---
|
|
573
615
|
|
|
574
616
|
## 更新日志
|
package/filter-form.vue
CHANGED
|
@@ -206,7 +206,7 @@ export default {
|
|
|
206
206
|
position: relative;
|
|
207
207
|
|
|
208
208
|
.el-form-item {
|
|
209
|
-
margin-bottom: 18px;
|
|
209
|
+
margin-bottom: var(--filter-form-item-mb, 18px);
|
|
210
210
|
|
|
211
211
|
&.is-hidden {
|
|
212
212
|
display: none;
|
|
@@ -225,10 +225,10 @@ export default {
|
|
|
225
225
|
}
|
|
226
226
|
|
|
227
227
|
::v-deep .el-input__inner {
|
|
228
|
-
height: 40px;
|
|
229
|
-
line-height: 40px;
|
|
228
|
+
height: var(--filter-form-input-height, 40px);
|
|
229
|
+
line-height: var(--filter-form-input-height, 40px);
|
|
230
230
|
background: #F1F3F7;
|
|
231
|
-
border-radius: 4px;
|
|
231
|
+
border-radius: var(--filter-form-input-radius, 4px);
|
|
232
232
|
border: none;
|
|
233
233
|
}
|
|
234
234
|
|
|
@@ -248,7 +248,7 @@ export default {
|
|
|
248
248
|
align-self: end;
|
|
249
249
|
margin: 0 auto;
|
|
250
250
|
color: #777;
|
|
251
|
-
font-size: 14px;
|
|
251
|
+
font-size: var(--filter-form-collapse-font-size, 14px);
|
|
252
252
|
user-select: none;
|
|
253
253
|
cursor: pointer;
|
|
254
254
|
|
|
@@ -260,7 +260,7 @@ export default {
|
|
|
260
260
|
}
|
|
261
261
|
|
|
262
262
|
.chevrons-down {
|
|
263
|
-
margin-left: 4px;
|
|
263
|
+
margin-left: var(--filter-form-chevron-margin, 4px);
|
|
264
264
|
display: inline-block;
|
|
265
265
|
transition: transform 0.2s;
|
|
266
266
|
|
|
@@ -280,7 +280,7 @@ export default {
|
|
|
280
280
|
&.el-tag--info {
|
|
281
281
|
background-color: rgba(0, 0, 0, 0.06);
|
|
282
282
|
color: #909399;
|
|
283
|
-
font-size: 12px;
|
|
283
|
+
font-size: var(--filter-form-tag-font-size, 12px);
|
|
284
284
|
overflow: hidden;
|
|
285
285
|
text-overflow: ellipsis;
|
|
286
286
|
white-space: nowrap;
|
package/list-page.vue
CHANGED
|
@@ -105,7 +105,7 @@ export default {
|
|
|
105
105
|
overflow: hidden;
|
|
106
106
|
|
|
107
107
|
::v-deep .el-card {
|
|
108
|
-
border-radius: 6px;
|
|
108
|
+
border-radius: var(--list-page-card-radius, 6px);
|
|
109
109
|
border: none;
|
|
110
110
|
}
|
|
111
111
|
|
|
@@ -170,7 +170,7 @@ export default {
|
|
|
170
170
|
min-width: 0;
|
|
171
171
|
|
|
172
172
|
::v-deep .el-table-show {
|
|
173
|
-
margin-left: 10px;
|
|
173
|
+
margin-left: var(--list-page-toolbar-item-gap, 10px);
|
|
174
174
|
}
|
|
175
175
|
}
|
|
176
176
|
|
|
@@ -200,7 +200,7 @@ export default {
|
|
|
200
200
|
|
|
201
201
|
&::-webkit-scrollbar-thumb {
|
|
202
202
|
background-color: var(--list-page-scrollbar-thumb-bg, #c0c4cc);
|
|
203
|
-
border-radius: 4px;
|
|
203
|
+
border-radius: var(--list-page-scrollbar-thumb-radius, 4px);
|
|
204
204
|
}
|
|
205
205
|
}
|
|
206
206
|
|
|
@@ -208,18 +208,18 @@ export default {
|
|
|
208
208
|
::v-deep .el-table__cell {
|
|
209
209
|
.caret-wrapper {
|
|
210
210
|
position: absolute;
|
|
211
|
-
right: 10px;
|
|
211
|
+
right: var(--list-page-table-icon-offset, 10px);
|
|
212
212
|
top: 50%;
|
|
213
213
|
transform: translateY(-50%);
|
|
214
214
|
|
|
215
215
|
&:has(+ .el-table__column-filter-trigger) {
|
|
216
|
-
right: 22px;
|
|
216
|
+
right: var(--list-page-table-icon-with-filter-offset, 22px);
|
|
217
217
|
}
|
|
218
218
|
}
|
|
219
219
|
|
|
220
220
|
.el-table__column-filter-trigger {
|
|
221
221
|
position: absolute;
|
|
222
|
-
right: 10px;
|
|
222
|
+
right: var(--list-page-table-icon-offset, 10px);
|
|
223
223
|
top: 50%;
|
|
224
224
|
transform: translateY(-50%);
|
|
225
225
|
|
|
@@ -251,15 +251,15 @@ export default {
|
|
|
251
251
|
|
|
252
252
|
// 检测 cell 内是否实际包含排序/筛选图标（不再依赖不准确的 is-leaf 类）
|
|
253
253
|
.cell:has(.caret-wrapper) {
|
|
254
|
-
padding-right: calc(var(--list-page-table-header-cell-is-sortable-padding-right, 24px) + 10px);
|
|
254
|
+
padding-right: calc(var(--list-page-table-header-cell-is-sortable-padding-right, 24px) + var(--list-page-table-header-padding-offset, 10px));
|
|
255
255
|
}
|
|
256
256
|
|
|
257
257
|
.cell:has(.el-table__column-filter-trigger) {
|
|
258
|
-
padding-right: calc(var(--list-page-table-header-cell-is-leaf-padding-right, 16px) + 10px);
|
|
258
|
+
padding-right: calc(var(--list-page-table-header-cell-is-leaf-padding-right, 16px) + var(--list-page-table-header-padding-offset, 10px));
|
|
259
259
|
}
|
|
260
260
|
|
|
261
261
|
.cell:has(.caret-wrapper):has(.el-table__column-filter-trigger) {
|
|
262
|
-
padding-right: calc(var(--list-page-table-header-cell-is-leaf-and-filter-padding-right, 12px) + var(--list-page-table-header-cell-is-sortable-padding-right, 24px) + 10px);
|
|
262
|
+
padding-right: calc(var(--list-page-table-header-cell-is-leaf-and-filter-padding-right, 12px) + var(--list-page-table-header-cell-is-sortable-padding-right, 24px) + var(--list-page-table-header-padding-offset, 10px));
|
|
263
263
|
}
|
|
264
264
|
}
|
|
265
265
|
}
|
|
@@ -288,7 +288,7 @@ export default {
|
|
|
288
288
|
min-width: var(--list-page-pagination-btn-size, 32px);
|
|
289
289
|
height: var(--list-page-pagination-btn-size, 32px);
|
|
290
290
|
line-height: var(--list-page-pagination-btn-size, 32px);
|
|
291
|
-
border-radius: 2px;
|
|
291
|
+
border-radius: var(--list-page-pagination-btn-radius, 2px);
|
|
292
292
|
font-size: var(--list-page-pagination-btn-font-size, 14px);
|
|
293
293
|
font-weight: 500;
|
|
294
294
|
color: var(--list-page-pagination-btn-color, #323233);
|
|
@@ -296,7 +296,7 @@ export default {
|
|
|
296
296
|
|
|
297
297
|
&.is-background .el-pager li:not(.disabled).active {
|
|
298
298
|
background: var(--list-page-pagination-active-bg, #1F87F0);
|
|
299
|
-
border-radius: 2px;
|
|
299
|
+
border-radius: var(--list-page-pagination-btn-radius, 2px);
|
|
300
300
|
font-size: var(--list-page-pagination-btn-font-size, 14px);
|
|
301
301
|
font-weight: 500;
|
|
302
302
|
color: var(--list-page-pagination-active-color, #FFFFFF);
|
|
@@ -313,14 +313,14 @@ export default {
|
|
|
313
313
|
&__editor.el-input .el-input__inner {
|
|
314
314
|
height: var(--list-page-pagination-btn-size, 32px);
|
|
315
315
|
background: var(--list-page-pagination-input-bg-editor, #FFFFFF);
|
|
316
|
-
border-radius: 2px;
|
|
316
|
+
border-radius: var(--list-page-pagination-btn-radius, 2px);
|
|
317
317
|
border: 1px solid var(--list-page-pagination-input-border, #DCDEE0);
|
|
318
318
|
color: var(--list-page-pagination-text-color, #333);
|
|
319
319
|
font-size: var(--list-page-pagination-btn-font-size, 14px);
|
|
320
320
|
}
|
|
321
321
|
|
|
322
322
|
&__jump {
|
|
323
|
-
margin-left: 8px;
|
|
323
|
+
margin-left: var(--list-page-pagination-jump-margin, 8px);
|
|
324
324
|
font-size: var(--list-page-pagination-btn-font-size, 14px);
|
|
325
325
|
font-weight: 400;
|
|
326
326
|
color: var(--list-page-pagination-text-color, #333);
|
|
@@ -330,7 +330,7 @@ export default {
|
|
|
330
330
|
font-size: var(--list-page-pagination-btn-font-size, 14px);
|
|
331
331
|
font-weight: 400;
|
|
332
332
|
color: var(--list-page-pagination-text-color, #333);
|
|
333
|
-
margin-right: 4px;
|
|
333
|
+
margin-right: var(--list-page-pagination-total-margin, 4px);
|
|
334
334
|
}
|
|
335
335
|
}
|
|
336
336
|
}
|