eafonyang
54 lines
2.4 KiB
TypeScript
54 lines
2.4 KiB
TypeScript
import type { SectionBlock, SectionConfig } from '~/types/site';
|
||
import { resolveAssetUrl } from '~/utils/resolveAssetUrl';
|
||
|
||
/**
|
||
* 区块内容多语言解析
|
||
*
|
||
* Section 的各文本字段均有 _zh / _en 两个版本，
|
||
* 该 composable 根据当前语言返回对应的值，避免各布局组件重复判断。
|
||
*/
|
||
export function useSectionContent(section: SectionBlock) {
|
||
const { locale } = useI18n();
|
||
const isEn = computed(() => locale.value === 'en');
|
||
|
||
const overline = computed(() => (isEn.value ? section.overline_en : section.overline_zh) || '');
|
||
const title = computed(() => (isEn.value ? section.title_en : section.title_zh) || '');
|
||
const subtitle = computed(() => (isEn.value ? section.subtitle_en : section.subtitle_zh) || '');
|
||
const content = computed(() => (isEn.value ? section.content_en : section.content_zh) || '');
|
||
const ctaPrimaryText = computed(() => (isEn.value ? section.cta_primary_en : section.cta_primary_zh) || '');
|
||
const ctaSecondaryText = computed(() => (isEn.value ? section.cta_secondary_en : section.cta_secondary_zh) || '');
|
||
// media_url_zh/_en 以语言后缀结尾，不命中数据层 resolveAssetUrls 的 *_url 匹配，需在此单独解析相对路径
|
||
const mediaUrl = computed(() =>
|
||
resolveAssetUrl((isEn.value ? section.media_url_en : section.media_url_zh) || section.media_url_zh || '')
|
||
);
|
||
|
||
const config = computed<SectionConfig>(() => section.config ?? {});
|
||
|
||
/** 深色主题区块 */
|
||
const isDark = computed(() => section.theme === 'dark');
|
||
|
||
// 前景文案自定义颜色（空 = 跟随 theme 默认配色，由布局组件的 class 控制）
|
||
// 内联 style 优先级高于 class，非空时直接覆盖默认色
|
||
const overlineStyle = computed(() => (section.overline_color ? { color: section.overline_color } : undefined));
|
||
// 标题字号由 main.css 的 section h2 规则统一控制（config.title_font_size 经 SectionRenderer
|
||
// 注入 --sec-title-fs/--sec-title-fs-m 变量，留空兜底 36px，移动端 22.5px）
|
||
const titleStyle = computed(() => (section.title_color ? { color: section.title_color } : undefined));
|
||
const bodyStyle = computed(() => (section.body_color ? { color: section.body_color } : undefined));
|
||
|
||
return {
|
||
isEn,
|
||
overline,
|
||
title,
|
||
subtitle,
|
||
content,
|
||
ctaPrimaryText,
|
||
ctaSecondaryText,
|
||
mediaUrl,
|
||
config,
|
||
isDark,
|
||
overlineStyle,
|
||
titleStyle,
|
||
bodyStyle
|
||
};
|
||
}
|