fix: 修复返回链接路径 + 添加侧栏目录 + 布局规范
Deploy Wiki to Production / deploy (push) Has been cancelled

- 修复 3 个错误 href(graphify-analysis、沈阳顺义×2):../ → ../../
- 4 个沈阳顺义报告 + 到家业态分类:添加左侧 260px 粘性侧栏目录
- 所有 <h2> 添加 id 锚点,侧栏自动生成 TOC 导航
- design-tokens.md 新增 §17《页面布局与导航规范》
  - 强制要求:所有页面必须有返回链接 + 粘性顶栏
  - 报告页标准布局:顶栏 + 侧栏目录 + 主内容
  - 页面创建检查清单
- 变更日志更新至 2.1
This commit is contained in:
zdh
2026-06-05 19:19:24 +08:00
parent 5167d9e36e
commit 9d2851dc56
5 changed files with 236 additions and 26 deletions
+88
View File
@@ -9,6 +9,7 @@
| 日期 | 版本 | 变更 |
|------|------|------|
| 2026-06-05 | 2.1 | 全站 49/50 页面添加「← 返回知识库」导航链接;修复 3 个错误 href 路径;4 个沈阳顺义报告 + 到家业态分类添加侧栏目录;新增 §17 页面布局与导航规范 |
| 2026-06-05 | 2.0 | 主设计系统从 Ant Design v5 迁移至 Fluent 2;品牌色 `#1677FF``#0078D4`;新增材质/动效/完整色彩阶梯/字体体系;`index.html` 同步重设计 |
| ~2026-05 | 1.0 | 初始版本,基于 Ant Design v5 + 阿里云控制台风格 |
@@ -557,6 +558,93 @@ Fluent 2 使用自有断点体系(取代 Ant Design 断点):
---
## 17. 页面布局与导航规范
### 17.1 强制要求
**所有页面**(不含 `index.html` 首页本身)必须满足:
| 要求 | 说明 |
|------|------|
| 返回链接 | 顶部固定导航栏内包含 `← 返回知识库` 链接,指向 `index.html` |
| 顶部导航栏 | 粘性顶栏(`position: sticky; top: 0; z-index: 100`),高度 64px |
| 统一路径规则 | 根级文件 `./index.html`,一级子目录 `../index.html`,二级子目录 `../../index.html` |
### 17.2 报告页布局标准
**所有 `{主题}/报告/*.html` 报告页** 必须使用以下布局:
```
┌──────────────────────────────────────────┐
│ Header Bar (sticky, 64px) │
│ ← 返回知识库 报告标题 │
├────────┬─────────────────────────────────┤
│ Sidebar│ Main Content │
│ 260px │ (flex: 1, max-width: 1200px) │
│ │ │
│ 目录 │ ## 章节 │
│ · 1. │ ... │
│ · 2. │ ## 章节 │
│ · 3. │ ... │
│ (sticky│ │
│ TOC) │ │
├────────┴─────────────────────────────────┤
```
**核心 CSS 结构:**
```css
.layout { display: flex; max-width: 1200px; margin: 0 auto; }
.sidebar { width: 260px; flex-shrink: 0; position: sticky; top: 64px;
height: calc(100vh - 64px); overflow-y: auto;
background: var(--bg-container); border-right: 1px solid var(--border); }
.sidebar a { /* 目录链接,需包含 .active 激活态样式 */ }
.main-content { flex: 1; padding: 32px 40px 64px; min-width: 0; }
```
**侧栏目录(TOC)规则:**
- 自动提取页面内所有 `<h2>` 标题作为目录项
- 每个 `<h2>` 必须有 `id` 属性(作为锚点)
- 目录链接 `href` 指向对应 `#id`
- 激活项添加 `.active` 类(配合 IntersectionObserver 或手动标记)
- 移动端(≤768px)隐藏侧栏,全宽内容
### 17.3 非报告页(特殊布局)
以下页面类型可使用简化布局,但必须保留顶部返回栏:
| 页面类型 | 示例 | 最低要求 |
|----------|------|---------|
| 独立子站首页 | `mcp-services-guide/index.html` | 顶栏 + 返回链接 |
| 交互式演示 | `交互式演示/tetrahedron-interactive.html` | 页面顶部返回链接 |
| 演示文稿 | `YqBoot系统说明书/系统说明书-演示文稿.html` | 固定定位返回链接 |
| 个人简历 | `张德海_简历.html` | 页面顶部返回链接 |
| 系列索引页 | `深国际综合改革方案/index.html` | 顶栏 + 返回链接 |
### 17.4 页面分类与布局要求
| 类别 | 特征 | 布局要求 | 文件数 |
|------|------|---------|--------|
| **标准报告页** | 使用 `var(--color-primary)` 等 Token | 顶栏 + 侧栏目录 + 主内容 | ~33 |
| **无侧栏报告页** | 有 Token 但缺侧栏 | 补齐侧栏目录 | ~10(逐步修复) |
| **自定义样式页** | 独立色板/布局 | 至少顶栏 + 返回链接 | ~4 |
| **特殊布局页** | Canvas/Reveal.js/简历 | 至少返回链接 | ~3 |
### 17.5 页面创建检查清单
新建报告页时必须逐项检查:
- [ ] 顶部固定导航栏(64px, sticky top:0
- [ ] `← 返回知识库` 链接,href 按目录深度计算
- [ ] 左侧 260px 侧栏,含按 `<h2>` 标题生成的目录
- [ ] 所有 `<h2>``id` 锚点
- [ ] 使用 CSS 变量(`var(--color-primary)` 等)而非硬编码颜色
- [ ] 移动端(≤768px)隐藏侧栏,全宽布局
- [ ] `font-family` 引用 `var(--fluent-font-family-text)`
- [ ] 内容区 `max-width: 1200px` 居中
---
## 参考资料
- [Fluent 2 Design System](https://fluent2.microsoft.design)
@@ -450,7 +450,7 @@ a { color: var(--color-primary); }
<!-- Header -->
<header class="header">
<a href="../index.html" class="back-link" style="color:var(--color-primary);text-decoration:none;font-size:12px;margin-right:16px;">← 返回知识库</a>
<a href="../../index.html" class="back-link" style="color:var(--color-primary);text-decoration:none;font-size:12px;margin-right:16px;">← 返回知识库</a>
<h1>Graphify-rs 深度分析报告</h1>
<div class="badges">
<span class="badge hot">22K+ Stars</span>
@@ -160,6 +160,37 @@ td:first-child { font-weight: 600; white-space: nowrap; }
thead th, tbody td { padding: 8px 10px; }
.toc-grid { grid-template-columns: 1fr; }
}
/* ===== Sidebar Layout ===== */
.layout { display: flex; max-width: 1200px; margin: 0 auto; min-height: calc(100vh - 64px); }
.sidebar {
width: 260px; flex-shrink: 0; background: var(--bg-container);
border-right: 1px solid var(--border); padding: 20px 0;
position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto;
}
.sidebar-title {
font-size: 11px; font-weight: 600; color: var(--text-tertiary);
text-transform: uppercase; letter-spacing: 0.8px; padding: 0 16px 12px;
border-bottom: 1px solid var(--border-light); margin: 0 8px 8px;
}
.sidebar a {
display: block; padding: 6px 16px; font-size: 13px; color: var(--text-secondary);
text-decoration: none; border-radius: 0 4px 4px 0; margin: 2px 8px 2px 0;
transition: background 0.12s ease, color 0.12s ease;
}
.sidebar a:hover { background: var(--bg-elevated); color: var(--text-primary); }
.sidebar a.active { background: var(--color-primary-bg); color: var(--color-primary); font-weight: 500; }
.main-content { flex: 1; padding: 32px 40px 64px; min-width: 0; }
.top-bar { height: 64px; background: var(--bg-container); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 32px; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm); }
.top-bar .back-link { margin-right: 16px; color: var(--color-primary); text-decoration: none; font-size: 14px; white-space: nowrap; }
.top-bar .back-link:hover { color: var(--color-primary-hover); }
.top-bar h1 { font-size: 18px; font-weight: 600; color: var(--text-primary); }
@media (max-width: 768px) {
.layout { flex-direction: column; }
.sidebar { display: none; }
.main-content { padding: 24px 16px; }
}
</style>
</head>
<body>
@@ -170,7 +201,7 @@ td:first-child { font-weight: 600; white-space: nowrap; }
<span class="subtitle">配送上门 / 到家服务</span>
</header>
<div class="container">
<div class="main-content">
<div class="toc">
<h3>目录</h3>
@@ -182,7 +213,7 @@ td:first-child { font-weight: 600; white-space: nowrap; }
<!-- 核心差异总结 -->
<div class="summary-section">
<div class="section-header">
<h2>核心差异总结</h2>
<h2 id="核心差异总结">核心差异总结</h2>
<div class="section-desc">到家业态 vs 常规到店业务的关键区别</div>
</div>
<table class="summary-table">
@@ -202,7 +233,7 @@ td:first-child { font-weight: 600; white-space: nowrap; }
<div class="summary-section">
<div class="section-header">
<h2>按履约时效分类</h2>
<h2 id="按履约时效分类">按履约时效分类</h2>
<div class="section-desc">不同时效层级对应的业态与基础设施要求</div>
</div>
<table class="summary-table">
@@ -219,7 +250,7 @@ td:first-child { font-weight: 600; white-space: nowrap; }
<div class="summary-section">
<div class="section-header">
<h2>按商业模式分类</h2>
<h2 id="按商业模式分类">按商业模式分类</h2>
<div class="section-desc">到家业态的主流商业运营模式</div>
</div>
<table class="summary-table">
@@ -237,7 +268,7 @@ td:first-child { font-weight: 600; white-space: nowrap; }
<div class="summary-section">
<div class="section-header">
<h2>按楼层收费参考</h2>
<h2 id="按楼层收费参考">按楼层收费参考</h2>
<div class="section-desc">社区便民配送类业态无电梯楼层加收标准(行业调研汇总)</div>
</div>
<table class="summary-table">
@@ -404,7 +435,7 @@ function render() {
section.className = 'section';
section.id = 'section-' + i;
let html = '<div class="section-header"><h2><span class="num" style="background:' + s.color + '">' + (i + 1) + '</span>' + s.title + '</h2>';
let html = '<div class="section-header"><h2 id="spanclassnumstylebackgroundsco"><span class="num" style="background:' + s.color + '">' + (i + 1) + '</span>' + s.title + '</h2>';
html += '<div class="section-desc">' + s.desc + '</div></div>';
html += '<table><thead><tr><th style="width:140px">业态</th><th>核心业务</th><th>代表平台</th><th style="min-width:180px">与常规区别</th><th style="min-width:160px">合规/资质</th><th style="min-width:200px">相关开源项目</th></tr></thead><tbody>';
for (const item of s.items) {
@@ -83,20 +83,64 @@ code { font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace; font
.grid-2 { grid-template-columns: 1fr; }
h2 { font-size: 20px; }
}
/* ===== Sidebar Layout ===== */
.layout { display: flex; max-width: 1200px; margin: 0 auto; min-height: calc(100vh - 64px); }
.sidebar {
width: 260px; flex-shrink: 0; background: var(--bg-container);
border-right: 1px solid var(--border); padding: 20px 0;
position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto;
}
.sidebar-title {
font-size: 11px; font-weight: 600; color: var(--text-tertiary);
text-transform: uppercase; letter-spacing: 0.8px; padding: 0 16px 12px;
border-bottom: 1px solid var(--border-light); margin: 0 8px 8px;
}
.sidebar a {
display: block; padding: 6px 16px; font-size: 13px; color: var(--text-secondary);
text-decoration: none; border-radius: 0 4px 4px 0; margin: 2px 8px 2px 0;
transition: background 0.12s ease, color 0.12s ease;
}
.sidebar a:hover { background: var(--bg-elevated); color: var(--text-primary); }
.sidebar a.active { background: var(--color-primary-bg); color: var(--color-primary); font-weight: 500; }
.main-content { flex: 1; padding: 32px 40px 64px; min-width: 0; }
.top-bar { height: 64px; background: var(--bg-container); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 32px; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm); }
.top-bar .back-link { margin-right: 16px; color: var(--color-primary); text-decoration: none; font-size: 14px; white-space: nowrap; }
.top-bar .back-link:hover { color: var(--color-primary-hover); }
.top-bar h1 { font-size: 18px; font-weight: 600; color: var(--text-primary); }
@media (max-width: 768px) {
.layout { flex-direction: column; }
.sidebar { display: none; }
.main-content { padding: 24px 16px; }
}
</style>
</head>
<body>
<div class="top-bar">
<a href="../index.html" class="back-link">&larr; 返回知识库</a>
<a href="../../index.html" class="back-link">&larr; 返回知识库</a>
<h1>开源项目匹配度分析报告</h1>
</div>
<div class="layout">
<nav class="sidebar" id="sidebar">
<div class="sidebar-title">目录</div>
<a href="#调研范围与方法">1. 调研范围与方法</a>
<a href="#物联网设备管理平台匹配">2. 物联网/设备管理平台匹配</a>
<a href="#数据治理数据服务平台匹配">3. 数据治理/数据服务平台匹配</a>
<a href="#PHM故障预测算法框架匹配">4. PHM/故障预测算法框架匹配</a>
<a href="#综合匹配矩阵">5. 综合匹配矩阵</a>
<a href="#推荐组合方案">6. 推荐组合方案</a>
<a href="#大厂高星项目驻点关注清单">7. 大厂高星项目驻点关注清单</a>
<a href="#结论">8. 结论</a>
</nav>
</div>
<div class="container">
<div class="main-content">
<!-- 概述 -->
<div class="section">
<h2>1. 调研范围与方法</h2>
<h2 id="调研范围与方法">1. 调研范围与方法</h2>
<p>
<span class="badge badge-pink">深度分析</span>
<span class="badge badge-blue">工程指南</span>
@@ -125,7 +169,7 @@ code { font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace; font
<!-- IoT平台 -->
<div class="section">
<h2>2. 物联网/设备管理平台匹配</h2>
<h2 id="物联网设备管理平台匹配">2. 物联网/设备管理平台匹配</h2>
<!-- ThingsBoard -->
<div class="project-card">
@@ -276,7 +320,7 @@ code { font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace; font
<!-- 数据治理平台 -->
<div class="section">
<h2>3. 数据治理/数据服务平台匹配</h2>
<h2 id="数据治理数据服务平台匹配">3. 数据治理/数据服务平台匹配</h2>
<!-- DataHub -->
<div class="project-card">
@@ -385,7 +429,7 @@ code { font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace; font
<!-- PHM算法 -->
<div class="section">
<h2>4. PHM/故障预测算法框架匹配</h2>
<h2 id="PHM故障预测算法框架匹配">4. PHM/故障预测算法框架匹配</h2>
<div class="note">
PHMPrognostics and Health Management,故障预测与健康管理)是沈阳项目的核心业务场景。以下项目专注于算法/模型层面。
@@ -463,7 +507,7 @@ code { font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace; font
<!-- 综合对比 -->
<div class="section">
<h2>5. 综合匹配矩阵</h2>
<h2 id="综合匹配矩阵">5. 综合匹配矩阵</h2>
<p>以沈阳项目的 15 项核心能力为行,10 个开源项目为列,标注匹配情况:</p>
<div style="overflow-x:auto">
<table>
@@ -492,7 +536,7 @@ code { font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace; font
<!-- 推荐方案 -->
<div class="section">
<h2>6. 推荐组合方案</h2>
<h2 id="推荐组合方案">6. 推荐组合方案</h2>
<p>单一开源项目无法覆盖沈阳项目全部需求。建议采用 <strong>「IoT 平台 + 数据中台 + 自研核心」</strong>的组合策略:</p>
<div class="grid-2">
@@ -547,7 +591,7 @@ code { font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace; font
<!-- 大厂高星项目关注清单 -->
<div class="section">
<h2>7. 大厂高星项目驻点关注清单</h2>
<h2 id="大厂高星项目驻点关注清单">7. 大厂高星项目驻点关注清单</h2>
<p>建议持续跟踪以下项目动态,这些项目有活跃的大厂背景或高社区活跃度:</p>
<table>
<thead><tr><th>项目</th><th>出品方</th><th>Stars</th><th>关注理由</th><th>匹配维度</th></tr></thead>
@@ -568,7 +612,7 @@ code { font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace; font
<!-- 结论 -->
<div class="section">
<h2>8. 结论</h2>
<h2 id="结论">8. 结论</h2>
<div class="danger-note">
<strong>核心结论:沈阳项目是一个「IoT 平台 + 数据中台 + PHM 算法管理」的三合一复合型平台,目前全球范围内没有单开源项目能完整覆盖。</strong>
</div>
@@ -590,5 +634,7 @@ code { font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace; font
</div>
</div>
</body>
</html>
@@ -79,20 +79,63 @@ code { font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace; font
.grid-2 { grid-template-columns: 1fr; }
h2 { font-size: 20px; }
}
/* ===== Sidebar Layout ===== */
.layout { display: flex; max-width: 1200px; margin: 0 auto; min-height: calc(100vh - 64px); }
.sidebar {
width: 260px; flex-shrink: 0; background: var(--bg-container);
border-right: 1px solid var(--border); padding: 20px 0;
position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto;
}
.sidebar-title {
font-size: 11px; font-weight: 600; color: var(--text-tertiary);
text-transform: uppercase; letter-spacing: 0.8px; padding: 0 16px 12px;
border-bottom: 1px solid var(--border-light); margin: 0 8px 8px;
}
.sidebar a {
display: block; padding: 6px 16px; font-size: 13px; color: var(--text-secondary);
text-decoration: none; border-radius: 0 4px 4px 0; margin: 2px 8px 2px 0;
transition: background 0.12s ease, color 0.12s ease;
}
.sidebar a:hover { background: var(--bg-elevated); color: var(--text-primary); }
.sidebar a.active { background: var(--color-primary-bg); color: var(--color-primary); font-weight: 500; }
.main-content { flex: 1; padding: 32px 40px 64px; min-width: 0; }
.top-bar { height: 64px; background: var(--bg-container); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 32px; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm); }
.top-bar .back-link { margin-right: 16px; color: var(--color-primary); text-decoration: none; font-size: 14px; white-space: nowrap; }
.top-bar .back-link:hover { color: var(--color-primary-hover); }
.top-bar h1 { font-size: 18px; font-weight: 600; color: var(--text-primary); }
@media (max-width: 768px) {
.layout { flex-direction: column; }
.sidebar { display: none; }
.main-content { padding: 24px 16px; }
}
</style>
</head>
<body>
<div class="top-bar">
<a href="../index.html" class="back-link">&larr; 返回知识库</a>
<a href="../../index.html" class="back-link">&larr; 返回知识库</a>
<h1>沈阳顺义数据项目建设方案解读报告</h1>
</div>
<div class="layout">
<nav class="sidebar" id="sidebar">
<div class="sidebar-title">目录</div>
<a href="#项目概述">1. 项目概述</a>
<a href="#实际建设内容拆解">2. 实际建设内容拆解</a>
<a href="#新增需求详细分析">3. 新增需求详细分析</a>
<a href="#审查意见与修改分析">4. 审查意见与修改分析</a>
<a href="#交叉点与新增点识别">5. 交叉点与新增点识别</a>
<a href="#技术栈与关键指标总览">6. 技术栈与关键指标总览</a>
<a href="#总结与后续建议">7. 总结与后续建议</a>
</nav>
</div>
<div class="container">
<div class="main-content">
<!-- 概述 -->
<div class="section">
<h2>1. 项目概述</h2>
<h2 id="项目概述">1. 项目概述</h2>
<p>
<span class="badge badge-pink">深度分析</span>
<span class="badge badge-blue">工程指南</span>
@@ -110,7 +153,7 @@ code { font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace; font
<!-- 实际建设内容 -->
<div class="section">
<h2>2. 实际建设内容拆解</h2>
<h2 id="实际建设内容拆解">2. 实际建设内容拆解</h2>
<p>方案包含 <strong>两大交付物</strong></p>
<div class="grid-2">
@@ -177,7 +220,7 @@ code { font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace; font
<!-- 新增需求分析 -->
<div class="section">
<h2>3. 新增需求详细分析</h2>
<h2 id="新增需求详细分析">3. 新增需求详细分析</h2>
<h3>3.1 任务组成(新增需求文件明确)</h3>
<div class="note">
@@ -235,7 +278,7 @@ code { font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace; font
<!-- 审查意见与修改 -->
<div class="section">
<h2>4. 审查意见与修改分析</h2>
<h2 id="审查意见与修改分析">4. 审查意见与修改分析</h2>
<p>V1 建设方案文档中包含 <strong>20+ 条审查意见</strong>(标注为 <code>[ 1:...][已修改]</code> 格式),以下是关键意见分类分析:</p>
<h3>4.1 结构性修改意见</h3>
@@ -276,7 +319,7 @@ code { font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace; font
<!-- 交叉点与新增点 -->
<div class="section">
<h2>5. 交叉点与新增点识别</h2>
<h2 id="交叉点与新增点识别">5. 交叉点与新增点识别</h2>
<h3>5.1 交叉点(V1方案与新增需求的重叠与差异)</h3>
<table>
@@ -366,7 +409,7 @@ code { font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace; font
<!-- 技术栈与指标总览 -->
<div class="section">
<h2>6. 技术栈与关键指标总览</h2>
<h2 id="技术栈与关键指标总览">6. 技术栈与关键指标总览</h2>
<h3>6.1 完整技术栈</h3>
<div class="code-block">
@@ -420,7 +463,7 @@ code { font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace; font
<!-- 总结与建议 -->
<div class="section">
<h2>7. 总结与后续建议</h2>
<h2 id="总结与后续建议">7. 总结与后续建议</h2>
<h3>7.1 方案整体评价</h3>
<p>V1 建设方案在<strong>数据接入、存储、服务、微服务架构、国产化适配</strong>等方面已有较完整的设计,审查意见大部分已修改到位。核心问题在于:</p>
@@ -448,5 +491,7 @@ code { font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace; font
</div>
</div>
</body>
</html>