优化前端
This commit is contained in:
221
frontend/app/web-gold/src/components/ChatMessageRenderer.vue
Normal file
221
frontend/app/web-gold/src/components/ChatMessageRenderer.vue
Normal file
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<div class="prompt-display" v-html="renderedContent"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, computed } from 'vue'
|
||||
import { renderMarkdown } from '@/utils/markdown'
|
||||
|
||||
const props = defineProps({
|
||||
content: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
isStreaming: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
// 已完成的 chunks（包含已渲染的 HTML）
|
||||
const chunks = ref([])
|
||||
// chunk ID 计数器
|
||||
const chunkIdCounter = ref(0)
|
||||
|
||||
/**
|
||||
* 创建 chunk 对象（包含预渲染的 HTML）
|
||||
*/
|
||||
function createChunk(text) {
|
||||
return {
|
||||
id: chunkIdCounter.value++,
|
||||
text: text.trim(),
|
||||
rendered: renderMarkdown(text.trim()) // 预渲染，避免重复渲染
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 智能分块：业界成熟方案
|
||||
*/
|
||||
function splitIntoChunks(text) {
|
||||
if (!text || !text.trim()) return []
|
||||
|
||||
const result = []
|
||||
|
||||
// 第一级：按段落分割（双换行）
|
||||
const paragraphs = text.split(/\n\s*\n/)
|
||||
|
||||
for (const paragraph of paragraphs) {
|
||||
if (!paragraph.trim()) continue
|
||||
|
||||
// 如果段落长度适中（< 500字符），直接作为一个 chunk
|
||||
if (paragraph.trim().length < 500) {
|
||||
result.push(createChunk(paragraph))
|
||||
continue
|
||||
}
|
||||
|
||||
// 第二级：段落太长，按句子分割
|
||||
const sentences = paragraph.split(/([。！？.!?]\s*)/)
|
||||
let currentChunk = ''
|
||||
|
||||
for (let i = 0; i < sentences.length; i++) {
|
||||
currentChunk += sentences[i]
|
||||
|
||||
// 如果累积的句子达到一定长度（> 300字符），创建一个 chunk
|
||||
if (currentChunk.trim().length > 300) {
|
||||
result.push(createChunk(currentChunk))
|
||||
currentChunk = ''
|
||||
}
|
||||
}
|
||||
|
||||
// 处理剩余的文本
|
||||
if (currentChunk.trim()) {
|
||||
if (currentChunk.trim().length > 500) {
|
||||
// 第三级：按固定长度分割
|
||||
const fixedLength = 400
|
||||
let start = 0
|
||||
while (start < currentChunk.length) {
|
||||
const end = Math.min(start + fixedLength, currentChunk.length)
|
||||
const chunkText = currentChunk.slice(start, end).trim()
|
||||
if (chunkText) {
|
||||
result.push(createChunk(chunkText))
|
||||
}
|
||||
start = end
|
||||
}
|
||||
} else {
|
||||
result.push(createChunk(currentChunk))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算流式传输中的文本
|
||||
*/
|
||||
const streamingText = computed(() => {
|
||||
if (!props.isStreaming || !props.content) return ''
|
||||
|
||||
const text = props.content
|
||||
|
||||
// 优先查找最后一个段落分隔符
|
||||
const lastParagraphIndex = text.lastIndexOf('\n\n')
|
||||
if (lastParagraphIndex !== -1) {
|
||||
return text.slice(lastParagraphIndex + 2)
|
||||
}
|
||||
|
||||
// 查找最后一个句子结束符
|
||||
const lastSentenceMatch = text.match(/([。！？.!?]\s*)(?!.*[。！？.!?]\s*)/)
|
||||
if (lastSentenceMatch) {
|
||||
return text.slice(lastSentenceMatch.index + lastSentenceMatch[0].length)
|
||||
}
|
||||
|
||||
// 全部作为流式文本
|
||||
return text
|
||||
})
|
||||
|
||||
/**
|
||||
* 计算最终渲染的内容（合并所有 chunks 和流式文本）
|
||||
*/
|
||||
const renderedContent = computed(() => {
|
||||
let html = ''
|
||||
|
||||
// 添加已完成的 chunks
|
||||
for (const chunk of chunks.value) {
|
||||
html += chunk.rendered
|
||||
}
|
||||
|
||||
// 添加流式传输中的文本
|
||||
if (props.isStreaming && streamingText.value) {
|
||||
html += renderMarkdown(streamingText.value)
|
||||
}
|
||||
|
||||
return html
|
||||
})
|
||||
|
||||
/**
|
||||
* 增量更新 chunks（避免全量重新渲染）
|
||||
*/
|
||||
function updateChunksIncremental(content) {
|
||||
if (!content) {
|
||||
chunks.value = []
|
||||
return
|
||||
}
|
||||
|
||||
const text = content
|
||||
|
||||
// 查找最后一个段落分隔符
|
||||
const lastParagraphIndex = text.lastIndexOf('\n\n')
|
||||
let completedText = ''
|
||||
|
||||
if (lastParagraphIndex !== -1) {
|
||||
completedText = text.slice(0, lastParagraphIndex)
|
||||
} else {
|
||||
// 没有段落分隔符，查找最后一个句子结束符
|
||||
const lastSentenceMatch = text.match(/([。！？.!?]\s*)(?!.*[。！？.!?]\s*)/)
|
||||
if (lastSentenceMatch && lastSentenceMatch.index > 300) {
|
||||
completedText = text.slice(0, lastSentenceMatch.index + lastSentenceMatch[0].length)
|
||||
} else {
|
||||
// 流式传输中，还没有完整的段落或句子
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// 分割已完成的文本
|
||||
const newChunks = splitIntoChunks(completedText)
|
||||
|
||||
// 增量更新：只添加新的 chunks，保留已存在的
|
||||
if (newChunks.length > chunks.value.length) {
|
||||
// 只添加新增的 chunks
|
||||
const existingTexts = new Set(chunks.value.map(c => c.text))
|
||||
for (let i = chunks.value.length; i < newChunks.length; i++) {
|
||||
if (!existingTexts.has(newChunks[i].text)) {
|
||||
chunks.value.push(newChunks[i])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理内容更新
|
||||
*/
|
||||
function updateChunks(content) {
|
||||
if (!content) {
|
||||
chunks.value = []
|
||||
return
|
||||
}
|
||||
|
||||
if (props.isStreaming) {
|
||||
// 流式模式：增量更新
|
||||
updateChunksIncremental(content)
|
||||
} else {
|
||||
// 非流式模式：完整分割
|
||||
chunks.value = splitIntoChunks(content)
|
||||
}
|
||||
}
|
||||
|
||||
// 监听 content 变化
|
||||
watch(() => props.content, (newContent) => {
|
||||
updateChunks(newContent)
|
||||
}, { immediate: true })
|
||||
|
||||
// 监听 isStreaming 变化：流式结束时处理最后一个未完成的块
|
||||
watch(() => props.isStreaming, (newVal, oldVal) => {
|
||||
if (!newVal && oldVal && props.content) {
|
||||
// 流式结束，完整重新分割
|
||||
const newChunks = splitIntoChunks(props.content)
|
||||
chunks.value = newChunks
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 修复 pre 标签撑开容器的问题 */
|
||||
.prompt-display :deep(pre) {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
193
frontend/app/web-gold/src/components/GlobalLoading.vue
Normal file
193
frontend/app/web-gold/src/components/GlobalLoading.vue
Normal file
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Transition name="fade">
|
||||
<div v-if="visible" class="global-loading-overlay" @click.self="handleClick">
|
||||
<div class="global-loading-content">
|
||||
<div class="loading-spinner">
|
||||
<div class="spinner-ring"></div>
|
||||
<div class="spinner-ring"></div>
|
||||
<div class="spinner-ring"></div>
|
||||
<div class="spinner-ring"></div>
|
||||
</div>
|
||||
<div v-if="text" class="loading-text">{{ text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, defineEmits, watch, onUnmounted } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
clickable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['click'])
|
||||
|
||||
function handleClick() {
|
||||
if (props.clickable) {
|
||||
emit('click')
|
||||
}
|
||||
}
|
||||
|
||||
// 禁用/启用页面滚动
|
||||
function disableBodyScroll() {
|
||||
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth
|
||||
document.body.classList.add('global-loading-no-scroll')
|
||||
// 如果有滚动条，使用 CSS 变量存储宽度，防止页面抖动
|
||||
if (scrollbarWidth > 0) {
|
||||
document.documentElement.style.setProperty('--global-loading-scrollbar-width', `${scrollbarWidth}px`)
|
||||
}
|
||||
}
|
||||
|
||||
function enableBodyScroll() {
|
||||
document.body.classList.remove('global-loading-no-scroll')
|
||||
document.documentElement.style.removeProperty('--global-loading-scrollbar-width')
|
||||
}
|
||||
|
||||
// 监听 visible 变化，控制页面滚动
|
||||
watch(() => props.visible, (newVal) => {
|
||||
if (newVal) {
|
||||
disableBodyScroll()
|
||||
} else {
|
||||
enableBodyScroll()
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
// 组件卸载时恢复滚动
|
||||
onUnmounted(() => {
|
||||
enableBodyScroll()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.global-loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 99999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.global-loading-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* Loading 动画 */
|
||||
.loading-spinner {
|
||||
position: relative;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.spinner-ring {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: var(--color-primary, #3B82F6);
|
||||
border-radius: 50%;
|
||||
animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
||||
}
|
||||
|
||||
.spinner-ring:nth-child(1) {
|
||||
animation-delay: -0.45s;
|
||||
border-top-color: var(--color-primary, #3B82F6);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.spinner-ring:nth-child(2) {
|
||||
animation-delay: -0.3s;
|
||||
border-top-color: rgba(59, 130, 246, 0.8);
|
||||
opacity: 0.8;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.spinner-ring:nth-child(3) {
|
||||
animation-delay: -0.15s;
|
||||
border-top-color: rgba(59, 130, 246, 0.6);
|
||||
opacity: 0.6;
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
.spinner-ring:nth-child(4) {
|
||||
animation-delay: 0s;
|
||||
border-top-color: rgba(59, 130, 246, 0.4);
|
||||
opacity: 0.4;
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
top: 30%;
|
||||
left: 30%;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
color: var(--color-text, #F2F2F2);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* 淡入淡出动画 */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-enter-to,
|
||||
.fade-leave-from {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* 全局样式：禁用页面滚动 */
|
||||
body.global-loading-no-scroll {
|
||||
overflow: hidden !important;
|
||||
padding-right: var(--global-loading-scrollbar-width, 0);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user