# 社区帖子双语短语配对设计 ## 背景 社区帖子详情当前将原文完整显示后,再用独立灰色卡片集中显示译文。对于特朗普等英文来源帖子,读者需要在两块长文本之间来回查找,无法像文章详情页一样快速对照。 ## 目标 - 有译文的帖子采用“一段原文短语紧跟一段译文短语”的纵向双语阅读方式。 - 参考 `uniapp/src/pages/news_detail/news_detail.vue` 的顺序配对逻辑,并把分割粒度细化到逗号、分号、句号、感叹号和问号。 - 双语帖子不再把正文前 42 个字符自动截成标题,避免产生并不存在的标题。 - 原文或译文短语数量不一致时,自动合并相邻短片段并且不丢失任何内容。 - 付费特朗普帖子解锁后若尚无译文,异步触发现有翻译接口,无需刷新页面。 - 无译文帖子、付费锁定、图片、标签、互动和评论逻辑保持不变。 ## 方案比较 ### 方案 A:标点短语上下交错(采用) 中英文分别按逗号、分号、句号、感叹号和问号切成短语,每组先显示原文,再显示对应译文。移动端单列阅读自然,长句也能快速对照。 ### 方案 B:严格索引配对并允许空侧 直接使用较大短语数量创建配对,数量不一致时会出现只有原文或只有译文的行,无法满足一对一阅读。 ### 方案 C:后端返回结构化配对译文 翻译阶段直接返回原文/译文数组,语义对齐最准确,但需要修改翻译接口、缓存格式并重新生成历史译文,超出本次前端优化范围。 ## 数据与配对规则 1. 将原文和译文统一换行符并清理空行。 2. 先保留人工换行的顺序,再按 `, , ; ; 。 . ! ! ? ?` 拆成带原标点的短语。 3. 英文缩写、姓名首字母和小数中的句点不分割;数字内部的千分位逗号不分割。 4. 两侧短语数量相同时直接按索引配对。 5. 数量不一致时,在片段较多的一侧反复选择正文长度最短的片段,与相邻片段合并,直到两侧数量一致。 6. 逗号或分号结尾的短片段优先和下一段合并;其它短片段优先并入上一段,首段只能向后合并。 7. 合并英文片段时自动补回单个空格;中文片段直接相连,所有原始标点保留。 8. 译文为空时继续使用原来的标题、摘要展示,不进入双语模式。 ## 视觉结构 - 双语正文替代原来的标题、摘要和独立译文卡。 - 每个配对组之间保留明显但克制的垂直间距。 - 原文使用正文主色和较高字重;译文使用较弱的蓝灰色,字号略小。 - 不重复显示“原文/译文”标签,依靠固定顺序和颜色层级降低视觉噪音。 - 展开/收起控制整个双语正文,避免原文和译文显示范围不一致。 ## 边界情况 - 翻译接口返回空文本:按普通帖子展示。 - 原文或译文只有一段:仍形成一个配对组。 - 短语数量不一致:相邻短片段合并到数量一致后再配对,不产生空侧内容。 - 付费内容锁定:沿用后端返回的可见内容范围,不在前端拼接隐藏内容。 - 付费内容解锁:先展示完整原文,再异步获取译文并切换为短语配对,不阻塞解锁成功提示。 ## 改动范围 - 修改 `uniapp/src/packages_community/pages/post_detail.vue`。 - 不修改 API、后端翻译接口、数据库和页面路由。