更新前端src/views/layout目录文件

core/core-frontend/src/layout/components/Header.vue

@@ -130,23 +130,23 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-header class="header-flex" :class="{ 'header-light': navigateBg && navigateBg === 'light' }">
+  <el-header class="header-flex" :class="{ 'header-light': navigateBg === 'light' }">
     <img class="logo" v-if="navigate" :src="navigate" alt="" />
     <Icon v-else
       ><logo @click="handleIconClick" class="svg-icon logo" style="cursor: pointer"
     /></Icon>
     <el-menu
       :default-active="activeIndex"
-      class="el-menu-demo"
       mode="horizontal"
       :ellipsis="false"
       @select="handleSelect"
+      :effect="navigateBg === 'light' ? 'light' : 'dark'"
     >
       <HeaderMenuItem v-for="menu in routers" :key="menu.path" :menu="menu"></HeaderMenuItem>
     </el-menu>
     <div class="operate-setting" v-if="!desktop">
-      <!-- <XpackComponent jsname="c3dpdGNoZXI=" /> -->
+      <XpackComponent jsname="c3dpdGNoZXI=" />
-      <!-- <el-tooltip effect="dark" content="Copilot" placement="bottom">
+      <el-tooltip effect="dark" content="Copilot" placement="bottom">
         <el-icon
           style="margin: 0 10px"
           class="ai-icon copilot-icon"
@@ -178,15 +178,15 @@ onMounted(() => {
             ><dvPreviewDownload @click="downloadClick" class="svg-icon"
           /></Icon>
         </el-icon>
-      </el-tooltip> -->
+      </el-tooltip>
 
-      <!-- <ai-tips
+      <ai-tips
         @confirm="aiTipsConfirm"
         v-if="showOverlay && appearanceStore.getShowAi"
         class="ai-icon-tips"
-      /> -->
+      />
-      <!-- <ToolboxCfg v-if="showToolbox" />
+      <ToolboxCfg v-if="showToolbox" />
-      <TopDoc v-if="appearanceStore.getShowDoc" /> -->
+      <TopDoc v-if="appearanceStore.getShowDoc" />
       <el-tooltip
         v-if="showMsg"
         effect="dark"
@@ -277,65 +277,15 @@ onMounted(() => {
     }
   }
 
-  .ed-menu {
+  .ed-menu.ed-menu--horizontal {
-    background-color: #050e21;
+    border-bottom: none;
-    height: 56px;
+    background: transparent;
-  }
-
-  .ed-menu--horizontal {
-    border: none;
-    .ed-menu-item,
-    :deep(.ed-sub-menu__title) {
-      color: rgba(255, 255, 255, 0.8);
-      line-height: 50px;
-      border-bottom: none;
-
-      &.is-active {
-        border-bottom: none;
-        color: #ffffff !important;
-        background-color: var(--ed-color-primary) !important;
-      }
-    }
-
-    > .is-active {
-      :deep(.ed-sub-menu__title) {
-        color: #ffffff !important;
-        background-color: var(--ed-color-primary);
-      }
-    }
-
-    .ed-menu-item:not(.is-disabled):hover,
-    :deep(.ed-sub-menu__title):not(.is-disabled):hover {
-      color: #ffffffcc;
-      background: #ffffff1a;
-    }
   }
 }
 
 .header-light {
   background-color: #ffffff !important;
   box-shadow: 0px 0.5px 0px 0px #1f232926 !important;
-  .ed-menu {
-    background-color: #ffffff !important;
-  }
-  .ed-menu--horizontal {
-    .ed-menu-item {
-      color: var(--ed-color-black) !important;
-    }
-    :deep(.ed-sub-menu__title) {
-      color: var(--ed-color-black) !important;
-    }
-    .ed-menu-item:not(.is-disabled):hover,
-    :deep(.ed-sub-menu):not(.is-active) .ed-sub-menu__title:not(.is-disabled):hover {
-      color: #1f2329;
-      background: #1f23291a;
-    }
-    :deep(.ed-sub-menu).is-active .ed-sub-menu__title:not(.is-disabled):hover {
-      color: #ffffff !important;
-      background-color: var(--ed-color-primary);
-    }
-  }
-
   .logo {
     color: #3371ff !important;
   }

core/core-frontend/src/layout/components/HeaderMenuItem.vue

@@ -4,12 +4,13 @@ import icon_expandDown_filled from '@/assets/svg/icon_expand-down_filled.svg'
 import { ElMenuItem, ElSubMenu } from 'element-plus-secondary'
 
 const title = props => {
-  const { title } = props.menu?.meta || {}
+  const { title } = props?.menu?.meta || {}
   return [h('span', null, { default: () => title })]
 }
 
 const HeaderMenuItem = props => {
-  const { children = [], hidden, path } = props.menu
+  if (!props) return null
+  const { children = [], hidden, path } = props?.menu || {}
   if (hidden) {
     return null
   }
@@ -46,7 +47,7 @@ export default HeaderMenuItem
 .popper-class-menu {
   --active-color: #1f2329;
   &.is-light {
-    border: none;
+    border: none !important;
     margin-top: -2px;
   }
   .popper-class-menu {

core/core-frontend/src/layout/components/MenuItem.vue

@@ -78,7 +78,9 @@ const MenuItem = props => {
     { index: path },
     {
       title: h('span', null, { default: () => title }),
-      default: h(ElIcon, null, { default: () => h(iconMap[icon], { className: 'svg-icon logo' }) })
+      default: h(iconMap[icon] ? ElIcon : null, null, {
+        default: () => h(iconMap[icon], { className: 'svg-icon logo' })
+      })
     }
   )
 }