feat(FEAT-MO-001): 完成TDX市场概览首屏

2026-08-18 15:28:35 +08:00
parent 27bc3c198f
commit 82619489a9
38 changed files with 1230 additions and 54 deletions
@@ -0,0 +1,96 @@
+<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 { useMarketOverview } from './useMarketOverview';
+
+const {
+  summary,
+  indices,
+  breadth,
+  sectors,
+  funds,
+  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'" />
+    </div>
+  </div>
+</template>