update
This commit is contained in:
aaron
parent
ef33c1a3b3
commit
be144e74f2
@ -290,7 +290,7 @@ onUnmounted(() => {
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M7 12l5-5 5 5M7 17l5-5 5 5" />
|
||||
</svg>
|
||||
<span class="agent-name">加密分析</span>
|
||||
<span class="agent-name">加密货币分析</span>
|
||||
</RouterLink>
|
||||
<RouterLink to="/astock-analysis" class="agent-item" @click="showMobileMenu = false">
|
||||
<svg
|
||||
@ -1159,7 +1159,7 @@ body {
|
||||
|
||||
.chat-container {
|
||||
margin-left: 0;
|
||||
padding-top: 2rem;
|
||||
padding-top: 4.5rem;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
|
||||
@ -8,6 +8,7 @@ const isAnalyzing = ref(false)
|
||||
const analysisContent = ref('')
|
||||
const analysisContainer = ref<HTMLElement | null>(null)
|
||||
const currentThought = ref('')
|
||||
const showInitialView = ref(true)
|
||||
|
||||
// 根据环境选择API基础URL
|
||||
const apiBaseUrl =
|
||||
@ -30,6 +31,7 @@ const handleAnalysis = async () => {
|
||||
return
|
||||
}
|
||||
|
||||
showInitialView.value = false
|
||||
isAnalyzing.value = true
|
||||
analysisContent.value = ''
|
||||
currentThought.value = '准备开始分析...'
|
||||
@ -123,6 +125,14 @@ const handleAnalysis = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const resetView = () => {
|
||||
showInitialView.value = true
|
||||
stockCode.value = ''
|
||||
analysisContent.value = ''
|
||||
currentThought.value = ''
|
||||
isAnalyzing.value = false
|
||||
}
|
||||
|
||||
const clearInput = () => {
|
||||
stockCode.value = ''
|
||||
analysisContent.value = ''
|
||||
@ -133,8 +143,9 @@ const clearInput = () => {
|
||||
<template>
|
||||
<div class="stock-analysis-view">
|
||||
<div class="content-container">
|
||||
<div class="initial-content" :class="{ minimized: analysisContent }">
|
||||
<div class="header-section" :class="{ minimized: analysisContent }">
|
||||
<!-- 初始视图 -->
|
||||
<div v-if="showInitialView" class="initial-content">
|
||||
<div class="header-section">
|
||||
<h1 class="title">A股AI分析专家</h1>
|
||||
<p class="description">通过 AI 技术，获取 A 股上市公司的深度分析报告</p>
|
||||
</div>
|
||||
@ -186,26 +197,52 @@ const clearInput = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分析状态和结果区域 -->
|
||||
<div v-if="isAnalyzing" class="analysis-status fade-in">
|
||||
<div class="progress-dots">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<!-- 分析视图 -->
|
||||
<div v-else class="analysis-view">
|
||||
<div class="analysis-header">
|
||||
<div class="target-info">
|
||||
<span class="label">正在分析：</span>
|
||||
<span class="value">{{ stockCode }}</span>
|
||||
</div>
|
||||
<button class="new-analysis-button" @click="resetView" :disabled="isAnalyzing">
|
||||
<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>
|
||||
</div>
|
||||
<p class="status-text">
|
||||
<span class="status-label">AI分析进行中</span>
|
||||
<span class="thought-text" v-if="currentThought">{{ currentThought }}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="analysisContent"
|
||||
class="analysis-container"
|
||||
ref="analysisContainer"
|
||||
:class="{ 'fade-in': analysisContent }"
|
||||
>
|
||||
<div class="analysis-content" v-html="analysisContent"></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 v-if="currentThought" class="thought-text">{{ currentThought }}</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>
|
||||
@ -374,8 +411,14 @@ const clearInput = () => {
|
||||
}
|
||||
|
||||
.analysis-status {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem 1rem;
|
||||
text-align: center;
|
||||
margin: 1rem 0;
|
||||
background-color: var(--color-bg-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.progress-dots {
|
||||
@ -404,23 +447,24 @@ const clearInput = () => {
|
||||
}
|
||||
|
||||
.status-text {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.status-label {
|
||||
font-weight: 500;
|
||||
color: var(--color-accent);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.thought-text {
|
||||
font-size: 0.95rem;
|
||||
color: var(--color-text-secondary);
|
||||
max-width: 600px;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.analysis-container {
|
||||
@ -552,4 +596,107 @@ const clearInput = () => {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.analysis-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
padding: 1rem;
|
||||
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);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.target-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.target-info .label {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.target-info .value {
|
||||
color: var(--color-accent);
|
||||
font-weight: 500;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.new-analysis-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;
|
||||
}
|
||||
|
||||
.new-analysis-button:hover:not(:disabled) {
|
||||
background-color: var(--color-accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.new-analysis-button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.new-analysis-button .icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.analysis-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background-color: var(--color-bg-primary);
|
||||
border-radius: var(--border-radius);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.analysis-view {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.analysis-header {
|
||||
padding: 0.75rem;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.new-analysis-button {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.analysis-header {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.target-info .label {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.target-info .value {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -14,6 +14,7 @@ const analysisContent = ref('')
|
||||
const analysisContainer = ref<HTMLElement | null>(null)
|
||||
const currentThought = ref('')
|
||||
const selectedTimeframe = ref('all')
|
||||
const showInitialView = ref(true)
|
||||
|
||||
const timeframes = [
|
||||
{ label: '全部', value: 'all' },
|
||||
@ -45,6 +46,7 @@ const handleKeydown = (event: KeyboardEvent) => {
|
||||
const handleAnalysis = async () => {
|
||||
if (!cryptoCode.value.trim() || isAnalyzing.value) return
|
||||
|
||||
showInitialView.value = false
|
||||
isAnalyzing.value = true
|
||||
analysisContent.value = ''
|
||||
currentThought.value = '准备开始分析...'
|
||||
@ -139,6 +141,14 @@ const handleAnalysis = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const resetView = () => {
|
||||
showInitialView.value = true
|
||||
cryptoCode.value = ''
|
||||
analysisContent.value = ''
|
||||
currentThought.value = ''
|
||||
isAnalyzing.value = false
|
||||
}
|
||||
|
||||
// 清除输入
|
||||
const clearInput = () => {
|
||||
cryptoCode.value = ''
|
||||
@ -150,8 +160,9 @@ const clearInput = () => {
|
||||
<template>
|
||||
<div class="crypto-analysis-view">
|
||||
<div class="content-container">
|
||||
<div class="initial-content" :class="{ minimized: analysisContent }">
|
||||
<div class="header-section" :class="{ minimized: analysisContent }">
|
||||
<!-- 初始视图 -->
|
||||
<div v-if="showInitialView" class="initial-content">
|
||||
<div class="header-section">
|
||||
<h1 class="title">加密货币AI分析专家</h1>
|
||||
<p class="description">通过 AI 技术，获取加密货币的深度分析报告</p>
|
||||
</div>
|
||||
@ -213,26 +224,55 @@ const clearInput = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分析状态和结果区域 -->
|
||||
<div v-if="isAnalyzing" class="analysis-status fade-in">
|
||||
<div class="progress-dots">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<!-- 分析视图 -->
|
||||
<div v-else class="analysis-view">
|
||||
<div class="analysis-header">
|
||||
<div class="target-info">
|
||||
<span class="label">正在分析：</span>
|
||||
<span class="value">{{ cryptoCode.toUpperCase() }}</span>
|
||||
<span class="timeframe">{{
|
||||
timeframes.find((t) => t.value === selectedTimeframe)?.label
|
||||
}}</span>
|
||||
</div>
|
||||
<button class="new-analysis-button" @click="resetView" :disabled="isAnalyzing">
|
||||
<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>
|
||||
</div>
|
||||
<p class="status-text">
|
||||
<span class="status-label">AI分析进行中</span>
|
||||
<span class="thought-text" v-if="currentThought">{{ currentThought }}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="analysisContent"
|
||||
class="analysis-container"
|
||||
ref="analysisContainer"
|
||||
:class="{ 'fade-in': analysisContent }"
|
||||
>
|
||||
<div class="analysis-content" v-html="analysisContent"></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 v-if="currentThought" class="thought-text">{{ currentThought }}</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>
|
||||
@ -532,23 +572,22 @@ const clearInput = () => {
|
||||
}
|
||||
|
||||
.analysis-status {
|
||||
margin-top: 1rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.analysis-progress {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
padding: 2rem 1rem;
|
||||
text-align: center;
|
||||
background-color: var(--color-bg-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.progress-dots {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.progress-dots span {
|
||||
@ -569,31 +608,24 @@ const clearInput = () => {
|
||||
}
|
||||
|
||||
.status-text {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.status-label {
|
||||
font-weight: 500;
|
||||
color: var(--color-accent);
|
||||
font-size: 1.1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.thought-text {
|
||||
font-size: 0.95rem;
|
||||
color: var(--color-text-secondary);
|
||||
text-align: left;
|
||||
max-width: 600px;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
@ -617,7 +649,6 @@ const clearInput = () => {
|
||||
.analysis-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0rem 1.5rem;
|
||||
color: var(--color-text-primary);
|
||||
line-height: 1.8;
|
||||
font-size: 1.1rem;
|
||||
@ -1141,4 +1172,123 @@ const clearInput = () => {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.analysis-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
padding: 1rem;
|
||||
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);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.target-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.target-info .label {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.target-info .value {
|
||||
color: var(--color-accent);
|
||||
font-weight: 500;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.target-info .timeframe {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.9rem;
|
||||
padding: 0.15rem 0.5rem;
|
||||
background-color: var(--color-bg-primary);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.new-analysis-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;
|
||||
}
|
||||
|
||||
.new-analysis-button:hover:not(:disabled) {
|
||||
background-color: var(--color-accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.new-analysis-button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.new-analysis-button .icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.analysis-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background-color: var(--color-bg-primary);
|
||||
border-radius: var(--border-radius);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.analysis-view {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.analysis-header {
|
||||
padding: 0.75rem;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.new-analysis-button {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.analysis-header {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.target-info {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.target-info .label {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.target-info .value {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.target-info .timeframe {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user