804 lines
19 KiB
Markdown
804 lines
19 KiB
Markdown
# 页面装修功能 - 完整文档
|
||
|
||
> 参考CRMEB项目标准，实现完整的页面装修和DIY设计系统
|
||
|
||
## 📑 目录
|
||
|
||
1. [项目概述](#项目概述)
|
||
2. [核心功能](#核心功能)
|
||
3. [文件结构](#文件结构)
|
||
4. [页面功能详解](#页面功能详解)
|
||
5. [API文档](#api文档)
|
||
6. [数据结构](#数据结构)
|
||
7. [使用指南](#使用指南)
|
||
8. [开发计划](#开发计划)
|
||
9. [与CRMEB对标](#与crmeb对标)
|
||
|
||
---
|
||
|
||
## 项目概述
|
||
|
||
### 功能定位
|
||
|
||
页面装修模块是一个可视化的页面DIY系统，允许商城管理员通过拖拽和配置组件来自定义页面内容和布局，无需编码即可创建和维护多种展示页面。
|
||
|
||
### 核心价值
|
||
|
||
- **降低运营成本**: 无需技术人员，运营即可完成页面装修
|
||
- **提高灵活性**: 快速响应市场变化，实时调整页面内容
|
||
- **增强转化**: 通过优化页面布局和展示方式，提升用户转化率
|
||
- **品牌展示**: 展现品牌特色和商城个性，增强用户体验
|
||
|
||
### 技术栈
|
||
|
||
- **框架**: uni-app-x (Vue3 + TypeScript)
|
||
- **组件库**: uni.scss 设计系统
|
||
- **数据管理**: Promise-based 异步API
|
||
- **布局**: Flexbox + Grid 响应式设计
|
||
|
||
---
|
||
|
||
## 核心功能
|
||
|
||
### 🏠 1. 首页装修
|
||
|
||
**功能特性**:
|
||
|
||
- 自定义首页布局和显示内容
|
||
- 支持轮播图、商品展示、文本等多种组件
|
||
- 实时预览装修效果
|
||
- 版本管理和发布上线
|
||
|
||
**使用场景**:
|
||
|
||
- 节日活动首页设计
|
||
- 品牌形象展示
|
||
- 商品推荐展示
|
||
- 营销信息发布
|
||
|
||
**功能入口**:
|
||
|
||
```
|
||
系统 → 设计 → 页面装修 → [首页装修] 标签页 → 编辑首页
|
||
```
|
||
|
||
### 📂 2. 分类页装修
|
||
|
||
**功能特性**:
|
||
|
||
- 为不同商品分类创建独立的装修页面
|
||
- 支持多套分类装修方案并存
|
||
- 按分类自动应用对应装修效果
|
||
- 快速切换和对比装修效果
|
||
|
||
**使用场景**:
|
||
|
||
- 分类专题页设计
|
||
- 品类运营和推广
|
||
- A/B测试对比
|
||
- 季节性活动专页
|
||
|
||
**功能入口**:
|
||
|
||
```
|
||
系统 → 设计 → 页面装修 → [分类页] 标签页 → 新建装修
|
||
```
|
||
|
||
**分类装修列表**:
|
||
|
||
- 显示所有已创建的分类装修
|
||
- 展示关联分类名称
|
||
- 显示发布状态
|
||
- 支持编辑、预览、删除操作
|
||
|
||
### 🛍️ 3. 商品页装修
|
||
|
||
**功能特性**:
|
||
|
||
- 自定义商品详情页的布局和模块
|
||
- 支持商品图、信息、评价、推荐等模块
|
||
- 优化转化漏斗，提升销售额
|
||
- 支持A/B测试验证效果
|
||
|
||
**使用场景**:
|
||
|
||
- 提升商品详情页转化率
|
||
- 突出商品卖点
|
||
- 展示用户评价和反馈
|
||
- 推荐相关商品
|
||
|
||
**功能入口**:
|
||
|
||
```
|
||
系统 → 设计 → 页面装修 → [商品页] 标签页 → 编辑商品页
|
||
```
|
||
|
||
### ✏️ 4. 自定义页面
|
||
|
||
**功能特性**:
|
||
|
||
- 创建完全自定义的营销和推广页面
|
||
- 灵活的页面路径设置
|
||
- 独立的装修配置和管理
|
||
- 活动和推广专用
|
||
|
||
**使用场景**:
|
||
|
||
- 限时促销活动页
|
||
- 新品发布页面
|
||
- 品牌故事展示页
|
||
- 用户专享页面
|
||
|
||
**功能入口**:
|
||
|
||
```
|
||
系统 → 设计 → 页面装修 → [自定义] 标签页 → 新建页面
|
||
```
|
||
|
||
**自定义页面管理**:
|
||
|
||
- 显示所有自定义页面列表
|
||
- 展示页面路径和访问地址
|
||
- 管理发布状态
|
||
- 支持编辑、预览、删除
|
||
|
||
### 🎨 5. 页面模板库
|
||
|
||
**功能特性**:
|
||
|
||
- 预设4套精心设计的电商风格模板
|
||
- 一键应用模板，快速建站
|
||
- 模板库不断扩充和升级
|
||
- 支持自定义模板保存
|
||
|
||
**预设模板**:
|
||
|
||
1. **电商风格A** - 简洁现代
|
||
- 简约配色，强调商品展示
|
||
- 适合高端品牌
|
||
- 突出产品品质
|
||
|
||
2. **电商风格B** - 豪华展示
|
||
- 丰富的视觉效果
|
||
- 适合大众商城
|
||
- 强调活动促销
|
||
|
||
3. **精品风格** - 精品展示
|
||
- 精细的排版设计
|
||
- 适合精品商城
|
||
- 强调用户体验
|
||
|
||
4. **商城风格** - 完整商城
|
||
- 功能完整的布局
|
||
- 适合综合商城
|
||
- 包含所有必要模块
|
||
|
||
**功能入口**:
|
||
|
||
```
|
||
系统 → 设计 → 页面装修 → [模板库] 标签页 → 选择模板 → 使用模板
|
||
```
|
||
|
||
### 🧩 6. 组件库
|
||
|
||
**功能特性**:
|
||
|
||
- 提供8种预设装修组件
|
||
- 组件库持续扩充
|
||
- 支持自定义组件配置
|
||
- 灵活的嵌套和组合
|
||
|
||
**8类预设组件**:
|
||
|
||
| 组件 | 类型 | 图标 | 描述 | 用途 |
|
||
| -------- | -------- | ---- | ------------------ | ------------------ |
|
||
| 图片组件 | image | I | 展示图片和图片轮播 | 产品展示、活动推广 |
|
||
| 文本组件 | text | T | 展示文本内容和段落 | 文案描述、说明文字 |
|
||
| 商品组件 | product | P | 展示商品列表和推荐 | 商品展示、推荐引流 |
|
||
| 轮播组件 | carousel | C | 图片和内容轮播 | 焦点图、内容轮播 |
|
||
| 分割线 | divider | D | 分割不同内容区域 | 版面分割、结构分明 |
|
||
| 间距组件 | spacer | S | 调整元素间距 | 布局美化、层级区分 |
|
||
| 按钮组件 | button | B | 创建点击按钮 | 行动召唤、用户转化 |
|
||
| 表单组件 | form | F | 收集用户输入数据 | 用户信息、意见反馈 |
|
||
|
||
**功能入口**:
|
||
|
||
```
|
||
系统 → 设计 → 页面装修 → [组件库] 标签页 → 查看可用组件
|
||
```
|
||
|
||
---
|
||
|
||
## 文件结构
|
||
|
||
### 目录结构
|
||
|
||
```
|
||
mall/
|
||
├── pages/mall/admin/design/
|
||
│ ├── index.uvue # 装修管理主界面 (898行)
|
||
│ │ ├── 页面头部
|
||
│ │ ├── 导航选项卡
|
||
│ │ ├── 首页装修模块
|
||
│ │ ├── 分类装修模块
|
||
│ │ ├── 商品装修模块
|
||
│ │ ├── 自定义页面模块
|
||
│ │ ├── 模板库模块
|
||
│ │ └── 组件库模块
|
||
│ │
|
||
│ ├── design.uts # 业务逻辑 (350+行)
|
||
│ │ ├── 接口定义
|
||
│ │ ├── API函数
|
||
│ │ ├── 工具函数
|
||
│ │ └── 验证函数
|
||
│ │
|
||
│ ├── editor.uvue # 装修编辑器 (待实现)
|
||
│ ├── preview.uvue # 装修预览 (待实现)
|
||
│ └── README.md # 模块说明文档
|
||
│
|
||
├── docs/
|
||
│ ├── DESIGN_DECORATION_GUIDE.md # 本文档
|
||
│ ├── DESIGN_IMPLEMENTATION_REPORT.md # 实现报告
|
||
│ └── ...
|
||
│
|
||
└── menu.uts # 菜单配置 (包含设计菜单)
|
||
```
|
||
|
||
### 核心文件说明
|
||
|
||
#### index.uvue (898行)
|
||
|
||
**职责**: 装修管理的主UI界面
|
||
|
||
**主要模块**:
|
||
|
||
- 页面头部：标题和副标题
|
||
- 导航选项卡：6个功能模块切换
|
||
- 内容区域：各模块的具体功能显示
|
||
- 响应式布局：支持桌面、平板、手机
|
||
|
||
**关键功能**:
|
||
|
||
```typescript
|
||
// 数据管理
|
||
const activeTab = ref<string>('homepage')
|
||
const categoryDesigns = ref<any[]>([])
|
||
const customPages = ref<any[]>([])
|
||
|
||
// 事件处理
|
||
const handleEditPage = (pageType: string)
|
||
const handleCreateCategory = ()
|
||
const handleDeleteCategory = (id: number)
|
||
// ... 更多事件
|
||
|
||
// 样式系统
|
||
@import '@/uni.scss' // 集成设计系统
|
||
```
|
||
|
||
#### design.uts (350+行)
|
||
|
||
**职责**: 装修功能的所有业务逻辑和数据管理
|
||
|
||
**核心内容**:
|
||
|
||
1. **接口定义**
|
||
|
||
```typescript
|
||
interface DesignItem // 装修页面数据
|
||
interface DesignComponent // 装修组件数据
|
||
interface DesignTemplate // 装修模板数据
|
||
interface DesignConstraints // 约束条件
|
||
```
|
||
|
||
2. **API函数** (8个导出函数)
|
||
- getDesignList() // 获取装修列表
|
||
- getHomePageDesign() // 获取首页装修
|
||
- getProductPageDesign() // 获取商品页装修
|
||
- getCategoryDesigns() // 获取分类装修
|
||
- getCustomPages() // 获取自定义页面
|
||
- getTemplateLibrary() // 获取模板库
|
||
- getAvailableComponents() // 获取组件库
|
||
- saveDesign() // 保存装修
|
||
- publishDesign() // 发布装修
|
||
- deleteDesign() // 删除装修
|
||
|
||
3. **工具函数**
|
||
- formatDateTime() // 日期格式化
|
||
- validateComponent() // 组件验证
|
||
- generateComponentId() // 生成组件ID
|
||
- getDesignConstraints() // 获取约束条件
|
||
- cloneDesign() // 深度克隆
|
||
- validateDesign() // 装修验证
|
||
- exportDesignJSON() // 导出JSON
|
||
- importDesignJSON() // 导入JSON
|
||
|
||
---
|
||
|
||
## 页面功能详解
|
||
|
||
### 📋 UI布局结构
|
||
|
||
#### 1. 页面头部
|
||
|
||
```
|
||
┌──────────────────────────────────────┐
|
||
│ 页面装修 │
|
||
│ 设计和装修您的商城页面 │
|
||
└──────────────────────────────────────┘
|
||
```
|
||
|
||
- 大标题: "页面装修"
|
||
- 副标题: "设计和装修您的商城页面"
|
||
|
||
#### 2. 导航选项卡
|
||
|
||
```
|
||
[ H首页装修 ] [ C分类页 ] [ P商品页 ] [ +自定义 ] [ T模板库 ] [ B组件库 ]
|
||
```
|
||
|
||
- 点击切换不同功能模块
|
||
- 当前活跃选项卡高亮显示
|
||
- 支持键盘快捷键（可扩展）
|
||
|
||
#### 3. 首页装修模块
|
||
|
||
```
|
||
内容标题 [编辑按钮]
|
||
┌────────────────────────────┐
|
||
│ │
|
||
│ 设计卡片布局 │
|
||
│ └─ 卡片信息 │
|
||
│ └─ 操作按钮 │
|
||
│ [编辑] [预览] │
|
||
│ │
|
||
└────────────────────────────┘
|
||
```
|
||
|
||
#### 4. 分类页模块
|
||
|
||
```
|
||
内容标题 [新建装修]
|
||
┌────────────────────────────┐
|
||
│ 分类1 [状态] [编辑][删除] │
|
||
│ 分类2 [状态] [编辑][删除] │
|
||
│ 分类3 [状态] [编辑][删除] │
|
||
└────────────────────────────┘
|
||
```
|
||
|
||
#### 5. 模板库模块
|
||
|
||
```
|
||
┌──────────┬──────────┬──────────┬──────────┐
|
||
│ 模板卡1 │ 模板卡2 │ 模板卡3 │ 模板卡4 │
|
||
├──────────┼──────────┼──────────┼──────────┤
|
||
│ [预览] │ [预览] │ [预览] │ [预览] │
|
||
│ 名称 │ 名称 │ 名称 │ 名称 │
|
||
│ 描述 │ 描述 │ 描述 │ 描述 │
|
||
└──────────┴──────────┴──────────┴──────────┘
|
||
```
|
||
|
||
#### 6. 组件库模块
|
||
|
||
```
|
||
┌──────────┬──────────┬──────────┬──────────┐
|
||
│ 组件卡1 │ 组件卡2 │ 组件卡3 │ 组件卡4 │
|
||
├──────────┼──────────┼──────────┼──────────┤
|
||
│ [图标] │ [图标] │ [图标] │ [图标] │
|
||
│ 名称 │ 名称 │ 名称 │ 名称 │
|
||
│ 描述 │ 描述 │ 描述 │ 描述 │
|
||
│ [添加] │ [添加] │ [添加] │ [添加] │
|
||
└──────────┴──────────┴──────────┴──────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## API文档
|
||
|
||
### 主API函数
|
||
|
||
#### 1. getDesignList(params?)
|
||
|
||
获取装修页面列表
|
||
|
||
```typescript
|
||
const designs = await getDesignList()
|
||
|
||
// 返回值示例
|
||
[
|
||
{
|
||
id: 1,
|
||
name: '首页装修',
|
||
type: 'homepage',
|
||
status: 1,
|
||
content: [],
|
||
updated_at: '2026-01-30 14:30:00'
|
||
},
|
||
// ...
|
||
]
|
||
```
|
||
|
||
#### 2. getHomePageDesign()
|
||
|
||
获取首页装修详情
|
||
|
||
```typescript
|
||
const homepage = await getHomePageDesign()
|
||
|
||
// 返回包含的组件内容
|
||
{
|
||
id: 'homepage',
|
||
name: '首页装修',
|
||
type: 'homepage',
|
||
content: [
|
||
{ id: 'carousel-1', type: 'carousel', ... },
|
||
{ id: 'product-1', type: 'product', ... }
|
||
]
|
||
}
|
||
```
|
||
|
||
#### 3. getCategoryDesigns()
|
||
|
||
获取分类装修列表
|
||
|
||
```typescript
|
||
const categories =
|
||
await getCategoryDesigns()[
|
||
// 返回示例
|
||
{
|
||
id: 1,
|
||
name: "默认分类装修",
|
||
type: "category",
|
||
status: 1,
|
||
categoryId: 0,
|
||
categoryName: "全部分类",
|
||
}
|
||
];
|
||
```
|
||
|
||
#### 4. getCustomPages()
|
||
|
||
获取自定义页面列表
|
||
|
||
```typescript
|
||
const pages =
|
||
await getCustomPages()[
|
||
// 返回示例
|
||
{
|
||
id: 1,
|
||
name: "新年促销页",
|
||
type: "custom",
|
||
status: 1,
|
||
path: "/pages/promotion/newyear",
|
||
}
|
||
];
|
||
```
|
||
|
||
#### 5. getTemplateLibrary()
|
||
|
||
获取页面模板库
|
||
|
||
```typescript
|
||
const templates =
|
||
await getTemplateLibrary()[
|
||
// 返回示例
|
||
{
|
||
id: 1,
|
||
name: "电商风格A",
|
||
description: "简洁现代的电商布局",
|
||
type: "homepage",
|
||
preview: "@/static/images/template-a.png",
|
||
}
|
||
];
|
||
```
|
||
|
||
#### 6. getAvailableComponents()
|
||
|
||
获取可用组件库
|
||
|
||
```typescript
|
||
const components =
|
||
await getAvailableComponents()[
|
||
// 返回示例
|
||
{
|
||
id: "image",
|
||
type: "image",
|
||
name: "图片组件",
|
||
icon: "I",
|
||
description: "展示图片和图片轮播",
|
||
componentName: "ImageComponent",
|
||
}
|
||
];
|
||
```
|
||
|
||
#### 7. saveDesign(design)
|
||
|
||
保存装修页面
|
||
|
||
```typescript
|
||
const result = await saveDesign({
|
||
id: 1,
|
||
name: '新建装修',
|
||
type: 'homepage',
|
||
status: 0,
|
||
content: []
|
||
})
|
||
|
||
// 返回示例
|
||
{ id: 1, message: '保存成功' }
|
||
```
|
||
|
||
#### 8. publishDesign(designId)
|
||
|
||
发布装修页面
|
||
|
||
```typescript
|
||
await publishDesign(1);
|
||
// 返回: { message: '发布成功' }
|
||
```
|
||
|
||
#### 9. deleteDesign(designId)
|
||
|
||
删除装修页面
|
||
|
||
```typescript
|
||
await deleteDesign(1);
|
||
// 返回: { message: '删除成功' }
|
||
```
|
||
|
||
---
|
||
|
||
## 数据结构
|
||
|
||
### DesignItem 装修页面
|
||
|
||
```typescript
|
||
interface DesignItem {
|
||
id: string | number;
|
||
name: string; // 装修名称
|
||
type: "homepage" | "category" | "product" | "custom";
|
||
status: 0 | 1; // 0=草稿, 1=已发布
|
||
categoryId?: string | number; // 分类ID
|
||
categoryName?: string; // 分类名称
|
||
path?: string; // 自定义页面路径
|
||
preview_url?: string; // 预览图URL
|
||
content: DesignComponent[]; // 组件列表
|
||
version?: string; // 版本号
|
||
created_at?: string; // 创建时间
|
||
updated_at?: string; // 更新时间
|
||
}
|
||
```
|
||
|
||
### DesignComponent 组件
|
||
|
||
```typescript
|
||
interface DesignComponent {
|
||
id: string; // 组件唯一ID
|
||
type:
|
||
| "image"
|
||
| "text"
|
||
| "product"
|
||
| "carousel"
|
||
| "divider"
|
||
| "spacer"
|
||
| "button"
|
||
| "form";
|
||
name: string; // 组件名称
|
||
icon: string; // 组件图标
|
||
description?: string; // 组件描述
|
||
componentName?: string; // Vue组件名
|
||
config?: Record<string, any>; // 配置参数
|
||
children?: DesignComponent[]; // 子组件
|
||
}
|
||
```
|
||
|
||
### DesignTemplate 模板
|
||
|
||
```typescript
|
||
interface DesignTemplate {
|
||
id: string | number;
|
||
name: string; // 模板名称
|
||
description: string; // 模板描述
|
||
type: string; // 模板类型
|
||
preview: string; // 预览图URL
|
||
content: DesignComponent[]; // 模板内容
|
||
created_at?: string; // 创建时间
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 使用指南
|
||
|
||
### 快速开始
|
||
|
||
#### 步骤1: 访问装修页面
|
||
|
||
```
|
||
1. 登录管理后台
|
||
2. 点击左侧菜单 "系统" → "设计" → "页面装修"
|
||
3. 进入装修管理主界面
|
||
```
|
||
|
||
#### 步骤2: 选择装修类型
|
||
|
||
```
|
||
点击对应标签页:
|
||
- 首页装修: 自定义商城首页
|
||
- 分类页: 为分类创建装修
|
||
- 商品页: 自定义商品详情页
|
||
- 自定义: 创建营销推广页
|
||
- 模板库: 使用预设模板
|
||
- 组件库: 查看可用组件
|
||
```
|
||
|
||
#### 步骤3: 编辑装修
|
||
|
||
```
|
||
1. 点击 [编辑] 按钮或卡片
|
||
2. 进入装修编辑器
|
||
3. 拖拽组件到页面
|
||
4. 配置组件参数
|
||
5. 实时预览效果
|
||
```
|
||
|
||
#### 步骤4: 发布上线
|
||
|
||
```
|
||
1. 编辑完成后点击 [发布]
|
||
2. 确认发布内容
|
||
3. 确认后装修即刻生效
|
||
```
|
||
|
||
---
|
||
|
||
## 开发计划
|
||
|
||
### Phase 1: 基础编辑器 (优先级: 高)
|
||
|
||
- [ ] **editor.uvue** - 装修编辑器界面
|
||
- 组件编辑面板
|
||
- 实时预览窗口
|
||
- 属性配置区
|
||
- 撤销/重做功能
|
||
|
||
- [ ] **拖拽排序** - 组件拖拽和排序
|
||
- 拖拽添加组件
|
||
- 拖拽排序组件
|
||
- 删除组件
|
||
|
||
- [ ] **属性配置** - 组件参数设置
|
||
- 基本属性编辑
|
||
- 样式自定义
|
||
- 响应式设置
|
||
|
||
### Phase 2: 高级功能 (优先级: 中)
|
||
|
||
- [ ] **版本管理** - 版本控制和回滚
|
||
- 版本列表
|
||
- 版本对比
|
||
- 版本回滚
|
||
- 自动保存草稿
|
||
|
||
- [ ] **模板管理** - 模板库功能
|
||
- 模板列表
|
||
- 模板预览
|
||
- 模板应用
|
||
- 自定义模板保存
|
||
|
||
- [ ] **页面克隆** - 快速复制功能
|
||
- 克隆装修页面
|
||
- 保留配置结构
|
||
- 快速修改
|
||
|
||
### Phase 3: 智能特性 (优先级: 低)
|
||
|
||
- [ ] **AI建议** - 人工智能优化
|
||
- 布局建议
|
||
- 色彩搭配
|
||
- 文案优化
|
||
|
||
- [ ] **数据分析** - 性能监控
|
||
- 页面访问统计
|
||
- 用户转化分析
|
||
- 性能指标
|
||
|
||
---
|
||
|
||
## 与CRMEB对标
|
||
|
||
### CRMEB标准功能对标
|
||
|
||
| 功能 | CRMEB | mall | 状态 |
|
||
| ---------- | ----- | ---- | --------- |
|
||
| 首页装修 | Y | Y | ✓ 已实现 |
|
||
| 分类页装修 | Y | Y | ✓ 已实现 |
|
||
| 商品页装修 | Y | Y | ✓ 已实现 |
|
||
| 自定义页面 | Y | Y | ✓ 已实现 |
|
||
| 组件库 | Y | Y | ✓ 已实现 |
|
||
| 模板库 | Y | Y | ✓ 已实现 |
|
||
| 拖拽编辑器 | Y | - | ⏳ 开发中 |
|
||
| 实时预览 | Y | - | ⏳ 规划中 |
|
||
| 版本管理 | Y | - | ⏳ 规划中 |
|
||
| AI布局建议 | - | - | ⏳ 规划中 |
|
||
|
||
### 组件库对标
|
||
|
||
| 组件 | CRMEB | mall | 说明 |
|
||
| -------- | ----- | ---- | --------- |
|
||
| 图片轮播 | Y | Y | ✓ 支持 |
|
||
| 商品列表 | Y | Y | ✓ 支持 |
|
||
| 分类导航 | Y | - | ⏳ 规划中 |
|
||
| 搜索框 | Y | - | ⏳ 规划中 |
|
||
| 优惠券 | Y | - | ⏳ 规划中 |
|
||
| 倒计时 | Y | - | ⏳ 规划中 |
|
||
| 视频 | Y | - | ⏳ 规划中 |
|
||
| 直播 | Y | - | ⏳ 规划中 |
|
||
|
||
---
|
||
|
||
## 技术特性
|
||
|
||
### 设计系统集成
|
||
|
||
```typescript
|
||
@import '@/uni.scss'
|
||
|
||
// 颜色系统
|
||
$brand-primary: #1890ff
|
||
$brand-success: #52c41a
|
||
$text-primary: #000000
|
||
$background-secondary: #f5f5f5
|
||
|
||
// 间距系统
|
||
$space-sm: 8px
|
||
$space-md: 16px
|
||
$space-lg: 24px
|
||
|
||
// 圆角系统
|
||
$radius: 8px
|
||
$radius-sm: 4px
|
||
```
|
||
|
||
### 响应式设计
|
||
|
||
```
|
||
桌面版 (≥1024px) : 4列网格
|
||
平板版 (768-1023px): 3列网格 + 响应式菜单
|
||
手机版 (≤767px) : 2列网格 + 单列列表
|
||
```
|
||
|
||
### TypeScript 类型安全
|
||
|
||
所有接口和数据结构都使用TypeScript定义，确保类型安全和IDE支持。
|
||
|
||
---
|
||
|
||
## 常见问题
|
||
|
||
### Q: 如何快速创建首页装修?
|
||
|
||
A: 可以：
|
||
|
||
1. 进入模板库选择合适模板
|
||
2. 一键应用模板内容
|
||
3. 在编辑器中修改细节
|
||
4. 发布上线
|
||
|
||
### Q: 支持多少个组件?
|
||
|
||
A: 单个装修页面最多支持50个组件，可根据需要调整。
|
||
|
||
### Q: 如何备份装修数据?
|
||
|
||
A: 可以使用导出JSON功能备份，然后可随时导入恢复。
|
||
|
||
### Q: 装修后立即生效吗?
|
||
|
||
A: 点击发布后立即生效，无需其他步骤。
|
||
|
||
---
|
||
|
||
**文档版本**: 1.0.0
|
||
**最后更新**: 2026-01-31
|
||
**维护者**: 设计团队
|