dashboard-shell-shell 1.0.1000000117 → 1.0.1000000118

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,
@@ -463,14 +460,12 @@ export default {
 
 <template>
   <div>
-    <!-- ====================== 遮罩层（点击可关闭菜单） ====================== -->
+    <!-- Overlay -->
     <div
       v-if="shown"
       class="side-menu-glass"
       @click="hide()"
     />
-
-    <!-- ====================== 菜单主容器（带淡入淡出过渡） ====================== -->
     <transition name="fade">
       <!-- Side menu -->
       <div
@@ -481,11 +476,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')"
@@ -496,8 +488,6 @@ export default {
             @keyup.space="toggle()"
             @click="toggle()"
           >
-
-            <!-- 汉堡菜单SVG图标 -->
             <svg
               class="menu-icon"
               xmlns="http://www.w3.org/2000/svg"
@@ -510,22 +500,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"
@@ -533,8 +520,6 @@ export default {
                 role="link"
                 :aria-label="t('nav.ariaLabel.homePage')"
               >
-
-                <!-- 首页图标 -->
                 <svg
                   v-clean-tooltip="getTooltipConfig(t('nav.home'))"
                   class="top-menu-icon"
@@ -551,14 +536,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
@@ -577,14 +560,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"
@@ -594,11 +573,9 @@ export default {
             </div>
           </div>
 
-          <!-- ====================== Harvester 相关功能区 ====================== -->
+          <!-- Harvester extras -->
           <template v-if="hciApps.length">
             <div class="category" />
-
-            <!-- 跳转 Harvester Dashboard -->
             <div>
               <a
                 v-if="isRancherInHarvester"
@@ -614,8 +591,6 @@ export default {
                 </div>
               </a>
             </div>
-
-            <!-- Harvester 应用列表 -->
             <div
               v-for="(a, i) in appBar.hciApps"
               :key="i"
@@ -638,14 +613,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"
@@ -656,13 +631,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"
@@ -692,9 +665,7 @@ export default {
                       :cluster="c"
                       :tab-order="shown ? 0 : -1"
                     />
-                  </span>
-
-                  <!-- 不可用集群 -->
+                  </button>
                   <span
                     v-else
                     class="option cluster selector disabled"
@@ -723,8 +694,6 @@ export default {
                     />
                   </span>
                 </div>
-
-                <!-- 分割线 -->
                 <div
                   v-if="clustersFiltered.length > 0"
                   class="category-title"
@@ -733,7 +702,7 @@ export default {
                 </div>
               </div>
 
-              <!-- 搜索结果集群列表 -->
+              <!-- Clusters Search result -->
               <div class="clustersList">
                 <div
                   v-for="(c, index) in appBar.clustersFiltered"
@@ -741,13 +710,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"
@@ -778,9 +745,7 @@ export default {
                       :tab-order="shown ? 0 : -1"
                       :cluster="c"
                     />
-                  </span>
-
-                  <!-- 不可用集群 -->
+                  </button>
                   <span
                     v-else
                     class="option cluster selector disabled"
@@ -812,7 +777,7 @@ export default {
                 </div>
               </div>
 
-              <!-- 无匹配集群提示 -->
+              <!-- No clusters message -->
               <div
                 v-if="clustersFiltered.length === 0 && searchActive"
                 data-testid="top-level-menu-no-results"
@@ -822,7 +787,7 @@ export default {
               </div>
             </div>
 
-            <!-- 查看所有集群按钮 -->
+            <!-- See all clusters -->
             <router-link
               v-if="allClustersCount > maxClustersToShow"
               class="clusters-all"
@@ -841,129 +806,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>
@@ -1022,10 +962,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;
@@ -1122,6 +1058,7 @@ export default {
       flex: 1;
       display: flex;
       flex-direction: column;
+      margin: 10px 0;
       width: 300px;
       overflow: auto;
 
@@ -1129,7 +1066,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;
@@ -1139,7 +1076,7 @@ export default {
         border: none;
 
         .cluster-badge-logo-text {
-          color: var(--primary);
+          color: var(--default-active-text);
           font-weight: 500;
         }
 
@@ -1211,7 +1148,7 @@ export default {
         .rancher-provider-icon,
         svg {
           margin-right: 16px;
-          fill: var(--primary);
+          fill: var(--link);
         }
 
         .top-menu-icon {

package/components/nav/Type.vue

@@ -109,7 +109,6 @@ export default {
 </script>
 
 <template>
-  <!-- 当 type 有 route 时，渲染一个 Vue Router 自定义链接 -->
   <router-link
     v-if="type.route"
     :key="type.name"
@@ -117,24 +116,18 @@ 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)"
@@ -145,40 +138,30 @@ export default {
         @mouseenter="setNear(true)"
         @mouseleave="setNear(false)"
       >
-        <!-- 文本标签：优先使用多语言 key -->
         <span
           v-if="type.labelKey"
           class="label"
         ><t :k="type.labelKey" /></span>
-
-        <!-- 没有 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-else
+          v-clean-html="type.labelDisplay || type.label"
+          class="label"
+          :class="{'no-icon': !type.icon}"
+        />
         <!-- <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"
@@ -187,8 +170,6 @@ export default {
       </a>
     </li>
   </router-link>
-
-  <!-- 当 type 没有 route 但有外部 link 时 -->
   <li
     v-else-if="type.link"
     class="child nav-type nav-link"
@@ -204,8 +185,6 @@ export default {
       <span class="label">{{ type.label }}&nbsp;<i class="icon icon-external-link" /></span>
     </a>
   </li>
-
-  <!-- 兜底情况：既没有 route，也没有 link -->
   <li v-else>
     {{ type }}?
   </li>
@@ -255,12 +234,12 @@ export default {
     A {
       display: grid;
       grid-template-areas: "label count";
-      grid-template-columns: auto 20px;
+      grid-template-columns: auto auto;
       grid-column-gap: 5px;
       font-size: 14px;
       line-height: 24px;
       /* padding: 7.5px 7px 7.5px 10px; */
-      padding: 0px 16px 0px 30px;
+      padding: 0px 16px 0px 40px;
       height: 50px;
       margin: 0 0 0 -3px;
       overflow: hidden;
@@ -269,7 +248,7 @@ export default {
       color: var(--body-text);
 
       &:hover {
-        background: var(--nav-active) !important;
+        background: var(--nav-active);
         color: var(--nav-hover-color);
         /* background: var(--nav-hover); */
         text-decoration: none;
@@ -292,13 +271,13 @@ export default {
       font-size: 12px;
       text-align: right;
       justify-items: center;
-      line-height: 50px;
+      padding-right: 4px;
     }
 
     &.nav-type:not(.depth-0) {
       A {
         font-size: 13px;
-        padding: 5.5px 7px 5.5px 40px;
+        padding: 5.5px 7px 5.5px 10px;
       }
 
       ::v-deep .label I {
@@ -307,20 +286,4 @@ 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>