652 lines
47 KiB
Markdown
652 lines
47 KiB
Markdown
# 创高家具官网 - 管理后台设计
|
||
|
||
## 一、后台核心功能架构
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ 创高家具管理后台 │
|
||
├─────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
|
||
│ │ 内容管理 │ │ 业务管理 │ │ 系统管理 │ │
|
||
│ ├─────────────┤ ├─────────────┤ ├─────────────┤ │
|
||
│ │ · 轮播图 │ │ · 产品分类 │ │ · 公司信息 │ │
|
||
│ │ · 页面区块 │ │ · 产品管理 │ │ · 管理员 │ │
|
||
│ │ · 媒体库 │ │ · 案例分类 │ │ · 操作日志 │ │
|
||
│ │ │ │ · 案例管理 │ │ │ │
|
||
│ │ │ │ · 新闻分类 │ │ │ │
|
||
│ │ │ │ · 新闻管理 │ │ │ │
|
||
│ │ │ │ · 留言管理 │ │ │ │
|
||
│ └─────────────┘ └─────────────┘ └─────────────┘ │
|
||
│ │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 二、页面文本管理（核心功能）
|
||
|
||
### 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
|
||
<!-- 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 路由结构
|
||
|
||
```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设置表单 |
|