fix: 修改全局颜色配置的问题

src/App.vue

@@ -15,7 +15,6 @@
 <script lang="ts" setup>
 import { zhCN, dateZhCN, NConfigProvider } from 'naive-ui'
 import { AppProvider } from '@/components/AppProvider'
-import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { I18n } from '@/components/I18n'
 
 import { getDarkThemeHook, getThemeOverridesHook } from '@/hooks'

src/hooks/theme.hook.ts

@@ -1,32 +1,40 @@
-import { computed } from 'vue'
+import { computed, toRefs } from 'vue'
 import { darkTheme, GlobalThemeOverrides } from 'naive-ui'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { borderRadius } from '@/settings/designSetting'
+import { toLight } from '@/utils'
 
 /**
  * 设置全局主题
  */
 export const getThemeOverridesHook = () => {
   const designStore = useDesignStore()
+  const { getAppTheme } = toRefs(designStore)
   const getDarkTheme = computed(
     (): GlobalThemeOverrides => {
+      // 通用
       const commonObj = {
         common: {
           borderRadius
         }
       }
+      // 亮色主题
       const lightObject = {
         common: {
           ...commonObj.common
         }
       }
+      // 暗色主题
       const dartObject = {
         common: {
-          primaryColor: designStore.getAppTheme,
+          primaryColor: getAppTheme.value,
+          primaryColorHover: toLight(getAppTheme.value, 6),
+          primaryColorPressed: toLight(getAppTheme.value, 6),
+          primaryColorSuppl: getAppTheme.value,
           ...commonObj.common
         },
         LoadingBar: {
-          colorLoading: designStore.getAppTheme
+          colorLoading: getAppTheme.value
         }
       }
       return designStore.getDarkTheme ? dartObject : lightObject

src/settings/pathConst.ts

@@ -1,3 +1,5 @@
+// * 外部路径地址
+
 // 项目文档地址
 export const docPath = "http://www.mtruning.club:81/"
 

src/utils/style.ts

@@ -3,7 +3,7 @@ import { useDesignStore } from '@/store/modules/designStore/designStore'
 /**
  * * 修改主题色
  * @param themeName 主题名称
- * @returns 
+ * @returns
  */
 export const setHtmlTheme = (themeName?: string) => {
   const e = window.document.documentElement
@@ -14,3 +14,30 @@ 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)}`
+}

src/views/chart/HeaderLeftBtn/index.vue

@@ -64,9 +64,9 @@ const btnList = reactive<ItemType[]>([
 // store 描述的是展示的值，所以和 ContentConfigurations 的 collapsed 是相反的
 const styleHandle = (item: ItemType) => {
   if (item.key === ChartLayoutStoreEnum.DETAILS) {
-    return item.select ? '' : 'success'
+    return item.select ? '' : 'primary'
   }
-  return item.select ? 'success' : ''
+  return item.select ? 'primary' : ''
 }
 
 const clickHandle = (item: ItemType) => {

src/views/chart/HeaderTitle/index.vue

@@ -39,7 +39,7 @@ const fetchProhectInfoById = () => {
   const { id } = routeParamsRes
   if (id.length) {
     // todo 从后端获取项目信息并存储
-    return '编辑项目' + id[0]
+    return id[0]
   }
   return ''