# 浏览器书签管理

**Repository Path**: mofees/bookmark

## Basic Information

- **Project Name**: 浏览器书签管理
- **Description**: BookMark 是一款专为浏览器书签管理设计的工具，旨在帮助用户高效整理、存储和访问网页书签。通过直观的界面和强大的功能，用户可以轻松管理个人书签，提高工作效率。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-08-18
- **Last Updated**: 2026-08-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🌈 Bookmark — 一站式浏览器书签管理 · 账号保险柜

> 把散落在浏览器、办公软件、协作工具里的链接与账号，收拢到一个属于你自己的私有空间。  
> .NET 8 + Vue 3 全栈构建，SQLite 开箱即用，七种主题随心切换，自托管数据完全自控。

---

## ✨ 为什么选择 Bookmark

- **一座保险柜，装下所有链接与账号** — 浏览器书签、常用网站账号、关键备注，统一加密存储，按分类/标签检索
- **七种视觉主题** — 琥珀复古、深海、林冠、日落、极简、银河、极霜，跟随心情随手切换
- **showcase 公开展示页** — 一键把你的书签集合变成一个可分享的精美站点
- **自托管优先** — SQLite 默认零配置，数据始终在你自己的机器上；亦可一键切到 MySQL/Oracle/SqlServer/PostgreSQL
- **多用户隔离** — 每个用户只看见自己创建的数据，互不干扰
- **七语言国际化** — zh-CN / zh-TW / zh-HK / en-US / ja-JP / fr-FR / vi-VN

---

## 🎨 七种主题，一种优雅

showcase 页面提供七种精心调校的视觉主题，从极简到银河，从琥珀到深海，每一次切换都是一次心情的迁移。

| 琥珀复古 | 深海 | 林冠 |
|----------|------|------|
| ![琥珀复古](Doc/img/琥珀复古模式.png) | ![深海](Doc/img/深海模式.png) | ![林冠](Doc/img/林冠模式.png) |

| 日落 | 极简 | 银河 |
|------|------|------|
| ![日落](Doc/img/日落模式.png) | ![极简](Doc/img/极简模式.png) | ![银河](Doc/img/银河模式.png) |

| 极霜（默认） |
|--------------|
| ![极霜](Doc/img/极霜模式.png) |

> 主题选择会自动记忆，下次进入 showcase 时延续你的偏好。

---

## 🧭 核心功能

### 书签管理

支持图标上传 / Element Plus 图标 / 首字母占位三种图标模式，按分类树筛选，按标签筛选，关键词搜索，分页浏览。

![书签管理](Doc/img/书签管理.png)

### 分类管理

树形多级分类，拖拽排序，支持启用/停用、默认分类标记。

![分类管理](Doc/img/分类管理.png)

### 标签管理

为书签打上彩色标签，一个书签可挂多个标签，在列表与 showcase 中均会渲染。

![标签管理](Doc/img/标签管理.png)

### 账号保险柜

为每个书签挂载多组登录账号（用户名 / 密码 / 备注 / 账号标签 / 账号分类），密码默认隐藏，点击「显示」才可见。

![账号保险柜](Doc/img/账号保险柜.png)

### 账号分类

按用途对账号分组（主账号 / 测试账号 / 共享账号 …），与书签分类独立解耦。

![账号分类](Doc/img/账号分类.png)

---

## 🚀 快速开始

### 一键打包成单站点（推荐）

```cmd
Doc\bat\build-single.bat
```

脚本会：

1. `pnpm install` + `pnpm build` 构建前端到 `Web/dist`
2. `dotnet publish` 发布后端到 `Bookmark.Entry\bin\Release\net8.0\publish`
3. 把 `Web\dist` 拷贝到 `publish\wwwroot`，由后端同一端口托管
4. 生成 `publish\run.bat`，双击即可启动并自动打开浏览器

完成后双击 `publish\run.bat` → 访问 `http://localhost:5000`。

### 开发模式

```bash
# 后端
dotnet run --project Bookmark.Entry
#    Swagger：http://localhost:5000/swagger

# 前端
cd Web
pnpm install
pnpm dev        # http://localhost:3000
```

### Docker 部署

```cmd
Doc\Docker\build-docker.bat
```

镜像推送至 `crpi-ued86xnwae548w9p.cn-shenzhen.personal.cr.aliyuncs.com/ruovea/bookmark-img:latest`，配合 `Doc\Docker\docker-compose.yml` 一行 `docker compose up -d` 即可上线。

### 环境要求

- .NET 8 SDK
- Node.js + pnpm（默认 SQLite 无需额外依赖）

---

## 🛠️ 技术栈

### 后端

| 技术 | 说明 |
| --- | --- |
| .NET 8 | 后端 API 框架 |
| SqlSugarCore | ORM（`SugarRepository<T>` 泛型仓储 + `[Navigate]` 导航） |
| RuoVea.DynamicWebApi | Service 实现 `IApplicationService` 即自动暴露 REST 端点 |
| RuoVea.ExFilter | 全局返回包装 / 异常 / 操作日志 AOP |
| RuoVea.ExSugar | 仓储 + UnitOfWork 事务 |
| RuoVea.ExJwtBearer | JWT 认证 |
| RuoVea.ExSwagger | Swagger / Knife4j |
| RuoVea.ExDto | `RestfulResult` / `PageParam` / `EntityBaseIdDto` |
| RuoVea.ExConfig | `AppSettings` 动态配置读取 |
| RuoVea.ExIdGen | 雪花漂移 ID |
| RuoVea.OmiApi.* | Auth/System/Dict/Notice/Log/Upload 等基础模块 |
| Mapster | 对象映射 `.Adapt<T>()` |
| log4net | 按级别分文件日志 |
| Newtonsoft.Json | 全局 JSON 序列化（雪花 ID 自动转字符串） |

### 前端

| 技术 | 版本 | 说明 |
| --- | --- | --- |
| Vue | 3.5+ | Composition API + `<script setup>` |
| TypeScript | 5.7+ | 类型系统 |
| Vite | 5.4+ | 构建工具 |
| Element Plus | 2.8+ | UI 组件库 |
| Pinia | 2.2+ | 状态管理（Options API 风格） |
| Vue Router | 4.5+ | 后端控制路由（菜单来自数据库 SysMenu 表） |
| Vue I18n | 10.0+ | 6 语言国际化 |
| Axios | 1.7+ | HTTP 客户端 |
| SignalR | 8.0+ | 实时通知推送 |

---

## 🧩 平台基础能力（开箱即用）

Bookmark 站在 [RuoVea](https://gitee.com/ruovea) 组件生态的肩膀上，自带一套完整的后台管理基座：

- **系统管理**：用户、角色、菜单、组织架构、字典、配置、缓存、日志
- **内容管理**：文章列表/编辑（WangEditor 富文本）、分类、标签
- **通知公告**：系统通知 + SignalR 实时推送
- **字典管理**：常规/动态/定制/图片四种视图，14 种标签类型
- **报表管理**：图表配置、数据源、SQL 管理、仪表盘、图表预览
- **代码生成**：模板代码快速生成
- **6 语言国际化**：zh-cn / zh-tw / en / ja-jp / fr-fr / vi-vn

### 系统管理预览

| 菜单管理 | 角色管理 |
|----------|----------|
| ![菜单管理](Doc/img/菜单管理.png) | ![角色管理](Doc/img/角色管理.png) |

| 账号管理 | 机构管理 |
|----------|----------|
| ![账号管理](Doc/img/账号管理.png) | ![机构管理](Doc/img/机构管理.png) |

![字典管理](Doc/img/字典管理.png)

### 日志管理

| 访问日志 | 差异日志 |
|----------|----------|
| ![访问日志](Doc/img/访问日志.png) | ![差异日志](Doc/img/差异日志.png) |

### 登录与仪表盘

![登录](Doc/img/login.png)

![仪表盘](Doc/img/dashboard-view.png)

| 管理模式 | 编辑模式 |
|----------|----------|
| ![仪表盘管理](Doc/img/dashboard-admin.png) | ![仪表盘编辑](Doc/img/dashboard-edit.png) |

### 报表管理

![图表配置列表](Doc/img/chartConfig.png)
![图表配置编辑](Doc/img/chartConfig-edit.png)
![图表配置预览](Doc/img/chartConfig-view.png)

![数据源管理](Doc/img/dataSource.png)

![报表定义列表](Doc/img/definition.png)
![报表定义编辑](Doc/img/definition-edit.png)
![SQL 管理](Doc/img/definition-sql.png)

![QueryByCode](Doc/img/queryByCode.png)

---

## 📁 项目结构

```
Bookmark/
├── Bookmark.sln
├── Bookmark.Entry/          # 启动项目（WebApi Host + 静态文件托管）
│   ├── Config/               #   JSON 配置（DB/JWT/CORS/Swagger/i18n…）
│   ├── Controllers/          #   SwaggerAuthController（唯一传统 Controller）
│   ├── Extensions/           #   本地化中间件扩展
│   ├── Filters/              #   操作日志 / SqlSugar 日志过滤器
│   ├── db/                   #   SQLite 数据库（运行时生成）
│   ├── Dockerfile
│   └── Program.cs            #   唯一入口
├── Bookmark.Server/         # 业务逻辑层
│   ├── Dto/                  #   入参/出参 DTO
│   ├── Models/               #   数据实体（继承 EntityBase）
│   ├── Service/              #   业务服务（实现 IApplicationService）
│   ├── SeedData/             #   种子数据
│   ├── Language/             #   ResX 多语言资源
│   └── GloabUsing.cs         #   全局 using
├── Web/                      # 前端项目（Vue 3 + Vite + TypeScript）
│   ├── src/
│   │   ├── api/              #   API 服务层
│   │   ├── components/       #   通用组件
│   │   ├── i18n/             #   国际化
│   │   ├── layout/           #   布局组件（经典/横向/分栏）
│   │   ├── plugins/          #   @ruovea/* 业务模块装配
│   │   ├── router/           #   路由（后端控制）
│   │   ├── stores/           #   Pinia 状态管理
│   │   ├── utils/            #   工具函数（request.ts 封装 Axios）
│   │   └── views/            #   页面组件
│   │       ├── business/bmBookmark/   #   书签管理 + showcase
│   │       ├── business/bmCategory/   #   分类管理
│   │       ├── business/bmTag/         #   标签管理
│   │       ├── business/bmAccount/     #   账号保险柜
│   │       └── ...
│   └── README.md
├── Doc/
│   ├── Docker/               #   docker-compose / 构建脚本
│   ├── bat/                  #   build-single.bat / build.bat / run-web.bat
│   └── img/                  #   截图资源
├── CLAUDE.md                 # 项目专属编码规范（AI 自动加载）
├── LICENSE
└── README.md
```

---

## 🧭 路线图

- [x] 书签 CRUD + 图标可选（URL / Element 图标 / 首字母）
- [x] 树形分类 + 标签
- [x] 账号保险柜（密码隐藏 / 显示切换）
- [x] showcase 公开展示页（7 主题切换）
- [x] 一键打包成单站点 exe
- [x] Docker 镜像构建与推送
- [ ] 浏览器扩展一键收藏当前页
- [ ] 账号密码字段加密存储（v1.8.0 起已去敏感化，加密方案规划中）
- [ ] showcase 多布局（网格 / 列表 / 瀑布流）
- [ ] 书签导入（Chrome / Edge / Firefox HTML）

---

## 📚 文档索引

| 文档 | 说明 |
|------|------|
| [Web/CHANGELOG.md](Web/CHANGELOG.md) | 前端更新日志 |
| [Web/USE_WIKI.md](Web/USE_WIKI.md) | 前端使用手册 |
| [CLAUDE.md](CLAUDE.md) | 项目专属编码规范 |

---

## 📄 许可证

基于 [RuoVea](https://gitee.com/ruovea) 开源组件生态，采用 MIT 许可证。详见 [LICENSE](LICENSE)。

---

**Bookmark** — 把散落的链接与账号，收拢成一座属于你自己的保险柜。