From db715526523539d9fc4e56a1f62d8a5c99fc1e92 Mon Sep 17 00:00:00 2001
From: James <James@nodeloc.com>
Date: Tue, 21 Jan 2025 10:58:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=84=9A=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Nlbench.sh        |   8 +-
 server/bench.html | 357 ++++++++++++++++++++++++----------------------
 2 files changed, 190 insertions(+), 175 deletions(-)
diff --git a/Nlbench.sh b/Nlbench.sh
index 8a70355..e3ee724 100644
--- a/Nlbench.sh
+++ b/Nlbench.sh
@@ -460,10 +460,10 @@ generate_markdown_output() {
     done
 
     # 添加保留的空白标签
-    for tab in "${empty_tabs[@]}"; do
-        echo "[tab=\"$tab\"]" >> "$temp_output_file"
-        echo "[/tab]" >> "$temp_output_file"
-    done
+    #for tab in "${empty_tabs[@]}"; do
+    #    echo "[tab=\"$tab\"]" >> "$temp_output_file"
+    #    echo "[/tab]" >> "$temp_output_file"
+    #done
 
     echo "[/tabs]" >> "$temp_output_file"
 
diff --git a/server/bench.html b/server/bench.html
index e6eed88..97083ad 100644
--- a/server/bench.html
+++ b/server/bench.html
@@ -3,213 +3,228 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Nodeloc Bench Result</title>
-    <link
-      rel="stylesheet"
-      href="https://fastly.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/default.min.css"
-    />
+    <title>测试结果页面</title>
+  </head>
+  <body>
+    <div class="loading">
+      正在加载文件
+    </div>
+    <div class="tabs"></div>
+    <button class="copy-btn" data-clipboard-target="#copy-target">
+      复制论坛代码/Copy BBCode
+    </button>
+    <textarea id="copy-target"></textarea>
     <style>
-      /* Root Variables */
-      :root {
-        --body-bg: #f5f5f5;
-        --text-color: #333;
+      html {
+        --body-bg: #fff;
         --muted-color: #546e7a;
-        --border-radius: 8px;
+        --border-radius: 5px;
         --primary-color: #0d47a1;
-        --secondary-color: #e3f2fd;
-        --error-bg: #ffcdd2;
-        --loading-bg: #e3f2fd;
-        --font-family: Arial, sans-serif;
+        --control-bg: #bbdefb;
       }
-
-      /* General Styles */
       html,
       body {
-        margin: 0;
-        padding: 0;
-        font-family: var(--font-family);
-        background: var(--body-bg);
-        color: var(--text-color);
         height: 100%;
         width: 100%;
+        padding: 0;
+        margin: 0;
         overflow: hidden;
       }
+      .copy-btn {
+        padding: 7px;
+        border-radius: var(--border-radius);
+        background: #0d47a1;
+        color: #fff;
+        vertical-align: bottom;
+        outline: 0;
+        border: unset;
+        box-shadow: 1px 1px 2px black;
+        cursor: pointer;
+        position: fixed;
+        left: 5px;
+        bottom: 5px;
+      }
+      .copy-btn:active {
+        box-shadow: 1px 1px 2px black inset;
+      }
+      #copy-target {
+        margin-top: 50px;
+        z-index: -1;
+        display: none;
+      }
 
-      /* Loading and Error States */
-      .status {
+      .loading,
+      .error {
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         height: 100px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 1.2rem;
-        font-weight: bold;
+        text-align: center;
+        font-size: large;
         z-index: 999;
       }
-      .status.loading {
-        background-color: var(--loading-bg);
-        color: var(--primary-color);
+      .error {
+        background-color: #ffcdd2;
       }
-      .status.error {
-        background-color: var(--error-bg);
-        color: #b71c1c;
-      }
-
-      /* Tabs Section */
-      .tabs-container {
-        display: flex;
-        flex-direction: column;
-        height: calc(100% - 100px);
-        overflow: hidden;
-      }
-      .tabs-header {
-        display: flex;
-        overflow-x: auto;
-        border-bottom: 1px solid var(--muted-color);
-        background: var(--secondary-color);
-      }
-      .tabs-header button {
-        padding: 10px 15px;
-        border: none;
-        background: transparent;
-        cursor: pointer;
-        flex: 0 0 auto;
-        font-size: 1rem;
-        font-weight: bold;
-        color: var(--text-color);
-        transition: background 0.3s, color 0.3s;
-      }
-      .tabs-header button.active {
-        background: var(--primary-color);
-        color: #fff;
-      }
-      .tabs-content {
-        flex-grow: 1;
-        padding: 20px;
-        overflow-y: auto;
-        background: #fff;
-        border-radius: 0 0 var(--border-radius) var(--border-radius);
-      }
-
-      /* Copy Button */
-      .copy-btn {
-        padding: 10px;
-        border: none;
-        border-radius: var(--border-radius);
-        background: var(--primary-color);
-        color: #fff;
-        font-size: 0.9rem;
-        cursor: pointer;
-        position: fixed;
-        bottom: 15px;
-        left: 15px;
-        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-        transition: background 0.3s;
-      }
-      .copy-btn:hover {
-        background: #1565c0;
-      }
-      .copy-btn:active {
-        box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
+      .loading {
+        background-color: #e3f2fd;
+      }
+    </style>
+    <style>
+      .tabs {
+        position: relative;
+        clear: both;
+        padding-top: 44px;
+        white-space: nowrap;
+        overflow: auto;
+        height: 28px;
+            max-width: 1000px;
+    margin: 0 auto;
+      }
+      .tabs .tab {
+        display: inline-block;
+      }
+      .tabs .tab:first-of-type label {
+        border-top-left-radius: var(--border-radius);
+      }
+      .tabs .tab:last-of-type label {
+        border-top-right-radius: var(--border-radius);
+      }
+      .tabs .tab label {
+        background: var(--body-bg);
+        padding: 10px 10px 7px;
+        border: 1px solid var(--muted-color);
+        margin-left: -1px;
+        position: relative;
+        left: 1px;
+      }
+      .tabs .tab [type="radio"] {
+        display: none;
+      }
+      .tabs .content-tab {
+        display: none;
+        position: fixed;
+        top: 72px;
+        left: 0;
+        background: var(--body-bg);
+        right: 0;
+        bottom: 100px;
+        padding: 10px 20px;
+        border: 1px solid var(--muted-color);
+        border-radius: 0 var(--border-radius) var(--border-radius)
+          var(--border-radius);
+        overflow-y: auto;
+            max-width: 1000px;
+    margin: 0 auto;
+      }
+      .tabs [type="radio"]:checked ~ label {
+        background: var(--control-bg);
+        border-bottom: 3px solid var(--primary-color);
+      }
+      .tabs [type="radio"]:checked ~ label ~ .content-tab {
+        display: block;
       }
     </style>
-  </head>
-  <body>
-    <!-- Status Display -->
-    <div class="status loading">Loading...</div>
-
-    <!-- Tabs Container -->
-    <div class="tabs-container" style="display: none;">
-      <div class="tabs-header"></div>
-      <div class="tabs-content"></div>
-    </div>
-
-    <!-- Copy Button -->
-    <button class="copy-btn" data-clipboard-target="#copy-target">
-      Copy Result To Nodeloc
-    </button>
-
-    <!-- Hidden Textarea for Copy -->
-    <textarea id="copy-target" style="display: none;"></textarea>
-
-    <!-- Scripts -->
     <script src="https://fastly.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
     <script src="https://fastly.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
     <script src="https://fastly.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>
     <script>
-      // Function to construct the file path based on year and month
       function getFilePath(fileName) {
-        const match = fileName.match(/^NL(\d{4})(\d{2})/);
-        if (match) {
-          const year = match[1];
-          const month = match[2];
-          return `/${year}/${month}/${fileName}`;
+        // 从 URL 中提取路径部分
+        const urlSegments = location.pathname.split('/');
+        
+        // 动态获取年份和月份
+        const year = urlSegments[2]; // 第二部分为年份
+        const month = urlSegments[3]; // 第三部分为月份
+        
+        // 构造文件路径
+        return `/${year}/${month}/${fileName}`;
+      }
+
+        const fileNameMatch =
+          new URLSearchParams(window.location.search).get("filename") ||
+          location.pathname.split("/").pop();
+    
+        if (fileNameMatch) {
+          const fileName = decodeURIComponent(fileNameMatch);
+          const filePath = getFilePath(fileName);
+          console.log(filePath);
+    
+          $.ajax({
+            url: filePath,
+            success: render
+          });
         }
-        return `/${fileName}`;
-      }
 
-      const fileNameMatch =
-        new URLSearchParams(window.location.search).get("filename") ||
-        location.pathname.split("/").pop();
-
-      if (fileNameMatch) {
-        const fileName = decodeURIComponent(fileNameMatch);
-        const filePath = getFilePath(fileName);
-
-        $.ajax({
-          url: filePath,
-          success: renderContent,
-          error: showError,
-        });
-      }
-
-      function renderContent(data) {
+      function render(data) {
         $("#copy-target").val(data);
-        $(".status").hide();
-        $(".tabs-container").show();
+        $(".loading").remove();
+        $(".tabs").append(
+          $("<div>")
+            .addClass("tab")
+            .append(
+              $("<input>")
+                .attr("type", "radio")
+                .attr("id", `taball`)
+                .attr("name", "tabs")
+                .attr("checked", "checked")
+            )
+            .append($("<label>").attr("for", `taball`).text("全部/All"))
+            .append(
+              $("<div>")
+                .addClass("content-tab")
+                .append(
+                  $("<code>")
+                    .addClass("language-bbcode")
+                    .append($("<pre>").text(data))
+                )
+            )
+        );
+        const tags = Array.from(
+          data.matchAll(/\[TAB=([^\]]*)\]([^]*?)\[\/tab\]/gi)
+        );
 
-        const tabsHeader = $(".tabs-header");
-        const tabsContent = $(".tabs-content");
-        tabsHeader.empty();
-        tabsContent.empty();
+        tags.forEach((tagMatching, i) => {
+          if (tagMatching[1] && tagMatching[2]) {
+            const tab = $("<div>")
+              .addClass("tab")
+              .append(
+                $("<input>")
+                  .attr("type", "radio")
+                  .attr("id", `tab-${i}`)
+                  .attr("name", "tabs")
+              )
+              .append(
+                $("<label>").attr("for", `tab-${i}`).text(tagMatching[1])
+              );
 
-        const allTabButton = $("<button>")
-          .text("All / 全部")
-          .addClass("active")
-          .on("click", () => switchTab("all", data));
-        tabsHeader.append(allTabButton);
+            const codeContentMatching = /```([^\s]*?)([^]*)```/.exec(
+              tagMatching[2]
+            );
+            const contentEl = $("<div>").addClass("content-tab");
+            if (codeContentMatching) {
+              const code = $("<code>").append(
+                $("<pre>").text(codeContentMatching[2])
+              );
+              if (codeContentMatching[1]) {
+                contentEl.addClass("language-" + codeContentMatching[1]);
+              }
+              contentEl.append(code);
+            } else {
+              contentEl.text(tagMatching[2]);
+            }
 
-        const tabMatches = [...data.matchAll(/\[TAB=([^\]]+)]([\s\S]*?)\[\/TAB]/gi)];
-        tabMatches.forEach(([fullMatch, tabTitle, tabContent], index) => {
-          const tabId = `tab-${index}`;
-          const tabButton = $("<button>")
-            .text(tabTitle)
-            .on("click", () => switchTab(tabId, tabContent));
-          tabsHeader.append(tabButton);
+            tab.append(contentEl);
+            $(".tabs").append(tab);
+          }
         });
-
-        switchTab("all", data);
+        hljs.highlightAll();
         new ClipboardJS(".copy-btn");
       }
 
-      function switchTab(tabId, content) {
-        $(".tabs-header button").removeClass("active");
-        $(`.tabs-header button:contains(${tabId === "all" ? "All" : tabId})`).addClass("active");
-
-        $(".tabs-content").html(
-          `<pre><code class="language-bbcode">${content}</code></pre>`
-        );
-        hljs.highlightAll();
-      }
-
-      function showError() {
-        $(".status")
-          .removeClass("loading")
-          .addClass("error")
-          .text("无法加载数据文件，请检查 URL。");
+      function fail() {
+        $(".loading").attr("class", "error").text("无法加载数据文件，请检查URL");
       }
     </script>
   </body>
