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

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 v-if="item.attachment_urls.length > 0" class="system-attachments">
-              <ChatAttachmentImage v-for="url in item.attachment_urls" :key="url" :source="url" />
+            <div class="system-block">
+              <span class="system-message">{{ item.content }}</span>
+              <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%;
-  padding: 6px 12px;
-  border-radius: 8px;
-  background: #e6ebf2;
-  color: #6b7280;
-  font-size: 12px;
+  display: block;
+  padding: 8px 14px;
+  border-radius: 10px;
+  background: #eef3f8;
+  color: #516072;
+  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: 200px;
+  max-width: 280px;
 }
 
 .composer {