feat: 颜色样式随机调整

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;
 }