优化脚本

This commit is contained in:
James 2025-01-21 10:58:55 +08:00
parent b253805e1a
commit db71552652
2 changed files with 190 additions and 175 deletions

View File

@ -460,10 +460,10 @@ generate_markdown_output() {
done done
# 添加保留的空白标签 # 添加保留的空白标签
for tab in "${empty_tabs[@]}"; do #for tab in "${empty_tabs[@]}"; do
echo "[tab=\"$tab\"]" >> "$temp_output_file" # echo "[tab=\"$tab\"]" >> "$temp_output_file"
echo "[/tab]" >> "$temp_output_file" # echo "[/tab]" >> "$temp_output_file"
done #done
echo "[/tabs]" >> "$temp_output_file" echo "[/tabs]" >> "$temp_output_file"

View File

@ -3,153 +3,144 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nodeloc Bench Result</title> <title>测试结果页面</title>
<link </head>
rel="stylesheet" <body>
href="https://fastly.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/default.min.css" <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> <style>
/* Root Variables */ html {
:root { --body-bg: #fff;
--body-bg: #f5f5f5;
--text-color: #333;
--muted-color: #546e7a; --muted-color: #546e7a;
--border-radius: 8px; --border-radius: 5px;
--primary-color: #0d47a1; --primary-color: #0d47a1;
--secondary-color: #e3f2fd; --control-bg: #bbdefb;
--error-bg: #ffcdd2;
--loading-bg: #e3f2fd;
--font-family: Arial, sans-serif;
} }
/* General Styles */
html, html,
body { body {
margin: 0;
padding: 0;
font-family: var(--font-family);
background: var(--body-bg);
color: var(--text-color);
height: 100%; height: 100%;
width: 100%; width: 100%;
padding: 0;
margin: 0;
overflow: hidden; 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 */ .loading,
.status { .error {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 100px; height: 100px;
display: flex; text-align: center;
align-items: center; font-size: large;
justify-content: center;
font-size: 1.2rem;
font-weight: bold;
z-index: 999; z-index: 999;
} }
.status.loading { .error {
background-color: var(--loading-bg); background-color: #ffcdd2;
color: var(--primary-color);
} }
.status.error { .loading {
background-color: var(--error-bg); background-color: #e3f2fd;
color: #b71c1c; }
} </style>
<style>
/* Tabs Section */ .tabs {
.tabs-container { position: relative;
display: flex; clear: both;
flex-direction: column; padding-top: 44px;
height: calc(100% - 100px); white-space: nowrap;
overflow: hidden; overflow: auto;
} height: 28px;
.tabs-header { max-width: 1000px;
display: flex; margin: 0 auto;
overflow-x: auto; }
border-bottom: 1px solid var(--muted-color); .tabs .tab {
background: var(--secondary-color); display: inline-block;
} }
.tabs-header button { .tabs .tab:first-of-type label {
padding: 10px 15px; border-top-left-radius: var(--border-radius);
border: none; }
background: transparent; .tabs .tab:last-of-type label {
cursor: pointer; border-top-right-radius: var(--border-radius);
flex: 0 0 auto; }
font-size: 1rem; .tabs .tab label {
font-weight: bold; background: var(--body-bg);
color: var(--text-color); padding: 10px 10px 7px;
transition: background 0.3s, color 0.3s; border: 1px solid var(--muted-color);
} margin-left: -1px;
.tabs-header button.active { position: relative;
background: var(--primary-color); left: 1px;
color: #fff; }
} .tabs .tab [type="radio"] {
.tabs-content { display: none;
flex-grow: 1; }
padding: 20px; .tabs .content-tab {
overflow-y: auto; display: none;
background: #fff; position: fixed;
border-radius: 0 0 var(--border-radius) var(--border-radius); top: 72px;
} left: 0;
background: var(--body-bg);
/* Copy Button */ right: 0;
.copy-btn { bottom: 100px;
padding: 10px; padding: 10px 20px;
border: none; border: 1px solid var(--muted-color);
border-radius: var(--border-radius); border-radius: 0 var(--border-radius) var(--border-radius)
background: var(--primary-color); var(--border-radius);
color: #fff; overflow-y: auto;
font-size: 0.9rem; max-width: 1000px;
cursor: pointer; margin: 0 auto;
position: fixed; }
bottom: 15px; .tabs [type="radio"]:checked ~ label {
left: 15px; background: var(--control-bg);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); border-bottom: 3px solid var(--primary-color);
transition: background 0.3s; }
} .tabs [type="radio"]:checked ~ label ~ .content-tab {
.copy-btn:hover { display: block;
background: #1565c0;
}
.copy-btn:active {
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
} }
</style> </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/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/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 src="https://fastly.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>
<script> <script>
// Function to construct the file path based on year and month
function getFilePath(fileName) { function getFilePath(fileName) {
const match = fileName.match(/^NL(\d{4})(\d{2})/); // 从 URL 中提取路径部分
if (match) { const urlSegments = location.pathname.split('/');
const year = match[1];
const month = match[2]; // 动态获取年份和月份
const year = urlSegments[2]; // 第二部分为年份
const month = urlSegments[3]; // 第三部分为月份
// 构造文件路径
return `/${year}/${month}/${fileName}`; return `/${year}/${month}/${fileName}`;
} }
return `/${fileName}`;
}
const fileNameMatch = const fileNameMatch =
new URLSearchParams(window.location.search).get("filename") || new URLSearchParams(window.location.search).get("filename") ||
@ -158,58 +149,82 @@
if (fileNameMatch) { if (fileNameMatch) {
const fileName = decodeURIComponent(fileNameMatch); const fileName = decodeURIComponent(fileNameMatch);
const filePath = getFilePath(fileName); const filePath = getFilePath(fileName);
console.log(filePath);
$.ajax({ $.ajax({
url: filePath, url: filePath,
success: renderContent, success: render
error: showError,
}); });
} }
function renderContent(data) { function render(data) {
$("#copy-target").val(data); $("#copy-target").val(data);
$(".status").hide(); $(".loading").remove();
$(".tabs-container").show(); $(".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"); tags.forEach((tagMatching, i) => {
const tabsContent = $(".tabs-content"); if (tagMatching[1] && tagMatching[2]) {
tabsHeader.empty(); const tab = $("<div>")
tabsContent.empty(); .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>") const codeContentMatching = /```([^\s]*?)([^]*)```/.exec(
.text("All / 全部") tagMatching[2]
.addClass("active") );
.on("click", () => switchTab("all", data)); const contentEl = $("<div>").addClass("content-tab");
tabsHeader.append(allTabButton); 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)]; tab.append(contentEl);
tabMatches.forEach(([fullMatch, tabTitle, tabContent], index) => { $(".tabs").append(tab);
const tabId = `tab-${index}`; }
const tabButton = $("<button>")
.text(tabTitle)
.on("click", () => switchTab(tabId, tabContent));
tabsHeader.append(tabButton);
}); });
hljs.highlightAll();
switchTab("all", data);
new ClipboardJS(".copy-btn"); new ClipboardJS(".copy-btn");
} }
function switchTab(tabId, content) { function fail() {
$(".tabs-header button").removeClass("active"); $(".loading").attr("class", "error").text("无法加载数据文件请检查URL");
$(`.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。");
} }
</script> </script>
</body> </body>