md2page/toc-test.html at main · Kaiyuan/md2page · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>目录功能测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 2rem;
        }
        .test-result {
            padding: 0.5rem;
            margin: 0.5rem 0;
            border-radius: 4px;
        }
        .success { background: #d4edda; color: #155724; }
        .error { background: #f8d7da; color: #721c24; }
        .info { background: #d1ecf1; color: #0c5460; }

        .demo-content {
            border: 1px solid #ddd;
            padding: 1rem;
            margin: 1rem 0;
            border-radius: 6px;
            background: #f9f9f9;
        }
    </style>
</head>
<body>
    <h1>目录功能测试</h1>
    <div id="results"></div>

    <div class="demo-content">
        <h2>测试内容预览</h2>
        <div id="demo-html"></div>
    </div>

    <!-- 引入 marked.js CDN -->
    <script src="https://cdn.jsdelivr.net/npm/marked@9.1.6/marked.min.js"></script>

    <!-- 应用脚本 -->
    <script src="./js/classes.js"></script>

    <script>
        function addResult(message, type = 'info') {
            const div = document.createElement('div');
            div.className = `test-result ${type}`;
            div.textContent = message;
            document.getElementById('results').appendChild(div);
            console.log(message);
        }

        document.addEventListener('DOMContentLoaded', function() {
            addResult('开始目录功能测试...', 'info');

            // 检查TOCGenerator类
            if (typeof TOCGenerator === 'function') {
                addResult('✅ TOCGenerator 类定义正确', 'success');

                try {
                    const tocGenerator = new TOCGenerator();
                    addResult('✅ TOCGenerator 实例创建成功', 'success');

                    // 测试目录生成
                    const testMarkdown = \`# 第一章 介绍

这是第一章的内容。

## 1.1 概述

这是概述部分。

## 1.2 特性

这是特性介绍。

### 1.2.1 核心特性

核心特性说明。

### 1.2.2 扩展特性

扩展特性说明。

# 第二章 使用方法

这是第二章的内容。

## 2.1 快速开始

快速开始指南。

## 2.2 高级用法

高级用法说明。\`;

                    // 转换为HTML
                    const converter = new MarkdownConverter();
                    const html = converter.parseMarkdown(testMarkdown);

                    addResult('✅ 测试内容转换成功', 'success');

                    // 生成目录
                    const tocData = tocGenerator.generateTOC(html);

                    if (tocData.count > 0) {
                        addResult(\`✅ 目录生成成功，找到 \${tocData.count} 个标题\`, 'success');
                        addResult(\`标题列表: \${tocData.headings.map(h => h.text).join(', ')}\`, 'info');

                        // 显示生成的HTML和目录
                        document.getElementById('demo-html').innerHTML = \`
                            <h3>生成的HTML内容：</h3>
                            <div style="border: 1px solid #ccc; padding: 1rem; background: white;">
                                \${html}
                            </div>

                            <h3>生成的目录：</h3>
                            <div style="border: 1px solid #ccc; padding: 1rem; background: white;">
                                \${tocData.html}
                            </div>
                        \`;

                        addResult('✅ 目录HTML生成成功', 'success');
                    } else {
                        addResult('❌ 目录生成失败，没有找到标题', 'error');
                    }

                    addResult('🎉 目录功能测试完成！', 'success');

                } catch (error) {
                    addResult(\`❌ 目录功能测试失败: \${error.message}\`, 'error');
                    console.error('详细错误:', error);
                }
            } else {
                addResult('❌ TOCGenerator 类未定义', 'error');
            }
        });
    </script>
</body>
</html>