dashboard-shell-shell 1.0.113 → 1.0.114

package/components/SortableTable/index.vue

@@ -1,6 +1,6 @@
 <script>
-import { mapGetters, useStore } from 'vuex';
-import { defineAsyncComponent, ref, onMounted, onBeforeUnmount } from 'vue';
+import { mapGetters } from 'vuex';
+import { defineAsyncComponent, useTemplateRef, onMounted, onBeforeUnmount } from 'vue';
 import day from 'dayjs';
 import isEmpty from 'lodash/isEmpty';
 import { dasherize, ucFirst } from '@shell/utils/string';
@@ -8,7 +8,6 @@ import { get, clone } from '@shell/utils/object';
 import { removeObject } from '@shell/utils/array';
 import { Checkbox } from '@components/Form/Checkbox';
 import AsyncButton, { ASYNC_BUTTON_STATES } from '@shell/components/AsyncButton';
-import Select from '@shell/components/form/Select';
 import ActionDropdown from '@shell/components/ActionDropdown';
 import throttle from 'lodash/throttle';
 import debounce from 'lodash/debounce';
@@ -25,9 +24,6 @@ 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';
-
 
 // Uncomment for table performance debugging
 // import tableDebug from './debug';
@@ -60,12 +56,10 @@ export default {
     THead,
     Checkbox,
     AsyncButton,
-    Select,
     ActionDropdown,
     LabeledSelect,
     ButtonMultiAction,
     ActionMenu,
-    ActionDropdownShell,
   },
   mixins: [
     filtering,
@@ -381,19 +375,6 @@ export default {
     manualRefreshButtonSize: {
       type:    String,
       default: ''
-    },
-    isBanner: {
-      // Show isBanner input to filter rows
-      type:    Boolean,
-      default: false
-    },
-    marginTopValue: {
-      type:    Number,
-      default: 0
-    },
-    isFilterLabel: {
-      type:    Boolean,
-      default: false
     }
 
   },
@@ -410,19 +391,11 @@ export default {
 
     const isLoading = this.loading || false;
 
-    let isCreatable = false;
-    const lastPath = this.$route.path.split('/').pop();
-
-    if (lastPath.includes('.')) {
-      isCreatable = this.$store.getters['type-map/optionsFor'](lastPath).isCreatable;
-    }
-
     return {
       refreshButtonPhase:         isLoading ? ASYNC_BUTTON_STATES.WAITING : ASYNC_BUTTON_STATES.ACTION,
       expanded:                   {},
       searchQuery,
       eventualSearchQuery,
-      isCreatable,
       subMatches:                 null,
       actionOfInterest:           null,
       loadingDelay:               false,
@@ -430,28 +403,7 @@ export default {
       /**
        * The is the bool the DOM uses to show loading state. it's proxied from `loading` to avoid blipping the indicator (see usages)
        */
-      isLoading,
-      isMuchSelected: false,
-      inputPerPage:     '10',
-      inputPage:        '', // 输入的要跳至的页码
-      perPageOptions:   [
-        {
-          label: '10条/页',
-          value: '10',
-        },
-        {
-          label: '25条/页',
-          value: '25',
-        },
-        {
-          label: '50条/页',
-          value: '50',
-        },
-        {
-          label: '100条/页',
-          value: '100',
-        }
-      ]
+      isLoading
     };
   },
 
@@ -466,13 +418,6 @@ export default {
     this._onScroll = this.onScroll.bind(this);
     $main?.addEventListener('scroll', this._onScroll);
 
-    const tables = document.querySelectorAll('.sort-table-div');
-
-    tables.forEach((table) => {
-      this._onTableScroll = this.onTableScroll.bind(this, table);
-      table.addEventListener('scroll', this._onTableScroll.bind(this, table));
-    });
-
     this.debouncedPaginationChanged();
   },
 
@@ -487,12 +432,6 @@ export default {
     const $main = document.querySelector('main');
 
     $main?.removeEventListener('scroll', this._onScroll);
-     // 移除所有表格容器的滚动事件监听器
-     const tables = document.querySelectorAll('.sort-table-div');
-
-    tables.forEach((table) => {
-      table.removeEventListener('scroll', this._onTableScroll);
-    });
   },
 
   watch: {
@@ -542,14 +481,6 @@ export default {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
 
-    selectedRowsText(neu, old) {
-      if (neu) {
-        this.isMuchSelected = true;
-      } else {
-        this.isMuchSelected = false;
-      }
-    },
-
     // Ensure we update live and delayed columns on first load
     initalLoad: {
       handler(neu) {
@@ -597,7 +528,7 @@ export default {
     },
   },
   setup(_props, { emit }) {
-    const table = ref(null);
+    const table = useTemplateRef('table');
 
     const handleEnterKey = (event) => {
       if (event.key === 'Enter' && !event.target?.classList?.contains('checkbox-custom')) {
@@ -612,14 +543,6 @@ export default {
     onBeforeUnmount(() => {
       table.value.removeEventListener('keyup', handleEnterKey);
     });
-
-    const store = useStore();
-    const { featureDropdownMenu } = useRuntimeFlag(store);
-
-    return {
-      table,
-      featureDropdownMenu,
-    };
   },
 
   created() {
@@ -840,100 +763,15 @@ export default {
       });
 
       return rows;
-    },
+    }
   },
 
   methods: {
-    onTableScroll(table, e) {
-      // 记录最后滚动的距离
-      let lastScrollTop = 0;
-      let lastScrollLeft = 0;
-
-      // 监听容器滚动
-      table.addEventListener('scroll', (e) => {
-      // 如果当前垂直滚动距离不等于上次
-        if (e.target.scrollTop !== lastScrollTop) {
-        // 更新最后距离
-          lastScrollTop = e.target.scrollTop;
-
-          // 移除左右阴影样式
-          table.classList.remove('shadow-left');
-          table.classList.remove('shadow-right');
-
-          // 如果滚动到顶部，移除顶部阴影样式
-          // if (lastScrollTop === 0) {
-          //   table.classList.remove('shadow-top');
-          // }
-          // // 否则添加顶部阴影样式
-          // else {
-          //   table.classList.add('shadow-top');
-          // }
-
-          // 如果滚动到底部，移除底部阴影样式
-          // if (lastScrollTop + table.clientHeight === table.scrollHeight) {
-          //   table.classList.remove('shadow-bottom');
-          // }
-          // // 否则添加底部阴影样式
-          // else {
-          //   table.classList.add('shadow-bottom');
-          // }
-
-          // 阴影效果修正
-          table.classList.remove('shadow-x');
-          table.classList.add('shadow-y');
-        }
-
-        // 如果当前水平滚动距离不等于上次
-        else if (e.target.scrollLeft !== lastScrollLeft) {
-        // 更新最后距离
-          lastScrollLeft = e.target.scrollLeft;
-
-          // 移除上下阴影样式
-          // table.classList.remove('shadow-top');
-          // table.classList.remove('shadow-bottom');
-
-          // 如果滚动到左边，移除左边阴影样式
-          if (lastScrollLeft === 0) {
-            table.classList.remove('shadow-left');
-          }
-          // 否则添加左边阴影样式
-          else {
-            table.classList.add('shadow-left');
-          }
-
-          // 如果滚动到右边，移除右边阴影样式
-          if (lastScrollLeft + table.clientWidth === table.scrollWidth) {
-            table.classList.remove('shadow-right');
-          }
-          // 否则添加右边阴影样式
-          else {
-            table.classList.add('shadow-right');
-          }
-
-          // 阴影效果修正
-          table.classList.remove('shadow-y');
-          table.classList.add('shadow-x');
-        }
-      });
-    },
-    changePerPage(value) {
-      this.inputPerPage = value;
-      this.setgetPerPage(value);
-    },
-    handleToPage() {
-      this.setPage(parseInt(this.inputPage, 10));
-    },
     refreshTableData() {
       this.$store.dispatch('resource-fetch/doManualRefresh');
     },
     get,
     dasherize,
-    muchSelect(value) {
-      console.log(value);
-      
-      this.isMuchSelected = !this.isMuchSelected;
-      this.onToggleAll(value);
-    },
 
     onScroll() {
       if (this.hasLiveColumns || this.hasDelayedColumns) {
@@ -1218,27 +1056,96 @@ export default {
     :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'}"
+      :class="{'titled': $slots.title && $slots.title.length}"
+      class="sortable-table-header"
     >
       <slot name="title" />
       <div
         v-if="showHeaderRow"
         class="fixed-header-actions"
-        :class="{button: !!$slots['header-button'], 'advanced-filtering': hasAdvancedFiltering, }"
-        style="display: flex;"
+        :class="{button: !!$slots['header-button'], 'advanced-filtering': hasAdvancedFiltering}"
       >
-        <!-- <div
+        <div
           :class="bulkActionsClass"
           class="bulk"
         >
-          
-        </div> -->
+          <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>
@@ -1247,7 +1154,6 @@ 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"
@@ -1328,32 +1234,19 @@ export default {
               </div>
             </div>
           </div>
-          <p
-            v-else-if="search"
-            id="describe-filter-sortable-table"
-            hidden
-          >
-            {{ t('sortableTable.filteringDescription') }}
-          </p>
-           <slot name="header-button" />
           <input
-            v-if="search"
+            v-else-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')"
           >
-         
+          <slot name="header-button" />
         </div>
       </div>
     </div>
-    <div v-if="$slots['banner']">
-      <slot name="banner"></slot>
-    </div>
-    <div class="sort-table-div">
     <table
       ref="table"
       class="sortable-table"
@@ -1544,9 +1437,9 @@ export default {
                           :value="col.value"
                           :row="row.row"
                           :col="col.col"
-                          :get-custom-detail-link="getCustomDetailLink"
                           v-bind="col.col.formatterOpts"
                           :row-key="row.key"
+                          :get-custom-detail-link="getCustomDetailLink"
                         />
                         <component
                           :is="col.component"
@@ -1578,43 +1471,23 @@ export default {
                 </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"
                   >
+                    <ActionMenu
+                      :resource="row.row"
+                      :data-testid="componentTestid + '-' + i + '-action-button'"
+                      :button-aria-label="t('sortableTable.tableActionsLabel', { resource: row?.row?.id || '' })"
+                    />
                   </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>
                 </td>
               </tr>
             </slot>
           </slot>
-          <!-- <slot
+          <slot
             v-if="row.showSubRow"
             name="sub-row"
             :full-colspan="fullColspan"
@@ -1646,270 +1519,53 @@ export default {
                 {{ row.row.stateDescription }}
               </td>
             </tr>
-          </slot> -->
+          </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"
+      v-if="showPaging"
+      class="paging"
     >
-    <div style="display: flex;justify-content: center;height: 32px;">
-        <Checkbox
-          v-if="tableActions&&availableActions.some(item => item.action != 'download')"
-          :value="isMuchSelected"
-          class="check"
-          data-testid="sortable-table_check_select_all"
-          :disabled="noRows || noResults"
-          style="display: flex;justify-content: center;align-content: center;"
-          @update:value = "muchSelect"
-        />
-      </div>
-      <div
-        :class="{'titled': $slots.title && $slots.title.length}"
-        class="sortable-table-header"
-         style="margin-left: 10px;min-width: 55%;"
+      <button
+        type="button"
+        class="btn btn-sm role-multi-action"
+        data-testid="pagination-first"
+        :disabled="page == 1 || loading"
+        @click="goToPage('first')"
       >
-        <slot name="title" />
-        <div
-          v-if="showHeaderRow"
-          class="fixed-header-actions"
-          :class="{button: !!$slots['header-button'], 'advanced-filtering': hasAdvancedFiltering,}"
-        >
-          <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"
-                role="button"
-                :aria-label="act.label"
-                @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>
-              <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 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"
-              >
-                {{ selectedRowsText }}
-              </label>
-            </template>
-          </slot>
-          </div>
-        </div>
-      </div>
-
-    <!-- 分页 -->
-    <div
-        v-if="showPaging"
-        class="paging"
+        <i class="icon icon-chevron-beginning" />
+      </button>
+      <button
+        type="button"
+        class="btn btn-sm role-multi-action"
+        data-testid="pagination-prev"
+        :disabled="page == 1 || loading"
+        @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" /> -->
-          >
-        </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;">
-          页
-        </div>
-        <!-- <button
+        <i class="icon icon-chevron-left" />
+      </button>
+      <span>
+        {{ pagingDisplay }}
+      </span>
+      <button
         type="button"
         class="btn btn-sm role-multi-action"
-        style="padding: 0;max-width: 80px;background-color: white !important;"
-        @click="setPage(inputPage)"
+        data-testid="pagination-next"
+        :disabled="page == totalPages || loading"
+        @click="goToPage('next')"
       >
-
-      </button> -->
-      </div>
+        <i class="icon icon-chevron-right" />
+      </button>
+      <button
+        type="button"
+        class="btn btn-sm role-multi-action"
+        data-testid="pagination-last"
+        :disabled="page == totalPages || loading"
+        @click="goToPage('last')"
+      >
+        <i class="icon icon-chevron-end" />
+      </button>
     </div>
     <button
       v-if="search"
@@ -2093,12 +1749,9 @@ export default {
   }
 
   .search-box {
-    height: 32px;
-    margin-left: 0px;
-    /* min-width: 180px; */
-    min-width: 280px;
-    width: 280px !important;
-    border: 1px solid rgb(217, 217, 217);
+    height: 40px;
+    margin-left: 10px;
+    min-width: 180px;
   }
 </style>
 
@@ -2124,8 +1777,7 @@ export default {
     border-collapse: collapse;
     min-width: 400px;
     border-radius: 5px 5px 0 0;
-    border-bottom: 1px solid var(--border);
-    /* outline: 1px solid var(--border); */
+    outline: 1px solid var(--border);
     background: var(--sortable-table-bg);
     border-radius: 4px;
 
@@ -2139,77 +1791,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 {
@@ -2217,7 +1824,7 @@ export default {
         }
 
         &:hover, &.sub-row-hovered {
-          /* background-color: var(--sortable-table-hover-bg); */
+          background-color: var(--sortable-table-hover-bg);
         }
 
         &.state-description > td {
@@ -2232,7 +1839,7 @@ export default {
       }
 
       tr.row-selected {
-        /* background: var(--sortable-table-selected-bg); */
+        background: var(--sortable-table-selected-bg);
       }
 
       .no-rows {
@@ -2247,22 +1854,18 @@ export default {
           background-color: var(--body-bg);
         }
       }
-      .no-results{
-        height: 60px;
-      }
 
       &.group {
         &:before {
           content: "";
           display: block;
-          height: 0px;
+          height: 20px;
           background-color: transparent;
         }
       }
 
       tr.group-row {
         background-color: initial;
-        height: 40px;
 
         &:first-child {
           border-bottom: 2px solid var(--sortable-table-row-bg);
@@ -2359,7 +1962,7 @@ export default {
   }
 
   .fixed-header-actions {
-    /* padding: 0 0 20px 0; */
+    padding: 0 0 20px 0;
     width: 100%;
     z-index: z-index('fixedTableHeader');
     background: transparent;
@@ -2475,122 +2078,12 @@ export default {
   }
 
   .paging {
-    //text-align: center;
-    display: flex;
-    justify-content: flex-end;
-    gap: 0 10px;
+    margin-top: 10px;
     text-align: center;
-    max-height: 32px;
-    background-color: transparent;
-    flex: 1;
+
     SPAN {
       display: inline-block;
-      //min-width: 200px;
-    }
-
-    /* 针对Webkit浏览器（如Chrome, Safari） */
-    input[type="number"]::-webkit-inner-spin-button,
-    input[type="number"]::-webkit-outer-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-
-    /* 针对Firefox */
-    input[type="number"] {
-      -moz-appearance: textfield;
-      // background-color: var(--disabled-bg) !important;
-      border: 1px var(--border) solid;
-      border-radius: 2px;
-      width: 50px;
-      height: 100%;
+      min-width: 200px;
     }
   }
-
 </style>
-<style scoped lang="scss">
-  :deep() .role-link{
-    min-width: unset !important;
-    width: 38px;
-    min-height: 20px !important;
-    height: 20px !important;
-    line-height: 20px !important;
-    &:hover{
-      background-color: unset !important;
-    }
-  }
-  :deep() .checkbox-outer-container-extra{
-    margin-top: 0px !important;
-  }
-  .pageSelect {
-    max-width: 100px;
-  }
-  .page-btn-normal {
-    padding: 0;
-    max-width: 32px;
-    background-color:white !important;
-  }
-
-  .pageSelect{
-    &:deep() .vs__actions:after{
-      padding-top: 10px;
-    }
-  } 
-  .sort-table-div{
-      width:100%;
-      white-space:nowrap;
-      overflow-x: auto;
-  }
-
-  /* 滚动阴影左边 */
-  .shadow-left td:nth-child(2)::after{
-            content: "";
-            position: absolute;
-            top: 0;
-            width: 10px;
-            height: 100%;
-            right: -10px;
-            background: linear-gradient(to right, rgba(5, 5, 5, 0.06), transparent);
-        }
-        .shadow-left{
-          &:deep() th:nth-child(2)::after{
-              content: "";
-              position: absolute;
-              top: 0;
-              width: 10px;
-              height: 100%;
-              right: -10px;
-              background: linear-gradient(to right, rgba(5, 5, 5, 0.06), transparent);
-          }
-        }
-
-        /* 滚动阴影右边 */
-        .shadow-right td:nth-last-child(1)::after{
-            content: "";
-            position: absolute;
-            top: 0;
-            width: 10px;
-            height: 100%;
-            left: -10px;
-            background: linear-gradient(to left, rgba(5, 5, 5, 0.06), transparent);
-        }
-
-        .shadow-right{
-          &:deep() th:nth-last-child(1)::after {
-            content: "";
-            position: absolute;
-            top: 0;
-            width: 10px;
-            height: 100%;
-            left: -10px;
-            background: linear-gradient(to left, rgba(5, 5, 5, 0.06), transparent);
-          }
-        }
-
-        /* 滚动阴影垂直修正 */
-        .shadow-y td:nth-child(-n + 2), /* 前两列 */
-        .shadow-y td:nth-last-child(1) /* 后一列 */
-        {
-            z-index: 3;
-        }
-</style>
-