dachui/order_site
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(worker-hall): 抢单大厅支持分类与全部按钮图标自定义及PNG透明通道修复

Browse Source
This commit is contained in:
yml2213
2026-09-12 20:16:27 +08:00
parent 694d7fff40
commit 1cf790d6ab
11 changed files with 187 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/pages/worker/WorkerHallPage.tsx
+61 -21
View File
@@ -79,6 +79,8 @@ export default function WorkerHallPage() {
const [leaderboardPeriod, setLeaderboardPeriod] = useState<WorkerLeaderboardPeriod>('all')
const [sharingQuantity, setSharingQuantity] = useState(1)
const [submittingSharing, setSubmittingSharing] = useState(false)
const [failedImageKeys, setFailedImageKeys] = useState<Record<string | number, boolean>>({})
const [confirmOpen, setConfirmOpen] = useState(false)
const [grabConfirmEnabled, setGrabConfirmEnabled] = useState(isGrabConfirmEnabled)
const loadMoreRef = useRef<HTMLDivElement | null>(null)
@@ -139,7 +141,15 @@ export default function WorkerHallPage() {
const allCategories = firstPage?.categories || []
const showSubcategoriesConfig = firstPage?.showSubcategories ?? true
const primaryCategories = allCategories.filter((c) => !c.parentId)
const allCategoryFromList = allCategories.find(
(c) => !c.parentId && (c.categoryKey === 'all' || c.name === '全部'),
)
const allIconUrl = firstPage?.allIconUrl || allCategoryFromList?.iconUrl || null
const primaryCategories = allCategories.filter(
(c) => !c.parentId && c.categoryKey !== 'all' && c.name !== '全部',
)
const hasCategoryBar = primaryCategories.length > 0 || Boolean(allIconUrl)
const subCategoriesMap = new Map<number, typeof allCategories>()
for (const c of allCategories) {
if (c.parentId) {
@@ -365,7 +375,7 @@ export default function WorkerHallPage() {
</div>
{/* 移动端一级分类/游戏卡片横向滑动条 */}
{primaryCategories.length > 0 ? (
{hasCategoryBar ? (
<div className="worker-hall-game-cards-scroll">
<button
type="button"
@@ -375,17 +385,26 @@ export default function WorkerHallPage() {
<div
className="worker-hall-game-icon-box"
style={
primaryCategoryId === 0
primaryCategoryId === 0 && (!allIconUrl || failedImageKeys['all'])
? { background: 'linear-gradient(135deg, #ff6a00 0%, #ff8e3c 100%)' }
: undefined
}
>
<AppstoreOutlined
style={{
fontSize: 20,
color: primaryCategoryId === 0 ? '#ffffff' : '#64748b',
}}
/>
{allIconUrl && !failedImageKeys['all'] ? (
<img
src={allIconUrl}
alt="全部"
className="worker-hall-game-img"
onError={() => setFailedImageKeys((prev) => ({ ...prev, all: true }))}
/>
) : (
<AppstoreOutlined
style={{
fontSize: 20,
color: primaryCategoryId === 0 ? '#ffffff' : '#64748b',
}}
/>
)}
</div>
<span className="worker-hall-game-title">全部</span>
</button>
@@ -399,16 +418,22 @@ export default function WorkerHallPage() {
<div
className="worker-hall-game-icon-box"
style={
!category.iconUrl
!category.iconUrl || failedImageKeys[category.categoryId]
? { background: getCategoryGradient(category.name, category.categoryId) }
: undefined
}
>
{category.iconUrl ? (
{category.iconUrl && !failedImageKeys[category.categoryId] ? (
<img
src={category.iconUrl}
alt={category.name}
className="worker-hall-game-img"
onError={() =>
setFailedImageKeys((prev) => ({
...prev,
[category.categoryId]: true,
}))
}
/>
) : (
<span className="worker-hall-game-initial">{category.name.slice(0, 1)}</span>
@@ -793,7 +818,7 @@ export default function WorkerHallPage() {
<Card className="worker-hall-board-card" bordered={false}>
{/* 桌面端一级分类卡片与二级联动 */}
{primaryCategories.length > 0 ? (
{hasCategoryBar ? (
<div style={{ marginBottom: 14 }}>
<div className="worker-hall-game-cards-scroll">
<button
@@ -804,17 +829,26 @@ export default function WorkerHallPage() {
<div
className="worker-hall-game-icon-box"
style={
primaryCategoryId === 0
primaryCategoryId === 0 && (!allIconUrl || failedImageKeys['all'])
? { background: 'linear-gradient(135deg, #ff6a00 0%, #ff8e3c 100%)' }
: undefined
}
>
<AppstoreOutlined
style={{
fontSize: 20,
color: primaryCategoryId === 0 ? '#ffffff' : '#64748b',
}}
/>
{allIconUrl && !failedImageKeys['all'] ? (
<img
src={allIconUrl}
alt="全部"
className="worker-hall-game-img"
onError={() => setFailedImageKeys((prev) => ({ ...prev, all: true }))}
/>
) : (
<AppstoreOutlined
style={{
fontSize: 20,
color: primaryCategoryId === 0 ? '#ffffff' : '#64748b',
}}
/>
)}
</div>
<span className="worker-hall-game-title">全部</span>
</button>
@@ -828,18 +862,24 @@ export default function WorkerHallPage() {
<div
className="worker-hall-game-icon-box"
style={
!category.iconUrl
!category.iconUrl || failedImageKeys[category.categoryId]
? {
background: getCategoryGradient(category.name, category.categoryId),
}
: undefined
}
>
{category.iconUrl ? (
{category.iconUrl && !failedImageKeys[category.categoryId] ? (
<img
src={category.iconUrl}
alt={category.name}
className="worker-hall-game-img"
onError={() =>
setFailedImageKeys((prev) => ({
...prev,
[category.categoryId]: true,
}))
}
/>
) : (
<span className="worker-hall-game-initial">