FE/DESIGN.md

1. 项目背景与战略目标

在大型项目（如字节跳动内部项目）中，测试用例的管理需要兼顾灵活性与规范性。本项目致力于实现：

• 测试管理与创建：支持多场景（Web、移动端、API等）测试用例的创建与维护，确保全链路覆盖。
• 场景规范化：通过模板化和标准化流程，统一不同研发、测试人员对业务场景的定义，减少沟通误差。
• 报告数据化：全量采集执行结果，自动生成多维报表，驱动效率优化与质量分析。

2. 核心功能设计

2.1 脑图与表格双向联动

• 思维导图视图：用于梳理测试逻辑、功能模块和边界情况。支持快捷键（Enter 新增兄弟节点，Tab 新增子节点）。
• 表格视图：用于录入详细的“操作步骤”、“预期结果”和“优先级”。
• 实时同步：在脑图中修改节点名称，表格自动更新；在表格中增删行，脑图结构随之变化。

2.2 测试计划管理 (Test Plan)

• 多类型支持：支持创建不同类型的测试计划，包括需求测试、回归测试、开发自测、冒烟测试等。
• 独立上下文：每个测试计划可以关联不同的用例集，记录独立的执行状态和评审进度。
• 一键拉群关联：飞书拉群功能将直接关联到特定的测试计划，群内实时推送该计划的执行进度。

2.3 用例详情与属性 (Property Panel)

• 步骤管理：右侧面板支持录入详细的“操作步骤”与“预期结果”，支持动态增删。
• 优先级标记：支持 P0-P3 快速切换。
• 评审记录：支持记录节点的状态变化。

2.4 用例分级 (Priority Management)

• 等级定义：
  • P0：冒烟测试核心用例，阻塞性故障。
  • P1：主要功能路径。
  • P2：次要功能及边界。
  • P3：视觉、文案等细微问题。
• 视觉呈现：脑图节点支持标记 P0-P3 图标，表格支持按优先级过滤。

2.3 飞书（Feishu/Lark）一键拉群

• 场景：针对某个“测试计划”或“高优用例集”，点击按钮直接调起飞书 API 创建群聊。
• 功能点：
  • 自动邀请相关测试人员与开发人员。
  • 群名自动生成（例如：【测试专项】XX项目_20240428）。
  • 群内自动推送测试报告概览卡片。

2.4 用例评审与执行

• 评审流：支持节点标记“已通过”、“待修改”。
• 执行模式：进入执行态后，点击节点可快速标记 Pass/Fail，并自动记录执行人。

3. 技术架构方案

3.1 前端技术栈

• 框架：React + TypeScript (提供强类型支持，适配复杂逻辑)。
• 样式：Vanilla CSS + CSS Variables (打造极致的响应式与动态主题，如深色模式)。
• 脑图引擎：基于 React Flow 或自研 SVG 引擎，实现平滑的缩放与拖拽。
• 状态管理：Zustand (轻量级，适配频繁同步的脑图数据)。

3.2 数据结构设计

用例以树状结构存储，每个节点包含：

{
  "id": "uuid",
  "text": "登录功能",
  "priority": "P0",
  "children": [...],
  "steps": [
    {"action": "输入账号", "expected": "账号回显正确"}
  ],
  "status": "pass" | "fail" | "blocked"
}

4. 界面交互设计 (Premium Aesthetics)

• 配色：采用字节跳动风格的“极客蓝”配合深色/亮色毛玻璃效果。
• 动画：使用 Framer Motion 实现视图切换时的平滑过渡。
• 布局：
  • 左侧：项目/目录树。
  • 顶部：工具栏（视图切换、飞书拉群、全局搜索）。
  • 中央：核心编辑器（脑图/表格）。
  • 右侧：属性面板（选中节点的详细信息、评审记录）。

5. 开发路线图

1. Phase 1: 基础框架搭建，实现脑图与表格的渲染。
2. Phase 2: 实现数据的本地/持久化存储及双向同步逻辑。
3. Phase 3: 集成用例标级功能与右侧属性面板。
4. Phase 4: 模拟飞书 API 集成与一键拉群交互。
5. Phase 5: 整体视觉打磨与性能优化。