协作备忘录

一个基于 Python + Vue 技术栈构建的轻量化在线协作备忘工具。

功能特性

1. 用户系统

• 用户注册：提供用户名和密码即可注册，系统自动分配8位ID
• 用户登录：支持用户名+密码登录，使用JWT认证
• 退出登录：安全退出并清除本地认证信息

2. 备忘录系统

• 卡片式显示：备忘录以卡片形式展示，美观直观
• 创建事件：支持填写以下信息：
  • 标题（必填）
  • 描述（可选）
  • 事件类型：工作、生活、学习、会议、其他
  • 时间段：开始时间 + 结束时间
  • 紧急程度：紧急、高、普通、低

3. 智能排序与提醒

• 默认按创建时间排序
• 临近事件高亮：距离开始时间1小时内的事件会：
  • 显示红色边框
  • 呼吸动画效果
  • 顶部警告提示
• 紧急程度高的事件优先显示

4. 协作功能

• 分派事件：可以给其他用户分派备忘录事件
• 通过用户ID或用户名搜索目标用户
• 分派的事件自动添加到目标用户的备忘录中
• 卡片左侧显示绿色边框标识为分派事件
• 显示分派者姓名

5. 其他功能

• 编辑备忘录
• 删除备忘录
• 刷新列表
• 事件进度条显示

技术栈

后端

• Python 3.8+
• Flask 3.0 - Web框架
• Flask-SQLAlchemy - ORM
• Flask-JWT-Extended - JWT认证
• Flask-CORS - 跨域支持
• SQLite - 数据库（可升级为MySQL/PostgreSQL）

前端

• Vue 3 - 前端框架
• Vue Router 4 - 路由管理
• Pinia - 状态管理
• Element Plus - UI组件库
• Axios - HTTP客户端
• Day.js - 日期处理

项目结构

note/
├── backend/                 # 后端目录
│   ├── app.py              # Flask应用主文件
│   ├── run.py              # 启动脚本
│   ├── requirements.txt    # Python依赖
│   └── memo.db             # SQLite数据库（运行后生成）
│
├── frontend/                # 前端目录
│   ├── public/
│   │   └── index.html      # HTML入口
│   ├── src/
│   │   ├── views/          # 页面组件
│   │   │   ├── Login.vue   # 登录页
│   │   │   ├── Register.vue # 注册页
│   │   │   └── Memo.vue    # 备忘录主页
│   │   ├── stores/         # 状态管理
│   │   │   └── user.js     # 用户状态+API封装
│   │   ├── router/         # 路由配置
│   │   │   └── index.js
│   │   ├── App.vue         # 根组件
│   │   └── main.js         # 入口文件
│   ├── package.json        # NPM依赖
│   └── vue.config.js       # Vue配置
│
├── start.bat               # Windows一键启动脚本
├── README.md               # 本文档
└── .gitignore

快速开始

环境要求

• Python 3.8 或更高版本
• Node.js 16 或更高版本
• npm（随Node.js安装）

方式一：一键启动（Windows）

直接双击运行 start.bat 文件，脚本会自动：

1. 检查Python和Node.js环境
2. 创建Python虚拟环境
3. 安装所有依赖
4. 同时启动后端和前端服务

方式二：手动启动

1. 安装依赖

后端：

cd backend
python -m venv venv
venv\Scripts\activate.bat  # Windows
# 或 source venv/bin/activate  # Linux/Mac
pip install -r requirements.txt

前端：

cd frontend
npm install

2. 启动服务

启动后端：

cd backend
venv\Scripts\activate.bat
python run.py

后端服务运行在 http://localhost:5000

启动前端（新终端）：

cd frontend
npm run serve

前端服务运行在 http://localhost:8080

访问应用

打开浏览器访问 http://localhost:8080

使用说明

1. 注册账号

1. 首次使用点击「立即注册」
2. 输入用户名和密码
3. 注册成功后系统会分配一个8位用户ID

2. 登录系统

1. 输入用户名和密码
2. 点击登录进入备忘录主页

3. 创建备忘录

1. 点击「创建备忘录」按钮
2. 填写标题、描述、事件类型、时间段、紧急程度
3. 点击保存

4. 分派事件

1. 点击「分派给他人」按钮
2. 搜索目标用户（输入ID或用户名）
3. 填写备忘录内容
4. 点击分派，事件会自动添加到目标用户的列表中

5. 紧急提醒

• 距离开始时间1小时内的事件会高亮显示（红色边框+呼吸动画）
• 顶部会显示警告提示条
• 紧急程度越高排序越靠前

API接口

认证接口

方法	路径	说明
POST	/api/register	用户注册
POST	/api/login	用户登录（返回JWT）

用户接口

方法	路径	说明
GET	/api/users/search	搜索用户（需认证）

备忘录接口

方法	路径	说明
GET	/api/memos	获取当前用户备忘录列表
POST	/api/memos	创建备忘录
PUT	/api/memos/	更新备忘录
DELETE	/api/memos/	删除备忘录
POST	/api/memos/assign	分派备忘录给其他用户

数据模型

User（用户表）

字段	类型	说明
id	String(36)	主键，自动生成8位ID
username	String(80)	用户名，唯一
password_hash	String(256)	密码哈希
created_at	DateTime	创建时间

Memo（备忘录表）

字段	类型	说明
id	Integer	主键，自增
user_id	String(36)	所属用户ID
title	String(200)	标题
description	Text	描述
event_type	String(50)	事件类型
start_time	DateTime	开始时间
end_time	DateTime	结束时间
urgency	String(20)	紧急程度
created_at	DateTime	创建时间
assigned_by	String(36)	分派者ID
is_assigned	Boolean	是否为分派事件

自定义配置

修改后端端口

编辑 backend/run.py：

app.run(debug=True, host='0.0.0.0', port=5000)  # 修改端口

修改前端端口和代理

编辑 frontend/vue.config.js：

module.exports = defineConfig({
  devServer: {
    port: 8080,  // 修改前端端口
    proxy: {
      '/api': {
        target: 'http://localhost:5000',  // 修改后端地址
        changeOrigin: true
      }
    }
  }
})

修改JWT密钥（生产环境必需）

编辑 backend/app.py：

app.config['SECRET_KEY'] = 'your-production-secret-key'
app.config['JWT_SECRET_KEY'] = 'your-production-jwt-key'

生产部署

数据库升级

SQLite适合开发，生产环境建议使用MySQL或PostgreSQL。修改 backend/app.py：

MySQL示例：

app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://user:pass@localhost/memo'

PostgreSQL示例：

app.config['SQLALCHEMY_DATABASE_URI'] = 'postgresql://user:pass@localhost/memo'

前端构建

cd frontend
npm run build

构建产物在 dist 目录，可部署到Nginx等静态文件服务器。

许可证

MIT License

贡献

欢迎提交Issue和Pull Request！