From be144e74f22a6bc2fd436c91248b66582b2b759f Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Wed, 14 May 2025 21:58:26 +0800
Subject: [PATCH] update

---
 src/App.vue                      |   4 +-
 src/views/AStockAnalysisView.vue | 199 ++++++++++++++++++++++----
 src/views/CryptoAnalysisView.vue | 230 +++++++++++++++++++++++++------
 3 files changed, 365 insertions(+), 68 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 519f47d..87972a4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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);
   }
 
diff --git a/src/views/AStockAnalysisView.vue b/src/views/AStockAnalysisView.vue
index 76420db..c60affa 100644
--- a/src/views/AStockAnalysisView.vue
+++ b/src/views/AStockAnalysisView.vue
@@ -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>
diff --git a/src/views/CryptoAnalysisView.vue b/src/views/CryptoAnalysisView.vue
index bd87fb1..7022ec1 100644
--- a/src/views/CryptoAnalysisView.vue
+++ b/src/views/CryptoAnalysisView.vue
@@ -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>