dashboard-shell-shell 1.0.1000000116 → 1.0.1000000117

package/components/SortableTable/index.vue

@@ -28,6 +28,7 @@ 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'
+import MastheadBtn from '@shell/components/ResourceList/Masthead-btn.vue'
 
 // Uncomment for table performance debugging
 // import tableDebug from './debug';
@@ -415,33 +416,16 @@ export default {
 
     const isLoading = this.loading || false;
 
-    console.log(this.$route.path, ' this.$route?.path');
-
     let isCreatable = false;
-    const lastPath = this.$route?.path?.split('/').pop();
-
-    console.log(lastPath, ' lastPath-----------------------');
+    const lastPath = this.$route?.path.split('/').pop();
 
-    if (lastPath?.includes('.')) {
+    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;
     }
 
-    const resource = this.$route.params.resource;
-
-    let hasEditComponent = false
-
-    if (lastPath?.includes('.')) {
-      hasEditComponent = this.$store.getters['type-map/hasCustomEdit'](lastPath);
-    } else if (lastPath === 'namespace') {
-      hasEditComponent = this.$store.getters['type-map/hasCustomEdit'](this.$route.name);
-    } else {
-      hasEditComponent = this.$store.getters['type-map/hasCustomEdit'](resource);
-    }
-
     return {
-      hasEditComponent,
       refreshButtonPhase:         isLoading ? ASYNC_BUTTON_STATES.WAITING : ASYNC_BUTTON_STATES.ACTION,
       expanded:                   {},
       searchQuery,
@@ -629,17 +613,22 @@ export default {
       }
     };
 
-    onMounted(() => {
-      table.value.addEventListener('keyup', handleEnterKey);
-    });
 
     onBeforeUnmount(() => {
-      table.value.removeEventListener('keyup', handleEnterKey);
+      table.value && table.value.removeEventListener('keyup', handleEnterKey);
     });
 
     const store = useStore();
     const { featureDropdownMenu } = useRuntimeFlag(store);
 
+    onMounted(() => {
+      table.value && table.value.addEventListener('keyup', handleEnterKey);
+
+      console.log(featureDropdownMenu, ' featureDropdownMenu---------------------');
+      
+
+    });
+  
     return {
       table,
       featureDropdownMenu,
@@ -868,6 +857,25 @@ export default {
   },
 
   methods: {
+    // getTableList () {
+    //   const q = this.eventualSearchQuery;
+  
+    //   this.searchQuery = q;
+  
+    //   if (!this.hasAdvancedFiltering && this.useQueryParamsForSimpleFiltering) {
+    //     const route = {
+    //       name:   this.$route.name,
+    //       params: { ...this.$route.params },
+    //       query:  { ...this.$route.query, q }
+    //     };
+  
+    //     if (!q && this.$route.query?.q) {
+    //       route.query = {};
+    //     }
+  
+    //     this.$router.replace(route);
+    //   }
+    // },
     onTableScroll(table, e) {
       // 记录最后滚动的距离
       let lastScrollTop = 0;
@@ -1241,38 +1249,30 @@ export default {
     ref="container"
     :data-testid="componentTestid + '-list-container'"
   >
+     <!-- 主标题和过滤器区域 -->
     <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 && hasEditComponent ? '100px' : '-10px',maxHeight: '32px'}"
+      :class="{'titled': $slots.title && $slots.title.length,  'mb-40': isFilterLabel}"
+      class="sortable-table-header  mb-20"
     >
       <slot name="title" />
+
+      <!-- 顶部功能行区域 -->
       <div
         v-if="showHeaderRow"
-        class="fixed-header-actions"
+        class="fixed-header-table-actions"
         :class="{button: !!$slots['header-button'], 'advanced-filtering': hasAdvancedFiltering, }"
         style="display: flex;"
       >
-        <!-- <div
-          :class="bulkActionsClass"
-          class="bulk"
-        >
-          
-        </div> -->
-        <div
-          v-if="!hasAdvancedFiltering && $slots['header-middle']"
-          class="middle"
-          style="margin-left: 10px;margin-right: -10px;"
-        >
-          <slot name="header-middle" />
-        </div>
 
+        <!-- 搜索栏、右插槽、刷新按钮、高级筛选等区域 -->
         <div
           v-if="search || hasAdvancedFiltering || isTooManyItemsToAutoUpdate || $slots['header-right']"
           class="search row"
           data-testid="search-box-filter-row"
-          style="max-height: 32px;display: contents;"
+          style="max-height: 32px;"
         >
+
+          <!-- 已应用的高级筛选 -->
           <ul
             v-if="hasAdvancedFiltering"
             class="advanced-filters-applied"
@@ -1289,14 +1289,9 @@ export default {
               <div class="bg" />
             </li>
           </ul>
+
           <slot name="header-right" />
-          <AsyncButton
-            v-if="isTooManyItemsToAutoUpdate"
-            mode="manual-refresh"
-            :size="manualRefreshButtonSize"
-            :current-phase="refreshButtonPhase"
-            @click="debouncedRefreshTableData"
-          />
+
           <div
             v-if="hasAdvancedFiltering"
             ref="advanced-filter-group"
@@ -1352,6 +1347,8 @@ export default {
               </div>
             </div>
           </div>
+
+           <!-- 搜索描述文本（隐藏） -->
           <p
             v-else-if="search"
             id="describe-filter-sortable-table"
@@ -1359,326 +1356,357 @@ export default {
           >
             {{ t('sortableTable.filteringDescription') }}
           </p>
-           <slot name="header-button" />
-          <input
-            v-if="search"
-            ref="searchQuery"
-            v-model="eventualSearchQuery"
-            type="search"
-            class="input-sm search-box"
-            :aria-label="t('sortableTable.searchLabel')"
-            aria-describedby="describe-filter-sortable-table"
-            :placeholder="t('sortableTable.search')+searchPlaceholder"
-          >
+          <slot name="header-button" />
+
+          <div style="display: flex;">
+
+            <slot name="search-main-button" />
+
+            <!-- 搜索输入框 -->
+            <input
+              v-if="search"
+              ref="searchQuery"
+              v-model="eventualSearchQuery"
+              type="search"
+              class="input-sm search-box"
+              :aria-label="t('sortableTable.searchLabel')"
+              aria-describedby="describe-filter-sortable-table"
+              :placeholder="t('sortableTable.search')+searchPlaceholder"
+            >
+            <!-- <button v-if="search" @click="getTableList(eventualSearchQuery)" calss="search-btn role-secondary">
+              检索
+            </button> -->
+            
+            <!-- 手动刷新按钮 -->
+             <AsyncButton
+              v-if="isTooManyItemsToAutoUpdate"
+              mode="manual-refresh"
+              :size="manualRefreshButtonSize"
+              :current-phase="refreshButtonPhase"
+              @click="debouncedRefreshTableData"
+            />
+
+          </div>
          
         </div>
+
+        <!-- 中间区域插槽 -->
+        <div
+          v-if="!hasAdvancedFiltering && $slots['header-middle']"
+          class="middle"
+          style="margin-left: 10px;"
+        >
+          <slot name="header-middle" />
+        </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"
-      />
 
-      <!-- Don't display anything if we're loading and the delay has yet to pass -->
-      <div v-if="isLoading && !loadingDelay" />
+    <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"
+        />
 
-      <tbody v-else-if="isLoading && !altLoading">
-        <slot name="loading">
-          <tr>
-            <td :colspan="fullColspan">
-              <div class="data-loading">
-                <i class="icon-spin icon icon-spinner" />
+        <!-- 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">
                 <t
-                  k="generic.loading"
-                  :raw="true"
+                  v-if="showNoRows"
+                  :k="noRowsKey"
                 />
-              </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"
+              </td>
+            </tr>
+          </slot>
+        </tbody>
+        <tbody v-else-if="noResults">
+          <slot name="no-results">
+            <tr class="no-results">
+              <td
+                :colspan="fullColspan"
+                class="text-center"
               >
-                <div
-                  v-trim-whitespace
-                  class="group-tab"
-                >
-                  {{ groupedRows.ref }}
-                </div>
-              </slot>
-            </td>
-          </tr>
-        </slot>
-        <template
-          v-for="(row, i) in groupedRows.rows"
-          :key="i"
+                <t :k="noDataKey" />
+              </td>
+            </tr>
+          </slot>
+        </tbody>
+        <tbody
+          v-for="(groupedRows) in displayRows"
+          v-else
+          :key="groupedRows.key"
+          tabindex="-1"
+          :class="{ group: groupBy }"
         >
           <slot
-            name="main-row"
-            :row="row.row"
+            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"
           >
             <slot
-              :name="'main-row:' + (row.row.mainRowKey || i)"
-              :full-colspan="fullColspan"
+              name="main-row"
+              :row="row.row"
             >
-              <!-- 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"
+              <slot
+                :name="'main-row:' + (row.row.mainRowKey || i)"
+                :full-colspan="fullColspan"
               >
-                <td
-                  v-if="tableActions"
-                  class="row-check"
-                  align="middle"
+                <!-- 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"
                 >
-                  {{ 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"
+                  <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"
                   >
-                    <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"
+                    <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="'cell:' + col.col.name"
-                        :row="row.row"
-                        :col="col.col"
-                        :value="col.value"
+                      <td
+                        v-show="!hasAdvancedFiltering || (hasAdvancedFiltering && col.col.isColVisible)"
+                        :key="col.col.name"
+                        :data-title="col.col.label"
+                        :data-testid="`sortable-cell-${ i }-${ j }`"
+                        :align="'left'"
+                        :class="{['col-'+col.dasherize]: !!col.col.formatter, [col.col.breakpoint]: !!col.col.breakpoint, ['skip-select']: col.col.skipSelect}"
+                        :width="col.col.width"
                       >
-                        <component
-                          :is="col.component"
-                          v-if="col.component && col.needRef"
-                          ref="column"
-                          :value="col.value"
+                        <slot
+                          :name="'cell:' + col.col.name"
                           :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"
-                          :row="row.row"
-                          :col="col.col"
-                          v-bind="col.col.formatterOpts"
-                          :row-key="row.key"
+                        >
+                          <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"
+                            :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"
+                    >
+                    </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 || '' })"
                         />
-                        <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>
+                      <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 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>
+                      </template>
+                  </div>
+                  </td>
+                </tr>
+              </slot>
+            </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"
+              >
+                <td
+                  v-if="tableActions"
+                  class="row-check"
+                  align="middle"
+                />
                 <td
-                  v-if="rowActions"
-                  :align="'left'"
-                  style="height:60px"
+                  :colspan="fullColspan - (tableActions ? 1: 0)"
+                  :class="{ 'text-error' : row.row.stateObj.error }"
                 >
-                 <div style="display: flex;align-items: center;">
-                  <slot
-                    name="row-actions"
-                    :row="row.row"
-                    :index="i"
-                  >
-                  </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 || '' })"
-                      />
-                    </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>
+                  {{ row.row.stateDescription }}
                 </td>
               </tr>
-            </slot>
-          </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"
-            >
-              <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>
+            </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"
+      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:13"
     >
     <div style="display: flex;justify-content: center;height: 32px;">
         <Checkbox
@@ -1699,7 +1727,7 @@ export default {
         <slot name="title" />
         <div
           v-if="showHeaderRow"
-          class="fixed-header-actions"
+          class="fixed-footer-actions"
           :class="{button: !!$slots['header-button'], 'advanced-filtering': hasAdvancedFiltering,}"
         >
           <div
@@ -1725,10 +1753,11 @@ export default {
                 @mouseover="setBulkActionOfInterest(act)"
                 @mouseleave="setBulkActionOfInterest(null)"
               >
-                <i
+                <!-- <i
                   v-if="act.icon"
                   :class="act.icon"
-                />
+                  style="line-height: 12px;height: 12px;font-size: 12px;"
+                /> -->
                 <span v-clean-html="act.label" />
               </button>
               <template v-if="featureDropdownMenu">
@@ -1903,7 +1932,7 @@ export default {
 
         <!-- 分页页码切换 -->
         <Select
-         :mode="inputPerPage"
+          :mode="inputPerPage"
           :searchable="false"
           :clearable="false"
           :options="perPageOptions"
@@ -2164,77 +2193,32 @@ export default {
     td {
       padding: 8px 5px;
       border: 0;
-      background: var(--sortable-table-row-bg);
 
       &:first-child {
         padding-left: 10px;
-        position: sticky;
-        left: 0;
-        z-index: 2;
-      }
-      &:nth-child(2) {
-        padding-left: 10px;
-        position: sticky;
-        left: 29px;
-        z-index: 2;
       }
 
       &:last-child {
         padding-right: 10px;
-        position: sticky;
-        right: 0;
-        z-index: 2;
-        /* padding-left: 10px; */
       }
 
       &.row-check {
         padding-top: 12px;
-        right: 0;
-        position: sticky;
       }
     }
-    th {
-      padding: 13px 5px;
-      border: 0;
-      /* height: 50.84px; */
-      box-sizing: border-box;
-      background: var(--sortable-table-header-bg);
-
-      &:first-child {
-        padding-left: 10px;
-        position: sticky;
-        left: 0;
-        z-index: 2;
-      }
-      &:nth-child(2) {
-        padding-left: 10px;
-        position: sticky;
-        left: 29px;
-        z-index: 2;
-      }
-
-      &:last-child {
-        padding-left: 10px;
-        padding-right: 10px;
-        position: sticky;
-        right: 0;
-        z-index: 2;
-      }
 
-    }
     tbody {
       tr {
         border-bottom: 1px solid var(--sortable-table-top-divider);
         background-color: var(--sortable-table-row-bg);
-        height: 60px;
 
         &.main-row.has-sub-row {
-          /* border-bottom: 0; */
+          border-bottom: 0;
         }
 
         // if a main-row is hovered also hover it's sibling sub row. note - the reverse is handled in selection.js
         &.main-row:not(.row-selected):hover + .sub-row {
-          /* background-color: var(--sortable-table-hover-bg); */
+          background-color: var(--sortable-table-hover-bg);
         }
 
         &:last-of-type {
@@ -2287,7 +2271,6 @@ export default {
 
       tr.group-row {
         background-color: initial;
-        height: 40px;
 
         &:first-child {
           border-bottom: 2px solid var(--sortable-table-row-bg);
@@ -2379,11 +2362,11 @@ export default {
       align-items: center;
     }
   }
-  .fixed-header-actions.button{
+  .fixed-footer-actions.button{
     grid-template-columns: [bulk] auto [middle] min-content [search] minmax(min-content, 350px);
   }
 
-  .fixed-header-actions {
+  .fixed-footer-actions {
     /* padding: 0 0 20px 0; */
     width: 100%;
     z-index: z-index('fixedTableHeader');
@@ -2499,6 +2482,114 @@ export default {
     }
   }
 
+
+  .fixed-header-table-actions {
+    width: 100%;
+    z-index: z-index('fixedTableHeader');
+    background: transparent;
+    display: flex;
+    justify-content: space-between;
+
+
+    .bulk {
+      $gap: 10px;
+
+      & > BUTTON {
+        display: none; // Handled dynamically
+      }
+
+      & > BUTTON:not(:last-of-type) {
+        margin-right: $gap;
+      }
+
+      .action-availability {
+        display: none; // Handled dynamically
+        margin-left: $gap;
+        vertical-align: middle;
+        margin-top: 2px;
+      }
+
+      .dropdown-button {
+        $disabled-color: var(--disabled-text);
+        $disabled-cursor: not-allowed;
+        li.disabled {
+          color: $disabled-color;
+          cursor: $disabled-cursor;
+
+          &:hover {
+            color: $disabled-color;
+            background-color: unset;
+            cursor: $disabled-cursor;
+          }
+        }
+      }
+
+      .bulk-action  {
+        .icon {
+          vertical-align: -10%;
+        }
+      }
+    }
+
+    .middle {
+      white-space: nowrap;
+
+      .icon.icon-backup.animate {
+        animation-name: spin;
+        animation-duration: 1000ms;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+      }
+
+      @keyframes spin {
+        from {
+          transform:rotate(0deg);
+        }
+        to {
+          transform:rotate(360deg);
+        }
+      }
+    }
+
+    .search {
+      text-align: right;
+      justify-content: flex-end;
+    }
+
+    .bulk-actions-dropdown {
+      display: none; // Handled dynamically
+
+      .dropdown-button {
+        background-color: var(--primary);
+
+        &:hover {
+          background-color: var(--primary-hover-bg);
+          color: var(--primary-hover-text);
+        }
+
+        > *, .icon-chevron-down {
+          color: var(--primary-text);
+        }
+
+        .button-divider {
+          border-color: var(--primary-text);
+        }
+
+        &.disabled {
+          border-color: var(--disabled-bg);
+
+          .icon-chevron-down {
+            color: var(--disabled-text) !important;
+          }
+
+          .button-divider {
+            border-color: var(--disabled-text);
+          }
+        }
+      }
+    }
+  }
+
   .paging {
     //text-align: center;
     display: flex;
@@ -2511,6 +2602,7 @@ export default {
     SPAN {
       display: inline-block;
       //min-width: 200px;
+      min-width: auto;
     }
 
     /* 针对Webkit浏览器（如Chrome, Safari） */
@@ -2547,6 +2639,7 @@ export default {
     margin-top: 0px !important;
   }
   .pageSelect {
+    overflow: hidden;
     max-width: 100px;
   }
   .page-btn-normal {