yixiong/platform-prototype
17
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: 重构管理端/小助手PRD文档结构，优化md-viewer图片预览体验

Browse Source 
- PRD按一级菜单分类组织页面清单和逐页说明，补充复杂弹窗截图
- 筛选条件描述从表格改为行内格式，统一文档风格
- md-viewer修复图片280px压缩问题，新增lightbox点击放大，统一正文字号14px

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
冯普
2026-04-17 11:55:03 +08:00
co-authored by Claude Opus 4.6
parent da61152de7
commit 5325d17593
59 changed files with 1174 additions and 489 deletions
Download Patch File Download Diff File Expand all files Collapse all files
md-viewer.html
+24 -3
View File
@@ -26,7 +26,7 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica
.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); }
.content { max-width: 900px; margin: 0 auto; padding: 32px 40px 60px; background: var(--bg); min-height: calc(100vh - 50px); font-size: 14px; line-height: 1.8; }
.loading { display: flex; align-items: center; justify-content: center; height: 300px; color: var(--text-placeholder); font-size: 14px; }
.error { color: #ff4d4f; }
@@ -36,7 +36,7 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica
.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 ul, .content ol { padding-left: 20px; margin: 8px 0; font-size: 14px; line-height: 1.8; }
.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); }
@@ -47,7 +47,13 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica
.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; }
.content img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border); margin: 8px 0; cursor: pointer; transition: opacity .15s; }
.content img:hover { opacity: .85; }
/* Lightbox 图片放大遮罩 */
.lightbox { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.75); align-items: center; justify-content: center; cursor: zoom-out; }
.lightbox.active { display: flex; }
.lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,.4); }
</style>
</head>
<body>
@@ -59,6 +65,10 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica
<div class="content" id="content">
<div class="loading">加载中...</div>
</div>
<!-- Lightbox 图片放大遮罩 -->
<div class="lightbox" id="lightbox" onclick="this.classList.remove('active')">
<img id="lightbox-img" src="" alt="放大预览">
</div>
<script>
const params = new URLSearchParams(location.search);
const filePath = params.get('file');
@@ -147,6 +157,13 @@ if (filePath) {
img.src = mdBase + src;
}
});
/* 绑定图片点击放大 */
content.querySelectorAll('img').forEach(img => {
img.addEventListener('click', () => {
document.getElementById('lightbox-img').src = img.src;
document.getElementById('lightbox').classList.add('active');
});
});
} else {
content.innerHTML = '<pre style="white-space:pre-wrap;font-size:14px;line-height:1.8">' + md.replace(/</g,'&lt;').replace(/>/g,'&gt;') + '</pre>';
}
@@ -158,6 +175,10 @@ if (filePath) {
} else {
document.getElementById('content').innerHTML = '<div class="loading">未指定文件路径</div>';
}
/* ESC 键关闭 lightbox */
document.addEventListener('keydown', e => {
if (e.key === 'Escape') document.getElementById('lightbox').classList.remove('active');
});
</script>
</body>
</html>