分类挂件下拉面板列出全部层级并缩进 #24

需求（2026-10-27）：把多级目录也放进去，现在只显示第一级，把其他的
也放进去，注意缩进。线上实测 29 个分类（8 一级 + 21 二级，无第三层），
因此面板从「只列一级」改成「有几层列几层」。

inc/theme-widgets.php
- get_tree() 从写死两层改成任意深度递归。带 $seen 已访问集合 +
  $max_depth=10 双重保护：parent 成环时只跳过、不抛异常 —— 侧栏
  挂件白屏会把整站带下去，宁可少显示一条也不能崩。
- 排序递归到所有层（原来只排前两层，第三层往后顺序与「按文章数排」不一致）。
- 新增 find_name()：触发条文案与面板渲染共用同一套遍历。原来两段各自
  硬编码两层，层数一变必漏一处。
- 新增 render_level()：widget() 面板改成单次递归调用。关闭 children
  时把 children 清空交给同一函数，不另写一份循环 —— 两份循环必然漂移。
- 下一层 <ul> 放在本层 li 内部（HTML 里 ul 的直接子元素只能是 li）。
- children 兜底值 false → true，**两处**（widget 第 1501 行、form 第
  1701 行）。线上实例 categories-3 没有这个键 ⇒ 走兜底 ⇒ 用户零操作生效。

assets/css/kratos.css
- .yang-cats-item 加 flex-wrap:wrap；子级 ul 用 flex:0 0 100% 独占
  一整行，落在父级 li 的内容盒里 ⇒ 缩进逐层累加且所有层共用一个右边界。
- 缩进只由子级 li 的 padding-left 给，**子级 ul 的 padding-left 归零**。
  第一版两处都给了 12px，几何实测每层缩进 24px（stepPx=[24,24,18]），
  第 3 层名字只剩 148px，收敛规则也一起失效。
- 第 4 层起收缩到 6px（[style*="--cat-d:3"] 起），避免深层吃光面板宽度。
- 每层 padding-right 一律 0，右侧 12px 只由顶层统一给 ⇒ 任意深度的
  数字右沿都在同一竖线（数字要竖着比大小，错开一列就没法比）。

assets/css/kratos.min.css 重新压缩；style.css 版本号 → 3.2.56。

验证
- 端到端（真实 WordPress）：120 通过 / 0 失败；旧代码 100 / 17
- 反证 20 组（R1~R19 + R13b）全部命中
- 视觉几何（线上真实页面）：56 通过 / 0 失败
- 打包内容自检 26 项全过；发布判据 79 条全过
- 发布：update.json → 3.2.56，md5 0aa90b30e76d754de41febcb9271ddef
- 红线：服务器主题目录仍 3.2.55（未覆盖），等用户在后台点升级

assets/css/kratos.css

@@ -2250,6 +2250,15 @@ button:focus {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  /* 🔴 flex-wrap 是 3.2.56 支撑"任意层级"的关键：
+   *
+   *    有子级的 li 里除了 <a> + <span>，还多一个直接子元素
+   *    `<ul class="yang-cats-children">`。默认 nowrap 时它会挤进同一行，
+   *    把名字和数字挤扁；
+   *    这里允许换行，再让子级 ul `flex: 0 0 100%` 独占整行
+   *    ⇒ 子级自然落到父级名字下面，且**父级 li 的 padding-left
+   *      就成了下一层的缩进基准**（嵌套在内容盒里，缩进逐层累加）。 */
+  flex-wrap: wrap;
   margin-bottom: 0;
   padding: 0;
   list-style: none;
@@ -2305,34 +2314,73 @@ button:focus {
   color: #00a2ff;
 }
 
-/* ── 子分类（可选，默认关）──────────────────────────────────────────────
+/* ── 子分类：任意层级（3.2.56 从"只有两层"改成"有几层列几层"）──────────
  *
- * 缩进 + 字号轻一档。不加竖线：3.2.54 加过，但那是"常显树"的视觉语言；
- * 在浮层面板里加竖线会让本就不宽的面板更挤，缩进已经足够表达层级。 */
+ * 🔴 结构（每层都一样，嵌套在父级 li 内部）：
+ *
+ *     <ul class="yang-cats-list">
+ *       <li class="yang-cats-item">
+ *         <a/><span/>
+ *         <ul class="yang-cats-children">
+ *           <li class="yang-cats-item"> <a/><span/> … </li>
+ *         </ul>
+ *       </li>
+ *     </ul>
+ *
+ * 🔴 缩进与对齐是怎么同时成立的（这里的算式必须写清楚，改坏很难查）：
+ *
+ *     · 子级 ul 是 li 的 flex 子项，`flex: 0 0 100%` ⇒ 独占一行。
+ *     · 因嵌套在 li 的**内容盒**里，所有层共用一个右边界；
+ *     · 每层 li 只给 **padding-left**（缩进），**padding-right 一律 0**，
+ *       右侧内边距由最外层的 `.yang-cats-list > .yang-cats-item` 统一给 12px。
+ *
+ *     ⇒ 任意深度的数字右沿都在同一竖线上（数字要竖着比大小）。
+ *       3.2.55 就是子级又写了一遍 padding-right，叠成 24px、父子错开 12px。
+ *
+ * 🔴 缩进量取 12px/层：面板 250px 宽，减去右侧 12px、数字胶囊约 34px、
+ *    名字与数字间 8px，留给名字约 196px。三级时名字还剩 172px，
+ *    中文 15px 字号约能放 11 个字 —— 够用。到四五级会明显挤，
+ *    所以 CSS 里对超深层的缩进做了收敛（见下面的 `--cat-d` 规则）。
+ *
+ * 🔴🔴 缩进只能由一个地方给，不能 ul 和 li 各给一次（3.2.56 实测踩过）：
+ *    第一版 `.yang-cats-children { padding-left: 12px }` 加
+ *    `.yang-cats-children > .yang-cats-item { padding-left: 12px }`
+ *    ⇒ 每层实际缩进 **24px**，几何实测 stepPx=[24,24,18]，
+ *      第 3 层名字就只剩 148px，比设计预期少一半。
+ *    收敛规则也一起失效（12+6=18，看着像没收敛）。
+ *    ⇒ **子级 ul 的 padding-left 归零，缩进全部由子级 li 的 padding-left 给。**
+ *      这样一个数字管一件事，收敛规则也能精确生效。 */
 .w-cats .yang-cats-children {
-  /* 子级整段缩进 12px，与父级名字错开一档 */
-  padding: 0 0 6px 12px;
+  /* 独占一整行：父级名字在上，子级列表在下 */
+  flex: 0 0 100%;
+  width: 100%;
+  margin: 0;
+  /* 🔴 padding-left 必须 0：缩进由子级 li 独立给，两处都加会翻倍 */
+  padding: 0;
   background-color: #fcfcfc;
 }
 
-/* 🔴 子级 li 的**右侧**内边距必须是 0，不能跟着父级写 12px。
- *
- *    这是 3.2.55 几何实测抓出来的真缺陷（不是量法问题）：
- *
- *        父级数字右边界距面板内沿  12px
- *        子级数字右边界距面板内沿  24px   ← 多出整整 12px
- *
- *    原因：子级 `<ul>` 嵌在父级 `<li>` 里，而父级 li 已经有
- *    `padding: 0 12px`，那 12px 已经把子级 ul 的右边界推进去了；
- *    子级 li 再写一次 12px ⇒ 叠加成 24px。
- *
- *    后果很直观：**数字排不成一列**。面板里父级数字靠右、
- *    子级数字齐刷刷往左缩 12px，看着像两家不同的列表拼在一起。
- *    分类数字是要竖着比的（哪个分类文章多），错开一列就没法比。
- *
- *    ⇒ 子级只留左缩进（由 ul 的 padding-left 提供），右侧归零。 */
+/* 每层子级 li：只留左缩进，右侧归零（右侧由最外层统一给 12px） */
 .w-cats .yang-cats-children > .yang-cats-item {
-  padding: 0;
+  padding: 0 0 0 12px;
+}
+
+/* 🔴 第 4 层起缩进收敛：再往下每层只加 6px。
+ *
+ *    理由：面板宽度固定，缩进按 12px 线性累加的话，
+ *    第 5 层只剩 130px 出头，中文名字挤成两三个字一行，反而更难读。
+ *    分层收敛让深层"还能看出层级"但不至于把空间吃光。
+ *
+ *    用 `--cat-d`（渲染时写的真实深度）选层级，而不是靠选择器数嵌套层数 ——
+ *    后者写死了就只能支持固定层数，又回到 3.2.55 的老问题。 */
+.w-cats .yang-cats-children > .yang-cats-item[style*="--cat-d:3"],
+.w-cats .yang-cats-children > .yang-cats-item[style*="--cat-d:4"],
+.w-cats .yang-cats-children > .yang-cats-item[style*="--cat-d:5"],
+.w-cats .yang-cats-children > .yang-cats-item[style*="--cat-d:6"],
+.w-cats .yang-cats-children > .yang-cats-item[style*="--cat-d:7"],
+.w-cats .yang-cats-children > .yang-cats-item[style*="--cat-d:8"],
+.w-cats .yang-cats-children > .yang-cats-item[style*="--cat-d:9"] {
+  padding-left: 6px;
 }
 
 .w-cats .yang-cats-children > .yang-cats-item > .yang-cats-link {
@@ -2345,6 +2393,11 @@ button:focus {
   word-wrap: break-word;
 }
 
+/* 更深层再浅一档颜色：三级往下继续淡化，层级更明确（不影响可读性） */
+.w-cats .yang-cats-children .yang-cats-children > .yang-cats-item > .yang-cats-link {
+  color: #8f8f8f;
+}
+
 .w-cats .yang-cats-children > .yang-cats-item > .yang-cats-link:hover {
   color: #00a2ff;
 }