dashboard-shell-shell 1.0.10000011122 → 1.6.0-alpha.2

package/components/{rancherResourceDetail/index.vue → ResourceDetail/legacy.vue}

@@ -12,11 +12,10 @@ import Masthead from '@shell/components/ResourceDetail/Masthead';
 import DetailTop from '@shell/components/DetailTop';
 import { clone, diff } from '@shell/utils/object';
 import IconMessage from '@shell/components/IconMessage';
-import ForceDirectedTreeChart from '@shell/components/fleet/ForceDirectedTreeChart';
+import ForceDirectedTreeChart from '@shell/components/ForceDirectedTreeChart';
 import { checkSchemasForFindAllHash } from '@shell/utils/auth';
 import { stringify } from '@shell/utils/error';
 import { Banner } from '@components/Banner';
-import { harvesterhci2cloud, cloud2harvesterhci } from '@shell/utils/router'
 
 function modeFor(route) {
   if ( route.query?.mode === _IMPORT ) {
@@ -95,8 +94,7 @@ export default {
     const store = this.$store;
     const route = this.$route;
     const params = route.params;
-    const cloneParams = clone(params)
-    let resourceType = this.resourceOverride || cloneParams.resource;
+    let resourceType = this.resourceOverride || params.resource;
 
     const inStore = this.storeOverride || store.getters['currentStore'](resourceType);
     const realMode = this.realMode;
@@ -405,6 +403,16 @@ export default {
     closeError(index) {
       this.errors = this.errors.filter((_, i) => i !== index);
     },
+    onYamlError(err) {
+      this.errors = [];
+      const errors = Array.isArray(err) ? err : [err];
+
+      errors.forEach((e) => {
+        if (this.errors.indexOf(e) === -1) {
+          this.errors.push(e);
+        }
+      });
+    },
     /**
      * Initializes the resource components based on the provided user and
      * resource override.
@@ -420,9 +428,7 @@ export default {
      */
     configureResource(userId = '', resourceOverride = null) {
       const id = userId || this.$route.params.id;
-      // const paramsResource = this.$route.params.resource
-      const routerResource = clone(this.$route.params.resource)
-      const resource = resourceOverride || this.resourceOverride || routerResource;
+      const resource = resourceOverride || this.resourceOverride || this.$route.params.resource;
       const options = this.$store.getters[`type-map/optionsFor`](resource);
 
       const detailResource = options.resourceDetail || options.resource || resource;
@@ -457,14 +463,8 @@ export default {
 </script>
 
 <template>
-
-  <!-- 如果数据还在加载中，或者资源未找到，则显示 Loading 组件 -->
   <Loading v-if="$fetchState.pending || notFound" />
-
-  <!-- 数据加载完成且资源存在时 -->
-  <div style="padding: 20px 0 20px 20px;height: 100%;" v-else>
-
-    <!-- 顶部 Masthead 区域 -->
+  <div style="padding: 20px;height: 100%;" v-else>
     <Masthead
       v-if="showMasthead"
       :resource="resourceType"
@@ -475,28 +475,22 @@ export default {
       :has-graph="hasGraph"
       :has-detail="hasCustomDetail"
       :has-edit="hasCustomEdit"
-      :can-view-yaml="canViewYaml"
       :resource-subtype="resourceSubtype"
       :parent-route-override="parentRouteOverride"
       :store-override="storeOverride"
-    >
 
-      <!-- 详情顶部信息，仅在查看模式且是详情页面时显示 -->
+      :isManuallyHide="false"
+    >
       <!-- <DetailTop
         v-if="isView && isDetail"
         :value="liveModel"
       /> -->
     </Masthead>
-
-
-    <!-- 错误信息显示区域 -->
     <div
       v-if="hasErrors"
       id="cru-errors"
       class="cru__errors"
     >
-
-      <!-- 循环渲染错误 Banner -->
       <Banner
         v-for="(err, i) in errors"
         :key="i"
@@ -509,14 +503,12 @@ export default {
       />
     </div>
 
-    <!-- 力导向图模式 -->
     <ForceDirectedTreeChart
       v-if="isGraph && canViewChart"
       :data="chartData"
       :fdc-config="getGraphConfig"
     />
 
-    <!-- YAML 查看/编辑模式 -->
     <ResourceYaml
       v-else-if="isYaml"
       ref="resourceyaml"
@@ -530,27 +522,24 @@ export default {
       @error="e=>errors.push(e)"
     />
 
-    <!-- 动态组件渲染，根据 showComponent 动态选择组件 -->
     <component
-      :is="showComponent"
-      v-else
-      ref="comp"
-      v-model:value="value"
-      v-bind="$data"
-      :done-params="doneParams"
-      :done-route="doneRoute"
-      :mode="mode"
-      :initial-value="initialModel"
-      :live-value="liveModel"
-      :real-mode="realMode"
-      :class="{'flex-content': flexContent}"
-      @update:value="$emit('input', $event)"
-      @update:mode="setMode"
-      @set-subtype="setSubtype"
+    :is="showComponent"
+    v-else
+    ref="comp"
+    v-model:value="value"
+    v-bind="$data"
+    :done-params="doneParams"
+    :done-route="doneRoute"
+    :mode="mode"
+    :initial-value="initialModel"
+    :live-value="liveModel"
+    :real-mode="realMode"
+    :class="{'flex-content': flexContent}"
+    @update:value="$emit('input', $event)"
+    @update:mode="setMode"
+    @set-subtype="setSubtype"
     />
 
-
-    <!-- 快捷键按钮（隐藏） -->
     <button
       v-if="isView"
       v-shortkey.once="['shift','d']"

package/components/ResourceList/Masthead.vue

@@ -6,7 +6,6 @@ import { get } from '@shell/utils/object';
 import { AS, _YAML } from '@shell/config/query-params';
 import ResourceLoadingIndicator from './ResourceLoadingIndicator';
 import TabTitle from '@shell/components/TabTitle';
-import { harvesterhci2cloud, cloud2harvesterhci } from '@shell/utils/router'
 
 /**
  * Resource List Masthead component.
@@ -15,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,
@@ -80,14 +91,17 @@ export default {
     componentTestid: {
       type:    String,
       default: 'masthead'
-    }
+    },
+
+    mainButtonVisible: {
+      type:    Boolean,
+      default: true
+    },
   },
 
   data() {
     const params = { ...this.$route.params };
 
-    params.resource = params.resource
-
     const formRoute = { name: `${ this.$route.name }-create`, params };
 
     const hasEditComponent = this.$store.getters['type-map/hasCustomEdit'](this.resource);
@@ -99,11 +113,15 @@ export default {
     };
 
     const tabList = ['集群配置'];
+
+    const description = ''
     return {
       formRoute,
       yamlRoute,
       hasEditComponent,
       tabList,
+      description,
+      resizeObserver: null
     };
   },
 
@@ -128,8 +146,6 @@ 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() {
@@ -138,21 +154,58 @@ export default {
       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 productId = this.$store.getters['type-map/groupForBasicType'](this.$store.getters['productId'], this._createLocation?.params?.resource);
+      console.log(product, 'product')
+      console.log(productId, 'productId')
+      console.log(this._createLocation?.params?.resource, 'this._createLocation?.params?.resource')
+
+      const parts = productId?.split('::') || [];
       const newString = 'root';
 
-      if (!parts.includes(newString)) {
-        parts.unshift(newString); // 将字符串添加到数组第一位
+      if (!parts) {
+        if (this.$route.path.includes('/c/local/explorer/secret')) {
+          parts = ['storage']          
+        }
+      }
+      
+      const breadcrumbList = {
+        'harvesterhci.io.management.cluster': {
+          origin: 'Harvester 集群',
+          bread: ['虚拟化管理'],
+        },
+        'management.cattle.io.user': {
+          origin: '用户',
+          bread: ['用户 & 认证'],
+        },
+        'management.cattle.io.setting':{
+          origin: '基础设置',
+          bread: ['全局设置'],
+        },
+        'management.cattle.io.feature':{
+          origin: '功能开关',
+          bread: ['全局设置'],
+        },
+      }
+      const resourcePath = this.$route.params.resource || ''
+      
+      const breadcrumb = []
+      if (breadcrumbList[resourcePath] && Object.keys(breadcrumbList[resourcePath]).length > 0) {
+        breadcrumb.push(...breadcrumbList[resourcePath].bread)
+        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;
       }
 
-      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() }"`)
     },
 
     _isYamlCreatable() {
@@ -186,83 +239,122 @@ export default {
     },
 
     _createButtonlabel() {
+      const overrideLabel = this.$store.getters['type-map/optionsFor'](this.resource).listCreateButtonLabelKey;
+
+      if (overrideLabel) {
+        return this.t(overrideLabel);
+      }
+
       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
+
+          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">
-      <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="_descriptionDisplay" class="masthod-title-description">
+            {{ _descriptionDisplay }}
+          </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 
+        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>
-      <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>
 
@@ -285,8 +377,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 +397,24 @@ export default {
   }
   .masthod-title-description{
     font-family: 'Microsoft YaHei';
-    margin: 20px 0px;
+    margin-top: 20px;
   }
   .actions-container{
     /* display: flex; */
     /* margin-left: 0px; */
+  }
+
+  .sub-header {
+    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/ResourceList/index.vue

@@ -9,7 +9,7 @@ import { ResourceListComponentName } from './resource-list.config';
 import { PanelLocation, ExtensionPoint } from '@shell/core/types';
 import ExtensionPanel from '@shell/components/ExtensionPanel';
 import { sameContents } from '@shell/utils/array';
-import { cloud2harvesterhci } from '@shell/utils/router'
+import perfSettingsUtils from '@shell/utils/perf-setting.utils';
 
 export default {
   name: ResourceListComponentName,
@@ -100,6 +100,7 @@ export default {
 
     return {
       schema,
+      overrideInStore:                  undefined,
       hasListComponent,
       showMasthead:                     showMasthead === undefined ? true : showMasthead,
       resource,
@@ -139,7 +140,7 @@ export default {
     },
 
     showIncrementalLoadingIndicator() {
-      return this.perfConfig?.incrementalLoading?.enabled;
+      return perfSettingsUtils.incrementalLoadingUtils.isEnabled(this.calcCanPaginate(), this.perfConfig);
     },
 
   },