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.