worldquant-alpha-system/frontend/src/pages/AlphaPage.tsx

import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import {
  Banner,
  Button,
  Checkbox,
  CheckboxGroup,
  Empty,
  Input,
  Modal,
  Popover,
  Pagination,
  Select,
  Table,
  Tabs,
  Tag,
  TextArea,
  Toast,
} from "@douyinfe/semi-ui-19";
import type { ColumnProps } from "@douyinfe/semi-ui-19/lib/es/table/interface";
import {
  api,
  correlationLabels,
  formatNumber,
  formatTime,
  patch,
  post,
  queryString,
  stateLabels,
  stateOptions,
} from "../api";
import type {
  Account,
  Alpha,
  AlphaPage as Page,
  Facets,
  Submission,
} from "../types";
import { AlphaDetail } from "../components/AlphaDetail";
import { AlphaSyncDialog } from "../components/AlphaSyncDialog";
import type { PageContext, AlphaUIAction as UIAction } from "../ai/types";
import type { UIAction as WorkspaceAction } from "../ai/types";
import { SavedViews } from "../research/SavedViews";
import { sourceLabel } from "../research/SourceDetails";

const metricLabels = {
  sharpe: "Sharpe",
  fitness: "Fitness",
  returns: "Returns",
  turnover: "Turnover",
  margin: "Margin",
  drawdown: "Drawdown",
};
const initialColumns = [
  "name",
  "expression",
  "region",
  "status",
  "sharpe",
  "fitness",
  "turnover",
  "correlation",
  "research",
  "source",
];
const columnLabels: Record<string, string> = {
  source: "研究来源",
  name: "Alpha",
  expression: "表达式",
  region: "地区 / Universe",
  status: "平台状态",
  sharpe: "Sharpe",
  fitness: "Fitness",
  returns: "Returns",
  turnover: "Turnover",
  margin: "Margin",
  drawdown: "Drawdown",
  research: "研究状态",
  tags: "本地标签",
  language: "语言",
  created: "创建时间",
  submitted: "提交时间",
  correlation: "本地自相关",
};

export function AlphaPage({
  account,
  taskPanelOpen,
  version,
  onTask,
  onAccount,
  active,
  overlaySuspended,
  chatOffset,
  onContext,
  action,
  onOverlay,
  onAction,
}: {
  account: Account | null;
  taskPanelOpen: boolean;
  version: string;
  onTask: () => void;
  onAccount: () => void;
  active: boolean;
  overlaySuspended: boolean;
  chatOffset: number;
  onContext: (context: PageContext) => void;
  action: UIAction | null;
  onOverlay: () => void;
  onAction: (action: WorkspaceAction) => void;
}) {
  const [data, setData] = useState<Page>({
    items: [],
    total: 0,
    limit: 25,
    offset: 0,
  });
  const [facets, setFacets] = useState<Facets>({});
  const [draft, setDraft] = useState<Record<string, string>>({});
  const [filters, setFilters] = useState<Record<string, string>>({});
  const [submission, setSubmission] = useState<Submission>("UNSUBMITTED");
  const [syncingScope, setSyncingScope] = useState<Submission | null>(null);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(25);
  const [sort, setSort] = useState("date_created");
  const [direction, setDirection] = useState("desc");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [selected, setSelected] = useState<string[]>([]);
  const [visibleColumns, setVisibleColumns] = useState<string[]>(() => {
    try {
      const stored: unknown = JSON.parse(
        localStorage.getItem("alpha-columns") || "null",
      );
      return Array.isArray(stored)
        ? [
            ...new Set([
              "name",
              ...stored.filter(
                (v): v is string => typeof v === "string" && v in columnLabels,
              ),
            ]),
          ]
        : initialColumns;
    } catch {
      return initialColumns;
    }
  });
  const [detailId, setDetailId] = useState<string | null>(null);
  const [importing, setImporting] = useState(false);
  const [idText, setIdText] = useState("");
  const [busy, setBusy] = useState("");
  const [bulkOpen, setBulkOpen] = useState(false);
  const [bulkVersions, setBulkVersions] = useState<Record<string, number>>({});
  const actionNonce = useRef(0);
  const [bulk, setBulk] = useState({
    add_tags: "",
    remove_tags: "",
    state: "",
  });
  const [localVersion, setLocalVersion] = useState(0);
  const tablePanel = useRef<HTMLElement>(null);
  const [compact, setCompact] = useState(
    () => matchMedia("(max-width: 760px)").matches,
  );
  useEffect(() => {
    const media = matchMedia("(max-width: 760px)");
    const change = () => setCompact(media.matches);
    media.addEventListener("change", change);
    return () => media.removeEventListener("change", change);
  }, []);
  useEffect(() => {
    if (account) {
      setPageSize(account.page_size);
      setPage(1);
    }
  }, [account?.page_size]);
  const params = useMemo(
    () => ({
      ...filters,
      submission,
      sort,
      direction,
      limit: pageSize,
      offset: (page - 1) * pageSize,
    }),
    [filters, submission, sort, direction, pageSize, page],
  );
  const query = queryString(params);
  useEffect(() => {
    if (!active) return;
    onContext({
      page: "alphas",
      alpha_id: detailId,
      selected_ids: selected,
      filters: Object.fromEntries(
        Object.entries(params).filter(
          ([, value]) => value !== "" && value !== undefined && value !== null,
        ),
      ),
    });
  }, [active, detailId, selected, params, onContext]);
  useEffect(() => {
    if (!action || actionNonce.current === action.nonce) return;
    actionNonce.current = action.nonce;
    if (action.type === "open_alpha") {
      setDetailId(action.alpha_id);
      onOverlay();
    } else {
      const {
        sort: nextSort,
        direction: nextDirection,
        limit: _limit,
        offset: _offset,
        submission: nextSubmission,
        ...values
      } = action.filters;
      const next = Object.fromEntries(
        Object.entries(values)
          .filter(([, v]) => v !== null && v !== undefined)
          .map(([k, v]) => [k, String(v)]),
      );
      setDraft(next);
      setFilters(next);
      setPage(1);
      setSelected([]);
      if (nextSubmission === "SUBMITTED" || nextSubmission === "UNSUBMITTED")
        setSubmission(nextSubmission);
      if (nextSort) setSort(String(nextSort));
      if (nextDirection) setDirection(String(nextDirection));
    }
  }, [action, onOverlay]);
  const refresh = useCallback(() => setLocalVersion((n) => n + 1), []);
  useEffect(() => {
    if (!active) return;
    const controller = new AbortController();
    setLoading(true);
    setError("");
    Promise.all([
      api<Page>(`/alphas?${query}`, { signal: controller.signal }),
      api<Facets>("/alphas/facets", { signal: controller.signal }),
    ])
      .then(([results, nextFacets]) => {
        if (!controller.signal.aborted) {
          setData(results);
          setFacets(nextFacets);
        }
      })
      .catch((e) => {
        if (!controller.signal.aborted) setError(e.message);
      })
      .finally(() => {
        if (!controller.signal.aborted) setLoading(false);
      });
    return () => controller.abort();
  }, [active, query, version, localVersion]);
  useEffect(() => {
    setSelected([]);
    tablePanel.current?.querySelector(".semi-table-body")?.scrollTo({ top: 0 });
  }, [query]);
  function updateDraft(key: string, value: unknown) {
    setDraft((previous) => ({
      ...previous,
      [key]: value === undefined || value === null ? "" : String(value),
    }));
  }
  function applyFilters() {
    setFilters({ ...draft });
    setPage(1);
  }
  function clearFilters() {
    setDraft({});
    setFilters({});
    setPage(1);
  }
  function changeSubmission(value: string) {
    setSubmission(value as Submission);
    setDraft({});
    setFilters({});
    setPage(1);
    setSelected([]);
    setSort(value === "SUBMITTED" ? "date_submitted" : "date_created");
  }
  async function newTask(kind: string, ids: string[] = []) {
    setBusy(kind);
    try {
      await post("/sync-jobs", {
        kind,
        alpha_ids: ids,
        ...(kind === "full_sync" ? { submission: "SUBMITTED" } : {}),
      });
      setImporting(false);
      setIdText("");
      onTask();
    } catch (e) {
      Toast.error((e as Error).message);
    } finally {
      setBusy("");
    }
  }
  async function bulkSave() {
    setBusy("bulk");
    const split = (value: string) =>
      value
        .split(/[,，]/)
        .map((t) => t.trim())
        .filter(Boolean);
    try {
      await patch("/alphas/research/bulk", {
        alpha_ids: Object.keys(bulkVersions),
        versions: bulkVersions,
        add_tags: split(bulk.add_tags),
        remove_tags: split(bulk.remove_tags),
        state: bulk.state || null,
      });
      setBulkOpen(false);
      setBulk({ add_tags: "", remove_tags: "", state: "" });
      refresh();
      Toast.success("批量研究记录已更新");
    } catch (e) {
      Toast.error((e as Error).message);
    } finally {
      setBusy("");
    }
  }
  const columnDefinitions: ColumnProps<Alpha>[] = [
    {
      key: "name",
      title: "Alpha",
      dataIndex: "name",
      fixed: "left",
      width: 190,
      render: (_, row) => (
        <button
          className="alpha-link"
          title={`${row!.id} · ${row!.alpha_type ?? ""}`}
          onClick={() => {
            setDetailId(row!.id);
            onOverlay();
          }}
        >
          <span>
            {row!.research.favorite && <Tag size="small">收藏</Tag>}
            {row!.name || row!.id}
          </span>
        </button>
      ),
    },
    {
      key: "expression",
      title: "表达式",
      width: 260,
      render: (_, row) => (
        <code className="expression-cell" title={row!.expression_preview}>
          {row!.expression_preview || "—"}
        </code>
      ),
    },
    {
      key: "source",
      title: "研究来源",
      width: 150,
      render: (_, row) =>
        row!.source_kinds?.map(sourceLabel).join("、") || "暂无本地来源",
    },
    {
      key: "region",
      title: "地区 / Universe",
      width: 155,
      render: (_, row) => (
        <div className="stacked-cell">
          <span>{row!.region ?? "—"}</span>
          <span className="muted"> / {row!.universe ?? "—"}</span>
        </div>
      ),
    },
    {
      key: "status",
      title: "平台状态",
      width: 150,
      render: (_, row) => (
        <div className="stacked-cell">
          <span>{row!.status ?? "未提供"}</span>
          <span className="muted">
            {" "}
            · {row!.stage ?? "—"}
            {row!.hidden ? " · 隐藏" : ""}
          </span>
        </div>
      ),
    },
    ...Object.entries(metricLabels).map(
      ([key, title]): ColumnProps<Alpha> => ({
        key,
        title,
        width: 112,
        align: "right",
        render: (_, row) => (
          <span className="numeric">
            {formatNumber(row![key as keyof Alpha], key === "margin" ? 6 : 3)}
          </span>
        ),
      }),
    ),
    {
      key: "research",
      fixed: "right",
      title: "研究状态",
      width: 115,
      render: (_, row) => (
        <Tag
          color={
            row!.research.state === "candidate"
              ? "green"
              : row!.research.state === "optimizing"
                ? "blue"
                : "grey"
          }
        >
          {stateLabels[row!.research.state]}
        </Tag>
      ),
    },
    {
      key: "tags",
      title: "本地标签",
      width: 180,
      render: (_, row) => (
        <div className="inline-tags">
          {row!.research.tags.map((t) => (
            <Tag key={t}>{t}</Tag>
          ))}
        </div>
      ),
    },
    { key: "language", title: "语言", width: 125, dataIndex: "language" },
    {
      key: "correlation",
      title: "本地自相关",
      width: 160,
      render: (_, row) => {
        const value = row!.local_correlation;
        return value ? (
          <span
            title={`计算于 ${formatTime(value.calculated_at, account?.timezone)}`}
          >
            {value.stale ? "待重算" : correlationLabels[value.status]}
            {value.max_correlation !== null &&
              ` · ${formatNumber(value.max_correlation, 3)}`}
          </span>
        ) : (
          <span className="muted">未检测</span>
        );
      },
    },
    {
      key: "submitted",
      title: "提交时间",
      width: 165,
      render: (_, row) => formatTime(row!.date_submitted, account?.timezone),
    },
    {
      key: "created",
      title: "创建时间",
      width: 165,
      render: (_, row) => formatTime(row!.date_created, account?.timezone),
    },
  ];
  const columns = columnDefinitions
    .filter((column) => visibleColumns.includes(String(column.key)))
    .map((column) => (compact ? { ...column, fixed: undefined } : column));
  const activeFilterCount = Object.values(filters).filter(Boolean).length;
  const options = (key: string) =>
    (Array.isArray(facets[key]) ? (facets[key] as string[]) : []).map(
      (value) => ({ value, label: value }),
    );
  const connected =
    account?.connection_status === "connected" ||
    account?.connection_status === "expired";
  return (
    <>
      {!connected && (
        <Banner
          type="info"
          description={
            <span>
              连接 WorldQuant 后即可同步平台数据。
              <button className="text-link" onClick={onAccount}>
                前往个人信息
              </button>
            </span>
          }
        />
      )}
      {error && <Banner type="danger" description={error} />}
      <section className="library-panel" ref={tablePanel}>
        <div className="alpha-tabs-header">
          <Tabs
            className="alpha-submission-tabs"
            activeKey={submission}
            onChange={changeSubmission}
            tabList={[
              { itemKey: "UNSUBMITTED", tab: "待提交" },
              { itemKey: "SUBMITTED", tab: "已提交" },
            ]}
          />
          <span className="alpha-last-sync">
            最近数据更新{" "}
            <span>
              {formatTime(
                typeof facets.last_sync === "string" ? facets.last_sync : null,
                account?.timezone,
              )}
            </span>
          </span>
        </div>
        <SavedViews
          filters={{ ...filters, submission, sort, direction, limit: pageSize }}
          columns={visibleColumns}
          onRestore={(view) => {
            const {
              submission: savedSubmission,
              sort: savedSort,
              direction: savedDirection,
              limit,
              offset: _offset,
              ...rest
            } = view.filters;
            const values = Object.fromEntries(
              Object.entries(rest)
                .filter(([, v]) => v !== null && v !== undefined)
                .map(([k, v]) => [k, String(v)]),
            );
            setFilters(values);
            setDraft(values);
            setPage(1);
            setSelected([]);
            if (
              savedSubmission === "SUBMITTED" ||
              savedSubmission === "UNSUBMITTED"
            )
              setSubmission(savedSubmission);
            setSort(String(savedSort || "date_created"));
            setDirection(String(savedDirection || "desc"));
            if (typeof limit === "number") setPageSize(limit);
            const next = [
              ...new Set([
                "name",
                ...view.columns.filter((c) => c in columnLabels),
              ]),
            ];
            setVisibleColumns(next);
            localStorage.setItem("alpha-columns", JSON.stringify(next));
          }}
        />
        <form
          className="filter-panel"
          onSubmit={(e) => {
            e.preventDefault();
            applyFilters();
          }}
        >
          <div className="primary-filters">
            <Input
              aria-label="搜索 Alpha"
              placeholder="搜索 ID、名称或表达式"
              value={draft.q ?? ""}
              onChange={(v) => updateDraft("q", v)}
              showClear
            />
            <Select
              aria-label="地区"
              placeholder="全部地区"
              showClear
              value={draft.region || undefined}
              optionList={options("region")}
              onChange={(v) => updateDraft("region", v)}
            />
            <Select
              aria-label="平台状态"
              placeholder="全部平台状态"
              showClear
              value={draft.status || undefined}
              optionList={options("status")}
              onChange={(v) => updateDraft("status", v)}
            />
            <Select
              aria-label="研究状态筛选"
              placeholder="全部研究状态"
              showClear
              value={draft.research_state || undefined}
              optionList={stateOptions}
              onChange={(v) => updateDraft("research_state", v)}
            />
            <Button htmlType="submit" theme="solid">
              查询
            </Button>
            <Button type="tertiary" theme="borderless" onClick={clearFilters}>
              重置
            </Button>
          </div>
          <details className="advanced-filters">
            <summary>
              更多筛选{" "}
              {activeFilterCount ? `· ${activeFilterCount} 项已应用` : ""}
            </summary>
            <div className="advanced-grid">
              <label>
                研究来源
                <Select
                  aria-label="研究来源筛选"
                  showClear
                  value={draft.source || undefined}
                  optionList={options("source").map((option) => ({
                    ...option,
                    label: sourceLabel(option.value),
                  }))}
                  placeholder="全部来源"
                  onChange={(v) => updateDraft("source", v)}
                />
              </label>
              <label>
                研究编号
                <Input
                  aria-label="研究编号筛选"
                  value={draft.research_id || ""}
                  onChange={(v) => updateDraft("research_id", v)}
                />
              </label>
              {[
                ["universe", "Universe"],
                ["alpha_type", "Alpha 类型"],
                ["language", "语言"],
                ["stage", "IS / OS"],
              ].map(([key, label]) => (
                <label key={key}>
                  {label}
                  <Select
                    showClear
                    aria-label={label}
                    value={draft[key] || undefined}
                    optionList={options(key)}
                    placeholder="全部"
                    onChange={(v) => updateDraft(key, v)}
                  />
                </label>
              ))}
              <label>
                平台隐藏状态
                <Select
                  showClear
                  value={draft.hidden || undefined}
                  optionList={[
                    { value: "false", label: "可见" },
                    { value: "true", label: "隐藏" },
                  ]}
                  placeholder="全部"
                  onChange={(v) => updateDraft("hidden", v)}
                />
              </label>
              <label>
                本地标签
                <Select
                  showClear
                  filter
                  value={draft.tag || undefined}
                  optionList={options("tags")}
                  placeholder="全部标签"
                  onChange={(v) => updateDraft("tag", v)}
                />
              </label>
              <label>
                创建时间起（UTC）
                <Input
                  type="date"
                  value={draft.created_from?.slice(0, 10) || ""}
                  onChange={(v) =>
                    updateDraft("created_from", v ? `${v}T00:00:00Z` : "")
                  }
                />
              </label>
              <label>
                创建时间止（UTC）
                <Input
                  type="date"
                  value={draft.created_to?.slice(0, 10) || ""}
                  onChange={(v) =>
                    updateDraft("created_to", v ? `${v}T23:59:59.999999Z` : "")
                  }
                />
              </label>
              {Object.entries(metricLabels).map(([key, label]) => (
                <label key={key}>
                  {label}
                  <div className="range-inputs">
                    <Input
                      type="number"
                      aria-label={`${label} 最小值`}
                      placeholder="最小值"
                      value={draft[`${key}_min`] || ""}
                      onChange={(v) => updateDraft(`${key}_min`, v)}
                    />
                    <span>—</span>
                    <Input
                      type="number"
                      aria-label={`${label} 最大值`}
                      placeholder="最大值"
                      value={draft[`${key}_max`] || ""}
                      onChange={(v) => updateDraft(`${key}_max`, v)}
                    />
                  </div>
                </label>
              ))}
              <Checkbox
                checked={draft.favorite === "true"}
                onChange={(e) =>
                  updateDraft("favorite", e.target.checked ? "true" : "")
                }
              >
                只看收藏
              </Checkbox>
            </div>
            <p className="muted">
              数值筛选使用平台原始值，例如 Turnover 0.15 表示 15%。
            </p>
          </details>
        </form>
        <div className="table-toolbar">
          <div>
            <strong>
              {submission === "UNSUBMITTED" ? "待提交" : "已提交"} Alpha
            </strong>
            <span className="count-pill">{data.total.toLocaleString()}</span>
            {selected.length > 0 && (
              <span className="selection-text">
                已选择 {selected.length} 条
              </span>
            )}
          </div>
          <div className="inline-actions">
            {selected.length > 0 && (
              <>
                <Button
                  type="tertiary"
                  size="small"
                  loading={busy === "self_correlation"}
                  onClick={() => void newTask("self_correlation", selected)}
                >
                  检测自相关
                </Button>
                <Button
                  type="tertiary"
                  size="small"
                  onClick={() => {
                    setBulkVersions(
                      Object.fromEntries(
                        data.items
                          .filter((row) => selected.includes(row.id))
                          .map((row) => [row.id, row.research.version]),
                      ),
                    );
                    setBulkOpen(true);
                    onOverlay();
                  }}
                >
                  批量编辑
                </Button>
                <Button
                  type="tertiary"
                  size="small"
                  disabled={!connected}
                  loading={busy === "alpha_refresh"}
                  onClick={() => void newTask("alpha_refresh", selected)}
                >
                  刷新选中
                </Button>
              </>
            )}
            <Select
              aria-label="排序字段"
              size="small"
              value={sort}
              optionList={[
                { value: "date_created", label: "创建时间" },
                { value: "date_submitted", label: "提交时间" },
                { value: "synced_at", label: "同步时间" },
                ...Object.entries(metricLabels).map(([value, label]) => ({
                  value,
                  label,
                })),
                { value: "name", label: "名称" },
              ]}
              onChange={(v) => {
                setSort(String(v));
                setPage(1);
              }}
            />
            <Select
              aria-label="排序方向"
              size="small"
              value={direction}
              optionList={[
                { value: "desc", label: "降序" },
                { value: "asc", label: "升序" },
              ]}
              onChange={(v) => {
                setDirection(String(v));
                setPage(1);
              }}
            />
            <a href={`/api/v1/alphas/export?${query}`}>
              <Button type="tertiary" size="small">
                导出
              </Button>
            </a>
            <Button
              size="small"
              type="tertiary"
              onClick={() => setImporting(true)}
            >
              导入 Alpha ID
            </Button>
            <Button
              size="small"
              theme="solid"
              disabled={!connected}
              onClick={() => {
                setSyncingScope(submission);
                onOverlay();
              }}
            >
              按天同步
            </Button>
            {submission === "SUBMITTED" && (
              <Button
                size="small"
                loading={busy === "full_sync"}
                disabled={!connected}
                onClick={() => void newTask("full_sync")}
              >
                全量同步已提交
              </Button>
            )}
            <Popover
              trigger="click"
              position="bottomRight"
              content={
                <div className="columns-picker">
                  <strong>显示列</strong>
                  <CheckboxGroup
                    direction="vertical"
                    value={visibleColumns}
                    options={Object.entries(columnLabels).map(
                      ([value, label]) => ({
                        value,
                        label,
                        disabled: value === "name",
                      }),
                    )}
                    onChange={(values) => {
                      const next = values.map(String);
                      setVisibleColumns(next);
                      localStorage.setItem(
                        "alpha-columns",
                        JSON.stringify(next),
                      );
                    }}
                  />
                </div>
              }
            >
              <Button type="tertiary" aria-label="显示列设置" size="small">
                列设置
              </Button>
            </Popover>
          </div>
        </div>
        <Table<Alpha>
          columns={columns}
          dataSource={data.items}
          rowKey="id"
          loading={loading}
          className="alpha-table"
          size="small"
          scroll={{
            y: "100%",
            x: columns.reduce((sum, c) => sum + Number(c.width || 120), 0) + 60,
          }}
          rowSelection={{
            selectedRowKeys: selected,
            onChange: (keys) => setSelected((keys ?? []).map(String)),
            fixed: !compact,
          }}
          pagination={false}
          empty={
            <Empty
              className="alpha-empty"
              title={
                activeFilterCount
                  ? "没有符合条件的 Alpha"
                  : "从第一个 Alpha 开始"
              }
              description={
                activeFilterCount
                  ? "调整筛选条件，探索更多信号。"
                  : "连接 WorldQuant 并同步数据，或通过 Alpha ID 导入已有研究。"
              }
            />
          }
        />
        <footer className="table-pagination" aria-label="Alpha 分页">
          <span className="muted">共 {data.total.toLocaleString()} 条</span>
          <Pagination
            size={compact ? "small" : "default"}
            currentPage={page}
            pageSize={pageSize}
            total={data.total}
            showSizeChanger
            pageSizeOpts={[25, 50, 100]}
            preventPageChangeOnPageSizeChange
            onPageChange={setPage}
            onPageSizeChange={(size) => {
              setPageSize(size);
              setPage(1);
            }}
          />
        </footer>
      </section>
      <Modal
        title="导入 Alpha ID"
        visible={importing && !overlaySuspended}
        onCancel={() => setImporting(false)}
        confirmLoading={busy === "alpha_refresh"}
        okText="开始导入"
        onOk={() => {
          const ids = [...new Set(idText.split(/[\s,，]+/).filter(Boolean))];
          if (!ids.length || ids.length > 100) {
            Toast.warning("每次请输入 1–100 个 Alpha ID");
            return;
          }
          void newTask("alpha_refresh", ids);
        }}
      >
        <p>
          读取指定 Alpha 的平台详情。每次最多 100 个，使用空格、逗号或换行分隔。
        </p>
        <TextArea
          aria-label="Alpha IDs"
          value={idText}
          onChange={setIdText}
          rows={6}
          placeholder="例如：aB12cD34"
        />
      </Modal>
      <Modal
        title={`批量编辑 ${Object.keys(bulkVersions).length} 条研究记录`}
        visible={bulkOpen && !overlaySuspended}
        onCancel={() => setBulkOpen(false)}
        confirmLoading={busy === "bulk"}
        onOk={() => void bulkSave()}
        okText="保存修改"
      >
        <label>
          添加标签
          <Input
            aria-label="批量添加标签"
            placeholder="用逗号分隔"
            value={bulk.add_tags}
            onChange={(add_tags) => setBulk({ ...bulk, add_tags })}
          />
        </label>
        <label>
          移除标签
          <Input
            aria-label="批量移除标签"
            value={bulk.remove_tags}
            onChange={(remove_tags) => setBulk({ ...bulk, remove_tags })}
          />
        </label>
        <label>
          研究状态
          <Select
            showClear
            placeholder="保持现有状态"
            value={bulk.state || undefined}
            optionList={stateOptions}
            onChange={(state) =>
              setBulk({ ...bulk, state: state ? String(state) : "" })
            }
          />
        </label>
      </Modal>
      {syncingScope && (
        <AlphaSyncDialog
          submission={syncingScope}
          suspended={overlaySuspended}
          onClose={() => setSyncingScope(null)}
          onTask={onTask}
        />
      )}
      <AlphaDetail
        onAction={onAction}
        suspended={overlaySuspended}
        chatOffset={chatOffset}
        taskPanelOpen={taskPanelOpen}
        id={detailId}
        version={`${version}:${localVersion}`}
        timezone={account?.timezone}
        onClose={() => setDetailId(null)}
        onSaved={refresh}
        onTask={onTask}
      />
    </>
  );
}