主题优化

src/layout/components/Navbar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <hamburger :fill="iconColor" id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
 	  <div style="float: left;line-height: 50px;">{{title}}</div>
     <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav && false" />
     <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />
@@ -9,10 +9,10 @@
       <template v-if="appStore.device !== 'mobile'">
         <header-search id="header-search" class="right-menu-item" />
         <el-tooltip content="显示大屏" effect="dark" placement="bottom">
-          <i-tv class="right-menu-item" theme="outline" size="24" fill="#FFFFFF"/>
+          <i-tv class="right-menu-item" theme="outline" size="24" :fill="iconColor"/>
         </el-tooltip>
         <div class="right-menu-item">
-          <i-remind theme="outline" size="22" fill="#FFFFFF"/>
+          <i-remind theme="outline" size="22" :fill="iconColor"/>
         </div>
         <el-tooltip v-if="false" content="源码地址" effect="dark" placement="bottom">
           <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
@@ -49,7 +49,7 @@
           </template>
         </el-dropdown>
         <div class="right-menu-item" v-else>
-          <i-me theme="outline" size="24" fill="#FFF"/>
+          <i-me theme="outline" size="24" :fill="iconColor"/>
           <div style="margin-left: 3px">{{userStore.name}}</div>
           <div @click="logout" class="logout-button">
             退出
@@ -74,11 +74,14 @@ import useAppStore from '@/store/modules/app'
 import useUserStore from '@/store/modules/user'
 import useSettingsStore from '@/store/modules/settings'
 import defaultSettings from "@/settings.js";
+import {findTextColor} from "@/utils/ruoyi.js";
 
 const appStore = useAppStore()
 const userStore = useUserStore()
 const settingsStore = useSettingsStore()
 const title = defaultSettings.title
+const theme = computed(() => settingsStore.theme);
+const iconColor = computed(() => findTextColor(theme.value))
 function toggleSideBar() {
   appStore.toggleSideBar()
 }
@@ -120,10 +123,9 @@ function setLayout() {
   height: 50px;
   overflow: hidden;
   position: relative;
-  background: #fff;
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-  background: #567722;
+  background: v-bind(theme);
-  color: #FFF;
+  color: v-bind(iconColor);
   .hamburger-container {
     line-height: 46px;
     height: 100%;
@@ -166,7 +168,7 @@ function setLayout() {
       padding: 0 5px;
       height: 100%;
       font-size: 18px;
-      color: #FFFFFF;
+      color: v-bind(iconColor);
       vertical-align: text-bottom;
 
       &.hover-effect {

src/settings.js

@@ -11,7 +11,10 @@ export default {
    * 是否系统布局配置
    */
   showSettings: false,
-
+  /**
+   * 初始主题色
+   */
+  theme: '#567722',
   /**
    * 是否显示顶部导航
    */

src/store/modules/settings.js

@@ -1,7 +1,7 @@
 import defaultSettings from '@/settings'
 import { useDynamicTitle } from '@/utils/dynamicTitle'
 
-const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dynamicTitle } = defaultSettings
+const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dynamicTitle,theme } = defaultSettings
 
 const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
 
@@ -10,7 +10,7 @@ const useSettingsStore = defineStore(
   {
     state: () => ({
       title: '',
-      theme: storageSetting.theme || '#409EFF',
+      theme: storageSetting.theme || theme,
       sideTheme: storageSetting.sideTheme || sideTheme,
       showSettings: showSettings,
       topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,

src/utils/ruoyi.js

@@ -244,3 +244,59 @@ export function getNormalPath(p) {
 export function blobValidate(data) {
   return data.type !== 'application/json'
 }
+/**
+ * 转换字体颜色
+ *
+ * @param {array} rgbArr rgb数组
+ */
+export function resBgColor(rgbArr) {
+  // 当color值大于128时,color值偏向255,即#ffffff,此时字体颜色应为#000000
+  // 当color值小于128时,color值偏向0,即#000000,此时字体颜色应为#ffffff
+  var color = 0.213 * rgbArr[0] + 0.715 * rgbArr[1] + 0.072 * rgbArr[2] > 255 / 2;
+  return color ? '#000000' : '#ffffff'
+}
+
+/**
+ * 根据当前的背景颜色确认适合背景色的文本颜色 (文本仅仅支持黑 和 白)
+ * // 用法一:
+ * var textColor = findTextColor('#000');
+ * console.log(textColor);     // #ffffff
+ *
+ * // 用法二:
+ * var textColor2 = findTextColor('rgb(255, 255, 255)');
+ * console.log(textColor2);    // #000000
+ * @param colorValue
+ */
+export function findTextColor(colorValue) {
+  console.log(colorValue);
+  // #123456或者rgb(12,34,56)转为rgb数组[12,34,56]
+  const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+  var that = colorValue;
+  if (/^(rgb|RGB)/.test(that)) {
+    // 处理rgb转为数组
+    var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
+    return resBgColor(aColor);
+  } else if (reg.test(that)) {
+    // 处理十六进制色值
+    var sColor = colorValue.toLowerCase();
+    if (sColor && reg.test(sColor)) {
+      if (sColor.length === 4) {
+        var sColorNew = "#";
+        for (var i = 1; i < 4; i += 1) {
+          sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
+        }
+        sColor = sColorNew;
+      }
+      //处理六位的颜色值
+      var sColorChange = [];
+      for (var i = 1; i < 7; i += 2) {
+        sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
+      }
+      return resBgColor(sColorChange);
+    } else {
+      return false;
+    }
+  } else {
+    return false;
+  }
+}