483 lines
14 KiB
HTML
483 lines
14 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>MobileModels 使用文档</title>
|
|
<style>
|
|
:root {
|
|
--bg: #f5f7fb;
|
|
--card: #ffffff;
|
|
--text: #1c2430;
|
|
--sub: #566173;
|
|
--line: #d9e0ea;
|
|
--brand: #0f6fff;
|
|
--nav-height: 52px;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
padding-top: var(--nav-height);
|
|
font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
|
|
background: radial-gradient(circle at 0 0, #eef4ff 0, var(--bg) 40%), var(--bg);
|
|
color: var(--text);
|
|
}
|
|
.top-nav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
background: linear-gradient(180deg, #1f2a3a, #1a2431);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
box-shadow: 0 10px 30px rgba(14, 25, 42, 0.16);
|
|
}
|
|
.top-nav-inner {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 16px;
|
|
height: var(--nav-height);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.top-nav .brand,
|
|
.top-nav .item {
|
|
color: #d6e3f7;
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
padding: 6px 10px;
|
|
border-radius: 6px;
|
|
}
|
|
.top-nav .brand {
|
|
font-weight: 700;
|
|
margin-right: 8px;
|
|
color: #f4f8ff;
|
|
}
|
|
.top-nav .item.active {
|
|
background: rgba(255, 255, 255, 0.16);
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
}
|
|
.wrap {
|
|
max-width: 1200px;
|
|
margin: 24px auto;
|
|
padding: 0 16px 32px;
|
|
display: grid;
|
|
grid-template-columns: 260px minmax(0, 1fr);
|
|
gap: 12px;
|
|
}
|
|
.doc-nav-card {
|
|
position: sticky;
|
|
top: calc(var(--nav-height) + 16px);
|
|
z-index: 10;
|
|
max-height: calc(100vh - var(--nav-height) - 32px);
|
|
overflow: hidden;
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
gap: 12px;
|
|
}
|
|
.card {
|
|
background: var(--card);
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
padding: 14px;
|
|
box-shadow: 0 6px 18px rgba(36, 56, 89, 0.06);
|
|
}
|
|
.title {
|
|
margin: 0 0 8px;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
}
|
|
.sub {
|
|
margin: 0 0 14px;
|
|
color: var(--sub);
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
.doc-toc {
|
|
min-height: 0;
|
|
overflow: auto;
|
|
display: grid;
|
|
gap: 8px;
|
|
padding-right: 4px;
|
|
}
|
|
.doc-toc-section {
|
|
display: grid;
|
|
gap: 6px;
|
|
padding: 8px 0 10px;
|
|
border-bottom: 1px solid #e7edf7;
|
|
}
|
|
.doc-toc-section:last-child {
|
|
border-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
.doc-toc-title {
|
|
padding: 0 4px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
color: #587095;
|
|
text-transform: uppercase;
|
|
}
|
|
.doc-toc-links {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
.doc-toc-link {
|
|
display: block;
|
|
padding: 7px 10px;
|
|
border-radius: 10px;
|
|
color: #33527f;
|
|
text-decoration: none;
|
|
font-size: 13px;
|
|
line-height: 1.45;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
}
|
|
.doc-toc-link:hover {
|
|
background: #f4f8ff;
|
|
border-color: #e0e8f6;
|
|
}
|
|
.doc-toc-link.level-2 {
|
|
font-weight: 600;
|
|
color: #28466f;
|
|
}
|
|
.doc-toc-link.level-3 {
|
|
margin-left: 0;
|
|
font-size: 12px;
|
|
}
|
|
.doc-toc-link.level-4 {
|
|
margin-left: 12px;
|
|
font-size: 12px;
|
|
}
|
|
.doc-shell {
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
.doc-shell .markdown-body {
|
|
padding: 18px;
|
|
}
|
|
.markdown-body {
|
|
color: #223047;
|
|
font-size: 14px;
|
|
line-height: 1.75;
|
|
}
|
|
.markdown-body > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
.markdown-body > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.markdown-body h1,
|
|
.markdown-body h2,
|
|
.markdown-body h3,
|
|
.markdown-body h4 {
|
|
margin: 1.2em 0 0.55em;
|
|
color: #1b2a42;
|
|
line-height: 1.35;
|
|
}
|
|
.markdown-body h1 { font-size: 32px; }
|
|
.markdown-body h2 { font-size: 24px; }
|
|
.markdown-body h3 { font-size: 19px; }
|
|
.markdown-body h4 { font-size: 16px; }
|
|
.markdown-body p,
|
|
.markdown-body ul,
|
|
.markdown-body ol,
|
|
.markdown-body blockquote {
|
|
margin: 0 0 1em;
|
|
}
|
|
.markdown-body ul,
|
|
.markdown-body ol {
|
|
padding-left: 22px;
|
|
}
|
|
.markdown-body li + li {
|
|
margin-top: 4px;
|
|
}
|
|
.markdown-body blockquote {
|
|
padding: 10px 14px;
|
|
border-left: 4px solid #cddcf6;
|
|
border-radius: 0 10px 10px 0;
|
|
background: #f7faff;
|
|
color: #52627a;
|
|
}
|
|
.markdown-body pre {
|
|
margin: 0 0 1em;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
font-size: 13px;
|
|
line-height: 1.65;
|
|
background: #f6f8fb;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
padding: 14px;
|
|
overflow: auto;
|
|
}
|
|
.markdown-body pre code {
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
font-size: inherit;
|
|
}
|
|
.markdown-body code {
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
font-size: 0.92em;
|
|
padding: 1px 6px;
|
|
border-radius: 6px;
|
|
background: #edf3ff;
|
|
color: #294f88;
|
|
border: 1px solid #d7e3fb;
|
|
}
|
|
.markdown-body hr {
|
|
border: 0;
|
|
border-top: 1px solid #d8e1ef;
|
|
margin: 1.2em 0;
|
|
}
|
|
.markdown-body a {
|
|
color: #0f6fff;
|
|
text-decoration: none;
|
|
}
|
|
.markdown-body a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.markdown-body h2,
|
|
.markdown-body h3,
|
|
.markdown-body h4 {
|
|
scroll-margin-top: calc(var(--nav-height) + 20px);
|
|
}
|
|
@media (max-width: 1020px) {
|
|
.wrap {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.doc-nav-card {
|
|
position: static;
|
|
max-height: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="top-nav">
|
|
<div class="top-nav-inner">
|
|
<a href="/web/device_query.html" class="brand">MobileModels</a>
|
|
<a href="/web/device_query.html" class="item">设备查询</a>
|
|
<a href="/web/brand_management.html" class="item">数据管理</a>
|
|
<a href="/web/device_query.html?view=docs" class="item active">使用文档</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="wrap">
|
|
<section class="card doc-nav-card">
|
|
<h1 class="title" id="docTitle">使用文档</h1>
|
|
<div id="docToc" class="doc-toc" aria-label="文档目录"></div>
|
|
</section>
|
|
|
|
<section class="card doc-shell">
|
|
<div id="docContent" class="markdown-body">加载中...</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script>
|
|
const ALLOWED_DOCS = new Map([
|
|
["/README.md", "项目使用文档"],
|
|
]);
|
|
|
|
async function main() {
|
|
const params = new URLSearchParams(window.location.search);
|
|
const path = params.get("path") || "/README.md";
|
|
const title = params.get("title") || ALLOWED_DOCS.get(path) || "使用文档";
|
|
const docTitleEl = document.getElementById("docTitle");
|
|
const docContentEl = document.getElementById("docContent");
|
|
const docTocEl = document.getElementById("docToc");
|
|
|
|
function escapeHtml(text) {
|
|
return String(text || "")
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """)
|
|
.replace(/'/g, "'");
|
|
}
|
|
|
|
function renderInlineMarkdown(text) {
|
|
let html = escapeHtml(text || "");
|
|
html = html.replace(/`([^`]+)`/g, "<code>$1</code>");
|
|
html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
|
|
html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noreferrer">$1</a>');
|
|
return html;
|
|
}
|
|
|
|
function slugify(text) {
|
|
return String(text || "")
|
|
.toLowerCase()
|
|
.replace(/<[^>]+>/g, "")
|
|
.replace(/[^0-9a-z\u4e00-\u9fff]+/g, "-")
|
|
.replace(/^-+|-+$/g, "") || "section";
|
|
}
|
|
|
|
function renderMarkdown(text) {
|
|
const normalized = String(text || "").replace(/\r\n/g, "\n");
|
|
const lines = normalized.split("\n");
|
|
const chunks = [];
|
|
const headingIds = new Map();
|
|
let i = 0;
|
|
|
|
while (i < lines.length) {
|
|
const line = lines[i];
|
|
const trimmed = line.trim();
|
|
|
|
if (!trimmed) {
|
|
i += 1;
|
|
continue;
|
|
}
|
|
|
|
if (trimmed.startsWith("```")) {
|
|
const lang = trimmed.slice(3).trim();
|
|
const codeLines = [];
|
|
i += 1;
|
|
while (i < lines.length && !lines[i].trim().startsWith("```")) {
|
|
codeLines.push(lines[i]);
|
|
i += 1;
|
|
}
|
|
if (i < lines.length) i += 1;
|
|
const className = lang ? ` class="language-${escapeHtml(lang)}"` : "";
|
|
chunks.push(`<pre><code${className}>${escapeHtml(codeLines.join("\n"))}</code></pre>`);
|
|
continue;
|
|
}
|
|
|
|
const heading = trimmed.match(/^(#{1,4})\s+(.*)$/);
|
|
if (heading) {
|
|
const level = heading[1].length;
|
|
const renderedText = renderInlineMarkdown(heading[2]);
|
|
const baseId = slugify(heading[2]);
|
|
const count = headingIds.get(baseId) || 0;
|
|
headingIds.set(baseId, count + 1);
|
|
const headingId = count ? `${baseId}-${count + 1}` : baseId;
|
|
chunks.push(`<h${level} id="${headingId}">${renderedText}</h${level}>`);
|
|
i += 1;
|
|
continue;
|
|
}
|
|
|
|
if (/^---+$/.test(trimmed) || /^___+$/.test(trimmed)) {
|
|
chunks.push("<hr />");
|
|
i += 1;
|
|
continue;
|
|
}
|
|
|
|
if (/^>\s?/.test(trimmed)) {
|
|
const quoteLines = [];
|
|
while (i < lines.length && /^>\s?/.test(lines[i].trim())) {
|
|
quoteLines.push(lines[i].trim().replace(/^>\s?/, ""));
|
|
i += 1;
|
|
}
|
|
chunks.push(`<blockquote>${renderInlineMarkdown(quoteLines.join(" "))}</blockquote>`);
|
|
continue;
|
|
}
|
|
|
|
if (/^[-*]\s+/.test(trimmed)) {
|
|
const items = [];
|
|
while (i < lines.length && /^[-*]\s+/.test(lines[i].trim())) {
|
|
items.push(lines[i].trim().replace(/^[-*]\s+/, ""));
|
|
i += 1;
|
|
}
|
|
chunks.push(`<ul>${items.map((item) => `<li>${renderInlineMarkdown(item)}</li>`).join("")}</ul>`);
|
|
continue;
|
|
}
|
|
|
|
if (/^\d+\.\s+/.test(trimmed)) {
|
|
const items = [];
|
|
while (i < lines.length && /^\d+\.\s+/.test(lines[i].trim())) {
|
|
items.push(lines[i].trim().replace(/^\d+\.\s+/, ""));
|
|
i += 1;
|
|
}
|
|
chunks.push(`<ol>${items.map((item) => `<li>${renderInlineMarkdown(item)}</li>`).join("")}</ol>`);
|
|
continue;
|
|
}
|
|
|
|
const paragraphLines = [];
|
|
while (i < lines.length) {
|
|
const candidate = lines[i];
|
|
const candidateTrim = candidate.trim();
|
|
if (!candidateTrim) break;
|
|
if (
|
|
candidateTrim.startsWith("```")
|
|
|| /^(#{1,4})\s+/.test(candidateTrim)
|
|
|| /^[-*]\s+/.test(candidateTrim)
|
|
|| /^\d+\.\s+/.test(candidateTrim)
|
|
|| /^>\s?/.test(candidateTrim)
|
|
|| /^---+$/.test(candidateTrim)
|
|
|| /^___+$/.test(candidateTrim)
|
|
) {
|
|
break;
|
|
}
|
|
paragraphLines.push(candidateTrim);
|
|
i += 1;
|
|
}
|
|
chunks.push(`<p>${renderInlineMarkdown(paragraphLines.join(" "))}</p>`);
|
|
}
|
|
|
|
return chunks.join("");
|
|
}
|
|
|
|
function buildToc(container) {
|
|
const headings = Array.from(container.querySelectorAll("h2, h3, h4"));
|
|
if (!headings.length) {
|
|
docTocEl.innerHTML = `<div class="sub">当前文档没有可用目录。</div>`;
|
|
return;
|
|
}
|
|
const groups = [];
|
|
let currentGroup = null;
|
|
headings.forEach((heading) => {
|
|
const level = Number(heading.tagName.slice(1));
|
|
const item = {
|
|
id: heading.id,
|
|
text: escapeHtml(heading.textContent || ""),
|
|
level,
|
|
};
|
|
if (level === 2 || !currentGroup) {
|
|
currentGroup = { heading: item, children: [] };
|
|
groups.push(currentGroup);
|
|
return;
|
|
}
|
|
currentGroup.children.push(item);
|
|
});
|
|
docTocEl.innerHTML = groups.map((group) => `
|
|
<section class="doc-toc-section">
|
|
<div class="doc-toc-title">${group.heading.text}</div>
|
|
<div class="doc-toc-links">
|
|
<a class="doc-toc-link level-${group.heading.level}" href="#${group.heading.id}">${group.heading.text}</a>
|
|
${group.children.map((item) => `<a class="doc-toc-link level-${item.level}" href="#${item.id}">${item.text}</a>`).join("")}
|
|
</div>
|
|
</section>
|
|
`).join("");
|
|
}
|
|
|
|
if (!ALLOWED_DOCS.has(path)) {
|
|
docTitleEl.textContent = "使用文档";
|
|
docContentEl.innerHTML = "<p>当前只允许查看预设文档。</p>";
|
|
return;
|
|
}
|
|
|
|
document.title = `${title} - MobileModels`;
|
|
docTitleEl.textContent = "使用文档";
|
|
|
|
try {
|
|
const resp = await fetch(path, { cache: "no-store" });
|
|
if (!resp.ok) {
|
|
throw new Error(`HTTP ${resp.status}`);
|
|
}
|
|
const text = await resp.text();
|
|
docContentEl.innerHTML = renderMarkdown(text);
|
|
buildToc(docContentEl);
|
|
} catch (err) {
|
|
docContentEl.innerHTML = `<p>加载失败</p><pre>${escapeHtml(err.message || String(err))}</pre>`;
|
|
docTocEl.innerHTML = "";
|
|
}
|
|
}
|
|
|
|
main();
|
|
</script>
|
|
</body>
|
|
</html>
|