feat(utils): Add color utils

src/utils/color.ts

@@ -0,0 +1,155 @@
+/**
+ * 判断是否 十六进制颜色值.
+ * 输入形式可为 #fff000 #f00
+ *
+ * @param   String  color   十六进制颜色值
+ * @return  Boolean
+ */
+export function isHexColor(color: string) {
+  const reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-f]{6})$/
+  return reg.test(color)
+}
+
+/**
+ * RGB 颜色值转换为 十六进制颜色值.
+ * r, g, 和 b 需要在 [0, 255] 范围内
+ *
+ * @return  String          类似#ff00ff
+ * @param r
+ * @param g
+ * @param b
+ */
+export function rgbToHex(r: number, g: number, b: number) {
+  // tslint:disable-next-line:no-bitwise
+  const hex = ((r << 16) | (g << 8) | b).toString(16)
+  return '#' + new Array(Math.abs(hex.length - 7)).join('0') + hex
+}
+
+/**
+ * Transform a HEX color to its RGB representation
+ * @param {string} hex The color to transform
+ * @returns The RGB representation of the passed color
+ */
+export function hexToRGB(hex: string) {
+  let sHex = hex.toLowerCase()
+  if (isHexColor(hex)) {
+    if (sHex.length === 4) {
+      let sColorNew = '#'
+      for (let i = 1; i < 4; i += 1) {
+        sColorNew += sHex.slice(i, i + 1).concat(sHex.slice(i, i + 1))
+      }
+      sHex = sColorNew
+    }
+    const sColorChange: number[] = []
+    for (let i = 1; i < 7; i += 2) {
+      sColorChange.push(parseInt('0x' + sHex.slice(i, i + 2)))
+    }
+    return 'RGB(' + sColorChange.join(',') + ')'
+  }
+  return sHex
+}
+
+export function colorIsDark(color: string) {
+  if (!isHexColor(color)) return
+  const [r, g, b] = hexToRGB(color)
+    .replace(/(?:\(|\)|rgb|RGB)*/g, '')
+    .split(',')
+    .map((item) => Number(item))
+  return r * 0.299 + g * 0.578 + b * 0.114 < 192
+}
+
+/**
+ * Darkens a HEX color given the passed percentage
+ * @param {string} color The color to process
+ * @param {number} amount The amount to change the color by
+ * @returns {string} The HEX representation of the processed color
+ */
+export function darken(color: string, amount: number) {
+  color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color
+  amount = Math.trunc((255 * amount) / 100)
+  return `#${subtractLight(color.substring(0, 2), amount)}${subtractLight(
+    color.substring(2, 4),
+    amount
+  )}${subtractLight(color.substring(4, 6), amount)}`
+}
+
+/**
+ * Lightens a 6 char HEX color according to the passed percentage
+ * @param {string} color The color to change
+ * @param {number} amount The amount to change the color by
+ * @returns {string} The processed color represented as HEX
+ */
+export function lighten(color: string, amount: number) {
+  color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color
+  amount = Math.trunc((255 * amount) / 100)
+  return `#${addLight(color.substring(0, 2), amount)}${addLight(
+    color.substring(2, 4),
+    amount
+  )}${addLight(color.substring(4, 6), amount)}`
+}
+
+/* Suma el porcentaje indicado a un color (RR, GG o BB) hexadecimal para aclararlo */
+/**
+ * Sums the passed percentage to the R, G or B of a HEX color
+ * @param {string} color The color to change
+ * @param {number} amount The amount to change the color by
+ * @returns {string} The processed part of the color
+ */
+function addLight(color: string, amount: number) {
+  const cc = parseInt(color, 16) + amount
+  const c = cc > 255 ? 255 : cc
+  return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`
+}
+
+/**
+ * Calculates luminance of an rgb color
+ * @param {number} r red
+ * @param {number} g green
+ * @param {number} b blue
+ */
+function luminanace(r: number, g: number, b: number) {
+  const a = [r, g, b].map((v) => {
+    v /= 255
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4)
+  })
+  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722
+}
+
+/**
+ * Calculates contrast between two rgb colors
+ * @param {string} rgb1 rgb color 1
+ * @param {string} rgb2 rgb color 2
+ */
+function contrast(rgb1: string[], rgb2: number[]) {
+  return (
+    (luminanace(~~rgb1[0], ~~rgb1[1], ~~rgb1[2]) + 0.05) /
+    (luminanace(rgb2[0], rgb2[1], rgb2[2]) + 0.05)
+  )
+}
+
+/**
+ * Determines what the best text color is (black or white) based con the contrast with the background
+ * @param hexColor - Last selected color by the user
+ */
+export function calculateBestTextColor(hexColor: string) {
+  const rgbColor = hexToRGB(hexColor.substring(1))
+  const contrastWithBlack = contrast(rgbColor.split(','), [0, 0, 0])
+
+  return contrastWithBlack >= 12 ? '#000000' : '#FFFFFF'
+}
+
+/**
+ * Subtracts the indicated percentage to the R, G or B of a HEX color
+ * @param {string} color The color to change
+ * @param {number} amount The amount to change the color by
+ * @returns {string} The processed part of the color
+ */
+function subtractLight(color: string, amount: number) {
+  const cc = parseInt(color, 16) - amount
+  const c = cc < 0 ? 0 : cc
+  return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`
+}
+
+export function setCssVar(prop: string, val: any, dom = document.documentElement) {
+  dom.style.setProperty(prop, val)
+}

src/utils/index.ts

@@ -34,23 +34,3 @@ export function underlineToHump(str: string): string {
     return letter.toUpperCase()
   })
 }
-
-/**
- * 对象数组深拷贝
- * @param {Array,Object} source 需要深拷贝的对象数组
- * @param {Array} noClone 不需要深拷贝的属性集合
- */
-export function deepClone(source: any, noClone: string[] = []): any {
-  if (!source && typeof source !== 'object') {
-    throw new Error('error arguments deepClone')
-  }
-  const targetObj: any = source.constructor === Array ? [] : {}
-  Object.keys(source).forEach((keys: string) => {
-    if (source[keys] && typeof source[keys] === 'object' && noClone.indexOf(keys) === -1) {
-      targetObj[keys] = deepClone(source[keys], noClone)
-    } else {
-      targetObj[keys] = source[keys]
-    }
-  })
-  return targetObj
-}

src/utils/routerHelper.ts

@@ -12,7 +12,7 @@ const { wsCache } = useCache()
 const modules = import.meta.glob('../../views/**/*.{vue,tsx}')
 
 /* Layout */
-const Layout = () => import('@/layout/index.vue')
+export const Layout = () => import('@/layout/Layout.vue')
 
 export const getParentLayout = () => {
   return () =>
@@ -23,7 +23,7 @@ export const getParentLayout = () => {
     })
 }
 
-export function getRoute(route: RouteLocationNormalized): RouteLocationNormalized {
+export function getRawRoute(route: RouteLocationNormalized): RouteLocationNormalized {
   if (!route) return route
   const { matched, ...opt } = route
   return {
@@ -101,14 +101,16 @@ export function generateRoutesFn2(routes: AppRouteRecordRaw[]): AppRouteRecordRa
       meta: route.meta
     }
     if (route.component) {
-      // 动态加载路由文件，可根据实际情况进行自定义逻辑
-      const component = route.component as string
-      data.component =
-        component === '#'
-          ? Layout
-          : component.includes('##')
-          ? getParentLayout()
-          : modules[`../../${route.component}.vue`] || modules[`../../${route.component}.tsx`]
+      const comModule =
+        modules[`../../${route.component}.vue`] || modules[`../../${route.component}.tsx`]
+      if (comModule) {
+        // 动态加载路由文件，可根据实际情况进行自定义逻辑
+        const component = route.component as string
+        data.component =
+          component === '#' ? Layout : component.includes('##') ? getParentLayout() : comModule
+      } else {
+        console.error(`未找到${route.component}.vue文件或${route.component}.tsx文件，请创建`)
+      }
     }
     // recursive child routes
     if (route.children) {
@@ -155,7 +157,7 @@ function isMultipleRoute(route: AppRouteRecordRaw) {
   return flag
 }
 
-// 路由降级
+// 生成二级路由
 function promoteRouteLevel(route: AppRouteRecordRaw) {
   let router: Router | null = createRouter({
     routes: [route as unknown as RouteRecordNormalized],