feat: 新增边框

src/utils/style.ts

@@ -1,4 +1,48 @@
 import { useDesignStore } from '@/store/modules/designStore/designStore'
+import Color from 'color'
+
+/**
+ * * hsla 转换 
+ * @param color 颜色
+ * @param alpha 默认1
+ * @returns 
+ */
+export function alpha(color: string, alpha = 1 ) {
+  return Color(color).alpha(alpha).toString()
+}
+
+/**
+ * * 颜色透明
+ * rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 0.4)
+ * @param color 颜色
+ * @param concentration 0~1 浓度
+ * @returns 
+ */
+export function fade(color: string, fade: number) {
+  return Color(color).fade(fade).toString()
+}
+
+/**
+ * * 颜色变亮
+ * hsl(100, 50%, 10%) -> hsl(100, 50%, 50%)
+ * @param color 颜色
+ * @param concentration 0~1 浓度
+ * @returns 
+ */
+export function lighten(color: string, concentration: number) {
+  return Color(color).lighten(concentration).toString()
+}
+
+/**
+ * * 颜色变暗
+ * hsl(100, 50%, 50%) -> hsl(100, 50%, 25%)
+ * @param color 颜色
+ * @param concentration 0~1 浓度
+ * @returns 
+ */
+export function darken(color: string, concentration: number) {
+  return Color(color).darken(concentration).toString()
+}
 
 /**
  * * 修改主题色
@@ -13,31 +57,4 @@ export const setHtmlTheme = (themeName?: string) => {
   }
   const designStore = useDesignStore()
   e.setAttribute('data-theme', designStore.themeName)
-}
-
-/**
- * * 将通过的百分比与十六进制颜色的R、G或B相加
- * @param {string} color
- * @param {number} amount
- * @returns {string} color
- */
-const addLight = (color: string, amount: number): string => {
-  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)}`
-}
-
-/**
- * * 根据通过的百分比点亮6个字符的十六进制颜色
- * @param {string} color
- * @param {number} amount
- * @returns {string} color
- */
-export const toLight = (color: string, amount: number): string => {
-  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)}`
-}
+}