Migrate old JS implementation to Vue #2
Conversation
- 全局动画优化：统一使用cubic-bezier(0.4,0,0.2,1)缓动函数，提升交互流畅度 - 注释中文化：完成主要文件的中文注释添加，提高代码可维护性 - 导航样式优化：当前页面高亮显示，取消主页按钮特殊样式 - 标题颜色统一：所有页面标题使用一致的渐变色 - 团队卡片布局：优化成员介绍框，支持2x2图标布局 - 内容整合：移除独立使命区块，合并到Hero区块 - 布局优化：减小区块间距，提升页面紧凑度 - 更换图标：使用留学主题的扁平化SVG图标替换Vue.js logo
- 新增赞助与服务页面 (SupportView.vue) - 实现无偿赞助模块，包含微信赞助和其他支持方式 - 添加赞助者权益说明（鸣谢名单、优先功能请求、预览版体验） - 集成鸣谢名单展示（核心成员和其他贡献者） - 实现服务目录展示，支持标签筛选和搜索功能 - 添加侧边导航栏，自动跟踪滚动位置 - 引入服务和鸣谢数据的 JSON 化管理 - 数据文件管理 - 新增 /public/data/services.json：22 项服务数据 - 新增 /public/data/thanks.json：贡献者鸣谢数据 - 新增占位图片支持 (wxpay-placeholder.svg) - 全站布局优化 - 响应式容器宽度：clamp(940px, 50vw, 2048px) - 宽屏设备优化：内容宽度限制为屏幕 50%，最大 2048px - 4K/2160p 分辨率适配 - 主题样式调整 - 简化亮色主题背景为纯色 (#f1f5f9) - 统一全站容器响应式规则 - 路由与导航 - 新增 /support 路由配置 - 顶部导航栏添加「赞助与服务」入口 - 主页特色板块添加「赞助与服务」卡片
There was a problem hiding this comment.
Pull Request Overview
This PR migrates the project from a vanilla JavaScript implementation to Vue.js, modernizing the codebase with better component organization and state management. The migration removes legacy Cloudflare Worker files and standalone HTML pages, replacing them with Vue single-file components and a proper routing system.
Key Changes:
- Migrated to Vue 3 with Vue Router for SPA architecture
- Created 7 new Vue view components replacing standalone HTML pages
- Added Vite configuration for modern build tooling
- Enhanced CSS with improved transitions and responsive layouts
- Removed legacy Cloudflare Worker implementations
- Added new markdown content files for weekly updates and study wire
Reviewed Changes
Copilot reviewed 35 out of 60 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/App.vue | Root Vue component with navigation and page transition animations |
| src/main.js | Application entry point mounting Vue app with router |
| src/router/index.js | Vue Router configuration defining all application routes |
| src/views/*.vue | Seven view components (RealHomeView, WeeklyUpdateView, StudyWireView, SupportView, TrackView, ContactView, AboutView) |
| src/assets/css/common.css | Updated global styles with improved transitions and responsive design |
| vite.config.js | Vite build configuration with Vue plugin and path aliases |
| workers/* | Removed legacy Cloudflare Worker files (contact.js, studywire-push.js, wrangler.toml) |
| weekly_update/index.html, studywire/index.html | Removed standalone HTML pages replaced by Vue components |
| public/weekly_update/storage/*.md | Added 7 new weekly update markdown files |
| public/studywire/storage/*.md | Added 7 new study wire markdown files |
| public/favicon.svg | Added new SVG favicon with globe and plane design |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| watch(selectedTags, (newTags, oldTags) => { | ||
| const normalized = newTags.map(tag => tag.trim()) | ||
| // BASE CASE: Only update if actually different | ||
| if (JSON.stringify(normalized) !== JSON.stringify(oldTags)) { | ||
| selectedTags.value = normalized | ||
| } | ||
| // Recursion stops when normalized === oldTags | ||
| }) |
There was a problem hiding this comment.
The watch function contains a recursive pattern that modifies selectedTags.value within its own watcher, which will trigger the watcher again. The comment mentions 'recursion stops' but the BASE CASE check compares normalized (trimmed newTags) against oldTags (previous value), not against the current state. This could cause unnecessary re-renders or infinite loops if tags already have inconsistent whitespace. Consider using { deep: true } with proper normalization on input instead, or use a computed property for normalized tags.
| <div v-if="error" class="loading-indicator"> | ||
| <div style="color: #ff6b6b;"> | ||
| <p>❌ {{ error }}</p> | ||
| <button @click="location.reload()" style="padding:8px 16px;margin-top:12px;border-radius:6px;border:1px solid #ff6b6b;background:transparent;color:#ff6b6b;cursor:pointer;"> |
There was a problem hiding this comment.
Using location.reload() directly in the template without proper scoping. location is a global object and should be accessed as window.location.reload() for clarity, or better yet, define a method in the script setup: const reloadPage = () => window.location.reload()
| <div v-if="error" class="loading-indicator"> | ||
| <div style="color: #ff6b6b;"> | ||
| <p>❌ {{ error }}</p> | ||
| <button @click="location.reload()" style="padding:8px 16px;margin-top:12px;border-radius:6px;border:1px solid #ff6b6b;background:transparent;color:#ff6b6b;cursor:pointer;"> |
There was a problem hiding this comment.
Using location.reload() directly in the template without proper scoping. location is a global object and should be accessed as window.location.reload() for clarity, or better yet, define a method in the script setup: const reloadPage = () => window.location.reload()
zhenmunse
temporarily deployed
to
github-pages
GitHub Actions
Inactive
After test sufficiently, the Vue version is much better than the old version. The new setup brings clearer component organization, better state handling, and improved scalability for future features.