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

Mini Program Inspiration Compact Cards Design

Goal

Optimize the mini-program script generation page so inspiration cards use less vertical space while still filling the full selected prompt into the send input.

Approved Approach

Use option A: keep the existing two-column inspiration grid, but make each card a compact single-line candidate.

Behavior

• Each inspiration card displays only item.text.
• Displayed text is constrained to one line.
• Overflowing text is hidden with an ellipsis.
• The category/tag chip is not shown in the compact card.
• Clicking a card still calls useRecommendation(item.text) and writes the full text into the send input.
• The existing 换一换 action and recommendation source logic remain unchanged.

Implementation Notes

Only mini-program/src/pages/main/ScriptView.vue needs to change.

Update the card template to remove the visible tag node. Update CSS so:

• .recommend-card is a compact row, about 68rpx high.
• .recommend-text uses white-space: nowrap, overflow: hidden, and text-overflow: ellipsis.
• Grid remains two columns.
• Visual theme remains consistent with the current purple glass style.

Validation

Run:

cd mini-program
npm run build:mp-weixin

Expected result: build succeeds with no new errors.