Community Locked Card Gradient 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: 将社区信息流付费帖子的未解锁提示条改为设计稿所示的上深下浅纵向渐变预览面板。

Architecture: 保留 post-card.vue 现有模板、事件和数据契约，只调整 BEM 样式块。使用 uni-app 多端支持稳定的 linear-gradient(180deg, ...) 与纵向 Flex 布局，避免滤镜、伪元素和新增图片资源。

Tech Stack: Vue 3、uni-app、SCSS、Git

Task 1: 调整未解锁区域样式

Files:

Modify: uniapp/src/packages_community/components/post-card.vue:340-367
Step 1: 确认模板和交互保持不变

检查未解锁区域仍使用以下结构，不新增组件状态或事件：

<view v-if="post.is_paid && !post.is_unlocked" class="post-card__unlock" @tap.stop="$emit('unlock')">
    <view>
        <text class="post-card__unlock-title">深度内容待解锁</text>
        <text class="post-card__unlock-desc">解锁后阅读完整分析与讨论</text>
    </view>
    <view class="post-card__unlock-btn">查看详情</view>
</view>

Step 2: 将横向提示条改为纵向渐变面板

把 post-card__unlock 相关样式改为：

&__unlock {
    min-height: 180rpx;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 20rpx;
    margin-top: 20rpx;
    padding: 24rpx 26rpx 18rpx;
    overflow: hidden;
    border-radius: 16rpx;
    background: linear-gradient(
        180deg,
        rgba(205, 218, 232, 0.96) 0%,
        rgba(228, 236, 244, 0.86) 52%,
        rgba(255, 255, 255, 0.98) 100%
    );
    box-sizing: border-box;
}

&__unlock-title {
    display: block;
    color: #31445f;
    font-size: 27rpx;
    font-weight: 700;
}

&__unlock-desc {
    display: block;
    margin-top: 6rpx;
    color: #718098;
    font-size: 22rpx;
}

&__unlock-btn {
    width: 320rpx;
    height: 64rpx;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2rpx solid #1468f5;
    border-radius: 999rpx;
    background: rgba(255, 255, 255, 0.72);
    color: #1468f5;
    font-size: 24rpx;
    font-weight: 600;
    box-sizing: border-box;
    flex-shrink: 0;
}

Step 3: 静态核对改动边界

Run:

git diff --check -- uniapp/src/packages_community/components/post-card.vue
git diff -- uniapp/src/packages_community/components/post-card.vue

Expected: 命令退出码为 0，diff 只包含 post-card__unlock、post-card__unlock-title、post-card__unlock-desc 和 post-card__unlock-btn 样式调整，不包含模板或脚本变化。

Task 2: 同步项目记录并提交

Files:

Modify: docs/业务进度管理.md
Modify: docs/设计稿映射.md
Create: docs/superpowers/plans/2026-08-02-community-locked-card-gradient.md
Step 1: 更新业务进度

在社区广场相关完成事项中记录：付费帖子未解锁区域已改为上深下浅的蓝灰到白色纵向渐变面板，说明位于顶部，查看详情按钮位于底部居中；未改动接口和解锁逻辑。

Step 2: 更新设计稿映射

在“社区广场”备注中补充：2026-08-02 付费帖子未解锁区域按设计稿调整为纵向渐变面板和底部居中描边按钮。

Step 3: 检查计划与源码

Run:

$unfinished = @([string]::Concat('T', 'ODO'), [string]::Concat('T', 'BD'), [string]::Concat([char]0x5F85, [char]0x8865, [char]0x5145), [string]::Concat([char]0x5360, [char]0x4F4D))
Select-String -LiteralPath docs/superpowers/plans/2026-08-02-community-locked-card-gradient.md -Pattern $unfinished -CaseSensitive:$false
git diff --check -- uniapp/src/packages_community/components/post-card.vue docs/superpowers/plans/2026-08-02-community-locked-card-gradient.md
git status --short

Expected: 未完成标记扫描无输出，git diff --check 退出码为 0；状态中仅本任务源码/计划以及工作区原有文档改动与预期一致。

Step 4: 提交真实源码和计划

Run:

git add -- uniapp/src/packages_community/components/post-card.vue docs/superpowers/plans/2026-08-02-community-locked-card-gradient.md
git diff --cached --check
git commit -m "feat: align community locked card gradient"

Expected: 提交成功；不暂存工作区中已存在并混有其他任务内容的共享文档改动。

验证说明

根目录 AGENTS.md 规定用户未明确要求时不得主动执行构建或测试，因此本计划不运行 npm run build:h5 或自动化测试。
本改动只涉及样式，不新增函数或业务行为；通过精确 diff、样式选择器和空白错误检查验证范围。
server/ 未发生改动，不触发测试服部署。

4.9 KiB Raw Blame History Unescape Escape

Community Locked Card Gradient Implementation Plan

Task 1: 调整未解锁区域样式

Task 2: 同步项目记录并提交

验证说明

4.9 KiB

Raw Blame History