From b6a9e72500f6903838604a8cf2fcf17a50fdc577 Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Wed, 14 May 2025 17:40:02 +0800
Subject: [PATCH] update

---
 src/router/index.ts              |   19 +
 src/views/CryptoAnalysisView.vue | 1121 ++++++++++++++++++++++++++++++
 src/views/StockAnalysisView.vue  |  512 ++++++++++++++
 3 files changed, 1652 insertions(+)
 create mode 100644 src/views/CryptoAnalysisView.vue
 create mode 100644 src/views/StockAnalysisView.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index 5006d60..dcfe87d 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import DownloadView from '../views/DownloadView.vue'
+import StockAnalysisView from '../views/StockAnalysisView.vue'
 import { useUserStore } from '../stores/user'
 
 const router = createRouter({
@@ -45,6 +46,24 @@ const router = createRouter({
       component: DownloadView,
       meta: { standalone: true },
     },
+    {
+      path: '/stock-analysis',
+      name: 'stock-analysis',
+      component: StockAnalysisView,
+      meta: {
+        requiresAuth: true,
+        title: '股票分析专家',
+      },
+    },
+    {
+      path: '/crypto-analysis',
+      name: 'crypto-analysis',
+      component: () => import('../views/CryptoAnalysisView.vue'),
+      meta: {
+        requiresAuth: true,
+        title: '加密货币分析专家',
+      },
+    },
   ],
 })
 
diff --git a/src/views/CryptoAnalysisView.vue b/src/views/CryptoAnalysisView.vue
new file mode 100644
index 0000000..4064e79
--- /dev/null
+++ b/src/views/CryptoAnalysisView.vue
@@ -0,0 +1,1121 @@
+<script setup lang="ts">
+import { ref, watch, nextTick } from 'vue'
+import { useUserStore } from '../stores/user'
+
+interface CryptoOption {
+  symbol: string
+  base_asset: string
+  quote_asset: string
+}
+
+interface AnalysisRequest {
+  symbol: string
+  timeframe?: string
+}
+
+const userStore = useUserStore()
+const searchQuery = ref('')
+const selectedCrypto = ref<CryptoOption | null>(null)
+const isAnalyzing = ref(false)
+const showDropdown = ref(false)
+const isSearching = ref(false)
+const cryptoOptions = ref<CryptoOption[]>([])
+const analysisContent = ref('')
+const analysisContainer = ref<HTMLElement | null>(null)
+const showSearchTips = ref(false)
+const isFirstAnalysis = ref(true)
+const currentThought = ref('')
+const selectedTimeframe = ref('all')
+
+const timeframes = [
+  { label: '全部', value: 'all' },
+  { label: '15分钟', value: '15m' },
+  { label: '1小时', value: '1h' },
+  { label: '4小时', value: '4h' },
+  { label: '1天', value: '1d' },
+]
+
+// 根据环境选择API基础URL
+const apiBaseUrl =
+  import.meta.env.MODE === 'development' ? 'http://127.0.0.1:8000' : 'https://api.ibtc.work'
+
+// 监听搜索输入
+watch(searchQuery, async (newQuery) => {
+  const query = newQuery.trim()
+
+  // 显示搜索提示
+  if (query.length === 1) {
+    showSearchTips.value = true
+    setTimeout(() => {
+      showSearchTips.value = false
+    }, 3000)
+  }
+
+  if (!query || query.length < 2) {
+    cryptoOptions.value = []
+    showDropdown.value = false
+    return
+  }
+
+  isSearching.value = true
+  try {
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+    }
+    if (userStore.authHeader) {
+      headers['Authorization'] = userStore.authHeader
+    }
+
+    const response = await fetch(
+      `${apiBaseUrl}/crypto/crypto/search/${encodeURIComponent(query)}`,
+      {
+        method: 'GET',
+        headers,
+      },
+    )
+
+    if (!response.ok) {
+      throw new Error('搜索请求失败')
+    }
+
+    const data = await response.json()
+    cryptoOptions.value = data
+    showDropdown.value = true
+  } catch (error) {
+    console.error('搜索加密货币失败:', error)
+    cryptoOptions.value = []
+  } finally {
+    isSearching.value = false
+  }
+})
+
+const selectCrypto = (crypto: CryptoOption) => {
+  selectedCrypto.value = crypto
+  searchQuery.value = `${crypto.base_asset}/${crypto.quote_asset}`
+  showDropdown.value = false
+
+  // 自动触发分析
+  if (isFirstAnalysis.value) {
+    // 首次选择时显示提示，并延迟开始分析
+    isFirstAnalysis.value = false
+    setTimeout(() => {
+      handleAnalysis()
+    }, 500)
+  } else {
+    handleAnalysis()
+  }
+}
+
+const scrollToBottom = async () => {
+  await nextTick()
+  if (analysisContainer.value) {
+    analysisContainer.value.scrollTop = analysisContainer.value.scrollHeight
+  }
+}
+
+const handleAnalysis = async () => {
+  if (!selectedCrypto.value || isAnalyzing.value) return
+
+  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 requestData: AnalysisRequest = {
+      symbol: selectedCrypto.value.base_asset,
+    }
+
+    // 只有当不是 'all' 时才添加 timeframe
+    if (selectedTimeframe.value !== 'all') {
+      requestData.timeframe = selectedTimeframe.value
+    }
+
+    const response = await fetch(`${apiBaseUrl}/crypto/crypto/analysis`, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify(requestData),
+    })
+
+    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 'agent_message':
+              if (data.answer) {
+                analysisContent.value += data.answer
+                await scrollToBottom()
+              }
+              break
+
+            case 'agent_thought':
+              if (data.tool) {
+                currentThought.value = data.tool
+              }
+              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
+    currentThought.value = ''
+    await scrollToBottom()
+  }
+}
+
+// 点击外部关闭下拉框
+const handleClickOutside = (event: MouseEvent) => {
+  const target = event.target as HTMLElement
+  if (!target.closest('.search-container')) {
+    showDropdown.value = false
+  }
+}
+
+// 在 script setup 中添加清除选择的方法
+const clearSelection = () => {
+  selectedCrypto.value = null
+  searchQuery.value = ''
+  analysisContent.value = ''
+  currentThought.value = ''
+}
+</script>
+
+<template>
+  <div class="crypto-analysis-view" @click="handleClickOutside">
+    <div class="content-container">
+      <div class="initial-content" :class="{ minimized: selectedCrypto }">
+        <div class="header-section" :class="{ minimized: selectedCrypto }">
+          <h1 class="title">加密货币分析专家</h1>
+          <p class="description">
+            输入加密货币名称或代号（如：BTC、ETH），获取AI驱动的专业分析报告
+          </p>
+        </div>
+
+        <div class="search-section">
+          <div class="search-container" :class="{ 'is-analyzing': isAnalyzing }">
+            <div class="input-wrapper">
+              <div class="input-container" :class="{ 'has-selection': selectedCrypto }">
+                <div class="input-area">
+                  <template v-if="selectedCrypto">
+                    <div class="selected-tag">
+                      <span class="tag-text">{{ selectedCrypto.base_asset }}</span>
+                      <button class="tag-remove" @click.stop="clearSelection">
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="16"
+                          height="16"
+                          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>
+                  </template>
+                  <input
+                    v-show="!selectedCrypto"
+                    v-model="searchQuery"
+                    type="text"
+                    class="search-input"
+                    :class="{ 'is-selected': selectedCrypto }"
+                    placeholder="请输入加密货币名称或代号（如：BTC、ETH）"
+                    @focus="showDropdown = searchQuery.length >= 2 && cryptoOptions.length > 0"
+                    :disabled="isAnalyzing"
+                  />
+                </div>
+                <!-- 时间周期选择 -->
+                <div class="timeframe-selector">
+                  <div
+                    v-for="timeframe in timeframes"
+                    :key="timeframe.value"
+                    class="timeframe-option"
+                    :class="{ active: selectedTimeframe === timeframe.value }"
+                    @click="selectedTimeframe = timeframe.value"
+                  >
+                    <span class="timeframe-label">{{ timeframe.label }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 搜索提示 -->
+            <div v-if="showSearchTips" class="search-tips">继续输入以搜索加密货币...</div>
+
+            <!-- 加密货币选项下拉框 -->
+            <div
+              v-if="showDropdown && cryptoOptions.length > 0"
+              class="crypto-options"
+              :class="{ 'fade-in': showDropdown }"
+            >
+              <div
+                v-for="crypto in cryptoOptions"
+                :key="crypto.symbol"
+                class="crypto-option"
+                @click="selectCrypto(crypto)"
+              >
+                <div class="crypto-name">{{ crypto.base_asset }}</div>
+              </div>
+            </div>
+
+            <!-- 无搜索结果提示 -->
+            <div
+              v-if="
+                showDropdown &&
+                searchQuery.length >= 2 &&
+                cryptoOptions.length === 0 &&
+                !isSearching
+              "
+              class="no-results fade-in"
+            >
+              未找到匹配的加密货币
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 分析状态和结果区域 -->
+      <div v-if="selectedCrypto && isAnalyzing" class="selected-crypto-info fade-in">
+        <div class="crypto-card" :class="{ 'is-analyzing': isAnalyzing }">
+          <div class="analysis-status">
+            <div class="analysis-progress">
+              <div class="progress-dots">
+                <span></span>
+                <span></span>
+                <span></span>
+              </div>
+            </div>
+            <p class="status-text">
+              <span class="status-label">AI分析进行中</span>
+              <span class="thought-text" v-if="currentThought">{{ currentThought }}</span>
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-if="analysisContent"
+        class="analysis-container"
+        ref="analysisContainer"
+        :class="{ 'fade-in': analysisContent }"
+      >
+        <div class="analysis-content" v-html="analysisContent"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 移除不需要的时间周期选择样式 */
+.timeframe-section {
+  display: none;
+}
+
+.crypto-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: 1200px;
+  margin: 0 auto;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.header-section {
+  text-align: center;
+  transition: all 0.5s ease;
+}
+
+.header-section.minimized {
+  padding: 0.5rem 0;
+}
+
+.initial-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 100%;
+  padding: 2rem 1rem;
+  gap: 2rem;
+  transition: all 0.5s ease;
+}
+
+.initial-content.minimized {
+  min-height: auto;
+  padding: 0;
+  gap: 1rem;
+}
+
+.title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: var(--color-text-primary);
+  margin-bottom: 0.5rem;
+  transition: all 0.5s ease;
+}
+
+.header-section.minimized .title {
+  font-size: 1.5rem;
+  margin-bottom: 0.25rem;
+}
+
+.description {
+  font-size: 1rem;
+  color: var(--color-text-secondary);
+  transition: all 0.5s ease;
+}
+
+.header-section.minimized .description {
+  font-size: 0.9rem;
+}
+
+.main-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.main-section.centered {
+  justify-content: center;
+  padding: 2rem 0;
+}
+
+.main-section.top-aligned {
+  justify-content: flex-start;
+  padding-top: 1rem;
+}
+
+.search-section {
+  width: 100%;
+  transition: all 0.5s ease;
+}
+
+.search-container {
+  position: relative;
+  padding: 1.5rem;
+  transition: all 0.3s ease;
+}
+
+.input-wrapper {
+  position: relative;
+  margin-bottom: 0;
+}
+
+.input-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 5.5rem;
+  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%;
+  min-height: 2.5rem;
+}
+
+.input-container:hover {
+  border-color: var(--color-accent);
+  opacity: 0.8;
+}
+
+.input-container.has-selection {
+  background-color: transparent;
+}
+
+.selected-tag {
+  display: flex;
+  align-items: center;
+  background-color: var(--color-accent);
+  color: white;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--border-radius);
+  margin-right: 0.5rem;
+  font-size: 1rem;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  gap: 0.5rem;
+}
+
+.tag-text {
+  margin-right: 0.25rem;
+}
+
+.tag-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.15rem;
+  border: none;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  line-height: 0;
+}
+
+.tag-remove:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: scale(1.1);
+}
+
+.tag-remove svg {
+  width: 14px;
+  height: 14px;
+  stroke: currentColor;
+  stroke-width: 2.5;
+}
+
+.search-input {
+  flex: 1;
+  border: none;
+  background: none;
+  padding: 0;
+  font-size: 1.1rem;
+  color: var(--color-text-primary);
+  outline: none;
+  height: 2.5rem;
+}
+
+.crypto-options {
+  position: absolute;
+  top: calc(100% + 5px);
+  left: 0;
+  right: 0;
+  background-color: var(--color-bg-primary);
+  border: 2px solid var(--color-border);
+  border-radius: var(--border-radius);
+  max-height: 300px;
+  overflow-y: auto;
+  z-index: 10;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  margin: 0 1.5rem;
+}
+
+.crypto-option {
+  padding: 1rem 1.5rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.crypto-option:last-child {
+  border-bottom: none;
+}
+
+.crypto-option:hover {
+  background-color: var(--color-bg-secondary);
+}
+
+.crypto-name {
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.analyze-button {
+  width: 100%;
+  padding: 0.75rem;
+  font-size: 1rem;
+  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;
+}
+
+.selected-crypto-info {
+  margin-bottom: 2rem;
+}
+
+.crypto-card {
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.crypto-card.is-analyzing {
+  position: relative;
+  overflow: hidden;
+}
+
+.analysis-status {
+  margin-top: 1rem;
+  text-align: center;
+  width: 100%;
+}
+
+.analysis-progress {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1rem;
+}
+
+.progress-dots {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.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 {
+  color: var(--color-text-secondary);
+  font-size: 1rem;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  width: 100%;
+}
+
+.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;
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.no-results {
+  padding: 1rem;
+  text-align: center;
+  color: var(--color-text-secondary);
+  background-color: var(--color-bg-primary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  margin-top: 0.5rem;
+}
+
+.analysis-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.analysis-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0rem 1.5rem;
+  color: var(--color-text-primary);
+  line-height: 1.8;
+  font-size: 1.1rem;
+  white-space: pre-wrap;
+}
+
+.analysis-content :deep(h1),
+.analysis-content :deep(h2),
+.analysis-content :deep(h3),
+.analysis-content :deep(h4) {
+  margin-top: 1.5em;
+  margin-bottom: 0.8em;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.analysis-content :deep(p) {
+  margin-bottom: 1em;
+  white-space: pre-wrap;
+}
+
+.analysis-content :deep(ul),
+.analysis-content :deep(ol) {
+  margin: 1em 0;
+  padding-left: 2em;
+}
+
+.analysis-content :deep(li) {
+  margin: 0.5em 0;
+  line-height: 1.6;
+}
+
+.analysis-content :deep(code) {
+  font-family: monospace;
+  background-color: rgba(var(--color-accent-rgb), 0.1);
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+  font-size: 0.9em;
+}
+
+.analysis-content :deep(pre) {
+  background-color: rgba(var(--color-accent-rgb), 0.05);
+  padding: 1em;
+  border-radius: var(--border-radius);
+  overflow-x: auto;
+  margin: 1em 0;
+}
+
+.analysis-content :deep(pre code) {
+  background-color: transparent;
+  padding: 0;
+  font-size: 0.9em;
+  line-height: 1.5;
+}
+
+.analysis-content :deep(blockquote) {
+  border-left: 4px solid var(--color-accent);
+  margin: 1em 0;
+  padding: 0.5em 0 0.5em 1em;
+  background-color: rgba(var(--color-accent-rgb), 0.05);
+}
+
+.analysis-content :deep(table) {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1em 0;
+}
+
+.analysis-content :deep(th),
+.analysis-content :deep(td) {
+  border: 1px solid var(--color-border);
+  padding: 0.5em;
+  text-align: left;
+}
+
+.analysis-content :deep(th) {
+  background-color: rgba(var(--color-accent-rgb), 0.05);
+  font-weight: 600;
+}
+
+:deep(.thought-step) {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  margin: 1rem 0;
+  padding: 0.75rem;
+  background-color: rgba(var(--color-accent-rgb), 0.05);
+  border-radius: 0.5rem;
+  border: 1px solid rgba(var(--color-accent-rgb), 0.1);
+}
+
+:deep(.thought-icon) {
+  font-size: 1.2rem;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+:deep(.thought-content) {
+  color: var(--color-text-secondary);
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+: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: 0.5rem;
+  color: #ff4444;
+  font-size: 0.95rem;
+}
+
+.analysis-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.analysis-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.analysis-content::-webkit-scrollbar-thumb {
+  background-color: var(--color-border);
+  border-radius: 3px;
+}
+
+.analysis-content::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-accent);
+}
+
+@media (max-width: 768px) {
+  .crypto-analysis-view {
+    padding: 0.5rem;
+  }
+
+  .initial-content {
+    padding: 1rem 0.5rem;
+    gap: 1.5rem;
+  }
+
+  .initial-content.minimized {
+    padding: 0;
+    gap: 0.75rem;
+  }
+
+  .header-section {
+    padding: 0.75rem 0;
+  }
+
+  .header-section.minimized {
+    padding: 0.25rem 0;
+  }
+
+  .title {
+    font-size: 1.75rem;
+  }
+
+  .header-section.minimized .title {
+    font-size: 1.25rem;
+  }
+
+  .search-container {
+    padding: 1rem;
+    margin: 0 -0.5rem;
+  }
+
+  .search-input {
+    height: 3rem;
+    font-size: 1rem;
+    padding: 0.75rem 2rem 0.75rem 1rem;
+    border-radius: 0;
+  }
+
+  .analysis-container {
+    margin: 0.5rem -0.5rem 0;
+    border-left: none;
+    border-right: none;
+    border-radius: 0;
+    padding: 1rem;
+  }
+
+  .analysis-content {
+    font-size: 1rem;
+    padding-right: 0.25rem;
+  }
+
+  .crypto-card {
+    margin: 0;
+  }
+
+  .status-text {
+    font-size: 0.95rem;
+    gap: 0.75rem;
+  }
+
+  .status-label {
+    font-size: 1rem;
+  }
+
+  .thought-text {
+    font-size: 0.9rem;
+    max-width: 95%;
+  }
+
+  .selected-tag {
+    padding: 0.4rem 0.6rem;
+    font-size: 0.95rem;
+  }
+
+  .tag-remove {
+    padding: 0.12rem;
+  }
+
+  .tag-remove svg {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+@media (max-width: 480px) {
+  .initial-content {
+    padding: 0.75rem 0.5rem;
+    gap: 1rem;
+  }
+
+  .initial-content.minimized {
+    gap: 0.5rem;
+  }
+
+  .title {
+    font-size: 1.5rem;
+  }
+
+  .header-section.minimized .title {
+    font-size: 1.1rem;
+  }
+
+  .description {
+    font-size: 0.9rem;
+  }
+
+  .header-section.minimized .description {
+    font-size: 0.8rem;
+  }
+
+  .crypto-option {
+    padding: 0.5rem 0.75rem;
+  }
+
+  .analysis-container {
+    padding: 1rem;
+  }
+}
+
+.search-container.is-analyzing {
+  opacity: 0.8;
+  pointer-events: none;
+}
+
+.search-input.is-selected {
+  border-color: var(--color-accent);
+  background-color: rgba(var(--color-accent-rgb), 0.05);
+}
+
+.search-tips {
+  position: absolute;
+  top: 100%;
+  left: 1.5rem;
+  right: 1.5rem;
+  margin-top: 0.5rem;
+  padding: 0.75rem;
+  background-color: rgba(var(--color-accent-rgb), 0.1);
+  border-radius: var(--border-radius);
+  color: var(--color-accent);
+  font-size: 0.9rem;
+  text-align: center;
+  animation: fadeInOut 3s forwards;
+}
+
+@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);
+  }
+}
+
+@keyframes fadeInOut {
+  0% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  10% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  90% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .search-tips {
+    background-color: rgba(var(--color-accent-rgb), 0.2);
+  }
+
+  .progress-dots span {
+    background-color: var(--color-accent);
+    opacity: 0.4;
+  }
+
+  .status-label {
+    color: var(--color-accent);
+  }
+
+  .thought-text {
+    color: var(--color-text-secondary);
+  }
+
+  :deep(.thought-step) {
+    background-color: rgba(var(--color-accent-rgb), 0.1);
+    border-color: rgba(var(--color-accent-rgb), 0.2);
+  }
+
+  :deep(.error-message) {
+    background-color: rgba(255, 0, 0, 0.1);
+    border-color: rgba(255, 0, 0, 0.2);
+  }
+
+  .search-container {
+    border-color: var(--color-border);
+  }
+
+  .search-input {
+    background-color: rgba(255, 255, 255, 0.05);
+    border-color: var(--color-accent);
+  }
+
+  .search-input:focus,
+  .search-input:hover {
+    border-color: var(--color-accent);
+  }
+}
+
+.timeframe-selector {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-top: 0.5rem;
+}
+
+.timeframe-selector .timeframe-option {
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.timeframe-selector .timeframe-label {
+  display: inline-block;
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--border-radius);
+  font-size: 0.9rem;
+  color: var(--color-text-secondary);
+  background-color: var(--color-bg-secondary);
+  transition: all 0.2s ease;
+}
+
+.timeframe-selector .timeframe-option:not(.active):hover .timeframe-label {
+  background-color: rgba(var(--color-accent-rgb), 0.1);
+  color: var(--color-accent);
+}
+
+.timeframe-selector .timeframe-option.active .timeframe-label {
+  background-color: var(--color-accent);
+  color: white;
+}
+
+@media (prefers-color-scheme: dark) {
+  .timeframe-selector .timeframe-label {
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+
+  .timeframe-selector .timeframe-option:not(.active):hover .timeframe-label {
+    background-color: rgba(var(--color-accent-rgb), 0.2);
+  }
+}
+</style>
diff --git a/src/views/StockAnalysisView.vue b/src/views/StockAnalysisView.vue
new file mode 100644
index 0000000..8abbc6b
--- /dev/null
+++ b/src/views/StockAnalysisView.vue
@@ -0,0 +1,512 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useUserStore } from '../stores/user'
+
+interface StockOption {
+  stock_code: string
+  short_name: string
+  exchange: string
+  list_date: string
+}
+
+const userStore = useUserStore()
+const searchQuery = ref('')
+const selectedStock = ref<StockOption | null>(null)
+const isAnalyzing = ref(false)
+const analysisResult = ref(null)
+const showDropdown = ref(false)
+const isSearching = ref(false)
+const stockOptions = ref<StockOption[]>([])
+
+// 根据环境选择API基础URL
+const apiBaseUrl =
+  import.meta.env.MODE === 'development' ? 'http://127.0.0.1:8000' : 'https://api.ibtc.work'
+
+// 监听搜索输入
+watch(searchQuery, async (newQuery) => {
+  const query = newQuery.trim()
+  if (!query || query.length < 2) {
+    stockOptions.value = []
+    showDropdown.value = false
+    selectedStock.value = null
+    return
+  }
+
+  isSearching.value = true
+  try {
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+    }
+    if (userStore.authHeader) {
+      headers['Authorization'] = userStore.authHeader
+    }
+
+    const response = await fetch(
+      `${apiBaseUrl}/adata/stock/search?key=${encodeURIComponent(query)}`,
+      {
+        method: 'GET',
+        headers,
+      },
+    )
+
+    if (!response.ok) {
+      throw new Error('搜索请求失败')
+    }
+
+    const data = await response.json()
+    stockOptions.value = data
+    showDropdown.value = true
+  } catch (error) {
+    console.error('搜索股票失败:', error)
+    stockOptions.value = []
+  } finally {
+    isSearching.value = false
+  }
+})
+
+const selectStock = (stock: StockOption) => {
+  selectedStock.value = stock
+  searchQuery.value = `${stock.stock_code} - ${stock.short_name}`
+  showDropdown.value = false
+}
+
+const handleSearch = async () => {
+  if (!selectedStock.value) {
+    return
+  }
+
+  isAnalyzing.value = true
+  try {
+    // TODO: 调用股票分析接口
+    // const response = await fetch('API_URL', {
+    //   method: 'POST',
+    //   headers: {
+    //     'Content-Type': 'application/json'
+    //   },
+    //   body: JSON.stringify({
+    //     stockCode: selectedStock.value.stock_code,
+    //     market: selectedStock.value.exchange
+    //   })
+    // })
+    // analysisResult.value = await response.json()
+
+    // 模拟API调用延迟
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+  } catch (error) {
+    console.error('分析请求失败:', error)
+  } finally {
+    isAnalyzing.value = false
+  }
+}
+
+// 点击外部关闭下拉框
+const handleClickOutside = (event: MouseEvent) => {
+  const target = event.target as HTMLElement
+  if (!target.closest('.search-container')) {
+    showDropdown.value = false
+  }
+}
+
+// 格式化上市日期
+const formatListDate = (dateString: string) => {
+  return new Date(dateString).toLocaleDateString('zh-CN')
+}
+</script>
+
+<template>
+  <div class="stock-analysis-view" @click="handleClickOutside">
+    <div class="content-container">
+      <div class="header-section">
+        <h1 class="title">股票分析专家</h1>
+        <p class="description">输入股票代码或名称（至少2个字符），获取AI驱动的专业分析报告</p>
+      </div>
+
+      <div class="main-section">
+        <div class="search-section">
+          <div class="search-container">
+            <div class="input-wrapper">
+              <input
+                v-model="searchQuery"
+                type="text"
+                class="search-input"
+                placeholder="请输入股票代码或名称（如：600519 或 贵州茅台）"
+                @focus="showDropdown = searchQuery.length >= 2 && stockOptions.length > 0"
+              />
+              <div class="search-icon">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <circle cx="11" cy="11" r="8"></circle>
+                  <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                </svg>
+              </div>
+              <!-- 加载指示器 -->
+              <div v-if="isSearching" class="loading-indicator">
+                <div class="spinner"></div>
+              </div>
+            </div>
+
+            <!-- 股票选项下拉框 -->
+            <div v-if="showDropdown && stockOptions.length > 0" class="stock-options">
+              <div
+                v-for="stock in stockOptions"
+                :key="stock.stock_code"
+                class="stock-option"
+                @click="selectStock(stock)"
+              >
+                <div class="stock-code">{{ stock.stock_code }}</div>
+                <div class="stock-name">{{ stock.short_name }}</div>
+                <div class="stock-market">{{ stock.exchange }}</div>
+              </div>
+            </div>
+
+            <!-- 无搜索结果提示 -->
+            <div
+              v-if="
+                showDropdown && searchQuery.length >= 2 && stockOptions.length === 0 && !isSearching
+              "
+              class="no-results"
+            >
+              未找到匹配的股票
+            </div>
+
+            <button
+              class="analyze-button"
+              @click="handleSearch"
+              :disabled="isAnalyzing || !selectedStock"
+            >
+              <span v-if="!isAnalyzing">AI分析</span>
+              <span v-else class="analyzing">
+                <span class="dot-animation">分析中</span>
+              </span>
+            </button>
+          </div>
+        </div>
+
+        <div v-if="selectedStock && !analysisResult" class="selected-stock-info">
+          <div class="stock-card">
+            <div class="stock-header">
+              <h3>{{ selectedStock.short_name }}</h3>
+              <span class="stock-code">{{ selectedStock.stock_code }}</span>
+            </div>
+            <div class="stock-details">
+              <div class="detail-item">
+                <span class="detail-label">交易所：</span>
+                <span class="detail-value">{{ selectedStock.exchange }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="detail-label">上市日期：</span>
+                <span class="detail-value">{{ formatListDate(selectedStock.list_date) }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="result-section" v-if="analysisResult">
+          <div class="analysis-card">
+            <h2>AI分析报告</h2>
+            <div class="analysis-content">
+              <!-- 这里将根据API返回的数据结构进行调整 -->
+              <p>分析结果将在这里显示</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.stock-analysis-view {
+  min-height: 100vh;
+  background-color: var(--color-bg-primary);
+  padding: 2rem 1rem;
+}
+
+.content-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.header-section {
+  text-align: center;
+  margin-bottom: 3rem;
+  padding: 2rem 0;
+}
+
+.title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: var(--color-text-primary);
+  margin-bottom: 1rem;
+}
+
+.description {
+  font-size: 1.1rem;
+  color: var(--color-text-secondary);
+}
+
+.main-section {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.search-section {
+  margin-bottom: 2rem;
+}
+
+.search-container {
+  position: relative;
+  background-color: var(--color-bg-secondary);
+  padding: 1.5rem;
+  border-radius: var(--border-radius);
+  border: 1px solid var(--color-border);
+}
+
+.input-wrapper {
+  position: relative;
+  margin-bottom: 1rem;
+}
+
+.search-input {
+  width: 100%;
+  padding: 0.75rem 2.5rem 0.75rem 1rem;
+  font-size: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  background-color: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  transition: all 0.2s ease;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: var(--color-accent);
+}
+
+.search-icon {
+  position: absolute;
+  right: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--color-text-secondary);
+}
+
+.loading-indicator {
+  position: absolute;
+  right: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--color-accent);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.stock-options {
+  position: absolute;
+  top: 100%;
+  left: 1.5rem;
+  right: 1.5rem;
+  background-color: var(--color-bg-primary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  margin-top: 0.5rem;
+  max-height: 300px;
+  overflow-y: auto;
+  z-index: 10;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.stock-option {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.stock-option:hover {
+  background-color: var(--color-bg-secondary);
+}
+
+.stock-code {
+  font-weight: 500;
+  margin-right: 1rem;
+  color: var(--color-accent);
+}
+
+.stock-name {
+  flex: 1;
+  color: var(--color-text-primary);
+}
+
+.stock-market {
+  color: var(--color-text-secondary);
+  font-size: 0.9rem;
+}
+
+.analyze-button {
+  width: 100%;
+  padding: 0.75rem;
+  font-size: 1rem;
+  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;
+}
+
+.selected-stock-info {
+  margin-bottom: 2rem;
+}
+
+.stock-card {
+  background-color: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  padding: 1.5rem;
+}
+
+.stock-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.stock-header h3 {
+  margin: 0;
+  font-size: 1.2rem;
+  color: var(--color-text-primary);
+}
+
+.stock-details {
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.detail-item {
+  display: flex;
+  align-items: center;
+}
+
+.detail-label {
+  color: var(--color-text-secondary);
+  margin-right: 0.5rem;
+  min-width: 5rem;
+}
+
+.detail-value {
+  color: var(--color-text-primary);
+}
+
+.analyzing {
+  display: inline-flex;
+  align-items: center;
+}
+
+.dot-animation {
+  position: relative;
+}
+
+.dot-animation::after {
+  content: '...';
+  position: absolute;
+  animation: dots 1.5s infinite;
+  margin-left: 2px;
+}
+
+@keyframes dots {
+  0%,
+  20% {
+    content: '.';
+  }
+  40%,
+  60% {
+    content: '..';
+  }
+  80%,
+  100% {
+    content: '...';
+  }
+}
+
+.no-results {
+  padding: 1rem;
+  text-align: center;
+  color: var(--color-text-secondary);
+  background-color: var(--color-bg-primary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  margin-top: 0.5rem;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .stock-analysis-view {
+    padding: 1rem;
+  }
+
+  .title {
+    font-size: 2rem;
+  }
+
+  .search-container {
+    padding: 1rem;
+  }
+
+  .stock-options {
+    left: 1rem;
+    right: 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .header-section {
+    padding: 1rem 0;
+  }
+
+  .stock-option {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.25rem;
+  }
+
+  .stock-code {
+    margin-right: 0;
+  }
+}
+</style>