dashboard-shell-shell 3.0.5-test.6 → 3.0.5-test.9

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,
@@ -471,12 +474,14 @@ export default {
 
 <template>
   <div>
-    <!-- Overlay -->
+    <!-- ====================== 遮罩层（点击可关闭菜单） ====================== -->
     <div
       v-if="shown"
       class="side-menu-glass"
       @click="hide()"
     />
+
+    <!-- ====================== 菜单主容器（带淡入淡出过渡） ====================== -->
     <transition name="fade">
       <!-- Side menu -->
       <div
@@ -487,8 +492,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')"
@@ -499,6 +507,8 @@ export default {
             @keyup.space="toggle()"
             @click="toggle()"
           >
+
+            <!-- 汉堡菜单SVG图标 -->
             <svg
               class="menu-icon"
               xmlns="http://www.w3.org/2000/svg"
@@ -511,19 +521,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"
@@ -531,6 +544,8 @@ export default {
                 role="link"
                 :aria-label="t('nav.ariaLabel.homePage')"
               >
+
+                <!-- 首页图标 -->
                 <svg
                   v-clean-tooltip="getTooltipConfig(t('nav.home'))"
                   class="top-menu-icon"
@@ -547,12 +562,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
@@ -571,10 +588,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"
@@ -584,9 +605,11 @@ export default {
             </div>
           </div>
 
-          <!-- Harvester extras -->
+          <!-- ====================== Harvester 相关功能区 ====================== -->
           <template v-if="hciApps.length">
             <div class="category" />
+
+            <!-- 跳转 Harvester Dashboard -->
             <div>
               <a
                 v-if="isRancherInHarvester"
@@ -602,6 +625,8 @@ export default {
                 </div>
               </a>
             </div>
+
+            <!-- Harvester 应用列表 -->
             <div
               v-for="(a, i) in appBar.hciApps"
               :key="i"
@@ -624,14 +649,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"
@@ -642,11 +667,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"
@@ -676,7 +703,9 @@ export default {
                       :cluster="c"
                       :tab-order="shown ? 0 : -1"
                     />
-                  </button>
+                  </span>
+
+                  <!-- 不可用集群 -->
                   <span
                     v-else
                     class="option cluster selector disabled"
@@ -705,6 +734,8 @@ export default {
                     />
                   </span>
                 </div>
+
+                <!-- 分割线 -->
                 <div
                   v-if="clustersFiltered.length > 0"
                   class="category-title"
@@ -713,7 +744,7 @@ export default {
                 </div>
               </div>
 
-              <!-- Clusters Search result -->
+              <!-- 搜索结果集群列表 -->
               <div class="clustersList">
                 <div
                   v-for="(c, index) in appBar.clustersFiltered"
@@ -721,11 +752,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"
@@ -756,7 +789,9 @@ export default {
                       :tab-order="shown ? 0 : -1"
                       :cluster="c"
                     />
-                  </button>
+                  </span>
+
+                  <!-- 不可用集群 -->
                   <span
                     v-else
                     class="option cluster selector disabled"
@@ -788,7 +823,7 @@ export default {
                 </div>
               </div>
 
-              <!-- No clusters message -->
+              <!-- 无匹配集群提示 -->
               <div
                 v-if="clustersFiltered.length === 0 && searchActive"
                 data-testid="top-level-menu-no-results"
@@ -798,7 +833,7 @@ export default {
               </div>
             </div>
 
-            <!-- See all clusters -->
+            <!-- 查看所有集群按钮 -->
             <router-link
               v-if="allClustersCount > maxClustersToShow"
               class="clusters-all"
@@ -817,104 +852,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>
@@ -973,6 +1033,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;
@@ -1069,7 +1133,6 @@ export default {
       flex: 1;
       display: flex;
       flex-direction: column;
-      margin: 10px 0;
       width: 300px;
       overflow: auto;
 
@@ -1077,7 +1140,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;
@@ -1087,7 +1150,7 @@ export default {
         border: none;
 
         .cluster-badge-logo-text {
-          color: var(--default-active-text);
+          color: var(--primary);
           font-weight: 500;
         }
 
@@ -1159,7 +1222,7 @@ export default {
         .rancher-provider-icon,
         svg {
           margin-right: 16px;
-          fill: var(--link);
+          fill: var(--primary);
         }
 
         .top-menu-icon {