From 801809c5a5efaf52a6f1fd8d1a45a3b70463a0e6 Mon Sep 17 00:00:00 2001
From: moranzhi <shen893514322@126.com>
Date: Sun, 26 Apr 2026 03:42:15 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E4=BF=AE=E9=A5=B0=E4=B8=8E?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/layouts/CenterPanel/CenterPanel.vue   |  11 +-
 .../features/ChatInput/ChatInput.vue          |  36 +--
 .../features/MessageList/MessageList.vue      | 283 +++++++++---------
 3 files changed, 159 insertions(+), 171 deletions(-)

diff --git a/client/src/layouts/CenterPanel/CenterPanel.vue b/client/src/layouts/CenterPanel/CenterPanel.vue
index e63da91..abf6e28 100644
--- a/client/src/layouts/CenterPanel/CenterPanel.vue
+++ b/client/src/layouts/CenterPanel/CenterPanel.vue
@@ -1,20 +1,13 @@
 <template>
   <div class="center-panel">
-    <MessageList 
-      :render-markdown="chatInputRef?.renderMarkdown"
-      :render-html="chatInputRef?.renderHTML"
-    />
-    <ChatInput ref="chatInputRef" />
+    <MessageList />
+    <ChatInput />
   </div>
 </template>
 
 <script setup lang="ts">
-import { shallowRef } from 'vue';
 import MessageList from './features/MessageList/MessageList.vue';
 import ChatInput from './features/ChatInput/ChatInput.vue';
-
-// Use shallowRef to prevent Vue from unwrapping the nested refs
-const chatInputRef = shallowRef<InstanceType<typeof ChatInput> | null>(null);
 </script>
 
 <style scoped>
diff --git a/client/src/layouts/CenterPanel/features/ChatInput/ChatInput.vue b/client/src/layouts/CenterPanel/features/ChatInput/ChatInput.vue
index c9b602e..f1c6316 100644
--- a/client/src/layouts/CenterPanel/features/ChatInput/ChatInput.vue
+++ b/client/src/layouts/CenterPanel/features/ChatInput/ChatInput.vue
@@ -16,22 +16,22 @@
         <transition name="slide-down">
           <div v-if="showOptions" class="input-options">
             <label class="option-checkbox">
-              <input type="checkbox" v-model="renderHTML" />
+              <input type="checkbox" v-model="renderStore.renderHTML" />
               <span class="checkmark"></span>
               <span class="option-label">HTML渲染</span>
             </label>
             <label class="option-checkbox">
-              <input type="checkbox" v-model="renderMarkdown" />
+              <input type="checkbox" v-model="renderStore.renderMarkdown" />
               <span class="checkmark"></span>
               <span class="option-label">MD渲染</span>
             </label>
             <label class="option-checkbox">
-              <input type="checkbox" v-model="enableDynamicTables" />
+              <input type="checkbox" v-model="renderStore.enableDynamicTables" />
               <span class="checkmark"></span>
               <span class="option-label">动态表格</span>
             </label>
             <label class="option-checkbox">
-              <input type="checkbox" v-model="enableDrawing" />
+              <input type="checkbox" v-model="renderStore.enableDrawing" />
               <span class="checkmark"></span>
               <span class="option-label">绘图</span>
             </label>
@@ -54,33 +54,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
-import { useLocalStorage } from '@/composables/useLocalStorage';
+import { ref } from 'vue';
+import { useMessageRenderStore } from '@/stores/useMessageRenderStore';
 
 const showOptions = ref(false);
 
-// Render options with localStorage persistence
-const renderMarkdown = useLocalStorage<boolean>('message-render-markdown', true);
-const renderHTML = useLocalStorage<boolean>('message-render-html', true);
-const enableDynamicTables = useLocalStorage<boolean>('message-render-tables', false);
-const enableDrawing = useLocalStorage<boolean>('message-render-drawing', false);
-
-// Debug: Watch for changes
-watch(renderMarkdown, (newVal) => {
-  console.log('[ChatInput] renderMarkdown changed to:', newVal);
-});
-
-watch(renderHTML, (newVal) => {
-  console.log('[ChatInput] renderHTML changed to:', newVal);
-});
-
-// Expose render options for parent components to use
-defineExpose({
-  renderMarkdown,
-  renderHTML,
-  enableDynamicTables,
-  enableDrawing
-});
+// Use Pinia store for render options
+const renderStore = useMessageRenderStore();
 </script>
 
 <style scoped>
diff --git a/client/src/layouts/CenterPanel/features/MessageList/MessageList.vue b/client/src/layouts/CenterPanel/features/MessageList/MessageList.vue
index 05e1272..95434f7 100644
--- a/client/src/layouts/CenterPanel/features/MessageList/MessageList.vue
+++ b/client/src/layouts/CenterPanel/features/MessageList/MessageList.vue
@@ -1,65 +1,102 @@
 <template>
   <div class="message-list">
     <div class="messages-container">
+      <!-- User Message -->
       <div class="message user-message">
-        <div class="message-avatar"></div>
-        <div class="message-content">
+        <div class="message-header">
+          <div class="message-avatar"></div>
+          <div class="message-meta">
+            <span class="message-time">10:30 AM</span>
+            <div class="message-actions">
+              <button class="action-btn" title="Edit">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+                  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+                </svg>
+              </button>
+              <button class="action-btn" title="Delete">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <polyline points="3 6 5 6 21 6"></polyline>
+                  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+                </svg>
+              </button>
+              <button class="action-btn" title="Copy">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="message-bubble">
           <p v-html="renderMessageContent(userMessage)"></p>
-          <div class="message-actions">
-            <button class="action-btn" title="Edit">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
-                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
-              </svg>
-            </button>
-            <button class="action-btn" title="Delete">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <polyline points="3 6 5 6 21 6"></polyline>
-                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-              </svg>
-            </button>
-            <button class="action-btn" title="Copy">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
-              </svg>
-            </button>
-          </div>
-          <span class="message-time">10:30 AM</span>
         </div>
       </div>
+
+      <!-- Assistant Message -->
       <div class="message assistant-message">
-        <div class="message-avatar"></div>
-        <div class="message-content">
-          <p v-html="renderMessageContent(assistantMessage)"></p>
-          <div class="message-actions">
-            <button class="action-btn" title="Edit">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
-                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
-              </svg>
-            </button>
-            <button class="action-btn" title="Delete">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <polyline points="3 6 5 6 21 6"></polyline>
-                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-              </svg>
-            </button>
-            <button class="action-btn" title="Copy">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
-              </svg>
-            </button>
+        <div class="message-header">
+          <div class="message-avatar"></div>
+          <div class="message-meta">
+            <span class="message-time">10:31 AM</span>
+            <div class="message-actions">
+              <button class="action-btn" title="Edit">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+                  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+                </svg>
+              </button>
+              <button class="action-btn" title="Delete">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <polyline points="3 6 5 6 21 6"></polyline>
+                  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+                </svg>
+              </button>
+              <button class="action-btn" title="Copy">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                </svg>
+              </button>
+            </div>
           </div>
-          <span class="message-time">10:31 AM</span>
+        </div>
+        <div class="message-bubble">
+          <p v-html="renderMessageContent(assistantMessage)"></p>
         </div>
       </div>
+
+      <!-- Simple Message -->
       <div class="message user-message">
-        <div class="message-avatar"></div>
-        <div class="message-content">
+        <div class="message-header">
+          <div class="message-avatar"></div>
+          <div class="message-meta">
+            <span class="message-time">10:32 AM</span>
+            <div class="message-actions">
+              <button class="action-btn" title="Edit">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+                  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+                </svg>
+              </button>
+              <button class="action-btn" title="Delete">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <polyline points="3 6 5 6 21 6"></polyline>
+                  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+                </svg>
+              </button>
+              <button class="action-btn" title="Copy">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="message-bubble">
           <p>Another message to show the conversation flow.</p>
-          <span class="message-time">10:32 AM</span>
         </div>
       </div>
     </div>
@@ -67,48 +104,23 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch } from 'vue';
+import { useMessageRenderStore } from '@/stores/useMessageRenderStore';
 
-// Props from parent component - Vue automatically unwraps refs in templates
-const props = defineProps<{
-  renderMarkdown?: boolean;
-  renderHTML?: boolean;
-}>();
-
-// Use props or default to true
-const renderMarkdown = computed(() => {
-  const value = props.renderMarkdown ?? true;
-  console.log('[MessageList] renderMarkdown:', value);
-  return value;
-});
-
-const renderHTML = computed(() => {
-  const value = props.renderHTML ?? true;
-  console.log('[MessageList] renderHTML:', value);
-  return value;
-});
-
-// Watch for changes
-watch(renderMarkdown, (newVal) => {
-  console.log('[MessageList] renderMarkdown changed to:', newVal);
-});
-
-watch(renderHTML, (newVal) => {
-  console.log('[MessageList] renderHTML changed to:', newVal);
-});
+// Use Pinia store for render options
+const renderStore = useMessageRenderStore();
 
 // Simple Markdown parser for testing (no external dependencies)
 function simpleMarkdownParse(text: string): string {
   let html = text;
 
   // If HTML rendering is disabled, escape HTML first
-  if (!renderHTML.value) {
+  if (!renderStore.renderHTML) {
     html = escapeHtml(html);
   }
 
   // Code blocks (must be processed before other rules to avoid conflicts)
   html = html.replace(/```(\w*)\n([\s\S]*?)```/g, (match, lang, code) => {
-    const escapedCode = renderHTML.value ? code.trim() : escapeHtml(code.trim());
+    const escapedCode = renderStore.renderHTML ? code.trim() : escapeHtml(code.trim());
     return `<pre><code class="language-${lang || 'text'}">${escapedCode}</code></pre>`;
   });
 
@@ -172,33 +184,23 @@ function escapeHtml(text: string): string {
 }
 
 function renderMessageContent(content: string): string {
-  console.log('[renderMessageContent] Input:', content.substring(0, 50));
-  console.log('[renderMessageContent] renderMarkdown:', renderMarkdown.value, 'renderHTML:', renderHTML.value);
-  
   // If neither markdown nor HTML rendering is enabled, escape and return plain text
-  if (!renderMarkdown.value && !renderHTML.value) {
-    const result = escapeHtml(content);
-    console.log('[renderMessageContent] Both disabled, escaped:', result.substring(0, 50));
-    return result;
+  if (!renderStore.renderMarkdown && !renderStore.renderHTML) {
+    return escapeHtml(content);
   }
   
   // If markdown rendering is enabled, parse it (HTML rendering controls whether HTML tags are escaped)
-  if (renderMarkdown.value) {
-    const result = simpleMarkdownParse(content);
-    console.log('[renderMessageContent] Markdown parsed, result length:', result.length);
-    return result;
+  if (renderStore.renderMarkdown) {
+    return simpleMarkdownParse(content);
   }
   
   // If only HTML rendering is enabled (no markdown), return as-is
-  if (renderHTML.value) {
-    console.log('[renderMessageContent] HTML only, returning as-is');
+  if (renderStore.renderHTML) {
     return content;
   }
   
   // HTML rendering disabled, no markdown - escape everything
-  const result = escapeHtml(content);
-  console.log('[renderMessageContent] HTML disabled, escaped:', result.substring(0, 50));
-  return result;
+  return escapeHtml(content);
 }
 
 // Sample messages for testing - using LLM provided examples
@@ -263,20 +265,31 @@ const assistantMessage = [
 
 .message {
   display: flex;
-  gap: var(--spacing-md);
+  flex-direction: column;
+  gap: var(--spacing-xs);
   max-width: 75%;
   animation: fadeIn 0.4s var(--transition-smooth);
 }
 
 .user-message {
   align-self: flex-end;
-  flex-direction: row-reverse;
 }
 
 .assistant-message {
   align-self: flex-start;
 }
 
+/* Message Header - Avatar + Meta */
+.message-header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.user-message .message-header {
+  flex-direction: row-reverse;
+}
+
 .message-avatar {
   width: 32px;
   height: 32px;
@@ -300,14 +313,22 @@ const assistantMessage = [
   box-shadow: var(--shadow-md), 0 0 0 2px var(--color-accent-light);
 }
 
-.message-content {
+.message-meta {
   display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.user-message .message-meta {
+  flex-direction: row-reverse;
+}
+
+/* Message Bubble */
+.message-bubble {
   min-width: 0;
 }
 
-.message-content p {
+.message-bubble p {
   margin: 0;
   padding: var(--spacing-md);
   border-radius: var(--radius-lg);
@@ -319,17 +340,17 @@ const assistantMessage = [
 }
 
 /* Markdown rendered content styles */
-.message-content p :deep(strong),
-.message-content p :deep(b) {
+.message-bubble p :deep(strong),
+.message-bubble p :deep(b) {
   font-weight: 600;
 }
 
-.message-content p :deep(em),
-.message-content p :deep(i) {
+.message-bubble p :deep(em),
+.message-bubble p :deep(i) {
   font-style: italic;
 }
 
-.message-content p :deep(code) {
+.message-bubble p :deep(code) {
   background-color: rgba(0, 0, 0, 0.1);
   padding: 2px 6px;
   border-radius: 4px;
@@ -337,11 +358,11 @@ const assistantMessage = [
   font-size: 0.85em;
 }
 
-.user-message .message-content p :deep(code) {
+.user-message .message-bubble p :deep(code) {
   background-color: rgba(255, 255, 255, 0.2);
 }
 
-.message-content p :deep(pre) {
+.message-bubble p :deep(pre) {
   background-color: rgba(0, 0, 0, 0.15);
   padding: var(--spacing-md);
   border-radius: var(--radius-md);
@@ -349,54 +370,54 @@ const assistantMessage = [
   margin: var(--spacing-sm) 0;
 }
 
-.user-message .message-content p :deep(pre) {
+.user-message .message-bubble p :deep(pre) {
   background-color: rgba(255, 255, 255, 0.15);
 }
 
-.message-content p :deep(pre code) {
+.message-bubble p :deep(pre code) {
   background: none;
   padding: 0;
 }
 
-.message-content p :deep(ul),
-.message-content p :deep(ol) {
+.message-bubble p :deep(ul),
+.message-bubble p :deep(ol) {
   margin: var(--spacing-sm) 0;
   padding-left: var(--spacing-lg);
 }
 
-.message-content p :deep(li) {
+.message-bubble p :deep(li) {
   margin: var(--spacing-xs) 0;
 }
 
-.message-content p :deep(blockquote) {
+.message-bubble p :deep(blockquote) {
   border-left: 3px solid var(--color-accent);
   padding-left: var(--spacing-md);
   margin: var(--spacing-sm) 0;
   opacity: 0.8;
 }
 
-.message-content p :deep(h1),
-.message-content p :deep(h2),
-.message-content p :deep(h3),
-.message-content p :deep(h4),
-.message-content p :deep(h5),
-.message-content p :deep(h6) {
+.message-bubble p :deep(h1),
+.message-bubble p :deep(h2),
+.message-bubble p :deep(h3),
+.message-bubble p :deep(h4),
+.message-bubble p :deep(h5),
+.message-bubble p :deep(h6) {
   margin: var(--spacing-md) 0 var(--spacing-sm) 0;
   font-weight: 600;
   line-height: 1.4;
 }
 
-.message-content p :deep(h1) { font-size: 1.5em; }
-.message-content p :deep(h2) { font-size: 1.3em; }
-.message-content p :deep(h3) { font-size: 1.1em; }
+.message-bubble p :deep(h1) { font-size: 1.5em; }
+.message-bubble p :deep(h2) { font-size: 1.3em; }
+.message-bubble p :deep(h3) { font-size: 1.1em; }
 
-.message-content p :deep(a) {
+.message-bubble p :deep(a) {
   color: inherit;
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.message-content p :deep(a:hover) {
+.message-bubble p :deep(a:hover) {
   opacity: 1;
 }
 
@@ -405,10 +426,9 @@ const assistantMessage = [
   gap: var(--spacing-xs);
   opacity: 0;
   transition: opacity var(--transition-fast);
-  margin-top: var(--spacing-xs);
 }
 
-.message-content:hover .message-actions {
+.message-header:hover .message-actions {
   opacity: 1;
 }
 
@@ -433,14 +453,14 @@ const assistantMessage = [
   transform: scale(1.1);
 }
 
-.user-message .message-content p {
+.user-message .message-bubble p {
   background: var(--gradient-primary);
   color: var(--color-text-inverse);
   border-bottom-right-radius: var(--radius-sm);
   box-shadow: var(--shadow-md), 0 0 0 1px rgba(91, 127, 255, 0.1);
 }
 
-.assistant-message .message-content p {
+.assistant-message .message-bubble p {
   background-color: var(--color-bg-secondary);
   color: var(--color-text-primary);
   border: 1px solid var(--color-border-light);
@@ -451,14 +471,9 @@ const assistantMessage = [
 .message-time {
   font-size: 0.7rem;
   color: var(--color-text-muted);
-  padding: 0 var(--spacing-xs);
   opacity: 0.8;
 }
 
-.user-message .message-time {
-  text-align: right;
-}
-
 /* Custom scrollbar for webkit browsers */
 .message-list::-webkit-scrollbar {
   width: 6px;