zdh
705 lines
20 KiB
HTML
705 lines
20 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>Wiki — 一人公司知识库</title>
|
|
<style>
|
|
/* ===== Ant Design 阿里云风格 Design Tokens ===== */
|
|
:root {
|
|
--color-primary: #1677FF;
|
|
--color-primary-hover: #4096FF;
|
|
--color-primary-active: #0958D9;
|
|
--color-primary-bg: #E6F4FF;
|
|
--color-success: #52C41A;
|
|
--color-warning: #FAAD14;
|
|
--color-error: #FF4D4F;
|
|
--bg: #F5F5F5;
|
|
--bg-container: #FFFFFF;
|
|
--bg-elevated: #FAFAFA;
|
|
--border: #D9D9D9;
|
|
--border-light: #F0F0F0;
|
|
--text-primary: #141414;
|
|
--text-secondary: #595959;
|
|
--text-tertiary: #8C8C8C;
|
|
--radius-sm: 6px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
--shadow-sm: 0 1px 2px rgba(0,0,0,0.03), 0 1px 6px -1px rgba(0,0,0,0.02);
|
|
--shadow-md: 0 2px 4px rgba(0,0,0,0.04), 0 4px 12px -2px rgba(0,0,0,0.04);
|
|
--header-h: 56px;
|
|
--sidebar-w: 260px;
|
|
--content-max: 960px;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
|
'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
|
|
'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text-primary);
|
|
line-height: 1.57;
|
|
font-size: 14px;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* ===== Header ===== */
|
|
.header-bar {
|
|
position: sticky;
|
|
top: 0;
|
|
height: var(--header-h);
|
|
background: rgba(255,255,255,0.92);
|
|
backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid var(--border-light);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 24px;
|
|
z-index: 100;
|
|
gap: 16px;
|
|
}
|
|
|
|
.header-bar .brand {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.header-bar h1 {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, var(--color-primary) 0%, #722ED1 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.header-bar .tagline {
|
|
font-size: 12px;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
/* Search */
|
|
.search-box {
|
|
flex: 1;
|
|
max-width: 400px;
|
|
position: relative;
|
|
}
|
|
|
|
.search-box input {
|
|
width: 100%;
|
|
padding: 6px 12px 6px 32px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 13px;
|
|
outline: none;
|
|
background: var(--bg-elevated);
|
|
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
}
|
|
|
|
.search-box input:focus {
|
|
border-color: var(--color-primary);
|
|
box-shadow: 0 0 0 2px var(--color-primary-bg);
|
|
background: var(--bg-container);
|
|
}
|
|
|
|
.search-box .search-icon {
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: var(--text-tertiary);
|
|
font-size: 14px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ===== Layout ===== */
|
|
.layout {
|
|
display: flex;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
min-height: calc(100vh - var(--header-h));
|
|
}
|
|
|
|
/* ===== Sidebar ===== */
|
|
.sidebar {
|
|
width: var(--sidebar-w);
|
|
flex-shrink: 0;
|
|
background: var(--bg-container);
|
|
border-right: 1px solid var(--border-light);
|
|
padding: 16px 0;
|
|
overflow-y: auto;
|
|
position: sticky;
|
|
top: var(--header-h);
|
|
height: calc(100vh - var(--header-h));
|
|
}
|
|
|
|
.sidebar .nav-section {
|
|
padding: 0 16px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.sidebar .nav-section-title {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--text-tertiary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 4px;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.sidebar .nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 12px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
transition: all 0.12s ease;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.sidebar .nav-item:hover {
|
|
background: var(--bg-elevated);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.sidebar .nav-item.active {
|
|
background: var(--color-primary-bg);
|
|
color: var(--color-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.sidebar .nav-item .nav-icon {
|
|
font-size: 14px;
|
|
flex-shrink: 0;
|
|
width: 18px;
|
|
text-align: center;
|
|
}
|
|
|
|
.sidebar .nav-item .nav-count {
|
|
margin-left: auto;
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
background: var(--bg-elevated);
|
|
border-radius: 10px;
|
|
padding: 0 6px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.sidebar .nav-item.active .nav-count {
|
|
background: rgba(22,119,255,0.12);
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
/* Sub-nav */
|
|
.sidebar .sub-nav {
|
|
padding-left: 24px;
|
|
overflow: hidden;
|
|
max-height: 0;
|
|
transition: max-height 0.25s ease;
|
|
}
|
|
|
|
.sidebar .sub-nav.open { max-height: 500px; }
|
|
|
|
.sidebar .sub-nav .nav-item {
|
|
font-size: 12px;
|
|
padding: 4px 12px;
|
|
}
|
|
|
|
/* ===== Main Content ===== */
|
|
.main {
|
|
flex: 1;
|
|
padding: 24px 32px 64px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.wiki-section {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.wiki-section-title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.wiki-section-desc {
|
|
font-size: 13px;
|
|
color: var(--text-tertiary);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* Wiki TOC table */
|
|
.wiki-toc {
|
|
background: var(--bg-container);
|
|
border: 1px solid var(--border-light);
|
|
border-radius: var(--radius-md);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.wiki-toc-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 14px 20px;
|
|
background: var(--bg-elevated);
|
|
border-bottom: 1px solid var(--border-light);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: background 0.12s ease;
|
|
}
|
|
|
|
.wiki-toc-header:hover { background: var(--color-primary-bg); }
|
|
|
|
.wiki-toc-header .toc-icon {
|
|
font-size: 16px;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.wiki-toc-header.open .toc-icon { transform: rotate(90deg); }
|
|
|
|
.wiki-toc-header .toc-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
flex: 1;
|
|
}
|
|
|
|
.wiki-toc-header .toc-count {
|
|
font-size: 12px;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.wiki-toc-body {
|
|
overflow: hidden;
|
|
max-height: 0;
|
|
transition: max-height 0.3s ease;
|
|
}
|
|
|
|
.wiki-toc-body.open { max-height: 2000px; }
|
|
|
|
.wiki-toc-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 20px 10px 46px;
|
|
border-bottom: 1px solid var(--border-light);
|
|
transition: background 0.1s ease;
|
|
text-decoration: none;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.wiki-toc-item:last-child { border-bottom: none; }
|
|
.wiki-toc-item:hover { background: var(--color-primary-bg); }
|
|
|
|
.wiki-toc-item .item-icon {
|
|
font-size: 14px;
|
|
color: var(--text-tertiary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.wiki-toc-item .item-title {
|
|
flex: 1;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.wiki-toc-item .item-tag {
|
|
font-size: 11px;
|
|
padding: 1px 8px;
|
|
border-radius: 10px;
|
|
background: var(--bg-elevated);
|
|
color: var(--text-tertiary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* All items view (when no section selected) */
|
|
.all-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.all-card {
|
|
background: var(--bg-container);
|
|
border: 1px solid var(--border-light);
|
|
border-radius: var(--radius-md);
|
|
padding: 16px 20px;
|
|
transition: all 0.15s ease;
|
|
text-decoration: none;
|
|
color: var(--text-primary);
|
|
display: block;
|
|
}
|
|
|
|
.all-card:hover {
|
|
border-color: var(--color-primary);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.all-card .card-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.all-card .card-desc {
|
|
font-size: 12px;
|
|
color: var(--text-tertiary);
|
|
line-height: 1.5;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.all-card .card-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.all-card .card-badge {
|
|
font-size: 11px;
|
|
padding: 1px 8px;
|
|
border-radius: 10px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.all-card .card-date {
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
/* ===== Footer ===== */
|
|
.footer {
|
|
padding: 16px 0;
|
|
border-top: 1px solid var(--border-light);
|
|
font-size: 12px;
|
|
color: var(--text-tertiary);
|
|
text-align: center;
|
|
}
|
|
|
|
/* ===== Responsive ===== */
|
|
@media (max-width: 768px) {
|
|
.sidebar { display: none; }
|
|
.main { padding: 16px; }
|
|
.header-bar { padding: 0 12px; }
|
|
.search-box { max-width: 200px; }
|
|
.all-grid { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* Breadcrumb */
|
|
.breadcrumb {
|
|
font-size: 12px;
|
|
color: var(--text-tertiary);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.breadcrumb a {
|
|
color: var(--text-tertiary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.breadcrumb a:hover { color: var(--color-primary); }
|
|
|
|
.breadcrumb .sep { margin: 0 4px; }
|
|
|
|
/* Stats bar */
|
|
.stats-bar {
|
|
display: flex;
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stat-item {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 4px;
|
|
padding: 8px 16px;
|
|
background: var(--bg-container);
|
|
border: 1px solid var(--border-light);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.stat-num {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 12px;
|
|
color: var(--text-tertiary);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="header-bar">
|
|
<div class="brand">
|
|
<h1>Wiki 知识库</h1>
|
|
<span class="tagline">一人公司开发团队</span>
|
|
</div>
|
|
<div class="search-box">
|
|
<span class="search-icon">🔍</span>
|
|
<input type="text" id="searchInput" placeholder="搜索文档..." autocomplete="off">
|
|
</div>
|
|
</header>
|
|
|
|
<div class="layout">
|
|
<nav class="sidebar" id="sidebar"></nav>
|
|
<div class="main" id="main"></div>
|
|
</div>
|
|
|
|
<script>
|
|
const wikiData = [
|
|
{
|
|
dir: "工程指南",
|
|
icon: "📘",
|
|
desc: "工具使用指南、开发规范、操作手册",
|
|
items: [
|
|
{ path: "Claude Code 工程师使用指南/报告/claude-code-engineering-guide.html", title: "Claude Code 最佳实践", desc: "Claude Code 在软件工程场景下的最佳实践与工作流指南", date: "2026-04-29" },
|
|
{ path: "graphify-rs使用手册/报告/graphify-rs-usage-guide.html", title: "graphify-rs 使用手册", desc: "代码知识图谱工具完整使用指南，含安装、构建、查询、集成", date: "2026-05-08" },
|
|
{ path: "mcp-services-guide/index.html", title: "MCP 服务大全", desc: "适合开发者使用的 MCP 服务大全，含功能对比与快速开始指南", date: "2026-04-29" }
|
|
]
|
|
},
|
|
{
|
|
dir: "深度分析",
|
|
icon: "🔬",
|
|
desc: "项目代码分析、架构设计、需求拆解",
|
|
items: [
|
|
{ path: "Graphify 深度分析报告/代码/graphify-analysis.html", title: "Graphify 代码分析", desc: "Graphify 项目的代码结构、质量指标与重构建议", date: "2026-04-29" },
|
|
{ path: "crmeb-mer-graph-report.html", title: "CRMEB-MER 项目图谱报告", desc: "多商户电商系统的代码结构、依赖图谱与架构深度分析", date: "2026-05-06" },
|
|
{ path: "全域智能认证与门户平台/报告/unified-auth-portal-requirements.html", title: "全域智能认证与门户平台需求分析", desc: "企业级统一身份认证与门户平台完整需求拆解，含 13 套系统对接清单与实施路线图", date: "2026-05-08" },
|
|
{ path: "全域智能认证与门户平台/报告/identity-auth-center-tech-analysis.html", title: "身份认证中心技术解析", desc: "多元化认证、零信任登录、密码代填、CAS 对接深度解析，Keycloak/Casdoor/MaxKey 对比", date: "2026-05-08" },
|
|
{ path: "全域智能认证与门户平台/报告/opensource-iam-selection-report.html", title: "开源 IAM 项目选型报告", desc: "5 大开源 IAM 项目匹配度深度对比，含需求矩阵、综合评分与推荐架构", date: "2026-05-08" },
|
|
{ path: "金鹿商城电商小程序需求分析/报告/jinlu-deer-mall-requirements-analysis.html", title: "金鹿商城电商小程序需求分析", desc: "需求解读与 CRMEB 差异对比，含限时抢签/活动币/积分商城模块拆解与 26 人天实施计划", date: "2026-05-09" },
|
|
{ path: "沈阳顺义-数据-项目建设方案/报告/沈阳顺义数据项目建设方案解读.html", title: "沈阳顺义数据项目建设方案解读", desc: "PHM 数据应用平台 12+3 功能模块拆解、17 项功能要求覆盖、13 项技术指标对照", date: "2026-05-12" },
|
|
{ path: "沈阳顺义-数据-项目建设方案/报告/开源项目匹配度分析.html", title: "沈阳顺义项目开源方案匹配度", desc: "10 个开源项目在 IoT 层、数据治理层、算法层的匹配度矩阵与推荐组合", date: "2026-05-12" },
|
|
{ path: "沈阳顺义-数据-项目建设方案/报告/开源版专业版功能对比.html", title: "开源版 vs 专业版功能对比", desc: "13 大模块逐项对比，标注开源版已包含/部分包含/缺失功能项", date: "2026-05-12" }
|
|
]
|
|
},
|
|
{
|
|
dir: "调研研究",
|
|
icon: "📊",
|
|
desc: "行业调研、技术选型、政策解读",
|
|
items: [
|
|
{ path: "代码图谱工具调研/报告/code-structure-tools-analysis.html", title: "代码图谱工具调研", desc: "主流代码结构与可视化工具的横向对比分析", date: "2026-04-29" },
|
|
{ path: "MySQL转PostgreSQL迁移工具/报告/mysql-to-pg-migration-tools.html", title: "MySQL 转 PostgreSQL 迁移工具", desc: "主流迁移工具对比分析，含云厂商方案与开源方案", date: "2026-05-04" },
|
|
{ path: "国内商业业态分类到家/报告/到家业态分类全景.html", title: "国内商业业态分类（到家服务）", desc: "按服务本质分为 5 大板块 92 业态，含楼层收费参考与商业模式对比", date: "2026-05-05" },
|
|
{ path: "在线下单配送抢单小程序调研/报告/delivery-order-grabbing-mini-program-research.html", title: "在线下单配送抢单小程序调研", desc: "Top 5 开源外卖/跑腿/抢单小程序横向对比，含功能完成度矩阵与技术方案", date: "2026-05-05" },
|
|
{ path: "分销商城推广模式调研/报告/分销商城推广模式全景调研.html", title: "分销商城推广模式全景调研", desc: "18 种推广模式系统梳理，含核心机制、收益分析、分润计算、合规框架与选型", date: "2026-05-06" },
|
|
{ path: "招标投标AI推广应用政策解读/报告/ai-bidding-tendering-policy-analysis.html", title: "招标投标领域AI推广应用政策解读", desc: "国家发改委等八部门联合发文，6 大领域 20 个 AI 场景全景拆解与市场机遇", date: "2026-05-09" },
|
|
{ path: "招标投标AI推广应用政策解读/报告/provincial-bidding-smart-supervision-platform.html", title: "省级招投标智慧监管平台建设方案", desc: "业务痛点分析、8 大业务场景设计、功能模块规划、系统架构与技术路径", date: "2026-05-09" }
|
|
]
|
|
},
|
|
{
|
|
dir: "交互式演示",
|
|
icon: "🎮",
|
|
desc: "3D 动画、可视化交互演示",
|
|
items: [
|
|
{ path: "交互式演示/tetrahedron-interactive.html", title: "正四面体旋转与展开动画", desc: "鼠标拖拽旋转四面体，点击铰链展开为平面展开图", date: "2026-05-06" }
|
|
]
|
|
}
|
|
];
|
|
|
|
// Flat list for search and "all" view
|
|
const allItems = [];
|
|
for (const section of wikiData) {
|
|
for (const item of section.items) {
|
|
allItems.push({ ...item, section: section.dir, sectionIcon: section.icon, sectionDesc: section.desc });
|
|
}
|
|
}
|
|
|
|
let currentView = 'all'; // 'all' or section dir name
|
|
let searchQuery = '';
|
|
|
|
function getBadgeColor(section) {
|
|
const map = { '工程指南': 'blue', '深度分析': 'pink', '调研研究': 'mint', '交互式演示': 'lavender' };
|
|
return map[section] || 'blue';
|
|
}
|
|
|
|
function badgeStyle(color) {
|
|
const map = {
|
|
blue: 'background:#E6F4FF;color:#1677FF;border:1px solid #91CAFF',
|
|
pink: 'background:#FFF0F6;color:#EB2F96;border:1px solid #FFADD2',
|
|
mint: 'background:#F6FFED;color:#52C41A;border:1px solid #B7EB8F',
|
|
lavender: 'background:#F9F0FF;color:#722ED1;border:1px solid #D3ADF7'
|
|
};
|
|
return map[color] || map.blue;
|
|
}
|
|
|
|
function buildSidebar() {
|
|
const sidebar = document.getElementById('sidebar');
|
|
let html = '<div class="nav-section"><div class="nav-section-title">导航</div>';
|
|
html += `<a class="nav-item${currentView === 'all' ? ' active' : ''}" href="#" data-view="all">
|
|
<span class="nav-icon">🏠</span>
|
|
<span>全部文档</span>
|
|
<span class="nav-count">${allItems.length}</span>
|
|
</a>`;
|
|
html += '</div>';
|
|
|
|
for (const section of wikiData) {
|
|
html += `<div class="nav-section">
|
|
<div class="nav-section-title">${section.desc}</div>`;
|
|
html += `<a class="nav-item${currentView === section.dir ? ' active' : ''}" href="#" data-view="${section.dir}">
|
|
<span class="nav-icon">${section.icon}</span>
|
|
<span>${section.dir}</span>
|
|
<span class="nav-count">${section.items.length}</span>
|
|
</a>`;
|
|
|
|
// Sub items
|
|
html += `<div class="sub-nav${currentView === section.dir ? ' open' : ''}">`;
|
|
for (const item of section.items) {
|
|
html += `<a class="nav-item" href="${item.path}">
|
|
<span class="nav-icon">📄</span>
|
|
<span>${item.title}</span>
|
|
</a>`;
|
|
}
|
|
html += '</div></div>';
|
|
}
|
|
|
|
sidebar.innerHTML = html;
|
|
|
|
// Bind events
|
|
sidebar.querySelectorAll('.nav-item[data-view]').forEach(el => {
|
|
el.addEventListener('click', e => {
|
|
e.preventDefault();
|
|
currentView = el.dataset.view;
|
|
render();
|
|
});
|
|
});
|
|
}
|
|
|
|
function render() {
|
|
buildSidebar();
|
|
const main = document.getElementById('main');
|
|
|
|
if (currentView === 'all') {
|
|
renderAllView(main);
|
|
} else {
|
|
renderSectionView(main);
|
|
}
|
|
}
|
|
|
|
function renderAllView(main) {
|
|
const filtered = searchQuery
|
|
? allItems.filter(i =>
|
|
i.title.toLowerCase().includes(searchQuery) ||
|
|
i.desc.toLowerCase().includes(searchQuery) ||
|
|
i.section.toLowerCase().includes(searchQuery))
|
|
: allItems;
|
|
|
|
let html = `<div class="breadcrumb"><a href="#" data-breadcrumb="all">Wiki 知识库</a></div>`;
|
|
html += `<div class="stats-bar">
|
|
<div class="stat-item"><span class="stat-num">${wikiData.length}</span><span class="stat-label">分类</span></div>
|
|
<div class="stat-item"><span class="stat-num">${allItems.length}</span><span class="stat-label">文档</span></div>
|
|
<div class="stat-item"><span class="stat-num">${filtered.length}</span><span class="stat-label">${searchQuery ? '搜索结果' : '当前展示'}</span></div>
|
|
</div>`;
|
|
|
|
html += '<div class="all-grid">';
|
|
for (const item of filtered) {
|
|
const color = getBadgeColor(item.section);
|
|
html += `<a class="all-card" href="${item.path}">
|
|
<div class="card-title">${item.title}</div>
|
|
<div class="card-desc">${item.desc}</div>
|
|
<div class="card-meta">
|
|
<span class="card-badge" style="${badgeStyle(color)}">${item.section}</span>
|
|
<span class="card-date">${item.date}</span>
|
|
</div>
|
|
</a>`;
|
|
}
|
|
html += '</div>';
|
|
|
|
if (!filtered.length) {
|
|
html += `<div style="text-align:center;padding:48px 0;color:var(--text-tertiary)">
|
|
<div style="font-size:32px;margin-bottom:8px">🔍</div>
|
|
<div>没有找到匹配的文档</div>
|
|
</div>`;
|
|
}
|
|
|
|
main.innerHTML = html;
|
|
|
|
// Breadcrumb event
|
|
main.querySelector('[data-breadcrumb="all"]')?.addEventListener('click', e => {
|
|
e.preventDefault();
|
|
currentView = 'all';
|
|
render();
|
|
});
|
|
}
|
|
|
|
function renderSectionView(main) {
|
|
const section = wikiData.find(s => s.dir === currentView);
|
|
if (!section) return;
|
|
|
|
const filtered = searchQuery
|
|
? section.items.filter(i =>
|
|
i.title.toLowerCase().includes(searchQuery) ||
|
|
i.desc.toLowerCase().includes(searchQuery))
|
|
: section.items;
|
|
|
|
let html = `<div class="breadcrumb">
|
|
<a href="#" data-breadcrumb="all">Wiki 知识库</a>
|
|
<span class="sep">/</span>
|
|
<span>${section.icon} ${section.dir}</span>
|
|
</div>`;
|
|
|
|
html += `<div class="wiki-section">
|
|
<div class="wiki-section-title">${section.icon} ${section.dir}</div>
|
|
<div class="wiki-section-desc">${section.desc}</div>
|
|
</div>`;
|
|
|
|
// TOC
|
|
html += `<div class="wiki-toc">
|
|
<div class="wiki-toc-header open" onclick="this.classList.toggle('open');this.nextElementSibling.classList.toggle('open')">
|
|
<span class="toc-icon">▶</span>
|
|
<span class="toc-title">文档目录</span>
|
|
<span class="toc-count">${section.items.length} 篇</span>
|
|
</div>
|
|
<div class="wiki-toc-body open">`;
|
|
|
|
for (const item of filtered) {
|
|
html += `<a class="wiki-toc-item" href="${item.path}">
|
|
<span class="item-icon">📄</span>
|
|
<span class="item-title">${item.title}</span>
|
|
<span class="item-tag">${item.date}</span>
|
|
</a>`;
|
|
}
|
|
|
|
html += '</div></div>';
|
|
|
|
if (!filtered.length) {
|
|
html += `<div style="text-align:center;padding:48px 0;color:var(--text-tertiary)">
|
|
<div style="font-size:32px;margin-bottom:8px">🔍</div>
|
|
<div>没有找到匹配的文档</div>
|
|
</div>`;
|
|
}
|
|
|
|
main.innerHTML = html;
|
|
|
|
main.querySelector('[data-breadcrumb="all"]')?.addEventListener('click', e => {
|
|
e.preventDefault();
|
|
currentView = 'all';
|
|
render();
|
|
});
|
|
}
|
|
|
|
// Search
|
|
document.getElementById('searchInput').addEventListener('input', function() {
|
|
searchQuery = this.value.toLowerCase().trim();
|
|
render();
|
|
});
|
|
|
|
render();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|