fix: 收窄创作入口关闭熔断范围
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { Coins, Trophy } from 'lucide-react';
|
||||
import { Coins, LockKeyhole, Trophy } from 'lucide-react';
|
||||
import { type UIEvent, useEffect, useMemo, useRef, useState } from 'react';
|
||||
|
||||
import type {
|
||||
@@ -100,17 +100,17 @@ export function CustomWorldCreationStartCard({
|
||||
activeCategoryId ??
|
||||
(hasRecentCreationTypes
|
||||
? CREATION_ENTRY_RECENT_TAB_ID
|
||||
: creationTypeGroups[0]?.id ?? null);
|
||||
: (creationTypeGroups[0]?.id ?? null));
|
||||
const isRecentTabActive =
|
||||
hasRecentCreationTypes && activeTabId === CREATION_ENTRY_RECENT_TAB_ID;
|
||||
const activeGroup = isRecentTabActive
|
||||
? null
|
||||
: creationTypeGroups.find((group) => group.id === activeTabId) ??
|
||||
: (creationTypeGroups.find((group) => group.id === activeTabId) ??
|
||||
creationTypeGroups[0] ??
|
||||
null;
|
||||
null);
|
||||
const visibleCreationTypes = isRecentTabActive
|
||||
? recentCreationTypes
|
||||
: activeGroup?.items ?? [];
|
||||
: (activeGroup?.items ?? []);
|
||||
const eventBanners = useMemo(
|
||||
() => resolveCreationEntryEventBanners(entryConfig),
|
||||
[entryConfig],
|
||||
@@ -318,18 +318,20 @@ export function CustomWorldCreationStartCard({
|
||||
<div className="creation-template-list__grid mt-2 grid grid-cols-2 gap-2 sm:mt-3 sm:gap-3">
|
||||
{visibleCreationTypes.map((item) => {
|
||||
const disabled = item.locked || busy;
|
||||
const lockedBadge = item.badge.trim() || '暂未开放';
|
||||
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
data-locked={item.locked ? 'true' : undefined}
|
||||
onClick={() => {
|
||||
onCreateType(item.id);
|
||||
}}
|
||||
className={`creation-template-card platform-interactive-card relative flex min-h-[12.5rem] flex-col overflow-hidden rounded-[1rem] border bg-white p-0 text-left transition sm:min-h-[15rem] sm:rounded-[1.2rem] ${
|
||||
item.locked
|
||||
? 'cursor-not-allowed border-[#eadbd3] text-[#725b4d] opacity-72'
|
||||
? 'cursor-not-allowed border-[#d9ccc2] text-[#725b4d] shadow-[inset_0_0_0_1px_rgba(111,78,61,0.08)]'
|
||||
: 'border-[#eadbd3] text-[#2f211b] hover:border-[#dc9a72] hover:shadow-[0_16px_34px_rgba(174,111,73,0.14)]'
|
||||
} ${busy && !item.locked ? 'opacity-70' : ''}`}
|
||||
>
|
||||
@@ -337,25 +339,70 @@ export function CustomWorldCreationStartCard({
|
||||
<img
|
||||
src={item.imageSrc}
|
||||
alt=""
|
||||
className="h-full w-full object-cover"
|
||||
className={`h-full w-full object-cover ${
|
||||
item.locked
|
||||
? 'scale-[1.01] grayscale-[0.62] saturate-[0.55] brightness-[0.82]'
|
||||
: ''
|
||||
}`}
|
||||
loading="lazy"
|
||||
/>
|
||||
{shouldShowCreationBadge(item.badge) ? (
|
||||
<span className="absolute left-2 top-2 max-w-[calc(100%-1rem)] rounded-full bg-[#b66a3e] px-2 py-0.5 text-xs font-black text-white shadow-sm sm:left-3 sm:top-3 sm:px-2.5 sm:py-1">
|
||||
{item.badge}
|
||||
{item.locked ? (
|
||||
<div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(52,36,27,0.22)_0%,rgba(52,36,27,0.52)_100%)]" />
|
||||
) : null}
|
||||
{item.locked || shouldShowCreationBadge(item.badge) ? (
|
||||
<span
|
||||
className={`absolute left-2 top-2 inline-flex max-w-[calc(100%-1rem)] items-center gap-1 rounded-full px-2 py-0.5 text-xs font-black shadow-sm sm:left-3 sm:top-3 sm:px-2.5 sm:py-1 ${
|
||||
item.locked
|
||||
? 'bg-[#3f3129]/90 text-white'
|
||||
: 'bg-[#b66a3e] text-white'
|
||||
}`}
|
||||
>
|
||||
{item.locked ? <LockKeyhole className="h-3 w-3" /> : null}
|
||||
{item.locked ? lockedBadge : item.badge}
|
||||
</span>
|
||||
) : null}
|
||||
<span className="creation-template-card__cost-badge absolute bottom-2 right-2 inline-flex max-w-[calc(100%-1rem)] items-center gap-1 rounded-full bg-[#fff7ec]/92 px-2 py-1 text-[11px] font-black leading-4 text-[#b65f2c] shadow-[0_8px_18px_rgba(119,72,44,0.16)]">
|
||||
<Coins className="h-3 w-3 shrink-0" />
|
||||
<span className="truncate">10-20泥点数</span>
|
||||
{item.locked ? (
|
||||
<span className="absolute left-1/2 top-1/2 inline-flex h-11 w-11 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-white/88 text-[#5d4639] shadow-[0_12px_24px_rgba(46,31,23,0.22)]">
|
||||
<LockKeyhole className="h-5 w-5" />
|
||||
</span>
|
||||
) : null}
|
||||
<span
|
||||
className={`creation-template-card__cost-badge absolute bottom-2 right-2 inline-flex max-w-[calc(100%-1rem)] items-center gap-1 rounded-full px-2 py-1 text-[11px] font-black leading-4 shadow-[0_8px_18px_rgba(119,72,44,0.16)] ${
|
||||
item.locked
|
||||
? 'bg-[#3f3129]/88 text-white'
|
||||
: 'bg-[#fff7ec]/92 text-[#b65f2c]'
|
||||
}`}
|
||||
>
|
||||
{item.locked ? (
|
||||
<LockKeyhole className="h-3 w-3 shrink-0" />
|
||||
) : (
|
||||
<Coins className="h-3 w-3 shrink-0" />
|
||||
)}
|
||||
<span className="truncate">
|
||||
{item.locked ? '暂未开放' : '10-20泥点数'}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="creation-template-card__body flex min-h-[4.6rem] flex-1 flex-col bg-white px-2.5 pb-2.5 pt-2.5 text-[#2f211b] sm:min-h-[5.4rem] sm:px-3.5 sm:pb-3.5">
|
||||
<div className="creation-template-card__title line-clamp-1 text-sm font-black leading-5 text-[#2f211b]">
|
||||
<div
|
||||
className={`creation-template-card__body flex min-h-[4.6rem] flex-1 flex-col px-2.5 pb-2.5 pt-2.5 sm:min-h-[5.4rem] sm:px-3.5 sm:pb-3.5 ${
|
||||
item.locked
|
||||
? 'bg-[#f3ece6] text-[#725b4d]'
|
||||
: 'bg-white text-[#2f211b]'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`creation-template-card__title line-clamp-1 text-sm font-black leading-5 ${
|
||||
item.locked ? 'text-[#5d4639]' : 'text-[#2f211b]'
|
||||
}`}
|
||||
>
|
||||
{item.title}
|
||||
</div>
|
||||
<div className="creation-template-card__subtitle mt-1 line-clamp-2 text-xs font-semibold leading-4 text-[#6f5a4c] sm:leading-5">
|
||||
<div
|
||||
className={`creation-template-card__subtitle mt-1 line-clamp-2 text-xs font-semibold leading-4 sm:leading-5 ${
|
||||
item.locked ? 'text-[#8a766a]' : 'text-[#6f5a4c]'
|
||||
}`}
|
||||
>
|
||||
{item.subtitle}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user