feat(web): 用紧凑卡片替换选股表格并精简资金雷达列
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
yuxuanhui
@@ -175,8 +175,22 @@ describe("SectorRadarPage", () => {
|
||||
|
||||
expect(screen.getAllByText("+12.5 亿元")[0]).toBeInTheDocument()
|
||||
expect(screen.getAllByText("机器人")[0]).toBeInTheDocument()
|
||||
expect(screen.getAllByText("样本有限")[0]).toBeInTheDocument()
|
||||
expect(screen.getAllByText("95%")[0]).toBeInTheDocument()
|
||||
expect(screen.getAllByText("19/20")[0]).toBeInTheDocument()
|
||||
expect(screen.getAllByText("100%")[0]).toBeInTheDocument()
|
||||
expect(
|
||||
screen.getAllByRole("columnheader", { name: "排名百分位" }),
|
||||
).toHaveLength(2)
|
||||
expect(screen.getAllByRole("columnheader", { name: "样本" })).toHaveLength(
|
||||
2,
|
||||
)
|
||||
expect(
|
||||
screen.queryByRole("columnheader", { name: "资金覆盖率" }),
|
||||
).not.toBeInTheDocument()
|
||||
expect(
|
||||
screen.queryByRole("columnheader", { name: "质量" }),
|
||||
).not.toBeInTheDocument()
|
||||
expect(screen.queryByText("样本有限")).not.toBeInTheDocument()
|
||||
expect(screen.queryByText("95%")).not.toBeInTheDocument()
|
||||
expect(screen.queryByText("收盘后板块资金排名")).not.toBeInTheDocument()
|
||||
expect(
|
||||
screen.queryByText("知行独立实现，非 OneChartLab 原站公式。"),
|
||||
|
||||
@@ -9,7 +9,6 @@ import {
|
||||
} from "@/features/sector-radar/api/sector-radar.query"
|
||||
import type {
|
||||
RadarMetricKind,
|
||||
RadarMetricQuality,
|
||||
RadarMetricUnit,
|
||||
RadarPublication,
|
||||
RadarRankingRow,
|
||||
@@ -18,7 +17,6 @@ import type {
|
||||
RadarView,
|
||||
SectorRadarRouteSearch,
|
||||
} from "@/features/sector-radar/api/sector-radar.types"
|
||||
import { Badge } from "@/shared/ui/badge"
|
||||
import { Button } from "@/shared/ui/button"
|
||||
import {
|
||||
Card,
|
||||
@@ -398,83 +396,71 @@ function RadarTable({
|
||||
role="region"
|
||||
tabIndex={0}
|
||||
>
|
||||
<table className="w-full min-w-[1280px] border-collapse text-sm">
|
||||
<table className="w-full min-w-[960px] border-collapse text-sm">
|
||||
<caption className="sr-only">
|
||||
{response.sector_type === "concept" ? "概念" : "行业"}板块资金双榜
|
||||
</caption>
|
||||
<colgroup>
|
||||
{Array.from({ length: 12 }, (_, i) => (
|
||||
{Array.from({ length: 8 }, (_, i) => (
|
||||
<col
|
||||
key={i}
|
||||
className={i === 5 || i === 6 ? "w-[120px]" : "w-[100px]"}
|
||||
className={i === 3 || i === 4 ? "w-[120px]" : "w-[100px]"}
|
||||
/>
|
||||
))}
|
||||
</colgroup>
|
||||
<thead className="sticky top-0 z-10 bg-muted/95 text-xs text-muted-foreground backdrop-blur">
|
||||
<tr>
|
||||
<th
|
||||
className="px-3 py-2 text-left font-medium"
|
||||
colSpan={5}
|
||||
className="px-3 py-1 text-left font-medium"
|
||||
colSpan={3}
|
||||
scope="colgroup"
|
||||
>
|
||||
资金进攻榜 TOP 10%
|
||||
</th>
|
||||
<th
|
||||
className="border-x border-border px-3 py-2 text-center font-medium"
|
||||
className="border-x border-border px-3 py-1 text-center font-medium"
|
||||
colSpan={2}
|
||||
scope="colgroup"
|
||||
>
|
||||
{rankChangeView ? "排名变化" : response.definition.label}
|
||||
</th>
|
||||
<th
|
||||
className="px-3 py-2 text-right font-medium"
|
||||
colSpan={5}
|
||||
className="px-3 py-1 text-right font-medium"
|
||||
colSpan={3}
|
||||
scope="colgroup"
|
||||
>
|
||||
BOTTOM 10% 资金撤离榜
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className="px-3 py-2 text-left font-medium" scope="col">
|
||||
<th className="px-3 py-1 text-left font-medium" scope="col">
|
||||
排名 / 板块
|
||||
</th>
|
||||
<th className="px-3 py-2 text-right font-medium" scope="col">
|
||||
<th className="px-3 py-1 text-right font-medium" scope="col">
|
||||
排名百分位
|
||||
</th>
|
||||
<th className="px-3 py-2 text-right font-medium" scope="col">
|
||||
<th className="px-3 py-1 text-right font-medium" scope="col">
|
||||
样本
|
||||
</th>
|
||||
<th className="px-3 py-2 text-right font-medium" scope="col">
|
||||
资金覆盖率
|
||||
</th>
|
||||
<th className="px-3 py-2 text-left font-medium" scope="col">
|
||||
质量
|
||||
</th>
|
||||
<th
|
||||
className="border-l border-border px-3 py-2 text-right font-medium"
|
||||
className="border-l border-border px-3 py-1 text-right font-medium"
|
||||
scope="col"
|
||||
>
|
||||
{rankChangeView ? "排名上升" : "流入"}
|
||||
</th>
|
||||
<th
|
||||
className="border-r border-border px-3 py-2 text-left font-medium"
|
||||
className="border-r border-border px-3 py-1 text-left font-medium"
|
||||
scope="col"
|
||||
>
|
||||
{rankChangeView ? "排名下降" : "流出"}
|
||||
</th>
|
||||
<th className="px-3 py-2 text-right font-medium" scope="col">
|
||||
质量
|
||||
</th>
|
||||
<th className="px-3 py-2 text-right font-medium" scope="col">
|
||||
资金覆盖率
|
||||
</th>
|
||||
<th className="px-3 py-2 text-right font-medium" scope="col">
|
||||
<th className="px-3 py-1 text-right font-medium" scope="col">
|
||||
样本
|
||||
</th>
|
||||
<th className="px-3 py-2 text-right font-medium" scope="col">
|
||||
<th className="px-3 py-1 text-right font-medium" scope="col">
|
||||
排名百分位
|
||||
</th>
|
||||
<th className="px-3 py-2 text-right font-medium" scope="col">
|
||||
<th className="px-3 py-1 text-right font-medium" scope="col">
|
||||
排名 / 板块
|
||||
</th>
|
||||
</tr>
|
||||
@@ -491,8 +477,8 @@ function RadarTable({
|
||||
{rowCount === 0 ? (
|
||||
<tr>
|
||||
<td
|
||||
className="px-3 py-12 text-center text-muted-foreground"
|
||||
colSpan={12}
|
||||
className="px-3 py-8 text-center text-muted-foreground"
|
||||
colSpan={8}
|
||||
>
|
||||
没有符合当前筛选条件的板块。
|
||||
</td>
|
||||
@@ -582,42 +568,49 @@ function RankCells({
|
||||
row?: RadarRankingRow
|
||||
align: "left" | "right"
|
||||
}) {
|
||||
if (!row)
|
||||
const rankClass = align === "right" ? "text-right" : "text-left"
|
||||
const rankCell = row ? (
|
||||
<td className={`px-3 py-1.5 ${rankClass} font-semibold tabular-nums`}>
|
||||
{row.rank_position ?? "—"}
|
||||
<span className="mx-0.5 font-normal text-muted-foreground">/</span>
|
||||
<span className="font-medium text-foreground">{row.sector_name}</span>
|
||||
<span className="ml-0.5 text-[11px] font-normal text-muted-foreground">
|
||||
{row.sector_code}
|
||||
</span>
|
||||
</td>
|
||||
) : (
|
||||
<td className="px-3 py-1.5 text-muted-foreground">—</td>
|
||||
)
|
||||
const percentileCell = row ? (
|
||||
<td className="px-3 py-1.5 text-right tabular-nums">
|
||||
{row.rank_percentile === null
|
||||
? "—"
|
||||
: `${formatNumber(row.rank_percentile, 2)}%`}
|
||||
</td>
|
||||
) : (
|
||||
<td />
|
||||
)
|
||||
const sampleCell = row ? (
|
||||
<td className="px-3 py-1.5 text-right tabular-nums">
|
||||
{row.valid_sample_count}/{row.member_count}
|
||||
</td>
|
||||
) : (
|
||||
<td />
|
||||
)
|
||||
if (align === "right") {
|
||||
return (
|
||||
<>
|
||||
<td className="px-3 py-2.5 text-muted-foreground">—</td>
|
||||
<td />
|
||||
<td />
|
||||
<td />
|
||||
<td />
|
||||
{sampleCell}
|
||||
{percentileCell}
|
||||
{rankCell}
|
||||
</>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<td
|
||||
className={`px-3 py-2.5 ${align === "right" ? "text-right" : "text-left"} font-semibold tabular-nums`}
|
||||
>
|
||||
{row.rank_position ?? "—"}
|
||||
<span className="mx-1 font-normal text-muted-foreground">/</span>
|
||||
<span className="font-medium text-foreground">{row.sector_name}</span>
|
||||
<span className="ml-1 text-xs font-normal text-muted-foreground">
|
||||
{row.sector_code}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-right tabular-nums">
|
||||
{row.rank_percentile === null
|
||||
? "—"
|
||||
: `${formatNumber(row.rank_percentile, 2)}%`}
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-right tabular-nums">
|
||||
{row.valid_sample_count}/{row.member_count}
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-right tabular-nums">
|
||||
{formatCoverage(row.moneyflow_coverage)}
|
||||
</td>
|
||||
<td className="px-3 py-2.5">
|
||||
<QualityBadge quality={row.quality} />
|
||||
</td>
|
||||
{rankCell}
|
||||
{percentileCell}
|
||||
{sampleCell}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -652,7 +645,7 @@ function MetricCell({
|
||||
: "text-foreground bg-muted/30"
|
||||
return (
|
||||
<td
|
||||
className={`${borderClass} border-border px-3 py-2.5 ${direction === "in" ? "text-right" : "text-left"} font-medium tabular-nums ${toneClass}`}
|
||||
className={`${borderClass} border-border px-3 py-1.5 ${direction === "in" ? "text-right" : "text-left"} font-medium tabular-nums ${toneClass}`}
|
||||
>
|
||||
{value}
|
||||
</td>
|
||||
@@ -673,19 +666,6 @@ function formatDirectionalMetric(
|
||||
return `${direction === "in" ? "+" : "−"}${formatted}`
|
||||
}
|
||||
|
||||
function QualityBadge({ quality }: { quality: RadarMetricQuality }) {
|
||||
if (quality === "available") return <Badge variant="outline">可用</Badge>
|
||||
if (quality === "available_limited_sample")
|
||||
return (
|
||||
<Badge
|
||||
className="border-amber-500/40 text-amber-700 dark:text-amber-200"
|
||||
variant="outline"
|
||||
>
|
||||
样本有限
|
||||
</Badge>
|
||||
)
|
||||
return <Badge variant="destructive">不可用</Badge>
|
||||
}
|
||||
function RadarLoading() {
|
||||
return (
|
||||
<Card aria-label="正在加载板块资金雷达" className="flex-1 shadow-none">
|
||||
@@ -768,9 +748,6 @@ function formatRankChange(value: number | null) {
|
||||
if (value < 0) return `${value} 名`
|
||||
return "0 名"
|
||||
}
|
||||
function formatCoverage(value: number) {
|
||||
return `${formatNumber(value * 100, 1)}%`
|
||||
}
|
||||
function formatNumber(value: number, maximumFractionDigits: number) {
|
||||
return value.toLocaleString("zh-CN", { maximumFractionDigits })
|
||||
}
|
||||
|
||||
@@ -26,7 +26,6 @@ import {
|
||||
signalCategoryOptions,
|
||||
type SignalCategoryFilter,
|
||||
} from "./selection-presentation"
|
||||
import { SignalTable } from "./signal-table"
|
||||
|
||||
const PAGE_SIZE_OPTIONS = [5, 10, 15] as const
|
||||
const SCORE_SORT_OPTIONS: ReadonlyArray<{
|
||||
@@ -195,15 +194,11 @@ export function SelectionResultsWorkbench({
|
||||
</div>
|
||||
|
||||
<div className="flex min-h-0 min-w-0 flex-col md:flex-1 md:overflow-hidden">
|
||||
<SignalTable
|
||||
onSelect={(stock) => setSelectedKey(getStockKey(stock))}
|
||||
selectedKey={selectedStock ? getStockKey(selectedStock) : null}
|
||||
stocks={currentStocks}
|
||||
/>
|
||||
<SignalRecordList
|
||||
expandedKeys={expandedKeys}
|
||||
onSelect={(stock) => setSelectedKey(getStockKey(stock))}
|
||||
onToggleExpanded={handleToggleExpanded}
|
||||
selectedKey={selectedStock ? getStockKey(selectedStock) : null}
|
||||
stocks={currentStocks}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import { ChevronDown, ChevronUp } from "lucide-react"
|
||||
import type { KeyboardEvent } from "react"
|
||||
|
||||
import { Badge } from "@/shared/ui/badge"
|
||||
import { Button } from "@/shared/ui/button"
|
||||
import { cn } from "@/shared/ui/utils"
|
||||
|
||||
import type { SelectionStockResult } from "../api/selection.types"
|
||||
import { PatternScoreDetails, PatternScoreSummary } from "./pattern-score"
|
||||
@@ -15,6 +17,7 @@ import { SignalDetails } from "./signal-details"
|
||||
|
||||
interface SignalRecordListProps {
|
||||
stocks: SelectionStockResult[]
|
||||
selectedKey: string | null
|
||||
expandedKeys: ReadonlySet<string>
|
||||
onSelect: (stock: SelectionStockResult) => void
|
||||
onToggleExpanded: (stock: SelectionStockResult) => void
|
||||
@@ -22,67 +25,86 @@ interface SignalRecordListProps {
|
||||
|
||||
export function SignalRecordList({
|
||||
stocks,
|
||||
selectedKey,
|
||||
expandedKeys,
|
||||
onSelect,
|
||||
onToggleExpanded,
|
||||
}: SignalRecordListProps) {
|
||||
function handleSelectKeyDown(
|
||||
event: KeyboardEvent<HTMLButtonElement>,
|
||||
stock: SelectionStockResult,
|
||||
) {
|
||||
if (event.key !== "Enter" && event.key !== " ") return
|
||||
event.preventDefault()
|
||||
onSelect(stock)
|
||||
}
|
||||
|
||||
if (stocks.length === 0) {
|
||||
return (
|
||||
<div className="flex min-h-32 items-center justify-center px-4 text-sm text-muted-foreground md:hidden">
|
||||
<div className="flex min-h-32 flex-1 items-center justify-center overflow-auto px-4 text-sm text-muted-foreground">
|
||||
没有符合当前筛选条件的信号。
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="divide-y divide-border/60 md:hidden">
|
||||
{stocks.map((stock) => {
|
||||
const key = getStockKey(stock)
|
||||
const expanded = expandedKeys.has(key)
|
||||
return (
|
||||
<article key={key} className="space-y-2 px-3 py-3">
|
||||
<button
|
||||
type="button"
|
||||
className="flex min-h-11 w-full items-center justify-between gap-3 text-left outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
|
||||
onClick={() => onSelect(stock)}
|
||||
<div className="min-h-0 flex-1 overflow-auto">
|
||||
<div className="divide-y divide-border/60">
|
||||
{stocks.map((stock) => {
|
||||
const key = getStockKey(stock)
|
||||
const selected = selectedKey === key
|
||||
const expanded = expandedKeys.has(key)
|
||||
return (
|
||||
<article
|
||||
key={key}
|
||||
className={cn(
|
||||
"space-y-1 px-2.5 py-1.5 transition-colors hover:bg-muted/50",
|
||||
selected && "bg-muted/70",
|
||||
)}
|
||||
data-selected={selected}
|
||||
>
|
||||
<span className="min-w-0">
|
||||
<span className="block truncate font-medium text-foreground">
|
||||
{stock.name}
|
||||
</span>
|
||||
<span className="font-mono text-[10px] text-muted-foreground">
|
||||
{stock.ts_code}
|
||||
</span>
|
||||
</span>
|
||||
<span className="shrink-0 font-medium tabular-nums text-foreground">
|
||||
¥ {stock.close.toFixed(2)}
|
||||
</span>
|
||||
</button>
|
||||
<div className="text-xs">
|
||||
<PatternScoreSummary score={stock.score} />
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{stock.signals.map((signal) => (
|
||||
<Badge
|
||||
key={signal.category}
|
||||
className={categoryToneClass(signal.category)}
|
||||
variant="outline"
|
||||
>
|
||||
{getCategoryLabel(signal.category)}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-xs tabular-nums text-muted-foreground">
|
||||
J
|
||||
<strong className="font-semibold text-foreground">
|
||||
{getStockJValue(stock)}
|
||||
</strong>
|
||||
</span>
|
||||
<div className="flex items-start gap-2">
|
||||
<button
|
||||
className="min-h-11 min-w-0 flex-1 text-left outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
|
||||
onClick={() => onSelect(stock)}
|
||||
onKeyDown={(event) => handleSelectKeyDown(event, stock)}
|
||||
type="button"
|
||||
>
|
||||
<span className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
|
||||
<span className="font-medium text-foreground">
|
||||
{stock.name}
|
||||
</span>
|
||||
<span className="font-mono text-[10px] text-muted-foreground">
|
||||
{stock.ts_code}
|
||||
</span>
|
||||
<span className="ml-auto font-medium tabular-nums text-foreground">
|
||||
¥ {stock.close.toFixed(2)}
|
||||
</span>
|
||||
</span>
|
||||
<span className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs">
|
||||
<span className="flex flex-wrap gap-1">
|
||||
{stock.signals.map((signal) => (
|
||||
<Badge
|
||||
key={signal.category}
|
||||
className={categoryToneClass(signal.category)}
|
||||
variant="outline"
|
||||
>
|
||||
{getCategoryLabel(signal.category)}
|
||||
</Badge>
|
||||
))}
|
||||
</span>
|
||||
<PatternScoreSummary score={stock.score} />
|
||||
<span className="tabular-nums text-muted-foreground">
|
||||
J
|
||||
<strong className="font-semibold text-foreground">
|
||||
{getStockJValue(stock)}
|
||||
</strong>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<Button
|
||||
aria-expanded={expanded}
|
||||
className="min-h-11 gap-1 px-2 text-xs text-muted-foreground"
|
||||
className="min-h-11 shrink-0 gap-1 px-2 text-xs text-muted-foreground"
|
||||
onClick={() => onToggleExpanded(stock)}
|
||||
variant="ghost"
|
||||
>
|
||||
@@ -94,31 +116,31 @@ export function SignalRecordList({
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{expanded ? (
|
||||
<div className="space-y-3">
|
||||
<section className="space-y-2">
|
||||
<p className="text-xs font-medium text-muted-foreground">
|
||||
图形相似度评分
|
||||
</p>
|
||||
<PatternScoreDetails score={stock.score} />
|
||||
</section>
|
||||
{stock.signals.map((signal) => (
|
||||
<section key={signal.category} className="space-y-2">
|
||||
{expanded ? (
|
||||
<div className="space-y-3">
|
||||
<section className="space-y-2">
|
||||
<p className="text-xs font-medium text-muted-foreground">
|
||||
{getCategoryLabel(signal.category)}
|
||||
图形相似度评分
|
||||
</p>
|
||||
<SignalDetails
|
||||
className="sm:grid-cols-3"
|
||||
details={signal.details}
|
||||
/>
|
||||
<PatternScoreDetails score={stock.score} />
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</article>
|
||||
)
|
||||
})}
|
||||
{stock.signals.map((signal) => (
|
||||
<section key={signal.category} className="space-y-2">
|
||||
<p className="text-xs font-medium text-muted-foreground">
|
||||
{getCategoryLabel(signal.category)}
|
||||
</p>
|
||||
<SignalDetails
|
||||
className="sm:grid-cols-3"
|
||||
details={signal.details}
|
||||
/>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</article>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,106 +0,0 @@
|
||||
import type { KeyboardEvent } from "react"
|
||||
|
||||
import { Badge } from "@/shared/ui/badge"
|
||||
|
||||
import type { SelectionStockResult } from "../api/selection.types"
|
||||
import { PatternScoreSummary } from "./pattern-score"
|
||||
import {
|
||||
categoryToneClass,
|
||||
getCategoryLabel,
|
||||
getStockJValue,
|
||||
getStockKey,
|
||||
} from "./selection-presentation"
|
||||
|
||||
interface SignalTableProps {
|
||||
stocks: SelectionStockResult[]
|
||||
selectedKey: string | null
|
||||
onSelect: (stock: SelectionStockResult) => void
|
||||
}
|
||||
|
||||
export function SignalTable({
|
||||
stocks,
|
||||
selectedKey,
|
||||
onSelect,
|
||||
}: SignalTableProps) {
|
||||
function handleRowKeyDown(
|
||||
event: KeyboardEvent<HTMLTableRowElement>,
|
||||
stock: SelectionStockResult,
|
||||
) {
|
||||
if (event.key !== "Enter" && event.key !== " ") return
|
||||
event.preventDefault()
|
||||
onSelect(stock)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="hidden min-h-0 flex-1 overflow-auto md:block">
|
||||
<table className="w-full border-collapse text-left text-xs">
|
||||
<caption className="sr-only">知行 B1 命中信号明细</caption>
|
||||
<thead className="sticky top-0 z-10 bg-card text-[11px] text-muted-foreground">
|
||||
<tr className="border-b border-border/70">
|
||||
<th className="h-9 px-3 font-medium">股票</th>
|
||||
<th className="h-9 px-3 font-medium">信号类型</th>
|
||||
<th className="h-9 px-3 text-right font-medium">图形评分</th>
|
||||
<th className="h-9 px-3 text-right font-medium">J 值</th>
|
||||
<th className="h-9 px-3 text-right font-medium">收盘价</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{stocks.length > 0 ? (
|
||||
stocks.map((stock) => {
|
||||
const selected = selectedKey === getStockKey(stock)
|
||||
return (
|
||||
<tr
|
||||
key={getStockKey(stock)}
|
||||
aria-selected={selected}
|
||||
className="cursor-pointer border-b border-border/50 outline-none transition-colors hover:bg-muted/50 focus-visible:bg-muted/60 data-[selected=true]:bg-muted/70"
|
||||
data-selected={selected}
|
||||
onClick={() => onSelect(stock)}
|
||||
onKeyDown={(event) => handleRowKeyDown(event, stock)}
|
||||
tabIndex={0}
|
||||
>
|
||||
<td className="h-11 px-3 align-middle">
|
||||
<p className="font-medium text-foreground">{stock.name}</p>
|
||||
<p className="font-mono text-[10px] text-muted-foreground">
|
||||
{stock.ts_code}
|
||||
</p>
|
||||
</td>
|
||||
<td className="px-3 align-middle">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{stock.signals.map((signal) => (
|
||||
<Badge
|
||||
key={signal.category}
|
||||
className={categoryToneClass(signal.category)}
|
||||
variant="outline"
|
||||
>
|
||||
{getCategoryLabel(signal.category)}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-3 text-right align-middle">
|
||||
<PatternScoreSummary score={stock.score} />
|
||||
</td>
|
||||
<td className="px-3 text-right align-middle font-semibold tabular-nums text-foreground">
|
||||
{getStockJValue(stock)}
|
||||
</td>
|
||||
<td className="px-3 text-right align-middle font-medium tabular-nums text-foreground">
|
||||
¥ {stock.close.toFixed(2)}
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})
|
||||
) : (
|
||||
<tr>
|
||||
<td
|
||||
className="h-32 px-3 text-center text-sm text-muted-foreground"
|
||||
colSpan={5}
|
||||
>
|
||||
没有符合当前筛选条件的信号。
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -143,31 +143,18 @@ describe("SelectionResultsPage", () => {
|
||||
|
||||
expect(screen.getByText("执行完成")).toBeInTheDocument()
|
||||
expect(screen.queryByText("目标股票数")).not.toBeInTheDocument()
|
||||
const table = screen.getByRole("table")
|
||||
expect(table).toBeInTheDocument()
|
||||
expect(
|
||||
within(table).getByRole("columnheader", { name: "信号类型" }),
|
||||
).toBeInTheDocument()
|
||||
expect(
|
||||
within(table).getByRole("columnheader", { name: "J 值" }),
|
||||
).toBeInTheDocument()
|
||||
expect(
|
||||
within(table).getByRole("columnheader", { name: "图形评分" }),
|
||||
).toBeInTheDocument()
|
||||
expect(
|
||||
within(table).queryByRole("columnheader", { name: "关键详情" }),
|
||||
).not.toBeInTheDocument()
|
||||
expect(within(table).getByText("原始 B1")).toBeInTheDocument()
|
||||
expect(within(table).getByText("回踩白线 B")).toBeInTheDocument()
|
||||
expect(within(table).getByText("12")).toBeInTheDocument()
|
||||
expect(within(table).queryByText("13")).not.toBeInTheDocument()
|
||||
expect(within(table).getByText("平安银行")).toBeInTheDocument()
|
||||
expect(within(table).getByText("86.40 分")).toBeInTheDocument()
|
||||
expect(within(table).getByText("华纳药厂")).toBeInTheDocument()
|
||||
|
||||
const mobileRecord = screen.getAllByRole("article")[0]
|
||||
expect(within(mobileRecord).getByText("12")).toBeInTheDocument()
|
||||
expect(within(mobileRecord).queryByText("13")).not.toBeInTheDocument()
|
||||
expect(screen.queryByRole("table")).not.toBeInTheDocument()
|
||||
const record = screen.getByRole("article")
|
||||
expect(within(record).getByText("平安银行")).toBeInTheDocument()
|
||||
expect(within(record).getByText("000001.SZ")).toBeInTheDocument()
|
||||
expect(within(record).getByText("原始 B1")).toBeInTheDocument()
|
||||
expect(within(record).getByText("回踩白线 B")).toBeInTheDocument()
|
||||
expect(within(record).getByText("86.40 分")).toBeInTheDocument()
|
||||
expect(within(record).getByText("12")).toBeInTheDocument()
|
||||
expect(within(record).queryByText("13")).not.toBeInTheDocument()
|
||||
expect(within(record).getByText("¥ 10.50")).toBeInTheDocument()
|
||||
expect(within(record).getByText("华纳药厂")).toBeInTheDocument()
|
||||
expect(screen.getByRole("button", { name: /平安银行/ })).toBeInTheDocument()
|
||||
|
||||
const detailPanel = screen.getByRole("complementary", {
|
||||
name: "当前股票详情",
|
||||
@@ -249,9 +236,9 @@ describe("SelectionResultsPage", () => {
|
||||
render(<SelectionResultsPage />)
|
||||
|
||||
expect(screen.getAllByText(expected).length).toBeGreaterThan(0)
|
||||
const table = screen.getByRole("table")
|
||||
expect(within(table).getByText("原始 B1")).toBeInTheDocument()
|
||||
expect(within(table).getByText("12")).toBeInTheDocument()
|
||||
const record = screen.getByRole("article")
|
||||
expect(within(record).getByText("原始 B1")).toBeInTheDocument()
|
||||
expect(within(record).getByText("12")).toBeInTheDocument()
|
||||
if (score?.status === "below_threshold") {
|
||||
const detailPanel = screen.getByRole("complementary", {
|
||||
name: "当前股票详情",
|
||||
@@ -558,16 +545,27 @@ describe("SelectionResultsPage", () => {
|
||||
fireEvent.change(screen.getByLabelText("搜索命中股票"), {
|
||||
target: { value: "招商" },
|
||||
})
|
||||
const table = screen.getByRole("table")
|
||||
expect(within(table).getByText("招商银行")).toBeInTheDocument()
|
||||
fireEvent.click(within(table).getByText("招商银行"))
|
||||
const extraRecord = screen
|
||||
.getAllByRole("article")
|
||||
.find((article) => within(article).queryByText("招商银行"))
|
||||
expect(extraRecord).toBeTruthy()
|
||||
if (!extraRecord) {
|
||||
throw new Error("expected 招商银行 card to be visible")
|
||||
}
|
||||
const selectButton = within(extraRecord).getByRole("button", {
|
||||
name: /招商银行/,
|
||||
})
|
||||
fireEvent.keyDown(selectButton, { key: "Enter" })
|
||||
expect(
|
||||
within(
|
||||
screen.getByRole("complementary", { name: "当前股票详情" }),
|
||||
).getByText("招商银行"),
|
||||
).toBeInTheDocument()
|
||||
|
||||
const expandButton = screen.getAllByRole("button", { name: "查看详情" })[1]
|
||||
fireEvent.keyDown(selectButton, { key: " " })
|
||||
const expandButton = within(extraRecord).getByRole("button", {
|
||||
name: "查看详情",
|
||||
})
|
||||
fireEvent.click(expandButton)
|
||||
expect(expandButton).toHaveAttribute("aria-expanded", "true")
|
||||
expect(screen.getAllByText("MACD").length).toBeGreaterThan(1)
|
||||
|
||||
Reference in New Issue
Block a user