dashboard-shell-shell 0.0.3 → 0.0.1000000000001124

package/components/nav/Group.vue

@@ -179,8 +179,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 +221,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 +233,31 @@ 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"
+          >
             <span v-clean-html="group.labelDisplay || group.label" />
-          </h6>
-        </router-link>
+          </router-link>
+        </h6>
+
+        <!-- 没有概览页的情况 -->
         <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" /> -->
+          <span v-clean-html="group.labelDisplay || group.label" />
         </h6>
       </slot>
+
+      <!-- 折叠/展开图标 -->
       <i
         v-if="!onlyHasOverview && canCollapse"
         class="icon toggle toggle-accordion"
@@ -265,6 +270,8 @@ export default {
         @keyup.space="peek($event, true)"
       />
     </div>
+
+    <!-- 子列表（Accordion 内容） -->
     <ul
       v-if="isExpanded"
       class="list-unstyled body"
@@ -319,14 +326,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 +379,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 +396,9 @@ export default {
         color: var(--nav-hover-color);
         h6{
           color: var(--nav-hover-color);
+          .menuRouterLink {
+            color: var(--nav-hover-color);
+          }
         }
       }
     }
@@ -422,6 +440,7 @@ export default {
 
     &.depth-1 {
       > .header {
+        line-height: 50px;
         > H6 {
           font-size: 13px;
           line-height: 16px;
@@ -431,11 +450,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 +467,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 +482,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 +514,4 @@ export default {
       }
     }
   }
-  .nav-icon{
-    font-size: 32px;
-    margin-top: -11px;
-    color: #a8abb2;
-  }
 </style>

package/components/nav/Header.vue

@@ -265,6 +265,8 @@ export default {
   },
 
   mounted() {
+    console.log(this.$config.rancherEnv, ' this.$config.rancherEnv-------------------')
+    
     this.checkClusterName();
     this.debouncedLayoutHeader = debounce(this.layoutHeader, 400);
     window.addEventListener('resize', this.debouncedLayoutHeader);
@@ -397,24 +399,33 @@ export default {
 </script>
 
 <template>
+
+  <!-- 整个页面的顶部 header -->
   <header
     ref="header"
     data-testid="header"
   >
     <div>
+
+      <!-- 顶部一级菜单（根据不同产品/集群条件决定是否显示） -->
       <TopLevelMenu v-if="isRancherInHarvester || isMultiCluster || !isSingleProduct" />
     </div>
 
-    <!-- <div
+    <!-- ===== 左侧 logo 区域 ===== -->
+    <div
       class="menu-spacer"
       :class="{'isSingleProduct': isSingleProduct }"
     >
+      
+      <!-- 如果是单产品模式且不是 RancherInHarvester，就显示 logo 路由跳转 -->
       <router-link
         v-if="isSingleProduct && !isRancherInHarvester"
         :to="singleProductLogoRoute"
         role="link"
         :alt="t('branding.logos.home')"
       >
+
+        <!-- Harvester 自定义 Logo -->
         <BrandImage
           v-if="isSingleProduct.supportCustomLogo && isHarvester"
           class="side-menu-logo"
@@ -422,6 +433,8 @@ export default {
           :support-custom-logo="true"
           :alt="t('branding.logos.label')"
         />
+
+        <!-- 普通单产品 Logo -->
         <img
           v-else
           class="side-menu-logo"
@@ -431,20 +444,27 @@ export default {
       </router-link>
     </div>
 
+    <!-- 产品/集群信息展示区域（非 simple 模式） -->
     <div
       v-if="!simple"
       ref="product"
       class="product"
     >
+
+      <!-- 当前产品支持集群切换 -->
       <div
         v-if="currentProduct && currentProduct.showClusterSwitcher"
         v-clean-tooltip="nameTooltip"
         class="cluster cluster-clipped"
       >
+
+        <!-- 单产品模式（无集群选择器） -->
         <div
           v-if="isSingleProduct && !isRancherInHarvester"
           class="product-name"
         >
+
+          <!-- 如果支持自定义 Logo 显示厂商名，否则显示产品名 -->
           <template v-if="isSingleProduct.supportCustomLogo">
             {{ vendor }}
           </template>
@@ -452,13 +472,19 @@ export default {
             {{ t(isSingleProduct.productNameKey) }}
           </template>
         </div>
+
+        <!-- 多集群模式 -->
         <template v-else>
+
+          <!-- 集群提供商图标 -->
           <ClusterProviderIcon
             v-if="currentCluster"
             :cluster="currentCluster"
             class="mr-10"
             :alt="t('branding.logos.label')"
           />
+
+          <!-- 集群名称 -->
           <div
             v-if="currentCluster"
             ref="clusterName"
@@ -466,12 +492,16 @@ export default {
           >
             {{ currentCluster.spec.displayName }}
           </div>
+
+          <!-- 集群状态徽章 -->
           <ClusterBadge
             v-if="currentCluster"
             :cluster="currentCluster"
             class="ml-10"
             :alt="t('branding.logos.label')"
           />
+
+          <!-- 无当前集群时显示默认 Logo -->
           <div
             v-if="!currentCluster"
             class="simple-title"
@@ -484,10 +514,14 @@ export default {
           </div>
         </template>
       </div>
+
+      <!-- 当前产品不支持集群切换 -->
       <div
         v-if="currentProduct && !currentProduct.showClusterSwitcher"
         class="cluster"
       >
+
+        <!-- 产品头部图标 -->
         <img
           v-if="currentProduct.iconHeader"
           v-bind="$attrs"
@@ -496,16 +530,21 @@ export default {
           style="width: 44px; height: 36px;"
           :alt="t('branding.logos.label')"
         >
+
+        <!-- 产品名称 -->
         <div class="product-name">
           {{ prod }}
         </div>
       </div>
     </div>
 
+    <!-- simple 模式下的标题展示 -->
     <div
       v-else
       class="simple-title"
     >
+
+      <!-- 单产品模式 -->
       <div
         v-if="isSingleProduct"
         class="product-name"
@@ -513,6 +552,7 @@ export default {
         {{ t(isSingleProduct.productNameKey) }}
       </div>
 
+      <!-- 非单产品模式显示默认 Logo -->
       <div
         v-else
         class="side-menu-logo"
@@ -524,36 +564,56 @@ export default {
           :alt="t('branding.logos.label')"
         />
       </div>
-    </div> -->
+    </div>
+
+      <!-- ===== 左侧 logo 区域 ===== -->
+    <div class="menu-spacer">
 
-      <!-- logo -->
-      <div class="menu-spacer">
+      <!-- 如果是单产品模式且不是 RancherInHarvester，就显示 logo 路由跳转 -->
       <router-link
         v-if="isSingleProduct && !isRancherInHarvester"
         :to="singleProductLogoRoute"
       >
+
+        <!-- 显示用户头像或 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 +628,8 @@ export default {
           >
             <i class="icon icon-upload icon-lg" />
           </button>
+
+          <!-- 导入 YAML 弹窗 -->
           <app-modal
             v-if="showImportModal"
             class="import-modal"
@@ -583,6 +645,7 @@ export default {
             />
           </app-modal>
 
+          <!-- KubeShell 终端按钮 -->
           <button
             v-if="showKubeShell"
             id="btn-kubectl"
@@ -600,6 +663,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 +679,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 +692,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 +707,7 @@ export default {
           </button>
         </template>
 
+        <!-- 资源搜索按钮 -->
         <button
           v-if="showSearch"
           id="header-btn-search"
@@ -654,6 +724,8 @@ export default {
         >
           <i class="icon icon-search icon-lg" />
         </button>
+
+        <!-- 搜索弹窗 -->
         <app-modal
           v-if="showSearch && showSearchModal"
           class="search-modal"
@@ -668,7 +740,7 @@ export default {
         </app-modal>
       </div>
 
-      <!-- Extension header actions -->
+      <!-- ===== 插件扩展按钮区 ===== -->
       <div
         v-if="extensionHeaderActions.length"
         class="header-buttons"
@@ -697,12 +769,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 +797,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,18 +822,24 @@ export default {
             >
               {{ t('nav.userMenu.preferences') }}
             </rc-dropdown-item> -->
+
+            <!-- 退出登录（支持 SLO 弹窗） -->
             <rc-dropdown-item
               v-if="showAccountAndApiKeyLink"
               @click="$router.push({ name: 'account'})"
             >
               {{ t('nav.userMenu.accountAndKeys', {}, true) }}
             </rc-dropdown-item>
+
+            <!-- 普通退出登录 -->
             <rc-dropdown-item
               v-if="authEnabled && shouldShowSloLogoutModal"
               @click="showSloModal"
             >
               {{ t('nav.userMenu.logOut') }}
             </rc-dropdown-item>
+
+            <!-- 普通退出登录 -->
             <rc-dropdown-item
               v-else-if="authEnabled"
               @click="$router.push(generateLogoutRoute)"
@@ -944,6 +1028,8 @@ export default {
         // Spacing between header buttons
         .btn:not(:last-of-type) {
           margin-right: 10px;
+          width: 30px;
+          min-width: 30px;
         }
 
         .btn:focus {
@@ -965,6 +1051,8 @@ export default {
 
       .header-btn {
         width: 40px;
+        display: flex;
+        align-items: center;
       }
 
       :deep() div .btn.role-tertiary {
@@ -972,19 +1060,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 +1157,6 @@ export default {
       > .center-self {
         align-self: center;
         display: flex;
-        gap: 1rem;
         align-items: center;
         padding-right: 1rem;
       }
@@ -1176,7 +1265,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>