Dweb Studio for VS Code

让你在 VS Code 里“所见即所得”地搭建前端页面、数据库模型和 API：

• PageMaker：项目 → 页面 → 组件脚本 → 运行时预览/导出;
• DBVision：可视化设计数据库结构并导出 Django models;
• DwebAPI：用行为流蓝图拖拽生成 Django API 代码。

项目主页：https://www.dweb.club

我能用它做什么？

• 用熟悉的 VS Code 编辑器编写 PageMaker 画布脚本（仅支持 JS，禁止 JSON），即时预览页面效果
• 可视化设计数据库蓝图（DBVision），一键生成 Django models.py / schema 快照
• 通过 DwebAPI 行为流蓝图拖拽接口逻辑，编译生成可运行的 Django 视图函数
• 管理多个项目/页面/资源（图片/音视频），并在本地运行预览/后端服务

快速上手（建议按顺序操作）

1. 打开 Dweb Studio

   • 命令面板输入 “Dweb Studio: 打开” 或使用快捷键 Ctrl+Alt+P（Mac: Cmd+Alt+P）

2. 新建项目

   • 在左侧 Dweb Studio 视图（“项目管理”）中点击“创建新项目”，选择本地文件夹作为项目目录。

3. 使用 Dweb Studio 面板首页

   • 在项目列表中选中某个项目后，会进入该项目的“项目详情页”（Dweb Studio 面板首页）：
     • 上半部分：项目概览、页面列表、后端服务状态、设备模板快捷创建；
     • 下半部分：后端管理 + PageMaker、DBVision、DwebAPI 三个子面板。
   • 推荐从这里统一完成“开后端 → 设计 DB → 搭行为流 API → 打开 PageMaker 页面”的一整套操作。

4. PageMaker：创建页面并编辑画布

   • 在项目详情页顶部“页面列表”区域点击“+ 新建”或使用右侧设备模板卡片，新建页面（可选手机/平板/桌面/自定义尺寸）。
   • 在项目详情页下半部分的 PageMaker 面板中双击页面缩略图，打开 PageMaker 画布。
   • 在页面中添加“画布”组件，点击“代码编辑器”，在 VS Code 编辑器中编写 JS 数据：
     • 支持 export default {...} 或设置变量 option = {...}；
     • 保存（Ctrl/Cmd+S），右侧画布即时更新。

5. DBVision：设计数据库并生成 Django models

   • 在项目详情页下半部分切换到 DBVision 面板：
     • 通过拖拽添加数据表、字段，支持中文别名 + 拼音/英文 name；
     • 保存（Ctrl/Cmd+S）会写入项目根 .dweb-db/blueprint.json，并生成/更新 Django models.py。

6. DwebAPI：拖拽行为流生成 API

   • 在项目详情页下半部分切换到 DwebAPI 面板：
     • 在左侧“API 列表”中新建接口，配置 Method/Path；
     • 在画布中拖拽 ENTRY/DB_OBJECT/DB_CRUD/VARIABLE/RESPONSE 等节点，连线形成接口逻辑；
     • 从 DBVision 导入的表可以在 DB_OBJECT/DB_CRUD 中直接选择，行为流编译后会生成与 models.py 一致的 Django ORM 调用。
   • 在项目详情页中使用“生成 API 代码”按钮，可将当前行为流编译为 Django dweb_apis.py。

7. 运行后端并调试 API

   • 在项目详情页的“后端服务”卡片中：
     • 点击“启动后端”启动项目对应的 Django 服务（默认端口 5800，可在此修改）；
     • 使用 DwebAPI 自带的 API 测试抽屉（RestFul 测试面板）或外部工具（如 Postman）对生成的接口发起请求。

8. 保存项目快照

   • 在 Dweb Studio 视图内按 Ctrl/Cmd+S 保存全局项目快照；
   • PageMaker/DBVision/DwebAPI 都会通过桥接协议写入各自的 .dweb-* 目录，并清理 Dweb Studio 面板标题上的“脏标识”。

常用命令

• Dweb Studio: 打开（dwebStudio.open）
• Dweb Studio: 保存项目（dwebStudio.save）
• 打开代码编辑面板（dwebStudio.openCodeEditorPanel）

常用设置

• dwebStudio.useDevServer（默认 false）：从本地 Dev Server 加载 Webview 前端（加速开发）
• dwebStudio.devServerPort（默认 5180）：Dev Server 端口
• dwebStudio.uiScale（默认 1）：Webview UI 缩放（0.5~2.0）
• dwebStudio.debugLogs（默认 true）：打印详细调试日志

注意与限制

• 仅支持使用 JS 描述图表数据，JSON 会被拒绝（例如直接 {} 会报错）
• ECharts 渲染采用 notMerge + replaceMerge('series')，避免历史状态残留
• 资源文件复制到项目目录 .dweb-media/，画布脚本/数据（如启用）保存在 .dweb-canvas/

安装与要求

• VS Code 1.90.0 或更高
• 市场安装（即将发布）或本地安装 VSIX：
  • npm run build:all 构建产物
  • npx vsce package 生成 VSIX（或 npm run package:prod）
  • 在 VS Code 扩展侧边栏选择“从 VSIX 安装”

反馈与支持

• 主页：https://www.dweb.club
• 邮箱：dwebnine@dweb.club

许可证

Apache-2.0。详见根目录 LICENSE。