antd 好像没有状态组件哈？，以前用的acro design有 ，自封

import React from 'react';
import PropTypes from 'prop-types';

const STATUS_COLORS = Object.freeze({
  success: '#52c41a',
  error: '#ff4d4f',
  warning: '#faad14',
  info: '#1890ff',
  default: '#bfbfbf'
});

const StatusTitle = ({
  status = 'success',
  children,
  style,
  dotSize = 8,
  gap = 8,
  fontSize = 14,
  fontWeight = 'normal'
}) => {
  const statusColor = STATUS_COLORS[status] || STATUS_COLORS.default;

  return (
    <div style={{ display: 'flex', alignItems: 'center', ...style }}>
      <span
        style={{
          display: 'inline-block',
          width: dotSize,
          height: dotSize,
          borderRadius: '50%',
          backgroundColor: statusColor,
          marginRight: gap,
          flexShrink: 0
        }}
      />
      <span style={{ fontSize, fontWeight, color: '#333' }}>{children}</span>
    </div>
  );
};

StatusTitle.propTypes = {
  status: PropTypes.oneOf(Object.keys(STATUS_COLORS)),
  children: PropTypes.node.isRequired,
  style: PropTypes.object,
  dotSize: PropTypes.number,
  gap: PropTypes.number,
  fontSize: PropTypes.number,
  fontWeight: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.oneOf(['normal', 'bold', 'bolder', 'lighter'])
  ])
};

StatusTitle.defaultProps = {
  status: 'success',
  style: null,
  dotSize: 8,
  gap: 8,
  fontSize: 14,
  fontWeight: 'normal'
};

export default React.memo(StatusTitle);

常量提取与冻结 将颜色映射提取为顶层常量STATUS_COLORS，并使用Object.freeze防止意外修改。常量命名采用全大写+下划线规范，提升可读性。

解构参数简化 直接在函数参数位置进行解构，省略冗余的const声明，使组件入口更清晰。

样式优化 状态指示点改用span标签并添加flexShrink:0，避免在flex布局中被压缩。内联样式使用简写属性（如fontSize代替fontSize: fontSize）。

类型定义改进 PropTypes直接引用STATUS_COLORS的键值，保持与实现代码同步。将children标记为isRequired避免空状态。

性能优化 使用React.memo包裹导出组件，避免不必要的重新渲染。

组件优势

视觉一致性 预定义的状态颜色遵循Ant Design色彩体系，符合主流UI规范，不同状态间有足够区分度。

布局灵活性 通过gap和dotSize参数可精确控制间距与圆点大小，适应不同布局场景。外层容器采用flex布局确保垂直居中。

类型安全 完整的PropTypes定义配合默认参数，提供良好的开发时类型检查，避免运行时错误。

轻量无依赖 纯函数组件实现，仅依赖React基础API，打包体积小于1KB，适合嵌入任何React技术栈。

可扩展性 通过style参数可覆盖默认样式，支持深度自定义。颜色映射可通过修改STATUS_COLORS常量全局更新。

使用示例

<StatusTitle status="error" fontSize={16}>
  支付失败
</StatusTitle>

<StatusTitle status="success" dotSize={10} gap={12}>
  验证通过
</StatusTitle>