← 返回项目总览

页面配置解析引擎

可视化活动页面搭建与配置工具

低代码平台 Vue 3

项目简介

页面配置解析引擎是一个可视化的页面配置工具，用于快速搭建活动页面（营销页/H5 页面）。通过拖拽组件和实时预览的方式，运营人员无需编写代码即可创建完整的活动页面。支持头部横幅、九宫格抽奖、结果弹窗、活动规则等多种内置组件，配置自动保存至 localStorage，避免数据丢失。

拖拽编辑界面截图
拖拽编辑界面：展示组件拖拽编辑画布，左侧组件列表与中间编辑区域

核心功能

界面区域说明

左侧组件列表

提供丰富的内置组件库，包括头部横幅、九宫格抽奖、结果弹窗、活动规则等多种常用组件。每个组件都有清晰的图标和名称，方便用户快速识别和选择。用户可以通过拖拽的方式将组件添加到中间的预览区域。

中间预览区域

作为页面编辑的主画布，展示当前页面的布局和内容。用户可以在这里查看组件的排列效果，通过拖拽调整组件位置，点击选中组件进行编辑，双击删除不需要的组件。预览区域实时反映组件的样式和布局，实现所见即所得的编辑体验。

右侧组件属性配置

当用户在中间预览区域选中某个组件时，右侧面板会显示该组件的详细属性配置项。用户可以在这里修改组件的各种属性，如文本内容、图片链接、样式设置等。所有配置变更都会实时反映到中间预览区域，确保用户能够立即看到修改效果。

技术架构

前端

Vue 3.5 / TypeScript / Vite 6 / Vue Router 5

页面配置JSON

经过可视化配置后，整个页面布局会生成以下JSON结构，前端基于此JSON进行页面渲染：

[{
  "type": "header",
  "name": "头部Banner",
  "props": {
    "bannerImage": "/src/assets/prizes/banner.png",
    "title": "幸运大抽奖",
    "subtitle": "参与抽奖，赢取丰厚奖品！"
  }
}, {
  "type": "lottery",
  "name": "九宫格抽奖",
  "props": {
    "buttonText": "开始抽奖",
    "drawCount": 3,
    "prizes": [
      {
        "id": 1,
        "name": "iPhone 15",
        "icon": "/src/assets/prizes/iphone15.png",
        "probability": 1
      },
      {
        "id": 2,
        "name": "AirPods Pro",
        "icon": "/src/assets/prizes/airpods.png",
        "probability": 3
      },
      {
        "id": 3,
        "name": "Apple Watch",
        "icon": "/src/assets/prizes/applewatch.png",
        "probability": 5
      },
      {
        "id": 4,
        "name": "50元京东卡",
        "icon": "/src/assets/prizes/jdcard.png",
        "probability": 10
      },
      {
        "id": 5,
        "name": "谢谢参与",
        "icon": "/src/assets/prizes/thankyou.png",
        "probability": 60
      },
      {
        "id": 6,
        "name": "10元话费",
        "icon": "/src/assets/prizes/phonecredit.png",
        "probability": 15
      },
      {
        "id": 7,
        "name": "20元美团券",
        "icon": "/src/assets/prizes/meituan.png",
        "probability": 5
      },
      {
        "id": 8,
        "name": "小米手环",
        "icon": "/src/assets/prizes/xiaomi.png",
        "probability": 1
      }
    ]
  }
}, {
  "type": "result",
  "name": "抽奖结果弹窗",
  "props": {
    "title": "恭喜您！",
    "prize": null
  },
  "showResult": false
}, {
  "type": "rules",
  "name": "活动规则",
  "props": {
    "title": "活动规则",
    "rules": [
      "活动时间：2026年3月12日至2026年3月31日",
      "每位用户初始拥有3次抽奖机会",
      "分享活动可额外获得1次抽奖机会，最多可获得5次额外机会",
      "中奖后请及时填写个人信息，以便发放奖品",
      "实物奖品将在活动结束后7个工作日内发放",
      "虚拟奖品（如话费、优惠券）将在中奖后24小时内到账",
      "本活动最终解释权归主办方所有"
    ]
  }
}]

前端渲染流程：

  1. 解析JSON配置，根据每个组件的type字段识别组件类型
  2. 根据组件类型渲染对应的Vue组件
  3. 将props属性传递给对应的组件
  4. 组件根据props属性渲染出具体的UI界面
  5. 实现组件间的交互逻辑，如抽奖功能、结果展示等

技术栈一览

Vue 3.5 TypeScript Vite 6 Vue Router 5 localStorage