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

feat: 工具盒视觉重设计 + 个人中心详情弹窗 #22

Merged
stringadmin merged 1 commits from feat/tool-hub-redesign-and-profile-detail into master 2026-06-08 03:05:48 +00:00
Conversation 0 Commits 1 Files Changed 6
+2514 -111
stringadmin commented 2026-06-08 03:03:56 +00:00
Owner
Copy Link
Copy Source

本次提交对全部工具入口页（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 行
本次提交对全部工具入口页（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 行
stringadmin added 1 commit 2026-06-08 03:03:56 +00:00
feat: 工具盒视觉重设计 + 个人中心详情弹窗 4530058648 
本次提交对全部工具入口页（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 行
stringadmin merged commit c1266169d7 into master 2026-06-08 03:05:48 +00:00
stringadmin deleted branch feat/tool-hub-redesign-and-profile-detail 2026-06-08 03:05:48 +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#22
Delete Branch "feat/tool-hub-redesign-and-profile-detail"

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?