颜色修改

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>
<div class="chat-item"> <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"> <div class="bar" v-if="data.created_at">
<span class="bar-item" <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">tokens: {{ data.tokens }}</span>
<span class="bar-item"> <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"> <el-icon class="copy-reply" :data-clipboard-text="data.content">
<DocumentCopy /> <DocumentCopy />
</el-icon> </el-icon>
@ -21,13 +30,23 @@
</span> </span>
<span v-if="!readOnly"> <span v-if="!readOnly">
<span class="bar-item" @click="reGenerate(data.prompt)"> <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-icon><Refresh /></el-icon>
</el-tooltip> </el-tooltip>
</span> </span>
<span class="bar-item" @click="synthesis(data.content)"> <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> <i class="iconfont icon-speaker"></i>
</el-tooltip> </el-tooltip>
</span> </span>
@ -56,15 +75,24 @@
</div> </div>
<div class="chat-item"> <div class="chat-item">
<div class="content-wrapper"> <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>
<div class="bar" v-if="data.created_at"> <div class="bar" v-if="data.created_at">
<span class="bar-item" <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">tokens: {{ data.tokens }}</span>-->
<span class="bar-item bg"> <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"> <el-icon class="copy-reply" :data-clipboard-text="data.content">
<DocumentCopy /> <DocumentCopy />
</el-icon> </el-icon>
@ -72,13 +100,23 @@
</span> </span>
<span v-if="!readOnly"> <span v-if="!readOnly">
<span class="bar-item bg" @click="reGenerate(data.prompt)"> <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-icon><Refresh /></el-icon>
</el-tooltip> </el-tooltip>
</span> </span>
<span class="bar-item bg" @click="synthesis(data.content)"> <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> <i class="iconfont icon-speaker"></i>
</el-tooltip> </el-tooltip>
</span> </span>
@ -102,17 +140,17 @@ const props = defineProps({
icon: "", icon: "",
content: "", content: "",
created_at: "", created_at: "",
tokens: 0, tokens: 0
}, }
}, },
readOnly: { readOnly: {
type: Boolean, type: Boolean,
default: false, default: false
}, },
listStyle: { listStyle: {
type: String, type: String,
default: "list", default: "list"
}, }
}); });
const mathjaxPlugin = require("markdown-it-mathjax3"); const mathjaxPlugin = require("markdown-it-mathjax3");
@ -122,7 +160,8 @@ const md = require("markdown-it")({
linkify: true, linkify: true,
typographer: true, typographer: true,
highlight: function (str, lang) { 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> 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( <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); const preCode = md.utils.escapeHtml(str);
// pre // pre
return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn}</pre>`; return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn}</pre>`;
}, }
}); });
md.use(mathjaxPlugin); md.use(mathjaxPlugin);
@ -216,7 +255,8 @@ const reGenerate = (prompt) => {
line-height 1.5 line-height 1.5
code { code {
color:var(--theme-text-color-primary); // color:var(--theme-text-color-primary);
color:#fff
background-color var(--el-color-primary-light-3) background-color var(--el-color-primary-light-3)
padding 3px 5px; padding 3px 5px;
border-radius 5px; border-radius 5px;