From 7b49922a04a614a665c9be2c40e99001a8e6947c Mon Sep 17 00:00:00 2001
From: hajimi <phperbylyh@163.com>
Date: Sun, 2 Aug 2026 01:01:16 +0800
Subject: [PATCH] docs: design paid post detail refresh

---
 ...02-community-paid-post-detail-ui-design.md | 99 +++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-08-02-community-paid-post-detail-ui-design.md

diff --git a/docs/superpowers/specs/2026-08-02-community-paid-post-detail-ui-design.md b/docs/superpowers/specs/2026-08-02-community-paid-post-detail-ui-design.md
new file mode 100644
index 0000000..81025fd
--- /dev/null
+++ b/docs/superpowers/specs/2026-08-02-community-paid-post-detail-ui-design.md
@@ -0,0 +1,99 @@
+# 社区付费帖子详情页 UI 与逻辑优化设计
+
+日期：2026-08-02
+
+## 目标
+
+以用户提供的帖子详情设计稿为视觉基准，重构 `uniapp/src/packages_community/pages/post_detail.vue` 的信息层级和付费解锁区域，同时保留现有点赞、评论、关注、私聊、分享、翻译、AI 分析和删除能力。修复当前详情页付费解锁参数错误及免费预览字数未生效的问题。
+
+## 方案比较
+
+1. **高度还原设计稿（采用）**：重组页面结构、样式和解锁交互，效果最接近设计稿；改动集中在详情页，并补充必要的后端预览逻辑修复。
+2. **中度视觉调整**：保留当前 DOM，仅调整字号、间距和颜色；风险低，但无法解决内容卡层级、解锁信息缺失和评论结构差异。
+3. **仅修复逻辑**：只修复购买确认参数；实现最快，但不满足本次 UI 优化目标。
+
+用户已选择方案 1。
+
+## 页面结构
+
+### 顶部导航
+
+- 标题固定为“帖子详情”，不再用正文截断文本占满标题栏。
+- 左侧保留返回按钮，右侧增加分享图标，复用现有 `SharePopup`。
+- H5 不额外模拟系统状态栏；App/小程序继续使用 `statusBarHeight`。
+
+### 帖子内容卡
+
+- 作者头像、昵称、发布日期和关注按钮放在卡片顶部。
+- 关注按钮文案统一为“关注 / 已关注”，底层仍复用现有关注关系接口。
+- 付费内容显示带锁图标的“付费内容”标签。
+- 将免费预览拆分为标题与摘要：优先使用第一行或第一句作为标题，其余内容作为摘要；数据不足时安全降级为单段正文。
+- 摘要默认限制行数，内容较长时显示“展开 / 收起”；展开仅展示后端返回的免费预览，不泄露付费全文。
+- 图片、标签、特朗普翻译和六合彩 AI 分析继续沿用现有分支规则。
+
+### 解锁卡
+
+- 使用浅蓝渐变、锁图形、标题、所需积分、当前余额、积分明细入口、主按钮和永久可读提示组成完整解锁区。
+- 当前余额复用 `getCommunityUserStats()`，未登录时显示“登录后查看”。
+- “积分明细”跳转现有 `/packages/pages/points_log/points_log`，不新增不存在的积分规则页面。
+- 主按钮状态区分“确认解锁 / 解锁中 / 已解锁”。
+
+### 互动与评论
+
+- 互动标题与点赞、评论、浏览数据放在同一行；分享入口移到顶部导航，避免重复。
+- 评论项恢复头像、昵称、正文、时间、点赞数和更多操作的清晰层级。
+- 保留回复、删除自己的评论、子回复列表和底部固定输入栏。
+- 输入栏采用安全区自适应布局，继续使用 `100vh + flex`，不使用 JS 计算滚动高度。
+
+## 数据与交互逻辑
+
+### 付费解锁
+
+详情页复用社区列表已经验证过的两阶段购买流程：
+
+1. 调用 `purchasePost({ post_id, confirm: 0 })` 探测购买状态。
+2. 已购买或 VIP 免费时，直接使用返回全文更新页面。
+3. 返回 `needs_payment` 时展示确认弹窗。
+4. 用户确认后调用 `purchasePost({ post_id, confirm: 1 })` 完成扣分。
+5. 成功后直接更新正文、锁定状态、购买人数和积分余额，不再次请求详情，避免重复增加浏览量。
+
+购买按钮增加进行中保护，避免重复点击。失败信息继续由统一请求层展示。
+
+### 免费预览
+
+- 后端 `postDetail()` 当前硬编码只返回前 20 个字符，忽略帖子保存的 `free_content_len`。
+- 改为读取 `free_content_len`，并将有效范围限制为 20～500 个字符；缺失或异常时使用默认值 100。
+- 锁定状态只返回预览文本和最多一张图片，完整正文仍只在购买成功、作者本人或已购买用户场景返回。
+
+### 点赞与评论计数
+
+- 本地点赞计数统一转为非负数字，防止空值加减产生 `NaN` 或负数。
+- 评论成功后等待评论列表刷新完成，再以接口结果为准更新展示；删除评论继续按后端返回的 `deleted_ids` 同步父评论和子回复计数。
+
+## 异常与空状态
+
+- 详情加载失败时显示页面级失败提示和返回入口，不只弹出短暂 Toast 后留白。
+- 评论加载失败不影响帖子正文，评论区显示可重试状态。
+- 积分余额加载失败显示“--”，不误显示为 0。
+- 无头像、无昵称、无摘要、无评论等场景继续使用默认资源和空状态。
+
+## 跨端约束
+
+- 使用 uni-app `view/text/image/scroll-view/input` 与现有 `u-icon`，不新增仅 H5 可用的 DOM API。
+- 安全区、状态栏和键盘顶起行为保持现有条件编译方式。
+- 样式继续使用当前项目 SCSS/BEM 命名，不引入新的 UI 依赖。
+
+## 计划改动文件
+
+- `uniapp/src/packages_community/pages/post_detail.vue`
+- `server/app/api/controller/CommunityController.php`
+- `docs/设计稿映射.md`
+- `docs/业务进度管理.md`
+
+## 验收标准
+
+- 430px H5 视口下，结构和视觉层级接近设计稿：固定标题、作者内容卡、完整解锁卡、互动评论区和底部输入栏。
+- 未登录、积分不足、已购买、VIP 免费、作者本人和普通免费帖均不会进入错误解锁状态。
+- 点击确认解锁会真实传递 `confirm=1`，成功后页面立即显示全文且余额刷新。
+- 免费预览按 `free_content_len` 生效，锁定用户无法从接口响应获得完整正文。
+- 现有关注、点赞、评论、回复、分享、翻译、AI 分析和删除入口不回归。