vscode-workbench/.trae/specs/api-detail-slider-captcha/spec.md

API详情页滑块验证码 Spec

Why

当前API详情页（ApiDetail）直接展示接口调用信息和测试工具，缺乏访问控制。为防止恶意抓取和未授权访问接口测试功能，需要在页面访问时增加滑块验证码验证，验证通过后才展示完整内容。

What Changes

• 在ApiDetail页面集成SliderCaptcha组件
• 验证通过前隐藏接口详情、参数说明、测试工具等敏感内容
• 验证通过后展示完整页面内容
• 支持重试次数限制和Token过期自动刷新
• 暗色模式适配

Impact

• Affected specs: API接口大全详情页
• Affected code:
  • src/pages/ApiDetail/ApiDetail.tsx - 集成滑块验证码
  • src/pages/ApiDetail/ApiDetail.css - 添加验证遮罩样式
  • src/components/SliderCaptcha/SliderCaptcha.tsx - 复用现有组件

ADDED Requirements

Requirement: API详情页滑块验证码

系统SHALL在用户访问API详情页时要求进行滑块验证码验证。

Scenario: 首次访问页面

• WHEN 用户打开API详情页
• THEN 显示滑块验证码遮罩，隐藏页面核心内容
• AND 用户完成滑块验证后展示完整内容

Scenario: 验证成功

• WHEN 用户成功完成滑块验证
• THEN 隐藏验证码遮罩，展示API详情内容
• AND 显示验证成功状态（绿色勾选图标）

Scenario: 验证失败

• WHEN 用户验证失败
• AND 显示失败状态，自动刷新验证码
• AND 允许用户重试（最多3次）

Scenario: 超过最大重试次数

• WHEN 用户连续失败超过最大重试次数
• AND 显示操作按钮让用户手动刷新

Requirement: 内容保护

验证通过前SHALL隐藏接口敏感信息。

Scenario: 未验证状态

• WHEN 用户未完成滑块验证
• THEN 隐藏接口参数、响应示例、测试工具等内容
• AND 显示验证码组件

Requirement: 暗色模式支持

滑块验证码组件SHALL支持暗色模式。

Scenario: 暗色模式

• WHEN 用户切换到暗色模式
• AND 验证码组件和遮罩适配暗色主题

MODIFIED Requirements

Requirement: ApiDetail页面

现有ApiDetail页面SHALL集成滑块验证码保护。

Scenario: 页面加载

• WHEN 页面加载
• AND 默认显示验证状态，验证通过后才渲染完整内容