refactor: desktop modal to toast

[igugyj]

变更要点

当前加群引导弹窗（Modal）在功能上已经足够完善，视觉与文案清晰，能有效传递社群信息。但在桌面端实际使用中，每次打开页面都会强制弹出，且用户只能通过点击“关闭”或“确定”来消除，这带来了几个体验痛点：

• 打断操作流：用户在浏览、编辑或阅读时，弹窗突然出现，强制中断当前任务，尤其是在高频切换页面或执行批量操作时，突然出现需要强制操作的弹窗会积累明显的挫败感。
• 干扰非目标用户：部分老用户或已加群用户，仍然被迫每次处理该弹窗，提醒价值趋近于零，反而变成了干扰。
• 桌面端特性未充分利用：桌面端屏幕较大、用户多任务并行，采用强阻断式弹窗不如采用更轻量的非模态提示（如通知栏、侧边浮标）来得自然。

我们的核心目标是 “提醒加群”，而非“强制关注”。因此，本次改动在不削弱提醒效果的前提下，将交互方式从“强制打断”调整为“尊重用户节奏”，尤其针对桌面端场景优化。

---

WelcomeModal → WelcomeNotice

将 WelcomeModal.vue 重构为 WelcomeNotice.vue，组件内部通过 UA 实时判断设备类型，自动渲染移动端全屏弹窗或桌面端右下角通知条。

• 重命名并重写 .vitepress/theme/components/WelcomeNotice.vue
• 修改 .vitepress/theme/components/HomeExitDetector.vue — 配合单组件接口简化
• 删除 .vitepress/theme/components/WelcomeModal.vue
• 修改 .github\workflows\ci.yml 添加手动运行按钮

---

行为变化

项目	重构前	重构后
设备识别	\	组件内部 open() 时实时检测，自动适配布局
桌面端	原 WelcomeModal	新增桌面端右下角 toast，含折叠/展开、10s 自动关闭
桌面端图片等待	\	与移动端一致，图片加载完才显示

---

测试步骤

准备工作

每次测试前清理缓存：

sessionStorage.clear()

然后回到首页，再点击任意非首页链接触发通知。

1. 桌面端

1. pnpm dev 启动开发服务器
2. 访问首页 /
3. sessionStorage.clear()
4. 点击任意非首页链接
5. 预期：右下角弹出 380px 宽的 toast 卡片，含折叠问候条
6. 点击问候条展开，验证图片、标题、描述、群号
7. 底部有分隔线 + "点击加群" / "稍后再说" 两按钮
8. 鼠标移出卡片，10 秒后自动关闭
9. 鼠标悬停卡片，倒计时重置
10. Escape 键关闭

2. 移动端（切换标识符测试）

1. DevTools 切换移动端设备模拟（如 iPhone 12）
2. 刷新首页 → sessionStorage.clear() → 离开首页
3. 预期：全屏遮罩 + 居中弹窗，含 × 关闭按钮
4. 点击遮罩或 × 关闭
5. 验证 body 滚动锁定

3. 回归

1. 多次触发，通知仅首次弹出
2. ci pnpm build 通过 https://github.com/igugyj/cuit-guide/actions/runs/29349448504

---

UI变化

桌面端

折叠态

展开态

移动端

保持不变

---

其实我应该重新fork一下再进行变更的，下次一定。