dashboard-shell-shell 1.0.1000000116 → 1.0.1000000117

package/components/nav/TopLevelMenu.vue

@@ -52,7 +52,10 @@ export default {
       helper.update(args);
     }
 
+    const topLevelPermissions = sessionStorage.getItem('TOPLEVELPERMISSIONS') || ''
+
     return {
+      topLevelPermissions,
       shown:             false,
       displayVersion,
       fullVersion,
@@ -460,12 +463,14 @@ export default {
 
 <template>
   <div>
-    <!-- Overlay -->
+    <!-- ====================== 遮罩层（点击可关闭菜单） ====================== -->
     <div
       v-if="shown"
       class="side-menu-glass"
       @click="hide()"
     />
+
+    <!-- ====================== 菜单主容器（带淡入淡出过渡） ====================== -->
     <transition name="fade">
       <!-- Side menu -->
       <div
@@ -476,8 +481,11 @@ export default {
         role="navigation"
         :aria-label="t('nav.ariaLabel.topLevelMenu')"
       >
-        <!-- Logo and name -->
+        
+        <!-- ====================== 菜单头部（Logo + 菜单按钮） ====================== -->
         <div class="title">
+          
+          <!-- 菜单按钮（汉堡图标） -->
           <div
             data-testid="top-level-menu"
             :aria-label="t('nav.expandCollapseAppBar')"
@@ -488,6 +496,8 @@ export default {
             @keyup.space="toggle()"
             @click="toggle()"
           >
+
+            <!-- 汉堡菜单SVG图标 -->
             <svg
               class="menu-icon"
               xmlns="http://www.w3.org/2000/svg"
@@ -500,19 +510,22 @@ export default {
               fill="none"
             /><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" /></svg>
           </div>
-          <div class="side-menu-logo">
+
+          <!-- 品牌Logo -->
+          <div v-if="topLevelPermissions && topLevelPermissions === 'superadmin'" class="side-menu-logo">
             <BrandImage
               data-testid="side-menu__brand-img"
               :alt="t('nav.alt.mainMenuRancherLogo')"
-              file-name="rancher-logo.svg"
+              file-name="logo.png"
             />
           </div>
         </div>
 
-        <!-- Menu body -->
+        <!-- ====================== 菜单内容区 ====================== -->
         <div class="body">
-          <div>
-            <!-- Home button -->
+          <div v-if="topLevelPermissions && topLevelPermissions === 'superadmin'">
+            
+            <!-- 首页按钮 -->
             <div @click="hide()">
               <router-link
                 class="option cluster selector home"
@@ -520,6 +533,8 @@ export default {
                 role="link"
                 :aria-label="t('nav.ariaLabel.homePage')"
               >
+
+                <!-- 首页图标 -->
                 <svg
                   v-clean-tooltip="getTooltipConfig(t('nav.home'))"
                   class="top-menu-icon"
@@ -536,12 +551,14 @@ export default {
                 </div>
               </router-link>
             </div>
-            <!-- Search bar -->
+            
+            <!-- 集群搜索框 -->
             <div
               v-if="showClusterSearch"
               class="clusters-search"
             >
               <div class="clusters-search-count">
+                <!-- 当前搜索到的集群数量 -->
                 <span>{{ clusterFilterCount }}</span>
                 {{ t('nav.search.clusters') }}
                 <i
@@ -560,10 +577,14 @@ export default {
                   :tabindex="!shown ? -1 : 0"
                   :aria-label="t('nav.search.ariaLabel')"
                 >
+
+                <!-- 搜索图标 -->
                 <i
                   class="magnifier icon icon-search"
                   :class="{ active: clusterFilter }"
                 />
+
+                <!-- 清空按钮 -->
                 <i
                   v-if="clusterFilter"
                   class="icon icon-close"
@@ -573,9 +594,11 @@ export default {
             </div>
           </div>
 
-          <!-- Harvester extras -->
+          <!-- ====================== Harvester 相关功能区 ====================== -->
           <template v-if="hciApps.length">
             <div class="category" />
+
+            <!-- 跳转 Harvester Dashboard -->
             <div>
               <a
                 v-if="isRancherInHarvester"
@@ -591,6 +614,8 @@ export default {
                 </div>
               </a>
             </div>
+
+            <!-- Harvester 应用列表 -->
             <div
               v-for="(a, i) in appBar.hciApps"
               :key="i"
@@ -613,14 +638,14 @@ export default {
             </div>
           </template>
 
-          <!-- Cluster menu -->
-          <template v-if="!!allClustersCount">
+          <!-- ====================== 集群列表 ====================== -->
+          <template v-if="topLevelPermissions && topLevelPermissions === 'superadmin' && !!allClustersCount">
             <div
               ref="clusterList"
               class="clusters"
               :style="pinnedClustersHeight"
             >
-              <!-- Pinned Clusters -->
+              <!-- 已固定集群 -->
               <div
                 v-if="showPinClusters && pinFiltered.length"
                 class="clustersPinned"
@@ -631,11 +656,13 @@ export default {
                   :data-testid="`pinned-ready-cluster-${index}`"
                   @click="hide()"
                 >
-                  <button
+
+                  <!-- 可用集群按钮 -->
+                  <span
                     v-if="c.ready"
                     v-shortkey.push="{windows: ['alt'], mac: ['option']}"
                     :data-testid="`pinned-menu-cluster-${ c.id }`"
-                    class="cluster selector option"
+                    class="clusterBtn cluster selector option"
                     :class="{'active-menu-link': c.isMenuActive }"
                     :to="c.clusterRoute"
                     role="button"
@@ -665,7 +692,9 @@ export default {
                       :cluster="c"
                       :tab-order="shown ? 0 : -1"
                     />
-                  </button>
+                  </span>
+
+                  <!-- 不可用集群 -->
                   <span
                     v-else
                     class="option cluster selector disabled"
@@ -694,6 +723,8 @@ export default {
                     />
                   </span>
                 </div>
+
+                <!-- 分割线 -->
                 <div
                   v-if="clustersFiltered.length > 0"
                   class="category-title"
@@ -702,7 +733,7 @@ export default {
                 </div>
               </div>
 
-              <!-- Clusters Search result -->
+              <!-- 搜索结果集群列表 -->
               <div class="clustersList">
                 <div
                   v-for="(c, index) in appBar.clustersFiltered"
@@ -710,11 +741,13 @@ export default {
                   :data-testid="`top-level-menu-cluster-${index}`"
                   @click="hide()"
                 >
-                  <button
+                  
+                  <!-- 可用集群 -->
+                  <span
                     v-if="c.ready"
                     v-shortkey.push="{windows: ['alt'], mac: ['option']}"
                     :data-testid="`menu-cluster-${ c.id }`"
-                    class="cluster selector option"
+                    class="cluster selector option clusterBtn"
                     :class="{'active-menu-link': c.isMenuActive }"
                     :to="c.clusterRoute"
                     role="button"
@@ -745,7 +778,9 @@ export default {
                       :tab-order="shown ? 0 : -1"
                       :cluster="c"
                     />
-                  </button>
+                  </span>
+
+                  <!-- 不可用集群 -->
                   <span
                     v-else
                     class="option cluster selector disabled"
@@ -777,7 +812,7 @@ export default {
                 </div>
               </div>
 
-              <!-- No clusters message -->
+              <!-- 无匹配集群提示 -->
               <div
                 v-if="clustersFiltered.length === 0 && searchActive"
                 data-testid="top-level-menu-no-results"
@@ -787,7 +822,7 @@ export default {
               </div>
             </div>
 
-            <!-- See all clusters -->
+            <!-- 查看所有集群按钮 -->
             <router-link
               v-if="allClustersCount > maxClustersToShow"
               class="clusters-all"
@@ -806,104 +841,129 @@ export default {
             </router-link>
           </template>
 
-          <!-- MULTI CLUSTER APPS -->
-          <div class="category">
+          <!-- ====================== 多集群应用区 ====================== -->
+          <div :style="!(topLevelPermissions && topLevelPermissions === 'superadmin') ? { placeContent: 'flex-start', display: 'flex', flexDirection: 'column' } : {}" class="category">
+            <!-- 多集群应用 -->
             <template v-if="multiClusterApps.length">
-              <div
-                class="category-title"
-              >
-                <hr role="none">
-                <span>
-                  {{ t('nav.categories.multiCluster') }}
-                </span>
-              </div>
-              <div
-                v-for="(a, i) in appBar.multiClusterApps"
-                :key="i"
-                @click="hide()"
-              >
-                <router-link
-                  class="option"
-                  :class="{'active-menu-link': a.isMenuActive }"
-                  :to="a.to"
-                  role="link"
-                  :aria-label="`${t('nav.ariaLabel.multiClusterApps')} ${ a.label }`"
-                >
-                  <IconOrSvg
-                    v-clean-tooltip="getTooltipConfig(a.label)"
-                    class="app-icon"
-                    :icon="a.icon"
-                    :src="a.svg"
-                  />
-                  <span class="option-link">{{ a.label }}</span>
-                </router-link>
-              </div>
-            </template>
-
-            <!-- Configuration apps menu -->
-            <template v-if="configurationApps.length">
-              <div
-                class="category-title"
-              >
-                <hr role="none">
-                <span>
-                  {{ t('nav.categories.configuration') }}
-                </span>
-              </div>
-              <div
-                v-for="(a, i) in appBar.configurationApps"
-                :key="i"
-                @click="hide()"
-              >
-                <router-link
-                  class="option"
-                  :class="{'active-menu-link': a.isMenuActive }"
-                  :to="a.to"
-                  role="link"
-                  :aria-label="`${t('nav.ariaLabel.configurationApps')} ${ a.label }`"
+              <template v-if="topLevelPermissions && topLevelPermissions === 'superadmin'">
+                <div
+                  class="category-title"
                 >
-                  <IconOrSvg
-                    v-clean-tooltip="getTooltipConfig(a.label)"
-                    class="app-icon"
-                    :icon="a.icon"
-                    :src="a.svg"
-                  />
-                  <div>{{ a.label }}</div>
-                </router-link>
-              </div>
+                  <hr role="none">
+                  <span>
+                    {{ t('nav.categories.multiCluster') }}
+                  </span>
+                </div>
+                <template v-for="(a, i) in appBar.multiClusterApps" :key="i">
+                  <div
+                    v-if="a.value === 'harvesterManager'"
+                    @click="hide()"
+                  >
+                    <router-link
+                      class="option"
+                      :class="{'active-menu-link': a.isMenuActive }"
+                      :to="a.to"
+                      role="link"
+                      :aria-label="`${t('nav.ariaLabel.multiClusterApps')} ${ a.label }`"
+                    >
+                      <IconOrSvg
+                        v-clean-tooltip="getTooltipConfig(a.label)"
+                        class="app-icon"
+                        :icon="a.icon"
+                        :src="a.svg"
+                      />
+                      <span class="option-link">{{ a.label }}</span>
+                    </router-link>
+                  </div>
+                </template>
+              </template>
+              <template v-else>
+                <template v-for="(a, i) in appBar.multiClusterApps" :key="i">
+                  <div
+                    v-if="a.value === 'harvesterManager'"
+                    @click="hide()"
+                  >
+                    <router-link
+                      class="option"
+                      :class="{'active-menu-link': a.isMenuActive }"
+                      :to="a.to"
+                      role="link"
+                      :aria-label="`${t('nav.ariaLabel.multiClusterApps')} ${ a.label }`"
+                    >
+                      <IconOrSvg
+                        v-clean-tooltip="getTooltipConfig(a.label)"
+                        class="app-icon"
+                        :icon="a.icon"
+                        :src="a.svg"
+                      />
+                      <span class="option-link">{{ a.label }}</span>
+                    </router-link>
+                  </div>
+                </template>
+              </template>
             </template>
-          </div>
-        </div>
 
-        <!-- Footer -->
-        <div
-          class="footer"
-        >
-          <div
-            v-if="canEditSettings"
-            class="support"
-            @click="hide()"
-          >
-            <router-link
-              :to="{name: 'support'}"
-              role="link"
-              :aria-label="t('nav.ariaLabel.support')"
-            >
-              {{ t('nav.support', {hasSupport}) }}
-            </router-link>
-          </div>
-          <div
-            class="version"
-            :class="{'version-small': largeAboutText}"
-            @click="hide()"
-          >
-            <router-link
-              :to="{ name: 'about' }"
-              role="link"
-              :aria-label="t('nav.ariaLabel.about')"
-            >
-              {{ aboutText }}
-            </router-link>
+            <!-- 配置类应用 -->
+             <div>
+               <template v-if="configurationApps.length">
+                 <template v-if="topLevelPermissions && topLevelPermissions === 'superadmin'">
+                   <div
+                     class="category-title"
+                   >
+                     <hr role="none">
+                     <span>
+                       {{ t('nav.categories.configuration') }}
+                     </span>
+                   </div>
+                  <div
+                    v-for="(a, i) in appBar.configurationApps"
+                    :key="i"
+                    @click="hide()"
+                  >
+                    <router-link
+                      class="option"
+                      :class="{'active-menu-link': a.isMenuActive }"
+                      :to="a.to"
+                      role="link"
+                      :aria-label="`${t('nav.ariaLabel.configurationApps')} ${ a.label }`"
+                    >
+                      <IconOrSvg
+                        v-clean-tooltip="getTooltipConfig(a.label)"
+                        class="app-icon"
+                        :icon="a.icon"
+                        :src="a.svg"
+                      />
+                      <div>{{ a.label }}</div>
+                    </router-link>
+                  </div>
+                 </template>
+                 <template v-else>
+                  <template v-for="(a, i) in appBar.configurationApps" :key="i">
+                    <div
+                      v-if="a.value === 'settings' || a.value === 'auth'"
+                      @click="hide()"
+                    >
+                      <router-link
+                        class="option"
+                        :class="{'active-menu-link': a.isMenuActive }"
+                        :to="a.to"
+                        role="link"
+                        :aria-label="`${t('nav.ariaLabel.configurationApps')} ${ a.label }`"
+                      >
+                        <IconOrSvg
+                          v-clean-tooltip="getTooltipConfig(a.label)"
+                          class="app-icon"
+                          :icon="a.icon"
+                          :src="a.svg"
+                        />
+                        <div>{{ a.label }}</div>
+                      </router-link>
+                    </div>
+                  </template>
+                 </template>
+                 <div style="height: 40px;"></div>
+               </template>
+             </div>
           </div>
         </div>
       </div>
@@ -962,6 +1022,10 @@ export default {
   $option-padding-left: 14px;
   $option-height: $icon-size + $option-padding + $option-padding;
 
+  .clusterBtn {
+    background-color: var(--nav-icon-badge-bg);
+  }
+
   .side-menu {
     .menu {
       position: absolute;
@@ -1058,7 +1122,6 @@ export default {
       flex: 1;
       display: flex;
       flex-direction: column;
-      margin: 10px 0;
       width: 300px;
       overflow: auto;
 
@@ -1066,7 +1129,7 @@ export default {
         align-items: center;
         cursor: pointer;
         display: flex;
-        color: var(--link);
+        color: var(--primary);
         font-size: 14px;
         height: $option-height;
         white-space: nowrap;
@@ -1076,7 +1139,7 @@ export default {
         border: none;
 
         .cluster-badge-logo-text {
-          color: var(--default-active-text);
+          color: var(--primary);
           font-weight: 500;
         }
 
@@ -1148,7 +1211,7 @@ export default {
         .rancher-provider-icon,
         svg {
           margin-right: 16px;
-          fill: var(--link);
+          fill: var(--primary);
         }
 
         .top-menu-icon {

package/components/nav/Type.vue

@@ -109,6 +109,7 @@ export default {
 </script>
 
 <template>
+  <!-- 当 type 有 route 时，渲染一个 Vue Router 自定义链接 -->
   <router-link
     v-if="type.route"
     :key="type.name"
@@ -116,18 +117,24 @@ export default {
     custom
     :to="type.route"
   >
+
+    <!-- 导航项容器 -->
     <li
       class="child nav-type"
       :class="{'root': isRoot, [`depth-${depth}`]: true, 'router-link-active': isActive, 'router-link-exact-active': isExactActive}"
       @click="navigate"
       @keypress.enter="navigate"
     >
+
+      <!-- 如果是精确匹配激活状态，则显示 TabTitle 组件 -->
       <TabTitle
         v-if="isExactActive"
         :show-child="false"
       >
         {{ type.labelKey ? t(type.labelKey) : (type.labelDisplay || type.label) }}
       </TabTitle>
+
+      <!-- 链接主体 -->
       <a
         role="link"
         :aria-label="type.labelKey ? t(type.labelKey) : (type.labelDisplay || type.label)"
@@ -138,30 +145,40 @@ export default {
         @mouseenter="setNear(true)"
         @mouseleave="setNear(false)"
       >
+        <!-- 文本标签：优先使用多语言 key -->
         <span
           v-if="type.labelKey"
           class="label"
         ><t :k="type.labelKey" /></span>
-        <span
-          v-else
-          v-clean-html="type.labelDisplay || type.label"
-          class="label"
-          :class="{'no-icon': !type.icon}"
-        />
+
+        <!-- 没有 labelKey 时，直接使用 HTML 文本 -->
+         <div v-else style="display: flex; align-items: center;" class="labelKey_menu">
+          <i v-if="!type.labelDisplay || (type.labelDisplay && type.labelDisplay.indexOf('</i>') === -1)" class="icon icon-fw icon-globe" style="color: var(--muted);width: 32px;text-align: left;"></i>
+           <span
+             v-clean-html="type.labelDisplay.replace('设置', '基础设置') || type.label"
+             class="label"
+             :class="{'no-icon': !type.icon}"
+           />
+         </div>
+
+        <!-- 右侧附加信息（收藏按钮 / 命名空间图标 / 计数） -->
         <!-- <span
           v-if="showFavorite || namespaceIcon || showCount"
           class="count"
         >
+
           <Favorite
             v-if="showFavorite"
             :resource="type.name"
           />
+
           <i
             v-if="namespaceIcon"
             class="icon icon-namespace"
             :class="{'ns-and-icon': showCount}"
             data-testid="type-namespaced"
           />
+
           <span
             v-if="showCount"
             data-testid="type-count"
@@ -170,6 +187,8 @@ export default {
       </a>
     </li>
   </router-link>
+
+  <!-- 当 type 没有 route 但有外部 link 时 -->
   <li
     v-else-if="type.link"
     class="child nav-type nav-link"
@@ -185,6 +204,8 @@ export default {
       <span class="label">{{ type.label }}&nbsp;<i class="icon icon-external-link" /></span>
     </a>
   </li>
+
+  <!-- 兜底情况：既没有 route，也没有 link -->
   <li v-else>
     {{ type }}?
   </li>
@@ -234,12 +255,12 @@ export default {
     A {
       display: grid;
       grid-template-areas: "label count";
-      grid-template-columns: auto auto;
+      grid-template-columns: auto 20px;
       grid-column-gap: 5px;
       font-size: 14px;
       line-height: 24px;
       /* padding: 7.5px 7px 7.5px 10px; */
-      padding: 0px 16px 0px 40px;
+      padding: 0px 16px 0px 30px;
       height: 50px;
       margin: 0 0 0 -3px;
       overflow: hidden;
@@ -248,7 +269,7 @@ export default {
       color: var(--body-text);
 
       &:hover {
-        background: var(--nav-active);
+        background: var(--nav-active) !important;
         color: var(--nav-hover-color);
         /* background: var(--nav-hover); */
         text-decoration: none;
@@ -271,13 +292,13 @@ export default {
       font-size: 12px;
       text-align: right;
       justify-items: center;
-      padding-right: 4px;
+      line-height: 50px;
     }
 
     &.nav-type:not(.depth-0) {
       A {
         font-size: 13px;
-        padding: 5.5px 7px 5.5px 10px;
+        padding: 5.5px 7px 5.5px 40px;
       }
 
       ::v-deep .label I {
@@ -286,4 +307,20 @@ export default {
     }
   }
 
+.labelKey_menu{
+  display: flex;
+  align-items: center;
+}
+.labelKey_menu:hover{
+  i{
+    color: var(--nav-hover-color) !important;
+  }
+}
+.router-link-active{
+  .labelKey_menu{
+    i{
+      color: var(--nav-hover-color) !important;
+    }
+  }
+}
 </style>

package/composables/useClickOutside.ts

@@ -76,6 +76,6 @@ export const useClickOutside = <T extends OnClickOutsideOptions>(
 
   onBeforeUnmount(() => {
     window.removeEventListener('click', listener as any);
-    window.removeEventListener('pointerDown', setShouldListen);
+    window.removeEventListener('pointerdown', setShouldListen);
   });
 };