统一日期时间选择器为中文
- 全局初始化 dayjs zh-cn,修复日历周/月英文 - 新增 AdminDatePicker / AdminRangePicker 统一格式与占位文案 - 任务、审计、云触手、行业售后等筛选统一使用
This commit is contained in:
@@ -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-DD;showTime 时 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
|
||||||
@@ -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] = ['开始时间', '结束时间']
|
||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user