Refine web UI and usage docs
This commit is contained in:
+345
-44
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>MobileModels 文档查看</title>
|
||||
<title>MobileModels 使用文档</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #f5f7fb;
|
||||
@@ -12,23 +12,31 @@
|
||||
--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: 52px;
|
||||
height: var(--nav-height);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
@@ -56,7 +64,18 @@
|
||||
margin: 24px auto;
|
||||
padding: 0 16px 32px;
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
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);
|
||||
@@ -76,39 +95,166 @@
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.btns {
|
||||
display: flex;
|
||||
.doc-toc {
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 12px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 9px 14px;
|
||||
.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;
|
||||
border: 1px solid #c8d6ee;
|
||||
background: #f7faff;
|
||||
color: #244775;
|
||||
color: #33527f;
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.btn:hover {
|
||||
background: #eef5ff;
|
||||
.doc-toc-link:hover {
|
||||
background: #f4f8ff;
|
||||
border-color: #e0e8f6;
|
||||
}
|
||||
pre {
|
||||
margin: 0;
|
||||
.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: 10px;
|
||||
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>
|
||||
@@ -117,51 +263,204 @@
|
||||
<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>
|
||||
<a href="/web/device_query.html?view=docs" class="item active">使用文档</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="wrap">
|
||||
<section class="card">
|
||||
<h1 class="title" id="docTitle">文档查看</h1>
|
||||
<p class="sub" id="docPath">正在加载文档...</p>
|
||||
<div class="btns">
|
||||
<a class="btn" href="/web/doc_viewer.html?path=/docs/mysql-query-design.md&title=MySQL%20%E8%AE%BE%E8%AE%A1%E8%AF%B4%E6%98%8E">MySQL 设计说明</a>
|
||||
<a class="btn" href="/web/doc_viewer.html?path=/docs/web-ui.md&title=Web%20%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E">Web 使用说明</a>
|
||||
<a class="btn" href="/web/doc_viewer.html?path=/README.md&title=%E9%A1%B9%E7%9B%AE%20README">项目 README</a>
|
||||
</div>
|
||||
<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">
|
||||
<pre id="docContent">加载中...</pre>
|
||||
<section class="card doc-shell">
|
||||
<div id="docContent" class="markdown-body">加载中...</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const ALLOWED_DOCS = new Map([
|
||||
["/docs/mysql-query-design.md", "MySQL 设计说明"],
|
||||
["/docs/web-ui.md", "Web 使用说明"],
|
||||
["/README.md", "项目 README"],
|
||||
["/README.md", "项目使用文档"],
|
||||
]);
|
||||
|
||||
async function main() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const path = params.get("path") || "/docs/mysql-query-design.md";
|
||||
const title = params.get("title") || ALLOWED_DOCS.get(path) || "文档查看";
|
||||
const path = params.get("path") || "/README.md";
|
||||
const title = params.get("title") || ALLOWED_DOCS.get(path) || "使用文档";
|
||||
const docTitleEl = document.getElementById("docTitle");
|
||||
const docPathEl = document.getElementById("docPath");
|
||||
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 = "文档不存在";
|
||||
docPathEl.textContent = path;
|
||||
docContentEl.textContent = "当前只允许查看预设文档。";
|
||||
docTitleEl.textContent = "使用文档";
|
||||
docContentEl.innerHTML = "<p>当前只允许查看预设文档。</p>";
|
||||
return;
|
||||
}
|
||||
|
||||
document.title = `${title} - MobileModels`;
|
||||
docTitleEl.textContent = title;
|
||||
docPathEl.textContent = path;
|
||||
docTitleEl.textContent = "使用文档";
|
||||
|
||||
try {
|
||||
const resp = await fetch(path, { cache: "no-store" });
|
||||
@@ -169,9 +468,11 @@
|
||||
throw new Error(`HTTP ${resp.status}`);
|
||||
}
|
||||
const text = await resp.text();
|
||||
docContentEl.textContent = text;
|
||||
docContentEl.innerHTML = renderMarkdown(text);
|
||||
buildToc(docContentEl);
|
||||
} catch (err) {
|
||||
docContentEl.textContent = `加载失败\n${err.message || err}`;
|
||||
docContentEl.innerHTML = `<p>加载失败</p><pre>${escapeHtml(err.message || String(err))}</pre>`;
|
||||
docTocEl.innerHTML = "";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user