83 lines
2.3 KiB
TypeScript
83 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { POST_DELETE_TYPES } from "@/lib/api";
|
|
|
|
/** 管理软删共用：类型单选 + 仅「其他」时的补充理由 */
|
|
export default function StaffDeleteFields({
|
|
deleteType,
|
|
onTypeChange,
|
|
reason,
|
|
onReasonChange,
|
|
reasonId,
|
|
reasonPlaceholder,
|
|
typeHint,
|
|
reasonHint,
|
|
}: {
|
|
deleteType: string;
|
|
onTypeChange: (value: string) => void;
|
|
reason: string;
|
|
onReasonChange: (value: string) => void;
|
|
reasonId: string;
|
|
reasonPlaceholder: string;
|
|
typeHint: string;
|
|
reasonHint: string;
|
|
}) {
|
|
const reasonRequired = deleteType === "other";
|
|
|
|
return (
|
|
<>
|
|
<p className="mb-2 text-[12.5px] font-medium" style={{ color: "var(--ink)" }}>
|
|
删除类型
|
|
</p>
|
|
<div
|
|
className="grid grid-cols-1 sm:grid-cols-2 gap-1.5 mb-1"
|
|
role="radiogroup"
|
|
aria-label="删除类型"
|
|
>
|
|
{POST_DELETE_TYPES.map((t) => {
|
|
const active = deleteType === t.value;
|
|
return (
|
|
<button
|
|
key={t.value}
|
|
type="button"
|
|
role="radio"
|
|
aria-checked={active}
|
|
onClick={() => onTypeChange(t.value)}
|
|
className="text-left rounded-lg px-3 py-2.5 text-[13px] transition-colors"
|
|
style={{
|
|
border: `1.5px solid ${active ? "var(--accent)" : "var(--line)"}`,
|
|
background: active ? "var(--accent-soft)" : "var(--panel-2)",
|
|
color: active ? "var(--accent)" : "var(--ink)",
|
|
}}
|
|
>
|
|
{t.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
<p className="meta text-[11.5px] mb-4 leading-relaxed">{typeHint}</p>
|
|
{reasonRequired ? (
|
|
<>
|
|
<label
|
|
className="block mb-1.5 text-[12.5px] font-medium"
|
|
style={{ color: "var(--ink)" }}
|
|
htmlFor={reasonId}
|
|
>
|
|
补充理由 <span style={{ color: "var(--danger)" }}>*</span>
|
|
</label>
|
|
<textarea
|
|
id={reasonId}
|
|
className="field"
|
|
rows={3}
|
|
value={reason}
|
|
onChange={(e) => onReasonChange(e.target.value)}
|
|
placeholder={reasonPlaceholder}
|
|
maxLength={200}
|
|
/>
|
|
<p className="meta text-[11.5px] mt-1.5">{reasonHint}</p>
|
|
</>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|