zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 调整了长文本组件的渲染

Browse Source
This commit is contained in:
zoujing
2026-05-22 13:01:09 +08:00
parent 1a331d2ae2
commit 6e0988e85a
6 changed files with 206 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/pages/ChatMain/ChatLongAnswer/index.vue
View File

@@ -7,17 +7,22 @@
<!-- ✅ 滚动区域 -->
<scroll-view class="flex-full overflow-hidden chat-scroll" scroll-y :scroll-into-view="scrollIntoViewId" scroll-with-animation @scroll="onScroll" @touchstart="onTouchStart" @touchend="onTouchEnd" @touchcancel="onTouchEnd">
<view class="pt-12 px-12 pb-24 border-box">
<template v-for="section in renderSections" :key="section.contentKey">
<view v-if="section.contentKey === LONG_TEXT_KEYS.tag" class="long-answer-tag">
{{ section.contentValue }}
<view class="flex flex-col pt-12 px-12 pb-24 border-box gap-10">
<view v-if="headerSections.title || headerSections.tag" class="long-answer-header">
<view v-if="headerSections.title" class="long-answer-title">
{{ headerSections.title.contentValue }}
</view>
<view v-else-if="section.contentKey === LONG_TEXT_KEYS.title" class="long-answer-title">
{{ section.contentValue }}
</view>
<view v-else-if="shouldUseParsedValueView(section)" class="long-answer-block">
<ParsedValueView :field-key="section.contentKey" :value="section.parsedValue !== null ? section.parsedValue : section.contentValue" />
<view v-if="headerSections.tag" class="long-answer-tag">
{{ headerSections.tag.contentValue }}
</view>
</view>
<template v-for="section in contentSections" :key="section.contentKey">
<ParsedValueView
v-if="shouldUseParsedValueView(section)"
:field-key="section.contentKey"
:value="section.parsedValue !== null ? section.parsedValue : section.contentValue"
/>
<ChatMarkdown v-else-if="section.contentKey === LONG_TEXT_KEYS.content" :text="section.contentValue" />
@@ -56,16 +61,25 @@ const title = ref("");
const longTextData = ref(null);
let unsubscribe = null;
const PARSED_VALUE_VIEW_KEYS = ["container_type"];
const shouldUseParsedValueView = (section) => {
return section.parsedValue !== null || PARSED_VALUE_VIEW_KEYS.includes(section.contentKey);
return (
section.fromLongTextData &&
section.contentKey !== LONG_TEXT_KEYS.tag &&
section.contentKey !== LONG_TEXT_KEYS.title &&
section.contentKey !== LONG_TEXT_KEYS.content
);
};
const renderSections = computed(() => {
const data = longTextData.value;
if (data && data.values) {
return getLongTextSections(data).filter((section) => section.contentValue);
return getLongTextSections(data)
.filter((section) => section.contentValue)
.map((section) => ({
...section,
fromLongTextData: true,
}));
}
return answerText.value
@@ -73,6 +87,22 @@ const renderSections = computed(() => {
: [];
});
const headerSections = computed(() => {
const sections = renderSections.value;
return {
title: sections.find((section) => section.contentKey === LONG_TEXT_KEYS.title),
tag: sections.find((section) => section.contentKey === LONG_TEXT_KEYS.tag),
};
});
const contentSections = computed(() => {
return renderSections.value.filter(
(section) =>
section.contentKey !== LONG_TEXT_KEYS.title &&
section.contentKey !== LONG_TEXT_KEYS.tag
);
});
/** ✅ scroll-into-view 控制 */
const scrollIntoViewId = ref("");
@@ -231,10 +261,17 @@ onUnload(() => {
</script>
<style scoped lang="scss">
.long-answer-header {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.long-answer-tag {
display: inline-flex;
flex-shrink: 0;
width: fit-content;
margin-bottom: 8px;
padding: 3px 8px;
border-radius: 12px;
border: 1px solid rgba($theme-color-500, 0.2);
@@ -244,12 +281,11 @@ onUnload(() => {
line-height: 18px;
}
.long-answer-title {
flex: 1;
min-width: 0;
color: #111827;
font-size: 20px;
font-weight: 600;
line-height: 28px;
}
.long-answer-block {
margin-bottom: 12px;
}
</style>