feat: 工具盒卡片预览图替换与响应式视觉优化
本次提交包含以下改进： ## 1. 工具卡片真实预览图替换 (MorePage.tsx) - 移除原有的CSS绘制Before/After对比图(ToolComparePanel/CompareScene) - 新增ToolPreviewPanel组件，使用OSS真实截图展示每个工具的效果预览 - 建立toolPreviewImages映射表，为8个工具分别配置预览图URL - 预览图支持hover悬浮放大效果(popover)，桌面端鼠标悬停时展示大图 - 触摸设备通过@media (hover: none)隐藏popover，避免移动端误触 ## 2. 核心工具区重构 (MorePage.tsx) - 移除FeaturedTool独立接口和featuredTools数组，统一到tools体系 - 新增coreToolIds集合标记核心工具(workbench/inpaint/watermarkRemoval) - 新增coreToolGradients和coreToolSteps独立配置每张核心卡的渐变和步骤 - 移除openFeaturedTool，统一使用openTool处理所有工具点击 - 核心卡片kick er改为显示分类标签(图像创作/视频创作) - 视频生成分类标签更名为"视频创作" ## 3. 工具卡片视觉升级 (more.css) - 新增CSS变量体系：--more-card-surface/surface-strong/border/border-strong - 核心工具卡：三列网格布局、渐变背景叠加、预览图16:9占位区 - 普通工具卡：增大最小高度至392px、radial-gradient光晕、增强边框 - 卡片预览图：aspect-ratio容器、内边框光效、::after渐变叠加层 - Hover悬浮popover：从卡片底部弹出大图，160ms过渡动画 - CTA按钮强化：渐变背景、内阴影高光、font-weight 850 - :active状态按压反馈(translateY(0)消除位移) - 阴影系统升级：更深、更柔和的阴影层次 ## 4. Prompt案例弹窗响应式重构 (workbench.css) - 720px断点：从垂直堆叠改为水平左右分栏布局(1.08:0.92) - 侧边栏从底部面板移至右侧，带左分割线和投影 - 420px断点：紧凑水平分栏(0.9:1.1)、更小字号和间距 - 弹窗增加边框和圆角、关闭按钮毛玻璃效果 - 作者信息采用grid布局、描述文本line-clamp截断 ## 5. 响应式细节完善 - more.css 860px: 双列核心卡、增大预览图、调整间距 - more.css 520px: 单列布局、筛选标签横向滚动、CTA按钮全宽 - workbench.css: 各断点prompt-case-modal精确调优
This commit is contained in:
+171
-129
@@ -37,117 +37,153 @@ interface MoreTool {
|
||||
imageTool?: WebImageWorkbenchTool;
|
||||
ready: boolean;
|
||||
badge?: string;
|
||||
featured?: boolean;
|
||||
}
|
||||
|
||||
type CompareScene =
|
||||
| "workbench"
|
||||
| "inpaint"
|
||||
| "camera"
|
||||
| "upscale"
|
||||
| "watermark"
|
||||
| "dialog"
|
||||
| "subtitle"
|
||||
| "digital-human"
|
||||
| "character"
|
||||
| "avatar";
|
||||
|
||||
const toolCompareScenes: Record<string, CompareScene> = {
|
||||
workbench: "workbench",
|
||||
inpaint: "inpaint",
|
||||
camera: "camera",
|
||||
upscale: "upscale",
|
||||
watermarkRemoval: "watermark",
|
||||
dialogGenerator: "dialog",
|
||||
subtitleRemoval: "subtitle",
|
||||
digitalHuman: "digital-human",
|
||||
characterMix: "character",
|
||||
avatarConsole: "avatar",
|
||||
const toolPreviewImages: Record<string, string> = {
|
||||
inpaint: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E5%B1%80%E9%83%A8%E9%87%8D%E7%BB%98.PNG",
|
||||
camera: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E9%95%9C%E5%A4%B4%E5%AE%9E%E9%AA%8C%E5%AE%A4.PNG",
|
||||
upscale: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E5%88%86%E8%BE%A8%E7%8E%87%E6%8F%90%E5%8D%87.PNG",
|
||||
watermarkRemoval: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E5%8E%BB%E6%B0%B4%E5%8D%B0.PNG",
|
||||
dialogGenerator: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E4%BA%A4%E4%BA%92%E5%BC%8F%E5%AF%B9%E8%AF%9D%E6%A1%86%E7%94%9F%E6%88%90%E5%99%A8.PNG",
|
||||
subtitleRemoval: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E5%AD%97%E5%B9%95%E5%8E%BB%E9%99%A4.PNG",
|
||||
characterMix: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E8%A7%92%E8%89%B2%E8%BF%81%E7%A7%BB.PNG",
|
||||
avatarConsole: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/toolbox/images/%E6%95%B0%E5%AD%97%E4%BA%BA%E6%8E%A7%E5%88%B6%E5%8F%B0.PNG",
|
||||
};
|
||||
|
||||
function ToolComparePanel({ scene }: { scene: CompareScene }) {
|
||||
function ToolPreviewPanel({ toolId }: { toolId: string }) {
|
||||
const imageUrl = toolPreviewImages[toolId];
|
||||
if (!imageUrl) return null;
|
||||
|
||||
return (
|
||||
<span className={`more-card__compare more-card__compare--${scene}`} aria-hidden="true">
|
||||
<span className="more-card__compare-labels">
|
||||
<span>Before</span>
|
||||
<span>After</span>
|
||||
</span>
|
||||
<span className="more-card__compare-stage">
|
||||
<span className="more-card__compare-side more-card__compare-side--before">
|
||||
<span className="more-card__scene-subject" />
|
||||
<span className="more-card__scene-detail" />
|
||||
<span className="more-card__scene-overlay" />
|
||||
</span>
|
||||
<span className="more-card__compare-divider">
|
||||
<span />
|
||||
</span>
|
||||
<span className="more-card__compare-side more-card__compare-side--after">
|
||||
<span className="more-card__scene-subject" />
|
||||
<span className="more-card__scene-detail" />
|
||||
<span className="more-card__scene-overlay" />
|
||||
</span>
|
||||
<span className="more-card__preview" aria-hidden="true">
|
||||
<span className="more-card__preview-frame">
|
||||
<img src={imageUrl} alt="" loading="lazy" decoding="async" />
|
||||
</span>
|
||||
<img className="more-card__preview-popover" src={imageUrl} alt="" loading="lazy" decoding="async" />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const tools: MoreTool[] = [
|
||||
{ id: "workbench", title: "图片工作台", text: "融合、修复、局部增强", useCase: "适合商品图精修、创意合成和局部画面重做", tags: ["热门", "一站式", "商品图"], icon: <EditOutlined />, category: "image", imageTool: "workbench", ready: true, featured: true },
|
||||
{ id: "inpaint", title: "局部重绘", text: "修掉瑕疵、替换物体、重做局部画面", useCase: "适合快速处理商品瑕疵、人物细节和背景杂物", tags: ["新手推荐", "精修"], icon: <HighlightOutlined />, category: "image", imageTool: "inpaint", ready: true },
|
||||
{ id: "camera", title: "镜头实验室", text: "快速生成俯拍、特写、广角等商业镜头", useCase: "适合做产品主图、种草图和不同机位方案", tags: ["电商常用", "镜头"], icon: <CameraOutlined />, category: "image", imageTool: "camera", ready: true },
|
||||
{ id: "upscale", title: "分辨率提升", text: "把低清图片或视频提升到可交付质感", useCase: "适合修复旧素材、放大商品图和增强短视频清晰度", tags: ["高清", "交付前"], icon: <ColumnWidthOutlined />, category: "image", target: "resolutionUpscale", ready: true },
|
||||
{ id: "watermarkRemoval", title: "去水印", text: "智能去除图片水印、文字和遮挡元素", useCase: "适合整理素材、清理参考图和恢复画面干净度", tags: ["素材清理", "高频"], icon: <DeleteOutlined />, category: "image", target: "watermarkRemoval", ready: true },
|
||||
{ id: "dialogGenerator", title: "交互式对话框生成器", text: "上传背景图，快速制作可拖拽编辑的对话框", useCase: "适合剧情海报、社媒截图和角色对白设计", tags: ["内容创作", "可编辑"], icon: <MessageOutlined />, category: "image", target: "dialogGenerator", ready: true },
|
||||
{ id: "subtitleRemoval", title: "字幕去除", text: "擦除视频字幕，让画面重新变干净", useCase: "适合二创前素材整理、短视频重剪和画面修复", tags: ["视频增强", "素材清理"], icon: <DeleteOutlined />, category: "video", target: "subtitleRemoval", ready: true },
|
||||
{ id: "digitalHuman", title: "数字人", text: "用一张人像和音频生成口播视频", useCase: "适合品牌讲解、课程口播和带货短视频", tags: ["热门", "口播", "视频"], icon: <CustomerServiceOutlined />, category: "video", target: "digitalHuman", ready: true, featured: true },
|
||||
{ id: "characterMix", title: "角色迁移", text: "把人物图迁移到参考视频的动作里", useCase: "适合角色短片、动作复刻和虚拟人内容生产", tags: ["角色视频", "动作"], icon: <SwapOutlined />, category: "video", target: "characterMix", ready: true },
|
||||
{ id: "avatarConsole", title: "数字人控制台", text: "管理形象、播报、互动与接入配置", useCase: "适合持续运营数字人、配置品牌形象和复用口播模板", tags: ["运营台", "企业"], icon: <DashboardOutlined />, category: "video", target: "avatarConsole", ready: true },
|
||||
];
|
||||
|
||||
interface FeaturedTool {
|
||||
id: string;
|
||||
title: string;
|
||||
desc: string;
|
||||
kicker: string;
|
||||
steps: string[];
|
||||
outcome: string;
|
||||
icon: ReactNode;
|
||||
imageTool?: WebImageWorkbenchTool;
|
||||
target?: WebViewKey;
|
||||
category: ToolCategory;
|
||||
gradient: string;
|
||||
function getPreviewClassName(toolId: string) {
|
||||
return toolPreviewImages[toolId] ? " more-card--has-preview" : " more-card--no-preview";
|
||||
}
|
||||
|
||||
const featuredTools: FeaturedTool[] = [
|
||||
const tools: MoreTool[] = [
|
||||
{
|
||||
id: "workbench",
|
||||
title: "图片工作台",
|
||||
desc: "从一张素材开始，完成精修、合成和二次创作。",
|
||||
kicker: "图片精修工作流",
|
||||
steps: ["上传素材", "局部修复", "高清导出"],
|
||||
outcome: "适合商品图、海报图和创意视觉",
|
||||
text: "融合、修复、局部增强",
|
||||
useCase: "适合商品图精修、创意合成和局部画面重做",
|
||||
tags: ["热门", "一站式", "商品图"],
|
||||
icon: <EditOutlined />,
|
||||
imageTool: "workbench",
|
||||
category: "image",
|
||||
gradient: "linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.06))",
|
||||
imageTool: "workbench",
|
||||
ready: true,
|
||||
},
|
||||
{
|
||||
id: "inpaint",
|
||||
title: "局部重绘",
|
||||
text: "修掉瑕疵、替换物体、重做局部画面",
|
||||
useCase: "适合快速处理商品瑕疵、人物细节和背景杂物",
|
||||
tags: ["新手推荐", "精修"],
|
||||
icon: <HighlightOutlined />,
|
||||
category: "image",
|
||||
imageTool: "inpaint",
|
||||
ready: true,
|
||||
},
|
||||
{
|
||||
id: "camera",
|
||||
title: "镜头实验室",
|
||||
text: "快速生成俯拍、特写、广角等商业镜头",
|
||||
useCase: "适合做产品主图、种草图和不同机位方案",
|
||||
tags: ["电商常用", "镜头"],
|
||||
icon: <CameraOutlined />,
|
||||
category: "image",
|
||||
imageTool: "camera",
|
||||
ready: true,
|
||||
},
|
||||
{
|
||||
id: "upscale",
|
||||
title: "分辨率提升",
|
||||
text: "把低清图片或视频提升到可交付质感",
|
||||
useCase: "适合修复旧素材、放大商品图和增强短视频清晰度",
|
||||
tags: ["高清", "交付前"],
|
||||
icon: <ColumnWidthOutlined />,
|
||||
category: "image",
|
||||
target: "resolutionUpscale",
|
||||
ready: true,
|
||||
},
|
||||
{
|
||||
id: "watermarkRemoval",
|
||||
title: "去水印",
|
||||
text: "智能去除图片水印、文字和遮挡元素",
|
||||
useCase: "适合整理素材、清理参考图和恢复画面干净度",
|
||||
tags: ["素材清理", "高频"],
|
||||
icon: <DeleteOutlined />,
|
||||
category: "image",
|
||||
target: "watermarkRemoval",
|
||||
ready: true,
|
||||
},
|
||||
{
|
||||
id: "dialogGenerator",
|
||||
title: "交互式对话框生成器",
|
||||
text: "上传背景图，快速制作可拖拽编辑的对话框",
|
||||
useCase: "适合剧情海报、社媒截图和角色对白设计",
|
||||
tags: ["内容创作", "可编辑"],
|
||||
icon: <MessageOutlined />,
|
||||
category: "image",
|
||||
target: "dialogGenerator",
|
||||
ready: true,
|
||||
},
|
||||
{
|
||||
id: "subtitleRemoval",
|
||||
title: "字幕去除",
|
||||
text: "擦除视频字幕，让画面重新变干净",
|
||||
useCase: "适合二创前素材整理、短视频重剪和画面修复",
|
||||
tags: ["视频增强", "素材清理"],
|
||||
icon: <DeleteOutlined />,
|
||||
category: "video",
|
||||
target: "subtitleRemoval",
|
||||
ready: true,
|
||||
},
|
||||
{
|
||||
id: "digitalHuman",
|
||||
title: "数字人",
|
||||
desc: "用参考人像和音频，快速生成可交付口播视频。",
|
||||
kicker: "口播视频工作流",
|
||||
steps: ["选择人像", "上传音频", "生成视频"],
|
||||
outcome: "适合品牌讲解、课程和带货短视频",
|
||||
text: "用一张人像和音频生成口播视频",
|
||||
useCase: "适合品牌讲解、课程口播和带货短视频",
|
||||
tags: ["热门", "口播", "视频"],
|
||||
icon: <CustomerServiceOutlined />,
|
||||
target: "digitalHuman",
|
||||
category: "video",
|
||||
gradient: "linear-gradient(135deg, rgba(13, 148, 136, 0.12), rgba(6, 182, 212, 0.06))",
|
||||
target: "digitalHuman",
|
||||
ready: true,
|
||||
},
|
||||
{
|
||||
id: "characterMix",
|
||||
title: "角色迁移",
|
||||
text: "把人物图迁移到参考视频的动作里",
|
||||
useCase: "适合角色短片、动作复刻和虚拟人内容生产",
|
||||
tags: ["角色视频", "动作"],
|
||||
icon: <SwapOutlined />,
|
||||
category: "video",
|
||||
target: "characterMix",
|
||||
ready: true,
|
||||
},
|
||||
{
|
||||
id: "avatarConsole",
|
||||
title: "数字人控制台",
|
||||
text: "管理形象、播报、互动与接入配置",
|
||||
useCase: "适合持续运营数字人、配置品牌形象和复用口播模板",
|
||||
tags: ["运营台", "企业"],
|
||||
icon: <DashboardOutlined />,
|
||||
category: "video",
|
||||
target: "avatarConsole",
|
||||
ready: true,
|
||||
},
|
||||
];
|
||||
|
||||
const categoryLabels: Record<ToolCategory, string> = {
|
||||
image: "图像创作",
|
||||
video: "视频生成",
|
||||
video: "视频创作",
|
||||
};
|
||||
|
||||
const categoryIcons: Record<ToolCategory, ReactNode> = {
|
||||
@@ -162,6 +198,20 @@ const filters: { key: FilterKey; label: string }[] = [
|
||||
{ key: "upcoming", label: "即将上线" },
|
||||
];
|
||||
|
||||
const coreToolIds = new Set(["workbench", "inpaint", "watermarkRemoval"]);
|
||||
|
||||
const coreToolGradients: Record<string, string> = {
|
||||
workbench: "linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.06))",
|
||||
inpaint: "linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.055))",
|
||||
watermarkRemoval: "linear-gradient(135deg, rgba(16, 185, 129, 0.13), rgba(var(--accent-rgb), 0.055))",
|
||||
};
|
||||
|
||||
const coreToolSteps: Record<string, string[]> = {
|
||||
workbench: ["上传素材", "局部修复", "高清导出"],
|
||||
inpaint: ["选定区域", "描述修改", "生成结果"],
|
||||
watermarkRemoval: ["上传素材", "智能识别", "干净导出"],
|
||||
};
|
||||
|
||||
const RECENT_STORAGE_KEY = "omniai:more-recent-tools";
|
||||
const MAX_RECENT = 4;
|
||||
|
||||
@@ -169,7 +219,9 @@ function getRecentToolIds(): string[] {
|
||||
try {
|
||||
const raw = localStorage.getItem(RECENT_STORAGE_KEY);
|
||||
return raw ? JSON.parse(raw) : [];
|
||||
} catch { return []; }
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function pushRecentToolId(id: string) {
|
||||
@@ -199,39 +251,29 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
|
||||
}
|
||||
}, [onOpenImageTool, onSelectView]);
|
||||
|
||||
const openFeaturedTool = useCallback((tool: FeaturedTool) => {
|
||||
pushRecentToolId(tool.id);
|
||||
setRecentIds(getRecentToolIds());
|
||||
if (tool.imageTool && onOpenImageTool) {
|
||||
onOpenImageTool(tool.imageTool);
|
||||
return;
|
||||
}
|
||||
if (tool.target && onSelectView) {
|
||||
onSelectView(tool.target);
|
||||
}
|
||||
}, [onOpenImageTool, onSelectView]);
|
||||
|
||||
const filteredTools = tools.filter((t) => {
|
||||
if (t.featured) return false;
|
||||
const filteredTools = tools.filter((tool) => {
|
||||
if (coreToolIds.has(tool.id)) return false;
|
||||
if (filter === "all") return true;
|
||||
if (filter === "upcoming") return !t.ready;
|
||||
return t.category === filter;
|
||||
if (filter === "upcoming") return !tool.ready;
|
||||
return tool.category === filter;
|
||||
});
|
||||
|
||||
const filterCounts: Record<FilterKey, number> = {
|
||||
all: tools.filter((t) => !t.featured).length,
|
||||
image: tools.filter((t) => !t.featured && t.category === "image").length,
|
||||
video: tools.filter((t) => !t.featured && t.category === "video").length,
|
||||
upcoming: tools.filter((t) => !t.featured && !t.ready).length,
|
||||
all: tools.filter((tool) => !coreToolIds.has(tool.id)).length,
|
||||
image: tools.filter((tool) => !coreToolIds.has(tool.id) && tool.category === "image").length,
|
||||
video: tools.filter((tool) => !coreToolIds.has(tool.id) && tool.category === "video").length,
|
||||
upcoming: tools.filter((tool) => !coreToolIds.has(tool.id) && !tool.ready).length,
|
||||
};
|
||||
|
||||
const recentTools = recentIds
|
||||
.map((id) => tools.find((t) => t.id === id))
|
||||
.filter((t): t is MoreTool => Boolean(t) && (t?.ready ?? false));
|
||||
.map((id) => tools.find((tool) => tool.id === id))
|
||||
.filter((tool): tool is MoreTool => Boolean(tool) && (tool?.ready ?? false));
|
||||
|
||||
const groupedTools = filteredTools.reduce<Record<ToolCategory, MoreTool[]>>((acc, t) => {
|
||||
if (!acc[t.category]) acc[t.category] = [];
|
||||
acc[t.category].push(t);
|
||||
const coreTools = tools.filter((tool) => coreToolIds.has(tool.id));
|
||||
|
||||
const groupedTools = filteredTools.reduce<Record<ToolCategory, MoreTool[]>>((acc, tool) => {
|
||||
if (!acc[tool.category]) acc[tool.category] = [];
|
||||
acc[tool.category].push(tool);
|
||||
return acc;
|
||||
}, {} as Record<ToolCategory, MoreTool[]>);
|
||||
|
||||
@@ -247,19 +289,19 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
|
||||
</div>
|
||||
<div className="more-page-v2__header-meta" aria-label="工具盒概览">
|
||||
<span>{tools.filter((tool) => tool.ready).length} 个可用工具</span>
|
||||
<span>{featuredTools.length} 个核心入口</span>
|
||||
<span>{coreTools.length} 个核心入口</span>
|
||||
</div>
|
||||
<nav className="more-page-v2__filters" aria-label="工具分类筛选">
|
||||
{filters.map((f) => (
|
||||
{filters.map((item) => (
|
||||
<button
|
||||
key={f.key}
|
||||
key={item.key}
|
||||
type="button"
|
||||
className={filter === f.key ? "is-active" : ""}
|
||||
aria-pressed={filter === f.key}
|
||||
onClick={() => setFilter(f.key)}
|
||||
className={filter === item.key ? "is-active" : ""}
|
||||
aria-pressed={filter === item.key}
|
||||
onClick={() => setFilter(item.key)}
|
||||
>
|
||||
<span>{f.label}</span>
|
||||
<em>{filterCounts[f.key]}</em>
|
||||
<span>{item.label}</span>
|
||||
<em>{filterCounts[item.key]}</em>
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
@@ -298,27 +340,27 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
|
||||
<ThunderboltOutlined /> 核心工具
|
||||
</h2>
|
||||
<div className="more-page-v2__featured-grid">
|
||||
{featuredTools.map((tool) => (
|
||||
{coreTools.map((tool) => (
|
||||
<button
|
||||
key={tool.id}
|
||||
type="button"
|
||||
className="more-card more-card--featured"
|
||||
style={{ "--card-gradient": tool.gradient } as CSSProperties}
|
||||
aria-label={`打开核心工具：${tool.title}，${tool.desc}`}
|
||||
onClick={() => openFeaturedTool(tool)}
|
||||
className={`more-card more-card--featured${getPreviewClassName(tool.id)}`}
|
||||
style={{ "--card-gradient": coreToolGradients[tool.id] ?? "linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.04))" } as CSSProperties}
|
||||
aria-label={`打开核心工具：${tool.title}，${tool.text}`}
|
||||
onClick={() => openTool(tool)}
|
||||
>
|
||||
<span className="more-card__featured-icon">{tool.icon}</span>
|
||||
<div className="more-card__featured-body">
|
||||
<span className="more-card__featured-kicker">{tool.kicker}</span>
|
||||
<span className="more-card__featured-kicker">{categoryLabels[tool.category]}</span>
|
||||
<strong>{tool.title}</strong>
|
||||
<ToolComparePanel scene={toolCompareScenes[tool.id]} />
|
||||
<span className="more-card__featured-desc">{tool.desc}</span>
|
||||
<ToolPreviewPanel toolId={tool.id} />
|
||||
<span className="more-card__featured-desc">{tool.text}</span>
|
||||
<span className="more-card__steps" aria-hidden="true">
|
||||
{tool.steps.map((step) => (
|
||||
{(coreToolSteps[tool.id] ?? tool.tags.slice(0, 3)).map((step) => (
|
||||
<span key={step}>{step}</span>
|
||||
))}
|
||||
</span>
|
||||
<span className="more-card__outcome">{tool.outcome}</span>
|
||||
<span className="more-card__outcome">{tool.useCase}</span>
|
||||
<span className="more-card__cta">开始使用 →</span>
|
||||
</div>
|
||||
</button>
|
||||
@@ -341,7 +383,7 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
|
||||
<button
|
||||
key={tool.id}
|
||||
type="button"
|
||||
className={`more-card${tool.ready ? " more-card--ready" : " more-card--pending"}`}
|
||||
className={`more-card${tool.ready ? " more-card--ready" : " more-card--pending"}${getPreviewClassName(tool.id)}`}
|
||||
aria-label={tool.ready ? `打开工具：${tool.title}，${tool.text}` : `${tool.title}暂未开放`}
|
||||
onClick={() => openTool(tool)}
|
||||
disabled={!tool.ready}
|
||||
@@ -353,7 +395,7 @@ function MorePage({ onSelectView, onOpenImageTool }: MorePageProps) {
|
||||
))}
|
||||
</span>
|
||||
<strong>{tool.title}</strong>
|
||||
<ToolComparePanel scene={toolCompareScenes[tool.id]} />
|
||||
<ToolPreviewPanel toolId={tool.id} />
|
||||
<span className="more-card__desc">{tool.text}</span>
|
||||
<span className="more-card__use-case">{tool.useCase}</span>
|
||||
<span className="more-card__action">打开工具 →</span>
|
||||
|
||||
Reference in New Issue
Block a user