cqupt重庆邮电大学HUB工作室官网_系统开发案例-程序员客栈

技术信息

语言技术
CSS、JavaScript、Vue、HTTPS、前端系统类型
Web行业分类
内容平台、企业服务

作品详情

行业场景

HUB 工作室需要通过官方网站集中展示团队介绍、项目成果、成长体系和成员去向，帮助访客了解工作室并获取联系方式。原官网以桌面端翻页式浏览为主，在手机等设备上需要重新设计布局与交互，以改善移动端的内容阅读和操作体验。

功能介绍

双轨渲染：按设备能力自动分流，桌面端保持原有翻页式 deck，移动端进入独立长页，两套渲染互不干扰。

• 首页：主视觉全屏铺底，装饰元素按分时序列依次弹入，形成与桌面端一致的品牌动效语言。

• 项目展示：26 个作品以双行走马灯呈现，支持触摸暂停与渐隐遮罩，点击弹出大图与项目外链；4 个业务方向卡浮动展示并支持展开详情。

• 成长体系：成长路径采用垂直轨迹线、节点与火箭动画，滚动触发分段进场；HUB 培养特色与社区成员类型组成左右翻页组件；求职增值服务以纵向圆卡加箭头串联。

• 成员去向：7 位成员沿水平圆弧排列，支持拖拽跟手、按速度惯性吸附、箭头与点击切换，中间成员高亮并联动详情卡。

• 联系我们：四层同心圆加三个社交图标轨道运动，火箭切入内圈绕行；支持邮箱一键复制、小红书外链、微信二维码弹层。

• 全站配备吸顶导航、滚动监听高亮当前区块、深链定位，并对系统减弱动效偏好做降级处理。

项目实现

技术栈：Vue 3、vue-router 5（hash 模式）、GSAP 3 与 ScrollTrigger、Tailwind CSS 4、Vite 8；验证环节使用 puppeteer-core 驱动 Edge 无头浏览器。

架构设计：在 App.vue 顶层以设备判定做双轨分支，桌面代码零改动；抽取 useIsMobile 作为全项目唯一的设备检测来源，判定条件为「触屏指针或视口不超过 1024px」，并做 200ms 防抖避免旋转屏幕时抖动；MobileShell 作为移动端根组件，负责导航、区块锚点与滚动监听；数据层完全复用桌面端资产扫描、项目外链与成员数据，不新增重复数据源。

我负责的工作：完成移动端三大硬伤的诊断与双轨方案设计（含与单轨缩放方案的对比论证）；独立开发全部移动端代码，含 7 个区块组件与 2 个组合式函数共 1,387 行；完成 V1.0 至 V1.3.2 共六轮迭代，其中三轮基于真实使用反馈重构交互，例如将离散切换改为连续拖拽加惯性吸附、修复循环切换后头像丢失的索引越界问题、将桌宠装饰改到不遮挡内容的层级；建立三档视口的自动化回归脚本，并完成局域网真机联调。

• 成果：桌面、手机、平板三档视口均 0 报错、0 横向滚动；构建产物 JS 321.72 kB（gzip 116.41 kB）、CSS 59.45 kB（gzip 11.82 kB）；桌面端功能与动效零回归。