v3.1.7

cfg.ts

@@ -60,7 +60,7 @@ const config: AppConfigExport = {
     /** 主题色 */
     primaryColor: '#2d8cf0',
     /** 主题辅助色(用于整体 hover、active 等之类颜色) */
-    primaryFadeColor: 'rgba(45, 140, 240, 0.25)',
+    primaryFadeColor: 'rgba(45, 140, 240, 0.3)',
   },
   /**
    *

src/App.tsx

@@ -5,7 +5,7 @@ import GlobalSpin from '@/spin/index'
 import { getCache } from '@/utils/cache'
 import { get } from 'lodash-es'
 import { useSetting } from '@/store'
-import { addClass, removeClass, addStyle } from '@/utils/element'
+import { addClass, removeClass, addStyle, colorToRgba } from '@/utils/element'
 
 const App = defineComponent({
   name: 'App',
@@ -14,6 +14,28 @@ const App = defineComponent({
 
     const { themeValue } = storeToRefs(settingStore)
 
+    /** 同步主题色变量至 body, 如果未获取到缓存值则已默认值填充 */
+    const syncPrimaryColorToBody = () => {
+      const {
+        appPrimaryColor: { primaryColor, primaryFadeColor },
+      } = __APP_CFG__ // 默认主题色
+      const body = document.body
+
+      const primaryColorOverride = getCache('piniaSettingStore', 'localStorage')
+      const _p = get(
+        primaryColorOverride,
+        'primaryColorOverride.common.primaryColor',
+      )
+      const _fp = colorToRgba(_p, 0.3)
+
+      /** 设置全局主题色 css 变量 */
+      body.style.setProperty('--ray-theme-primary-color', _p || primaryColor)
+      body.style.setProperty(
+        '--ray-theme-primary-fade-color',
+        _fp || primaryFadeColor,
+      )
+    }
+
     /** 隐藏加载动画 */
     const hiddenLoadingAnimation = () => {
       /** pre-loading-animation 是默认 id */
@@ -26,6 +48,7 @@ const App = defineComponent({
       }
     }
 
+    syncPrimaryColorToBody()
     hiddenLoadingAnimation()
 
     /** 切换主题时, 同步更新 body class 以便于进行自定义 css 配置 */

src/components/RayTable/src/components/TableSetting/index.scss

@@ -28,12 +28,12 @@
 
     &.draggable-item--dark {
       &:hover {
-        background-color: $hoverDarkBackgroundColor;
+        background-color: var(--ray-theme-primary-fade-color);
       }
     }
 
     &:hover {
-      background-color: $hoverLightBackgroundColor;
+      background-color: var(--ray-theme-primary-fade-color);
 
       & .draggable-item__d--icon {
         opacity: 1;

src/components/RayTable/src/components/TableSize/index.scss

@@ -26,7 +26,7 @@
 
           &.dropdown-item--active,
           &:hover {
-            background-color: $hoverLightBackgroundColor;
+            background-color: var(--ray-theme-primary-fade-color);
             color: var(--ray-theme-primary-color);
           }
         }
@@ -38,7 +38,7 @@
 .ray-template--dark {
   & .table-size__dropdown-wrapper {
     & .dropdown-item:hover {
-      background-color: $hoverDarkBackgroundColor;
+      background-color: var(--ray-theme-primary-fade-color);
       color: var(--ray-theme-primary-color);
     }
   }

src/layout/components/SiderBar/Components/GlobalSeach/index.scss

@@ -67,7 +67,6 @@
       background-color: #2f2f2f;
 
       &:hover {
-        // background-color: $hoverDarkBackgroundColor;
         background-color: var(--ray-theme-primary-fade-color);
       }
     }
@@ -82,7 +81,7 @@
       background-color: #ffffff;
 
       &:hover {
-        background-color: $hoverLightBackgroundColor;
+        background-color: var(--ray-theme-primary-fade-color);
       }
     }
   }

src/store/modules/setting.ts

@@ -65,7 +65,7 @@ export const useSetting = defineStore(
       body.style.setProperty('--ray-theme-primary-color', value)
       body.style.setProperty(
         '--ray-theme-primary-fade-color',
-        colorToRgba(value, 0.25),
+        colorToRgba(value, 0.3),
       )
     }
 

src/styles/theme.scss

@@ -6,5 +6,3 @@
 
 $iconSpace: 5px;
 $width: 140px;
-$hoverLightBackgroundColor: rgba(45, 140, 240, 0.1);
-$hoverDarkBackgroundColor: rgba(45, 140, 240, 0.15);

src/types/cfg.ts

@@ -71,7 +71,6 @@ export interface AppConfig {
     sideBarLogo?: LayoutSideBarLogo
   }
   rootRoute: RootRoute
-  primaryColor: string
   base?: string
   appPrimaryColor: AppPrimaryColor
 }

src/utils/element.ts

@@ -184,7 +184,7 @@ export const removeStyle = (el: HTMLElement, styles: string[]) => {
  * @remark 将任意颜色值转为 rgba
  */
 export const colorToRgba = (color: string, alpha = 1) => {
-  const hexPattern = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i
+  const hexPattern = /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i
   const rgbPattern = /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/i
   const rgbaPattern =
     /^rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d*(?:\.\d+)?)\)$/i
@@ -205,7 +205,7 @@ export const colorToRgba = (color: string, alpha = 1) => {
   } else if (rgbaPattern.test(color)) {
     result = color
   } else {
-    result = ''
+    result = color
   }
 
   if (result && !result.startsWith('rgba')) {