vf_react/src/views/Community/components/HeroPanel/components/ZTStatsCards.js

// 涨停统计卡片组件
// 显示连板分布、封板时间、公告驱动统计

import React from "react";

/**
 * 获取连板颜色
 */
const getContinuousColor = (key) => {
  if (key === "4连板+") return "#ff4d4f";
  if (key === "3连板") return "#fa541c";
  if (key === "2连板") return "#fa8c16";
  return "#52c41a";
};

/**
 * 获取时间颜色
 */
const getTimeColor = (key) => {
  if (key === "秒板") return "#ff4d4f";
  if (key === "早盘") return "#fa8c16";
  if (key === "盘中") return "#52c41a";
  return "#888";
};

/**
 * 统计卡片基础样式
 */
const cardStyle = {
  flex: 1,
  minWidth: "200px",
  padding: "12px",
  background: "rgba(255,255,255,0.03)",
  borderRadius: "12px",
  border: "1px solid rgba(255,255,255,0.08)",
};

/**
 * 涨停统计卡片组件
 * @param {Object} props
 * @param {Object} props.stats - 统计数据
 * @param {Object} props.stats.continuousStats - 连板分布
 * @param {Object} props.stats.timeStats - 时间分布
 * @param {number} props.stats.announcementCount - 公告驱动数
 * @param {number} props.stats.announcementRatio - 公告驱动占比
 */
const ZTStatsCards = ({ stats }) => {
  if (!stats) {
    return null;
  }

  return (
    <div style={{ display: "flex", gap: "16px", flexWrap: "wrap" }}>
      {/* 连板分布 */}
      <div style={cardStyle}>
        <span
          style={{
            fontSize: "12px",
            color: "rgba(255,255,255,0.5)",
            display: "block",
            marginBottom: "8px",
          }}
        >
          连板分布
        </span>
        <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
          {Object.entries(stats.continuousStats).map(([key, value]) => (
            <div
              key={key}
              style={{
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
              }}
            >
              <span
                style={{
                  fontSize: "18px",
                  fontWeight: "bold",
                  color: getContinuousColor(key),
                }}
              >
                {value}
              </span>
              <span
                style={{ fontSize: "10px", color: "rgba(255,255,255,0.5)" }}
              >
                {key}
              </span>
            </div>
          ))}
        </div>
      </div>

      {/* 涨停时间分布 */}
      <div style={cardStyle}>
        <span
          style={{
            fontSize: "12px",
            color: "rgba(255,255,255,0.5)",
            display: "block",
            marginBottom: "8px",
          }}
        >
          封板时间
        </span>
        <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
          {Object.entries(stats.timeStats).map(([key, value]) => (
            <div
              key={key}
              style={{
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
              }}
            >
              <span
                style={{
                  fontSize: "18px",
                  fontWeight: "bold",
                  color: getTimeColor(key),
                }}
              >
                {value}
              </span>
              <span
                style={{ fontSize: "10px", color: "rgba(255,255,255,0.5)" }}
              >
                {key}
              </span>
            </div>
          ))}
        </div>
      </div>

      {/* 公告驱动 */}
      <div
        style={{
          padding: "12px",
          background: "rgba(255,255,255,0.03)",
          borderRadius: "12px",
          border: "1px solid rgba(255,255,255,0.08)",
          minWidth: "120px",
        }}
      >
        <span
          style={{
            fontSize: "12px",
            color: "rgba(255,255,255,0.5)",
            display: "block",
            marginBottom: "8px",
          }}
        >
          公告驱动
        </span>
        <div style={{ display: "flex", gap: "8px", alignItems: "baseline" }}>
          <span
            style={{ fontSize: "20px", fontWeight: "bold", color: "#A855F7" }}
          >
            {stats.announcementCount}
          </span>
          <span style={{ fontSize: "12px", color: "rgba(255,255,255,0.5)" }}>
            只 ({stats.announcementRatio}%)
          </span>
        </div>
      </div>
    </div>
  );
};

export default ZTStatsCards;