|
|
@@ -3,6 +3,7 @@
|
|
|
## 版本信息
|
|
|
| 版本 | 日期 | 描述 | 作者 |
|
|
|
|------|------|------|------|
|
|
|
+| 1.1 | 2025-10-16 | 补充日期时间处理规范,修复表单时间显示问题 | Winston |
|
|
|
| 1.0 | 2025-10-16 | 初始版本,基于现有管理后台实现 | Winston |
|
|
|
|
|
|
## 概述
|
|
|
@@ -183,6 +184,108 @@ const handleSubmit = async (data: FormData) => {
|
|
|
};
|
|
|
```
|
|
|
|
|
|
+### 日期时间处理规范
|
|
|
+
|
|
|
+#### 时间格式标准
|
|
|
+```typescript
|
|
|
+// 后端Schema定义 - 使用z.coerce.date()确保时间字段保持为Date对象
|
|
|
+const activitySchema = z.object({
|
|
|
+ startDate: z.coerce.date(),
|
|
|
+ endDate: z.coerce.date(),
|
|
|
+ createdAt: z.coerce.date(),
|
|
|
+ updatedAt: z.coerce.date()
|
|
|
+});
|
|
|
+
|
|
|
+// 前端表单定义 - 使用datetime-local输入框
|
|
|
+const formSchema = z.object({
|
|
|
+ startDate: z.string().datetime('开始日期格式不正确'),
|
|
|
+ endDate: z.string().datetime('结束日期格式不正确')
|
|
|
+});
|
|
|
+```
|
|
|
+
|
|
|
+#### 时间格式转换函数
|
|
|
+```typescript
|
|
|
+import { format } from 'date-fns';
|
|
|
+
|
|
|
+// 将ISO日期时间格式化为 datetime-local 输入框需要的格式
|
|
|
+const formatDateTimeForInput = (dateString: string): string => {
|
|
|
+ const date = new Date(dateString);
|
|
|
+ // 使用 date-fns 转换为 YYYY-MM-DDTHH:mm 格式
|
|
|
+ return format(date, "yyyy-MM-dd'T'HH:mm");
|
|
|
+};
|
|
|
+
|
|
|
+// 将表单时间转换为ISO格式
|
|
|
+const formatDateTimeForAPI = (dateTimeString: string): string => {
|
|
|
+ const date = new Date(dateTimeString);
|
|
|
+ return date.toISOString();
|
|
|
+};
|
|
|
+```
|
|
|
+
|
|
|
+#### 表单中的时间字段使用
|
|
|
+```typescript
|
|
|
+// 表单默认值设置 - 正确处理时间格式
|
|
|
+const form = useForm({
|
|
|
+ resolver: zodResolver(formSchema),
|
|
|
+ defaultValues: initialData ? {
|
|
|
+ name: initialData.name || '',
|
|
|
+ startDate: initialData.startDate ? formatDateTimeForInput(initialData.startDate) : '',
|
|
|
+ endDate: initialData.endDate ? formatDateTimeForInput(initialData.endDate) : '',
|
|
|
+ } : {
|
|
|
+ name: '',
|
|
|
+ startDate: '',
|
|
|
+ endDate: '',
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+// 表单提交前的时间格式转换
|
|
|
+const handleSubmit = async (data: FormData) => {
|
|
|
+ const submitData = {
|
|
|
+ ...data,
|
|
|
+ startDate: formatDateTimeForAPI(data.startDate),
|
|
|
+ endDate: formatDateTimeForAPI(data.endDate)
|
|
|
+ };
|
|
|
+
|
|
|
+ await entityClient.$post({ json: submitData });
|
|
|
+};
|
|
|
+```
|
|
|
+
|
|
|
+#### 时间输入组件
|
|
|
+```typescript
|
|
|
+// 标准时间输入字段
|
|
|
+<FormField
|
|
|
+ control={form.control}
|
|
|
+ name="startDate"
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>开始时间 *</FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <Input
|
|
|
+ type="datetime-local"
|
|
|
+ {...field}
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormDescription>
|
|
|
+ 活动的开始时间
|
|
|
+ </FormDescription>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+/>
|
|
|
+```
|
|
|
+
|
|
|
+#### 时间显示规范
|
|
|
+```typescript
|
|
|
+// 表格中的时间显示
|
|
|
+<TableCell>
|
|
|
+ {new Date(activity.startDate).toLocaleString('zh-CN')}
|
|
|
+</TableCell>
|
|
|
+
|
|
|
+// 详情页中的时间显示
|
|
|
+<div className="text-sm text-muted-foreground">
|
|
|
+ 创建时间: {format(new Date(entity.createdAt), 'yyyy-MM-dd HH:mm:ss')}
|
|
|
+</div>
|
|
|
+```
|
|
|
+
|
|
|
## 搜索和筛选规范
|
|
|
|
|
|
### 搜索功能
|