47 KiB
47 KiB
创高家具官网 - 管理后台设计
一、后台核心功能架构
┌─────────────────────────────────────────────────────────────┐
│ 创高家具管理后台 │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ 内容管理 │ │ 业务管理 │ │ 系统管理 │ │
│ ├─────────────┤ ├─────────────┤ ├─────────────┤ │
│ │ · 轮播图 │ │ · 产品分类 │ │ · 公司信息 │ │
│ │ · 页面区块 │ │ · 产品管理 │ │ · 管理员 │ │
│ │ · 媒体库 │ │ · 案例分类 │ │ · 操作日志 │ │
│ │ │ │ · 案例管理 │ │ │ │
│ │ │ │ · 新闻分类 │ │ │ │
│ │ │ │ · 新闻管理 │ │ │ │
│ │ │ │ · 留言管理 │ │ │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
二、页面文本管理（核心功能）
2.1 功能说明
后台可直接修改所有前台页面的文本内容，支持中英文双语配置。
2.2 数据表结构（f_page_block）
-- 页面区块配置表
-- 通过 page_code + block_code 唯一标识页面上的某个区块
page_code: home → 首页
about → 关于页面
products → 产品页面
cases → 案例页面
contact → 联系页面
type: text → 纯文本
rich → 富文本（HTML）
image → 单图
images→ 多图
list → 列表（JSON数组）
html → 原始HTML
2.3 后台编辑界面设计
┌─────────────────────────────────────────────────────────────┐
│ 页面区块管理 [保存全部] │
├─────────────────────────────────────────────────────────────┤
│ [首页 ▼] [关于 ▼] [产品 ▼] [案例 ▼] [联系 ▼] │
├─────────────────────────────────────────────────────────────┤
│ │
│ 当前页面：首页 │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 区块：首屏大标题 (hero_title) │ │
│ ├─────────────────────────────────────────────────────┤ │
│ │ 类型：纯文本 (text) │ │
│ ├─────────────────────────────────────────────────────┤ │
│ │ 中文内容： │ │
│ │ ┌───────────────────────────────────────────────┐ │ │
│ │ │ 全屋定制 匠心之作 │ │ │
│ │ └───────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ 英文内容： │ │
│ │ ┌───────────────────────────────────────────────┐ │ │
│ │ │ Whole House Customization │ │ │
│ │ └───────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ [预览效果] [仅保存此区块] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 区块：服务板块标题 (services_title) │ │
│ ├─────────────────────────────────────────────────────┤ │
│ │ 中文：核心业务 │ │
│ │ 英文：Core Business │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 区块：品牌实力数据 (strength_data) [类型：list] │ │
│ ├─────────────────────────────────────────────────────┤ │
│ │ 中文数据（JSON格式）： │ │
│ │ ┌───────────────────────────────────────────────┐ │ │
│ │ │ [ ] │ │ │
│ │ │ {"number": "20+", "label": "年行业经验"} │ │ │
│ │ │ {"number": "50000+", "label": "㎡生产基地"} │ │ │
│ │ │ {"number": "1000+", "label": "家服务客户"} │ │ │
│ │ │ {"number": "50+", "label": "项国家专利"} │ │ │
│ │ │ [ ] │ │ │
│ │ └───────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
2.4 区块类型编辑器映射
| 类型 | 编辑组件 | 说明 |
|---|---|---|
| text | ElInput（textarea） | 纯文本输入 |
| rich | WangEditor/TinyMCE | 富文本编辑器，支持图文混排 |
| image | ImageUploader | 单图上传，自动预览 |
| images | MultiImageUploader | 多图上传，支持拖拽排序 |
| list | JsonEditor/动态表单 | JSON数组编辑，或可视化表单 |
| html | CodeEditor | 原始HTML编辑，带语法高亮 |
三、图片管理（MinIO集成）
3.1 媒体库界面
┌─────────────────────────────────────────────────────────────┐
│ 媒体库 [上传图片 ▼]│
├─────────────────────────────────────────────────────────────┤
│ 筛选：[全部类型 ▼] [使用位置 ▼] [搜索图片名称...] │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
│ │ │ │ │ │ │ │ │ │ │ │ │ │
│ │图1 │ │图2 │ │图3 │ │图4 │ │图5 │ │图6 │ ← 瀑布流网格 │
│ │ │ │ │ │ │ │ │ │ │ │ │ │
│ ├────┤ ├────┤ ├────┤ ├────┤ ├────┤ ├────┤ │
│ │信息│ │信息│ │信息│ │信息│ │信息│ │信息│ │
│ └────┘ └────┘ └────┘ └────┘ └────┘ └────┘ │
│ │
│ 选中：3张 [批量删除] │
│ │
├─────────────────────────────────────────────────────────────┤
│ 分页： < 1 2 3 4 5 ... 20 > │
└─────────────────────────────────────────────────────────────┘
3.2 图片详情面板
点击单张图片后右侧/弹窗显示：
┌────────────────────────────────────────┐
│ 图片预览 │
│ ┌────────────────────────────┐ │
│ │ │ │
│ │ 大图展示 │ │
│ │ │ │
│ └────────────────────────────┘ │
│ │
│ 文件信息： │
│ · 文件名：home-banner-01.jpg │
│ · 文件大小：1.2 MB │
│ · 尺寸：1920 × 600 │
│ · 上传时间：2024-01-15 10:30 │
│ · 使用位置：首页轮播 │
│ │
│ 访问链接： │
│ ┌──────────────────────────────────┐ │
│ │ http://minio:9000/chuanggao-i... │ │
│ └──────────────────────────────────┘ │
│ [复制链接] │
│ │
│ [替换图片] [下载原图] [删除图片] │
└────────────────────────────────────────┘
3.3 上传组件设计
<!-- ImageUploader.vue -->
<template>
<div class="image-uploader">
<!-- 拖拽区域 -->
<div
class="upload-area"
:class="{ 'is-dragover': isDragOver }"
@dragover.prevent="isDragOver = true"
@dragleave.prevent="isDragOver = false"
@drop.prevent="handleDrop"
>
<input
ref="fileInput"
type="file"
accept="image/*"
multiple
@change="handleFileSelect"
>
<div v-if="!previewUrl" class="upload-placeholder">
<el-icon><Plus /></el-icon>
<span>点击上传或拖拽图片至此</span>
<span class="tips">支持 JPG、PNG、WEBP，单张不超过 10MB</span>
</div>
<img v-else :src="previewUrl" class="preview-image">
</div>
<!-- 上传进度 -->
<div v-if="uploading" class="upload-progress">
<el-progress :percentage="progress" />
</div>
<!-- 操作按钮 -->
<div class="upload-actions">
<el-button v-if="previewUrl" @click="clear">清除</el-button>
<el-button type="primary" :loading="uploading" @click="confirm">
{{ uploading ? '上传中...' : '确认上传' }}
</el-button>
</div>
</div>
</template>
3.4 上传流程
1. 用户选择/拖拽图片
↓
2. 前端验证（格式、大小）
↓
3. 可选：本地预览压缩
↓
4. 调用 /api/admin/upload/single
↓
5. 后端接收 → 上传MinIO
↓
6. MinIO返回URL → 入库f_media_library
↓
7. 后端返回完整图片信息
↓
8. 前端更新界面显示
四、产品管理
4.1 产品列表页
┌─────────────────────────────────────────────────────────────┐
│ 产品管理 [+ 新增产品] │
├─────────────────────────────────────────────────────────────┤
│ 筛选：[分类 ▼] [状态 ▼] [推荐 ▼] [搜索产品名称/编码] │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ □ │ 主图 │ 产品名称 │ 分类 │ 价格 │操作│ │
│ ├─────────────────────────────────────────────────────┤ │
│ │ □ │ [图] │ 意式极简真皮沙发 │ 客厅家具 │ ¥15800 │..│ │
│ │ □ │ [图] │ 北欧实木餐桌 │ 餐厅家具 │ 面议 │..│ │
│ │ □ │ [图] │ 现代简约大床 │ 卧室家具 │ ¥8999 │..│ │
│ │ □ │ [图] │ 全屋定制衣柜 │ 全屋定制 │ ¥20000 │..│ │
│ ├─────────────────────────────────────────────────────┤ │
│ │ 选中：2项 [批量上架] [批量下架] [批量删除] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ 分页： < 1 2 3 4 5 > 共 128 条 │
│ │
└─────────────────────────────────────────────────────────────┘
4.2 产品编辑表单
┌─────────────────────────────────────────────────────────────┐
│ 编辑产品 [保存] [取消]│
├─────────────────────────────────────────────────────────────┤
│ 基本信息 │
│ ├─────────────────────────────────────────────────────┐ │
│ │ 产品名称（中文）* │ │
│ │ [意式极简真皮沙发 ]│ │
│ │ │ │
│ │ 产品名称（英文） │ │
│ │ [Italian Minimalist Leather Sofa ]│ │
│ │ │ │
│ │ 产品编码 所属分类 * │ │
│ │ [CG-SF-001 ] [客厅家具 ▼] [沙发 ▼] │ │
│ │ │ │
│ │ 产品简介（中文） │ │
│ │ [进口头层牛皮，意式极简设计... ]│ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ 产品图片 │
│ ├─────────────────────────────────────────────────────┐ │
│ │ 主图： │ │
│ │ ┌─────────┐ │ │
│ │ │ │ [更换主图] │ │
│ │ │ 预览图 │ │ │
│ │ │ │ │ │
│ │ └─────────┘ │ │
│ │ │ │
│ │ 产品相册（可多选，拖拽排序）： │ │
│ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │
│ │ │图1 │ │图2 │ │图3 │ │图4 │ │ + │ │ │
│ │ └────┘ └────┘ └────┘ └────┘ └────┘ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ 场景展示图 │
│ ├─────────────────────────────────────────────────────┐ │
│ │ 客厅场景 │ 卧室场景 │ + 添加场景 │ │
│ │ ┌──────────┐ ┌──────────┐ │ │
│ │ │ 场景图1 │ │ 场景图2 │ │ │
│ │ │ [删除] │ │ [删除] │ │ │
│ │ └──────────┘ └──────────┘ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ 产品参数（动态添加） │
│ ├─────────────────────────────────────────────────────┐ │
│ │ 参数名称（中） 参数名称（英） 参数值（中） 参数值（英）│ │
│ │ [材质 ] [Material ] [真皮 ] [Leather ]│ │
│ │ [尺寸 ] [Dimensions ] [200*90cm ] [200*90cm]│ │
│ │ [风格 ] [Style ] [意式极简 ] [Italian ]│ │
│ │ [+ 添加参数行] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ 价格与状态 │
│ ├─────────────────────────────────────────────────────┐ │
│ │ 价格范围： [ 15800 ] - [ 25800 ] 元 │ │
│ │ │ │
│ │ 是否显示价格： ○ 是 ○ 否 │ │
│ │ │ │
│ │ 标签： ☑ 热门 ☑ 新品 ☐ 推荐 │ │
│ │ │ │
│ │ 状态： ● 上架 ○ 下架 │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ SEO设置 │
│ ├─────────────────────────────────────────────────────┐ │
│ │ SEO标题（中文） │ │
│ │ [意式极简真皮沙发 - 创高家具 ]│ │
│ │ ... │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
五、案例管理
5.1 案例编辑表单
┌─────────────────────────────────────────────────────────────┐
│ 编辑案例 [保存] [取消]│
├─────────────────────────────────────────────────────────────┤
│ 基本信息 │
│ ├─────────────────────────────────────────────────────┐ │
│ │ 案例标题（中文）* [某某别墅全屋定制案例 ] │ │
│ │ 案例标题（英文） [Villa Whole House Custom ] │ │
│ │ 副标题（中文） [280㎡现代简约风格 ] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ 案例分类 │
│ ├─────────────────────────────────────────────────────┐ │
│ │ 主分类 * [全屋定制案例 ▼] │ │
│ │ 其他分类 ☑ 卧室空间 ☑ 现代风格 │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ 项目信息 │
│ ├─────────────────────────────────────────────────────┐ │
│ │ 项目类型 项目面积 项目地点 完工日期 │ │
│ │ [全屋定制 ▼] [ 280 ㎡ ] [ 深圳 ] [2024-03] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ 案例图片（轮播展示，拖拽排序） │
│ ├─────────────────────────────────────────────────────┐ │
│ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │ │
│ │ │ 图1 │ │ 图2 │ │ 图3 │ │ 图4 │ │ │
│ │ │[设封面]│ │[设封面]│ │[设封面]│ │ [+ ] │ │ │
│ │ └────────┘ └────────┘ └────────┘ └────────┘ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ 案例描述（富文本） │
│ ├─────────────────────────────────────────────────────┐ │
│ │ ┌────────────────────────────────────────────────┐ │ │
│ │ │ 富文本编辑器... │ │ │
│ │ │ 支持图文混排、视频嵌入 │ │ │
│ │ └────────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ 关联产品 │
│ ├─────────────────────────────────────────────────────┐ │
│ │ [搜索产品名称...] [+ 添加关联] │ │
│ │ │ │
│ │ ┌────┐ 意式极简真皮沙发 [× 移除] │ │
│ │ ┌────┐ 北欧实木茶几 [× 移除] │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
六、新闻管理
6.1 新闻编辑表单
┌─────────────────────────────────────────────────────────────┐
│ 编辑新闻 [保存草稿] │
│ [发布] [取消] │
├─────────────────────────────────────────────────────────────┤
│ 基本信息 │
│ ├─────────────────────────────────────────────────────┐ │
│ │ 新闻标题（中文）* [创高家具2024新品发布会圆满落幕 ] │ │
│ │ 新闻标题（英文） [2024 New Product Launch... ] │ │
│ │ 所属分类 * [公司新闻 ▼] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ 封面图 │
│ ├─────────────────────────────────────────────────────┐ │
│ │ ┌─────────┐ │ │
│ │ │ │ [上传封面图] 推荐尺寸 800×600 │ │
│ │ │ 预览 │ │ │
│ │ └─────────┘ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ 新闻摘要 │
│ ├─────────────────────────────────────────────────────┐ │
│ │ 中文摘要（显示在列表页）： │ │
│ │ [3月15日，创高家具2024年度新品发布会在佛山总部... ] │ │
│ │ │ │
│ │ 英文摘要： │ │
│ │ [On March 15, ChuangGao Furniture held its 2024... ] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ 新闻正文（富文本） │
│ ├─────────────────────────────────────────────────────┐ │
│ │ ┌────────────────────────────────────────────────┐ │ │
│ │ │ 富文本编辑器... │ │ │
│ │ │ │ │ │
│ │ │ 支持： │ │ │
│ │ │ · 文字样式 │ │ │
│ │ │ · 图片插入（自动上传MinIO） │ │ │
│ │ │ · 视频嵌入 │ │ │
│ │ │ · 超链接 │ │ │
│ │ └────────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ 发布设置 │
│ ├─────────────────────────────────────────────────────┐ │
│ │ 发布时间：[2024-03-15 10:30 ▼] ○ 立即发布 │ │
│ │ │ │
│ │ 选项： ☑ 置顶 ☐ 热门 │ │
│ │ │ │
│ │ 状态： ● 草稿 ○ 已发布 ○ 已下线 │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
七、留言管理
7.1 留言列表
┌─────────────────────────────────────────────────────────────┐
│ 留言管理 │
├─────────────────────────────────────────────────────────────┤
│ 筛选：[全部类型 ▼] [全部状态 ▼] [日期范围 ▼] [搜索...] │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │类型│ 姓名 │ 电话 │ 内容摘要 │时间│状态│ │
│ ├─────────────────────────────────────────────────────┤ │
│ │加盟│ 张先生 │ 138****8888 │ 想了解加盟政策 │01-15│待处理│ │
│ │合作│ 李经理 │ 139****6666 │ 酒店项目合作 │01-14│处理中│ │
│ │反馈│ 王女士 │ 137****9999 │ 产品质量反馈 │01-13│已回复│ │
│ ├─────────────────────────────────────────────────────┤ │
│ │ [批量标记已处理] [导出Excel] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
7.2 留言详情
┌─────────────────────────────────────────────────────────────┐
│ 留言详情 [返回列表] │
├─────────────────────────────────────────────────────────────┤
│ 留言信息 │
│ ├─────────────────────────────────────────────────────┐ │
│ │ 类型：加盟咨询 │ │
│ │ 姓名：张先生 │ │
│ │ 电话：13800138888 │ │
│ │ 邮箱：zhang@example.com │ │
│ │ 公司：某某商贸公司 │ │
│ │ 时间：2024-01-15 10:30:25 │ │
│ │ IP： 113.45.XX.XX │ │
│ ├─────────────────────────────────────────────────────┤ │
│ │ 留言内容： │ │
│ │ 你好，我想了解创高家具的加盟政策，请问需要什么条件？ │ │
│ │ 加盟费是多少？在二线城市开店大概需要多少预算？ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ 回复记录 │
│ ├─────────────────────────────────────────────────────┐ │
│ │ 2024-01-15 14:20 客服小李 │ │
│ │ ───────────────────────────────────────────────── │ │
│ │ 张先生您好，感谢您的咨询！ │ │
│ │ 我们的加盟政策如下：... │ │
│ │ │ │
│ │ 2024-01-16 09:30 客服小李 │ │
│ │ ───────────────────────────────────────────────── │ │
│ │ 已电话沟通，客户意向强烈，已发送详细资料。 │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ 添加回复 │
│ ├─────────────────────────────────────────────────────┐ │
│ │ 回复内容： │ │
│ │ ┌───────────────────────────────────────────────┐ │ │
│ │ │ │ │ │
│ │ │ │ │ │
│ │ └───────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ 同时标记状态为：[已回复 ▼] │ │
│ │ │ │
│ │ [提交回复] │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
八、公司信息管理
8.1 配置项总览
┌─────────────────────────────────────────────────────────────┐
│ 公司信息配置 [保存全部] │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─ Tab：品牌信息 ─┬─ 联系信息 ─┬─ SEO设置 ─┬─ 社交账号 ─┐ │
│ └─────────────────┴───────────┴───────────┴───────────┘ │
│ │
│ 当前：品牌信息 │
│ ├─────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 品牌Logo： │ │
│ │ ┌─────────┐ │ │
│ │ │ │ [上传Logo] 推荐透明背景PNG │ │
│ │ │ 预览 │ │ │
│ │ └─────────┘ │ │
│ │ │ │
│ │ 品牌名称（中文）* [创高家具 ]│ │
│ │ 品牌名称（英文） [ChuangGao Furniture ]│ │
│ │ │ │
│ │ 品牌口号（中文） [匠心定制，品质生活 ]│ │
│ │ 品牌口号（英文） [Crafted for Quality Living ]│ │
│ │ │ │
│ │ 公司简介（中文） │ │
│ │ [创高家具成立于2004年，专注高端全屋定制... ]│ │
│ │ │ │
│ │ 公司简介（英文） │ │
│ │ [Founded in 2004, ChuangGao Furniture specializes...]│ │
│ │ │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
九、后台路由与权限
9.1 路由结构
const adminRoutes = [
{
path: '/admin',
component: 'Layout',
children: [
// 控制台
{ path: 'dashboard', name: 'Dashboard', meta: { title: '控制台', icon: 'Dashboard' } },
// 内容管理
{ path: 'content/carousel', name: 'Carousel', meta: { title: '轮播图管理', icon: 'Picture' } },
{ path: 'content/blocks', name: 'PageBlocks', meta: { title: '页面区块', icon: 'Document' } },
{ path: 'content/media', name: 'Media', meta: { title: '媒体库', icon: 'Folder' } },
// 产品管理
{ path: 'product/category', name: 'ProductCategory', meta: { title: '产品分类', icon: 'Grid' } },
{ path: 'product/list', name: 'ProductList', meta: { title: '产品列表', icon: 'Goods' } },
// 案例管理
{ path: 'case/category', name: 'CaseCategory', meta: { title: '案例分类', icon: 'Grid' } },
{ path: 'case/list', name: 'CaseList', meta: { title: '案例列表', icon: 'House' } },
// 新闻管理
{ path: 'news/category', name: 'NewsCategory', meta: { title: '新闻分类', icon: 'Grid' } },
{ path: 'news/list', name: 'NewsList', meta: { title: '新闻列表', icon: 'DocumentCopy' } },
// 留言管理
{ path: 'message/list', name: 'MessageList', meta: { title: '留言管理', icon: 'Message' } },
// 系统管理
{ path: 'company/info', name: 'CompanyInfo', meta: { title: '公司信息', icon: 'OfficeBuilding' } },
{ path: 'system/users', name: 'UserManage', meta: { title: '管理员', icon: 'User', roles: ['super_admin'] } },
{ path: 'system/logs', name: 'Logs', meta: { title: '操作日志', icon: 'List', roles: ['super_admin'] } },
]
}
]
9.2 权限控制
| 角色 | 权限范围 |
|---|---|
| super_admin | 所有功能，包括用户管理 |
| admin | 内容管理、业务管理，不包括系统设置 |
| editor | 仅内容编辑，无删除权限 |
十、后台组件清单
10.1 通用组件
| 组件名 | 用途 |
|---|---|
| ImageUploader | 单图上传（MinIO） |
| MultiImageUploader | 多图上传，支持拖拽排序 |
| MediaSelector | 从媒体库选择图片 |
| RichTextEditor | 富文本编辑器 |
| JsonEditor | JSON数据编辑 |
| LangTabs | 中英文切换标签 |
| CategoryTree | 分类树选择器 |
| DataTable | 通用表格（分页、筛选、批量） |
| SearchForm | 搜索表单 |
10.2 页面专用组件
| 组件名 | 用途 |
|---|---|
| PageBlockEditor | 页面区块可视化编辑器 |
| ProductSelector | 产品选择器（弹窗） |
| CaseGallery | 案例图片轮播管理 |
| MessageReply | 留言回复表单 |
| SEOForm | SEO设置表单 |