添加markdown解析ai返回信息、添加purify动态清理无用缓存

css/chat.css

@@ -40,18 +40,49 @@
     word-break: break-word;
 }
 
-  .message.user {
+.message.user {
     background-color: #daf1fc;
     align-self: flex-end;
     text-align: left;
     margin-left: auto;
 }
 
-  .message.bot {
+.message.bot {
     background-color: #eee;
     align-self: flex-start;
     text-align: left;
     margin-right: auto;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+/* 清除常见 markdown 元素的默认 margin */
+.message.bot h1,
+.message.bot h2,
+.message.bot h3,
+.message.bot p,
+.message.bot ul,
+.message.bot ol,
+.message.bot pre,
+.message.bot code {
+  margin: 0;
+  padding: 0;
+  font-size: inherit;
+}
+
+/* 更友好地渲染列表 */
+.message.bot ul,
+.message.bot ol {
+  padding-left: 1.2em;
+}
+
+/* 美化代码块 */
+.message.bot pre {
+  background: #272822;
+  color: #f8f8f2;
+  padding: 8px;
+  overflow-x: auto;
+  border-radius: 4px;
 }
 
 .input-row {

index.html

@@ -67,6 +67,8 @@
     <script src="javascape/ai_api.js"></script>
     <script src="javascape/chat.js"></script>
     <script src="javascape/max_width.js"></script>
+    <script src="javascape/marked.min.js"></script>
+    <script src="javascape/purify.min.js"></script>
 
 </body>
 </html>

javascape/ai_api.js

@@ -4,50 +4,58 @@ const API_KEY = 'sk-or-v1-4915a672258dc64f8d553da4df271fce635b6cdf86b296d45ccbde
 const API_URL = 'https://openrouter.ai/api/v1/chat/completions';
 let messages = [];
 
-function appendMessage(content, sender) {
-  const chatContainer = document.getElementById('chatContainer');
-  const messageDiv = document.createElement('div');
-  messageDiv.classList.add('message', sender);
-  messageDiv.textContent = content;
-  chatContainer.appendChild(messageDiv);
-  chatContainer.scrollTop = chatContainer.scrollHeight;
+function appendMessage(content, sender, isMarkdown = false) {
+    const chatContainer = document.getElementById('chatContainer');
+    const messageDiv = document.createElement('div');
+    messageDiv.classList.add('message', sender);
+
+    if (isMarkdown) {
+      // 将 Markdown 转为 HTML 并清理
+      const html = DOMPurify.sanitize(marked.parse(content));
+      messageDiv.innerHTML = html;
+    } else {
+      messageDiv.textContent = content;
+    }
+
+    chatContainer.appendChild(messageDiv);
+    chatContainer.scrollTop = chatContainer.scrollHeight;
 }
 
 async function sendMessage() {
-  const inputElem = document.getElementById('userInput');
-  const userMessage = inputElem.value.trim();
-  if (!userMessage) return;
+    const inputElem = document.getElementById('userInput');
+    const userMessage = inputElem.value.trim();
+    if (!userMessage) return;
 
-  appendMessage(userMessage, 'user');
-  messages.push({ role: 'user', content: userMessage });
-  inputElem.value = '';
+    appendMessage(userMessage, 'user');
+    messages.push({ role: 'user', content: userMessage });
+    inputElem.value = '';
 
-  const payload = {
-    //model: 'deepseek/deepseek-r1:free',
-    model: 'deepseek/deepseek-chat-v3-0324:free',
-    messages: messages
-  };
+    const payload = {
+      model: 'deepseek/deepseek-chat-v3-0324:free',
+      messages: messages
+    };
 
-  try {
-    const response = await fetch(API_URL, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': 'Bearer ' + API_KEY
-      },
-      body: JSON.stringify(payload)
-    });
-    const data = await response.json();
+    try {
+      const response = await fetch(API_URL, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': 'Bearer ' + API_KEY
+        },
+        body: JSON.stringify(payload)
+      });
 
-    if (data.choices && data.choices.length > 0) {
-      const botMessage = data.choices[0].message.content;
-      appendMessage(botMessage, 'bot');
-      messages.push({ role: 'assistant', content: botMessage });
-    } else {
-      appendMessage('没有收到有效响应，请检查 API 设置。', 'bot');
+      const data = await response.json();
+
+      if (data.choices && data.choices.length > 0) {
+        const botMessage = data.choices[0].message.content;
+        appendMessage(botMessage, 'bot', true); //  这里启用 Markdown 渲染
+        messages.push({ role: 'assistant', content: botMessage });
+      } else {
+        appendMessage('没有收到有效响应，请检查 API 设置。', 'bot');
+      }
+    } catch (error) {
+      console.error('请求错误：', error);
+      appendMessage('请求出错：' + error.message, 'bot');
     }
-  } catch (error) {
-    console.error('请求错误：', error);
-    appendMessage('请求出错：' + error.message, 'bot');
-  }
 }