Vue3 在校级平台里

手指还想敲 useState，仓库里却是 ref 和 computed。智链 3.0 用 Vue3 + TypeScript + Vite。TextGuard 用 React / TypeScript。两套肌肉会互相抢。我是张恒基，教育部信息网络工程研究中心的前端实习生。仓库用什么就跟什么。不要把 A 的 lint 套到 B。这一条我后来给别的仓库写 agent 约定时又写了一遍。

组件边界跟页面走

校级平台的页面不是演示沙盒。列表、详情、筛选、版本，已经有一套信息架构。新组件要嵌进去，不要在旁边再长一个「更现代的模块」。更现代的模块会变成只有我能找到的入口。老师找不到，模块等于没做。没做的东西如果还进了周报，周报就超了证据。

状态放哪，Vue3 给的选择比我刚进组时想的多。组件内 ref 够用的，不抬到全局。筛选这种跨刷新还要在的，放到查询参数和明确的状态里。请求逻辑写成可复用的函数，但不要为了复用提前抽象。提前抽象会把智链的字段名和我在 TextGuard 用过的字段名揉在一起。揉在一起，联调那天会改错仓库。

TypeScript 在 Vue 里同样有用。接口返回的列表项写成类型，空字段才不会被模板静默吃掉。吃掉之后页面像成功。成功的假象在筛选组合变多时最害人。害人的假象，热更新看不出来。冷启动才能看出来。

请求失败要在组件里有位置

Vue 组件容易把精力花在绑定和样式。样式过了，请求失败还是一张白。我在列表筛选那篇写过三种空。落到组件实现上，就是失败态和空态分开写，不共用一个 v-if。共用一个，文案只能含糊。含糊的文案在校级平台里会被理解成系统坏了。坏了会工单。工单会打到联调。联调会发现只是没记录。没记录不该升级成事故。

权限错误也一样。实习身份我碰得到的接口有限。碰不到的，页面要说权限，不说「加载中」。加载中会永远转。永远转，老师会刷新。刷新如果还带着错误的 token 状态，会转得更久。更久之后，他会认为智链不稳定。不稳定的印象，立项 90.00 盖不住。

我协助联调，不把接口变更当成自己的决策。变更来了，同步到类型、到请求函数、到页面文案。三处漏一处，就会出现「一半新一半旧」。一半新一半旧的页面很难查。查的时候日志说新的，屏幕说旧的。屏幕是老师看见的那一份。那一份优先。

热更新和整包各干一件事

Vite 热更新适合改筛选回显、改一列宽度、改一句空状态。不适合当验收。验收用整包。整包能暴露：某个只在热替换后存在的状态、某个没写进依赖数组的请求、某个开发代理掩盖的跨域。开发代理在本机很友善。友善的东西不要进结论。结论以官网环境能复现的为准。官网是 https://ilink.bupt.edu.cn/ 。

演示前整包重来一次，我给自己写成检查项。检查项很烦。烦的代价低于演示中途白页。白页在校级平台的演示里没有评委会心一笑。老师会以为自己的数据丢了。数据没丢，页面丢了。页面丢了，责任在前端。前端是我这边。

React 的习惯会让我想先画故事书。Vue 的仓库如果没有这套，就不要为了自己的习惯引入。引入新工具解决旧问题之前，先看仓库已有的组件怎么写列表。已有的写法能解决，就不新开一套。新开一套会让后来的实习生不知道该抄哪边。不知道该抄哪边，筛选又会回到白页。

跟仓库，不跟偏好

我收到的限制来自两套前端并存：智链跟 Vue3，TextGuard 跟 React。实习生在校级平台里写组件、状态、请求，把空和错画完，就算这一层的活。活做完，也不把智链写成我的产品。产品是中心的。我只保证自己没把另一套栈的习惯带进来，把列表页写裂。

和 TextGuard 的 React 分开

智链用 Vue3，TextGuard 用 React。仓库有什么跟什么，lint 和目录习惯不要互套。我在智链只动页面、状态、请求和筛选，不把检测平台的组件抄过来「复用」。抄过去两边都会脏。演示前仍要冷启动一次 Vite，热更新里活着的状态，老师刷新之后没有。