不仅支持浏览器插件无缝双向同步，更具备原生应用级的离线访问能力网页自动快照存档以及多维度的热度可视化。

🌟 核心突破与特性

1. 📶 极致的离线体验 (PWA 微型数据库)

  • 断网可用：采用 Service Worker 深度缓存机制，在无网络环境下依然能秒开书签列表。
  • 本地 SQL 级查询：离线状态下，Service Worker 会化身“微型数据库”，支持离线全文搜索多维度排序（按时间访问量）及分类切换，体验与在线无异。
  • 桌面端/移动端安装：支持作为 PWA 独立应用安装到电脑任务栏或手机主屏幕。

2. 📸 网页快照自动归档 (R2 存储)

  • 自动抓取：浏览器插件会在首次访问书签链接时，自动在后台静默截图，并上传至 Cloudflare R2 保存。
  • 防腐烂设计：即使原始网页被删除或改版，你依然可以在书签列表中通过灯箱预览（Lightbox）查看当时的网页快照。
  • 空间管理：支持在后台动态设置快照保留上限（如保留最近 7 张），自动清理过期快照。

3. 🛡️ 极简而安全的鉴权机制

  • Endpoint 登录验证：摒弃繁琐的账号密码，使用 R2 的 Endpoint 地址作为“唯一暗号”进行管理员鉴权。
  • 接口级保护：敏感操作（删除修改系统设置获取日志）在云函数端和前端均被严格保护，未授权访问自动拦截。

4. 🔄 全自动双向同步

  • 插件实时监控：在浏览器新建删除或移动书签，系统后台秒级同步。
  • 层级路径还原：自动识别并过滤浏览器系统冗余目录（如“书签栏”“其他书签”），完美还原真实文件夹路径。
  • 历史记录打通：插件监听浏览器历史，直接在地址栏访问书签网页，也能精准增加统计访问次数。

5. 📊 数据可视化与高效管理

  • 动态边框热度：根据访问频次计算热度值（0~1），高频使用的书签边框会泛起红光，一目了然。
  • 思维导图生成：一键将成百上千的书签库转化为可缩放可折叠的全局思维导图。
  • 智能懒加载补全：无图标书签会在被访问时自动通过 Google Favicon 服务抓取，并持久化为 Base64 存入数据库。
  • 自由排序：支持分类模块和书签的跨组拖拽重排。

📂 文件目录结构

.
├── bookmark-chrome-extension/  # Chrome 浏览器扩展程序
│   ├── background.js           # 核心逻辑：监听书签变动历史记录统计触发快照
│   ├── manifest.json           # 扩展权限配置
│   ├── popup.html/js           # 扩展状态面板：显示当前连接的服务器状态
│   └── icons/                  # 扩展图标
├── content/
│   └── _index.md / logs.md     # Hugo 页面路由定义
├── d1/
│   └── migrations/             # 数据库迁移文件 (SQL)
├── functions/
│   └── api/
│       └── [[catchall]].js     # 云函数：核心 API (CRUD R2 SigV4签名 鉴权拦截)
├── layouts/                    # Hugo HTML 模板
│   ├── index.html              # 主页 (包含 PWA 注册与离线提示UI)
│   ├── settings.html           # 动态设置面板 (R2 密钥与快照管理)
│   └── logs.html               # 日志页
├── static/                     # 静态资源
│   ├── sw.js                   # 🚀 核心 Service Worker (离线数据库缓存策略)
│   ├── manifest.json           # PWA 应用配置
│   ├── css/style.css           # 样式表 (热度边框灯箱响应式)
│   ├── js/                     
│   │   ├── api.js              # Fetch 请求封装与图像 Base64 转换
│   │   ├── main.js             # 主业务逻辑IntersectionObserver 探测
│   │   ├── ui.js               # DOM 元素与 Modal 状态管理
│   │   └── importExport.js     # 兼容 Netscape HTML 格式解析导出
└── hugo.toml / wrangler.toml   # Hugo 与 Cloudflare 配置文件

🗄️ 数据库 Schema (Cloudflare D1)

完整的数据表结构定义概览：

-- 1. 书签主表：存储书签核心信息、热度统计及 Base64 图标
CREATE TABLE bookmarks (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT NOT NULL,                   -- 书签标题
    url TEXT NOT NULL,                    -- 目标链接
    category TEXT DEFAULT '未分类',       -- 所属分类目录
    tags TEXT,                            -- 标签 (逗号分隔)
    created_at TEXT NOT NULL,             -- 创建时间 (ISO标准)
    modified_at TEXT NOT NULL,            -- 最后修改时间
    last_visited_at TEXT,                 -- 最后点击访问时间
    visit_count INTEGER DEFAULT 0,        -- 访问次数统计 (热度计算基准)
    icon TEXT DEFAULT NULL,               -- 图标数据 (Base64格式)
    sort_order INTEGER DEFAULT 0          -- 拖拽自定义排序权重
);

-- 2. 网页快照存档表：记录 R2 对象存储的映射关系
CREATE TABLE snapshots (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    bookmark_url TEXT NOT NULL,           -- 关联的书签 URL
    snapshot_date TEXT NOT NULL,          -- 截图日期 (YYYY-MM-DD)
    r2_path TEXT,                         -- Cloudflare R2 内部存储路径
    public_url TEXT,                      -- 可公开访问的图片外链
    created_at TEXT NOT NULL,             -- 记录写入时间
    UNIQUE(bookmark_url, snapshot_date)   -- 确保每天每个书签只存一张图
);
CREATE INDEX idx_snapshots_url ON snapshots(bookmark_url);
CREATE INDEX idx_snapshots_date ON snapshots(snapshot_date);

-- 3. 系统动态设置表：存储 R2 密钥凭证及应用级配置
CREATE TABLE settings (
    key TEXT PRIMARY KEY NOT NULL,        -- 配置键名 (如 r2_endpoint, max_snapshots)
    value TEXT                            -- 配置内容 (r2_endpoint 兼作系统登录密钥)
);

-- 4. 分类排序表：存储用户自定义的目录排序权重
CREATE TABLE category_order (
    category_name TEXT PRIMARY KEY NOT NULL, 
    sort_order INTEGER NOT NULL           -- 分类拖拽排序权重
);

-- 5. 操作日志表：记录关键的增删改查动作，便于追溯和撤销开发
CREATE TABLE action_logs (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    action_type TEXT NOT NULL,            -- 操作动作枚举 ('CREATE', 'DELETE', 'IMPORT' 等)
    details TEXT,                         -- 操作详细描述
    timestamp TEXT NOT NULL               -- 动作发生时间
);

🛠️ 快速启动与部署

1. 本地开发调试

依赖环境：Node.js + Hugo

# 初始化并应用数据库迁移到本地 (.wrangler/state)
npx wrangler d1 migrations apply bookmark --local

# 启动全栈开发服务器 (包含 Hugo 静态生成API 云函数及 D1 模拟)
hugo && npx wrangler pages dev public

访问：http://localhost:8788，首次进入可用任意字符串登录（因为本地数据库尚无 Endpoint 记录）。

2. 部署到 Cloudflare

  1. 创建线上数据库：npx wrangler d1 create bookmark (将生成的 id 填入 wrangler.toml)
  2. 应用线上表结构：npx wrangler d1 migrations apply bookmark --remote
  3. 绑定 Github 仓库：在 Cloudflare Pages 面板连接此仓库。
    • 框架预设：Hugo
    • 构建命令：hugo
    • 输出目录：public
  4. 绑定 D1 数据库：在 Pages 的设置 -> 函数 -> D1 数据库绑定中，将变量名设置为 DB。

3. 系统初始化与授权

部署成功后：

  1. 访问你的 Pages 域名。
  2. 点击右上角 "🔑"（或访问 /settings）。
  3. 因初次部署数据库为空，直接放行，进入设置页面填写 Cloudflare R2 的参数（Endpoint / AccessKeyId / SecretAccessKey）。
  4. 保存后，你填写的 Endpoint 即成为整个系统的唯一管理员“密码”，后续登录需使用此 URL 验证。

🧩 浏览器插件安装

  1. 进入 Chrome 扩展管理 chrome://extensions/，开启“开发者模式”。
  2. 点击“加载已解压的扩展程序”，选择项目中的 bookmark-chrome-extension 目录。
  3. 确保在 background.js 中将 const domain 修改为你部署的 Cloudflare Pages 域名。

💡 后续优化方向 (Roadmap)

  • 多设备隔离隔离：引入完整的 User 体系，支持多账户独立书签库。
  • 批量操作面板：支持通过勾选多选框，批量移动分类或删除。
  • 快照全文检索：结合 OCR 或 HTML 文本解析，实现基于网页内容的全文搜索。
  • 回收站机制：删除书签进入缓冲队列，防止手滑误删重要快照。

Built with Hugo + Cloudflare Pages + D1 + R2
Code is Poetry. Power by 永生 🚀