# 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.