平台组件升级改造方案
2024-11-10 本文已影响0人
Ricoywang
平台组件方案设计
方案背景
统一平台交互，提升用户体验，保障组件研发质量，组件稳定性，组件可维护性，在改善平台体验的同时，挖掘组件的亮点功能
方案目标
- 统一的界面视觉效果
- 统一的不同页面杂乱组件
- 统一的交互规则
- 基于组件已有功能对组件进行增强（功能，性能）
- 组件场景拓展（基于业务场景拓展组件，挖掘场景价值）
平台当前现状
-
平台组件不统一
- 搜索条件未统一封装 人员选择器/ 时间/ 部门/ 项目/ 角色/ 组织架构树
- 表格组件未统一封装
- 弹框样式不统一
- 系统消息通知样式普通，且不统一
- 控件大小不统一，例如，按钮，输入框，
- 统一树形目录控件场景
-
样式不统一，不协调
- 颜色体系混乱，不协调，不像大平台
- 字体大小随意，没有打磨
- 间距不统一，每个页面是有单独的设置
- 圆角使用时机无规范
- 阴影使用很随意
-
交互不统一
- 前期开发，交互上是按照开发自己发挥，后期需要进行总结，例如，目录树的操作，表格的右键操作，
- 按钮请求时，需要显示loading，需要有防抖处理
-
风格不确定
- 是ones工业风，还是云效风格
-
组件质量无法保障
- 修改后，无法保证其他组件不受影响
- 测试覆盖率低，需要总结使用场景
- 组件要求文档不完善，组件开发需要有文档支撑
-
规范不统一
- 界面开发后，效果无法保障基本美观性，总需要再设计
方案设计
界面规范
基础规范
- 布局规范设计
- 栅格系统(24列)
- 响应式断点
- 组件间距(8px倍数)
- 内容对齐方式
- 加载状态
- 页面首次加载时显示骨架屏
- 局部数据加载时显示loading动画
- 提供加载超时处理机制
样式规范设计
- 颜色规范
- 主色调使用品牌色
- 次要色调搭配主色调
- 功能色(成功、警告、错误等)保持统一
- 中性色用于文字、边框、分割线等
- 字体规范
- 字体家族统一
- 标题字号(20px/18px/16px)
- 正文字号(14px)
- 辅助文字字号(12px)
- 字重设置(regular/medium/bold)
- 导航字号 Logo , 一级导航，二级导航，三级导航
- 间距规范
- 内边距(padding)使用8的倍数
- 外边距(margin)使用8的倍数
- 组件间距保持一致
- 文本行高1.5倍字号
- 圆角规范
- 大圆角(8px)用于卡片、模态框
- 中圆角(4px)用于按钮、输入框
- 小圆角(2px)用于标签、徽标
- 阴影规范
- 浮层阴影(弹窗、下拉菜单)
- 卡片阴影
- 按钮点击态阴影
- 动画规范
- 过渡动画(0.3s)
- 渐入渐出效果
- hover/active状态变化
- loading动画
交互规则
展示
- 超长内容使用 tooltip 展示 并显示省略号
- 为空时显示“--”
- 内容均与标题左对齐展示
链接 Link
- 默认当前页打开
- 要能够右键新开标签页
- 打开新链接的位置需要图标标识
按钮 Button
- 防止多次点击
- 带请求的需要显示loading
数字
适用场景
产品内统一使用的数字显示
规则
- 数字统一使用中文
- 数字统一使用千分位
- 数字统一使用小数点后两位
基础样式
- 0.99
- 0.9
- 9
- 99
- 99+
- 99万 / 188,888
- 99W
- 99%
- 99.9%
- 99.99%
日期时间
适用场景
产品内统一使用的日期时间显示
规则
- 日期时间统一使用中文
- 日期时间统一使用24小时制
- 日期时间统一使用小数点后两位
基础样式
1.绝对时间
日期时间使用短杠链接 24小时制时间显示，数字之间用“ : ”作为分隔。
-
2024-01-01 12:00:00
-
2024-01-01 12:00
-
2024-01-01
-
12:00:00
-
12:00
-
星期 周一 周二 周三 周四 周五 周六 周日
-
2024年01月01日
-
用于描述时间点的时间单位。 1年1月第1周1日1时1分1秒
2.相对时间 取值范围 -
今天 1:00
-
昨天 1:00
-
明天 1:00
-
本周
-
本月
时间长度显示
| 时间单位 | 过去 | 当前 | 未来 |
|---|---|---|---|
| 年 | 1年前 | 近1年 | 1年后 |
| 月 | 1月前 | 近1月 | 1月后 |
| 周 | 1周前 | 近1周 | 1周后 |
| 小时 | 1小时前 | 近1小时 | 1小时后 |
| 分钟 | 1分钟前 | 近1分钟 | 1分钟后 |
| 秒 | 1秒前 | 近1秒 | 1秒后 |
日期筛选
- 筛选一天
- 今天
- 昨天
- 明天
- 筛选一周
- 本周
- 上周
- 近7天
- 筛选一月
- 本月
- 上月
- 近30天
- 筛选一年
- 今年
- 去年
表格
- 表格布局
- 字段内容
-
字段按照比例进行展示，展示不全时在末尾加“...”，hover时有 tooltip 补全字段的内容。
-
为空时展示“--”。
-
内容均与标题左对齐展示。
-
表格操作项，固定表尾展示（如编辑、删除、启停等）
-
表格字段自定义设置，固定表尾展示
-
对表格内容有全列表选中或有上限提示时，使用header模块
-
对列表内容有总计或汇总时，使用footer模块
- 分页
- 分页数一般采取每页展示 15条
- 分页放在右边
- 显示总数，当前页码，每页条数，总页数
异常状态
- 空状态
- 无数据时展示空状态页面
- 提供默认空状态插画
- 可添加引导性文案和操作按钮
- 加载状态
- 页面首次加载时显示骨架屏
- 局部数据加载时显示loading动画
- 提供加载超时处理机制
- 兼容处理
- 浏览器版本检测与提示
- 设备兼容性检查
- 网络环境检测
安全特性
- XSS过滤
- 敏感信息加密
- 输入长度限制
- 特殊字符过滤
组件结构设计
基础组件 (Basic)
Button 按钮
- 主要按钮 (Primary)
- 次要按钮 (Secondary)
- 文本按钮 (Text)
- 图标按钮 (Icon)
- 加载中状态
- 禁用状态
Icon 图标
- SVG图标系统
- 图标尺寸 标准尺寸
- 图标颜色
- 自定义图标
- 素材的统一管理
- 字体图标
- SVG图标
导航组件 (Navigation)
NavBar 导航栏
- 顶部导航
- 侧边导航
- 响应式导航
- 下拉菜单
Tabs 标签页
- 基础标签页
- 卡片式标签页
- 自定义标签页
- 动态增减标签页
录入组件 (Form)
输入框 Input
- 文本输入
- 字数限制，默认32个字
- 禁用状态下 不显示灰色，而是普通文本
- 显示字数统计
时间组件 TimePicker
核心功能
Rules
-
多样化的时间选择模式
日期选择 (年/月/日)
时间选择 (时/分/秒)
日期时间组合
时间范围选择 -
智能时间推荐
快捷选项（今天、昨天、本周、本月等）
相对时间（最近7天、近30天、未来一周等）
自定义常用时间段
选择器 Select
- 单选下拉框
- 多选下拉框
- 可搜索选择器
- 级联选择器
- 项目选择器
搜索框 Search
-
输入框搜索
- 基础搜索
- 自动完成搜索
-
弹框搜索选择 *
- 单选/多选模式
- 支持搜索过滤
- 自定义搜索结果展示
- 支持分页加载
- 支持搜索记录
- 支持不同业务的适配器
人员选择器 UserPicker
- 选择模式
- 单选/多选
- 部门选择 *
- 角色选择 *
- 组织架构树 *
- 常用联系人
- 数据展示
- 头像展示
- 在职状态
- 职位信息
- 所属部门
- 联系方式
- 高级功能
- 快速搜索
- 拼音搜索
- 历史记录
- 常用群组
人员显示
- 头像 人名
- 横向/纵向
-
纯头像 / mini small large,
标签选择器 TagPicker
- 单选标签
- 多选标签
- 可创建标签
- 标签搜索
展示组件 (Display)
通知栏 NotificationBar
- 普通通知
- 成功通知
- 警告通知
- 错误通知
TODO
- 需要进行样式设计
卡片列表组件 *
反馈组件 (Feedback)
Dialog 对话框
- 信息对话框
- 关闭按钮
- 确认对话框
- 操作在右侧
- 先取消 后确定
Rules
- 样式统一
- 不能使用esc 关闭弹框
- 不能点击侧边关闭弹框
- 只能点击右上角关闭
轻提示 Toast
- 成功提示
- 错误提示
- 加载提示
- 自定义提示
加载 Loading
- 全屏加载
- 局部加载
业务组件
甘特图 GanttChart
- 基础甘特图
- 可拖拽甘特图
- 自定义甘特图
可编辑表格 EditableTable
- 基础可编辑表格
- 能容展示
- 操作列
- 可编辑表格
- 可编辑
- 可排序
- 可过滤
- 分组
- 高级功能
- 支持拖拽
- 支持右键操作
- 插件系统
- 可编辑组件插件
- 业务逻辑处理插件 单元格显示，编辑，过滤，排序等设置钩子
- 基于表格的应用
定义应用业务，定义字段属性，定义业务节点
全景图
- 基础全景图
- 自定义全景图
编辑器
- 富文本编辑器
- AiEditor
- Umo 编辑器
- 高级功能
- 支持通用业务实例插入进文本
- 展示卡片模式
- 可编辑卡片
- 预览卡片
看板
-
基础看板
-
自定义看板
- 支持看板大小拖拽
- 支持看板单模块查看，根据路由查看
- 支持看板模块全屏
- 看板自动刷新/手动刷新
树形组件 TreeComponent
使用场景分类
- 目录树: 文件系统展示，支持展开/收起、选择等操作 (统一化改造)
- 下拉选择树: 层级数据选择，如组织架构、地区选择 (统一化改造)
- 标签树: 分类标签展示和管理
- 层级树: 展示具有明确层级关系的数据结构
- 可选择树: 支持单选、多选，适用于数据选择场景
其他平台组件
- 快捷工具栏 ：最小化弹框，下次能够快速打开
方案计划
基本原则
- 先出方案，后改造，（明确基本要求+其他特殊要求）
- 明确改造范围
- 组件输出结果可评估
统一化改造
平台组件改造工作分为两部分基础组件的改造 && 业务组件的改造抽离
样式统一
- 难度：☆☆
- 涉及范围： 和新版样式改造一起改
交互统一
- 难度：☆☆☆
- 涉及范围：确认按钮，表格操作，
组件统一化改造
- 难度：☆☆☆☆
- 涉及范围：时间控件，人员控件，部门控件，其他表单控件，表格，卡片
业务组件的改造
组件统一化改造完成后，需要分析决定哪些业务组件需要进行改造
组件分类
非必要改造组件
可改造增强组件
- 人员选择器
可挖掘组件
- 支持不同业务的，插件化可编辑表格组件
- 甘特图
平台情况摸查整理 (2d)
- 整理平台哪些功能点需要改进
- 总结分类，评估时间
- 划定改造范围
开发人员角色工作分配
A 负责平台统一
B 负责基础组件开发
C 负责支援，两方都做，同时进行检查，查漏补缺
组件开发可检查项（评审要求）
- 是否满足基本的交互要求 (loading,再试，样式规则)
- 是否满足基本设计样式规范
- 处理了哪些性能问题（是否有数据问题）
- 处理了哪些安全问题
- 整理哪些有可改进方向
- 数据多的时候有没有采用优化方案
通用组件库搭建
组件开发规范
目录结构
components/
├── basic/
├── navigation/
├── form/
├── display/
├── feedback/
└── business/
组件API设计原则
- 属性命名语义化
- 提供默认值
- 完善的类型定义
- 事件命名规范
- 插槽灵活性
样式规范
- BEM命名规范
- 主题定制
- 响应式设计
- CSS变量支持
内存管理
通用能力
-
性能优化
虚拟滚动
懒加载
数据缓存
按需渲染 -
可访问性
键盘操作支持
主题定制
响应式适配 -
开发友好
完整的单元测试
详细的API文档
丰富的示例代码
组件质量
单元测试
- 使用 Jest + Vue Test Utils 进行单元测试
- 测试覆盖率要求达到 80% 以上
- 测试用例包含:
- 组件渲染测试
- Props 传值测试
- 事件触发测试
- 插槽内容测试
- 异步行为测试
- 边界条件测试
组件文档 (Storybook)
- 使用 Storybook
- 文档结构:
- 组件介绍
- Props API 说明
- 事件说明
- 插槽说明
- 使用示例
- 在线预览
- 支持主题切换
- 支持代码复制
示例工程
- 包含所有组件的使用示例
- 提供常见业务场景的最佳实践
- 支持在线预览和代码查看
- 提供完整的工程配置说明
性能测试
组件渲染性能测试
- 首次渲染时间
- 重渲染时间
- 内存占用
大数据渲染测试
- 虚拟滚动性能
- 懒加载性能
交互响应测试
- 事件处理延迟
- 动画流畅度
自动化性能测试
- 使用 Lighthouse 进行性能评分
- 设置性能指标基准线
- 性能回归测试
内存管理
组件生命周期管理
数据缓存策略
数据缓存策略
性能指标监控
性能指标监控
定时器管理
组件开发规范
- 及时销毁
- 组件销毁时清理所有事件监听
- 组件销毁时清理所有定时器
- 组件销毁时清理所有订阅
- 数据处理
- 大数据列表使用虚拟滚动
- 及时清理不需要的数据引用
- 避免深层数据结构
- DOM操作
- 避免频繁DOM操作
- 使用DocumentFragment优化批量操作
- 及时移除不需要的DOM节点
代码审查清单
- 资源清理检查
- 是否正确使用beforeDestroy钩子
- 是否清理了所有事件监听器
- 是否清理了所有定时器
- 是否清理了所有订阅
- 性能检查
- 是否使用了合适的缓存策略
- 是否处理了大数据场景
- 是否避免了内存泄漏风险
