ludan
6f54ad92c0
本次提交包含以下改进： ## 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精确调优