Fix：优化大屏菜单

src/app/routes/data-v/navigation/navigation.component.html

@@ -5,10 +5,12 @@
       <li
         class="dropdown-submenu"
         (mouseover)="menuOver(menu, $event)"
-        *ngIf="!selectedParentMenu || menu.menuCode === 'Home' || (selectedParentMenu && selectedParentMenu.menuCode == 'Home')"
+        *ngIf="!selectedParentMenu || menu.menuCode == 'Home' || (selectedParentMenu && selectedParentMenu.menuCode == 'Home')"
       >
         <a href="javascript:void(0);" class="menu-group" [class.active]="isActive(true)" (click)="navigate(menu)">
-          {{ menu.text }}
+          <img *ngIf="menu.icon" width="20" src="assets/{{ menu.icon }}" alt="{{ menu.text }}" />
+          {{ menu.menuCode == 'Home' && selectedParentMenu && selectedParentMenu.menuCode != 'Home' ? '/ ' + selectedParentMenu.text : '' }}
+          {{ menu.menuCode != 'Home' ? menu.text : '' }}
         </a>
       </li>
     </ng-container>

src/app/routes/data-v/navigation/navigation.component.less

@@ -1,14 +1,63 @@
+
 .navigation-container {
+  overflow-x: auto; /* 水平方向上的滚动条 */
   display: flex;
   flex-direction: row;
   width: 100%;
   padding-left: 2rem;
+  white-space: nowrap; /* 防止菜单项换行 */
+}
+
+/* 调整滚动条大小 */
+::-webkit-scrollbar {
+  width: 8px; /* 调整滚动条的宽度 */
+  height: 8px; /* 调整滚动条的高度 */
+}
+
+/* 调整滚动条轨道的样式 */
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+/* 调整滚动条滑块的样式 */
+::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 4px;
+}
+
+/* 当鼠标悬停在滑块上时，改变滑块的颜色 */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+/* 调整菜单与滚动条的间距 */
+.navigation-container ul {
+  padding-right: 12px; /* 增加右侧内边距以增加间距 */
+}
+
+.dropdown-submenu {
+  display: inline-block; /* 使菜单项在一行内显示 */
+}
+
+.scrollable-menu ul {
+  padding-right: 20px; /* 右侧内边距，根据需要调整 */
+}
+
+[nz-button] {
+  margin-right: 8px;
+  margin-bottom: 12px;
+}
+
+.nz-button-group [nz-button] {
+  margin-right: 0;
 }
 
 ul {
   display: inline-flex;
   width: max-content;
   margin-right: auto;
+  margin-bottom: 10px;
   margin-bottom: 0;
 
   li {

src/app/routes/data-v/navigation/navigation.component.ts

@@ -35,9 +35,8 @@ export class DataVNavigationComponent implements OnInit {
       {
         menuCode: 'Home',
         text: '我的工作站',
-
         i18n: null,
-        icon: null,
+        icon: 'home.svg',
         grp: true,
         leafFlag: false,
         rootFlag: true,

src/assets/home.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1710927165008" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1510" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M230.4 992c-64 0-115.2-51.2-115.2-115.2L115.2 544 76.8 582.4C70.4 588.8 57.6 595.2 44.8 595.2c-12.8 0-25.6-6.4-32-12.8C6.4 569.6 0 556.8 0 544 0 537.6 6.4 524.8 12.8 512l467.2-467.2C486.4 38.4 499.2 32 512 32s25.6 6.4 32 12.8L1011.2 512C1017.6 524.8 1024 537.6 1024 544c0 12.8-6.4 25.6-12.8 32-6.4 6.4-19.2 12.8-32 12.8s-25.6-6.4-32-12.8L512 147.2 211.2 448l0 422.4c0 12.8 12.8 25.6 25.6 25.6l115.2 0 0-185.6c0-25.6 19.2-44.8 44.8-44.8l230.4 0c25.6 0 44.8 19.2 44.8 44.8s-19.2 44.8-44.8 44.8L441.6 755.2l0 185.6c0 25.6-19.2 44.8-44.8 44.8L230.4 985.6zM627.2 992c-25.6 0-44.8-19.2-44.8-44.8 0-25.6 19.2-44.8 44.8-44.8l160 0c12.8 0 25.6-12.8 25.6-25.6l0-256c0-25.6 19.2-44.8 44.8-44.8 25.6 0 44.8 19.2 44.8 44.8l0 256c0 64-51.2 115.2-115.2 115.2L627.2 992z" fill="#305AB7" p-id="1511"></path></svg>