立项阶段分析文档

概念设计

组件图

产品技术选型

前端

使用 vite 脚手架，采用 react 框架，搭配 redux 和 antd 库

后端

使用 deno 运行时搭建后端，使用 typescript 编写

产品需求

外观需求：简洁大方

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

功能需求表

要求最小开发需求

用户信息维护	登录
画图功能	直线
	矩形（按住 shift 可画正方形）
	椭圆（按住 shift 可画圆）
	自由曲线（按住 shift 可画直线）
	文本
协作功能	协作
	只读

高级功能

画图功能	修改样式（线宽、线型、线色、填充色、字体、字号）
	移动
	缩放
	删除被选中图形
	Undo/Redo
持久化功能	export
	import

分角色描述（最小需求）

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

产品具体设计

应用设计

登录页设计

弹窗进行登录

白板页设计

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

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

接口设计

Apifox