架构设计文档

概念设计

使用 vite 脚手架搭建项目

采用 react 框架

使用 redux 库进行状态管理

使用 browser-fs-access 处理图片上传请求

使用 cuid 和 nanoid 生成 id

使用 perfect-freehand 在没有支持笔压设备情况下模拟笔压

使用 react-bootstrap-icons 处理 icon

使用 roughjs 模拟手绘

使用 sass 编写样式

暂无

外观需求：简洁大方

可靠需求：协作时信息同步可靠

分角色描述（最小需求）
角色	状态	具体操作	期望结果
创建者	创建白板	登录	通过输入一个 id 来进行登录
	创建白板	创建新白板	获得到一个新的白板页面
	画图	直线	根据用户的输入在白板中渲染一条直线
		矩形	根据用户的输入在白板中渲染一个矩形（按住 `shift` 可渲染正方形）
		椭圆	根据用户的输入在白板中渲染一个椭圆（按住 `shift` 可渲染圆）
		自由曲线	根据用户的输入在白板中渲染一个自由曲线（按住 `shift` 可渲染直线）
		文本	根据用户的输入在白板中渲染一个文本框，并可输入文字
	分享	自定义 id 或系统自动生成 id	得到当前白板的 id
		分享	自动复制分享链接到 clipboard
		设置权限	根据权限类型可限制所有人是否能编辑
参与者	加入白板	通过分享链接加入白板	点击创建者分享的链接，直接加入该白板
	加入白板	输入白板 id 加入白板	加入要加入的白板
	画图	同创建者

登录页设计

弹窗进行登录

白板页设计

工具栏：直线、矩形、椭圆、自由曲线、文本

分享：生成分享链接、权限设置