From 816281bf2dd677760e7f6fdf2720797ebb2a2274 Mon Sep 17 00:00:00 2001
From: eafonyang <eafonyang@gmail.com>
Date: Tue, 4 Aug 2026 19:18:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=98=E7=BD=91=E5=BC=80=E5=8F=91=200804?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dashboard/backend/src/routes/www/media.ts     |  86 ++-
 .../frontend/src/service/api/www-media.ts     |  13 +-
 .../views/www/components/MediaSelectInput.vue | 164 ++++++
 .../views/www/components/SectionManager.vue   | 520 ++++++++++++++++++
 .../src/views/www/global/basic/index.vue      |   7 +-
 .../src/views/www/global/seo/index.vue        |   3 +-
 .../frontend/src/views/www/media/index.vue    | 166 +++++-
 .../src/views/www/nav/items/index.vue         |   3 +-
 .../src/views/www/news/articles/index.vue     |   3 +-
 .../frontend/src/views/www/page-seo/index.vue |   3 +-
 .../src/views/www/page/home/index.vue         | 453 +--------------
 .../src/views/www/page/news-list/index.vue    |   3 +-
 .../src/views/www/page/product-list/index.vue |   3 +-
 .../src/views/www/product/list/index.vue      |  41 +-
 .../src/views/www/product/series/index.vue    |   3 +-
 www/app/app.vue                               |  14 +-
 www/app/components/AppHeader.vue              |  66 ++-
 .../components/section/SectionRenderer.vue    |  49 +-
 .../section/layouts/LayoutFeatureGrid.vue     |   2 +-
 .../section/layouts/LayoutFullBanner.vue      |   2 +-
 .../section/layouts/LayoutGallery.vue         |   2 +-
 .../section/layouts/LayoutHeroSplit.vue       |   2 +-
 .../section/layouts/LayoutScrollNarrative.vue |   2 +-
 .../section/layouts/LayoutSpecTable.vue       |   2 +-
 .../section/layouts/LayoutSplitContent.vue    |  38 +-
 .../section/layouts/LayoutStats.vue           |   2 +-
 .../section/layouts/LayoutVideoShowcase.vue   |   2 +-
 www/app/composables/useRequest.ts             |   5 +-
 www/app/composables/useSectionContent.ts      |   6 +-
 www/app/utils/resolveAssetUrl.ts              |  49 ++
 www/nuxt.config.ts                            |   6 +-
 31 files changed, 1177 insertions(+), 543 deletions(-)
 create mode 100644 dashboard/frontend/src/views/www/components/MediaSelectInput.vue
 create mode 100644 dashboard/frontend/src/views/www/components/SectionManager.vue
 create mode 100644 www/app/utils/resolveAssetUrl.ts

diff --git a/dashboard/backend/src/routes/www/media.ts b/dashboard/backend/src/routes/www/media.ts
index 2b7252c..eed7f42 100644
--- a/dashboard/backend/src/routes/www/media.ts
+++ b/dashboard/backend/src/routes/www/media.ts
@@ -17,16 +17,33 @@ const UPLOAD_DIR = path.resolve(process.cwd(), 'uploads');
 if (!fs.existsSync(UPLOAD_DIR)) fs.mkdirSync(UPLOAD_DIR, { recursive: true });
 
 const storage = multer.diskStorage({
-  destination: (_req, _file, cb) => {
-    const now = new Date();
-    const subDir = path.join(UPLOAD_DIR, `${now.getFullYear()}/${String(now.getMonth() + 1).padStart(2, '0')}`);
-    fs.mkdirSync(subDir, { recursive: true });
-    cb(null, subDir);
+  destination: (req, _file, cb) => {
+    const body = req.body as Record<string, string>;
+    const customDir = body.dir?.trim();
+    if (customDir) {
+      const dirPath = path.join(UPLOAD_DIR, customDir);
+      fs.mkdirSync(dirPath, { recursive: true });
+      cb(null, dirPath);
+    } else {
+      const now = new Date();
+      const subDir = path.join(UPLOAD_DIR, `${now.getFullYear()}/${String(now.getMonth() + 1).padStart(2, '0')}`);
+      fs.mkdirSync(subDir, { recursive: true });
+      cb(null, subDir);
+    }
   },
-  filename: (_req, file, cb) => {
+  filename: (req, file, cb) => {
     const ext = path.extname(file.originalname);
-    const name = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}${ext}`;
-    cb(null, name);
+    const body = req.body as Record<string, string>;
+    // auto_name 默认 true（不传或传 "true" 均视为自动生成）
+    const autoName = body.auto_name !== 'false';
+    if (autoName) {
+      cb(null, `${Date.now()}-${Math.random().toString(36).slice(2, 8)}${ext}`);
+    } else {
+      const customName = (body.custom_filename || 'file').trim();
+      // 去除用户可能误输入的扩展名
+      const cleanName = path.basename(customName, path.extname(customName));
+      cb(null, `${cleanName}${ext}`);
+    }
   },
 });
 
@@ -41,6 +58,22 @@ function getFileType(mimetype: string): string {
   return 'file';
 }
 
+/** 彻底删除素材：DB 记录 + 标签关联 + 磁盘文件 */
+async function deleteMediaCompletely(row: typeof wwwMedia.$inferSelect) {
+  await db.delete(wwwMediaTagMap).where(eq(wwwMediaTagMap.mediaId, row.id));
+  await db.delete(wwwMedia).where(eq(wwwMedia.id, row.id));
+  // 删除磁盘文件：file_path 形如 /uploads/xxx，拼接到 UPLOAD_DIR 并做路径安全校验
+  const rel = row.filePath.replace(/^\/uploads\//, '');
+  const abs = path.normalize(path.join(UPLOAD_DIR, rel));
+  if (abs.startsWith(UPLOAD_DIR + path.sep) && fs.existsSync(abs)) {
+    try {
+      fs.unlinkSync(abs);
+    } catch (err) {
+      logger.error(`[www/media] 删除磁盘文件失败 ${abs}: ${err instanceof Error ? err.message : err}`);
+    }
+  }
+}
+
 // ===== 6. 素材库 =====
 
 // GET /api/www/media?category=product&tag=xxx&keyword=xxx&file_type=image
@@ -117,8 +150,10 @@ router.post('/api/www/media/upload', upload.single('file'), async (req: Request,
     const category = (req.body.category as string) || 'other';
     const relativePath = `/uploads/${path.relative(UPLOAD_DIR, file.path)}`;
 
+    // 显示名（不含扩展名），DB 中不存扩展名
+    const displayName = path.parse(file.filename).name;
     const result = await db.insert(wwwMedia).values({
-      filename: file.originalname,
+      filename: displayName,
       filePath: relativePath,
       fileType,
       mimeType: file.mimetype,
@@ -184,6 +219,35 @@ router.post('/api/www/media/upload-batch', upload.array('files', 20), async (req
   }
 });
 
+// DELETE /api/www/media/batch（批量物理删除，跳过被引用的素材；放在 :id 前面避免路由冲突）
+router.delete('/api/www/media/batch', async (req: Request, res: Response) => {
+  try {
+    const ids = req.body.ids as number[];
+    if (!Array.isArray(ids) || ids.length === 0) {
+      res.json(ApiResponse.error('ids 为必填项'));
+      return;
+    }
+    const deleted: number[] = [];
+    const skipped: number[] = [];
+    for (const id of ids) {
+      const [existing] = await db.select().from(wwwMedia).where(eq(wwwMedia.id, id));
+      if (!existing || existing.refCount > 0) {
+        skipped.push(id);
+        continue;
+      }
+      await deleteMediaCompletely(existing);
+      deleted.push(id);
+    }
+    res.json(ApiResponse.success(
+      { deleted, skipped },
+      `成功删除 ${deleted.length} 个素材${skipped.length ? `，跳过 ${skipped.length} 个（不存在或被引用）` : ''}`
+    ));
+  } catch (e: unknown) {
+    logger.error(`[www/media/batch] DELETE error: ${e instanceof Error ? e.message : e}`);
+    res.json(ApiResponse.error('批量删除失败'));
+  }
+});
+
 // GET /api/www/media/tags（放在 :id 前面避免路由冲突）
 router.get('/api/www/media/tags', async (_req: Request, res: Response) => {
   try {
@@ -319,7 +383,7 @@ router.put('/api/www/media/:id', async (req: Request, res: Response) => {
   }
 });
 
-// DELETE /api/www/media/:id（软删除）
+// DELETE /api/www/media/:id（物理删除：DB 记录 + 磁盘文件）
 router.delete('/api/www/media/:id', async (req: Request, res: Response) => {
   try {
     const id = Number(req.params.id);
@@ -334,7 +398,7 @@ router.delete('/api/www/media/:id', async (req: Request, res: Response) => {
       return;
     }
 
-    await db.update(wwwMedia).set({ deletedAt: new Date() }).where(eq(wwwMedia.id, id));
+    await deleteMediaCompletely(existing);
     res.json(ApiResponse.success(null, '删除成功'));
   } catch (e: unknown) {
     logger.error(`[www/media/:id] DELETE error: ${e instanceof Error ? e.message : e}`);
diff --git a/dashboard/frontend/src/service/api/www-media.ts b/dashboard/frontend/src/service/api/www-media.ts
index 070129e..13a1d05 100644
--- a/dashboard/frontend/src/service/api/www-media.ts
+++ b/dashboard/frontend/src/service/api/www-media.ts
@@ -6,8 +6,15 @@ export function fetchGetMedia(params?: PageParams & { category?: string; tag?: s
   return request<Api.Common.PageResult<Api.Www.MediaItem>>({ url: '/www/media', method: 'get', params });
 }
 
-export function fetchUploadMedia(file: File, onProgress?: (percent: number) => void) {
+export function fetchUploadMedia(file: File, params?: { dir?: string; custom_filename?: string; auto_name?: boolean; category?: string; tags?: string }, onProgress?: (percent: number) => void) {
   const formData = new FormData();
+  // 文本字段必须在 file 之前 append：multer 按接收顺序流式解析，
+  // 若 file 在前，destination/filename 回调触发时 req.body 尚未填充，自定义目录/文件名会丢失
+  formData.append('auto_name', String(params?.auto_name ?? true));
+  if (params?.dir) formData.append('dir', params.dir);
+  if (params?.custom_filename) formData.append('custom_filename', params.custom_filename);
+  if (params?.category) formData.append('category', params.category);
+  if (params?.tags) formData.append('tags', params.tags);
   formData.append('file', file);
   return request<Api.Www.MediaItem>({
     url: '/www/media/upload',
@@ -34,6 +41,10 @@ export function fetchDeleteMediaItem(id: number) {
   return request({ url: `/www/media/${id}`, method: 'delete' });
 }
 
+export function fetchBatchDeleteMedia(ids: number[]) {
+  return request<{ deleted: number[]; skipped: number[] }>({ url: '/www/media/batch', method: 'delete', data: { ids } });
+}
+
 // ===== 素材标签 =====
 export function fetchGetMediaTags() {
   return request<Api.Www.MediaTag[]>({ url: '/www/media/tags', method: 'get' });
diff --git a/dashboard/frontend/src/views/www/components/MediaSelectInput.vue b/dashboard/frontend/src/views/www/components/MediaSelectInput.vue
new file mode 100644
index 0000000..4d89e89
--- /dev/null
+++ b/dashboard/frontend/src/views/www/components/MediaSelectInput.vue
@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue';
+import { fetchGetMedia, fetchGetMediaTags } from '@/service/api';
+
+/**
+ * 素材选择输入框
+ *
+ * 普通文本框 + 「素材」按钮：点击弹出素材列表，选定后自动把素材相对路径（/uploads/...）填入文本框。
+ * 用于官网管理下所有需要关联素材的字段。
+ */
+defineOptions({ name: 'MediaSelectInput' });
+
+const props = defineProps<{
+  value: string;
+  placeholder?: string;
+  maxlength?: number;
+  /** 打开弹框时的默认文件类型筛选（image/video/file） */
+  fileType?: string;
+  /** 外层容器宽度类名，默认 w-full */
+  inputClass?: string;
+}>();
+
+const emit = defineEmits<{ 'update:value': [value: string] }>();
+
+const model = computed({
+  get: () => props.value,
+  set: v => emit('update:value', v)
+});
+
+// ===== 素材选择弹框 =====
+const visible = ref(false);
+const loading = ref(false);
+const list = ref<Api.Www.MediaItem[]>([]);
+
+const searchForm = reactive({
+  file_type: '',
+  tag: null as string | null,
+  keyword: ''
+});
+
+const pagination = reactive({
+  page: 1,
+  pageSize: 18,
+  itemCount: 0
+});
+
+const fileTypeOptions = [
+  { label: '全部类型', value: '' },
+  { label: '图片', value: 'image' },
+  { label: '视频', value: 'video' },
+  { label: '文件', value: 'file' }
+];
+
+const tagOptions = ref<Api.Www.MediaTag[]>([]);
+const tagSelectOptions = computed(() => tagOptions.value.map(t => ({ label: t.tag_name, value: t.tag_name })));
+
+async function loadTags() {
+  const { data, error } = await fetchGetMediaTags();
+  if (!error && data) {
+    tagOptions.value = data;
+  }
+}
+
+async function loadData() {
+  loading.value = true;
+  const { data, error } = await fetchGetMedia({
+    skip: (pagination.page - 1) * pagination.pageSize,
+    limit: pagination.pageSize,
+    file_type: searchForm.file_type || undefined,
+    tag: searchForm.tag || undefined,
+    keyword: searchForm.keyword || undefined
+  });
+  loading.value = false;
+  if (!error && data) {
+    list.value = data.items || [];
+    pagination.itemCount = data.total || 0;
+  }
+}
+
+function openPicker() {
+  searchForm.file_type = props.fileType || '';
+  searchForm.tag = null;
+  searchForm.keyword = '';
+  pagination.page = 1;
+  visible.value = true;
+  loadTags();
+  loadData();
+}
+
+function handleSearch() {
+  pagination.page = 1;
+  loadData();
+}
+
+function handleSelect(item: Api.Www.MediaItem) {
+  emit('update:value', item.file_path);
+  visible.value = false;
+  window.$message?.success(`已选择素材「${item.filename}」`);
+}
+
+function handlePageChange(page: number) {
+  pagination.page = page;
+  loadData();
+}
+</script>
+
+<template>
+  <div class="flex items-center gap-8px" :class="inputClass || 'w-full'">
+    <NInput v-model:value="model" :placeholder="placeholder" :maxlength="maxlength" class="flex-1" clearable />
+    <NButton @click="openPicker">
+      <template #icon><SvgIcon icon="mdi:image-search-outline" /></template>
+      素材
+    </NButton>
+
+    <NModal v-model:show="visible" preset="card" title="选择素材" style="width: 860px; max-width: 95vw;" :bordered="false">
+      <NSpace vertical :size="12">
+        <NSpace align="center">
+          <NSelect v-model:value="searchForm.file_type" :options="fileTypeOptions" class="w-120px" @update:value="handleSearch" />
+          <NSelect v-model:value="searchForm.tag" :options="tagSelectOptions" clearable filterable placeholder="全部标签" class="w-160px" @update:value="handleSearch" />
+          <NInput v-model:value="searchForm.keyword" clearable placeholder="搜索文件名" class="w-220px" @keyup.enter="handleSearch" />
+          <NButton type="primary" @click="handleSearch">
+            <template #icon><SvgIcon icon="mdi:magnify" /></template>
+            搜索
+          </NButton>
+        </NSpace>
+
+        <div v-if="loading" class="py-40px text-center text-gray-400">加载中...</div>
+        <div v-else-if="!list.length" class="py-40px text-center text-gray-400">暂无素材</div>
+        <div v-else class="grid grid-cols-4 gap-12px" style="max-height: 420px; overflow-y: auto;">
+          <div
+            v-for="item in list"
+            :key="item.id"
+            class="cursor-pointer rounded-8px border border-solid border-transparent p-6px transition-colors hover:border-primary hover:bg-primary_hover"
+            @click="handleSelect(item)"
+          >
+            <div class="h-90px flex-center overflow-hidden rounded-4px bg-layout">
+              <img
+                v-if="item.file_type === 'image'"
+                :src="item.thumbnail_url || item.file_path"
+                :alt="item.filename"
+                class="h-full w-full object-cover"
+              >
+              <SvgIcon
+                v-else
+                :icon="item.file_type === 'video' ? 'mdi:video-outline' : 'mdi:file-outline'"
+                class="text-36px text-gray-400"
+              />
+            </div>
+            <p class="mt-4px truncate text-12px" :title="item.filename">{{ item.filename }}</p>
+          </div>
+        </div>
+
+        <div class="flex justify-end">
+          <NPagination
+            :page="pagination.page"
+            :page-size="pagination.pageSize"
+            :item-count="pagination.itemCount"
+            @update:page="handlePageChange"
+          />
+        </div>
+      </NSpace>
+    </NModal>
+  </div>
+</template>
diff --git a/dashboard/frontend/src/views/www/components/SectionManager.vue b/dashboard/frontend/src/views/www/components/SectionManager.vue
new file mode 100644
index 0000000..1da4638
--- /dev/null
+++ b/dashboard/frontend/src/views/www/components/SectionManager.vue
@@ -0,0 +1,520 @@
+<script setup lang="ts">
+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 ColorInput from '../page/home/components/ColorInput.vue';
+import MediaSelectInput from './MediaSelectInput.vue';
+import {
+  fetchCreateSection,
+  fetchDeleteSection,
+  fetchGetSections,
+  fetchSortSections,
+  fetchUpdateSection
+} from '@/service/api';
+
+/**
+ * Section 区块管理（可复用）
+ *
+ * 通过 pageType / productId 管理任意页面的区块列表：
+ * - 首页：pageType='home'
+ * - 产品详情：pageType='product_detail' + productId
+ */
+defineOptions({ name: 'SectionManager' });
+
+const props = withDefaults(
+  defineProps<{
+    pageType: string;
+    productId?: number | null;
+    title?: string;
+  }>(),
+  { productId: null, title: '区块管理' }
+);
+
+const loading = ref(false);
+const submitLoading = ref(false);
+const dialogVisible = ref(false);
+const dialogTitle = ref('');
+const formRef = ref<FormInst | null>(null);
+const tableData = ref<Api.Www.SectionBlock[]>([]);
+
+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' }
+];
+
+const formData = reactive({
+  id: null as number | null,
+  layout: 'hero_split',
+  theme: 'light',
+  overline_color: '',
+  title_color: '',
+  body_color: '',
+  bg_type: 'color',
+  bg_value: '',
+  overlay_enabled: false,
+  overlay_opacity: 0,
+  overline_zh: '',
+  overline_en: '',
+  title_zh: '',
+  title_en: '',
+  subtitle_zh: '',
+  subtitle_en: '',
+  content_zh: '',
+  content_en: '',
+  cta_primary_zh: '',
+  cta_primary_en: '',
+  cta_primary_url: '',
+  cta_secondary_zh: '',
+  cta_secondary_en: '',
+  cta_secondary_url: '',
+  media_url_zh: '',
+  media_url_en: '',
+  video_url: '',
+  is_visible: true,
+  config: { text_position: 'middle_left', width_percent: 100, bg_fit: 'cover', media_position: 'left' } as Record<string, unknown>
+});
+
+// 背景图/视频显示模式选项（bg_type 为图片/视频时生效）
+const bgFitOptions = [
+  { label: '铺满', value: 'cover' },
+  { label: '完整显示', value: 'contain' },
+  { label: '原尺寸', value: 'auto' }
+];
+
+// 九宫格文案位置（hero_split 专用）
+const textPositionOptions = [
+  { label: '左上', value: 'top_left' },
+  { label: '中上', value: 'top_center' },
+  { label: '右上', value: 'top_right' },
+  { label: '左中', value: 'middle_left' },
+  { label: '正中', value: 'middle_center' },
+  { label: '右中', value: 'middle_right' },
+  { label: '左下', value: 'bottom_left' },
+  { label: '中下', value: 'bottom_center' },
+  { label: '右下', value: 'bottom_right' }
+];
+
+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',
+    width: 80,
+    render(row) {
+      return h(NTag, { type: row.theme === 'dark' ? 'default' : 'success', size: 'small' }, {
+        default: () => (row.theme === 'dark' ? '深色' : '浅色')
+      });
+    }
+  },
+  { title: '标题（中）', key: 'title_zh', ellipsis: { tooltip: true } },
+  { title: '标题（英）', key: 'title_en', ellipsis: { tooltip: true } },
+  {
+    title: '可见',
+    key: 'is_visible',
+    width: 80,
+    render(row) {
+      return h(NSwitch, {
+        value: Boolean(row.is_visible),
+        onUpdateValue: (val: boolean) => handleToggleVisible(row, val)
+      });
+    }
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 180,
+    fixed: 'right',
+    render(row) {
+      return h('div', { class: 'flex-y-center gap-8px' }, [
+        h(NButton, { size: 'small', type: 'primary', onClick: () => handleEdit(row) }, { default: () => '编辑' }),
+        h(NButton, { size: 'small', type: 'error', onClick: () => handleDelete(row) }, { default: () => '删除' })
+      ]);
+    }
+  }
+]);
+
+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;
+  const params: { page_type: string; product_id?: number } = { page_type: props.pageType };
+  if (props.productId) params.product_id = props.productId;
+  const { data, error } = await fetchGetSections(params);
+  loading.value = false;
+  if (!error && data) {
+    tableData.value = data.items || [];
+  }
+}
+
+function handleAdd() {
+  dialogTitle.value = '新增 Section';
+  formData.id = null;
+  formData.layout = 'hero_split';
+  formData.theme = 'light';
+  formData.overline_color = '';
+  formData.title_color = '';
+  formData.body_color = '';
+  formData.bg_type = 'color';
+  formData.bg_value = '';
+  formData.overlay_enabled = false;
+  formData.overlay_opacity = 0;
+  formData.overline_zh = '';
+  formData.overline_en = '';
+  formData.title_zh = '';
+  formData.title_en = '';
+  formData.subtitle_zh = '';
+  formData.subtitle_en = '';
+  formData.content_zh = '';
+  formData.content_en = '';
+  formData.cta_primary_zh = '';
+  formData.cta_primary_en = '';
+  formData.cta_primary_url = '';
+  formData.cta_secondary_zh = '';
+  formData.cta_secondary_en = '';
+  formData.cta_secondary_url = '';
+  formData.media_url_zh = '';
+  formData.media_url_en = '';
+  formData.video_url = '';
+  formData.is_visible = true;
+  formData.config = { text_position: 'middle_left', width_percent: 100, bg_fit: 'cover', media_position: 'left' };
+  dialogVisible.value = true;
+}
+
+function handleEdit(row: Api.Www.SectionBlock) {
+  dialogTitle.value = '编辑 Section';
+  formData.id = row.id;
+  formData.layout = row.layout;
+  formData.theme = row.theme;
+  formData.overline_color = row.overline_color || '';
+  formData.title_color = row.title_color || '';
+  formData.body_color = row.body_color || '';
+  formData.bg_type = row.bg_type;
+  formData.bg_value = row.bg_value;
+  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;
+  formData.title_en = row.title_en;
+  formData.subtitle_zh = row.subtitle_zh;
+  formData.subtitle_en = row.subtitle_en;
+  formData.content_zh = row.content_zh;
+  formData.content_en = row.content_en;
+  formData.cta_primary_zh = row.cta_primary_zh;
+  formData.cta_primary_en = row.cta_primary_en;
+  formData.cta_primary_url = row.cta_primary_url;
+  formData.cta_secondary_zh = row.cta_secondary_zh;
+  formData.cta_secondary_en = row.cta_secondary_en;
+  formData.cta_secondary_url = row.cta_secondary_url;
+  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 = Boolean(row.is_visible);
+  const cfg = (row.config || {}) as Record<string, unknown>;
+  formData.config = {
+    ...cfg,
+    text_position: cfg.text_position || 'middle_left',
+    width_percent: typeof cfg.width_percent === 'number' ? cfg.width_percent : 100,
+    bg_fit: cfg.bg_fit === 'contain' || cfg.bg_fit === 'auto' ? cfg.bg_fit : 'cover',
+    media_position: cfg.media_position === 'right' ? 'right' : 'left'
+  };
+  dialogVisible.value = true;
+}
+
+async function handleToggleVisible(row: Api.Www.SectionBlock, val: boolean) {
+  const { error } = await fetchUpdateSection(row.id, { is_visible: val });
+  if (!error) {
+    row.is_visible = val;
+    window.$message?.success('已更新');
+  }
+}
+
+function handleDelete(row: Api.Www.SectionBlock) {
+  window.$dialog?.warning({
+    title: '警告',
+    content: `确定要删除 Section「${row.title_zh || row.layout}」吗？`,
+    positiveText: '确定',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      const { error } = await fetchDeleteSection(row.id);
+      if (!error) {
+        window.$message?.success('删除成功');
+        loadData();
+      }
+    }
+  });
+}
+
+async function handleSubmit() {
+  submitLoading.value = true;
+  const { id, ...payload } = formData;
+  const reqData = {
+    ...payload,
+    page_type: props.pageType,
+    product_id: props.productId || null
+  };
+  const { error } = id
+    ? await fetchUpdateSection(id, reqData)
+    : await fetchCreateSection(reqData);
+  submitLoading.value = false;
+  if (!error) {
+    window.$message?.success(id ? '更新成功' : '创建成功');
+    dialogVisible.value = false;
+    loadData();
+  }
+}
+
+onMounted(loadData);
+</script>
+
+<template>
+  <div>
+    <NCard :bordered="false" class="card-wrapper" :title="title" size="small">
+      <template #header-extra>
+        <NButton type="primary" @click="handleAdd">
+          <template #icon>
+            <SvgIcon icon="mdi:plus" />
+          </template>
+          新增区块
+        </NButton>
+      </template>
+
+      <NDataTable :loading="loading" :columns="columns" :data="tableData" :bordered="false" size="small" />
+    </NCard>
+
+    <NModal
+      v-model:show="dialogVisible"
+      preset="card"
+      :title="dialogTitle"
+      class="w-800px"
+      :mask-closable="false"
+    >
+      <NForm ref="formRef" :model="formData" label-placement="left" label-width="120">
+        <NDivider>基础配置</NDivider>
+        <NFormItem label="布局类型">
+          <NSelect v-model:value="formData.layout" :options="layoutOptions" :render-label="renderLayoutLabel" :render-option="renderLayoutOption" />
+        </NFormItem>
+        <NFormItem label="主题">
+          <NRadioGroup v-model:value="formData.theme">
+            <NRadio v-for="opt in themeOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</NRadio>
+          </NRadioGroup>
+        </NFormItem>
+        <NFormItem label="区块宽度">
+          <div class="w-full flex flex-col gap-8px">
+            <NInputNumber
+              :value="(formData.config.width_percent as number) ?? 100"
+              :min="30"
+              :max="100"
+              :step="5"
+              class="w-full"
+              @update:value="v => (formData.config.width_percent = v ?? 100)"
+            >
+              <template #suffix>%</template>
+            </NInputNumber>
+            <span class="text-12px opacity-60">占视口宽度百分比，居中显示；100 = 全宽。移动端（小屏）始终全宽</span>
+          </div>
+        </NFormItem>
+        <NDivider>文案颜色（留空=跟随主题默认色）</NDivider>
+        <NFormItem label="Overline 颜色">
+          <ColorInput v-model:value="formData.overline_color" />
+        </NFormItem>
+        <NFormItem label="标题颜色">
+          <ColorInput v-model:value="formData.title_color" />
+        </NFormItem>
+        <NFormItem label="副标题/正文颜色">
+          <ColorInput v-model:value="formData.body_color" />
+        </NFormItem>
+        <NFormItem label="背景类型">
+          <NRadioGroup v-model:value="formData.bg_type">
+            <NRadioButton value="color">纯色</NRadioButton>
+            <NRadioButton value="image">图片</NRadioButton>
+            <NRadioButton value="gradient">渐变</NRadioButton>
+            <NRadioButton value="video">视频</NRadioButton>
+          </NRadioGroup>
+        </NFormItem>
+        <NFormItem label="背景值">
+          <MediaSelectInput v-model:value="formData.bg_value" placeholder="颜色值或图片/视频路径（支持 /uploads/... 相对路径）" />
+        </NFormItem>
+        <NFormItem v-if="formData.bg_type === 'image' || formData.bg_type === 'video'" label="背景显示模式">
+          <NRadioGroup :value="(formData.config.bg_fit as string) ?? 'cover'" @update:value="v => (formData.config.bg_fit = v)">
+            <NRadio v-for="opt in bgFitOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</NRadio>
+          </NRadioGroup>
+        </NFormItem>
+        <NFormItem v-if="formData.layout === 'hero_split'" label="文案位置">
+          <div class="grid grid-cols-3 gap-4px">
+            <NButton
+              v-for="pos in textPositionOptions"
+              :key="pos.value"
+              size="tiny"
+              :type="formData.config.text_position === pos.value ? 'primary' : 'default'"
+              @click="formData.config.text_position = pos.value"
+            >
+              {{ pos.label }}
+            </NButton>
+          </div>
+        </NFormItem>
+        <NFormItem v-if="formData.layout === 'split_content'" label="媒体位置">
+          <NRadioGroup :value="(formData.config.media_position as string) ?? 'left'" @update:value="v => (formData.config.media_position = v)">
+            <NRadio value="left">图片/视频在左</NRadio>
+            <NRadio value="right">图片/视频在右</NRadio>
+          </NRadioGroup>
+        </NFormItem>
+        <NFormItem label="遮罩">
+          <NSpace align="center">
+            <NSwitch v-model:value="formData.overlay_enabled" />
+            <span>透明度</span>
+            <NSlider v-model:value="formData.overlay_opacity" :min="0" :max="1" :step="0.05" class="w-200px" />
+            <span>{{ formData.overlay_opacity.toFixed(2) }}</span>
+          </NSpace>
+        </NFormItem>
+
+        <NDivider>文案内容</NDivider>
+        <NFormItem label="Overline（中）">
+          <NInput v-model:value="formData.overline_zh" maxlength="100" />
+        </NFormItem>
+        <NFormItem label="Overline（英）">
+          <NInput v-model:value="formData.overline_en" maxlength="100" />
+        </NFormItem>
+        <NFormItem label="标题（中）">
+          <NInput v-model:value="formData.title_zh" maxlength="200" />
+        </NFormItem>
+        <NFormItem label="标题（英）">
+          <NInput v-model:value="formData.title_en" maxlength="200" />
+        </NFormItem>
+        <NFormItem label="副标题（中）">
+          <NInput v-model:value="formData.subtitle_zh" type="textarea" :autosize="{ minRows: 1 }" />
+        </NFormItem>
+        <NFormItem label="副标题（英）">
+          <NInput v-model:value="formData.subtitle_en" type="textarea" :autosize="{ minRows: 1 }" />
+        </NFormItem>
+        <NFormItem label="正文（中）">
+          <NInput v-model:value="formData.content_zh" type="textarea" :autosize="{ minRows: 2 }" />
+        </NFormItem>
+        <NFormItem label="正文（英）">
+          <NInput v-model:value="formData.content_en" type="textarea" :autosize="{ minRows: 2 }" />
+        </NFormItem>
+
+        <NDivider>按钮</NDivider>
+        <NFormItem label="主按钮（中）">
+          <NInput v-model:value="formData.cta_primary_zh" maxlength="50" />
+        </NFormItem>
+        <NFormItem label="主按钮（英）">
+          <NInput v-model:value="formData.cta_primary_en" maxlength="50" />
+        </NFormItem>
+        <NFormItem label="主按钮链接">
+          <NInput v-model:value="formData.cta_primary_url" maxlength="500" placeholder="站内路由（如 /products/luxsin-x8）或完整 URL" />
+        </NFormItem>
+        <NFormItem label="次按钮（中）">
+          <NInput v-model:value="formData.cta_secondary_zh" maxlength="50" />
+        </NFormItem>
+        <NFormItem label="次按钮（英）">
+          <NInput v-model:value="formData.cta_secondary_en" maxlength="50" />
+        </NFormItem>
+        <NFormItem label="次按钮链接">
+          <NInput v-model:value="formData.cta_secondary_url" maxlength="500" placeholder="站内路由（如 /products/luxsin-x8）或完整 URL" />
+        </NFormItem>
+
+        <NDivider>素材</NDivider>
+        <NFormItem label="图片（中）">
+          <MediaSelectInput v-model:value="formData.media_url_zh" file-type="image" :maxlength="500" placeholder="素材路径（支持 /uploads/... 相对路径）" />
+        </NFormItem>
+        <NFormItem label="图片（英）">
+          <MediaSelectInput v-model:value="formData.media_url_en" file-type="image" :maxlength="500" placeholder="素材路径（支持 /uploads/... 相对路径）" />
+        </NFormItem>
+        <NFormItem label="视频地址">
+          <MediaSelectInput v-model:value="formData.video_url" file-type="video" :maxlength="500" placeholder="视频路径或 URL（背景为视频或图文分栏媒体位使用）" />
+        </NFormItem>
+
+        <NDivider>显示</NDivider>
+        <NFormItem label="是否可见">
+          <NSwitch v-model:value="formData.is_visible" />
+        </NFormItem>
+      </NForm>
+      <template #footer>
+        <NSpace justify="end">
+          <NButton @click="dialogVisible = false">取消</NButton>
+          <NButton type="primary" :loading="submitLoading" @click="handleSubmit">确定</NButton>
+        </NSpace>
+      </template>
+    </NModal>
+  </div>
+</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/global/basic/index.vue b/dashboard/frontend/src/views/www/global/basic/index.vue
index 12be7ae..acfa018 100644
--- a/dashboard/frontend/src/views/www/global/basic/index.vue
+++ b/dashboard/frontend/src/views/www/global/basic/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue';
 import { type FormInst, type FormRules } from 'naive-ui';
+import MediaSelectInput from '../../components/MediaSelectInput.vue';
 import { fetchGetSiteSettings, fetchUpdateSiteSettings } from '@/service/api';
 
 defineOptions({ name: 'WwwGlobalBasic' });
@@ -52,13 +53,13 @@ onMounted(loadData);
         <NInput v-model:value="formData.site_title" maxlength="100" placeholder="如：乐笙 Luxsin" class="w-400px" />
       </NFormItem>
       <NFormItem label="Favicon" path="favicon_url">
-        <NInput v-model:value="formData.favicon_url" placeholder="素材路径，如 /uploads/brand/favicon.svg" class="w-400px" />
+        <MediaSelectInput v-model:value="formData.favicon_url" file-type="image" input-class="w-400px" placeholder="素材路径，如 /uploads/brand/favicon.svg" />
       </NFormItem>
       <NFormItem label="Logo（深色版）" path="logo_dark_url">
-        <NInput v-model:value="formData.logo_dark_url" placeholder="浅色区块上用的 Logo 路径" class="w-400px" />
+        <MediaSelectInput v-model:value="formData.logo_dark_url" file-type="image" input-class="w-400px" placeholder="浅色区块上用的 Logo 路径" />
       </NFormItem>
       <NFormItem label="Logo（浅色版）" path="logo_light_url">
-        <NInput v-model:value="formData.logo_light_url" placeholder="深色区块上用的 Logo 路径" class="w-400px" />
+        <MediaSelectInput v-model:value="formData.logo_light_url" file-type="image" input-class="w-400px" placeholder="深色区块上用的 Logo 路径" />
       </NFormItem>
     </NForm>
     <div class="flex justify-end">
diff --git a/dashboard/frontend/src/views/www/global/seo/index.vue b/dashboard/frontend/src/views/www/global/seo/index.vue
index 75fb09d..92ed00f 100644
--- a/dashboard/frontend/src/views/www/global/seo/index.vue
+++ b/dashboard/frontend/src/views/www/global/seo/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue';
+import MediaSelectInput from '../../components/MediaSelectInput.vue';
 import { fetchGetSeoDefaults, fetchUpdateSeoDefaults } from '@/service/api';
 
 defineOptions({ name: 'WwwGlobalSeo' });
@@ -44,7 +45,7 @@ onMounted(loadData);
         <NInput v-model:value="formData.meta_keywords" placeholder="逗号分隔，如：DAC,DMP,HiFi,音频" maxlength="300" class="w-500px" />
       </NFormItem>
       <NFormItem label="OG 默认图片">
-        <NInput v-model:value="formData.og_image_url" placeholder="素材路径，如 /uploads/brand/og-default.jpg" class="w-500px" />
+        <MediaSelectInput v-model:value="formData.og_image_url" file-type="image" input-class="w-500px" placeholder="素材路径，如 /uploads/brand/og-default.jpg" />
       </NFormItem>
     </NForm>
     <div class="flex justify-end">
diff --git a/dashboard/frontend/src/views/www/media/index.vue b/dashboard/frontend/src/views/www/media/index.vue
index c4b00eb..3368c70 100644
--- a/dashboard/frontend/src/views/www/media/index.vue
+++ b/dashboard/frontend/src/views/www/media/index.vue
@@ -2,6 +2,7 @@
 import { computed, h, onMounted, reactive, ref } from 'vue';
 import { NButton, NSpace, NTag, NUpload, type DataTableColumns, type UploadCustomRequestOptions } from 'naive-ui';
 import {
+  fetchBatchDeleteMedia,
   fetchDeleteMediaItem,
   fetchGetMedia,
   fetchGetMediaTags,
@@ -158,11 +159,18 @@ function handleRowClick(row: Api.Www.MediaItem) {
 
 const rowProps = (row: Api.Www.MediaItem) => ({
   style: 'cursor: pointer;',
-  onClick: () => handleRowClick(row)
+  onClick: (e: MouseEvent) => {
+    // 点击复选框列时不触发复制链接
+    if ((e.target as HTMLElement).closest('.n-checkbox, .n-data-table-td--selection')) return;
+    handleRowClick(row);
+  }
 });
 
 // ===== 表格列 =====
+const checkedIds = ref<number[]>([]);
+
 const columns = computed<DataTableColumns<Api.Www.MediaItem>>(() => [
+  { type: 'selection' },
   { title: 'ID', key: 'id', width: 60 },
   {
     title: '预览',
@@ -257,21 +265,68 @@ function handleReset() {
   loadData();
 }
 
-async function handleUpload({ file, onFinish, onError }: UploadCustomRequestOptions) {
-  const { error } = await fetchUploadMedia(file.file as File);
+// ===== 上传弹窗 =====
+const uploadVisible = ref(false);
+const uploadLoading = ref(false);
+const uploadForm = reactive({
+  dir: '',
+  filename: '',
+  autoName: true,
+  category: 'other',
+  tags: [] as string[]
+});
+const selectedFile = ref<File | null>(null);
+
+function resetUploadForm() {
+  uploadForm.dir = '';
+  uploadForm.filename = '';
+  uploadForm.autoName = true;
+  uploadForm.category = 'other';
+  uploadForm.tags = [];
+  selectedFile.value = null;
+}
+
+function openUploadDialog() {
+  resetUploadForm();
+  uploadVisible.value = true;
+}
+
+/** 文件被拖入/选中时，捕获文件信息并自动生成文件名 */
+function handleUploadCapture({ file: uploadFile, onFinish }: UploadCustomRequestOptions) {
+  if (uploadFile.file) {
+    selectedFile.value = uploadFile.file;
+    uploadForm.autoName = true;
+    uploadForm.filename = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+  }
+  onFinish();
+}
+
+async function handleUploadSubmit() {
+  if (!selectedFile.value) {
+    window.$message?.warning('请选择文件');
+    return;
+  }
+  uploadLoading.value = true;
+  const { error } = await fetchUploadMedia(selectedFile.value, {
+    dir: uploadForm.dir || undefined,
+    auto_name: uploadForm.autoName,
+    custom_filename: uploadForm.autoName ? undefined : uploadForm.filename,
+    category: uploadForm.category,
+    tags: uploadForm.tags.join(',')
+  });
+  uploadLoading.value = false;
   if (!error) {
-    window.$message?.success(`${file.name} 上传成功`);
-    onFinish();
+    window.$message?.success('上传成功');
+    uploadVisible.value = false;
+    resetUploadForm();
     loadData();
-  } else {
-    onError();
   }
 }
 
 function handleDelete(row: Api.Www.MediaItem) {
   window.$dialog?.warning({
     title: '警告',
-    content: `确定要删除素材「${row.filename}」吗？${row.ref_count > 0 ? `该素材有 ${row.ref_count} 处引用。` : ''}`,
+    content: `确定要删除素材「${row.filename}」吗？对应磁盘文件也将被删除，此操作不可恢复。${row.ref_count > 0 ? `该素材有 ${row.ref_count} 处引用。` : ''}`,
     positiveText: '确定',
     negativeText: '取消',
     onPositiveClick: async () => {
@@ -284,6 +339,27 @@ function handleDelete(row: Api.Www.MediaItem) {
   });
 }
 
+function handleBatchDelete() {
+  if (checkedIds.value.length === 0) return;
+  window.$dialog?.warning({
+    title: '警告',
+    content: `确定要删除选中的 ${checkedIds.value.length} 个素材吗？对应磁盘文件也将被删除，此操作不可恢复。被引用的素材将自动跳过。`,
+    positiveText: '确定',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      const { data, error } = await fetchBatchDeleteMedia(checkedIds.value);
+      if (!error && data) {
+        const skippedCount = data.skipped?.length || 0;
+        window.$message?.success(
+          `已删除 ${data.deleted?.length || 0} 个素材${skippedCount ? `，${skippedCount} 个被引用已跳过` : ''}`
+        );
+        checkedIds.value = [];
+        loadData();
+      }
+    }
+  });
+}
+
 function handlePageChange(page: number) {
   pagination.page = page;
   loadData();
@@ -332,15 +408,30 @@ onMounted(() => {
 
     <NCard :bordered="false" class="card-wrapper" title="素材列表" size="small">
       <template #header-extra>
-        <NUpload :custom-request="handleUpload" :show-file-list="false" multiple>
-          <NButton type="primary">
+        <NSpace>
+          <NButton v-if="checkedIds.length" type="error" @click="handleBatchDelete">
+            <template #icon><SvgIcon icon="mdi:delete" /></template>
+            批量删除 ({{ checkedIds.length }})
+          </NButton>
+          <NButton type="primary" @click="openUploadDialog">
             <template #icon><SvgIcon icon="mdi:upload" /></template>
             上传素材
           </NButton>
-        </NUpload>
+        </NSpace>
       </template>
 
-      <NDataTable :loading="loading" :columns="columns" :data="tableData" :bordered="false" size="small" :scroll-x="900" :row-props="rowProps" />
+      <NDataTable
+        :loading="loading"
+        :columns="columns"
+        :data="tableData"
+        :bordered="false"
+        size="small"
+        :scroll-x="900"
+        :row-props="rowProps"
+        :row-key="(row: Api.Www.MediaItem) => row.id"
+        :checked-row-keys="checkedIds"
+        @update:checked-row-keys="keys => (checkedIds = keys as number[])"
+      />
 
       <div class="mt-16px flex justify-end">
         <NPagination
@@ -447,5 +538,56 @@ onMounted(() => {
       </NSpace>
     </template>
   </NModal>
+
+  <!-- 上传弹窗：目录 + 文件名 + 拖拽文件 -->
+  <NModal v-model:show="uploadVisible" preset="card" title="上传素材" style="width: 520px; max-width: 92vw;" :bordered="false">
+    <NForm :model="uploadForm" label-placement="left" label-width="80">
+      <NFormItem label="目录">
+        <NInput v-model:value="uploadForm.dir" placeholder="留空使用默认路径 uploads/年/月" />
+      </NFormItem>
+      <NFormItem label="文件名">
+        <div class="w-full flex flex-col gap-8px">
+          <NInput v-model:value="uploadForm.filename" :disabled="uploadForm.autoName" placeholder="选择文件后自动生成" />
+          <NCheckbox v-model:checked="uploadForm.autoName">系统生成（取消勾选后可自定义文件名）</NCheckbox>
+        </div>
+      </NFormItem>
+      <NFormItem label="分类">
+        <NSelect v-model:value="uploadForm.category" :options="categoryOptions" />
+      </NFormItem>
+      <NFormItem label="标签">
+        <NSelect
+          v-model:value="uploadForm.tags"
+          :options="tagSelectOptions"
+          multiple
+          filterable
+          tag
+          clearable
+          placeholder="选择已有标签或输入新标签后回车"
+        />
+      </NFormItem>
+      <NFormItem label="文件">
+        <NUpload
+          :custom-request="handleUploadCapture"
+          :show-file-list="false"
+          accept="*"
+          class="w-full"
+        >
+          <NUploadDragger>
+            <div class="flex-center flex-col py-40px gap-8px" style="border: 2px dashed #d9d9d9; border-radius: 8px; cursor: pointer;">
+              <SvgIcon icon="mdi:upload" class="text-32px text-gray-400" />
+              <p v-if="selectedFile" class="text-14px text-primary">{{ selectedFile.name }}</p>
+              <p v-else class="text-14px text-gray-500">点击或拖拽文件到此区域上传</p>
+            </div>
+          </NUploadDragger>
+        </NUpload>
+      </NFormItem>
+    </NForm>
+    <template #footer>
+      <NSpace justify="end">
+        <NButton @click="uploadVisible = false">取消</NButton>
+        <NButton type="primary" :loading="uploadLoading" @click="handleUploadSubmit">确认上传</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 8f6d911..10cfe6f 100644
--- a/dashboard/frontend/src/views/www/nav/items/index.vue
+++ b/dashboard/frontend/src/views/www/nav/items/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { h, onMounted, reactive, ref } from 'vue';
 import { NButton, NSpace, NSwitch, NTag, type DataTableColumns, type FormInst, type FormRules } from 'naive-ui';
+import MediaSelectInput from '../../components/MediaSelectInput.vue';
 import {
   fetchCreateNavItem,
   fetchDeleteNavItem,
@@ -204,7 +205,7 @@ onMounted(loadData);
           <NInput v-model:value="formData.icon_name" placeholder="如：mdi:package-variant-closed" />
         </NFormItem>
         <NFormItem v-if="formData.display_mode === 'image'" label="图片路径">
-          <NInput v-model:value="formData.image_url" placeholder="素材路径" />
+          <MediaSelectInput v-model:value="formData.image_url" file-type="image" placeholder="素材路径" />
         </NFormItem>
         <NFormItem label="是否可见">
           <NSwitch v-model:value="formData.is_visible" />
diff --git a/dashboard/frontend/src/views/www/news/articles/index.vue b/dashboard/frontend/src/views/www/news/articles/index.vue
index 9bd6d14..e83b64e 100644
--- a/dashboard/frontend/src/views/www/news/articles/index.vue
+++ b/dashboard/frontend/src/views/www/news/articles/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, h, onMounted, reactive, ref } from 'vue';
 import { NButton, NSpace, NTag, type DataTableColumns, type FormInst, type FormRules } from 'naive-ui';
+import MediaSelectInput from '../../components/MediaSelectInput.vue';
 import {
   fetchCreateNewsArticle,
   fetchDeleteNewsArticle,
@@ -273,7 +274,7 @@ onMounted(loadData);
           <NInput v-model:value="formData.summary_en" type="textarea" :autosize="{ minRows: 2 }" maxlength="300" />
         </NFormItem>
         <NFormItem label="封面图">
-          <NInput v-model:value="formData.cover_url" placeholder="素材路径" />
+          <MediaSelectInput v-model:value="formData.cover_url" file-type="image" placeholder="素材路径" />
         </NFormItem>
         <NFormItem label="正文（中）">
           <NInput v-model:value="formData.content_zh" type="textarea" :autosize="{ minRows: 6, maxRows: 15 }" placeholder="支持 HTML" />
diff --git a/dashboard/frontend/src/views/www/page-seo/index.vue b/dashboard/frontend/src/views/www/page-seo/index.vue
index 04d4317..6acc74b 100644
--- a/dashboard/frontend/src/views/www/page-seo/index.vue
+++ b/dashboard/frontend/src/views/www/page-seo/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { h, onMounted, reactive, ref } from 'vue';
 import { NButton, NSpace, type DataTableColumns } from 'naive-ui';
+import MediaSelectInput from '../components/MediaSelectInput.vue';
 import { fetchGetPageSeo, fetchUpdatePageSeo } from '@/service/api';
 
 defineOptions({ name: 'WwwPageSeo' });
@@ -139,7 +140,7 @@ onMounted(() => {
           <NInput v-model:value="formData.meta_keywords" maxlength="300" placeholder="逗号分隔" />
         </NFormItem>
         <NFormItem label="OG 图片">
-          <NInput v-model:value="formData.og_image_url" placeholder="素材路径" />
+          <MediaSelectInput v-model:value="formData.og_image_url" file-type="image" placeholder="素材路径" />
         </NFormItem>
       </NForm>
       <template #footer>
diff --git a/dashboard/frontend/src/views/www/page/home/index.vue b/dashboard/frontend/src/views/www/page/home/index.vue
index c4fea8b..e84f0bf 100644
--- a/dashboard/frontend/src/views/www/page/home/index.vue
+++ b/dashboard/frontend/src/views/www/page/home/index.vue
@@ -1,458 +1,9 @@
 <script setup lang="ts">
-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 ColorInput from './components/ColorInput.vue';
-import {
-  fetchCreateSection,
-  fetchDeleteSection,
-  fetchGetSections,
-  fetchSortSections,
-  fetchUpdateSection
-} from '@/service/api';
+import SectionManager from '../../components/SectionManager.vue';
 
 defineOptions({ name: 'WwwPageHome' });
-
-const loading = ref(false);
-const submitLoading = ref(false);
-const dialogVisible = ref(false);
-const dialogTitle = ref('');
-const formRef = ref<FormInst | null>(null);
-const tableData = ref<Api.Www.SectionBlock[]>([]);
-
-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' }
-];
-
-const formData = reactive({
-  id: null as number | null,
-  layout: 'hero_split',
-  theme: 'light',
-  overline_color: '',
-  title_color: '',
-  body_color: '',
-  bg_type: 'color',
-  bg_value: '',
-  overlay_enabled: false,
-  overlay_opacity: 0,
-  overline_zh: '',
-  overline_en: '',
-  title_zh: '',
-  title_en: '',
-  subtitle_zh: '',
-  subtitle_en: '',
-  content_zh: '',
-  content_en: '',
-  cta_primary_zh: '',
-  cta_primary_en: '',
-  cta_primary_url: '',
-  cta_secondary_zh: '',
-  cta_secondary_en: '',
-  cta_secondary_url: '',
-  media_url_zh: '',
-  media_url_en: '',
-  video_url: '',
-  is_visible: true,
-  config: { text_position: 'middle_left' } as Record<string, unknown>
-});
-
-// 九宫格文案位置（hero_split 专用）
-const textPositionOptions = [
-  { label: '左上', value: 'top_left' },
-  { label: '中上', value: 'top_center' },
-  { label: '右上', value: 'top_right' },
-  { label: '左中', value: 'middle_left' },
-  { label: '正中', value: 'middle_center' },
-  { label: '右中', value: 'middle_right' },
-  { label: '左下', value: 'bottom_left' },
-  { label: '中下', value: 'bottom_center' },
-  { label: '右下', value: 'bottom_right' }
-];
-
-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',
-    width: 80,
-    render(row) {
-      return h(NTag, { type: row.theme === 'dark' ? 'default' : 'success', size: 'small' }, {
-        default: () => (row.theme === 'dark' ? '深色' : '浅色')
-      });
-    }
-  },
-  { title: '标题（中）', key: 'title_zh', ellipsis: { tooltip: true } },
-  { title: '标题（英）', key: 'title_en', ellipsis: { tooltip: true } },
-  {
-    title: '可见',
-    key: 'is_visible',
-    width: 80,
-    render(row) {
-      return h(NSwitch, {
-        value: Boolean(row.is_visible),
-        onUpdateValue: (val: boolean) => handleToggleVisible(row, val)
-      });
-    }
-  },
-  {
-    title: '操作',
-    key: 'actions',
-    width: 180,
-    fixed: 'right',
-    render(row) {
-      return h('div', { class: 'flex-y-center gap-8px' }, [
-        h(NButton, { size: 'small', type: 'primary', onClick: () => handleEdit(row) }, { default: () => '编辑' }),
-        h(NButton, { size: 'small', type: 'error', onClick: () => handleDelete(row) }, { default: () => '删除' })
-      ]);
-    }
-  }
-]);
-
-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;
-  const { data, error } = await fetchGetSections({ page_type: 'home' });
-  loading.value = false;
-  if (!error && data) {
-    tableData.value = data.items || [];
-  }
-}
-
-function handleAdd() {
-  dialogTitle.value = '新增 Section';
-  formData.id = null;
-  formData.layout = 'hero_split';
-  formData.theme = 'light';
-  formData.overline_color = '';
-  formData.title_color = '';
-  formData.body_color = '';
-  formData.bg_type = 'color';
-  formData.bg_value = '';
-  formData.overlay_enabled = false;
-  formData.overlay_opacity = 0;
-  formData.overline_zh = '';
-  formData.overline_en = '';
-  formData.title_zh = '';
-  formData.title_en = '';
-  formData.subtitle_zh = '';
-  formData.subtitle_en = '';
-  formData.content_zh = '';
-  formData.content_en = '';
-  formData.cta_primary_zh = '';
-  formData.cta_primary_en = '';
-  formData.cta_primary_url = '';
-  formData.cta_secondary_zh = '';
-  formData.cta_secondary_en = '';
-  formData.cta_secondary_url = '';
-  formData.media_url_zh = '';
-  formData.media_url_en = '';
-  formData.video_url = '';
-  formData.is_visible = true;
-  formData.config = { text_position: 'middle_left' };
-  dialogVisible.value = true;
-}
-
-function handleEdit(row: Api.Www.SectionBlock) {
-  dialogTitle.value = '编辑 Section';
-  formData.id = row.id;
-  formData.layout = row.layout;
-  formData.theme = row.theme;
-  formData.overline_color = row.overline_color || '';
-  formData.title_color = row.title_color || '';
-  formData.body_color = row.body_color || '';
-  formData.bg_type = row.bg_type;
-  formData.bg_value = row.bg_value;
-  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;
-  formData.title_en = row.title_en;
-  formData.subtitle_zh = row.subtitle_zh;
-  formData.subtitle_en = row.subtitle_en;
-  formData.content_zh = row.content_zh;
-  formData.content_en = row.content_en;
-  formData.cta_primary_zh = row.cta_primary_zh;
-  formData.cta_primary_en = row.cta_primary_en;
-  formData.cta_primary_url = row.cta_primary_url;
-  formData.cta_secondary_zh = row.cta_secondary_zh;
-  formData.cta_secondary_en = row.cta_secondary_en;
-  formData.cta_secondary_url = row.cta_secondary_url;
-  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 = Boolean(row.is_visible);
-  const cfg = (row.config || {}) as Record<string, unknown>;
-  formData.config = { ...cfg, text_position: cfg.text_position || 'middle_left' };
-  dialogVisible.value = true;
-}
-
-async function handleToggleVisible(row: Api.Www.SectionBlock, val: boolean) {
-  const { error } = await fetchUpdateSection(row.id, { is_visible: val });
-  if (!error) {
-    row.is_visible = val;
-    window.$message?.success('已更新');
-  }
-}
-
-function handleDelete(row: Api.Www.SectionBlock) {
-  window.$dialog?.warning({
-    title: '警告',
-    content: `确定要删除 Section「${row.title_zh || row.layout}」吗？`,
-    positiveText: '确定',
-    negativeText: '取消',
-    onPositiveClick: async () => {
-      const { error } = await fetchDeleteSection(row.id);
-      if (!error) {
-        window.$message?.success('删除成功');
-        loadData();
-      }
-    }
-  });
-}
-
-async function handleSubmit() {
-  submitLoading.value = true;
-  const { id, ...payload } = formData;
-  const reqData = { ...payload, page_type: 'home' };
-  const { error } = id
-    ? await fetchUpdateSection(id, reqData)
-    : await fetchCreateSection(reqData);
-  submitLoading.value = false;
-  if (!error) {
-    window.$message?.success(id ? '更新成功' : '创建成功');
-    dialogVisible.value = false;
-    loadData();
-  }
-}
-
-onMounted(loadData);
 </script>
 
 <template>
-  <NSpace vertical :size="16">
-    <NCard :bordered="false" class="card-wrapper" title="首页区块" size="small">
-      <template #header-extra>
-        <NButton type="primary" @click="handleAdd">
-          <template #icon>
-            <SvgIcon icon="mdi:plus" />
-          </template>
-          新增区块
-        </NButton>
-      </template>
-
-      <NDataTable :loading="loading" :columns="columns" :data="tableData" :bordered="false" size="small" />
-    </NCard>
-
-    <NModal
-      v-model:show="dialogVisible"
-      preset="card"
-      :title="dialogTitle"
-      class="w-800px"
-      :mask-closable="false"
-    >
-      <NForm ref="formRef" :model="formData" label-placement="left" label-width="120">
-        <NDivider>基础配置</NDivider>
-        <NFormItem label="布局类型">
-          <NSelect v-model:value="formData.layout" :options="layoutOptions" :render-label="renderLayoutLabel" :render-option="renderLayoutOption" />
-        </NFormItem>
-        <NFormItem label="主题">
-          <NRadioGroup v-model:value="formData.theme">
-            <NRadio v-for="opt in themeOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</NRadio>
-          </NRadioGroup>
-        </NFormItem>
-        <NDivider>文案颜色（留空=跟随主题默认色）</NDivider>
-        <NFormItem label="Overline 颜色">
-          <ColorInput v-model:value="formData.overline_color" />
-        </NFormItem>
-        <NFormItem label="标题颜色">
-          <ColorInput v-model:value="formData.title_color" />
-        </NFormItem>
-        <NFormItem label="副标题/正文颜色">
-          <ColorInput v-model:value="formData.body_color" />
-        </NFormItem>
-        <NFormItem label="背景类型">
-          <NRadioGroup v-model:value="formData.bg_type">
-            <NRadioButton value="color">纯色</NRadioButton>
-            <NRadioButton value="image">图片</NRadioButton>
-            <NRadioButton value="gradient">渐变</NRadioButton>
-            <NRadioButton value="video">视频</NRadioButton>
-          </NRadioGroup>
-        </NFormItem>
-        <NFormItem label="背景值">
-          <NInput v-model:value="formData.bg_value" placeholder="颜色值或图片/视频路径" />
-        </NFormItem>
-        <NFormItem v-if="formData.layout === 'hero_split'" label="文案位置">
-          <div class="grid grid-cols-3 gap-4px">
-            <NButton
-              v-for="pos in textPositionOptions"
-              :key="pos.value"
-              size="tiny"
-              :type="formData.config.text_position === pos.value ? 'primary' : 'default'"
-              @click="formData.config.text_position = pos.value"
-            >
-              {{ pos.label }}
-            </NButton>
-          </div>
-        </NFormItem>
-        <NFormItem label="遮罩">
-          <NSpace align="center">
-            <NSwitch v-model:value="formData.overlay_enabled" />
-            <span>透明度</span>
-            <NSlider v-model:value="formData.overlay_opacity" :min="0" :max="1" :step="0.05" class="w-200px" />
-            <span>{{ formData.overlay_opacity.toFixed(2) }}</span>
-          </NSpace>
-        </NFormItem>
-
-        <NDivider>文案内容</NDivider>
-        <NFormItem label="Overline（中）">
-          <NInput v-model:value="formData.overline_zh" maxlength="100" />
-        </NFormItem>
-        <NFormItem label="Overline（英）">
-          <NInput v-model:value="formData.overline_en" maxlength="100" />
-        </NFormItem>
-        <NFormItem label="标题（中）">
-          <NInput v-model:value="formData.title_zh" maxlength="200" />
-        </NFormItem>
-        <NFormItem label="标题（英）">
-          <NInput v-model:value="formData.title_en" maxlength="200" />
-        </NFormItem>
-        <NFormItem label="副标题（中）">
-          <NInput v-model:value="formData.subtitle_zh" type="textarea" :autosize="{ minRows: 1 }" />
-        </NFormItem>
-        <NFormItem label="副标题（英）">
-          <NInput v-model:value="formData.subtitle_en" type="textarea" :autosize="{ minRows: 1 }" />
-        </NFormItem>
-        <NFormItem label="正文（中）">
-          <NInput v-model:value="formData.content_zh" type="textarea" :autosize="{ minRows: 2 }" />
-        </NFormItem>
-        <NFormItem label="正文（英）">
-          <NInput v-model:value="formData.content_en" type="textarea" :autosize="{ minRows: 2 }" />
-        </NFormItem>
-
-        <NDivider>按钮</NDivider>
-        <NFormItem label="主按钮（中）">
-          <NInput v-model:value="formData.cta_primary_zh" maxlength="50" />
-        </NFormItem>
-        <NFormItem label="主按钮（英）">
-          <NInput v-model:value="formData.cta_primary_en" maxlength="50" />
-        </NFormItem>
-        <NFormItem label="主按钮链接">
-          <NInput v-model:value="formData.cta_primary_url" maxlength="500" />
-        </NFormItem>
-        <NFormItem label="次按钮（中）">
-          <NInput v-model:value="formData.cta_secondary_zh" maxlength="50" />
-        </NFormItem>
-        <NFormItem label="次按钮（英）">
-          <NInput v-model:value="formData.cta_secondary_en" maxlength="50" />
-        </NFormItem>
-        <NFormItem label="次按钮链接">
-          <NInput v-model:value="formData.cta_secondary_url" maxlength="500" />
-        </NFormItem>
-
-        <NDivider>素材</NDivider>
-        <NFormItem label="图片（中）">
-          <NInput v-model:value="formData.media_url_zh" maxlength="500" placeholder="素材路径" />
-        </NFormItem>
-        <NFormItem label="图片（英）">
-          <NInput v-model:value="formData.media_url_en" maxlength="500" placeholder="素材路径" />
-        </NFormItem>
-        <NFormItem label="视频地址">
-          <NInput v-model:value="formData.video_url" maxlength="500" placeholder="视频路径或 URL" />
-        </NFormItem>
-
-        <NDivider>显示</NDivider>
-        <NFormItem label="是否可见">
-          <NSwitch v-model:value="formData.is_visible" />
-        </NFormItem>
-      </NForm>
-      <template #footer>
-        <NSpace justify="end">
-          <NButton @click="dialogVisible = false">取消</NButton>
-          <NButton type="primary" :loading="submitLoading" @click="handleSubmit">确定</NButton>
-        </NSpace>
-      </template>
-    </NModal>
-  </NSpace>
+  <SectionManager page-type="home" title="首页区块" />
 </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/page/news-list/index.vue b/dashboard/frontend/src/views/www/page/news-list/index.vue
index 4eb4a39..69e8e77 100644
--- a/dashboard/frontend/src/views/www/page/news-list/index.vue
+++ b/dashboard/frontend/src/views/www/page/news-list/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue';
+import MediaSelectInput from '../../components/MediaSelectInput.vue';
 import { fetchGetNewsListSettings, fetchUpdateNewsListSettings } from '@/service/api';
 
 defineOptions({ name: 'WwwPageNewsList' });
@@ -56,7 +57,7 @@ onMounted(loadData);
         <NInput v-model:value="formData.hero_subtitle_en" maxlength="200" class="w-500px" />
       </NFormItem>
       <NFormItem label="背景图">
-        <NInput v-model:value="formData.hero_bg_url" placeholder="素材路径" class="w-500px" />
+        <MediaSelectInput v-model:value="formData.hero_bg_url" file-type="image" input-class="w-500px" placeholder="素材路径" />
       </NFormItem>
       <NDivider>列表配置</NDivider>
       <NFormItem label="每页条数">
diff --git a/dashboard/frontend/src/views/www/page/product-list/index.vue b/dashboard/frontend/src/views/www/page/product-list/index.vue
index a7f6f24..a0cb2c7 100644
--- a/dashboard/frontend/src/views/www/page/product-list/index.vue
+++ b/dashboard/frontend/src/views/www/page/product-list/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue';
 import { type FormInst, type FormRules } from 'naive-ui';
+import MediaSelectInput from '../../components/MediaSelectInput.vue';
 import { fetchGetProductListSettings, fetchUpdateProductListSettings } from '@/service/api';
 
 defineOptions({ name: 'WwwPageProductList' });
@@ -90,7 +91,7 @@ onMounted(loadData);
         />
       </NFormItem>
       <NFormItem label="Hero 背景图" path="hero_bg_url">
-        <NInput v-model:value="formData.hero_bg_url" placeholder="素材路径，如 /uploads/hero/products.jpg" class="w-400px" />
+        <MediaSelectInput v-model:value="formData.hero_bg_url" file-type="image" input-class="w-400px" placeholder="素材路径，如 /uploads/hero/products.jpg" />
       </NFormItem>
 
       <NDivider>列表配置</NDivider>
diff --git a/dashboard/frontend/src/views/www/product/list/index.vue b/dashboard/frontend/src/views/www/product/list/index.vue
index 628354c..2ea4698 100644
--- a/dashboard/frontend/src/views/www/product/list/index.vue
+++ b/dashboard/frontend/src/views/www/product/list/index.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import { computed, h, onMounted, reactive, ref } from 'vue';
+import { computed, h, onActivated, onMounted, reactive, ref } from 'vue';
 import { NButton, NSpace, NSwitch, NTag, type DataTableColumns, type FormInst, type FormRules } from 'naive-ui';
+import MediaSelectInput from '../../components/MediaSelectInput.vue';
+import SectionManager from '../../components/SectionManager.vue';
 import {
   fetchCreateProduct,
   fetchDeleteProduct,
@@ -18,6 +20,8 @@ const dialogTitle = ref('');
 const formRef = ref<FormInst | null>(null);
 const tableData = ref<Api.Www.Product[]>([]);
 const seriesOptions = ref<Api.Www.ProductSeries[]>([]);
+// 产品详情区块管理（行内「区块」按钮打开）
+const sectionProduct = ref<Api.Www.Product | null>(null);
 
 const searchForm = reactive({
   series_id: null as number | null,
@@ -44,7 +48,8 @@ const formData = reactive({
 });
 
 const rules: FormRules = {
-  series_id: [{ required: true, message: '请选择产品系列', trigger: ['blur', 'change'] }],
+  // async-validator 默认按 string 规则校验，数字值（系列 id）必须显式声明 type: 'number'，否则 required 校验恒失败
+  series_id: [{ required: true, type: 'number', message: '请选择产品系列', trigger: ['blur', 'change'] }],
   name_zh: [{ required: true, message: '请输入产品中文名', trigger: ['blur', 'input'] }],
   name_en: [{ required: true, message: '请输入产品英文名', trigger: ['blur', 'input'] }],
   slug: [{ required: true, message: '请输入 URL 标识', trigger: ['blur', 'input'] }]
@@ -159,9 +164,8 @@ function handleEdit(row: Api.Www.Product) {
   dialogVisible.value = true;
 }
 
-function handleEditSections(_row: Api.Www.Product) {
-  // TODO: 跳转到产品详情页编辑 Section + 参数规格
-  window.$message?.info('区块编辑器开发中');
+function handleEditSections(row: Api.Www.Product) {
+  sectionProduct.value = row;
 }
 
 async function handleToggleVisible(row: Api.Www.Product, val: boolean) {
@@ -215,10 +219,13 @@ function handlePageSizeChange(pageSize: number) {
   loadData();
 }
 
-onMounted(() => {
+function loadAll() {
   loadSeries();
   loadData();
-});
+}
+
+onActivated(loadAll);
+onMounted(loadAll);
 </script>
 
 <template>
@@ -319,7 +326,7 @@ onMounted(() => {
           <NInput v-model:value="formData.intro_en" type="textarea" :autosize="{ minRows: 2 }" maxlength="500" />
         </NFormItem>
         <NFormItem label="封面图路径">
-          <NInput v-model:value="formData.cover_url" placeholder="素材路径" />
+          <MediaSelectInput v-model:value="formData.cover_url" file-type="image" placeholder="素材路径" />
         </NFormItem>
         <NFormItem label="是否可见">
           <NSwitch v-model:value="formData.is_visible" />
@@ -332,5 +339,23 @@ onMounted(() => {
         </NSpace>
       </template>
     </NModal>
+
+    <!-- 产品详情区块管理（www 侧产品详情页内容由这些区块组成） -->
+    <NModal
+      :show="Boolean(sectionProduct)"
+      preset="card"
+      :title="`${sectionProduct?.name_zh || ''} - 详情页区块`"
+      class="w-1100px"
+      style="max-width: calc(100vw - 32px);"
+      :mask-closable="false"
+      @update:show="val => !val && (sectionProduct = null)"
+    >
+      <SectionManager
+        v-if="sectionProduct"
+        page-type="product_detail"
+        :product-id="sectionProduct.id"
+        title="详情页区块"
+      />
+    </NModal>
   </NSpace>
 </template>
diff --git a/dashboard/frontend/src/views/www/product/series/index.vue b/dashboard/frontend/src/views/www/product/series/index.vue
index 25c080e..1b32fbe 100644
--- a/dashboard/frontend/src/views/www/product/series/index.vue
+++ b/dashboard/frontend/src/views/www/product/series/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { h, onMounted, reactive, ref } from 'vue';
 import { NButton, NSwitch, NTag, type DataTableColumns, type FormInst, type FormRules } from 'naive-ui';
+import MediaSelectInput from '../../components/MediaSelectInput.vue';
 import {
   fetchCreateProductSeries,
   fetchDeleteProductSeries,
@@ -180,7 +181,7 @@ onMounted(loadData);
           <NInput v-model:value="formData.subtitle_en" maxlength="200" />
         </NFormItem>
         <NFormItem label="封面图路径">
-          <NInput v-model:value="formData.cover_url" placeholder="素材路径" />
+          <MediaSelectInput v-model:value="formData.cover_url" file-type="image" placeholder="素材路径" />
         </NFormItem>
         <NFormItem label="是否可见">
           <NSwitch v-model:value="formData.is_visible" />
diff --git a/www/app/app.vue b/www/app/app.vue
index 2b453a4..0ff06c7 100644
--- a/www/app/app.vue
+++ b/www/app/app.vue
@@ -22,10 +22,22 @@ const head = useLocaleHead({
   seo: true
 });
 
+// Favicon（来自 dashboard 站点信息，站点数据异步加载完成后动态注入；/uploads/... 相对路径已由数据层解析）
+const faviconHref = computed(() => siteStore.site?.favicon_url || '');
+const faviconType = computed(() => {
+  if (faviconHref.value.endsWith('.svg')) return 'image/svg+xml';
+  if (faviconHref.value.endsWith('.png')) return 'image/png';
+  if (faviconHref.value.endsWith('.ico')) return 'image/x-icon';
+  return '';
+});
+
 useHead({
   title: () => (locale.value === 'zh' ? zhCN.app.name : enUS.app.name),
   htmlAttrs: head.value.htmlAttrs,
-  link: [...(head.value.link || [])],
+  link: () => [
+    ...(head.value.link || []),
+    ...(faviconHref.value ? [{ rel: 'icon' as const, type: faviconType.value || undefined, href: faviconHref.value }] : [])
+  ],
   meta: [...(head.value.meta || [])]
 });
 </script>
diff --git a/www/app/components/AppHeader.vue b/www/app/components/AppHeader.vue
index 56f1e2e..314d77e 100644
--- a/www/app/components/AppHeader.vue
+++ b/www/app/components/AppHeader.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { NavItem } from '~/types/site';
+import type { NavItem, Product } from '~/types/site';
 
 const { t, locale, locales } = useI18n();
 const localePath = useLocalePath();
@@ -60,9 +60,16 @@ function openMega() {
 function closeMega() {
   megaTimer = setTimeout(() => {
     megaOpen.value = false;
+    hoveredProduct.value = null;
   }, 120);
 }
 
+// Mega Menu 右侧大图预览：hover 某产品时展示其封面，默认展示第一个产品
+const hoveredProduct = ref<Product | null>(null);
+const previewProduct = computed<Product | null>(
+  () => hoveredProduct.value ?? productSeries.value.find(s => s.products?.length)?.products[0] ?? null
+);
+
 // 移动端：关闭抽屉
 function closeMobile() {
   appStore.toggleMobileMenu(false);
@@ -112,31 +119,42 @@ function closeMobile() {
                 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 class="flex gap-32px">
+                  <!-- 左侧：系列/产品列表 -->
+                  <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="p-8px rounded-8px hover:bg-gray-50 transition-colors dark:hover:bg-dark-800"
+                          @click="megaOpen = false"
+                          @mouseenter="hoveredProduct = product"
+                        >
+                          <span class="text-sm text-gray-800 dark:text-gray-100">
+                            {{ locale === 'en' ? product.name_en : product.name_zh }}
+                          </span>
+                        </NuxtLink>
+                      </div>
                     </div>
                   </div>
+
+                  <!-- 右侧：hover 产品封面大图预览 -->
+                  <div v-if="previewProduct" class="w-360px shrink-0 border-l border-gray-100 pl-32px dark:border-dark-700">
+                    <img
+                      v-if="previewProduct.cover_url"
+                      :src="previewProduct.cover_url"
+                      :alt="locale === 'en' ? previewProduct.name_en : previewProduct.name_zh"
+                      class="w-full h-240px object-contain rounded-8px bg-gray-50 dark:bg-dark-800"
+                    />
+                    <p class="mt-12px text-lg font-bold text-gray-900 dark:text-gray-100">
+                      {{ locale === 'en' ? previewProduct.name_en : previewProduct.name_zh }}
+                    </p>
+                  </div>
                 </div>
               </div>
             </transition>
diff --git a/www/app/components/section/SectionRenderer.vue b/www/app/components/section/SectionRenderer.vue
index 318ee11..2edd301 100644
--- a/www/app/components/section/SectionRenderer.vue
+++ b/www/app/components/section/SectionRenderer.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import type { CSSProperties } from 'vue';
 import type { SectionBlock, SectionLayout } from '~/types/site';
+import { resolveAssetUrl } from '~/utils/resolveAssetUrl';
 import LayoutHeroSplit from './layouts/LayoutHeroSplit.vue';
 import LayoutFullBanner from './layouts/LayoutFullBanner.vue';
 import LayoutFeatureGrid from './layouts/LayoutFeatureGrid.vue';
@@ -46,26 +48,57 @@ const bgStyle = computed(() => {
 
 const hasBgImage = computed(() => props.section.bg_type === 'image' && !!props.section.bg_value);
 const hasBgVideo = computed(() => props.section.bg_type === 'video' && !!props.section.bg_value);
+// 背景图/视频资源地址（支持 /uploads/... 相对路径）
+const bgMediaUrl = computed(() => resolveAssetUrl(props.section.bg_value));
+
+// 区块宽度百分比（config.width_percent）：占视口宽度比例并居中，
+// 未配置或 100 时全宽；md 以下始终全宽（见模板 class）
+const sectionWidthStyle = computed<CSSProperties>(() => {
+  const w = Number(props.section.config?.width_percent);
+  return { '--sec-w': w > 0 && w < 100 ? `${w}%` : '100%' } as CSSProperties;
+});
+
+// 背景图/视频显示模式（config.bg_fit）：cover 铺满（默认）/ contain 完整显示 / auto 原尺寸
+const bgFit = computed<'cover' | 'contain' | 'auto'>(() => {
+  const f = props.section.config?.bg_fit;
+  return f === 'contain' || f === 'auto' ? f : 'cover';
+});
+
+const bgImageClass = computed(() =>
+  ({
+    cover: 'absolute inset-0 bg-cover bg-center',
+    contain: 'absolute inset-0 bg-contain bg-center bg-no-repeat',
+    auto: 'absolute inset-0 bg-auto bg-center bg-no-repeat'
+  })[bgFit.value]
+);
+
+const bgVideoClass = computed(() =>
+  ({
+    cover: 'absolute inset-0 w-full h-full object-cover',
+    contain: 'absolute inset-0 w-full h-full object-contain',
+    auto: 'absolute inset-0 w-full h-full object-none'
+  })[bgFit.value]
+);
 </script>
 
 <template>
   <section
-    class="relative overflow-hidden"
+    class="relative overflow-hidden md:w-[var(--sec-w)] md:mx-auto"
     :class="isDark ? 'bg-gray-950 text-white' : 'bg-white text-gray-900 dark:bg-dark-900 dark:text-white'"
-    :style="bgStyle"
+    :style="[bgStyle, sectionWidthStyle]"
   >
-    <!-- 背景图 -->
+    <!-- 背景图：显示模式由 config.bg_fit 控制（默认铺满） -->
     <div
       v-if="hasBgImage"
-      class="absolute inset-0 bg-cover bg-center"
-      :style="{ backgroundImage: `url(${section.bg_value})` }"
+      :class="bgImageClass"
+      :style="{ backgroundImage: `url(${bgMediaUrl})` }"
     />
 
-    <!-- 背景视频 -->
+    <!-- 背景视频：显示模式由 config.bg_fit 控制（默认铺满） -->
     <video
       v-if="hasBgVideo"
-      :src="section.bg_value"
-      class="absolute inset-0 w-full h-full object-cover"
+      :src="bgMediaUrl"
+      :class="bgVideoClass"
       autoplay
       muted
       loop
diff --git a/www/app/components/section/layouts/LayoutFeatureGrid.vue b/www/app/components/section/layouts/LayoutFeatureGrid.vue
index 1765cf3..7430dc5 100644
--- a/www/app/components/section/layouts/LayoutFeatureGrid.vue
+++ b/www/app/components/section/layouts/LayoutFeatureGrid.vue
@@ -12,7 +12,7 @@ const features = computed(() => config.value.features ?? []);
   <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'" :style="overlineStyle">
+      <p v-if="overline" class="text-14px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
         {{ overline }}
       </p>
       <h2 class="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
diff --git a/www/app/components/section/layouts/LayoutFullBanner.vue b/www/app/components/section/layouts/LayoutFullBanner.vue
index 3d15955..edda7e2 100644
--- a/www/app/components/section/layouts/LayoutFullBanner.vue
+++ b/www/app/components/section/layouts/LayoutFullBanner.vue
@@ -8,7 +8,7 @@ const { overline, title, subtitle, content, overlineStyle, titleStyle, bodyStyle
 
 <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'" :style="overlineStyle">
+    <p v-if="overline" class="text-14px font-semibold tracking-widest uppercase" :class="section.theme === 'dark' ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
       {{ 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'" :style="titleStyle">
diff --git a/www/app/components/section/layouts/LayoutGallery.vue b/www/app/components/section/layouts/LayoutGallery.vue
index 8b4005c..d2895f9 100644
--- a/www/app/components/section/layouts/LayoutGallery.vue
+++ b/www/app/components/section/layouts/LayoutGallery.vue
@@ -12,7 +12,7 @@ const images = computed(() => config.value.images ?? []);
   <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'" :style="overlineStyle">
+      <p v-if="overline" class="text-14px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
         {{ overline }}
       </p>
       <h2 class="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
diff --git a/www/app/components/section/layouts/LayoutHeroSplit.vue b/www/app/components/section/layouts/LayoutHeroSplit.vue
index a6d1955..e0de116 100644
--- a/www/app/components/section/layouts/LayoutHeroSplit.vue
+++ b/www/app/components/section/layouts/LayoutHeroSplit.vue
@@ -38,7 +38,7 @@ const hPad = computed(() => ({
       :class="[vAlign, hAlign, hPad]"
     >
       <div class="flex flex-col gap-20px max-w-560px">
-        <p v-if="overline" class="text-13px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
+        <p v-if="overline" class="text-14px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
           {{ overline }}
         </p>
         <h2 class="text-3xl md:text-5xl font-bold leading-tight" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
diff --git a/www/app/components/section/layouts/LayoutScrollNarrative.vue b/www/app/components/section/layouts/LayoutScrollNarrative.vue
index 33c12cc..4adeb08 100644
--- a/www/app/components/section/layouts/LayoutScrollNarrative.vue
+++ b/www/app/components/section/layouts/LayoutScrollNarrative.vue
@@ -12,7 +12,7 @@ const steps = computed(() => config.value.steps ?? []);
   <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'" :style="overlineStyle">
+      <p v-if="overline" class="text-14px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
         {{ overline }}
       </p>
       <h2 class="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
diff --git a/www/app/components/section/layouts/LayoutSpecTable.vue b/www/app/components/section/layouts/LayoutSpecTable.vue
index 581da61..dce30d2 100644
--- a/www/app/components/section/layouts/LayoutSpecTable.vue
+++ b/www/app/components/section/layouts/LayoutSpecTable.vue
@@ -35,7 +35,7 @@ function needToggle(group: SpecGroup): boolean {
   <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'" :style="overlineStyle">
+      <p v-if="overline" class="text-14px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
         {{ overline }}
       </p>
       <h2 class="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
diff --git a/www/app/components/section/layouts/LayoutSplitContent.vue b/www/app/components/section/layouts/LayoutSplitContent.vue
index 22bc4aa..06f04c7 100644
--- a/www/app/components/section/layouts/LayoutSplitContent.vue
+++ b/www/app/components/section/layouts/LayoutSplitContent.vue
@@ -1,21 +1,49 @@
 <script setup lang="ts">
 import type { SectionBlock } from '~/types/site';
+import { resolveAssetUrl } from '~/utils/resolveAssetUrl';
 
 const props = defineProps<{ section: SectionBlock }>();
 
 const { overline, title, subtitle, content, mediaUrl, isDark, overlineStyle, titleStyle, bodyStyle } = useSectionContent(props.section);
+
+// 分栏媒体视频（video_url 有值时优先渲染视频，支持 /uploads/... 相对路径）
+const videoUrl = computed(() => resolveAssetUrl(props.section.video_url));
+
+// 媒体位置（config.media_position）：left 图/视频在左（默认）/ right 在右；移动端始终文案在上
+const mediaPosition = computed(() => (props.section.config as Record<string, string> | null)?.media_position === 'right' ? 'right' : 'left');
+
+const mediaWrapClass = computed(() =>
+  mediaPosition.value === 'right'
+    ? 'flex-center order-2'
+    : 'flex-center order-2 md:order-1'
+);
+
+const textWrapClass = computed(() =>
+  mediaPosition.value === 'right'
+    ? 'flex flex-col gap-20px order-1'
+    : 'flex flex-col gap-20px order-1 md:order-2'
+);
 </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 v-if="videoUrl || mediaUrl" :class="mediaWrapClass">
+      <video
+        v-if="videoUrl"
+        :src="videoUrl"
+        class="w-full max-w-520px rounded-16px object-cover shadow-lg"
+        autoplay
+        muted
+        loop
+        playsinline
+      />
+      <img v-else :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'" :style="overlineStyle">
+    <div :class="textWrapClass">
+      <p v-if="overline" class="text-14px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
         {{ overline }}
       </p>
       <h2 class="text-3xl md:text-4xl font-bold leading-tight" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
diff --git a/www/app/components/section/layouts/LayoutStats.vue b/www/app/components/section/layouts/LayoutStats.vue
index 5e08608..f702401 100644
--- a/www/app/components/section/layouts/LayoutStats.vue
+++ b/www/app/components/section/layouts/LayoutStats.vue
@@ -12,7 +12,7 @@ const stats = computed(() => config.value.stats ?? []);
   <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'" :style="overlineStyle">
+      <p v-if="overline" class="text-14px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
         {{ overline }}
       </p>
       <h2 class="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
diff --git a/www/app/components/section/layouts/LayoutVideoShowcase.vue b/www/app/components/section/layouts/LayoutVideoShowcase.vue
index 32c507e..7459782 100644
--- a/www/app/components/section/layouts/LayoutVideoShowcase.vue
+++ b/www/app/components/section/layouts/LayoutVideoShowcase.vue
@@ -13,7 +13,7 @@ const isEmbed = computed(() => /youtube\.com|youtu\.be|bilibili\.com|player\.bil
   <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'" :style="overlineStyle">
+      <p v-if="overline" class="text-14px font-semibold tracking-widest uppercase" :class="isDark ? 'text-primary-300' : 'text-primary'" :style="overlineStyle">
         {{ overline }}
       </p>
       <h2 class="mt-12px text-3xl md:text-4xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900 dark:text-white'" :style="titleStyle">
diff --git a/www/app/composables/useRequest.ts b/www/app/composables/useRequest.ts
index 4b8f315..39626a0 100644
--- a/www/app/composables/useRequest.ts
+++ b/www/app/composables/useRequest.ts
@@ -7,6 +7,8 @@
  * - code = 2：无数据
  */
 
+import { resolveAssetUrls } from '~/utils/resolveAssetUrl';
+
 export interface ApiResponse<T = unknown> {
   code: number;
   msg: string;
@@ -36,7 +38,8 @@ export function useRequest() {
     }
 
     // code = 2（无数据）时 data 为 null，正常返回
-    return res.data;
+    // 统一解析 *_url / *_path 字段中的相对路径（如 /uploads/...）为完整资源地址
+    return resolveAssetUrls(res.data);
   }
 
   function get<T = unknown>(url: string, params?: Record<string, unknown>) {
diff --git a/www/app/composables/useSectionContent.ts b/www/app/composables/useSectionContent.ts
index 39c1b72..74430bd 100644
--- a/www/app/composables/useSectionContent.ts
+++ b/www/app/composables/useSectionContent.ts
@@ -1,4 +1,5 @@
 import type { SectionBlock, SectionConfig } from '~/types/site';
+import { resolveAssetUrl } from '~/utils/resolveAssetUrl';
 
 /**
  * 区块内容多语言解析
@@ -16,7 +17,10 @@ export function useSectionContent(section: SectionBlock) {
   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 || '');
+  // media_url_zh/_en 以语言后缀结尾，不命中数据层 resolveAssetUrls 的 *_url 匹配，需在此单独解析相对路径
+  const mediaUrl = computed(() =>
+    resolveAssetUrl((isEn.value ? section.media_url_en : section.media_url_zh) || section.media_url_zh || '')
+  );
 
   const config = computed<SectionConfig>(() => section.config ?? {});
 
diff --git a/www/app/utils/resolveAssetUrl.ts b/www/app/utils/resolveAssetUrl.ts
new file mode 100644
index 0000000..ee33196
--- /dev/null
+++ b/www/app/utils/resolveAssetUrl.ts
@@ -0,0 +1,49 @@
+/**
+ * 资源 URL 解析
+ *
+ * dashboard 后台填写素材地址时支持相对路径（如 /uploads/2026/07/xxx.mp4），
+ * www 端渲染时自动拼接资源服务地址（NUXT_PUBLIC_ASSET_BASE_URL，
+ * 未配置时默认取 apiBaseUrl 去掉 /api 后缀的 origin）。
+ * 完整 URL（http(s)://、//、data: 等）保持原样。
+ * 仅解析 /uploads/ 开头的素材路径；其他相对路径（如 /products/luxsin-x8）
+ * 是站内路由链接（CTA 按钮等），保持原样由 NuxtLink 消费。
+ */
+
+// 匹配 *_url / *_path / url 字段（如 cover_url、file_path、gallery 的 url）
+const ASSET_KEY_RE = /^url$|_(url|path)$/;
+
+export function resolveAssetUrl(url?: string | null): string {
+  if (!url) return '';
+  // 绝对地址（协议开头 / 协议相对 // / data: / blob:）保持原样
+  if (/^([a-z][a-z0-9+.-]*:|\/\/)/i.test(url)) return url;
+  // 仅解析 /uploads/ 下的素材相对路径；其他 / 开头路径是站内路由链接，不能拼后端基地址
+  if (!url.startsWith('/uploads/')) return url;
+
+  const config = useRuntimeConfig();
+  const assetBase =
+    (config.public.assetBaseUrl as string) ||
+    (config.public.apiBaseUrl as string).replace(/\/api\/?$/, '');
+  return assetBase.replace(/\/+$/, '') + url;
+}
+
+/**
+ * 深度遍历响应数据，将所有 *_url / *_path 字段的相对路径解析为完整地址。
+ * 在 useRequest 统一调用，页面/组件无需逐个处理。
+ */
+export function resolveAssetUrls<T>(data: T): T {
+  if (!data || typeof data !== 'object') return data;
+  if (Array.isArray(data)) {
+    return data.map(item => resolveAssetUrls(item)) as unknown as T;
+  }
+  const result: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(data as Record<string, unknown>)) {
+    if (typeof value === 'string' && ASSET_KEY_RE.test(key)) {
+      result[key] = resolveAssetUrl(value);
+    } else if (value && typeof value === 'object') {
+      result[key] = resolveAssetUrls(value);
+    } else {
+      result[key] = value;
+    }
+  }
+  return result as T;
+}
diff --git a/www/nuxt.config.ts b/www/nuxt.config.ts
index a0a5347..2455621 100644
--- a/www/nuxt.config.ts
+++ b/www/nuxt.config.ts
@@ -6,10 +6,12 @@ export default defineNuxtConfig({
 
   css: ['~/assets/css/main.css'],
 
-  // 运行时配置：NUXT_PUBLIC_API_BASE_URL 环境变量可覆盖
+  // 运行时配置：NUXT_PUBLIC_API_BASE_URL / NUXT_PUBLIC_ASSET_BASE_URL 环境变量可覆盖
   runtimeConfig: {
     public: {
-      apiBaseUrl: 'http://localhost:8083/api'
+      apiBaseUrl: 'http://localhost:8083/api',
+      // 素材静态服务地址（用于解析 /uploads/... 相对路径），为空时默认取 apiBaseUrl 的 origin
+      assetBaseUrl: ''
     }
   },