开发指南

概述

第三方开发者可以通过开发 DIY 组件来扩展系统的页面装修功能。DIY 组件是指可以添加到自定义页面上的独立功能模块，这些组件既可以供开发者自己使用，也可以开放给其他用户（包括其他开发者和最终用户）使用，极大地增强了系统的扩展性和灵活性

框架支持自定义页面装修，用户可以通过「自由可视化拖拽+组件配置+实时预览」的方式，无需代码开发即可自定义生成页面（如商城首页、活动页、个人中心页等），同时满足开发者扩展自定义组件的需求，兼顾易用性与灵活性，适配多终端（H5 /微信小程序）展示场景

装修界面采用三栏式布局：左侧展示组件库供用户选择，中间区域提供实时预览功能，右侧面板用于编辑和配置所选组件的各项属性

如需了解自定义页面装修的核心原理，开发者可以自行阅读

文件位置：admin\src\app\views\diy\edit.vue

该文件实现了整个装修界面的交互逻辑、组件管理和实时预览功能

装修过程中的状态管理通过 Store 模式实现

文件位置：admin\src\stores\modules\diy.ts 装修数据最终存储到数据表中的结构主要包含两大部分：

global：global 对象为整体页面的数据结构，后续还会持续完善，实现更加灵活的自定义装修 value：value 为组件集合，在装修时添加自定义组件会变化

在移动端（uni-app）中，自定义页面通过 diy-group 组件进行渲染。该组件负责解析和展示装修数据中的所有组件

文件位置：uni-app/src/addon/components/diy/group/

该文件负责处理移动端组件的数据获取、解析和渲染逻辑

文件位置：uni-app/src/app/stores/diy.ts