feat(search): 搜索页调整tab

public/themes/dist_static/static/js/search.js

@@ -1,13 +1,43 @@
 import "./common.js";
 import "./pagination.js";
 //#region js/search.js
+function matchItem($item, type) {
+	const itemType = $item.attr("data-type") || "";
+	return type === "all" || itemType === type;
+}
+function updateCounts($items) {
+	["all", "product", "solution", "news", "faq"].forEach((type) => {
+		const count = $items.filter((_, el) => matchItem($(el), type)).length;
+		$(`[data-count="${type}"]`).text(String(count));
+	});
+}
+function applyFilter() {
+	const type = $(".sr-tabs__item.is-active").attr("data-type") || "all";
+	const $items = $(".sr-item");
+	let visible = 0;
+	$items.each(function() {
+		const show = matchItem($(this), type);
+		this.hidden = !show;
+		if (show) visible += 1;
+	});
+	updateCounts($items);
+	const $empty = $(".sr-tabs-empty");
+	if ($empty.length) $empty.prop("hidden", visible > 0 || !$items.length);
+}
 $(function() {
 	const q = new URLSearchParams(window.location.search).get("q")?.trim() || "";
 	if (q) $(".sr-search .s-search__input").val(q);
+	$(".sr-tabs__item").on("click", function() {
+		const $btn = $(this);
+		$btn.addClass("is-active").attr("aria-selected", "true");
+		$btn.siblings(".sr-tabs__item").removeClass("is-active").attr("aria-selected", "false");
+		applyFilter();
+	});
 	$(".sr-hot__tag").on("click", function() {
 		const keyword = $(this).attr("data-keyword") || $(this).text().trim();
 		$(".sr-search .s-search__input").val(keyword);
 		$(".sr-search").trigger("submit");
 	});
+	if ($(".sr-tabs").length) applyFilter();
 });
 //#endregion

public/themes/website/1/zh/demo/search.html

@@ -85,6 +85,24 @@ dd('此页面废弃');
         </div>
       </div>
 
+      <div class="sr-tabs" role="tablist" aria-label="结果分类">
+        <button type="button" class="sr-tabs__item is-active" role="tab" aria-selected="true" data-type="all">
+          全部 ( <span data-count="all">0</span> )
+        </button>
+        <button type="button" class="sr-tabs__item" role="tab" aria-selected="false" data-type="product">
+          产品 ( <span data-count="product">0</span> )
+        </button>
+        <button type="button" class="sr-tabs__item" role="tab" aria-selected="false" data-type="solution">
+          解决方案 ( <span data-count="solution">0</span> )
+        </button>
+        <button type="button" class="sr-tabs__item" role="tab" aria-selected="false" data-type="news">
+          新闻 ( <span data-count="news">0</span> )
+        </button>
+        <button type="button" class="sr-tabs__item" role="tab" aria-selected="false" data-type="faq">
+          常见问题 ( <span data-count="faq">0</span> )
+        </button>
+      </div>
+
       <div class="sr-list">
         {volist name="list" id="vo"}
         {php}
@@ -96,8 +114,19 @@ dd('此页面废弃');
           $sr_cid = $vo['category_id'] ?? ($vo['category'][0]['id'] ?? 0);
           $sr_thumb = is_array($vo['thumbnail'] ?? null) ? ($vo['thumbnail']['url'] ?? '') : '';
           $sr_url = hcUrl('detail/index', ['id' => $vo['id'], 'cid' => $sr_cid]);
+          $sr_cate_title = $vo['category'][0]['title'] ?? '';
+          $sr_type = 'other';
+          if (mb_strpos($sr_cate_title, '产品') !== false) {
+            $sr_type = 'product';
+          } elseif (mb_strpos($sr_cate_title, '解决方案') !== false || mb_strpos($sr_cate_title, '方案') !== false) {
+            $sr_type = 'solution';
+          } elseif (mb_strpos($sr_cate_title, '新闻') !== false) {
+            $sr_type = 'news';
+          } elseif (mb_strpos($sr_cate_title, '常见问题') !== false || mb_strpos($sr_cate_title, 'FAQ') !== false || mb_strpos($sr_cate_title, '问题') !== false) {
+            $sr_type = 'faq';
+          }
         {/php}
-        <article class="sr-item" data-keywords="{$vo.title}">
+        <article class="sr-item" data-type="{$sr_type}" data-keywords="{$vo.title}">
           <a class="sr-item__media" href="{$sr_url}">
             <img src="{$sr_thumb}" alt="" width="300" height="200" loading="lazy" />
           </a>
@@ -127,6 +156,10 @@ dd('此页面废弃');
         {/volist}
       </div>
 
+      <div class="s-empty sr-tabs-empty" hidden>
+        <p class="s-empty__text">当前分类下暂无结果</p>
+      </div>
+
       {php}
       $list_empty = isHcListEmpty($list ?? null);
       if ($list_empty) {

public/themes/website/1/zh/demo/single_search.html

@@ -86,6 +86,24 @@
         </div>
       </div>
 
+      <div class="sr-tabs" role="tablist" aria-label="结果分类">
+        <button type="button" class="sr-tabs__item is-active" role="tab" aria-selected="true" data-type="all">
+          全部 ( <span data-count="all">0</span> )
+        </button>
+        <button type="button" class="sr-tabs__item" role="tab" aria-selected="false" data-type="product">
+          产品 ( <span data-count="product">0</span> )
+        </button>
+        <button type="button" class="sr-tabs__item" role="tab" aria-selected="false" data-type="solution">
+          解决方案 ( <span data-count="solution">0</span> )
+        </button>
+        <button type="button" class="sr-tabs__item" role="tab" aria-selected="false" data-type="news">
+          新闻 ( <span data-count="news">0</span> )
+        </button>
+        <button type="button" class="sr-tabs__item" role="tab" aria-selected="false" data-type="faq">
+          常见问题 ( <span data-count="faq">0</span> )
+        </button>
+      </div>
+
       <div class="sr-list">
         {volist name="list" id="vo"}
         {php}
@@ -97,8 +115,19 @@
           $sr_cid = $vo['category_id'] ?? ($vo['category'][0]['id'] ?? 0);
           $sr_thumb = is_array($vo['thumbnail'] ?? null) ? ($vo['thumbnail']['url'] ?? '') : '';
           $sr_url = hcUrl('detail/index', ['id' => $vo['id'], 'cid' => $sr_cid]);
+          $sr_cate_title = $vo['category'][0]['title'] ?? '';
+          $sr_type = 'other';
+          if (mb_strpos($sr_cate_title, '产品') !== false) {
+            $sr_type = 'product';
+          } elseif (mb_strpos($sr_cate_title, '解决方案') !== false || mb_strpos($sr_cate_title, '方案') !== false) {
+            $sr_type = 'solution';
+          } elseif (mb_strpos($sr_cate_title, '新闻') !== false) {
+            $sr_type = 'news';
+          } elseif (mb_strpos($sr_cate_title, '常见问题') !== false || mb_strpos($sr_cate_title, 'FAQ') !== false || mb_strpos($sr_cate_title, '问题') !== false) {
+            $sr_type = 'faq';
+          }
         {/php}
-        <article class="sr-item" data-keywords="{$vo.title}">
+        <article class="sr-item" data-type="{$sr_type}" data-keywords="{$vo.title}">
           <a class="sr-item__media" href="{$sr_url}">
             <img src="{$sr_thumb}" alt="" width="300" height="200" loading="lazy" />
           </a>
@@ -128,6 +157,10 @@
         {/volist}
       </div>
 
+      <div class="s-empty sr-tabs-empty" hidden>
+        <p class="s-empty__text">当前分类下暂无结果</p>
+      </div>
+
       {php}
       $list_empty = isHcListEmpty($list ?? null);
       if ($list_empty) {