73 lines
2.2 KiB
Vue
73 lines
2.2 KiB
Vue
<template>
|
|
<view class="batch-management">
|
|
<view class="batch-management__copy">
|
|
<text>{{ active ? `已选择 ${selectedCount} 条` : `批量管理${resourceName}` }}</text>
|
|
<text>{{ active ? "仅可选择有删除权限的内容" : "可一次选择多条内容移入回收站" }}</text>
|
|
</view>
|
|
<view class="batch-management__actions">
|
|
<template v-if="active">
|
|
<AppButton compact type="secondary" :disabled="busy" :label="allSelected ? '取消全选' : '全选'" @click="$emit('toggle-all')" />
|
|
<AppButton compact :disabled="!selectedCount || busy" :label="busy ? '正在删除' : `删除 ${selectedCount || ''}`.trim()" @click="$emit('delete')" />
|
|
<AppButton compact type="secondary" :disabled="busy" label="完成" @click="$emit('finish')" />
|
|
</template>
|
|
<AppButton v-else compact type="secondary" :label="`管理${resourceName}`" @click="$emit('start')" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import AppButton from "@/components/AppButton.vue";
|
|
|
|
defineProps({
|
|
active: { type: Boolean, default: false },
|
|
selectedCount: { type: Number, default: 0 },
|
|
allSelected: { type: Boolean, default: false },
|
|
busy: { type: Boolean, default: false },
|
|
resourceName: { type: String, required: true },
|
|
});
|
|
defineEmits(["start", "finish", "toggle-all", "delete"]);
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.batch-management {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 18rpx;
|
|
margin-bottom: 20rpx;
|
|
padding: 20rpx 22rpx;
|
|
border: 1rpx solid rgba(159, 35, 35, 0.18);
|
|
background: rgba(255, 252, 242, 0.92);
|
|
}
|
|
.batch-management__copy {
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
.batch-management__copy text {
|
|
display: block;
|
|
color: $ink-muted;
|
|
font-size: clamp(12px, 20rpx, 15px);
|
|
line-height: 1.45;
|
|
}
|
|
.batch-management__copy text:first-child {
|
|
color: $ink;
|
|
font-size: clamp(14px, 23rpx, 17px);
|
|
font-weight: 700;
|
|
}
|
|
.batch-management__actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: 10rpx;
|
|
}
|
|
@media (max-width: 420px) {
|
|
.batch-management {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
.batch-management__actions {
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
</style>
|