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/components/AutoWelcomeConfig.vue
+33 -12
View File
@@ -1,13 +1,28 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { fetchAutoWelcomeMessage, updateAutoWelcomeMessage } from '@/features/chats'
const loading = ref(false)
const saving = ref(false)
const message = ref('')
const editing = ref(false)
const props = withDefaults(
defineProps<{
title: string
description: string
placeholder: string
fetchMessage: () => Promise<string>
updateMessage: (message: string) => Promise<unknown>
emptyHint?: string
cardClass?: string
}>(),
{
emptyHint: '未设置',
cardClass: '',
}
)
onMounted(async () => {
await loadMessage()
})
@@ -15,9 +30,9 @@ onMounted(async () => {
async function loadMessage() {
loading.value = true
try {
message.value = await fetchAutoWelcomeMessage()
message.value = await props.fetchMessage()
} catch {
ElMessage.error('加载自动话术失败')
ElMessage.error('加载配置失败')
} finally {
loading.value = false
}
@@ -30,7 +45,7 @@ async function handleSave() {
}
saving.value = true
try {
await updateAutoWelcomeMessage(message.value.trim())
await props.updateMessage(message.value.trim())
ElMessage.success('保存成功')
editing.value = false
} catch {
@@ -51,10 +66,10 @@ function cancelEdit() {
</script>
<template>
<div class="auto-welcome-config" v-loading="loading">
<div :class="['auto-welcome-config', cardClass]" v-loading="loading">
<div class="config-header">
<h3>建群自动话术</h3>
<p>订单群聊创建后自动发送的欢迎消息</p>
<h3>{{ title }}</h3>
<p>{{ description }}</p>
</div>
<div class="config-content">
<template v-if="editing">
@@ -64,7 +79,7 @@ function cancelEdit() {
:rows="4"
maxlength="500"
show-word-limit
placeholder="输入建群后自动发送的话术"
:placeholder="placeholder"
/>
<div class="config-actions">
<el-button size="small" @click="cancelEdit">取消</el-button>
@@ -75,7 +90,7 @@ function cancelEdit() {
</template>
<template v-else>
<div class="preview-box">
<p>{{ message || '未设置' }}</p>
<p>{{ message || emptyHint }}</p>
</div>
<el-button size="small" @click="startEdit">编辑</el-button>
</template>
@@ -85,14 +100,18 @@ function cancelEdit() {
<style scoped>
.auto-welcome-config {
padding: 20px;
display: flex;
flex-direction: column;
gap: 14px;
min-height: 210px;
padding: 18px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
}
.config-header {
margin-bottom: 16px;
margin-bottom: 0;
}
.config-header h3 {
@@ -110,6 +129,7 @@ function cancelEdit() {
.config-content {
display: flex;
flex-direction: column;
flex: 1;
gap: 12px;
}
@@ -120,11 +140,12 @@ function cancelEdit() {
}
.preview-box {
flex: 1;
padding: 12px;
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 6px;
min-height: 60px;
min-height: 96px;
}
.preview-box p {
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;
frontend/src/features/admin/views/AdminSystemConfigsView.vue
+50 -2
View File
@@ -32,6 +32,12 @@ import OrderAgreementsDialog from '../components/OrderAgreementsDialog.vue'
import PostRentalNoticeDialog from '../components/PostRentalNoticeDialog.vue'
import GeneralConfigDialog from '../components/GeneralConfigDialog.vue'
import AutoWelcomeConfig from '../components/AutoWelcomeConfig.vue'
import {
fetchAutoWelcomeMessage,
updateAutoWelcomeMessage,
fetchListingGroupWelcomeMessage,
updateListingGroupWelcomeMessage,
} from '@/features/chats'
const defaultOrderAgreements: OrderAgreements = {
virtual_asset_purchase: {
@@ -90,6 +96,12 @@ const orderAgreementsConfig = computed(
const postRentalNoticeConfig = computed(
() => configs.value.find(item => item.key === 'profile.post_rental_notice') || null
)
const autoWelcomeConfig = computed(
() => configs.value.find(item => item.key === 'chat.auto_welcome_message') || null
)
const listingGroupWelcomeConfig = computed(
() => configs.value.find(item => item.key === 'chat.listing_group_welcome') || null
)
const regularConfigs = computed(() =>
configs.value.filter(
@@ -100,7 +112,9 @@ const regularConfigs = computed(() =>
item.key !== 'mobile.home_banners' &&
item.key !== 'listing.publish_agreements' &&
item.key !== 'order.agreements' &&
item.key !== 'profile.post_rental_notice'
item.key !== 'profile.post_rental_notice' &&
item.key !== 'chat.auto_welcome_message' &&
item.key !== 'chat.listing_group_welcome'
)
)
@@ -516,7 +530,35 @@ function formatConfigValue(row: SystemConfig) {
</div>
</section>
<AutoWelcomeConfig />
<section v-if="autoWelcomeConfig || listingGroupWelcomeConfig" class="publish-config-panel">
<div class="publish-config-main">
<div>
<p class="eyebrow">Chat Welcome</p>
<h2>群聊自动欢迎语</h2>
<span>分别管理订单群和发布群进入后自动发送的话术，支持后台直接编辑。</span>
</div>
</div>
<div class="welcome-config-grid">
<AutoWelcomeConfig
v-if="autoWelcomeConfig"
title="订单群自动话术"
description="订单群聊创建后自动发送的欢迎消息"
placeholder="输入订单群自动发送的话术"
empty-hint="未设置"
:fetch-message="fetchAutoWelcomeMessage"
:update-message="updateAutoWelcomeMessage"
/>
<AutoWelcomeConfig
v-if="listingGroupWelcomeConfig"
title="发布群欢迎语"
description="账号群创建后自动发送的欢迎消息"
placeholder="输入发布群创建后自动发送的欢迎语"
empty-hint="未设置"
:fetch-message="fetchListingGroupWelcomeMessage"
:update-message="updateListingGroupWelcomeMessage"
/>
</div>
</section>
<el-table v-loading="loading" class="table-panel" :data="regularConfigs">
<el-table-column prop="key" label="配置项" min-width="260" />
@@ -638,6 +680,12 @@ function formatConfigValue(row: SystemConfig) {
gap: 10px;
}
.welcome-config-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.home-stat-grid .publish-stat strong {
font-size: 18px;
}