统一创建:包含再处理选中

This commit is contained in:
北枳 2025-10-20 21:55:57 +08:00
parent a157bfbadf
commit f2c4844e05

View File

@ -33,13 +33,7 @@ export function PortraitAnimeSelector({
disabled = false, disabled = false,
}: PortraitAnimeSelectorProps) { }: PortraitAnimeSelectorProps) {
const [lastAnimeChoice, setLastAnimeChoice] = useState<string>('STANDARD_V1_734684_116483'); const [lastAnimeChoice, setLastAnimeChoice] = useState<string>('STANDARD_V1_734684_116483');
const [animeOptions, setAnimeOptions] = useState<Array<{ name: string; pcode: string }>>([]); const [animeOptions, setAnimeOptions] = useState<Array<{ name: string; pcode: string }>>([])
useEffect(() => {
if (value && value !== 'portrait') {
setLastAnimeChoice(value);
}
}, [value]);
useEffect(() => { useEffect(() => {
let mounted = true; let mounted = true;
@ -66,6 +60,11 @@ export function PortraitAnimeSelector({
return map; return map;
}, [animeOptions]); }, [animeOptions]);
/** Check if currentAnime is valid in animeOptions */
const isValidAnimeChoice = useMemo(() => {
return animeOptions.some(opt => opt.pcode === currentAnime);
}, [animeOptions, currentAnime]);
/** Anime dropdown menu items */ /** Anime dropdown menu items */
const animeMenuItems = (animeOptions.length > 0 ? animeOptions : []).map((opt) => ({ const animeMenuItems = (animeOptions.length > 0 ? animeOptions : []).map((opt) => ({
key: opt.pcode, key: opt.pcode,
@ -111,13 +110,13 @@ export function PortraitAnimeSelector({
className={`h-6 px-2 rounded-full transition-all duration-200 flex items-center gap-1.5 text-sm ${ className={`h-6 px-2 rounded-full transition-all duration-200 flex items-center gap-1.5 text-sm ${
disabled disabled
? 'opacity-40 cursor-not-allowed bg-transparent text-gray-400' ? 'opacity-40 cursor-not-allowed bg-transparent text-gray-400'
: !isPortrait : !isPortrait && isValidAnimeChoice
? 'bg-white/10 text-cyan-400 shadow-sm' ? 'bg-white/10 text-cyan-400 shadow-sm'
: 'bg-transparent text-gray-400 hover:text-gray-300' : 'bg-transparent text-gray-400 hover:text-gray-300'
}`} }`}
> >
<span className="max-w-[100px] truncate"> <span className="max-w-[100px] truncate">
{!isPortrait && pcodeToName[currentAnime] {!isPortrait && pcodeToName[currentAnime] && isValidAnimeChoice
? pcodeToName[currentAnime] ? pcodeToName[currentAnime]
: 'Anime'} : 'Anime'}
</span> </span>