7b9f2c7b41
- 更新技能文档，采用iframe平铺展示架构 - 重新生成资产租赁管理系统原型页面 - 优化文档系统路径处理 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com> Co-Authored-By: Happy <yesreply@happy.engineering>
190 lines
8.8 KiB
HTML
190 lines
8.8 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.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
.markdown-body h1 { font-size: 2em; font-weight: bold; margin: 0.5em 0; border-bottom: 2px solid #e5e7eb; padding-bottom: 0.3em; }
|
|
.markdown-body h2 { font-size: 1.5em; font-weight: bold; margin: 0.5em 0; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.3em; }
|
|
.markdown-body h3 { font-size: 1.25em; font-weight: bold; margin: 0.5em 0; }
|
|
.markdown-body h4 { font-size: 1em; font-weight: bold; margin: 0.5em 0; }
|
|
.markdown-body p { margin: 1em 0; line-height: 1.7; }
|
|
.markdown-body ul, .markdown-body ol { margin: 1em 0; padding-left: 2em; }
|
|
.markdown-body li { margin: 0.5em 0; }
|
|
.markdown-body code { background: #f3f4f6; padding: 0.2em 0.4em; border-radius: 4px; font-size: 0.9em; }
|
|
.markdown-body pre { background: #1f2937; color: #f9fafb; padding: 1em; border-radius: 8px; overflow-x: auto; margin: 1em 0; }
|
|
.markdown-body pre code { background: transparent; padding: 0; }
|
|
.markdown-body blockquote { border-left: 4px solid #3b82f6; padding-left: 1em; margin: 1em 0; color: #6b7280; }
|
|
.markdown-body table { border-collapse: collapse; width: 100%; margin: 1em 0; }
|
|
.markdown-body th, .markdown-body td { border: 1px solid #e5e7eb; padding: 0.5em 1em; }
|
|
.markdown-body th { background: #f9fafb; font-weight: 600; }
|
|
.markdown-body a { color: #3b82f6; text-decoration: underline; }
|
|
.markdown-body hr { border: none; border-top: 2px solid #e5e7eb; margin: 2em 0; }
|
|
.markdown-body img { max-width: 100%; height: auto; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-100">
|
|
<!-- 顶部导航 -->
|
|
<nav class="bg-gradient-to-r from-green-600 to-green-700 text-white py-4 px-6">
|
|
<div class="container mx-auto flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<a href="index.html" class="hover:text-green-200"><i class="fas fa-arrow-left mr-2"></i>返回入口</a>
|
|
<span class="text-xl font-bold">文档中心</span>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<input type="text" id="searchInput" placeholder="搜索文档..." class="px-4 py-2 rounded-lg text-gray-800 w-64">
|
|
<button id="viewToggle" class="px-4 py-2 bg-green-500 rounded-lg hover:bg-green-400">
|
|
<i class="fas fa-list mr-1"></i>列表视图
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container mx-auto px-6 py-8">
|
|
<div class="flex gap-6">
|
|
<!-- 左侧文档列表 -->
|
|
<div class="w-80 flex-shrink-0">
|
|
<div class="bg-white rounded-xl shadow-sm p-4 sticky top-4">
|
|
<h3 class="font-semibold text-gray-800 mb-4"><i class="fas fa-file-alt mr-2"></i>文档列表</h3>
|
|
<div id="docsList" class="space-y-2">
|
|
<p class="text-gray-500 text-sm">加载中...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧文档内容 -->
|
|
<div class="flex-1">
|
|
<div id="docContent" class="bg-white rounded-xl shadow-sm p-8">
|
|
<div class="text-center text-gray-500 py-12">
|
|
<i class="fas fa-file-alt text-6xl text-gray-300 mb-4"></i>
|
|
<p>请从左侧选择文档查看</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentView = 'card';
|
|
let docs = [];
|
|
|
|
// 加载文档列表
|
|
async function loadDocsList() {
|
|
try {
|
|
const response = await fetch('/api/docs');
|
|
docs = await response.json();
|
|
renderDocsList(docs);
|
|
} catch (error) {
|
|
document.getElementById('docsList').innerHTML = '<p class="text-red-500 text-sm">加载失败</p>';
|
|
}
|
|
}
|
|
|
|
// 渲染文档列表
|
|
function renderDocsList(docsList) {
|
|
const container = document.getElementById('docsList');
|
|
if (docsList.length === 0) {
|
|
container.innerHTML = '<p class="text-gray-500 text-sm">暂无文档</p>';
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = docsList.map(doc => `
|
|
<button onclick="loadDoc('${doc.path}')" class="w-full text-left px-4 py-3 rounded-lg hover:bg-green-50 transition doc-item" data-name="${doc.name}">
|
|
<div class="flex items-center gap-3">
|
|
<i class="fas fa-file-alt text-green-600"></i>
|
|
<div>
|
|
<p class="font-medium text-gray-800">${doc.name}</p>
|
|
<p class="text-xs text-gray-500">.md</p>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
`).join('');
|
|
}
|
|
|
|
// 加载文档内容
|
|
async function loadDoc(docPath) {
|
|
// 高亮当前文档
|
|
document.querySelectorAll('.doc-item').forEach(item => {
|
|
item.classList.remove('bg-green-100', 'border-l-4', 'border-green-500');
|
|
if (item.dataset.name === docPath) {
|
|
item.classList.add('bg-green-100', 'border-l-4', 'border-green-500');
|
|
}
|
|
});
|
|
|
|
try {
|
|
const response = await fetch(`/api/doc/${encodeURIComponent(docPath)}`);
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
renderMarkdown(result.content, result.name);
|
|
} else {
|
|
document.getElementById('docContent').innerHTML = '<p class="text-red-500">加载失败</p>';
|
|
}
|
|
} catch (error) {
|
|
document.getElementById('docContent').innerHTML = '<p class="text-red-500">加载失败</p>';
|
|
}
|
|
}
|
|
|
|
// 渲染 Markdown
|
|
function renderMarkdown(content, title) {
|
|
let html = content
|
|
// 标题
|
|
.replace(/^# (.+)$/gm, '<h1>$1</h1>')
|
|
.replace(/^## (.+)$/gm, '<h2>$1</h2>')
|
|
.replace(/^### (.+)$/gm, '<h3>$1</h3>')
|
|
.replace(/^#### (.+)$/gm, '<h4>$1</h4>')
|
|
// 粗体和斜体
|
|
.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
|
|
.replace(/\*(.+?)\*/g, '<em>$1</em>')
|
|
// 代码块
|
|
.replace(/```(\w*)\n([\s\S]*?)```/g, (match, lang, code) => {
|
|
const isAsciiArt = /┌|│|└|├|─|┐|┘|┤/.test(code);
|
|
const bgClass = isAsciiArt ? 'bg-gray-800 text-gray-100' : 'bg-gray-100 text-gray-900';
|
|
return `<pre class="${bgClass} p-4 rounded-lg overflow-x-auto my-4 font-mono text-sm whitespace-pre"><code>${escapeHtml(code.trim())}</code></pre>`;
|
|
})
|
|
// 内联代码
|
|
.replace(/`([^`]+)`/g, '<code class="bg-gray-200 text-gray-800 px-1 rounded">$1</code>')
|
|
// 链接
|
|
.replace(/\[([^\]]+)\]\(([^\)]+)\)/g, '<a href="$2" target="_blank">$1</a>')
|
|
// 引用
|
|
.replace(/^> (.+)$/gm, '<blockquote>$1</blockquote>')
|
|
// 水平线
|
|
.replace(/^---$/gm, '<hr>')
|
|
// 换行
|
|
.replace(/\n/g, '<br>');
|
|
|
|
document.getElementById('docContent').innerHTML = `
|
|
<div class="mb-6">
|
|
<h1 class="text-3xl font-bold text-gray-800">${title}</h1>
|
|
</div>
|
|
<div class="markdown-body text-gray-700">${html}</div>
|
|
`;
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
// 搜索功能
|
|
document.getElementById('searchInput').addEventListener('input', function(e) {
|
|
const query = e.target.value.toLowerCase();
|
|
const filtered = docs.filter(doc => doc.name.toLowerCase().includes(query));
|
|
renderDocsList(filtered);
|
|
});
|
|
|
|
// 视图切换
|
|
document.getElementById('viewToggle').addEventListener('click', function() {
|
|
currentView = currentView === 'card' ? 'list' : 'card';
|
|
this.innerHTML = currentView === 'card' ? '<i class="fas fa-list mr-1"></i>列表视图' : '<i class="fas fa-th-large mr-1"></i>卡片视图';
|
|
});
|
|
|
|
// 初始化
|
|
loadDocsList();
|
|
</script>
|
|
</body>
|
|
</html>
|