From bf8b125f3b68f6d677ca37ef7460aae0e72015ab Mon Sep 17 00:00:00 2001 From: unknown Date: Sat, 11 Jul 2026 18:57:41 +0800 Subject: [PATCH] feat(frontend): restore Zibll-like global search panel Render full search overlay with types/history/suggestions for tabbar and desktop header toggle. Open panel on all viewports (not mobile-only) and wire data-toggle-class/.navbar-search compatibility hooks. --- assets/css/frontend/footer/part-3.css | 41 ++++++++ assets/js/core/search.js | 66 +++++++++--- footer.php | 8 ++ header.php | 18 +++- templates/parts/search-panel.php | 144 ++++++++++++++++++++++++++ 5 files changed, 257 insertions(+), 20 deletions(-) create mode 100644 templates/parts/search-panel.php diff --git a/assets/css/frontend/footer/part-3.css b/assets/css/frontend/footer/part-3.css index c47fcc3f..1a197b7f 100644 --- a/assets/css/frontend/footer/part-3.css +++ b/assets/css/frontend/footer/part-3.css @@ -301,3 +301,44 @@ html.dark .footer-tabbar { .site-footer--compact .site-footer__brand { flex: 1 1 100%; } + + +/* Full-viewport search panel open state (desktop + mobile) */ +.tabbar-search-overlay[hidden] { + display: none !important; +} +.tabbar-search-overlay.is-open, +.tabbar-search-overlay.show:not([hidden]) { + display: flex; +} +.tabbar-search-overlay__dialog { + max-width: 720px; + margin: 0 auto; +} +@media (min-width: 768px) { + .tabbar-search-overlay { + align-items: flex-start; + padding-top: 8vh; + background: rgba(15, 23, 42, 0.45); + } + .tabbar-search-overlay__dialog { + min-height: auto; + max-height: min(84vh, 860px); + overflow: auto; + border-radius: 20px; + box-shadow: var(--shadow-lg, 0 20px 50px rgba(15, 23, 42, 0.22)); + } + .nav-searchbox--desktop { + display: none; + } + .main-search-btn.nav-search-toggle { + display: inline-flex; + align-items: center; + justify-content: center; + } +} +@media (max-width: 767.98px) { + .main-search-btn.nav-search-toggle { + display: none; + } +} diff --git a/assets/js/core/search.js b/assets/js/core/search.js index bd457c21..1d742aeb 100644 --- a/assets/js/core/search.js +++ b/assets/js/core/search.js @@ -248,24 +248,33 @@ }, 180); } - function isMobileSearchMode() { - return window.innerWidth < 768 && !!mobileOverlay; - } - function setOpen(open) { - if (isMobileSearchMode()) { - if (open) { - mobileOverlay.removeAttribute("hidden"); - document.body.classList.add("tabbar-search-open"); - if (mobileInput) mobileInput.focus(); - if (historyEnabled) renderHistory(); - if (suggestionsEnabled) requestSuggestions(); - } else { - mobileOverlay.setAttribute("hidden", ""); - document.body.classList.remove("tabbar-search-open"); - if (suggestionsSection) suggestionsSection.hidden = true; + if (!mobileOverlay) return; + var toggles = document.querySelectorAll(".main-search-btn, .nav-search-toggle, [data-aksrt-open-search]"); + if (open) { + mobileOverlay.removeAttribute("hidden"); + mobileOverlay.setAttribute("aria-hidden", "false"); + mobileOverlay.classList.add("is-open", "show"); + document.body.classList.add("tabbar-search-open"); + if (mobileInput) { + try { mobileInput.focus(); } catch (e) {} } - return; + if (historyEnabled) { + if (aksrtData.isLoggedIn) { + requestHistorySync("get", null, function (items) { renderHistory(items); }); + } else { + renderHistory(); + } + } + if (suggestionsEnabled) requestSuggestions(); + toggles.forEach(function (btn) { btn.setAttribute("aria-expanded", "true"); }); + } else { + mobileOverlay.setAttribute("hidden", ""); + mobileOverlay.setAttribute("aria-hidden", "true"); + mobileOverlay.classList.remove("is-open", "show"); + document.body.classList.remove("tabbar-search-open"); + if (suggestionsSection) suggestionsSection.hidden = true; + toggles.forEach(function (btn) { btn.setAttribute("aria-expanded", "false"); }); } } @@ -280,6 +289,22 @@ }); } + document.querySelectorAll(".main-search-btn, .nav-search-toggle, [data-aksrt-open-search]").forEach(function (btn) { + btn.addEventListener("click", function (e) { + e.preventDefault(); + setOpen(true); + }); + }); + + // Zibll-compatible data-toggle-class for .navbar-search + document.addEventListener("click", function (e) { + var toggle = e.target.closest('[data-toggle-class][data-target=".navbar-search"], [data-toggle-class][data-target=".main-search"]'); + if (!toggle) return; + e.preventDefault(); + var isOpen = mobileOverlay && !mobileOverlay.hasAttribute("hidden"); + setOpen(!isOpen); + }); + if (historyClear) { historyClear.addEventListener("click", function () { if (aksrtData.isLoggedIn) { @@ -317,6 +342,13 @@ }); }); + // Panel type buttons should also sync desktop/drawer forms + document.querySelectorAll("#tabbar-search-types [data-search-type], [data-aksrt-search-form] [data-search-type]").forEach(function (button) { + button.addEventListener("click", function () { + setSearchType(button.getAttribute("data-search-type") || "post"); + }); + }); + if (mobileInput) { mobileInput.addEventListener("input", requestSuggestions); } @@ -351,7 +383,7 @@ } document.addEventListener("keydown", function (e) { - if (e.key === "Escape" && isMobileSearchMode() && mobileOverlay && !mobileOverlay.hasAttribute("hidden")) { + if (e.key === "Escape" && mobileOverlay && !mobileOverlay.hasAttribute("hidden")) { setOpen(false); } }); diff --git a/footer.php b/footer.php index 2ae0e109..4c38c4ea 100644 --- a/footer.php +++ b/footer.php @@ -459,6 +459,14 @@ if ($floating_enabled) : + +
diff --git a/header.php b/header.php index 9e35591b..12706849 100644 --- a/header.php +++ b/header.php @@ -218,8 +218,20 @@ if (!empty($aksrt_bg_styles)) {
- - -
+
diff --git a/templates/parts/search-panel.php b/templates/parts/search-panel.php new file mode 100644 index 00000000..401f8035 --- /dev/null +++ b/templates/parts/search-panel.php @@ -0,0 +1,144 @@ + 'post', + 'types' => ['post' => __('文章', 'aksrt')], + 'category_id' => 0, + 'category_enabled' => false, + 'categories' => [], + ]; + +$search_type = (string) ($search_state['type'] ?? 'post'); +$search_type_options = is_array($search_state['types'] ?? null) ? $search_state['types'] : ['post' => __('文章', 'aksrt')]; +$search_category_enabled = !empty($search_state['category_enabled']); +$search_category_id = (int) ($search_state['category_id'] ?? 0); +$search_categories = is_array($search_state['categories'] ?? null) ? $search_state['categories'] : []; +$search_placeholder = function_exists('aksrt_get_search_placeholder') ? aksrt_get_search_placeholder() : __('开启精彩搜索', 'aksrt'); +$search_hot_keywords = function_exists('aksrt_get_search_hot_keywords') ? aksrt_get_search_hot_keywords() : []; +$history_enabled = function_exists('aksrt_search_history_enabled') ? aksrt_search_history_enabled() : true; +$suggestions_enabled = function_exists('aksrt_search_suggestions_enabled') ? aksrt_search_suggestions_enabled() : false; +$popular_title = class_exists('AKSRT_Settings') ? AKSRT_Settings::search_popular_title() : __('热门搜索', 'aksrt'); +?> +