调整主题配置和布局样式

- 修改了多个组件的背景色、文字颜色等样式
-调整了侧边栏、顶部导航栏的样式
- 优化了菜单的展开和高亮逻辑
- 更新了部分图标和布局结构

.env

@@ -1,5 +1,5 @@
 # port 端口号
-VITE_PORT=8082
+VITE_PORT=8083
 # VITE_API_URL='http://dvadmin3api.django.icu:8001'
 # open 运行 npm run dev 时自动打开浏览器
 VITE_OPEN=false

.env.development

@@ -4,8 +4,8 @@ ENV='development'
 # 本地环境接口地址
 # VITE_API_URL = 'http://127.0.0.1:8000'
 VITE_API_URL='http://192.168.1.225:9090/'
-# VITE_API_URL = 'http://192.168.1.22:8080/'
-# VITE_API_URL = 'http://amzads.zositechc.cn'
+# VUE_APP_API="http://operate.zosi.com.cn/"
+# VUE_APP_API="http://192.168.1.225:81/"
 
 # 是否启用按钮权限
 VITE_PM_ENABLED=true

src/layout/logo/index.vue

@@ -7,7 +7,7 @@
   
 	<div class="layout-logo-size" v-else @click="onThemeConfigChange">
 		<!--<img :src="siteLogo" class="layout-logo-size-img" />-->
-    <span class="layout-logo-size-img italic" style="color: #fff; text-align: center">
+    <span class="layout-logo-size-img italic" style="color: #3875F6; text-align: center">
       AMS
       <!--{{ themeConfig.globalTitle }}-->
     </span>

src/layout/navBars/tagsView/tagsView.vue

@@ -683,6 +683,7 @@ watch(
 	}
 	// 风格5
 	.tags-style-five {
+    background-color: #F4F5FC;
 		align-items: flex-end;
 		.tags-style-five-svg {
 			-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAiIGhlaWdodD0iNzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSI+CgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIHRyYW5zZm9ybT0icm90YXRlKC0wLjEzMzUwNiA1MC4xMTkyIDUwKSIgaWQ9InN2Z18xIiBkPSJtMTAwLjExOTE5LDEwMGMtNTUuMjI4LDAgLTEwMCwtNDQuNzcyIC0xMDAsLTEwMGwwLDEwMGwxMDAsMHoiIG9wYWNpdHk9InVuZGVmaW5lZCIgc3Ryb2tlPSJudWxsIiBmaWxsPSIjRjhFQUU3Ii8+CiAgPHBhdGggZD0ibS0wLjYzNzY2LDcuMzEyMjhjMC4xMTkxOSwwIDAuMjE3MzcsMC4wNTc5NiAwLjQ3Njc2LDAuMTE5MTljMC4yMzIsMC4wNTQ3NyAwLjI3MzI5LDAuMDM0OTEgMC4zNTc1NywwLjExOTE5YzAuMDg0MjgsMC4wODQyOCAwLjM1NzU3LDAgMC40NzY3NiwwbDAuMTE5MTksMGwwLjIzODM4LDAiIGlkPSJzdmdfMiIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHBhdGggZD0ibTI4LjkyMTM0LDY5LjA1MjQ0YzAsMC4xMTkxOSAwLDAuMjM4MzggMCwwLjM1NzU3bDAsMC4xMTkxOWwwLDAuMTE5MTkiIGlkPSJzdmdfMyIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHJlY3QgaWQ9InN2Z180IiBoZWlnaHQ9IjAiIHdpZHRoPSIxLjMxMTA4IiB5PSI2LjgzNTUyIiB4PSItMC4wNDE3MSIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHJlY3QgaWQ9InN2Z181IiBoZWlnaHQ9IjEuNzg3ODQiIHdpZHRoPSIwLjExOTE5IiB5PSI2OC40NTY1IiB4PSIyOC45MjEzNCIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHJlY3QgaWQ9InN2Z182IiBoZWlnaHQ9IjQuODg2NzciIHdpZHRoPSIxOS4wNzAzMiIgeT0iNTEuMjkzMjEiIHg9IjM2LjY2ODY2IiBzdHJva2U9Im51bGwiIGZpbGw9Im5vbmUiLz4KIDwvZz4KPC9zdmc+'),
@@ -721,6 +722,7 @@ watch(
 	}
 }
 .layout-navbars-tagsview-shadow {
-	box-shadow: rgb(0 21 41 / 4%) 0px 1px 4px;
+	//box-shadow: rgb(0 21 41 / 4%) 0px 1px 4px;
+  box-shadow: rgb(0 21 41 / 2%) 0px 1px 6px;
 }
 </style>

src/layout/navMenu/subItem.vue

@@ -1,49 +1,58 @@
 <template>
-	<template v-for="val in chils">
-		<el-sub-menu :index="val.path" :key="val.path" v-if="val.children && val.children.length > 0">
-			<template #title>
-				<SvgIcon :name="val.meta.icon" />
-				<span>{{ $t(val.meta.title) }}</span>
-			</template>
-			<sub-item :chil="val.children" />
-		</el-sub-menu>
-		<template v-else>
-			<el-menu-item :index="val.path" :key="val.path">
-				<template v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
-					<SvgIcon :name="val.meta.icon" />
-					<span>{{ $t(val.meta.title) }}</span>
-				</template>
-				<template v-else>
-					<a class="w100" @click.prevent="onALinkClick(val)">
-						<SvgIcon :name="val.meta.icon" />
-						{{ $t(val.meta.title) }}
-					</a>
-				</template>
-			</el-menu-item>
-		</template>
-	</template>
+  <template v-for="val in chils">
+    <el-sub-menu v-if="val.children && val.children.length > 0" :key="val.path" :index="val.path">
+      <template #title>
+        <SvgIcon :name="val.meta.icon"/>
+        <span>{{ $t(val.meta.title) }}</span>
+      </template>
+      <sub-item :chil="val.children"/>
+    </el-sub-menu>
+    <template v-else>
+      <el-menu-item :key="val.path" :index="val.path">
+        <div class="menu-hover rounded-md absolute left-4 px-10" style="width: 85%;">
+          <template v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
+            <SvgIcon :name="val.meta.icon"/>
+            <span>{{ $t(val.meta.title) }}</span>
+          </template>
+          <template v-else>
+            <a class="w100" @click.prevent="onALinkClick(val)">
+              <SvgIcon :name="val.meta.icon"/>
+              {{ $t(val.meta.title) }}
+            </a>
+          </template>
+        </div>
+
+      </el-menu-item>
+    </template>
+  </template>
 </template>
 
-<script setup lang="ts" name="navMenuSubItem">
+<script lang="ts" name="navMenuSubItem" setup>
 import { computed } from 'vue';
 import { RouteRecordRaw } from 'vue-router';
 import other from '/@/utils/other';
 
 // 定义父组件传过来的值
 const props = defineProps({
-	// 菜单列表
-	chil: {
-		type: Array<RouteRecordRaw>,
-		default: () => [],
-	},
+  // 菜单列表
+  chil: {
+    type: Array<RouteRecordRaw>,
+    default: () => []
+  }
 });
 
 // 获取父级菜单数据
 const chils = computed(() => {
-	return <RouteItems>props.chil;
+  return <RouteItems>props.chil;
 });
 // 打开外部链接
 const onALinkClick = (val: RouteItem) => {
-	other.handleOpenLink(val);
+  other.handleOpenLink(val);
 };
 </script>
+
+<style scoped>
+.menu-hover:hover {
+  background-color: #F2F3F5;
+}
+</style>

src/layout/navMenu/vertical.vue

@@ -1,37 +1,43 @@
 <template>
-	<el-menu
-		router
-		:default-active="state.defaultActive"
-		background-color="transparent"
-		:collapse="state.isCollapse"
-		:unique-opened="getThemeConfig.isUniqueOpened"
-		:collapse-transition="false"
-    class="font-medium"
-	>
-		<template v-for="val in menuLists">
-			<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
-				<template #title>
-					<SvgIcon :name="val.meta.icon" />
-					<span>{{ $t(val.meta.title) }}</span>
-				</template>
-				<SubItem :chil="val.children" />
-			</el-sub-menu>
-			<template v-else>
-				<el-menu-item :index="val.path" :key="val.path">
-					<SvgIcon :name="val.meta.icon" />
-					<template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
-						<span>{{ $t(val.meta.title) }}</span>
-					</template>
-					<template #title v-else>
-						<a class="w100" @click.prevent="onALinkClick(val)">{{ $t(val.meta.title) }}</a>
-					</template>
-				</el-menu-item>
-			</template>
-		</template>
-	</el-menu>
+  <el-menu
+      :collapse="state.isCollapse"
+      :collapse-transition="false"
+      :default-active="state.defaultActive"
+      :unique-opened="getThemeConfig.isUniqueOpened"
+      background-color="transparent"
+      class="font-medium"
+      router
+  >
+    <template v-for="val in menuLists">
+      <!-- 可展开菜单 -->
+      <el-sub-menu v-if="val.children && val.children.length > 0" :key="val.path" :index="val.path" class="custom-menu">
+        <template #title>
+          <SvgIcon :name="val.meta.icon"/>
+          <span>{{ $t(val.meta.title) }}</span>
+        </template>
+        <SubItem :chil="val.children"/>
+      </el-sub-menu>
+      
+      <template v-else>
+        <div class="rounded-md">
+          <div class="menu-hover w-full">
+            <el-menu-item :key="val.path" :index="val.path">
+              <SvgIcon :name="val.meta.icon"/>
+              <template v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)" #title>
+                <span>{{ $t(val.meta.title) }}</span>
+              </template>
+              <template v-else #title>
+                <a class="w100" @click.prevent="onALinkClick(val)">{{ $t(val.meta.title) }}</a>
+              </template>
+            </el-menu-item>
+          </div>
+        </div>
+      </template>
+    </template>
+  </el-menu>
 </template>
 
-<script setup lang="ts" name="navMenuVertical">
+<script lang="ts" name="navMenuVertical" setup>
 import { defineAsyncComponent, reactive, computed, onMounted, watch } from 'vue';
 import { useRoute, onBeforeRouteUpdate, RouteRecordRaw } from 'vue-router';
 import { storeToRefs } from 'pinia';
@@ -43,11 +49,11 @@ const SubItem = defineAsyncComponent(() => import('/@/layout/navMenu/subItem.vue
 
 // 定义父组件传过来的值
 const props = defineProps({
-	// 菜单列表
-	menuList: {
-		type: Array<RouteRecordRaw>,
-		default: () => [],
-	},
+  // 菜单列表
+  menuList: {
+    type: Array<RouteRecordRaw>,
+    default: () => []
+  }
 });
 
 // 定义变量内容
@@ -55,49 +61,59 @@ const storesThemeConfig = useThemeConfig();
 const { themeConfig } = storeToRefs(storesThemeConfig);
 const route = useRoute();
 const state = reactive({
-	// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
-	defaultActive: route.meta.isDynamic ? route.meta.isDynamicPath : route.path,
-	isCollapse: false,
+  // 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
+  defaultActive: route.meta.isDynamic ? route.meta.isDynamicPath : route.path,
+  isCollapse: false
 });
 
 // 获取父级菜单数据
 const menuLists = computed(() => {
-	return <RouteItems>props.menuList;
+  return <RouteItems>props.menuList;
 });
 // 获取布局配置信息
 const getThemeConfig = computed(() => {
-	return themeConfig.value;
+  return themeConfig.value;
 });
 // 菜单高亮（详情时，父级高亮）
 const setParentHighlight = (currentRoute: RouteToFrom) => {
-	const { path, meta } = currentRoute;
-	const pathSplit = meta?.isDynamic ? meta.isDynamicPath!.split('/') : path!.split('/');
-	if (pathSplit.length >= 4 && meta?.isHide) return pathSplit.splice(0, 3).join('/');
-	else return path;
+  const { path, meta } = currentRoute;
+  const pathSplit = meta?.isDynamic ? meta.isDynamicPath!.split('/') : path!.split('/');
+  if (pathSplit.length >= 4 && meta?.isHide) return pathSplit.splice(0, 3).join('/');
+  else return path;
 };
 // 打开外部链接
 const onALinkClick = (val: RouteItem) => {
-	other.handleOpenLink(val);
+  other.handleOpenLink(val);
 };
 // 页面加载时
 onMounted(() => {
-	state.defaultActive = setParentHighlight(route);
+  state.defaultActive = setParentHighlight(route);
 });
 // 路由更新时
 onBeforeRouteUpdate((to) => {
-	// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
-	state.defaultActive = setParentHighlight(to);
-	const clientWidth = document.body.clientWidth;
-	if (clientWidth < 1000) themeConfig.value.isCollapse = false;
+  // 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
+  state.defaultActive = setParentHighlight(to);
+  const clientWidth = document.body.clientWidth;
+  if (clientWidth < 1000) themeConfig.value.isCollapse = false;
 });
 // 设置菜单的收起/展开
 watch(
-	themeConfig.value,
-	() => {
-		document.body.clientWidth <= 1000 ? (state.isCollapse = false) : (state.isCollapse = themeConfig.value.isCollapse);
-	},
-	{
-		immediate: true,
-	}
+    themeConfig.value,
+    () => {
+      document.body.clientWidth <= 1000 ? (state.isCollapse = false) : (state.isCollapse = themeConfig.value.isCollapse);
+    },
+    {
+      immediate: true
+    }
 );
 </script>
+
+<style scoped>
+.menu-hover:hover {
+  background-color: #F2F3F5;
+}
+
+:deep(.custom-menu) {
+  --el-menu-hover-bg-color: #F2F3F5;
+}
+</style>

src/stores/themeConfig.ts

@@ -28,6 +28,7 @@ export const useThemeConfig = defineStore('themeConfig', {
 			 */
 			// 默认顶栏导航背景颜色
 			topBar: '#ffffff',
+			// topBar: '#EBF1F5',
 			// 默认顶栏导航字体颜色
 			topBarColor: '#606266',
 			// 是否开启顶栏背景颜色渐变
@@ -38,12 +39,13 @@ export const useThemeConfig = defineStore('themeConfig', {
 			 */
 			// 默认菜单导航背景颜色
 			// menuBar: '#334054',
-			menuBar: '#1e1b4b',
+			menuBar: '#FFFFFF',
+			// menuBar: '#1e1b4b',
 			// 默认菜单导航字体颜色
-			// menuBarColor: '#eaeaea',
-			menuBarColor: '#EBEDF0',
+			// menuBarColor: '#EBEDF0',
+			menuBarColor: '#4E5969',
 			// 默认菜单高亮背景色
-			// menuBarActiveColor: 'rgba(0, 0, 0, 0.2)',
+			// menuBarActiveColor: '#F2F3F5',
 			menuBarActiveColor: '',
 			// 是否开启菜单背景颜色渐变
 			isMenuBarColorGradual: false,
@@ -129,7 +131,7 @@ export const useThemeConfig = defineStore('themeConfig', {
 			 * 中的 `initSetLayoutChange(设置布局切换，重置主题样式)` 方法
 			 */
 			// 布局切换：可选值"<defaults|classic|transverse|columns>"，默认 defaults
-			layout: 'defaults',
+			layout: 'classic',
 
 			/**
 			 * 后端控制路由

src/theme/app.scss

@@ -56,7 +56,7 @@ body,
 	}
 	.layout-aside {
 		background: var(--next-bg-menuBar);
-		//background: #003153;
+		//background: #EBF1F5;
 		box-shadow: 2px 0 6px rgb(0 21 41 / 1%);
 		height: inherit;
 		position: relative;

src/views/system/home/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="home-container">
+  <div class="home-container p-5">
     <el-row :gutter="15" class="home-card-one mb15">
       <el-col
           v-for="(v, k) in homeOne"

src/views/system/menu/index.vue

@@ -1,8 +1,8 @@
 <template>
 	<fs-page>
-		<el-row class="menu-el-row">
+		<el-row class="menu-el-row p-5">
 			<el-col :span="6">
-				<div class="menu-box menu-left-box">
+				<div class="menu-box menu-left-box" style="border: 1px solid #DDDFE6">
 					<MenuTreeCom
 						ref="menuTreeRef"
 						:treeData="menuTreeData"
@@ -14,7 +14,7 @@
 			</el-col>
 
 			<el-col :span="18">
-        <el-tabs type="border-card">
+        <el-tabs type="border-card" style="border-radius: 8px; overflow: hidden;">
           <el-tab-pane label="按钮权限配置" >
             <div style="height: 80vh">
               <MenuButtonCom ref="menuButtonRef" />
@@ -26,7 +26,6 @@
             </div>
           </el-tab-pane>
         </el-tabs>
-
 			</el-col>
 		</el-row>
 
@@ -130,7 +129,7 @@ onMounted(() => {
 
 	.el-col {
 		height: 100%;
-		padding: 10px 0;
+		//padding: 20px;
 		box-sizing: border-box;
 	}
 }
@@ -144,7 +143,7 @@ onMounted(() => {
 
 .menu-left-box {
 	position: relative;
-	border-radius: 0 8px 8px 0;
+	border-radius: 8px;
 	margin-right: 10px;
 }