mirror of
https://github.com/everett7623/nodeloc_vps_test.git
synced 2025-01-23 21:46:19 +00:00
优化脚本
This commit is contained in:
James
parent
b253805e1a
commit
db71552652
@ -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"
|
||||
|
||||
|
||||
@ -3,153 +3,144 @@
|
||||
<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];
|
||||
// 从 URL 中提取路径部分
|
||||
const urlSegments = location.pathname.split('/');
|
||||
|
||||
// 动态获取年份和月份
|
||||
const year = urlSegments[2]; // 第二部分为年份
|
||||
const month = urlSegments[3]; // 第三部分为月份
|
||||
|
||||
// 构造文件路径
|
||||
return `/${year}/${month}/${fileName}`;
|
||||
}
|
||||
return `/${fileName}`;
|
||||
}
|
||||
|
||||
const fileNameMatch =
|
||||
new URLSearchParams(window.location.search).get("filename") ||
|
||||
@ -158,58 +149,82 @@
|
||||
if (fileNameMatch) {
|
||||
const fileName = decodeURIComponent(fileNameMatch);
|
||||
const filePath = getFilePath(fileName);
|
||||
console.log(filePath);
|
||||
|
||||
$.ajax({
|
||||
url: filePath,
|
||||
success: renderContent,
|
||||
error: showError,
|
||||
success: render
|
||||
});
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user