From ff6ccb20ac88ccd7eed3998701859697851fd928 Mon Sep 17 00:00:00 2001
From: pd <2146434163@qq.com>
Date: Mon, 18 Aug 2025 16:23:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F=E5=86=B2?=
 =?UTF-8?q?=E7=AA=81=20=E4=B8=8A=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 deepsearcher/templates/html/index.html        | 194 +++++++++---------
 deepsearcher/templates/static/css/styles.css  |  20 +-
 deepsearcher/templates/static/data/test.txt   |   2 +-
 deepsearcher/templates/static/js/app.js       |   8 +
 .../templates/static/themes/github.css        |   4 +
 .../templates/static/themes/latex.css         |   4 +
 .../templates/static/themes/light.css         |   7 +-
 .../templates/static/themes/newsprint.css     |   4 +
 .../templates/static/themes/pixyll.css        |   4 +
 .../templates/static/themes/whitey.css        |   4 +
 10 files changed, 150 insertions(+), 101 deletions(-)
diff --git a/deepsearcher/templates/html/index.html b/deepsearcher/templates/html/index.html
index 6a207b9..64323c8 100644
--- a/deepsearcher/templates/html/index.html
+++ b/deepsearcher/templates/html/index.html
@@ -26,7 +26,7 @@
   <body>
     <div class="container">
       <header>
-        <h1>DeepSearcher 智能深度搜索系统</h1>
+        <h1 class="search-title">DeepSearcher 智能深度搜索系统</h1>
         <p class="app-description">
           基于大型语言模型和向量数据库的知识管理系统，支持私有数据搜索和在线内容整合，提供准确答案和综合报告。
         </p>
@@ -102,12 +102,85 @@
             id="queryResult"
             class="result-container"
           >
-            <h3>查询结果:</h3>
+            <h3 class="query-result-h3">查询结果:</h3>
             <div
               class="query-result markdown-body"
               id="resultText"
             ></div>
 
+            <div class="themes-btns">
+              <button
+                class="theme-button"
+                onclick="changeTheme('static/themes/light.css')"
+              >
+                light
+              </button>
+              <button
+                class="theme-button"
+                onclick="changeTheme('static/themes/github.css')"
+              >
+                GitHub
+              </button>
+              <button
+                class="theme-button"
+                onclick="changeTheme('static/themes/newsprint.css')"
+              >
+                Newsprint
+              </button>
+              <button
+                class="theme-button"
+                onclick="changeTheme('static/themes/pixyll.css')"
+              >
+                Pixyll
+              </button>
+              <button
+                class="theme-button"
+                onclick="changeTheme('static/themes/whitey.css')"
+              >
+                Whitey
+              </button>
+
+              <button
+                class="theme-button"
+                onclick="changeTheme('static/themes/latex.css')"
+              >
+                latex
+              </button>
+
+              <button
+                id="download-btn"
+                class="theme-button"
+                onclick="downloadPdf()"
+              >
+                下载
+              </button>
+            </div>
+          </div>
+
+          <div
+            id="processResult"
+            class="result-container"
+          >
+            <h3 class="process-result-h3">处理过程:</h3>
+            <div
+              id="messageStream"
+              class="message-stream"
+            >
+              <div
+                class="message-container"
+                id="messageContainer"
+              ></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="card">
+          <div
+            class="query-result markdown-body"
+            id="test"
+          ></div>
+
+          <div class="themes-btns">
             <button
               class="theme-button"
               onclick="changeTheme('static/themes/light.css')"
@@ -145,83 +218,15 @@
             >
               latex
             </button>
-
             <button
               id="download-btn"
               class="theme-button"
-              onclick="downloadPdf()"
+              onclick="downloadPdf1()"
             >
               下载
             </button>
           </div>
-
-          <div
-            id="processResult"
-            class="result-container"
-          >
-            <h3>处理过程:</h3>
-            <div
-              id="messageStream"
-              class="message-stream"
-            >
-              <div
-                class="message-container"
-                id="messageContainer"
-              ></div>
-            </div>
-          </div>
         </div>
-
-        <!-- <div class="card">
-          <div
-            class="query-result markdown-body"
-            id="test"
-          ></div>
-          <button
-            class="theme-button"
-            onclick="changeTheme('static/themes/light.css')"
-          >
-            light
-          </button>
-          <button
-            class="theme-button"
-            onclick="changeTheme('static/themes/github.css')"
-          >
-            GitHub
-          </button>
-          <button
-            class="theme-button"
-            onclick="changeTheme('static/themes/newsprint.css')"
-          >
-            Newsprint
-          </button>
-          <button
-            class="theme-button"
-            onclick="changeTheme('static/themes/pixyll.css')"
-          >
-            Pixyll
-          </button>
-          <button
-            class="theme-button"
-            onclick="changeTheme('static/themes/whitey.css')"
-          >
-            Whitey
-          </button>
-
-          <button
-            class="theme-button"
-            onclick="changeTheme('static/themes/latex.css')"
-          >
-            latex
-          </button>
-          <button
-            id="download-btn"
-            class="theme-button"
-            onclick="downloadPdf1()"
-          >
-            下载
-          </button>
-        </div> -->
       </main>
 
       <footer>
@@ -231,34 +236,33 @@
 
     <script src="../static/js/app.js"></script>
     <script>
-      // fetch('../static/data/test.txt').then((res) => {
-      //   res.text().then((text) => {
-      //     console.log(text);
-      //     document.getElementById('test').innerHTML = md.render(text);
-      //   });
-      // });
+      fetch('../static/data/test.txt').then((res) => {
+        res.text().then((text) => {
+          document.getElementById('test').innerHTML = md.render(text);
+        });
+      });
 
-      function changeTheme(url) {
-        document.getElementById('md-theme').setAttribute('href', url);
-      }
+      function downloadPdf1() {
+        const element = document.getElementById('test');
 
-      // function downloadPdf1() {
-      //   const element = document.getElementById('test');
+        const opt = {
+          margin: 12,
+          filename: '内容.pdf',
+          image: { type: 'jpeg', quality: 0.98 },
+          enableLinks: true,
+          html2canvas: { scale: 2, logging: true, useCORS: true }, // 提高清晰度
+          jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
+          pagebreak: {
+            mode: ['avoid-all', 'css', 'legacy']
+          }
+        };
 
-      //   const opt = {
-      //     margin: 12,
-      //     filename: '内容.pdf',
-      //     image: { type: 'jpeg', quality: 0.98 },
-      //     enableLinks: true,
-      //     html2canvas: { scale: 2, logging: true, useCORS: true }, // 提高清晰度
-      //     jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
-      //     pagebreak: {
-      //       mode: ['avoid-all', 'css', 'legacy']
-      //     }
-      //   };
+        html2pdf().set(opt).from(element).save();
+      }
 
-      //   html2pdf().set(opt).from(element).save();
-      // }
+      function changeTheme(url) {
+        document.getElementById('md-theme').setAttribute('href', url);
+      }
 
       function downloadPdf() {
         const element = document.getElementById('resultText');
diff --git a/deepsearcher/templates/static/css/styles.css b/deepsearcher/templates/static/css/styles.css
index d42d9e9..bd1af54 100644
--- a/deepsearcher/templates/static/css/styles.css
+++ b/deepsearcher/templates/static/css/styles.css
@@ -47,7 +47,8 @@ header {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
-h1 {
+/* h1 */
+.search-title {
   color: var(--primary-color);
   margin-bottom: 10px;
 }
@@ -221,12 +222,25 @@ button:disabled {
   margin-top: 16px;
 }
 
-#processResult h3 {
+.themes-btns {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+}
+.theme-button {
+  height: 40px;
+  padding: 0 20px;
+  margin-right: 10px;
+}
+
+/* #processResult h3 */
+.process-result-h3 {
   color: var(--text-secondary);
   font-size: 1rem;
 }
 
-#queryResult h3 {
+/* #queryResult h3 */
+.query-result-h3 {
   color: var(--text-secondary);
   font-size: 1rem;
 }
diff --git a/deepsearcher/templates/static/data/test.txt b/deepsearcher/templates/static/data/test.txt
index d7cf8e9..00be87c 100644
--- a/deepsearcher/templates/static/data/test.txt
+++ b/deepsearcher/templates/static/data/test.txt
@@ -164,7 +164,7 @@ Zilliz Cloud作为托管服务，在开源版基础上增加了智能扩缩容
 
 Milvus通过C++引擎与Python服务的异步通信机制（基于gRPC和ZeroMQ），实现了微秒级响应延迟[^1]。其独特的Partition Key特性相比传统分库分表，在分区粒度上可细化到字段层级，支持数百万级别的动态分区管理[^5]。随着向量数据规模持续增长，Milvus的云原生架构和硬件感知优化使其成为处理超大规模AI应用场景的关键基础设施。未来在文本类型支持和分布式事务处理方面的改进，将进一步强化其在多模态数据处理领域的竞争优势。
 
-[^1]: [file:///G:/deep-searcher/docs/intro_docs/what_is_milvus.md](docs/intro_docs/what_is_milvus.md)
+[^1]: [12133](docs/intro_docs/what_is_milvus.md)
 [^2]: file:///G:/deep-searcher/docs/intro_docs/milvus_and_others.md
 [^3]: file:///G:/deep-searcher/docs/intro_docs/milvus_application.md
 [^4]: file:///G:/deep-searcher/docs/intro_docs/milvus_roadmap.md
diff --git a/deepsearcher/templates/static/js/app.js b/deepsearcher/templates/static/js/app.js
index 00b11a3..ad4baee 100644
--- a/deepsearcher/templates/static/js/app.js
+++ b/deepsearcher/templates/static/js/app.js
@@ -7,7 +7,15 @@ const md = window.markdownit({
   linkify: true, // 自动识别链接
   typographer: true
 });
+
 md.use(window.markdownitFootnote);
+md.renderer.rules.footnote_ref = (tokens, idx, options, env, slf) => {
+  const n = Number(tokens[idx].meta.id + 1); // 获取编号
+  const href = `#fn${n}`;
+  const id = `fnref${n}`;
+
+  return `<sup class="footnote-ref">[^<a href="${href}" id="${id}">${n}</a>]</sup>`;
+};
 
 // 工具函数：显示状态信息
 function showStatus(elementId, message, type) {
diff --git a/deepsearcher/templates/static/themes/github.css b/deepsearcher/templates/static/themes/github.css
index 0e4d76e..24ae5fd 100644
--- a/deepsearcher/templates/static/themes/github.css
+++ b/deepsearcher/templates/static/themes/github.css
@@ -453,3 +453,7 @@ body {
   line-height: 0;
   padding: 10px 0;
 }
+
+.markdown-body .footnotes .footnote-item .footnote-backref {
+  display: none;
+}
diff --git a/deepsearcher/templates/static/themes/latex.css b/deepsearcher/templates/static/themes/latex.css
index 7e0250b..24615ac 100644
--- a/deepsearcher/templates/static/themes/latex.css
+++ b/deepsearcher/templates/static/themes/latex.css
@@ -417,6 +417,10 @@ h6.md-focus.md-heading:before {
   padding: 10px 0;
 }
 
+.markdown-body .footnotes .footnote-item .footnote-backref {
+  display: none;
+}
+
 /* 参考文献（脚注）上标 */
 .markdown-body sup.md-footnote {
   display: inline;
diff --git a/deepsearcher/templates/static/themes/light.css b/deepsearcher/templates/static/themes/light.css
index 653e211..34d1230 100644
--- a/deepsearcher/templates/static/themes/light.css
+++ b/deepsearcher/templates/static/themes/light.css
@@ -554,13 +554,13 @@
   margin-bottom: 0;
 }
 
-.markdown-body sup > a::before {
+/* .markdown-body sup > a::before {
   content: '[';
 }
 
 .markdown-body sup > a::after {
   content: ']';
-}
+} */
 
 .markdown-body h1 .octicon-link,
 .markdown-body h2 .octicon-link,
@@ -919,6 +919,9 @@
   line-height: 0;
   padding: 10px 0;
 }
+.markdown-body .footnotes .footnote-item .footnote-backref {
+  display: none;
+}
 
 .markdown-body .task-list-item {
   list-style-type: none;
diff --git a/deepsearcher/templates/static/themes/newsprint.css b/deepsearcher/templates/static/themes/newsprint.css
index c8ab1ef..6820440 100644
--- a/deepsearcher/templates/static/themes/newsprint.css
+++ b/deepsearcher/templates/static/themes/newsprint.css
@@ -644,3 +644,7 @@
   line-height: 0;
   padding: 10px 0;
 }
+
+.markdown-body .footnotes .footnote-item .footnote-backref {
+  display: none;
+}
diff --git a/deepsearcher/templates/static/themes/pixyll.css b/deepsearcher/templates/static/themes/pixyll.css
index f6eedb2..9a85154 100644
--- a/deepsearcher/templates/static/themes/pixyll.css
+++ b/deepsearcher/templates/static/themes/pixyll.css
@@ -406,6 +406,10 @@ p,
   padding-left: 34px;
 }
 
+.markdown-body .footnotes .footnote-item .footnote-backref {
+  display: none;
+}
+
 .markdown-body .md-task-list-item > input {
   width: 1.25rem;
   height: 1.25rem;
diff --git a/deepsearcher/templates/static/themes/whitey.css b/deepsearcher/templates/static/themes/whitey.css
index d5c9608..a6b7fc4 100644
--- a/deepsearcher/templates/static/themes/whitey.css
+++ b/deepsearcher/templates/static/themes/whitey.css
@@ -300,3 +300,7 @@
   line-height: 0;
   padding: 10px 0;
 }
+
+.markdown-body .footnotes .footnote-item .footnote-backref {
+  display: none;
+}
