一个功能完整的静态个人书签管理系统，采用苹果设计风格，支持三级分类、标签筛选、数据导入导出等功能。
- 完整的三级分类结构：一级分类 → 二级分类 → 三级分类
- 动态分类管理：可随时添加新的分类和子分类
- 分类树状显示：清晰的层级结构展示
- 书签计数：显示每个分类下的书签数量
- 分类筛选：点击分类快速筛选相关书签
- 多标签支持：每个书签最多支持6个标签
- 标签筛选：支持多选标签进行组合筛选
- 智能标签管理：自动维护标签库，新标签自动添加
- 标签可视化：美观的标签显示和交互效果
- 实时搜索：支持按书签名称、描述、URL、标签进行搜索
- 多种排序方式：
- 按名称排序（字母顺序）
- 按添加时间排序（最新优先）
- 按分类排序（分类名称顺序）
- 即时结果：搜索结果实时更新
- JSON格式导出/导入：
- 完整的数据结构保存
- 包含书签、分类、标签、主题等所有信息
- 支持数据备份和恢复
- HTML格式导出/导入：
- 兼容浏览器收藏夹标准格式
- 支持Chrome、Firefox、Safari等主流浏览器
- 可与现有浏览器书签互通
- ✅ 圆角设计：所有UI元素采用圆润的边角设计
- ✅ 阴影效果：多层次阴影营造立体感和深度
- ✅ 磨砂玻璃效果：真实的backdrop-blur毛玻璃质感
- ✅ 渐变色设计：丰富的渐变色彩搭配
- ✅ 半透明效果：精心调配的透明度层次
- ✅ 流畅动画：平滑的过渡和交互动画
-
浅色主题（Light）
- 清新简洁的浅色调
- 高对比度文字确保可读性
- 适合日间使用
-
暗色主题（Dark）
- 优雅的深色模式
- 护眼的暗色背景
- 适合夜间使用
-
紫红渐变主题（Purple）
- 梦幻的紫红色渐变背景
- 温暖的色彩搭配
- 个性化视觉体验
-
青绿渐变主题（Green）
- 清新的青绿色渐变背景
- 自然的色彩感受
- 舒缓的视觉效果
- 个性化定制：创建专属的个人主题
- 颜色自定义：自由选择主色调和次色调
- 背景类型：支持渐变和纯色两种背景模式
- 主题保存：自定义主题永久保存
- 三级文字层次：主要文字、次要文字、辅助文字
- 高对比度设计：确保在所有主题下文字清晰可见
- 文字阴影增强：微妙阴影提升复杂背景下的可读性
- 智能颜色适配：根据背景自动调整文字颜色
- 前端框架：原生HTML5 + CSS3 + JavaScript ES6+
- CSS框架：Tailwind CSS（CDN引入）
- 数据存储：LocalStorage本地存储
- 构建工具：无需构建，纯静态文件
📦 bookmark-manager/
├── 📄 index.html # 主页面文件
├── 📄 styles.css # 样式文件
├── 📄 script.js # 主要功能脚本
└── 📄 README.md # 项目说明文档
- 响应式设计：完美适配桌面和移动设备
- 无依赖部署：纯静态文件，可直接部署到任何Web服务器
- 本地数据存储：使用LocalStorage，数据安全可靠
- 模块化代码：清晰的代码结构，易于维护和扩展
- 现代Web浏览器（Chrome 80+、Firefox 75+、Safari 13+、Edge 80+）
- 本地Web服务器（可选，用于本地开发）
- 下载所有文件到本地目录
- 双击
index.html文件在浏览器中打开 - 开始使用书签管理系统
# 使用Python启动本地服务器
python -m http.server 8080
# 或使用Node.js
npx serve .
# 或使用PHP
php -S localhost:8080然后在浏览器中访问 http://localhost:8080
- 系统会自动创建示例数据（包含默认分类和示例书签）
- 可以立即开始添加自己的书签
- 尝试不同的主题找到最适合的视觉风格
- 点击右上角"+ 添加书签"按钮
- 填写书签信息：
- 名称：书签显示名称（必填）
- URL：网站地址（必填）
- 描述：书签描述（可选）
- 分类：选择所属分类（可选）
- 标签：添加相关标签，最多6个（可选）
- 点击"保存"完成添加
- 在左侧"分类管理"面板中点击"+"按钮
- 输入分类名称创建一级分类
- 点击分类旁边的"+"按钮创建子分类
- 支持三级分类结构
- 在左侧"标签筛选"面板中点击标签
- 支持多选标签进行组合筛选
- 再次点击标签取消筛选
- 在顶部搜索框中输入关键词
- 支持搜索书签名称、描述、URL、标签
- 搜索结果实时更新
- 点击顶部导航栏的主题按钮
- 选择预设主题或创建自定义主题
- 主题设置自动保存
- 点击顶部导航栏的导入导出按钮
- 导出功能：
- JSON格式：完整数据备份
- HTML格式：浏览器兼容格式
- 导入功能：
- 支持从JSON文件恢复数据
- 支持从浏览器导出的HTML文件导入
- 编辑书签：点击书签卡片上的编辑按钮
- 删除书签：点击书签卡片上的删除按钮
- 排序书签：使用右上角的排序下拉菜单
系统支持创建完全自定义的主题：
-
颜色配置：
- 主色调：定义主要UI元素颜色
- 次色调：定义辅助UI元素颜色
-
背景类型：
- 渐变：使用主色调和次色调创建渐变背景
- 纯色：使用主色调作为纯色背景
-
保存和应用：
- 自定义主题会自动保存到本地
- 可随时切换回自定义主题
系统使用以下JSON数据结构：
{
"bookmarks": [
{
"id": "unique-id",
"name": "书签名称",
"url": "https://example.com",
"description": "书签描述",
"categoryId": "分类ID",
"tags": ["标签1", "标签2"],
"dateAdded": "2024-01-01T00:00:00.000Z",
"favicon": "https://example.com/favicon.ico"
}
],
"categories": [
{
"id": "unique-id",
"name": "分类名称",
"level": 1,
"parentId": null,
"children": []
}
],
"tags": ["标签1", "标签2", "标签3"],
"currentTheme": "light",
"customThemes": []
}- 直观的界面设计：符合现代用户使用习惯
- 流畅的交互动画：提升操作体验
- 响应式布局：完美适配各种设备
- 键盘快捷键支持：提高操作效率
- 本地存储：数据完全存储在本地，保护隐私
- 自动保存：所有操作自动保存，无需手动保存
- 数据备份：支持完整数据导出备份
- 数据恢复：支持从备份文件恢复数据
- 浏览器兼容：支持所有现代浏览器
- 标准格式：导出格式兼容主流浏览器
- 跨平台：支持Windows、macOS、Linux等操作系统
- 移动设备：完美支持手机和平板设备
- ✅ 完整的书签管理功能
- ✅ 三级分类系统
- ✅ 标签筛选功能
- ✅ 四种预设主题 + 自定义主题
- ✅ 导入导出功能
- ✅ 苹果设计风格界面
- ✅ 响应式设计
- ✅ 文字可读性优化
- 🔄 书签图标自动获取优化
- 🔄 批量操作功能
- 🔄 书签分享功能
- 🔄 快捷键支持
- 🔄 更多主题选项
- 🔄 数据同步功能
欢迎提交Issue和Pull Request来改进这个项目！
- Fork本项目
- 克隆到本地：
git clone [your-fork-url] - 启动本地服务器进行开发
- 提交更改并创建Pull Request
- 使用ES6+语法
- 保持代码简洁和可读性
- 添加必要的注释
- 遵循现有的代码风格
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情
- Tailwind CSS - 优秀的CSS框架
- Heroicons - 美观的图标库
- Apple Design Guidelines - 设计灵感来源
如有问题或建议，欢迎通过以下方式联系：
- 提交 GitHub Issue
- 发送邮件至：your-email@example.com
享受使用这个书签管理系统！ 🎉