颜色修改

This commit is contained in:
lqins 2024-12-22 13:55:01 +08:00
parent ba174ef3ee
commit fb403bde8b

View File

@ -6,14 +6,23 @@
</div>
<div class="chat-item">
<div class="content" v-html="md.render(processContent(data.content))"></div>
<div
class="content"
v-html="md.render(processContent(data.content))"
></div>
<div class="bar" v-if="data.created_at">
<span class="bar-item"
><el-icon><Clock /></el-icon> {{ dateFormat(data.created_at) }}</span
><el-icon><Clock /></el-icon>
{{ dateFormat(data.created_at) }}</span
>
<span class="bar-item">tokens: {{ data.tokens }}</span>
<span class="bar-item">
<el-tooltip class="box-item" effect="dark" content="复制回答" placement="bottom">
<el-tooltip
class="box-item"
effect="dark"
content="复制回答"
placement="bottom"
>
<el-icon class="copy-reply" :data-clipboard-text="data.content">
<DocumentCopy />
</el-icon>
@ -21,13 +30,23 @@
</span>
<span v-if="!readOnly">
<span class="bar-item" @click="reGenerate(data.prompt)">
<el-tooltip class="box-item" effect="dark" content="重新生成" placement="bottom">
<el-tooltip
class="box-item"
effect="dark"
content="重新生成"
placement="bottom"
>
<el-icon><Refresh /></el-icon>
</el-tooltip>
</span>
<span class="bar-item" @click="synthesis(data.content)">
<el-tooltip class="box-item" effect="dark" content="生成语音朗读" placement="bottom">
<el-tooltip
class="box-item"
effect="dark"
content="生成语音朗读"
placement="bottom"
>
<i class="iconfont icon-speaker"></i>
</el-tooltip>
</span>
@ -56,15 +75,24 @@
</div>
<div class="chat-item">
<div class="content-wrapper">
<div class="content" v-html="md.render(processContent(data.content))"></div>
<div
class="content"
v-html="md.render(processContent(data.content))"
></div>
</div>
<div class="bar" v-if="data.created_at">
<span class="bar-item"
><el-icon><Clock /></el-icon> {{ dateFormat(data.created_at) }}</span
><el-icon><Clock /></el-icon>
{{ dateFormat(data.created_at) }}</span
>
<!-- <span class="bar-item">tokens: {{ data.tokens }}</span>-->
<span class="bar-item bg">
<el-tooltip class="box-item" effect="dark" content="复制回答" placement="bottom">
<el-tooltip
class="box-item"
effect="dark"
content="复制回答"
placement="bottom"
>
<el-icon class="copy-reply" :data-clipboard-text="data.content">
<DocumentCopy />
</el-icon>
@ -72,13 +100,23 @@
</span>
<span v-if="!readOnly">
<span class="bar-item bg" @click="reGenerate(data.prompt)">
<el-tooltip class="box-item" effect="dark" content="重新生成" placement="bottom">
<el-tooltip
class="box-item"
effect="dark"
content="重新生成"
placement="bottom"
>
<el-icon><Refresh /></el-icon>
</el-tooltip>
</span>
<span class="bar-item bg" @click="synthesis(data.content)">
<el-tooltip class="box-item" effect="dark" content="生成语音朗读" placement="bottom">
<el-tooltip
class="box-item"
effect="dark"
content="生成语音朗读"
placement="bottom"
>
<i class="iconfont icon-speaker"></i>
</el-tooltip>
</span>
@ -102,17 +140,17 @@ const props = defineProps({
icon: "",
content: "",
created_at: "",
tokens: 0,
},
tokens: 0
}
},
readOnly: {
type: Boolean,
default: false,
default: false
},
listStyle: {
type: String,
default: "list",
},
default: "list"
}
});
const mathjaxPlugin = require("markdown-it-mathjax3");
@ -122,7 +160,8 @@ const md = require("markdown-it")({
linkify: true,
typographer: true,
highlight: function (str, lang) {
const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000);
const codeIndex =
parseInt(Date.now()) + Math.floor(Math.random() * 10000000);
//
const copyBtn = `<span class="copy-code-btn" data-clipboard-action="copy" data-clipboard-target="#copy-target-${codeIndex}">复制</span>
<textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy-target-${codeIndex}">${str.replace(
@ -141,7 +180,7 @@ const md = require("markdown-it")({
const preCode = md.utils.escapeHtml(str);
// pre
return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn}</pre>`;
},
}
});
md.use(mathjaxPlugin);
@ -216,7 +255,8 @@ const reGenerate = (prompt) => {
line-height 1.5
code {
color:var(--theme-text-color-primary);
// color:var(--theme-text-color-primary);
color:#fff
background-color var(--el-color-primary-light-3)
padding 3px 5px;
border-radius 5px;