297 lines
10 KiB
TypeScript
297 lines
10 KiB
TypeScript
"use client"
|
||
|
||
import { cn } from "@/lib/utils"
|
||
import type { Mode } from "@/components/logic"
|
||
|
||
interface SettingsPanelProps {
|
||
mode: Mode
|
||
totalTasks: number
|
||
pickCount: number
|
||
rounds: number
|
||
allowRepeat: boolean
|
||
singleAllowRepeat: boolean
|
||
selectedRecords: { number: number; colorIndex: number }[]
|
||
onModeChange: (v: Mode) => void
|
||
onTotalTasksChange: (v: number) => void
|
||
onPickCountChange: (v: number) => void
|
||
onRoundsChange: (v: number) => void
|
||
onAllowRepeatChange: (v: boolean) => void
|
||
onSingleAllowRepeatChange: (v: boolean) => void
|
||
onRoll: () => void
|
||
onReset: () => void
|
||
isRolling: boolean
|
||
errorMsg: string
|
||
}
|
||
|
||
function FieldRow({
|
||
label,
|
||
hint,
|
||
value,
|
||
onChange,
|
||
min = 1,
|
||
}: {
|
||
label: string
|
||
hint: string
|
||
value: number
|
||
onChange: (v: number) => void
|
||
min?: number
|
||
}) {
|
||
return (
|
||
<div className="flex items-center justify-between gap-4">
|
||
<div className="min-w-0">
|
||
<div className="text-xs text-[#16191f] leading-none mb-0.5">{label}</div>
|
||
<div className="text-[10px] text-[#8a95a1] leading-none">{hint}</div>
|
||
</div>
|
||
<div className="flex items-center gap-0 border border-[#e2e6ea] flex-shrink-0">
|
||
<button
|
||
onClick={() => onChange(Math.max(min, value - 1))}
|
||
className="w-7 h-7 flex items-center justify-center text-[#8a95a1] hover:text-[#16191f] hover:bg-[#f1f3f5] transition-colors text-base leading-none"
|
||
aria-label={`减少${label}`}
|
||
>
|
||
−
|
||
</button>
|
||
<input
|
||
type="number"
|
||
value={value}
|
||
min={min}
|
||
onChange={(e) => {
|
||
const v = parseInt(e.target.value, 10)
|
||
if (!isNaN(v)) onChange(v)
|
||
}}
|
||
className={cn(
|
||
"w-12 h-7 text-center text-sm font-mono bg-[#f7f8fa]",
|
||
"border-x border-[#e2e6ea]",
|
||
"focus:outline-none focus:bg-[#ffffff]",
|
||
"[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
|
||
)}
|
||
/>
|
||
<button
|
||
onClick={() => onChange(value + 1)}
|
||
className="w-7 h-7 flex items-center justify-center text-[#8a95a1] hover:text-[#16191f] hover:bg-[#f1f3f5] transition-colors text-base leading-none"
|
||
aria-label={`增加${label}`}
|
||
>
|
||
+
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export function SettingsPanel({
|
||
mode,
|
||
totalTasks,
|
||
pickCount,
|
||
rounds,
|
||
allowRepeat,
|
||
singleAllowRepeat,
|
||
selectedRecords,
|
||
onModeChange,
|
||
onTotalTasksChange,
|
||
onPickCountChange,
|
||
onRoundsChange,
|
||
onAllowRepeatChange,
|
||
onSingleAllowRepeatChange,
|
||
onRoll,
|
||
onReset,
|
||
isRolling,
|
||
errorMsg,
|
||
}: SettingsPanelProps) {
|
||
// 只有当 rounds 是数字且小于 2 时才禁用重复选项
|
||
const repeatDisabled = typeof rounds === 'number' && rounds < 2
|
||
const isSingleMode = mode === "single"
|
||
|
||
return (
|
||
<div className="flex flex-col gap-0">
|
||
{/* Mode selector */}
|
||
<div className="flex gap-2 mb-6">
|
||
<button
|
||
onClick={() => onModeChange("single")}
|
||
className={cn(
|
||
"flex-1 h-9 border text-xs tracking-wider uppercase transition-colors",
|
||
isSingleMode
|
||
? "border-[#0f141a] bg-[#0f141a] text-[#ffffff]"
|
||
: "border-[#e2e6ea] text-[#8a95a1] hover:border-[#cdd2d8] hover:text-[#16191f]"
|
||
)}
|
||
>
|
||
单次模式
|
||
</button>
|
||
<button
|
||
onClick={() => onModeChange("multi")}
|
||
className={cn(
|
||
"flex-1 h-9 border text-xs tracking-wider uppercase transition-colors",
|
||
!isSingleMode
|
||
? "border-[#0f141a] bg-[#0f141a] text-[#ffffff]"
|
||
: "border-[#e2e6ea] text-[#8a95a1] hover:border-[#cdd2d8] hover:text-[#16191f]"
|
||
)}
|
||
>
|
||
分组模式
|
||
</button>
|
||
</div>
|
||
|
||
{/* Section label */}
|
||
<div className="flex items-center gap-2 mb-4">
|
||
<span className="text-[10px] tracking-[0.2em] uppercase text-[#8a95a1] font-mono">CONFIG</span>
|
||
<span className="flex-1 h-px bg-[#e2e6ea]" />
|
||
</div>
|
||
|
||
{/* Fields */}
|
||
<div className="flex flex-col gap-4 mb-6">
|
||
<FieldRow label="总人数" hint="参与点名的序号上限" value={totalTasks} onChange={onTotalTasksChange} />
|
||
<div className="h-px bg-[#e2e6ea]" />
|
||
<FieldRow
|
||
label="每次人数"
|
||
hint={isSingleMode ? "每次抽取的人数" : "每组抽取的人数"}
|
||
value={pickCount}
|
||
onChange={onPickCountChange}
|
||
/>
|
||
{!isSingleMode && (
|
||
<>
|
||
<div className="h-px bg-[#e2e6ea]" />
|
||
<FieldRow label="抽取组数" hint="生成分组的数量" value={rounds} onChange={onRoundsChange} min={1} />
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{/* Single mode: Allow repeat toggle */}
|
||
{isSingleMode && (
|
||
<button
|
||
type="button"
|
||
onClick={() => onSingleAllowRepeatChange(!singleAllowRepeat)}
|
||
className={cn(
|
||
"flex items-center justify-between w-full px-3 py-2.5 border mb-6 transition-colors",
|
||
singleAllowRepeat && "border-[#0f141a] bg-[#f1f3f5]",
|
||
!singleAllowRepeat && "border-[#e2e6ea] hover:border-[#cdd2d8]"
|
||
)}
|
||
>
|
||
<div className="text-left">
|
||
<div className={cn("text-xs", singleAllowRepeat ? "text-[#0f141a]" : "text-[#4a5563]")}>
|
||
允许重复选人
|
||
</div>
|
||
<div className="text-[10px] text-[#8a95a1] mt-0.5">已选过的人可再次被抽中</div>
|
||
</div>
|
||
{/* Toggle pill */}
|
||
<div className={cn(
|
||
"w-9 h-5 border relative flex-shrink-0 transition-colors",
|
||
singleAllowRepeat ? "border-[#0f141a] bg-[#0f141a]/10" : "border-[#cdd2d8]"
|
||
)}>
|
||
<span className={cn(
|
||
"absolute top-0.5 w-3 h-3 transition-all duration-150 rounded-full",
|
||
singleAllowRepeat
|
||
? "left-[calc(100%-15px)] bg-[#0f141a]"
|
||
: "left-0.5 bg-[#cdd2d8]"
|
||
)} />
|
||
</div>
|
||
</button>
|
||
)}
|
||
|
||
{/* Group mode only: Toggle */}
|
||
{!isSingleMode && (
|
||
<>
|
||
{/* Toggle */}
|
||
<button
|
||
type="button"
|
||
disabled={repeatDisabled}
|
||
onClick={() => !repeatDisabled && onAllowRepeatChange(!allowRepeat)}
|
||
className={cn(
|
||
"flex items-center justify-between w-full px-3 py-2.5 border mb-6 transition-colors",
|
||
repeatDisabled && "opacity-40 cursor-not-allowed border-[#e2e6ea]",
|
||
!repeatDisabled && allowRepeat && "border-[#0f141a] bg-[#f1f3f5]",
|
||
!repeatDisabled && !allowRepeat && "border-[#e2e6ea] hover:border-[#cdd2d8]"
|
||
)}
|
||
>
|
||
<div className="text-left">
|
||
<div className={cn("text-xs", allowRepeat && !repeatDisabled ? "text-[#0f141a]" : "text-[#4a5563]")}>
|
||
组间允许重复
|
||
</div>
|
||
<div className="text-[10px] text-[#8a95a1] mt-0.5">不同组可出现相同序号</div>
|
||
</div>
|
||
{/* Toggle pill */}
|
||
<div className={cn(
|
||
"w-9 h-5 border relative flex-shrink-0 transition-colors",
|
||
allowRepeat && !repeatDisabled ? "border-[#0f141a] bg-[#0f141a]/10" : "border-[#cdd2d8]"
|
||
)}>
|
||
<span className={cn(
|
||
"absolute top-0.5 w-3 h-3 transition-all duration-150 rounded-full",
|
||
allowRepeat && !repeatDisabled
|
||
? "left-[calc(100%-15px)] bg-[#0f141a]"
|
||
: "left-0.5 bg-[#cdd2d8]"
|
||
)} />
|
||
</div>
|
||
</button>
|
||
</>
|
||
)}
|
||
|
||
{/* Error */}
|
||
{errorMsg && (
|
||
<div className="border border-[#d92d20]/40 bg-[#d92d20]/5 px-3 py-2 mb-4 text-xs text-[#d92d20] leading-relaxed fui-fadein">
|
||
ERR: {errorMsg}
|
||
</div>
|
||
)}
|
||
|
||
{/* Action buttons */}
|
||
<div className="flex gap-2">
|
||
{/* Single mode: Roll button */}
|
||
{isSingleMode && (
|
||
<button
|
||
onClick={onRoll}
|
||
disabled={isRolling}
|
||
className={cn(
|
||
"flex-1 h-10 border text-xs tracking-[0.15em] uppercase font-mono transition-all",
|
||
"disabled:opacity-40 disabled:cursor-not-allowed",
|
||
isRolling
|
||
? "border-[#e2e6ea] text-[#8a95a1]"
|
||
: "border-[#0f141a] bg-[#0f141a] text-[#ffffff] hover:bg-[#ffffff] hover:text-[#0f141a]"
|
||
)}
|
||
>
|
||
{isRolling ? (
|
||
<span className="flex items-center justify-center gap-2">
|
||
<span className="inline-block w-3 h-3 border border-[#cdd2d8] border-t-[#16191f] rounded-full animate-spin" />
|
||
PROCESSING
|
||
</span>
|
||
) : (
|
||
"SELECT"
|
||
)}
|
||
</button>
|
||
)}
|
||
|
||
{/* Single mode: Reset button */}
|
||
{isSingleMode && selectedRecords.length > 0 && (
|
||
<button
|
||
onClick={onReset}
|
||
className={cn(
|
||
"h-10 px-4 border border-[#e2e6ea] text-xs tracking-wider uppercase font-mono transition-colors",
|
||
"text-[#8a95a1] hover:border-[#d92d20] hover:text-[#d92d20]"
|
||
)}
|
||
>
|
||
RESET
|
||
</button>
|
||
)}
|
||
|
||
{/* Multi mode: Execute button */}
|
||
{!isSingleMode && (
|
||
<button
|
||
onClick={onRoll}
|
||
disabled={isRolling}
|
||
className={cn(
|
||
"w-full h-10 border text-xs tracking-[0.15em] uppercase font-mono transition-all",
|
||
"disabled:opacity-40 disabled:cursor-not-allowed",
|
||
isRolling
|
||
? "border-[#e2e6ea] text-[#8a95a1]"
|
||
: "border-[#0f141a] bg-[#0f141a] text-[#ffffff] hover:bg-[#ffffff] hover:text-[#0f141a]"
|
||
)}
|
||
>
|
||
{isRolling ? (
|
||
<span className="flex items-center justify-center gap-2">
|
||
<span className="inline-block w-3 h-3 border border-[#cdd2d8] border-t-[#16191f] rounded-full animate-spin" />
|
||
PROCESSING
|
||
</span>
|
||
) : (
|
||
"EXECUTE"
|
||
)}
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|