yuanzhen869/MobileModels
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine web UI and usage docs

Browse Source
This commit is contained in:
yuanzhen869
2026-04-14 13:54:02 +08:00
parent 0ba4fef55e
commit 0c01b91fd7
13 changed files with 21990 additions and 18993 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/brand_management.html
+97 -90
View File
@@ -76,9 +76,10 @@
max-width: 1200px;
margin: 24px auto;
padding: 0 16px 32px;
}
.page-card {
padding: 16px;
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 12px;
align-items: start;
}
.card {
background: var(--card);
@@ -134,6 +135,9 @@
margin-top: 12px;
flex-wrap: wrap;
}
.btns + .sub {
margin-top: 10px;
}
button {
border: 0;
border-radius: 10px;
@@ -160,6 +164,9 @@
display: grid;
gap: 12px;
}
.brand-toolbar + .sub {
margin-top: 10px;
}
.brand-toolbar-row {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
@@ -229,10 +236,22 @@
border-top: 1px dashed var(--line);
}
.source-order-wrap {
border: 1px solid var(--line);
border-radius: 10px;
background: #fbfcff;
padding: 10px;
display: grid;
gap: 10px;
}
.source-order-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px 16px;
flex-wrap: wrap;
}
.source-order-toolbar .btns {
margin-top: 0;
}
.source-order-toolbar .sub {
margin: 0;
font-size: 14px;
}
.source-order-list {
list-style: none;
@@ -243,14 +262,15 @@
}
.source-order-item {
border: 1px solid #cfd9ea;
border-radius: 10px;
border-radius: 12px;
background: #fff;
padding: 8px 10px;
padding: 12px 14px;
display: grid;
grid-template-columns: 18px 48px 1fr;
gap: 10px;
grid-template-columns: 18px 56px minmax(0, 1fr);
gap: 12px;
align-items: center;
cursor: grab;
box-shadow: 0 4px 12px rgba(36, 56, 89, 0.04);
}
.source-order-item.dragging {
opacity: 0.45;
@@ -261,35 +281,34 @@
}
.drag-handle {
color: #7d8ea8;
font-size: 14px;
font-size: 16px;
user-select: none;
letter-spacing: 1px;
}
.source-rank {
font-size: 12px;
font-size: 13px;
font-weight: 700;
color: #3a5a8b;
background: #edf4ff;
border: 1px solid #cadeff;
border-radius: 999px;
padding: 2px 8px;
padding: 5px 10px;
text-align: center;
}
.source-name {
font-size: 13px;
font-size: 15px;
color: #1f355a;
word-break: break-all;
}
.manage-layout {
margin-top: 14px;
display: grid;
grid-template-columns: 180px 1fr;
gap: 12px;
align-items: start;
}
.manage-tabs {
display: grid;
gap: 8px;
position: sticky;
top: calc(var(--nav-height) + 20px);
padding: 12px;
}
.manage-content {
min-width: 0;
}
.tab-btn {
width: 100%;
@@ -308,10 +327,10 @@
}
.panel-stack {
display: grid;
gap: 12px;
gap: 10px;
}
.section-card {
padding: 16px;
padding: 14px;
}
.section-card .title:last-child,
.section-card .sub:last-child {
@@ -354,9 +373,9 @@
background: #fbfcff;
}
.collapse-body {
padding: 14px 16px 16px;
padding: 12px 14px 14px;
display: grid;
gap: 14px;
gap: 10px;
}
.sync-log {
min-height: 240px;
@@ -374,27 +393,37 @@
min-height: 180px;
}
.sync-schedule-card {
margin: 14px 0;
padding: 12px;
margin: 0;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fbfcff;
}
.sync-schedule-card .title {
margin-bottom: 10px;
font-size: 15px;
}
.sync-schedule-grid {
display: grid;
grid-template-columns: minmax(220px, 280px) minmax(180px, 240px);
gap: 12px;
gap: 10px;
align-items: end;
}
.sync-schedule-grid .full-row {
grid-column: 1 / -1;
}
.sync-schedule-card .btns {
margin-top: 10px;
}
.sync-schedule-card .btns + .sub {
margin-top: 8px;
}
.check-row {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
min-height: 42px;
min-height: 38px;
}
.check-row input {
width: 16px;
@@ -455,8 +484,6 @@
border-radius: 10px;
background: #fcfdff;
padding: 12px;
}
.modal-list-grid {
display: grid;
gap: 10px;
}
@@ -534,7 +561,7 @@
flex: 0 0 auto;
}
@media (max-width: 1020px) {
.manage-layout {
.wrap {
grid-template-columns: 1fr;
}
.manage-tabs {
@@ -546,6 +573,12 @@
.brand-toolbar-row {
grid-template-columns: 1fr;
}
.source-order-toolbar {
align-items: stretch;
}
.source-order-toolbar .btns {
width: 100%;
}
.brand-toolbar-btn,
.brand-toolbar-btn.stat-btn,
.brand-toolbar-btn.action-btn {
@@ -573,19 +606,14 @@
</nav>
<div class="wrap">
<section class="card page-card">
<h1 class="title">数据管理</h1>
<p class="sub page-sub">把常用操作留在前面，把低频说明收起来。</p>
<aside class="card manage-tabs">
<button id="tabBrandBtn" type="button" class="tab-btn active">品牌列表</button>
<button id="tabSourceBtn" type="button" class="tab-btn">数据来源</button>
<button id="tabSyncBtn" type="button" class="tab-btn">原始数据同步</button>
<button id="tabIndexBtn" type="button" class="tab-btn">索引数据</button>
</aside>
<div class="manage-layout">
<aside class="manage-tabs">
<button id="tabBrandBtn" type="button" class="tab-btn active">品牌列表</button>
<button id="tabSourceBtn" type="button" class="tab-btn">数据来源</button>
<button id="tabSyncBtn" type="button" class="tab-btn">原始数据同步</button>
<button id="tabIndexBtn" type="button" class="tab-btn">索引数据</button>
</aside>
<div class="manage-content">
<div class="manage-content">
<section id="brandTabPanel" class="manage-panel">
<div class="panel-stack">
<article class="card section-card">
@@ -622,18 +650,15 @@
<section id="sourceTabPanel" class="manage-panel hidden">
<div class="panel-stack">
<article class="card section-card">
<h3 class="title">数据来源排序</h3>
<p class="sub">拖拽调整优先级，越靠前权重越高。</p>
<div class="btns">
<button id="saveSourceOrderBtn" type="button" class="primary">保存来源排序</button>
<button id="resetSourceOrderBtn" type="button">重置来源排序</button>
</div>
<div id="sourceOrderStats" class="sub">来源列表未加载。</div>
</article>
<article class="card section-card">
<div class="source-order-wrap">
<div class="source-order-toolbar">
<div class="btns">
<button id="saveSourceOrderBtn" type="button" class="primary">保存来源排序</button>
<button id="resetSourceOrderBtn" type="button">重置来源排序</button>
</div>
<div id="sourceOrderStats" class="sub">来源列表未加载。</div>
</div>
<ul id="sourceOrderList" class="source-order-list">
<li class="sub">暂无来源数据</li>
</ul>
@@ -644,21 +669,11 @@
<section id="syncTabPanel" class="manage-panel hidden">
<div class="panel-stack">
<article class="card section-card">
<h3 class="title">原始数据同步</h3>
<ul class="compact-note-list">
<li>从上游拉取原始 markdown，并重建 <code>dist/device_index.json</code>。</li>
<li>如果已开启 MySQL 自动装载，同步时也会刷新 MySQL。</li>
<li>开始前请确认完整服务已经启动。</li>
</ul>
</article>
<details class="card collapse-card">
<summary>同步配置</summary>
<details class="card collapse-card" open>
<summary>配置</summary>
<div class="collapse-body">
<div class="sync-schedule-card">
<h4 class="title">MySQL 自动装载</h4>
<p class="sub">控制同步任务和容器后续启动时是否自动导入 schema 与 seed。</p>
<div class="sync-schedule-grid">
<label class="check-row">
<input id="mysqlAutoLoadEnabled" type="checkbox" />
@@ -673,7 +688,6 @@
<div class="sync-schedule-card">
<h4 class="title">外部 MySQL 初始化</h4>
<p class="sub">面向关闭自动装载的外部 MySQL，需要时再执行。</p>
<div class="btns">
<button id="initMysqlBtn" type="button">初始化外部 MySQL</button>
</div>
@@ -681,7 +695,6 @@
<div class="sync-schedule-card">
<h4 class="title">每日自动同步</h4>
<p class="sub">按固定时间自动拉取上游并重建索引与 MySQL Seed。</p>
<div class="sync-schedule-grid">
<label class="check-row">
<input id="scheduleEnabled" type="checkbox" />
@@ -712,7 +725,7 @@
<div id="syncStatus" class="sub">正在检测同步能力。</div>
</article>
<details class="card collapse-card">
<details class="card collapse-card" open>
<summary>任务日志</summary>
<div class="collapse-body">
<pre id="syncLog" class="sync-log compact mono">暂无同步记录</pre>
@@ -724,14 +737,12 @@
<section id="indexTabPanel" class="manage-panel hidden">
<div class="panel-stack">
<article class="card section-card">
<h3 class="title">索引数据</h3>
<p class="sub">查看当前索引加载状态，并在需要时手动刷新。</p>
<div class="btns">
<button id="reloadIndexBtn" type="button" class="primary">重新加载索引</button>
</div>
<div id="indexStatus" class="sub">索引尚未加载。</div>
</article>
<details class="card collapse-card">
<details class="card collapse-card" open>
<summary>索引详情</summary>
<div class="collapse-body">
<pre id="indexSummary" class="sync-log compact mono">暂无索引信息</pre>
@@ -739,9 +750,7 @@
</details>
</div>
</section>
</div>
</div>
</section>
</div>
</div>
<div id="brandModalBackdrop" class="modal-backdrop hidden">
@@ -1449,21 +1458,19 @@
}
brandModalListEl.innerHTML = `
<div class="modal-list-grid">
${items.map((item) => `
<section class="modal-list-item">
<div class="modal-list-head">
<div class="modal-list-title">${escapeHtml(item.title || "-")}</div>
${item.meta ? `<div class="modal-list-meta">${escapeHtml(item.meta)}</div>` : ""}
${items.map((item) => `
<section class="modal-list-item">
<div class="modal-list-head">
<div class="modal-list-title">${escapeHtml(item.title || "-")}</div>
${item.meta ? `<div class="modal-list-meta">${escapeHtml(item.meta)}</div>` : ""}
</div>
${item.tags && item.tags.length ? `
<div class="modal-list-tags">
${item.tags.map((tag) => `<span class="tag">${escapeHtml(tag)}</span>`).join("")}
</div>
${item.tags && item.tags.length ? `
<div class="modal-list-tags">
${item.tags.map((tag) => `<span class="tag">${escapeHtml(tag)}</span>`).join("")}
</div>
` : ""}
</section>
`).join("")}
</div>
` : ""}
</section>
`).join("")}
`;
}
web/device_query.html
+377 -93
View File
@@ -346,6 +346,10 @@
margin-top: 12px;
flex-wrap: wrap;
}
.btns + .sub,
.btns + .field-tip {
margin-top: 10px;
}
button {
border: 0;
border-radius: 10px;
@@ -558,6 +562,9 @@
padding: 14px 16px;
font-weight: 700;
color: #1f355a;
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
}
.collapse-card summary::-webkit-details-marker {
display: none;
@@ -660,33 +667,166 @@
margin: 24px auto;
padding: 0 16px 32px;
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 16px;
}
.doc-link-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 12px;
.doc-sidebar {
align-self: start;
position: sticky;
top: calc(var(--nav-height) + 24px);
padding: 12px;
max-height: calc(100vh - var(--nav-height) - 40px);
overflow: hidden;
display: grid;
grid-template-rows: minmax(0, 1fr);
}
.doc-link {
display: inline-flex;
align-items: center;
padding: 8px 12px;
.doc-preview {
min-width: 0;
padding: 18px;
}
.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;
border: 1px solid #d7e2f3;
background: #f8fbff;
color: #204470;
color: #33527f;
text-decoration: none;
font-size: 13px;
font-weight: 700;
line-height: 1.45;
background: transparent;
border: 1px solid transparent;
}
.doc-link:hover {
background: #eef5ff;
.doc-toc-link:hover {
background: #f4f8ff;
border-color: #e0e8f6;
}
.doc-link.active {
background: #0f6fff;
border-color: #0f6fff;
color: #fff;
.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;
}
.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);
}
.doc-section + .doc-section {
margin-top: 14px;
@@ -700,6 +840,13 @@
.query-sidebar {
position: static;
}
.doc-grid {
grid-template-columns: 1fr;
}
.doc-sidebar {
position: static;
max-height: none;
}
.search-layout {
grid-template-columns: 1fr;
}
@@ -722,7 +869,7 @@
<a href="/web/device_query.html" class="brand">MobileModels</a>
<a href="/web/device_query.html" class="item" id="topNavQuery">设备查询</a>
<a href="/web/brand_management.html" class="item">数据管理</a>
<a href="/web/device_query.html?view=docs" class="item" id="topNavDocs">相关文档</a>
<a href="/web/device_query.html?view=docs" class="item" id="topNavDocs">使用文档</a>
</div>
</nav>
@@ -734,18 +881,20 @@
</div>
</div>
<div id="indexQueryPanel" class="page-panel hidden">
<div id="indexQueryPanel" class="page-panel hidden">
<div class="wrap query-wrap">
<aside class="query-sidebar">
<article class="card sidebar-card">
<h2 class="title">使用提示</h2>
<ul class="compact-note-list">
<li>基于 <code>dist/device_index.json</code> 快速识别，适合联调和比对。</li>
<li>Android / iOS / HarmonyOS 一般只需要平台和 <code>model_raw</code>。</li>
<li>也支持直接输入常见设备名，例如 <code>iPad mini 7</code>。</li>
<li>归一化规则：转小写，只保留字母数字和中文，去掉空格与标点。</li>
</ul>
</article>
<details class="card collapse-card sidebar-card" open>
<summary>使用提示</summary>
<div class="collapse-body">
<ul class="compact-note-list">
<li>基于 <code>dist/device_index.json</code> 快速识别，适合联调和比对。</li>
<li>Android / iOS / HarmonyOS 一般只需要平台和 <code>model_raw</code>。</li>
<li>也支持直接输入常见设备名，例如 <code>iPad mini 7</code>。</li>
<li>归一化规则：转小写，只保留字母数字和中文，去掉空格与标点。</li>
</ul>
</div>
</details>
</aside>
<section class="grid query-main">
@@ -850,7 +999,7 @@
</div>
</article>
<details class="card collapse-card">
<details class="card collapse-card" open>
<summary>调试数据</summary>
<div class="collapse-body">
<div class="collapse-section">
@@ -878,7 +1027,7 @@
</ul>
</div>
<div class="collapse-section">
<p class="section-label">登录设备管理取字段</p>
<p class="section-label">设备管理取字段</p>
<ul class="compact-note-list">
<li>设备展示名：<code>device_name</code></li>
<li>品牌展示：<code>market_brand</code>；为空时使用 <code>brand</code></li>
@@ -926,15 +1075,17 @@ NOH-AL00 -> nohal00</pre>
</div>
</details>
<article class="card sidebar-card">
<h2 class="title">只读连接参数</h2>
<div id="sqlReadonlyInfo" class="credential-grid">
<div class="credential-item">
<span class="credential-label">Host</span>
<p class="credential-value">加载中...</p>
<details class="card collapse-card sidebar-card" open>
<summary>只读连接参数</summary>
<div class="collapse-body">
<div id="sqlReadonlyInfo" class="credential-grid">
<div class="credential-item">
<span class="credential-label">Host</span>
<p class="credential-value">加载中...</p>
</div>
</div>
</div>
</article>
</details>
</aside>
<section class="grid query-main">
@@ -1038,7 +1189,7 @@ NOH-AL00 -> nohal00</pre>
</div>
</article>
<details class="card collapse-card">
<details class="card collapse-card" open>
<summary>调试信息</summary>
<div class="collapse-body">
<div class="collapse-section">
@@ -1058,24 +1209,28 @@ NOH-AL00 -> nohal00</pre>
<div id="deviceNameSqlQueryPanel" class="page-panel hidden">
<div class="wrap query-wrap">
<aside class="query-sidebar">
<article class="card sidebar-card">
<h2 class="title">使用提示</h2>
<ul class="compact-note-list">
<li>这里只接受设备名称，例如 <code>iPad mini 7</code>、<code>iPhone SE 3</code>。</li>
<li>会先尝试别名映射，再做 <code>device_name</code> / <code>ver_name</code> 查询。</li>
<li>底层仍查询 <code>mobilemodels.mm_device_catalog</code>，用于和设备标识查询对齐。</li>
<li>只读连接参数固定展示在左侧，执行 SQL 和返回 JSON 保留在下方调试信息。</li>
</ul>
</article>
<article class="card sidebar-card">
<h2 class="title">只读连接参数</h2>
<div id="deviceNameSqlReadonlyInfo" class="credential-grid">
<div class="credential-item">
<span class="credential-label">Host</span>
<p class="credential-value">加载中...</p>
<details class="card collapse-card sidebar-card" open>
<summary>使用提示</summary>
<div class="collapse-body">
<ul class="compact-note-list">
<li>这里只接受设备名称，例如 <code>iPad mini 7</code>、<code>iPhone SE 3</code>。</li>
<li>会先尝试别名映射，再做 <code>device_name</code> / <code>ver_name</code> 查询。</li>
<li>底层仍查询 <code>mobilemodels.mm_device_catalog</code>，用于和设备标识查询对齐。</li>
<li>只读连接参数固定展示在左侧，执行 SQL 和返回 JSON 保留在下方调试信息。</li>
</ul>
</div>
</details>
<details class="card collapse-card sidebar-card" open>
<summary>只读连接参数</summary>
<div class="collapse-body">
<div id="deviceNameSqlReadonlyInfo" class="credential-grid">
<div class="credential-item">
<span class="credential-label">Host</span>
<p class="credential-value">加载中...</p>
</div>
</div>
</div>
</article>
</details>
</aside>
<section class="grid query-main">
@@ -1122,7 +1277,7 @@ NOH-AL00 -> nohal00</pre>
</div>
</article>
<details class="card collapse-card">
<details class="card collapse-card" open>
<summary>调试信息</summary>
<div class="collapse-body">
<div class="collapse-section">
@@ -1141,20 +1296,12 @@ NOH-AL00 -> nohal00</pre>
<div id="docsPanel" class="page-panel hidden">
<div class="doc-grid">
<article class="card">
<h1 class="title">相关文档</h1>
<p class="sub">这里保留完整文档阅读；查询约定已经前移到各个查询页的使用提示里。</p>
<div class="doc-link-list">
<button type="button" class="doc-link active" data-doc-path="/docs/mysql-query-design.md" data-doc-title="MySQL 设计说明">MySQL 设计说明</button>
<button type="button" class="doc-link" data-doc-path="/docs/web-ui.md" data-doc-title="Web 使用说明">Web 使用说明</button>
<button type="button" class="doc-link" data-doc-path="/README.md" data-doc-title="项目 README">项目 README</button>
</div>
</article>
<aside class="card doc-sidebar">
<nav id="docPanelToc" class="doc-toc" aria-label="文档目录"></nav>
</aside>
<article class="card">
<h2 class="title" id="docPanelTitle">MySQL 设计说明</h2>
<p class="sub" id="docPanelPath">/docs/mysql-query-design.md</p>
<pre id="docPanelContent">加载中...</pre>
<article class="card doc-preview">
<div id="docPanelContent" class="markdown-body">加载中...</div>
</article>
</div>
@@ -1196,9 +1343,8 @@ NOH-AL00 -> nohal00</pre>
const deviceNameSqlStatementEl = document.getElementById("deviceNameSqlStatement");
const deviceNameSqlJsonOutputEl = document.getElementById("deviceNameSqlJsonOutput");
const deviceNameSqlReadonlyInfoEl = document.getElementById("deviceNameSqlReadonlyInfo");
const docPanelTitleEl = document.getElementById("docPanelTitle");
const docPanelPathEl = document.getElementById("docPanelPath");
const docPanelContentEl = document.getElementById("docPanelContent");
const docPanelTocEl = document.getElementById("docPanelToc");
const indexQueryPanelEl = document.getElementById("indexQueryPanel");
const sqlQueryPanelEl = document.getElementById("sqlQueryPanel");
const deviceNameSqlQueryPanelEl = document.getElementById("deviceNameSqlQueryPanel");
@@ -2020,6 +2166,159 @@ NOH-AL00 -> nohal00</pre>
.replace(/'/g, "&#39;");
}
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 buildDocPanelToc(container) {
const headings = Array.from(container.querySelectorAll("h2, h3, h4"));
if (!headings.length) {
docPanelTocEl.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);
});
docPanelTocEl.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("");
}
function activateTopTab(tabName) {
document.querySelectorAll(".page-tab").forEach((el) => {
const active = el.dataset.tab === tabName;
@@ -2066,14 +2365,7 @@ NOH-AL00 -> nohal00</pre>
}
async function loadDocInPanel(path, title) {
docPanelTitleEl.textContent = title || "相关文档";
docPanelPathEl.textContent = path || "";
docPanelContentEl.textContent = "加载中...";
document.querySelectorAll(".doc-link[data-doc-path]").forEach((el) => {
const active = el.dataset.docPath === path;
el.classList.toggle("active", active);
});
docPanelContentEl.innerHTML = "<p>加载中...</p>";
try {
const resp = await fetch(path, { cache: "no-store" });
@@ -2081,9 +2373,11 @@ NOH-AL00 -> nohal00</pre>
throw new Error(`HTTP ${resp.status}`);
}
const text = await resp.text();
docPanelContentEl.textContent = text;
docPanelContentEl.innerHTML = renderMarkdown(text);
buildDocPanelToc(docPanelContentEl);
} catch (err) {
docPanelContentEl.textContent = `加载失败\n${err.message || err}`;
docPanelContentEl.innerHTML = `<p>加载失败</p><pre>${escapeHtml(err.message || String(err))}</pre>`;
docPanelTocEl.innerHTML = "";
}
}
@@ -2308,10 +2602,6 @@ NOH-AL00 -> nohal00</pre>
<span class="pill">命中方式: ${escapeHtml(output.match_strategy_label || strategyLabel)}</span>
</div>
<p class="sub">${description}</p>
<div class="helper-box">
<p class="helper-title">登录设备管理字段建议</p>
<p>推荐取 <code>device_name</code> / <code>market_brand</code>（为空退回 <code>brand</code>）/ <code>parent_brand</code>（为空退回 <code>manufacturer_brand</code>）/ <code>device_type</code>。</p>
</div>
${Array.isArray(output.resolved_device_names) && output.resolved_device_names.length
? `<div class="mono">设备名别名映射: ${escapeHtml(output.resolved_device_names.join(" | "))}</div>`
: ""}
@@ -2439,19 +2729,13 @@ NOH-AL00 -> nohal00</pre>
});
});
document.querySelectorAll(".doc-link[data-doc-path]").forEach((el) => {
el.addEventListener("click", () => {
loadDocInPanel(el.dataset.docPath || "", el.dataset.docTitle || "相关文档");
});
});
loadQueryFormState();
bindQueryFormPersistence();
loadActiveTopTab();
syncReportPlatformUI();
syncSqlPlatformUI();
loadReadonlyInfo();
loadDocInPanel("/docs/mysql-query-design.md", "MySQL 设计说明");
loadDocInPanel("/README.md", "项目使用文档");
loadIndexFromPath();
</script>
</body>
web/doc_viewer.html
+345 -44
View File
@@ -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, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#39;");
}
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 = "";
}
}