1. 介绍

TGS 和电子流项目都进行了重构，同步下设计原则、当前规范等。

新系统带来的价值包括：

1. 避免与其他游戏的项目耦合，减少现网bug
2. 代码更健壮、更规范、更稳定，开发效率更高
3. 性能提升（待收集数据）
4. 开发编译、打包速度提升

2. 理解 TGS 和电子流

TGS 和电子流都是管理端，二者有以下不同：

	TGS	电子流
用户群体	偏内部	偏外部
设计规范	基本无，开发者自行堆砌组件库即可	有，需遵循
变更频率	频繁	较少
不同游戏间差异	差异较大， 多个页面需定制	差异较小， 多数情况下改下主题图、样式、gid 即可

3. 模板建设

基于以上不同，TGS 和电子流模板设计也有所不同：

• 模板代码量上，TGS 较少，电子流较多
• 接入一个新游戏，TGS 耗时较多，电子流10分钟内完成接入

模板项目必须是一个规范化很强的项目，TGS 和电子流都建立了对应的模板。

4. TGS 优化

之前的 TGS 系统存在以下问题：

• 多个游戏的逻辑、页面、数据杂糅在一起，已经出现不止一次下面的问题：想改动一个游戏的业务，却影响了其他游戏的正常流程
• 数据流混乱，逻辑分散。使用 Vuex 管理非全局性质的数据，没有就近放置，管理困难。叠加上第1点，维护起来更加困难

代码层面问题：

• 没有使用 typescript，没有类型提示
• 常量导出、接口导出都是用的大对象，没法 tree-shaking，性能差
• 与第2点类似，数据导入都是 index.js 中导入，难以快速定位位置

诚然，花上不少时间还是能够理清之前的逻辑，区别在于，烂代码里1天做一个需求，好代码里5分钟做一个需求，且前者1天做出来的需求 bug 还比后者多。

考虑到后续源源不断的新游接入，以及当前 TGS 的痛点，新建了 TGS 模板：

• 不同游戏分离，且是物理隔离，彻底解决影响其他游戏业务的问题
• 采用 Vue3 + TDesign Vue Next + Typescript + Pinia 等技术栈
• 减少伪公共逻辑的复用，减少 local-logic/store 逻辑，真正可复用的可放到 pmd 中

目前 HoK TGS、三角洲 TGS 已接入新模板。

5. 电子流优化

电子流同样有多游戏逻辑杂糅的问题，相比 TGS，电子流没有过度使用 Vuex，但有一些其他问题，比如文件命名不统一、目录结构混乱问题。

同样地，新建了电子流模板，包括 PC 和 H5，优化了以下部分：

旧系统	新系统
目录结构混乱， 组件、逻辑放的到处都是	公共逻辑或组件放到 local-component/logic， 非共用的放到子工程 component/logic 下
命名不统一，有 pascal、也有 kebab	文件、目录统一为 kebab
引用混乱， 子工程间相互引用， 非共用的也写在外部， 外层引用内层	规范引用关系， 子工程间不可引用， 非共用的写在子工程内， 禁止反向依赖
过度封装路由跳转，更引入了 mixin， 开发调试困难，来回跳跃， mixin 容易变量冲突、覆盖，只对老人友好，新人无从下手	删除 mixin、jump， 跳转逻辑直接写在页面中， 简单、清晰、易维护
全是 js， 缺失类型提示、类型校验	js 全部改成 ts， 补充类型提示
组件库乱用， PC 也用 Vant，H5 也用 Element	PC 统一用 Element， H5 统一用 Vant
组件从 index.js 额外导出，冗余	删掉多余的 index.js，直接引入 Vue 文件
全是魔法字符串，如 gid、orgId、roleId 等	全部改成统一的配置文件引入
组件与样式位置分散，难以维护	样式就近放置在组件旁
大量 typo 拼写错误，有些甚至表现在 url 上， 如 /apply/authentification	全局检查， 改成正确的，避免低级错误
导出用大对象，不利于 tree-shaking	分方法导出，避免大对象

新系统采用 Vue3 技术栈，使用的组件库也进行相应的了升级，Element UI => Element Plus, Vant2 => Vant4。

目前，无畏契约电子流、金铲铲电子流已接入。此外，旧系统中其他游戏的电子流、通用版电子流也用新模板重新做了下，可以在下次相关需求时测试并上线。

6. ESLint

还是那句话，遵守代码规范是防止项目腐化的第一步。上面提到新系统都会严格要求代码规范，并利用一些工具控制规范，比如 MR Lint 检查、全量 Lint 检查等。

此外，新系统都引入了 import/order 这个规则，可以将三方库、本地文件清晰的分割开，本地文件的不同目录也会分开，比如 src/local-logic, src/local-component，清晰，一目了然，提升代码统一性。后面会根据业务实际需要，挖掘更多规则。

7. 总结

TGS、电子流升级后，赛事核心的相关业务基本都升到了 Vue3 + Typescript，提升了可维护性。

通过新模板的建立、更强的目录规范、代码规范、命名规范等约束，可以促使新系统更健康的迭代。