content_vector_recall/src/pages/RecallTestPage.tsx

import { useCallback, useEffect, useRef, useState } from 'react'
import {
  Tabs,
  Card,
  Input,
  InputNumber,
  Select,
  Button,
  Space,
  message,
  Empty,
  Typography,
  Row,
  Col,
  Tag,
  Tooltip,
} from 'antd'
import {
  PlayCircleOutlined,
  FileTextOutlined,
  PictureOutlined,
  ReadOutlined,
  SearchOutlined,
  ApartmentOutlined,
  BulbOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons'
import RecallResultList from '../components/RecallResultList'
import VideoPlayer from '../components/VideoPlayer'
import DeconstructTree from '../components/DeconstructTree'
import AIUnderstandingPanel from '../components/AIUnderstandingPanel'
import { toHttps } from '../utils/url'
import {
  getAiUnderstanding,
  getDeconstructPoints,
  getVideoDetail,
  matchByText,
} from '../api/recall'
import {
  ALL_CONFIG_CODE,
  buildGroupedConfigOptions,
  getConfigDisplayLabel,
  listAllConfigCodes,
  useConfigCodes,
} from '../api/configCodes'
import type {
  AIUnderstandingVO,
  DeconstructPointsVO,
  RecallResultVO,
  VideoBasicVO,
  VideoMatchEnrichedVO,
} from '../api/types'

const { TextArea } = Input
const { Text, Title } = Typography

/** 从 URL ?videoId=xxx 读取并校验,无效返回 null */
function readUrlVideoId(): number | null {
  const raw = new URLSearchParams(window.location.search).get('videoId')
  if (!raw) return null
  const n = Number(raw)
  return Number.isFinite(n) && n > 0 ? n : null
}

/** 从 URL ?queryText=xxx 读取,空值返 null */
function readUrlQueryText(): string | null {
  const raw = new URLSearchParams(window.location.search).get('queryText')
  if (!raw) return null
  const trimmed = raw.trim()
  return trimmed.length > 0 ? trimmed : null
}

/** 从 URL ?configCode=xxx 读取,后端字典动态加载,这里只做形态校验(非空+大写) */
function readUrlConfigCode(): string | null {
  const raw = new URLSearchParams(window.location.search).get('configCode')
  if (!raw) return null
  const upper = raw.trim().toUpperCase()
  return upper.length > 0 ? upper : null
}

/**
 * Tab1 "全部维度召回" — configCode → 该维度可发起的召回文本数组
 *
 * VIDEO_TITLE: 视频原标题 (detail.title)
 * VIDEO_TOPIC: 解构 topic 字段 (单条)
 * VIDEO_INSPIRATION / VIDEO_KEYPOINT / VIDEO_PURPOSE: 解构 highValuePoints 按 type 过滤后的 name 列表 (多条)
 * RESULT_LOG_TOPIC/THEME/KEYWORDS/NARRATION: AI 内容理解 4 个字段 (AI 数据未就绪时返回空, 自动跳过)
 * 其他: 暂无映射, 跳过
 */
function textsForConfigCode(
  code: string,
  detail: VideoBasicVO | null,
  points: DeconstructPointsVO | null,
  ai: AIUnderstandingVO | null,
): string[] {
  const single = (s: string | null | undefined) => {
    const t = s?.trim()
    return t ? [t] : []
  }
  if (code === 'VIDEO_TITLE') return single(detail?.title)
  if (code === 'VIDEO_TOPIC') return single(points?.topic)
  if (code === 'VIDEO_INSPIRATION' || code === 'VIDEO_KEYPOINT' || code === 'VIDEO_PURPOSE') {
    const target =
      code === 'VIDEO_INSPIRATION' ? '灵感点' : code === 'VIDEO_KEYPOINT' ? '关键点' : '目的点'
    return (points?.highValuePoints ?? [])
      .filter((p) => p.type === target)
      .map((p) => p.name?.trim())
      .filter((n): n is string => !!n)
  }
  if (code === 'RESULT_LOG_TOPIC') return single(ai?.contentTopic)
  if (code === 'RESULT_LOG_THEME') return single(ai?.videoTheme)
  if (code === 'RESULT_LOG_KEYWORDS') return single(ai?.videoKeywords)
  if (code === 'RESULT_LOG_NARRATION') return single(ai?.videoNarration)
  return []
}

/** 从召回结果里剔除指定视频ID, 同时刷新 modality 计数 */
function filterOutSelf(data: RecallResultVO, excludeId: number | null): RecallResultVO {
  if (!excludeId) return data
  const items = data.items.filter((x) => x.id !== excludeId)
  return {
    items,
    videoCount: items.filter((x) => x.modality === 'VIDEO').length,
    materialCount: items.filter((x) => x.modality === 'MATERIAL').length,
    articleCount: items.filter((x) => x.modality === 'ARTICLE').length,
    total: items.length,
  }
}

export default function RecallTestPage() {
  // URL 上有 queryText → 默认进入 Tab2 (优先级高于 videoId,与 Grafana 跳转用例一致)
  // 用 defaultActiveKey 而非受控 activeKey,保留用户后续手动切 Tab 的自由
  const initialTabKey = readUrlQueryText() ? 'text' : 'video'
  return (
    <Tabs
      className="recall-main-tabs"
      defaultActiveKey={initialTabKey}
      size="large"
      items={[
        {
          key: 'video',
          label: (
            <span>
              <PlayCircleOutlined /> 视频相似度召回
            </span>
          ),
          children: <VideoIdTab />,
        },
        {
          key: 'text',
          label: (
            <span>
              <FileTextOutlined /> 自定义文本相似度召回
            </span>
          ),
          children: <TextRecallTab />,
        },
        {
          key: 'material',
          label: (
            <span>
              <PictureOutlined /> 素材解构 <Tag color="default" style={{ marginLeft: 4 }}>开发中</Tag>
            </span>
          ),
          disabled: true,
          children: null,
        },
        {
          key: 'article',
          label: (
            <span>
              <ReadOutlined /> 长文相似度召回 <Tag color="default" style={{ marginLeft: 4 }}>开发中</Tag>
            </span>
          ),
          disabled: true,
          children: null,
        },
      ]}
    />
  )
}

// ============================================================================
// Tab1: 票圈视频ID — 三栏并列布局(视频详情 / AI理解 / 解构层级 都是召回维度)
// ============================================================================
/** 进入页面默认查询的视频ID, 避免空白态 */
const DEFAULT_VIDEO_ID = 64632804

function VideoIdTab() {
  /** URL 上 ?videoId=xxx 优先于默认 ID;有则首次查询后自动按选题召回 */
  const urlVideoId = readUrlVideoId()
  const [videoId, setVideoId] = useState<number | null>(urlVideoId ?? DEFAULT_VIDEO_ID)
  const pendingAutoRecallRef = useRef(urlVideoId !== null)
  const [detail, setDetail] = useState<VideoBasicVO | null>(null)
  const [ai, setAi] = useState<AIUnderstandingVO | null>(null)
  const [points, setPoints] = useState<DeconstructPointsVO | null>(null)
  const [loadingMain, setLoadingMain] = useState(false)
  const [queried, setQueried] = useState(false)
  const configCodes = useConfigCodes()

  /** 视频Tab 不再有顶部维度选择, 维度由解构层级里每条点的"以此召回"按钮直接传入 */
  const [topN, setTopN] = useState<number>(10)

  const [recall, setRecall] = useState<RecallResultVO | null>(null)
  const [loadingRecall, setLoadingRecall] = useState(false)
  /** 召回标题: 拆成"维度Tag(高亮)" + "文本描述" */
  const [recallMeta, setRecallMeta] = useState<{
    dimensionLabel: string
    dimensionCode: string
    description: string
  } | null>(null)

  const runQuery = useCallback(async (id: number) => {
    setLoadingMain(true)
    setQueried(true)
    setRecall(null)
    try {
      const [d, a, p] = await Promise.all([
        getVideoDetail(id).catch(() => null),
        getAiUnderstanding(id).catch(() => null),
        getDeconstructPoints(id).catch(() => null),
      ])
      setDetail(d)
      setAi(a)
      setPoints(p)
      if (!d) message.warning('未查询到视频详情')
    } finally {
      setLoadingMain(false)
    }
  }, [])

  const onQuery = () => {
    if (!videoId || videoId <= 0) {
      message.warning('请输入有效的视频ID')
      return
    }
    runQuery(videoId)
  }

  /** 进入页面自动用默认ID查一次, 避免空白态 */
  const autoQueriedRef = useRef(false)
  useEffect(() => {
    if (autoQueriedRef.current) return
    autoQueriedRef.current = true
    if (videoId && videoId > 0) {
      runQuery(videoId)
    }
  }, [runQuery, videoId])

  /**
   * 召回请求代际计数 — 每次发起召回自增, 只有最新一代回包才更新 state
   * 防止"先点全部维度(并发 N 个), 再点单节点召回, 全部那批晚到的回包覆盖单节点结果"
   */
  const submitGenRef = useRef(0)

  const onRecallByText = useCallback(
    async (text: string, configCodeOverride?: string) => {
      const trimmed = text.trim()
      if (!trimmed) return
      const finalConfigCode = configCodeOverride || 'VIDEO_TOPIC'
      const myGen = ++submitGenRef.current
      const isStale = () => myGen !== submitGenRef.current
      setLoadingRecall(true)
      const preview = trimmed.length > 24 ? trimmed.slice(0, 24) + '…' : trimmed
      const codeLabel = getConfigDisplayLabel(finalConfigCode, configCodes)
      setRecallMeta({
        dimensionLabel: codeLabel,
        dimensionCode: finalConfigCode,
        description: `基于文本 "${preview}"`,
      })
      try {
        const data = await matchByText({ queryText: trimmed, configCode: finalConfigCode, topN })
        if (isStale()) return
        setRecall(filterOutSelf(data, videoId))
        message.success(`召回 ${data.total} 条`)
      } catch {
        if (!isStale()) message.error('召回失败')
      } finally {
        if (!isStale()) setLoadingRecall(false)
      }
    },
    [topN, videoId, configCodes],
  )

  /**
   * 全部维度召回 — 遍历后端字典里的每个 configCode, 各自从解构/AI 字段取文本,
   * Promise.allSettled 并发, 合并后按 (modality, id, configCode) 去重保留最高 score
   */
  const onRecallAllDims = useCallback(async () => {
    const allCodes = listAllConfigCodes(configCodes)
    if (allCodes.length === 0) {
      message.warning('维度字典尚未加载完成, 请稍后再试')
      return
    }
    const calls: { configCode: string; text: string }[] = []
    for (const code of allCodes) {
      for (const text of textsForConfigCode(code, detail, points, ai)) {
        calls.push({ configCode: code, text })
      }
    }
    if (calls.length === 0) {
      message.warning('当前视频无可用解构内容, 无法发起全部维度召回')
      return
    }
    const myGen = ++submitGenRef.current
    const isStale = () => myGen !== submitGenRef.current
    setLoadingRecall(true)
    setRecallMeta({
      dimensionLabel: `全部(${allCodes.length} 个维度)`,
      dimensionCode: ALL_CONFIG_CODE,
      description: `基于视频解构所有可用节点, 共 ${calls.length} 次召回`,
    })
    try {
      const settled = await Promise.allSettled(
        calls.map((c) => matchByText({ queryText: c.text, configCode: c.configCode, topN })),
      )
      if (isStale()) return
      // 合并 + 去重 (modality, id, configCode) 保留最高 score
      const dedup = new Map<string, VideoMatchEnrichedVO>()
      let failedCount = 0
      settled.forEach((s) => {
        if (s.status === 'fulfilled') {
          for (const it of s.value.items) {
            const key = `${it.modality}-${it.id}-${it.configCode ?? ''}`
            const prev = dedup.get(key)
            if (!prev || (it.score ?? -Infinity) > (prev.score ?? -Infinity)) {
              dedup.set(key, it)
            }
          }
        } else {
          failedCount++
        }
      })
      const items = Array.from(dedup.values()).sort(
        (a, b) => (b.score ?? -Infinity) - (a.score ?? -Infinity),
      )
      const merged: RecallResultVO = {
        items,
        videoCount: items.filter((x) => x.modality === 'VIDEO').length,
        materialCount: items.filter((x) => x.modality === 'MATERIAL').length,
        articleCount: items.filter((x) => x.modality === 'ARTICLE').length,
        total: items.length,
      }
      setRecall(filterOutSelf(merged, videoId))
      if (failedCount > 0) {
        message.warning(
          `${failedCount}/${calls.length} 次召回失败, 已展示其余结果, 共 ${merged.total} 条`,
        )
      } else {
        message.success(`全部维度召回完成, 共 ${merged.total} 条`)
      }
    } catch {
      if (!isStale()) message.error('召回失败')
    } finally {
      if (!isStale()) setLoadingRecall(false)
    }
  }, [detail, points, ai, configCodes, topN, videoId])

  /** URL 传入 videoId 时, 首次查询结束后自动按"选题"维度召回 (0 点击) */
  useEffect(() => {
    if (!pendingAutoRecallRef.current) return
    if (!autoQueriedRef.current) return
    if (loadingMain) return
    pendingAutoRecallRef.current = false
    if (points?.topic && points.topic.trim()) {
      onRecallByText(points.topic, 'VIDEO_TOPIC')
    }
  }, [loadingMain, points, onRecallByText])

  return (
    <Space direction="vertical" size={16} style={{ width: '100%' }}>
      {/* 查询条 */}
      <Card size="small" bodyStyle={{ padding: '12px 16px' }}>
        <Space wrap size={[12, 8]}>
          <Text strong>视频ID</Text>
          <InputNumber
            placeholder="请输入"
            min={1}
            value={videoId}
            onChange={(v) => setVideoId(v)}
            style={{ width: 200 }}
            onPressEnter={onQuery}
            controls={false}
          />
          <Button type="primary" icon={<SearchOutlined />} loading={loadingMain} onClick={onQuery}>
            查询
          </Button>
          <span style={{ color: '#d9d9d9' }}>|</span>
          <Text strong>TopN</Text>
          <InputNumber min={1} max={20} value={topN} onChange={(v) => setTopN(v ?? 10)} style={{ width: 80 }} />
          <Tooltip title="遍历所有维度, 各自从解构/AI 取文本, 合并去重">
            <Button
              type="primary"
              icon={<SearchOutlined />}
              loading={loadingRecall}
              disabled={loadingMain || !points}
              onClick={onRecallAllDims}
            >
              全部维度召回
            </Button>
          </Tooltip>
          <Text type="secondary" style={{ fontSize: 12 }}>
            或在下方解构层级点单条"以此召回"
          </Text>
        </Space>
      </Card>

      {queried && (
        <>
          {/* 三栏并列(顺序: 选题解构 / AI识别(老) / 视频详情) */}
          <Row gutter={[16, 16]}>
            {/* 选题解构 (放第一位) */}
            <Col xs={24} md={8}>
              <Card
                size="small"
                title={
                  <Space size={8}>
                    <ApartmentOutlined style={{ color: '#52c41a', fontSize: 18 }} />
                    <span style={{ fontSize: 17, fontWeight: 700 }}>选题解构</span>
                    <Tag color="green-inverse" style={{ marginLeft: 4 }}>召回维度</Tag>
                  </Space>
                }
                loading={loadingMain}
                style={{ height: '100%' }}
                bodyStyle={{ maxHeight: 560, overflowY: 'auto' }}
              >
                <DeconstructTree data={points} loading={loadingMain} onRecallByText={onRecallByText} />
              </Card>
            </Col>

            {/* 视频内容理解 - 放第二位 */}
            <Col xs={24} md={8}>
              <Card
                size="small"
                title={
                  <Space size={8}>
                    <BulbOutlined style={{ color: '#fa8c16', fontSize: 18 }} />
                    <span style={{ fontSize: 17, fontWeight: 700 }}>视频内容理解</span>
                    <Tag color="orange-inverse" style={{ marginLeft: 4 }}>召回维度</Tag>
                  </Space>
                }
                loading={loadingMain}
                style={{ height: '100%' }}
              >
                <AIUnderstandingPanel data={ai} loading={loadingMain} />
              </Card>
            </Col>

            {/* 视频详情 + 播放器 - 放第三位 */}
            <Col xs={24} md={8}>
              <Card
                size="small"
                title={
                  <Space size={8}>
                    <VideoCameraOutlined style={{ color: '#1677ff', fontSize: 18 }} />
                    <span style={{ fontSize: 17, fontWeight: 700 }}>视频详情</span>
                  </Space>
                }
                loading={loadingMain}
                style={{ height: '100%' }}
              >
                {detail ? (
                  <Space direction="vertical" size={10} style={{ width: '100%' }}>
                    <DetailRow label="ID" value={String(detail.videoId)} />
                    <DetailRow label="标题" value={detail.title ?? '-'} />
                    <DetailRow
                      label="播放量"
                      value={
                        <Text type={detail.playCount === '--' ? 'secondary' : undefined}>
                          {detail.playCount}
                        </Text>
                      }
                      hint={detail.playCount === '--' ? '字段缺失,占位' : undefined}
                    />
                    <div style={{ marginTop: 4 }}>
                      {detail.videoUrl ? (
                        <VideoPlayer src={toHttps(detail.videoUrl)} poster={toHttps(detail.cover) || undefined} />
                      ) : (
                        <Empty description="无视频地址" image={Empty.PRESENTED_IMAGE_SIMPLE} />
                      )}
                    </div>
                  </Space>
                ) : (
                  <Empty description="未查询到视频" image={Empty.PRESENTED_IMAGE_SIMPLE} />
                )}
              </Card>
            </Col>
          </Row>

          {/* 召回结果 */}
          <Card
            size="small"
            title={<RecallTitle meta={recallMeta} />}
          >
            <RecallResultList result={recall} loading={loadingRecall} />
          </Card>
        </>
      )}
    </Space>
  )
}

function DetailRow({
  label,
  value,
  hint,
}: {
  label: string
  value: React.ReactNode
  hint?: string
}) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
      <Text type="secondary" style={{ minWidth: 56, fontSize: 12 }}>
        {label}
      </Text>
      <div style={{ flex: 1, minWidth: 0, fontSize: 13 }}>
        {value}
        {hint && (
          <Text type="secondary" style={{ marginLeft: 6, fontSize: 11 }}>
            ({hint})
          </Text>
        )}
      </div>
    </div>
  )
}

/** 召回结果卡片标题: "召回维度：[中文标签]" + 描述 */
function RecallTitle({
  meta,
}: {
  meta: { dimensionLabel: string; dimensionCode: string; description: string } | null
}) {
  if (!meta) {
    return (
      <Space size={6}>
        <SearchOutlined style={{ color: '#722ed1' }} />
        <span>召回结果</span>
      </Space>
    )
  }
  // 按 configCode 前缀走两套配色
  const palette = meta.dimensionCode.startsWith('RESULT_LOG_')
    ? { bg: '#fff7e6', border: '#ffd591', text: '#d46b08' }
    : meta.dimensionCode === 'VIDEO_TOPIC'
      ? { bg: '#f9f0ff', border: '#d3adf7', text: '#531dab' }
      : meta.dimensionCode === 'VIDEO_INSPIRATION'
        ? { bg: '#e6f4ff', border: '#91caff', text: '#0958d9' }
        : { bg: '#f6ffed', border: '#b7eb8f', text: '#389e0d' }

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
      <SearchOutlined style={{ color: '#722ed1', fontSize: 16 }} />
      <span style={{ fontSize: 14, color: 'rgba(0,0,0,0.65)' }}>召回维度：</span>
      <span
        style={{
          background: palette.bg,
          border: `1px solid ${palette.border}`,
          color: palette.text,
          fontSize: 16,
          fontWeight: 700,
          padding: '4px 12px',
          borderRadius: 6,
          letterSpacing: 0.5,
        }}
      >
        {meta.dimensionLabel}
      </span>
      <span style={{ color: 'rgba(0,0,0,0.65)', fontSize: 13 }}>· {meta.description}</span>
    </div>
  )
}

// ============================================================================
// Tab2: 文本输入 → 文本召回
// ============================================================================
function TextRecallTab() {
  /** URL ?queryText=xxx&configCode=yyy 落地参数,缺省走原有空白态 */
  const urlQueryText = readUrlQueryText()
  const urlConfigCode = readUrlConfigCode()

  const [queryText, setQueryText] = useState(urlQueryText ?? '')
  /** 默认 "全部"; URL 上有 configCode 时优先走 URL 指定 */
  const [configCode, setConfigCode] = useState(urlConfigCode ?? ALL_CONFIG_CODE)
  const [topN, setTopN] = useState<number>(10)
  const [result, setResult] = useState<RecallResultVO | null>(null)
  const [loading, setLoading] = useState(false)
  const configCodes = useConfigCodes()
  const groupedOptions = buildGroupedConfigOptions(configCodes)
  /** 召回结果标题展示的维度 meta — 锁定提交瞬间的值, 避免提交后改下拉影响展示 */
  const [resultMeta, setResultMeta] = useState<{
    dimensionLabel: string
    dimensionCode: string
    description: string
  } | null>(null)

  /**
   * 召回请求代际计数 — 每次 onSubmit 自增, 异步返回时只有最新代的回包才更新 state
   * 防止"先点全部(并发 N 个), 再切单维度点召回, 全部那批晚到的回包覆盖单维度结果"
   */
  const submitGenRef = useRef(0)

  const onSubmit = useCallback(async () => {
    const trimmed = queryText.trim()
    if (!trimmed) {
      message.warning('请输入查询文本')
      return
    }
    const myGen = ++submitGenRef.current
    const isStale = () => myGen !== submitGenRef.current
    setLoading(true)
    const preview = trimmed.length > 24 ? trimmed.slice(0, 24) + '…' : trimmed

    if (configCode === ALL_CONFIG_CODE) {
      // 并发调所有维度, allSettled 等齐再展示
      const allCodes = listAllConfigCodes(configCodes)
      if (allCodes.length === 0) {
        message.warning('维度字典尚未加载完成, 请稍后再试')
        setLoading(false)
        return
      }
      setResultMeta({
        dimensionLabel: `全部(${allCodes.length} 个维度)`,
        dimensionCode: ALL_CONFIG_CODE,
        description: `基于文本 "${preview}"`,
      })
      try {
        const settled = await Promise.allSettled(
          allCodes.map((code) => matchByText({ queryText: trimmed, configCode: code, topN })),
        )
        if (isStale()) return  // 已被新一轮 submit 抢占
        const failedDims: string[] = []
        const merged: RecallResultVO = {
          items: [],
          videoCount: 0,
          materialCount: 0,
          articleCount: 0,
          total: 0,
        }
        settled.forEach((s, i) => {
          if (s.status === 'fulfilled') {
            merged.items.push(...s.value.items)
          } else {
            failedDims.push(getConfigDisplayLabel(allCodes[i], configCodes))
          }
        })
        // 按 score 倒序; null/undefined 视为 -Infinity
        merged.items.sort((a, b) => (b.score ?? -Infinity) - (a.score ?? -Infinity))
        merged.videoCount = merged.items.filter((x) => x.modality === 'VIDEO').length
        merged.materialCount = merged.items.filter((x) => x.modality === 'MATERIAL').length
        merged.articleCount = merged.items.filter((x) => x.modality === 'ARTICLE').length
        merged.total = merged.items.length
        setResult(merged)
        if (failedDims.length > 0) {
          message.warning(`部分维度召回失败: ${failedDims.join(', ')} — 已展示其余维度结果`)
        } else {
          message.success(`全部维度召回完成, 共 ${merged.total} 条`)
        }
      } catch {
        if (!isStale()) message.error('召回失败')
      } finally {
        if (!isStale()) setLoading(false)
      }
      return
    }

    // 单维度, 原有逻辑
    setResultMeta({
      dimensionLabel: getConfigDisplayLabel(configCode, configCodes),
      dimensionCode: configCode,
      description: `基于文本 "${preview}"`,
    })
    try {
      const data = await matchByText({ queryText: trimmed, configCode, topN })
      if (isStale()) return
      setResult(data)
      message.success(`召回 ${data.total} 条`)
    } catch {
      if (!isStale()) message.error('召回失败')
    } finally {
      if (!isStale()) setLoading(false)
    }
  }, [queryText, configCode, topN, configCodes])

  /** URL 上有 queryText 时, 挂载后自动触发一次召回 (Grafana 跳转 0 点击) */
  const autoSearchedRef = useRef(false)
  useEffect(() => {
    if (autoSearchedRef.current) return
    if (!urlQueryText) return
    autoSearchedRef.current = true
    onSubmit()
  }, [urlQueryText, onSubmit])

  return (
    <Space direction="vertical" size={16} style={{ width: '100%' }}>
      <Card size="small" bodyStyle={{ padding: 16 }}>
        <Space direction="vertical" size={12} style={{ width: '100%' }}>
          <TextArea
            placeholder="请输入查询文本(选题、灵感点描述等)"
            value={queryText}
            onChange={(e) => setQueryText(e.target.value)}
            rows={4}
            allowClear
          />
          <Space wrap>
            <Text strong>召回维度</Text>
            <Select value={configCode} onChange={setConfigCode} options={groupedOptions} style={{ width: 240 }} />
            <Text strong>TopN</Text>
            <InputNumber min={1} max={20} value={topN} onChange={(v) => setTopN(v ?? 10)} style={{ width: 80 }} />
            <Button type="primary" icon={<SearchOutlined />} loading={loading} onClick={onSubmit}>
              召回
            </Button>
          </Space>
        </Space>
      </Card>

      <Card size="small" title={<RecallTitle meta={resultMeta} />}>
        <RecallResultList result={result} loading={loading} />
      </Card>
    </Space>
  )
}