冯普andClaude Opus 4.6
212c220dcf
- 截图格式从PNG转为JPEG(质量80%)，设备缩放1x，总体积从3.9MB降至916KB - md-viewer.html图片最大宽度从375px调整为280px - 项目背景.md同步更新截图规范参数 - PRD.md中25处图片引用从.png改为.jpg Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
164 lines
9.4 KiB
HTML
164 lines
9.4 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>文档预览</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<style>
|
|
:root {
|
|
--primary: #1677FF;
|
|
--primary-light: #E6F7FF;
|
|
--text-primary: #1a1a2e;
|
|
--text-secondary: #5a607f;
|
|
--text-placeholder: #999;
|
|
--border: #e8ecf1;
|
|
--bg: #ffffff;
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', 'Segoe UI', sans-serif; background: #f5f7fa; color: var(--text-primary); }
|
|
|
|
/* 顶部导航栏 */
|
|
.topbar { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid var(--border); padding: 12px 24px; display: flex; align-items: center; gap: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
|
.topbar__back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--primary); cursor: pointer; text-decoration: none; padding: 4px 10px; border-radius: 6px; transition: background .15s; border: none; background: none; }
|
|
.topbar__back:hover { background: var(--primary-light); }
|
|
.topbar__title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
|
|
.topbar__path { font-size: 12px; color: var(--text-placeholder); margin-left: auto; }
|
|
|
|
/* 内容区 */
|
|
.content { max-width: 900px; margin: 0 auto; padding: 32px 40px 60px; background: var(--bg); min-height: calc(100vh - 50px); }
|
|
.loading { display: flex; align-items: center; justify-content: center; height: 300px; color: var(--text-placeholder); font-size: 14px; }
|
|
.error { color: #ff4d4f; }
|
|
|
|
/* Markdown 渲染样式 */
|
|
.content h1 { font-size: 24px; font-weight: 800; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--border); }
|
|
.content h2 { font-size: 20px; font-weight: 700; margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
|
|
.content h3 { font-size: 17px; font-weight: 600; margin: 24px 0 8px; }
|
|
.content h4 { font-size: 15px; font-weight: 600; margin: 20px 0 6px; }
|
|
.content p { font-size: 14px; line-height: 1.8; margin: 8px 0; }
|
|
.content ul, .content ol { padding-left: 20px; margin: 8px 0; }
|
|
.content table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
|
|
.content th { background: #fafafa; font-weight: 600; text-align: left; padding: 8px 12px; border: 1px solid var(--border); }
|
|
.content td { padding: 8px 12px; border: 1px solid var(--border); }
|
|
.content code { background: #f5f5f5; padding: 2px 6px; border-radius: 4px; font-size: 13px; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; }
|
|
.content pre { background: #f6f8fa; border-radius: 8px; padding: 16px; overflow-x: auto; margin: 12px 0; }
|
|
.content pre code { background: none; padding: 0; font-size: 13px; line-height: 1.6; }
|
|
.content blockquote { border-left: 4px solid var(--primary); padding: 8px 16px; margin: 12px 0; background: var(--primary-light); border-radius: 0 4px 4px 0; }
|
|
.content blockquote p { color: var(--text-secondary); margin: 0; }
|
|
.content strong { color: var(--text-primary); }
|
|
.content hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
|
|
.content img { max-width: 280px; height: auto; border-radius: 8px; border: 1px solid var(--border); margin: 8px 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="topbar">
|
|
<button class="topbar__back" onclick="window.close();history.back()">← 返回</button>
|
|
<span class="topbar__title" id="doc-title">文档预览</span>
|
|
<span class="topbar__path" id="doc-path"></span>
|
|
</div>
|
|
<div class="content" id="content">
|
|
<div class="loading">加载中...</div>
|
|
</div>
|
|
<script>
|
|
const params = new URLSearchParams(location.search);
|
|
const filePath = params.get('file');
|
|
const title = params.get('title');
|
|
|
|
if (title) {
|
|
document.getElementById('doc-title').textContent = title;
|
|
document.title = title + ' - 文档预览';
|
|
}
|
|
if (filePath) {
|
|
document.getElementById('doc-path').textContent = filePath;
|
|
fetch(filePath)
|
|
.then(res => {
|
|
if (!res.ok) throw new Error('文件未找到 (' + res.status + ')');
|
|
return res.text();
|
|
})
|
|
.then(md => {
|
|
/* 检测是否为自带 HTML 结构的文件（如共性需求说明.md） */
|
|
const isRawHtml = /^\s*<(?:style|div|!doctype|html)/i.test(md);
|
|
if (isRawHtml) {
|
|
/* 为标题生成锚点 id（marked 新版不再自动生成） */
|
|
function addHeadingIds(html) {
|
|
return html.replace(/<h([1-6])>([\s\S]*?)<\/h\1>/g, function(_, lvl, inner) {
|
|
var plain = inner.replace(/<[^>]*>/g, '');
|
|
var id = plain.toLowerCase().replace(/[^\p{L}\p{N}\s-]/gu, '').trim().replace(/\s+/g, '-');
|
|
return '<h' + lvl + ' id="' + id + '">' + inner + '</h' + lvl + '>';
|
|
});
|
|
}
|
|
let processed = md;
|
|
if (typeof marked !== 'undefined') {
|
|
processed = md.replace(/(^[\s\S]*?<div id="main-content">)([\s\S]*?)(<\/div>\s*$)/i, function(_, before, mdBody, after) {
|
|
return before + addHeadingIds(marked.parse(mdBody)) + after;
|
|
});
|
|
processed = processed.replace(/(<div id="toc-container">)([\s\S]*?)(<\/div>)/, function(_, before, tocBody, after) {
|
|
return before + marked.parse(tocBody) + after;
|
|
});
|
|
}
|
|
/* iframe 内注入：表格框线 + 排版样式 */
|
|
const extraCss = '<style>'
|
|
+ 'html{scroll-behavior:smooth}'
|
|
+ 'body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Segoe UI",sans-serif}'
|
|
+ '#main-content table{width:100%;border-collapse:collapse;margin:12px 0;font-size:14px}'
|
|
+ '#main-content th{background:#fafafa;font-weight:600;text-align:left;padding:8px 12px;border:1px solid #e8ecf1}'
|
|
+ '#main-content td{padding:8px 12px;border:1px solid #e8ecf1}'
|
|
+ '#main-content h1{font-size:24px;font-weight:800;margin:0 0 16px;padding-bottom:10px;border-bottom:2px solid #e8ecf1}'
|
|
+ '#main-content h2{font-size:20px;font-weight:700;margin:32px 0 12px;padding-bottom:8px;border-bottom:1px solid #e8ecf1}'
|
|
+ '#main-content h3{font-size:17px;font-weight:600;margin:24px 0 8px}'
|
|
+ '#main-content h4{font-size:15px;font-weight:600;margin:20px 0 6px}'
|
|
+ '#main-content p{font-size:14px;line-height:1.8;margin:8px 0}'
|
|
+ '#main-content ul,#main-content ol{padding-left:20px;margin:8px 0;font-size:14px;line-height:1.8}'
|
|
+ '#main-content code{background:#f5f5f5;padding:2px 6px;border-radius:4px;font-size:13px}'
|
|
+ '#main-content blockquote{border-left:4px solid #1677FF;padding:8px 16px;margin:12px 0;background:#E6F7FF;border-radius:0 4px 4px 0}'
|
|
+ '#toc-container a.active{color:#1677FF;font-weight:600}'
|
|
+ '</style>';
|
|
/* iframe 内注入：滚动时高亮当前目录项 */
|
|
const tocScript = '<script>'
|
|
+ 'document.addEventListener("DOMContentLoaded",function(){'
|
|
+ 'var links=document.querySelectorAll("#toc-container a[href^=\\"#\\"]");'
|
|
+ 'var items=[];'
|
|
+ 'links.forEach(function(a){var id=decodeURIComponent(a.getAttribute("href").slice(1));var el=document.getElementById(id);if(el)items.push({el:el,link:a})});'
|
|
+ 'if(!items.length)return;'
|
|
+ 'function update(){var sy=window.scrollY||document.documentElement.scrollTop;var cur=items[0];'
|
|
+ 'for(var i=0;i<items.length;i++){if(items[i].el.offsetTop<=sy+80)cur=items[i]}'
|
|
+ 'links.forEach(function(a){a.classList.remove("active")});if(cur)cur.link.classList.add("active")}'
|
|
+ 'window.addEventListener("scroll",update);update()});'
|
|
+ '<\/script>';
|
|
/* 用 iframe 隔离渲染 */
|
|
document.querySelector('.topbar').style.display = 'none';
|
|
const wrap = document.getElementById('content');
|
|
wrap.style.cssText = 'max-width:none;margin:0;padding:0;min-height:100vh';
|
|
const iframe = document.createElement('iframe');
|
|
iframe.style.cssText = 'width:100%;height:100vh;border:none';
|
|
iframe.srcdoc = '<!DOCTYPE html><html><head><meta charset="UTF-8">' + extraCss + '</head><body>' + processed + tocScript + '</body></html>';
|
|
wrap.innerHTML = '';
|
|
wrap.appendChild(iframe);
|
|
} else {
|
|
/* 计算 Markdown 文件所在目录，用于重写图片相对路径 */
|
|
const mdBase = filePath.substring(0, filePath.lastIndexOf('/') + 1);
|
|
const content = document.getElementById('content');
|
|
if (typeof marked !== 'undefined') {
|
|
content.innerHTML = marked.parse(md);
|
|
/* 将图片相对路径补全为基于 Markdown 文件目录的路径 */
|
|
content.querySelectorAll('img').forEach(img => {
|
|
const src = img.getAttribute('src');
|
|
if (src && !src.startsWith('http') && !src.startsWith('/') && !src.startsWith('data:')) {
|
|
img.src = mdBase + src;
|
|
}
|
|
});
|
|
} else {
|
|
content.innerHTML = '<pre style="white-space:pre-wrap;font-size:14px;line-height:1.8">' + md.replace(/</g,'<').replace(/>/g,'>') + '</pre>';
|
|
}
|
|
}
|
|
})
|
|
.catch(err => {
|
|
document.getElementById('content').innerHTML = '<div class="loading error">加载失败：' + err.message + '<br><small style="color:var(--text-placeholder);margin-top:8px;display:block">请确认文件路径：' + filePath + '</small></div>';
|
|
});
|
|
} else {
|
|
document.getElementById('content').innerHTML = '<div class="loading">未指定文件路径</div>';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|