style: 删除冗余代码， 优化样式
This commit is contained in:
parent
54d6034f16
commit
35414d99de
|
|
@ -23,13 +23,7 @@ const routes = [
|
||||||
{
|
{
|
||||||
path: '/conversations',
|
path: '/conversations',
|
||||||
name: 'Conversations',
|
name: 'Conversations',
|
||||||
component: () => import('../views/ConversationsView.vue'),
|
component: () => import('../views/ConversationView.vue'),
|
||||||
meta: { requiresAuth: true }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/conversations/:id',
|
|
||||||
name: 'ConversationDetail',
|
|
||||||
component: () => import('../views/ConversationDetailView.vue'),
|
|
||||||
meta: { requiresAuth: true }
|
meta: { requiresAuth: true }
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -1,526 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="chat-view main-panel">
|
|
||||||
<div v-if="!conversationId" class="welcome">
|
|
||||||
<div class="welcome-icon">
|
|
||||||
<svg viewBox="0 0 64 64" width="36" height="36">
|
|
||||||
<rect width="64" height="64" rx="14" fill="url(#favBg)"/>
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="favBg" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
||||||
<stop offset="0%" stop-color="#2563eb"/>
|
|
||||||
<stop offset="100%" stop-color="#60a5fa"/>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
<text x="32" y="40" text-anchor="middle" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="18" font-weight="800" fill="#fff" letter-spacing="-0.5">Luxx</text>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h1>Chat</h1>
|
|
||||||
<p>选择一个对话开始，或创建新对话</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<template v-else>
|
|
||||||
<div class="chat-header">
|
|
||||||
<div class="chat-title-area">
|
|
||||||
<h2 class="chat-title">{{ conversationTitle || '新对话' }}</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div ref="messagesContainer" class="messages-container" @scroll="handleScroll">
|
|
||||||
<div v-if="loading" class="load-more-top">
|
|
||||||
<span>加载中...</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="messages-list">
|
|
||||||
<div
|
|
||||||
v-for="msg in messages"
|
|
||||||
:key="msg.id"
|
|
||||||
:data-msg-id="msg.id"
|
|
||||||
>
|
|
||||||
<MessageBubble
|
|
||||||
:role="msg.role"
|
|
||||||
:text="msg.text || msg.content"
|
|
||||||
:tool-calls="msg.tool_calls"
|
|
||||||
:process-steps="msg.process_steps"
|
|
||||||
:token-count="msg.token_count"
|
|
||||||
:usage="msg.usage"
|
|
||||||
:created-at="msg.created_at"
|
|
||||||
:deletable="msg.role === 'user'"
|
|
||||||
:attachments="msg.attachments"
|
|
||||||
@delete="deleteMessage(msg.id)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 流式消息 - 使用 store 中的状态 -->
|
|
||||||
<div v-if="currentStreamState" class="message-bubble assistant streaming">
|
|
||||||
<div class="avatar">Luxx</div>
|
|
||||||
<div class="message-body">
|
|
||||||
<ProcessBlock
|
|
||||||
:process-steps="currentStreamState.process_steps"
|
|
||||||
:streaming="currentStreamState.status === 'streaming'"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="message-input">
|
|
||||||
<div class="input-container">
|
|
||||||
<textarea
|
|
||||||
ref="textareaRef"
|
|
||||||
v-model="inputMessage"
|
|
||||||
:placeholder="sending ? 'AI 正在回复中...' : '输入消息... (Shift+Enter 换行)'"
|
|
||||||
rows="1"
|
|
||||||
@input="autoResize"
|
|
||||||
@keydown="onKeydown"
|
|
||||||
></textarea>
|
|
||||||
<div class="input-footer">
|
|
||||||
<div class="input-actions">
|
|
||||||
<button
|
|
||||||
class="btn-send"
|
|
||||||
:class="{ active: canSend }"
|
|
||||||
:disabled="!canSend || sending"
|
|
||||||
@click="sendMessage"
|
|
||||||
>
|
|
||||||
<span v-html="sendIcon"></span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="input-hint">AI 助手回复内容仅供参考</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
|
|
||||||
import { useRoute, useRouter } from 'vue-router'
|
|
||||||
import { conversationsAPI, messagesAPI, toolsAPI } from '../utils/api.js'
|
|
||||||
import { streamManager } from '../utils/streamManager.js'
|
|
||||||
import { useStreamStore } from '../utils/streamStore.js'
|
|
||||||
import ProcessBlock from '../components/ProcessBlock.vue'
|
|
||||||
import MessageBubble from '../components/MessageBubble.vue'
|
|
||||||
|
|
||||||
const route = useRoute()
|
|
||||||
const router = useRouter()
|
|
||||||
const streamStore = useStreamStore()
|
|
||||||
|
|
||||||
const messages = ref([])
|
|
||||||
const inputMessage = ref('')
|
|
||||||
const loading = ref(true)
|
|
||||||
const messagesContainer = ref(null)
|
|
||||||
const textareaRef = ref(null)
|
|
||||||
const autoScroll = ref(true)
|
|
||||||
const conversationId = ref(route.params.id)
|
|
||||||
const conversationTitle = ref('')
|
|
||||||
const enabledTools = ref([])
|
|
||||||
|
|
||||||
const canSend = computed(() => inputMessage.value.trim().length > 0)
|
|
||||||
|
|
||||||
// 当前会话的流状态（从 store 获取）
|
|
||||||
const currentStreamState = computed(() => {
|
|
||||||
return streamStore.getStreamState(conversationId.value)
|
|
||||||
})
|
|
||||||
|
|
||||||
// sending 状态与流状态同步
|
|
||||||
const sending = computed(() => {
|
|
||||||
const state = currentStreamState.value
|
|
||||||
return state && state.status === 'streaming'
|
|
||||||
})
|
|
||||||
|
|
||||||
const sendIcon = `<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>`
|
|
||||||
|
|
||||||
function autoResize() {
|
|
||||||
const el = textareaRef.value
|
|
||||||
if (!el) return
|
|
||||||
el.style.height = 'auto'
|
|
||||||
el.style.height = Math.min(el.scrollHeight, 200) + 'px'
|
|
||||||
}
|
|
||||||
|
|
||||||
function onKeydown(e) {
|
|
||||||
if (e.key === 'Enter' && !e.shiftKey) {
|
|
||||||
e.preventDefault()
|
|
||||||
sendMessage()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const loadMessages = async () => {
|
|
||||||
autoScroll.value = true
|
|
||||||
loading.value = true
|
|
||||||
try {
|
|
||||||
const res = await messagesAPI.list(conversationId.value)
|
|
||||||
if (res.success) {
|
|
||||||
messages.value = res.data.messages || []
|
|
||||||
if (messages.value.length > 0) {
|
|
||||||
if (res.data.title) {
|
|
||||||
conversationTitle.value = res.data.title
|
|
||||||
} else if (res.data.first_message) {
|
|
||||||
conversationTitle.value = res.data.first_message
|
|
||||||
} else {
|
|
||||||
const userMsg = messages.value.find(m => m.role === 'user')
|
|
||||||
if (userMsg) {
|
|
||||||
conversationTitle.value = userMsg.content.slice(0, 30) + (userMsg.content.length > 30 ? '...' : '')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e)
|
|
||||||
} finally {
|
|
||||||
loading.value = false
|
|
||||||
scrollToBottom()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const loadEnabledTools = async () => {
|
|
||||||
try {
|
|
||||||
const res = await toolsAPI.list()
|
|
||||||
if (res.success) {
|
|
||||||
const tools = res.data?.tools || []
|
|
||||||
enabledTools.value = tools.map(t => t.function?.name || t.name)
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error('Failed to load tools:', e)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const deleteMessage = async (msgId) => {
|
|
||||||
try {
|
|
||||||
await messagesAPI.delete(msgId)
|
|
||||||
messages.value = messages.value.filter(m => m.id !== msgId)
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const sendMessage = async () => {
|
|
||||||
if (!inputMessage.value.trim() || sending.value) return
|
|
||||||
|
|
||||||
const content = inputMessage.value.trim()
|
|
||||||
inputMessage.value = ''
|
|
||||||
|
|
||||||
nextTick(() => {
|
|
||||||
autoResize()
|
|
||||||
})
|
|
||||||
|
|
||||||
// 添加用户消息
|
|
||||||
const userMsgId = 'user-' + Date.now()
|
|
||||||
messages.value.push({
|
|
||||||
id: userMsgId,
|
|
||||||
role: 'user',
|
|
||||||
content: content,
|
|
||||||
text: content,
|
|
||||||
attachments: [],
|
|
||||||
process_steps: [],
|
|
||||||
created_at: new Date().toISOString()
|
|
||||||
})
|
|
||||||
scrollToBottom()
|
|
||||||
|
|
||||||
// 使用 StreamManager 发送流式请求
|
|
||||||
await streamManager.startStream(
|
|
||||||
conversationId.value,
|
|
||||||
{
|
|
||||||
conversation_id: conversationId.value,
|
|
||||||
content,
|
|
||||||
enabled_tools: enabledTools.value
|
|
||||||
},
|
|
||||||
userMsgId
|
|
||||||
)
|
|
||||||
|
|
||||||
scrollToBottom()
|
|
||||||
}
|
|
||||||
|
|
||||||
const scrollToBottom = () => {
|
|
||||||
if (!autoScroll.value) return
|
|
||||||
nextTick(() => {
|
|
||||||
if (messagesContainer.value) {
|
|
||||||
messagesContainer.value.scrollTo({
|
|
||||||
top: messagesContainer.value.scrollHeight,
|
|
||||||
behavior: 'instant'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleScroll = () => {
|
|
||||||
if (!messagesContainer.value) return
|
|
||||||
const { scrollTop, scrollHeight, clientHeight } = messagesContainer.value
|
|
||||||
const distanceToBottom = scrollHeight - scrollTop - clientHeight
|
|
||||||
autoScroll.value = distanceToBottom < 50
|
|
||||||
}
|
|
||||||
|
|
||||||
// 监听流状态变化，自动滚动
|
|
||||||
watch(
|
|
||||||
() => currentStreamState.value?.process_steps?.length,
|
|
||||||
() => {
|
|
||||||
if (currentStreamState.value) {
|
|
||||||
scrollToBottom()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
// 监听对话 ID 变化，重新加载消息
|
|
||||||
watch(() => route.params.id, (newId) => {
|
|
||||||
if (newId) {
|
|
||||||
conversationId.value = newId
|
|
||||||
loadMessages()
|
|
||||||
loadEnabledTools()
|
|
||||||
// 重新设置 watch 监听当前会话的流状态
|
|
||||||
setupStreamWatch()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 设置流状态监听
|
|
||||||
let unwatchStream = null
|
|
||||||
const setupStreamWatch = () => {
|
|
||||||
// 取消之前的监听
|
|
||||||
if (unwatchStream) {
|
|
||||||
unwatchStream()
|
|
||||||
}
|
|
||||||
|
|
||||||
unwatchStream = watch(
|
|
||||||
() => streamStore.getStreamState(conversationId.value),
|
|
||||||
(state) => {
|
|
||||||
if (!state) return
|
|
||||||
|
|
||||||
if (state.status === 'done') {
|
|
||||||
// 流完成，添加到消息列表
|
|
||||||
autoScroll.value = true
|
|
||||||
const completedMessage = {
|
|
||||||
id: state.id,
|
|
||||||
role: 'assistant',
|
|
||||||
process_steps: state.process_steps,
|
|
||||||
token_count: state.token_count,
|
|
||||||
usage: state.usage,
|
|
||||||
created_at: new Date().toISOString()
|
|
||||||
}
|
|
||||||
messages.value.push(completedMessage)
|
|
||||||
|
|
||||||
// 更新标题
|
|
||||||
if (!conversationTitle.value || conversationTitle.value === '新对话') {
|
|
||||||
const userMsg = messages.value.find(m => m.role === 'user')
|
|
||||||
if (userMsg) {
|
|
||||||
conversationTitle.value = userMsg.content.slice(0, 30) + (userMsg.content.length > 30 ? '...' : '')
|
|
||||||
conversationsAPI.update(conversationId.value, { title: conversationTitle.value })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 清除流状态
|
|
||||||
streamStore.clearStream(conversationId.value)
|
|
||||||
} else if (state.status === 'error') {
|
|
||||||
// 流错误
|
|
||||||
console.error('Stream error:', state.error)
|
|
||||||
streamStore.clearStream(conversationId.value)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ deep: true }
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
loadMessages()
|
|
||||||
loadEnabledTools()
|
|
||||||
setupStreamWatch()
|
|
||||||
})
|
|
||||||
|
|
||||||
// 组件卸载时取消监听
|
|
||||||
onUnmounted(() => {
|
|
||||||
if (unwatchStream) {
|
|
||||||
unwatchStream()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const formatTime = (time) => {
|
|
||||||
if (!time) return ''
|
|
||||||
return new Date(time).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.chat-view {
|
|
||||||
flex: 1 1 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100vh;
|
|
||||||
overflow: hidden;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.welcome {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.welcome-icon {
|
|
||||||
width: 64px;
|
|
||||||
height: 64px;
|
|
||||||
border-radius: 16px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.welcome h1 {
|
|
||||||
font-size: 24px;
|
|
||||||
color: var(--text-primary);
|
|
||||||
margin: 0 0 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.welcome p {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 12px 24px;
|
|
||||||
border-bottom: 1px solid var(--border-light);
|
|
||||||
background: color-mix(in srgb, var(--bg-primary) 70%, transparent);
|
|
||||||
backdrop-filter: blur(40px);
|
|
||||||
-webkit-backdrop-filter: blur(40px);
|
|
||||||
transition: background 0.2s, border-color 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-title-area {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-title {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-primary);
|
|
||||||
margin: 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.messages-container {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 16px 0;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
scrollbar-width: none;
|
|
||||||
-ms-overflow-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.messages-container::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.load-more-top {
|
|
||||||
text-align: center;
|
|
||||||
padding: 12px 0;
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.messages-list {
|
|
||||||
width: 80%;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Message Input */
|
|
||||||
.message-input {
|
|
||||||
padding: 16px 24px 12px;
|
|
||||||
background: var(--bg-primary);
|
|
||||||
border-top: 1px solid var(--border-light);
|
|
||||||
transition: background 0.2s, border-color 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background: var(--bg-input);
|
|
||||||
border: 1px solid var(--border-input);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 12px;
|
|
||||||
transition: border-color 0.2s, background 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-container:focus-within {
|
|
||||||
border-color: var(--accent-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
width: 100%;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: var(--text-primary);
|
|
||||||
font-size: 15px;
|
|
||||||
line-height: 1.6;
|
|
||||||
resize: none;
|
|
||||||
outline: none;
|
|
||||||
font-family: inherit;
|
|
||||||
min-height: 36px;
|
|
||||||
max-height: 200px;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea::placeholder {
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
padding-top: 8px;
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-actions {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-send {
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: none;
|
|
||||||
background: var(--bg-code);
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
cursor: not-allowed;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: all 0.15s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-send.active {
|
|
||||||
background: var(--accent-primary);
|
|
||||||
color: white;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-send.active:hover {
|
|
||||||
background: var(--accent-primary-hover);
|
|
||||||
transform: translateY(-1px);
|
|
||||||
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-send.active:active {
|
|
||||||
transform: translateY(0);
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-hint {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -425,6 +425,19 @@ const sendMessage = async () => {
|
||||||
}
|
}
|
||||||
convMessages.value.push(userMsg)
|
convMessages.value.push(userMsg)
|
||||||
|
|
||||||
|
// 如果还没有标题或标题为默认标题，使用第一条消息作为标题
|
||||||
|
const currentTitle = selectedConv.value?.title
|
||||||
|
const isDefaultTitle = !currentTitle || currentTitle === 'New Conversation' || currentTitle.trim() === ''
|
||||||
|
if (isDefaultTitle) {
|
||||||
|
const title = content.slice(0, 30) + (content.length > 30 ? '...' : '')
|
||||||
|
selectedConv.value.title = title
|
||||||
|
// 更新列表中的标题
|
||||||
|
const conv = list.value.find(c => c.id === selectedConv.value.id)
|
||||||
|
if (conv) conv.title = title
|
||||||
|
// 调用 API 保存
|
||||||
|
await conversationsAPI.update(selectedConv.value.id, { title })
|
||||||
|
}
|
||||||
|
|
||||||
// 使用 StreamManager 发送流式请求
|
// 使用 StreamManager 发送流式请求
|
||||||
await streamManager.startStream(
|
await streamManager.startStream(
|
||||||
selectedConv.value.id,
|
selectedConv.value.id,
|
||||||
Loading…
Reference in New Issue