feacture:头部菜单；首页公共组件

src/i18n/lang/en.ts

@@ -1,6 +1,6 @@
 export default {
 	router: {
-		home: 'Home',
+		home: 'Dashboard',
 		system: 'System',
 		systemMenu: 'System Menu',
 		systemRole: 'System Role',
@@ -92,7 +92,7 @@ export default {
 		dropdownLarge: 'Large',
 		dropdownDefault: 'Default',
 		dropdownSmall: 'Small',
-		dropdown1: 'Home Page',
+		dropdown1: 'Dashboard', // 'Home Page',
 		dropdown2: 'Personal Center',
 		dropdown5: 'Log Out',
 		searchPlaceholder: 'Menu Search: Supports Chinese and Routing Path',

src/i18n/lang/zh-cn.ts

@@ -1,7 +1,7 @@
 // 定义内容
 export default {
 	router: {
-		home: '首页',
+		home: '仪表盘',
 		system: '系统设置',
 		systemMenu: '菜单管理',
 		systemRole: '角色管理',
@@ -85,7 +85,7 @@ export default {
 		dropdownLarge: '大型',
 		dropdownDefault: '默认',
 		dropdownSmall: '小型',
-		dropdown1: '首页',
+		dropdown1: '仪表盘',
 		dropdown2: '个人中心',
 		dropdown5: '退出登录',
 		searchPlaceholder: '菜单搜索：支持中文、路由路径',

src/layout/logo/index.vue

@@ -1,15 +1,15 @@
 <template>
 	<div class="layout-logo" v-if="setShowLogo" @click="onThemeConfigChange">
-		<span>{{ themeConfig.globalTitle }}</span>
+		<img :src="logo" class="layout-logo-img" width="91px"/>
 	</div>
 	<div class="layout-logo-size" v-else @click="onThemeConfigChange">
-		<img :src="logoMini" class="layout-logo-size-img" />
+		<img :src="logo" class="layout-logo-size-img"/>
 	</div>
 </template>
 
 <script setup lang="ts" name="layoutLogo">
 import { useThemeConfig } from '/@/stores/themeConfig';
-import logoMini from '/@/assets/logo-mini.svg';
+import logo from '/@/assets/logo.png';
 
 // 定义变量内容
 const storesThemeConfig = useThemeConfig();
@@ -35,7 +35,7 @@ const onThemeConfigChange = () => {
 	align-items: center;
 	justify-content: center;
 	box-shadow: rgb(0 21 41 / 2%) 0px 1px 4px;
-	color: var(--el-color-primary);
+	color: var(--menu-bar-active-color);
 	font-size: 16px;
 	cursor: pointer;
 	animation: logoAnimation 0.3s ease-in-out;

src/layout/navBars/breadcrumb/setings.vue

@@ -75,6 +75,12 @@
 						<el-color-picker v-model="getThemeConfig.menuBarActiveColor" show-alpha @change="onBgColorPickerChange('menuBarActiveColor')" />
 					</div>
 				</div>
+				<div class="layout-breadcrumb-seting-bar-flex">
+					<div class="layout-breadcrumb-seting-bar-flex-label">菜单高亮字体颜色</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-color-picker v-model="getThemeConfig.menuBarActiveFontColor" @change="onBgColorPickerChange('menuBarActiveFontColor')" />
+					</div>
+				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt14">
 					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.twoIsMenuBarColorGradual') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
@@ -469,6 +475,12 @@ const onBgColorPickerChange = (bg: string) => {
 	if (bg === 'menuBar') {
 		document.documentElement.style.setProperty(`--next-bg-menuBar-light-1`, getLightColor(getThemeConfig.value.menuBar, 0.05));
 	}
+	if (bg === 'menuBarActiveFontColor') {
+		document.documentElement.style.setProperty(`--menu-bar-active-font-color`, themeConfig.value.menuBarActiveFontColor);
+	}
+	if (bg === 'menuBarActiveColor') {
+		document.documentElement.style.setProperty(`--menu-bar-active-color`, themeConfig.value.menuBarActiveColor);
+	}
 	onTopBarGradualChange();
 	onMenuBarGradualChange();
 	onColumnsMenuBarGradualChange();

src/layout/navBars/breadcrumb/user.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
-		<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">
+		<!-- <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">
 			<div class="layout-navbars-breadcrumb-user-icon">
 				<i class="iconfont" :class="state.disabledI18n === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'" :title="$t('user.title1')"></i>
 			</div>
@@ -44,7 +44,7 @@
 				:title="state.isScreenfull ? $t('user.title6') : $t('user.title5')"
 				:class="!state.isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"
 			></i>
-		</div>
+		</div> -->
 		<el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
 			<span class="layout-navbars-breadcrumb-user-link">
 				<img :src="baseURL + userInfos.user.avatar" class="layout-navbars-breadcrumb-user-link-photo mr5" />

src/layout/navMenu/horizontal.vue

@@ -148,6 +148,7 @@ onBeforeMount(() => {
 // 页面加载时
 onMounted(() => {
 	initElMenuOffsetLeft();
+	document.documentElement.style.setProperty('--menu-bar-active-font-color', themeConfig.value.menuBarActiveFontColor);
 });
 // 路由更新时
 onBeforeRouteUpdate((to) => {
@@ -157,6 +158,7 @@ onBeforeRouteUpdate((to) => {
 	if (layout === 'classic' && isClassicSplitMenu) {
 		mittBus.emit('setSendClassicChildren', setSendClassicChildren(to.path));
 	}
+	document.documentElement.style.setProperty('--menu-bar-active-font-color', themeConfig.value.menuBarActiveFontColor);
 });
 </script>
 

src/layout/navMenu/vertical.vue

@@ -78,12 +78,14 @@ const onALinkClick = (val: RouteItem) => {
 // 页面加载时
 onMounted(() => {
 	state.defaultActive = setParentHighlight(route);
+	document.documentElement.style.setProperty('--menu-bar-active-font-color', themeConfig.value.menuBarActiveFontColor);
 });
 // 路由更新时
 onBeforeRouteUpdate((to) => {
 	state.defaultActive = setParentHighlight(to);
 	const clientWidth = document.body.clientWidth;
 	if (clientWidth < 1000) themeConfig.value.isCollapse = false;
+	document.documentElement.style.setProperty('--menu-bar-active-font-color', themeConfig.value.menuBarActiveFontColor);
 });
 // 设置菜单的收起/展开
 watch(

src/stores/themeConfig.ts

@@ -23,9 +23,9 @@ export const useThemeConfig = defineStore('themeConfig', {
 			 * 顶栏设置
 			 */
 			// 默认顶栏导航背景颜色
-			topBar: '#ffffff',
+			topBar: '#167af0',
 			// 默认顶栏导航字体颜色
-			topBarColor: '#606266',
+			topBarColor: '#ffffff',
 			// 是否开启顶栏背景颜色渐变
 			isTopBarColorGradual: false,
 
@@ -33,11 +33,13 @@ export const useThemeConfig = defineStore('themeConfig', {
 			 * 菜单设置
 			 */
 			// 默认菜单导航背景颜色
-			menuBar: '#FFFFFF',
+			menuBar: '#167af0',
 			// 默认菜单导航字体颜色
-			menuBarColor: '#505968',
+			menuBarColor: '#ffffff',
 			// 默认菜单高亮背景色
-			menuBarActiveColor: 'rgba(242, 243, 245, 1)',
+			menuBarActiveColor: '#ffffff',
+			// 新增：默认菜单高亮字体颜色
+			menuBarActiveFontColor: '#167af0',
 			// 是否开启菜单背景颜色渐变
 			isMenuBarColorGradual: false,
 
@@ -122,7 +124,7 @@ export const useThemeConfig = defineStore('themeConfig', {
 			 * 中的 `initSetLayoutChange(设置布局切换，重置主题样式)` 方法
 			 */
 			// 布局切换：可选值"<defaults|classic|transverse|columns>"，默认 defaults
-			layout: 'defaults',
+			layout: 'transverse',
 
 			/**
 			 * 后端控制路由

src/theme/app.scss

@@ -335,3 +335,43 @@ body,
 		padding-left: #{$i}px !important;
 	}
 }
+
+/* 竖向 菜单 */
+.el-menu.el-menu--vertical {
+	.el-menu-item:hover,
+	.el-sub-menu.is-active>.el-sub-menu__title,
+	.el-menu-item.is-active {
+		background-color: var(--menu-bar-active-color) !important;
+		color: var(--menu-bar-active-font-color) !important;
+	}
+}
+
+/* 横向 菜单 */
+.el-menu.el-menu--horizontal {
+	.el-menu-item,
+	.el-sub-menu,
+	.el-sub-menu__title {
+		height: 48px;
+		border-bottom: 2px solid transparent !important;
+	}
+	.el-menu-item:hover,
+	.el-sub-menu:hover>.el-sub-menu__title,
+	.el-sub-menu.is-active>.el-sub-menu__title,
+	.el-menu-item.is-active {
+		height: 48px;
+		background-color: var(--menu-bar-active-color) !important;
+		color: var(--menu-bar-active-font-color) !important;
+		border-bottom: 2px solid var(--el-color-primary) !important;
+	}
+}
+
+/* 横向菜单下拉弹出层菜单项高亮字体颜色 */
+.el-popper .el-menu--horizontal>.el-menu {
+	.el-menu-item.is-active,
+	.el-menu-item:hover,
+	.el-sub-menu:hover>.el-sub-menu__title,
+	.el-sub-menu.is-opened>.el-sub-menu__title {
+		background-color: var(--menu-bar-active-color) !important;
+		color: var(--menu-bar-active-font-color) !important;
+	}
+}

src/theme/element.scss

@@ -226,7 +226,7 @@
 
 	.el-menu-item,
 	.el-sub-menu__title {
-		height: 50px !important;
+		height: 48px !important;
 		color: var(--next-bg-topBarColor);
 	}
 

src/types/pinia.d.ts

@@ -50,6 +50,7 @@ declare interface ThemeConfigState {
 		menuBar: string;
 		menuBarColor: string;
 		menuBarActiveColor: string;
+		menuBarActiveFontColor: string;
 		isMenuBarColorGradual: boolean;
 		columnsMenuBar: string;
 		columnsMenuBarColor: string;

src/views/home/custom-panel.vue

@@ -0,0 +1,54 @@
+<template>
+  <el-card>
+    <div class="panel-top">
+      <div class="panel-name">{{prop.title}}</div>
+      <div style="cursor: pointer;">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M16.7167 6.66667C15.4895 4.19712 12.9411 2.5 9.99637 2.5C7.05158 2.5 4.56062 4.19712 3.33337 6.66667" stroke="#ADBFD7" stroke-linecap="round"/>
+          <path d="M3.33337 3.33334V6.66667" stroke="#ADBFD7" stroke-linecap="round"/>
+          <path d="M6.15845 6.66666H3.33337" stroke="#ADBFD7" stroke-linecap="round"/>
+          <path d="M3.33337 13.3333C4.56062 15.8029 7.109 17.5 10.0538 17.5C12.9985 17.5 15.4895 15.8029 16.7167 13.3333" stroke="#ADBFD7" stroke-linecap="round"/>
+          <path d="M16.7167 16.6667V13.3333" stroke="#ADBFD7" stroke-linecap="round"/>
+          <path d="M13.8916 13.3333H16.7167" stroke="#ADBFD7" stroke-linecap="round"/>
+        </svg>
+      </div>
+    </div>
+    <slot></slot>
+  </el-card>
+</template>
+
+<script setup lang="ts" name="panel-top">
+const prop = defineProps({
+  title: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.panel-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.panel-name {
+  line-height: 22px;
+  font-family: Source Han Sans SC;
+  font-weight: 500;
+  font-size: 18px;
+  color: rgba(18, 18, 18, 1);
+  position: relative;
+  padding-left: 12px;
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 4px;
+    height: 14px;
+    background-color: rgb(22, 122, 240, 1);
+  }
+}
+</style>

src/views/home/index.vue

@@ -1,35 +1,26 @@
 <template>
-  <div class="layout-padding">
-    <div class="layout-padding-auto layout-padding-view">
-      <splitpanes>
-        <pane size="70">
-          <splitpanes horizontal>
-            <pane size="25">
-              <current-user/>
-            </pane>
-            <pane size="75">
-              <favorite/>
-            </pane>
-          </splitpanes>
-        </pane>
-        <pane size="30">
-          <splitpanes horizontal>
-            <pane size="58">
-              <schedule/>
-            </pane>
-            <pane size="42">
-              <sys-log/>
-            </pane>
-          </splitpanes>
-        </pane>
-      </splitpanes>
-    </div>
-  </div>
+  <splitpanes style="height: 410px">
+    <pane size="20">
+      <custom-panel :title="'访客趋势图'">
+        <visitor-trend-chart />
+      </custom-panel>
+    </pane>
+    <pane size="40">
+      <custom-panel :title="'访客趋势图'">
+        <visitor-trend-chart />
+      </custom-panel>
+    </pane>
+    <pane size="40">
+      <custom-panel :title="'访客趋势图'">
+        <visitor-trend-chart />
+      </custom-panel>
+    </pane>
+  </splitpanes>
 </template>
 
 <script setup lang="ts" name="home">
-const CurrentUser = defineAsyncComponent(() => import('./current-user.vue'));
-const Favorite = defineAsyncComponent(() => import('./favorite.vue'));
-const Schedule = defineAsyncComponent(() => import('./schedule.vue'));
-const SysLog = defineAsyncComponent(() => import('./sys-log.vue'));
+import { defineAsyncComponent } from 'vue';
+
+const customPanel = defineAsyncComponent(() => import('./custom-panel.vue'));
+const visitorTrendChart = defineAsyncComponent(() => import('./visitor-trend-chart.vue'));
 </script>

src/views/home/visitor-trend-chart.vue

@@ -0,0 +1,9 @@
+<!-- 访客趋势图组件 -->
+<template>
+</template>
+
+<script setup lang="ts" name="visitorTrendChart">
+</script>
+
+<style scoped lang="scss">
+</style>