panda
74f3f03d2c
将单体 Streamlit 应用拆分为三层架构： - api_server.py: FastAPI SSE 流式后端 (端口 8000) - frontend/: Vue 3 + Vite + Pinia 聊天前端 (端口 5173) - agent/graph.py: 新增 node_start 回调支持 - 更新启动脚本为三服务模式 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
67 lines
1.2 KiB
Vue
67 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { useChatStore } from '../stores/chat'
|
|
|
|
const chat = useChatStore()
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="chat.streaming" class="streaming-message">
|
|
<div class="stream-header">
|
|
<span class="stream-label">AI 正在生成...</span>
|
|
</div>
|
|
<pre class="stream-code" v-if="chat.streamText">{{ chat.streamText }}</pre>
|
|
<div v-else class="stream-waiting">
|
|
<span class="dot-pulse"></span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.streaming-message {
|
|
margin-bottom: 16px;
|
|
padding: 12px 16px;
|
|
border-radius: 12px;
|
|
background: #1e1e2e;
|
|
border: 1px solid #45475a;
|
|
max-width: 85%;
|
|
}
|
|
|
|
.stream-header {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.stream-label {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #f9e2af;
|
|
}
|
|
|
|
.stream-code {
|
|
background: #11111b;
|
|
padding: 12px;
|
|
border-radius: 8px;
|
|
font-size: 12px;
|
|
overflow-x: auto;
|
|
white-space: pre-wrap;
|
|
color: #a6e3a1;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.stream-waiting {
|
|
padding: 20px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.dot-pulse::after {
|
|
content: '...';
|
|
animation: dots 1.5s steps(4, end) infinite;
|
|
}
|
|
|
|
@keyframes dots {
|
|
0%, 20% { content: '.'; }
|
|
40% { content: '..'; }
|
|
60%, 100% { content: '...'; }
|
|
}
|
|
</style>
|