From 0010ac5ed5c71dea2b33409efdced38839d5c507 Mon Sep 17 00:00:00 2001 From: peijunlei Date: Fri, 4 Sep 2026 18:40:14 +0800 Subject: [PATCH] feat(mask): enhance expandable mask navigation with subitem support and styling adjustments --- public/themes/dist_static/static/css/common.css | 14 ++- public/themes/dist_static/static/js/common.js | 6 +- .../themes/website/1/zh/demo/components/mask.html | 100 ++++++++++++++++++++- 3 files changed, 114 insertions(+), 6 deletions(-) diff --git a/public/themes/dist_static/static/css/common.css b/public/themes/dist_static/static/css/common.css index 541d532..8e51eca 100644 --- a/public/themes/dist_static/static/css/common.css +++ b/public/themes/dist_static/static/css/common.css @@ -1997,7 +1997,7 @@ body { height: 1rem; flex-shrink: 0; transition: transform var(--duration-normal) var(--easing); -}.mask-nav__item--expandable[data-expanded="true"] .mask-nav__icon { +}.mask-nav__item--expandable[data-expanded="true"] > .mask-nav__link .mask-nav__icon { transform: rotate(45deg); }/* ── 子菜单列表（grid 展开动画） ── */.mask-nav__sublist-wrapper { display: grid; @@ -2007,8 +2007,11 @@ body { }.mask-nav__sublist { overflow: hidden; min-height: 0; -}.mask-nav__item[data-expanded="true"] .mask-nav__sublist-wrapper { +}.mask-nav__item[data-expanded="true"] > .mask-nav__sublist-wrapper, +.mask-nav__subitem--expandable[data-expanded="true"] > .mask-nav__sublist-wrapper { grid-template-rows: 1fr; +}.mask-nav__subitem--expandable[data-expanded="true"] > .mask-nav__sublink .mask-nav__icon { + transform: rotate(45deg); }.mask-nav__subitem { border-bottom: 1px solid rgba(223, 224, 226, 1); }.mask-nav__subitem:last-child { @@ -2017,18 +2020,25 @@ body { display: flex; align-items: center; justify-content: space-between; + width: 100%; padding: 16Px 0; + border: none; + background: transparent; font-family: "MiSans VF", "PingFang SC", sans-serif; font-size: 14Px; font-weight: 400; line-height: var(--font-18); color: var(--color-text-muted); text-decoration: none; + cursor: pointer; + text-align: left; transition: color var(--duration-fast) var(--easing); &:hover { color: var(--color-primary); } +}.mask-nav__sublist--l2 .mask-nav__sublink { + padding-left: 1rem; }/* ── 子菜单箭头 > ── */.mask-nav__arrow { width: 1rem; height: 1rem; diff --git a/public/themes/dist_static/static/js/common.js b/public/themes/dist_static/static/js/common.js index 8d498df..bb7bafc 100644 --- a/public/themes/dist_static/static/js/common.js +++ b/public/themes/dist_static/static/js/common.js @@ -97,10 +97,10 @@ $(function() { setMaskOpenUi(false); }); $(".mask-nav__toggle").on("click", function() { - const $item = $(this).closest(".mask-nav__item--expandable"); + const $item = $(this).closest(".mask-nav__item--expandable, .mask-nav__subitem--expandable"); const isExpanded = $item.attr("data-expanded") === "true"; - $item.attr("data-expanded", !isExpanded); - $(this).attr("aria-expanded", !isExpanded); + $item.attr("data-expanded", String(!isExpanded)); + $(this).attr("aria-expanded", String(!isExpanded)); }); // $(".section-contact-form").on("submit", function(e) { // e.preventDefault(); diff --git a/public/themes/website/1/zh/demo/components/mask.html b/public/themes/website/1/zh/demo/components/mask.html index 8a8635c..b2251bb 100644 --- a/public/themes/website/1/zh/demo/components/mask.html +++ b/public/themes/website/1/zh/demo/components/mask.html @@ -46,9 +46,107 @@ {php} $mask_title = $vo['title'] ?? ''; $mask_href = $vo['href'] ?? ''; + $mask_cid = (int)($vo['category_id'] ?? 0); $mask_children = $vo['children'] ?? []; + $mask_is_solution = ($mask_cid === 345); {/php} - {if condition="!empty($mask_children)"} + {if $mask_is_solution} + +
  • + +
    +
      + {hcTaglib:allSubCategory pid="345" item="sol" sort=""} + {php} + $sol_children = $sol['children'] ?? []; + $sol_has_children = !empty($sol_children); + $sol_href = $sol['alias'] ?? ''; + {/php} + {if $sol_has_children} +
    • + +
      + +
      +
      • + {else /} +
    • + + {$sol.title} + + +
      • + {/if} + {/hcTaglib:allSubCategory} +
    +
    +
    • + {elseif condition="!empty($mask_children)" /}