xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-11-13 12:43:43 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

支持在 Chat 页面显示，隐藏对话列表

Browse Source
This commit is contained in:
RockYang
2025-01-06 19:17:18 +08:00
parent 499f5c915f
commit 9e689f6022
27 changed files with 438 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
web/src/components/ChatPrompt.vue
View File

@@ -17,7 +17,12 @@
</div>
<div class="body">
<div class="title">
<el-link :href="file.url" target="_blank" style="--el-font-weight-primary: bold">{{ file.name }}</el-link>
<el-link
:href="file.url"
target="_blank"
style="--el-font-weight-primary: bold"
>{{ file.name }}</el-link
>
</div>
<div class="info">
<span>{{ GetFileType(file.ext) }}</span>
@@ -56,7 +61,12 @@
</div>
<div class="body">
<div class="title">
<el-link :href="file.url" target="_blank" style="--el-font-weight-primary: bold">{{ file.name }}</el-link>
<el-link
:href="file.url"
target="_blank"
style="--el-font-weight-primary: bold"
>{{ file.name }}</el-link
>
</div>
<div class="info">
<span>{{ GetFileType(file.ext) }}</span>
@@ -81,15 +91,15 @@
</template>
<script setup>
import { onMounted, ref } from "vue";
import { Clock } from "@element-plus/icons-vue";
import { httpPost } from "@/utils/http";
import hl from "highlight.js";
import { dateFormat, isImage, processPrompt } from "@/utils/libs";
import { FormatFileSize, GetFileIcon, GetFileType } from "@/store/system";
import emoji from "markdown-it-emoji";
import mathjaxPlugin from "markdown-it-mathjax3";
import MarkdownIt from "markdown-it";
import { onMounted, ref } from 'vue'
import { Clock } from '@element-plus/icons-vue'
import { httpPost } from '@/utils/http'
import hl from 'highlight.js'
import { dateFormat, isImage, processPrompt } from '@/utils/libs'
import { FormatFileSize, GetFileIcon, GetFileType } from '@/store/system'
import emoji from 'markdown-it-emoji'
import mathjaxPlugin from 'markdown-it-mathjax3'
import MarkdownIt from 'markdown-it'
const md = new MarkdownIt({
breaks: true,
@@ -97,101 +107,100 @@ const md = new MarkdownIt({
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(
/<\/textarea>/g,
"&lt;/textarea>"
)}</textarea>`;
'&lt;/textarea>'
)}</textarea>`
if (lang && hl.getLanguage(lang)) {
const langHtml = `<span class="lang-name">${lang}</span>`;
const langHtml = `<span class="lang-name">${lang}</span>`
// 处理代码高亮
const preCode = hl.highlight(lang, str, true).value;
const preCode = hl.highlight(lang, str, true).value
// 将代码包裹在 pre 中
return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn} ${langHtml}</pre>`;
return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn} ${langHtml}</pre>`
}
// 处理代码高亮
const preCode = md.utils.escapeHtml(str);
const preCode = md.utils.escapeHtml(str)
// 将代码包裹在 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(emoji);
})
md.use(mathjaxPlugin)
md.use(emoji)
const props = defineProps({
data: {
type: Object,
default: {
content: "",
created_at: "",
content: '',
created_at: '',
tokens: 0,
model: "",
icon: "",
model: '',
icon: '',
},
},
listStyle: {
type: String,
default: "list",
default: 'list',
},
});
const finalTokens = ref(props.data.tokens);
const content = ref(processPrompt(props.data.content));
const files = ref([]);
})
const finalTokens = ref(props.data.tokens)
const content = ref(processPrompt(props.data.content))
const files = ref([])
onMounted(() => {
processFiles();
});
processFiles()
})
const processFiles = () => {
if (!props.data.content) {
return;
return
}
const linkRegex = /(https?:\/\/\S+)/g;
const links = props.data.content.match(linkRegex);
const urlPrefix = `${window.location.protocol}//${window.location.host}`;
const linkRegex = /(https?:\/\/\S+)/g
const links = props.data.content.match(linkRegex)
const urlPrefix = `${window.location.protocol}//${window.location.host}`
if (links) {
const _links = links.map((link) => {
if (link.startsWith(urlPrefix)) {
return link.replace(urlPrefix, "");
return link.replace(urlPrefix, '')
}
return link;
});
return link
})
// 合并数组并去重
const urls = [...new Set([...links, ..._links])];
httpPost("/api/upload/list", { urls: urls })
.then((res) => {
files.value = res.data.items;
const urls = [...new Set([...links, ..._links])]
httpPost('/api/upload/list', { urls: urls })
.then((res) => {
files.value = res.data.items
for (let link of links) {
if (isExternalImg(link, files.value)) {
files.value.push({ url: link, ext: ".png" });
}
for (let link of links) {
if (isExternalImg(link, files.value)) {
files.value.push({ url: link, ext: '.png' })
}
})
.catch(() => {});
}
})
.catch(() => {})
for (let link of links) {
content.value = content.value.replace(link,"")
content.value = content.value.replace(link, '')
}
}
content.value = md.render(content.value.trim())
}
const isExternalImg = (link, files) => {
return isImage(link) && !files.find(file => file.url === link)
return isImage(link) && !files.find((file) => file.url === link)
}
</script>
<style lang="stylus">
@import '@/assets/css/markdown/vue.css';
.chat-page,.chat-export {
.chat-page, .chat-export {
.chat-line-prompt-list {
background-color:var( --chat-content-bg-list);
color:var(--theme-text-color-primary);
background-color: var(--chat-content-bg-list);
color: var(--theme-text-color-primary);
justify-content: center;
width 100%
padding-bottom: 1.5rem;
@@ -223,6 +232,7 @@ const isExternalImg = (link, files) => {
.file-list-box {
display flex
flex-flow column
.image {
display flex
flex-flow row
@@ -235,13 +245,14 @@ const isExternalImg = (link, files) => {
margin-bottom 10px
}
}
.item {
display flex
flex-flow row
border-radius 10px
background-color:var(--chat-content-bg);
background-color: var(--chat-content-bg);
border 1px solid #e3e3e3
color:var(--theme-text-color-primary);
color: var(--theme-text-color-primary);
padding 6px
margin-bottom 10px
@@ -251,14 +262,17 @@ const isExternalImg = (link, files) => {
height 40px
}
}
.body {
margin-left 8px
font-size 14px
.title {
font-weight bold
line-height 24px
color #0D0D0D
}
.info {
color #B4B4B4
@@ -273,7 +287,7 @@ const isExternalImg = (link, files) => {
.content {
word-break break-word;
padding: 0;
color:var(--theme-text-color-primary);
color: var(--theme-text-color-primary);
font-size: var(--content-font-size);
border-radius: 5px;
overflow: auto;
@@ -346,11 +360,12 @@ const isExternalImg = (link, files) => {
.chat-item {
padding: 0;
overflow: hidden;
max-width 60%
max-width calc(100% - 110px);
.file-list-box {
display flex
flex-flow column
.image {
display flex
flex-flow row
@@ -363,12 +378,13 @@ const isExternalImg = (link, files) => {
margin-bottom 10px
}
}
.item {
display flex
flex-flow row
border-radius 10px
background-color:var(--chat-content-bg);
color:var(--theme-text-color-primary);
background-color: var(--chat-content-bg);
color: var(--theme-text-color-primary);
border 1px solid #e3e3e3
padding 6px
margin-bottom 10px
@@ -379,14 +395,17 @@ const isExternalImg = (link, files) => {
height 40px
}
}
.body {
margin-left 8px
font-size 14px
.title {
font-weight bold
line-height 24px
color #0D0D0D
}
.info {
color #B4B4B4
@@ -402,35 +421,37 @@ const isExternalImg = (link, files) => {
.content-wrapper {
display flex
flex-flow row-reverse
.content {
word-break break-word;
padding: 1rem
color var(--theme-text-primary);
font-size: var(--content-font-size);
overflow: auto;
background-color :var(--chat-content-bg);
border-radius: 10px 0 10px 10px;
word-break break-word;
padding: 1rem
color var(--theme-text-primary);
font-size: var(--content-font-size);
overflow: auto;
background-color: var(--chat-user-content-bg);
border-radius: 10px 0 10px 10px;
img {
max-width: 600px;
border-radius: 10px;
margin 10px 0
}
p {
line-height 1.5
}
p:last-child {
margin-bottom: 0
}
p:first-child {
margin-top 0
}
img {
max-width: 600px;
border-radius: 10px;
margin 10px 0
}
p {
line-height 1.5
}
p:last-child {
margin-bottom: 0
}
p:first-child {
margin-top 0
}
}
}
.bar {
padding 10px 10px 10px 0;