diff --git a/package.json b/package.json
index e64a4a163..8b6d3fbed 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
   ],
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "@ctrl/tinycolor": "^3.4.0",
     "@element-plus/icons-vue": "^0.2.4",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3b7170c0f..e1f28bc69 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,6 +4,7 @@ specifiers:
   "@amap/amap-jsapi-loader": ^1.0.1
   "@commitlint/cli": 13.1.0
   "@commitlint/config-conventional": 13.1.0
+  "@ctrl/tinycolor": ^3.4.0
   "@element-plus/icons-vue": ^0.2.4
   "@fortawesome/fontawesome-svg-core": ^1.2.36
   "@fortawesome/free-solid-svg-icons": ^5.15.4
@@ -89,6 +90,7 @@ specifiers:
 
 dependencies:
   "@amap/amap-jsapi-loader": 1.0.1
+  "@ctrl/tinycolor": 3.4.0
   "@element-plus/icons-vue": 0.2.4_vue@3.2.24
   "@fortawesome/fontawesome-svg-core": 1.2.36
   "@fortawesome/free-solid-svg-icons": 5.15.4
@@ -785,6 +787,14 @@ packages:
       chalk: 4.1.2
     dev: true
 
+  /@ctrl/tinycolor/3.4.0:
+    resolution:
+      {
+        integrity: sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ==
+      }
+    engines: { node: ">=10" }
+    dev: false
+
   /@element-plus/icons-vue/0.2.4_vue@3.2.24:
     resolution:
       {
diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue
index 49aad68b6..a4746f5f9 100644
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -21,6 +21,7 @@ import { debounce } from "/@/utils/debounce";
 import darkIcon from "/@/assets/svg/dark.svg";
 import { themeColorsType } from "../../types";
 import { useAppStoreHook } from "/@/store/modules/app";
+import { shadeBgColor } from "../../theme/element-plus";
 import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
 import { storageLocal, storageSession } from "/@/utils/storage";
 import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
@@ -29,6 +30,7 @@ import { toggleTheme } from "@zougt/vite-plugin-theme-preprocessor/dist/browser-
 
 const router = useRouter();
 const { isSelect } = useCssModule();
+const body = document.documentElement as HTMLElement;
 const instance =
   getCurrentInstance().appContext.app.config.globalProperties.$storage;
 
@@ -260,13 +262,13 @@ function setLayoutThemeColor(theme: string) {
 const setEpThemeColor = (color: string) => {
   writeNewStyle(createNewStyle(color));
   useEpThemeStoreHook().setEpThemeColor(color);
+  body.style.setProperty("--el-color-primary-active", shadeBgColor(color));
 };
 
 let dataTheme = ref<boolean>(instance.layout.darkMode);
 
 // 日间、夜间主题切换
 function dataThemeChange() {
-  const body = document.documentElement as HTMLElement;
   if (dataTheme.value) {
     body.setAttribute("data-theme", "dark");
     setLayoutThemeColor("light");
diff --git a/src/layout/theme/element-plus.ts b/src/layout/theme/element-plus.ts
index d48733a51..dadad67bb 100644
--- a/src/layout/theme/element-plus.ts
+++ b/src/layout/theme/element-plus.ts
@@ -1,6 +1,7 @@
 /* 动态改变element-plus主题色 */
 import rgbHex from "rgb-hex";
 import color from "css-color-function";
+import { TinyColor } from "@ctrl/tinycolor";
 import epCss from "element-plus/dist/index.css";
 
 // 色值表
@@ -72,3 +73,8 @@ const getStyleTemplate = (data: string): string => {
   });
   return data;
 };
+
+// 自动计算hover和active颜色 https://element-plus.gitee.io/zh-CN/component/button.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A2%9C%E8%89%B2-%E6%B5%8B%E8%AF%95%E7%89%88
+export const shadeBgColor = (color: string): string => {
+  return new TinyColor(color).shade(10).toString();
+};
diff --git a/src/router/types.ts b/src/router/types.ts
index fa4e103dd..0e1896a59 100644
--- a/src/router/types.ts
+++ b/src/router/types.ts
@@ -2,8 +2,8 @@ import { RouteLocationNormalized } from "vue-router";
 
 export interface toRouteType extends RouteLocationNormalized {
   meta: {
-    keepAlive: boolean;
+    keepAlive?: boolean;
     refreshRedirect: string;
-    dynamicLevel: string;
+    dynamicLevel?: string;
   };
 }
diff --git a/src/style/element-plus.scss b/src/style/element-plus.scss
index 0b278893f..25e54646c 100644
--- a/src/style/element-plus.scss
+++ b/src/style/element-plus.scss
@@ -35,3 +35,30 @@
 .is-dark {
   z-index: 99999 !important;
 }
+
+/* 动态改变cssvar 用于主题切换 https://github.com/element-plus/element-plus/issues/4856#issuecomment-1000174357 */
+.el-button--primary {
+  --el-button-bg-color: var(--el-color-primary) !important;
+  --el-button-border-color: var(--el-color-primary) !important;
+  --el-button-hover-bg-color: var(--el-color-primary-light-2) !important;
+  --el-button-hover-border-color: var(--el-color-primary-light-2) !important;
+  --el-button-active-bg-color: var(--el-color-primary-active) !important;
+  --el-button-active-border-color: var(--el-color-primary-active) !important;
+}
+
+/* nprogress适配ep的primary */
+#nprogress {
+  & .bar {
+    background-color: var(--el-color-primary) !important;
+  }
+
+  & .peg {
+    box-shadow: 0 0 10px var(--el-color-primary),
+      0 0 5px var(--el-color-primary) !important;
+  }
+
+  & .spinner-icon {
+    border-top-color: var(--el-color-primary);
+    border-left-color: var(--el-color-primary);
+  }
+}
diff --git a/src/utils/http/README.md b/src/utils/http/README.md
index 5b661e692..3b441645b 100644
--- a/src/utils/http/README.md
+++ b/src/utils/http/README.md
@@ -18,8 +18,8 @@ http.request('get', '/xxx?message=' + msg);
 import { http } from "/@/utils/http";
 
 // params传参
-http.request('get', '/xxx', { params: param });
+http.request('post', '/xxx', { params: param });
 
 // data传参
-http.request('get', '/xxx', { data: param });
+http.request('post', '/xxx', { data: param });
 ```