OmniAI/omniai-web
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: 工具盒卡片预览图替换与响应式视觉优化 #28

Merged
stringadmin merged 2 commits from feat/toolbox-preview-cards-and-responsive-polish into master 2026-06-08 10:59:27 +00:00
Conversation 0 Commits 2 Files Changed 3
+769 -265
stringadmin commented 2026-06-08 10:59:16 +00:00
Owner
Copy Link
Copy Source

本次提交包含以下改进：

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精确调优
本次提交包含以下改进： ## 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精确调优
stringadmin added 1 commit 2026-06-08 10:59:16 +00:00
feat: 工具盒卡片预览图替换与响应式视觉优化 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精确调优
stringadmin added 1 commit 2026-06-08 10:59:21 +00:00
Merge branch 'master' into feat/toolbox-preview-cards-and-responsive-polish 1049fa3218
stringadmin merged commit 1e756808c1 into master 2026-06-08 10:59:27 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
audrey duchen ludan stringadmin
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: OmniAI/omniai-web#28
Delete Branch "feat/toolbox-preview-cards-and-responsive-polish"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?