dashboard-shell-shell 1.0.10000011122 → 3.0.5-test.1

package/components/nav/Header.vue

@@ -5,7 +5,6 @@ import { MANAGEMENT, NORMAN, STEVE } from '@shell/config/types';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import { ucFirst } from '@shell/utils/string';
 import { isAlternate, isMac } from '@shell/utils/platform';
-import Import from '@shell/components/Import';
 import BrandImage from '@shell/components/BrandImage';
 import { getProduct, getVendor } from '@shell/config/private-label';
 import ClusterProviderIcon from '@shell/components/ClusterProviderIcon';
@@ -16,7 +15,6 @@ import NamespaceFilter from './NamespaceFilter';
 import WorkspaceSwitcher from './WorkspaceSwitcher';
 import TopLevelMenu from './TopLevelMenu';
 
-import Jump from './Jump';
 import { allHash } from '@shell/utils/promise';
 import { ActionLocation, ExtensionPoint } from '@shell/core/types';
 import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
@@ -24,6 +22,7 @@ import IconOrSvg from '@shell/components/IconOrSvg';
 import { wait } from '@shell/utils/async';
 import { configType } from '@shell/models/management.cattle.io.authconfig';
 import HeaderPageActionMenu from './HeaderPageActionMenu.vue';
+import NotificationCenter from './NotificationCenter';
 import {
   RcDropdown,
   RcDropdownItem,
@@ -36,14 +35,13 @@ export default {
   components: {
     NamespaceFilter,
     WorkspaceSwitcher,
-    Import,
     TopLevelMenu,
-    Jump,
     BrandImage,
     ClusterBadge,
     ClusterProviderIcon,
     IconOrSvg,
     AppModal,
+    NotificationCenter,
     HeaderPageActionMenu,
     RcDropdown,
     RcDropdownItem,
@@ -100,7 +98,8 @@ export default {
       'isSingleProduct',
       'isRancherInHarvester',
       'showTopLevelMenu',
-      'isMultiCluster'
+      'isMultiCluster',
+      'showWorkspaceSwitcher'
     ]),
 
     samlAuthProviderEnabled() {
@@ -245,16 +244,16 @@ export default {
   },
 
   watch: {
-    currentCluster(nue, old) {
-      if (nue && old && nue.id !== old.id) {
+    currentCluster(neu, old) {
+      if (neu && old && neu.id !== old.id) {
         this.checkClusterName();
       }
     },
     // since the Header is a "persistent component" we need to update it at every route change...
     $route: {
-      handler(nue) {
-        if (nue) {
-          this.extensionHeaderActions = getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, nue);
+      handler(neu) {
+        if (neu) {
+          this.extensionHeaderActions = getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, neu);
 
           this.navHeaderRight = this.$plugin?.getDynamic('component', 'NavHeaderRight');
         }
@@ -277,6 +276,18 @@ export default {
   },
 
   methods: {
+
+    LogOutfn (type) {
+      sessionStorage.removeItem('TOPLEVELPERMISSIONS')
+      if (type === '1') {
+        this.$router.push({ name: 'account'})
+      } else if (type === '2') {
+        this.showSloModal()
+      } else if (type === '3') {
+        this.$router.push(this.generateLogoutRoute)
+      }
+    },
+
     showSloModal() {
       this.$store.dispatch('management/promptModal', {
         component:      'SloDialog',
@@ -317,19 +328,24 @@ export default {
     },
 
     openImport() {
-      this.showImportModal = true;
-    },
-
-    closeImport() {
-      this.showImportModal = false;
+      this.$store.dispatch('cluster/promptModal', {
+        component:      'ImportDialog',
+        modalWidth:     '75%',
+        height:         'auto',
+        styles:         'max-height: 90vh;',
+        componentProps: { cluster: this.currentCluster }
+      });
     },
 
     openSearch() {
-      this.showSearchModal = true;
-    },
-
-    hideSearch() {
-      this.showSearchModal = false;
+      this.$store.dispatch('cluster/promptModal', {
+        component:           'SearchDialog',
+        testId:              'search-modal',
+        modalWidth:          '50%',
+        height:              'auto',
+        styles:              'max-height: 90vh;',
+        returnFocusSelector: '#header-btn-search'
+      });
     },
 
     checkClusterName() {
@@ -397,11 +413,15 @@ export default {
 </script>
 
 <template>
+
+  <!-- 整个页面的顶部 header -->
   <header
     ref="header"
     data-testid="header"
   >
     <div>
+
+      <!-- 顶部一级菜单（根据不同产品/集群条件决定是否显示） -->
       <TopLevelMenu v-if="isRancherInHarvester || isMultiCluster || !isSingleProduct" />
     </div>
 
@@ -526,34 +546,54 @@ export default {
       </div>
     </div> -->
 
-      <!-- logo -->
-      <div class="menu-spacer">
+      <!-- ===== 左侧 logo 区域 ===== -->
+    <div class="menu-spacer">
+
+      <!-- 如果是单产品模式且不是 RancherInHarvester，就显示 logo 路由跳转 -->
       <router-link
         v-if="isSingleProduct && !isRancherInHarvester"
         :to="singleProductLogoRoute"
       >
-        <img
+
+        <!-- 显示用户头像或 logo 图片 -->
+        <!-- <img
           :src="userIcon"
-        >
+        > -->
       </router-link>
     </div>
-    <!-- 中间 -->
+    
+    <!-- ===== 中间占位符（把左右内容分开） ===== -->
     <div class="spacer" />
 
+    <!-- ===== 右侧功能区域 ===== -->
     <div class="rd-header-right">
+
+      <!-- 动态插入右侧自定义组件（例如插件扩展的 header） -->
       <component :is="navHeaderRight" />
+
+      <!-- ===== 集群/命名空间过滤器 ===== -->
       <div
         v-if="showFilter"
         class="top"
       >
+
+        <!-- 如果集群就绪 + 当前产品支持命名空间过滤器 或 Explorer 模式 -->
         <NamespaceFilter v-if="clusterReady && currentProduct && (currentProduct.showNamespaceFilter || isExplorer)" />
+        
+        <!-- 否则显示工作空间切换器 -->
         <WorkspaceSwitcher v-else-if="clusterReady && currentProduct && currentProduct.showWorkspaceSwitcher" />
       </div>
+
+      <!-- ===== 集群相关按钮（仅在有集群且不是 simple 模式下显示） ===== -->
       <div
         v-if="currentCluster && !simple"
         class="header-buttons"
       >
+
+        <!-- 如果当前产品支持集群切换器 -->
         <template v-if="currentProduct && currentProduct.showClusterSwitcher">
+
+          <!-- 导入 YAML 按钮 -->
           <button
             v-if="showImportYaml"
             v-clean-tooltip="t('nav.import')"
@@ -568,20 +608,6 @@ export default {
           >
             <i class="icon icon-upload icon-lg" />
           </button>
-          <app-modal
-            v-if="showImportModal"
-            class="import-modal"
-            name="importModal"
-            width="75%"
-            height="auto"
-            styles="max-height: 90vh;"
-            @close="closeImport"
-          >
-            <Import
-              :cluster="currentCluster"
-              @close="closeImport"
-            />
-          </app-modal>
 
           <button
             v-if="showKubeShell"
@@ -600,6 +626,7 @@ export default {
             <i class="icon icon-terminal icon-lg" />
           </button>
 
+          <!-- 下载 kubeconfig 按钮 -->
           <button
             v-if="showKubeConfig"
             v-clean-tooltip="t('nav.kubeconfig.download')"
@@ -615,6 +642,7 @@ export default {
             <i class="icon icon-file icon-lg" />
           </button>
 
+          <!-- 复制 kubeconfig 按钮 -->
           <button
             v-if="showCopyConfig"
             v-clean-tooltip="t('nav.kubeconfig.copy')"
@@ -627,10 +655,14 @@ export default {
             :aria-label="t('nav.kubeconfig.copy')"
             @click="copyKubeConfig($event)"
           >
+            
+            <!-- 点击复制后显示对勾 -->
             <i
               v-if="kubeConfigCopying"
               class="icon icon-checkmark icon-lg"
             />
+
+            <!-- 未复制状态显示复制图标 -->
             <i
               v-else
               class="icon icon-copy icon-lg"
@@ -638,6 +670,7 @@ export default {
           </button>
         </template>
 
+        <!-- 资源搜索按钮 -->
         <button
           v-if="showSearch"
           id="header-btn-search"
@@ -654,6 +687,8 @@ export default {
         >
           <i class="icon icon-search icon-lg" />
         </button>
+
+        <!-- 搜索弹窗 -->
         <app-modal
           v-if="showSearch && showSearchModal"
           class="search-modal"
@@ -664,11 +699,10 @@ export default {
           return-focus-selector="#header-btn-search"
           @close="hideSearch()"
         >
-          <Jump @closeSearch="hideSearch()" />
         </app-modal>
       </div>
 
-      <!-- Extension header actions -->
+      <!-- ===== 插件扩展按钮区 ===== -->
       <div
         v-if="extensionHeaderActions.length"
         class="header-buttons"
@@ -697,12 +731,16 @@ export default {
         </button>
       </div>
 
+      <!-- ===== 用户菜单（右上角头像 + 下拉） ===== -->
       <div class="center-self">
         <header-page-action-menu v-if="showPageActions" />
+
         <rc-dropdown
           v-if="showUserMenu"
           :aria-label="t('nav.userMenu.label')"
         >
+          
+          <!-- 头像触发按钮 -->
           <rc-dropdown-trigger
             ghost
             small
@@ -721,9 +759,11 @@ export default {
               v-else
               class="icon icon-user icon-3x avatar"
             /> -->
-            <i class="icon icon-usericon" />
+            <i class="icon icon-usericon" style="padding-bottom: 5px;" />
             <span class="login-name">{{ principal.loginName }}</span>
           </rc-dropdown-trigger>
+
+          <!-- 下拉菜单内容 -->
           <template #dropdownCollection>
             <!-- <template v-if="authEnabled">
               <div class="user-info">
@@ -744,21 +784,27 @@ export default {
             >
               {{ t('nav.userMenu.preferences') }}
             </rc-dropdown-item> -->
+
+            <!-- 退出登录（支持 SLO 弹窗） -->
             <rc-dropdown-item
               v-if="showAccountAndApiKeyLink"
-              @click="$router.push({ name: 'account'})"
+              @click="LogOutfn('1')"
             >
               {{ t('nav.userMenu.accountAndKeys', {}, true) }}
             </rc-dropdown-item>
+
+            <!-- 普通退出登录 -->
             <rc-dropdown-item
               v-if="authEnabled && shouldShowSloLogoutModal"
-              @click="showSloModal"
+              @click="LogOutfn('2')"
             >
               {{ t('nav.userMenu.logOut') }}
             </rc-dropdown-item>
+
+            <!-- 普通退出登录 -->
             <rc-dropdown-item
               v-else-if="authEnabled"
-              @click="$router.push(generateLogoutRoute)"
+              @click="LogOutfn('3')"
             >
               {{ t('nav.userMenu.logOut') }}
             </rc-dropdown-item>
@@ -944,6 +990,8 @@ export default {
         // Spacing between header buttons
         .btn:not(:last-of-type) {
           margin-right: 10px;
+          width: 30px;
+          min-width: 30px;
         }
 
         .btn:focus {
@@ -965,6 +1013,8 @@ export default {
 
       .header-btn {
         width: 40px;
+        display: flex;
+        align-items: center;
       }
 
       :deep() div .btn.role-tertiary {
@@ -972,19 +1022,21 @@ export default {
         border: none;
         background: var(--header-btn-bg);
         color: var(--header-btn-text);
-        padding: 0 10px;
+        padding: 0 15px 0 10px;
         line-height: 32px;
         min-height: 32px;
+        width: 30px;
+        min-width: 30px;
 
         i {
           // Ideally same height as the parent button, but this means tooltip needs adjusting (which is it's own can of worms)
           line-height: 20px;
         }
 
-        &:hover {
-          background: var(--primary);
-          color: #fff;
-        }
+        // &:hover {
+        //   background: var(--primary);
+        //   color: #fff;
+        // }
 
         &[disabled=disabled] {
           background-color: rgba(0,0,0,0.25) !important;
@@ -1067,7 +1119,6 @@ export default {
       > .center-self {
         align-self: center;
         display: flex;
-        gap: 1rem;
         align-items: center;
         padding-right: 1rem;
       }
@@ -1176,7 +1227,7 @@ export default {
   .login-name{
     font-size: 14px;
     margin-left: 5px;
-    margin-top: 5px;
+    // margin-top: 5px;
     line-height: 20px;
   }
 </style>

package/components/nav/HeaderPageActionMenu.vue

@@ -17,6 +17,7 @@ const pageAction = (_event: Event, action: string) => {
     :dropdown-aria-label="t('nav.actionMenu.button.label')"
     data-testid="page-actions-menu-action-button"
     button-role="tertiary"
+    :showIcon="true"
     @select="pageAction"
   />
 </template>