215 lines
9.2 KiB
Markdown
215 lines
9.2 KiB
Markdown
# Community Post Bilingual Phrase Pairing 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:** Split community post originals and translations at comma, semicolon, period, exclamation, and question punctuation, then render exact one-to-one groups by merging adjacent short fragments when counts differ.
|
||
|
||
**Architecture:** Keep the implementation local to `post_detail.vue`. Replace sentence-only splitting with punctuation phrase splitting, protect numeric and English abbreviation punctuation, normalize both sides to the same count with a deterministic shortest-fragment merge, and reuse the existing bilingual rendering computed property.
|
||
|
||
**Tech Stack:** uni-app, Vue 3 `<script setup>`, TypeScript
|
||
|
||
---
|
||
|
||
### Task 1: Split text into protected punctuation phrases
|
||
|
||
**Files:**
|
||
- Modify: `uniapp/src/packages_community/pages/post_detail.vue:350-402`
|
||
|
||
- [ ] **Step 1: Add delimiter protection and phrase splitting**
|
||
|
||
Replace `splitSentenceLine` with the following helpers. The delimiter set includes Chinese and English comma, semicolon, period, exclamation, and question punctuation. `shouldKeepEnglishPeriod` remains unchanged.
|
||
|
||
```ts
|
||
const isPhraseDelimiter = (character: string) =>
|
||
/[，,；;。！？!?]/.test(character) || character === '.'
|
||
|
||
const shouldKeepPhraseDelimiter = (text: string, index: number, character: string) => {
|
||
if (character === '.' && shouldKeepEnglishPeriod(text, index)) return true
|
||
|
||
const previous = text[index - 1] || ''
|
||
const next = text[index + 1] || ''
|
||
return /[，,]/.test(character) && /\d/.test(previous) && /\d/.test(next)
|
||
}
|
||
|
||
const splitPhraseLine = (text: string) => {
|
||
const phrases: string[] = []
|
||
let start = 0
|
||
|
||
for (let index = 0; index < text.length; index += 1) {
|
||
const character = text[index]
|
||
if (!isPhraseDelimiter(character) || shouldKeepPhraseDelimiter(text, index, character)) continue
|
||
|
||
let end = index + 1
|
||
while (end < text.length && isPhraseDelimiter(text[end])) end += 1
|
||
while (end < text.length && /[”’"'）)】\]]/.test(text[end])) end += 1
|
||
|
||
const phrase = text.slice(start, end).trim()
|
||
if (phrase) phrases.push(phrase)
|
||
start = end
|
||
index = end - 1
|
||
}
|
||
|
||
const tail = text.slice(start).trim()
|
||
if (tail) phrases.push(tail)
|
||
return phrases
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 2: Rename the content splitter and preserve manual-line order**
|
||
|
||
Replace `splitContentLines` with this function and update the original/translation computed properties to use it.
|
||
|
||
```ts
|
||
const splitContentSegments = (value: unknown) => {
|
||
const normalized = String(value || '')
|
||
.replace(/\r\n/g, '\n')
|
||
.replace(/\r/g, '\n')
|
||
.trim()
|
||
if (!normalized) return []
|
||
|
||
const manualLines = normalized
|
||
.split('\n')
|
||
.map((line) => line.replace(/\s+/g, ' ').trim())
|
||
.filter(Boolean)
|
||
|
||
const segments = manualLines.flatMap((line) => splitPhraseLine(line))
|
||
return segments.length ? segments : [normalized]
|
||
}
|
||
|
||
const originalSegments = computed(() => splitContentSegments(post.value?.content))
|
||
const translatedSegments = computed(() => splitContentSegments(translatedText.value))
|
||
```
|
||
|
||
### Task 2: Normalize both sides to an exact one-to-one count
|
||
|
||
**Files:**
|
||
- Modify: `uniapp/src/packages_community/pages/post_detail.vue:402-424`
|
||
|
||
- [ ] **Step 1: Add deterministic adjacent-fragment merging**
|
||
|
||
Add helpers that identify the shortest body fragment, preserve punctuation, restore spacing between English fragments, and prefer forward merging for comma/semicolon clauses.
|
||
|
||
```ts
|
||
const getSegmentBodyLength = (segment: string) =>
|
||
segment.replace(/[，,；;。！？.!?]/g, '').replace(/\s+/g, '').length
|
||
|
||
const joinSegments = (left: string, right: string) => {
|
||
const normalizedLeft = left.trim()
|
||
const normalizedRight = right.trim()
|
||
const leftBodyEnd = normalizedLeft
|
||
.replace(/[”’"'）)】\]]+$/g, '')
|
||
.replace(/[，,；;。！？.!?]+$/g, '')
|
||
const needsSpace = /[A-Za-z0-9]$/.test(leftBodyEnd) && /^[A-Za-z0-9]/.test(normalizedRight)
|
||
return `${normalizedLeft}${needsSpace ? ' ' : ''}${normalizedRight}`
|
||
}
|
||
|
||
const mergeSegmentsToCount = (segments: string[], targetCount: number) => {
|
||
const merged = segments.filter(Boolean).slice()
|
||
if (targetCount <= 0) return []
|
||
|
||
while (merged.length > targetCount) {
|
||
let shortestIndex = 0
|
||
for (let index = 1; index < merged.length; index += 1) {
|
||
if (getSegmentBodyLength(merged[index]) < getSegmentBodyLength(merged[shortestIndex])) {
|
||
shortestIndex = index
|
||
}
|
||
}
|
||
|
||
const ending = merged[shortestIndex].replace(/[”’"'）)】\]]+$/g, '').slice(-1)
|
||
const mergeForward = shortestIndex === 0
|
||
|| (shortestIndex < merged.length - 1 && /[，,；;]/.test(ending))
|
||
|
||
if (mergeForward) {
|
||
merged.splice(shortestIndex, 2, joinSegments(merged[shortestIndex], merged[shortestIndex + 1]))
|
||
} else {
|
||
merged.splice(shortestIndex - 1, 2, joinSegments(merged[shortestIndex - 1], merged[shortestIndex]))
|
||
}
|
||
}
|
||
|
||
return merged
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 2: Replace max-length pairing with equal-count pairing**
|
||
|
||
Replace `bilingualBlocks` and update `hasBilingualContent`. The shorter side defines the final number of groups; only the longer side is merged down, so every rendered group contains both values.
|
||
|
||
```ts
|
||
const bilingualBlocks = computed(() => {
|
||
const pairCount = Math.min(originalSegments.value.length, translatedSegments.value.length)
|
||
if (!pairCount) return []
|
||
|
||
const alignedOriginal = mergeSegmentsToCount(originalSegments.value, pairCount)
|
||
const alignedTranslation = mergeSegmentsToCount(translatedSegments.value, pairCount)
|
||
return Array.from({ length: pairCount }, (_, index) => ({
|
||
original: alignedOriginal[index],
|
||
translated: alignedTranslation[index]
|
||
}))
|
||
})
|
||
const hasBilingualContent = computed(() => bilingualBlocks.value.length > 0)
|
||
```
|
||
|
||
Keep `previewCanExpand` and `visibleBilingualBlocks` unchanged because they already operate on complete bilingual groups.
|
||
|
||
### Task 3: Synchronize project records and review the change
|
||
|
||
**Files:**
|
||
- Modify: `docs/业务进度管理.md`
|
||
- Modify: `docs/设计稿映射.md`
|
||
- Review: `uniapp/src/packages_community/pages/post_detail.vue`
|
||
|
||
- [ ] **Step 1: Update the existing community post detail records**
|
||
|
||
In `docs/业务进度管理.md`, replace the existing bilingual bullet with:
|
||
|
||
```markdown
|
||
- 特朗普等已有译文的帖子详情按逗号、分号、句号、感叹号和问号切成短语，采用“一段原文紧跟一段译文”显示；两侧数量不一致时自动合并较多一侧的相邻短片段，避免空侧和内容丢失，同时保护英文缩写、小数及数字千分位。
|
||
```
|
||
|
||
In `docs/设计稿映射.md`, replace the community post detail row with:
|
||
|
||
```markdown
|
||
| 社区帖子详情 | `uniapp/src/packages_community/pages/post_detail.vue` | 🚧 部分完成 | 2026-08-02 已按付费帖子详情设计稿重构作者内容卡、免费摘要、积分解锁卡、互动评论区和底部输入栏；已有译文的帖子按标点短语进行原文/译文一对一交错显示；430px H5 页面已复核，App/小程序与正式构建待验收 |
|
||
```
|
||
|
||
Preserve all unrelated pending edits in both shared documents.
|
||
|
||
- [ ] **Step 2: Inspect only the intended source diff**
|
||
|
||
Run:
|
||
|
||
```powershell
|
||
git diff -- uniapp/src/packages_community/pages/post_detail.vue
|
||
git diff --check -- uniapp/src/packages_community/pages/post_detail.vue docs/superpowers/plans/2026-08-02-community-post-bilingual-phrase-pairing.md
|
||
```
|
||
|
||
Expected: the source diff only renames the splitter, adds delimiter protection and merge helpers, and updates the computed pairing model. `git diff --check` exits successfully.
|
||
|
||
- [ ] **Step 3: Check required references and removed names**
|
||
|
||
Run:
|
||
|
||
```powershell
|
||
rg -n "isPhraseDelimiter|shouldKeepPhraseDelimiter|splitPhraseLine|mergeSegmentsToCount|originalSegments|translatedSegments" uniapp/src/packages_community/pages/post_detail.vue
|
||
rg -n "splitSentenceLine|splitContentLines|originalLines|translatedLines" uniapp/src/packages_community/pages/post_detail.vue
|
||
if ($LASTEXITCODE -eq 0) { throw 'Obsolete sentence-level names remain' }
|
||
if ($LASTEXITCODE -gt 1) { throw 'Obsolete-name scan failed' }
|
||
```
|
||
|
||
Expected: all new helpers are referenced and the obsolete sentence-level names return no matches.
|
||
|
||
- [ ] **Step 4: Commit only the implementation files**
|
||
|
||
Run:
|
||
|
||
```powershell
|
||
git add -- docs/superpowers/plans/2026-08-02-community-post-bilingual-phrase-pairing.md uniapp/src/packages_community/pages/post_detail.vue
|
||
git commit -m "feat: align bilingual post phrases"
|
||
```
|
||
|
||
Expected: the commit contains the implementation plan and `post_detail.vue`. Existing changes in `AGENTS.md`, server/admin/match files, `docs/业务进度管理.md`, and `docs/设计稿映射.md` remain outside the commit.
|
||
|
||
## Verification boundary
|
||
|
||
The repository `AGENTS.md` prohibits automatically running builds or tests unless the user explicitly requests them. This plan therefore performs scoped static diff checks only. Suggested optional verification after separate authorization is `npm run build:h5` followed by browser inspection of community post `23361`.
|