react-content-generatorlisted

# React 内容生成器 专门用于生成高质量的 React 知识演示页面（可独立使用，也可配合 `react-video-generator` 生成视频）。 ## 核心特点 基于 **7 个成熟案例项目**的代码模式，提炼出的设计系统： ### 1. 三种主题风格预设（NEW v2.0） - **暗黑科技风（dark-tech）**：深空黑背景 + 蓝紫渐变 + 光晕效果，适合技术产品/开发工具 - **温暖专业风（warm-professional）**：浅灰白背景 + 橙黄渐变 + 柔和阴影，适合企业级解决方案/B端产品 - **梦幻渐变风（dreamy-gradient）**：粉白基底 + 紫粉渐变 + 光晕效果，适合C端产品/社交工具 ### 2. Apple 风格设计语言 - **毛玻璃卡片（GlassCard）**：支持主题切换，自动适配浅色/深色背景 - **圆角系统**：`rounded-[2.5rem]`（大圆角）→ `rounded-3xl`（超大容器） - **阴影层次**：根据主题自动调整阴影深度 - **渐变背景**：多层渐变叠加，营造空间感 ### 3. 标准化动画时序系统（NEW v2.0） - **状态驱动**：通过 `step` 状态控制动画流程 - **标准时序**：初始延迟 800-1200ms，步骤间隔 1200-2000ms，高潮时刻 3500-4500ms - **过渡效果**：`transition-all duration-700 ease-[cubic-bezier(0.25,1,0.5,1)]` - **新增动画**：scaleIn、fadeIn、dash（SVG流线动画） ### 4. 配音文本集成（可选） - **ScriptFooter 组件**：支持三种主题风格（light/dark/glass） - **响应式显示**：`text-sm md:text-base font-bold` - **视频生成支持**：`react-video-generator` 会自动提取配音文本 ### 5. 高级可视化组件库（NEW v2.0） 基于真实案例提炼的4种核心模式： - **对比崩溃模式**（ContrastCollapseVisualizer）：展示痛点，左侧正常→中间转折→右侧崩溃+警示层 - **流程引擎模式**（FlowEngineVisualizer）：展示技术架构，输入→引擎处理→多输出+SVG流线动画 - **卡片瀑布流模式**（CardCascadeVisualizer）：展示特性列表，卡片依次出现 - **金句组件标准模板**（GoldenSentenceStandard）：展示Andy身份背书+核心观点 传统可视化组件（保留）： - **搜索迁徙可视化**（SearchShiftVisualizer）：展示用户行为变化 - **漏斗压缩可视化**（CruelFunnelVisualizer）：展示筛选过程 - **雷达扫描可视化**（RadarVisualizer）：展示全平台监控 - **对比展示**（BeforeAfterComparison）：传统 vs AI 方案 ## 使用方法 ```bash # 基础用法 /react-content-generator "主题：AI 搜索革命" # 指定主题风格（NEW v2.0） /react-content-generator "主题：AI 搜索革命" --theme=dark-tech /re