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 14:24:39 +08:00
parent 79abfd9d8c
commit 9e98f91dc8
2 changed files with 29 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -145,15 +145,15 @@
</view>
</view>
<view v-else-if="entry.type === 'list'" class="content-body-list-card" :style="contentBodyListCardStyle">
<view v-else-if="entry.type === 'list'" class="content-body-list-card" :style="getContentBodyListCardStyle(entry.key)">
<view v-for="(item, index) in entry.value" :key="index" class="content-body-list-item">
<view class="content-body-list-text">
<ChatMarkdown
class="content-body-markdown"
:text="formatLeafValue(item)"
:theme-color="contentBodyMarkdownColor"
:font-color="contentBodyMarkdownColor"
:font-sub-color="contentBodyMarkdownColor"
:theme-color="getContentBodyMarkdownColor(entry.key)"
:font-color="getContentBodyMarkdownColor(entry.key)"
:font-sub-color="getContentBodyMarkdownColor(entry.key)"
/>
</view>
</view>
@@ -164,11 +164,11 @@
</template>
<script setup>
import { computed, defineProps, ref } from "vue";
import { computed, defineProps } from "vue";
import { SEND_MESSAGE_CONTENT_TEXT } from "@/constant/constant";
import { getAccessToken } from "@/constant/token";
import { navigateTo } from "@/router";
import { getRandomTagToneStyle } from "@/utils/tagTone";
import { buildTagToneStyle } from "@/utils/tagTone";
import ChatMarkdown from "../ChatMarkdown/index.vue";
import {
LONG_TEXT_KEYS,
@@ -188,12 +188,29 @@ const props = defineProps({
},
});
const contentBodyListToneStyle = ref(getRandomTagToneStyle({ borderAlpha: 1, borderWidth: 4 }));
const contentBodyListCardStyle = computed(() => ({
borderLeft: contentBodyListToneStyle.value.border,
background: contentBodyListToneStyle.value.background,
}));
const contentBodyMarkdownColor = computed(() => contentBodyListToneStyle.value.color);
const LIST_WARNING_TONE_COLOR = "#f59e0b";
const LIST_DEFAULT_TONE_COLOR = "#10b981";
const LIST_TONE_OPTIONS = { borderAlpha: 1, borderWidth: 4 };
const getContentBodyListToneStyle = (key) => {
const toneColor = String(key || "").toLowerCase().includes("warning")
? LIST_WARNING_TONE_COLOR
: LIST_DEFAULT_TONE_COLOR;
return buildTagToneStyle(toneColor, LIST_TONE_OPTIONS);
};
const getContentBodyListCardStyle = (key) => {
const toneStyle = getContentBodyListToneStyle(key);
return {
borderLeft: toneStyle.border,
background: toneStyle.background,
};
};
const getContentBodyMarkdownColor = (key) => {
return getContentBodyListToneStyle(key).color;
};
const IGNORED_FIELD_KEYS = [];

24
src/utils/tagTone.js
View File

@@ -1,39 +1,15 @@
/// 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;