diff --git a/src/components/common/app-loading.vue b/src/components/common/app-loading.vue
index eb72b10..565c3be 100644
--- a/src/components/common/app-loading.vue
+++ b/src/components/common/app-loading.vue
@@ -48,7 +48,13 @@ import { hexToRgba } from "@/utils"
 
 const SYSTEM_NAME = "WindAdmin"
 const setting = JSON.parse(localStorage.getItem("setting") || "{}")
-const themeColor = setting.themeColor || "#1890ff"
+const themeColor = setting.themeColor || "#5ac8fa"
+const setThemeByCache = () => {
+	document.documentElement.style.setProperty("--theme-color", themeColor)
+	document.documentElement.style.setProperty("--menu-color-hover", hexToRgba(themeColor, 0.3))
+	document.documentElement.style.setProperty("--tabbar-color-hover", hexToRgba(themeColor, 0.2))
+}
+setThemeByCache()
 </script>
 
 <style lang="scss" scoped>
@@ -65,7 +71,7 @@ const themeColor = setting.themeColor || "#1890ff"
 	stop-color: v-bind(hexToRgba(themeColor, 0.5));
 }
 .system_name {
-  color: v-bind(hexToRgba(themeColor, 0.8));
+	color: v-bind(hexToRgba(themeColor, 0.8));
 }
 .halvan {
 	animation: Snurra1 10s infinite linear;
diff --git a/src/components/svg-icon/index.vue b/src/components/svg-icon/index.vue
index cb13f49..39ee60a 100644
--- a/src/components/svg-icon/index.vue
+++ b/src/components/svg-icon/index.vue
@@ -20,7 +20,7 @@ export default defineComponent({
 		},
 		color: {
 			type: String,
-			default: "#333",
+			default: "var(--text-color)",
 		},
 	},
 	computed: {
diff --git a/src/layouts/breadcrumb/Breadcrumb.vue b/src/layouts/breadcrumb/Breadcrumb.vue
index bf9855b..31031b2 100644
--- a/src/layouts/breadcrumb/Breadcrumb.vue
+++ b/src/layouts/breadcrumb/Breadcrumb.vue
@@ -1,38 +1,34 @@
 <script lang="ts" setup>
-import { ArrowRight } from '@element-plus/icons-vue'
-
-import { useVisitedViewStore } from '@/store';
-
-
-const visitedViewStore = useVisitedViewStore();
-
-
+import { ArrowRight } from "@element-plus/icons-vue"
+import { useVisitedViewStore } from "@/store"
 
+const visitedViewStore = useVisitedViewStore()
 </script>
 
 <template>
-  <div class="breadcrumb">
-    <el-breadcrumb :separator-icon="ArrowRight">
-      <TransitionGroup name="list">
-        <el-breadcrumb-item v-for="item in visitedViewStore.breadcrumbList" :key="item.path">{{ item.meta ? item.meta.title : item.title
-        }}</el-breadcrumb-item>
-      </TransitionGroup>
-    </el-breadcrumb>
-  </div>
+	<div class="breadcrumb">
+		<el-breadcrumb :separator-icon="ArrowRight">
+			<TransitionGroup name="list">
+				<el-breadcrumb-item v-for="item in visitedViewStore.breadcrumbList" :key="item.path">
+					{{ item.meta ? item.meta.title : item.title }}
+				</el-breadcrumb-item>
+			</TransitionGroup>
+		</el-breadcrumb>
+	</div>
 </template>
 
 <style lang="scss" scoped>
 .list-enter-active,
 .list-leave-active {
-  transition: all 0.5s ease;
+	transition: all 0.5s ease;
 }
 
 .list-enter-from,
 .list-leave-to {
-  opacity: 0;
-  transform: translateX(30px);
+	opacity: 0;
+	transform: translateX(30px);
 }
 .list-leave-active {
-  position: absolute;
+	position: absolute;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/layouts/logo/Logo.vue b/src/layouts/logo/Logo.vue
index 02ad8a2..b66b154 100644
--- a/src/layouts/logo/Logo.vue
+++ b/src/layouts/logo/Logo.vue
@@ -1,16 +1,15 @@
 <script lang="ts" setup>
-import { useVisitedViewStore,useSettingStore } from "@/store"
-import defaultThemeColor from "@/assets/themes/index"
+import { useSettingStore } from "@/store"
 const settingStore = useSettingStore()
 </script>
 
 <template>
 	<div class="Logo">
 		<div class="logo-img">
-			<SvgIcon :name="'logo'" :color="settingStore.themeColor" class="text-26" />
+			<SvgIcon :name="'logo'" :color="'var(--theme-color)'" class="text-26" />
 		</div>
 		<div class="title transition duration-300 ease-in-out" v-if="!settingStore.isCollapse">
-			<h2 :style="{ color: settingStore.themeColor }" class="text">Admin 管理系统</h2>
+			<h2 class="text">Admin 管理系统</h2>
 		</div>
 	</div>
 </template>
@@ -32,7 +31,8 @@ const settingStore = useSettingStore()
 	.title {
 		padding: 0 10px;
 		.text {
-			@apply text-16px font-bold text-primary transition duration-300 ease-in-out;
+			color: var(--theme-color);
+			@apply text-16px font-bold transition duration-300 ease-in-out;
 		}
 	}
 }
diff --git a/src/layouts/setting/SystemSet.vue b/src/layouts/setting/SystemSet.vue
index d758ada..5f11b2a 100644
--- a/src/layouts/setting/SystemSet.vue
+++ b/src/layouts/setting/SystemSet.vue
@@ -3,6 +3,15 @@ import { ref, watchEffect, watch, computed } from "vue"
 import { useSettingStore } from "@/store"
 import themeColorConfig from "@/assets/themes/themeColor.json"
 import OtherColor from "@/assets/themes/color.json"
+import { useDark, useToggle } from "@vueuse/core"
+
+const isDark = useDark({
+	selector: "html",
+	attribute: "color-scheme",
+	valueDark: "dark",
+	valueLight: "light",
+})
+const toggleDark = useToggle(isDark)
 
 const colorDialogV = ref(false)
 const activeTab = ref("红色系")
@@ -53,7 +62,7 @@ const animateModeList = [
 						inactive-value="light"
 						active-action-icon="Moon"
 						inactive-action-icon="Sunny"
-						@change="settingStore.setThemeBg"
+						@change="toggleDark()"
 						style="--el-switch-on-color: #18181c; --el-switch-off-color: #dadada"></el-switch>
 				</el-col>
 			</el-row>
@@ -63,7 +72,7 @@ const animateModeList = [
 				</el-col>
 				<el-col style="display: flex; justify-content: center; height: 80px">
 					<el-radio-group v-model="settingStore.layoutTheme" @change="settingStore.setThemeType">
-						<el-radio label="classic" class="radio" style="height: 100%">
+						<el-radio value="classic" class="radio" style="height: 100%">
 							<el-row style="height: 40px; width: 50px">
 								<el-col
 									:span="6"
@@ -74,7 +83,7 @@ const animateModeList = [
 							</el-row>
 							<el-row justify="center">左右</el-row>
 						</el-radio>
-						<el-radio label="topb" class="radio">
+						<el-radio value="topb" class="radio">
 							<el-row style="height: 40px; width: 50px">
 								<el-col
 									:span="24"
diff --git a/src/layouts/sidebar/MenuItem.vue b/src/layouts/sidebar/MenuItem.vue
index c6caae1..fe1c1bc 100644
--- a/src/layouts/sidebar/MenuItem.vue
+++ b/src/layouts/sidebar/MenuItem.vue
@@ -2,7 +2,6 @@
 import router from "@/router"
 import { ref, onMounted, computed } from "vue"
 import { useSettingStore, useVisitedViewStore } from "@/store"
-import defaultThemeColor from "@/assets/themes/index"
 import { isExternal } from "@/utils"
 
 const settingStore = useSettingStore()
@@ -23,8 +22,8 @@ const activeMenuBg = computed(() => {
 
 const setThemeColor = computed(() => {
 	return router.currentRoute.value.path === props.item.path
-		? settingStore.themeColor
-		: defaultThemeColor[settingStore.themeBg].menuTextColor
+		? 'var(--theme-color)'
+		: 'var(--text-color)'
 })
 
 const visitedViewStore = useVisitedViewStore()
@@ -78,7 +77,7 @@ const handleClick = item => {
 	z-index: 1;
 	margin: 3px 8px;
 	border-radius: 5px;
-	background-color: v-bind(activeMenuBg);
+	background-color: var(--menu-color-hover);
 }
 .is-active::before {
 	@extend #before;
diff --git a/src/layouts/sidebar/MenuScroll.vue b/src/layouts/sidebar/MenuScroll.vue
index 4ba2e56..3cb8cc8 100644
--- a/src/layouts/sidebar/MenuScroll.vue
+++ b/src/layouts/sidebar/MenuScroll.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import defaultThemeColor from "@/assets/themes/index"
-
 import { ref, computed, onMounted } from "vue"
 
 import { useRouter } from "vue-router"
@@ -31,7 +29,6 @@ const activeMenu = computed(() => {
 	return router.currentRoute.value.path
 })
 
-console.log(defaultThemeColor)
 onMounted(() => {})
 </script>
 
@@ -46,9 +43,7 @@ onMounted(() => {})
 			:mode="mode"
 			:collapse-transition="false"
 			:ellipsis="false"
-			popper-effect="dark"
-			:background-color="defaultThemeColor[settingStore.themeBg].menuColor"
-			:text-color="defaultThemeColor[settingStore.themeBg].menuTextColor">
+			popper-effect="dark">
 			<slot></slot>
 		</el-menu>
 	</el-scrollbar>
@@ -71,9 +66,7 @@ onMounted(() => {})
 	width: 100%;
 	height: 100%;
 	border: none;
-	background: transparent;
 	transition: all 0.3s;
-
 	.el-sub-menu {
 		background: inherit !important;
 	}
diff --git a/src/layouts/sidebar/MenuSub.vue b/src/layouts/sidebar/MenuSub.vue
index 6519593..b0c3bb7 100644
--- a/src/layouts/sidebar/MenuSub.vue
+++ b/src/layouts/sidebar/MenuSub.vue
@@ -1,12 +1,6 @@
 <script lang="ts" setup>
 import { computed } from "vue"
-import { useSettingStore, useVisitedViewStore } from "@/store"
-import defaultThemeColor from "@/assets/themes/index"
-import { useRouter } from "vue-router"
-
-const router = useRouter()
-
-const settingStore = useSettingStore()
+import { useVisitedViewStore } from "@/store"
 const visitedViewStore = useVisitedViewStore()
 
 const props = defineProps({
@@ -16,14 +10,10 @@ const props = defineProps({
 	},
 })
 
-const activeMenuBg = computed(() => {
-	return settingStore.getMenuActiveBg()
-})
-
 const setThemeColor = computed(() => {
 	return visitedViewStore.breadcrumbList.some(item => item.path === props.item.path)
-		? settingStore.themeColor
-		: defaultThemeColor[settingStore.themeBg].menuTextColor
+		? "var(--theme-color)"
+		: "var(--text-color)"
 })
 </script>
 
@@ -57,7 +47,7 @@ const setThemeColor = computed(() => {
 	z-index: 1;
 	margin: 4px 8px;
 	border-radius: 5px;
-	background-color: v-bind(activeMenuBg) !important;
+	background-color: var(--menu-color-hover);
 }
 
 :deep(.el-sub-menu__title) {
diff --git a/src/layouts/tabbar/TabBar.vue b/src/layouts/tabbar/TabBar.vue
index 1211ef5..93531c5 100644
--- a/src/layouts/tabbar/TabBar.vue
+++ b/src/layouts/tabbar/TabBar.vue
@@ -13,14 +13,6 @@ useTabBarEvent()
 
 const activeTableTabsValue = ref("/index/home")
 
-const activeMenuBg = computed(() => {
-	return settingStore.getMenuActiveBg(0.1)
-})
-
-const activeColor = computed(() => {
-	return settingStore.themeColor
-})
-
 watch(
 	router.currentRoute,
 	newValue => {
@@ -164,14 +156,14 @@ const closeTab = (type, event) => {
 						height: 30px;
 						font-size: 12px;
 						border-radius: 5px;
-						background-color: v-bind(activeMenuBg);
+						background-color: var(--tabbar-color-hover);
 						border: none;
 						&:hover {
-							color: v-bind(activeColor);
+							color: var(--theme-color);
 						}
 					}
 					.is-active {
-						color: v-bind(activeColor);
+						color: var(--theme-color);
 					}
 				}
 			}
diff --git a/src/layouts/themes/ClassicTheme.vue b/src/layouts/themes/ClassicTheme.vue
index bb1f569..264bc27 100644
--- a/src/layouts/themes/ClassicTheme.vue
+++ b/src/layouts/themes/ClassicTheme.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import defaultThemeColor from "@/assets/themes/index"
 import { useSettingStore } from "@/store"
 const settingStore = useSettingStore()
 
@@ -11,14 +10,14 @@ import TabBar from "@/layouts/tabbar/TabBar.vue"
 import Collapse from "@/layouts/toolbar/Collapse.vue"
 import Logo from "@/layouts/logo/Logo.vue"
 import Breadcrumb from "@/layouts/breadcrumb/Breadcrumb.vue"
+
 </script>
 
 <template>
 	<div id="container_sub">
 		<aside
 			class="aside"
-			:class="[settingStore.isCollapse ? 'close-status' : 'open-status']"
-			:style="{ backgroundColor: defaultThemeColor[settingStore.themeBg].menuColor }">
+			:class="[settingStore.isCollapse ? 'close-status' : 'open-status']">
 			<div class="aside_head">
 				<Logo />
 			</div>
@@ -71,7 +70,8 @@ import Breadcrumb from "@/layouts/breadcrumb/Breadcrumb.vue"
 
 aside {
 	height: 100%;
-	border-right: 0.5px solid #ebeef5;
+	background-color: var(--bg-color);
+	border-right: 0.5px solid var(--border-color-lightest);
 	overflow: hidden;
 
 	.aside_head {
@@ -92,6 +92,7 @@ main {
 		display: flex;
 		height: $head-height;
 		border-bottom: 0.5px solid #ebeef5;
+		background-color: var(--bg-color);
 
 		.left {
 			min-width: 210px;
diff --git a/src/layouts/themes/TopBLayout.vue b/src/layouts/themes/TopBLayout.vue
index ef51b48..e001b9b 100644
--- a/src/layouts/themes/TopBLayout.vue
+++ b/src/layouts/themes/TopBLayout.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import { watch } from "vue"
 import { useSettingStore } from "@/store"
-
-import defaultThemeColor from "@/assets/themes/index"
 const settingStore = useSettingStore()
 
 import ToolBar from "@/layouts/toolbar/ToolBar.vue"
@@ -26,9 +24,7 @@ watch(
 
 <template>
 	<div id="container_sub">
-		<div
-			class="main_head"
-			:style="{ backgroundColor: defaultThemeColor[settingStore.themeBg].menuColor }">
+		<div class="main_head">
 			<div class="left">
 				<Logo />
 			</div>
@@ -61,6 +57,7 @@ watch(
 		display: flex;
 		height: $head-height;
 		border-bottom: 0.5px solid #ebeef5;
+		background-color: var(--bg-color);
 
 		.left {
 		}
diff --git a/src/layouts/toolbar/Collapse.vue b/src/layouts/toolbar/Collapse.vue
index 2353040..f17febf 100644
--- a/src/layouts/toolbar/Collapse.vue
+++ b/src/layouts/toolbar/Collapse.vue
@@ -27,8 +27,8 @@ const activeMenuBg = computed(() => {
 		vertical-align: middle;
 		&:hover {
 			cursor: pointer;
-			fill: v-bind(activeMenuBg) !important;
-			stroke: v-bind(activeMenuBg) !important;
+			fill: var(--theme-color) !important;
+			stroke: var(--theme-color) !important;
 		}
 	}
 }
diff --git a/src/layouts/toolbar/ToolBar.vue b/src/layouts/toolbar/ToolBar.vue
index ff47d54..06069a1 100644
--- a/src/layouts/toolbar/ToolBar.vue
+++ b/src/layouts/toolbar/ToolBar.vue
@@ -1,65 +1,19 @@
 <script lang="ts" setup>
 import SystemSet from "@/layouts/setting/SystemSet.vue"
 import { useSettingStore } from "@/store"
-import defaultThemeColor from "@/assets/themes/index"
 import { toggle } from "@/utils/common/fullscreen"
 import { ref, computed } from "vue"
 
-const openSet = ref(false)
 const settingStore = useSettingStore()
-const closeSet = () => {
-	openSet.value = false
-}
-
-const activeMenuBg = computed(() => {
-	return settingStore.themeColor
-})
 </script>
 
 <template>
 	<div class="tools">
-		<SvgIcon
-			name="search2"
-			class="fs20"
-			:color="
-				settingStore.layoutTheme == 'classic'
-					? '#000'
-					: defaultThemeColor[settingStore.themeBg].iconColor
-			" />
-		<SvgIcon
-			name="notification1"
-			class="fs20"
-			:color="
-				settingStore.layoutTheme == 'classic'
-					? '#000'
-					: defaultThemeColor[settingStore.themeBg].iconColor
-			" />
-		<SvgIcon
-			name="refresh"
-			class="fs20"
-			:color="
-				settingStore.layoutTheme == 'classic'
-					? '#000'
-					: defaultThemeColor[settingStore.themeBg].iconColor
-			" />
-		<SvgIcon
-			@click="toggle"
-			name="screenfull"
-			class="fs20"
-			:color="
-				settingStore.layoutTheme == 'classic'
-					? '#000'
-					: defaultThemeColor[settingStore.themeBg].iconColor
-			" />
-		<SvgIcon
-			@click="settingStore.setDrawerSwitch(true)"
-			name="setting"
-			class="fs20"
-			:color="
-				settingStore.layoutTheme == 'classic'
-					? '#000'
-					: defaultThemeColor[settingStore.themeBg].iconColor
-			" />
+		<SvgIcon name="search2" class="fs20" />
+		<SvgIcon name="notification1" class="fs20" />
+		<SvgIcon name="refresh" class="fs20" />
+		<SvgIcon @click="toggle" name="screenfull" class="fs20" />
+		<SvgIcon @click="settingStore.setDrawerSwitch(true)" name="setting" class="fs20" />
 	</div>
 	<SystemSet />
 </template>
@@ -77,8 +31,8 @@ const activeMenuBg = computed(() => {
 	cursor: pointer;
 	font-size: 20px;
 	&:hover {
-		fill: v-bind(activeMenuBg) !important;
-		stroke: v-bind(activeMenuBg) !important;
+		fill: var(--theme-color) !important;
+		stroke: var(--theme-color) !important;
 	}
 }
 </style>
diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts
index 50e2e85..5116288 100644
--- a/src/store/modules/setting.ts
+++ b/src/store/modules/setting.ts
@@ -1,5 +1,4 @@
 import { defineStore } from "pinia"
-import defaultThemeColor from "@/assets/themes/index"
 import { hexToRgba } from "@/utils"
 
 export const useSettingStore = defineStore("setting", {
@@ -7,7 +6,7 @@ export const useSettingStore = defineStore("setting", {
 		drawer_switch: false, // 侧边栏设置开关
 		isCollapse: false, // 菜单栏展开收缩
 		layoutTheme: "classic", // classic, topb
-		themeBg: "light", // dark, light
+		themeBg: "dark", // dark, light
 		themeColor: "#1890ff", // 主题颜色
 		transitionAnimation: "zoom-out", // zoom-fade, zoom-out, slide-right, slide-up
 	}),
@@ -40,11 +39,12 @@ export const useSettingStore = defineStore("setting", {
 		// 设置主题颜色
 		setThemeColorValue(themeColor: string) {
 			this.themeColor = themeColor
+			document.documentElement.style.setProperty("--theme-color", themeColor)
+			document.documentElement.style.setProperty("--menu-color-hover", this.getMenuActiveBg(0.3))
+			document.documentElement.style.setProperty("--tabbar-color-hover", this.getMenuActiveBg(0.2))
 		},
 		// 设置默认主题颜色
-		setDefaultThemeColor() {
-			this.themeColor = defaultThemeColor
-		},
+		setDefaultThemeColor() {},
 	},
 	persist: true,
 })
diff --git a/src/store/modules/view.ts b/src/store/modules/view.ts
index 78b8a46..5b2e6f0 100644
--- a/src/store/modules/view.ts
+++ b/src/store/modules/view.ts
@@ -5,6 +5,7 @@ import { ViewItem } from "../types"
 export const useVisitedViewStore = defineStore({
 	id: "view",
 	state: () => ({
+		// 访问过的页面
 		visitedViewList: [
 			// 默认打开的页面，并且不可关闭
 			{
@@ -12,6 +13,7 @@ export const useVisitedViewStore = defineStore({
 				name: "/index/home",
 			},
 		],
+		// 面包屑导航
 		breadcrumbList: [],
 	}),
 	actions: {
diff --git a/src/styles/common.scss b/src/styles/common.scss
deleted file mode 100644
index c4ba247..0000000
--- a/src/styles/common.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-
-
-* {
-	margin: 0;
-	padding: 0;
-	box-sizing: border-box;
-}
-
-html,
-body,
-#app {
-	height: 100vh;
-}
-
-ul,
-li {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-}
-
-#nprogress {
-	.bar {
-		background-color: #48d8e3;
-		height: 3px;
-	}
-}
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 9bede05..363d6ff 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -1,4 +1,4 @@
-@import "./common.scss";
+@import "./theme.scss";
 @import "./transition.scss";
 
 * {
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
new file mode 100644
index 0000000..7d39559
--- /dev/null
+++ b/src/styles/theme.scss
@@ -0,0 +1,57 @@
+html[color-scheme="dark"] {
+	--bg-color: #1a1a1a;
+	--text-color: #fff;
+	--border-color: #333;
+	--border-color-light: #444;
+	--border-color-lighter: #555;
+	--border-color-lightest: #666;
+	--border-color-dark: #222;
+	--border-color-darker: #111;
+	--border-color-darkest: #000;
+	--primary-color: #48d8e3;
+	--secondary-color: #ff5e78;
+	--tertiary-color: #ff8c37;
+	--quaternary-color: #ffcc29;
+	--quinary-color: #ff5e78;
+	--senary-color: #ff8c37;
+	--septenary-color: #ffcc29;
+	--octonary-color: #ff5e78;
+	--nonary-color: #ff8c37;
+	--denary-color: #ffcc29;
+	--head-height: 64px;
+	--tab-height: 48px;
+}
+
+html[color-scheme="light"] {
+	--bg-color: #f5f5f5;
+	--text-color: #333;
+	--border-color: #ccc;
+	--border-color-light: #ddd;
+	--border-color-lighter: #eee;
+	--border-color-lightest: #f0f0f0;
+	--border-color-dark: #bbb;
+	--border-color-darker: #aaa;
+	--border-color-darkest: #999;
+	--primary-color: #48d8e3;
+	--secondary-color: #ff5e78;
+	--tertiary-color: #ff8c37;
+	--quaternary-color: #ffcc29;
+	--quinary-color: #ff5e78;
+	--senary-color: #ff8c37;
+	--septenary-color: #ffcc29;
+	--octonary-color: #ff5e78;
+	--nonary-color: #ff8c37;
+	--denary-color: #ffcc29;
+	--head-height: 64px;
+	--tab-height: 48px;
+}
+
+:root {
+	--el-menu-bg-color: var(--bg-color) !important;
+	--el-menu-hover-bg-color: transparent !important;
+	--el-menu-text-color: var(--text-color) !important;
+
+	--theme-color: var(--primary-color);
+	--menu-color-hover: rgba(90, 200, 250, 0.3);
+	--tabbar-color-hover: rgba(90, 200, 250, 0.3);
+}
diff --git a/src/utils/public/getData.ts b/src/utils/public/getData.ts
index 55457fa..f6cedca 100644
--- a/src/utils/public/getData.ts
+++ b/src/utils/public/getData.ts
@@ -15,7 +15,7 @@ export function useGetBreadcrumbList() {
 			() => router.currentRoute.value.path,
 			() => {
 				visitedViewStore.breadcrumbList.length = 0
-				generatorList(PermissionStore.permissionRoutes)
+				generatorList(PermissionStore.permissionRoutes, visitedViewStore)
 			},
 			{ immediate: true }
 		)
@@ -26,13 +26,12 @@ export function useGetBreadcrumbList() {
 	})
 }
 
-function generatorList(Routes: Array<any>) {
-	const visitedViewStore = useVisitedViewStore()
+function generatorList(Routes: Array<any>, visitedViewStore: any) {
 	Routes.forEach(item => {
 		if (router.currentRoute.value.path.includes(item.path)) {
 			visitedViewStore.breadcrumbList.push(item)
 			if (item.children) {
-				generatorList(item.children)
+				generatorList(item.children, visitedViewStore)
 			}
 		}
 	})
diff --git a/src/utils/storage/localCommon.ts b/src/utils/storage/localCommon.ts
new file mode 100644
index 0000000..0330cc3
--- /dev/null
+++ b/src/utils/storage/localCommon.ts
@@ -0,0 +1,29 @@
+function createLocalStorage() {
+	function set<K>(key: K, value: any) {
+		try {
+			const json = JSON.stringify(value)
+			window.localStorage.setItem(key as string, json)
+		} catch (e) {}
+	}
+
+	function get<K>(key: K) {
+		const json = window.localStorage.getItem(key as string)
+		return JSON.parse(json)
+	}
+
+	function remove(key: any) {
+		window.localStorage.removeItem(key as string)
+	}
+	function clear() {
+		window.localStorage.clear()
+	}
+
+	return {
+		set,
+		get,
+		remove,
+		clear,
+	}
+}
+
+export const localStgc = createLocalStorage()
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index d3a26c1..14aa37e 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="container">
+	<div class="login-container">
 		<div class="content">
 			<div class="left-side a-container" ref="left_Dom">
 				<div class="form_login">
@@ -200,7 +200,7 @@ $transition: 1.25s;
 	}
 }
 
-.container {
+.login-container {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
diff --git a/tsconfig.json b/tsconfig.json
index bf5cb96..0ed66fd 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,5 +17,6 @@
 		"paths": {
 			"@/*": ["src/*"]
 		}
-	}
+	},
+	"exclude": ["node_modules", "dist", "./back-end-server/*"]
 }
diff --git a/uno.config.ts b/uno.config.ts
index 3a9f5ee..d9ddc55 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -43,29 +43,33 @@ export default defineConfig({
 		"ellipsis-text": "nowrap-hidden text-ellipsis",
 		"transition-base": "transition-all duration-300 ease-in-out",
 	},
-	// theme: {
-	// 	colors: {
-	// 		primary: "#316C72FF",
-	// 		primary_hover: "var(--primary-color-hover)",
-	// 		primary_pressed: "var(--primary-color-pressed)",
-	// 		primary_active: "var(--primary-color-active)",
-	// 		info: "var(--info-color)",
-	// 		info_hover: "var(--info-color-hover)",
-	// 		info_pressed: "var(--info-color-pressed)",
-	// 		info_active: "var(--info-color-active)",
-	// 		success: "var(--success-color)",
-	// 		success_hover: "var(--success-color-hover)",
-	// 		success_pressed: "var(--success-color-pressed)",
-	// 		success_active: "var(--success-color-active)",
-	// 		warning: "var(--warning-color)",
-	// 		warning_hover: "var(--warning-color-hover)",
-	// 		warning_pressed: "var(--warning-color-pressed)",
-	// 		warning_active: "var(--warning-color-active)",
-	// 		error: "var(--error-color)",
-	// 		error_hover: "var(--error-color-hover)",
-	// 		error_pressed: "var(--error-color-pressed)",
-	// 		error_active: "var(--error-color-active)",
-	// 		dark: "#18181c",
-	// 	},
-	// },
+	theme: {
+		breakpoints: {
+			sm: "320px",
+			md: "640px",
+		},
+		colors: {
+			primary: "#316C72FF",
+			primary_hover: "var(--primary-color-hover)",
+			primary_pressed: "var(--primary-color-pressed)",
+			primary_active: "var(--primary-color-active)",
+			info: "var(--info-color)",
+			info_hover: "var(--info-color-hover)",
+			info_pressed: "var(--info-color-pressed)",
+			info_active: "var(--info-color-active)",
+			success: "var(--success-color)",
+			success_hover: "var(--success-color-hover)",
+			success_pressed: "var(--success-color-pressed)",
+			success_active: "var(--success-color-active)",
+			warning: "var(--warning-color)",
+			warning_hover: "var(--warning-color-hover)",
+			warning_pressed: "var(--warning-color-pressed)",
+			warning_active: "var(--warning-color-active)",
+			error: "var(--error-color)",
+			error_hover: "var(--error-color-hover)",
+			error_pressed: "var(--error-color-pressed)",
+			error_active: "var(--error-color-active)",
+			dark: "#18181c",
+		},
+	},
 })
diff --git a/vite.config.ts b/vite.config.ts
index 83deb83..dff2eb2 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -54,7 +54,7 @@ export default ({ command }: ConfigEnv): UserConfigExport => {
 		css: {
 			preprocessorOptions: {
 				scss: {
-					additionalData: '@use "./src/styles/variables.scss" as *;', // 引入变量
+					additionalData: '@use "@/styles/variables.scss" as *;', // 引入变量
 				},
 			},
 		},