# Community Post Bilingual 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:** Display translated community posts as vertically interleaved original/translation sentence pairs instead of separate long text blocks.

**Architecture:** Keep the change local to the community post detail page. Reuse the news detail page's newline-first, sentence-second splitting rule, derive a bilingual view model with a computed property, and render it through a dedicated template branch without changing API contracts.

**Tech Stack:** uni-app, Vue 3 `<script setup>`, TypeScript, SCSS

---

### Task 1: Add the bilingual sentence view model

**Files:**
- Modify: `uniapp/src/packages_community/pages/post_detail.vue`

- [ ] **Step 1: Upgrade the local text splitter**

Replace the newline-only `splitContentLines` helper with the article-detail behavior: normalize line endings, preserve explicit line order, and split every line by Chinese or English sentence punctuation. Protect decimals, abbreviations such as `U.S.`, and name initials such as `J.` so sentence indexes do not drift.

```ts
const shouldKeepEnglishPeriod = (text: string, index: number) => {
    const previous = text[index - 1] || ''
    const next = text[index + 1] || ''
    if (/\d/.test(previous) && /\d/.test(next)) return true
    if (/[A-Za-z]/.test(previous) && /[A-Za-z]/.test(next)) return true

    const token = text.slice(0, index).match(/([A-Za-z](?:\.[A-Za-z])*)$/)?.[1] || ''
    const nextNonSpace = text.slice(index + 1).match(/\S/)?.[0] || ''
    if (/^(?:[A-Za-z]\.)+[A-Za-z]$/.test(token)) return true
    return /^[A-Z]$/.test(token) && /[A-Za-z]/.test(nextNonSpace)
}

const splitSentenceLine = (text: string) => {
    const sentences: string[] = []
    let start = 0

    for (let index = 0; index < text.length; index += 1) {
        const character = text[index]
        const isStop = /[。！？!?]/.test(character) || character === '.'
        if (!isStop || (character === '.' && shouldKeepEnglishPeriod(text, index))) continue

        let end = index + 1
        while (end < text.length && /[。！？.!?]/.test(text[end])) end += 1
        while (end < text.length && /[”’"'）)】\]]/.test(text[end])) end += 1

        const sentence = text.slice(start, end).trim()
        if (sentence) sentences.push(sentence)
        start = end
        index = end - 1
    }

    const tail = text.slice(start).trim()
    if (tail) sentences.push(tail)
    return sentences
}

const splitContentLines = (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 sentenceLines = manualLines.flatMap((line) => splitSentenceLine(line))

    return sentenceLines.length ? sentenceLines : [normalized]
}
```

- [ ] **Step 2: Derive paired original and translated blocks**

Add computed original lines and a computed array whose length is the maximum of both sides. Filter only fully empty rows so an unmatched trailing sentence remains visible.

```ts
const originalLines = computed(() => splitContentLines(post.value?.content))
const translatedLines = computed(() => splitContentLines(translatedText.value))
const bilingualBlocks = computed(() => {
    const size = Math.max(originalLines.value.length, translatedLines.value.length)
    return Array.from({ length: size }, (_, index) => ({
        original: originalLines.value[index] || '',
        translated: translatedLines.value[index] || ''
    })).filter((block) => block.original || block.translated)
})
const hasBilingualContent = computed(() => originalLines.value.length > 0 && translatedLines.value.length > 0)
```

- [ ] **Step 3: Collapse only at complete pair boundaries**

Treat multiple bilingual pairs as expandable. When collapsed, render only the first complete pair instead of clipping the container by height; keep the existing summary rule for ordinary posts.

```ts
const previewCanExpand = computed(() => {
    if (hasBilingualContent.value) return bilingualBlocks.value.length > 1

    const summary = postPreview.value.summary
    return summary.length > 90 || summary.split('\n').length > 3
})

const visibleBilingualBlocks = computed(() => {
    if (!previewCanExpand.value || previewExpanded.value) return bilingualBlocks.value
    return bilingualBlocks.value.slice(0, 1)
})
```

### Task 2: Render one original sentence followed by one translation

**Files:**
- Modify: `uniapp/src/packages_community/pages/post_detail.vue`

- [ ] **Step 1: Add the bilingual template branch**

Place this branch before the ordinary title/summary content. The branch replaces both the artificial title and the former standalone translation card.

```vue
<view v-if="hasBilingualContent" class="detail-post-card__bilingual">
    <view v-for="(block, index) in visibleBilingualBlocks" :key="`bilingual-${index}`"
        class="detail-post-card__bilingual-pair">
        <text v-if="block.original" class="detail-post-card__bilingual-original">{{ block.original }}</text>
        <text v-if="block.translated" class="detail-post-card__bilingual-translated">{{ block.translated }}</text>
    </view>
</view>

<template v-else>
    <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>
</template>

<text v-if="hasBilingualContent && previewCanExpand" class="detail-post-card__expand detail-post-card__expand--bilingual"
    @tap="previewExpanded = !previewExpanded">
    {{ previewExpanded ? '收起' : '展开' }}
</text>
```

- [ ] **Step 2: Remove the obsolete standalone translation block**

Delete the old `detail-post-card__translation`, `detail-post-card__translation-label`, and `detail-post-card__translation-text` template markup because translation is now rendered inside each bilingual pair.

### Task 3: Style the bilingual reading hierarchy

**Files:**
- Modify: `uniapp/src/packages_community/pages/post_detail.vue`

- [ ] **Step 1: Add bilingual layout styles**

Use a single-column, mobile-first hierarchy. Keep the original dominant and the translation visually subordinate without wrapping every pair in a heavy card.

```scss
&__bilingual {
    margin-top: 20rpx;
    display: flex;
    flex-direction: column;
    gap: 24rpx;
}

&__bilingual-pair {
    display: flex;
    flex-direction: column;
    gap: 8rpx;
}

&__bilingual-original {
    color: #20242b;
    font-size: 29rpx;
    font-weight: 500;
    line-height: 1.72;
    word-break: break-word;
}

&__bilingual-translated {
    color: #647187;
    font-size: 27rpx;
    line-height: 1.72;
    word-break: break-word;
}

&__expand--bilingual {
    display: block;
    margin-top: 12rpx;
    text-align: right;
}
```

- [ ] **Step 2: Remove unused translation-card styles**

Delete the old `&__translation`, `&__translation-label`, and `&__translation-text` rules so the stylesheet matches the template.

### Task 4: Restore translation after a paid post is unlocked

**Files:**
- Modify: `uniapp/src/packages_community/pages/post_detail.vue`

- [ ] **Step 1: Trigger the existing translation flow after unlocking**

After applying the purchased content, start the existing non-blocking translation request only for a Trump post that has no translation and has not already started translation. Keep `loadUserPoints()` unchanged.

```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
    if (isTrumpPost.value && !translatedText.value && !autoTranslateStarted.value) {
        autoTranslateStarted.value = true
        void requestTranslate()
    }
    await loadUserPoints()
}
```

### Task 5: Review and commit the source change

**Files:**
- Review: `uniapp/src/packages_community/pages/post_detail.vue`

- [ ] **Step 1: Inspect the scoped diff**

Run:

```powershell
git diff -- uniapp/src/packages_community/pages/post_detail.vue
```

Expected: only the bilingual template, computed pairing logic, expansion rule, and related styles change.

- [ ] **Step 2: Check whitespace and conflict markers**

Run:

```powershell
git diff --check -- uniapp/src/packages_community/pages/post_detail.vue
rg -n "<<<<<<<|=======|>>>>>>>" uniapp/src/packages_community/pages/post_detail.vue
if ($LASTEXITCODE -eq 0) { throw 'Conflict markers found' }
if ($LASTEXITCODE -gt 1) { throw 'Conflict marker scan failed' }
```

Expected: `git diff --check` exits successfully and `rg` returns no matches.

- [ ] **Step 3: Review logic against edge cases**

Confirm from the diff that:

- bilingual mode requires both original content and translated content;
- unmatched trailing sentences remain rendered;
- no API contract, payment confirmation, or points calculation changed;
- the only unlock-path change is the guarded non-blocking translation trigger;
- normal posts retain the old title/summary branch;
- old translation-card selectors have no remaining references.

- [ ] **Step 4: Commit only the intended files**

Run:

```powershell
git add -- docs/superpowers/plans/2026-08-02-community-post-bilingual-pairing.md uniapp/src/packages_community/pages/post_detail.vue
git commit -m "feat: pair community post translations"
```

Expected: one commit containing the plan and the uni-app page source. Do not include existing `.playwright-mcp` or modified shared docs.

## Verification boundary

The repository `AGENTS.md` prohibits automatically running builds or tests unless the user explicitly requests them. This plan therefore stops at scoped static diff checks and code review; suggested optional verification is `npm run build:h5` plus browser inspection of post `23361` after separate authorization.