feat(Pagination): 极简模式下合并快速跳转与页码跳转控制器 (#1256)

* feat: 调整 pagination 样式

* feat: 调整 pagination 样式

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 TInputAdornment from '../input-adornment';
 import CLASSNAMES from '../utils/classnames';
 import { renderTNodeJSX } from '../utils/render-tnode';
 import props from './props';
@@ -39,6 +40,7 @@ export default mixins(getConfigReceiverMixins<Vue, PaginationConfig>('pagination
     ChevronLeftDoubleIcon,
     EllipsisIcon,
     TInputNumber,
+    TInputAdornment,
     TSelect: Select,
     TOption: Option,
   },
@@ -304,6 +306,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 +401,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 +422,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>
     );
   },

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}

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>