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-06-05 11:35:06 +08:00
parent 1be97986df
commit 3e06ae544b
7 changed files with 575 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/pages/ChatMain/ChatLongAnswer/ParsedValueView.vue
View File

@@ -194,7 +194,7 @@ const contentBodyListCardStyle = computed(() => ({
}));
const contentBodyMarkdownColor = computed(() => contentBodyListToneStyle.value.color);
const IGNORED_FIELD_KEYS = ["container_type", "content", "components"];
const IGNORED_FIELD_KEYS = [];
/// ======== Value Processing Helpers ========
const isArrayValue = (value) => Array.isArray(value);
@@ -239,12 +239,11 @@ const createImageEntry = (key, value) => ({
},
});
/// ======== Render Logic ========
const isIgnoredField = computed(() => IGNORED_FIELD_KEYS.includes(props.fieldKey));
const isContentImageField = computed(() =>
props.fieldKey === LONG_TEXT_KEYS.contentImage ||
props.fieldKey === LONG_TEXT_KEYS.sceneImage
props.fieldKey === LONG_TEXT_KEYS.sceneImage ||
props.fieldKey === LONG_TEXT_KEYS.contentImage
);
const isSpotLocateField = computed(() => props.fieldKey === LONG_TEXT_KEYS.spotLocate);
const isQuestionSuggestField = computed(() => props.fieldKey === LONG_TEXT_KEYS.questionSuggest);
@@ -260,28 +259,34 @@ const contentImageUrl = computed(() => {
return typeof displayValue.value === "string" ? toTrimmedText(displayValue.value) : "";
});
const spotLocateValue = computed(() => {
const value = isObjectValue(displayValue.value) ? displayValue.value : {};
const getSpotLocateValue = (value) => {
const spot = isObjectValue(value) ? value : {};
return {
name: toTrimmedText(value.spot_name),
description: toTrimmedText(value.spot_description),
longitude: toFiniteNumber(value.spot_longitude),
latitude: toFiniteNumber(value.spot_latitude),
tag: toTrimmedText(value.spot_tag),
name: toTrimmedText(spot.spot_name),
description: toTrimmedText(spot.spot_description),
longitude: toFiniteNumber(spot.spot_longitude),
latitude: toFiniteNumber(spot.spot_latitude),
tag: toTrimmedText(spot.spot_tag),
};
};
const spotLocateValue = computed(() => {
return getSpotLocateValue(displayValue.value);
});
const questionSuggestItems = computed(() => {
return isArrayValue(displayValue.value)
? displayValue.value.map((item) => toTrimmedText(item)).filter(Boolean)
const getQuestionSuggestItems = (value) => {
return isArrayValue(value)
? value.map((item) => toTrimmedText(item)).filter(Boolean)
: [];
});
};
const commodityItems = computed(() => {
if (!isArrayValue(displayValue.value)) return [];
const questionSuggestItems = computed(() => getQuestionSuggestItems(displayValue.value));
return displayValue.value
const getCommodityItems = (value) => {
if (!isArrayValue(value)) return [];
return value
.filter((item) => isObjectValue(item))
.map((commodity) => ({
commodity_id: toTrimmedText(commodity.commodity_id),
@@ -291,12 +296,14 @@ const commodityItems = computed(() => {
commodity_photo: toTrimmedText(commodity.commodity_photo),
}))
.filter((commodity) => hasDisplayValue(commodity));
});
};
const photoItems = computed(() => {
if (!isArrayValue(displayValue.value)) return [];
const commodityItems = computed(() => getCommodityItems(displayValue.value));
return displayValue.value
const getPhotoItems = (value) => {
if (!isArrayValue(value)) return [];
return value
.filter((item) => isObjectValue(item))
.map((photo) => ({
photo_name: toTrimmedText(photo.photo_name),
@@ -304,10 +311,12 @@ const photoItems = computed(() => {
photo_url: toTrimmedText(photo.photo_url),
}))
.filter((photo) => !!photo.photo_url);
});
};
const aigcComponetValue = computed(() => {
const aigc = isObjectValue(displayValue.value) ? displayValue.value : {};
const photoItems = computed(() => getPhotoItems(displayValue.value));
const getAigcComponetValue = (value) => {
const aigc = isObjectValue(value) ? value : {};
return {
background: toTrimmedText(aigc.background),
@@ -315,7 +324,44 @@ const aigcComponetValue = computed(() => {
description: toTrimmedText(aigc.description),
jumpUrl: toTrimmedText(aigc.jumpUrl),
};
});
};
const aigcComponetValue = computed(() => getAigcComponetValue(displayValue.value));
const createRenderEntry = (key, value) => {
if (isImageValue(value)) {
return [createImageEntry(key, value)];
}
if (isArrayValue(value)) {
return [{
key,
type: "list",
value: value.filter((item) => hasDisplayValue(item)),
}];
}
if (isObjectValue(value)) {
return getRenderEntriesForObject(value, key);
}
return [{
key,
type: "text",
value: formatLeafValue(value),
}];
};
const getRenderEntriesForObject = (value = {}, parentKey = "") => {
if (!isObjectValue(value)) return [];
return Object.keys(value)
.filter((key) => hasDisplayValue(value[key]))
.reduce((entries, key) => {
const entryKey = parentKey ? `${parentKey}-${key}` : key;
return entries.concat(createRenderEntry(entryKey, value[key]));
}, []);
};
const shouldRenderContentImage = computed(() => {
return isContentImageField.value && !!contentImageUrl.value;
@@ -345,6 +391,7 @@ const shouldRenderAigcComponet = computed(() => {
const renderFieldEntries = computed(() => {
if (isIgnoredField.value || !hasDisplayValue(props.value)) return [];
const value = displayValue.value;
if (isImageValue(value)) {
return [createImageEntry(props.fieldKey, value)];
}
@@ -358,26 +405,7 @@ const renderFieldEntries = computed(() => {
}
if (isObjectValue(value)) {
return Object.keys(value)
.filter((key) => hasDisplayValue(value[key]))
.map((key) => {
const entryValue = value[key];
if (isImageValue(entryValue)) {
return createImageEntry(key, entryValue);
}
if (isArrayValue(entryValue)) {
return {
key,
type: "list",
value: entryValue.filter((item) => hasDisplayValue(item)),
};
}
return {
key,
type: "text",
value: formatLeafValue(entryValue),
};
});
return getRenderEntriesForObject(value);
}
return [{

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

@@ -24,8 +24,6 @@
:value="section.parsedValue !== null ? section.parsedValue : section.contentValue"
/>
<ChatMarkdown v-else-if="section.contentKey === LONG_TEXT_KEYS.content" :text="section.contentValue" />
<ChatMarkdown v-else :text="section.contentValue" />
</template>
@@ -65,16 +63,13 @@ const longAnswerTagStyle = computed(() => buildTagToneStyle(longAnswerTagColor.v
let unsubscribe = null;
const HIDDEN_DETAIL_SECTION_KEYS = [
LONG_TEXT_KEYS.containerType,
];
const HIDDEN_DETAIL_SECTION_KEYS = [];
const shouldUseParsedValueView = (section) => {
return (
section.fromLongTextData &&
section.contentKey !== LONG_TEXT_KEYS.tag &&
section.contentKey !== LONG_TEXT_KEYS.title &&
section.contentKey !== LONG_TEXT_KEYS.content &&
!HIDDEN_DETAIL_SECTION_KEYS.includes(section.contentKey)
);
};
@@ -227,7 +222,7 @@ onLoad(({ message = "", streamId = "", finished = "0", tagToneColor = "" }) => {
answerText.value = text || "";
longTextData.value = payload || null;
title.value = computeTitle(
getLongTextValue(longTextData.value, "title") || answerText.value
getLongTextValue(longTextData.value, LONG_TEXT_KEYS.title) || answerText.value
);
nextTick(() => {

7
src/pages/ChatModule/AnswerComponent/index.vue
View File

@@ -33,6 +33,7 @@ import ChatMarkdown from "../../ChatMain/ChatMarkdown/index.vue";
import ChatLoading from "../../ChatMain/ChatLoading/index.vue";
import StreamManager from '@/utils/StreamManager.js';
import {
LONG_TEXT_KEYS,
getLongTextPreviewText,
getLongTextValue,
hasLongTextExtraSections,
@@ -55,12 +56,12 @@ const props = defineProps({
},
});
const tag = computed(() => getLongTextValue(props.longTextData, "tag"));
const title = computed(() => getLongTextValue(props.longTextData, "title"));
const tag = computed(() => getLongTextValue(props.longTextData, LONG_TEXT_KEYS.tag));
const title = computed(() => getLongTextValue(props.longTextData, LONG_TEXT_KEYS.title));
const longAnswerTagColor = ref(pickRandomTagToneColor());
const longAnswerTagStyle = computed(() => buildTagToneStyle(longAnswerTagColor.value));
const previewContent = computed(() => {
return getLongTextPreviewText(props.longTextData, ["content_summary"]);
return getLongTextPreviewText(props.longTextData, [LONG_TEXT_KEYS.contentSummary]);
});
// 处理文本内容：按行截断以保证预览最多显示两行（更贴近视觉行数）

197
src/utils/longTextCard.js
View File

@@ -1,127 +1,56 @@
export const LONG_TEXT_KEYS = {
containerType: "container_type",
tag: "tag",
title: "title",
content: "content",
contentSummary: "content_summary",
guideConclusion: "guide_conclusion",
keyFacts: "key_facts",
sceneImage: "scene_image",
photoSpotSectionTitle: "photo_spot_section_title",
photoSpotSectionItems: "photo_spot_section_items",
bestTimeSuggestion: "best_time_suggestion",
phoneSectionTitle: "phone_section_title",
phoneSectionItems: "phone_section_items",
photoList: "photo_list",
aigcComponet: "aigc_componet",
preparationSectionTitle: "preparation_section_title",
preparationSectionItems: "preparation_section_items",
sectionSuggestionTitle: "section_suggestion_title",
sectionSuggestionContent: "section_suggestion_content",
pitfallSectionTitle: "pitfall_section_title",
pitfallSectionItems: "pitfall_section_items",
preparationSection: "preparation_section",
sectionSuggestion: "section_suggestion",
pitfallSection: "pitfall_section",
commodityList: "commodity_list",
contentImage: "content_image",
viewSectionTitle: "view_section_title",
viewSectionItems: "view_section_items",
suggestionSectionTitle: "suggestion_section_title",
suggestionSectionContent: "suggestion_section_content",
lightReminderTitle: "light_reminder_title",
lightReminderItems: "light_reminder_items",
checklistOrSteps: "checklist_or_steps",
bestTimeOrPeople: "best_time_or_people",
avoidPitfalls: "avoid_pitfalls",
nextSuggestion: "next_suggestion",
poiDefinition: "poi_definition",
keyHighlights: "key_highlights",
heroImage: "hero_image",
backgroundStory: "background_story",
bestTime: "best_time",
visitSuggestion: "visit_suggestion",
routeSummary: "route_summary",
routeMeta: "route_meta",
routeSteps: "route_steps",
onsiteClues: "onsite_clues",
realtimeNotice: "realtime_notice",
routeWarning: "route_warning",
arrivalNextStep: "arrival_next_step",
photoConclusion: "photo_conclusion",
photoSpots: "photo_spots",
compositionTips: "composition_tips",
phoneSettings: "phone_settings",
viewSection: "view_section",
suggestionSection: "suggestion_section",
lightReminder: "light_reminder",
sampleImage: "sample_image",
components: "components",
checklist: "checklist",
suggest: "suggest",
commodity: "commodity",
actionZone: "action_zone",
spotLocate: "spot_locate",
photoSpotSection: "photo_spot_section",
phoneSection: "phone_section",
photoList: "photo_list",
aigcComponet: "aigc_componet",
decisionSection: "decision_section",
routeWarning: "route_warning",
tourRoutes: "tour_routes",
facilitiesAlongTheWay: "facilities_along_the_way",
questionSuggest: "question_suggest",
};
export const LONG_TEXT_FIELD_CONFIG = [
{ key: LONG_TEXT_KEYS.containerType },
{ key: LONG_TEXT_KEYS.tag },
{ key: LONG_TEXT_KEYS.title },
{ key: LONG_TEXT_KEYS.content },
{ key: LONG_TEXT_KEYS.contentSummary },
{ key: LONG_TEXT_KEYS.guideConclusion },
{ key: LONG_TEXT_KEYS.keyFacts },
{ key: LONG_TEXT_KEYS.sceneImage },
{ key: LONG_TEXT_KEYS.photoSpotSectionTitle },
{ key: LONG_TEXT_KEYS.photoSpotSectionItems },
{ key: LONG_TEXT_KEYS.bestTimeSuggestion },
{ key: LONG_TEXT_KEYS.phoneSectionTitle },
{ key: LONG_TEXT_KEYS.phoneSectionItems },
{ key: LONG_TEXT_KEYS.photoList },
{ key: LONG_TEXT_KEYS.aigcComponet },
{ key: LONG_TEXT_KEYS.preparationSectionTitle },
{ key: LONG_TEXT_KEYS.preparationSectionItems },
{ key: LONG_TEXT_KEYS.sectionSuggestionTitle },
{ key: LONG_TEXT_KEYS.sectionSuggestionContent },
{ key: LONG_TEXT_KEYS.pitfallSectionTitle },
{ key: LONG_TEXT_KEYS.pitfallSectionItems },
{ key: LONG_TEXT_KEYS.preparationSection },
{ key: LONG_TEXT_KEYS.sectionSuggestion },
{ key: LONG_TEXT_KEYS.pitfallSection },
{ key: LONG_TEXT_KEYS.commodityList },
{ key: LONG_TEXT_KEYS.contentImage },
{ key: LONG_TEXT_KEYS.viewSectionTitle },
{ key: LONG_TEXT_KEYS.viewSectionItems },
{ key: LONG_TEXT_KEYS.suggestionSectionTitle },
{ key: LONG_TEXT_KEYS.suggestionSectionContent },
{ key: LONG_TEXT_KEYS.lightReminderTitle },
{ key: LONG_TEXT_KEYS.lightReminderItems },
{ key: LONG_TEXT_KEYS.checklistOrSteps },
{ key: LONG_TEXT_KEYS.bestTimeOrPeople },
{ key: LONG_TEXT_KEYS.avoidPitfalls },
{ key: LONG_TEXT_KEYS.nextSuggestion },
{ key: LONG_TEXT_KEYS.poiDefinition },
{ key: LONG_TEXT_KEYS.keyHighlights },
{ key: LONG_TEXT_KEYS.heroImage },
{ key: LONG_TEXT_KEYS.backgroundStory },
{ key: LONG_TEXT_KEYS.bestTime },
{ key: LONG_TEXT_KEYS.visitSuggestion },
{ key: LONG_TEXT_KEYS.routeSummary },
{ key: LONG_TEXT_KEYS.routeMeta },
{ key: LONG_TEXT_KEYS.routeSteps },
{ key: LONG_TEXT_KEYS.onsiteClues },
{ key: LONG_TEXT_KEYS.realtimeNotice },
{ key: LONG_TEXT_KEYS.routeWarning },
{ key: LONG_TEXT_KEYS.arrivalNextStep },
{ key: LONG_TEXT_KEYS.photoConclusion },
{ key: LONG_TEXT_KEYS.photoSpots },
{ key: LONG_TEXT_KEYS.compositionTips },
{ key: LONG_TEXT_KEYS.phoneSettings },
{ key: LONG_TEXT_KEYS.viewSection },
{ key: LONG_TEXT_KEYS.suggestionSection },
{ key: LONG_TEXT_KEYS.lightReminder },
{ key: LONG_TEXT_KEYS.sampleImage },
{ key: LONG_TEXT_KEYS.components },
{ key: LONG_TEXT_KEYS.checklist },
{ key: LONG_TEXT_KEYS.suggest },
{ key: LONG_TEXT_KEYS.commodity },
{ key: LONG_TEXT_KEYS.actionZone },
{ key: LONG_TEXT_KEYS.spotLocate },
{ key: LONG_TEXT_KEYS.photoSpotSection },
{ key: LONG_TEXT_KEYS.phoneSection },
{ key: LONG_TEXT_KEYS.photoList },
{ key: LONG_TEXT_KEYS.aigcComponet },
{ key: LONG_TEXT_KEYS.decisionSection },
{ key: LONG_TEXT_KEYS.routeWarning },
{ key: LONG_TEXT_KEYS.tourRoutes },
{ key: LONG_TEXT_KEYS.facilitiesAlongTheWay },
{ key: LONG_TEXT_KEYS.questionSuggest },
];
const LONG_TEXT_FIELD_KEYS = LONG_TEXT_FIELD_CONFIG.map((item) => item.key);
const LONG_TEXT_FIELD_KEY_SET = new Set(LONG_TEXT_FIELD_KEYS);
export const LONG_TEXT_PREVIEW_KEYS = [
LONG_TEXT_KEYS.contentSummary,
LONG_TEXT_KEYS.title,
@@ -133,9 +62,21 @@ export const createLongTextData = () => ({
parsedValues: {},
});
export const isKnownLongTextKey = (key) => {
return LONG_TEXT_FIELD_KEY_SET.has(String(key));
};
const toText = (value) => {
if (value === undefined || value === null) return "";
return typeof value === "string" ? value : String(value);
if (typeof value === "string") return value;
if (typeof value === "object") {
try {
return JSON.stringify(value);
} catch (e) {
return String(value);
}
}
return String(value);
};
const shouldParseJSON = (raw) => {
@@ -167,6 +108,10 @@ const isLongTextObjectValue = (value) => {
return value !== null && typeof value === "object" && !Array.isArray(value);
};
const hasOwnField = (value, key) => {
return Object.prototype.hasOwnProperty.call(value, key);
};
export const parseLongTextDisplayValue = (value) => {
return parseMaybeJSON(value);
};
@@ -218,15 +163,18 @@ export const formatLongTextDisplayValue = (value, ignoredKeys = []) => {
return String(value);
};
export const appendLongTextChunk = (target, chunk = {}) => {
if (!target || !chunk.contentKey) return target;
const key = String(chunk.contentKey);
const value = toText(chunk.contentValue);
const getChunkContentValue = (chunk = {}) => {
if (!isLongTextObjectValue(chunk)) return chunk;
if (hasOwnField(chunk, "contentValue")) return chunk.contentValue;
if (hasOwnField(chunk, "content")) return chunk.content;
return chunk;
};
const appendLongTextField = (target, key, rawValue) => {
if (!target.values) target.values = {};
if (!target.parsedValues) target.parsedValues = {};
const value = toText(rawValue);
target.values[key] = (target.values[key] || "") + value;
const parsed = tryParseJSON(target.values[key]);
@@ -235,7 +183,12 @@ export const appendLongTextChunk = (target, chunk = {}) => {
} else {
delete target.parsedValues[key];
}
};
export const appendLongTextChunk = (target, chunk = {}) => {
if (!target || !chunk || !chunk.contentKey) return target;
appendLongTextField(target, String(chunk.contentKey), getChunkContentValue(chunk));
return target;
};
@@ -260,14 +213,40 @@ export const getLongTextPreviewText = (data, keys = LONG_TEXT_PREVIEW_KEYS) => {
};
export const hasLongTextExtraSections = (data, previewKeys = LONG_TEXT_PREVIEW_KEYS) => {
if (!data || !data.values) return false;
return Object.keys(data.values).some((key) => !previewKeys.includes(key));
return getLongTextSections(data).some((section) => !previewKeys.includes(section.contentKey));
};
export const getLongTextSections = (data) => {
if (!data || !data.values) return [];
return Object.keys(data.values)
const receivedKeys = Object.keys(data.values);
const extraKeysByAnchor = receivedKeys
.filter((key) => !LONG_TEXT_FIELD_KEY_SET.has(key))
.reduce((result, key) => {
const keyIndex = receivedKeys.indexOf(key);
const anchorKey = receivedKeys
.slice(0, keyIndex)
.reverse()
.find((item) => LONG_TEXT_FIELD_KEY_SET.has(item)) || "";
if (!result[anchorKey]) result[anchorKey] = [];
result[anchorKey].push(key);
return result;
}, {});
const orderedKeys = LONG_TEXT_FIELD_KEYS
.filter((key) =>
Object.prototype.hasOwnProperty.call(data.values, key)
)
.reduce((result, key) => {
result.push(key);
if (extraKeysByAnchor[key]) {
result.push(...extraKeysByAnchor[key]);
}
return result;
}, extraKeysByAnchor[""] || []);
return orderedKeys
.map((key) => ({
contentKey: key,
contentValue: getLongTextValue(data, key),