3.2.27: 评论嵌套引导线按层变色（1层浅蓝/2层深蓝/3层点赞色/更深扩展色轮换，深层线恢复绘制）；导航多级下拉修复（depth=2 截断改 0，深层父项 dropdown-submenu + hover 右侧弹出，移动端平铺）

2026-10-25 09:52:07 +08:00
parent 92ffced7cf
commit 0239cbeb2a
7 changed files with 139 additions and 10 deletions
@@ -106,6 +106,37 @@ function yang_comments_plugin_active()
 *                             否则子评论会被挤到 </li> 外面（详见下方注释）
 * @return string
 */
+
+/**
+ * 嵌套引导线的按层配色（3.2.27）。
+ *
+ * $depth 是「线里装着的评论」的深度：
+ *   2 = 直接回复（第 1 层嵌套）→ 返回 ''，CSS 回落到主题浅蓝（保持现状）；
+ *   3 = 第 2 层嵌套 → 深蓝；
+ *   4 = 第 3 层嵌套 → 点赞按钮背景色（.btn-thumbs 的 #fb5235）；
+ *   5+ → 扩展色板按层循环：确定性的"随机"——同层恒同色、相邻层必异色，
+ *        页面刷新不变（真随机会让同一层的线各页各色，层级信号反而乱）。
+ *
+ * 颜色都取饱和偏深的中明度色：线上是白底，太浅的（如淡黄）贴白底看不见。
+ *
+ * @param int $depth 评论深度（最小 2，即第 1 层嵌套）
+ * @return string 颜色值；'' 表示用 CSS 默认（主题浅蓝）
+ */
+function yang_comment_guide_color($depth)
+{
+    if ($depth <= 2) {
+        return '';
+    }
+    if ($depth === 3) {
+        return '#0057b8'; // 深蓝：与浅蓝同色相，明度拉开
+    }
+    if ($depth === 4) {
+        return '#fb5235'; // 点赞按钮（.btn-thumbs）的背景/描边色
+    }
+    $pool = array('#7c4dff', '#00a77a', '#e91e63', '#f59e0b', '#5b8def', '#8bc34a');
+    return $pool[($depth - 5) % count($pool)];
+}
+
 function yang_comment_html($comment, $args = array(), $depth = 1, $is_ajax = false, $close_li = true)
 {
    if (!($comment instanceof WP_Comment)) {
@@ -151,9 +182,22 @@ function yang_comment_html($comment, $args = array(), $depth = 1, $is_ajax = fal
    }

    $o = array();
+    /* 嵌套引导线按层配色（3.2.27）：
+       线画在子容器 ol.yang-children 的 ::before 上，颜色从 --yq-guide-c 取。
+       给本 li 注入的值 = 「本条的直接回复那一层」该用的颜色：
+         第 1 层嵌套（直接回复）→ 不注入，CSS 回落到主题浅蓝（保持现状）；
+         第 2 层 → 深蓝；第 3 层 → 点赞按钮背景色 #fb5235；
+         更深 → 扩展色板按层循环（确定性的"随机"，同层同色、跨层异色）。
+       自定义属性沿 DOM 继承：内层 li 自己注入的值会覆盖继承值，
+       所以每个 ol 读到的都是离它最近的那个父 li 注入的颜色。 */
+    $guide_c = yang_comment_guide_color($depth + 1);
+    $style_attr = '';
+    if ($guide_c !== '') {
+        $style_attr = ' style="--yq-guide-c:' . esc_attr($guide_c) . ';"';
+    }
    $o[] = '<li id="comment-' . $comment_id . '" class="' . esc_attr(implode(' ', $classes)) . '"'
         . ' data-comment-id="' . $comment_id . '"'
-         . ' data-depth="' . $depth . '">';
+         . ' data-depth="' . $depth . '"' . $style_attr . '>';

    // ── 头像列 ──
    $o[] = '<div class="yang-comment-avatar">';
@@ -184,7 +184,14 @@ if (!class_exists('WP_Bootstrap_Navwalker')) {
            $id = $id ? ' id="' . esc_attr($id) . '"' : '';

            if ($args->has_children) {
-                $output .= $indent . '<li' . $id . ' class="nav-item dropdown" ' . '>';
+                /* 3.2.27：深层（第二级起）的父项加 dropdown-submenu ——
+                   Bootstrap 4 原生不支持嵌套下拉，主题用这个类 + CSS
+                   （hover 时子菜单 left:100% 从右侧弹出）补上。 */
+                if (0 === $depth) {
+                    $output .= $indent . '<li' . $id . ' class="nav-item dropdown" ' . '>';
+                } else {
+                    $output .= $indent . '<li' . $id . ' class="nav-item dropdown dropdown-submenu" ' . '>';
+                }
            } else {
                $output .= $indent . '<li' . $id . ' class="nav-item" ' . '>';
            }
@@ -205,13 +212,24 @@ if (!class_exists('WP_Bootstrap_Navwalker')) {
            $atts['target'] = !empty($item->target) ? $item->target : '';
            $atts['rel'] = !empty($item->xfn) ? $item->xfn : '';
            // If the item has children, add atts to the <a>.
-            if (isset($args->has_children) && $args->has_children && 0 === $depth && $args->depth > 1) {
+            // 3.2.27：$args->depth > 1 → !== 1。原来 depth=0（不限层数）时
+            // 这个条件为假，顶层父项会失去 data-toggle，一级下拉都开不了。
+            // depth===1 表示"菜单只要一层"，那才真的不该有下拉。
+            if (isset($args->has_children) && $args->has_children && 0 === $depth && $args->depth !== 1) {
                $atts['href'] = '#';
                $atts['data-toggle'] = 'dropdown';
                $atts['aria-haspopup'] = 'true';
                $atts['aria-expanded'] = 'false';
                $atts['class'] = 'dropdown-toggle nav-link';
                $atts['id'] = 'menu-item-dropdown-' . $item->ID;
+            } elseif (isset($args->has_children) && $args->has_children && $depth > 0) {
+                /* 3.2.27：深层父项 —— 保留真实链接（点它进分类页），
+                   只补 dropdown-toggle 让箭头出现；**不加 data-toggle**，
+                   开合交给 CSS hover（.dropdown-submenu:hover > .dropdown-menu），
+                   避免 Bootstrap 的 dropdown JS 用 Popper 把子菜单位置
+                   重算到父项下方、和"从右侧弹出"打架。 */
+                $atts['href'] = !empty($item->url) ? $item->url : '#';
+                $atts['class'] = 'dropdown-item dropdown-toggle';
            } else {
                $atts['href'] = !empty($item->url) ? $item->url : '#';
                // For items in dropdowns use .dropdown-item instead of .nav-link.