用 CodeBuddy 打通「前端 + 后端 + 抖音小程序」全栈开发：流程图、工作流与技术栈全景解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */
#content_views .toc,
/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */
#content_views.markdown_views > p:empty:has(+ .toc),
#content_views.markdown_views > .toc + p:empty,
/* 富文本旧版目录标记 */
#content_views.htmledit_views #main-toc,
#content_views.htmledit_views #hr-toc,
#content_views.htmledit_views p[id*=\”-toc\”] {
display: none !important;
}
/* 目录去掉后，紧跟的首个标题不再多出一块上边距 */
#content_views.markdown_views > .toc + h1,
#content_views.markdown_views > .toc + h2,
#content_views.markdown_views > .toc + h3,
#content_views.markdown_views > .toc + h4,
#content_views.markdown_views > .toc + p:empty + h1,
#content_views.markdown_views > .toc + p:empty + h2,
#content_views.markdown_views > .toc + p:empty + h3,
#content_views.markdown_views > .toc + p:empty + h4 {
margin-top: 0 !important;
}

一、先说结论：AI 时代的三端开发变了什么

在动手写代码之前，先把方法论说清楚。传统三端开发的痛点不是\”写不出代码\”，而是：

CodeBuddy 在这个流程里的定位是：人负责\”定义与验收\”，AI 负责\”生成与填充\”。具体分工如下：

一句话总结：流程不变，人机分工变了。下面进入正题。

二、项目概况与三端职责划分

2.1 项目是什么

《万妖消除录》是一个消除类休闲小游戏，核心机制为\”回声扩散\”：玩家交换相邻方块形成三连消除，消除有概率生成\”回声\”方块并向外扩散，回声密度超过阈值即失败。支持多平台发布（抖音小游戏、微信小程序、微信小游戏、H5）。

项目由两个代码库组成：

• 前端/小程序库：Taro 项目，负责游戏引擎、规则系统、多端编译；
• 后端库：Spring Boot 单体服务，负责接口、数据库、管理后台（管理台打包进同一个 Jar）。

2.2 三端职责划分

三端协同的第一原则是职责边界清晰，这是后面所有流程图能成立的前提：

三端协同工作流

• 前端（Taro 多端）：游戏引擎与消除算法、规则与关卡系统、多端编译配置、图鉴与结算 UI；
• 后端（Spring Boot）：REST 接口、数据库与 Flyway 迁移、管理端（Vben 5）、鉴权与 Redis 缓存；
• 抖音小程序端：开发者工具配置、隐私合规政策、资源包与分包、审核与上架。

三端之间只通过接口契约通信（/game/private/* 前缀 + JWT Bearer + 统一响应结构），不共享任何业务代码。这条原则让前端换框架、后端换语言都成为可能，也让 AI 生成代码时的上下文足够收敛。

三、技术栈全景与选型理由

3.1 技术栈清单