mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-09-17 16:56:38 +08:00
opt: refactor chat session page for mobile device
This commit is contained in:
RockYang
parent
cd760bbd84
commit
4a00809061
@ -16,7 +16,7 @@
|
||||
}
|
||||
.mobile-chat .chat-box-wrapper .van-sticky .van-cell-group--inset .van-cell .icon-box .van-icon {
|
||||
font-size: 24px;
|
||||
margin: 10px 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.mobile-chat .chat-box-wrapper .van-sticky .van-cell-group--inset .van-cell .button-voice {
|
||||
padding: 0 5px;
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
.icon-box {
|
||||
.van-icon {
|
||||
font-size 24px
|
||||
margin 10px 0
|
||||
margin-left 10px
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<div class="chat-item">
|
||||
<div class="triangle"></div>
|
||||
<div class="content-box">
|
||||
<div ref="contentRef" :data-clipboard-text="orgContent" class="content" v-html="content"></div>
|
||||
<div :data-clipboard-text="orgContent" class="content content-mobile" v-html="content"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -34,17 +34,6 @@ const props = defineProps({
|
||||
default: '/images/gpt-icon.png',
|
||||
}
|
||||
});
|
||||
|
||||
const contentRef = ref(null)
|
||||
onMounted(() => {
|
||||
const clipboard = new Clipboard(contentRef.value);
|
||||
clipboard.on('success', () => {
|
||||
showNotify({type: 'success', message: '复制成功', duration: 1000})
|
||||
})
|
||||
clipboard.on('error', () => {
|
||||
showNotify({type: 'danger', message: '复制失败', duration: 2000})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
@ -118,6 +107,77 @@ onMounted(() => {
|
||||
max-width 100%
|
||||
}
|
||||
}
|
||||
|
||||
.code-container {
|
||||
position relative
|
||||
|
||||
.hljs {
|
||||
border-radius 10px
|
||||
line-height 1.5
|
||||
}
|
||||
|
||||
.copy-code-mobile {
|
||||
position: absolute;
|
||||
right 10px
|
||||
top 10px
|
||||
cursor pointer
|
||||
font-size 12px
|
||||
color #c1c1c1
|
||||
|
||||
&:hover {
|
||||
color #20a0ff
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.lang-name {
|
||||
display none
|
||||
position absolute;
|
||||
right 10px
|
||||
bottom 50px
|
||||
padding 2px 6px 4px 6px
|
||||
background-color #444444
|
||||
border-radius 10px
|
||||
color #00e0e0
|
||||
}
|
||||
|
||||
|
||||
// 设置表格边框
|
||||
|
||||
table {
|
||||
width 100%
|
||||
margin-bottom 1rem
|
||||
color #212529
|
||||
border-collapse collapse;
|
||||
border 1px solid #dee2e6;
|
||||
background-color #ffffff
|
||||
|
||||
thead {
|
||||
th {
|
||||
border 1px solid #dee2e6
|
||||
vertical-align: bottom
|
||||
border-bottom: 2px solid #dee2e6
|
||||
padding 10px
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
border 1px solid #dee2e6
|
||||
padding 10px
|
||||
}
|
||||
}
|
||||
|
||||
// 代码快
|
||||
|
||||
blockquote {
|
||||
margin 0
|
||||
background-color: #ebfffe;
|
||||
padding: 0.8rem 1.5rem;
|
||||
border-left: 0.5rem solid;
|
||||
border-color: #026863;
|
||||
color: #2c3e50;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -194,7 +194,12 @@ const routes = [
|
||||
name: 'mobile-chat-session',
|
||||
component: () => import('@/views/mobile/ChatSession.vue'),
|
||||
},
|
||||
|
||||
{
|
||||
path: '/mobile/chat/export',
|
||||
name: 'mobile-chat-export',
|
||||
component: () => import('@/views/mobile/ChatExport.vue'),
|
||||
},
|
||||
|
||||
{
|
||||
name: 'test',
|
||||
path: '/test',
|
||||
|
||||
@ -166,3 +166,34 @@ export function isImage(url) {
|
||||
return expr.test(url);
|
||||
}
|
||||
|
||||
export function processContent(content) {
|
||||
//process img url
|
||||
const linkRegex = /(https?:\/\/\S+)/g;
|
||||
const links = content.match(linkRegex);
|
||||
if (links) {
|
||||
for (let link of links) {
|
||||
if (isImage(link)) {
|
||||
const index = content.indexOf(link)
|
||||
if (content.substring(index - 1, 2) !== "]") {
|
||||
content = content.replace(link, "\n![](" + link + ")\n")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 处理引用块
|
||||
if (content.indexOf("\n") === -1) {
|
||||
return content
|
||||
}
|
||||
|
||||
const texts = content.split("\n")
|
||||
const lines = []
|
||||
for (let txt of texts) {
|
||||
lines.push(txt)
|
||||
if (txt.startsWith(">")) {
|
||||
lines.push("\n")
|
||||
}
|
||||
}
|
||||
return lines.join("\n")
|
||||
}
|
||||
|
||||
|
||||
@ -14,7 +14,6 @@
|
||||
:icon="item.icon"
|
||||
:created-at="dateFormat(item['created_at'])"
|
||||
:tokens="item['tokens']"
|
||||
:model="model"
|
||||
:content="item.content"/>
|
||||
<chat-reply v-else-if="item.type==='reply'"
|
||||
:icon="item.icon"
|
||||
|
||||
@ -266,7 +266,7 @@ import {
|
||||
VideoPause
|
||||
} from '@element-plus/icons-vue'
|
||||
import 'highlight.js/styles/a11y-dark.css'
|
||||
import {dateFormat, isImage, isMobile, randString, removeArrayItem, UUID} from "@/utils/libs";
|
||||
import {dateFormat, isImage, isMobile, processContent, randString, removeArrayItem, UUID} from "@/utils/libs";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import hl from "highlight.js";
|
||||
import {getSessionId, getUserToken, removeUserToken} from "@/store/session";
|
||||
@ -803,37 +803,6 @@ const loadChatHistory = function (chatId) {
|
||||
})
|
||||
}
|
||||
|
||||
const processContent = (content) => {
|
||||
//process img url
|
||||
const linkRegex = /(https?:\/\/\S+)/g;
|
||||
const links = content.match(linkRegex);
|
||||
if (links) {
|
||||
for (let link of links) {
|
||||
if (isImage(link)) {
|
||||
const index = content.indexOf(link)
|
||||
if (content.substring(index - 1, 2) !== "]") {
|
||||
content = content.replace(link, "\n![](" + link + ")\n")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 处理引用块
|
||||
if (content.indexOf("\n") === -1) {
|
||||
return content
|
||||
}
|
||||
|
||||
const texts = content.split("\n")
|
||||
const lines = []
|
||||
for (let txt of texts) {
|
||||
lines.push(txt)
|
||||
if (txt.startsWith(">")) {
|
||||
lines.push("\n")
|
||||
}
|
||||
}
|
||||
return lines.join("\n")
|
||||
}
|
||||
|
||||
const stopGenerate = function () {
|
||||
showStopGenerate.value = false;
|
||||
httpGet("/api/chat/stop?session_id=" + getSessionId()).then(() => {
|
||||
|
||||
@ -309,7 +309,7 @@ const handleSelectionChange = function (rows) {
|
||||
const resetPass = (row) => {
|
||||
showResetPassDialog.value = true
|
||||
pass.value.id = row.id
|
||||
pass.value.username = row.mobile
|
||||
pass.value.username = row.username
|
||||
}
|
||||
|
||||
const doResetPass = () => {
|
||||
|
||||
159
web/src/views/mobile/ChatExport.vue
Normal file
159
web/src/views/mobile/ChatExport.vue
Normal file
@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="chat-export-mobile">
|
||||
<div class="chat-box">
|
||||
<van-sticky :offset-top="0" position="top">
|
||||
<van-nav-bar left-arrow left-text="返回" @click-left="router.back()">
|
||||
<template #title>
|
||||
<van-dropdown-menu>
|
||||
<van-dropdown-item :title="title">
|
||||
<van-cell center title="角色"> {{ role }}</van-cell>
|
||||
<van-cell center title="模型">{{ model }}</van-cell>
|
||||
</van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</template>
|
||||
</van-nav-bar>
|
||||
</van-sticky>
|
||||
|
||||
<div class="chat-list-wrapper">
|
||||
<div id="message-list-box" class="message-list-box">
|
||||
<van-list
|
||||
v-model:error="error"
|
||||
:finished="finished"
|
||||
error-text="请求失败，点击重新加载"
|
||||
@load="onLoad"
|
||||
>
|
||||
<van-cell v-for="item in chatData" :key="item" :border="false" class="message-line">
|
||||
<chat-prompt
|
||||
v-if="item.type==='prompt'"
|
||||
:content="item.content"
|
||||
:created-at="dateFormat(item['created_at'])"
|
||||
:icon="item.icon"
|
||||
:tokens="item['tokens']"/>
|
||||
<chat-reply v-else-if="item.type==='reply'"
|
||||
:content="item.content"
|
||||
:created-at="dateFormat(item['created_at'])"
|
||||
:icon="item.icon"
|
||||
:org-content="item.orgContent"
|
||||
:tokens="item['tokens']"/>
|
||||
</van-cell>
|
||||
</van-list>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- end chat box -->
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
import {dateFormat, processContent} from "@/utils/libs";
|
||||
import ChatReply from "@/components/mobile/ChatReply.vue";
|
||||
import ChatPrompt from "@/components/mobile/ChatPrompt.vue";
|
||||
import {nextTick, ref} from "vue";
|
||||
import {useRouter} from "vue-router";
|
||||
import {httpGet} from "@/utils/http";
|
||||
import 'highlight.js/styles/a11y-dark.css'
|
||||
import hl from "highlight.js";
|
||||
|
||||
const chatData = ref([])
|
||||
const router = useRouter()
|
||||
const chatId = router.currentRoute.value.query['chat_id']
|
||||
const title = router.currentRoute.value.query['title']
|
||||
const role = router.currentRoute.value.query['role']
|
||||
const model = router.currentRoute.value.query['model']
|
||||
const finished = ref(false)
|
||||
const error = ref(false)
|
||||
|
||||
const md = require('markdown-it')({
|
||||
breaks: true,
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true,
|
||||
highlight: function (str, lang) {
|
||||
const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000)
|
||||
// 显示复制代码按钮
|
||||
const copyBtn = `<span class="copy-code-mobile" 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, '</textarea>')}</textarea>`
|
||||
if (lang && hl.getLanguage(lang)) {
|
||||
const langHtml = `<span class="lang-name">${lang}</span>`
|
||||
// 处理代码高亮
|
||||
const preCode = hl.highlight(lang, str, true).value
|
||||
// 将代码包裹在 pre 中
|
||||
return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn} ${langHtml}</pre>`
|
||||
}
|
||||
|
||||
// 处理代码高亮
|
||||
const preCode = md.utils.escapeHtml(str)
|
||||
// 将代码包裹在 pre 中
|
||||
return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn}</pre>`
|
||||
}
|
||||
});
|
||||
|
||||
const onLoad = () => {
|
||||
httpGet('/api/chat/history?chat_id=' + chatId).then(res => {
|
||||
// 加载状态结束
|
||||
finished.value = true;
|
||||
const data = res.data
|
||||
if (data && data.length > 0) {
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data[i].type === "prompt") {
|
||||
chatData.value.push(data[i]);
|
||||
continue;
|
||||
}
|
||||
|
||||
data[i].orgContent = data[i].content;
|
||||
data[i].content = md.render(processContent(data[i].content))
|
||||
chatData.value.push(data[i]);
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
hl.configure({ignoreUnescapedHTML: true})
|
||||
const blocks = document.querySelector("#message-list-box").querySelectorAll('pre code');
|
||||
blocks.forEach((block) => {
|
||||
hl.highlightElement(block)
|
||||
})
|
||||
})
|
||||
}
|
||||
}).catch(() => {
|
||||
error.value = true
|
||||
})
|
||||
|
||||
};
|
||||
|
||||
</script>
|
||||
<style lang="stylus">
|
||||
.chat-export-mobile {
|
||||
background #F5F5F5;
|
||||
height 100vh
|
||||
|
||||
.chat-box {
|
||||
font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
|
||||
|
||||
.message-list-box {
|
||||
background #F5F5F5;
|
||||
padding-top 50px
|
||||
padding-bottom: 10px
|
||||
|
||||
.van-cell {
|
||||
background none
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.van-nav-bar__title {
|
||||
.van-dropdown-menu__title {
|
||||
margin-right 10px
|
||||
}
|
||||
|
||||
.van-cell__title {
|
||||
text-align left
|
||||
}
|
||||
}
|
||||
|
||||
.van-nav-bar__right {
|
||||
.van-icon {
|
||||
font-size 20px
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -48,14 +48,6 @@
|
||||
:icon="item.icon"
|
||||
:org-content="item.orgContent"
|
||||
:tokens="item['tokens']"/>
|
||||
<chat-mid-journey v-else-if="item.type==='mj'"
|
||||
:content="item.content"
|
||||
:icon="item.icon"
|
||||
:role-id="role"
|
||||
:chat-id="chatId"
|
||||
@disable-input="disableInput(true)"
|
||||
@enable-input="enableInput"
|
||||
:created-at="dateFormat(item['created_at'])"/>
|
||||
</van-cell>
|
||||
</van-list>
|
||||
</div>
|
||||
@ -87,18 +79,19 @@
|
||||
</template>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
|
||||
</van-sticky>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="copy-link-btn" style="display: none;" :data-clipboard-text="url">复制链接地址</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {nextTick, onMounted, ref} from "vue";
|
||||
import {showFailToast, showNotify, showToast} from "vant";
|
||||
import {showNotify, showToast} from "vant";
|
||||
import {onBeforeRouteLeave, useRouter} from "vue-router";
|
||||
import {dateFormat, randString, renderInputText, UUID} from "@/utils/libs";
|
||||
import {dateFormat, processContent, randString, renderInputText, UUID} from "@/utils/libs";
|
||||
import {getChatConfig} from "@/store/chat";
|
||||
import {httpGet} from "@/utils/http";
|
||||
import hl from "highlight.js";
|
||||
@ -107,7 +100,7 @@ import ChatPrompt from "@/components/mobile/ChatPrompt.vue";
|
||||
import ChatReply from "@/components/mobile/ChatReply.vue";
|
||||
import {getSessionId, getUserToken} from "@/store/session";
|
||||
import {checkSession} from "@/action/session";
|
||||
import ChatMidJourney from "@/components/mobile/ChatMidJourney.vue";
|
||||
import Clipboard from "clipboard";
|
||||
|
||||
const winHeight = ref(0)
|
||||
const navBarRef = ref(null)
|
||||
@ -122,10 +115,19 @@ const title = chatConfig.title
|
||||
const chatId = chatConfig.chatId
|
||||
const loginUser = ref(null)
|
||||
|
||||
const hits = ref(0)
|
||||
const url = location.protocol + '//' + location.host + '/mobile/chat/export?chat_id=' + chatId
|
||||
|
||||
onMounted(() => {
|
||||
winHeight.value = document.body.offsetHeight - navBarRef.value.$el.offsetHeight - bottomBarRef.value.$el.offsetHeight
|
||||
|
||||
const clipboard = new Clipboard(".content-mobile,.copy-code-mobile,#copy-link-btn");
|
||||
clipboard.on('success', (e) => {
|
||||
e.clearSelection()
|
||||
showNotify({type: 'success', message: '复制成功', duration: 1000})
|
||||
})
|
||||
clipboard.on('error', () => {
|
||||
showNotify({type: 'danger', message: '复制失败', duration: 2000})
|
||||
})
|
||||
})
|
||||
|
||||
const chatData = ref([])
|
||||
@ -139,26 +141,45 @@ checkSession().then(user => {
|
||||
router.push('/login')
|
||||
})
|
||||
|
||||
const md = require('markdown-it')({
|
||||
breaks: true,
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true,
|
||||
highlight: function (str, lang) {
|
||||
const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000)
|
||||
// 显示复制代码按钮
|
||||
const copyBtn = `<span class="copy-code-mobile" 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, '</textarea>')}</textarea>`
|
||||
if (lang && hl.getLanguage(lang)) {
|
||||
const langHtml = `<span class="lang-name">${lang}</span>`
|
||||
// 处理代码高亮
|
||||
const preCode = hl.highlight(lang, str, true).value
|
||||
// 将代码包裹在 pre 中
|
||||
return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn} ${langHtml}</pre>`
|
||||
}
|
||||
|
||||
// 处理代码高亮
|
||||
const preCode = md.utils.escapeHtml(str)
|
||||
// 将代码包裹在 pre 中
|
||||
return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn}</pre>`
|
||||
}
|
||||
});
|
||||
|
||||
const onLoad = () => {
|
||||
httpGet('/api/chat/history?chat_id=' + chatId).then(res => {
|
||||
// 加载状态结束
|
||||
finished.value = true;
|
||||
const data = res.data
|
||||
if (data && data.length > 0) {
|
||||
const md = require('markdown-it')({breaks: true});
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data[i].type === "prompt") {
|
||||
chatData.value.push(data[i]);
|
||||
continue;
|
||||
} else if (data[i].type === "mj") {
|
||||
data[i].content = JSON.parse(data[i].content)
|
||||
data[i].content.html = md.render(data[i].content?.content)
|
||||
chatData.value.push(data[i]);
|
||||
continue;
|
||||
}
|
||||
|
||||
data[i].orgContent = data[i].content;
|
||||
data[i].content = md.render(data[i].content);
|
||||
data[i].content = md.render(processContent(data[i].content))
|
||||
chatData.value.push(data[i]);
|
||||
}
|
||||
|
||||
@ -265,47 +286,15 @@ const connect = function (chat_id, role_id) {
|
||||
icon: role.icon,
|
||||
content: ""
|
||||
});
|
||||
} else if (data.type === "mj") {
|
||||
disableInput(true)
|
||||
const content = data.content;
|
||||
const md = require('markdown-it')({breaks: true});
|
||||
content.html = md.render(content.content)
|
||||
let key = content.key
|
||||
// fixed bug: 执行 Upscale 和 Variation 操作的时候覆盖之前的绘画
|
||||
if (content.status === "Finished") {
|
||||
key = randString(32)
|
||||
enableInput()
|
||||
}
|
||||
// console.log(content)
|
||||
// check if the message is in chatData
|
||||
let flag = false
|
||||
for (let i = 0; i < chatData.value.length; i++) {
|
||||
if (chatData.value[i].id === content.key) {
|
||||
flag = true
|
||||
chatData.value[i].content = content
|
||||
chatData.value[i].id = key
|
||||
break
|
||||
}
|
||||
}
|
||||
if (flag === false) {
|
||||
chatData.value.push({
|
||||
type: "mj",
|
||||
id: key,
|
||||
icon: "/images/avatar/mid_journey.png",
|
||||
content: content
|
||||
});
|
||||
}
|
||||
|
||||
} else if (data.type === 'end') { // 消息接收完毕
|
||||
enableInput()
|
||||
lineBuffer.value = ''; // 清空缓冲
|
||||
|
||||
} else {
|
||||
lineBuffer.value += data.content;
|
||||
const md = require('markdown-it')({breaks: true});
|
||||
const reply = chatData.value[chatData.value.length - 1]
|
||||
reply['orgContent'] = lineBuffer.value;
|
||||
reply['content'] = md.render(lineBuffer.value);
|
||||
reply['content'] = md.render(processContent(lineBuffer.value));
|
||||
|
||||
nextTick(() => {
|
||||
hl.configure({ignoreUnescapedHTML: true})
|
||||
@ -414,9 +403,17 @@ const shareOptions = [
|
||||
{name: '微信', icon: 'wechat'},
|
||||
{name: '复制链接', icon: 'link'},
|
||||
]
|
||||
const shareChat = () => {
|
||||
const shareChat = (option) => {
|
||||
showShare.value = false
|
||||
showToast('功能待开发')
|
||||
if (option.icon === "wechat") {
|
||||
showToast({message: "当前会话已经导出，请通过浏览器或者微信的自带分享功能分享给好友", duration: 5000})
|
||||
router.push({
|
||||
path: "/mobile/chat/export",
|
||||
query: {title: title, chat_id: chatId, role: role.name, model: modelValue}
|
||||
})
|
||||
} else if (option.icon === "link") {
|
||||
document.getElementById('copy-link-btn').click();
|
||||
}
|
||||
}
|
||||
|
||||
const inputVoice = () => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user