# vueblacknote

**Repository Path**: bilibiliales/vueblacknote

## Basic Information

- **Project Name**: vueblacknote
- **Description**: 从github克隆下来的项目
- **Primary Language**: Unknown
- **License**: AGPL-3.0
- **Default Branch**: main
- **Homepage**: https://github.com/bilibiliales/vueblacknote
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-13
- **Last Updated**: 2026-06-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 小黑记事本

小黑记事本是一款基于 Vue 3 + Vite 的轻量记事/任务管理应用，支持标签分类、深色模式、Markdown 预览、本地备份、Supabase 云备份、账号资料、头像与自定义背景同步。

## 功能特性

- 标签分类：内置彩色标签与自定义标签显示开关。
- 任务管理：支持待完成、已完成、回收站、彻底删除与批量清理。
- Markdown：可在高级设置中启用或关闭任务预览 Markdown 渲染。
- 加密内容：任务内容可使用密码派生密钥进行 AES 加密。
- 备份恢复：支持本地 JSON 导入/导出，备份结构保持 `{ preferences, tags, notes }`。
- 云同步：登录后通过 Supabase `backups`、`profiles` 和 Storage 同步备份、头像与背景。

---

## 🔃 版本更新日志
>注：带⭐的为稳定版，其余版本不建议普通用户下载使用
#### 1.0.1
* 初版上线

#### 1.0.2
1. 支持MarkDown语法，允许在高级设置中启用/禁用MarkDown预览
2. 编辑页面左上角保存按钮更改为编辑/保存，可自由切换编辑/预览模式
3. 优化设置密码逻辑，需点击保存后才会修改任务的加密状态及密码
4. 修复其他部分已知BUG

#### 1.0.3
1. 增加了`transition`动画，切换路由及编辑路由下的容器时会显示对应的过渡动画
2. 修复了由不可编辑页面点击返回后无法跳转回已加密任务的输入密码页面的问题
3. 修复其他部分已知BUG

#### 1.0.4
1. 调整偏好设置容器和输入密码容器的动画风格为由上到下+渐显
2. 增加左侧菜单栏、顶部菜单栏和部分容器的毛玻璃效果
3. 修改动画速率由`ease`变更为先快后慢的效果
4. 修复部分已知BUG

#### 1.0.5⭐
1. 优化切换动画效果，砍掉主组件路由切换动画，变更为各子组件内显示/隐藏动画
2. 修复了唤起输入密码框时动画不连贯的问题
3. 删除空页面和根目录页面冗余的代码，确保稳定性；在根目录页面增加了版本号显示和删除本地数据按钮
4. 增加了切换视图时的左右变换动画；优化部分动画细节，增加了向下和左右的并行动画
5. 更改了部分动画逻辑，增加点击输入密码框周围默认取消的效果，提升操作连贯性

#### 1.0.6
1. 在根目录页面增加跳转至gitee代码仓库的链接
2. 移除回收站路由在卡片视图下footer中创建任务的按钮
3. 在各页面路由footer下增加搜索框，可以筛选出标题中仅包含搜索框内字符的任务
  * 设计搜索的逻辑是只筛选包含关键词的任务，不会影响当前页实际拥有的任务，所以删除和新建不会受到搜索的影响
  * 不过删除所有更改为删除筛选后的所有是为了增加扩展性，毕竟把筛选结果清空后就是显示所有了，再点删除所有的结果是一样的
4. 调整了偏好设置各子组件内容器的摆放位置、间距及动画效果
5. 备份偏好设置新增暂停自动保存，开启后进行的任何操作不会同步保存至本地，包括暂停自动保存的操作，因此这一操作是临时性的
6. 修复了一些已知BUG

#### 1.0.7⭐
1. 修复写入本地函数有概率崩溃的严重BUG，是由于增加暂停自动保存新功能没有严格测试导致的
  * 导致课上展示的时候出现这个BUG尴尬得想钻到地缝里面，已深刻反思检讨(┬┬﹏┬┬)
2. 点击导出备份文件时尝试执行一次自动保存（优先级低于暂停自动保存）
3. 修复了首次未进行任何保存操作就保存导致备份文件为空的BUG，如果本地没有存储记录则会备份内存数据

#### 1.0.8⭐⚠️
1. 修复了部分MarkDown文本的兼容性问题（标题、列表、图片等标签底部间距太宽）
2. 现在支持创建账号及登录账号，登录成功后可使用云备份功能（支持备份文件的备份和还原）
3. 移除了预览状态下不可编辑文本框的大黑边，增加编辑文本框大黑边的动画效果

#### 1.0.9
1. 接入了阿里云的`supabase`实例作为可靠的记事本云服务后台
2. 重新设计了原有的云上传、云下载功能，改成`supabase`自带的`postgresql`数据库存储
3. 引入了`supabase`自带的身份验证逻辑，可以实现完整的注册及登录功能
4. 优化上传按钮样式与部分组件布局，将登录和注册面板组件化，优化了部分文字描述

#### 1.0.10
1. 创建了supabase账号的仪表盘，增加个人信息更新模块（昵称、头像）、账号安全模块（修改密码、退出登录、注销账号）
2. 现在背景图片支持自定义设置（需要登录），上传后背景将保存至云端。将若干张预设的背景图片迁移至云端，并且支持下拉选择样式
3. 增加小黑记事本的自动同步机制，当一端更新个人资料或者记事本产生更新信息后登录了同一个账号的其他端会同步进行更新。

#### 1.0.11
1. 完善了个人资料的更新机制，修复了头像和背景在其他端更新时由于缓存导致的不会发生变更的BUG
2. 完善了个人资料的背景图片更新机制，实现了一端上传图片全端推送更新，一端删除图片全端切换空白背景的效果
3. 修复了自定义背景是否设置判断错误的BUG
4. 优化部分组件样式

#### 1.0.12⭐
1. 修复了变更设置时重复加载云端背景和头像的BUG
2. 优化了选择框和输入框的样式，实现了样式的统一化
3. 优化部分操作逻辑及文字描述

#### 1.0.13
1. 合并了原来仅筛选条件不同的页面，优化成了一个单独的组件，减少大量重复的代码
2. 优化代码动画展示逻辑
3. 优化保存数据结构及回收站编辑逻辑

#### 2.0.1
1. 系统整体迁移至vue3.0版本，属于系统底层的完整重构，因此版本号将从2.x开始
2. 从webpack改为了vite打包方式，极大提升了打包速率
3. 优化了/completed和/trash页面动画未能正确加载的BUG，完整实现组件间动画显示效果
4. 移除了适配vue2的markdown库，改为了更新的markdown-it库
5. 彻底移除了koa相关的全部代码和逻辑，原1.0.8版本后端逻辑及对应版本的库存在安全漏洞，将不再使用
TODO：
1. 修复卡片状态下宽度显示异常的BUG
2. 提升supabase远程交互性能、提供历史回溯
3. 优化系统底层配色，优化偏好项设置的深色浅色模式显示效果，原来的配色方式将逐步移除
---

## 环境要求

- Node.js `>=20.19.0`
- npm `>=10.0.0`

## 本地开发

```bash
npm install
npm run dev
```

常用脚本：

```bash
npm run build      # 生产构建
npm run preview    # 预览生产构建
npm test           # 运行 Vitest 测试
npm audit --audit-level=low
```

## 技术栈

- Vue 3
- Vite
- Vue Router 4，使用 hash history，便于静态部署
- Pinia
- Supabase JS v2
- Markdown-it
- CryptoJS
- Vitest

## Supabase

当前版本仅支持 Supabase 作为云端后端。旧版 Koa 文件备份服务已经移除，不再作为可运行服务维护。

部署前请按 [SUPABASE_SETUP.md](SUPABASE_SETUP.md) 创建：

- `backups` 表：保存每个用户的备份 JSON 字符串
- `profiles` 表：保存昵称、头像路径、背景路径
- `backgrounds` 私有桶：保存用户自定义背景
- `avatars` 私有桶：保存用户头像
- `public-backgrounds` 公共桶：保存可选预设背景
- 对应的 RLS 与 realtime 配置

Supabase URL 与 anon key 位于 [src/utils/supabase.js](src/utils/supabase.js)。

## 数据结构

备份文件仍使用兼容结构：

```json
{
  "preferences": {
    "dark": false,
    "item_color": "#0078D7",
    "default_view": 1,
    "homepage": "MainView",
    "background": "",
    "background_url": "",
    "remove_warning": true,
    "remove_force": false,
    "enable_markdown": true,
    "enable_search": true,
    "pause_save_state": false
  },
  "tags": [
    { "id": "1", "name": "红色", "color": "#ed695f", "show": true }
  ],
  "notes": [
    {
      "n_id": "example",
      "title": "示例任务",
      "content": "QkxBQ0tOT1RFQA==",
      "encrypted": false,
      "tags": ["1"],
      "created_at": "2025-03-27T14:55:00Z",
      "updated_at": "2025-03-27T15:10:00Z",
      "status": "todo"
    }
  ]
}
```

未加密内容保存流程：原文 -> 添加盐值 `BLACKNOTE@` -> Base64。

加密内容保存流程：原文 -> 添加盐值 `BLACKNOTE@` -> Base64 -> SHA-256 密码密钥 -> AES 加密。

## 目录

```text
.
├── index.html
├── package.json
├── vite.config.js
├── SUPABASE_SETUP.md
└── src
    ├── App.vue
    ├── assets/
    ├── components/
    ├── resource/
    ├── router/
    ├── store/
    ├── utils/
    └── views/
```