perf: 优化颜色生成规则

Author: D-xuanmo

packages/dl-common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xuanmo/dl-common",
-  "version": "0.0.5-beta.46",
+  "version": "0.0.5-beta.47",
   "author": {
     "name": "xuanmo",
     "email": "me@xuanmo.xin"

packages/dl-common/src/config-provider/config-provider.tsx

@@ -31,13 +31,14 @@ export default defineComponent({
     const style = {
       height: props.fullHeight ? '100%' : undefined
     }
-
     if (props.isRoot) {
       const htmlEl = document.querySelector('html')
+      const styles: string[] = []
       if (htmlEl) {
         for (const [key, value] of Object.entries(theme.value)) {
-          htmlEl.style.setProperty(key, value)
+          styles.push(`${key}: ${value};`)
         }
+        htmlEl.style.cssText += styles.join('')
       }
     } else {
       Object.assign(style, theme.value)

packages/dl-common/src/config-provider/props.ts

@@ -72,7 +72,7 @@ export const CONFIG_PROVIDER_PROPS = {
    */
   isRoot: {
     type: Boolean,
-    default: true
+    default: false
   },
 
   /**

packages/dl-common/src/config-provider/use-style.ts

@@ -35,24 +35,3 @@ export const useTheme = (props: ConfigProviderProps) => {
     return style
   })
 }
-
-export function useStyle(props: ConfigProviderProps) {
-  return computed<CSSProperties>(() => {
-    const style: CSSProperties = {
-      height: props.fullHeight ? '100%' : undefined
-    }
-    if (props.theme?.primary) {
-      Object.assign(style, generateStyle(color.generateColors(props.theme.primary), 'primary'))
-    }
-    if (props.theme?.success) {
-      Object.assign(style, generateStyle(color.generateColors(props.theme.success), 'success'))
-    }
-    if (props.theme?.warning) {
-      Object.assign(style, generateStyle(color.generateColors(props.theme.warning), 'warning'))
-    }
-    if (props.theme?.error) {
-      Object.assign(style, generateStyle(color.generateColors(props.theme.error), 'error'))
-    }
-    return style
-  })
-}

packages/dl-common/src/index.ts

@@ -10,17 +10,24 @@ import './style/index.scss'
 // 引入图标样式
 import '../../dl-icons/src/style.scss'
 
-const install = function (app: App) {
+const install = function (
+  app: App,
+  options?: {
+    primaryColor?: string
+    successColor?: string
+    warningColor?: string
+    errorColor?: string
+  }
+) {
+  color.generatePrimaryColors(options?.primaryColor)
+  color.generateSuccessColors(options?.successColor)
+  color.generateWarningColors(options?.warningColor)
+  color.generateErrorColors(options?.errorColor)
   Object.values(components).forEach((component: any) => {
     if (/^d-/.test(component?.name)) app.use(component)
   })
 }
 
-color.generatePrimaryColors()
-color.generateSuccessColors()
-color.generateWarningColors()
-color.generateErrorColors()
-
 export type ComponentNames = keyof typeof components extends infer T
   ? T extends `D${infer Name}`
     ? `D${Name}`