一个纯前端的网站集合管理工具，支持本地数据存储、完整的 CRUD 操作，可作为 Chrome 扩展使用。
在线体验：https://younglina.wang/tool-links/
功能特性
核心功能
技术栈
快速开始
安装依赖
npm install
开发模式
npm run dev
访问 http://localhost:3000
构建 Chrome 扩展
# Windows
pack.bat
# Linux/Mac
./pack.sh
构建完成后，dist 目录包含完整的 Chrome 扩展文件。
安装 Chrome 扩展
[ol]
[/ol]
点击扩展图标即可打开工具集。
项目结构
links/
├── src/
│ ├── components/ # 组件
│ │ ├── layouts/ # 布局组件
│ │ │ ├── Header.vue
│ │ │ ├── Sidebar.vue
│ │ │ └── MainContent.vue
│ │ ├── website/ # 网站相关组件
│ │ │ ├── WebsiteCard.vue
│ │ │ ├── WebsiteDetailDrawer.vue
│ │ │ ├── WebsiteForm.vue
│ │ │ ├── ImageUploader.vue
│ │ │ └── ApiKeyInput.vue
│ │ ├── filter/ # 筛选组件
│ │ │ ├── SearchBar.vue
│ │ │ ├── CategoryFilter.vue
│ │ │ └── TagFilter.vue
│ │ └── common/ # 通用组件
│ │ ├── ThemeSwitcher.vue
│ │ ├── CategoryDialog.vue
│ │ └── TagDialog.vue
│ ├── composables/ # 组合式函数
│ │ ├── useDexie.ts
│ │ ├── useWebsites.ts
│ │ ├── useCategories.ts
│ │ ├── useTags.ts
│ │ ├── useImageUpload.ts
│ │ ├── useApiKey.ts
│ │ └── useTheme.ts
│ ├── db/ # 数据库
│ │ ├── index.ts # Dexie 实例
│ │ └── seed.ts # 预置数据
│ ├── stores/ # Pinia 状态管理
│ │ └── app.ts
│ ├── types/ # TypeScript 类型定义
│ │ └── index.ts
│ ├── utils/ # 工具函数
│ │ ├── validators.ts
│ │ ├── formatters.ts
│ │ └── constants.ts
│ └── styles/ # 样式文件
│ ├── main.css
│ └── themes/
│ └── neumorphism.css
├── public/
│ ├── background.js # Chrome 扩展 background script
│ └── tools.png # 扩展图标
├── manifest.json # Chrome 扩展配置
├── vite.config.js # Vite 配置
├── pack.bat # Windows 打包脚本
└── pack.sh # Linux/Mac 打包脚本
使用说明
添加网站
[ol]
填写网站信息：
[/ol]
管理网站
筛选网站
导入导出数据
点击右上角"添加"下拉菜单：
数据存储
所有数据存储在浏览器的 IndexedDB 中：
注意事项
[ol]
[/ol]
许可证
MIT License
源码地址：https://github.com/Younglina/tool-links
