happy-life-star/docs/superpowers/plans/2026-05-24-mini-program-inspiration-compact-cards.md

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

• Remove the visible <text class="recommend-tag">...</text> from each recommend-card.

• Keep @click="useRecommendation(item.text)" unchanged so the full prompt still fills wishText.

• 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

• Change .recommend-card from a tall vertical card to a compact row with min-height: 68rpx.

• Use centered row alignment and smaller padding.

• Add min-width: 0 so text truncation works inside the grid.

• Change .recommend-text to one-line ellipsis with white-space: nowrap, overflow: hidden, and text-overflow: ellipsis.

• Remove or neutralize unused .recommend-tag 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.