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

package/components/ResourceList/Masthead.vue

@@ -14,6 +14,18 @@ export default {
 
   name: 'MastheadResourceList',
 
+  mounted() {
+    this.observeWidth()
+  },
+
+  beforeUnmount() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+      this.resizeObserver = null
+    }
+    this.$store.commit('type-map/setActionsWidth', 0) // 销毁时清空或回到默认值
+  },
+
   components: {
     Favorite,
     TypeDescription,
@@ -79,7 +91,12 @@ export default {
     componentTestid: {
       type:    String,
       default: 'masthead'
-    }
+    },
+
+    mainButtonVisible: {
+      type:    Boolean,
+      default: true
+    },
   },
 
   data() {
@@ -95,10 +112,16 @@ export default {
       query: { [AS]: _YAML },
     };
 
+    const tabList = ['集群配置'];
+
+    const description = ''
     return {
       formRoute,
       yamlRoute,
       hasEditComponent,
+      tabList,
+      description,
+      resizeObserver: null
     };
   },
 
@@ -125,6 +148,67 @@ export default {
 
       return this.$store.getters['type-map/labelFor'](this.schema, 99);
     },
+    _descriptionDisplay() {
+      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';
+
+      // 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';
+
+      
+      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
+        return breadcrumb
+      } else {
+        if (!parts?.includes(newString)) {
+          parts?.unshift(newString); // 将字符串添加到数组第一位
+        }
+        
+        const partsEn = parts?.map((item) => {  
+          return this.$store.getters['i18n/t'](`typeLabel."${ item.toLowerCase() }"`);
+        });
+
+        return partsEn;
+      }
+
+    },
 
     _isYamlCreatable() {
       if ( this.isYamlCreatable !== null) {
@@ -165,88 +249,176 @@ export default {
 
       return this.createButtonLabel || this.t('resourceList.head.create');
     },
+  },
+
+  methods: {
+    observeWidth() {
+      const el = this.$refs.actionsContainer
+      if (!el) return
+
+      // 创建 ResizeObserver
+      this.resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const width = entry?.contentRect?.width && entry.contentRect.width > 0 ? entry.contentRect.width + 10 : 0
+
+          console.log(width, ' width----------------------------')
+
+          this.$store.commit('type-map/setActionsWidth', width)
+        }
+      })
+
+      // 开始监听
+      this.resizeObserver.observe(el)
+    }
   }
 };
 </script>
 
 <template>
   <header class="with-subheader">
-    <slot name="typeDescription">
-      <TypeDescription :resource="resource" />
-    </slot>
-    <div class="title">
-      <h1 class="m-0">
-        <TabTitle>{{ _typeDisplay }}</TabTitle> <Favorite
-          v-if="isExplorer"
-          :resource="favoriteResource || resource"
-        />
-      </h1>
-      <ResourceLoadingIndicator
-        v-if="showIncrementalLoadingIndicator"
-        :resources="loadResources"
-        :indeterminate="loadIndeterminate"
-      />
-    </div>
-    <div class="sub-header">
-      <slot name="subHeader">
-        <!--Slot content-->
-      </slot>
-    </div>
-    <div class="actions-container">
-      <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'"
+    <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"
             >
-              {{ t("resourceList.head.createFromYaml") }}
-            </router-link>
-          </slot>
+              <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="_descriptionDisplay" class="masthod-title-description">
+            {{ _descriptionDisplay }}
+          </div>
+  
         </div>
-      </slot>
+    
+
+      </div>
+      
+      <!-- 操作按钮区域 -->
+      <div 
+        ref="actionsContainer"
+        v-if="!(tabList.includes(_typeDisplay))"
+        class="actions-container actions-positioning"
+        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>
     </div>
+    <div
+      v-if="!(tabList.includes(_typeDisplay))"
+      style="width: 110%;height: 1px;background-color: #D7D7D7;margin-top: 16px;margin-left: -20px;margin-right: -20px;"
+    />
   </header>
 </template>
 
 <style lang="scss" scoped>
   .title {
-    align-items: center;
-    display: flex;
+    /* align-items: center;
+    display: flex; */
     h1 {
       margin: 0;
     }
   }
 
   header {
-    margin-bottom: 20px;
+    /* margin-bottom: 20px; */
   }
 
   header.with-subheader {
-    grid-template-areas:
+    /* grid-template-areas:
       'type-banner type-banner'
       'title actions'
       'sub-header sub-header'
-      'state-banner state-banner';
+      'state-banner state-banner'; */
+    position: relative;
+    display: flex;
+    margin-bottom: 16px;
+    flex-direction: column;
+  }
+  .excram-list{
+    font-size: 14px;
+    line-height: 22px;
+    margin-bottom: 20px;
+    font-family: 'Microsoft YaHei';
+  }
+  .excram-last-name{
+    color: var(--primary);
+  }
+  .descrip-name{
+    font-size: 26px;
+    font-family: 'Microsoft YaHei';
+  }
+  .masthod-title-description{
+    font-family: 'Microsoft YaHei';
+    margin-top: 20px;
+  }
+  .actions-container{
+    /* display: flex; */
+    /* margin-left: 0px; */
   }
 
   .sub-header {
-    grid-area: sub-header;
-
-    a {
-      display: inline-block;
+    font-size: 16px;
+    margin-left: 5px;
+    .btn {
+      text-align: left !important;
     }
   }
+
+  .actions-positioning {
+    position: absolute;
+    bottom: -48px;
+    z-index: 15;
+  }
 </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

@@ -55,6 +55,12 @@ export default {
   ],
 
   props: {
+    searchPlaceholder: {
+      // search框内的输入提示
+      type:    String,
+      default: '名称'
+    },
+    
     schema: {
       type:    Object,
       default: null,
@@ -258,6 +264,10 @@ export default {
   },
 
   computed: {
+    actionsWidth() {
+      return this.$store.getters['type-map/actionsWidth'] // 从 getter 里拿
+    },
+
     options() {
       return this.$store.getters[`type-map/optionsFor`](this.schema, this.externalPaginationEnabled);
     },
@@ -454,6 +464,11 @@ export default {
         const namespaceGroupable = this.$store.getters['isMultipleNamespaces'] && this.isNamespaced;
         const customGroupable = !!this.options?.listGroups?.length;
 
+        // sshkey去掉分组按钮
+        if(this.parsedPagingParams.singularLabel === 'SSH Key' || this.parsedPagingParams.singularLabel === '负载均衡器'){
+          return false
+        }
+
         return namespaceGroupable || customGroupable || this.groupOptions?.length;
       }
 
@@ -617,6 +632,7 @@ export default {
     :headers="_headers"
     :rows="filteredRows"
     :loading="loading"
+    :search-placeholder="searchPlaceholder"
     :alt-loading="altLoading"
     :group-by="computedGroupBy"
     :group="group"
@@ -646,6 +662,11 @@ export default {
     @group-value-change="group = $event"
     @enter="handleEnterKeyPress"
   >
+
+    <template #search-main-button>
+      <div :style="{ width: actionsWidth + 'px' }"></div>
+    </template>
+
     <template
       v-if="showGrouping && _groupOptions.length > 1"
       #header-middle
@@ -655,6 +676,7 @@ export default {
       <ButtonGroup
         v-model:value="group"
         :options="_groupOptions"
+        v-if="parsedPagingParams.singularLabel !== 'PCI设备'"
       />
     </template>
 
@@ -707,11 +729,11 @@ export default {
         class="hide"
         @shortkey="keyAction('edit')"
       />
-      <button
+      <!-- <button
         v-shortkey.once="['y']"
         class="hide"
         @shortkey="keyAction('yaml')"
-      />
+      /> -->
       <button
         v-if="_showBulkActions"
         v-shortkey.once="['del']"

package/components/SideNav.vue

@@ -20,6 +20,9 @@ import { TYPE_MODES } from '@shell/store/type-map';
 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',
@@ -112,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() {
@@ -184,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: {
@@ -231,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 || '';
@@ -399,30 +435,37 @@ export default {
     role="navigation"
     :aria-label="t('nav.ariaLabel.sideNav')"
   >
+    <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
+    <!-- <div
       v-if="showProductFooter"
       class="footer"
     >
-      <!-- support link -->
       <router-link
         :to="supportLink"
         class="pull-right"
@@ -431,7 +474,6 @@ export default {
       >
         {{ t('nav.support', {hasSupport: true}) }}
       </router-link>
-      <!-- version number -->
       <span
         v-clean-tooltip="{content: displayVersion, placement: 'top'}"
         class="clip version text-muted"
@@ -439,15 +481,14 @@ export default {
         {{ displayVersion }}
       </span>
 
-      <!-- locale selector -->
       <LocaleSelector
         v-if="isSingleProduct && hasMultipleLocales && !isStandaloneHarvester"
         mode="login"
         :show-icon="false"
       />
-    </div>
+    </div> -->
     <!-- SideNav footer alternative -->
-    <div
+    <!-- <div
       v-else
       class="version text-muted flex"
     >
@@ -468,13 +509,14 @@ export default {
           (Harvester-{{ harvesterVersion }})
         </span>
       </template>
-    </div>
+    </div> -->
   </nav>
 </template>
 
 <style lang="scss" scoped>
   .side-nav {
     display: flex;
+    z-index: 10;
     flex-direction: column;
     .nav {
       flex: 1;
@@ -494,6 +536,9 @@ export default {
 
       A { padding-left: 0; }
     }
+    :deep() A:not(.menuRouterLink){
+      height: 50px;
+    }
 
     .tools {
       display: flex;
@@ -569,4 +614,13 @@ export default {
     display: flex;
   }
 
+
+  .side-all-title{
+    height: 50px;
+    line-height: 50px;
+    font-size: 16px;
+    color: #7f7f7f;
+    padding-left: 21px;
+    font-weight: bold;
+  }
 </style>