+
+ {!source || failedSource === source ? (
+ + 最接近案例：{matchedCase.name} +
+ + {formatScore(score?.value)} 分 + ++ 案例图片暂不可用。 +
+ ) : ( +
- 低于匹配阈值
-
- )
- }
return (
- 未匹配到 {formatScore(score.threshold)} 分以上案例。 -
-
@@ -74,7 +60,9 @@ export function PatternScoreDetails({ score }: PatternScoreProps) {
最佳案例：{score.case?.name ?? "未知"}
- -
diff --git a/zhixing-web/src/features/selection/components/selection-chart-option.test.ts b/zhixing-web/src/features/selection/components/selection-chart-option.test.ts
new file mode 100644
index 0000000..b869db6
--- /dev/null
+++ b/zhixing-web/src/features/selection/components/selection-chart-option.test.ts
@@ -0,0 +1,77 @@
+import { describe, expect, it } from "vitest"
+
+import type { SelectionChartPoint } from "../api/selection.types"
+import { buildSelectionChartOption } from "./selection-chart-option"
+
+function point(index: number): SelectionChartPoint {
+ return {
+ close: index + 10.5,
+ d: index + 20,
+ high: index + 11,
+ j: index + 30,
+ k: index + 10,
+ low: index + 9,
+ open: index + 10,
+ trade_date: `2026-${String(Math.floor(index / 28) + 1).padStart(2, "0")}-${String((index % 28) + 1).padStart(2, "0")}`,
+ volume: index + 1000,
+ }
+}
+
+describe("selection chart option", () => {
+ it("aligns all three grids and opens on exactly the last 120 points", () => {
+ const points = Array.from({ length: 250 }, (_, index) => point(index))
+ const option = buildSelectionChartOption(points)
+ const dataZoom = option.dataZoom as Array<{
+ endValue: string
+ startValue: string
+ xAxisIndex: number[]
+ }>
+ const series = option.series as Array<{
+ data: unknown[]
+ xAxisIndex: number
+ yAxisIndex: number
+ }>
+
+ expect(dataZoom).toHaveLength(2)
+ expect(dataZoom[0]).toMatchObject({
+ endValue: points[249].trade_date,
+ startValue: points[130].trade_date,
+ xAxisIndex: [0, 1, 2],
+ })
+ expect(dataZoom[1].xAxisIndex).toEqual([0, 1, 2])
+ expect(series[0]).toMatchObject({ xAxisIndex: 0, yAxisIndex: 0 })
+ expect(series[1]).toMatchObject({ xAxisIndex: 1, yAxisIndex: 1 })
+ expect(series.slice(2)).toEqual(
+ expect.arrayContaining([
+ expect.objectContaining({ xAxisIndex: 2, yAxisIndex: 2 }),
+ ]),
+ )
+ expect(series[0].data[0]).toEqual([10, 10.5, 9, 11])
+ })
+
+ it("keeps missing candles and indicator values empty", () => {
+ const incomplete = {
+ ...point(0),
+ close: null,
+ d: null,
+ high: null,
+ j: null,
+ k: null,
+ volume: null,
+ }
+ const option = buildSelectionChartOption([incomplete])
+ const series = option.series as Array<{
+ connectNulls?: boolean
+ data: unknown[]
+ }>
+ const candle = series[0].data[0] as number[]
+
+ expect(candle).toHaveLength(4)
+ expect(candle.every(Number.isNaN)).toBe(true)
+ expect(series[1].data[0]).toMatchObject({ value: null })
+ for (const indicator of series.slice(2)) {
+ expect(indicator.connectNulls).toBe(false)
+ expect(indicator.data).toEqual([null])
+ }
+ })
+})
diff --git a/zhixing-web/src/features/selection/components/selection-chart-option.ts b/zhixing-web/src/features/selection/components/selection-chart-option.ts
new file mode 100644
index 0000000..daf8f81
--- /dev/null
+++ b/zhixing-web/src/features/selection/components/selection-chart-option.ts
@@ -0,0 +1,182 @@
+import type {
+ BarSeriesOption,
+ CandlestickSeriesOption,
+ LineSeriesOption,
+} from "echarts/charts"
+import type {
+ DataZoomComponentOption,
+ GridComponentOption,
+ LegendComponentOption,
+ TitleComponentOption,
+ TooltipComponentOption,
+} from "echarts/components"
+import type { ComposeOption } from "echarts/core"
+
+import type { SelectionChartPoint } from "../api/selection.types"
+
+const DEFAULT_VISIBLE_POINTS = 120
+
+export type SelectionChartOption = ComposeOption<
+ | BarSeriesOption
+ | CandlestickSeriesOption
+ | DataZoomComponentOption
+ | GridComponentOption
+ | LegendComponentOption
+ | LineSeriesOption
+ | TitleComponentOption
+ | TooltipComponentOption
+>
+
+/**
+ * Build the three-grid financial chart configuration from aligned API points.
+ *
+ * @param points Ascending qfq OHLCV and KDJ points from the selection API.
+ * @returns One ECharts option with synchronized axes and an exact 120-point window.
+ */
+export function buildSelectionChartOption(
+ points: SelectionChartPoint[],
+): SelectionChartOption {
+ const dates = points.map((point) => point.trade_date)
+ const startIndex = Math.max(0, dates.length - DEFAULT_VISIBLE_POINTS)
+ const startValue = dates[startIndex]
+ const endValue = dates.at(-1)
+ const zoomRange = { endValue, startValue }
+
+ return {
+ animation: false,
+ dataZoom: [
+ {
+ ...zoomRange,
+ type: "inside",
+ xAxisIndex: [0, 1, 2],
+ },
+ {
+ ...zoomRange,
+ bottom: 4,
+ height: 20,
+ type: "slider",
+ xAxisIndex: [0, 1, 2],
+ },
+ ],
+ grid: [
+ { bottom: "46%", left: 64, right: 24, top: 36 },
+ { bottom: "28%", height: "14%", left: 64, right: 24 },
+ { bottom: 48, height: "20%", left: 64, right: 24 },
+ ],
+ legend: {
+ data: ["K", "D", "J"],
+ right: 20,
+ top: "73%",
+ },
+ series: [
+ {
+ data: points.map(toCandlestickValue),
+ itemStyle: {
+ borderColor: "#dc2626",
+ borderColor0: "#16a34a",
+ color: "#dc2626",
+ color0: "#16a34a",
+ },
+ name: "日线",
+ type: "candlestick",
+ xAxisIndex: 0,
+ yAxisIndex: 0,
+ },
+ {
+ data: points.map((point) => ({
+ itemStyle: {
+ color:
+ point.open !== null &&
+ point.close !== null &&
+ point.close >= point.open
+ ? "#dc2626"
+ : "#16a34a",
+ },
+ value: point.volume,
+ })),
+ name: "成交量",
+ type: "bar",
+ xAxisIndex: 1,
+ yAxisIndex: 1,
+ },
+ ...(["k", "d", "j"] as const).map((key, index): LineSeriesOption => ({
+ connectNulls: false,
+ data: points.map((point) => point[key]),
+ name: key.toUpperCase(),
+ showSymbol: false,
+ smooth: false,
+ type: "line",
+ xAxisIndex: 2,
+ yAxisIndex: 2,
+ lineStyle: {
+ color: ["#2563eb", "#d97706", "#9333ea"][index],
+ width: 1.5,
+ },
+ })),
+ ],
+ title: [
+ { left: 12, text: "日线", textStyle: { fontSize: 12 }, top: 8 },
+ { left: 72, text: "成交量", textStyle: { fontSize: 12 }, top: "54%" },
+ { left: 72, text: "KDJ", textStyle: { fontSize: 12 }, top: "72%" },
+ ],
+ tooltip: {
+ axisPointer: { type: "cross" },
+ trigger: "axis",
+ },
+ xAxis: [
+ buildCategoryAxis(dates, 0, false),
+ buildCategoryAxis(dates, 1, false),
+ buildCategoryAxis(dates, 2, true),
+ ],
+ yAxis: [
+ buildValueAxis(0),
+ buildValueAxis(1),
+ buildValueAxis(2, { max: 120, min: -20 }),
+ ],
+ }
+}
+
+function toCandlestickValue(point: SelectionChartPoint) {
+ if (
+ point.open === null ||
+ point.close === null ||
+ point.low === null ||
+ point.high === null
+ ) {
+ return [Number.NaN, Number.NaN, Number.NaN, Number.NaN]
+ }
+ return [point.open, point.close, point.low, point.high]
+}
+
+function buildCategoryAxis(
+ dates: string[],
+ gridIndex: number,
+ showLabels: boolean,
+) {
+ return {
+ axisLabel: { show: showLabels },
+ axisLine: { onZero: false },
+ boundaryGap: false,
+ data: dates,
+ gridIndex,
+ min: "dataMin",
+ max: "dataMax",
+ scale: true,
+ splitLine: { show: false },
+ type: "category" as const,
+ }
+}
+
+function buildValueAxis(
+ gridIndex: number,
+ bounds: { max?: number; min?: number } = {},
+) {
+ return {
+ ...bounds,
+ axisLabel: { fontSize: 10 },
+ gridIndex,
+ scale: true,
+ splitLine: { lineStyle: { opacity: 0.16 } },
+ type: "value" as const,
+ }
+}
diff --git a/zhixing-web/src/features/selection/components/selection-chart.test.tsx b/zhixing-web/src/features/selection/components/selection-chart.test.tsx
new file mode 100644
index 0000000..2559af4
--- /dev/null
+++ b/zhixing-web/src/features/selection/components/selection-chart.test.tsx
@@ -0,0 +1,110 @@
+import { render, screen } from "@testing-library/react"
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+
+import type { SelectionChart as SelectionChartData } from "../api/selection.types"
+
+const chartMocks = vi.hoisted(() => ({
+ disconnect: vi.fn(),
+ dispose: vi.fn(),
+ init: vi.fn(),
+ observe: vi.fn(),
+ resize: vi.fn(),
+ setOption: vi.fn(),
+ use: vi.fn(),
+}))
+
+vi.mock("echarts/charts", () => ({
+ BarChart: {},
+ CandlestickChart: {},
+ LineChart: {},
+}))
+vi.mock("echarts/components", () => ({
+ AxisPointerComponent: {},
+ DataZoomComponent: {},
+ GridComponent: {},
+ LegendComponent: {},
+ TitleComponent: {},
+ TooltipComponent: {},
+}))
+vi.mock("echarts/core", () => ({
+ init: chartMocks.init,
+ use: chartMocks.use,
+}))
+vi.mock("echarts/renderers", () => ({ CanvasRenderer: {} }))
+
+import { SelectionChart } from "./selection-chart"
+
+const chart: SelectionChartData = {
+ name: "药明康德",
+ points: [
+ {
+ close: 10.5,
+ d: 48,
+ high: 11,
+ j: 60,
+ k: 52,
+ low: 9,
+ open: 10,
+ trade_date: "2026-08-08",
+ volume: 1000,
+ },
+ ],
+ source_adj: "qfq",
+ target_trade_date: "2026-08-08",
+ ts_code: "603259.SH",
+}
+
+describe("SelectionChart", () => {
+ beforeEach(() => {
+ chartMocks.init.mockReturnValue({
+ dispose: chartMocks.dispose,
+ resize: chartMocks.resize,
+ setOption: chartMocks.setOption,
+ })
+ vi.stubGlobal(
+ "ResizeObserver",
+ class {
+ constructor(private readonly callback: ResizeObserverCallback) {}
+
+ disconnect() {
+ chartMocks.disconnect()
+ }
+
+ observe() {
+ chartMocks.observe()
+ this.callback([], this as unknown as ResizeObserver)
+ }
+ },
+ )
+ })
+
+ afterEach(() => {
+ vi.unstubAllGlobals()
+ vi.clearAllMocks()
+ })
+
+ it("initializes, resizes, updates and disposes one chart instance", () => {
+ const view = render(
+
+ import("./selection-chart").then((module) => ({
+ default: module.SelectionChart,
+ })),
+)
interface SignalDetailPanelProps {
stock: SelectionStockResult | undefined
}
export function SignalDetailPanel({ stock }: SignalDetailPanelProps) {
+ const chartQuery = useSelectionChart(stock?.ts_code, stock?.target_trade_date)
+
if (!stock) {
return (
+ 正在加载图表组件…
+ }
+ >
+
+ ) : (
+
+
+
vi.fn())
const useSelectionResults = vi.fn()
+const useSelectionChart = vi.fn()
const useSelectionRun = vi.fn()
const useTriggerSelectionRun = vi.fn()
const mutate = vi.fn()
@@ -23,6 +24,7 @@ const reset = vi.fn()
vi.mock("@/features/selection/api/selection.query", () => ({
useSelectionResults: (...args: unknown[]) => useSelectionResults(...args),
+ useSelectionChart: (...args: unknown[]) => useSelectionChart(...args),
useSelectionRun: (...args: unknown[]) => useSelectionRun(...args),
useTriggerSelectionRun: () => useTriggerSelectionRun(),
}))
@@ -110,6 +112,11 @@ const selectedResult: SelectionResults = {
describe("SelectionResultsPage", () => {
beforeEach(() => {
+ useSelectionChart.mockReturnValue({
+ data: undefined,
+ isError: false,
+ isPending: false,
+ })
useSelectionResults.mockReturnValue({
data: selectedResult,
isError: false,
@@ -167,12 +174,23 @@ describe("SelectionResultsPage", () => {
})
expect(within(detailPanel).getByText("关键指标")).toBeInTheDocument()
expect(within(detailPanel).getByText("图形相似度评分")).toBeInTheDocument()
+ expect(
+ within(detailPanel).getByText("暂无可用行情数据。"),
+ ).toBeInTheDocument()
expect(
within(detailPanel).getByText("最佳案例：华纳药厂"),
).toBeInTheDocument()
expect(within(detailPanel).getByText("价格形态")).toBeInTheDocument()
expect(within(detailPanel).getAllByText("J 值")).toHaveLength(2)
expect(within(detailPanel).getByText("RSI")).toBeInTheDocument()
+ const caseImages = within(detailPanel).getAllByRole("img", {
+ name: "华纳药厂 B1 参考案例图",
+ })
+ expect(caseImages).toHaveLength(1)
+ expect(caseImages[0]).toHaveAttribute(
+ "src",
+ "/patterns/b1-cases/case_001_688799_华纳药厂_2025-05-12.jpg",
+ )
})
it.each<{
@@ -184,14 +202,23 @@ describe("SelectionResultsPage", () => {
score: null,
},
{
- expected: "未匹配到 60.00 分以上案例。",
+ expected: "低于匹配阈值",
score: {
- breakdown: null,
- case: null,
- reason: "未匹配到评分阈值以上案例",
+ breakdown: {
+ kdj_state: 42,
+ price_shape: 44,
+ trend_structure: 40,
+ volume_pattern: 43,
+ },
+ case: {
+ breakout_date: "2025-07-23",
+ id: "case_004",
+ name: "方正科技",
+ },
+ reason: null,
status: "below_threshold",
threshold: 60,
- value: null,
+ value: 42.5,
version: "zhixing_b1_pattern_fastdtw_v1",
},
},
@@ -225,9 +252,51 @@ describe("SelectionResultsPage", () => {
const table = screen.getByRole("table")
expect(within(table).getByText("原始 B1")).toBeInTheDocument()
expect(within(table).getByText("12")).toBeInTheDocument()
+ if (score?.status === "below_threshold") {
+ const detailPanel = screen.getByRole("complementary", {
+ name: "当前股票详情",
+ })
+ const images = within(detailPanel).getAllByRole("img", {
+ name: "方正科技 B1 参考案例图",
+ })
+ expect(images).toHaveLength(1)
+ expect(images[0]).toHaveAttribute(
+ "src",
+ "/patterns/b1-cases/case_004_600601_方正科技_2025-07-23.jpg",
+ )
+ expect(within(detailPanel).getAllByText("42.50 分")).toHaveLength(2)
+ } else {
+ const detailPanel = screen.getByRole("complementary", {
+ name: "当前股票详情",
+ })
+ expect(within(detailPanel).queryByRole("img")).not.toBeInTheDocument()
+ }
},
)
+ it("shows chart loading and error states for the selected stock", () => {
+ useSelectionChart.mockReturnValue({
+ data: undefined,
+ isError: false,
+ isPending: true,
+ })
+ const view = render(
+ 技术图表 +
+ {chartQuery.isPending ? ( +正在加载行情图表…
+ ) : chartQuery.isError ? ( +行情图表暂时不可用。
+ ) : chartQuery.data?.points.length ? ( +暂无可用行情数据。
+ )} +