feat: 全屏个股详情预览 + Tailwind 改版 + 账号鉴权

frontend/src/components/StockDetailOverlay.vue

@@ -0,0 +1,286 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { getStockPreview } from '@/api/client';
+import type { PreviewResponse, ScreenerItemOut } from '@/api/types';
+import DetailKLine from './DetailKLine.vue';
+
+const props = defineProps<{
+  items: ScreenerItemOut[];
+  initial: string; // ts_code
+}>();
+const emit = defineEmits<{ (e: 'close'): void }>();
+
+// ---------- 状态 ----------
+const active = ref(props.initial);
+const data = ref<PreviewResponse | null>(null);
+const loading = ref(false);
+const error = ref<string | null>(null);
+const filter = ref('');
+
+// 副图指标：点击开关 / 拖拽排序
+const SUBS = [
+  { key: 'vol', label: 'VOL' },
+  { key: 'macd', label: 'MACD' },
+  { key: 'kdj', label: 'KDJ' },
+  { key: 'rsi', label: 'RSI' },
+];
+const subPanes = ref<string[]>(['vol', 'macd', 'kdj', 'rsi']);
+const showBoll = ref(false);
+
+const filteredItems = computed(() => {
+  const q = filter.value.trim().toLowerCase();
+  if (!q) return props.items;
+  return props.items.filter(
+    (it) => it.ts_code.toLowerCase().includes(q) || it.name.toLowerCase().includes(q),
+  );
+});
+
+const activeItem = computed(
+  () => props.items.find((it) => it.ts_code === active.value) ?? null,
+);
+
+// 头部/右侧展示值：优先预览信息（最新），否则用选股行数据兜底
+const header = computed(() => {
+  const info = data.value?.info;
+  const item = activeItem.value;
+  return {
+    name: info?.name ?? item?.name ?? active.value,
+    close: info?.close ?? item?.close ?? null,
+    pct: info?.pct_chg ?? item?.pct_chg ?? null,
+  };
+});
+
+// ---------- 数据加载 ----------
+let fetchToken = 0;
+async function load(code: string) {
+  const token = ++fetchToken;
+  loading.value = true;
+  error.value = null;
+  data.value = null;
+  try {
+    const res = await getStockPreview(code);
+    if (token === fetchToken) data.value = res;
+  } catch (e) {
+    if (token === fetchToken) error.value = e instanceof Error ? e.message : '加载失败';
+  } finally {
+    if (token === fetchToken) loading.value = false;
+  }
+}
+watch(active, (code) => load(code), { immediate: true });
+
+function moveActive(delta: number) {
+  const list = filteredItems.value;
+  const idx = list.findIndex((it) => it.ts_code === active.value);
+  if (list.length === 0) return;
+  const next = idx < 0 ? 0 : Math.min(list.length - 1, Math.max(0, idx + delta));
+  active.value = list[next].ts_code;
+}
+
+// ---------- 键盘 / 滚动锁 ----------
+function onKeydown(e: KeyboardEvent) {
+  // 输入法组合态 / 焦点在输入框时不拦截（否则搜索框打字会切股、Esc 关浮层）
+  if (e.isComposing) return;
+  const t = e.target as HTMLElement | null;
+  if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) return;
+  if (e.key === 'Escape') emit('close');
+  else if (e.key === 'ArrowUp') { e.preventDefault(); moveActive(-1); }
+  else if (e.key === 'ArrowDown') { e.preventDefault(); moveActive(1); }
+}
+onMounted(() => {
+  window.addEventListener('keydown', onKeydown);
+  document.body.style.overflow = 'hidden';
+});
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onKeydown);
+  document.body.style.overflow = '';
+});
+
+// ---------- 副图 chips：开关 + 拖拽排序 ----------
+let dragKey: string | null = null;
+function toggleSub(key: string) {
+  subPanes.value = subPanes.value.includes(key)
+    ? subPanes.value.filter((k) => k !== key)
+    : [...subPanes.value, key];
+}
+function onDragStart(e: DragEvent, key: string) {
+  dragKey = key;
+  // Firefox/Safari 要求 dragstart 写入数据才会真正发起拖拽
+  e.dataTransfer?.setData('text/plain', key);
+  if (e.dataTransfer) e.dataTransfer.effectAllowed = 'move';
+}
+function onDrop(target: string) {
+  if (!dragKey || dragKey === target) return;
+  const arr = [...subPanes.value];
+  const from = arr.indexOf(dragKey);
+  if (from >= 0) arr.splice(from, 1);
+  const to = arr.indexOf(target);
+  arr.splice(to >= 0 ? to : arr.length, 0, dragKey);
+  subPanes.value = arr;
+  dragKey = null;
+}
+
+// ---------- 格式化 ----------
+const fmt = (v: number | null | undefined, d = 2) => (v == null ? '—' : v.toFixed(d));
+const fmtInt = (v: number | null | undefined) =>
+  v == null ? '—' : Math.round(v).toLocaleString();
+const pctClass = (v: number | null | undefined) =>
+  v == null ? '' : v > 0 ? 'text-up' : v < 0 ? 'text-down' : '';
+const fmtListDate = (s?: string | null) => (s && s.length === 8 ? `${s.slice(0, 4)}-${s.slice(4, 6)}-${s.slice(6, 8)}` : s ?? '—');
+</script>
+
+<template>
+  <div class="fixed inset-0 z-40 flex flex-col bg-slate-100">
+    <!-- 顶栏 -->
+    <header class="flex h-12 shrink-0 items-center gap-4 border-b border-slate-200 bg-white px-4">
+      <div class="flex items-baseline gap-2">
+        <span class="text-base font-semibold text-slate-900">{{ header.name }}</span>
+        <span class="text-xs text-slate-400">{{ active }}</span>
+      </div>
+      <div class="flex items-baseline gap-2">
+        <span class="text-lg font-semibold" :class="pctClass(header.pct)">{{ fmt(header.close) }}</span>
+        <span v-if="header.pct != null" class="text-sm" :class="pctClass(header.pct)">
+          {{ header.pct > 0 ? '+' : '' }}{{ fmt(header.pct) }}%
+        </span>
+      </div>
+      <span v-if="data?.source === 'market'" class="rounded bg-amber-50 px-2 py-0.5 text-[11px] text-amber-600">
+        近段未复权数据
+      </span>
+      <span v-else-if="data" class="rounded bg-blue-50 px-2 py-0.5 text-[11px] text-blue-600">前复权</span>
+
+      <span class="ml-auto text-xs text-slate-400">↑↓ 切换 · Esc 关闭</span>
+      <button type="button" class="btn-ghost !px-2.5 !py-1" title="关闭 (Esc)" @click="emit('close')">
+        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12" /></svg>
+      </button>
+    </header>
+
+    <!-- 三栏主体 -->
+    <div class="flex min-h-0 flex-1">
+      <!-- 左：命中列表 -->
+      <aside class="flex w-56 shrink-0 flex-col border-r border-slate-200 bg-white">
+        <div class="border-b border-slate-100 p-2">
+          <input v-model="filter" type="text" class="ipt w-full !py-1 text-xs" placeholder="搜索代码 / 名称" />
+        </div>
+        <div class="min-h-0 flex-1 overflow-y-auto">
+          <button
+            v-for="it in filteredItems"
+            :key="it.ts_code"
+            type="button"
+            class="flex w-full items-center gap-2 border-b border-slate-50 px-3 py-2 text-left transition-colors"
+            :class="it.ts_code === active ? 'bg-blue-50' : 'hover:bg-slate-50'"
+            @click="active = it.ts_code"
+          >
+            <span class="min-w-0 flex-1">
+              <span class="block truncate text-[13px] font-medium text-slate-800">{{ it.name }}</span>
+              <span class="block text-[11px] text-slate-400">{{ it.ts_code }}</span>
+            </span>
+            <span class="text-right">
+              <span class="block text-[13px]">{{ fmt(it.close) }}</span>
+              <span class="block text-[11px]" :class="pctClass(it.pct_chg)">
+                {{ it.pct_chg == null ? '—' : (it.pct_chg > 0 ? '+' : '') + it.pct_chg.toFixed(2) + '%' }}
+              </span>
+            </span>
+          </button>
+          <div v-if="filteredItems.length === 0" class="px-3 py-8 text-center text-xs text-slate-400">无匹配</div>
+        </div>
+        <div class="border-t border-slate-100 px-3 py-2 text-[11px] text-slate-400">共 {{ filteredItems.length }} 只</div>
+      </aside>
+
+      <!-- 中：K线 + 指标面板 -->
+      <section class="flex min-w-0 flex-1 flex-col">
+        <!-- 指标开关 / 排序 -->
+        <div class="flex shrink-0 flex-wrap items-center gap-1.5 bg-white px-3 py-2">
+          <span class="text-[11px] text-slate-400">副图：</span>
+          <button
+            v-for="s in SUBS"
+            :key="s.key"
+            type="button"
+            draggable="true"
+            class="cursor-grab rounded-md border px-2.5 py-1 text-xs transition-colors active:cursor-grabbing"
+            :class="subPanes.includes(s.key)
+              ? 'border-blue-600 bg-blue-600 text-white'
+              : 'border-slate-200 bg-white text-slate-400 line-through'"
+            :title="subPanes.includes(s.key) ? '点击隐藏 · 拖动排序' : '点击显示'"
+            @click="toggleSub(s.key)"
+            @dragstart="onDragStart($event, s.key)"
+            @dragover.prevent
+            @drop="onDrop(s.key)"
+          >
+            {{ s.label }}
+          </button>
+          <button
+            type="button"
+            class="rounded-md border px-2.5 py-1 text-xs transition-colors"
+            :class="showBoll ? 'border-purple-500 bg-purple-500 text-white' : 'border-slate-200 bg-white text-slate-400'"
+            title="主图叠加布林带"
+            @click="showBoll = !showBoll"
+          >BOLL</button>
+          <span class="ml-2 text-[11px] text-slate-400">点击开关副图 · 拖动排序 · 滚轮缩放 · 拖拽平移</span>
+        </div>
+
+        <!-- 图表 -->
+        <div class="relative min-h-0 flex-1 bg-white p-1">
+          <div v-if="loading" class="absolute inset-0 z-10 flex flex-col items-center justify-center bg-white/80 text-sm text-slate-400">
+            <svg class="mb-2 h-6 w-6 animate-spin text-blue-500" viewBox="0 0 24 24" fill="none"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" /><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" /></svg>
+            {{ active }} 首次查看需拉取全量日线…
+          </div>
+          <div v-else-if="error" class="flex h-full items-center justify-center text-sm text-red-600">{{ error }}</div>
+          <DetailKLine
+            v-else-if="data && data.candles.length"
+            :ticker="data.ts_code"
+            :candles="data.candles"
+            :indicators="data.indicators"
+            :sub-panes="subPanes"
+            :show-boll="showBoll"
+          />
+          <div v-else class="flex h-full items-center justify-center text-sm text-slate-400">无数据</div>
+        </div>
+      </section>
+
+      <!-- 右：个股信息（通达信式） -->
+      <aside v-if="data" class="w-72 shrink-0 overflow-y-auto border-l border-slate-200 bg-white p-4">
+        <div class="border-b border-slate-100 pb-3">
+          <div class="text-[15px] font-semibold text-slate-900">{{ data.info.name }}</div>
+          <div class="mt-0.5 text-xs text-slate-400">
+            {{ data.info.ts_code }}
+            <span v-if="data.info.market" class="ml-1 rounded bg-slate-100 px-1.5 py-0.5">{{ data.info.market }}</span>
+          </div>
+          <div class="mt-2 flex items-baseline gap-2">
+            <span class="text-2xl font-semibold" :class="pctClass(data.info.pct_chg)">{{ fmt(data.info.close) }}</span>
+            <span v-if="data.info.pct_chg != null" class="text-sm" :class="pctClass(data.info.pct_chg)">
+              {{ data.info.pct_chg > 0 ? '+' : '' }}{{ fmt(data.info.pct_chg) }}%
+            </span>
+          </div>
+        </div>
+
+        <div class="mt-3 grid grid-cols-2 gap-y-2 text-[13px]">
+          <template v-for="(row, i) in [
+            ['今开', fmt(data.info.open)],
+            ['昨收', fmt(data.info.pre_close)],
+            ['最高', fmt(data.info.high)],
+            ['最低', fmt(data.info.low)],
+            ['成交量', fmtInt(data.info.volume_hand) + ' 手'],
+            ['成交额', fmt(data.info.amount_yi) + ' 亿'],
+            ['换手率', fmt(data.info.turnover_rate) + '%'],
+            ['市盈率TTM', fmt(data.info.pe_ttm)],
+            ['市净率', fmt(data.info.pb)],
+            ['总市值', fmt(data.info.total_mv) + ' 亿'],
+            ['流通市值', fmt(data.info.circ_mv) + ' 亿'],
+            ['上市日期', fmtListDate(data.info.list_date)],
+            ['数据日期', (data.info.trade_date ?? '').slice(0, 10) || '—'],
+          ]" :key="i">
+            <span class="text-slate-400">{{ row[0] }}</span>
+            <span class="text-right text-slate-800">{{ row[1] }}</span>
+          </template>
+        </div>
+
+        <div class="mt-4 border-t border-slate-100 pt-3 text-[13px]">
+          <div class="mb-2 text-xs text-slate-400">归属</div>
+          <div class="flex flex-wrap gap-1.5">
+            <span v-if="data.info.industry" class="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs text-slate-600">{{ data.info.industry }}</span>
+            <span v-if="data.info.area" class="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs text-slate-600">{{ data.info.area }}</span>
+          </div>
+        </div>
+      </aside>
+    </div>
+  </div>
+</template>