From 93f956a576aec42cf543faaf1b74f04aae2af9f9 Mon Sep 17 00:00:00 2001
From: gimmyhehe <975402925@qq.com>
Date: Mon, 26 Aug 2024 14:22:56 +0800
Subject: [PATCH] fix(grid): [grid] change grid x-design theme (#1984)

* fix(pager): change x-design theme

* fix(grid): change grid x-design theme

* fix(grid): change grid x-design theme
---
 examples/sites/demos/apis/grid.js             |  4 +--
 examples/sites/demos/apis/transfer.js         |  2 +-
 .../mobile-first/app/grid/basic-usage.vue     |  2 +-
 .../mobile-first/app/grid/height-auto.vue     |  2 +-
 .../ordercolumn-remote-composition-api.vue    |  2 +-
 .../pc/app/grid/custom/ordercolumn-remote.vue |  2 +-
 .../grid/custom/page-size-composition-api.vue |  2 +-
 .../demos/pc/app/grid/custom/page-size.vue    |  2 +-
 .../custom/reset-method-composition-api.vue   |  2 +-
 .../demos/pc/app/grid/custom/reset-method.vue |  2 +-
 .../custom/server-storage-composition-api.vue |  2 +-
 .../pc/app/grid/custom/server-storage.vue     |  2 +-
 .../grid/custom/sort-type-composition-api.vue |  2 +-
 .../demos/pc/app/grid/custom/sort-type.vue    |  2 +-
 .../data-source/auto-load-composition-api.vue |  2 +-
 .../pc/app/grid/data-source/auto-load.vue     |  2 +-
 .../column-asyn-rendering-composition-api.vue |  2 +-
 .../data-source/column-asyn-rendering.vue     |  2 +-
 ...fslot-protochain-fetch-composition-api.vue |  2 +-
 .../data-source/defslot-protochain-fetch.vue  |  2 +-
 .../request-service-composition-api.vue       |  2 +-
 .../app/grid/data-source/request-service.vue  |  2 +-
 .../dynamically-columns-composition-api.vue   |  2 +-
 .../dynamically-columns.vue                   |  2 +-
 ...empty-data-default-tip-composition-api.vue |  1 -
 .../app/grid/empty/empty-data-default-tip.vue |  1 -
 ...ge-before-change-event-composition-api.vue |  2 +-
 .../grid/event/page-before-change-event.vue   |  2 +-
 .../page-change-event-composition-api.vue     |  2 +-
 .../pc/app/grid/event/page-change-event.vue   |  2 +-
 .../grid/faq/unbalanced-composition-api.vue   |  2 +-
 .../demos/pc/app/grid/faq/unbalanced.spec.js  |  2 +-
 .../demos/pc/app/grid/faq/unbalanced.vue      |  2 +-
 .../filter/server-filter-composition-api.vue  |  2 +-
 .../server-filter-default-composition-api.vue |  2 +-
 .../app/grid/filter/server-filter-default.vue |  2 +-
 .../pc/app/grid/filter/server-filter.vue      |  2 +-
 .../custom-grid-header-composition-api.vue    | 13 ++++-----
 .../pc/app/grid/header/custom-grid-header.vue | 16 +++++-----
 .../many-header-switching-composition-api.vue |  2 +-
 .../app/grid/header/many-header-switching.vue |  2 +-
 .../header/slot-header-composition-api.vue    |  2 +-
 .../demos/pc/app/grid/header/slot-header.vue  |  2 +-
 ...mn-anchor-clear-active-composition-api.vue |  2 +-
 .../large-data/column-anchor-clear-active.vue |  2 +-
 .../grid/large-data/full-data-loading.spec.js |  4 +--
 ...lear-and-set-radio-row-composition-api.vue | 18 ++++++++++--
 .../clear-and-set-radio-row.vue               | 18 ++++++++++--
 ...ustom-operation-column-composition-api.vue | 17 +++++++++--
 .../custom-operation-column.spec.js           |  2 +-
 .../custom-operation-column.vue               | 19 ++++++++++--
 .../dropdown-composition-api.vue              |  7 ++---
 .../pc/app/grid/operation-column/dropdown.vue |  7 ++---
 .../grid-pager-reserve-composition-api.vue    | 21 ++++++++++++--
 .../grid-pager-reserve.spec.js                |  4 +--
 .../operation-column/grid-pager-reserve.vue   | 21 ++++++++++++--
 ...header-select-disabled-composition-api.vue |  1 -
 .../header-select-disabled.vue                |  1 -
 .../radio-config-composition-api.vue          |  1 -
 .../grid/operation-column/radio-config.vue    |  1 -
 .../refresh-grid-composition-api.vue          |  5 ++--
 .../selection-config-composition-api.vue      | 17 ++++++++++-
 .../operation-column/selection-config.vue     | 20 +++++++++++--
 .../selection-operation-composition-api.vue   | 20 +++++++++++--
 .../operation-column/selection-operation.vue  | 20 +++++++++++--
 .../inner-default-pager-composition-api.vue   |  2 +-
 .../pc/app/grid/pager/inner-default-pager.vue |  2 +-
 .../pager/inner-pager-composition-api.vue     |  2 +-
 .../demos/pc/app/grid/pager/inner-pager.vue   |  2 +-
 .../pager/pager-in-grid-composition-api.vue   |  2 +-
 .../demos/pc/app/grid/pager/pager-in-grid.vue |  2 +-
 .../pager/show-save-msg-composition-api.vue   |  2 +-
 .../demos/pc/app/grid/pager/show-save-msg.vue |  2 +-
 .../async-colunm-render-composition-api.vue   |  2 +-
 .../app/grid/renderer/async-colunm-render.vue |  2 +-
 .../start-index-composition-api.vue           |  2 +-
 .../pc/app/grid/serial-column/start-index.vue |  2 +-
 .../grid/size/auto-height-composition-api.vue |  2 +-
 .../demos/pc/app/grid/size/auto-height.vue    |  2 +-
 .../size/column-width-composition-api.vue     |  2 +-
 .../pc/app/grid/size/column-width.spec.js     |  6 ++--
 .../demos/pc/app/grid/size/column-width.vue   |  2 +-
 .../grid/size/grid-size-composition-api.vue   | 25 ++++++++++++----
 .../demos/pc/app/grid/size/grid-size.vue      | 25 ++++++++++++----
 .../app/grid/size/max-min-grid-height.spec.js |  2 +-
 .../grid/sort/server-sort-composition-api.vue |  2 +-
 .../demos/pc/app/grid/sort/server-sort.vue    |  2 +-
 .../toolbar/cancel-delete-composition-api.vue |  2 +-
 .../pc/app/grid/toolbar/cancel-delete.vue     |  2 +-
 .../custom-toolbar-composition-api.vue        |  2 +-
 .../pc/app/grid/toolbar/custom-toolbar.vue    |  2 +-
 .../toolbar/refresh-grid-composition-api.vue  |  2 +-
 .../pc/app/grid/toolbar/refresh-grid.vue      |  2 +-
 .../toolbar/save-data-composition-api.vue     |  2 +-
 .../demos/pc/app/grid/toolbar/save-data.vue   |  2 +-
 .../toolbar-op-config-composition-api.vue     |  2 +-
 ...oolbar-op-config-slots-composition-api.vue |  2 +-
 .../grid/toolbar/toolbar-op-config-slots.vue  |  2 +-
 .../pc/app/grid/toolbar/toolbar-op-config.vue |  2 +-
 .../set-tree-expansion-composition-api.vue    | 18 +++++++++++-
 .../grid/tree-table/set-tree-expansion.vue    | 18 +++++++++++-
 .../tree-grid-data-composition-api.vue        |  3 +-
 .../pc/app/grid/tree-table/tree-grid-data.vue |  3 +-
 .../tree-grid-index-composition-api.vue       |  4 +--
 .../app/grid/tree-table/tree-grid-index.vue   |  4 +--
 ...d-insert-delete-update-composition-api.vue |  4 +--
 .../tree-grid-insert-delete-update.vue        |  4 +--
 .../demos/pc/app/grid/webdoc/grid-faq.js      |  2 +-
 .../pc/app/grid/webdoc/grid-tree-table.js     | 29 ++++++++++---------
 .../demos/pc/app/pager/disabled-and-size.vue  |  2 +-
 .../pager/pager-in-grid-composition-api.vue   |  2 +-
 .../demos/pc/app/pager/pager-in-grid.vue      |  2 +-
 .../app/popeditor/pager-composition-api.vue   |  2 +-
 .../sites/demos/pc/app/popeditor/pager.vue    |  2 +-
 examples/sites/demos/pc/menus.js              |  2 +-
 packages/theme/src/form/index.less            |  7 ++++-
 packages/theme/src/form/smb-theme.js          |  3 +-
 packages/theme/src/form/vars.less             |  4 +++
 packages/theme/src/grid/filter.less           |  4 +--
 packages/theme/src/grid/header.less           |  2 +-
 packages/theme/src/grid/mixins/table.less     |  4 +++
 packages/theme/src/grid/smb-theme.js          | 15 ++++++++--
 packages/theme/src/grid/table.less            | 27 +++++++----------
 packages/theme/src/grid/vars.less             | 25 ++++++++++++----
 packages/theme/src/pager/index.less           | 16 ++++++++--
 packages/theme/src/pager/smb-theme.js         |  3 +-
 packages/theme/src/pager/vars.less            |  6 +++-
 packages/theme/src/theme.config.js            |  2 ++
 packages/vue/src/grid/src/body/src/body.tsx   |  5 ++--
 .../vue/src/grid/src/footer/src/footer.ts     |  8 +++--
 130 files changed, 468 insertions(+), 221 deletions(-)

diff --git a/examples/sites/demos/apis/grid.js b/examples/sites/demos/apis/grid.js
index dc5d37aea..731c70269 100644
--- a/examples/sites/demos/apis/grid.js
+++ b/examples/sites/demos/apis/grid.js
@@ -4082,7 +4082,7 @@ interface IPagerConfig {
     pageSize: number
     pageSizes: number[]
     total: number
-    // 分页组件布局默认值：'total, prev, pager, next, jumper, sizes'
+    // 分页组件布局默认值：'total, prev, pager, next, jumper'
     layout: string
   }
 }
@@ -4435,7 +4435,7 @@ interface IPageChangeArgs {
   $grid: Component
   // 当前页码
   currentPage: number
-  //当前分页组件布局信息 'total, prev, pager, next, jumper, sizes'
+  //当前分页组件布局信息 'total, prev, pager, next, jumper'
   layout: string
   // 当前每页显示条数
   pageSize: number
diff --git a/examples/sites/demos/apis/transfer.js b/examples/sites/demos/apis/transfer.js
index 35aaa0d95..9b87e4e44 100644
--- a/examples/sites/demos/apis/transfer.js
+++ b/examples/sites/demos/apis/transfer.js
@@ -440,7 +440,7 @@ interface IPagerOp {
     currentPage: number
     pageSize: number
     pageSizes: number[]
-    layout: string   // 分页组件布局默认值：'total, prev, pager, next, jumper, sizes'
+    layout: string   // 分页组件布局默认值：'total, prev, pager, next, jumper'
   }
 }
       `
diff --git a/examples/sites/demos/mobile-first/app/grid/basic-usage.vue b/examples/sites/demos/mobile-first/app/grid/basic-usage.vue
index b4c9a2d09..822876b00 100644
--- a/examples/sites/demos/mobile-first/app/grid/basic-usage.vue
+++ b/examples/sites/demos/mobile-first/app/grid/basic-usage.vue
@@ -146,7 +146,7 @@ export default {
           pageSize: 5,
           pageSizes: [5, 10],
           total: 0,
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       fetchData: {
diff --git a/examples/sites/demos/mobile-first/app/grid/height-auto.vue b/examples/sites/demos/mobile-first/app/grid/height-auto.vue
index 4c06a934c..7789271aa 100644
--- a/examples/sites/demos/mobile-first/app/grid/height-auto.vue
+++ b/examples/sites/demos/mobile-first/app/grid/height-auto.vue
@@ -77,7 +77,7 @@ export default {
           pageSize: 60,
           pageSizes: [5, 10, 60],
           total: 0,
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       fetchData: {
diff --git a/examples/sites/demos/pc/app/grid/custom/ordercolumn-remote-composition-api.vue b/examples/sites/demos/pc/app/grid/custom/ordercolumn-remote-composition-api.vue
index 312805347..7b7e65795 100644
--- a/examples/sites/demos/pc/app/grid/custom/ordercolumn-remote-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/custom/ordercolumn-remote-composition-api.vue
@@ -31,7 +31,7 @@ const pager = ref({
     pageSize: 3,
     total: 0,
     pageSizes: [3, 5, 10, 20],
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 })
 const fetchData = ref({
diff --git a/examples/sites/demos/pc/app/grid/custom/ordercolumn-remote.vue b/examples/sites/demos/pc/app/grid/custom/ordercolumn-remote.vue
index c50a764dc..616c9335d 100644
--- a/examples/sites/demos/pc/app/grid/custom/ordercolumn-remote.vue
+++ b/examples/sites/demos/pc/app/grid/custom/ordercolumn-remote.vue
@@ -39,7 +39,7 @@ export default {
           pageSize: 3,
           total: 0,
           pageSizes: [3, 5, 10, 20],
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       fetchData: {
diff --git a/examples/sites/demos/pc/app/grid/custom/page-size-composition-api.vue b/examples/sites/demos/pc/app/grid/custom/page-size-composition-api.vue
index 711de7b34..9bd5ea1e5 100644
--- a/examples/sites/demos/pc/app/grid/custom/page-size-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/custom/page-size-composition-api.vue
@@ -24,7 +24,7 @@ const pager = ref({
     pageSize: 10,
     total: 0,
     pageSizes: [3, 5, 10, 20],
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 })
 const fetchData = ref({
diff --git a/examples/sites/demos/pc/app/grid/custom/page-size.vue b/examples/sites/demos/pc/app/grid/custom/page-size.vue
index 6a019b9fc..60df10bf4 100644
--- a/examples/sites/demos/pc/app/grid/custom/page-size.vue
+++ b/examples/sites/demos/pc/app/grid/custom/page-size.vue
@@ -31,7 +31,7 @@ export default {
           pageSize: 10,
           total: 0,
           pageSizes: [3, 5, 10, 20],
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       fetchData: {
diff --git a/examples/sites/demos/pc/app/grid/custom/reset-method-composition-api.vue b/examples/sites/demos/pc/app/grid/custom/reset-method-composition-api.vue
index 3ac076b92..fa3ad9b62 100644
--- a/examples/sites/demos/pc/app/grid/custom/reset-method-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/custom/reset-method-composition-api.vue
@@ -29,7 +29,7 @@ const pager = ref({
     pageSize: 10,
     total: 0,
     pageSizes: [3, 5, 10, 20],
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 })
 const fetchData = ref({
diff --git a/examples/sites/demos/pc/app/grid/custom/reset-method.vue b/examples/sites/demos/pc/app/grid/custom/reset-method.vue
index dcb6ca3e8..88c65e134 100644
--- a/examples/sites/demos/pc/app/grid/custom/reset-method.vue
+++ b/examples/sites/demos/pc/app/grid/custom/reset-method.vue
@@ -65,7 +65,7 @@ export default {
           pageSize: 10,
           total: 0,
           pageSizes: [3, 5, 10, 20],
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       fetchData: {
diff --git a/examples/sites/demos/pc/app/grid/custom/server-storage-composition-api.vue b/examples/sites/demos/pc/app/grid/custom/server-storage-composition-api.vue
index e76e1c058..e07554207 100644
--- a/examples/sites/demos/pc/app/grid/custom/server-storage-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/custom/server-storage-composition-api.vue
@@ -29,7 +29,7 @@ const pager = ref({
     pageSize: 3,
     total: 0,
     pageSizes: [3, 5, 10, 20],
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 })
 const fetchData = ref({
diff --git a/examples/sites/demos/pc/app/grid/custom/server-storage.vue b/examples/sites/demos/pc/app/grid/custom/server-storage.vue
index 4f10dacdf..ddda31cd2 100644
--- a/examples/sites/demos/pc/app/grid/custom/server-storage.vue
+++ b/examples/sites/demos/pc/app/grid/custom/server-storage.vue
@@ -36,7 +36,7 @@ export default {
           pageSize: 3,
           total: 0,
           pageSizes: [3, 5, 10, 20],
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       fetchData: {
diff --git a/examples/sites/demos/pc/app/grid/custom/sort-type-composition-api.vue b/examples/sites/demos/pc/app/grid/custom/sort-type-composition-api.vue
index d12367395..2c5b72eb4 100644
--- a/examples/sites/demos/pc/app/grid/custom/sort-type-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/custom/sort-type-composition-api.vue
@@ -24,7 +24,7 @@ const pager = ref({
     pageSize: 10,
     total: 0,
     pageSizes: [3, 5, 10, 20],
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 })
 const fetchData = ref({
diff --git a/examples/sites/demos/pc/app/grid/custom/sort-type.vue b/examples/sites/demos/pc/app/grid/custom/sort-type.vue
index 217c96008..3b7a3bd03 100644
--- a/examples/sites/demos/pc/app/grid/custom/sort-type.vue
+++ b/examples/sites/demos/pc/app/grid/custom/sort-type.vue
@@ -31,7 +31,7 @@ export default {
           pageSize: 10,
           total: 0,
           pageSizes: [3, 5, 10, 20],
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       fetchData: {
diff --git a/examples/sites/demos/pc/app/grid/data-source/auto-load-composition-api.vue b/examples/sites/demos/pc/app/grid/data-source/auto-load-composition-api.vue
index 9bd93c1e2..034f5484d 100644
--- a/examples/sites/demos/pc/app/grid/data-source/auto-load-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/data-source/auto-load-composition-api.vue
@@ -21,7 +21,7 @@ const pagerConfig = ref({
     pageSize: 5,
     pageSizes: [5, 10],
     total: 0,
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 })
 const fetchData = ref({
diff --git a/examples/sites/demos/pc/app/grid/data-source/auto-load.vue b/examples/sites/demos/pc/app/grid/data-source/auto-load.vue
index 842cd063b..bedc150be 100644
--- a/examples/sites/demos/pc/app/grid/data-source/auto-load.vue
+++ b/examples/sites/demos/pc/app/grid/data-source/auto-load.vue
@@ -27,7 +27,7 @@ export default {
           pageSize: 5,
           pageSizes: [5, 10],
           total: 0,
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       fetchData: {
diff --git a/examples/sites/demos/pc/app/grid/data-source/column-asyn-rendering-composition-api.vue b/examples/sites/demos/pc/app/grid/data-source/column-asyn-rendering-composition-api.vue
index c84a3159f..75aebe96c 100644
--- a/examples/sites/demos/pc/app/grid/data-source/column-asyn-rendering-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/data-source/column-asyn-rendering-composition-api.vue
@@ -24,7 +24,7 @@ const pagerConfig = ref({
     pageSize: 5,
     pageSizes: [5, 10],
     total: 0,
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 })
 const fetchData = ref({
diff --git a/examples/sites/demos/pc/app/grid/data-source/column-asyn-rendering.vue b/examples/sites/demos/pc/app/grid/data-source/column-asyn-rendering.vue
index 8a9918a80..ca89725ff 100644
--- a/examples/sites/demos/pc/app/grid/data-source/column-asyn-rendering.vue
+++ b/examples/sites/demos/pc/app/grid/data-source/column-asyn-rendering.vue
@@ -30,7 +30,7 @@ export default {
           pageSize: 5,
           pageSizes: [5, 10],
           total: 0,
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       fetchData: {
diff --git a/examples/sites/demos/pc/app/grid/data-source/defslot-protochain-fetch-composition-api.vue b/examples/sites/demos/pc/app/grid/data-source/defslot-protochain-fetch-composition-api.vue
index eabaa4486..a07b4bcd5 100644
--- a/examples/sites/demos/pc/app/grid/data-source/defslot-protochain-fetch-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/data-source/defslot-protochain-fetch-composition-api.vue
@@ -23,7 +23,7 @@ const pagerConfig = ref({
     pageSize: 5,
     pageSizes: [5, 10],
     total: 0,
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 })
 const fetchData = ref({
diff --git a/examples/sites/demos/pc/app/grid/data-source/defslot-protochain-fetch.vue b/examples/sites/demos/pc/app/grid/data-source/defslot-protochain-fetch.vue
index 5e6825607..f3504c0ae 100644
--- a/examples/sites/demos/pc/app/grid/data-source/defslot-protochain-fetch.vue
+++ b/examples/sites/demos/pc/app/grid/data-source/defslot-protochain-fetch.vue
@@ -29,7 +29,7 @@ export default {
           pageSize: 5,
           pageSizes: [5, 10],
           total: 0,
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       fetchData: {
diff --git a/examples/sites/demos/pc/app/grid/data-source/request-service-composition-api.vue b/examples/sites/demos/pc/app/grid/data-source/request-service-composition-api.vue
index 1a15fc8ba..fc3b67cfa 100644
--- a/examples/sites/demos/pc/app/grid/data-source/request-service-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/data-source/request-service-composition-api.vue
@@ -24,7 +24,7 @@ const pagerConfig = ref({
     pageSize: 5,
     pageSizes: [5, 10],
     total: 0,
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 })
 const fetchData = ref({
diff --git a/examples/sites/demos/pc/app/grid/data-source/request-service.vue b/examples/sites/demos/pc/app/grid/data-source/request-service.vue
index 6e32df8c4..d46d3cc1b 100644
--- a/examples/sites/demos/pc/app/grid/data-source/request-service.vue
+++ b/examples/sites/demos/pc/app/grid/data-source/request-service.vue
@@ -31,7 +31,7 @@ export default {
           pageSize: 5,
           pageSizes: [5, 10],
           total: 0,
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       fetchData: {
diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns-composition-api.vue b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns-composition-api.vue
index 301eea43b..db30f049a 100644
--- a/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns-composition-api.vue
@@ -38,7 +38,7 @@ const pagerConfig = ref({
     pageSize: 5,
     pageSizes: [5, 10],
     total: 0,
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 })
 const value = ref([new Date(2020, 1), new Date()])
diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns.vue b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns.vue
index efe1227e2..21dc5488d 100644
--- a/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns.vue
+++ b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamically-columns.vue
@@ -45,7 +45,7 @@ export default {
           pageSize: 5,
           pageSizes: [5, 10],
           total: 0,
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       value: [new Date(2020, 1), new Date()],
diff --git a/examples/sites/demos/pc/app/grid/empty/empty-data-default-tip-composition-api.vue b/examples/sites/demos/pc/app/grid/empty/empty-data-default-tip-composition-api.vue
index 3018010c9..d98c1b2a5 100644
--- a/examples/sites/demos/pc/app/grid/empty/empty-data-default-tip-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/empty/empty-data-default-tip-composition-api.vue
@@ -1,6 +1,5 @@
 <template>
   <tiny-grid :data="tableData" height="300">
-    <tiny-grid-column type="index" width="5%"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称"></tiny-grid-column>
     <tiny-grid-column field="area" title="区域"></tiny-grid-column>
     <tiny-grid-column field="address" title="地址"></tiny-grid-column>
diff --git a/examples/sites/demos/pc/app/grid/empty/empty-data-default-tip.vue b/examples/sites/demos/pc/app/grid/empty/empty-data-default-tip.vue
index 53bdce9dc..ba6c1bb60 100644
--- a/examples/sites/demos/pc/app/grid/empty/empty-data-default-tip.vue
+++ b/examples/sites/demos/pc/app/grid/empty/empty-data-default-tip.vue
@@ -1,6 +1,5 @@
 <template>
   <tiny-grid :data="tableData" height="300">
-    <tiny-grid-column type="index" width="5%"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称"></tiny-grid-column>
     <tiny-grid-column field="area" title="区域"></tiny-grid-column>
     <tiny-grid-column field="address" title="地址"></tiny-grid-column>
diff --git a/examples/sites/demos/pc/app/grid/event/page-before-change-event-composition-api.vue b/examples/sites/demos/pc/app/grid/event/page-before-change-event-composition-api.vue
index c5a5ef4ca..ebb0e8b55 100644
--- a/examples/sites/demos/pc/app/grid/event/page-before-change-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/event/page-before-change-event-composition-api.vue
@@ -27,7 +27,7 @@ const pager = ref({
     pageSize: 5,
     pageSizes: [5, 10],
     total: 0,
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 })
 const fetchData = ref({
diff --git a/examples/sites/demos/pc/app/grid/event/page-before-change-event.vue b/examples/sites/demos/pc/app/grid/event/page-before-change-event.vue
index a76ad495a..0dc104be6 100644
--- a/examples/sites/demos/pc/app/grid/event/page-before-change-event.vue
+++ b/examples/sites/demos/pc/app/grid/event/page-before-change-event.vue
@@ -33,7 +33,7 @@ export default {
           pageSize: 5,
           pageSizes: [5, 10],
           total: 0,
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       fetchData: {
diff --git a/examples/sites/demos/pc/app/grid/event/page-change-event-composition-api.vue b/examples/sites/demos/pc/app/grid/event/page-change-event-composition-api.vue
index 0a1378f5f..c367c16c7 100644
--- a/examples/sites/demos/pc/app/grid/event/page-change-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/event/page-change-event-composition-api.vue
@@ -21,7 +21,7 @@ const pager = ref({
     pageSize: 5,
     pageSizes: [5, 10],
     total: 0,
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 })
 const fetchData = ref({
diff --git a/examples/sites/demos/pc/app/grid/event/page-change-event.vue b/examples/sites/demos/pc/app/grid/event/page-change-event.vue
index af7896618..f824d89ee 100644
--- a/examples/sites/demos/pc/app/grid/event/page-change-event.vue
+++ b/examples/sites/demos/pc/app/grid/event/page-change-event.vue
@@ -27,7 +27,7 @@ export default {
           pageSize: 5,
           pageSizes: [5, 10],
           total: 0,
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       fetchData: {
diff --git a/examples/sites/demos/pc/app/grid/faq/unbalanced-composition-api.vue b/examples/sites/demos/pc/app/grid/faq/unbalanced-composition-api.vue
index 267af50d5..647d40773 100644
--- a/examples/sites/demos/pc/app/grid/faq/unbalanced-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/faq/unbalanced-composition-api.vue
@@ -2,10 +2,10 @@
   <tiny-grid
     :data="tableData"
     border
-    table-layout="auto"
     show-overflow
     show-header-overflow
     :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+    column-width="100"
   >
     <tiny-grid-column title="操作" header-align="center">
       <tiny-grid-column type="index" width="40"></tiny-grid-column>
diff --git a/examples/sites/demos/pc/app/grid/faq/unbalanced.spec.js b/examples/sites/demos/pc/app/grid/faq/unbalanced.spec.js
index 8f79a4403..beb600525 100644
--- a/examples/sites/demos/pc/app/grid/faq/unbalanced.spec.js
+++ b/examples/sites/demos/pc/app/grid/faq/unbalanced.spec.js
@@ -8,5 +8,5 @@ test('常见问题--表格列头与单元格错位测试', async ({ page }) => {
   const { x } = await firstThDom.boundingBox()
   const { x: x1 } = await firstTdDom.boundingBox()
 
-  await expect(x).not.toEqual(x1)
+  await expect(x).toEqual(x1)
 })
diff --git a/examples/sites/demos/pc/app/grid/faq/unbalanced.vue b/examples/sites/demos/pc/app/grid/faq/unbalanced.vue
index f6508cab7..2ee3caaf6 100644
--- a/examples/sites/demos/pc/app/grid/faq/unbalanced.vue
+++ b/examples/sites/demos/pc/app/grid/faq/unbalanced.vue
@@ -2,10 +2,10 @@
   <tiny-grid
     :data="tableData"
     border
-    table-layout="auto"
     show-overflow
     show-header-overflow
     :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+    column-width="100"
   >
     <tiny-grid-column title="操作" header-align="center">
       <tiny-grid-column type="index" width="40"></tiny-grid-column>
diff --git a/examples/sites/demos/pc/app/grid/filter/server-filter-composition-api.vue b/examples/sites/demos/pc/app/grid/filter/server-filter-composition-api.vue
index 9c196e1d7..60c818566 100644
--- a/examples/sites/demos/pc/app/grid/filter/server-filter-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/filter/server-filter-composition-api.vue
@@ -20,7 +20,7 @@ const pager = ref({
     pageSize: 5,
     total: 0,
     pageSizes: [5, 10, 15, 20],
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 })
 const cityFilter = ref({
diff --git a/examples/sites/demos/pc/app/grid/filter/server-filter-default-composition-api.vue b/examples/sites/demos/pc/app/grid/filter/server-filter-default-composition-api.vue
index 3263970df..fd884543e 100644
--- a/examples/sites/demos/pc/app/grid/filter/server-filter-default-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/filter/server-filter-default-composition-api.vue
@@ -23,7 +23,7 @@ const pager = ref({
     pageSize: 5,
     total: 0,
     pageSizes: [5, 10, 15, 20],
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 })
 
diff --git a/examples/sites/demos/pc/app/grid/filter/server-filter-default.vue b/examples/sites/demos/pc/app/grid/filter/server-filter-default.vue
index 4eb7da4a9..901726f94 100644
--- a/examples/sites/demos/pc/app/grid/filter/server-filter-default.vue
+++ b/examples/sites/demos/pc/app/grid/filter/server-filter-default.vue
@@ -30,7 +30,7 @@ export default {
           pageSize: 5,
           total: 0,
           pageSizes: [5, 10, 15, 20],
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       cityFilter: {
diff --git a/examples/sites/demos/pc/app/grid/filter/server-filter.vue b/examples/sites/demos/pc/app/grid/filter/server-filter.vue
index 718b56dfc..b7ed49ae9 100644
--- a/examples/sites/demos/pc/app/grid/filter/server-filter.vue
+++ b/examples/sites/demos/pc/app/grid/filter/server-filter.vue
@@ -26,7 +26,7 @@ export default {
           pageSize: 5,
           total: 0,
           pageSizes: [5, 10, 15, 20],
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       cityFilter: {
diff --git a/examples/sites/demos/pc/app/grid/header/custom-grid-header-composition-api.vue b/examples/sites/demos/pc/app/grid/header/custom-grid-header-composition-api.vue
index 3c68df1a7..809a560c8 100644
--- a/examples/sites/demos/pc/app/grid/header/custom-grid-header-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/header/custom-grid-header-composition-api.vue
@@ -2,7 +2,7 @@
   <tiny-grid :data="tableData" resizable :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
     <tiny-grid-column title="操作" header-align="center">
       <tiny-grid-column type="index" width="40"></tiny-grid-column>
-      <tiny-grid-column type="selection" width="40"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="48"></tiny-grid-column>
       <tiny-grid-column :renderer="rendererCellOperate" width="100"></tiny-grid-column>
     </tiny-grid-column>
     <tiny-grid-column :title="renderHeaderDescription" header-align="center">
@@ -100,7 +100,7 @@ const options = ref([
   { label: '华南区', value: '华南区' }
 ])
 
-function renderHeaderDescription(h) {
+function renderHeaderDescription() {
   return (
     <span>
       {' '}
@@ -110,7 +110,7 @@ function renderHeaderDescription(h) {
   )
 }
 
-function renderHeaderRelation(h) {
+function renderHeaderRelation() {
   return (
     <span>
       <IconVersiontree />
@@ -118,8 +118,7 @@ function renderHeaderRelation(h) {
   )
 }
 
-// eslint-disable-next-line
-function renderHeaderArea(h) {
+function renderHeaderArea() {
   return (
     <span>
       <IconMarkOn />
@@ -128,7 +127,7 @@ function renderHeaderArea(h) {
   )
 }
 
-function renderHeaderAddress(h) {
+function renderHeaderAddress() {
   return (
     <span>
       <IconUser />
@@ -137,7 +136,7 @@ function renderHeaderAddress(h) {
   )
 }
 
-function rendererCellOperate(h) {
+function rendererCellOperate() {
   return (
     <div style="text-align: center; font-size: 16px;">
       <IconHelpful />
diff --git a/examples/sites/demos/pc/app/grid/header/custom-grid-header.vue b/examples/sites/demos/pc/app/grid/header/custom-grid-header.vue
index b0a5248d4..2ea1ef04a 100644
--- a/examples/sites/demos/pc/app/grid/header/custom-grid-header.vue
+++ b/examples/sites/demos/pc/app/grid/header/custom-grid-header.vue
@@ -2,7 +2,7 @@
   <tiny-grid :data="tableData" resizable :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
     <tiny-grid-column title="操作" header-align="center">
       <tiny-grid-column type="index" width="40"></tiny-grid-column>
-      <tiny-grid-column type="selection" width="40"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="48"></tiny-grid-column>
       <tiny-grid-column :renderer="rendererCellOperate" width="100"></tiny-grid-column>
     </tiny-grid-column>
     <tiny-grid-column :title="renderHeaderDescription" header-align="center">
@@ -108,8 +108,7 @@ export default {
     }
   },
   methods: {
-    // eslint-disable-next-line
-    renderHeaderDescription(h) {
+    renderHeaderDescription() {
       const IconAdministrator = this.IconAdministrator
 
       return (
@@ -120,7 +119,7 @@ export default {
         </span>
       )
     },
-    renderHeaderRelation(h) {
+    renderHeaderRelation() {
       const IconVersiontree = this.IconVersiontree
 
       return (
@@ -129,7 +128,6 @@ export default {
         </span>
       )
     },
-    // eslint-disable-next-line
     renderHeaderArea(h) {
       const IconMarkOn = this.IconMarkOn
 
@@ -140,8 +138,8 @@ export default {
         </span>
       )
     },
-    // eslint-disable-next-line
-    renderHeaderAddress(h) {
+
+    renderHeaderAddress() {
       const IconUser = this.IconUser
 
       return (
@@ -151,8 +149,8 @@ export default {
         </span>
       )
     },
-    // eslint-disable-next-line
-    rendererCellOperate(h) {
+
+    rendererCellOperate() {
       const IconAssociation = this.IconAssociation
       const IconHelpful = this.IconHelpful
 
diff --git a/examples/sites/demos/pc/app/grid/header/many-header-switching-composition-api.vue b/examples/sites/demos/pc/app/grid/header/many-header-switching-composition-api.vue
index f5d1ca64f..05a8f6ab9 100644
--- a/examples/sites/demos/pc/app/grid/header/many-header-switching-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/header/many-header-switching-composition-api.vue
@@ -6,7 +6,7 @@
     <tiny-grid :data="tableData" resizable :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
       <tiny-grid-column title="操作" header-align="center">
         <tiny-grid-column type="index" width="60"></tiny-grid-column>
-        <tiny-grid-column type="selection" width="40" v-if="flag"></tiny-grid-column>
+        <tiny-grid-column type="selection" width="48" v-if="flag"></tiny-grid-column>
         <tiny-grid-column :renderer="rendererCellOperate" width="100" v-if="flag"></tiny-grid-column>
       </tiny-grid-column>
       <tiny-grid-column :title="renderHeaderDescription" header-align="center">
diff --git a/examples/sites/demos/pc/app/grid/header/many-header-switching.vue b/examples/sites/demos/pc/app/grid/header/many-header-switching.vue
index aa9d315e6..b5a4589b4 100644
--- a/examples/sites/demos/pc/app/grid/header/many-header-switching.vue
+++ b/examples/sites/demos/pc/app/grid/header/many-header-switching.vue
@@ -6,7 +6,7 @@
     <tiny-grid :data="tableData" resizable :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
       <tiny-grid-column title="操作" header-align="center">
         <tiny-grid-column type="index" width="60"></tiny-grid-column>
-        <tiny-grid-column type="selection" width="40" v-if="flag"></tiny-grid-column>
+        <tiny-grid-column type="selection" width="48" v-if="flag"></tiny-grid-column>
         <tiny-grid-column :renderer="rendererCellOperate" width="100" v-if="flag"></tiny-grid-column>
       </tiny-grid-column>
       <tiny-grid-column :title="renderHeaderDescription" header-align="center">
diff --git a/examples/sites/demos/pc/app/grid/header/slot-header-composition-api.vue b/examples/sites/demos/pc/app/grid/header/slot-header-composition-api.vue
index 68a40bb2d..8348a05a8 100644
--- a/examples/sites/demos/pc/app/grid/header/slot-header-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/header/slot-header-composition-api.vue
@@ -3,7 +3,7 @@
     <tiny-grid-column header-align="center">
       <template #header>操作</template>
       <tiny-grid-column type="index" width="40"></tiny-grid-column>
-      <tiny-grid-column type="selection" width="40"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="48"></tiny-grid-column>
       <tiny-grid-column width="100" align="center">
         <tiny-icon-helpful style="text-align: center; font-size: 16px; fill"></tiny-icon-helpful>
         &nbsp;&nbsp;
diff --git a/examples/sites/demos/pc/app/grid/header/slot-header.vue b/examples/sites/demos/pc/app/grid/header/slot-header.vue
index 99d87c190..f81d523c2 100644
--- a/examples/sites/demos/pc/app/grid/header/slot-header.vue
+++ b/examples/sites/demos/pc/app/grid/header/slot-header.vue
@@ -3,7 +3,7 @@
     <tiny-grid-column header-align="center">
       <template #header>操作</template>
       <tiny-grid-column type="index" width="40"></tiny-grid-column>
-      <tiny-grid-column type="selection" width="40"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="48"></tiny-grid-column>
       <tiny-grid-column width="100" align="center">
         <icon-helpful style="text-align: center; font-size: 16px; fill"></icon-helpful>
         &nbsp;&nbsp;
diff --git a/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active-composition-api.vue b/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active-composition-api.vue
index 68f6ffa05..0b25f600f 100644
--- a/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active-composition-api.vue
@@ -183,7 +183,7 @@ const pagerConfig = ref({
     pageSize: 3,
     pageSizes: [3, 5, 10],
     total: 0,
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 })
 const fetchData = { api: getData }
diff --git a/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active.vue b/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active.vue
index 50b453efc..3438e9f3c 100644
--- a/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active.vue
+++ b/examples/sites/demos/pc/app/grid/large-data/column-anchor-clear-active.vue
@@ -171,7 +171,7 @@ export default {
           pageSize: 3,
           pageSizes: [3, 5, 10],
           total: 0,
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       fetchData: { api: this.getData }
diff --git a/examples/sites/demos/pc/app/grid/large-data/full-data-loading.spec.js b/examples/sites/demos/pc/app/grid/large-data/full-data-loading.spec.js
index 569b452af..796681dac 100644
--- a/examples/sites/demos/pc/app/grid/large-data/full-data-loading.spec.js
+++ b/examples/sites/demos/pc/app/grid/large-data/full-data-loading.spec.js
@@ -6,11 +6,11 @@ test('全量加载', async ({ page }) => {
   await page.locator('.tiny-grid__body').hover()
   // 先滚动1000px
   await page.mouse.wheel(0, 1000)
-  await expect(page.getByRole('cell', { name: '39' })).toBeVisible()
+  await expect(page.getByRole('cell', { name: '33' })).toBeVisible()
   await page.waitForTimeout(500)
   await page.locator('.tiny-grid__body').hover()
   // 先滚动4000px
   await page.mouse.wheel(0, 5000)
   await page.waitForTimeout(200)
-  await expect(page.getByRole('cell', { name: '218' })).toBeVisible()
+  await expect(page.getByRole('cell', { name: '175' })).toBeVisible()
 })
diff --git a/examples/sites/demos/pc/app/grid/operation-column/clear-and-set-radio-row-composition-api.vue b/examples/sites/demos/pc/app/grid/operation-column/clear-and-set-radio-row-composition-api.vue
index f170d5a0d..878133cae 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/clear-and-set-radio-row-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/clear-and-set-radio-row-composition-api.vue
@@ -3,8 +3,7 @@
     <template #toolbar>
       <tiny-grid-toolbar :buttons="toolbarButtons"></tiny-grid-toolbar>
     </template>
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="radio" width="60"></tiny-grid-column>
+    <tiny-grid-column type="radio" width="40"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称"></tiny-grid-column>
     <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
     <tiny-grid-column field="address" title="地址"></tiny-grid-column>
@@ -85,3 +84,18 @@ function toolbarButtonClickEvent({ code }) {
   }
 }
 </script>
+
+<style scoped lang="less">
+:deep(.tiny-grid) {
+  &-header__column,
+  &-body__column {
+    &.col__radio {
+      padding: 0 8px 0 16px;
+      & + th,
+      + td {
+        padding-left: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/operation-column/clear-and-set-radio-row.vue b/examples/sites/demos/pc/app/grid/operation-column/clear-and-set-radio-row.vue
index f1499c033..ce81649ad 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/clear-and-set-radio-row.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/clear-and-set-radio-row.vue
@@ -3,8 +3,7 @@
     <template #toolbar>
       <tiny-grid-toolbar :buttons="toolbarButtons"></tiny-grid-toolbar>
     </template>
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="radio" width="60"></tiny-grid-column>
+    <tiny-grid-column type="radio" width="40"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称"></tiny-grid-column>
     <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
     <tiny-grid-column field="address" title="地址"></tiny-grid-column>
@@ -95,3 +94,18 @@ export default {
   }
 }
 </script>
+
+<style scoped lang="less">
+:deep(.tiny-grid) {
+  &-header__column,
+  &-body__column {
+    &.col__radio {
+      padding: 0 8px 0 16px;
+      & + th,
+      + td {
+        padding-left: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/operation-column/custom-operation-column-composition-api.vue b/examples/sites/demos/pc/app/grid/operation-column/custom-operation-column-composition-api.vue
index 2890c7e57..35d7e910b 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/custom-operation-column-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/custom-operation-column-composition-api.vue
@@ -1,7 +1,6 @@
 <template>
   <tiny-grid :data="tableData">
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+    <tiny-grid-column type="selection" width="40"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称"></tiny-grid-column>
     <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
     <tiny-grid-column field="address" title="地址"></tiny-grid-column>
@@ -90,4 +89,18 @@ function clickHandler(row) {
 .demo-custom-column svg:not(:last-child) {
   margin-right: 8px;
 }
+
+:deep(.tiny-grid) {
+  &-header__column,
+  &-body__column {
+    &.col__selection,
+    &.col__radio {
+      padding: 0 8px 0 16px;
+      & + th,
+      + td {
+        padding-left: 0;
+      }
+    }
+  }
+}
 </style>
diff --git a/examples/sites/demos/pc/app/grid/operation-column/custom-operation-column.spec.js b/examples/sites/demos/pc/app/grid/operation-column/custom-operation-column.spec.js
index 3461a7459..61e312661 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/custom-operation-column.spec.js
+++ b/examples/sites/demos/pc/app/grid/operation-column/custom-operation-column.spec.js
@@ -8,7 +8,7 @@ test('自定义操作列', async ({ page }) => {
   await expect(
     page
       .getByRole('row', {
-        name: '1 GFD科技YX公司 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        name: 'GFD科技YX公司 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
       })
       .getByRole('img')
       .nth(1)
diff --git a/examples/sites/demos/pc/app/grid/operation-column/custom-operation-column.vue b/examples/sites/demos/pc/app/grid/operation-column/custom-operation-column.vue
index 32172337d..c79d66aaa 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/custom-operation-column.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/custom-operation-column.vue
@@ -1,7 +1,6 @@
 <template>
   <tiny-grid :data="tableData">
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+    <tiny-grid-column type="selection" width="40"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称"></tiny-grid-column>
     <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
     <tiny-grid-column field="address" title="地址"></tiny-grid-column>
@@ -84,7 +83,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="less">
 .demo-custom-column {
   font-size: 0;
 }
@@ -99,4 +98,18 @@ export default {
 .demo-custom-column svg:not(:last-child) {
   margin-right: 8px;
 }
+
+:deep(.tiny-grid) {
+  &-header__column,
+  &-body__column {
+    &.col__selection,
+    &.col__radio {
+      padding: 0 8px 0 16px;
+      & + th,
+      + td {
+        padding-left: 0;
+      }
+    }
+  }
+}
 </style>
diff --git a/examples/sites/demos/pc/app/grid/operation-column/dropdown-composition-api.vue b/examples/sites/demos/pc/app/grid/operation-column/dropdown-composition-api.vue
index d8f90aac6..ca27ee96e 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/dropdown-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/dropdown-composition-api.vue
@@ -1,9 +1,8 @@
 <template>
   <tiny-grid ref="gridRef" :data="tableData">
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column type="selection" width="80">
       <template #dropdown>
-        <tiny-dropdown class="ml-6" title="" @item-click="itemClick">
+        <tiny-dropdown class="ml-12" title="" @item-click="itemClick">
           <template #dropdown>
             <tiny-dropdown-menu placement="top">
               <tiny-dropdown-item :item-data="{ name: 'selectCurPage' }"> 选择本页数据 </tiny-dropdown-item>
@@ -89,7 +88,7 @@ function itemClick({ itemData }) {
 </script>
 
 <style scoped>
-.ml-6 {
-  left: 6px;
+.ml-12 {
+  left: 12px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/grid/operation-column/dropdown.vue b/examples/sites/demos/pc/app/grid/operation-column/dropdown.vue
index 2ade7c190..0a47a5c17 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/dropdown.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/dropdown.vue
@@ -1,9 +1,8 @@
 <template>
   <tiny-grid ref="grid" :data="tableData">
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column type="selection" width="80">
       <template #dropdown>
-        <tiny-dropdown class="ml-6" title="" @item-click="itemClick">
+        <tiny-dropdown class="ml-12" title="" @item-click="itemClick">
           <template #dropdown>
             <tiny-dropdown-menu placement="top">
               <tiny-dropdown-item :item-data="{ name: 'selectCurPage' }"> 选择本页数据 </tiny-dropdown-item>
@@ -95,7 +94,7 @@ export default {
 </script>
 
 <style scoped>
-.ml-6 {
-  left: 6px;
+.ml-12 {
+  left: 12px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/grid/operation-column/grid-pager-reserve-composition-api.vue b/examples/sites/demos/pc/app/grid/operation-column/grid-pager-reserve-composition-api.vue
index baadd4644..1f4eb0506 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/grid-pager-reserve-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/grid-pager-reserve-composition-api.vue
@@ -11,8 +11,7 @@
       @select-change="selectedDevices"
       :select-config="tableSelectConfigData"
     >
-      <tiny-grid-column type="selection" width="60"></tiny-grid-column>
-      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="40"></tiny-grid-column>
       <tiny-grid-column field="name" title="名称"></tiny-grid-column>
       <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
       <tiny-grid-column field="address" title="地址"></tiny-grid-column>
@@ -47,7 +46,7 @@ const pagerConfig = ref({
     pageSize: 5,
     pageSizes: [5, 10],
     total: 0,
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 })
 const fetchData = ref({
@@ -159,3 +158,19 @@ function selectedDevices({ $table }) {
   })
 }
 </script>
+
+<style scoped lang="less">
+:deep(.tiny-grid) {
+  &-header__column,
+  &-body__column {
+    &.col__selection,
+    &.col__radio {
+      padding: 0 8px 0 16px;
+      & + th,
+      + td {
+        padding-left: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/operation-column/grid-pager-reserve.spec.js b/examples/sites/demos/pc/app/grid/operation-column/grid-pager-reserve.spec.js
index b8f50b749..4aa060df4 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/grid-pager-reserve.spec.js
+++ b/examples/sites/demos/pc/app/grid/operation-column/grid-pager-reserve.spec.js
@@ -5,7 +5,7 @@ test('翻页后保留选中状态', async ({ page }) => {
   await page.goto('grid-operation-column#operation-column-grid-pager-reserve')
   await page
     .getByRole('row', {
-      name: '1 GFD科技YX公司 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+      name: 'GFD科技YX公司 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
     })
     .locator('path')
     .first()
@@ -13,7 +13,7 @@ test('翻页后保留选中状态', async ({ page }) => {
   await page.getByRole('list').getByText('2').click()
   await page
     .getByRole('row', {
-      name: '8 西安门福德宝网络技术YX公司 华东区 厦门 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+      name: '西安门福德宝网络技术YX公司 华东区 厦门 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
     })
     .locator('path')
     .first()
diff --git a/examples/sites/demos/pc/app/grid/operation-column/grid-pager-reserve.vue b/examples/sites/demos/pc/app/grid/operation-column/grid-pager-reserve.vue
index be9c3acdd..7fa77b3e6 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/grid-pager-reserve.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/grid-pager-reserve.vue
@@ -11,8 +11,7 @@
       @select-change="selectedDevices"
       :select-config="tableSelectConfigData"
     >
-      <tiny-grid-column type="selection" width="60"></tiny-grid-column>
-      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="40"></tiny-grid-column>
       <tiny-grid-column field="name" title="名称"></tiny-grid-column>
       <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
       <tiny-grid-column field="address" title="地址"></tiny-grid-column>
@@ -47,7 +46,7 @@ export default {
           pageSize: 5,
           pageSizes: [5, 10],
           total: 0,
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       fetchData: {
@@ -158,3 +157,19 @@ export default {
   }
 }
 </script>
+
+<style scoped lang="less">
+:deep(.tiny-grid) {
+  &-header__column,
+  &-body__column {
+    &.col__selection,
+    &.col__radio {
+      padding: 0 8px 0 16px;
+      & + th,
+      + td {
+        padding-left: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/operation-column/header-select-disabled-composition-api.vue b/examples/sites/demos/pc/app/grid/operation-column/header-select-disabled-composition-api.vue
index 74feee238..591e934a0 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/header-select-disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/header-select-disabled-composition-api.vue
@@ -1,6 +1,5 @@
 <template>
   <tiny-grid ref="mytableRef" :select-config="selectConfig" :data="tableData">
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column type="selection" width="60"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称"></tiny-grid-column>
     <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
diff --git a/examples/sites/demos/pc/app/grid/operation-column/header-select-disabled.vue b/examples/sites/demos/pc/app/grid/operation-column/header-select-disabled.vue
index 9e2e6a0e8..1abc8c67c 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/header-select-disabled.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/header-select-disabled.vue
@@ -1,6 +1,5 @@
 <template>
   <tiny-grid ref="mytable" :select-config="selectConfig" :data="tableData">
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column type="selection" width="60"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称"></tiny-grid-column>
     <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
diff --git a/examples/sites/demos/pc/app/grid/operation-column/radio-config-composition-api.vue b/examples/sites/demos/pc/app/grid/operation-column/radio-config-composition-api.vue
index 3e458a400..7ddcd1129 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/radio-config-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/radio-config-composition-api.vue
@@ -1,6 +1,5 @@
 <template>
   <tiny-grid ref="mytableRef" :radio-config="radioConfigData" :data="tableData">
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column type="radio" width="100"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称"></tiny-grid-column>
     <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
diff --git a/examples/sites/demos/pc/app/grid/operation-column/radio-config.vue b/examples/sites/demos/pc/app/grid/operation-column/radio-config.vue
index fb13e1222..dfa3fb9cf 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/radio-config.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/radio-config.vue
@@ -1,6 +1,5 @@
 <template>
   <tiny-grid ref="mytable" :radio-config="radioConfigData" :data="tableData">
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column type="radio" width="100"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称"></tiny-grid-column>
     <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
diff --git a/examples/sites/demos/pc/app/grid/operation-column/refresh-grid-composition-api.vue b/examples/sites/demos/pc/app/grid/operation-column/refresh-grid-composition-api.vue
index 9272547f2..0dd509790 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/refresh-grid-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/refresh-grid-composition-api.vue
@@ -5,8 +5,7 @@
       <template #toolbar>
         <tiny-grid-toolbar refresh></tiny-grid-toolbar>
       </template>
-      <tiny-grid-column type="index" width="60"></tiny-grid-column>
-      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+
       <tiny-grid-column field="name" title="名称"></tiny-grid-column>
       <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
       <tiny-grid-column field="address" title="地址"></tiny-grid-column>
@@ -33,7 +32,7 @@ const pagerConfig = ref({
     pageSize: 5,
     pageSizes: [5, 10],
     total: 0,
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 })
 const fetchData = ref({
diff --git a/examples/sites/demos/pc/app/grid/operation-column/selection-config-composition-api.vue b/examples/sites/demos/pc/app/grid/operation-column/selection-config-composition-api.vue
index dc5edeaf7..fa7068fb2 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/selection-config-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/selection-config-composition-api.vue
@@ -8,7 +8,6 @@
       border
       :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
     >
-      <tiny-grid-column type="index" width="60"></tiny-grid-column>
       <tiny-grid-column type="selection" width="60"></tiny-grid-column>
       <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
       <tiny-grid-column
@@ -119,3 +118,19 @@ const checkboxEdit = (h, { row, column }) => {
   )
 }
 </script>
+
+<style scoped lang="less">
+:deep(.tiny-grid) {
+  &-header__column,
+  &-body__column {
+    &.col__selection,
+    &.col__radio {
+      padding: 0 8px 0 16px;
+      & + th,
+      + td {
+        padding-left: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/operation-column/selection-config.vue b/examples/sites/demos/pc/app/grid/operation-column/selection-config.vue
index 28b79aa6f..0ac6bd0a2 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/selection-config.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/selection-config.vue
@@ -5,11 +5,9 @@
       ref="grid"
       :select-config="selectConfig"
       highlight-current-row
-      border
       :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
     >
-      <tiny-grid-column type="index" width="60"></tiny-grid-column>
-      <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="40"></tiny-grid-column>
       <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
       <tiny-grid-column
         field="createdDate"
@@ -128,3 +126,19 @@ export default {
   }
 }
 </script>
+
+<style scoped lang="less">
+:deep(.tiny-grid) {
+  &-header__column,
+  &-body__column {
+    &.col__selection,
+    &.col__radio {
+      padding: 0 8px 0 16px;
+      & + th,
+      + td {
+        padding-left: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/operation-column/selection-operation-composition-api.vue b/examples/sites/demos/pc/app/grid/operation-column/selection-operation-composition-api.vue
index 12084a6b1..d01ff7b09 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/selection-operation-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/selection-operation-composition-api.vue
@@ -3,8 +3,8 @@
     <template #toolbar>
       <tiny-grid-toolbar :buttons="toolbarButtons"></tiny-grid-toolbar>
     </template>
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+
+    <tiny-grid-column type="selection" width="40"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称"></tiny-grid-column>
     <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
     <tiny-grid-column field="address" title="地址"></tiny-grid-column>
@@ -108,3 +108,19 @@ function toolbarButtonClickEvent({ code, $grid }) {
   }
 }
 </script>
+
+<style scoped lang="less">
+:deep(.tiny-grid) {
+  &-header__column,
+  &-body__column {
+    &.col__selection,
+    &.col__radio {
+      padding: 0 8px 0 16px;
+      & + th,
+      + td {
+        padding-left: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/operation-column/selection-operation.vue b/examples/sites/demos/pc/app/grid/operation-column/selection-operation.vue
index dd4c5c28e..1d1a82341 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/selection-operation.vue
+++ b/examples/sites/demos/pc/app/grid/operation-column/selection-operation.vue
@@ -3,8 +3,8 @@
     <template #toolbar>
       <tiny-grid-toolbar :buttons="toolbarButtons"></tiny-grid-toolbar>
     </template>
-    <tiny-grid-column type="index" width="60"></tiny-grid-column>
-    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+
+    <tiny-grid-column type="selection" width="40"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称"></tiny-grid-column>
     <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
     <tiny-grid-column field="address" title="地址"></tiny-grid-column>
@@ -119,3 +119,19 @@ export default {
   }
 }
 </script>
+
+<style scoped lang="less">
+:deep(.tiny-grid) {
+  &-header__column,
+  &-body__column {
+    &.col__selection,
+    &.col__radio {
+      padding: 0 8px 0 16px;
+      & + th,
+      + td {
+        padding-left: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/pager/inner-default-pager-composition-api.vue b/examples/sites/demos/pc/app/grid/pager/inner-default-pager-composition-api.vue
index 93e84b6ea..ad2b9c308 100644
--- a/examples/sites/demos/pc/app/grid/pager/inner-default-pager-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/pager/inner-default-pager-composition-api.vue
@@ -21,7 +21,7 @@ const pagerConfig = ref({
     pageSizes: [5, 10],
     total: 0,
     align: 'right', // 可选值：['left', 'center', 'right']
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 })
 const fetchData = ref({
diff --git a/examples/sites/demos/pc/app/grid/pager/inner-default-pager.vue b/examples/sites/demos/pc/app/grid/pager/inner-default-pager.vue
index 8259e2b16..3b304462d 100644
--- a/examples/sites/demos/pc/app/grid/pager/inner-default-pager.vue
+++ b/examples/sites/demos/pc/app/grid/pager/inner-default-pager.vue
@@ -27,7 +27,7 @@ export default {
           pageSizes: [5, 10],
           total: 0,
           align: 'right', // 可选值：['left', 'center', 'right']
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       fetchData: {
diff --git a/examples/sites/demos/pc/app/grid/pager/inner-pager-composition-api.vue b/examples/sites/demos/pc/app/grid/pager/inner-pager-composition-api.vue
index 4816e0b50..84e209bac 100644
--- a/examples/sites/demos/pc/app/grid/pager/inner-pager-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/pager/inner-pager-composition-api.vue
@@ -21,7 +21,7 @@ const pagerConfig = ref({
     pageSize: 5,
     pageSizes: [5, 10],
     total: 0,
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 })
 const fetchData = ref({
diff --git a/examples/sites/demos/pc/app/grid/pager/inner-pager.vue b/examples/sites/demos/pc/app/grid/pager/inner-pager.vue
index 5b8d9fb48..71e7b2609 100644
--- a/examples/sites/demos/pc/app/grid/pager/inner-pager.vue
+++ b/examples/sites/demos/pc/app/grid/pager/inner-pager.vue
@@ -27,7 +27,7 @@ export default {
           pageSize: 5,
           pageSizes: [5, 10],
           total: 0,
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       fetchData: {
diff --git a/examples/sites/demos/pc/app/grid/pager/pager-in-grid-composition-api.vue b/examples/sites/demos/pc/app/grid/pager/pager-in-grid-composition-api.vue
index b219feae1..8984d4de9 100644
--- a/examples/sites/demos/pc/app/grid/pager/pager-in-grid-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/pager/pager-in-grid-composition-api.vue
@@ -30,7 +30,7 @@
       :page-sizes="[5, 10, 20, 50]"
       @current-change="currentChange"
       @size-change="sizeChange"
-      layout="total, prev, pager, next, jumper, sizes"
+      layout="total, sizes, prev, pager, next, jumper"
     ></tiny-pager>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/grid/pager/pager-in-grid.vue b/examples/sites/demos/pc/app/grid/pager/pager-in-grid.vue
index 86e24ab44..903ff8b97 100644
--- a/examples/sites/demos/pc/app/grid/pager/pager-in-grid.vue
+++ b/examples/sites/demos/pc/app/grid/pager/pager-in-grid.vue
@@ -30,7 +30,7 @@
       :page-sizes="[5, 10, 20, 50]"
       @current-change="currentChange"
       @size-change="sizeChange"
-      layout="total, prev, pager, next, jumper, sizes"
+      layout="total, sizes, prev, pager, next, jumper"
     ></tiny-pager>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/grid/pager/show-save-msg-composition-api.vue b/examples/sites/demos/pc/app/grid/pager/show-save-msg-composition-api.vue
index 132dba0dc..f8c1807ec 100644
--- a/examples/sites/demos/pc/app/grid/pager/show-save-msg-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/pager/show-save-msg-composition-api.vue
@@ -29,7 +29,7 @@ const pagerConfig = ref({
     pageSize: 5,
     pageSizes: [5, 10],
     total: 0,
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 })
 const fetchData = ref({
diff --git a/examples/sites/demos/pc/app/grid/pager/show-save-msg.vue b/examples/sites/demos/pc/app/grid/pager/show-save-msg.vue
index 63988b38e..715f21246 100644
--- a/examples/sites/demos/pc/app/grid/pager/show-save-msg.vue
+++ b/examples/sites/demos/pc/app/grid/pager/show-save-msg.vue
@@ -35,7 +35,7 @@ export default {
           pageSize: 5,
           pageSizes: [5, 10],
           total: 0,
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       fetchData: {
diff --git a/examples/sites/demos/pc/app/grid/renderer/async-colunm-render-composition-api.vue b/examples/sites/demos/pc/app/grid/renderer/async-colunm-render-composition-api.vue
index 2181d5f1f..6d2c280fd 100644
--- a/examples/sites/demos/pc/app/grid/renderer/async-colunm-render-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/renderer/async-colunm-render-composition-api.vue
@@ -40,7 +40,7 @@ const pagerConfig = ref({
     pageSize: 5,
     pageSizes: [5, 10],
     total: 0,
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 })
 const fetchData = ref({
diff --git a/examples/sites/demos/pc/app/grid/renderer/async-colunm-render.vue b/examples/sites/demos/pc/app/grid/renderer/async-colunm-render.vue
index 996eee091..32b46739e 100644
--- a/examples/sites/demos/pc/app/grid/renderer/async-colunm-render.vue
+++ b/examples/sites/demos/pc/app/grid/renderer/async-colunm-render.vue
@@ -48,7 +48,7 @@ export default {
           pageSize: 5,
           pageSizes: [5, 10],
           total: 0,
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       fetchData: {
diff --git a/examples/sites/demos/pc/app/grid/serial-column/start-index-composition-api.vue b/examples/sites/demos/pc/app/grid/serial-column/start-index-composition-api.vue
index ddf65756d..1aa44bc8c 100644
--- a/examples/sites/demos/pc/app/grid/serial-column/start-index-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/serial-column/start-index-composition-api.vue
@@ -11,7 +11,7 @@
           pageSize: 5,
           pageSizes: [5, 10],
           total: 0,
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       }"
     >
diff --git a/examples/sites/demos/pc/app/grid/serial-column/start-index.vue b/examples/sites/demos/pc/app/grid/serial-column/start-index.vue
index ea7ccf836..f8b7788ef 100644
--- a/examples/sites/demos/pc/app/grid/serial-column/start-index.vue
+++ b/examples/sites/demos/pc/app/grid/serial-column/start-index.vue
@@ -11,7 +11,7 @@
           pageSize: 5,
           pageSizes: [5, 10],
           total: 0,
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       }"
     >
diff --git a/examples/sites/demos/pc/app/grid/size/auto-height-composition-api.vue b/examples/sites/demos/pc/app/grid/size/auto-height-composition-api.vue
index 621b77f8b..7cbac11f3 100644
--- a/examples/sites/demos/pc/app/grid/size/auto-height-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/size/auto-height-composition-api.vue
@@ -30,7 +30,7 @@ const pagerConfig = ref({
     pageSize: 10,
     pageSizes: [5, 10],
     total: 0,
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 })
 const fetchData = ref({
diff --git a/examples/sites/demos/pc/app/grid/size/auto-height.vue b/examples/sites/demos/pc/app/grid/size/auto-height.vue
index 7fbc0afee..24ae818bc 100644
--- a/examples/sites/demos/pc/app/grid/size/auto-height.vue
+++ b/examples/sites/demos/pc/app/grid/size/auto-height.vue
@@ -37,7 +37,7 @@ export default {
           pageSize: 10,
           pageSizes: [5, 10],
           total: 0,
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       fetchData: {
diff --git a/examples/sites/demos/pc/app/grid/size/column-width-composition-api.vue b/examples/sites/demos/pc/app/grid/size/column-width-composition-api.vue
index fac4fa78d..090f6f275 100644
--- a/examples/sites/demos/pc/app/grid/size/column-width-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/size/column-width-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <tiny-grid :column-width="200" :data="tableData">
+  <tiny-grid :column-width="250" :data="tableData">
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称"></tiny-grid-column>
     <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
diff --git a/examples/sites/demos/pc/app/grid/size/column-width.spec.js b/examples/sites/demos/pc/app/grid/size/column-width.spec.js
index 22bf0a9a5..349c75a2c 100644
--- a/examples/sites/demos/pc/app/grid/size/column-width.spec.js
+++ b/examples/sites/demos/pc/app/grid/size/column-width.spec.js
@@ -5,9 +5,9 @@ test('设置所有列宽度', async ({ page }) => {
   await page.goto('grid-size#size-column-width')
 
   const { width: width1 } = await page.getByRole('cell', { name: '所属区域' }).boundingBox()
-  await expect(width1).toEqual(200)
+  await expect(width1).toEqual(250)
   const { width: width2 } = await page.getByRole('cell', { name: '地址' }).boundingBox()
-  await expect(width2).toEqual(200)
+  await expect(width2).toEqual(250)
   const { width: width3 } = await page.getByRole('cell', { name: '公司简介' }).boundingBox()
-  await expect(width3).toEqual(200)
+  await expect(width3).toEqual(250)
 })
diff --git a/examples/sites/demos/pc/app/grid/size/column-width.vue b/examples/sites/demos/pc/app/grid/size/column-width.vue
index 43c3ac0af..0b2f53cbc 100644
--- a/examples/sites/demos/pc/app/grid/size/column-width.vue
+++ b/examples/sites/demos/pc/app/grid/size/column-width.vue
@@ -1,5 +1,5 @@
 <template>
-  <tiny-grid :column-width="200" :data="tableData">
+  <tiny-grid :column-width="250" :data="tableData">
     <tiny-grid-column type="index" width="60"></tiny-grid-column>
     <tiny-grid-column field="name" title="名称"></tiny-grid-column>
     <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
diff --git a/examples/sites/demos/pc/app/grid/size/grid-size-composition-api.vue b/examples/sites/demos/pc/app/grid/size/grid-size-composition-api.vue
index b35a2c80d..7155d1650 100644
--- a/examples/sites/demos/pc/app/grid/size/grid-size-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/size/grid-size-composition-api.vue
@@ -2,8 +2,7 @@
   <tiny-tabs v-model="activeName" tab-style="card">
     <tiny-tab-item title="medium" name="medium">
       <tiny-grid :data="tableData" size="medium" :auto-resize="true">
-        <tiny-grid-column type="index" width="60"></tiny-grid-column>
-        <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+        <tiny-grid-column type="selection" width="40"></tiny-grid-column>
         <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
         <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
         <tiny-grid-column field="city" title="城市"></tiny-grid-column>
@@ -11,8 +10,7 @@
     </tiny-tab-item>
     <tiny-tab-item title="small" name="small">
       <tiny-grid :data="tableData" size="small" :auto-resize="true">
-        <tiny-grid-column type="index" width="60"></tiny-grid-column>
-        <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+        <tiny-grid-column type="selection" width="40"></tiny-grid-column>
         <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
         <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
         <tiny-grid-column field="city" title="城市"></tiny-grid-column>
@@ -20,8 +18,7 @@
     </tiny-tab-item>
     <tiny-tab-item title="mini" name="mini">
       <tiny-grid :data="tableData" size="mini" :auto-resize="true">
-        <tiny-grid-column type="index" width="60"></tiny-grid-column>
-        <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+        <tiny-grid-column type="selection" width="40"></tiny-grid-column>
         <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
         <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
         <tiny-grid-column field="city" title="城市"></tiny-grid-column>
@@ -103,3 +100,19 @@ const tableData = ref([
   }
 ])
 </script>
+
+<style scoped lang="less">
+:deep(.tiny-grid) {
+  &-header__column,
+  &-body__column {
+    &.col__selection,
+    &.col__radio {
+      padding: 0 8px 0 16px;
+      & + th,
+      + td {
+        padding-left: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/size/grid-size.vue b/examples/sites/demos/pc/app/grid/size/grid-size.vue
index 7038de5ba..31f476877 100644
--- a/examples/sites/demos/pc/app/grid/size/grid-size.vue
+++ b/examples/sites/demos/pc/app/grid/size/grid-size.vue
@@ -2,8 +2,7 @@
   <tiny-tabs v-model="activeName" tab-style="card">
     <tiny-tab-item title="medium" name="medium">
       <tiny-grid :data="tableData" size="medium" :auto-resize="true">
-        <tiny-grid-column type="index" width="60"></tiny-grid-column>
-        <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+        <tiny-grid-column type="selection" width="40"></tiny-grid-column>
         <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
         <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
         <tiny-grid-column field="city" title="城市"></tiny-grid-column>
@@ -11,8 +10,7 @@
     </tiny-tab-item>
     <tiny-tab-item title="small" name="small">
       <tiny-grid :data="tableData" size="small" :auto-resize="true">
-        <tiny-grid-column type="index" width="60"></tiny-grid-column>
-        <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+        <tiny-grid-column type="selection" width="40"></tiny-grid-column>
         <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
         <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
         <tiny-grid-column field="city" title="城市"></tiny-grid-column>
@@ -20,8 +18,7 @@
     </tiny-tab-item>
     <tiny-tab-item title="mini" name="mini">
       <tiny-grid :data="tableData" size="mini" :auto-resize="true">
-        <tiny-grid-column type="index" width="60"></tiny-grid-column>
-        <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+        <tiny-grid-column type="selection" width="40"></tiny-grid-column>
         <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
         <tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
         <tiny-grid-column field="city" title="城市"></tiny-grid-column>
@@ -114,3 +111,19 @@ export default {
   }
 }
 </script>
+
+<style scoped lang="less">
+:deep(.tiny-grid) {
+  &-header__column,
+  &-body__column {
+    &.col__selection,
+    &.col__radio {
+      padding: 0 8px 0 16px;
+      & + th,
+      + td {
+        padding-left: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/size/max-min-grid-height.spec.js b/examples/sites/demos/pc/app/grid/size/max-min-grid-height.spec.js
index 2451ac8fc..4a8c9a355 100644
--- a/examples/sites/demos/pc/app/grid/size/max-min-grid-height.spec.js
+++ b/examples/sites/demos/pc/app/grid/size/max-min-grid-height.spec.js
@@ -3,6 +3,6 @@ import { test, expect } from '@playwright/test'
 test('设置 maxHeight 最大高度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('grid-size#size-max-min-grid-height')
-  await expect(page.locator('.tiny-grid__body-wrapper').nth(0)).toHaveCSS('max-height', '172px')
+  await expect(page.locator('.tiny-grid__body-wrapper').nth(0)).toHaveCSS('max-height', '165px')
   await expect(page.locator('.tiny-grid__body-wrapper').nth(1)).toHaveCSS('min-height', '300px')
 })
diff --git a/examples/sites/demos/pc/app/grid/sort/server-sort-composition-api.vue b/examples/sites/demos/pc/app/grid/sort/server-sort-composition-api.vue
index 42bc4f5cd..71a6a2232 100644
--- a/examples/sites/demos/pc/app/grid/sort/server-sort-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/sort/server-sort-composition-api.vue
@@ -20,7 +20,7 @@ const pager = ref({
     pageSize: 15,
     total: 0,
     pageSizes: [5, 10, 15, 20],
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 })
 const fetchData = ref({
diff --git a/examples/sites/demos/pc/app/grid/sort/server-sort.vue b/examples/sites/demos/pc/app/grid/sort/server-sort.vue
index 4dffd43f0..5ee9a10ed 100644
--- a/examples/sites/demos/pc/app/grid/sort/server-sort.vue
+++ b/examples/sites/demos/pc/app/grid/sort/server-sort.vue
@@ -26,7 +26,7 @@ export default {
           pageSize: 15,
           total: 0,
           pageSizes: [5, 10, 15, 20],
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       fetchData: {
diff --git a/examples/sites/demos/pc/app/grid/toolbar/cancel-delete-composition-api.vue b/examples/sites/demos/pc/app/grid/toolbar/cancel-delete-composition-api.vue
index 8f363b8af..82f4d5500 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/cancel-delete-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/cancel-delete-composition-api.vue
@@ -39,7 +39,7 @@ const pagerConfig = ref({
     pageSize: 5,
     pageSizes: [5, 10],
     total: 0,
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 })
 const fetchData = ref({
diff --git a/examples/sites/demos/pc/app/grid/toolbar/cancel-delete.vue b/examples/sites/demos/pc/app/grid/toolbar/cancel-delete.vue
index 927a7a31c..0cc1a968f 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/cancel-delete.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/cancel-delete.vue
@@ -46,7 +46,7 @@ export default {
           pageSize: 5,
           pageSizes: [5, 10],
           total: 0,
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       fetchData: {
diff --git a/examples/sites/demos/pc/app/grid/toolbar/custom-toolbar-composition-api.vue b/examples/sites/demos/pc/app/grid/toolbar/custom-toolbar-composition-api.vue
index 736da2c76..09c8b3248 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/custom-toolbar-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/custom-toolbar-composition-api.vue
@@ -54,7 +54,7 @@ const pagerConfig = ref({
     currentPage: 1,
     pageSize: 10,
     total: 0,
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 })
 const options = ref([
diff --git a/examples/sites/demos/pc/app/grid/toolbar/custom-toolbar.vue b/examples/sites/demos/pc/app/grid/toolbar/custom-toolbar.vue
index 0acd22e8e..840cd4d42 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/custom-toolbar.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/custom-toolbar.vue
@@ -56,7 +56,7 @@ export default {
           currentPage: 1,
           pageSize: 10,
           total: 0,
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       options: [
diff --git a/examples/sites/demos/pc/app/grid/toolbar/refresh-grid-composition-api.vue b/examples/sites/demos/pc/app/grid/toolbar/refresh-grid-composition-api.vue
index aadcb9a95..ddda718b7 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/refresh-grid-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/refresh-grid-composition-api.vue
@@ -30,7 +30,7 @@ const pagerConfig = {
     pageSize: 5,
     pageSizes: [5, 10],
     total: 0,
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 }
 
diff --git a/examples/sites/demos/pc/app/grid/toolbar/refresh-grid.vue b/examples/sites/demos/pc/app/grid/toolbar/refresh-grid.vue
index 83e41e603..05089e065 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/refresh-grid.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/refresh-grid.vue
@@ -35,7 +35,7 @@ export default {
           pageSize: 5,
           pageSizes: [5, 10],
           total: 0,
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       fetchData: {
diff --git a/examples/sites/demos/pc/app/grid/toolbar/save-data-composition-api.vue b/examples/sites/demos/pc/app/grid/toolbar/save-data-composition-api.vue
index ec58ac8ba..d3440ecec 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/save-data-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/save-data-composition-api.vue
@@ -39,7 +39,7 @@ const pagerConfig = {
     pageSize: 5,
     pageSizes: [5, 10],
     total: 0,
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 }
 
diff --git a/examples/sites/demos/pc/app/grid/toolbar/save-data.vue b/examples/sites/demos/pc/app/grid/toolbar/save-data.vue
index 5c217119b..6a72fbca0 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/save-data.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/save-data.vue
@@ -46,7 +46,7 @@ export default {
           pageSize: 5,
           pageSizes: [5, 10],
           total: 0,
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       },
       fetchData: {
diff --git a/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-composition-api.vue b/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-composition-api.vue
index 8b59c9d80..309ff5b4f 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-composition-api.vue
@@ -48,7 +48,7 @@ const op = ref({
       pageSize: 5,
       pageSizes: [5, 10],
       total: 0,
-      layout: 'total, prev, pager, next, jumper, sizes'
+      layout: 'total, sizes, prev, pager, next, jumper'
     }
   },
   columns: [
diff --git a/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-slots-composition-api.vue b/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-slots-composition-api.vue
index ec8c72092..c42910d61 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-slots-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-slots-composition-api.vue
@@ -56,7 +56,7 @@ const op = {
       pageSize: 3,
       pageSizes: [3, 5, 10],
       total: 0,
-      layout: 'total, prev, pager, next, jumper, sizes'
+      layout: 'total, sizes, prev, pager, next, jumper'
     }
   },
   columns: [
diff --git a/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-slots.vue b/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-slots.vue
index 3341b2c03..72329b73f 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-slots.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config-slots.vue
@@ -48,7 +48,7 @@ export default {
             pageSize: 3,
             pageSizes: [3, 5, 10],
             total: 0,
-            layout: 'total, prev, pager, next, jumper, sizes'
+            layout: 'total, sizes, prev, pager, next, jumper'
           }
         },
         columns: [
diff --git a/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config.vue b/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config.vue
index 9dc054a9c..5de2e2ce0 100644
--- a/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config.vue
+++ b/examples/sites/demos/pc/app/grid/toolbar/toolbar-op-config.vue
@@ -53,7 +53,7 @@ export default {
             pageSize: 5,
             pageSizes: [5, 10],
             total: 0,
-            layout: 'total, prev, pager, next, jumper, sizes'
+            layout: 'total, sizes, prev, pager, next, jumper'
           }
         },
         columns: [
diff --git a/examples/sites/demos/pc/app/grid/tree-table/set-tree-expansion-composition-api.vue b/examples/sites/demos/pc/app/grid/tree-table/set-tree-expansion-composition-api.vue
index 5f76b3c24..7d0f8c04a 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/set-tree-expansion-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/set-tree-expansion-composition-api.vue
@@ -7,7 +7,7 @@
     </div>
     <br />
     <tiny-grid :data="tableData" ref="grid" :tree-config="{ children: 'children' }">
-      <tiny-grid-column type="selection" width="100"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="40"></tiny-grid-column>
       <tiny-grid-column field="name" title="公司名称" tree-node></tiny-grid-column>
       <tiny-grid-column field="area" title="区域"></tiny-grid-column>
       <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
@@ -136,3 +136,19 @@ const toggleTreeExpansion = () => {
   grid.value.toggleTreeExpansion(tableData.value[1])
 }
 </script>
+
+<style scoped lang="less">
+:deep(.tiny-grid) {
+  &-header__column,
+  &-body__column {
+    &.col__selection,
+    &.col__radio {
+      padding: 0 8px 0 16px;
+      & + th,
+      + td {
+        padding-left: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/tree-table/set-tree-expansion.vue b/examples/sites/demos/pc/app/grid/tree-table/set-tree-expansion.vue
index 31b244233..e7eee3924 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/set-tree-expansion.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/set-tree-expansion.vue
@@ -7,7 +7,7 @@
     </div>
     <br />
     <tiny-grid :data="tableData" ref="grid" :tree-config="{ children: 'children' }">
-      <tiny-grid-column type="selection" width="100"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="40"></tiny-grid-column>
       <tiny-grid-column field="name" title="公司名称" tree-node></tiny-grid-column>
       <tiny-grid-column field="area" title="区域"></tiny-grid-column>
       <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
@@ -147,3 +147,19 @@ export default {
   }
 }
 </script>
+
+<style scoped lang="less">
+:deep(.tiny-grid) {
+  &-header__column,
+  &-body__column {
+    &.col__selection,
+    &.col__radio {
+      padding: 0 8px 0 16px;
+      & + th,
+      + td {
+        padding-left: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-data-composition-api.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-data-composition-api.vue
index 7294644b7..b2a62b05e 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-data-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-data-composition-api.vue
@@ -1,8 +1,7 @@
 <template>
   <div>
     <tiny-grid :data="tableData" :tree-config="{ children: 'children' }">
-      <tiny-grid-column field="index" width="60" tree-node></tiny-grid-column>
-      <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称" tree-node></tiny-grid-column>
       <tiny-grid-column field="area" title="区域"></tiny-grid-column>
       <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
     </tiny-grid>
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-data.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-data.vue
index 02c786c5e..d3386e347 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-data.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-data.vue
@@ -1,8 +1,7 @@
 <template>
   <div>
     <tiny-grid :data="tableData" :tree-config="{ children: 'children' }">
-      <tiny-grid-column field="index" width="60" tree-node></tiny-grid-column>
-      <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称" tree-node></tiny-grid-column>
       <tiny-grid-column field="area" title="区域"></tiny-grid-column>
       <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
     </tiny-grid>
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index-composition-api.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index-composition-api.vue
index 55c860580..526c7e811 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index-composition-api.vue
@@ -8,8 +8,8 @@
       :select-config="{ labelField: 'index' }"
     >
       <tiny-grid-column type="selection" width="100"></tiny-grid-column>
-      <tiny-grid-column type="index" width="80" tree-node></tiny-grid-column>
-      <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+      <tiny-grid-column type="index" width="80"></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称" tree-node></tiny-grid-column>
       <tiny-grid-column field="area" title="区域" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
       <tiny-grid-column
         field="employees"
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index.vue
index 7696f6962..f780ab1ac 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-index.vue
@@ -8,8 +8,8 @@
       :select-config="{ labelField: 'index' }"
     >
       <tiny-grid-column type="selection" width="100"></tiny-grid-column>
-      <tiny-grid-column type="index" width="80" tree-node></tiny-grid-column>
-      <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+      <tiny-grid-column type="index" width="80"></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称" tree-node></tiny-grid-column>
       <tiny-grid-column field="area" title="区域" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
       <tiny-grid-column
         field="employees"
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update-composition-api.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update-composition-api.vue
index 39d91f029..159661f3f 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update-composition-api.vue
@@ -19,8 +19,8 @@
         </tiny-grid-toolbar>
       </template>
       <tiny-grid-column type="selection" width="100"></tiny-grid-column>
-      <tiny-grid-column type="index" width="80" tree-node></tiny-grid-column>
-      <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+      <tiny-grid-column type="index" width="80"></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称" tree-node></tiny-grid-column>
 
       <tiny-grid-column field="area" title="区域" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
       <tiny-grid-column
diff --git a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update.vue b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update.vue
index 71c289920..1634f5b12 100644
--- a/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update.vue
+++ b/examples/sites/demos/pc/app/grid/tree-table/tree-grid-insert-delete-update.vue
@@ -19,8 +19,8 @@
         </tiny-grid-toolbar>
       </template>
       <tiny-grid-column type="selection" width="100"></tiny-grid-column>
-      <tiny-grid-column type="index" width="80" tree-node></tiny-grid-column>
-      <tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
+      <tiny-grid-column type="index" width="80"></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称" tree-node></tiny-grid-column>
       <tiny-grid-column field="area" title="区域" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
       <tiny-grid-column
         field="employees"
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-faq.js b/examples/sites/demos/pc/app/grid/webdoc/grid-faq.js
index 36fefa3b2..c0bb749d4 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-faq.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-faq.js
@@ -7,7 +7,7 @@ export default {
       'name': { 'zh-CN': '表格列头与单元格错位', 'en-US': 'Table column headers and cells are misplaced' },
       'desc': {
         'zh-CN':
-          '<p>当出现 <code>grid</code> 表头与表体单元格错位时，可以选择性地做以下尝试。1.给每列设置列宽。2.将<code>show-overflow</code>、<code>show-header-overflow</code> 都设置为 <code>true</code>。3.将 <code>table-layout</code> 设置为 <code>auto</code>。</p>',
+          '<p>当出现 <code>grid</code> 表头与表体单元格错位时，可以选择性地做以下尝试。1.给每列设置列宽。2.将<code>show-overflow</code>、<code>show-header-overflow</code> 都设置为 <code>true</code>。</p>',
         'en-US':
           '<p>When the grid table header is misplaced with the table body cell, You can perform the following operations as required.\n1. Set the column width for each column.\n2. Set <code>show-overflow</code> and <code>show-header-overflow</code> to <code>true</code>\n3. Set <code>table-layout</ Set this parameter to <code>auto</code></p>\n'
       },
diff --git a/examples/sites/demos/pc/app/grid/webdoc/grid-tree-table.js b/examples/sites/demos/pc/app/grid/webdoc/grid-tree-table.js
index b4c136bcf..a4383c0a8 100644
--- a/examples/sites/demos/pc/app/grid/webdoc/grid-tree-table.js
+++ b/examples/sites/demos/pc/app/grid/webdoc/grid-tree-table.js
@@ -2,6 +2,20 @@ export default {
   column: '1',
   owner: '',
   demos: [
+    {
+      'demoId': 'tree-table-set-tree-expansion',
+      'name': { 'zh-CN': '树节点展开操作', 'en-US': 'Manually expand a specified tree node' },
+      'desc': {
+        'zh-CN': `
+        <p> <code>setTreeExpansion(rows, checked)</code> 可设置展开指定的树形节点，第二个参数设置这一行展开与否。</p>
+        <p> <code>setAllTreeExpansion(checked)</code> 可设置所有树节点的展开与否。</p>
+        <p> <code>toggleTreeExpansion(row)</code> 可设置切换展开树形节点。</p>
+        `,
+        'en-US':
+          'You can set <p> <code>setTreeExpansion(rows, checked)</code> to expand the specified tree node. The second parameter specifies whether to expand the row. </p>\n'
+      },
+      'codeFiles': ['tree-table/set-tree-expansion.vue']
+    },
     {
       'demoId': 'tree-table-tree-grid-base',
       'name': {
@@ -59,20 +73,7 @@ export default {
       },
       'codeFiles': ['tree-table/tree-grid-index-checkfield.vue']
     },
-    {
-      'demoId': 'tree-table-set-tree-expansion',
-      'name': { 'zh-CN': '树节点展开操作', 'en-US': 'Manually expand a specified tree node' },
-      'desc': {
-        'zh-CN': `
-        <p> <code>setTreeExpansion(rows, checked)</code> 可设置展开指定的树形节点，第二个参数设置这一行展开与否。</p>
-        <p> <code>setAllTreeExpansion(checked)</code> 可设置所有树节点的展开与否。</p>
-        <p> <code>toggleTreeExpansion(row)</code> 可设置切换展开树形节点。</p>
-        `,
-        'en-US':
-          'You can set <p> <code>setTreeExpansion(rows, checked)</code> to expand the specified tree node. The second parameter specifies whether to expand the row. </p>\n'
-      },
-      'codeFiles': ['tree-table/set-tree-expansion.vue']
-    },
+
     {
       'demoId': 'tree-table-tree-grid-fixed-column',
       'name': { 'zh-CN': '冻结列', 'en-US': 'Frozen Column' },
diff --git a/examples/sites/demos/pc/app/pager/disabled-and-size.vue b/examples/sites/demos/pc/app/pager/disabled-and-size.vue
index dc0de6c0b..1cd55e707 100644
--- a/examples/sites/demos/pc/app/pager/disabled-and-size.vue
+++ b/examples/sites/demos/pc/app/pager/disabled-and-size.vue
@@ -2,7 +2,7 @@
   <div class="content">
     是否禁用：<tiny-switch v-model="isDisabled"></tiny-switch>
     <tiny-pager mode="number" :total="100" :disabled="isDisabled" />
-    <tiny-pager mode="number" :total="100" size="mini" :disabled="isDisabled" />
+    <tiny-pager :total="100" size="mini" :disabled="isDisabled" />
   </div>
 </template>
 
diff --git a/examples/sites/demos/pc/app/pager/pager-in-grid-composition-api.vue b/examples/sites/demos/pc/app/pager/pager-in-grid-composition-api.vue
index b219feae1..8984d4de9 100644
--- a/examples/sites/demos/pc/app/pager/pager-in-grid-composition-api.vue
+++ b/examples/sites/demos/pc/app/pager/pager-in-grid-composition-api.vue
@@ -30,7 +30,7 @@
       :page-sizes="[5, 10, 20, 50]"
       @current-change="currentChange"
       @size-change="sizeChange"
-      layout="total, prev, pager, next, jumper, sizes"
+      layout="total, sizes, prev, pager, next, jumper"
     ></tiny-pager>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/pager/pager-in-grid.vue b/examples/sites/demos/pc/app/pager/pager-in-grid.vue
index 86e24ab44..903ff8b97 100644
--- a/examples/sites/demos/pc/app/pager/pager-in-grid.vue
+++ b/examples/sites/demos/pc/app/pager/pager-in-grid.vue
@@ -30,7 +30,7 @@
       :page-sizes="[5, 10, 20, 50]"
       @current-change="currentChange"
       @size-change="sizeChange"
-      layout="total, prev, pager, next, jumper, sizes"
+      layout="total, sizes, prev, pager, next, jumper"
     ></tiny-pager>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/popeditor/pager-composition-api.vue b/examples/sites/demos/pc/app/popeditor/pager-composition-api.vue
index dd32c04df..beb99e1ef 100644
--- a/examples/sites/demos/pc/app/popeditor/pager-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/pager-composition-api.vue
@@ -43,7 +43,7 @@ const gridOp = ref({
     pageSize: 4,
     pageSizes: [4, 5, 10],
     total: 10,
-    layout: 'total, prev, pager, next, jumper, sizes'
+    layout: 'total, sizes, prev, pager, next, jumper'
   }
 })
 
diff --git a/examples/sites/demos/pc/app/popeditor/pager.vue b/examples/sites/demos/pc/app/popeditor/pager.vue
index 07ef70fe2..fcd74e4fe 100644
--- a/examples/sites/demos/pc/app/popeditor/pager.vue
+++ b/examples/sites/demos/pc/app/popeditor/pager.vue
@@ -48,7 +48,7 @@ export default {
           pageSize: 4,
           pageSizes: [4, 5, 10],
           total: 10,
-          layout: 'total, prev, pager, next, jumper, sizes'
+          layout: 'total, sizes, prev, pager, next, jumper'
         }
       }
     }
diff --git a/examples/sites/demos/pc/menus.js b/examples/sites/demos/pc/menus.js
index b4e7499c8..cc52267a5 100644
--- a/examples/sites/demos/pc/menus.js
+++ b/examples/sites/demos/pc/menus.js
@@ -178,7 +178,7 @@ export const cmpMenus = [
     'children': [
       { 'nameCn': '基本用法', 'name': '', 'key': 'grid' },
       { 'nameCn': '序号列', 'name': '', 'key': 'grid-serial-column' },
-      { 'nameCn': '操作列', 'name': '', 'key': 'grid-operation-column' },
+      { 'nameCn': '选中行', 'name': '', 'key': 'grid-operation-column' },
       { 'nameCn': '空数据', 'name': '', 'key': 'grid-empty' },
       { 'nameCn': '数据源', 'name': '', 'key': 'grid-data-source' },
       { 'nameCn': '大数据', 'name': '', 'key': 'grid-large-data' },
diff --git a/packages/theme/src/form/index.less b/packages/theme/src/form/index.less
index 32a3be672..c98d8dcb7 100644
--- a/packages/theme/src/form/index.less
+++ b/packages/theme/src/form/index.less
@@ -25,7 +25,6 @@
   .component-css-vars-form();
 
   width: 100%;
-  overflow: hidden;
 
   div {
     outline: none;
@@ -61,12 +60,14 @@
     .@{form-item-prefix-cls}__label {
       text-align: left;
     }
+
     &.label-align {
       .@{form-item-prefix-cls} {
         &.is-required {
           .@{form-item-prefix-cls}__label {
             padding-left: 12px;
             position: relative;
+
             &::before {
               font-size: 20px;
               line-height: 1;
@@ -149,7 +150,10 @@
       line-height: 1.5;
       height: auto;
       vertical-align: inherit;
+      color: var(--ti-form-display-label-color);
+      padding-bottom: var(--ti-form-display-label-padding-bottom);
     }
+
     .tiny-form-item__content {
       line-height: 1.5;
       font-size: 14px;
@@ -168,6 +172,7 @@
       .tiny-checkbox {
         line-height: 1.5;
       }
+
       .tiny-radio {
         line-height: 1;
         padding: 0;
diff --git a/packages/theme/src/form/smb-theme.js b/packages/theme/src/form/smb-theme.js
index 165a2eb4f..7aadb8fee 100644
--- a/packages/theme/src/form/smb-theme.js
+++ b/packages/theme/src/form/smb-theme.js
@@ -3,5 +3,6 @@ export const tinyFormSmbTheme = {
   // smb要求行高为1.5
   'ti-form-label-top-label-line-height': '1.5',
   // border-box需要加上内边距
-  'ti-form-label-top-label-height': 'calc(1.5em + 8px)'
+  'ti-form-label-top-label-height': 'calc(1.5em + 8px)',
+  'ti-form-display-label-padding-bottom': 'var(--ti-common-space-base)'
 }
diff --git a/packages/theme/src/form/vars.less b/packages/theme/src/form/vars.less
index 57d08490d..8eb4af29a 100644
--- a/packages/theme/src/form/vars.less
+++ b/packages/theme/src/form/vars.less
@@ -24,4 +24,8 @@
   --ti-form-label-top-label-line-height: var(--ti-common-size-height-normal, 28px);
   // 表单项垂直排列时的表单项标签高度(hide)
   --ti-form-label-top-label-height: var(--ti-common-size-height-normal, 28px);
+  // 仅展示表单文本颜色
+  --ti-form-display-label-color: var(--ti-common-color-text-weaken, #8a8e99);
+  // 仅展示表单文本下侧边距
+  --ti-form-display-label-padding-bottom: var(--ti-common-space-2x, 8px);
 }
diff --git a/packages/theme/src/grid/filter.less b/packages/theme/src/grid/filter.less
index 3769507f0..aafca15e0 100644
--- a/packages/theme/src/grid/filter.less
+++ b/packages/theme/src/grid/filter.less
@@ -135,7 +135,7 @@
             }
 
             svg {
-              font-size: var(--ti-common-font-size-2);
+              font-size: var(--ti-grid-filter-checkbox-font-size);
               fill: var(--ti-grid-normal-text-color);
               margin-right: 8px;
               outline: none;
@@ -146,7 +146,7 @@
               }
 
               &.is-checked {
-                fill: var(--ti-grid-primary-color);
+                fill: var(--ti-grid-filter-checkbox-color);
               }
             }
           }
diff --git a/packages/theme/src/grid/header.less b/packages/theme/src/grid/header.less
index 9d1e0dcc8..38b3e4eaf 100644
--- a/packages/theme/src/grid/header.less
+++ b/packages/theme/src/grid/header.less
@@ -88,7 +88,7 @@
   }
 
   .@{grid-prefix-cls}-cell-text {
-    width: 100%;
+    width: var(--ti-grid-header-cell-text-width);
   }
 
   .@{grid-prefix-cls}-edit-icon {
diff --git a/packages/theme/src/grid/mixins/table.less b/packages/theme/src/grid/mixins/table.less
index a81d83c58..13ed9082e 100644
--- a/packages/theme/src/grid/mixins/table.less
+++ b/packages/theme/src/grid/mixins/table.less
@@ -60,6 +60,10 @@
   padding: var(--ti-grid-td-padding-vertical) var(--ti-grid-td-padding-horizontal);
 }
 
+.MiniTdPadding () {
+  padding: var(--ti-grid-mini-td-padding-vertical) var(--ti-grid-mini-td-padding-horizontal);
+}
+
 .CellEllipsis() {
   &:not(.col__actived) {
     .@{grid-cell-prefix-cls} {
diff --git a/packages/theme/src/grid/smb-theme.js b/packages/theme/src/grid/smb-theme.js
index 8d152ccdb..259124c0a 100644
--- a/packages/theme/src/grid/smb-theme.js
+++ b/packages/theme/src/grid/smb-theme.js
@@ -4,7 +4,7 @@ export const tinyGridSmbTheme = {
   'ti-grid-medium-header-column-height': '46px',
   'ti-grid-default-header-column-height': 'var(--ti-common-size-height-medium)',
   'ti-grid-small-header-column-height': 'var(--ti-common-size-height-normal)',
-  'ti-grid-mini-header-column-height': '26px',
+  'ti-grid-mini-header-column-height': '32px',
   'ti-grid-medium-column-height': '52px',
   'ti-grid-default-column-height': 'var(--ti-common-size-height-large)',
   'ti-grid-small-column-height': 'var(--ti-common-size-height-medium)',
@@ -14,7 +14,6 @@ export const tinyGridSmbTheme = {
   'ti-grid-checkbox-border-color': 'var(--ti-common-color-line-normal)',
   'ti-grid-checkbox-border-radius': 'var(--ti-common-border-radius-2)',
   'ti-grid-header-repair-border-color': 'var(--ti-common-color-transparent)',
-  'ti-grid-td-padding-horizontal': 'var(--ti-common-space-3x)',
   'ti-grid-header-text-color': 'var(--ti-common-color-text-secondary)',
   'ti-grid-row-hover-background-color': '#F5F5F5',
   'ti-grid-icon-color': 'var(--ti-common-color-icon)',
@@ -36,5 +35,15 @@ export const tinyGridSmbTheme = {
   'ti-grid-expand-background-color': '#fafafa',
   'ti-grid-loading-background-color': 'rgba(255, 255, 255, 0.67)',
   'ti-grid-tree-expand-icon-font-size': 'var(--ti-common-font-size-2)',
-  'ti-grid-tree-expand-icon-translate-x': '-2px'
+  'ti-grid-tree-expand-icon-translate-x': '0',
+  'ti-grid-tree-expand-icon-padding-right': 'var(--ti-common-space-2x)',
+  'ti-grid-td-padding-horizontal': 'var(--ti-common-space-4x)',
+  'ti-grid-td-padding-vertical': 'var(--ti-common-space-3x)',
+  'ti-grid-mini-td-padding-horizontal': 'var(--ti-common-space-4x)',
+  'ti-grid-mini-td-padding-vertical': 'var(--ti-common-space-2x)',
+  'ti-grid-header-cell-text-width': 'auto',
+  'ti-grid-nodata-td-bg-img-url':
+    'url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAiIGQ9Ik0wIDBoODB2ODBIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGQ9Ik03My42MSAzOS4zOXYzMC42N2MwIDIuMTctMS43NiAzLjkzLTMuOTQgMy45M0g1Mi41OXYtLjg3aDE3LjA4YzEuNyAwIDMuMDctMS4zNyAzLjA3LTMuMDZWMzkuMzloLjg3eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik03My42MSAzOS4zOXYzMC42N2MwIDIuMTctMS43NiAzLjkzLTMuOTQgMy45M0g1Mi41OXYtLjg3aDE3LjA4YzEuNyAwIDMuMDctMS4zNyAzLjA3LTMuMDZWMzkuMzloLjg3eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik01Ni45MiAyNXY0NS4wNmMwIDIuMTctMS43NyAzLjkzLTMuOTUgMy45M0gxMC45NEEzLjk0IDMuOTQgMCAwIDEgNyA3MC4wNlYzOS4zOWguODh2MzAuNjdhMy4wNiAzLjA2IDAgMCAwIDMuMDYgMy4wNmg0Mi4wM2MxLjcgMCAzLjA3LTEuMzcgMy4wNy0zLjA2VjI1Ljg3SDEwLjY3VjI1aDQ2LjI1eiIgZmlsbD0iZ3JheSIvPjxwYXRoIGQ9Ik05LjQzIDI1Yy0uNiAwLTEuMTUuMzEtMS40Ni44MkwuMTMgMzguNjRjLS4yNi40Mi0uMTMuOTYuMjcgMS4yMi4xNC4wOS4yOS4xNC40Ni4xNGg0NC44MmMxLjE3IDAgMi4yNi0uNjEgMi45LTEuNjJMNTcuMDQgMjVIOS40M3ptLjIyIDFoNDUuNTJsLTcuNTIgMTEuODFjLS40Ny43NC0xLjI4IDEuMTktMi4xNCAxLjE5SDEuMTdsNy43NS0xMi42Yy4xNi0uMjUuNDMtLjQuNzMtLjR6IiBmaWxsPSJncmF5Ii8+PHBhdGggZD0iTTcwLjc1IDI1Yy41NiAwIDEuMDguMyAxLjM5LjhsNy43MiAxMi43MmMuMjUuNDEuMTQuOTUtLjI1IDEuMjEtLjEzLjA5LS4yOC4xNC0uNDQuMTRINjYuMTRjLTEuMTcgMC0yLjI1LS42Ni0yLjg1LTEuNzNMNTUuOTggMjVoMTQuNzd6bS0uMDMgMUg1Ny44bDYuMzggMTEuNzFjLjQzLjggMS4yMiAxLjI5IDIuMDggMS4yOWgxMi42M0w3MS40IDI2LjM5YS44MDIuODAyIDAgMCAwLS42OC0uMzl6IiBmaWxsPSJncmF5Ii8+PHJlY3QgeD0iMTMuNSIgeT0iNTYiIHJ4PSIxLjg4NiIgd2lkdGg9IjE0IiBoZWlnaHQ9IjQiIGZpbGw9IiMxNDc2RkYiLz48cGF0aCBkPSJNMjMuNTYgNjNjLjI0IDAgLjQ0LjIyLjQ0LjUgMCAuMjctLjIuNS0uNDQuNWgtOS42M2MtLjI0IDAtLjQzLS4yMy0uNDMtLjUgMC0uMjguMTktLjUuNDMtLjVoOS42M3oiIGZpbGw9ImdyYXkiLz48cmVjdCB4PSIxMy41IiB5PSI2NiIgcng9Ii41IiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSJncmF5Ii8+PHBhdGggZD0iTTQwIDZjLjI3IDAgLjUuMTkuNS40NHY2LjE2YzAgLjI1LS4yMy40NC0uNS40NC0uMjggMC0uNTEtLjE5LS41MS0uNDRWNi40NGMwLS4yNS4yMy0uNDQuNTEtLjQ0ek01Ni41NSA4LjY0Yy4yNC4xNC4zMy40Mi4yMS42M2wtMy4wOCA1LjM0Yy0uMTIuMjEtLjQyLjI3LS42Ni4xMy0uMjQtLjE0LS4zMy0uNDItLjIxLS42M2wzLjA4LTUuMzRjLjEyLS4yMS40Mi0uMjcuNjYtLjEzek0yMy40NCA4LjY0Yy4yNC0uMTQuNTQtLjA4LjY2LjEzbDMuMDggNS4zNGMuMTIuMjEuMDMuNDktLjIxLjYzcy0uNTQuMDgtLjY2LS4xM2wtMy4wOC01LjM0Yy0uMTItLjIxLS4wMy0uNDkuMjEtLjYzeiIgZmlsbD0iZ3JheSIvPjwvZz48L3N2Zz4=)',
+  'ti-grid-filter-checkbox-font-size': '18px',
+  'ti-grid-filter-checkbox-color': '#1476FF'
 }
diff --git a/packages/theme/src/grid/table.less b/packages/theme/src/grid/table.less
index 41c3b4b35..d8d398f1a 100644
--- a/packages/theme/src/grid/table.less
+++ b/packages/theme/src/grid/table.less
@@ -138,7 +138,7 @@
     .@{grid-prefix-cls}-header__column,
     .@{grid-prefix-cls}-body__column,
     .@{grid-prefix-cls}-footer__column {
-      .DefaultTdPadding();
+      .MiniTdPadding();
     }
 
     .@{grid-prefix-cls}-body__column,
@@ -146,9 +146,10 @@
       .MiniColumnHeight();
     }
 
-    // 表头单元格高度
+    // Mini尺寸表头单元格高度
     .@{grid-prefix-cls}-header__column {
       .MiniHeaderColumnHeight();
+      padding: var(--ti-grid-mini-th-padding-vertical) var(--ti-grid-td-padding-horizontal);
     }
 
     .@{grid-prefix-cls}-loading {
@@ -468,6 +469,7 @@
 
   // 表头高度
   & &-header__column {
+    padding: var(--ti-grid-th-padding-vertical) var(--ti-grid-td-padding-horizontal);
     height: var(--ti-grid-default-header-column-height);
     // 文字居中
     &.col__center {
@@ -738,7 +740,7 @@
     width: 100%;
     height: 100px;
     margin: 0;
-    background: var(--ti-table-nodata-td-bg-img-url) 50% no-repeat;
+    background: var(--ti-grid-nodata-td-bg-img-url) 50% no-repeat;
   }
 
   & &__empty-text {
@@ -747,16 +749,14 @@
     width: 50%;
   }
 
+  // 校验不通过
   & &-body__column {
     &.col__selected {
       &:not(.col__checked) {
-        box-shadow: inset 0px 0px 0px 2px var(--ti-grid-primary-color);
+        box-shadow: inset 0 0 0 2px var(--ti-grid-primary-color);
       }
     }
-  }
 
-  // 校验不通过
-  & &-body__column {
     &.col__actived,
     &.col__selected,
     &.col__dirty {
@@ -814,13 +814,15 @@
         }
 
         .@{grid-prefix-cls}-tree-wrapper {
-          width: 20px;
+          width: calc(20px + var(--ti-grid-tree-expand-icon-padding-right));
           height: 20px;
           display: inline-flex;
           justify-content: center;
           align-items: center;
           transform: translateX(var(--ti-grid-tree-expand-icon-translate-x));
           flex-shrink: 0;
+          padding-right: var(--ti-grid-tree-expand-icon-padding-right);
+
           svg {
             font-size: var(--ti-grid-tree-expand-icon-font-size);
           }
@@ -856,6 +858,7 @@
       position: static;
     }
   }
+
   & .is__scrollload &-body__y-space {
     position: absolute;
     right: 0;
@@ -904,14 +907,6 @@
         .DefaultTdPadding();
       }
 
-      &.col__ellipsis {
-        padding: 0;
-
-        &.col__actived {
-          padding: 0;
-        }
-      }
-
       // 可编辑表格showStatus为true时,左上角的角标
       &.col__dirty {
         &:before {
diff --git a/packages/theme/src/grid/vars.less b/packages/theme/src/grid/vars.less
index 5e6997d1f..b4029c53f 100644
--- a/packages/theme/src/grid/vars.less
+++ b/packages/theme/src/grid/vars.less
@@ -133,9 +133,9 @@
   // 表格加载中背景色
   --ti-grid-loading-background-color: rgba(0, 0, 0, 0.2);
   // 表格加载中图标长度尺寸
-  --ti-grid-loading-width-size: var(--ti-common-size-10x, 40px);
+  --ti-grid-loading-width-size: var(--ti-common-size-6x, 24px);
   // 表格加载中图标宽度尺寸
-  --ti-grid-loading-height-size: var(--ti-common-size-10x, 40px);
+  --ti-grid-loading-height-size: var(--ti-common-size-6x, 24px);
   // 单元格字体高度
   --ti-grid-line-height-number: var(--ti-common-line-height-number, 1.5);
 
@@ -156,17 +156,24 @@
   --ti-grid-small-column-height: var(--ti-common-size-9x, 36px);
   // 超小尺寸表格单元格高度
   --ti-grid-mini-column-height: var(--ti-common-size-7x, 28px);
-
+  // 表头单元格垂直内边距
+  --ti-grid-mini-th-padding-vertical: var(--ti-common-space-base, 4px);
+  // 表头单元格垂直内边距
+  --ti-grid-th-padding-vertical: var(--ti-common-space-2x, 8px);
   // 默认单元格垂直内边距
-  --ti-grid-td-padding-vertical: calc(var(--ti-common-space-1, 1px) * 2);
+  --ti-grid-td-padding-vertical: var(--ti-common-space-2x, 8px);
   // 单元格水平内边距
   --ti-grid-td-padding-horizontal: var(--ti-common-space-2x, 8px);
+  // mini单元格垂直内边距
+  --ti-grid-mini-td-padding-vertical: var(--ti-common-space-2x, 8px);
+  // mini单元格水平内边距
+  --ti-grid-mini-td-padding-horizontal: var(--ti-common-space-2x, 8px);
   // 表头排序图标尺寸
   --ti-grid-header-icon-font-size: var(--ti-common-font-size-2, 16px);
   // 表头排序图标尺寸缩放比例
   --ti-grid-column-icon-scale-size: 1;
   // 表格无数据背景图片
-  --ti-table-nodata-td-bg-img-url: url('data:image/png;base64,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');
+  --ti-grid-nodata-td-bg-img-url: url('data:image/png;base64,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');
 
   // 工具栏按钮水平内边距
   --ti-grid-toolbar-btn-padding-horizontal: var(--ti-common-space-3x, 12px);
@@ -197,6 +204,14 @@
   --ti-grid-expand-background-color: '';
   // 表格树表展开行图标大小
   --ti-grid-tree-expand-icon-font-size: var(--ti-common-font-size-1, 14px);
+  // 表格树表展开行图标右侧边距
+  --ti-grid-tree-expand-icon-padding-right: 0;
   // 表格树表展开行图标向左偏移量(hide)
   --ti-grid-tree-expand-icon-translate-x: -4px;
+  // 表头单元格宽度
+  --ti-grid-header-cell-text-width: 100%;
+  // 表格过滤面板checkbox大小
+  --ti-grid-filter-checkbox-font-size: var(--ti-common-font-size-2);
+  // 表格过滤面板checkbox颜色
+  --ti-grid-filter-checkbox-color: var(--ti-grid-primary-color);
 }
diff --git a/packages/theme/src/pager/index.less b/packages/theme/src/pager/index.less
index 49d510dd3..766ee8405 100644
--- a/packages/theme/src/pager/index.less
+++ b/packages/theme/src/pager/index.less
@@ -446,7 +446,19 @@
 
   &&--mini {
     & .@{pager-prefix-cls}__total {
-      font-size: 12px;
+      font-size: var(--ti-pager-mini-font-size);
+    }
+
+    .@{pager-prefix-cls}__goto-text {
+      font-size: var(--ti-pager-mini-font-size);
+      line-height: var(--ti-pager-mini-input-height);
+    }
+
+    .@{pager-prefix-cls}__goto {
+      input {
+        height: var(--ti-pager-mini-input-height);
+        line-height: var(--ti-pager-mini-input-height);
+      }
     }
 
     li {
@@ -454,7 +466,7 @@
       height: 24px;
       padding: 0 4px;
       line-height: 22px;
-      font-size: 12px;
+      font-size: var(--ti-pager-mini-font-size);
     }
 
     .@{pager-prefix-cls}__btn-prev svg,
diff --git a/packages/theme/src/pager/smb-theme.js b/packages/theme/src/pager/smb-theme.js
index 479ba543c..4af8064d3 100644
--- a/packages/theme/src/pager/smb-theme.js
+++ b/packages/theme/src/pager/smb-theme.js
@@ -42,5 +42,6 @@ export const tinyPagerSmbTheme = {
   'ti-pager-sizes-num-margin-right': 'var(--ti-common-dropdown-gap)',
   'ti-pager-normal-text-padding-left': 'var(--ti-common-space-4x)',
   'ti-pager-input-width': '48px',
-  'ti-pager-input-padding-horizontal': 'var(--it-common-space-2x)'
+  'ti-pager-input-padding-horizontal': 'var(--it-common-space-2x)',
+  'ti-pager-mini-font-size': 'var(--ti-common-font-size-0)'
 }
diff --git a/packages/theme/src/pager/vars.less b/packages/theme/src/pager/vars.less
index 69d7afa04..ac2d143a9 100644
--- a/packages/theme/src/pager/vars.less
+++ b/packages/theme/src/pager/vars.less
@@ -44,10 +44,14 @@
   --ti-pager-input-border-radius: var(--ti-common-border-radius-normal, 2px);
   // 分页选择框|输入框|前往按钮高度
   --ti-pager-input-height: var(--ti-common-size-height-mini, 24px);
+  // mini分页选择框|输入框|前往按钮高度
+  --ti-pager-mini-input-height: var(--ti-common-size-height-mini, 24px);
   // 分页输入框纵向内边距
   --ti-pager-input-padding-vertical: 10px;
-  // 分页字号(不含总条数项)
+  // 分页字号
   --ti-pager-font-size: var(--ti-common-font-size-base, 12px);
+  // mini分页字号
+  --ti-pager-mini-font-size: var(--ti-common-font-size-base, 12px);
   // 分页文字左边内边距
   --ti-pager-normal-text-padding-left: calc(var(--ti-common-space-base) * 3 + 2px, 14px);
   // 分页前往按钮|页码项文本色
diff --git a/packages/theme/src/theme.config.js b/packages/theme/src/theme.config.js
index 85d52c764..091fdc54b 100644
--- a/packages/theme/src/theme.config.js
+++ b/packages/theme/src/theme.config.js
@@ -90,6 +90,8 @@ export default {
   'radio-group': 'radio-group',
   'split': 'split-wrapper',
   'float-bar': 'float-bar',
+  'grid-radio': 'grid-radio',
+  'grid-filter': 'grid__filter-wrapper',
   'popeditor': 'popeditor__dialog-box',
   'image-viewer': 'image-viewer'
 }
diff --git a/packages/vue/src/grid/src/body/src/body.tsx b/packages/vue/src/grid/src/body/src/body.tsx
index 9e7900255..e1e566b91 100644
--- a/packages/vue/src/grid/src/body/src/body.tsx
+++ b/packages/vue/src/grid/src/body/src/body.tsx
@@ -532,7 +532,8 @@ function renderRow(args) {
   let { $rowIndex, $seq, $table, _vm, editStore } = args
   let { h, row, rowActived } = args
   let { rowClassName, rowIndex, rowKey, rowLevel, rowid, rows } = args
-  let { selection, seq, tableColumn, trOn, treeConfig, isNotRenderRow } = args
+  let { seq, trOn, isNotRenderRow } = args
+  const { selection, tableColumn, treeConfig, selectRow } = $table
 
   if (isNotRenderRow) {
     return
@@ -547,7 +548,7 @@ function renderRow(args) {
           {
             [`row__level-${rowLevel}`]: treeConfig,
             [classMap.rowNew]: editStore.insertList.includes(row),
-            [classMap.rowSelected]: selection.includes(row),
+            [classMap.rowSelected]: selection.includes(row) || selectRow === row,
             [classMap.rowActived]: rowActived
           },
           rowClassName
diff --git a/packages/vue/src/grid/src/footer/src/footer.ts b/packages/vue/src/grid/src/footer/src/footer.ts
index b69b7d9c7..81477190e 100644
--- a/packages/vue/src/grid/src/footer/src/footer.ts
+++ b/packages/vue/src/grid/src/footer/src/footer.ts
@@ -34,7 +34,9 @@ const classMap = {
   filterActive: 'filter__active',
   cellSummary: 'cell__summary',
   fixedLeftLast: 'fixed-left-last__column',
-  fixedRightFirst: 'fixed-right-first__column'
+  fixedRightFirst: 'fixed-right-first__column',
+  colRadio: 'col__radio',
+  colSelection: 'col__selection'
 }
 
 function doFooterSpan({ attrs, footerData, footerSpanMethod, params }) {
@@ -154,7 +156,9 @@ const renderfoots = (opt) => {
                   [classMap.colEllipsis]: hasEllipsis,
                   [classMap.filterActive]: column.filter && column.filter.hasFilter,
                   [classMap.fixedLeftLast]: column.fixed === 'left' && leftList[leftList.length - 1] === column,
-                  [classMap.fixedRightFirst]: column.fixed === 'right' && rightList[0] === column
+                  [classMap.fixedRightFirst]: column.fixed === 'right' && rightList[0] === column,
+                  [classMap.colRadio]: column.type === 'radio',
+                  [classMap.colSelection]: column.type === 'selection'
                 },
                 getClass(footerClassName, params),
                 getClass(footerCellClassName, params)