Pocket Stack

Appearance

口袋笔记 ​

口袋笔记是基于 Pocket Stack 通过 Vibe Coding 的方式开发的一款个人笔记应用，提供简单、高效的笔记管理功能。

1. 登录与访问 ​

登录界面

2. 首页概览 ​

登录成功后，将进入口袋笔记首页。界面主要包含以下区域：

左侧边栏：

  • 全部：显示所有未删除的笔记。
  • 回收站：显示已删除的笔记。
  • 热力图：展示每日笔记数量分布。
  • 标签筛选：按标签快速筛选笔记。

主内容区：

  • 顶部搜索栏：输入关键词即可实时搜索笔记内容。
  • 发布框：用于快速创建新笔记。
  • 笔记列表：按时间倒序展示笔记。

首页概览

3. 发布笔记 ​

在主内容区顶部的发布框中：

  • 点击输入框，输入笔记内容。
  • 点击下方的“发布”按钮，或者用ctrl+enter快捷键发布。
  • 新发布的笔记将立即显示在列表顶部。
  • 可以在发布框下方上传图片、关联或新增标签。

添加标签

4. 管理笔记 ​

每条笔记右侧有操作菜单（通常为三个点图标或直接显示的图标）：

  • 删除笔记：点击删除图标（垃圾桶），确认后笔记将被移入回收站。
  • 编辑笔记：点击编辑图标（铅笔），修改内容后保存。

笔记操作

5. 回收站管理 ​

点击左侧边栏的“回收站”：

  1. 可以看到所有被标记为删除的笔记。
  2. 恢复笔记：点击恢复图标（撤销箭头），笔记将回到主列表。
  3. 彻底删除：点击彻底删除图标（垃圾桶），笔记将从数据库中永久移除，不可恢复。

回收站

6. 标签管理 ​

  • 管理标签：点击用户下拉菜单“标签管理”按钮，即可查看和删除已添加的标签。

标签管理

7. 安装 ​

  1. 克隆代码：
bash
git clone https://github.com/citywill/pocket-stack.git
cd pocket-stack
  1. 检出到 demo/notes 分支：
bash
git checkout demo/notes
  1. 安装并启动项目：
bash
npm install
npm run dev

访问地址：http://localhost:5173

  1. 访问并用超级管理员账号登录

  2. 初始化项目：

初始化项目