collect-system/apps/web/src/app/admin/code-manage/components/CodeManageEdit.tsx

import { useCodeManageContext } from "../CodeManageContext";
import { Form, DatePicker, Input, Button } from "antd";
import dayjs from "dayjs";
import { useState } from "react";

export default function CodeManageEdit() {
    const { editForm } = useCodeManageContext();
    // 验证数字输入只能是大于等于0的整数
    const validatePositiveInteger = (_: any, value: string) => {
        const num = parseInt(value, 10);
        if (isNaN(num) || num < 0 || num !== parseFloat(value)) {
            return Promise.reject("请输入大于等于0的整数");
        }
        return Promise.resolve();
    };

    return (
        <div className="w-full max-w-md mx-auto bg-white p-6 rounded-lg">
            <Form 
                form={editForm} 
                layout="vertical"
                className="space-y-4"
            >
                <Form.Item
                    label={<span className="text-gray-700 font-medium">分享码有效期</span>}
                    name="expiresAt"
                    rules={[{ required: true, message: "请选择有效期" }]}
                    className="mb-5"
                >
                    <DatePicker
                        className="w-full"
                        showTime
                        placeholder="选择日期和时间"
                        disabledDate={(current) => current && current < dayjs().startOf('day')}
                        disabledTime={(current) => {
                            if (current && current.isSame(dayjs(), 'day')) {
                                return {
                                    disabledHours: () => [...Array(dayjs().hour()).keys()],
                                    disabledMinutes: (selectedHour) => {
                                        if (selectedHour === dayjs().hour()) {
                                            return [...Array(dayjs().minute()).keys()];
                                        }
                                        return [];
                                    }
                                };
                            }
                            return {};
                        }}
                    />
                </Form.Item>
                
                <Form.Item
                    label={<span className="text-gray-700 font-medium">使用次数</span>}
                    name="canUseTimes"
                    rules={[
                        { required: true, message: "请输入使用次数" },
                        { validator: validatePositiveInteger }
                    ]}
                    className="mb-5"
                >
                    <Input
                        type="number"
                        min={0}
                        step={1}
                        placeholder="请输入使用次数"
                        className="w-full"
                    />
                </Form.Item>
            </Form>
        </div>
    );
}