fix(frontend): align search and header components with reference

tests/widget-system/header-multifunction-render.test.cjs

@@ -0,0 +1,62 @@
+'use strict';
+
+const assert = require('node:assert/strict');
+const { spawnSync } = require('node:child_process');
+const fs = require('node:fs');
+const path = require('node:path');
+const test = require('node:test');
+
+const root = path.resolve(__dirname, '..', '..');
+
+test('header multifunction renders reference slide, search, and card contracts on desktop and mobile', () => {
+  const rendered = spawnSync(
+    process.env.PHP_BINARY || 'php',
+    [path.join(__dirname, 'header-multifunction-render-harness.php')],
+    { cwd: root, encoding: 'utf8' },
+  );
+  assert.equal(rendered.status, 0, rendered.stderr || rendered.stdout);
+  const { desktop, mobile, module_background: moduleBackground } = JSON.parse(rendered.stdout);
+
+  assert.match(desktop, /data-src="https:\/\/example\.test\/slide\.jpg"/);
+  assert.match(desktop, /data-swiper-parallax="40%" data-swiper-parallax-opacity="0\.8" data-swiper-parallax-scale="1\.1"/);
+  assert.match(desktop, /data-src="https:\/\/example\.test\/pc-only\.jpg"/);
+  assert.doesNotMatch(desktop, /mobile-only\.jpg/);
+  assert.match(desktop, /class="swiper-slide slide-background-video"/);
+  assert.match(desktop, /data-src="https:\/\/example\.test\/background\.mp4"/);
+  assert.match(desktop, /class="new-dplayer" video-url="https:\/\/example\.test\/content\.mp4" video-type="auto"/);
+  assert.match(desktop, /class="absolute dplayer-poster"/);
+  assert.doesNotMatch(desktop, /<video controls/);
+  assert.match(desktop, /header-slider-search-more text-center before/);
+  assert.match(desktop, /<div class="search-input">search-box<\/div>/);
+  assert.match(desktop, /<div class="icon-cover-card flex ac aksrt-panel">Card one<\/div>/);
+
+  assert.doesNotMatch(mobile, /background\.mp4/);
+  assert.match(mobile, /data-src="https:\/\/example\.test\/mobile-only\.jpg"/);
+  assert.doesNotMatch(mobile, /pc-only\.jpg/);
+  assert.match(mobile, /data-src="https:\/\/example\.test\/poster\.jpg"/);
+  assert.match(mobile, /class="new-dplayer" video-url="https:\/\/example\.test\/content\.mp4"/);
+  assert.match(mobile, /header-slider-search-more text-center before/);
+  assert.match(mobile, /<div class="icon-cover-card flex ac aksrt-panel">Card one<\/div>/);
+
+  assert.match(moduleBackground, /<div class="aksrt-panel padding-10"><div class="flex jse/);
+  assert.match(moduleBackground, /<div class="icon-cover-card flex ac padding-10">Card one<\/div>/);
+  assert.equal(JSON.parse(rendered.stdout).page_config_save.show_widget_bg, true);
+
+  const { lazy_disabled: eager, single_slide: single } = JSON.parse(rendered.stdout);
+  assert.match(eager, /<img class="radius8" src="https:\/\/example\.test\/eager\.jpg"/);
+  assert.doesNotMatch(eager, /data-src=|lazyload/);
+  assert.match(single, /swiper-container-initialized/);
+  assert.doesNotMatch(single, /swiper-pagination|swiper-button-prev/);
+});
+
+test('header card background setting is editable, saved, and defaults off', () => {
+  const schema = fs.readFileSync(path.join(root, 'src/Admin/Schema/SchemaPageDisplay.php'), 'utf8');
+  const settings = fs.readFileSync(path.join(root, 'src/Settings/DisplayPageGroups.php'), 'utf8');
+  const metaBox = fs.readFileSync(path.join(root, 'src/Admin/PageConfigMetaBox.php'), 'utf8');
+
+  assert.match(schema, /field\('show_widget_bg', '模块背景', 'switcher', false/);
+  assert.match(schema, /'show_widget_bg'\s*=>\s*false/);
+  assert.match(settings, /'show_widget_bg'\s*=>\s*false/);
+  assert.match(metaBox, /'show_widget_bg'\s*=>\s*!empty\(\$value\['show_widget_bg'\]\)/);
+  assert.match(metaBox, /'show_widget_bg'\s*=>\s*false/);
+});