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

package/components/nav/NamespaceFilter.vue

@@ -748,7 +748,7 @@ export default {
         data-testid="namespaces-values-label"
         class="ns-values"
       >
-        {{ value[0].label }}
+        {{ value[0].label.replace('harvester', 'cloud') }}
       </div>
 
       <!-- All the selected namespaces -->
@@ -774,20 +774,18 @@ export default {
           :data-testid="`namespaces-value-${j}`"
           class="ns-value"
         >
-          <div>{{ ns.label }}</div>
+          <div>{{ ns.label.replace('harvester', 'cloud') }}</div>
           <!-- block user from removing the last selection if ns forced filtering is on -->
-          <RcButton
+          <i
             v-if="!namespaceFilterMode || value.length > 1"
             small
             ghost
-            class="ns-chip-button"
+            class="ns-chip-button icon icon-close"
             :data-testid="`namespaces-values-close-${j}`"
             @click="removeOption(ns, $event)"
             @keydown.enter.space.stop="removeOption(ns, $event)"
             @mousedown="handleValueMouseDown(ns, $event)"
-          >
-            <i class="icon icon-close" />
-          </RcButton>
+          />
         </div>
       </div>
 
@@ -836,19 +834,15 @@ export default {
             @click="focusFilter"
             @keydown="inputKeyHandler($event)"
           >
-          <RcButton
+          <i
             v-if="hasFilter"
             small
             ghost
-            class="ns-filter-clear"
+            class="ns-filter-clear icon icon-close"
             :aria-label="t('namespaceFilter.button.clearFilter')"
             @click="clearFilter"
             @keydown.enter.stop="clearFilter"
-          >
-            <i
-              class="icon icon-close"
-            />
-          </RcButton>
+          />
         </div>
         <div
           v-if="namespaceFilterMode"
@@ -859,7 +853,7 @@ export default {
             class="icon icon-info"
           />
         </div>
-        <RcButton
+        <div
           v-else
           small
           ghost
@@ -871,8 +865,9 @@ export default {
         >
           <i
             class="icon icon-close"
+            @click="clear()"
           />
-        </RcButton>
+        </div>
       </div>
       <div class="ns-divider mt-0" />
       <div
@@ -889,12 +884,12 @@ export default {
           v-for="(opt, i) in cachedFiltered"
           :key="opt.id"
         >
-          <hr
+          <div
             v-if="opt.kind === NAMESPACE_FILTER_KINDS.DIVIDER"
             role="separator"
             aria-orientation="horizontal"
             class="ns-divider"
-          >
+          />
           <div
             v-else
             :id="opt.elementId"
@@ -919,7 +914,7 @@ export default {
                 v-if="opt.kind === NAMESPACE_FILTER_KINDS.NAMESPACE"
                 class="icon icon-folder"
               />
-              <div>{{ opt.label }}</div>
+              <div>{{ opt.label.replace('harvester', 'cloud') }}</div>
               <i
                 v-if="opt.selected"
                 class="icon icon-checkmark"
@@ -949,7 +944,6 @@ export default {
   .ns-filter {
     width: 280px;
     display: inline-block;
-    border-radius: var(--border-radius);
 
     .ns-glass {
       top: 0;
@@ -968,15 +962,19 @@ export default {
     }
 
     .ns-clear {
-      padding: 0 5px;
       &:hover {
         color: var(--primary);
+        cursor: pointer;
       }
     }
 
     .ns-singleton-info, .ns-clear {
       align-items: center;
       display: flex;
+      > i {
+        padding-right: 5px;
+        font-size: 10px;
+      }
     }
 
     .ns-input {
@@ -987,26 +985,24 @@ export default {
 
     .ns-filter-input {
       height: 24px;
+      border: 1px solid #d7d7d7;
+      padding: 0px 5px;
     }
 
     .ns-filter-clear {
       cursor: pointer;
       position: absolute;
       right: 10px;
-      top: 10px;
+      top: 5px;
       line-height: 24px;
       text-align: center;
-      width: 14px;
-      min-height: 14px;
-    }
-
-    .ns-chip-button {
-      min-height: 14px;
+      width: 24px;
     }
 
     .ns-dropdown-menu {
       background-color: var(--header-bg);
-      border: 1px solid var(--primary-border);
+      /* border: 1px solid var(--primary-border); */
+      border: 1px solid #d7d7d7;;
       border-bottom-left-radius: var(--border-radius);
       border-bottom-right-radius: var(--border-radius);
       color: var(--header-btn-text);
@@ -1026,10 +1022,10 @@ export default {
       }
 
       .ns-divider {
-        border-top: 1px solid var(--border);
+        /* border-top: 1px solid var(--border); */
         cursor: default;
-        margin-top: 10px;
-        padding-bottom: 10px;
+        /* margin-top: 10px; */
+        /* padding-bottom: 10px; */
       }
 
       .ns-option {
@@ -1069,7 +1065,7 @@ export default {
           &.ns-selected:not(:hover) {
             .ns-item {
               > * {
-                color: var(--primary);
+                /* color: var(--primary); */
               }
             }
 
@@ -1122,7 +1118,7 @@ export default {
       border-radius: var(--border-radius);
       color: var(--header-btn-text);
       cursor: pointer;
-      height: 40px;
+      height: 32px;
       padding: 0 10px;
       position: relative;
       z-index: z-index('dropdownOverlay');
@@ -1130,7 +1126,8 @@ export default {
       &.ns-open {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
-        border-color: var(--primary-border);
+        /* border-color: var(--primary-border); */
+        border-color: #d7d7d7;
       }
 
       > .ns-values {
@@ -1169,12 +1166,13 @@ export default {
           border-radius: 5px;
           color: var(--tag-text);
           display: flex;
-          line-height: 20px;
+          /* line-height: 20px; */
           padding: 2px 5px;
           white-space: nowrap;
 
           > i {
             margin-left: 5px;
+            font-size: 8px;
 
             &:hover {
               color: var(--primary);

package/components/nav/TopLevelMenu.vue

@@ -471,12 +471,14 @@ export default {
 
 <template>
   <div>
-    <!-- Overlay -->
+    <!-- ====================== 遮罩层（点击可关闭菜单） ====================== -->
     <div
       v-if="shown"
       class="side-menu-glass"
       @click="hide()"
     />
+
+    <!-- ====================== 菜单主容器（带淡入淡出过渡） ====================== -->
     <transition name="fade">
       <!-- Side menu -->
       <div
@@ -487,8 +489,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 +504,8 @@ export default {
             @keyup.space="toggle()"
             @click="toggle()"
           >
+
+            <!-- 汉堡菜单SVG图标 -->
             <svg
               class="menu-icon"
               xmlns="http://www.w3.org/2000/svg"
@@ -511,19 +518,22 @@ export default {
               fill="none"
             /><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" /></svg>
           </div>
+
+          <!-- 品牌Logo -->
           <div 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 @click="hide()">
               <router-link
                 class="option cluster selector home"
@@ -531,6 +541,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 +559,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 +585,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 +602,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 +622,8 @@ export default {
                 </div>
               </a>
             </div>
+
+            <!-- Harvester 应用列表 -->
             <div
               v-for="(a, i) in appBar.hciApps"
               :key="i"
@@ -624,14 +646,14 @@ export default {
             </div>
           </template>
 
-          <!-- Cluster menu -->
+          <!-- ====================== 集群列表 ====================== -->
           <template v-if="!!allClustersCount">
             <div
               ref="clusterList"
               class="clusters"
               :style="pinnedClustersHeight"
             >
-              <!-- Pinned Clusters -->
+              <!-- 已固定集群 -->
               <div
                 v-if="showPinClusters && pinFiltered.length"
                 class="clustersPinned"
@@ -642,11 +664,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 +700,9 @@ export default {
                       :cluster="c"
                       :tab-order="shown ? 0 : -1"
                     />
-                  </button>
+                  </span>
+
+                  <!-- 不可用集群 -->
                   <span
                     v-else
                     class="option cluster selector disabled"
@@ -705,6 +731,8 @@ export default {
                     />
                   </span>
                 </div>
+
+                <!-- 分割线 -->
                 <div
                   v-if="clustersFiltered.length > 0"
                   class="category-title"
@@ -713,7 +741,7 @@ export default {
                 </div>
               </div>
 
-              <!-- Clusters Search result -->
+              <!-- 搜索结果集群列表 -->
               <div class="clustersList">
                 <div
                   v-for="(c, index) in appBar.clustersFiltered"
@@ -721,11 +749,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 +786,9 @@ export default {
                       :tab-order="shown ? 0 : -1"
                       :cluster="c"
                     />
-                  </button>
+                  </span>
+
+                  <!-- 不可用集群 -->
                   <span
                     v-else
                     class="option cluster selector disabled"
@@ -788,7 +820,7 @@ export default {
                 </div>
               </div>
 
-              <!-- No clusters message -->
+              <!-- 无匹配集群提示 -->
               <div
                 v-if="clustersFiltered.length === 0 && searchActive"
                 data-testid="top-level-menu-no-results"
@@ -817,8 +849,9 @@ export default {
             </router-link>
           </template>
 
-          <!-- MULTI CLUSTER APPS -->
+          <!-- ====================== 多集群应用区 ====================== -->
           <div class="category">
+            <!-- 多集群应用 -->
             <template v-if="multiClusterApps.length">
               <div
                 class="category-title"
@@ -834,6 +867,7 @@ export default {
                 @click="hide()"
               >
                 <router-link
+                  v-if="a.value !== 'fleet'"
                   class="option"
                   :class="{'active-menu-link': a.isMenuActive }"
                   :to="a.to"
@@ -890,7 +924,7 @@ export default {
         <div
           class="footer"
         >
-          <div
+          <!-- <div
             v-if="canEditSettings"
             class="support"
             @click="hide()"
@@ -915,7 +949,7 @@ export default {
             >
               {{ aboutText }}
             </router-link>
-          </div>
+          </div> -->
         </div>
       </div>
     </transition>
@@ -973,6 +1007,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 +1107,6 @@ export default {
       flex: 1;
       display: flex;
       flex-direction: column;
-      margin: 10px 0;
       width: 300px;
       overflow: auto;
 
@@ -1077,7 +1114,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 +1124,7 @@ export default {
         border: none;
 
         .cluster-badge-logo-text {
-          color: var(--default-active-text);
+          color: var(--primary);
           font-weight: 500;
         }
 
@@ -1159,7 +1196,7 @@ export default {
         .rancher-provider-icon,
         svg {
           margin-right: 16px;
-          fill: var(--link);
+          fill: var(--primary);
         }
 
         .top-menu-icon {
@@ -1581,7 +1618,7 @@ export default {
     }
 
     :deep() .v-popper__arrow-container {
-      display: none;
+      display: none !important;
     }
 
     :deep() .v-popper:focus {