From 470b6ad77660655c33534cf005828dc90719a197 Mon Sep 17 00:00:00 2001
From: klarkxy <278370456@qq.com>
Date: Fri, 10 Apr 2026 18:16:03 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E6=B7=BB=E5=8A=A0=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3=E6=A0=87=E9=A2=98=E8=A7=84=E8=8C=83=E5=8C=96=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E5=92=8C=E4=BC=98=E5=8C=96=E6=96=87=E6=A1=A3=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/doc/4.0 流程图的画法与读法.md | 760 ++++++++++++++++++++++++++++++
 web/docs.php                      |  13 +
 web/template/syzoj/docs.php       |   9 +-
 3 files changed, 780 insertions(+), 2 deletions(-)
 create mode 100644 web/doc/4.0 流程图的画法与读法.md

diff --git a/web/doc/4.0 流程图的画法与读法.md b/web/doc/4.0 流程图的画法与读法.md
new file mode 100644
index 0000000..889a75a
--- /dev/null
+++ b/web/doc/4.0 流程图的画法与读法.md	
@@ -0,0 +1,760 @@
+# 4.0 流程图的画法与读法
+
+---
+
+## 一、这一节要学什么？
+
+这一节不讲编程语法，也不讲电脑里怎么画图。
+
+这一节只做两件事：
+
+- 学会读懂别人已经画好的流程图；
+- 学会把自己的做题步骤，手绘成一张清楚的流程图。
+
+很多同学觉得流程图“好像会看一点”，但真到题目里，还是容易出现这些问题：
+
+- 看着箭头走着走着就乱了；
+- 判断框只看条件，不看“是”和“否”分别去哪；
+- 一碰到循环就分不清到底什么时候停；
+- 自己画图时，框倒是画了不少，但别人根本看不懂。
+
+所以这节课的目标很明确：
+
+> 看到一张流程图，能按顺序说出它每一步在做什么；
+> 想好一道题的做法，能把它画成一张条理清楚的手绘流程图。
+
+只要这两件事学会了，后面的模拟题、分支题、循环题都会更容易做对。
+
+---
+
+## 二、先把流程图想成“做事路线图”
+
+流程图不是图画比赛，它最重要的作用只有一个：
+
+> 把“做题步骤”按执行顺序画出来。
+
+你可以把它想成一张路线图。
+
+- 框，表示“现在这一步要做什么”；
+- 箭头，表示“下一步走到哪里去”。
+
+所以读流程图时，最关键的不是“这个图形漂不漂亮”，而是：
+
+- 现在在哪一步；
+- 下一步往哪里走；
+- 什么时候会换路；
+- 什么时候会回头重复；
+- 什么时候整个过程结束。
+
+只要抓住这五件事，流程图就不神秘了。
+
+---
+
+## 三、手绘流程图常见的几种图形
+
+流程图里最常见的图形不多，课堂上先记住下面这几种就够了。
+
+### 1. 开始和结束
+
+通常画成圆角框或椭圆。
+
+里面常写：
+
+- 开始
+- 结束
+
+它表示：
+
+- 从哪里出发；
+- 在哪里停止。
+
+### 2. 输入和输出
+
+通常画成平行四边形。
+
+里面常写：
+
+- 输入 n
+- 输入 a, b
+- 输出 sum
+- 输出答案
+
+它表示：
+
+- 从外面拿数据进来；
+- 把最后结果送出去。
+
+### 3. 处理步骤
+
+通常画成长方形。
+
+里面常写：
+
+- sum = 0
+- i = i + 1
+- cnt = cnt + 1
+- 把当前数加入答案
+
+它表示：
+
+- 做计算；
+- 改变量；
+- 更新状态。
+
+### 4. 判断条件
+
+通常画成菱形。
+
+里面常写：
+
+- i <= n ?
+- x == 0 ?
+- sum > 100 ?
+- 是否找到答案？
+
+它表示：
+
+- 到了一个要“分路走”的地方；
+- 条件不同，走的方向不同。
+
+### 5. 箭头
+
+箭头很重要。
+
+因为流程图真正表示顺序的，不是框，而是箭头。
+
+箭头的作用是告诉你：
+
+- 下一步去哪；
+- 是继续往下；
+- 还是回到前面重新做；
+- 还是直接结束。
+
+所以手绘时，箭头一定要方向明确，不能含糊。
+
+### 6. 一个最简单的记忆法
+
+可以记成下面四句话：
+
+- 开始结束用圆框；
+- 输入输出用斜框；
+- 处理步骤用方框；
+- 判断分路用菱形。
+
+---
+
+## 四、读流程图，先看什么，再看什么？
+
+很多同学读流程图时，喜欢盯着某个判断框反复看，结果越看越乱。
+
+更稳的方法是按顺序读。
+
+### 第 1 步：先找开始和结束
+
+先确认：
+
+- 这张图从哪里开始；
+- 最后可能从哪里结束。
+
+如果一张图连开始和结束都找不清，后面就很容易走偏。
+
+### 第 2 步：再找输入和输出
+
+要先知道：
+
+- 题目给了什么；
+- 最后要求什么。
+
+例如：
+
+- 输入一个整数 n；
+- 输入一行数；
+- 输出最大值；
+- 输出计数结果。
+
+这一点非常重要，因为它决定了你后面到底在盯哪个量。
+
+### 第 3 步：看初始化
+
+初始化就是“一开始先把变量定成什么值”。
+
+最常见的有：
+
+- sum = 0
+- cnt = 0
+- i = 1
+- best = 0
+- found = 否
+
+如果你漏看了初始化，后面很容易整张图都理解错。
+
+比如：
+
+- `sum = 0` 表示还没开始累计；
+- `cnt = 0` 表示还没数到任何东西；
+- `i = 1` 表示从第一个开始；
+- `found = 否` 表示现在还没有找到答案。
+
+### 第 4 步：遇到判断框，一定要看两条路
+
+判断框不是只看条件本身，而是要一起看：
+
+- 条件成立时去哪；
+- 条件不成立时去哪。
+
+例如看到：
+
+```text
+x == 0 ?
+```
+
+你不能只记住“它在判断 x 是不是 0”，还要看清：
+
+- 是 0 时，是不是直接结束；
+- 不是 0 时，是继续处理，还是进入下一个判断。
+
+这是读流程图最容易出错的地方。
+
+### 第 5 步：看到回头箭头，就想到“循环”
+
+只要箭头从后面又回到了前面的某个判断框，通常就说明：
+
+> 这几步要重复做。
+
+也就是说，这就是循环。
+
+例如：
+
+- 每次处理完一个数，再回去判断还有没有下一个数；
+- 每次处理完一行，再回去判断还有没有下一行。
+
+这时候你就要特别注意：
+
+- 循环变量是谁；
+- 它在哪里更新；
+- 什么时候停止。
+
+### 第 6 步：最后看有没有“提前结束”
+
+有些流程不是一定走到最下面才结束。
+
+它可能中途就停。
+
+例如：
+
+- 一旦遇到 0 就停止；
+- 一旦找到答案就停止；
+- 一旦和超过 100 就停止。
+
+这种情况一定要特别注意，因为它常常会让后面的步骤根本不执行。
+
+---
+
+## 五、读流程图时，真正要盯住什么？
+
+读流程图时，最该盯住的是“变量怎么变”。
+
+因为流程图虽然看起来是一张图，但本质上其实是：
+
+> 变量的值，顺着箭头一步一步发生变化。
+
+所以一张图里，下面这些内容尤其要留心：
+
+- sum = sum + x
+- cnt = cnt + 1
+- i = i + 1
+- best 变大
+- found 变成“是”
+
+你可以这样想：
+
+- 输入，是把数据拿进来；
+- 处理框，是在改数据；
+- 判断框，是根据数据决定下一步；
+- 箭头，是让这些变化连起来。
+
+只要你能跟住变量变化，读图就会稳很多。
+
+---
+
+## 六、读流程图最可靠的方法：拿小数据手推
+
+如果一张图你读着有点晕，不要硬看。
+
+最有效的方法就是：
+
+> 拿一组很小很小的数据，自己顺着箭头走一遍。
+
+例如有这样一个流程：
+
+- 输入 n 和一列数；
+- 从第一个数开始处理；
+- 如果当前数是 0，就结束；
+- 如果当前数是偶数，就把它的一半加入 sum；
+- 如果当前数是奇数，就把它的两倍加入 sum；
+- 每处理一个数，cnt 加 1；
+- 如果 sum 达到目标值 k，就结束；
+- 否则继续处理下一个数。
+
+设：
+
+```text
+n = 6
+k = 20
+这一列数是：5，8，3，0，9，2
+```
+
+我们就顺着流程一步一步推：
+
+| 当前数 | 怎么处理 | sum | cnt | 下一步 |
+|:---:|:---|:---:|:---:|:---|
+| 5 | 奇数，加 10 | 10 | 1 | 继续 |
+| 8 | 偶数，加 4 | 14 | 2 | 继续 |
+| 3 | 奇数，加 6 | 20 | 3 | 结束 |
+
+这时就停了。
+
+注意：
+
+- 第 4 个数确实是 0；
+- 但根本还没轮到它；
+- 因为第 3 个数处理完以后，sum 已经达到目标了。
+
+所以读图时一定要记住：
+
+> 不是图上写了什么都会执行，而是要看你顺着箭头能不能真的走到那一步。
+
+---
+
+## 七、自己手绘流程图，正确顺序是什么？
+
+很多同学画流程图时，最大的问题不是不会画框，而是：
+
+- 一边想一边乱画；
+- 画到后面才发现漏了步骤；
+- 箭头接得很乱；
+- 别人根本看不懂。
+
+最稳的办法是下面这 5 步。
+
+### 第 1 步：先把做法写成“人话步骤”
+
+不要一上来就画图。
+
+先用最普通的话，把步骤写下来。
+
+例如：
+
+1. 输入 n。
+2. 令 sum = 0，i = 1。
+3. 如果 i 大于 n，就输出 sum。
+4. 如果 i 是 3 的倍数，就把 i 加入 sum。
+5. 如果 sum 已经超过 100，就输出 sum。
+6. 否则让 i 加 1。
+7. 回到第 3 步。
+
+如果这几句话都说不顺，流程图也很难画清楚。
+
+### 第 2 步：找出图里有哪些变量
+
+一般先分成三类：
+
+- 输入变量
+- 循环变量
+- 统计结果的变量
+
+有时还会有：
+
+- 标记变量
+
+例如：
+
+- 输入变量：n
+- 循环变量：i
+- 结果变量：sum
+- 标记变量：是否找到答案
+
+先把角色分清，图就好画很多。
+
+### 第 3 步：先搭大骨架
+
+大多数流程图，骨架其实就四种：
+
+1. 顺序做下去
+2. 遇到条件分路
+3. 走完一轮再回来重复
+4. 中途直接结束
+
+所以你画图时，先不要急着填细节，先看这题属于哪几种结构拼起来。
+
+例如：
+
+- “依次看每个数”通常是循环；
+- “如果满足条件就这样，否则那样”通常是分支；
+- “找到答案就停止”通常是提前结束。
+
+### 第 4 步：每个判断框都必须有两条路
+
+这是手绘时最容易漏掉的地方。
+
+判断框只要出现，就必须想清楚：
+
+- 是，去哪；
+- 否，去哪。
+
+不能只画一条。
+
+如果只画一条，图基本就是不完整的。
+
+### 第 5 步：把回头箭头接对地方
+
+循环画错，大多数不是错在“要不要回去”，而是错在“回到哪里”。
+
+通常应该回到：
+
+- 循环条件判断框。
+
+而不是：
+
+- 回到循环体中间某一步。
+
+比如单循环通常应画成：
+
+```text
+初始化 -> 判断 -> 处理 -> 更新 -> 回到判断
+```
+
+如果把箭头接回“处理”那里，就很容易少掉下一轮该不该继续的判断。
+
+---
+
+## 八、手绘时，图应该怎么摆才清楚？
+
+就算步骤都对，如果摆放得乱，图也会很难读。
+
+下面是最实用的几个手绘习惯。
+
+### 1. 尽量从上往下画
+
+最清楚的布局通常是：
+
+- 开始在上面；
+- 结束在下面；
+- 中间顺着往下走。
+
+这样别人一眼就知道阅读方向。
+
+### 2. “是”和“否”要标清楚
+
+从判断框出来的两条路，最好直接标：
+
+- 是
+- 否
+
+或者：
+
+- 满足
+- 不满足
+
+总之不要让人猜。
+
+### 3. 一步只写一件主要的事
+
+一个框里不要塞太多句子。
+
+例如：
+
+- 好：`sum = sum + x`
+- 好：`i = i + 1`
+- 不太好：把整段说明话塞进去
+
+流程图不是作文，框里要短、准、清楚。
+
+### 4. 复杂流程要留空位
+
+如果知道后面还有分支或回边，画的时候就不要把框挤得太紧。
+
+留出位置，箭头才不会绕成一团。
+
+### 5. 双重循环要分层画
+
+例如“按行扫描，再按列扫描”时：
+
+- 外层一层是一圈；
+- 内层一层再包一圈；
+- 不要把所有箭头都挤在同一块。
+
+你可以把它想成：
+
+- 先把大圈画清；
+- 再在里面补小圈。
+
+---
+
+## 九、单循环怎么手绘？
+
+单循环是最基础的一类。
+
+它的常见骨架就是：
+
+```text
+开始
+  ↓
+输入
+  ↓
+初始化
+  ↓
+是否继续？
+  ├─ 是 → 处理当前内容 → 更新变量 → 回到“是否继续？”
+  └─ 否 → 输出 → 结束
+```
+
+如果中途还可能提前结束，那么通常会在循环体中间多一个判断：
+
+```text
+开始
+  ↓
+输入
+  ↓
+初始化
+  ↓
+是否继续？
+  ├─ 否 → 输出 → 结束
+  └─ 是 → 读当前数据
+             ↓
+           是否提前结束？
+             ├─ 是 → 输出 → 结束
+             └─ 否 → 处理 → 更新 → 回到“是否继续？”
+```
+
+这类图画顺了，很多基础题都会简单很多。
+
+---
+
+## 十、双重循环怎么手绘？
+
+双重循环是流程图里最容易乱的地方。
+
+因为这时你其实同时在处理两层“重复”。
+
+例如：
+
+- 先一行一行处理；
+- 每一行里再一个一个处理。
+
+这时你一定要分清：
+
+- 外层变量是谁；
+- 内层变量是谁；
+- 一层结束后回哪；
+- 两层都结束后回哪。
+
+一个最基本的样子可以写成：
+
+```text
+开始
+  ↓
+输入
+  ↓
+外层初始化
+  ↓
+外层是否继续？
+  ├─ 否 → 输出 → 结束
+  └─ 是 → 内层初始化
+             ↓
+           内层是否继续？
+             ├─ 否 → 外层更新 → 回到“外层是否继续？”
+             └─ 是 → 处理当前内容 → 内层更新 → 回到“内层是否继续？”
+```
+
+这张骨架图里最重要的是：
+
+- 内层结束，不代表整张图结束；
+- 内层结束之后，通常是回到外层继续；
+- 只有外层也结束了，才真正走到输出和结束。
+
+---
+
+## 十一、最容易弄混的地方：结束一层，还是结束全部？
+
+这是初学流程图时最常见的大问题。
+
+例如题目说：
+
+> 每一行从左往右看，遇到 0 就停止这一行。
+
+这句话的意思一般是：
+
+- 当前这一行后面的内容不看了；
+- 但是下一行还要继续。
+
+这只是：
+
+> 结束内层。
+
+再比如题目说：
+
+> 一旦找到答案，整个过程结束。
+
+这就表示：
+
+- 当前这一行不继续；
+- 后面的行也不继续；
+- 整张流程图直接走向输出和结束。
+
+这才是：
+
+> 结束全部。
+
+所以你读图或画图时，一定要问清楚：
+
+- 这个箭头，是退出一小层；
+- 还是退出整个过程。
+
+---
+
+## 十二、从文字步骤到手绘流程图，示范一次
+
+题目：输入一个整数 n，求 1 到 n 中所有 3 的倍数之和；如果和第一次超过 100，就立刻停止并输出。
+
+### 1. 先写做人话步骤
+
+1. 输入 n。
+2. 令 sum = 0，i = 1。
+3. 如果 i 大于 n，输出 sum。
+4. 如果 i 是 3 的倍数，就把 i 加入 sum。
+5. 如果 sum 大于 100，输出 sum。
+6. 否则让 i 加 1。
+7. 回到第 3 步。
+
+### 2. 再整理成手绘流程
+
+画图时可以按下面顺序摆：
+
+```text
+[开始]
+   ↓
+[输入 n]
+   ↓
+[sum = 0, i = 1]
+   ↓
+<i <= n ?>
+  ├─ 否 → [输出 sum] → [结束]
+  └─ 是 → <i 是 3 的倍数 ?>
+            ├─ 是 → [sum = sum + i]
+            └─ 否 → 不加
+                     ↓
+                  <sum > 100 ?>
+                    ├─ 是 → [输出 sum] → [结束]
+                    └─ 否 → [i = i + 1] → 回到 <i <= n ?>
+```
+
+从这张图里，你应该能看出三件事：
+
+1. 外面有一个循环，因为最后会回到 `i <= n ?`。
+2. 中间有一个分支，因为要判断 `i` 是不是 3 的倍数。
+3. 还有一个提前结束，因为 `sum > 100` 时不用继续往下做了。
+
+---
+
+## 十三、画流程图时最常见的错误
+
+### 1. 漏掉开始和结束
+
+有些同学上来就画处理步骤，却没写清楚从哪开始，到哪结束。
+
+这样的图不完整。
+
+### 2. 漏掉初始化
+
+例如图里有 `i <= n ?`，却没有说明 `i` 一开始是多少。
+
+别人就没法准确读图。
+
+### 3. 判断框只画一条路
+
+判断框至少应有两条路：
+
+- 是 / 否
+- 满足 / 不满足
+
+如果只画一边，基本就是漏了步骤。
+
+### 4. 忘了更新循环变量
+
+例如有 `i <= n ?`，却没有 `i = i + 1`。
+
+这样很容易变成永远转圈的图。
+
+### 5. 回边接错地方
+
+循环一轮做完以后，通常应该回到“是否继续”的判断框。
+
+如果回到了中间某一步，流程往往就变味了。
+
+### 6. 分不清结束一层和结束全部
+
+双重循环里尤其容易犯这个错。
+
+你一定要分清：
+
+- 是只停止当前这一层；
+- 还是整个流程直接停止。
+
+### 7. 一个框里塞太多内容
+
+流程图要清楚，不要把整段话都塞在同一个框里。
+
+一个框最好只写一步主要操作。
+
+### 8. 箭头方向不清楚
+
+如果别人需要猜箭头是往哪走，那这张图就已经不够清楚了。
+
+---
+
+## 十四、画完以后，怎样自查？
+
+一张流程图画完后，可以按下面这张检查单自己过一遍：
+
+1. 有没有明确的开始和结束？
+2. 输入和输出有没有写清楚？
+3. 需要的初始化有没有漏掉？
+4. 每个判断框是不是都画出了两条路？
+5. 每个循环变量有没有更新？
+6. 回头箭头是不是回到了正确的位置？
+7. 中途停止时，是停一层还是停全部，有没有画清楚？
+8. 能不能拿一组小数据，从头到尾手推一遍？
+
+只要这 8 条都能过，流程图一般就比较靠谱了。
+
+---
+
+## 十五、这一节最该记住的几句话
+
+最后把最重要的内容收成几句：
+
+1. 流程图本质上是做事步骤的路线图。
+2. 读流程图时，要顺着箭头走，不要跳着猜。
+3. 判断框不能只看条件，还要看两条路分别去哪。
+4. 箭头回到前面，通常就是循环。
+5. 中途直接走向输出或结束，通常就是提前停止。
+6. 画流程图前，先把步骤用人话写清楚。
+7. 双重循环最容易错的地方，是没有分清“结束一层”和“结束全部”。
+8. 检查流程图最可靠的方法，是拿小数据手推。
+
+---
+
+## 十六、课后练习建议
+
+如果你想真正把这节学会，建议按下面顺序练：
+
+1. 先练最基础的“顺序 + 单判断”流程图。
+2. 再练“单循环 + 中途停止”流程图。
+3. 最后练“按行按列处理”的双重循环流程图。
+
+练的时候，不要只看答案。
+
+最好自己先画，再让同学按你的图读一遍。
+
+如果别人能顺着你的图完整说出步骤，那说明你真的画清楚了。
\ No newline at end of file
diff --git a/web/docs.php b/web/docs.php
index 3ab59fd..dd9d773 100644
--- a/web/docs.php
+++ b/web/docs.php
@@ -3,6 +3,15 @@ require_once('./include/db_info.inc.php');
 require_once('./include/setlang.php');
 require_once('./include/const.inc.php');
 
+function normalize_doc_title($text) {
+    $text = trim((string)$text);
+    $text = preg_replace('/[\s\p{P}\p{S}]+/u', '', $text);
+    if (function_exists('mb_strtolower')) {
+        return mb_strtolower($text, 'UTF-8');
+    }
+    return strtolower($text);
+}
+
 $docs_dir = __DIR__ . '/doc';
 $doc_entries = array();
 
@@ -30,6 +39,7 @@ if (empty($selected_file) && !empty($doc_entries)) {
 
 $selected_title = '文档';
 $selected_markdown = '';
+$show_selected_title = true;
 
 if (!empty($selected_file)) {
     $selected_path = realpath($docs_dir . DIRECTORY_SEPARATOR . $selected_file);
@@ -49,6 +59,9 @@ if (!empty($selected_file)) {
             $selected_markdown = preg_replace('/^\xEF\xBB\xBF/', '', $selected_markdown);
         }
         $selected_title = preg_replace('/\.md$/i', '', basename($selected_path));
+        if (preg_match('/^\s*#\s+(.+)$/mu', $selected_markdown, $heading_match)) {
+            $show_selected_title = normalize_doc_title($heading_match[1]) !== normalize_doc_title($selected_title);
+        }
     }
 }
 
diff --git a/web/template/syzoj/docs.php b/web/template/syzoj/docs.php
index 3156f92..99f765a 100644
--- a/web/template/syzoj/docs.php
+++ b/web/template/syzoj/docs.php
@@ -88,6 +88,10 @@
     border-bottom: 1px solid rgba(15, 23, 42, 0.08);
   }
 
+  .docs-content-header.docs-content-header-compact {
+    justify-content: flex-end;
+  }
+
   .docs-content-header h1 {
     margin: 0;
     font-size: 1.6rem;
@@ -159,7 +163,6 @@
   <aside class="docs-sidebar">
     <div class="docs-sidebar-header">
       <h2>文档目录</h2>
-      <p>左侧选择 Markdown 文档，右侧查看渲染结果。</p>
     </div>
     <div class="docs-nav">
       <?php if (empty($doc_entries)) { ?>
@@ -178,8 +181,10 @@
   </aside>
 
   <section class="docs-content">
-    <div class="docs-content-header">
+    <div class="docs-content-header<?php if (!$show_selected_title) echo ' docs-content-header-compact'; ?>">
+      <?php if ($show_selected_title) { ?>
       <h1><?php echo htmlspecialchars($selected_title, ENT_QUOTES, 'UTF-8'); ?></h1>
+      <?php } ?>
       <span><?php echo empty($selected_file) ? '未选择文档' : htmlspecialchars($selected_file, ENT_QUOTES, 'UTF-8'); ?></span>
     </div>