add v0.0.2

public/index.html

@@ -132,6 +132,13 @@
         <div class="card">
           <div class="card-header">
             <h1>地图距离计算工具 - 使用说明</h1>
+            <!-- 文档切换导航 -->
+            <div class="mt-3">
+              <div class="btn-group" role="group">
+                <button type="button" class="btn btn-light btn-sm" id="btn-docs" onclick="loadDoc('docs.md', this)">脚本执行</button>
+                <button type="button" class="btn btn-light btn-sm active" id="btn-web-docs" onclick="loadDoc('docs-web.md', this)">网页版</button>
+              </div>
+            </div>
           </div>
           <div class="card-body" id="content">
             <div class="loading">
@@ -154,9 +161,24 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
 
   <script>
-    async function loadDocs() {
+    // 文档切换功能
+    async function loadDoc(docFile, btn) {
+      // 更新按钮状态
+      document.querySelectorAll('.btn-group .btn').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+
+      // 显示加载状态
+      document.getElementById('content').innerHTML = `
+        <div class="loading">
+          <div class="spinner-border text-primary" role="status">
+            <span class="visually-hidden">加载中...</span>
+          </div>
+          <p class="mt-3">文档加载中...</p>
+        </div>
+      `;
+
       try {
-        const response = await fetch('./docs.md');
+        const response = await fetch('./' + docFile);
         if (!response.ok) {
           throw new Error('文档加载失败');
         }
@@ -177,7 +199,8 @@
       }
     }
 
-    loadDocs();
+    // 默认加载网页版文档
+    loadDoc('docs-web.md', document.getElementById('btn-web-docs'));
   </script>
 </body>
 </html>