dashboard-shell-shell 1.0.122 → 1.0.1000000082

package/components/SortableTable/index.vue

@@ -1,6 +1,6 @@
 <script>
-import { mapGetters } from 'vuex';
-import { defineAsyncComponent, useTemplateRef, onMounted, onBeforeUnmount } from 'vue';
+import { mapGetters, useStore } from 'vuex';
+import { defineAsyncComponent, ref, onMounted, onBeforeUnmount } from 'vue';
 import day from 'dayjs';
 import isEmpty from 'lodash/isEmpty';
 import { dasherize, ucFirst } from '@shell/utils/string';
@@ -25,6 +25,9 @@ import { getParent } from '@shell/utils/dom';
 import { FORMATTERS } from '@shell/components/SortableTable/sortable-config';
 import ButtonMultiAction from '@shell/components/ButtonMultiAction.vue';
 import ActionMenu from '@shell/components/ActionMenuShell.vue';
+import { useRuntimeFlag } from '@shell/composables/useRuntimeFlag';
+import ActionDropdownShell from '@shell/components/ActionDropdownShell.vue';
+import { harvesterhci2cloud, cloud2harvesterhci } from '@shell/utils/router'
 
 // Uncomment for table performance debugging
 // import tableDebug from './debug';
@@ -56,12 +59,13 @@ export default {
   components: {
     THead,
     Checkbox,
-    Select,
     AsyncButton,
+    Select,
     ActionDropdown,
     LabeledSelect,
     ButtonMultiAction,
     ActionMenu,
+    ActionDropdownShell,
   },
   mixins: [
     filtering,
@@ -412,10 +416,12 @@ export default {
     const isLoading = this.loading || false;
 
     let isCreatable = false;
-    const lastPath = this.$route.path.split('/').pop();
+    const lastPath = cloud2harvesterhci(this.$route.path.split('/').pop());
 
     if (lastPath.includes('.')) {
       isCreatable = this.$store.getters['type-map/optionsFor'](lastPath).isCreatable;
+    } else if (lastPath === 'namespace') {
+      isCreatable = this.$store.getters['type-map/optionsFor'](this.$route.name).isCreatable;
     }
 
     return {
@@ -423,6 +429,7 @@ export default {
       expanded:                   {},
       searchQuery,
       eventualSearchQuery,
+      isCreatable,
       subMatches:                 null,
       actionOfInterest:           null,
       loadingDelay:               false,
@@ -487,8 +494,8 @@ export default {
     const $main = document.querySelector('main');
 
     $main?.removeEventListener('scroll', this._onScroll);
-    // 移除所有表格容器的滚动事件监听器
-    const tables = document.querySelectorAll('.sort-table-div');
+     // 移除所有表格容器的滚动事件监听器
+     const tables = document.querySelectorAll('.sort-table-div');
 
     tables.forEach((table) => {
       table.removeEventListener('scroll', this._onTableScroll);
@@ -541,6 +548,7 @@ export default {
     forceUpdateLiveAndDelayed(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
+
     selectedRowsText(neu, old) {
       if (neu) {
         this.isMuchSelected = true;
@@ -596,7 +604,7 @@ export default {
     },
   },
   setup(_props, { emit }) {
-    const table = useTemplateRef('table');
+    const table = ref(null);
 
     const handleEnterKey = (event) => {
       if (event.key === 'Enter' && !event.target?.classList?.contains('checkbox-custom')) {
@@ -611,6 +619,14 @@ export default {
     onBeforeUnmount(() => {
       table.value.removeEventListener('keyup', handleEnterKey);
     });
+
+    const store = useStore();
+    const { featureDropdownMenu } = useRuntimeFlag(store);
+
+    return {
+      table,
+      featureDropdownMenu,
+    };
   },
 
   created() {
@@ -621,6 +637,7 @@ export default {
   computed: {
     ...mapGetters({ isTooManyItemsToAutoUpdate: 'resource-fetch/isTooManyItemsToAutoUpdate' }),
     ...mapGetters({ isManualRefreshLoading: 'resource-fetch/manualRefreshIsLoading' }),
+    ...mapGetters('type-map', ['mastheadCreatable']),
     namespaces() {
       return this.$store.getters['activeNamespaceCache'];
     },
@@ -831,7 +848,7 @@ export default {
       });
 
       return rows;
-    }
+    },
   },
 
   methods: {
@@ -919,13 +936,13 @@ export default {
     },
     get,
     dasherize,
-
     muchSelect(value) {
       console.log(value);
       
       this.isMuchSelected = !this.isMuchSelected;
       this.onToggleAll(value);
     },
+
     onScroll() {
       if (this.hasLiveColumns || this.hasDelayedColumns) {
         clearTimeout(this._liveColumnsTimer);
@@ -1208,99 +1225,29 @@ export default {
     ref="container"
     :data-testid="componentTestid + '-list-container'"
   >
-  <div
-       :class="{'titled': $slots.title && $slots.title.length,  'mb-40': isFilterLabel}"
-      class="sortable-table-header mb-20"
-      :style="{marginTop: search&& !isBanner ? marginTopValue + 'px' : '0px',marginLeft: isCreatable ? '100px' : '-10px',maxHeight: '32px'}"
+    {{ mastheadCreatable }}
+    <div
+      :class="{'titled': $slots.title && $slots.title.length,  'mb-40': isFilterLabel, 'mb-20': search || isCreatable}"
+      class="sortable-table-header "
+       :style="{marginTop: search&& !isBanner ? marginTopValue + 'px' : '0px',marginLeft: isCreatable && mastheadCreatable ? '100px' : '-10px',maxHeight: '32px'}"
     >
       <slot name="title" />
       <div
         v-if="showHeaderRow"
         class="fixed-header-actions"
-        :class="{button: !!$slots['header-button'], 'advanced-filtering': hasAdvancedFiltering}"
+        :class="{button: !!$slots['header-button'], 'advanced-filtering': hasAdvancedFiltering, }"
         style="display: flex;"
       >
         <!-- <div
           :class="bulkActionsClass"
           class="bulk"
         >
-          <slot name="header-left">
-            <template v-if="tableActions">
-              <button
-                v-for="(act) in availableActions"
-                :id="act.action"
-                :key="act.action"
-                v-clean-tooltip="actionTooltip"
-                type="button"
-                class="btn role-primary"
-                :class="{[bulkActionClass]:true}"
-                :disabled="!act.enabled"
-                :data-testid="componentTestid + '-' + act.action"
-                @click="applyTableAction(act, null, $event)"
-                @keydown.enter.stop
-                @mouseover="setBulkActionOfInterest(act)"
-                @mouseleave="setBulkActionOfInterest(null)"
-              >
-                <i
-                  v-if="act.icon"
-                  :class="act.icon"
-                />
-                <span v-clean-html="act.label" />
-              </button>
-              <ActionDropdown
-                :class="bulkActionsDropdownClass"
-                class="bulk-actions-dropdown"
-                :disable-button="!selectedRows.length"
-                size="sm"
-              >
-                <template #button-content>
-                  <button
-                    ref="actionDropDown"
-                    class="btn bg-primary mr-0"
-                    :disabled="!selectedRows.length"
-                  >
-                    <i class="icon icon-gear" />
-                    <span>{{ t('sortableTable.bulkActions.collapsed.label') }}</span>
-                    <i class="ml-10 icon icon-chevron-down" />
-                  </button>
-                </template>
-                <template #popover-content>
-                  <ul class="list-unstyled menu">
-                    <li
-                      v-for="(act, i) in hiddenActions"
-                      :key="i"
-                      v-close-popper
-                      v-clean-tooltip="{
-                        content: actionTooltip,
-                        placement: 'right'
-                      }"
-                      :class="{ disabled: !act.enabled }"
-                      @click="applyTableAction(act, null, $event)"
-                      @mouseover="setBulkActionOfInterest(act)"
-                      @mouseleave="setBulkActionOfInterest(null)"
-                    >
-                      <i
-                        v-if="act.icon"
-                        :class="act.icon"
-                      />
-                      <span v-clean-html="act.label" />
-                    </li>
-                  </ul>
-                </template>
-              </ActionDropdown>
-              <label
-                v-if="selectedRowsText"
-                :class="bulkActionAvailabilityClass"
-                class="action-availability"
-              >
-                {{ selectedRowsText }}
-              </label>
-            </template>
-          </slot>
+          
         </div> -->
         <div
           v-if="!hasAdvancedFiltering && $slots['header-middle']"
           class="middle"
+          style="margin-left: 10px;margin-right: -10px;"
         >
           <slot name="header-middle" />
         </div>
@@ -1309,6 +1256,7 @@ export default {
           v-if="search || hasAdvancedFiltering || isTooManyItemsToAutoUpdate || $slots['header-right']"
           class="search row"
           data-testid="search-box-filter-row"
+          style="max-height: 32px;display: contents;"
         >
           <ul
             v-if="hasAdvancedFiltering"
@@ -1389,7 +1337,14 @@ export default {
               </div>
             </div>
           </div>
-          <slot name="header-button" />
+          <p
+            v-else-if="search"
+            id="describe-filter-sortable-table"
+            hidden
+          >
+            {{ t('sortableTable.filteringDescription') }}
+          </p>
+           <slot name="header-button" />
           <input
             v-if="search"
             ref="searchQuery"
@@ -1397,300 +1352,320 @@ export default {
             type="search"
             class="input-sm search-box"
             :aria-label="t('sortableTable.searchLabel')"
+            aria-describedby="describe-filter-sortable-table"
             :placeholder="t('sortableTable.search')+searchPlaceholder"
           >
          
         </div>
       </div>
     </div>
+    <div v-if="$slots['banner']">
+      <slot name="banner"></slot>
+    </div>
     <div class="sort-table-div">
-      <table
-        ref="table"
-        class="sortable-table"
-        :class="classObject"
-        width="100%"
-        role="table"
-      >
-        <THead
-          v-if="showHeaders"
-          :label-for="labelFor"
-          :columns="columns"
-          :group="group"
-          :group-options="advGroupOptions"
-          :has-advanced-filtering="hasAdvancedFiltering"
-          :adv-filter-hide-labels-as-cols="advFilterHideLabelsAsCols"
-          :table-actions="tableActions"
-          :table-cols-options="columnOptions"
-          :row-actions="rowActions"
-          :sub-expand-column="subExpandColumn"
-          :row-actions-width="rowActionsWidth"
-          :how-much-selected="howMuchSelected"
-          :sort-by="sortBy"
-          :default-sort-by="_defaultSortBy"
-          :descending="descending"
-          :no-rows="noRows"
-          :loading="isLoading && !loadingDelay"
-          :no-results="noResults"
-          @on-toggle-all="onToggleAll"
-          @on-sort-change="changeSort"
-          @col-visibility-change="changeColVisibility"
-          @group-value-change="(val) => $emit('group-value-change', val)"
-          @update-cols-options="updateColsOptions"
-        />
+    <table
+      ref="table"
+      class="sortable-table"
+      :class="classObject"
+      width="100%"
+      role="table"
+    >
+      <THead
+        v-if="showHeaders"
+        :label-for="labelFor"
+        :columns="columns"
+        :group="group"
+        :group-options="advGroupOptions"
+        :has-advanced-filtering="hasAdvancedFiltering"
+        :adv-filter-hide-labels-as-cols="advFilterHideLabelsAsCols"
+        :table-actions="tableActions"
+        :table-cols-options="columnOptions"
+        :row-actions="rowActions"
+        :sub-expand-column="subExpandColumn"
+        :row-actions-width="rowActionsWidth"
+        :how-much-selected="howMuchSelected"
+        :sort-by="sortBy"
+        :default-sort-by="_defaultSortBy"
+        :descending="descending"
+        :no-rows="noRows"
+        :loading="isLoading && !loadingDelay"
+        :no-results="noResults"
+        @on-toggle-all="onToggleAll"
+        @on-sort-change="changeSort"
+        @col-visibility-change="changeColVisibility"
+        @group-value-change="(val) => $emit('group-value-change', val)"
+        @update-cols-options="updateColsOptions"
+      />
 
-        <!-- Don't display anything if we're loading and the delay has yet to pass -->
-        <div v-if="isLoading && !loadingDelay" />
-
-        <tbody v-else-if="isLoading && !altLoading">
-          <slot name="loading">
-            <tr>
-              <td :colspan="fullColspan">
-                <div class="data-loading">
-                  <i class="icon-spin icon icon-spinner" />
-                  <t
-                    k="generic.loading"
-                    :raw="true"
-                  />
-                </div>
-              </td>
-            </tr>
-          </slot>
-        </tbody>
-        <tbody v-else-if="noRows">
-          <slot name="no-rows">
-            <tr class="no-rows">
-              <td :colspan="fullColspan">
+      <!-- Don't display anything if we're loading and the delay has yet to pass -->
+      <div v-if="isLoading && !loadingDelay" />
+
+      <tbody v-else-if="isLoading && !altLoading">
+        <slot name="loading">
+          <tr>
+            <td :colspan="fullColspan">
+              <div class="data-loading">
+                <i class="icon-spin icon icon-spinner" />
                 <t
-                  v-if="showNoRows"
-                  :k="noRowsKey"
+                  k="generic.loading"
+                  :raw="true"
                 />
-              </td>
-            </tr>
-          </slot>
-        </tbody>
-        <tbody v-else-if="noResults">
-          <slot name="no-results">
-            <tr class="no-results">
-              <td
-                :colspan="fullColspan"
-                class="text-center"
+              </div>
+            </td>
+          </tr>
+        </slot>
+      </tbody>
+      <tbody v-else-if="noRows">
+        <slot name="no-rows">
+          <tr class="no-rows">
+            <td :colspan="fullColspan">
+              <t
+                v-if="showNoRows"
+                :k="noRowsKey"
+              />
+            </td>
+          </tr>
+        </slot>
+      </tbody>
+      <tbody v-else-if="noResults">
+        <slot name="no-results">
+          <tr class="no-results">
+            <td
+              :colspan="fullColspan"
+              class="text-center"
+            >
+              <t :k="noDataKey" />
+            </td>
+          </tr>
+        </slot>
+      </tbody>
+      <tbody
+        v-for="(groupedRows) in displayRows"
+        v-else
+        :key="groupedRows.key"
+        tabindex="-1"
+        :class="{ group: groupBy }"
+      >
+        <slot
+          v-if="groupBy"
+          name="group-row"
+          :group="groupedRows"
+          :fullColspan="fullColspan"
+        >
+          <tr class="group-row">
+            <td :colspan="fullColspan">
+              <slot
+                name="group-by"
+                :group="groupedRows.grp"
               >
-                <t :k="noDataKey" />
-              </td>
-            </tr>
-          </slot>
-        </tbody>
-        <tbody
-          v-for="(groupedRows) in displayRows"
-          v-else
-          :key="groupedRows.key"
-          tabindex="-1"
-          :class="{ group: groupBy }"
+                <div
+                  v-trim-whitespace
+                  class="group-tab"
+                >
+                  {{ groupedRows.ref }}
+                </div>
+              </slot>
+            </td>
+          </tr>
+        </slot>
+        <template
+          v-for="(row, i) in groupedRows.rows"
+          :key="i"
         >
           <slot
-            v-if="groupBy"
-            name="group-row"
-            :group="groupedRows"
-            :fullColspan="fullColspan"
-          >
-            <tr class="group-row">
-              <td :colspan="fullColspan">
-                <slot
-                  name="group-by"
-                  :group="groupedRows.grp"
-                >
-                  <div
-                    v-trim-whitespace
-                    class="group-tab"
-                  >
-                    {{ groupedRows.ref }}
-                  </div>
-                </slot>
-              </td>
-            </tr>
-          </slot>
-          <template
-            v-for="(row, i) in groupedRows.rows"
-            :key="i"
+            name="main-row"
+            :row="row.row"
           >
             <slot
-              name="main-row"
-              :row="row.row"
+              :name="'main-row:' + (row.row.mainRowKey || i)"
+              :full-colspan="fullColspan"
             >
-              <slot
-                :name="'main-row:' + (row.row.mainRowKey || i)"
-                :full-colspan="fullColspan"
+              <!-- The data-cant-run-bulk-action-of-interest attribute is being used instead of :class because
+                because our selection.js invokes toggleClass and :class clobbers what was added by toggleClass if
+                the value of :class changes. -->
+              <tr
+                class="main-row"
+                :data-testid="componentTestid + '-' + i + '-row'"
+                :class="{ 'has-sub-row': row.showSubRow}"
+                :data-node-id="row.key"
+                :data-cant-run-bulk-action-of-interest="actionOfInterest && !row.canRunBulkActionOfInterest"
               >
-                <!-- The data-cant-run-bulk-action-of-interest attribute is being used instead of :class because
-                  because our selection.js invokes toggleClass and :class clobbers what was added by toggleClass if
-                  the value of :class changes. -->
-                <tr
-                  class="main-row"
-                  :data-testid="componentTestid + '-' + i + '-row'"
-                  :class="{ 'has-sub-row': row.showSubRow}"
-                  :data-node-id="row.key"
-                  :data-cant-run-bulk-action-of-interest="actionOfInterest && !row.canRunBulkActionOfInterest"
+                <td
+                  v-if="tableActions"
+                  class="row-check"
+                  align="middle"
                 >
-                  <td
-                    v-if="tableActions"
-                    class="row-check"
-                    align="middle"
-                  >
-                    {{ row.mainRowKey }}
-                    <Checkbox
-                      class="selection-checkbox"
-                      :data-node-id="row.key"
-                      :data-testid="componentTestid + '-' + i + '-checkbox'"
-                      :value="selectedRows.includes(row.row)"
-                      :alternate-label="t('sortableTable.genericRowCheckbox', { item: row && row.row ? row.row.id : '' })"
-                    />
-                  </td>
-                  <td
-                    v-if="subExpandColumn"
-                    class="row-expand"
-                    align="middle"
-                  >
-                    <i
-                      data-title="Toggle Expand"
-                      :class="{
-                        icon: true,
-                        'icon-chevron-right': !expanded[row.row[keyField]],
-                        'icon-chevron-down': !!expanded[row.row[keyField]]
-                      }"
-                      @click.stop="toggleExpand(row.row)"
-                    />
-                  </td>
-                  <template
-                    v-for="(col, j) in row.columns"
-                    :key="j"
+                  {{ row.mainRowKey }}
+                  <Checkbox
+                    class="selection-checkbox"
+                    :data-node-id="row.key"
+                    :data-testid="componentTestid + '-' + i + '-checkbox'"
+                    :value="selectedRows.includes(row.row)"
+                    :alternate-label="t('sortableTable.genericRowCheckbox', { item: row && row.row ? row.row.id : '' })"
+                  />
+                </td>
+                <td
+                  v-if="subExpandColumn"
+                  class="row-expand"
+                  align="middle"
+                >
+                  <i
+                    data-title="Toggle Expand"
+                    :class="{
+                      icon: true,
+                      'icon-chevron-right': !expanded[row.row[keyField]],
+                      'icon-chevron-down': !!expanded[row.row[keyField]]
+                    }"
+                    @click.stop="toggleExpand(row.row)"
+                  />
+                </td>
+                <template
+                  v-for="(col, j) in row.columns"
+                  :key="j"
+                >
+                  <slot
+                    :name="'col:' + col.col.name"
+                    :row="row.row"
+                    :col="col.col"
+                    :dt="dt"
+                    :expanded="expanded"
+                    :rowKey="row.key"
                   >
-                    <slot
-                      :name="'col:' + col.col.name"
-                      :row="row.row"
-                      :col="col.col"
-                      :dt="dt"
-                      :expanded="expanded"
-                      :rowKey="row.key"
+                    <td
+                      v-show="!hasAdvancedFiltering || (hasAdvancedFiltering && col.col.isColVisible)"
+                      :key="col.col.name"
+                      :data-title="col.col.label"
+                      :data-testid="`sortable-cell-${ i }-${ j }`"
+                      :align="col.col.align || 'left'"
+                      :class="{['col-'+col.dasherize]: !!col.col.formatter, [col.col.breakpoint]: !!col.col.breakpoint, ['skip-select']: col.col.skipSelect}"
+                      :width="col.col.width"
                     >
-                      <td
-                        v-show="!hasAdvancedFiltering || (hasAdvancedFiltering && col.col.isColVisible)"
-                        :key="col.col.name"
-                        :data-title="col.col.label"
-                        :data-testid="`sortable-cell-${ i }-${ j }`"
-                        :align="col.col.align || 'left'"
-                        :class="{['col-'+col.dasherize]: !!col.col.formatter, [col.col.breakpoint]: !!col.col.breakpoint, ['skip-select']: col.col.skipSelect}"
-                        :width="col.col.width"
+                      <slot
+                        :name="'cell:' + col.col.name"
+                        :row="row.row"
+                        :col="col.col"
+                        :value="col.value"
                       >
-                        <slot
-                          :name="'cell:' + col.col.name"
+                        <component
+                          :is="col.component"
+                          v-if="col.component && col.needRef"
+                          ref="column"
+                          :value="col.value"
                           :row="row.row"
                           :col="col.col"
+                          :get-custom-detail-link="getCustomDetailLink"
+                          v-bind="col.col.formatterOpts"
+                          :row-key="row.key"
+                        />
+                        <component
+                          :is="col.component"
+                          v-else-if="col.component"
                           :value="col.value"
-                        >
-                          <component
-                            :is="col.component"
-                            v-if="col.component && col.needRef"
-                            ref="column"
-                            :value="col.value"
-                            :row="row.row"
-                            :col="col.col"
-                            v-bind="col.col.formatterOpts"
-                            :row-key="row.key"
-                            :get-custom-detail-link="getCustomDetailLink"
-                          />
-                          <component
-                            :is="col.component"
-                            v-else-if="col.component"
-                            :value="col.value"
-                            :row="row.row"
-                            :col="col.col"
-                            v-bind="col.col.formatterOpts"
-                            :row-key="row.key"
-                          />
-                          <component
-                            :is="col.col.formatter"
-                            v-else-if="col.col.formatter"
-                            :value="col.value"
-                            :row="row.row"
-                            :col="col.col"
-                            v-bind="col.col.formatterOpts"
-                            :row-key="row.key"
-                          />
-                          <template v-else-if="col.value !== ''">
-                            {{ col.formatted }}
-                          </template>
-                          <template v-else-if="col.col.dashIfEmpty">
-                            <span class="text-muted">&mdash;</span>
-                          </template>
-                        </slot>
-                      </td>
-                    </slot>
-                  </template>
-                  <td
-                    v-if="rowActions"
-                    :align="'left'"
-                    style="height:60px"
+                          :row="row.row"
+                          :col="col.col"
+                          v-bind="col.col.formatterOpts"
+                          :row-key="row.key"
+                        />
+                        <component
+                          :is="col.col.formatter"
+                          v-else-if="col.col.formatter"
+                          :value="col.value"
+                          :row="row.row"
+                          :col="col.col"
+                          v-bind="col.col.formatterOpts"
+                          :row-key="row.key"
+                        />
+                        <template v-else-if="col.value !== ''">
+                          {{ col.formatted }}
+                        </template>
+                        <template v-else-if="col.col.dashIfEmpty">
+                          <span class="text-muted">&mdash;</span>
+                        </template>
+                      </slot>
+                    </td>
+                  </slot>
+                </template>
+                <td
+                  v-if="rowActions"
+                  :align="'left'"
+                  style="height:60px"
+                >
+                 <div style="display: flex;align-items: center;">
+                  <slot
+                    name="row-actions"
+                    :row="row.row"
+                    :index="i"
                   >
-                  <div style="display: flex;align-items: center;">
-                    <slot
-                      name="row-actions"
-                      :row="row.row"
-                      :index="i"
-                    >
-                    </slot>
-                    <ActionMenu
+                  </slot>
+                  <template v-if="featureDropdownMenu">
+                      <ActionMenu
                         :resource="row.row"
                         :data-testid="componentTestid + '-' + i + '-action-button'"
                         :button-aria-label="t('sortableTable.tableActionsLabel', { resource: row?.row?.id || '' })"
-                    />
-                  </div>
-                  </td>
-                </tr>
-              </slot>
+                      />
+                    </template>
+                    <template v-else>
+                      <ButtonMultiAction
+                        :id="`actionButton+${i}+${(row.row && row.row.name) ? row.row.name : ''}`"
+                        :ref="`actionButton${i}`"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                        :aria-label="t('sortableTable.tableActionsLabel', { resource: row?.row?.id || '' })"
+                        :data-testid="componentTestid + '-' + i + '-action-button'"
+                        :borderless="true"
+                        @click="handleActionButtonClick(i, $event)"
+                        @keyup.enter="handleActionButtonClick(i, $event)"
+                        @keyup.space="handleActionButtonClick(i, $event)"
+                      />
+                    </template>
+                 </div>
+                </td>
+              </tr>
             </slot>
-            <!-- <slot
-              v-if="row.showSubRow"
-              name="sub-row"
-              :full-colspan="fullColspan"
-              :row="row.row"
-              :sub-matches="subMatches"
-              :keyField="keyField"
-              :componentTestid="componentTestid"
-              :i="i"
-              :onRowMouseEnter="onRowMouseEnter"
-              :onRowMouseLeave="onRowMouseLeave"
+          </slot>
+          <!-- <slot
+            v-if="row.showSubRow"
+            name="sub-row"
+            :full-colspan="fullColspan"
+            :row="row.row"
+            :sub-matches="subMatches"
+            :keyField="keyField"
+            :componentTestid="componentTestid"
+            :i="i"
+            :onRowMouseEnter="onRowMouseEnter"
+            :onRowMouseLeave="onRowMouseLeave"
+          >
+            <tr
+              v-if="row.row.stateDescription"
+              :key="row.row[keyField] + '-description'"
+              :data-testid="componentTestid + '-' + i + '-row-description'"
+              class="state-description sub-row"
+              @mouseenter="onRowMouseEnter"
+              @mouseleave="onRowMouseLeave"
             >
-              <tr
-                v-if="row.row.stateDescription"
-                :key="row.row[keyField] + '-description'"
-                :data-testid="componentTestid + '-' + i + '-row-description'"
-                class="state-description sub-row"
-                @mouseenter="onRowMouseEnter"
-                @mouseleave="onRowMouseLeave"
+              <td
+                v-if="tableActions"
+                class="row-check"
+                align="middle"
+              />
+              <td
+                :colspan="fullColspan - (tableActions ? 1: 0)"
+                :class="{ 'text-error' : row.row.stateObj.error }"
               >
-                <td
-                  v-if="tableActions"
-                  class="row-check"
-                  align="middle"
-                />
-                <td
-                  :colspan="fullColspan - (tableActions ? 1: 0)"
-                  :class="{ 'text-error' : row.row.stateObj.error }"
-                >
-                  {{ row.row.stateDescription }}
-                </td>
-              </tr>
-            </slot> -->
-          </template>
-        </tbody>
-      </table>
-    </div>
+                {{ row.row.stateDescription }}
+              </td>
+            </tr>
+          </slot> -->
+        </template>
+      </tbody>
+    </table>
+  </div>
     <div
     v-if="!noRows && !noResults"
       :class="$route.path=== '/account'? 'chebox-padding':''"
       style="display: flex;justify-content: flex-start;align-content: center;height: 62px;position: sticky;bottom: 0;background-color: var(--header-bg);padding: 15px 20px 0 30px;margin: 0 -20px 0 -20px;z-index:20"
     >
-      <div style="display: flex;justify-content: center;height: 32px;">
+    <div style="display: flex;justify-content: center;height: 32px;">
         <Checkbox
           v-if="tableActions&&availableActions.some(item => item.action != 'download')"
           :value="isMuchSelected"
@@ -1713,9 +1688,9 @@ export default {
           :class="{button: !!$slots['header-button'], 'advanced-filtering': hasAdvancedFiltering,}"
         >
           <div
-          :class="bulkActionsClass"
-          class="bulk"
-        >
+            :class="bulkActionsClass"
+            class="bulk"
+          >
           <slot name="header-left">
             <template v-if="tableActions">
               <button
@@ -1728,6 +1703,8 @@ export default {
                 :class="{[bulkActionClass]:true}"
                 :disabled="!act.enabled"
                 :data-testid="componentTestid + '-' + act.action"
+                role="button"
+                :aria-label="act.label"
                 @click="applyTableAction(act, null, $event)"
                 @keydown.enter.stop
                 @mouseover="setBulkActionOfInterest(act)"
@@ -1739,229 +1716,240 @@ export default {
                 />
                 <span v-clean-html="act.label" />
               </button>
-              <ActionDropdown
-                :class="bulkActionsDropdownClass"
-                class="bulk-actions-dropdown"
-                :disable-button="!selectedRows.length"
-                size="sm"
-              >
-                <template #button-content>
-                  <button
-                    ref="actionDropDown"
-                    class="btn bg-primary mr-0"
-                    :disabled="!selectedRows.length"
-                  >
-                    <i class="icon icon-gear" />
-                    <span>{{ t('sortableTable.bulkActions.collapsed.label') }}</span>
-                    <i class="ml-10 icon icon-chevron-down" />
-                  </button>
-                </template>
-                <template #popover-content>
-                  <ul class="list-unstyled menu">
-                    <li
-                      v-for="(act, i) in hiddenActions"
-                      :key="i"
-                      v-close-popper
-                      v-clean-tooltip="{
-                        content: actionTooltip,
-                        placement: 'right'
-                      }"
-                      :class="{ disabled: !act.enabled }"
-                      @click="applyTableAction(act, null, $event)"
-                      @mouseover="setBulkActionOfInterest(act)"
-                      @mouseleave="setBulkActionOfInterest(null)"
+              <template v-if="featureDropdownMenu">
+                <ActionDropdownShell
+                  :disabled="!selectedRows.length"
+                  :hidden-actions="hiddenActions"
+                  :action-tooltip="actionTooltip"
+                  @click="applyTableAction"
+                  @mouseover="setBulkActionOfInterest"
+                  @mouseleave="setBulkActionOfInterest"
+                />
+              </template>
+              <template v-else>
+                <ActionDropdown
+                  :class="bulkActionsDropdownClass"
+                  class="bulk-actions-dropdown"
+                  :disable-button="!selectedRows.length"
+                  size="sm"
+                >
+                  <template #button-content>
+                    <button
+                      ref="actionDropDown"
+                      class="btn bg-primary mr-0"
+                      :disabled="!selectedRows.length"
                     >
-                      <i
-                        v-if="act.icon"
-                        :class="act.icon"
-                      />
-                      <span v-clean-html="act.label" />
-                    </li>
-                  </ul>
-                </template>
-              </ActionDropdown>
-              <label
-                v-if="selectedRowsText"
-                :class="bulkActionAvailabilityClass"
-                class="action-availability"
-              >
-                {{ selectedRowsText }}
-              </label>
+                      <i class="icon icon-gear" />
+                      <span>{{ t('sortableTable.bulkActions.collapsed.label') }}</span>
+                      <i class="ml-10 icon icon-chevron-down" />
+                    </button>
+                  </template>
+                  <template #popover-content>
+                    <ul class="list-unstyled menu">
+                      <li
+                        v-for="(act, i) in hiddenActions"
+                        :key="i"
+                        v-close-popper
+                        v-clean-tooltip="{
+                          content: actionTooltip,
+                          placement: 'right'
+                        }"
+                        :class="{ disabled: !act.enabled }"
+                        @click="applyTableAction(act, null, $event)"
+                        @mouseover="setBulkActionOfInterest(act)"
+                        @mouseleave="setBulkActionOfInterest(null)"
+                      >
+                        <i
+                          v-if="act.icon"
+                          :class="act.icon"
+                        />
+                        <span v-clean-html="act.label" />
+                      </li>
+                    </ul>
+                  </template>
+                </ActionDropdown>
+              </template>
+                <label
+                  v-if="selectedRowsText"
+                  :class="bulkActionAvailabilityClass"
+                  class="action-availability"
+                >
+                  {{ tableActions&&availableActions.some(item => item.action != 'download') ?selectedRowsText: '' }}
+                </label>
+              
             </template>
           </slot>
           </div>
         </div>
       </div>
 
+    <!-- 分页 -->
+    <div
+        v-if="showPaging"
+        class="paging"
+      >
+        <div style="height: 100%; align-content: center;">
+          共 {{ filteredRows.length }} 条
+        </div>
 
-       <!-- 分页 -->
-      <div
-          v-if="showPaging"
-          class="paging"
+        <button
+          type="button"
+          class="btn btn-sm role-multi-action page-btn-normal"
+          :disabled="page == 1"
+          :style="{ color: page <= totalPages ? `var(--default-text) !important` : `var(--paimary)`,border: page <= totalPages ? `solid thin var(--border)` : `solid thin var(--paimary)`}"
+          @click="goToPage('prev')"
         >
-          <div style="height: 100%; align-content: center;">
-            共 {{ filteredRows.length }} 条
-          </div>
-
-          <button
-            type="button"
-            class="btn btn-sm role-multi-action page-btn-normal"
-            :disabled="page == 1"
-            :style="{ color: page <= totalPages ? `var(--default-text) !important` : `var(--paimary)`,border: page <= totalPages ? `solid thin var(--border)` : `solid thin var(--paimary)`}"
-            @click="goToPage('prev')"
-          >
-            <!-- <i class="icon icon-chevron-left" /> -->
-            <
-          </button>
-          <button
-            type="button"
-            class="btn btn-sm role-multi-action page-btn-normal"
-            :style="{ color: (page == 1) ? `var(--primary)`:`var(--default-text) !important`,border: (page == 1) ? `solid thin var(--primary)` : `solid thin var(--border)`}"
-            @click="goToPage('first')"
-          >
-            <!-- <i class="icon icon-chevron-beginning" /> -->
-            {{ 1 }}
-          </button>
-          <template v-if="totalPages > 2">
-            <div style="display: flex;flex-direction: row;gap: 10px;">
-              <button
-                v-if="page - 2 > 1 && page <= totalPages "
-                type="button"
-                class="btn btn-sm role-multi-action page-btn-normal"
-                :style="{ color: `var(--default-text) !important`,border: `solid thin white`}"
-              >
-                ...
-              </button>
-              <button
-                v-if="page - 1 > 1 && page <= totalPages "
-                type="button"
-                class="btn btn-sm role-multi-action page-btn-normal"
-                :style="{ color: `var(--default-text) !important`,border: `solid thin var(--border)`}"
-                @click="setPage(page-1)"
-              >
-                {{ page-1 }}
-              </button>
-              <button
-                v-if="page > 1 && page < totalPages"
-                type="button"
-                class="btn btn-sm role-multi-action page-btn-normal"
-                :style="{ color: `var(--default-text)`,border: `solid thin var(--primary)`}"
-                @click="setPage(page)"
-              >
-                {{ page }}
-              </button>
-              <button
-                v-if="page + 1 < totalPages "
-                type="button"
-                class="btn btn-sm role-multi-action page-btn-normal"
-                :style="{ color: `var(--default-text) !important`,border: `solid thin var(--border)`}"
-                @click="setPage(page+1)"
-              >
-                {{ page+1 }}
-              </button>
-              <button
-                v-if="page +2 < totalPages "
-                type="button"
-                class="btn btn-sm role-multi-action page-btn-normal"
-                :style="{ color: `var(--default-text) !important`,border: `solid thin white`}"
-              >
-                ...
-              </button>
-            </div>
-          </template>
-          <!-- <button
-            type="button"
-            class="btn btn-sm role-multi-action"
-            style="padding: 0;max-width: 32px;background-color: white !important;"
-          >
-            {{ page }}
-          </button> -->
-          <button
-            v-if="totalPages > 1"
-            type="button"
-            class="btn btn-sm role-multi-action page-btn-normal"
-            :style="{ color: (page == totalPages) ? `var(--primary)`:`var(--default-text) !important`,border: (page == totalPages) ? `solid thin var(--primary)` : `solid thin var(--border)`}"
-            @click="goToPage('last')"
-          >
-            <!-- <i class="icon icon-chevron-end" /> -->
-            {{ totalPages }}
-          </button>
-          <button
-            type="button"
-            class="btn btn-sm role-multi-action page-btn-normal"
-            :disabled="page == totalPages"
-            :style="{ color: page <= totalPages ? `var(--default-text) !important` : `var(--paimary)`,border: page <= totalPages ? `solid thin var(--border)` : `solid thin var(--paimary)`}"
-            @click="goToPage('next')"
-          >
-            <!-- <i class="icon icon-chevron-right" /> -->
+          <!-- <i class="icon icon-chevron-left" /> -->
+          <
+        </button>
+        <button
+          type="button"
+          class="btn btn-sm role-multi-action page-btn-normal"
+          :style="{ color: (page == 1) ? `var(--primary)`:`var(--default-text) !important`,border: (page == 1) ? `solid thin var(--primary)` : `solid thin var(--border)`}"
+          @click="goToPage('first')"
+        >
+          <!-- <i class="icon icon-chevron-beginning" /> -->
+          {{ 1 }}
+        </button>
+        <template v-if="totalPages > 2">
+          <div style="display: flex;flex-direction: row;gap: 10px;">
+            <button
+              v-if="page - 2 > 1 && page <= totalPages "
+              type="button"
+              class="btn btn-sm role-multi-action page-btn-normal"
+              :style="{ color: `var(--default-text) !important`,border: `solid thin white`}"
             >
-          </button>
-
-          <!-- 分页页码切换 -->
-          <Select
-          :mode="inputPerPage"
-            :searchable="false"
-            :clearable="false"
-            :options="perPageOptions"
-            v-model:value="inputPerPage"
-            class="pageSelect"
-            @update:value="changePerPage"
-          />
-
-          <div style="height: 100%; align-content: center;">
-            跳至
-          </div>
-          <input
-            v-model="inputPage"
-            type="number"
-            min="1"
-            step="1"
-            style="padding: 0px 10px;"
-            @keyup.enter="handleToPage"
-          >
-          <div style="height: 100%; align-content: center;">
-            页
+              ...
+            </button>
+            <button
+              v-if="page - 1 > 1 && page <= totalPages "
+              type="button"
+              class="btn btn-sm role-multi-action page-btn-normal"
+              :style="{ color: `var(--default-text) !important`,border: `solid thin var(--border)`}"
+              @click="setPage(page-1)"
+            >
+              {{ page-1 }}
+            </button>
+            <button
+              v-if="page > 1 && page < totalPages"
+              type="button"
+              class="btn btn-sm role-multi-action page-btn-normal"
+              :style="{ color: `var(--default-text)`,border: `solid thin var(--primary)`}"
+              @click="setPage(page)"
+            >
+              {{ page }}
+            </button>
+            <button
+              v-if="page + 1 < totalPages "
+              type="button"
+              class="btn btn-sm role-multi-action page-btn-normal"
+              :style="{ color: `var(--default-text) !important`,border: `solid thin var(--border)`}"
+              @click="setPage(page+1)"
+            >
+              {{ page+1 }}
+            </button>
+            <button
+              v-if="page +2 < totalPages "
+              type="button"
+              class="btn btn-sm role-multi-action page-btn-normal"
+              :style="{ color: `var(--default-text) !important`,border: `solid thin white`}"
+            >
+              ...
+            </button>
           </div>
-          <!-- <button
+        </template>
+        <!-- <button
           type="button"
           class="btn btn-sm role-multi-action"
-          style="padding: 0;max-width: 80px;background-color: white !important;"
-          @click="setPage(inputPage)"
+          style="padding: 0;max-width: 32px;background-color: white !important;"
         >
-
+          {{ page }}
         </button> -->
-      </div>
-      <button
-        v-if="search"
-        v-shortkey.once="['/']"
-        class="hide"
-        @shortkey="focusSearch()"
-      />
-      <template v-if="tableActions">
         <button
-          v-shortkey="['j']"
-          class="hide"
-          @shortkey="focusNext($event)"
-        />
-        <button
-          v-shortkey="['k']"
-          class="hide"
-          @shortkey="focusPrevious($event)"
-        />
-        <button
-          v-shortkey="['shift','j']"
-          class="hide"
-          @shortkey="focusNext($event, true)"
-        />
+          v-if="totalPages > 1"
+          type="button"
+          class="btn btn-sm role-multi-action page-btn-normal"
+          :style="{ color: (page == totalPages) ? `var(--primary)`:`var(--default-text) !important`,border: (page == totalPages) ? `solid thin var(--primary)` : `solid thin var(--border)`}"
+          @click="goToPage('last')"
+        >
+          <!-- <i class="icon icon-chevron-end" /> -->
+          {{ totalPages }}
+        </button>
         <button
-          v-shortkey="['shift','k']"
-          class="hide"
-          @shortkey="focusPrevious($event, true)"
+          type="button"
+          class="btn btn-sm role-multi-action page-btn-normal"
+          :disabled="page == totalPages"
+          :style="{ color: page <= totalPages ? `var(--default-text) !important` : `var(--paimary)`,border: page <= totalPages ? `solid thin var(--border)` : `solid thin var(--paimary)`}"
+          @click="goToPage('next')"
+        >
+          <!-- <i class="icon icon-chevron-right" /> -->
+          >
+        </button>
+
+        <!-- 分页页码切换 -->
+        <Select
+         :mode="inputPerPage"
+          :searchable="false"
+          :clearable="false"
+          :options="perPageOptions"
+          v-model:value="inputPerPage"
+          class="pageSelect"
+          @update:value="changePerPage"
         />
-        <slot name="shortkeys" />
-      </template>
+
+        <div style="height: 100%; align-content: center;">
+          跳至
+        </div>
+        <input
+          v-model="inputPage"
+          type="number"
+          min="1"
+          step="1"
+          style="padding: 0px 10px;"
+          @keyup.enter="handleToPage"
+        >
+        <div style="height: 100%; align-content: center;">
+          页
+        </div>
+        <!-- <button
+        type="button"
+        class="btn btn-sm role-multi-action"
+        style="padding: 0;max-width: 80px;background-color: white !important;"
+        @click="setPage(inputPage)"
+      >
+
+      </button> -->
+      </div>
     </div>
-  
+    <button
+      v-if="search"
+      v-shortkey.once="['/']"
+      class="hide"
+      @shortkey="focusSearch()"
+    />
+    <template v-if="tableActions">
+      <button
+        v-shortkey="['j']"
+        class="hide"
+        @shortkey="focusNext($event)"
+      />
+      <button
+        v-shortkey="['k']"
+        class="hide"
+        @shortkey="focusPrevious($event)"
+      />
+      <button
+        v-shortkey="['shift','j']"
+        class="hide"
+        @shortkey="focusNext($event, true)"
+      />
+      <button
+        v-shortkey="['shift','k']"
+        class="hide"
+        @shortkey="focusPrevious($event, true)"
+      />
+      <slot name="shortkeys" />
+    </template>
   </div>
 </template>
 
@@ -2615,3 +2603,4 @@ export default {
             z-index: 3;
         }
 </style>
+