From 33d75bf83a852bd7117864b4903b3f4af92b8119 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Mon, 9 Mar 2026 10:47:50 +0800
Subject: [PATCH] feat: collapse code blocks in AI chat messages

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/PromptPanel.vue | 40 ++++++++++++++++++++++++++++++++--
 1 file changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/components/PromptPanel.vue b/src/components/PromptPanel.vue
index 93dd2e1..9442520 100644
--- a/src/components/PromptPanel.vue
+++ b/src/components/PromptPanel.vue
@@ -38,7 +38,7 @@
 
 <script setup lang="ts">
 import { ref, watch, nextTick } from "vue"
-import { marked } from "marked"
+import { marked, Renderer } from "marked"
 import {
   messages,
   streaming,
@@ -57,8 +57,18 @@ function send() {
   input.value = ""
 }
 
+const renderer = new Renderer()
+renderer.code = function ({ text, lang }: { text: string; lang?: string }) {
+  const label = lang ? `查看代码（${lang}）` : "查看代码"
+  const escaped = text
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+  return `<details class="code-block"><summary>${label}</summary><pre><code class="hljs${lang ? ` language-${lang}` : ""}">${escaped}</code></pre></details>`
+}
+
 function renderMarkdown(text: string): string {
-  return marked.parse(text) as string
+  return marked.parse(text, { renderer }) as string
 }
 
 function renderContent(msg: { role: string; content: string }): string {
@@ -128,4 +138,30 @@ watch(
   padding: 12px;
   border-top: 1px solid #e0e0e0;
 }
+
+.message-content :deep(details.code-block) {
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  margin: 6px 0;
+}
+
+.message-content :deep(details.code-block summary) {
+  padding: 4px 10px;
+  cursor: pointer;
+  font-size: 12px;
+  color: #666;
+  user-select: none;
+  background: #f5f5f5;
+  border-radius: 4px;
+}
+
+.message-content :deep(details.code-block[open] summary) {
+  border-bottom: 1px solid #e0e0e0;
+  border-radius: 4px 4px 0 0;
+}
+
+.message-content :deep(details.code-block pre) {
+  margin: 0;
+  border-radius: 0 0 4px 4px;
+}
 </style>