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

package/components/nav/TopLevelMenu.vue

@@ -52,10 +52,7 @@ export default {
       helper.update(args);
     }
 
-    const topLevelPermissions = sessionStorage.getItem('TOPLEVELPERMISSIONS') || ''
-
     return {
-      topLevelPermissions,
       shown:             false,
       displayVersion,
       fullVersion,
@@ -474,14 +471,12 @@ export default {
 
 <template>
   <div>
-    <!-- ====================== 遮罩层（点击可关闭菜单） ====================== -->
+    <!-- Overlay -->
     <div
       v-if="shown"
       class="side-menu-glass"
       @click="hide()"
     />
-
-    <!-- ====================== 菜单主容器（带淡入淡出过渡） ====================== -->
     <transition name="fade">
       <!-- Side menu -->
       <div
@@ -492,11 +487,8 @@ export default {
         role="navigation"
         :aria-label="t('nav.ariaLabel.topLevelMenu')"
       >
-        
-        <!-- ====================== 菜单头部（Logo + 菜单按钮） ====================== -->
+        <!-- Logo and name -->
         <div class="title">
-          
-          <!-- 菜单按钮（汉堡图标） -->
           <div
             data-testid="top-level-menu"
             :aria-label="t('nav.expandCollapseAppBar')"
@@ -507,8 +499,6 @@ export default {
             @keyup.space="toggle()"
             @click="toggle()"
           >
-
-            <!-- 汉堡菜单SVG图标 -->
             <svg
               class="menu-icon"
               xmlns="http://www.w3.org/2000/svg"
@@ -521,22 +511,19 @@ export default {
               fill="none"
             /><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" /></svg>
           </div>
-
-          <!-- 品牌Logo -->
-          <div v-if="topLevelPermissions && topLevelPermissions === 'superadmin'" class="side-menu-logo">
+          <div class="side-menu-logo">
             <BrandImage
               data-testid="side-menu__brand-img"
               :alt="t('nav.alt.mainMenuRancherLogo')"
-              file-name="logo.png"
+              file-name="rancher-logo.svg"
             />
           </div>
         </div>
 
-        <!-- ====================== 菜单内容区 ====================== -->
+        <!-- Menu body -->
         <div class="body">
-          <div v-if="topLevelPermissions && topLevelPermissions === 'superadmin'">
-            
-            <!-- 首页按钮 -->
+          <div>
+            <!-- Home button -->
             <div @click="hide()">
               <router-link
                 class="option cluster selector home"
@@ -544,8 +531,6 @@ export default {
                 role="link"
                 :aria-label="t('nav.ariaLabel.homePage')"
               >
-
-                <!-- 首页图标 -->
                 <svg
                   v-clean-tooltip="getTooltipConfig(t('nav.home'))"
                   class="top-menu-icon"
@@ -562,14 +547,12 @@ 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
@@ -588,14 +571,10 @@ 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"
@@ -605,11 +584,9 @@ export default {
             </div>
           </div>
 
-          <!-- ====================== Harvester 相关功能区 ====================== -->
+          <!-- Harvester extras -->
           <template v-if="hciApps.length">
             <div class="category" />
-
-            <!-- 跳转 Harvester Dashboard -->
             <div>
               <a
                 v-if="isRancherInHarvester"
@@ -625,8 +602,6 @@ export default {
                 </div>
               </a>
             </div>
-
-            <!-- Harvester 应用列表 -->
             <div
               v-for="(a, i) in appBar.hciApps"
               :key="i"
@@ -649,14 +624,14 @@ export default {
             </div>
           </template>
 
-          <!-- ====================== 集群列表 ====================== -->
-          <template v-if="topLevelPermissions && topLevelPermissions === 'superadmin' && !!allClustersCount">
+          <!-- Cluster menu -->
+          <template v-if="!!allClustersCount">
             <div
               ref="clusterList"
               class="clusters"
               :style="pinnedClustersHeight"
             >
-              <!-- 已固定集群 -->
+              <!-- Pinned Clusters -->
               <div
                 v-if="showPinClusters && pinFiltered.length"
                 class="clustersPinned"
@@ -667,13 +642,11 @@ export default {
                   :data-testid="`pinned-ready-cluster-${index}`"
                   @click="hide()"
                 >
-
-                  <!-- 可用集群按钮 -->
-                  <span
+                  <button
                     v-if="c.ready"
                     v-shortkey.push="{windows: ['alt'], mac: ['option']}"
                     :data-testid="`pinned-menu-cluster-${ c.id }`"
-                    class="clusterBtn cluster selector option"
+                    class="cluster selector option"
                     :class="{'active-menu-link': c.isMenuActive }"
                     :to="c.clusterRoute"
                     role="button"
@@ -703,9 +676,7 @@ export default {
                       :cluster="c"
                       :tab-order="shown ? 0 : -1"
                     />
-                  </span>
-
-                  <!-- 不可用集群 -->
+                  </button>
                   <span
                     v-else
                     class="option cluster selector disabled"
@@ -734,8 +705,6 @@ export default {
                     />
                   </span>
                 </div>
-
-                <!-- 分割线 -->
                 <div
                   v-if="clustersFiltered.length > 0"
                   class="category-title"
@@ -744,7 +713,7 @@ export default {
                 </div>
               </div>
 
-              <!-- 搜索结果集群列表 -->
+              <!-- Clusters Search result -->
               <div class="clustersList">
                 <div
                   v-for="(c, index) in appBar.clustersFiltered"
@@ -752,13 +721,11 @@ export default {
                   :data-testid="`top-level-menu-cluster-${index}`"
                   @click="hide()"
                 >
-                  
-                  <!-- 可用集群 -->
-                  <span
+                  <button
                     v-if="c.ready"
                     v-shortkey.push="{windows: ['alt'], mac: ['option']}"
                     :data-testid="`menu-cluster-${ c.id }`"
-                    class="cluster selector option clusterBtn"
+                    class="cluster selector option"
                     :class="{'active-menu-link': c.isMenuActive }"
                     :to="c.clusterRoute"
                     role="button"
@@ -789,9 +756,7 @@ export default {
                       :tab-order="shown ? 0 : -1"
                       :cluster="c"
                     />
-                  </span>
-
-                  <!-- 不可用集群 -->
+                  </button>
                   <span
                     v-else
                     class="option cluster selector disabled"
@@ -823,7 +788,7 @@ export default {
                 </div>
               </div>
 
-              <!-- 无匹配集群提示 -->
+              <!-- No clusters message -->
               <div
                 v-if="clustersFiltered.length === 0 && searchActive"
                 data-testid="top-level-menu-no-results"
@@ -833,7 +798,7 @@ export default {
               </div>
             </div>
 
-            <!-- 查看所有集群按钮 -->
+            <!-- See all clusters -->
             <router-link
               v-if="allClustersCount > maxClustersToShow"
               class="clusters-all"
@@ -852,129 +817,104 @@ export default {
             </router-link>
           </template>
 
-          <!-- ====================== 多集群应用区 ====================== -->
-          <div :style="!(topLevelPermissions && topLevelPermissions === 'superadmin') ? { placeContent: 'flex-start', display: 'flex', flexDirection: 'column' } : {}" class="category">
-            <!-- 多集群应用 -->
+          <!-- MULTI CLUSTER APPS -->
+          <div class="category">
             <template v-if="multiClusterApps.length">
-              <template v-if="topLevelPermissions && topLevelPermissions === 'superadmin'">
-                <div
-                  class="category-title"
+              <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 }`"
                 >
-                  <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>
+                  <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>
 
-            <!-- 配置类应用 -->
-             <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>
+            <!-- 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 }`"
+                >
+                  <IconOrSvg
+                    v-clean-tooltip="getTooltipConfig(a.label)"
+                    class="app-icon"
+                    :icon="a.icon"
+                    :src="a.svg"
+                  />
+                  <div>{{ a.label }}</div>
+                </router-link>
+              </div>
+            </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>
         </div>
       </div>
@@ -1033,10 +973,6 @@ 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;
@@ -1133,6 +1069,7 @@ export default {
       flex: 1;
       display: flex;
       flex-direction: column;
+      margin: 10px 0;
       width: 300px;
       overflow: auto;
 
@@ -1140,7 +1077,7 @@ export default {
         align-items: center;
         cursor: pointer;
         display: flex;
-        color: var(--primary);
+        color: var(--link);
         font-size: 14px;
         height: $option-height;
         white-space: nowrap;
@@ -1150,7 +1087,7 @@ export default {
         border: none;
 
         .cluster-badge-logo-text {
-          color: var(--primary);
+          color: var(--default-active-text);
           font-weight: 500;
         }
 
@@ -1222,7 +1159,7 @@ export default {
         .rancher-provider-icon,
         svg {
           margin-right: 16px;
-          fill: var(--primary);
+          fill: var(--link);
         }
 
         .top-menu-icon {