[發明專利]一種基于React的通用UI庫

在審

• 申請號: 202110233671.2
• 申請日: 2021-03-03
• 公開（公告）號: CN113010156A
• 公開（公告）日: 2021-06-22
• 發明（設計）人: 王燕妮;翟會杰
• 申請（專利權）人: 西安建筑科技大學
• 主分類號: G06F8/30
• 分類號: G06F8/30;G06F8/38
• 代理公司: 西安恒泰知識產權代理事務所 61216
• 代理人: 李鄭建

1.一種基于React的通用UI庫，其特征在于，包括以下18種組件：

1)按鈕，該組件標簽名為Button，類似于HTML原生的button；相比于原生button擴展的icon、theme、loading三個屬性；icon屬性可在按鈕中自動顯示中指定的圖標，theme屬性可以在不寫CSS的情況下指定按鈕的樣式，loading屬性表示當前按鈕處于任務執行階段；

其屬性定義為：

export interface ButtonProps{

onClick？:MouseEventHandlerHTMLButtonElement

className？:string

style？:CSSProperties

theme？:string

loading？:boolean

text:ReactText

disabled？:boolean

id？:string

}

2)彈窗，該組件標簽名為Dialog，類似于原生的提示框，確認框和輸入框的組合，該組件提供了在彈出層中顯示內容的能力，并提供了類似Windows窗口的可拖動功能；使用該組件除了可以達到和使用原生提示框，確認框和輸入框一樣的效果，比原生的彈窗在樣式上更加貼合當前的網頁風格；除了提示框、確認框和輸入框之外，該組件還支持拖動窗口、輸入框輸入多行文本、輸入框輸入密碼、在彈窗中顯示網頁內容等多種功能；

其屬性定義為：

export interface IDialogOption{

maximize？:boolean

maximizable？:boolean

doubleClickTitle2Max？:boolean

resizable？:boolean

url？:string

icon？:string|ReactNode|boolean

title？:string|boolean

onResize？:DialogOnResize

onMaximizing？:DialogOnMaximize

onMaximized？:DialogOnMaximize

onClosing？:DialogOnClose

onClosed？:DialogOnClose

id？:string

buttons？:DialogButton[]

movable？:boolean

height？:ReactText

width？:ReactText

minWidth？:ReactText

minHeight？:ReactText

maxWidth？:ReactText

maxHeight？:ReactText

componentDidMount？:DialogOnClose

}

export interface DialogProps extends IDialogOption{

children:ReactNode

}

3)空狀態，該組件標簽名為Tag，原生HTML無該組件，該組件被設計用來顯示列表或表格沒有數據時的提示信息；在表格組件或其他需要顯示數據，但此時還沒有數據時的提示信息，使用戶可以一眼看出當前沒有數據而并非是錯誤導致的沒有顯示；

其屬性定義為：

export interface EmptyProps{

description？:ReactNode

icon？:ReactNode

}

4)圖標，該組件標簽名為Icon，原生HTML無該組件，該組件用來顯示圖標信息；彈窗組件的標題圖標，按鈕組件的加載圖標都是使用的該組件；

其屬性定義為：

5)加載中，該組件標簽名為Loading，原生HTML無該組件，該組件可在數據加載時給用戶以友好提示；讓用戶清楚的知道當前是在加載數據；當數據加載完成后顯示數據，如果當前沒有數據，顯示空狀態；

其屬性定義為：

6)菜單，該組件標簽名為Menu，類似于原生標簽menu，提供了原生菜單不具備的多級菜單支持、子元素支持等功能，且無需額外寫CSS樣式；有時在做管理系統時不可避免的需要用到菜單，使用該組件不需要寫大量的代碼，只需要簡單的配置就可以顯示下拉菜單或右鍵菜單；

其屬性定義為：

7)通知，該組件無顯式標簽，通過Notifications類的靜態方法調用，可在瀏覽器右上角、右下角、左上角、左下角或中心位置顯示可操作的通知條；使用該組件可以在屏幕中彈出一個提示框以告知用戶數據的變化；

其屬性定義為：

8)分頁，該組件的標簽名為Pager，原生HTML無該標簽，該組件提供了分頁顯示以及跳轉能力，使用該組件無需復雜的計算，只需要數據總數量，頁碼，頁大小就可以生成一個可點擊的分頁條；表格組件中的分頁也是使用的該組件；

其屬性定義為：

9)進度條，該組件的標簽名為Progress，原生HTML無該標簽，該組件提供了顯示耗時操作進度信息的能力，在上傳文件或加載數據的時候使用該組件可以讓用戶清楚的知道當前上傳或加載的進度信息；

其屬性定義為：

10)二維碼，該組件標簽名為QrCode，原生HTML無該標簽，該組件提供了顯示二維碼的能力，使用該組件只需要提示文本內容和圖標就可以生成一個帶圖標的二維碼，而無需編寫其他代碼；

其屬性定義為：

11)選擇器，該組件的標簽名為Select，類似于原生標簽select，提供了原生標簽不具備的搜索、動態加載和多選能力；原生select標簽只能選擇固定的內容，該組件可以選擇固定內容，也可以在下拉后讓用戶輸入內容進行本地或遠程搜索，且該組件支持多選，可以同時選擇多個選擇；

其屬性定義為：

12)評分組件，該組件標簽名為Stars，原生HTML無該標簽，該組件提供了一組可點選的元素以用做評分，且可靈活定義要顯示的星星內容和個數；主要用于服務評分、訂單評價等需要用戶打分的地方；

其屬性定義為：

13)輪播圖，該組件的標簽名為Swiper，原生HTML無該標簽，該組件提供了一種用于展示輪播內容的容器，使用該組件可直接生成輪播圖或輪播可交互內容；

其屬性定義為：

14)復選框，該組件標簽名為Checkbox，類似于原生HTML的input type＝”checkbox”/，提供了原生標簽不具備的自定義樣式功能和半選中功能；該組件除了提供和原生復選框一樣的功能外還在選中和取消時有轉場動畫，其半選中功能還可用于多級選擇時在父級展示子級的全選和非全選情況；

其屬性定義為：

15)表格，該組件標簽名為Table，類似于原生HTML的table，提供了原生標簽不具備的排序、篩選、分頁、拖動等能力；使用時無需手動寫tr，td標簽，只需把數據和數據和展示的映射關系傳給該組件，組件內部會自動把數據渲染出來；

其屬性定義為：

16)標簽，該組件標簽名為Tag，原生HTML無該標簽，該組件提供了醒目展示少量信息的能力，同時選擇框的多選展示也是使用的該組件；

其屬性定義為：

17)提示，該組件無顯示標簽，通過Toast類的靜態方法調用，該組件提示了，在網頁上方、中心、下方、右上、右下、左上、左下顯示少量提示信息的能力，可在用戶提交信息成功或失敗后在不改變頁面結構的情況下給出提示；

其屬性定義為：

18)網頁瀏覽器，該組件的標簽名為WebView，類似于原生HTML的iframe，提供了原生標簽不具備的自定義網頁window對象的能力，彈窗中的網頁使用的就是該組件；

其屬性定義為：