diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 0000000..9d5e9dc
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "Read(//Users/lukaijie/Documents/ECSHOPX/raw/**)",
+      "Bash(mkdir -p /Users/lukaijie/Documents/ECSHOPX/raw/ECX-admin)",
+      "Bash(grep:*)"
+    ]
+  }
+}
diff --git a/.cursor/rules/tailwindcss-first.mdc b/.cursor/rules/tailwindcss-first.mdc
new file mode 100644
index 0000000..96c34a1
--- /dev/null
+++ b/.cursor/rules/tailwindcss-first.mdc
@@ -0,0 +1,13 @@
+---
+description: Prefer TailwindCSS utilities over custom CSS classes for new development
+alwaysApply: true
+---
+
+# TailwindCSS First for New Work
+
+For any new requirement implementation in this repository:
+
+- Prefer TailwindCSS utility classes in templates/components.
+- Do not introduce new custom CSS classes in scoped/global style blocks unless there is a clear technical limitation.
+- If a custom class is unavoidable, keep it minimal and document the reason in the code comment near the style definition.
+- When modifying existing modules, do not refactor unrelated legacy styles unless the task explicitly asks for it.
diff --git a/.env b/.env
index e152661..2927bec 100644
--- a/.env
+++ b/.env
@@ -12,3 +12,6 @@ VUE_APP_MAP_KEY=
 VUE_APP_LOCAL_DELIVERY_DIRVER=dada
 VUE_APP_DEFAULT_LANG=zhcn
 
+# PC 商城预览 origin（postMessage 目标，与 dev-plan 一致；未设时回退 VUE_APP_WEBSITE）
+# VUE_APP_SHOP_ORIGIN=https://your-shop-domain.com
+
diff --git a/.eslintrc.js b/.eslintrc.js
index e11ddca..a691f2d 100755
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -8,6 +8,23 @@ module.exports = {
     'parser': '@babel/eslint-parser'
   },
   'rules': {
+    // 以下为历史代码体量较大时的降噪项；新代码仍建议本地按需开启或 CI 分目录收紧
+    'vue/no-template-shadow': 0,
+    'vue/multiline-html-element-content-newline': 0,
+    'vue/require-valid-default-prop': 0,
+    'vue/valid-v-for': 0,
+    'vue/valid-v-bind': 0,
+    'vue/valid-v-model': 0,
+    'vue/no-parsing-error': 0,
+    'vue/no-unused-vars': 0,
+    'vue/return-in-computed-property': 0,
+    'no-empty': 0,
+    'no-constant-condition': 0,
+    'no-self-assign': 0,
+    'no-case-declarations': 0,
+    'no-redeclare': 0,
+    'no-irregular-whitespace': 0,
+    'no-unreachable': 0,
     'vue/attributes-order': 0,
     'vue/component-tags-order': 0,
     'vue/html-closing-bracket-newline': 0,
@@ -31,18 +48,6 @@ module.exports = {
     'no-dupe-keys': 0,
     'no-undef': 0,
     'no-control-regex': 0,
-    'no-useless-escape': 0,
-    'vue/html-self-closing': [
-      'error',
-      {
-        'html': {
-          'void': 'never',
-          'normal': 'always',
-          'component': 'always'
-        },
-        'svg': 'always',
-        'math': 'always'
-      }
-    ]
+    'no-useless-escape': 0
   }
 }
diff --git a/.f2e-ai/plans/f2e-workflow.md b/.f2e-ai/plans/f2e-workflow.md
deleted file mode 100644
index 63bb391..0000000
--- a/.f2e-ai/plans/f2e-workflow.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# f2e-ai Workflow
-
-1. Code analyst: analyze stack, structure, configs, and conventions into `.f2e-ai/handbook/`
-2. Requirement analyst: clarify the request and create `.f2e-ai/requirements/<id>/requirement.md`
-3. UI alignment: when needed, write `.f2e-ai/requirements/<id>/ui-notes.md`
-4. API alignment: when needed, write `.f2e-ai/requirements/<id>/api-notes.md`
-5. Plan writing: generate tests first and confirm `plan.md`
-6. Plan execution: implement against the confirmed plan
-7. i18n: localize changed files when the project requires it
-8. E2E and commit: run Playwright, write summaries, then commit and open PR
diff --git a/.f2e-ai/requirements/ECX-7919/change-summary.md b/.f2e-ai/requirements/ECX-7919/change-summary.md
deleted file mode 100644
index 0145099..0000000
--- a/.f2e-ai/requirements/ECX-7919/change-summary.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# Change Summary
-
-## 需求与计划摘要
-
-- **requirement-id**: ECX-7919
-- **目标**: 商品挂件（wgt_goods）数据类型增加「积分商品」选项，支持在装修侧选择积分商品并拉取货架商品展示。
-
-## 改动范围
-
-- `src/view/decorate/wgts/wgt_goods/config.js`
-  - 数据类型 options 增加 `{ label: i18n.t('46e04a5c.fe0ea1'), value: 'point' }`。
-- `src/view/decorate/comps/goods-attr/attr-data.vue`
-  - 新增 `type === 'point'` 时的模板块（积分商品选择入口）、计算属性 `pointGoodsDisplayText`、watch 中对 `point` 的 localValue 同步、方法 `handleSelectPointGoods()`（调用 goodsitem 弹窗 isPointGoods: true，emit id 与 info.type='point'）。
-- `src/view/decorate/wgts/wgt_goods/index.vue`
-  - 在需 data 才请求的 dataType 列表与 watch 中纳入 `point`；在 getGoodsList 的 switch 中为 `point` 与 `items` 同样设置 `params.data_value = this.value?.data.id.split(',')`。
-
-## 关键逻辑或接口变化
-
-- 无对外 API 签名变更；商品挂件请求货架商品时增加 `data_type: 'point'` 及对应 `data_value`（积分商品 id 数组），后端需支持该类型。
-- 选择积分商品后数据结构与「指定商品」一致：`data: { id: 'id1,id2,...', info: { length, type: 'point' } }`。
-
-## 测试与验收情况
-
-- 装修页选中商品挂件 → 数据类型可选「积分商品」→ 出现选择入口 → 点击打开积分商品选择器 → 多选确定后列表按所选 id 拉取（依赖后端支持 data_type=point）。
-
-## 遗留问题与后续建议
-
-- 无。后端若尚未支持 `data_type=point`，需在货架挂件商品接口中增加对 point 类型及 data_value 的解析与返回。
diff --git a/.f2e-ai/requirements/ECX-7919/plan.md b/.f2e-ai/requirements/ECX-7919/plan.md
deleted file mode 100644
index 10a8815..0000000
--- a/.f2e-ai/requirements/ECX-7919/plan.md
+++ /dev/null
@@ -1,37 +0,0 @@
-# Plan — ECX-7919
-
-## 目标
-
-商品挂件（wgt_goods）数据类型增加「积分商品」选项，支持在装修侧选择积分商品并拉取货架商品接口展示。
-
-## 范围
-
-- 装修-商品挂件：数据类型下拉、数据配置区、列表拉取逻辑
-- 公共商品属性组件 attr-data.vue：积分商品选择入口与选择器联动
-- 不涉及其他挂件或模板接口协议变更
-
-## 步骤
-
-1. **wgt_goods/config.js**
-   - 在「数据类型」options 中增加一项：`{ label: 积分商品, value: 'point' }`（文案使用 i18n 46e04a5c.fe0ea1）。
-   - 选择「积分商品」时与「指定商品」等共用同一数据配置区域（已有 AttrDataVue 会展示）。
-
-2. **attr-data.vue**
-   - 当 `type === 'point'` 时增加一块与「指定商品」同风格的可点击区域，展示已选数量或「选择积分商品」。
-   - 增加计算属性 `pointGoodsDisplayText`。
-   - 在 type 的 watch 中处理 `type === 'point'` 时对 localValue 的初始化/同步。
-   - 增加方法 `handleSelectPointGoods()`：调用 `$picker.goodsitem({ isPointGoods: true, multiple: true, ... })`，确认后 `$emit('input', { id: ids.join(','), info: { length, type: 'point' } })`。
-
-3. **wgt_goods/index.vue**
-   - 在「需要 data 才请求列表」的 dataType 判断中纳入 `point`。
-   - 在「根据 data 变化拉列表」的 watch 中纳入 `point`。
-   - 在 getGoodsList 的 switch(dataType) 中为 `point` 走与 `items` 相同分支：`params.data_value = this.value?.data.id.split(',')`。
-
-## 验收
-
-- 装修页选中商品挂件，数据类型可选「积分商品」。
-- 选择「积分商品」后出现选择入口，点击可打开积分商品选择器，多选后确定，列表按所选 id 拉取并展示（依赖后端 getShelvesGoods 支持 data_type=point）。
-
-## 备注
-
-- 实现已完成，本文档为事后补写便于追溯。
diff --git a/.f2e-ai/requirements/ECX-8094/change-summary.md b/.f2e-ai/requirements/ECX-8094/change-summary.md
deleted file mode 100644
index 3195a1c..0000000
--- a/.f2e-ai/requirements/ECX-8094/change-summary.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# Change Summary
-
-## 需求与计划摘要
-
-- **requirement-id**: ECX-8094
-- **目标**: 视频选择器（sp-video-picker）关闭按钮图标统一为项目 ecx 图标，与设计/其他组件一致。
-
-## 改动范围
-
-- `src/components/sp-video-picker/index.vue`
-  - 删除项图标由 Element 的 `el-icon-circle-close` 改为 `ecx-icon icon-qingchuFilled`
-  - 样式：删除 `.icon-times-circle1`、`.el-icon-circle-close` 多选择器，统一为 `.icon-qingchuFilled`；移除 `.el-icon-circle-close:hover` 单独样式
-
-## 关键逻辑或接口变化
-
-- 无接口或对外 API 变化，仅视觉与 class 名变更
-- 删除单条视频时的点击仍为 `handleDeleteItem(index)`，逻辑未改
-
-## 测试与验收情况
-
-- 视频选择器内每条视频右上角关闭按钮显示为 ecx 清除图标
-- 点击关闭按钮可正常删除对应视频
-
-## 遗留问题与后续建议
-
-- 无
-- 已补写 `plan.md`，便于 f2e-ai-execute-plan 追溯。
diff --git a/.f2e-ai/requirements/ECX-8094/plan.md b/.f2e-ai/requirements/ECX-8094/plan.md
deleted file mode 100644
index 41a9de2..0000000
--- a/.f2e-ai/requirements/ECX-8094/plan.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# Plan — ECX-8094
-
-## 目标
-
-视频选择器（sp-video-picker）关闭按钮图标统一为项目 ecx 图标（icon-qingchuFilled），与设计/其他组件一致。
-
-## 范围
-
-- 仅修改：`src/components/sp-video-picker/index.vue`
-- 不涉及接口、API、其他页面或组件
-
-## 步骤
-
-1. **模板**
-   - 将删除按钮的 class 从 `el-icon-circle-close` 改为 `ecx-icon icon-qingchuFilled`（删除单条视频的 `<i>` 节点）。
-
-2. **样式**
-   - 删除对 `.icon-times-circle1`、`.el-icon-circle-close` 的样式，统一为 `.icon-qingchuFilled`（保留定位、z-index、字体与颜色、cursor）。
-   - 移除 `.el-icon-circle-close:hover` 的单独样式。
-
-## 验收
-
-- 视频选择器内每条视频右上角关闭按钮显示为 ecx 清除图标。
-- 点击关闭按钮可正常删除对应视频，逻辑不变。
-
-## 备注
-
-- 实现已完成并提交，本文档为事后补写便于追溯。
diff --git a/.f2e-ai/templates/change-summary.md.example b/.f2e-ai/templates/change-summary.md.example
deleted file mode 100644
index 7a52f82..0000000
--- a/.f2e-ai/templates/change-summary.md.example
+++ /dev/null
@@ -1,18 +0,0 @@
-# Change Summary
-
-## Requirement
-
-- requirement-id:
-- goal:
-
-## Main Changes
-
-- 
-
-## Verification
-
-- 
-
-## Follow-ups
-
-- 
diff --git a/.f2e-ai/templates/requirement.md.example b/.f2e-ai/templates/requirement.md.example
deleted file mode 100644
index 6db34d7..0000000
--- a/.f2e-ai/templates/requirement.md.example
+++ /dev/null
@@ -1,20 +0,0 @@
-# Requirement
-
-## Source
-
-- Chat:
-- Teambition:
-
-## Classification
-
-- Type:
-- UI involved:
-- API involved:
-
-## Goals
-
-- 
-
-## Acceptance Criteria
-
-- 
diff --git a/.gitignore b/.gitignore
index 85ad0ab..f225c57 100755
--- a/.gitignore
+++ b/.gitignore
@@ -22,4 +22,5 @@ AGENTS.md
 openspec/
 dist/
 .cursor/commit-summary/
+.codegraph/
 
diff --git a/Dockerfile b/Dockerfile
index 53c09b7..45fe289 100755
--- a/Dockerfile
+++ b/Dockerfile
@@ -20,6 +20,7 @@ ARG VUE_APP_ALIOSS_ACCESS_KEY_SECRET
 ARG VUE_APP_ALIOSS_BUCKET
 ARG VUE_APP_H5_HOST
 ARG VUE_APP_DEFAULT_LANG
+ARG VUE_APP_WEBSITE
 
 ENV VUE_APP_IS_SAAS ${VUE_APP_IS_SAAS}
 ENV VUE_APP_BASE_API ${VUE_APP_BASE_API}
@@ -40,6 +41,7 @@ ENV VUE_APP_ALIOSS_ACCESS_KEY_SECRET ${VUE_APP_ALIOSS_ACCESS_KEY_SECRET}
 ENV VUE_APP_ALIOSS_BUCKET ${VUE_APP_ALIOSS_BUCKET}
 ENV VUE_APP_H5_HOST ${VUE_APP_H5_HOST}
 ENV VUE_APP_DEFAULT_LANG ${VUE_APP_DEFAULT_LANG}
+ENV VUE_APP_WEBSITE ${VUE_APP_WEBSITE}
 
 WORKDIR /app
 COPY package*.json ./
diff --git a/scripts/migrate_sp_web_decoration_i18n.py b/scripts/migrate_sp_web_decoration_i18n.py
new file mode 100644
index 0000000..0f8ee54
--- /dev/null
+++ b/scripts/migrate_sp_web_decoration_i18n.py
@@ -0,0 +1,159 @@
+#!/usr/bin/env python3
+"""
+One-off: align sp-web-decoration i18n keys with gen_i18n_key.py (path + Chinese text).
+Adds new hash keys to zh-CN/en/ar; keeps legacy keys in JSON for old saved DSL.
+"""
+from __future__ import annotations
+
+import hashlib
+import json
+import os
+import re
+import sys
+from pathlib import Path
+
+REPO = Path(__file__).resolve().parents[1]
+ROOT = REPO / "src/components/sp-web-decoration"
+
+
+def make_key(path: str, text: str) -> str:
+    p = hashlib.md5(path.encode("utf-8")).hexdigest()[:8]
+    t = hashlib.md5(text.encode("utf-8")).hexdigest()[:6]
+    return f"{p}.{t}"
+
+
+def is_i18n_key(s: str) -> bool:
+    if s.startswith("decorationeditor."):
+        return True
+    if re.match(r"^[0-9a-f]{8}\.[0-9a-f]{6}$", s):
+        return True
+    return False
+
+
+def collect_keys_from_source(content: str) -> set[str]:
+    out: set[str] = set()
+    patterns = [
+        re.compile(r"\$t\(\s*'([^']+)'"),
+        re.compile(r'\$t\(\s*"([^"]+)"'),
+        re.compile(r"this\.\$t\(\s*'([^']+)'"),
+        re.compile(r"this\.\$t\(\s*\"([^\"]+)\""),
+        re.compile(r"titleKey:\s*'([^']+)'"),
+        re.compile(r"titleKey:\s*\"([^\"]+)\""),
+        re.compile(r"messageKey:\s*'([^']+)'"),
+        re.compile(r"\|\|\s*'([^']+)'"),
+        re.compile(r'\|\|\s*"([^"]+)"'),
+    ]
+    for p in patterns:
+        for m in p.finditer(content):
+            k = m.group(1)
+            if is_i18n_key(k):
+                out.add(k)
+    return out
+
+
+def rel_posix(p: Path) -> str:
+    s = p.relative_to(REPO).as_posix()
+    if not s.startswith("src/"):
+        s = "src/" + s
+    return s
+
+
+def main() -> int:
+    zh_path = REPO / "src/i18n/locales/zh-CN.json"
+    with zh_path.open("r", encoding="utf-8") as f:
+        zh: dict = json.load(f)
+    with (REPO / "src/i18n/locales/en.json").open("r", encoding="utf-8") as f:
+        en: dict = json.load(f)
+    with (REPO / "src/i18n/locales/ar.json").open("r", encoding="utf-8") as f:
+        ar: dict = json.load(f)
+
+    files = [p for p in ROOT.rglob("*") if p.suffix in (".vue", ".js")]
+
+    all_changes: list[tuple[str, str, str, str]] = []  # file, old, new, text
+
+    for fpath in sorted(files):
+        rel = rel_posix(fpath)
+        if rel.startswith("src/components/sp-web-decoration/scripts/"):
+            continue
+        text_src = fpath.read_text(encoding="utf-8")
+        keys = collect_keys_from_source(text_src)
+        for k in keys:
+            c = zh.get(k)
+            if c is None:
+                print(f"MISSING_ZH: {rel} key={k}", file=sys.stderr)
+                continue
+            new_k = make_key(rel, c)
+            if k != new_k:
+                all_changes.append((rel, k, new_k, c))
+
+    by_file: dict[str, list[tuple[str, str, str]]] = {}
+    for rel, o, n, c in all_changes:
+        by_file.setdefault(rel, []).append((o, n, c))
+
+    for rel, pairs in sorted(by_file.items()):
+        print(f"--- {rel} {len(pairs)} replacements")
+        for o, n, c in pairs:
+            print(f"  {o} -> {n} ({c[:32]}...)" if len(c) > 32 else f"  {o} -> {n} ({c})")
+
+    # Deduplicate locale additions (same new key from one old key is unique)
+    seen_new: dict[str, tuple[str, str]] = {}  # new_k -> (old_k, text)
+    for rel, o, n, c in all_changes:
+        if n in seen_new and seen_new[n][0] != o:
+            ex_o, ex_c = seen_new[n]
+            if ex_c != c:
+                print(
+                    f"COLLISION new key {n}: {ex_o}/{ex_c} vs {o}/{c}",
+                    file=sys.stderr,
+                )
+        seen_new[n] = (o, c)
+
+    if os.environ.get("DRY") == "1":
+        print("DRY=1: no file writes", file=sys.stderr)
+        return 0
+
+    # Update source files
+    for fpath in sorted(files):
+        rel = rel_posix(fpath)
+        if rel not in by_file:
+            continue
+        content = fpath.read_text(encoding="utf-8")
+        # longest old keys first to avoid partial substrings
+        order = sorted(by_file[rel], key=lambda x: -len(x[0]))
+        for old, new, _ in order:
+            if old == new:
+                continue
+            content = content.replace(f"'{old}'", f"'{new}'")
+            content = content.replace(f'"{old}"', f'"{new}"')
+        fpath.write_text(content, encoding="utf-8")
+        print(f"WROTE: {rel}")
+
+    # Add new keys to locales
+    for _, old, new, _c in all_changes:
+        if old == new:
+            continue
+        if new in zh and zh.get(new) != zh.get(old):
+            pass
+        if old not in zh:
+            continue
+        zh[new] = zh[old]
+        if old in en:
+            en[new] = en[old]
+        if old in ar:
+            ar[new] = ar[old]
+
+    for path, data in [
+        (zh_path, zh),
+        (REPO / "src/i18n/locales/en.json", en),
+        (REPO / "src/i18n/locales/ar.json", ar),
+    ]:
+        path.write_text(
+            # Preserve key order; only append/overwrite entries from this script.
+            json.dumps(data, ensure_ascii=False, indent=2) + "\n",
+            encoding="utf-8",
+        )
+    print("LOCALES updated.", file=sys.stderr)
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())
diff --git a/src/api/company.js b/src/api/company.js
index 0b390d0..b50d2f4 100755
--- a/src/api/company.js
+++ b/src/api/company.js
@@ -263,6 +263,22 @@ export function getUsercenterAuthorizeUrl(params) {
   })
 }
 
+export function getAppcenterGoods(params) {
+  return fetch({
+    url: '/company/appcenter/goods',
+    method: 'get',
+    params
+  })
+}
+
+export function getAppcenterUrl(params) {
+  return fetch({
+    url: '/company/appcenter/url',
+    method: 'get',
+    params
+  })
+}
+
 export function loginUsercenter(params) {
   return fetch({
     url: '/company/usercenter/login',
diff --git a/src/api/decoration.js b/src/api/decoration.js
new file mode 100644
index 0000000..517b754
--- /dev/null
+++ b/src/api/decoration.js
@@ -0,0 +1,75 @@
+/**
+ * Copyright © ShopeX （http://www.shopex.cn）. All rights reserved.
+ * 装修域 API（ThemeBundle 对齐）：Web 端商城导航菜单等
+ */
+import { fetch } from './request'
+
+// -------- Web 端商城导航菜单 --------
+export function getMenuList(params) {
+  return fetch({
+    url: '/web-menus',
+    method: 'get',
+    params
+  })
+}
+
+export function getMenuDetail(id) {
+  return fetch({
+    url: '/web-menus/' + id,
+    method: 'get'
+  })
+}
+
+export function createMenu(params) {
+  return fetch({
+    url: '/web-menus',
+    method: 'post',
+    params
+  })
+}
+
+export function updateMenu(id, params) {
+  return fetch({
+    url: '/web-menus/' + id,
+    method: 'put',
+    params
+  })
+}
+
+export function removeMenu(id) {
+  return fetch({
+    url: '/web-menus/' + id,
+    method: 'delete'
+  })
+}
+
+export function createMenuItem(menuId, params) {
+  return fetch({
+    url: '/web-menus/' + menuId + '/items',
+    method: 'post',
+    params
+  })
+}
+
+export function updateMenuItem(menuId, itemId, params) {
+  return fetch({
+    url: '/web-menus/' + menuId + '/items/' + itemId,
+    method: 'put',
+    params
+  })
+}
+
+export function removeMenuItem(menuId, itemId) {
+  return fetch({
+    url: '/web-menus/' + menuId + '/items/' + itemId,
+    method: 'delete'
+  })
+}
+
+export function sortMenuItems(menuId, sorts) {
+  return fetch({
+    url: '/web-menus/' + menuId + '/items/sort',
+    method: 'put',
+    params: { sorts }
+  })
+}
diff --git a/src/api/pickuplocation.js b/src/api/pickuplocation.js
index 847396b..2c01c37 100755
--- a/src/api/pickuplocation.js
+++ b/src/api/pickuplocation.js
@@ -49,7 +49,7 @@ export function deleteZitiLocation(id) {
 // 自提点关联门店
 export function bindZitiLocation(params) {
   return fetch({
-    url: `pickuplocation/reldistributor`,
+    url: '/pickuplocation/reldistributor',
     method: 'post',
     params
   })
@@ -58,7 +58,7 @@ export function bindZitiLocation(params) {
 // 自提点取消关联门店
 export function unbindZitiLocation(params) {
   return fetch({
-    url: `pickuplocation/reldistributor/cancel`,
+    url: '/pickuplocation/reldistributor/cancel',
     method: 'post',
     params
   })
diff --git a/src/api/webtemplate.js b/src/api/webtemplate.js
index bc492d6..dba035e 100755
--- a/src/api/webtemplate.js
+++ b/src/api/webtemplate.js
@@ -4,11 +4,19 @@
  */
 import { fetch } from './request'
 
+function normalizeTemplateParams(params = {}) {
+  const nextParams = { ...params }
+  if (nextParams.distributor_id === undefined) {
+    delete nextParams.distributor_id
+  }
+  return nextParams
+}
+
 export const fetchTemplateList = (params) => {
   return fetch({
     url: '/pctemplate/lists',
     method: 'get',
-    params
+    params: normalizeTemplateParams(params)
   })
 }
 
@@ -16,7 +24,7 @@ export const addPageTemplate = (data) => {
   return fetch({
     url: '/pctemplate/add',
     method: 'post',
-    params: data
+    params: normalizeTemplateParams(data)
   })
 }
 
@@ -24,7 +32,7 @@ export const editPageTemplate = (data) => {
   return fetch({
     url: '/pctemplate/edit',
     method: 'put',
-    params: data
+    params: normalizeTemplateParams(data)
   })
 }
 
@@ -43,6 +51,23 @@ export const getTemplateContent = (params) => {
   })
 }
 
+export const getDecorationContent = (params) => {
+  return fetch({
+    url: '/pctemplate/getDecorationContent',
+    method: 'get',
+    params
+  })
+}
+
+/** 头/尾或全局装修块：按 page_name 查询单条 content（params 为 JSON 字符串） */
+export const getHeaderOrFooter = (params) => {
+  return fetch({
+    url: '/pctemplate/getHeaderOrFooter',
+    method: 'get',
+    params
+  })
+}
+
 // 保存页面模版装修内容
 export const saveTemplateContent = (params) => {
   return fetch({
diff --git a/src/bootstrap/index.js b/src/bootstrap/index.js
index 7de8307..34d2196 100755
--- a/src/bootstrap/index.js
+++ b/src/bootstrap/index.js
@@ -18,10 +18,13 @@ import { VuePrototype } from '@/utils'
 import { install as Finder } from './finder'
 import { install as Component } from './component'
 import { i18n } from '@/i18n'
+import { installLucideGlobal } from '@/components/sp-icon/lucide-registry'
 
 async function bootstrap() {
   Vue.use(API)
 
+  installLucideGlobal(Vue)
+
   Vue.use(ElementUI)
 
   Vue.use(Filter)
diff --git a/src/components/sp-decorate/index.vue b/src/components/sp-decorate/index.vue
index 4fd9152..7665ebd 100755
--- a/src/components/sp-decorate/index.vue
+++ b/src/components/sp-decorate/index.vue
@@ -142,7 +142,9 @@ export default {
       if (w) return w
       if (String(this.scene) === '1005' && key === 'goods') {
         return (
-          this.widgets.find((item) => String(item.config?.name || '').toLowerCase() === 'goodscard') ||
+          this.widgets.find(
+            (item) => String(item.config?.name || '').toLowerCase() === 'goodscard'
+          ) ||
           this.widgets.find((item) => (item.name || '').toLowerCase() === 'goods') ||
           null
         )
diff --git a/src/components/sp-dialog-plus/main.vue b/src/components/sp-dialog-plus/main.vue
index 2f0eef3..4d8e27d 100755
--- a/src/components/sp-dialog-plus/main.vue
+++ b/src/components/sp-dialog-plus/main.vue
@@ -15,12 +15,11 @@
       <slot name="title" />
     </template>
 
-    <template v-if="$slots.body">
+    <!-- 勿用 v-if($slots.body)/v-else 二选一：在部分路由 + $dialog.open 场景下会误判，导致正文整段空白 -->
+    <div class="sp-dialog-plus__body">
       <slot name="body" />
-    </template>
-    <template v-else>
       <slot />
-    </template>
+    </div>
 
     <span slot="footer" class="dialog-footer">
       <div>
@@ -69,15 +68,15 @@ export default {
       })
     },
     width: {
-      type: String,
-      default: '1008px'
+      type: String
     },
     value: {
       type: Object,
       default: () => ({})
     },
     size: {
-      type: String
+      type: String,
+      default: 'medium'
     },
     isShow: Boolean
   },
@@ -89,7 +88,7 @@ export default {
         small: '800px',
         mini: '600px'
       }
-      return SIZE[this.size] || '1200px'
+      return this.width || SIZE[this.size] || '1200px'
     },
     computedButtonCancel() {
       return {
diff --git a/src/components/sp-dialog-plus/plugin.js b/src/components/sp-dialog-plus/plugin.js
index e958d89..d684e03 100755
--- a/src/components/sp-dialog-plus/plugin.js
+++ b/src/components/sp-dialog-plus/plugin.js
@@ -9,7 +9,7 @@ export default {
   install(Vue, options = {}) {
     const Ctor = Vue.extend(Main)
 
-    const fn = (value) => {
+    const fn = (value, parent) => {
       const data = {
         buttonCancel: value.buttonCancel,
         buttonConfirm: value.buttonConfirm,
@@ -19,6 +19,7 @@ export default {
           title: value.title,
           content: value.content
         },
+        ...(value.width ? { width: value.width } : {}),
         confirmBefore:
           value.confirmBefore ||
           (async () => {
@@ -27,6 +28,7 @@ export default {
       }
       return new Promise((resolve, reject) => {
         const vm = new Ctor({
+          parent: parent || undefined,
           propsData: data,
           created() {
             const teardown = () => {
@@ -40,6 +42,11 @@ export default {
             })
           },
           render(h) {
+            const inner =
+              data.value.content == null
+                ? []
+                : [isFunction(data.value.content) ? h(data.value.content) : data.value.content]
+            // 作为 Main 的默认插槽传入（与 body 具名插槽在 main.vue 内一并渲染，避免二选一误判）
             return h(
               Main,
               {
@@ -60,7 +67,7 @@ export default {
                   }
                 }
               },
-              [isFunction(data.value.content) ? h(data.value.content) : data.value.content]
+              inner
             )
           }
         }).$mount()
@@ -68,11 +75,112 @@ export default {
       })
     }
 
-    const $dialog = {
-      open: ({ title = '', content = null, confirmBefore, buttonCancel, buttonConfirm, size }) =>
-        fn({ title, content, confirmBefore, buttonCancel, buttonConfirm, size })
+    const openComponent = (component, options = {}, parent) => {
+      const {
+        title = '',
+        props = {},
+        width,
+        size,
+        buttonCancel,
+        buttonConfirm,
+        confirmBefore
+      } = options
+      const data = {
+        buttonCancel,
+        buttonConfirm,
+        isShow: true,
+        size,
+        ...(width ? { width } : {}),
+        value: {
+          title,
+          content: null
+        }
+      }
+
+      return new Promise((resolve) => {
+        let contentVm
+        const vm = new Ctor({
+          parent: parent || undefined,
+          propsData: data,
+          created() {
+            const teardown = () => {
+              this.$destroy()
+              this.$el.remove()
+            }
+            this.$once('close', () => {
+              resolve(null)
+              teardown()
+            })
+            this.$once('input', (val) => {
+              resolve(val)
+              teardown()
+            })
+          },
+          render(h) {
+            return h(
+              Main,
+              {
+                props: data,
+                on: {
+                  close: () => {
+                    this.$emit('close')
+                  },
+                  confirm: (callback) => {
+                    const submit = () => {
+                      const dialogContent = this.$refs.dialogContent || contentVm
+                      if (dialogContent && typeof dialogContent.submit === 'function') {
+                        dialogContent.submit()
+                        callback()
+                        return
+                      }
+                      callback()
+                    }
+                    if (confirmBefore) {
+                      confirmBefore()
+                        .then(submit)
+                        .catch(() => callback())
+                      return
+                    }
+                    submit()
+                  }
+                }
+              },
+              [
+                h(component, {
+                  props,
+                  on: {
+                    close: (val) => {
+                      this.$emit('input', val)
+                    }
+                  },
+                  ref: 'dialogContent'
+                })
+              ]
+            )
+          },
+          mounted() {
+            contentVm = this.$refs.dialogContent
+          }
+        }).$mount()
+        document.body.appendChild(vm.$el)
+      })
     }
 
-    Vue.prototype.$dialog = $dialog
+    const createDialogMethods = (parent) => ({
+      open(componentOrOptions, options) {
+        if (options === undefined) {
+          return fn(componentOrOptions, parent)
+        }
+        const component = componentOrOptions.component || componentOrOptions
+        return openComponent(component, options, parent)
+      }
+    })
+
+    Object.defineProperty(Vue.prototype, '$dialog', {
+      get() {
+        return createDialogMethods(this)
+      },
+      configurable: true
+    })
   }
 }
diff --git a/src/components/sp-form-plus/form-field.js b/src/components/sp-form-plus/form-field.js
index 0ecea7f..b77e75f 100755
--- a/src/components/sp-form-plus/form-field.js
+++ b/src/components/sp-form-plus/form-field.js
@@ -3,7 +3,8 @@
  * See LICENSE file for license details.
  */
 import { isString } from '@/utils'
-import { h } from 'vue'
+// 与实例 render(h) 使用同一套 h，避免弹窗/动态挂载场景下与 import 的 h 混用导致子树不更新
+import { h as hCompat } from 'vue'
 import { PICKER_DATE_OPTIONS } from '@/consts'
 import { isFunction } from '@/utils/src/type-helper'
 import './form-field.scss'
@@ -85,11 +86,10 @@ export default {
 
       this.componentProps.onChange?.(val, this.formData)
     },
-    // 渲染 input 组件
-    renderInput() {
-      return h('el-input', {
+    renderInput(props = {}, hCreate = hCompat) {
+      return hCreate('el-input', {
         attrs: {
-          ...this.componentProps,
+          ...props,
           size: this.size
         },
         props: {
@@ -100,12 +100,34 @@ export default {
         }
       })
     },
-    // 渲染 select 组件
-    renderSelect(props = {}) {
-      const options = (props.options || []).map((option) =>
-        h('el-option', {
+    renderTextarea(props = {}, hCreate = hCompat) {
+      return this.renderInput(
+        {
+          rows: 3,
+          ...props,
+          type: 'textarea'
+        },
+        hCreate
+      )
+    },
+    renderDivider(props = {}) {
+      const label = props.label || this.label
+      return <div class='form-field-divider'>{label}</div>
+    },
+    // 渲染 select 组件（options 仅用于生成 el-option 子节点，不可传入 el-select）
+    // style/class 须放在 vnode 根上；el-option 的 key 须为 vnode.key（勿放在 props 内，否则弹窗/表格内可能不渲染）
+    // hCreate 须传入 render(h) 的 h，保证与父级同一渲染上下文（弹窗内内置 select 必传）
+    renderSelect(props = {}, hCreate = hCompat) {
+      const {
+        options: rawOptions = [],
+        style: selectStyle,
+        class: selectClass,
+        ...selectRest
+      } = props
+      const optionVnodes = (rawOptions || []).map((option, idx) =>
+        hCreate('el-option', {
+          key: option.value != null ? String(option.value) : `opt-${idx}`,
           props: {
-            key: option.value,
             label: option.label,
             value: option.value,
             disabled: option.disabled
@@ -113,28 +135,31 @@ export default {
         })
       )
 
-      return h(
+      return hCreate(
         'el-select',
         {
+          class: selectClass,
+          style: selectStyle,
           attrs: {
             size: this.size
           },
           props: {
             value: this.modelValue,
             placeholder: this.$t('1bb56920.708c9d') + (this.label || '').replace(/:$/, ''),
-            ...props
+            popperAppendToBody: true,
+            ...selectRest
           },
           on: {
             input: this.handleInput
           }
         },
-        options
+        optionVnodes
       )
     },
     // 渲染 radio 组件
-    renderRadio(props = {}) {
+    renderRadio(props = {}, hCreate = hCompat) {
       const radios = (props.options || []).map((option) =>
-        h(
+        hCreate(
           'el-radio',
           {
             props: {
@@ -146,7 +171,7 @@ export default {
         )
       )
 
-      return h(
+      return hCreate(
         'el-radio-group',
         {
           props: {
@@ -161,10 +186,10 @@ export default {
       )
     },
     // 渲染 checkbox 组件（el-checkbox-group 的 value 必须为数组，否则会出现勾选一个则全部勾选等问题）
-    renderCheckbox(props = {}) {
+    renderCheckbox(props = {}, hCreate = hCompat) {
       const { options = [], ...restProps } = props
       const checkboxes = options.map((option) =>
-        h(
+        hCreate(
           'el-checkbox',
           {
             props: {
@@ -181,7 +206,7 @@ export default {
         ? [].concat(this.modelValue)
         : []
 
-      return h(
+      return hCreate(
         'el-checkbox-group',
         {
           props: {
@@ -196,8 +221,8 @@ export default {
       )
     },
     // 渲染 button 组件
-    renderButton(props = {}) {
-      return h(
+    renderButton(props = {}, hCreate = hCompat) {
+      return hCreate(
         'el-button',
         {
           props: {
@@ -263,8 +288,8 @@ export default {
     renderImagePicker(props = {}) {
       return <SpImagePicker value={this.modelValue} {...props} on-onChange={this.handleInput} />
     },
-    renderCascader(props = {}) {
-      return h('el-cascader', {
+    renderCascader(props = {}, hCreate = hCompat) {
+      return hCreate('el-cascader', {
         attrs: {
           ...props,
           size: this.size || 'small'
@@ -292,7 +317,7 @@ export default {
     },
 
     // 渲染 upload 组件
-    renderUpload(props = {}) {
+    renderUpload(props = {}, hCreate = hCompat) {
       const uploadProps = {
         action: props.action || '',
         'auto-upload': props.autoUpload,
@@ -301,16 +326,16 @@ export default {
         ...props
       }
 
-      return h('div', {}, [
-        h('span', { style: {} }, props.title),
-        h(
+      return hCreate('div', {}, [
+        hCreate('span', { style: {} }, props.title),
+        hCreate(
           'el-upload',
           {
             class: props.class || '',
             props: uploadProps
           },
           [
-            h(
+            hCreate(
               'el-button',
               {
                 props: {
@@ -325,24 +350,27 @@ export default {
       ])
     },
 
-    // 获取组件渲染函数
-    getComponentRender() {
+    // 获取组件渲染函数（传入 render(h) 的 h，与当前实例同一渲染上下文）
+    getComponentRender(hRender) {
+      const hFn = hRender || hCompat
       if (isString(this.component)) {
         const type = this.component.toLowerCase()
         const renderMap = {
-          button: this.renderButton,
-          checkbox: this.renderCheckbox,
-          datepicker: this.renderDatePicker,
-          datetimepicker: this.renderDateTimePicker,
-          input: this.renderInput,
-          imagepicker: this.renderImagePicker,
-          radio: this.renderRadio,
-          select: this.renderSelect,
-          switch: this.renderSwitch,
-          upload: this.renderUpload,
-          cascader: this.renderCascader
+          button: (props) => this.renderButton(props, hFn),
+          checkbox: (props) => this.renderCheckbox(props, hFn),
+          datepicker: (props) => this.renderDatePicker(props),
+          datetimepicker: (props) => this.renderDateTimePicker(props),
+          divider: (props) => this.renderDivider(props),
+          input: (props) => this.renderInput(props, hFn),
+          imagepicker: (props) => this.renderImagePicker(props),
+          radio: (props) => this.renderRadio(props, hFn),
+          select: (props) => this.renderSelect(props, hFn),
+          switch: () => this.renderSwitch(),
+          textarea: (props) => this.renderTextarea(props, hFn),
+          upload: (props) => this.renderUpload(props, hFn),
+          cascader: (props) => this.renderCascader(props, hFn)
         }
-        return renderMap[type] || this.renderInput
+        return renderMap[type] || ((props) => this.renderInput(props, hFn))
       }
 
       if (typeof this.component === 'function') {
@@ -351,12 +379,12 @@ export default {
             value: this.modelValue,
             props: this.componentProps,
             onInput: this.handleInput,
-            h,
+            h: hFn,
             formData: this.formData
           })
       }
 
-      return this.renderInput
+      return (props) => this.renderInput(props, hFn)
     }
   },
   watch: {
@@ -368,10 +396,6 @@ export default {
     }
   },
   render(h) {
-    if (this.component === 'group') {
-      return <div class='form-field-group'>{this.label}</div>
-    }
-
     // 检查是否应该显示该字段
     const shouldShow = this.isShow ? this.isShow(this.modelValue) : true
     if (!shouldShow) {
@@ -379,8 +403,14 @@ export default {
       return null
     }
 
-    // 获取对应的渲染函数
-    const renderComponent = this.getComponentRender()
+    const isDivider =
+      isString(this.component) && ['group', 'divider'].includes(this.component.toLowerCase())
+    if (isDivider) {
+      return this.renderDivider(this.componentProps)
+    }
+
+    // 获取对应的渲染函数（与当前 render 共用 h）
+    const renderComponent = this.getComponentRender(h)
 
     // 渲染表单项
     const divProps = {
diff --git a/src/components/sp-form-plus/form-field.scss b/src/components/sp-form-plus/form-field.scss
index f80ad92..0b839db 100755
--- a/src/components/sp-form-plus/form-field.scss
+++ b/src/components/sp-form-plus/form-field.scss
@@ -5,27 +5,29 @@
 .sp-form-plus {
   .form-field {
     margin-bottom: 22px;
+  }
 
-    &-group {
-      &:before {
-        position: absolute;
-        top: 11px;
-        bottom: 11px;
-        left: 0;
-        width: 2px;
-        background-color: var(--primary);
-        content: '';
-      }
-
-      padding: 8px;
-      color: #333;
-      // font-weight: 500;
-      font-size: 15px;
-      position: relative;
-      border-bottom: 1px solid #f1f2f5;
-      margin-bottom: 18px;
+  .form-field-divider {
+    &:before {
+      position: absolute;
+      top: 11px;
+      bottom: 11px;
+      left: 0;
+      width: 2px;
+      background-color: #298dff;
+      content: '';
     }
 
+    padding: 6px 0 6px 8px;
+    color: #333;
+    font-weight: 500;
+    font-size: 16px;
+    position: relative;
+    border-bottom: 1px solid #f1f2f5;
+    margin-bottom: 10px;
+  }
+
+  .form-field {
     // 可以添加更多样式
     .el-form-item {
       margin-bottom: 0;
diff --git a/src/components/sp-form-plus/index.vue b/src/components/sp-form-plus/index.vue
index 056a0d8..b710876 100755
--- a/src/components/sp-form-plus/index.vue
+++ b/src/components/sp-form-plus/index.vue
@@ -11,13 +11,22 @@
       'sp-form-plus--search-form': formType === 'searchForm',
       'sp-form-plus--display-form': formType === 'displayForm',
       'sp-form-plus--inline': inline,
-      'sp-form-plus--collapsed': formType === 'searchForm' && !extend
+      'sp-form-plus--collapsed': formType === 'searchForm' && !extend,
+      'sp-form-plus--label-top': formType === 'searchForm' && labelPosition === 'top',
+      'sp-form-plus--actions-bottom': isSearchActionsBottom
     }"
     :model="formData"
     :label-width="labelWidth"
     :label-position="labelPosition"
+    @submit.native.prevent="handleSubmit"
   >
-    <div ref="wrapperRef" :class="{ flex: formType === 'searchForm' }">
+    <div
+      ref="wrapperRef"
+      :class="{
+        flex: formType === 'searchForm' && !isSearchActionsBottom,
+        'sp-form-plus__layout-bottom': isSearchActionsBottom
+      }"
+    >
       <div
         :class="{
           'sp-form-plus__wrapper': formType === 'searchForm',
@@ -63,7 +72,10 @@
           </div>
         </div>
         <div
-          class="sp-form-plus__actions ml-1 mt-1 flex-col items-end !pt-0"
+          :class="[
+            'sp-form-plus__actions flex-col items-end !pt-0',
+            isSearchActionsBottom ? 'mt-3' : 'ml-1 mt-1'
+          ]"
           :style="actionsStyle"
           v-else
         >
@@ -145,6 +157,11 @@ export default {
       type: String,
       default: 'horizontal'
     },
+    searchActionsLayout: {
+      type: String,
+      default: '',
+      validator: (value) => ['', 'inline', 'bottom-right'].includes(value)
+    },
     submitLoading: {
       type: Boolean,
       default: false
@@ -169,7 +186,12 @@ export default {
   data() {
     const formData = {}
     this.formItems
-      .filter((item) => item.component !== 'group')
+      .filter((item) => {
+        const isLayoutComponent =
+          typeof item.component === 'string' &&
+          ['group', 'divider'].includes(item.component.toLowerCase())
+        return !isLayoutComponent
+      })
       .forEach((item) => {
         formData[item.fieldName] =
           typeof item.value === 'undefined'
@@ -205,6 +227,14 @@ export default {
     // 检查是否有表单项使用了 formItemClass
     hasFormItemClass() {
       return this.formItems.some((item) => item.formItemClass)
+    },
+    effectiveSearchActionsLayout() {
+      if (this.formType !== 'searchForm') return 'inline'
+      if (this.searchActionsLayout) return this.searchActionsLayout
+      return this.labelPosition === 'top' ? 'bottom-right' : 'inline'
+    },
+    isSearchActionsBottom() {
+      return this.formType === 'searchForm' && this.effectiveSearchActionsLayout === 'bottom-right'
     }
   },
   watch: {
@@ -407,6 +437,60 @@ export default {
       min-width: fit-content;
     }
   }
+
+  &--label-top {
+    ::v-deep .el-form-item__label {
+      float: none;
+      display: block;
+      padding: 0 0 6px;
+      text-align: left;
+      line-height: 20px;
+    }
+
+    ::v-deep .el-form-item__content {
+      margin-left: 0 !important;
+      line-height: normal;
+    }
+  }
+
+  &--actions-bottom {
+    .sp-form-plus__layout-bottom {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+    }
+
+    .sp-form-plus__wrapper {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      gap: 12px 24px;
+      width: 100%;
+
+      .form-field {
+        width: 100% !important;
+        max-width: none !important;
+        flex: initial !important;
+      }
+    }
+
+    .sp-form-plus__actions-wrapper {
+      width: 100%;
+      min-width: 0;
+    }
+
+    .sp-form-plus__actions {
+      width: 100%;
+      justify-content: flex-end;
+      align-items: flex-end;
+      padding-top: 0;
+      margin-top: 16px !important;
+    }
+
+    .sp-form-plus__actions-btns {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
   &__actions {
     padding-top: 40px;
     display: flex;
diff --git a/src/components/sp-icon/index.vue b/src/components/sp-icon/index.vue
index e3f630d..f692617 100755
--- a/src/components/sp-icon/index.vue
+++ b/src/components/sp-icon/index.vue
@@ -10,16 +10,21 @@
     class="flex items-center justify-center hover:bg-gray-100 transition-all duration-300 cursor-pointer"
     @click.stop="onButtonClick"
   >
-    <component :is="icon" :size="size" :fill="fill" />
+    <component :is="icon" :size="size" v-bind="iconExtraProps" />
     <slot />
   </div>
 
-  <component v-else :is="icon" :size="size" :fill="fill" v-on="$listeners" />
+  <component v-else :is="icon" :size="size" v-bind="iconExtraProps" v-on="$listeners" />
 </template>
 
 <script>
-// import * as icons from 'lucide-vue'
-import * as icons from '@icon-park/vue'
+import * as iconParkIcons from '@icon-park/vue'
+import { LUCIDE_ICONS } from './lucide-registry'
+
+function nameToPascal(name) {
+  return name.replace(/(?:^|-)([a-z])/g, (_, letter) => letter.toUpperCase())
+}
+
 export default {
   name: 'SpIcon',
   props: {
@@ -48,9 +53,20 @@ export default {
     return {}
   },
   computed: {
+    pascalName() {
+      return nameToPascal(this.name)
+    },
     icon() {
-      return icons[this.name.replace(/(?:^|-)([a-z])/g, (_, letter) => letter.toUpperCase())]
-      // return icons[this.name]
+      const lucide = LUCIDE_ICONS[this.pascalName]
+      if (lucide) return lucide
+      return iconParkIcons[this.pascalName]
+    },
+    /** Lucide 走 stroke/currentColor；IconPark 用 fill */
+    iconExtraProps() {
+      if (LUCIDE_ICONS[this.pascalName]) {
+        return { color: this.fill, strokeWidth: 2 }
+      }
+      return { fill: this.fill }
     },
     buttonClass() {
       return this.button
diff --git a/src/components/sp-icon/lucide-registry.js b/src/components/sp-icon/lucide-registry.js
new file mode 100644
index 0000000..b426493
--- /dev/null
+++ b/src/components/sp-icon/lucide-registry.js
@@ -0,0 +1,71 @@
+/**
+ * Lucide 图标白名单（与 SpIcon 共用）
+ *
+ * - 在此按需 import 并加入 LUCIDE_ICONS；勿 `import * from 'lucide-vue'`。
+ * - bootstrap 调用 installLucideGlobal(Vue)，模板可直写 `<Home :size="18" />`。
+ * - SpIcon：name 转 PascalCase 后先查 LUCIDE_ICONS，未命中再回退 @icon-park/vue。
+ */
+import {
+  ArrowLeft,
+  ChevronDown,
+  ChevronRight,
+  ChevronUp,
+  CirclePlus,
+  Diamond,
+  Eye,
+  EyeOff,
+  FileText,
+  GripVertical,
+  GalleryVertical,
+  Home,
+  Image,
+  LayoutGrid,
+  LayoutTemplate,
+  MapPin,
+  Monitor,
+  PanelBottom,
+  PanelTop,
+  Plus,
+  RotateCcw,
+  RotateCw,
+  Smartphone,
+  Tag,
+  Trash2
+} from 'lucide-vue'
+
+export const LUCIDE_ICONS = {
+  ArrowLeft,
+  ChevronDown,
+  ChevronRight,
+  ChevronUp,
+  CirclePlus,
+  Diamond,
+  Eye,
+  EyeOff,
+  FileText,
+  GripVertical,
+  GalleryVertical,
+  Home,
+  Image,
+  LayoutGrid,
+  LayoutTemplate,
+  MapPin,
+  Monitor,
+  PanelBottom,
+  PanelTop,
+  Plus,
+  RotateCcw,
+  RotateCw,
+  Smartphone,
+  Tag,
+  Trash2
+}
+
+/**
+ * @param {import('vue').default} Vue
+ */
+export function installLucideGlobal(Vue) {
+  Object.keys(LUCIDE_ICONS).forEach((name) => {
+    Vue.component(name, LUCIDE_ICONS[name])
+  })
+}
diff --git a/src/components/sp-image-picker/index.vue b/src/components/sp-image-picker/index.vue
index e90fd6c..feacebb 100755
--- a/src/components/sp-image-picker/index.vue
+++ b/src/components/sp-image-picker/index.vue
@@ -23,8 +23,9 @@
     .placeholder {
       height: 48px;
     }
-    .el-icon-camera {
-      font-size: 18px;
+    .picker-placeholder-icon {
+      width: 18px;
+      height: 18px;
     }
     .add-text {
       font-size: 10px;
@@ -72,11 +73,10 @@
     align-items: center;
     justify-content: center;
   }
-  .el-icon-camera {
-    font-size: 24px;
+  .picker-placeholder-icon {
+    width: 24px;
+    height: 24px;
     color: #d9d9d9;
-    line-height: initial;
-    // margin-top: 12px;
   }
   .add-text {
     font-size: 12px;
@@ -151,9 +151,10 @@ import Vue from 'vue'
 import { isArray, isEmpty, isString, isObject } from '@/utils'
 import { i18n } from '@/i18n'
 import draggable from 'vuedraggable'
+import { Camera } from 'lucide-vue'
 export default {
   name: 'SpImagePicker',
-  components: { draggable },
+  components: { draggable, Camera },
   props: {
     value: {
       type: [Object, Array, String]
@@ -309,7 +310,7 @@ export default {
         )}
         {max > 1 && value.length < max && (
           <div class='image-item placeholder' on-click={this.handleSelectImage}>
-            <i class='el-icon-camera' />
+            <Camera class='picker-placeholder-icon' strokeWidth={1.8} />
             <div class='add-text'>
               {i18n.t('967e77ce.20def7')}({`${value.length}/${max}`})
             </div>
@@ -319,7 +320,7 @@ export default {
         {max == 1 && !isEmpty(value) && this._renderImage(value)}
         {max == 1 && isEmpty(value) && (
           <div class='image-item placeholder' on-click={this.handleSelectImage}>
-            <i class='el-icon-camera' />
+            <Camera class='picker-placeholder-icon' strokeWidth={1.8} />
             <div class='add-text'>{i18n.t('967e77ce.b89fb3')}</div>
           </div>
         )}
diff --git a/src/components/sp-page/index.vue b/src/components/sp-page/index.vue
index 38e635e..8ef5c08 100755
--- a/src/components/sp-page/index.vue
+++ b/src/components/sp-page/index.vue
@@ -5,28 +5,27 @@
 
 <template>
   <div
-    class="sp-page p-4 flex flex-col"
+    class="sp-page w-full min-h-full rounded-[6px] flex flex-col"
     :class="{
       'sp-page--no-header': !hasHeader,
       'sp-page--no-footer': !hasFooter,
       'sp-page--sticky': isSticky
     }"
+    :style="{ background: bgColor }"
     ref="pageContainer"
   >
-    <div :style="{ background: bgColor }" class="rounded-[6px]">
-      <div class="sp-page__header py-4 pl-5 pr-4 flex items-end" ref="header">
-        <div class="sp-page__header-title mr-4">{{ title }}</div>
-        <div class="sp-page__header-toolbar flex-1">
-          <slot name="page-header" />
-        </div>
+    <div class="sp-page__header py-4 pl-5 pr-4 flex items-end" ref="header">
+      <div class="sp-page__header-title mr-4">{{ title }}</div>
+      <div class="sp-page__header-toolbar flex-1">
+        <slot name="page-header" />
       </div>
-      <div class="sp-page__content p-4 flex-1">
-        <slot />
-      </div>
-      <div class="sp-page__footer">
-        <div class="footer-content py-4">
-          <slot name="page-footer" />
-        </div>
+    </div>
+    <div class="sp-page__content p-4 flex-1">
+      <slot />
+    </div>
+    <div class="sp-page__footer">
+      <div class="footer-content py-4">
+        <slot name="page-footer" />
       </div>
     </div>
   </div>
@@ -104,7 +103,7 @@ export default {
   &--sticky {
     .sp-page__footer {
       position: sticky;
-      bottom: 0;
+      bottom: -14px;
       z-index: 100;
       .footer-content {
         background: color-mix(in srgb, var(--primary) 8%, transparent);
diff --git a/src/components/sp-path-selector/PickerDialog.vue b/src/components/sp-path-selector/PickerDialog.vue
new file mode 100644
index 0000000..c37c1ae
--- /dev/null
+++ b/src/components/sp-path-selector/PickerDialog.vue
@@ -0,0 +1,343 @@
+<template>
+  <div class="sp-path-selector-dialog">
+    <component
+      :is="currentComponent"
+      v-if="currentComponent"
+      :ref="tabValue"
+      v-bind="currentPickerProps"
+      @close="handlePickerClose"
+    />
+  </div>
+</template>
+
+<script>
+import { pickBy } from '@/utils'
+import GoodsPicker from '@/components/sp-picker-plus/GoodsPicker.vue'
+import WebCustomPagePicker from '@/components/sp-picker-plus/WebCustomPagePicker.vue'
+import PickerSaleCategory from '@/components/sp-picker/pickers/picker-saleCategory'
+import PickerCategory from '@/components/sp-picker/pickers/picker-category'
+import PickerTag from '@/components/sp-picker/pickers/picker-tag'
+import PickerArticle from '@/components/sp-picker/pickers/picker-article'
+import PickerPlanting from '@/components/sp-picker/pickers/picker-planting'
+import PickerPages from '@/components/sp-picker/pickers/picker-pages'
+import PickerRegactivity from '@/components/sp-picker/pickers/picker-regactivity'
+import PickerPurchaseActivity from '@/components/sp-picker/pickers/picker-purchaseActivity'
+import PickerLive from '@/components/sp-picker/pickers/picker-live'
+import PickerWxApp from '@/components/sp-picker/pickers/picker-wxapp'
+import PickerLottery from '@/components/sp-picker/pickers/picker-lottery'
+import PickerSharePage from '@/components/sp-picker/pickers/picker-share-page'
+import PickerCustomerService from '@/components/sp-picker/pickers/picker-customer-service'
+import PickerLink from '@/components/sp-picker/pickers/picker-link'
+import { PATH_SELECTOR_TYPES } from './config'
+
+const GOODS_TAB_NAME = 'goods'
+
+const SUBMIT_MODE = {
+  EMIT_CLOSE: 'emit-close',
+  GET_VAL: 'get-val'
+}
+
+const RESULT_NORMALIZERS = {
+  goods: (data) =>
+    pickBy(data, {
+      id: ({ item_id, itemId }) => item_id || itemId,
+      title: ({ item_name, itemName }) => item_name || itemName
+    }),
+  sale_category: (data) =>
+    pickBy(data, {
+      id: 'id',
+      title: 'title'
+    }),
+  category: (data) =>
+    pickBy(data, {
+      id: 'id',
+      title: 'title'
+    }),
+  tag: (data) =>
+    pickBy(data, {
+      id: 'tag_id',
+      title: 'tag_name'
+    }),
+  article: (data) =>
+    pickBy(data, {
+      id: 'article_id',
+      title: 'title'
+    }),
+  planting: (data) =>
+    pickBy(data, {
+      id: 'article_id',
+      title: 'title'
+    }),
+  link: (data) =>
+    pickBy(data, {
+      id: 'id',
+      title: 'title'
+    }),
+  customer_service: (data) =>
+    pickBy(data, {
+      id: 'id',
+      title: 'title'
+    }),
+  regactivity: (data) =>
+    pickBy(data, {
+      id: 'activity_id',
+      title: 'activity_name'
+    }),
+  purchase_activity: (data) =>
+    pickBy(data, {
+      id: 'id',
+      title: 'name'
+    }),
+  custom_page: (data) =>
+    pickBy(data, {
+      id: 'id',
+      title: 'page_name'
+    }),
+  live: (data) =>
+    pickBy(data, {
+      id: 'roomid',
+      title: 'name'
+    }),
+  other_wxapp: (data) =>
+    pickBy(data, {
+      id: 'wx_external_routes_id',
+      title: ({ app_name, route_name }) => `${app_name} - ${route_name}`,
+      extra: ({ app_id, route_info }) => ({
+        appid: app_id,
+        path: route_info
+      })
+    }),
+  lottery: (data) =>
+    pickBy(data, {
+      id: 'id',
+      title: 'activity_name'
+    }),
+  share_page: (data) =>
+    pickBy(data, {
+      id: 'id',
+      title: 'page_name'
+    })
+}
+
+const PICKER_ADAPTERS = {
+  goods: {
+    component: GoodsPicker,
+    submitMode: SUBMIT_MODE.EMIT_CLOSE,
+    getProps(vm) {
+      return {
+        multiple: false,
+        initialSelected: vm.createGoodsInitialSelected()
+      }
+    },
+    normalizeClose(row) {
+      return row
+        ? {
+            id: row.item_id,
+            title: row.item_name || '',
+            extra: {}
+          }
+        : null
+    }
+  },
+  sale_category: { component: PickerSaleCategory },
+  category: { component: PickerCategory },
+  tag: { component: PickerTag },
+  article: { component: PickerArticle },
+  planting: { component: PickerPlanting },
+  custom_page: {
+    component: PickerPages,
+    platforms: {
+      web: {
+        component: WebCustomPagePicker,
+        submitMode: SUBMIT_MODE.EMIT_CLOSE,
+        getProps(vm) {
+          return {
+            initialSelected: vm.createIdTitleInitialSelected()
+          }
+        },
+        normalizeClose(row) {
+          return row
+            ? {
+                id: row.id,
+                title: row.title || '',
+                extra: {}
+              }
+            : null
+        }
+      }
+    }
+  },
+  regactivity: { component: PickerRegactivity },
+  purchase_activity: { component: PickerPurchaseActivity },
+  live: { component: PickerLive },
+  other_wxapp: { component: PickerWxApp },
+  lottery: { component: PickerLottery },
+  share_page: { component: PickerSharePage },
+  customer_service: { component: PickerCustomerService },
+  link: { component: PickerLink }
+}
+
+function resolvePickerAdapter(tabValue, platform) {
+  const baseAdapter = PICKER_ADAPTERS[tabValue] || PICKER_ADAPTERS[GOODS_TAB_NAME]
+  return baseAdapter.platforms?.[platform] || baseAdapter
+}
+
+export default {
+  name: 'SpPathSelectorDialog',
+  components: {
+    GoodsPicker,
+    WebCustomPagePicker,
+    PickerSaleCategory,
+    PickerCategory,
+    PickerTag,
+    PickerArticle,
+    PickerPlanting,
+    PickerPages,
+    PickerRegactivity,
+    PickerPurchaseActivity,
+    PickerLive,
+    PickerWxApp,
+    PickerLottery,
+    PickerSharePage,
+    PickerCustomerService,
+    PickerLink
+  },
+  props: {
+    initialValue: {
+      type: Object,
+      default: () => ({})
+    },
+    pathType: {
+      type: String,
+      default: GOODS_TAB_NAME
+    },
+    pathTypes: {
+      type: Array,
+      default: () => PATH_SELECTOR_TYPES
+    },
+    platform: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      pickerValue: {
+        data: [],
+        multiple: false
+      },
+      tabValue: 'goods'
+    }
+  },
+  computed: {
+    currentAdapter() {
+      return resolvePickerAdapter(this.tabValue, this.platform)
+    },
+    currentComponent() {
+      return this.currentAdapter?.component || null
+    },
+    currentPickerProps() {
+      if (typeof this.currentAdapter?.getProps === 'function') {
+        return this.currentAdapter.getProps(this)
+      }
+      return {
+        value: this.pickerValue
+      }
+    }
+  },
+  created() {
+    this.syncValue()
+  },
+  methods: {
+    syncValue() {
+      const iv = this.initialValue || {}
+      const availableType = this.pathTypes.find((item) => item.name === this.pathType)?.name
+      this.tabValue = availableType || iv.linkPage || iv.tab || GOODS_TAB_NAME
+      const rawId = iv.id != null && iv.id !== '' ? iv.id : ''
+      const normalizedData = rawId === '' ? [] : [rawId]
+      this.pickerValue = {
+        type: 'pickerPath',
+        data: normalizedData,
+        multiple: false,
+        linkPage: this.tabValue,
+        tab: this.tabValue,
+        id: rawId,
+        title: iv.title || '',
+        linkType: iv.linkType != null ? iv.linkType : 0,
+        linkUrl: iv.linkUrl || '',
+        linkPageValue: this.tabValue,
+        trackingParams: iv.trackingParams || '',
+        ...iv,
+        ...(iv.extra || {})
+      }
+    },
+    createGoodsInitialSelected() {
+      const id = this.initialValue?.id
+      if (id == null || id === '') return null
+
+      return {
+        item_id: id,
+        item_name: this.initialValue?.title || '',
+        pics: this.initialValue?.extra?.pics || [],
+        price: this.initialValue?.extra?.price || 0
+      }
+    },
+    createIdTitleInitialSelected() {
+      const id = this.initialValue?.id
+      if (id == null || id === '') return null
+      return {
+        id,
+        title: this.initialValue?.title || ''
+      }
+    },
+    submit() {
+      const ref = this.$refs[this.tabValue]
+      const pickerVm = Array.isArray(ref) ? ref[0] : ref
+
+      if (this.currentAdapter?.submitMode === SUBMIT_MODE.EMIT_CLOSE) {
+        pickerVm?.submit?.()
+        return
+      }
+
+      const { data = [] } = pickerVm?.getVal?.() || {}
+      if (!data.length) {
+        this.$emit('close', null)
+        return
+      }
+      const [{ id, title, extra }] = this.resolveData(data)
+      this.$emit('close', {
+        linkPage: this.tabValue,
+        title,
+        id,
+        extra: extra || {}
+      })
+    },
+    handlePickerClose(row) {
+      const result = this.currentAdapter?.normalizeClose
+        ? this.currentAdapter.normalizeClose(row)
+        : row
+      if (!result) {
+        this.$emit('close', null)
+        return
+      }
+
+      this.$emit('close', {
+        linkPage: this.tabValue,
+        title: result.title || '',
+        id: result.id,
+        extra: result.extra || {}
+      })
+    },
+    resolveData(data) {
+      const normalize = RESULT_NORMALIZERS[this.tabValue] || RESULT_NORMALIZERS[GOODS_TAB_NAME]
+      return normalize(data)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.sp-path-selector-dialog {
+  min-height: 480px;
+}
+</style>
diff --git a/src/components/sp-path-selector/config.js b/src/components/sp-path-selector/config.js
new file mode 100644
index 0000000..dc582b1
--- /dev/null
+++ b/src/components/sp-path-selector/config.js
@@ -0,0 +1,27 @@
+export const PATH_SELECTOR_TYPES = [
+  { name: 'goods', labelKey: 'd81d8932.9897d8' },
+  { name: 'sale_category', labelKey: 'd81d8932.392d49' },
+  { name: 'category', labelKey: 'd81d8932.b3ed9f' },
+  { name: 'tag', labelKey: 'd81d8932.0f394b' },
+  { name: 'article', labelKey: 'd81d8932.c75625' },
+  { name: 'planting', labelKey: 'd81d8932.e8f87a' },
+  { name: 'custom_page', labelKey: 'd81d8932.cee6eb' },
+  { name: 'regactivity', labelKey: 'd81d8932.2bc045' },
+  { name: 'purchase_activity', labelKey: 'd81d8932.dc7202' },
+  { name: 'live', labelKey: 'd81d8932.7bbe8e' },
+  { name: 'other_wxapp', labelKey: 'd81d8932.f5a0d7' },
+  { name: 'lottery', labelKey: 'd81d8932.283be6' },
+  { name: 'share_page', labelKey: 'd81d8932.787963' },
+  { name: 'customer_service', labelKey: 'd81d8932.e7dea7' },
+  { name: 'link', labelKey: 'd81d8932.59ceff' }
+]
+
+export const PATH_SELECTOR_PLATFORM_TYPES = {
+  web: ['goods', 'sale_category', 'custom_page']
+}
+
+export function getPathSelectorTypes(platform) {
+  const names = PATH_SELECTOR_PLATFORM_TYPES[platform]
+  if (!names) return PATH_SELECTOR_TYPES
+  return PATH_SELECTOR_TYPES.filter((item) => names.includes(item.name))
+}
diff --git a/src/components/sp-path-selector/index.vue b/src/components/sp-path-selector/index.vue
new file mode 100644
index 0000000..1559718
--- /dev/null
+++ b/src/components/sp-path-selector/index.vue
@@ -0,0 +1,186 @@
+<template>
+  <div class="sp-path-selector">
+    <el-select
+      class="sp-path-selector__type"
+      :value="selectedType"
+      :disabled="disabled"
+      :placeholder="typePlaceholder"
+      @change="handleTypeChange"
+    >
+      <el-option
+        v-for="item in typeOptions"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+        :disabled="item.disabled"
+      />
+    </el-select>
+    <el-input
+      class="sp-path-selector__input"
+      :value="inputValue"
+      :placeholder="contentPlaceholder"
+      :disabled="disabled || !selectedType"
+      readonly
+      suffix-icon="el-icon-arrow-down"
+      @click.native="openSelector"
+      @keydown.native.enter.prevent="openSelector"
+    />
+    <el-button v-if="hasValue" type="text" class="sp-path-selector__clear" @click="clearValue">
+      {{ $t('eac538c8.288f0c') }}
+    </el-button>
+  </div>
+</template>
+
+<script>
+import { LINK_PATH } from '@/consts'
+import PickerDialog from './PickerDialog.vue'
+import { getPathSelectorTypes } from './config'
+
+export default {
+  name: 'SpPathSelector',
+  props: {
+    value: {
+      type: Object,
+      default: () => null
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    platform: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    pathTypes() {
+      return getPathSelectorTypes(this.platform)
+    },
+    typeOptions() {
+      const options = this.pathTypes.map((item) => ({
+        value: item.name,
+        label: this.$t(item.labelKey)
+      }))
+      if (this.selectedType && !options.some((item) => item.value === this.selectedType)) {
+        options.push({
+          value: this.selectedType,
+          label: LINK_PATH[this.selectedType] || this.selectedType,
+          disabled: true
+        })
+      }
+      return options
+    },
+    selectedType() {
+      return this.value?.linkPage || ''
+    },
+    hasValue() {
+      return Boolean(this.value && (this.value.title || this.value.id || this.value.linkPage))
+    },
+    inputValue() {
+      return this.hasValue ? this.value.title || this.displayText : ''
+    },
+    typePlaceholder() {
+      return this.$t('4a0a5782.e3cf91')
+    },
+    contentPlaceholder() {
+      if (!this.selectedType) return this.$t('7856f5b5.4ef9f6')
+      return this.placeholder || this.$t('7856f5b5.4ef9f6')
+    },
+    displayText() {
+      if (this.hasValue) {
+        const typeLabel = LINK_PATH[this.value.linkPage] || this.value.linkPage || ''
+        if (this.value.title && typeLabel) {
+          return `${typeLabel}：${this.value.title}`
+        }
+        return this.value.title || `${this.value.linkPage || ''}：${this.value.id || ''}`
+      }
+      return ''
+    }
+  },
+  methods: {
+    async handleTypeChange(linkPage) {
+      if (!linkPage || this.disabled) return
+
+      const previousValue = this.value || null
+      const nextValue = {
+        linkPage,
+        title: '',
+        id: '',
+        extra: {}
+      }
+
+      const result = await this.openSelector(nextValue)
+
+      if (!result) {
+        this.$emit('input', previousValue)
+        this.$emit('change', previousValue)
+        return
+      }
+
+      this.$emit('input', result)
+      this.$emit('change', result)
+    },
+    async openSelector(overrideValue = null) {
+      const currentValue = overrideValue || this.value || {}
+      const currentType = currentValue.linkPage || this.selectedType
+
+      if (this.disabled || !currentType) return null
+      if (!this.pathTypes.some((item) => item.name === currentType)) return null
+
+      const result = await this.$dialog.open(PickerDialog, {
+        title: this.$t('4a0a5782.e3cf91'),
+        props: {
+          initialValue: currentValue,
+          pathType: currentType,
+          pathTypes: this.pathTypes,
+          platform: this.platform
+        }
+      })
+      return result || null
+    },
+    clearValue() {
+      this.$emit('input', null)
+      this.$emit('change', null)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.sp-path-selector {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.sp-path-selector__type {
+  width: 160px;
+  flex-shrink: 0;
+}
+
+.sp-path-selector__input {
+  flex: 1;
+}
+
+.sp-path-selector__clear {
+  flex-shrink: 0;
+  padding: 0 !important;
+}
+
+.sp-path-selector ::v-deep {
+  .sp-path-selector__input .el-input__inner,
+  .sp-path-selector__input .el-input__suffix {
+    cursor: pointer;
+  }
+
+  .sp-path-selector__input.is-disabled .el-input__inner,
+  .sp-path-selector__input.is-disabled .el-input__suffix {
+    cursor: not-allowed;
+  }
+}
+</style>
diff --git a/src/components/sp-path-selector/path-selector.test.mjs b/src/components/sp-path-selector/path-selector.test.mjs
new file mode 100644
index 0000000..5041235
--- /dev/null
+++ b/src/components/sp-path-selector/path-selector.test.mjs
@@ -0,0 +1,38 @@
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
+import test from 'node:test'
+
+const root = process.cwd()
+const read = (filePath) => readFileSync(path.resolve(root, filePath), 'utf8')
+
+test('web path selector is limited to web-supported link types', () => {
+  const config = read('src/components/sp-path-selector/config.js')
+  const menuForm = read('src/views/decoration/web-menu/components/MenuItemForm.vue')
+
+  assert.match(config, /web:\s*\['goods',\s*'sale_category',\s*'custom_page'\]/)
+  assert.match(config, /function getPathSelectorTypes\(platform\)/)
+  assert.match(menuForm, /<SpPathSelector[\s\S]*value=\{value\}[\s\S]*platform=['"]web['"][\s\S]*on-input=\{onInput\}/)
+})
+
+test('path selector passes filtered path types into picker dialog', () => {
+  const selector = read('src/components/sp-path-selector/index.vue')
+  const dialog = read('src/components/sp-path-selector/PickerDialog.vue')
+
+  assert.match(selector, /pathTypes\(\)\s*\{\s*return getPathSelectorTypes\(this\.platform\)/)
+  assert.match(selector, /pathTypes:\s*this\.pathTypes/)
+  assert.match(selector, /platform:\s*this\.platform/)
+  assert.match(selector, /!this\.pathTypes\.some\(\(item\) => item\.name === currentType\)/)
+  assert.match(dialog, /pathTypes:\s*\{\s*type:\s*Array/)
+  assert.match(dialog, /this\.pathTypes\.find\(\(item\) => item\.name === this\.pathType\)/)
+})
+
+test('web custom page path uses WebCustomPagePicker', () => {
+  const dialog = read('src/components/sp-path-selector/PickerDialog.vue')
+
+  assert.match(dialog, /import WebCustomPagePicker/)
+  assert.match(dialog, /const PICKER_ADAPTERS =/)
+  assert.match(dialog, /custom_page:\s*\{[\s\S]*platforms:\s*\{[\s\S]*web:\s*\{[\s\S]*component:\s*WebCustomPagePicker/)
+  assert.match(dialog, /resolvePickerAdapter\(tabValue, platform\)/)
+  assert.match(dialog, /handlePickerClose\(row\)/)
+})
diff --git a/src/components/sp-picker-plus/GoodsPicker.vue b/src/components/sp-picker-plus/GoodsPicker.vue
new file mode 100644
index 0000000..fe3f9a7
--- /dev/null
+++ b/src/components/sp-picker-plus/GoodsPicker.vue
@@ -0,0 +1,304 @@
+<template>
+  <div class="sp-goods-picker bg-card text-foreground">
+    <SpFormPlus
+      ref="searchForm"
+      v-model="searchParams"
+      class="sp-goods-picker__search -mt-[12px] !bg-white !px-0"
+      :form-items="searchFormItems"
+      form-type="searchForm"
+      label-position="top"
+      @submit="onSearch"
+      @reset="onReset"
+    />
+
+    <SpTable
+      ref="table"
+      url="/goods/items"
+      class="sp-goods-picker__table bg-white"
+      row-key="item_id"
+      max-height="420"
+      :columns="columns"
+      :hooks="{ beforeSearch, afterSearch }"
+      :params="searchParams"
+      :selection-mode="multiple ? 'multiple' : 'single'"
+      :reserve-selection="multiple"
+      :selected-rows.sync="selectedRowsValue"
+    />
+
+    <div
+      v-if="selectedRows.length"
+      class="mt-3 flex items-center justify-between rounded-lg border border-border bg-muted/40 px-3 py-2 text-sm text-foreground"
+    >
+      <span>已选 {{ selectedRows.length }} 个商品</span>
+      <el-button type="text" class="!p-0 !text-muted-foreground" @click="clearSelectedRows">
+        清空
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import SpFormPlus from '@/components/sp-form-plus'
+import SpTable from '@/components/sp-table'
+
+function normalizeProduct(row = {}) {
+  return {
+    item_id: row.item_id,
+    item_name: row.item_name,
+    pics: row.pics,
+    price: row.price
+  }
+}
+
+function createSelectedMap(rows = []) {
+  return rows.reduce((map, item) => {
+    const product = normalizeProduct(item)
+    if (product.item_id) map[product.item_id] = product
+    return map
+  }, {})
+}
+
+export default {
+  name: 'GoodsPicker',
+  components: {
+    SpFormPlus,
+    SpTable
+  },
+  props: {
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    initialSelected: {
+      type: [Object, Array],
+      default: null
+    }
+  },
+  data() {
+    return {
+      searchParams: {
+        keywords: '',
+        approve_status: 'onsale',
+        brand_id: '',
+        category: ''
+      },
+      selectedRow:
+        !this.multiple && this.initialSelected && !Array.isArray(this.initialSelected)
+          ? { ...this.initialSelected }
+          : null,
+      selectedMap:
+        this.multiple && Array.isArray(this.initialSelected)
+          ? createSelectedMap(this.initialSelected)
+          : {},
+      currentPageRows: [],
+      brandList: [],
+      categoryList: []
+    }
+  },
+  computed: {
+    selectedRowsValue: {
+      get() {
+        return this.multiple
+          ? Object.values(this.selectedMap)
+          : this.selectedRow
+          ? [this.selectedRow]
+          : []
+      },
+      set(rows) {
+        if (this.multiple) {
+          this.syncMultipleSelection(rows)
+          return
+        }
+        this.selectedRow = rows?.[0] ? normalizeProduct(rows[0]) : null
+      }
+    },
+    selectedRows() {
+      return this.multiple
+        ? Object.values(this.selectedMap)
+        : this.selectedRow
+        ? [this.selectedRow]
+        : []
+    },
+    searchFormItems() {
+      return [
+        {
+          fieldName: 'keywords',
+          label: '商品名称',
+          component: 'input',
+          componentProps: {
+            placeholder: '请输入商品名称',
+            clearable: true
+          }
+        },
+        {
+          fieldName: 'approve_status',
+          label: '销售状态',
+          component: 'select',
+          componentProps: {
+            clearable: true,
+            placeholder: '请选择',
+            options: [
+              { label: '在售', value: 'onsale' },
+              { label: '下架', value: 'offsale' }
+            ]
+          }
+        },
+        {
+          fieldName: 'brand_id',
+          label: '品牌',
+          component: 'select',
+          componentProps: {
+            clearable: true,
+            filterable: true,
+            remote: true,
+            placeholder: '请选择品牌',
+            remoteMethod: this.fetchBrands,
+            options: this.brandList.map((item) => ({
+              label: item.attribute_name,
+              value: item.attribute_id
+            }))
+          }
+        },
+        {
+          fieldName: 'category',
+          label: '分类',
+          component: 'cascader',
+          componentProps: {
+            clearable: true,
+            placeholder: '请选择分类',
+            options: this.categoryList,
+            props: {
+              value: 'category_id',
+              label: 'category_name',
+              checkStrictly: true
+            }
+          }
+        }
+      ]
+    },
+    columns() {
+      return [
+        {
+          name: '图片',
+          key: 'pics',
+          width: 72,
+          render: {
+            functional: true,
+            render: (h, { props }) =>
+              h('SpImage', {
+                props: {
+                  src: Array.isArray(props.row.pics) ? props.row.pics[0] : props.row.pics,
+                  width: 52,
+                  height: 52
+                }
+              })
+          }
+        },
+        { name: '商品名称', key: 'item_name', minWidth: 220 },
+        { name: '货号', key: 'item_bn' },
+        {
+          name: '售价',
+          key: 'price',
+          width: 100,
+          formatter: (value) => `¥${(Number(value || 0) / 100).toFixed(2)}`
+        },
+        { name: '库存', key: 'store', width: 80 }
+      ]
+    }
+  },
+  mounted() {
+    this.fetchBrands()
+    this.fetchCategories()
+  },
+  methods: {
+    beforeSearch(params) {
+      const category = this.searchParams.category
+      return {
+        ...params,
+        ...this.searchParams,
+        item_type: 'normal',
+        audit_status: 'approved',
+        is_sku: false,
+        category: Array.isArray(category) ? category[category.length - 1] : category
+      }
+    },
+    afterSearch(response) {
+      const list = response?.data?.data?.list || response?.data?.list || response?.list || []
+      this.currentPageRows = list
+      return response
+    },
+    onSearch() {
+      this.$refs.table.refresh(true)
+    },
+    onReset() {
+      this.searchParams = {
+        keywords: '',
+        approve_status: 'onsale',
+        brand_id: '',
+        category: ''
+      }
+      this.$refs.table.refresh(true)
+    },
+    syncMultipleSelection(rows = []) {
+      if (!this.multiple) return
+      const nextPageSelectedIds = new Set((rows || []).map((row) => row.item_id).filter(Boolean))
+      ;(this.currentPageRows || []).forEach((row) => {
+        if (!row?.item_id) return
+        if (!nextPageSelectedIds.has(row.item_id)) this.$delete(this.selectedMap, row.item_id)
+      })
+      ;(rows || []).forEach((row) => {
+        if (row?.item_id) this.$set(this.selectedMap, row.item_id, normalizeProduct(row))
+      })
+    },
+    clearSelectedRows() {
+      this.selectedRow = null
+      this.selectedMap = {}
+      this.$refs.table?.clearSelection?.()
+    },
+    submit() {
+      if (!this.multiple) {
+        if (!this.selectedRow) {
+          this.$message.warning('请先选择商品')
+          return
+        }
+        this.$emit('close', this.selectedRow)
+        return
+      }
+
+      if (!this.selectedRows.length) {
+        this.$message.warning('请至少选择一个商品')
+        return
+      }
+      this.$emit('close', this.selectedRows)
+    },
+    async fetchBrands(name = '') {
+      try {
+        const { list } = await this.$api.goods.getGoodsAttr({
+          page: 1,
+          pageSize: 100,
+          attribute_type: 'brand',
+          attribute_name: name
+        })
+        this.brandList = list || []
+      } catch (error) {
+        this.brandList = []
+      }
+    },
+    async fetchCategories() {
+      try {
+        this.categoryList = (await this.$api.goods.getCategory({ is_show: false })) || []
+      } catch (error) {
+        this.categoryList = []
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.sp-goods-picker ::v-deep {
+  .sp-goods-picker__search.sp-form-plus--actions-bottom .sp-form-plus__wrapper {
+    grid-template-columns: repeat(4, minmax(180px, 1fr));
+  }
+}
+</style>
diff --git a/src/components/sp-video-picker/index.vue b/src/components/sp-picker-plus/VideoPicker.vue
similarity index 90%
rename from src/components/sp-video-picker/index.vue
rename to src/components/sp-picker-plus/VideoPicker.vue
index f20ff4a..8a9e2dd 100755
--- a/src/components/sp-video-picker/index.vue
+++ b/src/components/sp-picker-plus/VideoPicker.vue
@@ -19,9 +19,25 @@
     width: 142px;
     height: 80px;
     border: 1px solid #d9d9d9;
-    margin: 0 10px 10px 0;
+    margin: 0 10px 0 0;
     position: relative;
   }
+  &.big {
+    .image-item {
+      width: 100%;
+      height: 180px;
+      margin: 0;
+    }
+
+    .placeholder {
+      height: 180px;
+    }
+  }
+  &.multiple {
+    .image-item {
+      margin-bottom: 10px;
+    }
+  }
   .add-video {
     width: 80px;
   }
@@ -32,11 +48,10 @@
     align-items: center;
     justify-content: center;
   }
-  .icon-video {
-    font-size: 24px;
+  .picker-placeholder-icon {
+    width: 24px;
+    height: 24px;
     color: #d9d9d9;
-    line-height: initial;
-    // margin-top: 12px;
   }
   .add-text {
     font-size: 12px;
@@ -102,8 +117,10 @@
 <script>
 import Vue from 'vue'
 import { isArray, isEmpty, isString, isObject } from '@/utils'
+import { Video } from 'lucide-vue'
 export default {
-  name: 'SpVideoPicker',
+  name: 'VideoPicker',
+  components: { Video },
   props: {
     value: {
       type: [Object, Array, String]
@@ -230,11 +247,11 @@ export default {
     const { value, max, size } = this
     const multiple = isArray(value)
     return (
-      <div class={['sp-video-picker', size]}>
+      <div class={['sp-video-picker', size, { multiple }]}>
         {max > 1 && value.map((item, index) => this._renderImage(item, index))}
         {max > 1 && value.length < max && (
           <div class='image-item add-video placeholder' on-click={this.handleSelectImage}>
-            <i class='iconfont icon-video' />
+            <Video class='picker-placeholder-icon' strokeWidth={1.8} />
             <div class='add-text'>
               {this.$t('4a6afa54.7fcf42')}({`${value.length}/${max}`})
             </div>
@@ -244,7 +261,7 @@ export default {
         {max == 1 && !isEmpty(value) && this._renderImage(value)}
         {max == 1 && isEmpty(value) && (
           <div class='image-item add-video placeholder' on-click={this.handleSelectImage}>
-            <i class='iconfont icon-video' />
+            <Video class='picker-placeholder-icon' strokeWidth={1.8} />
             <div class='add-text'>{this.$t('4a6afa54.57e40c')}</div>
           </div>
         )}
diff --git a/src/components/sp-picker-plus/WebCustomPagePicker.vue b/src/components/sp-picker-plus/WebCustomPagePicker.vue
new file mode 100644
index 0000000..82d0cea
--- /dev/null
+++ b/src/components/sp-picker-plus/WebCustomPagePicker.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="sp-web-custom-page-picker bg-card text-foreground">
+    <SpFormPlus
+      ref="searchForm"
+      v-model="searchParams"
+      class="sp-web-custom-page-picker__search -mt-[12px] !bg-white !px-0"
+      :form-items="searchFormItems"
+      form-type="searchForm"
+      label-position="top"
+      @submit="onSearch"
+      @reset="onReset"
+    />
+
+    <SpTable
+      ref="table"
+      url="/pctemplate/lists"
+      class="sp-web-custom-page-picker__table bg-white"
+      row-key="theme_pc_template_id"
+      max-height="420"
+      :columns="columns"
+      :hooks="{ beforeSearch }"
+      :params="searchParams"
+      selection-mode="single"
+      :selected-rows.sync="selectedRowsValue"
+    />
+  </div>
+</template>
+
+<script>
+import SpFormPlus from '@/components/sp-form-plus'
+import SpTable from '@/components/sp-table'
+
+export default {
+  name: 'WebCustomPagePicker',
+  components: {
+    SpFormPlus,
+    SpTable
+  },
+  props: {
+    initialSelected: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      searchParams: {
+        template_title: ''
+      },
+      selectedRow: this.initialSelected ? { ...this.initialSelected } : null
+    }
+  },
+  computed: {
+    selectedRowsValue: {
+      get() {
+        return this.selectedRow ? [this.selectedRow] : []
+      },
+      set(rows) {
+        this.selectedRow = rows?.[0] ? this.normalizeSelectedRow(rows[0]) : null
+      }
+    },
+    searchFormItems() {
+      return [
+        {
+          fieldName: 'template_title',
+          label: '页面名称',
+          component: 'input',
+          componentProps: {
+            placeholder: '请输入页面名称',
+            clearable: true
+          }
+        }
+      ]
+    },
+    columns() {
+      return [
+        { name: '页面名称', key: 'template_title', minWidth: 260 },
+        {
+          name: '页面描述',
+          key: 'template_description',
+          minWidth: 360,
+          render: {
+            functional: true,
+            render: (h, { props }) =>
+              h('span', { class: 'text-muted-foreground' }, props.row.template_description || '—')
+          }
+        }
+      ]
+    }
+  },
+  methods: {
+    beforeSearch(query) {
+      return { ...query, ...this.searchParams, page_type: 'custom' }
+    },
+    onSearch() {
+      this.$refs.table.refresh(true)
+    },
+    onReset() {
+      this.searchParams = { template_title: '' }
+      this.$refs.table.refresh(true)
+    },
+    normalizeSelectedRow(row) {
+      return {
+        id: row.theme_pc_template_id ?? row.id,
+        title: row.template_title ?? row.title
+      }
+    },
+    submit() {
+      if (!this.selectedRow) {
+        this.$message.warning('请先选择一个自定义页面')
+        return
+      }
+      this.$emit('close', this.selectedRow)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.sp-web-custom-page-picker ::v-deep {
+  .sp-web-custom-page-picker__search.sp-form-plus--actions-bottom .sp-form-plus__wrapper {
+    grid-template-columns: repeat(4, minmax(180px, 1fr));
+  }
+}
+</style>
diff --git a/src/components/sp-picker-plus/WebNavPicker.vue b/src/components/sp-picker-plus/WebNavPicker.vue
new file mode 100644
index 0000000..68f21b6
--- /dev/null
+++ b/src/components/sp-picker-plus/WebNavPicker.vue
@@ -0,0 +1,225 @@
+<template>
+  <div class="sp-web-nav-picker bg-card text-foreground">
+    <SpFormPlus
+      ref="searchForm"
+      v-model="searchParams"
+      class="sp-web-nav-picker__search -mt-[12px] !bg-white !px-0"
+      :form-items="searchFormItems"
+      form-type="searchForm"
+      label-position="top"
+      @submit="onSearch"
+      @reset="onReset"
+    />
+
+    <SpTable
+      ref="table"
+      url="/web-menus"
+      class="sp-web-nav-picker__table bg-white"
+      row-key="id"
+      max-height="420"
+      :columns="columns"
+      :hooks="{ beforeSearch, afterSearch }"
+      :params="searchParams"
+      :selection-mode="multiple ? 'multiple' : 'single'"
+      :reserve-selection="multiple"
+      :selected-rows.sync="selectedRowsValue"
+    />
+
+    <div
+      v-if="selectedRows.length"
+      class="mt-3 flex items-center justify-between rounded-lg border border-border bg-muted/40 px-3 py-2 text-sm text-foreground"
+    >
+      <span>已选 {{ selectedRows.length }} 个导航菜单</span>
+      <el-button type="text" class="!p-0 !text-muted-foreground" @click="clearSelectedRow">
+        清空
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import SpFormPlus from '@/components/sp-form-plus'
+import SpTable from '@/components/sp-table'
+
+export default {
+  name: 'WebNavPicker',
+  components: {
+    SpFormPlus,
+    SpTable
+  },
+  props: {
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    initialSelected: {
+      type: [Object, Array],
+      default: null
+    }
+  },
+  data() {
+    return {
+      searchParams: {
+        name: ''
+      },
+      selectedRow:
+        !this.multiple && this.initialSelected && !Array.isArray(this.initialSelected)
+          ? { ...this.initialSelected }
+          : null,
+      selectedMap:
+        this.multiple && Array.isArray(this.initialSelected)
+          ? this.createSelectedMap(this.initialSelected)
+          : {}
+    }
+  },
+  computed: {
+    selectedRowsValue: {
+      get() {
+        return this.multiple
+          ? Object.values(this.selectedMap)
+          : this.selectedRow
+          ? [this.selectedRow]
+          : []
+      },
+      set(rows) {
+        if (this.multiple) {
+          this.selectedMap = this.createSelectedMap(rows)
+          return
+        }
+        this.selectedRow = rows?.[0] ? this.normalizeSelectedRow(rows[0]) : null
+      }
+    },
+    selectedRows() {
+      return this.multiple
+        ? Object.values(this.selectedMap)
+        : this.selectedRow
+        ? [this.selectedRow]
+        : []
+    },
+    searchFormItems() {
+      return [
+        {
+          fieldName: 'name',
+          label: '菜单名称',
+          component: 'input',
+          componentProps: {
+            placeholder: '请输入菜单名称',
+            clearable: true
+          }
+        }
+      ]
+    },
+    columns() {
+      return [
+        { name: '导航菜单', key: 'name', minWidth: 260 },
+        {
+          name: '菜单项',
+          key: 'top_level_item_names',
+          minWidth: 420,
+          render: {
+            functional: true,
+            render: (h, { props }) =>
+              h(
+                'span',
+                {
+                  class: 'text-muted-foreground',
+                  attrs: {
+                    title: this.getMenuItemText(props.row)
+                  }
+                },
+                this.getMenuItemText(props.row)
+              )
+          }
+        }
+      ]
+    }
+  },
+  methods: {
+    beforeSearch(query) {
+      const params = { ...query, ...this.searchParams }
+      if (params.page_size == null && params.pageSize != null) {
+        params.page_size = params.pageSize
+      }
+      return params
+    },
+    afterSearch(response) {
+      const list = response?.data?.data?.list || response?.data?.list || response?.list || []
+      this.syncSelectedRows(list)
+      return response
+    },
+    onSearch() {
+      this.$refs.table.refresh(true)
+    },
+    onReset() {
+      this.searchParams = { name: '' }
+      this.$refs.table.refresh(true)
+    },
+    clearSelectedRow() {
+      this.selectedRow = null
+      this.selectedMap = {}
+    },
+    syncSelectedRows(rows = []) {
+      if (!this.selectedRows.length) return
+      const matchedRows = rows.filter((row) =>
+        this.selectedRows.some((selected) => this.isSameMenu(row, selected))
+      )
+      if (!matchedRows.length) return
+      if (this.multiple) {
+        this.selectedMap = this.createSelectedMap(matchedRows)
+        return
+      }
+      this.selectedRow = this.normalizeSelectedRow(matchedRows[0])
+    },
+    normalizeSelectedRow(row) {
+      return {
+        id: row.id,
+        name: row.name,
+        key: row.key
+      }
+    },
+    createSelectedMap(rows = []) {
+      return rows.reduce((map, row) => {
+        const item = this.normalizeSelectedRow(row)
+        const key = this.getMenuIdentity(item)
+        if (key) map[key] = item
+        return map
+      }, {})
+    },
+    getMenuIdentity(row = {}) {
+      return String(row.id ?? row.key ?? row.name ?? '').trim()
+    },
+    isSameMenu(row = {}, selected = {}) {
+      const rowId = String(row.id ?? '').trim()
+      const selectedId = String(selected.id ?? '').trim()
+      if (rowId && selectedId && rowId === selectedId) return true
+
+      const rowKey = String(row.key ?? '').trim()
+      const selectedKey = String(selected.key ?? '').trim()
+      if (rowKey && selectedKey && rowKey === selectedKey) return true
+
+      const rowName = String(row.name ?? '').trim()
+      const selectedName = String(selected.name ?? '').trim()
+      return Boolean(rowName && selectedName && rowName === selectedName)
+    },
+    getMenuItemText(row) {
+      const text = row.top_level_item_names ?? row.menu_item_names ?? row.item_names ?? ''
+      return String(text).trim() || '—'
+    },
+    submit() {
+      if (!this.selectedRows.length) {
+        this.$message.warning(this.multiple ? '请至少选择一个导航菜单' : '请先选择一个导航菜单')
+        return
+      }
+      this.$emit('close', this.multiple ? this.selectedRows : this.selectedRows[0])
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.sp-web-nav-picker ::v-deep {
+  .sp-web-nav-picker__search.sp-form-plus--actions-bottom .sp-form-plus__wrapper {
+    grid-template-columns: repeat(4, minmax(180px, 1fr));
+  }
+}
+</style>
diff --git a/src/components/sp-picker-plus/index.js b/src/components/sp-picker-plus/index.js
new file mode 100644
index 0000000..0eae9ca
--- /dev/null
+++ b/src/components/sp-picker-plus/index.js
@@ -0,0 +1,4 @@
+export { default as VideoPicker } from './VideoPicker.vue'
+export { default as WebNavPicker } from './WebNavPicker.vue'
+export { default as GoodsPicker } from './GoodsPicker.vue'
+export { default as WebCustomPagePicker } from './WebCustomPagePicker.vue'
diff --git a/src/components/sp-picker/pickers/picker-article.vue b/src/components/sp-picker/pickers/picker-article.vue
index e060b43..41608bb 100755
--- a/src/components/sp-picker/pickers/picker-article.vue
+++ b/src/components/sp-picker/pickers/picker-article.vue
@@ -91,7 +91,9 @@ export default {
       const raw = this.value?.data
       if (raw == null || raw === '') return
       const selectedIds = Array.isArray(raw) ? raw : [raw]
-      const selectRows = list.filter((item) => selectedIds.map(String).includes(String(item.article_id)))
+      const selectRows = list.filter((item) =>
+        selectedIds.map(String).includes(String(item.article_id))
+      )
       if (!selectRows.length) return
       const finderTable = this.$refs.finder?.$refs?.finderTable
       if (!finderTable?.$refs?.finderTable) return
diff --git a/src/components/sp-picker/pickers/picker-company.vue b/src/components/sp-picker/pickers/picker-company.vue
index f8f624f..c533056 100755
--- a/src/components/sp-picker/pickers/picker-company.vue
+++ b/src/components/sp-picker/pickers/picker-company.vue
@@ -92,7 +92,12 @@ export default {
             key: 'disabled',
             width: 88,
             formatter: (value, row) => {
-              if (row == null || row.disabled === undefined || row.disabled === null || row.disabled === '') {
+              if (
+                row == null ||
+                row.disabled === undefined ||
+                row.disabled === null ||
+                row.disabled === ''
+              ) {
                 return '—'
               }
               const d = row.disabled
@@ -149,10 +154,7 @@ export default {
         if (id == null) {
           return
         }
-        const row =
-          typeof entry === 'object' && entry != null
-            ? { ...entry }
-            : { id }
+        const row = typeof entry === 'object' && entry != null ? { ...entry } : { id }
         const prev = this.selectedById[id]
         next[id] = prev && typeof prev === 'object' ? { ...prev, ...row } : row
       })
diff --git a/src/components/sp-picker/pickers/picker-coupon.vue b/src/components/sp-picker/pickers/picker-coupon.vue
index 926e548..3e960fb 100755
--- a/src/components/sp-picker/pickers/picker-coupon.vue
+++ b/src/components/sp-picker/pickers/picker-coupon.vue
@@ -200,7 +200,9 @@ export default {
       const raw = this.value?.data
       if (raw == null || raw === '') return
       const selectedIds = Array.isArray(raw) ? raw : [raw]
-      const selectRows = list.filter((item) => selectedIds.map(String).includes(String(item.card_id)))
+      const selectRows = list.filter((item) =>
+        selectedIds.map(String).includes(String(item.card_id))
+      )
       if (!selectRows.length) return
       const finderTable = this.$refs.finder?.$refs?.finderTable
       if (!finderTable?.$refs?.finderTable) return
diff --git a/src/components/sp-picker/pickers/picker-image.vue b/src/components/sp-picker/pickers/picker-image.vue
index d47b2e3..9c3fa07 100755
--- a/src/components/sp-picker/pickers/picker-image.vue
+++ b/src/components/sp-picker/pickers/picker-image.vue
@@ -171,15 +171,11 @@
         />
 
         <el-button @click="onAddGroup" class="h-[calc(1em+16px)]">
-{{
-          addGroupBtnText
-        }}
-</el-button>
+          {{ addGroupBtnText }}
+        </el-button>
         <el-button :disabled="disabledBtn" @click="onMoveGroup">
-{{
-          moveGroupBtnText
-        }}
-</el-button>
+          {{ moveGroupBtnText }}
+        </el-button>
         <!-- <el-button :disabled="disabledDeleteGroup" @click="onDeleteImageGroup">
           删除分组
         </el-button> -->
@@ -204,10 +200,8 @@
           下载
         </el-button> -->
         <el-button :disabled="disabledBtn" @click="handleCancelAll">
-{{
-          cancelAllBtnText
-        }}
-</el-button>
+          {{ cancelAllBtnText }}
+        </el-button>
       </div>
       <!-- <div>
         <el-input size="small" placeholder="请输入图片名称" suffix-icon="el-icon-search" />
@@ -361,9 +355,7 @@
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="cropperDialogShow = false">{{ cancelText }}</el-button>
-        <el-button type="primary" @click="cropperDialogShow = false">{{
-          confirmText
-        }}</el-button>
+        <el-button type="primary" @click="cropperDialogShow = false">{{ confirmText }}</el-button>
       </span>
     </el-dialog>
   </div>
@@ -394,10 +386,7 @@ export default {
   extends: BasePicker,
   mixins: [PageMixin],
   config: {
-    title: ''
-  },
-  created() {
-    this.$options.config.title = i18n.t('4c4bec01.e757d0')
+    title: i18n.t('4c4bec01.e757d0')
   },
   props: {
     value: {
diff --git a/src/components/sp-picker/pickers/picker-live.vue b/src/components/sp-picker/pickers/picker-live.vue
index e55cb5a..7a9e12f 100755
--- a/src/components/sp-picker/pickers/picker-live.vue
+++ b/src/components/sp-picker/pickers/picker-live.vue
@@ -112,7 +112,9 @@ export default {
       const raw = this.value?.data
       if (raw == null || raw === '') return
       const selectedIds = Array.isArray(raw) ? raw : [raw]
-      const selectRows = list.filter((item) => selectedIds.map(String).includes(String(item.roomid)))
+      const selectRows = list.filter((item) =>
+        selectedIds.map(String).includes(String(item.roomid))
+      )
       if (!selectRows.length) return
       const finderTable = this.$refs.finder?.$refs?.finderTable
       if (!finderTable?.$refs?.finderTable) return
diff --git a/src/components/sp-picker/pickers/picker-planting.vue b/src/components/sp-picker/pickers/picker-planting.vue
index e6630b1..1ca0451 100755
--- a/src/components/sp-picker/pickers/picker-planting.vue
+++ b/src/components/sp-picker/pickers/picker-planting.vue
@@ -95,7 +95,9 @@ export default {
       const raw = this.value?.data
       if (raw == null || raw === '') return
       const selectedIds = Array.isArray(raw) ? raw : [raw]
-      const selectRows = list.filter((item) => selectedIds.map(String).includes(String(item.article_id)))
+      const selectRows = list.filter((item) =>
+        selectedIds.map(String).includes(String(item.article_id))
+      )
       if (!selectRows.length) return
       const finderTable = this.$refs.finder?.$refs?.finderTable
       if (!finderTable?.$refs?.finderTable) return
diff --git a/src/components/sp-picker/pickers/picker-regactivity.vue b/src/components/sp-picker/pickers/picker-regactivity.vue
index aa24610..669db57 100755
--- a/src/components/sp-picker/pickers/picker-regactivity.vue
+++ b/src/components/sp-picker/pickers/picker-regactivity.vue
@@ -123,7 +123,9 @@ export default {
       const raw = this.value?.data
       if (raw == null || raw === '') return
       const selectedIds = Array.isArray(raw) ? raw : [raw]
-      const selectRows = list.filter((item) => selectedIds.map(String).includes(String(item.activity_id)))
+      const selectRows = list.filter((item) =>
+        selectedIds.map(String).includes(String(item.activity_id))
+      )
       if (!selectRows.length) return
       const finderTable = this.$refs.finder?.$refs?.finderTable
       if (!finderTable?.$refs?.finderTable) return
diff --git a/src/components/sp-picker/pickers/picker-shop.vue b/src/components/sp-picker/pickers/picker-shop.vue
index e6eedf1..a9cb269 100755
--- a/src/components/sp-picker/pickers/picker-shop.vue
+++ b/src/components/sp-picker/pickers/picker-shop.vue
@@ -205,7 +205,9 @@ export default {
       const raw = this.value?.data
       if (raw == null || raw === '') return
       const selectedIds = Array.isArray(raw) ? raw : [raw]
-      const selectRows = list.filter((item) => selectedIds.map(String).includes(String(item.distributor_id)))
+      const selectRows = list.filter((item) =>
+        selectedIds.map(String).includes(String(item.distributor_id))
+      )
       if (!selectRows.length) return
       const finderTable = this.$refs.finder?.$refs?.finderTable
       if (!finderTable?.$refs?.finderTable) return
diff --git a/src/components/sp-picker/pickers/picker-tag.vue b/src/components/sp-picker/pickers/picker-tag.vue
index 8e51c1a..ba6f0f9 100755
--- a/src/components/sp-picker/pickers/picker-tag.vue
+++ b/src/components/sp-picker/pickers/picker-tag.vue
@@ -144,7 +144,9 @@ export default {
       const raw = this.value?.data
       if (raw == null || raw === '') return
       const selectedIds = Array.isArray(raw) ? raw : [raw]
-      const selectRows = list.filter((item) => selectedIds.map(String).includes(String(item.tag_id)))
+      const selectRows = list.filter((item) =>
+        selectedIds.map(String).includes(String(item.tag_id))
+      )
       if (!selectRows.length) return
       const finderTable = this.$refs.finder?.$refs?.finderTable
       if (!finderTable?.$refs?.finderTable) return
diff --git a/src/components/sp-picker/pickers/picker-template.vue b/src/components/sp-picker/pickers/picker-template.vue
index 50a3902..c6801b1 100755
--- a/src/components/sp-picker/pickers/picker-template.vue
+++ b/src/components/sp-picker/pickers/picker-template.vue
@@ -109,7 +109,9 @@ export default {
       const raw = this.value?.data
       if (raw == null || raw === '') return
       const selectedIds = Array.isArray(raw) ? raw : [raw]
-      const selectRow = list.filter((item) => selectedIds.map(String).includes(String(item.pages_template_id)))
+      const selectRow = list.filter((item) =>
+        selectedIds.map(String).includes(String(item.pages_template_id))
+      )
       if (!selectRow.length) return
       const finderTable = this.$refs.finder?.$refs?.finderTable
       if (!finderTable?.$refs?.finderTable) return
diff --git a/src/components/sp-picker/pickers/picker-wxapp.vue b/src/components/sp-picker/pickers/picker-wxapp.vue
index 04b730c..e298968 100755
--- a/src/components/sp-picker/pickers/picker-wxapp.vue
+++ b/src/components/sp-picker/pickers/picker-wxapp.vue
@@ -105,7 +105,9 @@ export default {
       const raw = this.value?.data
       if (raw == null || raw === '') return
       const selectedIds = Array.isArray(raw) ? raw : [raw]
-      const selectRows = list.filter((item) => selectedIds.map(String).includes(String(item.wx_external_routes_id)))
+      const selectRows = list.filter((item) =>
+        selectedIds.map(String).includes(String(item.wx_external_routes_id))
+      )
       if (!selectRows.length) return
       const finderTable = this.$refs.finder?.$refs?.finderTable
       if (!finderTable?.$refs?.finderTable) return
diff --git a/src/components/sp-picker/plugin.js b/src/components/sp-picker/plugin.js
index 672987c..5a5f102 100755
--- a/src/components/sp-picker/plugin.js
+++ b/src/components/sp-picker/plugin.js
@@ -43,7 +43,10 @@ export default {
       goodsList: (args) =>
         fn({ value: { ...args }, type: 'pickerGoodsList', width: '1110px' }, parent),
       goodsitem: (args) =>
-        fn({ value: { ...(args || {}), type: 'pickerGoodsItem' }, type: 'pickerGoodsItem' }, parent),
+        fn(
+          { value: { ...(args || {}), type: 'pickerGoodsItem' }, type: 'pickerGoodsItem' },
+          parent
+        ),
       goodsSku: (args) => fn({ value: { ...args }, type: 'pickerGoodsSku' }, parent),
       goodsParams: (args) => fn({ value: { ...args }, type: 'pickerGoodsParams' }, parent),
       supplier: (args) => fn({ value: { ...args }, type: 'pickerSupplier' }, parent),
diff --git a/src/components/sp-rich-text-editor/index.vue b/src/components/sp-rich-text-editor/index.vue
new file mode 100644
index 0000000..6481a30
--- /dev/null
+++ b/src/components/sp-rich-text-editor/index.vue
@@ -0,0 +1,333 @@
+<template>
+  <div class="sp-rich-text-editor" :class="{ 'is-disabled': disabled }">
+    <div class="sp-rte-toolbar">
+      <button
+        class="sp-rte-btn"
+        :class="{ 'is-active': states.bold }"
+        type="button"
+        title="粗体"
+        @mousedown.prevent
+        @click="execCmd('bold')"
+      >
+        <Bold :size="14" :stroke-width="2.6" />
+      </button>
+      <button
+        class="sp-rte-btn sp-rte-btn--italic"
+        :class="{ 'is-active': states.italic }"
+        type="button"
+        title="斜体"
+        @mousedown.prevent
+        @click="execCmd('italic')"
+      >
+        <Italic :size="14" :stroke-width="2.6" />
+      </button>
+      <div class="sp-rte-color-wrap">
+        <span
+          class="sp-rte-color-label"
+          :style="{ color: currentColor }"
+          @mousedown.prevent="saveSelection"
+          @click="openColorPicker"
+        >
+          <Palette :size="14" :stroke-width="2.2" />
+        </span>
+        <el-color-picker
+          ref="colorPicker"
+          v-model="currentColor"
+          class="sp-rte-color-picker"
+          size="mini"
+          :predefine="predefineColors"
+          @change="applyColor"
+        />
+      </div>
+    </div>
+
+    <div
+      ref="editor"
+      class="sp-rte-content"
+      :contenteditable="String(!disabled)"
+      :style="editorStyle"
+      :data-placeholder="placeholder"
+      @input="onInput"
+      @keyup="updateStates"
+      @mouseup="updateStates"
+      @blur="onBlur"
+      @focus="$emit('focus')"
+    />
+  </div>
+</template>
+
+<script>
+import { Bold, Italic, Palette } from 'lucide-vue'
+
+export default {
+  name: 'SpRichTextEditor',
+  components: {
+    Bold,
+    Italic,
+    Palette
+  },
+  model: {
+    prop: 'value',
+    event: 'input'
+  },
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: '请输入内容'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    height: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      states: {
+        bold: false,
+        italic: false
+      },
+      currentColor: '#000000',
+      savedRange: null,
+      predefineColors: [
+        '#000000',
+        '#FFFFFF',
+        '#9E9E9E',
+        '#F44336',
+        '#FF9800',
+        '#FFEB3B',
+        '#4CAF50',
+        '#00BCD4',
+        '#2196F3',
+        '#9C27B0',
+        '#795548',
+        '#FF5722'
+      ]
+    }
+  },
+  computed: {
+    editorStyle() {
+      return this.height ? { minHeight: this.height } : null
+    }
+  },
+  watch: {
+    value(newVal) {
+      if (this.$refs.editor && this.$refs.editor.innerHTML !== newVal) {
+        this.$refs.editor.innerHTML = newVal || ''
+      }
+    }
+  },
+  mounted() {
+    this.$refs.editor.innerHTML = this.value || ''
+    document.addEventListener('selectionchange', this.saveSelection)
+  },
+  beforeDestroy() {
+    document.removeEventListener('selectionchange', this.saveSelection)
+  },
+  methods: {
+    execCmd(cmd) {
+      if (this.disabled) return
+      this.focusEditor()
+      document.execCommand(cmd, false, null)
+      this.updateStates()
+      this.emitInput()
+    },
+    updateStates() {
+      if (this.disabled) return
+      this.states.bold = document.queryCommandState('bold')
+      this.states.italic = document.queryCommandState('italic')
+      const color = document.queryCommandValue('foreColor')
+      if (color) this.currentColor = this.rgbToHex(color)
+      this.saveSelection()
+    },
+    saveSelection() {
+      const selection = window.getSelection()
+      if (!selection || selection.rangeCount === 0) return
+
+      const range = selection.getRangeAt(0)
+      if (!this.$refs.editor.contains(range.commonAncestorContainer)) return
+      this.savedRange = range.cloneRange()
+    },
+    restoreSelection() {
+      if (!this.savedRange) return
+      const selection = window.getSelection()
+      if (!selection) return
+      selection.removeAllRanges()
+      selection.addRange(this.savedRange)
+    },
+    focusEditor() {
+      this.$refs.editor.focus()
+      this.restoreSelection()
+      document.execCommand('styleWithCSS', false, true)
+    },
+    applyColor(color) {
+      if (this.disabled || !color) return
+      this.focusEditor()
+      document.execCommand('foreColor', false, color)
+      this.currentColor = color
+      this.emitInput()
+      this.updateStates()
+    },
+    openColorPicker() {
+      if (this.disabled) return
+      this.saveSelection()
+      this.$nextTick(() => {
+        const trigger =
+          this.$refs.colorPicker &&
+          this.$refs.colorPicker.$el.querySelector('.el-color-picker__trigger')
+        if (trigger) trigger.click()
+      })
+    },
+    onInput() {
+      this.saveSelection()
+      this.emitInput()
+    },
+    onBlur() {
+      this.saveSelection()
+      this.$emit('blur')
+      this.$emit('change', this.$refs.editor.innerHTML)
+    },
+    emitInput() {
+      this.$emit('input', this.$refs.editor.innerHTML)
+    },
+    rgbToHex(color) {
+      if (color.startsWith('#')) return color
+      const match = color.match(/\d+/g)
+      if (!match || match.length < 3) return '#000000'
+      return `#${match
+        .slice(0, 3)
+        .map((value) => Number(value).toString(16).padStart(2, '0'))
+        .join('')}`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sp-rich-text-editor {
+  border: 1px solid #dcdfe6;
+  border-radius: 10px;
+  overflow: hidden;
+  background: #fff;
+  transition: border-color 0.2s, box-shadow 0.2s;
+
+  &:focus-within {
+    border-color: var(--primary, #409eff);
+    box-shadow: none;
+  }
+
+  &.is-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    .sp-rte-toolbar,
+    .sp-rte-content {
+      pointer-events: none;
+    }
+  }
+}
+
+.sp-rte-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 36px;
+  padding: 4px 12px;
+  border-bottom: 1px solid #edf0f5;
+  background: #fff;
+}
+
+.sp-rte-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 700;
+  color: #5f646d;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+
+  &:hover {
+    background: #f4f6f9;
+    border-color: transparent;
+  }
+
+  &.is-active {
+    background: #f4f6f9;
+    border-color: transparent;
+    color: #191a1d;
+  }
+}
+
+.sp-rte-color-wrap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+  cursor: pointer;
+  position: relative;
+  color: #5f646d;
+
+  &:hover {
+    background: #f4f6f9;
+  }
+
+  .sp-rte-color-picker {
+    width: 0;
+    height: 0;
+    overflow: hidden;
+  }
+
+  ::v-deep .el-color-picker__trigger {
+    width: 0;
+    height: 0;
+    border: none;
+    padding: 0;
+    opacity: 0;
+  }
+
+  ::v-deep .el-color-picker__color {
+    border-radius: 2px;
+  }
+}
+
+.sp-rte-color-label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  user-select: none;
+}
+
+.sp-rte-content {
+  min-height: 36px;
+  padding: 6px 12px;
+  outline: none;
+  font-size: 14px;
+  line-height: 1.6;
+  color: #303133;
+  word-break: break-all;
+  overflow: visible;
+
+  &:empty::before {
+    content: attr(data-placeholder);
+    color: #b8c0cc;
+    pointer-events: none;
+  }
+}
+</style>
diff --git a/src/components/sp-router-view/index.vue b/src/components/sp-router-view/index.vue
index 02173ba..09add3f 100755
--- a/src/components/sp-router-view/index.vue
+++ b/src/components/sp-router-view/index.vue
@@ -3,15 +3,6 @@
   See LICENSE file for license details.
 -->
 
-<template>
-  <div class="sp-router-view">
-    <div v-show="!showRouterView">
-      <slot />
-    </div>
-    <router-view v-show="showRouterView" />
-  </div>
-</template>
-
 <script>
 export default {
   name: 'SpRouterView',
@@ -23,12 +14,25 @@ export default {
   computed: {
     showRouterView() {
       const { matched } = this.$route
-      return matched.length == 3
+      return matched.length === 3
     }
   },
   created() {
     this.currentRoute = this.$route
   },
+  render(h) {
+    if (this.showRouterView) {
+      return h('router-view')
+    }
+    const nodes = this.$slots.default
+    if (!nodes || !nodes.length) {
+      return h('span', { style: { display: 'none' }, attrs: { 'aria-hidden': 'true' } })
+    }
+    if (nodes.length === 1) {
+      return nodes[0]
+    }
+    return h('div', { style: { display: 'contents' } }, nodes)
+  },
   methods: {
     onActivated() {
       this.$parent.$activated(this.currentRoute, this.$route)
diff --git a/src/components/sp-table/index.vue b/src/components/sp-table/index.vue
new file mode 100644
index 0000000..b17ae95
--- /dev/null
+++ b/src/components/sp-table/index.vue
@@ -0,0 +1,321 @@
+<template>
+  <div class="sp-table">
+    <el-table
+      ref="table"
+      v-loading="loading"
+      v-bind="tableAttrs"
+      :data="tableData"
+      :row-key="rowKey"
+      :row-class-name="resolveRowClassName"
+      border
+      stripe
+      @selection-change="handleSelectionChange"
+      @select="handleSelect"
+      @select-all="handleSelectAll"
+      @row-click="handleRowClick"
+    >
+      <el-table-column
+        v-if="selectionMode !== 'none'"
+        type="selection"
+        align="center"
+        width="55"
+        :reserve-selection="reserveSelection"
+      />
+      <el-table-column
+        v-for="column in columns"
+        :key="column.key || column.prop"
+        v-bind="getColumnProps(column)"
+      >
+        <template slot-scope="scope">
+          <component
+            :is="column.render"
+            v-if="column.render"
+            :row="scope.row"
+            :column="scope.column"
+            :index="scope.$index"
+          />
+          <span v-else>{{ formatCell(scope.row, column) }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div v-if="showPager" class="sp-table__footer">
+      <el-pagination
+        background
+        layout="total, sizes, prev, pager, next, jumper"
+        :current-page="pagination.page"
+        :page-size="pagination.pageSize"
+        :page-sizes="pageSizes"
+        :total="pagination.total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { requestClient } from '@/api/request'
+import { getRowKey, isSameRow, toggleSingleSelection } from './selection.js'
+
+function normalizeListResponse(response) {
+  const payload = response?.data?.data || response?.data || response || {}
+  const list = payload.list || payload.data?.list || []
+  const total = payload.total_count ?? payload.count ?? payload.total ?? list.length
+  return {
+    list: Array.isArray(list) ? list : [],
+    total: Number(total) || 0
+  }
+}
+
+export default {
+  name: 'SpTable',
+  inheritAttrs: false,
+  props: {
+    url: {
+      type: String,
+      default: ''
+    },
+    data: {
+      type: Array,
+      default: null
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    rowKey: {
+      type: [String, Function],
+      default: 'id'
+    },
+    selectionMode: {
+      type: String,
+      default: 'none',
+      validator: (value) => ['none', 'single', 'multiple'].includes(value)
+    },
+    reserveSelection: {
+      type: Boolean,
+      default: false
+    },
+    selectedRows: {
+      type: Array,
+      default: () => []
+    },
+    hooks: {
+      type: Object,
+      default: () => ({})
+    },
+    params: {
+      type: Object,
+      default: () => ({})
+    },
+    showPager: {
+      type: Boolean,
+      default: true
+    },
+    pageSizes: {
+      type: Array,
+      default: () => [10, 20, 30, 40, 50, 100]
+    },
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+    rowClassName: {
+      type: Function,
+      default: null
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      tableData: [],
+      pagination: {
+        page: 1,
+        pageSize: this.pageSize,
+        total: 0
+      },
+      syncingSelection: false
+    }
+  },
+  computed: {
+    tableAttrs() {
+      return this.$attrs
+    }
+  },
+  watch: {
+    data: {
+      immediate: true,
+      handler(value) {
+        if (!Array.isArray(value)) return
+        this.tableData = value
+        this.pagination.total = value.length
+        this.syncSelection()
+      }
+    },
+    selectedRows: {
+      deep: true,
+      handler() {
+        this.syncSelection()
+      }
+    }
+  },
+  mounted() {
+    if (!Array.isArray(this.data)) {
+      this.refresh(true)
+    }
+  },
+  methods: {
+    async refresh(force = false) {
+      if (force) this.pagination.page = 1
+      if (!this.url) return
+
+      this.loading = true
+      try {
+        const params = this.resolveSearchParams()
+        const response = await requestClient.instance.get(this.url, { params })
+        const nextResponse = this.hooks.afterSearch
+          ? this.hooks.afterSearch(response) || response
+          : response
+        const { list, total } = normalizeListResponse(nextResponse)
+        this.tableData = list
+        this.pagination.total = total
+        this.syncSelection()
+      } finally {
+        this.loading = false
+      }
+    },
+    resolveSearchParams() {
+      const params = {
+        ...this.params,
+        page: this.pagination.page,
+        pageNum: this.pagination.page,
+        pageSize: this.pagination.pageSize,
+        page_size: this.pagination.pageSize
+      }
+      return this.hooks.beforeSearch ? this.hooks.beforeSearch(params) : params
+    },
+    handleSizeChange(pageSize) {
+      this.pagination.pageSize = pageSize
+      this.refresh(true)
+      this.$emit('size-change', pageSize)
+    },
+    handleCurrentChange(page) {
+      this.pagination.page = page
+      this.refresh()
+      this.$emit('current-change', page)
+    },
+    handleRowClick(row, column, event) {
+      if (this.selectionMode === 'single') {
+        this.emitSingleSelection(toggleSingleSelection(this.selectedRows[0], row, this.rowKey))
+      }
+      this.$emit('row-click', row, column, event)
+    },
+    handleSelect(selection, row) {
+      if (this.syncingSelection) return
+      if (this.selectionMode === 'single') {
+        const checked = selection.some((item) => isSameRow(item, row, this.rowKey))
+        this.emitSingleSelection(checked ? row : null)
+        return
+      }
+      this.$emit('update:selectedRows', selection)
+      this.$emit('select', selection, row)
+    },
+    handleSelectAll(selection) {
+      if (this.syncingSelection) return
+      if (this.selectionMode === 'single') {
+        this.emitSingleSelection(selection[selection.length - 1] || null)
+        return
+      }
+      this.$emit('update:selectedRows', selection)
+      this.$emit('select-all', selection)
+    },
+    handleSelectionChange(selection) {
+      if (this.syncingSelection) return
+      if (this.selectionMode !== 'multiple') return
+      this.$emit('selection-change', selection)
+    },
+    emitSingleSelection(row) {
+      const rows = row ? [row] : []
+      this.$emit('update:selectedRows', rows)
+      this.$emit('selection-change', rows)
+      this.$nextTick(() => this.syncSelection(rows))
+    },
+    syncSelection(rows = this.selectedRows) {
+      this.$nextTick(() => {
+        const table = this.$refs.table
+        if (!table) return
+        this.syncingSelection = true
+        table.clearSelection()
+        rows.forEach((selected) => {
+          const row = this.tableData.find((item) => isSameRow(item, selected, this.rowKey))
+          if (row) table.toggleRowSelection(row, true)
+        })
+        this.$nextTick(() => {
+          this.syncingSelection = false
+        })
+      })
+    },
+    clearSelection() {
+      this.$emit('update:selectedRows', [])
+      this.$nextTick(() => this.syncSelection([]))
+    },
+    getSelection() {
+      return this.selectedRows
+    },
+    resolveRowClassName(scope) {
+      const classes = []
+      if (this.selectedRows.some((item) => isSameRow(item, scope.row, this.rowKey))) {
+        classes.push('is-picker-selected')
+      }
+      if (this.rowClassName) {
+        const customClass = this.rowClassName(scope)
+        if (customClass) classes.push(customClass)
+      }
+      return classes.join(' ')
+    },
+    getColumnProps(column) {
+      const { key, render, formatter, ...rest } = column
+      return {
+        prop: column.prop || key,
+        label: column.label || column.name,
+        ...rest
+      }
+    },
+    formatCell(row, column) {
+      if (column.formatter) return column.formatter(row[column.key], row, column)
+      return row[column.key] ?? row[column.prop] ?? ''
+    },
+    getRowKey(row) {
+      return getRowKey(row, this.rowKey)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.sp-table {
+  ::v-deep {
+    .el-table__row {
+      cursor: pointer;
+    }
+
+    .el-table__body tr.is-picker-selected > td,
+    .el-table__body tr:hover > td {
+      background: hsl(var(--primary) / 0.08);
+    }
+
+    .el-table th {
+      background: #f3f4f6;
+      color: #606266;
+      font-weight: 600;
+    }
+  }
+}
+
+.sp-table__footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
+}
+</style>
diff --git a/src/components/sp-table/selection.js b/src/components/sp-table/selection.js
new file mode 100644
index 0000000..82729d3
--- /dev/null
+++ b/src/components/sp-table/selection.js
@@ -0,0 +1,19 @@
+export function getRowKey(row = {}, rowKey = 'id') {
+  if (typeof rowKey === 'function') return rowKey(row)
+  return row?.[rowKey]
+}
+
+export function normalizeKey(value) {
+  return String(value ?? '').trim()
+}
+
+export function isSameRow(left = {}, right = {}, rowKey = 'id') {
+  const leftKey = normalizeKey(getRowKey(left, rowKey))
+  const rightKey = normalizeKey(getRowKey(right, rowKey))
+  return Boolean(leftKey && rightKey && leftKey === rightKey)
+}
+
+export function toggleSingleSelection(currentRow, row, rowKey = 'id') {
+  if (!row) return null
+  return currentRow && isSameRow(currentRow, row, rowKey) ? null : row
+}
diff --git a/src/components/sp-table/selection.mjs b/src/components/sp-table/selection.mjs
new file mode 100644
index 0000000..82729d3
--- /dev/null
+++ b/src/components/sp-table/selection.mjs
@@ -0,0 +1,19 @@
+export function getRowKey(row = {}, rowKey = 'id') {
+  if (typeof rowKey === 'function') return rowKey(row)
+  return row?.[rowKey]
+}
+
+export function normalizeKey(value) {
+  return String(value ?? '').trim()
+}
+
+export function isSameRow(left = {}, right = {}, rowKey = 'id') {
+  const leftKey = normalizeKey(getRowKey(left, rowKey))
+  const rightKey = normalizeKey(getRowKey(right, rowKey))
+  return Boolean(leftKey && rightKey && leftKey === rightKey)
+}
+
+export function toggleSingleSelection(currentRow, row, rowKey = 'id') {
+  if (!row) return null
+  return currentRow && isSameRow(currentRow, row, rowKey) ? null : row
+}
diff --git a/src/components/sp-table/selection.test.mjs b/src/components/sp-table/selection.test.mjs
new file mode 100644
index 0000000..5196410
--- /dev/null
+++ b/src/components/sp-table/selection.test.mjs
@@ -0,0 +1,24 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+import { toggleSingleSelection, isSameRow } from './selection.mjs'
+
+test('single selection replaces previous row', () => {
+  const first = { id: 1, name: '测试' }
+  const second = { id: 2, name: '620菜单' }
+
+  assert.equal(toggleSingleSelection(first, second), second)
+})
+
+test('single selection toggles current row off', () => {
+  const current = { id: '2', name: '620菜单' }
+  const row = { id: 2, name: '620菜单' }
+
+  assert.equal(toggleSingleSelection(current, row), null)
+})
+
+test('row comparison accepts custom row key function', () => {
+  assert.equal(
+    isSameRow({ code: 620 }, { code: '620' }, (row) => row.code),
+    true
+  )
+})
diff --git a/src/components/sp-translate-popup/index.vue b/src/components/sp-translate-popup/index.vue
index b3a8582..f5d4236 100644
--- a/src/components/sp-translate-popup/index.vue
+++ b/src/components/sp-translate-popup/index.vue
@@ -13,11 +13,7 @@
       <div class="translate-lang-box">
         <p class="translate-lang-label">{{ $t('41f42a3e.8085da') }}</p>
         <el-checkbox-group v-model="selectedLangs">
-          <el-checkbox
-            v-for="lang in availableLangs"
-            :key="lang.key"
-            :label="lang.key"
-          >
+          <el-checkbox v-for="lang in availableLangs" :key="lang.key" :label="lang.key">
             {{ lang.label }}
           </el-checkbox>
         </el-checkbox-group>
diff --git a/src/components/sp-video-picker/index.scss b/src/components/sp-video-picker/index.scss
deleted file mode 100755
index 27982ea..0000000
--- a/src/components/sp-video-picker/index.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-/**
- * Copyright © ShopeX （http://www.shopex.cn）. All rights reserved.
- * See LICENSE file for license details.
- */
diff --git a/src/components/sp-web-decoration/adapters/apiPersistence.js b/src/components/sp-web-decoration/adapters/apiPersistence.js
new file mode 100644
index 0000000..a5b2e63
--- /dev/null
+++ b/src/components/sp-web-decoration/adapters/apiPersistence.js
@@ -0,0 +1,466 @@
+/**
+ * PC 模板装修：与 ThemeBundle pctemplate 接口对接，存取 ECX 编辑器 DSL。
+ * 读取统一走 getDecorationContent，按 page_name 区分 page/header/footer。
+ * 保存仍维持 page 与 header/footer 分开调用，兼容现有后端存储。
+ */
+import { getDecorationContent, saveTemplateContent, saveHeaderOrFooter } from '@/api/webtemplate'
+import {
+  createHomeDsl,
+  createCustomDsl,
+  createProductListDsl,
+  createGlobalDsl,
+  serializeDsl,
+  deserializeDsl,
+  ensureGlobalDslDefaults,
+  createHeaderDsl,
+  createFooterDsl,
+  splitGlobalDsl
+} from '../utils/dsl.js'
+import { createGlobalSections } from '../definitions/documents/global.js'
+
+export const DSL_ROW_TYPE = 'ECX_SP_WEB_DECORATION_DSL_V1'
+const LEGACY_GLOBAL_DECORATION_PAGE_NAME = 'ecx_sp_web_decoration_global'
+export const HEADER_DECORATION_PAGE_NAME = 'header'
+export const FOOTER_DECORATION_PAGE_NAME = 'footer'
+
+function createPageFallback(templateId, scene, pageType = 'home') {
+  if (pageType === 'custom') {
+    return createCustomDsl({ pageId: String(templateId || ''), scene })
+  }
+  if (pageType === 'product_list') {
+    return createProductListDsl({ pageId: String(templateId || 'product_list'), scene })
+  }
+  const dsl = createHomeDsl({ pageId: String(templateId || ''), scene })
+  dsl.pageType = pageType
+  return dsl
+}
+
+function createGlobalFallback() {
+  return createGlobalDsl(createGlobalSections())
+}
+
+function createHeaderFallback() {
+  return createHeaderDsl()
+}
+
+function createFooterFallback() {
+  return createFooterDsl()
+}
+
+function normalizePageDsl(raw, templateId, scene, pageType = 'home') {
+  const fallback = createPageFallback(templateId, scene, pageType)
+  if (raw == null) return fallback
+  let payload = raw
+  if (typeof raw === 'string') {
+    try {
+      payload = JSON.parse(raw)
+    } catch (e) {
+      return fallback
+    }
+  }
+  if (typeof payload !== 'object' || payload === null) return fallback
+  try {
+    const d = deserializeDsl(payload)
+    if (!d || typeof d !== 'object') return fallback
+    if (typeof d.sections !== 'object' || d.sections === null) return fallback
+    if (!Array.isArray(d.order)) d.order = []
+    d.pageType = fallback.pageType
+    d.pageId = fallback.pageId
+    if (!d.meta || typeof d.meta !== 'object') d.meta = { ...(fallback.meta || {}) }
+    return d
+  } catch (e) {
+    console.warn('[decoration] normalizePageDsl', e)
+    return fallback
+  }
+}
+
+function normalizeGlobalDsl(raw) {
+  const fallback = createGlobalFallback()
+  if (raw == null) return fallback
+  let payload = raw
+  if (typeof raw === 'string') {
+    try {
+      payload = JSON.parse(raw)
+    } catch (e) {
+      return fallback
+    }
+  }
+  if (typeof payload !== 'object' || payload === null) return fallback
+  try {
+    const d = deserializeDsl(payload)
+    if (!d || typeof d !== 'object') return fallback
+    if (d.pageType !== 'global') return fallback
+    const sections = d.sections || {}
+    const keys = Object.keys(sections)
+    if (keys.length === 0) return fallback
+
+    if (!Array.isArray(d.order)) d.order = []
+    if (d.order.length === 0) {
+      const preferred = (fallback.order || []).filter((id) => sections[id])
+      d.order = preferred.length ? preferred : keys
+    }
+    return ensureGlobalDslDefaults(d)
+  } catch (e) {
+    console.warn('[decoration] normalizeGlobalDsl', e)
+    return fallback
+  }
+}
+
+function normalizeScopedDsl(raw, fallback, pageType) {
+  if (raw == null) return fallback
+  let payload = raw
+  if (typeof raw === 'string') {
+    try {
+      payload = JSON.parse(raw)
+    } catch (e) {
+      return fallback
+    }
+  }
+  if (typeof payload !== 'object' || payload === null) return fallback
+  try {
+    const d = deserializeDsl(payload)
+    if (!d || typeof d !== 'object') return fallback
+    if (d.pageType !== pageType) return fallback
+    if (typeof d.sections !== 'object' || d.sections === null) return fallback
+    if (!Array.isArray(d.order)) d.order = fallback.order
+    if (!d.pageId) d.pageId = fallback.pageId
+    return d
+  } catch (e) {
+    console.warn(`[decoration] normalize${pageType}Dsl`, e)
+    return fallback
+  }
+}
+
+function unwrapPayload(res) {
+  let current = res
+  while (current && typeof current === 'object') {
+    if (Array.isArray(current)) {
+      return current
+    }
+
+    if (
+      current.data !== undefined &&
+      current.headers !== undefined &&
+      current.status !== undefined &&
+      current.config !== undefined
+    ) {
+      current = current.data
+      continue
+    }
+
+    if (
+      current.data !== undefined &&
+      current.data !== null &&
+      current.id === undefined &&
+      current.name === undefined &&
+      current.config === undefined
+    ) {
+      current = current.data
+      continue
+    }
+
+    break
+  }
+  return current == null ? null : current
+}
+
+function parsePageDslRows(payload, templateId, scene, pageType = 'home') {
+  const rows = Array.isArray(payload)
+    ? payload
+    : payload && typeof payload === 'object'
+    ? [payload]
+    : []
+  if (!rows.length) return null
+
+  for (const row of rows) {
+    console.log('[sp-web-decoration] page config payload', {
+      templateId,
+      rowId: row?.id,
+      rowName: row?.name,
+      config: row?.config
+    })
+    let cfg
+    try {
+      cfg = JSON.parse(row?.config || '[]')
+    } catch (e) {
+      console.warn('[sp-web-decoration] page config parse failed', {
+        templateId,
+        rowId: row?.id,
+        error: e?.message
+      })
+      continue
+    }
+    const target = Array.isArray(cfg)
+      ? cfg.find((item) => item && item.type === DSL_ROW_TYPE)
+      : cfg && cfg.type === DSL_ROW_TYPE && cfg.dsl
+      ? cfg
+      : cfg && cfg.pageType && cfg.sections
+      ? { dsl: cfg }
+      : null
+    console.log('[sp-web-decoration] page config parsed target', {
+      templateId,
+      rowId: row?.id,
+      isArray: Array.isArray(cfg),
+      hasTarget: Boolean(target),
+      targetDsl: target?.dsl
+    })
+    if (!target || !target.dsl) continue
+    return {
+      dsl: normalizePageDsl(target.dsl, templateId, scene, pageType),
+      contentRowId: row.id || 0,
+      source: 'api'
+    }
+  }
+
+  return null
+}
+
+function parseScopedDslRow(row, fallback, pageType) {
+  if (!row) return null
+  const candidate = row?.config || row?.params || row?.dsl || row
+  return {
+    dsl: normalizeScopedDsl(candidate, fallback, pageType),
+    source: 'api'
+  }
+}
+
+function parseLegacyGlobalDslRow(row) {
+  if (!row) return null
+  const candidate = row?.config || row?.params || row?.dsl || row
+  return {
+    dsl: normalizeGlobalDsl(candidate),
+    source: 'api'
+  }
+}
+
+function createPageLoadFallback(templateId, scene, pageType = 'home') {
+  return {
+    dsl: createPageFallback(templateId, scene, pageType),
+    contentRowId: 0,
+    source: 'default'
+  }
+}
+
+export async function loadPageDslFromApi({ templateId, scene, pageType = 'home' }) {
+  const fallback = {
+    dsl: createPageFallback(templateId, scene, pageType),
+    contentRowId: 0,
+    source: 'default'
+  }
+  if (!templateId) return fallback
+
+  try {
+    const raw = await getDecorationContent({
+      page_name: 'page',
+      theme_pc_template_id: templateId
+    })
+    const list = unwrapPayload(raw)
+    return parsePageDslRows(list, templateId, scene, pageType) || fallback
+  } catch (e) {
+    console.warn('[decoration] loadPageDslFromApi', e)
+  }
+  return fallback
+}
+
+export async function savePageDslToApi({
+  templateId,
+  contentRowId,
+  dsl,
+  scene,
+  pageType = 'home'
+}) {
+  const normalizedDsl = normalizePageDsl(dsl, templateId, scene, pageType)
+  const payload = {
+    type: DSL_ROW_TYPE,
+    dsl: serializeDsl(normalizedDsl)
+  }
+  const config = JSON.stringify([payload])
+  const body = {
+    theme_pc_template_id: templateId,
+    config
+  }
+
+  if (contentRowId) {
+    body.id = contentRowId
+  }
+
+  await saveTemplateContent(body)
+
+  return {
+    dsl: normalizedDsl,
+    contentRowId: contentRowId || 0
+  }
+}
+
+async function loadLegacyGlobalDslFromApi() {
+  try {
+    const raw = await getDecorationContent({
+      page_name: LEGACY_GLOBAL_DECORATION_PAGE_NAME
+    })
+    const payload = unwrapPayload(raw)
+    if (!payload) return { dsl: createGlobalFallback(), source: 'default' }
+    const candidate = payload?.config || payload?.params || payload?.dsl || payload
+    return {
+      dsl: normalizeGlobalDsl(candidate),
+      source: 'api'
+    }
+  } catch (e) {
+    console.warn('[decoration] loadLegacyGlobalDslFromApi', e)
+    return { dsl: createGlobalFallback(), source: 'default' }
+  }
+}
+
+export async function loadHeaderDslFromApi() {
+  try {
+    const raw = await getDecorationContent({
+      page_name: HEADER_DECORATION_PAGE_NAME,
+      page_type: HEADER_DECORATION_PAGE_NAME
+    })
+    const payload = unwrapPayload(raw)
+    if (!payload) return { dsl: createHeaderFallback(), source: 'default' }
+    const candidate = payload?.config || payload?.params || payload?.dsl || payload
+    return {
+      dsl: normalizeScopedDsl(candidate, createHeaderFallback(), 'header'),
+      source: 'api'
+    }
+  } catch (e) {
+    console.warn('[decoration] loadHeaderDslFromApi', e)
+    return { dsl: createHeaderFallback(), source: 'default' }
+  }
+}
+
+export async function loadFooterDslFromApi() {
+  try {
+    const raw = await getDecorationContent({
+      page_name: FOOTER_DECORATION_PAGE_NAME,
+      page_type: FOOTER_DECORATION_PAGE_NAME
+    })
+    const payload = unwrapPayload(raw)
+    if (!payload) return { dsl: createFooterFallback(), source: 'default' }
+    const candidate = payload?.config || payload?.params || payload?.dsl || payload
+    return {
+      dsl: normalizeScopedDsl(candidate, createFooterFallback(), 'footer'),
+      source: 'api'
+    }
+  } catch (e) {
+    console.warn('[decoration] loadFooterDslFromApi', e)
+    return { dsl: createFooterFallback(), source: 'default' }
+  }
+}
+
+export async function loadHeaderFooterDslFromApi() {
+  const [header, footer] = await Promise.all([loadHeaderDslFromApi(), loadFooterDslFromApi()])
+  if (header.source !== 'default' || footer.source !== 'default') {
+    return {
+      headerDsl: header.dsl,
+      footerDsl: footer.dsl,
+      source: 'api'
+    }
+  }
+
+  const legacyGlobal = await loadLegacyGlobalDslFromApi()
+  if (legacyGlobal.source !== 'default') {
+    return {
+      ...splitGlobalDsl(legacyGlobal.dsl),
+      source: 'legacy-global'
+    }
+  }
+
+  return {
+    headerDsl: header.dsl,
+    footerDsl: footer.dsl,
+    source: 'default'
+  }
+}
+
+export async function loadDecorationContentFromApi({ templateId, scene, pageType = 'home' }) {
+  const fallbackPage = createPageLoadFallback(templateId, scene, pageType)
+  if (!templateId) {
+    return {
+      page: fallbackPage,
+      headerDsl: createHeaderFallback(),
+      footerDsl: createFooterFallback(),
+      source: 'default'
+    }
+  }
+
+  try {
+    const [page, headerFooter] = await Promise.all([
+      loadPageDslFromApi({ templateId, scene, pageType }),
+      loadHeaderFooterDslFromApi()
+    ])
+    if (headerFooter.source === 'legacy-global') {
+      return {
+        page,
+        headerDsl: headerFooter.headerDsl,
+        footerDsl: headerFooter.footerDsl,
+        source: 'legacy-global'
+      }
+    }
+    if (page.source !== 'default' || headerFooter.source !== 'default') {
+      return {
+        page,
+        headerDsl: headerFooter.headerDsl,
+        footerDsl: headerFooter.footerDsl,
+        source: 'api'
+      }
+    }
+    return {
+      page,
+      headerDsl: headerFooter.headerDsl,
+      footerDsl: headerFooter.footerDsl,
+      source: 'default'
+    }
+  } catch (e) {
+    console.warn('[decoration] loadDecorationContentFromApi fallback', e)
+    const [page, headerFooter] = await Promise.all([
+      loadPageDslFromApi({ templateId, scene, pageType }),
+      loadHeaderFooterDslFromApi()
+    ])
+    return {
+      page,
+      headerDsl: headerFooter.headerDsl,
+      footerDsl: headerFooter.footerDsl,
+      source: headerFooter.source || page.source
+    }
+  }
+}
+
+function saveScopedDslToApi({ pageName, dsl }) {
+  const payload = {
+    page_name: pageName,
+    config: JSON.stringify(serializeDsl(dsl))
+  }
+  return saveHeaderOrFooter(payload)
+}
+
+export async function saveHeaderDslToApi({ dsl }) {
+  await saveScopedDslToApi({
+    pageName: HEADER_DECORATION_PAGE_NAME,
+    dsl
+  })
+  return {
+    dsl: normalizeScopedDsl(dsl, createHeaderFallback(), 'header')
+  }
+}
+
+export async function saveFooterDslToApi({ dsl }) {
+  await saveScopedDslToApi({
+    pageName: FOOTER_DECORATION_PAGE_NAME,
+    dsl
+  })
+  return {
+    dsl: normalizeScopedDsl(dsl, createFooterFallback(), 'footer')
+  }
+}
+
+export default {
+  loadDecorationContentFromApi,
+  loadPageDslFromApi,
+  savePageDslToApi,
+  loadHeaderDslFromApi,
+  saveHeaderDslToApi,
+  loadFooterDslFromApi,
+  saveFooterDslToApi,
+  loadHeaderFooterDslFromApi
+}
diff --git a/src/components/sp-web-decoration/adapters/homeDecoration.js b/src/components/sp-web-decoration/adapters/homeDecoration.js
new file mode 100644
index 0000000..2b579e1
--- /dev/null
+++ b/src/components/sp-web-decoration/adapters/homeDecoration.js
@@ -0,0 +1,148 @@
+import {
+  createHomeDsl,
+  serializeDsl,
+  deserializeDsl,
+  createHeaderDsl,
+  createFooterDsl,
+  splitGlobalDsl
+} from '../utils/dsl.js'
+
+const STORAGE_PREFIX = 'decoration:home:'
+const GLOBAL_STORAGE_KEY = 'decoration:global'
+const HEADER_STORAGE_KEY = 'decoration:header'
+const FOOTER_STORAGE_KEY = 'decoration:footer'
+
+function getStorage() {
+  if (typeof sessionStorage !== 'undefined') {
+    return sessionStorage
+  }
+  if (typeof globalThis !== 'undefined' && globalThis.sessionStorage) {
+    return globalThis.sessionStorage
+  }
+  return null
+}
+
+function getStorageKey(templateId) {
+  return `${STORAGE_PREFIX}${templateId || 'draft'}`
+}
+
+export async function loadHomeDecoration({ templateId = '', scene = '1001' } = {}) {
+  const fallbackDsl = createHomeDsl({
+    pageId: String(templateId || ''),
+    scene
+  })
+  const storage = getStorage()
+  if (!storage) {
+    return { dsl: fallbackDsl, source: 'default' }
+  }
+
+  const rawValue = storage.getItem(getStorageKey(templateId))
+  if (!rawValue) {
+    return { dsl: fallbackDsl, source: 'default' }
+  }
+
+  try {
+    return {
+      dsl: deserializeDsl(JSON.parse(rawValue)),
+      source: 'session'
+    }
+  } catch (error) {
+    return { dsl: fallbackDsl, source: 'default' }
+  }
+}
+
+export async function saveHomeDecoration({ templateId = '', dsl }) {
+  const storage = getStorage()
+
+  if (storage) {
+    storage.setItem(getStorageKey(templateId), JSON.stringify(serializeDsl(dsl)))
+  }
+
+  return {
+    dsl,
+    persisted: Boolean(storage),
+    messageKey: '4c11e15d.ebf4e4'
+  }
+}
+
+export async function loadHeaderFooterDecoration() {
+  const fallbackHeaderDsl = createHeaderDsl()
+  const fallbackFooterDsl = createFooterDsl()
+  const storage = getStorage()
+  if (!storage) {
+    return {
+      headerDsl: fallbackHeaderDsl,
+      footerDsl: fallbackFooterDsl,
+      source: 'default'
+    }
+  }
+
+  const rawHeaderValue = storage.getItem(HEADER_STORAGE_KEY)
+  const rawFooterValue = storage.getItem(FOOTER_STORAGE_KEY)
+  if (rawHeaderValue || rawFooterValue) {
+    try {
+      const headerDsl = rawHeaderValue
+        ? deserializeDsl(JSON.parse(rawHeaderValue))
+        : fallbackHeaderDsl
+      const footerDsl = rawFooterValue
+        ? deserializeDsl(JSON.parse(rawFooterValue))
+        : fallbackFooterDsl
+      return { headerDsl, footerDsl, source: 'session' }
+    } catch (error) {
+      return {
+        headerDsl: fallbackHeaderDsl,
+        footerDsl: fallbackFooterDsl,
+        source: 'default'
+      }
+    }
+  }
+
+  const rawValue = storage.getItem(GLOBAL_STORAGE_KEY)
+  if (!rawValue) {
+    return {
+      headerDsl: fallbackHeaderDsl,
+      footerDsl: fallbackFooterDsl,
+      source: 'default'
+    }
+  }
+
+  try {
+    const { headerDsl, footerDsl } = splitGlobalDsl(deserializeDsl(JSON.parse(rawValue)))
+    return {
+      headerDsl,
+      footerDsl,
+      source: 'session'
+    }
+  } catch (error) {
+    return {
+      headerDsl: fallbackHeaderDsl,
+      footerDsl: fallbackFooterDsl,
+      source: 'default'
+    }
+  }
+}
+
+export async function saveHeaderFooterDecoration({ dsl, headerDsl, footerDsl }) {
+  const storage = getStorage()
+  const splitDsl = dsl ? splitGlobalDsl(dsl) : {}
+  const nextHeaderDsl = headerDsl || splitDsl.headerDsl || createHeaderDsl()
+  const nextFooterDsl = footerDsl || splitDsl.footerDsl || createFooterDsl()
+  if (storage) {
+    storage.setItem(HEADER_STORAGE_KEY, JSON.stringify(serializeDsl(nextHeaderDsl)))
+    storage.setItem(FOOTER_STORAGE_KEY, JSON.stringify(serializeDsl(nextFooterDsl)))
+  }
+
+  return {
+    headerDsl: nextHeaderDsl,
+    footerDsl: nextFooterDsl,
+    persisted: Boolean(storage),
+    messageKey: '4c11e15d.ebf4e4'
+  }
+}
+
+export default {
+  loadHomeDecoration,
+  saveHomeDecoration,
+  loadHeaderFooterDecoration,
+  saveHeaderFooterDecoration
+}
diff --git a/src/components/sp-web-decoration/components/ConfigPanel.vue b/src/components/sp-web-decoration/components/ConfigPanel.vue
new file mode 100644
index 0000000..c5121e8
--- /dev/null
+++ b/src/components/sp-web-decoration/components/ConfigPanel.vue
@@ -0,0 +1,175 @@
+<template>
+  <div class="h-full flex min-h-0 flex-col border-l border-border bg-card">
+    <div
+      class="flex min-h-[44px] items-center justify-between gap-2.5 border-b border-border px-[14px] py-[8px]"
+    >
+      <div class="text-[14px] font-semibold text-foreground">
+        {{ panelTitle }}
+      </div>
+    </div>
+
+    <div class="flex-1 overflow-auto px-[14px] pb-[18px] pt-3">
+      <div
+        v-if="!section"
+        class="flex min-h-[180px] items-center justify-center rounded-xl border border-dashed border-border bg-background-deep p-6 text-center text-muted-foreground"
+      >
+        {{ $t('250dc970.b2fac9') }}
+      </div>
+
+      <template v-else>
+        <div
+          v-if="showLockedSectionNotice"
+          class="rounded-lg border border-dashed border-[#d7dde7] bg-[#fbfbfc] p-4 text-sm leading-6 text-[#6b7785]"
+        >
+          这是页面固定业务组件，会在前台渲染原有商品列表逻辑。可在结构树中调整它与其他装修组件的顺序，但不能编辑、隐藏、复制或删除。
+        </div>
+
+        <component
+          :is="currentPanel"
+          v-else-if="currentPanel"
+          :section="section"
+          :block="block"
+          :value="currentValue"
+          @change="handleChange"
+          @change-section="$emit('update-section', $event)"
+          @select-block="$emit('select-block', $event)"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import CarouselPanel from '../panels/CarouselPanel.vue'
+import ImageHotspotPanel from '../panels/ImageHotspotPanel.vue'
+import ProductShelfPanel from '../panels/ProductShelfPanel.vue'
+import ProductTabShelfPanel from '../panels/ProductTabShelfPanel.vue'
+import HeaderPanel from '../panels/HeaderPanel.vue'
+import FooterPanel from '../panels/FooterPanel.vue'
+import AnnouncementBarPanel from '../panels/AnnouncementBarPanel.vue'
+import ImageBlockPanel from '../panels/ImageBlockPanel.vue'
+import VideoBlockPanel from '../panels/VideoBlockPanel.vue'
+import HotspotBlockPanel from '../panels/HotspotBlockPanel.vue'
+import NavItemBlockPanel from '../panels/NavItemBlockPanel.vue'
+import FooterLinkBlockPanel from '../panels/FooterLinkBlockPanel.vue'
+import FooterMenuBlockPanel from '../panels/FooterMenuBlockPanel.vue'
+import FooterImageBlockPanel from '../panels/FooterImageBlockPanel.vue'
+import FooterTextBlockPanel from '../panels/FooterTextBlockPanel.vue'
+import AnnouncementBlockPanel from '../panels/AnnouncementBlockPanel.vue'
+import ProductTabBlockPanel from '../panels/ProductTabBlockPanel.vue'
+
+import {
+  getTypedSectionDefinition as getSectionDefinition,
+  getTypedBlockDefinition as getBlockDefinition
+} from '../definitions/registry.js'
+
+const sectionPanelMap = {
+  'announcement-bar': AnnouncementBarPanel,
+  header: HeaderPanel,
+  footer: FooterPanel,
+  'main-carousel': CarouselPanel,
+  carousel: CarouselPanel,
+  'image-hotspot': ImageHotspotPanel,
+  'product-shelf': ProductShelfPanel,
+  'product-tab-shelf': ProductTabShelfPanel
+}
+
+const blockPanelMap = {
+  announcement: AnnouncementBlockPanel,
+  image: ImageBlockPanel,
+  video: VideoBlockPanel,
+  hotspot: HotspotBlockPanel,
+  'nav-item': NavItemBlockPanel,
+  'footer-link': FooterLinkBlockPanel,
+  'footer-menu': FooterMenuBlockPanel,
+  'footer-image': FooterImageBlockPanel,
+  'footer-text': FooterTextBlockPanel,
+  'product-tab': ProductTabBlockPanel
+}
+
+export default {
+  name: 'ConfigPanel',
+  components: {
+    CarouselPanel,
+    ImageHotspotPanel,
+    ProductShelfPanel,
+    ProductTabShelfPanel,
+    HeaderPanel,
+    FooterPanel,
+    AnnouncementBarPanel,
+    ImageBlockPanel,
+    VideoBlockPanel,
+    HotspotBlockPanel,
+    NavItemBlockPanel,
+    FooterLinkBlockPanel,
+    FooterMenuBlockPanel,
+    FooterImageBlockPanel,
+    FooterTextBlockPanel,
+    AnnouncementBlockPanel,
+    ProductTabBlockPanel
+  },
+  props: {
+    section: {
+      type: Object,
+      default: null
+    },
+    block: {
+      type: Object,
+      default: null
+    }
+  },
+  computed: {
+    currentPanel() {
+      if (this.block) {
+        return blockPanelMap[this.block.type] || null
+      }
+      return this.section ? sectionPanelMap[this.section.type] || null : null
+    },
+    currentValue() {
+      if (this.block) return this.block.settings
+      return this.section ? this.section.settings : null
+    },
+    showLockedSectionNotice() {
+      return (
+        !this.block &&
+        this.section &&
+        (this.section.locked === true ||
+          this.section.settings?.locked === true ||
+          this.section.type === 'native-product-list')
+      )
+    },
+    sectionTitle() {
+      if (!this.section) return ''
+      const definition = getSectionDefinition(this.section.type)
+      return this.section.settings?.title || definition?.name || this.$t(this.section.titleKey)
+    },
+    blockTitle() {
+      if (!this.block) return ''
+      const definition = getBlockDefinition(this.block.type)
+      return (
+        this.block.settings?.label ||
+        definition?.name ||
+        this.$t(definition?.titleKey || '250dc970.7f56ad')
+      )
+    },
+    panelTitle() {
+      if (this.block && this.section) {
+        return `${this.sectionTitle}-${this.blockTitle}`
+      }
+      if (this.section) {
+        return this.sectionTitle
+      }
+      return this.$t('250dc970.6aab38')
+    }
+  },
+  methods: {
+    handleChange(payload) {
+      if (this.block) {
+        this.$emit('update-block', payload)
+        return
+      }
+      this.$emit('update-settings', payload)
+    }
+  }
+}
+</script>
diff --git a/src/components/sp-web-decoration/components/PreviewCanvas.vue b/src/components/sp-web-decoration/components/PreviewCanvas.vue
new file mode 100644
index 0000000..601b468
--- /dev/null
+++ b/src/components/sp-web-decoration/components/PreviewCanvas.vue
@@ -0,0 +1,546 @@
+<template>
+  <div class="h-full flex min-h-0 flex-col bg-[#eef1f5]">
+    <div
+      class="relative flex min-h-[42px] shrink-0 items-center gap-2 border-b border-[#e6e9ef] bg-white px-[14px] py-[7px]"
+    >
+      <div class="min-w-0 max-w-[38%] truncate text-[14px] font-semibold text-[#18222f]">
+        {{ $t('01f158e9.2f586b') }}
+      </div>
+      <div
+        class="absolute left-1/2 top-1/2 z-[1] flex -translate-x-1/2 -translate-y-1/2 items-center gap-0.5 rounded-[10px] bg-[rgba(17,24,39,0.06)] p-0.5"
+      >
+        <button
+          type="button"
+          :class="deviceSwitchButtonClass('desktop')"
+          :aria-label="$t('30ac5b9e.2828b7')"
+          @click="$emit('select-device', 'desktop')"
+        >
+          <Monitor :size="15" class="text-current" :stroke-width="2" />
+        </button>
+        <button
+          type="button"
+          :class="deviceSwitchButtonClass('mobile')"
+          :aria-label="$t('30ac5b9e.68d982')"
+          @click="$emit('select-device', 'mobile')"
+        >
+          <Smartphone :size="15" class="text-current" :stroke-width="2" />
+        </button>
+      </div>
+      <div class="relative z-[1] ml-auto flex shrink-0 items-center gap-1">
+        <button
+          type="button"
+          :class="historyButtonClass(canUndo)"
+          :disabled="!canUndo"
+          :aria-label="$t('30ac5b9e.bd9fcf')"
+          @click="$emit('undo')"
+        >
+          <Undo :size="17" class="text-current" :stroke-width="2" />
+        </button>
+        <button
+          type="button"
+          :class="historyButtonClass(canRedo)"
+          :disabled="!canRedo"
+          :aria-label="$t('30ac5b9e.c7db6d')"
+          @click="$emit('redo')"
+        >
+          <Redo :size="17" class="text-current" :stroke-width="2" />
+        </button>
+        <div
+          :class="
+            iframeReady
+              ? 'inline-flex h-6 items-center rounded-full bg-[rgba(15,157,88,0.12)] px-2.5 text-[11px] text-[#0f9d58]'
+              : 'inline-flex h-6 items-center rounded-full bg-[rgba(17,24,39,0.06)] px-2.5 text-[11px] text-[#7d8796]'
+          "
+        >
+          {{ iframeReady ? $t('01f158e9.6bef2d') : $t('01f158e9.3893c8') }}
+        </div>
+      </div>
+    </div>
+
+    <div ref="previewViewport" class="preview-canvas-scroll flex h-full flex-1 p-0">
+      <div
+        v-if="previewError || !websiteUrl"
+        class="m-3 flex min-h-[180px] items-center justify-center rounded-xl border border-dashed border-[#d7dde7] bg-[#fbfbfc] p-6 text-center text-[#6b7785]"
+      >
+        {{ $t('01f158e9.a4a56e') }}
+      </div>
+
+      <div v-else :class="previewFrameContainerClass">
+        <div :class="previewFrameShellClass" :style="previewFrameShellStyle">
+          <iframe
+            ref="previewFrame"
+            class="h-full w-full border-0 bg-white"
+            :src="previewUrl"
+            @load="onPreviewIframeLoad"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Redo, Undo } from 'lucide-vue'
+import { createDecorationMessenger } from '../utils/postMessage.js'
+import { serializeDsl } from '../utils/dsl.js'
+
+export default {
+  name: 'PreviewCanvas',
+  components: {
+    Redo,
+    Undo
+  },
+  props: {
+    dsl: {
+      type: Object,
+      required: true
+    },
+    headerDsl: {
+      type: Object,
+      default: () => ({})
+    },
+    footerDsl: {
+      type: Object,
+      default: () => ({})
+    },
+    pageId: {
+      type: String,
+      default: ''
+    },
+    pageType: {
+      type: String,
+      default: 'home'
+    },
+    templateId: {
+      type: String,
+      default: ''
+    },
+    websiteUrl: {
+      type: String,
+      default: ''
+    },
+    device: {
+      type: String,
+      default: 'desktop'
+    },
+    canUndo: {
+      type: Boolean,
+      default: false
+    },
+    canRedo: {
+      type: Boolean,
+      default: false
+    },
+    selectedSectionId: {
+      type: String,
+      default: ''
+    },
+    selectedBlockId: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      iframeReady: false,
+      messenger: null,
+      previewError: false,
+      updateTimer: null,
+      initRetryTimer: null,
+      previewViewportRaf: null,
+      previewViewportHeight: 0,
+      removeRawDebugListener: null,
+      removeListener: null,
+      previewViewportObserver: null
+    }
+  },
+  computed: {
+    previewUrl() {
+      if (!this.messenger) return ''
+      return this.messenger.getPreviewUrl({
+        templateId: this.templateId,
+        pageType: this.pageType
+      })
+    },
+    previewFrameMinHeight() {
+      return this.device === 'mobile' ? 720 : 0
+    },
+    previewFrameViewportHeight() {
+      const height = Number(this.previewViewportHeight || 0)
+      if (!Number.isFinite(height) || height <= 0) return 0
+      const verticalPadding = this.device === 'mobile' ? 48 : 32
+      return Math.max(0, Math.floor(height - verticalPadding))
+    },
+    previewFrameHeight() {
+      return Math.max(this.previewFrameViewportHeight, this.previewFrameMinHeight)
+    },
+    previewFrameShellClass() {
+      return this.device === 'mobile'
+        ? 'relative mx-auto w-[420px] max-w-full overflow-hidden rounded-xl bg-white shadow-[0_18px_48px_rgba(15,23,42,0.08)]'
+        : 'relative w-full overflow-hidden bg-white'
+    },
+    previewFrameContainerClass() {
+      return this.device === 'mobile'
+        ? 'flex min-h-0 w-full items-start box-border px-4 py-6'
+        : 'flex min-h-0 w-full items-start box-border p-4'
+    },
+    previewFrameShellStyle() {
+      const height = this.previewFrameHeight
+      return height ? { height: `${height}px`, minHeight: `${this.previewFrameMinHeight}px` } : {}
+    }
+  },
+  watch: {
+    dsl: {
+      deep: true,
+      handler() {
+        this.scheduleUpdate()
+      }
+    },
+    headerDsl: {
+      deep: true,
+      handler() {
+        this.scheduleUpdate()
+      }
+    },
+    footerDsl: {
+      deep: true,
+      handler() {
+        this.scheduleUpdate()
+      }
+    },
+    selectedSectionId() {
+      this.scheduleUpdate()
+      this.sendSelectionHighlight()
+    },
+    selectedBlockId() {
+      this.scheduleUpdate()
+      this.sendSelectionHighlight()
+    }
+  },
+  mounted() {
+    try {
+      this.messenger = createDecorationMessenger(this.websiteUrl)
+      console.log('[sp-web-decoration] PreviewCanvas mounted', {
+        websiteUrl: this.websiteUrl,
+        previewUrl: this.previewUrl,
+        previewOrigin: this.messenger.previewOrigin
+      })
+      this.removeRawDebugListener = this.bindRawDebugListener()
+      this.removeListener = this.messenger.onMessage(this.handleIncomingMessage)
+      this.bindPreviewViewportObserver()
+    } catch (error) {
+      console.warn('[sp-web-decoration] PreviewCanvas init failed', error)
+      this.previewError = true
+    }
+  },
+  beforeDestroy() {
+    if (this.updateTimer) {
+      clearTimeout(this.updateTimer)
+      this.updateTimer = null
+    }
+    if (this.initRetryTimer) {
+      clearTimeout(this.initRetryTimer)
+      this.initRetryTimer = null
+    }
+    if (this.removeListener) {
+      this.removeListener()
+    }
+    if (this.removeRawDebugListener) {
+      this.removeRawDebugListener()
+      this.removeRawDebugListener = null
+    }
+    if (this.previewViewportObserver) {
+      this.previewViewportObserver.disconnect()
+      this.previewViewportObserver = null
+    }
+    if (this.previewViewportRaf) {
+      cancelAnimationFrame(this.previewViewportRaf)
+      this.previewViewportRaf = null
+    }
+    window.removeEventListener('resize', this.schedulePreviewViewportHeightUpdate)
+  },
+  methods: {
+    deviceSwitchButtonClass(value) {
+      const active = this.device === value
+      return [
+        'flex h-7 w-8 items-center justify-center rounded-[8px] border-0 transition-colors',
+        active
+          ? 'bg-white text-[#18222f] shadow-[0_6px_14px_rgba(15,23,42,0.12)]'
+          : 'bg-transparent text-[#7d8796] hover:text-[#18222f]'
+      ]
+    },
+    historyButtonClass(enabled) {
+      return [
+        'flex h-8 w-8 items-center justify-center rounded-md border-0 bg-transparent p-0 transition-colors',
+        enabled
+          ? 'cursor-pointer text-[#606266] hover:bg-[#f3f4f7] hover:text-[#18222f]'
+          : 'cursor-not-allowed text-[#c0c4cc]'
+      ]
+    },
+    updatePreviewViewportHeight() {
+      const el = this.$refs.previewViewport
+      if (!el) return
+      const nextHeight = el.clientHeight || 0
+      if (nextHeight === this.previewViewportHeight) return
+      this.previewViewportHeight = nextHeight
+    },
+    schedulePreviewViewportHeightUpdate() {
+      if (this.previewViewportRaf) return
+      this.previewViewportRaf = requestAnimationFrame(() => {
+        this.previewViewportRaf = null
+        this.updatePreviewViewportHeight()
+      })
+    },
+    bindPreviewViewportObserver() {
+      this.$nextTick(() => {
+        this.updatePreviewViewportHeight()
+        const el = this.$refs.previewViewport
+        if (!el || typeof ResizeObserver === 'undefined') return
+        this.previewViewportObserver = new ResizeObserver(() =>
+          this.schedulePreviewViewportHeightUpdate()
+        )
+        this.previewViewportObserver.observe(el)
+        window.addEventListener('resize', this.schedulePreviewViewportHeightUpdate)
+      })
+    },
+    bindRawDebugListener() {
+      const listener = (event) => {
+        if (!event.data || typeof event.data !== 'object') return
+        console.log('[sp-web-decoration] raw message before filter', {
+          origin: event.origin,
+          expectedOrigin: this.messenger?.previewOrigin || '',
+          type: event.data.type,
+          data: event.data
+        })
+      }
+      window.addEventListener('message', listener)
+      return () => window.removeEventListener('message', listener)
+    },
+    /** 跨域 iframe 的 contentWindow 不能放进 data（Vue 响应式会访问 Window 属性触发 SecurityError） */
+    getPreviewContentWindow() {
+      const el = this.$refs.previewFrame
+      return el && el.contentWindow ? el.contentWindow : null
+    },
+    normalizePreviewAnchor(anchor) {
+      const x = Number(anchor?.clientX)
+      const y = Number(anchor?.clientY)
+      if (!Number.isFinite(x) || !Number.isFinite(y)) return null
+      const rect = this.$refs.previewFrame?.getBoundingClientRect?.()
+      if (!rect) return { clientX: x, clientY: y }
+      return {
+        clientX: rect.left + x,
+        clientY: rect.top + y
+      }
+    },
+    handleIncomingMessage(event) {
+      const { data } = event
+      if (!data || !data.type) return
+
+      if (process.env.NODE_ENV === 'development') {
+        console.log('[sp-web-decoration] incoming message', {
+          origin: event.origin,
+          type: data.type,
+          previewOrigin: this.messenger?.previewOrigin || ''
+        })
+      }
+
+      if (data.type === 'PREVIEW_READY') {
+        this.iframeReady = true
+        this.sendPreviewReadyAck()
+        this.$emit('preview-ready', true)
+        this.flushInitToPreview()
+        return
+      }
+
+      if (data.type === 'SECTION_FOCUSED' && data.payload?.sectionId) {
+        this.$emit('focus-section', data.payload.sectionId)
+        return
+      }
+
+      if (data.type === 'BLOCK_FOCUSED' && data.payload?.sectionId && data.payload?.blockId) {
+        this.$emit('focus-block', {
+          sectionId: data.payload.sectionId,
+          blockId: data.payload.blockId
+        })
+        return
+      }
+
+      if (data.type === 'ADD_BLOCK_REQUESTED' && data.payload?.sectionId) {
+        this.$emit('add-block-requested', {
+          sectionId: data.payload.sectionId,
+          insertIndex:
+            typeof data.payload.insertIndex === 'number' ? data.payload.insertIndex : undefined,
+          anchor: this.normalizePreviewAnchor(data.payload.anchor),
+          area: data.payload.area || ''
+        })
+        return
+      }
+
+      if (data.type === 'ADD_SECTION_REQUESTED' && data.payload?.sectionId) {
+        this.$emit('add-section-requested', {
+          sectionId: data.payload.sectionId,
+          insertIndex:
+            typeof data.payload.insertIndex === 'number' ? data.payload.insertIndex : undefined,
+          anchor: this.normalizePreviewAnchor(data.payload.anchor),
+          area: data.payload.area || ''
+        })
+        return
+      }
+
+      if (data.type === 'MOVE_SECTION_REQUESTED' && data.payload?.sectionId) {
+        this.$emit('move-section-requested', {
+          sectionId: data.payload.sectionId,
+          direction: data.payload.direction === 'up' ? 'up' : 'down'
+        })
+        return
+      }
+
+      if (data.type === 'DUPLICATE_SECTION_REQUESTED' && data.payload?.sectionId) {
+        this.$emit('duplicate-section-requested', data.payload.sectionId)
+        return
+      }
+
+      if (data.type === 'REMOVE_SECTION_REQUESTED' && data.payload?.sectionId) {
+        this.$emit('remove-section-requested', data.payload.sectionId)
+        return
+      }
+
+      if (
+        data.type === 'MOVE_BLOCK_REQUESTED' &&
+        data.payload?.sectionId &&
+        data.payload?.blockId
+      ) {
+        this.$emit('move-block-requested', {
+          sectionId: data.payload.sectionId,
+          blockId: data.payload.blockId,
+          direction: data.payload.direction === 'up' ? 'up' : 'down'
+        })
+        return
+      }
+
+      if (
+        data.type === 'DUPLICATE_BLOCK_REQUESTED' &&
+        data.payload?.sectionId &&
+        data.payload?.blockId
+      ) {
+        this.$emit('duplicate-block-requested', {
+          sectionId: data.payload.sectionId,
+          blockId: data.payload.blockId
+        })
+        return
+      }
+
+      if (
+        data.type === 'REMOVE_BLOCK_REQUESTED' &&
+        data.payload?.sectionId &&
+        data.payload?.blockId
+      ) {
+        this.$emit('remove-block-requested', {
+          sectionId: data.payload.sectionId,
+          blockId: data.payload.blockId
+        })
+      }
+    },
+    /** 子帧发出 PREVIEW_READY 时 ref/contentWindow 可能尚未就绪，需 nextTick + 短重试，避免 null.postMessage */
+    onPreviewIframeLoad() {
+      if (this.iframeReady) {
+        this.flushInitToPreview()
+      }
+    },
+    flushInitToPreview() {
+      if (!this.iframeReady || !this.messenger) return
+      if (process.env.NODE_ENV === 'development') {
+        console.log('[sp-web-decoration] flush init', {
+          iframeReady: this.iframeReady,
+          previewOrigin: this.messenger.previewOrigin,
+          previewUrl: this.previewUrl
+        })
+      }
+      if (this.initRetryTimer) {
+        clearTimeout(this.initRetryTimer)
+        this.initRetryTimer = null
+      }
+      const payload = {
+        pageType: this.pageType,
+        pageId: this.pageId,
+        pageDsl: serializeDsl(this.dsl),
+        headerDsl: serializeDsl(this.headerDsl),
+        footerDsl: serializeDsl(this.footerDsl),
+        sections: {
+          sectionId: this.selectedSectionId || '',
+          blockId: this.selectedBlockId || ''
+        }
+      }
+      const maxAttempts = 40
+      const delayMs = 50
+      const trySend = (attempt) => {
+        const win = this.getPreviewContentWindow()
+        if (win && this.messenger) {
+          if (process.env.NODE_ENV === 'development') {
+            console.log('[sp-web-decoration] send init payload', payload)
+          }
+          this.messenger.sendInit(win, payload)
+          return
+        }
+        if (attempt + 1 < maxAttempts) {
+          this.initRetryTimer = setTimeout(() => trySend(attempt + 1), delayMs)
+        }
+      }
+      this.$nextTick(() => trySend(0))
+    },
+    sendPreviewReadyAck() {
+      const win = this.getPreviewContentWindow()
+      if (!win || !this.messenger) return
+      this.messenger.sendMessage(win, 'PREVIEW_READY_ACK', {
+        pageType: this.pageType,
+        pageId: this.pageId
+      })
+    },
+    sendSelectionHighlight() {
+      const win = this.getPreviewContentWindow()
+      if (!this.iframeReady || !win || !this.messenger || !this.selectedSectionId) return
+      this.messenger.sendMessage(win, 'BLOCK_HIGHLIGHT', {
+        pageType: this.pageType,
+        sectionId: this.selectedSectionId || '',
+        blockId: this.selectedBlockId || ''
+      })
+    },
+    scheduleUpdate() {
+      const win = this.getPreviewContentWindow()
+      if (!this.iframeReady || !win || !this.messenger) return
+      if (this.updateTimer) {
+        clearTimeout(this.updateTimer)
+      }
+      this.updateTimer = setTimeout(() => {
+        const w = this.getPreviewContentWindow()
+        if (!w) return
+        this.messenger.sendUpdate(w, {
+          pageType: this.pageType,
+          pageId: this.pageId,
+          pageDsl: serializeDsl(this.dsl),
+          headerDsl: serializeDsl(this.headerDsl),
+          footerDsl: serializeDsl(this.footerDsl),
+          sections: {
+            sectionId: this.selectedSectionId || '',
+            blockId: this.selectedBlockId || ''
+          }
+        })
+      }, 120)
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 保留滚动能力，仅隐藏滚动条，预览区更干净 */
+.preview-canvas-scroll {
+  overflow: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.preview-canvas-scroll::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+</style>
diff --git a/src/components/sp-web-decoration/components/StructureAddAction.vue b/src/components/sp-web-decoration/components/StructureAddAction.vue
new file mode 100644
index 0000000..0abf7e7
--- /dev/null
+++ b/src/components/sp-web-decoration/components/StructureAddAction.vue
@@ -0,0 +1,104 @@
+<template>
+  <div :class="containerClass">
+    <StructureAddButton
+      v-if="visible"
+      :label="label"
+      :align="align"
+      :flush-start="flushStart"
+      :top-spacing="topSpacing"
+      :relaxed="relaxed"
+      :icon-size="iconSize"
+      @click="$emit('open', $event)"
+    />
+    <StructureInsertMenu
+      v-if="open"
+      :items="items"
+      :dock-style="dockStyle"
+      :show-icons="showIcons"
+      :icon-type="iconType"
+      @select="$emit('select', $event)"
+    />
+  </div>
+</template>
+
+<script>
+import StructureAddButton from './StructureAddButton.vue'
+import StructureInsertMenu from './StructureInsertMenu.vue'
+
+export default {
+  name: 'StructureAddAction',
+  components: {
+    StructureAddButton,
+    StructureInsertMenu
+  },
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    open: {
+      type: Boolean,
+      default: false
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    dockStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    showIcons: {
+      type: Boolean,
+      default: false
+    },
+    visible: {
+      type: Boolean,
+      default: true
+    },
+    align: {
+      type: String,
+      default: 'start',
+      validator: (value) => ['start', 'center'].includes(value)
+    },
+    flushStart: {
+      type: Boolean,
+      default: false
+    },
+    topSpacing: {
+      type: Boolean,
+      default: false
+    },
+    relaxed: {
+      type: Boolean,
+      default: false
+    },
+    iconSize: {
+      type: Number,
+      default: 14
+    },
+    container: {
+      type: String,
+      default: '',
+      validator: (value) => ['', 'block', 'section', 'empty'].includes(value)
+    }
+  },
+  computed: {
+    iconType() {
+      return this.container === 'block' ? 'block' : 'section'
+    },
+    containerClass() {
+      if (this.container === 'block') {
+        return 'relative pl-[52px]'
+      }
+      if (this.container === 'section') {
+        return 'relative mt-1 px-2 pb-0.5 pl-[34px]'
+      }
+      if (this.container === 'empty') {
+        return 'relative w-full max-w-[240px]'
+      }
+      return 'relative'
+    }
+  }
+}
+</script>
diff --git a/src/components/sp-web-decoration/components/StructureAddButton.vue b/src/components/sp-web-decoration/components/StructureAddButton.vue
new file mode 100644
index 0000000..175376d
--- /dev/null
+++ b/src/components/sp-web-decoration/components/StructureAddButton.vue
@@ -0,0 +1,56 @@
+<template>
+  <button type="button" :class="buttonClass" @click="$emit('click', $event)">
+    <CirclePlus :size="iconSize" class="shrink-0 text-[#2563eb]" :stroke-width="2.5" />
+    <span>{{ label }}</span>
+  </button>
+</template>
+
+<script>
+import { CirclePlus } from 'lucide-vue'
+
+export default {
+  name: 'StructureAddButton',
+  components: {
+    CirclePlus
+  },
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    align: {
+      type: String,
+      default: 'start',
+      validator: (value) => ['start', 'center'].includes(value)
+    },
+    flushStart: {
+      type: Boolean,
+      default: false
+    },
+    topSpacing: {
+      type: Boolean,
+      default: false
+    },
+    relaxed: {
+      type: Boolean,
+      default: false
+    },
+    iconSize: {
+      type: Number,
+      default: 14
+    }
+  },
+  computed: {
+    buttonClass() {
+      return [
+        'flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent text-sm font-semibold text-[#2563eb] transition-colors duration-150',
+        this.align === 'center' ? 'justify-center' : 'justify-start',
+        this.relaxed ? 'py-2' : 'py-[7px]',
+        this.topSpacing ? 'mt-0.5' : '',
+        this.flushStart ? 'pl-0' : '',
+        this.align === 'start' ? 'pr-2' : ''
+      ]
+    }
+  }
+}
+</script>
diff --git a/src/components/sp-web-decoration/components/StructureBlockRow.vue b/src/components/sp-web-decoration/components/StructureBlockRow.vue
new file mode 100644
index 0000000..e4a99bb
--- /dev/null
+++ b/src/components/sp-web-decoration/components/StructureBlockRow.vue
@@ -0,0 +1,119 @@
+<template>
+  <div
+    :class="[
+      'group mt-0 flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent py-[7px] pl-[50px] pr-2 text-[#6b7785] transition-colors duration-150 hover:bg-[rgba(24,34,47,0.04)]',
+      {
+        'sp-structure-row-selected': selected
+      }
+    ]"
+    @click="$emit('select', { sectionId, blockId })"
+  >
+    <div class="min-w-0 flex-1 flex items-center">
+      <div
+        :class="[
+          'inline-flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold transition-colors duration-150',
+          disabled ? 'text-[#98a2b3]' : 'text-[#18222f]'
+        ]"
+      >
+        <span class="relative inline-flex h-[18px] w-[18px] shrink-0 items-center justify-center">
+          <Diamond
+            :size="16"
+            :class="[
+              'shrink-0 opacity-100 transition-opacity duration-150 group-hover:pointer-events-none group-hover:opacity-0',
+              disabled ? 'text-[#98a2b3]' : 'text-[#475467]'
+            ]"
+            :stroke-width="2"
+          />
+          <span
+            data-drag-handle="block"
+            class="pointer-events-none absolute inset-0 inline-flex cursor-move items-center justify-center text-[#6b7785] opacity-0 transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100"
+          >
+            <GripVertical :size="14" :stroke-width="2" />
+          </span>
+        </span>
+        {{ label }}
+      </div>
+    </div>
+    <div
+      :class="[
+        'flex shrink-0 items-center gap-0.5 transition-opacity duration-150',
+        disabled
+          ? 'pointer-events-auto opacity-100'
+          : 'pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100'
+      ]"
+    >
+      <button
+        v-if="canDelete"
+        type="button"
+        :class="[
+          'inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-[#98a2b3] transition-colors duration-150 hover:bg-[#e8eef6]',
+          disabled
+            ? 'pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100'
+            : ''
+        ]"
+        :title="removeTitle"
+        @click.stop="$emit('remove', { sectionId, blockId })"
+      >
+        <Trash2 :size="16" :stroke-width="2" />
+      </button>
+      <button
+        type="button"
+        class="inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-[#6b7785] transition-colors duration-150 hover:bg-[#e8eef6]"
+        :title="toggleTitle"
+        @click.stop="$emit('toggle-disabled', { sectionId, blockId })"
+      >
+        <EyeOff v-if="disabled" :size="18" :stroke-width="2" />
+        <Eye v-else :size="18" :stroke-width="2" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Diamond, Eye, EyeOff, GripVertical, Trash2 } from 'lucide-vue'
+
+export default {
+  name: 'StructureBlockRow',
+  components: {
+    Diamond,
+    Eye,
+    EyeOff,
+    GripVertical,
+    Trash2
+  },
+  props: {
+    sectionId: {
+      type: String,
+      required: true
+    },
+    blockId: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    selected: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    canDelete: {
+      type: Boolean,
+      default: true
+    },
+    removeTitle: {
+      type: String,
+      default: ''
+    },
+    toggleTitle: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
diff --git a/src/components/sp-web-decoration/components/StructureInsertGap.vue b/src/components/sp-web-decoration/components/StructureInsertGap.vue
new file mode 100644
index 0000000..4fe6c98
--- /dev/null
+++ b/src/components/sp-web-decoration/components/StructureInsertGap.vue
@@ -0,0 +1,102 @@
+<template>
+  <div
+    :class="['sp-structure-insert-gap', { 'sp-structure-insert-gap--block': block }]"
+    @click.stop="$emit('click', $event)"
+  >
+    <div class="sp-structure-insert-gap__line" aria-hidden="true" />
+    <button
+      type="button"
+      :class="['sp-structure-insert-gap__btn', { 'sp-structure-insert-gap__btn--block': block }]"
+    >
+      <Plus :size="iconSize" class="shrink-0 text-white" :stroke-width="2.5" />
+      <span>{{ label }}</span>
+    </button>
+  </div>
+</template>
+
+<script>
+import { Plus } from 'lucide-vue'
+
+export default {
+  name: 'StructureInsertGap',
+  components: {
+    Plus
+  },
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    block: {
+      type: Boolean,
+      default: false
+    },
+    iconSize: {
+      type: Number,
+      default: 12
+    }
+  }
+}
+</script>
+
+<style scoped>
+.sp-structure-insert-gap {
+  position: relative;
+  display: flex;
+  height: 6px;
+  align-items: center;
+  justify-content: center;
+  cursor: default;
+}
+
+.sp-structure-insert-gap__line {
+  position: absolute;
+  left: 10px;
+  right: 10px;
+  top: 50%;
+  margin-top: -1px;
+  border-top: 1px dashed #2563eb;
+  opacity: 0;
+  transition: opacity 0.12s ease;
+  pointer-events: none;
+}
+
+.sp-structure-insert-gap:hover .sp-structure-insert-gap__line {
+  opacity: 1;
+}
+
+.sp-structure-insert-gap__btn {
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+  padding: 4px 12px;
+  border: 0;
+  border-radius: 9999px;
+  background: #2563eb;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.25;
+  cursor: pointer;
+  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.12s ease;
+}
+
+.sp-structure-insert-gap:hover .sp-structure-insert-gap__btn {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.sp-structure-insert-gap__btn--block {
+  font-size: 12px;
+  padding: 4px 12px;
+}
+</style>
diff --git a/src/components/sp-web-decoration/components/StructureInsertMenu.vue b/src/components/sp-web-decoration/components/StructureInsertMenu.vue
new file mode 100644
index 0000000..afe4369
--- /dev/null
+++ b/src/components/sp-web-decoration/components/StructureInsertMenu.vue
@@ -0,0 +1,63 @@
+<template>
+  <div
+    class="sp-structure-insert-menu fixed z-[4000] min-w-[200px] max-h-[min(420px,calc(100vh-32px))] overflow-y-auto rounded-xl border border-[rgba(17,24,39,0.08)] bg-white p-1.5 shadow-[0_10px_30px_rgba(15,23,42,0.14)]"
+    :style="dockStyle"
+  >
+    <button
+      v-for="item in items"
+      :key="item.key || item.type"
+      type="button"
+      class="flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-2.5 py-2 text-left text-[12px] text-[#18222f] hover:bg-[#e9f0ff] hover:text-[#2563eb]"
+      @click="$emit('select', item)"
+    >
+      <component
+        :is="menuIcon"
+        v-if="shouldShowIcon"
+        :size="14"
+        class="shrink-0 text-[#475467]"
+        :stroke-width="2"
+      />
+      <span>{{ item.label }}</span>
+    </button>
+  </div>
+</template>
+
+<script>
+import { Diamond, GalleryVertical } from 'lucide-vue'
+
+export default {
+  name: 'StructureInsertMenu',
+  components: {
+    Diamond,
+    GalleryVertical
+  },
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    dockStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    showIcons: {
+      type: Boolean,
+      default: false
+    },
+    iconType: {
+      type: String,
+      default: '',
+      validator: (value) => ['', 'section', 'block'].includes(value)
+    }
+  },
+  computed: {
+    shouldShowIcon() {
+      return this.showIcons || Boolean(this.iconType)
+    },
+    menuIcon() {
+      if (this.iconType === 'block') return 'Diamond'
+      return 'GalleryVertical'
+    }
+  }
+}
+</script>
diff --git a/src/components/sp-web-decoration/components/StructureInsertPoint.vue b/src/components/sp-web-decoration/components/StructureInsertPoint.vue
new file mode 100644
index 0000000..f7477ea
--- /dev/null
+++ b/src/components/sp-web-decoration/components/StructureInsertPoint.vue
@@ -0,0 +1,83 @@
+<template>
+  <div :class="containerClass">
+    <StructureInsertGap
+      :label="label"
+      :block="block"
+      :icon-size="iconSize"
+      @click="$emit('open', $event)"
+    />
+    <StructureInsertMenu
+      v-if="open"
+      :items="items"
+      :dock-style="dockStyle"
+      :show-icons="showIcons"
+      :icon-type="iconType"
+      @select="$emit('select', $event)"
+    />
+  </div>
+</template>
+
+<script>
+import StructureInsertGap from './StructureInsertGap.vue'
+import StructureInsertMenu from './StructureInsertMenu.vue'
+
+export default {
+  name: 'StructureInsertPoint',
+  components: {
+    StructureInsertGap,
+    StructureInsertMenu
+  },
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    open: {
+      type: Boolean,
+      default: false
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    dockStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    showIcons: {
+      type: Boolean,
+      default: false
+    },
+    block: {
+      type: Boolean,
+      default: false
+    },
+    iconSize: {
+      type: Number,
+      default: 12
+    },
+    indent: {
+      type: String,
+      default: '',
+      validator: (value) => ['', 'block'].includes(value)
+    },
+    layer: {
+      type: String,
+      default: 'section',
+      validator: (value) => ['section', 'block'].includes(value)
+    }
+  },
+  computed: {
+    iconType() {
+      return this.layer === 'block' || this.block ? 'block' : 'section'
+    },
+    containerClass() {
+      return [
+        'relative py-0',
+        this.layer === 'section' ? 'z-[3]' : 'z-[2]',
+        this.indent === 'block' ? 'pl-[50px]' : ''
+      ]
+    }
+  }
+}
+</script>
diff --git a/src/components/sp-web-decoration/components/StructurePanel copy.vue b/src/components/sp-web-decoration/components/StructurePanel copy.vue
new file mode 100644
index 0000000..19ba00c
--- /dev/null
+++ b/src/components/sp-web-decoration/components/StructurePanel copy.vue	
@@ -0,0 +1,1658 @@
+<template>
+  <div class="h-full flex min-h-0 flex-col border-r border-[#e6e9ef] bg-white">
+    <div
+      class="flex min-h-12 items-center justify-between gap-2.5 border-b border-[#e6e9ef] px-[14px] py-[10px]"
+    >
+      <div class="text-sm font-semibold text-[#18222f]">
+        {{ $t('54e3d97e.768f6f') }}
+      </div>
+    </div>
+
+    <div class="h-full min-h-0 overflow-hidden px-3 pb-4 pt-2.5">
+      <div class="sp-structure-scroll h-full overflow-y-auto overflow-x-visible pr-1">
+        <div>
+          <div
+            class="mb-2 px-2 text-[11px] font-semibold leading-4 tracking-[0.06em] text-[#7c8798]"
+          >
+            <span>{{ $t('54e3d97e.917f14') }}</span>
+          </div>
+          <div class="space-y-1">
+            <draggable
+              v-model="localHeaderZoneOrder"
+              handle="[data-drag-handle='header-zone-section']"
+              class="flex flex-col gap-0"
+              :options="{ filter: '.sp-structure-insert-gap', preventOnFilter: false }"
+              @change="handleHeaderZoneOrderChange"
+            >
+              <div
+                v-for="(sectionId, sIdx) in localHeaderZoneOrder"
+                :key="sectionId"
+                class="flex flex-col gap-0"
+              >
+                <div class="relative z-[3] py-0">
+                  <div
+                    class="sp-structure-insert-gap"
+                    @click.stop="toggleInsertMenu('section', 'header', sIdx, $event)"
+                  >
+                    <div class="sp-structure-insert-gap__line" aria-hidden="true" />
+                    <button type="button" class="sp-structure-insert-gap__btn">
+                      <Plus :size="12" class="shrink-0 text-white" :stroke-width="2.5" />
+                      <span>{{ $t('54e3d97e.2e2d33') }}</span>
+                    </button>
+                  </div>
+                  <div
+                    v-if="isInsertMenuOpen('section', 'header', sIdx)"
+                    class="sp-structure-insert-menu fixed z-[4000] min-w-[200px] max-h-[min(420px,calc(100vh-32px))] overflow-y-auto rounded-xl border border-[rgba(17,24,39,0.08)] bg-white p-1.5 shadow-[0_10px_30px_rgba(15,23,42,0.14)]"
+                    :style="insertMenuDockStyle"
+                  >
+                    <button
+                      v-for="item in sectionPickerItemsFor('header')"
+                      :key="'h-gap-' + item.key + '-' + sIdx"
+                      type="button"
+                      class="flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-2.5 py-2 text-left text-xs text-[#18222f] hover:bg-[#e9f0ff] hover:text-[#2563eb]"
+                      @click="selectSectionType(item.type)"
+                    >
+                      <component
+                        :is="sectionInsertIcon(item.type)"
+                        :size="14"
+                        class="shrink-0 text-[#475467]"
+                        :stroke-width="2"
+                      />
+                      <span>{{ item.label }}</span>
+                    </button>
+                  </div>
+                </div>
+                <div class="space-y-0.5">
+                  <div
+                    :class="[
+                      'group flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-2 py-[7px] transition-colors duration-150 hover:bg-[rgba(24,34,47,0.04)]',
+                      {
+                        'sp-structure-row-selected': sectionId === selectedSectionId
+                      }
+                    ]"
+                    @click="$emit('select-section', sectionId)"
+                  >
+                    <button
+                      type="button"
+                      class="flex h-[18px] w-[18px] shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent p-0 text-[#6b7785]"
+                      @click.stop="$emit('toggle-section', sectionId)"
+                    >
+                      <ChevronDown v-if="isExpanded(sectionId)" :size="14" :stroke-width="2" />
+                      <ChevronRight v-else :size="14" :stroke-width="2" />
+                    </button>
+                    <div class="min-w-0 flex-1 flex items-center">
+                      <div
+                        class="inline-flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold text-[#18222f]"
+                      >
+                        <span
+                          class="relative inline-flex h-[18px] w-[18px] shrink-0 items-center justify-center"
+                        >
+                          <GalleryVertical
+                            :size="16"
+                            class="shrink-0 text-[#475467] opacity-100 transition-opacity duration-150 group-hover:pointer-events-none group-hover:opacity-0"
+                            :stroke-width="2"
+                          />
+                          <span
+                            data-drag-handle="header-zone-section"
+                            class="pointer-events-none absolute inset-0 inline-flex cursor-move items-center justify-center text-[#6b7785] opacity-0 transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100"
+                            aria-hidden="true"
+                          >
+                            <GripVertical :size="14" :stroke-width="2" />
+                          </span>
+                        </span>
+                        {{ getSectionDisplayLabel(sectionId) }}
+                      </div>
+                    </div>
+                    <div
+                      v-if="isHeaderZoneFixedSection(sectionId)"
+                      class="flex shrink-0 items-center gap-0.5 opacity-0 pointer-events-none transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100"
+                    >
+                      <button
+                        type="button"
+                        class="inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-[#6b7785] transition-colors duration-150 hover:bg-[#e8eef6]"
+                        :title="$t('54e3d97e.b11041')"
+                        @click.stop="$emit('toggle-section-disabled', sectionId)"
+                      >
+                        <EyeOff v-if="isSectionDisabled(sectionId)" :size="18" :stroke-width="2" />
+                        <Eye v-else :size="18" :stroke-width="2" />
+                      </button>
+                    </div>
+                    <div
+                      v-else-if="canDeleteHeaderZoneSection(sectionId)"
+                      class="flex shrink-0 items-center gap-0.5 opacity-0 pointer-events-none transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100"
+                    >
+                      <button
+                        type="button"
+                        class="inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-[#98a2b3] transition-colors duration-150 hover:bg-[#e8eef6]"
+                        :title="$t('54e3d97e.8e22a6')"
+                        @click.stop="$emit('remove-section', sectionId)"
+                      >
+                        <Trash2 :size="16" :stroke-width="2" />
+                      </button>
+                      <button
+                        type="button"
+                        class="inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-[#6b7785] transition-colors duration-150 hover:bg-[#e8eef6]"
+                        :title="$t('54e3d97e.b11041')"
+                        @click.stop="$emit('toggle-section-disabled', sectionId)"
+                      >
+                        <EyeOff v-if="isSectionDisabled(sectionId)" :size="18" :stroke-width="2" />
+                        <Eye v-else :size="18" :stroke-width="2" />
+                      </button>
+                    </div>
+                  </div>
+
+                  <draggable
+                    v-if="isExpanded(sectionId) && getBlockOrder(sectionId).length"
+                    v-model="localBlockOrders[sectionId]"
+                    handle="[data-drag-handle='block']"
+                    :options="{ filter: '.sp-structure-insert-gap', preventOnFilter: false }"
+                    @change="handleBlockOrderChange(sectionId)"
+                  >
+                    <div
+                      v-for="(blockId, bIdx) in getBlockOrder(sectionId)"
+                      :key="blockId"
+                      class="flex flex-col gap-0"
+                    >
+                      <div class="relative z-[2] py-0 pl-[50px]">
+                        <div
+                          class="sp-structure-insert-gap sp-structure-insert-gap--block"
+                          @click.stop="toggleInsertMenu('block', sectionId, bIdx, $event)"
+                        >
+                          <div class="sp-structure-insert-gap__line" aria-hidden="true" />
+                          <button
+                            type="button"
+                            class="sp-structure-insert-gap__btn sp-structure-insert-gap__btn--block"
+                          >
+                            <Plus :size="12" class="shrink-0 text-white" :stroke-width="2.5" />
+                            <span>{{ $t('54e3d97e.fc318c') }}</span>
+                          </button>
+                        </div>
+                        <div
+                          v-if="isInsertMenuOpen('block', sectionId, bIdx)"
+                          class="sp-structure-insert-menu fixed z-[4000] min-w-[200px] max-h-[min(420px,calc(100vh-32px))] overflow-y-auto rounded-xl border border-[rgba(17,24,39,0.08)] bg-white p-1.5 shadow-[0_10px_30px_rgba(15,23,42,0.14)]"
+                          :style="insertMenuDockStyle"
+                        >
+                          <button
+                            v-for="item in getBlockPickerItems(getSectionType(sectionId))"
+                            :key="'hb-gap-' + item.key + '-' + sectionId + '-' + bIdx"
+                            type="button"
+                            class="flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-2.5 py-2 text-left text-xs text-[#18222f] hover:bg-[#e9f0ff] hover:text-[#2563eb]"
+                            @click="selectBlockType(sectionId, item.type)"
+                          >
+                            {{ item.label }}
+                          </button>
+                        </div>
+                      </div>
+                      <div
+                        :class="[
+                          'group mt-0 flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent py-[7px] pl-[50px] pr-2 text-[#6b7785] transition-colors duration-150 hover:bg-[rgba(24,34,47,0.04)]',
+                          {
+                            'sp-structure-row-selected':
+                              sectionId === selectedSectionId && selectedBlockId === blockId
+                          }
+                        ]"
+                        @click="$emit('select-block', { sectionId, blockId })"
+                      >
+                        <div class="min-w-0 flex-1 flex items-center">
+                          <div
+                            class="inline-flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold text-[#18222f]"
+                          >
+                            <span
+                              class="relative inline-flex h-[18px] w-[18px] shrink-0 items-center justify-center"
+                            >
+                              <Diamond
+                                :size="16"
+                                class="shrink-0 text-[#475467] opacity-100 transition-opacity duration-150 group-hover:pointer-events-none group-hover:opacity-0"
+                                :stroke-width="2"
+                              />
+                              <span
+                                data-drag-handle="block"
+                                class="pointer-events-none absolute inset-0 inline-flex cursor-move items-center justify-center text-[#6b7785] opacity-0 transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100"
+                              >
+                                <GripVertical :size="14" :stroke-width="2" />
+                              </span>
+                            </span>
+                            {{ getBlockLabel(getSection(sectionId), blockId) }}
+                          </div>
+                        </div>
+                        <div
+                          class="flex shrink-0 items-center gap-0.5 opacity-0 pointer-events-none transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100"
+                        >
+                          <button
+                            v-if="canDeleteBlock(sectionId)"
+                            type="button"
+                            class="inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-[#98a2b3] transition-colors duration-150 hover:bg-[#e8eef6]"
+                            :title="$t('54e3d97e.8e22a6')"
+                            @click.stop="$emit('remove-block', { sectionId, blockId })"
+                          >
+                            <Trash2 :size="16" :stroke-width="2" />
+                          </button>
+                          <button
+                            type="button"
+                            class="inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-[#6b7785] transition-colors duration-150 hover:bg-[#e8eef6]"
+                            :title="$t('54e3d97e.b11041')"
+                            @click.stop="$emit('toggle-block-disabled', { sectionId, blockId })"
+                          >
+                            <EyeOff
+                              v-if="isBlockDisabled(sectionId, blockId)"
+                              :size="18"
+                              :stroke-width="2"
+                            />
+                            <Eye v-else :size="18" :stroke-width="2" />
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </draggable>
+
+                  <div v-if="isExpanded(sectionId)">
+                    <div class="relative pl-[52px]">
+                      <button
+                        v-if="getBlockPickerItems(getSectionType(sectionId)).length"
+                        type="button"
+                        class="mt-0.5 flex w-full cursor-pointer items-center justify-start gap-2 rounded-lg border-0 bg-transparent py-[7px] pl-0 pr-2 text-sm font-semibold text-[#2563eb] transition-colors duration-150"
+                        @click="
+                          toggleInsertMenu(
+                            'block',
+                            sectionId,
+                            getBlockOrder(sectionId).length,
+                            $event
+                          )
+                        "
+                      >
+                        <CirclePlus
+                          :size="14"
+                          class="shrink-0 text-[#2563eb]"
+                          :stroke-width="2.5"
+                        />
+                        <span>{{ $t('54e3d97e.fc318c') }}</span>
+                      </button>
+
+                      <div
+                        v-if="isInsertMenuOpen('block', sectionId, getBlockOrder(sectionId).length)"
+                        class="sp-structure-insert-menu fixed z-[4000] min-w-[200px] max-h-[min(420px,calc(100vh-32px))] overflow-y-auto rounded-xl border border-[rgba(17,24,39,0.08)] bg-white p-1.5 shadow-[0_10px_30px_rgba(15,23,42,0.14)]"
+                        :style="insertMenuDockStyle"
+                      >
+                        <button
+                          v-for="item in getBlockPickerItems(getSectionType(sectionId))"
+                          :key="item.key + '-' + sectionId"
+                          type="button"
+                          class="flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-2.5 py-2 text-left text-xs text-[#18222f] hover:bg-[#e9f0ff] hover:text-[#2563eb]"
+                          @click="selectBlockType(sectionId, item.type)"
+                        >
+                          {{ item.label }}
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </draggable>
+
+            <div class="relative z-[3] py-0">
+              <div
+                class="sp-structure-insert-gap"
+                @click.stop="
+                  toggleInsertMenu('section', 'header', localHeaderZoneOrder.length, $event)
+                "
+              >
+                <div class="sp-structure-insert-gap__line" aria-hidden="true" />
+                <button type="button" class="sp-structure-insert-gap__btn">
+                  <Plus :size="13" class="shrink-0 text-white" :stroke-width="2.5" />
+                  <span>{{ $t('54e3d97e.2e2d33') }}</span>
+                </button>
+              </div>
+              <div
+                v-if="isInsertMenuOpen('section', 'header', localHeaderZoneOrder.length)"
+                class="sp-structure-insert-menu fixed z-[4000] min-w-[200px] max-h-[min(420px,calc(100vh-32px))] overflow-y-auto rounded-xl border border-[rgba(17,24,39,0.08)] bg-white p-1.5 shadow-[0_10px_30px_rgba(15,23,42,0.14)]"
+                :style="insertMenuDockStyle"
+              >
+                <button
+                  v-for="item in sectionPickerItemsFor('header')"
+                  :key="'header-hover-end-' + item.key"
+                  type="button"
+                  class="flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-2.5 py-2 text-left text-xs text-[#18222f] hover:bg-[#e9f0ff] hover:text-[#2563eb]"
+                  @click="selectSectionType(item.type)"
+                >
+                  <component
+                    :is="sectionInsertIcon(item.type)"
+                    :size="14"
+                    class="shrink-0 text-[#475467]"
+                    :stroke-width="2"
+                  />
+                  <span>{{ item.label }}</span>
+                </button>
+              </div>
+            </div>
+
+            <div class="relative mt-1 px-2 pb-0.5 pl-[34px]">
+              <button
+                type="button"
+                class="flex w-full cursor-pointer items-center justify-start gap-2 rounded-lg border-0 bg-transparent py-[7px] text-sm font-semibold text-[#2563eb] transition-colors duration-150"
+                @click="toggleInsertMenu('section', 'header', localHeaderZoneOrder.length, $event)"
+              >
+                <CirclePlus :size="14" class="shrink-0 text-[#2563eb]" :stroke-width="2.5" />
+                <span>{{ $t('54e3d97e.2e2d33') }}</span>
+              </button>
+              <div
+                v-if="isInsertMenuOpen('section', 'header', localHeaderZoneOrder.length)"
+                class="sp-structure-insert-menu fixed z-[4000] min-w-[200px] max-h-[min(420px,calc(100vh-32px))] overflow-y-auto rounded-xl border border-[rgba(17,24,39,0.08)] bg-white p-1.5 shadow-[0_10px_30px_rgba(15,23,42,0.14)]"
+                :style="insertMenuDockStyle"
+              >
+                <button
+                  v-for="item in sectionPickerItemsFor('header')"
+                  :key="item.key"
+                  type="button"
+                  class="flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-2.5 py-2 text-left text-xs text-[#18222f] hover:bg-[#e9f0ff] hover:text-[#2563eb]"
+                  @click="selectSectionType(item.type)"
+                >
+                  <component
+                    :is="sectionInsertIcon(item.type)"
+                    :size="14"
+                    class="shrink-0 text-[#475467]"
+                    :stroke-width="2"
+                  />
+                  <span>{{ item.label }}</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="mt-3.5 border-t border-[#eef1f5] pt-3.5">
+          <div
+            class="mb-2 px-2 text-[11px] font-semibold leading-4 tracking-[0.06em] text-[#7c8798]"
+          >
+            <span>{{ $t('54e3d97e.cdb7d0') }}</span>
+          </div>
+
+          <draggable
+            v-model="localOrder"
+            handle="[data-drag-handle='section']"
+            class="flex flex-col gap-0"
+            :options="{ filter: '.sp-structure-insert-gap', preventOnFilter: false }"
+            @change="handleOrderChange"
+          >
+            <div
+              v-for="(sectionId, sIdx) in localOrder"
+              :key="sectionId"
+              class="flex flex-col gap-0"
+            >
+              <div class="relative z-[3] py-0">
+                <div
+                  class="sp-structure-insert-gap"
+                  @click.stop="toggleInsertMenu('section', 'template', sIdx, $event)"
+                >
+                  <div class="sp-structure-insert-gap__line" aria-hidden="true" />
+                  <button type="button" class="sp-structure-insert-gap__btn">
+                    <Plus :size="12" class="shrink-0 text-white" :stroke-width="2.5" />
+                    <span>{{ $t('54e3d97e.2e2d33') }}</span>
+                  </button>
+                </div>
+                <div
+                  v-if="isInsertMenuOpen('section', 'template', sIdx)"
+                  class="sp-structure-insert-menu fixed z-[4000] min-w-[200px] max-h-[min(420px,calc(100vh-32px))] overflow-y-auto rounded-xl border border-[rgba(17,24,39,0.08)] bg-white p-1.5 shadow-[0_10px_30px_rgba(15,23,42,0.14)]"
+                  :style="insertMenuDockStyle"
+                >
+                  <button
+                    v-for="item in sectionPickerItemsFor('template')"
+                    :key="'tpl-gap-' + item.key + '-' + sIdx"
+                    type="button"
+                    class="flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-2.5 py-2 text-left text-xs text-[#18222f] hover:bg-[#e9f0ff] hover:text-[#2563eb]"
+                    @click="selectSectionType(item.type)"
+                  >
+                    <component
+                      :is="sectionInsertIcon(item.type)"
+                      :size="14"
+                      class="shrink-0 text-[#475467]"
+                      :stroke-width="2"
+                    />
+                    <span>{{ item.label }}</span>
+                  </button>
+                </div>
+              </div>
+              <div class="space-y-1">
+                <div
+                  :class="[
+                    'group flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-2 py-[7px] transition-colors duration-150 hover:bg-[rgba(24,34,47,0.04)]',
+                    {
+                      'sp-structure-row-selected': sectionId === selectedSectionId
+                    }
+                  ]"
+                  @click="$emit('select-section', sectionId)"
+                >
+                  <button
+                    type="button"
+                    class="flex h-[18px] w-[18px] shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent p-0 text-[#6b7785]"
+                    @click.stop="$emit('toggle-section', sectionId)"
+                  >
+                    <ChevronDown v-if="isExpanded(sectionId)" :size="14" :stroke-width="2" />
+                    <ChevronRight v-else :size="14" :stroke-width="2" />
+                  </button>
+                  <div class="min-w-0 flex-1 flex items-center">
+                    <div
+                      class="inline-flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold text-[#18222f]"
+                    >
+                      <span
+                        class="relative inline-flex h-[18px] w-[18px] shrink-0 items-center justify-center"
+                      >
+                        <GalleryVertical
+                          :size="16"
+                          class="shrink-0 text-[#475467] opacity-100 transition-opacity duration-150 group-hover:pointer-events-none group-hover:opacity-0"
+                          :stroke-width="2"
+                        />
+                        <span
+                          data-drag-handle="section"
+                          class="pointer-events-none absolute inset-0 inline-flex cursor-move items-center justify-center text-[#6b7785] opacity-0 transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100"
+                        >
+                          <GripVertical :size="14" :stroke-width="2" />
+                        </span>
+                      </span>
+                      {{ getSectionLabel(sectionId) }}
+                    </div>
+                  </div>
+                  <div
+                    class="flex shrink-0 items-center gap-0.5 opacity-0 pointer-events-none transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100"
+                  >
+                    <button
+                      type="button"
+                      class="inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-[#98a2b3] transition-colors duration-150 hover:bg-[#e8eef6]"
+                      :title="$t('54e3d97e.8e22a6')"
+                      @click.stop="$emit('remove-section', sectionId)"
+                    >
+                      <Trash2 :size="16" :stroke-width="2" />
+                    </button>
+                    <button
+                      type="button"
+                      class="inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-[#6b7785] transition-colors duration-150 hover:bg-[#e8eef6]"
+                      :title="$t('54e3d97e.b11041')"
+                      @click.stop="$emit('toggle-section-disabled', sectionId)"
+                    >
+                      <EyeOff v-if="isSectionDisabled(sectionId)" :size="18" :stroke-width="2" />
+                      <Eye v-else :size="18" :stroke-width="2" />
+                    </button>
+                  </div>
+                </div>
+
+                <draggable
+                  v-if="isExpanded(sectionId) && getBlockOrder(sectionId).length"
+                  v-model="localBlockOrders[sectionId]"
+                  handle="[data-drag-handle='block']"
+                  :options="{ filter: '.sp-structure-insert-gap', preventOnFilter: false }"
+                  @change="handleBlockOrderChange(sectionId)"
+                >
+                  <div
+                    v-for="(blockId, bIdx) in getBlockOrder(sectionId)"
+                    :key="blockId"
+                    class="flex flex-col gap-0"
+                  >
+                    <div class="relative z-[2] py-0 pl-[50px]">
+                      <div
+                        class="sp-structure-insert-gap sp-structure-insert-gap--block"
+                        @click.stop="toggleInsertMenu('block', sectionId, bIdx, $event)"
+                      >
+                        <div class="sp-structure-insert-gap__line" aria-hidden="true" />
+                        <button
+                          type="button"
+                          class="sp-structure-insert-gap__btn sp-structure-insert-gap__btn--block"
+                        >
+                          <Plus :size="12" class="shrink-0 text-white" :stroke-width="2.5" />
+                          <span>{{ $t('54e3d97e.fc318c') }}</span>
+                        </button>
+                      </div>
+                      <div
+                        v-if="isInsertMenuOpen('block', sectionId, bIdx)"
+                        class="sp-structure-insert-menu fixed z-[4000] min-w-[200px] max-h-[min(420px,calc(100vh-32px))] overflow-y-auto rounded-xl border border-[rgba(17,24,39,0.08)] bg-white p-1.5 shadow-[0_10px_30px_rgba(15,23,42,0.14)]"
+                        :style="insertMenuDockStyle"
+                      >
+                        <button
+                          v-for="item in getBlockPickerItems(getSectionType(sectionId))"
+                          :key="'tb-gap-' + item.key + '-' + sectionId + '-' + bIdx"
+                          type="button"
+                          class="flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-2.5 py-2 text-left text-xs text-[#18222f] hover:bg-[#e9f0ff] hover:text-[#2563eb]"
+                          @click="selectBlockType(sectionId, item.type)"
+                        >
+                          {{ item.label }}
+                        </button>
+                      </div>
+                    </div>
+                    <div
+                      :class="[
+                        'group mt-0 flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent py-[7px] pl-[50px] pr-2 text-[#6b7785] transition-colors duration-150 hover:bg-[rgba(24,34,47,0.04)]',
+                        {
+                          'sp-structure-row-selected':
+                            sectionId === selectedSectionId && selectedBlockId === blockId
+                        }
+                      ]"
+                      @click="$emit('select-block', { sectionId, blockId })"
+                    >
+                      <div class="min-w-0 flex-1 flex items-center">
+                        <div
+                          class="inline-flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold text-[#18222f]"
+                        >
+                          <span
+                            class="relative inline-flex h-[18px] w-[18px] shrink-0 items-center justify-center"
+                          >
+                            <Diamond
+                              :size="16"
+                              class="shrink-0 text-[#475467] opacity-100 transition-opacity duration-150 group-hover:pointer-events-none group-hover:opacity-0"
+                              :stroke-width="2"
+                            />
+                            <span
+                              data-drag-handle="block"
+                              class="pointer-events-none absolute inset-0 inline-flex cursor-move items-center justify-center text-[#6b7785] opacity-0 transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100"
+                            >
+                              <GripVertical :size="14" :stroke-width="2" />
+                            </span>
+                          </span>
+                          {{ getBlockLabel(dsl.sections[sectionId], blockId) }}
+                        </div>
+                      </div>
+                      <div
+                        class="flex shrink-0 items-center gap-0.5 opacity-0 pointer-events-none transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100"
+                      >
+                        <button
+                          v-if="canDeleteBlock(sectionId)"
+                          type="button"
+                          class="inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-[#98a2b3] transition-colors duration-150 hover:bg-[#e8eef6]"
+                          :title="$t('54e3d97e.8e22a6')"
+                          @click.stop="$emit('remove-block', { sectionId, blockId })"
+                        >
+                          <Trash2 :size="16" :stroke-width="2" />
+                        </button>
+                        <button
+                          type="button"
+                          class="inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-[#6b7785] transition-colors duration-150 hover:bg-[#e8eef6]"
+                          :title="$t('54e3d97e.b11041')"
+                          @click.stop="$emit('toggle-block-disabled', { sectionId, blockId })"
+                        >
+                          <EyeOff
+                            v-if="isBlockDisabled(sectionId, blockId)"
+                            :size="18"
+                            :stroke-width="2"
+                          />
+                          <Eye v-else :size="18" :stroke-width="2" />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </draggable>
+
+                <div v-if="isExpanded(sectionId)">
+                  <div class="relative pl-[52px]">
+                    <button
+                      v-if="getBlockPickerItems(getSectionType(sectionId)).length"
+                      type="button"
+                      class="mt-0.5 flex w-full cursor-pointer items-center justify-start gap-2 rounded-lg border-0 bg-transparent py-[7px] pl-0 pr-2 text-sm font-semibold text-[#2563eb] transition-colors duration-150"
+                      @click="
+                        toggleInsertMenu(
+                          'block',
+                          sectionId,
+                          getBlockOrder(sectionId).length,
+                          $event
+                        )
+                      "
+                    >
+                      <CirclePlus :size="14" class="shrink-0 text-[#2563eb]" :stroke-width="2.5" />
+                      <span>{{ $t('54e3d97e.fc318c') }}</span>
+                    </button>
+
+                    <div
+                      v-if="isInsertMenuOpen('block', sectionId, getBlockOrder(sectionId).length)"
+                      class="sp-structure-insert-menu fixed z-[4000] min-w-[200px] max-h-[min(420px,calc(100vh-32px))] overflow-y-auto rounded-xl border border-[rgba(17,24,39,0.08)] bg-white p-1.5 shadow-[0_10px_30px_rgba(15,23,42,0.14)]"
+                      :style="insertMenuDockStyle"
+                    >
+                      <button
+                        v-for="item in getBlockPickerItems(getSectionType(sectionId))"
+                        :key="item.key"
+                        type="button"
+                        class="flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-2.5 py-2 text-left text-[12px] text-[#18222f] hover:bg-[#e9f0ff] hover:text-[#2563eb]"
+                        @click="selectBlockType(sectionId, item.type)"
+                      >
+                        {{ item.label }}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </draggable>
+
+          <div v-if="localOrder.length" class="relative z-[3] py-0">
+            <div
+              class="sp-structure-insert-gap"
+              @click.stop="toggleInsertMenu('section', 'template', localOrder.length, $event)"
+            >
+              <div class="sp-structure-insert-gap__line" aria-hidden="true" />
+              <button type="button" class="sp-structure-insert-gap__btn">
+                <Plus :size="13" class="shrink-0 text-white" :stroke-width="2.5" />
+                <span>{{ $t('54e3d97e.2e2d33') }}</span>
+              </button>
+            </div>
+            <div
+              v-if="isInsertMenuOpen('section', 'template', localOrder.length)"
+              class="sp-structure-insert-menu fixed z-[4000] min-w-[200px] max-h-[min(420px,calc(100vh-32px))] overflow-y-auto rounded-xl border border-[rgba(17,24,39,0.08)] bg-white p-1.5 shadow-[0_10px_30px_rgba(15,23,42,0.14)]"
+              :style="insertMenuDockStyle"
+            >
+              <button
+                v-for="item in sectionPickerItemsFor('template')"
+                :key="'tpl-hover-end-' + item.key"
+                type="button"
+                class="flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-2.5 py-2 text-left text-[12px] text-[#18222f] hover:bg-[#e9f0ff] hover:text-[#2563eb]"
+                @click="selectSectionType(item.type)"
+              >
+                <component
+                  :is="sectionInsertIcon(item.type)"
+                  :size="14"
+                  class="shrink-0 text-[#475467]"
+                  :stroke-width="2"
+                />
+                <span>{{ item.label }}</span>
+              </button>
+            </div>
+          </div>
+
+          <div v-if="localOrder.length" class="relative mt-1 px-2 pb-0.5 pl-[34px]">
+            <button
+              type="button"
+              class="flex w-full cursor-pointer items-center justify-start gap-2 rounded-lg border-0 bg-transparent py-[7px] text-sm font-semibold text-[#2563eb] transition-colors duration-150"
+              @click="toggleInsertMenu('section', 'template', localOrder.length, $event)"
+            >
+              <CirclePlus :size="14" class="shrink-0 text-[#2563eb]" :stroke-width="2.5" />
+              <span>{{ $t('54e3d97e.2e2d33') }}</span>
+            </button>
+            <div
+              v-if="isInsertMenuOpen('section', 'template', localOrder.length)"
+              class="sp-structure-insert-menu fixed z-[4000] min-w-[200px] max-h-[min(420px,calc(100vh-32px))] overflow-y-auto rounded-xl border border-[rgba(17,24,39,0.08)] bg-white p-1.5 shadow-[0_10px_30px_rgba(15,23,42,0.14)]"
+              :style="insertMenuDockStyle"
+            >
+              <button
+                v-for="item in sectionPickerItemsFor('template')"
+                :key="'tpl-end-' + item.key"
+                type="button"
+                class="flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-2.5 py-2 text-left text-xs text-[#18222f] hover:bg-[#e9f0ff] hover:text-[#2563eb]"
+                @click="selectSectionType(item.type)"
+              >
+                <component
+                  :is="sectionInsertIcon(item.type)"
+                  :size="14"
+                  class="shrink-0 text-[#475467]"
+                  :stroke-width="2"
+                />
+                <span>{{ item.label }}</span>
+              </button>
+            </div>
+          </div>
+
+          <div
+            v-if="!localOrder.length"
+            class="flex min-h-[180px] flex-col items-center justify-center gap-4 rounded-xl border border-dashed border-[#d7dde7] bg-[#fbfbfc] p-6 text-center text-[#6b7785]"
+          >
+            <span>{{ $t('54e3d97e.bdf5be') }}</span>
+            <div class="relative w-full max-w-[240px]">
+              <button
+                type="button"
+                class="flex w-full cursor-pointer items-center justify-center gap-2 rounded-lg border-0 bg-transparent py-2 text-sm font-semibold text-[#2563eb] transition-colors duration-150"
+                @click="toggleInsertMenu('section', 'template-empty', 0, $event)"
+              >
+                <CirclePlus :size="14" class="shrink-0 text-[#2563eb]" :stroke-width="2.5" />
+                <span>{{ $t('54e3d97e.2e2d33') }}</span>
+              </button>
+              <div
+                v-if="isInsertMenuOpen('section', 'template-empty', 0)"
+                class="sp-structure-insert-menu fixed z-[4000] min-w-[200px] max-h-[min(420px,calc(100vh-32px))] overflow-y-auto rounded-xl border border-[rgba(17,24,39,0.08)] bg-white p-1.5 shadow-[0_10px_30px_rgba(15,23,42,0.14)]"
+                :style="insertMenuDockStyle"
+              >
+                <button
+                  v-for="item in sectionPickerItemsFor('template-empty')"
+                  :key="'tpl-empty-' + item.key"
+                  type="button"
+                  class="flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-2.5 py-2 text-left text-[12px] text-[#18222f] hover:bg-[#e9f0ff] hover:text-[#2563eb]"
+                  @click="selectSectionType(item.type)"
+                >
+                  <component
+                    :is="sectionInsertIcon(item.type)"
+                    :size="14"
+                    class="shrink-0 text-[#475467]"
+                    :stroke-width="2"
+                  />
+                  <span>{{ item.label }}</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="mt-3.5 border-t border-[#eef1f5] pt-3.5">
+          <div
+            class="mb-2 px-2 text-[11px] font-semibold leading-4 tracking-[0.06em] text-[#7c8798]"
+          >
+            <span>{{ $t('54e3d97e.4eb88f') }}</span>
+          </div>
+          <div class="space-y-1">
+            <div class="relative mt-1 px-2 pb-0.5 pl-[34px]">
+              <button
+                type="button"
+                class="flex w-full cursor-pointer items-center justify-start gap-2 rounded-lg border-0 bg-transparent py-[7px] text-sm font-semibold text-[#2563eb] transition-colors duration-150"
+                @click="toggleInsertMenu('section', 'footer', localFooterZoneOrder.length, $event)"
+              >
+                <CirclePlus :size="14" class="shrink-0 text-[#2563eb]" :stroke-width="2.5" />
+                <span>{{ $t('54e3d97e.2e2d33') }}</span>
+              </button>
+              <div
+                v-if="isInsertMenuOpen('section', 'footer', localFooterZoneOrder.length)"
+                class="sp-structure-insert-menu fixed z-[4000] min-w-[200px] max-h-[min(420px,calc(100vh-32px))] overflow-y-auto rounded-xl border border-[rgba(17,24,39,0.08)] bg-white p-1.5 shadow-[0_10px_30px_rgba(15,23,42,0.14)]"
+                :style="insertMenuDockStyle"
+              >
+                <button
+                  v-for="item in sectionPickerItemsFor('footer')"
+                  :key="'footer-add-' + item.key"
+                  type="button"
+                  class="flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-2.5 py-2 text-left text-[12px] text-[#18222f] hover:bg-[#e9f0ff] hover:text-[#2563eb]"
+                  @click="selectSectionType(item.type)"
+                >
+                  <component
+                    :is="sectionInsertIcon(item.type)"
+                    :size="14"
+                    class="shrink-0 text-[#475467]"
+                    :stroke-width="2"
+                  />
+                  <span>{{ item.label }}</span>
+                </button>
+              </div>
+            </div>
+
+            <draggable
+              v-if="localFooterZoneOrder.length"
+              v-model="localFooterZoneOrder"
+              handle="[data-drag-handle='footer-zone-section']"
+              class="flex flex-col gap-0"
+              :options="{ filter: '.sp-structure-insert-gap', preventOnFilter: false }"
+              @change="handleFooterZoneOrderChange"
+            >
+              <div
+                v-for="(sectionId, sIdx) in localFooterZoneOrder"
+                :key="sectionId"
+                class="flex flex-col gap-0"
+              >
+                <div class="relative z-[3] py-0">
+                  <div
+                    class="sp-structure-insert-gap"
+                    @click.stop="toggleInsertMenu('section', 'footer', sIdx, $event)"
+                  >
+                    <div class="sp-structure-insert-gap__line" aria-hidden="true" />
+                    <button type="button" class="sp-structure-insert-gap__btn">
+                      <Plus :size="12" class="shrink-0 text-white" :stroke-width="2.5" />
+                      <span>{{ $t('54e3d97e.2e2d33') }}</span>
+                    </button>
+                  </div>
+                  <div
+                    v-if="isInsertMenuOpen('section', 'footer', sIdx)"
+                    class="sp-structure-insert-menu fixed z-[4000] min-w-[200px] max-h-[min(420px,calc(100vh-32px))] overflow-y-auto rounded-xl border border-[rgba(17,24,39,0.08)] bg-white p-1.5 shadow-[0_10px_30px_rgba(15,23,42,0.14)]"
+                    :style="insertMenuDockStyle"
+                  >
+                    <button
+                      v-for="item in sectionPickerItemsFor('footer')"
+                      :key="'footer-gap-' + item.key + '-' + sIdx"
+                      type="button"
+                      class="flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-2.5 py-2 text-left text-[12px] text-[#18222f] hover:bg-[#e9f0ff] hover:text-[#2563eb]"
+                      @click="selectSectionType(item.type)"
+                    >
+                      <component
+                        :is="sectionInsertIcon(item.type)"
+                        :size="14"
+                        class="shrink-0 text-[#475467]"
+                        :stroke-width="2"
+                      />
+                      <span>{{ item.label }}</span>
+                    </button>
+                  </div>
+                </div>
+
+                <div
+                  :class="[
+                    'group flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-2 py-[7px] transition-colors duration-150 hover:bg-[rgba(24,34,47,0.04)]',
+                    { 'sp-structure-row-selected': selectedSectionId === sectionId }
+                  ]"
+                  @click="$emit('select-section', sectionId)"
+                >
+                  <button
+                    type="button"
+                    class="flex h-[18px] w-[18px] shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent p-0 text-[#6b7785]"
+                    @click.stop="$emit('toggle-section', sectionId)"
+                  >
+                    <ChevronDown v-if="isExpanded(sectionId)" :size="14" :stroke-width="2" />
+                    <ChevronRight v-else :size="14" :stroke-width="2" />
+                  </button>
+                  <span
+                    data-drag-handle="footer-zone-section"
+                    class="inline-flex h-[18px] w-[18px] shrink-0 cursor-move items-center justify-center text-[#6b7785]"
+                  >
+                    <GripVertical :size="14" :stroke-width="2" />
+                  </span>
+                  <div class="min-w-0 flex-1 flex items-center">
+                    <div
+                      class="inline-flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold text-[#18222f]"
+                    >
+                      <GalleryVertical
+                        :size="16"
+                        class="shrink-0 text-[#475467]"
+                        :stroke-width="2"
+                      />
+                      {{ getSectionDisplayLabel(sectionId) }}
+                    </div>
+                  </div>
+                </div>
+
+                <draggable
+                  v-if="isExpanded(sectionId) && getBlockOrder(sectionId).length"
+                  v-model="localBlockOrders[sectionId]"
+                  handle="[data-drag-handle='block']"
+                  :options="{ filter: '.sp-structure-insert-gap', preventOnFilter: false }"
+                  @change="handleBlockOrderChange(sectionId)"
+                >
+                  <div
+                    v-for="(blockId, bIdx) in getBlockOrder(sectionId)"
+                    :key="blockId"
+                    class="flex flex-col gap-0"
+                  >
+                    <div class="relative z-[2] py-0 pl-[50px]">
+                      <div
+                        class="sp-structure-insert-gap sp-structure-insert-gap--block"
+                        @click.stop="toggleInsertMenu('block', sectionId, bIdx, $event)"
+                      >
+                        <div class="sp-structure-insert-gap__line" aria-hidden="true" />
+                        <button
+                          type="button"
+                          class="sp-structure-insert-gap__btn sp-structure-insert-gap__btn--block"
+                        >
+                          <Plus :size="12" class="shrink-0 text-white" :stroke-width="2.5" />
+                          <span>{{ $t('54e3d97e.fc318c') }}</span>
+                        </button>
+                      </div>
+                      <div
+                        v-if="isInsertMenuOpen('block', sectionId, bIdx)"
+                        class="sp-structure-insert-menu fixed z-[4000] min-w-[200px] max-h-[min(420px,calc(100vh-32px))] overflow-y-auto rounded-xl border border-[rgba(17,24,39,0.08)] bg-white p-1.5 shadow-[0_10px_30px_rgba(15,23,42,0.14)]"
+                        :style="insertMenuDockStyle"
+                      >
+                        <button
+                          v-for="item in getBlockPickerItems(getSectionType(sectionId))"
+                          :key="'footer-zone-block-gap-' + item.key + '-' + bIdx"
+                          type="button"
+                          class="flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-2.5 py-2 text-left text-[12px] text-[#18222f] hover:bg-[#e9f0ff] hover:text-[#2563eb]"
+                          @click="selectBlockType(sectionId, item.type)"
+                        >
+                          {{ item.label }}
+                        </button>
+                      </div>
+                    </div>
+                    <div
+                      :class="[
+                        'group mt-0 flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent py-[7px] pl-[50px] pr-2 text-[#6b7785] transition-colors duration-150 hover:bg-[rgba(24,34,47,0.04)]',
+                        {
+                          'sp-structure-row-selected':
+                            selectedSectionId === sectionId && selectedBlockId === blockId
+                        }
+                      ]"
+                      @click="$emit('select-block', { sectionId, blockId })"
+                    >
+                      <span
+                        data-drag-handle="block"
+                        class="inline-flex h-[18px] w-[18px] shrink-0 cursor-move items-center justify-center text-[#6b7785]"
+                      >
+                        <Diamond :size="16" :stroke-width="2" />
+                      </span>
+                      <div class="min-w-0 flex-1 flex items-center">
+                        <div
+                          class="inline-flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold text-[#18222f]"
+                        >
+                          {{ getBlockLabel(getSection(sectionId), blockId) }}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </draggable>
+
+                <div v-if="isExpanded(sectionId)">
+                  <div class="relative pl-[52px]">
+                    <button
+                      v-if="getBlockPickerItems(getSectionType(sectionId)).length"
+                      type="button"
+                      class="mt-0.5 flex w-full cursor-pointer items-center justify-start gap-2 rounded-lg border-0 bg-transparent py-[7px] pr-2 text-sm font-semibold text-[#2563eb] transition-colors duration-150"
+                      @click="
+                        toggleInsertMenu(
+                          'block',
+                          sectionId,
+                          getBlockOrder(sectionId).length,
+                          $event
+                        )
+                      "
+                    >
+                      <CirclePlus :size="14" class="shrink-0 text-[#2563eb]" :stroke-width="2.5" />
+                      <span>{{ $t('54e3d97e.fc318c') }}</span>
+                    </button>
+
+                    <div
+                      v-if="isInsertMenuOpen('block', sectionId, getBlockOrder(sectionId).length)"
+                      class="sp-structure-insert-menu fixed z-[4000] min-w-[200px] max-h-[min(420px,calc(100vh-32px))] overflow-y-auto rounded-xl border border-[rgba(17,24,39,0.08)] bg-white p-1.5 shadow-[0_10px_30px_rgba(15,23,42,0.14)]"
+                      :style="insertMenuDockStyle"
+                    >
+                      <button
+                        v-for="item in getBlockPickerItems(getSectionType(sectionId))"
+                        :key="'footer-zone-block-' + item.key + '-' + sectionId"
+                        type="button"
+                        class="flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-2.5 py-2 text-left text-[12px] text-[#18222f] hover:bg-[#e9f0ff] hover:text-[#2563eb]"
+                        @click="selectBlockType(sectionId, item.type)"
+                      >
+                        {{ item.label }}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </draggable>
+
+            <div class="relative z-[3] py-0">
+              <div
+                class="sp-structure-insert-gap"
+                @click.stop="
+                  toggleInsertMenu('section', 'footer', localFooterZoneOrder.length, $event)
+                "
+              >
+                <div class="sp-structure-insert-gap__line" aria-hidden="true" />
+                <button type="button" class="sp-structure-insert-gap__btn">
+                  <Plus :size="13" class="shrink-0 text-white" :stroke-width="2.5" />
+                  <span>{{ $t('54e3d97e.2e2d33') }}</span>
+                </button>
+              </div>
+              <div
+                v-if="isInsertMenuOpen('section', 'footer', localFooterZoneOrder.length)"
+                class="sp-structure-insert-menu fixed z-[4000] min-w-[200px] max-h-[min(420px,calc(100vh-32px))] overflow-y-auto rounded-xl border border-[rgba(17,24,39,0.08)] bg-white p-1.5 shadow-[0_10px_30px_rgba(15,23,42,0.14)]"
+                :style="insertMenuDockStyle"
+              >
+                <button
+                  v-for="item in sectionPickerItemsFor('footer')"
+                  :key="'footer-before-fixed-' + item.key"
+                  type="button"
+                  class="flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-2.5 py-2 text-left text-[12px] text-[#18222f] hover:bg-[#e9f0ff] hover:text-[#2563eb]"
+                  @click="selectSectionType(item.type)"
+                >
+                  <component
+                    :is="sectionInsertIcon(item.type)"
+                    :size="14"
+                    class="shrink-0 text-[#475467]"
+                    :stroke-width="2"
+                  />
+                  <span>{{ item.label }}</span>
+                </button>
+              </div>
+            </div>
+
+            <div
+              :class="[
+                'group flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-2 py-[7px] transition-colors duration-150 hover:bg-[rgba(24,34,47,0.04)]',
+                { 'sp-structure-row-selected': selectedSectionId === 'footer' }
+              ]"
+              @click="$emit('select-section', 'footer')"
+            >
+              <button
+                type="button"
+                class="flex h-[18px] w-[18px] shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent p-0 text-[#6b7785]"
+                @click.stop="$emit('toggle-section', 'footer')"
+              >
+                <ChevronDown v-if="isExpanded('footer')" :size="14" :stroke-width="2" />
+                <ChevronRight v-else :size="14" :stroke-width="2" />
+              </button>
+              <div class="min-w-0 flex-1 flex items-center">
+                <div
+                  class="inline-flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold text-[#18222f]"
+                >
+                  <span
+                    class="relative inline-flex h-[18px] w-[18px] shrink-0 items-center justify-center"
+                  >
+                    <GalleryVertical
+                      :size="16"
+                      class="shrink-0 text-[#475467] opacity-100 transition-opacity duration-150 group-hover:pointer-events-none group-hover:opacity-0"
+                      :stroke-width="2"
+                    />
+                    <span
+                      class="pointer-events-none absolute inset-0 inline-flex items-center justify-center text-[#6b7785] opacity-0 transition-opacity duration-150 group-hover:opacity-100"
+                      aria-hidden="true"
+                    >
+                      <GripVertical :size="14" :stroke-width="2" />
+                    </span>
+                  </span>
+                  {{ $t('54e3d97e.4eb88f') }}
+                </div>
+              </div>
+              <div
+                class="flex shrink-0 items-center gap-0.5 opacity-0 pointer-events-none transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100"
+              >
+                <button
+                  type="button"
+                  class="inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-[#6b7785] transition-colors duration-150 hover:bg-[#e8eef6]"
+                  :title="$t('54e3d97e.b11041')"
+                  @click.stop="$emit('toggle-section-disabled', 'footer')"
+                >
+                  <EyeOff v-if="isSectionDisabled('footer')" :size="18" :stroke-width="2" />
+                  <Eye v-else :size="18" :stroke-width="2" />
+                </button>
+              </div>
+            </div>
+
+            <draggable
+              v-if="isExpanded('footer') && footerBlockOrder.length"
+              v-model="localBlockOrders.footer"
+              handle="[data-drag-handle='block']"
+              :options="{ filter: '.sp-structure-insert-gap', preventOnFilter: false }"
+              @change="handleBlockOrderChange('footer')"
+            >
+              <div
+                v-for="(blockId, bIdx) in footerBlockOrder"
+                :key="blockId"
+                class="flex flex-col gap-0"
+              >
+                <div class="relative z-[2] py-0 pl-[50px]">
+                  <div
+                    class="sp-structure-insert-gap sp-structure-insert-gap--block"
+                    @click.stop="toggleInsertMenu('block', 'footer', bIdx, $event)"
+                  >
+                    <div class="sp-structure-insert-gap__line" aria-hidden="true" />
+                    <button
+                      type="button"
+                      class="sp-structure-insert-gap__btn sp-structure-insert-gap__btn--block"
+                    >
+                      <Plus :size="12" class="shrink-0 text-white" :stroke-width="2.5" />
+                      <span>{{ $t('54e3d97e.fc318c') }}</span>
+                    </button>
+                  </div>
+                  <div
+                    v-if="isInsertMenuOpen('block', 'footer', bIdx)"
+                    class="sp-structure-insert-menu fixed z-[4000] min-w-[200px] max-h-[min(420px,calc(100vh-32px))] overflow-y-auto rounded-xl border border-[rgba(17,24,39,0.08)] bg-white p-1.5 shadow-[0_10px_30px_rgba(15,23,42,0.14)]"
+                    :style="insertMenuDockStyle"
+                  >
+                    <button
+                      v-for="item in footerBlockPickerItems"
+                      :key="'fb-gap-' + item.key + '-' + bIdx"
+                      type="button"
+                      class="flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-2.5 py-2 text-left text-[12px] text-[#18222f] hover:bg-[#e9f0ff] hover:text-[#2563eb]"
+                      @click="selectBlockType('footer', item.type)"
+                    >
+                      {{ item.label }}
+                    </button>
+                  </div>
+                </div>
+                <div
+                  :class="[
+                    'group mt-0 flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent py-[7px] pl-[50px] pr-2 text-[#6b7785] transition-colors duration-150 hover:bg-[rgba(24,34,47,0.04)]',
+                    {
+                      'sp-structure-row-selected':
+                        selectedSectionId === 'footer' && selectedBlockId === blockId
+                    }
+                  ]"
+                  @click="$emit('select-block', { sectionId: 'footer', blockId })"
+                >
+                  <div class="min-w-0 flex-1 flex items-center">
+                    <div
+                      class="inline-flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold text-[#18222f]"
+                    >
+                      <span
+                        class="relative inline-flex h-[18px] w-[18px] shrink-0 items-center justify-center"
+                      >
+                        <Diamond
+                          :size="16"
+                          class="shrink-0 text-[#475467] opacity-100 transition-opacity duration-150 group-hover:pointer-events-none group-hover:opacity-0"
+                          :stroke-width="2"
+                        />
+                        <span
+                          data-drag-handle="block"
+                          class="pointer-events-none absolute inset-0 inline-flex cursor-move items-center justify-center text-[#6b7785] opacity-0 transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100"
+                        >
+                          <GripVertical :size="14" :stroke-width="2" />
+                        </span>
+                      </span>
+                      {{ getBlockLabel(footerSection, blockId) }}
+                    </div>
+                  </div>
+                  <div
+                    class="flex shrink-0 items-center gap-0.5 opacity-0 pointer-events-none transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100"
+                  >
+                    <button
+                      v-if="canDeleteBlock('footer')"
+                      type="button"
+                      class="inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-[#98a2b3] transition-colors duration-150 hover:bg-[#e8eef6]"
+                      :title="$t('54e3d97e.8e22a6')"
+                      @click.stop="$emit('remove-block', { sectionId: 'footer', blockId })"
+                    >
+                      <Trash2 :size="16" :stroke-width="2" />
+                    </button>
+                    <button
+                      type="button"
+                      class="inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-[#6b7785] transition-colors duration-150 hover:bg-[#e8eef6]"
+                      :title="$t('54e3d97e.b11041')"
+                      @click.stop="$emit('toggle-block-disabled', { sectionId: 'footer', blockId })"
+                    >
+                      <EyeOff
+                        v-if="isBlockDisabled('footer', blockId)"
+                        :size="18"
+                        :stroke-width="2"
+                      />
+                      <Eye v-else :size="18" :stroke-width="2" />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </draggable>
+
+            <div v-if="isExpanded('footer')">
+              <div class="relative pl-[52px]">
+                <button
+                  v-if="footerBlockPickerItems.length"
+                  type="button"
+                  class="mt-0.5 flex w-full cursor-pointer items-center justify-start gap-2 rounded-lg border-0 bg-transparent py-[7px] pr-2 text-sm font-semibold text-[#2563eb] transition-colors duration-150"
+                  @click="toggleInsertMenu('block', 'footer', footerBlockOrder.length, $event)"
+                >
+                  <CirclePlus :size="14" class="shrink-0 text-[#2563eb]" :stroke-width="2.5" />
+                  <span>{{ $t('54e3d97e.fc318c') }}</span>
+                </button>
+
+                <div
+                  v-if="isInsertMenuOpen('block', 'footer', footerBlockOrder.length)"
+                  class="sp-structure-insert-menu fixed z-[4000] min-w-[200px] max-h-[min(420px,calc(100vh-32px))] overflow-y-auto rounded-xl border border-[rgba(17,24,39,0.08)] bg-white p-1.5 shadow-[0_10px_30px_rgba(15,23,42,0.14)]"
+                  :style="insertMenuDockStyle"
+                >
+                  <button
+                    v-for="item in footerBlockPickerItems"
+                    :key="item.key"
+                    type="button"
+                    class="flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-2.5 py-2 text-left text-[12px] text-[#18222f] hover:bg-[#e9f0ff] hover:text-[#2563eb]"
+                    @click="selectBlockType('footer', item.type)"
+                  >
+                    {{ item.label }}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+
+import { getTypedBlockDefinition as getBlockDefinition } from '../definitions/registry.js'
+import {
+  createSectionPickerItems,
+  createSectionPickerItemsForTypes,
+  createBlockPickerItems
+} from '../utils/insertPicker.js'
+import { getSectionInsertIconComponent as resolveSectionInsertIcon } from '../utils/decorationLucide.js'
+import { getAreaSectionInsertPolicy } from '../definitions/areas.js'
+
+export default {
+  name: 'StructurePanel',
+  components: {
+    draggable
+  },
+  props: {
+    dsl: {
+      type: Object,
+      required: true
+    },
+    globalDsl: {
+      type: Object,
+      default: () => ({})
+    },
+    headerDsl: {
+      type: Object,
+      default: () => ({})
+    },
+    footerDsl: {
+      type: Object,
+      default: () => ({})
+    },
+    sectionDefinitions: {
+      type: Array,
+      default: () => []
+    },
+    expandedSectionIds: {
+      type: Array,
+      default: () => []
+    },
+    selectedSectionId: {
+      type: String,
+      default: ''
+    },
+    selectedBlockId: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      localOrder: [],
+      /** 全局标头区顺序，与 headerDsl.order 同步，可拖拽 */
+      localHeaderZoneOrder: [],
+      /** 全局页脚区附加分区顺序，不含固定 footer */
+      localFooterZoneOrder: [],
+      localBlockOrders: {
+        header: [],
+        footer: []
+      },
+      openInsertMenu: {
+        kind: '',
+        sectionId: '',
+        insertIndex: null
+      },
+      /** 插入菜单：fixed 定位（结构树右侧），由锚点 getBoundingClientRect 计算 */
+      insertMenuAnchorEl: null,
+      insertMenuDockStyle: {}
+    }
+  },
+  computed: {
+    footerSection() {
+      return this.footerDsl.sections?.footer || this.globalDsl.sections?.footer || null
+    },
+    footerBlockOrder() {
+      return this.localBlockOrders.footer || []
+    },
+    footerBlockPickerItems() {
+      return createBlockPickerItems('footer')
+    }
+  },
+  watch: {
+    'dsl.order': {
+      immediate: true,
+      deep: true,
+      handler(value) {
+        this.localOrder = Array.isArray(value) ? value.slice() : []
+      }
+    },
+    dsl: {
+      immediate: true,
+      deep: true,
+      handler() {
+        this.syncBlockOrders()
+      }
+    },
+    globalDsl: {
+      immediate: true,
+      deep: true,
+      handler() {
+        this.syncBlockOrders()
+      }
+    },
+    headerDsl: {
+      immediate: true,
+      deep: true,
+      handler() {
+        this.syncHeaderZoneOrderFromHeader()
+      }
+    },
+    footerDsl: {
+      immediate: true,
+      deep: true,
+      handler() {
+        this.syncFooterZoneOrderFromFooter()
+      }
+    }
+  },
+  beforeDestroy() {
+    this.clearInsertMenuAnchor()
+  },
+  methods: {
+    syncHeaderZoneOrderFromHeader() {
+      const order = this.headerDsl?.order
+      if (!Array.isArray(order) || !order.length) {
+        this.localHeaderZoneOrder = ['header']
+        return
+      }
+      this.localHeaderZoneOrder = order.filter((id) => id !== 'footer').slice()
+    },
+    syncFooterZoneOrderFromFooter() {
+      const order = this.footerDsl?.order
+      this.localFooterZoneOrder = Array.isArray(order)
+        ? order.filter((id) => id !== 'footer').slice()
+        : []
+    },
+    emitGlobalZoneOrder() {
+      this.$emit('reorder-global-sections', [
+        ...this.localHeaderZoneOrder.slice(),
+        ...this.localFooterZoneOrder.slice(),
+        'footer'
+      ])
+    },
+    handleHeaderZoneOrderChange() {
+      this.emitGlobalZoneOrder()
+    },
+    handleFooterZoneOrderChange() {
+      this.emitGlobalZoneOrder()
+    },
+    isHeaderZoneFixedSection(sectionId) {
+      return sectionId === 'header'
+    },
+    canDeleteHeaderZoneSection(sectionId) {
+      if (sectionId === 'header' || sectionId === 'footer') return false
+      return this.getSectionType(sectionId) === 'announcement-bar'
+    },
+    sectionPickerItemsFor(anchor) {
+      const cfg = getAreaSectionInsertPolicy(anchor)
+      if (cfg.types == null) {
+        return createSectionPickerItems(this.sectionDefinitions)
+      }
+      return createSectionPickerItemsForTypes(cfg.types)
+    },
+    syncBlockOrders() {
+      const nextBlockOrders = {}
+      Object.keys(this.globalDsl.sections || {}).forEach((sectionId) => {
+        nextBlockOrders[sectionId] = this.globalDsl.sections?.[sectionId]?.blockOrder?.slice() || []
+      })
+      Object.keys(this.dsl.sections || {}).forEach((sectionId) => {
+        nextBlockOrders[sectionId] = this.dsl.sections[sectionId].blockOrder?.slice() || []
+      })
+      this.localBlockOrders = nextBlockOrders
+    },
+    isExpanded(sectionId) {
+      return this.expandedSectionIds.includes(sectionId)
+    },
+    isInsertMenuOpen(kind, sectionId = '', insertIndex = null) {
+      if (this.openInsertMenu.kind !== kind) return false
+      if (kind === 'block') {
+        return (
+          this.openInsertMenu.sectionId === sectionId &&
+          this.openInsertMenu.insertIndex === insertIndex
+        )
+      }
+      if (kind === 'section') {
+        return (
+          this.openInsertMenu.sectionId === sectionId &&
+          this.openInsertMenu.insertIndex === insertIndex
+        )
+      }
+      return false
+    },
+    toggleInsertMenu(kind, sectionId = '', insertIndexArg = undefined, event) {
+      if (kind === 'block') {
+        const idx =
+          typeof insertIndexArg === 'number' && !Number.isNaN(insertIndexArg)
+            ? insertIndexArg
+            : null
+        if (this.isInsertMenuOpen('block', sectionId, idx)) {
+          this.closeInsertMenu()
+          return
+        }
+        this.openInsertMenu = { kind: 'block', sectionId, insertIndex: idx }
+        this.setInsertMenuAnchor(event)
+        return
+      }
+      if (kind === 'section') {
+        const anchor = sectionId || 'header'
+        let idx
+        if (typeof insertIndexArg === 'number' && !Number.isNaN(insertIndexArg)) {
+          idx = insertIndexArg
+        } else if (anchor === 'header') {
+          idx = this.localHeaderZoneOrder.length
+        } else if (anchor === 'template-empty') {
+          idx = 0
+        } else {
+          idx = this.localOrder.length
+        }
+        if (this.isInsertMenuOpen('section', anchor, idx)) {
+          this.closeInsertMenu()
+          return
+        }
+        this.openInsertMenu = { kind: 'section', sectionId: anchor, insertIndex: idx }
+        this.setInsertMenuAnchor(event)
+      }
+    },
+    setInsertMenuAnchor(event) {
+      const el = event && event.currentTarget
+      this.insertMenuAnchorEl = el && el.nodeType === 1 ? el : null
+      this.bindInsertMenuPositionListeners()
+      this.bindInsertMenuClickOutside()
+      this.$nextTick(() => this.updateInsertMenuPosition())
+    },
+    updateInsertMenuPosition() {
+      const el = this.insertMenuAnchorEl
+      if (!el || typeof el.getBoundingClientRect !== 'function') {
+        this.insertMenuDockStyle = {}
+        return
+      }
+      const r = el.getBoundingClientRect()
+      const root = this.$el
+      const rootRect =
+        root && typeof root.getBoundingClientRect === 'function' ? root.getBoundingClientRect() : r
+      const gap = 8
+      const menuW = 208
+      // 图2：面板左缘与结构侧栏右边界（分割线）对齐，整体落在预览区一侧
+      let left = rootRect.right + gap
+      const vw = typeof window !== 'undefined' ? window.innerWidth : 1200
+      const vh = typeof window !== 'undefined' ? window.innerHeight : 800
+      if (left + menuW > vw - gap) {
+        left = Math.max(gap, vw - menuW - gap)
+      }
+      const pad = 8
+      const minBottomReserve = 120
+      let topPx = r.top
+      topPx = Math.max(pad, Math.min(vh - pad - minBottomReserve, topPx))
+      this.insertMenuDockStyle = {
+        position: 'fixed',
+        top: `${Math.round(topPx)}px`,
+        left: `${Math.round(left)}px`,
+        zIndex: 4000
+      }
+    },
+    bindInsertMenuPositionListeners() {
+      if (this._insertMenuListenersBound) return
+      this._onInsertMenuViewport = () => {
+        if (!this.openInsertMenu.kind) return
+        this.updateInsertMenuPosition()
+      }
+      window.addEventListener('resize', this._onInsertMenuViewport)
+      window.addEventListener('scroll', this._onInsertMenuViewport, true)
+      this._insertMenuScrollEl = this.$el && this.$el.querySelector('.sp-structure-scroll')
+      if (this._insertMenuScrollEl) {
+        this._insertMenuScrollEl.addEventListener('scroll', this._onInsertMenuViewport, true)
+      }
+      this._insertMenuListenersBound = true
+    },
+    unbindInsertMenuPositionListeners() {
+      if (!this._insertMenuListenersBound || !this._onInsertMenuViewport) return
+      window.removeEventListener('resize', this._onInsertMenuViewport)
+      window.removeEventListener('scroll', this._onInsertMenuViewport, true)
+      if (this._insertMenuScrollEl) {
+        this._insertMenuScrollEl.removeEventListener('scroll', this._onInsertMenuViewport, true)
+        this._insertMenuScrollEl = null
+      }
+      this._onInsertMenuViewport = null
+      this._insertMenuListenersBound = false
+    },
+    clearInsertMenuAnchor() {
+      this.insertMenuAnchorEl = null
+      this.insertMenuDockStyle = {}
+      this.unbindInsertMenuPositionListeners()
+      this.unbindInsertMenuClickOutside()
+    },
+    bindInsertMenuClickOutside() {
+      if (this._insertMenuClickOutsideBound) return
+      this._onInsertMenuClickOutside = (e) => {
+        if (!this.openInsertMenu.kind) return
+        const t = e.target
+        const root = this.$el
+        const panel = root && root.querySelector && root.querySelector('.sp-structure-insert-menu')
+        if (panel && panel.contains(t)) return
+        if (this.insertMenuAnchorEl && this.insertMenuAnchorEl.contains(t)) return
+        this.closeInsertMenu()
+      }
+      document.addEventListener('click', this._onInsertMenuClickOutside, false)
+      this._insertMenuClickOutsideBound = true
+    },
+    unbindInsertMenuClickOutside() {
+      if (!this._insertMenuClickOutsideBound || !this._onInsertMenuClickOutside) return
+      document.removeEventListener('click', this._onInsertMenuClickOutside, false)
+      this._onInsertMenuClickOutside = null
+      this._insertMenuClickOutsideBound = false
+    },
+    closeInsertMenu() {
+      this.clearInsertMenuAnchor()
+      this.openInsertMenu = { kind: '', sectionId: '', insertIndex: null }
+    },
+    sectionInsertIcon(type) {
+      return resolveSectionInsertIcon(type)
+    },
+    selectSectionType(type) {
+      const anchor = this.openInsertMenu.sectionId
+      const idx = this.openInsertMenu.insertIndex
+      const cfg = getAreaSectionInsertPolicy(anchor)
+      if (cfg.mutation === 'global' || cfg.mutation === 'footer') {
+        this.$emit('add-global-section', {
+          type,
+          area: cfg.mutation,
+          index: typeof idx === 'number' ? idx : undefined
+        })
+      } else {
+        this.$emit('add-section', {
+          type,
+          index: typeof idx === 'number' ? idx : undefined
+        })
+      }
+      this.closeInsertMenu()
+    },
+    selectBlockType(sectionId, blockType) {
+      const idx = this.openInsertMenu.insertIndex
+      this.$emit('add-block', {
+        sectionId,
+        blockType,
+        index: typeof idx === 'number' && !Number.isNaN(idx) ? idx : undefined
+      })
+      this.closeInsertMenu()
+    },
+    getSectionLabel(sectionId) {
+      return this.getSectionDisplayLabel(sectionId)
+    },
+    getSectionType(sectionId) {
+      return this.getSection(sectionId)?.type || ''
+    },
+    isSectionDisabled(sectionId) {
+      return Boolean(this.getSection(sectionId)?.disabled)
+    },
+    isBlockDisabled(sectionId, blockId) {
+      const section = this.getSection(sectionId)
+      return Boolean(section?.blocks?.[blockId]?.disabled)
+    },
+    canDeleteBlock(sectionId) {
+      return (this.getBlockOrder(sectionId) || []).length > 1
+    },
+    getSection(sectionId) {
+      return (
+        this.headerDsl.sections?.[sectionId] ||
+        this.footerDsl.sections?.[sectionId] ||
+        this.globalDsl.sections?.[sectionId] ||
+        this.dsl.sections?.[sectionId] ||
+        null
+      )
+    },
+    getSectionDisplayLabel(sectionId) {
+      const section = this.getSection(sectionId)
+      if (!section) return ''
+      return section.title || ''
+    },
+    getBlockPickerItems(sectionType) {
+      return createBlockPickerItems(sectionType)
+    },
+    getBlockOrder(sectionId) {
+      return this.localBlockOrders[sectionId] || []
+    },
+    getBlockLabel(section, blockId) {
+      const block = section?.blocks?.[blockId]
+      if (!block) return ''
+      // const definition = getBlockDefinition(section.type, block.type)
+      return block.title || ''
+    },
+    handleOrderChange() {
+      this.$emit('reorder-sections', this.localOrder.slice())
+    },
+    handleBlockOrderChange(sectionId) {
+      this.$emit('reorder-blocks', {
+        sectionId,
+        blockOrder: this.getBlockOrder(sectionId).slice()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 结构树选中行：主题辅色（--secondary）半透明填充，圆角继承自 rounded-lg */
+.sp-structure-row-selected {
+  background-color: color-mix(in srgb, hsl(var(--secondary)) 16%, transparent);
+}
+
+.sp-structure-row-selected:hover {
+  background-color: color-mix(in srgb, hsl(var(--secondary)) 22%, transparent);
+}
+
+/* 分区 / 块之间：hover 出现虚线与「添加」胶囊（与 vuedraggable filter 配合避免误拖） */
+.sp-structure-insert-gap {
+  position: relative;
+  display: flex;
+  height: 6px;
+  align-items: center;
+  justify-content: center;
+  cursor: default;
+}
+
+.sp-structure-insert-gap__line {
+  position: absolute;
+  left: 10px;
+  right: 10px;
+  top: 50%;
+  margin-top: -1px;
+  border-top: 1px dashed #2563eb;
+  opacity: 0;
+  transition: opacity 0.12s ease;
+  pointer-events: none;
+}
+
+.sp-structure-insert-gap:hover .sp-structure-insert-gap__line {
+  opacity: 1;
+}
+
+.sp-structure-insert-gap__btn {
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+  padding: 4px 12px;
+  border: 0;
+  border-radius: 9999px;
+  background: #2563eb;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.25;
+  cursor: pointer;
+  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.12s ease;
+}
+
+.sp-structure-insert-gap:hover .sp-structure-insert-gap__btn {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.sp-structure-insert-gap__btn--block {
+  font-size: 12px;
+  padding: 4px 12px;
+}
+</style>
diff --git a/src/components/sp-web-decoration/components/StructurePanel.vue b/src/components/sp-web-decoration/components/StructurePanel.vue
new file mode 100644
index 0000000..b181769
--- /dev/null
+++ b/src/components/sp-web-decoration/components/StructurePanel.vue
@@ -0,0 +1,884 @@
+<template>
+  <div class="h-full flex min-h-0 flex-col border-r border-[#e6e9ef] bg-white">
+    <div
+      class="flex min-h-[44px] items-center justify-between gap-2.5 border-b border-[#e6e9ef] px-[14px] py-[8px]"
+    >
+      <div class="text-[14px] font-semibold text-[#18222f]">
+        {{ $t('54e3d97e.768f6f') }}
+      </div>
+    </div>
+
+    <div class="h-full min-h-0 overflow-hidden px-3 pb-4 pt-2.5">
+      <div class="sp-structure-scroll h-full overflow-y-auto overflow-x-visible pr-1">
+        <div>
+          <div
+            class="mb-2 px-2 text-[11px] font-semibold leading-4 tracking-[0.06em] text-[#7c8798]"
+          >
+            <span>{{ $t('54e3d97e.917f14') }}</span>
+          </div>
+          <div class="space-y-1">
+            <draggable
+              v-model="localHeaderZoneOrder"
+              handle="[data-drag-handle='header-zone-section']"
+              class="flex flex-col gap-0"
+              :options="{ filter: '.sp-structure-insert-gap', preventOnFilter: false }"
+              @change="handleHeaderZoneOrderChange"
+            >
+              <div
+                v-for="(sectionId, sIdx) in localHeaderZoneOrder"
+                :key="sectionId"
+                class="flex flex-col gap-0"
+              >
+                <div class="space-y-0.5">
+                  <StructureSectionRow
+                    :section-id="sectionId"
+                    :label="getSectionDisplayLabel(sectionId)"
+                    :selected="sectionId === selectedSectionId"
+                    :expanded="isExpanded(sectionId)"
+                    :show-expand-icon="canSectionContainBlocks(sectionId)"
+                    drag-handle="header-zone-section"
+                    :disabled="isSectionDisabled(sectionId)"
+                    :can-delete="canDeleteHeaderZoneSection(sectionId)"
+                    :can-toggle-disabled="
+                      isHeaderZoneFixedSection(sectionId) || canDeleteHeaderZoneSection(sectionId)
+                    "
+                    :remove-title="$t('54e3d97e.8e22a6')"
+                    :toggle-title="$t('54e3d97e.b11041')"
+                    @select="$emit('select-section', $event)"
+                    @toggle="$emit('toggle-section', $event)"
+                    @remove="$emit('remove-section', $event)"
+                    @toggle-disabled="$emit('toggle-section-disabled', $event)"
+                  />
+
+                  <draggable
+                    v-if="isExpanded(sectionId) && getBlockOrder(sectionId).length"
+                    v-model="localBlockOrders[sectionId]"
+                    handle="[data-drag-handle='block']"
+                    :options="{ filter: '.sp-structure-insert-gap', preventOnFilter: false }"
+                    @change="handleBlockOrderChange(sectionId)"
+                  >
+                    <div
+                      v-for="(blockId, bIdx) in getBlockOrder(sectionId)"
+                      :key="blockId"
+                      class="flex flex-col gap-0"
+                    >
+                      <StructureInsertPoint
+                        :label="$t('54e3d97e.fc318c')"
+                        :open="isInsertMenuOpen('block', sectionId, bIdx)"
+                        :items="getBlockPickerItems(getSectionType(sectionId))"
+                        :dock-style="insertMenuDockStyle"
+                        block
+                        indent="block"
+                        layer="block"
+                        @open="toggleInsertMenu('block', sectionId, bIdx, $event)"
+                        @select="selectBlockType(sectionId, $event.type)"
+                      />
+                      <StructureBlockRow
+                        :section-id="sectionId"
+                        :block-id="blockId"
+                        :label="getBlockLabel(getSection(sectionId), blockId)"
+                        :selected="sectionId === selectedSectionId && selectedBlockId === blockId"
+                        :disabled="isBlockDisabled(sectionId, blockId)"
+                        :can-delete="canDeleteBlock(sectionId)"
+                        :remove-title="$t('54e3d97e.8e22a6')"
+                        :toggle-title="$t('54e3d97e.b11041')"
+                        @select="$emit('select-block', $event)"
+                        @remove="$emit('remove-block', $event)"
+                        @toggle-disabled="$emit('toggle-block-disabled', $event)"
+                      />
+                    </div>
+                  </draggable>
+
+                  <div v-if="isExpanded(sectionId)">
+                    <StructureAddAction
+                      :visible="getBlockPickerItems(getSectionType(sectionId)).length > 0"
+                      :label="$t('54e3d97e.fc318c')"
+                      :open="isInsertMenuOpen('block', sectionId, getBlockOrder(sectionId).length)"
+                      :items="getBlockPickerItems(getSectionType(sectionId))"
+                      :dock-style="insertMenuDockStyle"
+                      container="block"
+                      flush-start
+                      top-spacing
+                      @open="
+                        toggleInsertMenu(
+                          'block',
+                          sectionId,
+                          getBlockOrder(sectionId).length,
+                          $event
+                        )
+                      "
+                      @select="selectBlockType(sectionId, $event.type)"
+                    />
+                  </div>
+                </div>
+              </div>
+            </draggable>
+
+            <StructureInsertPoint
+              v-show="showHeaderFooterSectionInsertControls"
+              :label="$t('54e3d97e.2e2d33')"
+              :open="isInsertMenuOpen('section', 'header', localHeaderZoneOrder.length)"
+              :items="sectionPickerItemsFor('header')"
+              :dock-style="insertMenuDockStyle"
+              :icon-size="13"
+              show-icons
+              @open="toggleInsertMenu('section', 'header', localHeaderZoneOrder.length, $event)"
+              @select="selectSectionType($event.type)"
+            />
+          </div>
+        </div>
+
+        <div class="mt-3.5 border-t border-[#eef1f5] pt-3.5">
+          <div
+            class="mb-2 px-2 text-[11px] font-semibold leading-4 tracking-[0.06em] text-[#7c8798]"
+          >
+            <span>{{ $t('54e3d97e.cdb7d0') }}</span>
+          </div>
+
+          <draggable
+            v-model="localOrder"
+            handle="[data-drag-handle='section']"
+            class="flex flex-col gap-0"
+            :options="{ filter: '.sp-structure-insert-gap', preventOnFilter: false }"
+            @change="handleOrderChange"
+          >
+            <div
+              v-for="(sectionId, sIdx) in localOrder"
+              :key="sectionId"
+              class="flex flex-col gap-0"
+            >
+              <StructureInsertPoint
+                :label="$t('54e3d97e.2e2d33')"
+                :open="isInsertMenuOpen('section', 'template', sIdx)"
+                :items="sectionPickerItemsFor('template')"
+                :dock-style="insertMenuDockStyle"
+                show-icons
+                @open="toggleInsertMenu('section', 'template', sIdx, $event)"
+                @select="selectSectionType($event.type)"
+              />
+              <div class="space-y-1">
+                <StructureSectionRow
+                  :section-id="sectionId"
+                  :label="getSectionLabel(sectionId)"
+                  :selected="sectionId === selectedSectionId"
+                  :expanded="isExpanded(sectionId)"
+                  :show-expand-icon="canSectionContainBlocks(sectionId)"
+                  drag-handle="section"
+                  :disabled="isSectionDisabled(sectionId)"
+                  :can-delete="canDeletePageSection(sectionId)"
+                  :can-toggle-disabled="canTogglePageSection(sectionId)"
+                  :remove-title="$t('54e3d97e.8e22a6')"
+                  :toggle-title="$t('54e3d97e.b11041')"
+                  @select="$emit('select-section', $event)"
+                  @toggle="$emit('toggle-section', $event)"
+                  @remove="$emit('remove-section', $event)"
+                  @toggle-disabled="$emit('toggle-section-disabled', $event)"
+                />
+
+                <draggable
+                  v-if="isExpanded(sectionId) && getBlockOrder(sectionId).length"
+                  v-model="localBlockOrders[sectionId]"
+                  handle="[data-drag-handle='block']"
+                  :options="{ filter: '.sp-structure-insert-gap', preventOnFilter: false }"
+                  @change="handleBlockOrderChange(sectionId)"
+                >
+                  <div
+                    v-for="(blockId, bIdx) in getBlockOrder(sectionId)"
+                    :key="blockId"
+                    class="flex flex-col gap-0"
+                  >
+                    <StructureInsertPoint
+                      :label="$t('54e3d97e.fc318c')"
+                      :open="isInsertMenuOpen('block', sectionId, bIdx)"
+                      :items="getBlockPickerItems(getSectionType(sectionId))"
+                      :dock-style="insertMenuDockStyle"
+                      block
+                      indent="block"
+                      layer="block"
+                      @open="toggleInsertMenu('block', sectionId, bIdx, $event)"
+                      @select="selectBlockType(sectionId, $event.type)"
+                    />
+                    <StructureBlockRow
+                      :section-id="sectionId"
+                      :block-id="blockId"
+                      :label="getBlockLabel(dsl.sections[sectionId], blockId)"
+                      :selected="sectionId === selectedSectionId && selectedBlockId === blockId"
+                      :disabled="isBlockDisabled(sectionId, blockId)"
+                      :can-delete="canDeleteBlock(sectionId)"
+                      :remove-title="$t('54e3d97e.8e22a6')"
+                      :toggle-title="$t('54e3d97e.b11041')"
+                      @select="$emit('select-block', $event)"
+                      @remove="$emit('remove-block', $event)"
+                      @toggle-disabled="$emit('toggle-block-disabled', $event)"
+                    />
+                  </div>
+                </draggable>
+
+                <div v-if="isExpanded(sectionId)">
+                  <StructureAddAction
+                    :visible="getBlockPickerItems(getSectionType(sectionId)).length > 0"
+                    :label="$t('54e3d97e.fc318c')"
+                    :open="isInsertMenuOpen('block', sectionId, getBlockOrder(sectionId).length)"
+                    :items="getBlockPickerItems(getSectionType(sectionId))"
+                    :dock-style="insertMenuDockStyle"
+                    container="block"
+                    flush-start
+                    top-spacing
+                    @open="
+                      toggleInsertMenu('block', sectionId, getBlockOrder(sectionId).length, $event)
+                    "
+                    @select="selectBlockType(sectionId, $event.type)"
+                  />
+                </div>
+              </div>
+            </div>
+          </draggable>
+
+          <StructureInsertPoint
+            v-if="localOrder.length"
+            :label="$t('54e3d97e.2e2d33')"
+            :open="isInsertMenuOpen('section', 'template', localOrder.length)"
+            :items="sectionPickerItemsFor('template')"
+            :dock-style="insertMenuDockStyle"
+            :icon-size="13"
+            show-icons
+            @open="toggleInsertMenu('section', 'template', localOrder.length, $event)"
+            @select="selectSectionType($event.type)"
+          />
+
+          <StructureAddAction
+            v-if="localOrder.length"
+            :label="$t('54e3d97e.2e2d33')"
+            :open="isInsertMenuOpen('section', 'template', localOrder.length)"
+            :items="sectionPickerItemsFor('template')"
+            :dock-style="insertMenuDockStyle"
+            container="section"
+            show-icons
+            @open="toggleInsertMenu('section', 'template', localOrder.length, $event)"
+            @select="selectSectionType($event.type)"
+          />
+
+          <div
+            v-if="!localOrder.length"
+            class="flex min-h-[180px] flex-col items-center justify-center gap-4 rounded-xl border border-dashed border-[#d7dde7] bg-[#fbfbfc] p-6 text-center text-[#6b7785]"
+          >
+            <span>{{ $t('54e3d97e.bdf5be') }}</span>
+            <StructureAddAction
+              :label="$t('54e3d97e.2e2d33')"
+              :open="isInsertMenuOpen('section', 'template-empty', 0)"
+              :items="sectionPickerItemsFor('template-empty')"
+              :dock-style="insertMenuDockStyle"
+              align="center"
+              container="empty"
+              relaxed
+              show-icons
+              @open="toggleInsertMenu('section', 'template-empty', 0, $event)"
+              @select="selectSectionType($event.type)"
+            />
+          </div>
+        </div>
+
+        <div class="mt-3.5 border-t border-[#eef1f5] pt-3.5">
+          <div
+            class="mb-2 px-2 text-[11px] font-semibold leading-4 tracking-[0.06em] text-[#7c8798]"
+          >
+            <span>{{ $t('54e3d97e.4eb88f') }}</span>
+          </div>
+          <div class="space-y-1">
+            <draggable
+              v-if="localFooterZoneOrder.length"
+              v-model="localFooterZoneOrder"
+              handle="[data-drag-handle='footer-zone-section']"
+              class="flex flex-col gap-0"
+              :options="{ filter: '.sp-structure-insert-gap', preventOnFilter: false }"
+              @change="handleFooterZoneOrderChange"
+            >
+              <div
+                v-for="(sectionId, sIdx) in localFooterZoneOrder"
+                :key="sectionId"
+                class="flex flex-col gap-0"
+              >
+                <StructureInsertPoint
+                  v-show="showHeaderFooterSectionInsertControls"
+                  :label="$t('54e3d97e.2e2d33')"
+                  :open="isInsertMenuOpen('section', 'footer', sIdx)"
+                  :items="sectionPickerItemsFor('footer')"
+                  :dock-style="insertMenuDockStyle"
+                  show-icons
+                  @open="toggleInsertMenu('section', 'footer', sIdx, $event)"
+                  @select="selectSectionType($event.type)"
+                />
+
+                <StructureSectionRow
+                  :section-id="sectionId"
+                  :label="getSectionDisplayLabel(sectionId)"
+                  :selected="selectedSectionId === sectionId"
+                  :expanded="isExpanded(sectionId)"
+                  drag-handle="footer-zone-section"
+                  :disabled="isSectionDisabled(sectionId)"
+                  :can-toggle-disabled="false"
+                  @select="$emit('select-section', $event)"
+                  @toggle="$emit('toggle-section', $event)"
+                />
+
+                <draggable
+                  v-if="isExpanded(sectionId) && getBlockOrder(sectionId).length"
+                  v-model="localBlockOrders[sectionId]"
+                  handle="[data-drag-handle='block']"
+                  :options="{ filter: '.sp-structure-insert-gap', preventOnFilter: false }"
+                  @change="handleBlockOrderChange(sectionId)"
+                >
+                  <div
+                    v-for="(blockId, bIdx) in getBlockOrder(sectionId)"
+                    :key="blockId"
+                    class="flex flex-col gap-0"
+                  >
+                    <StructureInsertPoint
+                      :label="$t('54e3d97e.fc318c')"
+                      :open="isInsertMenuOpen('block', sectionId, bIdx)"
+                      :items="getBlockPickerItems(getSectionType(sectionId))"
+                      :dock-style="insertMenuDockStyle"
+                      block
+                      indent="block"
+                      layer="block"
+                      @open="toggleInsertMenu('block', sectionId, bIdx, $event)"
+                      @select="selectBlockType(sectionId, $event.type)"
+                    />
+                    <StructureBlockRow
+                      :section-id="sectionId"
+                      :block-id="blockId"
+                      :label="getBlockLabel(getSection(sectionId), blockId)"
+                      :selected="selectedSectionId === sectionId && selectedBlockId === blockId"
+                      :disabled="isBlockDisabled(sectionId, blockId)"
+                      :can-delete="false"
+                      :toggle-title="$t('54e3d97e.b11041')"
+                      @select="$emit('select-block', $event)"
+                      @toggle-disabled="$emit('toggle-block-disabled', $event)"
+                    />
+                  </div>
+                </draggable>
+
+                <div v-if="isExpanded(sectionId)">
+                  <StructureAddAction
+                    :visible="getBlockPickerItems(getSectionType(sectionId)).length > 0"
+                    :label="$t('54e3d97e.fc318c')"
+                    :open="isInsertMenuOpen('block', sectionId, getBlockOrder(sectionId).length)"
+                    :items="getBlockPickerItems(getSectionType(sectionId))"
+                    :dock-style="insertMenuDockStyle"
+                    container="block"
+                    top-spacing
+                    @open="
+                      toggleInsertMenu('block', sectionId, getBlockOrder(sectionId).length, $event)
+                    "
+                    @select="selectBlockType(sectionId, $event.type)"
+                  />
+                </div>
+              </div>
+            </draggable>
+
+            <StructureSectionRow
+              section-id="footer"
+              :label="$t('54e3d97e.4eb88f')"
+              :selected="selectedSectionId === 'footer'"
+              :expanded="isExpanded('footer')"
+              :show-expand-icon="canSectionContainBlocks('footer')"
+              :disabled="isSectionDisabled('footer')"
+              :toggle-title="$t('54e3d97e.b11041')"
+              @select="$emit('select-section', $event)"
+              @toggle="$emit('toggle-section', $event)"
+              @toggle-disabled="$emit('toggle-section-disabled', $event)"
+            />
+
+            <draggable
+              v-if="isExpanded('footer') && footerBlockOrder.length"
+              v-model="localBlockOrders.footer"
+              handle="[data-drag-handle='block']"
+              :options="{ filter: '.sp-structure-insert-gap', preventOnFilter: false }"
+              @change="handleBlockOrderChange('footer')"
+            >
+              <div
+                v-for="(blockId, bIdx) in footerBlockOrder"
+                :key="blockId"
+                class="flex flex-col gap-0"
+              >
+                <StructureInsertPoint
+                  :label="$t('54e3d97e.fc318c')"
+                  :open="isInsertMenuOpen('block', 'footer', bIdx)"
+                  :items="footerBlockPickerItems"
+                  :dock-style="insertMenuDockStyle"
+                  block
+                  indent="block"
+                  layer="block"
+                  @open="toggleInsertMenu('block', 'footer', bIdx, $event)"
+                  @select="selectBlockType('footer', $event.type)"
+                />
+                <StructureBlockRow
+                  section-id="footer"
+                  :block-id="blockId"
+                  :label="getBlockLabel(footerSection, blockId)"
+                  :selected="selectedSectionId === 'footer' && selectedBlockId === blockId"
+                  :disabled="isBlockDisabled('footer', blockId)"
+                  :can-delete="canDeleteBlock('footer')"
+                  :remove-title="$t('54e3d97e.8e22a6')"
+                  :toggle-title="$t('54e3d97e.b11041')"
+                  @select="$emit('select-block', $event)"
+                  @remove="$emit('remove-block', $event)"
+                  @toggle-disabled="$emit('toggle-block-disabled', $event)"
+                />
+              </div>
+            </draggable>
+
+            <div v-if="isExpanded('footer')">
+              <StructureAddAction
+                :visible="footerBlockPickerItems.length > 0"
+                :label="$t('54e3d97e.fc318c')"
+                :open="isInsertMenuOpen('block', 'footer', footerBlockOrder.length)"
+                :items="footerBlockPickerItems"
+                :dock-style="insertMenuDockStyle"
+                container="block"
+                top-spacing
+                @open="toggleInsertMenu('block', 'footer', footerBlockOrder.length, $event)"
+                @select="selectBlockType('footer', $event.type)"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import StructureInsertPoint from './StructureInsertPoint.vue'
+import StructureBlockRow from './StructureBlockRow.vue'
+import StructureSectionRow from './StructureSectionRow.vue'
+import StructureAddAction from './StructureAddAction.vue'
+
+import { getTypedBlockDefinition as getBlockDefinition } from '../definitions/registry.js'
+import {
+  createSectionPickerItems,
+  createSectionPickerItemsForTypes,
+  createBlockPickerItems
+} from '../utils/insertPicker.js'
+import { getAreaSectionInsertPolicy } from '../definitions/areas.js'
+
+export default {
+  name: 'StructurePanel',
+  components: {
+    draggable,
+    StructureInsertPoint,
+    StructureBlockRow,
+    StructureSectionRow,
+    StructureAddAction
+  },
+  props: {
+    dsl: {
+      type: Object,
+      required: true
+    },
+    headerDsl: {
+      type: Object,
+      default: () => ({})
+    },
+    footerDsl: {
+      type: Object,
+      default: () => ({})
+    },
+    sectionDefinitions: {
+      type: Array,
+      default: () => []
+    },
+    expandedSectionIds: {
+      type: Array,
+      default: () => []
+    },
+    selectedSectionId: {
+      type: String,
+      default: ''
+    },
+    selectedBlockId: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      localOrder: [],
+      /** 全局标头区顺序，与 headerDsl.order 同步，可拖拽 */
+      localHeaderZoneOrder: [],
+      /** 全局页脚区附加分区顺序，不含固定 footer */
+      localFooterZoneOrder: [],
+      localBlockOrders: {
+        header: [],
+        footer: []
+      },
+      openInsertMenu: {
+        kind: '',
+        sectionId: '',
+        insertIndex: null
+      },
+      /** 插入菜单：fixed 定位（结构树右侧），由锚点 getBoundingClientRect 计算 */
+      insertMenuAnchorEl: null,
+      insertMenuDockStyle: {},
+      /** MVP 阶段隐藏标头/页脚区域添加分区入口，后续需要时可切回 true */
+      showHeaderFooterSectionInsertControls: false
+    }
+  },
+  computed: {
+    footerSection() {
+      return this.footerDsl.sections?.footer || null
+    },
+    footerBlockOrder() {
+      return this.localBlockOrders.footer || []
+    },
+    footerBlockPickerItems() {
+      return createBlockPickerItems('footer')
+    }
+  },
+  watch: {
+    'dsl.order': {
+      immediate: true,
+      deep: true,
+      handler(value) {
+        this.localOrder = Array.isArray(value) ? value.slice() : []
+      }
+    },
+    dsl: {
+      immediate: true,
+      deep: true,
+      handler() {
+        this.syncBlockOrders()
+      }
+    },
+    headerDsl: {
+      immediate: true,
+      deep: true,
+      handler() {
+        this.syncHeaderZoneOrderFromHeader()
+      }
+    },
+    footerDsl: {
+      immediate: true,
+      deep: true,
+      handler() {
+        this.syncFooterZoneOrderFromFooter()
+      }
+    }
+  },
+  beforeDestroy() {
+    this.clearInsertMenuAnchor()
+  },
+  methods: {
+    syncHeaderZoneOrderFromHeader() {
+      const order = this.headerDsl?.order
+      if (!Array.isArray(order) || !order.length) {
+        this.localHeaderZoneOrder = ['header']
+        return
+      }
+      this.localHeaderZoneOrder = order.filter((id) => id !== 'footer').slice()
+    },
+    syncFooterZoneOrderFromFooter() {
+      const order = this.footerDsl?.order
+      this.localFooterZoneOrder = Array.isArray(order)
+        ? order.filter((id) => id !== 'footer').slice()
+        : []
+    },
+    emitGlobalZoneOrder() {
+      this.$emit('reorder-global-sections', [
+        ...this.localHeaderZoneOrder.slice(),
+        ...this.localFooterZoneOrder.slice(),
+        'footer'
+      ])
+    },
+    handleHeaderZoneOrderChange() {
+      this.emitGlobalZoneOrder()
+    },
+    handleFooterZoneOrderChange() {
+      this.emitGlobalZoneOrder()
+    },
+    isHeaderZoneFixedSection(sectionId) {
+      return sectionId === 'header'
+    },
+    canDeleteHeaderZoneSection(sectionId) {
+      if (sectionId === 'header' || sectionId === 'footer') return false
+      return this.getSectionType(sectionId) === 'announcement-bar'
+    },
+    isLockedSection(sectionId) {
+      const section = this.getSection(sectionId)
+      return Boolean(
+        section?.locked === true ||
+          section?.settings?.locked === true ||
+          section?.type === 'native-product-list'
+      )
+    },
+    canDeletePageSection(sectionId) {
+      return !this.isLockedSection(sectionId)
+    },
+    canTogglePageSection(sectionId) {
+      return !this.isLockedSection(sectionId)
+    },
+    sectionPickerItemsFor(anchor) {
+      const cfg = getAreaSectionInsertPolicy(anchor)
+      if (cfg.types == null) {
+        return createSectionPickerItems(this.sectionDefinitions)
+      }
+      return createSectionPickerItemsForTypes(cfg.types)
+    },
+    syncBlockOrders() {
+      const nextBlockOrders = {}
+      Object.keys(this.headerDsl.sections || {}).forEach((sectionId) => {
+        nextBlockOrders[sectionId] = this.headerDsl.sections?.[sectionId]?.blockOrder?.slice() || []
+      })
+      Object.keys(this.footerDsl.sections || {}).forEach((sectionId) => {
+        nextBlockOrders[sectionId] = this.footerDsl.sections?.[sectionId]?.blockOrder?.slice() || []
+      })
+      Object.keys(this.dsl.sections || {}).forEach((sectionId) => {
+        nextBlockOrders[sectionId] = this.dsl.sections[sectionId].blockOrder?.slice() || []
+      })
+      this.localBlockOrders = nextBlockOrders
+    },
+    isExpanded(sectionId) {
+      return this.expandedSectionIds.includes(sectionId)
+    },
+    isInsertMenuOpen(kind, sectionId = '', insertIndex = null) {
+      if (this.openInsertMenu.kind !== kind) return false
+      if (kind === 'block') {
+        return (
+          this.openInsertMenu.sectionId === sectionId &&
+          this.openInsertMenu.insertIndex === insertIndex
+        )
+      }
+      if (kind === 'section') {
+        return (
+          this.openInsertMenu.sectionId === sectionId &&
+          this.openInsertMenu.insertIndex === insertIndex
+        )
+      }
+      return false
+    },
+    toggleInsertMenu(kind, sectionId = '', insertIndexArg = undefined, event) {
+      if (kind === 'block') {
+        const idx =
+          typeof insertIndexArg === 'number' && !Number.isNaN(insertIndexArg)
+            ? insertIndexArg
+            : null
+        if (this.isInsertMenuOpen('block', sectionId, idx)) {
+          this.closeInsertMenu()
+          return
+        }
+        this.openInsertMenu = { kind: 'block', sectionId, insertIndex: idx }
+        this.setInsertMenuAnchor(event)
+        return
+      }
+      if (kind === 'section') {
+        const anchor = sectionId || 'header'
+        let idx
+        if (typeof insertIndexArg === 'number' && !Number.isNaN(insertIndexArg)) {
+          idx = insertIndexArg
+        } else if (anchor === 'header') {
+          idx = this.localHeaderZoneOrder.length
+        } else if (anchor === 'template-empty') {
+          idx = 0
+        } else {
+          idx = this.localOrder.length
+        }
+        if (this.isInsertMenuOpen('section', anchor, idx)) {
+          this.closeInsertMenu()
+          return
+        }
+        this.openInsertMenu = { kind: 'section', sectionId: anchor, insertIndex: idx }
+        this.setInsertMenuAnchor(event)
+      }
+    },
+    setInsertMenuAnchor(event) {
+      const el = event && event.currentTarget
+      this.insertMenuAnchorEl = el && el.nodeType === 1 ? el : null
+      this.bindInsertMenuPositionListeners()
+      this.bindInsertMenuClickOutside()
+      this.$nextTick(() => this.updateInsertMenuPosition())
+    },
+    updateInsertMenuPosition() {
+      const el = this.insertMenuAnchorEl
+      if (!el || typeof el.getBoundingClientRect !== 'function') {
+        this.insertMenuDockStyle = {}
+        return
+      }
+      const r = el.getBoundingClientRect()
+      const root = this.$el
+      const rootRect =
+        root && typeof root.getBoundingClientRect === 'function' ? root.getBoundingClientRect() : r
+      const gap = 8
+      const menuW = 208
+      // 图2：面板左缘与结构侧栏右边界（分割线）对齐，整体落在预览区一侧
+      let left = rootRect.right + gap
+      const vw = typeof window !== 'undefined' ? window.innerWidth : 1200
+      const vh = typeof window !== 'undefined' ? window.innerHeight : 800
+      if (left + menuW > vw - gap) {
+        left = Math.max(gap, vw - menuW - gap)
+      }
+      const pad = 8
+      const minBottomReserve = 120
+      let topPx = r.top
+      topPx = Math.max(pad, Math.min(vh - pad - minBottomReserve, topPx))
+      this.insertMenuDockStyle = {
+        position: 'fixed',
+        top: `${Math.round(topPx)}px`,
+        left: `${Math.round(left)}px`,
+        zIndex: 4000
+      }
+    },
+    bindInsertMenuPositionListeners() {
+      if (this._insertMenuListenersBound) return
+      this._onInsertMenuViewport = () => {
+        if (!this.openInsertMenu.kind) return
+        this.updateInsertMenuPosition()
+      }
+      window.addEventListener('resize', this._onInsertMenuViewport)
+      window.addEventListener('scroll', this._onInsertMenuViewport, true)
+      this._insertMenuScrollEl = this.$el && this.$el.querySelector('.sp-structure-scroll')
+      if (this._insertMenuScrollEl) {
+        this._insertMenuScrollEl.addEventListener('scroll', this._onInsertMenuViewport, true)
+      }
+      this._insertMenuListenersBound = true
+    },
+    unbindInsertMenuPositionListeners() {
+      if (!this._insertMenuListenersBound || !this._onInsertMenuViewport) return
+      window.removeEventListener('resize', this._onInsertMenuViewport)
+      window.removeEventListener('scroll', this._onInsertMenuViewport, true)
+      if (this._insertMenuScrollEl) {
+        this._insertMenuScrollEl.removeEventListener('scroll', this._onInsertMenuViewport, true)
+        this._insertMenuScrollEl = null
+      }
+      this._onInsertMenuViewport = null
+      this._insertMenuListenersBound = false
+    },
+    clearInsertMenuAnchor() {
+      this.insertMenuAnchorEl = null
+      this.insertMenuDockStyle = {}
+      this.unbindInsertMenuPositionListeners()
+      this.unbindInsertMenuClickOutside()
+    },
+    bindInsertMenuClickOutside() {
+      if (this._insertMenuClickOutsideBound) return
+      this._onInsertMenuClickOutside = (e) => {
+        if (!this.openInsertMenu.kind) return
+        const t = e.target
+        const root = this.$el
+        const panel = root && root.querySelector && root.querySelector('.sp-structure-insert-menu')
+        if (panel && panel.contains(t)) return
+        if (this.insertMenuAnchorEl && this.insertMenuAnchorEl.contains(t)) return
+        this.closeInsertMenu()
+      }
+      document.addEventListener('click', this._onInsertMenuClickOutside, false)
+      this._insertMenuClickOutsideBound = true
+    },
+    unbindInsertMenuClickOutside() {
+      if (!this._insertMenuClickOutsideBound || !this._onInsertMenuClickOutside) return
+      document.removeEventListener('click', this._onInsertMenuClickOutside, false)
+      this._onInsertMenuClickOutside = null
+      this._insertMenuClickOutsideBound = false
+    },
+    closeInsertMenu() {
+      this.clearInsertMenuAnchor()
+      this.openInsertMenu = { kind: '', sectionId: '', insertIndex: null }
+    },
+    selectSectionType(type) {
+      const anchor = this.openInsertMenu.sectionId
+      const idx = this.openInsertMenu.insertIndex
+      const cfg = getAreaSectionInsertPolicy(anchor)
+      if (cfg.mutation === 'global' || cfg.mutation === 'footer') {
+        this.$emit('add-global-section', {
+          type,
+          area: cfg.mutation,
+          index: typeof idx === 'number' ? idx : undefined
+        })
+      } else {
+        this.$emit('add-section', {
+          type,
+          index: typeof idx === 'number' ? idx : undefined
+        })
+      }
+      this.closeInsertMenu()
+    },
+    selectBlockType(sectionId, blockType) {
+      const idx = this.openInsertMenu.insertIndex
+      this.$emit('add-block', {
+        sectionId,
+        blockType,
+        index: typeof idx === 'number' && !Number.isNaN(idx) ? idx : undefined
+      })
+      this.closeInsertMenu()
+    },
+    getSectionLabel(sectionId) {
+      return this.getSectionDisplayLabel(sectionId)
+    },
+    getSectionType(sectionId) {
+      return this.getSection(sectionId)?.type || ''
+    },
+    isSectionDisabled(sectionId) {
+      return Boolean(this.getSection(sectionId)?.disabled)
+    },
+    canSectionContainBlocks(sectionId) {
+      return this.getBlockPickerItems(this.getSectionType(sectionId)).length > 0
+    },
+    isBlockDisabled(sectionId, blockId) {
+      const section = this.getSection(sectionId)
+      return Boolean(section?.blocks?.[blockId]?.disabled)
+    },
+    canDeleteBlock(sectionId) {
+      return (this.getBlockOrder(sectionId) || []).length > 1
+    },
+    getSection(sectionId) {
+      return (
+        this.headerDsl.sections?.[sectionId] ||
+        this.footerDsl.sections?.[sectionId] ||
+        this.dsl.sections?.[sectionId] ||
+        null
+      )
+    },
+    getSectionDisplayLabel(sectionId) {
+      const section = this.getSection(sectionId)
+      if (!section) return ''
+      return section.title || ''
+    },
+    getBlockPickerItems(sectionType) {
+      if (sectionType === 'footer') {
+        return createBlockPickerItems(sectionType).filter((item) =>
+          ['footer-menu', 'footer-image', 'footer-text'].includes(item.type)
+        )
+      }
+      return createBlockPickerItems(sectionType)
+    },
+    getBlockOrder(sectionId) {
+      return this.localBlockOrders[sectionId] || []
+    },
+    getBlockLabel(section, blockId) {
+      const block = section?.blocks?.[blockId]
+      if (!block) return ''
+      const definition = getBlockDefinition(block.type)
+      return block.title || definition?.name || block.type || ''
+    },
+    handleOrderChange() {
+      this.$emit('reorder-sections', this.localOrder.slice())
+    },
+    handleBlockOrderChange(sectionId) {
+      this.$emit('reorder-blocks', {
+        sectionId,
+        blockOrder: this.getBlockOrder(sectionId).slice()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 结构树选中行：主题辅色（--secondary）半透明填充，圆角继承自 rounded-lg */
+.sp-structure-row-selected {
+  background-color: color-mix(in srgb, hsl(var(--secondary)) 16%, transparent);
+}
+
+.sp-structure-row-selected:hover {
+  background-color: color-mix(in srgb, hsl(var(--secondary)) 22%, transparent);
+}
+</style>
diff --git a/src/components/sp-web-decoration/components/StructureSectionRow.vue b/src/components/sp-web-decoration/components/StructureSectionRow.vue
new file mode 100644
index 0000000..8606e80
--- /dev/null
+++ b/src/components/sp-web-decoration/components/StructureSectionRow.vue
@@ -0,0 +1,160 @@
+<template>
+  <div
+    :class="[
+      'group flex w-full cursor-pointer items-center gap-2 rounded-lg border-0 bg-transparent px-2 py-[7px] transition-colors duration-150 hover:bg-[rgba(24,34,47,0.04)]',
+      { 'sp-structure-row-selected': selected }
+    ]"
+    @click="$emit('select', sectionId)"
+  >
+    <button
+      v-if="expandable && showExpandIcon"
+      type="button"
+      class="flex h-[18px] w-[18px] shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent p-0 text-[#6b7785]"
+      @click.stop="$emit('toggle', sectionId)"
+    >
+      <ChevronDown v-if="expanded" :size="14" :stroke-width="2" />
+      <ChevronRight v-else :size="14" :stroke-width="2" />
+    </button>
+
+    <span
+      v-else-if="expandable"
+      class="flex h-[18px] w-[18px] shrink-0 items-center justify-center opacity-0"
+      aria-hidden="true"
+    />
+
+    <span
+      v-else-if="dragHandle"
+      :data-drag-handle="dragHandle"
+      class="inline-flex h-[18px] w-[18px] shrink-0 cursor-move items-center justify-center text-[#6b7785]"
+    >
+      <GripVertical :size="14" :stroke-width="2" />
+    </span>
+
+    <div class="min-w-0 flex-1 flex items-center">
+      <div
+        class="inline-flex items-center gap-1.5 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold text-[#18222f]"
+      >
+        <span class="relative inline-flex h-[18px] w-[18px] shrink-0 items-center justify-center">
+          <GalleryVertical
+            :size="16"
+            class="shrink-0 text-[#475467] opacity-100 transition-opacity duration-150 group-hover:pointer-events-none group-hover:opacity-0"
+            :stroke-width="2"
+          />
+          <span
+            :data-drag-handle="dragHandle || null"
+            class="pointer-events-none absolute inset-0 inline-flex cursor-move items-center justify-center text-[#6b7785] opacity-0 transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100"
+            aria-hidden="true"
+          >
+            <GripVertical :size="14" :stroke-width="2" />
+          </span>
+        </span>
+        {{ label }}
+      </div>
+    </div>
+
+    <div
+      v-if="showActions"
+      class="flex shrink-0 items-center gap-0.5 opacity-0 pointer-events-none transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100"
+    >
+      <button
+        v-if="canDelete"
+        type="button"
+        class="inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-[#98a2b3] transition-colors duration-150 hover:bg-[#e8eef6]"
+        :title="removeTitle"
+        @click.stop="$emit('remove', sectionId)"
+      >
+        <Trash2 :size="16" :stroke-width="2" />
+      </button>
+      <button
+        v-if="canToggleDisabled"
+        type="button"
+        class="inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-0 text-[#6b7785] transition-colors duration-150 hover:bg-[#e8eef6]"
+        :title="toggleTitle"
+        @click.stop="$emit('toggle-disabled', sectionId)"
+      >
+        <EyeOff v-if="disabled" :size="18" :stroke-width="2" />
+        <Eye v-else :size="18" :stroke-width="2" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  ChevronDown,
+  ChevronRight,
+  Eye,
+  EyeOff,
+  GalleryVertical,
+  GripVertical,
+  Trash2
+} from 'lucide-vue'
+
+export default {
+  name: 'StructureSectionRow',
+  components: {
+    ChevronDown,
+    ChevronRight,
+    Eye,
+    EyeOff,
+    GalleryVertical,
+    GripVertical,
+    Trash2
+  },
+  props: {
+    sectionId: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    selected: {
+      type: Boolean,
+      default: false
+    },
+    expanded: {
+      type: Boolean,
+      default: false
+    },
+    expandable: {
+      type: Boolean,
+      default: true
+    },
+    showExpandIcon: {
+      type: Boolean,
+      default: true
+    },
+    dragHandle: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    canDelete: {
+      type: Boolean,
+      default: false
+    },
+    canToggleDisabled: {
+      type: Boolean,
+      default: true
+    },
+    removeTitle: {
+      type: String,
+      default: ''
+    },
+    toggleTitle: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    showActions() {
+      return this.canDelete || this.canToggleDisabled
+    }
+  }
+}
+</script>
diff --git a/src/components/sp-web-decoration/definitions/areas.js b/src/components/sp-web-decoration/definitions/areas.js
new file mode 100644
index 0000000..4e72582
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/areas.js
@@ -0,0 +1,38 @@
+import headerArea from './areas/header.js'
+import templateArea from './areas/template.js'
+import footerArea from './areas/footer.js'
+
+const areaDefinitions = {
+  header: headerArea,
+  template: templateArea,
+  'template-empty': templateArea,
+  footer: footerArea
+}
+
+export function getAreaDefinition(areaType) {
+  return areaDefinitions[areaType] || null
+}
+
+export function getAreaSectionInsertPolicy(areaType) {
+  const definition = getAreaDefinition(areaType)
+  if (!definition) {
+    return {
+      types: [],
+      mutation: 'page'
+    }
+  }
+  return {
+    types: definition.allowedSections.slice(),
+    mutation: definition.mutation
+  }
+}
+
+export function getAreaDefinitions() {
+  return { ...areaDefinitions }
+}
+
+export default {
+  getAreaDefinition,
+  getAreaSectionInsertPolicy,
+  getAreaDefinitions
+}
diff --git a/src/components/sp-web-decoration/definitions/areas/footer.js b/src/components/sp-web-decoration/definitions/areas/footer.js
new file mode 100644
index 0000000..2feb3d5
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/areas/footer.js
@@ -0,0 +1,7 @@
+export default {
+  type: 'footer',
+  dslKey: 'footerDsl',
+  allowedSections: [],
+  fixedSections: ['footer'],
+  mutation: 'footer'
+}
diff --git a/src/components/sp-web-decoration/definitions/areas/header.js b/src/components/sp-web-decoration/definitions/areas/header.js
new file mode 100644
index 0000000..175c6d0
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/areas/header.js
@@ -0,0 +1,8 @@
+export default {
+  type: 'header',
+  dslKey: 'headerDsl',
+  // allowedSections: ['announcement-bar'],
+  allowedSections: [],
+  fixedSections: ['header'],
+  mutation: 'global'
+}
diff --git a/src/components/sp-web-decoration/definitions/areas/template.js b/src/components/sp-web-decoration/definitions/areas/template.js
new file mode 100644
index 0000000..da0831c
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/areas/template.js
@@ -0,0 +1,7 @@
+export default {
+  type: 'template',
+  dslKey: 'dsl',
+  allowedSections: ['main-carousel', 'image-hotspot', 'product-tab-shelf'],
+  fixedSections: [],
+  mutation: 'page'
+}
diff --git a/src/components/sp-web-decoration/definitions/blocks/announcement.js b/src/components/sp-web-decoration/definitions/blocks/announcement.js
new file mode 100644
index 0000000..2098d86
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/blocks/announcement.js
@@ -0,0 +1,9 @@
+import { i18n } from '@/i18n'
+
+export default {
+  type: 'announcement',
+  name: i18n.t('d65dbcac.fa86f1'),
+  defaultSettings: {
+    text: ''
+  }
+}
diff --git a/src/components/sp-web-decoration/definitions/blocks/footer-image.js b/src/components/sp-web-decoration/definitions/blocks/footer-image.js
new file mode 100644
index 0000000..4657e3f
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/blocks/footer-image.js
@@ -0,0 +1,13 @@
+import { i18n } from '@/i18n'
+
+export default {
+  type: 'footer-image',
+  name: '图片',
+  defaultSettings: {
+    image: '',
+    alignment: 'left',
+    width: '100',
+    radius: 'medium',
+    column_span: 4
+  }
+}
diff --git a/src/components/sp-web-decoration/definitions/blocks/footer-link.js b/src/components/sp-web-decoration/definitions/blocks/footer-link.js
new file mode 100644
index 0000000..b00635b
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/blocks/footer-link.js
@@ -0,0 +1,9 @@
+import { i18n } from '@/i18n'
+export default {
+  type: 'footer-link',
+  name: i18n.t('d65dbcac.406baf'),
+  defaultSettings: {
+    label: '',
+    url: '/help'
+  }
+}
diff --git a/src/components/sp-web-decoration/definitions/blocks/footer-menu.js b/src/components/sp-web-decoration/definitions/blocks/footer-menu.js
new file mode 100644
index 0000000..26f8666
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/blocks/footer-menu.js
@@ -0,0 +1,13 @@
+import { i18n } from '@/i18n'
+
+export default {
+  type: 'footer-menu',
+  name: '菜单',
+  defaultSettings: {
+    title: '',
+    menu: null,
+    size: 'small',
+    alignment: 'left',
+    column_span: 3
+  }
+}
diff --git a/src/components/sp-web-decoration/definitions/blocks/footer-text.js b/src/components/sp-web-decoration/definitions/blocks/footer-text.js
new file mode 100644
index 0000000..bf393f4
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/blocks/footer-text.js
@@ -0,0 +1,14 @@
+import { i18n } from '@/i18n'
+
+export default {
+  type: 'footer-text',
+  name: '文本',
+  defaultSettings: {
+    title: '',
+    content: '',
+    title_size: 'medium',
+    content_size: 'small',
+    alignment: 'left',
+    column_span: 6
+  }
+}
diff --git a/src/components/sp-web-decoration/definitions/blocks/header-collection-product-list.js b/src/components/sp-web-decoration/definitions/blocks/header-collection-product-list.js
new file mode 100644
index 0000000..8b04be0
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/blocks/header-collection-product-list.js
@@ -0,0 +1,17 @@
+import { i18n } from '@/i18n'
+
+export default {
+  type: 'header_collection_product_list',
+  name: '产品系列菜单',
+  defaultSettings: {
+    title: '',
+    link: '',
+    columns_desktop: 4,
+    full_width: false,
+    show_discount: false,
+    image_ratio: 'adapt',
+    show_secondary_image: false,
+    color_mode: 'light',
+    color_style: 'pure'
+  }
+}
diff --git a/src/components/sp-web-decoration/definitions/blocks/header-product-list.js b/src/components/sp-web-decoration/definitions/blocks/header-product-list.js
new file mode 100644
index 0000000..f2528bd
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/blocks/header-product-list.js
@@ -0,0 +1,17 @@
+import { i18n } from '@/i18n'
+
+export default {
+  type: 'header_product_list',
+  name: '产品菜单',
+  defaultSettings: {
+    title: '',
+    link: '',
+    columns_desktop: 4,
+    full_width: false,
+    show_discount: false,
+    image_ratio: 'square',
+    show_secondary_image: false,
+    color_mode: 'light',
+    color_style: 'pure'
+  }
+}
diff --git a/src/components/sp-web-decoration/definitions/blocks/hotspot.js b/src/components/sp-web-decoration/definitions/blocks/hotspot.js
new file mode 100644
index 0000000..456431f
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/blocks/hotspot.js
@@ -0,0 +1,12 @@
+import { i18n } from '@/i18n'
+
+export default {
+  type: 'hotspot',
+  name: i18n.t('d65dbcac.50da72'),
+  defaultSettings: {
+    label: '',
+    x: 0,
+    y: 0,
+    link: ''
+  }
+}
diff --git a/src/components/sp-web-decoration/definitions/blocks/image.js b/src/components/sp-web-decoration/definitions/blocks/image.js
new file mode 100644
index 0000000..a55d9ea
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/blocks/image.js
@@ -0,0 +1,26 @@
+import { i18n } from '@/i18n'
+
+export default {
+  type: 'image',
+  name: '图片',
+  defaultSettings: {
+    pc_image: '',
+    mobile_image: '',
+    introduction: '提供背景或介绍，吸引用户注意',
+    introduction_size: 's',
+    heading: '关键主题或焦点，简明直接',
+    heading_size: 'm',
+    description: '简要概述幻灯片内容，突出重点',
+    description_size: 's',
+    button_text: '按钮文字',
+    button_size: 'large',
+    button_style: 'primary',
+    button_scheme: 'brand',
+    content_alignment: 'left',
+    content_layout: 'top-left',
+    image_opacity: 20,
+    color_mode: 'light',
+    enable_card: false,
+    color_style: 'pure'
+  }
+}
diff --git a/src/components/sp-web-decoration/definitions/blocks/mega-menu.js b/src/components/sp-web-decoration/definitions/blocks/mega-menu.js
new file mode 100644
index 0000000..09bab5c
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/blocks/mega-menu.js
@@ -0,0 +1,21 @@
+import { i18n } from '@/i18n'
+
+export default {
+  type: 'mega_menu',
+  name: '超级菜单',
+  defaultSettings: {
+    mega_menu_item: '',
+    alignment: 'page',
+    image_position: 'right',
+    image_length: 'one',
+    enable_image_1_link: false,
+    enable_image_2_link: false,
+    enable_image_3_link: false,
+    image_layout: 'outside',
+    image_content_alignment: 'center',
+    image_ratio: 1,
+    image_shape: 'none',
+    color_mode: 'light',
+    color_style: 'pure'
+  }
+}
diff --git a/src/components/sp-web-decoration/definitions/blocks/product-tab.js b/src/components/sp-web-decoration/definitions/blocks/product-tab.js
new file mode 100644
index 0000000..9d4293c
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/blocks/product-tab.js
@@ -0,0 +1,9 @@
+export default {
+  type: 'product-tab',
+  name: '产品系列',
+  defaultSettings: {
+    tab_label: '产品系列',
+    product_ids: [],
+    limit: 8
+  }
+}
diff --git a/src/components/sp-web-decoration/definitions/blocks/video.js b/src/components/sp-web-decoration/definitions/blocks/video.js
new file mode 100644
index 0000000..c560ed7
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/blocks/video.js
@@ -0,0 +1,27 @@
+import { i18n } from '@/i18n'
+
+export default {
+  type: 'video',
+  name: i18n.t('bdd52c70.7fcf42'),
+  defaultSettings: {
+    videoUrl: '',
+    posterUrl: '',
+    mobileVideoUrl: '',
+    introduction: '<div>1231231</div>',
+    introduction_size: 'l',
+    heading: '关键主题或焦点，简明直接',
+    heading_size: 'm',
+    description: '简要概述幻灯片内容，突出重点',
+    description_size: 'm',
+    button_text: '按钮文字',
+    button_size: 'small',
+    button_style: 'primary',
+    button_scheme: 'brand',
+    content_alignment: 'left',
+    content_layout: 'middle-left',
+    image_opacity: 15,
+    color_mode: 'light',
+    enable_card: true,
+    color_style: 'pure'
+  }
+}
diff --git a/src/components/sp-web-decoration/definitions/documents/custom.js b/src/components/sp-web-decoration/definitions/documents/custom.js
new file mode 100644
index 0000000..1a6dade
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/documents/custom.js
@@ -0,0 +1,39 @@
+import { createTypedSection } from '../factory.js'
+
+const customDocument = {
+  type: 'custom',
+  sections: [
+    {
+      type: 'image-hotspot'
+    }
+  ]
+}
+
+export function createCustomDocumentDsl({ pageId = '', scene = '1001' } = {}) {
+  const sections = {}
+  const order = []
+
+  ;(customDocument.sections || []).forEach((item) => {
+    if (!item?.type) return
+    const section = createTypedSection(item.type, {
+      fixedId: item.fixedId,
+      settings: item.settings,
+      blocks: item.blocks
+    })
+    sections[section.id] = section
+    order.push(section.id)
+  })
+
+  return {
+    pageType: 'custom',
+    pageId: String(pageId || ''),
+    sections,
+    order,
+    meta: {
+      version: 1,
+      scene
+    }
+  }
+}
+
+export default customDocument
diff --git a/src/components/sp-web-decoration/definitions/documents/footer.js b/src/components/sp-web-decoration/definitions/documents/footer.js
new file mode 100644
index 0000000..6a45032
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/documents/footer.js
@@ -0,0 +1,106 @@
+import { createTypedSection } from '../factory.js'
+
+const footerDocument = {
+  type: 'footer',
+  sections: [
+    {
+      type: 'footer',
+      fixedId: 'footer',
+      blocks: [
+        {
+          type: 'footer-text',
+          settings: {
+            title: '品牌介绍',
+            content:
+              '<p><strong>关于我们的品牌</strong></p><p>我们专注于提供高品质商品与贴心服务，为每一次购物带来更好的体验。</p>',
+            column_span: 4
+          }
+        },
+        {
+          type: 'footer-menu',
+          settings: {
+            title: '购物指南',
+            menu: null,
+            menu_items: [
+              { label: '新品上市', url: '#' },
+              { label: '热销商品', url: '#' },
+              { label: '产品系列', url: '#' },
+              { label: '优惠活动', url: '#' }
+            ],
+            column_span: 2
+          }
+        },
+        {
+          type: 'footer-menu',
+          settings: {
+            title: '关于我们',
+            menu: null,
+            menu_items: [
+              { label: '品牌故事', url: '#' },
+              { label: '加入我们', url: '#' },
+              { label: '新闻资讯', url: '#' },
+              { label: '可持续发展', url: '#' }
+            ],
+            column_span: 2
+          }
+        },
+        {
+          type: 'footer-menu',
+          settings: {
+            title: '客户服务',
+            menu: null,
+            menu_items: [
+              { label: '联系我们', url: '#' },
+              { label: '退换货说明', url: '#' },
+              { label: '服务条款', url: '#' },
+              { label: '配送政策', url: '#' }
+            ],
+            column_span: 2
+          }
+        },
+        {
+          type: 'footer-text',
+          settings: {
+            title: '订阅我们的电子邮件',
+            content: '<p>请留下您的邮箱以获取最新资讯。</p>',
+            column_span: 4
+          }
+        },
+        {
+          type: 'footer-image',
+          settings: {
+            image: '',
+            link: '',
+            alt: '页脚图片',
+            column_span: 12
+          }
+        }
+      ]
+    }
+  ]
+}
+
+export function createFooterDocumentDsl() {
+  const sections = {}
+  const order = []
+
+  ;(footerDocument.sections || []).forEach((item) => {
+    if (!item?.type) return
+    const section = createTypedSection(item.type, {
+      fixedId: item.fixedId,
+      settings: item.settings,
+      blocks: item.blocks
+    })
+    sections[section.id] = section
+    order.push(section.id)
+  })
+
+  return {
+    pageType: 'footer',
+    pageId: 'footer',
+    sections,
+    order
+  }
+}
+
+export default footerDocument
diff --git a/src/components/sp-web-decoration/definitions/documents/global.js b/src/components/sp-web-decoration/definitions/documents/global.js
new file mode 100644
index 0000000..c42a21c
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/documents/global.js
@@ -0,0 +1,15 @@
+import { createHeaderDocumentDsl } from './header.js'
+import { createFooterDocumentDsl } from './footer.js'
+
+export function createGlobalSections() {
+  const headerDsl = createHeaderDocumentDsl()
+  const footerDsl = createFooterDocumentDsl()
+  return {
+    header: headerDsl.sections.header,
+    footer: footerDsl.sections.footer
+  }
+}
+
+export default {
+  createGlobalSections
+}
diff --git a/src/components/sp-web-decoration/definitions/documents/header.js b/src/components/sp-web-decoration/definitions/documents/header.js
new file mode 100644
index 0000000..0f7e4c5
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/documents/header.js
@@ -0,0 +1,37 @@
+import { createTypedSection } from '../factory.js'
+
+const headerDocument = {
+  type: 'header',
+  sections: [
+    {
+      type: 'header',
+      fixedId: 'header',
+      blocks: []
+    }
+  ]
+}
+
+export function createHeaderDocumentDsl() {
+  const sections = {}
+  const order = []
+
+  ;(headerDocument.sections || []).forEach((item) => {
+    if (!item?.type) return
+    const section = createTypedSection(item.type, {
+      fixedId: item.fixedId,
+      settings: item.settings,
+      blocks: item.blocks
+    })
+    sections[section.id] = section
+    order.push(section.id)
+  })
+
+  return {
+    pageType: 'header',
+    pageId: 'header',
+    sections,
+    order
+  }
+}
+
+export default headerDocument
diff --git a/src/components/sp-web-decoration/definitions/documents/product-list.js b/src/components/sp-web-decoration/definitions/documents/product-list.js
new file mode 100644
index 0000000..e17bef8
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/documents/product-list.js
@@ -0,0 +1,55 @@
+import { createTypedSection } from '../factory.js'
+
+const productListDocument = {
+  type: 'product_list',
+  sections: [
+    {
+      type: 'image-hotspot'
+    },
+    {
+      id: 'product_list',
+      fixedId: 'product_list',
+      type: 'native-product-list',
+      locked: true,
+      settings: {
+        locked: true
+      }
+    }
+  ]
+}
+
+export function createProductListDocumentDsl({ pageId = '', scene = '1001' } = {}) {
+  const sections = {}
+  const order = []
+
+  ;(productListDocument.sections || []).forEach((item) => {
+    if (!item?.type) return
+    const section = createTypedSection(item.type, {
+      fixedId: item.fixedId,
+      settings: item.settings,
+      blocks: item.blocks
+    })
+    if (item.locked) {
+      section.locked = true
+      section.settings = {
+        ...(section.settings || {}),
+        locked: true
+      }
+    }
+    sections[section.id] = section
+    order.push(section.id)
+  })
+
+  return {
+    pageType: 'product_list',
+    pageId: String(pageId || 'product_list'),
+    sections,
+    order,
+    meta: {
+      version: 1,
+      scene
+    }
+  }
+}
+
+export default productListDocument
diff --git a/src/components/sp-web-decoration/definitions/documents/template.js b/src/components/sp-web-decoration/definitions/documents/template.js
new file mode 100644
index 0000000..05353f8
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/documents/template.js
@@ -0,0 +1,52 @@
+import { createTypedSection } from '../factory.js'
+
+const templateDocument = {
+  type: 'template',
+  sections: [
+    {
+      type: 'main-carousel',
+      blocks: [
+        { type: 'image' },
+        { type: 'image' },
+        {
+          type: 'image'
+        }
+      ]
+    },
+    {
+      type: 'image-hotspot'
+    },
+    {
+      type: 'product-tab-shelf'
+    }
+  ]
+}
+
+export function createTemplateDocumentDsl({ pageId = '', scene = '1001' } = {}) {
+  const sections = {}
+  const order = []
+
+  ;(templateDocument.sections || []).forEach((item) => {
+    if (!item?.type) return
+    const section = createTypedSection(item.type, {
+      fixedId: item.fixedId,
+      settings: item.settings,
+      blocks: item.blocks
+    })
+    sections[section.id] = section
+    order.push(section.id)
+  })
+
+  return {
+    pageType: 'home',
+    pageId: String(pageId || ''),
+    sections,
+    order,
+    meta: {
+      version: 1,
+      scene
+    }
+  }
+}
+
+export default templateDocument
diff --git a/src/components/sp-web-decoration/definitions/factory.js b/src/components/sp-web-decoration/definitions/factory.js
new file mode 100644
index 0000000..9262a52
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/factory.js
@@ -0,0 +1,81 @@
+import { generateSectionId, generateBlockId } from '../utils/nanoid.js'
+import {
+  getTypedSectionDefinition,
+  getTypedBlockDefinition,
+  getAllowedBlockTypes,
+  getSectionDefaultSettings,
+  getBlockDefaultSettings
+} from './registry.js'
+
+function cloneValue(value) {
+  return JSON.parse(JSON.stringify(value))
+}
+
+export function createTypedBlock(sectionType, blockType, options = {}) {
+  const allowed = getAllowedBlockTypes(sectionType)
+  if (!allowed.includes(blockType)) {
+    throw new Error(`Block type ${blockType} is not allowed in section ${sectionType}`)
+  }
+
+  const definition = getTypedBlockDefinition(blockType)
+  if (!definition) {
+    throw new Error(`Unknown decoration block type: ${blockType}`)
+  }
+
+  const id = options.id || generateBlockId(blockType)
+  return {
+    id,
+    type: blockType,
+    disabled: Boolean(options.disabled),
+    title: definition.name || '',
+    settings: {
+      ...cloneValue(getBlockDefaultSettings(blockType) || {}),
+      ...cloneValue(options.settings || {})
+    }
+  }
+}
+
+export function createTypedSection(type, options = {}) {
+  const definition = getTypedSectionDefinition(type)
+  if (!definition) {
+    throw new Error(`Unknown decoration section type: ${type}`)
+  }
+
+  const sectionId = options.fixedId || definition.fixedId || options.id || generateSectionId(type)
+  const defaults = Array.isArray(options.blocks)
+    ? options.blocks
+    : Array.isArray(definition.defaultBlocks)
+    ? definition.defaultBlocks
+    : []
+  const blocks = {}
+  const blockOrder = []
+
+  defaults.forEach((item) => {
+    if (!item?.type) return
+    const block = createTypedBlock(type, item.type, {
+      id: item.id,
+      settings: item.settings,
+      disabled: item.disabled
+    })
+    blocks[block.id] = block
+    blockOrder.push(block.id)
+  })
+
+  return {
+    id: sectionId,
+    type: definition.type,
+    title: definition.name || '',
+    disabled: Boolean(options.disabled),
+    settings: {
+      ...cloneValue(getSectionDefaultSettings(type) || {}),
+      ...cloneValue(options.settings || {})
+    },
+    blocks,
+    blockOrder
+  }
+}
+
+export default {
+  createTypedSection,
+  createTypedBlock
+}
diff --git a/src/components/sp-web-decoration/definitions/registry.js b/src/components/sp-web-decoration/definitions/registry.js
new file mode 100644
index 0000000..f28850a
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/registry.js
@@ -0,0 +1,96 @@
+import headerSection from './sections/header.js'
+import announcementBarSection from './sections/announcement-bar.js'
+import carouselSection from './sections/carousel.js'
+import imageHotspotSection from './sections/image-hotspot.js'
+import productShelfSection from './sections/product-shelf.js'
+import productTabShelfSection from './sections/product-tab-shelf.js'
+import nativeProductListSection from './sections/native-product-list.js'
+import footerSection from './sections/footer.js'
+
+import announcementBlock from './blocks/announcement.js'
+import headerProductListBlock from './blocks/header-product-list.js'
+import headerCollectionProductListBlock from './blocks/header-collection-product-list.js'
+import megaMenuBlock from './blocks/mega-menu.js'
+import imageBlock from './blocks/image.js'
+import videoBlock from './blocks/video.js'
+import hotspotBlock from './blocks/hotspot.js'
+import productTabBlock from './blocks/product-tab.js'
+import footerLinkBlock from './blocks/footer-link.js'
+import footerMenuBlock from './blocks/footer-menu.js'
+import footerImageBlock from './blocks/footer-image.js'
+import footerTextBlock from './blocks/footer-text.js'
+
+const sectionDefinitions = {
+  [headerSection.type]: headerSection,
+  [announcementBarSection.type]: announcementBarSection,
+  [carouselSection.type]: carouselSection,
+  [imageHotspotSection.type]: imageHotspotSection,
+  [nativeProductListSection.type]: nativeProductListSection,
+  [productShelfSection.type]: productShelfSection,
+  [productTabShelfSection.type]: productTabShelfSection,
+  [footerSection.type]: footerSection
+}
+
+const blockDefinitions = {
+  [announcementBlock.type]: announcementBlock,
+  [headerProductListBlock.type]: headerProductListBlock,
+  [headerCollectionProductListBlock.type]: headerCollectionProductListBlock,
+  [megaMenuBlock.type]: megaMenuBlock,
+  [imageBlock.type]: imageBlock,
+  [videoBlock.type]: videoBlock,
+  [hotspotBlock.type]: hotspotBlock,
+  [productTabBlock.type]: productTabBlock,
+  [footerLinkBlock.type]: footerLinkBlock,
+  [footerMenuBlock.type]: footerMenuBlock,
+  [footerImageBlock.type]: footerImageBlock,
+  [footerTextBlock.type]: footerTextBlock
+}
+
+function getSectionTypesByScope(scope) {
+  return Object.values(sectionDefinitions)
+    .filter((definition) => definition.scope === scope && definition.addable !== false)
+    .map((definition) => definition.type)
+}
+
+export function getTypedSectionDefinition(type) {
+  return sectionDefinitions[type] || null
+}
+
+export function getTypedBlockDefinition(type) {
+  return blockDefinitions[type] || null
+}
+
+export function getSectionDefaultSettings(type) {
+  return getTypedSectionDefinition(type)?.defaultSettings || null
+}
+
+export function getBlockDefaultSettings(type) {
+  return getTypedBlockDefinition(type)?.defaultSettings || null
+}
+
+export function getAllowedBlockTypes(sectionType) {
+  return getTypedSectionDefinition(sectionType)?.blocks?.allowed?.slice() || []
+}
+
+export function getSectionTypes() {
+  return Object.keys(sectionDefinitions)
+}
+
+export function getSectionBlockTypes(sectionType) {
+  return getAllowedBlockTypes(sectionType)
+}
+
+export { sectionDefinitions, blockDefinitions, getSectionTypesByScope }
+
+export default {
+  sectionDefinitions,
+  blockDefinitions,
+  getTypedSectionDefinition,
+  getTypedBlockDefinition,
+  getSectionDefaultSettings,
+  getBlockDefaultSettings,
+  getAllowedBlockTypes,
+  getSectionTypes,
+  getSectionBlockTypes,
+  getSectionTypesByScope
+}
diff --git a/src/components/sp-web-decoration/definitions/sections/announcement-bar.js b/src/components/sp-web-decoration/definitions/sections/announcement-bar.js
new file mode 100644
index 0000000..defef2b
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/sections/announcement-bar.js
@@ -0,0 +1,31 @@
+import { i18n } from '@/i18n'
+
+export default {
+  type: 'announcement-bar',
+  scope: 'header',
+  name: i18n.t('d65dbcac.3921b6'),
+  defaultSettings: {
+    full_width: false,
+    auto_rotate: false,
+    enable_country_selector: false,
+    color_mode: 'light',
+    show_line_separator: true,
+    change_slides_speed: 5,
+    color_scheme: 'scheme-1',
+    padding_top: 'none',
+    padding_bottom: 'none',
+    show_social: false,
+    enable_language_selector: false
+  },
+  defaultBlocks: [
+    {
+      type: 'announcement'
+    }
+  ],
+  blocks: {
+    allowed: ['announcement'],
+    addable: true,
+    sortable: true,
+    removable: true
+  }
+}
diff --git a/src/components/sp-web-decoration/definitions/sections/carousel.js b/src/components/sp-web-decoration/definitions/sections/carousel.js
new file mode 100644
index 0000000..a907560
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/sections/carousel.js
@@ -0,0 +1,28 @@
+import { i18n } from '@/i18n'
+
+export default {
+  type: 'main-carousel',
+  scope: 'template',
+  name: i18n.t('d65dbcac.0c0180'),
+  defaultSettings: {
+    image_height: 'medium',
+    paginate_type: 'point',
+    paginate_size: 'medium',
+    enable_auto_play: false,
+    enable_arrow: true,
+    full_width: false,
+    interval: 5,
+    show_text_below: false,
+    color_mode: 'light',
+    color_scheme: 'scheme-1',
+    padding_top: 'm',
+    padding_bottom: 'm'
+  },
+  defaultBlocks: [{ type: 'image' }, { type: 'image' }, { type: 'image' }],
+  blocks: {
+    allowed: ['image', 'video'],
+    addable: true,
+    sortable: true,
+    removable: true
+  }
+}
diff --git a/src/components/sp-web-decoration/definitions/sections/footer.js b/src/components/sp-web-decoration/definitions/sections/footer.js
new file mode 100644
index 0000000..531566a
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/sections/footer.js
@@ -0,0 +1,38 @@
+import { i18n } from '@/i18n'
+
+export default {
+  type: 'footer',
+  scope: 'footer',
+  fixedId: 'footer',
+  name: i18n.t('d65dbcac.4eb88f'),
+  defaultSettings: {
+    content_alignment: 'center',
+    title: '',
+    copyright: '',
+    newsletter_heading: '',
+    color_mode: 'dark',
+    margin_top: 48,
+    full_width: false,
+    padding_top: 'm',
+    color_scheme: 'scheme-3',
+    show_social: true,
+    payment_enable: true,
+    newsletter_enable: false,
+    enable_country_selector: true,
+    show_policy: true,
+    padding_bottom: 'xs',
+    enable_brand_information: true,
+    enable_language_selector: true
+  },
+  defaultBlocks: [
+    {
+      type: 'footer-menu'
+    }
+  ],
+  blocks: {
+    allowed: ['footer-menu', 'footer-image', 'footer-text'],
+    addable: true,
+    sortable: true,
+    removable: true
+  }
+}
diff --git a/src/components/sp-web-decoration/definitions/sections/header.js b/src/components/sp-web-decoration/definitions/sections/header.js
new file mode 100644
index 0000000..ede3669
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/sections/header.js
@@ -0,0 +1,37 @@
+import { i18n } from '@/i18n'
+
+export default {
+  type: 'header',
+  scope: 'header',
+  fixedId: 'header',
+  name: i18n.t('d65dbcac.917f14'),
+  defaultSettings: {
+    color_mode: 'dark',
+    full_width: false,
+    sticky_header_type: 'none',
+    padding_top: 'xxs',
+    menu_color_style: 'pure',
+    menu_type_desktop: 'dropdown',
+    show_line_separator: true,
+    menu: null,
+    color_scheme: 'scheme-1',
+    layout: 'middle',
+    margin_bottom: 0,
+    enable_country_selector: true,
+    mobile_logo_position: 'center',
+    menu_color_mode: 'dark',
+    logo_position: 'center',
+    enable_customer_avatar: true,
+    padding_bottom: 'xxs',
+    menu_color_scheme: 'scheme-1',
+    enable_language_selector: true
+  },
+  defaultBlocks: [],
+  blocks: {
+    // allowed: ['header_product_list', 'header_collection_product_list', 'mega_menu'],
+    allowed: [],
+    addable: true,
+    sortable: true,
+    removable: true
+  }
+}
diff --git a/src/components/sp-web-decoration/definitions/sections/image-hotspot.js b/src/components/sp-web-decoration/definitions/sections/image-hotspot.js
new file mode 100644
index 0000000..4a798c4
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/sections/image-hotspot.js
@@ -0,0 +1,26 @@
+import { i18n } from '@/i18n'
+
+export default {
+  type: 'image-hotspot',
+  scope: 'template',
+  name: i18n.t('d65dbcac.081a81'),
+  defaultSettings: {
+    pc_image: '',
+    mobile_image: '',
+    pc_hotspots: [],
+    mobile_hotspots: [],
+    full_width: false,
+    color_mode: 'light',
+    color_scheme: 'scheme-1',
+    padding_top: 'm',
+    padding_bottom: 'm'
+  },
+  defaultBlocks: [],
+  blocks: {
+    // allowed: ['hotspot'],
+    allowed: [],
+    addable: true,
+    sortable: true,
+    removable: true
+  }
+}
diff --git a/src/components/sp-web-decoration/definitions/sections/native-product-list.js b/src/components/sp-web-decoration/definitions/sections/native-product-list.js
new file mode 100644
index 0000000..61d9866
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/sections/native-product-list.js
@@ -0,0 +1,19 @@
+export default {
+  type: 'native-product-list',
+  scope: 'template',
+  name: '商品列表',
+  fixedId: 'product_list',
+  native: true,
+  locked: true,
+  addable: false,
+  defaultSettings: {
+    locked: true
+  },
+  defaultBlocks: [],
+  blocks: {
+    allowed: [],
+    addable: false,
+    sortable: false,
+    removable: false
+  }
+}
diff --git a/src/components/sp-web-decoration/definitions/sections/product-shelf.js b/src/components/sp-web-decoration/definitions/sections/product-shelf.js
new file mode 100644
index 0000000..efd0b52
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/sections/product-shelf.js
@@ -0,0 +1,27 @@
+import { i18n } from '@/i18n'
+
+export default {
+  type: 'product-shelf',
+  scope: 'template',
+  name: i18n.t('d65dbcac.4a02ad'),
+  defaultSettings: {
+    title: '',
+    sourceMode: 'manual',
+    itemIds: [],
+    categoryId: '',
+    columns: 4,
+    limit: 8,
+    color_mode: 'light',
+    color_scheme: 'scheme-1',
+    padding_top: 'm',
+    padding_bottom: 'm',
+    full_width: false
+  },
+  defaultBlocks: [],
+  blocks: {
+    allowed: [],
+    addable: false,
+    sortable: false,
+    removable: false
+  }
+}
diff --git a/src/components/sp-web-decoration/definitions/sections/product-tab-shelf.js b/src/components/sp-web-decoration/definitions/sections/product-tab-shelf.js
new file mode 100644
index 0000000..3a91ac3
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/sections/product-tab-shelf.js
@@ -0,0 +1,29 @@
+export default {
+  type: 'product-tab-shelf',
+  scope: 'template',
+  name: 'Tab产品系列',
+  defaultSettings: {
+    title: '',
+    intro: '新品',
+    size: 'medium',
+    alignment: 'center',
+    columns: 4,
+    spacing: 'medium',
+    full_width: false,
+    show_price: true,
+    show_add_cart: true,
+    color_mode: 'light',
+    color_scheme: 'scheme-1',
+    padding_top: 'm',
+    padding_bottom: 'm'
+  },
+  defaultBlocks: [
+    { type: 'product-tab', settings: { tab_label: '产品系列', product_ids: [], limit: 8 } }
+  ],
+  blocks: {
+    allowed: ['product-tab'],
+    addable: true,
+    sortable: true,
+    removable: true
+  }
+}
diff --git a/src/components/sp-web-decoration/definitions/selection.js b/src/components/sp-web-decoration/definitions/selection.js
new file mode 100644
index 0000000..cc719b0
--- /dev/null
+++ b/src/components/sp-web-decoration/definitions/selection.js
@@ -0,0 +1,181 @@
+export function isGlobalSectionId({ headerDsl, footerDsl } = {}, sectionId) {
+  return Boolean(
+    sectionId && (headerDsl?.sections?.[sectionId] || footerDsl?.sections?.[sectionId])
+  )
+}
+
+export function findSectionIdByType(dsl, type) {
+  const order = Array.isArray(dsl?.order) ? dsl.order : []
+  for (const id of order) {
+    const section = dsl?.sections?.[id]
+    if (section && section.type === type) {
+      return id
+    }
+  }
+  return ''
+}
+
+export function firstOrderedSectionId(dsl) {
+  const order = Array.isArray(dsl?.order) ? dsl.order : []
+  return order[0] || ''
+}
+
+export const selectionManifest = {
+  defaults: {
+    selectedSectionId: '',
+    selectedBlockId: '',
+    expandedSectionIds: []
+  },
+  ruleOrder: ['header', 'footer', 'carousel', 'product-shelf', 'image-hotspot'],
+  fallbackKey: 'fallback'
+}
+
+export const selectionRules = {
+  header: {
+    id: 'header',
+    label: '标头',
+    strategy: 'globalSectionIfExists',
+    globalSectionId: 'header'
+  },
+  footer: {
+    id: 'footer',
+    label: '页脚',
+    strategy: 'globalSectionIfExists',
+    globalSectionId: 'footer'
+  },
+  carousel: {
+    id: 'carousel',
+    label: '幻灯片',
+    strategy: 'firstCarouselSection'
+  },
+  'product-shelf': {
+    id: 'product-shelf',
+    label: '产品系列列表',
+    strategy: 'firstPageSectionOfType',
+    sectionType: 'product-shelf'
+  },
+  'image-hotspot': {
+    id: 'image-hotspot',
+    label: '图片横幅',
+    strategy: 'firstPageSectionOfType',
+    sectionType: 'image-hotspot'
+  },
+  fallback: {
+    id: 'fallback',
+    label: '页面分区顺序第一项',
+    strategy: 'firstPageSectionInOrder'
+  }
+}
+
+export const CAROUSEL_FAMILY_SECTION_TYPES = ['main-carousel', 'carousel']
+
+export function findCarouselFamilySectionId(dsl) {
+  for (const type of CAROUSEL_FAMILY_SECTION_TYPES) {
+    const id = findSectionIdByType(dsl, type)
+    if (id) return id
+  }
+  return ''
+}
+
+function getOrderedSectionRules() {
+  const order = Array.isArray(selectionManifest.ruleOrder) ? selectionManifest.ruleOrder : []
+  return order.map((key) => {
+    const rule = selectionRules[key]
+    if (!rule) {
+      throw new Error(`[sp-web-decoration] selection rule "${key}" missing`)
+    }
+    return rule
+  })
+}
+
+function getFallbackSectionRule() {
+  const key = selectionManifest.fallbackKey || 'fallback'
+  const rule = selectionRules[key]
+  if (!rule) {
+    throw new Error(`[sp-web-decoration] fallback selection rule "${key}" missing`)
+  }
+  return rule
+}
+
+function applyRule(rule, { dsl, headerDsl, footerDsl }) {
+  if (!rule || !rule.strategy) return null
+
+  if (rule.strategy === 'globalSectionIfExists') {
+    const sectionId = rule.globalSectionId
+    if (isGlobalSectionId({ headerDsl, footerDsl }, sectionId)) {
+      return { sectionId, blockId: '' }
+    }
+    return null
+  }
+
+  if (rule.strategy === 'firstPageSectionOfType') {
+    const sectionId = findSectionIdByType(dsl, rule.sectionType)
+    return sectionId ? { sectionId, blockId: '' } : null
+  }
+
+  if (rule.strategy === 'firstCarouselSection') {
+    const sectionId = findCarouselFamilySectionId(dsl)
+    return sectionId ? { sectionId, blockId: '' } : null
+  }
+
+  return null
+}
+
+function applyFallback(fallback, { dsl }) {
+  if (fallback?.strategy === 'firstPageSectionInOrder') {
+    const sectionId = firstOrderedSectionId(dsl || {})
+    return { sectionId, blockId: '' }
+  }
+  return { sectionId: '', blockId: '' }
+}
+
+function finalizeSection(partial, { headerDsl, footerDsl }, defaults) {
+  const selectedSectionId = partial.sectionId || ''
+  const selectedBlockId =
+    partial.blockId !== undefined && partial.blockId !== null
+      ? partial.blockId
+      : defaults.selectedBlockId || ''
+  const expandedSectionIds = Array.isArray(defaults.expandedSectionIds)
+    ? defaults.expandedSectionIds.slice()
+    : []
+
+  let editingScope = 'global'
+  if (selectedSectionId) {
+    editingScope = isGlobalSectionId({ headerDsl, footerDsl }, selectedSectionId)
+      ? 'global'
+      : 'page'
+  }
+
+  return {
+    selectedSectionId,
+    selectedBlockId,
+    expandedSectionIds,
+    editingScope
+  }
+}
+
+export function getInitialEditorSelection({ dsl, headerDsl, footerDsl }) {
+  const defaults = selectionManifest.defaults || {}
+  const rules = getOrderedSectionRules()
+
+  for (const rule of rules) {
+    const hit = applyRule(rule, { dsl, headerDsl, footerDsl })
+    if (hit && hit.sectionId) {
+      return finalizeSection(hit, { headerDsl, footerDsl }, defaults)
+    }
+  }
+
+  const fallback = applyFallback(getFallbackSectionRule(), { dsl })
+  return finalizeSection(fallback, { headerDsl, footerDsl }, defaults)
+}
+
+export default {
+  isGlobalSectionId,
+  findSectionIdByType,
+  firstOrderedSectionId,
+  CAROUSEL_FAMILY_SECTION_TYPES,
+  findCarouselFamilySectionId,
+  selectionManifest,
+  selectionRules,
+  getInitialEditorSelection
+}
diff --git a/src/components/sp-web-decoration/index.vue b/src/components/sp-web-decoration/index.vue
new file mode 100644
index 0000000..68316b0
--- /dev/null
+++ b/src/components/sp-web-decoration/index.vue
@@ -0,0 +1,641 @@
+<template>
+  <div class="flex h-full min-h-screen flex-col bg-[#f3f4f7]">
+    <div
+      class="box-border flex min-h-14 items-center justify-between gap-3 border-b border-[#e6e9ef] bg-white/95 px-[14px] py-2 max-[1360px]:flex-wrap max-[1360px]:items-stretch"
+    >
+      <div class="flex min-w-0 items-center gap-2.5">
+        <el-button class="!shrink-0" circle size="mini" @click="$emit('back')">
+          <ArrowLeft :size="16" class="text-[#606266]" :stroke-width="2" />
+        </el-button>
+        <div class="flex min-w-0 flex-col items-start gap-0.5">
+          <div class="text-sm font-semibold leading-5 text-[#18222f]">{{ titleText }}</div>
+          <div class="flex items-center gap-2 whitespace-nowrap text-[11px] text-[#6b7785]">
+            <span>{{ subtitleText }}</span>
+            <span v-if="templateId">#{{ templateId }}</span>
+          </div>
+        </div>
+      </div>
+      <div
+        v-if="false"
+        class="flex min-w-0 flex-1 items-center justify-center gap-2.5 max-[1180px]:order-3 max-[1180px]:w-full max-[1180px]:justify-start max-[1180px]:overflow-x-auto"
+      >
+        <div
+          class="flex min-h-[34px] items-center gap-1.5 rounded-[10px] border border-[rgba(17,24,39,0.08)] bg-[rgba(250,251,253,0.95)] px-2 py-1"
+        >
+          <span class="whitespace-nowrap text-[11px] text-[#6b7785]">{{
+            $t('30ac5b9e.59ceff')
+          }}</span>
+          <el-select class="w-[120px]" size="small" :value="pageType" disabled>
+            <el-option :label="$t('30ac5b9e.db1c89')" value="home" />
+          </el-select>
+        </div>
+      </div>
+      <div class="flex items-center gap-2">
+        <el-button
+          class="!min-w-20 !rounded-lg"
+          type="primary"
+          size="small"
+          :loading="isSaving || loading"
+          @click="handleSave"
+        >
+          {{ $t('30ac5b9e.be5fbb') }}
+        </el-button>
+      </div>
+    </div>
+
+    <div
+      v-loading="loading"
+      class="grid flex-1 min-h-0 grid-cols-[260px_minmax(0,1fr)_304px] grid-rows-[minmax(0,1fr)] p-0 max-[1360px]:grid-cols-[236px_minmax(0,1fr)_280px] max-[1180px]:grid-cols-1 max-[1180px]:grid-rows-none max-[1180px]:auto-rows-[minmax(260px,auto)]"
+    >
+      <div class="min-w-0 min-h-0 h-full">
+        <StructurePanel
+          :dsl="dsl"
+          :header-dsl="headerDsl"
+          :footer-dsl="footerDsl"
+          :selected-section-id="selectedSectionId"
+          :selected-block-id="selectedBlockId"
+          :expanded-section-ids="expandedSectionIds"
+          :section-definitions="sectionDefinitions"
+          @add-section="handleAddSection"
+          @select-section="handleSelectSection"
+          @select-block="handleSelectBlock"
+          @toggle-section="handleToggleSection"
+          @duplicate-section="handleDuplicateSection"
+          @remove-section="handleRemoveSection"
+          @reorder-sections="handleReorderSections"
+          @add-block="handleAddBlock"
+          @remove-block="handleRemoveBlock"
+          @toggle-block-disabled="handleToggleBlockDisabled"
+          @reorder-blocks="handleReorderBlocks"
+          @add-global-section="handleAddGlobalSection"
+          @toggle-section-disabled="handleToggleSectionDisabled"
+          @reorder-global-sections="handleReorderGlobalSections"
+        />
+      </div>
+
+      <div class="min-w-0 min-h-0 h-full">
+        <PreviewCanvas
+          ref="previewCanvas"
+          :dsl="dsl"
+          :header-dsl="headerDsl"
+          :footer-dsl="footerDsl"
+          :page-type="pageType"
+          :page-id="pageId"
+          :template-id="templateId"
+          :website-url="websiteUrl"
+          :device="viewMode"
+          :can-undo="canUndo"
+          :can-redo="canRedo"
+          :selected-section-id="selectedSectionId"
+          :selected-block-id="selectedBlockId"
+          @focus-section="handleSelectSection"
+          @focus-block="handleSelectBlock"
+          @add-block-requested="handlePreviewAddBlockRequested"
+          @add-section-requested="handlePreviewAddSectionRequested"
+          @move-section-requested="handlePreviewMoveSectionRequested"
+          @duplicate-section-requested="handleDuplicateSection"
+          @remove-section-requested="handleRemoveSection"
+          @move-block-requested="handlePreviewMoveBlockRequested"
+          @duplicate-block-requested="handlePreviewDuplicateBlockRequested"
+          @remove-block-requested="handlePreviewRemoveBlockRequested"
+          @preview-ready="handlePreviewReady"
+          @select-device="viewMode = $event"
+          @undo="handleUndo"
+          @redo="handleRedo"
+        />
+      </div>
+
+      <div class="min-w-0 min-h-0 h-full">
+        <ConfigPanel
+          :section="selectedSection"
+          :block="selectedBlock"
+          @update-settings="handleUpdateSettings"
+          @update-section="handleUpdateSection"
+          @update-block="handleUpdateBlock"
+          @select-block="handleSelectBlock"
+        />
+      </div>
+    </div>
+    <StructureInsertMenu
+      v-if="previewInsertMenu.kind && previewInsertMenuItems.length"
+      :items="previewInsertMenuItems"
+      :dock-style="previewInsertMenuDockStyle"
+      show-icons
+      :icon-type="previewInsertMenu.kind"
+      @select="handlePreviewInsertMenuSelect"
+    />
+  </div>
+</template>
+
+<script>
+import StructurePanel from './components/StructurePanel.vue'
+import PreviewCanvas from './components/PreviewCanvas.vue'
+import ConfigPanel from './components/ConfigPanel.vue'
+import StructureInsertMenu from './components/StructureInsertMenu.vue'
+
+import { getSectionTypesByScope, getTypedSectionDefinition } from './definitions/registry.js'
+import { getAreaSectionInsertPolicy } from './definitions/areas.js'
+import {
+  createBlockPickerItems,
+  createSectionPickerItems,
+  createSectionPickerItemsForTypes
+} from './utils/insertPicker.js'
+
+const PAGE_TYPE_LABEL_MAP = {
+  home: '首页模板',
+  index: '首页模板',
+  custom: '自定义页模板',
+  list: '列表页模板',
+  product_list: '商品列表模板',
+  header: '标头模板',
+  footer: '页脚模板'
+}
+
+function cloneValue(value) {
+  return JSON.parse(JSON.stringify(value))
+}
+
+export default {
+  name: 'SpWebDecoration',
+  components: {
+    StructurePanel,
+    PreviewCanvas,
+    ConfigPanel,
+    StructureInsertMenu
+  },
+  props: {
+    initialDsl: {
+      type: Object,
+      default: null
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    pageType: {
+      type: String,
+      default: 'home'
+    },
+    scene: {
+      type: String,
+      default: '1001'
+    },
+    templateId: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    websiteUrl: {
+      type: String,
+      default: () => (process.env.VUE_APP_WEBSITE || '') + '?designMode=1'
+    }
+  },
+  data() {
+    return {
+      viewMode: 'desktop',
+      historyPast: [],
+      historyFuture: [],
+      isRestoringHistory: false,
+      previewInsertMenu: {
+        kind: '',
+        sectionId: '',
+        insertIndex: undefined,
+        area: 'template'
+      },
+      previewInsertMenuAnchor: null,
+      previewInsertMenuDockStyle: {}
+    }
+  },
+  computed: {
+    dsl() {
+      return this.$store.state.decoration.dsl
+    },
+    headerDsl() {
+      return this.$store.state.decoration.headerDsl
+    },
+    footerDsl() {
+      return this.$store.state.decoration.footerDsl
+    },
+    pageId() {
+      return this.$store.state.decoration.pageId
+    },
+    selectedSectionId() {
+      return this.$store.state.decoration.selectedSectionId
+    },
+    selectedBlockId() {
+      return this.$store.state.decoration.selectedBlockId
+    },
+    expandedSectionIds() {
+      return this.$store.state.decoration.expandedSectionIds
+    },
+    isSaving() {
+      return this.$store.state.decoration.isSaving
+    },
+    editingScope() {
+      return this.$store.state.decoration.editingScope
+    },
+    selectedSection() {
+      return this.selectedSectionId ? this.$store.getters['decoration/currentSection'] : null
+    },
+    selectedBlock() {
+      return this.selectedBlockId ? this.$store.getters['decoration/currentBlock'] : null
+    },
+    sectionDefinitions() {
+      return getSectionTypesByScope('template').map((type) => getTypedSectionDefinition(type))
+    },
+    pageTypeLabel() {
+      return PAGE_TYPE_LABEL_MAP[this.pageType] || PAGE_TYPE_LABEL_MAP.home
+    },
+    titleText() {
+      return this.title || `${this.pageTypeLabel}装修`
+    },
+    subtitleText() {
+      return `${this.pageTypeLabel}编辑`
+    },
+    canUndo() {
+      return this.historyPast.length > 1
+    },
+    canRedo() {
+      return this.historyFuture.length > 0
+    },
+    previewInsertMenuItems() {
+      if (this.previewInsertMenu.kind === 'block') {
+        const section = this.findSectionById(this.previewInsertMenu.sectionId)
+        return section ? createBlockPickerItems(section.type) : []
+      }
+      if (this.previewInsertMenu.kind === 'section') {
+        const policy = getAreaSectionInsertPolicy(this.previewInsertMenu.area)
+        return policy.types === null
+          ? createSectionPickerItems(this.sectionDefinitions)
+          : createSectionPickerItemsForTypes(policy.types)
+      }
+      return []
+    }
+  },
+  watch: {
+    initialDsl: {
+      immediate: true,
+      handler(value) {
+        if (!value) return
+        const pageDsl = value.dsl || value
+        const carouselSectionId = Object.keys(pageDsl?.sections || {}).find(
+          (sectionId) => pageDsl?.sections?.[sectionId]?.type === 'main-carousel'
+        )
+        console.log('[sp-web-decoration] initialDsl before initializeEditor', {
+          pageDsl,
+          carouselSectionId,
+          carouselSection: carouselSectionId ? pageDsl?.sections?.[carouselSectionId] : null
+        })
+        this.$store.commit('decoration/initializeEditor', {
+          pageType: this.pageType,
+          pageId: this.templateId,
+          dsl: cloneValue(pageDsl),
+          headerDsl: value.headerDsl ? cloneValue(value.headerDsl) : null,
+          footerDsl: value.footerDsl ? cloneValue(value.footerDsl) : null,
+          legacyGlobalDsl: value.globalDsl ? cloneValue(value.globalDsl) : null
+        })
+        this.$nextTick(() => {
+          const currentDsl = this.$store.state.decoration.dsl
+          const currentCarouselSectionId = Object.keys(currentDsl?.sections || {}).find(
+            (sectionId) => currentDsl?.sections?.[sectionId]?.type === 'main-carousel'
+          )
+          console.log('[sp-web-decoration] store dsl after initializeEditor', {
+            currentCarouselSectionId,
+            carouselSection: currentCarouselSectionId
+              ? currentDsl?.sections?.[currentCarouselSectionId]
+              : null
+          })
+        })
+        this.resetHistory()
+      }
+    }
+  },
+  beforeDestroy() {
+    this.unbindPreviewInsertMenuEvents()
+    this.$store.commit('decoration/resetState')
+  },
+  methods: {
+    snapshotState() {
+      return {
+        headerDsl: cloneValue(this.headerDsl),
+        dsl: cloneValue(this.dsl),
+        footerDsl: cloneValue(this.footerDsl),
+        selectedSectionId: this.selectedSectionId,
+        selectedBlockId: this.selectedBlockId
+      }
+    },
+    resetHistory() {
+      this.historyPast = [this.snapshotState()]
+      this.historyFuture = []
+    },
+    recordHistory() {
+      if (this.isRestoringHistory) return
+      const snapshot = this.snapshotState()
+      const previousSnapshot = this.historyPast[this.historyPast.length - 1]
+      if (JSON.stringify(previousSnapshot) === JSON.stringify(snapshot)) return
+      this.historyPast = [...this.historyPast, snapshot]
+      this.historyFuture = []
+    },
+    restoreSnapshot(snapshot) {
+      this.isRestoringHistory = true
+      this.$store.commit('decoration/setHeaderDsl', cloneValue(snapshot.headerDsl))
+      this.$store.commit('decoration/setDsl', cloneValue(snapshot.dsl))
+      this.$store.commit('decoration/setFooterDsl', cloneValue(snapshot.footerDsl))
+      if (snapshot.selectedBlockId) {
+        this.$store.commit('decoration/selectBlock', {
+          sectionId: snapshot.selectedSectionId,
+          blockId: snapshot.selectedBlockId
+        })
+      } else {
+        this.$store.commit('decoration/selectSection', snapshot.selectedSectionId)
+      }
+      this.isRestoringHistory = false
+    },
+    handleAddSection(payload) {
+      const type = typeof payload === 'string' ? payload : payload.type
+      const index =
+        typeof payload === 'object' && payload !== null && typeof payload.index === 'number'
+          ? payload.index
+          : undefined
+      this.$store.commit('decoration/addSection', { type, index })
+      this.recordHistory()
+    },
+    handleSelectSection(sectionId) {
+      this.$store.commit('decoration/selectSection', sectionId)
+      this.requestPreviewSelectionScroll()
+    },
+    handleSelectBlock(payload) {
+      this.$store.commit('decoration/selectBlock', payload)
+      this.requestPreviewSelectionScroll()
+    },
+    requestPreviewSelectionScroll() {
+      this.$nextTick(() => {
+        this.$refs.previewCanvas?.sendSelectionHighlight?.()
+      })
+    },
+    handleToggleSection(sectionId) {
+      this.$store.commit('decoration/toggleSectionExpanded', sectionId)
+    },
+    handleDuplicateSection(sectionId) {
+      this.$store.commit('decoration/duplicateSection', sectionId)
+      this.recordHistory()
+    },
+    handleRemoveSection(sectionId) {
+      this.$store.commit('decoration/removeSection', sectionId)
+      this.recordHistory()
+    },
+    handleReorderSections(nextOrder) {
+      this.$store.commit('decoration/replaceSectionOrder', nextOrder)
+      this.recordHistory()
+    },
+    handleAddBlock({ sectionId, blockType, index }) {
+      this.$store.commit('decoration/addBlock', { sectionId, blockType, index })
+      this.recordHistory()
+    },
+    findSectionById(sectionId) {
+      return (
+        this.dsl.sections?.[sectionId] ||
+        this.headerDsl.sections?.[sectionId] ||
+        this.footerDsl.sections?.[sectionId] ||
+        null
+      )
+    },
+    getSectionArea(sectionId) {
+      if (this.headerDsl.sections?.[sectionId]) return 'header'
+      if (this.footerDsl.sections?.[sectionId]) return 'footer'
+      return 'template'
+    },
+    normalizePreviewArea(area, sectionId) {
+      return ['header', 'template', 'footer'].includes(area) ? area : this.getSectionArea(sectionId)
+    },
+    normalizePreviewInsertIndex(insertIndex) {
+      return typeof insertIndex === 'number' ? insertIndex : undefined
+    },
+    openPreviewInsertMenu({ kind, sectionId, insertIndex, anchor, area }) {
+      this.previewInsertMenu = {
+        kind,
+        sectionId: sectionId || '',
+        insertIndex: this.normalizePreviewInsertIndex(insertIndex),
+        area: this.normalizePreviewArea(area, sectionId)
+      }
+      this.previewInsertMenuAnchor = anchor || null
+      this.updatePreviewInsertMenuPosition()
+      this.bindPreviewInsertMenuEvents()
+      this.$nextTick(() => {
+        if (this.previewInsertMenu.kind && !this.previewInsertMenuItems.length) {
+          this.closePreviewInsertMenu()
+        }
+      })
+    },
+    closePreviewInsertMenu() {
+      this.previewInsertMenu = {
+        kind: '',
+        sectionId: '',
+        insertIndex: undefined,
+        area: 'template'
+      }
+      this.previewInsertMenuAnchor = null
+      this.previewInsertMenuDockStyle = {}
+      this.unbindPreviewInsertMenuEvents()
+    },
+    bindPreviewInsertMenuEvents() {
+      this.unbindPreviewInsertMenuEvents()
+      window.addEventListener('resize', this.updatePreviewInsertMenuPosition)
+      window.addEventListener('scroll', this.updatePreviewInsertMenuPosition, true)
+      window.addEventListener('mousedown', this.handlePreviewInsertMenuOutside, true)
+    },
+    unbindPreviewInsertMenuEvents() {
+      window.removeEventListener('resize', this.updatePreviewInsertMenuPosition)
+      window.removeEventListener('scroll', this.updatePreviewInsertMenuPosition, true)
+      window.removeEventListener('mousedown', this.handlePreviewInsertMenuOutside, true)
+    },
+    handlePreviewInsertMenuOutside(event) {
+      if (event.target?.closest?.('.sp-structure-insert-menu')) return
+      this.closePreviewInsertMenu()
+    },
+    updatePreviewInsertMenuPosition() {
+      const anchor = this.previewInsertMenuAnchor
+      if (!anchor) {
+        this.previewInsertMenuDockStyle = { right: '320px', top: '96px' }
+        return
+      }
+      const menuWidth = 208
+      const gap = 8
+      const x = Number(anchor.clientX)
+      const y = Number(anchor.clientY)
+      const viewportWidth = window.innerWidth || document.documentElement.clientWidth || menuWidth
+      const viewportHeight = window.innerHeight || document.documentElement.clientHeight || 420
+      const left = Math.min(Math.max(gap, x - menuWidth / 2), viewportWidth - menuWidth - gap)
+      const top = Math.min(Math.max(gap, y + gap), viewportHeight - 160)
+      this.previewInsertMenuDockStyle = {
+        left: `${Math.max(gap, left)}px`,
+        top: `${Math.max(gap, top)}px`
+      }
+    },
+    handlePreviewAddBlockRequested(payload) {
+      if (!payload?.sectionId || !this.findSectionById(payload.sectionId)) return
+      this.openPreviewInsertMenu({
+        kind: 'block',
+        sectionId: payload.sectionId,
+        insertIndex: payload.insertIndex,
+        anchor: payload.anchor,
+        area: payload.area
+      })
+    },
+    handlePreviewAddSectionRequested(payload) {
+      if (!payload?.sectionId) return
+      this.openPreviewInsertMenu({
+        kind: 'section',
+        sectionId: payload.sectionId,
+        insertIndex: payload.insertIndex,
+        anchor: payload.anchor,
+        area: payload.area
+      })
+    },
+    handlePreviewInsertMenuSelect(item) {
+      const context = { ...this.previewInsertMenu }
+      this.closePreviewInsertMenu()
+      if (!item?.type) return
+      if (context.kind === 'block') {
+        this.handleAddBlock({
+          sectionId: context.sectionId,
+          blockType: item.type,
+          index: context.insertIndex
+        })
+        return
+      }
+      const policy = getAreaSectionInsertPolicy(context.area)
+      if (policy.mutation === 'page') {
+        this.handleAddSection({ type: item.type, index: context.insertIndex, area: context.area })
+        return
+      }
+      this.handleAddGlobalSection({
+        type: item.type,
+        area: policy.mutation,
+        index: context.insertIndex
+      })
+    },
+    getSectionScopeDsl(sectionId) {
+      if (this.headerDsl.sections?.[sectionId]) return this.headerDsl
+      if (this.footerDsl.sections?.[sectionId]) return this.footerDsl
+      if (this.dsl.sections?.[sectionId]) return this.dsl
+      return null
+    },
+    handlePreviewMoveSectionRequested({ sectionId, direction }) {
+      const scopeDsl = this.getSectionScopeDsl(sectionId)
+      const order = Array.isArray(scopeDsl?.order) ? scopeDsl.order : []
+      const currentIndex = order.indexOf(sectionId)
+      if (currentIndex < 0) return
+      const offset = direction === 'up' ? -1 : 1
+      const targetIndex = currentIndex + offset
+      if (targetIndex < 0 || targetIndex >= order.length) return
+      if (sectionId !== 'footer' && order[targetIndex] === 'footer') return
+      this.$store.commit('decoration/moveSection', { sectionId, targetIndex })
+      this.recordHistory()
+    },
+    handlePreviewMoveBlockRequested({ sectionId, blockId, direction }) {
+      const section = this.findSectionById(sectionId)
+      const order = Array.isArray(section?.blockOrder) ? section.blockOrder.slice() : []
+      const currentIndex = order.indexOf(blockId)
+      if (currentIndex < 0) return
+      const targetIndex = currentIndex + (direction === 'up' ? -1 : 1)
+      if (targetIndex < 0 || targetIndex >= order.length) return
+      order.splice(currentIndex, 1)
+      order.splice(targetIndex, 0, blockId)
+      this.handleReorderBlocks({ sectionId, blockOrder: order })
+    },
+    handlePreviewDuplicateBlockRequested({ sectionId, blockId }) {
+      if (!sectionId || !blockId) return
+      this.$store.commit('decoration/duplicateBlock', { sectionId, blockId })
+      this.recordHistory()
+      this.requestPreviewSelectionScroll()
+    },
+    handlePreviewRemoveBlockRequested({ sectionId, blockId }) {
+      const section = this.findSectionById(sectionId)
+      const order = Array.isArray(section?.blockOrder) ? section.blockOrder : []
+      if (order.length <= 1) return
+      this.handleRemoveBlock({ sectionId, blockId })
+    },
+    handleAddGlobalSection(payload) {
+      if (typeof payload === 'string') {
+        this.$store.commit('decoration/addGlobalSection', payload)
+      } else if (payload && typeof payload === 'object') {
+        this.$store.commit('decoration/addGlobalSection', payload)
+      }
+      this.recordHistory()
+    },
+    handleToggleSectionDisabled(sectionId) {
+      const section =
+        this.headerDsl.sections?.[sectionId] ||
+        this.footerDsl.sections?.[sectionId] ||
+        this.dsl.sections?.[sectionId] ||
+        null
+      if (!section) return
+      this.$store.commit('decoration/setSectionDisabled', {
+        sectionId,
+        disabled: !section.disabled
+      })
+      this.recordHistory()
+    },
+    handleReorderGlobalSections(nextOrder) {
+      this.$store.commit('decoration/setGlobalOrder', nextOrder)
+      this.recordHistory()
+    },
+    handleRemoveBlock(payload) {
+      this.$store.commit('decoration/removeBlock', payload)
+      this.recordHistory()
+    },
+    handleToggleBlockDisabled(payload) {
+      this.$store.commit('decoration/toggleBlockDisabled', payload)
+      this.recordHistory()
+    },
+    handleReorderBlocks(payload) {
+      this.$store.commit('decoration/replaceBlockOrder', payload)
+      this.recordHistory()
+    },
+    handleUpdateSettings(patch) {
+      this.$store.commit('decoration/updateSelectedSectionSettings', patch)
+      this.recordHistory()
+    },
+    handleUpdateSection(nextSection) {
+      this.$store.commit('decoration/replaceSelectedSection', cloneValue(nextSection))
+      this.recordHistory()
+    },
+    handleUpdateBlock(patch) {
+      this.$store.commit('decoration/updateSelectedBlockSettings', patch)
+      this.recordHistory()
+    },
+    handlePreviewReady(value) {
+      this.$store.commit('decoration/setPreviewReady', value)
+    },
+    handleUndo() {
+      if (!this.canUndo) return
+      const currentSnapshot = this.historyPast[this.historyPast.length - 1]
+      const previousSnapshot = this.historyPast[this.historyPast.length - 2]
+      this.historyPast = this.historyPast.slice(0, -1)
+      this.historyFuture = [currentSnapshot, ...this.historyFuture]
+      this.restoreSnapshot(previousSnapshot)
+    },
+    handleRedo() {
+      if (!this.canRedo) return
+      const [nextSnapshot, ...rest] = this.historyFuture
+      this.historyFuture = rest
+      this.historyPast = [...this.historyPast, nextSnapshot]
+      this.restoreSnapshot(nextSnapshot)
+    },
+    handleSave() {
+      const payload = {
+        dsl: cloneValue(this.dsl),
+        headerDsl: cloneValue(this.headerDsl),
+        footerDsl: cloneValue(this.footerDsl),
+        editingScope: this.editingScope
+      }
+      console.log('[sp-web-decoration] save click payload', payload)
+      this.$emit('save', payload)
+    }
+  }
+}
+</script>
diff --git a/src/components/sp-web-decoration/panels/AnnouncementBarPanel.vue b/src/components/sp-web-decoration/panels/AnnouncementBarPanel.vue
new file mode 100644
index 0000000..b73b1a1
--- /dev/null
+++ b/src/components/sp-web-decoration/panels/AnnouncementBarPanel.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="space-y-5 text-foreground">
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">{{ $t('b86bb5a2.f8df05') }}</div>
+      <el-switch :value="settings.auto_rotate" @input="updateField('auto_rotate', $event)" />
+    </section>
+
+    <section v-if="settings.auto_rotate" class="space-y-2">
+      <div class="text-sm text-muted-foreground">{{ $t('b86bb5a2.c01f2f') }}</div>
+      <el-input-number
+        :value="settings.change_slides_speed"
+        :min="1"
+        :max="30"
+        size="small"
+        controls-position="right"
+        @change="updateField('change_slides_speed', $event)"
+      />
+    </section>
+
+    <div class="grid grid-cols-2 gap-3">
+      <section class="space-y-2">
+        <div class="text-sm text-muted-foreground">{{ $t('b86bb5a2.9de56a') }}</div>
+        <el-switch
+          :value="settings.enable_country_selector"
+          @input="updateField('enable_country_selector', $event)"
+        />
+      </section>
+
+      <section class="space-y-2">
+        <div class="text-sm text-muted-foreground">{{ $t('b86bb5a2.37dba1') }}</div>
+        <el-switch
+          :value="settings.enable_language_selector"
+          @input="updateField('enable_language_selector', $event)"
+        />
+      </section>
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <section class="space-y-2">
+        <div class="text-sm text-muted-foreground">{{ $t('b86bb5a2.925fac') }}</div>
+        <el-switch
+          :value="settings.show_line_separator"
+          @input="updateField('show_line_separator', $event)"
+        />
+      </section>
+
+      <section class="space-y-2">
+        <div class="text-sm text-muted-foreground">{{ $t('b86bb5a2.f33ffa') }}</div>
+        <el-switch :value="settings.show_social" @input="updateField('show_social', $event)" />
+      </section>
+    </div>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">{{ $t('b86bb5a2.fd1ff1') }}</div>
+      <div class="flex flex-col gap-2">
+        <div
+          v-for="(blockId, index) in blockOrder"
+          :key="blockId"
+          class="flex cursor-pointer items-center gap-3 rounded-[10px] border border-solid border-gray-200 px-3 py-2.5"
+          @click="$emit('select-block', blockId)"
+        >
+          <div class="min-w-0 flex-1">
+            <div class="text-xs font-semibold text-gray-900">
+              {{ resolveBlockTitle(index) }}
+            </div>
+            <div
+              class="mt-0.5 overflow-hidden text-ellipsis whitespace-nowrap text-xs text-gray-500"
+            >
+              {{ resolveBlockMeta(blockId) }}
+            </div>
+          </div>
+
+          <div class="inline-flex gap-1.5">
+            <el-button
+              circle
+              size="mini"
+              :disabled="index === 0"
+              @click.stop="moveBlock(blockId, index - 1)"
+            >
+              <ChevronUp :size="14" class="text-[#606266]" :stroke-width="2" />
+            </el-button>
+            <el-button
+              circle
+              size="mini"
+              :disabled="index === blockOrder.length - 1"
+              @click.stop="moveBlock(blockId, index + 1)"
+            >
+              <ChevronDown :size="14" class="text-[#606266]" :stroke-width="2" />
+            </el-button>
+            <el-button circle size="mini" @click.stop="removeBlock(blockId)">
+              <Trash2 :size="14" class="text-[#606266]" :stroke-width="2" />
+            </el-button>
+          </div>
+        </div>
+
+        <el-button plain class="!inline-flex !items-center !gap-1.5" @click="addAnnouncement">
+          <Plus :size="14" :stroke-width="2.5" />
+          {{ $t('b86bb5a2.fa86f1') }}
+        </el-button>
+      </div>
+    </section>
+
+    <SectionAppearancePanel :value="settings" @change="updateField" />
+  </div>
+</template>
+
+<script>
+import SectionAppearancePanel from './SectionAppearancePanel.vue'
+import { createTypedBlock as createDefaultBlock } from '../definitions/factory.js'
+import {
+  normalizeTypedSectionSettings,
+  normalizeSection,
+  addSectionBlock,
+  removeSectionBlock,
+  moveSectionBlock
+} from '../utils/panelState.js'
+
+export default {
+  name: 'AnnouncementBarPanel',
+  components: { SectionAppearancePanel },
+  props: {
+    section: {
+      type: Object,
+      default: null
+    },
+    value: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    settings() {
+      return normalizeTypedSectionSettings('announcement-bar', this.value)
+    },
+    normalizedSection() {
+      return normalizeSection(this.section)
+    },
+    blockOrder() {
+      return this.normalizedSection?.blockOrder || []
+    },
+    blocks() {
+      return this.normalizedSection?.blocks || {}
+    }
+  },
+  methods: {
+    updateField(field, fieldValue) {
+      this.$emit('change', {
+        [field]: fieldValue
+      })
+    },
+    resolveBlockTitle(index) {
+      return `${this.$t('b86bb5a2.fa86f1')} ${index + 1}`
+    },
+    resolveBlockMeta(blockId) {
+      return this.blocks[blockId] && this.blocks[blockId].settings
+        ? this.blocks[blockId].settings.text || '--'
+        : '--'
+    },
+    addAnnouncement() {
+      const result = addSectionBlock(
+        this.normalizedSection,
+        () => createDefaultBlock('announcement-bar', 'announcement'),
+        { text: '' }
+      )
+      this.$emit('change-section', result.section)
+      this.$emit('select-block', result.blockId)
+    },
+    removeBlock(blockId) {
+      this.$emit('change-section', removeSectionBlock(this.normalizedSection, blockId))
+    },
+    moveBlock(blockId, targetIndex) {
+      this.$emit('change-section', moveSectionBlock(this.normalizedSection, blockId, targetIndex))
+    }
+  }
+}
+</script>
diff --git a/src/components/sp-web-decoration/panels/AnnouncementBlockPanel.vue b/src/components/sp-web-decoration/panels/AnnouncementBlockPanel.vue
new file mode 100644
index 0000000..7c765c8
--- /dev/null
+++ b/src/components/sp-web-decoration/panels/AnnouncementBlockPanel.vue
@@ -0,0 +1,38 @@
+<template>
+  <el-form label-position="top" size="small" class="space-y-3">
+    <el-form-item :label="$t('ea424682.6eb9f2')">
+      <el-input
+        type="textarea"
+        :rows="4"
+        :value="settings.text"
+        @input="updateField('text', $event)"
+      />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { normalizeTypedBlockSettings } from '../utils/panelState.js'
+
+export default {
+  name: 'AnnouncementBlockPanel',
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    settings() {
+      return normalizeTypedBlockSettings('announcement', this.value)
+    }
+  },
+  methods: {
+    updateField(field, fieldValue) {
+      this.$emit('change', {
+        [field]: fieldValue
+      })
+    }
+  }
+}
+</script>
diff --git a/src/components/sp-web-decoration/panels/CarouselPanel.vue b/src/components/sp-web-decoration/panels/CarouselPanel.vue
new file mode 100644
index 0000000..2e51f3d
--- /dev/null
+++ b/src/components/sp-web-decoration/panels/CarouselPanel.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="space-y-5 text-foreground">
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">图片高度</div>
+      <el-radio-group
+        :value="settings.image_height"
+        size="small"
+        @input="updateField('image_height', $event)"
+      >
+        <el-radio-button label="small">小</el-radio-button>
+        <el-radio-button label="medium">中</el-radio-button>
+        <el-radio-button label="large">大</el-radio-button>
+        <el-radio-button label="adapt">适配屏幕</el-radio-button>
+      </el-radio-group>
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">分页样式</div>
+      <el-radio-group
+        :value="settings.paginate_type"
+        size="small"
+        @input="updateField('paginate_type', $event)"
+      >
+        <el-radio-button label="point">轮播点</el-radio-button>
+        <el-radio-button label="counter">计数器</el-radio-button>
+        <el-radio-button label="number">页码</el-radio-button>
+      </el-radio-group>
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">分页规格</div>
+      <el-radio-group
+        :value="settings.paginate_size"
+        size="small"
+        @input="updateField('paginate_size', $event)"
+      >
+        <el-radio-button label="small">小</el-radio-button>
+        <el-radio-button label="medium">中</el-radio-button>
+        <el-radio-button label="large">大</el-radio-button>
+      </el-radio-group>
+    </section>
+
+    <section class="space-y-3">
+      <div class="flex items-center justify-between gap-3">
+        <span class="text-sm text-muted-foreground">自动轮播</span>
+        <el-switch
+          :value="settings.enable_auto_play"
+          @input="updateField('enable_auto_play', $event)"
+        />
+      </div>
+
+      <div class="flex items-center justify-between gap-3">
+        <span class="text-sm text-muted-foreground">轮播翻页按钮</span>
+        <el-switch :value="settings.enable_arrow" @input="updateField('enable_arrow', $event)" />
+      </div>
+    </section>
+
+    <section v-if="settings.enable_auto_play" class="space-y-2">
+      <div class="text-sm text-muted-foreground">幻灯片更换时间</div>
+      <div class="flex items-center gap-3">
+        <el-input-number
+          class="!w-[88px]"
+          :value="settings.interval"
+          :min="3"
+          :max="9"
+          size="small"
+          controls-position="right"
+          @change="updateField('interval', $event)"
+        />
+        <span class="text-xs text-muted-foreground">秒</span>
+        <el-slider
+          class="min-w-0 flex-1 pl-1"
+          :value="settings.interval"
+          :min="3"
+          :max="9"
+          :step="1"
+          :show-tooltip="false"
+          @input="updateField('interval', $event)"
+        />
+      </div>
+    </section>
+
+    <SectionAppearancePanel :value="settings" @change="updateField" />
+  </div>
+</template>
+
+<script>
+import SectionAppearancePanel from './SectionAppearancePanel.vue'
+import { normalizeTypedSectionSettings } from '../utils/panelState.js'
+
+export default {
+  name: 'CarouselPanel',
+  components: {
+    SectionAppearancePanel
+  },
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    settings() {
+      return normalizeTypedSectionSettings('main-carousel', this.value)
+    }
+  },
+  methods: {
+    updateField(field, fieldValue) {
+      this.$emit('change', {
+        [field]: fieldValue
+      })
+    }
+  }
+}
+</script>
diff --git a/src/components/sp-web-decoration/panels/FooterImageBlockPanel.vue b/src/components/sp-web-decoration/panels/FooterImageBlockPanel.vue
new file mode 100644
index 0000000..8e31a21
--- /dev/null
+++ b/src/components/sp-web-decoration/panels/FooterImageBlockPanel.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="space-y-5 text-foreground">
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">图片</div>
+      <div class="rounded-xl border border-border bg-card p-3">
+        <SpImagePicker :value="value.image" @input="updateField('image', $event)" />
+      </div>
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">对齐方式</div>
+      <el-radio-group
+        :value="value.alignment || 'left'"
+        size="small"
+        @input="updateField('alignment', $event)"
+      >
+        <el-radio-button label="left">左</el-radio-button>
+        <el-radio-button label="center">中</el-radio-button>
+        <el-radio-button label="right">右</el-radio-button>
+      </el-radio-group>
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">图片宽度</div>
+      <el-radio-group
+        :value="value.width || '100'"
+        size="small"
+        @input="updateField('width', $event)"
+      >
+        <el-radio-button label="25">25%</el-radio-button>
+        <el-radio-button label="50">50%</el-radio-button>
+        <el-radio-button label="75">75%</el-radio-button>
+        <el-radio-button label="100">100%</el-radio-button>
+      </el-radio-group>
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">圆角</div>
+      <el-radio-group
+        :value="value.radius || 'medium'"
+        size="small"
+        @input="updateField('radius', $event)"
+      >
+        <el-radio-button label="none">无</el-radio-button>
+        <el-radio-button label="small">小</el-radio-button>
+        <el-radio-button label="medium">中</el-radio-button>
+        <el-radio-button label="large">大</el-radio-button>
+        <el-radio-button label="full">圆形</el-radio-button>
+      </el-radio-group>
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">占列宽度</div>
+      <div class="flex items-center gap-3">
+        <el-input-number
+          :value="value.column_span || 4"
+          :min="1"
+          :max="12"
+          size="small"
+          controls-position="right"
+          class="!w-[88px]"
+          @change="updateField('column_span', $event)"
+        />
+        <el-slider
+          :value="value.column_span || 4"
+          :min="1"
+          :max="12"
+          :step="1"
+          :show-tooltip="false"
+          class="min-w-0 flex-1 pl-1"
+          @input="updateField('column_span', $event)"
+        />
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import SpImagePicker from '@/components/sp-image-picker/index.vue'
+
+export default {
+  name: 'FooterImageBlockPanel',
+  components: { SpImagePicker },
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  methods: {
+    updateField(field, fieldValue) {
+      this.$emit('change', {
+        [field]: fieldValue
+      })
+    }
+  }
+}
+</script>
diff --git a/src/components/sp-web-decoration/panels/FooterLinkBlockPanel.vue b/src/components/sp-web-decoration/panels/FooterLinkBlockPanel.vue
new file mode 100644
index 0000000..efd37bb
--- /dev/null
+++ b/src/components/sp-web-decoration/panels/FooterLinkBlockPanel.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-form label-position="top" size="small" class="space-y-3">
+    <el-form-item :label="$t('5702d2d6.14d342')">
+      <el-input :value="value.label" @input="updateField('label', $event)" />
+    </el-form-item>
+
+    <el-form-item :label="$t('5702d2d6.dec2eb')">
+      <el-input :value="value.url" @input="updateField('url', $event)" />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: 'FooterLinkBlockPanel',
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  methods: {
+    updateField(field, fieldValue) {
+      this.$emit('change', {
+        [field]: fieldValue
+      })
+    }
+  }
+}
+</script>
diff --git a/src/components/sp-web-decoration/panels/FooterMenuBlockPanel.vue b/src/components/sp-web-decoration/panels/FooterMenuBlockPanel.vue
new file mode 100644
index 0000000..359da95
--- /dev/null
+++ b/src/components/sp-web-decoration/panels/FooterMenuBlockPanel.vue
@@ -0,0 +1,184 @@
+<template>
+  <div class="space-y-5 text-foreground">
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">标题</div>
+      <SpRichTextEditor
+        :value="value.title"
+        placeholder="请输入标题"
+        @input="updateField('title', $event)"
+      />
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">菜单</div>
+      <div class="rounded-lg border border-border bg-background p-3">
+        <div class="flex items-center gap-3">
+          <div
+            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-border bg-muted text-muted-foreground"
+          >
+            <MenuIcon :size="16" :stroke-width="1.8" />
+          </div>
+          <div class="min-w-0 flex-1 truncate text-sm text-foreground">
+            {{ currentMenuLabel }}
+          </div>
+          <button
+            v-if="hasSelectedMenu"
+            type="button"
+            class="flex h-7 w-7 shrink-0 items-center justify-center rounded-md border-0 bg-transparent text-muted-foreground hover:bg-muted hover:text-destructive"
+            @click="clearMenu"
+          >
+            <Trash2 :size="14" :stroke-width="1.8" />
+          </button>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          class="h-8 flex-1 rounded-lg border-0 bg-muted px-3 text-sm font-medium text-foreground hover:bg-muted/80"
+          @click="openMenuPicker"
+        >
+          更改
+        </button>
+      </div>
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">规格</div>
+      <el-select
+        :value="value.size || 'small'"
+        size="small"
+        class="w-full"
+        @change="updateField('size', $event)"
+      >
+        <el-option value="xsmall" label="特小" />
+        <el-option value="small" label="小" />
+        <el-option value="medium" label="中" />
+        <el-option value="large" label="大" />
+        <el-option value="xlarge" label="特大" />
+      </el-select>
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">对齐方式</div>
+      <el-radio-group
+        :value="value.alignment || 'left'"
+        size="small"
+        @input="updateField('alignment', $event)"
+      >
+        <el-radio-button label="left">左</el-radio-button>
+        <el-radio-button label="center">中</el-radio-button>
+        <el-radio-button label="right">右</el-radio-button>
+      </el-radio-group>
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">占列宽度</div>
+      <div class="flex items-center gap-3">
+        <el-input-number
+          :value="value.column_span || 3"
+          :min="1"
+          :max="12"
+          size="small"
+          controls-position="right"
+          class="!w-[88px]"
+          @change="updateField('column_span', $event)"
+        />
+        <el-slider
+          :value="value.column_span || 3"
+          :min="1"
+          :max="12"
+          :step="1"
+          :show-tooltip="false"
+          class="min-w-0 flex-1 pl-1"
+          @input="updateField('column_span', $event)"
+        />
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import { Menu as MenuIcon, Trash2 } from 'lucide-vue'
+import WebNavPicker from '@/components/sp-picker-plus/WebNavPicker.vue'
+import SpRichTextEditor from '@/components/sp-rich-text-editor/index.vue'
+import { normalizeSelectedMenu, pickMenuValue } from '../utils/menuSelection.js'
+
+export default {
+  name: 'FooterMenuBlockPanel',
+  components: {
+    MenuIcon,
+    Trash2,
+    SpRichTextEditor
+  },
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      menuNameCache: ''
+    }
+  },
+  computed: {
+    currentMenu() {
+      return normalizeSelectedMenu(pickMenuValue(this.value))
+    },
+    currentMenuLabel() {
+      return this.currentMenu?.name || this.menuNameCache || '未选择菜单'
+    },
+    hasSelectedMenu() {
+      return Boolean(this.currentMenu || this.menuNameCache)
+    }
+  },
+  watch: {
+    currentMenu: {
+      immediate: true,
+      handler(menu) {
+        if (menu?.name) {
+          this.menuNameCache = menu.name
+          return
+        }
+        this.resolveMenuName(menu)
+      }
+    }
+  },
+  methods: {
+    updateField(field, fieldValue) {
+      this.$emit('change', {
+        [field]: fieldValue
+      })
+    },
+    clearMenu() {
+      this.menuNameCache = ''
+      this.updateField('menu', '')
+    },
+    async resolveMenuName(menu) {
+      const menuId = String(menu?.id || menu?.key || '').trim()
+      if (!menuId) {
+        this.menuNameCache = ''
+        return
+      }
+      try {
+        const detail = await this.$api.decoration.getMenuDetail(menuId)
+        this.menuNameCache = detail?.name || ''
+      } catch (error) {
+        this.menuNameCache = ''
+      }
+    },
+    async openMenuPicker() {
+      const selected = await this.$dialog.open(WebNavPicker, {
+        title: '选择导航菜单',
+        props: {
+          initialSelected: this.currentMenu
+        }
+      })
+      if (!selected) return
+      this.menuNameCache = selected?.name || ''
+      this.updateField('menu', selected)
+    }
+  }
+}
+</script>
diff --git a/src/components/sp-web-decoration/panels/FooterPanel.vue b/src/components/sp-web-decoration/panels/FooterPanel.vue
new file mode 100644
index 0000000..d1bf1c0
--- /dev/null
+++ b/src/components/sp-web-decoration/panels/FooterPanel.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="space-y-5 text-foreground">
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">{{ $t('146b63bc.5a02fa') }}</div>
+      <el-input :value="value.title" size="small" @input="updateSetting('title', $event)" />
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">{{ $t('146b63bc.ebc0c1') }}</div>
+      <el-input :value="value.copyright" size="small" @input="updateSetting('copyright', $event)" />
+    </section>
+
+    <SectionAppearancePanel :value="value" @change="updateSetting" />
+  </div>
+</template>
+
+<script>
+import SectionAppearancePanel from './SectionAppearancePanel.vue'
+export default {
+  name: 'FooterPanel',
+  components: {
+    SectionAppearancePanel
+  },
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  methods: {
+    updateSetting(field, value) {
+      this.$emit('change', {
+        [field]: value
+      })
+    }
+  }
+}
+</script>
diff --git a/src/components/sp-web-decoration/panels/FooterTextBlockPanel.vue b/src/components/sp-web-decoration/panels/FooterTextBlockPanel.vue
new file mode 100644
index 0000000..f8899f9
--- /dev/null
+++ b/src/components/sp-web-decoration/panels/FooterTextBlockPanel.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="space-y-5 text-foreground">
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">标题</div>
+      <SpRichTextEditor
+        :value="value.title"
+        placeholder="请输入标题"
+        @input="updateField('title', $event)"
+      />
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">标题规格</div>
+      <el-select
+        :value="value.title_size || 'medium'"
+        size="small"
+        class="w-full"
+        @change="updateField('title_size', $event)"
+      >
+        <el-option value="xsmall" label="特小" />
+        <el-option value="small" label="小" />
+        <el-option value="medium" label="中" />
+        <el-option value="large" label="大" />
+        <el-option value="xlarge" label="特大" />
+      </el-select>
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">内容</div>
+      <SpRichTextEditor
+        :value="value.content"
+        placeholder="请输入内容"
+        @input="updateField('content', $event)"
+      />
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">内容规格</div>
+      <el-select
+        :value="value.content_size || 'small'"
+        size="small"
+        class="w-full"
+        @change="updateField('content_size', $event)"
+      >
+        <el-option value="xsmall" label="特小" />
+        <el-option value="small" label="小" />
+        <el-option value="medium" label="中" />
+        <el-option value="large" label="大" />
+        <el-option value="xlarge" label="特大" />
+      </el-select>
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">对齐方式</div>
+      <el-radio-group
+        :value="value.alignment || 'left'"
+        size="small"
+        @input="updateField('alignment', $event)"
+      >
+        <el-radio-button label="left">左</el-radio-button>
+        <el-radio-button label="center">中</el-radio-button>
+        <el-radio-button label="right">右</el-radio-button>
+      </el-radio-group>
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">占列宽度</div>
+      <div class="flex items-center gap-3">
+        <el-input-number
+          :value="value.column_span || 6"
+          :min="1"
+          :max="12"
+          size="small"
+          controls-position="right"
+          class="!w-[88px]"
+          @change="updateField('column_span', $event)"
+        />
+        <el-slider
+          :value="value.column_span || 6"
+          :min="1"
+          :max="12"
+          :step="1"
+          :show-tooltip="false"
+          class="min-w-0 flex-1 pl-1"
+          @input="updateField('column_span', $event)"
+        />
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import SpRichTextEditor from '@/components/sp-rich-text-editor/index.vue'
+
+export default {
+  name: 'FooterTextBlockPanel',
+  components: { SpRichTextEditor },
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  methods: {
+    updateField(field, fieldValue) {
+      this.$emit('change', {
+        [field]: fieldValue
+      })
+    }
+  }
+}
+</script>
diff --git a/src/components/sp-web-decoration/panels/HeaderPanel.vue b/src/components/sp-web-decoration/panels/HeaderPanel.vue
new file mode 100644
index 0000000..e557bf1
--- /dev/null
+++ b/src/components/sp-web-decoration/panels/HeaderPanel.vue
@@ -0,0 +1,141 @@
+<template>
+  <div class="space-y-5 text-foreground">
+    <div class="space-y-2">
+      <div class="text-sm text-muted-foreground">菜单</div>
+
+      <div class="rounded-lg border border-border bg-background p-3">
+        <div class="flex items-center gap-3">
+          <div
+            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-border bg-muted text-muted-foreground"
+          >
+            <MenuIcon :size="16" :stroke-width="1.8" />
+          </div>
+          <div class="min-w-0 flex-1 truncate text-sm text-foreground">
+            {{ currentMenuLabel }}
+          </div>
+          <button
+            v-if="hasSelectedMenu"
+            type="button"
+            class="flex h-7 w-7 shrink-0 items-center justify-center rounded-md border-0 bg-transparent text-muted-foreground hover:bg-muted hover:text-destructive"
+            @click="clearMenu"
+          >
+            <Trash2 :size="14" :stroke-width="1.8" />
+          </button>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          class="h-8 flex-1 rounded-lg border-0 bg-muted px-3 text-sm font-medium text-foreground hover:bg-muted/80"
+          @click="openMenuPicker"
+        >
+          更改
+        </button>
+      </div>
+    </div>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">LOGO位置</div>
+      <el-radio-group
+        :value="settings.logo_position"
+        size="small"
+        @input="updateSetting('logo_position', $event)"
+      >
+        <el-radio-button label="left">居左</el-radio-button>
+        <el-radio-button label="center">居中</el-radio-button>
+      </el-radio-group>
+    </section>
+
+    <SectionAppearancePanel :value="settings" @change="updateSetting" />
+  </div>
+</template>
+
+<script>
+import { Menu as MenuIcon, Trash2 } from 'lucide-vue'
+import WebNavPicker from '@/components/sp-picker-plus/WebNavPicker.vue'
+import SectionAppearancePanel from './SectionAppearancePanel.vue'
+import { normalizeTypedSectionSettings } from '../utils/panelState.js'
+import { normalizeSelectedMenu, pickMenuValue } from '../utils/menuSelection.js'
+
+export default {
+  name: 'HeaderPanel',
+  components: {
+    MenuIcon,
+    Trash2,
+    SectionAppearancePanel
+  },
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      menuNameCache: ''
+    }
+  },
+  computed: {
+    settings() {
+      return normalizeTypedSectionSettings('header', this.value)
+    },
+    currentMenu() {
+      return normalizeSelectedMenu(pickMenuValue(this.settings))
+    },
+    currentMenuLabel() {
+      return this.currentMenu?.name || this.menuNameCache || '未选择菜单'
+    },
+    hasSelectedMenu() {
+      return Boolean(this.currentMenu || this.menuNameCache)
+    }
+  },
+  watch: {
+    currentMenu: {
+      immediate: true,
+      handler(menu) {
+        if (menu?.name) {
+          this.menuNameCache = menu.name
+          return
+        }
+        this.resolveMenuName(menu)
+      }
+    }
+  },
+  methods: {
+    updateSetting(field, value) {
+      this.$emit('change', {
+        [field]: value
+      })
+    },
+    clearMenu() {
+      this.menuNameCache = ''
+      this.updateSetting('menu', '')
+    },
+    async resolveMenuName(menu) {
+      const menuId = String(menu?.id || menu?.key || '').trim()
+      if (!menuId) {
+        this.menuNameCache = ''
+        return
+      }
+      try {
+        const detail = await this.$api.decoration.getMenuDetail(menuId)
+        this.menuNameCache = detail?.name || ''
+      } catch (error) {
+        this.menuNameCache = ''
+      }
+    },
+    async openMenuPicker() {
+      const selected = await this.$dialog.open(WebNavPicker, {
+        title: '选择导航菜单',
+        props: {
+          initialSelected: this.currentMenu
+        }
+      })
+      if (!selected) return
+      this.menuNameCache = selected?.name || ''
+      this.updateSetting('menu', selected)
+    }
+  }
+}
+</script>
diff --git a/src/components/sp-web-decoration/panels/HotspotBlockPanel.vue b/src/components/sp-web-decoration/panels/HotspotBlockPanel.vue
new file mode 100644
index 0000000..8a57e9d
--- /dev/null
+++ b/src/components/sp-web-decoration/panels/HotspotBlockPanel.vue
@@ -0,0 +1,52 @@
+<template>
+  <el-form label-position="top" size="small" class="space-y-3">
+    <el-form-item :label="$t('e02c8a16.14d342')">
+      <el-input :value="value.label" @input="updateField('label', $event)" />
+    </el-form-item>
+
+    <div class="grid grid-cols-2 gap-3">
+      <el-form-item :label="$t('e02c8a16.488d54')">
+        <el-input-number
+          :value="value.x"
+          :min="0"
+          :max="100"
+          controls-position="right"
+          @change="updateField('x', $event)"
+        />
+      </el-form-item>
+
+      <el-form-item :label="$t('e02c8a16.4d7b6d')">
+        <el-input-number
+          :value="value.y"
+          :min="0"
+          :max="100"
+          controls-position="right"
+          @change="updateField('y', $event)"
+        />
+      </el-form-item>
+    </div>
+
+    <el-form-item :label="$t('e02c8a16.dec2eb')">
+      <el-input :value="value.link" @input="updateField('link', $event)" />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: 'HotspotBlockPanel',
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  methods: {
+    updateField(field, fieldValue) {
+      this.$emit('change', {
+        [field]: fieldValue
+      })
+    }
+  }
+}
+</script>
diff --git a/src/components/sp-web-decoration/panels/ImageBlockPanel.vue b/src/components/sp-web-decoration/panels/ImageBlockPanel.vue
new file mode 100644
index 0000000..e21830c
--- /dev/null
+++ b/src/components/sp-web-decoration/panels/ImageBlockPanel.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="space-y-4 text-foreground">
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">PC图片</div>
+      <div class="rounded-xl border border-border bg-card p-3">
+        <SpImagePicker v-model="localValue.pc_image" />
+      </div>
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">移动图片</div>
+      <div class="rounded-xl border border-border bg-card p-3">
+        <SpImagePicker v-model="localValue.mobile_image" />
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import SpImagePicker from '@/components/sp-image-picker/index.vue'
+
+export default {
+  name: 'ImageBlockPanel',
+  components: {
+    SpImagePicker
+  },
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    localValue() {
+      return this.value
+    }
+  },
+  methods: {
+    updateField(field, fieldValue) {
+      this.$emit('change', {
+        [field]: fieldValue
+      })
+    }
+  }
+}
+</script>
diff --git a/src/components/sp-web-decoration/panels/ImageHotspotEditorDialog.vue b/src/components/sp-web-decoration/panels/ImageHotspotEditorDialog.vue
new file mode 100644
index 0000000..669374c
--- /dev/null
+++ b/src/components/sp-web-decoration/panels/ImageHotspotEditorDialog.vue
@@ -0,0 +1,239 @@
+<template>
+  <div class="image-hotspot-editor">
+    <div class="mb-3 flex items-center justify-between gap-3">
+      <el-radio-group v-model="activeDevice" size="small">
+        <el-radio-button label="pc">PC端</el-radio-button>
+        <el-radio-button label="mobile">移动端</el-radio-button>
+      </el-radio-group>
+      <div class="text-xs text-muted-foreground">已添加 {{ activeHotspots.length }} 个热区</div>
+    </div>
+
+    <div class="grid grid-cols-[minmax(0,1fr)_320px] gap-4">
+      <div class="min-h-[420px] rounded-xl border border-border bg-background-deep p-3">
+        <div v-if="activeImage" class="image-hotspot-editor__canvas">
+          <hotzone
+            :key="`${activeDevice}-${hotzoneKey}`"
+            class="hotzone"
+            :image="activeImage"
+            :zones-init="hotzoneZones"
+            @change="handleChangeHotspots"
+          />
+        </div>
+        <div
+          v-else
+          class="flex h-[420px] items-center justify-center rounded-lg border border-dashed border-border bg-card text-sm text-muted-foreground"
+        >
+          请先上传{{ activeDevice === 'pc' ? 'PC图片' : '移动图片' }}
+        </div>
+      </div>
+
+      <div class="min-h-[420px] rounded-xl border border-border bg-card p-3">
+        <div class="mb-3 text-[13px] font-semibold text-foreground">热区链接</div>
+        <div v-if="activeHotspots.length" class="space-y-3">
+          <div
+            v-for="(hotspot, index) in activeHotspots"
+            :key="hotspot.id || index"
+            class="rounded-lg border border-border bg-background p-3"
+          >
+            <div class="mb-2 flex items-center justify-between gap-2">
+              <span class="text-xs font-medium text-foreground">热区 {{ index + 1 }}</span>
+              <el-button type="text" class="!p-0 !text-xs" @click="removeHotspot(index)">
+                删除
+              </el-button>
+            </div>
+            <CompPickerLink
+              :value="hotspot.link || {}"
+              :show-tracking-params="false"
+              @change="(value) => updateHotspotLink(index, value)"
+            />
+          </div>
+        </div>
+        <div
+          v-else
+          class="flex h-[360px] items-center justify-center rounded-lg border border-dashed border-border text-sm text-muted-foreground"
+        >
+          在左侧图片上拖拽框选热区
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import hotzone from 'vue-hotzone'
+import { cloneDeep } from 'lodash'
+import CompPickerLink from '@/view/decorate/comps/comp-pickerLink.vue'
+
+function createHotspot() {
+  return {
+    id: `hotspot_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
+    rect: {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    },
+    link: {
+      linkType: 0,
+      linkUrl: '',
+      linkPage: '',
+      id: '',
+      title: ''
+    }
+  }
+}
+
+function toHotzoneRatio(value) {
+  const numberValue = Number(value) || 0
+  return numberValue > 1 ? numberValue / 100 : numberValue
+}
+
+function normalizeRect(rect = {}) {
+  return {
+    x: toHotzoneRatio(rect.x !== undefined ? rect.x : rect.leftPer),
+    y: toHotzoneRatio(rect.y !== undefined ? rect.y : rect.topPer),
+    width: toHotzoneRatio(rect.width !== undefined ? rect.width : rect.widthPer),
+    height: toHotzoneRatio(rect.height !== undefined ? rect.height : rect.heightPer)
+  }
+}
+
+function normalizeLink(link = {}) {
+  const next = cloneDeep(link)
+  delete next.trackingParams
+  return next
+}
+
+function normalizeHotspots(value) {
+  return Array.isArray(value)
+    ? value.map((item) => ({
+        ...createHotspot(),
+        ...cloneDeep(item),
+        rect: normalizeRect(item?.rect || item),
+        link: normalizeLink(
+          item?.link || {
+            linkType: item?.linkType !== undefined ? item.linkType : 0,
+            linkUrl: item?.linkUrl || '',
+            linkPage: item?.linkPage || '',
+            id: item?.id || '',
+            title: item?.title || ''
+          }
+        )
+      }))
+    : []
+}
+
+export default {
+  name: 'ImageHotspotEditorDialog',
+  components: {
+    hotzone,
+    CompPickerLink
+  },
+  props: {
+    settings: {
+      type: Object,
+      default: () => ({})
+    },
+    initialDevice: {
+      type: String,
+      default: 'pc'
+    }
+  },
+  data() {
+    return {
+      activeDevice: this.initialDevice === 'mobile' ? 'mobile' : 'pc',
+      hotzoneKey: 0,
+      localSettings: {
+        ...cloneDeep(this.settings),
+        pc_hotspots: normalizeHotspots(this.settings.pc_hotspots),
+        mobile_hotspots: normalizeHotspots(this.settings.mobile_hotspots)
+      }
+    }
+  },
+  computed: {
+    activeImage() {
+      return this.activeDevice === 'pc'
+        ? this.localSettings.pc_image
+        : this.localSettings.mobile_image
+    },
+    activeHotspotKey() {
+      return this.activeDevice === 'pc' ? 'pc_hotspots' : 'mobile_hotspots'
+    },
+    activeHotspots() {
+      return this.localSettings[this.activeHotspotKey] || []
+    },
+    hotzoneZones() {
+      return this.activeHotspots.map((item) => ({
+        leftPer: toHotzoneRatio(item.rect?.x),
+        topPer: toHotzoneRatio(item.rect?.y),
+        widthPer: toHotzoneRatio(item.rect?.width),
+        heightPer: toHotzoneRatio(item.rect?.height)
+      }))
+    }
+  },
+  watch: {
+    activeDevice() {
+      this.hotzoneKey++
+    }
+  },
+  methods: {
+    setActiveHotspots(value) {
+      this.$set(this.localSettings, this.activeHotspotKey, value)
+    },
+    handleChangeHotspots(zones) {
+      if (!Array.isArray(zones)) return
+      const next = this.activeHotspots.slice()
+      zones.forEach((zone, index) => {
+        if (!next[index]) {
+          next[index] = createHotspot()
+        }
+        next[index] = {
+          ...next[index],
+          rect: normalizeRect({
+            x: zone.leftPer,
+            y: zone.topPer,
+            width: zone.widthPer,
+            height: zone.heightPer
+          })
+        }
+      })
+      this.setActiveHotspots(next.slice(0, zones.length))
+    },
+    removeHotspot(index) {
+      const next = this.activeHotspots.slice()
+      next.splice(index, 1)
+      this.setActiveHotspots(next)
+      this.hotzoneKey++
+    },
+    updateHotspotLink(index, value) {
+      const next = this.activeHotspots.slice()
+      if (!next[index]) return
+      next[index] = {
+        ...next[index],
+        link: normalizeLink(value)
+      }
+      this.setActiveHotspots(next)
+    },
+    submit() {
+      this.$emit('close', {
+        pc_hotspots: cloneDeep(this.localSettings.pc_hotspots || []),
+        mobile_hotspots: cloneDeep(this.localSettings.mobile_hotspots || [])
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.image-hotspot-editor {
+  min-height: 480px;
+}
+
+.image-hotspot-editor__canvas {
+  min-height: 420px;
+
+  ::v-deep .hotzone,
+  ::v-deep .vue-hotzone {
+    max-width: 100%;
+  }
+}
+</style>
diff --git a/src/components/sp-web-decoration/panels/ImageHotspotPanel.vue b/src/components/sp-web-decoration/panels/ImageHotspotPanel.vue
new file mode 100644
index 0000000..129c1b1
--- /dev/null
+++ b/src/components/sp-web-decoration/panels/ImageHotspotPanel.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="space-y-4 text-foreground">
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">PC图片</div>
+      <div class="rounded-xl border border-border bg-card p-3">
+        <SpImagePicker :value="settings.pc_image" @input="updateField('pc_image', $event)" />
+      </div>
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">移动图片</div>
+      <div class="rounded-xl border border-border bg-card p-3">
+        <SpImagePicker
+          :value="settings.mobile_image"
+          @input="updateField('mobile_image', $event)"
+        />
+      </div>
+    </section>
+
+    <section class="space-y-2">
+      <div class="flex items-center justify-between gap-3">
+        <span class="text-sm text-muted-foreground">热区配置</span>
+        <el-button type="primary" size="small" @click="openHotspotEditor">编辑热区</el-button>
+      </div>
+      <div class="grid grid-cols-2 gap-3">
+        <div class="rounded-xl border border-border bg-card p-3 text-sm text-muted-foreground">
+          PC热区 {{ pcHotspotCount }} 个
+        </div>
+        <div class="rounded-xl border border-border bg-card p-3 text-sm text-muted-foreground">
+          移动热区 {{ mobileHotspotCount }} 个
+        </div>
+      </div>
+    </section>
+
+    <SectionAppearancePanel :value="settings" @change="updateField" />
+  </div>
+</template>
+
+<script>
+import SpImagePicker from '@/components/sp-image-picker/index.vue'
+import ImageHotspotEditorDialog from './ImageHotspotEditorDialog.vue'
+import SectionAppearancePanel from './SectionAppearancePanel.vue'
+import { normalizeTypedSectionSettings } from '../utils/panelState.js'
+
+export default {
+  name: 'ImageHotspotPanel',
+  components: {
+    SpImagePicker,
+    SectionAppearancePanel
+  },
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    settings() {
+      return normalizeTypedSectionSettings('image-hotspot', this.value)
+    },
+    pcHotspotCount() {
+      return Array.isArray(this.settings.pc_hotspots) ? this.settings.pc_hotspots.length : 0
+    },
+    mobileHotspotCount() {
+      return Array.isArray(this.settings.mobile_hotspots) ? this.settings.mobile_hotspots.length : 0
+    }
+  },
+  methods: {
+    updateField(field, fieldValue) {
+      this.$emit('change', {
+        ...this.cleanSettings(this.settings),
+        [field]: fieldValue
+      })
+    },
+    cleanSettings(settings) {
+      const next = { ...settings }
+      delete next.enable_link
+      delete next.link
+      return next
+    },
+    async openHotspotEditor() {
+      const result = await this.$dialog.open(ImageHotspotEditorDialog, {
+        title: '编辑热区',
+        props: {
+          settings: this.settings,
+          initialDevice: 'pc'
+        },
+        size: 'large'
+      })
+      if (!result) return
+      this.$emit('change', {
+        ...this.cleanSettings(this.settings),
+        ...result
+      })
+    }
+  }
+}
+</script>
diff --git a/src/components/sp-web-decoration/panels/NavItemBlockPanel.vue b/src/components/sp-web-decoration/panels/NavItemBlockPanel.vue
new file mode 100644
index 0000000..079cbf4
--- /dev/null
+++ b/src/components/sp-web-decoration/panels/NavItemBlockPanel.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-form label-position="top" size="small" class="space-y-3">
+    <el-form-item :label="$t('0f21c647.14d342')">
+      <el-input :value="value.label" @input="updateField('label', $event)" />
+    </el-form-item>
+
+    <el-form-item :label="$t('0f21c647.dec2eb')">
+      <el-input :value="value.url" @input="updateField('url', $event)" />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: 'NavItemBlockPanel',
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  methods: {
+    updateField(field, fieldValue) {
+      this.$emit('change', {
+        [field]: fieldValue
+      })
+    }
+  }
+}
+</script>
diff --git a/src/components/sp-web-decoration/panels/ProductShelfPanel.vue b/src/components/sp-web-decoration/panels/ProductShelfPanel.vue
new file mode 100644
index 0000000..4463512
--- /dev/null
+++ b/src/components/sp-web-decoration/panels/ProductShelfPanel.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="space-y-5 text-foreground">
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">{{ $t('6c727f2c.5a02fa') }}</div>
+      <el-input :value="value.title" size="small" @input="updateField('title', $event)" />
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">{{ $t('6c727f2c.f0c7e9') }}</div>
+      <el-select
+        :value="value.sourceMode"
+        size="small"
+        class="w-full"
+        @input="updateField('sourceMode', $event)"
+      >
+        <el-option :label="$t('6c727f2c.68924b')" value="manual" />
+        <el-option :label="$t('6c727f2c.d282eb')" value="category" />
+      </el-select>
+    </section>
+
+    <section v-if="value.sourceMode === 'category'" class="space-y-2">
+      <div class="text-sm text-muted-foreground">{{ $t('6c727f2c.ae8c70') }}</div>
+      <el-input :value="value.categoryId" size="small" @input="updateField('categoryId', $event)" />
+    </section>
+
+    <section v-else class="space-y-2">
+      <div class="text-sm text-muted-foreground">{{ $t('6c727f2c.9a6484') }}</div>
+      <el-input
+        type="textarea"
+        :rows="4"
+        :value="itemIdsText"
+        :placeholder="$t('6c727f2c.d08db5')"
+        @input="updateItemIds"
+      />
+    </section>
+
+    <div class="grid grid-cols-2 gap-3">
+      <section class="space-y-2">
+        <div class="text-sm text-muted-foreground">{{ $t('6c727f2c.eb22d4') }}</div>
+        <el-input-number
+          :value="value.columns"
+          :min="2"
+          :max="6"
+          size="small"
+          controls-position="right"
+          class="!w-full"
+          @change="updateField('columns', $event)"
+        />
+      </section>
+
+      <section class="space-y-2">
+        <div class="text-sm text-muted-foreground">{{ $t('6c727f2c.d57936') }}</div>
+        <el-input-number
+          :value="value.limit"
+          :min="1"
+          :max="50"
+          size="small"
+          controls-position="right"
+          class="!w-full"
+          @change="updateField('limit', $event)"
+        />
+      </section>
+    </div>
+
+    <SectionAppearancePanel :value="value" @change="updateField" />
+  </div>
+</template>
+
+<script>
+import SectionAppearancePanel from './SectionAppearancePanel.vue'
+
+export default {
+  name: 'ProductShelfPanel',
+  components: { SectionAppearancePanel },
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    itemIdsText() {
+      return Array.isArray(this.value.itemIds) ? this.value.itemIds.join(',') : ''
+    }
+  },
+  methods: {
+    updateField(field, fieldValue) {
+      this.$emit('change', {
+        [field]: fieldValue
+      })
+    },
+    updateItemIds(fieldValue) {
+      const itemIds = fieldValue
+        .split(',')
+        .map((item) => item.trim())
+        .filter(Boolean)
+      this.updateField('itemIds', itemIds)
+    }
+  }
+}
+</script>
diff --git a/src/components/sp-web-decoration/panels/ProductTabBlockPanel.vue b/src/components/sp-web-decoration/panels/ProductTabBlockPanel.vue
new file mode 100644
index 0000000..0a31bf4
--- /dev/null
+++ b/src/components/sp-web-decoration/panels/ProductTabBlockPanel.vue
@@ -0,0 +1,204 @@
+<template>
+  <div class="space-y-5 text-foreground">
+    <section class="space-y-2">
+      <div class="text-sm font-semibold text-foreground">产品系列</div>
+      <div class="rounded-lg border border-border bg-background p-3">
+        <draggable
+          v-if="selectedProductItems.length"
+          :value="selectedProductItems"
+          class="space-y-2"
+          handle="[data-product-drag-handle]"
+          ghost-class="opacity-60"
+          @input="updateProducts"
+        >
+          <div
+            v-for="product in selectedProductItems"
+            :key="product.item_id"
+            class="flex items-center gap-3 rounded-md bg-muted/40 px-2 py-2"
+          >
+            <button
+              type="button"
+              data-product-drag-handle
+              class="flex h-7 w-4 shrink-0 cursor-grab items-center justify-center border-0 bg-transparent text-muted-foreground active:cursor-grabbing"
+            >
+              <GripVertical :size="14" :stroke-width="1.8" />
+            </button>
+            <div
+              class="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border bg-muted text-muted-foreground"
+            >
+              <img
+                v-if="getProductImage(product)"
+                :src="getProductImage(product)"
+                class="h-full w-full object-cover"
+                alt=""
+              />
+              <ImageIcon v-else :size="16" :stroke-width="1.8" />
+            </div>
+            <div class="min-w-0 flex-1 truncate text-sm text-foreground">
+              {{ product.item_name || product.item_id }}
+            </div>
+            <button
+              type="button"
+              class="flex h-7 w-7 shrink-0 items-center justify-center rounded-md border-0 bg-transparent text-muted-foreground hover:bg-muted hover:text-destructive"
+              @click="removeProduct(product.item_id)"
+            >
+              <Trash2 :size="14" :stroke-width="1.8" />
+            </button>
+          </div>
+        </draggable>
+        <div v-else class="flex items-center gap-3">
+          <div
+            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-border bg-muted text-muted-foreground"
+          >
+            <ImageIcon :size="16" :stroke-width="1.8" />
+          </div>
+          <div class="min-w-0 flex-1 truncate text-sm text-foreground">全部产品</div>
+        </div>
+      </div>
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          class="h-8 flex-1 rounded-lg border-0 bg-muted px-3 text-sm font-medium text-foreground hover:bg-muted/80"
+          @click="openProductPicker"
+        >
+          {{ selectedProductItems.length ? '继续添加' : '添加商品' }}
+        </button>
+      </div>
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">最大产品数</div>
+      <div class="flex items-center gap-3">
+        <el-input-number
+          :value="settings.limit"
+          :min="2"
+          :max="24"
+          size="small"
+          controls-position="right"
+          class="!w-[88px]"
+          @change="updateField('limit', $event)"
+        />
+        <el-slider
+          :value="settings.limit"
+          :min="2"
+          :max="24"
+          :step="1"
+          :show-tooltip="false"
+          class="min-w-0 flex-1 pl-1"
+          @input="updateField('limit', $event)"
+        />
+      </div>
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">标题</div>
+      <SpRichTextEditor
+        :value="settings.tab_label"
+        placeholder="请输入标题"
+        @input="updateField('tab_label', $event)"
+      />
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">规格</div>
+      <el-select
+        :value="settings.size || sectionSize"
+        size="small"
+        class="w-full"
+        @change="updateSize"
+      >
+        <el-option value="xsmall" label="特小" />
+        <el-option value="small" label="小" />
+        <el-option value="medium" label="中" />
+        <el-option value="large" label="大" />
+        <el-option value="xlarge" label="特大" />
+      </el-select>
+    </section>
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import { GripVertical, Image as ImageIcon, Trash2 } from 'lucide-vue'
+import { GoodsPicker } from '@/components/sp-picker-plus'
+import { normalizeProductTabBlockSettings } from '../utils/panelState.js'
+
+function normalizeProductSnapshot(product = {}) {
+  return {
+    item_id: product.item_id,
+    item_name: product.item_name || '',
+    pics: product.pics || [],
+    price: product.price
+  }
+}
+
+export default {
+  name: 'ProductTabBlockPanel',
+  components: { draggable, GripVertical, ImageIcon, Trash2 },
+  props: {
+    section: { type: Object, default: null },
+    block: { type: Object, default: null },
+    value: { type: Object, default: () => ({}) }
+  },
+  computed: {
+    settings() {
+      return normalizeProductTabBlockSettings(this.value)
+    },
+    selectedProducts() {
+      return Array.isArray(this.settings.product_ids) ? this.settings.product_ids : []
+    },
+    selectedProductItems() {
+      const snapshotMap = new Map(
+        (this.settings.product_snapshots || []).map((product) => [product.item_id, product])
+      )
+      return this.selectedProducts.map(
+        (id) => snapshotMap.get(id) || { item_id: id, item_name: id }
+      )
+    },
+    sectionSize() {
+      const value = this.section?.settings?.size
+      return ['xsmall', 'small', 'medium', 'large', 'xlarge'].includes(value) ? value : 'medium'
+    }
+  },
+  methods: {
+    updateField(field, value) {
+      this.$emit('change', { [field]: value })
+    },
+    updateProducts(products) {
+      const snapshots = products
+        .map((product) => normalizeProductSnapshot(product))
+        .filter((product) => product.item_id)
+      this.$emit('change', {
+        product_ids: snapshots.map((product) => product.item_id),
+        product_snapshots: snapshots
+      })
+    },
+    updateSize(value) {
+      this.$emit('change', { size: value, size_override: true })
+    },
+    clearProducts() {
+      this.$emit('change', { product_ids: [], product_snapshots: [] })
+    },
+    removeProduct(productId) {
+      const next = this.selectedProductItems.filter((product) => product.item_id !== productId)
+      this.updateProducts(next)
+    },
+    getProductImage(product) {
+      if (Array.isArray(product.pics)) return product.pics[0] || ''
+      return product.pics || ''
+    },
+    async openProductPicker() {
+      const result = await this.$dialog.open(GoodsPicker, {
+        parent: this,
+        title: '选择商品',
+        props: {
+          multiple: true,
+          initialSelected: this.selectedProductItems
+        }
+      })
+      if (!result) return
+      this.updateProducts(result)
+    }
+  }
+}
+</script>
diff --git a/src/components/sp-web-decoration/panels/ProductTabShelfPanel.vue b/src/components/sp-web-decoration/panels/ProductTabShelfPanel.vue
new file mode 100644
index 0000000..b9f4c45
--- /dev/null
+++ b/src/components/sp-web-decoration/panels/ProductTabShelfPanel.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="space-y-5 text-foreground">
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">引言</div>
+      <SpRichTextEditor
+        :value="settings.intro"
+        placeholder="请输入引言"
+        @input="updateField('intro', $event)"
+      />
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">规格</div>
+      <el-select
+        :value="settings.size"
+        size="small"
+        class="w-full"
+        @change="updateField('size', $event)"
+      >
+        <el-option value="xsmall" label="特小" />
+        <el-option value="small" label="小" />
+        <el-option value="medium" label="中" />
+        <el-option value="large" label="大" />
+        <el-option value="xlarge" label="特大" />
+      </el-select>
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">对齐方式</div>
+      <el-radio-group
+        :value="settings.alignment"
+        size="small"
+        @input="updateField('alignment', $event)"
+      >
+        <el-radio-button label="left">左</el-radio-button>
+        <el-radio-button label="center">中</el-radio-button>
+        <el-radio-button label="right">右</el-radio-button>
+      </el-radio-group>
+    </section>
+
+    <div class="space-y-5 border-t border-border pt-5">
+      <div class="text-sm font-semibold text-foreground">内容</div>
+
+      <section class="space-y-2">
+        <div class="text-sm text-muted-foreground">产品卡列数</div>
+        <div class="flex items-center gap-3">
+          <el-input-number
+            :value="settings.columns"
+            :min="1"
+            :max="6"
+            size="small"
+            controls-position="right"
+            class="!w-[88px]"
+            @change="updateField('columns', $event)"
+          />
+          <el-slider
+            :value="settings.columns"
+            :min="1"
+            :max="6"
+            :step="1"
+            :show-tooltip="false"
+            class="min-w-0 flex-1 pl-1"
+            @input="updateField('columns', $event)"
+          />
+        </div>
+      </section>
+
+      <section class="space-y-2">
+        <div class="text-sm text-muted-foreground">间距</div>
+        <el-radio-group
+          :value="settings.spacing"
+          size="small"
+          @input="updateField('spacing', $event)"
+        >
+          <el-radio-button label="none">无</el-radio-button>
+          <el-radio-button label="small">小</el-radio-button>
+          <el-radio-button label="medium">中</el-radio-button>
+          <el-radio-button label="large">大</el-radio-button>
+        </el-radio-group>
+      </section>
+    </div>
+
+    <SectionAppearancePanel :value="settings" @change="updateField" />
+  </div>
+</template>
+
+<script>
+import SectionAppearancePanel from './SectionAppearancePanel.vue'
+import { normalizeProductTabShelfSettings } from '../utils/panelState.js'
+
+export default {
+  name: 'ProductTabShelfPanel',
+  components: {
+    SectionAppearancePanel
+  },
+  props: {
+    section: { type: Object, default: null },
+    value: { type: Object, default: () => ({}) }
+  },
+  computed: {
+    settings() {
+      return normalizeProductTabShelfSettings(this.value)
+    }
+  },
+  methods: {
+    updateField(field, value) {
+      this.$emit('change', { [field]: value })
+    }
+  }
+}
+</script>
diff --git a/src/components/sp-web-decoration/panels/SectionAppearancePanel.vue b/src/components/sp-web-decoration/panels/SectionAppearancePanel.vue
new file mode 100644
index 0000000..bfc1a55
--- /dev/null
+++ b/src/components/sp-web-decoration/panels/SectionAppearancePanel.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="space-y-5 text-foreground">
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">颜色模式</div>
+      <el-radio-group :value="value.color_mode" size="small" @input="updateColorMode">
+        <el-radio-button label="light">浅色</el-radio-button>
+        <el-radio-button label="dark">深色</el-radio-button>
+      </el-radio-group>
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">背景颜色</div>
+      <div class="grid grid-cols-5 gap-2">
+        <button
+          v-for="scheme in colorSchemes"
+          :key="scheme.value"
+          type="button"
+          :class="[
+            'flex h-12 flex-col items-center justify-center rounded-lg border text-xs transition',
+            currentColorScheme === scheme.value
+              ? 'border-primary ring-2 ring-primary/20'
+              : 'border-border'
+          ]"
+          :style="{ background: scheme.background, color: scheme.foreground }"
+          @click="updateField('color_scheme', scheme.value)"
+        >
+          <span>A</span>
+          <span>{{ scheme.label }}</span>
+        </button>
+      </div>
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">顶部间距</div>
+      <el-select
+        :value="value.padding_top"
+        size="small"
+        class="w-full"
+        @change="updateField('padding_top', $event)"
+      >
+        <el-option
+          v-for="option in paddingOptions"
+          :key="option.value"
+          :label="option.label"
+          :value="option.value"
+        />
+      </el-select>
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">底部间距</div>
+      <el-select
+        :value="value.padding_bottom"
+        size="small"
+        class="w-full"
+        @change="updateField('padding_bottom', $event)"
+      >
+        <el-option
+          v-for="option in paddingOptions"
+          :key="option.value"
+          :label="option.label"
+          :value="option.value"
+        />
+      </el-select>
+    </section>
+
+    <section v-if="showFullWidth" class="flex items-center justify-between gap-3">
+      <span class="text-sm text-muted-foreground">全屏</span>
+      <el-switch :value="value.full_width" @input="updateField('full_width', $event)" />
+    </section>
+  </div>
+</template>
+
+<script>
+import { SECTION_COLOR_SCHEMES, SECTION_PADDING_OPTIONS } from '../utils/sectionAppearance.js'
+
+export default {
+  name: 'SectionAppearancePanel',
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    },
+    showFullWidth: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    paddingOptions() {
+      return SECTION_PADDING_OPTIONS
+    },
+    colorSchemes() {
+      return SECTION_COLOR_SCHEMES
+    },
+    currentColorScheme() {
+      return this.value.color_scheme || (this.value.color_mode === 'dark' ? 'scheme-3' : 'scheme-1')
+    }
+  },
+  methods: {
+    updateColorMode(fieldValue) {
+      this.$emit('change', 'color_mode', fieldValue)
+      this.$emit('change', 'color_scheme', fieldValue === 'dark' ? 'scheme-3' : 'scheme-1')
+    },
+    updateField(field, fieldValue) {
+      this.$emit('change', field, fieldValue)
+    }
+  }
+}
+</script>
diff --git a/src/components/sp-web-decoration/panels/VideoBlockPanel.vue b/src/components/sp-web-decoration/panels/VideoBlockPanel.vue
new file mode 100644
index 0000000..e45ec07
--- /dev/null
+++ b/src/components/sp-web-decoration/panels/VideoBlockPanel.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="space-y-4 text-foreground">
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">视频</div>
+      <div class="rounded-xl border border-border bg-card p-3">
+        <VideoPicker v-model="localValue.videoUrl" />
+      </div>
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">视频封面</div>
+      <div class="rounded-xl border border-border bg-card p-3">
+        <SpImagePicker v-model="localValue.posterUrl" />
+      </div>
+    </section>
+
+    <section class="space-y-2">
+      <div class="text-sm text-muted-foreground">移动视频</div>
+      <div class="rounded-xl border border-border bg-card p-3">
+        <VideoPicker v-model="localValue.mobileVideoUrl" />
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import SpImagePicker from '@/components/sp-image-picker/index.vue'
+import VideoPicker from '@/components/sp-picker-plus/VideoPicker.vue'
+
+export default {
+  name: 'VideoBlockPanel',
+  components: {
+    SpImagePicker,
+    VideoPicker
+  },
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    localValue() {
+      return this.value
+    }
+  }
+}
+</script>
diff --git a/src/components/sp-web-decoration/product-list-native-section.test.mjs b/src/components/sp-web-decoration/product-list-native-section.test.mjs
new file mode 100644
index 0000000..df02b2a
--- /dev/null
+++ b/src/components/sp-web-decoration/product-list-native-section.test.mjs
@@ -0,0 +1,60 @@
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
+import test from 'node:test'
+
+const root = process.cwd()
+const read = (filePath) => readFileSync(path.resolve(root, filePath), 'utf8')
+
+test('product_list document defaults include a locked native product list section', () => {
+  const dsl = read('src/components/sp-web-decoration/utils/dsl.js')
+  const document = read('src/components/sp-web-decoration/definitions/documents/product-list.js')
+  const registry = read('src/components/sp-web-decoration/definitions/registry.js')
+  const areas = read('src/components/sp-web-decoration/definitions/areas.js')
+  const persistence = read('src/components/sp-web-decoration/adapters/apiPersistence.js')
+
+  assert.match(dsl, /createProductListDsl/)
+  assert.match(document, /pageType:\s*'product_list'/)
+  assert.match(document, /type:\s*'image-hotspot'/)
+  assert.match(document, /id:\s*'product_list'/)
+  assert.match(document, /type:\s*'native-product-list'/)
+  assert.match(document, /locked:\s*true/)
+  assert.match(registry, /nativeProductListSection/)
+  assert.match(registry, /addable !== false/)
+  assert.match(persistence, /pageType === 'product_list'/)
+  assert.doesNotMatch(document, /placement:\s*'top'/)
+  assert.doesNotMatch(document, /placement:\s*'bottom'/)
+  assert.doesNotMatch(document, /type:\s*'main-carousel'/)
+  assert.doesNotMatch(document, /type:\s*'product-tab-shelf'/)
+  assert.doesNotMatch(areas, /'template-top'/)
+  assert.doesNotMatch(areas, /'template-bottom'/)
+})
+
+test('locked native product list section cannot be edited like ordinary sections', () => {
+  const store = read('src/store/modules/decoration.js')
+  const structurePanel = read('src/components/sp-web-decoration/components/StructurePanel.vue')
+  const configPanel = read('src/components/sp-web-decoration/components/ConfigPanel.vue')
+
+  assert.match(store, /function isLockedSection/)
+  assert.match(store, /duplicateSection\(state, sectionId\)[\s\S]*isLockedSection/)
+  assert.match(store, /removeSection\(state, sectionId\)[\s\S]*isLockedSection/)
+  assert.match(store, /setSectionDisabled\(state, \{ sectionId, disabled \}\)[\s\S]*isLockedSection/)
+  assert.match(structurePanel, /canDeletePageSection/)
+  assert.match(structurePanel, /canTogglePageSection/)
+  assert.match(configPanel, /showLockedSectionNotice/)
+  assert.doesNotMatch(configPanel, /showPlacementControl/)
+  assert.doesNotMatch(configPanel, /updatePlacement/)
+})
+
+test('decoration editor title follows current page type', () => {
+  const editor = read('src/components/sp-web-decoration/index.vue')
+  const route = read('src/views/decoration/web-template/index.vue')
+
+  assert.match(editor, /PAGE_TYPE_LABEL_MAP/)
+  assert.match(editor, /product_list:\s*'商品列表模板'/)
+  assert.match(editor, /titleText\(\)[\s\S]*this\.title \|\| `\$\{this\.pageTypeLabel\}装修`/)
+  assert.match(editor, /subtitleText\(\)[\s\S]*`\$\{this\.pageTypeLabel\}编辑`/)
+  assert.match(route, /:title="decorationTitle"/)
+  assert.match(route, /decorationTitle\(\)[\s\S]*routePageType[\s\S]*装修/)
+  assert.doesNotMatch(route, /:title="\$t\('f9eb643d\.6741a0'\)"/)
+})
diff --git a/src/components/sp-web-decoration/utils/decorationLucide.js b/src/components/sp-web-decoration/utils/decorationLucide.js
new file mode 100644
index 0000000..1f4e6d4
--- /dev/null
+++ b/src/components/sp-web-decoration/utils/decorationLucide.js
@@ -0,0 +1,25 @@
+/**
+ * 装修器：分区插入下拉等用到的 Lucide 组件解析（白名单见 @/components/sp-icon/lucide-registry）。
+ */
+import { LUCIDE_ICONS } from '@/components/sp-icon/lucide-registry'
+
+const { Image, MapPin, LayoutGrid, PanelTop, Home, PanelBottom } = LUCIDE_ICONS
+
+/** 插入「模版分区」下拉：按 section type 选图标 */
+const SECTION_INSERT_ICON = {
+  'main-carousel': Image,
+  carousel: Image,
+  'image-hotspot': MapPin,
+  'product-shelf': LayoutGrid,
+  'announcement-bar': PanelTop,
+  header: Home,
+  footer: PanelBottom
+}
+
+export function getSectionInsertIconComponent(sectionType) {
+  return SECTION_INSERT_ICON[sectionType] || LayoutGrid
+}
+
+export default {
+  getSectionInsertIconComponent
+}
diff --git a/src/components/sp-web-decoration/utils/dsl.js b/src/components/sp-web-decoration/utils/dsl.js
new file mode 100644
index 0000000..9962827
--- /dev/null
+++ b/src/components/sp-web-decoration/utils/dsl.js
@@ -0,0 +1,410 @@
+import { createTemplateDocumentDsl } from '../definitions/documents/template.js'
+import { createCustomDocumentDsl } from '../definitions/documents/custom.js'
+import { createProductListDocumentDsl } from '../definitions/documents/product-list.js'
+import { createHeaderDocumentDsl } from '../definitions/documents/header.js'
+import { createFooterDocumentDsl } from '../definitions/documents/footer.js'
+import { createGlobalSections } from '../definitions/documents/global.js'
+import { createTypedSection } from '../definitions/factory.js'
+import { generateBlockId } from './nanoid.js'
+
+function cloneValue(value) {
+  return JSON.parse(JSON.stringify(value))
+}
+
+const HIDDEN_SECTION_TYPES = ['announcement-bar']
+
+function isHiddenSectionType(type) {
+  return HIDDEN_SECTION_TYPES.includes(type)
+}
+
+function filterVisibleSectionIds(order = [], sections = {}) {
+  return (Array.isArray(order) ? order : []).filter((id) => {
+    const section = sections?.[id]
+    return !section || !isHiddenSectionType(section.type)
+  })
+}
+
+function normalizeSectionShape(section, fallbackId) {
+  const nextSection = cloneValue(section || {})
+  if (fallbackId && !nextSection.id) nextSection.id = fallbackId
+  if (!nextSection.blockOrder && Array.isArray(nextSection.block_order)) {
+    nextSection.blockOrder = cloneValue(nextSection.block_order)
+  }
+  delete nextSection.block_order
+  return nextSection
+}
+
+export function createHomeDsl({ pageId = '', scene = '1001' } = {}) {
+  return createTemplateDocumentDsl({ pageId, scene })
+}
+
+export function createCustomDsl({ pageId = '', scene = '1001' } = {}) {
+  return createCustomDocumentDsl({ pageId, scene })
+}
+
+export function createProductListDsl({ pageId = '', scene = '1001' } = {}) {
+  return createProductListDocumentDsl({ pageId, scene })
+}
+
+export function createGlobalDsl(sections) {
+  let source = sections
+  if (source == null) {
+    source = createGlobalSections()
+  }
+  const resolvedSections = cloneValue(source)
+  const order = ['header']
+  if (resolvedSections.footer) order.push('footer')
+  return {
+    pageType: 'global',
+    pageId: 'global',
+    sections: resolvedSections,
+    order
+  }
+}
+
+function createDefaultHeaderSection() {
+  return createTypedSection('header', { fixedId: 'header' })
+}
+
+function createDefaultHeaderDsl() {
+  return createHeaderDocumentDsl()
+}
+
+function createDefaultFooterSection() {
+  return cloneValue(createFooterDocumentDsl().sections.footer)
+}
+
+function createScopedGlobalDsl({ pageId, section }) {
+  const sectionId = section.id || pageId
+  return {
+    pageType: pageId,
+    pageId,
+    sections: {
+      [sectionId]: cloneValue({ ...section, id: sectionId })
+    },
+    order: [sectionId]
+  }
+}
+
+export function createHeaderDsl(section, extraSections = {}, extraOrder = []) {
+  if (!section && Object.keys(extraSections || {}).length === 0 && extraOrder.length === 0) {
+    return createDefaultHeaderDsl()
+  }
+  const header = section || createDefaultHeaderSection()
+  const sections = {
+    header: normalizeSectionShape({ ...header, id: 'header' }, 'header')
+  }
+  filterVisibleSectionIds(extraOrder, extraSections).forEach((id) => {
+    if (id !== 'header' && id !== 'footer' && extraSections[id]) {
+      sections[id] = normalizeSectionShape(extraSections[id], id)
+    }
+  })
+  return {
+    pageType: 'header',
+    pageId: 'header',
+    sections,
+    order: [
+      'header',
+      ...filterVisibleSectionIds(extraOrder, extraSections).filter(
+        (id) => id !== 'header' && id !== 'footer'
+      )
+    ]
+  }
+}
+
+export function createFooterDsl(section, extraSections = {}, extraOrder = []) {
+  const footer = section || createDefaultFooterSection()
+  const sections = {}
+  extraOrder.forEach((id) => {
+    if (id !== 'footer' && extraSections[id]) {
+      sections[id] = normalizeSectionShape(extraSections[id], id)
+    }
+  })
+  sections.footer = normalizeSectionShape({ ...footer, id: 'footer' }, 'footer')
+  return {
+    pageType: 'footer',
+    pageId: 'footer',
+    sections,
+    order: [...extraOrder.filter((id) => id !== 'footer'), 'footer']
+  }
+}
+
+export function ensureGlobalDslDefaults(dsl) {
+  const fallback = createGlobalDsl()
+  if (!dsl || typeof dsl !== 'object') return fallback
+
+  const nextDsl = cloneValue(dsl)
+  if (!nextDsl.pageType) nextDsl.pageType = fallback.pageType
+  if (nextDsl.pageId === undefined || nextDsl.pageId === null) nextDsl.pageId = fallback.pageId
+  if (!nextDsl.sections || typeof nextDsl.sections !== 'object') nextDsl.sections = {}
+  if (!Array.isArray(nextDsl.order)) nextDsl.order = []
+
+  const defaultHeader = createDefaultHeaderSection()
+  const header = nextDsl.sections.header
+  if (!header || header.type !== 'header') {
+    nextDsl.sections.header = defaultHeader
+  } else {
+    const settingsKeys =
+      header.settings && typeof header.settings === 'object' ? Object.keys(header.settings) : []
+    const blockKeys =
+      header.blocks && typeof header.blocks === 'object' ? Object.keys(header.blocks) : []
+    const blockOrderLength = Array.isArray(header.blockOrder) ? header.blockOrder.length : 0
+    if (settingsKeys.length === 0 && blockKeys.length === 0 && blockOrderLength === 0) {
+      nextDsl.sections.header = defaultHeader
+    } else {
+      if (settingsKeys.length === 0) {
+        nextDsl.sections.header.settings = cloneValue(defaultHeader.settings)
+      }
+      if (blockKeys.length === 0 || blockOrderLength === 0) {
+        nextDsl.sections.header.blocks = cloneValue(defaultHeader.blocks)
+        nextDsl.sections.header.blockOrder = cloneValue(defaultHeader.blockOrder)
+      }
+    }
+  }
+
+  if (!nextDsl.order.includes('header')) {
+    const footerIndex = nextDsl.order.indexOf('footer')
+    if (footerIndex >= 0) {
+      nextDsl.order.splice(footerIndex, 0, 'header')
+    } else {
+      nextDsl.order.unshift('header')
+    }
+  }
+
+  return nextDsl
+}
+
+export function splitGlobalDsl(globalDsl) {
+  const normalizedGlobalDsl = ensureGlobalDslDefaults(globalDsl)
+  const { header, footer } = normalizedGlobalDsl.sections || {}
+  const globalOrder = normalizedGlobalDsl.order || []
+  const footerIndex = globalOrder.indexOf('footer')
+  const headerOrder = filterVisibleSectionIds(
+    (footerIndex >= 0 ? globalOrder.slice(0, footerIndex) : globalOrder).filter(
+      (id) => id !== 'footer'
+    ),
+    normalizedGlobalDsl.sections
+  )
+  const footerOrder =
+    footerIndex >= 0 ? globalOrder.slice(footerIndex).filter((id) => id !== 'footer') : []
+  const headerSections = {}
+  headerOrder.forEach((id) => {
+    if (id !== 'header' && normalizedGlobalDsl.sections?.[id]) {
+      headerSections[id] = cloneValue(normalizedGlobalDsl.sections[id])
+    }
+  })
+  const footerSections = {}
+  footerOrder.forEach((id) => {
+    if (normalizedGlobalDsl.sections?.[id]) {
+      footerSections[id] = cloneValue(normalizedGlobalDsl.sections[id])
+    }
+  })
+  const headerDsl = createHeaderDsl(header, headerSections, headerOrder)
+  const footerDsl = footer
+    ? createFooterDsl(footer, footerSections, footerOrder)
+    : createFooterDsl()
+  return {
+    headerDsl,
+    footerDsl
+  }
+}
+
+export function insertSection(dsl, section, index) {
+  const nextDsl = cloneValue(dsl)
+  const nextIndex =
+    typeof index === 'number' && index >= 0 && index <= nextDsl.order.length
+      ? index
+      : nextDsl.order.length
+  nextDsl.sections[section.id] = cloneValue(section)
+  nextDsl.order.splice(nextIndex, 0, section.id)
+  return nextDsl
+}
+
+export function updateSectionSettings(dsl, sectionId, patch) {
+  if (!dsl.sections[sectionId]) return cloneValue(dsl)
+  const nextDsl = cloneValue(dsl)
+  nextDsl.sections[sectionId].settings = {
+    ...nextDsl.sections[sectionId].settings,
+    ...cloneValue(patch)
+  }
+  return nextDsl
+}
+
+export function insertBlock(dsl, sectionId, block, insertIndex) {
+  if (!dsl.sections[sectionId] || !block?.id) return cloneValue(dsl)
+  const nextDsl = cloneValue(dsl)
+  nextDsl.sections[sectionId].blocks = {
+    ...(nextDsl.sections[sectionId].blocks || {}),
+    [block.id]: cloneValue(block)
+  }
+  const prevOrder = nextDsl.sections[sectionId].blockOrder || []
+  const order = prevOrder.slice()
+  if (
+    typeof insertIndex === 'number' &&
+    !Number.isNaN(insertIndex) &&
+    insertIndex >= 0 &&
+    insertIndex <= order.length
+  ) {
+    order.splice(insertIndex, 0, block.id)
+  } else {
+    order.push(block.id)
+  }
+  nextDsl.sections[sectionId].blockOrder = order
+  return nextDsl
+}
+
+export function updateBlockSettings(dsl, sectionId, blockId, patch) {
+  const section = dsl.sections[sectionId]
+  if (!section?.blocks?.[blockId]) return cloneValue(dsl)
+  const nextDsl = cloneValue(dsl)
+  nextDsl.sections[sectionId].blocks[blockId].settings = {
+    ...nextDsl.sections[sectionId].blocks[blockId].settings,
+    ...cloneValue(patch)
+  }
+  return nextDsl
+}
+
+export function removeBlock(dsl, sectionId, blockId) {
+  const section = dsl.sections[sectionId]
+  if (!section?.blocks?.[blockId]) return cloneValue(dsl)
+  const nextDsl = cloneValue(dsl)
+  delete nextDsl.sections[sectionId].blocks[blockId]
+  nextDsl.sections[sectionId].blockOrder = (nextDsl.sections[sectionId].blockOrder || []).filter(
+    (id) => id !== blockId
+  )
+  return nextDsl
+}
+
+export function duplicateBlock(dsl, sectionId, blockId) {
+  const section = dsl.sections[sectionId]
+  const sourceBlock = section?.blocks?.[blockId]
+  if (!sourceBlock) return cloneValue(dsl)
+  const nextDsl = cloneValue(dsl)
+  const duplicatedBlock = cloneValue(sourceBlock)
+  duplicatedBlock.id = generateBlockId(sourceBlock.type)
+  nextDsl.sections[sectionId].blocks[duplicatedBlock.id] = duplicatedBlock
+  const order = (nextDsl.sections[sectionId].blockOrder || []).slice()
+  const sourceIndex = order.indexOf(blockId)
+  order.splice(sourceIndex >= 0 ? sourceIndex + 1 : order.length, 0, duplicatedBlock.id)
+  nextDsl.sections[sectionId].blockOrder = order
+  return nextDsl
+}
+
+export function replaceBlockOrder(dsl, sectionId, blockOrder) {
+  if (!dsl.sections[sectionId]) return cloneValue(dsl)
+  const nextDsl = cloneValue(dsl)
+  nextDsl.sections[sectionId].blockOrder = blockOrder.slice()
+  return nextDsl
+}
+
+export function removeSection(dsl, sectionId) {
+  if (!dsl.sections[sectionId]) return cloneValue(dsl)
+  const nextDsl = cloneValue(dsl)
+  delete nextDsl.sections[sectionId]
+  nextDsl.order = nextDsl.order.filter((id) => id !== sectionId)
+  return nextDsl
+}
+
+export function duplicateSection(dsl, sectionId, createDefaultSection) {
+  const sourceSection = dsl.sections[sectionId]
+  if (!sourceSection) return cloneValue(dsl)
+  const duplicatedSection = createDefaultSection(sourceSection.type)
+  duplicatedSection.disabled = sourceSection.disabled
+  duplicatedSection.settings = cloneValue(sourceSection.settings)
+  duplicatedSection.blocks = cloneValue(sourceSection.blocks || {})
+  duplicatedSection.blockOrder = cloneValue(sourceSection.blockOrder || [])
+  duplicatedSection.title = sourceSection.title
+  duplicatedSection.titleKey = sourceSection.titleKey
+
+  const nextDsl = cloneValue(dsl)
+  const sourceIndex = nextDsl.order.findIndex((id) => id === sectionId)
+  nextDsl.sections[duplicatedSection.id] = duplicatedSection
+  nextDsl.order.splice(sourceIndex + 1, 0, duplicatedSection.id)
+  return nextDsl
+}
+
+export function moveSection(dsl, sectionId, targetIndex) {
+  const currentIndex = dsl.order.findIndex((id) => id === sectionId)
+  if (currentIndex === -1) return cloneValue(dsl)
+
+  const normalizedTargetIndex = Math.max(0, Math.min(targetIndex, dsl.order.length - 1))
+  if (currentIndex === normalizedTargetIndex) {
+    return cloneValue(dsl)
+  }
+
+  const nextDsl = cloneValue(dsl)
+  nextDsl.order.splice(currentIndex, 1)
+  nextDsl.order.splice(normalizedTargetIndex, 0, sectionId)
+  return nextDsl
+}
+
+export function replaceSection(dsl, sectionId, nextSection) {
+  if (!dsl.sections[sectionId]) return cloneValue(dsl)
+  const nextDsl = cloneValue(dsl)
+  nextDsl.sections[sectionId] = cloneValue(nextSection)
+  return nextDsl
+}
+
+export function composePreviewDsl({ pageType = 'home', pageId = '', dsl, headerDsl, footerDsl }) {
+  const headerOrder = Array.isArray(headerDsl?.order)
+    ? headerDsl.order.filter((id) => id !== 'footer')
+    : []
+  const footerOrder = Array.isArray(footerDsl?.order) ? footerDsl.order.slice() : []
+  return {
+    pageType,
+    pageId,
+    sections: {
+      ...(headerDsl?.sections || {}),
+      ...(footerDsl?.sections || {}),
+      ...(dsl?.sections || {})
+    },
+    order: [...headerOrder, ...(dsl?.order || []).slice(), ...footerOrder],
+    meta: cloneValue(dsl?.meta || {})
+  }
+}
+
+export function serializeDsl(dsl) {
+  const nextDsl = cloneValue(dsl)
+  Object.keys(nextDsl.sections || {}).forEach((sectionId) => {
+    const section = nextDsl.sections[sectionId]
+    section.block_order = cloneValue(section.blockOrder || [])
+  })
+  return nextDsl
+}
+
+export function deserializeDsl(dsl) {
+  const nextDsl = cloneValue(dsl)
+  Object.keys(nextDsl.sections || {}).forEach((sectionId) => {
+    const section = nextDsl.sections[sectionId]
+    if (!section.blockOrder && Array.isArray(section.block_order)) {
+      section.blockOrder = cloneValue(section.block_order)
+    }
+    delete section.block_order
+  })
+  return nextDsl
+}
+
+export default {
+  createHomeDsl,
+  createCustomDsl,
+  createProductListDsl,
+  createGlobalDsl,
+  insertSection,
+  updateSectionSettings,
+  insertBlock,
+  updateBlockSettings,
+  removeBlock,
+  duplicateBlock,
+  replaceBlockOrder,
+  removeSection,
+  duplicateSection,
+  moveSection,
+  replaceSection,
+  composePreviewDsl,
+  serializeDsl,
+  deserializeDsl,
+  ensureGlobalDslDefaults,
+  splitGlobalDsl,
+  createHeaderDsl,
+  createFooterDsl
+}
diff --git a/src/components/sp-web-decoration/utils/insertPicker.js b/src/components/sp-web-decoration/utils/insertPicker.js
new file mode 100644
index 0000000..92bbc98
--- /dev/null
+++ b/src/components/sp-web-decoration/utils/insertPicker.js
@@ -0,0 +1,54 @@
+import {
+  getSectionBlockTypes,
+  getTypedBlockDefinition as getBlockDefinition,
+  getTypedSectionDefinition as getSectionDefinition
+} from '../definitions/registry.js'
+
+function normalizePickerItem(item) {
+  return {
+    ...item,
+    label: item.label || item.title || item.type
+  }
+}
+
+export function createSectionPickerItems(sectionDefinitions) {
+  return (sectionDefinitions || []).map((definition) =>
+    normalizePickerItem({
+      key: definition.type,
+      type: definition.type,
+      label: definition.name
+    })
+  )
+}
+
+/** 按固定 type 列表生成「添加分区」项（含全局分区如 announcement-bar） */
+export function createSectionPickerItemsForTypes(types) {
+  return (types || [])
+    .map((type) => {
+      const definition = getSectionDefinition(type)
+      if (!definition) return null
+      return normalizePickerItem({
+        key: definition.type,
+        type: definition.type,
+        label: definition.name
+      })
+    })
+    .filter(Boolean)
+}
+
+export function createBlockPickerItems(sectionType) {
+  return getSectionBlockTypes(sectionType).map((blockType) => {
+    const definition = getBlockDefinition(blockType)
+    return normalizePickerItem({
+      key: blockType,
+      type: blockType,
+      label: definition?.name
+    })
+  })
+}
+
+export default {
+  createSectionPickerItems,
+  createSectionPickerItemsForTypes,
+  createBlockPickerItems
+}
diff --git a/src/components/sp-web-decoration/utils/menuSelection.js b/src/components/sp-web-decoration/utils/menuSelection.js
new file mode 100644
index 0000000..c8883ed
--- /dev/null
+++ b/src/components/sp-web-decoration/utils/menuSelection.js
@@ -0,0 +1,41 @@
+const MENU_LABEL_MAP = {
+  'main-menu': 'Company'
+}
+
+export function pickMenuValue(source) {
+  if (!source || typeof source !== 'object') return source || null
+
+  if (Object.prototype.hasOwnProperty.call(source, 'menu')) {
+    return source.menu
+  }
+
+  return source.menu_id ?? source.menuId ?? null
+}
+
+export function normalizeSelectedMenu(menu) {
+  if (!menu) return null
+
+  if (typeof menu === 'object') {
+    const id = menu.id ?? menu.menu_id ?? menu.menuId ?? ''
+    const key = menu.key ?? ''
+    const name = menu.name ?? menu.title ?? menu.label ?? ''
+
+    if (id === '' && key === '' && name === '') return null
+
+    return {
+      ...menu,
+      ...(id !== '' ? { id } : {}),
+      ...(key !== '' ? { key } : {}),
+      ...(name !== '' ? { name } : {})
+    }
+  }
+
+  const key = String(menu).trim()
+  if (!key) return null
+
+  return {
+    id: key,
+    key,
+    name: MENU_LABEL_MAP[key] || ''
+  }
+}
diff --git a/src/components/sp-web-decoration/utils/nanoid.js b/src/components/sp-web-decoration/utils/nanoid.js
new file mode 100644
index 0000000..583c27c
--- /dev/null
+++ b/src/components/sp-web-decoration/utils/nanoid.js
@@ -0,0 +1,23 @@
+const CHARS = 'abcdefghijklmnopqrstuvwxyz0123456789'
+
+export function nanoid(length = 6) {
+  let id = ''
+  for (let index = 0; index < length; index += 1) {
+    id += CHARS[Math.floor(Math.random() * CHARS.length)]
+  }
+  return id
+}
+
+export function generateSectionId(type) {
+  return `${type}-${nanoid()}`
+}
+
+export function generateBlockId(type) {
+  return `${type}-${nanoid()}`
+}
+
+export default {
+  nanoid,
+  generateSectionId,
+  generateBlockId
+}
diff --git a/src/components/sp-web-decoration/utils/pageTypes.js b/src/components/sp-web-decoration/utils/pageTypes.js
new file mode 100644
index 0000000..987b753
--- /dev/null
+++ b/src/components/sp-web-decoration/utils/pageTypes.js
@@ -0,0 +1,25 @@
+const RUNTIME_PAGE_TYPE_MAP = {
+  index: 'home',
+  home: 'home',
+  list: 'list',
+  custom: 'custom',
+  product_list: 'product_list'
+}
+
+const PREVIEW_ROUTE_MAP = {
+  home: () => '/',
+  list: () => '/collections/all',
+  custom: ({ pageId }) => `/custom/${encodeURIComponent(String(pageId || ''))}`,
+  product_list: () => '/collections/all'
+}
+
+export function normalizeDecorationPageType(pageType = 'home') {
+  const key = String(pageType || 'home')
+  return RUNTIME_PAGE_TYPE_MAP[key] || key
+}
+
+export function resolveDecorationPreviewPath(pageType, pageId) {
+  const normalizedPageType = normalizeDecorationPageType(pageType)
+  const createPath = PREVIEW_ROUTE_MAP[normalizedPageType]
+  return createPath ? createPath({ pageId }) : '/'
+}
diff --git a/src/components/sp-web-decoration/utils/panelState.js b/src/components/sp-web-decoration/utils/panelState.js
new file mode 100644
index 0000000..b7977e9
--- /dev/null
+++ b/src/components/sp-web-decoration/utils/panelState.js
@@ -0,0 +1,232 @@
+import {
+  getTypedBlockDefinition,
+  getSectionDefaultSettings,
+  getBlockDefaultSettings
+} from '../definitions/registry.js'
+
+function cloneValue(value) {
+  return JSON.parse(JSON.stringify(value))
+}
+
+function mergeWithDefaults(defaults = {}, settings = {}) {
+  return {
+    ...cloneValue(defaults),
+    ...cloneValue(settings)
+  }
+}
+
+function clampCoordinate(value) {
+  const numericValue = Number(value)
+  if (Number.isNaN(numericValue)) return 0
+  if (numericValue < 0) return 0
+  if (numericValue > 100) return 100
+  return numericValue
+}
+
+function normalizeProductShelfCompatibleSettings(settings) {
+  const nextSettings = { ...settings }
+
+  nextSettings.displayMode = nextSettings.displayMode || nextSettings.sourceMode || 'category'
+  nextSettings.itemIds = Array.isArray(nextSettings.itemIds)
+    ? nextSettings.itemIds.filter(Boolean).slice(0, nextSettings.limit || 8)
+    : []
+
+  return nextSettings
+}
+
+export function normalizeProductTabShelfSettings(settings = {}) {
+  return mergeWithDefaults(getSectionDefaultSettings('product-tab-shelf'), settings)
+}
+
+export function normalizeProductTabBlockSettings(settings = {}) {
+  const nextSettings = mergeWithDefaults(getBlockDefaultSettings('product-tab'), settings)
+  nextSettings.product_ids = Array.isArray(nextSettings.product_ids)
+    ? nextSettings.product_ids.filter(Boolean)
+    : []
+  nextSettings.product_snapshots = Array.isArray(nextSettings.product_snapshots)
+    ? nextSettings.product_snapshots.filter((product) =>
+        nextSettings.product_ids.includes(product?.item_id)
+      )
+    : []
+  nextSettings.limit = Number.isFinite(Number(nextSettings.limit))
+    ? Math.min(24, Math.max(2, Number(nextSettings.limit)))
+    : 8
+  if (
+    nextSettings.size !== undefined &&
+    !['xsmall', 'small', 'medium', 'large', 'xlarge'].includes(nextSettings.size)
+  ) {
+    delete nextSettings.size
+    delete nextSettings.size_override
+  }
+  if (!nextSettings.size_override) {
+    delete nextSettings.size_override
+  }
+  if (nextSettings.columns !== undefined) {
+    nextSettings.columns = [2, 3, 4].includes(Number(nextSettings.columns))
+      ? Number(nextSettings.columns)
+      : undefined
+  }
+
+  return nextSettings
+}
+
+function normalizeHotspotCompatibleSettings(settings) {
+  const nextSettings = { ...settings }
+
+  nextSettings.x = clampCoordinate(nextSettings.x)
+  nextSettings.y = clampCoordinate(nextSettings.y)
+  nextSettings.shape = nextSettings.shape === 'rect' ? 'rect' : 'circle'
+
+  return nextSettings
+}
+
+function normalizeSectionSettings(type, settings = {}) {
+  const nextSettings = mergeWithDefaults(getSectionDefaultSettings(type), settings)
+
+  if (type === 'product-shelf') return normalizeProductShelfCompatibleSettings(nextSettings)
+  if (type === 'product-tab-shelf') return normalizeProductTabShelfSettings(nextSettings)
+  return nextSettings
+}
+
+function normalizeBlockSettingsValue(type, settings = {}) {
+  const nextSettings = mergeWithDefaults(getBlockDefaultSettings(type), settings)
+
+  if (type === 'hotspot') return normalizeHotspotCompatibleSettings(nextSettings)
+  if (type === 'product-tab') return normalizeProductTabBlockSettings(nextSettings)
+  if (type === 'footer-menu' || type === 'footer-image' || type === 'footer-text') {
+    const span = Number(nextSettings.column_span)
+    nextSettings.column_span = Number.isFinite(span)
+      ? Math.min(12, Math.max(1, Math.round(span)))
+      : 12
+  }
+  return nextSettings
+}
+
+export function normalizeTypedSectionSettings(type, settings = {}) {
+  return normalizeSectionSettings(type, settings)
+}
+
+export function normalizeTypedBlockSettings(type, settings = {}) {
+  return normalizeBlockSettingsValue(type, settings)
+}
+
+function normalizeBlockSettings(block) {
+  if (!block) return block
+
+  return {
+    ...block,
+    settings: normalizeBlockSettingsValue(block.type, block.settings)
+  }
+}
+
+export function normalizeSection(section) {
+  if (!section) return section
+
+  const nextSection = cloneValue(section)
+  nextSection.blockOrder = Array.isArray(nextSection.blockOrder)
+    ? nextSection.blockOrder.slice()
+    : Array.isArray(nextSection.block_order)
+    ? nextSection.block_order.slice()
+    : []
+  nextSection.blocks = nextSection.blocks || {}
+  nextSection.settings = normalizeSectionSettings(nextSection.type, nextSection.settings)
+
+  Object.keys(nextSection.blocks).forEach((blockId) => {
+    nextSection.blocks[blockId] = normalizeBlockSettings(nextSection.blocks[blockId])
+  })
+
+  return nextSection
+}
+
+export function updateSectionBlock(section, blockId, patch) {
+  const nextSection = normalizeSection(section)
+  if (!nextSection?.blocks?.[blockId]) return nextSection
+
+  nextSection.blocks[blockId] = normalizeBlockSettings({
+    ...nextSection.blocks[blockId],
+    settings: {
+      ...nextSection.blocks[blockId].settings,
+      ...cloneValue(patch)
+    }
+  })
+
+  return nextSection
+}
+
+export function addSectionBlock(section, createBlock, settings = {}) {
+  const nextSection = normalizeSection(section)
+  const block = createBlock()
+  block.settings = {
+    ...block.settings,
+    ...cloneValue(settings)
+  }
+
+  nextSection.blocks[block.id] = normalizeBlockSettings(block)
+  nextSection.blockOrder = [...nextSection.blockOrder, block.id]
+
+  return {
+    section: nextSection,
+    blockId: block.id
+  }
+}
+
+export function removeSectionBlock(section, blockId) {
+  const nextSection = normalizeSection(section)
+  if (!nextSection?.blocks?.[blockId]) return nextSection
+
+  delete nextSection.blocks[blockId]
+  nextSection.blockOrder = nextSection.blockOrder.filter((id) => id !== blockId)
+
+  return nextSection
+}
+
+export function moveSectionBlock(section, blockId, targetIndex) {
+  const nextSection = normalizeSection(section)
+  const currentIndex = nextSection.blockOrder.findIndex((id) => id === blockId)
+  if (currentIndex === -1) return nextSection
+
+  const normalizedIndex = Math.max(0, Math.min(targetIndex, nextSection.blockOrder.length - 1))
+  if (currentIndex === normalizedIndex) return nextSection
+
+  nextSection.blockOrder.splice(currentIndex, 1)
+  nextSection.blockOrder.splice(normalizedIndex, 0, blockId)
+
+  return nextSection
+}
+
+export function sanitizeProductItemIds(itemIds, limit) {
+  const max = Number(limit) > 0 ? Number(limit) : Infinity
+  const uniqueIds = []
+
+  ;(Array.isArray(itemIds) ? itemIds : []).forEach((itemId) => {
+    if (!itemId || uniqueIds.includes(itemId)) return
+    if (uniqueIds.length >= max) return
+    uniqueIds.push(itemId)
+  })
+
+  return uniqueIds
+}
+
+export function createDefaultBlock(type, id) {
+  const definition = getTypedBlockDefinition(type)
+  return {
+    id,
+    type,
+    disabled: false,
+    settings: cloneValue(getBlockDefaultSettings(type) || {})
+  }
+}
+
+export default {
+  normalizeTypedSectionSettings,
+  normalizeTypedBlockSettings,
+  normalizeProductTabShelfSettings,
+  normalizeProductTabBlockSettings,
+  normalizeSection,
+  updateSectionBlock,
+  addSectionBlock,
+  removeSectionBlock,
+  moveSectionBlock,
+  sanitizeProductItemIds,
+  createDefaultBlock
+}
diff --git a/src/components/sp-web-decoration/utils/postMessage.js b/src/components/sp-web-decoration/utils/postMessage.js
new file mode 100644
index 0000000..f178ec3
--- /dev/null
+++ b/src/components/sp-web-decoration/utils/postMessage.js
@@ -0,0 +1,152 @@
+import { normalizeDecorationPageType, resolveDecorationPreviewPath } from './pageTypes'
+
+function resolvePreviewWebsiteOrigin(websiteUrl) {
+  if (!websiteUrl) return ''
+  try {
+    const baseHref =
+      typeof window !== 'undefined' && window.location?.href
+        ? window.location.href
+        : 'http://localhost/'
+    return new URL(websiteUrl, baseHref).origin
+  } catch {
+    return ''
+  }
+}
+
+function isLoopbackHostname(hostname) {
+  return (
+    hostname === 'localhost' ||
+    hostname === '127.0.0.1' ||
+    hostname === '0.0.0.0' ||
+    hostname === '[::1]'
+  )
+}
+
+function isDevEnv() {
+  return typeof process !== 'undefined' && process.env && process.env.NODE_ENV === 'development'
+}
+
+function isAllowedPreviewOrigin(eventOrigin, expectedOrigin) {
+  if (!eventOrigin) return false
+  if (!expectedOrigin) {
+    if (!isDevEnv()) return false
+    try {
+      const { protocol, hostname } = new URL(eventOrigin)
+      if (protocol !== 'http:' && protocol !== 'https:') return false
+      return isLoopbackHostname(hostname)
+    } catch {
+      return false
+    }
+  }
+  if (eventOrigin === expectedOrigin) return true
+  if (!isDevEnv()) return false
+  try {
+    const a = new URL(eventOrigin)
+    const b = new URL(expectedOrigin)
+    if (a.protocol !== b.protocol) return false
+    if (a.port !== b.port) return false
+    return isLoopbackHostname(a.hostname) && isLoopbackHostname(b.hostname)
+  } catch {
+    return false
+  }
+}
+
+export function createDecorationMessenger(websiteUrl) {
+  const previewOrigin = resolvePreviewWebsiteOrigin(websiteUrl)
+
+  function getPreviewUrl({ templateId, pageType = 'home' }) {
+    if (!websiteUrl) return ''
+    const normalizedPageType = normalizeDecorationPageType(pageType)
+    const pageId = templateId || normalizedPageType
+    try {
+      const base =
+        typeof window !== 'undefined' && window.location?.href
+          ? new URL(websiteUrl, window.location.href)
+          : new URL(websiteUrl)
+      if (!base.pathname || base.pathname === '') {
+        base.pathname = '/'
+      }
+      base.pathname = resolveDecorationPreviewPath(normalizedPageType, pageId)
+      base.searchParams.set('designMode', '1')
+      base.searchParams.set('pageType', normalizedPageType)
+      base.searchParams.set('pageId', String(pageId))
+      return base.toString()
+    } catch {
+      const originOnly = String(websiteUrl).split('?')[0].replace(/\/+$/, '') || ''
+      const qs = new URLSearchParams({
+        designMode: '1',
+        pageType: String(normalizedPageType),
+        pageId: String(pageId)
+      })
+      const path = resolveDecorationPreviewPath(normalizedPageType, pageId).replace(/\/$/, '')
+      return `${originOnly}${path}/?${qs.toString()}`
+    }
+  }
+
+  function send(type, iframeWindow, payload) {
+    if (!iframeWindow || typeof iframeWindow.postMessage !== 'function') return
+    const target = previewOrigin || (isDevEnv() ? '*' : '')
+    if (!target) {
+      console.warn(
+        '[sp-web-decoration] 无法向预览 iframe 发送消息：缺少商城 origin（请检查 VUE_APP_WEBSITE）'
+      )
+      return
+    }
+    try {
+      iframeWindow.postMessage({ type, payload }, target)
+    } catch (err) {
+      console.warn('[sp-web-decoration] postMessage 失败:', err)
+    }
+  }
+
+  function sendInit(iframeWindow, payload) {
+    send('DECORATION_INIT', iframeWindow, payload)
+  }
+
+  function sendUpdate(iframeWindow, payload) {
+    send('DECORATION_UPDATE', iframeWindow, payload)
+  }
+
+  function sendMessage(iframeWindow, type, payload) {
+    send(type, iframeWindow, payload)
+  }
+
+  function isAllowedOrigin(origin) {
+    return isAllowedPreviewOrigin(origin, previewOrigin)
+  }
+
+  function onMessage(handler) {
+    if (typeof window === 'undefined') return () => {}
+    const listener = (event) => {
+      const allowed = isAllowedOrigin(event.origin)
+      if (isDevEnv()) {
+        console.log('[sp-web-decoration] raw message', {
+          origin: event.origin,
+          expectedOrigin: previewOrigin,
+          allowed,
+          type: event.data?.type
+        })
+      }
+      if (!allowed) return
+      handler(event)
+    }
+    window.addEventListener('message', listener)
+    return () => {
+      window.removeEventListener('message', listener)
+    }
+  }
+
+  return {
+    previewOrigin,
+    getPreviewUrl,
+    sendInit,
+    sendUpdate,
+    sendMessage,
+    isAllowedOrigin,
+    onMessage
+  }
+}
+
+export default {
+  createDecorationMessenger
+}
diff --git a/src/components/sp-web-decoration/utils/sectionAppearance.js b/src/components/sp-web-decoration/utils/sectionAppearance.js
new file mode 100644
index 0000000..40b7919
--- /dev/null
+++ b/src/components/sp-web-decoration/utils/sectionAppearance.js
@@ -0,0 +1,25 @@
+export const SECTION_PADDING_OPTIONS = [
+  { label: '无', value: 'none' },
+  { label: '极小', value: 'xxs' },
+  { label: '特小', value: 'xs' },
+  { label: '小', value: 's' },
+  { label: '中', value: 'm' },
+  { label: '大', value: 'l' },
+  { label: '特大', value: 'xl' }
+]
+
+export const SECTION_COLOR_SCHEMES = [
+  { label: '默认', value: 'scheme-1', background: '#ffffff', foreground: '#191A1D' },
+  { label: '浅灰', value: 'scheme-2', background: '#f5f7fb', foreground: '#191A1D' },
+  { label: '深色', value: 'scheme-3', background: '#111214', foreground: '#ffffff' },
+  { label: '品牌', value: 'scheme-4', background: '#7c3aed', foreground: '#ffffff' },
+  { label: '柔和', value: 'scheme-5', background: '#eef2ff', foreground: '#191A1D' }
+]
+
+export function getSectionPaddingValue(value) {
+  return SECTION_PADDING_OPTIONS.some((item) => item.value === value) ? value : 'm'
+}
+
+export function getSectionColorScheme(value) {
+  return SECTION_COLOR_SCHEMES.find((item) => item.value === value) || SECTION_COLOR_SCHEMES[0]
+}
diff --git a/src/composables/useForm.js b/src/composables/useForm.js
index f301261..661cc52 100755
--- a/src/composables/useForm.js
+++ b/src/composables/useForm.js
@@ -32,7 +32,7 @@ export function useForm(options = {}) {
     data() {
       return {
         localFormItems: formItems,
-        formData: {},
+        formData: { ...(this.value || {}) },
         formRules: rules // 表单校验规则
       }
     },
@@ -155,7 +155,7 @@ export function useForm(options = {}) {
           labelInline: labelInline,
           showDefaultActions: showDefaultActions,
           hideFieldRequiredMark: hideFieldRequiredMark,
-          value: this.value
+          value: this.formData
         },
         on: {
           // 'field-change': ({ fieldName, value }) => {
diff --git a/src/i18n/locales/ar.json b/src/i18n/locales/ar.json
index c1d443e..8b5db31 100644
--- a/src/i18n/locales/ar.json
+++ b/src/i18n/locales/ar.json
@@ -15756,6 +15756,8 @@
   "8b0d1458.6343df": "تنسيق الصفحة",
   "8b0d1458.2b6bc0": "إجراءات",
   "8b0d1458.b73a0b": "إضافة/تحرير صفحة",
+  "8b0d1458.e3a8f1": "إضافة",
+  "8b0d1458.f4b9c2": "تحرير",
   "8b0d1458.7d5cc3": "أدخل اسم الصفحة",
   "8b0d1458.9c5cf8": "أدخل وصف الصفحة",
   "8b0d1458.46f391": "نوع الصفحة",
@@ -21927,7 +21929,10 @@
   "7d3fbb6d.5a0a70": "قائمة القوالب",
   "7d3fbb6d.7de289": "صفحة تسجيل الدخول",
   "7d3fbb6d.81b2cb": "الديكور",
+  "7d3fbb6d.950dc2": "قوائم التنقل",
+  "7d3fbb6d.ba750e": "قائمة جديدة",
   "7d3fbb6d.c701e9": "ألوان المول",
+  "7d3fbb6d.ca3472": "تحرير القائمة",
   "7d3fbb6d.cc5507": "معلومات المول",
   "7d3fbb6d.db1c89": "الرئيسية",
   "7d3fbb6d.e807b2": "إعداد SEO",
@@ -22743,5 +22748,143 @@
   "41f42a3e.8085da": "اختر اللغات المستهدفة:",
   "41f42a3e.ee9938": "حفظ فقط",
   "41f42a3e.fe6d9b": "حفظ وترجمة",
-  "bea3f44a.e01a11": "تم إرسال مهمة التصدير، تحقق من سجل التصدير"
+  "bea3f44a.e01a11": "تم إرسال مهمة التصدير، تحقق من سجل التصدير",
+  "025a9251.a733c4": "النموذج غير جاهز",
+  "4c11e15d.ebf4e4": "تم الحفظ في مسودة محلية. تكامل الخادم لم يكتمل بعد.",
+  "732e5057.3b1083": "تم الحفظ بنجاح",
+  "738edee2.1a06dc": "حذف القائمة \"{name}\"؟ سيتم حذف جميع عناصر القائمة التابعة لها أيضًا.",
+  "738edee2.2f39c3": "إنشاء قائمة تنقل",
+  "738edee2.2f4aad": "حذف",
+  "738edee2.4cd562": "يرجى إدخال اسم القائمة",
+  "738edee2.7419d6": "عناصر القائمة",
+  "738edee2.8ee9f2": "اسم القائمة",
+  "738edee2.95b351": "تعديل",
+  "738edee2.ff36f6": "قائمة التنقل",
+  "7856f5b5.06e2f8": "يرجى إدخال الاسم",
+  "7856f5b5.0fec18": "مسار الانتقال",
+  "7856f5b5.2ff819": "مثال: ملابس نسائية",
+  "7856f5b5.4ef9f6": "يرجى اختيار صفحة",
+  "7856f5b5.575623": "يرجى اختيار صفحة الانتقال",
+  "7856f5b5.c360e9": "الترتيب",
+  "7856f5b5.d7ec2d": "الاسم",
+  "7856f5b5.fbdd56": "أخرى: {path}",
+  "80206cbf.0007d1": "تم الحذف بنجاح",
+  "80206cbf.0e2999": "فشل تحميل تفاصيل القائمة",
+  "80206cbf.3b1083": "تم الحفظ بنجاح",
+  "80206cbf.4cd562": "يرجى إدخال اسم القائمة",
+  "80206cbf.50eaf9": "تأكيد الحذف",
+  "80206cbf.59a3f5": "يرجى إدخال المعرف",
+  "80206cbf.625fb2": "إلغاء",
+  "80206cbf.648c5e": "إضافة عنصر قائمة",
+  "80206cbf.645de9": "مثال: header_nav",
+  "80206cbf.7419d6": "عناصر القائمة",
+  "80206cbf.76ac0c": "معرف قائمة غير صالح",
+  "80206cbf.78b5ac": "تأكيد حذف \"{name}\"؟ سيتم حذف عناصر القائمة الفرعية أيضًا.",
+  "80206cbf.83e4fb": "يرجى حفظ المعلومات الأساسية للقائمة أولاً. بعد الحفظ يمكنك إدارة عناصر القائمة في هذه الصفحة.",
+  "80206cbf.8ee9f2": "اسم القائمة",
+  "80206cbf.a733c4": "النموذج غير جاهز",
+  "80206cbf.ba750e": "قائمة جديدة",
+  "80206cbf.be5fbb": "حفظ",
+  "80206cbf.c0650e": "تأكيد حذف \"{name}\"؟",
+  "80206cbf.ca3472": "تعديل القائمة",
+  "80206cbf.cd1e63": "تعديل عنصر القائمة",
+  "80206cbf.d97d00": "فشل الإنشاء: لم يتم إرجاع معرف القائمة",
+  "80206cbf.dd36ca": "فشل تحميل القائمة",
+  "80206cbf.e0b6e8": "عنصر قائمة جديد",
+  "80206cbf.e83a25": "تأكيد",
+  "80206cbf.eb6d93": "مثال: التنقل العلوي",
+  "80206cbf.f3c00c": "المعرف",
+  "e45f0be0.2f4aad": "حذف",
+  "e45f0be0.95b351": "تعديل",
+  "e45f0be0.d87298": "إضافة عنصر فرعي",
+  "f9eb643d.31d83a": "المرحلة الأولى تدعم فقط تحرير قالب الصفحة الرئيسية.",
+  "f9eb643d.5f4112": "رجوع",
+  "f9eb643d.6741a0": "تصميم قالب الصفحة الرئيسية",
+  "f9eb643d.dbc2cc": "هذا المشهد غير مدعوم حالياً",
+  "fc8ead3c.12688a": "مركز الأعضاء",
+  "fc8ead3c.c017be": "عربة التسوق",
+  "fc8ead3c.c4186b": "صفحة المقال",
+  "fc8ead3c.fa5612": "صفحة قائمة المنتجات",
+  "250dc970.6aab38": "إعدادات الخصائص",
+  "250dc970.7f56ad": "عنصر كتلة",
+  "250dc970.b2fac9": "اختر قسماً من اليسار أولاً ثم عدل خصائصه هنا.",
+  "01f158e9.3893c8": "بانتظار تهيئة المعاينة",
+  "01f158e9.2f586b": "المعاينة المباشرة",
+  "01f158e9.6bef2d": "تم ربط المعاينة",
+  "01f158e9.a4a56e": "المعاينة غير متاحة. تحقق من VUE_APP_WEBSITE ومن حالة موقع المعاينة.",
+  "54e3d97e.bdf5be": "لا توجد أقسام بعد. ابدأ عبر “إضافة قسم”.",
+  "54e3d97e.2e2d33": "إضافة قسم",
+  "54e3d97e.6b2a8c": "إضافة شريط إعلانات",
+  "54e3d97e.7f56ad": "عنصر كتلة",
+  "54e3d97e.cdb7d0": "أقسام القالب",
+  "54e3d97e.4eb88f": "التذييل",
+  "54e3d97e.fc318c": "إضافة كتلة",
+  "54e3d97e.768f6f": "هيكل الصفحة",
+  "54e3d97e.917f14": "الرأس",
+  "54e3d97e.b11041": "إظهار / إخفاء القسم",
+  "54e3d97e.8e22a6": "حذف القسم",
+  "30ac5b9e.425e37": "تحرير قالب الصفحة الرئيسية",
+  "30ac5b9e.bd9fcf": "تراجع",
+  "30ac5b9e.59ceff": "الصفحة",
+  "30ac5b9e.2828b7": "سطح المكتب",
+  "30ac5b9e.68d982": "الجوال",
+  "30ac5b9e.c7db6d": "إعادة",
+  "30ac5b9e.f55f17": "الجهاز",
+  "30ac5b9e.c827d8": "السجل",
+  "30ac5b9e.6741a0": "تصميم قالب الصفحة الرئيسية",
+  "30ac5b9e.be5fbb": "حفظ",
+  "30ac5b9e.db1c89": "الصفحة الرئيسية",
+  "5987e78b.5a02fa": "عنوان القسم",
+  "5987e78b.f70f79": "ارتفاع العرض",
+  "5987e78b.54c6bb": "تشغيل تلقائي",
+  "5702d2d6.dec2eb": "الرابط",
+  "5702d2d6.14d342": "التسمية",
+  "146b63bc.5a02fa": "عنوان القسم",
+  "146b63bc.ebc0c1": "نص حقوق النشر",
+  "146b63bc.4573a7": "لون الخلفية",
+  "9eb4229d.5a02fa": "عنوان القسم",
+  "9eb4229d.81a374": "رابط الشعار",
+  "9eb4229d.4573a7": "لون الخلفية",
+  "e02c8a16.dec2eb": "الرابط",
+  "e02c8a16.4d7b6d": "الموضع العمودي",
+  "e02c8a16.14d342": "التسمية",
+  "e02c8a16.488d54": "الموضع الأفقي",
+  "94f92572.f7a82c": "رابط الصورة",
+  "94f92572.dec2eb": "الرابط",
+  "ca91ced3.5a02fa": "عنوان القسم",
+  "ca91ced3.f7a82c": "رابط الصورة",
+  "0f21c647.dec2eb": "الرابط",
+  "0f21c647.14d342": "التسمية",
+  "6c727f2c.eb22d4": "عدد الأعمدة",
+  "6c727f2c.ae8c70": "معرف التصنيف",
+  "6c727f2c.d282eb": "حسب التصنيف",
+  "6c727f2c.d08db5": "افصل بين معرفات المنتجات بفواصل",
+  "6c727f2c.5a02fa": "عنوان القسم",
+  "6c727f2c.9a6484": "معرفات المنتجات",
+  "6c727f2c.d57936": "الحد الأقصى",
+  "6c727f2c.68924b": "اختيار يدوي",
+  "6c727f2c.f0c7e9": "مصدر المنتجات",
+  "d65dbcac.4eb88f": "التذييل",
+  "d65dbcac.ae5ff3": "عنصر تنقل",
+  "d65dbcac.406baf": "رابط التذييل",
+  "d65dbcac.917f14": "الرأس",
+  "d65dbcac.081a81": "منطقة صورة تفاعلية",
+  "d65dbcac.50da72": "منطقة تفاعلية",
+  "d65dbcac.20def7": "صورة",
+  "bdd52c70.7fcf42": "فيديو",
+  "d65dbcac.4a02ad": "رف المنتجات",
+  "d65dbcac.0c0180": "عرض شرائح",
+  "d65dbcac.3921b6": "شريط الإعلانات",
+  "d65dbcac.fa86f1": "إعلان",
+  "5f1b7ccc.917f14": "الرأس",
+  "5f1b7ccc.4eb88f": "التذييل",
+  "134c6b2c.7f56ad": "عنصر كتلة",
+  "b86bb5a2.f8df05": "عنوان القسم",
+  "b86bb5a2.c01f2f": "محتوى الإعلان",
+  "b86bb5a2.9de56a": "لون النص",
+  "b86bb5a2.37dba1": "لون الخلفية",
+  "b86bb5a2.925fac": "لون الأيقونة",
+  "b86bb5a2.f33ffa": "لون الرابط",
+  "b86bb5a2.fd1ff1": "قائمة الإعلانات",
+  "b86bb5a2.fa86f1": "إعلان"
 }
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 1720a3e..0fa4273 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -15756,6 +15756,8 @@
   "8b0d1458.6343df": "Page decoration",
   "8b0d1458.2b6bc0": "Actions",
   "8b0d1458.b73a0b": "Add/Edit page",
+  "8b0d1458.e3a8f1": "Add",
+  "8b0d1458.f4b9c2": "Edit",
   "8b0d1458.7d5cc3": "Enter page name",
   "8b0d1458.9c5cf8": "Enter page description",
   "8b0d1458.46f391": "Page type",
@@ -21929,7 +21931,10 @@
   "7d3fbb6d.5a0a70": "Template list",
   "7d3fbb6d.7de289": "Login page",
   "7d3fbb6d.81b2cb": "Decoration",
+  "7d3fbb6d.950dc2": "Navigation menus",
+  "7d3fbb6d.ba750e": "New menu",
   "7d3fbb6d.c701e9": "Mall theme",
+  "7d3fbb6d.ca3472": "Edit menu",
   "7d3fbb6d.cc5507": "Mall info",
   "7d3fbb6d.db1c89": "Home",
   "7d3fbb6d.e807b2": "SEO config",
@@ -22744,5 +22749,143 @@
   "41f42a3e.8085da": "Select target languages:",
   "41f42a3e.ee9938": "Save Only",
   "41f42a3e.fe6d9b": "Save & Translate",
-  "bea3f44a.e01a11": "Export task submitted, check export records"
+  "bea3f44a.e01a11": "Export task submitted, check export records",
+  "025a9251.a733c4": "Form is not ready",
+  "4c11e15d.ebf4e4": "Saved to local draft. Server integration is still pending.",
+  "732e5057.3b1083": "Saved successfully",
+  "738edee2.1a06dc": "Delete menu \"{name}\"? All menu items under it will be removed.",
+  "738edee2.2f39c3": "Create navigation menu",
+  "738edee2.2f4aad": "Delete",
+  "738edee2.4cd562": "Please enter the menu name",
+  "738edee2.7419d6": "Menu items",
+  "738edee2.8ee9f2": "Menu name",
+  "738edee2.95b351": "Edit",
+  "738edee2.ff36f6": "Navigation menu",
+  "7856f5b5.06e2f8": "Please enter a name",
+  "7856f5b5.0fec18": "Jump path",
+  "7856f5b5.2ff819": "e.g. Women's wear",
+  "7856f5b5.4ef9f6": "Please select a page",
+  "7856f5b5.575623": "Please select a page to jump to",
+  "7856f5b5.c360e9": "Sort order",
+  "7856f5b5.d7ec2d": "Name",
+  "7856f5b5.fbdd56": "Other: {path}",
+  "80206cbf.0007d1": "Deleted successfully",
+  "80206cbf.0e2999": "Failed to load menu details",
+  "80206cbf.3b1083": "Saved successfully",
+  "80206cbf.4cd562": "Please enter the menu name",
+  "80206cbf.50eaf9": "Delete confirmation",
+  "80206cbf.59a3f5": "Please enter the identifier",
+  "80206cbf.625fb2": "Cancel",
+  "80206cbf.648c5e": "Add menu item",
+  "80206cbf.645de9": "e.g. header_nav",
+  "80206cbf.7419d6": "Menu items",
+  "80206cbf.76ac0c": "Invalid menu ID",
+  "80206cbf.78b5ac": "Delete \"{name}\"? Sub-menu items will also be removed.",
+  "80206cbf.83e4fb": "Please save the menu basic information first. After saving, you can manage menu items on this page.",
+  "80206cbf.8ee9f2": "Menu name",
+  "80206cbf.a733c4": "Form is not ready",
+  "80206cbf.ba750e": "New menu",
+  "80206cbf.be5fbb": "Save",
+  "80206cbf.c0650e": "Delete \"{name}\"?",
+  "80206cbf.ca3472": "Edit menu",
+  "80206cbf.cd1e63": "Edit menu item",
+  "80206cbf.d97d00": "Creation failed: menu ID not returned",
+  "80206cbf.dd36ca": "Failed to load menu",
+  "80206cbf.e0b6e8": "New menu item",
+  "80206cbf.e83a25": "Confirm",
+  "80206cbf.eb6d93": "e.g. Top navigation",
+  "80206cbf.f3c00c": "Identifier",
+  "e45f0be0.2f4aad": "Delete",
+  "e45f0be0.95b351": "Edit",
+  "e45f0be0.d87298": "Add sub-item",
+  "f9eb643d.31d83a": "The first iteration only supports home page template editing.",
+  "f9eb643d.5f4112": "Back",
+  "f9eb643d.6741a0": "Home Decoration",
+  "f9eb643d.dbc2cc": "This scene is not supported yet",
+  "fc8ead3c.12688a": "Member center",
+  "fc8ead3c.c017be": "Shopping cart",
+  "fc8ead3c.c4186b": "Article page",
+  "fc8ead3c.fa5612": "Product list page",
+  "250dc970.6aab38": "Settings",
+  "250dc970.7f56ad": "Block Item",
+  "250dc970.b2fac9": "Select a section on the left before editing its settings here.",
+  "01f158e9.3893c8": "Waiting for preview handshake",
+  "01f158e9.2f586b": "Live Preview",
+  "01f158e9.6bef2d": "Preview connected",
+  "01f158e9.a4a56e": "Preview is unavailable. Check VUE_APP_WEBSITE and the preview site status.",
+  "54e3d97e.bdf5be": "No sections yet. Start with “Add section”.",
+  "54e3d97e.2e2d33": "Add section",
+  "54e3d97e.6b2a8c": "Add announcement bar",
+  "54e3d97e.7f56ad": "Block Item",
+  "54e3d97e.cdb7d0": "Template Sections",
+  "54e3d97e.4eb88f": "Footer",
+  "54e3d97e.fc318c": "Add block",
+  "54e3d97e.768f6f": "Page Structure",
+  "54e3d97e.917f14": "Header",
+  "54e3d97e.b11041": "Show / hide section",
+  "54e3d97e.8e22a6": "Remove section",
+  "30ac5b9e.425e37": "Home template editing",
+  "30ac5b9e.bd9fcf": "Undo",
+  "30ac5b9e.59ceff": "Page",
+  "30ac5b9e.2828b7": "Desktop",
+  "30ac5b9e.68d982": "Mobile",
+  "30ac5b9e.c7db6d": "Redo",
+  "30ac5b9e.f55f17": "Device",
+  "30ac5b9e.c827d8": "History",
+  "30ac5b9e.6741a0": "Home Decoration",
+  "30ac5b9e.be5fbb": "Save",
+  "30ac5b9e.db1c89": "Home",
+  "5987e78b.5a02fa": "Section title",
+  "5987e78b.f70f79": "Display height",
+  "5987e78b.54c6bb": "Autoplay",
+  "5702d2d6.dec2eb": "Link",
+  "5702d2d6.14d342": "Label",
+  "146b63bc.5a02fa": "Section title",
+  "146b63bc.ebc0c1": "Copyright text",
+  "146b63bc.4573a7": "Background color",
+  "9eb4229d.5a02fa": "Section title",
+  "9eb4229d.81a374": "Logo URL",
+  "9eb4229d.4573a7": "Background color",
+  "e02c8a16.dec2eb": "Link",
+  "e02c8a16.4d7b6d": "Vertical position",
+  "e02c8a16.14d342": "Label",
+  "e02c8a16.488d54": "Horizontal position",
+  "94f92572.f7a82c": "Image URL",
+  "94f92572.dec2eb": "Link",
+  "ca91ced3.5a02fa": "Section title",
+  "ca91ced3.f7a82c": "Image URL",
+  "0f21c647.dec2eb": "Link",
+  "0f21c647.14d342": "Label",
+  "6c727f2c.eb22d4": "Columns",
+  "6c727f2c.ae8c70": "Category ID",
+  "6c727f2c.d282eb": "Category",
+  "6c727f2c.d08db5": "Separate product IDs with commas",
+  "6c727f2c.5a02fa": "Section title",
+  "6c727f2c.9a6484": "Product IDs",
+  "6c727f2c.d57936": "Limit",
+  "6c727f2c.68924b": "Manual",
+  "6c727f2c.f0c7e9": "Product source",
+  "d65dbcac.4eb88f": "Footer",
+  "d65dbcac.ae5ff3": "Navigation Item",
+  "d65dbcac.406baf": "Footer Link",
+  "d65dbcac.917f14": "Header",
+  "d65dbcac.081a81": "Image Hotspot",
+  "d65dbcac.50da72": "Hotspot",
+  "d65dbcac.20def7": "Image",
+  "bdd52c70.7fcf42": "Video",
+  "d65dbcac.4a02ad": "Product Shelf",
+  "d65dbcac.0c0180": "Slideshow",
+  "d65dbcac.3921b6": "Announcement Bar",
+  "d65dbcac.fa86f1": "Announcement",
+  "5f1b7ccc.917f14": "Header",
+  "5f1b7ccc.4eb88f": "Footer",
+  "134c6b2c.7f56ad": "Block Item",
+  "b86bb5a2.f8df05": "Section title",
+  "b86bb5a2.c01f2f": "Announcement content",
+  "b86bb5a2.9de56a": "Text color",
+  "b86bb5a2.37dba1": "Background color",
+  "b86bb5a2.925fac": "Icon color",
+  "b86bb5a2.f33ffa": "Link color",
+  "b86bb5a2.fd1ff1": "Announcements",
+  "b86bb5a2.fa86f1": "Announcement"
 }
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index fe93b92..092c1c0 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -15756,6 +15756,8 @@
   "8b0d1458.6343df": "页面装修",
   "8b0d1458.2b6bc0": "操作",
   "8b0d1458.b73a0b": "添加/编辑页面",
+  "8b0d1458.e3a8f1": "新增",
+  "8b0d1458.f4b9c2": "编辑",
   "8b0d1458.7d5cc3": "请输入页面名称",
   "8b0d1458.9c5cf8": "请输入页面描述",
   "8b0d1458.46f391": "页面类型",
@@ -22019,7 +22021,10 @@
   "7d3fbb6d.5a0a70": "模板列表",
   "7d3fbb6d.7de289": "登录页",
   "7d3fbb6d.81b2cb": "装修",
+  "7d3fbb6d.950dc2": "导航菜单管理",
+  "7d3fbb6d.ba750e": "新增菜单",
   "7d3fbb6d.c701e9": "商城配色",
+  "7d3fbb6d.ca3472": "编辑菜单",
   "7d3fbb6d.cc5507": "商城信息",
   "7d3fbb6d.db1c89": "首页",
   "7d3fbb6d.e807b2": "SEO配置",
@@ -22744,5 +22749,160 @@
   "41f42a3e.8085da": "选择目标语言：",
   "41f42a3e.ee9938": "仅保存",
   "41f42a3e.fe6d9b": "保存并翻译",
-  "bea3f44a.e01a11": "导出任务已提交，请到导出记录查看"
+  "bea3f44a.e01a11": "导出任务已提交，请到导出记录查看",
+  "30ac5b9e.db1c89": "首页",
+  "30ac5b9e.425e37": "首页模板编辑",
+  "30ac5b9e.be5fbb": "保存",
+  "54e3d97e.768f6f": "页面结构",
+  "54e3d97e.cdb7d0": "模板区块",
+  "54e3d97e.917f14": "头部",
+  "54e3d97e.4eb88f": "页脚",
+  "01f158e9.2f586b": "实时预览",
+  "01f158e9.6bef2d": "预览已连接",
+  "01f158e9.3893c8": "等待预览握手",
+  "01f158e9.a4a56e": "预览不可用，请检查 VUE_APP_WEBSITE 与预览站点状态",
+  "30ac5b9e.59ceff": "页面",
+  "30ac5b9e.f55f17": "设备",
+  "30ac5b9e.2828b7": "桌面端",
+  "30ac5b9e.68d982": "移动端",
+  "30ac5b9e.c827d8": "历史",
+  "30ac5b9e.bd9fcf": "撤销",
+  "30ac5b9e.c7db6d": "重做",
+  "250dc970.6aab38": "属性设置",
+  "250dc970.b2fac9": "请先在左侧选择区块，再在此编辑属性",
+  "54e3d97e.bdf5be": "暂无区块，可从「添加区块」开始",
+  "54e3d97e.2e2d33": "添加区块",
+  "54e3d97e.fc318c": "添加子块",
+  "d65dbcac.0c0180": "轮播图",
+  "d65dbcac.917f14": "头部",
+  "d65dbcac.4eb88f": "页脚",
+  "d65dbcac.081a81": "图片热区",
+  "d65dbcac.4a02ad": "商品货架",
+  "134c6b2c.7f56ad": "子块",
+  "d65dbcac.20def7": "图片",
+  "d65dbcac.50da72": "热区",
+  "d65dbcac.ae5ff3": "导航项",
+  "d65dbcac.406baf": "页脚链接",
+  "5987e78b.5a02fa": "区块标题",
+  "5987e78b.54c6bb": "自动播放",
+  "5987e78b.f70f79": "展示高度",
+  "94f92572.f7a82c": "图片地址",
+  "5702d2d6.dec2eb": "链接",
+  "5702d2d6.14d342": "标签",
+  "9eb4229d.81a374": "Logo 地址",
+  "146b63bc.4573a7": "背景色",
+  "146b63bc.ebc0c1": "版权文案",
+  "e02c8a16.488d54": "横向位置",
+  "e02c8a16.4d7b6d": "纵向位置",
+  "6c727f2c.f0c7e9": "商品来源",
+  "6c727f2c.68924b": "手动选择",
+  "6c727f2c.d282eb": "按分类",
+  "6c727f2c.ae8c70": "分类 ID",
+  "6c727f2c.9a6484": "商品 ID",
+  "6c727f2c.eb22d4": "列数",
+  "6c727f2c.d57936": "数量上限",
+  "6c727f2c.d08db5": "多个商品 ID 用英文逗号分隔",
+  "30ac5b9e.ff885d": "组件库",
+  "bdd52c70.7fcf42": "视频",
+  "5987e78b.178bae": "轮播图片",
+  "5987e78b.b89fb3": "添加图片",
+  "5987e78b.b5735e": "图片 {index}",
+  "ab6232d1.f50bc3": "视频地址",
+  "ab6232d1.78c65a": "封面图（可选）",
+  "ca91ced3.50da72": "热区",
+  "ca91ced3.5742d0": "添加热区",
+  "ca91ced3.fb5e40": "热区 {index}",
+  "9eb4229d.ae5ff3": "导航项",
+  "9eb4229d.e3c649": "添加导航项",
+  "9eb4229d.dd3e57": "导航项 {index}",
+  "146b63bc.406baf": "页脚链接",
+  "146b63bc.f77223": "添加页脚链接",
+  "146b63bc.c1610a": "页脚链接 {index}",
+  "c465399f.2f4aad": "删除",
+  "732e5057.3b1083": "保存完成",
+  "738edee2.2f4aad": " 删 除 ",
+  "738edee2.8ee9f2": "菜单名称",
+  "738edee2.95b351": "编辑",
+  "7856f5b5.d7ec2d": "*商品标题",
+  "80206cbf.0007d1": "删除成功",
+  "80206cbf.3b1083": "保存完成",
+  "80206cbf.625fb2": " 取消",
+  "80206cbf.8ee9f2": "菜单名称",
+  "80206cbf.be5fbb": " 保存 ",
+  "80206cbf.ca3472": " 编辑菜单 ",
+  "80206cbf.e83a25": "确认",
+  "e45f0be0.2f4aad": " 删 除 ",
+  "e45f0be0.95b351": "编辑",
+  "f9eb643d.5f4112": " 回退 ",
+  "fc8ead3c.12688a": "会员中心",
+  "fc8ead3c.fa5612": "商品列表页",
+  "9eb4229d.4573a7": "背景颜色",
+  "e02c8a16.dec2eb": "链接",
+  "94f92572.dec2eb": "链接",
+  "0f21c647.dec2eb": "链接",
+  "025a9251.a733c4": "表单未就绪",
+  "4c11e15d.ebf4e4": "已保存到本地草稿，服务端对接仍待完成",
+  "738edee2.1a06dc": "确定删除菜单「{name}」？其下所有菜单项将一并删除。",
+  "738edee2.2f39c3": "创建导航菜单",
+  "738edee2.4cd562": "请输入菜单名称",
+  "738edee2.7419d6": "菜单项",
+  "738edee2.ff36f6": "导航菜单",
+  "7856f5b5.06e2f8": "请输入名称",
+  "7856f5b5.0fec18": "跳转路径",
+  "7856f5b5.2ff819": "例如：女装",
+  "7856f5b5.4ef9f6": "请选择页面",
+  "7856f5b5.575623": "请选择跳转页面",
+  "7856f5b5.c360e9": "排序",
+  "7856f5b5.fbdd56": "其他：{path}",
+  "80206cbf.0e2999": "加载菜单详情失败",
+  "80206cbf.4cd562": "请输入菜单名称",
+  "80206cbf.50eaf9": "删除确认",
+  "80206cbf.59a3f5": "请输入标识",
+  "80206cbf.648c5e": "添加菜单项",
+  "80206cbf.645de9": "例如：header_nav",
+  "80206cbf.7419d6": "菜单项",
+  "80206cbf.76ac0c": "无效的菜单 ID",
+  "80206cbf.78b5ac": "确定删除「{name}」？子菜单项也将被删除。",
+  "80206cbf.83e4fb": "请先保存菜单基本信息，保存后可在此页管理菜单项。",
+  "80206cbf.a733c4": "表单未就绪",
+  "80206cbf.ba750e": "新建菜单",
+  "80206cbf.c0650e": "确定删除「{name}」？",
+  "80206cbf.cd1e63": "编辑菜单项",
+  "80206cbf.d97d00": "创建失败：未返回菜单 ID",
+  "80206cbf.dd36ca": "加载菜单失败",
+  "80206cbf.e0b6e8": "新建菜单项",
+  "80206cbf.eb6d93": "例如：顶部导航",
+  "80206cbf.f3c00c": "标识",
+  "e45f0be0.d87298": "添加子项",
+  "f9eb643d.31d83a": "首期仅支持首页模板编辑",
+  "f9eb643d.6741a0": "首页装修",
+  "f9eb643d.dbc2cc": "暂不支持该场景",
+  "fc8ead3c.c017be": "购物车",
+  "fc8ead3c.c4186b": "文章页",
+  "b86bb5a2.f8df05": "区块标题",
+  "b86bb5a2.c01f2f": "公告内容",
+  "b86bb5a2.9de56a": "文字颜色",
+  "b86bb5a2.37dba1": "背景颜色",
+  "b86bb5a2.925fac": "图标颜色",
+  "b86bb5a2.f33ffa": "链接颜色",
+  "b86bb5a2.fd1ff1": "公告列表",
+  "b86bb5a2.fa86f1": "公告",
+  "ea424682.6eb9f2": "公告文案",
+  "250dc970.7f56ad": "子块",
+  "54e3d97e.6b2a8c": "添加公告栏",
+  "54e3d97e.7f56ad": "子块",
+  "54e3d97e.b11041": "显示/隐藏区块",
+  "54e3d97e.8e22a6": "移除区块",
+  "30ac5b9e.6741a0": "首页装修",
+  "146b63bc.5a02fa": "区块标题",
+  "9eb4229d.5a02fa": "区块标题",
+  "e02c8a16.14d342": "标签",
+  "ca91ced3.5a02fa": "区块标题",
+  "ca91ced3.f7a82c": "图片地址",
+  "0f21c647.14d342": "标签",
+  "6c727f2c.5a02fa": "区块标题",
+  "d65dbcac.3921b6": "公告栏",
+  "d65dbcac.fa86f1": "公告",
+  "5f1b7ccc.917f14": "头部",
+  "5f1b7ccc.4eb88f": "页脚"
 }
diff --git a/src/layout/basic/index.js b/src/layout/basic/index.js
index 541ef79..4bd2fd1 100755
--- a/src/layout/basic/index.js
+++ b/src/layout/basic/index.js
@@ -5,7 +5,8 @@
 export { default as BasicLayout } from './layout.vue'
 export { default as BasicToolbar } from './layout-toolbar.vue'
 export { default as LayoutDynamic } from './layout-dynamic.vue'
-export { default as FullLayout } from './fullLayout.vue'
+export { default as EmptyLayout } from './layout-empty.vue'
+// export { default as FullLayout } from './fullLayout.vue'
 // export { default as LayoutSidebar } from './layout-sidebar.vue'
 import LayoutHeader from './layout-header.vue'
 
diff --git a/src/layout/basic/layout-content.vue b/src/layout/basic/layout-content.vue
index 42e90a6..b22d9e1 100755
--- a/src/layout/basic/layout-content.vue
+++ b/src/layout/basic/layout-content.vue
@@ -4,11 +4,9 @@
 -->
 
 <template>
-  <el-container class="h-full">
-    <div id="page-container" class="w-full h-full bg-background-deep overflow-y-auto">
-      <slot />
-    </div>
-  </el-container>
+  <div id="page-container" class="w-full h-full p-4 bg-background-deep overflow-y-auto">
+    <slot />
+  </div>
 </template>
 
 <script>
diff --git a/src/layout/basic/layout-sidebar.vue b/src/layout/basic/layout-sidebar.vue
index 643551f..d14ba74 100755
--- a/src/layout/basic/layout-sidebar.vue
+++ b/src/layout/basic/layout-sidebar.vue
@@ -21,30 +21,20 @@
           :key="item.alias_name"
           class="main-menu-item py-2 mx-1 my-1 flex flex-col items-center cursor-pointer"
           :class="{ 'main-menu-item--active': activeMainMenu === item.alias_name }"
+          @click="handleMainMenuClick(item)"
         >
-          <router-link
-            :to="getMainMenuPath(item)"
-            custom
-            v-slot="{ href }"
+          <!-- {{ computedMenuIcon(item) }} -->
+          <SpIcon
+            class="menu-icon"
+            :name="computedMenuIcon(item)"
+            :size="18"
+            :fill="activeMainMenu === item.alias_name ? computedPrimaryColor : '#333'"
+          />
+          <span
+            class="text-sm mt-1 text-center"
+            :style="{ color: activeMainMenu === item.alias_name ? computedPrimaryColor : '#333' }"
+            >{{ item.name }}</span
           >
-            <a
-              :href="href"
-              class="main-menu-item__link flex flex-col items-center no-underline text-inherit w-full"
-              @click="onMainMenuLinkClick($event, item)"
-            >
-              <SpIcon
-                class="menu-icon"
-                :name="computedMenuIcon(item)"
-                :size="18"
-                :fill="activeMainMenu === item.alias_name ? computedPrimaryColor : '#333'"
-              />
-              <span
-                class="text-sm mt-1 text-center"
-                :style="{ color: activeMainMenu === item.alias_name ? computedPrimaryColor : '#333' }"
-                >{{ menuDisplayName(item) }}</span
-              >
-            </a>
-          </router-link>
         </li>
         <!-- <li @click="handleMainMenuClick({ alias_name: 'license' })" class="text-center text-gray-500 text-sm mt-2 mb-2 cursor-pointer">License</li> -->
       </ul>
@@ -76,7 +66,7 @@
                 <span
                   class="block w-full"
                   @click="handleSubmenuTitleClick(item.alias_name, $event)"
-                  >{{ menuDisplayName(item) }}</span
+                  >{{ item.name }}</span
                 >
               </template>
               <!-- 三级菜单 -->
@@ -86,10 +76,9 @@
                   v-if="child.is_menu"
                   :key="child.alias_name"
                   :index="child.alias_name"
+                  @click="handleSubMenuClick(child)"
                 >
-                  <router-link class="sub-menu-link" :to="getSubMenuPath(child)">
-                    {{ menuDisplayName(child) }}
-                  </router-link>
+                  <span>{{ child.name }}</span>
                 </el-menu-item>
               </template>
             </el-submenu>
@@ -100,10 +89,9 @@
               v-if="item.is_menu"
               :key="item.alias_name"
               :index="item.alias_name"
+              @click="handleSubMenuClick(item)"
             >
-              <router-link class="sub-menu-link" :to="getSubMenuPath(item)">
-                {{ menuDisplayName(item) }}
-              </router-link>
+              <span>{{ item.name }}</span>
             </el-menu-item>
           </template>
         </template>
@@ -114,7 +102,6 @@
 
 <script>
 import { getBasePath, getSystemTitle } from '@/utils'
-import { getMenuDisplayName } from '@/utils/menuI18n'
 import Config from '@/config'
 
 export default {
@@ -136,7 +123,7 @@ export default {
       if (this.activeMainMenu) {
         const activeMenu = this.mainMenus.find((item) => item.alias_name === this.activeMainMenu)
         if (activeMenu) {
-          return getMenuDisplayName(this, activeMenu)
+          return activeMenu.name
         }
       }
       // 否则返回默认系统标题
@@ -194,9 +181,6 @@ export default {
     this.updateSubMenus()
   },
   methods: {
-    menuDisplayName(menuItem) {
-      return getMenuDisplayName(this, menuItem)
-    },
     // 更新中间二级菜单列表
     updateSubMenus() {
       const [mainRoute] = this.$route.matched
@@ -232,60 +216,49 @@ export default {
     resolveChildren(children) {
       return children && children.length > 0 && children.some((child) => child.is_menu)
     },
-    /** 一级菜单下第一个可展示子菜单的 permission（与跳转逻辑一致，供 href 使用） */
-    resolveMainMenuFirstPermission(item) {
-      const subMenus = item?.children || []
-      const firstChild = (_submenu) => {
-        for (const it of _submenu) {
-          if (it.children) {
-            const result = firstChild(it.children)
-            if (result) return result
-          } else if (it.is_menu) {
-            return it?.permission
-          }
-        }
-        return null
-      }
-      if (subMenus.length === 0) {
-        return item.permission
-      }
-      return firstChild(subMenus)
-    },
-    getNotFoundPath() {
-      const basePath = getBasePath()
-      return basePath ? `/${basePath}/not-found` : '/not-found'
-    },
-    /** 主导航在新标签页打开时的目标路径 */
-    getMainMenuPath(item) {
-      const permission = this.resolveMainMenuFirstPermission(item)
-      const route = permission ? this.findRouteByPermission(permission) : null
-      return route?.path || this.getNotFoundPath()
-    },
-    /** 侧栏子菜单在新标签页打开时的目标路径（与旧 layout.vue 中 router-link 行为一致） */
-    getSubMenuPath(menuItem) {
-      const route = this.findRouteByPermission(menuItem.permission)
-      return route?.path || this.getNotFoundPath()
-    },
-    onMainMenuLinkClick(e, item) {
-      if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) {
-        return
-      }
-      e.preventDefault()
-      this.handleMainMenuClick(item)
-    },
     handleMainMenuClick(item) {
       if (item.alias_name == this.$route.matched?.[0]?.meta?.aliasName) {
         return
       }
       this.subMenus = item?.children || []
-      const permission = this.resolveMainMenuFirstPermission(item)
-      const route = permission ? this.findRouteByPermission(permission) : null
+      // 获取第一个子路由
+      const firstChild = (_submenu) => {
+        for (const item of _submenu) {
+          if (item.children) {
+            const result = firstChild(item.children)
+            if (result) return result
+          } else if (item.is_menu) {
+            return item?.permission
+          }
+        }
+        return null
+      }
+      // 如果只有一级菜单，就直接那当前一级菜单的权限
+      let permission = ''
+      if (this.subMenus.length === 0) {
+        permission = item.permission
+      } else {
+        permission = firstChild(this.subMenus)
+      }
+
+      const route = this.findRouteByPermission(permission)
       if (route) {
         this.$router.push({ path: route.path })
       } else {
         this.toNotFound()
       }
     },
+    handleSubMenuClick(item) {
+      const route = this.findRouteByPermission(item.permission)
+      if (route) {
+        if (this.$route.path === route.path) {
+          return
+        }
+        this.$router.push({ path: route.path })
+      } else {
+        this.toNotFound()
+      }
+    },
     findRouteByPermission(permission) {
       return this.$router.getRoutes().find((route) => route.meta?.permissions?.includes(permission))
     },
@@ -372,7 +345,7 @@ export default {
       if (menuItem) {
         for (const submenu of allSubmenus) {
           const titleEl = submenu.querySelector('.el-submenu__title')
-          if (titleEl && titleEl.textContent.trim() === getMenuDisplayName(this, menuItem)) {
+          if (titleEl && titleEl.textContent.trim() === menuItem.name) {
             return submenu
           }
         }
@@ -506,7 +479,7 @@ export default {
           const targetMenu = this.findMenuByAlias(activeIndex)
           if (targetMenu) {
             for (const menuItem of allMenuItems) {
-              if (menuItem.textContent.trim() === getMenuDisplayName(this, targetMenu)) {
+              if (menuItem.textContent.trim() === targetMenu.name) {
                 activeMenuItem = menuItem
                 break
               }
@@ -541,19 +514,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.main-menu-item__link {
-  outline: none;
-}
-
-:deep(.el-menu-item .sub-menu-link) {
-  color: inherit;
-  text-decoration: none;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-
 .main-menu-list {
   .main-menu-item {
     &:hover {
diff --git a/src/layout/basic/layout.vue b/src/layout/basic/layout.vue
index bc4eb8d..ea54471 100755
--- a/src/layout/basic/layout.vue
+++ b/src/layout/basic/layout.vue
@@ -31,7 +31,7 @@
         </el-header>
 
         <el-main class="!px-0 !py-0" style="height: calc(100vh - 100px)">
-          <LayoutContent v-if="!$route.path.includes('/decoration/web/template/edit')">
+          <LayoutContent>
             <!-- <RouterView /> -->
             <router-view v-slot="{ Component }">
               <Transition name="fade" appear mode="out-in">
@@ -40,7 +40,7 @@
             </router-view>
           </LayoutContent>
 
-          <div id="design-view" v-else class="relative h-full" />
+          <!-- <div id="design-view" v-else class="relative h-full" /> -->
         </el-main>
 
         <el-footer class="flex justify-center items-center gap-2" height="50px">
@@ -54,8 +54,6 @@
 <script>
 import DEFAULT_CONFIG from '@/config'
 import { getSystemTitle } from '@/utils'
-import { getMenuDisplayName } from '@/utils/menuI18n'
-import { micrApp } from '@/utils/micr-app'
 import LayoutSidebar from './layout-sidebar.vue'
 import LayoutContent from './layout-content.vue'
 import LayoutHeader from './layout-header.vue'
@@ -88,7 +86,7 @@ export default {
       if (this.activeMainMenu) {
         const activeMenu = this.mainMenus?.find((item) => item.alias_name === this.activeMainMenu)
         if (activeMenu) {
-          return getMenuDisplayName(this, activeMenu)
+          return activeMenu.name
         }
       }
       // 否则返回默认系统标题
@@ -102,7 +100,6 @@ export default {
     this.subMenus =
       this.mainMenus.find((item) => item.alias_name === mainRoute?.meta?.aliasName)?.children || []
     this.getSystemSetting()
-    micrApp.init()
   },
   methods: {
     async getSystemSetting() {
diff --git a/src/router/guard.js b/src/router/guard.js
index be4e715..579d3df 100755
--- a/src/router/guard.js
+++ b/src/router/guard.js
@@ -35,17 +35,17 @@ function setupCommonGuard(router) {
 
 function setupAccessGuard(router) {
   router.beforeEach(async (to, from, next) => {
-    if (to.path == '/decoration/web/template/edit') {
-      const { id } = to.query
-      console.log(`【shop】pageid is: ${id}`)
-      actions.setGlobalState({
-        mode: 'pc',
-        token: store.state.user.token,
-        pageid: id,
-        baseUrl: process.env.VUE_APP_BASE_API,
-        language: langMap[window.localStorage.getItem('lang') || 'zhcn']
-      })
-    }
+    // if (to.path == '/decoration/web/template/edit') {
+    //   const { id } = to.query
+    //   console.log(`【shop】pageid is: ${id}`)
+    //   actions.setGlobalState({
+    //     mode: 'pc',
+    //     token: store.state.user.token,
+    //     pageid: id,
+    //     baseUrl: process.env.VUE_APP_BASE_API,
+    //     language: langMap[window.localStorage.getItem('lang') || 'zhcn']
+    //   })
+    // }
 
     const hasToken = store.state.user.token
     if (!hasToken) {
diff --git a/src/router/routes/modules/apps.js b/src/router/routes/modules/apps.js
index 83c87c5..fb65980 100755
--- a/src/router/routes/modules/apps.js
+++ b/src/router/routes/modules/apps.js
@@ -3,6 +3,7 @@
  * See LICENSE file for license details.
  */
 import { BasicLayout } from '@/layout/basic'
+import { i18n } from '@/i18n'
 
 const routes = [
   {
@@ -11,7 +12,7 @@ const routes = [
       aliasName: 'applications',
       icon: 'app-store',
       keepAlive: true,
-      title: '9d1e03c7.5b0520'
+      title: i18n.t('9d1e03c7.5b0520')
     },
     name: 'applications',
     path: '/applications',
@@ -22,7 +23,7 @@ const routes = [
         meta: {
           aliasName: 'bspay_cash_audit',
           icon: 'pay-circle',
-          title: '9d1e03c7.91287f',
+          title: i18n.t('9d1e03c7.91287f'),
           permissions: ['applications.bspay.bspay_cash_audit']
         },
         component: () => import('@/view/mall/bspay_sub_account/withdraw_audit')
@@ -32,7 +33,7 @@ const routes = [
         path: 'dougong/withdraw',
         meta: {
           aliasName: 'dougong_withdraw',
-          title: '9d1e03c7.db7971',
+          title: i18n.t('9d1e03c7.db7971'),
           icon: 'pay-circle',
           permissions: ['applications.bspay.bspay_withdraw']
         },
@@ -43,7 +44,7 @@ const routes = [
         path: 'dougong/user-approval',
         meta: {
           aliasName: 'user_audit',
-          title: '9d1e03c7.285c7b',
+          title: i18n.t('9d1e03c7.285c7b'),
           icon: 'pay-circle',
           permissions: ['applications.bspay.user_audit']
         },
@@ -61,7 +62,7 @@ const routes = [
         meta: {
           aliasName: 'bspay_trades',
           icon: 'pay-circle',
-          title: '9d1e03c7.85b2f8',
+          title: i18n.t('9d1e03c7.85b2f8'),
           permissions: ['applications.bspay.bspay_trades']
         },
         component: () => import('@/view/mall/bspay_sub_account/sub_account'),
@@ -78,7 +79,7 @@ const routes = [
         meta: {
           aliasName: 'adapay_trades',
           icon: 'pay-circle',
-          title: '9d1e03c7.85b2f8',
+          title: i18n.t('9d1e03c7.85b2f8'),
           permissions: ['applications.adapay.adapay_trades']
         },
         component: () => import('@/view/mall/sub_account/sub_account'),
@@ -95,7 +96,7 @@ const routes = [
         meta: {
           aliasName: 'adapay_cash',
           icon: 'pay-circle',
-          title: '9d1e03c7.db7971',
+          title: i18n.t('9d1e03c7.db7971'),
           permissions: ['applications.adapay.adapay_cash']
         },
         component: () => import('@/view/mall/withdraw/withdraw')
@@ -107,7 +108,7 @@ const routes = [
         meta: {
           aliasName: 'adapay_cash_setting',
           icon: 'pay-circle',
-          title: '9d1e03c7.b33aa1',
+          title: i18n.t('9d1e03c7.b33aa1'),
           permissions: ['applications.adapay.adapay_cash_setting']
         },
         component: () => import('@/view/mall/withdraw/withdraw_setting.vue')
@@ -118,7 +119,7 @@ const routes = [
         meta: {
           aliasName: 'adapay_member_audit',
           icon: 'pay-circle',
-          title: '9d1e03c7.5bf3b3',
+          title: i18n.t('9d1e03c7.5bf3b3'),
           permissions: ['applications.adapay.adapay_member_audit']
         },
         component: () => import('@/view/mall/marketing/openingapproval'),
@@ -135,7 +136,7 @@ const routes = [
         meta: {
           aliasName: 'company-admin',
           icon: 'pay-circle',
-          title: '9d1e03c7.07c516',
+          title: i18n.t('9d1e03c7.07c516'),
           permissions: ['applications.ec.company-admin']
         },
         component: () => import('@/view/member/purchase/company')
@@ -146,7 +147,7 @@ const routes = [
         meta: {
           aliasName: 'employee-admin',
           icon: 'pay-circle',
-          title: '9d1e03c7.b33603',
+          title: i18n.t('9d1e03c7.b33603'),
           permissions: ['applications.ec.employee-admin']
         },
         component: () => import('@/view/member/purchase/employee'),
@@ -163,7 +164,7 @@ const routes = [
         meta: {
           aliasName: 'purchase-admin',
           icon: 'pay-circle',
-          title: '9d1e03c7.d285a2',
+          title: i18n.t('9d1e03c7.d285a2'),
           permissions: ['applications.ec.purchase-admin']
         },
         component: () => import('@/view/marketing/employee/list'),
@@ -192,7 +193,7 @@ const routes = [
         meta: {
           aliasName: 'purchase-list',
           icon: 'pay-circle',
-          title: '9d1e03c7.afcd11',
+          title: i18n.t('9d1e03c7.afcd11'),
           permissions: ['applications.ec.purchase-list']
         },
         component: () => import('@/view/order/entitytrade/purchase'),
@@ -236,7 +237,7 @@ const routes = [
         meta: {
           aliasName: 'workwechat',
           icon: 'pay-circle',
-          title: '9d1e03c7.fc99ea',
+          title: i18n.t('9d1e03c7.fc99ea'),
           permissions: ['applications.guide.workwechat']
         },
         component: () => import('@/view/base/setting/workwechat/workwechat')
@@ -247,7 +248,7 @@ const routes = [
         meta: {
           aliasName: 'salespersonshelfindex',
           icon: 'pay-circle',
-          title: '9d1e03c7.af488e',
+          title: i18n.t('9d1e03c7.af488e'),
           permissions: ['applications.guide.salespersonshelfindex']
         },
         component: () => import('@/view/wxapp/salespersonshelfindex')
@@ -258,7 +259,7 @@ const routes = [
         meta: {
           aliasName: 'activity',
           icon: 'pay-circle',
-          title: '9d1e03c7.d285a2',
+          title: i18n.t('9d1e03c7.d285a2'),
           permissions: ['applications.community.activity']
         },
         component: () => import('@/view/mall/community/activityList')
@@ -269,7 +270,7 @@ const routes = [
         meta: {
           aliasName: 'communitygoods',
           icon: 'pay-circle',
-          title: '9d1e03c7.42f9f7',
+          title: i18n.t('9d1e03c7.42f9f7'),
           permissions: ['applications.community.communitygoods']
         },
         component: () => import('@/view/mall/community/communitygoods')
@@ -280,7 +281,7 @@ const routes = [
         meta: {
           aliasName: 'communityorder',
           icon: 'pay-circle',
-          title: '9d1e03c7.35420b',
+          title: i18n.t('9d1e03c7.35420b'),
           permissions: ['applications.community.communityorder']
         },
         component: () => import('@/view/mall/trade/normalorders/communityList'),
@@ -301,7 +302,7 @@ const routes = [
         meta: {
           aliasName: 'communitysetting',
           icon: 'pay-circle',
-          title: '9d1e03c7.b24f85',
+          title: i18n.t('9d1e03c7.b24f85'),
           permissions: ['applications.community.communitysetting']
         },
         component: () => import('@/view/mall/community/setting')
@@ -312,7 +313,7 @@ const routes = [
         meta: {
           aliasName: 'subdistrict',
           icon: 'pay-circle',
-          title: '9d1e03c7.62efd2',
+          title: i18n.t('9d1e03c7.62efd2'),
           permissions: ['applications.community.subdistrict']
         },
         component: () => import('@/view/mall/subdistrict/list')
@@ -323,7 +324,7 @@ const routes = [
         meta: {
           aliasName: 'communitychief',
           icon: 'pay-circle',
-          title: '9d1e03c7.0303d0',
+          title: i18n.t('9d1e03c7.0303d0'),
           permissions: ['applications.community.communitychief']
         },
         component: () => import('@/view/mall/community/chief'),
@@ -348,7 +349,7 @@ const routes = [
         meta: {
           aliasName: 'achievement',
           icon: 'pay-circle',
-          title: '9d1e03c7.09cfa9',
+          title: i18n.t('9d1e03c7.09cfa9'),
           permissions: ['applications.community.achievement']
         },
         component: () => import('@/view/mall/community/achievement')
@@ -359,7 +360,7 @@ const routes = [
         meta: {
           aliasName: 'withdraw',
           icon: 'pay-circle',
-          title: '9d1e03c7.33011e',
+          title: i18n.t('9d1e03c7.33011e'),
           permissions: ['applications.community.withdraw']
         },
         component: () => import('@/view/mall/community/withdraw')
@@ -371,7 +372,7 @@ const routes = [
         meta: {
           aliasName: 'chiefupload1',
           icon: 'pay-circle',
-          title: '9d1e03c7.5ad881',
+          title: i18n.t('9d1e03c7.5ad881'),
           permissions: ['applications.community.chiefupload1']
         },
         component: () => import('@/view/member/members/upload_chief')
@@ -416,7 +417,7 @@ const routes = [
         meta: {
           aliasName: 'extapp',
           icon: 'pay-circle',
-          title: '9d1e03c7.e7a708',
+          title: i18n.t('9d1e03c7.e7a708'),
           permissions: ['applications.appsgroup.extapp']
         },
         component: () => import('@/view/applications/plugin'),
@@ -432,7 +433,7 @@ const routes = [
         path: 'kujiale/products',
         meta: {
           aliasName: 'kujiale-products',
-          title: '9d1e03c7.5c6426',
+          title: i18n.t('9d1e03c7.5c6426'),
           icon: 'pay-circle',
           permissions: ['applications.kujiale.kujiale-products']
         },
diff --git a/src/router/routes/modules/content.js b/src/router/routes/modules/content.js
index 64720f3..d0752d2 100755
--- a/src/router/routes/modules/content.js
+++ b/src/router/routes/modules/content.js
@@ -3,6 +3,7 @@
  * See LICENSE file for license details.
  */
 import { BasicLayout } from '@/layout/basic'
+import { i18n } from '@/i18n'
 
 const routes = [
   {
@@ -11,7 +12,7 @@ const routes = [
       aliasName: 'site',
       icon: 'oceanengine',
       keepAlive: true,
-      title: 'c488b2d6.2d711b'
+      title: i18n.t('c488b2d6.2d711b')
     },
     name: 'content',
     path: '/content',
@@ -22,7 +23,7 @@ const routes = [
         meta: {
           aliasName: 'planting',
           icon: 'pay-circle',
-          title: 'c488b2d6.73bfff',
+          title: i18n.t('c488b2d6.73bfff'),
           permissions: ['site.article.planting']
         },
         component: () => import('@/view/content/soft-article'),
@@ -40,7 +41,7 @@ const routes = [
         meta: {
           aliasName: 'articlecolumns',
           icon: 'pay-circle',
-          title: 'c488b2d6.39345b',
+          title: i18n.t('c488b2d6.39345b'),
           permissions: ['site.article.articlecolumns']
         },
         component: () => import('@/view/base/article/columns')
@@ -51,7 +52,7 @@ const routes = [
         meta: {
           aliasName: 'brandmaterial',
           icon: 'pay-circle',
-          title: 'c488b2d6.b49e2f',
+          title: i18n.t('c488b2d6.b49e2f'),
           permissions: ['site.material.brandmaterial']
         },
         component: () => import('@/views/content/aterialmanagement'),
@@ -68,7 +69,7 @@ const routes = [
         meta: {
           aliasName: 'basearticle',
           icon: 'pay-circle',
-          title: 'c488b2d6.b8337d',
+          title: i18n.t('c488b2d6.b8337d'),
           permissions: ['site.text.basearticle']
         },
         component: () => import('@/view/base/article/index'),
@@ -86,7 +87,7 @@ const routes = [
         meta: {
           aliasName: 'Articlegeneralcolumns',
           icon: 'pay-circle',
-          title: 'c488b2d6.c1ed55',
+          title: i18n.t('c488b2d6.c1ed55'),
           permissions: ['site.text.Articlegeneralcolumns']
         },
         component: () => import('@/view/base/article/generalcolumns')
@@ -97,7 +98,7 @@ const routes = [
         meta: {
           aliasName: 'ugcindex',
           icon: 'pay-circle',
-          title: 'c488b2d6.1c9adf',
+          title: i18n.t('c488b2d6.1c9adf'),
           permissions: ['site.ugc.ugcindex']
         },
         component: () => import('@/view/member/ugc/ugcIndex'),
@@ -114,7 +115,7 @@ const routes = [
         meta: {
           aliasName: 'ugcflags',
           icon: 'pay-circle',
-          title: 'c488b2d6.6864e1',
+          title: i18n.t('c488b2d6.6864e1'),
           permissions: ['site.ugc.ugcflags']
         },
         component: () => import('@/view/member/ugc/ugcFlags')
@@ -125,7 +126,7 @@ const routes = [
         meta: {
           aliasName: 'ugctopic',
           icon: 'pay-circle',
-          title: 'c488b2d6.b6d3b4',
+          title: i18n.t('c488b2d6.b6d3b4'),
           permissions: ['site.ugc.ugctopic']
         },
         component: () => import('@/view/member/ugc/ugcTopic')
@@ -136,7 +137,7 @@ const routes = [
         meta: {
           aliasName: 'ugcreview',
           icon: 'pay-circle',
-          title: 'c488b2d6.570831',
+          title: i18n.t('c488b2d6.570831'),
           permissions: ['site.ugc.ugcreview']
         },
         component: () => import('@/view/member/ugc/ugcReview')
@@ -147,7 +148,7 @@ const routes = [
         meta: {
           aliasName: 'ugcpoint',
           icon: 'pay-circle',
-          title: 'c488b2d6.ff3d97',
+          title: i18n.t('c488b2d6.ff3d97'),
           permissions: ['site.ugc.ugcpoint']
         },
         component: () => import('@/view/member/ugc/ugcPoint')
@@ -158,7 +159,7 @@ const routes = [
         meta: {
           aliasName: 'sharesetting',
           icon: 'pay-circle',
-          title: 'c488b2d6.b3cec2',
+          title: i18n.t('c488b2d6.b3cec2'),
           permissions: ['site.share.sharesetting']
         },
         component: () => import('@/view/base/setting/sharesetting')
@@ -169,7 +170,7 @@ const routes = [
         meta: {
           aliasName: 'rate',
           icon: 'pay-circle',
-          title: 'c488b2d6.d58254',
+          title: i18n.t('c488b2d6.d58254'),
           permissions: ['site.evaluate.rate']
         },
         component: () => import('@/view/goods/rate')
diff --git a/src/router/routes/modules/dashboard.js b/src/router/routes/modules/dashboard.js
index 7b5131f..316bec0 100755
--- a/src/router/routes/modules/dashboard.js
+++ b/src/router/routes/modules/dashboard.js
@@ -3,6 +3,7 @@
  * See LICENSE file for license details.
  */
 import { BasicLayout } from '@/layout/basic' // 主框架
+import { i18n } from '@/i18n'
 
 const routes = [
   {
@@ -10,7 +11,7 @@ const routes = [
     meta: {
       aliasName: 'index',
       icon: 'all-application',
-      title: 'a4b9392f.863853'
+      title: i18n.t('a4b9392f.863853')
     },
     path: '/',
     children: [
@@ -22,7 +23,7 @@ const routes = [
         meta: {
           aliasName: 'index',
           icon: 'all-application',
-          title: 'a4b9392f.863853',
+          title: i18n.t('a4b9392f.863853'),
           permissions: ['index']
         }
       }
diff --git a/src/router/routes/modules/data.js b/src/router/routes/modules/data.js
index 7bb883e..ecaa996 100755
--- a/src/router/routes/modules/data.js
+++ b/src/router/routes/modules/data.js
@@ -3,6 +3,7 @@
  * See LICENSE file for license details.
  */
 import { BasicLayout } from '@/layout/basic'
+import { i18n } from '@/i18n'
 
 const routes = [
   {
@@ -11,7 +12,7 @@ const routes = [
       aliasName: 'companydata',
       icon: 'internal-data',
       keepAlive: true,
-      title: 'e4519b2c.0d8307'
+      title: i18n.t('e4519b2c.0d8307')
     },
     name: 'data',
     path: '/data',
@@ -22,7 +23,7 @@ const routes = [
         meta: {
           aliasName: 'goodsstatistics',
           icon: 'pay-circle',
-          title: 'e4519b2c.c38352',
+          title: i18n.t('e4519b2c.c38352'),
           permissions: ['companydata.statistics.goodsstatistics']
         },
         component: () => import('@/view/mall/datacube/goodsdata')
@@ -33,7 +34,7 @@ const routes = [
         meta: {
           aliasName: 'orderstatistics',
           icon: 'pay-circle',
-          title: 'e4519b2c.9dbf41',
+          title: i18n.t('e4519b2c.9dbf41'),
           permissions: ['companydata.statistics.orderstatistics']
         },
         component: () => import('@/view/mall/datacube/companydata/order')
@@ -44,7 +45,7 @@ const routes = [
         meta: {
           aliasName: 'member-statistics',
           icon: 'pay-circle',
-          title: 'e4519b2c.843ff0',
+          title: i18n.t('e4519b2c.843ff0'),
           permissions: ['companydata.statistics.member-statistics']
         },
         component: () => import('@/view/mall/datacube/companydata/member')
@@ -55,7 +56,7 @@ const routes = [
         meta: {
           aliasName: 'distributordata',
           icon: 'pay-circle',
-          title: 'e4519b2c.63cf82',
+          title: i18n.t('e4519b2c.63cf82'),
           permissions: ['companydata.statistics.distributordata']
         },
         component: () => import('@/view/mall/datacube/distributordata')
@@ -66,7 +67,7 @@ const routes = [
         meta: {
           aliasName: 'baseexport',
           icon: 'pay-circle',
-          title: 'e4519b2c.080fda',
+          title: i18n.t('e4519b2c.080fda'),
           permissions: ['companydata.report.baseexport']
         },
         component: () => import('@/view/base/exportlog/index')
diff --git a/src/router/routes/modules/decoration.js b/src/router/routes/modules/decoration.js
index 2aa7c45..933c147 100755
--- a/src/router/routes/modules/decoration.js
+++ b/src/router/routes/modules/decoration.js
@@ -2,8 +2,9 @@
  * Copyright © ShopeX （http://www.shopex.cn）. All rights reserved.
  * See LICENSE file for license details.
  */
-import { BasicLayout, LayoutDynamic } from '@/layout/basic'
+import { BasicLayout, LayoutDynamic, EmptyLayout } from '@/layout/basic'
 import SubLayout from '@/view/sublayout'
+import { i18n } from '@/i18n'
 
 const routes = [
   {
@@ -12,7 +13,7 @@ const routes = [
       aliasName: 'wxapp-template',
       icon: 'page-template',
       keepAlive: true,
-      title: '7d3fbb6d.81b2cb'
+      title: i18n.t('7d3fbb6d.81b2cb')
     },
     name: 'decoration',
     path: '/decoration',
@@ -23,7 +24,7 @@ const routes = [
         meta: {
           aliasName: 'wxapp-template-edit',
           icon: 'pay-circle',
-          title: '7d3fbb6d.db1c89',
+          title: i18n.t('7d3fbb6d.db1c89'),
           permissions: ['wxapp-template.wxappmanage.wxapp-template-edit']
         },
         component: () => import('@/view/wxapp/home'),
@@ -43,7 +44,7 @@ const routes = [
         meta: {
           aliasName: 'classificationTemplate',
           icon: 'pay-circle',
-          title: '7d3fbb6d.398e60',
+          title: i18n.t('7d3fbb6d.398e60'),
           permissions: ['wxapp-template.wxappmanage.classificationTemplate']
         },
         component: () => import('@/view/wxapp/classificationTemplate')
@@ -54,7 +55,7 @@ const routes = [
         meta: {
           aliasName: 'wxapp-editcategory',
           icon: 'pay-circle',
-          title: '7d3fbb6d.226fc6',
+          title: i18n.t('7d3fbb6d.226fc6'),
           permissions: ['wxapp-template.wxappmanage.wxapp-editcategory']
         },
         component: () => import('@/view/wxapp/category/categorize')
@@ -65,7 +66,7 @@ const routes = [
         meta: {
           aliasName: 'wxapp-custompage',
           icon: 'pay-circle',
-          title: '7d3fbb6d.ec20e4',
+          title: i18n.t('7d3fbb6d.ec20e4'),
           permissions: ['wxapp-template.wxappmanage.wxapp-custompage']
         },
         component: () => import('@/view/wxapp/customPage')
@@ -76,7 +77,7 @@ const routes = [
         meta: {
           aliasName: 'colorstyle',
           icon: 'pay-circle',
-          title: '7d3fbb6d.c701e9',
+          title: i18n.t('7d3fbb6d.c701e9'),
           permissions: ['wxapp-template.wxappmanage.colorstyle']
         },
         component: () => import('@/view/wxapp/theme/colorStyle')
@@ -87,7 +88,7 @@ const routes = [
         meta: {
           aliasName: 'membercentersetting',
           icon: 'pay-circle',
-          title: '7d3fbb6d.12688a',
+          title: i18n.t('7d3fbb6d.12688a'),
           permissions: ['wxapp-template.wxappmanage.membercentersetting']
         },
         component: () => import('@/view/wxapp/memberCenter')
@@ -98,7 +99,7 @@ const routes = [
         meta: {
           aliasName: 'wxshopsetting',
           icon: 'pay-circle',
-          title: '7d3fbb6d.cc5507',
+          title: i18n.t('7d3fbb6d.cc5507'),
           permissions: ['wxapp-template.wxappmanage.wxshopsetting']
         },
         component: () => import('@/view/wxapp/shopInfo')
@@ -109,7 +110,7 @@ const routes = [
         meta: {
           aliasName: 'openscreenad',
           icon: 'pay-circle',
-          title: '7d3fbb6d.1c1143',
+          title: i18n.t('7d3fbb6d.1c1143'),
           permissions: ['wxapp-template.wxappmanage.openscreenad']
         },
         component: () => import('@/view/base/screen/openScreenAD')
@@ -120,62 +121,102 @@ const routes = [
         meta: {
           aliasName: 'templatelist',
           icon: 'pay-circle',
-          title: '7d3fbb6d.5a0a70',
+          title: i18n.t('7d3fbb6d.5a0a70'),
           permissions: ['wxapp-template.pcmall.templatelist']
         },
-        component: () => import('@/view/pc/pctemplate/index'),
-        children: [
-          {
-            path: 'edit'
-          }
-        ]
+        component: () => import('@/views/decoration/web-templatelist/index')
       },
-      // TODO: PC模板编辑
       // {
-      //   name: 'editing',
-      //   path: 'template/editing',
+      //   name: 'webTemplateEdit',
+      //   path: 'web/template/edit',
       //   meta: {
-      //     aliasName: 'design',
-      //     icon: 'pay-circle',
-      //     title: '模板编辑',
+      //     aliasName: 'templateEdit',
       //     permissions: ['wxapp-template.pcmall.design']
       //   },
-      //   component: () => import('@/view/pc/pctemplate')
+      //   component: () => import('@/views/decoration/web-template/index')
       // },
       {
         name: 'loginPage',
-        path: 'web/login-page',
+        path: 'web/config',
         meta: {
           aliasName: 'loginPageSetting',
           icon: 'pay-circle',
-          title: '7d3fbb6d.7de289',
+          title: '商城全局配置',
           permissions: ['wxapp-template.pcmall.loginPageSetting']
         },
-        component: () => import('@/view/pc/pctemplate/login')
-      },
-      {
-        name: 'seoConfiguration',
-        path: 'web/seo-configuration',
-        meta: {
-          aliasName: 'seo',
-          icon: 'pay-circle',
-          title: '7d3fbb6d.e807b2',
-          permissions: ['wxapp-template.pcmall.seo']
-        },
-        component: () => import('@/view/pc/tdk/globalset')
+        component: () => import('@/views/decoration/web-config')
       },
+      // {
+      //   name: 'seoConfiguration',
+      //   path: 'web/seo-configuration',
+      //   meta: {
+      //     aliasName: 'seo',
+      //     icon: 'pay-circle',
+      //     title: '商城全局配置',
+      //     permissions: ['wxapp-template.pcmall.seo']
+      //   },
+      //   component: () => import('@/views/decoration/web-config')
+      // },
       {
         name: 'page-seo',
         path: 'web/page-seo',
         meta: {
           aliasName: 'pageseo',
           icon: 'pay-circle',
-          title: '7d3fbb6d.06bc38',
+          title: i18n.t('7d3fbb6d.06bc38'),
           permissions: ['wxapp-template.pcmall.pageseo']
         },
         component: () => import('@/view/pc/tdk/givenset')
+      },
+      {
+        name: 'webMenu',
+        path: 'web-menu',
+        meta: {
+          title: i18n.t('7d3fbb6d.950dc2'),
+          permissions: ['wxapp-template.pcmall.web-menus']
+        },
+        component: () => import('@/views/decoration/web-menu/index')
+      },
+      {
+        name: 'webMenuCreate',
+        path: 'web-menu/create',
+        meta: {
+          title: i18n.t('7d3fbb6d.ba750e'),
+          permissions: ['wxapp-template.pcmall.web-menus']
+        },
+        component: () => import('@/views/decoration/web-menu/_id')
+      },
+      {
+        name: 'webMenuItems',
+        path: 'web-menu/:id',
+        meta: {
+          title: i18n.t('7d3fbb6d.ca3472'),
+          // 须与列表页 webMenu 一致，否则 generateAccess 会过滤掉本路由，进入详情会空白/404
+          permissions: ['wxapp-template.pcmall.web-menus']
+        },
+        component: () => import('@/views/decoration/web-menu/_id')
+      },
+      {
+        name: 'decorationWebEdit',
+        path: 'web/edit/:pageType',
+        meta: {
+          aliasName: 'decorationWebEdit',
+          icon: 'pay-circle',
+          title: i18n.t('7d3fbb6d.81b2cb'),
+          permissions: ['wxapp-template.pcmall.design']
+        },
+        component: () => import('@/views/decoration/web-template/index')
       }
     ]
+  },
+  {
+    component: EmptyLayout,
+    path: '/decoration/web/template/edit',
+    meta: {
+      aliasName: 'templateEdit',
+      permissions: ['wxapp-template.pcmall.design']
+    },
+    component: () => import('@/views/decoration/web-template/index')
   }
 ]
 
diff --git a/src/router/routes/modules/financial.js b/src/router/routes/modules/financial.js
index 09196c2..0b72eb3 100755
--- a/src/router/routes/modules/financial.js
+++ b/src/router/routes/modules/financial.js
@@ -3,6 +3,7 @@
  * See LICENSE file for license details.
  */
 import { BasicLayout } from '@/layout/basic'
+import { i18n } from '@/i18n'
 
 const routes = [
   {
@@ -11,7 +12,7 @@ const routes = [
       aliasName: 'financial',
       icon: 'funds',
       keepAlive: true,
-      title: 'a38a4db1.b8fe8d'
+      title: i18n.t('a38a4db1.b8fe8d')
     },
     name: 'financial',
     path: '/financial',
@@ -22,7 +23,7 @@ const routes = [
         meta: {
           aliasName: 'financialManageservicepayment',
           icon: 'pay-circle',
-          title: 'a38a4db1.8ab066',
+          title: i18n.t('a38a4db1.8ab066'),
           permissions: ['financial.financialManage.financialManageservicepayment']
         },
         component: () => import('@/view/mall/trade/list')
@@ -33,7 +34,7 @@ const routes = [
         meta: {
           aliasName: 'financialFinancialManageAftersalesrefundlist',
           icon: 'pay-circle',
-          title: 'a38a4db1.51e9e1',
+          title: i18n.t('a38a4db1.51e9e1'),
           permissions: ['financial.financialManage.financialFinancialManageAftersalesrefundlist']
         },
         component: () => import('@/view/mall/aftersales/refundList'),
@@ -50,7 +51,7 @@ const routes = [
         meta: {
           aliasName: 'Refunderrorlogs',
           icon: 'pay-circle',
-          title: 'a38a4db1.7c2544',
+          title: i18n.t('a38a4db1.7c2544'),
           permissions: ['financial.financialManage.Refunderrorlogs']
         },
         component: () => import('@/view/mall/trade/refunderrorlogs')
@@ -61,7 +62,7 @@ const routes = [
         meta: {
           aliasName: 'configure',
           icon: 'pay-circle',
-          title: 'a38a4db1.3965e5',
+          title: i18n.t('a38a4db1.3965e5'),
           permissions: ['financial.settlement.configure']
         },
         component: () => import('@/view/financial/settlement/configure')
@@ -72,7 +73,7 @@ const routes = [
         meta: {
           aliasName: 'configure_supplier',
           icon: 'pay-circle',
-          title: 'a38a4db1.070f26',
+          title: i18n.t('a38a4db1.070f26'),
           permissions: ['financial.settlement.summary']
         },
         component: () => import('@/view/financial/settlement/summary'),
@@ -90,7 +91,7 @@ const routes = [
         meta: {
           aliasName: 'configure_supplier',
           icon: 'pay-circle',
-          title: 'a38a4db1.385f74',
+          title: i18n.t('a38a4db1.385f74'),
           permissions: ['financial.settlement_supplier.configure_supplier']
         },
         component: () => import('@/views/financial/configure_supplier')
@@ -101,7 +102,7 @@ const routes = [
         meta: {
           aliasName: 'summary_supplier',
           icon: 'pay-circle',
-          title: 'a38a4db1.4c48e9',
+          title: i18n.t('a38a4db1.4c48e9'),
           permissions: ['financial.settlement_supplier.summary_supplier']
         },
         component: () => import('@/views/financial/summary_supplier'),
@@ -119,7 +120,7 @@ const routes = [
         meta: {
           aliasName: 'transfer',
           icon: 'pay-circle',
-          title: 'a38a4db1.682360',
+          title: i18n.t('a38a4db1.682360'),
           permissions: ['financial.examine.transfer']
         },
         component: () => import('@/view/mall/trade/examineTransfer'),
@@ -136,7 +137,7 @@ const routes = [
         meta: {
           aliasName: 'invoiceList',
           icon: 'pay-circle',
-          title: 'a38a4db1.d16abb',
+          title: i18n.t('a38a4db1.d16abb'),
           permissions: ['financial.invoice.invoice-list']
         },
         component: () => import('@/view/financial/invoice/list'),
@@ -157,7 +158,7 @@ const routes = [
         meta: {
           aliasName: 'invoiceSetting',
           icon: 'pay-circle',
-          title: 'a38a4db1.bcd859',
+          title: i18n.t('a38a4db1.bcd859'),
           permissions: ['financial.invoice.invoiceSetting']
         },
         component: () => import('@/view/financial/invoice/setting')
@@ -168,7 +169,7 @@ const routes = [
         meta: {
           aliasName: 'invoiceInfo',
           icon: 'pay-circle',
-          title: 'a38a4db1.91d8a5',
+          title: i18n.t('a38a4db1.91d8a5'),
           permissions: ['financial.invoice.invoiceInfo']
         },
         component: () => import('@/view/financial/invoice/information')
@@ -179,7 +180,7 @@ const routes = [
         meta: {
           aliasName: 'invoiceTax',
           icon: 'pay-circle',
-          title: 'a38a4db1.e4a771',
+          title: i18n.t('a38a4db1.e4a771'),
           permissions: ['financial.invoice.invoiceTax']
         },
         component: () => import('@/view/financial/invoice/invoiceTax')
@@ -190,7 +191,7 @@ const routes = [
         meta: {
           aliasName: 'invoiceConfirmation',
           icon: 'pay-circle',
-          title: 'a38a4db1.30117a',
+          title: i18n.t('a38a4db1.30117a'),
           permissions: ['financial.invoice.invoiceConfirmation']
         },
         component: () => import('@/view/financial/invoice/invoiceConfirmation')
diff --git a/src/router/routes/modules/marketing.js b/src/router/routes/modules/marketing.js
index 1c6daeb..b93f560 100755
--- a/src/router/routes/modules/marketing.js
+++ b/src/router/routes/modules/marketing.js
@@ -4,6 +4,7 @@
  */
 import { BasicLayout } from '@/layout/basic'
 import SubLayout from '@/view/sublayout'
+import { i18n } from '@/i18n'
 
 const routes = [
   {
@@ -12,7 +13,7 @@ const routes = [
       aliasName: 'marketing',
       icon: 'sales-report',
       keepAlive: true,
-      title: 'b213c3c4.916801'
+      title: i18n.t('b213c3c4.916801')
     },
     name: 'marketing',
     path: '/marketing',
@@ -23,7 +24,7 @@ const routes = [
         meta: {
           aliasName: 'membermarketing',
           icon: 'pay-circle',
-          title: 'b213c3c4.675a8b',
+          title: i18n.t('b213c3c4.675a8b'),
           permissions: ['marketing.coupon.membermarketing']
         },
         component: () => import('@/view/member/cardticket/coupon'),
@@ -44,7 +45,7 @@ const routes = [
         meta: {
           aliasName: 'couponspackage',
           icon: 'pay-circle',
-          title: 'b213c3c4.53d418',
+          title: i18n.t('b213c3c4.53d418'),
           permissions: ['marketing.coupon.couponspackage']
         },
         component: () => import('@/view/member/cardticket/couponspackage'),
@@ -65,7 +66,7 @@ const routes = [
         meta: {
           aliasName: 'coupongive',
           icon: 'pay-circle',
-          title: 'b213c3c4.725e84',
+          title: i18n.t('b213c3c4.725e84'),
           permissions: ['marketing.coupon.coupongive']
         },
         component: () => import('@/view/member/coupon/giveLog'),
@@ -83,7 +84,7 @@ const routes = [
         meta: {
           aliasName: 'couponsend',
           icon: 'pay-circle',
-          title: 'b213c3c4.dfa362',
+          title: i18n.t('b213c3c4.dfa362'),
           permissions: ['marketing.coupon.couponsend']
         },
         component: () => import('@/views/members/member_list'),
@@ -100,7 +101,7 @@ const routes = [
         meta: {
           aliasName: 'marketingsfulldiscount',
           icon: 'pay-circle',
-          title: 'b213c3c4.1c120b',
+          title: i18n.t('b213c3c4.1c120b'),
           permissions: ['marketing.promotion.marketingsfulldiscount']
         },
         component: () => import('@/view/member/promotions/fulldiscount/list'),
@@ -117,7 +118,7 @@ const routes = [
         meta: {
           aliasName: 'Marketingsfullminus',
           icon: 'pay-circle',
-          title: 'b213c3c4.94b1fd',
+          title: i18n.t('b213c3c4.94b1fd'),
           permissions: ['marketing.promotion.Marketingsfullminus']
         },
         component: () => import('@/view/member/promotions/fullminus/list'),
@@ -134,7 +135,7 @@ const routes = [
         meta: {
           aliasName: 'Marketingsfullgift',
           icon: 'pay-circle',
-          title: 'b213c3c4.8e2405',
+          title: i18n.t('b213c3c4.8e2405'),
           permissions: ['marketing.promotion.Marketingsfullgift']
         },
         component: () => import('@/view/member/promotions/fullgift/list'),
@@ -151,7 +152,7 @@ const routes = [
         meta: {
           aliasName: 'limitedtimesale',
           icon: 'pay-circle',
-          title: 'b213c3c4.a0aaca',
+          title: i18n.t('b213c3c4.a0aaca'),
           permissions: ['marketing.promotion.limitedtimesale']
         },
         component: () => import('@/view/member/promotions/limitedtimesale/list'),
@@ -168,7 +169,7 @@ const routes = [
         meta: {
           aliasName: 'marketingspluspricebuy',
           icon: 'pay-circle',
-          title: 'b213c3c4.54e654',
+          title: i18n.t('b213c3c4.54e654'),
           permissions: ['marketing.promotion.marketingspluspricebuy']
         },
         component: () => import('@/view/member/promotions/pluspricebuy/list'),
@@ -185,7 +186,7 @@ const routes = [
         meta: {
           aliasName: 'marketingpackage',
           icon: 'pay-circle',
-          title: 'b213c3c4.3e9a00',
+          title: i18n.t('b213c3c4.3e9a00'),
           permissions: ['marketing.promotion.marketingpackage']
         },
         component: () => import('@/view/member/promotions/package/list'),
@@ -202,7 +203,7 @@ const routes = [
         meta: {
           aliasName: 'marketingindex',
           icon: 'pay-circle',
-          title: 'b213c3c4.668339',
+          title: i18n.t('b213c3c4.668339'),
           permissions: ['marketing.membermarket.marketingindex']
         },
         component: () => import('@/view/member/promotions/index')
@@ -213,7 +214,7 @@ const routes = [
         meta: {
           aliasName: 'SpecificCrowdDiscount',
           icon: 'pay-circle',
-          title: 'b213c3c4.9ceb88',
+          title: i18n.t('b213c3c4.9ceb88'),
           permissions: ['marketing.membermarket.SpecificCrowdDiscount']
         },
         component: () => import('@/view/member/promotions/specificcrowd/specificcrowddiscount'),
@@ -230,7 +231,7 @@ const routes = [
         meta: {
           aliasName: 'memberpreference',
           icon: 'pay-circle',
-          title: 'b213c3c4.064352',
+          title: i18n.t('b213c3c4.064352'),
           permissions: ['marketing.membermarket.memberpreference']
         },
         component: () => import('@/view/member/promotions/memberpreference/list'),
@@ -247,7 +248,7 @@ const routes = [
         meta: {
           aliasName: 'marketingactivity',
           icon: 'pay-circle',
-          title: 'b213c3c4.375821',
+          title: i18n.t('b213c3c4.375821'),
           permissions: ['marketing.membermarket.marketingactivity']
         },
         component: () => import('@/views/marketing/autoMarketing/activity-list'),
@@ -268,7 +269,7 @@ const routes = [
         meta: {
           aliasName: 'recommendlike',
           icon: 'pay-circle',
-          title: 'b213c3c4.5a6889',
+          title: i18n.t('b213c3c4.5a6889'),
           permissions: ['marketing.membermarket.recommendlike']
         },
         component: () => import('@/view/member/promotions/recommendlike')
@@ -279,7 +280,7 @@ const routes = [
         meta: {
           aliasName: 'pointupvaluation',
           icon: 'pay-circle',
-          title: 'b213c3c4.c66d5b',
+          title: i18n.t('b213c3c4.c66d5b'),
           permissions: ['marketing.membermarket.pointupvaluation']
         },
         component: () => import('@/view/member/promotions/pointupvaluation/list'),
@@ -296,7 +297,7 @@ const routes = [
         meta: {
           aliasName: 'extrapoint',
           icon: 'pay-circle',
-          title: 'b213c3c4.2fac5c',
+          title: i18n.t('b213c3c4.2fac5c'),
           permissions: ['marketing.membermarket.extrapoint']
         },
         component: () => import('@/view/member/promotions/extrapoint/list'),
@@ -317,7 +318,7 @@ const routes = [
         meta: {
           aliasName: 'groupsindex',
           icon: 'pay-circle',
-          title: 'b213c3c4.0dc5dc',
+          title: i18n.t('b213c3c4.0dc5dc'),
           permissions: ['marketing.fissionmarketing.groupsindex']
         },
         component: () => import('@/view/member/groups/index'),
@@ -329,7 +330,7 @@ const routes = [
           {
             path: 'detail/:team_id?',
             meta: {
-              title: 'b213c3c4.690234'
+              title: i18n.t('b213c3c4.690234')
             },
             component: () => import('@/view/member/groups/teamDetail')
           },
@@ -345,7 +346,7 @@ const routes = [
         meta: {
           aliasName: 'marketingbargain',
           icon: 'pay-circle',
-          title: 'b213c3c4.d84526',
+          title: i18n.t('b213c3c4.d84526'),
           permissions: ['marketing.fissionmarketing.marketingbargain']
         },
         component: () => import('@/view/member/bargain/index'),
@@ -362,7 +363,7 @@ const routes = [
         meta: {
           aliasName: 'popularizesetting',
           icon: 'pay-circle',
-          title: 'b213c3c4.0aeca0',
+          title: i18n.t('b213c3c4.0aeca0'),
           permissions: ['marketing.popularize.popularizesetting']
         },
         component: () => import('@/view/popularize/setting')
@@ -373,7 +374,7 @@ const routes = [
         meta: {
           aliasName: 'popularizelist',
           icon: 'pay-circle',
-          title: 'b213c3c4.4db9c2',
+          title: i18n.t('b213c3c4.4db9c2'),
           permissions: ['marketing.popularize.popularizelist']
         },
         component: () => import('@/view/popularize/list'),
@@ -394,7 +395,7 @@ const routes = [
         meta: {
           aliasName: 'promotersetting',
           icon: 'pay-circle',
-          title: 'b213c3c4.481b69',
+          title: i18n.t('b213c3c4.481b69'),
           permissions: ['marketing.popularize.promotersetting']
         },
         component: () => import('@/view/popularize/promoterSetting')
@@ -405,7 +406,7 @@ const routes = [
         meta: {
           aliasName: 'popularizedata',
           icon: 'pay-circle',
-          title: 'b213c3c4.251493',
+          title: i18n.t('b213c3c4.251493'),
           permissions: ['marketing.popularize.popularizedata']
         },
         component: () => import('@/view/popularize/data'),
@@ -422,7 +423,7 @@ const routes = [
         meta: {
           aliasName: 'popularizewithdraw',
           icon: 'pay-circle',
-          title: 'b213c3c4.33011e',
+          title: i18n.t('b213c3c4.33011e'),
           permissions: ['marketing.popularize.popularizewithdraw']
         },
         component: () => import('@/view/popularize/withdraw')
@@ -433,7 +434,7 @@ const routes = [
         meta: {
           aliasName: 'popularizegoods',
           icon: 'pay-circle',
-          title: 'b213c3c4.ad8d69',
+          title: i18n.t('b213c3c4.ad8d69'),
           permissions: ['marketing.popularize.popularizegoods']
         },
         component: () => import('@/view/popularize/goods')
@@ -444,7 +445,7 @@ const routes = [
         meta: {
           aliasName: 'taskbrokerage',
           icon: 'pay-circle',
-          title: 'b213c3c4.4b43b0',
+          title: i18n.t('b213c3c4.4b43b0'),
           permissions: ['marketing.popularize.taskbrokerage']
         },
         component: () => import('@/view/popularize/taskBrokerage')
@@ -455,7 +456,7 @@ const routes = [
         meta: {
           aliasName: 'taskbrokeragecount',
           icon: 'pay-circle',
-          title: 'b213c3c4.98aee0',
+          title: i18n.t('b213c3c4.98aee0'),
           permissions: ['marketing.popularize.taskbrokeragecount']
         },
         component: () => import('@/view/popularize/taskBrokerageCount')
@@ -466,7 +467,7 @@ const routes = [
         meta: {
           aliasName: 'liveroomlist',
           icon: 'pay-circle',
-          title: 'b213c3c4.425999',
+          title: i18n.t('b213c3c4.425999'),
           permissions: ['marketing.liveroomlist']
         },
         component: () => import('@/view/mall/liveroom/list'),
@@ -474,7 +475,7 @@ const routes = [
           {
             path: 'editor/:itemId?',
             meta: {
-              title: 'b213c3c4.1c0bf5'
+              title: i18n.t('b213c3c4.1c0bf5')
             },
             component: () =>
               import(
@@ -489,7 +490,7 @@ const routes = [
         meta: {
           aliasName: 'Registrationactivity',
           icon: 'pay-circle',
-          title: 'b213c3c4.5e06be',
+          title: i18n.t('b213c3c4.5e06be'),
           permissions: ['marketing.apply.Registrationactivity']
         },
         component: () => import('@/view/member/selfservice/registrationactivity'),
@@ -506,7 +507,7 @@ const routes = [
         meta: {
           aliasName: 'Registrationrecord',
           icon: 'pay-circle',
-          title: 'b213c3c4.42a5b5',
+          title: i18n.t('b213c3c4.42a5b5'),
           permissions: ['marketing.apply.Registrationrecord']
         },
         component: () => import('@/view/member/selfservice/registrationrecord'),
@@ -527,7 +528,7 @@ const routes = [
         meta: {
           aliasName: 'formattrs',
           icon: 'pay-circle',
-          title: 'b213c3c4.f26faa',
+          title: i18n.t('b213c3c4.f26faa'),
           permissions: ['marketing.apply.formattrs']
         },
         component: () => import('@/view/member/selfservice/formsettinglist'),
@@ -545,7 +546,7 @@ const routes = [
         meta: {
           aliasName: 'formtemplate',
           icon: 'pay-circle',
-          title: 'b213c3c4.59a9c2',
+          title: i18n.t('b213c3c4.59a9c2'),
           permissions: ['marketing.apply.formtemplate']
         },
         component: () => import('@/view/member/selfservice/formtemplatelist'),
@@ -563,7 +564,7 @@ const routes = [
         meta: {
           aliasName: 'wheel',
           icon: 'pay-circle',
-          title: 'b213c3c4.5fa218',
+          title: i18n.t('b213c3c4.5fa218'),
           permissions: ['marketing.wheel']
         },
         component: () => import('@/view/member/promotions/wheel/index')
diff --git a/src/router/routes/modules/orders.js b/src/router/routes/modules/orders.js
index 56a4177..545fbdf 100755
--- a/src/router/routes/modules/orders.js
+++ b/src/router/routes/modules/orders.js
@@ -3,6 +3,7 @@
  * See LICENSE file for license details.
  */
 import { BasicLayout } from '@/layout/basic' // 主框架
+import { i18n } from '@/i18n'
 
 const routes = [
   {
@@ -11,7 +12,7 @@ const routes = [
       aliasName: 'order',
       icon: 'order',
       keepAlive: true,
-      title: 'c15892aa.4c117f'
+      title: i18n.t('c15892aa.4c117f')
     },
     name: 'orders',
     path: '/order',
@@ -22,7 +23,7 @@ const routes = [
         meta: {
           aliasName: 'tradenormalorders',
           icon: 'icon-products',
-          title: 'c15892aa.07166e',
+          title: i18n.t('c15892aa.07166e'),
           permissions: ['order.entitytrade.tradenormalorders']
         },
         component: () => import('@/view/mall/trade/normalorders/list'),
@@ -51,7 +52,7 @@ const routes = [
         meta: {
           aliasName: 'tradenormalshoporders',
           icon: 'icon-products',
-          title: 'c15892aa.a509ca',
+          title: i18n.t('c15892aa.a509ca'),
           permissions: ['order.entitytrade.tradenormalshoporders']
         },
         children: [
@@ -68,7 +69,7 @@ const routes = [
         meta: {
           aliasName: 'normalordersupload',
           icon: 'icon-products',
-          title: 'c15892aa.425991',
+          title: i18n.t('c15892aa.425991'),
           permissions: ['order.entitytrade.normalordersupload']
         }
       },
@@ -79,7 +80,7 @@ const routes = [
         meta: {
           aliasName: 'aftersaleslist',
           icon: 'icon-products',
-          title: 'c15892aa.75bfab',
+          title: i18n.t('c15892aa.75bfab'),
           permissions: ['order.aftersales.aftersaleslist']
         },
         children: [
@@ -96,7 +97,7 @@ const routes = [
         meta: {
           aliasName: 'ordersettingdetail',
           icon: 'icon-products',
-          title: 'c15892aa.66cd47',
+          title: i18n.t('c15892aa.66cd47'),
           permissions: ['order.ordersetting.ordersettingdetail']
         }
       },
@@ -107,7 +108,7 @@ const routes = [
         meta: {
           aliasName: 'tradesetting',
           icon: 'icon-products',
-          title: 'c15892aa.6d923e',
+          title: i18n.t('c15892aa.6d923e'),
           permissions: ['order.ordersetting.tradesetting']
         }
       },
@@ -118,7 +119,7 @@ const routes = [
         meta: {
           aliasName: 'aftersalesreason',
           icon: 'icon-products',
-          title: 'c15892aa.160adc',
+          title: i18n.t('c15892aa.160adc'),
           permissions: ['order.ordersetting.aftersalesreason']
         }
       },
@@ -131,7 +132,7 @@ const routes = [
         meta: {
           aliasName: 'cartremind',
           icon: 'icon-products',
-          title: 'c15892aa.b8c40b',
+          title: i18n.t('c15892aa.b8c40b'),
           permissions: ['order.ordersetting.cartremind']
         }
       },
@@ -142,7 +143,7 @@ const routes = [
         meta: {
           aliasName: 'goodslimit',
           icon: 'icon-products',
-          title: 'c15892aa.44d46e',
+          title: i18n.t('c15892aa.44d46e'),
           permissions: ['order.ordersetting.goodslimit']
         },
         children: [
@@ -181,7 +182,7 @@ const routes = [
         meta: {
           aliasName: 'marketingdistribution_orders',
           icon: 'icon-products',
-          title: 'c15892aa.aae16d',
+          title: i18n.t('c15892aa.aae16d'),
           permissions: ['order.entitytrade.marketingdistribution_orders']
         },
         component: () => import('@/view/mall/marketing/distributionOrders'),
diff --git a/src/router/routes/modules/point.js b/src/router/routes/modules/point.js
index adf9f53..df72e6e 100644
--- a/src/router/routes/modules/point.js
+++ b/src/router/routes/modules/point.js
@@ -3,6 +3,7 @@
  * See LICENSE file for license details.
  */
 import { BasicLayout } from '@/layout/basic'
+import { i18n } from '@/i18n'
 
 const routes = [
   {
@@ -11,7 +12,7 @@ const routes = [
       aliasName: 'rewardsStore',
       icon: 'funds',
       keepAlive: true,
-      title: 'a0c3da4f.a13364'
+      title: i18n.t('a0c3da4f.a13364')
     },
     name: 'rewardsStore',
     path: '/rewardsStore',
@@ -22,7 +23,7 @@ const routes = [
         meta: {
           aliasName: 'rewardItemManagement',
           icon: 'pay-circle',
-          title: 'a0c3da4f.5782b6',
+          title: i18n.t('a0c3da4f.5782b6'),
           permissions: ['rewardsStore.rewardItemManagement']
         },
         component: () => import('@/view/applications/pointmall/list'),
@@ -49,7 +50,7 @@ const routes = [
         meta: {
           aliasName: 'rewardordermanagement',
           icon: 'pay-circle',
-          title: 'a0c3da4f.afcd11',
+          title: i18n.t('a0c3da4f.afcd11'),
           permissions: ['rewardsStore.rewardordermanagement']
         },
         component: () => import('@/view/applications/pointmall/orderList'),
@@ -66,7 +67,7 @@ const routes = [
         meta: {
           aliasName: 'basicSettings',
           icon: 'pay-circle',
-          title: 'a0c3da4f.0aeca0',
+          title: i18n.t('a0c3da4f.0aeca0'),
           permissions: ['rewardsStore.basicSettings']
         },
         component: () => import('@/view/applications/pointmall/setting')
diff --git a/src/router/routes/modules/products.js b/src/router/routes/modules/products.js
index b816d34..26ea779 100755
--- a/src/router/routes/modules/products.js
+++ b/src/router/routes/modules/products.js
@@ -3,6 +3,7 @@
  * See LICENSE file for license details.
  */
 import { BasicLayout } from '@/layout/basic' // 主框架
+import { i18n } from '@/i18n'
 
 const routes = [
   {
@@ -11,7 +12,7 @@ const routes = [
       aliasName: 'entity',
       icon: 'commodity',
       keepAlive: true,
-      title: '2c432cc1.9897d8'
+      title: i18n.t('2c432cc1.9897d8')
     },
     name: 'products',
     path: '/products',
@@ -23,7 +24,7 @@ const routes = [
         meta: {
           aliasName: 'goodsphysical',
           icon: 'icon-products',
-          title: '2c432cc1.81a684',
+          title: i18n.t('2c432cc1.81a684'),
           permissions: ['entity.goods.goodsphysical']
         },
         children: [
@@ -31,7 +32,7 @@ const routes = [
             path: 'editor/:itemId?',
             component: () => import('@/view/goods/index'),
             meta: {
-              title: '2c432cc1.27fabd',
+              title: i18n.t('2c432cc1.27fabd'),
               hidden: true
             }
           },
@@ -39,7 +40,7 @@ const routes = [
             path: 'physicalupload/:itemId?',
             component: () => import('@/view/mall/goods/physical/normalGoodsUpload.vue'),
             meta: {
-              title: '2c432cc1.a4c910',
+              title: i18n.t('2c432cc1.a4c910'),
               hidden: true
             }
           },
@@ -47,7 +48,7 @@ const routes = [
             path: 'stock-import',
             component: () => import('@/view/mall/goods/physical/normalGoodsStoreUpload'),
             meta: {
-              title: '2c432cc1.ac5320',
+              title: i18n.t('2c432cc1.ac5320'),
               hidden: true
             }
           },
@@ -55,7 +56,7 @@ const routes = [
             path: 'profit-sharing-import',
             component: () => import('@/view/mall/goods/physical/normalGoodsProfitUpload'),
             meta: {
-              title: '2c432cc1.022564',
+              title: i18n.t('2c432cc1.022564'),
               hidden: true
             }
           },
@@ -63,7 +64,7 @@ const routes = [
             path: 'product-import',
             component: () => import('@/view/mall/goods/physical/normalGoodsUpload'),
             meta: {
-              title: '2c432cc1.9745ac',
+              title: i18n.t('2c432cc1.9745ac'),
               hidden: true
             }
           }
@@ -76,7 +77,7 @@ const routes = [
         meta: {
           aliasName: 'storeshopitemanagement',
           icon: 'icon-products',
-          title: '2c432cc1.8065fb',
+          title: i18n.t('2c432cc1.8065fb'),
           permissions: ['entity.goods.storeshopitemanagement']
         }
       },
@@ -87,7 +88,7 @@ const routes = [
         meta: {
           aliasName: 'goodsaudit',
           icon: 'icon-products',
-          title: '2c432cc1.b1c9d7',
+          title: i18n.t('2c432cc1.b1c9d7'),
           permissions: ['entity.goods.goodsaudit']
         },
         children: [
@@ -97,7 +98,7 @@ const routes = [
             component: () => import('@/view/goods/index'),
             meta: {
               icon: 'icon-products',
-              title: '2c432cc1.241aca',
+              title: i18n.t('2c432cc1.241aca'),
               hidden: true
             }
           }
@@ -108,7 +109,7 @@ const routes = [
         path: 'product-category/management-category',
         component: () => import('@/view/goods/mainCategory'),
         meta: {
-          title: '2c432cc1.b3ed9f',
+          title: i18n.t('2c432cc1.b3ed9f'),
           permissions: ['entity.goodsgroup.goodsmaincategory']
         }
       },
@@ -117,7 +118,7 @@ const routes = [
         path: 'product-category/sale-category',
         component: () => import('@/view/goods/saleCategory'),
         meta: {
-          title: '2c432cc1.392d49',
+          title: i18n.t('2c432cc1.392d49'),
           permissions: ['entity.goodsgroup.goodscategory']
         }
       },
@@ -126,7 +127,7 @@ const routes = [
         path: 'product-category/product-tag',
         component: () => import('@/view/mall/goods/tags'),
         meta: {
-          title: '2c432cc1.0f394b',
+          title: i18n.t('2c432cc1.0f394b'),
           permissions: ['entity.goodsgroup.itemtags']
         }
       },
@@ -135,7 +136,7 @@ const routes = [
         path: 'base-config/product-sku',
         component: () => import('@/view/mall/goods/attributes/attributes'),
         meta: {
-          title: '2c432cc1.5fceb3',
+          title: i18n.t('2c432cc1.5fceb3'),
           permissions: ['entity.goodsbase.goodsattributes']
         }
       },
@@ -144,7 +145,7 @@ const routes = [
         path: 'base-config/minimum-order-quantity',
         component: () => import('@/view/mall/goods/attributes/goodsattributes'),
         meta: {
-          title: '2c432cc1.ed52fd',
+          title: i18n.t('2c432cc1.ed52fd'),
           permissions: ['entity.goodsbase.goodsstartnum']
         }
       },
@@ -153,7 +154,7 @@ const routes = [
         path: 'base-config/product-brand',
         component: () => import('@/view/mall/goods/attributes/brand'),
         meta: {
-          title: '2c432cc1.ef6fc3',
+          title: i18n.t('2c432cc1.ef6fc3'),
           permissions: ['entity.goodsbase.goodsbrand']
         }
       },
@@ -162,7 +163,7 @@ const routes = [
         path: 'base-config/product-params',
         component: () => import('@/view/mall/goods/attributes/params'),
         meta: {
-          title: '2c432cc1.8686bb',
+          title: i18n.t('2c432cc1.8686bb'),
           permissions: ['entity.goodsbase.goodsparams']
         }
       },
@@ -171,7 +172,7 @@ const routes = [
         path: 'base-config/ranking-list',
         component: () => import('@/view/mall/goods/ranking/index'),
         meta: {
-          title: '2c432cc1.1db489',
+          title: i18n.t('2c432cc1.1db489'),
           permissions: ['entity.goodsbase.rankingList']
         }
       },
@@ -180,7 +181,7 @@ const routes = [
         path: 'product-manage/exportstoreitems',
         component: () => import('@/view/mall/marketing/productUpdate'),
         meta: {
-          title: '2c432cc1.068bb6',
+          title: i18n.t('2c432cc1.068bb6'),
           permissions: ['entity.goods.exportstoreitems']
         }
       }
diff --git a/src/router/routes/modules/sellers.js b/src/router/routes/modules/sellers.js
index dcf1f92..8b5dd23 100755
--- a/src/router/routes/modules/sellers.js
+++ b/src/router/routes/modules/sellers.js
@@ -4,6 +4,7 @@
  */
 import { BasicLayout } from '@/layout/basic'
 import SubLayout from '@/view/sublayout'
+import { i18n } from '@/i18n'
 
 const routes = [
   {
@@ -12,7 +13,7 @@ const routes = [
       aliasName: 'sellers',
       icon: 'branch-one',
       keepAlive: true,
-      title: 'fb06c42c.9f1ea3'
+      title: i18n.t('fb06c42c.9f1ea3')
     },
     name: 'sellers',
     path: '/sellers',
@@ -23,7 +24,7 @@ const routes = [
         meta: {
           aliasName: 'storemanager',
           icon: 'pay-circle',
-          title: 'fb06c42c.9f1ea3',
+          title: i18n.t('fb06c42c.9f1ea3'),
           permissions: ['sellers.salesorganization.storemanager']
         },
         component: () => import('@/view/mall/marketing/merchantList/index'),
@@ -40,7 +41,7 @@ const routes = [
         meta: {
           aliasName: 'marketingsellers',
           icon: 'pay-circle',
-          title: 'fb06c42c.654af8',
+          title: i18n.t('fb06c42c.654af8'),
           permissions: ['sellers.sellersmanager.marketingsellers']
         },
         component: () => import('@/view/mall/marketing/distributor'),
@@ -78,7 +79,7 @@ const routes = [
         meta: {
           aliasName: 'storemanager_application',
           icon: 'pay-circle',
-          title: 'fb06c42c.20d385',
+          title: i18n.t('fb06c42c.20d385'),
           permissions: ['sellers.sellersmanager.storemanager_application']
         },
         component: () => import('@/view/mall/marketing/merchantVerify'),
@@ -95,7 +96,7 @@ const routes = [
         meta: {
           aliasName: 'distributoraftersalesaddress1',
           icon: 'pay-circle',
-          title: 'fb06c42c.6356a8',
+          title: i18n.t('fb06c42c.6356a8'),
           permissions: ['sellers.sellersmanager.distributoraftersalesaddress1']
         },
         component: () => import('@/view/mall/marketing/distributorAftersalesAddress')
@@ -106,7 +107,7 @@ const routes = [
         meta: {
           aliasName: 'Sellerstags',
           icon: 'pay-circle',
-          title: 'fb06c42c.e86c4b',
+          title: i18n.t('fb06c42c.e86c4b'),
           permissions: ['sellers.sellersmanager.Sellerstags']
         },
         component: () => import('@/view/mall/marketing/distributortags')
@@ -117,7 +118,7 @@ const routes = [
         meta: {
           aliasName: 'storemanager_setting',
           icon: 'pay-circle',
-          title: 'fb06c42c.b2662c',
+          title: i18n.t('fb06c42c.b2662c'),
           permissions: ['sellers.salesetting.storemanager_setting']
         },
         component: () => import('@/view/mall/marketing/setting')
@@ -128,7 +129,7 @@ const routes = [
         meta: {
           aliasName: 'storecategory',
           icon: 'icon-address',
-          title: 'fb06c42c.2419d0',
+          title: i18n.t('fb06c42c.2419d0'),
           permissions: ['sellers.sellersmanager.storecategory']
         },
         component: () => import('@/views/store/store-category')
@@ -139,7 +140,7 @@ const routes = [
         meta: {
           aliasName: 'nearbystoreinfo',
           icon: 'icon-address',
-          title: 'fb06c42c.84b1aa',
+          title: i18n.t('fb06c42c.84b1aa'),
           permissions: ['sellers.sellersmanager.nearbystoreinfo']
         },
         component: () => import('@/views/store/nearby-store-info')
diff --git a/src/router/routes/modules/setting.js b/src/router/routes/modules/setting.js
index c8b5ce2..28c5886 100755
--- a/src/router/routes/modules/setting.js
+++ b/src/router/routes/modules/setting.js
@@ -4,6 +4,7 @@
  */
 import { BasicLayout } from '@/layout/basic' // 主框架
 import { VERSION_SHUYUN } from '@/utils'
+import { i18n } from '@/i18n'
 
 const routes = [
   {
@@ -12,7 +13,7 @@ const routes = [
       aliasName: 'setting',
       icon: 'setting-config',
       keepAlive: true,
-      title: '181fc9cc.e366cc'
+      title: i18n.t('181fc9cc.e366cc')
     },
     name: 'setting',
     path: '/setting',
@@ -23,7 +24,7 @@ const routes = [
         meta: {
           aliasName: 'platformstaff',
           icon: 'icon-products',
-          title: '181fc9cc.26d82e',
+          title: i18n.t('181fc9cc.26d82e'),
           permissions: ['setting.staff.platformstaff']
         },
         component: () => import('@/view/base/account/normalstaff')
@@ -34,7 +35,7 @@ const routes = [
         meta: {
           aliasName: 'platformstaffroles',
           icon: 'icon-products',
-          title: '181fc9cc.7e337d',
+          title: i18n.t('181fc9cc.7e337d'),
           permissions: ['setting.staff.platformstaffroles']
         },
         component: () => import('@/views/settings/role-admin')
@@ -45,7 +46,7 @@ const routes = [
         meta: {
           aliasName: 'merchantstaff',
           icon: 'icon-products',
-          title: '181fc9cc.f629da',
+          title: i18n.t('181fc9cc.f629da'),
           permissions: ['setting.staff.merchantstaff']
         },
         component: () => import('@/view/base/account/storestaff')
@@ -57,7 +58,7 @@ const routes = [
         meta: {
           aliasName: 'storemanager_account',
           icon: 'icon-products',
-          title: '181fc9cc.2fda42',
+          title: i18n.t('181fc9cc.2fda42'),
           permissions: ['setting.staff.storemanager_account']
         },
         component: () => import('@/view/mall/marketing/merchantAccount')
@@ -69,7 +70,7 @@ const routes = [
         meta: {
           aliasName: 'shopmenus',
           icon: 'icon-products',
-          title: '181fc9cc.712fef',
+          title: i18n.t('181fc9cc.712fef'),
           permissions: ['setting.menumanage.shopmenus']
         },
         component: () => import('@/view/menus/shopmenu')
@@ -80,7 +81,7 @@ const routes = [
         meta: {
           aliasName: 'distributormenu',
           icon: 'icon-products',
-          title: '181fc9cc.5e1308',
+          title: i18n.t('181fc9cc.5e1308'),
           permissions: ['setting.menumanage.distributormenu']
         },
         component: () => import('@/view/menus/distributormenu')
@@ -91,7 +92,7 @@ const routes = [
         meta: {
           aliasName: 'merchantmenu',
           icon: 'icon-products',
-          title: '181fc9cc.86be9a',
+          title: i18n.t('181fc9cc.86be9a'),
           permissions: ['setting.menumanage.merchantmenu']
         },
         component: () => import('@/view/menus/merchantmenu')
@@ -102,7 +103,7 @@ const routes = [
         meta: {
           aliasName: 'suppliermenus',
           icon: 'icon-products',
-          title: '181fc9cc.f6b769',
+          title: i18n.t('181fc9cc.f6b769'),
           permissions: ['setting.menumanage.suppliermenus']
         },
         component: () => import('@/view/menus/supplier')
@@ -114,7 +115,7 @@ const routes = [
         meta: {
           aliasName: 'publicsetting',
           icon: 'icon-products',
-          title: '181fc9cc.91a229',
+          title: i18n.t('181fc9cc.91a229'),
           permissions: ['setting.systemsetting.publicsetting']
         },
         component: () => import('@/views/settings/systemConfig/publicsetting')
@@ -140,7 +141,7 @@ const routes = [
         meta: {
           aliasName: 'invoinceConfiguration',
           icon: 'icon-products',
-          title: '181fc9cc.1275c1',
+          title: i18n.t('181fc9cc.1275c1'),
           permissions: ['setting.systemsetting.invoinceConfiguration']
         },
         component: () => import('@/views/settings/systemConfig/invoiceConfiguration/baiSetting')
@@ -151,7 +152,7 @@ const routes = [
         meta: {
           aliasName: 'assetpayment',
           icon: 'icon-products',
-          title: '181fc9cc.1c3835',
+          title: i18n.t('181fc9cc.1c3835'),
           permissions: ['setting.systemsetting.assetpayment']
         },
         component: () => import('@/views/settings/systemConfig/payment')
@@ -162,7 +163,7 @@ const routes = [
         meta: {
           aliasName: 'datamessage',
           icon: 'icon-products',
-          title: '181fc9cc.ffa488',
+          title: i18n.t('181fc9cc.ffa488'),
           permissions: ['setting.systemsetting.datamessage']
         },
         component: () => {
@@ -251,7 +252,7 @@ const routes = [
         meta: {
           aliasName: 'Yilianyun',
           icon: 'icon-products',
-          title: '181fc9cc.bf34e4',
+          title: i18n.t('181fc9cc.bf34e4'),
           permissions: ['setting.systemsetting.Yilianyun']
         },
         component: () => import('@/views/settings/systemConfig/yilianyun/index')
@@ -262,7 +263,7 @@ const routes = [
         meta: {
           aliasName: 'ugctpos',
           icon: 'icon-products',
-          title: '181fc9cc.b28ada',
+          title: i18n.t('181fc9cc.b28ada'),
           permissions: ['setting.systemsetting.ugctpos']
         },
         component: () => import('@/views/settings/systemConfig/ugcTPOS')
@@ -273,7 +274,7 @@ const routes = [
         meta: {
           aliasName: 'wxaindex',
           icon: 'icon-products',
-          title: '181fc9cc.10aa76',
+          title: i18n.t('181fc9cc.10aa76'),
           permissions: ['setting.systemsetting.wxaindex']
         },
         component: () => import('@/view/wxapp/wxappmanage/list')
@@ -284,7 +285,7 @@ const routes = [
         meta: {
           aliasName: 'editdashboard',
           icon: 'icon-products',
-          title: '181fc9cc.6450d8',
+          title: i18n.t('181fc9cc.6450d8'),
           permissions: ['setting.systemsetting.editdashboard']
         },
         component: () => import('@/view/wxapp/statistics/dataanalysis/index')
@@ -295,7 +296,7 @@ const routes = [
         meta: {
           aliasName: 'editsourcemanagement',
           icon: 'icon-products',
-          title: '181fc9cc.21058f',
+          title: i18n.t('181fc9cc.21058f'),
           permissions: ['setting.systemsetting.editsourcemanagement']
         },
         component: () => import('@/view/wxapp/statistics/sourcemanagement/index'),
@@ -304,7 +305,7 @@ const routes = [
             path: 'detail/:monitorId?',
             component: () => import('@/view/wxapp/statistics/sourcemanagement/monito_detail'),
             meta: {
-              title: '181fc9cc.b76938',
+              title: i18n.t('181fc9cc.b76938'),
               hidden: true
             }
           }
@@ -316,7 +317,7 @@ const routes = [
         meta: {
           aliasName: 'noticemessage',
           icon: 'icon-products',
-          title: '181fc9cc.579cc5',
+          title: i18n.t('181fc9cc.579cc5'),
           permissions: ['setting.systemsetting.noticemessage']
         },
         component: () => import('@/view/wxapp/messages')
@@ -328,7 +329,7 @@ const routes = [
         meta: {
           aliasName: '',
           icon: 'icon-products',
-          title: '181fc9cc.cbf7c8',
+          title: i18n.t('181fc9cc.cbf7c8'),
           permissions: ['setting.systemsetting.brand']
         },
         component: () => import('@/views/settings/systemConfig/official-account-auth')
@@ -339,7 +340,7 @@ const routes = [
         meta: {
           aliasName: 'wxappchat',
           icon: 'icon-products',
-          title: '181fc9cc.107a88',
+          title: i18n.t('181fc9cc.107a88'),
           permissions: ['setting.systemsetting.wxappchat']
         },
         component: () => import('@/views/settings/systemConfig/wxapp-customer-service')
@@ -350,7 +351,7 @@ const routes = [
         meta: {
           aliasName: 'EChat',
           icon: 'icon-products',
-          title: '181fc9cc.e66efe',
+          title: i18n.t('181fc9cc.e66efe'),
           permissions: ['setting.systemsetting.EChat']
         },
         component: () => import('@/views/settings/systemConfig/echat')
@@ -361,7 +362,7 @@ const routes = [
         meta: {
           aliasName: 'meiqia',
           icon: 'icon-products',
-          title: '181fc9cc.7ef177',
+          title: i18n.t('181fc9cc.7ef177'),
           permissions: ['setting.systemsetting.meiqia']
         },
         component: () => import('@/views/settings/systemConfig/meiqia')
@@ -372,7 +373,7 @@ const routes = [
         meta: {
           aliasName: 'wdtSetting',
           icon: 'icon-products',
-          title: '181fc9cc.152925',
+          title: i18n.t('181fc9cc.152925'),
           permissions: ['setting.systemsetting.wdtSetting']
         },
         component: () => import('@/views/settings/systemConfig/wdtSetting')
@@ -383,7 +384,7 @@ const routes = [
         meta: {
           aliasName: 'jstSetting',
           icon: 'icon-products',
-          title: '181fc9cc.deb133',
+          title: i18n.t('181fc9cc.deb133'),
           permissions: ['setting.systemsetting.jstSetting']
         },
         component: () => import('@/views/settings/systemConfig/jstSetting')
@@ -394,7 +395,7 @@ const routes = [
         meta: {
           aliasName: 'domain_setting',
           icon: 'icon-products',
-          title: '181fc9cc.93c728',
+          title: i18n.t('181fc9cc.93c728'),
           permissions: ['setting.systemsetting.domain_setting']
         },
         component: () => import('@/views/settings/systemConfig/domain')
@@ -405,7 +406,7 @@ const routes = [
         meta: {
           aliasName: 'approveDataPass',
           icon: 'icon-products',
-          title: '181fc9cc.1fb869',
+          title: i18n.t('181fc9cc.1fb869'),
           permissions: ['setting.systemsetting.approveDataPass']
         },
         component: () => import('@/views/settings/systemConfig/encrypt/authAdmin.vue')
@@ -416,7 +417,7 @@ const routes = [
         meta: {
           aliasName: 'applyDataPass',
           icon: 'icon-products',
-          title: '181fc9cc.18dbfa',
+          title: i18n.t('181fc9cc.18dbfa'),
           permissions: ['setting.systemsetting.applyDataPass']
         },
         component: () => import('@/views/settings/systemConfig/authorityapproval'),
@@ -425,7 +426,7 @@ const routes = [
             path: 'approve/:id?',
             component: () => import('@/views/settings/systemConfig/authorityapproval/approve'),
             meta: {
-              title: '181fc9cc.d58eae',
+              title: i18n.t('181fc9cc.d58eae'),
               hidden: true
             }
           }
@@ -437,7 +438,7 @@ const routes = [
         meta: {
           aliasName: 'webPrivacyStatement',
           icon: 'icon-products',
-          title: '181fc9cc.dd2c2d',
+          title: i18n.t('181fc9cc.dd2c2d'),
           permissions: ['setting.systemsetting.webPrivacyStatement']
         },
         component: () => import('@/views/settings/systemConfig/webPrivacyStatement')
@@ -448,7 +449,7 @@ const routes = [
         meta: {
           aliasName: 'extminilink',
           icon: 'icon-products',
-          title: '181fc9cc.04a911',
+          title: i18n.t('181fc9cc.04a911'),
           permissions: ['setting.systemsetting.extminilink']
         },
         component: () => import('@/views/settings/systemConfig/external-app'),
@@ -457,7 +458,7 @@ const routes = [
             path: 'editor',
             component: () => import('@/views/settings/systemConfig/extMiniLinkDetail'),
             meta: {
-              title: '181fc9cc.3ddd64',
+              title: i18n.t('181fc9cc.3ddd64'),
               hidden: true
             }
           }
@@ -469,7 +470,7 @@ const routes = [
         meta: {
           aliasName: 'logistics',
           icon: 'icon-products',
-          title: '181fc9cc.46da27',
+          title: i18n.t('181fc9cc.46da27'),
           permissions: ['setting.delivery.logistics']
         },
         component: () => import('@/views/settings/deliverySettings/logistics/index'),
@@ -478,7 +479,7 @@ const routes = [
             path: 'editor/:id?',
             component: () => import('@/views/settings/deliverySettings/logistics/add-ziti'),
             meta: {
-              title: '181fc9cc.f36bc9',
+              title: i18n.t('181fc9cc.f36bc9'),
               hidden: true
             }
           }
@@ -490,7 +491,7 @@ const routes = [
         meta: {
           aliasName: 'shippingtemplates',
           icon: 'icon-products',
-          title: '181fc9cc.416fd4',
+          title: i18n.t('181fc9cc.416fd4'),
           permissions: ['setting.delivery.shippingtemplates']
         },
         component: () => import('@/view/mall/trade/shipping/templates'),
@@ -499,7 +500,7 @@ const routes = [
             path: 'editor/:itemId?',
             component: () => import('@/view/mall/trade/shipping/add'),
             meta: {
-              title: '181fc9cc.889dfe',
+              title: i18n.t('181fc9cc.889dfe'),
               hidden: true
             }
           }
@@ -511,7 +512,7 @@ const routes = [
         meta: {
           aliasName: 'kdniao',
           icon: 'icon-products',
-          title: '181fc9cc.ddc703',
+          title: i18n.t('181fc9cc.ddc703'),
           permissions: ['setting.delivery.kdniao']
         },
         component: () => import('@/views/settings/deliverySettings/logistics-inquiry')
@@ -522,7 +523,7 @@ const routes = [
         meta: {
           aliasName: 'setting_staffself_deliverystaff',
           icon: 'icon-products',
-          title: '181fc9cc.1a05d5',
+          title: i18n.t('181fc9cc.1a05d5'),
           permissions: ['setting.delivery.setting_staffself_deliverystaff']
         },
         component: () => import('@/views/settings/deliverySettings/delivery-management')
@@ -533,7 +534,7 @@ const routes = [
         meta: {
           aliasName: 'companydata_deliverystaffstatistics',
           icon: 'icon-products',
-          title: '181fc9cc.d6f79b',
+          title: i18n.t('181fc9cc.d6f79b'),
           permissions: ['setting.delivery.companydata_deliverystaffstatistics']
         },
         component: () => import('@/views/settings/deliverySettings/delivery-performance')
@@ -544,7 +545,7 @@ const routes = [
         meta: {
           aliasName: 'dada',
           icon: 'icon-products',
-          title: '181fc9cc.52ec0e',
+          title: i18n.t('181fc9cc.52ec0e'),
           permissions: ['setting.delivery.dada']
         },
         component: () => import('@/views/settings/deliverySettings/dada-account')
@@ -556,7 +557,7 @@ const routes = [
         meta: {
           aliasName: 'operatLorogs',
           icon: 'icon-products',
-          title: '181fc9cc.cda84b',
+          title: i18n.t('181fc9cc.cda84b'),
           permissions: ['setting.systeminfo.operator-logs']
         }
       },
@@ -569,7 +570,7 @@ const routes = [
         meta: {
           aliasName: 'omssetting',
           icon: 'icon-products',
-          title: '181fc9cc.1d62c8',
+          title: i18n.t('181fc9cc.1d62c8'),
           permissions: ['setting.omssetting']
         },
         component: () => import('@/views/settings/role-admin') //后期修复
@@ -581,7 +582,7 @@ const routes = [
         meta: {
           aliasName: 'mapsetting',
           icon: 'icon-products',
-          title: '181fc9cc.5e6abb',
+          title: i18n.t('181fc9cc.5e6abb'),
           permissions: ['setting.systemsetting.mapsetting']
         },
         component: () => import('@/views/settings/systemConfig/map-setting')
@@ -592,7 +593,7 @@ const routes = [
         meta: {
           aliasName: 'certificate',
           icon: 'icon-products',
-          title: '181fc9cc.e5549d',
+          title: i18n.t('181fc9cc.e5549d'),
           permissions: ['setting.systemsetting.certificate']
         },
         component: () => import('@/views/settings/systemConfig/ShangPai-erp')
@@ -613,7 +614,7 @@ const routes = [
         path: 'menumanage/shopmenus',
         meta: {
           icon: 'icon-products',
-          title: '181fc9cc.712fef',
+          title: i18n.t('181fc9cc.712fef'),
           permissions: ['setting.menumanage.shopmenus']
         },
         component: () => import('@/view/menus/shopmenu')
@@ -623,7 +624,7 @@ const routes = [
         path: 'menumanage/distributormenu',
         meta: {
           icon: 'icon-products',
-          title: '181fc9cc.5e1308',
+          title: i18n.t('181fc9cc.5e1308'),
           permissions: ['setting.menumanage.distributormenu']
         },
         component: () => import('@/view/menus/distributormenu')
@@ -633,7 +634,7 @@ const routes = [
         path: 'menumanage/suppliermenus',
         meta: {
           icon: 'icon-products',
-          title: '181fc9cc.f6b769',
+          title: i18n.t('181fc9cc.f6b769'),
           permissions: ['setting.menumanage.suppliermenus']
         },
         component: () => import('@/view/menus/supplier')
@@ -643,7 +644,7 @@ const routes = [
         path: 'menumanage/merchantmenu',
         meta: {
           icon: 'icon-products',
-          title: '181fc9cc.86be9a',
+          title: i18n.t('181fc9cc.86be9a'),
           permissions: ['setting.menumanage.merchantmenu']
         },
         component: () => import('@/view/menus/merchantmenu')
@@ -654,7 +655,7 @@ const routes = [
         meta: {
           aliasName: 'damoCrm',
           icon: 'icon-products',
-          title: '181fc9cc.a21aa1',
+          title: i18n.t('181fc9cc.a21aa1'),
           permissions: ['setting.systemsetting.damoCrm']
         },
         component: () => import('@/views/settings/systemConfig/damoCrm/index')
@@ -665,11 +666,11 @@ const routes = [
         meta: {
           aliasName: 'kjlsetting',
           icon: 'icon-products',
-          title: '181fc9cc.782f66',
+          title: i18n.t('181fc9cc.782f66'),
           permissions: ['setting.systemsetting.kjlsetting']
         },
         component: () => import('@/views/settings/kujiale-setting')
-      },
+      }
     ]
   }
 ]
diff --git a/src/router/routes/modules/store.js b/src/router/routes/modules/store.js
index 24d0afd..faec890 100755
--- a/src/router/routes/modules/store.js
+++ b/src/router/routes/modules/store.js
@@ -3,6 +3,7 @@
  * See LICENSE file for license details.
  */
 import { BasicLayout } from '@/layout/basic' // 主框架
+import { i18n } from '@/i18n'
 
 const routes = [
   {
@@ -11,7 +12,7 @@ const routes = [
       aliasName: 'store',
       icon: 'application',
       keepAlive: true,
-      title: '6478e260.295713'
+      title: i18n.t('6478e260.295713')
     },
     name: 'store',
     path: '/store',
@@ -23,7 +24,7 @@ const routes = [
         meta: {
           aliasName: 'marketingdistributor',
           icon: 'icon-shop',
-          title: '6478e260.1b1b01',
+          title: i18n.t('6478e260.1b1b01'),
           permissions: ['store.storemanager.marketingdistributor']
         },
         children: [
@@ -31,7 +32,7 @@ const routes = [
             path: 'editor/:itemId?',
             component: () => import('@/view/merchant/store'),
             meta: {
-              title: '6478e260.922ec0',
+              title: i18n.t('6478e260.922ec0'),
               hidden: true
             }
           },
@@ -39,7 +40,7 @@ const routes = [
             path: 'template',
             component: () => import('@/view/mall/marketing/distributor_template'),
             meta: {
-              title: '6478e260.5da484',
+              title: i18n.t('6478e260.5da484'),
               hidden: true
             }
           },
@@ -47,7 +48,7 @@ const routes = [
             path: 'details/:id?',
             component: () => import('@/view/mall/marketing/distributor_details'),
             meta: {
-              title: '6478e260.9d54ec',
+              title: i18n.t('6478e260.9d54ec'),
               hidden: true
             }
           },
@@ -55,7 +56,7 @@ const routes = [
             path: 'wxpaysetting',
             component: () => import('@/view/mall/marketing/distributor_wxpaysetting'),
             meta: {
-              title: '6478e260.bd5e8a',
+              title: i18n.t('6478e260.bd5e8a'),
               hidden: true
             }
           },
@@ -63,7 +64,7 @@ const routes = [
             path: 'alipaysetting',
             component: () => import('@/view/mall/marketing/distributor_alipaysetting'),
             meta: {
-              title: '6478e260.135e7b',
+              title: i18n.t('6478e260.135e7b'),
               hidden: true
             }
           },
@@ -71,7 +72,7 @@ const routes = [
             path: 'storeupload',
             component: () => import('@/view/mall/marketing/shopUpload'),
             meta: {
-              title: '6478e260.081090',
+              title: i18n.t('6478e260.081090'),
               hidden: true
             }
           }
@@ -84,7 +85,7 @@ const routes = [
         meta: {
           aliasName: 'storewhitelist',
           icon: 'icon-whitelist',
-          title: '6478e260.899e90',
+          title: i18n.t('6478e260.899e90'),
           permissions: ['store.storemanager.storewhitelist']
         },
         children: [
@@ -92,7 +93,7 @@ const routes = [
             path: 'storewhitelistUpload',
             component: () => import('@/view/mall/marketing/storewhitelistUpload'),
             meta: {
-              title: '6478e260.ba584c',
+              title: i18n.t('6478e260.ba584c'),
               hidden: true
             }
           }
@@ -104,7 +105,7 @@ const routes = [
         meta: {
           aliasName: 'storerules',
           icon: 'icon-address',
-          title: '6478e260.08894b',
+          title: i18n.t('6478e260.08894b'),
           permissions: ['store.storemanager.storerules']
         },
         component: () => import('@/views/store/storeRules/store-rules')
@@ -115,7 +116,7 @@ const routes = [
         meta: {
           aliasName: 'storecategory',
           icon: 'icon-address',
-          title: '6478e260.2419d0',
+          title: i18n.t('6478e260.2419d0'),
           permissions: ['store.storemanager.storecategory']
         },
         component: () => import('@/views/store/store-category')
@@ -126,7 +127,7 @@ const routes = [
         meta: {
           aliasName: 'nearbystoreinfo',
           icon: 'icon-address',
-          title: '6478e260.84b1aa',
+          title: i18n.t('6478e260.84b1aa'),
           permissions: ['store.storemanager.nearbystoreinfo']
         },
         component: () => import('@/views/store/nearby-store-info')
@@ -137,7 +138,7 @@ const routes = [
         meta: {
           aliasName: 'distributoraftersalesaddress',
           icon: 'icon-address',
-          title: '6478e260.6356a8',
+          title: i18n.t('6478e260.6356a8'),
           permissions: ['store.storemanager.distributoraftersalesaddress']
         },
         component: () => import('@/view/mall/marketing/distributorAftersalesAddress')
diff --git a/src/router/routes/modules/supplier.js b/src/router/routes/modules/supplier.js
index e1ca0ab..b22ba2d 100755
--- a/src/router/routes/modules/supplier.js
+++ b/src/router/routes/modules/supplier.js
@@ -3,6 +3,7 @@
  * See LICENSE file for license details.
  */
 import { BasicLayout } from '@/layout/basic'
+import { i18n } from '@/i18n'
 
 const routes = [
   {
@@ -12,7 +13,7 @@ const routes = [
       icon: 'ad-product',
       // icon: 'application',
       keepAlive: true,
-      title: '55038796.104fec'
+      title: i18n.t('55038796.104fec')
     },
     name: 'supply',
     path: '/supply',
@@ -23,7 +24,7 @@ const routes = [
         meta: {
           aliasName: 'supplier_goods_list',
           icon: 'pay-circle',
-          title: '55038796.5782b6',
+          title: i18n.t('55038796.5782b6'),
           permissions: ['supply.supplygoods.supplier_goods_list']
         },
         component: () => import('@/view/mall/goods/physical/supplier_goods_list'),
@@ -59,7 +60,7 @@ const routes = [
         meta: {
           aliasName: 'goods_suppliergoods',
           icon: 'pay-circle',
-          title: '55038796.a453a5',
+          title: i18n.t('55038796.a453a5'),
           permissions: ['supply.supplygoods.goods_suppliergoods']
         },
         component: () => import('@/view/mall/goods/physical/supplier_goods_check'),
@@ -79,7 +80,7 @@ const routes = [
         meta: {
           aliasName: 'supplier_list',
           icon: 'pay-circle',
-          title: '55038796.1e4a8e',
+          title: i18n.t('55038796.1e4a8e'),
           permissions: ['supply.supplymanage.supplier_list']
         },
         component: () => import('@/view/mall/supplier/supplier_list')
@@ -90,7 +91,7 @@ const routes = [
         meta: {
           aliasName: 'supplier',
           icon: 'pay-circle',
-          title: '55038796.55c7cb',
+          title: i18n.t('55038796.55c7cb'),
           permissions: ['supply.supplymanage.supplier']
         },
         component: () => import('@/view/base/account/suppliers')
diff --git a/src/router/src/route-template.js b/src/router/src/route-template.js
index 211fcfb..a4df53b 100755
--- a/src/router/src/route-template.js
+++ b/src/router/src/route-template.js
@@ -83,12 +83,12 @@ export default {
     {
       path: 'pcmall/loginPageSetting',
       name: '390b6df9.b9f357',
-      component: () => import('@/view/pc/pctemplate/login')
+      component: () => import('@/views/decoration/web-config')
     },
     {
       path: 'pcmall/seo',
       name: '390b6df9.e807b2',
-      component: () => import('@/view/pc/tdk/globalset')
+      component: () => import('@/views/decoration/web-config')
     },
     {
       path: 'pcmall/pageseo',
diff --git a/src/store/index.js b/src/store/index.js
index cae493c..6fe9610 100755
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -8,6 +8,7 @@ import VuexPersistence from 'vuex-persist'
 import accessStore from './modules/access'
 import userStore from './modules/user'
 import systemStore from './modules/system'
+import decorationStore from './modules/decoration'
 
 import sku from './modules/sku'
 import getters from './getters'
@@ -29,6 +30,7 @@ const store = new Vuex.Store({
     access: accessStore,
     user: userStore,
     system: systemStore,
+    decoration: decorationStore,
     sku
   },
   getters,
diff --git a/src/store/modules/decoration.js b/src/store/modules/decoration.js
new file mode 100644
index 0000000..60530b2
--- /dev/null
+++ b/src/store/modules/decoration.js
@@ -0,0 +1,474 @@
+import dslUtils from '../../components/sp-web-decoration/utils/dsl.js'
+import {
+  createTypedSection,
+  createTypedBlock
+} from '../../components/sp-web-decoration/definitions/factory.js'
+import { getInitialEditorSelection } from '../../components/sp-web-decoration/definitions/selection.js'
+
+const {
+  createHomeDsl,
+  createGlobalDsl,
+  insertSection,
+  updateSectionSettings,
+  insertBlock,
+  updateBlockSettings,
+  removeBlock,
+  duplicateBlock,
+  replaceBlockOrder,
+  removeSection,
+  replaceSection,
+  composePreviewDsl,
+  splitGlobalDsl,
+  createHeaderDsl,
+  createFooterDsl,
+  createProductListDsl
+} = dslUtils
+
+function cloneDeep(value) {
+  return JSON.parse(JSON.stringify(value))
+}
+
+function createState() {
+  return {
+    pageType: 'home',
+    pageId: '',
+    headerDsl: createHeaderDsl(),
+    dsl: createHomeDsl(),
+    footerDsl: createFooterDsl(),
+    selectedSectionId: '',
+    selectedBlockId: '',
+    expandedSectionIds: [],
+    editingScope: 'page',
+    isPreviewReady: false,
+    isSaving: false
+  }
+}
+
+function isGlobalSection(state, sectionId) {
+  return Boolean(
+    sectionId && (state.headerDsl?.sections?.[sectionId] || state.footerDsl?.sections?.[sectionId])
+  )
+}
+
+function resolveScopeKey(state, sectionId) {
+  if (sectionId && state.headerDsl?.sections?.[sectionId]) return 'headerDsl'
+  if (sectionId && state.footerDsl?.sections?.[sectionId]) return 'footerDsl'
+  return 'dsl'
+}
+
+function createDuplicatedSection(sourceSection) {
+  const duplicatedSection = createTypedSection(sourceSection.type)
+  duplicatedSection.disabled = sourceSection.disabled
+  duplicatedSection.settings = cloneDeep(sourceSection.settings || {})
+  duplicatedSection.blocks = cloneDeep(sourceSection.blocks || {})
+  duplicatedSection.blockOrder = cloneDeep(sourceSection.blockOrder || [])
+  duplicatedSection.title = sourceSection.title
+  duplicatedSection.titleKey = sourceSection.titleKey
+  return duplicatedSection
+}
+
+function duplicateSectionInDsl(dsl, sectionId) {
+  const sourceSection = dsl?.sections?.[sectionId]
+  if (!sourceSection) return dsl
+  const duplicatedSection = createDuplicatedSection(sourceSection)
+  const nextDsl = cloneDeep(dsl)
+  const sourceIndex = nextDsl.order.findIndex((id) => id === sectionId)
+  const insertIndex = sourceIndex >= 0 ? sourceIndex + 1 : nextDsl.order.length
+  nextDsl.sections[duplicatedSection.id] = duplicatedSection
+  nextDsl.order.splice(insertIndex, 0, duplicatedSection.id)
+  return nextDsl
+}
+
+function moveSectionInDsl(dsl, sectionId, targetIndex) {
+  if (!dsl?.sections?.[sectionId]) return dsl
+  const currentOrder = Array.isArray(dsl.order) ? dsl.order.slice() : []
+  const currentIndex = currentOrder.indexOf(sectionId)
+  if (currentIndex === -1) return dsl
+  const normalizedTargetIndex = Math.max(0, Math.min(targetIndex, currentOrder.length - 1))
+  if (currentIndex === normalizedTargetIndex) return dsl
+  currentOrder.splice(currentIndex, 1)
+  currentOrder.splice(normalizedTargetIndex, 0, sectionId)
+  return {
+    ...dsl,
+    order: currentOrder
+  }
+}
+
+function isLockedSection(section) {
+  return Boolean(
+    section?.locked === true ||
+      section?.settings?.locked === true ||
+      section?.type === 'native-product-list'
+  )
+}
+
+const decorationStore = {
+  namespaced: true,
+  state: createState,
+  getters: {
+    currentSection(state) {
+      if (!state.selectedSectionId) return null
+      const scopeKey = resolveScopeKey(state, state.selectedSectionId)
+      return state[scopeKey].sections[state.selectedSectionId] || null
+    },
+    currentBlock(state, getters) {
+      if (!state.selectedBlockId || !getters.currentSection) return null
+      return getters.currentSection.blocks?.[state.selectedBlockId] || null
+    },
+    activeDsl(state) {
+      return composePreviewDsl({
+        pageType: state.pageType,
+        pageId: state.pageId,
+        dsl: state.dsl,
+        headerDsl: state.headerDsl,
+        footerDsl: state.footerDsl
+      })
+    }
+  },
+  mutations: {
+    initializeEditor(
+      state,
+      { pageType = 'home', pageId = '', dsl, legacyGlobalDsl, headerDsl, footerDsl }
+    ) {
+      state.pageType = pageType
+      state.pageId = String(pageId || '')
+      state.dsl =
+        dsl ||
+        (pageType === 'product_list'
+          ? createProductListDsl({ pageId: state.pageId || 'product_list' })
+          : createHomeDsl({ pageId: state.pageId }))
+      if (headerDsl || footerDsl) {
+        state.headerDsl = headerDsl || createHeaderDsl()
+        state.footerDsl = footerDsl || createFooterDsl()
+      } else if (legacyGlobalDsl) {
+        const splitDsl = splitGlobalDsl(legacyGlobalDsl)
+        state.headerDsl = splitDsl.headerDsl
+        state.footerDsl = splitDsl.footerDsl
+      } else {
+        state.headerDsl = createHeaderDsl()
+        state.footerDsl = createFooterDsl()
+      }
+      const initialSel = getInitialEditorSelection({
+        dsl: state.dsl,
+        headerDsl: state.headerDsl,
+        footerDsl: state.footerDsl
+      })
+      state.selectedSectionId = initialSel.selectedSectionId
+      state.selectedBlockId = initialSel.selectedBlockId
+      state.expandedSectionIds = initialSel.expandedSectionIds
+      state.editingScope = initialSel.editingScope
+      state.isPreviewReady = false
+    },
+    setDsl(state, dsl) {
+      state.dsl = dsl
+    },
+    setHeaderDsl(state, dsl) {
+      state.headerDsl = dsl
+    },
+    setFooterDsl(state, dsl) {
+      state.footerDsl = dsl
+    },
+    setSelectedSectionId(state, sectionId) {
+      state.selectedSectionId = sectionId || ''
+      state.selectedBlockId = ''
+      state.editingScope = isGlobalSection(state, sectionId) ? 'global' : 'page'
+    },
+    selectSection(state, sectionId) {
+      state.selectedSectionId = sectionId || ''
+      state.selectedBlockId = ''
+      if (sectionId && !state.expandedSectionIds.includes(sectionId)) {
+        state.expandedSectionIds = [...state.expandedSectionIds, sectionId]
+      }
+      state.editingScope = isGlobalSection(state, sectionId) ? 'global' : 'page'
+    },
+    selectBlock(state, { sectionId, blockId }) {
+      state.selectedSectionId = sectionId || ''
+      state.selectedBlockId = blockId || ''
+      if (sectionId && !state.expandedSectionIds.includes(sectionId)) {
+        state.expandedSectionIds = [...state.expandedSectionIds, sectionId]
+      }
+      state.editingScope = isGlobalSection(state, sectionId) ? 'global' : 'page'
+    },
+    addSection(state, { type, index }) {
+      const section = createTypedSection(type)
+      state.dsl = insertSection(state.dsl, section, index)
+      state.selectedSectionId = section.id
+      state.selectedBlockId = ''
+      state.expandedSectionIds = [...state.expandedSectionIds, section.id]
+      state.editingScope = 'page'
+    },
+    addGlobalSection(state, payload) {
+      const type = typeof payload === 'string' ? payload : payload?.type
+      if (!type) return
+
+      const requestedIndex =
+        typeof payload === 'object' && payload !== null && typeof payload.index === 'number'
+          ? payload.index
+          : undefined
+
+      if (payload?.area === 'footer') {
+        const section = createTypedSection(type)
+        const newId = section.id
+        const currentOrder = Array.isArray(state.footerDsl.order)
+          ? state.footerDsl.order.slice()
+          : []
+        const footerIndex = currentOrder.includes('footer')
+          ? currentOrder.indexOf('footer')
+          : currentOrder.length
+        let insertAt = typeof requestedIndex === 'number' ? requestedIndex : footerIndex
+        insertAt = Math.max(0, Math.min(insertAt, footerIndex))
+        currentOrder.splice(insertAt, 0, newId)
+
+        state.footerDsl = {
+          ...state.footerDsl,
+          sections: {
+            ...(state.footerDsl.sections || {}),
+            [newId]: section
+          },
+          order: currentOrder.includes('footer') ? currentOrder : [...currentOrder, 'footer']
+        }
+        state.selectedSectionId = newId
+        state.selectedBlockId = ''
+        if (!state.expandedSectionIds.includes(newId)) {
+          state.expandedSectionIds = [...state.expandedSectionIds, newId]
+        }
+        state.editingScope = 'global'
+        return
+      }
+
+      if (type === 'announcement-bar') {
+        const section = createTypedSection('announcement-bar')
+        const newId = section.id
+        const currentOrder = Array.isArray(state.headerDsl.order)
+          ? state.headerDsl.order.slice()
+          : []
+        let insertAt = typeof requestedIndex === 'number' ? requestedIndex : currentOrder.length
+        insertAt = Math.max(0, Math.min(insertAt, currentOrder.length))
+        currentOrder.splice(insertAt, 0, newId)
+
+        state.headerDsl = {
+          ...state.headerDsl,
+          sections: {
+            ...(state.headerDsl.sections || {}),
+            [newId]: section
+          },
+          order: currentOrder
+        }
+        state.selectedSectionId = newId
+        state.selectedBlockId = ''
+        if (!state.expandedSectionIds.includes(newId)) {
+          state.expandedSectionIds = [...state.expandedSectionIds, newId]
+        }
+        state.editingScope = 'global'
+        return
+      }
+
+      if (state.headerDsl.sections?.[type]) {
+        state.selectedSectionId = type
+        state.selectedBlockId = ''
+        state.editingScope = 'global'
+        return
+      }
+      const section = createTypedSection(type)
+      section.id = type
+      const currentOrder = Array.isArray(state.headerDsl.order) ? state.headerDsl.order.slice() : []
+      const insertIndex = typeof requestedIndex === 'number' ? requestedIndex : currentOrder.length
+      currentOrder.splice(Math.max(0, Math.min(insertIndex, currentOrder.length)), 0, type)
+      state.headerDsl = {
+        ...state.headerDsl,
+        sections: {
+          ...(state.headerDsl.sections || {}),
+          [type]: section
+        },
+        order: currentOrder
+      }
+      state.selectedSectionId = type
+      state.selectedBlockId = ''
+      if (!state.expandedSectionIds.includes(type)) {
+        state.expandedSectionIds = [...state.expandedSectionIds, type]
+      }
+      state.editingScope = 'global'
+    },
+    setSectionDisabled(state, { sectionId, disabled }) {
+      if (!sectionId) return
+      const scopeKey = resolveScopeKey(state, sectionId)
+      const section = state[scopeKey]?.sections?.[sectionId]
+      if (!section) return
+      if (isLockedSection(section)) return
+      section.disabled = Boolean(disabled)
+    },
+    updateSectionSettings(state, { sectionId, patch }) {
+      const scopeKey = resolveScopeKey(state, sectionId)
+      state[scopeKey] = updateSectionSettings(state[scopeKey], sectionId, patch)
+    },
+    updateSelectedSectionSettings(state, patch) {
+      if (!state.selectedSectionId) return
+      const scopeKey = resolveScopeKey(state, state.selectedSectionId)
+      state[scopeKey] = updateSectionSettings(state[scopeKey], state.selectedSectionId, patch)
+    },
+    replaceSelectedSection(state, nextSection) {
+      if (!state.selectedSectionId) return
+      const scopeKey = resolveScopeKey(state, state.selectedSectionId)
+      state[scopeKey] = replaceSection(state[scopeKey], state.selectedSectionId, nextSection)
+    },
+    removeSection(state, sectionId) {
+      if (!sectionId) return
+      if (sectionId === 'header' || sectionId === 'footer') return
+      const scopeKey = resolveScopeKey(state, sectionId)
+      const section = state[scopeKey]?.sections?.[sectionId]
+      if (!section || isLockedSection(section)) return
+      state[scopeKey] = removeSection(state[scopeKey], sectionId)
+      state.expandedSectionIds = state.expandedSectionIds.filter((id) => id !== sectionId)
+      if (state.selectedSectionId === sectionId) {
+        const fallbackOrder = state[scopeKey]?.order || []
+        state.selectedSectionId = fallbackOrder[0] || ''
+        state.selectedBlockId = ''
+        state.editingScope = scopeKey === 'dsl' ? 'page' : 'global'
+      }
+    },
+    duplicateSection(state, sectionId) {
+      if (!sectionId || sectionId === 'header' || sectionId === 'footer') return
+      const scopeKey = resolveScopeKey(state, sectionId)
+      const section = state[scopeKey]?.sections?.[sectionId]
+      if (!section || isLockedSection(section)) return
+      state[scopeKey] = duplicateSectionInDsl(state[scopeKey], sectionId)
+      const order = state[scopeKey]?.order || []
+      const sourceIndex = order.indexOf(sectionId)
+      const duplicatedId = sourceIndex >= 0 ? order[sourceIndex + 1] : ''
+      if (duplicatedId) {
+        state.selectedSectionId = duplicatedId
+        state.selectedBlockId = ''
+        if (!state.expandedSectionIds.includes(duplicatedId)) {
+          state.expandedSectionIds = [...state.expandedSectionIds, duplicatedId]
+        }
+        state.editingScope = scopeKey === 'dsl' ? 'page' : 'global'
+      }
+    },
+    moveSection(state, { sectionId, targetIndex }) {
+      if (!sectionId || sectionId === 'header' || sectionId === 'footer') return
+      const scopeKey = resolveScopeKey(state, sectionId)
+      const sourceDsl = state[scopeKey]
+      if (scopeKey === 'footerDsl') {
+        const footerIndex = Array.isArray(sourceDsl.order) ? sourceDsl.order.indexOf('footer') : -1
+        const maxIndex = footerIndex >= 0 ? footerIndex - 1 : (sourceDsl.order || []).length - 1
+        state[scopeKey] = moveSectionInDsl(sourceDsl, sectionId, Math.min(targetIndex, maxIndex))
+      } else {
+        state[scopeKey] = moveSectionInDsl(sourceDsl, sectionId, targetIndex)
+      }
+      state.selectedSectionId = sectionId
+      state.selectedBlockId = ''
+      state.editingScope = scopeKey === 'dsl' ? 'page' : 'global'
+    },
+    replaceSectionOrder(state, nextOrder) {
+      state.dsl = {
+        ...state.dsl,
+        order: nextOrder.slice()
+      }
+    },
+    addBlock(state, { sectionId, blockType, index }) {
+      const scopeKey = resolveScopeKey(state, sectionId)
+      const block = createTypedBlock(state[scopeKey].sections[sectionId].type, blockType)
+      const insertAt = typeof index === 'number' && !Number.isNaN(index) ? index : undefined
+      state[scopeKey] = insertBlock(state[scopeKey], sectionId, block, insertAt)
+      state.selectedSectionId = sectionId
+      state.selectedBlockId = block.id
+      state.editingScope = scopeKey === 'dsl' ? 'page' : 'global'
+    },
+    removeBlock(state, { sectionId, blockId }) {
+      const scopeKey = resolveScopeKey(state, sectionId)
+      state[scopeKey] = removeBlock(state[scopeKey], sectionId, blockId)
+      if (state.selectedBlockId === blockId) {
+        state.selectedSectionId = sectionId
+        state.selectedBlockId = ''
+      }
+    },
+    duplicateBlock(state, { sectionId, blockId }) {
+      const scopeKey = resolveScopeKey(state, sectionId)
+      const beforeOrder = state[scopeKey]?.sections?.[sectionId]?.blockOrder || []
+      state[scopeKey] = duplicateBlock(state[scopeKey], sectionId, blockId)
+      const afterOrder = state[scopeKey]?.sections?.[sectionId]?.blockOrder || []
+      const duplicatedBlockId = afterOrder.find((id) => !beforeOrder.includes(id))
+      state.selectedSectionId = sectionId
+      state.selectedBlockId = duplicatedBlockId || blockId
+      state.editingScope = scopeKey === 'dsl' ? 'page' : 'global'
+    },
+    toggleBlockDisabled(state, { sectionId, blockId }) {
+      if (!sectionId || !blockId) return
+      const scopeKey = resolveScopeKey(state, sectionId)
+      const block = state[scopeKey]?.sections?.[sectionId]?.blocks?.[blockId]
+      if (!block) return
+      block.disabled = !block.disabled
+    },
+    updateSelectedBlockSettings(state, patch) {
+      if (!state.selectedSectionId || !state.selectedBlockId) return
+      const scopeKey = resolveScopeKey(state, state.selectedSectionId)
+      state[scopeKey] = updateBlockSettings(
+        state[scopeKey],
+        state.selectedSectionId,
+        state.selectedBlockId,
+        patch
+      )
+    },
+    replaceBlockOrder(state, { sectionId, blockOrder }) {
+      const scopeKey = resolveScopeKey(state, sectionId)
+      state[scopeKey] = replaceBlockOrder(state[scopeKey], sectionId, blockOrder)
+    },
+    toggleSectionExpanded(state, sectionId) {
+      if (!sectionId) return
+      if (state.expandedSectionIds.includes(sectionId)) {
+        state.expandedSectionIds = state.expandedSectionIds.filter((id) => id !== sectionId)
+        return
+      }
+      state.expandedSectionIds = [...state.expandedSectionIds, sectionId]
+    },
+    setExpandedSections(state, sectionIds) {
+      state.expandedSectionIds = Array.isArray(sectionIds) ? sectionIds.slice() : []
+    },
+    setGlobalOrder(state, nextOrder) {
+      const incoming = Array.isArray(nextOrder) ? nextOrder.filter(Boolean) : []
+      const headerSections = state.headerDsl?.sections || {}
+      const footerSections = state.footerDsl?.sections || {}
+      const seenHeader = new Set()
+      const seenFooter = new Set()
+      const headerOrder = []
+      const footerOrder = []
+      for (const id of incoming) {
+        if (id === 'footer') continue
+        if (headerSections[id] && !seenHeader.has(id)) {
+          seenHeader.add(id)
+          headerOrder.push(id)
+          continue
+        }
+        if (footerSections[id] && !seenFooter.has(id)) {
+          seenFooter.add(id)
+          footerOrder.push(id)
+        }
+      }
+      if (!seenHeader.has('header') && headerSections.header) {
+        headerOrder.unshift('header')
+      }
+      Object.keys(footerSections).forEach((id) => {
+        if (id !== 'footer' && !seenFooter.has(id)) footerOrder.push(id)
+      })
+      state.headerDsl = {
+        ...state.headerDsl,
+        order: headerOrder
+      }
+      state.footerDsl = {
+        ...state.footerDsl,
+        order: [...footerOrder, 'footer']
+      }
+    },
+    setPreviewReady(state, value) {
+      state.isPreviewReady = Boolean(value)
+    },
+    setSaving(state, value) {
+      state.isSaving = Boolean(value)
+    },
+    resetState(state) {
+      Object.assign(state, createState())
+    }
+  }
+}
+
+export default decorationStore
diff --git a/src/styles/tokens-default.scss b/src/styles/tokens-default.scss
index d1f17fa..25feb5a 100755
--- a/src/styles/tokens-default.scss
+++ b/src/styles/tokens-default.scss
@@ -13,6 +13,7 @@
   /* 主体区域背景色 */
   --background-deep: 216 20.11% 95.47%;
   --foreground: 210 6% 21%;
+  --border: 220 13% 91%;
 
   /* Background color for <Card /> */
   --card: 0 0% 100%;
diff --git a/src/utils/uploadUtil.js b/src/utils/uploadUtil.js
index aed2966..c7dcb9b 100755
--- a/src/utils/uploadUtil.js
+++ b/src/utils/uploadUtil.js
@@ -177,12 +177,12 @@ class UploadUtil {
       // 不同 driver 字段名不一致（Qiniu/Local: domain+key；OSS: host+dir；Cos: domain+key），统一兜底
       const finalKey = out.key || data.key || data.dir || ''
       const domainCandidate = data.domain || data.host || ''
-      const domain = domainCandidate
-        ? String(domainCandidate).replace(/\/+$/, '')
-        : ''
+      const domain = domainCandidate ? String(domainCandidate).replace(/\/+$/, '') : ''
       const url = /^https?:\/\//i.test(finalKey)
         ? finalKey
-        : (domain ? `${domain}/${String(finalKey).replace(/^\/+/, '')}` : finalKey)
+        : domain
+        ? `${domain}/${String(finalKey).replace(/^\/+/, '')}`
+        : finalKey
       return { ...out, key: finalKey, url, domain }
     } catch (e) {
       throw new Error(e)
diff --git a/src/utils/usercenter-storage.js b/src/utils/usercenter-storage.js
new file mode 100644
index 0000000..f71e1af
--- /dev/null
+++ b/src/utils/usercenter-storage.js
@@ -0,0 +1,53 @@
+/**
+ * Copyright © ShopeX （http://www.shopex.cn）. All rights reserved.
+ * See LICENSE file for license details.
+ */
+
+export const USERCENTER_LOGIN_STORAGE_KEY = 'ecshopx_usercenter_login'
+
+/** 用户中心登录态有效期：2 小时 */
+export const USERCENTER_LOGIN_TTL_MS = 2 * 60 * 60 * 1000
+
+export function setUsercenterLoginSuccess(extra = {}) {
+  const loggedInAt = Date.now()
+  localStorage.setItem(
+    USERCENTER_LOGIN_STORAGE_KEY,
+    JSON.stringify({
+      loggedIn: true,
+      loggedInAt,
+      expiresAt: loggedInAt + USERCENTER_LOGIN_TTL_MS,
+      ...extra
+    })
+  )
+}
+
+export function getUsercenterLoginState() {
+  try {
+    const raw = localStorage.getItem(USERCENTER_LOGIN_STORAGE_KEY)
+    if (!raw) return null
+    const data = JSON.parse(raw)
+    if (!data || !data.loggedIn) {
+      return null
+    }
+
+    const expiresAt =
+      data.expiresAt || (data.loggedInAt ? data.loggedInAt + USERCENTER_LOGIN_TTL_MS : 0)
+    if (!expiresAt || Date.now() >= expiresAt) {
+      clearUsercenterLoginState()
+      return null
+    }
+
+    return data
+  } catch (e) {
+    clearUsercenterLoginState()
+    return null
+  }
+}
+
+export function clearUsercenterLoginState() {
+  localStorage.removeItem(USERCENTER_LOGIN_STORAGE_KEY)
+}
+
+export function isUsercenterLoggedIn() {
+  return !!getUsercenterLoginState()
+}
diff --git a/src/view/applications/pointmall/add.vue b/src/view/applications/pointmall/add.vue
index 6bba371..a2e874b 100755
--- a/src/view/applications/pointmall/add.vue
+++ b/src/view/applications/pointmall/add.vue
@@ -1023,135 +1023,137 @@ export default {
       }
       _self.pageLoading = true
       try {
-      if (_self.$route.params.itemId) {
-        // 初始化门店数据
-        const response = await getItemsDetail(_self.$route.params.itemId)
-        let itemsDetailData = response.data.data
-        const categoryInfoRes = await getCategoryInfo(itemsDetailData.item_main_cat_id, {
-          is_point: 1,
-          item_id: _self.$route.params.itemId
-        })
-        const categoryInfoDetail = categoryInfoRes.data.data
-        if (itemsDetailData.regions_id) {
-          _self.select_regions_value = itemsDetailData.regions_id
-        }
-        _self.form.pics = itemsDetailData.pics
-        // 处理图片列表
-        var picList = []
-        for (var item in itemsDetailData.pics) {
-          var newpic = {}
-          newpic.url = _self.wximageurl + itemsDetailData.pics[item]
-          picList.push(newpic)
-        }
-        _self.picsList = picList
-        let obj = _self.form
-        _self.form = { obj } = {
-          item_id: _self.is_new ? '' : itemsDetailData.item_id,
-          item_source: itemsDetailData.item_source,
-          item_type: itemsDetailData.item_type,
-          special_type: itemsDetailData.special_type,
-          item_category_temp:
-            itemsDetailData.item_category.length > 0 ? itemsDetailData.item_category : [],
-          item_name: itemsDetailData.item_name,
-          sort: itemsDetailData.sort,
-          tax_rate: itemsDetailData.tax_rate,
-          item_bn: _self.is_new ? '' : itemsDetailData.item_bn,
-          brief: itemsDetailData.brief,
-          weight: itemsDetailData.weight,
-          volume: itemsDetailData.volume,
-          price: itemsDetailData.price / 100,
-          market_price: itemsDetailData.market_price / 100,
-          cost_price: itemsDetailData.cost_price / 100,
-          point: itemsDetailData.point,
-          pay_class: itemsDetailData.pay_class,
-          barcode: itemsDetailData.barcode,
-          item_unit: itemsDetailData.item_unit,
-          // rebate: itemsDetailData.rebate/100,
-          store: itemsDetailData.store,
-          brand_id: itemsDetailData.brand_id,
-          templates_id: itemsDetailData.templates_id ? itemsDetailData.templates_id.toString() : '',
-          approve_status: itemsDetailData.approve_status,
-          pics: itemsDetailData.pics,
-          videos: itemsDetailData.videos,
-          videos_url: itemsDetailData.videos_url,
-          nospec: itemsDetailData.nospec,
-          is_show_specimg: itemsDetailData.is_show_specimg,
-          item_params: itemsDetailData.item_params,
-          item_main_cat_id: itemsDetailData.item_main_cat_id,
-          // is_gift: itemsDetailData.is_gift,
-          crossborder_tax_rate: itemsDetailData.crossborder_tax_rate,
-          origincountry_id: itemsDetailData.origincountry_id,
-          type: itemsDetailData.type
-          // is_profit: itemsDetailData.is_profit,
-        }
-        _self.picsOldLen = _self.form.pics.length
-        if (!itemsDetailData.item_main_cat_id) {
-          await _self.fetchMainCate()
-        } else {
-          let category = itemsDetailData.item_category_main
-          _self.categoryNames = [
-            category[0].category_name,
-            category[0].children[0].category_name,
-            category[0].children[0].children[0].category_name
-          ]
-          _self.generateParams(itemsDetailData.item_params_list)
-        }
-        if (!_self.form.nospec) {
-          _self.generateSpec(categoryInfoDetail.goods_spec, itemsDetailData.spec_items)
-          _self.specImages = itemsDetailData.spec_images
-          // 恢复规格勾选状态
-          itemsDetailData.spec_items.forEach((item) => {
-            item.item_spec.forEach((child) => {
-              let checkedIndex = _self.skus.findIndex((n) => child.spec_id === n.sku_id)
-              if (checkedIndex > -1) {
-                let isin = _self.skus[checkedIndex].checked_sku.findIndex(
-                  (k) => child.spec_value_id === k
-                )
-                if (isin === -1) {
-                  _self.skus[checkedIndex].checked_sku.push(child.spec_value_id)
+        if (_self.$route.params.itemId) {
+          // 初始化门店数据
+          const response = await getItemsDetail(_self.$route.params.itemId)
+          let itemsDetailData = response.data.data
+          const categoryInfoRes = await getCategoryInfo(itemsDetailData.item_main_cat_id, {
+            is_point: 1,
+            item_id: _self.$route.params.itemId
+          })
+          const categoryInfoDetail = categoryInfoRes.data.data
+          if (itemsDetailData.regions_id) {
+            _self.select_regions_value = itemsDetailData.regions_id
+          }
+          _self.form.pics = itemsDetailData.pics
+          // 处理图片列表
+          var picList = []
+          for (var item in itemsDetailData.pics) {
+            var newpic = {}
+            newpic.url = _self.wximageurl + itemsDetailData.pics[item]
+            picList.push(newpic)
+          }
+          _self.picsList = picList
+          let obj = _self.form
+          _self.form = { obj } = {
+            item_id: _self.is_new ? '' : itemsDetailData.item_id,
+            item_source: itemsDetailData.item_source,
+            item_type: itemsDetailData.item_type,
+            special_type: itemsDetailData.special_type,
+            item_category_temp:
+              itemsDetailData.item_category.length > 0 ? itemsDetailData.item_category : [],
+            item_name: itemsDetailData.item_name,
+            sort: itemsDetailData.sort,
+            tax_rate: itemsDetailData.tax_rate,
+            item_bn: _self.is_new ? '' : itemsDetailData.item_bn,
+            brief: itemsDetailData.brief,
+            weight: itemsDetailData.weight,
+            volume: itemsDetailData.volume,
+            price: itemsDetailData.price / 100,
+            market_price: itemsDetailData.market_price / 100,
+            cost_price: itemsDetailData.cost_price / 100,
+            point: itemsDetailData.point,
+            pay_class: itemsDetailData.pay_class,
+            barcode: itemsDetailData.barcode,
+            item_unit: itemsDetailData.item_unit,
+            // rebate: itemsDetailData.rebate/100,
+            store: itemsDetailData.store,
+            brand_id: itemsDetailData.brand_id,
+            templates_id: itemsDetailData.templates_id
+              ? itemsDetailData.templates_id.toString()
+              : '',
+            approve_status: itemsDetailData.approve_status,
+            pics: itemsDetailData.pics,
+            videos: itemsDetailData.videos,
+            videos_url: itemsDetailData.videos_url,
+            nospec: itemsDetailData.nospec,
+            is_show_specimg: itemsDetailData.is_show_specimg,
+            item_params: itemsDetailData.item_params,
+            item_main_cat_id: itemsDetailData.item_main_cat_id,
+            // is_gift: itemsDetailData.is_gift,
+            crossborder_tax_rate: itemsDetailData.crossborder_tax_rate,
+            origincountry_id: itemsDetailData.origincountry_id,
+            type: itemsDetailData.type
+            // is_profit: itemsDetailData.is_profit,
+          }
+          _self.picsOldLen = _self.form.pics.length
+          if (!itemsDetailData.item_main_cat_id) {
+            await _self.fetchMainCate()
+          } else {
+            let category = itemsDetailData.item_category_main
+            _self.categoryNames = [
+              category[0].category_name,
+              category[0].children[0].category_name,
+              category[0].children[0].children[0].category_name
+            ]
+            _self.generateParams(itemsDetailData.item_params_list)
+          }
+          if (!_self.form.nospec) {
+            _self.generateSpec(categoryInfoDetail.goods_spec, itemsDetailData.spec_items)
+            _self.specImages = itemsDetailData.spec_images
+            // 恢复规格勾选状态
+            itemsDetailData.spec_items.forEach((item) => {
+              item.item_spec.forEach((child) => {
+                let checkedIndex = _self.skus.findIndex((n) => child.spec_id === n.sku_id)
+                if (checkedIndex > -1) {
+                  let isin = _self.skus[checkedIndex].checked_sku.findIndex(
+                    (k) => child.spec_value_id === k
+                  )
+                  if (isin === -1) {
+                    _self.skus[checkedIndex].checked_sku.push(child.spec_value_id)
+                  }
                 }
-              }
-            })
-          })
-
-          itemsDetailData.spec_items.forEach((item) => {
-            let sku = Object.assign({}, item)
-            sku.market_price = item.market_price / 100
-            sku.cost_price = item.cost_price / 100
-            sku.price = item.price / 100
-            sku.item_bn = _self.is_new ? '' : item.item_bn
-            let itemId = []
-            let specs = []
-            item.item_spec.forEach((sub) => {
-              specs.push({
-                spec_id: sub.spec_id,
-                spec_value_id: sub.spec_value_id,
-                spec_value_name: sub.spec_value_name,
-                spec_custom_value_name: sub.spec_custom_value_name || ''
               })
-              itemId.push(sub.spec_value_id)
             })
-            sku.item_spec = specs
-            itemId = itemId.join('_')
-            Object.assign(sku, { sku_id: itemId })
-            store.dispatch('setSku', sku)
-          })
-          _self.updateSku()
-        }
-        if (typeof itemsDetailData.intro === 'object') {
-          _self.mode = 'component'
-          _self.content = itemsDetailData.intro
+
+            itemsDetailData.spec_items.forEach((item) => {
+              let sku = Object.assign({}, item)
+              sku.market_price = item.market_price / 100
+              sku.cost_price = item.cost_price / 100
+              sku.price = item.price / 100
+              sku.item_bn = _self.is_new ? '' : item.item_bn
+              let itemId = []
+              let specs = []
+              item.item_spec.forEach((sub) => {
+                specs.push({
+                  spec_id: sub.spec_id,
+                  spec_value_id: sub.spec_value_id,
+                  spec_value_name: sub.spec_value_name,
+                  spec_custom_value_name: sub.spec_custom_value_name || ''
+                })
+                itemId.push(sub.spec_value_id)
+              })
+              sku.item_spec = specs
+              itemId = itemId.join('_')
+              Object.assign(sku, { sku_id: itemId })
+              store.dispatch('setSku', sku)
+            })
+            _self.updateSku()
+          }
+          if (typeof itemsDetailData.intro === 'object') {
+            _self.mode = 'component'
+            _self.content = itemsDetailData.intro
+          } else {
+            _self.form.intro = itemsDetailData.intro
+          }
+          // .catch(error => {
+          //   _self.$router.go(-1)
+          // })
+          _self.itemVideo = { media_id: _self.form.videos, url: _self.form.videos_url }
         } else {
-          _self.form.intro = itemsDetailData.intro
+          await _self.fetchMainCate()
         }
-        // .catch(error => {
-        //   _self.$router.go(-1)
-        // })
-        _self.itemVideo = { media_id: _self.form.videos, url: _self.form.videos_url }
-      } else {
-        await _self.fetchMainCate()
-      }
-      await _self.init()
+        await _self.init()
       } finally {
         _self.pageLoading = false
       }
@@ -1805,22 +1807,24 @@ export default {
     },
     init() {
       this.getBrandList('', true)
-      const templatesPromise = getShippingTemplatesList(this.templatesListParams).then((response) => {
-        if (response.data.data.list.length > 0) {
-          for (var i in response.data.data.list) {
-            this.templatesList.push({
-              template_id: response.data.data.list[i].template_id,
-              name: response.data.data.list[i].name
+      const templatesPromise = getShippingTemplatesList(this.templatesListParams).then(
+        (response) => {
+          if (response.data.data.list.length > 0) {
+            for (var i in response.data.data.list) {
+              this.templatesList.push({
+                template_id: response.data.data.list[i].template_id,
+                name: response.data.data.list[i].name
+              })
+            }
+          } else {
+            this.$message({
+              type: 'error',
+              message: this.$t('4b43f5ef.e9d74f')
             })
+            this.$router.push({ path: this.matchInternalRoute('shippingtemplates') })
           }
-        } else {
-          this.$message({
-            type: 'error',
-            message: this.$t('4b43f5ef.e9d74f')
-          })
-          this.$router.push({ path: this.matchInternalRoute('shippingtemplates') })
         }
-      })
+      )
 
       const categoryPromise = getCategory({ is_show: false }).then((response) => {
         const res = response.data.data
diff --git a/src/view/base/exportlog/index.vue b/src/view/base/exportlog/index.vue
index cd1dee9..1d55ca2 100755
--- a/src/view/base/exportlog/index.vue
+++ b/src/view/base/exportlog/index.vue
@@ -11,7 +11,11 @@
       </el-alert>
     </div>
     <div ref="exportTieredNav" class="export-log-tiered-nav">
-      <el-tabs v-model="activeGroupName" class="group-tabs export-tier-1" @tab-click="handleGroupClick">
+      <el-tabs
+        v-model="activeGroupName"
+        class="group-tabs export-tier-1"
+        @tab-click="handleGroupClick"
+      >
         <el-tab-pane
           v-for="group in exportGroups"
           :key="group.name"
@@ -21,42 +25,44 @@
       </el-tabs>
       <div class="export-log-tier-1-caret" :style="tier1CaretStyle" aria-hidden="true" />
       <el-tabs v-model="activeName" class="detail-tabs export-tier-2" @tab-click="handleClick">
-      <el-tab-pane
-        v-for="tab in currentExportTabs"
-        :key="tab.name"
-        :label="tab.label"
-        :name="tab.name"
-      />
-      <el-table v-loading="loading" :data="exportLogLists" :height="wheight - 260">
-        <el-table-column :label="$t('cb7af8ae.2b6bc0')">
-          <template slot-scope="scope">
-            <el-button type="text" @click.prevent="handleDown(scope.row)">
-              {{ $t('cb7af8ae.f26ef9') }}
-            </el-button>
-          </template>
-        </el-table-column>
-        <el-table-column prop="log_id" label="ID" />
-        <el-table-column prop="file_name" :label="$t('cb7af8ae.d2e256')" />
-        <el-table-column prop="finish_date" :label="$t('cb7af8ae.475dea')" />
-        <el-table-column prop="handle_status" :label="$t('cb7af8ae.21b314')">
-          <template slot-scope="scope">
-            <span v-if="scope.row.handle_status == 'wait'">{{ $t('cb7af8ae.1e57c1') }}</span>
-            <span v-if="scope.row.handle_status == 'finish'">{{ $t('cb7af8ae.7be39b') }}</span>
-            <span v-if="scope.row.handle_status == 'processing'">{{ $t('cb7af8ae.5d459d') }}</span>
-            <span v-if="scope.row.handle_status == 'fail'">{{ $t('cb7af8ae.1012e0') }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div v-if="total_count > params.pageSize" class="content-center content-top-padded">
-        <el-pagination
-          background
-          layout="prev, pager, next, total"
-          :current-page.sync="params.page"
-          :total="total_count"
-          :page-size="params.pageSize"
-          @current-change="handleCurrentChange"
+        <el-tab-pane
+          v-for="tab in currentExportTabs"
+          :key="tab.name"
+          :label="tab.label"
+          :name="tab.name"
         />
-      </div>
+        <el-table v-loading="loading" :data="exportLogLists" :height="wheight - 260">
+          <el-table-column :label="$t('cb7af8ae.2b6bc0')">
+            <template slot-scope="scope">
+              <el-button type="text" @click.prevent="handleDown(scope.row)">
+                {{ $t('cb7af8ae.f26ef9') }}
+              </el-button>
+            </template>
+          </el-table-column>
+          <el-table-column prop="log_id" label="ID" />
+          <el-table-column prop="file_name" :label="$t('cb7af8ae.d2e256')" />
+          <el-table-column prop="finish_date" :label="$t('cb7af8ae.475dea')" />
+          <el-table-column prop="handle_status" :label="$t('cb7af8ae.21b314')">
+            <template slot-scope="scope">
+              <span v-if="scope.row.handle_status == 'wait'">{{ $t('cb7af8ae.1e57c1') }}</span>
+              <span v-if="scope.row.handle_status == 'finish'">{{ $t('cb7af8ae.7be39b') }}</span>
+              <span v-if="scope.row.handle_status == 'processing'">{{
+                $t('cb7af8ae.5d459d')
+              }}</span>
+              <span v-if="scope.row.handle_status == 'fail'">{{ $t('cb7af8ae.1012e0') }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div v-if="total_count > params.pageSize" class="content-center content-top-padded">
+          <el-pagination
+            background
+            layout="prev, pager, next, total"
+            :current-page.sync="params.page"
+            :total="total_count"
+            :page-size="params.pageSize"
+            @current-change="handleCurrentChange"
+          />
+        </div>
       </el-tabs>
     </div>
   </SpPage>
diff --git a/src/view/decorate/comps/comp-pickerLink.vue b/src/view/decorate/comps/comp-pickerLink.vue
index a22d66f..4abefb9 100755
--- a/src/view/decorate/comps/comp-pickerLink.vue
+++ b/src/view/decorate/comps/comp-pickerLink.vue
@@ -116,7 +116,7 @@
         @change="onChangeLinkUrl"
       />
     </div>
-    <div class="tracking-params-wrapper">
+    <div v-if="showTrackingParams" class="tracking-params-wrapper">
       <label class="tracking-params-label">{{ $t('4a0a5782.965470') }}</label>
       <el-input
         v-model="localValue.trackingParams"
@@ -144,6 +144,10 @@ export default {
       // 不展示自定义链接label true：展示
       type: Boolean,
       default: true
+    },
+    showTrackingParams: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -163,10 +167,7 @@ export default {
   computed: {
     needsOfficialRawId() {
       const { linkPage, id } = this.localValue
-      return (
-        linkPage === 'customer_service' &&
-        (id === 'officialProfile' || id === 'officialChat')
-      )
+      return linkPage === 'customer_service' && (id === 'officialProfile' || id === 'officialChat')
     },
     needsOfficialArticleLink() {
       const { linkPage, id } = this.localValue
@@ -211,8 +212,7 @@ export default {
       const needRaw =
         res?.linkPage === 'customer_service' &&
         (res?.id === 'officialProfile' || res?.id === 'officialChat')
-      const needArticle =
-        res?.linkPage === 'customer_service' && res?.id === 'official'
+      const needArticle = res?.linkPage === 'customer_service' && res?.id === 'official'
       if (needRaw) {
         next.officialAccountRawId = this.localValue.officialAccountRawId || ''
         next.officialArticleLink = ''
diff --git a/src/view/decorate/index.vue b/src/view/decorate/index.vue
old mode 100755
new mode 100644
index a446223..4739406
--- a/src/view/decorate/index.vue
+++ b/src/view/decorate/index.vue
@@ -366,7 +366,9 @@ export default {
       if (w) return w
       if (String(this.localScene) === '1005' && key === 'goods') {
         return (
-          this.widgets.find((item) => String(item.config?.name || '').toLowerCase() === 'goodscard') ||
+          this.widgets.find(
+            (item) => String(item.config?.name || '').toLowerCase() === 'goodscard'
+          ) ||
           this.widgets.find((item) => (item.name || '').toLowerCase() === 'goods') ||
           null
         )
diff --git a/src/view/decorate/wgts/wgt-page/config.js b/src/view/decorate/wgts/wgt-page/config.js
index 31f2a0b..7fc864e 100755
--- a/src/view/decorate/wgts/wgt-page/config.js
+++ b/src/view/decorate/wgts/wgt-page/config.js
@@ -154,7 +154,7 @@ const config = {
         return <AttrFunctionArea v-model={this.value[key]} />
       },
       value: {
-        type: 'hotzone',
+        type: 'none',
         hotzone: { imgUrl: '', data: [] }
       },
       tip: scene != '1001' ? 'f44e2c51.5bc6b6' : 'f44e2c51.37a58e'
@@ -205,7 +205,7 @@ const config = {
       pageBackgroundStyle,
       pageBackgroundColor,
       pageBackgroundImage,
-      pTitleHotSetting = { imgUrl: '', data: [] },
+      pTitleHotSetting = { type: 'none', hotzone: { imgUrl: '', data: [] } },
       isImmersive,
       immersiveScrollBgColor,
       showSearchButton,
@@ -213,13 +213,16 @@ const config = {
     } = base || {}
     // 兼容旧数据格式：如果 pTitleHotSetting 直接是热区图对象，转换为新格式
     if (pTitleHotSetting && pTitleHotSetting.imgUrl !== undefined && !pTitleHotSetting.type) {
+      const hasHotzoneContent =
+        Boolean(pTitleHotSetting.imgUrl) ||
+        (Array.isArray(pTitleHotSetting.data) && pTitleHotSetting.data.length > 0)
       pTitleHotSetting = {
-        type: 'hotzone',
-        hotzone: pTitleHotSetting
+        type: hasHotzoneContent ? 'hotzone' : 'none',
+        hotzone: { imgUrl: pTitleHotSetting.imgUrl || '', data: pTitleHotSetting.data || [] }
       }
     } else if (!pTitleHotSetting || !pTitleHotSetting.type) {
       pTitleHotSetting = {
-        type: 'hotzone',
+        type: 'none',
         hotzone: { imgUrl: '', data: [] }
       }
     }
diff --git a/src/view/decorate/wgts/wgt-page/index.vue b/src/view/decorate/wgts/wgt-page/index.vue
index a170fd8..0c88d97 100755
--- a/src/view/decorate/wgts/wgt-page/index.vue
+++ b/src/view/decorate/wgts/wgt-page/index.vue
@@ -194,8 +194,12 @@
 <template>
   <div class="wgt-page" :style="headerStyle" @click="handleClickHeader">
     <div class="wgt-page-content" :style="contentStyle">
-      <div v-if="value" class="header-container"
-        :class="{ 'has-nearby': showFunctionArea && functionAreaType === 'nearby' }" :style="containerStyle">
+      <div
+        v-if="value"
+        class="header-container"
+        :class="{ 'has-nearby': showFunctionArea && functionAreaType === 'nearby' }"
+        :style="containerStyle"
+      >
         <div class="header-content-left">
           <!-- 功能区：热区图 -->
           <div
diff --git a/src/view/decorate/wgts/wgt_contentPartition/comp_pickerLink.vue b/src/view/decorate/wgts/wgt_contentPartition/comp_pickerLink.vue
index fd83342..401c43d 100644
--- a/src/view/decorate/wgts/wgt_contentPartition/comp_pickerLink.vue
+++ b/src/view/decorate/wgts/wgt_contentPartition/comp_pickerLink.vue
@@ -45,7 +45,9 @@
         {{ getLabelName() }}
       </div>
       <div v-if="needsOfficialRawId" style="margin-top: 8px">
-        <div style="font-size: 12px; color: #333; margin-bottom: 4px">{{ i18n.t('cc5110aa.d10654') }}</div>
+        <div style="font-size: 12px; color: #333; margin-bottom: 4px">
+          {{ i18n.t('cc5110aa.d10654') }}
+        </div>
         <el-input
           v-model="localValue.officialAccountRawId"
           size="small"
@@ -54,7 +56,9 @@
         />
       </div>
       <div v-if="needsOfficialArticleLink" style="margin-top: 8px">
-        <div style="font-size: 12px; color: #333; margin-bottom: 4px">{{ i18n.t('cc5110aa.f30876') }}</div>
+        <div style="font-size: 12px; color: #333; margin-bottom: 4px">
+          {{ i18n.t('cc5110aa.f30876') }}
+        </div>
         <el-input
           v-model="localValue.officialArticleLink"
           size="small"
@@ -112,10 +116,7 @@ export default {
     ...mapGetters(['lang']),
     needsOfficialRawId() {
       const { linkPage, id } = this.localValue
-      return (
-        linkPage === 'customer_service' &&
-        (id === 'officialProfile' || id === 'officialChat')
-      )
+      return linkPage === 'customer_service' && (id === 'officialProfile' || id === 'officialChat')
     },
     needsOfficialArticleLink() {
       const { linkPage, id } = this.localValue
@@ -173,8 +174,7 @@ export default {
       const needRaw =
         res?.linkPage === 'customer_service' &&
         (res?.id === 'officialProfile' || res?.id === 'officialChat')
-      const needArticle =
-        res?.linkPage === 'customer_service' && res?.id === 'official'
+      const needArticle = res?.linkPage === 'customer_service' && res?.id === 'official'
       if (needRaw) {
         next.officialAccountRawId = this.localValue.officialAccountRawId || ''
         next.officialArticleLink = ''
diff --git a/src/view/decorate/wgts/wgt_film/config.js b/src/view/decorate/wgts/wgt_film/config.js
index 2b0f471..00eba08 100755
--- a/src/view/decorate/wgts/wgt_film/config.js
+++ b/src/view/decorate/wgts/wgt_film/config.js
@@ -5,6 +5,7 @@
 import { pickBy } from '@/utils'
 import { i18n } from '@/i18n'
 import { transformInBase, createTransformOutBase } from '../../comps/transform-utils'
+import VideoPicker from '@/components/sp-picker-plus/VideoPicker.vue'
 
 export const proportions = [
   {
@@ -37,7 +38,7 @@ const config = {
       label: i18n.t('735ae7b3.543018'),
       key: 'data',
       component: function (h, { key }) {
-        return <SpVideoPicker v-model={this.value[key]} size='small' />
+        return <VideoPicker v-model={this.value[key]} size='small' />
       },
       value: {}
     },
diff --git a/src/view/decorate/wgts/wgt_fullSlider/attr-item.vue b/src/view/decorate/wgts/wgt_fullSlider/attr-item.vue
index efde34c..a094ca9 100755
--- a/src/view/decorate/wgts/wgt_fullSlider/attr-item.vue
+++ b/src/view/decorate/wgts/wgt_fullSlider/attr-item.vue
@@ -132,7 +132,7 @@
               height="64"
               @click="onSetHotZone(scope.data, scope.index)"
             />
-            <!-- <SpVideoPicker v-else v-model="scope.data.videoUrl" size='small' /> -->
+            <!-- <VideoPicker v-else v-model="scope.data.videoUrl" size='small' /> -->
           </div>
           <div class="slider-item-info">
             <div class="slider-item-type">
diff --git a/src/view/decorate/wgts/wgt_fullSlider/sliderDialog.vue b/src/view/decorate/wgts/wgt_fullSlider/sliderDialog.vue
index 58dcad0..96a3471 100755
--- a/src/view/decorate/wgts/wgt_fullSlider/sliderDialog.vue
+++ b/src/view/decorate/wgts/wgt_fullSlider/sliderDialog.vue
@@ -87,11 +87,13 @@ import { cloneDeep } from 'lodash'
 import { getImageAttribute, getVideoAttribute } from './utils'
 import { proportions } from '@/consts'
 import SpForm from '@/components/sp-form'
+import VideoPicker from '@/components/sp-picker-plus/VideoPicker.vue'
 export default {
   name: 'SliderDialog',
   componrnts: {},
   components: {
     SpForm,
+    VideoPicker,
     hotzone,
     // CompHotPicker,
     CompPickerLink
@@ -235,7 +237,7 @@ export default {
             return (
               <div class='video-list'>
                 {media_type == 'video' && (
-                  <SpVideoPicker v-model={this.sliderForm[key]} size='small' class='video-link' />
+                  <VideoPicker v-model={this.sliderForm[key]} size='small' class='video-link' />
                 )}
                 {media_type == 'img' && (
                   <div class='zone-list'>
diff --git a/src/view/decorate/wgts/wgt_goods/index.vue b/src/view/decorate/wgts/wgt_goods/index.vue
index 9392031..36cd2d6 100644
--- a/src/view/decorate/wgts/wgt_goods/index.vue
+++ b/src/view/decorate/wgts/wgt_goods/index.vue
@@ -110,7 +110,7 @@ export default {
         }
       }
 
-      const effectiveDataCount = this.value?.dataCount  ?? 4
+      const effectiveDataCount = this.value?.dataCount ?? 4
       let params = {
         data_type: dataType,
         data_value: this.value.data?.id || '',
diff --git a/src/view/decorate/wgts/wgt_goodsCard/index.vue b/src/view/decorate/wgts/wgt_goodsCard/index.vue
index bf072c2..689b838 100755
--- a/src/view/decorate/wgts/wgt_goodsCard/index.vue
+++ b/src/view/decorate/wgts/wgt_goodsCard/index.vue
@@ -49,7 +49,7 @@
 <template>
   <div
     :class="{
-      'wgt-goods-card': true,
+      'wgt-goods-card': true
     }"
     :style="outerStyle"
   >
diff --git a/src/view/decorate/wgts/wgt_locationModule/comp_pickerLink.vue b/src/view/decorate/wgts/wgt_locationModule/comp_pickerLink.vue
index 8728b77..0d232a7 100644
--- a/src/view/decorate/wgts/wgt_locationModule/comp_pickerLink.vue
+++ b/src/view/decorate/wgts/wgt_locationModule/comp_pickerLink.vue
@@ -45,7 +45,9 @@
         {{ getLabelName() }}
       </div>
       <div v-if="needsOfficialRawId" style="margin-top: 8px">
-        <div style="font-size: 12px; color: #333; margin-bottom: 4px">{{ i18n.t('cc5110aa.d10654') }}</div>
+        <div style="font-size: 12px; color: #333; margin-bottom: 4px">
+          {{ i18n.t('cc5110aa.d10654') }}
+        </div>
         <el-input
           v-model="localValue.officialAccountRawId"
           size="small"
@@ -54,7 +56,9 @@
         />
       </div>
       <div v-if="needsOfficialArticleLink" style="margin-top: 8px">
-        <div style="font-size: 12px; color: #333; margin-bottom: 4px">{{ i18n.t('cc5110aa.f30876') }}</div>
+        <div style="font-size: 12px; color: #333; margin-bottom: 4px">
+          {{ i18n.t('cc5110aa.f30876') }}
+        </div>
         <el-input
           v-model="localValue.officialArticleLink"
           size="small"
@@ -112,10 +116,7 @@ export default {
     ...mapGetters(['lang']),
     needsOfficialRawId() {
       const { linkPage, id } = this.localValue
-      return (
-        linkPage === 'customer_service' &&
-        (id === 'officialProfile' || id === 'officialChat')
-      )
+      return linkPage === 'customer_service' && (id === 'officialProfile' || id === 'officialChat')
     },
     needsOfficialArticleLink() {
       const { linkPage, id } = this.localValue
@@ -173,8 +174,7 @@ export default {
       const needRaw =
         res?.linkPage === 'customer_service' &&
         (res?.id === 'officialProfile' || res?.id === 'officialChat')
-      const needArticle =
-        res?.linkPage === 'customer_service' && res?.id === 'official'
+      const needArticle = res?.linkPage === 'customer_service' && res?.id === 'official'
       if (needRaw) {
         next.officialAccountRawId = this.localValue.officialAccountRawId || ''
         next.officialArticleLink = ''
diff --git a/src/view/decorate/wgts/wgt_slider/sliderDialog.vue b/src/view/decorate/wgts/wgt_slider/sliderDialog.vue
index b64fe47..f82ab62 100644
--- a/src/view/decorate/wgts/wgt_slider/sliderDialog.vue
+++ b/src/view/decorate/wgts/wgt_slider/sliderDialog.vue
@@ -85,11 +85,13 @@ import { cloneDeep } from 'lodash'
 import { getImageAttribute, getVideoAttribute } from './utils'
 import SpForm from '@/components/sp-form'
 import SpImagePicker from '@/components/sp-image-picker/index.vue'
+import VideoPicker from '@/components/sp-picker-plus/VideoPicker.vue'
 export default {
   name: 'SliderDialog',
   components: {
     SpForm,
     SpImagePicker,
+    VideoPicker,
     hotzone,
     CompPickerLink
   },
@@ -258,7 +260,7 @@ export default {
             return (
               <div class='video-list'>
                 {media_type == 'video' && (
-                  <SpVideoPicker v-model={this.sliderForm[key]} size='small' class='video-link' />
+                  <VideoPicker v-model={this.sliderForm[key]} size='small' class='video-link' />
                 )}
                 {media_type == 'img' && (
                   <div class='zone-list'>
diff --git a/src/view/goods/index.vue b/src/view/goods/index.vue
index 1d9f33c..0db440f 100755
--- a/src/view/goods/index.vue
+++ b/src/view/goods/index.vue
@@ -107,6 +107,7 @@ import { isObject, isString, isArray, IS_SUPPLIER, getRegionNameById } from '@/u
 import GoodsParams from './components/GoodsParams'
 import SpecParams from './components/SpecParams'
 import SkuParams from './components/SkuParams'
+import VideoPicker from '@/components/sp-picker-plus/VideoPicker.vue'
 import sku from '../../store/modules/sku'
 export default {
   async beforeRouteLeave(to, from, next) {
@@ -631,7 +632,7 @@ export default {
                 />
               )} */}
               {/* !disabled */}
-              <SpVideoPicker v-model={value[key]} disabled={disabled} />
+              <VideoPicker v-model={value[key]} disabled={disabled} />
             </div>
           )
         },
@@ -747,7 +748,9 @@ export default {
             if (this.form.isSpecs) {
               const { specItems, skus } = value
               const isSkuFieldFilled = (v) => v != null && v !== ''
-              const approveStatus = specItems.find(({ approve_status }) => isSkuFieldFilled(approve_status))
+              const approveStatus = specItems.find(({ approve_status }) =>
+                isSkuFieldFilled(approve_status)
+              )
               const store = specItems.find(({ store }) => isSkuFieldFilled(store))
               const price = specItems.find(({ price }) => isSkuFieldFilled(price))
               const max_num = specItems.find(({ max_num }) => isSkuFieldFilled(max_num))
diff --git a/src/view/goods/saleCategory.vue b/src/view/goods/saleCategory.vue
index 2768fdd..1e60882 100755
--- a/src/view/goods/saleCategory.vue
+++ b/src/view/goods/saleCategory.vue
@@ -110,11 +110,7 @@
             <div>{{ scope.row.sort }}</div>
           </template>
         </el-table-column>
-        <el-table-column
-          :label="$t('0e7dabe2.e8f9a1')"
-          width="120"
-          align="center"
-        >
+        <el-table-column :label="$t('0e7dabe2.e8f9a1')" width="120" align="center">
           <template slot-scope="scope">
             <el-switch
               :value="scope.row.is_show_front"
@@ -149,27 +145,11 @@
         @onSubmit="onCategoryFormSubmit"
       />
     </div>
-
-    <SpTranslatePopup
-      ref="translatePopup"
-      table-name="items_category"
-      :data-id="translateContext.dataId"
-      :fields="translateContext.fields"
-      :values="translateContext.values"
-      :source-language="translateContext.sourceLang"
-      @done="onTranslateDone"
-      @save-only="onTranslateSaveOnly"
-      @cancel="onTranslateCancel"
-    />
   </SpPage>
 </template>
 <script>
 import Vue from 'vue'
-import SpTranslatePopup from '@/components/sp-translate-popup'
-import translateMixin from '@/mixins/translateMixin'
 export default {
-  components: { SpTranslatePopup },
-  mixins: [translateMixin],
   data() {
     return {
       loading: false,
@@ -212,7 +192,9 @@ export default {
         {
           label: this.$t('0e7dabe2.e8f9a1'),
           key: 'is_show_front',
-          component: ({ key }, value) => <el-switch v-model={value[key]} active-value="1" inactive-value="0"/>,
+          component: ({ key }, value) => (
+            <el-switch v-model={value[key]} active-value='1' inactive-value='0' />
+          )
         },
         {
           label: this.$t('0e7dabe2.dc1eed'),
@@ -408,11 +390,8 @@ export default {
           is_show_front
         })
         this.$message.success(this.$t('0e7dabe2.3bb47b'))
-        this.refreshNode(parent_id)
-        this.categoryDialog = false
-        this.openTranslate(category_id, ['category_name'], [category_name || ''])
       } else {
-        const res = await this.$api.goods.addCategory({
+        await this.$api.goods.addCategory({
           category_name,
           sort,
           image_url,
@@ -421,18 +400,10 @@ export default {
           parent_id: parent_id != '0' ? parent_id : undefined
         })
         this.$message.success(this.$t('0e7dabe2.3fdaea'))
-        this.refreshNode(parent_id)
-        this.categoryDialog = false
-        // 创建/编辑保持一致：弹「同步翻译」弹框
-        const newCategoryId = (res && res.data && res.data.data && (res.data.data.category_id || res.data.data.id)) || 0
-        if (newCategoryId) {
-          this.openTranslate(newCategoryId, ['category_name'], [category_name || ''])
-        }
       }
+      this.refreshNode(parent_id)
+      this.categoryDialog = false
     },
-    onTranslateDone() {},
-    // 列表页内嵌表单：仅保存/取消停留在当前列表页，不返回上一级
-    goBackTranslateList() {},
     async deleteCategory(row) {
       await this.$confirm(this.$t('0e7dabe2.442ecc'), this.$t('0e7dabe2.02d981'), {
         confirmButtonText: this.$t('0e7dabe2.38cf16'),
diff --git a/src/view/layout.vue b/src/view/layout.vue
index d3f8d70..7441e52 100755
--- a/src/view/layout.vue
+++ b/src/view/layout.vue
@@ -151,7 +151,7 @@
           <img v-if="VERSION_PLATFORM()" :src="loginBottomPlatform" alt="" class="system-image" />
           <img v-if="VERSION_STANDARD()" :src="loginBottomStandard" alt="" class="system-image" />
         </div>
-        <div id="design-view" />
+        <!-- <div id="design-view" /> -->
       </el-main>
     </el-container>
   </el-container>
@@ -166,7 +166,6 @@ import { mapGetters, mapMutations, mapState } from 'vuex'
 import { getAuthorizelogout } from '@/api/login'
 import { ICON_MAP } from '@/consts'
 import { VERSION_STANDARD, isInSalesCenter } from '@/utils'
-import { micrApp } from '@/utils/micr-app'
 import store from '@/store'
 export default {
   beforeRouteEnter(to, from, next) {
@@ -248,7 +247,6 @@ export default {
   },
   mounted() {
     this.getSystemSetting()
-    micrApp.init()
 
     console.log(this.$route)
     // window.init = () => {}
diff --git a/src/view/mall/goods/physical/list.vue b/src/view/mall/goods/physical/list.vue
index cb9a561..9cdc1a9 100755
--- a/src/view/mall/goods/physical/list.vue
+++ b/src/view/mall/goods/physical/list.vue
@@ -1473,12 +1473,17 @@ export default {
       this.is_pharma_industry = res.medicine_setting?.is_pharma_industry == '1'
     },
     async fetchWechatList() {
-      const { list } = await this.$api.minimanage.gettemplateweapplist()
-      list.forEach((item, i) => {
-        if (item.key_name == 'yykweishop') {
-          this.appID = item.authorizer.authorizer_appid
-        }
-      })
+      try {
+        const data = (await this.$api.minimanage.gettemplateweapplist()) || {}
+        const list = data.list || []
+        list.forEach((item) => {
+          if (item.key_name === 'yykweishop' && item.authorizer) {
+            this.appID = item.authorizer.authorizer_appid
+          }
+        })
+      } catch (_) {
+        // 微信模板接口不可用时跳过，不影响商品列表主流程
+      }
     },
 
     beforeSearch(params) {
diff --git a/src/view/mall/goods/physical/supplier_goods_check.vue b/src/view/mall/goods/physical/supplier_goods_check.vue
index 21a065d..68eb489 100755
--- a/src/view/mall/goods/physical/supplier_goods_check.vue
+++ b/src/view/mall/goods/physical/supplier_goods_check.vue
@@ -347,7 +347,10 @@
         >
           <el-form ref="form" :model="examineForm" label-width="80px">
             <el-form-item :label="$t('d41d8cd9.v9w0x1')">
-              <el-radio-group v-model="examineForm.audit_status" @change="onExamineAuditStatusChange">
+              <el-radio-group
+                v-model="examineForm.audit_status"
+                @change="onExamineAuditStatusChange"
+              >
                 <el-radio label="approved"> {{ $t('d41d8cd9.y2z3a4') }} </el-radio>
                 <el-radio label="rejected"> {{ $t('d41d8cd9.b5c6d7') }} </el-radio>
               </el-radio-group>
diff --git a/src/view/mall/trade/order/afterSale.vue b/src/view/mall/trade/order/afterSale.vue
index b06aca6..e1b2669 100755
--- a/src/view/mall/trade/order/afterSale.vue
+++ b/src/view/mall/trade/order/afterSale.vue
@@ -125,6 +125,7 @@ export default {
               on-onChange={(e) => {
                 this.form.items = e
                 this.$refs['compRefundRef'].getTotalFee()
+                this.$refs['compRefundPointRef']?.getTotalFee()
               }}
             />
           ),
@@ -141,6 +142,7 @@ export default {
           key: 'refund_point',
           component: () => (
             <CompRefundPoint
+              ref='compRefundPointRef'
               value={this.orderInfo}
               on-onChange={(e) => {
                 this.form.refund_point = e
diff --git a/src/view/mall/trade/order/comps/comp-refundAmount.vue b/src/view/mall/trade/order/comps/comp-refundAmount.vue
index 79c1983..6551762 100755
--- a/src/view/mall/trade/order/comps/comp-refundAmount.vue
+++ b/src/view/mall/trade/order/comps/comp-refundAmount.vue
@@ -12,10 +12,9 @@
 </style>
 <template>
   <div class="comp-refund-amount">
-    <el-input v-model="fee" type="text" @change="onChangeFee" />
+    <el-input v-model="fee" type="text" disabled @change="onChangeFee" />
     <div class="refund-amount-tip">
       {{ $t('8a5fac4d.eea9ab') }}{{ refundFee }}
-      <el-button type="text" @click="refundAll">{{ $t('8a5fac4d.3593b9') }}</el-button>
     </div>
   </div>
 </template>
@@ -47,9 +46,6 @@ export default {
     },
     onChangeFee() {
       this.$emit('onChangeFee', this.fee)
-    },
-    refundAll() {
-      this.$emit('onChange')
     }
   }
 }
diff --git a/src/view/mall/trade/order/comps/comp-refundPoint.vue b/src/view/mall/trade/order/comps/comp-refundPoint.vue
index 7115a40..b910b11 100755
--- a/src/view/mall/trade/order/comps/comp-refundPoint.vue
+++ b/src/view/mall/trade/order/comps/comp-refundPoint.vue
@@ -12,8 +12,8 @@
 </style>
 <template>
   <div class="comp-refund-amount">
-    <el-input v-model="fee" type="text" @change="onChangeFee" />
-    <div class="refund-amount-tip">{{ $t('2a4a2da7.a81a1b') }}{{ getTotalFee() }}</div>
+    <el-input v-model="fee" type="text" disabled @change="onChangeFee" />
+    <div class="refund-amount-tip">{{ $t('2a4a2da7.a81a1b') }}{{ refundPoint }}</div>
   </div>
 </template>
 
@@ -23,7 +23,8 @@ export default {
   props: ['value'],
   data() {
     return {
-      fee: 0
+      fee: 0,
+      refundPoint: 0
     }
   },
   created() {},
@@ -33,22 +34,21 @@ export default {
       let leftPoint = 0
       items.forEach((item) => {
         if (item.checked) {
-          item.refundNum === item.left_aftersales_num
-            ? (leftPoint = item.remain_point / 100)
-            : (leftPoint = parseInt(
-                (item.remain_point / 100 / item.left_aftersales_num) * item.refundNum
-              ))
+          leftPoint +=
+            item.refundNum === item.left_aftersales_num
+              ? item.remain_point / 100
+              : parseInt(
+                  (item.remain_point / 100 / item.left_aftersales_num) * item.refundNum
+                )
         }
       })
+      this.refundPoint = leftPoint
+      this.fee = leftPoint
+      this.$emit('onChange', leftPoint)
       return leftPoint
     },
     onChangeFee() {
       this.$emit('onChange', this.fee)
-    },
-    refundAll() {
-      const refundFee = this.getTotalFee()
-      this.fee = refundFee
-      this.$emit('onChange', refundFee)
     }
   }
 }
diff --git a/src/view/marketing/employee/list.vue b/src/view/marketing/employee/list.vue
index fe89cbc..3eaed9d 100755
--- a/src/view/marketing/employee/list.vue
+++ b/src/view/marketing/employee/list.vue
@@ -158,7 +158,11 @@
             }}</el-descriptions-item>
           </el-descriptions>
           <el-table :data="statsDialogList" border stripe max-height="420" style="margin-top: 12px">
-            <el-table-column prop="enterprise_name" :label="$t('bea3f44a.e01a0b')" min-width="140" />
+            <el-table-column
+              prop="enterprise_name"
+              :label="$t('bea3f44a.e01a0b')"
+              min-width="140"
+            />
             <el-table-column prop="enterprise_sn" :label="$t('bea3f44a.e01a0c')" min-width="120" />
             <el-table-column prop="scan_count" :label="$t('bea3f44a.e01a02')" width="100" />
             <el-table-column prop="scan_user_count" :label="$t('bea3f44a.e01a03')" width="100" />
@@ -511,8 +515,7 @@ export default {
         /\/activity-management\/(create|result\/|goods\/|dependents\/)/.test(fromPath) ||
         /\/employee\/purchase\/(create|result\/|goods\/|dependents\/)/.test(fromPath)
       const needRefresh =
-        isListRoot &&
-        (String((to.query || {}).refresh || '') === '1' || fromActivitySubRoute)
+        isListRoot && (String((to.query || {}).refresh || '') === '1' || fromActivitySubRoute)
       if (needRefresh) {
         this.$nextTick(() => {
           this.$refs['finder'] && this.$refs['finder'].refresh()
diff --git a/src/view/marketing/employee/purchase.vue b/src/view/marketing/employee/purchase.vue
index b910bfe..dd64350 100755
--- a/src/view/marketing/employee/purchase.vue
+++ b/src/view/marketing/employee/purchase.vue
@@ -5,7 +5,6 @@
 
 <style lang="scss">
 .marketing-employee-purchase {
-
   .activity-name,
   .activity-title {
     max-width: 480px;
@@ -218,23 +217,53 @@
     </template>
     <div class="marketing-employee-purchase">
       <el-card class="el-card--normal" :header="$t('39e3acc2.6ea1fe')">
-        <SpForm ref="formBase" v-model="formBase" class="base-form" show-message :form-list="formBaseList"
-          :submit="false" />
+        <SpForm
+          ref="formBase"
+          v-model="formBase"
+          class="base-form"
+          show-message
+          :form-list="formBaseList"
+          :submit="false"
+        />
       </el-card>
       <el-card class="el-card--normal" :header="$t('39e3acc2.02a217')">
-        <SpForm ref="activityRule" v-model="activityRule" class="base-form" show-message
-          :form-list="activityRuleListComputed" :submit="false" item-transition />
+        <SpForm
+          ref="activityRule"
+          v-model="activityRule"
+          class="base-form"
+          show-message
+          :form-list="activityRuleListComputed"
+          :submit="false"
+          item-transition
+        />
       </el-card>
     </div>
 
-    <el-dialog :title="$t('39e3acc2.c4750a')" :visible.sync="storeHomePickerVisible" width="800px" append-to-body
-      custom-class="purchase-store-home-picker-dialog" @open="onStoreHomePickerOpen">
+    <el-dialog
+      :title="$t('39e3acc2.c4750a')"
+      :visible.sync="storeHomePickerVisible"
+      width="800px"
+      append-to-body
+      custom-class="purchase-store-home-picker-dialog"
+      @open="onStoreHomePickerOpen"
+    >
       <div v-if="IS_ADMIN()" class="purchase-store-home-picker__filter">
-        <SpSelectShop v-model="storeHomePickerFilterDistributorId" clearable :placeholder="$t('0255d436.708c9d')"
-          class="purchase-store-home-picker__shop" @change="onStoreHomePickerFilterChange" />
+        <SpSelectShop
+          v-model="storeHomePickerFilterDistributorId"
+          clearable
+          :placeholder="$t('0255d436.708c9d')"
+          class="purchase-store-home-picker__shop"
+          @change="onStoreHomePickerFilterChange"
+        />
       </div>
-      <el-table v-loading="storeHomePickerLoading" border :data="storeHomeList" highlight-current-row max-height="360"
-        @row-click="onStoreHomeTableRowClick">
+      <el-table
+        v-loading="storeHomePickerLoading"
+        border
+        :data="storeHomeList"
+        highlight-current-row
+        max-height="360"
+        @row-click="onStoreHomeTableRowClick"
+      >
         <el-table-column width="52" align="center">
           <template slot-scope="scope">
             <el-radio v-model="storeHomePickerPickedId" :label="scope.row.id">&nbsp;</el-radio>
@@ -246,13 +275,20 @@
         <el-table-column prop="template_name" :label="$t('0255d436.49bcb8')" min-width="120" />
       </el-table>
       <div class="mt-4 text-right">
-        <el-pagination background layout="prev, pager, next" :current-page="storeHomeParams.page"
-          :total="storeHomeTotal" :page-size="storeHomeParams.pageSize"
-          @current-change="handleStoreHomePickerPageChange" />
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :current-page="storeHomeParams.page"
+          :total="storeHomeTotal"
+          :page-size="storeHomeParams.pageSize"
+          @current-change="handleStoreHomePickerPageChange"
+        />
       </div>
       <div slot="footer" class="dialog-footer">
         <el-button @click="storeHomePickerVisible = false">{{ $t('bea3f44a.625fb2') }}</el-button>
-        <el-button type="primary" @click="confirmStoreHomePicker">{{ $t('d8d84692.be5fbb') }}</el-button>
+        <el-button type="primary" @click="confirmStoreHomePicker">{{
+          $t('d8d84692.be5fbb')
+        }}</el-button>
       </div>
     </el-dialog>
   </SpPage>
@@ -379,25 +415,17 @@ export default {
     },
     /** 进行中或已暂停（pending）：活动规则与口令配置强锁，与接口语义一致 */
     isActivityRuleEditLocked() {
-      return (
-        this.activityStatus === 'ongoing' || this.activityStatus === 'pending'
-      )
+      return this.activityStatus === 'ongoing' || this.activityStatus === 'pending'
     },
     /** 强锁且已开启口令：仅口令企业表的 participate_quota 允许编辑 */
     isPassphraseQuotaOnlyEditMode() {
-      return (
-        this.isActivityRuleEditLocked &&
-        !!this.activityRule.is_passphrase_enabled
-      )
+      return this.isActivityRuleEditLocked && !!this.activityRule.is_passphrase_enabled
     },
     footerSaveDisabled() {
       if (this.activityStatus === 'cancel' || this.activityStatus === 'over') {
         return true
       }
-      if (
-        this.isActivityRuleEditLocked &&
-        !this.activityRule.is_passphrase_enabled
-      ) {
+      if (this.isActivityRuleEditLocked && !this.activityRule.is_passphrase_enabled) {
         return true
       }
       return false
@@ -564,8 +592,18 @@ export default {
                   border
                   size='small'
                 >
-                  <el-table-column label={t('39e3acc2.e8b1a5')} prop='name' min-width='180' show-overflow-tooltip />
-                  <el-table-column label={t('39e3acc2.e8b1a6')} prop='enterprise_sn' min-width='140' show-overflow-tooltip />
+                  <el-table-column
+                    label={t('39e3acc2.e8b1a5')}
+                    prop='name'
+                    min-width='180'
+                    show-overflow-tooltip
+                  />
+                  <el-table-column
+                    label={t('39e3acc2.e8b1a6')}
+                    prop='enterprise_sn'
+                    min-width='140'
+                    show-overflow-tooltip
+                  />
                   <el-table-column
                     min-width='200'
                     scopedSlots={{
@@ -675,7 +713,9 @@ export default {
                             }}
                           >
                             <div class='passphrase-batch-fill-popover'>
-                              <p class='passphrase-batch-code-popover__tip'>{t('39e3acc2.e8b1b3')}</p>
+                              <p class='passphrase-batch-code-popover__tip'>
+                                {t('39e3acc2.e8b1b3')}
+                              </p>
                               <div class='passphrase-batch-fill-popover__actions'>
                                 <el-button
                                   type='text'
@@ -810,10 +850,7 @@ export default {
                 <div class='form-item-tip'>{t('39e3acc2.f5552d')}</div>
               </div>
               <transition name='purchase-inline-fade'>
-                <div
-                  class='form-item-content'
-                  v-show={!self.activityRule.is_passphrase_enabled}
-                >
+                <div class='form-item-content' v-show={!self.activityRule.is_passphrase_enabled}>
                   <div class='content-item'>
                     <label>{t('39e3acc2.769491')}</label>
                     <SpInput
@@ -1128,17 +1165,17 @@ export default {
       console.log('priceData', priceData)
 
       const phraseMap = {}
-        ; (res.passphrase_enterprises || []).forEach((pe) => {
-          const eid = pe.enterprise_id
-          phraseMap[eid] = {
-            participate_quota: pe.participate_quota,
-            passphrase_code: pe.passphrase_code || '',
-            passphrase_limitfee:
-              pe.passphrase_limitfee != null && pe.passphrase_limitfee !== ''
-                ? Number(pe.passphrase_limitfee) / 100
-                : ''
-          }
-        })
+      ;(res.passphrase_enterprises || []).forEach((pe) => {
+        const eid = pe.enterprise_id
+        phraseMap[eid] = {
+          participate_quota: pe.participate_quota,
+          passphrase_code: pe.passphrase_code || '',
+          passphrase_limitfee:
+            pe.passphrase_limitfee != null && pe.passphrase_limitfee !== ''
+              ? Number(pe.passphrase_limitfee) / 100
+              : ''
+        }
+      })
       const passphraseRows = list.map((c) => {
         const pm = phraseMap[c.id]
         return {
@@ -1173,7 +1210,8 @@ export default {
         ...priceData,
         is_discount_description_enabled: res.is_discount_description_enabled == 'true',
         discount_description: res.discount_description,
-        is_passphrase_enabled: res.is_passphrase_enabled === 'true' || res.is_passphrase_enabled === true,
+        is_passphrase_enabled:
+          res.is_passphrase_enabled === 'true' || res.is_passphrase_enabled === true,
         passphraseRows
       }
       this.onRadioChange(res.if_share_limitfee ? '2' : '1')
@@ -1286,7 +1324,8 @@ export default {
           enterprise_sn: c.enterprise_sn || '',
           participate_quota: old ? old.participate_quota : '',
           passphrase_code: old ? old.passphrase_code : '',
-          passphrase_limitfee: old && old.passphrase_limitfee !== undefined ? old.passphrase_limitfee : ''
+          passphrase_limitfee:
+            old && old.passphrase_limitfee !== undefined ? old.passphrase_limitfee : ''
         }
       })
     },
@@ -1442,7 +1481,10 @@ export default {
           (passphraseRows || []).map((r) => ({
             enterprise_id: Number(r.enterprise_id),
             participate_quota: Number(r.participate_quota),
-            passphrase_limitfee: Math.max(0, Math.round((Number(r.passphrase_limitfee) || 0) * 100)),
+            passphrase_limitfee: Math.max(
+              0,
+              Math.round((Number(r.passphrase_limitfee) || 0) * 100)
+            ),
             passphrase_code: String(r.passphrase_code || '').trim()
           }))
         )
diff --git a/src/view/marketing/employee/storeHomePage.vue b/src/view/marketing/employee/storeHomePage.vue
index bcc09f6..7fb1c82 100644
--- a/src/view/marketing/employee/storeHomePage.vue
+++ b/src/view/marketing/employee/storeHomePage.vue
@@ -38,12 +38,20 @@
             {{ $t('0255d436.6343df') }}
           </el-button>
           <el-button type="text" class="m-0 px-1">
-            <a href="javascript:void(0)" class="no-underline text-inherit" @click="openDialog(scope.row)">
+            <a
+              href="javascript:void(0)"
+              class="no-underline text-inherit"
+              @click="openDialog(scope.row)"
+            >
               {{ $t('0255d436.95b351') }}
             </a>
           </el-button>
           <el-button type="text" class="m-0 pl-2">
-            <a href="javascript:void(0)" class="no-underline text-inherit" @click="delPage(scope.row.id)">
+            <a
+              href="javascript:void(0)"
+              class="no-underline text-inherit"
+              @click="delPage(scope.row.id)"
+            >
               {{ $t('0255d436.2f4aad') }}
             </a>
           </el-button>
@@ -68,13 +76,25 @@
     >
       <el-form v-model="pageForm" label-width="200px">
         <el-form-item :label="$t('0255d436.b78454')">
-          <el-input v-model="pageForm.page_name" :placeholder="$t('0255d436.b78454')" style="width: 55%" />
+          <el-input
+            v-model="pageForm.page_name"
+            :placeholder="$t('0255d436.b78454')"
+            style="width: 55%"
+          />
         </el-form-item>
         <el-form-item :label="$t('0255d436.abf8f4')">
-          <el-input v-model="pageForm.page_description" :placeholder="$t('0255d436.abf8f4')" style="width: 55%" />
+          <el-input
+            v-model="pageForm.page_description"
+            :placeholder="$t('0255d436.abf8f4')"
+            style="width: 55%"
+          />
         </el-form-item>
         <el-form-item :label="$t('0255d436.382e6f')">
-          <el-input v-model="pageForm.page_share_title" :placeholder="$t('0255d436.382e6f')" style="width: 55%" />
+          <el-input
+            v-model="pageForm.page_share_title"
+            :placeholder="$t('0255d436.382e6f')"
+            style="width: 55%"
+          />
         </el-form-item>
         <el-form-item :label="$t('0255d436.106d52')">
           <div class="upload-box" @click="handleImgChange()">
diff --git a/src/view/member/promotions/pluspricebuy/list.vue b/src/view/member/promotions/pluspricebuy/list.vue
index 855d654..de594cb 100755
--- a/src/view/member/promotions/pluspricebuy/list.vue
+++ b/src/view/member/promotions/pluspricebuy/list.vue
@@ -167,10 +167,7 @@
                   >
                     {{ $t('ff141a64.3ae7e4') }}
                   </el-button>
-                  <span
-                    v-if="scope.row.status == 'waiting'"
-                    class="pluspricebuy-waiting-actions"
-                  >
+                  <span v-if="scope.row.status == 'waiting'" class="pluspricebuy-waiting-actions">
                     <i
                       class="el-icon-edit-outline"
                       @click="editActivityAction(scope.$index, scope.row)"
diff --git a/src/view/member/promotions/register.vue b/src/view/member/promotions/register.vue
index 45cab93..e577bfc 100755
--- a/src/view/member/promotions/register.vue
+++ b/src/view/member/promotions/register.vue
@@ -42,11 +42,7 @@
               <div v-if="hasRegisterJumpPath" class="link-content border px-2">
                 <span @click="handleGoodsChange()">{{ registerJumpPathSummary }}</span>
                 <span style="margin-left: 10px">
-                  <i
-                    style="color: #f56c6c"
-                    class="el-icon-delete"
-                    @click.stop="clear_pic_url"
-                  />
+                  <i style="color: #f56c6c" class="el-icon-delete" @click.stop="clear_pic_url" />
                 </span>
               </div>
               <div
diff --git a/src/view/member/ugc/ugcNotesEditor.vue b/src/view/member/ugc/ugcNotesEditor.vue
index da3d79a..ba132d6 100755
--- a/src/view/member/ugc/ugcNotesEditor.vue
+++ b/src/view/member/ugc/ugcNotesEditor.vue
@@ -112,7 +112,7 @@
       <el-form-item :label="$t('509e5e05.e0418a')" prop="video">
         <el-row>
           <el-col :span="16">
-            <SpVideoPicker v-model="ruleForm.video" />
+            <VideoPicker v-model="ruleForm.video" />
           </el-col>
         </el-row>
       </el-form-item>
@@ -173,6 +173,7 @@ import { uploadQiniuPic } from '@/api/qiniu'
 import { getNotesDetail, notesCreate } from '@/api/ugc'
 import flagModal from './comps/flagModal'
 import topicModal from './comps/topicModal'
+import VideoPicker from '@/components/sp-picker-plus/VideoPicker.vue'
 export default {
   provide() {
     return {
@@ -185,7 +186,8 @@ export default {
     draggable,
     SkuSelector,
     flagModal,
-    topicModal
+    topicModal,
+    VideoPicker
   },
   data() {
     return {
diff --git a/src/view/order/entitytrade/purchase.vue b/src/view/order/entitytrade/purchase.vue
index 4f76127..207f79a 100755
--- a/src/view/order/entitytrade/purchase.vue
+++ b/src/view/order/entitytrade/purchase.vue
@@ -138,10 +138,7 @@
               <div class="order-num">
                 {{ scope.row.order_id }}
                 <el-tooltip effect="dark" :content="$t('931fca81.79d3ab')" placement="top-start">
-                  <i
-                    class="el-icon-document-copy"
-                    @click.stop="copyRowText(scope.row.order_id)"
-                  />
+                  <i class="el-icon-document-copy" @click.stop="copyRowText(scope.row.order_id)" />
                 </el-tooltip>
               </div>
               <div v-if="scope.row.distributor_id !== '0'" class="order-store">
@@ -191,10 +188,7 @@
                   :content="$t('931fca81.79d3ab')"
                   placement="top-start"
                 >
-                  <i
-                    class="el-icon-document-copy"
-                    @click.stop="copyRowText(scope.row.mobile)"
-                  />
+                  <i class="el-icon-document-copy" @click.stop="copyRowText(scope.row.mobile)" />
                 </el-tooltip>
               </template>
               <template v-else>
@@ -205,10 +199,7 @@
                   :content="$t('931fca81.79d3ab')"
                   placement="top-start"
                 >
-                  <i
-                    class="el-icon-document-copy"
-                    @click.stop="copyRowText(scope.row.mobile)"
-                  />
+                  <i class="el-icon-document-copy" @click.stop="copyRowText(scope.row.mobile)" />
                 </el-tooltip>
               </template>
             </template>
diff --git a/src/view/pc/pctemplate/index.vue b/src/view/pc/pctemplate/index.vue
index 00cc4a6..cdeb2a6 100755
--- a/src/view/pc/pctemplate/index.vue
+++ b/src/view/pc/pctemplate/index.vue
@@ -15,8 +15,13 @@
           </el-row>
           <el-row>
             <el-tabs type="card" v-model="page_type" @tab-click="handleTabClick">
-              <el-tab-pane v-for="(item, index) of tabList" :key="index" :label="$t(item.labelKey)" :disabled="loading"
-                :name="item.name" />
+              <el-tab-pane
+                v-for="(item, index) of tabList"
+                :key="index"
+                :label="$t(item.labelKey)"
+                :disabled="loading"
+                :name="item.name"
+              />
               <el-table border v-loading="loading" stripe style="width: 100%" :data="templateList">
                 <el-table-column prop="theme_pc_template_id" :label="$t('8b0d1458.6872c7')" />
                 <el-table-column prop="template_title" :label="$t('8b0d1458.b78454')" />
@@ -34,9 +39,7 @@
                   <template slot-scope="scope">
                     <div>
                       <el-tag v-if="isTemplateEnabled(scope.row.status)" type="success">
-                        {{
-                          $t('8b0d1458.7854b5')
-                        }}
+                        {{ $t('8b0d1458.7854b5') }}
                       </el-tag>
                       <el-tag v-else type="info">{{ $t('8b0d1458.463776') }}</el-tag>
                     </div>
@@ -58,7 +61,12 @@
                       <el-button type="text" size="mini" @click="handleEdit(scope.row)">
                         {{ $t('8b0d1458.95b351') }}
                       </el-button>
-                      <el-button type="primary" round size="mini" @click="handleRenovation(scope.row)">
+                      <el-button
+                        type="primary"
+                        round
+                        size="mini"
+                        @click="handleRenovation(scope.row)"
+                      >
                         {{ $t('8b0d1458.6343df') }}
                       </el-button>
                     </div>
@@ -68,23 +76,46 @@
             </el-tabs>
           </el-row>
           <div class="content-right mt-4 content-top-padded">
-            <el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page.sync="page.page_no"
-              :page-sizes="[10, 20, 50]" :total="page.total" :page-size="page.page_size"
-              @current-change="handleCurrentChange" @size-change="handleSizeChange" />
+            <el-pagination
+              background
+              layout="total, sizes, prev, pager, next, jumper"
+              :current-page.sync="page.page_no"
+              :page-sizes="[10, 20, 50]"
+              :total="page.total"
+              :page-size="page.page_size"
+              @current-change="handleCurrentChange"
+              @size-change="handleSizeChange"
+            />
           </div>
-          <el-dialog :title="$t('8b0d1458.b73a0b')" :visible.sync="dialogVisible" width="500px"
-            :before-close="handleDialogClose">
+          <el-dialog
+            :title="$t('8b0d1458.b73a0b')"
+            :visible.sync="dialogVisible"
+            width="500px"
+            :before-close="handleDialogClose"
+          >
             <el-form ref="myForm" :model="formData" :rules="formRule" label-width="80px">
               <el-form-item :label="$t('8b0d1458.b78454')" prop="template_title">
-                <el-input v-model="formData.template_title" clearable :placeholder="$t('8b0d1458.7d5cc3')" />
+                <el-input
+                  v-model="formData.template_title"
+                  clearable
+                  :placeholder="$t('8b0d1458.7d5cc3')"
+                />
               </el-form-item>
               <el-form-item :label="$t('8b0d1458.abf8f4')" prop="template_description">
-                <el-input v-model="formData.template_description" clearable :placeholder="$t('8b0d1458.9c5cf8')" />
+                <el-input
+                  v-model="formData.template_description"
+                  clearable
+                  :placeholder="$t('8b0d1458.9c5cf8')"
+                />
               </el-form-item>
               <el-form-item :label="$t('8b0d1458.46f391')" prop="page_type">
                 <el-select v-model="formData.page_type" style="width: 100%" clearable>
-                  <el-option v-for="(item, index) of tabList" :key="index" :value="item.name"
-                    :label="$t(item.labelKey)" />
+                  <el-option
+                    v-for="(item, index) of tabList"
+                    :key="index"
+                    :value="item.name"
+                    :label="$t(item.labelKey)"
+                  />
                 </el-select>
               </el-form-item>
               <el-form-item :label="$t('8b0d1458.53c3dd')" prop="status">
@@ -94,7 +125,7 @@
             <span slot="footer" class="dialog-footer">
               <el-button type="primary" :loading="loading" @click="submitForm('myForm')">{{
                 $t('8b0d1458.babc8f')
-                }}</el-button>
+              }}</el-button>
             </span>
           </el-dialog>
         </div>
diff --git a/src/view/pc/tdk/globalset.vue b/src/view/pc/tdk/globalset.vue
index f83413c..af58c65 100755
--- a/src/view/pc/tdk/globalset.vue
+++ b/src/view/pc/tdk/globalset.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-  <SpPage :title="$t('5f8c2276.e807b2')">
+  <SpPage :title="t('5f8c2276.e807b2')">
     <template slot="page-footer">
       <div class="text-center">
         <el-button type="primary" :loading="loading" @click="onSubmit">
@@ -16,21 +16,27 @@
   </SpPage>
 </template>
 <script>
+import { i18n } from '@/i18n'
 import { useForm } from '@/composables'
 
+/** 全局 i18n 实例翻译（与文件内哈希键配套，见 src/i18n/locales） */
+function t(key) {
+  return i18n.t(key)
+}
+
 const [Form, FormApi] = useForm({
   formItems: [
     {
       component: 'Input',
       fieldName: 'title',
       formItemClass: 'w-2/5',
-      label: '5f8c2276.8d6b59'
+      label: t('5f8c2276.8d6b59')
     },
     {
       component: 'Input',
       fieldName: 'mate_description',
       formItemClass: 'w-2/5',
-      label: '5f8c2276.abf8f4'
+      label: t('5f8c2276.abf8f4')
     },
     {
       component: 'Input',
@@ -40,8 +46,8 @@ const [Form, FormApi] = useForm({
       },
       fieldName: 'mate_keywords',
       formItemClass: 'w-2/5',
-      label: '5f8c2276.9699a5',
-      tip: '5f8c2276.c0a63b'
+      label: t('5f8c2276.9699a5'),
+      tip: t('5f8c2276.c0a63b')
     }
   ],
   showDefaultActions: false
@@ -61,6 +67,7 @@ export default {
     this.getTdkglobalset()
   },
   methods: {
+    t,
     async getTdkglobalset() {
       const res = await this.$api.tdkset.getTdkglobalset()
       FormApi.setFieldsValue({
@@ -69,7 +76,6 @@ export default {
         mate_keywords: res.mate_keywords
       })
     },
-    // 保存数据
     async onSubmit() {
       this.loading = true
       const res = await FormApi.getFieldsValue()
@@ -80,7 +86,7 @@ export default {
       }
       this.$api.tdkset.saveTdkglobalset(params)
       this.loading = false
-      this.$message.success(this.$t('5f8c2276.3b1083'))
+      this.$message.success(t('5f8c2276.3b1083'))
     }
   }
 }
diff --git a/src/views/ai/material/components/AdvancedSettingsDrawer.vue b/src/views/ai/material/components/AdvancedSettingsDrawer.vue
index 0b383f0..790bb0c 100644
--- a/src/views/ai/material/components/AdvancedSettingsDrawer.vue
+++ b/src/views/ai/material/components/AdvancedSettingsDrawer.vue
@@ -21,7 +21,9 @@
               placement="top"
             >
               <span>
-                <el-radio-button :label="r.value" :disabled="r.disabled">{{ r.label }}</el-radio-button>
+                <el-radio-button :label="r.value" :disabled="r.disabled">{{
+                  r.label
+                }}</el-radio-button>
               </span>
             </el-tooltip>
           </el-radio-group>
@@ -45,11 +47,21 @@
         <div class="section">
           <div class="section-title">图片尺寸</div>
           <div class="size-inputs">
-            <el-input v-model.number="form.customW" placeholder="W" size="small" @change="onCustomChange">
+            <el-input
+              v-model.number="form.customW"
+              placeholder="W"
+              size="small"
+              @change="onCustomChange"
+            >
               <template slot="prepend">W</template>
             </el-input>
             <i class="el-icon-link link-icon" />
-            <el-input v-model.number="form.customH" placeholder="H" size="small" @change="onCustomChange">
+            <el-input
+              v-model.number="form.customH"
+              placeholder="H"
+              size="small"
+              @change="onCustomChange"
+            >
               <template slot="prepend">H</template>
             </el-input>
           </div>
@@ -59,8 +71,20 @@
         <div class="section">
           <div class="section-title">最大生成张数</div>
           <div class="slider-row">
-            <el-slider v-model="form.maxImages" :min="1" :max="15" style="flex: 1; margin-right: 16px" />
-            <el-input-number v-model="form.maxImages" :min="1" :max="15" size="small" :controls="false" style="width: 80px" />
+            <el-slider
+              v-model="form.maxImages"
+              :min="1"
+              :max="15"
+              style="flex: 1; margin-right: 16px"
+            />
+            <el-input-number
+              v-model="form.maxImages"
+              :min="1"
+              :max="15"
+              size="small"
+              :controls="false"
+              style="width: 80px"
+            />
           </div>
         </div>
 
@@ -83,7 +107,10 @@
         <div class="section">
           <div class="section-row">
             <span class="section-title-inline">水印</span>
-            <el-switch :value="form.watermark === 1" @change="(v) => (form.watermark = v ? 1 : 0)" />
+            <el-switch
+              :value="form.watermark === 1"
+              @change="(v) => (form.watermark = v ? 1 : 0)"
+            />
           </div>
         </div>
       </template>
@@ -96,7 +123,9 @@
             <el-radio-button label="reference">参考生成</el-radio-button>
             <el-radio-button label="first_last">首尾帧</el-radio-button>
           </el-radio-group>
-          <div class="hint">参考生成支持参考图/参考视频/参考音频；首尾帧仅支持首帧（必填）+ 尾帧（可选）</div>
+          <div class="hint">
+            参考生成支持参考图/参考视频/参考音频；首尾帧仅支持首帧（必填）+ 尾帧（可选）
+          </div>
         </div>
 
         <div class="section">
@@ -112,21 +141,39 @@
               {{ r.label }}
             </div>
           </div>
-          <el-checkbox v-model="form.smartRatio" style="margin-top: 8px" @change="onToggleSmart">智能比例（adaptive）</el-checkbox>
+          <el-checkbox v-model="form.smartRatio" style="margin-top: 8px" @change="onToggleSmart"
+            >智能比例（adaptive）</el-checkbox
+          >
         </div>
 
         <div class="section">
           <div class="section-title">分辨率</div>
           <el-radio-group v-model="form.resolution" size="small">
-            <el-radio-button v-for="r in videoResolutions" :key="r.value" :label="r.value">{{ r.label }}</el-radio-button>
+            <el-radio-button v-for="r in videoResolutions" :key="r.value" :label="r.value">{{
+              r.label
+            }}</el-radio-button>
           </el-radio-group>
         </div>
 
         <div class="section">
           <div class="section-title">视频时长（秒）</div>
           <div class="slider-row">
-            <el-slider v-model="form.duration" :min="4" :max="15" :step="1" style="flex: 1; margin-right: 16px" />
-            <el-input-number v-model="form.duration" :min="4" :max="15" :step="1" size="small" :controls="false" style="width: 80px" />
+            <el-slider
+              v-model="form.duration"
+              :min="4"
+              :max="15"
+              :step="1"
+              style="flex: 1; margin-right: 16px"
+            />
+            <el-input-number
+              v-model="form.duration"
+              :min="4"
+              :max="15"
+              :step="1"
+              size="small"
+              :controls="false"
+              style="width: 80px"
+            />
           </div>
         </div>
 
@@ -162,8 +209,17 @@
 
         <div class="section">
           <div class="section-title">随机种子（可选）</div>
-          <el-input-number v-model="form.seed" :min="0" :max="2147483647" size="small" :controls="false" style="width: 100%" />
-          <div class="hint">种子值用于控制生成内容的随机性，相同的种子值会生成类似的视频内容，-1代表随机数</div>
+          <el-input-number
+            v-model="form.seed"
+            :min="0"
+            :max="2147483647"
+            size="small"
+            :controls="false"
+            style="width: 100%"
+          />
+          <div class="hint">
+            种子值用于控制生成内容的随机性，相同的种子值会生成类似的视频内容，-1代表随机数
+          </div>
         </div>
       </template>
 
@@ -207,7 +263,9 @@ export default {
       this.visible = v
       if (v) this.form = this.normalize(this.params, this.mediaType)
     },
-    visible(v) { if (v !== this.value) this.$emit('input', v) }
+    visible(v) {
+      if (v !== this.value) this.$emit('input', v)
+    }
   },
   methods: {
     normalize(p, mediaType) {
@@ -274,23 +332,79 @@ export default {
 </script>
 
 <style scoped>
-.adv-drawer { padding: 0 20px 20px; overflow-y: auto; }
-.section { margin-bottom: 20px; }
-.section-title { font-size: 13px; color: #606266; margin-bottom: 8px; }
-.section-row { display: flex; align-items: center; justify-content: space-between; }
-.section-title-inline { font-size: 13px; color: #606266; }
-.hint { font-size: 12px; color: #909399; margin-top: 4px; }
-.ratio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
-.ratio-item {
-  border: 1px solid #dcdfe6; border-radius: 4px; padding: 8px 0;
-  text-align: center; cursor: pointer; font-size: 13px; transition: all .2s;
+.adv-drawer {
+  padding: 0 20px 20px;
+  overflow-y: auto;
+}
+.section {
+  margin-bottom: 20px;
+}
+.section-title {
+  font-size: 13px;
+  color: #606266;
+  margin-bottom: 8px;
+}
+.section-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.section-title-inline {
+  font-size: 13px;
+  color: #606266;
+}
+.hint {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 4px;
+}
+.ratio-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+.ratio-item {
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 8px 0;
+  text-align: center;
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.2s;
+}
+.ratio-item:hover {
+  border-color: #409eff;
+}
+.ratio-item.active {
+  border-color: #409eff;
+  color: #409eff;
+  background: #ecf5ff;
+}
+.size-inputs {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.size-inputs .el-input {
+  flex: 1;
+}
+.link-icon {
+  font-size: 18px;
+  color: #909399;
+}
+.error-tip {
+  color: #f56c6c;
+  font-size: 12px;
+  margin-top: 4px;
+}
+.slider-row {
+  display: flex;
+  align-items: center;
+}
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 20px;
 }
-.ratio-item:hover { border-color: #409eff; }
-.ratio-item.active { border-color: #409eff; color: #409eff; background: #ecf5ff; }
-.size-inputs { display: flex; align-items: center; gap: 8px; }
-.size-inputs .el-input { flex: 1; }
-.link-icon { font-size: 18px; color: #909399; }
-.error-tip { color: #f56c6c; font-size: 12px; margin-top: 4px; }
-.slider-row { display: flex; align-items: center; }
-.actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
 </style>
diff --git a/src/views/ai/material/components/MultiMediaUpload.vue b/src/views/ai/material/components/MultiMediaUpload.vue
index 0d82db6..fba6d1b 100644
--- a/src/views/ai/material/components/MultiMediaUpload.vue
+++ b/src/views/ai/material/components/MultiMediaUpload.vue
@@ -23,7 +23,9 @@
         <div class="media-item placeholder">
           <i v-if="!uploading" class="el-icon-plus"></i>
           <i v-else class="el-icon-loading"></i>
-          <div class="hint">{{ items.length === 0 ? placeholder : (items.length + '/' + totalMax) }}</div>
+          <div class="hint">
+            {{ items.length === 0 ? placeholder : items.length + '/' + totalMax }}
+          </div>
         </div>
       </el-upload>
 
@@ -99,7 +101,9 @@
               <div class="prog-fill" :style="{ width: audioProgressPct + '%' }"></div>
             </div>
           </div>
-          <span class="audio-time">{{ formatMmSs(audioCur) }} / {{ formatMmSs(durations[activeItem.url]) }}</span>
+          <span class="audio-time"
+            >{{ formatMmSs(audioCur) }} / {{ formatMmSs(durations[activeItem.url]) }}</span
+          >
           <audio
             :src="activeItem.url"
             preload="metadata"
@@ -169,11 +173,15 @@ export default {
         return { ...it, label: KIND_LABELS[it.kind] + counts[it.kind] }
       })
     },
-    totalMax() { return this.maxImages + this.maxVideos + this.maxAudios },
+    totalMax() {
+      return this.maxImages + this.maxVideos + this.maxAudios
+    },
     canUploadMore() {
-      return this.images.length < this.maxImages
-        || this.videos.length < this.maxVideos
-        || this.audios.length < this.maxAudios
+      return (
+        this.images.length < this.maxImages ||
+        this.videos.length < this.maxVideos ||
+        this.audios.length < this.maxAudios
+      )
     },
     acceptStr() {
       return [...ALLOWED_MIME, ...VIDEO_ALLOWED_MIME, ...AUDIO_ALLOWED_MIME].join(',')
@@ -330,7 +338,7 @@ export default {
       const targetIdx = idx == null ? this.previewIdx : idx
       if (targetIdx < 0) return
       const items = this.$refs.items
-      const list = Array.isArray(items) ? items : (items ? [items] : [])
+      const list = Array.isArray(items) ? items : items ? [items] : []
       const el = list[targetIdx]
       if (!el) return
       const thumb = el.querySelector ? el.querySelector('.thumb') : null
@@ -343,13 +351,23 @@ export default {
     },
     stopAudio() {
       const a = this.getAudioEl()
-      if (a) { try { a.pause() } catch (_) { /* noop */ } }
+      if (a) {
+        try {
+          a.pause()
+        } catch (_) {
+          /* noop */
+        }
+      }
     },
     toggleAudio() {
       const a = this.getAudioEl()
       if (!a) return
       if (a.paused) {
-        a.play().then(() => { this.audioPlaying = true }).catch(() => {})
+        a.play()
+          .then(() => {
+            this.audioPlaying = true
+          })
+          .catch(() => {})
       } else {
         a.pause()
         this.audioPlaying = false
@@ -387,7 +405,9 @@ export default {
       tag.onloadedmetadata = () => {
         this.$set(this.durations, url, tag.duration || 0)
       }
-      tag.onerror = () => { this.$set(this.durations, url, 0) }
+      tag.onerror = () => {
+        this.$set(this.durations, url, 0)
+      }
     },
     formatSec(sec) {
       const s = Math.max(0, Math.round(sec || 0))
@@ -428,152 +448,268 @@ export default {
 
 <style scoped>
 .multi-media-upload {
-  display: block; position: relative;
-  border-radius: 10px; transition: background-color .15s, box-shadow .15s;
+  display: block;
+  position: relative;
+  border-radius: 10px;
+  transition: background-color 0.15s, box-shadow 0.15s;
 }
 .multi-media-upload.is-dragover {
-  background: rgba(64, 158, 255, .06);
+  background: rgba(64, 158, 255, 0.06);
   box-shadow: 0 0 0 2px #409eff inset;
 }
 .media-list {
-  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start;
-  position: relative; min-height: 80px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: flex-start;
+  position: relative;
+  min-height: 80px;
 }
 .drop-mask {
-  position: absolute; inset: -4px;
-  display: flex; align-items: center; justify-content: center;
-  background: rgba(64, 158, 255, .12); color: #1989fa; font-size: 12px;
-  border: 1px dashed #409eff; border-radius: 10px;
+  position: absolute;
+  inset: -4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(64, 158, 255, 0.12);
+  color: #1989fa;
+  font-size: 12px;
+  border: 1px dashed #409eff;
+  border-radius: 10px;
   pointer-events: none;
 }
 
 /* —— 单项缩略 + 标签 —— */
 .media-item {
   position: relative;
-  display: flex; flex-direction: column; align-items: center; gap: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
   width: 56px;
 }
 .media-item .thumb {
   position: relative;
-  width: 56px; height: 56px; border-radius: 8px; overflow: hidden;
-  border: 1px solid #ebeef5; background: #fafbfc; cursor: pointer;
-  transition: border-color .2s, box-shadow .2s;
+  width: 56px;
+  height: 56px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #ebeef5;
+  background: #fafbfc;
+  cursor: pointer;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+.media-item .thumb:hover {
+  border-color: #c0c4cc;
 }
-.media-item .thumb:hover { border-color: #c0c4cc; }
 .media-item.active .thumb {
   border-color: #409eff;
-  box-shadow: 0 0 0 2px rgba(64, 158, 255, .25);
+  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.25);
 }
 .media-item .thumb img,
 .media-item .thumb video {
-  width: 100%; height: 100%; object-fit: cover; display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
 }
 .media-item .thumb .audio-tile {
-  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
-  background: linear-gradient(135deg, #e7f8f3, #b8eedc); color: #2eb389;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #e7f8f3, #b8eedc);
+  color: #2eb389;
+}
+.media-item .thumb .audio-tile i {
+  font-size: 22px;
+}
+.media-item.k-image .thumb-label {
+  color: #606266;
+}
+.media-item.k-video .thumb-label {
+  color: #606266;
+}
+.media-item.k-audio .thumb-label {
+  color: #2eb389;
+}
+.media-item.active .thumb-label {
+  color: #409eff;
+  font-weight: 500;
 }
-.media-item .thumb .audio-tile i { font-size: 22px; }
-.media-item.k-image .thumb-label { color: #606266; }
-.media-item.k-video .thumb-label { color: #606266; }
-.media-item.k-audio .thumb-label { color: #2eb389; }
-.media-item.active .thumb-label { color: #409eff; font-weight: 500; }
 
-.thumb-label { font-size: 12px; color: #606266; line-height: 1; }
+.thumb-label {
+  font-size: 12px;
+  color: #606266;
+  line-height: 1;
+}
 
 /* —— 占位 —— */
 .media-item.placeholder {
-  width: 56px; height: 56px; border-radius: 8px;
-  display: flex; flex-direction: column; align-items: center; justify-content: center;
-  color: #909399; border: 1px dashed #dcdfe6; background: #fafbfc;
-  cursor: pointer; transition: border-color .15s, color .15s;
+  width: 56px;
+  height: 56px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #909399;
+  border: 1px dashed #dcdfe6;
+  background: #fafbfc;
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s;
+}
+.media-item.placeholder:hover {
+  border-color: #409eff;
+  color: #409eff;
+}
+.media-item.placeholder i {
+  font-size: 18px;
+}
+.media-item.placeholder .hint {
+  font-size: 11px;
+  margin-top: 2px;
+  line-height: 1.2;
+  text-align: center;
 }
-.media-item.placeholder:hover { border-color: #409eff; color: #409eff; }
-.media-item.placeholder i { font-size: 18px; }
-.media-item.placeholder .hint { font-size: 11px; margin-top: 2px; line-height: 1.2; text-align: center; }
 
 .remove {
-  position: absolute; top: -4px; right: -4px;
-  color: #fff; background: rgba(0,0,0,.55);
-  border-radius: 50%; cursor: pointer;
-  font-size: 16px; padding: 1px;
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.55);
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 16px;
+  padding: 1px;
   z-index: 2;
 }
-.media-uploader >>> .el-upload { display: block; }
+.media-uploader >>> .el-upload {
+  display: block;
+}
 
 /* —— 浮动预览卡（fixed 定位 + 自身向上偏移） —— */
 .preview-card {
   position: fixed;
   /* left/top 由 :style 指定为缩略图顶边中心，整张卡再向上&左半宽偏移 */
   transform: translate(-50%, calc(-100% - 10px));
-  background: #fff; border-radius: 10px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
   padding: 6px;
   z-index: 9999;
 }
 .preview-card::after {
-  content: ''; position: absolute; top: 100%; left: 50%;
-  transform: translateX(-50%); margin-top: -1px;
-  border: 6px solid transparent; border-top-color: #fff;
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: -1px;
+  border: 6px solid transparent;
+  border-top-color: #fff;
 }
 
 /* 图片 / 视频预览：尺寸统一 */
 .p-image .p-img {
   display: block;
-  width: 280px; max-height: 200px;
+  width: 280px;
+  max-height: 200px;
   object-fit: contain;
   border-radius: 6px;
 }
-.preview-card.p-video { padding: 0; line-height: 0; }
+.preview-card.p-video {
+  padding: 0;
+  line-height: 0;
+}
 .preview-card.p-video .p-video-el {
   display: block;
-  width: 280px; height: 158px;
+  width: 280px;
+  height: 158px;
   object-fit: contain;
-  background: #000; border-radius: 6px;
+  background: #000;
+  border-radius: 6px;
 }
 .p-video-badge {
-  position: absolute; left: 12px; bottom: 12px;
-  background: rgba(0, 0, 0, .55); color: #fff;
-  font-size: 12px; padding: 2px 8px; border-radius: 10px;
+  position: absolute;
+  left: 12px;
+  bottom: 12px;
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 10px;
   line-height: 1.4;
 }
 
 /* 音频播放器 */
-.p-audio { padding: 8px 10px; }
+.p-audio {
+  padding: 8px 10px;
+}
 .p-audio-player {
-  display: flex; align-items: center; gap: 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
   width: 260px;
 }
 .p-audio-player .play-btn {
   flex: 0 0 auto;
-  width: 28px; height: 28px; border-radius: 50%;
-  border: none; padding: 0; cursor: pointer;
-  background: #409eff; color: #fff;
-  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  background: #409eff;
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   font-size: 14px;
-  transition: background-color .15s;
+  transition: background-color 0.15s;
+}
+.p-audio-player .play-btn:hover {
+  background: #66b1ff;
 }
-.p-audio-player .play-btn:hover { background: #66b1ff; }
 .p-audio-player .audio-body {
-  flex: 1 1 auto; min-width: 0;
-  display: flex; flex-direction: column; gap: 4px;
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 .p-audio-player .audio-name {
-  font-size: 12px; color: #303133;
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  font-size: 12px;
+  color: #303133;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   line-height: 1;
 }
 .p-audio-player .prog-bar {
-  width: 100%; height: 4px; border-radius: 2px;
-  background: #ebeef5; cursor: pointer; overflow: hidden;
+  width: 100%;
+  height: 4px;
+  border-radius: 2px;
+  background: #ebeef5;
+  cursor: pointer;
+  overflow: hidden;
 }
 .p-audio-player .prog-fill {
-  height: 100%; background: #409eff; border-radius: 2px;
-  transition: width .1s linear;
+  height: 100%;
+  background: #409eff;
+  border-radius: 2px;
+  transition: width 0.1s linear;
 }
 .p-audio-player .audio-time {
   flex: 0 0 auto;
-  font-size: 11px; color: #909399; font-variant-numeric: tabular-nums;
+  font-size: 11px;
+  color: #909399;
+  font-variant-numeric: tabular-nums;
   line-height: 1;
 }
-.p-audio-player audio { display: none; }
+.p-audio-player audio {
+  display: none;
+}
 </style>
diff --git a/src/views/ai/material/components/PromptGuideDrawer.vue b/src/views/ai/material/components/PromptGuideDrawer.vue
index 265d937..3f34824 100644
--- a/src/views/ai/material/components/PromptGuideDrawer.vue
+++ b/src/views/ai/material/components/PromptGuideDrawer.vue
@@ -44,28 +44,69 @@ export default {
     }
   },
   computed: {
-    isVideo() { return this.mediaType === 'video' },
-    drawerTitle() { return this.isVideo ? '视频提示词指南' : '图片提示词指南' },
-    sections() { return this.isVideo ? PROMPT_GUIDE_SECTIONS_VIDEO : PROMPT_GUIDE_SECTIONS_IMAGE },
-    externalLink() { return this.isVideo ? PROMPT_GUIDE_LINK_VIDEO : PROMPT_GUIDE_LINK_IMAGE }
+    isVideo() {
+      return this.mediaType === 'video'
+    },
+    drawerTitle() {
+      return this.isVideo ? '视频提示词指南' : '图片提示词指南'
+    },
+    sections() {
+      return this.isVideo ? PROMPT_GUIDE_SECTIONS_VIDEO : PROMPT_GUIDE_SECTIONS_IMAGE
+    },
+    externalLink() {
+      return this.isVideo ? PROMPT_GUIDE_LINK_VIDEO : PROMPT_GUIDE_LINK_IMAGE
+    }
   },
   watch: {
-    value(v) { this.visible = v },
-    visible(v) { if (v !== this.value) this.$emit('input', v) }
+    value(v) {
+      this.visible = v
+    },
+    visible(v) {
+      if (v !== this.value) this.$emit('input', v)
+    }
   }
 }
 </script>
 
 <style scoped>
-.guide-drawer { padding: 0 24px 24px; overflow-y: auto; height: calc(100vh - 80px); }
-.external-link { padding: 12px 16px; background: #ecf5ff; border-radius: 4px; margin-bottom: 20px; }
-.external-link a { color: #409eff; text-decoration: none; font-size: 13px; }
-.external-link a:hover { text-decoration: underline; }
-.guide-section { margin-bottom: 24px; }
-.guide-title {
-  font-size: 14px; font-weight: 600; color: #303133; margin: 0 0 8px;
-  padding-left: 8px; border-left: 3px solid #409eff;
+.guide-drawer {
+  padding: 0 24px 24px;
+  overflow-y: auto;
+  height: calc(100vh - 80px);
+}
+.external-link {
+  padding: 12px 16px;
+  background: #ecf5ff;
+  border-radius: 4px;
+  margin-bottom: 20px;
+}
+.external-link a {
+  color: #409eff;
+  text-decoration: none;
+  font-size: 13px;
+}
+.external-link a:hover {
+  text-decoration: underline;
+}
+.guide-section {
+  margin-bottom: 24px;
+}
+.guide-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+  margin: 0 0 8px;
+  padding-left: 8px;
+  border-left: 3px solid #409eff;
+}
+.guide-list {
+  padding-left: 20px;
+  margin: 0;
+  color: #606266;
+  font-size: 13px;
+  line-height: 1.8;
+}
+.guide-list li {
+  margin-bottom: 4px;
 }
-.guide-list { padding-left: 20px; margin: 0; color: #606266; font-size: 13px; line-height: 1.8; }
-.guide-list li { margin-bottom: 4px; }
 </style>
diff --git a/src/views/ai/material/components/PromptInput.vue b/src/views/ai/material/components/PromptInput.vue
index c1326e5..e0d8783 100644
--- a/src/views/ai/material/components/PromptInput.vue
+++ b/src/views/ai/material/components/PromptInput.vue
@@ -33,12 +33,7 @@
         >
           <span class="m-thumb" :class="'k-' + it.kind">
             <img v-if="it.kind === 'image'" :src="it.url" alt="" />
-            <video
-              v-else-if="it.kind === 'video'"
-              :src="it.url"
-              muted
-              preload="metadata"
-            />
+            <video v-else-if="it.kind === 'video'" :src="it.url" muted preload="metadata" />
             <i v-else class="el-icon-headset"></i>
           </span>
           <span class="m-label">{{ it.label }}</span>
@@ -110,7 +105,9 @@ export default {
       if (next === this._lastEmitted) return
       this._syncing = true
       this.renderFromText(next)
-      this.$nextTick(() => { this._syncing = false })
+      this.$nextTick(() => {
+        this._syncing = false
+      })
     },
     items: {
       deep: true,
@@ -249,7 +246,8 @@ export default {
       const itemsMap = new Map(this.items.map((it) => [it.kind + '|' + it.url, it]))
       let mutated = false
       chips.forEach((chip) => {
-        const key = (chip.getAttribute('data-kind') || '') + '|' + (chip.getAttribute('data-url') || '')
+        const key =
+          (chip.getAttribute('data-kind') || '') + '|' + (chip.getAttribute('data-url') || '')
         const item = itemsMap.get(key)
         if (!item) {
           chip.remove()
@@ -286,7 +284,8 @@ export default {
         }
         if (e.key === 'ArrowUp') {
           e.preventDefault()
-          this.mentionActive = (this.mentionActive - 1 + this.mentionFiltered.length) % this.mentionFiltered.length
+          this.mentionActive =
+            (this.mentionActive - 1 + this.mentionFiltered.length) % this.mentionFiltered.length
           return
         }
         if (e.key === 'Enter' && !this.composing) {
@@ -316,7 +315,9 @@ export default {
     },
     onBlur() {
       // 延迟关闭，留给候选项 click 事件抢先触发
-      setTimeout(() => { this.closeMention() }, 150)
+      setTimeout(() => {
+        this.closeMention()
+      }, 150)
     },
     onDocMouseDown(e) {
       if (!this.mentionOpen) return
@@ -379,7 +380,9 @@ export default {
           const cr = r.getBoundingClientRect()
           if (cr && (cr.left || cr.right)) caretLeft = cr.left
         }
-      } catch (e) { /* ignore */ }
+      } catch (e) {
+        /* ignore */
+      }
 
       const itemH = 36
       const padding = 8
@@ -408,7 +411,7 @@ export default {
       if (!sel || sel.rangeCount === 0) return this.closeMention()
       const range = sel.getRangeAt(0)
       const text = node.textContent
-      const endOffset = (range.startContainer === node) ? range.startOffset : text.length
+      const endOffset = range.startContainer === node ? range.startOffset : text.length
       const before = text.slice(0, at)
       const after = text.slice(endOffset)
       const parent = node.parentNode
@@ -441,8 +444,14 @@ export default {
 </script>
 
 <style scoped>
-.prompt-input-wrap { position: relative; width: 100%; }
-.prompt-input-wrap.is-disabled { opacity: .6; pointer-events: none; }
+.prompt-input-wrap {
+  position: relative;
+  width: 100%;
+}
+.prompt-input-wrap.is-disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
 
 .prompt-editor {
   width: 100%;
@@ -510,7 +519,12 @@ export default {
 }
 
 /* host 占位（无可视样式）：只是 mounted 后被搬到 body 的容器 */
-.prompt-mention-host { position: absolute; width: 0; height: 0; overflow: visible; }
+.prompt-mention-host {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: visible;
+}
 </style>
 
 <!-- 弹窗会被 mounted 时搬到 document.body，scoped 选择器不再生效，所以这里用非 scoped 全局样式 -->
@@ -525,7 +539,7 @@ export default {
   background: #fff;
   border: 1px solid #ebeef5;
   border-radius: 6px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
   padding: 4px 0;
 }
 .prompt-mention-pop .mention-item {
@@ -563,5 +577,7 @@ export default {
   font-size: 13px;
   color: #909399;
 }
-.prompt-mention-pop .mention-item .m-label { flex: 1; }
+.prompt-mention-pop .mention-item .m-label {
+  flex: 1;
+}
 </style>
diff --git a/src/views/ai/material/components/RefImageUpload.vue b/src/views/ai/material/components/RefImageUpload.vue
index 428d7df..6324d9e 100644
--- a/src/views/ai/material/components/RefImageUpload.vue
+++ b/src/views/ai/material/components/RefImageUpload.vue
@@ -30,7 +30,11 @@
             <i class="el-icon-headset"></i>
           </div>
         </div>
-        <i v-show="hoverIdx === idx || previewIdx === idx" class="el-icon-error remove" @click.stop="remove(idx)"></i>
+        <i
+          v-show="hoverIdx === idx || previewIdx === idx"
+          class="el-icon-error remove"
+          @click.stop="remove(idx)"
+        ></i>
       </div>
 
       <el-upload
@@ -47,7 +51,9 @@
         <div class="ref-item placeholder">
           <i v-if="!uploading" :class="placeholderIcon"></i>
           <i v-else class="el-icon-loading"></i>
-          <div class="hint">{{ urls.length === 0 ? placeholderLabel : `${urls.length}/${max}` }}</div>
+          <div class="hint">
+            {{ urls.length === 0 ? placeholderLabel : `${urls.length}/${max}` }}
+          </div>
         </div>
       </el-upload>
 
@@ -87,7 +93,9 @@
               <div class="prog-fill" :style="{ width: audioProgressPct + '%' }"></div>
             </div>
           </div>
-          <span class="audio-time">{{ formatMmSs(audioCur) }} / {{ formatMmSs(durations[urls[previewIdx]]) }}</span>
+          <span class="audio-time"
+            >{{ formatMmSs(audioCur) }} / {{ formatMmSs(durations[urls[previewIdx]]) }}</span
+          >
           <audio
             :src="urls[previewIdx]"
             preload="metadata"
@@ -159,7 +167,9 @@ export default {
       if (this.kind === 'audio') return VIDEO_MAX_REF_AUDIOS
       return MAX_REF_IMAGES
     },
-    acceptStr() { return this.allowedMime.join(',') },
+    acceptStr() {
+      return this.allowedMime.join(',')
+    },
     placeholderIcon() {
       if (this.kind === 'video') return 'el-icon-video-camera'
       if (this.kind === 'audio') return 'el-icon-microphone'
@@ -195,14 +205,17 @@ export default {
     }
   },
   watch: {
-    value(v) { this.urls = [...v] }
+    value(v) {
+      this.urls = [...v]
+    }
   },
   methods: {
     beforeUpload(file) {
       if (this.allowedMime.length && !this.allowedMime.includes(file.type)) {
-        const tip = this.kind === 'video'
-          ? '视频格式仅支持 MP4 / MOV'
-          : this.kind === 'audio'
+        const tip =
+          this.kind === 'video'
+            ? '视频格式仅支持 MP4 / MOV'
+            : this.kind === 'audio'
             ? '音频格式仅支持 MP3 / WAV'
             : '图片格式仅支持 JPEG/PNG/WEBP/BMP/TIFF/GIF'
         this.$message.error(tip)
@@ -285,7 +298,7 @@ export default {
       const targetIdx = idx == null ? this.previewIdx : idx
       if (targetIdx < 0) return
       const items = this.$refs.items
-      const list = Array.isArray(items) ? items : (items ? [items] : [])
+      const list = Array.isArray(items) ? items : items ? [items] : []
       const el = list[targetIdx]
       if (!el) return
       const thumb = el.querySelector ? el.querySelector('.thumb') : null
@@ -298,13 +311,23 @@ export default {
     },
     stopAudio() {
       const a = this.getAudioEl()
-      if (a) { try { a.pause() } catch (_) { /* noop */ } }
+      if (a) {
+        try {
+          a.pause()
+        } catch (_) {
+          /* noop */
+        }
+      }
     },
     toggleAudio() {
       const a = this.getAudioEl()
       if (!a) return
       if (a.paused) {
-        a.play().then(() => { this.audioPlaying = true }).catch(() => {})
+        a.play()
+          .then(() => {
+            this.audioPlaying = true
+          })
+          .catch(() => {})
       } else {
         a.pause()
         this.audioPlaying = false
@@ -338,8 +361,12 @@ export default {
       tag.preload = 'metadata'
       tag.muted = true
       tag.src = url
-      tag.onloadedmetadata = () => { this.$set(this.durations, url, tag.duration || 0) }
-      tag.onerror = () => { this.$set(this.durations, url, 0) }
+      tag.onloadedmetadata = () => {
+        this.$set(this.durations, url, tag.duration || 0)
+      }
+      tag.onerror = () => {
+        this.$set(this.durations, url, 0)
+      }
     },
     formatSec(sec) {
       const s = Math.max(0, Math.round(sec || 0))
@@ -387,132 +414,236 @@ export default {
 
 <style scoped>
 .ref-img-upload {
-  display: inline-block; position: relative;
-  border-radius: 10px; transition: background-color .15s, box-shadow .15s;
+  display: inline-block;
+  position: relative;
+  border-radius: 10px;
+  transition: background-color 0.15s, box-shadow 0.15s;
 }
 .ref-img-upload.is-dragover {
-  background: rgba(64, 158, 255, .06);
+  background: rgba(64, 158, 255, 0.06);
   box-shadow: 0 0 0 2px #409eff inset;
 }
-.ref-list { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; position: relative; }
+.ref-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  position: relative;
+}
 .drop-mask {
-  position: absolute; inset: -4px;
-  display: flex; align-items: center; justify-content: center;
-  background: rgba(64, 158, 255, .12); color: #1989fa; font-size: 12px;
-  border: 1px dashed #409eff; border-radius: 10px;
+  position: absolute;
+  inset: -4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(64, 158, 255, 0.12);
+  color: #1989fa;
+  font-size: 12px;
+  border: 1px dashed #409eff;
+  border-radius: 10px;
   pointer-events: none;
 }
 .ref-item {
-  position: relative; width: 56px;
+  position: relative;
+  width: 56px;
 }
 .ref-item .thumb {
-  position: relative; width: 56px; height: 56px; border-radius: 8px; overflow: hidden;
-  border: 1px solid #ebeef5; background: #fafbfc; cursor: pointer;
-  transition: border-color .2s, box-shadow .2s;
+  position: relative;
+  width: 56px;
+  height: 56px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #ebeef5;
+  background: #fafbfc;
+  cursor: pointer;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+.ref-item .thumb:hover {
+  border-color: #c0c4cc;
 }
-.ref-item .thumb:hover { border-color: #c0c4cc; }
 .ref-item.active .thumb {
   border-color: #409eff;
-  box-shadow: 0 0 0 2px rgba(64, 158, 255, .25);
+  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.25);
 }
 .ref-item .thumb img,
-.ref-item .thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
-.ref-item .thumb .audio-tile {
-  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
-  background: linear-gradient(135deg, #e7f8f3, #b8eedc); color: #2eb389;
+.ref-item .thumb video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.ref-item .thumb .audio-tile {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #e7f8f3, #b8eedc);
+  color: #2eb389;
+}
+.ref-item .thumb .audio-tile i {
+  font-size: 22px;
 }
-.ref-item .thumb .audio-tile i { font-size: 22px; }
 
 .ref-item.placeholder {
-  width: 56px; height: 56px;
-  display: flex; flex-direction: column; align-items: center; justify-content: center;
-  color: #909399; border: 1px dashed #dcdfe6; background: #fafbfc; border-radius: 8px;
-  cursor: pointer; transition: border-color .15s, color .15s;
+  width: 56px;
+  height: 56px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #909399;
+  border: 1px dashed #dcdfe6;
+  background: #fafbfc;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s;
+}
+.ref-item.placeholder:hover {
+  border-color: #409eff;
+  color: #409eff;
+}
+.ref-item.placeholder i {
+  font-size: 18px;
+}
+.ref-item.placeholder .hint {
+  font-size: 11px;
+  margin-top: 2px;
 }
-.ref-item.placeholder:hover { border-color: #409eff; color: #409eff; }
-.ref-item.placeholder i { font-size: 18px; }
-.ref-item.placeholder .hint { font-size: 11px; margin-top: 2px; }
 .remove {
-  position: absolute; top: -4px; right: -4px;
-  color: #fff; background: rgba(0,0,0,.55);
-  border-radius: 50%; cursor: pointer;
-  font-size: 16px; padding: 1px;
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.55);
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 16px;
+  padding: 1px;
   z-index: 2;
 }
-.ref-uploader >>> .el-upload { display: block; }
+.ref-uploader >>> .el-upload {
+  display: block;
+}
 
 /* —— 浮动预览卡（fixed 定位 + 自身向上偏移） —— */
 .preview-card {
   position: fixed;
   transform: translate(-50%, calc(-100% - 10px));
-  background: #fff; border-radius: 10px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
   padding: 6px;
   z-index: 9999;
 }
 .preview-card::after {
-  content: ''; position: absolute; top: 100%; left: 50%;
-  transform: translateX(-50%); margin-top: -1px;
-  border: 6px solid transparent; border-top-color: #fff;
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: -1px;
+  border: 6px solid transparent;
+  border-top-color: #fff;
 }
 /* 图片 / 视频预览：尺寸统一 */
 .p-image .p-img {
   display: block;
-  width: 280px; max-height: 200px;
+  width: 280px;
+  max-height: 200px;
   object-fit: contain;
   border-radius: 6px;
 }
-.preview-card.p-video { padding: 0; line-height: 0; }
+.preview-card.p-video {
+  padding: 0;
+  line-height: 0;
+}
 .preview-card.p-video .p-video-el {
   display: block;
-  width: 280px; height: 158px;
+  width: 280px;
+  height: 158px;
   object-fit: contain;
-  background: #000; border-radius: 6px;
+  background: #000;
+  border-radius: 6px;
 }
 .p-video-badge {
-  position: absolute; left: 12px; bottom: 12px;
-  background: rgba(0, 0, 0, .55); color: #fff;
-  font-size: 12px; padding: 2px 8px; border-radius: 10px;
+  position: absolute;
+  left: 12px;
+  bottom: 12px;
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 10px;
   line-height: 1.4;
 }
 
 /* 音频播放器 */
-.p-audio { padding: 8px 10px; }
+.p-audio {
+  padding: 8px 10px;
+}
 .p-audio-player {
-  display: flex; align-items: center; gap: 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
   width: 260px;
 }
 .p-audio-player .play-btn {
   flex: 0 0 auto;
-  width: 28px; height: 28px; border-radius: 50%;
-  border: none; padding: 0; cursor: pointer;
-  background: #409eff; color: #fff;
-  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  background: #409eff;
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   font-size: 14px;
-  transition: background-color .15s;
+  transition: background-color 0.15s;
+}
+.p-audio-player .play-btn:hover {
+  background: #66b1ff;
 }
-.p-audio-player .play-btn:hover { background: #66b1ff; }
 .p-audio-player .audio-body {
-  flex: 1 1 auto; min-width: 0;
-  display: flex; flex-direction: column; gap: 4px;
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 .p-audio-player .audio-name {
-  font-size: 12px; color: #303133;
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  font-size: 12px;
+  color: #303133;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   line-height: 1;
 }
 .p-audio-player .prog-bar {
-  width: 100%; height: 4px; border-radius: 2px;
-  background: #ebeef5; cursor: pointer; overflow: hidden;
+  width: 100%;
+  height: 4px;
+  border-radius: 2px;
+  background: #ebeef5;
+  cursor: pointer;
+  overflow: hidden;
 }
 .p-audio-player .prog-fill {
-  height: 100%; background: #409eff; border-radius: 2px;
-  transition: width .1s linear;
+  height: 100%;
+  background: #409eff;
+  border-radius: 2px;
+  transition: width 0.1s linear;
 }
 .p-audio-player .audio-time {
   flex: 0 0 auto;
-  font-size: 11px; color: #909399; font-variant-numeric: tabular-nums;
+  font-size: 11px;
+  color: #909399;
+  font-variant-numeric: tabular-nums;
   line-height: 1;
 }
-.p-audio-player audio { display: none; }
+.p-audio-player audio {
+  display: none;
+}
 </style>
diff --git a/src/views/ai/material/components/SizePopover.vue b/src/views/ai/material/components/SizePopover.vue
index c59d059..1fcba4e 100644
--- a/src/views/ai/material/components/SizePopover.vue
+++ b/src/views/ai/material/components/SizePopover.vue
@@ -1,10 +1,5 @@
 <template>
-  <el-popover
-    placement="top"
-    width="480"
-    trigger="click"
-    popper-class="size-popover"
-  >
+  <el-popover placement="top" width="480" trigger="click" popper-class="size-popover">
     <div class="size-popover-content">
       <div class="section">
         <div class="section-title">分辨率</div>
@@ -17,7 +12,9 @@
             placement="top"
           >
             <span>
-              <el-radio-button :label="r.value" :disabled="r.disabled">{{ r.label }}</el-radio-button>
+              <el-radio-button :label="r.value" :disabled="r.disabled">{{
+                r.label
+              }}</el-radio-button>
             </span>
           </el-tooltip>
         </el-radio-group>
@@ -45,7 +42,11 @@
           <el-input v-model.number="innerW" placeholder="W" size="small" @change="onCustomChange">
             <template slot="prepend">W</template>
           </el-input>
-          <i :class="lockOn ? 'el-icon-link' : 'el-icon-close'" class="link-icon" @click="lockOn = !lockOn" />
+          <i
+            :class="lockOn ? 'el-icon-link' : 'el-icon-close'"
+            class="link-icon"
+            @click="lockOn = !lockOn"
+          />
           <el-input v-model.number="innerH" placeholder="H" size="small" @change="onCustomChange">
             <template slot="prepend">H</template>
           </el-input>
@@ -106,10 +107,18 @@ export default {
     }
   },
   watch: {
-    resolution(v) { this.innerResolution = v },
-    ratio(v) { this.innerRatio = v },
-    customW(v) { this.innerW = Number(v) || 0 },
-    customH(v) { this.innerH = Number(v) || 0 }
+    resolution(v) {
+      this.innerResolution = v
+    },
+    ratio(v) {
+      this.innerRatio = v
+    },
+    customW(v) {
+      this.innerW = Number(v) || 0
+    },
+    customH(v) {
+      this.innerH = Number(v) || 0
+    }
   },
   methods: {
     onRatioClick(v) {
@@ -124,7 +133,8 @@ export default {
       this.emitChange()
     },
     onChange() {
-      const sizeStr = SIZE_MAP[this.innerResolution] && SIZE_MAP[this.innerResolution][this.innerRatio]
+      const sizeStr =
+        SIZE_MAP[this.innerResolution] && SIZE_MAP[this.innerResolution][this.innerRatio]
       if (sizeStr) {
         const { w, h } = parseSize(sizeStr)
         this.innerW = w
@@ -152,30 +162,105 @@ export default {
 </script>
 
 <style scoped>
-.size-popover-content { padding: 4px; }
-.section { margin-bottom: 16px; }
-.section-title { font-size: 13px; color: #606266; margin-bottom: 8px; }
-.ratio-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
-.ratio-item {
-  border: 1px solid #dcdfe6; border-radius: 4px; padding: 6px 0;
-  display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: all .2s;
+.size-popover-content {
+  padding: 4px;
+}
+.section {
+  margin-bottom: 16px;
+}
+.section-title {
+  font-size: 13px;
+  color: #606266;
+  margin-bottom: 8px;
+}
+.ratio-grid {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 8px;
+}
+.ratio-item {
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 6px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.ratio-item:hover {
+  border-color: #409eff;
+}
+.ratio-item.active {
+  border-color: #409eff;
+  color: #409eff;
+  background: #ecf5ff;
+}
+.ratio-icon {
+  width: 22px;
+  height: 22px;
+  border: 1.5px solid currentColor;
+  border-radius: 2px;
+  margin-bottom: 4px;
+}
+.r-1-1 {
+  width: 18px;
+  height: 18px;
+}
+.r-3-4 {
+  width: 14px;
+  height: 18px;
+}
+.r-4-3 {
+  width: 18px;
+  height: 14px;
+}
+.r-16-9 {
+  width: 22px;
+  height: 12px;
+}
+.r-9-16 {
+  width: 12px;
+  height: 22px;
+}
+.r-3-2 {
+  width: 21px;
+  height: 14px;
+}
+.r-2-3 {
+  width: 14px;
+  height: 21px;
+}
+.r-21-9 {
+  width: 24px;
+  height: 10px;
+}
+.ratio-label {
+  font-size: 11px;
+}
+.size-inputs {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.size-inputs .el-input {
+  flex: 1;
+}
+.link-icon {
+  font-size: 18px;
+  color: #909399;
+  cursor: pointer;
+}
+.error-tip {
+  color: #f56c6c;
+  font-size: 12px;
+  margin-top: 4px;
+}
+.btn-chip {
+  font-weight: 400;
+}
+.chip-divider {
+  margin: 0 4px;
+  color: #c0c4cc;
 }
-.ratio-item:hover { border-color: #409eff; }
-.ratio-item.active { border-color: #409eff; color: #409eff; background: #ecf5ff; }
-.ratio-icon { width: 22px; height: 22px; border: 1.5px solid currentColor; border-radius: 2px; margin-bottom: 4px; }
-.r-1-1 { width: 18px; height: 18px; }
-.r-3-4 { width: 14px; height: 18px; }
-.r-4-3 { width: 18px; height: 14px; }
-.r-16-9 { width: 22px; height: 12px; }
-.r-9-16 { width: 12px; height: 22px; }
-.r-3-2 { width: 21px; height: 14px; }
-.r-2-3 { width: 14px; height: 21px; }
-.r-21-9 { width: 24px; height: 10px; }
-.ratio-label { font-size: 11px; }
-.size-inputs { display: flex; align-items: center; gap: 8px; }
-.size-inputs .el-input { flex: 1; }
-.link-icon { font-size: 18px; color: #909399; cursor: pointer; }
-.error-tip { color: #f56c6c; font-size: 12px; margin-top: 4px; }
-.btn-chip { font-weight: 400; }
-.chip-divider { margin: 0 4px; color: #c0c4cc; }
 </style>
diff --git a/src/views/ai/material/components/TemplateGallery.vue b/src/views/ai/material/components/TemplateGallery.vue
index 016c498..2a7bd60 100644
--- a/src/views/ai/material/components/TemplateGallery.vue
+++ b/src/views/ai/material/components/TemplateGallery.vue
@@ -27,7 +27,10 @@
             :class="{ 'no-cover': !coverOf(t) && !previewVideoOf(t) }"
             :style="coverOf(t) ? { backgroundImage: `url(${coverOf(t)})` } : null"
           >
-            <i v-if="!coverOf(t) && !previewVideoOf(t)" class="el-icon-picture-outline cover-fallback"></i>
+            <i
+              v-if="!coverOf(t) && !previewVideoOf(t)"
+              class="el-icon-picture-outline cover-fallback"
+            ></i>
 
             <!-- 视频模板：默认展示首帧（preload=metadata），hover 自动播放；无静态封面时常驻可见 -->
             <video
@@ -67,7 +70,8 @@
                 icon="el-icon-magic-stick"
                 round
                 @click="useTemplate(t)"
-              >{{ isVideoTpl(t) ? '立即体验' : '做同款' }}</el-button>
+                >{{ isVideoTpl(t) ? '立即体验' : '做同款' }}</el-button
+              >
             </div>
           </div>
         </div>
@@ -108,8 +112,13 @@ export default {
         if (v && this.templates.length === 0) this.fetch()
       }
     },
-    visible(v) { if (v !== this.value) this.$emit('input', v) },
-    mediaType() { this.templates = []; if (this.visible) this.fetch() }
+    visible(v) {
+      if (v !== this.value) this.$emit('input', v)
+    },
+    mediaType() {
+      this.templates = []
+      if (this.visible) this.fetch()
+    }
   },
   methods: {
     async fetch() {
@@ -128,10 +137,16 @@ export default {
     },
     previewVideoOf(t) {
       if (!t) return ''
-      const raw = t.preview_video_url || (() => {
-        const outputs = Array.isArray(t.output_images) ? t.output_images : []
-        return outputs.find((u) => typeof u === 'string' && /\.(mp4|mov|m4v|webm|mkv|avi)(\?|$)/i.test(u)) || ''
-      })()
+      const raw =
+        t.preview_video_url ||
+        (() => {
+          const outputs = Array.isArray(t.output_images) ? t.output_images : []
+          return (
+            outputs.find(
+              (u) => typeof u === 'string' && /\.(mp4|mov|m4v|webm|mkv|avi)(\?|$)/i.test(u)
+            ) || ''
+          )
+        })()
       if (!raw) return ''
       // 没有静态封面时追加 #t=0.1，强制浏览器 seek 到首帧解码作为显示帧（避免黑屏）
       if (this.coverOf(t)) return raw
@@ -139,7 +154,8 @@ export default {
     },
     coverOf(t) {
       if (!t) return ''
-      const isVideoUrl = (u) => typeof u === 'string' && /\.(mp4|mov|m4v|webm|mkv|avi)(\?|$)/i.test(u)
+      const isVideoUrl = (u) =>
+        typeof u === 'string' && /\.(mp4|mov|m4v|webm|mkv|avi)(\?|$)/i.test(u)
       const isImageUrl = (u) => typeof u === 'string' && u && !isVideoUrl(u)
       if (isImageUrl(t.cover_url)) return t.cover_url
       const pickFirstImage = (arr) => {
@@ -169,9 +185,18 @@ export default {
           if (!v || !v.tagName) return
           const tid = Number(v.dataset && v.dataset.tid)
           if (enter && tid === id) {
-            try { v.currentTime = 0; v.play() } catch (_) { /* ignore autoplay errors */ }
+            try {
+              v.currentTime = 0
+              v.play()
+            } catch (_) {
+              /* ignore autoplay errors */
+            }
           } else {
-            try { v.pause() } catch (_) { /* noop */ }
+            try {
+              v.pause()
+            } catch (_) {
+              /* noop */
+            }
           }
         })
       })
@@ -184,7 +209,9 @@ export default {
       this.$emit('select', t)
       this.close()
     },
-    close() { this.visible = false }
+    close() {
+      this.visible = false
+    }
   }
 }
 </script>
@@ -192,7 +219,9 @@ export default {
 <style scoped>
 .tpl-panel {
   position: absolute;
-  left: 24px; right: 24px; bottom: 100%;
+  left: 24px;
+  right: 24px;
+  bottom: 100%;
   margin-bottom: 12px;
   background: #fff;
   border-radius: 12px;
@@ -201,16 +230,42 @@ export default {
   padding: 14px 16px 16px;
   z-index: 11;
 }
-.tpl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
-.tpl-title-tag {
-  background: #303133; color: #fff; font-size: 12px;
-  padding: 4px 10px; border-radius: 6px; font-weight: 600;
+.tpl-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+.tpl-title-tag {
+  background: #303133;
+  color: #fff;
+  font-size: 12px;
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-weight: 600;
+}
+.tpl-head-right {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  color: #606266;
+  font-size: 13px;
+}
+.tpl-guide {
+  cursor: pointer;
+  color: #606266;
+}
+.tpl-guide:hover {
+  color: #409eff;
+}
+.tpl-close {
+  font-size: 18px;
+  color: #909399;
+  cursor: pointer;
+}
+.tpl-close:hover {
+  color: #303133;
 }
-.tpl-head-right { display: flex; align-items: center; gap: 14px; color: #606266; font-size: 13px; }
-.tpl-guide { cursor: pointer; color: #606266; }
-.tpl-guide:hover { color: #409eff; }
-.tpl-close { font-size: 18px; color: #909399; cursor: pointer; }
-.tpl-close:hover { color: #303133; }
 
 .tpl-grid {
   display: grid;
@@ -220,9 +275,16 @@ export default {
   overflow-y: auto;
   padding-right: 4px;
 }
-.tpl-grid::-webkit-scrollbar { width: 6px; }
-.tpl-grid::-webkit-scrollbar-thumb { background: #dcdfe6; border-radius: 3px; }
-.tpl-grid::-webkit-scrollbar-thumb:hover { background: #c0c4cc; }
+.tpl-grid::-webkit-scrollbar {
+  width: 6px;
+}
+.tpl-grid::-webkit-scrollbar-thumb {
+  background: #dcdfe6;
+  border-radius: 3px;
+}
+.tpl-grid::-webkit-scrollbar-thumb:hover {
+  background: #c0c4cc;
+}
 .tpl-card {
   border-radius: 10px;
   overflow: hidden;
@@ -239,62 +301,130 @@ export default {
   overflow: hidden;
 }
 .tpl-cover.no-cover {
-  display: flex; align-items: center; justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   background: linear-gradient(135deg, #f0f2f5, #e4e7ed);
 }
-.cover-fallback { font-size: 36px; color: #c0c4cc; }
+.cover-fallback {
+  font-size: 36px;
+  color: #c0c4cc;
+}
 .tpl-title-chip {
-  position: absolute; left: 10px; top: 10px;
-  background: rgba(0, 0, 0, 0.55); color: #fff;
-  font-size: 12px; padding: 3px 10px; border-radius: 6px;
-  max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  font-size: 12px;
+  padding: 3px 10px;
+  border-radius: 6px;
+  max-width: 70%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .tpl-type-badge {
-  position: absolute; right: 10px; top: 10px;
-  display: inline-flex; align-items: center; gap: 4px;
-  background: rgba(0, 0, 0, 0.55); color: #fff;
-  font-size: 12px; padding: 3px 8px; border-radius: 6px;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  font-size: 12px;
+  padding: 3px 8px;
+  border-radius: 6px;
+}
+.tpl-type-badge.is-video {
+  background: rgba(64, 158, 255, 0.85);
+}
+.tpl-type-badge.is-audio {
+  background: rgba(230, 162, 60, 0.85);
 }
-.tpl-type-badge.is-video { background: rgba(64, 158, 255, .85); }
-.tpl-type-badge.is-audio { background: rgba(230, 162, 60, .85); }
 .tpl-type-badge .audio-dot {
-  width: 6px; height: 6px; border-radius: 50%; background: #f56c6c;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #f56c6c;
 }
 .audio-toggle {
-  position: absolute; right: 10px; bottom: 10px;
-  background: rgba(0, 0, 0, 0.55); color: #fff;
-  font-size: 14px; padding: 5px; border-radius: 50%; cursor: pointer;
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  font-size: 14px;
+  padding: 5px;
+  border-radius: 50%;
+  cursor: pointer;
   z-index: 4;
 }
-.audio-toggle:hover { background: rgba(0, 0, 0, 0.8); }
+.audio-toggle:hover {
+  background: rgba(0, 0, 0, 0.8);
+}
 
 .tpl-video {
-  position: absolute; inset: 0;
-  width: 100%; height: 100%; object-fit: cover;
-  opacity: 0; transition: opacity .2s;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transition: opacity 0.2s;
   z-index: 2;
   background: #000;
 }
 /* 没有静态封面时把视频常驻可见，靠 preload=metadata 显示首帧 */
-.tpl-video.as-poster { opacity: 1; }
-.tpl-video.playing { opacity: 1; }
+.tpl-video.as-poster {
+  opacity: 1;
+}
+.tpl-video.playing {
+  opacity: 1;
+}
 
 .tpl-mask {
-  position: absolute; inset: 0;
-  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 50%, rgba(0,0,0,0) 100%);
-  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
-  padding: 10px 10px 14px; gap: 10px;
-  opacity: 0; transition: opacity .2s;
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    to top,
+    rgba(0, 0, 0, 0.85) 0%,
+    rgba(0, 0, 0, 0.4) 50%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 10px 10px 14px;
+  gap: 10px;
+  opacity: 0;
+  transition: opacity 0.2s;
   z-index: 3;
 }
-.tpl-cover:hover .tpl-mask { opacity: 1; }
+.tpl-cover:hover .tpl-mask {
+  opacity: 1;
+}
 .tpl-prompt {
   width: 100%;
-  font-size: 12px; line-height: 1.5; color: #fff;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #fff;
   text-align: left;
-  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
-.tpl-fade-enter-active, .tpl-fade-leave-active { transition: opacity .15s, transform .15s; }
-.tpl-fade-enter, .tpl-fade-leave-to { opacity: 0; transform: translateY(8px); }
+.tpl-fade-enter-active,
+.tpl-fade-leave-active {
+  transition: opacity 0.15s, transform 0.15s;
+}
+.tpl-fade-enter,
+.tpl-fade-leave-to {
+  opacity: 0;
+  transform: translateY(8px);
+}
 </style>
diff --git a/src/views/ai/material/components/VideoInputBar.vue b/src/views/ai/material/components/VideoInputBar.vue
index 508c048..495f2aa 100644
--- a/src/views/ai/material/components/VideoInputBar.vue
+++ b/src/views/ai/material/components/VideoInputBar.vue
@@ -42,12 +42,14 @@
         type="text"
         icon="el-icon-magic-stick"
         @click="$emit('open-template')"
-      >模板</el-button>
+        >模板</el-button
+      >
     </div>
 
     <!-- 提示文案：仅在参考生成且有素材时显示 -->
     <div v-if="form.mode === 'reference' && hasAnyRef" class="ref-tip">
-      使用 @ 可快速引用上传的文件，如：参考 @视频1 中的动作，生成 @图片2 和 @图片3 中的角色打斗的视频。
+      使用 @ 可快速引用上传的文件，如：参考 @视频1 中的动作，生成 @图片2 和 @图片3
+      中的角色打斗的视频。
     </div>
 
     <!-- 工具条 -->
@@ -109,7 +111,9 @@
                   class="seg-cell"
                   :class="{ active: form.resolution === r.value }"
                   @click="form.resolution = r.value"
-                >{{ r.label }}</div>
+                >
+                  {{ r.label }}
+                </div>
               </div>
             </div>
 
@@ -121,12 +125,16 @@
                   class="seg-cell"
                   :class="{ active: !form.durationSmart }"
                   @click="form.durationSmart = false"
-                >按秒数</div>
+                >
+                  按秒数
+                </div>
                 <div
                   class="seg-cell"
                   :class="{ active: form.durationSmart }"
                   @click="form.durationSmart = true"
-                >智能时长</div>
+                >
+                  智能时长
+                </div>
               </div>
               <div v-if="!form.durationSmart" class="slider-row">
                 <el-slider
@@ -179,10 +187,13 @@
             :plain="!form.generateAudio"
             icon="el-icon-headset"
             @click="form.generateAudio = !form.generateAudio"
-          >{{ form.generateAudio ? '有声' : '输出声音' }}</el-button>
+            >{{ form.generateAudio ? '有声' : '输出声音' }}</el-button
+          >
         </el-tooltip>
 
-        <el-button size="small" plain icon="el-icon-setting" @click="$emit('open-settings')">详细设置</el-button>
+        <el-button size="small" plain icon="el-icon-setting" @click="$emit('open-settings')"
+          >详细设置</el-button
+        >
       </div>
 
       <div class="toolbar-right">
@@ -250,23 +261,42 @@ export default {
     }
   },
   computed: {
-    videoRatios() { return VIDEO_RATIOS },
-    videoResolutions() { return VIDEO_RESOLUTIONS },
-    videoDurations() { return VIDEO_DURATIONS },
-    durationMin() { return VIDEO_DURATIONS[0] || 4 },
-    durationMax() { return VIDEO_DURATIONS[VIDEO_DURATIONS.length - 1] || 15 },
-    ratioLabel() { return this.form.smartRatio ? '智能比例' : this.form.ratio },
-    durationLabel() { return this.form.durationSmart ? '智能时长' : `${this.form.duration}秒` },
-    modeLabel() { return MODE_LABELS[this.form.mode] || '参考生成' },
+    videoRatios() {
+      return VIDEO_RATIOS
+    },
+    videoResolutions() {
+      return VIDEO_RESOLUTIONS
+    },
+    videoDurations() {
+      return VIDEO_DURATIONS
+    },
+    durationMin() {
+      return VIDEO_DURATIONS[0] || 4
+    },
+    durationMax() {
+      return VIDEO_DURATIONS[VIDEO_DURATIONS.length - 1] || 15
+    },
+    ratioLabel() {
+      return this.form.smartRatio ? '智能比例' : this.form.ratio
+    },
+    durationLabel() {
+      return this.form.durationSmart ? '智能时长' : `${this.form.duration}秒`
+    },
+    modeLabel() {
+      return MODE_LABELS[this.form.mode] || '参考生成'
+    },
     promptPlaceholder() {
       return this.form.mode === 'first_last'
         ? '描述首尾帧之间的动作，比如：从左侧缓慢推近...'
         : '描述你想生成的视频，比如：海浪拍打沙滩，镜头缓慢推近...'
     },
     hasAnyRef() {
-      return (this.form.referenceImages || []).length
-        + (this.form.referenceVideos || []).length
-        + (this.form.referenceAudios || []).length > 0
+      return (
+        (this.form.referenceImages || []).length +
+          (this.form.referenceVideos || []).length +
+          (this.form.referenceAudios || []).length >
+        0
+      )
     },
     /** 提示词 @ 引用候选：按 图片N / 视频N / 音频N 编号的扁平列表 */
     refItems() {
@@ -277,12 +307,20 @@ export default {
       })
     },
     firstFrameWrap: {
-      get() { return this.form.imageStart ? [this.form.imageStart] : [] },
-      set(v) { this.form.imageStart = (v && v[0]) || '' }
+      get() {
+        return this.form.imageStart ? [this.form.imageStart] : []
+      },
+      set(v) {
+        this.form.imageStart = (v && v[0]) || ''
+      }
     },
     lastFrameWrap: {
-      get() { return this.form.imageEnd ? [this.form.imageEnd] : [] },
-      set(v) { this.form.imageEnd = (v && v[0]) || '' }
+      get() {
+        return this.form.imageEnd ? [this.form.imageEnd] : []
+      },
+      set(v) {
+        this.form.imageEnd = (v && v[0]) || ''
+      }
     }
   },
   watch: {
@@ -295,7 +333,9 @@ export default {
         if (JSON.stringify(next) === JSON.stringify(this.form)) return
         this._syncing = true
         this.form = next
-        this.$nextTick(() => { this._syncing = false })
+        this.$nextTick(() => {
+          this._syncing = false
+        })
       }
     },
     form: {
@@ -304,7 +344,9 @@ export default {
         if (this._syncing) return
         this._syncing = true
         this.$emit('input', { ...v })
-        this.$nextTick(() => { this._syncing = false })
+        this.$nextTick(() => {
+          this._syncing = false
+        })
       }
     }
   },
@@ -324,7 +366,9 @@ export default {
       }
       this.form = next
       this.$emit('input', { ...next })
-      this.$nextTick(() => { this._syncing = false })
+      this.$nextTick(() => {
+        this._syncing = false
+      })
     },
     onPickRatio(v) {
       this.form.ratio = v
@@ -338,9 +382,9 @@ export default {
       const map = {
         '21:9': 'r-2109',
         '16:9': 'r-169',
-        '4:3':  'r-43',
-        '1:1':  'r-11',
-        '3:4':  'r-34',
+        '4:3': 'r-43',
+        '1:1': 'r-11',
+        '3:4': 'r-34',
         '9:16': 'r-916'
       }
       return 'ratio-shape ' + (map[v] || 'r-11')
@@ -365,111 +409,260 @@ export default {
 </script>
 
 <style scoped>
-.video-input-bar { width: 100%; }
-.bar-top { display: flex; align-items: flex-start; gap: 12px; }
-.ref-area { flex-shrink: 0; min-width: 80px; }
-
-.frame-rows { display: flex; align-items: center; gap: 6px; }
-.frame-col { display: flex; flex-direction: column; align-items: center; }
-.frame-label { font-size: 12px; color: #909399; margin-top: 4px; }
-.frame-label .required { color: #f56c6c; }
-.divider { font-size: 18px; color: #c0c4cc; }
-
-.prompt-input { flex: 1; }
-.prompt-input >>> .el-textarea__inner {
-  border: none; box-shadow: none; padding: 6px 4px; font-size: 14px;
-  background: transparent; resize: none;
+.video-input-bar {
+  width: 100%;
+}
+.bar-top {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+.ref-area {
+  flex-shrink: 0;
+  min-width: 80px;
+}
+
+.frame-rows {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.frame-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.frame-label {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 4px;
+}
+.frame-label .required {
+  color: #f56c6c;
+}
+.divider {
+  font-size: 18px;
+  color: #c0c4cc;
+}
+
+.prompt-input {
+  flex: 1;
+}
+.prompt-input >>> .el-textarea__inner {
+  border: none;
+  box-shadow: none;
+  padding: 6px 4px;
+  font-size: 14px;
+  background: transparent;
+  resize: none;
+}
+.prompt-input >>> .el-textarea__inner:focus {
+  box-shadow: none;
+}
+.tpl-trigger {
+  flex-shrink: 0;
+  padding: 0;
+  font-size: 13px;
+  color: #606266;
+}
+.tpl-trigger:hover {
+  color: #409eff;
 }
-.prompt-input >>> .el-textarea__inner:focus { box-shadow: none; }
-.tpl-trigger { flex-shrink: 0; padding: 0; font-size: 13px; color: #606266; }
-.tpl-trigger:hover { color: #409eff; }
 
 .ref-tip {
-  font-size: 12px; color: #909399; line-height: 1.5;
+  font-size: 12px;
+  color: #909399;
+  line-height: 1.5;
   margin: 6px 0 -2px;
 }
 
 .bar-toolbar {
-  display: flex; align-items: center; justify-content: space-between;
-  padding: 8px 0 0; gap: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 0 0;
+  gap: 12px;
   border-top: 1px solid #f5f7fa;
   margin-top: 8px;
 }
-.toolbar-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
-.toolbar-right { display: flex; align-items: center; gap: 8px; }
+.toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
 
 /* —— 聚合按钮（智能比例 | 720p | 5秒 | 1条）—— */
 .agg-btn {
-  display: inline-flex; align-items: center; gap: 6px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   padding: 6px 10px;
 }
-.agg-btn .agg-icon { font-size: 14px; color: #606266; transform: rotate(90deg); }
-.agg-btn .agg-seg { font-size: 13px; color: #303133; }
-.agg-btn .agg-sep { color: #dcdfe6; font-weight: 300; }
+.agg-btn .agg-icon {
+  font-size: 14px;
+  color: #606266;
+  transform: rotate(90deg);
+}
+.agg-btn .agg-seg {
+  font-size: 13px;
+  color: #303133;
+}
+.agg-btn .agg-sep {
+  color: #dcdfe6;
+  font-weight: 300;
+}
 
 /* —— 聚合 popover —— */
-.params-pop { padding: 4px 4px 0; }
-.params-pop .pop-section { margin-bottom: 14px; }
-.params-pop .pop-section:last-child { margin-bottom: 0; }
-.params-pop .pop-section-title {
-  font-size: 13px; color: #303133; font-weight: 500; margin-bottom: 8px;
+.params-pop {
+  padding: 4px 4px 0;
+}
+.params-pop .pop-section {
+  margin-bottom: 14px;
+}
+.params-pop .pop-section:last-child {
+  margin-bottom: 0;
+}
+.params-pop .pop-section-title {
+  font-size: 13px;
+  color: #303133;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+.params-pop .pop-tip {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 6px;
 }
-.params-pop .pop-tip { font-size: 12px; color: #909399; margin-top: 6px; }
 
 /* 比例网格：每格上方一个示意图标，下方文字 */
 .ratio-grid {
-  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 6px;
 }
 .ratio-cell {
-  display: flex; flex-direction: column; align-items: center; justify-content: center;
-  padding: 8px 4px; border: 1px solid #ebeef5; border-radius: 6px;
-  cursor: pointer; transition: all .15s; background: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 4px;
+  border: 1px solid #ebeef5;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s;
+  background: #fff;
+}
+.ratio-cell:hover {
+  border-color: #409eff;
+}
+.ratio-cell.active {
+  background: #ecf5ff;
+  border-color: #409eff;
+}
+.ratio-cell .ratio-label {
+  font-size: 12px;
+  color: #606266;
+  margin-top: 4px;
+}
+.ratio-cell.active .ratio-label {
+  color: #409eff;
 }
-.ratio-cell:hover { border-color: #409eff; }
-.ratio-cell.active { background: #ecf5ff; border-color: #409eff; }
-.ratio-cell .ratio-label { font-size: 12px; color: #606266; margin-top: 4px; }
-.ratio-cell.active .ratio-label { color: #409eff; }
 
 /* 比例缩略图：用纯 CSS 绘制不同长宽比的小矩形 */
-.ratio-icon { display: block; }
+.ratio-icon {
+  display: block;
+}
 .ratio-shape {
-  border: 1.5px solid #909399; border-radius: 2px; background: transparent;
+  border: 1.5px solid #909399;
+  border-radius: 2px;
+  background: transparent;
+}
+.ratio-cell.active .ratio-shape {
+  border-color: #409eff;
+}
+.ratio-shape.r-2109 {
+  width: 28px;
+  height: 12px;
+}
+.ratio-shape.r-169 {
+  width: 26px;
+  height: 14px;
+}
+.ratio-shape.r-43 {
+  width: 22px;
+  height: 16px;
+}
+.ratio-shape.r-11 {
+  width: 18px;
+  height: 18px;
+}
+.ratio-shape.r-34 {
+  width: 14px;
+  height: 18px;
+}
+.ratio-shape.r-916 {
+  width: 12px;
+  height: 20px;
 }
-.ratio-cell.active .ratio-shape { border-color: #409eff; }
-.ratio-shape.r-2109 { width: 28px; height: 12px; }
-.ratio-shape.r-169  { width: 26px; height: 14px; }
-.ratio-shape.r-43   { width: 22px; height: 16px; }
-.ratio-shape.r-11   { width: 18px; height: 18px; }
-.ratio-shape.r-34   { width: 14px; height: 18px; }
-.ratio-shape.r-916  { width: 12px; height: 20px; }
 .ratio-icon.smart {
-  font-size: 18px; color: #909399;
+  font-size: 18px;
+  color: #909399;
+}
+.ratio-cell.active .ratio-icon.smart {
+  color: #409eff;
 }
-.ratio-cell.active .ratio-icon.smart { color: #409eff; }
 
 /* 分段控件：分辨率 / 时长模式 */
 .seg-row {
-  display: flex; gap: 0;
-  background: #f5f7fa; border-radius: 6px; padding: 3px;
+  display: flex;
+  gap: 0;
+  background: #f5f7fa;
+  border-radius: 6px;
+  padding: 3px;
 }
 .seg-cell {
-  flex: 1; text-align: center; padding: 6px 0; cursor: pointer;
-  font-size: 13px; color: #606266; border-radius: 4px;
-  transition: all .15s;
+  flex: 1;
+  text-align: center;
+  padding: 6px 0;
+  cursor: pointer;
+  font-size: 13px;
+  color: #606266;
+  border-radius: 4px;
+  transition: all 0.15s;
+}
+.seg-cell:hover {
+  color: #409eff;
 }
-.seg-cell:hover { color: #409eff; }
 .seg-cell.active {
-  background: #fff; color: #303133; font-weight: 500;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
+  background: #fff;
+  color: #303133;
+  font-weight: 500;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
 }
 
 .slider-row {
-  display: flex; align-items: center; margin-top: 12px;
+  display: flex;
+  align-items: center;
+  margin-top: 12px;
 }
 .num-display {
-  width: 64px; text-align: center;
-  border: 1px solid #dcdfe6; border-radius: 4px;
-  padding: 4px 0; font-size: 13px; color: #303133;
+  width: 64px;
+  text-align: center;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 4px 0;
+  font-size: 13px;
+  color: #303133;
+}
+.num-display .unit {
+  color: #909399;
+  font-size: 12px;
+  margin-left: 2px;
 }
-.num-display .unit { color: #909399; font-size: 12px; margin-left: 2px; }
 </style>
diff --git a/src/views/ai/material/constants/sizeMap.js b/src/views/ai/material/constants/sizeMap.js
index 7dcc767..1182a07 100644
--- a/src/views/ai/material/constants/sizeMap.js
+++ b/src/views/ai/material/constants/sizeMap.js
@@ -49,7 +49,14 @@ export const ASPECT_MIN = 1 / 16
 export const ASPECT_MAX = 16
 export const MAX_REF_IMAGES = 14
 export const MAX_FILE_SIZE_MB = 10
-export const ALLOWED_MIME = ['image/jpeg', 'image/png', 'image/webp', 'image/bmp', 'image/tiff', 'image/gif']
+export const ALLOWED_MIME = [
+  'image/jpeg',
+  'image/png',
+  'image/webp',
+  'image/bmp',
+  'image/tiff',
+  'image/gif'
+]
 
 // —— 视频生成常量（Seedance 2.0）——
 export const VIDEO_RESOLUTIONS = [
diff --git a/src/views/ai/material/material-library.vue b/src/views/ai/material/material-library.vue
index 7060e80..ba4dccf 100644
--- a/src/views/ai/material/material-library.vue
+++ b/src/views/ai/material/material-library.vue
@@ -33,29 +33,30 @@
           <el-button type="text" size="mini" icon="el-icon-plus" @click="onAddCat">新建</el-button>
         </div>
         <div class="cat-list">
-          <div
-            class="cat-chip"
-            :class="{ active: selectCatId === -1 }"
-            @click="onPickCat(-1)"
-          >全部</div>
-          <div
-            class="cat-chip"
-            :class="{ active: selectCatId === 0 }"
-            @click="onPickCat(0)"
-          >未分组</div>
+          <div class="cat-chip" :class="{ active: selectCatId === -1 }" @click="onPickCat(-1)">
+            全部
+          </div>
+          <div class="cat-chip" :class="{ active: selectCatId === 0 }" @click="onPickCat(0)">
+            未分组
+          </div>
           <div
             v-for="c in cats"
             :key="c.image_cat_id"
             class="cat-chip"
             :class="{ active: selectCatId === c.image_cat_id }"
             @click="onPickCat(c.image_cat_id)"
-          >{{ c.image_cat_name }}</div>
+          >
+            {{ c.image_cat_name }}
+          </div>
         </div>
       </div>
 
       <!-- 素材网格 -->
       <div class="grid-wrap" v-loading="loading">
-        <el-empty v-if="!loading && items.length === 0" description="还没有 AI 素材，去制作页生成吧" />
+        <el-empty
+          v-if="!loading && items.length === 0"
+          description="还没有 AI 素材，去制作页生成吧"
+        />
         <div v-else class="grid">
           <div v-for="m in items" :key="m.image_id" class="m-card">
             <div class="m-cover" @click="preview(m)">
@@ -63,7 +64,8 @@
               <video
                 v-else-if="mediaKindOf(m) === 'video'"
                 :src="m.url || m.image_full_url"
-                muted preload="metadata"
+                muted
+                preload="metadata"
                 @loadedmetadata="onMediaMeta(m, $event)"
               />
               <div v-else class="audio-placeholder">
@@ -79,10 +81,21 @@
                     <el-button size="mini" circle icon="el-icon-link" @click.stop="copyUrl(m)" />
                   </el-tooltip>
                   <el-tooltip content="移动分组" placement="top">
-                    <el-button size="mini" circle icon="el-icon-folder-checked" @click.stop="onMove(m)" />
+                    <el-button
+                      size="mini"
+                      circle
+                      icon="el-icon-folder-checked"
+                      @click.stop="onMove(m)"
+                    />
                   </el-tooltip>
                   <el-tooltip content="删除" placement="top">
-                    <el-button size="mini" circle icon="el-icon-delete" type="danger" @click.stop="onDelete(m)" />
+                    <el-button
+                      size="mini"
+                      circle
+                      icon="el-icon-delete"
+                      type="danger"
+                      @click.stop="onDelete(m)"
+                    />
                   </el-tooltip>
                 </div>
               </div>
@@ -101,8 +114,19 @@
             :total="total"
             layout="total, prev, pager, next, sizes"
             :page-sizes="[20, 40, 80]"
-            @current-change="(p) => { page = p; fetch() }"
-            @size-change="(s) => { pageSize = s; page = 1; fetch() }"
+            @current-change="
+              (p) => {
+                page = p
+                fetch()
+              }
+            "
+            @size-change="
+              (s) => {
+                pageSize = s
+                page = 1
+                fetch()
+              }
+            "
           />
         </div>
       </div>
@@ -112,7 +136,12 @@
     <el-dialog title="移动到分组" :visible.sync="moveDialog" width="380px" append-to-body>
       <el-select v-model="moveTargetCatId" placeholder="选择目标分组" style="width: 100%">
         <el-option :value="0" label="未分组" />
-        <el-option v-for="c in cats" :key="c.image_cat_id" :label="c.image_cat_name" :value="c.image_cat_id" />
+        <el-option
+          v-for="c in cats"
+          :key="c.image_cat_id"
+          :label="c.image_cat_name"
+          :value="c.image_cat_id"
+        />
       </el-select>
       <div slot="footer">
         <el-button @click="moveDialog = false">取消</el-button>
@@ -125,7 +154,8 @@
       <video
         v-if="previewKind === 'video'"
         :src="previewUrl"
-        controls preload="metadata"
+        controls
+        preload="metadata"
         style="max-width: 80vw; max-height: 80vh; display: block; margin: 0 auto; background: #000"
       />
       <audio
@@ -144,12 +174,7 @@
 </template>
 
 <script>
-import {
-  getImageList,
-  getImageAllCatgory,
-  addImageCatgory,
-  moveImageGroup
-} from '@/api/picker'
+import { getImageList, getImageAllCatgory, addImageCatgory, moveImageGroup } from '@/api/picker'
 import { deleteImage } from '@/api/qiniu'
 
 export default {
@@ -188,7 +213,9 @@ export default {
         const { data } = await getImageAllCatgory({ image_cat_id: 0, source: 'ai_generate' })
         const list = (data && data.list) || (data && data.data && data.data.list) || []
         this.cats = list
-      } catch (e) { /* silent */ }
+      } catch (e) {
+        /* silent */
+      }
     },
     async fetch() {
       this.loading = true
@@ -211,16 +238,27 @@ export default {
         this.loading = false
       }
     },
-    onTypeChange() { this.page = 1; this.fetch() },
-    onSearch() { this.page = 1; this.fetch() },
-    onPickCat(id) { this.selectCatId = id; this.page = 1; this.fetch() },
+    onTypeChange() {
+      this.page = 1
+      this.fetch()
+    },
+    onSearch() {
+      this.page = 1
+      this.fetch()
+    },
+    onPickCat(id) {
+      this.selectCatId = id
+      this.page = 1
+      this.fetch()
+    },
 
     async onAddCat() {
       try {
         const { value } = await this.$prompt('请输入分组名称', '新建 AI 素材分组', {
           confirmButtonText: '创建',
           cancelButtonText: '取消',
-          inputValidator: (v) => (v && v.trim().length > 0 && v.length <= 20) || '名称必填且不超过 20 字'
+          inputValidator: (v) =>
+            (v && v.trim().length > 0 && v.length <= 20) || '名称必填且不超过 20 字'
         })
         await addImageCatgory({
           image_cat_name: (value || '').trim(),
@@ -263,19 +301,23 @@ export default {
         await deleteImage({ image_id: String(m.image_id) })
         this.$message.success('已删除')
         this.fetch()
-      } catch (e) { /* canceled */ }
+      } catch (e) {
+        /* canceled */
+      }
     },
 
     async copyUrl(m) {
       try {
         await this.$copyText(m.url || m.image_full_url || '')
         this.$message.success('已复制 URL')
-      } catch (e) { /* ignore */ }
+      } catch (e) {
+        /* ignore */
+      }
     },
 
     /** 按 image_type MIME 前缀辨型，兜底用 url 后缀 */
     mediaKindOf(item) {
-      const mime = (item && item.image_type) ? String(item.image_type).toLowerCase() : ''
+      const mime = item && item.image_type ? String(item.image_type).toLowerCase() : ''
       if (mime.indexOf('video/') === 0) return 'video'
       if (mime.indexOf('audio/') === 0) return 'audio'
       if (mime.indexOf('image/') === 0) return 'image'
@@ -306,72 +348,153 @@ export default {
 </script>
 
 <style scoped>
-.lib-header { display: flex; align-items: center; }
-.header-spacer { flex: 1; }
+.lib-header {
+  display: flex;
+  align-items: center;
+}
+.header-spacer {
+  flex: 1;
+}
 
-.lib-body { display: flex; gap: 16px; }
+.lib-body {
+  display: flex;
+  gap: 16px;
+}
 .cat-rail {
-  width: 200px; flex-shrink: 0; background: #fff; border-radius: 8px; padding: 12px;
-  box-shadow: 0 1px 4px rgba(0,0,0,.04); height: fit-content;
+  width: 200px;
+  flex-shrink: 0;
+  background: #fff;
+  border-radius: 8px;
+  padding: 12px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+  height: fit-content;
 }
 .cat-rail-title {
-  font-size: 13px; color: #303133; font-weight: 600;
-  display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
+  font-size: 13px;
+  color: #303133;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.cat-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
-.cat-list { display: flex; flex-direction: column; gap: 4px; }
 .cat-chip {
-  padding: 6px 10px; border-radius: 6px;
-  font-size: 13px; color: #303133;
-  cursor: pointer; transition: all .15s; user-select: none;
+  padding: 6px 10px;
+  border-radius: 6px;
+  font-size: 13px;
+  color: #303133;
+  cursor: pointer;
+  transition: all 0.15s;
+  user-select: none;
+}
+.cat-chip:hover {
+  background: #f4f6fa;
+  color: #409eff;
+}
+.cat-chip.active {
+  background: #ecf5ff;
+  color: #409eff;
+  font-weight: 500;
 }
-.cat-chip:hover { background: #f4f6fa; color: #409eff; }
-.cat-chip.active { background: #ecf5ff; color: #409eff; font-weight: 500; }
 
-.grid-wrap { flex: 1; }
+.grid-wrap {
+  flex: 1;
+}
 /* 卡片尺寸对齐素材管理（picker-image）：固定 120px 缩略图 */
 .grid {
-  display: grid; grid-template-columns: repeat(auto-fill, 120px); gap: 8px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 120px);
+  gap: 8px;
 }
 .m-card {
   width: 120px;
-  background: #fff; border-radius: 4px; overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: box-shadow .2s;
+  background: #fff;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  transition: box-shadow 0.2s;
+}
+.m-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
-.m-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
 .m-cover {
-  position: relative; cursor: zoom-in;
-  width: 120px; height: 120px;
-  background: #ddd; overflow: hidden;
+  position: relative;
+  cursor: zoom-in;
+  width: 120px;
+  height: 120px;
+  background: #ddd;
+  overflow: hidden;
 }
 .m-cover img,
-.m-cover video { width: 100%; height: 100%; object-fit: cover; display: block; }
+.m-cover video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
 .m-cover .audio-placeholder {
-  width: 100%; height: 100%;
-  display: flex; align-items: center; justify-content: center;
-  color: #c0c4cc; font-size: 36px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #c0c4cc;
+  font-size: 36px;
   background: linear-gradient(135deg, #36383d 0%, #1f2024 100%);
 }
 .m-badge {
-  position: absolute; top: 4px; left: 4px;
-  padding: 1px 5px; border-radius: 3px;
-  font-size: 11px; line-height: 14px; color: #fff;
-  background: rgba(0,0,0,.55);
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-size: 11px;
+  line-height: 14px;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.55);
 }
 .m-mask {
-  position: absolute; inset: 0; background: rgba(0,0,0,.4);
-  display: flex; align-items: center; justify-content: center;
-  opacity: 0; transition: opacity .2s;
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.m-cover:hover .m-mask {
+  opacity: 1;
+}
+.m-actions {
+  display: flex;
+  gap: 4px;
+}
+.m-actions .el-button {
+  padding: 4px;
+}
+.m-info {
+  padding: 4px 6px 6px;
 }
-.m-cover:hover .m-mask { opacity: 1; }
-.m-actions { display: flex; gap: 4px; }
-.m-actions .el-button { padding: 4px; }
-.m-info { padding: 4px 6px 6px; }
 .m-name {
-  font-size: 12px; line-height: 16px; color: #303133;
+  font-size: 12px;
+  line-height: 16px;
+  color: #303133;
   height: 32px;
-  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
-  overflow: hidden; word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-all;
 }
 
-.pagination { margin-top: 20px; text-align: right; }
+.pagination {
+  margin-top: 20px;
+  text-align: right;
+}
 </style>
diff --git a/src/views/ai/material/material-studio.vue b/src/views/ai/material/material-studio.vue
index 36947fb..3d7d5d9 100644
--- a/src/views/ai/material/material-studio.vue
+++ b/src/views/ai/material/material-studio.vue
@@ -10,9 +10,13 @@
       </div>
 
       <div class="header-actions">
-        <el-button size="small" plain icon="el-icon-magic-stick" @click="guideOpen = true">提示词指南</el-button>
+        <el-button size="small" plain icon="el-icon-magic-stick" @click="guideOpen = true"
+          >提示词指南</el-button
+        >
         <router-link :to="{ name: 'aiMaterialLibrary' }">
-          <el-button size="small" type="primary" plain icon="el-icon-folder-opened">素材库</el-button>
+          <el-button size="small" type="primary" plain icon="el-icon-folder-opened"
+            >素材库</el-button
+          >
         </router-link>
       </div>
     </div>
@@ -21,7 +25,9 @@
     <div
       class="studio-body"
       v-loading="generating"
-      :element-loading-text="mode === 'video' ? '正在提交视频任务，请稍候...' : '正在生成图片，请稍候...'"
+      :element-loading-text="
+        mode === 'video' ? '正在提交视频任务，请稍候...' : '正在生成图片，请稍候...'
+      "
     >
       <!-- 历史会话流（按时间倒序、上滑加载更多） -->
       <div ref="conversationsRef" class="conv-stream" @scroll="onStreamScroll">
@@ -34,7 +40,11 @@
           <div class="conv-meta">
             <span class="conv-time">{{ c.created_at }}</span>
             <el-tag v-if="c.status === 'failed'" type="danger" size="mini">失败</el-tag>
-            <el-tag v-else-if="c.status === 'pending' || c.status === 'running'" type="warning" size="mini">
+            <el-tag
+              v-else-if="c.status === 'pending' || c.status === 'running'"
+              type="warning"
+              size="mini"
+            >
               <i class="el-icon-loading"></i> 生成中
             </el-tag>
           </div>
@@ -44,17 +54,31 @@
           <div class="conv-params">
             <el-tag size="mini" effect="plain">{{ formatSize(c) }}</el-tag>
             <template v-if="(c.media_type || mode) === 'video'">
-              <el-tag v-if="c.params && c.params.duration" size="mini" effect="plain">{{ c.params.duration }}s</el-tag>
-              <el-tag v-if="c.params && c.params.generate_audio" size="mini" effect="plain">有声</el-tag>
-              <el-tag v-if="c.params && c.params.mode === 'first_last'" size="mini" effect="plain">首尾帧</el-tag>
-              <el-tag v-if="c.params && c.params.smart_ratio" size="mini" effect="plain">智能比例</el-tag>
+              <el-tag v-if="c.params && c.params.duration" size="mini" effect="plain"
+                >{{ c.params.duration }}s</el-tag
+              >
+              <el-tag v-if="c.params && c.params.generate_audio" size="mini" effect="plain"
+                >有声</el-tag
+              >
+              <el-tag v-if="c.params && c.params.mode === 'first_last'" size="mini" effect="plain"
+                >首尾帧</el-tag
+              >
+              <el-tag v-if="c.params && c.params.smart_ratio" size="mini" effect="plain"
+                >智能比例</el-tag
+              >
             </template>
             <template v-else>
-              <el-tag size="mini" effect="plain">{{ (c.params && c.params.output_format) || 'png' }}</el-tag>
-              <el-tag v-if="c.params && c.params.use_web_search" size="mini" effect="plain">联网</el-tag>
+              <el-tag size="mini" effect="plain">{{
+                (c.params && c.params.output_format) || 'png'
+              }}</el-tag>
+              <el-tag v-if="c.params && c.params.use_web_search" size="mini" effect="plain"
+                >联网</el-tag
+              >
               <el-tag v-if="c.params && c.params.watermark" size="mini" effect="plain">水印</el-tag>
             </template>
-            <el-tag v-if="c.input_images && c.input_images.length" size="mini" effect="plain">参考素材 {{ c.input_images.length }}</el-tag>
+            <el-tag v-if="c.input_images && c.input_images.length" size="mini" effect="plain"
+              >参考素材 {{ c.input_images.length }}</el-tag
+            >
           </div>
 
           <div v-if="c.input_images && c.input_images.length" class="conv-input-imgs">
@@ -74,9 +98,13 @@
           <div v-if="c.status === 'pending' || c.status === 'running'" class="conv-loading">
             <div class="skeleton-card" />
             <div class="skeleton-text">
-              {{ (c.media_type || mode) === 'video'
-                ? (c.task_id ? `视频生成中（${c.polling_status || 'queued'}），通常需要 1-3 分钟...` : '视频任务提交中...')
-                : '生成中，预计 10-30 秒...' }}
+              {{
+                (c.media_type || mode) === 'video'
+                  ? c.task_id
+                    ? `视频生成中（${c.polling_status || 'queued'}），通常需要 1-3 分钟...`
+                    : '视频任务提交中...'
+                  : '生成中，预计 10-30 秒...'
+              }}
             </div>
           </div>
 
@@ -107,7 +135,7 @@
               <div v-else class="result-img" @click="previewImage(u)">
                 <img :src="u" />
               </div>
-              <div v-if="isVideoUrl(u) && (c.params && c.params.result_duration)" class="video-meta">
+              <div v-if="isVideoUrl(u) && c.params && c.params.result_duration" class="video-meta">
                 {{ c.params.result_duration }}s
               </div>
             </div>
@@ -121,7 +149,8 @@
               icon="el-icon-edit-outline"
               :disabled="c.status === 'pending' || c.status === 'running'"
               @click="onReedit(c)"
-            >重新编辑</el-button>
+              >重新编辑</el-button
+            >
 
             <el-button
               type="text"
@@ -129,7 +158,8 @@
               icon="el-icon-collection"
               :disabled="!hasSavableOutput(c)"
               @click="onSaveDialog(c)"
-            >保存到素材库</el-button>
+              >保存到素材库</el-button
+            >
 
             <el-button
               type="text"
@@ -137,9 +167,14 @@
               icon="el-icon-magic-stick"
               :disabled="!hasSavableOutput(c)"
               @click="onTemplateDialog(c)"
-            >设为模板</el-button>
+              >设为模板</el-button
+            >
 
-            <el-dropdown trigger="click" placement="bottom-start" @command="onMoreCommand($event, c)">
+            <el-dropdown
+              trigger="click"
+              placement="bottom-start"
+              @command="onMoreCommand($event, c)"
+            >
               <el-button type="text" size="mini" icon="el-icon-more"></el-button>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item command="delete" icon="el-icon-delete">删除</el-dropdown-item>
@@ -180,7 +215,8 @@
         <!-- 图片模式输入条 -->
         <template v-else>
           <div v-if="inputImages.length" class="bar-tip">
-            使用 <span class="ref-mark">@</span> 可快速引用上传的素材，如：参考 @图片1 中的风格生成。
+            使用 <span class="ref-mark">@</span> 可快速引用上传的素材，如：参考 @图片1
+            中的风格生成。
           </div>
           <div class="bar-top">
             <RefImageUpload v-model="inputImages" kind="image" />
@@ -189,7 +225,11 @@
               ref="promptInput"
               v-model="promptText"
               :items="imageRefItems"
-              :placeholder="inputImages.length ? '结合图片,输入创意描述' : '描述你想生成的图片，比如：电商珠宝摄影...'"
+              :placeholder="
+                inputImages.length
+                  ? '结合图片,输入创意描述'
+                  : '描述你想生成的图片，比如：电商珠宝摄影...'
+              "
               :min-rows="2"
               :max-rows="6"
               class="prompt-input"
@@ -200,7 +240,8 @@
               type="text"
               icon="el-icon-magic-stick"
               @click="templateOpen = !templateOpen"
-            >模板</el-button>
+              >模板</el-button
+            >
           </div>
 
           <div class="bar-toolbar">
@@ -211,7 +252,9 @@
                   <i class="el-icon-arrow-down el-icon--right"></i>
                 </el-button>
                 <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item v-for="n in 4" :key="n" :command="n">{{ n }}张</el-dropdown-item>
+                  <el-dropdown-item v-for="n in 4" :key="n" :command="n"
+                    >{{ n }}张</el-dropdown-item
+                  >
                 </el-dropdown-menu>
               </el-dropdown>
 
@@ -223,12 +266,21 @@
                 @change="onSizeChange"
               />
 
-              <el-button size="small" plain icon="el-icon-setting" @click="settingsOpen = true">详细设置</el-button>
+              <el-button size="small" plain icon="el-icon-setting" @click="settingsOpen = true"
+                >详细设置</el-button
+              >
             </div>
 
             <div class="toolbar-right">
               <span v-if="quotaText" class="quota">{{ quotaText }}</span>
-              <el-button v-if="lastResultUrl && inputImages.length === 0" size="small" plain icon="el-icon-back" @click="useLastAsInput">使用上次结果</el-button>
+              <el-button
+                v-if="lastResultUrl && inputImages.length === 0"
+                size="small"
+                plain
+                icon="el-icon-back"
+                @click="useLastAsInput"
+                >使用上次结果</el-button
+              >
               <el-button
                 type="primary"
                 size="small"
@@ -256,7 +308,11 @@
 
     <!-- 大图预览 -->
     <el-dialog :visible.sync="previewVisible" width="auto" top="6vh" :modal="true">
-      <img v-if="previewUrl" :src="previewUrl" style="max-width: 80vw; max-height: 80vh; display: block; margin: 0 auto" />
+      <img
+        v-if="previewUrl"
+        :src="previewUrl"
+        style="max-width: 80vw; max-height: 80vh; display: block; margin: 0 auto"
+      />
     </el-dialog>
 
     <!-- 保存到素材库弹窗 -->
@@ -284,7 +340,9 @@
             </el-select>
             <el-button size="small" icon="el-icon-plus" @click="onAddAiCat">新建分组</el-button>
           </div>
-          <div class="form-tip">AI 素材会落到老素材库的「AI 素材」分类下，与商品图共用一套挂载体系</div>
+          <div class="form-tip">
+            AI 素材会落到老素材库的「AI 素材」分类下，与商品图共用一套挂载体系
+          </div>
         </el-form-item>
         <el-form-item label="预览">
           <video
@@ -317,7 +375,12 @@
     <el-dialog title="设为模板" :visible.sync="tplVisible" width="520px" append-to-body>
       <el-form :model="tplForm" label-width="80px">
         <el-form-item label="模板标题">
-          <el-input v-model="tplForm.title" placeholder="给模板取个标题，便于他人识别" maxlength="60" show-word-limit />
+          <el-input
+            v-model="tplForm.title"
+            placeholder="给模板取个标题，便于他人识别"
+            maxlength="60"
+            show-word-limit
+          />
         </el-form-item>
         <el-form-item label="预览">
           <video
@@ -337,7 +400,9 @@
       </el-form>
       <div slot="footer">
         <el-button @click="tplVisible = false">取消</el-button>
-        <el-button type="primary" :loading="tplSaving" @click="onTemplateConfirm">设为模板</el-button>
+        <el-button type="primary" :loading="tplSaving" @click="onTemplateConfirm"
+          >设为模板</el-button
+        >
       </div>
     </el-dialog>
   </SpPage>
@@ -386,7 +451,15 @@ const DEFAULT_VIDEO_FORM = () => ({
 
 export default {
   name: 'MaterialStudio',
-  components: { SizePopover, AdvancedSettingsDrawer, TemplateGallery, PromptGuideDrawer, RefImageUpload, VideoInputBar, PromptInput },
+  components: {
+    SizePopover,
+    AdvancedSettingsDrawer,
+    TemplateGallery,
+    PromptGuideDrawer,
+    RefImageUpload,
+    VideoInputBar,
+    PromptInput
+  },
   data() {
     const defaultSize = parseSize((SIZE_MAP['2K'] && SIZE_MAP['2K']['1:1']) || '2048x2048')
     return {
@@ -427,8 +500,11 @@ export default {
       saveVisible: false,
       saving: false,
       saveForm: {
-        url: '', conversation_id: 0, name: '',
-        media_type: 'image', mime: '',
+        url: '',
+        conversation_id: 0,
+        name: '',
+        media_type: 'image',
+        mime: '',
         image_cat_id: 0
       },
       // AI 素材分组（espier_uploadimages_cat where source=ai_generate），弹窗里下拉选择
@@ -437,7 +513,10 @@ export default {
       tplVisible: false,
       tplSaving: false,
       tplForm: {
-        url: '', conversation_id: 0, title: '', media_type: 'image'
+        url: '',
+        conversation_id: 0,
+        title: '',
+        media_type: 'image'
       },
 
       _pollTimer: null
@@ -448,7 +527,9 @@ export default {
       const c = this.conversations.find((x) => x.output_images && x.output_images.length > 0)
       return c ? c.output_images[0] : ''
     },
-    quotaText() { return '' /* 后续接配额接口 */ },
+    quotaText() {
+      return '' /* 后续接配额接口 */
+    },
     /** 图片模式 PromptInput 的 @ 引用候选 */
     imageRefItems() {
       return buildRefItems({ images: this.inputImages })
@@ -551,14 +632,17 @@ export default {
         // 后端返回 { list: [...] }
         const list = (data && data.list) || (data && data.data && data.data.list) || []
         this.aiCatList = list
-      } catch (e) { /* silent */ }
+      } catch (e) {
+        /* silent */
+      }
     },
     async onAddAiCat() {
       try {
         const { value } = await this.$prompt('请输入分组名称', '新建 AI 素材分组', {
           confirmButtonText: '创建',
           cancelButtonText: '取消',
-          inputValidator: (v) => (v && v.trim().length > 0 && v.length <= 20) || '名称必填且不超过 20 字'
+          inputValidator: (v) =>
+            (v && v.trim().length > 0 && v.length <= 20) || '名称必填且不超过 20 字'
         })
         const name = (value || '').trim()
         await addImageCatgory({
@@ -597,10 +681,11 @@ export default {
       }
     },
     async pollVideoTasks() {
-      const targets = this.conversations.filter((c) =>
-        (c.media_type || '') === 'video'
-        && (c.status === 'pending' || c.status === 'running')
-        && c.conversation_id
+      const targets = this.conversations.filter(
+        (c) =>
+          (c.media_type || '') === 'video' &&
+          (c.status === 'pending' || c.status === 'running') &&
+          c.conversation_id
       )
       if (!targets.length) return
       for (const c of targets) {
@@ -610,7 +695,9 @@ export default {
           if (!fresh) continue
           const idx = this.conversations.findIndex((x) => x.conversation_id === c.conversation_id)
           if (idx >= 0) this.$set(this.conversations, idx, fresh)
-        } catch (e) { /* silent */ }
+        } catch (e) {
+          /* silent */
+        }
       }
     },
     onSizeChange(v) {
@@ -626,7 +713,9 @@ export default {
         this.form = { ...this.form, ...v }
       }
     },
-    onMaxImagesChange(n) { this.form.maxImages = n },
+    onMaxImagesChange(n) {
+      this.form.maxImages = n
+    },
     onUseTemplate(t) {
       const tplMedia = t.media_type || 'image'
       // 模板类型与当前模式不一致时自动切换
@@ -650,12 +739,14 @@ export default {
         next.useWebSearch = !!(p.use_web_search || p.useWebSearch)
         next.watermark = !!p.watermark
         next.seed = Number(p.seed || 0) || 0
-        next.imageStart = (p.image_start || p.imageStart || '')
-        next.imageEnd = (p.image_end || p.imageEnd || '')
+        next.imageStart = p.image_start || p.imageStart || ''
+        next.imageEnd = p.image_end || p.imageEnd || ''
         // 输入素材是混合数组（图/视频/音频），按 URL 后缀拆分回三个引用列表
         const inputs = Array.isArray(t.input_images)
           ? t.input_images.filter((u) => typeof u === 'string' && u)
-          : (Array.isArray(p.reference_images) ? p.reference_images.filter(Boolean) : [])
+          : Array.isArray(p.reference_images)
+          ? p.reference_images.filter(Boolean)
+          : []
         const imgs = []
         const vids = []
         const auds = []
@@ -678,7 +769,9 @@ export default {
           next.imageEnd = ''
         }
         this.videoForm = next
-        this.$nextTick(() => this.$refs.videoBar && this.$refs.videoBar.focus && this.$refs.videoBar.focus())
+        this.$nextTick(
+          () => this.$refs.videoBar && this.$refs.videoBar.focus && this.$refs.videoBar.focus()
+        )
         return
       }
       // 图片
@@ -733,12 +826,13 @@ export default {
         next.useWebSearch = !!(p.use_web_search || p.useWebSearch)
         next.watermark = !!p.watermark
         next.seed = Number(p.seed || 0) || 0
-        next.imageStart = (p.image_start || '')
-        next.imageEnd = (p.image_end || '')
+        next.imageStart = p.image_start || ''
+        next.imageEnd = p.image_end || ''
         // 优先用混合 input_images（按后缀拆分），回退到 params.reference_*
-        const inputs = Array.isArray(c.input_images) && c.input_images.length
-          ? c.input_images.filter((u) => typeof u === 'string' && u)
-          : []
+        const inputs =
+          Array.isArray(c.input_images) && c.input_images.length
+            ? c.input_images.filter((u) => typeof u === 'string' && u)
+            : []
         if (inputs.length) {
           const imgs = []
           const vids = []
@@ -752,11 +846,18 @@ export default {
           next.referenceVideos = vids.slice(0, 3)
           next.referenceAudios = auds.slice(0, 3)
         } else {
-          next.referenceImages = Array.isArray(p.reference_images) ? p.reference_images.filter(Boolean).slice(0, 9) : []
-          next.referenceVideos = Array.isArray(p.reference_videos)
-            ? p.reference_videos.map((v) => (typeof v === 'string' ? v : (v && v.video_url) || '')).filter(Boolean).slice(0, 3)
+          next.referenceImages = Array.isArray(p.reference_images)
+            ? p.reference_images.filter(Boolean).slice(0, 9)
+            : []
+          next.referenceVideos = Array.isArray(p.reference_videos)
+            ? p.reference_videos
+                .map((v) => (typeof v === 'string' ? v : (v && v.video_url) || ''))
+                .filter(Boolean)
+                .slice(0, 3)
+            : []
+          next.referenceAudios = Array.isArray(p.reference_audios)
+            ? p.reference_audios.filter(Boolean).slice(0, 3)
             : []
-          next.referenceAudios = Array.isArray(p.reference_audios) ? p.reference_audios.filter(Boolean).slice(0, 3) : []
         }
         this.videoForm = next
         this.$nextTick(() => {
@@ -800,11 +901,16 @@ export default {
           c.conversation_id ? x.conversation_id !== c.conversation_id : x._tempId !== c._tempId
         )
         this.$message.success('已删除')
-      } catch (e) { /* canceled */ }
+      } catch (e) {
+        /* canceled */
+      }
     },
     async onGenerate() {
       const prompt = (this.promptText || '').trim()
-      if (!prompt) { this.$message.warning('请输入提示词'); return }
+      if (!prompt) {
+        this.$message.warning('请输入提示词')
+        return
+      }
 
       const params = {
         resolution: this.form.resolution,
@@ -888,7 +994,10 @@ export default {
       this.fetchAiCats()
     },
     async onSaveConfirm() {
-      if (!this.saveForm.url) { this.$message.warning('未找到可保存的素材 URL'); return }
+      if (!this.saveForm.url) {
+        this.$message.warning('未找到可保存的素材 URL')
+        return
+      }
       this.saving = true
       try {
         await saveToLibrary({
@@ -922,7 +1031,10 @@ export default {
         return
       }
       const title = (this.tplForm.title || '').trim()
-      if (!title) { this.$message.warning('请填写模板标题'); return }
+      if (!title) {
+        this.$message.warning('请填写模板标题')
+        return
+      }
       this.tplSaving = true
       try {
         await createTemplate({
@@ -941,21 +1053,42 @@ export default {
     },
 
     _guessMediaType(conv, url) {
-      if (conv && (conv.media_type === 'video' || conv.media_type === 'audio' || conv.media_type === 'image')) {
+      if (
+        conv &&
+        (conv.media_type === 'video' || conv.media_type === 'audio' || conv.media_type === 'image')
+      ) {
         return conv.media_type
       }
-      const ext = String(url || '').split('?')[0].split('.').pop().toLowerCase()
+      const ext = String(url || '')
+        .split('?')[0]
+        .split('.')
+        .pop()
+        .toLowerCase()
       if (['mp4', 'mov', 'webm', 'm4v'].indexOf(ext) > -1) return 'video'
       if (['mp3', 'wav', 'm4a', 'aac', 'ogg', 'flac'].indexOf(ext) > -1) return 'audio'
       return 'image'
     },
     _guessMimeFromUrl(url, mediaType) {
-      const ext = String(url || '').split('?')[0].split('.').pop().toLowerCase()
+      const ext = String(url || '')
+        .split('?')[0]
+        .split('.')
+        .pop()
+        .toLowerCase()
       const map = {
-        png: 'image/png', jpg: 'image/jpeg', jpeg: 'image/jpeg',
-        webp: 'image/webp', gif: 'image/gif', bmp: 'image/bmp',
-        mp4: 'video/mp4', mov: 'video/quicktime', webm: 'video/webm',
-        mp3: 'audio/mpeg', wav: 'audio/wav', m4a: 'audio/mp4', aac: 'audio/aac', ogg: 'audio/ogg'
+        png: 'image/png',
+        jpg: 'image/jpeg',
+        jpeg: 'image/jpeg',
+        webp: 'image/webp',
+        gif: 'image/gif',
+        bmp: 'image/bmp',
+        mp4: 'video/mp4',
+        mov: 'video/quicktime',
+        webm: 'video/webm',
+        mp3: 'audio/mpeg',
+        wav: 'audio/wav',
+        m4a: 'audio/mp4',
+        aac: 'audio/aac',
+        ogg: 'audio/ogg'
       }
       if (map[ext]) return map[ext]
       if (mediaType === 'video') return 'video/mp4'
@@ -968,7 +1101,10 @@ export default {
      */
     async onGenerateVideo(form) {
       const prompt = (form.prompt || '').trim()
-      if (!prompt) { this.$message.warning('请输入提示词'); return }
+      if (!prompt) {
+        this.$message.warning('请输入提示词')
+        return
+      }
 
       const params = {
         mode: form.mode,
@@ -990,11 +1126,11 @@ export default {
         prompt,
         mode: form.mode,
         params,
-        image_start: form.mode === 'first_last' ? (form.imageStart || '') : '',
-        image_end: form.mode === 'first_last' ? (form.imageEnd || '') : '',
-        reference_images: form.mode === 'reference' ? (form.referenceImages || []) : [],
-        reference_videos: form.mode === 'reference' ? (form.referenceVideos || []) : [],
-        reference_audios: form.mode === 'reference' ? (form.referenceAudios || []) : []
+        image_start: form.mode === 'first_last' ? form.imageStart || '' : '',
+        image_end: form.mode === 'first_last' ? form.imageEnd || '' : '',
+        reference_images: form.mode === 'reference' ? form.referenceImages || [] : [],
+        reference_videos: form.mode === 'reference' ? form.referenceVideos || [] : [],
+        reference_audios: form.mode === 'reference' ? form.referenceAudios || [] : []
       }
 
       const inputThumbs = []
@@ -1063,19 +1199,36 @@ export default {
 </script>
 
 <style scoped>
-.material-studio { display: flex; flex-direction: column; height: 100%; }
-.studio-header { display: flex; align-items: center; justify-content: space-between; }
-.header-actions { display: flex; gap: 8px; }
+.material-studio {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.studio-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.header-actions {
+  display: flex;
+  gap: 8px;
+}
 
 .studio-body {
-  display: flex; flex-direction: column;
+  display: flex;
+  flex-direction: column;
   height: calc(100vh - 220px);
   min-height: 520px;
-  background: #f5f7fa; border-radius: 8px; overflow: hidden; position: relative;
+  background: #f5f7fa;
+  border-radius: 8px;
+  overflow: hidden;
+  position: relative;
 }
 
 .conv-stream {
-  flex: 1; overflow-y: auto; overflow-anchor: none;
+  flex: 1;
+  overflow-y: auto;
+  overflow-anchor: none;
   padding: 20px 24px 220px;
   display: flex;
   /* 聊天式布局：服务端 DESC 顺序不动，column-reverse 把"最新"渲染到底部 */
@@ -1083,111 +1236,257 @@ export default {
   gap: 16px;
 }
 .conv-card {
-  background: #fff; border-radius: 10px; padding: 16px;
-  box-shadow: 0 1px 4px rgba(0,0,0,.04);
+  background: #fff;
+  border-radius: 10px;
+  padding: 16px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+}
+.conv-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+  font-size: 12px;
+  color: #909399;
+}
+.meta-spacer {
+  flex: 1;
+}
+.conv-prompt {
+  color: #303133;
+  font-size: 14px;
+  line-height: 1.6;
+  margin-bottom: 8px;
+}
+.conv-params {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 12px;
+}
+.conv-input-imgs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 12px;
+}
+.thumb.sm {
+  position: relative;
+  width: 48px;
+  height: 48px;
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid #ebeef5;
+  background: #f5f7fa;
 }
-.conv-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; color: #909399; }
-.meta-spacer { flex: 1; }
-.conv-prompt { color: #303133; font-size: 14px; line-height: 1.6; margin-bottom: 8px; }
-.conv-params { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
-.conv-input-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
-.thumb.sm { position: relative; width: 48px; height: 48px; border-radius: 4px; overflow: hidden; border: 1px solid #ebeef5; background: #f5f7fa; }
 .thumb.sm img,
-.thumb.sm video { width: 100%; height: 100%; object-fit: cover; display: block; }
+.thumb.sm video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
 .thumb.sm.k-video::after {
   content: '\25B6';
-  position: absolute; right: 2px; bottom: 0;
-  color: #fff; font-size: 10px;
-  text-shadow: 0 0 2px rgba(0,0,0,.6);
+  position: absolute;
+  right: 2px;
+  bottom: 0;
+  color: #fff;
+  font-size: 10px;
+  text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
+}
+.thumb.sm.k-audio {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.thumb.sm .thumb-icon {
+  font-size: 22px;
+  color: #909399;
 }
-.thumb.sm.k-audio { display: flex; align-items: center; justify-content: center; }
-.thumb.sm .thumb-icon { font-size: 22px; color: #909399; }
 
-.conv-output { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
+.conv-output {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 8px;
+}
 .result-card {
-  width: 220px; border: 1px solid #ebeef5; border-radius: 8px; overflow: hidden;
+  width: 220px;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  overflow: hidden;
   background: #fafafa;
 }
-.result-img { cursor: zoom-in; }
-.result-img img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; }
-.result-card.video { width: 320px; position: relative; }
-.result-video { width: 100%; display: block; background: #000; max-height: 320px; }
+.result-img {
+  cursor: zoom-in;
+}
+.result-img img {
+  width: 100%;
+  display: block;
+  aspect-ratio: 1;
+  object-fit: cover;
+}
+.result-card.video {
+  width: 320px;
+  position: relative;
+}
+.result-video {
+  width: 100%;
+  display: block;
+  background: #000;
+  max-height: 320px;
+}
 .video-meta {
-  position: absolute; right: 6px; bottom: 6px;
-  background: rgba(0,0,0,.55); color: #fff; font-size: 11px;
-  padding: 1px 6px; border-radius: 3px;
+  position: absolute;
+  right: 6px;
+  bottom: 6px;
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  font-size: 11px;
+  padding: 1px 6px;
+  border-radius: 3px;
 }
 
 .conv-error {
-  background: #fef0f0; color: #f56c6c; font-size: 13px;
-  padding: 10px 12px; border-radius: 6px; border-left: 3px solid #f56c6c;
+  background: #fef0f0;
+  color: #f56c6c;
+  font-size: 13px;
+  padding: 10px 12px;
+  border-radius: 6px;
+  border-left: 3px solid #f56c6c;
   margin-bottom: 8px;
 }
 
 .conv-loading {
-  display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
 }
 .skeleton-card {
-  width: 220px; height: 220px; border-radius: 8px;
+  width: 220px;
+  height: 220px;
+  border-radius: 8px;
   background: linear-gradient(90deg, #f5f7fa 0%, #ebeef5 50%, #f5f7fa 100%);
   background-size: 200% 100%;
   animation: skeleton-loading 1.4s ease infinite;
 }
-.skeleton-text { color: #909399; font-size: 13px; }
+.skeleton-text {
+  color: #909399;
+  font-size: 13px;
+}
 @keyframes skeleton-loading {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
 }
 
 .conv-actions {
-  display: flex; align-items: center; gap: 8px;
-  padding-top: 8px; border-top: 1px dashed #f0f2f5;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-top: 8px;
+  border-top: 1px dashed #f0f2f5;
+}
+.conv-actions .el-button + .el-button {
+  margin-left: 0;
 }
-.conv-actions .el-button + .el-button { margin-left: 0; }
 
 .load-more-tip {
-  text-align: center; color: #909399; font-size: 12px; padding: 8px 0;
+  text-align: center;
+  color: #909399;
+  font-size: 12px;
+  padding: 8px 0;
+}
+.load-more-tip.end {
+  color: #c0c4cc;
 }
-.load-more-tip.end { color: #c0c4cc; }
 
 /* —— 输入条 —— */
 .input-bar {
-  position: absolute; left: 24px; right: 24px; bottom: 16px;
-  background: #fff; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
-  border: 1px solid #ebeef5; z-index: 10;
+  position: absolute;
+  left: 24px;
+  right: 24px;
+  bottom: 16px;
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  border: 1px solid #ebeef5;
+  z-index: 10;
   padding: 12px 14px;
 }
 .bar-tip {
-  font-size: 12px; color: #909399; line-height: 1.5;
+  font-size: 12px;
+  color: #909399;
+  line-height: 1.5;
   margin: 0 0 6px;
 }
-.bar-tip .ref-mark { color: #409eff; font-weight: 600; }
+.bar-tip .ref-mark {
+  color: #409eff;
+  font-weight: 600;
+}
 .bar-top {
-  display: flex; align-items: flex-start; gap: 10px;
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
 }
 .prompt-input {
   flex: 1;
 }
 .prompt-input >>> .el-textarea__inner {
-  border: none; box-shadow: none; padding: 6px 4px; font-size: 14px;
-  background: transparent; resize: none;
+  border: none;
+  box-shadow: none;
+  padding: 6px 4px;
+  font-size: 14px;
+  background: transparent;
+  resize: none;
+}
+.prompt-input >>> .el-textarea__inner:focus {
+  box-shadow: none;
 }
-.prompt-input >>> .el-textarea__inner:focus { box-shadow: none; }
 .tpl-trigger {
-  flex-shrink: 0; padding: 0;
-  font-size: 13px; color: #606266;
+  flex-shrink: 0;
+  padding: 0;
+  font-size: 13px;
+  color: #606266;
+}
+.tpl-trigger:hover {
+  color: #409eff;
 }
-.tpl-trigger:hover { color: #409eff; }
 
 .bar-toolbar {
-  display: flex; align-items: center; justify-content: space-between;
-  padding: 8px 0 0; gap: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 0 0;
+  gap: 12px;
   border-top: 1px solid #f5f7fa;
   margin-top: 8px;
 }
-.toolbar-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
-.toolbar-right { display: flex; align-items: center; gap: 8px; }
-.quota { color: #909399; font-size: 12px; }
+.toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.quota {
+  color: #909399;
+  font-size: 12px;
+}
 
-.form-tip { color: #909399; font-size: 12px; line-height: 1.5; margin-top: 4px; }
+.form-tip {
+  color: #909399;
+  font-size: 12px;
+  line-height: 1.5;
+  margin-top: 4px;
+}
 </style>
diff --git a/src/views/ai/shopex-agent-center.vue b/src/views/ai/shopex-agent-center.vue
index 363fb89..9ce8eff 100644
--- a/src/views/ai/shopex-agent-center.vue
+++ b/src/views/ai/shopex-agent-center.vue
@@ -17,11 +17,11 @@
         </el-col>
         <el-col :span="8">
           <el-card shadow="never">
-              <div class="wallet-kv-label">余额</div>
-              <div class="flex">
-                <div class="wallet-kv-value">¥ {{ wallet.balance.cash_balance || 0 }}</div>
-                <el-button type="text">充值</el-button>
-              </div>
+            <div class="wallet-kv-label">余额</div>
+            <div class="flex">
+              <div class="wallet-kv-value">¥ {{ wallet.balance.cash_balance || 0 }}</div>
+              <el-button type="text">充值</el-button>
+            </div>
           </el-card>
         </el-col>
       </el-row>
@@ -37,9 +37,16 @@
         </div>
       </div>
       <el-row :gutter="16" class="app-grid">
-        <el-col v-for="row in filteredApplications" :key="row.app_id" :xs="24" :sm="12" :md="8" :lg="6">
+        <el-col
+          v-for="row in filteredApplications"
+          :key="row.app_id"
+          :xs="24"
+          :sm="12"
+          :md="8"
+          :lg="6"
+        >
           <el-card shadow="hover" class="app-card">
-            <div class='flex'>
+            <div class="flex">
               <div class="app-icon-box">
                 <img
                   v-if="isHttpImageUrl(row.icon_url)"
@@ -80,17 +87,12 @@
         </el-table>
       </el-dialog>
 
-      <el-dialog
-        title="应用用量"
-        :visible.sync="usageDialogVisible"
-        width="900px"
-        destroy-on-close
-      >
+      <el-dialog title="应用用量" :visible.sync="usageDialogVisible" width="900px" destroy-on-close>
         <div class="usage-toolbar">
-          <div class="usage-app-title">
-            {{ usageContext.app_name }} ({{ usageContext.app_id }})
-          </div>
-          <el-button type="primary" size="small" :loading="usageLoading" @click="loadUsage">刷新用量</el-button>
+          <div class="usage-app-title">{{ usageContext.app_name }} ({{ usageContext.app_id }})</div>
+          <el-button type="primary" size="small" :loading="usageLoading" @click="loadUsage"
+            >刷新用量</el-button
+          >
         </div>
 
         <el-row :gutter="12" style="margin-top: 12px">
@@ -141,7 +143,13 @@
         </el-row>
 
         <div style="margin-top: 16px; font-weight: 600">每日明细</div>
-        <el-table v-loading="usageLoading" :data="usageTimeSeries" stripe style="margin-top: 8px" size="small">
+        <el-table
+          v-loading="usageLoading"
+          :data="usageTimeSeries"
+          stripe
+          style="margin-top: 8px"
+          size="small"
+        >
           <el-table-column prop="period" label="日期" min-width="120" />
           <el-table-column prop="request_count" label="请求数" width="90" align="center" />
           <el-table-column prop="success_count" label="成功" width="80" align="center" />
diff --git a/src/views/ai/translate-tasks.vue b/src/views/ai/translate-tasks.vue
index 50d75ea..fd51ed8 100644
--- a/src/views/ai/translate-tasks.vue
+++ b/src/views/ai/translate-tasks.vue
@@ -1,7 +1,9 @@
 <template>
   <SpPage>
     <div slot="page-header" class="page-header">
-      <el-button type="primary" size="small" @click="openCreateDialog">{{ $t('2a2a72e5.87da21') }}</el-button>
+      <el-button type="primary" size="small" @click="openCreateDialog">{{
+        $t('2a2a72e5.87da21')
+      }}</el-button>
       <el-button size="small" @click="fetchTasks">{{ $t('2a2a72e5.694fc5') }}</el-button>
     </div>
 
@@ -13,7 +15,9 @@
       </el-table-column>
       <el-table-column :label="$t('2a2a72e5.3fea7c')" width="100">
         <template slot-scope="{ row }">
-          <el-tag :type="statusTagType(row.status)" size="small">{{ getStatusLabel(row.status) }}</el-tag>
+          <el-tag :type="statusTagType(row.status)" size="small">{{
+            getStatusLabel(row.status)
+          }}</el-tag>
         </template>
       </el-table-column>
       <el-table-column :label="$t('2a2a72e5.129d05')" min-width="160">
@@ -36,13 +40,16 @@
       </el-table-column>
       <el-table-column :label="$t('2a2a72e5.2b6bc0')" width="120">
         <template slot-scope="{ row }">
-          <el-button type="text" size="small" @click="openDetail(row)">{{ $t('2a2a72e5.f26225') }}</el-button>
+          <el-button type="text" size="small" @click="openDetail(row)">{{
+            $t('2a2a72e5.f26225')
+          }}</el-button>
           <el-button
             v-if="row.status === 'failed' || row.status === 'partial_success'"
             type="text"
             size="small"
             @click="handleRetry(row)"
-          >{{ $t('2a2a72e5.132c5c') }}</el-button>
+            >{{ $t('2a2a72e5.132c5c') }}</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -53,7 +60,12 @@
         :page-size="pageSize"
         :total="total"
         layout="total, prev, pager, next"
-        @current-change="(p) => { page = p; fetchTasks() }"
+        @current-change="
+          (p) => {
+            page = p
+            fetchTasks()
+          }
+        "
       />
     </div>
 
@@ -89,13 +101,15 @@
           </el-select>
         </el-form-item>
 
-        <el-form-item :label="$t('2a2a72e5.129d05')" prop="target_languages" :rules="[{ type: 'array', required: true, message: $t('2a2a72e5.c91ca0'), trigger: 'change' }]">
+        <el-form-item
+          :label="$t('2a2a72e5.129d05')"
+          prop="target_languages"
+          :rules="[
+            { type: 'array', required: true, message: $t('2a2a72e5.c91ca0'), trigger: 'change' }
+          ]"
+        >
           <el-checkbox-group v-model="createForm.target_languages">
-            <el-checkbox
-              v-for="(label, code) in langLabels"
-              :key="code"
-              :label="code"
-            >
+            <el-checkbox v-for="(label, code) in langLabels" :key="code" :label="code">
               {{ label }}
             </el-checkbox>
           </el-checkbox-group>
@@ -113,10 +127,14 @@
                 :data="selectorData"
                 border
                 size="small"
-                :row-key="currentConfig && currentConfig.rowKey || 'id'"
+                :row-key="(currentConfig && currentConfig.rowKey) || 'id'"
                 :lazy="currentConfig && currentConfig.isTree"
                 :load="currentConfig && currentConfig.isTree ? loadCategoryChildren : undefined"
-                :tree-props="currentConfig && currentConfig.isTree ? { children: 'children', hasChildren: 'has_children' } : undefined"
+                :tree-props="
+                  currentConfig && currentConfig.isTree
+                    ? { children: 'children', hasChildren: 'has_children' }
+                    : undefined
+                "
                 style="width: 100%"
                 @selection-change="onSelectionChange"
               >
@@ -125,17 +143,24 @@
                   :label="'ID'"
                   :width="currentConfig && currentConfig.isTree ? 140 : 90"
                 >
-                  <template slot-scope="{ row }">{{ row[currentConfig && currentConfig.rowKey || 'id'] }}</template>
+                  <template slot-scope="{ row }">{{
+                    row[(currentConfig && currentConfig.rowKey) || 'id']
+                  }}</template>
                 </el-table-column>
                 <el-table-column :label="getNameColumnLabel()">
                   <template slot-scope="{ row }">{{ getRowName(row) }}</template>
                 </el-table-column>
                 <el-table-column v-if="showTypeColumn" :label="$t('2a2a72e5.226b09')" width="120">
-                  <template slot-scope="{ row }">{{ getMarketingTypeLabel(row.marketing_type) }}</template>
+                  <template slot-scope="{ row }">{{
+                    getMarketingTypeLabel(row.marketing_type)
+                  }}</template>
                 </el-table-column>
               </el-table>
 
-              <div v-if="currentConfig && !currentConfig.isTree" style="margin-top: 8px; text-align: right">
+              <div
+                v-if="currentConfig && !currentConfig.isTree"
+                style="margin-top: 8px; text-align: right"
+              >
                 <el-pagination
                   :current-page="selectorPage"
                   :page-size="selectorPageSize"
@@ -161,7 +186,8 @@
           :loading="submitting"
           :disabled="selectedIds.length === 0 || createForm.target_languages.length === 0"
           @click="handleCreateTask"
-        >{{ $t('2a2a72e5.f5f585') }}</el-button>
+          >{{ $t('2a2a72e5.f5f585') }}</el-button
+        >
       </span>
     </el-dialog>
 
@@ -174,19 +200,43 @@
     >
       <div v-if="detailTask">
         <el-descriptions :column="2" border size="small">
-          <el-descriptions-item :label="$t('2a2a72e5.3a3778')">{{ detailTask.task_id }}</el-descriptions-item>
-          <el-descriptions-item :label="$t('2a2a72e5.5ebda1')">{{ getTypeLabel(detailTask.task_type) }}</el-descriptions-item>
+          <el-descriptions-item :label="$t('2a2a72e5.3a3778')">{{
+            detailTask.task_id
+          }}</el-descriptions-item>
+          <el-descriptions-item :label="$t('2a2a72e5.5ebda1')">{{
+            getTypeLabel(detailTask.task_type)
+          }}</el-descriptions-item>
           <el-descriptions-item :label="$t('2a2a72e5.3fea7c')">
-            <el-tag :type="statusTagType(detailTask.status)" size="small">{{ getStatusLabel(detailTask.status) }}</el-tag>
+            <el-tag :type="statusTagType(detailTask.status)" size="small">{{
+              getStatusLabel(detailTask.status)
+            }}</el-tag>
           </el-descriptions-item>
-          <el-descriptions-item :label="$t('2a2a72e5.129d05')">{{ formatLangs(detailTask.target_languages) }}</el-descriptions-item>
-          <el-descriptions-item :label="$t('2a2a72e5.330363')">{{ detailTask.success_count || 0 }}</el-descriptions-item>
-          <el-descriptions-item :label="$t('2a2a72e5.acd5cb')">{{ detailTask.failed_count || 0 }}</el-descriptions-item>
-          <el-descriptions-item :label="$t('2a2a72e5.599b5a')">{{ detailTask.total_count || 0 }}</el-descriptions-item>
-          <el-descriptions-item :label="$t('2a2a72e5.eca37c')">{{ formatTime(detailTask.created) }}</el-descriptions-item>
-          <el-descriptions-item :label="$t('2a2a72e5.a001a2')">{{ formatTime(detailTask.updated) }}</el-descriptions-item>
-          <el-descriptions-item v-if="detailTask.error_msg || detailTask.error_message" :label="$t('2a2a72e5.4604d5')" :span="2">
-            <span style="color: #F56C6C">{{ detailTask.error_msg || detailTask.error_message }}</span>
+          <el-descriptions-item :label="$t('2a2a72e5.129d05')">{{
+            formatLangs(detailTask.target_languages)
+          }}</el-descriptions-item>
+          <el-descriptions-item :label="$t('2a2a72e5.330363')">{{
+            detailTask.success_count || 0
+          }}</el-descriptions-item>
+          <el-descriptions-item :label="$t('2a2a72e5.acd5cb')">{{
+            detailTask.failed_count || 0
+          }}</el-descriptions-item>
+          <el-descriptions-item :label="$t('2a2a72e5.599b5a')">{{
+            detailTask.total_count || 0
+          }}</el-descriptions-item>
+          <el-descriptions-item :label="$t('2a2a72e5.eca37c')">{{
+            formatTime(detailTask.created)
+          }}</el-descriptions-item>
+          <el-descriptions-item :label="$t('2a2a72e5.a001a2')">{{
+            formatTime(detailTask.updated)
+          }}</el-descriptions-item>
+          <el-descriptions-item
+            v-if="detailTask.error_msg || detailTask.error_message"
+            :label="$t('2a2a72e5.4604d5')"
+            :span="2"
+          >
+            <span style="color: #f56c6c">{{
+              detailTask.error_msg || detailTask.error_message
+            }}</span>
           </el-descriptions-item>
         </el-descriptions>
       </div>
@@ -195,7 +245,12 @@
 </template>
 
 <script>
-import { getTranslateTasks, createTranslateTask, getTranslateTask, retryTranslateTask } from '@/api/translation'
+import {
+  getTranslateTasks,
+  createTranslateTask,
+  getTranslateTask,
+  retryTranslateTask
+} from '@/api/translation'
 import { getItemsList, getCategory, getTagList, getGoodsAttr } from '@/api/goods'
 import { getCardList } from '@/api/cardticket'
 import { getMarketingActivityList, seckillActivityGetList } from '@/api/promotions'
@@ -268,9 +323,7 @@ export default {
         },
         {
           label: this.$t('2a2a72e5.2f3635'),
-          types: [
-            { value: 'marketing.coupon', label: this.$t('2a2a72e5.2f3635') }
-          ]
+          types: [{ value: 'marketing.coupon', label: this.$t('2a2a72e5.2f3635') }]
         },
         {
           label: this.$t('2a2a72e5.252caa'),
@@ -298,9 +351,12 @@ export default {
       return this.getTypeConfig(this.createForm.task_type)
     },
     showTypeColumn() {
-      return ['marketing.fulldiscount', 'marketing.fullminus', 'marketing.fullgift', 'marketing.pluspricebuy'].includes(
-        this.createForm.task_type
-      )
+      return [
+        'marketing.fulldiscount',
+        'marketing.fullminus',
+        'marketing.fullgift',
+        'marketing.pluspricebuy'
+      ].includes(this.createForm.task_type)
     }
   },
   created() {
@@ -325,7 +381,10 @@ export default {
           nameField: 'category_name',
           isTree: true,
           fetchLevel: (parentId) =>
-            getCategory({ parent_id: parentId !== undefined ? parentId : 0, is_main_category: true })
+            getCategory({
+              parent_id: parentId !== undefined ? parentId : 0,
+              is_main_category: true
+            })
         },
         'goods.category.sale': {
           rowKey: 'category_id',
@@ -342,17 +401,20 @@ export default {
         'goods.brand': {
           rowKey: 'attribute_id',
           nameField: 'attribute_name',
-          fetch: (p) => getGoodsAttr({ page: p.page, pageSize: p.pageSize, attribute_type: 'brand' })
+          fetch: (p) =>
+            getGoodsAttr({ page: p.page, pageSize: p.pageSize, attribute_type: 'brand' })
         },
         'goods.params': {
           rowKey: 'attribute_id',
           nameField: 'attribute_name',
-          fetch: (p) => getGoodsAttr({ page: p.page, pageSize: p.pageSize, attribute_type: 'item_params' })
+          fetch: (p) =>
+            getGoodsAttr({ page: p.page, pageSize: p.pageSize, attribute_type: 'item_params' })
         },
         'goods.spec': {
           rowKey: 'attribute_id',
           nameField: 'attribute_name',
-          fetch: (p) => getGoodsAttr({ page: p.page, pageSize: p.pageSize, attribute_type: 'item_spec' })
+          fetch: (p) =>
+            getGoodsAttr({ page: p.page, pageSize: p.pageSize, attribute_type: 'item_spec' })
         },
         'shop.category': {
           rowKey: 'category_id',
@@ -377,7 +439,12 @@ export default {
         'marketing.package': {
           rowKey: 'package_id',
           nameField: 'package_name',
-          fetch: (p) => getMarketingActivityList({ page: p.page, pageSize: p.pageSize, marketing_type: 'package' })
+          fetch: (p) =>
+            getMarketingActivityList({
+              page: p.page,
+              pageSize: p.pageSize,
+              marketing_type: 'package'
+            })
         }
       }
       if (marketingTypeMap[taskType]) {
@@ -437,7 +504,9 @@ export default {
       const d = new Date(num * 1000)
       if (isNaN(d.getTime())) return ''
       const pad = (n) => String(n).padStart(2, '0')
-      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
+      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(
+        d.getHours()
+      )}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
     },
 
     openCreateDialog() {
@@ -602,7 +671,9 @@ export default {
 
     async handleRetry(row) {
       try {
-        await this.$confirm(this.$t('2a2a72e5.d84b07'), this.$t('2a2a72e5.e83a25'), { type: 'warning' })
+        await this.$confirm(this.$t('2a2a72e5.d84b07'), this.$t('2a2a72e5.e83a25'), {
+          type: 'warning'
+        })
         await retryTranslateTask(row.task_id)
         this.$message.success(this.$t('2a2a72e5.bcbe11'))
         this.fetchTasks()
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index ec12c32..f66353d 100755
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-  <div class="p-4">
+  <div>
     <div class="grid grid-cols-3 gap-4">
       <div v-for="(item, index) in realTimeData" :key="index">
         <div class="flex flex-col bg-white rounded-lg px-6">
diff --git a/src/views/decoration/web-config.test.mjs b/src/views/decoration/web-config.test.mjs
new file mode 100644
index 0000000..3eeb2b1
--- /dev/null
+++ b/src/views/decoration/web-config.test.mjs
@@ -0,0 +1,89 @@
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
+import test from 'node:test'
+
+const root = process.cwd()
+const read = (filePath) => readFileSync(path.resolve(root, filePath), 'utf8')
+
+test('web config page contains mall logo, login page, and SEO settings', () => {
+  const source = read('src/views/decoration/web-config.vue')
+
+  assert.match(source, /商城全局配置/)
+  assert.match(source, /component:\s*'Divider'/)
+  assert.match(source, /商城 Logo/)
+  assert.match(source, /登录页/)
+  assert.match(source, /SEO 配置/)
+  assert.match(source, /fieldName:\s*'logo_light'/)
+  assert.match(source, /fieldName:\s*'logo_dark'/)
+  assert.doesNotMatch(source, /fieldName:\s*'login_logo'/)
+  assert.match(source, /fieldName:\s*'login_background'/)
+  assert.match(source, /fieldName:\s*'title'/)
+  assert.match(source, /fieldName:\s*'mate_description'/)
+  assert.match(source, /fieldName:\s*'mate_keywords'/)
+  assert.match(source, /component:\s*'Textarea'/)
+})
+
+test('web config page loads and saves mall global plus SEO settings through two APIs', () => {
+  const source = read('src/views/decoration/web-config.vue')
+
+  assert.match(source, /getLoginPageSetting/)
+  assert.doesNotMatch(source, /getGlobalSetting/)
+  assert.match(source, /getTdkglobalset/)
+  assert.match(source, /saveLoginPageSetting/)
+  assert.doesNotMatch(source, /saveGlobalSetting/)
+  assert.match(source, /saveTdkglobalset/)
+  assert.match(source, /logo_light:\s*loginPageSetting\.logo_light/)
+  assert.match(source, /logo_dark:\s*loginPageSetting\.logo_dark/)
+  assert.match(source, /login_background:\s*loginPageSetting\.background/)
+  assert.match(source, /logo_light:\s*values\.logo_light/)
+  assert.match(source, /logo_dark:\s*values\.logo_dark/)
+  assert.doesNotMatch(source, /login_logo/)
+  assert.match(source, /background:\s*values\.login_background/)
+  assert.match(source, /title:\s*tdkSetting\.title/)
+  assert.match(source, /mate_description:\s*tdkSetting\.mate_description/)
+  assert.match(source, /mate_keywords:\s*tdkSetting\.mate_keywords/)
+  assert.match(source, /title:\s*values\.title/)
+  assert.match(source, /mate_description:\s*values\.mate_description/)
+  assert.match(source, /mate_keywords:\s*values\.mate_keywords/)
+  assert.doesNotMatch(source, /seo_title/)
+  assert.doesNotMatch(source, /seo_keywords/)
+  assert.doesNotMatch(source, /seo_description/)
+})
+
+test('web config API and routes are wired to the new page', () => {
+  const api = read('src/api/webtemplate.js')
+  const moduleRoute = read('src/router/routes/modules/decoration.js')
+  const legacyRoute = read('src/router/src/route-template.js')
+
+  assert.match(api, /getLoginPageSetting/)
+  assert.match(api, /saveLoginPageSetting/)
+  assert.match(api, /\/pctemplate\/loginPage\/setting/)
+  assert.doesNotMatch(api, /\/pctemplate\/global\/setting/)
+  assert.match(moduleRoute, /商城全局配置/)
+  assert.equal((moduleRoute.match(/@\/views\/decoration\/web-config/g) || []).length, 2)
+  assert.equal((legacyRoute.match(/@\/views\/decoration\/web-config/g) || []).length, 2)
+})
+
+test('SpFormPlus provides Divider and Textarea field components', () => {
+  const field = read('src/components/sp-form-plus/form-field.js')
+  const form = read('src/components/sp-form-plus/index.vue')
+  const styles = read('src/components/sp-form-plus/form-field.scss')
+  const useForm = read('src/composables/useForm.js')
+
+  assert.match(field, /renderDivider/)
+  assert.match(field, /renderTextarea/)
+  assert.match(field, /divider:\s*\(props\)\s*=>\s*this\.renderDivider\(props\)/)
+  assert.match(field, /imagepicker:\s*\(props\)\s*=>\s*this\.renderImagePicker\(props\)/)
+  assert.match(field, /textarea:\s*\(props\)\s*=>\s*this\.renderTextarea\(props,\s*hFn\)/)
+  assert.match(form, /\['group', 'divider'\]\.includes\(item\.component\.toLowerCase\(\)\)/)
+  assert.match(styles, /\.form-field-divider/)
+  assert.doesNotMatch(styles, /\.form-field-group/)
+  assert.match(styles, /background-color:\s*#298dff/)
+  assert.match(styles, /padding:\s*6px 0 6px 8px/)
+  assert.match(styles, /font-weight:\s*500/)
+  assert.match(styles, /font-size:\s*16px/)
+  assert.match(useForm, /formData:\s*\{\s*\.\.\.\(this\.value \|\| \{\}\)\s*\}/)
+  assert.match(useForm, /value:\s*this\.formData/)
+  assert.doesNotMatch(useForm, /value:\s*this\.value/)
+})
diff --git a/src/views/decoration/web-config.vue b/src/views/decoration/web-config.vue
new file mode 100644
index 0000000..2c59e9e
--- /dev/null
+++ b/src/views/decoration/web-config.vue
@@ -0,0 +1,141 @@
+<!--
+  Copyright © ShopeX （http://www.shopex.cn）. All rights reserved.
+  See LICENSE file for license details.
+-->
+
+<template>
+  <SpPage title="商城全局配置">
+    <template slot="page-footer">
+      <div class="text-center">
+        <el-button type="primary" :loading="loading" @click="onSubmit">保存</el-button>
+      </div>
+    </template>
+    <Form class="mx-4" />
+  </SpPage>
+</template>
+
+<script>
+import { useForm } from '@/composables'
+
+const IMAGE_PICKER_PROPS = {
+  size: 'small'
+}
+
+const [Form, FormApi] = useForm({
+  formType: 'displayForm',
+  labelWidth: '120px',
+  formItems: [
+    {
+      component: 'Divider',
+      fieldName: 'divider_logo',
+      label: '商城 Logo'
+    },
+    {
+      component: 'ImagePicker',
+      componentProps: IMAGE_PICKER_PROPS,
+      fieldName: 'logo_light',
+      label: '浅色 Logo'
+    },
+    {
+      component: 'ImagePicker',
+      componentProps: IMAGE_PICKER_PROPS,
+      fieldName: 'logo_dark',
+      label: '深色 Logo'
+    },
+    {
+      component: 'Divider',
+      fieldName: 'divider_login',
+      label: '登录页'
+    },
+    {
+      component: 'ImagePicker',
+      componentProps: IMAGE_PICKER_PROPS,
+      fieldName: 'login_background',
+      label: '背景图'
+    },
+    {
+      component: 'Divider',
+      fieldName: 'divider_seo',
+      label: 'SEO 配置'
+    },
+    {
+      component: 'Input',
+      fieldName: 'title',
+      label: '网站标题'
+    },
+    {
+      component: 'Input',
+      fieldName: 'mate_description',
+      label: '站点描述'
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        rows: 3
+      },
+      fieldName: 'mate_keywords',
+      label: '关键词',
+      tip: '多个关键词请使用英文逗号隔开'
+    }
+  ],
+  showDefaultActions: false
+})
+
+export default {
+  name: 'WebConfig',
+  components: {
+    Form
+  },
+  data() {
+    return {
+      loading: false
+    }
+  },
+  mounted() {
+    this.loadData()
+  },
+  methods: {
+    async loadData() {
+      this.loading = true
+      try {
+        const [loginPageSetting = {}, tdkSetting = {}] = await Promise.all([
+          this.$api.webtemplate.getLoginPageSetting(),
+          this.$api.tdkset.getTdkglobalset()
+        ])
+
+        FormApi.setFieldsValue({
+          logo_light: loginPageSetting.logo_light || '',
+          logo_dark: loginPageSetting.logo_dark || '',
+          login_background: loginPageSetting.background || '',
+          title: tdkSetting.title || '',
+          mate_description: tdkSetting.mate_description || '',
+          mate_keywords: tdkSetting.mate_keywords || ''
+        })
+      } finally {
+        this.loading = false
+      }
+    },
+    async onSubmit() {
+      this.loading = true
+      try {
+        const values = FormApi.getFieldsValue()
+        await Promise.all([
+          this.$api.webtemplate.saveLoginPageSetting({
+            logo_light: values.logo_light,
+            logo_dark: values.logo_dark,
+            background: values.login_background
+          }),
+          this.$api.tdkset.saveTdkglobalset({
+            title: values.title,
+            mate_description: values.mate_description,
+            mate_keywords: values.mate_keywords
+          })
+        ])
+        this.$message.success('保存成功')
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/decoration/web-menu/_id.vue b/src/views/decoration/web-menu/_id.vue
new file mode 100644
index 0000000..3370278
--- /dev/null
+++ b/src/views/decoration/web-menu/_id.vue
@@ -0,0 +1,332 @@
+<!--
+  导航菜单：创建 /decoration/web-menu/create 与编辑 /decoration/web-menu/:id 共用
+  编辑模式下维护菜单项（最多三级，递归拖拽 + $dialog.open + MenuItemForm）
+-->
+<template>
+  <SpPage>
+    <SpPageHeader :title="pageTitle" />
+
+    <SpFormPlus
+      ref="menuFormRef"
+      v-model="menuForm"
+      form-type="form"
+      label-width="120px"
+      class="max-w-[800px]"
+      :show-default-actions="false"
+      :form-items="menuFormItems"
+    />
+
+    <el-alert
+      v-if="isCreate"
+      class="mt-4 !ml-[120px] !max-w-[800px]"
+      type="info"
+      :closable="false"
+      :title="$t('80206cbf.83e4fb')"
+      show-icon
+    />
+
+    <template v-else>
+      <div class="max-w-[800px] pl-[120px]">
+        <div
+          v-loading="loading"
+          class="min-h-[120px] rounded-lg border border-gray-200 bg-white p-5 shadow-sm"
+        >
+          <div class="mb-5 flex items-center justify-between gap-3">
+            <span class="text-base font-medium text-gray-800">{{ $t('80206cbf.7419d6') }}</span>
+            <el-button type="text" class="!p-0 primary" @click="openItemDialog(null, 0)">
+              {{ $t('80206cbf.648c5e') }}
+            </el-button>
+          </div>
+
+          <draggable
+            v-model="topItems"
+            handle=".drag-handle"
+            :animation="200"
+            class="flex flex-col gap-5"
+            @end="onTopSortEnd"
+          >
+            <div v-for="item in topItems" :key="item.id" class="flex flex-col gap-3">
+              <WebMenuItemBlock
+                :node="item"
+                :depth="1"
+                :max-depth="maxMenuItemDepth"
+                :open-item-dialog="openItemDialog"
+                :handle-delete-item="handleDeleteItem"
+                :on-child-sort-end="onChildSortEnd"
+                :item-link-label="itemLinkLabel"
+              />
+            </div>
+          </draggable>
+        </div>
+      </div>
+    </template>
+
+    <div class="mt-8 flex max-w-[800px] gap-3 pl-[120px]">
+      <el-button @click="goList">{{ $t('80206cbf.625fb2') }}</el-button>
+      <el-button type="primary" :loading="menuSaving" @click="saveMenu">{{
+        $t('80206cbf.be5fbb')
+      }}</el-button>
+    </div>
+  </SpPage>
+</template>
+
+<script>
+import Draggable from 'vuedraggable'
+import SpFormPlus from '@/components/sp-form-plus'
+import MenuItemForm from './components/MenuItemForm.vue'
+import WebMenuItemBlock from './components/WebMenuItemBlock.vue'
+import { LINK_PATH } from '@/consts'
+import { MENU_ITEM_PAGE_PRESETS } from './components/menuItemPagePresets'
+
+const defaultMenuForm = () => ({
+  name: '',
+  key: ''
+})
+
+export default {
+  name: 'WebMenuId',
+  components: { Draggable, SpFormPlus, WebMenuItemBlock },
+  data() {
+    return {
+      /** 菜单项最大层级（1=顶级，3=共三级） */
+      maxMenuItemDepth: 3,
+      loading: false,
+      menuSaving: false,
+      menuForm: defaultMenuForm(),
+      topItems: []
+    }
+  },
+  computed: {
+    isCreate() {
+      return this.$route.name === 'webMenuCreate'
+    },
+    menuId() {
+      if (this.isCreate) return null
+      const id = Number(this.$route.params.id)
+      return Number.isFinite(id) && id > 0 ? id : null
+    },
+    pageTitle() {
+      return this.isCreate ? this.$t('80206cbf.ba750e') : this.$t('80206cbf.ca3472')
+    },
+    menuFormItems() {
+      return [
+        {
+          fieldName: 'name',
+          label: this.$t('80206cbf.8ee9f2'),
+          component: 'input',
+          rules: [{ required: true, message: this.$t('80206cbf.4cd562'), trigger: 'blur' }],
+          componentProps: { placeholder: this.$t('80206cbf.eb6d93'), clearable: true }
+        },
+        {
+          fieldName: 'key',
+          label: this.$t('80206cbf.f3c00c'),
+          component: 'input',
+          rules: [{ required: true, message: this.$t('80206cbf.59a3f5'), trigger: 'blur' }],
+          componentProps: { placeholder: this.$t('80206cbf.645de9'), clearable: true }
+        }
+      ]
+    }
+  },
+  watch: {
+    $route: {
+      handler() {
+        this.bootstrap()
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    /** 为树节点补全 _expanded，保证任意深度子级可渲染 */
+    decorateMenuTree(nodes) {
+      if (!Array.isArray(nodes)) return []
+      return nodes.map((n) => ({
+        ...n,
+        _expanded: n._expanded !== undefined ? n._expanded : true,
+        children: this.decorateMenuTree(n.children || [])
+      }))
+    },
+    itemLinkLabel(item) {
+      const lt = item.link_type || 'url'
+      const v = item.link_value != null ? String(item.link_value) : ''
+      const title = String(item.link_extra?.title || '').trim()
+      const typeLabel = LINK_PATH[lt] || lt
+
+      if (lt === 'none' || (!title && !v)) {
+        return '—'
+      }
+
+      if (title) {
+        return typeLabel ? `${typeLabel}：${title}` : title
+      }
+
+      if (lt === 'url') {
+        const preset = MENU_ITEM_PAGE_PRESETS.find((entry) => entry.value === v)
+        const presetLabel = preset ? this.$t(preset.labelKey) : v || '—'
+        return typeLabel ? `${typeLabel}：${presetLabel}` : presetLabel
+      }
+
+      return typeLabel ? `${typeLabel}：${v || '—'}` : v || '—'
+    },
+    bootstrap() {
+      if (this.isCreate) {
+        this.menuForm = defaultMenuForm()
+        this.topItems = []
+        return
+      }
+      if (!this.menuId) {
+        this.$message.error(this.$t('80206cbf.76ac0c'))
+        return
+      }
+      this.fetchDetail()
+    },
+    goList() {
+      this.$router.replace('/decoration/web-menu')
+    },
+    async saveMenu() {
+      try {
+        await this.$refs.menuFormRef.validate()
+      } catch (e) {
+        return
+      }
+      this.menuSaving = true
+      try {
+        if (this.isCreate) {
+          const created = await this.$api.decoration.createMenu(this.menuForm)
+          const newId = created && created.id != null ? Number(created.id) : null
+          if (!newId) {
+            this.$message.error(this.$t('80206cbf.d97d00'))
+            return
+          }
+          this.$message.success(this.$t('80206cbf.3b1083'))
+          this.$router.replace(`/decoration/web-menu/${newId}`)
+          return
+        }
+        await this.$api.decoration.updateMenu(this.menuId, this.menuForm)
+        this.$message.success(this.$t('80206cbf.3b1083'))
+        await this.fetchDetail()
+      } catch (e) {
+        // 全局拦截已提示
+      } finally {
+        this.menuSaving = false
+      }
+    },
+    async fetchDetail() {
+      if (!this.menuId) return
+      this.loading = true
+      try {
+        const menu = await this.$api.decoration.getMenuDetail(this.menuId)
+        if (!menu) {
+          this.$message.error(this.$t('80206cbf.dd36ca'))
+          return
+        }
+        this.menuForm = {
+          name: menu.name != null ? menu.name : '',
+          key: menu.key != null ? menu.key : ''
+        }
+        this.topItems = this.decorateMenuTree(menu.items || [])
+      } catch (e) {
+        console.error(e)
+        this.$message.error((e && e.message) || this.$t('80206cbf.0e2999'))
+      } finally {
+        this.loading = false
+      }
+    },
+    openItemDialog(item, parentIdForCreate) {
+      if (!this.menuId) return
+      const editingItemId = item ? item.id : null
+      const currentParentId = item ? item.parent_id : parentIdForCreate
+      const normalizeLinkType = (linkType) => {
+        const value = String(linkType || '').trim()
+        return value && value !== 'none' ? value : ''
+      }
+      const initialValue = item
+        ? {
+            id: item.id,
+            name: item.name,
+            path: {
+              linkPage: normalizeLinkType(item.link_type),
+              title: item.link_extra?.title || item.name || '',
+              id: item.link_value != null ? String(item.link_value) : '',
+              extra: item.link_extra || {}
+            },
+            imageUrl: item.image_url != null ? item.image_url : '',
+            sort: item.sort
+          }
+        : { name: '', path: null, imageUrl: '', sort: 0 }
+
+      const formVmHolder = { vm: null }
+      const h = this.$createElement
+
+      this.$dialog.open({
+        title: editingItemId ? this.$t('80206cbf.cd1e63') : this.$t('80206cbf.e0b6e8'),
+        size: 'small',
+        buttonConfirm: { text: this.$t('80206cbf.e83a25') },
+        content: h(MenuItemForm, {
+          props: { initialValue },
+          ref: (vm) => {
+            formVmHolder.vm = vm
+          }
+        }),
+        confirmBefore: async () => {
+          const formVm = formVmHolder.vm
+          if (!formVm || typeof formVm.validate !== 'function') {
+            throw new Error(this.$t('80206cbf.a733c4'))
+          }
+          await formVm.validate()
+          const selectedPath = formVm.form.path || {}
+          const hasSelectedPath = Boolean(
+            selectedPath.linkPage && selectedPath.id != null && selectedPath.id !== ''
+          )
+          const payload = {
+            name: formVm.form.name,
+            link_type: hasSelectedPath ? selectedPath.linkPage : 'none',
+            link_value: hasSelectedPath ? String(selectedPath.id) : '',
+            link_extra: hasSelectedPath
+              ? {
+                  ...(selectedPath.extra || {}),
+                  title: selectedPath.title || ''
+                }
+              : {},
+            image_url: formVm.form.imageUrl || '',
+            sort: formVm.form.sort != null ? Number(formVm.form.sort) : 0,
+            status: editingItemId != null && item && item.status != null ? Number(item.status) : 1,
+            parent_id: currentParentId
+          }
+          if (editingItemId) {
+            await this.$api.decoration.updateMenuItem(this.menuId, editingItemId, payload)
+          } else {
+            await this.$api.decoration.createMenuItem(this.menuId, payload)
+          }
+          this.$message.success(this.$t('80206cbf.3b1083'))
+          await this.fetchDetail()
+        }
+      })
+    },
+    async handleDeleteItem(item) {
+      if (!this.menuId) return
+      const hasKids = item.children && item.children.length
+      const tip = hasKids
+        ? this.$t('80206cbf.78b5ac', { name: item.name })
+        : this.$t('80206cbf.c0650e', { name: item.name })
+      try {
+        await this.$confirm(tip, this.$t('80206cbf.50eaf9'), { type: 'warning' })
+        await this.$api.decoration.removeMenuItem(this.menuId, item.id)
+        this.$message.success(this.$t('80206cbf.0007d1'))
+        await this.fetchDetail()
+      } catch (e) {
+        if (e !== 'cancel') console.error(e)
+      }
+    },
+    async onTopSortEnd() {
+      if (!this.menuId) return
+      const sorts = this.topItems.map((row, idx) => ({ id: row.id, sort: idx }))
+      await this.$api.decoration.sortMenuItems(this.menuId, sorts)
+    },
+    async onChildSortEnd(parentItem) {
+      if (!this.menuId) return
+      const sorts = parentItem.children.map((child, idx) => ({ id: child.id, sort: idx }))
+      await this.$api.decoration.sortMenuItems(this.menuId, sorts)
+    }
+  }
+}
+</script>
diff --git a/src/views/decoration/web-menu/components/MenuItemForm.vue b/src/views/decoration/web-menu/components/MenuItemForm.vue
new file mode 100644
index 0000000..92a2155
--- /dev/null
+++ b/src/views/decoration/web-menu/components/MenuItemForm.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="menu-item-form-sp w-full max-w-[600px]">
+    <SpFormPlus
+      ref="formPlusRef"
+      v-model="form"
+      form-type="form"
+      label-width="100px"
+      class="w-full"
+      :show-default-actions="false"
+      :form-items="formItems"
+    />
+  </div>
+</template>
+
+<script>
+import SpFormPlus from '@/components/sp-form-plus'
+import SpImagePicker from '@/components/sp-image-picker/index.vue'
+import SpPathSelector from '@/components/sp-path-selector/index.vue'
+
+export default {
+  name: 'MenuItemForm',
+  components: { SpFormPlus, SpImagePicker, SpPathSelector },
+  props: {
+    initialValue: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      form: {
+        name: '',
+        path: null,
+        imageUrl: '',
+        sort: 0
+      }
+    }
+  },
+  computed: {
+    formItems() {
+      return [
+        {
+          fieldName: 'name',
+          label: this.$t('7856f5b5.d7ec2d'),
+          component: 'input',
+          formItemClass: 'w-full',
+          rules: [{ required: true, message: this.$t('7856f5b5.06e2f8'), trigger: 'blur' }],
+          componentProps: {
+            clearable: true,
+            placeholder: this.$t('7856f5b5.2ff819')
+          }
+        },
+        {
+          fieldName: 'path',
+          label: this.$t('7856f5b5.0fec18'),
+          component: ({ value, onInput }) => (
+            <SpPathSelector value={value} platform='web' on-input={onInput} />
+          ),
+          formItemClass: 'w-full'
+        },
+        {
+          fieldName: 'imageUrl',
+          label: this.$t('d6124b35.6bfb9b'),
+          component: ({ value, onInput }) => <SpImagePicker value={value} on-input={onInput} />,
+          formItemClass: 'w-full'
+        },
+        {
+          fieldName: 'sort',
+          label: this.$t('7856f5b5.c360e9'),
+          component: ({ value, onInput }) => (
+            <el-input-number
+              class='menu-item-form-sp__sort-input'
+              value={Number.isFinite(Number(value)) ? Number(value) : 0}
+              min={0}
+              step={1}
+              precision={0}
+              controlsPosition='right'
+              onInput={onInput}
+            />
+          ),
+          formItemClass: 'menu-item-form-sp__sort'
+        }
+      ]
+    }
+  },
+  watch: {
+    initialValue: {
+      deep: true,
+      handler() {
+        this.syncForm()
+      }
+    }
+  },
+  created() {
+    this.syncForm()
+  },
+  methods: {
+    validate() {
+      return this.$refs.formPlusRef.validate()
+    },
+    syncForm() {
+      const iv = this.initialValue || {}
+      this.form = {
+        name: iv.name != null ? iv.name : '',
+        path: iv.path || null,
+        imageUrl: iv.imageUrl != null ? iv.imageUrl : iv.image_url != null ? iv.image_url : '',
+        sort: iv.sort != null ? Number(iv.sort) : 0
+      }
+    },
+    handleAction(conf) {
+      if (!conf || conf.key === 'close') {
+        this.$emit('close', null)
+        return
+      }
+      if (conf.key === 'confirm' || conf.key === 'save') {
+        this.submit()
+      }
+    },
+    async submit() {
+      this.$emit('loading', true)
+      try {
+        await this.validate()
+        const iv = this.initialValue || {}
+        this.$emit('close', {
+          id: iv.id,
+          name: this.form.name,
+          path: this.form.path,
+          imageUrl: this.form.imageUrl,
+          sort: this.form.sort
+        })
+      } catch (e) {
+        // 校验失败保持弹窗
+      } finally {
+        this.$emit('loading', false)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.menu-item-form-sp ::v-deep {
+  .menu-item-form-sp__sort .el-input-number {
+    width: 180px;
+  }
+}
+</style>
diff --git a/src/views/decoration/web-menu/components/WebMenuItemBlock.vue b/src/views/decoration/web-menu/components/WebMenuItemBlock.vue
new file mode 100644
index 0000000..f0375e7
--- /dev/null
+++ b/src/views/decoration/web-menu/components/WebMenuItemBlock.vue
@@ -0,0 +1,123 @@
+<!--
+  单个菜单项节点：一行卡片 + 子级 draggable（递归，最大深度由 maxDepth 控制）
+-->
+<template>
+  <div class="flex flex-col gap-3">
+    <div class="group flex overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm">
+      <div
+        class="drag-handle flex shrink-0 cursor-move select-none items-center self-stretch border-r border-gray-200 bg-gray-50 px-3 text-[#909399]"
+      >
+        ⠿
+      </div>
+      <div class="flex min-h-[40px] min-w-0 flex-1 items-center gap-2.5 px-3 sm:px-4">
+        <span
+          v-if="node.children && node.children.length"
+          class="w-5 shrink-0 cursor-pointer text-gray-600"
+          @click="node._expanded = !node._expanded"
+        >
+          <SpIcon class="menu-icon" :name="node._expanded ? 'down' : 'right'" :size="18" />
+        </span>
+        <span v-else class="w-5 shrink-0" />
+        <span class="min-w-0 flex-1 font-medium text-gray-800">{{ node.name }}</span>
+        <span class="min-w-0 flex-1 truncate text-gray-400" :title="itemLinkLabel(node)">{{
+          itemLinkLabel(node)
+        }}</span>
+        <div
+          class="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity duration-150 ease-in-out pointer-events-none group-hover:pointer-events-auto group-hover:opacity-100 [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:opacity-100"
+        >
+          <SpIcon
+            v-if="depth < maxDepth"
+            button
+            name="add-one"
+            :size="16"
+            class="!p-1.5 text-base text-gray-600 hover:text-gray-800"
+            :title="$t('e45f0be0.d87298')"
+            @click="openItemDialog(null, node.id)"
+          />
+          <SpIcon
+            button
+            name="write"
+            :size="16"
+            class="!p-1.5 text-base text-gray-600 hover:text-gray-800"
+            :title="$t('e45f0be0.95b351')"
+            @click="openItemDialog(node, 0)"
+          />
+          <SpIcon
+            button
+            name="delete"
+            :size="16"
+            class="!p-1.5 text-base text-[#f56c6c] hover:text-[#f78989]"
+            :title="$t('e45f0be0.2f4aad')"
+            @click="handleDeleteItem(node)"
+          />
+        </div>
+      </div>
+    </div>
+
+    <draggable
+      v-if="depth < maxDepth && node._expanded && node.children && node.children.length"
+      v-model="node.children"
+      handle=".drag-handle"
+      :animation="200"
+      tag="div"
+      class="ml-1 flex flex-col gap-3 border-l-2 border-gray-100 pl-5 sm:ml-2 sm:pl-6"
+      @end="onChildSortEnd(node)"
+    >
+      <div v-for="child in node.children" :key="child.id" class="flex flex-col gap-3">
+        <WebMenuItemBlock
+          :node="child"
+          :depth="depth + 1"
+          :max-depth="maxDepth"
+          :open-item-dialog="openItemDialog"
+          :handle-delete-item="handleDeleteItem"
+          :on-child-sort-end="onChildSortEnd"
+          :item-link-label="itemLinkLabel"
+        />
+      </div>
+    </draggable>
+  </div>
+</template>
+
+<script>
+import Draggable from 'vuedraggable'
+
+export default {
+  name: 'WebMenuItemBlock',
+  components: {
+    Draggable,
+    WebMenuItemBlock: () => import('./WebMenuItemBlock.vue')
+  },
+  props: {
+    node: {
+      type: Object,
+      required: true
+    },
+    /** 当前节点所在层级，顶级为 1 */
+    depth: {
+      type: Number,
+      default: 1
+    },
+    /** 最大层级（例如 3 表示支持三级菜单项） */
+    maxDepth: {
+      type: Number,
+      default: 3
+    },
+    openItemDialog: {
+      type: Function,
+      required: true
+    },
+    handleDeleteItem: {
+      type: Function,
+      required: true
+    },
+    onChildSortEnd: {
+      type: Function,
+      required: true
+    },
+    itemLinkLabel: {
+      type: Function,
+      required: true
+    }
+  }
+}
+</script>
diff --git a/src/views/decoration/web-menu/components/menuItemPagePresets.js b/src/views/decoration/web-menu/components/menuItemPagePresets.js
new file mode 100644
index 0000000..172c09d
--- /dev/null
+++ b/src/views/decoration/web-menu/components/menuItemPagePresets.js
@@ -0,0 +1,15 @@
+/**
+ * 站内页面预设（link_type=url 时写入 link_value，与 ecshopx-web 路由对齐）
+ * 可按项目实际路由增删
+ */
+/** labelKey：与 generate_i18n_key 一致，文案在 locales 中维护 */
+export const MENU_ITEM_PAGE_PRESETS = [
+  { labelKey: 'fc8ead3c.fa5612', value: '/collections/1' },
+  { labelKey: 'fc8ead3c.c4186b', value: '/article/1' },
+  { labelKey: 'fc8ead3c.c017be', value: '/cart' },
+  { labelKey: 'fc8ead3c.12688a', value: '/account' }
+]
+
+export function defaultPresetPath() {
+  return MENU_ITEM_PAGE_PRESETS[0]?.value ?? '/cart'
+}
diff --git a/src/views/decoration/web-menu/index.vue b/src/views/decoration/web-menu/index.vue
new file mode 100644
index 0000000..1f8cb4c
--- /dev/null
+++ b/src/views/decoration/web-menu/index.vue
@@ -0,0 +1,132 @@
+<!--
+  Web 端商城 — 导航菜单列表（ThemeBundle /web-menus）
+  新增 → /decoration/web-menu/create；编辑 → /decoration/web-menu/:id；删除：Finder api
+-->
+<template>
+  <SpPage>
+    <SpFormPlus
+      ref="searchForm"
+      v-model="searchParams"
+      :form-items="searchFormItems"
+      form-type="searchForm"
+      @submit="onSearch"
+    />
+
+    <div class="action-container mt-4">
+      <el-button type="primary" @click="goCreate">{{ $t('738edee2.2f39c3') }}</el-button>
+    </div>
+
+    <SpFinder
+      ref="finder"
+      url="/web-menus"
+      fixed-row-action
+      row-actions-width="180px"
+      no-selection
+      row-key="id"
+      :setting="finderSetting"
+      :hooks="{ beforeSearch: beforeSearch }"
+    />
+  </SpPage>
+</template>
+
+<script>
+import { createSetting } from '@shopex-ui/finder'
+import SpFormPlus from '@/components/sp-form-plus'
+
+export default {
+  name: 'WebMenuIndex',
+  components: { SpFormPlus },
+  data() {
+    return {
+      searchParams: { name: '' }
+    }
+  },
+  computed: {
+    searchFormItems() {
+      return [
+        {
+          fieldName: 'name',
+          label: this.$t('738edee2.8ee9f2'),
+          component: 'input',
+          componentProps: {
+            placeholder: this.$t('738edee2.4cd562'),
+            clearable: true
+          }
+        }
+      ]
+    },
+    finderSetting() {
+      return createSetting({
+        columns: [
+          { name: 'ID', key: 'id', width: 80 },
+          { name: this.$t('738edee2.ff36f6'), key: 'name' },
+          {
+            name: this.$t('738edee2.7419d6'),
+            key: 'top_level_item_names',
+            minWidth: 200,
+            render: (h, scope) => {
+              const raw = scope.row.top_level_item_names
+              const text = raw != null && String(raw).trim() !== '' ? String(raw).trim() : '—'
+              return h(
+                'span',
+                {
+                  style: {
+                    color: text === '—' ? '#909399' : '#606266',
+                    whiteSpace: 'normal',
+                    wordBreak: 'break-all'
+                  },
+                  attrs: text !== '—' ? { title: text } : {}
+                },
+                text
+              )
+            }
+          }
+        ],
+        actions: [
+          {
+            name: this.$t('738edee2.95b351'),
+            key: 'edit',
+            type: 'button',
+            buttonType: 'text',
+            action: {
+              type: 'link',
+              handler: ([row]) => row && this.$router.push(`/decoration/web-menu/${row.id}`)
+            }
+          },
+          {
+            name: this.$t('738edee2.2f4aad'),
+            key: 'delete',
+            type: 'button',
+            buttonType: 'text',
+            action: {
+              type: 'api',
+              path: '/web-menus/{id}',
+              method: 'delete',
+              confirm: true,
+              confirmTip: (rows) => {
+                const row = Array.isArray(rows) ? rows[0] : rows
+                return row ? this.$t('738edee2.1a06dc', { name: row.name }) : ''
+              }
+            }
+          }
+        ]
+      })
+    }
+  },
+  methods: {
+    goCreate() {
+      this.$router.push('/decoration/web-menu/create')
+    },
+    onSearch() {
+      this.$refs.finder.refresh(true)
+    },
+    beforeSearch(query) {
+      const q = { ...query, ...this.searchParams }
+      if (q.page_size == null && q.pageSize != null) {
+        q.page_size = q.pageSize
+      }
+      return q
+    }
+  }
+}
+</script>
diff --git a/src/views/decoration/web-template/decorationRouteMixin.js b/src/views/decoration/web-template/decorationRouteMixin.js
new file mode 100644
index 0000000..975941a
--- /dev/null
+++ b/src/views/decoration/web-template/decorationRouteMixin.js
@@ -0,0 +1,110 @@
+/**
+ * 装修编辑页共用：加载/保存（有 templateId 时走 pctemplate API，否则 session 草稿）
+ */
+import SpWebDecoration from '@/components/sp-web-decoration/index.vue'
+import {
+  loadDecorationContentFromApi,
+  savePageDslToApi,
+  saveHeaderDslToApi,
+  saveFooterDslToApi
+} from '@/components/sp-web-decoration/adapters/apiPersistence'
+
+const {
+  loadHomeDecoration,
+  saveHomeDecoration,
+  loadHeaderFooterDecoration,
+  saveHeaderFooterDecoration
+} = require('@/components/sp-web-decoration/adapters/homeDecoration')
+
+export default {
+  components: {
+    SpWebDecoration
+  },
+  data() {
+    return {
+      initialDsl: null,
+      isLoading: true,
+      /** 来自 API 的模板内容行 id，保存时回传 */
+      contentRowId: 0
+    }
+  },
+  methods: {
+    async decorationBootstrap() {
+      if (!this.isSupportedScene) {
+        this.initialDsl = null
+        this.isLoading = false
+        return
+      }
+
+      this.isLoading = true
+      try {
+        if (this.templateId) {
+          const decoration = await loadDecorationContentFromApi({
+            templateId: this.templateId,
+            scene: this.scene,
+            pageType: this.routePageType
+          })
+          const page = decoration.page
+          this.contentRowId = page.contentRowId || 0
+          this.initialDsl = {
+            dsl: page.dsl,
+            headerDsl: decoration.headerDsl,
+            footerDsl: decoration.footerDsl
+          }
+        } else {
+          const { dsl } = await loadHomeDecoration({
+            templateId: this.templateId,
+            scene: this.scene
+          })
+          const headerFooter = await loadHeaderFooterDecoration()
+          this.contentRowId = 0
+          this.initialDsl = {
+            dsl,
+            headerDsl: headerFooter.headerDsl,
+            footerDsl: headerFooter.footerDsl
+          }
+        }
+      } finally {
+        this.isLoading = false
+      }
+    },
+    async decorationHandleSave({ dsl, headerDsl, footerDsl, editingScope }) {
+      this.$store.commit('decoration/setSaving', true)
+      try {
+        console.log('[sp-web-decoration] save target payload', {
+          templateId: this.templateId,
+          scene: this.scene,
+          editingScope,
+          dsl,
+          headerDsl,
+          footerDsl
+        })
+        if (this.templateId) {
+          await Promise.all([
+            saveHeaderDslToApi({ dsl: headerDsl }),
+            savePageDslToApi({
+              templateId: this.templateId,
+              dsl,
+              contentRowId: this.contentRowId,
+              pageType: this.routePageType
+            }),
+            saveFooterDslToApi({ dsl: footerDsl })
+          ])
+          this.$message.success(this.$t('732e5057.3b1083'))
+        } else {
+          const result = await saveHomeDecoration({
+            templateId: this.templateId,
+            dsl
+          })
+          await saveHeaderFooterDecoration({ headerDsl, footerDsl })
+          this.$message.success(this.$t(result.messageKey))
+        }
+      } finally {
+        this.$store.commit('decoration/setSaving', false)
+      }
+    },
+    decorationHandleBack() {
+      this.$router.go(-1)
+    }
+  }
+}
diff --git a/src/views/decoration/web-template/index.vue b/src/views/decoration/web-template/index.vue
new file mode 100644
index 0000000..7d28079
--- /dev/null
+++ b/src/views/decoration/web-template/index.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="min-h-full">
+    <div
+      v-if="!isSupportedScene"
+      class="flex min-h-screen items-center justify-center bg-gradient-to-b from-[#f8faff] to-[#eef3fb] p-6"
+    >
+      <div
+        class="w-full max-w-[480px] rounded-[20px] border border-[#e7ebf3] bg-white p-8 text-center shadow-[0_20px_40px_rgba(31,45,61,0.08)]"
+      >
+        <div class="text-xl font-semibold text-[#18222f]">
+          {{ $t('f9eb643d.dbc2cc') }}
+        </div>
+        <div class="mt-2.5 mb-5 leading-[22px] text-[#6b7785]">
+          {{ $t('f9eb643d.31d83a') }}
+        </div>
+        <el-button plain @click="decorationHandleBack">
+          {{ $t('f9eb643d.5f4112') }}
+        </el-button>
+      </div>
+    </div>
+
+    <SpWebDecoration
+      v-else
+      :initial-dsl="initialDsl"
+      :loading="isLoading"
+      :page-type="routePageType"
+      :scene="scene"
+      :template-id="templateId"
+      :title="decorationTitle"
+      @back="decorationHandleBack"
+      @save="decorationHandleSave"
+    />
+  </div>
+</template>
+
+<script>
+import decorationRouteMixin from './decorationRouteMixin'
+import { normalizeDecorationPageType } from '@/components/sp-web-decoration/utils/pageTypes'
+
+const PAGE_TYPE_LABEL_MAP = {
+  home: '首页模板',
+  index: '首页模板',
+  custom: '自定义页模板',
+  list: '列表页模板',
+  product_list: '商品列表模板',
+  header: '标头模板',
+  footer: '页脚模板'
+}
+
+/**
+ * PC 商城装修器入口（全屏 /decoration/web/template/edit 与布局内 /decoration/web/edit/:pageType 共用）
+ */
+export default {
+  name: 'HomeDecorationRoute',
+  mixins: [decorationRouteMixin],
+  computed: {
+    templateId() {
+      return String(this.$route.query.id || '')
+    },
+    scene() {
+      return String(this.$route.query.scene || '1001')
+    },
+    routePageType() {
+      const queryPageType = this.$route.query.page_type || this.$route.query.pageType
+      return normalizeDecorationPageType(queryPageType || this.$route.params.pageType || 'home')
+    },
+    decorationTitle() {
+      const label = PAGE_TYPE_LABEL_MAP[this.routePageType] || PAGE_TYPE_LABEL_MAP.home
+      return `${label}装修`
+    },
+    isSupportedScene() {
+      return this.scene === '1001'
+    }
+  },
+  watch: {
+    '$route.fullPath': {
+      immediate: true,
+      handler() {
+        this.decorationBootstrap()
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/decoration/web-templatelist/components/WebPcTemplateForm.vue b/src/views/decoration/web-templatelist/components/WebPcTemplateForm.vue
new file mode 100644
index 0000000..873e226
--- /dev/null
+++ b/src/views/decoration/web-templatelist/components/WebPcTemplateForm.vue
@@ -0,0 +1,208 @@
+<!--
+  PC 模板新增/编辑 — $dialog.open 内容区（整表 SpFormPlus）
+  脚本文案 i18n.t()；页面类型下拉用 FormField 的 component 函数 + ctx.h 渲染 el-select
+-->
+<template>
+  <div class="web-pc-template-form w-full max-w-[600px]">
+    <SpFormPlus
+      ref="formPlusRef"
+      v-model="form"
+      form-type="form"
+      label-width="180px"
+      class="w-full"
+      :show-default-actions="false"
+      :form-items="formItems"
+    />
+  </div>
+</template>
+
+<script>
+import SpFormPlus from '@/components/sp-form-plus'
+import { i18n } from '@/i18n'
+
+const DEFAULT_TAB_LIST = [
+  { name: 'index', label: i18n.t('8b0d1458.db1c89') },
+  { name: 'custom', label: i18n.t('8b0d1458.ec20e4') },
+  { name: 'product_list', label: '列表页' }
+]
+
+export default {
+  name: 'WebPcTemplateForm',
+  components: { SpFormPlus },
+  props: {
+    initialValue: {
+      type: Object,
+      default: () => ({})
+    },
+    tabList: {
+      type: Array,
+      default: () => [...DEFAULT_TAB_LIST]
+    }
+  },
+  data() {
+    return {
+      form: {
+        theme_pc_template_id: '',
+        template_title: '',
+        template_description: '',
+        page_type: '',
+        distributor_id: undefined,
+        status: true
+      }
+    }
+  },
+  computed: {
+    tabListResolved() {
+      return this.tabList && this.tabList.length ? this.tabList : DEFAULT_TAB_LIST
+    },
+    pageTypeOptions() {
+      return this.tabListResolved.map((row) => ({
+        value: row.name,
+        label: row.label != null && row.label !== '' ? row.label : i18n.t(row.labelKey)
+      }))
+    },
+    formItems() {
+      return [
+        {
+          fieldName: 'template_title',
+          label: i18n.t('8b0d1458.b78454'),
+          component: 'input',
+          formItemClass: 'w-full',
+          rules: [{ required: true, message: i18n.t('8b0d1458.7d5cc3'), trigger: 'blur' }],
+          componentProps: {
+            clearable: true,
+            placeholder: i18n.t('8b0d1458.7d5cc3')
+          }
+        },
+        {
+          fieldName: 'template_description',
+          label: i18n.t('8b0d1458.abf8f4'),
+          component: 'input',
+          formItemClass: 'w-full',
+          rules: [{ required: true, message: i18n.t('8b0d1458.9c5cf8'), trigger: 'blur' }],
+          componentProps: {
+            clearable: true,
+            placeholder: i18n.t('8b0d1458.9c5cf8')
+          }
+        },
+        {
+          fieldName: 'page_type',
+          label: i18n.t('8b0d1458.46f391'),
+          component: (ctx) => this.renderPageTypeSelect(ctx),
+          formItemClass: 'w-full',
+          rules: [{ required: true, message: i18n.t('8b0d1458.8dfcc4'), trigger: 'change' }],
+          componentProps: {
+            filterable: true,
+            clearable: true,
+            placeholder: i18n.t('8b0d1458.8dfcc4'),
+            options: this.pageTypeOptions
+          }
+        },
+        {
+          fieldName: 'status',
+          label: i18n.t('8b0d1458.53c3dd'),
+          component: 'switch',
+          componentProps: {}
+        }
+      ]
+    }
+  },
+  watch: {
+    initialValue: {
+      deep: true,
+      handler() {
+        this.syncForm()
+      }
+    }
+  },
+  created() {
+    this.syncForm()
+  },
+  methods: {
+    renderPageTypeSelect(ctx) {
+      const { h, value, onInput, props } = ctx
+      const {
+        options: rawOptions = [],
+        filterable = true,
+        clearable = true,
+        placeholder = ''
+      } = props || {}
+      const children = (rawOptions || []).map((opt, idx) =>
+        h('el-option', {
+          key: opt.value != null ? String(opt.value) : `pt-${idx}`,
+          props: {
+            label: opt.label,
+            value: opt.value,
+            disabled: opt.disabled
+          }
+        })
+      )
+      return h(
+        'el-select',
+        {
+          class: 'w-full',
+          style: { width: '100%' },
+          props: {
+            value,
+            filterable,
+            clearable,
+            placeholder,
+            popperAppendToBody: true
+          },
+          on: {
+            input: onInput
+          }
+        },
+        children
+      )
+    },
+    validate() {
+      return this.$refs.formPlusRef.validate()
+    },
+    syncForm() {
+      const iv = this.initialValue || {}
+      this.form = {
+        theme_pc_template_id:
+          iv.theme_pc_template_id != null ? String(iv.theme_pc_template_id) : '',
+        template_title: iv.template_title != null ? String(iv.template_title) : '',
+        template_description:
+          iv.template_description != null ? String(iv.template_description) : '',
+        page_type: iv.page_type != null ? String(iv.page_type) : '',
+        distributor_id: iv.distributor_id !== undefined ? Number(iv.distributor_id) : undefined,
+        status: iv.status === true || iv.status === '1' || iv.status === 1
+      }
+    },
+    async buildApiParams() {
+      await this.validate()
+      const {
+        theme_pc_template_id,
+        template_title,
+        template_description,
+        page_type,
+        distributor_id,
+        status
+      } = this.form
+      const params = {
+        template_title,
+        template_description,
+        page_type,
+        status: status ? '1' : '2',
+        version: 'v1.0.1'
+      }
+      if (theme_pc_template_id !== '') {
+        params.theme_pc_template_id = theme_pc_template_id
+      }
+      if (distributor_id !== undefined) {
+        params.distributor_id = distributor_id
+      }
+      return params
+    }
+  }
+}
+</script>
+
+<style scoped>
+.web-pc-template-form ::v-deep .el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/decoration/web-templatelist/index.vue b/src/views/decoration/web-templatelist/index.vue
new file mode 100644
index 0000000..aadb4b9
--- /dev/null
+++ b/src/views/decoration/web-templatelist/index.vue
@@ -0,0 +1,279 @@
+<!--
+  列表：SpFinder；新增/编辑：this.$dialog.open
+-->
+<template>
+  <SpPage>
+    <div v-if="$route.path.indexOf('editor') === -1">
+      <el-row class="mb-4">
+        <el-button type="primary" @click="openTemplateDialog(null)">
+          {{ $t('8b0d1458.4c503b') }}
+        </el-button>
+      </el-row>
+      <el-row>
+        <el-tabs type="card" v-model="page_type" @tab-click="handleTabClick">
+          <el-tab-pane
+            v-for="(item, index) of tabList"
+            :key="index"
+            :label="getPageTypeLabel(item)"
+            :name="item.name"
+          />
+        </el-tabs>
+      </el-row>
+      <SpFinder
+        ref="finder"
+        class="mt-2"
+        url="/pctemplate/lists"
+        row-key="theme_pc_template_id"
+        fixed-row-action
+        row-actions-width="260px"
+        no-selection
+        border
+        :setting="finderSetting"
+        :hooks="{ beforeSearch: beforeSearch }"
+      />
+    </div>
+  </SpPage>
+</template>
+
+<script>
+import { createSetting } from '@shopex-ui/finder'
+import { addPageTemplate, editPageTemplate, deletePageTemplate } from '@/api/webtemplate'
+import WebPcTemplateForm from './components/WebPcTemplateForm.vue'
+
+const tabList = [
+  { labelKey: '8b0d1458.db1c89', name: 'index' },
+  { labelKey: '8b0d1458.ec20e4', name: 'custom' },
+  { label: '商品列表页', name: 'product_list' }
+]
+
+export default {
+  name: 'WebTemplateList',
+  data() {
+    return {
+      tabList,
+      page_type: 'index',
+      statusLoadingMap: {}
+    }
+  },
+  computed: {
+    finderSetting() {
+      return createSetting({
+        columns: [
+          { name: this.$t('8b0d1458.6872c7'), key: 'theme_pc_template_id', width: 120 },
+          { name: this.$t('8b0d1458.b78454'), key: 'template_title' },
+          { name: this.$t('8b0d1458.abf8f4'), key: 'template_description' },
+          {
+            name: this.$t('8b0d1458.46f391'),
+            key: 'page_type',
+            render: (h, scope) => {
+              return h('span', this.getPageTypeLabel(scope.row.page_type))
+            }
+          },
+          {
+            name: this.$t('8b0d1458.53c3dd'),
+            key: 'status_label',
+            width: 120,
+            render: (h, { row }) => {
+              return h('el-switch', {
+                props: {
+                  value: row.status == 1,
+                  disabled: !!this.statusLoadingMap[row.theme_pc_template_id]
+                },
+                on: {
+                  change: () => this.handleDisable(row)
+                }
+              })
+            }
+          },
+          {
+            name: this.$t('8b0d1458.2b6bc0'),
+            key: '_actions',
+            width: 220,
+            fixed: 'right',
+            render: (h, { row }) => {
+              return h('div', [
+                h(
+                  'el-button',
+                  {
+                    props: { type: 'text', size: 'mini' },
+                    on: { click: () => this.handleDelete(row) }
+                  },
+                  this.$t('8b0d1458.2f4aad')
+                ),
+                h(
+                  'el-button',
+                  {
+                    props: { type: 'text', size: 'mini' },
+                    on: { click: () => this.openTemplateDialog(row) }
+                  },
+                  this.$t('8b0d1458.95b351')
+                ),
+                h(
+                  'el-button',
+                  {
+                    props: { type: 'text', size: 'mini' },
+                    on: { click: () => this.handleRenovation(row) }
+                  },
+                  this.$t('8b0d1458.6343df')
+                )
+              ])
+            }
+          }
+        ]
+      })
+    }
+  },
+  methods: {
+    getPageTypeLabel(pageType) {
+      const pageTypeName = typeof pageType === 'string' ? pageType : pageType && pageType.name
+      const tab = this.tabList.find((item) => item.name === pageTypeName)
+      if (!tab) {
+        return pageTypeName || ''
+      }
+      return tab.labelKey ? this.$t(tab.labelKey) : tab.label
+    },
+    getDistributorId() {
+      const routeDistributorId = this.$route.query.distributor_id
+      if (routeDistributorId !== undefined && routeDistributorId !== '') {
+        return Number(routeDistributorId)
+      }
+      const shopId = this.$store.getters.shopId
+      if (shopId !== undefined && shopId !== '') {
+        return Number(shopId)
+      }
+      return undefined
+    },
+    beforeSearch(query) {
+      const q = { ...query }
+      if (q.page_size == null && q.pageSize != null) {
+        q.page_size = q.pageSize
+      }
+      if (q.page_no == null) {
+        if (q.pageNum != null) {
+          q.page_no = q.pageNum
+        } else if (q.page != null) {
+          q.page_no = q.page
+        } else {
+          q.page_no = 1
+        }
+      }
+      q.page_type = this.page_type
+      const distributorId = this.getDistributorId()
+      if (distributorId !== undefined) {
+        q.distributor_id = distributorId
+      }
+      return q
+    },
+    handleTabClick() {
+      this.$nextTick(() => {
+        if (this.$refs.finder) {
+          this.$refs.finder.refresh(true)
+        }
+      })
+    },
+    openTemplateDialog(row) {
+      const isEdit = row && row.theme_pc_template_id != null && row.theme_pc_template_id !== ''
+      const initialValue = isEdit
+        ? {
+            theme_pc_template_id: row.theme_pc_template_id,
+            template_title: row.template_title,
+            template_description: row.template_description,
+            page_type: row.page_type,
+            distributor_id: row.distributor_id,
+            status: row.status == 1
+          }
+        : {
+            theme_pc_template_id: '',
+            template_title: '',
+            template_description: '',
+            page_type: this.page_type,
+            distributor_id: this.getDistributorId(),
+            status: true
+          }
+
+      const formVmHolder = { vm: null }
+      const h = this.$createElement
+
+      this.$dialog.open({
+        title: isEdit ? this.$t('8b0d1458.f4b9c2') : this.$t('8b0d1458.e3a8f1'),
+        size: 'small',
+        content: h(WebPcTemplateForm, {
+          key: `pc-tpl-${isEdit ? 'e' : 'n'}-${Date.now()}`,
+          props: {
+            initialValue,
+            tabList: this.tabList
+          },
+          ref: (vm) => {
+            formVmHolder.vm = vm
+          }
+        }),
+        confirmBefore: async () => {
+          const formVm = formVmHolder.vm
+          if (!formVm || typeof formVm.buildApiParams !== 'function') {
+            throw new Error(this.$t('025a9251.a733c4'))
+          }
+          const params = await formVm.buildApiParams()
+          try {
+            if (!params.theme_pc_template_id) {
+              await addPageTemplate(params)
+            } else {
+              await editPageTemplate(params)
+            }
+            if (this.$refs.finder) {
+              this.$refs.finder.refresh()
+            }
+          } catch (e) {
+            console.error(e)
+            throw e
+          }
+        }
+      })
+    },
+    handleRenovation({ theme_pc_template_id, page_type }) {
+      const pageType = page_type || this.page_type
+      const { href } = this.$router.resolve({
+        path: '/decoration/web/template/edit',
+        query: {
+          id: theme_pc_template_id,
+          page_type: pageType
+        }
+      })
+      window.open(href, '_blank', 'noopener,noreferrer')
+    },
+    async handleDisable({ status, created, updated, deleted_at, ...rest }) {
+      const rowId = rest.theme_pc_template_id
+      this.$set(this.statusLoadingMap, rowId, true)
+      try {
+        await editPageTemplate({
+          status: status == 1 ? '2' : '1',
+          ...rest
+        })
+        if (this.$refs.finder) {
+          this.$refs.finder.refresh()
+        }
+      } catch (err) {
+        console.error(err)
+      } finally {
+        this.$set(this.statusLoadingMap, rowId, false)
+      }
+    },
+    async handleDelete({ theme_pc_template_id: id }) {
+      try {
+        await this.$confirm(this.$t('8b0d1458.f9abac'), this.$t('8b0d1458.02d981'), {
+          confirmButtonText: this.$t('8b0d1458.38cf16'),
+          cancelButtonText: this.$t('8b0d1458.625fb2'),
+          type: 'warning'
+        })
+        await deletePageTemplate(id)
+        if (this.$refs.finder) {
+          this.$refs.finder.refresh()
+        }
+      } catch (err) {
+        if (err !== 'cancel') {
+          console.error(err)
+        }
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/settings/ai-translate-setting.vue b/src/views/settings/ai-translate-setting.vue
index 2c98aa8..8bd73b6 100644
--- a/src/views/settings/ai-translate-setting.vue
+++ b/src/views/settings/ai-translate-setting.vue
@@ -26,7 +26,9 @@
         </el-form-item>
 
         <el-form-item>
-          <el-button type="primary" :loading="submitting" @click="handleSubmit">{{ $t('038c104d.be5fbb') }}</el-button>
+          <el-button type="primary" :loading="submitting" @click="handleSubmit">{{
+            $t('038c104d.be5fbb')
+          }}</el-button>
         </el-form-item>
       </el-form>
     </div>
diff --git a/src/views/settings/systemConfig/ShangPai-usercenter.vue b/src/views/settings/systemConfig/ShangPai-usercenter.vue
index da7329e..9d34c06 100644
--- a/src/views/settings/systemConfig/ShangPai-usercenter.vue
+++ b/src/views/settings/systemConfig/ShangPai-usercenter.vue
@@ -4,192 +4,526 @@
 -->
 
 <template>
-  <SpPage v-loading="loading">
-    <div v-if="loggedIn" class="user-center-info">
-      <SpFormPlus
-        v-model="userInfo"
-        :form-items="formItems"
-        form-type="form"
-        label-width="150px"
-        :show-default-actions="false"
-      />
-      <div class="user-center-actions">
-        <el-button type="primary" @click="openUserCenter">进入用户中心</el-button>
+  <SpPage v-loading="loading && !dialogVisible" class="user-center-page">
+    <el-dialog
+      :visible.sync="dialogVisible"
+      fullscreen
+      custom-class="user-center-app-dialog"
+      :show-close="false"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      @closed="handleDialogClosed"
+    >
+      <div v-loading="loading" class="appcenter-embed">
+        <div class="appcenter-hero" :style="heroStyle">
+          <div class="appcenter-badge">应用中心</div>
+          <h1>{{ pageInfo.title || channel }}</h1>
+          <p v-if="pageInfo.description">{{ pageInfo.description }}</p>
+        </div>
+
+        <div
+          v-if="!loading && goodsList.length === 0"
+          class="appcenter-empty"
+        >
+          {{ pageInfo.empty_text || '暂无可展示应用' }}
+        </div>
+        <div v-else class="appcenter-items appcenter-layout-grid">
+          <div
+            v-for="item in goodsList"
+            :key="item.goods_bn"
+            class="appcenter-card"
+            :data-goods-bn="item.goods_bn"
+          >
+            <div class="appcenter-card-main">
+              <h2>{{ item.display_name || item.goods?.name }}</h2>
+              <p>{{ item.goods_bn }}</p>
+              <div class="appcenter-meta">
+                <span>商品 BN：{{ item.goods?.bn || item.goods_bn }}</span>
+                <span>价格：¥{{ formatPrice(item.goods?.price) }}</span>
+              </div>
+            </div>
+            <form class="appcenter-buy-form" @submit.prevent="handleBuy(item)">
+              <button
+                type="submit"
+                class="appcenter-action"
+                :disabled="buyingBn === item.goods_bn"
+                data-appcenter-buy="1"
+              >
+                {{ buyingBn === item.goods_bn ? '处理中...' : '立即购买' }}
+              </button>
+            </form>
+          </div>
+        </div>
       </div>
-    </div>
-    <div v-else-if="authorizeUrl" class="user-center-iframe-wrap">
-      <iframe
-        :src="authorizeUrl"
-        class="user-center-iframe"
-        frameborder="0"
-        scrolling="auto"
-        title="商派用户中心登录"
-      />
-    </div>
+    </el-dialog>
   </SpPage>
 </template>
 
 <script>
-import { getCertificate, getUsercenterAuthorizeUrl, loginUsercenter } from '@/api/company'
+import {
+  getAppcenterUrl,
+  getUsercenterAuthorizeUrl,
+  getAppcenterGoods,
+  loginUsercenter
+} from '@/api/company'
+import {
+  isUsercenterLoggedIn,
+  setUsercenterLoginSuccess
+} from '@/utils/usercenter-storage'
 
 export default {
   data() {
     return {
+      dialogVisible: false,
       loading: false,
-      loggedIn: false,
-      authorizeUrl: '',
-      userInfo: {
-        node_id: '',
-        shopex_uid: ''
-      }
+      buyingBn: '',
+      pageInfo: {},
+      goodsList: [],
+      openBaseUrl: '',
+      channel: 'ecshopx'
     }
   },
   computed: {
-    formItems() {
-      return [
-        {
-          fieldName: '__group_title',
-          component: 'group',
-          label: '商派用户中心'
-        },
-        {
-          fieldName: 'node_id',
-          label: this.$t('ef95ad08.cdd576'),
-          formItemClass: 'w-1/2',
-          component: 'input',
-          componentProps: {
-            readonly: true
-          }
-        },
-        {
-          fieldName: 'shopex_uid',
-          label: 'Shopex ID',
-          formItemClass: 'w-1/2',
-          component: 'input',
-          componentProps: {
-            readonly: true
-          }
-        }
-      ]
+    heroStyle() {
+      const color = this.pageInfo.theme_color || '#2f80ed'
+      return { background: color }
     }
   },
   mounted() {
-    if (this.bubbleIframeCallbackToTop()) return
     this.initPage()
   },
   methods: {
-    bubbleIframeCallbackToTop() {
-      try {
-        const inIframe = window.self !== window.top
-        if (!inIframe) return false
-        const code = (this.$route.query.code || '').trim()
-        if (!code) return false
-        this.loading = true
-        window.top.location.href = window.location.href
-        return true
-      } catch (e) {
-        return false
-      }
-    },
     async initPage() {
       const code = (this.$route.query.code || '').trim()
       if (code) {
-        await this.exchangeCodeAndLogin(code)
-        return
+        const redirected = await this.exchangeCodeAndLogin(code)
+        if (redirected) {
+          return
+        }
       }
-      await this.loadPageState()
+
+      if (isUsercenterLoggedIn()) {
+        this.loading = true
+        try {
+          await this.redirectToAppcenter()
+          return
+        } catch (error) {
+          this.$message.error(this.resolveErrorMessage(error))
+        } finally {
+          this.loading = false
+        }
+      }
+
+      this.dialogVisible = true
+      await this.loadGoods()
     },
     async exchangeCodeAndLogin(code) {
       this.loading = true
-      this.loggedIn = false
-      this.authorizeUrl = ''
       try {
         await loginUsercenter({ code })
+        setUsercenterLoginSuccess()
         await this.$router.replace({ path: this.$route.path, query: {} })
-        await this.loadPageState()
+        this.$message.success('授权登录成功')
+        await this.redirectToAppcenter()
+        return true
       } catch (error) {
-        const errMsg =
-          error?.data?.data?.message ||
-          error?.data?.message ||
-          error?.response?.data?.data?.message ||
-          error?.response?.data?.message ||
-          error?.message ||
-          this.$t('1f7b7edc.f50bf4')
-        this.$message.error(errMsg)
+        this.$message.error(this.resolveErrorMessage(error))
         await this.$router.replace({ path: this.$route.path, query: {} })
-        await this.loadPageState()
-      } finally {
-        this.loading = false
-      }
-    },
-    async loadPageState() {
-      this.loading = true
-      this.loggedIn = false
-      this.authorizeUrl = ''
-      try {
-        const loggedIn = await this.loadLoggedInInfo()
-        if (!loggedIn) {
-          await this.loadAuthorizeIframe()
-        }
-      } catch (error) {
-        await this.loadAuthorizeIframe()
-      } finally {
-        this.loading = false
-      }
-    },
-    async loadLoggedInInfo() {
-      const response = await getCertificate()
-      const data = response?.data?.data || {}
-      const nodeId = (data.node_id || '').trim()
-      if (!nodeId) {
         return false
-      }
-      this.loggedIn = true
-      this.userInfo = {
-        node_id: nodeId,
-        shopex_uid: (data.shopex_uid || '').trim()
-      }
-      return true
-    },
-    async loadAuthorizeIframe() {
-      const response = await getUsercenterAuthorizeUrl()
-      const data = response?.data?.data
-      this.authorizeUrl =
-        (typeof data === 'string' ? data : '') || data?.url || ''
-      if (!this.authorizeUrl) {
-        this.$message.error(this.$t('1f7b7edc.f50bf4'))
+      } finally {
+        this.loading = false
       }
     },
-    openUserCenter() {
-      window.open('https://www.shopex.cn', '_blank')
+    async redirectToAppcenter() {
+      const urlResponse = await getAppcenterUrl()
+      const urlData = urlResponse?.data?.data
+      const appcenterUrl =
+        (typeof urlData === 'string' ? urlData : '') || urlData?.url || ''
+      if (!appcenterUrl) {
+        throw new Error('获取用户中心地址失败')
+      }
+      window.location.href = appcenterUrl
+    },
+    async loadGoods() {
+      this.loading = true
+      try {
+        const goodsRes = await getAppcenterGoods()
+        const data = goodsRes?.data?.data || {}
+        this.pageInfo = data.page || {}
+        this.goodsList = Array.isArray(data.items) ? data.items : []
+        this.channel = data.channel || 'ecshopx'
+        this.openBaseUrl = (data.open_base_url || '').replace(/\/$/, '')
+      } catch (error) {
+        this.$message.error(this.resolveErrorMessage(error))
+        this.goodsList = []
+      } finally {
+        this.loading = false
+      }
+    },
+    async handleBuy(item) {
+      if (this.buyingBn) return
+      this.buyingBn = item.goods_bn
+      try {
+        const response = await getUsercenterAuthorizeUrl()
+        const data = response?.data?.data
+        const url = (typeof data === 'string' ? data : '') || data?.url || ''
+        if (!url) {
+          this.$message.error('获取授权链接失败')
+          return
+        }
+        window.location.href = url
+      } catch (error) {
+        this.$message.error(this.resolveErrorMessage(error))
+      } finally {
+        this.buyingBn = ''
+      }
+    },
+    formatPrice(price) {
+      const num = Number(price)
+      if (Number.isNaN(num)) return price || '0.00'
+      return num.toFixed(2)
+    },
+    resolveErrorMessage(error) {
+      return (
+        error?.data?.data?.message ||
+        error?.data?.message ||
+        error?.response?.data?.data?.message ||
+        error?.response?.data?.message ||
+        error?.message ||
+        '操作失败'
+      )
+    },
+    handleDialogClosed() {
+      if (this.$route.query.code) return
+      this.$router.back()
     }
   }
 }
 </script>
 
-<style lang="scss" scoped>
-.user-center-info {
-  max-width: 800px;
-}
+<style lang="scss">
+.user-center-app-dialog {
+  .el-dialog__header {
+    display: none;
+  }
 
-.user-center-actions {
-  padding-left: 150px;
-  margin-top: 8px;
-}
-
-.user-center-iframe-wrap {
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  min-height: calc(100vh - 180px);
-  padding: 24px 0;
-  background: #fff;
-}
-
-.user-center-iframe {
-  width: 100%;
-  max-width: 480px;
-  min-height: 520px;
-  border: none;
+  .el-dialog__body {
+    padding: 0;
+    height: 100vh;
+    overflow: auto;
+    background: #f5f7fb;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.user-center-page {
+  min-height: 0;
+}
+
+.appcenter-embed {
+  min-height: 100vh;
+}
+
+.appcenter-hero {
+  padding: 24px 28px;
+  color: #fff;
+}
+
+.appcenter-hero h1 {
+  margin: 8px 0 6px;
+  font-size: 24px;
+  line-height: 1.25;
+  font-weight: 600;
+}
+
+.appcenter-hero p {
+  margin: 0;
+  opacity: 0.9;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.appcenter-badge {
+  display: inline-block;
+  padding: 3px 8px;
+  border: 1px solid rgba(255, 255, 255, 0.55);
+  border-radius: 12px;
+  font-size: 12px;
+  opacity: 0.95;
+}
+
+.appcenter-userbar {
+  display: table;
+  width: calc(100% - 36px);
+  box-sizing: border-box;
+  margin: -16px 18px 0;
+  padding: 14px 16px;
+  background: #fff;
+  border: 1px solid #e1e7f0;
+  border-radius: 8px;
+  box-shadow: 0 6px 18px rgba(24, 42, 68, 0.1);
+}
+
+.appcenter-user-main {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+.appcenter-user-hover {
+  position: relative;
+  display: inline-block;
+  padding-right: 8px;
+  cursor: default;
+}
+
+.appcenter-avatar {
+  display: inline-block;
+  width: 34px;
+  height: 34px;
+  margin-right: 10px;
+  border-radius: 50%;
+  background: #263445;
+  color: #fff;
+  line-height: 34px;
+  text-align: center;
+  font-size: 15px;
+  font-weight: 600;
+  vertical-align: middle;
+}
+
+.appcenter-user-text {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.appcenter-user-title {
+  color: #1f2d3d;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.appcenter-cert {
+  display: inline-block;
+  margin-left: 8px;
+  padding: 2px 7px;
+  border-radius: 10px;
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.appcenter-cert-ok {
+  background: #e8f7ef;
+  color: #278052;
+}
+
+.appcenter-cert-warn {
+  background: #fff1df;
+  color: #a45c00;
+}
+
+.appcenter-user-actions {
+  display: table-cell;
+  width: 180px;
+  vertical-align: middle;
+  white-space: nowrap;
+  text-align: right;
+}
+
+.appcenter-user-actions a,
+.appcenter-user-actions button {
+  display: inline-block;
+  margin-left: 8px;
+  padding: 6px 10px;
+  border: 1px solid #d7dfeb;
+  border-radius: 4px;
+  color: #263445;
+  background: #fbfcfe;
+  text-decoration: none;
+  font-size: 12px;
+  cursor: pointer;
+  line-height: 1.4;
+}
+
+.appcenter-user-actions a:hover,
+.appcenter-user-actions button:hover {
+  border-color: #263445;
+  background: #f2f5f9;
+}
+
+.appcenter-user-popover {
+  display: none;
+  position: absolute;
+  z-index: 20;
+  top: 42px;
+  left: 0;
+  width: 260px;
+  padding: 14px;
+  background: #fff;
+  border: 1px solid #dfe6ef;
+  border-radius: 8px;
+  box-shadow: 0 12px 28px rgba(20, 35, 60, 0.18);
+}
+
+.appcenter-user-popover:before {
+  content: '';
+  position: absolute;
+  top: -7px;
+  left: 18px;
+  width: 12px;
+  height: 12px;
+  background: #fff;
+  border-left: 1px solid #dfe6ef;
+  border-top: 1px solid #dfe6ef;
+  transform: rotate(45deg);
+}
+
+.appcenter-user-hover:hover .appcenter-user-popover {
+  display: block;
+}
+
+.appcenter-popover-title {
+  margin-bottom: 10px;
+  color: #1f2d3d;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.appcenter-user-popover dl {
+  margin: 0;
+  color: #5f6f81;
+  font-size: 12px;
+  line-height: 1.7;
+}
+
+.appcenter-user-popover dt {
+  float: left;
+  clear: left;
+  width: 68px;
+  color: #8a97a6;
+}
+
+.appcenter-user-popover dd {
+  margin: 0 0 3px 68px;
+  word-break: break-all;
+}
+
+.appcenter-items {
+  padding: 18px;
+}
+
+.appcenter-card {
+  position: relative;
+  box-sizing: border-box;
+  margin-bottom: 14px;
+  padding: 16px;
+  background: #fff;
+  border: 1px solid #e4e9f1;
+  border-radius: 8px;
+  box-shadow: 0 1px 5px rgba(20, 35, 60, 0.06);
+}
+
+.appcenter-layout-grid .appcenter-card {
+  display: inline-block;
+  width: 48%;
+  margin-right: 1.5%;
+  vertical-align: top;
+  min-height: 142px;
+}
+
+.appcenter-card h2 {
+  margin: 0 0 8px;
+  font-size: 17px;
+  color: #1f2d3d;
+}
+
+.appcenter-card p {
+  margin: 0 0 12px;
+  color: #697789;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.appcenter-meta {
+  color: #8a97a6;
+  font-size: 12px;
+}
+
+.appcenter-meta span {
+  display: inline-block;
+  margin-right: 12px;
+}
+
+.appcenter-action {
+  display: inline-block;
+  margin-top: 14px;
+  padding: 7px 14px;
+  border-radius: 4px;
+  border: 0;
+  background: #263445;
+  color: #fff;
+  text-decoration: none;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.appcenter-buy-form {
+  margin: 0;
+}
+
+button.appcenter-action[disabled] {
+  background: #a6b0bd;
+  cursor: default;
+}
+
+.appcenter-empty {
+  margin: 22px 18px;
+  padding: 36px 16px;
+  border: 1px dashed #ccd5e2;
+  border-radius: 8px;
+  background: #fff;
+  color: #8a97a6;
+  text-align: center;
+}
+
+@media (max-width: 640px) {
+  .appcenter-hero {
+    padding: 20px 18px;
+  }
+
+  .appcenter-userbar {
+    display: block;
+    margin: -10px 12px 0;
+    padding: 12px;
+  }
+
+  .appcenter-user-main {
+    display: block;
+    min-width: 0;
+  }
+
+  .appcenter-user-popover {
+    left: -4px;
+    width: 236px;
+  }
+
+  .appcenter-user-actions {
+    display: block;
+    margin-top: 10px;
+    text-align: left;
+    white-space: normal;
+  }
+
+  .appcenter-user-actions a,
+  .appcenter-user-actions button {
+    margin: 0 6px 6px 0;
+  }
+
+  .appcenter-layout-grid .appcenter-card {
+    display: block;
+    width: auto;
+    margin-right: 0;
+  }
 }
 </style>
diff --git a/src/views/settings/systemConfig/jstSetting.vue b/src/views/settings/systemConfig/jstSetting.vue
index 6f60391..6777368 100644
--- a/src/views/settings/systemConfig/jstSetting.vue
+++ b/src/views/settings/systemConfig/jstSetting.vue
@@ -5,13 +5,7 @@
 
 <template>
   <SpPage>
-    <SpPlatformTip
-      v-if="!VERSION_SHUYUN()"
-      h5
-      app
-      alipay
-      :text-val="$t('20f6ad88.c5d4d8')"
-    />
+    <SpPlatformTip v-if="!VERSION_SHUYUN()" h5 app alipay :text-val="$t('20f6ad88.c5d4d8')" />
     <SpFormPlus
       ref="form"
       v-model="form"
diff --git a/src/views/settings/systemConfig/mailServiceSetting.vue b/src/views/settings/systemConfig/mailServiceSetting.vue
index d96571b..ff6f4ef 100644
--- a/src/views/settings/systemConfig/mailServiceSetting.vue
+++ b/src/views/settings/systemConfig/mailServiceSetting.vue
@@ -166,7 +166,11 @@ export default {
         EMAIL_SENDER: this.strField(d, 'EMAIL_SENDER'),
         EMAIL_USER: this.strField(d, 'EMAIL_USER'),
         EMAIL_PASSWORD: this.strField(d, 'EMAIL_PASSWORD'),
-        EMAIL_ACTIVATION_H5_DOMAIN: this.strField(d, 'EMAIL_ACTIVATION_H5_DOMAIN', 'EMAIL_H5_ACTIVATE_DOMAIN'),
+        EMAIL_ACTIVATION_H5_DOMAIN: this.strField(
+          d,
+          'EMAIL_ACTIVATION_H5_DOMAIN',
+          'EMAIL_H5_ACTIVATE_DOMAIN'
+        ),
         EMAIL_ACTIVATION_PC_DOMAIN: this.strField(d, 'EMAIL_ACTIVATION_PC_DOMAIN')
       }
     },
diff --git a/src/views/settings/systemConfig/smsService/shopex_sms.vue b/src/views/settings/systemConfig/smsService/shopex_sms.vue
index d0f47a5..45d5d34 100644
--- a/src/views/settings/systemConfig/smsService/shopex_sms.vue
+++ b/src/views/settings/systemConfig/smsService/shopex_sms.vue
@@ -63,8 +63,8 @@
               </div>
               <div class="section-body">
                 <div
-                  v-for="(row, index) in items"
-                  :key="`item__${index}`"
+                  v-for="(row, rowIndex) in items"
+                  :key="`item__${rowIndex}`"
                   class="item"
                   :class="row.is_open == 'true' ? 'succ-open-sms' : 'not-open-sms'"
                   @click="toDetail(row)"
diff --git a/src/views/settings/systemConfig/wdtSetting.vue b/src/views/settings/systemConfig/wdtSetting.vue
index 2206f11..e4794a0 100644
--- a/src/views/settings/systemConfig/wdtSetting.vue
+++ b/src/views/settings/systemConfig/wdtSetting.vue
@@ -6,13 +6,7 @@
 <template>
   <SpPage>
     <div v-loading="loading">
-      <SpPlatformTip
-        v-if="!VERSION_SHUYUN()"
-        h5
-        app
-        alipay
-        :text-val="$t('59579ae2.c5d4d8')"
-      />
+      <SpPlatformTip v-if="!VERSION_SHUYUN()" h5 app alipay :text-val="$t('59579ae2.c5d4d8')" />
       <SpFormPlus
         ref="form"
         v-model="form"
diff --git a/tailwind.config.js b/tailwind.config.js
index 5160c08..1bfc62b 100755
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -18,6 +18,9 @@ module.exports = {
         foreground: {
           DEFAULT: 'hsl(var(--foreground))'
         },
+        border: {
+          DEFAULT: 'hsl(var(--border))'
+        },
         primary: {
           DEFAULT: 'hsl(var(--primary))',
           foreground: 'hsl(var(--primary-foreground))'