69 lines
2.7 KiB
TypeScript
69 lines
2.7 KiB
TypeScript
import { ChangeEvent, useState } from 'react'
|
||
|
||
interface RandomSeedProps {
|
||
salt: string
|
||
setSalt: (salt: string) => void
|
||
count: number
|
||
setCount: (count: number) => void
|
||
}
|
||
|
||
export default function RandomSeed({ salt, setSalt, count, setCount }: RandomSeedProps) {
|
||
const [errors, setErrors] = useState({ salt: '', count: '' })
|
||
|
||
const validateSalt = (value: string) => {
|
||
if (value.trim() === '') {
|
||
setErrors(prev => ({ ...prev, salt: '请输入随机种子' }))
|
||
} else {
|
||
setErrors(prev => ({ ...prev, salt: '' }))
|
||
}
|
||
setSalt(value)
|
||
}
|
||
|
||
const validateCount = (value: number) => {
|
||
if (value < 1) {
|
||
setErrors(prev => ({ ...prev, count: '抽取数量必须大于0' }))
|
||
} else {
|
||
setErrors(prev => ({ ...prev, count: '' }))
|
||
}
|
||
setCount(value)
|
||
}
|
||
|
||
return (
|
||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transition-colors duration-200">
|
||
<h2 className="text-2xl font-bold mb-4 text-indigo-800 dark:text-indigo-200">随机种子</h2>
|
||
<p className="mb-4 text-gray-600 dark:text-gray-300">
|
||
选择一个随机的文本作为种子值。这个种子值将被用作计算哈希值的输入。为了获得最好的排序效果，建议选择事先无法确定的内容作为种子，如明天的热搜第一条，或某一个群聊内最新的一条消息。
|
||
</p>
|
||
<div className="space-y-4">
|
||
<div>
|
||
<label htmlFor="salt" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||
填写事先无法预测的文本：
|
||
</label>
|
||
<input
|
||
id="salt"
|
||
type="text"
|
||
value={salt}
|
||
onChange={(e: ChangeEvent<HTMLInputElement>) => validateSalt(e.target.value)}
|
||
className="w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
|
||
/>
|
||
{errors.salt && <p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.salt}</p>}
|
||
</div>
|
||
<div>
|
||
<label htmlFor="count" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||
抽取数量：
|
||
</label>
|
||
<input
|
||
id="count"
|
||
type="number"
|
||
value={count}
|
||
onChange={(e: ChangeEvent<HTMLInputElement>) => validateCount(Number(e.target.value))}
|
||
className="w-24 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
|
||
/>
|
||
{errors.count && <p className="mt-1 text-sm text-red-600 dark:text-red-400">{errors.count}</p>}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|