- 多文件夹组织 - 创建文件夹分类管理书签
- 标签系统 - 使用标签快速筛选和分类
- 双视图模式 - 卡片视图和列表视图自由切换
- 智能搜索 - 支持标题、URL、描述全文搜索
- 快速访问 - 一键打开书签，支持多浏览器选择
- 访问统计 - 记录访问次数和最后访问时间
- 现代化 UI - 基于 Element Plus 的精美界面
- 响应式布局 - 适配不同屏幕尺寸
- 深色主题 - 支持深色/浅色主题切换
- 自定义颜色 - 书签卡片支持自定义颜色
- Favicon 自动获取 - 自动获取网站图标，加载失败时显示默认图标
- 实时统计 - 总书签数、总文件夹数、总标签数
- 访问分析 - 按文件夹统计书签分布
- 可视化图表 - 使用 ECharts 展示数据
- 浏览器配置 - 配置默认浏览器和备用浏览器
- 语言切换 - 支持中文和英文界面
- 主题设置 - 一键切换深色/浅色主题
- 图标获取 - 自动获取网站图标开关
- 数据管理 - 一键清空所有数据
- Content Security Policy (CSP) - 配置了严格的安全策略
- 上下文隔离 - 启用 Electron 上下文隔离
- 禁用 Node Integration - 渲染进程禁用 Node.js 集成
- Node.js: v18 或更高版本
- npm: v8 或更高版本
- 操作系统: Windows 10+, macOS 10.15+, Linux
# 克隆仓库
git clone https://gitcode.com/EthanCheung/LinkCollections
cd LinkCollections
# 安装依赖
npm install# 启动 Electron 开发服务器
npm run dev
# 仅启动 Web 开发服务器
npm run dev:web# 构建生产版本
npm run build
# 构建 Windows 安装包
npm run build:win构建产物将输出到 release/1.0.0/ 目录。
- Electron - 跨平台桌面应用框架
- Vue 3 - 渐进式 JavaScript 框架
- TypeScript - JavaScript 的超集
- Vite - 新一代前端构建工具
- Element Plus - Vue 3 组件库
- UnoCSS - 即时原子化 CSS 引擎
- Heroicons - 优美的 SVG 图标库
- Pinia - Vue 状态管理库
- ECharts - 数据可视化图表库
- Node-vibrant - 提取图片主要颜色
- Lodash-es - JavaScript 实用工具库
- UUID - 生成唯一标识符
- vue-router - Vue 官方路由
LinkCollections/
├── electron/ # Electron 主进程
│ ├── main.ts # 主进程入口
│ ├── preload.ts # 预加载脚本
│ ├── utils/ # 工具函数
│ │ └── storage.ts # 数据存储
│ └── ipc/ # IPC 通信处理器
│ ├── bookmarks.ts # 书签相关
│ ├── folders.ts # 文件夹相关
│ ├── tags.ts # 标签相关
│ └── settings.ts # 设置相关
├── src/
│ └── renderer/ # Vue 3 渲染进程
│ ├── main.ts # Vue 入口
│ ├── App.vue # 根组件
│ ├── components/ # Vue 组件
│ │ ├── Bookmark/ # 书签相关组件
│ │ ├── Header/ # 头部组件
│ │ ├── Search/ # 搜索组件
│ │ ├── Sidebar/ # 侧边栏组件
│ │ ├── Modal/ # 模态框组件
│ │ ├── Stats/ # 统计组件
│ │ └── Settings/ # 设置组件
│ ├── stores/ # Pinia 状态管理
│ │ ├── bookmark.ts
│ │ ├── folder.ts
│ │ ├── tag.ts
│ │ ├── search.ts
│ │ └── ui.ts
│ ├── utils/ # 工具函数
│ │ ├── favicon.ts
│ │ └── highlight.ts
│ └── types/ # TypeScript 类型
├── data/ # JSON 数据文件
│ ├── bookmarks.json
│ ├── folders.json
│ ├── tags.json
│ └── settings.json
├── public/ # 静态资源
│ └── icons/ # 应用图标
├── package.json
├── electron.vite.config.ts
├── vite.config.ts
├── tsconfig.json
└── README.md
| 命令 | 描述 |
|---|---|
npm run dev |
启动 Electron 开发服务器 |
npm run dev:web |
启动 Web 开发服务器 |
npm run build |
构建生产版本 |
npm run build:win |
构建 Windows 安装包 |
npm run build:web |
构建 Web 版本 |
npm run preview |
预览构建产物 |
npm run type-check |
运行 TypeScript 类型检查 |
npm run lint |
运行 ESLint 检查 |
npm run format |
使用 Prettier 格式化代码 |
- 项目初始化和基础架构
- 书签数据层开发
- 文件夹管理系统
- 标签系统
- 卡片视图和列表视图
- 搜索功能
- 统计分析
- 设置管理
- 深色主题
- CSP 安全策略
- Favicon 自动获取
- 单元测试
- E2E 测试
- 国际化 (i18n)
- 更多主题选项
- 书签导入/导出
- 云端同步
- 浏览器插件
- 键盘快捷键
- 批量操作
- 书签分组
- 回收站功能
欢迎贡献代码、报告问题或提出建议！
- Fork 本仓库
- 创建你的特性分支 (
git checkout -b feature/AmazingFeature) - 提交你的更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 开启一个 Pull Request
- 遵循 ESLint 配置
- 使用 Prettier 格式化代码
- 为新功能添加类型定义
- 编写有意义的提交信息
- 更新相关文档
本项目采用 MIT 许可证 - 详见 LICENSE 文件
感谢所有为这个项目做出贡献的开发者！
本项目使用了以下开源项目：
- 作者: Ethan Cheung
- 邮箱: nirvana.zq@petalmail.com
- 项目地址: https://gitcode.com/EthanCheung/LinkCollections
- 问题反馈: Issues
如果这个项目对你有帮助，请给它一个 ⭐️
Made with ❤️ by Ethan Cheung
支付宝 |
感谢您的支持！ 💜
（微信打赏功能即将上线...）