 ludan
|
6f54ad92c0
|
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精确调优
|
2026-06-08 18:57:07 +08:00 |
|
|
ludan
|
4530058648
|
feat: 工具盒视觉重设计 + 个人中心详情弹窗
本次提交对全部工具入口页（MorePage）进行了全面的信息架构和视觉升级，并为个人中心新增卡片点击详情弹窗。
## 工具盒（MorePage）重设计
- 工具卡片增加 useCase 使用场景说明和 tags 标签行，帮助用户快速理解每个工具的适用场景
- 核心工具（Featured）卡片新增 kicker 标题、steps 操作步骤、outcome 产出说明，强化工作流引导
- 新增 ToolComparePanel 组件，为每个工具展示 Before/After 对比示意舞台
- 分类筛选按钮新增计数徽章，展示每个分类下的工具数量
- 页面头部新增 eyebrow（AI Tool Hub）+ 工具概览统计信息
- 最近使用区域增加分类标签副标题
- 空分类场景新增引导式空状态面板
- 全面补充 aria-label 和无障碍键盘支持
## 个人中心详情弹窗
- 新增 ProfileDetailSelection 类型和 openDetailSelection/closeDetailSelection 流程
- 使用 createPortal 渲染详情弹窗，支持代表作和资产两种详情视图
- 弹窗内支持媒体预览（图片/视频）、元数据展示、下载和删除操作
- 列表卡片（代表作/项目/资产）改为 interactive-card，支持键盘 Enter/Space 激活
- 删除项目按钮增加 event.stopPropagation 防止冒泡触发卡片点击
- 弹窗打开时锁定 body 滚动，Esc 键关闭
## App.tsx 适配
- 传递 setTasks 给 ProfilePage，支持代表作移除操作
- 传递 onOpenProject 回调，支持从个人中心打开项目
## CSS 样式升级
- more.css: 全面重设页头布局（grid 三栏）、筛选胶囊、核心卡片 Before/After 舞台、步骤条、响应式适配
- profile.css: 新增详情弹窗 overlay/panel/preview 布局、交互卡片 hover/focus 状态
- dark-green.css: 工具盒与详情弹窗的深绿主题样式约 780 行
|
2026-06-07 11:42:00 +08:00 |
|
 stringadmin
|
aebe0ff827
|
chore: re-upload current web project code
|
2026-06-05 16:08:47 +08:00 |
|
|
ludan
|
ecade14bd0
|
feat: 实现全局响应式布局，适配不同设备、不同屏幕、不同分辨率
- 统一断点体系：560px(手机)、900px(平板)、1180px(小桌面)
- Shell导航：900px底部导航条、560px紧凑布局、顶栏触控优化
- 电商页面：三栏布局在平板/手机下改为单栏堆叠+横向标签切换
- 工作台：启动页编辑器全宽、消息气泡适配窄屏、建议标签换行
- 画布页面：工具栏横向滚动、节点缩小、手机全屏操作
- 社区/资产库/工具页/数字人等全部17个页面补齐响应式断点
- 新增32条@media规则，媒体查询从107条增至139条
|
2026-06-02 17:45:57 +08:00 |
|
|
stringadmin
|
bedee3ba8d
|
Initial commit: OmniAI Web Frontend
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
|
2026-06-02 12:38:01 +08:00 |
|