40 lines
1.4 KiB
Markdown
40 lines
1.4 KiB
Markdown
# Mini Program Script Home Layout Design
|
|
|
|
## Goal
|
|
|
|
Optimize the mini-program script generation home screen so the headline stays on one line and voice input is easier to reach.
|
|
|
|
## Approved Layout
|
|
|
|
Use the approved A layout:
|
|
|
|
1. Keep the headline text `今天有什么 心愿 想实现` on a single line.
|
|
2. Move the full `灵感一下` section above the input and voice area.
|
|
3. Move the wish text input, social insight binding card, and press-to-talk microphone below the inspiration section.
|
|
4. Keep the existing visual theme, colors, copy, analytics behavior, voice events, and generation flow unchanged.
|
|
|
|
## Implementation Notes
|
|
|
|
Only `mini-program/src/pages/main/ScriptView.vue` needs to change.
|
|
|
|
The template should reorder existing blocks instead of recreating them:
|
|
|
|
- Header and headline remain at the top.
|
|
- Inspiration section follows the headline.
|
|
- Wish input follows inspiration.
|
|
- Social insight card follows the input.
|
|
- Microphone orb and voice copy sit at the bottom of the home content.
|
|
|
|
CSS should make the headline a single flex row with no wrapping. The text must remain readable on normal mini-program widths, so the headline font size should be reduced from the current two-line hero scale to a single-line scale with `white-space: nowrap`.
|
|
|
|
## Validation
|
|
|
|
Run:
|
|
|
|
```bash
|
|
cd mini-program
|
|
npm run build:mp-weixin
|
|
```
|
|
|
|
Expected result: build succeeds with no new errors.
|