dashboard-shell-shell 1.0.1000000116 → 1.0.1000000117

package/components/nav/Group.vue

@@ -8,6 +8,11 @@ export default {
   emits: ['expand', 'close'],
 
   props: {
+    loginName: {
+      type:    String,
+      default: '',
+    },
+
     depth: {
       type:    Number,
       default: 0,
@@ -46,8 +51,16 @@ export default {
 
   data() {
     const id = (this.idPrefix || '') + this.group.name;
+    const icons = {
+      '虚拟机管理': 'icon-backupandsnapshot',
+      '网络管理': 'icon-networks',
+      '镜像管理': 'icon-imagelist',
+      '资源管理': 'icon-sorcetype',
+      '运维管理': 'icon-monitoringandlogging'
+    }
+    
 
-    return { id, expanded: false };
+    return { id, expanded: false, icons };
   },
 
   computed: {
@@ -179,8 +192,7 @@ export default {
           const withoutQuery = withoutHash.split('?')[0];
           const itemFullPath = this.$router.resolve(item.route).fullPath;
 
-          // if (matchesNavLevel || itemFullPath === withoutQuery) {
-          if (matchesNavLevel || itemFullPath === withoutQuery || withoutQuery.includes(itemFullPath)) {
+          if (matchesNavLevel || itemFullPath === withoutQuery) {
             return true;
           } else if (parentPath && itemFullPath === parentPath) {
             return true;
@@ -222,6 +234,7 @@ export default {
     class="accordion"
     :class="{[`depth-${depth}`]: true, 'expanded': isExpanded, 'has-children': hasChildren, 'group-highlight': isGroupActive}"
   >
+    <!-- 分组标题区 -->
     <div
       v-if="showHeader"
       class="header"
@@ -233,26 +246,37 @@ export default {
       @keyup.enter="groupSelected()"
       @keyup.space="groupSelected()"
     >
+      
+    <!-- 具名插槽 header，允许外部自定义标题内容 -->
       <slot name="header">
-        <router-link
-          v-if="hasOverview"
-          :to="group.children[0].route"
-          :exact="group.children[0].exact"
-          :tabindex="-1"
-        >
-          <h6>
+
+        <!-- 如果分组有概览页（overview） 跳转到第一个子路由 -->
+        <h6 v-if="hasOverview">
+          <router-link
+            class="menuRouterLink"
+            :to="group.children[0].route"
+            :exact="group.children[0].exact"
+            :tabindex="-1"
+          >
+            <i v-if="!group.labelDisplay || (group.labelDisplay && group.labelDisplay.indexOf('</i>') === -1)" class="icon" :class="icons[group.label] ? icons[group.label] + ' init_icon' : 'icon-globe'" style="color: var(--muted);width: 32px;" />
             <span v-clean-html="group.labelDisplay || group.label" />
-          </h6>
-        </router-link>
+          </router-link>
+        </h6>
+        <!-- 虚拟机管理：icon-backupandsnapshot -->
+        <!-- 网络管理：icon-networks -->
+        <!-- 镜像管理：icon-imagelist -->
+        <!-- 资源管理：icon-sorcetype -->
+        <!-- 运维管理：icon-monitoringandlogging -->
+        <!-- 没有概览页的情况 -->
         <h6
           v-else
-           @click="peek($event, true)"
         >
-        <i :class="'nav-icon icon-'+group.name.replace(/\s+/g, '').toLowerCase()" />
-        {{ group.labelDisplay || group.label }}
-          <!-- <span v-clean-html="group.labelDisplay || group.label" /> -->
+          <i v-if="!group.labelDisplay || (group.labelDisplay && group.labelDisplay.indexOf('</i>') === -1)" class="icon" :class="icons[group.label] ? icons[group.label] + ' init_icon' : 'icon-globe'" style="color: var(--muted);width: 32px;" />
+          <span v-clean-html="group.labelDisplay || group.label" />
         </h6>
       </slot>
+      
+      <!-- 折叠/展开图标 -->
       <i
         v-if="!onlyHasOverview && canCollapse"
         class="icon toggle toggle-accordion"
@@ -265,6 +289,8 @@ export default {
         @keyup.space="peek($event, true)"
       />
     </div>
+
+    <!-- 子列表（Accordion 内容） -->
     <ul
       v-if="isExpanded"
       class="list-unstyled body"
@@ -274,6 +300,7 @@ export default {
         v-for="(child, idx) in group[childrenKey]"
         :key="idx"
       >
+        <!-- <template v-if="!(loginName && loginName !== 'admin' && child.label === '资源大盘')"></template> -->
         <li
           v-if="child.divider"
           :key="idx"
@@ -319,14 +346,19 @@ export default {
     position: relative;
     cursor: pointer;
     color: var(--body-text);
-    height: 33px;
-    outline: none;
+    height: 50px;
 
     H6 {
       color: var(--body-text);
       user-select: none;
       text-transform: none;
       font-size: 14px;
+      .menuRouterLink {
+        color: var(--body-text);
+        user-select: none;
+        text-transform: none;
+        font-size: 14px;
+      }
     }
 
     > A {
@@ -367,6 +399,9 @@ export default {
           /* padding: 8px 0 8px 16px;
           font-weight: bold; */
           color: var(--nav-hover-color);
+          .menuRouterLink {
+            color: var(--nav-hover-color);
+          }
         }
         I{
           color: var(--nav-hover-color);
@@ -381,6 +416,9 @@ export default {
         color: var(--nav-hover-color);
         h6{
           color: var(--nav-hover-color);
+          .menuRouterLink {
+            color: var(--nav-hover-color);
+          }
         }
       }
     }
@@ -422,6 +460,7 @@ export default {
 
     &.depth-1 {
       > .header {
+        line-height: 50px;
         > H6 {
           font-size: 13px;
           line-height: 16px;
@@ -431,11 +470,13 @@ export default {
           padding: 9px 7px 8px 7px !important;
         }
       }
+
     }
 
     &:not(.depth-0) {
       > .header {
-        padding-left: 10px;
+        padding-left: 30px;
+        line-height: 50px;
         > H6 {
           // Child groups that aren't linked themselves
           display: inline-block;
@@ -446,7 +487,9 @@ export default {
           position: absolute;
           right: 0;
           top: 0;
-          padding: 6px 8px 6px 8px;
+          padding: 0px 20px 0px 0px !important;
+          user-select: none;
+          line-height: 50px;
         }
       }
     }
@@ -459,6 +502,9 @@ export default {
     A, A I {
       /* color: var(--primary-hover-text); */
       color: var(--nav-hover-color);
+      .menuRouterLink {
+        color: var(--nav-hover-color);
+      }
     }
 
     A {
@@ -488,9 +534,9 @@ export default {
       }
     }
   }
-  .nav-icon{
+
+  .init_icon{
     font-size: 32px;
-    margin-top: -11px;
-    color: #a8abb2;
+    padding-left: 0px;
   }
 </style>

package/components/nav/Header.vue

@@ -277,6 +277,18 @@ export default {
   },
 
   methods: {
+
+    LogOutfn (type) {
+      sessionStorage.removeItem('TOPLEVELPERMISSIONS')
+      if (type === '1') {
+        this.$router.push({ name: 'account'})
+      } else if (type === '2') {
+        this.showSloModal()
+      } else if (type === '3') {
+        this.$router.push(this.generateLogoutRoute)
+      }
+    },
+
     showSloModal() {
       this.$store.dispatch('management/promptModal', {
         component:      'SloDialog',
@@ -397,11 +409,15 @@ export default {
 </script>
 
 <template>
+
+  <!-- 整个页面的顶部 header -->
   <header
     ref="header"
     data-testid="header"
   >
     <div>
+
+      <!-- 顶部一级菜单（根据不同产品/集群条件决定是否显示） -->
       <TopLevelMenu v-if="isRancherInHarvester || isMultiCluster || !isSingleProduct" />
     </div>
 
@@ -526,34 +542,54 @@ export default {
       </div>
     </div> -->
 
-      <!-- logo -->
-      <div class="menu-spacer">
+      <!-- ===== 左侧 logo 区域 ===== -->
+    <div class="menu-spacer">
+
+      <!-- 如果是单产品模式且不是 RancherInHarvester，就显示 logo 路由跳转 -->
       <router-link
         v-if="isSingleProduct && !isRancherInHarvester"
         :to="singleProductLogoRoute"
       >
-        <img
+
+        <!-- 显示用户头像或 logo 图片 -->
+        <!-- <img
           :src="userIcon"
-        >
+        > -->
       </router-link>
     </div>
-    <!-- 中间 -->
+    
+    <!-- ===== 中间占位符（把左右内容分开） ===== -->
     <div class="spacer" />
 
+    <!-- ===== 右侧功能区域 ===== -->
     <div class="rd-header-right">
+
+      <!-- 动态插入右侧自定义组件（例如插件扩展的 header） -->
       <component :is="navHeaderRight" />
+
+      <!-- ===== 集群/命名空间过滤器 ===== -->
       <div
         v-if="showFilter"
         class="top"
       >
+
+        <!-- 如果集群就绪 + 当前产品支持命名空间过滤器 或 Explorer 模式 -->
         <NamespaceFilter v-if="clusterReady && currentProduct && (currentProduct.showNamespaceFilter || isExplorer)" />
+        
+        <!-- 否则显示工作空间切换器 -->
         <WorkspaceSwitcher v-else-if="clusterReady && currentProduct && currentProduct.showWorkspaceSwitcher" />
       </div>
+
+      <!-- ===== 集群相关按钮（仅在有集群且不是 simple 模式下显示） ===== -->
       <div
         v-if="currentCluster && !simple"
         class="header-buttons"
       >
+
+        <!-- 如果当前产品支持集群切换器 -->
         <template v-if="currentProduct && currentProduct.showClusterSwitcher">
+
+          <!-- 导入 YAML 按钮 -->
           <button
             v-if="showImportYaml"
             v-clean-tooltip="t('nav.import')"
@@ -568,6 +604,8 @@ export default {
           >
             <i class="icon icon-upload icon-lg" />
           </button>
+
+          <!-- 导入 YAML 弹窗 -->
           <app-modal
             v-if="showImportModal"
             class="import-modal"
@@ -583,6 +621,7 @@ export default {
             />
           </app-modal>
 
+          <!-- KubeShell 终端按钮 -->
           <button
             v-if="showKubeShell"
             id="btn-kubectl"
@@ -600,6 +639,7 @@ export default {
             <i class="icon icon-terminal icon-lg" />
           </button>
 
+          <!-- 下载 kubeconfig 按钮 -->
           <button
             v-if="showKubeConfig"
             v-clean-tooltip="t('nav.kubeconfig.download')"
@@ -615,6 +655,7 @@ export default {
             <i class="icon icon-file icon-lg" />
           </button>
 
+          <!-- 复制 kubeconfig 按钮 -->
           <button
             v-if="showCopyConfig"
             v-clean-tooltip="t('nav.kubeconfig.copy')"
@@ -627,10 +668,14 @@ export default {
             :aria-label="t('nav.kubeconfig.copy')"
             @click="copyKubeConfig($event)"
           >
+            
+            <!-- 点击复制后显示对勾 -->
             <i
               v-if="kubeConfigCopying"
               class="icon icon-checkmark icon-lg"
             />
+
+            <!-- 未复制状态显示复制图标 -->
             <i
               v-else
               class="icon icon-copy icon-lg"
@@ -638,6 +683,7 @@ export default {
           </button>
         </template>
 
+        <!-- 资源搜索按钮 -->
         <button
           v-if="showSearch"
           id="header-btn-search"
@@ -654,6 +700,8 @@ export default {
         >
           <i class="icon icon-search icon-lg" />
         </button>
+
+        <!-- 搜索弹窗 -->
         <app-modal
           v-if="showSearch && showSearchModal"
           class="search-modal"
@@ -668,7 +716,7 @@ export default {
         </app-modal>
       </div>
 
-      <!-- Extension header actions -->
+      <!-- ===== 插件扩展按钮区 ===== -->
       <div
         v-if="extensionHeaderActions.length"
         class="header-buttons"
@@ -697,12 +745,16 @@ export default {
         </button>
       </div>
 
+      <!-- ===== 用户菜单（右上角头像 + 下拉） ===== -->
       <div class="center-self">
         <header-page-action-menu v-if="showPageActions" />
+
         <rc-dropdown
           v-if="showUserMenu"
           :aria-label="t('nav.userMenu.label')"
         >
+          
+          <!-- 头像触发按钮 -->
           <rc-dropdown-trigger
             ghost
             small
@@ -721,9 +773,11 @@ export default {
               v-else
               class="icon icon-user icon-3x avatar"
             /> -->
-            <i class="icon icon-usericon" />
+            <i class="icon icon-usericon" style="padding-bottom: 5px;" />
             <span class="login-name">{{ principal.loginName }}</span>
           </rc-dropdown-trigger>
+
+          <!-- 下拉菜单内容 -->
           <template #dropdownCollection>
             <!-- <template v-if="authEnabled">
               <div class="user-info">
@@ -744,21 +798,27 @@ export default {
             >
               {{ t('nav.userMenu.preferences') }}
             </rc-dropdown-item> -->
+
+            <!-- 退出登录（支持 SLO 弹窗） -->
             <rc-dropdown-item
               v-if="showAccountAndApiKeyLink"
-              @click="$router.push({ name: 'account'})"
+              @click="LogOutfn('1')"
             >
               {{ t('nav.userMenu.accountAndKeys', {}, true) }}
             </rc-dropdown-item>
+
+            <!-- 普通退出登录 -->
             <rc-dropdown-item
               v-if="authEnabled && shouldShowSloLogoutModal"
-              @click="showSloModal"
+              @click="LogOutfn('2')"
             >
               {{ t('nav.userMenu.logOut') }}
             </rc-dropdown-item>
+
+            <!-- 普通退出登录 -->
             <rc-dropdown-item
               v-else-if="authEnabled"
-              @click="$router.push(generateLogoutRoute)"
+              @click="LogOutfn('3')"
             >
               {{ t('nav.userMenu.logOut') }}
             </rc-dropdown-item>
@@ -944,6 +1004,8 @@ export default {
         // Spacing between header buttons
         .btn:not(:last-of-type) {
           margin-right: 10px;
+          width: 30px;
+          min-width: 30px;
         }
 
         .btn:focus {
@@ -965,6 +1027,8 @@ export default {
 
       .header-btn {
         width: 40px;
+        display: flex;
+        align-items: center;
       }
 
       :deep() div .btn.role-tertiary {
@@ -972,19 +1036,21 @@ export default {
         border: none;
         background: var(--header-btn-bg);
         color: var(--header-btn-text);
-        padding: 0 10px;
+        padding: 0 15px 0 10px;
         line-height: 32px;
         min-height: 32px;
+        width: 30px;
+        min-width: 30px;
 
         i {
           // Ideally same height as the parent button, but this means tooltip needs adjusting (which is it's own can of worms)
           line-height: 20px;
         }
 
-        &:hover {
-          background: var(--primary);
-          color: #fff;
-        }
+        // &:hover {
+        //   background: var(--primary);
+        //   color: #fff;
+        // }
 
         &[disabled=disabled] {
           background-color: rgba(0,0,0,0.25) !important;
@@ -1067,7 +1133,6 @@ export default {
       > .center-self {
         align-self: center;
         display: flex;
-        gap: 1rem;
         align-items: center;
         padding-right: 1rem;
       }
@@ -1176,7 +1241,7 @@ export default {
   .login-name{
     font-size: 14px;
     margin-left: 5px;
-    margin-top: 5px;
+    // margin-top: 5px;
     line-height: 20px;
   }
 </style>

package/components/nav/HeaderPageActionMenu.vue

@@ -17,6 +17,7 @@ const pageAction = (_event: Event, action: string) => {
     :dropdown-aria-label="t('nav.actionMenu.button.label')"
     data-testid="page-actions-menu-action-button"
     button-role="tertiary"
+    :showIcon="true"
     @select="pageAction"
   />
 </template>

package/components/nav/NamespaceFilter.vue

@@ -145,9 +145,6 @@ export default {
 
       const params = { ...this.$route.params };
       let resource = params.resource;
-      if (params.resource) {
-        resource = resource
-      }
 
       // Sometimes, different pages may have different namespaces to filter
       const notFilterNamespaces = this.$store.getters[`type-map/optionsFor`](resource).notFilterNamespace || [];