docs: 补充 AI 打字机输出、小程序灵感卡片、脚本主页布局等设计文档和计划

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-24 18:39:26 +08:00
parent 886f04046b
commit 6e5a379bef
12 changed files with 722 additions and 0 deletions
@@ -0,0 +1,60 @@
+# AI Typewriter Output 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 all existing AI stream outputs in mini-program, life-script, and web show a themed loading state first, then reveal generated text smoothly one character at a time.
+
+**Architecture:** Keep backend stream protocol unchanged. Add a small typewriter buffer utility per frontend stack and wire pages/stores to display the typewriter-visible text while retaining the full stream output for saving and final state.
+
+**Tech Stack:** Vue 3/uni-app, React, Pinia, WebSocket/SSE streaming.
+
+---
+
+### Task 1: Mini Program Typewriter
+
+**Files:**
+- Create: `mini-program/src/composables/useTypewriterStream.js`
+- Modify: `mini-program/src/pages/main/ScriptView.vue`
+- Modify: `mini-program/src/pages/main/PathView.vue`
+- Modify: `mini-program/src/pages/life-event/form.vue`
+
+- [x] Add a composable with `visibleText`, `isWaiting`, `isStreaming`, `push`, `finish`, `fail`, `reset`, `dispose`.
+- [x] In `ScriptView.vue`, push each full stream output to the composable and render `visibleText`.
+- [x] Improve the generating panel with themed loading copy and a typing cursor.
+- [x] In `PathView.vue` and `life-event/form.vue`, use typewriter visible text for AI output.
+
+### Task 2: Life Script Typewriter
+
+**Files:**
+- Create: `life-script/src/hooks/useTypewriterStream.js`
+- Modify: `life-script/src/views/ScriptView.jsx`
+- Modify: `life-script/src/views/PathView.jsx`
+- Modify: `life-script/src/views/TimelineView.jsx`
+
+- [x] Add a React hook with the same buffer behavior.
+- [x] Replace direct `setStreamContent(output)` / `setStreamFeedback(output)` calls with `push(output)`.
+- [x] Render hook `visibleText` during AI generation.
+- [x] Add a subtle glass loading state before the first visible character.
+
+### Task 3: Web Chat Typewriter
+
+**Files:**
+- Modify: `web/src/stores/chat.ts`
+
+- [x] Add per-message pending buffers and timer maps inside the chat store.
+- [x] On `AI_STREAM_DELTA`, append delta to the buffer and start a timer for the target message.
+- [x] On `AI_STREAM_DONE`, mark the message as done only after the pending buffer is empty.
+- [x] On error or disconnect, stop timers for affected messages.
+
+### Task 4: Verification
+
+**Commands:**
+- `cd mini-program && npm run build:mp-weixin`
+- `cd life-script && npm run build`
+- `cd web && npm run build`
+- `git diff --check`
+
+- [x] Mini-program build passes.
+- [x] life-script build passes.
+- [x] web build passes.
+- [x] Diff check reports no new whitespace errors.
@@ -0,0 +1,40 @@
+# Mini Program Inspiration Compact Cards 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 inspiration cards on the mini-program script generation page compact, single-line, and ellipsis-truncated while preserving full prompt selection behavior.
+
+**Architecture:** Reuse the existing `recommendations` data and `useRecommendation(item.text)` click path. Change only the presentation in `ScriptView.vue`: remove visible tag text and tighten the card CSS.
+
+**Tech Stack:** Vue 3 single-file component, uni-app mini-program build.
+
+---
+
+### Task 1: Compact Inspiration Card Template
+
+**Files:**
+- Modify: `mini-program/src/pages/main/ScriptView.vue`
+
+- [x] Remove the visible `<text class="recommend-tag">...</text>` from each `recommend-card`.
+- [x] Keep `@click="useRecommendation(item.text)"` unchanged so the full prompt still fills `wishText`.
+- [x] Keep the `v-for`, `:key`, `recommend-card`, and `recommend-text` bindings unchanged.
+
+### Task 2: Single-Line Ellipsis Styling
+
+**Files:**
+- Modify: `mini-program/src/pages/main/ScriptView.vue`
+
+- [x] Change `.recommend-card` from a tall vertical card to a compact row with `min-height: 68rpx`.
+- [x] Use centered row alignment and smaller padding.
+- [x] Add `min-width: 0` so text truncation works inside the grid.
+- [x] Change `.recommend-text` to one-line ellipsis with `white-space: nowrap`, `overflow: hidden`, and `text-overflow: ellipsis`.
+- [x] Remove or neutralize unused `.recommend-tag` styling.
+
+### Task 3: Validate
+
+**Commands:**
+- `cd mini-program && npm run build:mp-weixin`
+- `git diff --check`
+
+- [x] Mini-program build passes.
+- [x] Diff check reports no new whitespace errors.
@@ -0,0 +1,60 @@
+# Mini Program Script Generation Feedback 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:** Add animated progress, long-wait guidance, and graceful failure recovery to the mini-program `心愿实现中` screen.
+
+**Architecture:** Keep all AI stream calls unchanged and add a small local feedback state in `ScriptView.vue`. The screen uses timer thresholds to distinguish normal waiting, slow waiting, very slow waiting, streaming output, and failure.
+
+**Tech Stack:** Vue 3 single-file component, uni-app mini-program build, existing `useTypewriterStream` composable.
+
+---
+
+### Task 1: Add Generation Feedback State
+
+**Files:**
+- Modify: `mini-program/src/pages/main/ScriptView.vue`
+
+- [x] Add `generationStatus`, `generationError`, `generationHintIndex`, and `lastSubmitSource` refs.
+- [x] Add local timers for rotating hints, 8-second slow state, and 20-second very-slow state.
+- [x] Add `startGenerationFeedback`, `clearGenerationFeedbackTimers`, `markGenerationStreaming`, and `markGenerationFailed` helpers.
+- [x] Clear timers on success, failure, returning home, and component unmount.
+
+### Task 2: Update Generation Flow
+
+**Files:**
+- Modify: `mini-program/src/pages/main/ScriptView.vue`
+
+- [x] Call `startGenerationFeedback()` when `submitWish` enters `viewState = 'generating'`.
+- [x] Call `markGenerationStreaming()` in the stream `onDelta` callback before pushing typewriter text.
+- [x] On failure, keep `viewState = 'generating'` and show a failure state instead of immediately returning home with only a toast.
+- [x] Add `retryGeneration()` and `returnToEdit()` actions for the failure state.
+
+### Task 3: Update Generation Screen UI
+
+**Files:**
+- Modify: `mini-program/src/pages/main/ScriptView.vue`
+
+- [x] Replace static `心愿实现中……` copy with computed `generationTitle`.
+- [x] Add thinking dots when no stream output has arrived.
+- [x] Add a secondary hint line under the main loading copy.
+- [x] Add failure actions `再试一次` and `返回修改` when `generationStatus === 'failed'`.
+
+### Task 4: Add Themed Animations
+
+**Files:**
+- Modify: `mini-program/src/pages/main/ScriptView.vue`
+
+- [x] Animate `.loading-orbit` with a gentle breathing pulse.
+- [x] Animate `.loading-orbit::after` as the small orbiting light.
+- [x] Add animated thinking dots inside the system bubble.
+- [x] Style the failure copy and actions in the current purple/gold theme.
+
+### Task 5: Validate
+
+**Commands:**
+- `cd mini-program && npm run build:mp-weixin`
+- `git diff --check`
+
+- [x] Mini-program build passes.
+- [x] Diff check reports no new whitespace errors.
@@ -0,0 +1,49 @@
+# Mini Program Script Home Cosmic Background 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:** Center the script generation headline and add subtle cosmic background motion without interfering with the page content.
+
+**Architecture:** Add a decorative background layer inside `ScriptView.vue` and keep all interactive content above it. Use CSS-only planets, star speckles, and meteors so no assets or runtime logic are needed.
+
+**Tech Stack:** Vue 3 single-file component, uni-app mini-program build, scoped CSS animations.
+
+---
+
+### Task 1: Add Background Layer
+
+**Files:**
+- Modify: `mini-program/src/pages/main/ScriptView.vue`
+
+- [x] Add a non-interactive `cosmic-background` view as the first child of `.script-view`.
+- [x] Add child views for two planets, two star fields, and three meteors.
+- [x] Ensure the decorative layer has no event handlers.
+
+### Task 2: Fix Layering and Headline Alignment
+
+**Files:**
+- Modify: `mini-program/src/pages/main/ScriptView.vue`
+
+- [x] Set `.script-view` to `position: relative` and `overflow: hidden`.
+- [x] Set `.wish-home`, `.generation-view`, and `.result-view` to `position: relative; z-index: 1`.
+- [x] Center `.hero-copy` with `justify-content: center` and `text-align: center`.
+- [x] Increase the spacing under `.hero-copy` so the inspiration section breathes.
+
+### Task 3: Add Cosmic Styling
+
+**Files:**
+- Modify: `mini-program/src/pages/main/ScriptView.vue`
+
+- [x] Style `.cosmic-background` with absolute positioning, low opacity, and `pointer-events: none`.
+- [x] Style planet elements with radial gradients and slow drift animations.
+- [x] Style meteor elements with diagonal motion and staggered animation delays.
+- [x] Style star fields with low-contrast radial gradients.
+
+### Task 4: Validate
+
+**Commands:**
+- `cd mini-program && npm run build:mp-weixin`
+- `git diff --check`
+
+- [x] Mini-program build passes.
+- [x] Diff check reports no new whitespace errors.
@@ -0,0 +1,41 @@
+# 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`
+
+- [x] Move the `inspiration-section` block so it appears immediately after `hero-copy`.
+- [x] Keep `wish-input-wrap` after `inspiration-section`.
+- [x] Keep `profile-boost` after `wish-input-wrap`.
+- [x] Move `orb-wrap` and `voice-copy` after `profile-boost`.
+- [x] 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`
+
+- [x] Update the two headline text nodes into a single row under `.hero-copy`.
+- [x] Change `.hero-copy` to a horizontal flex container with `white-space: nowrap`.
+- [x] Reduce `.hero-title` font size enough for common mini-program viewport widths.
+- [x] Preserve `.hero-highlight` styling.
+
+### Task 3: Validate
+
+**Commands:**
+- `cd mini-program && npm run build:mp-weixin`
+- `git diff --check`
+
+- [x] Mini-program build passes.
+- [x] Diff check reports no new whitespace errors.