官网开发 0805

www/app/components/section/SectionRenderer.vue

@@ -9,6 +9,8 @@ import LayoutSplitContent from './layouts/LayoutSplitContent.vue';
 import LayoutGallery from './layouts/LayoutGallery.vue';
 import LayoutStats from './layouts/LayoutStats.vue';
 import LayoutVideoShowcase from './layouts/LayoutVideoShowcase.vue';
+import LayoutTitleMedia from './layouts/LayoutTitleMedia.vue';
+import LayoutMosaic from './layouts/LayoutMosaic.vue';
 import LayoutScrollNarrative from './layouts/LayoutScrollNarrative.vue';
 import LayoutQuote from './layouts/LayoutQuote.vue';
 import LayoutSpecTable from './layouts/LayoutSpecTable.vue';
@@ -24,6 +26,8 @@ const layoutComponents: Record<SectionLayout, unknown> = {
   gallery: LayoutGallery,
   stats: LayoutStats,
   video_showcase: LayoutVideoShowcase,
+  title_media: LayoutTitleMedia,
+  mosaic: LayoutMosaic,
   scroll_narrative: LayoutScrollNarrative,
   quote: LayoutQuote,
   spec_table: LayoutSpecTable
@@ -53,9 +57,40 @@ const bgMediaUrl = computed(() => resolveAssetUrl(props.section.bg_value));
 
 // 区块宽度百分比（config.width_percent）：占视口宽度比例并居中，
 // 未配置或 100 时全宽；md 以下始终全宽（见模板 class）
-const sectionWidthStyle = computed<CSSProperties>(() => {
+// 内容区最大宽度（config.container_width）：'1200'（默认）/ '1400' / '1600' / 'full'，
+// 通过 --sec-cw 下发给 section-container shortcut（见 uno.config.ts）
+// 区块圆角（config.border_radius）：单位 px，未配置或 0 为直角（默认）；
+// 外层 section 已有 overflow-hidden，背景图/视频自动被圆角裁剪
+const borderRadius = computed(() => {
+  const r = Number(props.section.config?.border_radius);
+  return r > 0 ? `${r}px` : '0px';
+});
+
+// 区块垂直内边距（config.padding_y）：单位 px，未设置时不下发变量（各布局用 var 回退自身默认值），0 = 完全贴边
+const paddingY = computed(() => {
+  const v = props.section.config?.padding_y;
+  return typeof v === 'number' && v >= 0 ? `${v}px` : '';
+});
+
+// 标题字号（config.title_font_size）：桌面端 px，未设置时不下发变量（main.css 的 section h2 规则兜底 36px）；
+// 移动端按桌面值 62.5% 等比缩小（--sec-title-fs-m）
+const titleFontSize = computed(() => {
+  const v = props.section.config?.title_font_size;
+  if (typeof v !== 'number' || v <= 0) return null;
+  return { desktop: `${v}px`, mobile: `${Math.round(v * 0.625)}px` };
+});
+
+const sectionStyleVars = computed<CSSProperties>(() => {
   const w = Number(props.section.config?.width_percent);
-  return { '--sec-w': w > 0 && w < 100 ? `${w}%` : '100%' } as CSSProperties;
+  const cw = props.section.config?.container_width;
+  const containerWidth = cw === 'full' ? '100%' : Number(cw) > 0 ? `${cw}px` : '1200px';
+  return {
+    '--sec-w': w > 0 && w < 100 ? `${w}%` : '100%',
+    '--sec-cw': containerWidth,
+    borderRadius: borderRadius.value,
+    ...(paddingY.value ? { '--sec-py': paddingY.value } : {}),
+    ...(titleFontSize.value ? { '--sec-title-fs': titleFontSize.value.desktop, '--sec-title-fs-m': titleFontSize.value.mobile } : {})
+  } as CSSProperties;
 });
 
 // 背景图/视频显示模式（config.bg_fit）：cover 铺满（默认）/ contain 完整显示 / auto 原尺寸
@@ -85,7 +120,7 @@ const bgVideoClass = computed(() =>
   <section
     class="relative overflow-hidden md:w-[var(--sec-w)] md:mx-auto"
     :class="isDark ? 'bg-gray-950 text-white' : 'bg-white text-gray-900 dark:bg-dark-900 dark:text-white'"
-    :style="[bgStyle, sectionWidthStyle]"
+    :style="[bgStyle, sectionStyleVars]"
   >
     <!-- 背景图：显示模式由 config.bg_fit 控制（默认铺满） -->
     <div