feat: 颜色样式随机调整

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;