From c3e5117b3191da47b17738648fb0b7a3805190c1 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Sat, 12 Mar 2022 15:25:26 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2=E9=85=8D=E7=BD=AE=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                             |  1 -
 src/hooks/theme.hook.ts                 | 14 +++++++++---
 src/settings/pathConst.ts               |  2 ++
 src/utils/style.ts                      | 29 ++++++++++++++++++++++++-
 src/views/chart/HeaderLeftBtn/index.vue |  4 ++--
 src/views/chart/HeaderTitle/index.vue   |  2 +-
 6 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a5b01dbc..e836c385 100644
--- a/src/App.vue
+++ b/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'
diff --git a/src/hooks/theme.hook.ts b/src/hooks/theme.hook.ts
index 7ecb2f4c..dc1bce06 100644
--- a/src/hooks/theme.hook.ts
+++ b/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
diff --git a/src/settings/pathConst.ts b/src/settings/pathConst.ts
index d5b992e0..247ce581 100644
--- a/src/settings/pathConst.ts
+++ b/src/settings/pathConst.ts
@@ -1,3 +1,5 @@
+// * 外部路径地址
+
 // 项目文档地址
 export const docPath = "http://www.mtruning.club:81/"
 
diff --git a/src/utils/style.ts b/src/utils/style.ts
index e6cb1d37..43469400 100644
--- a/src/utils/style.ts
+++ b/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)}`
+}
diff --git a/src/views/chart/HeaderLeftBtn/index.vue b/src/views/chart/HeaderLeftBtn/index.vue
index 67a1b34c..133b0d0a 100644
--- a/src/views/chart/HeaderLeftBtn/index.vue
+++ b/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) => {
diff --git a/src/views/chart/HeaderTitle/index.vue b/src/views/chart/HeaderTitle/index.vue
index bb2b3226..4b91b1fc 100644
--- a/src/views/chart/HeaderTitle/index.vue
+++ b/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 ''