105 lines
3.0 KiB
Vue
105 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted } from 'vue';
|
|
|
|
import MarketBreadth from './components/MarketBreadth.vue';
|
|
import MarketConclusion from './components/MarketConclusion.vue';
|
|
import MarketDrivers from './components/MarketDrivers.vue';
|
|
import SectorOverview from './components/SectorOverview.vue';
|
|
import FundTrend from './components/FundTrend.vue';
|
|
import IndexOverview from './components/IndexOverview.vue';
|
|
import ShortTermEmotion from './components/ShortTermEmotion.vue';
|
|
import { useMarketOverview } from './useMarketOverview';
|
|
|
|
const {
|
|
summary,
|
|
indices,
|
|
breadth,
|
|
sectors,
|
|
funds,
|
|
shortTermEmotion,
|
|
shortTermConclusion,
|
|
isLoading,
|
|
analysisHorizon,
|
|
analysisEngine,
|
|
refresh,
|
|
setAnalysisHorizon,
|
|
setAnalysisEngine,
|
|
} = useMarketOverview();
|
|
|
|
onMounted(() => {
|
|
void refresh();
|
|
});
|
|
|
|
function openDetail(label: string) {
|
|
// 详情页尚未立项，先保留明确入口并避免伪造导航地址。
|
|
console.info(`市场概览详情入口：${label}`);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="market-overview-page">
|
|
<div class="overview-toolbar">
|
|
<div class="view-switcher" aria-label="分析视角">
|
|
<button
|
|
v-for="option in ['综合', '短线', '中长线']"
|
|
:key="option"
|
|
type="button"
|
|
:class="{ active: analysisHorizon === option }"
|
|
@click="setAnalysisHorizon(option)"
|
|
>
|
|
{{ option }}
|
|
</button>
|
|
</div>
|
|
<div class="toolbar-actions">
|
|
<label>
|
|
<span>分析引擎</span>
|
|
<select
|
|
:value="analysisEngine"
|
|
@change="setAnalysisEngine(($event.target as HTMLSelectElement).value)"
|
|
>
|
|
<option>规则</option>
|
|
<option>AI</option>
|
|
<option>混合</option>
|
|
<option>对照</option>
|
|
</select>
|
|
</label>
|
|
<button
|
|
type="button"
|
|
class="refresh-button"
|
|
:disabled="isLoading"
|
|
title="重新读取 TDX 行情"
|
|
@click="refresh"
|
|
>
|
|
{{ isLoading ? '读取中…' : '刷新行情' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<MarketConclusion :response="summary.response" :loading="summary.status === 'loading'" />
|
|
|
|
<div class="overview-grid overview-grid-top">
|
|
<MarketDrivers :response="summary.response" />
|
|
<IndexOverview
|
|
:response="indices.response"
|
|
:loading="indices.status === 'loading'"
|
|
@select="openDetail"
|
|
/>
|
|
</div>
|
|
|
|
<div class="overview-grid overview-grid-bottom">
|
|
<MarketBreadth :response="breadth.response" :loading="breadth.status === 'loading'" />
|
|
<SectorOverview
|
|
:response="sectors.response"
|
|
:loading="sectors.status === 'loading'"
|
|
@select="openDetail"
|
|
/>
|
|
<FundTrend :response="funds.response" :loading="funds.status === 'loading'" />
|
|
<ShortTermEmotion
|
|
:response="shortTermEmotion.response"
|
|
:loading="shortTermEmotion.status === 'loading'"
|
|
:conclusion="shortTermConclusion.response"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|