diff --git a/.gitignore b/.gitignore
index 8adaed0..34cf5f6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -67,3 +67,4 @@ coverage/
 *.bak
 *.tmp
 .TemporaryItems/
+/dashboard/backend/uploads
\ No newline at end of file
diff --git a/dashboard/backend/src/app.ts b/dashboard/backend/src/app.ts
index f832d1e..4233fc7 100644
--- a/dashboard/backend/src/app.ts
+++ b/dashboard/backend/src/app.ts
@@ -5,9 +5,11 @@ import './config/loadEnv.js';
 
 import express from 'express';
 import cors from 'cors';
+import path from 'path';
 import logger from './config/logger.js';
 import routes from './routes/index.js';
 import { bodyLimit } from './middleware/bodyLimit.js';
+import { wwwSnakeCase } from './middleware/snakeCase.js';
 import { ensureBootstrapSuperAdmin } from './services/userBootstrap.js';
 
 const app = express();
@@ -18,6 +20,12 @@ app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
 app.use(bodyLimit);
 
+// 静态文件服务：素材库上传目录
+app.use('/uploads', express.static(path.resolve(process.cwd(), 'uploads')));
+
+// 官网 CMS 响应字段名统一转为 snake_case（Drizzle 返回 camelCase，前端约定 snake_case）
+app.use(wwwSnakeCase);
+
 // 根路径（无需登录）
 app.get('/', (_req, res) => {
   res.json({
diff --git a/dashboard/backend/src/middleware/snakeCase.ts b/dashboard/backend/src/middleware/snakeCase.ts
new file mode 100644
index 0000000..4a13622
--- /dev/null
+++ b/dashboard/backend/src/middleware/snakeCase.ts
@@ -0,0 +1,40 @@
+import type { Request, Response, NextFunction } from 'express';
+
+/**
+ * 官网 CMS 响应字段名转换中间件
+ *
+ * Drizzle ORM 查询返回的行对象使用 schema 中定义的 camelCase 属性名（如 fileType、fileSize），
+ * 而前端与 API 约定统一使用 snake_case（如 file_type、file_size，与数据库列名一致）。
+ * 该中间件拦截 /api/www/ 路由的 res.json 响应，递归地将对象键从 camelCase 转为 snake_case。
+ *
+ * 说明：
+ * - 仅转换对象键，不改动字符串/数值等基本类型值。
+ * - JSON 列（config、form_data、options_json 等）由前端以 snake_case 写入，转换对其为无操作。
+ * - Date 实例原样保留，交由 JSON.stringify 序列化为 ISO 字符串。
+ */
+
+function toSnake(key: string): string {
+  return key.replace(/[A-Z]/g, c => `_${c.toLowerCase()}`);
+}
+
+function convertToSnake(value: unknown): unknown {
+  if (value === null || value === undefined) return value;
+  if (value instanceof Date) return value;
+  if (Array.isArray(value)) return value.map(convertToSnake);
+  if (typeof value === 'object') {
+    const out: Record<string, unknown> = {};
+    for (const key of Object.keys(value as Record<string, unknown>)) {
+      out[toSnake(key)] = convertToSnake((value as Record<string, unknown>)[key]);
+    }
+    return out;
+  }
+  return value;
+}
+
+export function wwwSnakeCase(req: Request, res: Response, next: NextFunction) {
+  if (req.path.startsWith('/api/www') || req.path.startsWith('/api/site')) {
+    const originalJson = res.json.bind(res);
+    res.json = (body: unknown) => originalJson(convertToSnake(body));
+  }
+  return next();
+}
diff --git a/dashboard/backend/src/routes/index.ts b/dashboard/backend/src/routes/index.ts
index 730ef9f..b096749 100644
--- a/dashboard/backend/src/routes/index.ts
+++ b/dashboard/backend/src/routes/index.ts
@@ -8,6 +8,7 @@ import otaTargetDeviceRouter from './otaTargetDevice.js';
 import shareCodeLogsRouter from './shareCodeLogs.js';
 import usersRouter from './users.js';
 import dashboardRouter from './dashboard.js';
+import siteRouter from './site.js';
 import {
   wwwGlobalRouter,
   wwwNavRouter,
@@ -22,6 +23,10 @@ import {
 } from './www/index.js';
 
 const routes: Router[] = [
+  // 官网前台公开只读接口（免鉴权）
+  // 注意：必须注册在最前面。其他路由文件使用无路径 router.use(authMiddleware)，
+  // 且通过 app.use(router) 挂载于 /，会拦截一切进入该路由器的请求（含不匹配的）。
+  siteRouter,
   authRouter,
   brandsRouter,
   modelsRouter,
diff --git a/dashboard/backend/src/routes/site.ts b/dashboard/backend/src/routes/site.ts
new file mode 100644
index 0000000..9d1586a
--- /dev/null
+++ b/dashboard/backend/src/routes/site.ts
@@ -0,0 +1,154 @@
+import { Router, type Request, type Response } from 'express';
+import { eq, and } from 'drizzle-orm';
+import { db } from '../config/database.js';
+import {
+  wwwSiteSettings,
+  wwwFooterSettings,
+  wwwSocialLinks,
+  wwwSeoDefaults,
+  wwwNavItems,
+  wwwNavAppearance,
+  wwwSectionBlocks,
+  wwwSpecGroups,
+  wwwSpecItems,
+  wwwI18nEntries,
+  wwwProductSeries,
+  wwwProducts,
+} from '../schemas/index.js';
+import logger from '../config/logger.js';
+import { ApiResponse } from '../utils/response.js';
+
+/**
+ * 官网前台公开只读接口（供 Nuxt 官网消费）
+ *
+ * 与 dashboard 管理端接口（/api/www/*，需 JWT 鉴权）完全隔离：
+ * - 无需登录，公开访问
+ * - 仅提供 GET 只读能力
+ * - 仅返回对前台可见的内容（is_visible=1、已发布等）
+ */
+const router = Router();
+
+// ===== 全局配置：站点信息 + 页脚 + 社交链接 + SEO 默认值 =====
+// GET /api/site/global
+router.get('/api/site/global', async (_req: Request, res: Response) => {
+  try {
+    const [site] = await db.select().from(wwwSiteSettings).limit(1);
+    const [footer] = await db.select().from(wwwFooterSettings).limit(1);
+    const social = await db.select().from(wwwSocialLinks).orderBy(wwwSocialLinks.sortOrder);
+    const [seo] = await db.select().from(wwwSeoDefaults).limit(1);
+
+    res.json(ApiResponse.success({
+      site: site ?? null,
+      footer: footer ?? null,
+      social: social ?? [],
+      seo: seo ?? null,
+    }));
+  } catch (e: unknown) {
+    logger.error(`[site/global] GET error: ${e instanceof Error ? e.message : e}`);
+    res.json(ApiResponse.error('获取全局配置失败'));
+  }
+});
+
+// ===== 导航：可见入口 + 外观 =====
+// GET /api/site/nav
+router.get('/api/site/nav', async (_req: Request, res: Response) => {
+  try {
+    const items = await db.select().from(wwwNavItems)
+      .where(eq(wwwNavItems.isVisible, 1))
+      .orderBy(wwwNavItems.sortOrder);
+    const [appearance] = await db.select().from(wwwNavAppearance).limit(1);
+
+    res.json(ApiResponse.success({
+      items: items ?? [],
+      appearance: appearance ?? null,
+    }));
+  } catch (e: unknown) {
+    logger.error(`[site/nav] GET error: ${e instanceof Error ? e.message : e}`);
+    res.json(ApiResponse.error('获取导航配置失败'));
+  }
+});
+
+// ===== Section 区块：按页面类型返回可见区块（含参数规格子数据） =====
+// GET /api/site/sections?page_type=home&product_id=1
+router.get('/api/site/sections', async (req: Request, res: Response) => {
+  try {
+    const pageType = req.query.page_type as string;
+    const productId = req.query.product_id ? Number(req.query.product_id) : undefined;
+
+    if (!pageType) {
+      res.json(ApiResponse.error('page_type 参数必填'));
+      return;
+    }
+
+    const conditions = [
+      eq(wwwSectionBlocks.pageType, pageType),
+      eq(wwwSectionBlocks.isVisible, 1),
+    ];
+    if (productId) conditions.push(eq(wwwSectionBlocks.productId, productId));
+
+    const sections = await db.select().from(wwwSectionBlocks)
+      .where(and(...conditions))
+      .orderBy(wwwSectionBlocks.sortOrder);
+
+    // 为 spec_table 布局的区块内联参数分组数据，避免前端 N+1 请求
+    const items = await Promise.all(sections.map(async (section) => {
+      if (section.layout !== 'spec_table') return section;
+
+      const groups = await db.select().from(wwwSpecGroups)
+        .where(eq(wwwSpecGroups.sectionBlockId, section.id))
+        .orderBy(wwwSpecGroups.sortOrder);
+
+      const specGroups = await Promise.all(groups.map(async (g) => {
+        const specItems = await db.select().from(wwwSpecItems)
+          .where(eq(wwwSpecItems.specGroupId, g.id))
+          .orderBy(wwwSpecItems.sortOrder);
+        return { ...g, items: specItems };
+      }));
+
+      return { ...section, specGroups };
+    }));
+
+    res.json(ApiResponse.success({ items, total: items.length }));
+  } catch (e: unknown) {
+    logger.error(`[site/sections] GET error: ${e instanceof Error ? e.message : e}`);
+    res.json(ApiResponse.error('获取 Section 列表失败'));
+  }
+});
+
+// ===== i18n 词条：返回全部词条（前台用于动态翻译 UI 文案） =====
+// GET /api/site/i18n
+router.get('/api/site/i18n', async (_req: Request, res: Response) => {
+  try {
+    const items = await db.select().from(wwwI18nEntries);
+    res.json(ApiResponse.success({ items: items ?? [], total: items.length }));
+  } catch (e: unknown) {
+    logger.error(`[site/i18n] GET error: ${e instanceof Error ? e.message : e}`);
+    res.json(ApiResponse.error('获取词条列表失败'));
+  }
+});
+
+// ===== 产品：可见系列及其下可见产品（供导航 Mega Menu 与产品页使用） =====
+// GET /api/site/products
+router.get('/api/site/products', async (_req: Request, res: Response) => {
+  try {
+    const series = await db.select().from(wwwProductSeries)
+      .where(eq(wwwProductSeries.isVisible, 1))
+      .orderBy(wwwProductSeries.sortOrder);
+
+    const products = await db.select().from(wwwProducts)
+      .where(eq(wwwProducts.isVisible, 1))
+      .orderBy(wwwProducts.sortOrder);
+
+    const seriesWithProducts = series.map((s) => ({
+      ...s,
+      products: products.filter((p) => p.seriesId === s.id),
+    }));
+
+    res.json(ApiResponse.success({ series: seriesWithProducts, total: seriesWithProducts.length }));
+  } catch (e: unknown) {
+    logger.error(`[site/products] GET error: ${e instanceof Error ? e.message : e}`);
+    res.json(ApiResponse.error('获取产品列表失败'));
+  }
+});
+
+export default router;
diff --git a/dashboard/frontend/src/service/api/www-media.ts b/dashboard/frontend/src/service/api/www-media.ts
index 9feef03..070129e 100644
--- a/dashboard/frontend/src/service/api/www-media.ts
+++ b/dashboard/frontend/src/service/api/www-media.ts
@@ -13,6 +13,7 @@ export function fetchUploadMedia(file: File, onProgress?: (percent: number) => v
     url: '/www/media/upload',
     method: 'post',
     data: formData,
+    headers: { 'Content-Type': 'multipart/form-data' },
     onUploadProgress: (e: { loaded: number; total?: number }) => {
       if (onProgress && e.total) {
         onProgress(Math.round((e.loaded / e.total) * 100));
diff --git a/dashboard/frontend/src/views/www/contact/settings/index.vue b/dashboard/frontend/src/views/www/contact/settings/index.vue
index f6a7478..369f28a 100644
--- a/dashboard/frontend/src/views/www/contact/settings/index.vue
+++ b/dashboard/frontend/src/views/www/contact/settings/index.vue
@@ -71,7 +71,7 @@ const columns: DataTableColumns<Api.Www.FormField> = [
     width: 60,
     render(row) {
       return h(NSwitch, {
-        value: row.is_required,
+        value: Boolean(row.is_required),
         onUpdateValue: (val: boolean) => handleToggleRequired(row, val)
       });
     }
@@ -130,7 +130,7 @@ function handleEditField(row: Api.Www.FormField) {
   fieldFormData.name_zh = row.name_zh;
   fieldFormData.name_en = row.name_en;
   fieldFormData.field_type = row.field_type as 'text' | 'email' | 'phone' | 'textarea' | 'select';
-  fieldFormData.is_required = row.is_required;
+  fieldFormData.is_required = Boolean(row.is_required);
   fieldFormData.placeholder_zh = row.placeholder_zh;
   fieldFormData.placeholder_en = row.placeholder_en;
   fieldFormData.options_json = row.options_json || '';
diff --git a/dashboard/frontend/src/views/www/media/index.vue b/dashboard/frontend/src/views/www/media/index.vue
index 35639f5..c4b00eb 100644
--- a/dashboard/frontend/src/views/www/media/index.vue
+++ b/dashboard/frontend/src/views/www/media/index.vue
@@ -5,6 +5,7 @@ import {
   fetchDeleteMediaItem,
   fetchGetMedia,
   fetchGetMediaTags,
+  fetchUpdateMediaItem,
   fetchUploadMedia
 } from '@/service/api';
 
@@ -53,6 +54,114 @@ function categoryLabel(val: string) {
   return categoryOptions.find(o => o.value === val)?.label || val;
 }
 
+// ===== 预览 =====
+const previewVisible = ref(false);
+const previewRow = ref<Api.Www.MediaItem | null>(null);
+
+// 预览类型：图片 / 视频 / PDF 可在线预览，其余（Office 等）仅提供下载
+type PreviewKind = 'image' | 'video' | 'pdf' | 'unsupported';
+const previewKind = computed<PreviewKind>(() => {
+  const row = previewRow.value;
+  if (!row) return 'unsupported';
+  if (row.file_type === 'image') return 'image';
+  if (row.file_type === 'video') return 'video';
+  const ext = row.file_path.split('.').pop()?.toLowerCase() || '';
+  if (ext === 'pdf' || row.mime_type === 'application/pdf') return 'pdf';
+  return 'unsupported';
+});
+
+// 相对路径（用于页面内 img/video/iframe 加载，/uploads 已由 vite/nginx 代理）
+const previewUrl = computed(() => previewRow.value?.file_path || '');
+// 完整可访问 URL（用于复制链接）
+const previewFullUrl = computed(() => (previewRow.value ? window.location.origin + previewRow.value.file_path : ''));
+
+function handlePreview(row: Api.Www.MediaItem) {
+  previewRow.value = row;
+  previewVisible.value = true;
+}
+
+// ===== 复制链接 =====
+async function copyText(text: string): Promise<boolean> {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    // 非安全上下文（http）下 clipboard API 不可用，降级为 execCommand
+    const ta = document.createElement('textarea');
+    ta.value = text;
+    ta.style.position = 'fixed';
+    ta.style.opacity = '0';
+    document.body.appendChild(ta);
+    ta.select();
+    const ok = document.execCommand('copy');
+    document.body.removeChild(ta);
+    return ok;
+  }
+}
+
+async function handleCopyLink(row: Api.Www.MediaItem) {
+  const url = window.location.origin + row.file_path;
+  const ok = await copyText(url);
+  if (ok) window.$message?.success('链接已复制到剪贴板');
+  else window.$message?.error('复制失败，请手动复制');
+}
+
+async function copyPreviewLink() {
+  if (!previewRow.value) return;
+  await handleCopyLink(previewRow.value);
+}
+
+// ===== 编辑（重命名 + 分类 + 标签）=====
+const editVisible = ref(false);
+const editLoading = ref(false);
+const editForm = reactive({
+  id: 0,
+  filename: '',
+  category: 'other',
+  tags: [] as string[]
+});
+
+const tagSelectOptions = computed(() => tagOptions.value.map(t => ({ label: t.tag_name, value: t.tag_name })));
+
+function handleEdit(row: Api.Www.MediaItem) {
+  editForm.id = row.id;
+  editForm.filename = row.filename;
+  editForm.category = row.category;
+  editForm.tags = [...(row.tags || [])];
+  editVisible.value = true;
+}
+
+async function handleEditSave() {
+  if (!editForm.filename?.trim()) {
+    window.$message?.warning('文件名不能为空');
+    return;
+  }
+  editLoading.value = true;
+  const { error } = await fetchUpdateMediaItem(editForm.id, {
+    filename: editForm.filename.trim(),
+    category: editForm.category,
+    tags: editForm.tags
+  });
+  editLoading.value = false;
+  if (!error) {
+    window.$message?.success('保存成功');
+    editVisible.value = false;
+    loadData();
+    loadTags(); // 可能新建了标签，刷新下拉选项
+  }
+}
+
+// ===== 行点击自动复制链接 =====
+function handleRowClick(row: Api.Www.MediaItem) {
+  handleCopyLink(row);
+}
+
+const rowProps = (row: Api.Www.MediaItem) => ({
+  style: 'cursor: pointer;',
+  onClick: () => handleRowClick(row)
+});
+
+// ===== 表格列 =====
 const columns = computed<DataTableColumns<Api.Www.MediaItem>>(() => [
   { title: 'ID', key: 'id', width: 60 },
   {
@@ -60,14 +169,15 @@ const columns = computed<DataTableColumns<Api.Www.MediaItem>>(() => [
     key: 'thumbnail_url',
     width: 80,
     render(row) {
-      if (row.file_type === 'image' && (row.thumbnail_url || row.file_path)) {
-        return h('img', {
-          src: row.thumbnail_url || row.file_path,
-          alt: row.filename,
-          style: 'width: 48px; height: 48px; object-fit: cover; border-radius: 4px;'
-        });
-      }
-      return h(NTag, { size: 'small' }, { default: () => row.file_type });
+      const content
+        = row.file_type === 'image' && (row.thumbnail_url || row.file_path)
+          ? h('img', {
+              src: row.thumbnail_url || row.file_path,
+              alt: row.filename,
+              style: 'width: 48px; height: 48px; object-fit: cover; border-radius: 4px;'
+            })
+          : h(NTag, { size: 'small' }, { default: () => row.file_type });
+      return h('div', { style: 'cursor: pointer;', onClick: (e: Event) => { e.stopPropagation(); handlePreview(row); } }, [content]);
     }
   },
   { title: '文件名', key: 'filename', ellipsis: { tooltip: true } },
@@ -95,14 +205,15 @@ const columns = computed<DataTableColumns<Api.Www.MediaItem>>(() => [
   {
     title: '操作',
     key: 'actions',
-    width: 100,
+    width: 130,
     fixed: 'right',
     render(row) {
-      return h(NButton, {
-        size: 'small',
-        type: 'error',
-        onClick: () => handleDelete(row)
-      }, { default: () => '删除' });
+      return h(NSpace, { size: 8, onClick: (e: Event) => e.stopPropagation() }, {
+        default: () => [
+          h(NButton, { type: 'warning', size: 'small', onClick: () => handleEdit(row) }, { default: () => '编辑' }),
+          h(NButton, { type: 'error', size: 'small', onClick: () => handleDelete(row) }, { default: () => '删除' })
+        ]
+      });
     }
   }
 ]);
@@ -191,6 +302,7 @@ onMounted(() => {
 </script>
 
 <template>
+  <div>
   <NSpace vertical :size="16">
     <NCard :bordered="false" class="card-wrapper" size="small">
       <NForm inline :model="searchForm" label-placement="left">
@@ -228,7 +340,7 @@ onMounted(() => {
         </NUpload>
       </template>
 
-      <NDataTable :loading="loading" :columns="columns" :data="tableData" :bordered="false" size="small" />
+      <NDataTable :loading="loading" :columns="columns" :data="tableData" :bordered="false" size="small" :scroll-x="900" :row-props="rowProps" />
 
       <div class="mt-16px flex justify-end">
         <NPagination
@@ -244,4 +356,96 @@ onMounted(() => {
       </div>
     </NCard>
   </NSpace>
+
+  <!-- 预览弹窗：图片大图 / 视频播放 / PDF 内嵌 / Office 等仅下载 -->
+  <NModal
+    v-model:show="previewVisible"
+    preset="card"
+    :title="previewRow?.filename || '素材预览'"
+    style="width: 780px; max-width: 92vw;"
+    :bordered="false"
+  >
+    <div v-if="previewRow" class="flex flex-col gap-12px">
+      <!-- 图片 -->
+      <div v-if="previewKind === 'image'" class="flex-center">
+        <img
+          :src="previewUrl"
+          :alt="previewRow.filename"
+          style="max-width: 100%; max-height: 68vh; object-fit: contain; border-radius: 6px;"
+        >
+      </div>
+
+      <!-- 视频 -->
+      <div v-else-if="previewKind === 'video'" class="flex-center">
+        <video :src="previewUrl" controls autoplay style="max-width: 100%; max-height: 68vh; border-radius: 6px;" />
+      </div>
+
+      <!-- PDF -->
+      <iframe v-else-if="previewKind === 'pdf'" :src="previewUrl" style="width: 100%; height: 70vh; border: none; border-radius: 6px;" />
+
+      <!-- 暂不支持在线预览（Office 等）-->
+      <div v-else class="flex-col-center py-40px">
+        <SvgIcon icon="mdi:file-document-outline" class="text-48px text-gray-300" />
+        <p class="mt-12px text-14px text-gray-500">
+          该文件类型暂不支持在线预览
+        </p>
+        <p class="mt-4px text-12px text-gray-400">
+          {{ previewRow.mime_type || '未知类型' }} · {{ formatSize(previewRow.file_size) }}
+        </p>
+        <NButton class="mt-16px" tag="a" :href="previewUrl" download>
+          <template #icon><SvgIcon icon="mdi:download" /></template>
+          下载文件
+        </NButton>
+      </div>
+
+      <!-- 文件信息 + 操作 -->
+      <div class="flex items-center justify-between border-t border-gray-100 pt-12px">
+        <span class="truncate text-12px text-gray-400">{{ previewRow.filename }} · {{ formatSize(previewRow.file_size) }}</span>
+        <NSpace>
+          <NButton size="small" @click="copyPreviewLink">
+            <template #icon><SvgIcon icon="mdi:content-copy" /></template>
+            复制链接
+          </NButton>
+          <NButton size="small" tag="a" :href="previewUrl" download>
+            <template #icon><SvgIcon icon="mdi:download" /></template>
+            下载
+          </NButton>
+        </NSpace>
+      </div>
+    </div>
+  </NModal>
+
+  <!-- 编辑弹窗：重命名 + 分类 + 多标签 -->
+  <NModal v-model:show="editVisible" preset="card" title="编辑素材" style="width: 520px; max-width: 92vw;" :bordered="false">
+    <NForm :model="editForm" label-placement="left" label-width="80">
+      <NFormItem label="文件名">
+        <NInput v-model:value="editForm.filename" placeholder="请输入有意义的文件名" />
+      </NFormItem>
+      <NFormItem label="分类">
+        <NSelect v-model:value="editForm.category" :options="categoryOptions" />
+      </NFormItem>
+      <NFormItem label="标签">
+        <NSelect
+          v-model:value="editForm.tags"
+          :options="tagSelectOptions"
+          multiple
+          filterable
+          tag
+          clearable
+          placeholder="选择已有标签或输入新标签后回车"
+        />
+      </NFormItem>
+    </NForm>
+    <template #footer>
+      <NSpace justify="end">
+        <NButton @click="editVisible = false">
+          取消
+        </NButton>
+        <NButton type="primary" :loading="editLoading" @click="handleEditSave">
+          保存
+        </NButton>
+      </NSpace>
+    </template>
+  </NModal>
+  </div>
 </template>
diff --git a/dashboard/frontend/src/views/www/nav/items/index.vue b/dashboard/frontend/src/views/www/nav/items/index.vue
index 28ccb93..8f6d911 100644
--- a/dashboard/frontend/src/views/www/nav/items/index.vue
+++ b/dashboard/frontend/src/views/www/nav/items/index.vue
@@ -55,7 +55,7 @@ const columns: DataTableColumns<Api.Www.NavItem> = [
     width: 80,
     render(row) {
       return h(NSwitch, {
-        value: row.is_visible,
+        value: Boolean(row.is_visible),
         onUpdateValue: (val: boolean) => handleToggleVisible(row, val)
       });
     }
@@ -111,11 +111,11 @@ function handleEdit(row: Api.Www.NavItem) {
   formData.name_zh = row.name_zh;
   formData.name_en = row.name_en;
   formData.link = row.link;
-  formData.is_visible = row.is_visible;
+  formData.is_visible = Boolean(row.is_visible);
   formData.display_mode = row.display_mode;
   formData.icon_name = row.icon_name;
   formData.image_url = row.image_url;
-  formData.open_new_tab = row.open_new_tab;
+  formData.open_new_tab = Boolean(row.open_new_tab);
   dialogVisible.value = true;
 }
 
diff --git a/dashboard/frontend/src/views/www/page/home/index.vue b/dashboard/frontend/src/views/www/page/home/index.vue
index 382fac4..33851c5 100644
--- a/dashboard/frontend/src/views/www/page/home/index.vue
+++ b/dashboard/frontend/src/views/www/page/home/index.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { h, onMounted, reactive, ref } from 'vue';
-import { NButton, NSpace, NSwitch, NTag, type DataTableColumns, type FormInst } from 'naive-ui';
+import { computed, h, onMounted, reactive, ref } from 'vue';
+import { NButton, NSpace, NSwitch, NTag, type DataTableColumns, type FormInst, type SelectOption, type SelectRenderOption } from 'naive-ui';
 import {
   fetchCreateSection,
   fetchDeleteSection,
   fetchGetSections,
+  fetchSortSections,
   fetchUpdateSection
 } from '@/service/api';
 
@@ -17,19 +18,43 @@ const dialogTitle = ref('');
 const formRef = ref<FormInst | null>(null);
 const tableData = ref<Api.Www.SectionBlock[]>([]);
 
-const layoutOptions = [
-  { label: 'Hero Split', value: 'hero_split' },
-  { label: 'Full Width Banner', value: 'full_banner' },
-  { label: 'Feature Grid', value: 'feature_grid' },
-  { label: 'Split Content', value: 'split_content' },
-  { label: 'Gallery', value: 'gallery' },
-  { label: 'Stats', value: 'stats' },
-  { label: 'Video Showcase', value: 'video_showcase' },
-  { label: 'Scroll Narrative', value: 'scroll_narrative' },
-  { label: 'Quote', value: 'quote' },
-  { label: 'Spec Table', value: 'spec_table' }
+type LayoutOption = SelectOption & { desc: string };
+
+const layoutOptions: LayoutOption[] = [
+  { label: '主视觉分屏', value: 'hero_split', desc: '左文案右图片，首页首屏大图' },
+  { label: '通栏大横幅', value: 'full_banner', desc: '全宽背景图，标题文案居中' },
+  { label: '特性网格', value: 'feature_grid', desc: '多列卡片，展示产品特性卖点' },
+  { label: '图文分栏', value: 'split_content', desc: '图片与文案左右并排介绍' },
+  { label: '图片画廊', value: 'gallery', desc: '多张图片网格展示' },
+  { label: '数据统计', value: 'stats', desc: '大数字展示关键指标数据' },
+  { label: '视频展示', value: 'video_showcase', desc: '以视频为主的视觉区块' },
+  { label: '滚动叙事', value: 'scroll_narrative', desc: '随滚动逐步展开的叙事内容' },
+  { label: '引言评价', value: 'quote', desc: '引用语 / 用户评价展示' },
+  { label: '参数规格表', value: 'spec_table', desc: '产品技术参数规格表格' }
 ];
 
+function layoutLabel(value: string) {
+  return (layoutOptions.find(o => o.value === value)?.label as string) || value;
+}
+
+function renderLayoutLabel(option: SelectOption, _selected: boolean) {
+  const opt = option as LayoutOption;
+  // 始终渲染 label + desc（收起态的 desc 由 CSS 隐藏，见底部 <style>）
+  return h('div', { class: 'flex flex-col py-2px' }, [
+    h('span', { class: 'text-14px' }, opt.label as string),
+    h('span', { class: 'text-12px opacity-60 layout-desc' }, opt.desc)
+  ]);
+}
+
+const renderLayoutOption: SelectRenderOption = ({ node, option }) => {
+  const opt = option as LayoutOption;
+  return h('div', {
+    style: opt.value === layoutOptions[layoutOptions.length - 1].value
+      ? ''
+      : 'border-bottom: 1px solid rgba(0, 0, 0, 0.06);'
+  }, [node]);
+};
+
 const themeOptions = [
   { label: '浅色', value: 'light' },
   { label: '深色', value: 'dark' }
@@ -63,9 +88,29 @@ const formData = reactive({
   is_visible: true
 });
 
-const columns: DataTableColumns<Api.Www.SectionBlock> = [
-  { title: '排序', key: 'sort_order', width: 60 },
-  { title: '布局', key: 'layout', width: 130 },
+const columns = computed((): DataTableColumns<Api.Www.SectionBlock> => [
+  {
+    title: '排序',
+    key: 'sort_order',
+    width: 110,
+    render(row) {
+      const idx = tableData.value.findIndex(item => item.id === row.id);
+      const isFirst = idx === 0;
+      const isLast = idx === tableData.value.length - 1;
+      return h('div', { class: 'flex-y-center gap-4px' }, [
+        h('span', { class: 'text-12px text-gray-400 w-20px text-center' }, { default: () => String(row.sort_order) }),
+        h(NButton, {
+          text: true, size: 'tiny', type: 'primary', disabled: isFirst,
+          onClick: () => handleMove(idx, -1)
+        }, { default: () => '↑' }),
+        h(NButton, {
+          text: true, size: 'tiny', type: 'primary', disabled: isLast,
+          onClick: () => handleMove(idx, 1)
+        }, { default: () => '↓' })
+      ]);
+    }
+  },
+  { title: '布局', key: 'layout', width: 130, render: row => layoutLabel(row.layout) },
   {
     title: '主题',
     key: 'theme',
@@ -84,7 +129,7 @@ const columns: DataTableColumns<Api.Www.SectionBlock> = [
     width: 80,
     render(row) {
       return h(NSwitch, {
-        value: row.is_visible,
+        value: Boolean(row.is_visible),
         onUpdateValue: (val: boolean) => handleToggleVisible(row, val)
       });
     }
@@ -101,7 +146,22 @@ const columns: DataTableColumns<Api.Www.SectionBlock> = [
       ]);
     }
   }
-];
+]);
+
+async function handleMove(index: number, direction: -1 | 1) {
+  const swapIndex = index + direction;
+  if (swapIndex < 0 || swapIndex >= tableData.value.length) return;
+
+  const newData = [...tableData.value];
+  [newData[index], newData[swapIndex]] = [newData[swapIndex], newData[index]];
+  const sortPayload = newData.map((item, i) => ({ id: item.id, sort_order: i }));
+
+  const { error } = await fetchSortSections(sortPayload);
+  if (!error) {
+    window.$message?.success('排序已更新');
+    loadData();
+  }
+}
 
 async function loadData() {
   loading.value = true;
@@ -149,8 +209,8 @@ function handleEdit(row: Api.Www.SectionBlock) {
   formData.theme = row.theme;
   formData.bg_type = row.bg_type;
   formData.bg_value = row.bg_value;
-  formData.overlay_enabled = row.overlay_enabled;
-  formData.overlay_opacity = row.overlay_opacity;
+  formData.overlay_enabled = Boolean(row.overlay_enabled);
+  formData.overlay_opacity = Number(row.overlay_opacity);
   formData.overline_zh = row.overline_zh;
   formData.overline_en = row.overline_en;
   formData.title_zh = row.title_zh;
@@ -168,7 +228,7 @@ function handleEdit(row: Api.Www.SectionBlock) {
   formData.media_url_zh = row.media_url_zh;
   formData.media_url_en = row.media_url_en;
   formData.video_url = row.video_url;
-  formData.is_visible = row.is_visible;
+  formData.is_visible = Boolean(row.is_visible);
   dialogVisible.value = true;
 }
 
@@ -239,7 +299,7 @@ onMounted(loadData);
       <NForm ref="formRef" :model="formData" label-placement="left" label-width="120">
         <NDivider>基础配置</NDivider>
         <NFormItem label="布局类型">
-          <NSelect v-model:value="formData.layout" :options="layoutOptions" />
+          <NSelect v-model:value="formData.layout" :options="layoutOptions" :render-label="renderLayoutLabel" :render-option="renderLayoutOption" />
         </NFormItem>
         <NFormItem label="主题">
           <NRadioGroup v-model:value="formData.theme">
@@ -251,6 +311,7 @@ onMounted(loadData);
             <NRadioButton value="color">纯色</NRadioButton>
             <NRadioButton value="image">图片</NRadioButton>
             <NRadioButton value="gradient">渐变</NRadioButton>
+            <NRadioButton value="video">视频</NRadioButton>
           </NRadioGroup>
         </NFormItem>
         <NFormItem label="背景值">
@@ -336,3 +397,12 @@ onMounted(loadData);
     </NModal>
   </NSpace>
 </template>
+
+<style>
+/* 布局类型下拉：收起态（输入框内）隐藏 desc，下拉展开列表里始终显示 desc */
+.n-base-selection-label .layout-desc,
+.n-base-selection-tag__content .layout-desc,
+.n-base-selection-tags .layout-desc {
+  display: none;
+}
+</style>
diff --git a/dashboard/frontend/src/views/www/product/list/index.vue b/dashboard/frontend/src/views/www/product/list/index.vue
index 0814482..628354c 100644
--- a/dashboard/frontend/src/views/www/product/list/index.vue
+++ b/dashboard/frontend/src/views/www/product/list/index.vue
@@ -74,7 +74,7 @@ const columns = computed<DataTableColumns<Api.Www.Product>>(() => [
     width: 80,
     render(row) {
       return h(NSwitch, {
-        value: row.is_visible,
+        value: Boolean(row.is_visible),
         onUpdateValue: (val: boolean) => handleToggleVisible(row, val)
       });
     }
@@ -155,7 +155,7 @@ function handleEdit(row: Api.Www.Product) {
   formData.intro_zh = row.intro_zh;
   formData.intro_en = row.intro_en;
   formData.cover_url = row.cover_url;
-  formData.is_visible = row.is_visible;
+  formData.is_visible = Boolean(row.is_visible);
   dialogVisible.value = true;
 }
 
diff --git a/dashboard/frontend/src/views/www/product/series/index.vue b/dashboard/frontend/src/views/www/product/series/index.vue
index 184ad43..25c080e 100644
--- a/dashboard/frontend/src/views/www/product/series/index.vue
+++ b/dashboard/frontend/src/views/www/product/series/index.vue
@@ -45,7 +45,7 @@ const columns: DataTableColumns<Api.Www.ProductSeries> = [
     width: 80,
     render(row) {
       return h(NSwitch, {
-        value: row.is_visible,
+        value: Boolean(row.is_visible),
         onUpdateValue: (val: boolean) => handleToggleVisible(row, val)
       });
     }
@@ -95,7 +95,7 @@ function handleEdit(row: Api.Www.ProductSeries) {
   formData.subtitle_zh = row.subtitle_zh;
   formData.subtitle_en = row.subtitle_en;
   formData.cover_url = row.cover_url;
-  formData.is_visible = row.is_visible;
+  formData.is_visible = Boolean(row.is_visible);
   dialogVisible.value = true;
 }
 
diff --git a/www/app/app.vue b/www/app/app.vue
index 2ee03d4..2b453a4 100644
--- a/www/app/app.vue
+++ b/www/app/app.vue
@@ -4,6 +4,10 @@ import enUS from '~~/i18n/locales/en.json';
 
 const { locale } = useI18n();
 
+// 应用启动时拉取全局站点配置（导航/页脚/社交/i18n 词条/产品）
+const siteStore = useSiteStore();
+siteStore.init();
+
 useHead({
   htmlAttrs: {
     lang: () => (locale.value === 'zh' ? 'zh-CN' : 'en-US')
@@ -11,10 +15,11 @@ useHead({
 });
 
 // 根据当前语言动态设置页面标题
+// i18n v10：useLocaleHead 选项为 { lang, dir, seo }（均默认 true）
 const head = useLocaleHead({
-  addDirAttribute: true,
-  identifierAttribute: 'id',
-  addSeoAttributes: true
+  lang: true,
+  dir: true,
+  seo: true
 });
 
 useHead({
diff --git a/www/app/components/AppFooter.vue b/www/app/components/AppFooter.vue
index df24c70..f9d3615 100644
--- a/www/app/components/AppFooter.vue
+++ b/www/app/components/AppFooter.vue
@@ -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>
diff --git a/www/app/components/AppHeader.vue b/www/app/components/AppHeader.vue
index b82b4cb..efb86c0 100644
--- a/www/app/components/AppHeader.vue
+++ b/www/app/components/AppHeader.vue
@@ -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>
diff --git a/www/app/components/section/SectionCta.vue b/www/app/components/section/SectionCta.vue
new file mode 100644
index 0000000..030641e
--- /dev/null
+++ b/www/app/components/section/SectionCta.vue
@@ -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>
diff --git a/www/app/components/section/SectionRenderer.vue b/www/app/components/section/SectionRenderer.vue
new file mode 100644
index 0000000..318ee11
--- /dev/null
+++ b/www/app/components/section/SectionRenderer.vue
@@ -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>
diff --git a/www/app/components/section/layouts/LayoutFeatureGrid.vue b/www/app/components/section/layouts/LayoutFeatureGrid.vue
new file mode 100644
index 0000000..db8cc60
--- /dev/null
+++ b/www/app/components/section/layouts/LayoutFeatureGrid.vue
@@ -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>
diff --git a/www/app/components/section/layouts/LayoutFullBanner.vue b/www/app/components/section/layouts/LayoutFullBanner.vue
new file mode 100644
index 0000000..325c03b
--- /dev/null
+++ b/www/app/components/section/layouts/LayoutFullBanner.vue
@@ -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>
diff --git a/www/app/components/section/layouts/LayoutGallery.vue b/www/app/components/section/layouts/LayoutGallery.vue
new file mode 100644
index 0000000..ce0153c
--- /dev/null
+++ b/www/app/components/section/layouts/LayoutGallery.vue
@@ -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>
diff --git a/www/app/components/section/layouts/LayoutHeroSplit.vue b/www/app/components/section/layouts/LayoutHeroSplit.vue
new file mode 100644
index 0000000..6dffd13
--- /dev/null
+++ b/www/app/components/section/layouts/LayoutHeroSplit.vue
@@ -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>
diff --git a/www/app/components/section/layouts/LayoutQuote.vue b/www/app/components/section/layouts/LayoutQuote.vue
new file mode 100644
index 0000000..cdfb38d
--- /dev/null
+++ b/www/app/components/section/layouts/LayoutQuote.vue
@@ -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>
diff --git a/www/app/components/section/layouts/LayoutScrollNarrative.vue b/www/app/components/section/layouts/LayoutScrollNarrative.vue
new file mode 100644
index 0000000..da4a9cd
--- /dev/null
+++ b/www/app/components/section/layouts/LayoutScrollNarrative.vue
@@ -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>
diff --git a/www/app/components/section/layouts/LayoutSpecTable.vue b/www/app/components/section/layouts/LayoutSpecTable.vue
new file mode 100644
index 0000000..499775a
--- /dev/null
+++ b/www/app/components/section/layouts/LayoutSpecTable.vue
@@ -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>
diff --git a/www/app/components/section/layouts/LayoutSplitContent.vue b/www/app/components/section/layouts/LayoutSplitContent.vue
new file mode 100644
index 0000000..08617df
--- /dev/null
+++ b/www/app/components/section/layouts/LayoutSplitContent.vue
@@ -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>
diff --git a/www/app/components/section/layouts/LayoutStats.vue b/www/app/components/section/layouts/LayoutStats.vue
new file mode 100644
index 0000000..f401a84
--- /dev/null
+++ b/www/app/components/section/layouts/LayoutStats.vue
@@ -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>
diff --git a/www/app/components/section/layouts/LayoutVideoShowcase.vue b/www/app/components/section/layouts/LayoutVideoShowcase.vue
new file mode 100644
index 0000000..e1aca89
--- /dev/null
+++ b/www/app/components/section/layouts/LayoutVideoShowcase.vue
@@ -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>
diff --git a/www/app/composables/useLinkResolver.ts b/www/app/composables/useLinkResolver.ts
new file mode 100644
index 0000000..757ee80
--- /dev/null
+++ b/www/app/composables/useLinkResolver.ts
@@ -0,0 +1,20 @@
+/**
+ * 链接解析：区分外部 URL 与站内路由
+ *
+ * 站内路由自动加当前语言前缀（中文无前缀，英文 /en 前缀）。
+ */
+export function useLinkResolver() {
+  const localePath = useLocalePath();
+
+  function isExternal(link: string): boolean {
+    return /^https?:\/\//.test(link);
+  }
+
+  function resolveLink(link: string): string {
+    if (!link) return '';
+    if (isExternal(link)) return link;
+    return localePath(link);
+  }
+
+  return { isExternal, resolveLink };
+}
diff --git a/www/app/composables/useRequest.ts b/www/app/composables/useRequest.ts
index b280e7c..4b8f315 100644
--- a/www/app/composables/useRequest.ts
+++ b/www/app/composables/useRequest.ts
@@ -1,28 +1,41 @@
 /**
  * 统一请求封装（基于 Nuxt 内置 ofetch）
- * 响应格式约定：{ code, data, message }，成功码 '0000'
+ *
+ * 与 dashboard 后端约定响应格式：{ code, msg, data }
+ * - code = 1：成功
+ * - code = 0：业务错误
+ * - code = 2：无数据
  */
 
-interface ApiResponse<T = unknown> {
-  code: string;
-  data: T;
-  message: string;
+export interface ApiResponse<T = unknown> {
+  code: number;
+  msg: string;
+  data: T | null;
+}
+
+export class ApiError extends Error {
+  code: number;
+  constructor(msg: string, code: number) {
+    super(msg);
+    this.code = code;
+  }
 }
 
 export function useRequest() {
   const config = useRuntimeConfig();
   const baseURL = config.public.apiBaseUrl as string;
 
-  async function request<T = unknown>(url: string, options?: Parameters<typeof $fetch>[1]): Promise<T> {
+  async function request<T = unknown>(url: string, options?: Parameters<typeof $fetch>[1]): Promise<T | null> {
     const res = await $fetch<ApiResponse<T>>(url, {
       baseURL,
       ...options
     });
 
-    if (res.code !== '0000') {
-      throw new Error(res.message || 'Request failed');
+    if (res.code === 0) {
+      throw new ApiError(res.msg || '请求失败', res.code);
     }
 
+    // code = 2（无数据）时 data 为 null，正常返回
     return res.data;
   }
 
diff --git a/www/app/composables/useSectionContent.ts b/www/app/composables/useSectionContent.ts
new file mode 100644
index 0000000..caca01e
--- /dev/null
+++ b/www/app/composables/useSectionContent.ts
@@ -0,0 +1,38 @@
+import type { SectionBlock, SectionConfig } from '~/types/site';
+
+/**
+ * 区块内容多语言解析
+ *
+ * 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) || '');
+  const mediaUrl = computed(() => (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');
+
+  return {
+    isEn,
+    overline,
+    title,
+    subtitle,
+    content,
+    ctaPrimaryText,
+    ctaSecondaryText,
+    mediaUrl,
+    config,
+    isDark
+  };
+}
diff --git a/www/app/composables/useSiteApi.ts b/www/app/composables/useSiteApi.ts
new file mode 100644
index 0000000..4d16d2e
--- /dev/null
+++ b/www/app/composables/useSiteApi.ts
@@ -0,0 +1,39 @@
+import type { GlobalConfig, NavConfig, SectionBlock, I18nEntry, ProductsData } from '~/types/site';
+
+/**
+ * 官网前台公开接口服务层
+ *
+ * 消费 dashboard 后端的 /api/site/* 只读接口（免鉴权）。
+ */
+export function useSiteApi() {
+  const { get } = useRequest();
+
+  /** 全局配置：站点信息 + 页脚 + 社交链接 + SEO 默认值 */
+  function getGlobal() {
+    return get<GlobalConfig>('/site/global');
+  }
+
+  /** 导航：可见入口 + 外观 */
+  function getNav() {
+    return get<NavConfig>('/site/nav');
+  }
+
+  /** Section 区块列表（按页面类型，仅可见） */
+  function getSections(pageType: string, productId?: number) {
+    const params: Record<string, unknown> = { page_type: pageType };
+    if (productId) params.product_id = productId;
+    return get<{ items: SectionBlock[]; total: number }>('/site/sections', params);
+  }
+
+  /** i18n 词条列表 */
+  function getI18n() {
+    return get<{ items: I18nEntry[]; total: number }>('/site/i18n');
+  }
+
+  /** 产品：可见系列及其下可见产品 */
+  function getProducts() {
+    return get<ProductsData>('/site/products');
+  }
+
+  return { getGlobal, getNav, getSections, getI18n, getProducts };
+}
diff --git a/www/app/layouts/default.vue b/www/app/layouts/default.vue
index 351ef66..c30c0b8 100644
--- a/www/app/layouts/default.vue
+++ b/www/app/layouts/default.vue
@@ -4,7 +4,7 @@
 <template>
   <div class="min-h-screen flex flex-col">
     <AppHeader />
-    <main class="flex-1">
+    <main class="flex-1 pt-64px">
       <slot />
     </main>
     <AppFooter />
diff --git a/www/app/pages/index.vue b/www/app/pages/index.vue
index 5325c7e..1c8f474 100644
--- a/www/app/pages/index.vue
+++ b/www/app/pages/index.vue
@@ -1,23 +1,46 @@
 <script setup lang="ts">
+import type { SectionBlock } from '~/types/site';
+
 const { t } = useI18n();
+const { getSections } = useSiteApi();
 
 useHead({
   title: () => `${t('app.name')} - ${t('nav.home')}`
 });
+
+// 拉取首页区块列表（仅可见，按 sort_order 排序）
+const sections = ref<SectionBlock[]>([]);
+const loading = ref(true);
+
+onMounted(async () => {
+  try {
+    const res = await getSections('home');
+    sections.value = res?.items ?? [];
+  } catch (e) {
+    console.error('[home] 加载区块失败', e);
+  } finally {
+    loading.value = false;
+  }
+});
 </script>
 
 <template>
   <div>
-    <!-- Hero 区块 -->
-    <section class="section-container py-96px flex-col-center text-center">
-      <h1 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white">
-        {{ t('app.name') }}
-      </h1>
-      <p class="mt-16px text-lg text-gray-500 dark:text-gray-400">
-        {{ t('app.slogan') }}
-      </p>
-    </section>
+    <!-- 加载中占位 -->
+    <div v-if="loading" class="min-h-screen flex-col-center">
+      <p class="text-sm text-gray-400">加载中…</p>
+    </div>
 
-    <!-- 页面内容由后台 CMS 配置的区块（Section）组合渲染 -->
+    <!-- 区块列表：由后台 CMS 配置的 Section 组合渲染 -->
+    <template v-else>
+      <SectionRenderer v-for="section in sections" :key="section.id" :section="section" />
+
+      <!-- 空状态：尚未配置任何区块 -->
+      <div v-if="!sections.length" class="min-h-screen flex-col-center px-16px text-center">
+        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">{{ t('app.name') }}</h1>
+        <p class="mt-12px text-gray-500 dark:text-gray-400">{{ t('app.slogan') }}</p>
+        <p class="mt-32px text-sm text-gray-400">首页区块内容待配置，请前往管理后台「官网管理 - 页面管理 - 首页区块」添加。</p>
+      </div>
+    </template>
   </div>
 </template>
diff --git a/www/app/stores/site.ts b/www/app/stores/site.ts
new file mode 100644
index 0000000..eb0887e
--- /dev/null
+++ b/www/app/stores/site.ts
@@ -0,0 +1,113 @@
+import { defineStore } from 'pinia';
+import type {
+  SiteSettings,
+  FooterSettings,
+  SocialLink,
+  SeoDefaults,
+  NavItem,
+  NavAppearance,
+  ProductSeries,
+  I18nEntry
+} from '~/types/site';
+
+/**
+ * 官网全局站点状态
+ *
+ * 在应用启动时一次性拉取全局配置、导航、产品（Mega Menu）与 i18n 词条，
+ * 供 AppHeader / AppFooter 及各页面共享使用。
+ */
+export const useSiteStore = defineStore('site', () => {
+  const { getGlobal, getNav, getI18n, getProducts } = useSiteApi();
+  const { locale } = useI18n();
+
+  // ===== 全局配置 =====
+  const site = ref<SiteSettings | null>(null);
+  const footer = ref<FooterSettings | null>(null);
+  const social = ref<SocialLink[]>([]);
+  const seo = ref<SeoDefaults | null>(null);
+
+  // ===== 导航 =====
+  const navItems = ref<NavItem[]>([]);
+  const navAppearance = ref<NavAppearance | null>(null);
+
+  // ===== 产品（导航 Mega Menu） =====
+  const productSeries = ref<ProductSeries[]>([]);
+
+  // ===== i18n 词条（dict_key -> entry） =====
+  const i18nMap = ref<Record<string, I18nEntry>>({});
+
+  const loaded = ref(false);
+  const loading = ref(false);
+
+  /** 应用启动时调用，并行拉取全局数据 */
+  async function init() {
+    if (loaded.value || loading.value) return;
+    loading.value = true;
+    try {
+      const [globalRes, navRes, i18nRes, productsRes] = await Promise.all([
+        getGlobal(),
+        getNav(),
+        getI18n(),
+        getProducts()
+      ]);
+
+      if (globalRes) {
+        site.value = globalRes.site;
+        footer.value = globalRes.footer;
+        social.value = globalRes.social ?? [];
+        seo.value = globalRes.seo;
+      }
+      if (navRes) {
+        navItems.value = navRes.items ?? [];
+        navAppearance.value = navRes.appearance;
+      }
+      if (i18nRes) {
+        const map: Record<string, I18nEntry> = {};
+        for (const entry of i18nRes.items ?? []) {
+          map[entry.dict_key] = entry;
+        }
+        i18nMap.value = map;
+      }
+      if (productsRes) {
+        productSeries.value = productsRes.series ?? [];
+      }
+
+      loaded.value = true;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  /**
+   * 翻译 CMS 动态词条（www_i18n_entries）
+   * @param key 词条 key，如 'btn.learn_more'
+   * @param fallback 词条缺失时的回退文案
+   */
+  function td(key: string, fallback = ''): string {
+    const entry = i18nMap.value[key];
+    if (!entry) return fallback || key;
+    const value = locale.value === 'en' ? entry.value_en : entry.value_zh;
+    return value || fallback || key;
+  }
+
+  /** 根据当前语言取导航入口名称 */
+  function navLabel(item: NavItem): string {
+    return locale.value === 'en' ? item.name_en : item.name_zh;
+  }
+
+  return {
+    site,
+    footer,
+    social,
+    seo,
+    navItems,
+    navAppearance,
+    productSeries,
+    i18nMap,
+    loaded,
+    loading,
+    init,
+    td,
+    navLabel
+  };
+});
diff --git a/www/app/types/site.ts b/www/app/types/site.ts
new file mode 100644
index 0000000..8ceec19
--- /dev/null
+++ b/www/app/types/site.ts
@@ -0,0 +1,219 @@
+/**
+ * 官网前台数据类型定义
+ *
+ * 字段名与 dashboard 后端 /api/site/* 响应的 snake_case 保持一致。
+ */
+
+// ===== 全局配置 =====
+export interface SiteSettings {
+  id: number;
+  site_title: string;
+  favicon_url: string;
+  logo_dark_url: string;
+  logo_light_url: string;
+}
+
+export interface FooterSettings {
+  id: number;
+  company_name: string;
+  company_address: string;
+  contact_phone: string;
+  contact_email: string;
+  copyright_text: string;
+  icp_number: string;
+  police_number: string;
+}
+
+export interface SocialLink {
+  id: number;
+  platform: string;
+  url: string;
+  qrcode_url: string;
+  sort_order: number;
+}
+
+export interface SeoDefaults {
+  id: number;
+  meta_description: string;
+  meta_keywords: string;
+  og_image_url: string;
+}
+
+export interface GlobalConfig {
+  site: SiteSettings | null;
+  footer: FooterSettings | null;
+  social: SocialLink[];
+  seo: SeoDefaults | null;
+}
+
+// ===== 导航 =====
+export type NavDisplayMode = 'text' | 'icon_text' | 'image' | 'image_text';
+
+export interface NavItem {
+  id: number;
+  name_zh: string;
+  name_en: string;
+  link: string;
+  is_visible: number;
+  sort_order: number;
+  display_mode: NavDisplayMode;
+  icon_name: string;
+  image_url: string;
+  open_new_tab: number;
+}
+
+export interface NavAppearance {
+  id: number;
+  homepage_style: 'transparent' | 'glass';
+  non_homepage_style: 'transparent' | 'glass';
+}
+
+export interface NavConfig {
+  items: NavItem[];
+  appearance: NavAppearance | null;
+}
+
+// ===== Section 区块 =====
+export type SectionLayout =
+  | 'hero_split'
+  | 'full_banner'
+  | 'feature_grid'
+  | 'split_content'
+  | 'gallery'
+  | 'stats'
+  | 'video_showcase'
+  | 'scroll_narrative'
+  | 'quote'
+  | 'spec_table';
+
+export interface SpecItem {
+  id: number;
+  spec_group_id: number;
+  name_zh: string;
+  name_en: string;
+  value_zh: string;
+  value_en: string;
+  sort_order: number;
+}
+
+export interface SpecGroup {
+  id: number;
+  section_block_id: number;
+  title_zh: string;
+  title_en: string;
+  sort_order: number;
+  default_visible: number;
+  items: SpecItem[];
+}
+
+// ===== Section config JSON 子结构（特性网格/数据统计/滚动叙事/图片画廊） =====
+export interface FeatureItem {
+  icon: string;
+  title_zh: string;
+  title_en: string;
+  desc_zh: string;
+  desc_en: string;
+}
+
+export interface StatItem {
+  value: string;
+  unit: string;
+  label_zh: string;
+  label_en: string;
+}
+
+export interface NarrativeStep {
+  title_zh: string;
+  title_en: string;
+  desc_zh: string;
+  desc_en: string;
+  image_url: string;
+}
+
+export interface GalleryImage {
+  url: string;
+  caption_zh: string;
+  caption_en: string;
+}
+
+export interface SectionConfig {
+  features?: FeatureItem[];
+  stats?: StatItem[];
+  steps?: NarrativeStep[];
+  images?: GalleryImage[];
+  [key: string]: unknown;
+}
+
+export interface SectionBlock {
+  id: number;
+  page_type: string;
+  product_id: number | null;
+  layout: SectionLayout;
+  theme: 'light' | 'dark';
+  bg_type: 'color' | 'image' | 'video';
+  bg_value: string;
+  overlay_enabled: number;
+  overlay_opacity: string;
+  overline_zh: string;
+  overline_en: string;
+  title_zh: string;
+  title_en: string;
+  subtitle_zh: string;
+  subtitle_en: string;
+  content_zh: string | null;
+  content_en: string | null;
+  cta_primary_zh: string;
+  cta_primary_en: string;
+  cta_primary_url: string;
+  cta_secondary_zh: string;
+  cta_secondary_en: string;
+  cta_secondary_url: string;
+  media_url_zh: string;
+  media_url_en: string;
+  video_url: string;
+  config: SectionConfig | null;
+  is_visible: number;
+  sort_order: number;
+  spec_groups?: SpecGroup[];
+}
+
+// ===== i18n 词条 =====
+export interface I18nEntry {
+  id: number;
+  dict_key: string;
+  value_zh: string;
+  value_en: string;
+  description: string;
+}
+
+// ===== 产品 =====
+export interface Product {
+  id: number;
+  series_id: number;
+  name_zh: string;
+  name_en: string;
+  slug: string;
+  intro_zh: string;
+  intro_en: string;
+  cover_url: string;
+  sort_order: number;
+  is_visible: number;
+}
+
+export interface ProductSeries {
+  id: number;
+  name_zh: string;
+  name_en: string;
+  overline: string;
+  subtitle_zh: string;
+  subtitle_en: string;
+  cover_url: string;
+  sort_order: number;
+  is_visible: number;
+  products: Product[];
+}
+
+export interface ProductsData {
+  series: ProductSeries[];
+  total: number;
+}
diff --git a/www/nuxt.config.ts b/www/nuxt.config.ts
index b24c63a..a0a5347 100644
--- a/www/nuxt.config.ts
+++ b/www/nuxt.config.ts
@@ -4,14 +4,26 @@ export default defineNuxtConfig({
 
   modules: ['@unocss/nuxt', '@nuxtjs/i18n', '@pinia/nuxt', '@vueuse/nuxt'],
 
+  css: ['~/assets/css/main.css'],
+
+  // 运行时配置：NUXT_PUBLIC_API_BASE_URL 环境变量可覆盖
+  runtimeConfig: {
+    public: {
+      apiBaseUrl: 'http://localhost:8083/api'
+    }
+  },
+
   // 国际化：中文默认无前缀，英文 /en 前缀
-  // v10 自动检测 i18n/locales/ 目录，无需 langDir / lazy
+  // v10：显式指定 locale 文件（相对于 i18n/ 目录的 langDir）
   i18n: {
     locales: [
-      { code: 'zh', language: 'zh-CN', name: '中文' },
-      { code: 'en', language: 'en-US', name: 'English' }
+      { code: 'zh', language: 'zh-CN', name: '中文', file: 'zh.json' },
+      { code: 'en', language: 'en-US', name: 'English', file: 'en.json' }
     ],
+    langDir: 'locales',
     defaultLocale: 'zh',
+    // SEO 标签（canonical / hreflang）所需的站点基础 URL，部署时通过环境变量配置
+    baseUrl: process.env.NUXT_PUBLIC_SITE_URL || 'http://localhost:3100',
     strategy: 'prefix_except_default',
     detectBrowserLanguage: {
       useCookie: true,