3.9 KiB

Raw Blame History

Mosaic Low-code H5 Demo

Run

npm install
npm run dev

Editor: http://localhost:5173
Published H5: http://localhost:5174/?id=demo-store
API: http://localhost:3000

LAN access

The development services listen on all network interfaces. Start them normally with npm run dev, then replace localhost with the computer's LAN IP, for example:

Editor: http://192.168.7.6:5173
Published H5: http://192.168.7.6:5174/?id=demo-store
API: http://192.168.7.6:3000

The editor, iframe preview and H5 API automatically follow the hostname used in the browser. Devices must be on the same local network, and the operating-system firewall must allow Node.js connections.

Verify

npm run build
npm run check:h5
npm run test:e2e

check:h5 builds the standalone H5 and rejects known editor/drag dependencies. The Playwright flow resets its own draft, drags in a component, publishes it, confirms draft changes do not change mobile output, republishes, and confirms the mobile page updates.

Material libraries

Use the segmented switch in the editor header to change the left material palette. Switching libraries never removes blocks already on the page, so marketing and digital-benefit components can also be mixed in one Schema.

营销组件: keeps the original Banner, content, image, button, product-list and layout materials.
直充 / 卡密: provides benefit product cards, redemption actions, redemption notices and benefit product lists.
添加业务示例组合: inserts one of each digital-benefit component as an editable starter page.

Architecture

apps/editor: Vue 3 editor with material and layer panels, iframe canvas, properties, history, draft and publication actions.
apps/h5: standalone H5 entry that reads only the published endpoint and keeps a session Schema cache.
apps/server: Express API with JSON persistence, immutable publication snapshots and version lookup endpoints.
packages/page-schema: Schema types, component whitelist and runtime helpers.
packages/materials: centrally registered material labels and defaults.
packages/renderer: shared safe Renderer used by preview and mobile H5.
packages/shared: shared preview message contract.

The Demo intentionally uses vertical flow layout and limited two-column composition. It does not execute Schema JavaScript, dynamic component paths, or arbitrary API definitions. Interactions accept only http(s) or site-relative links.

Component editing

Banner: title, subtitle, multiple images and alt text, carousel toggle, looping, autoplay interval, height, overlay, alignment and text color.
Title: text, size, weight, alignment, padding and color.
Text: multiline content, size, line height, alignment, padding, foreground and background colors.
Image: URL, alt text, height, crop mode and radius.
Button: text, sizing, radius, colors and safe link interaction.
Product list: add/remove products, name, price, image, columns, gap, image height and colors.
Divider: thickness, spacing, line style and color.
Spacer: live height slider and background color.
Two-column: independent content, gap, height, padding, alignment and per-column backgrounds.
Benefit product card: direct-recharge/card-code mode, name, description, price, image, badge, VIP marker, action copy and brand colors.
Redemption actions: primary/secondary action copy, visibility, radius and colors.
Redemption notice: section label, title, multiline instructions and accent styling.
Benefit product list: add/remove benefits, delivery mode, name, price, count display and card styling.

Demo boundaries

JSON persistence is single-process and intended for local demonstration, not concurrent production writes.
Authentication, tenancy, asset upload/CDN conversion, collaborative editing, and database migrations are outside this Demo.
Images use fixed dimensions and native lazy loading; a production image pipeline should generate WebP/AVIF variants.

3.9 KiB Raw Blame History