From e1729ac8b705a366b55c77fe65770e27143f86e9 Mon Sep 17 00:00:00 2001
From: zdh <zdh@ycbat.com>
Date: Thu, 14 May 2026 18:25:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20index.html=EF=BC=9Awiki=20?=
 =?UTF-8?q?=E9=A3=8E=E6=A0=BC=E7=9B=AE=E5=BD=95=E7=B4=A2=E5=BC=95=EF=BC=8C?=
 =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E5=AF=BC=E8=88=AA=20+=20=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 918 +++++++++++++++++++++++++++++++----------------------
 1 file changed, 547 insertions(+), 371 deletions(-)
diff --git a/index.html b/index.html
index fabacb0..7cfdc38 100644
--- a/index.html
+++ b/index.html
@@ -3,22 +3,17 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>一人公司开发团队知识库</title>
+<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;
@@ -27,19 +22,14 @@
   --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: 64px;
-  --content-max: 1200px;
+  --header-h: 56px;
+  --sidebar-w: 260px;
+  --content-max: 960px;
 }
 
 * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -60,23 +50,25 @@ body {
   position: sticky;
   top: 0;
   height: var(--header-h);
-  background: rgba(255,255,255,0.85);
+  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 40px;
+  padding: 0 24px;
   z-index: 100;
+  gap: 16px;
 }
 
 .header-bar .brand {
   display: flex;
   align-items: baseline;
-  gap: 12px;
+  gap: 10px;
+  flex-shrink: 0;
 }
 
 .header-bar h1 {
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 700;
   background: linear-gradient(135deg, var(--color-primary) 0%, #722ED1 100%);
   -webkit-background-clip: text;
@@ -89,158 +81,304 @@ body {
   color: var(--text-tertiary);
 }
 
-/* ===== Content ===== */
-.container {
-  max-width: var(--content-max);
-  margin: 0 auto;
-  padding: 32px 40px 64px;
+/* Search */
+.search-box {
+  flex: 1;
+  max-width: 400px;
+  position: relative;
 }
 
-/* ===== Filter Bar ===== */
-.filter-bar {
+.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;
-  margin-bottom: 24px;
-  flex-wrap: wrap;
-}
-
-.filter-label {
+  padding: 6px 12px;
+  border-radius: var(--radius-sm);
   font-size: 13px;
-  color: var(--text-tertiary);
-  margin-right: 4px;
-}
-
-.filter-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 14px;
-  border-radius: 16px;
-  font-size: 13px;
-  font-weight: 500;
-  border: 1px solid var(--border);
-  background: var(--bg-container);
   color: var(--text-secondary);
   cursor: pointer;
-  transition: all 0.15s ease;
-  user-select: none;
+  transition: all 0.12s ease;
+  text-decoration: none;
 }
 
-.filter-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
-.filter-chip.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
+.sidebar .nav-item:hover {
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+}
 
-.filter-chip .chip-count {
+.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;
-  background: rgba(0,0,0,0.08);
+  color: var(--text-tertiary);
+  background: var(--bg-elevated);
   border-radius: 10px;
   padding: 0 6px;
-  line-height: 1.4;
+  line-height: 1.6;
 }
 
-.filter-chip.active .chip-count { background: rgba(255,255,255,0.25); }
-
-/* ===== Group ===== */
-.group { margin-bottom: 32px; }
-
-.group-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-secondary);
-  margin-bottom: 12px;
-  padding-left: 12px;
-  border-left: 3px solid var(--color-primary);
-  line-height: 1.4;
+.sidebar .nav-item.active .nav-count {
+  background: rgba(22,119,255,0.12);
+  color: var(--color-primary);
 }
 
-/* ===== Card ===== */
-.card {
+/* 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);
+  border: 1px solid var(--border-light);
   border-radius: var(--radius-md);
-  padding: 20px 24px;
-  margin-bottom: 8px;
+  overflow: hidden;
+}
+
+.wiki-toc-header {
   display: flex;
   align-items: center;
-  gap: 16px;
-  transition: all 0.2s ease;
-  box-shadow: var(--shadow-sm);
+  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;
 }
 
-.card:hover {
-  transform: translateY(-1px);
+.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);
 }
 
-.card-accent {
-  width: 4px;
-  height: 36px;
-  border-radius: 2px;
-  flex-shrink: 0;
-}
-
-.card-accent--blue  { background: var(--color-primary); }
-.card-accent--pink  { background: #EB2F96; }
-.card-accent--mint  { background: var(--color-success); }
-.card-accent--lavender { background: #722ED1; }
-
-.card-body { flex: 1; min-width: 0; }
-
-.card-name {
+.all-card .card-title {
   font-size: 14px;
   font-weight: 600;
   margin-bottom: 4px;
 }
 
-.card-name a {
-  color: var(--text-primary);
-  text-decoration: none;
-  transition: color 0.15s ease;
-}
-
-.card-name a:hover { color: var(--color-primary); }
-
-.card-desc {
-  font-size: 13px;
-  color: var(--text-secondary);
-  line-height: 1.5;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.card-meta {
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 4px;
-}
-
-.card-date {
+.all-card .card-desc {
   font-size: 12px;
   color: var(--text-tertiary);
-  font-family: 'SF Mono', 'Menlo', 'Courier New', monospace;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
-.card-badge {
-  display: inline-block;
-  padding: 2px 10px;
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: 600;
+.all-card .card-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
 }
 
-.card-badge--blue     { background: #E6F4FF; color: #1677FF; border: 1px solid #91CAFF; }
-.card-badge--pink     { background: #FFF0F6; color: #EB2F96; border: 1px solid #FFADD2; }
-.card-badge--mint     { background: #F6FFED; color: #52C41A; border: 1px solid #B7EB8F; }
-.card-badge--lavender { background: #F9F0FF; color: #722ED1; border: 1px solid #D3ADF7; }
+.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 {
-  margin-top: 48px;
-  padding-top: 16px;
+  padding: 16px 0;
   border-top: 1px solid var(--border-light);
   font-size: 12px;
   color: var(--text-tertiary);
@@ -249,14 +387,56 @@ body {
 
 /* ===== Responsive ===== */
 @media (max-width: 768px) {
-  .header-bar { padding: 0 16px; }
-  .header-bar h1 { font-size: 16px; }
-  .container { padding: 24px 16px 48px; }
-  .card { flex-wrap: wrap; gap: 8px; padding: 16px; }
-  .card-accent { display: none; }
-  .card-name { min-width: 0; width: 100%; }
-  .card-meta { flex-direction: row; gap: 8px; margin-left: auto; }
-  .card-desc { white-space: normal; }
+  .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>
@@ -264,263 +444,259 @@ body {
 
 <header class="header-bar">
   <div class="brand">
-    <h1>一人公司开发团队知识库</h1>
-    <span class="tagline">独立开发者的技术沉淀与参考资源</span>
+    <h1>Wiki 知识库</h1>
+    <span class="tagline">一人公司开发团队</span>
+  </div>
+  <div class="search-box">
+    <span class="search-icon">&#x1F50D;</span>
+    <input type="text" id="searchInput" placeholder="搜索文档..." autocomplete="off">
   </div>
 </header>
 
-<div class="container">
-  <div class="filter-bar" id="filterBar"></div>
-  <div id="content"></div>
-  <div class="footer" id="footer"></div>
+<div class="layout">
+  <nav class="sidebar" id="sidebar"></nav>
+  <div class="main" id="main"></div>
 </div>
 
 <script>
-const entries = [
-  [
-    "Claude Code 工程师使用指南/报告/claude-code-engineering-guide.html",
-    "Claude Code 最佳实践",
-    "Claude Code 在软件工程场景下的最佳实践与工作流指南",
-    "2026-04-29",
-    "blue"
-  ],
-  [
-    "Graphify 深度分析报告/代码/graphify-analysis.html",
-    "Graphify 代码分析",
-    "Graphify 项目的代码结构、质量指标与重构建议",
-    "2026-04-29",
-    "pink"
-  ],
-  [
-    "代码图谱工具调研/报告/code-structure-tools-analysis.html",
-    "代码图谱工具调研",
-    "主流代码结构与可视化工具的横向对比分析",
-    "2026-04-29",
-    "mint"
-  ],
-  [
-    "MySQL转PostgreSQL迁移工具/报告/mysql-to-pg-migration-tools.html",
-    "MySQL 转 PostgreSQL 迁移工具",
-    "主流 MySQL → PostgreSQL 迁移工具对比分析，含云厂商方案与开源方案",
-    "2026-05-04",
-    "mint"
-  ],
-  [
-    "mcp-services-guide/index.html",
-    "MCP 服务大全",
-    "适合开发者使用的 MCP 服务大全，含功能对比与快速开始指南",
-    "2026-04-29",
-    "lavender"
-  ],
-  [
-    "国内商业业态分类到家/报告/到家业态分类全景.html",
-    "国内商业业态分类（到家服务）",
-    "国内完整业态分类全景，按服务本质分为 5 大板块 92 业态，含楼层收费参考与商业模式对比",
-    "2026-05-05",
-    "mint"
-  ],
-  [
-    "在线下单配送抢单小程序调研/报告/delivery-order-grabbing-mini-program-research.html",
-    "在线下单配送抢单小程序调研",
-    "Top 5 开源外卖/跑腿/抢单小程序横向对比，含前后端功能完成度矩阵与技术方案分析",
-    "2026-05-05",
-    "mint"
-  ],
-  [
-    "crmeb-mer-graph-report.html",
-    "CRMEB-MER 项目图谱报告",
-    "CRMEB-MER 多商户电商系统的代码结构、依赖图谱与架构深度分析",
-    "2026-05-06",
-    "pink"
-  ],
-  [
-    "分销商城推广模式调研/报告/分销商城推广模式全景调研.html",
-    "分销商城推广模式全景调研",
-    "18 种推广模式系统梳理（传统分销+微三云特色），含核心机制、收益分析、分润计算、合规框架与选型建议",
-    "2026-05-06",
-    "mint"
-  ],
-  [
-    "交互式演示/tetrahedron-interactive.html",
-    "正四面体旋转与展开动画",
-    "鼠标拖拽旋转四面体，点击按钮铰链展开为平面展开图，四个面均为等大正三角形",
-    "2026-05-06",
-    "lavender"
-  ],
-  [
-    "全域智能认证与门户平台/报告/unified-auth-portal-requirements.html",
-    "全域智能认证与门户平台需求分析",
-    "企业级统一身份认证与门户平台完整需求拆解，含 13 套系统对接清单、架构设计、实施路线图与风险分析",
-    "2026-05-08",
-    "pink"
-  ],
-  [
-    "全域智能认证与门户平台/报告/identity-auth-center-tech-analysis.html",
-    "身份认证中心技术解析与开源匹配",
-    "多元化认证、零信任登录、密码代填、CAS 对接深度解析，Keycloak/Casdoor/MaxKey/Apereo CAS 匹配度对比与选型建议",
-    "2026-05-08",
-    "blue"
-  ],
-  [
-    "全域智能认证与门户平台/报告/opensource-iam-selection-report.html",
-    "开源 IAM 项目选型报告",
-    "5 大开源 IAM 项目（Keycloak/Casdoor/MaxKey/Apereo CAS/Syncope）匹配度深度对比，含需求矩阵、综合评分与推荐架构蓝图",
-    "2026-05-08",
-    "blue"
-  ],
-  [
-    "graphify-rs使用手册/报告/graphify-rs-usage-guide.html",
-    "graphify-rs 使用手册",
-    "graphify-rs 代码知识图谱工具的完整使用指南，含安装、构建、查询、输出格式、集成与工作流最佳实践",
-    "2026-05-08",
-    "blue"
-  ],
-  [
-    "金鹿商城电商小程序需求分析/报告/jinlu-deer-mall-requirements-analysis.html",
-    "金鹿商城电商小程序需求分析",
-    "金鹿商城小程序需求解读与 CRMEB 现有功能差异对比，含限时抢签/活动币/积分商城组合支付模块的完整拆解与 26 人天实施计划",
-    "2026-05-09",
-    "pink"
-  ],
-  [
-    "招标投标AI推广应用政策解读/报告/ai-bidding-tendering-policy-analysis.html",
-    "招标投标领域AI推广应用政策解读",
-    "国家发改委等八部门联合发文（发改法规〔2026〕195号），6 大领域 20 个 AI 场景全景拆解，含分阶段目标与市场机遇分析",
-    "2026-05-09",
-    "mint"
-  ],
-  [
-    "招标投标AI推广应用政策解读/报告/provincial-bidding-smart-supervision-platform.html",
-    "省级招投标智慧监管平台建设方案",
-    "省级招投标主管部门业务痛点分析、8大业务场景设计、功能模块规划、系统架构与技术实现路径完整方案",
-    "2026-05-09",
-    "pink"
-  ],
-  [
-    "沈阳顺义-数据-项目建设方案/报告/沈阳顺义数据项目建设方案解读.html",
-    "沈阳顺义数据项目建设方案解读",
-    "系统故障预测与健康管理数据应用平台完整解读：12+3功能模块拆解、17项功能要求覆盖分析、13项技术指标对照、20+审查意见分类、交叉点与新增点识别",
-    "2026-05-12",
-    "pink"
-  ],
-  [
-    "沈阳顺义-数据-项目建设方案/报告/开源项目匹配度分析.html",
-    "沈阳顺义项目开源方案匹配度分析",
-    "10 个开源项目（ThingsBoard/DataHub/ThingLinks/IoT DC3/qData 等）在 IoT 层、数据治理层、算法层的匹配度矩阵分析，含推荐组合方案与自研边界划分",
-    "2026-05-12",
-    "mint"
-  ],
-  [
-    "沈阳顺义-数据-项目建设方案/报告/开源版专业版功能对比.html",
-    "开源版 vs 专业版功能对比",
-    "沈阳顺义数据项目 13 大模块逐项对比，清晰标注开源版已包含/部分包含/缺失功能项，含差异说明与统计汇总",
-    "2026-05-12",
-    "pink"
-  ]
+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" }
+    ]
+  }
 ];
 
-const groups = [
-  { title: "工程指南", filter: (e) => e[4] === "blue" },
-  { title: "深度分析", filter: (e) => e[4] === "pink" },
-  { title: "调研研究", filter: (e) => e[4] === "mint" },
-  { title: "参考资源", filter: (e) => e[4] === "lavender" }
-];
+// 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 });
+  }
+}
 
-const badgeLabels = { blue: "工程指南", pink: "深度分析", mint: "调研研究", lavender: "参考资源" };
+let currentView = 'all'; // 'all' or section dir name
+let searchQuery = '';
 
-let activeFilters = new Set(); // empty = show all
+function getBadgeColor(section) {
+  const map = { '工程指南': 'blue', '深度分析': 'pink', '调研研究': 'mint', '交互式演示': 'lavender' };
+  return map[section] || 'blue';
+}
 
-function buildFilterBar() {
-  const bar = document.getElementById('filterBar');
-  bar.innerHTML = '';
+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;
+}
 
-  const allChip = document.createElement('span');
-  allChip.className = 'filter-chip active';
-  allChip.dataset.group = '__all__';
-  allChip.innerHTML = `全部<span class="chip-count">${entries.length}</span>`;
-  allChip.addEventListener('click', () => {
-    activeFilters.clear();
-    render();
-  });
-  bar.appendChild(allChip);
+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">&#x1F3E0;</span>
+    <span>全部文档</span>
+    <span class="nav-count">${allItems.length}</span>
+  </a>`;
+  html += '</div>';
 
-  for (const group of groups) {
-    const count = entries.filter(group.filter).length;
-    if (!count) continue;
-    const chip = document.createElement('span');
-    chip.className = 'filter-chip';
-    chip.dataset.group = group.title;
-    chip.innerHTML = `${group.title}<span class="chip-count">${count}</span>`;
-    chip.addEventListener('click', () => {
-      if (activeFilters.has(group.title)) {
-        activeFilters.delete(group.title);
-      } else {
-        activeFilters.add(group.title);
-      }
+  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">&#x1F4C4;</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();
     });
-    bar.appendChild(chip);
-  }
+  });
 }
 
 function render() {
-  const content = document.getElementById('content');
-  const footer = document.getElementById('footer');
-  content.innerHTML = '';
+  buildSidebar();
+  const main = document.getElementById('main');
 
-  // Update filter bar active states
-  document.querySelectorAll('.filter-chip').forEach(chip => {
-    const g = chip.dataset.group;
-    chip.classList.toggle('active', g === '__all__' ? activeFilters.size === 0 : activeFilters.has(g));
-  });
-
-  // Sort by date descending
-  const sorted = [...entries].sort((a, b) => b[3].localeCompare(a[3]));
-
-  // Determine which groups to show
-  const activeGroups = activeFilters.size === 0
-    ? groups
-    : groups.filter(g => activeFilters.has(g.title));
-
-  for (const group of activeGroups) {
-    const items = sorted.filter(group.filter);
-    if (!items.length) continue;
-
-    const section = document.createElement('div');
-    section.className = 'group';
-    section.dataset.group = group.title;
-
-    const title = document.createElement('div');
-    title.className = 'group-title';
-    title.textContent = group.title;
-    section.appendChild(title);
-
-    for (const [path, name, desc, date, color] of items) {
-      const card = document.createElement('div');
-      card.className = 'card';
-      card.innerHTML = `
-        <div class="card-accent card-accent--${color}"></div>
-        <div class="card-body">
-          <div class="card-name"><a href="${path}" target="_blank">${name}</a></div>
-          <div class="card-desc">${desc}</div>
-        </div>
-        <div class="card-meta">
-          <span class="card-badge card-badge--${color}">${badgeLabels[color]}</span>
-          <span class="card-date">${date}</span>
-        </div>
-      `;
-      section.appendChild(card);
-    }
-
-    content.appendChild(section);
+  if (currentView === 'all') {
+    renderAllView(main);
+  } else {
+    renderSectionView(main);
   }
-
-  // Count visible items
-  const visibleCount = content.querySelectorAll('.card').length;
-  footer.textContent = `显示 ${visibleCount} / 共 ${entries.length} 篇文档`;
 }
 
-buildFilterBar();
+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">&#x1F50D;</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">&#x25B6;</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">&#x1F4C4;</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">&#x1F50D;</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>
 
