yml/hfb_sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化发布群配置与二维码池界面

Browse Source
This commit is contained in:
yml
2026-06-17 20:59:24 +08:00
parent ac98841992
commit 0a42392d5e
14 changed files with 460 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/admin/views/AdminQrCodePoolView.vue
+192 -29
View File
@@ -30,7 +30,8 @@ const statusFilter = ref<QrCodeStatus | ''>('')
// 上传弹窗
const uploadVisible = ref(false)
const uploading = ref(false)
const uploadPendingCount = ref(0)
const uploadSaving = ref(false)
const uploadedImages = ref<{ url: string; file: File }[]>([])
const uploadForm = reactive({
note: '',
@@ -63,6 +64,11 @@ const statusMap = computed(() => {
return m
})
const maxBatchUploadCount = 20
const uploading = computed(() => uploadPendingCount.value > 0)
const uploadBusy = computed(() => uploading.value || uploadSaving.value)
const uploadedImageCountText = computed(() => `${uploadedImages.value.length}/${maxBatchUploadCount}`)
async function loadList() {
loading.value = true
try {
@@ -97,15 +103,23 @@ function handlePageChange() {
// 上传：逐个上传图片拿 URL
async function handleFileUpload(options: { file: File }) {
uploading.value = true
if (uploadedImages.value.length + uploadPendingCount.value >= maxBatchUploadCount) {
ElMessage.warning(`单次最多添加 ${maxBatchUploadCount} 张二维码`)
return
}
if (!options.file.type.startsWith('image/')) {
ElMessage.warning('只能上传图片文件')
return
}
uploadPendingCount.value += 1
try {
const uploaded = await uploadAdminFile(options.file, 'qrcode')
uploadedImages.value.push({ url: uploaded.url, file: options.file })
ElMessage.success(`已上传 ${uploadedImages.value.length} 张图片`)
} catch {
ElMessage.error('图片上传失败')
} finally {
uploading.value = false
uploadPendingCount.value = Math.max(0, uploadPendingCount.value - 1)
}
}
@@ -113,6 +127,10 @@ function removeImage(index: number) {
uploadedImages.value.splice(index, 1)
}
function handleUploadExceed() {
ElMessage.warning(`单次最多添加 ${maxBatchUploadCount} 张二维码`)
}
function openUpload() {
uploadedImages.value = []
uploadForm.note = ''
@@ -121,11 +139,15 @@ function openUpload() {
}
async function submitUpload() {
if (uploadPendingCount.value > 0) {
ElMessage.warning('图片还在上传中，请稍后保存')
return
}
if (uploadedImages.value.length === 0) {
ElMessage.warning('请先上传二维码图片')
return
}
uploading.value = true
uploadSaving.value = true
try {
const expiresAt = uploadForm.expires_at
? new Date(uploadForm.expires_at).toISOString()
@@ -140,7 +162,7 @@ async function submitUpload() {
uploadVisible.value = false
await reloadAll()
} finally {
uploading.value = false
uploadSaving.value = false
}
}
@@ -330,8 +352,8 @@ onMounted(reloadAll)
</el-card>
<!-- 上传弹窗 -->
<el-dialog v-model="uploadVisible" title="批量添加企业微信群二维码" width="560px">
<el-form label-width="90px">
<el-dialog v-model="uploadVisible" title="批量添加企业微信群二维码" width="680px">
<el-form class="qrcode-upload-form" label-width="108px">
<el-form-item label="二维码图片" required>
<div class="batch-upload-area">
<el-upload
@@ -341,19 +363,38 @@ onMounted(reloadAll)
accept="image/*"
multiple
drag
:disabled="uploading"
:limit="maxBatchUploadCount"
:disabled="uploadBusy || uploadedImages.length >= maxBatchUploadCount"
:on-exceed="handleUploadExceed"
>
<el-icon class="el-icon--upload"><UploadFilled /></el-icon>
<div class="el-upload__text">点击或拖拽上传，支持多选</div>
<template #tip>
<div class="upload-tip">
已选择 {{ uploadedImageCountText }}
<span v-if="uploadPendingCount > 0">，{{ uploadPendingCount }} 张上传中</span>
</div>
</template>
</el-upload>
<div v-if="uploadedImages.length" class="uploaded-list">
<div v-for="(img, idx) in uploadedImages" :key="idx" class="uploaded-item">
<AuthImage
:source="img.url"
fit="cover"
:image-style="{ width: '64px', height: '64px', borderRadius: '4px' }"
/>
<el-button link type="danger" size="small" @click="removeImage(idx)">移除</el-button>
<div class="uploaded-thumb">
<AuthImage
:source="img.url"
fit="cover"
:image-style="{ width: '52px', height: '52px', borderRadius: '6px' }"
:preview-src-list="uploadedImages.map(item => item.url)"
/>
<button
class="uploaded-remove"
type="button"
:disabled="uploadBusy"
@click="removeImage(idx)"
>
×
</button>
</div>
<div class="uploaded-name" :title="img.file.name">{{ img.file.name }}</div>
</div>
</div>
</div>
@@ -373,8 +414,8 @@ onMounted(reloadAll)
</el-form-item>
</el-form>
<template #footer>
<el-button @click="uploadVisible = false">取消</el-button>
<el-button type="primary" :loading="uploading" @click="submitUpload">
<el-button :disabled="uploadBusy" @click="uploadVisible = false">取消</el-button>
<el-button type="primary" :loading="uploadBusy" @click="submitUpload">
保存{{ uploadedImages.length > 0 ? `（${uploadedImages.length} 张）` : '' }}
</el-button>
</template>
@@ -385,12 +426,16 @@ onMounted(reloadAll)
<el-form label-width="90px">
<el-form-item label="二维码图片">
<div class="edit-image-area">
<AuthImage
v-if="editForm.image_url"
:source="editForm.image_url"
fit="cover"
:image-style="{ width: '96px', height: '96px', borderRadius: '6px' }"
/>
<div class="edit-image-preview">
<AuthImage
v-if="editForm.image_url"
:source="editForm.image_url"
fit="cover"
:preview-src-list="[editForm.image_url]"
:image-style="{ width: '100%', height: '100%', borderRadius: '6px' }"
/>
<div v-else class="edit-image-empty">暂无图片</div>
</div>
<el-upload
:auto-upload="true"
:show-file-list="false"
@@ -603,18 +648,110 @@ onMounted(reloadAll)
width: 100%;
}
.qrcode-upload-form :deep(.el-form-item__label) {
align-items: center;
padding-right: 18px;
line-height: 32px;
white-space: nowrap;
word-break: keep-all;
}
.qrcode-upload-form :deep(.el-form-item) {
margin-bottom: 18px;
}
.qrcode-upload-form :deep(.el-form-item__content) {
min-width: 0;
}
.batch-upload-area :deep(.el-upload) {
width: 100%;
}
.batch-upload-area :deep(.el-upload-dragger) {
width: 100%;
padding: 12px 18px;
}
.batch-upload-area :deep(.el-icon--upload) {
margin-bottom: 4px;
font-size: 28px;
line-height: 1;
}
.batch-upload-area :deep(.el-upload__text) {
line-height: 20px;
}
.upload-tip {
color: var(--el-text-color-secondary);
font-size: 12px;
line-height: 18px;
}
.uploaded-list {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 12px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
gap: 10px;
margin-top: 10px;
max-height: 224px;
overflow-y: auto;
padding: 10px;
border: 1px solid #eef1f5;
border-radius: 8px;
background: #fafbfc;
}
.uploaded-item {
min-width: 0;
}
.uploaded-thumb {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
justify-content: center;
width: 60px;
height: 60px;
margin: 0 auto;
border: 1px solid #e7ebf2;
border-radius: 8px;
background: #ffffff;
}
.uploaded-remove {
position: absolute;
top: -7px;
right: -7px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
padding: 0;
border: 1px solid #ffffff;
border-radius: 50%;
background: var(--el-color-danger);
color: #ffffff;
cursor: pointer;
font-size: 14px;
line-height: 1;
}
.uploaded-remove:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.uploaded-name {
margin-top: 5px;
overflow: hidden;
color: var(--el-text-color-secondary);
font-size: 12px;
line-height: 16px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
.expired-tag {
@@ -627,6 +764,32 @@ onMounted(reloadAll)
gap: 12px;
}
.edit-image-preview {
flex: 0 0 auto;
width: 88px;
height: 88px;
overflow: hidden;
border: 1px solid #e7ebf2;
border-radius: 8px;
background: #fafbfc;
}
.edit-image-preview :deep(.el-image),
.edit-image-preview :deep(img) {
display: block;
width: 100%;
height: 100%;
}
.edit-image-empty {
display: grid;
width: 100%;
height: 100%;
place-items: center;
color: var(--el-text-color-secondary);
font-size: 12px;
}
.expire-editor {
display: flex;
align-items: center;