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

backend/internal/modules/chat/handler_quick_reply.go

@@ -97,3 +97,23 @@ func (h *Handler) AdminUpdateAutoWelcome(c *gin.Context) {
 	}
 	response.OK(c, gin.H{"updated": true})
 }
+
+func (h *Handler) AdminGetListingGroupWelcome(c *gin.Context) {
+	message := h.service.GetListingGroupWelcomeMessage(c.Request.Context())
+	response.OK(c, gin.H{"message": message})
+}
+
+func (h *Handler) AdminUpdateListingGroupWelcome(c *gin.Context) {
+	var req struct {
+		Message string `json:"message" binding:"required"`
+	}
+	if err := c.ShouldBindJSON(&req); err != nil {
+		response.BadRequest(c, "欢迎语内容不能为空")
+		return
+	}
+	if err := h.service.UpdateListingGroupWelcomeMessage(c.Request.Context(), req.Message); err != nil {
+		writeChatError(c, err)
+		return
+	}
+	response.OK(c, gin.H{"updated": true})
+}

backend/internal/modules/chat/listing_group.go

@@ -189,14 +189,12 @@ func listingConversationTitle(listing model.RentalListing) string {
 }
 
 func getListingGroupWelcomeMessage(tx *gorm.DB) string {
-	defaultMsg := "欢迎加入账号群！请号主扫描下方二维码加入企业微信群，方便客服与您及时联系。"
-
 	var cfg model.SystemConfig
-	if err := tx.Where("`key` = ?", "chat.listing_group_welcome").First(&cfg).Error; err == nil && cfg.Value != "" {
+	if err := tx.Where("`key` = ?", listingGroupWelcomeConfigKey).First(&cfg).Error; err == nil && cfg.Value != "" {
 		return cfg.Value
 	}
 
-	return defaultMsg
+	return defaultListingGroupWelcome
 }
 
 func sendSystemMessage(tx *gorm.DB, conversationID uint64, content string) error {
@@ -218,7 +216,6 @@ func sendSystemMessage(tx *gorm.DB, conversationID uint64, content string) error
 }
 
 func sendQrCodeImage(tx *gorm.DB, conversationID uint64, imageURL string) error {
-	attachmentURLs := `["` + imageURL + `"]`
 	content := "👇 请扫码加入企业微信群"
 
 	message := model.ChatMessage{
@@ -227,7 +224,7 @@ func sendQrCodeImage(tx *gorm.DB, conversationID uint64, imageURL string) error
 		SenderRole:     "system",
 		ContentType:    "image",
 		Content:        content,
-		AttachmentURLS: []byte(attachmentURLs),
+		AttachmentURLS: encodeStringList([]string{imageURL}),
 	}
 
 	if err := tx.Create(&message).Error; err != nil {

backend/internal/modules/chat/quick_reply.go

@@ -5,6 +5,13 @@ import (
 	"hfb_sys/backend/internal/model"
 )
 
+const (
+	autoWelcomeConfigKey         = "chat.auto_welcome_message"
+	defaultAutoWelcomeMessage    = "欢迎加入订单群聊！如有任何问题，请随时沟通。"
+	listingGroupWelcomeConfigKey = "chat.listing_group_welcome"
+	defaultListingGroupWelcome   = "欢迎加入账号群！请号主扫描下方二维码加入企业微信群，方便客服与您及时联系。"
+)
+
 func (r *Repository) UpdateRemark(ctx context.Context, principal Principal, conversationID uint64, remark string) error {
 	return r.db.WithContext(ctx).Model(&model.ChatParticipant{}).
 		Where("conversation_id = ? AND participant_type = ? AND participant_id = ?", conversationID, principal.Type, principal.ID).
@@ -77,13 +84,27 @@ func (r *Repository) DeleteQuickReply(ctx context.Context, adminID uint64, reply
 }
 func (r *Repository) GetAutoWelcomeMessage(ctx context.Context) string {
 	var cfg model.SystemConfig
-	if err := r.db.WithContext(ctx).Where("`key` = ?", "chat.auto_welcome_message").First(&cfg).Error; err != nil {
+	if err := r.db.WithContext(ctx).Where("`key` = ?", autoWelcomeConfigKey).First(&cfg).Error; err != nil {
-		return "欢迎加入订单群聊！如有任何问题，请随时沟通。"
+		return defaultAutoWelcomeMessage
 	}
 	return cfg.Value
 }
 func (r *Repository) UpdateAutoWelcomeMessage(ctx context.Context, message string) error {
 	return r.db.WithContext(ctx).Model(&model.SystemConfig{}).
-		Where("`key` = ?", "chat.auto_welcome_message").
+		Where("`key` = ?", autoWelcomeConfigKey).
+		Update("value", message).Error
+}
+
+func (r *Repository) GetListingGroupWelcomeMessage(ctx context.Context) string {
+	var cfg model.SystemConfig
+	if err := r.db.WithContext(ctx).Where("`key` = ?", listingGroupWelcomeConfigKey).First(&cfg).Error; err != nil {
+		return defaultListingGroupWelcome
+	}
+	return cfg.Value
+}
+
+func (r *Repository) UpdateListingGroupWelcomeMessage(ctx context.Context, message string) error {
+	return r.db.WithContext(ctx).Model(&model.SystemConfig{}).
+		Where("`key` = ?", listingGroupWelcomeConfigKey).
 		Update("value", message).Error
 }

backend/internal/modules/chat/service.go

@@ -208,3 +208,17 @@ func (s *Service) UpdateAutoWelcomeMessage(ctx context.Context, message string)
 	}
 	return s.repo.UpdateAutoWelcomeMessage(ctx, message)
 }
+
+func (s *Service) GetListingGroupWelcomeMessage(ctx context.Context) string {
+	if s.repo == nil {
+		return ""
+	}
+	return s.repo.GetListingGroupWelcomeMessage(ctx)
+}
+
+func (s *Service) UpdateListingGroupWelcomeMessage(ctx context.Context, message string) error {
+	if s.repo == nil {
+		return ErrDependencyUnavailable
+	}
+	return s.repo.UpdateListingGroupWelcomeMessage(ctx, message)
+}

backend/internal/modules/systemconfig/repository.go

@@ -37,6 +37,7 @@ var defaultConfigs = []defaultConfig{
 	{Key: postRentalNoticeConfigKey, Value: defaultPostRentalNoticeConfigValue(), Description: "租后须知配置 JSON"},
 	{Key: "chat.default_support_admin_id", Value: "2", Description: "默认客服 ID（必须是启用状态的客服角色）"},
 	{Key: "chat.auto_welcome_message", Value: "欢迎加入订单群聊！如有任何问题，请随时沟通。", Description: "建群后自动发送的欢迎话术"},
+	{Key: "chat.listing_group_welcome", Value: "欢迎加入账号群！请号主扫描下方二维码加入企业微信群，方便客服与您及时联系。", Description: "发布群创建后自动发送的欢迎语"},
 	{Key: homeAnnouncementsConfigKey, Value: defaultHomeAnnouncementsConfigValue(), Description: "移动端首页公告 JSON 数组"},
 	{Key: homeBannersConfigKey, Value: defaultHomeBannersConfigValue(), Description: "移动端首页轮播图 JSON 数组"},
 	{Key: publishOptionsConfigKey, Value: defaultPublishOptionsConfigValue(), Description: "发布页选项配置 JSON"},
@@ -46,6 +47,7 @@ var defaultConfigs = []defaultConfig{
 var adminVisibleConfigKeys = []string{
 	"chat.auto_welcome_message",
 	"chat.default_support_admin_id",
+	"chat.listing_group_welcome",
 	"handoff.owner_return_confirm_timeout_minutes",
 	"handoff.owner_submit_timeout_minutes",
 	"handoff.renter_confirm_timeout_minutes",
@@ -155,6 +157,11 @@ func (r *Repository) ensureDefaults(ctx context.Context) error {
 					return err
 				}
 			}
+			if item.Key == "chat.listing_group_welcome" {
+				if err := updateLegacyListingGroupWelcome(tx, item); err != nil {
+					return err
+				}
+			}
 			if item.Key == publishOptionsConfigKey {
 				if err := updateLegacyPublishOptions(tx, item); err != nil {
 					return err
@@ -165,6 +172,26 @@ func (r *Repository) ensureDefaults(ctx context.Context) error {
 	})
 }
 
+func updateLegacyListingGroupWelcome(tx *gorm.DB, item defaultConfig) error {
+	var row model.SystemConfig
+	if err := tx.Where("`key` = ?", item.Key).First(&row).Error; err != nil {
+		return err
+	}
+	changed := false
+	if isMojibakeText(row.Value) {
+		row.Value = item.Value
+		changed = true
+	}
+	if row.Description != item.Description {
+		row.Description = item.Description
+		changed = true
+	}
+	if !changed {
+		return nil
+	}
+	return tx.Save(&row).Error
+}
+
 func updateDefaultSupportConfig(tx *gorm.DB, item defaultConfig) error {
 	var row model.SystemConfig
 	if err := tx.Where("`key` = ?", item.Key).First(&row).Error; err != nil {
@@ -260,6 +287,16 @@ func isLegacyPublishOptionsValue(value string) bool {
 	return false
 }
 
+func isMojibakeText(value string) bool {
+	mojibakeMarkers := []string{"å", "æ", "ç", "è", "é", "ä", "ï¼", "ã€", "â"}
+	for _, marker := range mojibakeMarkers {
+		if strings.Contains(value, marker) {
+			return true
+		}
+	}
+	return false
+}
+
 func appendAuditLog(tx *gorm.DB, actorID uint64, action string, bizID uint64, meta AuditMeta, detail map[string]any) error {
 	return auditlog.Append(tx, auditlog.Entry{
 		ActorType: "admin",

backend/internal/router/router.go

@@ -550,6 +550,8 @@ func New(cfg config.Config, deps Dependencies, logger *zap.Logger) *gin.Engine {
 			adminRoutes.DELETE("/chats/quick-replies/:id", requirePerm("chat:send"), chatHandler.AdminDeleteQuickReply)
 			adminRoutes.GET("/chats/auto-welcome", requirePerm("system_config:view"), chatHandler.AdminGetAutoWelcome)
 			adminRoutes.PUT("/chats/auto-welcome", requirePerm("system_config:update"), chatHandler.AdminUpdateAutoWelcome)
+			adminRoutes.GET("/chats/listing-group-welcome", requirePerm("system_config:view"), chatHandler.AdminGetListingGroupWelcome)
+			adminRoutes.PUT("/chats/listing-group-welcome", requirePerm("system_config:update"), chatHandler.AdminUpdateListingGroupWelcome)
 
 			// 二维码池管理
 			adminRoutes.POST("/chats/qrcodes", requirePerm("chat:manage"), chatHandler.CreateQrCodeHandler)

backend/migrations/000010_listing_group_welcome_config.sql

@@ -0,0 +1,20 @@
+-- +goose Up
+-- +goose StatementBegin
+
+INSERT INTO system_configs (`key`, `value`, description) VALUES
+  ('chat.listing_group_welcome', '欢迎加入账号群！请号主扫描下方二维码加入企业微信群，方便客服与您及时联系。', '发布群创建后自动发送的欢迎语')
+ON DUPLICATE KEY UPDATE
+  `value` = CASE
+    WHEN `value` LIKE '%å%' OR `value` LIKE '%æ%' OR `value` LIKE '%ç%' OR `value` LIKE '%ä%' OR `value` LIKE '%ï¼%' THEN VALUES(`value`)
+    ELSE `value`
+  END,
+  description = VALUES(description);
+
+-- +goose StatementEnd
+
+-- +goose Down
+-- +goose StatementBegin
+
+DELETE FROM system_configs WHERE `key` = 'chat.listing_group_welcome';
+
+-- +goose StatementEnd

frontend/src/features/admin/components/AutoWelcomeConfig.vue

@@ -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>
+      <h3>{{ title }}</h3>
-      <p>订单群聊创建后自动发送的欢迎消息</p>
+      <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

@@ -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-dialog v-model="uploadVisible" title="批量添加企业微信群二维码" width="680px">
-      <el-form label-width="90px">
+      <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
+                <div class="uploaded-thumb">
-                  :source="img.url"
+                  <AuthImage
-                  fit="cover"
+                    :source="img.url"
-                  :image-style="{ width: '64px', height: '64px', borderRadius: '4px' }"
+                    fit="cover"
-                />
+                    :image-style="{ width: '52px', height: '52px', borderRadius: '6px' }"
-                <el-button link type="danger" size="small" @click="removeImage(idx)">移除</el-button>
+                    :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 :disabled="uploadBusy" @click="uploadVisible = false">取消</el-button>
-        <el-button type="primary" :loading="uploading" @click="submitUpload">
+        <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
+            <div class="edit-image-preview">
-              v-if="editForm.image_url"
+              <AuthImage
-              :source="editForm.image_url"
+                v-if="editForm.image_url"
-              fit="cover"
+                :source="editForm.image_url"
-              :image-style="{ width: '96px', height: '96px', borderRadius: '6px' }"
+                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;
+  display: grid;
-  flex-wrap: wrap;
+  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
-  gap: 12px;
+  gap: 10px;
-  margin-top: 12px;
+  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

@@ -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;
 }

frontend/src/features/chats/api/chats.ts

@@ -234,3 +234,18 @@ export async function updateAutoWelcomeMessage(message: string) {
   )
   return data.data
 }
+
+export async function fetchListingGroupWelcomeMessage() {
+  const { data } = await apiClient.get<ApiResponse<{ message: string }>>(
+    '/admin/chats/listing-group-welcome'
+  )
+  return data.data.message
+}
+
+export async function updateListingGroupWelcomeMessage(message: string) {
+  const { data } = await apiClient.put<ApiResponse<{ updated: boolean }>>(
+    '/admin/chats/listing-group-welcome',
+    { message }
+  )
+  return data.data
+}

frontend/src/features/chats/views/ChatView.vue

@@ -295,9 +295,11 @@ function handleKeydown(e: KeyboardEvent) {
           }"
         >
           <template v-if="item.sender_type === 'system'">
-            <span class="system-message">{{ item.content }}</span>
+            <div class="system-block">
-            <div v-if="item.attachment_urls.length > 0" class="system-attachments">
+              <span class="system-message">{{ item.content }}</span>
-              <ChatAttachmentImage v-for="url in item.attachment_urls" :key="url" :source="url" />
+              <div v-if="item.attachment_urls.length > 0" class="system-attachments">
+                <ChatAttachmentImage v-for="url in item.attachment_urls" :key="url" :source="url" />
+              </div>
             </div>
           </template>
           <template v-else>
@@ -563,19 +565,29 @@ function handleKeydown(e: KeyboardEvent) {
 }
 
 .system-message {
-  max-width: 80%;
+  display: block;
-  padding: 6px 12px;
+  padding: 8px 14px;
-  border-radius: 8px;
+  border-radius: 10px;
-  background: #e6ebf2;
+  background: #eef3f8;
-  color: #6b7280;
+  color: #516072;
-  font-size: 12px;
+  font-size: 13px;
   line-height: 1.4;
   text-align: center;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.system-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  width: min(100%, 560px);
+  margin: 0 auto;
 }
 
 .system-attachments {
-  margin-top: 6px;
+  max-width: 280px;
-  max-width: 200px;
 }
 
 .composer {

frontend/src/features/chats/views/MobileChatView.vue

@@ -276,9 +276,11 @@ function senderLabel(message: ChatMessage) {
         }"
       >
         <template v-if="item.sender_type === 'system'">
-          <span class="system-message">{{ item.content }}</span>
+          <div class="system-block">
-          <div v-if="item.attachment_urls.length > 0" class="system-attachments">
+            <span class="system-message">{{ item.content }}</span>
-            <ChatAttachmentImage v-for="url in item.attachment_urls" :key="url" :source="url" />
+            <div v-if="item.attachment_urls.length > 0" class="system-attachments">
+              <ChatAttachmentImage v-for="url in item.attachment_urls" :key="url" :source="url" />
+            </div>
           </div>
         </template>
         <template v-else>
@@ -524,19 +526,28 @@ function senderLabel(message: ChatMessage) {
 }
 
 .system-message {
-  max-width: 82%;
+  display: block;
-  padding: 5px 9px;
+  padding: 8px 12px;
-  border-radius: 8px;
+  border-radius: 10px;
-  background: #e6ebf2;
+  background: #eef3f8;
-  color: #6b7280;
+  color: #516072;
-  font-size: 11px;
+  font-size: 12px;
   line-height: 1.4;
   text-align: center;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.system-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  width: min(100%, 320px);
 }
 
 .system-attachments {
-  margin-top: 6px;
+  max-width: 220px;
-  max-width: 180px;
 }
 .composer {
   display: grid;

frontend/src/shared/components/business/AuthImage.vue

@@ -34,6 +34,10 @@ const createdURLs: string[] = []
 
 const usePreview = computed(() => !!props.previewSrcList?.length)
 const fallbackText = computed(() => (failed.value ? '图片加载失败' : '图片加载中'))
+const imageStyleValue = computed(() => {
+  if (!props.fit) return props.imageStyle
+  return [props.imageStyle, { objectFit: props.fit }]
+})
 
 function extractObjectKey(value: string) {
   try {
@@ -105,6 +109,7 @@ onBeforeUnmount(cleanup)
     v-else-if="imageURL"
     :class="imageClass"
     :src="imageURL"
+    :style="imageStyleValue"
     :alt="alt"
     :loading="loading"
     :decoding="decoding"