dashboard-shell-shell 1.0.1000000116 → 1.0.1000000117

package/components/ResourceList/Masthead.vue

@@ -80,7 +80,12 @@ export default {
     componentTestid: {
       type:    String,
       default: 'masthead'
-    }
+    },
+
+    mainButtonVisible: {
+      type:    Boolean,
+      default: true
+    },
   },
 
   data() {
@@ -99,11 +104,14 @@ export default {
     };
 
     const tabList = ['集群配置'];
+
+    const description = ''
     return {
       formRoute,
       yamlRoute,
       hasEditComponent,
       tabList,
+      description
     };
   },
 
@@ -128,31 +136,61 @@ export default {
         return '?';
       }
 
-      // console.log(this.$store.getters['type-map/labelFor'](this.schema, 99), ' type-map/labelFor---------------')
-
       return this.$store.getters['type-map/labelFor'](this.schema, 99);
     },
     _descriptionDisplay() {
-      const key = this.$route.path.split('/'.pop());
+      const key = this.$route.path.split('/').pop();
 
       return this.$store.getters['i18n/t'](`typeDescription."${ key.toLowerCase() }"`);
     },
     demoDisplay() {
-      const product = this.$store.getters['productId'];
-      const productId = this.$store.getters['type-map/groupForBasicType'](this.$store.getters['productId'], this._createLocation.params.resource);
-      const parts = productId?.split('::');
-      const newString = 'root';
-
-      if (!parts.includes(newString)) {
-        parts.unshift(newString); // 将字符串添加到数组第一位
+      // const product = this.$store.getters['productId'];
+      // const productId = this.$store.getters['type-map/groupForBasicType'](this.$store.getters['productId'], this._createLocation.params.resource);
+
+      // const parts = productId?.split('::') || [];
+      // const newString = 'root';
+
+      // if (!parts.includes(newString)) {
+      //   parts.unshift(newString); // 将字符串添加到数组第一位
+      // }
+      
+      // const partsEn = parts.map((item) => {  
+      //   return this.$store.getters['i18n/t'](`typeLabel."${ item.toLowerCase() }"`);
+      // });
+
+      // return partsEn;
+      
+      const breadcrumbList = {
+        'harvesterhci.io.management.cluster': {
+          origin: 'Harvester 集群',
+          bread: ['虚拟化管理'],
+          description: '提供虚拟化集群的实时健康状态监控、版本号管理及资源负载管理，支持批量导入/删除集群、配置调优与权限分级功能，实现高效运维管控。'
+        },
+        'management.cattle.io.user': {
+          origin: '用户',
+          bread: ['用户 & 认证'],
+          description: '用于管理用户账号，支持创建、维护用户信息，可设置用户权限、管理密码等，保障系统资源仅由授权用户访问，提升系统安全性。'
+        },
+        'management.cattle.io.setting':{
+          origin: '基础设置',
+          bread: ['全局设置'],
+          description: '统一配置平台基础选项与全局设置，支持CA证书、密码规则、域名、Token时效等核心配置。'
+        },
+        'management.cattle.io.feature':{
+          origin: '功能开关',
+          bread: ['全局设置'],
+          description: '还没有添加描述。。。。'
+        },
+      }
+      const resourcePath = this.$route.params.resource || ''
+      
+      const breadcrumb = []
+      if (breadcrumbList[resourcePath] && Object.keys(breadcrumbList[resourcePath]).length > 0) {
+        breadcrumb.push(...breadcrumbList[resourcePath].bread)
+        this.description = breadcrumbList[resourcePath].description
       }
 
-      const partsEn = parts.map((item) => {
-        return this.$store.getters['i18n/t'](`typeLabel."${ item.toLowerCase() }"`);
-      });
-
-      return partsEn;
-      // return this.$store.getters['i18n/t'](`typeLabel."${ productId.toLowerCase() }"`)
+      return breadcrumb
     },
 
     _isYamlCreatable() {
@@ -193,80 +231,95 @@ export default {
 </script>
 
 <template>
+  <!-- 顶部 header，带有子标题（subheader）样式类 -->
   <header class="with-subheader">
-    <!-- <slot name="typeDescription">
-      <TypeDescription :resource="resource" />
-    </slot> -->
-    <div class="title">
-      <div class="excram-list">
-        <span
-          v-for="(item,index) in demoDisplay"
-          :key="index"
-        >
-          <span>{{ item }}</span>
-          <span>/</span>
-        </span>
-        <span class="excram-last-name">{{ _typeDisplay }}</span>
+    <div style="display: flex;width: 100%;">
+      <div style="flex: 1;">
+        <!-- 标题区域 -->
+        <div class="title">
+          <div class="excram-list">
+            <span
+              v-for="(item,index) in demoDisplay"
+              :key="index"
+            >
+              <span v-if="item">{{ item }}</span>
+              <span v-if="item">/</span>
+            </span>
+            <span class="excram-last-name">{{ _typeDisplay }}</span>
+          </div>
+          <h1 style="display: flex;align-items: center;" class="m-0 descrip-name">
+            <TabTitle>{{ _typeDisplay }}</TabTitle>
+            <!-- 子标题区域 -->
+            <div class="sub-header">
+              <slot name="subHeader">
+                <!--Slot content-->
+              </slot>
+            </div>
+            
+            <!-- <Favorite
+              v-if="isExplorer"
+              :resource="favoriteResource || resource"
+            /> -->
+
+            <ResourceLoadingIndicator
+              style="margin-left: 10px;"
+              v-if="showIncrementalLoadingIndicator"
+              :resources="loadResources"
+              :indeterminate="loadIndeterminate"
+            />
+          </h1>
+          
+          <!-- 插槽：typeDescription，用于插入类型描述组件 -->
+          <div v-if="description" class="masthod-title-description">
+            {{ description }}
+          </div>
+  
+        </div>
+    
+
       </div>
-      <h1 class="m-0 descrip-name">
-        <TabTitle>{{ _typeDisplay }}</TabTitle> <Favorite
-          v-if="isExplorer"
-          :resource="favoriteResource || resource"
-        />
-      </h1>
-      <!-- 描述 -->
-      <div class="masthod-title-description">
-        {{ _descriptionDisplay }}
+  
+      <!-- 操作按钮区域 -->
+      <div 
+        v-if="!(tabList.includes(_typeDisplay)) && mainButtonVisible"
+        class="actions-container"
+        style="min-height: 32px;align-self: flex-end;"
+      >
+        <slot name="actions">
+          <div class="actions">
+            <slot name="extraActions" />
+  
+            <slot name="createButton">
+              <router-link
+                v-if="hasEditComponent && _isCreatable"
+                :to="_createLocation"
+                class="btn role-primary"
+                :data-testid="componentTestid+'-create'"
+              >
+                {{ _createButtonlabel }}
+              </router-link>
+              <router-link
+                v-else-if="_isYamlCreatable"
+                :to="_yamlCreateLocation"
+                class="btn role-primary"
+                :data-testid="componentTestid+'-create-yaml'"
+              >
+                {{ t("resourceList.head.createFromYaml") }}
+              </router-link>
+            </slot>
+          </div>
+        </slot>
       </div>
-      <ResourceLoadingIndicator
-        v-if="showIncrementalLoadingIndicator"
-        :resources="loadResources"
-        :indeterminate="loadIndeterminate"
-      />
-    </div>
-    <div class="sub-header">
-      <slot name="subHeader">
-        <!--Slot content-->
-      </slot>
     </div>
     <div
       v-if="!(tabList.includes(_typeDisplay))"
-      style="width: 110%;height: 1px;background-color: #D7D7D7;margin-top: 10px;margin-bottom: 20px;margin-left: -20px;margin-right: -20px;"
+      style="width: 110%;height: 1px;background-color: #D7D7D7;margin-top: 16px;margin-left: -20px;margin-right: -20px;"
     />
-    <div 
-     v-if="!(tabList.includes(_typeDisplay))"
-    class="actions-container"
-    style="width: 100%;min-height: 32px;text-align: left"
-    >
-      <slot name="actions">
-        <div class="actions">
-          <slot name="extraActions" />
-
-          <slot name="createButton">
-            <router-link
-              v-if="hasEditComponent && _isCreatable"
-              :to="_createLocation"
-              class="btn role-primary"
-              :data-testid="componentTestid+'-create'"
-            >
-              {{ _createButtonlabel }}
-            </router-link>
-            <!-- <router-link
-              v-else-if="_isYamlCreatable"
-              :to="_yamlCreateLocation"
-              class="btn role-primary"
-              :data-testid="componentTestid+'-create-yaml'"
-            >
-              {{ t("resourceList.head.createFromYaml") }}
-            </router-link> -->
-          </slot>
-        </div>
-      </slot>
-    </div>
   </header>
 </template>
 
 <style lang="scss" scoped>
+
   .title {
     /* align-items: center;
     display: flex; */
@@ -285,8 +338,10 @@ export default {
       'title actions'
       'sub-header sub-header'
       'state-banner state-banner'; */
-      position: relative;
-      display: unset;
+    position: relative;
+    display: flex;
+    margin-bottom: 16px;
+    flex-direction: column;
   }
   .excram-list{
     font-size: 14px;
@@ -303,11 +358,18 @@ export default {
   }
   .masthod-title-description{
     font-family: 'Microsoft YaHei';
-    margin: 20px 0px;
+    margin-top: 20px;
   }
   .actions-container{
     /* display: flex; */
     /* margin-left: 0px; */
-    position: absolute;
+  }
+
+  .sub-header {
+    font-size: 16px;
+    margin-left: 5px;
+    .btn {
+      text-align: left !important;
+    }
   }
 </style>

package/components/ResourceList/ResourceLoadingIndicator.vue

@@ -77,7 +77,7 @@ export default {
 <template>
   <div
     v-if="count && !haveAll"
-    class="ml-10 resource-loading-indicator"
+    class="resource-loading-indicator"
   >
     <div class="inner">
       <div class="resource-loader">
@@ -118,10 +118,12 @@ export default {
     .resource-loader {
       padding: 1px 10px;
       width: max-content;
+      height: 20px;
 
       .rl-fg, .rl-bg {
-        align-content: center;
         display: flex;
+        align-content: center;
+        font-size: 12px;
 
         > i {
           font-size: 18px;
@@ -129,6 +131,7 @@ export default {
         }
 
         > span {
+          margin-top: 2px;
           margin-left: 5px;
         }
       }

package/components/ResourceTable.vue

@@ -4,6 +4,7 @@ import { get } from '@shell/utils/object';
 import { mapPref, GROUP_RESOURCES } from '@shell/store/prefs';
 import ButtonGroup from '@shell/components/ButtonGroup';
 import SortableTable from '@shell/components/SortableTable';
+import MastheadBtn from '@shell/components/ResourceList/Masthead-btn.vue';
 import { NAMESPACE, AGE } from '@shell/config/table-headers';
 import { findBy } from '@shell/utils/array';
 import { ExtensionPoint, TableColumnLocation } from '@shell/core/types';
@@ -43,7 +44,7 @@ export default {
 
   emits: ['clickedActionButton'],
 
-  components: { ButtonGroup, SortableTable },
+  components: { ButtonGroup, SortableTable, MastheadBtn },
 
   props: {
     schema: {
@@ -51,6 +52,11 @@ export default {
       default: null,
     },
 
+    schemaBtn: {
+      type:    Object,
+      default: null,
+    },
+
     rows: {
       type:     Array,
       required: true
@@ -212,6 +218,49 @@ export default {
       type:    String,
       default: '名称'
     },
+
+    resource: {
+      type:     String,
+      required: true,
+    },
+
+    typeDisplay: {
+      type:    String,
+      default: null,
+    },
+    isCreatable: {
+      type:    Boolean,
+      default: null,
+    },
+    isYamlCreatable: {
+      type:    Boolean,
+      default: null,
+    },
+    createLocation: {
+      type:    Object,
+      default: null,
+    },
+    yamlCreateLocation: {
+      type:    Object,
+      default: null,
+    },
+    createButtonLabel: {
+      type:    String,
+      default: null
+    },
+    /**
+     * Inherited global identifier prefix for tests
+     * Define a term based on the parent component to avoid conflicts on multiple components
+     */
+    componentTestid: {
+      type:    String,
+      default: 'masthead'
+    },
+
+    mainButtonVisible: {
+      type:    Boolean,
+      default: false
+    },
   },
 
   data() {
@@ -641,6 +690,32 @@ export default {
     @group-value-change="group = $event"
     @enter="handleEnterKeyPress"
   >
+
+    <template #search-main-button>
+      <MastheadBtn
+        v-if="mainButtonVisible"
+        :schema="schemaBtn"
+        :resource="resource"
+        :create-button-label="createButtonLabel"
+        :yaml-create-button-label="yamlCreateLocation"
+        :create-location="createLocation"
+        :is-yaml-creatable="isYamlCreatable"
+        :is-creatable="isCreatable"
+        :type-display="typeDisplay"
+        :component-testid="componentTestid"
+      >
+      
+        <template #extraActions>
+          <slot name="extraActions" />
+        </template>
+
+        <template #createButton>
+          <slot name="createButton" />
+        </template>
+
+      </ MastheadBtn>
+    </template>
+
     <template
       v-if="showGrouping && _groupOptions.length > 1"
       #header-middle

package/components/SideNav.vue

@@ -21,6 +21,8 @@ import { NAME as NAVLINKS } from '@shell/config/product/navlinks';
 import Group from '@shell/components/nav/Group';
 import LocaleSelector from '@shell/components/LocaleSelector';
 import { cloud2harvesterhci, harvester2cloud } from '@shell/utils/router';
+import { NORMAN } from '@shell/config/types';
+
 
 export default {
   name:       'SideNav',
@@ -113,10 +115,14 @@ export default {
 
   computed: {
     ...mapState(['managementReady', 'clusterReady']),
-    ...mapGetters(['isStandaloneHarvester', 'productId', 'clusterId', 'currentProduct', 'rootProduct', 'isSingleProduct', 'namespaceMode', 'isExplorer', 'isVirtualCluster']),
+    ...mapGetters(['isStandaloneHarvester', 'productId', 'clusterId', 'currentProduct', 'rootProduct', 'currentCluster', 'isSingleProduct', 'namespaceMode', 'isExplorer', 'isVirtualCluster']),
     ...mapGetters({ locale: 'i18n/selectedLocaleLabel', hasMultipleLocales: 'i18n/hasMultipleLocales' }),
     ...mapGetters('type-map', ['activeProducts']),
 
+    principal() {
+      return this.$store.getters['rancher/byId'](NORMAN.PRINCIPAL, this.$store.getters['auth/principalId']) || {};
+    },
+
     favoriteTypes: mapPref(FAVORITE_TYPES),
 
     supportLink() {
@@ -185,6 +191,12 @@ export default {
     allNavLinksIds() {
       return this.allNavLinks.map((a) => a.id);
     },
+
+    prod() {
+      const name = this.rootProduct.name;
+
+      return this.$store.getters['i18n/withFallback'](`product."${ name }"`, null, ucFirst(name));
+    },
   },
 
   methods: {
@@ -232,9 +244,32 @@ export default {
 
       replaceWith(this.groups, ...sortBy(out, ['weight:desc', 'label']));
 
+      // if (this.principal.loginName !== 'admin') {
+      //   // 递归过滤函数（根据 label）
+      //   this.groups = this.filterMenus(this.groups);
+      // }
+      
+
       this.gettingGroups = false;
     },
 
+    // filterMenus(menus) {
+    //   return menus
+    //     .filter(item => item.label !== 'RBAC') // 过滤掉顶层 RBAC
+    //     .map(item => {
+    //       let newItem = { ...item };
+    //       if (newItem.children) {
+    //         // 过滤掉 children 里的 "资源大盘"
+    //         newItem.children = newItem.children.filter(
+    //           child => child.label !== '资源大盘'
+    //         );
+    //         // 递归处理剩下的 children
+    //         newItem.children = filterMenus(newItem.children);
+    //       }
+    //       return newItem;
+    //     });
+    // },
+
     getProductsGroups(out, loadProducts, namespaceMode, productMap) {
       const clusterId = this.$store.getters['clusterId'];
       const currentType = this.$route.params.resource || '';
@@ -400,56 +435,58 @@ export default {
     role="navigation"
     :aria-label="t('nav.ariaLabel.sideNav')"
   >
-  <div class="side-all-title">
-          控制台
-  </div>
+    <div class="side-all-title">
+      {{ prod == 'Cloud' && currentCluster ? '控制台' : prod }}
+    </div>
+
     <!-- Actual nav -->
     <div class="nav">
       <template
-        v-for="(g) in groups"
-        :key="g.name"
+      v-for="(g) in groups"
+      :key="g.name"
       >
-        <Group
-          ref="groups"
-          id-prefix=""
-          class="package"
-          :group="g"
-          :can-collapse="!g.isRoot"
-          :show-header="!g.isRoot"
-          @selected="groupSelected($event)"
-          @expand="groupSelected($event)"
-        />
+        <template v-if="principal.loginName && principal.loginName !== 'admin' && g.label === 'RBAC'">
+        </template>
+        <template v-else>
+          <Group
+            ref="groups"
+            id-prefix=""
+            class="package"
+            :group="g"
+            :can-collapse="!g.isRoot"
+            :show-header="!g.isRoot"
+            @selected="groupSelected($event)"
+            @expand="groupSelected($event)"
+          />
+        </template>
       </template>
     </div>
     <!-- SideNav footer area (seems to be tied to harvester) -->
     <!-- <div
       v-if="showProductFooter"
       class="footer"
-    > -->
-      <!-- support link -->
-      <!-- <router-link
+    >
+      <router-link
         :to="supportLink"
         class="pull-right"
         role="link"
         :aria-label="t('nav.support', {hasSupport: true})"
       >
         {{ t('nav.support', {hasSupport: true}) }}
-      </router-link> -->
-      <!-- version number -->
-      <!-- <span
+      </router-link>
+      <span
         v-clean-tooltip="{content: displayVersion, placement: 'top'}"
         class="clip version text-muted"
       >
         {{ displayVersion }}
-      </span> -->
+      </span>
 
-      <!-- locale selector -->
-      <!-- <LocaleSelector
+      <LocaleSelector
         v-if="isSingleProduct && hasMultipleLocales && !isStandaloneHarvester"
         mode="login"
         :show-icon="false"
-      /> -->
-    <!-- </div> -->
+      />
+    </div> -->
     <!-- SideNav footer alternative -->
     <!-- <div
       v-else
@@ -479,6 +516,7 @@ export default {
 <style lang="scss" scoped>
   .side-nav {
     display: flex;
+    z-index: 10;
     flex-direction: column;
     .nav {
       flex: 1;
@@ -498,9 +536,8 @@ export default {
 
       A { padding-left: 0; }
     }
-    :deep() A{
+    :deep() A:not(.menuRouterLink){
       height: 50px;
-      background-color: #fff;
     }
 
     .tools {

package/components/SortableTable/THead.vue

@@ -274,6 +274,12 @@ export default {
             class="content"
           >
             <span
+              v-if="(col.name === 'harvester' || col.name === 'explorer') && col.label === ' '"
+            >
+              管理
+            </span>
+            <span
+              v-if="!((col.name === 'harvester' || col.name === 'explorer') && col.label === ' ')"
               v-clean-html="labelFor(col)"
               class="text-no-break"
             />