d8d-admin-mobile-starter-public/client/mobile/pages_xunlian.tsx

import React, { useState } from "react";
import dayjs from "dayjs";
import { useQuery } from "@tanstack/react-query";
import type { XunlianCode } from "../share/types_stock.ts";
import { useNavigate } from "react-router";
import { XunlianCodeAPI } from "./api/xunlian_codes.ts";

export function XunlianPage() {
  const [visibleStocks, setVisibleStocks] = useState<Record<number, boolean>>({});
  const navigate = useNavigate();

  const { data: codes = [], isLoading } = useQuery({
    queryKey: ["xunlian-codes"],
    queryFn: async (): Promise<XunlianCode[]> => {
      const response = await XunlianCodeAPI.getXunlianCodes({});
      return response.data;
    },
  });

  const toggleStockVisibility = (id: number, e: React.MouseEvent) => {
    e.stopPropagation();
    setVisibleStocks((prev: Record<number, boolean>) => ({
      ...prev,
      [id]: !prev[id]
    }));
  };

  const handleCardClick = (code: XunlianCode) => {
    navigate(`/mobile/stock?code=${code.code}`);
  };

  return (
    <div className="p-4">
      <div className="flex justify-between items-center mb-4">
        <h1 className="text-2xl font-bold">训练案例</h1>
      </div>

      <div className="grid gap-4">
        {isLoading ? (
          <div className="text-center text-gray-500 py-8">
            <div className="animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-blue-600 rounded-full" role="status" aria-label="loading">
              <span className="sr-only">加载中...</span>
            </div>
            <div className="mt-2">加载中...</div>
          </div>
        ) : codes.length === 0 ? (
          <div className="text-center text-gray-500 py-8">
            暂无训练案例
          </div>
        ) : (
          codes.map((code: XunlianCode) => (
            <div
              key={code.id}
              className="border rounded-lg p-4 hover:shadow-lg transition-shadow cursor-pointer"
              onClick={() => handleCardClick(code)}
            >
              <div className="flex justify-between items-start">
                <div>
                  <h2 className="text-lg font-semibold flex items-center gap-2">
                    {visibleStocks[code.id] ? (
                      <>
                        {code.stock_name} {code.name} ({code.code})
                        <button
                          onClick={(e) => toggleStockVisibility(code.id, e)}
                          className="text-gray-500 hover:text-gray-700"
                          title="隐藏股票信息"
                        >
                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
                            <path strokeLinecap="round" strokeLinejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                            <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                          </svg>
                        </button>
                      </>
                    ) : (
                      <>
                        {code.name}
                        <button
                          onClick={(e) => toggleStockVisibility(code.id, e)}
                          className="text-gray-400 hover:text-gray-600"
                          title="显示股票信息"
                        >
                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
                            <path strokeLinecap="round" strokeLinejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
                          </svg>
                        </button>
                      </>
                    )}
                  </h2>
                  {code.description && (
                    <p className="text-gray-600 mt-1">{code.description}</p>
                  )}
                </div>
                <div className="text-sm text-gray-500">
                  <div>{dayjs(code.trade_date).format("YYYY-MM-DD")}</div>
                </div>
              </div>
              {code.type && (
                <div className="mt-2">
                  <span className="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">
                    {code.type}
                  </span>
                </div>
              )}
            </div>
          ))
        )}
      </div>
    </div>
  );
}