50 lines
2.1 KiB
Markdown
50 lines
2.1 KiB
Markdown
# 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.
|