145 lines
4.9 KiB
Markdown
145 lines
4.9 KiB
Markdown
# 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`
|
||
|
||
- [x] **Step 1: 确认模板和交互保持不变**
|
||
|
||
检查未解锁区域仍使用以下结构，不新增组件状态或事件：
|
||
|
||
```vue
|
||
<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>
|
||
```
|
||
|
||
- [x] **Step 2: 将横向提示条改为纵向渐变面板**
|
||
|
||
把 `post-card__unlock` 相关样式改为：
|
||
|
||
```scss
|
||
&__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;
|
||
}
|
||
```
|
||
|
||
- [x] **Step 3: 静态核对改动边界**
|
||
|
||
Run:
|
||
|
||
```powershell
|
||
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`
|
||
|
||
- [x] **Step 1: 更新业务进度**
|
||
|
||
在社区广场相关完成事项中记录：付费帖子未解锁区域已改为上深下浅的蓝灰到白色纵向渐变面板，说明位于顶部，查看详情按钮位于底部居中；未改动接口和解锁逻辑。
|
||
|
||
- [x] **Step 2: 更新设计稿映射**
|
||
|
||
在“社区广场”备注中补充：2026-08-02 付费帖子未解锁区域按设计稿调整为纵向渐变面板和底部居中描边按钮。
|
||
|
||
- [x] **Step 3: 检查计划与源码**
|
||
|
||
Run:
|
||
|
||
```powershell
|
||
$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`；状态中仅本任务源码/计划以及工作区原有文档改动与预期一致。
|
||
|
||
- [x] **Step 4: 提交真实源码和计划**
|
||
|
||
Run:
|
||
|
||
```powershell
|
||
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/` 未发生改动，不触发测试服部署。
|