update
This commit is contained in:
aaron
parent
5393559171
commit
b6a9e72500
@ -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: '加密货币分析专家',
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
|
||||
1121
src/views/CryptoAnalysisView.vue
Normal file
1121
src/views/CryptoAnalysisView.vue
Normal file
File diff suppressed because it is too large
Load Diff
512
src/views/StockAnalysisView.vue
Normal file
512
src/views/StockAnalysisView.vue
Normal file
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user