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,34 @@
+<script setup lang="ts">
+import type { BreadthResponse } from '@/types/market-overview';
+
+defineProps<{ response: BreadthResponse | null; loading: boolean }>();
+</script>
+
+<template>
+  <section class="overview-panel" aria-labelledby="breadth-title">
+    <div class="panel-heading">
+      <div>
+        <span class="section-kicker">市场宽度</span>
+        <h2 id="breadth-title">涨跌分布与量能</h2>
+      </div>
+      <span class="panel-meta">分钟级</span>
+    </div>
+    <div v-if="loading" class="module-placeholder">正在读取市场宽度…</div>
+    <div v-else-if="response?.status === 'unavailable'" class="module-unavailable">
+      <strong>暂不可用</strong>
+      <span>{{ response.warnings[0] }}</span>
+    </div>
+    <div v-else-if="response?.data" class="breadth-values">
+      <div>
+        <span>上涨</span><strong class="positive">{{ response.data.advancing }}</strong>
+      </div>
+      <div>
+        <span>下跌</span><strong class="negative">{{ response.data.declining }}</strong>
+      </div>
+      <div>
+        <span>平盘</span><strong>{{ response.data.unchanged }}</strong>
+      </div>
+    </div>
+    <div v-else class="module-placeholder">暂无宽度数据</div>
+  </section>
+</template>