diff --git a/docs/superpowers/specs/2026-08-02-community-post-bilingual-pairing-design.md b/docs/superpowers/specs/2026-08-02-community-post-bilingual-pairing-design.md new file mode 100644 index 0000000..9794657 --- /dev/null +++ b/docs/superpowers/specs/2026-08-02-community-post-bilingual-pairing-design.md @@ -0,0 +1,56 @@ +# 社区帖子双语逐句配对设计 + +## 背景 + +社区帖子详情当前将原文完整显示后,再用独立灰色卡片集中显示译文。对于特朗普等英文来源帖子,读者需要在两块长文本之间来回查找,无法像文章详情页一样快速对照。 + +## 目标 + +- 有译文的帖子采用“一句原文紧跟一句译文”的纵向双语阅读方式。 +- 参考 `uniapp/src/pages/news_detail/news_detail.vue` 的句子拆分与按序配对逻辑。 +- 双语帖子不再把正文前 42 个字符自动截成标题,避免产生并不存在的标题。 +- 原文或译文句数不一致时不丢失任何内容。 +- 无译文帖子、付费锁定、图片、标签、互动和评论逻辑保持不变。 + +## 方案比较 + +### 方案 A:逐句上下交错(采用) + +每组先显示原文,再显示对应译文。移动端单列阅读自然,和文章详情现有交互一致,长文本对照成本最低。 + +### 方案 B:整段原文后显示整段译文 + +实现简单,但就是当前问题,长内容需要频繁上下跳转。 + +### 方案 C:左右双栏 + +桌面端对照直观,但手机宽度不足,英文和中文都会产生大量换行,不适合 uni-app 主要使用场景。 + +## 数据与配对规则 + +1. 将原文和译文统一换行符并清理空行。 +2. 有人工换行时优先按人工行拆分;只有一行时,按中英文句末标点拆分。 +3. 使用两个拆分结果的最大长度创建配对数组。 +4. 同一索引的原文和译文组成一组;缺少一侧时只显示存在的内容。 +5. 译文为空时继续使用原来的标题、摘要展示,不进入双语模式。 + +## 视觉结构 + +- 双语正文替代原来的标题、摘要和独立译文卡。 +- 每个配对组之间保留明显但克制的垂直间距。 +- 原文使用正文主色和较高字重;译文使用较弱的蓝灰色,字号略小。 +- 不重复显示“原文/译文”标签,依靠固定顺序和颜色层级降低视觉噪音。 +- 展开/收起控制整个双语正文,避免原文和译文显示范围不一致。 + +## 边界情况 + +- 翻译接口返回空文本:按普通帖子展示。 +- 原文或译文只有一段:仍形成一个配对组。 +- 句数不一致:尾部未配对句子继续显示。 +- 付费内容锁定:沿用后端返回的可见内容范围,不在前端拼接隐藏内容。 + +## 改动范围 + +- 修改 `uniapp/src/packages_community/pages/post_detail.vue`。 +- 不修改 API、后端翻译接口、数据库和页面路由。 +