perf: 优化 hooks 🍭🍭🍭

docs/components/_demos/color/demo1.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
   import { computed } from 'vue'
-  import { useCalculiColor } from '../../../../packages/fighting-design/_hooks'
+  import { useColor } from '../../../../packages/fighting-design/_hooks'
   import { onCopy } from '../_utils/copy'
   import type { ComputedRef } from 'vue'
 
@@ -9,7 +9,7 @@
 
     const allColorList: string[][] = COLOR_LIST.map((item: string): string[] => {
       const series: string[] = []
-      const { getLightColor } = useCalculiColor(item)
+      const { getLightColor } = useColor(item)
 
       for (let i = 0; i < 8; i++) {
         const background: string = getLightColor(i === 0 ? 0 : i / 10 + 0.2)

packages/fighting-design/_hooks/index.ts

@@ -4,7 +4,7 @@ export * from './use-update-input'
 export * from './use-list'
 export * from './use-props'
 export * from './use-avatar'
-export * from './use-calculi-color'
+export * from './use-color'
 export * from './use-ripples'
 export * from './use-canvas'
 export * from './use-run'

packages/fighting-design/_hooks/use-button/index.ts

@@ -1,5 +1,5 @@
 import { reactive, toRefs, inject, useSlots, computed } from 'vue'
-import { useGlobal, useList, useCalculiColor } from '..'
+import { useGlobal, useList, useColor } from '..'
 import { sizeChange } from '../../_utils'
 import { BUTTON_GROUP_PROPS_KEY } from '../../button-group/src/props'
 import type { ButtonProps } from '../../button'
@@ -57,12 +57,12 @@ export const useButton = (prop: ButtonProps): UseButtonReturn => {
     const { color, fontColor, shadow, fontSize } = prop
 
     if (prop.color) {
-      const { getLightColor, getDarkColor } = useCalculiColor(prop.color)
+      const { getLight, getDark } = useColor(prop.color)
 
       return {
         '--button-background': color || null,
-        '--button-hover': color ? getLightColor(0.4) : null,
-        '--button-active': color ? getDarkColor(0.2) : null,
+        '--button-hover': color ? getLight(0.4) : null,
+        '--button-active': color ? getDark(0.2) : null,
         '--button-color': fontColor,
         '--button-shadow': shadow,
         '--button-font-size': sizeChange(fontSize)

packages/fighting-design/_hooks/use-color/index.ts

@@ -0,0 +1,115 @@
+import type { UseColorReturn } from './interface'
+
+export * from './interface.d'
+
+/**
+ * 根据传入的 hex 计算出加深或减淡的颜色
+ *
+ * @author Tyh2001 <https://github.com/Tyh2001>
+ * @param { string } color 需要计算的颜色，必须是 16 进制色号
+ * @returns { Object } 加深原色 减淡颜色
+ */
+export const useColor = (color: string): UseColorReturn => {
+
+  /** 十六进制色号正则检测条件 */
+  const r = /^\#?[0-9A-Fa-f]{6}$/
+
+  /** 检测是否为一个有效的十六进制色号 */
+  if (!r.test(color)) {
+    throw new Error(`Fighting Design - useColor: ${color} is not a valid hex color number`)
+  }
+
+  /**
+   * 将 hex 色号转换为 rgb
+   *
+   * @returns { string[] } rgb 色号数组
+   */
+  const toRgb = (): string[] => {
+
+    /**
+     * 色号编码
+     * 
+     * @see String.prototype.replace() https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace
+     */
+    const code: string = color.replace('#', '')
+
+    /**
+     * 将字符串分隔成为数组
+     * 
+     * @see String.prototype.match() https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/match
+     */
+    const hex: string[] = code.match(/../g) as string[]
+
+    for (let i = 0; i < hex.length; i++) {
+      /**
+       * @see parseInt https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInt
+       */
+      hex[i] = parseInt(hex[i], 16).toString()
+    }
+
+    return hex
+  }
+
+  /**
+   * 将 rgb 色号转换为 hex
+   *
+   * @param { string[] } rgb rgb 色号
+   * @returns { string } hex 色号
+   */
+  const toHex = (...rgb: string[]): string => {
+    /** 获取到 hex 色号 */
+    const hex: string[] = [...rgb]
+
+    for (let i = 0; i < hex.length; i++) {
+      if (hex[i].length === 1) {
+        hex[i] = '0' + hex[i]
+      }
+    }
+
+    /**
+     * @see Array.prototype.join() https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/join
+     */
+    return '#' + hex.join('')
+  }
+
+  /**
+   * 加深颜色
+   *
+   * @param { number } [level = 0] 加深程度，默认不加深
+   * @returns { string } 加深后的色号
+   */
+  const getDark = (level = 0): string => {
+    /** 获取 rgb 颜色 */
+    const rgb: string[] = toRgb()
+
+    for (let i = 0; i < rgb.length; i++) {
+      rgb[i] = Math.floor(Number(rgb[i]) * (1 - level)).toString(16)
+    }
+
+    /** 转换成 hex 返回 */
+    return toHex(...rgb)
+  }
+
+  /**
+   * 减淡颜色
+   *
+   * @param { number } [level = 0] 减淡程度，默认不减淡
+   * @returns { string } 减淡后的色号
+   */
+  const getLight = (level = 0): string => {
+    /** 获取 rgb 颜色 */
+    const rgb: string[] = toRgb()
+
+    for (let i = 0; i < rgb.length; i++) {
+      rgb[i] = Math.floor((255 - Number(rgb[i])) * level + Number(rgb[i])).toString(16)
+    }
+
+    /** 转换成 hex 返回 */
+    return toHex(...rgb)
+  }
+
+  return {
+    getDark,
+    getLight
+  }
+}

packages/fighting-design/_hooks/use-color/interface.d.ts

@@ -0,0 +1,10 @@
+/**
+ * useColor 返回值类型接口
+ *
+ * @param { Function } getDark 加深方法
+ * @param { Function } getLight 减淡方法
+ */
+export interface UseColorReturn {
+  getDark: (level?: number) => string
+  getLight: (level?: number) => string
+}

packages/fighting-design/button/__test__/button.spec.ts

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, test } from 'vitest'
 import { FButton } from '../index'
-import { useCalculiColor } from '../../_hooks'
+import { useColor } from '../../_hooks'
 import { FIGHTING_SIZE, FIGHTING_TYPE, FIGHTING_TARGET } from '../../_tokens'
 
 describe('FButton', () => {
@@ -156,9 +156,9 @@ describe('FButton', () => {
 
   test('color', () => {
     const color = '#eeeeee'
-    const { getLightColor, getDarkColor } = useCalculiColor(color)
-    const light: string = getLightColor(0.4)
-    const dark: string = getDarkColor(0.2)
+    const { getLight, getDark } = useColor(color)
+    const light: string = getLight(0.4)
+    const dark: string = getDark(0.2)
 
     const wrapper = mount(FButton, {
       props: { color }

start/src/App.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-  const date = new Date('2023/12/2')
+  import { useColor } from '../../packages/fighting-design/_hooks'
 
-  const func = e => {
-    console.log(e)
-  }
+  const { getDark } = useColor('#333333')
+
+  console.log(getDark())
 </script>
 
 <template>
-  <f-calendar v-model:date="date" lunar :on-change-month="func" :on-change-date="func" />
+  <!-- <f-calendar v-model:date="date" lunar :on-change-month="func" :on-change-date="func" /> -->
 </template>