75 lines
3.9 KiB
Markdown
75 lines
3.9 KiB
Markdown
# Mosaic Low-code H5 Demo
|
|
|
|
## Run
|
|
|
|
```bash
|
|
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
|
|
|
|
```bash
|
|
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.
|