本地化网站管理平台
一个纯前端的网站集合管理工具，支持本地数据存储、完整的 CRUD 操作，可作为 Chrome 扩展使用。
在线体验：https://younglina.wang/tool-links/
功能特性
核心功能
- 网站管理：完整的增删改查功能
- 图片上传：支持上传网站图标（存储到 IndexedDB ）
- APIKeys 管理：支持多个 APIKeys ，脱敏显示，一键复制
- 分类系统：支持自定义分类（带图标选择）
- 标签系统：支持自定义标签，多维度筛选
- 搜索功能：支持按网站名称、描述、URL 搜索
- 本地存储：所有数据存储在浏览器 IndexedDB 中，无需服务器
- 导入导出：支持 JSON 格式的数据导入导出
技术栈
- 框架：Vue 3 (Composition API +
<script setup>) - 语言：TypeScript （宽松模式）
- 构建工具：Vite
- 样式：Tailwind CSS
- 数据库：Dexie.js (IndexedDB 封装)
- 图标：Material Design Icons
- 状态管理：Pinia
快速开始
安装依赖
npm install 开发模式
npm run dev 构建 Chrome 扩展
# Windows pack.bat # Linux/Mac ./pack.sh 构建完成后，dist 目录包含完整的 Chrome 扩展文件。
安装 Chrome 扩展
- 打开 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 打包脚本 使用说明
添加网站
- 点击右上角"添加"下拉菜单，选择"添加网站"
- 填写网站信息：
- 名称（必填）
- URL （必填）
- 图标（推荐 128-256px ，<500KB ）
- 描述
- 分类（必填）
- 标签（多选）
- APIKeys （可选，可添加多个）
- 点击"添加"保存
管理网站
- 点击网站卡片查看详情
- 详情中可以查看 APIKeys （脱敏显示）
- 支持复制完整 APIKey
- 支持编辑和删除网站
筛选网站
- 使用左侧分类导航筛选
- 使用标签复选框多选筛选
- 使用顶部搜索栏搜索
导入导出数据
点击右上角"添加"下拉菜单：
- 导出数据：下载当前所有数据的 JSON 文件
- 导入数据：选择 JSON 文件导入，支持合并或替换模式
数据存储
所有数据存储在浏览器的 IndexedDB 中：
SitesDB数据库名- 包含 3 个表：websites, categories, tags
- 数据只在本地，不会上传到任何服务器
注意事项
- 图片大小：建议上传的图标小于 500KB ，推荐 128-256px
- APIKey 安全：APIKeys 存储在本地 IndexedDB 中，请妥善保管浏览器数据
- 数据备份：定期导出数据作为备份
- 浏览器兼容性：支持现代浏览器（ Chrome, Firefox, Safari, Edge ）
许可证
MIT License
目前尚无回复
Select Language