happy-life-star/docs/superpowers/plans/2026-05-24-mini-program-script-home-layout.md

Mini Program Script Home Layout Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Make the mini-program script generation home screen keep its headline on one line and place the microphone lower for easier voice input.

Architecture: Reorder existing template blocks in ScriptView.vue without changing data flow or event handlers. Adjust the existing hero CSS so the headline is a single non-wrapping row while preserving the current visual theme.

Tech Stack: Vue 3 single-file component, uni-app mini-program build.

---

Task 1: Reorder Home Screen Blocks

Files:

• Modify: mini-program/src/pages/main/ScriptView.vue

• Move the inspiration-section block so it appears immediately after hero-copy.

• Keep wish-input-wrap after inspiration-section.

• Keep profile-boost after wish-input-wrap.

• Move orb-wrap and voice-copy after profile-boost.

• Verify no event bindings change: useRecommendation, shuffleInspirations, submitWish, startVoicePress, endVoicePress, cancelVoicePress, and openSocialInsights remain attached to the same elements.

Task 2: Make Headline Single Line

Files:

• Modify: mini-program/src/pages/main/ScriptView.vue

• Update the two headline text nodes into a single row under .hero-copy.

• Change .hero-copy to a horizontal flex container with white-space: nowrap.

• Reduce .hero-title font size enough for common mini-program viewport widths.

• Preserve .hero-highlight styling.

Task 3: Validate

Commands:

• cd mini-program && npm run build:mp-weixin

• git diff --check

• Mini-program build passes.

• Diff check reports no new whitespace errors.