0. 前端设计检查原则
- 【优先参考】阿里巴巴antd规范
持续维护 - 【备用参考】 内部设计规范 https://design.d.com
针对内部场景优化, 标注细致，但停止维护，在阿里规范未尽解释方面可参考此规范 - 边界检查
![在这里插入图片描述]()
测试角度的边界检查范围
1. 浏览器标题栏
标题应包含 [页面标题] - 模块 - 网站名称 - [移动版]
内容类页面应包含内容标题
任务状态类页面站点Icon应可反映执行状态
理由：
- 在一个浏览器打开多个选项卡时，可对各个页面进行区分
- 搜索引擎对各个页面按标题来进行收录
- favicon.ico大小(待研究)
- 移动版页面应增加移动版字样, 对搜索引擎进行页面版本判断有利，也便于用户判断
2. 路由跳转原则
- 浏览器前进回退按钮的支持程度
- 浏览器快速切换前进回退按钮时的请求不应乱序
- 进行路由跳转时，默认后的页面地址应该在地址栏进行补全(跳转后页面和跳转前页面有不同的含义)
跳转后代表一个确定的页面
跳转前代表默认页面(默认页面可实现为用户可配置)
3. 加载提示
- 接口响应时间较长时应在页面给出加载中的提示
- 如果已判断无法完成加载或加载取消，应关闭加载中提示，并给出必要的错误提示
4. 输入部件
注意检查输入过长时的交互体验
密码输入框
密码输入框建议提供可选的显示密码功能
密码输入框建议对密码安全级别进行提示
密码输入框必须对用户输入的密码进行字符串输入规则校验，复制粘贴进行输入密码时建议删除头尾不必要的空格和回车，必要时给予用户提示，以防在粘贴密码时因多输入了空格而导致密码错误
描述类输入框(暱称，评论), 注意测试对emoji表情的支持, 注意检查符号表情在win7等低版本系统的兼容性问题
手机输入框, 建议评估是否需要格式化优化显示(4-4-3), 是否需要隐藏敏感信息功能(中间四位)
5. 表格组件
不定列数表格
- 列数较少未充满屏幕时，应可自动拉伸
- 列数过多屏幕装不下时，应采用滚动条机制
- 注意表格滚动条的粗细(如果从美观角度确实需要比较细的滚动条, 那么应考虑扩大焦点范围)，方面用户易于选中
- 通常行高应定高, 不随内容而拉高
- 表格添加和删除时，表格数据刷新的问题的考量(从用户希望看到哪个范围的数据，对服务器性能压力的影响，一致性方面考量)
批量操作按钮
- 表格多选删除应只删除本页数据，如确实需要删除多页数据，应加另外一个按钮明确提示删除多页，并给出多页删除警示确认框，如果非筛选删除，则可以利用清空功能替代
6. 可拖拽类组件
- 鼠标左键进行拖拽操作时，如不予其他快捷键冲突，按住鼠标右键应该也可以拖拽，按住Ctrl,Shift,Alt键盘按键不应影响拖拽操作的有效性
- 可拖拽的按钮应按照习惯显示十字形鼠标指针
- 拖拽时可考虑对键盘上下左右按钮的支持以支持粗粒度的位置调整，可配置按住Shift按钮支持细粒度的位置调整
- 注意拖拽时的与其他组件或关键定位点的对齐提示设计
- 注意组件的复制粘贴的快捷键支持(Ctrl+C Ctrl+P)
- 注意多组件框选的支持设计（shift和鼠标方式, 鼠标框选方式）
- 有标题的组件重命名快捷点(F2, 没有其他操作冲突时支持双击重命名)重命名，Delete删除等常见键盘操作的支持
- 节点的选中效果应加载MouseDown事件(而不是click事件), 拖动应理解为拖动选中区域
但在多选拖动时应特殊处理为MouseUp事件 - 鼠标悬停效果与选中效果应有所区分
- 注意检查快捷键的触发范围(通常应该是当前获得焦点的区域)，防止在不该触发的位置触发快捷键响应(例如焦点已经在画布外围时)
- 框选类组件，注意鼠标移出画布区域后浏览器doc区域后的边界问题处理，应可保持住框选状态
7. 列表页
- 列表页的过滤选项及翻页选项应出现在浏览器url中, 使其可被分享
- 除非确保分页页数不多(在未来的一段时间内)，那么分页按钮建议包含最前一页(页少时的默认页码中的最大页对此页码时最后一页的提示不够明显)，最后一页，应该包含输入页码(可用于随机抽查数据)等按钮
- 注意慢速网络情况下，快速切换页码时的请求响应一致性问题(建议根据优缺点和实际情况选择实现方式, 哪种更优既选择策略待讨论)
1）可通过生成唯一请求id保证顺序
优点:
在用户明确错误操作时，可直接忽略上次操作而选择其它一页(通常认为此种方式概率不高)
2）可通过阻塞用户点击保证顺序(百度采用此方式)
优点:
可提示用户当前正在请求，请稍等，稍安勿躁
可避免用户的无意义操作，造成服务器压力
8. 目录树
原则: 不要偷偷摸摸的帮用户处理, 应告知
- 目录树中的节点复制
- 目录树中的节点移动
- 节点重名处理
前端排查重名问题(如果重名, 需给出用户提示, 并将失败处理当时的选择权交给用户 自动重命名, 手动重命名, 撤销操作等) 后端只做重名检查(如果重名则失败)