Web 看板

运行 backlog browser 即可启动基于浏览器的可视化任务管理界面。Web 看板基于 React + Tailwind CSS v4 构建,支持拖拽操作、里程碑泳道、标签筛选和实时同步,是团队协作者和偏好图形界面用户的首选工具。

启动 Web 界面

# 默认启动:端口 6420,自动打开系统默认浏览器
backlog browser

# 指定自定义端口
backlog browser --port 8080

# 启动但不自动打开浏览器(适合远程服务器或后台运行)
backlog browser --no-open

启动成功后,终端会显示服务地址,例如 http://localhost:6420。按 Ctrl+C(或 Cmd+C)即可停止服务。

提示:可通过配置 autoOpenBrowser 和 defaultPort 修改默认行为,详见配置管理章节。

看板视图

打开 Web 界面后,默认进入看板视图。界面按状态分为多列,每列显示对应状态的任务卡片:

拖放操作

  • 跨列移动:按住任务卡片,拖拽到目标状态列即可变更任务状态。
  • 调整顺序:在同一列内上下拖拽,可调整任务在看板中的展示顺序。
  • 撤销支持:所有拖放操作都会实时写入 Markdown 文件,并可通过 Git 回溯。

里程碑泳道

启用里程碑视图后,看板会在每列内按里程碑分组展示任务卡片。同一里程碑的任务聚集在一起,形成清晰的横向泳道,方便按迭代或版本追踪进度。

标签筛选

看板顶部提供标签筛选下拉框,点击后勾选需要的标签,看板会即时过滤只显示匹配标签的任务。支持多标签组合筛选。

所有任务视图

点击导航栏的「所有任务」,切换到表格布局:

  • 支持按状态、优先级、标签、里程碑进行多维度筛选
  • 表头点击可排序
  • 顶部搜索框是触发按钮:点击它或按 Ctrl+K / Cmd+K 打开全局搜索对话框(Fuse.js 模糊匹配,结果按类型分组,关键词与 ID 高亮)

甘特图视图

点击导航栏的「甘特图」,进入时间线可视化页面:

  • 左侧任务列表 + 右侧时间线双栏布局
  • 五级时间粒度切换(日 / 周 / 月 / 季度 / 年)
  • 自动解析任务起止时间(plannedStart / plannedEnd / createdDate)
  • 任务依赖关系以 SVG 箭头可视化
  • 支持拖拽平移时间轴

详见甘特图视图章节。

里程碑管理页

导航栏的「里程碑」提供完整的里程碑生命周期管理:

  • 创建里程碑:点击「添加里程碑」按钮,输入名称即可创建。
  • 里程碑详情:每个里程碑卡片展示归属任务数和完成进度。
  • 拖放分配:从未分配任务池中将任务拖拽到目标里程碑,或反向移除。
  • 完成检测:当里程碑下所有任务都进入 Done 状态时,系统自动将该里程碑标记为已完成。
  • 已完成的里程碑:默认折叠在页面底部,减少视觉干扰。

文档与决策查看

Web 界面还提供项目知识库的只读浏览:

  • 文档列表:按子文件夹分组展示 backlog/docs/ 下的全部文档,点击标题即可查看 Markdown 渲染内容。
  • 决策记录:展示 backlog/decisions/ 中的 ADR 决策,包含状态标签和创建时间。

实时更新

Web 服务端通过 WebSocket 向所有连接的客户端广播文件变更:

  • 在终端用 backlog task edit 修改任务后,浏览器中的看板会在 1 秒内自动刷新。
  • 在 Web 界面中编辑任务时,如果其他用户或进程同时修改了同一文件,界面会智能合并变更,避免覆盖。
  • 草稿保留:正在编辑但未保存的内容,在文件刷新后会被保留,不会丢失。

暗黑模式与响应式

Web 界面自动跟随系统主题切换暗黑模式,也支持手动切换。布局针对桌面和移动端做了响应式适配:

  • 桌面端:多列看板并排,适合大屏浏览。
  • 移动端:单列堆叠,支持触摸滑动和长按拖拽。

Mermaid 图表与附件

任务 Markdown 中若包含 Mermaid 语法,Web 界面会自动渲染为流程图、时序图或甘特图。backlog/assets/ 目录下的图片和附件可通过相对路径直接在任务详情中预览。

results matching ""

    No results matching ""