feat: add i18n locale source, #1410 (#1411)

* feat: add i18n locale source, #1410
* fix: i18n source of plural

content/other/locale/index-en-US.md

@@ -23,6 +23,8 @@ brief: Internationalized components to provide multilingual support for Semi com
 | v2.2.0     | Spanish: es       |
 | v2.15.0     | Italian: it、French：fr、German：de   |
 | v2.21.0     | Romanian: ro   |
+| v2.29.0     | Swedish: sv_SE、 Polish: pl_PL、Dutch: nl_NL |
+
 
 ## Components supported
 
@@ -48,6 +50,9 @@ import th_TH from '@douyinfe/semi-ui/lib/es/locale/source/th_TH';
 import tr_TR from '@douyinfe/semi-ui/lib/es/locale/source/tr_TR';
 import pt_BR from '@douyinfe/semi-ui/lib/es/locale/source/pt_BR';
 import zh_TW from '@douyinfe/semi-ui/lib/es/locale/source/zh_TW';
+import sv_SE from '@douyinfe/semi-ui/lib/es/locale/source/sv_SE';
+import pl_PL from '@douyinfe/semi-ui/lib/es/locale/source/pl_PL';
+import nl_NL from '@douyinfe/semi-ui/lib/es/locale/source/nl_NL';
 import ar from '@douyinfe/semi-ui/lib/es/locale/source/ar';
 import es from '@douyinfe/semi-ui/lib/es/locale/source/es';
 import it from '@douyinfe/semi-ui/lib/es/locale/source/it';
@@ -186,6 +191,9 @@ import th_TH from '@douyinfe/semi-ui/lib/es/locale/source/th_TH';
 import tr_TR from '@douyinfe/semi-ui/lib/es/locale/source/tr_TR';
 import pt_BR from '@douyinfe/semi-ui/lib/es/locale/source/pt_BR';
 import zh_TW from '@douyinfe/semi-ui/lib/es/locale/source/zh_TW';
+import sv_SE from '@douyinfe/semi-ui/lib/es/locale/source/sv_SE';
+import pl_PL from '@douyinfe/semi-ui/lib/es/locale/source/pl_PL';
+import nl_NL from '@douyinfe/semi-ui/lib/es/locale/source/nl_NL';
 import ar from '@douyinfe/semi-ui/lib/es/locale/source/ar';
 import es from '@douyinfe/semi-ui/lib/es/locale/source/es';
 import it from '@douyinfe/semi-ui/lib/es/locale/source/it';
@@ -218,6 +226,9 @@ class I18nDemo extends React.Component {
             'ms_MY': ms_MY,
             'th_TH': th_TH,
             'tr_TR': tr_TR,
+            'sv_SE': sv_SE,
+            'pl_PL': pl_PL,
+            'nl_NL': nl_NL,
             es,
             de,
             it,
@@ -303,7 +314,7 @@ class I18nDemo extends React.Component {
             return (
                 <>
                     <h5>Pagination</h5>
-                    <Pagination total={100} showTotal showSizeChanger style={style} />
+                    <Pagination total={100} showTotal showSizeChanger style={style} showQuickJumper/>
                     <h5>Modal</h5>
 
                     <div style={style}>

content/other/locale/index.md

@@ -22,6 +22,7 @@ brief: 国际化组件，为 Semi 组件提供多语言支持
 | v2.2.0     | 西班牙语: es       |
 | v2.15.0     | 意大利语: it、法语：fr、德语：de   |
 | v2.21.0     | 罗马尼亚语: ro   |
+| v2.29.0     | 瑞典语: sv_SE、波兰语: pl_PL 、荷兰语: nl_NL |
 ## 已支持组件
 
 > DatePicker、TimePicker、Modal、Pagination、Select、Table、Cascader、Calendar、TreeSelect、List、Typography、Transfer、Nav、Upload、Form、Navigation、Image
@@ -46,6 +47,9 @@ import th_TH from '@douyinfe/semi-ui/lib/es/locale/source/th_TH';
 import tr_TR from '@douyinfe/semi-ui/lib/es/locale/source/tr_TR';
 import pt_BR from '@douyinfe/semi-ui/lib/es/locale/source/pt_BR';
 import zh_TW from '@douyinfe/semi-ui/lib/es/locale/source/zh_TW';
+import sv_SE from '@douyinfe/semi-ui/lib/es/locale/source/sv_SE';
+import pl_PL from '@douyinfe/semi-ui/lib/es/locale/source/pl_PL';
+import nl_NL from '@douyinfe/semi-ui/lib/es/locale/source/nl_NL';
 import ar from '@douyinfe/semi-ui/lib/es/locale/source/ar';
 import es from '@douyinfe/semi-ui/lib/es/locale/source/es';
 import it from '@douyinfe/semi-ui/lib/es/locale/source/it';
@@ -189,6 +193,9 @@ import th_TH from '@douyinfe/semi-ui/lib/es/locale/source/th_TH';
 import tr_TR from '@douyinfe/semi-ui/lib/es/locale/source/tr_TR';
 import pt_BR from '@douyinfe/semi-ui/lib/es/locale/source/pt_BR';
 import zh_TW from '@douyinfe/semi-ui/lib/es/locale/source/zh_TW';
+import sv_SE from '@douyinfe/semi-ui/lib/es/locale/source/sv_SE';
+import pl_PL from '@douyinfe/semi-ui/lib/es/locale/source/pl_PL';
+import nl_NL from '@douyinfe/semi-ui/lib/es/locale/source/nl_NL';
 import es from '@douyinfe/semi-ui/lib/es/locale/source/es';
 import it from '@douyinfe/semi-ui/lib/es/locale/source/it';
 import de from '@douyinfe/semi-ui/lib/es/locale/source/de';
@@ -223,6 +230,9 @@ class I18nDemo extends React.Component {
             'pt_BR': pt_BR,
             'zh_TW': zh_TW,
             'es': es,
+            'sv_SE': sv_SE,
+            'pl_PL': pl_PL,
+            'nl_NL': nl_NL,
             de,
             it,
             fr,
@@ -307,7 +317,7 @@ class I18nDemo extends React.Component {
             return (
                 <>
                     <h5>Pagination</h5>
-                    <Pagination total={100} showTotal showSizeChanger style={style} />
+                    <Pagination total={100} showTotal showSizeChanger style={style} showQuickJumper />
                     <h5>Modal</h5>
 
                     <div style={style}>

packages/semi-ui/locale/_story/locale.stories.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import {
   Modal,
   Pagination,
@@ -8,7 +8,9 @@ import {
   Select,
   Button,
   Cascader,
-  LocaleProvider
+  LocaleProvider,
+  ConfigProvider,
+  Pagination, Modal, Button, Select, DatePicker, TreeSelect, Table, TimePicker, List, Calendar, Typography, Transfer, ImagePreview, Image, Form, Nav
 } from '../../index';
 
 import zh_CN from '@douyinfe/semi-ui/locale/source/zh_CN';
@@ -18,6 +20,23 @@ import ko_KR from '@douyinfe/semi-ui/locale/source/ko_KR';
 import ja_JP from '@douyinfe/semi-ui/locale/source/ja_JP';
 import ru_RU from '@douyinfe/semi-ui/locale/source/ru_RU';
 import vi_VN from '@douyinfe/semi-ui/locale/source/vi_VN';
+import ar from '@douyinfe/semi-ui/locale/source/ar';
+import id_ID from '@douyinfe/semi-ui/locale/source/id_ID';
+import ms_MY from '@douyinfe/semi-ui/locale/source/ms_MY';
+import th_TH from '@douyinfe/semi-ui/locale/source/th_TH';
+import tr_TR from '@douyinfe/semi-ui/locale/source/tr_TR';
+import pt_BR from '@douyinfe/semi-ui/locale/source/pt_BR';
+import zh_TW from '@douyinfe/semi-ui/locale/source/zh_TW';
+import sv_SE from '@douyinfe/semi-ui/locale/source/sv_SE';
+import pl_PL from '@douyinfe/semi-ui/locale/source/pl_PL';
+import nl_NL from '@douyinfe/semi-ui/locale/source/nl_NL';
+import es from '@douyinfe/semi-ui/locale/source/es';
+import it from '@douyinfe/semi-ui/locale/source/it';
+import de from '@douyinfe/semi-ui/locale/source/de';
+import fr from '@douyinfe/semi-ui/locale/source/fr';
+import ro from '@douyinfe/semi-ui/locale/source/ro';
+import { IconUser, IconSemiLogo, IconStar } from '@douyinfe/semi-icons';
+
 
 const { Option } = Select;
 
@@ -110,44 +129,6 @@ const I18nComponent = () => {
   );
 };
 
-class I18nDemo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      locale: zh_CN,
-    };
-    this.onLanguageChange = this.onLanguageChange.bind(this);
-  }
-
-  onLanguageChange(code) {
-    let language = {
-      zh_CN: zh_CN,
-      en_GB: en_GB,
-      ko_KR: ko_KR,
-      ja_JP: ja_JP,
-    };
-    this.setState({ locale: language[code] });
-  }
-
-  render() {
-    const { locale } = this.state;
-    return (
-      <>
-        <Select onChange={this.onLanguageChange}>
-          <Option value="zh_CN">中文</Option>
-          <Option value="en_GB">英语（英）</Option>
-          <Option value="ja_JP">日语</Option>
-          <Option value="ko_KR">韩语</Option>
-        </Select>
-        <hr />
-        <LocaleProvider locale={locale}>
-          <I18nComponent />
-        </LocaleProvider>
-      </>
-    );
-  }
-}
-
 export const LocaleZhCn = () => (
   <LocaleProvider locale={zh_CN}>
     <I18nComponent />
@@ -218,4 +199,252 @@ LocaleViVn.story = {
   name: 'Locale vi_VN',
 };
 
+class I18nDemo extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            locale: zh_CN,
+            localeCode: 'zh_CN',
+        };
+        this.onLanguageChange = this.onLanguageChange.bind(this);
+    }
+
+    onLanguageChange(code) {
+        let language = {
+            'zh_CN': zh_CN,
+            'en_GB': en_GB,
+            'ko_KR': ko_KR,
+            'ja_JP': ja_JP,
+            'ar': ar,
+            'vi_VN': vi_VN,
+            'ru_RU': ru_RU,
+            'id_ID': id_ID,
+            'ms_MY': ms_MY,
+            'th_TH': th_TH,
+            'tr_TR': tr_TR,
+            'pt_BR': pt_BR,
+            'zh_TW': zh_TW,
+            'es': es,
+            'sv_SE': sv_SE,
+            'pl_PL': pl_PL,
+            'nl_NL': nl_NL,
+            de,
+            it,
+            fr,
+            ro
+        };
+        this.setState({ locale: language[code], localeCode: code });
+    }
+
+    render() {
+        const { locale, localeCode } = this.state;
+        const treeData = [
+            {
+                label: 'Asia',
+                value: 'asia',
+                key: '1',
+                children: [
+                    {
+                        label: 'China',
+                        value: 'china',
+                        key: '1-0',
+                        children: [
+                            { label: 'Beijing', value: 'beijing', key: '1-0-0' },
+                            { label: 'Shanghai', value: 'shanghai', key: '1-0-1' },
+                        ],
+                    },
+                    {
+                        label: 'Japan',
+                        value: 'japan',
+                        key: '1-1',
+                        children: [ { label: 'Osaka', value: 'osaka', key: '1-1-0' } ]
+                    },
+                ]
+            }
+        ];
+        const I18nComponent = () => {
+            const [modalVisible, setModalVisible] = useState(false);
+            const columns = useMemo(() => [
+                {
+                    title: 'Name',
+                    width: 250,
+                    dataIndex: 'name',
+                },
+                {
+                    title: 'Age',
+                    width: 150,
+                    dataIndex: 'age',
+                },
+                {
+                    title: 'Address',
+                    dataIndex: 'address',
+                },
+            ]);
+            const dataSource = useMemo(() => {
+                const data = [];
+                for (let i = 0; i < 46; i++) {
+                    data.push({
+                        key: '' + i,
+                        name: `Bytedance ${i}`,
+                        age: 32,
+                        address: `Beijing, Haidian. Zhichun Road ${i}`,
+                    });
+                }
+                return data;
+            });
+            const transferData = useMemo(() => {
+                return Array.from({ length: 100 }, (v, i) => {
+                    return {
+                        label: `选项名称 ${i}`,
+                        value: i,
+                        disabled: false,
+                        key: i,
+                    };
+                });
+            });
+            const srcList = useMemo(() => ([
+                "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg",
+                "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/sky.jpg",
+                "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/greenleaf.jpg",
+                "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/colorful.jpg",
+            ]), []);
+            const style = { margin: 10 };
+            return (
+                <>
+                    <h5>Pagination</h5>
+                    <Pagination total={100} showTotal showSizeChanger style={style} />
+                    <h5>Modal</h5>
+
+                    <div style={style}>
+                        <Button onClick={() => setModalVisible(true)}>
+                            Show Modal
+                        </Button>
+                        <Modal
+                            title="Modal"
+                            visible={modalVisible}
+                            onOk={() => setModalVisible(false)}
+                            onCancel={() => setModalVisible(false)}
+                        >
+                            <p>This is the content of a basic modal.</p>
+                            <p>More content...</p>
+                        </Modal>
+                    </div>
+                    <h5>Select & Cascader</h5>
+                    <div style={style}>
+                        <Select filter style={{ width: '180px' }}>
+                            <Select.Option value='abc'>abc</Select.Option>
+                            <Select.Option value='vigo' disabled>vigo</Select.Option>
+                            <Select.Option value='hotsoon'>hotsoon</Select.Option>
+                        </Select>
+                        <Cascader
+                            style={{ width: 300, margin: 10 }}
+                            treeData={treeData}
+                            filterTreeNode
+                            insetLabel='Cascader'
+                        />
+                    </div>
+                    <h5>DatePicker</h5>
+                    <DatePicker style={{ ...style, width: 250 }} />
+                    <DatePicker style={{ ...style, width: 300 }} type='dateTime' />
+                    <DatePicker style={{ ...style, width: 300 }} type='dateRange' />
+                    <DatePicker style={{ ...style, width: 450 }} type='dateTimeRange' />
+                    <h5>TimePicker</h5>
+                    <TimePicker style={style} />
+                    <TimePicker use12Hours style={style} /><br/><br/>
+                    <h5>TreeSelect</h5>
+                    <TreeSelect
+                        style={{ ...style, width: 300 }}
+                        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                        treeData={treeData}
+                        filterTreeNode
+                    />
+                    <h5>Table</h5>
+                    <Table columns={columns} dataSource={dataSource} scroll={{ y: 320 }} />
+                    <h5>Table - Empty</h5>
+                    <Table columns={columns} dataSource={[]} scroll={{ y: 320 }} />
+                    <h5>List - Empty</h5>
+                    <List header={<div>List</div>} dataSource={[]}/>
+                    <h5>Calendar</h5>
+                    <Calendar mode='month' />
+                    <h5>Typography - Copyable</h5>
+                    <Typography.Paragraph copyable>Click to copy text.</Typography.Paragraph>
+                    <h5>Typography - Collapsible</h5>
+                    <Typography.Paragraph ellipsis={{ rows: 3, expandable: true, collapsible: true }} style={{ width: 300 }}>
+                        支持展开和折叠：Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
+                    </Typography.Paragraph>
+                    <h5>Transfer</h5>
+                    <Transfer
+                        style={{ width: 568, height: 416 }}
+                        dataSource={transferData}
+                    />
+                    <h5>Image</h5>
+                    <ImagePreview showTooltip>
+                        {srcList.map((src, index) => {
+                            return (
+                                <Image 
+                                    key={index} 
+                                    src={src} 
+                                    width={200} 
+                                    alt={`lamp${index + 1}`} 
+                                    style={{ marginRight: 5 }}
+                                />
+                            );
+                        })}
+                    </ImagePreview>
+                    <h5>Form</h5>
+                    <Form layout='horizontal' onValueChange={values=>console.log(values)}>
+                        <Form.Input field='UserName' label={{ text: '角色', optional: true }} style={{ width: 200 }} />
+                    </Form>
+                    <h5>Navigation</h5>
+                    <Nav
+                        bodyStyle={{ height: 320 }}
+                        items={[
+                            { itemKey: 'user', text: '用户管理', icon: <IconUser /> },
+                            { itemKey: 'union', text: '活动管理', icon: <IconStar /> },
+                        ]}
+                        header={{
+                            logo: <IconSemiLogo style={{ height: '36px', fontSize: 36 }} />,
+                            text: 'Semi 数据后台'
+                        }}
+                        footer={{
+                            collapseButton: true,
+                        }}
+                    />
+                </>
+            );
+        };
+        return (
+            <>
+                <div style={{ borderBottom: '1px solid var(--semi-color-border)', paddingBottom: 20 }}>
+                    <Select onChange={this.onLanguageChange} insetLabel='切换语言' style={{ width: 250 }} defaultValue='zh_CN'>
+                        <Select.Option value='zh_CN'>简体中文</Select.Option>
+                        <Select.Option value='en_GB'>英语（英）</Select.Option>
+                        <Select.Option value='ja_JP'>日语</Select.Option>
+                        <Select.Option value='ko_KR'>韩语</Select.Option>
+                        <Select.Option value='ar'>阿拉伯语</Select.Option>
+                        <Select.Option value='vi_VN'>越南语</Select.Option>
+                        <Select.Option value='ru_RU'>俄罗斯语</Select.Option>
+                        <Select.Option value='id_ID'>印尼语</Select.Option>
+                        <Select.Option value='ms_MY'>马来语</Select.Option>
+                        <Select.Option value='th_TH'>泰语</Select.Option>
+                        <Select.Option value='tr_TR'>土耳其语</Select.Option>
+                        <Select.Option value='pt_BR'>葡萄牙语（巴西）</Select.Option>
+                        <Select.Option value='zh_TW'>繁体中文</Select.Option>
+                        <Select.Option value='es'>西班牙语</Select.Option>
+                        <Select.Option value='de'>德语</Select.Option>
+                        <Select.Option value='it'>意大利语</Select.Option>
+                        <Select.Option value='fr'>法语</Select.Option>
+                        <Select.Option value='ro'>罗马尼亚语</Select.Option>
+                    </Select>
+                </div>
+                <LocaleProvider locale={locale}>
+                    <ConfigProvider direction={localeCode === 'ar' ? 'rtl' : 'ltr'} locale={locale}>
+                        <I18nComponent />
+                    </ConfigProvider>
+                </LocaleProvider>
+            </>
+        );
+    }
+}
+
 export const Locale = () => <I18nDemo />;

packages/semi-ui/locale/interface.ts

@@ -4,11 +4,10 @@ export interface Locale {
     code: string;
     dateFnsLocale: dateFnsLocale;
     Pagination: {
-        item: string;
-        page: string;
         pageSize: string;
         total: string;
-        jumpTo: string
+        jumpTo: string;
+        page: string
     };
     Modal: {
         confirm: string;

packages/semi-ui/locale/source/ar.ts

@@ -5,11 +5,10 @@ const local: Locale = {
     code: 'ar',
     dateFnsLocale: arSA,
     Pagination: {
-        item: 'بند',
-        pageSize: ' العناصر / الصفحة',
+        pageSize: 'عدد العناصر في كل صفحة : ${pageSize} ',
+        total: 'مجموع الصفحات: ${total}',
+        jumpTo: 'اقفز إلى',
         page: ' الصفحات',
-        total: '',
-        jumpTo: 'اقفز إلى'
     },
     Modal: {
         confirm: 'تؤكد',
@@ -117,7 +116,7 @@ const local: Locale = {
         AM: '${time} صباح',
         PM: '${time} في الظهيرة',
         datestring: '',
-        remaining: '${remained} أكثر',
+        remaining: 'الكمية المتبقية: ${remained}',
     },
     Upload: {
         mainText: 'انقر لتحميل الملف أو اسحب الملف إلى هنا',
@@ -147,8 +146,8 @@ const local: Locale = {
         clear: 'واضح',
         selectAll: 'اختر الكل',
         clearSelectAll: 'إلغاء تحديد الكل',
-        total: 'مجموع ${total} العناصر',
-        selected: '${total} العناصر المحدد',
+        total: "الكمية الإجمالية: ${total}",
+        selected: "الكمية المحددة: ${total}"
     },
     Form: {
         optional: '(اختياري)',

packages/semi-ui/locale/source/de.ts

@@ -5,11 +5,10 @@ const local: Locale = {
     code: 'de',
     dateFnsLocale: de,
     Pagination: {
-        item: 'Artikel',
-        pageSize: ' Artikel / Seite',
+        pageSize: '${pageSize} Artikel / Seite',
+        total: '${total} Seiten',
+        jumpTo: 'Springen zu',
         page: ' Seiten',
-        total: '',
-        jumpTo: 'Springen zu'
     },
     Modal: {
         confirm: 'Bestätigen',

packages/semi-ui/locale/source/en_GB.ts

@@ -5,11 +5,10 @@ const local: Locale = {
     code: 'en-GB',
     dateFnsLocale: enGB,
     Pagination: {
-        item: 'item',
-        pageSize: ' items / page',
-        page: ' pages',
-        total: '',
-        jumpTo: 'Jump to'
+        pageSize: '${pageSize} items / page',
+        total: '${total} pages',
+        jumpTo: 'Jump to',
+        page: ' page',
     },
     Modal: {
         confirm: 'Confirm',

packages/semi-ui/locale/source/en_US.ts

@@ -5,11 +5,10 @@ const local: Locale = {
     code: 'en-US',
     dateFnsLocale: enUS,
     Pagination: {
-        item: 'item',
-        pageSize: ' items / page',
-        page: ' pages',
-        total: '',
-        jumpTo: 'Jump to'
+        pageSize: '${pageSize} items / page',
+        total: '${total} pages',
+        jumpTo: 'Jump to',
+        page: ' page',
     },
     Modal: {
         confirm: 'Confirm',

packages/semi-ui/locale/source/es.ts

@@ -10,11 +10,10 @@ const locale: Locale = {
     code: 'es',
     dateFnsLocale: es,
     Pagination: {
-        item: 'objeto',
-        pageSize: ' objetos / página',
-        page: ' páginas',
-        total: '',
+        pageSize: '${pageSize} objetos / página',
+        total: '${total} páginas',
         jumpTo: 'Ir a',
+        page: ' páginas',
     },
     Modal: {
         confirm: 'Aceptar',

packages/semi-ui/locale/source/fr.ts

@@ -5,11 +5,10 @@ const local: Locale = {
     code: 'fr',
     dateFnsLocale: fr,
     Pagination: {
-        item: 'article',
-        pageSize: ' articles/page',
+        pageSize: '${pageSize} articles/page',
+        total: '${total} pages',
+        jumpTo: 'Sauter à',
         page: ' pages',
-        total: '',
-        jumpTo: 'Sauter à'
     },
     Modal: {
         confirm: 'Confirmer',

packages/semi-ui/locale/source/id_ID.ts

@@ -5,11 +5,10 @@ const local: Locale = {
     code: 'id-ID',
     dateFnsLocale: id,
     Pagination: {
-        item: 'item',
-        pageSize: ' item / halaman',
+        pageSize: '${pageSize} item / halaman',
+        total: '${total} halaman',
+        jumpTo: 'Langsung ke',
         page: ' halaman',
-        total: '',
-        jumpTo: 'Langsung ke'
     },
     Modal: {
         confirm: 'Konfirmasi',

packages/semi-ui/locale/source/it.ts

@@ -5,11 +5,10 @@ const local: Locale = {
     code: 'it',
     dateFnsLocale: it,
     Pagination: {
-        item: 'elemento',
-        pageSize: ' elementi / pagine',
+        pageSize: '${pageSize} elementi / pagine',
+        total: '${total} pagine',
+        jumpTo: 'Vai a',
         page: ' pagine',
-        total: '',
-        jumpTo: 'Vai a'
     },
     Modal: {
         confirm: 'Conferma',

packages/semi-ui/locale/source/ja_JP.ts

@@ -5,11 +5,10 @@ const local: Locale = {
     code: 'ja-JP',
     dateFnsLocale: ja,
     Pagination: {
-        item: '個数',
+        pageSize: '${pageSize} 個数 / ページ',
+        total: '合計 ${total} ページ',
+        jumpTo: 'ページへ',
         page: 'ページ',
-        pageSize: '個数 / ページ',
-        total: '合計',
-        jumpTo: 'ページへ'
     },
     Modal: {
         confirm: '確認する',

packages/semi-ui/locale/source/ko_KR.ts

@@ -5,11 +5,10 @@ const local: Locale = {
     code: 'ko-KR',
     dateFnsLocale: ko,
     Pagination: {
-        item: '기사',
+        pageSize: '${pageSize} 기사 / 페이지',
+        total: '${total} 페이지',
+        jumpTo: '이동',
         page: '페이지',
-        pageSize: '기사 / 페이지',
-        total: '',
-        jumpTo: '이동'
     },
     Modal: {
         confirm: '확인',

packages/semi-ui/locale/source/ms_MY.ts

@@ -5,11 +5,10 @@ const local: Locale = {
     code: 'ms-MY',
     dateFnsLocale: ms,
     Pagination: {
-        item: 'item',
-        pageSize: ' items / halaman',
+        pageSize: ' ${pageSize} items / halaman',
+        total: '${total} halaman',
+        jumpTo: 'Lompat ke',
         page: ' halaman',
-        total: '',
-        jumpTo: 'Lompat ke'
     },
     Modal: {
         confirm: 'Sahkan',

packages/semi-ui/locale/source/nl_NL.ts

@@ -0,0 +1,177 @@
+
+import { nl } from 'date-fns/locale';
+import { Locale } from '../interface';
+
+/**
+ * [i18n-Dutch (pl_PL)]
+ * 荷兰语
+ *
+ */
+
+const local: Locale = {
+    code: 'pl_PL',
+    dateFnsLocale: nl, // locale code to dateFns locale
+    Pagination: {
+        page: 'pagina',
+        pageSize: 'Artikelen per pagina: ${pageSize}',
+        total: "Totaal ${total} pagina's",
+        jumpTo: 'Ga naar'
+    },
+    Modal: {
+        confirm: 'Bevestigen',
+        cancel: 'Annuleren',
+    },
+    TimePicker: {
+        placeholder: {
+            time: 'Tijd selecteren',
+            timeRange: 'Selecteer een tijdbereik',
+        },
+        begin: 'Begintijd',
+        end: 'Eindtijd',
+        hour: '',
+        minute: '',
+        second: '',
+        AM: '',
+        PM: '',
+    },
+    DatePicker: {
+        placeholder: {
+            date: 'Datum selecteren',
+            dateTime: 'Datum en tijd selecteren',
+            dateRange: ['Begindatum', 'Einddatum'],
+            dateTimeRange: ['Begindatum', 'Einddatum'],
+        },
+        footer: {
+            confirm: 'Bevestigen',
+            cancel: 'Annuleren',
+        },
+        selectDate: 'Datum selecteren',
+        selectTime: 'Tijd selecteren',
+        year: '',
+        month: '',
+        day: '',
+        monthText: '${month} ${year}',
+        months: {
+            1: 'jan',
+            2: 'feb',
+            3: 'mrt',
+            4: 'apr',
+            5: 'mei',
+            6: 'jun',
+            7: 'jul',
+            8: 'aug',
+            9: 'sep',
+            10: 'okt',
+            11: 'nov',
+            12: 'dec',
+        },
+        fullMonths: {
+            1: 'januari',
+            2: 'februari',
+            3: 'maart',
+            4: 'april',
+            5: 'mei',
+            6: 'juni',
+            7: 'juli',
+            8: 'augustus',
+            9: 'september',
+            10: 'oktober',
+            11: 'november',
+            12: 'december',
+        },
+        weeks: {
+            Mon: 'ma',
+            Tue: 'di',
+            Wed: 'wo',
+            Thu: 'do',
+            Fri: 'vr',
+            Sat: 'za',
+            Sun: 'zo',
+        },
+        localeFormatToken: {
+            FORMAT_SWITCH_DATE: 'yyyy-MM-dd',
+        },
+    },
+    Navigation: {
+        collapseText: 'Zijbalk verbergen',
+        expandText: 'Zijbalk weergeven',
+    },
+    Popconfirm: {
+        confirm: 'Bevestigen',
+        cancel: 'Annuleren',
+    },
+    Table: {
+        emptyText: 'Geen resultaten gevonden',
+        pageText: '${currentStart} tot ${currentEnd} van ${total} wordt weergegeven',
+    },
+    Select: {
+        emptyText: 'Geen resultaten gevonden',
+        createText: 'Maken',
+    },
+    Cascader: {
+        emptyText: 'Geen resultaten gevonden',
+    },
+    Tree: {
+        emptyText: 'Geen resultaten gevonden',
+        searchPlaceholder: 'Zoeken',
+    },
+    List: {
+        emptyText: 'Geen resultaten gevonden',
+    },
+    Calendar: {
+        allDay: 'Hele dag',
+        AM: '${time} AM',
+        PM: '${time} PM',
+        datestring: '',
+        remaining: ' nog ${remained}',
+    },
+    Upload: {
+        mainText: 'Klik om een bestand te selecteren of sleep het hierheen om te uploaden',
+        illegalTips: 'Dit type bestand wordt niet ondersteund',
+        legalTips: 'Loslaten om te beginnen met uploaden',
+        retry: 'Opnieuw proberen',
+        replace: 'Bestand vervangen',
+        clear: 'Wissen',
+        selectedFiles: 'Geselecteerde bestanden',
+        illegalSize: 'Onjuiste bestandsgrootte',
+        fail: 'Kan niet uploaden',
+    },
+    TreeSelect: {
+        searchPlaceholder: 'Zoeken',
+    },
+    Typography: {
+        copy: 'Kopiëren',
+        copied: 'Gekopieerd',
+        expand: 'Meer weergeven',
+        collapse: 'Verbergen',
+    },
+    Transfer: {
+        emptyLeft: 'Geen gegevens',
+        emptySearch: 'Geen zoekresultaten',
+        emptyRight: 'Geselecteerde items verschijnen hier. Selecteer een item links',
+        placeholder: 'Zoeken',
+        clear: 'Wissen',
+        selectAll: 'Alles selecteren',
+        clearSelectAll: 'Alle selecties opheffen',
+        total: '${total} stuks in totaal',
+        selected: '${total} artikelen geselecteerd',
+    },
+    Form: {
+        optional: 'Optioneel',
+    },
+    Image: {
+        preview: 'Voorbeeld',
+        loading: 'Laden',
+        loadError: 'Kan niet laden',
+        prevTip: 'Vorige',
+        nextTip: 'Volgende',
+        zoomInTip: 'Inzoomen',
+        zoomOutTip: 'Uitzoomen',
+        rotateTip: 'Draaien',
+        downloadTip: 'Downloaden',
+        adaptiveTip: 'Adaptieve weergave',
+        originTip: 'Standaardweergave',
+    },
+};
+
+export default local;

packages/semi-ui/locale/source/pl_PL.ts

@@ -0,0 +1,178 @@
+
+
+import { pl } from 'date-fns/locale';
+import { Locale } from '../interface';
+
+/**
+ * [i18n-Poland (pl_PL)]
+ * 波兰语
+ *
+ */
+
+const local: Locale = {
+    code: 'pl_PL',
+    dateFnsLocale: pl, // locale code to dateFns locale
+    Pagination: {
+        pageSize: 'Pozycje na stronie: ${pageSize}',
+        total: 'Razem stron: ${total}',
+        jumpTo: 'Przejdź do',
+        page: 'stron',
+    },
+    Modal: {
+        confirm: 'Potwierdź',
+        cancel: 'Anuluj',
+    },
+    TimePicker: {
+        placeholder: {
+            time: 'Wybierz czas',
+            timeRange: 'Wybierz przedział czasowy',
+        },
+        begin: 'Czas rozpoczęcia',
+        end: 'Czas zakończenia',
+        hour: '',
+        minute: '',
+        second: '',
+        AM: '',
+        PM: '',
+    },
+    DatePicker: {
+        placeholder: {
+            date: 'Wybierz datę',
+            dateTime: 'Wybierz datę i godzinę',
+            dateRange: ['Data rozpoczęcia', 'Data zakończenia'],
+            dateTimeRange: ['Data rozpoczęcia', 'Data zakończenia'],
+        },
+        footer: {
+            confirm: 'Potwierdź',
+            cancel: 'Anuluj',
+        },
+        selectDate: 'Wybierz datę',
+        selectTime: 'Wybierz godzinę',
+        year: '',
+        month: '',
+        day: '',
+        monthText: '${month} ${year}',
+        months: {
+            1: 'Sty',
+            2: 'Lut',
+            3: 'Mar',
+            4: 'Kwi',
+            5: 'Maj',
+            6: 'Cze',
+            7: 'Lip',
+            8: 'Sie',
+            9: 'Wrz',
+            10: 'Paź',
+            11: 'Lis',
+            12: 'Gru',
+        },
+        fullMonths: {
+            1: 'styczeń',
+            2: 'luty',
+            3: 'marzec',
+            4: 'kwiecień',
+            5: 'maj',
+            6: 'czerwiec',
+            7: 'lipiec',
+            8: 'sierpień',
+            9: 'wrzesień',
+            10: 'październik',
+            11: 'listopad',
+            12: 'grudzień',
+        },
+        weeks: {
+            Mon: 'Po',
+            Tue: 'Wt',
+            Wed: 'Śr',
+            Thu: 'Cz',
+            Fri: 'Pt',
+            Sat: 'So',
+            Sun: 'Nd',
+        },
+        localeFormatToken: {
+            FORMAT_SWITCH_DATE: 'yyyy-MM-dd',
+        },
+    },
+    Navigation: {
+        collapseText: 'Ukryj pasek boczny',
+        expandText: 'Pokaż pasek boczny',
+    },
+    Popconfirm: {
+        confirm: 'Potwierdź',
+        cancel: 'Anuluj',
+    },
+    Table: {
+        emptyText: 'Nie znaleziono żadnych wyników',
+        pageText: 'Wyświetlanie od ${currentStart} do ${currentEnd} z ${total}',
+    },
+    Select: {
+        emptyText: 'Nie znaleziono żadnych wyników',
+        createText: 'Utwórz',
+    },
+    Cascader: {
+        emptyText: 'Nie znaleziono żadnych wyników',
+    },
+    Tree: {
+        emptyText: 'Nie znaleziono żadnych wyników',
+        searchPlaceholder: 'Wyszukaj',
+    },
+    List: {
+        emptyText: 'Nie znaleziono żadnych wyników',
+    },
+    Calendar: {
+        allDay: 'Cały dzień',
+        AM: '${time} AM',
+        PM: '${time} PM',
+        datestring: '',
+        remaining: 'jeszcze ${remained}',
+    },
+    Upload: {
+        mainText: 'Kliknij, aby wybrać plik, lub przeciągnij go tutaj, aby go przesłać.',
+        illegalTips: 'Ten typ pliku jest nieobsługiwany.',
+        legalTips: 'Zwolnij, aby rozpocząć przesyłanie.',
+        retry: 'Spróbuj ponownie',
+        replace: 'Zastąp plik',
+        clear: 'Wyczyść',
+        selectedFiles: 'Wybrane pliki',
+        illegalSize: 'Nieprawidłowy rozmiar pliku',
+        fail: 'Nie można przesłać',
+    },
+    TreeSelect: {
+        searchPlaceholder: 'Wyszukaj',
+    },
+    Typography: {
+        copy: 'Kopiuj',
+        copied: 'Skopiowano',
+        expand: 'Pokaż więcej',
+        collapse: 'Ukryj',
+    },
+    Transfer: {
+        emptyLeft: 'Brak danych',
+        emptySearch: 'Brak wyników wyszukiwania',
+        emptyRight: 'Tutaj pojawią się wybrane przedmioty. Wybierz przedmiot z lewej strony',
+        placeholder: 'Wyszukaj',
+        clear: 'Wyczyść',
+        selectAll: 'Zaznacz wszystkie',
+        clearSelectAll: 'Usuń zaznaczenie wszystkich',
+        total: 'Całkowita ilość: ${total}',
+        selected: 'Wybrana ilość: ${total}', 
+    },
+    Form: {
+        optional: '（Opcjonalnie）',
+    },
+    Image: {
+        preview: 'Podgląd',
+        loading: 'Zgrywanie',
+        loadError: 'Nie można zgrać',
+        prevTip: 'Wstecz',
+        nextTip: 'Dalej',
+        zoomInTip: 'Powiększ',
+        zoomOutTip: 'Pomniejsz',
+        rotateTip: 'Obróć',
+        downloadTip: 'Pobierz',
+        adaptiveTip: 'Dostosowywanie ekranu',
+        originTip: 'Wyświetlacz domyślny',
+    },
+};
+
+export default local;

packages/semi-ui/locale/source/pt_BR.ts

@@ -5,11 +5,10 @@ const local: Locale = {
     code: 'pt-BR',
     dateFnsLocale: ptBR,
     Pagination: {
-        item: 'artigo',
+        pageSize: '${pageSize} artigo /página',
+        total: 'Total ${total} página',
+        jumpTo: 'Pule para',
         page: 'página',
-        pageSize: 'artigo /página',
-        total: 'Total',
-        jumpTo: 'Pule para'
     },
     Modal: {
         confirm: 'OK',

packages/semi-ui/locale/source/ro.ts

@@ -7,11 +7,10 @@ export default {
     code: 'ro',
     dateFnsLocale: ro,
     Pagination: {
-        item: 'articol',
-        pageSize: 'articole/pagină',
-        page: ' pagini',
-        total: '',
+        pageSize: 'Articole pe pagină: ${pageSize}',
+        total: 'Total pagini: ${total}',
         jumpTo: 'Treci la',
+        page: 'pagini',
     },
     Modal: {
         confirm: 'Confirmă',
@@ -118,7 +117,7 @@ export default {
         AM: '${time} AM',
         PM: '${time} PM',
         datestring: '',
-        remaining: '${remained} plus',
+        remaining: 'Cantitate ramasa: ${remained}',
     },
     Upload: {
         mainText: 'Dă clic pentru a descărca fișierul sau trage fișierul aici',
@@ -148,8 +147,8 @@ export default {
         clear: 'Șterge',
         selectAll: 'Selectează toate',
         clearSelectAll: 'Deselectează toate',
-        total: 'Total ${total} articole',
-        selected: '${total} articole selectate',
+        total: 'Total articole: ${total} ',
+        selected: 'articole selectate: ${total}',
     },
     Form: {
         optional: '(opțional)',

packages/semi-ui/locale/source/ru_RU.ts

@@ -5,11 +5,10 @@ const local: Locale = {
     code: 'ru-RU',
     dateFnsLocale: ru,
     Pagination: {
-        item: 'элемент',
-        pageSize: 'элементов / страницы',
-        page: ' страницы',
-        total: 'общее',
-        jumpTo: 'Прыгать в'
+        pageSize: 'Элементов на странице: ${pageSize}',
+        total: 'Всего страниц: ${total}',
+        jumpTo: 'Прыгать в',
+        page: ' страницы'
     },
     Modal: {
         confirm: 'подтвердить',
@@ -120,7 +119,7 @@ const local: Locale = {
         AM: '${time} утро',
         PM: '${time} после',
         datestring: '',
-        remaining: '${remained} еще',
+        remaining: 'ставшееся количество: ${remained} ',
     },
     Upload: {
         mainText: 'Нажмите, чтобы загрузить файл или перетащите файл сюда',
@@ -150,8 +149,8 @@ const local: Locale = {
         clear: 'Очистить',
         selectAll: 'Выбрать все',
         clearSelectAll: 'Снять выделение',
-        total: 'Всего ${total} элементов',
-        selected: 'Выбрано ${total} элементов',
+        total: 'Всего элементов: ${total} ',
+        selected: 'Выбрано элементов: ${total} ',
     },
     Form: {
         optional: '(по желанию)',

packages/semi-ui/locale/source/sv_SE.ts

@@ -0,0 +1,175 @@
+import { sv } from 'date-fns/locale';
+import { Locale } from '../interface';
+
+/**
+ * [i18n-Swedish (sv_SE)]
+ * 瑞典语
+ */
+
+const local: Locale = {
+    code: 'sv_SE',
+    dateFnsLocale: sv, 
+    Pagination: {
+        pageSize: '${pageSize} artiklar/sida',
+        total: 'Totalt ${total} sidor',
+        jumpTo: 'Gå till',
+        page: 'sida',
+    },
+    Modal: {
+        confirm: 'Bekräfta',
+        cancel: 'Avbryt',
+    },
+    TimePicker: {
+        placeholder: {
+            time: 'Välj tid',
+            timeRange: 'Välj ett tidsintervall',
+        },
+        begin: 'Starttid',
+        end: 'Sluttid',
+        hour: '',
+        minute: '',
+        second: '',
+        AM: '',
+        PM: '',
+    },
+    DatePicker: {
+        placeholder: {
+            date: 'Välj datum',
+            dateTime: 'Välj datum och tid',
+            dateRange: ['Startdatum', 'Slutdatum'],
+            dateTimeRange: ['Startdatum', 'Slutdatum'],
+        },
+        footer: {
+            confirm: 'Bekräfta',
+            cancel: 'Avbryt',
+        },
+        selectDate: 'Välj datum',
+        selectTime: 'Välj tid',
+        year: '',
+        month: '',
+        day: '',
+        monthText: '${month} ${year}',
+        months: {
+            1: 'Jan',
+            2: 'Feb',
+            3: 'Mar',
+            4: 'Apr',
+            5: 'Maj',
+            6: 'Jun',
+            7: 'Jul',
+            8: 'Aug',
+            9: 'Sep',
+            10: 'Okt',
+            11: 'Nov',
+            12: 'Dec',
+        },
+        fullMonths: {
+            1: 'Januari',
+            2: 'Februari',
+            3: 'Mars',
+            4: 'April',
+            5: 'Maj',
+            6: 'Juni',
+            7: 'Juli',
+            8: 'Augusti',
+            9: 'September',
+            10: 'Oktober',
+            11: 'November',
+            12: 'December',
+        },
+        weeks: {
+            Mon: 'Mån',
+            Tue: 'Tis',
+            Wed: 'Ons',
+            Thu: 'Tor',
+            Fri: 'Fre',
+            Sat: 'Lör',
+            Sun: 'Sön',
+        },
+        localeFormatToken: {
+            FORMAT_SWITCH_DATE: 'yyyy-MM-dd',
+        },
+    },
+    Navigation: {
+        collapseText: 'Dölj sidofält',
+        expandText: 'Visa sidofält',
+    },
+    Popconfirm: {
+        confirm: 'Bekräfta',
+        cancel: 'Avbryt',
+    },
+    Table: {
+        emptyText: 'Inga resultat hittades',
+        pageText: 'Visar ${currentStart} till ${currentEnd} av ${total}',
+    },
+    Select: {
+        emptyText: 'Inga resultat hittades',
+        createText: 'Skapa',
+    },
+    Cascader: {
+        emptyText: 'Inga resultat hittades',
+    },
+    Tree: {
+        emptyText: 'Inga resultat hittades',
+        searchPlaceholder: 'Sök',
+    },
+    List: {
+        emptyText: 'Inga resultat hittades',
+    },
+    Calendar: {
+        allDay: 'Hela dagen',
+        AM: '${time}',
+        PM: '${time}',
+        datestring: '',
+        remaining: '${remained} till',
+    },
+    Upload: {
+        mainText: 'Klicka för att välja en fil eller dra den hit för att ladda upp',
+        illegalTips: 'Den här filtypen stöds inte',
+        legalTips: 'Släpp för att börja ladda upp',
+        retry: 'Försök igen',
+        replace: 'Byt ut fil',
+        clear: 'Rensa',
+        selectedFiles: 'Valda filer',
+        illegalSize: 'Ogiltig filstorlek',
+        fail: 'Det gick inte att ladda upp',
+    },
+    TreeSelect: {
+        searchPlaceholder: 'Sök',
+    },
+    Typography: {
+        copy: 'Kopiera',
+        copied: 'Kopierad',
+        expand: 'Visa mer',
+        collapse: 'Dölj',
+    },
+    Transfer: {
+        emptyLeft: 'Inga data',
+        emptySearch: 'Inga sökresultat',
+        emptyRight: 'Valda objekt kommer att visas här. Välj ett objekt till vänster',
+        placeholder: 'Sök',
+        clear: 'Rensa',
+        selectAll: 'Markera alla',
+        clearSelectAll: 'Avmarkera alla',
+        total: '${total} artiklar totalt',
+        selected: 'Valde ${total} objekt',
+    },
+    Form: {
+        optional: '(Frivilligt)',
+    },
+    Image: {
+        preview: 'Förhandsgranskning',
+        loading: 'Läser in',
+        loadError: 'Det gick inte att läsa in',
+        prevTip: 'Föregående',
+        nextTip: 'Nästa',
+        zoomInTip: 'Zooma in',
+        zoomOutTip: 'Zooma ut',
+        rotateTip: 'Rotera',
+        downloadTip: 'Ladda ned',
+        adaptiveTip: 'Adaptiv visning',
+        originTip: 'Standardvisning',
+    },
+};
+
+export default local;

packages/semi-ui/locale/source/th_TH.ts

@@ -5,11 +5,10 @@ const local: Locale = {
     code: 'th-TH',
     dateFnsLocale: th,
     Pagination: {
-        item: 'บทความ',
+        pageSize: '${pageSize} บทความ / หน้า',
+        total: 'หน้าทั้งหมด ${total}',
+        jumpTo: 'ข้ามไปที่',
         page: 'หน้า',
-        pageSize: 'บทความ / หน้า',
-        total: 'ธรรมดา',
-        jumpTo: 'ข้ามไปที่'
     },
     Modal: {
         confirm: 'ตกลง',

packages/semi-ui/locale/source/tr_TR.ts

@@ -5,10 +5,9 @@ const local: Locale = {
     code: 'tr-TR',
     dateFnsLocale: tr,
     Pagination: {
-        item: 'Makale',
         page: 'Sayfa',
-        pageSize: 'Makale / sayfa',
-        total: 'Toplam',
+        pageSize: '${pageSize} Makale / sayfa',
+        total: 'Toplam ${total} Sayfa',
         jumpTo: 'Atlamak'
     },
     Modal: {

packages/semi-ui/locale/source/vi_VN.ts

@@ -5,11 +5,10 @@ const local: Locale = {
     code: 'vi-VN',
     dateFnsLocale: vi,
     Pagination: {
-        item: 'Con số',
-        pageSize: ' Số / trang',
+        pageSize: '${pageSize} Số / trang',
+        total: 'Tổng cộng ${total} Số trang',
+        jumpTo: 'Chuyển đến',
         page: ' Số trang',
-        total: 'Tổng cộng',
-        jumpTo: 'Chuyển đến'
     },
     Modal: {
         confirm: 'Xác nhận',

packages/semi-ui/locale/source/zh_CN.ts

@@ -5,11 +5,10 @@ const local: Locale = {
     code: 'zh-CN',
     dateFnsLocale: zhCN, // locale code to dateFns locale
     Pagination: {
-        item: '条',
+        pageSize: '${pageSize} 条/页',
+        total: '共 ${total} 页',
+        jumpTo: '跳至',
         page: '页',
-        pageSize: '条/页',
-        total: '共',
-        jumpTo: '跳至'
     },
     Modal: {
         confirm: '确定',

packages/semi-ui/locale/source/zh_TW.ts

@@ -5,11 +5,10 @@ const local: Locale = {
     code: 'zh-TW',
     dateFnsLocale: zhTW, // locale code to dateFns locale
     Pagination: {
-        item: '條',
+        pageSize: '${pageSize} 條/頁',
+        total: '共 ${total} 頁',
+        jumpTo: '跳至',
         page: '頁',
-        pageSize: '條/頁',
-        total: '共',
-        jumpTo: '跳至'
     },
     Modal: {
         confirm: '確定',

packages/semi-ui/pagination/index.tsx

@@ -261,13 +261,15 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
         if (!showSizeChanger) {
             return null;
         }
-        const pageSizeText = locale.pageSize;
+
         const newPageSizeOpts = this.foundation.pageSizeInOpts();
+
+        const pageSizeToken = locale.pageSize;
+        // Display pageSize in a specific language format order
         const options = newPageSizeOpts.map((size: number) => (
             <Option value={size} key={size}>
                 <span>
-                    {`${size} `}
-                    {pageSizeText}
+                    {pageSizeToken.replace('${pageSize}', size.toString())}
                 </span>
             </Option>
         ));
@@ -277,7 +279,7 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
                     aria-label="Page size selector"
                     onChange={newPageSize => this.foundation.changePageSize(newPageSize)}
                     value={pageSize}
-                    key={pageSizeText}
+                    key={pageSize}
                     position={popoverPosition || 'bottomRight'}
                     clickToHide
                     dropdownClassName={`${prefixCls}-select-dropdown`}
@@ -443,13 +445,15 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
         if (totalPageNum < 2 && hideOnSinglePage && !showSizeChanger) {
             return null;
         }
+
+        const totalNum = Math.ceil(total / pageSize);
+        const totalToken = locale.total.replace('${total}', totalNum.toString());
+
         return (
             <ul className={paginationCls} style={style}>
                 {showTotal ? (
                     <span className={showTotalCls}>
-                        {locale.total}
-                        {` ${Math.ceil(total / pageSize)} `}
-                        {locale.page}
+                        {totalToken}
                     </span>
                 ) : null}
                 {this.renderPrevBtn()}

src/templates/scope.js

@@ -26,6 +26,9 @@ import th_TH from '@douyinfe/semi-ui/locale/source/th_TH';
 import tr_TR from '@douyinfe/semi-ui/locale/source/tr_TR';
 import pt_BR from '@douyinfe/semi-ui/locale/source/pt_BR';
 import zh_TW from '@douyinfe/semi-ui/locale/source/zh_TW';
+import sv_SE from '@douyinfe/semi-ui/locale/source/sv_SE';
+import pl_PL from '@douyinfe/semi-ui/locale/source/pl_PL';
+import nl_NL from '@douyinfe/semi-ui/locale/source/nl_NL';
 import es from '@douyinfe/semi-ui/locale/source/es';
 import de from '@douyinfe/semi-ui/locale/source/de';
 import it from '@douyinfe/semi-ui/locale/source/it';
@@ -122,4 +125,4 @@ export {
 
 export { debounce, throttle, range, get, filter, map, some };
 
-export { zh_CN, en_GB, en_US, ko_KR, ja_JP, ar, vi_VN, ru_RU, id_ID, ms_MY, th_TH, tr_TR, pt_BR, zh_TW, es, de, it, fr, ro };
+export { zh_CN, en_GB, en_US, ko_KR, ja_JP, ar, vi_VN, ru_RU, id_ID, ms_MY, th_TH, tr_TR, pt_BR, zh_TW, nl_NL, pl_PL, sv_SE, es, de, it, fr, ro };