海智官网产品系统Vibe Coding

广东海洋大学 · 数学与计算机学院
代码为舟，智汇成海
海智是一支由冼远清副教授指导的软件开发团队——专注 Web 应用、移动端与人工智能，也认真对待每一次团建与每一顿好饭。

1.模块:首页 关于海智 招新方向 团队成员 指导老师 团队氛围 获得奖项 加入海智
2.主要功能：团队、指导老师、成员介绍，展示奖项、成就，收集报名信息至队长（本人）QQ邮箱

我主要负责写产品文档给AI，对话提需求，不断测试修改调试，最后部署服务器
Vue 3 + Vite 工程。由原来的单文件页面 `UI/index.html`（5.2 MB，图片与音频全部 base64 内联）重构而来，视觉与交互保持一致，并接入了真实的报名提交接口。
几个设计取舍
样式没拆进 SFC，而是保留为全局 CSS。
原 CSS 有大量跨组件的后代选择器与 `body.xxx` 状态类（`body.loaded .canvas-layer`、
`body.motion-open .award-track`…），拆进 `` 会需要 `:deep()` 与更长的
``，反而更难维护。这里按原注释的边界分成 14 个文件、用 `index.css` 汇总，
**拼接结果与原 `` 逐字节相同**——`tools/migrate-assets.mjs` 里有这条校验。
**没有引 vue-router。
单页 + 锚点导航，没有「路由」可言，装 router 只多一层抽象和一次 history 依赖。
**没有引 Pinia。
跨组件状态不到十个（弹窗开合、动效/音效开关），一个模块级 `reactive` 就是 Vue 3 里最轻的标准做法。
**没有引 axios。
只有 submit 一个接口，`fetch` + `AbortController` 已经够用，少一个运行时依赖。将来接口变多、需要拦截器时，只换 `api/http.js` 一层，组件不受影响。
**头像与二维码改成构建期 glob 打包。
原页面靠「相对路径 + 依次探测 jpg/png/jpeg/webp」在运行时找图，每个不存在的扩展名都会留一条
404。现在用 `import.meta.glob` 收成「文件名 → URL」映射.