work/src

书签管理系统 v2.0

多设备智能书签管理系统，支持浏览器扩展自动同步、设备间可见性控制和后台管理。

项目结构

src/
├── backend/              # 后端 API (ASP.NET Core 8 + FreeSql)
│   ├── BookmarkApi/          # Web API 项目
│   ├── BookmarkApi.Core/     # 核心业务层
│   ├── BookmarkApi.Data/     # 数据访问层
│   └── BookmarkApi.Shared/   # 共享模型和 DTOs
│
├── frontend/             # 前端 SPA (Vue 3 + TypeScript)
│   └── src/
│       ├── api/              # API 服务
│       ├── components/       # 组件
│       ├── stores/           # Pinia 状态管理
│       ├── views/            # 页面
│       └── router/           # 路由
│
├── admin/                # 后台管理 (Vue 3 + TypeScript)
│   └── src/
│       ├── api/              # API 服务
│       ├── stores/           # 状态管理
│       └── views/            # 管理页面
│
└── extension/            # 浏览器扩展 (Manifest V3)
    ├── background/           # Service Worker
    ├── content/              # 内容脚本
    ├── popup/                # 弹出窗口
    ├── newtab/               # 新标签页
    ├── shared/               # 共享模块
    └── icons/                # 扩展图标

快速开始

1. 后端 API

cd src/backend/BookmarkApi
dotnet restore
dotnet run

API 将运行在 http://localhost:5000

2. 前端 SPA

cd src/frontend
npm install
npm run dev

前端将运行在 http://localhost:5173

3. 后台管理

cd src/admin
npm install
npm run dev

后台将运行在 http://localhost:5174

4. 浏览器扩展

1. 打开 Chrome，访问 chrome://extensions/
2. 开启 "开发者模式"
3. 点击 "加载已解压的扩展程序"
4. 选择 src/extension 目录

功能特性

用户端 (前端 SPA)

• ✅ 用户注册/登录
• ✅ 书签管理 (增删改查)
• ✅ 标签分类
• ✅ 全局搜索
• ✅ 设备管理
• ✅ 可见性控制 (公开/私密/指定设备)
• ✅ 书签导入导出

浏览器扩展

• ✅ 自动同步书签
• ✅ 新标签页替换
• ✅ 全局快捷键搜索 (Alt+K)
• ✅ 一键收藏当前页

后台管理

• ✅ 数据统计仪表盘
• ✅ 用户管理
• ✅ 设备管理
• ✅ 书签管理

技术栈

模块	技术
后端	ASP.NET Core 8, FreeSql, JWT, SQL Server/PostgreSQL
前端	Vue 3, TypeScript, Vite, Element Plus, Pinia
后台	Vue 3, TypeScript, Vite, Element Plus
扩展	Manifest V3, Chrome APIs

API 文档

启动后端后访问 Swagger UI: http://localhost:5000/swagger

配置说明

数据库配置

编辑 src/backend/BookmarkApi/appsettings.json:

{
  "ConnectionStrings": {
    "DefaultConnection": "Data Source=localhost;Initial Catalog=BookmarkDb;User Id=sa;Password=YourPassword;TrustServerCertificate=true"
  },
  "Database": {
    "Provider": "SqlServer"  // 或 "PostgreSQL"
  }
}

JWT 配置

{
  "JwtSettings": {
    "SecretKey": "your-256-bit-secret-key-here",
    "Issuer": "BookmarkApi",
    "Audience": "BookmarkApp",
    "ExpirationHours": 24
  }
}

开发说明

• 后端使用 FreeSql 的 UseAutoSyncStructure 自动同步数据库结构
• 前端使用 Axios 拦截器自动处理 Token 刷新
• 扩展使用 chrome.storage.local 存储认证信息