# 创高家具官网 - 管理后台设计 ## 一、后台核心功能架构 ``` ┌─────────────────────────────────────────────────────────────┐ │ 创高家具管理后台 │ ├─────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │ 内容管理 │ │ 业务管理 │ │ 系统管理 │ │ │ ├─────────────┤ ├─────────────┤ ├─────────────┤ │ │ │ · 轮播图 │ │ · 产品分类 │ │ · 公司信息 │ │ │ │ · 页面区块 │ │ · 产品管理 │ │ · 管理员 │ │ │ │ · 媒体库 │ │ · 案例分类 │ │ · 操作日志 │ │ │ │ │ │ · 案例管理 │ │ │ │ │ │ │ │ · 新闻分类 │ │ │ │ │ │ │ │ · 新闻管理 │ │ │ │ │ │ │ │ · 留言管理 │ │ │ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │ │ └─────────────────────────────────────────────────────────────┘ ``` --- ## 二、页面文本管理（核心功能） ### 2.1 功能说明 后台可直接修改所有前台页面的文本内容，支持中英文双语配置。 ### 2.2 数据表结构（f_page_block） ```sql -- 页面区块配置表 -- 通过 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 上传组件设计 ```vue ``` ### 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 路由结构 ```typescript 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设置表单 |