dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-test.2

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,
@@ -91,8 +102,6 @@ export default {
   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);
@@ -111,7 +120,8 @@ export default {
       yamlRoute,
       hasEditComponent,
       tabList,
-      description
+      description,
+      resizeObserver: null
     };
   },
 
@@ -144,21 +154,18 @@ 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 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';
 
-      // 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': {
@@ -188,9 +195,19 @@ export default {
       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;
       }
 
-      return breadcrumb
     },
 
     _isYamlCreatable() {
@@ -224,14 +241,40 @@ 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
+
+          console.log(width, ' width----------------------------')
+
+          this.$store.commit('type-map/setActionsWidth', width)
+        }
+      })
+
+      // 开始监听
+      this.resizeObserver.observe(el)
+    }
   }
 };
 </script>
 
 <template>
-  <!-- 顶部 header，带有子标题（subheader）样式类 -->
   <header class="with-subheader">
     <div style="display: flex;width: 100%;">
       <div style="flex: 1;">
@@ -270,19 +313,20 @@ export default {
           </h1>
           
           <!-- 插槽：typeDescription，用于插入类型描述组件 -->
-          <div v-if="description" class="masthod-title-description">
-            {{ description }}
+          <div v-if="_descriptionDisplay" class="masthod-title-description">
+            {{ _descriptionDisplay }}
           </div>
   
         </div>
     
 
       </div>
-  
+      
       <!-- 操作按钮区域 -->
       <div 
+        ref="actionsContainer"
         v-if="!(tabList.includes(_typeDisplay)) && mainButtonVisible"
-        class="actions-container"
+        class="actions-container actions-positioning"
         style="min-height: 32px;align-self: flex-end;"
       >
         <slot name="actions">
@@ -319,7 +363,6 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-
   .title {
     /* align-items: center;
     display: flex; */
@@ -372,4 +415,10 @@ export default {
       text-align: left !important;
     }
   }
+
+  .actions-positioning {
+    position: absolute;
+    bottom: -48px;
+    z-index: 20;
+  }
 </style>

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);
     },
 
   },

package/components/ResourceTable.vue

@@ -4,11 +4,13 @@ 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';
 import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
+import { ToggleSwitch } from '@components/Form/ToggleSwitch';
+import ResourceTableWatch from '@shell/mixins/resource-table-watch';
+import paginationUtils from '@shell/utils/pagination-utils';
 
 // Default group-by in the case the group stored in the preference does not apply
 const DEFAULT_GROUP = 'namespace';
@@ -44,15 +46,22 @@ export default {
 
   emits: ['clickedActionButton'],
 
-  components: { ButtonGroup, SortableTable, MastheadBtn },
+  components: {
+    ButtonGroup, SortableTable, ToggleSwitch
+  },
+
+  mixins: [
+    ResourceTableWatch
+  ],
 
   props: {
-    schema: {
-      type:    Object,
-      default: null,
+    searchPlaceholder: {
+      // search框内的输入提示
+      type:    String,
+      default: '名称'
     },
-
-    schemaBtn: {
+    
+    schema: {
       type:    Object,
       default: null,
     },
@@ -213,59 +222,17 @@ export default {
       type:    Number,
       default: null, // Default comes from the user preference
     },
-    searchPlaceholder: {
-      // search框内的输入提示
-      type:    String,
-      default: '名称'
-    },
 
-    resource: {
-      type:     String,
-      required: true,
-    },
-
-    typeDisplay: {
+    overrideInStore: {
       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'
+      default: undefined,
     },
 
-    mainButtonVisible: {
-      type:    Boolean,
-      default: false
-    },
   },
 
   data() {
     // Confirm which store we're in, if schema isn't available we're probably showing a list with different types
-    const inStore = this.schema?.id ? this.$store.getters['currentStore'](this.schema.id) : undefined;
+    const inStore = this.overrideInStore || (this.schema?.id ? this.$store.getters['currentStore'](this.schema.id) : undefined);
 
     return {
       inStore,
@@ -275,7 +242,8 @@ export default {
        * Primary purpose is to directly connect an iteration of `rows` with a sortGeneration string. This avoids
        * reactivity issues where `rows` hasn't yet changed but something like workspaces has (stale values stored against fresh key)
        */
-      sortGeneration: undefined
+      sortGeneration:               undefined,
+      listAutoRefreshToggleEnabled: paginationUtils.listAutoRefreshToggleEnabled({ rootGetters: this.$store.getters }),
     };
   },
 
@@ -291,10 +259,15 @@ export default {
         }
       },
       immediate: true
-    }
+    },
+
   },
 
   computed: {
+    actionsWidth() {
+      return this.$store.getters['type-map/actionsWidth'] // 从 getter 里拿
+    },
+
     options() {
       return this.$store.getters[`type-map/optionsFor`](this.schema, this.externalPaginationEnabled);
     },
@@ -482,8 +455,6 @@ export default {
         return this._group;
       },
       set(value) {
-        console.log('_group:===='+value);
-        
         this._group = value;
       }
     },
@@ -494,12 +465,13 @@ export default {
         const customGroupable = !!this.options?.listGroups?.length;
 
         // sshkey去掉分组按钮
-      if(this.parsedPagingParams.singularLabel === 'SSH Key' || this.parsedPagingParams.singularLabel === '负载均衡器'){
-        return false
-      }
+        if(this.parsedPagingParams.singularLabel === 'SSH Key' || this.parsedPagingParams.singularLabel === '负载均衡器'){
+          return false
+        }
 
         return namespaceGroupable || customGroupable || this.groupOptions?.length;
       }
+
       return this.groupable || false;
     },
 
@@ -587,7 +559,6 @@ export default {
         pluralLabel:   this.$store.getters['type-map/labelFor'](this.schema, 99),
       };
     },
-
   },
 
   methods: {
@@ -648,8 +619,9 @@ export default {
       if (event.key === 'Enter') {
         this.keyAction('detail');
       }
-    }
-  },
+    },
+
+  }
 };
 </script>
 
@@ -692,28 +664,7 @@ export default {
   >
 
     <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>
+      <div :style="{ width: actionsWidth + 'px' }"></div>
     </template>
 
     <template
@@ -733,7 +684,24 @@ export default {
       v-if="showGrouping"
       #header-right
     >
-      <slot name="header-right" />
+      <slot
+        name="header-right"
+      />
+    </template>
+
+    <template
+      v-if="externalPaginationEnabled"
+      #watch-controls
+    >
+      <!-- See https://github.com/rancher/dashboard/issues/14359 -->
+      <ToggleSwitch
+        v-if="listAutoRefreshToggleEnabled"
+        class="auto-update"
+        :value="watching"
+        name="label-system-toggle"
+        :on-label="t('resourceTable.autoRefresh.label')"
+        @update:value="toggleWatch"
+      />
     </template>
 
     <template #group-by="{group: thisGroup}">
@@ -781,3 +749,9 @@ export default {
     </template>
   </SortableTable>
 </template>
+
+<style lang="scss" scoped>
+.auto-update {
+  min-width: 150px; height: 40px
+}
+</style>

package/components/ResourceYaml.vue

@@ -73,6 +73,11 @@ export default {
       default: true
     },
 
+    showErrors: {
+      type:    Boolean,
+      default: true
+    },
+
     applyHooks: {
       type:    Function,
       default: null,
@@ -229,7 +234,7 @@ export default {
         }
 
         try {
-          await this.value.saveYaml(yaml);
+          await this.value.saveYaml(yaml, this.initialYaml);
         } catch (err) {
           return onError.call(this, err);
         }
@@ -289,6 +294,13 @@ export default {
       }
     },
 
+    refresh() {
+      this.$refs.yamleditor.refresh();
+    },
+
+    closeError(index) {
+      this.errors = (this.errors || []).filter((_, i) => i !== index);
+    },
   }
 };
 </script>
@@ -318,7 +330,8 @@ export default {
         class="footer"
         :class="{ 'edit': !isView }"
         :mode="mode"
-        :errors="errors"
+        :errors="showErrors ? errors : []"
+        @close-error="closeError"
         @save="save"
         @done="done"
       >

package/components/RichTranslation.vue

@@ -0,0 +1,106 @@
+<script lang="ts">
+import { defineComponent, h, VNode } from 'vue';
+import { useStore } from 'vuex';
+import { purifyHTML } from '@shell/plugins/clean-html';
+
+const ALLOWED_TAGS = ['b', 'i', 'span', 'a']; // Add more as needed
+
+/**
+ * A component for rendering translated strings with embedded HTML and custom Vue components.
+ *
+ * This component allows you to use a single translation key for a message that contains
+ * both standard HTML tags (like <b>, <i>, etc.) and custom Vue components (like <router-link>).
+ *
+ * @example
+ * // In your translation file (e.g., en-us.yaml):
+ * my:
+ *   translation:
+ *     key: 'This is a <b>bold</b> statement with a <customLink>link</customLink>.'
+ *
+ * // In your Vue component:
+ * <RichTranslation k="my.translation.key">
+ *   <template #customLink="{ content }">
+ *     <router-link to="{ name: 'some-path' }">{{ content }}</router-link>
+ *   </template>
+ * </RichTranslation>
+ */
+export default defineComponent({
+  name:  'RichTranslation',
+  props: {
+    /**
+     * The translation key for the message.
+     */
+    k: {
+      type:     String,
+      required: true,
+    },
+    /**
+     * The HTML tag to use for the root element.
+     */
+    tag: {
+      type:    String,
+      default: 'span'
+    },
+  },
+  setup(props, { slots }) {
+    const store = useStore();
+
+    return () => {
+    // Get the raw translation string, without any processing.
+      const rawStr = store.getters['i18n/t'](props.k, {}, true);
+
+      if (!rawStr || typeof rawStr !== 'string') {
+        return h(props.tag, {}, [rawStr]);
+      }
+
+      // This regex splits the string by the custom tags, keeping the tags in the resulting array.
+      const regex = /<([a-zA-Z0-9]+)>(.*?)<\/\1>|<([a-zA-Z0-9]+)\/>/g;
+      const children: (VNode | string)[] = [];
+      let lastIndex = 0;
+      let match;
+
+      // Iterate over all matches of the regex.
+      while ((match = regex.exec(rawStr)) !== null) {
+        // Add the text before the current match as a plain text node.
+        if (match.index > lastIndex) {
+          children.push(h('span', { innerHTML: purifyHTML(rawStr.substring(lastIndex, match.index)) }));
+        }
+
+        const enclosingTagName = match[1]; // Captures the tag name for enclosing tags (e.g., 'customLink' from <customLink>...</customLink>)
+        const selfClosingTagName = match[3]; // Captures the tag name for self-closing tags (e.g., 'anotherTag' from <anotherTag/>)
+        const tagName = enclosingTagName || selfClosingTagName;
+
+        if (tagName) {
+          const content = enclosingTagName ? match[2] : '';
+
+          if (slots[tagName]) {
+            // If a slot is provided for this tag, render the slot with the content.
+            children.push(slots[tagName]({ content: purifyHTML(content) }));
+          } else if (ALLOWED_TAGS.includes(tagName.toLowerCase())) {
+            // If it's an allowed HTML tag, render it directly.
+            if (content) {
+              children.push(h(tagName, { innerHTML: purifyHTML(content, { ALLOWED_TAGS }) }));
+            } else {
+              children.push(h(tagName));
+            }
+          } else {
+            // Otherwise, render the tag and its content as plain HTML.
+            children.push(h('span', { innerHTML: purifyHTML(match[0]) }));
+          }
+        }
+
+        // Update the last index to continue searching after the current match
+        lastIndex = regex.lastIndex;
+      }
+
+      // Add any remaining text after the last match.
+      if (lastIndex < rawStr.length) {
+        children.push(h('span', { innerHTML: purifyHTML(rawStr.substring(lastIndex)) }));
+      }
+
+      // Render the root element with the processed children.
+      return h(props.tag, {}, children);
+    };
+  }
+});
+</script>