dashboard-shell-shell 1.0.114 → 1.0.115

package/components/SortableTable/index.vue

@@ -403,7 +403,28 @@ 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
+      isLoading,
+      isMuchSelected: false,
+      inputPerPage:     '10',
+      inputPage:        '', // 输入的要跳至的页码
+      perPageOptions:   [
+        {
+          label: '10条/页',
+          value: '10',
+        },
+        {
+          label: '25条/页',
+          value: '25',
+        },
+        {
+          label: '50条/页',
+          value: '50',
+        },
+        {
+          label: '100条/页',
+          value: '100',
+        }
+      ]
     };
   },
 
@@ -418,6 +439,13 @@ 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();
   },
 
@@ -432,6 +460,12 @@ 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: {
@@ -480,6 +514,13 @@ export default {
     forceUpdateLiveAndDelayed(neu, old) {
       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: {
@@ -767,12 +808,97 @@ export default {
   },
 
   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) {
         clearTimeout(this._liveColumnsTimer);
@@ -1055,9 +1181,309 @@ export default {
     ref="container"
     :data-testid="componentTestid + '-list-container'"
   >
+
+    <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" />
+
+        <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
+                  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"
+                >
+                  <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.row"
+            >
+              <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"
+                >
+                  <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"
+                  >
+                    <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"
+                      >
+                        <slot
+                          :name="'cell:' + col.col.name"
+                          :row="row.row"
+                          :col="col.col"
+                          :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"
+                  >
+                  <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>
+                  </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
+                  :colspan="fullColspan - (tableActions ? 1: 0)"
+                  :class="{ 'text-error' : row.row.stateObj.error }"
+                >
+                  {{ 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;">
+        <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%;"
     >
       <slot name="title" />
       <div
@@ -1246,356 +1672,175 @@ export default {
           <slot name="header-button" />
         </div>
       </div>
-    </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" />
-
-      <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
-                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"
-              >
-                <div
-                  v-trim-whitespace
-                  class="group-tab"
-                >
-                  {{ groupedRows.ref }}
-                </div>
-              </slot>
-            </td>
-          </tr>
-        </slot>
-        <template
-          v-for="(row, i) in groupedRows.rows"
-          :key="i"
+      </div>
+       <!-- 分页 -->
+      <div
+          v-if="showPaging"
+          class="paging"
         >
-          <slot
-            name="main-row"
-            :row="row.row"
+          <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')"
           >
-            <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"
+            <!-- <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`}"
               >
-                <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"
-                >
-                  <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"
-                    >
-                      <slot
-                        :name="'cell:' + col.col.name"
-                        :row="row.row"
-                        :col="col.col"
-                        :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"
-                >
-                  <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>
-                </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"
+                ...
+              </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')"
           >
-            <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"
+            <!-- <i class="icon icon-chevron-right" /> -->
             >
-              <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
-      v-if="showPaging"
-      class="paging"
-    >
-      <button
-        type="button"
-        class="btn btn-sm role-multi-action"
-        data-testid="pagination-first"
-        :disabled="page == 1 || loading"
-        @click="goToPage('first')"
-      >
-        <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')"
-      >
-        <i class="icon icon-chevron-left" />
-      </button>
-      <span>
-        {{ pagingDisplay }}
-      </span>
-      <button
-        type="button"
-        class="btn btn-sm role-multi-action"
-        data-testid="pagination-next"
-        :disabled="page == totalPages || loading"
-        @click="goToPage('next')"
-      >
-        <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"
-      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>
+
+          <!-- 分页页码切换 -->
+          <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
+          type="button"
+          class="btn btn-sm role-multi-action"
+          style="padding: 0;max-width: 80px;background-color: white !important;"
+          @click="setPage(inputPage)"
+        >
+
+        </button> -->
+      </div>
       <button
-        v-shortkey="['shift','k']"
+        v-if="search"
+        v-shortkey.once="['/']"
         class="hide"
-        @shortkey="focusPrevious($event, true)"
+        @shortkey="focusSearch()"
       />
-      <slot name="shortkeys" />
-    </template>
+      <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>
+  
   </div>
 </template>
 
@@ -1749,9 +1994,12 @@ export default {
   }
 
   .search-box {
-    height: 40px;
-    margin-left: 10px;
-    min-width: 180px;
+    height: 32px;
+    margin-left: 0px;
+    /* min-width: 180px; */
+    min-width: 280px;
+    width: 280px !important;
+    border: 1px solid rgb(217, 217, 217);
   }
 </style>
 
@@ -1777,7 +2025,8 @@ export default {
     border-collapse: collapse;
     min-width: 400px;
     border-radius: 5px 5px 0 0;
-    outline: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+    /* outline: 1px solid var(--border); */
     background: var(--sortable-table-bg);
     border-radius: 4px;
 
@@ -1791,32 +2040,77 @@ 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 {
@@ -1824,7 +2118,7 @@ export default {
         }
 
         &:hover, &.sub-row-hovered {
-          background-color: var(--sortable-table-hover-bg);
+          /* background-color: var(--sortable-table-hover-bg); */
         }
 
         &.state-description > td {
@@ -1839,7 +2133,7 @@ export default {
       }
 
       tr.row-selected {
-        background: var(--sortable-table-selected-bg);
+        /* background: var(--sortable-table-selected-bg); */
       }
 
       .no-rows {
@@ -1854,18 +2148,22 @@ export default {
           background-color: var(--body-bg);
         }
       }
+      .no-results{
+        height: 60px;
+      }
 
       &.group {
         &:before {
           content: "";
           display: block;
-          height: 20px;
+          height: 0px;
           background-color: transparent;
         }
       }
 
       tr.group-row {
         background-color: initial;
+        height: 40px;
 
         &:first-child {
           border-bottom: 2px solid var(--sortable-table-row-bg);
@@ -1962,7 +2260,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;
@@ -2078,12 +2376,121 @@ export default {
   }
 
   .paging {
-    margin-top: 10px;
+    //text-align: center;
+    display: flex;
+    justify-content: flex-end;
+    gap: 0 10px;
     text-align: center;
-
+    max-height: 32px;
+    background-color: transparent;
+    flex: 1;
     SPAN {
       display: inline-block;
-      min-width: 200px;
+      //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%;
+    }
+  }
+
+</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>