优化讲解正文段落格式
This commit is contained in:
@@ -47,7 +47,15 @@
|
|||||||
|
|
||||||
<view class="content-panel">
|
<view class="content-panel">
|
||||||
<view class="content-section">
|
<view class="content-section">
|
||||||
<text class="section-text">{{ currentDetailText }}</text>
|
<template v-if="currentDetailParagraphs.length">
|
||||||
|
<text
|
||||||
|
v-for="(paragraph, paragraphIndex) in currentDetailParagraphs"
|
||||||
|
:key="`${selectedAudioLanguage}-${paragraphIndex}`"
|
||||||
|
class="section-text"
|
||||||
|
>
|
||||||
|
{{ paragraph }}
|
||||||
|
</text>
|
||||||
|
</template>
|
||||||
<text v-if="currentDetailTextLoading" class="section-hint">正在加载讲解正文</text>
|
<text v-if="currentDetailTextLoading" class="section-hint">正在加载讲解正文</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -388,7 +396,57 @@ onUnload(() => {
|
|||||||
const detailTextFor = (lang: AudioLanguage) => {
|
const detailTextFor = (lang: AudioLanguage) => {
|
||||||
return detailTextByLanguage.value[lang] || fallbackTextForLanguage(lang)
|
return detailTextByLanguage.value[lang] || fallbackTextForLanguage(lang)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const splitDetailTextIntoParagraphs = (text: string): string[] => {
|
||||||
|
const normalizedText = text
|
||||||
|
.replace(/\r\n?/g, '\n')
|
||||||
|
.replace(/\u3000/g, ' ')
|
||||||
|
.trim()
|
||||||
|
|
||||||
|
if (!normalizedText) return []
|
||||||
|
|
||||||
|
const numberedPrefixPattern = '(?:[一二三四五六七八九十]+、|([一二三四五六七八九十]+)|[0-9]{1,2}[、.](?!\\d))'
|
||||||
|
const textWithNumberBreaks = normalizedText
|
||||||
|
.replace(new RegExp(`([。!?!?;;])\\s*(?=${numberedPrefixPattern})`, 'g'), '$1\n')
|
||||||
|
.replace(new RegExp(`\\s+(?=${numberedPrefixPattern})`, 'g'), '\n')
|
||||||
|
|
||||||
|
return textWithNumberBreaks
|
||||||
|
.split(/\n+/)
|
||||||
|
.flatMap((block) => {
|
||||||
|
const cleanedBlock = block.replace(/\s+/g, ' ').trim()
|
||||||
|
if (!cleanedBlock) return []
|
||||||
|
|
||||||
|
const sentences = cleanedBlock.match(/[^。!?!?;;]+[。!?!?;;]?/g)
|
||||||
|
if (!sentences || sentences.length <= 1 || cleanedBlock.length <= 90) {
|
||||||
|
return [cleanedBlock]
|
||||||
|
}
|
||||||
|
|
||||||
|
const paragraphs: string[] = []
|
||||||
|
let currentParagraph = ''
|
||||||
|
|
||||||
|
sentences.forEach((sentence) => {
|
||||||
|
const cleanedSentence = sentence.trim()
|
||||||
|
if (!cleanedSentence) return
|
||||||
|
|
||||||
|
if (currentParagraph && `${currentParagraph}${cleanedSentence}`.length > 90) {
|
||||||
|
paragraphs.push(currentParagraph)
|
||||||
|
currentParagraph = cleanedSentence
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
currentParagraph = `${currentParagraph}${cleanedSentence}`
|
||||||
|
})
|
||||||
|
|
||||||
|
if (currentParagraph) {
|
||||||
|
paragraphs.push(currentParagraph)
|
||||||
|
}
|
||||||
|
|
||||||
|
return paragraphs
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
const currentDetailText = computed(() => detailTextFor(selectedAudioLanguage.value))
|
const currentDetailText = computed(() => detailTextFor(selectedAudioLanguage.value))
|
||||||
|
const currentDetailParagraphs = computed(() => splitDetailTextIntoParagraphs(currentDetailText.value))
|
||||||
const currentDetailTextLoading = computed(() => detailTextLoadingByLanguage.value[selectedAudioLanguage.value])
|
const currentDetailTextLoading = computed(() => detailTextLoadingByLanguage.value[selectedAudioLanguage.value])
|
||||||
|
|
||||||
const replaceDetailRouteLanguage = (lang: AudioLanguage) => {
|
const replaceDetailRouteLanguage = (lang: AudioLanguage) => {
|
||||||
@@ -843,7 +901,13 @@ const handleBack = () => {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
color: #2f352d;
|
color: #2f352d;
|
||||||
white-space: pre-line;
|
text-indent: 2em;
|
||||||
|
white-space: normal;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-text:first-child {
|
||||||
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-load-btn {
|
.text-load-btn {
|
||||||
@@ -1151,15 +1215,20 @@ const handleBack = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.section-text {
|
.section-text {
|
||||||
margin-top: 16px;
|
margin-top: 12px;
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
line-height: 29px;
|
line-height: 29px;
|
||||||
color: #233044;
|
color: #233044;
|
||||||
white-space: pre-line;
|
text-indent: 2em;
|
||||||
|
white-space: normal;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.section-text:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.section-hint {
|
.section-hint {
|
||||||
color: #6d7568;
|
color: #6d7568;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user