统一日期时间选择器为中文

- 全局初始化 dayjs zh-cn,修复日历周/月英文
- 新增 AdminDatePicker / AdminRangePicker 统一格式与占位文案
- 任务、审计、云触手、行业售后等筛选统一使用
This commit is contained in:
yml2213
2026-07-10 16:07:29 +08:00
parent d61a04befa
commit d52a16bf85
7 changed files with 94 additions and 15 deletions
@@ -0,0 +1,52 @@
import { DatePicker } from 'antd'
import type { DatePickerProps } from 'antd'
import type { RangePickerProps } from 'antd/es/date-picker'
import {
ADMIN_DATE_FORMAT,
ADMIN_DATE_RANGE_PLACEHOLDER,
ADMIN_DATE_TIME_FORMAT,
ADMIN_DATE_TIME_RANGE_PLACEHOLDER,
} from '@/lib/dayjs'
type AdminDatePickerProps = DatePickerProps
type AdminRangePickerProps = RangePickerProps
/**
* 后台统一日期选择:中文 locale(依赖全局 dayjs zh-cn + ConfigProvider zh_CN)。
*/
export function AdminDatePicker({
format,
placeholder = '请选择日期',
...rest
}: AdminDatePickerProps) {
const resolvedFormat =
format ?? (rest.showTime ? ADMIN_DATE_TIME_FORMAT : ADMIN_DATE_FORMAT)
return <DatePicker format={resolvedFormat} placeholder={placeholder} {...rest} />
}
/**
* 后台统一日期范围:默认 YYYY-MM-DDshowTime 时 YYYY-MM-DD HH:mm:ss。
*/
export function AdminRangePicker({
format,
placeholder,
...rest
}: AdminRangePickerProps) {
const withTime = Boolean(rest.showTime)
const resolvedFormat = format ?? (withTime ? ADMIN_DATE_TIME_FORMAT : ADMIN_DATE_FORMAT)
const resolvedPlaceholder =
placeholder ?? (withTime ? ADMIN_DATE_TIME_RANGE_PLACEHOLDER : ADMIN_DATE_RANGE_PLACEHOLDER)
return (
<DatePicker.RangePicker
format={resolvedFormat}
placeholder={resolvedPlaceholder}
{...rest}
/>
)
}
export default AdminDatePicker
+25
View File
@@ -0,0 +1,25 @@
/**
* 全局 dayjs 中文与插件初始化。
* Ant Design DatePicker 依赖 dayjs 渲染周/月文案,必须在应用入口先 import 本模块。
*/
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import customParseFormat from 'dayjs/plugin/customParseFormat'
import localeData from 'dayjs/plugin/localeData'
import weekday from 'dayjs/plugin/weekday'
dayjs.extend(customParseFormat)
dayjs.extend(localeData)
dayjs.extend(weekday)
dayjs.locale('zh-cn')
export default dayjs
export type { Dayjs } from 'dayjs'
/** 仅日期 */
export const ADMIN_DATE_FORMAT = 'YYYY-MM-DD'
/** 日期 + 时间 */
export const ADMIN_DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'
export const ADMIN_DATE_RANGE_PLACEHOLDER: [string, string] = ['开始日期', '结束日期']
export const ADMIN_DATE_TIME_RANGE_PLACEHOLDER: [string, string] = ['开始时间', '结束时间']
+3
View File
@@ -5,6 +5,9 @@ import zhCN from 'antd/locale/zh_CN'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import 'antd/dist/reset.css' import 'antd/dist/reset.css'
// 必须在渲染前初始化 dayjs 中文,否则 DatePicker 日历周/月仍为英文
import '@/lib/dayjs'
import App from './App' import App from './App'
import './styles/main.css' import './styles/main.css'
@@ -1,13 +1,14 @@
import { ReloadOutlined, SearchOutlined } from '@ant-design/icons' import { ReloadOutlined, SearchOutlined } from '@ant-design/icons'
import { Alert, Button, Card, DatePicker, Empty, Form, Input, Select, Space, Table, Typography } from 'antd' import { Alert, Button, Card, Empty, Form, Input, Select, Space, Table, Typography } from 'antd'
import type { TableColumnsType } from 'antd' import type { TableColumnsType } from 'antd'
import { useQuery } from '@tanstack/react-query' import { useQuery } from '@tanstack/react-query'
import dayjs from 'dayjs'
import { useMemo } from 'react' import { useMemo } from 'react'
import { useSearchParams } from 'react-router' import { useSearchParams } from 'react-router'
import { AdminRangePicker } from '@/components/admin/AdminDatePicker'
import PageHeader from '@/components/admin/PageHeader' import PageHeader from '@/components/admin/PageHeader'
import StatusTag from '@/components/admin/StatusTag' import StatusTag from '@/components/admin/StatusTag'
import dayjs from '@/lib/dayjs'
import { fetchAdminAuditLogs } from '@/services/admin' import { fetchAdminAuditLogs } from '@/services/admin'
import type { AdminAuditLogItem } from '@/types/admin' import type { AdminAuditLogItem } from '@/types/admin'
import { hasAdminRole } from '@/utils/admin-auth' import { hasAdminRole } from '@/utils/admin-auth'
@@ -169,7 +170,7 @@ export default function AdminAuditLogsPage() {
/> />
</Form.Item> </Form.Item>
<Form.Item name="dateRange"> <Form.Item name="dateRange">
<DatePicker.RangePicker /> <AdminRangePicker />
</Form.Item> </Form.Item>
<Form.Item> <Form.Item>
<Space> <Space>
@@ -8,7 +8,6 @@ import {
Alert, Alert,
Button, Button,
Card, Card,
DatePicker,
Image as AntdImage, Image as AntdImage,
Input, Input,
Modal, Modal,
@@ -19,11 +18,11 @@ import {
Typography, Typography,
} from 'antd' } from 'antd'
import type { TableColumnsType } from 'antd' import type { TableColumnsType } from 'antd'
import dayjs from 'dayjs'
import type { Dayjs } from 'dayjs'
import { useEffect, useMemo, useState } from 'react' import { useEffect, useMemo, useState } from 'react'
import { AdminRangePicker } from '@/components/admin/AdminDatePicker'
import PageHeader from '@/components/admin/PageHeader' import PageHeader from '@/components/admin/PageHeader'
import dayjs, { type Dayjs } from '@/lib/dayjs'
import { showError, showSuccess } from '@/lib/feedback' import { showError, showSuccess } from '@/lib/feedback'
import { import {
fetchAdminCloudtentaclesDeliveryRecords, fetchAdminCloudtentaclesDeliveryRecords,
@@ -323,10 +322,9 @@ export default function AdminCloudtentaclesRecordsPage() {
onChange={(event) => setPlatformOrderId(event.target.value)} onChange={(event) => setPlatformOrderId(event.target.value)}
onPressEnter={() => loadRecords(1)} onPressEnter={() => loadRecords(1)}
/> />
<DatePicker.RangePicker <AdminRangePicker
showTime showTime
value={dateRange} value={dateRange}
format="YYYY-MM-DD HH:mm:ss"
className="full-width" className="full-width"
onChange={(value) => setDateRange(value)} onChange={(value) => setDateRange(value)}
/> />
@@ -10,7 +10,6 @@ import {
Alert, Alert,
Button, Button,
Card, Card,
DatePicker,
Input, Input,
InputNumber, InputNumber,
Select, Select,
@@ -21,11 +20,11 @@ import {
Typography, Typography,
} from 'antd' } from 'antd'
import type { TableColumnsType, TabsProps } from 'antd' import type { TableColumnsType, TabsProps } from 'antd'
import dayjs from 'dayjs'
import type { Dayjs } from 'dayjs'
import { useEffect, useMemo, useState } from 'react' import { useEffect, useMemo, useState } from 'react'
import { AdminRangePicker } from '@/components/admin/AdminDatePicker'
import PageHeader from '@/components/admin/PageHeader' import PageHeader from '@/components/admin/PageHeader'
import dayjs, { type Dayjs } from '@/lib/dayjs'
import { showError, showSuccess } from '@/lib/feedback' import { showError, showSuccess } from '@/lib/feedback'
import { import {
approveAdminKuaishouIndustryRefund, approveAdminKuaishouIndustryRefund,
@@ -717,7 +716,7 @@ export default function AdminKuaishouIndustryPage() {
value={refundListForm.orderId} value={refundListForm.orderId}
onChange={(event) => updateRefundListForm({ orderId: event.target.value })} onChange={(event) => updateRefundListForm({ orderId: event.target.value })}
/> />
<DatePicker.RangePicker <AdminRangePicker
showTime showTime
value={refundDateRange} value={refundDateRange}
onChange={(value) => setRefundDateRange(value)} onChange={(value) => setRefundDateRange(value)}
@@ -5,15 +5,16 @@ import {
SwapOutlined, SwapOutlined,
UserSwitchOutlined, UserSwitchOutlined,
} from '@ant-design/icons' } from '@ant-design/icons'
import { Alert, App, Button, Card, DatePicker, Form, Input, Select, Space, Table, Tag, Typography } from 'antd' import { Alert, App, Button, Card, Form, Input, Select, Space, Table, Tag, Typography } from 'antd'
import type { TableColumnsType } from 'antd' import type { TableColumnsType } from 'antd'
import { useQuery } from '@tanstack/react-query' import { useQuery } from '@tanstack/react-query'
import dayjs from 'dayjs'
import { useMemo, useState } from 'react' import { useMemo, useState } from 'react'
import { useNavigate, useSearchParams } from 'react-router' import { useNavigate, useSearchParams } from 'react-router'
import { AdminRangePicker } from '@/components/admin/AdminDatePicker'
import PageHeader from '@/components/admin/PageHeader' import PageHeader from '@/components/admin/PageHeader'
import StatusTag from '@/components/admin/StatusTag' import StatusTag from '@/components/admin/StatusTag'
import dayjs from '@/lib/dayjs'
import { import {
closeAdminTask, closeAdminTask,
fetchAdminTasks, fetchAdminTasks,
@@ -369,7 +370,7 @@ export default function AdminTasksPage() {
<Input allowClear placeholder="商品名 / SKU" /> <Input allowClear placeholder="商品名 / SKU" />
</Form.Item> </Form.Item>
<Form.Item name="dateRange"> <Form.Item name="dateRange">
<DatePicker.RangePicker /> <AdminRangePicker />
</Form.Item> </Form.Item>
<Form.Item> <Form.Item>
<Space> <Space>