From 190f9383dfe28d156b80724375ba76986ac2f003 Mon Sep 17 00:00:00 2001
From: zoujing <kidevelop@163.com>
Date: Wed, 3 Jun 2026 22:08:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A2=9C=E8=89=B2=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E9=9A=8F=E6=9C=BA=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChatLongAnswer/ParsedValueView.vue        |  23 +++-
 src/pages/ChatMain/ChatLongAnswer/index.vue   |  14 ++-
 .../ChatModule/AnswerComponent/index.vue      |  15 ++-
 src/utils/tagTone.js                          | 114 ++++++++++++++++++
 4 files changed, 148 insertions(+), 18 deletions(-)
 create mode 100644 src/utils/tagTone.js

diff --git a/src/pages/ChatMain/ChatLongAnswer/ParsedValueView.vue b/src/pages/ChatMain/ChatLongAnswer/ParsedValueView.vue
index 11e498b..e9a0d3f 100644
--- a/src/pages/ChatMain/ChatLongAnswer/ParsedValueView.vue
+++ b/src/pages/ChatMain/ChatLongAnswer/ParsedValueView.vue
@@ -15,13 +15,17 @@
           {{ entry.value.caption }}
         </view>
       </view>
-      <view v-else-if="entry.type === 'list'" class="content-body-list-card">
+      <view
+        v-else-if="entry.type === 'list'"
+        class="content-body-list-card"
+        :style="contentBodyListCardStyle"
+      >
         <view
           v-for="(item, index) in entry.value"
           :key="index"
           class="content-body-list-item"
         >
-          <view class="content-body-list-text">
+          <view class="content-body-list-text" :style="contentBodyListTextStyle">
             {{ formatLeafValue(item) }}
           </view>
         </view>
@@ -31,7 +35,8 @@
 </template>
 
 <script setup>
-import { computed, defineProps } from "vue";
+import { computed, defineProps, ref } from "vue";
+import { getRandomTagToneStyle } from "@/utils/tagTone";
 
 const props = defineProps({
   fieldKey: {
@@ -44,6 +49,15 @@ const props = defineProps({
   },
 });
 
+const contentBodyListToneStyle = ref(getRandomTagToneStyle({ borderAlpha: 1, borderWidth: 4 }));
+const contentBodyListCardStyle = computed(() => ({
+  borderLeft: contentBodyListToneStyle.value.border,
+  background: contentBodyListToneStyle.value.background,
+}));
+const contentBodyListTextStyle = computed(() => ({
+  color: contentBodyListToneStyle.value.color,
+}));
+
 const IGNORED_FIELD_KEYS = ["container_type", "content", "content_summary", "components"];
 
 const isArrayValue = (value) => Array.isArray(value);
@@ -215,9 +229,7 @@ const handlePreviewClick = (imageUrl) => {
   flex-direction: column;
   gap: 4px;
   padding: 12px;
-  border-left: 4px solid $theme-color-500;
   border-radius: 12px;
-  background: rgba($theme-color-500, 0.08);
 }
 
 .content-body-list-item {
@@ -227,7 +239,6 @@ const handlePreviewClick = (imageUrl) => {
 
 .content-body-list-text {
   flex: 1;
-  color: $theme-color-800;
   font-size: 15px;
   font-weight: 400;
   line-height: 20px;
diff --git a/src/pages/ChatMain/ChatLongAnswer/index.vue b/src/pages/ChatMain/ChatLongAnswer/index.vue
index 5b547e2..89a9e0f 100644
--- a/src/pages/ChatMain/ChatLongAnswer/index.vue
+++ b/src/pages/ChatMain/ChatLongAnswer/index.vue
@@ -12,7 +12,7 @@
           <view v-if="headerSections.title" class="long-answer-title">
             {{ headerSections.title.contentValue }}
           </view>
-          <view v-if="headerSections.tag" class="long-answer-tag">
+          <view v-if="headerSections.tag" class="long-answer-tag" :style="longAnswerTagStyle">
             {{ headerSections.tag.contentValue }}
           </view>
         </view>
@@ -48,6 +48,7 @@ import {
   getLongTextSections,
   getLongTextValue,
 } from "@/utils/longTextCard";
+import { buildTagToneStyle, pickRandomTagToneColor } from "@/utils/tagTone";
 
 const props = defineProps({
   answerText: {
@@ -59,6 +60,8 @@ const props = defineProps({
 const answerText = ref(props.answerText || "");
 const title = ref("");
 const longTextData = ref(null);
+const longAnswerTagColor = ref(pickRandomTagToneColor());
+const longAnswerTagStyle = computed(() => buildTagToneStyle(longAnswerTagColor.value));
 
 let unsubscribe = null;
 
@@ -205,11 +208,12 @@ const scrollToBottom = () => {
   }, 100);
 }
 
-onLoad(({ message = "", streamId = "", finished = "0" }) => {
+onLoad(({ message = "", streamId = "", finished = "0", tagToneColor = "" }) => {
   // 记录初始完成状态
   isFinishedOnInit = finished === "1";
+  longAnswerTagColor.value = tagToneColor ? decodeURIComponent(tagToneColor) : longAnswerTagColor.value;
 
-  console.log("LongAnswer onLoad with params:", { message, streamId, finished });
+  console.log("LongAnswer onLoad with params:", { message, streamId, finished, tagToneColor });
 
   // 初次测量 scroll-view 高度
   nextTick(() => {
@@ -282,9 +286,7 @@ onUnload(() => {
   width: fit-content;
   padding: 3px 8px;
   border-radius: 12px;
-  border: 1px solid rgba($theme-color-500, 0.2);
-  background: rgba($theme-color-500, 0.08);
-  color: $theme-color-500;
+  border: 1px solid transparent;
   font-size: 12px;
   line-height: 18px;
 }
diff --git a/src/pages/ChatModule/AnswerComponent/index.vue b/src/pages/ChatModule/AnswerComponent/index.vue
index b8b856f..ef91a12 100644
--- a/src/pages/ChatModule/AnswerComponent/index.vue
+++ b/src/pages/ChatModule/AnswerComponent/index.vue
@@ -3,7 +3,7 @@
     <!-- 占位撑开 -->
     <view class="w-vw"></view>
     <view class="flex flex-col px-16 pt-16 pb-12 border-box">
-      <view v-if="tag" class="long-answer-tag">{{ tag }}</view>
+      <view v-if="tag" class="long-answer-tag" :style="longAnswerTagStyle">{{ tag }}</view>
       <view v-if="title" class="flex flex-row flex-items-start flex-justify-start mb-4">
         <uni-icons class="icon-active" type="fire-filled" size="18" color="opacity" />
         <text class="font-size-16 font-500 text-color-900 ml-6"> {{ title }}</text>
@@ -28,7 +28,7 @@
 </template>
 
 <script setup>
-import { defineProps, computed, watch, onBeforeUnmount } from "vue";
+import { defineProps, computed, watch, onBeforeUnmount, ref } from "vue";
 
 import ChatMarkdown from "../../ChatMain/ChatMarkdown/index.vue";
 import ChatLoading from "../../ChatMain/ChatLoading/index.vue";
@@ -38,6 +38,7 @@ import {
   getLongTextValue,
   hasLongTextExtraSections,
 } from "@/utils/longTextCard";
+import { buildTagToneStyle, pickRandomTagToneColor } from "@/utils/tagTone";
 
 // 直接根据文字长度判断，超过约100个字符认为会溢出（约3行）
 const props = defineProps({
@@ -57,6 +58,8 @@ const props = defineProps({
 
 const tag = computed(() => getLongTextValue(props.longTextData, "tag"));
 const title = computed(() => getLongTextValue(props.longTextData, "title"));
+const longAnswerTagColor = ref(pickRandomTagToneColor());
+const longAnswerTagStyle = computed(() => buildTagToneStyle(longAnswerTagColor.value));
 const previewContent = computed(() => {
   return getLongTextPreviewText(props.longTextData, ["content_summary"]);
 });
@@ -161,7 +164,9 @@ const lookDetailAction = () => {
   }
 
   // 传递 finished 参数，完成状态下不自动滚到底部
-  uni.navigateTo({ url: `/pages/ChatMain/ChatLongAnswer/index?streamId=${encodeURIComponent(streamId)}&finished=${props.finish ? '1' : '0'}` });
+  uni.navigateTo({
+    url: `/pages/ChatMain/ChatLongAnswer/index?streamId=${encodeURIComponent(streamId)}&finished=${props.finish ? '1' : '0'}&tagToneColor=${encodeURIComponent(longAnswerTagColor.value)}`,
+  });
 }
 
 </script>
@@ -186,9 +191,7 @@ const lookDetailAction = () => {
   margin-bottom: 8px;
   padding: 3px 8px;
   border-radius: 12px;
-  border: 1px solid rgba($theme-color-500, 0.2);
-  background: rgba($theme-color-500, 0.08);
-  color: $theme-color-500;
+  border: 1px solid transparent;
   font-size: 12px;
   line-height: 18px;
 }
diff --git a/src/utils/tagTone.js b/src/utils/tagTone.js
new file mode 100644
index 0000000..eb148f1
--- /dev/null
+++ b/src/utils/tagTone.js
@@ -0,0 +1,114 @@
+/// https://htmlcolorcodes.com/zh/yanse-biao/tailwind-yanse-biao/
+export const TAG_TONE_COLORS_500 = [
+  "#ef4444", // Red 500
+  "#f97316", // Orange 500
+  "#f59e0b", // Amber 500
+  "#eab308", // Yellow 500
+  "#84cc16", // Lime 500
+  "#22c55e", // Green 500
+  "#10b981", // Emerald 500
+  "#14b8a6", // Teal 500
+  "#06b6d4", // Cyan 500
+  "#0ea5e9", // Sky 500
+  "#3b82f6", // Blue 500
+  "#6366f1", // Indigo 500
+  "#8b5cf6", // Violet 500
+  "#a855f7", // Purple 500
+  "#d946ef", // Fuchsia 500
+  "#ec4899", // Pink 500
+];
+export const TAG_TONE_COLORS_800 = [
+  "#991b1b", // Red 800
+  "#9a3412", // Orange 800
+  "#92400e", // Amber 800
+  "#854d0e", // Yellow 800
+  "#3f6212", // Lime 800
+  "#166534", // Green 800
+  "#065f46", // Emerald 800
+  "#115e59", // Teal 800
+  "#155e75", // Cyan 800
+  "#075985", // Sky 800
+  "#1e40af", // Blue 800
+  "#3730a3", // Indigo 800
+  "#5b21b6", // Violet 800
+  "#6b21a5", // Purple 800
+  "#86198f", // Fuchsia 800
+  "#9d174d", // Pink 800
+];
+
+export const TAG_TONE_COLORS = TAG_TONE_COLORS_500;
+
+const normalizeHex = (hex = "") => {
+  const value = String(hex).trim().replace(/^#/, "");
+  if (/^[0-9a-fA-F]{3}$/.test(value)) {
+    return value
+      .split("")
+      .map((char) => char + char)
+      .join("");
+  }
+  return /^[0-9a-fA-F]{6}$/.test(value) ? value : "";
+};
+
+const hexToRgb = (hex) => {
+  const normalized = normalizeHex(hex);
+  if (!normalized) return null;
+
+  return {
+    r: parseInt(normalized.slice(0, 2), 16),
+    g: parseInt(normalized.slice(2, 4), 16),
+    b: parseInt(normalized.slice(4, 6), 16),
+  };
+};
+
+export const hexToRgba = (hex, alpha = 1) => {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return String(hex || "");
+  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
+};
+
+export const pickRandomTagToneColor = (colors = TAG_TONE_COLORS) => {
+  const colorList = Array.isArray(colors) && colors.length ? colors : TAG_TONE_COLORS;
+  return colorList[Math.floor(Math.random() * colorList.length)];
+};
+
+export const getTagToneTextColor = (
+  color,
+  colors500 = TAG_TONE_COLORS_500,
+  colors800 = TAG_TONE_COLORS_800
+) => {
+  const normalizedColor = normalizeHex(color).toLowerCase();
+  const toneIndex = colors500.findIndex(
+    (item) => normalizeHex(item).toLowerCase() === normalizedColor
+  );
+
+  return toneIndex >= 0 && colors800[toneIndex]
+    ? colors800[toneIndex]
+    : color;
+};
+
+export const buildTagToneStyle = (
+  color,
+  {
+    borderAlpha = 0.2,
+    backgroundAlpha = 0.08,
+    borderWidth = 1,
+    colors500 = TAG_TONE_COLORS_500,
+    colors800 = TAG_TONE_COLORS_800,
+  } = {}
+) => {
+  const toneColor = color || colors500[0] || TAG_TONE_COLORS_500[0];
+  const textColor = getTagToneTextColor(toneColor, colors500, colors800);
+
+  return {
+    border: `${borderWidth}px solid ${hexToRgba(toneColor, borderAlpha)}`,
+    background: hexToRgba(toneColor, backgroundAlpha),
+    color: textColor,
+  };
+};
+
+export const getRandomTagToneStyle = (options = {}) => {
+  return buildTagToneStyle(
+    pickRandomTagToneColor(options.colors),
+    options
+  );
+};