65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
|
import { useState } from 'react';
|
|||
|
|
|
|||
|
|
interface RoleSelectorProps {
|
|||
|
|
value: string;
|
|||
|
|
onChange: (role: 'author' | 'editor' | 'operator') => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const roles = [
|
|||
|
|
{
|
|||
|
|
key: 'author' as const,
|
|||
|
|
label: '我是作者',
|
|||
|
|
emoji: '🖊️',
|
|||
|
|
desc: '用AI辅助创作，提高效率',
|
|||
|
|
companion: '笔灵',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'editor' as const,
|
|||
|
|
label: '我是编辑',
|
|||
|
|
emoji: '📊',
|
|||
|
|
desc: '用AI辅助审稿，高效筛选',
|
|||
|
|
companion: '慧眼',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'operator' as const,
|
|||
|
|
label: '我是运营',
|
|||
|
|
emoji: '🤝',
|
|||
|
|
desc: '用AI辅助分析，洞察趋势',
|
|||
|
|
companion: '星图',
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
export default function RoleSelector({ value, onChange }: RoleSelectorProps) {
|
|||
|
|
const [hovered, setHovered] = useState<string | null>(null);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="flex flex-col sm:flex-row gap-3 w-full max-w-lg mx-auto">
|
|||
|
|
{roles.map((role) => (
|
|||
|
|
<button
|
|||
|
|
key={role.key}
|
|||
|
|
onClick={() => onChange(role.key)}
|
|||
|
|
onMouseEnter={() => setHovered(role.key)}
|
|||
|
|
onMouseLeave={() => setHovered(null)}
|
|||
|
|
className={`
|
|||
|
|
flex-1 flex flex-col items-center gap-1.5 px-4 py-4 rounded-2xl border-2 transition-all duration-200
|
|||
|
|
${
|
|||
|
|
value === role.key
|
|||
|
|
? 'border-brand-500 bg-brand-50 shadow-glow'
|
|||
|
|
: 'border-ink-200 bg-white hover:border-brand-300 hover:shadow-soft'
|
|||
|
|
}
|
|||
|
|
`}
|
|||
|
|
>
|
|||
|
|
<span className="text-2xl">{role.emoji}</span>
|
|||
|
|
<span className="font-semibold text-ink-800">{role.label}</span>
|
|||
|
|
<span className="text-xs text-ink-500">{role.desc}</span>
|
|||
|
|
{(value === role.key || hovered === role.key) && (
|
|||
|
|
<span className="text-xs text-brand-600 mt-1">
|
|||
|
|
AI伙伴：{role.companion}
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|