作者：UOrb
声明：文章为稀土掘金技术社区首发签约文章，14天内禁止转载，14天后未获授权禁止转载，侵权必究！
前言
技术方案设计 其实就是对 产品需求 转换到 技术需求 的一个转化过程（至少对于开发我是这么理解的），同时也是 了解 业务需求和逻辑的一种手段，在编写技术方案的时候，你会发现一些 不明确 的问题，这个时候就可以 提前 和 产品、后端、设计 进行沟通，提前 解决 问题，避免在开发途中才发现问题要进行 返工 操作。
其次就是根据原型图或设计图对 页面结构 进行划分，提前 设计 好组件模块的划分边界，以及那些功能模块或组件可以复用的，页面上有哪些功能，功能与功能之间的 关联关系 是怎么样的等等。
同时技术文档可以让你对需求的工作量把控的相对精确一些，对项目的周期、工作的排期、是否需要申请加班等事务也可以提前进行安排和处理。
项目背景
这里大部分都是从 需求文档 中的引用，所以就不再重写了。
此处省略一万个字...
技术选型
前端框架使用 Vue3，最先开始考虑的是使用 React，目前工作中使用 Vue ，开源中使用 React ，可以形成互补，让自己对目前主流的两大框架都不陌生，然而计划赶不上变化，由于我对 Vue 更熟悉，相对的进度就会更快一点，并且我也打算把这个作为一个实战的分享应用应用到公司中，并且准备加点 Vue3 源码方面的内容。
构建工具使用 Vite，飞一般的感觉，特别是你同时开发两个项目，一个是 Vite 一个是 Webpack ，Webpack 的构建会让你感到捉急（别问，问就是微前端，目前市面上的微前端架构对除了 Webpack 以外的构建工具都不太友好）。
富文本编辑器使用 wangEditor5 ，国内一流的富文本编辑器，简洁易用，功能强大，开箱即用没有心智负担（绝对没有夹带私货 god）。
功能需求
对产品需求的梳理，结合原型或设计图转换成技术需求，如果有相对核心或困难的功能，建议 单独编写 技术方案设计文档，核心实现部分也建议使用 伪代码 的形式预先设计。
登陆
功能列表
- 用户登陆弹框
- 表单字段
- 账号
- 校验
- 最小长度为 6
- 没有特殊字符
- 数字不能作为第一位
- 校验
- 密码
- 校验
- 最小长度为 6
- 没有特殊字符
- 数字不能作为第一位
- 校验
- 账号
- 功能操作
- 登陆
- 登陆失败使用全局提示框进行提示
- 登陆成功后自动跳转到个人中心页面
- 注册
- 切到注册弹框
- 登陆
- 表单字段
- 用户注册弹框
- 表单字段
- 用户名
- 校验
- 没有特殊字符
- 校验
- 帐号
- 校验
- 最小长度为 6
- 没有特殊字符
- 数字不能作为第一位
- 校验
- 密码
- 校验
- 最小长度为 6
- 没有特殊字符
- 数字不能作为第一位
- 用户名
- 操作功能
- 注册
- 注册失败使用全局提示框进行提示
- 注册成功后自动跳转到个人中心页面
- 直接登录
- 切换到登陆弹框
- 注册
- 表单字段
示意图
组件设计
- 容器组件
- 登陆模块
- 注册模块
涉及接口
- 用户注册接口
- 用户登陆认证接口
个人中心
功能列表
- 顶部
- 搜索框
- 功能按钮
- 新增空间
- 唤起新增空间弹框
- 新增空间
- 用户信息
- 菜单栏
- 菜单列表
- 最近浏览
- 跳转至浏览记录页面
- 我的空间
- 当前用户的空间列表
- 跳转至空间页面
- 当前用户的空间列表
- 回收站
- 跳转至回收站页面
- 最近浏览
- 空间页面
- 标题
- 标签页
- 知识库
- 知识库面板
- 知识库名称
- 最近编辑文件列表 - 最多 3 个
- 功能菜单
- 编辑知识库
- 知识库面板
- 设置
- 空间基础设置修改表单
- 表单字段
- 名称
- 简介
- 表单字段
- 功能按钮
- 更新
- 空间基础设置修改表单
- 知识库
- 知识库页面
- 标题
- 文件列表
- 展示字段 - 名称 - 最近更新时间 - 操作栏
- 操作功能
- 打开文档
- 修改文档配置
- 删除文档
- 浏览记录页面
- 标题
- 搜索
- 基于文件名
- 文件列表
- 展示字段
- 名称
- 操作人
- 所属知识库
- 所属空间
- 删除时间
- 功能操作
- 打开文档
- 展示字段
- 回收站页面
- 标题
- 搜索
- 基于文件名
- 文件列表
- 展示字段
- 名称
- 操作人
- 所属知识库
- 所属空间
- 删除时间
- 操作栏
- 操作功能
- 恢复
- 彻底删除
- 展示字段
- 菜单列表
- 新增空间弹框
- 表单字段
- 名称
- 校验
- 不能为空
- 非特殊字符
- 校验
- 简介
- 校验 - 不能为空 - 非特殊字符
- 名称
- 功能操作
- 确定
- 提交当前表单并进入 loading 状态
- 提交成功后关闭弹框并进行更新空间列表和新增成功提示
- 取消
- 关闭弹框并清空表单
- 确定
- 表单字段
- 新增/编辑知识库弹框
- 表单字段
- 名称
- 校验
- 不能为空
- 非特殊字符
- 校验
- 简介
- 校验
- 不能为空
- 非特殊字符
- 校验
- 名称
- 功能操作
- 确定
- 提交当前表单并进入 loading 状态
- 提交成功后关闭弹框并进行更新知识库面板和新增成功提示
- 取消
- 关闭弹框并清空表单
- 确定
- 表单字段
示意图
组件设计
- 容器组件
- 侧边栏
- 中心视图
- 空间
- 标题
- 标签页
- 知识库面板
- 知识库
- 标题
- 文档列表
- 浏览记录
- 标题
- 搜索框
- 文档列表
- 标题
- 回收站
- 标题
- 搜索框
- 文档列表
- 标题
- 空间
涉及接口
用户信息获取接口 文档查询接口
获取用户空间列表接口 新增用户空间接口 编辑指定空间接口 删除指定空间接口
获取指定空间的知识库列表接口 新增指定空间的知识库接口 编辑指定知识库接口 删除指定知识库接口
获取指定知识库信息接口 编辑指定知识库信息接口 获取指定知识库的文档列表接口 新增指定空间文档接口 修改指定文档配置接口 删除指定文档接口
获取用户浏览文档记录列表接口 新增文档接口 修改指定文档配置接口 删除指定文档接口
获取用户已删除列表接口 恢复文档接口 直接删除接口
文档
功能列表
- 标题
- 文档基础信息展示
- 文档拉下操作
- 打印
- 删除
- 文档配置信息查看
- 字数统计
- 创建人
- 创建时间
- 更新人
- 更新时间
- 更新文档
- 富文本编辑功能
- 标题
- 引用
- 加粗
- 下划线
- 斜体
- 删除线
- 代码块
- 字体颜色
- 字体大小
- 字体
- 背景颜色
- 行高
- 有序列表
- 无序列表
- 代办
- 对齐
- 缩进
- 超连接
- 图片
- 表格
- 分割线
示意图
组件设计
- 容器组件
- 顶部文档信息
- 内容区域
- 工具栏
- 编辑区域
涉及接口
获取指定文档信息数据接口 编辑/保存指定文档接口 修改指定文档配置接口
结尾
大多数情况下，前端的技术方案设计没有后端那么复杂哈，足够小或者简单的项目，并且也不存在多人开发的情况下不写前端的技术方案设计其实也没有太大的影响，但是并不是说前端的技术方案就不重要了哈，不管是前端还是后端的技术方案都是很重要的，而且越是复杂度高的项目和多人、多团队协作的项目技术方案设计就越显得重要，只有提前确认好要走的方向，那么接下来的路就不那么难走了。
