官网开发中 0731

2026-07-31 19:02:00 +08:00
parent fda4fa8627
commit eeccdb079c
36 changed files with 1944 additions and 105 deletions
@@ -1,14 +1,112 @@
 <script setup lang="ts">
 const { t } = useI18n();
+const siteStore = useSiteStore();
+const { footer, social, site } = storeToRefs(siteStore);
+
 const currentYear = new Date().getFullYear();
+
+// 社交链接图标（系统内置，admin 只填链接/二维码）
+const socialIcons: Record<string, string> = {
+  wechat: '💬',
+  weibo: '🌐',
+  bilibili: '📺',
+  youtube: '▶️',
+  facebook: '📘',
+  instagram: '📷'
+};
+
+// 仅显示已填写链接或二维码的社交入口
+const visibleSocial = computed(() =>
+  (social.value || []).filter((s) => s.url || s.qrcode_url)
+);
+
+// 悬浮显示微信二维码
+const wechatHover = ref(false);
 </script>

 <template>
  <footer class="border-t border-gray-100 bg-gray-50 dark:bg-dark-900 dark:border-dark-700">
-    <div class="section-container py-32px flex flex-col items-center gap-12px">
-      <p class="text-sm text-gray-500 dark:text-gray-400">
-        {{ t('footer.copyright', { year: currentYear }) }}
-      </p>
+    <div class="section-container py-48px">
+      <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-32px">
+        <!-- 品牌与联系信息 -->
+        <div class="flex flex-col gap-12px">
+          <p class="text-lg font-bold text-gray-900 dark:text-white">
+            {{ site?.site_title || t('app.name') }}
+          </p>
+          <p v-if="footer?.company_name" class="text-sm text-gray-600 dark:text-gray-300">
+            {{ footer.company_name }}
+          </p>
+          <p v-if="footer?.company_address" class="text-sm text-gray-500 dark:text-gray-400">
+            {{ footer.company_address }}
+          </p>
+          <div class="flex flex-wrap items-center gap-16px text-sm text-gray-500 dark:text-gray-400">
+            <a v-if="footer?.contact_phone" :href="`tel:${footer.contact_phone}`" class="hover:text-primary transition-colors">
+              {{ footer.contact_phone }}
+            </a>
+            <a v-if="footer?.contact_email" :href="`mailto:${footer.contact_email}`" class="hover:text-primary transition-colors">
+              {{ footer.contact_email }}
+            </a>
+          </div>
+        </div>
+
+        <!-- 社交媒体 -->
+        <div v-if="visibleSocial.length" class="flex items-center gap-16px">
+          <template v-for="item in visibleSocial" :key="item.platform">
+            <!-- 微信：悬浮显示二维码 -->
+            <div
+              v-if="item.platform === 'wechat' && item.qrcode_url"
+              class="relative"
+              @mouseenter="wechatHover = true"
+              @mouseleave="wechatHover = false"
+            >
+              <span class="w-40px h-40px flex-center rounded-full bg-white border border-gray-200 text-lg cursor-pointer hover:border-primary transition-colors dark:bg-dark-800 dark:border-dark-600">
+                {{ socialIcons[item.platform] || '🔗' }}
+              </span>
+              <transition name="qr">
+                <img
+                  v-if="wechatHover"
+                  :src="item.qrcode_url"
+                  alt="WeChat QR"
+                  class="absolute bottom-48px right-0 w-140px h-140px object-contain rounded-8px shadow-xl border border-gray-100 bg-white"
+                />
+              </transition>
+            </div>
+
+            <!-- 其他平台：外链 -->
+            <a
+              v-else-if="item.url"
+              :href="item.url"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="w-40px h-40px flex-center rounded-full bg-white border border-gray-200 text-lg hover:border-primary transition-colors dark:bg-dark-800 dark:border-dark-600"
+            >
+              {{ socialIcons[item.platform] || '🔗' }}
+            </a>
+          </template>
+        </div>
+      </div>
+
+      <!-- 版权与备案 -->
+      <div class="mt-32px pt-24px border-t border-gray-200 dark:border-dark-700 flex flex-col md:flex-row md:items-center md:justify-between gap-8px">
+        <p class="text-xs text-gray-400 dark:text-gray-500">
+          {{ footer?.copyright_text || t('footer.copyright', { year: currentYear }) }}
+        </p>
+        <div class="flex flex-wrap items-center gap-16px text-xs text-gray-400 dark:text-gray-500">
+          <span v-if="footer?.icp_number">{{ footer.icp_number }}</span>
+          <span v-if="footer?.police_number">{{ footer.police_number }}</span>
+        </div>
+      </div>
    </div>
  </footer>
 </template>
+
+<style scoped>
+.qr-enter-active,
+.qr-leave-active {
+  transition: opacity 0.18s ease;
+}
+.qr-enter-from,
+.qr-leave-to {
+  opacity: 0;
+}
+</style>
@@ -1,47 +1,256 @@
 <script setup lang="ts">
-const { t, locale, locales } = useI18n();
-const switchLocalePath = useSwitchLocalePath();
+import type { NavItem } from '~/types/site';

-const navItems = computed(() => [
-  { label: t('nav.home'), path: '/' },
-  { label: t('nav.products'), path: '/products' },
-  { label: t('nav.news'), path: '/news' },
-  { label: t('nav.about'), path: '/about' }
-]);
+const { t, locale, locales } = useI18n();
+const localePath = useLocalePath();
+const switchLocalePath = useSwitchLocalePath();
+const route = useRoute();
+
+const siteStore = useSiteStore();
+const appStore = useAppStore();
+
+const { navItems, navAppearance, productSeries, site } = storeToRefs(siteStore);
+
+// 滚动状态：滚动后强制毛玻璃背景 + 深色文字
+const { y: scrollY } = useWindowScroll();
+const isScrolled = computed(() => scrollY.value > 24);
+
+// 是否首页
+const isHome = computed(() => route.path === localePath('/') || route.path === '/');
+
+// 导航栏是否使用透明风格（未滚动时）
+const useTransparent = computed(() => {
+  if (isScrolled.value) return false;
+  const style = isHome.value ? navAppearance.value?.homepage_style : navAppearance.value?.non_homepage_style;
+  return style === 'transparent';
+});
+
+// 文字/Logo 颜色：透明风格下用浅色（适配深色首屏），否则用深色
+const lightText = computed(() => useTransparent.value);
+
+const logoUrl = computed(() => {
+  if (!site.value) return '';
+  return lightText.value ? site.value.logo_light_url : site.value.logo_dark_url;
+});
+
+// 判断是否为「产品」入口（悬浮展开 Mega Menu）
+function isProductsEntry(item: NavItem): boolean {
+  return item.link.includes('/products');
+}
+
+// 解析导航链接：外部 URL 原样返回，内部路由加语言前缀
+function resolveLink(link: string): string {
+  if (/^https?:\/\//.test(link)) return link;
+  return localePath(link);
+}
+
+function isExternal(link: string): boolean {
+  return /^https?:\/\//.test(link);
+}
+
+// Mega Menu 悬浮状态
+const megaOpen = ref(false);
+let megaTimer: ReturnType<typeof setTimeout> | null = null;
+
+function openMega() {
+  if (megaTimer) clearTimeout(megaTimer);
+  megaOpen.value = true;
+}
+
+function closeMega() {
+  megaTimer = setTimeout(() => {
+    megaOpen.value = false;
+  }, 120);
+}
+
+// 移动端：关闭抽屉
+function closeMobile() {
+  appStore.toggleMobileMenu(false);
+}
 </script>

 <template>
-  <header class="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-100 dark:bg-dark-900/80 dark:border-dark-700">
+  <header
+    class="fixed top-0 left-0 right-0 z-50 transition-all duration-300"
+    :class="useTransparent ? 'bg-transparent' : 'bg-white/80 backdrop-blur-md border-b border-gray-100 dark:bg-dark-900/80 dark:border-dark-700'"
+  >
    <div class="section-container h-64px flex items-center justify-between">
      <!-- Logo -->
-      <NuxtLink :to="switchLocalePath(locale)" class="flex items-center gap-8px text-xl font-bold text-primary">
-        {{ t('app.name') }}
+      <NuxtLink :to="switchLocalePath(locale)" class="flex items-center gap-8px shrink-0" @click="closeMobile">
+        <img v-if="logoUrl" :src="logoUrl" :alt="site?.site_title || 'Luxsin'" class="h-32px w-auto" />
+        <span
+          v-else
+          class="text-xl font-bold transition-colors"
+          :class="lightText ? 'text-white' : 'text-primary'"
+        >
+          {{ site?.site_title || t('app.name') }}
+        </span>
      </NuxtLink>

-      <!-- 导航 -->
-      <nav class="hidden md:flex items-center gap-24px">
-        <NuxtLink
-          v-for="item in navItems"
-          :key="item.path"
-          :to="switchLocalePath(locale) === '/' ? item.path : switchLocalePath(locale) + item.path"
-          class="text-sm text-gray-600 hover:text-primary transition-colors dark:text-gray-300"
-        >
-          {{ item.label }}
-        </NuxtLink>
+      <!-- 桌面端导航 -->
+      <nav class="hidden md:flex items-center gap-32px">
+        <template v-for="item in navItems" :key="item.id">
+          <!-- 产品入口：悬浮 Mega Menu -->
+          <div
+            v-if="isProductsEntry(item)"
+            class="relative h-64px flex items-center"
+            @mouseenter="openMega"
+            @mouseleave="closeMega"
+          >
+            <NuxtLink
+              :to="resolveLink(item.link)"
+              class="text-sm font-medium transition-colors flex items-center gap-4px"
+              :class="lightText ? 'text-white/90 hover:text-white' : 'text-gray-700 hover:text-primary dark:text-gray-200'"
+            >
+              {{ siteStore.navLabel(item) }}
+              <span class="text-10px opacity-60">▾</span>
+            </NuxtLink>
+
+            <!-- Mega Menu 面板 -->
+            <transition name="mega">
+              <div
+                v-if="megaOpen"
+                class="absolute top-64px left-50% -translate-x-50% min-w-640px bg-white/95 backdrop-blur-xl rounded-12px shadow-xl border border-gray-100 p-24px dark:bg-dark-900/95 dark:border-dark-700"
+              >
+                <div class="flex gap-40px">
+                  <div v-for="series in productSeries" :key="series.id" class="min-w-200px">
+                    <p class="text-12px font-semibold text-gray-400 mb-12px uppercase tracking-wide">
+                      {{ locale === 'en' ? series.name_en : series.name_zh }}
+                    </p>
+                    <div class="flex flex-col gap-8px">
+                      <NuxtLink
+                        v-for="product in series.products"
+                        :key="product.id"
+                        :to="localePath(`/products/${product.slug}`)"
+                        class="flex items-center gap-12px p-8px rounded-8px hover:bg-gray-50 transition-colors dark:hover:bg-dark-800"
+                        @click="megaOpen = false"
+                      >
+                        <img
+                          v-if="product.cover_url"
+                          :src="product.cover_url"
+                          :alt="product.name_zh"
+                          class="w-48px h-36px object-cover rounded-6px bg-gray-100"
+                        />
+                        <span class="text-sm text-gray-800 dark:text-gray-100">
+                          {{ locale === 'en' ? product.name_en : product.name_zh }}
+                        </span>
+                      </NuxtLink>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </transition>
+          </div>
+
+          <!-- 普通入口：外部链接 -->
+          <a
+            v-else-if="isExternal(item.link)"
+            :href="item.link"
+            :target="item.open_new_tab ? '_blank' : undefined"
+            class="text-sm font-medium transition-colors"
+            :class="lightText ? 'text-white/90 hover:text-white' : 'text-gray-700 hover:text-primary dark:text-gray-200'"
+          >
+            {{ siteStore.navLabel(item) }}
+          </a>
+
+          <!-- 普通入口：站内路由 -->
+          <NuxtLink
+            v-else
+            :to="resolveLink(item.link)"
+            :target="item.open_new_tab ? '_blank' : undefined"
+            class="text-sm font-medium transition-colors"
+            :class="lightText ? 'text-white/90 hover:text-white' : 'text-gray-700 hover:text-primary dark:text-gray-200'"
+          >
+            {{ siteStore.navLabel(item) }}
+          </NuxtLink>
+        </template>
      </nav>

-      <!-- 语言切换 -->
+      <!-- 右侧：语言切换 + 移动端汉堡 -->
      <div class="flex items-center gap-12px">
-        <NuxtLink
-          v-for="loc in locales"
-          :key="loc.code"
-          :to="switchLocalePath(loc.code)"
-          class="px-8px py-4px rounded text-sm transition-colors"
-          :class="locale === loc.code ? 'bg-primary text-white' : 'text-gray-500 hover:text-primary'"
+        <div class="hidden md:flex items-center gap-4px">
+          <NuxtLink
+            v-for="loc in locales"
+            :key="loc.code"
+            :to="switchLocalePath(loc.code)"
+            class="px-8px py-4px rounded text-sm transition-colors"
+            :class="
+              locale === loc.code
+                ? lightText ? 'bg-white/20 text-white' : 'bg-primary text-white'
+                : lightText ? 'text-white/70 hover:text-white' : 'text-gray-500 hover:text-primary'
+            "
+          >
+            {{ loc.code === 'zh' ? '中' : 'EN' }}
+          </NuxtLink>
+        </div>
+
+        <!-- 汉堡按钮 -->
+        <button
+          class="md:hidden w-40px h-40px flex-center rounded-8px transition-colors"
+          :class="lightText ? 'text-white hover:bg-white/10' : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200'"
+          aria-label="menu"
+          @click="appStore.toggleMobileMenu()"
        >
-          {{ loc.code === 'zh' ? '中' : 'EN' }}
-        </NuxtLink>
+          <span class="text-xl">{{ appStore.mobileMenuOpen ? '✕' : '☰' }}</span>
+        </button>
      </div>
    </div>
+
+    <!-- 移动端抽屉 -->
+    <transition name="drawer">
+      <div
+        v-if="appStore.mobileMenuOpen"
+        class="md:hidden bg-white dark:bg-dark-900 border-t border-gray-100 dark:border-dark-700 px-16px py-16px flex flex-col gap-4px"
+      >
+        <NuxtLink
+          v-for="item in navItems"
+          :key="item.id"
+          :to="resolveLink(item.link)"
+          class="px-12px py-12px rounded-8px text-base text-gray-800 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-dark-800"
+          @click="closeMobile"
+        >
+          {{ siteStore.navLabel(item) }}
+        </NuxtLink>
+
+        <div class="flex items-center gap-8px mt-12px px-12px">
+          <NuxtLink
+            v-for="loc in locales"
+            :key="loc.code"
+            :to="switchLocalePath(loc.code)"
+            class="px-12px py-6px rounded text-sm transition-colors"
+            :class="locale === loc.code ? 'bg-primary text-white' : 'text-gray-500 hover:text-primary'"
+            @click="closeMobile"
+          >
+            {{ loc.code === 'zh' ? '中文' : 'English' }}
+          </NuxtLink>
+        </div>
+      </div>
+    </transition>
  </header>
 </template>
+
+<style scoped>
+.mega-enter-active,
+.mega-leave-active {
+  transition: opacity 0.18s ease, transform 0.18s ease;
+}
+.mega-enter-from,
+.mega-leave-to {
+  opacity: 0;
+  transform: translate(-50%, -8px);
+}
+.mega-enter-to,
+.mega-leave-from {
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+
+.drawer-enter-active,
+.drawer-leave-active {
+  transition: opacity 0.2s ease;
+}
+.drawer-enter-from,
+.drawer-leave-to {
+  opacity: 0;
+}
+</style>
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { SectionBlock } from '~/types/site';
+
+const props = defineProps<{ section: SectionBlock }>();
+
+const { ctaPrimaryText, ctaSecondaryText, isDark } = useSectionContent(props.section);
+const { isExternal, resolveLink } = useLinkResolver();
+
+const primaryLink = computed(() => resolveLink(props.section.cta_primary_url));
+const secondaryLink = computed(() => resolveLink(props.section.cta_secondary_url));
+</script>
+
+<template>
+  <div v-if="primaryLink || secondaryLink" class="flex flex-wrap items-center gap-16px">
+    <!-- 主 CTA -->
+    <template v-if="primaryLink && ctaPrimaryText">
+      <a
+        v-if="isExternal(section.cta_primary_url)"
+        :href="section.cta_primary_url"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="px-28px py-12px rounded-full text-sm font-medium transition-all"
+        :class="isDark ? 'bg-white text-gray-900 hover:bg-gray-200' : 'bg-primary text-white hover:opacity-90'"
+      >
+        {{ ctaPrimaryText }}
+      </a>
+      <NuxtLink
+        v-else
+        :to="primaryLink"
+        class="px-28px py-12px rounded-full text-sm font-medium transition-all"
+        :class="isDark ? 'bg-white text-gray-900 hover:bg-gray-200' : 'bg-primary text-white hover:opacity-90'"
+      >
+        {{ ctaPrimaryText }}
+      </NuxtLink>
+    </template>
+
+    <!-- 次 CTA -->
+    <template v-if="secondaryLink && ctaSecondaryText">
+      <a
+        v-if="isExternal(section.cta_secondary_url)"
+        :href="section.cta_secondary_url"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="px-28px py-12px rounded-full text-sm font-medium border transition-all"
+        :class="isDark ? 'border-white/40 text-white hover:bg-white/10' : 'border-gray-300 text-gray-700 hover:border-primary hover:text-primary dark:border-dark-600 dark:text-gray-200'"
+      >
+        {{ ctaSecondaryText }}
+      </a>
+      <NuxtLink
+        v-else
+        :to="secondaryLink"
+        class="px-28px py-12px rounded-full text-sm font-medium border transition-all"
+        :class="isDark ? 'border-white/40 text-white hover:bg-white/10' : 'border-gray-300 text-gray-700 hover:border-primary hover:text-primary dark:border-dark-600 dark:text-gray-200'"
+      >
+        {{ ctaSecondaryText }}
+      </NuxtLink>
+    </template>
+  </div>
+</template>
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { SectionBlock, SectionLayout } from '~/types/site';
+import LayoutHeroSplit from './layouts/LayoutHeroSplit.vue';
+import LayoutFullBanner from './layouts/LayoutFullBanner.vue';
+import LayoutFeatureGrid from './layouts/LayoutFeatureGrid.vue';
+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 LayoutScrollNarrative from './layouts/LayoutScrollNarrative.vue';
+import LayoutQuote from './layouts/LayoutQuote.vue';
+import LayoutSpecTable from './layouts/LayoutSpecTable.vue';
+
+const props = defineProps<{ section: SectionBlock }>();
+
+// 布局类型 -> 组件映射
+const layoutComponents: Record<SectionLayout, unknown> = {
+  hero_split: LayoutHeroSplit,
+  full_banner: LayoutFullBanner,
+  feature_grid: LayoutFeatureGrid,
+  split_content: LayoutSplitContent,
+  gallery: LayoutGallery,
+  stats: LayoutStats,
+  video_showcase: LayoutVideoShowcase,
+  scroll_narrative: LayoutScrollNarrative,
+  quote: LayoutQuote,
+  spec_table: LayoutSpecTable
+};
+
+const layoutComponent = computed(() => layoutComponents[props.section.layout] ?? null);
+
+const isDark = computed(() => props.section.theme === 'dark');
+
+// 遮罩透明度（decimal 字符串 -> 数值）
+const overlayOpacity = computed(() => Number(props.section.overlay_opacity) || 0);
+const showOverlay = computed(() => !!props.section.overlay_enabled && overlayOpacity.value > 0);
+
+// 背景样式
+const bgStyle = computed(() => {
+  const { bg_type, bg_value } = props.section;
+  if (bg_type === 'color' && bg_value) {
+    return { backgroundColor: bg_value };
+  }
+  return {};
+});
+
+const hasBgImage = computed(() => props.section.bg_type === 'image' && !!props.section.bg_value);
+const hasBgVideo = computed(() => props.section.bg_type === 'video' && !!props.section.bg_value);
+</script>
+
+<template>
+  <section
+    class="relative overflow-hidden"
+    :class="isDark ? 'bg-gray-950 text-white' : 'bg-white text-gray-900 dark:bg-dark-900 dark:text-white'"
+    :style="bgStyle"
+  >
+    <!-- 背景图 -->
+    <div
+      v-if="hasBgImage"
+      class="absolute inset-0 bg-cover bg-center"
+      :style="{ backgroundImage: `url(${section.bg_value})` }"
+    />
+
+    <!-- 背景视频 -->
+    <video
+      v-if="hasBgVideo"
+      :src="section.bg_value"
+      class="absolute inset-0 w-full h-full object-cover"
+      autoplay
+      muted
+      loop
+      playsinline
+    />
+
+    <!-- 遮罩层 -->
+    <div
+      v-if="showOverlay"
+      class="absolute inset-0 bg-black"
+      :style="{ opacity: overlayOpacity }"
+    />
+
+    <!-- 布局内容 -->
+    <div class="relative z-10">
+      <component :is="layoutComponent" v-if="layoutComponent" :section="section" />
+    </div>
+  </section>
+</template>
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { SectionBlock } from '~/types/site';
+
+const props = defineProps<{ section: SectionBlock }>();
+
+const { overline, title, subtitle, config, isEn, isDark } = useSectionContent(props.section);
+
+const features = computed(() => config.value.features ?? []);
+</script>
+
+<template>
+  <div class="section-container py-96px">
+    <!-- 标题区 -->
+    <div class="text-center max-w-640px mx-auto mb-56px">
+      <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'">
+        {{ overline }}
+      </p>
+      <h2 class="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
+        {{ title }}
+      </h2>
+      <p v-if="subtitle" class="mt-16px text-base" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'">
+        {{ subtitle }}
+      </p>
+    </div>
+
+    <!-- 特性网格 -->
+    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-24px">
+      <div
+        v-for="(feature, idx) in features"
+        :key="idx"
+        class="p-32px rounded-16px transition-all hover:-translate-y-4px"
+        :class="isDark ? 'bg-white/5 border border-white/10' : 'bg-white border border-gray-100 shadow-sm hover:shadow-md dark:bg-dark-800 dark:border-dark-700'"
+      >
+        <span v-if="feature.icon" class="text-3xl">{{ feature.icon }}</span>
+        <h3 class="mt-16px text-lg font-semibold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
+          {{ isEn ? feature.title_en : feature.title_zh }}
+        </h3>
+        <p class="mt-8px text-sm leading-relaxed" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'">
+          {{ isEn ? feature.desc_en : feature.desc_zh }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { SectionBlock } from '~/types/site';
+
+const props = defineProps<{ section: SectionBlock }>();
+
+const { overline, title, subtitle, content } = useSectionContent(props.section);
+</script>
+
+<template>
+  <div class="section-container py-120px flex-col-center text-center max-w-800px">
+    <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="section.theme === 'dark' ? 'text-primary-300' : 'text-primary'">
+      {{ overline }}
+    </p>
+    <h2 class="mt-16px text-3xl md:text-5xl font-bold leading-tight" :class="section.theme === 'dark' ? 'text-white' : 'text-gray-900 dark:text-white'">
+      {{ title }}
+    </h2>
+    <p v-if="subtitle" class="mt-20px text-lg md:text-xl" :class="section.theme === 'dark' ? 'text-gray-300' : 'text-gray-600 dark:text-gray-300'">
+      {{ subtitle }}
+    </p>
+    <div v-if="content" class="mt-16px text-15px leading-relaxed" :class="section.theme === 'dark' ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" v-html="content" />
+    <SectionCta :section="section" class="mt-32px justify-center" />
+  </div>
+</template>
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { SectionBlock } from '~/types/site';
+
+const props = defineProps<{ section: SectionBlock }>();
+
+const { overline, title, subtitle, config, isEn, isDark } = useSectionContent(props.section);
+
+const images = computed(() => config.value.images ?? []);
+</script>
+
+<template>
+  <div class="section-container py-96px">
+    <!-- 标题区 -->
+    <div class="text-center max-w-640px mx-auto mb-56px">
+      <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'">
+        {{ overline }}
+      </p>
+      <h2 class="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
+        {{ title }}
+      </h2>
+      <p v-if="subtitle" class="mt-16px text-base" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'">
+        {{ subtitle }}
+      </p>
+    </div>
+
+    <!-- 图片网格 -->
+    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-16px">
+      <figure v-for="(img, idx) in images" :key="idx" class="group relative overflow-hidden rounded-12px">
+        <img :src="img.url" :alt="isEn ? img.caption_en : img.caption_zh" class="w-full aspect-4/3 object-cover transition-transform duration-500 group-hover:scale-105" />
+        <figcaption
+          v-if="(isEn ? img.caption_en : img.caption_zh)"
+          class="absolute bottom-0 left-0 right-0 px-16px py-12px text-sm text-white bg-gradient-to-t from-black/60 to-transparent"
+        >
+          {{ isEn ? img.caption_en : img.caption_zh }}
+        </figcaption>
+      </figure>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { SectionBlock } from '~/types/site';
+
+const props = defineProps<{ section: SectionBlock }>();
+
+const { overline, title, subtitle, content, mediaUrl, isDark } = useSectionContent(props.section);
+</script>
+
+<template>
+  <div class="section-container aspect-[2/3] md:aspect-auto md:min-h-[min(calc(92vh-64px),54vw)] grid md:grid-cols-2 gap-48px items-center">
+    <!-- 左侧文案 -->
+    <div class="flex flex-col gap-20px self-center md:min-h-[680px]">
+      <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'">
+        {{ overline }}
+      </p>
+      <h2 class="text-3xl md:text-5xl font-bold leading-tight" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
+        {{ title }}
+      </h2>
+      <p v-if="subtitle" class="text-lg md:text-xl" :class="isDark ? 'text-gray-300' : 'text-gray-600 dark:text-gray-300'">
+        {{ subtitle }}
+      </p>
+      <div v-if="content" class="text-15px leading-relaxed" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" v-html="content" />
+      <SectionCta :section="section" class="mt-8px" />
+    </div>
+
+    <!-- 右侧图片 -->
+    <div v-if="mediaUrl" class="flex-center">
+      <img :src="mediaUrl" :alt="title" class="w-full max-w-560px rounded-16px object-cover shadow-lg" />
+    </div>
+  </div>
+</template>
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { SectionBlock } from '~/types/site';
+
+const props = defineProps<{ section: SectionBlock }>();
+
+// 引言评价：正文 content 作为引用语，subtitle 作为作者/出处
+const { content, subtitle, isDark } = useSectionContent(props.section);
+</script>
+
+<template>
+  <div class="section-container py-96px flex-col-center text-center max-w-800px">
+    <span class="text-6xl leading-none font-serif" :class="isDark ? 'text-primary-300' : 'text-primary'">“</span>
+    <blockquote
+      class="mt-8px text-2xl md:text-3xl font-medium leading-relaxed"
+      :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'"
+      v-html="content"
+    />
+    <p v-if="subtitle" class="mt-24px text-sm tracking-wide" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'">
+      —— {{ subtitle }}
+    </p>
+  </div>
+</template>
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { SectionBlock } from '~/types/site';
+
+const props = defineProps<{ section: SectionBlock }>();
+
+const { overline, title, subtitle, config, isEn, isDark } = useSectionContent(props.section);
+
+const steps = computed(() => config.value.steps ?? []);
+</script>
+
+<template>
+  <div class="section-container py-96px">
+    <!-- 标题区 -->
+    <div class="text-center max-w-640px mx-auto mb-64px">
+      <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'">
+        {{ overline }}
+      </p>
+      <h2 class="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
+        {{ title }}
+      </h2>
+      <p v-if="subtitle" class="mt-16px text-base" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'">
+        {{ subtitle }}
+      </p>
+    </div>
+
+    <!-- 步骤叙事 -->
+    <div class="flex flex-col gap-64px max-w-960px mx-auto">
+      <div
+        v-for="(step, idx) in steps"
+        :key="idx"
+        class="grid md:grid-cols-2 gap-32px items-center"
+      >
+        <!-- 文案 -->
+        <div class="flex flex-col gap-12px" :class="idx % 2 === 1 ? 'md:order-2' : ''">
+          <span class="text-4xl font-bold opacity-20" :class="isDark ? 'text-white' : 'text-gray-900'">
+            {{ String(idx + 1).padStart(2, '0') }}
+          </span>
+          <h3 class="text-xl font-semibold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
+            {{ isEn ? step.title_en : step.title_zh }}
+          </h3>
+          <p class="text-15px leading-relaxed" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'">
+            {{ isEn ? step.desc_en : step.desc_zh }}
+          </p>
+        </div>
+
+        <!-- 配图 -->
+        <div v-if="step.image_url" :class="idx % 2 === 1 ? 'md:order-1' : ''">
+          <img :src="step.image_url" :alt="isEn ? step.title_en : step.title_zh" class="w-full rounded-16px object-cover shadow-md" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import type { SectionBlock, SpecGroup } from '~/types/site';
+
+const props = defineProps<{ section: SectionBlock }>();
+
+const { overline, title, subtitle, isEn, isDark } = useSectionContent(props.section);
+
+const specGroups = computed<SpecGroup[]>(() => props.section.spec_groups ?? []);
+
+// 每个分组的展开状态（默认收起，仅显示前 default_visible 项）
+const expandedMap = ref<Record<number, boolean>>({});
+
+function isExpanded(group: SpecGroup): boolean {
+  return !!expandedMap.value[group.id];
+}
+
+function toggle(group: SpecGroup) {
+  expandedMap.value[group.id] = !expandedMap.value[group.id];
+}
+
+// 分组内可见的参数项：展开时全部，收起时前 default_visible 项
+function visibleItems(group: SpecGroup) {
+  const items = group.items ?? [];
+  if (isExpanded(group)) return items;
+  return items.slice(0, group.default_visible || 5);
+}
+
+// 是否需要显示展开按钮（参数项 > 默认显示数量）
+function needToggle(group: SpecGroup): boolean {
+  return (group.items?.length ?? 0) > (group.default_visible || 5);
+}
+</script>
+
+<template>
+  <div class="section-container py-96px">
+    <!-- 标题区 -->
+    <div class="text-center max-w-640px mx-auto mb-56px">
+      <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'">
+        {{ overline }}
+      </p>
+      <h2 class="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
+        {{ title }}
+      </h2>
+      <p v-if="subtitle" class="mt-16px text-base" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'">
+        {{ subtitle }}
+      </p>
+    </div>
+
+    <!-- 参数分组卡片 -->
+    <div class="flex flex-col gap-24px max-w-960px mx-auto">
+      <div
+        v-for="group in specGroups"
+        :key="group.id"
+        class="rounded-16px overflow-hidden"
+        :class="isDark ? 'bg-white/5 border border-white/10' : 'bg-white border border-gray-100 shadow-sm dark:bg-dark-800 dark:border-dark-700'"
+      >
+        <!-- 分组标题 -->
+        <div class="px-32px py-20px border-b" :class="isDark ? 'border-white/10' : 'border-gray-100 dark:border-dark-700'">
+          <h3 class="text-lg font-semibold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
+            {{ isEn ? group.title_en : group.title_zh }}
+          </h3>
+        </div>
+
+        <!-- 参数项列表 -->
+        <div class="px-32px">
+          <div
+            v-for="item in visibleItems(group)"
+            :key="item.id"
+            class="flex items-start justify-between gap-24px py-14px border-b last:border-b-0"
+            :class="isDark ? 'border-white/5' : 'border-gray-50 dark:border-dark-700/50'"
+          >
+            <span class="text-sm shrink-0" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'">
+              {{ isEn ? item.name_en : item.name_zh }}
+            </span>
+            <span class="text-sm text-right font-medium" :class="isDark ? 'text-gray-200' : 'text-gray-800 dark:text-gray-200'">
+              {{ isEn ? item.value_en : item.value_zh }}
+            </span>
+          </div>
+        </div>
+
+        <!-- 展开/收起按钮 -->
+        <div v-if="needToggle(group)" class="px-32px py-16px">
+          <button
+            class="text-sm font-medium transition-colors"
+            :class="isDark ? 'text-primary-300 hover:text-primary-200' : 'text-primary hover:opacity-80'"
+            @click="toggle(group)"
+          >
+            {{ isExpanded(group) ? '收起参数 ∧' : `查看全部参数（${group.items?.length ?? 0} 项）∨` }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { SectionBlock } from '~/types/site';
+
+const props = defineProps<{ section: SectionBlock }>();
+
+const { overline, title, subtitle, content, mediaUrl, isDark } = useSectionContent(props.section);
+</script>
+
+<template>
+  <div class="section-container py-96px grid md:grid-cols-2 gap-48px items-center">
+    <!-- 图片 -->
+    <div v-if="mediaUrl" class="flex-center order-2 md:order-1">
+      <img :src="mediaUrl" :alt="title" class="w-full max-w-520px rounded-16px object-cover shadow-lg" />
+    </div>
+
+    <!-- 文案 -->
+    <div class="flex flex-col gap-20px order-1 md:order-2">
+      <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'">
+        {{ overline }}
+      </p>
+      <h2 class="text-3xl md:text-4xl font-bold leading-tight" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
+        {{ title }}
+      </h2>
+      <p v-if="subtitle" class="text-lg" :class="isDark ? 'text-gray-300' : 'text-gray-600 dark:text-gray-300'">
+        {{ subtitle }}
+      </p>
+      <div v-if="content" class="text-15px leading-relaxed" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'" v-html="content" />
+      <SectionCta :section="section" class="mt-8px" />
+    </div>
+  </div>
+</template>
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { SectionBlock } from '~/types/site';
+
+const props = defineProps<{ section: SectionBlock }>();
+
+const { overline, title, subtitle, config, isEn, isDark } = useSectionContent(props.section);
+
+const stats = computed(() => config.value.stats ?? []);
+</script>
+
+<template>
+  <div class="section-container py-96px">
+    <!-- 标题区 -->
+    <div class="text-center max-w-640px mx-auto mb-64px">
+      <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'">
+        {{ overline }}
+      </p>
+      <h2 class="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
+        {{ title }}
+      </h2>
+      <p v-if="subtitle" class="mt-16px text-base" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'">
+        {{ subtitle }}
+      </p>
+    </div>
+
+    <!-- 数据统计 -->
+    <div class="grid grid-cols-2 lg:grid-cols-4 gap-32px">
+      <div v-for="(stat, idx) in stats" :key="idx" class="flex-col-center text-center">
+        <p class="text-4xl md:text-5xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
+          {{ stat.value }}<span class="text-2xl md:text-3xl ml-4px opacity-70">{{ stat.unit }}</span>
+        </p>
+        <p class="mt-12px text-sm" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'">
+          {{ isEn ? stat.label_en : stat.label_zh }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { SectionBlock } from '~/types/site';
+
+const props = defineProps<{ section: SectionBlock }>();
+
+const { overline, title, subtitle, isDark } = useSectionContent(props.section);
+
+// 判断是否为可嵌入的 iframe 视频（YouTube / Bilibili）
+const isEmbed = computed(() => /youtube\.com|youtu\.be|bilibili\.com|player\.bilibili\.com/.test(props.section.video_url));
+</script>
+
+<template>
+  <div class="section-container py-96px">
+    <!-- 标题区 -->
+    <div class="text-center max-w-640px mx-auto mb-48px">
+      <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'">
+        {{ overline }}
+      </p>
+      <h2 class="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'">
+        {{ title }}
+      </h2>
+      <p v-if="subtitle" class="mt-16px text-base" :class="isDark ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400'">
+        {{ subtitle }}
+      </p>
+    </div>
+
+    <!-- 视频 -->
+    <div class="max-w-960px mx-auto rounded-16px overflow-hidden shadow-xl bg-black aspect-16/9">
+      <iframe
+        v-if="isEmbed"
+        :src="section.video_url"
+        class="w-full h-full"
+        frameborder="0"
+        allowfullscreen
+        scrolling="no"
+      />
+      <video
+        v-else-if="section.video_url"
+        :src="section.video_url"
+        class="w-full h-full object-cover"
+        controls
+        playsinline
+      />
+    </div>
+  </div>
+</template>