|
|
@@ -10,6 +10,7 @@
|
|
|
/>
|
|
|
<div class="task-list-title">
|
|
|
{{ title }}
|
|
|
+ <span v-if="badgeCount > 0" class="task-list-badge">{{ badgeCount }}</span>
|
|
|
</div>
|
|
|
<span v-if="selectedKeys.length > 0" class="task-list-selected">
|
|
|
已选 {{ selectedKeys.length }} 条
|
|
|
@@ -40,6 +41,7 @@
|
|
|
<RefreshOutline />
|
|
|
</n-icon>
|
|
|
</n-button>
|
|
|
+ <slot name="toolbar-actions" />
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -105,6 +107,7 @@ import { computed } from 'vue'
|
|
|
|
|
|
const props = defineProps({
|
|
|
title: { type: String, default: '列表' },
|
|
|
+ badgeCount: { type: Number, default: 0 },
|
|
|
items: { type: Array, default: () => [] },
|
|
|
loading: { type: Boolean, default: false },
|
|
|
pagination: { type: Object, default: null },
|
|
|
@@ -224,6 +227,40 @@ function clearSelection() {
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
+.task-list-badge {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ min-width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ margin-left: 6px;
|
|
|
+ padding: 0 5px;
|
|
|
+ border-radius: 9px;
|
|
|
+ background: #e03e3e;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 1;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+
|
|
|
+.task-list-badge {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ min-width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ margin-left: 6px;
|
|
|
+ padding: 0 5px;
|
|
|
+ border-radius: 9px;
|
|
|
+ background: #e03e3e;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 1;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+
|
|
|
.task-list-selected {
|
|
|
color: var(--primary-color);
|
|
|
font-size: 13px;
|
