feat(widgets): CoverCards via aksrt_graphic_card + batch14 CSS

Rebuild cover cards on shared graphic helper with height/mask/video
and row gutters; add comment/friend/iframe/cover polish styles.

assets/css/frontend/widget-batch5.css

@@ -1702,3 +1702,126 @@
   .term-aggregation .hide-sm { display: none !important; }
   .aksrt-oneline-swiper .swiper-slide { max-width: 72%; min-width: 140px; }
 }
+
+/* ===== Batch14: recent comments mini + friend links + iframe + cover ===== */
+
+.comment-mini-lists.widget-recent-comments,
+.comment-mini-lists.zib-widget {
+  padding: 4px 0;
+}
+.comment-mini-lists .posts-mini {
+  display: flex;
+  align-items: flex-start;
+  gap: 0;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--color-line, rgba(0,0,0,.06));
+}
+.comment-mini-lists .posts-mini:last-child {
+  border-bottom: 0;
+}
+.comment-mini-lists .avatar-img {
+  flex: 0 0 auto;
+  --this-size: 36px;
+}
+.comment-mini-lists .avatar-img img.avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  object-fit: cover;
+  display: block;
+}
+.comment-mini-lists .posts-mini-con {
+  min-width: 0;
+  flex: 1;
+}
+.comment-mini-lists .posts-mini-con > p.flex {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 0 4px;
+  gap: 8px;
+}
+.comment-mini-lists .icon-spot:before {
+  content: "·";
+  margin: 0 6px;
+  opacity: .5;
+}
+.comment-mini-lists a.muted-color {
+  color: var(--muted-2-color, #666);
+  text-decoration: none;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.5;
+}
+.comment-mini-lists a.muted-color:hover {
+  color: var(--theme-color, var(--focus-color, #f04494));
+}
+
+/* Friend links reuse bookmark-links styles */
+.aksrt-friend-links.links-box {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+.aksrt-friend-links.style-simple {
+  gap: 6px 12px;
+}
+.aksrt-friend-links.style-image {
+  gap: 8px;
+}
+
+/* Iframe lazy shell */
+.wp-block-embed.is-type-video.relative-h,
+.aksrt-iframe-embed .relative-h {
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px;
+  background: #0f172a;
+}
+.aksrt-iframe-ratio {
+  position: relative;
+  width: 100%;
+  height: 0;
+}
+.aksrt-iframe-ratio iframe,
+.aksrt-iframe-el {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+/* Cover cards row already covered by term-cards col rules — scope shared */
+.widget-graphic-cover .row.gutters-5 {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -4px;
+}
+.widget-graphic-cover .row.gutters-5 > [class*="col-"] {
+  padding: 0 4px;
+  box-sizing: border-box;
+}
+.widget-graphic-cover .col-sm-12 { width: 100%; }
+.widget-graphic-cover .col-sm-6 { width: 50%; }
+.widget-graphic-cover .col-sm-4 { width: 33.333%; }
+.widget-graphic-cover .col-sm-3 { width: 25%; }
+.widget-graphic-cover .col-sm-2 { width: 16.666%; }
+@media (max-width: 767px) {
+  .widget-graphic-cover .col-xs-12 { width: 100%; }
+  .widget-graphic-cover .col-xs-6 { width: 50%; }
+  .widget-graphic-cover .col-xs-4 { width: 33.333%; }
+}
+.widget-graphic-cover .this-font {
+  font-size: var(--font-size, 18px);
+  font-weight: var(--font-weight, 600);
+  color: var(--color, #fff);
+}
+@media (max-width: 767px) {
+  .widget-graphic-cover .this-font {
+    font-size: var(--font-size-sm, 14px);
+    font-weight: var(--font-weight-sm, 600);
+  }
+}

src/AKSRT/Widgets/WidgetCoverCards.php

@@ -1,5 +1,7 @@
 <?php
 /**
+ * Graphic cover cards (zibll zib_widget_ui_graphic_cover → aksrt_graphic_card).
+ *
  * @package AKSRT
  */
 
@@ -13,120 +15,204 @@ class WidgetCoverCards extends \WP_Widget {
 		parent::__construct(
 			'aksrt_cover_cards',
 			__('图文封面卡片', 'aksrt'),
-            ['description' => __('图片背景 + 文字叠加的卡片网格。', 'aksrt')]
+			['description' => __('图片/视频封面 + 文字叠加的图文卡片（共享 graphic_card）。', 'aksrt')]
 		);
 	}
 
+	/**
+	 * @param array<string,mixed> $args
+	 * @param array<string,mixed> $instance
+	 */
 	public function widget($args, $instance): void {
-        $title = !empty($instance['title']) ? $instance['title'] : '';
+		$title = !empty($instance['title']) ? (string) $instance['title'] : '';
-        $items_json = !empty($instance['items']) ? $instance['items'] : '[]';
+		$items = $this->normalize($instance['items'] ?? []);
-        $columns = max(1, min(4, (int) ($instance['columns'] ?? 2)));
+		if (!$items) {
-
+			return;
-        $items = json_decode($items_json, true);
-        if (!is_array($items) || empty($items)) return;
-
-        echo $args['before_widget'];
-
-        if ($title) {
-            echo $args['before_title'] . esc_html($title) . $args['after_title'];
 		}
 
-        echo '<div class="aksrt-cover-cards" style="--cols: ' . esc_attr((string) $columns) . ';">';
+		$pc_row = max(1, min(6, (int) ($instance['pc_row'] ?? $instance['columns'] ?? 2)));
+		$m_row  = max(1, min(3, (int) ($instance['m_row'] ?? 1)));
+		$height_scale = max(30, min(120, (int) ($instance['height_scale'] ?? 70)));
+		$mask_opacity = max(0, min(80, (int) ($instance['mask_opacity'] ?? 20)));
+		$font_size_pc = max(12, min(32, (int) ($instance['font_size_pc'] ?? 18)));
+		$font_size_m  = max(11, min(24, (int) ($instance['font_size_m'] ?? 14)));
+		$font_bold    = !empty($instance['font_bold']);
+		$font_color   = sanitize_hex_color((string) ($instance['font_color'] ?? '')) ?: '';
+
+		echo $args['before_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+
+		if ($title !== '') {
+			echo $args['before_title'] . esc_html($title) . $args['after_title']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+		}
+
+		$is_row = count($items) > 1;
+		$pc_span = max(1, (int) floor(12 / $pc_row));
+		$m_span  = max(1, (int) floor(12 / $m_row));
+		$row_class = 'col-sm-' . $pc_span . ($m_row > 1 ? ' col-xs-' . $m_span : '');
+
+		$style = '';
+		if ($font_size_pc !== 14) {
+			$style .= '--font-size:' . $font_size_pc . 'px;';
+		}
+		if ($font_size_m !== 14) {
+			$style .= '--font-size-sm:' . $font_size_m . 'px;';
+		}
+		if ($font_bold) {
+			$style .= '--font-weight:bold;--font-weight-sm:bold;';
+		}
+		if ($font_color !== '') {
+			$style .= '--color:' . $font_color . ';--color-sm:' . $font_color . ';';
+		}
+
+		echo '<div class="widget-graphic-cover aksrt-cover-cards' . ($is_row ? ' mb10' : ' mb20') . '"' . ($style !== '' ? ' style="' . esc_attr($style) . '"' : '') . '>';
+		if ($is_row) {
+			echo '<div class="row gutters-5">';
+		}
 
 		foreach ($items as $item) {
-            $image = esc_url($item['image'] ?? '');
+			$hide = sanitize_key((string) ($item['hide'] ?? ''));
-            $video = esc_url($item['video'] ?? '');
+			if ($hide === 'pc' || $hide === 'm') {
-            $link = esc_url($item['link'] ?? '');
+				$is_mobile = function_exists('wp_is_mobile') ? wp_is_mobile() : false;
-            $card_title = sanitize_text_field($item['title'] ?? '');
+				if ((!$is_mobile && $hide === 'pc') || ($is_mobile && $hide === 'm')) {
-            $desc = sanitize_text_field($item['desc'] ?? '');
+					continue;
-            $overlay = sanitize_hex_color($item['overlay'] ?? '');
+				}
-            $text_color = sanitize_hex_color($item['text_color'] ?? '');
+			}
-            $height = sanitize_text_field($item['height'] ?? '');
+			$card_title = (string) ($item['title'] ?? '');
+			$more = $card_title !== ''
+				? '<div class="abs-center text-center graphic-text this-font">' . esc_html($card_title) . '</div>'
+				: '';
 
-            $card_style = '';
+			$card = [
-            if ($height) $card_style .= 'height:' . esc_attr($height) . ';';
+				'class'        => 'noshadow mb10',
+				'img'          => (string) ($item['image'] ?? ''),
+				'video'        => (string) ($item['video'] ?? ''),
+				'alt'          => wp_strip_all_tags($card_title),
+				'link'         => [
+					'url'    => (string) ($item['link'] ?? ''),
+					'target' => (string) ($item['target'] ?? ''),
+				],
+				'lazy'         => true,
+				'more'         => $more,
+				'height_scale' => !empty($item['height']) && is_numeric($item['height'])
+					? (int) $item['height']
+					: $height_scale,
+				'mask_opacity' => isset($item['mask']) ? (int) $item['mask'] : $mask_opacity,
+			];
 
-            $overlay_style = '';
+			if ($is_row) {
-            if ($overlay) $overlay_style .= 'background:' . esc_attr($overlay) . ';';
+				echo '<div class="' . esc_attr($row_class) . '">';
-
+			}
-            $text_style = '';
+			if (function_exists('aksrt_graphic_card')) {
-            if ($text_color) $text_style .= 'color:' . esc_attr($text_color) . ';';
+				echo aksrt_graphic_card($card); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
-
+			}
-            echo '<div class="aksrt-cover-card"' . ($card_style ? ' style="' . esc_attr($card_style) . '"' : '') . '>';
+			if ($is_row) {
-
-            if ($video) {
-                echo '<div class="aksrt-cover-card__bg is-video">';
-                echo '<video src="' . esc_url($video) . '" muted loop autoplay playsinline></video>';
-                echo '</div>';
-            } elseif ($image) {
-                echo '<div class="aksrt-cover-card__bg">';
-                echo '<img src="' . esc_url($image) . '" alt="' . esc_attr($card_title) . '"' . (function_exists('aksrt_lazy_loading') ? aksrt_lazy_loading('widget') : ' loading="lazy"') . '>';
 				echo '</div>';
 			}
-
-            if ($overlay_style) {
-                echo '<div class="aksrt-cover-card__overlay" style="' . esc_attr($overlay_style) . '"></div>';
 		}
 
-            echo '<div class="aksrt-cover-card__content"' . ($text_style ? ' style="' . esc_attr($text_style) . '"' : '') . '>';
+		if ($is_row) {
-
-            if ($link) {
-                echo '<a href="' . esc_url($link) . '" class="aksrt-cover-card__link">';
-            }
-
-            if ($card_title) {
-                echo '<h3 class="aksrt-cover-card__title">' . esc_html($card_title) . '</h3>';
-            }
-            if ($desc) {
-                echo '<p class="aksrt-cover-card__desc">' . esc_html($desc) . '</p>';
-            }
-
-            if ($link) {
-                echo '</a>';
-            }
-
-            echo '</div>';
 			echo '</div>';
 		}
-
 		echo '</div>';
 
-        echo $args['after_widget'];
+		echo $args['after_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 	}
 
+	/**
+	 * @param mixed $raw
+	 * @return array<int, array<string,mixed>>
+	 */
+	private function normalize($raw): array {
+		if (is_string($raw)) {
+			$decoded = json_decode($raw, true);
+			$raw = is_array($decoded) ? $decoded : [];
+		}
+		if (!is_array($raw)) {
+			return [];
+		}
+		$out = [];
+		foreach ($raw as $row) {
+			if (!is_array($row)) {
+				continue;
+			}
+			$image = esc_url_raw(trim((string) ($row['image'] ?? '')));
+			$video = esc_url_raw(trim((string) ($row['video'] ?? '')));
+			if ($image === '' && $video === '') {
+				continue;
+			}
+			$out[] = [
+				'title'  => sanitize_text_field((string) ($row['title'] ?? '')),
+				'desc'   => sanitize_text_field((string) ($row['desc'] ?? '')),
+				'image'  => $image,
+				'video'  => $video,
+				'link'   => esc_url_raw(trim((string) ($row['link'] ?? ''))),
+				'target' => sanitize_text_field((string) ($row['target'] ?? '')),
+				'hide'   => sanitize_key((string) ($row['hide'] ?? '')),
+				'height' => isset($row['height']) ? (int) $row['height'] : 0,
+				'mask'   => isset($row['mask']) ? (int) $row['mask'] : null,
+			];
+			if (count($out) >= 12) {
+				break;
+			}
+		}
+		return $out;
+	}
+
+	/**
+	 * @param array<string,mixed> $instance
+	 */
 	public function form($instance): void {
-        $title = !empty($instance['title']) ? $instance['title'] : '';
+		$items = $this->normalize($instance['items'] ?? []);
-        $items = !empty($instance['items']) ? $instance['items'] : '[]';
+		$json = wp_json_encode($items, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
-        $columns = !empty($instance['columns']) ? (int) $instance['columns'] : 2;
 		?>
 		<p>
-            <label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php esc_html_e('标题（可选）:', 'aksrt'); ?></label>
+			<label><?php esc_html_e('标题（可选）:', 'aksrt'); ?>
-            <input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>" name="<?php echo esc_attr($this->get_field_name('title')); ?>" type="text" value="<?php echo esc_attr($title); ?>">
+				<input class="widefat" type="text" name="<?php echo esc_attr($this->get_field_name('title')); ?>" value="<?php echo esc_attr((string) ($instance['title'] ?? '')); ?>">
+			</label>
 		</p>
 		<p>
-            <label for="<?php echo esc_attr($this->get_field_id('columns')); ?>"><?php esc_html_e('列数:', 'aksrt'); ?></label>
+			<label><?php esc_html_e('PC 列', 'aksrt'); ?>
-            <select class="widefat" id="<?php echo esc_attr($this->get_field_id('columns')); ?>" name="<?php echo esc_attr($this->get_field_name('columns')); ?>">
+				<input class="tiny-text" type="number" min="1" max="6" name="<?php echo esc_attr($this->get_field_name('pc_row')); ?>" value="<?php echo esc_attr((string) ((int) ($instance['pc_row'] ?? $instance['columns'] ?? 2))); ?>">
-                <option value="1" <?php selected($columns, 1); ?>><?php esc_html_e('1 列', 'aksrt'); ?></option>
+			</label>
-                <option value="2" <?php selected($columns, 2); ?>><?php esc_html_e('2 列', 'aksrt'); ?></option>
+			<label><?php esc_html_e('移动列', 'aksrt'); ?>
-                <option value="3" <?php selected($columns, 3); ?>><?php esc_html_e('3 列', 'aksrt'); ?></option>
+				<input class="tiny-text" type="number" min="1" max="3" name="<?php echo esc_attr($this->get_field_name('m_row')); ?>" value="<?php echo esc_attr((string) ((int) ($instance['m_row'] ?? 1))); ?>">
-                <option value="4" <?php selected($columns, 4); ?>><?php esc_html_e('4 列', 'aksrt'); ?></option>
+			</label>
-            </select>
 		</p>
 		<p>
-            <label for="<?php echo esc_attr($this->get_field_id('items')); ?>"><?php esc_html_e('卡片数据 (JSON):', 'aksrt'); ?></label>
+			<label><?php esc_html_e('高度占比 %', 'aksrt'); ?>
-            <textarea class="widefat" id="<?php echo esc_attr($this->get_field_id('items')); ?>" name="<?php echo esc_attr($this->get_field_name('items')); ?>" rows="6" placeholder='[{"image":"https://...","title":"标题","desc":"描述","link":"https://..."}]'><?php echo esc_textarea($items); ?></textarea>
+				<input class="tiny-text" type="number" min="30" max="120" name="<?php echo esc_attr($this->get_field_name('height_scale')); ?>" value="<?php echo esc_attr((string) ((int) ($instance['height_scale'] ?? 70))); ?>">
-            <small><?php esc_html_e('JSON 数组，每项支持: image, title, desc, link, overlay, text_color, height', 'aksrt'); ?></small>
+			</label>
+			<label><?php esc_html_e('遮罩 0-80', 'aksrt'); ?>
+				<input class="tiny-text" type="number" min="0" max="80" name="<?php echo esc_attr($this->get_field_name('mask_opacity')); ?>" value="<?php echo esc_attr((string) ((int) ($instance['mask_opacity'] ?? 20))); ?>">
+			</label>
+		</p>
+		<p>
+			<label><?php esc_html_e('卡片 JSON', 'aksrt'); ?>
+				<textarea class="widefat" rows="6" name="<?php echo esc_attr($this->get_field_name('items')); ?>" placeholder='[{"image":"https://...","title":"标题","link":"https://..."}]'><?php echo esc_textarea((string) $json); ?></textarea>
+			</label>
+			<small><?php esc_html_e('字段: image, video, title, link, target, hide(pc|m), height, mask', 'aksrt'); ?></small>
 		</p>
 		<?php
 	}
 
+	/**
+	 * @param array<string,mixed> $new_instance
+	 * @param array<string,mixed> $old_instance
+	 * @return array<string,mixed>
+	 */
 	public function update($new_instance, $old_instance): array {
-        $instance = [];
+		return [
-        $instance['title'] = sanitize_text_field($new_instance['title'] ?? '');
+			'title'         => sanitize_text_field((string) ($new_instance['title'] ?? '')),
-        $instance['columns'] = max(1, min(4, (int) ($new_instance['columns'] ?? 2)));
+			'pc_row'        => max(1, min(6, (int) ($new_instance['pc_row'] ?? 2))),
-        $items_raw = $new_instance['items'] ?? '[]';
+			'm_row'         => max(1, min(3, (int) ($new_instance['m_row'] ?? 1))),
-        $items = json_decode($items_raw, true);
+			'columns'       => max(1, min(6, (int) ($new_instance['pc_row'] ?? $new_instance['columns'] ?? 2))),
-        $instance['items'] = is_array($items) ? wp_json_encode($items) : '[]';
+			'height_scale'  => max(30, min(120, (int) ($new_instance['height_scale'] ?? 70))),
-        return $instance;
+			'mask_opacity'  => max(0, min(80, (int) ($new_instance['mask_opacity'] ?? 20))),
+			'font_size_pc'  => max(12, min(32, (int) ($new_instance['font_size_pc'] ?? 18))),
+			'font_size_m'   => max(11, min(24, (int) ($new_instance['font_size_m'] ?? 14))),
+			'font_bold'     => !empty($new_instance['font_bold']) ? 1 : 0,
+			'font_color'    => sanitize_hex_color((string) ($new_instance['font_color'] ?? '')) ?: '',
+			'items'         => $this->normalize($new_instance['items'] ?? []),
+		];
 	}
 }