/**
 * FestureList
 *
 * Props:
 * - type: string，在左上角显示的小标签
 * - features: Array<string | { title: string, tag?: string, tag_color?: '红'|'黄'|'蓝'|'red'|'yellow'|'blue' }>
 *   - 如果为字符串，等价于 { title: str }
 *   - tag_color 支持中英文同义词，背景为浅色，文字为深色
 *
 * 布局：按顺序从左到右，一行最多 4 列，超过换行。
 */
export default function FeatureList({ type, features = [] }) {
  const [hoveredIndex, setHoveredIndex] = React.useState(null);
  const typeTextColor = 'var(--docuo-text-color)';
  const openLinkInNewTab = (url) => {
    if (!url) return;
    try {
      const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
      if (newWindow) {
        newWindow.opener = null;
      }
    } catch (error) {
      // 忽略
    }
  };
  // 响应式：移动端显示为一列
  const [isMobile, setIsMobile] = React.useState(false);
  React.useEffect(() => {
    const checkIsMobile = () => {
      try {
        setIsMobile(window.innerWidth <= 768);
      } catch (e) {
        setIsMobile(false);
      }
    };
    checkIsMobile();
    window.addEventListener('resize', checkIsMobile);
    return () => window.removeEventListener('resize', checkIsMobile);
  }, []);
  const colorThemeMap = {
    red: {
      backgroundColor: '#ffecef', // 文档站风格：实色浅底
      color: '#c81e42',
    },
    yellow: {
      backgroundColor: '#fff6e5',
      color: '#a16207',
    },
    blue: {
      backgroundColor: '#eef3ff',
      color: 'var(--docuo-color-primary-hover)',
    },
  };

  const normalizeColorKey = (color) => {
    if (!color) return 'blue';
    const value = String(color).toLowerCase();
    if (value.includes('红') || value === 'red') return 'red';
    if (value.includes('黄') || value === 'yellow') return 'yellow';
    return 'blue';
  };

  const normalizedFeatures = Array.isArray(features)
    ? features.map((item) => {
        if (typeof item === 'string') {
          return { title: item };
        }
        const { title, tag, tag_color, link } = item || {};
        // 如果未显式指定颜色，按常见标记词推断
        let inferredColor = tag_color;
        if (!inferredColor && typeof tag === 'string') {
          const t = tag.toLowerCase();
          if (t.includes('hot')) inferredColor = 'red';
          if (t.includes('new')) inferredColor = 'blue';
        }
        return {
          title: title || '',
          tag: tag || undefined,
          tag_color: normalizeColorKey(inferredColor),
          link: link || undefined,
        };
      })
    : [];

  const containerStyle = {
    position: 'relative',
    padding: '16px 24px 16px',
    borderRadius: 4,
    border: '1px solid var(--docuo-page-context-menu-border)',
    background: "var(--docuo-page-context-menu-bg)",
  };

  const typeBadgeWrapperStyle = {
    position: 'absolute',
    top: -10,
    left: 0,
    height: 20,
    display: 'inline-flex',
    alignItems: 'center',
    borderRadius: '4px 0 0 0', // 左上与容器一致，左下直角
    overflow: 'hidden',
    whiteSpace: 'nowrap',
  };

  const typeBadgeInnerStyle = {
    padding: '0 12px 0 8px',
    height: '100%',
    display: 'inline-flex',
    alignItems: 'center',
    fontSize: 12,
    lineHeight: '18px',
    background: 'var(--docuo-step-line-color)',
    color: typeTextColor,
    clipPath: 'polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%)',
  };

  const gridStyle = React.useMemo(() => ({
    display: 'grid',
    gridTemplateColumns: isMobile ? 'repeat(1, minmax(0, 1fr))' : 'repeat(4, minmax(0, 1fr))',
    columnGap: isMobile ? 0 : 24,
    rowGap: 12,
  }), [isMobile]);

  const itemStyle = {
    minHeight: 28,
    display: 'flex',
    alignItems: 'center',
    gap: 6,
    color: '#0f172a',
    fontSize: 14,
    lineHeight: '20px',
  };

  const bulletStyle = {
    width: 5,
    height: 5,
    borderRadius: '50%',
    background: 'var(--docuo-text-color)',
    flex: '0 0 auto',
  };

  const tagBaseStyle = {
    padding: '0 6px',
    height: 20, // 与 title 文本行高一致
    display: 'inline-flex',
    alignItems: 'center',
    borderRadius: 4, // 更小的圆角
    fontSize: 9, // 字体更小
    lineHeight: '20px',
    border: 'none',
    flex: '0 0 auto',
  };

  return (
    <div style={containerStyle}>
      {type ? (
        <div style={typeBadgeWrapperStyle}>
          <div style={typeBadgeInnerStyle}>{type}</div>
        </div>
      ) : null}
      <div style={gridStyle}>
        {normalizedFeatures.map((feature, index) => {
          const key = `${feature.title || 'feature'}-${index}`;
          const hasTag = Boolean(feature.tag);
          const theme = colorThemeMap[normalizeColorKey(feature.tag_color)];
          return (
            <div key={key} style={itemStyle}>
              <span style={bulletStyle} />
              {feature.link ? (
                <span
                  role="link"
                  tabIndex={0}
                  onClick={() => openLinkInNewTab(feature.link)}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' || e.key === ' ') {
                      e.preventDefault();
                      openLinkInNewTab(feature.link);
                    }
                  }}
                  onMouseEnter={() => setHoveredIndex(index)}
                  onMouseLeave={() => setHoveredIndex(null)}
                  style={{
                    color: hoveredIndex === index ? 'var(--docuo-color-primary-hover)' : typeTextColor,
                    textDecoration: 'none',
                    fontWeight: 400,
                    fontSize: 14,
                    cursor: 'pointer',
                    marginRight: hasTag ? 4 : 0,
                  }}
                >
                  {feature.title}
                </span>
              ) : (
                <span style={{ marginRight: hasTag ? 4 : 0 }}>{feature.title}</span>
              )}
              {hasTag ? (
                <span style={{ ...tagBaseStyle, ...theme }}>{feature.tag}</span>
              ) : null}
            </div>
          );
        })}
      </div>
    </div>
  );
}



# <img src="https://doc-media.zego.im/sdk-doc/Pics/DeveloperCenter/homePage/product_img/icon_shishiyinshipin.png" alt="实时音视频" style={{display: 'inline', marginRight: '8px', verticalAlign: 'middle', width: '32px', height: '32px'}} /> 实时音视频

支持全球超低延迟多人视频、音频互动，为开发者提供便捷接入、高可靠、多平台互通的音视频服务。

<Button primary-color="NavyBlue" target="_blank" href="/real-time-video-ios-oc/client-sdk/download-sdk">下载 SDK</Button>
<Button primary-color="NavyBlue" target="_blank" href="/real-time-video-ios-oc/quick-start/implementing-video-call">快速开始</Button>
<Button primary-color="NavyBlue" target="_blank" href="/real-time-video-ios-oc/client-sdk/api-reference/function-list">客户端 API</Button>
<Button primary-color="NavyBlue" target="_blank" href="/real-time-video-server/api-reference/overview">服务端 API</Button>

---

<Steps titleSite="h3">
  <Step title="产品介绍" icon="https://doc-media.zego.im/sdk-doc/Pics/Express/overview_catalog/icon_documentation_jianjie.png">
    <FeatureList
      features={        [
                {
                        "title": "概述",
                        "link": "/real-time-video-ios-oc/introduction/overview"
                },
                {
                        "title": "产品功能",
                        "link": "/real-time-video-ios-oc/introduction/product-feature-list"
                },
                {
                        "title": "实时音视频价格说明",
                        "link": "/real-time-video-ios-oc/introduction/pricing/rtc"
                },
                {
                        "title": "服务端混流价格说明",
                        "link": "/real-time-video-ios-oc/introduction/pricing/server-side-stream-mixing"
                },
                {
                        "title": "CDN 直播价格说明",
                        "link": "/real-time-video-ios-oc/introduction/pricing/cdn-live-streaming"
                },
                {
                        "title": "性能数据",
                        "link": "/real-time-video-ios-oc/introduction/performance-report"
                },
                {
                        "title": "实时音视频 SDK 与实时语音 SDK 差异",
                        "link": "/real-time-video-ios-oc/introduction/difference-between-audio-and-video-sdk"
                }
        ]}
    />
  </Step>
  <Step title="快速开始" icon="https://doc-media.zego.im/sdk-doc/Pics/Express/overview_catalog/icon_documentation_kuaisukaishi.png">
    <FeatureList
      features={        [
                {
                        "title": "跑通示例源码",
                        "link": "/real-time-video-ios-oc/quick-start/run-example-code"
                },
                {
                        "title": "集成 SDK",
                        "link": "/real-time-video-ios-oc/quick-start/integrating-sdk"
                },
                {
                        "title": "实现视频通话",
                        "link": "/real-time-video-ios-oc/quick-start/implementing-video-call"
                },
                {
                        "title": "场景化音视频配置",
                        "link": "/real-time-video-ios-oc/quick-start/scenario-based-audio-video-configuration"
                }
        ]}
    />
  </Step>
  <Step title="通信能力" icon="https://doc-media.zego.im/sdk-doc/Pics/Express/overview_catalog/icon_documentation_tongxun.png">
    <FeatureList
      type="基础"
      features={        [
                {
                        "title": "使用 Token 鉴权",
                        "link": "/real-time-video-ios-oc/communication/using-token-authentication"
                },
                {
                        "title": "通话前检测",
                        "link": "/real-time-video-ios-oc/communication/pre-call-detection"
                },
                {
                        "title": "通话质量监测",
                        "link": "/real-time-video-ios-oc/communication/monitor-stream-quality"
                },
                {
                        "title": "网络测速",
                        "link": "/real-time-video-ios-oc/communication/testing-network"
                }
        ]}
    />
    <br/>
    <FeatureList
      type="进阶"
      features={        [
                {
                        "title": "多源采集",
                        "link": "/real-time-video-ios-oc/communication/multi-source-capture"
                },
                {
                        "title": "同时推多路流",
                        "link": "/real-time-video-ios-oc/communication/publish-multi-streams"
                },
                {
                        "title": "媒体补充增强信息（SEI）",
                        "link": "/real-time-video-ios-oc/communication/sei"
                },
                {
                        "title": "流量控制",
                        "link": "/real-time-video-ios-oc/communication/traffic-control"
                },
                {
                        "title": "云代理",
                        "link": "/real-time-video-ios-oc/communication/cloud-proxy"
                },
                {
                        "title": "地理围栏",
                        "link": "/real-time-video-ios-oc/communication/geofencing"
                },
                {
                        "title": "音视频流加密",
                        "link": "/real-time-video-ios-oc/communication/encrypt-streams"
                },
                {
                        "title": "游戏语音",
                        "link": "/real-time-video-ios-oc/communication/range-audio"
                },
                {
                        "title": "万人范围音视频",
                        "link": "/real-time-video-ios-oc/communication/mass-scale-range-audio-video"
                },
                {
                        "title": "多人状态实时同步",
                        "link": "/real-time-video-ios-oc/communication/sync-users-status"
                }
        ]}
    />
  </Step>
  <Step title="房间能力" icon="https://doc-media.zego.im/sdk-doc/Pics/Express/overview_catalog/icon_documentation_fangjian.png">
    <FeatureList
      type="基础"
      features={        [
                {
                        "title": "房间连接状态说明",
                        "link": "/real-time-video-ios-oc/room/room-connection-status"
                },
                {
                        "title": "实时消息与信令",
                        "link": "/real-time-video-ios-oc/room/messaging-and-signaling"
                }
        ]}
    />
    <br/>
    <FeatureList
      type="进阶"
      features={        [
                {
                        "title": "登录多房间",
                        "link": "/real-time-video-ios-oc/room/multi-room-login"
                }
        ]}
    />
  </Step>
  <Step title="音频能力" icon="https://doc-media.zego.im/sdk-doc/Pics/Express/overview_catalog/icon_documentation_yinpin.png">
    <FeatureList
      type="基础"
      features={        [
                {
                        "title": "音量变化与音频频谱",
                        "link": "/real-time-video-ios-oc/audio/sound-level-spectrum"
                },
                {
                        "title": "耳返与声道设置",
                        "link": "/real-time-video-ios-oc/audio/headphone-monitor"
                },
                {
                        "title": "音频 3A 处理",
                        "link": "/real-time-video-ios-oc/audio/audio-3a-processing"
                },
                {
                        "title": "变声/混响/立体声",
                        "link": "/real-time-video-ios-oc/audio/audio-effects"
                }
        ]}
    />
    <br/>
    <FeatureList
      type="进阶"
      features={        [
                {
                        "title": "场景化 AI 降噪",
                        "link": "/real-time-video-ios-oc/audio/scenario-based-ai-noise-reduction"
                },
                {
                        "title": "自定义音频采集与渲染",
                        "link": "/real-time-video-ios-oc/audio/custom-audio-capture-and-rendering"
                },
                {
                        "title": "自定义音频处理",
                        "link": "/real-time-video-ios-oc/audio/custom-audio-processing"
                },
                {
                        "title": "原始音频数据获取",
                        "link": "/real-time-video-ios-oc/audio/get-audio-raw-data"
                },
                {
                        "title": "AI 变声",
                        "link": "/real-time-video-ios-oc/audio/ai-voice-changer"
                }
        ]}
    />
  </Step>
  <Step title="视频能力" icon="https://doc-media.zego.im/sdk-doc/Pics/Express/overview_catalog/icon_documentation_shipin.png">
    <FeatureList
      type="基础"
      features={        [
                {
                        "title": "常用视频配置",
                        "link": "/real-time-video-ios-oc/video/common-video-configuration"
                },
                {
                        "title": "视频采集旋转",
                        "link": "/real-time-video-ios-oc/video/video-capture-rotation"
                },
                {
                        "title": "屏幕共享",
                        "link": "/real-time-video-ios-oc/video/screen-sharing"
                },
                {
                        "title": "水印和截图",
                        "link": "/real-time-video-ios-oc/video/watermark-and-screenshot"
                }
        ]}
    />
    <br/>
    <FeatureList
      type="进阶"
      features={        [
                {
                        "title": "设置视频编码方式",
                        "link": "/real-time-video-ios-oc/video/set-video-encoding"
                },
                {
                        "title": "自定义视频采集",
                        "link": "/real-time-video-ios-oc/video/custom-video-capture"
                },
                {
                        "title": "自定义视频渲染",
                        "link": "/real-time-video-ios-oc/video/custom-video-rendering"
                },
                {
                        "title": "自定义视频前处理",
                        "link": "/real-time-video-ios-oc/video/custom-video-preprocessing"
                },
                {
                        "title": "超分辨率",
                        "link": "/real-time-video-ios-oc/video/super-resolution"
                },
                {
                        "title": "主体分割",
                        "link": "/real-time-video-ios-oc/video/object-segmentation"
                },
                {
                        "title": "H.265",
                        "link": "/real-time-video-ios-oc/video/h265"
                },
                {
                        "title": "视频大小流和分层编码",
                        "link": "/real-time-video-ios-oc/video/small-large-video-stream-and-layered-encoding"
                },
                {
                        "title": "推流视频增强",
                        "link": "/real-time-video-ios-oc/video/publish-video-enhancement"
                }
        ]}
    />
  </Step>
  <Step title="直播能力" icon="https://doc-media.zego.im/sdk-doc/Pics/Express/overview_catalog/icon_documentation_zhibo.png">
    <FeatureList
      type="基础"
      features={        [
                {
                        "title": "混流",
                        "link": "/real-time-video-ios-oc/live-streaming/stream-mixing"
                },
                {
                        "title": "使用 CDN 直播",
                        "link": "/real-time-video-ios-oc/live-streaming/using-cdn-for-live-streaming"
                },
                {
                        "title": "CDN 推流鉴权",
                        "link": "/real-time-video-ios-oc/live-streaming/cdn-stream-publishing-authentication"
                },
                {
                        "title": "通过 URL 拉流",
                        "link": "/real-time-video-ios-oc/live-streaming/playing-stream-by-url"
                }
        ]}
    />
    <br/>
    <FeatureList
      type="进阶"
      features={        [
                {
                        "title": "单流转码",
                        "link": "/real-time-video-ios-oc/live-streaming/single-stream-transcoding"
                },
                {
                        "title": "OBS 使用 WHIP 协议推流",
                        "link": "/real-time-video-ios-oc/live-streaming/obs-push-with-whip"
                }
        ]}
    />
    <br/>
    <FeatureList
      type="特色"
      features={        [
                {
                        "title": "超低延迟直播",
                        "link": "/real-time-video-ios-oc/live-streaming/low-latency-live-streaming",
                        "tag": "特色",
                        "tag_color": "red"
                }
        ]}
    />
  </Step>
  <Step title="其他能力" icon="https://doc-media.zego.im/sdk-doc/Pics/Express/overview_catalog/icon_documentation_xiaoxi_2.png">
    <FeatureList
      type="基础"
      features={        [
                {
                        "title": "媒体播放器",
                        "link": "/real-time-video-ios-oc/other/media-player"
                },
                {
                        "title": "音效文件播放器",
                        "link": "/real-time-video-ios-oc/other/audio-effect-player"
                },
                {
                        "title": "音视频录制",
                        "link": "/real-time-video-ios-oc/other/local-media-recording"
                }
        ]}
    />
    <br/>
    <FeatureList
      type="进阶"
      features={        [
                {
                        "title": "将白板推送到第三方平台",
                        "link": "/real-time-video-ios-oc/other/push-the-whiteboard"
                },
                {
                        "title": "播放透明礼物特效",
                        "link": "/real-time-video-ios-oc/other/play-transparent-gift-effects"
                }
        ]}
    />
  </Step>
  <Step title="最佳实践" icon="https://doc-media.zego.im/sdk-doc/Pics/Express/overview_catalog/icon_documentation_zuijiashijian.png">
    <FeatureList
      features={        [
                {
                        "title": "体验 App",
                        "link": "/real-time-video-ios-oc/best-practice/object-segmentation/demo-app"
                },
                {
                        "title": "实现流程",
                        "link": "/real-time-video-ios-oc/best-practice/object-segmentation/implementation"
                },
                {
                        "title": "多人视频通话",
                        "link": "/real-time-video-ios-oc/best-practice/multiplayer-video-call"
                },
                {
                        "title": "和 AI 美颜的搭配使用",
                        "link": "/real-time-video-ios-oc/best-practice/integration-with-zego-effects-sdk"
                },
                {
                        "title": "调试与配置",
                        "link": "/real-time-video-ios-oc/best-practice/debug-and-config"
                },
                {
                        "title": "限制说明",
                        "link": "/real-time-video-ios-oc/best-practice/restrictions"
                },
                {
                        "title": "从 CDN 拉流切换到连麦场景",
                        "link": "/real-time-video-ios-oc/best-practice/switch-cdn-to-rtc"
                },
                {
                        "title": "秀场直播秒开方案",
                        "link": "/real-time-video-ios-oc/best-practice/instant-startup-solution"
                }
        ]}
    />
  </Step>
  <Step title="参考文档" icon="https://doc-media.zego.im/sdk-doc/Pics/Express/overview_catalog/icon_documentation_cankaowendang.png">
    <FeatureList
      features={      [
            {
                  "title": "客户端 API",
                  "link": "/real-time-video-ios-oc//client-sdk/api-reference/function-list"
            },
            {
                  "title": "服务端 API",
                  "link": "/real-time-video-server/api-reference/overview"
            },
            {
                  "title": "常见错误码",
                  "link": "/real-time-video-ios-oc/client-sdk/error-code"
            },
            {
                  "title": "常见问题",
                  "link": "/real-time-video-ios-oc/faq"
            }
      ]}
    />
  </Step>
</Steps>