style: use date picker for manufacture date

package.json

@@ -14,6 +14,7 @@
     "@ant-design/icons": "^6.1.0",
     "antd": "^6.3.1",
     "axios": "^1.13.6",
+    "dayjs": "^1.11.21",
     "qrcode": "^1.5.4",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       axios:
         specifier: ^1.13.6
         version: 1.13.6
+      dayjs:
+        specifier: ^1.11.21
+        version: 1.11.21
       qrcode:
         specifier: ^1.5.4
         version: 1.5.4
@@ -872,8 +875,8 @@ packages:
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
-  dayjs@1.11.19:
+  dayjs@1.11.21:
-    resolution: {integrity: sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==}
+    resolution: {integrity: sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==}
 
   debug@4.4.3:
     resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
@@ -1679,7 +1682,7 @@ snapshots:
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)
 
-  '@rc-component/picker@1.9.0(dayjs@1.11.19)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+  '@rc-component/picker@1.9.0(dayjs@1.11.21)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
     dependencies:
       '@rc-component/overflow': 1.0.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@rc-component/resize-observer': 1.1.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -1689,7 +1692,7 @@ snapshots:
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)
     optionalDependencies:
-      dayjs: 1.11.19
+      dayjs: 1.11.21
 
   '@rc-component/portal@2.2.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
     dependencies:
@@ -2022,7 +2025,7 @@ snapshots:
       '@rc-component/mutate-observer': 2.0.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@rc-component/notification': 1.2.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@rc-component/pagination': 1.2.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@rc-component/picker': 1.9.0(dayjs@1.11.19)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@rc-component/picker': 1.9.0(dayjs@1.11.21)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@rc-component/progress': 1.0.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@rc-component/qrcode': 1.1.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@rc-component/rate': 1.0.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -2043,7 +2046,7 @@ snapshots:
       '@rc-component/upload': 1.1.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@rc-component/util': 1.9.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       clsx: 2.1.1
-      dayjs: 1.11.19
+      dayjs: 1.11.21
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)
       scroll-into-view-if-needed: 3.1.0
@@ -2108,7 +2111,7 @@ snapshots:
 
   csstype@3.2.3: {}
 
-  dayjs@1.11.19: {}
+  dayjs@1.11.21: {}
 
   debug@4.4.3:
     dependencies:

src/pages/ProductTraces.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import {
   Button,
   Card,
+  DatePicker,
   Form,
   Image,
   Input,
@@ -23,11 +24,12 @@ import {
   UploadOutlined,
 } from '@ant-design/icons';
 import type { UploadFile } from 'antd';
+import dayjs, { type Dayjs } from 'dayjs';
 import { productTracesApi } from '@/services/api';
 import type { CreateProductTraceRequest, ProductTrace, UpdateProductTraceRequest } from '@/types';
 
 type ProductTraceFormValues = Omit<CreateProductTraceRequest, 'manufactureDate'> & {
-  manufactureDate: string;
+  manufactureDate: Dayjs;
 };
 
 function formatDate(value: string) {
@@ -35,15 +37,6 @@ function formatDate(value: string) {
   return new Date(value).toLocaleDateString('zh-CN');
 }
 
-function toDateInputValue(value: string) {
-  if (!value) return '';
-  return new Date(value).toISOString().slice(0, 10);
-}
-
-function dateInputToISOString(value: string) {
-  return new Date(`${value}T00:00:00+08:00`).toISOString();
-}
-
 function ProductTracesPage() {
   const [traces, setTraces] = useState<ProductTrace[]>([]);
   const [loading, setLoading] = useState(true);
@@ -110,7 +103,7 @@ function ProductTracesPage() {
       companyPhone: trace.companyPhone,
       deviceInfo: trace.deviceInfo,
       warrantyPeriod: trace.warrantyPeriod,
-      manufactureDate: toDateInputValue(trace.manufactureDate),
+      manufactureDate: dayjs(trace.manufactureDate),
       serialNumber: trace.serialNumber,
       officialWebsite: trace.officialWebsite,
     });
@@ -133,7 +126,7 @@ function ProductTracesPage() {
           companyPhone: values.companyPhone,
           deviceInfo: values.deviceInfo,
           warrantyPeriod: values.warrantyPeriod,
-          manufactureDate: dateInputToISOString(values.manufactureDate),
+          manufactureDate: values.manufactureDate.toDate().toISOString(),
           officialWebsite: values.officialWebsite || '',
         };
         saved = await productTracesApi.update(editingTrace.serialNumber, payload);
@@ -142,7 +135,7 @@ function ProductTracesPage() {
           ...values,
           officialWebsite: values.officialWebsite || '',
           serialNumber: values.serialNumber.trim(),
-          manufactureDate: dateInputToISOString(values.manufactureDate),
+          manufactureDate: values.manufactureDate.toDate().toISOString(),
         };
         saved = await productTracesApi.create(payload);
       }
@@ -367,7 +360,7 @@ function ProductTracesPage() {
             <Input placeholder="例如：1 年 / 2027-06-05 前" />
           </Form.Item>
           <Form.Item name="manufactureDate" label="出厂日期" rules={[{ required: true, message: '请选择出厂日期' }]}>
-            <Input type="date" />
+            <DatePicker style={{ width: '100%' }} />
           </Form.Item>
           <Form.Item name="serialNumber" label="产品序列号" rules={[{ required: true, message: '请输入产品序列号' }]}>
             <Input disabled={Boolean(editingTrace)} />