111 lines
3.4 KiB
HTML
111 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Todo List Test</title>
|
|
<link rel="stylesheet" href="/style.css">
|
|
</head>
|
|
<body>
|
|
<div id="messages" style="max-width: 800px; margin: 50px auto;"></div>
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<script>
|
|
// 从 app.js 复制的函数
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function renderMarkdown(text) {
|
|
if (!text) return '<div class="typing-indicator"><span></span><span></span><span></span></div>';
|
|
try { return marked.parse(text); }
|
|
catch { return escapeHtml(text); }
|
|
}
|
|
|
|
function createTodoListElement(block) {
|
|
const container = document.createElement('div');
|
|
container.className = 'todo-list-container';
|
|
container.dataset.todoId = block.id || '';
|
|
|
|
const list = document.createElement('ul');
|
|
list.className = 'todo-list';
|
|
|
|
if (Array.isArray(block.items)) {
|
|
block.items.forEach((item, index) => {
|
|
const li = document.createElement('li');
|
|
li.className = 'todo-item' + (item.completed ? ' completed' : '');
|
|
|
|
const checkbox = document.createElement('input');
|
|
checkbox.type = 'checkbox';
|
|
checkbox.className = 'todo-checkbox';
|
|
checkbox.checked = item.completed || false;
|
|
checkbox.dataset.index = index;
|
|
|
|
const label = document.createElement('span');
|
|
label.className = 'todo-text';
|
|
label.textContent = item.text || '';
|
|
|
|
li.appendChild(checkbox);
|
|
li.appendChild(label);
|
|
list.appendChild(li);
|
|
});
|
|
}
|
|
|
|
container.appendChild(list);
|
|
return container;
|
|
}
|
|
|
|
function renderAssistantContent(bubble, content) {
|
|
if (!content) return;
|
|
|
|
if (typeof content === 'string') {
|
|
bubble.innerHTML = renderMarkdown(content);
|
|
return;
|
|
}
|
|
|
|
if (Array.isArray(content)) {
|
|
content.forEach(block => {
|
|
if (block.type === 'text') {
|
|
const textDiv = document.createElement('div');
|
|
textDiv.innerHTML = renderMarkdown(block.text || '');
|
|
bubble.appendChild(textDiv);
|
|
} else if (block.type === 'todo_list') {
|
|
bubble.appendChild(createTodoListElement(block));
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
|
|
bubble.innerHTML = renderMarkdown(String(content));
|
|
}
|
|
|
|
// 测试数据
|
|
const testContent = [
|
|
{
|
|
type: "text",
|
|
text: "这是一个任务列表示例："
|
|
},
|
|
{
|
|
id: "item_1",
|
|
type: "todo_list",
|
|
items: [
|
|
{ text: "阅读 todo-list-csv skill 并确认仓库现状", completed: false },
|
|
{ text: "梳理前后端改动点与交互入口", completed: false },
|
|
{ text: "实现后端目录浏览与文本预览接口", completed: false },
|
|
{ text: "实现前端文件浏览弹层与交互", completed: false },
|
|
{ text: "补充移动端样式与可用性细节", completed: false },
|
|
{ text: "自查代码并给出验证说明", completed: false }
|
|
]
|
|
}
|
|
];
|
|
|
|
// 渲染测试
|
|
const messagesDiv = document.getElementById('messages');
|
|
const bubble = document.createElement('div');
|
|
bubble.className = 'msg-bubble';
|
|
renderAssistantContent(bubble, testContent);
|
|
messagesDiv.appendChild(bubble);
|
|
</script>
|
|
</body>
|
|
</html>
|