From 364ac46a44dcac7775af98c0d50c3d676c7cef58 Mon Sep 17 00:00:00 2001
From: HQ-Lin <a154571896@gmail.com>
Date: Mon, 8 Aug 2022 15:38:26 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=20pagination=20?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/_common                                   |   2 +-
 src/pagination/pagination.tsx                 |  52 ++---
 .../components/transfer-operations.tsx        |   4 +-
 test/ssr/__snapshots__/ssr.test.js.snap       | 112 ++++++----
 .../__snapshots__/demo.test.js.snap           |  31 ++-
 .../__snapshots__/demo.test.js.snap           | 206 +++++++++---------
 .../table/__snapshots__/demo.test.js.snap     |  64 ++++--
 .../transfer/__snapshots__/demo.test.js.snap  |  59 ++---
 8 files changed, 277 insertions(+), 253 deletions(-)

diff --git a/src/_common b/src/_common
index d2d878e8c..3ae5c9544 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit d2d878e8cb64cb110f383a6177d3af99f372811b
+Subproject commit 3ae5c954430ad8b703c671d438e43b0f45f2fb27
diff --git a/src/pagination/pagination.tsx b/src/pagination/pagination.tsx
index 453f48da6..59a0f292e 100644
--- a/src/pagination/pagination.tsx
+++ b/src/pagination/pagination.tsx
@@ -13,6 +13,7 @@ import mixins from '../utils/mixins';
 import getConfigReceiverMixins, { PaginationConfig } from '../config-provider/config-receiver';
 import TInputNumber from '../input-number';
 import { Select, Option } from '../select';
+import InputAdornment from '../input-adornment';
 import CLASSNAMES from '../utils/classnames';
 import { renderTNodeJSX } from '../utils/render-tnode';
 import props from './props';
@@ -304,6 +305,25 @@ export default mixins(getConfigReceiverMixins<Vue, PaginationConfig>('pagination
   },
 
   render() {
+    const Jumper = (
+      <div class={this.jumperClass}>
+        {this.t(this.global.jumpTo)}
+        <t-input-adornment append={`/ ${this.pageCount} ${this.t(this.global.page)}`}>
+          <t-input-number
+            class={this.jumperInputClass}
+            v-model={this.jumpIndex}
+            onBlur={this.onJumperChange}
+            onEnter={this.onJumperChange}
+            max={this.pageCount}
+            min={min}
+            size={this.size}
+            theme="normal"
+            placeholder=""
+          />
+        </t-input-adornment>
+      </div>
+    );
+
     return (
       <div class={this.paginationClass}>
         {/* 数据统计区 */}
@@ -380,17 +400,7 @@ export default mixins(getConfigReceiverMixins<Vue, PaginationConfig>('pagination
           </ul>
         ) : null}
         {/* 极简版 */}
-        {this.showPageNumber && this.theme === 'simple' ? (
-          <t-select
-            size={this.size}
-            value={this.current}
-            disabled={this.disabled}
-            class={this.simpleClass}
-            onChange={this.toPage}
-            options={this.pageCountOption}
-            autoWidth={true}
-          />
-        ) : null}
+        {this.theme === 'simple' && Jumper}
         {/* 向后按钮 */}
         {this.showPreviousAndNextBtn ? (
           <div
@@ -411,24 +421,8 @@ export default mixins(getConfigReceiverMixins<Vue, PaginationConfig>('pagination
             <page-last-icon />
           </div>
         ) : null}
-        {/* 跳转 */}
-        {this.showJumper ? (
-          <div class={this.jumperClass}>
-            {this.t(this.global.jumpTo)}
-            <t-input-number
-              class={this.jumperInputClass}
-              v-model={this.jumpIndex}
-              onBlur={this.onJumperChange}
-              onEnter={this.onJumperChange}
-              max={this.pageCount}
-              min={min}
-              size={this.size}
-              theme="normal"
-              placeholder=""
-            />
-            {this.t(this.global.page)}
-          </div>
-        ) : null}
+        {/* 快速跳转 */}
+        {this.theme === 'default' && this.showJumper && Jumper}
       </div>
     );
   },
diff --git a/src/transfer/components/transfer-operations.tsx b/src/transfer/components/transfer-operations.tsx
index 6000e41a1..33d13d23c 100644
--- a/src/transfer/components/transfer-operations.tsx
+++ b/src/transfer/components/transfer-operations.tsx
@@ -79,7 +79,7 @@ export default Vue.extend({
     return (
       <div class={`${prefix}-transfer__operations`}>
         <TButton
-          variant={rightDisabled ? 'outline' : 'base'}
+          variant="outline"
           key={rightDisabled ? 'right-outline' : 'right-base'}
           disabled={rightDisabled}
           onClick={this.moveToRight}
@@ -88,7 +88,7 @@ export default Vue.extend({
           {this._renderButton(h, 'right')}
         </TButton>
         <TButton
-          variant={leftDisabled ? 'outline' : 'base'}
+          variant="outline"
           key={leftDisabled ? 'left-outline' : 'left-base'}
           disabled={leftDisabled}
           onClick={this.moveToLeft}
diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
index 6e1fe1745..47db4c4e7 100644
--- a/test/ssr/__snapshots__/ssr.test.js.snap
+++ b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -5063,10 +5063,12 @@ exports[`ssr snapshot test renders ./examples/config-provider/demos/pagination.v
   <div class="t-pagination__btn t-pagination__btn-next"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-right">
       <path fill="currentColor" d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z" fill-opacity="0.9"></path>
     </svg></div>
-  <div class="t-pagination__jump">jump to<div class="t-input-number t-size-m t-input-number--normal t-pagination__input">
-      <div class="t-input__wrap">
-        <div ref="refInputElem" class="t-input t-size-m t-is-default"><input autocomplete="off" placeholder="" type="text" unselectable="off" value="1" class="t-input__inner"></div>
-      </div>
+  <div class="t-pagination__jump">jump to<div class="t-input-adornment t-input-adornment--append">
+      <div class="t-input-number t-size-m t-input-number--normal t-pagination__input">
+        <div class="t-input__wrap">
+          <div ref="refInputElem" class="t-input t-size-m t-is-default"><input autocomplete="off" placeholder="" type="text" unselectable="off" value="1" class="t-input__inner"></div>
+        </div>
+      </div><span class="t-input-adornment__append">/ 4 </span>
     </div>
   </div>
 </div>
@@ -10645,11 +10647,14 @@ exports[`ssr snapshot test renders ./examples/pagination/demos/customizable.vue
     <div class="t-pagination__btn t-pagination__btn-next"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-right">
         <path fill="currentColor" d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z" fill-opacity="0.9"></path>
       </svg></div>
-    <div class="t-pagination__jump">跳至<div class="t-input-number t-size-m t-input-number--normal t-pagination__input">
-        <div class="t-input__wrap">
-          <div ref="refInputElem" class="t-input t-size-m t-is-default"><input autocomplete="off" placeholder="" type="text" unselectable="off" value="1" class="t-input__inner"></div>
-        </div>
-      </div>页</div>
+    <div class="t-pagination__jump">跳至<div class="t-input-adornment t-input-adornment--append">
+        <div class="t-input-number t-size-m t-input-number--normal t-pagination__input">
+          <div class="t-input__wrap">
+            <div ref="refInputElem" class="t-input t-size-m t-is-default"><input autocomplete="off" placeholder="" type="text" unselectable="off" value="1" class="t-input__inner"></div>
+          </div>
+        </div><span class="t-input-adornment__append">/ 10 页</span>
+      </div>
+    </div>
   </div>
 </div>
 `;
@@ -10682,11 +10687,14 @@ exports[`ssr snapshot test renders ./examples/pagination/demos/disabled.vue corr
     <div disabled="disabled" class="t-pagination__btn t-pagination__btn-next t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-right">
         <path fill="currentColor" d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z" fill-opacity="0.9"></path>
       </svg></div>
-    <div class="t-pagination__jump">跳至<div class="t-input-number t-size-m t-input-number--normal t-pagination__input">
-        <div class="t-input__wrap">
-          <div ref="refInputElem" class="t-input t-size-m t-is-default"><input autocomplete="off" placeholder="" type="text" unselectable="off" value="1" class="t-input__inner"></div>
-        </div>
-      </div>页</div>
+    <div class="t-pagination__jump">跳至<div class="t-input-adornment t-input-adornment--append">
+        <div class="t-input-number t-size-m t-input-number--normal t-pagination__input">
+          <div class="t-input__wrap">
+            <div ref="refInputElem" class="t-input t-size-m t-is-default"><input autocomplete="off" placeholder="" type="text" unselectable="off" value="1" class="t-input__inner"></div>
+          </div>
+        </div><span class="t-input-adornment__append">/ 20 页</span>
+      </div>
+    </div>
   </div>
 </div>
 `;
@@ -10744,11 +10752,14 @@ exports[`ssr snapshot test renders ./examples/pagination/demos/jump.vue correctl
     <div class="t-pagination__btn t-pagination__btn-next"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-right">
         <path fill="currentColor" d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z" fill-opacity="0.9"></path>
       </svg></div>
-    <div class="t-pagination__jump">跳至<div class="t-input-number t-size-m t-input-number--normal t-pagination__input">
-        <div class="t-input__wrap">
-          <div ref="refInputElem" class="t-input t-size-m t-is-default"><input autocomplete="off" placeholder="" type="text" unselectable="off" value="1" class="t-input__inner"></div>
-        </div>
-      </div>页</div>
+    <div class="t-pagination__jump">跳至<div class="t-input-adornment t-input-adornment--append">
+        <div class="t-input-number t-size-m t-input-number--normal t-pagination__input">
+          <div class="t-input__wrap">
+            <div ref="refInputElem" class="t-input t-size-m t-is-default"><input autocomplete="off" placeholder="" type="text" unselectable="off" value="1" class="t-input__inner"></div>
+          </div>
+        </div><span class="t-input-adornment__append">/ 6 页</span>
+      </div>
+    </div>
   </div>
 </div>
 `;
@@ -10890,11 +10901,12 @@ exports[`ssr snapshot test renders ./examples/pagination/demos/simple.vue correc
     <div disabled="disabled" class="t-pagination__btn t-pagination__btn-prev t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-left">
         <path fill="currentColor" d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z" fill-opacity="0.9"></path>
       </svg></div>
-    <div class="t-select__wrap t-pagination__select">
-      <div class="t-input__wrap t-select">
-        <div class="t-input t-size-m t-is-default t-is-readonly t-input--auto-width t-input--prefix t-input--suffix">
-          <div class="t-input__prefix"></div><input readonly="readonly" autocomplete="" placeholder="请选择" type="text" unselectable="on" value="1/20" class="t-input__inner"><span class="t-input__input-pre">1/20</span><span class="t-input__suffix t-input__suffix-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span>
-        </div>
+    <div class="t-pagination__jump">跳至<div class="t-input-adornment t-input-adornment--append">
+        <div class="t-input-number t-size-m t-input-number--normal t-pagination__input">
+          <div class="t-input__wrap">
+            <div ref="refInputElem" class="t-input t-size-m t-is-default"><input autocomplete="off" placeholder="" type="text" unselectable="off" value="1" class="t-input__inner"></div>
+          </div>
+        </div><span class="t-input-adornment__append">/ 20 页</span>
       </div>
     </div>
     <div class="t-pagination__btn t-pagination__btn-next"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-right">
@@ -10917,11 +10929,12 @@ exports[`ssr snapshot test renders ./examples/pagination/demos/simple-mini.vue c
   <div disabled="disabled" class="t-pagination__btn t-pagination__btn-prev t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-left">
       <path fill="currentColor" d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z" fill-opacity="0.9"></path>
     </svg></div>
-  <div class="t-select__wrap t-pagination__select">
-    <div class="t-input__wrap t-select">
-      <div class="t-input t-size-s t-is-default t-is-readonly t-input--auto-width t-input--prefix t-input--suffix">
-        <div class="t-input__prefix"></div><input readonly="readonly" autocomplete="" placeholder="请选择" type="text" unselectable="on" value="1/20" class="t-input__inner"><span class="t-input__input-pre">1/20</span><span class="t-input__suffix t-input__suffix-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span>
-      </div>
+  <div class="t-pagination__jump">跳至<div class="t-input-adornment t-input-adornment--append">
+      <div class="t-input-number t-size-s t-input-number--normal t-pagination__input">
+        <div class="t-input__wrap">
+          <div ref="refInputElem" class="t-input t-size-m t-is-default"><input autocomplete="off" placeholder="" type="text" unselectable="off" value="1" class="t-input__inner"></div>
+        </div>
+      </div><span class="t-input-adornment__append">/ 20 页</span>
     </div>
   </div>
   <div class="t-pagination__btn t-pagination__btn-next"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-right">
@@ -17275,11 +17288,14 @@ exports[`ssr snapshot test renders ./examples/table/demos/pagination.vue correct
           <div class="t-pagination__btn t-pagination__btn-next"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-right">
               <path fill="currentColor" d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z" fill-opacity="0.9"></path>
             </svg></div>
-          <div class="t-pagination__jump">跳至<div class="t-input-number t-size-m t-input-number--normal t-pagination__input">
-              <div class="t-input__wrap">
-                <div ref="refInputElem" class="t-input t-size-m t-is-default"><input autocomplete="off" placeholder="" type="text" unselectable="off" value="2" class="t-input__inner"></div>
-              </div>
-            </div>页</div>
+          <div class="t-pagination__jump">跳至<div class="t-input-adornment t-input-adornment--append">
+              <div class="t-input-number t-size-m t-input-number--normal t-pagination__input">
+                <div class="t-input__wrap">
+                  <div ref="refInputElem" class="t-input t-size-m t-is-default"><input autocomplete="off" placeholder="" type="text" unselectable="off" value="2" class="t-input__inner"></div>
+                </div>
+              </div><span class="t-input-adornment__append">/ 12 页</span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -17347,11 +17363,14 @@ exports[`ssr snapshot test renders ./examples/table/demos/pagination-ajax.vue co
         <div disabled="disabled" class="t-pagination__btn t-pagination__btn-next t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-right">
             <path fill="currentColor" d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z" fill-opacity="0.9"></path>
           </svg></div>
-        <div class="t-pagination__jump">跳至<div class="t-input-number t-size-m t-input-number--normal t-pagination__input">
-            <div class="t-input__wrap">
-              <div ref="refInputElem" class="t-input t-size-m t-is-default"><input autocomplete="off" placeholder="" type="text" unselectable="off" value="1" class="t-input__inner"></div>
-            </div>
-          </div>页</div>
+        <div class="t-pagination__jump">跳至<div class="t-input-adornment t-input-adornment--append">
+            <div class="t-input-number t-size-m t-input-number--normal t-pagination__input">
+              <div class="t-input__wrap">
+                <div ref="refInputElem" class="t-input t-size-m t-is-default"><input autocomplete="off" placeholder="" type="text" unselectable="off" value="1" class="t-input__inner"></div>
+              </div>
+            </div><span class="t-input-adornment__append">/ 1 页</span>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -19099,7 +19118,7 @@ exports[`ssr snapshot test renders ./examples/transfer/demos/base.vue correctly
       </div>
       <div class="t-transfer__footer"></div>
     </div>
-    <div class="t-transfer__operations"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-right">
+    <div class="t-transfer__operations"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-right">
           <path fill="currentColor" d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z" fill-opacity="0.9"></path>
         </svg></button><button type="button" disabled="disabled" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-left">
           <path fill="currentColor" d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z" fill-opacity="0.9"></path>
@@ -19131,7 +19150,7 @@ exports[`ssr snapshot test renders ./examples/transfer/demos/checked.vue correct
       </div>
       <div class="t-transfer__footer"></div>
     </div>
-    <div class="t-transfer__operations"><button type="button" class="t-button t-size-m t-button--variant-base t-button--theme-primary"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-right">
+    <div class="t-transfer__operations"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-right">
           <path fill="currentColor" d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z" fill-opacity="0.9"></path>
         </svg></button><button type="button" disabled="disabled" class="t-button t-size-m t-button--variant-outline t-button--theme-default t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-left">
           <path fill="currentColor" d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z" fill-opacity="0.9"></path>
@@ -19318,11 +19337,12 @@ exports[`ssr snapshot test renders ./examples/transfer/demos/pagination.vue corr
           <div disabled="disabled" class="t-pagination__btn t-pagination__btn-prev t-is-disabled"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-left">
               <path fill="currentColor" d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z" fill-opacity="0.9"></path>
             </svg></div>
-          <div class="t-select__wrap t-pagination__select">
-            <div class="t-input__wrap t-select">
-              <div class="t-input t-size-s t-is-default t-is-readonly t-input--auto-width t-input--prefix t-input--suffix">
-                <div class="t-input__prefix"></div><input readonly="readonly" autocomplete="" placeholder="请选择" type="text" unselectable="on" value="1/2" class="t-input__inner"><span class="t-input__input-pre">1/2</span><span class="t-input__suffix t-input__suffix-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span>
-              </div>
+          <div class="t-pagination__jump">跳至<div class="t-input-adornment t-input-adornment--append">
+              <div class="t-input-number t-size-s t-input-number--normal t-pagination__input">
+                <div class="t-input__wrap">
+                  <div ref="refInputElem" class="t-input t-size-m t-is-default"><input autocomplete="off" placeholder="" type="text" unselectable="off" value="1" class="t-input__inner"></div>
+                </div>
+              </div><span class="t-input-adornment__append">/ 2 页</span>
             </div>
           </div>
           <div class="t-pagination__btn t-pagination__btn-next"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-chevron-right">
diff --git a/test/unit/config-provider/__snapshots__/demo.test.js.snap b/test/unit/config-provider/__snapshots__/demo.test.js.snap
index cf856cdc8..12fa6986d 100644
--- a/test/unit/config-provider/__snapshots__/demo.test.js.snap
+++ b/test/unit/config-provider/__snapshots__/demo.test.js.snap
@@ -3311,24 +3311,33 @@ exports[`ConfigProvider ConfigProvider paginationVue demo works fine 1`] = `
   >
     jump to
     <div
-      class="t-input-number t-size-m t-input-number--normal t-pagination__input"
+      class="t-input-adornment t-input-adornment--append"
     >
       <div
-        class="t-input__wrap"
+        class="t-input-number t-size-m t-input-number--normal t-pagination__input"
       >
         <div
-          class="t-input t-size-m t-is-default"
-          ref="refInputElem"
+          class="t-input__wrap"
         >
-          <input
-            autocomplete="off"
-            class="t-input__inner"
-            placeholder=""
-            type="text"
-            unselectable="off"
-          />
+          <div
+            class="t-input t-size-m t-is-default"
+            ref="refInputElem"
+          >
+            <input
+              autocomplete="off"
+              class="t-input__inner"
+              placeholder=""
+              type="text"
+              unselectable="off"
+            />
+          </div>
         </div>
       </div>
+      <span
+        class="t-input-adornment__append"
+      >
+        / 4 
+      </span>
     </div>
   </div>
 </div>
diff --git a/test/unit/pagination/__snapshots__/demo.test.js.snap b/test/unit/pagination/__snapshots__/demo.test.js.snap
index 5467933fb..bd1858add 100644
--- a/test/unit/pagination/__snapshots__/demo.test.js.snap
+++ b/test/unit/pagination/__snapshots__/demo.test.js.snap
@@ -443,26 +443,34 @@ exports[`Pagination Pagination customizableVue demo works fine 1`] = `
     >
       跳至
       <div
-        class="t-input-number t-size-m t-input-number--normal t-pagination__input"
+        class="t-input-adornment t-input-adornment--append"
       >
         <div
-          class="t-input__wrap"
+          class="t-input-number t-size-m t-input-number--normal t-pagination__input"
         >
           <div
-            class="t-input t-size-m t-is-default"
-            ref="refInputElem"
+            class="t-input__wrap"
           >
-            <input
-              autocomplete="off"
-              class="t-input__inner"
-              placeholder=""
-              type="text"
-              unselectable="off"
-            />
+            <div
+              class="t-input t-size-m t-is-default"
+              ref="refInputElem"
+            >
+              <input
+                autocomplete="off"
+                class="t-input__inner"
+                placeholder=""
+                type="text"
+                unselectable="off"
+              />
+            </div>
           </div>
         </div>
+        <span
+          class="t-input-adornment__append"
+        >
+          / 10 页
+        </span>
       </div>
-      页
     </div>
   </div>
 </div>
@@ -619,26 +627,34 @@ exports[`Pagination Pagination disabledVue demo works fine 1`] = `
     >
       跳至
       <div
-        class="t-input-number t-size-m t-input-number--normal t-pagination__input"
+        class="t-input-adornment t-input-adornment--append"
       >
         <div
-          class="t-input__wrap"
+          class="t-input-number t-size-m t-input-number--normal t-pagination__input"
         >
           <div
-            class="t-input t-size-m t-is-default"
-            ref="refInputElem"
+            class="t-input__wrap"
           >
-            <input
-              autocomplete="off"
-              class="t-input__inner"
-              placeholder=""
-              type="text"
-              unselectable="off"
-            />
+            <div
+              class="t-input t-size-m t-is-default"
+              ref="refInputElem"
+            >
+              <input
+                autocomplete="off"
+                class="t-input__inner"
+                placeholder=""
+                type="text"
+                unselectable="off"
+              />
+            </div>
           </div>
         </div>
+        <span
+          class="t-input-adornment__append"
+        >
+          / 20 页
+        </span>
       </div>
-      页
     </div>
   </div>
 </div>
@@ -899,26 +915,34 @@ exports[`Pagination Pagination jumpVue demo works fine 1`] = `
     >
       跳至
       <div
-        class="t-input-number t-size-m t-input-number--normal t-pagination__input"
+        class="t-input-adornment t-input-adornment--append"
       >
         <div
-          class="t-input__wrap"
+          class="t-input-number t-size-m t-input-number--normal t-pagination__input"
         >
           <div
-            class="t-input t-size-m t-is-default"
-            ref="refInputElem"
+            class="t-input__wrap"
           >
-            <input
-              autocomplete="off"
-              class="t-input__inner"
-              placeholder=""
-              type="text"
-              unselectable="off"
-            />
+            <div
+              class="t-input t-size-m t-is-default"
+              ref="refInputElem"
+            >
+              <input
+                autocomplete="off"
+                class="t-input__inner"
+                placeholder=""
+                type="text"
+                unselectable="off"
+              />
+            </div>
           </div>
         </div>
+        <span
+          class="t-input-adornment__append"
+        >
+          / 6 页
+        </span>
       </div>
-      页
     </div>
   </div>
 </div>
@@ -1590,50 +1614,37 @@ exports[`Pagination Pagination simpleMiniVue demo works fine 1`] = `
     </svg>
   </div>
   <div
-    class="t-select__wrap t-pagination__select"
+    class="t-pagination__jump"
   >
+    跳至
     <div
-      class="t-input__wrap t-select"
+      class="t-input-adornment t-input-adornment--append"
     >
       <div
-        class="t-input t-size-s t-is-default t-is-readonly t-input--auto-width t-input--prefix t-input--suffix"
+        class="t-input-number t-size-s t-input-number--normal t-pagination__input"
       >
         <div
-          class="t-input__prefix"
-        />
-        <input
-          autocomplete=""
-          class="t-input__inner"
-          placeholder="请选择"
-          readonly="readonly"
-          type="text"
-          unselectable="on"
-        />
-        <span
-          class="t-input__input-pre"
-        >
-          1/20
-        </span>
-        <span
-          class="t-input__suffix t-input__suffix-icon"
+          class="t-input__wrap"
         >
-          <svg
-            class="t-fake-arrow t-select__right-icon"
-            fill="none"
-            height="16"
-            viewBox="0 0 16 16"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
+          <div
+            class="t-input t-size-m t-is-default"
+            ref="refInputElem"
           >
-            <path
-              d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-              stroke="black"
-              stroke-opacity="0.9"
-              stroke-width="1.3"
+            <input
+              autocomplete="off"
+              class="t-input__inner"
+              placeholder=""
+              type="text"
+              unselectable="off"
             />
-          </svg>
-        </span>
+          </div>
+        </div>
       </div>
+      <span
+        class="t-input-adornment__append"
+      >
+        / 20 页
+      </span>
     </div>
   </div>
   <div
@@ -1732,50 +1743,37 @@ exports[`Pagination Pagination simpleVue demo works fine 1`] = `
       </svg>
     </div>
     <div
-      class="t-select__wrap t-pagination__select"
+      class="t-pagination__jump"
     >
+      跳至
       <div
-        class="t-input__wrap t-select"
+        class="t-input-adornment t-input-adornment--append"
       >
         <div
-          class="t-input t-size-m t-is-default t-is-readonly t-input--auto-width t-input--prefix t-input--suffix"
+          class="t-input-number t-size-m t-input-number--normal t-pagination__input"
         >
           <div
-            class="t-input__prefix"
-          />
-          <input
-            autocomplete=""
-            class="t-input__inner"
-            placeholder="请选择"
-            readonly="readonly"
-            type="text"
-            unselectable="on"
-          />
-          <span
-            class="t-input__input-pre"
-          >
-            1/20
-          </span>
-          <span
-            class="t-input__suffix t-input__suffix-icon"
+            class="t-input__wrap"
           >
-            <svg
-              class="t-fake-arrow t-select__right-icon"
-              fill="none"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="t-input t-size-m t-is-default"
+              ref="refInputElem"
             >
-              <path
-                d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                stroke="black"
-                stroke-opacity="0.9"
-                stroke-width="1.3"
+              <input
+                autocomplete="off"
+                class="t-input__inner"
+                placeholder=""
+                type="text"
+                unselectable="off"
               />
-            </svg>
-          </span>
+            </div>
+          </div>
         </div>
+        <span
+          class="t-input-adornment__append"
+        >
+          / 20 页
+        </span>
       </div>
     </div>
     <div
diff --git a/test/unit/table/__snapshots__/demo.test.js.snap b/test/unit/table/__snapshots__/demo.test.js.snap
index 863d41c31..9c668f899 100644
--- a/test/unit/table/__snapshots__/demo.test.js.snap
+++ b/test/unit/table/__snapshots__/demo.test.js.snap
@@ -17600,26 +17600,34 @@ exports[`Table Table paginationAjaxVue demo works fine 1`] = `
         >
           跳至
           <div
-            class="t-input-number t-size-m t-input-number--normal t-pagination__input"
+            class="t-input-adornment t-input-adornment--append"
           >
             <div
-              class="t-input__wrap"
+              class="t-input-number t-size-m t-input-number--normal t-pagination__input"
             >
               <div
-                class="t-input t-size-m t-is-default"
-                ref="refInputElem"
+                class="t-input__wrap"
               >
-                <input
-                  autocomplete="off"
-                  class="t-input__inner"
-                  placeholder=""
-                  type="text"
-                  unselectable="off"
-                />
+                <div
+                  class="t-input t-size-m t-is-default"
+                  ref="refInputElem"
+                >
+                  <input
+                    autocomplete="off"
+                    class="t-input__inner"
+                    placeholder=""
+                    type="text"
+                    unselectable="off"
+                  />
+                </div>
               </div>
             </div>
+            <span
+              class="t-input-adornment__append"
+            >
+              / 1 页
+            </span>
           </div>
-          页
         </div>
       </div>
     </div>
@@ -18075,26 +18083,34 @@ exports[`Table Table paginationVue demo works fine 1`] = `
           >
             跳至
             <div
-              class="t-input-number t-size-m t-input-number--normal t-pagination__input"
+              class="t-input-adornment t-input-adornment--append"
             >
               <div
-                class="t-input__wrap"
+                class="t-input-number t-size-m t-input-number--normal t-pagination__input"
               >
                 <div
-                  class="t-input t-size-m t-is-default"
-                  ref="refInputElem"
+                  class="t-input__wrap"
                 >
-                  <input
-                    autocomplete="off"
-                    class="t-input__inner"
-                    placeholder=""
-                    type="text"
-                    unselectable="off"
-                  />
+                  <div
+                    class="t-input t-size-m t-is-default"
+                    ref="refInputElem"
+                  >
+                    <input
+                      autocomplete="off"
+                      class="t-input__inner"
+                      placeholder=""
+                      type="text"
+                      unselectable="off"
+                    />
+                  </div>
                 </div>
               </div>
+              <span
+                class="t-input-adornment__append"
+              >
+                / 12 页
+              </span>
             </div>
-            页
           </div>
         </div>
       </div>
diff --git a/test/unit/transfer/__snapshots__/demo.test.js.snap b/test/unit/transfer/__snapshots__/demo.test.js.snap
index 59c9c019a..d4fb06bde 100644
--- a/test/unit/transfer/__snapshots__/demo.test.js.snap
+++ b/test/unit/transfer/__snapshots__/demo.test.js.snap
@@ -459,7 +459,7 @@ exports[`Transfer Transfer baseVue demo works fine 1`] = `
       class="t-transfer__operations"
     >
       <button
-        class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+        class="t-button t-size-m t-button--variant-outline t-button--theme-default"
         type="button"
       >
         <svg
@@ -1003,7 +1003,7 @@ exports[`Transfer Transfer checkedVue demo works fine 1`] = `
       class="t-transfer__operations"
     >
       <button
-        class="t-button t-size-m t-button--variant-base t-button--theme-primary"
+        class="t-button t-size-m t-button--variant-outline t-button--theme-default"
         type="button"
       >
         <svg
@@ -3326,50 +3326,37 @@ exports[`Transfer Transfer paginationVue demo works fine 1`] = `
             </svg>
           </div>
           <div
-            class="t-select__wrap t-pagination__select"
+            class="t-pagination__jump"
           >
+            跳至
             <div
-              class="t-input__wrap t-select"
+              class="t-input-adornment t-input-adornment--append"
             >
               <div
-                class="t-input t-size-s t-is-default t-is-readonly t-input--auto-width t-input--prefix t-input--suffix"
+                class="t-input-number t-size-s t-input-number--normal t-pagination__input"
               >
                 <div
-                  class="t-input__prefix"
-                />
-                <input
-                  autocomplete=""
-                  class="t-input__inner"
-                  placeholder="请选择"
-                  readonly="readonly"
-                  type="text"
-                  unselectable="on"
-                />
-                <span
-                  class="t-input__input-pre"
-                >
-                  1/2
-                </span>
-                <span
-                  class="t-input__suffix t-input__suffix-icon"
+                  class="t-input__wrap"
                 >
-                  <svg
-                    class="t-fake-arrow t-select__right-icon"
-                    fill="none"
-                    height="16"
-                    viewBox="0 0 16 16"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <div
+                    class="t-input t-size-m t-is-default"
+                    ref="refInputElem"
                   >
-                    <path
-                      d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                      stroke="black"
-                      stroke-opacity="0.9"
-                      stroke-width="1.3"
+                    <input
+                      autocomplete="off"
+                      class="t-input__inner"
+                      placeholder=""
+                      type="text"
+                      unselectable="off"
                     />
-                  </svg>
-                </span>
+                  </div>
+                </div>
               </div>
+              <span
+                class="t-input-adornment__append"
+              >
+                / 2 页
+              </span>
             </div>
           </div>
           <div

From a8d91750c6b6cfcb089065a6249bc438ba2d4e74 Mon Sep 17 00:00:00 2001
From: HQ-Lin <a154571896@gmail.com>
Date: Mon, 8 Aug 2022 15:39:44 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=20pagination=20?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pagination/pagination.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pagination/pagination.tsx b/src/pagination/pagination.tsx
index 59a0f292e..6775e502a 100644
--- a/src/pagination/pagination.tsx
+++ b/src/pagination/pagination.tsx
@@ -13,7 +13,7 @@ import mixins from '../utils/mixins';
 import getConfigReceiverMixins, { PaginationConfig } from '../config-provider/config-receiver';
 import TInputNumber from '../input-number';
 import { Select, Option } from '../select';
-import InputAdornment from '../input-adornment';
+import TInputAdornment from '../input-adornment';
 import CLASSNAMES from '../utils/classnames';
 import { renderTNodeJSX } from '../utils/render-tnode';
 import props from './props';
@@ -40,6 +40,7 @@ export default mixins(getConfigReceiverMixins<Vue, PaginationConfig>('pagination
     ChevronLeftDoubleIcon,
     EllipsisIcon,
     TInputNumber,
+    TInputAdornment,
     TSelect: Select,
     TOption: Option,
   },