QzoneArchive 的 Vue 3 前端——界面渲染和用户交互
前端技术栈
| 技术 | 作用 |
|---|---|
| Vue 3 | 前端框架，使用 Composition API |
| TypeScript | 类型安全 |
| PrimeVue 4 | UI 组件库（表格、对话框、进度条等） |
| Pinia | 状态管理（归档进度、登录状态等） |
| Vite | 构建工具 |
前端的边界
前端在 Tauri 的 WebView 里运行，不能直接访问：
- 本地文件系统（读写必须通过 Rust 后端）
- 网络层（HTTP 请求由 Rust 后端发起）
- Cookie（登录凭证始终在 Rust 进程内存里）
- SQLite（数据库操作必须通过 Rust 后端）
前端能做的只有：渲染界面、管理 UI 状态、通过 Tauri IPC 调用后端暴露的受限 API。
主要页面和功能
前端大致包含以下页面/视图：
- 登录页：二维码扫码界面 / WebView 网页登录窗口
- 归档任务页：开始/暂停/恢复归档、进度显示、限流倒计时
- 动态列表页：按分类展示已归档动态
- 动态详情页：单条动态的完整展示（正文、配图、评论、点赞）
- 媒体时光轴页：按年份排列的图片视频视图
- 互动排行榜页：用户互动次数排名
- 导出页：选择导出范围和输出目录
PrimeVue 的选择
为什么选 PrimeVue 而不是 Element Plus 或 Ant Design？
- PrimeVue 的组件覆盖更全（表格、对话框、文件上传、进度条等）
- 主题系统灵活，适合个人定制
- Tauri 应用不需要考虑 SSR（服务端渲染），PrimeVue 非常适合纯 CSR 场景
构建和开发
# 安装依赖
npm install
# 开发模式（前端热重载 + Rust 后端调试）
npm run tauri dev
# 构建桌面端（各平台）
npm run tauri:build:windows
npm run tauri:build:macos开发模式下，前端代码改了会自动热更新，后端 Rust 代码改了会重新编译。Tauri dev 命令会同时处理两边。