修改页面结构

2026-02-02 20:07:37 +08:00
parent 3de5e9ebe9
commit 21f4a0fa96
209 changed files with 41824 additions and 2730 deletions
--- a/pages/mall/admin/design/README.md
+++ b/pages/mall/admin/design/README.md
@@ -0,0 +1,179 @@
+# 页面装修管理模块 - README
+
+> 基于CRMEB项目标准，实现完整的页面装修和DIY功能
+
+## 📋 文件结构
+
+```
+pages/mall/admin/design/
+├── index.uvue          # 装修管理主界面（898行）
+├── design.uts          # 业务逻辑和数据管理（350+行）
+├── editor.uvue         # 装修编辑器（待实现）
+├── preview.uvue        # 装修预览页面（待实现）
+└── README.md           # 本文件
+```
+
+## 🎯 核心功能
+
+### 1. 首页装修 (Homepage)
+
+- 自定义首页布局和显示内容
+- 支持轮播图、商品展示、文本等组件
+- 实时预览效果
+- 版本管理和发布
+
+### 2. 分类页装修 (Category)
+
+- 为不同商品分类创建装修页面
+- 支持多套分类装修方案
+- 按分类自动应用装修效果
+- 快速切换和对比
+
+### 3. 商品页装修 (Product)
+
+- 自定义商品详情页布局
+- 支持商品图、信息、评价等模块
+- 提升商品转化率
+- A/B测试支持
+
+### 4. 自定义页面 (Custom)
+
+- 创建和管理自定义营销页面
+- 灵活的页面路径设置
+- 独立的装修配置
+- 活动和推广专用
+
+### 5. 页面模板库 (Templates)
+
+- 预设4套电商风格模板
+- 一键应用模板快速建站
+- 模板库不断扩充
+- 自定义模板保存
+
+### 6. 组件库 (Components)
+
+- 8种预设装修组件：
+  - 图片组件 (Image)
+  - 文本组件 (Text)
+  - 商品组件 (Product)
+  - 轮播组件 (Carousel)
+  - 分割线 (Divider)
+  - 间距组件 (Spacer)
+  - 按钮组件 (Button)
+  - 表单组件 (Form)
+
+## 🔧 API 函数列表
+
+| 函数                       | 参数       | 返回值                     | 说明             |
+| -------------------------- | ---------- | -------------------------- | ---------------- |
+| `getDesignList(params?)`   | 查询参数   | Promise<DesignItem[]>      | 获取装修列表     |
+| `getHomePageDesign()`      | 无         | Promise<DesignItem>        | 获取首页装修     |
+| `getProductPageDesign()`   | 无         | Promise<DesignItem>        | 获取商品页装修   |
+| `getCategoryDesigns()`     | 无         | Promise<DesignItem[]>      | 获取分类装修列表 |
+| `getCustomPages()`         | 无         | Promise<DesignItem[]>      | 获取自定义页面   |
+| `getTemplateLibrary()`     | 无         | Promise<DesignTemplate[]>  | 获取模板库       |
+| `getAvailableComponents()` | 无         | Promise<DesignComponent[]> | 获取可用组件     |
+| `saveDesign(design)`       | DesignItem | Promise<{id, message}>     | 保存装修         |
+| `publishDesign(id)`        | 装修ID     | Promise<{message}>         | 发布装修         |
+| `deleteDesign(id)`         | 装修ID     | Promise<{message}>         | 删除装修         |
+
+## 📊 数据结构
+
+### DesignItem 装修页面
+
+```typescript
+interface DesignItem {
+  id: string | number; // 装修ID
+  name: string; // 装修名称
+  type: "homepage" | "category" | "product" | "custom";
+  status: 0 | 1; // 0=草稿, 1=已发布
+  content: DesignComponent[]; // 组件内容
+  categoryId?: string | number; // 分类ID
+  categoryName?: string; // 分类名称
+  path?: string; // 页面路径
+  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; // 组件描述
+  config?: Record<string, any>; // 配置参数
+  children?: DesignComponent[]; // 子组件
+}
+```
+
+## 💻 使用示例
+
+```typescript
+// 导入服务
+import {
+  getDesignList,
+  saveDesign,
+  publishDesign,
+  getAvailableComponents,
+} from "./design.uts";
+
+// 获取列表
+const designs = await getDesignList();
+
+// 保存装修
+await saveDesign({
+  id: 1,
+  name: "首页",
+  type: "homepage",
+  status: 0,
+  content: [],
+});
+
+// 发布装修
+await publishDesign(1);
+
+// 获取组件库
+const components = await getAvailableComponents();
+```
+
+## 📱 菜单配置
+
+```json
+{
+  "id": "design",
+  "title": "设计",
+  "children": [
+    {
+      "id": "design-home",
+      "title": "页面装修",
+      "path": "/pages/mall/admin/design/index"
+    }
+  ]
+}
+```
+
+## 🚀 后续开发
+
+- [ ] editor.uvue - 装修编辑器
+- [ ] preview.uvue - 装修预览
+- [ ] 拖拽排序功能
+- [ ] 版本管理
+- [ ] 模板库管理
+
+---
+
+**最后更新**: 2026-01-31  
+**版本**: 1.0.0