You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
508 lines
16 KiB
508 lines
16 KiB
(function () {
|
|
'use strict';
|
|
|
|
const WIDGET_STYLE_ID = 'usageWidgetStyles';
|
|
const ROOT_ID = 'usageWidgetRoot';
|
|
|
|
function escapeHtml(text) {
|
|
return String(text)
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"')
|
|
.replace(/'/g, ''');
|
|
}
|
|
|
|
function slugify(text) {
|
|
return String(text)
|
|
.trim()
|
|
.toLowerCase()
|
|
.replace(/[\u4e00-\u9fa5]/g, (m) => m) // keep CJK
|
|
.replace(/[^\w\u4e00-\u9fa5\-\s]/g, '')
|
|
.replace(/\s+/g, '-')
|
|
.replace(/-+/g, '-')
|
|
.replace(/^\-+|\-+$/g, '');
|
|
}
|
|
|
|
function ensureStyles() {
|
|
if (document.getElementById(WIDGET_STYLE_ID)) return;
|
|
|
|
const style = document.createElement('style');
|
|
style.id = WIDGET_STYLE_ID;
|
|
style.textContent = `
|
|
#${ROOT_ID} { position: fixed; z-index: 9999; left: 16px; bottom: 16px; font-family: inherit; }
|
|
#${ROOT_ID} .uw-fab {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 12px 18px; border-radius: 999px;
|
|
border: 1px solid rgba(0,0,0,0.10);
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: #ffffff;
|
|
font-weight: 800;
|
|
font-size: 14px;
|
|
box-shadow: 0 14px 34px rgba(0,0,0,0.26);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
#${ROOT_ID} .uw-fab:hover { transform: translateY(-1px); }
|
|
#${ROOT_ID} .uw-fab:active { transform: translateY(0px); }
|
|
#${ROOT_ID} .uw-fab .uw-dot { width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,0.95); box-shadow: 0 0 0 3px rgba(255,255,255,0.18); }
|
|
|
|
#${ROOT_ID} .uw-overlay {
|
|
position: fixed; inset: 0; background: rgba(0,0,0,0.45);
|
|
z-index: 10000;
|
|
opacity: 0; pointer-events: none; transition: opacity 180ms ease;
|
|
}
|
|
#${ROOT_ID}.open .uw-overlay { opacity: 1; pointer-events: auto; }
|
|
|
|
#${ROOT_ID} .uw-drawer {
|
|
position: fixed; left: 50%; top: 50%;
|
|
z-index: 10001;
|
|
width: min(980px, calc(100vw - 48px));
|
|
height: min(86vh, 920px);
|
|
background: #ffffff;
|
|
border-radius: 14px;
|
|
border: 1px solid rgba(0,0,0,0.10);
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.25);
|
|
overflow: hidden;
|
|
transform: translate(-50%, -50%) translateY(12px) scale(0.98);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: transform 220ms ease, opacity 220ms ease;
|
|
}
|
|
#${ROOT_ID}.open .uw-drawer { transform: translate(-50%, -50%) translateY(0px) scale(1); opacity: 1; pointer-events: auto; }
|
|
|
|
#${ROOT_ID} .uw-header {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 12px 14px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: #fff;
|
|
}
|
|
#${ROOT_ID} .uw-header .uw-title { font-size: 14px; font-weight: 700; letter-spacing: .2px; }
|
|
#${ROOT_ID} .uw-header .uw-actions { display: flex; gap: 8px; align-items: center; }
|
|
#${ROOT_ID} .uw-header button {
|
|
border: 1px solid rgba(255,255,255,0.35);
|
|
background: rgba(255,255,255,0.12);
|
|
color: #fff;
|
|
border-radius: 8px;
|
|
padding: 6px 10px;
|
|
cursor: pointer;
|
|
}
|
|
#${ROOT_ID} .uw-header button:hover { background: rgba(255,255,255,0.18); }
|
|
|
|
#${ROOT_ID} .uw-body { display: grid; grid-template-columns: 240px 1fr; height: calc(100% - 48px); }
|
|
#${ROOT_ID} .uw-sidebar {
|
|
border-right: 1px solid rgba(0,0,0,0.08);
|
|
background: #f5f7fa;
|
|
padding: 10px;
|
|
overflow: auto;
|
|
}
|
|
#${ROOT_ID} .uw-content {
|
|
padding: 12px 14px;
|
|
overflow: auto;
|
|
background: #fff;
|
|
}
|
|
|
|
#${ROOT_ID} .uw-search {
|
|
width: 100%;
|
|
padding: 8px 10px;
|
|
border-radius: 10px;
|
|
border: 1px solid rgba(0,0,0,0.14);
|
|
outline: none;
|
|
margin-bottom: 10px;
|
|
}
|
|
#${ROOT_ID} .uw-search:focus { border-color: rgba(102,126,234,0.6); box-shadow: 0 0 0 3px rgba(102,126,234,0.18); }
|
|
|
|
#${ROOT_ID} .uw-toc { display: flex; flex-direction: column; gap: 6px; }
|
|
#${ROOT_ID} .uw-toc a {
|
|
display: block;
|
|
text-decoration: none;
|
|
color: #2c3e50;
|
|
padding: 6px 8px;
|
|
border-radius: 10px;
|
|
border: 1px solid transparent;
|
|
font-size: 13px;
|
|
line-height: 1.2;
|
|
}
|
|
#${ROOT_ID} .uw-toc a:hover { background: #ffffff; border-color: rgba(0,0,0,0.08); }
|
|
#${ROOT_ID} .uw-toc .uw-toc-section { display: block; }
|
|
#${ROOT_ID} .uw-toc .uw-toc-h1 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-weight: 800;
|
|
}
|
|
#${ROOT_ID} .uw-toc .uw-toc-h1::after { content: '▸'; color: rgba(102,126,234,0.95); font-size: 12px; margin-left: 8px; }
|
|
#${ROOT_ID} .uw-toc .uw-toc-section.expanded .uw-toc-h1::after { content: '▾'; }
|
|
#${ROOT_ID} .uw-toc .uw-toc-children { display: none; margin-top: 4px; }
|
|
#${ROOT_ID} .uw-toc .uw-toc-section.expanded .uw-toc-children { display: block; }
|
|
#${ROOT_ID} .uw-toc a.level-2 { padding-left: 16px; font-size: 12.5px; opacity: 0.95; }
|
|
#${ROOT_ID} .uw-toc a.level-3 { padding-left: 24px; font-size: 12px; opacity: 0.9; }
|
|
|
|
#${ROOT_ID} .uw-md h1 { font-size: 18px; margin: 14px 0 10px; color: #2c3e50; }
|
|
#${ROOT_ID} .uw-md h2 { font-size: 16px; margin: 14px 0 10px; color: #2c3e50; }
|
|
#${ROOT_ID} .uw-md h3 { font-size: 14px; margin: 12px 0 8px; color: #2c3e50; }
|
|
#${ROOT_ID} .uw-md p { margin: 8px 0; color: #333; }
|
|
#${ROOT_ID} .uw-md ul { margin: 8px 0 8px 20px; }
|
|
#${ROOT_ID} .uw-md li { margin: 4px 0; }
|
|
#${ROOT_ID} .uw-md code { background: #f0f0f0; padding: 2px 6px; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
|
|
#${ROOT_ID} .uw-md pre { background: #1e1e1e; color: #f8f8f2; padding: 12px; border-radius: 12px; overflow: auto; margin: 10px 0; }
|
|
#${ROOT_ID} .uw-md pre code { background: transparent; padding: 0; color: inherit; }
|
|
#${ROOT_ID} .uw-muted { color: #6c757d; font-size: 13px; }
|
|
`;
|
|
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
function buildMarkdownHtml(markdown) {
|
|
// Minimal markdown rendering: headings (#..###), fenced code blocks, inline code, unordered lists, paragraphs.
|
|
// This is intentionally lightweight (no external deps).
|
|
const lines = String(markdown || '').replace(/\r\n/g, '\n').split('\n');
|
|
|
|
const toc = [];
|
|
const usedIds = new Map();
|
|
|
|
function uniqueId(base) {
|
|
const raw = base || 'section';
|
|
let id = raw;
|
|
let i = 2;
|
|
while (usedIds.has(id)) {
|
|
id = `${raw}-${i++}`;
|
|
}
|
|
usedIds.set(id, true);
|
|
return id;
|
|
}
|
|
|
|
let html = '';
|
|
let inCode = false;
|
|
let codeLang = '';
|
|
let codeBuf = [];
|
|
let inUl = false;
|
|
|
|
function closeUl() {
|
|
if (inUl) {
|
|
html += '</ul>';
|
|
inUl = false;
|
|
}
|
|
}
|
|
|
|
function flushParagraph(text) {
|
|
closeUl();
|
|
if (!text) return;
|
|
const withInline = escapeHtml(text).replace(/`([^`]+)`/g, '<code>$1</code>');
|
|
html += `<p>${withInline}</p>`;
|
|
}
|
|
|
|
for (const line of lines) {
|
|
const fence = line.match(/^```\s*(.*)\s*$/);
|
|
if (fence) {
|
|
if (!inCode) {
|
|
closeUl();
|
|
inCode = true;
|
|
codeLang = fence[1] || '';
|
|
codeBuf = [];
|
|
} else {
|
|
const code = codeBuf.join('\n');
|
|
html += `<pre><code${codeLang ? ` data-lang="${escapeHtml(codeLang)}"` : ''}>${escapeHtml(code)}</code></pre>`;
|
|
inCode = false;
|
|
codeLang = '';
|
|
codeBuf = [];
|
|
}
|
|
continue;
|
|
}
|
|
|
|
if (inCode) {
|
|
codeBuf.push(line);
|
|
continue;
|
|
}
|
|
|
|
const h = line.match(/^(#{1,3})\s+(.*)$/);
|
|
if (h) {
|
|
closeUl();
|
|
const level = h[1].length;
|
|
const text = h[2].trim();
|
|
const id = uniqueId(slugify(text) || `h${level}`);
|
|
toc.push({ level, text, id });
|
|
html += `<h${level} id="${escapeHtml(id)}">${escapeHtml(text)}</h${level}>`;
|
|
continue;
|
|
}
|
|
|
|
const ul = line.match(/^\s*[-*]\s+(.*)$/);
|
|
if (ul) {
|
|
if (!inUl) {
|
|
closeUl();
|
|
html += '<ul>';
|
|
inUl = true;
|
|
}
|
|
const item = escapeHtml(ul[1]).replace(/`([^`]+)`/g, '<code>$1</code>');
|
|
html += `<li>${item}</li>`;
|
|
continue;
|
|
}
|
|
|
|
if (!line.trim()) {
|
|
closeUl();
|
|
continue;
|
|
}
|
|
|
|
flushParagraph(line);
|
|
}
|
|
|
|
closeUl();
|
|
|
|
return { html, toc };
|
|
}
|
|
|
|
function ensureRoot() {
|
|
let root = document.getElementById(ROOT_ID);
|
|
if (root) return root;
|
|
|
|
root = document.createElement('div');
|
|
root.id = ROOT_ID;
|
|
root.innerHTML = `
|
|
<div class="uw-overlay" aria-hidden="true"></div>
|
|
<button type="button" class="uw-fab" aria-label="打开使用说明">
|
|
<span class="uw-dot" aria-hidden="true"></span>
|
|
<span>使用说明</span>
|
|
</button>
|
|
<div class="uw-drawer" role="dialog" aria-modal="true" aria-label="使用说明">
|
|
<div class="uw-header">
|
|
<div class="uw-title">使用说明</div>
|
|
<div class="uw-actions">
|
|
<button type="button" class="uw-reload" title="重新加载">刷新</button>
|
|
<button type="button" class="uw-close" title="关闭">关闭</button>
|
|
</div>
|
|
</div>
|
|
<div class="uw-body">
|
|
<div class="uw-sidebar">
|
|
<input class="uw-search" type="search" placeholder="搜索标题..." />
|
|
<div class="uw-toc" aria-label="目录"></div>
|
|
</div>
|
|
<div class="uw-content">
|
|
<div class="uw-muted" data-uw-status>正在加载 usage.md...</div>
|
|
<div class="uw-md" data-uw-md style="display:none;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(root);
|
|
return root;
|
|
}
|
|
|
|
async function fetchUsageMarkdown() {
|
|
const resp = await fetch('/api/usage-doc', { method: 'GET' });
|
|
const data = await resp.json();
|
|
if (!resp.ok || !data || !data.success) {
|
|
const msg = (data && data.error) ? data.error : `HTTP ${resp.status}`;
|
|
throw new Error(msg);
|
|
}
|
|
return data.markdown || '';
|
|
}
|
|
|
|
function open(root) {
|
|
root.classList.add('open');
|
|
}
|
|
|
|
function close(root) {
|
|
root.classList.remove('open');
|
|
}
|
|
|
|
function wire(root) {
|
|
const overlay = root.querySelector('.uw-overlay');
|
|
const fab = root.querySelector('.uw-fab');
|
|
const btnClose = root.querySelector('.uw-close');
|
|
const btnReload = root.querySelector('.uw-reload');
|
|
const tocEl = root.querySelector('.uw-toc');
|
|
const searchEl = root.querySelector('.uw-search');
|
|
const statusEl = root.querySelector('[data-uw-status]');
|
|
const mdEl = root.querySelector('[data-uw-md]');
|
|
|
|
let cache = { markdown: null, built: null };
|
|
const expandedSections = new Set();
|
|
|
|
function groupToc(toc) {
|
|
const items = (toc || []).filter(x => x.level <= 3);
|
|
const level1Count = items.filter(x => x.level === 1).length;
|
|
const level2Count = items.filter(x => x.level === 2).length;
|
|
|
|
// Common doc layout: a single H1 is just the document title.
|
|
// In that case, use H2 as the TOC top-level (expand to show H3).
|
|
const useH2AsTop = level1Count <= 1 && level2Count > 0;
|
|
|
|
const sections = [];
|
|
let current = null;
|
|
|
|
for (const h of items) {
|
|
if (useH2AsTop) {
|
|
if (h.level === 1) continue;
|
|
if (h.level === 2) {
|
|
current = { top: h, children: [] };
|
|
sections.push(current);
|
|
continue;
|
|
}
|
|
// level === 3
|
|
if (!current) {
|
|
current = { top: { ...h, level: 2 }, children: [] };
|
|
sections.push(current);
|
|
continue;
|
|
}
|
|
current.children.push(h);
|
|
continue;
|
|
}
|
|
|
|
// Default: H1 is top-level, H2/H3 are children.
|
|
if (h.level === 1) {
|
|
current = { top: h, children: [] };
|
|
sections.push(current);
|
|
continue;
|
|
}
|
|
if (!current) {
|
|
current = { top: { ...h, level: 1 }, children: [] };
|
|
sections.push(current);
|
|
continue;
|
|
}
|
|
current.children.push(h);
|
|
}
|
|
|
|
return { sections, useH2AsTop };
|
|
}
|
|
|
|
function renderToc(query) {
|
|
const built = cache.built;
|
|
if (!built) {
|
|
tocEl.innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
const q = String(query || '').trim().toLowerCase();
|
|
const searchMode = q.length > 0;
|
|
|
|
const grouped = groupToc(built.toc);
|
|
const sections = grouped.sections;
|
|
const useH2AsTop = grouped.useH2AsTop;
|
|
const parts = [];
|
|
|
|
for (const section of sections) {
|
|
const top = section.top;
|
|
const sectionId = top.id;
|
|
const topText = top.text || '';
|
|
|
|
const sectionMatch = !q || topText.toLowerCase().includes(q);
|
|
const matchedChildren = searchMode
|
|
? section.children.filter(c => (c.text || '').toLowerCase().includes(q))
|
|
: section.children;
|
|
|
|
const visible = !searchMode || sectionMatch || matchedChildren.length > 0;
|
|
if (!visible) continue;
|
|
|
|
const expanded = searchMode ? (matchedChildren.length > 0) : expandedSections.has(sectionId);
|
|
const childLinks = expanded
|
|
? matchedChildren.map(c => {
|
|
const cls = useH2AsTop ? 'level-3' : (c.level === 2 ? 'level-2' : 'level-3');
|
|
return `<a class="${cls}" href="#${escapeHtml(c.id)}" data-uw-target="${escapeHtml(c.id)}">${escapeHtml(c.text)}</a>`;
|
|
}).join('')
|
|
: '';
|
|
|
|
parts.push(
|
|
`<div class="uw-toc-section ${expanded ? 'expanded' : ''}" data-uw-section="${escapeHtml(sectionId)}">` +
|
|
`<a class="uw-toc-h1" href="#${escapeHtml(sectionId)}" data-uw-target="${escapeHtml(sectionId)}">${escapeHtml(topText)}</a>` +
|
|
`<div class="uw-toc-children">${childLinks}</div>` +
|
|
`</div>`
|
|
);
|
|
}
|
|
|
|
tocEl.innerHTML = parts.join('');
|
|
}
|
|
|
|
function renderFromMarkdown(markdown) {
|
|
const built = buildMarkdownHtml(markdown);
|
|
mdEl.innerHTML = built.html;
|
|
mdEl.style.display = '';
|
|
statusEl.style.display = 'none';
|
|
cache.built = built;
|
|
|
|
renderToc(searchEl.value);
|
|
|
|
// Scroll to top when re-render
|
|
mdEl.parentElement.scrollTop = 0;
|
|
}
|
|
|
|
async function ensureLoaded(force) {
|
|
if (!force && cache.markdown) return;
|
|
statusEl.textContent = '正在加载 usage.md...';
|
|
statusEl.style.display = '';
|
|
mdEl.style.display = 'none';
|
|
|
|
try {
|
|
const markdown = await fetchUsageMarkdown();
|
|
cache.markdown = markdown;
|
|
renderFromMarkdown(markdown);
|
|
} catch (e) {
|
|
statusEl.textContent = `加载失败：${e && e.message ? e.message : String(e)}`;
|
|
statusEl.style.display = '';
|
|
mdEl.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function applySearch() {
|
|
renderToc(searchEl.value);
|
|
}
|
|
|
|
fab.addEventListener('click', async () => {
|
|
open(root);
|
|
await ensureLoaded(false);
|
|
});
|
|
|
|
overlay.addEventListener('click', () => close(root));
|
|
btnClose.addEventListener('click', () => close(root));
|
|
|
|
btnReload.addEventListener('click', async () => {
|
|
cache.markdown = null;
|
|
cache.built = null;
|
|
await ensureLoaded(true);
|
|
});
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') close(root);
|
|
});
|
|
|
|
tocEl.addEventListener('click', (e) => {
|
|
const a = e.target.closest('a[data-uw-target]');
|
|
if (!a) return;
|
|
e.preventDefault();
|
|
|
|
const q = (searchEl.value || '').trim();
|
|
const id = a.getAttribute('data-uw-target');
|
|
|
|
// Toggle sub-headings only when clicking a top-level entry, and not in search mode.
|
|
if (!q && a.classList.contains('uw-toc-h1')) {
|
|
if (expandedSections.has(id)) expandedSections.delete(id);
|
|
else expandedSections.add(id);
|
|
renderToc(searchEl.value);
|
|
}
|
|
|
|
const target = mdEl.querySelector(`#${CSS.escape(id)}`);
|
|
if (target) {
|
|
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
});
|
|
|
|
searchEl.addEventListener('input', applySearch);
|
|
|
|
// Preload lazily after page settles
|
|
window.setTimeout(() => {
|
|
ensureLoaded(false).catch(() => {});
|
|
}, 800);
|
|
}
|
|
|
|
function init() {
|
|
ensureStyles();
|
|
const root = ensureRoot();
|
|
wire(root);
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
} else {
|
|
init();
|
|
}
|
|
})();
|
|
|