1.4 KiB
1.4 KiB
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:
- Keep the headline text
今天有什么 心愿 想实现on a single line. - Move the full
灵感一下section above the input and voice area. - Move the wish text input, social insight binding card, and press-to-talk microphone below the inspiration section.
- 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:
cd mini-program
npm run build:mp-weixin
Expected result: build succeeds with no new errors.