737 lines
16 KiB
Vue
737 lines
16 KiB
Vue
<script setup lang="ts">
|
|
import { ref, nextTick } from 'vue'
|
|
import { useUserStore } from '../stores/user'
|
|
|
|
const userStore = useUserStore()
|
|
const stockCode = ref('')
|
|
const isAnalyzing = ref(false)
|
|
const analysisContent = ref('')
|
|
const analysisContainer = ref<HTMLElement | null>(null)
|
|
const currentThought = ref('')
|
|
const showInitialView = ref(true)
|
|
const copySuccess = ref(false)
|
|
|
|
// 根据环境选择API基础URL
|
|
const apiBaseUrl =
|
|
import.meta.env.MODE === 'development' ? 'http://127.0.0.1:8000' : 'https://api.ibtc.work'
|
|
|
|
const scrollToBottom = async () => {
|
|
await nextTick()
|
|
if (analysisContainer.value) {
|
|
analysisContainer.value.scrollTop = analysisContainer.value.scrollHeight
|
|
}
|
|
}
|
|
|
|
// 处理回车键
|
|
const handleKeyup = (event: KeyboardEvent) => {
|
|
if (event.key === 'Enter') {
|
|
handleAnalysis()
|
|
}
|
|
}
|
|
|
|
const handleAnalysis = async () => {
|
|
const code = stockCode.value.trim()
|
|
if (!code || isAnalyzing.value) return
|
|
|
|
// 验证股票代码格式
|
|
if (!/^\d{6}$/.test(code)) {
|
|
analysisContent.value = '<div class="error-message">请输入正确的6位股票代码</div>'
|
|
return
|
|
}
|
|
|
|
showInitialView.value = false
|
|
isAnalyzing.value = true
|
|
analysisContent.value = ''
|
|
currentThought.value = '准备开始分析...'
|
|
|
|
try {
|
|
const headers: Record<string, string> = {
|
|
'Content-Type': 'application/json',
|
|
}
|
|
if (userStore.authHeader) {
|
|
headers['Authorization'] = userStore.authHeader
|
|
}
|
|
|
|
const response = await fetch(`${apiBaseUrl}/adata/${code}/analysis`, {
|
|
method: 'POST',
|
|
headers,
|
|
})
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`)
|
|
}
|
|
|
|
const reader = response.body?.getReader()
|
|
if (!reader) {
|
|
throw new Error('无法获取响应流')
|
|
}
|
|
|
|
const decoder = new TextDecoder()
|
|
let buffer = ''
|
|
|
|
while (true) {
|
|
const { done, value } = await reader.read()
|
|
if (done) break
|
|
|
|
const chunk = decoder.decode(value, { stream: true })
|
|
buffer += chunk
|
|
|
|
const lines = buffer.split('\n')
|
|
buffer = lines.pop() || ''
|
|
|
|
for (const line of lines) {
|
|
if (!line.trim() || !line.startsWith('data: ')) continue
|
|
|
|
try {
|
|
const jsonStr = line.slice(6)
|
|
const data = JSON.parse(jsonStr)
|
|
|
|
switch (data.event) {
|
|
case 'workflow_started':
|
|
currentThought.value = '开始分析...'
|
|
break
|
|
|
|
case 'text_chunk':
|
|
if (data.data && data.data.text) {
|
|
analysisContent.value += data.data.text
|
|
await scrollToBottom()
|
|
}
|
|
break
|
|
|
|
case 'workflow_finished':
|
|
if (data.data && data.data.outputs && data.data.outputs.text) {
|
|
// 如果最终结果与当前内容不同，则更新
|
|
if (analysisContent.value !== data.data.outputs.text) {
|
|
analysisContent.value = data.data.outputs.text
|
|
await scrollToBottom()
|
|
}
|
|
currentThought.value = `分析完成 (用时 ${Math.round(data.data.elapsed_time)}秒)`
|
|
}
|
|
break
|
|
|
|
case 'error':
|
|
const errorMessage = data.error || '未知错误'
|
|
analysisContent.value = `<div class="error-message">分析过程中出现错误：${errorMessage}</div>`
|
|
currentThought.value = '分析过程出现错误'
|
|
await scrollToBottom()
|
|
break
|
|
}
|
|
} catch (e) {
|
|
console.error('解析响应数据出错:', e)
|
|
analysisContent.value = '<div class="error-message">解析响应数据时出错，请稍后重试</div>'
|
|
currentThought.value = '数据解析出错'
|
|
}
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('分析请求失败:', error)
|
|
analysisContent.value = '<div class="error-message">抱歉，分析请求失败，请稍后重试</div>'
|
|
currentThought.value = '请求失败'
|
|
} finally {
|
|
isAnalyzing.value = false
|
|
await scrollToBottom()
|
|
}
|
|
}
|
|
|
|
const resetView = () => {
|
|
showInitialView.value = true
|
|
stockCode.value = ''
|
|
analysisContent.value = ''
|
|
currentThought.value = ''
|
|
isAnalyzing.value = false
|
|
}
|
|
|
|
const clearInput = () => {
|
|
stockCode.value = ''
|
|
analysisContent.value = ''
|
|
currentThought.value = ''
|
|
}
|
|
|
|
const copyAnalysis = async () => {
|
|
if (!analysisContent.value) return
|
|
|
|
try {
|
|
const tempDiv = document.createElement('div')
|
|
tempDiv.innerHTML = analysisContent.value
|
|
const textContent = tempDiv.textContent || tempDiv.innerText || ''
|
|
|
|
await navigator.clipboard.writeText(textContent)
|
|
copySuccess.value = true
|
|
setTimeout(() => {
|
|
copySuccess.value = false
|
|
}, 2000)
|
|
} catch {
|
|
console.error('复制失败')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="stock-analysis-view">
|
|
<div class="content-container">
|
|
<!-- 初始视图 -->
|
|
<div v-if="showInitialView" class="initial-content">
|
|
<div class="header-section">
|
|
<h1 class="title">A股AI分析助理</h1>
|
|
<p class="description">通过 AI 技术，获取 A 股上市公司的深度分析报告</p>
|
|
</div>
|
|
|
|
<div class="search-section">
|
|
<div class="search-container" :class="{ 'is-analyzing': isAnalyzing }">
|
|
<div class="input-wrapper">
|
|
<div class="input-container" :class="{ 'has-input': stockCode }">
|
|
<div class="input-area">
|
|
<input
|
|
v-model="stockCode"
|
|
type="text"
|
|
class="search-input"
|
|
:class="{ 'is-selected': stockCode }"
|
|
placeholder="请输入6位股票代码"
|
|
maxlength="6"
|
|
@keyup="handleKeyup"
|
|
:disabled="isAnalyzing"
|
|
/>
|
|
<button
|
|
v-if="stockCode"
|
|
class="clear-button"
|
|
@click.stop="clearInput"
|
|
:disabled="isAnalyzing"
|
|
>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<button
|
|
class="analyze-button"
|
|
@click="() => handleAnalysis()"
|
|
:disabled="!stockCode || isAnalyzing"
|
|
>
|
|
{{ isAnalyzing ? '分析中...' : '开始分析' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 分析视图 -->
|
|
<div v-else class="analysis-view">
|
|
<div class="analysis-header">
|
|
<div class="target-info">
|
|
<span class="label">正在分析股票：</span>
|
|
<span class="value">{{ stockCode }}</span>
|
|
</div>
|
|
<div class="action-buttons" v-if="!isAnalyzing">
|
|
<button class="action-button" @click="resetView">
|
|
<svg
|
|
class="icon"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<polyline points="22 12 18 12 15 12"></polyline>
|
|
<path d="M11.5 3a17 17 0 0 0-6.5 2.5L2 8"></path>
|
|
<path d="M2 3v5h5"></path>
|
|
<path d="M13.5 21a17 17 0 0 0 6.5-2.5L22 16"></path>
|
|
<path d="M22 21v-5h-5"></path>
|
|
</svg>
|
|
<span>重新分析</span>
|
|
</button>
|
|
<button
|
|
class="action-button copy"
|
|
@click="copyAnalysis"
|
|
:class="{ success: copySuccess }"
|
|
>
|
|
<span v-if="!copySuccess">复制结果</span>
|
|
<span v-else>复制成功</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="isAnalyzing" class="analysis-status">
|
|
<div class="progress-dots">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class="status-text">
|
|
<div class="status-label">AI 正在分析</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="analysis-container"
|
|
ref="analysisContainer"
|
|
:class="{ 'fade-in': analysisContent }"
|
|
>
|
|
<div class="analysis-content" v-html="analysisContent"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* 基础样式 */
|
|
.stock-analysis-view {
|
|
min-height: 100vh;
|
|
height: 100vh;
|
|
background-color: var(--color-bg-primary);
|
|
padding: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.content-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
.initial-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 15vh;
|
|
gap: 2rem;
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
.header-section {
|
|
text-align: center;
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
.title {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: var(--color-text-primary);
|
|
margin-bottom: 0.5rem;
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
.description {
|
|
font-size: 0.95rem;
|
|
color: var(--color-text-secondary);
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
/* 搜索区域样式 */
|
|
.search-section {
|
|
width: 100%;
|
|
max-width: 800px;
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
.search-container {
|
|
position: relative;
|
|
padding: 1.5rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.input-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.input-container {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
border: 2px solid var(--color-accent);
|
|
border-radius: var(--border-radius);
|
|
background-color: var(--color-bg-primary);
|
|
padding: 0.75rem 1rem;
|
|
transition: all 0.3s ease;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.input-area {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
border: none;
|
|
background: none;
|
|
padding: 0.5rem;
|
|
font-size: 0.95rem;
|
|
color: var(--color-text-primary);
|
|
outline: none;
|
|
height: 2.5rem;
|
|
}
|
|
|
|
.clear-button {
|
|
position: absolute;
|
|
right: 0.5rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: none;
|
|
border: none;
|
|
padding: 0.25rem;
|
|
cursor: pointer;
|
|
color: var(--color-text-secondary);
|
|
opacity: 0.6;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.clear-button:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.clear-button svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.analyze-button {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
color: white;
|
|
background-color: var(--color-accent);
|
|
border: none;
|
|
border-radius: var(--border-radius);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.analyze-button:hover:not(:disabled) {
|
|
background-color: var(--color-accent-hover);
|
|
}
|
|
|
|
.analyze-button:disabled {
|
|
opacity: 0.7;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* 分析视图样式 */
|
|
.analysis-view {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: calc(100vh - 2rem);
|
|
padding: 0.5rem;
|
|
animation: fadeIn 0.3s ease-out;
|
|
}
|
|
|
|
.analysis-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1rem;
|
|
background-color: var(--color-bg-secondary);
|
|
border-radius: var(--border-radius);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.target-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.target-info .label {
|
|
color: var(--color-text-secondary);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.target-info .value {
|
|
color: var(--color-accent);
|
|
font-weight: 500;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.action-button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
border: 1px solid var(--color-accent);
|
|
border-radius: var(--border-radius);
|
|
background: transparent;
|
|
color: var(--color-accent);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.action-button:hover {
|
|
background-color: var(--color-accent);
|
|
color: white;
|
|
}
|
|
|
|
.action-button.copy {
|
|
background-color: var(--color-accent);
|
|
color: white;
|
|
}
|
|
|
|
.action-button.copy:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.action-button.copy.success {
|
|
background-color: #4caf50;
|
|
border-color: #4caf50;
|
|
}
|
|
|
|
.action-button .icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
/* 分析状态样式 */
|
|
.analysis-status {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
gap: 1rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.progress-dots {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.progress-dots span {
|
|
width: 8px;
|
|
height: 8px;
|
|
background-color: var(--color-accent);
|
|
border-radius: 50%;
|
|
opacity: 0.3;
|
|
animation: pulse-dot 1s infinite;
|
|
}
|
|
|
|
.progress-dots span:nth-child(2) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.progress-dots span:nth-child(3) {
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
.status-text {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.status-label {
|
|
font-weight: 500;
|
|
color: var(--color-accent);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
/* 分析内容样式 */
|
|
.analysis-container {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
border-radius: var(--border-radius);
|
|
margin-top: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.analysis-container.fade-in {
|
|
background-color: var(--color-bg-secondary);
|
|
}
|
|
|
|
.analysis-content {
|
|
padding: 1.5rem;
|
|
line-height: 2;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
:deep(.error-message) {
|
|
margin: 1rem 0;
|
|
padding: 0.75rem 1rem;
|
|
background-color: rgba(255, 0, 0, 0.05);
|
|
border: 1px solid rgba(255, 0, 0, 0.1);
|
|
border-radius: var(--border-radius);
|
|
color: #ff4444;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
/* 动画 */
|
|
@keyframes pulse-dot {
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 0.3;
|
|
}
|
|
50% {
|
|
transform: scale(1.2);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fadeIn 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* 响应式样式 */
|
|
@media (max-width: 768px) {
|
|
.initial-content {
|
|
margin-bottom: 12vh;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.title {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
.search-container {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.search-input {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.analysis-content {
|
|
padding: 1.25rem 1.5rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.analysis-view {
|
|
padding: 0.5rem;
|
|
margin-top: 4.5rem;
|
|
}
|
|
|
|
.analysis-header {
|
|
padding: 0.75rem;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.action-buttons {
|
|
width: 100%;
|
|
flex-direction: row;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.action-button {
|
|
flex: 1;
|
|
justify-content: center;
|
|
padding: 0.6rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.initial-content {
|
|
margin-bottom: 10vh;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.title {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.description {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.search-input {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.analyze-button {
|
|
font-size: 0.85rem;
|
|
padding: 0.6rem;
|
|
}
|
|
|
|
.analysis-content {
|
|
padding: 1rem;
|
|
font-size: 0.9rem;
|
|
line-height: 2;
|
|
}
|
|
|
|
.target-info .label {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.target-info .value {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.action-buttons {
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.action-button {
|
|
padding: 0.5rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
|
|
/* 滚动条样式 */
|
|
:deep(*::-webkit-scrollbar) {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
:deep(*::-webkit-scrollbar-track) {
|
|
background: transparent;
|
|
}
|
|
|
|
:deep(*::-webkit-scrollbar-thumb) {
|
|
background-color: rgba(125, 125, 125, 0.2);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
:deep(*::-webkit-scrollbar-thumb:hover) {
|
|
background-color: rgba(125, 125, 125, 0.3);
|
|
}
|
|
</style>
|