From 4eb2ddef66fff4d50f134613dd2ef5d9862f1c9d Mon Sep 17 00:00:00 2001
From: unknown <kate522@88.com>
Date: Sat, 5 Sep 2026 14:30:39 +0800
Subject: [PATCH] fix(widgets): keep slider media combo PC layout flex in admin
 preview
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

后台模板预览只加载 frontend.css，不加载 main.css 的 .flex 工具类，
PC 端两列因此退化为 block 上下堆叠；在 widget 自有样式层显式声明
display:flex（移动端媒体查询的 display:block/flex 覆盖不受影响）
---
 assets/widgets/frontend.css                                | 3 ++-
 tests/widget-system/zibll-modern-widgets-contract.test.cjs | 4 ++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/assets/widgets/frontend.css b/assets/widgets/frontend.css
index cae3c778..637d7a5a 100644
--- a/assets/widgets/frontend.css
+++ b/assets/widgets/frontend.css
@@ -164,7 +164,8 @@
 .theme-pagination .next-page a:hover { background: var(--main-border-color, rgba(127,127,127,.18)); opacity: 1; }
 .pagenav .page-numbers { cursor: pointer; }
 .widget-ajaxpager[lazyload-action="ias"] .post_ajax_trigger { display: none; }
-.widget-slider-graphic { gap: 10px; align-items: stretch; }
+/* 组合模块 PC 端为左右两列；后台预览不加载 main.css 的 .flex 工具类，这里需自声明。 */
+.widget-slider-graphic { display: flex; gap: 10px; align-items: stretch; }
 .widget-slider-graphic .slider-col { width: var(--layout-ratio, 60%); min-width: 0; }
 .widget-slider-graphic .cover-col { width: calc(100% - var(--layout-ratio, 60%)); }
 .widget-slider-graphic .widget-graphic-cover { height: 100%; }
diff --git a/tests/widget-system/zibll-modern-widgets-contract.test.cjs b/tests/widget-system/zibll-modern-widgets-contract.test.cjs
index 7b79ed44..2c6c4f25 100644
--- a/tests/widget-system/zibll-modern-widgets-contract.test.cjs
+++ b/tests/widget-system/zibll-modern-widgets-contract.test.cjs
@@ -116,6 +116,10 @@ test('slider media combo replicates the reference module front and back', () =>
   }
   assert.doesNotMatch(renderer, /playsinline/);
 
+  // PC 端左右布局在后台预览（不加载 main.css）也必须成立。
+  const widgetCss = read('assets/widgets/frontend.css');
+  assert.match(widgetCss, /\.widget-slider-graphic\s*\{\s*display:\s*flex;/);
+
   // 组合模块：is_show 门控、管理端缺省提示、卡片列动画与比例变量。
   for (const token of ["aksrt_is_lazy('lazy_cover')", 'alert alert-warning', '当前模块下没有可显示的幻灯片', 'obs-animate ani-', "widget-graphic-cover ' . ($is_row ? 'mb10' : 'mb20')", 'row gutters-5', 'col-xs-', 'graphic-text this-font', 'm-cover-ratio', 'cover-ratio', 'layout-ratio', 'data-row=', 'data-col=', "m-' . sanitize_html_class($m_layout_type)"]) {
     assert.match(renderer, new RegExp(token.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')));