From d0c6c3e43164f4ccd9b0eb30ecfaaff083cc74d2 Mon Sep 17 00:00:00 2001
From: unknown <kate522@88.com>
Date: Sun, 6 Sep 2026 10:30:27 +0800
Subject: [PATCH] feat(submit): fold slide cover into multi-select image picker

Match the featured cover buttons row to the reference theme: drop the
dedicated slide button, let the icon-only image picker select multiple
images into a slide cover (single pick stays an image cover), and align
the loaded-state visibility matrix.
---
 .gitignore                                    |  1 +
 assets/css/frontend/pages/submit.css          |  9 ++--
 assets/js/front-submit.js                     | 40 +++++++-------
 templates/parts/submit/featured.php           | 13 ++---
 .../featured-buttons-contract.test.cjs        | 54 +++++++++++++++++++
 5 files changed, 86 insertions(+), 31 deletions(-)
 create mode 100644 tests/front-submit/featured-buttons-contract.test.cjs

diff --git a/.gitignore b/.gitignore
index 09ad9899..6a36beaf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -56,6 +56,7 @@
 !/tests/front-submit/
 /tests/front-submit/*
 !/tests/front-submit/video-cover-contract.test.cjs
+!/tests/front-submit/featured-buttons-contract.test.cjs
 !/tests/front-submit/editor-fullscreen-contract.test.cjs
 !/tests/asset-ledger/
 !/tests/asset-ledger/*.php
diff --git a/assets/css/frontend/pages/submit.css b/assets/css/frontend/pages/submit.css
index 260f2254..48b3e007 100644
--- a/assets/css/frontend/pages/submit.css
+++ b/assets/css/frontend/pages/submit.css
@@ -546,9 +546,10 @@ body.aksrt-editor-media-open {
   font-size: 1em;
 }
 
-/* 纯图标按钮（设置视频封面/视频/清除）：fa 字形行高与文字不同导致图标上偏，
+/* 纯图标按钮（图片/设置视频封面/视频/清除）：fa 字形行高与文字不同导致图标上偏，
    用 flex 居中修正；并去掉 legacy .but 给图标加的文字间距。btn-delete 的
    hidden 属性切换依赖默认 display，故用 :not([hidden]) 守卫。 */
+.featured-edit .btns-full .btn-image,
 .featured-edit .btns-full .btn-video,
 .featured-edit .btns-full .btn-delete:not([hidden]) {
   display: inline-flex;
@@ -566,6 +567,7 @@ body.aksrt-editor-media-open {
   justify-content: center;
 }
 
+.featured-edit .btns-full .btn-image > .fa,
 .featured-edit .btns-full .btn-video-pic > .fa,
 .featured-edit .btns-full .btn-video > .fa,
 .featured-edit .btns-full .btn-delete > .fa {
@@ -573,11 +575,8 @@ body.aksrt-editor-media-open {
 }
 
 .featured-loaded.image .btn-video,
-.featured-loaded.image .btn-slide,
 .featured-loaded.slide .btn-video,
-.featured-loaded.slide .btn-image,
-.featured-loaded.video .btn-image,
-.featured-loaded.video .btn-slide {
+.featured-loaded.video .btn-image {
   display: none;
 }
 
diff --git a/assets/js/front-submit.js b/assets/js/front-submit.js
index db942467..b9888544 100644
--- a/assets/js/front-submit.js
+++ b/assets/js/front-submit.js
@@ -88,6 +88,7 @@
     isDirty: false,
     isSubmitting: false,
     featured: { type: '', data: {} },
+    featuredOptions: {},
 
     init: function () {
       this.form = document.getElementById('aksrt-submit-form');
@@ -387,6 +388,7 @@
         if (args && args.type) {
           this.featured = { type: args.type, data: args.data || {} };
         }
+        this.featuredOptions = (args && args.options) || {};
       } catch (e) {}
     },
 
@@ -487,28 +489,30 @@
           return;
         }
         if (act === 'image') {
+          // 与服务端 featured 校验对齐：多选（或仅有幻灯片权限时的单选）存为幻灯片封面，其余存为图片封面。
+          var coverOptions = self.featuredOptions || {};
+          var slideEnabled = !!coverOptions.slide;
+          var imageAllowed = !!coverOptions.image;
           self.openMediaPicker({
             type: 'image',
-            multiple: false,
-            allowExternal: false,
-            onSelect: function (item) {
-              if (!item) return;
-              self.setFeatured('image', { url: item.url || '', id: item.attachment_id || item.id || 0 });
-            },
-          });
-          return;
-        }
-        if (act === 'slide') {
-          self.openMediaPicker({
-            type: 'image',
-            multiple: true,
-            maxItems: 30,
+            multiple: slideEnabled,
+            maxItems: slideEnabled ? 30 : 1,
             allowExternal: false,
             onSelect: function (items) {
-              var slides = (Array.isArray(items) ? items : []).map(function (item) {
-                return { url: item.url || '', id: item.attachment_id || item.id || 0 };
-              }).filter(function (item) { return item.url || item.id; });
-              if (slides.length) self.setFeatured('slide', slides);
+              var list = Array.isArray(items) ? items : [items];
+              var slides = [];
+              list.forEach(function (item) {
+                if (!item) return;
+                var url = item.url || '';
+                var id = item.attachment_id || item.id || 0;
+                if (url || id) slides.push({ url: url, id: id });
+              });
+              if (!slides.length) return;
+              if (slides.length > 1 || (slideEnabled && !imageAllowed)) {
+                self.setFeatured('slide', slides);
+                return;
+              }
+              self.setFeatured('image', slides[0]);
             },
           });
           return;
diff --git a/templates/parts/submit/featured.php b/templates/parts/submit/featured.php
index 9cc37b92..5a640556 100644
--- a/templates/parts/submit/featured.php
+++ b/templates/parts/submit/featured.php
@@ -41,9 +41,11 @@ $can_video = !empty($ctx['can_cover_video']);
 		<?php endif; ?>
 	</div>
 	<div class="btns-full flex ac jc">
-		<?php if ($can_image) : ?>
-			<button type="button" class="but btn-image" data-featured-action="image">
-				<i class="fa fas fa-image"></i> <?php esc_html_e('图片', 'aksrt'); ?>
+		<?php if ($can_image || $can_slide) : ?>
+			<button type="button" class="but btn-image" data-featured-action="image"
+				title="<?php esc_attr_e('图片', 'aksrt'); ?>"
+				aria-label="<?php esc_attr_e('图片', 'aksrt'); ?>">
+				<i class="fa fas fa-image"></i>
 			</button>
 		<?php endif; ?>
 		<?php if ($can_video) : ?>
@@ -53,11 +55,6 @@ $can_video = !empty($ctx['can_cover_video']);
 				<i class="fa fas fa-image"></i>
 			</button>
 		<?php endif; ?>
-		<?php if ($can_slide) : ?>
-			<button type="button" class="but btn-slide" data-featured-action="slide">
-				<i class="fa fas fa-image"></i> <?php esc_html_e('幻灯片', 'aksrt'); ?>
-			</button>
-		<?php endif; ?>
 		<?php if ($can_video) : ?>
 			<button type="button" class="but btn-video" data-featured-action="video"
 				title="<?php esc_attr_e('视频', 'aksrt'); ?>"
diff --git a/tests/front-submit/featured-buttons-contract.test.cjs b/tests/front-submit/featured-buttons-contract.test.cjs
new file mode 100644
index 00000000..aa47c396
--- /dev/null
+++ b/tests/front-submit/featured-buttons-contract.test.cjs
@@ -0,0 +1,54 @@
+'use strict';
+
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+const test = require('node:test');
+
+const root = path.resolve(__dirname, '..', '..');
+const read = (file) => fs.readFileSync(path.join(root, file), 'utf8');
+
+test('featured box shows only the icon image/video buttons and no slide button', () => {
+  const featured = read('templates/parts/submit/featured.php');
+
+  // Like the reference theme, the image button also serves slide covers via
+  // multi-select, so it renders whenever either capability is granted.
+  assert.match(
+    featured,
+    /if \(\$can_image \|\| \$can_slide\) : \?>\s*\n\s*<button type="button" class="but btn-image" data-featured-action="image"\s*\n\s*title="<\?php esc_attr_e\('图片', 'aksrt'\); \?>"\s*\n\s*aria-label="<\?php esc_attr_e\('图片', 'aksrt'\); \?>">\s*\n\s*<i class="fa fas fa-image"><\/i>\s*\n\s*<\/button>/
+  );
+
+  // The dedicated slide button is gone; slide covers come from multi-select.
+  assert.doesNotMatch(featured, /btn-slide|data-featured-action="slide"|幻灯片/);
+});
+
+test('image picker folds multi-select into a slide cover like the reference theme', () => {
+  const js = read('assets/js/front-submit.js');
+
+  assert.match(js, /featuredOptions = \(args && args\.options\) \|\| \{\};/);
+  assert.match(js, /var slideEnabled = !!coverOptions\.slide;/);
+  assert.match(js, /var imageAllowed = !!coverOptions\.image;/);
+  assert.match(js, /multiple: slideEnabled,/);
+  assert.match(js, /maxItems: slideEnabled \? 30 : 1,/);
+  assert.match(js, /slides\.length > 1 \|\| \(slideEnabled && !imageAllowed\)/);
+  assert.match(js, /self\.setFeatured\('slide', slides\)/);
+  assert.match(js, /self\.setFeatured\('image', slides\[0\]\)/);
+
+  // The standalone slide action died with its button.
+  assert.doesNotMatch(js, /act === 'slide'/);
+});
+
+test('submit.css mirrors the reference visibility matrix for the buttons row', () => {
+  const css = read('assets/css/frontend/pages/submit.css');
+
+  assert.match(
+    css,
+    /\.featured-edit \.btns-full \.btn-image,\s*\n\.featured-edit \.btns-full \.btn-video,\s*\n\.featured-edit \.btns-full \.btn-delete:not\(\[hidden\]\) \{\s*\n  display: inline-flex;/
+  );
+  assert.match(css, /\.featured-edit \.btns-full \.btn-image > \.fa,[\s\S]*?\.featured-edit \.btns-full \.btn-delete > \.fa \{\s*\n  margin-right: 0;\s*\n\}/);
+  assert.match(
+    css,
+    /\.featured-loaded\.image \.btn-video,\s*\n\.featured-loaded\.slide \.btn-video,\s*\n\.featured-loaded\.video \.btn-image \{\s*\n  display: none;\s*\n\}/
+  );
+  assert.doesNotMatch(css, /btn-slide/);
+});