企业官网建设流程全解析

• 低代码
• 前端
• 后端

Luban-H5 是一款类易企秀的 H5 制作、移动端页面可视化搭建工具，其核心价值在于让用户通过拖拽与点选的方式，快速完成移动端页面（作品）的创建、编辑、预览与发布。本文基于仓库 docs/en/getting-started/features.md 的功能清单，结合前后端源码逐项展开：你会看到编辑器在参考线、吸附对齐、元素与页面管理上的完整交互逻辑，组件系统从基础组件到表单组件的注册与拖拽机制，以及后端围绕作品增删改查、表单数据采集、在线预览所暴露的完整 REST API。读完本文，你既能获得一份可直接对照的功能清单，也能理解这些能力在代码层面的具体落点。

一、编辑器（Editor）：画布级可视化交互能力

编辑器是 Luban-H5 的核心交互层，围绕「中间画布 + 左右面板 + 顶部工具」的经典布局展开。文档所列能力可归纳为「对齐辅助」「元素操作」「页面管理」「快捷预览」「撤销重做」五类，下面逐一对应到源码。

1.1 参考线（Reference Line）与吸附对齐（Adsorption Line, Assembly Alignment）

在拖动元素的过程中，编辑器会实时计算当前元素与其他元素之间水平、垂直方向的对齐关系，并绘制出参考线；当偏移量小于 5px 时自动吸附对齐。

• 实现位置：canvas/edit.js 中的calcVHLine(point)方法。其核心逻辑是：取当前编辑元素（editingElement）之外的所有元素作为参考（referElements），为每个参考元素计算左边界left、水平中线left + width / 2、右边界left + width三组 X 坐标，以及上边界top、垂直中线top + height / 2、下边界top + height三组 Y 坐标；再与当前元素自身的六组坐标逐一比对，Math.abs(offset) <= 5时即触发吸附，并通过drawVLine/drawHLine在画布上生成.v-line/.h-line参考线。
• 吸附分为两类场景：整体拖动元素（handleElementMove）时同时修正left/top；拖动元素边缘的缩放手柄（handlePointMove，参数为lt/rt/lb/rb/l/r/t/b等方位点）时，只修正对应的宽度/高度与坐标，代码注释中特别标注了 issue #360 的处理逻辑。
• 拖拽结束（mouseup）时调用clearHLine/clearVLine清除参考线，并通过recordElementRect记录元素位置快照，为撤销重做提供历史节点（详见 1.5）。

1.2 拖拽改变组件形状（Towing Change Component Shape）

选中元素后，其外框会渲染 8 个缩放手柄（四角lt/rt/lb/rb与四边中点l/r/t/b），实现缩放。

• 实现位置：shape.js。手柄的样式由getPointStyle计算，依据方位字母（t/b/l/r）映射到东南西北方向并生成对应的*-resize鼠标样式；mousedownForMark监听手柄的 mousedown，在 mousemove 中根据手柄方位对高度、宽度、left、top 做增量计算（上/左手柄为负向变化，下/右手柄为正向变化），同时通过handlePointMoveProp实时回写元素样式，并借助calcVHLine(point)让缩放过程同样参与参考线吸附。
• 此外，画布底部还提供了可拖拽的「调整线」（edit.js 的mousedownForAdjustLine），配合输入框可直接修改作品的width/height（默认作品宽度 320px，见 Work.settings.json 中的width默认值），拖动时滚动条自动同步至底部。

1.3 元素操作：复制、删除、编辑（Canvas）

元素层面的增删改查统一收敛在 Vuex 模块 store/modules/element.js 的elementManagermutation 中，支持add、copy、delete、move2Top、move2Bottom、addZindex、minusZindex、reOrder等操作类型：

• 复制：elements.push(state.editingElement.clone({ zindex: len + 1 }))，新元素自动获得递增的层级zindex；该操作可通过顶部固定工具 fixed-tools/options.js 触发。
• 删除：先找到当前编辑元素的索引，若用户在偏好设置（local-preferences.js 的IS_CONFIRM_BEFORE_DELETE_ELEMENT）中开启了删除确认，则弹出Modal.confirm二次确认后再执行splice。同时 shape.js 支持键盘 Backspace / Delete 快捷键删除（handleDeleteByKeyboard），并会$emit('delete')回调elementManager({ type: 'delete' })。
• 编辑：画布上的每个元素在 mousedown 时即通过setEditingElement(element)成为editingElement，随之展示外框、手柄与右侧属性面板；点击画布空白区域（class 不含element-on-edit-canvas）则清空选中态（edit.js）。
• 层级管理：move2Top/move2Bottom通过数组重排并重置zindex实现，addZindex/minusZindex借助 utils/element.js 的swapZindex交换相邻元素层级。

1.4 页面操作：新增、复制、删除（Page）

页面管理由 store/modules/page.js 的pageManagermutation 驱动，对应左侧「页面管理」面板 page-manager/index.js 与下拉菜单 page-manager/title-menu.js（菜单项add/copy/delete，面板底部另有加号按钮）：

• 新增：new Page(value)创建新页并 push 到work.pages。
• 复制：state.editingPage.clone()克隆当前页追加到末尾。
• 删除：为保证作品中始终保留至少一个页面，当pages.length === 1时会提示「作品中至少需要保留一个页面」并直接返回；否则依据editingPage.uuid找到索引并移除。
• 标题编辑：editTitle直接改写work.pages[pageIndex].title，保存后通过saveWork({ isSaveCover: false })持久化。
• 页面切换：setEditingPage(pageIndex)将editingPage指向目标页，画布随之切换到对应页的元素集合。

1.5 撤销 / 重做（Undo, Redo）

撤销重做采用「订阅 Vuex mutation + 快照入栈」的实现方式：

• 实现位置：store/plugins/undo-redo/index.js 与 store/plugins/undo-redo/History.js。
• 仅将三类「有状态意义的变更」计入历史：editor/recordRect（拖动/缩放结束时的位置快照）、editor/elementManager（增删复制等元素操作）、editor/setEditingPage（作为作品初始状态）。代码注释明确指出：setElementCommonStyle在 mousemove 期间触发过于频繁，因此被排除在历史记录之外，保证撤销粒度停留在「一次完整操作」而非「逐像素移动」。
• 历史栈通过history数组与currentIndex游标实现：addState时若游标之后存在 redo 分支则先splice丢弃；undo从history[currentIndex - 1]取快照并以store.replaceState(cloneDeep(prevState))整体回放，redo同理。代码中特别注释了「firstState 不能提前入栈」的原因——否则撤销到最后会回放到 work 为 null 的编辑器初始态，导致画布空白。canUndo/canRedo分别以currentIndex > 0与history.length > currentIndex + 1判定。

二、组件系统（Component System）

Luban-H5 将画布中的可放置单元抽象为「插件（Plugin）」——每个插件即一个 Vue 组件，注册在 plugins/index.js 的pluginsList中，并全局注册（Vue.component(plugin.name, plugin.component)），此举也便于后续加载 npm 插件扩展。左侧「组件快捷面板」shortcuts-panel/index.js 渲染pluginsList中visible: true的插件，点击或拖拽即可把插件实例化到画布。

2.1 基础组件（Basic Component）

从源码看，实际插件列表还额外包含轮播图（LbpSlide）、地图（LbpQQMap）、评分（LbpRate）、公告（LbpNoticeBar）、表格（LbpTable，含默认/斑马线/淡蓝三套主题）、新闻列表（LbpNewsList）以及基于同一图表的雷达图、折线图、柱状图、饼状图、漏斗图等图表组件，说明组件系统具备良好的可扩展性。

背景组件的特殊性在于画布渲染逻辑：renderCanvas会优先识别element.name === 'lbp-background'的元素并直接渲染为lbp-background（不套用可拖动外框），使背景始终铺满页面底层（edit.js）。

2.2 表单组件（Form Component）

表单组件与后端表单采集能力（见 3.2）一一对应：后端在聚合表单数据时会识别lbp-form-input（取其placeholder）与lbp-form-radio-group（取其aliasName）作为字段名（Work.js 的getUuidMap2Name）。关于表单组件如何绑定数据源、如何提交，可进一步阅读仓库文档 docs/en/implementation/form-submit.md（中文版见 docs/zh/implementation/form-submit.md）。

2.3 组件如何被放置到画布

组件的放置支持「点击添加」与「拖拽添加」两种方式：

• 点击：shortcuts-panel的clone(elementShortcutConfig)直接调用elementManager({ type: 'add', value })，以new Element({...basicElement, ...shortcutProps, zindex: len + 1})实例化元素。
• 拖拽：由 mixins/drag.js 实现。mousedown 时克隆被拖拽的快捷按钮为dragDom浮层并计算layerX/layerY偏移；mousemove 中跟随鼠标移动；mouseup 时通过checkCanMousedown校验位移量（默认minOffset: 10，避免误触），再以.canvas-wrapper为参照计算目标坐标dragStyle: { left, top }，最终同样走clone创建元素。shortcutProps还支持为同一插件声明默认属性，例如表格的theme主题、图表插件的type: radar/line/histogram/pie/funnel。

三、开源增强功能（Enhancements [open source]）

3.1 模板列表、基于模板制作 H5、作品另存为模板

模板能力的端到端链路如下：

• 数据模型：Work.settings.json（back-end/h5-api/api/work/models/Work.settings.json）定义is_template（布尔）与cover_image_url（封面图）字段，page_mode支持h5_swipper（H5 轮播）、h5_long_page（H5 长页）、h5_form（H5 表单）三种模式。
• 后端接口（routes.json）：
  • POST /works/set-as-template/:id→work.setAsTemplate：复制当前作品的pages与cover_image_url到一个新的is_template: true记录中；
  • POST /works/use-template/:id→work.useTemplate：读取模板的pages与datasources（数据源随模板一并克隆），创建新的非模板作品。
• 前端入口：views/work-manager/templates.vue 负责模板列表展示与基于模板创建作品。

3.2 未开放项：图片库 / 三方版权图片搜索 / SSO 登录

features.md明确将这三项标记为未完成（- [ ]）：图片库、第三方版权图片搜索、SSO 登录与第三方登录。尽管仓库中已存在图片画廊相关代码雏形（support/image-gallery 含 Pixabay 与个人图片 Tab），但按官方功能清单口径，仍应视为规划中而非已交付的能力，本文不做展开。

四、可能不开源的增强功能（Enhancements [may not open source]）

4.1 上传 PSD 一键转 H5

文档标注此项「已调研、可实现、属于高阶功能」。后端确实预留了实现入口：POST /works/psd→work.uploadPSD，内部调用strapi.services.work.parsePSD(ctx.request.body.files.file)解析上传的 PSD 文件并返回页面 JSON（Work.js）。需要说明的是：该能力在官方定位中属于「可能不开源」范畴，仓库前端并未提供完整操作界面，请以官方后续发布为准。

4.2 自定义脚本（Custom Script）

自定义脚本功能允许用户为作品编写自定义 JS 逻辑。前端入口位于 store/modules/script.js 与 editor/modals/script-list.vue（脚本列表、脚本查看等弹窗），常量定义见 constants/script.js；后端对应 back-end/h5-api/api/script 下的 CRUD 接口（routes.json、controllers/script.js）。此功能官方同样将其列入「可能不开源」清单，仓库仅保留前后端接口实现。

五、后端 API（Backend API）

后端基于 Strapi 框架构建（back-end/h5-api），全部作品相关接口定义于 back-end/h5-api/api/work/config/routes.json，由 controllers/Work.js 实现。

5.1 作品创建、保存与更新

Strapi 默认 REST 接口（work.find/work.findOne/work.create/work.update/work.delete）对应：

作品的持久化字段（Work.settings.json）包括：title、description、cover_image_url、pages（JSON，页面与元素树）、is_publish（发布状态）、is_template（是否模板）、page_mode（三种页面模式）、height（默认 568）、width（默认 320）以及关联数据源集合datasources。前端编辑器在每次操作后调用saveWorkaction 持久化。

5.2 表单数据采集与展示

表单采集走作品接口，形成「作品 ↔ 表单数据」的一对多关系：

• POST /works/form/submit/:id→submitForm：接收前端提交的formData，调用strapi.services.workform.create({ form: formData, work })创建一条表单记录并返回{ message: 'success', status: 0 }。
• GET /works/form/query/:id→queryFormsOfOneWork：查询某作品的全部表单记录，同时通过getUuidMap2Name将元素 UUID 映射为字段名（lbp-form-input用placeholder，lbp-form-radio-group用aliasName），返回{ uuidMap2Name, formRecords }，供前端统计页展示可读字段。
• GET /works/has-forms→queryWorksWithForms：以groupBy('work.id')聚合各作品表单条数，返回含form_count的作品列表，用于在作品卡片上标识「有表单数据」。

对应前端统计界面为 views/work-manager/form-stat（含 index.vue、detail.vue、column.js）。表单记录的数据模型见 back-end/h5-api/api/workform/models/Workform.settings.json。

5.3 在线预览与二维码预览

• 在线预览：GET /works/preview/:id→previewOne（Work.js）。该接口通过view_mode查询参数控制访问权限：只有view_mode === 'preview'（预览模式）或work.is_publish为真时才渲染完整pages，否则清空页面内容，即「未发布的作品只能通过预览链接查看」；随后以默认宽度 320 渲染 EJS 模板engine（views/engine.ejs）输出完整 H5 页面。
• 二维码预览：前端引入qrcode依赖生成二维码。编辑器内通过 editor/modals/share-info.js 的drawQRcode(this.$refs.qrcode, this.previewUrl)绘制分享二维码（支持尺寸调节），作品卡片上的二维码生成逻辑见 common/work/card-item.js（genQRCodeUrl+qrcode图标按钮）。
• 辅助能力：GET /works/cors-proxy→corsProxy提供跨域代理（request(ctx.query.url)），便于前端在编辑态绕过跨域限制请求外部资源；GET /works/editor→renderCoreEditor渲染编辑器服务端模板（views/core-editor.ejs）。

六、功能状态一览与延伸阅读

汇总features.md的功能状态如下表，供快速检索：

如需进一步深入，可继续阅读仓库内以下关联文档：快速上手与部署见 docs/en/getting-started/quick-start.md（中文版 docs/zh/getting-started/quick-start.md）；代码结构总览见 docs/en/implementation/code-structure.md；表单提交实现细节见 docs/en/implementation/form-submit.md。需要说明的是，功能清单是项目演进中的快照，组件与接口数量以后续版本为准，建议结合 CHANGELOG.md 追踪能力变化。

• 低代码
• 前端
• 后端