mirror of
https://github.com/Minidoracat/mcp-feedback-enhanced.git
synced 2025-07-27 02:22:26 +08:00
55 lines
1.7 KiB
Markdown
55 lines
1.7 KiB
Markdown
|
# combinedSummaryContent Markdown 語法顯示功能實作
|
|||
|
|
|
|||
|
|
## 任務概述
|
|||
|
|
為 mcp-feedback-enhanced 專案中的 combinedSummaryContent 區域實現 Markdown 語法顯示功能，將純文字顯示改為支援 Markdown 渲染。
|
|||
|
|
|
|||
|
|
## 技術方案
|
|||
|
|
- **選用庫**：marked.js（輕量級、高性能）
|
|||
|
|
- **引入方式**：CDN 直接引用
|
|||
|
|
- **安全處理**：配合 DOMPurify 進行 HTML 清理
|
|||
|
|
- **樣式策略**：保持原生 Markdown 樣式
|
|||
|
|
|
|||
|
|
## 實作計劃
|
|||
|
|
|
|||
|
|
### 階段 1：環境準備和依賴引入 ✅
|
|||
|
|
- 修改 feedback.html 模板添加 marked.js CDN 引用
|
|||
|
|
- 驗證庫載入
|
|||
|
|
|
|||
|
|
### 階段 2：核心功能實作
|
|||
|
|
- 修改 ui-manager.js 中的 updateAISummaryContent 函數
|
|||
|
|
- 實現 Markdown 解析和渲染
|
|||
|
|
- 添加安全性處理
|
|||
|
|
|
|||
|
|
### 階段 3：樣式優化
|
|||
|
|
- 調整 CSS 樣式確保 Markdown 內容正確顯示
|
|||
|
|
- 優化行間距和視覺效果
|
|||
|
|
|
|||
|
|
### 階段 4：測試內容和功能驗證
|
|||
|
|
- 建立包含多種 Markdown 語法的測試內容
|
|||
|
|
- 驗證功能正確性
|
|||
|
|
|
|||
|
|
### 階段 5：相容性確保
|
|||
|
|
- 確保向後相容性
|
|||
|
|
- 添加錯誤處理機制
|
|||
|
|
|
|||
|
|
## 目標元素
|
|||
|
|
```html
|
|||
|
|
<div id="combinedSummaryContent" class="text-input"
|
|||
|
|
style="min-height: 200px; white-space: pre-wrap !important; cursor: text; padding: 12px; line-height: 1.6; word-wrap: break-word; overflow-wrap: break-word;"
|
|||
|
|
data-dynamic-content="aiSummary">
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 測試內容範例
|
|||
|
|
將包含以下 Markdown 語法：
|
|||
|
|
- 標題（# ## ###）
|
|||
|
|
- 粗體和斜體（**bold** *italic*）
|
|||
|
|
- 程式碼區塊（```code```）
|
|||
|
|
- 列表（- 項目）
|
|||
|
|
- 連結（[text](url)）
|
|||
|
|
|
|||
|
|
## 預期結果
|
|||
|
|
- 保持現有 CSS 樣式和響應式設計
|
|||
|
|
- 與現有 data-dynamic-content="aiSummary" 機制相容
|
|||
|
|
- 使用原生 Markdown 樣式渲染
|
|||
|
|
- 不影響現有功能
|