本文作者：GaoNeng

大家好啊，又是我GaoNeng。最近在給OpenTiny做貢獻(xiàn)，感覺renderless這個(gè)架構(gòu)還是挺有意思的，就貢獻(xiàn)了一個(gè)color-picker組件，簡單寫篇文章稍微記錄一下。

也歡迎朋友們給 TinyVue 開源項(xiàng)目點(diǎn)個(gè) Star ??支持下：

https://github.com/opentiny/tiny-vue

閱讀完本文，你將會獲得如下收獲

• HSV，HSL，HEX，RGB的區(qū)別

• HSV色彩空間下，SV到XY的雙向轉(zhuǎn)換

• ColorPicker 組件的實(shí)現(xiàn)原理

• OpenTiny 新組件開發(fā)全流程

1 事情的起因

故事的發(fā)生非常的偶然。我在翻opentiny倉庫issue的時(shí)候，偶然看到了這么一條

之前也在掘金上看過opentiny的介紹，感覺還不錯(cuò)，但是又搶不到組件。這一次終于讓我搶到一個(gè)空閑組件了，于是我立刻就回復(fù)了。

2 初步分析

一般寫組件前只考慮兩個(gè)問題

1. 長什么樣

2. 邏輯是什么

color-picker顏色選擇組件用于在應(yīng)用程序和界面中讓用戶選擇顏色。它是一個(gè)交互式的元素，通常由一個(gè)色彩光譜、色相環(huán)和顏色值輸入框組成，用戶可以通過這些元素來選擇所需的顏色。ColorPicker的主要功能是讓用戶能夠精確地選擇特定的顏色，以便在應(yīng)用程序的各種元素中使用。

組件效果如下：

ColorPicker 組件主要包含四個(gè)子組件?飽和度選擇,?色相選擇,?alpha選擇,?工具欄。比較簡單，所以就沒畫圖。主要的問題在于邏輯，也就是選擇什么樣的色彩空間更貼合用戶的日常使用和直觀體驗(yàn)。

常見的色彩空間分為?HSV,?HSL,?CMY,?CMYK,?HSB,RGB,?LAB,?YUB,?YCrCb

前端最常見的應(yīng)該是HSV,HSL,RGB這三種。LAB,?YUB,?YCrCb在日常業(yè)務(wù)中比較少見。

3 色彩空間基礎(chǔ)知識

HSV, HSL, HEX, RGB 都是什么呢？

HSV,HSL,RGB都是色彩空間。而HEX可以看作是RGB的另一種表達(dá)方法。

3.1 什么是色彩空間？

色彩空間是為了讓人們更好的認(rèn)識色彩而建立的一種抽象的數(shù)學(xué)模型，它是將數(shù)值分布在N維的坐標(biāo)系中，幫助人們更好地認(rèn)識和理解色彩。

例如RGB色彩空間，就是將RGB分量映射在三維笛卡爾坐標(biāo)系中。分量的數(shù)量代表該分量的亮度值。下圖是經(jīng)過歸一處理的RGB色彩空間示意圖

而HSV與HSL色彩空間都是將顏色映射到了柱坐標(biāo)系。下圖展示了HSV與HSL的示意圖

HSV

HSL

3.2 HSV,HSL,RGB 孰優(yōu)孰劣？

了解了HSV,HSL,RGB色彩空間及其表達(dá)方法，我們需要考慮究竟哪一種色彩空間對于人類更加的直觀呢？要不問問萬能的音理吧

啊這，她說不知道。那看來只能問問萬能的chat-gpt了

不愧是你，chatgpt總是能救我于危難之間。不過話又說回來，HSL與HSV都很直觀，只是一個(gè)是V(Value)另一個(gè)是L(lightness)。兩種色彩空間的柱坐標(biāo)系如下圖所示

HSV

HSL

可以看到，HSV越偏向右上角飽和度和亮度越高。但HSL則是偏向于截面的中間飽和度和亮度越高。

在PS和其他軟件中，也大都選擇了HSV作為選色時(shí)的色彩空間。為了保持統(tǒng)一，color-picker組件也選擇了HSV作為選色時(shí)的色彩空間。

3.3 SV與XY的雙向轉(zhuǎn)換

飽和度選擇的時(shí)候，我們需要將XY分量轉(zhuǎn)為SV分量。這存在一種表達(dá)方式。SV與XY存在一種計(jì)算關(guān)系

其中width與height均為容器的寬度和高度, XY為光標(biāo)位置。

4 組件設(shè)計(jì)

和普通組件開發(fā)不同，tinyvue是將邏輯抽離到了renderless下。這樣做可以讓開發(fā)者更著重于邏輯的編寫。單測也更好測，測試的時(shí)候如果你想，可以只測renderless和被抽象的邏輯，UI層面甚至可以不測（因?yàn)閁I主要是各個(gè)庫來做渲染和依賴跟蹤，單測是最小的可測試單元，所以庫可以mock掉，只測renderless）。

一個(gè)完整的組件至少要有以下幾個(gè)要素

• 組件

• 
  

• UI

• 邏輯

• 類型

• 文檔

• 
  

• 中文

• 英文

• 測試

• 
  

• 單測

• E2E測試

4.1 目錄梳理

tiny-vue?簡化目錄如下所示. 帶有!前綴的文件表示必選，?前綴的文件表示可選

例如!index.js表示index.js是必選的。

4.2 模塊設(shè)計(jì)

在tiny-vue下輸入?pnpm create:ui color-picker?就可以創(chuàng)建最基本的模板了。

color-picker?組件主要分為以下幾個(gè)部分。因?yàn)闀r(shí)間原因，在這里只講解trigger與tools

• trigger

• color-select

• sv-select

• hue-select

• alpha-select

• tools

他們的層級關(guān)系是這樣的

4.3 Props 定義

開發(fā)組件，我習(xí)慣先思考入?yún)⒑褪录?。入?yún)⑽沂窃O(shè)計(jì)這樣的

事件則是

設(shè)計(jì)完成后，我們就可以開始開發(fā)了

5 組件開發(fā)

trigger是ColorPicker組件的關(guān)鍵模塊，主要控制color-select,?alpha-select,?tools的顯示狀態(tài)。

5.1 組件模板開發(fā)

我們先來描述一下trigger的狀態(tài)都有哪些

理順清楚狀態(tài)后，我們終于可以開始寫第一行代碼了

寫完上述代碼之后，我們將會獲得一個(gè)沒有交互邏輯的空殼。但是，先別著急，我們繼續(xù)寫下去

5.2 組件邏輯開發(fā)

TinyVue主打一個(gè)關(guān)注點(diǎn)分離，所以這里簡單介紹一下renderless的大概框架

現(xiàn)在我們來補(bǔ)充邏輯

補(bǔ)全上述代碼后，運(yùn)行pnpm run dev打開http://localhost:7130/，我們會發(fā)現(xiàn)在側(cè)邊無法搜索到自己的組件。這是因?yàn)?code>menu.js下沒有我們的組件，現(xiàn)在我們要開始編寫文檔

5.3 組件文檔

打開?tiny-vue/examples/sites/demos/menus.js?找到?cmpMenus?變量。color-picker應(yīng)該是算作表單組件，所以我們需要在表單組件的children字段下新增我們的組件

之后，我們要在demos/app下，新建color-picker文件夾。目錄要求如下

[component-name].js?該文件主要用于闡述組件props，event，slots等信息。

現(xiàn)在我們來補(bǔ)充示例

之后，我們運(yùn)行pnpm dev，打開瀏覽器http://localhost:7130/pc/color-picker/basic-usage后就可以看到一個(gè)剛剛寫的示例了

目前還比較簡陋，我們可以加入一點(diǎn)樣式

5.4 主題變量

因?yàn)橐m配多套主題，所以我們先來引用一下變量。更多的變量可以在?tiny-vue/packages/theme/src/vars.less?中找到

之后我們就可以愉快的開始寫樣式了，樣式統(tǒng)一都寫在?tiny-vue/packages/theme/src/<component-name>/index.less?中，如果單個(gè)樣式文件過大可以考慮拆分，最好按照?tiny-vue/packages/theme/src/<component-name>/<child-component-name>.less?來進(jìn)行拆分。color-picker樣式不算太大，所以就沒做拆分。

但是目前這樣就可以了么？還不行，TinyVue自己做了一套適配層，組件開發(fā)時(shí)不允許導(dǎo)入Vue，這意味著我們需要自己來寫類型

5.4 類型聲明

因?yàn)槲覀冞@里只需要Ref，所以寫起來很簡單。

之后修改renderless/color-picker/index.ts即可

5.5?國際化

我們的組件需要進(jìn)行i18n的處理。因?yàn)樾枰脩糇约菏謩?dòng)點(diǎn)擊確認(rèn)按鈕來確認(rèn)顏色。但并不是所有用戶都是中國人，所以我們要進(jìn)行i18n的適配。現(xiàn)在我們回到pc.vue增加如下

sv-select、hue-select、alpha-select因?yàn)闀r(shí)間原因不做介紹，有興趣可以自行前往TinyVue倉庫觀看。

增加完上述代碼后，我們需要前往vue-locale/src/lang/zh-CN.ts文件和vue-locale/src/lang/en-US.ts文件添加字段。因?yàn)槠颍谶@里省略了其他組建的i18字段

補(bǔ)充好zh-CN與en-US后，再次返回文檔，就可以看到完整的組件了(下圖未開啟alpha選擇)

總結(jié)

本文主要介紹了HSV,HSL,RGB色彩空間及其數(shù)學(xué)表達(dá)方法，并分析了SV與二維XY的互相轉(zhuǎn)換原理，最后以 ColorPicker 組件為例子，總結(jié)了 tiny-vue 組件開發(fā)的流程。

主要包含：

1. 組件模塊設(shè)計(jì)

2. 組件 API 定義

3. 組件模板和邏輯開發(fā)

4. 組件文檔編寫

5. 主題變量

6. 類型聲明

7. 組件的國際化

如有錯(cuò)漏之處，還望斧正。

OpenTiny 社區(qū)招募貢獻(xiàn)者啦

OpenTiny Vue 正在招募社區(qū)貢獻(xiàn)者，歡迎加入我們??

你可以通過以下方式參與貢獻(xiàn)：

• 在?issue?列表中選擇自己喜歡的任務(wù)

• 閱讀貢獻(xiàn)者指南，開始參與貢獻(xiàn)

你可以根據(jù)自己的喜好認(rèn)領(lǐng)以下類型的任務(wù)：

• 編寫單元測試

• 修復(fù)組件缺陷

• 為組件添加新特性

• 完善組件的文檔

如何貢獻(xiàn)單元測試：

• 在packages/vue目錄下搜索it.todo關(guān)鍵字，找到待補(bǔ)充的單元測試

• 按照以上指南編寫組件單元測試

• 執(zhí)行單個(gè)組件的單元測試：pnpm test:unit3 button

如果你是一位經(jīng)驗(yàn)豐富的開發(fā)者，想接受一些有挑戰(zhàn)的任務(wù)，可以考慮以下任務(wù)：

• ? [Feature]: 希望提供 Skeleton 骨架屏組件

• ? [Feature]: 希望提供 Divider 分割線組件

• ??[Feature]: tree樹形控件能增加虛擬滾動(dòng)功能

• ??[Feature]: 增加視頻播放組件

• ??[Feature]: 增加思維導(dǎo)圖組件

• ??[Feature]: 添加類似飛書的多維表格組件

• ??[Feature]: 添加到 unplugin-vue-components

• ??[Feature]: 兼容formily

參與 OpenTiny 開源社區(qū)貢獻(xiàn)，你將收獲：

直接的價(jià)值：

1. 通過參與一個(gè)實(shí)際的跨端、跨框架組件庫項(xiàng)目，學(xué)習(xí)最新的Vite+Vue3+TypeScript+Vitest技術(shù)

2. 學(xué)習(xí)從 0 到 1 搭建一個(gè)自己的組件庫的整套流程和方法論，包括組件庫工程化、組件的設(shè)計(jì)和開發(fā)等

3. 為自己的簡歷和職業(yè)生涯添彩，參與過優(yōu)秀的開源項(xiàng)目，這本身就是受面試官青睞的亮點(diǎn)

4. 結(jié)識一群優(yōu)秀的、熱愛學(xué)習(xí)、熱愛開源的小伙伴，大家一起打造一個(gè)偉大的產(chǎn)品

長遠(yuǎn)的價(jià)值：

1. 打造個(gè)人品牌，提升個(gè)人影響力

2. 培養(yǎng)良好的編碼習(xí)慣

3. 獲得華為云 OpenTiny 團(tuán)隊(duì)的榮譽(yù)和定制小禮物

4. 受邀參加各類技術(shù)大會

5. 成為 PMC 和 Committer 之后還能參與 OpenTiny 整個(gè)開源生態(tài)的決策和長遠(yuǎn)規(guī)劃，培養(yǎng)自己的管理和規(guī)劃能力

6. 未來有更多機(jī)會和可能

關(guān)于 OpenTiny

OpenTiny 是一套企業(yè)級組件庫解決方案，適配 PC 端 / 移動(dòng)端等多端，涵蓋 Vue2 / Vue3 / Angular 多技術(shù)棧，擁有主題配置系統(tǒng) / 中后臺模板 / CLI 命令行等效率提升工具，可幫助開發(fā)者高效開發(fā) Web 應(yīng)用。

核心亮點(diǎn)：

1. 跨端跨框架：使用 Renderless 無渲染組件設(shè)計(jì)架構(gòu)，實(shí)現(xiàn)了一套代碼同時(shí)支持 Vue2 / Vue3，PC / Mobile 端，并支持函數(shù)級別的邏輯定制和全模板替換，靈活性好、二次開發(fā)能力強(qiáng)。

2. 組件豐富：PC 端有100+組件，移動(dòng)端有30+組件，包含高頻組件 Table、Tree、Select 等，內(nèi)置虛擬滾動(dòng)，保證大數(shù)據(jù)場景下的流暢體驗(yàn)，除了業(yè)界常見組件之外，我們還提供了一些獨(dú)有的特色組件，如：Split 面板分割器、IpAddress IP地址輸入框、Calendar 日歷、Crop 圖片裁切等

3. 配置式組件：組件支持模板式和配置式兩種使用方式，適合低代碼平臺，目前團(tuán)隊(duì)已經(jīng)將 OpenTiny 集成到內(nèi)部的低代碼平臺，針對低碼平臺做了大量優(yōu)化

4. 周邊生態(tài)齊全：提供了基于 Angular + TypeScript 的 TinyNG 組件庫，提供包含 10+ 實(shí)用功能、20+ 典型頁面的 TinyPro 中后臺模板，提供覆蓋前端開發(fā)全流程的 TinyCLI 工程化工具，提供強(qiáng)大的在線主題配置平臺 TinyTheme

聯(lián)系我們：

• 官方公眾號：OpenTiny

• OpenTiny 官網(wǎng)：https://opentiny.design/

• OpenTiny 代碼倉庫：https://github.com/opentiny/

• Vue 組件庫：https://github.com/opentiny/tiny-vue?（歡迎 Star）

• Angluar組件庫：https://github.com/opentiny/ng?（歡迎 Star）

• CLI工具：https://github.com/opentiny/tiny-cli?（歡迎 Star）

更多視頻內(nèi)容也可以關(guān)注OpenTiny社區(qū)，B站/抖音/小紅書/視頻號。