From d52a16bf85bbe0fb772d55f9159c70b81899fc36 Mon Sep 17 00:00:00 2001 From: yml2213 Date: Fri, 10 Jul 2026 16:07:29 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E6=97=A5=E6=9C=9F=E6=97=B6?= =?UTF-8?q?=E9=97=B4=E9=80=89=E6=8B=A9=E5=99=A8=E4=B8=BA=E4=B8=AD=E6=96=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 全局初始化 dayjs zh-cn，修复日历周/月英文 - 新增 AdminDatePicker / AdminRangePicker 统一格式与占位文案 - 任务、审计、云触手、行业售后等筛选统一使用 --- .../src/components/admin/AdminDatePicker.tsx | 52 +++++++++++++++++++ apps/frontend/src/lib/dayjs.ts | 25 +++++++++ apps/frontend/src/main.tsx | 3 ++ .../src/pages/admin/AdminAuditLogsPage.tsx | 7 +-- .../admin/AdminCloudtentaclesRecordsPage.tsx | 8 ++- .../pages/admin/AdminKuaishouIndustryPage.tsx | 7 ++- .../src/pages/admin/AdminTasksPage.tsx | 7 +-- 7 files changed, 94 insertions(+), 15 deletions(-) create mode 100644 apps/frontend/src/components/admin/AdminDatePicker.tsx create mode 100644 apps/frontend/src/lib/dayjs.ts diff --git a/apps/frontend/src/components/admin/AdminDatePicker.tsx b/apps/frontend/src/components/admin/AdminDatePicker.tsx new file mode 100644 index 00000000..1fe09d48 --- /dev/null +++ b/apps/frontend/src/components/admin/AdminDatePicker.tsx @@ -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 +} + +/** + * 后台统一日期范围：默认 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 ( + + ) +} + +export default AdminDatePicker diff --git a/apps/frontend/src/lib/dayjs.ts b/apps/frontend/src/lib/dayjs.ts new file mode 100644 index 00000000..7116cd32 --- /dev/null +++ b/apps/frontend/src/lib/dayjs.ts @@ -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] = ['开始时间', '结束时间'] diff --git a/apps/frontend/src/main.tsx b/apps/frontend/src/main.tsx index 9df4ac25..f1e03f33 100644 --- a/apps/frontend/src/main.tsx +++ b/apps/frontend/src/main.tsx @@ -5,6 +5,9 @@ import zhCN from 'antd/locale/zh_CN' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import 'antd/dist/reset.css' +// 必须在渲染前初始化 dayjs 中文，否则 DatePicker 日历周/月仍为英文 +import '@/lib/dayjs' + import App from './App' import './styles/main.css' diff --git a/apps/frontend/src/pages/admin/AdminAuditLogsPage.tsx b/apps/frontend/src/pages/admin/AdminAuditLogsPage.tsx index da095270..20a27432 100644 --- a/apps/frontend/src/pages/admin/AdminAuditLogsPage.tsx +++ b/apps/frontend/src/pages/admin/AdminAuditLogsPage.tsx @@ -1,13 +1,14 @@ 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 { useQuery } from '@tanstack/react-query' -import dayjs from 'dayjs' import { useMemo } from 'react' import { useSearchParams } from 'react-router' +import { AdminRangePicker } from '@/components/admin/AdminDatePicker' import PageHeader from '@/components/admin/PageHeader' import StatusTag from '@/components/admin/StatusTag' +import dayjs from '@/lib/dayjs' import { fetchAdminAuditLogs } from '@/services/admin' import type { AdminAuditLogItem } from '@/types/admin' import { hasAdminRole } from '@/utils/admin-auth' @@ -169,7 +170,7 @@ export default function AdminAuditLogsPage() { /> - + diff --git a/apps/frontend/src/pages/admin/AdminCloudtentaclesRecordsPage.tsx b/apps/frontend/src/pages/admin/AdminCloudtentaclesRecordsPage.tsx index 3215b21e..aafc630c 100644 --- a/apps/frontend/src/pages/admin/AdminCloudtentaclesRecordsPage.tsx +++ b/apps/frontend/src/pages/admin/AdminCloudtentaclesRecordsPage.tsx @@ -8,7 +8,6 @@ import { Alert, Button, Card, - DatePicker, Image as AntdImage, Input, Modal, @@ -19,11 +18,11 @@ import { Typography, } from 'antd' import type { TableColumnsType } from 'antd' -import dayjs from 'dayjs' -import type { Dayjs } from 'dayjs' import { useEffect, useMemo, useState } from 'react' +import { AdminRangePicker } from '@/components/admin/AdminDatePicker' import PageHeader from '@/components/admin/PageHeader' +import dayjs, { type Dayjs } from '@/lib/dayjs' import { showError, showSuccess } from '@/lib/feedback' import { fetchAdminCloudtentaclesDeliveryRecords, @@ -323,10 +322,9 @@ export default function AdminCloudtentaclesRecordsPage() { onChange={(event) => setPlatformOrderId(event.target.value)} onPressEnter={() => loadRecords(1)} /> - setDateRange(value)} /> diff --git a/apps/frontend/src/pages/admin/AdminKuaishouIndustryPage.tsx b/apps/frontend/src/pages/admin/AdminKuaishouIndustryPage.tsx index 5f5d04d7..191c2c1f 100644 --- a/apps/frontend/src/pages/admin/AdminKuaishouIndustryPage.tsx +++ b/apps/frontend/src/pages/admin/AdminKuaishouIndustryPage.tsx @@ -10,7 +10,6 @@ import { Alert, Button, Card, - DatePicker, Input, InputNumber, Select, @@ -21,11 +20,11 @@ import { Typography, } from 'antd' import type { TableColumnsType, TabsProps } from 'antd' -import dayjs from 'dayjs' -import type { Dayjs } from 'dayjs' import { useEffect, useMemo, useState } from 'react' +import { AdminRangePicker } from '@/components/admin/AdminDatePicker' import PageHeader from '@/components/admin/PageHeader' +import dayjs, { type Dayjs } from '@/lib/dayjs' import { showError, showSuccess } from '@/lib/feedback' import { approveAdminKuaishouIndustryRefund, @@ -717,7 +716,7 @@ export default function AdminKuaishouIndustryPage() { value={refundListForm.orderId} onChange={(event) => updateRefundListForm({ orderId: event.target.value })} /> - setRefundDateRange(value)} diff --git a/apps/frontend/src/pages/admin/AdminTasksPage.tsx b/apps/frontend/src/pages/admin/AdminTasksPage.tsx index 710c51a7..c02425af 100644 --- a/apps/frontend/src/pages/admin/AdminTasksPage.tsx +++ b/apps/frontend/src/pages/admin/AdminTasksPage.tsx @@ -5,15 +5,16 @@ import { SwapOutlined, UserSwitchOutlined, } 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 { useQuery } from '@tanstack/react-query' -import dayjs from 'dayjs' import { useMemo, useState } from 'react' import { useNavigate, useSearchParams } from 'react-router' +import { AdminRangePicker } from '@/components/admin/AdminDatePicker' import PageHeader from '@/components/admin/PageHeader' import StatusTag from '@/components/admin/StatusTag' +import dayjs from '@/lib/dayjs' import { closeAdminTask, fetchAdminTasks, @@ -369,7 +370,7 @@ export default function AdminTasksPage() { - +