From 152772ea60f325562aa967985061aa86c20ef89c Mon Sep 17 00:00:00 2001
From: unknown <kate522@88.com>
Date: Tue, 21 Jul 2026 12:59:05 +0800
Subject: [PATCH] feat(widgets): feature intro shared JS + plate info
 count-mates

Move FeatureIntro tab/media script into widget-set.js; align plate
info stats with zibll count-mates layout and residual CSS.
---
 assets/css/frontend/widget-batch5.css      | 16 ++++++++++
 assets/js/widget-set.js                    | 36 ++++++++++++++++++++++
 src/AKSRT/Widgets/WidgetFeatureIntro.php   | 20 ++----------
 src/AKSRT/Widgets/WidgetForumPlateInfo.php | 13 ++++----
 4 files changed, 60 insertions(+), 25 deletions(-)

diff --git a/assets/css/frontend/widget-batch5.css b/assets/css/frontend/widget-batch5.css
index c5d94b39..930abbf3 100644
--- a/assets/css/frontend/widget-batch5.css
+++ b/assets/css/frontend/widget-batch5.css
@@ -2517,3 +2517,19 @@ a.main-color > .icon-cover-card:hover,
 .aksrt-product-tab__skeleton .placeholder.s1 { width: 48%; }
 .aksrt-main-posts[data-load-mode="ajax"].is-ajax-loading { opacity: .85; }
 .widget-search-box.is-affix { position: sticky; top: 72px; }
+
+
+/* batch40-42 residual */
+.aksrt-plate-info .count-mates {
+  gap: 8px; margin-top: 12px; padding-top: 10px;
+  border-top: 1px solid var(--color-line, rgba(0,0,0,.06));
+}
+.aksrt-plate-info .count-mates item,
+.aksrt-plate-info .count-mates .mate-views,
+.aksrt-plate-info .count-mates .mate-reply,
+.aksrt-plate-info .count-mates .mate-follow {
+  flex: 1 1 0; min-width: 0; text-align: center;
+}
+.aksrt-plate-info .count-mates .em14 { font-weight: 700; line-height: 1.2; }
+.aksrt-fi[data-aksrt-feature-intro] .aksrt-fi__panel { display: none; }
+.aksrt-fi[data-aksrt-feature-intro] .aksrt-fi__panel.is-active { display: block; }
diff --git a/assets/js/widget-set.js b/assets/js/widget-set.js
index 6bd366d6..4bbdad30 100644
--- a/assets/js/widget-set.js
+++ b/assets/js/widget-set.js
@@ -344,6 +344,41 @@
     });
   }
 
+
+  // Feature intro media tabs.
+  function initFeatureIntro() {
+    document.querySelectorAll('[data-aksrt-feature-intro]').forEach(function (root) {
+      if (root.dataset.aksrtFiBound === '1') return;
+      root.dataset.aksrtFiBound = '1';
+      var tabs = [].slice.call(root.querySelectorAll('.aksrt-fi__tab'));
+      var panels = [].slice.call(root.querySelectorAll('.aksrt-fi__panel'));
+      if (!tabs.length || !panels.length) return;
+      function go(i) {
+        tabs.forEach(function (t, idx) {
+          t.classList.toggle('is-active', idx === i);
+        });
+        panels.forEach(function (p, idx) {
+          p.classList.toggle('is-active', idx === i);
+          var v = p.querySelector('video');
+          if (!v) return;
+          if (idx === i) {
+            if (!v.getAttribute('src') && v.getAttribute('data-src')) {
+              v.setAttribute('src', v.getAttribute('data-src'));
+            }
+            if (v.play) v.play().catch(function () {});
+          } else if (v.pause) {
+            v.pause();
+          }
+        });
+      }
+      tabs.forEach(function (t) {
+        t.addEventListener('click', function () {
+          go(parseInt(t.getAttribute('data-index') || '0', 10));
+        });
+      });
+    });
+  }
+
   function initFloatingQRCodes() {
     var wrap = document.querySelector('.float-right');
     if (!wrap) return;
@@ -388,6 +423,7 @@
     initForumTabTopics();
     initProductTabs();
     initMainPostsLazy();
+    initFeatureIntro();
     initFloatingQRCodes();
   }
 
diff --git a/src/AKSRT/Widgets/WidgetFeatureIntro.php b/src/AKSRT/Widgets/WidgetFeatureIntro.php
index 5f718b6b..7638b2b7 100644
--- a/src/AKSRT/Widgets/WidgetFeatureIntro.php
+++ b/src/AKSRT/Widgets/WidgetFeatureIntro.php
@@ -44,7 +44,7 @@ class WidgetFeatureIntro extends \WP_Widget {
 		echo $args['before_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 		$uid = 'aksrt-fi-' . esc_attr($this->id);
 
-		echo '<div class="aksrt-fi media-' . esc_attr($media_pos) . '" id="' . $uid . '">';
+		echo '<div class="aksrt-fi media-' . esc_attr($media_pos) . '" id="' . $uid . '" data-aksrt-feature-intro="1">';
 		echo '<div class="aksrt-fi__text">';
 		if ($heading !== '') {
 			echo '<h2 class="aksrt-fi__title">' . esc_html($heading) . '</h2>';
@@ -105,23 +105,7 @@ class WidgetFeatureIntro extends \WP_Widget {
 		}
 		echo '</div></div>';
 
-		if (count($slides) > 1) {
-			?>
-			<script>
-			(function(){
-				var root=document.getElementById(<?php echo wp_json_encode($uid); ?>);
-				if(!root||root._aksrtFi)return; root._aksrtFi=1;
-				var tabs=[].slice.call(root.querySelectorAll('.aksrt-fi__tab'));
-				var panels=[].slice.call(root.querySelectorAll('.aksrt-fi__panel'));
-				function go(i){
-					tabs.forEach(function(t,idx){t.classList.toggle('is-active',idx===i);});
-					panels.forEach(function(p,idx){p.classList.toggle('is-active',idx===i);var v=p.querySelector('video');if(v){if(idx===i){if(!v.getAttribute('src')&&v.getAttribute('data-src')){v.setAttribute('src',v.getAttribute('data-src'));}v.play&&v.play().catch(function(){})}else{v.pause&&v.pause()}}});
-				}
-				tabs.forEach(function(t){ t.addEventListener('click', function(){ go(parseInt(t.getAttribute('data-index')||'0',10)); }); });
-			})();
-			</script>
-			<?php
-		}
+		
 
 		echo $args['after_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 	}
diff --git a/src/AKSRT/Widgets/WidgetForumPlateInfo.php b/src/AKSRT/Widgets/WidgetForumPlateInfo.php
index f8f78952..881c5b9a 100644
--- a/src/AKSRT/Widgets/WidgetForumPlateInfo.php
+++ b/src/AKSRT/Widgets/WidgetForumPlateInfo.php
@@ -67,13 +67,12 @@ class WidgetForumPlateInfo extends \WP_Widget {
 			echo '<div class="aksrt-plate-info__desc">' . esc_html($desc) . '</div>';
 		}
 		if ($show_stats) {
-			echo '<div class="aksrt-plate-info__stats count-mates flex jsb">';
-			echo '<span title="' . esc_attr__('帖子', 'aksrt') . '"><i class="fas fa-file-alt" aria-hidden="true"></i> ' . esc_html((string) $posts) . '</span>';
-			echo '<span title="' . esc_attr__('回复', 'aksrt') . '"><i class="fas fa-comment" aria-hidden="true"></i> ' . esc_html((string) $reply) . '</span>';
-			if ($views > 0) {
-				echo '<span title="' . esc_attr__('浏览', 'aksrt') . '"><i class="fas fa-eye" aria-hidden="true"></i> ' . esc_html((string) $views) . '</span>';
-			}
-			echo '<span title="' . esc_attr__('关注', 'aksrt') . '"><i class="fas fa-heart" aria-hidden="true"></i> ' . esc_html((string) $follow) . '</span>';
+			// zibll count-mates: label above big number.
+			echo '<div class="aksrt-plate-info__stats count-mates text-center flex jsb">';
+			echo '<item class="mate-views"><div class="em09 opacity5 mb6">' . esc_html__('帖子', 'aksrt') . '</div><div class="em14">' . esc_html((string) $posts) . '</div></item>';
+			echo '<item class="mate-reply"><div class="em09 opacity5 mb6">' . esc_html__('回复', 'aksrt') . '</div><div class="em14">' . esc_html((string) $reply) . '</div></item>';
+			echo '<item class="mate-views"><div class="em09 opacity5 mb6">' . esc_html__('阅读', 'aksrt') . '</div><div class="em14">' . esc_html((string) $views) . '</div></item>';
+			echo '<item class="mate-follow"><div class="em09 opacity5 mb6">' . esc_html__('关注', 'aksrt') . '</div><div class="em14">' . esc_html((string) $follow) . '</div></item>';
 			echo '</div>';
 		}