ui: match Agents entry artwork to module cards

This commit is contained in:
2026-09-14 14:05:52 +08:00
parent da6684b03e
commit 10df9fd740
5 changed files with 79 additions and 6 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 89 KiB

View File

@@ -1,5 +1,6 @@
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import moduleAgentsImage from '@/assets/module-agents.webp';
import moduleCanvasImage from '@/assets/module-canvas-neon.webp';
import moduleGameImage from '@/assets/module-game.webp';
import moduleRobotImage from '@/assets/module-robot.webp';
@@ -12,8 +13,8 @@ import { cn } from '@/lib/utils';
import { useAuthStore } from '@/stores/auth';
import { getUserProfileDisplayName } from '@/stores/user-profile';
const moduleSelectionContent: Record<AiModuleId, { label: string; image?: string; imageAlt: string }> = {
cloud_agents: { label: 'Agents 智能体', imageAlt: '个人云智能体' },
const moduleSelectionContent: Record<AiModuleId, { label: string; image: string; imageAlt: string }> = {
cloud_agents: { label: 'Agents 智能体', image: moduleAgentsImage, imageAlt: '个人云智能体' },
programming: { label: 'Code 编程', image: moduleGameImage, imageAlt: '游戏创作工作台' },
painting: { label: 'Canvas 设计', image: moduleCanvasImage, imageAlt: '数位板设计创作' },
robot: { label: 'Robot 机器', image: moduleRobotImage, imageAlt: '青少年管理机器人硬件与设备绑定' },
@@ -90,14 +91,12 @@ export function ModuleSelection({ authRequired = true }: { authRequired?: boolea
<span className="module-option-card-frame" aria-hidden="true" />
<div className="module-option-card-surface relative flex h-full w-full rounded-lg bg-background">
<div className="module-option-card-image relative shrink-0">
{content.image ? <img
<img
src={content.image}
alt={content.imageAlt}
className={cn('module-option-card-image-media h-full w-full object-cover', !enabled && 'grayscale')}
draggable="false"
/> : <div className="flex h-full w-full items-center justify-center bg-violet-50 text-violet-600">
<module.Icon className="h-12 w-12" strokeWidth={1.25} />
</div>}
/>
</div>
<div className="module-option-card-content relative min-h-0 flex-1">
<p className="module-option-card-title font-medium tracking-[-0.02em]">{content.label}</p>