happy-life-star/docs/superpowers/specs/2026-05-18-mini-program-script-home-redesign-design.md

# Mini Program Script Home Redesign Design

Date: 2026-05-18

Source requirement: `docs/0517-UI设计 更新.md`

## Goal

Implement the 0517 UI requirement iteration for the mini program: make `爽文生成` the primary home experience, keep `人生轨迹` behavior unchanged, and rebuild the script generation flow around the new `如愿星球` design.

The new core flow is:

1. User lands on the script-generation home page.
2. User speaks or types a wish.
3. The app shows a wish-realization/generation state.
4. The generated story appears as a readable script card.
5. User can adjust direction, mark the result as unlike them, play voice narration, view saved scripts, or continue to path mapping.

## Scope

### In Scope

- Change the mini program default main tab from `人生轨迹` to `爽文生成`.
- Reorder or restyle the main navigation so `爽文生成` is the first/home experience.
- Redesign `mini-program/src/pages/main/ScriptView.vue` according to the 0517 document.
- Preserve existing `人生轨迹` behavior and data.
- Preserve existing script generation APIs and store methods unless a frontend field mapping adjustment is needed.
- Connect the new result actions to existing capabilities where available:
  - `语音播放` should reuse the existing TTS/script reading capability.
  - `我的剧本` should navigate to the existing script library/list experience.
  - Existing script detail and path mapping should remain reachable.
- Add or update analytics events for the new funnel.

### Out Of Scope

- Redesigning the backend script generation algorithm.
- Rebuilding the whole `我的剧本` library unless required by navigation consistency.
- Changing the `人生轨迹` page behavior.
- Building a new full speech recognition backend service unless the mini program platform API cannot satisfy the first version.

## Product Requirements

### Design Review Decisions

This section captures the decisions from the first review pass so implementation does not drift.

- `爽文生成` becomes the default entry, but the old script list/detail/path capabilities are not removed.
- `ScriptView.vue` should become a single state-driven flow: `home -> generating -> result`. The old `mode = inspiration/custom/list` model should not remain as a parallel primary state machine.
- `我的剧本` should route users to the existing library experience instead of embedding a second full list inside the redesigned home page.
- Voice input is a primary visual interaction, but speech recognition is allowed to ship with a typed-input fallback if the WeChat runtime/plugin permission is not configured.
- `语音播放` should not duplicate two separate players. Prefer one visible `ScriptAudioPlayer` area; the button/action can scroll to it, expand it, or trigger its existing flow if the component exposes a method.
- Closing a generated result is a dismiss action, not deletion. Real delete remains in the script library/detail management surface.
- The implementation should fix visible mojibake in touched UI strings. Any changed user-facing Chinese string must be saved and verified as UTF-8.

### Navigation

Current main page order gives `人生轨迹` priority. This iteration changes the product entry priority:

- Default active tab: `script`.
- First visual/main tab: `爽文生成`.
- `人生轨迹` remains available and unchanged.
- `我的` / `我的剧本` entry remains available.

If bottom navigation labels or source files currently show mojibake text, fix the visible Chinese labels while touching this area.

### Script Home Page

The script page should become a wish-input home screen, not a form-heavy generator.

Required elements:

- Deep purple cosmic background.
- History entry near the top left or header area.
- Main title: `今天有什么心愿想实现`
- Highlight word: `心愿`
- Central glowing microphone planet/sphere.
- Primary prompt: `按住说话，即刻如愿`
- Bottom text input for typing a wish.
- `灵感一下` section.
- `换一换` action for refreshing inspiration cards.
- Recommendation cards that can fill the input when tapped.

The current custom-mode/form-first UI should be de-emphasized or moved behind a secondary entry. The first screen should match the 0517 visual and interaction direction.

### Voice Input

The design makes voice the primary action.

Minimum first version:

- Implement press-and-hold visual states:
  - idle
  - pressing/listening
  - recognizing/submitting
  - error or cancelled
- On release, trigger voice recognition if supported by the mini program runtime.
- If runtime speech recognition is not available in the current environment, keep a graceful fallback:
  - show a clear toast/modal,
  - keep typed input fully usable,
  - do not block script generation.

The recognized text should populate the wish input and allow the user to submit/generate.

Runtime decision:

- If a WeChat speech recognition plugin or API is already configured, wire press release to recognition and fill the returned text.
- If no speech runtime exists, press/release should show a polished unavailable state and keep text input/generation fully usable.
- Do not add a backend speech-to-text service in this iteration unless product explicitly expands scope.

### Generation State

After submission, the page should show a generation conversation/state view.

Required displayed states:

- User wish bubble, for example: `如果老板今天突然夸我`
- Time, for example: `15:11`
- System progress: `心愿实现中……`
- Completion message: `心愿已实现，故事已为你展开`

The existing API loading state can drive these UI states. The UI should avoid leaving users on a static loading button.

### Generated Result

Generated content should appear as a story/result card.

Required elements:

- Script title, for example: `《那个终于被看见的人》`
- Tags, for example: `职场逆袭`、`成长`、`被认可`
- Readable story body with comfortable line height.
- Top action that uses a close icon instead of visible `删除` text.
- Function actions:
  - `换个方向`
  - `不像我`
  - `语音播放`

Behavior expectations:

- `语音播放` uses the existing script TTS flow where possible.
- `换个方向` should trigger a regenerate/edit-direction flow. First version can reuse existing generation with the current wish plus an adjustment marker.
- `不像我` should collect feedback and optionally guide the user to revise the wish.
- Close icon should return to the input/home state or dismiss the result panel. It should not accidentally delete saved content.

Result data expectations:

- If the backend returns a script id, store it and use it for detail navigation, TTS, and path mapping.
- If the response shape only returns content, show the result card immediately and refresh the script list afterward.
- Tags can be derived from returned style/metadata first, then fall back to `爽文` / `成长` / `被看见`.
- Long content should be scrollable without pushing action buttons into unusable positions.

### My Scripts

The page header includes `我的剧本`.

Expected behavior:

- Navigate to the existing script library/list experience.
- Existing list operations such as detail view, favorite, delete, and path mapping should remain available.
- Avoid duplicating separate script-list implementations unless the current page structure forces it.

## Design System

The 0517 document defines a `如愿星球 Design Token v1`. Use it as the visual source of truth for this change.

### Core Colors

- Background: `#080219`, `#05010E`
- Primary purple: `#8B36DB`
- Accent purple: `#C084FC`
- Button purple: `#934DFF`
- Deep button purple: `#4D1CCB`
- Pink highlight: `#F1A0FF`
- Gold stars: `#FFD86B`
- Primary text: `#FFFFFF`
- Highlight text: `#D18AFF`
- Body text: `rgba(255,255,255,0.92)`
- Secondary text: `rgba(255,255,255,0.75)`
- Placeholder: `rgba(216,180,254,0.48)`

### Typography

- iOS: `PingFang SC`
- Android: `Noto Sans SC`
- Home title: around `38px` equivalent in rpx, bold, stable on mobile.
- Result title: around `30px` equivalent in rpx.
- Story body: readable, around `16px`, line height around `1.78`.

### Shape And Effects

- Input pill: large rounded shape, around `26px`.
- Inspiration card: around `18px`.
- Story card: around `26px`.
- Microphone button: circular, strong purple/pink glow.
- Use cosmic gradients, stars, and glow, but keep content legible and avoid overlap on small screens.

## Analytics Requirements

Update mini program analytics to reflect the new funnel:

- `script_home_view`
- `script_voice_press_start`
- `script_voice_press_end`
- `script_voice_recognize_success`
- `script_voice_recognize_fail`
- `script_wish_submit`
- `script_generation_progress_view`
- `script_generate_success`
- `script_generate_fail`
- `script_result_view`
- `script_result_change_direction_click`
- `script_result_not_like_me_click`
- `script_result_tts_click`
- `script_my_scripts_click`
- `script_inspiration_refresh`
- `script_inspiration_select`

Properties should include source (`voice`, `text`, `inspiration`), script style/length where available, prompt length, generation duration, and error reason when failed.

Required event timing:

- Fire `script_home_view` when `ScriptView` first becomes visible as the default tab.
- Fire `script_wish_submit` exactly once per user submission.
- Fire either `script_generate_success` or `script_generate_fail` for every accepted submission.
- Fire `script_result_view` only after a result card is actually rendered.
- Preserve existing `page_view` / `page_leave` events at the main tab level.

## Technical Impact

Likely touched areas:

- `mini-program/src/pages/main/index.vue`
  - default tab and navigation order
  - analytics page view properties
- `mini-program/src/pages/main/ScriptView.vue`
  - major UI/state rewrite
  - voice press interaction
  - generation state view
  - result card actions
- `mini-program/src/pages/main/ScriptDetailView.vue`
  - only if TTS entry or result display needs shared components
- `mini-program/src/pages/main/MineView.vue`
  - only if navigation into `我的剧本` needs alignment
- `mini-program/src/stores/app.js`
  - only if result actions need additional state helpers
- `mini-program/src/services/epicScript.js`
  - only if API mapping needs adjustment
- `mini-program/src/services/analytics.js`
  - event names/properties if helper methods are useful

## Implementation Plan

### Phase 1: Navigation And Home Shell

- Make `script` the default tab.
- Reorder bottom nav visually.
- Fix visible Chinese labels in touched template sections if mojibake is present.
- Add a first-pass `如愿星球` home layout in `ScriptView.vue`.

### Phase 2: Wish Input And Inspiration

- Implement typed wish input.
- Reuse existing inspiration recommendation fetching.
- Add `灵感一下` and `换一换` interactions.
- Track inspiration select and refresh events.

### Phase 3: Voice Interaction

- Add press-and-hold microphone states.
- Integrate mini program voice recognition if available.
- Keep fallback typed-input behavior.
- Track voice interaction events.

### Phase 4: Generation State And Result

- Convert current generate flow into:
  - submitting
  - generating
  - completed
  - failed
- Show user bubble and system progress messages.
- Render generated story result card.
- Wire result actions:
  - close
  - change direction
  - not like me
  - voice playback

### Phase 5: Regression And Polish

- Verify `人生轨迹` still works.
- Verify `我的剧本`, script detail, and path mapping remain reachable.
- Verify analytics events fire.
- Verify mobile layout on common viewport sizes.
- Run mini program build/type checks available in the repo.

## Acceptance Criteria

- Opening the main mini program page lands on `爽文生成`.
- `人生轨迹` remains available and functionally unchanged.
- The first screen visually matches the 0517 requirement direction:
  - cosmic purple background
  - wish title
  - glowing microphone
  - press-to-speak copy
  - text input
  - inspiration cards
- A user can generate a script from typed input.
- Voice entry has real press states and either recognition integration or a clear fallback.
- During generation, the user sees `心愿实现中……`.
- On success, the user sees a readable story result with title, tags, body, and actions.
- The result action previously shown as `删除` is represented by a close icon, not delete text.
- `语音播放` is connected to existing TTS/script reading flow where available.
- `我的剧本` opens the existing script list/library.
- All new funnel events are tracked.
- No broken image/text overlap in the new UI on mobile.
- No visible mojibake appears in any touched mini program UI label.
- Result content remains readable for both short and long generated scripts.
- The app remains usable when voice recognition is unavailable.

## Risks And Decisions

- Voice recognition support depends on the target mini program runtime and plugin permissions. The implementation should keep a typed-input fallback.
- Current source files contain visible mojibake in some touched templates. Fixing touched labels is required for user-facing quality, but avoid broad unrelated text rewrites unless needed.
- `换个方向` and `不像我` can be implemented as lightweight first-version feedback/regeneration flows; deeper preference learning can be a later analytics-driven enhancement.
- The design doc contains full Vue examples, but the implementation should adapt to the existing uni-app codebase rather than copying prototype code wholesale.

## Review Findings Addressed

Review pass 1 tightened these areas:

- Added explicit state-machine guidance to avoid keeping two competing `ScriptView` flow models.
- Clarified voice recognition as runtime-dependent, with typed input as the guaranteed path.
- Clarified TTS should use one visible player/control surface rather than duplicate controls.
- Added UTF-8/mojibake verification as an acceptance criterion because existing touched files already show garbled labels.
- Added event timing rules so analytics data remains funnel-safe.