Explorar el Código

📝 docs(architecture): 补充日期时间处理规范

- 添加版本记录:版本1.1,补充日期时间处理规范,修复表单时间显示问题
- 新增日期时间处理规范章节,包含:
  - 时间格式标准:后端Schema和前端表单定义示例
  - 时间格式转换函数:formatDateTimeForInput和formatDateTimeForAPI实现
  - 表单中的时间字段使用:默认值设置和提交前格式转换示例
  - 时间输入组件:FormField结合datetime-local类型输入框的实现
  - 时间显示规范:表格和详情页中的时间格式化展示方法
yourname hace 4 meses
padre
commit
3b272d6482
Se han modificado 1 ficheros con 103 adiciones y 0 borrados
  1. 103 0
      docs/architecture/admin-dashboard-standards.md

+ 103 - 0
docs/architecture/admin-dashboard-standards.md

@@ -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>
+```
+
 ## 搜索和筛选规范
 
 ### 搜索功能