一个纯前端的网站集合管理工具,支持本地数据存储、完整的CRUD操作,可作为 Chrome 扩展使用。
在线体验:younglina.wang/tool-links/
)npm install
npm run dev
访问
# Windows
pack.bat
# Linux/Mac
./pack.sh
构建完成后,dist 目录包含完整的 Chrome 扩展文件。
chrome://extensions/dist 文件夹点击扩展图标即可打开工具集。
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 打包脚本
点击右上角"添加"下拉菜单:
所有数据存储在浏览器的IndexedDB中:
SitesDB 数据库名MIT License
源码地址:github.com/Younglina/t…