平臺(tái)組件方案設(shè)計(jì)

方案背景

統(tǒng)一平臺(tái)交互麻车，提升用戶體驗(yàn)撕阎，保障組件研發(fā)質(zhì)量受裹，組件穩(wěn)定性，組件可維護(hù)性虏束，在改善平臺(tái)體驗(yàn)的同時(shí)棉饶，挖掘組件的亮點(diǎn)功能

方案目標(biāo)

• 統(tǒng)一的界面視覺效果
• 統(tǒng)一的不同頁(yè)面雜亂組件
• 統(tǒng)一的交互規(guī)則
• 基于組件已有功能對(duì)組件進(jìn)行增強(qiáng)（功能，性能）
• 組件場(chǎng)景拓展（基于業(yè)務(wù)場(chǎng)景拓展組件镇匀，挖掘場(chǎng)景價(jià)值）

平臺(tái)當(dāng)前現(xiàn)狀

• 平臺(tái)組件不統(tǒng)一

  • 搜索條件未統(tǒng)一封裝 人員選擇器/ 時(shí)間/ 部門/ 項(xiàng)目/ 角色/ 組織架構(gòu)樹
  • 表格組件未統(tǒng)一封裝
  • 彈框樣式不統(tǒng)一
  • 系統(tǒng)消息通知樣式普通照藻，且不統(tǒng)一
  • 控件大小不統(tǒng)一，例如汗侵，按鈕幸缕，輸入框，
  • 統(tǒng)一樹形目錄控件場(chǎng)景

• 樣式不統(tǒng)一晰韵，不協(xié)調(diào)

  • 顏色體系混亂发乔，不協(xié)調(diào)，不像大平臺(tái)
  • 字體大小隨意雪猪，沒有打磨
  • 間距不統(tǒng)一栏尚，每個(gè)頁(yè)面是有單獨(dú)的設(shè)置
  • 圓角使用時(shí)機(jī)無(wú)規(guī)范
  • 陰影使用很隨意

• 交互不統(tǒng)一

  • 前期開發(fā)，交互上是按照開發(fā)自己發(fā)揮只恨，后期需要進(jìn)行總結(jié)译仗，例如，目錄樹的操作官觅，表格的右鍵操作纵菌，
  • 按鈕請(qǐng)求時(shí)，需要顯示loading休涤，需要有防抖處理

• 風(fēng)格不確定

  • 是ones工業(yè)風(fēng)咱圆，還是云效風(fēng)格

• 組件質(zhì)量無(wú)法保障

  • 修改后，無(wú)法保證其他組件不受影響
  • 測(cè)試覆蓋率低，需要總結(jié)使用場(chǎng)景
  • 組件要求文檔不完善闷堡，組件開發(fā)需要有文檔支撐

• 規(guī)范不統(tǒng)一

  • 界面開發(fā)后，效果無(wú)法保障基本美觀性疑故，總需要再設(shè)計(jì)

方案設(shè)計(jì)

界面規(guī)范

基礎(chǔ)規(guī)范

1. 布局規(guī)范設(shè)計(jì)

• 柵格系統(tǒng)(24列)
• 響應(yīng)式斷點(diǎn)
• 組件間距(8px倍數(shù))
• 內(nèi)容對(duì)齊方式

2. 加載狀態(tài)

• 頁(yè)面首次加載時(shí)顯示骨架屏
• 局部數(shù)據(jù)加載時(shí)顯示loading動(dòng)畫
• 提供加載超時(shí)處理機(jī)制

樣式規(guī)范設(shè)計(jì)

1. 顏色規(guī)范

• 主色調(diào)使用品牌色
• 次要色調(diào)搭配主色調(diào)
• 功能色(成功杠览、警告、錯(cuò)誤等)保持統(tǒng)一
• 中性色用于文字纵势、邊框踱阿、分割線等

2. 字體規(guī)范

• 字體家族統(tǒng)一
• 標(biāo)題字號(hào)(20px/18px/16px)
• 正文字號(hào)(14px)
• 輔助文字字號(hào)(12px)
• 字重設(shè)置(regular/medium/bold)
• 導(dǎo)航字號(hào) Logo , 一級(jí)導(dǎo)航，二級(jí)導(dǎo)航钦铁，三級(jí)導(dǎo)航

3. 間距規(guī)范

• 內(nèi)邊距(padding)使用8的倍數(shù)
• 外邊距(margin)使用8的倍數(shù)
• 組件間距保持一致
• 文本行高1.5倍字號(hào)

4. 圓角規(guī)范

• 大圓角(8px)用于卡片软舌、模態(tài)框
• 中圓角(4px)用于按鈕、輸入框
• 小圓角(2px)用于標(biāo)簽牛曹、徽標(biāo)

5. 陰影規(guī)范

• 浮層陰影(彈窗佛点、下拉菜單)
• 卡片陰影
• 按鈕點(diǎn)擊態(tài)陰影

6. 動(dòng)畫規(guī)范

• 過渡動(dòng)畫(0.3s)
• 漸入漸出效果
• hover/active狀態(tài)變化
• loading動(dòng)畫

交互規(guī)則

展示

• 超長(zhǎng)內(nèi)容使用 tooltip 展示 并顯示省略號(hào)
• 為空時(shí)顯示“--”
• 內(nèi)容均與標(biāo)題左對(duì)齊展示

鏈接 Link

• 默認(rèn)當(dāng)前頁(yè)打開
• 要能夠右鍵新開標(biāo)簽頁(yè)
• 打開新鏈接的位置需要圖標(biāo)標(biāo)識(shí)

按鈕 Button

• 防止多次點(diǎn)擊
• 帶請(qǐng)求的需要顯示loading

數(shù)字

適用場(chǎng)景

產(chǎn)品內(nèi)統(tǒng)一使用的數(shù)字顯示

規(guī)則

• 數(shù)字統(tǒng)一使用中文
• 數(shù)字統(tǒng)一使用千分位
• 數(shù)字統(tǒng)一使用小數(shù)點(diǎn)后兩位

基礎(chǔ)樣式

• 0.99
• 0.9
• 9
• 99
• 99+
• 99萬(wàn) / 188,888
• 99W
• 99%
• 99.9%
• 99.99%

日期時(shí)間

適用場(chǎng)景

產(chǎn)品內(nèi)統(tǒng)一使用的日期時(shí)間顯示

規(guī)則

• 日期時(shí)間統(tǒng)一使用中文
• 日期時(shí)間統(tǒng)一使用24小時(shí)制
• 日期時(shí)間統(tǒng)一使用小數(shù)點(diǎn)后兩位

基礎(chǔ)樣式

1.絕對(duì)時(shí)間

日期時(shí)間使用短杠鏈接 24小時(shí)制時(shí)間顯示，數(shù)字之間用“ : ”作為分隔黎比。

• 2024-01-01 12:00:00

• 2024-01-01 12:00

• 2024-01-01

• 12:00:00

• 12:00

• 星期 周一 周二 周三 周四 周五 周六 周日

• 2024年01月01日

• 用于描述時(shí)間點(diǎn)的時(shí)間單位超营。 1年1月第1周1日1時(shí)1分1秒
  2.相對(duì)時(shí)間 取值范圍

• 今天 1:00

• 昨天 1:00

• 明天 1:00

• 本周

• 本月
  時(shí)間長(zhǎng)度顯示

日期篩選

1. 篩選一天

• 今天
• 昨天
• 明天

2. 篩選一周

• 本周
• 上周
• 近7天

3. 篩選一月

• 本月
• 上月
• 近30天

4. 篩選一年

• 今年
• 去年

表格

1. 表格布局

• 字段內(nèi)容

1. 字段按照比例進(jìn)行展示，展示不全時(shí)在末尾加“...”阅虫，hover時(shí)有 tooltip 補(bǔ)全字段的內(nèi)容演闭。

2. 為空時(shí)展示“--”。

3. 內(nèi)容均與標(biāo)題左對(duì)齊展示颓帝。

• 表格操作項(xiàng)米碰，固定表尾展示（如編輯、刪除购城、啟停等）

• 表格字段自定義設(shè)置吕座，固定表尾展示

• 對(duì)表格內(nèi)容有全列表選中或有上限提示時(shí)，使用header模塊

• 對(duì)列表內(nèi)容有總計(jì)或匯總時(shí)工猜，使用footer模塊

2. 分頁(yè)

• 分頁(yè)數(shù)一般采取每頁(yè)展示 15條
• 分頁(yè)放在右邊
• 顯示總數(shù)米诉，當(dāng)前頁(yè)碼，每頁(yè)條數(shù)篷帅，總頁(yè)數(shù)

異常狀態(tài)

1. 空狀態(tài)

• 無(wú)數(shù)據(jù)時(shí)展示空狀態(tài)頁(yè)面
• 提供默認(rèn)空狀態(tài)插畫
• 可添加引導(dǎo)性文案和操作按鈕

2. 加載狀態(tài)

• 頁(yè)面首次加載時(shí)顯示骨架屏
• 局部數(shù)據(jù)加載時(shí)顯示loading動(dòng)畫
• 提供加載超時(shí)處理機(jī)制

3. 兼容處理

• 瀏覽器版本檢測(cè)與提示
• 設(shè)備兼容性檢查
• 網(wǎng)絡(luò)環(huán)境檢測(cè)

安全特性

• XSS過濾
• 敏感信息加密
• 輸入長(zhǎng)度限制
• 特殊字符過濾

組件結(jié)構(gòu)設(shè)計(jì)

基礎(chǔ)組件 (Basic)

Button 按鈕

• 主要按鈕 (Primary)
• 次要按鈕 (Secondary)
• 文本按鈕 (Text)
• 圖標(biāo)按鈕 (Icon)
• 加載中狀態(tài)
• 禁用狀態(tài)

Icon 圖標(biāo)

• SVG圖標(biāo)系統(tǒng)
• 圖標(biāo)尺寸 標(biāo)準(zhǔn)尺寸
• 圖標(biāo)顏色
• 自定義圖標(biāo)
• 素材的統(tǒng)一管理
  • 字體圖標(biāo)
  • SVG圖標(biāo)

導(dǎo)航組件 (Navigation)

NavBar 導(dǎo)航欄

• 頂部導(dǎo)航
• 側(cè)邊導(dǎo)航
• 響應(yīng)式導(dǎo)航
• 下拉菜單

Tabs 標(biāo)簽頁(yè)

• 基礎(chǔ)標(biāo)簽頁(yè)
• 卡片式標(biāo)簽頁(yè)
• 自定義標(biāo)簽頁(yè)
• 動(dòng)態(tài)增減標(biāo)簽頁(yè)

錄入組件 (Form)

輸入框 Input

• 文本輸入
• 字?jǐn)?shù)限制史侣，默認(rèn)32個(gè)字
• 禁用狀態(tài)下 不顯示灰色，而是普通文本
• 顯示字?jǐn)?shù)統(tǒng)計(jì)

時(shí)間組件 TimePicker

核心功能

Rules

• 多樣化的時(shí)間選擇模式

  日期選擇 (年/月/日)
  時(shí)間選擇 (時(shí)/分/秒)
  日期時(shí)間組合
  時(shí)間范圍選擇

• 智能時(shí)間推薦
  快捷選項(xiàng)（今天魏身、昨天惊橱、本周、本月等）
  相對(duì)時(shí)間（最近7天箭昵、近30天税朴、未來(lái)一周等）
  自定義常用時(shí)間段

選擇器 Select

• 單選下拉框
• 多選下拉框
• 可搜索選擇器
• 級(jí)聯(lián)選擇器
• 項(xiàng)目選擇器

搜索框 Search

• 輸入框搜索

  • 基礎(chǔ)搜索
  • 自動(dòng)完成搜索

• 彈框搜索選擇 *

  • 單選/多選模式
  • 支持搜索過濾
  • 自定義搜索結(jié)果展示
  • 支持分頁(yè)加載
  • 支持搜索記錄
  • 支持不同業(yè)務(wù)的適配器

人員選擇器 UserPicker

1. 選擇模式

• 單選/多選
• 部門選擇 *
• 角色選擇 *
• 組織架構(gòu)樹 *
• 常用聯(lián)系人

2. 數(shù)據(jù)展示

• 頭像展示
• 在職狀態(tài)
• 職位信息
• 所屬部門
• 聯(lián)系方式

3. 高級(jí)功能

• 快速搜索
• 拼音搜索
• 歷史記錄
• 常用群組

人員顯示

• 頭像 人名
  • 橫向/縱向

• 純頭像 / mini small large,

標(biāo)簽選擇器 TagPicker

• 單選標(biāo)簽
• 多選標(biāo)簽
• 可創(chuàng)建標(biāo)簽
• 標(biāo)簽搜索

展示組件 (Display)

通知欄 NotificationBar

• 普通通知
• 成功通知
• 警告通知
• 錯(cuò)誤通知

TODO

• 需要進(jìn)行樣式設(shè)計(jì)

卡片列表組件 *

反饋組件 (Feedback)

Dialog 對(duì)話框

• 信息對(duì)話框
  • 關(guān)閉按鈕
• 確認(rèn)對(duì)話框
  • 操作在右側(cè)
  • 先取消 后確定

Rules

• 樣式統(tǒng)一
• 不能使用esc 關(guān)閉彈框
• 不能點(diǎn)擊側(cè)邊關(guān)閉彈框
• 只能點(diǎn)擊右上角關(guān)閉

輕提示 Toast

• 成功提示
• 錯(cuò)誤提示
• 加載提示
• 自定義提示

加載 Loading

• 全屏加載
• 局部加載

業(yè)務(wù)組件

甘特圖 GanttChart

• 基礎(chǔ)甘特圖
• 可拖拽甘特圖
• 自定義甘特圖

可編輯表格 EditableTable

• 基礎(chǔ)可編輯表格
  • 能容展示
  • 操作列
• 可編輯表格
  • 可編輯
  • 可排序
  • 可過濾
  • 分組
• 高級(jí)功能
  • 支持拖拽
  • 支持右鍵操作
  • 插件系統(tǒng)
    • 可編輯組件插件
    • 業(yè)務(wù)邏輯處理插件 單元格顯示，編輯，過濾正林，排序等設(shè)置鉤子
• 基于表格的應(yīng)用
  定義應(yīng)用業(yè)務(wù)泡一，定義字段屬性，定義業(yè)務(wù)節(jié)點(diǎn)

全景圖

• 基礎(chǔ)全景圖
• 自定義全景圖

編輯器

• 富文本編輯器
• AiEditor
• Umo 編輯器
• 高級(jí)功能
  • 支持通用業(yè)務(wù)實(shí)例插入進(jìn)文本
  • 展示卡片模式
  • 可編輯卡片
  • 預(yù)覽卡片

看板

• 基礎(chǔ)看板

• 自定義看板

  • 支持看板大小拖拽
  • 支持看板單模塊查看觅廓，根據(jù)路由查看
  • 支持看板模塊全屏
  • 看板自動(dòng)刷新/手動(dòng)刷新

樹形組件 TreeComponent

使用場(chǎng)景分類

1. 目錄樹: 文件系統(tǒng)展示鼻忠，支持展開/收起、選擇等操作 (統(tǒng)一化改造)
2. 下拉選擇樹: 層級(jí)數(shù)據(jù)選擇杈绸，如組織架構(gòu)帖蔓、地區(qū)選擇 (統(tǒng)一化改造)
3. 標(biāo)簽樹: 分類標(biāo)簽展示和管理
4. 層級(jí)樹: 展示具有明確層級(jí)關(guān)系的數(shù)據(jù)結(jié)構(gòu)
5. 可選擇樹: 支持單選、多選瞳脓，適用于數(shù)據(jù)選擇場(chǎng)景

其他平臺(tái)組件

• 快捷工具欄 ：最小化彈框塑娇，下次能夠快速打開

方案計(jì)劃

基本原則

• 先出方案，后改造劫侧，（明確基本要求+其他特殊要求）
• 明確改造范圍
• 組件輸出結(jié)果可評(píng)估

統(tǒng)一化改造

平臺(tái)組件改造工作分為兩部分基礎(chǔ)組件的改造 && 業(yè)務(wù)組件的改造抽離

樣式統(tǒng)一

• 難度：☆☆
• 涉及范圍： 和新版樣式改造一起改

交互統(tǒng)一

• 難度：☆☆☆
• 涉及范圍：確認(rèn)按鈕埋酬，表格操作，

組件統(tǒng)一化改造

• 難度：☆☆☆☆
• 涉及范圍：時(shí)間控件烧栋，人員控件奇瘦，部門控件，其他表單控件劲弦，表格耳标，卡片

業(yè)務(wù)組件的改造

組件統(tǒng)一化改造完成后，需要分析決定哪些業(yè)務(wù)組件需要進(jìn)行改造

組件分類

非必要改造組件

可改造增強(qiáng)組件

• 人員選擇器

可挖掘組件

• 支持不同業(yè)務(wù)的邑跪，插件化可編輯表格組件
• 甘特圖

平臺(tái)情況摸查整理 (2d)

• 整理平臺(tái)哪些功能點(diǎn)需要改進(jìn)
• 總結(jié)分類次坡，評(píng)估時(shí)間
• 劃定改造范圍

開發(fā)人員角色工作分配

A 負(fù)責(zé)平臺(tái)統(tǒng)一

B 負(fù)責(zé)基礎(chǔ)組件開發(fā)

C 負(fù)責(zé)支援，兩方都做画畅，同時(shí)進(jìn)行檢查砸琅，查漏補(bǔ)缺

組件開發(fā)可檢查項(xiàng)（評(píng)審要求）

• 是否滿足基本的交互要求 (loading,再試，樣式規(guī)則)
• 是否滿足基本設(shè)計(jì)樣式規(guī)范
• 處理了哪些性能問題（是否有數(shù)據(jù)問題）
• 處理了哪些安全問題
• 整理哪些有可改進(jìn)方向
• 數(shù)據(jù)多的時(shí)候有沒有采用優(yōu)化方案

通用組件庫(kù)搭建

組件開發(fā)規(guī)范

目錄結(jié)構(gòu)

components/
├── basic/
├── navigation/
├── form/
├── display/
├── feedback/
└── business/

組件API設(shè)計(jì)原則

• 屬性命名語(yǔ)義化
• 提供默認(rèn)值
• 完善的類型定義
• 事件命名規(guī)范
• 插槽靈活性

樣式規(guī)范

• BEM命名規(guī)范
• 主題定制
• 響應(yīng)式設(shè)計(jì)
• CSS變量支持

內(nèi)存管理

通用能力

1. 性能優(yōu)化
   虛擬滾動(dòng)
   懶加載
   數(shù)據(jù)緩存
   按需渲染

2. 可訪問性
   鍵盤操作支持
   主題定制
   響應(yīng)式適配

3. 開發(fā)友好
   完整的單元測(cè)試
   詳細(xì)的API文檔
   豐富的示例代碼

組件質(zhì)量

單元測(cè)試

• 使用 Jest + Vue Test Utils 進(jìn)行單元測(cè)試
• 測(cè)試覆蓋率要求達(dá)到 80% 以上
• 測(cè)試用例包含:
  • 組件渲染測(cè)試
  • Props 傳值測(cè)試
  • 事件觸發(fā)測(cè)試
  • 插槽內(nèi)容測(cè)試
  • 異步行為測(cè)試
  • 邊界條件測(cè)試

組件文檔 (Storybook)

• 使用 Storybook
• 文檔結(jié)構(gòu):
  • 組件介紹
  • Props API 說(shuō)明
  • 事件說(shuō)明
  • 插槽說(shuō)明
  • 使用示例
  • 在線預(yù)覽
• 支持主題切換
• 支持代碼復(fù)制

示例工程

• 包含所有組件的使用示例
• 提供常見業(yè)務(wù)場(chǎng)景的最佳實(shí)踐
• 支持在線預(yù)覽和代碼查看
• 提供完整的工程配置說(shuō)明

性能測(cè)試

組件渲染性能測(cè)試

• 首次渲染時(shí)間
• 重渲染時(shí)間
• 內(nèi)存占用

大數(shù)據(jù)渲染測(cè)試

• 虛擬滾動(dòng)性能
• 懶加載性能

交互響應(yīng)測(cè)試

• 事件處理延遲
• 動(dòng)畫流暢度

自動(dòng)化性能測(cè)試

• 使用 Lighthouse 進(jìn)行性能評(píng)分
• 設(shè)置性能指標(biāo)基準(zhǔn)線
• 性能回歸測(cè)試

內(nèi)存管理

組件生命周期管理

數(shù)據(jù)緩存策略

數(shù)據(jù)緩存策略

性能指標(biāo)監(jiān)控

性能指標(biāo)監(jiān)控

定時(shí)器管理

組件開發(fā)規(guī)范

1. 及時(shí)銷毀

• 組件銷毀時(shí)清理所有事件監(jiān)聽
• 組件銷毀時(shí)清理所有定時(shí)器
• 組件銷毀時(shí)清理所有訂閱

2. 數(shù)據(jù)處理

• 大數(shù)據(jù)列表使用虛擬滾動(dòng)
• 及時(shí)清理不需要的數(shù)據(jù)引用
• 避免深層數(shù)據(jù)結(jié)構(gòu)

3. DOM操作

• 避免頻繁DOM操作
• 使用DocumentFragment優(yōu)化批量操作
• 及時(shí)移除不需要的DOM節(jié)點(diǎn)

代碼審查清單

1. 資源清理檢查

• 是否正確使用beforeDestroy鉤子
• 是否清理了所有事件監(jiān)聽器
• 是否清理了所有定時(shí)器
• 是否清理了所有訂閱

2. 性能檢查

• 是否使用了合適的緩存策略
• 是否處理了大數(shù)據(jù)場(chǎng)景
• 是否避免了內(nèi)存泄漏風(fēng)險(xiǎn)