@wangxinowo/vue-datepicker-next 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wangxinowo/vue-datepicker-next",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A powerful Vue 2.x DatePicker component based on Ant Design Vue",
   "main": "dist/vue-datepicker-next.min.js",
   "module": "dist/vue-datepicker-next.min.js",

package/src/components/calendar/locale/zh_CN.js

@@ -0,0 +1,2 @@
+import zh_CN from '../../date-picker/locale/zh_CN';
+export default zh_CN;

package/src/components/date-picker/style/MonthPanel.less

@@ -84,3 +84,18 @@
     cursor: pointer;
   }
 }
+
+// 范围选择的起始/结束单元格样式
+.@{calendar-prefix-cls}-month-panel-selected-start-cell,
+.@{calendar-prefix-cls}-month-panel-selected-end-cell {
+  .@{calendar-prefix-cls}-month-panel-month {
+    color: @text-color-inverse;
+    background: @primary-color;
+    border-radius: @border-radius-sm;
+
+    &:hover {
+      color: @text-color-inverse;
+      background: @primary-5;
+    }
+  }
+}

package/src/components/date-picker/style/RangePicker.less

@@ -1,6 +1,7 @@
 @input-box-height: 34px;
 
 // Range picker input wrapper with Active Bar
+// 统一样式：使用与基础 DatePicker 相同的 input 变量
 .@{calendar-prefix-cls}-range-picker-input-wrapper {
   position: relative;
   display: inline-flex;
@@ -8,8 +9,15 @@
   width: 100%;
   min-width: 280px;
   height: @input-height-base;
-  padding: 0 @control-padding-horizontal;
+  // 使用与 .input() mixin 相同的 padding
+  padding: @input-padding-vertical-base @input-padding-horizontal-base;
+  // 为图标和清除按钮预留空间
+  padding-right: @input-padding-horizontal-base + 30px;
+  color: @input-color;
+  font-size: @font-size-base;
+  line-height: @line-height-base;
   background-color: @input-bg;
+  background-image: none;
   border: @border-width-base @border-style-base @input-border-color;
   border-radius: @border-radius-base;
   transition: all 0.3s;
@@ -31,11 +39,13 @@
     background-color: transparent;
     border: none;
     box-shadow: none;
+    padding-right: @input-padding-horizontal-base;
   }
 
   // 禁用状态
   &[disabled],
   .@{calendar-prefix-cls}-picker-disabled & {
+    color: @disabled-color;
     background-color: @input-disabled-bg;
     border-color: @input-border-color;
     cursor: not-allowed;
@@ -86,11 +96,57 @@
     border-color: @success-color;
     box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@success-color, 20%);
   }
+
+  // RangePicker 内的图标样式（与基础 DatePicker 统一）
+  .@{calendar-prefix-cls}-picker-icon {
+    position: absolute;
+    top: 50%;
+    right: @input-padding-horizontal-base;
+    z-index: 1;
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    margin-top: -7px;
+    color: @disabled-color;
+    font-size: @font-size-base;
+    line-height: 1;
+    transition: all 0.3s;
+    user-select: none;
+  }
+
+  // RangePicker 内的清除按钮样式（与基础 DatePicker 统一）
+  .@{calendar-prefix-cls}-picker-clear {
+    position: absolute;
+    top: 50%;
+    right: @input-padding-horizontal-base;
+    z-index: 2;
+    width: 14px;
+    height: 14px;
+    margin-top: -7px;
+    color: @disabled-color;
+    font-size: @font-size-base;
+    background: @input-bg;
+    cursor: pointer;
+    opacity: 0;
+    pointer-events: none;
+    transition: all 0.3s;
+
+    &:hover {
+      color: @text-color-secondary;
+    }
+  }
+
+  // hover 时显示清除按钮
+  &:hover .@{calendar-prefix-cls}-picker-clear {
+    opacity: 1;
+    pointer-events: auto;
+  }
 }
 
 .@{calendar-prefix-cls}-range-picker-input {
-  width: 44%;
-  height: 99%;
+  flex: 1;
+  min-width: 0;
+  height: 100%;
   text-align: center;
   background-color: transparent;
   border: 0;
@@ -128,9 +184,10 @@
 }
 
 .@{calendar-prefix-cls}-range-picker-separator {
-  display: inline-block;
-  min-width: 10px;
-  height: 100%;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 8px;
   color: @text-color-secondary;
   white-space: nowrap;
   text-align: center;
@@ -274,6 +331,49 @@
     }
   }
 
+  // 年份面板和月份面板的范围选中背景样式
+  .@{calendar-prefix-cls}-year-panel-cell.@{calendar-prefix-cls}-in-range-cell,
+  .@{calendar-prefix-cls}-month-panel-cell.@{calendar-prefix-cls}-in-range-cell {
+    position: relative;
+    border-radius: 0;
+
+    > a {
+      position: relative;
+      z-index: 1;
+    }
+
+    &::before {
+      position: absolute;
+      top: 4px;
+      right: 0;
+      bottom: 4px;
+      left: 0;
+      display: block;
+      background: @item-active-bg;
+      border: 0;
+      border-radius: 0;
+      content: '';
+    }
+  }
+
+  // 年份/月份范围选择的起始单元格圆角
+  .@{calendar-prefix-cls}-year-panel-selected-start-cell.@{calendar-prefix-cls}-in-range-cell,
+  .@{calendar-prefix-cls}-month-panel-selected-start-cell.@{calendar-prefix-cls}-in-range-cell {
+    &::before {
+      border-top-left-radius: @border-radius-sm;
+      border-bottom-left-radius: @border-radius-sm;
+    }
+  }
+
+  // 年份/月份范围选择的结束单元格圆角
+  .@{calendar-prefix-cls}-year-panel-selected-end-cell.@{calendar-prefix-cls}-in-range-cell,
+  .@{calendar-prefix-cls}-month-panel-selected-end-cell.@{calendar-prefix-cls}-in-range-cell {
+    &::before {
+      border-top-right-radius: @border-radius-sm;
+      border-bottom-right-radius: @border-radius-sm;
+    }
+  }
+
   // 悬停高亮效果 - 范围起始单元格
   .@{calendar-prefix-cls}-selected-start-date,
   .@{calendar-prefix-cls}-selected-end-date {

package/src/components/date-picker/style/YearPanel.less

@@ -91,3 +91,18 @@
     user-select: none;
   }
 }
+
+// 范围选择的起始/结束单元格样式
+.@{calendar-prefix-cls}-year-panel-selected-start-cell,
+.@{calendar-prefix-cls}-year-panel-selected-end-cell {
+  .@{calendar-prefix-cls}-year-panel-year {
+    color: @text-color-inverse;
+    background: @primary-color;
+    border-radius: @border-radius-sm;
+
+    &:hover {
+      color: @text-color-inverse;
+      background: @primary-5;
+    }
+  }
+}

package/src/components/date-picker/wrapPicker.js

@@ -2,7 +2,7 @@ import TimePickerPanel from '../vc-time-picker/Panel';
 import classNames from 'classnames';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import { generateShowHourMinuteSecond } from '../time-picker';
-import enUS from './locale/en_US';
+import zhCN from './locale/zh_CN';
 import { getOptionProps, initDefaultProps, getListeners } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
 import { checkValidate, stringToMoment, momentToString } from '../_util/moment-util';
@@ -77,7 +77,7 @@ export default function wrapPicker(Picker, props, pickerType) {
     methods: {
       getDefaultLocale() {
         const result = {
-          ...enUS,
+          ...zhCN,
           ...this.locale,
         };
         result.lang = {

package/src/components/locale/default.js

@@ -1,62 +1,63 @@
-import Pagination from '../vc-pagination/locale/en_US';
-import DatePicker from '../date-picker/locale/en_US';
-import TimePicker from '../time-picker/locale/en_US';
-import Calendar from '../calendar/locale/en_US';
+import Pagination from '../vc-pagination/locale/zh_CN';
+import DatePicker from '../date-picker/locale/zh_CN';
+import TimePicker from '../time-picker/locale/zh_CN';
+import Calendar from '../calendar/locale/zh_CN';
 
 export default {
-  locale: 'en',
+  locale: 'zh-cn',
   Pagination,
   DatePicker,
   TimePicker,
   Calendar,
+  // 所有组件的本地化配置
   global: {
-    placeholder: 'Please select',
+    placeholder: '请选择',
   },
   Table: {
-    filterTitle: 'Filter menu',
-    filterConfirm: 'OK',
-    filterReset: 'Reset',
-    selectAll: 'Select current page',
-    selectInvert: 'Invert current page',
-    sortTitle: 'Sort',
-    expand: 'Expand row',
-    collapse: 'Collapse row',
+    filterTitle: '筛选',
+    filterConfirm: '确定',
+    filterReset: '重置',
+    selectAll: '全选当页',
+    selectInvert: '反选当页',
+    sortTitle: '排序',
+    expand: '展开行',
+    collapse: '关闭行',
   },
   Modal: {
-    okText: 'OK',
-    cancelText: 'Cancel',
-    justOkText: 'OK',
+    okText: '确定',
+    cancelText: '取消',
+    justOkText: '知道了',
   },
   Popconfirm: {
-    okText: 'OK',
-    cancelText: 'Cancel',
+    cancelText: '取消',
+    okText: '确定',
   },
   Transfer: {
     titles: ['', ''],
-    searchPlaceholder: 'Search here',
-    itemUnit: 'item',
-    itemsUnit: 'items',
+    searchPlaceholder: '请输入搜索内容',
+    itemUnit: '项',
+    itemsUnit: '项',
   },
   Upload: {
-    uploading: 'Uploading...',
-    removeFile: 'Remove file',
-    uploadError: 'Upload error',
-    previewFile: 'Preview file',
-    downloadFile: 'Download file',
+    uploading: '文件上传中',
+    removeFile: '删除文件',
+    uploadError: '上传错误',
+    previewFile: '预览文件',
+    downloadFile: '下载文件',
   },
   Empty: {
-    description: 'No Data',
+    description: '暂无数据',
   },
   Icon: {
-    icon: 'icon',
+    icon: '图标',
   },
   Text: {
-    edit: 'Edit',
-    copy: 'Copy',
-    copied: 'Copied',
-    expand: 'Expand',
+    edit: '编辑',
+    copy: '复制',
+    copied: '复制成功',
+    expand: '展开',
   },
   PageHeader: {
-    back: 'Back',
+    back: '返回',
   },
 };

package/src/components/time-picker/index.jsx

@@ -5,7 +5,7 @@ import BaseMixin from '../_util/BaseMixin';
 import PropTypes from '../_util/vue-types';
 import warning from '../_util/warning';
 import Icon from '../icon';
-import enUS from './locale/en_US';
+import zhCN from './locale/zh_CN';
 import {
   initDefaultProps,
   hasProp,
@@ -139,7 +139,7 @@ const TimePicker = {
     },
     getDefaultLocale() {
       const defaultLocale = {
-        ...enUS,
+        ...zhCN,
         ...this.$props.locale,
       };
       return defaultLocale;

package/src/components/vc-calendar/src/Calendar.jsx

@@ -10,7 +10,7 @@ import CalendarFooter from './calendar/CalendarFooter';
 import CalendarMixin, { getNowByCurrentStateValue } from './mixin/CalendarMixin';
 import CommonMixin from './mixin/CommonMixin';
 import DateInput from './date/DateInput';
-import enUs from './locale/en_US';
+import zhCn from './locale/zh_CN';
 import { getTimeConfig, getTodayTime, syncTime } from './util';
 import { goStartMonth, goEndMonth, goTime } from './util/toTime';
 
@@ -24,7 +24,7 @@ const getMomentObjectIfValid = date => {
 const Calendar = {
   name: 'Calendar',
   props: {
-    locale: PropTypes.object.def(enUs),
+    locale: PropTypes.object.def(zhCn),
     format: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.arrayOf(PropTypes.string),

package/src/components/vc-calendar/src/FullCalendar.jsx

@@ -7,11 +7,11 @@ import MonthTable from './month/MonthTable';
 import CalendarMixin, { getNowByCurrentStateValue } from './mixin/CalendarMixin';
 import CommonMixin from './mixin/CommonMixin';
 import CalendarHeader from './full-calendar/CalendarHeader';
-import enUs from './locale/en_US';
+import zhCn from './locale/zh_CN';
 const FullCalendar = {
   name: 'FullCalendar',
   props: {
-    locale: PropTypes.object.def(enUs),
+    locale: PropTypes.object.def(zhCn),
     format: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.func]),
     visible: PropTypes.bool.def(true),
     prefixCls: PropTypes.string.def('rc-calendar'),

package/src/components/vc-calendar/src/MonthCalendar.jsx

@@ -6,11 +6,11 @@ import CalendarHeader from './calendar/CalendarHeader';
 import CalendarFooter from './calendar/CalendarFooter';
 import CalendarMixin from './mixin/CalendarMixin';
 import CommonMixin from './mixin/CommonMixin';
-import enUs from './locale/en_US';
+import zhCn from './locale/zh_CN';
 const MonthCalendar = {
   name: 'MonthCalendar',
   props: {
-    locale: PropTypes.object.def(enUs),
+    locale: PropTypes.object.def(zhCn),
     format: PropTypes.string,
     visible: PropTypes.bool.def(true),
     prefixCls: PropTypes.string.def('rc-calendar'),

package/src/components/vc-calendar/src/RangeCalendar.jsx

@@ -14,7 +14,7 @@ import TodayButton from './calendar/TodayButton';
 import OkButton from './calendar/OkButton';
 import TimePickerButton from './calendar/TimePickerButton';
 import CommonMixin from './mixin/CommonMixin';
-import enUs from './locale/en_US';
+import zhCn from './locale/zh_CN';
 import { syncTime, getTodayTime, isAllowedDate } from './util/';
 import { goTime, goStartMonth, goEndMonth, includesTime } from './util/toTime';
 
@@ -87,7 +87,7 @@ function onInputSelect(direction, value, cause) {
 
 const RangeCalendar = {
   props: {
-    locale: PropTypes.object.def(enUs),
+    locale: PropTypes.object.def(zhCn),
     visible: PropTypes.bool.def(true),
     prefixCls: PropTypes.string.def('rc-calendar'),
     dateInputPlaceholder: PropTypes.any,

package/src/components/vc-calendar/src/calendar/CalendarHeader.jsx

@@ -35,10 +35,13 @@ const CalendarHeader = {
     enableNext: PropTypes.any.def(1),
     disabledMonth: PropTypes.func,
     mode: PropTypes.any,
-    selectedValue: PropTypes.object,
+    // 支持数组形式，用于范围选择器
+    selectedValue: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
     monthCellRender: PropTypes.func,
     monthCellContentRender: PropTypes.func,
     renderFooter: PropTypes.func,
+    // 用于范围选择器，标识是左面板还是右面板
+    direction: PropTypes.string,
   },
   data() {
     this.nextMonth = goMonth.bind(this, 1);

package/src/components/vc-calendar/src/month/MonthPanel.jsx

@@ -15,7 +15,8 @@ const MonthPanel = {
   props: {
     value: PropTypes.any,
     defaultValue: PropTypes.any,
-    selectedValue: PropTypes.any,
+    // 支持单个值或数组（范围选择）
+    selectedValue: PropTypes.oneOfType([PropTypes.any, PropTypes.array]),
     cellRender: PropTypes.any,
     contentRender: PropTypes.any,
     locale: PropTypes.any,

package/src/components/vc-calendar/src/month/MonthTable.jsx

@@ -7,6 +7,35 @@ const COL = 3;
 
 function noop() {}
 
+// 判断是否为范围选择模式
+function isRangeMode(selectedValue) {
+  return Array.isArray(selectedValue);
+}
+
+// 获取范围开始的年月
+function getRangeStart(selectedValue) {
+  if (!isRangeMode(selectedValue) || !selectedValue[0]) return null;
+  return {
+    year: selectedValue[0].year(),
+    month: selectedValue[0].month(),
+  };
+}
+
+// 获取范围结束的年月
+function getRangeEnd(selectedValue) {
+  if (!isRangeMode(selectedValue) || !selectedValue[1]) return null;
+  return {
+    year: selectedValue[1].year(),
+    month: selectedValue[1].month(),
+  };
+}
+
+// 比较两个年月
+function compareYearMonth(year1, month1, year2, month2) {
+  if (year1 !== year2) return year1 - year2;
+  return month1 - month2;
+}
+
 const MonthTable = {
   name: 'MonthTable',
   mixins: [BaseMixin],
@@ -14,7 +43,8 @@ const MonthTable = {
     cellRender: PropTypes.func,
     prefixCls: PropTypes.string,
     value: PropTypes.object,
-    selectedValue: PropTypes.object,
+    // 支持单个值或数组（范围选择）
+    selectedValue: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
     locale: PropTypes.any,
     contentRender: PropTypes.any,
     disabledDate: PropTypes.func,
@@ -73,10 +103,19 @@ const MonthTable = {
     const months = this.months();
     const { prefixCls, locale, contentRender, cellRender, disabledDate } = props;
 
-    // 只有当 selectedValue 存在且与当前面板年份相同时，才显示选中状态
-    const hasSelectedValue = selectedValue && selectedValue.year() === value.year();
+    // 判断是范围模式还是单值模式
+    const rangeMode = isRangeMode(selectedValue);
+    const rangeStart = getRangeStart(selectedValue);
+    const rangeEnd = getRangeEnd(selectedValue);
+
+    // 单值模式：只有当 selectedValue 存在且与当前面板年份相同时，才显示选中状态
+    const hasSelectedValue = !rangeMode && selectedValue && selectedValue.year() === value.year();
     const selectedMonth = hasSelectedValue ? selectedValue.month() : -1;
 
+    // 获取根前缀类（用于 in-range-cell 类名）
+    const rootPrefixCls = prefixCls.replace('-month-panel', '');
+    const currentYear = value.year();
+
     const monthsEls = months.map((month, index) => {
       const tds = month.map(monthData => {
         let disabled = false;
@@ -85,10 +124,47 @@ const MonthTable = {
           testValue.month(monthData.value);
           disabled = disabledDate(testValue);
         }
+
+        // 判断当前月份是否在范围内
+        let isRangeStart = false;
+        let isRangeEnd = false;
+        let isInRange = false;
+
+        if (rangeMode && rangeStart && rangeEnd) {
+          // 当前月份的年月
+          const currentYearMonth = { year: currentYear, month: monthData.value };
+
+          // 判断是否为范围开始
+          isRangeStart = rangeStart.year === currentYear && rangeStart.month === monthData.value;
+
+          // 判断是否为范围结束
+          isRangeEnd = rangeEnd.year === currentYear && rangeEnd.month === monthData.value;
+
+          // 判断是否在范围中间
+          const compareWithStart = compareYearMonth(
+            currentYear,
+            monthData.value,
+            rangeStart.year,
+            rangeStart.month
+          );
+          const compareWithEnd = compareYearMonth(
+            currentYear,
+            monthData.value,
+            rangeEnd.year,
+            rangeEnd.month
+          );
+          isInRange = compareWithStart > 0 && compareWithEnd < 0;
+        }
+
         const classNameMap = {
           [`${prefixCls}-cell`]: 1,
           [`${prefixCls}-cell-disabled`]: disabled,
+          // 单值模式的选中状态
           [`${prefixCls}-selected-cell`]: monthData.value === selectedMonth,
+          // 范围模式的选中状态
+          [`${prefixCls}-selected-start-cell`]: isRangeStart,
+          [`${prefixCls}-selected-end-cell`]: isRangeEnd,
+          [`${rootPrefixCls}-in-range-cell`]: isInRange || isRangeStart || isRangeEnd,
           [`${prefixCls}-current-cell`]:
             today.year() === value.year() && monthData.value === today.month(),
         };

package/src/components/vc-calendar/src/range-calendar/CalendarPart.jsx

@@ -128,7 +128,10 @@ const CalendarPart = {
         enableNext,
         enablePrev,
         disabledMonth,
-        selectedValue: selectedValue[index],
+        // 传递完整的 selectedValue 数组，让 YearPanel/MonthPanel 支持范围选中效果
+        selectedValue: selectedValue,
+        // 保留 direction 信息，用于判断是左面板还是右面板
+        direction,
       },
       on: {
         valueChange,

package/src/components/vc-calendar/src/year/YearPanel.jsx

@@ -22,13 +22,31 @@ function chooseYear(year) {
   this.__emit('select', value);
 }
 
+// 判断是否为范围选择模式
+function isRangeMode(selectedValue) {
+  return Array.isArray(selectedValue);
+}
+
+// 获取范围开始年份
+function getRangeStartYear(selectedValue) {
+  if (!isRangeMode(selectedValue)) return null;
+  return selectedValue[0] ? selectedValue[0].year() : null;
+}
+
+// 获取范围结束年份
+function getRangeEndYear(selectedValue) {
+  if (!isRangeMode(selectedValue)) return null;
+  return selectedValue[1] ? selectedValue[1].year() : null;
+}
+
 export default {
   mixins: [BaseMixin],
   props: {
     rootPrefixCls: PropTypes.string,
     value: PropTypes.object,
     defaultValue: PropTypes.object,
-    selectedValue: PropTypes.object,
+    // 支持单个值或数组（范围选择）
+    selectedValue: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
     locale: PropTypes.object,
     renderFooter: PropTypes.func,
     disabledDate: PropTypes.func,
@@ -76,8 +94,15 @@ export default {
     const decadePanelShow = getListeners(this).decadePanelShow || noop;
     const years = this.years();
     const currentYear = value.year();
-    // 只有当 selectedValue 存在时才显示选中状态
-    const selectedYear = selectedValue ? selectedValue.year() : null;
+
+    // 判断是范围模式还是单值模式
+    const rangeMode = isRangeMode(selectedValue);
+    const rangeStartYear = getRangeStartYear(selectedValue);
+    const rangeEndYear = getRangeEndYear(selectedValue);
+
+    // 单值模式：只有当 selectedValue 存在时才显示选中状态
+    const selectedYear = !rangeMode && selectedValue ? selectedValue.year() : null;
+
     const startYear = parseInt(currentYear / 10, 10) * 10;
     const endYear = startYear + 9;
     const prefixCls = `${this.rootPrefixCls}-year-panel`;
@@ -91,10 +116,29 @@ export default {
           testValue.year(yearData.year);
           disabled = disabledDate(testValue);
         }
+
+        // 判断年份是否在当前十年范围内（不是上一十年或下一十年的预览）
+        const isInCurrentDecade = yearData.year >= startYear && yearData.year <= endYear;
+
+        // 判断是否为范围起始/结束/中间，只在当前十年范围内应用
+        const isRangeStart = rangeMode && rangeStartYear !== null && yearData.year === rangeStartYear && isInCurrentDecade;
+        const isRangeEnd = rangeMode && rangeEndYear !== null && yearData.year === rangeEndYear && isInCurrentDecade;
+        const isInRange = rangeMode &&
+          rangeStartYear !== null &&
+          rangeEndYear !== null &&
+          yearData.year > rangeStartYear &&
+          yearData.year < rangeEndYear &&
+          isInCurrentDecade;
+
         const classNameMap = {
           [`${prefixCls}-cell`]: 1,
           [`${prefixCls}-cell-disabled`]: disabled,
+          // 单值模式的选中状态
           [`${prefixCls}-selected-cell`]: selectedYear !== null && yearData.year === selectedYear,
+          // 范围模式的选中状态
+          [`${prefixCls}-selected-start-cell`]: isRangeStart,
+          [`${prefixCls}-selected-end-cell`]: isRangeEnd,
+          [`${this.rootPrefixCls}-in-range-cell`]: isInRange || isRangeStart || isRangeEnd,
           [`${prefixCls}-last-decade-cell`]: yearData.year < startYear,
           [`${prefixCls}-next-decade-cell`]: yearData.year > endYear,
         };

package/src/components/vc-pagination/locale/zh_CN.js

@@ -0,0 +1,15 @@
+export default {
+  // Options.jsx
+  items_per_page: '条/页',
+  jump_to: '跳至',
+  jump_to_confirm: '确定',
+  page: '页',
+
+  // Pagination.jsx
+  prev_page: '上一页',
+  next_page: '下一页',
+  prev_5: '向前 5 页',
+  next_5: '向后 5 页',
+  prev_3: '向前 3 页',
+  next_3: '向后 3 页',
+};