菜单调整

src/assets/menuIcons/fxfk.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="17px" height="19px" viewBox="0 0 17 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>风险防控综合业务-未选中</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="风险防控综合业务-未选中" transform="translate(0.618132, 0.984848)">
+            <rect id="矩形" fill-opacity="0" fill="#FFFFFF" x="0" y="0" width="16" height="16"></rect>
+            <g id="编组" transform="translate(0.000000, 0.515152)" fill="#2C81FF" fill-rule="nonzero">
+                <path d="M0.00293591321,7.90893077 C0.00293591321,6.08083548 0,4.3465496 0,2.15705738 C2.07694889,1.49857399 4.36304664,0.712588077 7.5,0 C10.6369534,0.712588077 12.9230511,1.49857399 15,2.15705738 C15,4.3465496 14.9970641,6.08083548 14.9970641,7.90907057 C14.9970641,13.0599206 10.7957723,15.8933564 7.50013981,16.7767867 C4.20436752,15.8933564 0.00293591321,13.0597808 0.00293591321,7.90893077 Z" id="路径"></path>
+            </g>
+            <circle id="椭圆形" fill="#2C81FF" cx="7.64302326" cy="0.984848485" r="1"></circle>
+            <path d="M4,9.27767699 C4,10.6218979 4.71258002,11.8640092 5.86931815,12.5361197 C7.02605628,13.2082301 8.45121644,13.2082301 9.60795457,12.5361197 C10.7646927,11.8640092 11.4772727,10.6218979 11.4772727,9.27767699 C11.4772727,7.93345611 10.7646927,6.69134479 9.60795456,6.01923435 C8.45121644,5.3471239 7.02605629,5.3471239 5.86931817,6.01923435 C4.71258004,6.69134479 4,7.93345611 4,9.27767699 L4,9.27767699 Z" id="路径" fill="#FFFFFF" fill-rule="nonzero"></path>
+            <polygon id="路径" fill="#2C81FF" fill-rule="nonzero" points="7.17784993 7.51515152 9.16883117 7.51515152 8.42207792 8.93814745 9.46681097 8.93814745 6.9469697 12.4755785 7.28679654 10.0645271 6 10.0645271"></polygon>
+        </g>
+    </g>
+</svg>

src/assets/menuIcons/fxfkActive.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="17px" height="18px" viewBox="0 0 17 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>风险防控综合业务-选中</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="风险防控综合业务-选中" transform="translate(0.618132, 0.500000)">
+            <rect id="矩形" fill-opacity="0" fill="#FFFFFF" x="0" y="0.484848485" width="16" height="16"></rect>
+            <g id="编组" transform="translate(0.381868, 0.500000)" fill="#FFFFFF" fill-rule="nonzero">
+                <path d="M0.00293591321,7.90893077 C0.00293591321,6.08083548 0,4.3465496 0,2.15705738 C2.07694889,1.49857399 4.36304664,0.712588077 7.5,0 C10.6369534,0.712588077 12.9230511,1.49857399 15,2.15705738 C15,4.3465496 14.9970641,6.08083548 14.9970641,7.90907057 C14.9970641,13.0599206 10.7957723,15.8933564 7.50013981,16.7767867 C4.20436752,15.8933564 0.00293591321,13.0597808 0.00293591321,7.90893077 Z" id="路径"></path>
+            </g>
+            <circle id="椭圆形" fill="#FFFFFF" cx="7.64302326" cy="0.96969697" r="1"></circle>
+            <path d="M4,9.76252547 C4,11.1067464 4.71258002,12.3488577 5.86931815,13.0209681 C7.02605628,13.6930786 8.45121644,13.6930786 9.60795457,13.0209681 C10.7646927,12.3488577 11.4772727,11.1067464 11.4772727,9.76252547 C11.4772727,8.4183046 10.7646927,7.17619328 9.60795456,6.50408283 C8.45121644,5.83197239 7.02605629,5.83197239 5.86931817,6.50408283 C4.71258004,7.17619328 4,8.4183046 4,9.76252547 L4,9.76252547 Z" id="路径" fill="#2C81FF" fill-rule="nonzero"></path>
+            <polygon id="路径" fill="#FFFFFF" fill-rule="nonzero" points="7.17784993 8 9.16883117 8 8.42207792 9.42299593 9.46681097 9.42299593 6.9469697 12.960427 7.28679654 10.5493755 6 10.5493755"></polygon>
+        </g>
+    </g>
+</svg>

src/assets/menuIcons/zbzs.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="17px" height="16px" viewBox="0 0 17 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>值班值守-选中</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="值班值守-选中" transform="translate(0.500000, 0.000000)">
+            <rect id="矩形" fill-opacity="0" fill="#FFFFFF" x="0" y="0" width="16" height="16"></rect>
+            <circle id="椭圆形" fill="#FFFFFF" cx="8" cy="5" r="3"></circle>
+            <path d="M3.640625,9.21875 L12.359375,9.21875 C14.0938906,9.21875 15.5,10.6248594 15.5,12.359375 C15.5,14.0938906 14.0938906,15.5 12.359375,15.5 L3.640625,15.5 C1.90610937,15.5 0.5,14.0938906 0.5,12.359375 C0.5,10.6248594 1.90610937,9.21875 3.640625,9.21875 Z" id="形状" fill="#FFFFFF" fill-rule="nonzero"></path>
+            <path d="M12.359375,15.5 L3.640625,15.5 C1.908875,15.5 0.5,14.091125 0.5,12.359375 C0.5,10.627625 1.908875,9.21875 3.640625,9.21875 L12.359375,9.21875 C14.091125,9.21875 15.5,10.627625 15.5,12.359375 C15.5,14.091125 14.091125,15.5 12.359375,15.5 Z M3.640625,10.625 C2.68428125,10.625 1.90625,11.4030781 1.90625,12.359375 C1.90625,13.3156719 2.68428125,14.09375 3.640625,14.09375 L12.359375,14.09375 C13.3156719,14.09375 14.09375,13.3156719 14.09375,12.359375 C14.09375,11.4030781 13.3156719,10.625 12.359375,10.625 L3.640625,10.625 Z" id="形状" fill="#FFFFFF" fill-rule="nonzero"></path>
+            <rect id="矩形" fill="#2C81FF" x="8" y="11" width="5" height="2" rx="1"></rect>
+        </g>
+    </g>
+</svg>

src/assets/menuIcons/zbzsActive.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="17px" height="16px" viewBox="0 0 17 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>值班值守-未选中</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="值班值守-未选中" transform="translate(0.500000, 0.000000)">
+            <rect id="矩形" fill-opacity="0" fill="#FFFFFF" x="0" y="0" width="16" height="16"></rect>
+            <circle id="椭圆形" fill="#2C81FF" cx="8" cy="5" r="3"></circle>
+            <path d="M3.640625,9.21875 L12.359375,9.21875 C14.0938906,9.21875 15.5,10.6248594 15.5,12.359375 C15.5,14.0938906 14.0938906,15.5 12.359375,15.5 L3.640625,15.5 C1.90610937,15.5 0.5,14.0938906 0.5,12.359375 C0.5,10.6248594 1.90610937,9.21875 3.640625,9.21875 Z" id="形状" fill="#2C81FF" fill-rule="nonzero"></path>
+            <path d="M12.359375,15.5 L3.640625,15.5 C1.908875,15.5 0.5,14.091125 0.5,12.359375 C0.5,10.627625 1.908875,9.21875 3.640625,9.21875 L12.359375,9.21875 C14.091125,9.21875 15.5,10.627625 15.5,12.359375 C15.5,14.091125 14.091125,15.5 12.359375,15.5 Z M3.640625,10.625 C2.68428125,10.625 1.90625,11.4030781 1.90625,12.359375 C1.90625,13.3156719 2.68428125,14.09375 3.640625,14.09375 L12.359375,14.09375 C13.3156719,14.09375 14.09375,13.3156719 14.09375,12.359375 C14.09375,11.4030781 13.3156719,10.625 12.359375,10.625 L3.640625,10.625 Z" id="形状" fill="#2C81FF" fill-rule="nonzero"></path>
+            <rect id="矩形" fill="#FFFFFF" x="8" y="11" width="5" height="2" rx="1"></rect>
+        </g>
+    </g>
+</svg>

src/assets/styles/index.scss

@@ -271,6 +271,7 @@ aside {
   justify-content: center;
   padding: 0 24px 24px;
   z-index: 99;
+  overflow-y: auto;
   .common-dialog-content {
     border-bottom: 1px solid #e6f2ff;
     border-left: 1px solid #e6f2ff;

src/components/IconSelect/requireIcons.ts

@@ -1,7 +1,10 @@
 const icons: string[] = [];
-const modules = import.meta.glob('./../../assets/icons/svg/*.svg');
+const modules = import.meta.glob('./../../assets/menuIcons/*.svg');
 for (const path in modules) {
-  const p = path.split('assets/icons/svg/')[1].split('.svg')[0];
-  icons.push(p);
+  const p = path.split('assets/menuIcons/')[1].split('.svg')[0];
+  // 检查文件名是否不以 "Active" 结尾
+  if (!p.endsWith('Active')) {
+    icons.push(p);
+  }
 }
 export default icons;

src/components/TopNav/index.vue

@@ -2,7 +2,8 @@
   <el-menu :default-active="activeMenu" mode="horizontal" :ellipsis="false" @select="handleSelect">
     <template v-for="(item, index) in topMenus">
       <el-menu-item v-if="index < visibleNumber" :key="index" :style="{ '--theme': theme }" :index="item.path"
-        ><svg-icon v-if="item.meta && item.meta.icon && item.meta.icon !== '#'" :icon-class="item.meta ? item.meta.icon : ''" />
+        >
+        <svg-icon v-if="item.meta && item.meta.icon && item.meta.icon !== '#'" :icon-class="item.meta ? item.meta.icon : ''" />
         {{ item.meta?.title }}</el-menu-item
       >
     </template>

src/layout/components/Sidebar/SidebarItem.vue

@@ -13,7 +13,7 @@
 
     <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>
       <template v-if="item.meta" #title>
-        <svg-icon :icon-class="item.meta ? item.meta.icon : ''" />
+        <svg-icon :icon-class="getIconClass(item)" />
         <span class="menu-title" :title="hasTitle(item.meta?.title)">{{ item.meta?.title }}</span>
       </template>
       <sidebar-item
@@ -48,7 +48,7 @@ const props = defineProps({
     default: ''
   }
 });
-
+const subMenu = ref();
 const onlyOneChild = ref<any>({});
 
 const hasOneShowingChild = (parent: RouteRecordRaw, children?: RouteRecordRaw[]) => {
@@ -99,4 +99,39 @@ const hasTitle = (title: string | undefined): string => {
   }
   return title;
 };
+
+const getIconClass = (item) => {
+  let res = '';
+  if (subMenu.value && !!subMenu.value.opened) {
+    res = item.meta.icon + 'Active';
+  } else if (item.meta && item.meta.icon) {
+    res = item.meta.icon;
+  }
+  return res;
+};
 </script>
+
+<style lang="scss" scoped>
+.el-menu-item.is-active {
+  color: #ffffff;
+}
+.el-sub-menu .el-menu-item.is-active {
+  background-color: #2c81ff;
+  position: relative;
+  &::before {
+    content: '';
+    width: 4px;
+    height: 100%;
+    background-color: #fff;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+
+.is-opened {
+  :deep(.el-sub-menu__title) {
+    color: #fff !important;
+  }
+}
+</style>

src/layout/components/Sidebar/index.vue

@@ -48,6 +48,8 @@ const activeMenu = computed(() => {
   return path;
 });
 
-const bgColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground));
-const textColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuColor : variables.menuLightColor));
+// const bgColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground));
+const bgColor = '#0f2942';
+const textColor = '#939faa';
+// const textColor = computed(() => (sideTheme.value === 'theme-dark' ? variables.menuColor : variables.menuLightColor));
 </script>

vite/plugins/svg-icon.ts

@@ -2,7 +2,7 @@ import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
 export default (path: any, isBuild: boolean) => {
   return createSvgIconsPlugin({
     // 指定需要缓存的图标文件夹
-    iconDirs: [path.resolve(path.resolve(__dirname, '../../src'), 'assets/icons/svg')],
+    iconDirs: [path.resolve(path.resolve(__dirname, '../../src'), 'assets/menuIcons')],
     // 指定symbolId格式
     symbolId: 'icon-[dir]-[name]',
     svgoOptions: isBuild