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

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>
-      <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 {