yueqian/wiki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
69c6cf2843d36292a5bb630f5f5450aa6e23b75e
wiki/index.html
T

593 lines
29 KiB
HTML
Raw Blame History

<!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>
: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;
--drawer-bg: #FFFFFF;
}
/* ===== Dark Mode ===== */
[data-theme="dark"] {
--color-primary: #177DDC;
--color-primary-hover: #4096FF;
--color-primary-active: #0958D9;
--color-primary-bg: rgba(23,125,220,0.15);
--bg: #0A0A0A;
--bg-container: #141414;
--bg-elevated: #1A1A1A;
--border: #303030;
--border-light: #222222;
--text-primary: #E8E8E8;
--text-secondary: #A6A6A6;
--text-tertiary: #6E6E6E;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.2), 0 1px 6px -1px rgba(0,0,0,0.15);
--shadow-md: 0 2px 4px rgba(0,0,0,0.25), 0 4px 12px -2px rgba(0,0,0,0.2);
--drawer-bg: #141414;
}
* { 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;
-webkit-tap-highlight-color: transparent;
transition: background 0.2s ease, color 0.2s ease;
}
/* ===== Header ===== */
.header-bar {
position: sticky; top: 0; height: var(--header-h);
background: rgba(255,255,255,0.95);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-light);
display: flex; align-items: center; padding: 0 16px; z-index: 100; gap: 12px;
}
[data-theme="dark"] .header-bar { background: rgba(20,20,20,0.95); }
.header-bar .menu-btn, .header-bar .theme-btn {
display: none; width: 36px; height: 36px; border: none; background: none;
cursor: pointer; border-radius: var(--radius-sm); align-items: center; justify-content: center;
flex-shrink: 0;
}
.header-bar .menu-btn:hover, .header-bar .theme-btn:hover { background: var(--bg-elevated); }
.header-bar .menu-btn svg { width: 20px; height: 20px; color: var(--text-secondary); }
.header-bar .theme-btn { font-size: 16px; }
.header-bar .brand { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; }
.header-bar h1 {
font-size: 15px; 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: 11px; color: var(--text-tertiary); display: inline; }
.search-box { flex: 1 1 auto; min-width: 80px; max-width: 500px; position: relative; }
.search-box input {
width: 100%; padding: 8px 12px 8px 34px;
border: 1px solid var(--border); border-radius: var(--radius-sm);
font-size: 14px; outline: none; background: var(--bg-elevated);
color: var(--text-primary);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
min-width: 0;
}
.search-box input::placeholder { color: var(--text-tertiary); }
.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: 15px; pointer-events: none; line-height: 1; }
/* ===== Filter Chips (mobile) ===== */
.chip-bar {
display: none;
padding: 10px 16px 0;
background: var(--bg-container);
border-bottom: 1px solid var(--border-light);
position: sticky; top: var(--header-h); z-index: 90;
}
.chip-bar-inner {
display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
padding-bottom: 10px; scrollbar-width: none;
}
.chip-bar-inner::-webkit-scrollbar { display: none; }
.chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 7px 14px; border-radius: 20px;
font-size: 13px; font-weight: 500; white-space: nowrap;
border: 1px solid var(--border); background: var(--bg-container);
color: var(--text-secondary); cursor: pointer;
transition: all 0.15s ease; user-select: none;
-webkit-tap-highlight-color: transparent;
min-height: 36px;
}
.chip:active { transform: scale(0.96); }
.chip.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.chip .chip-count {
font-size: 11px; background: rgba(0,0,0,0.08); border-radius: 10px; padding: 0 5px; line-height: 1.5;
}
.chip.active .chip-count { background: rgba(255,255,255,0.25); }
/* ===== 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);
letter-spacing: 0.5px; margin-bottom: 4px; padding: 4px 0;
}
.sidebar .nav-item {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px; border-radius: var(--radius-sm);
font-size: 13px; color: var(--text-secondary);
cursor: pointer; transition: all 0.12s ease; text-decoration: none;
min-height: 40px;
}
.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: 20px; 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); }
.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: 5px 12px; }
/* ===== Drawer Overlay ===== */
.drawer-overlay {
display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55);
z-index: 200; opacity: 0; transition: opacity 0.2s ease;
}
.drawer-overlay.show { display: block; opacity: 1; }
.drawer {
position: fixed; top: 0; left: 0; bottom: 0; width: 280px; max-width: 85vw;
background: var(--drawer-bg); z-index: 201;
transform: translateX(-100%); transition: transform 0.25s ease;
overflow-y: auto;
}
.drawer-overlay.show .drawer { transform: translateX(0); }
.drawer-header {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px; border-bottom: 1px solid var(--border-light);
}
.drawer-header .close-btn {
width: 32px; height: 32px; border: none; background: var(--bg-elevated);
border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center;
justify-content: center; font-size: 18px; color: var(--text-secondary);
}
/* ===== Main ===== */
.main { flex: 1; padding: 24px 32px 64px; min-width: 0; }
.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 { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.stat-item {
display: flex; align-items: baseline; gap: 4px;
padding: 8px 14px; background: var(--bg-container);
border: 1px solid var(--border-light); border-radius: var(--radius-sm);
}
.stat-num { font-size: 18px; font-weight: 700; color: var(--color-primary); }
.stat-label { font-size: 12px; color: var(--text-tertiary); }
.wiki-section { margin-bottom: 28px; }
.wiki-section-title { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.wiki-section-desc { font-size: 13px; color: var(--text-tertiary); margin-bottom: 14px; }
.all-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.all-card {
background: var(--bg-container); border: 1px solid var(--border-light);
border-radius: var(--radius-md); padding: 16px 18px;
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:active { transform: scale(0.99); }
.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: 2px 8px; border-radius: 10px; font-weight: 500; }
.all-card .card-date { font-size: 11px; color: var(--text-tertiary); }
.wiki-toc {
background: var(--bg-container); border: 1px solid var(--border-light);
border-radius: var(--radius-md); overflow: hidden; margin-top: 8px;
}
.wiki-toc-header {
display: flex; align-items: center; gap: 10px; padding: 14px 18px;
background: var(--bg-elevated); border-bottom: 1px solid var(--border-light);
cursor: pointer; user-select: none; transition: background 0.12s ease;
min-height: 44px;
}
.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: 12px 18px 12px 42px; border-bottom: 1px solid var(--border-light);
transition: background 0.1s ease; text-decoration: none; color: var(--text-primary);
min-height: 48px;
}
.wiki-toc-item:last-child { border-bottom: none; }
.wiki-toc-item:active { 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: 2px 8px; border-radius: 10px;
background: var(--bg-elevated); color: var(--text-tertiary); flex-shrink: 0;
}
/* ===== Dark mode toggle button (desktop) ===== */
.theme-toggle {
display: none;
margin-left: auto;
align-items: center;
gap: 8px;
cursor: pointer;
}
.theme-toggle button {
width: 36px; height: 36px; border: none; background: none;
cursor: pointer; border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
font-size: 16px; color: var(--text-secondary);
}
.theme-toggle button:hover { background: var(--bg-elevated); }
/* ===== Desktop ===== */
@media (min-width: 769px) {
.chip-bar { display: none !important; }
.theme-toggle { display: flex; }
}
/* ===== Mobile ===== */
@media (max-width: 768px) {
.header-bar { padding: 0 10px; gap: 8px; }
.menu-btn { display: flex !important; }
.header-bar .tagline { display: none; }
.search-box input { padding: 7px 10px 7px 30px; font-size: 14px; }
.search-box .search-icon { left: 8px; font-size: 14px; }
.chip-bar { display: block; }
.sidebar { display: none; }
.main { padding: 16px 12px 48px; }
.all-grid { grid-template-columns: 1fr; gap: 10px; }
.all-card { padding: 14px 16px; }
.stats-bar { gap: 8px; }
.stat-item { padding: 6px 10px; }
.stat-num { font-size: 16px; }
.wiki-section-title { font-size: 16px; }
.wiki-toc-item { padding: 10px 14px 10px 36px; }
.wiki-toc-header { padding: 12px 14px; }
/* Theme toggle in mobile header */
.theme-toggle { display: flex !important; margin-left: 0; }
.theme-toggle button {
width: 32px; height: 32px; font-size: 15px;
}
}
</style>
</head>
<body>
<header class="header-bar">
<button class="menu-btn" id="menuBtn" aria-label="菜单">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
</button>
<div class="brand">
<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>
<div class="theme-toggle">
<button class="theme-btn" id="themeBtn" title="切换深色/浅色主题"></button>
</div>
</header>
<!-- Mobile chip filter bar -->
<div class="chip-bar">
<div class="chip-bar-inner" id="chipBar"></div>
</div>
<!-- Mobile drawer -->
<div class="drawer-overlay" id="drawerOverlay">
<div class="drawer">
<div class="drawer-header">
<span style="font-weight:600;font-size:15px;">导航</span>
<button class="close-btn" id="drawerClose">&#x2715;</button>
</div>
<div id="drawerNav"></div>
</div>
</div>
<div class="layout">
<nav class="sidebar" id="sidebar"></nav>
<div class="main" id="main"></div>
</div>
<script>
/* ===== Theme ===== */
var htmlEl = document.documentElement;
var themeBtn = document.getElementById('themeBtn');
function setTheme(t) {
htmlEl.setAttribute('data-theme', t);
localStorage.setItem('wiki-theme', t);
themeBtn.textContent = t === 'dark' ? '☀️' : '🌙';
}
var saved = localStorage.getItem('wiki-theme');
if (saved) {
setTheme(saved);
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
setTheme('dark');
} else {
setTheme('light');
}
themeBtn.addEventListener('click', function() {
setTheme(htmlEl.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
});
/* ===== Wiki Data ===== */
const wikiData = [
{
dir: "身份认证与安全", icon: "🔐",
desc: "统一身份认证、IAM 选型、零信任安全",
color: "pink",
items: [
{ 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" }
]
},
{
dir: "IoT 与数据平台", icon: "🏭",
desc: "物联网数据平台、IoT 架构、数据库迁移",
color: "blue",
items: [
{ 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" },
{ path: "沈阳顺义-数据-项目建设方案/报告/需求对比分析报告.html", title: "需求文档 vs 系统实际功能对比", desc: "需求文档与系统实际功能覆盖度对照分析", date: "2026-05-12" },
{ path: "MySQL转PostgreSQL迁移工具/报告/mysql-to-pg-migration-tools.html", title: "MySQL 转 PostgreSQL 迁移工具", desc: "主流迁移工具对比分析，含云厂商方案与开源方案", date: "2026-05-04" }
]
},
{
dir: "电商与商业", icon: "🛒",
desc: "电商系统、分销推广、商业模式",
color: "mint",
items: [
{ path: "金鹿商城电商小程序需求分析/报告/jinlu-deer-mall-requirements-analysis.html", title: "金鹿商城电商小程序需求分析", desc: "需求解读与 CRMEB 差异对比，含限时抢签/活动币/积分商城模块拆解与 26 人天实施计划", date: "2026-05-09" },
{ path: "crmeb-mer-graph-report.html", title: "CRMEB-MER 项目图谱报告", desc: "多商户电商系统的代码结构、依赖图谱与架构深度分析", date: "2026-05-06" },
{ path: "分销商城推广模式调研/报告/分销商城推广模式全景调研.html", title: "分销商城推广模式全景调研", desc: "18 种推广模式系统梳理，含核心机制、收益分析、分润计算、合规框架与选型", date: "2026-05-06" },
{ path: "国内商业业态分类到家/报告/到家业态分类全景.html", title: "国内商业业态分类（到家服务）", desc: "按服务本质分为 5 大板块 92 业态，含楼层收费参考与商业模式对比", date: "2026-05-05" }
]
},
{
dir: "AI 开发工具", icon: "🤖",
desc: "AI 辅助开发、代码分析、MCP 服务",
color: "lavender",
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: "Graphify 深度分析报告/代码/graphify-analysis.html", title: "Graphify 代码分析", desc: "Graphify 项目的代码结构、质量指标与重构建议", date: "2026-04-29" },
{ path: "代码图谱工具调研/报告/code-structure-tools-analysis.html", title: "代码图谱工具调研", desc: "主流代码结构与可视化工具的横向对比分析", date: "2026-04-29" },
{ path: "mcp-services-guide/index.html", title: "MCP 服务大全", desc: "适合开发者使用的 MCP 服务大全，含功能对比与快速开始指南", date: "2026-04-29" }
]
},
{
dir: "政务与行业", icon: "🏛",
desc: "政府招投标、智慧监管、政策解读",
color: "pink",
items: [
{ 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: "在线下单、配送调度、到家服务",
color: "mint",
items: [
{ path: "在线下单配送抢单小程序调研/报告/delivery-order-grabbing-mini-program-research.html", title: "在线下单配送抢单小程序调研", desc: "Top 5 开源外卖/跑腿/抢单小程序横向对比，含功能完成度矩阵与技术方案", date: "2026-05-05" },
{ path: "交互式演示/tetrahedron-interactive.html", title: "正四面体旋转与展开动画", desc: "鼠标拖拽旋转四面体，点击铰链展开为平面展开图", date: "2026-05-06" }
]
}
];
const allItems = [];
for (const s of wikiData) {
for (const item of s.items) {
allItems.push(Object.assign({}, item, { section: s.dir, icon: s.icon, sectionDesc: s.desc }));
}
}
let currentView = 'all';
let searchQuery = '';
const badgeStyle = {
pink: 'background:#FFF0F6;color:#EB2F96;border:1px solid #FFADD2',
blue: 'background:#E6F4FF;color:#1677FF;border:1px solid #91CAFF',
mint: 'background:#F6FFED;color:#52C41A;border:1px solid #B7EB8F',
lavender: 'background:#F9F0FF;color:#722ED1;border:1px solid #D3ADF7'
};
/* Dark mode badge overrides */
function getBadgeColorVar(color) {
const isDark = htmlEl.getAttribute('data-theme') === 'dark';
if (!isDark) return badgeStyle[color];
const darkMap = {
pink: 'background:rgba(235,47,150,0.15);color:#FF85C8;border:1px solid rgba(255,173,210,0.3)',
blue: 'background:rgba(22,119,255,0.15);color:#5CABFF;border:1px solid rgba(145,202,255,0.3)',
mint: 'background:rgba(82,196,26,0.15);color:#7BD950;border:1px solid rgba(183,235,143,0.3)',
lavender: 'background:rgba(114,46,209,0.15);color:#B47CFF;border:1px solid rgba(211,173,247,0.3)'
};
return darkMap[color] || darkMap.blue;
}
/* ===== Drawer ===== */
var drawerEl = document.getElementById('drawerOverlay');
document.getElementById('menuBtn').addEventListener('click', function() { drawerEl.classList.add('show'); });
document.getElementById('drawerClose').addEventListener('click', function() { drawerEl.classList.remove('show'); });
drawerEl.addEventListener('click', function(e) { if (e.target === drawerEl) drawerEl.classList.remove('show'); });
function buildNav(targetEl) {
var 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 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>';
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>';
}
targetEl.innerHTML = html;
targetEl.querySelectorAll('.nav-item[data-view]').forEach(function(el) {
el.addEventListener('click', function(e) {
e.preventDefault();
currentView = el.dataset.view;
drawerEl.classList.remove('show');
render();
});
});
}
/* ===== Mobile Chips ===== */
function buildChips() {
var bar = document.getElementById('chipBar');
var html = '<span class="chip' + (currentView === 'all' ? ' active' : '') + '" data-view="all">全部<span class="chip-count">' + allItems.length + '</span></span>';
for (const section of wikiData) {
html += '<span class="chip' + (currentView === section.dir ? ' active' : '') + '" data-view="' + section.dir + '">' + section.icon + ' ' + section.dir + '<span class="chip-count">' + section.items.length + '</span></span>';
}
bar.innerHTML = html;
bar.querySelectorAll('.chip').forEach(function(el) {
el.addEventListener('click', function() {
currentView = el.dataset.view;
render();
});
});
}
/* ===== Render ===== */
function render() {
buildNav(document.getElementById('sidebar'));
buildNav(document.getElementById('drawerNav'));
buildChips();
var main = document.getElementById('main');
if (currentView === 'all') renderAllView(main);
else renderSectionView(main);
}
function renderAllView(main) {
var filtered = searchQuery
? allItems.filter(function(i) { return i.title.toLowerCase().indexOf(searchQuery) !== -1 || i.desc.toLowerCase().indexOf(searchQuery) !== -1 || i.section.toLowerCase().indexOf(searchQuery) !== -1; })
: allItems;
var html = '<div class="breadcrumb"><a href="#" data-breadcrumb="all">Wiki 知识库</a></div>';
html += '<div class="stats-bar">';
html += '<div class="stat-item"><span class="stat-num">' + wikiData.length + '</span><span class="stat-label">分类</span></div>';
html += '<div class="stat-item"><span class="stat-num">' + allItems.length + '</span><span class="stat-label">文档</span></div>';
html += '<div class="stat-item"><span class="stat-num">' + filtered.length + '</span><span class="stat-label">' + (searchQuery ? '搜索结果' : '当前展示') + '</span></div>';
html += '</div>';
for (const section of wikiData) {
const items = searchQuery ? filtered.filter(function(i){ return i.section === section.dir; }) : section.items;
if (!items.length) continue;
html += '<div class="wiki-section"><div class="wiki-section-title">' + section.icon + ' ' + section.dir + '</div>';
html += '<div class="wiki-section-desc">' + section.desc + '</div>';
html += '<div class="all-grid">';
for (const item of items) {
html += '<a class="all-card" href="' + item.path + '">';
html += '<div class="card-title">' + item.title + '</div>';
html += '<div class="card-desc">' + item.desc + '</div>';
html += '<div class="card-meta"><span class="card-badge" style="' + getBadgeColorVar(section.color) + '">' + section.dir + '</span><span class="card-date">' + item.date + '</span></div>';
html += '</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', function(e) { e.preventDefault(); currentView = 'all'; render(); });
}
function renderSectionView(main) {
var section = wikiData.find(function(s){ return s.dir === currentView; });
if (!section) return;
var filtered = searchQuery
? section.items.filter(function(i) { return i.title.toLowerCase().indexOf(searchQuery) !== -1 || i.desc.toLowerCase().indexOf(searchQuery) !== -1; })
: section.items;
var 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>';
html += '<div class="wiki-section-desc">' + section.desc + '</div></div>';
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>';
html += '<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', function(e) { e.preventDefault(); currentView = 'all'; render(); });
}
document.getElementById('searchInput').addEventListener('input', function() {
searchQuery = this.value.toLowerCase().trim();
render();
});
/* Re-render on theme switch to update badge colors */
var observer = new MutationObserver(function() { render(); });
observer.observe(htmlEl, { attributes: true, attributeFilter: ['data-theme'] });
render();
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink