200字
Qml-API-DevTool 产品需求 & 技术方案说明书
2026-01-17
2026-01-17

本地开源版 · 版本号 0.1.0 · 最后更新 2026-01-17


1. 产品定位

一句话:为本地开发调试而生的「轻量级 HTTP 接口调试 + 工作区管理」工具,后续可演进到工作流编排、Mock 服务、AI 假数据等方向。
目标用户:前后端开发者、开源贡献者、教学演示。


2. 使用场景(MVP)

场景 描述
新建工程 对应一个真实项目(如博客后端),生成独立文件夹与元数据
新建工作区 一个 .ws.json 文件,顺序保存 N 条请求(登录→CRUD→退出)
发送请求 立即发真实 HTTP,回显状态码、耗时、格式化 JSON
切换环境 通过 {{baseUrl}} 变量一键切换 dev/test
组件插件 可引入 C++/Qt 自绘的 QML 控件(QtFlutter 风格按钮、Chip 等)

3. 需求清单(MVP)

模块 需求点 优先级
工程管理 新建 / 打开 / 删除 / 最近使用列表 P0
工作区管理 新建 / 保存 / 删除 / 重命名 P0
请求编辑器 Method、URL、Headers、Body、名称 P0
响应面板 状态码、耗时、JSON 高亮、折叠树 P0
环境变量 全局 & 工程级变量替换 {{key}} P0
插件系统 C++ QML 扩展组件,import 即用 P0
主题切换 浅色 / 深色两套,QtFlutter 控件跟随 P1

4. 技术栈

层级 技术 备注
前端 QML6 + QtQuick.Controls 2 单窗口,StackView 导航
后端 PySide6(Python 3.10+) 内嵌 QQmlEngine,无额外 IPC
构建 CMake 3.20 + Qt6 CMake 统一构建入口
插件 C++/Qt QML Extension Plugin 继承 QQuickItem,自绘任意
持久化 JSON 文件(格式化) 不引入数据库,方便 Git diff
网络 Python httpx 异步 QML 侧回调无阻塞

5. 仓库目录结构


qml-api-devtool/
├── CMakeLists.txt                 # 统一构建
├── src/
│   ├── qml/
│   │   ├── main.qml
│   │   ├── pages/                 # 各页面
│   │   ├── controls/              # 纯 QML 通用组件
│   │   └── themes/                # 主题变量
│   ├── python/
│   │   ├── main.py                # 启动入口
│   │   ├── core/
│   │   │   ├── project_manager.py
│   │   │   ├── workspace_manager.py
│   │   │   ├── http_caller.py
│   │   │   └── env_resolver.py
│   │   └── qml_bridge.py          # 注册到 QML 的 Context
│   └── plugins/
│       ├── QtFlutter/             # 示例插件
│       │   ├── CMakeLists.txt
│       │   ├── qtflutter_plugin.cpp
│       │   ├── Button.qml         # 可选 QML wrapper
│       │   └── qmldir
│       └── README.md              # 插件开发指南
├── tests/                         # pytest + qmltest
├── docs/
│   ├── ROADMAP.md
│   └── plugin_dev.md
├── examples/
│   └── BlogProject/               # 示例工程模板
└── README.md                      # 用户快速开始


6. 数据格式约定

6.1 project.json(工程级)

{
  "name": "BlogBackend",
  "version": 1,
  "created": "2026-01-17T12:00:00Z",
  "env": {
    "dev": {"baseUrl": "http://localhost:3000"},
    "test": {"baseUrl": "https://api.test.example.com"}
  }
}

6.2 *.ws.json(工作区级)

{
  "name": "CRUD_Post",
  "requests": [
    {
      "id": "1",
      "name": "登录",
      "method": "POST",
      "url": "{{baseUrl}}/auth/login",
      "headers": {"Content-Type": "application/json"},
      "body": {"username": "admin", "password": "123456"},
      "preScript": "",
      "assertScript": "assert(resp.status === 200)"
    },
    {...}
  ]
}

7. QML ↔ Python 接口(信号/槽)

Python 对象 关键函数 返回/信号
ProjectManager createProject(folder: str) -> bool projectOpened(path: str)
WorkspaceManager loadWorkspace(file: str) -> list workspaceLoaded(list)
HttpCaller send(req: dict) -> dict 同步转异步回调
EnvResolver render(text: str, env: str) -> str 替换变量

8. 插件开发约定

  • 每个插件独立 CMake 子工程,产出 MyPlugin.dll/so/dylib + qmldir
  • 注册示例qmlRegisterType<QtFlutterButton>("QtFlutter", 1, 0, "Button");
  • QML 使用import QtFlutter 1.0
    Button { accent: true; onClicked: root.send() }
  • 内部可用 QPainter / QSG 任意自绘,视觉与 Flutter 组件对齐即可

9. 构建 & 运行(开发)

# 1. 配置
cmake -B build -S . -DQt6_DIR=/path/to/Qt6/lib/cmake/Qt6
# 2. 编译
cmake --build build --parallel
# 3. 运行
export QML_IMPORT_PATH=build/plugins:$QML_IMPORT_PATH
python src/python/main.py

10. 里程碑计划

阶段 目标 预估时间
M0 骨架可跑:CMake+PySide6+QML 主窗口 1 d
M1 工程/工作区 CRUD + 树导航 2 d
M2 请求编辑器 + 真实 HTTP + 响应面板 2 d
M3 环境变量 + 主题切换 1 d
M4 C++ 插件示例 Button/Chip 并可 import 2 d
M5 文档、示例工程、单元测试 2 d
M6 开源发布 v0.1.0 1 d

11. 后续 Roadmap(简版)

  1. 内置 Mock 服务(本地端口),支持 JSON Schema → 假数据
  2. AI 假数据生成(本地大模型或云端)
  3. 工作流编排:把多个工作区拖成顺序图,支持循环/条件
  4. CLI 模式:无界面批量运行工作区并生成报告
  5. 团队协作:云端同步、权限、历史回滚

12. 常见问答(预留)

(待补充)


13. 授权协议

MIT · 可商用、可二次发布、保留 License 文件即可


下一步:把本 Markdown 使用Agent,让它先自动生成 CLI 骨架(CMakeLists.txt、main.py、main.qml 空壳),
生成后 cmake -B build && cmake --build build 一键跑通,再继续迭代。

Qml-API-DevTool 产品需求 & 技术方案说明书
Author
Administrator
Published at
2026-01-17
License
CC BY-NC-SA 4.0

Comment