From ea0561e7581ba6ae5c615eee8fa1109808839a09 Mon Sep 17 00:00:00 2001
From: hajimi <phperbylyh@163.com>
Date: Sun, 2 Aug 2026 01:31:20 +0800
Subject: [PATCH] feat: refresh paid post detail experience

---
 ...8-02-community-paid-post-detail-refresh.md |  356 ++++
 .../packages_community/pages/post_detail.vue  | 1830 +++++++++--------
 2 files changed, 1384 insertions(+), 802 deletions(-)
 create mode 100644 docs/superpowers/plans/2026-08-02-community-paid-post-detail-refresh.md

diff --git a/docs/superpowers/plans/2026-08-02-community-paid-post-detail-refresh.md b/docs/superpowers/plans/2026-08-02-community-paid-post-detail-refresh.md
new file mode 100644
index 0000000..b01c6ce
--- /dev/null
+++ b/docs/superpowers/plans/2026-08-02-community-paid-post-detail-refresh.md
@@ -0,0 +1,356 @@
+# Community Paid Post Detail Refresh 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:** 后端继续通过 `/api/community/postDetail` 和 `/api/community/purchasePost` 提供统一契约，仅修正锁定正文的预览长度。uni-app 详情页在单个页面组件内重组视觉层级，复用现有社区积分、关注、点赞、评论、分享和购买 API，不新增路由或第三方依赖。
+
+**Tech Stack:** PHP 8 / ThinkPHP、uni-app、Vue 3 `<script setup>`、TypeScript、SCSS、uView 图标、Git、项目部署脚本。
+
+---
+
+## 工作区保护
+
+- 当前工作区已有用户改动，尤其是 `uniapp/src/api/community.ts`、社区列表相关文件、`docs/业务进度管理.md`、`docs/设计稿映射.md` 和 `.playwright-mcp/`。
+- 只编辑本计划明确列出的源码；提交时逐个指定路径，禁止 `git add .`。
+- `docs/业务进度管理.md` 与 `docs/设计稿映射.md` 只追加本任务记录，不把原有未提交改动纳入源码提交。
+- 用户没有要求构建或自动化测试，因此不执行 `npm run build:h5`、PHP 测试或 QA 测试；只进行代码复核、页面热更新对比和项目要求的 server 部署。
+
+### Task 1: 修复后端免费预览契约
+
+**Files:**
+- Modify: `server/app/api/controller/CommunityController.php:85-97`
+
+- [ ] **Step 1: 将硬编码 20 字符替换为帖子配置值**
+
+在锁定分支中使用以下逻辑：
+
+```php
+$previewLength = (int) ($data['free_content_len'] ?? 100);
+if ($previewLength <= 0) {
+    $previewLength = 100;
+}
+$previewLength = max(20, min(500, $previewLength));
+
+if (mb_strlen($data['content']) > $previewLength) {
+    $data['content'] = mb_substr($data['content'], 0, $previewLength) . '...';
+}
+```
+
+保留“锁定状态最多返回第一张图片”的现有逻辑，不改变已购买、VIP 免费和作者本人的全文权限。
+
+同时将特朗普译文生成与 `translated_content` 返回移动到付费权限判断之后：仅当 `is_locked=false` 时生成或返回译文，防止锁定用户通过译文绕过付费权限。
+
+- [ ] **Step 2: 静态复核后端契约**
+
+确认以下条件同时成立：
+
+```text
+postDetail 仍是免登录接口
+锁定用户只能拿到免费预览
+free_content_len 缺失或非法时回落到 100
+free_content_len 最终限制在 20～500
+purchasePost 的 confirm=0/1 契约不变
+锁定帖子不会生成或返回 translated_content
+```
+
+建议但本次不自动执行：
+
+```powershell
+php -l server/app/api/controller/CommunityController.php
+```
+
+预期：`No syntax errors detected`。
+
+- [ ] **Step 3: 单独提交后端修改**
+
+```powershell
+git add -- server/app/api/controller/CommunityController.php
+git commit -m "fix: honor paid post preview length"
+```
+
+### Task 2: 重构详情页数据状态与解锁流程
+
+**Files:**
+- Modify: `uniapp/src/packages_community/pages/post_detail.vue:179-635`
+
+- [ ] **Step 1: 复用积分统计接口并新增页面状态**
+
+在社区 API 导入中加入已有的 `getCommunityUserStats`，并新增以下状态：
+
+```ts
+const detailError = ref(false)
+const commentError = ref(false)
+const previewExpanded = ref(false)
+const userPoints = ref<number | null>(null)
+const pointsLoading = ref(false)
+const likePending = ref(false)
+const commentLikePending = ref<Set<number>>(new Set())
+```
+
+积分展示使用：
+
+```ts
+const userPointsText = computed(() => {
+    if (!getToken()) return '登录后查看'
+    if (pointsLoading.value) return '加载中'
+    return userPoints.value === null ? '--' : String(userPoints.value)
+})
+```
+
+- [ ] **Step 2: 将免费预览拆分为标题和摘要**
+
+添加纯函数和计算属性，优先按换行、首句、冒号和长度降级拆分：
+
+```ts
+const splitPostPreview = (value: unknown) => {
+    const content = String(value || '').replace(/\r\n/g, '\n').trim()
+    if (!content) return { title: '', summary: '' }
+
+    const lines = content.split('\n').map((line) => line.trim()).filter(Boolean)
+    if (lines.length > 1) {
+        return { title: lines[0], summary: lines.slice(1).join('\n') }
+    }
+
+    const sentence = content.match(/^(.+?[。！？.!?])\s*(.*)$/)
+    if (sentence && sentence[1].length <= 56) {
+        return { title: sentence[1], summary: sentence[2] || '' }
+    }
+
+    const colonIndex = content.search(/[：:]/)
+    if (colonIndex >= 4 && colonIndex <= 36) {
+        return {
+            title: content.slice(0, colonIndex + 1),
+            summary: content.slice(colonIndex + 1).trim()
+        }
+    }
+
+    if (content.length > 42) {
+        return { title: content.slice(0, 42), summary: content.slice(42).trim() }
+    }
+
+    return { title: content, summary: '' }
+}
+
+const postPreview = computed(() => splitPostPreview(post.value?.content))
+const previewCanExpand = computed(() => postPreview.value.summary.length > 90)
+```
+
+- [ ] **Step 3: 让详情和评论错误可恢复**
+
+`fetchDetail()` 开始时清空 `detailError`，失败时设置为 `true`；特朗普翻译改为非阻塞触发，避免翻译请求阻塞首屏：
+
+```ts
+post.value = res
+translatedText.value = res?.translated_content || ''
+loading.value = false
+
+if (isTrump && res?.content && !translatedText.value && !autoTranslateStarted.value) {
+    autoTranslateStarted.value = true
+    void requestTranslate()
+}
+```
+
+`fetchComments()` 失败时设置 `commentError`，成功时清空，并保留正文正常展示。
+
+- [ ] **Step 4: 使用两阶段购买流程**
+
+将 `handlePurchase()` 改为：
+
+```ts
+const applyUnlockedContent = async (result: any) => {
+    if (!post.value || !result?.content) return
+    post.value.content = result.content
+    post.value.is_locked = false
+    post.value.is_purchased = true
+    if (!result.from_cache) {
+        post.value.paid_count = Number(post.value.paid_count || 0) + 1
+    }
+    previewExpanded.value = true
+    await loadUserPoints()
+}
+
+const handlePurchase = async () => {
+    if (!checkLogin() || purchasing.value || !post.value) return
+    purchasing.value = true
+    try {
+        const probe = await purchasePost({ post_id: postId.value, confirm: 0 })
+        if (probe?.content) {
+            await applyUnlockedContent(probe)
+            return
+        }
+        if (!probe?.needs_payment) return
+
+        uni.showModal({
+            title: '确认解锁',
+            content: `确定使用 ${probe.cost || post.value.price_points || 0} 积分解锁该内容吗？`,
+            confirmText: '确认解锁',
+            confirmColor: '#1468f5',
+            success: async (modalResult) => {
+                if (!modalResult.confirm) return
+                purchasing.value = true
+                try {
+                    const paidResult = await purchasePost({ post_id: postId.value, confirm: 1 })
+                    await applyUnlockedContent(paidResult)
+                    uni.showToast({ title: '解锁成功', icon: 'success' })
+                } finally {
+                    purchasing.value = false
+                }
+            }
+        })
+    } finally {
+        purchasing.value = false
+    }
+}
+```
+
+实现时确保弹窗确认后的异步失败仍由请求层提示，并避免外层 `finally` 抢先影响确认按钮状态。
+
+- [ ] **Step 5: 防止点赞计数异常**
+
+帖子点赞与评论点赞均增加进行中保护，并统一使用非负数：
+
+```ts
+const nextLikeCount = (count: unknown, liked: boolean) =>
+    Math.max(0, Number(count || 0) + (liked ? 1 : -1))
+```
+
+评论成功后 `await fetchComments()`，再令 `post.value.comment_count = commentTotal.value`，避免本地累计与接口总数不一致。
+
+### Task 3: 高度还原帖子详情视觉
+
+**Files:**
+- Modify: `uniapp/src/packages_community/pages/post_detail.vue:1-177`
+- Modify: `uniapp/src/packages_community/pages/post_detail.vue:637-1240`
+
+- [ ] **Step 1: 重构顶部导航**
+
+模板固定显示“帖子详情”，并在右侧复用分享弹窗：
+
+```vue
+<view class="detail-topbar__nav">
+    <view class="detail-topbar__action detail-topbar__action--back" @tap="goBack">
+        <u-icon name="arrow-left" size="40" color="#111111" />
+    </view>
+    <text class="detail-topbar__title">帖子详情</text>
+    <view class="detail-topbar__action" @tap="handleShare">
+        <u-icon name="share" size="42" color="#111111" />
+    </view>
+</view>
+```
+
+- [ ] **Step 2: 合并作者与内容卡**
+
+使用 `detail-post-card` 承载作者、关注按钮、付费标签、标题和摘要。摘要通过 class 控制三行收起：
+
+```vue
+<text
+    v-if="postPreview.summary"
+    class="detail-post-card__summary"
+    :class="{ 'detail-post-card__summary--collapsed': previewCanExpand && !previewExpanded }"
+>
+    {{ postPreview.summary }}
+</text>
+<text v-if="previewCanExpand" class="detail-post-card__expand" @tap="previewExpanded = !previewExpanded">
+    {{ previewExpanded ? '收起' : '展开' }}
+</text>
+```
+
+关注按钮使用描边样式；已关注状态使用浅蓝底。现有私聊入口只在已关注时以紧凑次按钮保留。
+
+- [ ] **Step 3: 重建解锁卡**
+
+解锁卡包含锁图形、积分信息、积分明细和说明：
+
+```vue
+<view v-if="post.is_locked" class="detail-unlock-card">
+    <view class="detail-unlock-card__lock"><u-icon name="lock" size="58" color="#1468f5" /></view>
+    <view class="detail-unlock-card__content">
+        <text class="detail-unlock-card__title">解锁全文</text>
+        <view class="detail-unlock-card__points">
+            <text>需 </text><text class="is-primary">{{ post.price_points }} 积分</text>
+            <text class="detail-unlock-card__dot">·</text>
+            <text>当前余额 </text><text class="is-primary">{{ userPointsText }}</text>
+        </view>
+        <text class="detail-unlock-card__link" @tap="openPoints">积分明细 ›</text>
+        <view class="detail-unlock-card__btn" :class="{ 'is-disabled': purchasing }" @tap="handlePurchase">
+            <text>{{ purchasing ? '解锁中' : '确认解锁' }}</text>
+        </view>
+    </view>
+    <view class="detail-unlock-card__notice">
+        <u-icon name="info-circle" size="26" color="#7c8798" />
+        <text>解锁后永久可读；内容一经解锁不支持退回积分</text>
+    </view>
+</view>
+```
+
+视觉值采用浅蓝渐变、`24rpx` 圆角、蓝色渐变主按钮和足够的卡内留白，430px H5 下不横向溢出。
+
+- [ ] **Step 4: 重构互动与评论区**
+
+互动标题和三项数据同行，评论项恢复头像并将点赞、回复、删除放到元信息行。底部输入栏继续固定在 flex 布局末端，`scroll-view` 使用 `flex: 1; min-height: 0`。
+
+- [ ] **Step 5: 增加加载失败与评论重试状态**
+
+详情失败区提供“重新加载”和“返回”按钮；评论失败区提供“重新加载评论”。按钮分别调用 `fetchDetail(postId)` 与 `fetchComments()`。
+
+- [ ] **Step 6: 提交 uni-app 页面修改**
+
+```powershell
+git add -- uniapp/src/packages_community/pages/post_detail.vue
+git commit -m "feat: refresh paid post detail experience"
+```
+
+### Task 4: 更新项目记录并进行页面对比复核
+
+**Files:**
+- Modify: `docs/业务进度管理.md`
+- Modify: `docs/设计稿映射.md`
+- Existing: `docs/superpowers/plans/2026-08-02-community-paid-post-detail-refresh.md`
+
+- [ ] **Step 1: 追加业务进度记录**
+
+记录以下内容：付费详情视觉还原、两阶段解锁、积分余额、免费预览长度、错误状态和涉及文件。不覆盖文档中现有未提交改动。
+
+- [ ] **Step 2: 更新设计稿映射**
+
+新增或更新“社区帖子详情”映射到 `uniapp/src/packages_community/pages/post_detail.vue`，状态标记为“代码已修改，待构建验收”或与实际复核结果一致。
+
+- [ ] **Step 3: 使用现有 H5 热更新页面进行截图对比**
+
+重新加载：
+
+```text
+http://localhost:5178/packages_community/pages/post_detail?id=8
+```
+
+检查固定标题、分享入口、作者内容卡、解锁卡、互动区、评论头像、底部输入栏和 430px 无横向溢出。此步骤不运行 H5 构建。
+
+- [ ] **Step 4: 审查改动范围**
+
+```powershell
+git diff --check
+git status --short
+git log -3 --oneline
+```
+
+只审查本任务文件；`.playwright-mcp/` 和用户已有社区改动不得纳入提交。
+
+### Task 5: 同步 server 修改到测试服
+
+**Files:**
+- Deploy source commit containing `server/app/api/controller/CommunityController.php`
+
+- [ ] **Step 1: 执行项目标准部署脚本**
+
+```powershell
+Set-Location D:\www\gs-sport-era
+powershell -ExecutionPolicy Bypass -File .\scripts\deploy-server.ps1 -Sudo -AutoIncremental -AutoIncrementalCommits 3 -RemoteDir /www/wwwroot/test-server.sbnews.net
+```
+
+预期：脚本将已提交的 server 运行源码同步到 `/www/wwwroot/test-server.sbnews.net`，不部署到旧目录。
+
+- [ ] **Step 2: 交付说明**
+
+列出已提交的后端与 uni-app 提交、部署结果、未执行的构建/自动化测试，以及保留在工作区的用户原有改动。
diff --git a/uniapp/src/packages_community/pages/post_detail.vue b/uniapp/src/packages_community/pages/post_detail.vue
index a56d08a..4a3fb90 100644
--- a/uniapp/src/packages_community/pages/post_detail.vue
+++ b/uniapp/src/packages_community/pages/post_detail.vue
@@ -2,155 +2,200 @@
     <view class="detail-page">
         <view class="detail-topbar" :style="{ paddingTop: statusBarHeight + 'px' }">
             <view class="detail-topbar__nav">
-                <view class="detail-topbar__back" @tap="goBack">
-                    <u-icon name="arrow-left" size="38" color="#111827" />
+                <view class="detail-topbar__action detail-topbar__action--back" @tap="goBack">
+                    <u-icon name="arrow-left" size="40" color="#111111" />
                 </view>
-                <view class="detail-topbar__title-wrap">
-                    <text class="detail-topbar__title">{{ pageTitle }}</text>
+                <text class="detail-topbar__title">帖子详情</text>
+                <view class="detail-topbar__action" @tap="handleShare">
+                    <u-icon name="share" size="42" color="#111111" />
                 </view>
-                <view class="detail-topbar__placeholder" />
             </view>
         </view>
 
         <scroll-view scroll-y class="detail-scroll">
             <view v-if="loading" class="detail-loading">
                 <u-loading mode="circle" />
+                <text>正在加载帖子...</text>
             </view>
 
-            <view v-if="!loading && post" class="detail-content">
-                <view class="detail-header-area">
-                    <view class="detail-header-area__top">
-                        <text class="detail-header-area__label">{{ headerCategoryText }}</text>
-                        <text class="detail-header-area__hint">{{ headerHintText }}</text>
-                    </view>
+            <view v-else-if="detailError" class="detail-error">
+                <view class="detail-error__icon">!</view>
+                <text class="detail-error__title">帖子加载失败</text>
+                <text class="detail-error__desc">请检查网络后重新加载</text>
+                <view class="detail-error__actions">
+                    <view class="detail-error__btn detail-error__btn--primary" @tap="fetchDetail(postId)">重新加载</view>
+                    <view class="detail-error__btn" @tap="goBack">返回</view>
+                </view>
+            </view>
 
-                    <view class="detail-header detail-header--panel">
-                        <image class="detail-header__avatar" :src="post.user?.avatar || defaultAvatar" mode="aspectFill"
-                            @tap="goUserProfile(post.user_id)" />
-                        <view class="detail-header__info">
-                            <text class="detail-header__name">{{ post.user?.nickname || '匿名用户' }}</text>
-                            <text class="detail-header__time">{{ formatTime(post.create_time) }}</text>
+            <view v-else-if="post" class="detail-main">
+                <view class="detail-post-card">
+                    <view class="detail-post-card__author">
+                        <image class="detail-post-card__avatar" :src="postAvatar" mode="aspectFill"
+                            @error="postAvatarFailed = true" @tap="goUserProfile(post.user_id)" />
+                        <view class="detail-post-card__author-info">
+                            <text class="detail-post-card__name">{{ post.user?.nickname || '匿名用户' }}</text>
+                            <text class="detail-post-card__date">{{ formatTime(post.create_time) }}</text>
                         </view>
-                        <view v-if="!isSelf" class="detail-header__actions">
-                            <view class="detail-header__follow"
-                                :class="{ 'detail-header__follow--active': post.is_friend || post.is_followed }"
+                        <view v-if="!isSelf" class="detail-post-card__author-actions">
+                            <view class="detail-post-card__follow" :class="{ 'is-active': isFollowed }"
                                 @tap.stop="handleFollow">
-                                <text>{{ post.is_friend || post.is_followed ? '已好友' : '加好友' }}</text>
+                                <text>{{ isFollowed ? '已关注' : '关注' }}</text>
                             </view>
-                            <view v-if="post.is_friend || post.is_followed" class="detail-header__chat"
-                                @tap.stop="handlePrivateChat">
+                            <view v-if="isFollowed" class="detail-post-card__chat" @tap.stop="handlePrivateChat">
                                 <text>私聊</text>
                             </view>
                         </view>
                     </view>
-                </view>
 
-                <view class="detail-body">
-                    <view v-for="(line, index) in contentLines" :key="`content-line-${index}`"
-                        class="detail-body__line">
-                        <text v-if="line.original" class="detail-body__text">{{ line.original }}</text>
-                        <text v-if="line.translated" class="detail-body__translate">{{ line.translated }}</text>
+                    <view v-if="post.is_paid" class="detail-post-card__paid-badge">
+                        <u-icon name="lock" size="24" color="#1468f5" />
+                        <text>付费内容</text>
                     </view>
-                </view>
 
-                <view v-if="post.images && post.images.length > 0" class="detail-images">
-                    <view v-if="showExternalCover" class="detail-images__external" @tap="openSourceUrl">
-                        <view class="detail-images__external-icon">
-                            <text>T</text>
+                    <text v-if="postPreview.title" class="detail-post-card__title">{{ postPreview.title }}</text>
+
+                    <view v-if="postPreview.summary" class="detail-post-card__summary-wrap">
+                        <text class="detail-post-card__summary"
+                            :class="{ 'detail-post-card__summary--collapsed': previewCanExpand && !previewExpanded }">
+                            {{ postPreview.summary }}
+                        </text>
+                        <text v-if="previewCanExpand" class="detail-post-card__expand"
+                            @tap="previewExpanded = !previewExpanded">
+                            {{ previewExpanded ? '收起' : '展开' }}
+                        </text>
+                    </view>
+
+                    <view v-if="translatedLines.length" class="detail-post-card__translation">
+                        <text class="detail-post-card__translation-label">译文</text>
+                        <text v-for="(line, index) in translatedLines" :key="`translated-${index}`"
+                            class="detail-post-card__translation-text">{{ line }}</text>
+                    </view>
+
+                    <view v-if="post.images && post.images.length > 0" class="detail-images">
+                        <view v-if="showExternalCover" class="detail-images__external" @tap="openSourceUrl">
+                            <view class="detail-images__external-icon">T</view>
+                            <view class="detail-images__external-body">
+                                <text class="detail-images__external-title">Truth Social 图片暂不可直连</text>
+                                <text class="detail-images__external-desc">点击跳转查看原帖图片</text>
+                            </view>
+                            <text class="detail-images__external-btn">查看原帖</text>
                         </view>
-                        <view class="detail-images__external-body">
-                            <text class="detail-images__external-title">Truth Social 图片暂不可直连</text>
-                            <text class="detail-images__external-desc">点击跳转查看原帖图片</text>
-                        </view>
-                        <view class="detail-images__external-btn">
-                            <text>查看原帖</text>
+                        <view v-else class="detail-images__grid">
+                            <image v-for="(img, idx) in visibleImages" :key="idx" class="detail-images__item"
+                                :src="img" mode="aspectFill" @tap="!post.is_locked && previewImage(idx)" />
                         </view>
                     </view>
-                    <view class="detail-images__grid">
-                        <image v-for="(img, idx) in visibleImages" :key="idx" class="detail-images__item" :src="img"
-                            mode="aspectFill" @tap="!post.is_locked && previewImage(idx)" />
+
+                    <view v-if="post.tags && post.tags.length > 0" class="detail-tags">
+                        <text v-for="(tag, index) in post.tags" :key="index" class="detail-tags__item">#{{ tag }}</text>
                     </view>
                 </view>
 
-                <view v-if="post.is_locked" class="detail-unlock-card" @tap="handlePurchase">
-                    <view class="detail-unlock-card__text">
-                        <text class="detail-unlock-card__price">{{ post.price_points }}积分解锁全文</text>
-                        <text class="detail-unlock-card__count">已有{{ post.paid_count || 0 }}人解锁</text>
+                <view v-if="post.is_locked" class="detail-unlock-card">
+                    <view class="detail-unlock-card__main">
+                        <view class="detail-unlock-card__visual">
+                            <view class="detail-unlock-card__ring detail-unlock-card__ring--outer" />
+                            <view class="detail-unlock-card__ring detail-unlock-card__ring--inner" />
+                            <view class="detail-unlock-card__lock">
+                                <u-icon name="lock" size="62" color="#1468f5" />
+                            </view>
+                        </view>
+                        <view class="detail-unlock-card__content">
+                            <text class="detail-unlock-card__title">解锁全文</text>
+                            <view class="detail-unlock-card__points">
+                                <text>需 </text>
+                                <text class="is-primary">{{ post.price_points }} 积分</text>
+                                <text class="detail-unlock-card__dot">·</text>
+                                <text>当前余额 </text>
+                                <text class="is-primary">{{ userPointsText }}</text>
+                            </view>
+                            <text class="detail-unlock-card__link" @tap="openPoints">积分明细 ›</text>
+                            <view class="detail-unlock-card__btn" :class="{ 'is-disabled': purchasing }"
+                                @tap="handlePurchase">
+                                <text>{{ purchasing ? '解锁中' : '确认解锁' }}</text>
+                            </view>
+                        </view>
                     </view>
-                    <view class="detail-unlock-card__btn" :class="{ 'detail-unlock-card__btn--disabled': purchasing }">
-                        <text>{{ purchasing ? '解锁中' : '立即解锁' }}</text>
+                    <view class="detail-unlock-card__notice">
+                        <u-icon name="info-circle" size="26" color="#7c8798" />
+                        <text>解锁后永久可读；内容一经解锁不支持退回积分</text>
                     </view>
                 </view>
 
-                <view v-if="post.tags && post.tags.length > 0" class="detail-tags">
-                    <text v-for="(t, i) in post.tags" :key="i" class="detail-tags__item">#{{ t }}</text>
+                <view v-if="isLiuhePost || isSelf" class="detail-tools">
+                    <view v-if="isLiuhePost" class="detail-tools__item" @tap="handleAiAnalysisBtn">AI 分析</view>
+                    <view v-if="isSelf" class="detail-tools__item detail-tools__item--danger"
+                        @tap="handleDeletePost">删除帖子</view>
                 </view>
 
-                <view class="detail-stats">
-                    <view class="detail-stats__item" @tap="handleLike">
-                        <u-icon name="thumb-up" size="36" :color="post.is_liked ? '#185dff' : '#666'" />
-                        <text :class="{ 'detail-stats__active': post.is_liked }">{{ post.like_count || 0 }}</text>
-                    </view>
-                    <view class="detail-stats__item">
-                        <u-icon name="chat" size="36" color="#666" />
-                        <text>{{ post.comment_count || 0 }}</text>
-                    </view>
-                    <view class="detail-stats__item">
-                        <u-icon name="eye" size="36" color="#666" />
-                        <text>{{ post.view_count || 0 }}</text>
-                    </view>
-                    <view class="detail-stats__item" @tap="handleShare">
-                        <u-icon name="share" size="36" color="#666" />
-                        <text>{{ post.share_count || '' }}</text>
-                    </view>
-                    <view v-if="isLiuhePost" class="detail-stats__item" @tap="handleAiAnalysisBtn">
-                        <text class="detail-stats__ai">AI分析</text>
-                    </view>
-                    <view v-if="isSelf" class="detail-stats__item detail-stats__item--delete" @tap="handleDeletePost">
-                        <text>删除</text>
+                <view class="detail-interaction">
+                    <view class="detail-interaction__header">
+                        <text class="detail-interaction__title">互动</text>
+                        <view class="detail-interaction__stats">
+                            <view class="detail-interaction__stat" @tap="handleLike">
+                                <u-icon name="thumb-up" size="34" :color="post.is_liked ? '#1468f5' : '#737373'" />
+                                <text :class="{ 'is-active': post.is_liked }">{{ Number(post.like_count || 0) }}</text>
+                            </view>
+                            <view class="detail-interaction__stat">
+                                <u-icon name="chat" size="34" color="#737373" />
+                                <text>{{ Number(post.comment_count || 0) }}</text>
+                            </view>
+                            <view class="detail-interaction__stat">
+                                <u-icon name="eye" size="34" color="#737373" />
+                                <text>{{ Number(post.view_count || 0) }}</text>
+                            </view>
+                        </view>
                     </view>
                 </view>
 
-                <view class="detail-divider" />
-
                 <view class="detail-comments">
                     <view class="detail-comments__title">
                         <text>评论 ({{ commentTotal }})</text>
                     </view>
 
-                    <view v-if="comments.length === 0 && !commentLoading" class="detail-comments__empty">
+                    <view v-if="commentError" class="detail-comments__error">
+                        <text>评论加载失败</text>
+                        <text class="detail-comments__retry" @tap="fetchComments">重新加载</text>
+                    </view>
+
+                    <view v-else-if="comments.length === 0 && !commentLoading" class="detail-comments__empty">
                         <text>暂无评论，快来抢沙发</text>
                     </view>
 
-                    <view v-for="c in comments" :key="c.id" class="comment-item">
-                        <image class="comment-item__avatar" :src="c.user?.avatar || '/static/images/avatar.png'"
-                            mode="aspectFill" />
+                    <view v-for="comment in comments" :key="comment.id" class="comment-item">
+                        <image class="comment-item__avatar" :src="getCommentAvatar(comment)" mode="aspectFill"
+                            @error="handleCommentAvatarError(comment)" />
                         <view class="comment-item__body">
-                            <text class="comment-item__name">{{ c.user?.nickname || '匿名' }}</text>
-                            <text class="comment-item__text">{{ c.content }}</text>
+                            <view class="comment-item__heading">
+                                <text class="comment-item__name">{{ comment.user?.nickname || '匿名' }}</text>
+                                <text v-if="isOwnComment(comment)" class="comment-item__more"
+                                    @tap.stop="handleDeleteComment(comment)">⋮</text>
+                            </view>
+                            <text class="comment-item__text">{{ comment.content }}</text>
                             <view class="comment-item__meta">
-                                <text class="comment-item__time">{{ formatTime(c.create_time) }}</text>
-                                <view class="comment-item__like" @tap.stop="handleCommentLike(c)">
-                                    <u-icon name="thumb-up" size="24" :color="c.is_liked ? '#185dff' : '#999'" />
-                                    <text>{{ c.like_count || '' }}</text>
+                                <text class="comment-item__time">{{ formatCommentTime(comment.create_time) }}</text>
+                                <view class="comment-item__like" @tap.stop="handleCommentLike(comment)">
+                                    <u-icon name="thumb-up" size="25"
+                                        :color="comment.is_liked ? '#1468f5' : '#8a8f98'" />
+                                    <text :class="{ 'is-active': comment.is_liked }">{{ comment.like_count || '' }}</text>
                                 </view>
-                                <text class="comment-item__reply-btn" @tap.stop="openReply(c)">回复</text>
-                                <text v-if="isOwnComment(c)" class="comment-item__delete-btn"
-                                    @tap.stop="handleDeleteComment(c)">删除</text>
+                                <text class="comment-item__reply-btn" @tap.stop="openReply(comment)">回复</text>
                             </view>
 
-                            <view v-if="c.replies && c.replies.length > 0" class="comment-replies">
-                                <view v-for="r in c.replies" :key="r.id" class="comment-reply">
-                                    <text class="comment-reply__name">{{ r.user?.nickname || '匿名' }}</text>
-                                    <text v-if="r.reply_user" class="comment-reply__arrow"> 回复 </text>
-                                    <text v-if="r.reply_user" class="comment-reply__name">{{ r.reply_user.nickname
-                                    }}</text>
-                                    <text class="comment-reply__text">：{{ r.content }}</text>
-                                    <text v-if="isOwnComment(r)" class="comment-reply__delete-btn"
-                                        @tap.stop="handleDeleteComment(r)"> 删除</text>
+                            <view v-if="comment.replies && comment.replies.length > 0" class="comment-replies">
+                                <view v-for="reply in comment.replies" :key="reply.id" class="comment-reply">
+                                    <text class="comment-reply__name">{{ reply.user?.nickname || '匿名' }}</text>
+                                    <text v-if="reply.reply_user" class="comment-reply__arrow"> 回复 </text>
+                                    <text v-if="reply.reply_user" class="comment-reply__name">{{ reply.reply_user.nickname
+                                        }}</text>
+                                    <text class="comment-reply__text">：{{ reply.content }}</text>
+                                    <text v-if="isOwnComment(reply)" class="comment-reply__delete"
+                                        @tap.stop="handleDeleteComment(reply)"> 删除</text>
                                 </view>
-                                <text v-if="c.reply_count > 3" class="comment-replies__more">查看全部{{ c.reply_count
-                                }}条回复</text>
+                                <text v-if="comment.reply_count > comment.replies.length" class="comment-replies__more">
+                                    还有{{ comment.reply_count - comment.replies.length }}条回复
+                                </text>
                             </view>
                         </view>
                     </view>
@@ -162,7 +207,7 @@
             </view>
         </scroll-view>
 
-        <view class="detail-input-bar">
+        <view v-if="!loading && post && !detailError" class="detail-input-bar">
             <input v-model="inputContent" class="detail-input-bar__input" :placeholder="inputPlaceholder"
                 :adjust-position="true" confirm-type="send" @confirm="submitComment" />
             <view class="detail-input-bar__btn" @tap="submitComment">
@@ -172,32 +217,62 @@
 
         <share-popup v-if="showSharePopup" v-model:show="showSharePopup" page-type="post" :page-id="postId"
             :path="`/packages_community/pages/post_detail?id=${postId}`"
-            :title="post?.content?.substring(0, 50) || '来看看这篇帖子'" />
+            :title="pageTitle || '来看看这篇帖子'" />
     </view>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import SharePopup from '@/components/share-popup/share-popup.vue'
 import {
-    getCommunityPostDetail,
-    getCommentLists,
     addComment,
     deleteComment,
     deletePost,
-    toggleLike,
-    toggleFollow,
+    getCommentLists,
+    getCommunityPostDetail,
+    getCommunityUserStats,
     purchasePost,
+    toggleFollow,
+    toggleLike,
     translatePost
 } from '@/api/community'
-import { getToken } from '@/utils/auth'
+import { openChat } from '@/api/chat'
 import { useAppStore } from '@/stores/app'
 import { useUserStore } from '@/stores/user'
-import { openChat } from '@/api/chat'
+import { getToken } from '@/utils/auth'
 
+const LIUHE_TAGS = ['旧澳六合', '新澳六合']
 const appStore = useAppStore()
 const userStore = useUserStore()
+
+const statusBarHeight = ref(0)
+const postId = ref(0)
+const post = ref<any>(null)
+const loading = ref(true)
+const detailError = ref(false)
+const postAvatarFailed = ref(false)
+
+const comments = ref<any[]>([])
+const commentTotal = ref(0)
+const commentLoading = ref(false)
+const commentError = ref(false)
+const commentPage = ref(1)
+const commentAvatarFallbacks = ref<Record<number, boolean>>({})
+
+const translatedText = ref('')
+const autoTranslateStarted = ref(false)
+const previewExpanded = ref(false)
+
+const inputContent = ref('')
+const replyTarget = ref<any>(null)
+const purchasing = ref(false)
+const likePending = ref(false)
+const commentLikePending = ref<Set<number>>(new Set())
+
+const userPoints = ref<number | null>(null)
+const pointsLoading = ref(false)
+
 const defaultAvatar = computed(() => {
     const logo = appStore.config?.website?.shop_logo
     if (!logo) return '/static/images/avatar.png'
@@ -205,221 +280,204 @@ const defaultAvatar = computed(() => {
     return (appStore.config?.domain || '') + logo
 })
 
-const checkLogin = () => {
-    if (!getToken()) {
-        uni.showModal({
-            title: '提示',
-            content: '该操作需要登录，是否前往登录？',
-            confirmText: '去登录',
-            success: (res) => {
-                if (res.confirm) {
-                    uni.navigateTo({ url: '/pages/login/login' })
-                }
-            }
-        })
-        return false
-    }
-    return true
-}
-
-const statusBarHeight = ref(0)
-const post = ref<any>(null)
-const loading = ref(true)
-const postId = ref(0)
-
-const comments = ref<any[]>([])
-const commentTotal = ref(0)
-const commentLoading = ref(false)
-const commentPage = ref(1)
-const translatedText = ref('')
-const autoTranslateStarted = ref(false)
-
-const inputContent = ref('')
-const replyTarget = ref<any>(null)
-const purchasing = ref(false)
+const postAvatar = computed(() => {
+    if (postAvatarFailed.value) return defaultAvatar.value
+    return post.value?.user?.avatar || defaultAvatar.value
+})
 
 const isSelf = computed(() => !!post.value?.is_self)
-const LIUHE_TAGS = ['旧澳六合', '新澳六合']
+const isFollowed = computed(() => !!(post.value?.is_friend || post.value?.is_followed))
 const hasTag = (tags: any, target: string) => Array.isArray(tags) && tags.includes(target)
 const hasAnyTag = (tags: any, targets: string[]) => Array.isArray(tags) && targets.some((tag) => tags.includes(tag))
-const isTrumpPost = computed(
-    () => hasTag(post.value?.tags, '特朗普')
-)
-const isLiuhePost = computed(
-    () => hasAnyTag(post.value?.tags, LIUHE_TAGS)
-)
+const isTrumpPost = computed(() => hasTag(post.value?.tags, '特朗普'))
+const isLiuhePost = computed(() => hasAnyTag(post.value?.tags, LIUHE_TAGS))
+
 const trumpSourceUrl = computed(() => {
     if (post.value?.source_url) return post.value.source_url
-    const originId = post.value?.origin_id || ''
+    const originId = String(post.value?.origin_id || '')
     if (!originId.startsWith('truthsocial:')) return ''
     const sourcePostId = originId.split(':')[1]
-    if (!sourcePostId) return ''
-    return `https://truthsocial.com/@realDonaldTrump/${sourcePostId}`
+    return sourcePostId ? `https://truthsocial.com/@realDonaldTrump/${sourcePostId}` : ''
 })
+
 const showExternalCover = computed(() => isTrumpPost.value && !!trumpSourceUrl.value)
 const visibleImages = computed(() => {
     if (showExternalCover.value) return []
     return Array.isArray(post.value?.images) ? post.value.images : []
 })
-const pageTitle = computed(() => {
-    const firstLine = contentLines.value.find((line) => line.original)?.original || ''
-    if (!firstLine) return '帖子详情'
-    return firstLine.length > 18 ? `${firstLine.slice(0, 18)}...` : firstLine
-})
-const headerCategoryText = computed(() => {
-    if (post.value?.is_paid) return '付费帖子'
-    if (showExternalCover.value) return '外链帖子'
-    if (visibleImages.value.length > 0) return '图文帖子'
-    return '社区帖子'
-})
-const headerHintText = computed(() => {
-    if (visibleImages.value.length > 0) {
-        return `${visibleImages.value.length}张图片`
+
+const splitPostPreview = (value: unknown) => {
+    const content = String(value || '').replace(/\r\n/g, '\n').replace(/\r/g, '\n').trim()
+    if (!content) return { title: '', summary: '' }
+
+    const lines = content.split('\n').map((line) => line.trim()).filter(Boolean)
+    if (lines.length > 1) {
+        return { title: lines[0], summary: lines.slice(1).join('\n') }
     }
-    if (post.value?.is_paid) {
-        return `${post.value.price_points || 0}积分解锁`
+
+    const colonIndex = content.search(/[：:]/)
+    if (colonIndex >= 4 && colonIndex <= 36) {
+        return {
+            title: content.slice(0, colonIndex + 1),
+            summary: content.slice(colonIndex + 1).trim()
+        }
     }
-    if (translatedText.value) {
-        return '双语展示'
+
+    const sentence = content.match(/^(.+?[。！？!?]|.+?\.(?!\.))\s*(.*)$/)
+    if (sentence && sentence[1].length <= 56) {
+        return { title: sentence[1], summary: sentence[2] || '' }
     }
-    return '正文详情'
-})
 
-const splitContentLines = (text: string) => {
-    const normalized = String(text || '')
-        .replace(/\r\n/g, '\n')
-        .replace(/\r/g, '\n')
-        .trim()
-    if (!normalized) return []
+    if (content.length > 42) {
+        return { title: content.slice(0, 42), summary: content.slice(42).trim() }
+    }
 
-    const manualLines = normalized
-        .split('\n')
-        .map((line) => line.replace(/\s+/g, ' ').trim())
-        .filter(Boolean)
-
-    if (manualLines.length > 1) return manualLines
-
-    const sentenceLines = normalized
-        .replace(/\s+/g, ' ')
-        .match(/[^。！？.!?]+[。！？.!?]?/g)
-        ?.map((line) => line.trim())
-        .filter(Boolean)
-
-    return sentenceLines?.length ? sentenceLines : [normalized]
+    return { title: '', summary: content }
 }
 
-const contentLines = computed(() => {
-    const originals = splitContentLines(post.value?.content || '')
-    const translations = splitContentLines(translatedText.value)
+const splitContentLines = (value: unknown) => String(value || '')
+    .replace(/\r\n/g, '\n')
+    .replace(/\r/g, '\n')
+    .split('\n')
+    .map((line) => line.trim())
+    .filter(Boolean)
 
-    if (!translations.length) {
-        return originals.map((original) => ({ original, translated: '' }))
-    }
-
-    if (originals.length === translations.length) {
-        return originals.map((original, index) => ({
-            original,
-            translated: translations[index] || ''
-        }))
-    }
-
-    if (originals.length <= 1 || translations.length <= 1) {
-        return [{
-            original: originals.join(' '),
-            translated: translations.join(' ')
-        }]
-    }
-
-    return originals.map((original, index) => ({
-        original,
-        translated: translations[index] || ''
-    }))
+const postPreview = computed(() => splitPostPreview(post.value?.content))
+const translatedLines = computed(() => splitContentLines(translatedText.value))
+const previewCanExpand = computed(() => {
+    const summary = postPreview.value.summary
+    return summary.length > 90 || summary.split('\n').length > 3
+})
+const pageTitle = computed(() => postPreview.value.title || postPreview.value.summary.slice(0, 40) || '帖子详情')
+const userPointsText = computed(() => {
+    if (!getToken()) return '登录后查看'
+    if (pointsLoading.value) return '加载中'
+    return userPoints.value === null ? '--' : String(userPoints.value)
 })
 
 const inputPlaceholder = computed(() => {
-    if (replyTarget.value) {
-        return `回复 ${replyTarget.value.user?.nickname || ''}：`
-    }
+    if (replyTarget.value) return `回复 ${replyTarget.value.user?.nickname || ''}：`
     return '写评论...'
 })
 
+const checkLogin = () => {
+    if (getToken()) return true
+    uni.showModal({
+        title: '提示',
+        content: '该操作需要登录，是否前往登录？',
+        confirmText: '去登录',
+        success: (result) => result.confirm && uni.navigateTo({ url: '/pages/login/login' })
+    })
+    return false
+}
+
 const isOwnComment = (comment: any) => {
     const currentUserId = Number(userStore.userInfo?.id || 0)
     return !!comment?.is_self || (currentUserId > 0 && Number(comment?.user_id || 0) === currentUserId)
 }
 
+const nextLikeCount = (count: unknown, liked: boolean) =>
+    Math.max(0, Number(count || 0) + (liked ? 1 : -1))
+
+const loadUserPoints = async () => {
+    if (!getToken()) {
+        userPoints.value = null
+        return
+    }
+    pointsLoading.value = true
+    try {
+        const stats = await getCommunityUserStats()
+        const points = Number(stats?.user_points)
+        userPoints.value = Number.isFinite(points) ? points : null
+    } catch (_error) {
+        userPoints.value = null
+    } finally {
+        pointsLoading.value = false
+    }
+}
+
+const fetchDetail = async (id: number) => {
+    if (!id) return
+    loading.value = true
+    detailError.value = false
+    postAvatarFailed.value = false
+    let shouldTranslate = false
+    try {
+        const result = await getCommunityPostDetail({ id })
+        post.value = result
+        translatedText.value = result?.translated_content || ''
+        autoTranslateStarted.value = false
+        previewExpanded.value = !result?.is_locked
+
+        const tags = Array.isArray(result?.tags) ? result.tags : []
+        shouldTranslate = hasTag(tags, '特朗普') && !!result?.content && !translatedText.value
+        if (result?.is_locked) void loadUserPoints()
+    } catch (_error) {
+        post.value = null
+        detailError.value = true
+    } finally {
+        loading.value = false
+    }
+
+    if (shouldTranslate && !autoTranslateStarted.value) {
+        autoTranslateStarted.value = true
+        void requestTranslate()
+    }
+}
+
+const fetchComments = async () => {
+    if (!postId.value) return
+    commentLoading.value = true
+    commentError.value = false
+    try {
+        const result = await getCommentLists({
+            post_id: postId.value,
+            page_no: commentPage.value,
+            page_size: 20
+        })
+        comments.value = result?.lists || []
+        commentTotal.value = Number(result?.count || 0)
+        commentAvatarFallbacks.value = {}
+    } catch (_error) {
+        commentError.value = true
+    } finally {
+        commentLoading.value = false
+    }
+}
+
 onMounted(() => {
-    const sysInfo = uni.getSystemInfoSync()
+    const systemInfo = uni.getSystemInfoSync()
     // #ifdef APP-PLUS || MP
-    statusBarHeight.value = sysInfo.statusBarHeight || 44
+    statusBarHeight.value = systemInfo.statusBarHeight || 44
     // #endif
 })
 
 onLoad((options) => {
     const id = Number(options?.id || 0)
-    if (id > 0) {
-        postId.value = id
-        if (options?.show_ai === '1') {
-            const title = encodeURIComponent(String(options?.title || '帖子AI分析'))
-            uni.redirectTo({ url: `/pages/ai_analysis/ai_analysis?type=post&id=${id}&title=${title}` })
-            return
-        }
-        fetchDetail(id)
-        fetchComments()
-    } else {
+    if (id <= 0) {
         uni.showToast({ title: '参数错误', icon: 'none' })
-        setTimeout(() => uni.navigateBack(), 1500)
+        setTimeout(goBack, 1200)
+        return
     }
+
+    postId.value = id
+    if (options?.show_ai === '1') {
+        const title = encodeURIComponent(String(options?.title || '帖子AI分析'))
+        uni.redirectTo({ url: `/pages/ai_analysis/ai_analysis?type=post&id=${id}&title=${title}` })
+        return
+    }
+
+    void fetchDetail(id)
+    void fetchComments()
 })
 
-const fetchDetail = async (id: number) => {
-    loading.value = true
-    try {
-        const res = await getCommunityPostDetail({ id })
-        post.value = res
-        autoTranslateStarted.value = false
-        translatedText.value = res?.translated_content || ''
-        const tags = Array.isArray(res?.tags) ? res.tags : []
-        const isTrump = hasTag(tags, '特朗普')
-        const isLiuhe = hasAnyTag(tags, LIUHE_TAGS)
-        if (isTrump && res?.content && !translatedText.value) {
-            autoTranslateStarted.value = true
-            await requestTranslate()
-        }
-    } catch (e) {
-        uni.showToast({ title: '加载失败', icon: 'none' })
-    } finally {
-        loading.value = false
-    }
-}
-
-const fetchComments = async () => {
-    commentLoading.value = true
-    try {
-        const res = await getCommentLists({
-            post_id: postId.value,
-            page_no: commentPage.value,
-            page_size: 20
-        })
-        comments.value = res?.lists || []
-        commentTotal.value = res?.count || 0
-        // eslint-disable-next-line no-empty
-    } catch (e) {
-    } finally {
-        commentLoading.value = false
-    }
-}
-
 const submitComment = async () => {
     if (!checkLogin()) return
     const content = inputContent.value.trim()
     if (!content) return
 
     try {
-        const data: any = {
-            post_id: postId.value,
-            content
-        }
+        const data: any = { post_id: postId.value, content }
         if (replyTarget.value) {
             data.parent_id = replyTarget.value.id
             data.reply_user_id = replyTarget.value.user_id
@@ -427,101 +485,118 @@ const submitComment = async () => {
         await addComment(data)
         inputContent.value = ''
         replyTarget.value = null
+        await fetchComments()
+        if (post.value) post.value.comment_count = commentTotal.value
         uni.showToast({ title: '评论成功', icon: 'success' })
-        fetchComments()
-        if (post.value) {
-            post.value.comment_count = (post.value.comment_count || 0) + 1
-        }
-    } catch (e) {
+    } catch (_error) {
         uni.showToast({ title: '评论失败', icon: 'none' })
     }
 }
 
 const handleLike = async () => {
-    if (!checkLogin()) return
-    if (!post.value) return
+    if (!checkLogin() || !post.value || likePending.value) return
+    likePending.value = true
     try {
-        const res = await toggleLike({ target_id: postId.value, target_type: 1 })
-        post.value.is_liked = res?.is_liked
-        post.value.like_count += res?.is_liked ? 1 : -1
-    } catch (e) { }
-}
-
-const handleCommentLike = async (c: any) => {
-    if (!checkLogin()) return
-    try {
-        const res = await toggleLike({ target_id: c.id, target_type: 2 })
-        c.is_liked = res?.is_liked
-        c.like_count += res?.is_liked ? 1 : -1
-    } catch (e) { }
-}
-
-const handleFollow = async () => {
-    if (!checkLogin()) return
-    if (!post.value) return
-    try {
-        const res = await toggleFollow({ follow_user_id: post.value.user_id })
-        const followed = !!res?.is_followed
-        post.value.is_followed = followed
-        post.value.is_friend = followed
-        const relation = post.value.relationship || {}
-        relation.is_followed_by_me = followed
-        relation.is_mutual = followed && !!relation.is_following_me
-        relation.relationship_text = relation.is_mutual ? '互相关注' : '对方还未添加你为好友'
-        post.value.relationship = relation
-        uni.showToast({ title: followed ? '已加好友' : '已取消好友', icon: 'none' })
-    } catch (e) { }
-}
-
-const handlePrivateChat = async () => {
-    if (!checkLogin()) return
-    if (!post.value?.user_id) return
-    try {
-        const session = await openChat({ target_user_id: Number(post.value.user_id) })
-        if (session?.id) {
-            uni.navigateTo({ url: `/pages/private_chat/room?session_id=${session.id}` })
-        }
-    } catch (e) {
-        // 请求层会提示后端返回信息
+        const result = await toggleLike({ target_id: postId.value, target_type: 1 })
+        const liked = !!result?.is_liked
+        post.value.is_liked = liked
+        post.value.like_count = nextLikeCount(post.value.like_count, liked)
+    } finally {
+        likePending.value = false
     }
 }
 
-const goUserProfile = (userId: number) => {
-    if (!userId) return
-    uni.navigateTo({ url: `/packages_community/pages/user_profile?user_id=${userId}` })
-}
-
-const goBack = () => {
-    uni.navigateBack()
-}
-
-const handlePurchase = () => {
+const handleCommentLike = async (comment: any) => {
     if (!checkLogin()) return
-    if (purchasing.value) return
-    const price = post.value?.price_points || 0
+    const commentId = Number(comment?.id || 0)
+    if (!commentId || commentLikePending.value.has(commentId)) return
+
+    commentLikePending.value = new Set(commentLikePending.value).add(commentId)
+    try {
+        const result = await toggleLike({ target_id: commentId, target_type: 2 })
+        const liked = !!result?.is_liked
+        comment.is_liked = liked
+        comment.like_count = nextLikeCount(comment.like_count, liked)
+    } finally {
+        const pending = new Set(commentLikePending.value)
+        pending.delete(commentId)
+        commentLikePending.value = pending
+    }
+}
+
+const handleFollow = async () => {
+    if (!checkLogin() || !post.value) return
+    try {
+        const result = await toggleFollow({ follow_user_id: post.value.user_id })
+        const followed = !!result?.is_followed
+        post.value.is_followed = followed
+        post.value.is_friend = followed
+        const relationship = post.value.relationship || {}
+        relationship.is_followed_by_me = followed
+        relationship.is_mutual = followed && !!relationship.is_following_me
+        relationship.relationship_text = relationship.is_mutual ? '互相关注' : '对方还未关注你'
+        post.value.relationship = relationship
+        uni.showToast({ title: followed ? '关注成功' : '已取消关注', icon: 'none' })
+    } catch (_error) { }
+}
+
+const handlePrivateChat = async () => {
+    if (!checkLogin() || !post.value?.user_id) return
+    try {
+        const session = await openChat({ target_user_id: Number(post.value.user_id) })
+        if (session?.id) uni.navigateTo({ url: `/pages/private_chat/room?session_id=${session.id}` })
+    } catch (_error) { }
+}
+
+const applyUnlockedContent = async (result: any) => {
+    if (!post.value || !result?.content) return
+    post.value.content = result.content
+    post.value.is_locked = false
+    post.value.is_purchased = true
+    if (!result.from_cache) post.value.paid_count = Number(post.value.paid_count || 0) + 1
+    previewExpanded.value = true
+    await loadUserPoints()
+}
+
+const confirmUnlock = (cost: number) => new Promise<boolean>((resolve) => {
     uni.showModal({
         title: '确认解锁',
-        content: `确定使用 ${price} 积分解锁该内容吗？`,
+        content: `确定使用 ${cost} 积分解锁该内容吗？`,
         confirmText: '确认解锁',
-        confirmColor: '#185dff',
-        success: async (res) => {
-            if (!res.confirm) return
-            purchasing.value = true
-            try {
-                await purchasePost({ post_id: postId.value })
-                uni.showToast({ title: '解锁成功', icon: 'success' })
-                fetchDetail(postId.value)
-            } catch (e: any) {
-                // 框架已自动toast后端返回的msg（如"积分不足"），此处无需重复提示
-            } finally {
-                purchasing.value = false
-            }
-        }
+        confirmColor: '#1468f5',
+        success: (result) => resolve(!!result.confirm),
+        fail: () => resolve(false)
     })
+})
+
+const handlePurchase = async () => {
+    if (!checkLogin() || purchasing.value || !post.value) return
+    purchasing.value = true
+    try {
+        const probe = await purchasePost({ post_id: postId.value, confirm: 0 })
+        if (probe?.content) {
+            await applyUnlockedContent(probe)
+            return
+        }
+        if (!probe?.needs_payment) return
+
+        purchasing.value = false
+        const confirmed = await confirmUnlock(Number(probe.cost || post.value.price_points || 0))
+        if (!confirmed) return
+
+        purchasing.value = true
+        const paidResult = await purchasePost({ post_id: postId.value, confirm: 1 })
+        await applyUnlockedContent(paidResult)
+        uni.showToast({ title: '解锁成功', icon: 'success' })
+    } catch (_error) {
+        // 请求层统一展示后端错误信息
+    } finally {
+        purchasing.value = false
+    }
 }
 
-const openReply = (c: any) => {
-    replyTarget.value = c
+const openReply = (comment: any) => {
+    replyTarget.value = comment
 }
 
 const handleDeleteComment = (comment: any) => {
@@ -531,11 +606,11 @@ const handleDeleteComment = (comment: any) => {
         content: '确认删除这条评论？',
         confirmText: '删除',
         confirmColor: '#ee3835',
-        success: async (res) => {
-            if (!res.confirm) return
+        success: async (result) => {
+            if (!result.confirm) return
             try {
-                const result = await deleteComment({ comment_id: comment.id })
-                const deletedIds: number[] = result?.deleted_ids || [comment.id]
+                const response = await deleteComment({ comment_id: comment.id })
+                const deletedIds: number[] = response?.deleted_ids || [comment.id]
                 comments.value = comments.value.filter((item) => {
                     if (deletedIds.includes(item.id)) return false
                     if (Array.isArray(item.replies)) {
@@ -543,14 +618,10 @@ const handleDeleteComment = (comment: any) => {
                     }
                     return true
                 })
-                commentTotal.value = Math.max(0, Number(commentTotal.value || 0) - deletedIds.length)
-                if (post.value) {
-                    post.value.comment_count = Math.max(0, Number(post.value.comment_count || 0) - deletedIds.length)
-                }
+                commentTotal.value = Math.max(0, commentTotal.value - deletedIds.length)
+                if (post.value) post.value.comment_count = Math.max(0, Number(post.value.comment_count || 0) - deletedIds.length)
                 uni.showToast({ title: '删除成功', icon: 'success' })
-            } catch (_e) {
-                // 请求层已自动提示错误信息
-            }
+            } catch (_error) { }
         }
     })
 }
@@ -562,353 +633,382 @@ const handleDeletePost = () => {
         content: '确认删除这条帖子？删除后无法恢复。',
         confirmText: '删除',
         confirmColor: '#ee3835',
-        success: async (res) => {
-            if (!res.confirm) return
+        success: async (result) => {
+            if (!result.confirm) return
             try {
                 await deletePost({ post_id: postId.value })
                 uni.showToast({ title: '删除成功', icon: 'success' })
-                setTimeout(() => uni.navigateBack(), 1000)
-            } catch (_e) {
-                // 请求层已自动提示错误信息
-            }
+                setTimeout(goBack, 1000)
+            } catch (_error) { }
         }
     })
 }
 
 const showSharePopup = ref(false)
-
 const handleShare = () => {
-    if (!post.value) return
-    showSharePopup.value = true
+    if (post.value) showSharePopup.value = true
 }
 
-const previewImage = (idx: number) => {
+const previewImage = (index: number) => {
     if (!visibleImages.value.length) return
-    uni.previewImage({
-        current: idx,
-        urls: visibleImages.value
-    })
+    uni.previewImage({ current: index, urls: visibleImages.value })
 }
 
 const openSourceUrl = () => {
     if (!trumpSourceUrl.value) return
-    uni.navigateTo({
-        url: `/pages/webview/webview?url=${encodeURIComponent(trumpSourceUrl.value)}`
-    })
+    uni.navigateTo({ url: `/pages/webview/webview?url=${encodeURIComponent(trumpSourceUrl.value)}` })
 }
 
 const requestTranslate = async () => {
     if (!post.value?.id) return
     try {
-        const res = await translatePost({ post_id: post.value.id })
-        translatedText.value = res?.translated_content || ''
-    } catch (e) {
+        const result = await translatePost({ post_id: post.value.id })
+        translatedText.value = result?.translated_content || ''
+    } catch (_error) {
         translatedText.value = ''
     }
 }
 
 const handleAiAnalysisBtn = () => {
-    if (!checkLogin()) return
-    if (!isLiuhePost.value) return
+    if (!checkLogin() || !isLiuhePost.value) return
     const title = encodeURIComponent(pageTitle.value || '帖子AI分析')
     uni.navigateTo({ url: `/pages/ai_analysis/ai_analysis?type=post&id=${postId.value}&title=${title}` })
 }
 
-const formatTime = (ts: any) => {
-    if (!ts) return ''
-    let timestamp: number
-    if (typeof ts === 'string') {
-        timestamp = new Date(ts.replace(/-/g, '/')).getTime() / 1000
-    } else {
-        timestamp = ts
+const openPoints = () => {
+    if (!checkLogin()) return
+    uni.navigateTo({ url: '/packages/pages/points_log/points_log' })
+}
+
+const goUserProfile = (userId: number) => {
+    if (userId) uni.navigateTo({ url: `/packages_community/pages/user_profile?user_id=${userId}` })
+}
+
+const goBack = () => {
+    if (getCurrentPages().length > 1) {
+        uni.navigateBack()
+        return
     }
-    if (isNaN(timestamp)) return ''
-    const now = Date.now() / 1000
-    const diff = now - timestamp
+    uni.switchTab({ url: '/pages/community/community' })
+}
+
+const getCommentAvatar = (comment: any) => {
+    if (commentAvatarFallbacks.value[Number(comment?.id || 0)]) return defaultAvatar.value
+    return comment?.user?.avatar || defaultAvatar.value
+}
+
+const handleCommentAvatarError = (comment: any) => {
+    const commentId = Number(comment?.id || 0)
+    if (!commentId) return
+    commentAvatarFallbacks.value = { ...commentAvatarFallbacks.value, [commentId]: true }
+}
+
+const parseTimestamp = (value: any) => {
+    if (!value) return 0
+    if (typeof value === 'number') return value
+    const timestamp = new Date(String(value).replace(/-/g, '/')).getTime() / 1000
+    return Number.isFinite(timestamp) ? timestamp : 0
+}
+
+const padNumber = (value: number) => String(value).padStart(2, '0')
+
+const formatTime = (value: any) => {
+    const timestamp = parseTimestamp(value)
+    if (!timestamp) return ''
+    const diff = Date.now() / 1000 - timestamp
     if (diff < 60) return '刚刚'
-    if (diff < 3600) return Math.floor(diff / 60) + '分钟前'
-    if (diff < 86400) return Math.floor(diff / 3600) + '小时前'
-    if (diff < 2592000) return Math.floor(diff / 86400) + '天前'
-    const d = new Date(timestamp * 1000)
-    return `${d.getMonth() + 1}-${d.getDate()}`
+    if (diff < 3600) return `${Math.floor(diff / 60)}分钟前`
+    if (diff < 86400) return `${Math.floor(diff / 3600)}小时前`
+    if (diff < 604800) return `${Math.floor(diff / 86400)}天前`
+    const date = new Date(timestamp * 1000)
+    return `${date.getMonth() + 1}-${date.getDate()}`
+}
+
+const formatCommentTime = (value: any) => {
+    const timestamp = parseTimestamp(value)
+    if (!timestamp) return ''
+    const diff = Date.now() / 1000 - timestamp
+    if (diff < 60) return '刚刚'
+    if (diff < 3600) return `${Math.floor(diff / 60)}分钟前`
+    if (diff < 86400) return `${Math.floor(diff / 3600)}小时前`
+    const date = new Date(timestamp * 1000)
+    return `${date.getMonth() + 1}-${date.getDate()} ${padNumber(date.getHours())}:${padNumber(date.getMinutes())}`
 }
 </script>
 
 <style lang="scss" scoped>
 .detail-page {
     height: 100vh;
-    background: #fff;
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+    background: #f6f8fb;
+    color: #111111;
 }
 
 .detail-topbar {
-    background: #fff;
-    border-bottom: 1rpx solid #eef1f6;
     position: relative;
     z-index: 10;
     flex-shrink: 0;
+    background: rgba(255, 255, 255, 0.98);
+    border-bottom: 1rpx solid #edf0f4;
 
     &__nav {
-        height: 88rpx;
-        padding: 0 24rpx;
+        height: 96rpx;
+        padding: 0 28rpx;
         display: flex;
         align-items: center;
         justify-content: space-between;
-        gap: 12rpx;
     }
 
-    &__back,
-    &__placeholder {
-        width: 64rpx;
-        height: 64rpx;
-        flex-shrink: 0;
+    &__action {
+        width: 72rpx;
+        height: 72rpx;
         display: flex;
         align-items: center;
         justify-content: center;
-    }
+        border-radius: 20rpx;
 
-    &__back {
-        border-radius: 18rpx;
-        background: #f4f6fb;
-    }
-
-    &__title-wrap {
-        flex: 1;
-        min-width: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
+        &--back {
+            background: #f4f6fa;
+        }
     }
 
     &__title {
-        max-width: 100%;
-        font-size: 30rpx;
-        font-weight: 600;
-        color: #111827;
-        line-height: 1.25;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        text-align: center;
+        font-size: 34rpx;
+        line-height: 1;
+        font-weight: 700;
+        color: #0b0b0c;
     }
 }
 
 .detail-scroll {
     flex: 1;
     min-height: 0;
-    background: #fff;
 }
 
-.detail-loading {
-    display: flex;
-    justify-content: center;
-    padding: 120rpx 0;
-}
-
-.detail-content {
-    background: #fff;
-}
-
-.detail-header-area {
-    margin: 0 24rpx;
-    padding: 22rpx 28rpx 20rpx;
-    border-radius: 20rpx;
-    background: #fff;
-    border: 1rpx solid #eef1f6;
-    box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.04);
-
-    &__top {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 16rpx;
-        margin-bottom: 18rpx;
-    }
-
-    &__label {
-        font-size: 22rpx;
-        color: #185dff;
-        font-weight: 600;
-    }
-
-    &__hint {
-        font-size: 22rpx;
-        color: #98a2b3;
-    }
-}
-
-.detail-header {
+.detail-loading,
+.detail-error {
+    min-height: 560rpx;
+    padding: 120rpx 48rpx;
     display: flex;
+    flex-direction: column;
     align-items: center;
-    padding: 28rpx 32rpx 0;
+    justify-content: center;
+    gap: 20rpx;
+    color: #87909f;
+    font-size: 26rpx;
+}
 
-    &--hero {
-        padding: 0;
-    }
-
-    &--panel {
-        padding: 0;
-    }
-
-    &__avatar {
+.detail-error {
+    &__icon {
         width: 84rpx;
         height: 84rpx;
-        border-radius: 12rpx;
-        flex-shrink: 0;
-    }
-
-    &__info {
-        flex: 1;
-        margin-left: 20rpx;
         display: flex;
-        flex-direction: column;
-        min-width: 0;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        background: #eaf1ff;
+        color: #1468f5;
+        font-size: 42rpx;
+        font-weight: 700;
     }
 
-    &__name {
-        font-size: 28rpx;
-        font-weight: 600;
-        color: #000;
+    &__title {
+        color: #1b2430;
+        font-size: 32rpx;
+        font-weight: 700;
     }
 
-    &__time {
-        font-size: 24rpx;
-        color: #666;
-        margin-top: 4rpx;
+    &__desc {
+        color: #87909f;
+        font-size: 25rpx;
     }
 
     &__actions {
+        margin-top: 10rpx;
+        display: flex;
+        gap: 18rpx;
+    }
+
+    &__btn {
+        min-width: 156rpx;
+        height: 68rpx;
+        padding: 0 26rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1rpx solid #dbe1ea;
+        border-radius: 999rpx;
+        color: #586273;
+        background: #ffffff;
+
+        &--primary {
+            color: #ffffff;
+            border-color: #1468f5;
+            background: #1468f5;
+        }
+    }
+}
+
+.detail-main {
+    padding: 24rpx 22rpx 36rpx;
+}
+
+.detail-post-card {
+    padding: 30rpx 30rpx 28rpx;
+    border: 1rpx solid #e4e8ef;
+    border-radius: 24rpx;
+    background: #ffffff;
+    box-shadow: 0 12rpx 30rpx rgba(18, 37, 63, 0.045);
+
+    &__author {
+        display: flex;
+        align-items: center;
+        gap: 18rpx;
+    }
+
+    &__avatar {
+        width: 92rpx;
+        height: 92rpx;
+        flex-shrink: 0;
+        border-radius: 50%;
+        background: #edf3ff;
+    }
+
+    &__author-info {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 6rpx;
+    }
+
+    &__name {
+        overflow: hidden;
+        color: #111111;
+        font-size: 30rpx;
+        font-weight: 650;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    &__date {
+        color: #707784;
+        font-size: 24rpx;
+    }
+
+    &__author-actions {
         flex-shrink: 0;
         display: flex;
         align-items: center;
-        gap: 12rpx;
+        gap: 10rpx;
     }
 
     &__follow,
     &__chat {
-        padding: 8rpx 24rpx;
-        border-radius: 12rpx;
-        font-size: 24rpx;
+        height: 64rpx;
+        padding: 0 27rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 999rpx;
+        font-size: 25rpx;
         white-space: nowrap;
-
-        text {
-            color: #fff;
-        }
     }
 
     &__follow {
-        background: #185dff;
+        border: 2rpx solid #1468f5;
+        color: #1468f5;
+        background: #ffffff;
 
-        &--active {
-            background: #e5edff;
-
-            text {
-                color: #185dff;
-            }
+        &.is-active {
+            background: #eaf2ff;
         }
     }
 
     &__chat {
-        background: #111827;
+        padding: 0 20rpx;
+        color: #4f5d73;
+        background: #f1f4f8;
     }
-}
 
-.detail-body {
-    padding: 24rpx 32rpx;
+    &__paid-badge {
+        width: auto;
+        margin-top: 28rpx;
+        padding: 8rpx 14rpx;
+        display: inline-flex;
+        align-items: center;
+        gap: 8rpx;
+        border-radius: 8rpx;
+        color: #1468f5;
+        background: #e8f1ff;
+        font-size: 23rpx;
+        font-weight: 600;
+    }
 
-    &__line {
-        margin-bottom: 18rpx;
+    &__title {
+        display: block;
+        margin-top: 20rpx;
+        color: #090a0d;
+        font-size: 36rpx;
+        font-weight: 750;
+        line-height: 1.42;
+        word-break: break-word;
+    }
 
-        &:last-child {
-            margin-bottom: 0;
+    &__summary-wrap {
+        position: relative;
+        margin-top: 14rpx;
+    }
+
+    &__summary {
+        color: #30333a;
+        font-size: 29rpx;
+        line-height: 1.82;
+        white-space: pre-wrap;
+        word-break: break-word;
+
+        &--collapsed {
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 3;
         }
     }
 
-    &__text {
-        display: block;
-        font-size: 28rpx;
-        color: #000;
-        line-height: 1.8;
-        word-break: break-word;
+    &__expand {
+        margin-left: 10rpx;
+        color: #1468f5;
+        font-size: 27rpx;
+        white-space: nowrap;
     }
 
-    &__translate {
-        display: block;
-        padding-left: 4rpx;
-        font-size: 26rpx;
-        color: #3f4a5a;
-        line-height: 1.8;
-        word-break: break-word;
-        white-space: pre-wrap;
+    &__translation {
+        margin-top: 22rpx;
+        padding: 20rpx 22rpx;
+        display: flex;
+        flex-direction: column;
+        gap: 12rpx;
+        border-radius: 14rpx;
+        background: #f6f8fc;
+    }
+
+    &__translation-label {
+        color: #1468f5;
+        font-size: 23rpx;
+        font-weight: 700;
+    }
+
+    &__translation-text {
+        color: #465164;
+        font-size: 27rpx;
+        line-height: 1.72;
     }
 }
 
 .detail-images {
-    padding: 0 32rpx 24rpx;
-
-    &__external {
-        display: flex;
-        align-items: center;
-        gap: 20rpx;
-        padding: 28rpx 24rpx;
-        border-radius: 16rpx;
-        background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
-        margin-bottom: 16rpx;
-    }
-
-    &__external-icon {
-        width: 88rpx;
-        height: 88rpx;
-        border-radius: 24rpx;
-        background: rgba(255, 255, 255, 0.12);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-
-        text {
-            font-size: 44rpx;
-            color: #fff;
-            font-weight: 700;
-        }
-    }
-
-    &__external-body {
-        flex: 1;
-        min-width: 0;
-        display: flex;
-        flex-direction: column;
-        gap: 8rpx;
-    }
-
-    &__external-title {
-        font-size: 28rpx;
-        color: #fff;
-        font-weight: 600;
-    }
-
-    &__external-desc {
-        font-size: 24rpx;
-        color: rgba(255, 255, 255, 0.72);
-    }
-
-    &__external-btn {
-        height: 64rpx;
-        padding: 0 24rpx;
-        border-radius: 999rpx;
-        background: #185dff;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-
-        text {
-            font-size: 24rpx;
-            color: #fff;
-            font-weight: 600;
-        }
-    }
+    margin-top: 24rpx;
 
     &__grid {
         display: flex;
@@ -917,324 +1017,450 @@ const formatTime = (ts: any) => {
     }
 
     &__item {
-        width: calc(33.33% - 8rpx);
-        height: 220rpx;
-        border-radius: 12rpx;
+        width: calc(33.333% - 8rpx);
+        height: 202rpx;
+        border-radius: 14rpx;
+        background: #f0f2f5;
+    }
+
+    &__external {
+        padding: 22rpx;
+        display: flex;
+        align-items: center;
+        gap: 16rpx;
+        border-radius: 16rpx;
+        background: linear-gradient(135deg, #172033 0%, #27334a 100%);
+    }
+
+    &__external-icon {
+        width: 70rpx;
+        height: 70rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        border-radius: 20rpx;
+        color: #ffffff;
+        background: rgba(255, 255, 255, 0.12);
+        font-size: 34rpx;
+        font-weight: 700;
+    }
+
+    &__external-body {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 5rpx;
+    }
+
+    &__external-title {
+        color: #ffffff;
+        font-size: 26rpx;
+        font-weight: 650;
+    }
+
+    &__external-desc {
+        color: rgba(255, 255, 255, 0.66);
+        font-size: 22rpx;
+    }
+
+    &__external-btn {
+        padding: 12rpx 18rpx;
+        flex-shrink: 0;
+        border-radius: 999rpx;
+        color: #ffffff;
+        background: #1468f5;
+        font-size: 22rpx;
     }
 }
 
 .detail-tags {
+    margin-top: 20rpx;
     display: flex;
     flex-wrap: wrap;
     gap: 10rpx;
-    padding: 0 32rpx 24rpx;
 
     &__item {
+        padding: 5rpx 13rpx;
+        border-radius: 8rpx;
+        color: #1468f5;
+        background: #eaf2ff;
         font-size: 22rpx;
-        color: #185dff;
-        background: #e5edff;
-        padding: 4rpx 12rpx;
-        border-radius: 6rpx;
     }
 }
 
-.detail-ai {
-    margin: 0 32rpx 24rpx;
-    background: #f8faff;
-    border-radius: 16rpx;
-    padding: 24rpx;
-    border: 2rpx solid #e5edff;
+.detail-unlock-card {
+    margin-top: 20rpx;
+    padding: 36rpx 28rpx 24rpx;
+    border: 1rpx solid #c9ddff;
+    border-radius: 24rpx;
+    background: linear-gradient(135deg, #f1f7ff 0%, #e8f2ff 56%, #f7fbff 100%);
+    overflow: hidden;
+
+    &__main {
+        display: flex;
+        align-items: center;
+        gap: 20rpx;
+    }
+
+    &__visual {
+        position: relative;
+        width: 188rpx;
+        height: 188rpx;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &__ring {
+        position: absolute;
+        border-radius: 50%;
+        border: 1rpx solid rgba(20, 104, 245, 0.12);
+
+        &--outer {
+            width: 184rpx;
+            height: 184rpx;
+        }
+
+        &--inner {
+            width: 136rpx;
+            height: 136rpx;
+            background: rgba(20, 104, 245, 0.08);
+        }
+    }
+
+    &__lock {
+        position: relative;
+        z-index: 1;
+        width: 90rpx;
+        height: 90rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.72);
+        box-shadow: 0 10rpx 30rpx rgba(20, 104, 245, 0.12);
+    }
+
+    &__content {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    &__title {
+        color: #10131a;
+        font-size: 36rpx;
+        font-weight: 760;
+    }
+
+    &__points {
+        margin-top: 15rpx;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        color: #39414f;
+        font-size: 25rpx;
+        line-height: 1.6;
+
+        .is-primary {
+            color: #1468f5;
+            font-size: 30rpx;
+        }
+    }
+
+    &__dot {
+        margin: 0 12rpx;
+        color: #7c8798;
+    }
+
+    &__link {
+        margin-top: 9rpx;
+        color: #1468f5;
+        font-size: 25rpx;
+    }
+
+    &__btn {
+        width: 100%;
+        height: 78rpx;
+        margin-top: 18rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 999rpx;
+        color: #ffffff;
+        background: linear-gradient(90deg, #176bf4 0%, #0b79f5 100%);
+        box-shadow: 0 12rpx 24rpx rgba(20, 104, 245, 0.2);
+        font-size: 29rpx;
+        font-weight: 650;
+
+        &.is-disabled {
+            opacity: 0.58;
+        }
+    }
+
+    &__notice {
+        margin-top: 22rpx;
+        padding-top: 18rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 9rpx;
+        border-top: 1rpx solid rgba(105, 135, 181, 0.15);
+        color: #7c8798;
+        font-size: 22rpx;
+        text-align: center;
+    }
+}
+
+.detail-tools {
+    margin-top: 16rpx;
+    display: flex;
+    justify-content: flex-end;
+    gap: 12rpx;
+
+    &__item {
+        padding: 11rpx 20rpx;
+        border-radius: 999rpx;
+        color: #1468f5;
+        background: #eaf2ff;
+        font-size: 23rpx;
+
+        &--danger {
+            color: #e54242;
+            background: #fff0f0;
+        }
+    }
+}
+
+.detail-interaction {
+    margin-top: 20rpx;
+    padding: 25rpx 24rpx;
+    border: 1rpx solid #e8ebf0;
+    border-radius: 20rpx;
+    background: #ffffff;
 
     &__header {
         display: flex;
         align-items: center;
-        gap: 10rpx;
-        margin-bottom: 16rpx;
-    }
-
-    &__icon {
-        font-size: 32rpx;
+        justify-content: space-between;
+        gap: 20rpx;
     }
 
     &__title {
-        font-size: 28rpx;
-        font-weight: 600;
-        color: #185dff;
+        color: #111111;
+        font-size: 31rpx;
+        font-weight: 720;
     }
 
-    &__cursor {
-        font-size: 28rpx;
-        color: #185dff;
-        animation: detailAiCursorBlink 0.8s step-end infinite;
+    &__stats {
+        display: flex;
+        align-items: center;
+        gap: 36rpx;
     }
 
-    &__body {
-        line-height: 1.8;
-    }
-
-    &__text {
-        font-size: 26rpx;
-        color: #333;
-        word-break: break-word;
-        white-space: pre-wrap;
-    }
-}
-
-.detail-stats {
-    display: flex;
-    align-items: center;
-    gap: 48rpx;
-    padding: 20rpx 32rpx;
-    border-top: 1rpx solid #f5f5f5;
-    border-bottom: 1rpx solid #f5f5f5;
-
-    &__item {
+    &__stat {
         display: flex;
         align-items: center;
         gap: 8rpx;
-        font-size: 24rpx;
-        color: #262626;
+        color: #737373;
+        font-size: 25rpx;
 
-        &--delete {
-            color: #ff4d4f;
-            font-weight: 500;
+        .is-active {
+            color: #1468f5;
         }
     }
-
-    &__active {
-        color: #185dff;
-    }
-
-    &__ai {
-        font-size: 24rpx;
-        color: #185dff;
-    }
-}
-
-.detail-divider {
-    height: 16rpx;
-    background: #f5f5f5;
 }
 
 .detail-comments {
-    background: #fff;
-    padding: 24rpx 32rpx 48rpx;
+    margin-top: 16rpx;
+    padding: 26rpx 24rpx 34rpx;
+    border: 1rpx solid #e8ebf0;
+    border-radius: 20rpx;
+    background: #ffffff;
 
     &__title {
-        font-size: 30rpx;
-        font-weight: 600;
-        color: #333;
-        margin-bottom: 24rpx;
+        padding-bottom: 20rpx;
+        border-bottom: 1rpx solid #edf0f4;
+        color: #191b20;
+        font-size: 31rpx;
+        font-weight: 720;
     }
 
-    &__empty {
-        text-align: center;
-        padding: 60rpx 0;
-        font-size: 26rpx;
-        color: #999;
+    &__empty,
+    &__error {
+        padding: 70rpx 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 16rpx;
+        color: #9aa1ac;
+        font-size: 25rpx;
+    }
+
+    &__retry {
+        color: #1468f5;
     }
 
     &__loading {
+        padding: 26rpx 0;
         display: flex;
         justify-content: center;
-        padding: 24rpx 0;
     }
 }
 
 .comment-item {
+    padding: 26rpx 0;
     display: flex;
-    padding: 20rpx 0;
-    border-bottom: 1rpx solid #f5f5f5;
+    gap: 18rpx;
+    border-bottom: 1rpx solid #edf0f4;
 
-    &:last-child {
-        border-bottom: none;
+    &:last-of-type {
+        border-bottom: 0;
     }
 
     &__avatar {
-        width: 64rpx;
-        height: 64rpx;
-        border-radius: 50%;
+        width: 68rpx;
+        height: 68rpx;
         flex-shrink: 0;
+        border-radius: 50%;
+        background: #edf2f8;
     }
 
     &__body {
         flex: 1;
-        margin-left: 16rpx;
+        min-width: 0;
+    }
+
+    &__heading {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 14rpx;
     }
 
     &__name {
-        font-size: 26rpx;
-        font-weight: 600;
-        color: #333;
-        display: block;
-        margin-bottom: 8rpx;
+        color: #22252b;
+        font-size: 27rpx;
+        font-weight: 680;
+    }
+
+    &__more {
+        width: 46rpx;
+        height: 46rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #818894;
+        font-size: 34rpx;
     }
 
     &__text {
-        font-size: 28rpx;
-        color: #333;
-        line-height: 1.6;
         display: block;
+        margin-top: 9rpx;
+        color: #2f333a;
+        font-size: 28rpx;
+        line-height: 1.65;
+        word-break: break-word;
     }
 
     &__meta {
+        margin-top: 12rpx;
         display: flex;
         align-items: center;
-        gap: 32rpx;
-        margin-top: 12rpx;
+        gap: 28rpx;
     }
 
-    &__time {
+    &__time,
+    &__like,
+    &__reply-btn {
+        color: #9299a4;
         font-size: 22rpx;
-        color: #999;
     }
 
     &__like {
         display: flex;
         align-items: center;
         gap: 6rpx;
-        font-size: 22rpx;
-        color: #999;
+
+        .is-active {
+            color: #1468f5;
+        }
     }
 
     &__reply-btn {
-        font-size: 22rpx;
-        color: #2979ff;
-    }
-
-    &__delete-btn {
-        font-size: 22rpx;
-        color: #ee3835;
+        color: #1468f5;
     }
 }
 
 .comment-replies {
     margin-top: 16rpx;
-    padding: 16rpx;
-    background: #f8f8f8;
-    border-radius: 8rpx;
+    padding: 15rpx 17rpx;
+    border-radius: 12rpx;
+    background: #f6f8fb;
 
     &__more {
-        font-size: 22rpx;
-        color: #2979ff;
         display: block;
-        margin-top: 12rpx;
+        margin-top: 9rpx;
+        color: #8b94a2;
+        font-size: 21rpx;
     }
 }
 
 .comment-reply {
+    color: #3b414b;
     font-size: 24rpx;
-    color: #333;
-    line-height: 1.8;
+    line-height: 1.75;
 
     &__name {
-        color: #2979ff;
-        font-weight: 500;
+        color: #1468f5;
+        font-weight: 600;
     }
 
     &__arrow {
-        color: #999;
+        color: #8b94a2;
     }
 
-    &__text {
-        color: #333;
-    }
-
-    &__delete-btn {
-        color: #ee3835;
-    }
-}
-
-.detail-unlock-card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 24rpx;
-    margin: 0 32rpx 24rpx;
-    padding: 32rpx 28rpx;
-    height: 330rpx;
-    background: #e5edff;
-    border-radius: 12rpx;
-
-    &__text {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 8rpx;
-    }
-
-    &__price {
-        font-size: 28rpx;
-        color: #185dff;
-        font-weight: 500;
-    }
-
-    &__count {
-        font-size: 24rpx;
-        color: #185dff;
-        opacity: 0.5;
-    }
-
-    &__btn {
-        height: 76rpx;
-        padding: 0 40rpx;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: #185dff;
-        border-radius: 64rpx;
-        white-space: nowrap;
-
-        text {
-            font-size: 28rpx;
-            color: #fff;
-        }
-
-        &--disabled {
-            opacity: 0.6;
-        }
+    &__delete {
+        color: #e54242;
     }
 }
 
 .detail-input-bar {
+    flex-shrink: 0;
+    padding: 16rpx 22rpx;
+    padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx);
     display: flex;
     align-items: center;
-    padding: 16rpx 24rpx;
-    padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx);
-    background: #fff;
-    border-top: 1rpx solid #f0f0f0;
     gap: 16rpx;
-    flex-shrink: 0;
+    border-top: 1rpx solid #e9edf2;
+    background: rgba(255, 255, 255, 0.98);
+    box-shadow: 0 -10rpx 28rpx rgba(30, 42, 58, 0.04);
 
     &__input {
         flex: 1;
-        height: 68rpx;
-        background: #f5f5f5;
-        border-radius: 34rpx;
+        height: 72rpx;
         padding: 0 28rpx;
-        font-size: 28rpx;
+        border-radius: 999rpx;
+        color: #262a31;
+        background: #f3f5f7;
+        font-size: 27rpx;
     }
 
     &__btn {
-        padding: 10rpx 28rpx;
-        background: #185dff;
-        color: #fff;
-        border-radius: 34rpx;
+        min-width: 116rpx;
+        height: 72rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 999rpx;
+        color: #ffffff;
+        background: linear-gradient(90deg, #176bf4 0%, #0b79f5 100%);
         font-size: 28rpx;
-        flex-shrink: 0;
-    }
-}
-
-@keyframes detailAiCursorBlink {
-
-    0%,
-    100% {
-        opacity: 1;
-    }
-
-    50% {
-        opacity: 0;
     }
 }
 </style>