一个现代化的跨平台网站快速访问工具
- 🚀 快速访问 - 一键访问常用网站，告别繁琐的浏览器标签管理
- 🎨 现代化界面 - 基于 Tailwind CSS 的精美 UI 设计，提供流畅的用户体验
- 🔖 智能缓存 - 自动记住上次访问的网站，重启后无缝恢复
- 📝 网站管理 - 轻松添加、编辑、删除和拖拽排序你的网站列表
- 🌐 内嵌浏览 - 使用 WebView 技术，无需切换窗口即可浏览网站
- 💾 本地存储 - 所有数据本地保存，保护隐私安全
- 🔧 内存优化 - 内置内存监控工具，确保应用流畅运行
- 🖥️ 跨平台支持 - 支持 macOS、Windows 和 Linux
┌─────────────────────────────────────────────┐
│ QuickView ⚫ 🟡 🟢 │
├──────┬──────────────────────────────────────┤
│ 🤖 │ https://chat.openai.com │
│ 🐙 │ ───────────────────────────────── │
│ ▲ │ │
│ 🎨 │ [WebView Content Area] │
│ │ │
│ + │ │
└──────┴──────────────────────────────────────┘
- 前端框架: Vue 3 (Composition API +
<script setup>) - 桌面框架: Electron 38
- 开发语言: TypeScript
- 构建工具: Vite 7
- 样式方案: Tailwind CSS 4
- 包管理器: pnpm
- Node.js >= 18
- pnpm (推荐) 或 npm
git clone https://github.com/WD-CHINA/QuickView.git
cd QuickView# 使用 pnpm (推荐)
pnpm install
# 或使用 npm
npm install# 使用 pnpm
pnpm dev
# 或使用 npm
npm run dev应用将在开发模式下启动，支持热重载。
- 开发者工具: 在应用中按
Cmd+Option+I(macOS) 或Ctrl+Shift+I(Windows/Linux) - 内存监控: 在控制台输入
memoryMonitor.printReport()查看内存使用情况
# 自动生成应用图标
pnpm run generate-icon# 完整构建（包含图标生成）
pnpm build
# 构建后的文件将位于 release/ 目录项目使用语义化版本规范：主版本号.次版本号.修订号
# 修订版本 (1.0.4 → 1.0.5) - 用于 bug 修复
pnpm run release:patch
# 次版本 (1.0.4 → 1.1.0) - 用于新功能
pnpm run release:minor
# 主版本 (1.0.4 → 2.0.0) - 用于重大更新
pnpm run release:major
# 快捷发布（默认为 patch）
pnpm release发布命令会自动执行以下操作：
- 增加版本号
- 生成应用图标
- 编译 TypeScript
- 构建前端资源
- 打包 Electron 应用
详细说明请参阅 VERSION.md
QuickView/
├── electron/ # Electron 主进程和预加载脚本
│ ├── main.ts # 主进程入口
│ └── preload.ts # 预加载脚本
├── src/ # Vue 应用源码
│ ├── components/ # Vue 组件
│ │ ├── Sidebar.vue # 侧边栏
│ │ ├── Toolbar.vue # 工具栏
│ │ ├── WebsiteForm.vue # 网站表单
│ │ ├── WebsiteItem.vue # 网站列表项
│ │ └── WebViewInstance.vue # WebView 实例
│ ├── types/ # TypeScript 类型定义
│ │ └── website.ts # 网站数据类型
│ ├── utils/ # 工具函数
│ │ └── memoryMonitor.ts # 内存监控工具
│ ├── App.vue # 根组件
│ └── main.ts # Vue 应用入口
├── docs/ # 项目文档
│ ├── CACHE_FEATURE.md # 缓存功能说明
│ ├── ERROR_HANDLING.md # 错误处理说明
│ ├── MEMORY_FIXES_SUMMARY.md # 内存修复总结
│ └── MEMORY_MANAGEMENT.md # 内存管理指南
├── scripts/ # 构建脚本
│ ├── bump-version.js # 版本号管理
│ ├── convert-icon.js # 图标转换
│ └── generate-icon.js # 图标生成
├── public/ # 静态资源
├── dist/ # 构建产物 (前端)
├── dist-electron/ # 构建产物 (Electron)
├── release/ # 打包后的应用
├── package.json # 项目配置
├── vite.config.ts # Vite 配置
├── tailwind.config.ts # Tailwind 配置
├── tsconfig.json # TypeScript 配置
└── electron-builder.json5 # Electron Builder 配置
- 添加网站: 点击侧边栏底部的
+按钮 - 编辑网站: 悬停在网站上，点击铅笔图标
- 删除网站: 悬停在网站上，点击垃圾桶图标
- 拖拽排序: 长按拖动网站图标进行排序
- 自动保存上次访问的网站 URL
- 应用重启后自动恢复到上次的浏览位置
- 删除当前网站时智能切换到其他网站
详细说明请参阅 docs/CACHE_FEATURE.md
应用内置内存监控工具，在开发环境下自动启动：
// 在浏览器控制台中使用
memoryMonitor.getCurrentMemory() // 查看当前内存使用
memoryMonitor.printReport() // 打印完整报告
memoryMonitor.checkForLeaks() // 检查内存泄漏详细说明请参阅 docs/MEMORY_MANAGEMENT.md
- 编辑器: VS Code
- 插件:
- Volar - Vue 3 语言支持
- TypeScript Vue Plugin
创建 .env 文件（可选）：
# 开发服务器端口
VITE_DEV_SERVER_PORT=5173欢迎提交 Issue 和 Pull Request！
- Fork 本仓库
- 创建功能分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 开启 Pull Request
- 使用 TypeScript 编写代码
- 遵循项目现有的代码风格
- 添加必要的注释和文档
- 确保代码通过 TypeScript 检查
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情
- Electron - 跨平台桌面应用框架
- Vue.js - 渐进式 JavaScript 框架
- Vite - 下一代前端构建工具
- Tailwind CSS - 实用优先的 CSS 框架
如果您有任何问题或建议，请通过以下方式联系：
- 提交 Issue