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

feat: 首页响应式视觉升级与全局UI细节打磨 #30

Merged
stringadmin merged 2 commits from feat/home-responsive-polish-and-ui-refinements into master 2026-06-10 02:22:18 +00:00
Conversation 0 Commits 2 Files Changed 7
+1013 -84
stringadmin commented 2026-06-10 02:22:06 +00:00
Owner
Copy Link
Copy Source

本次提交包含以下改进：

1. 首页轮播卡片响应式重构 (HomePage.tsx + home.css)

  • 将旋转木马卡片偏移量从固定px值改为clamp()流式单位，随视口宽度自适应缩放
  • 使用calc(0px - ...)替代乘法计算方向偏移，兼容CSS变量传递
  • 轮播舞台新增mask-image渐变遮罩，边缘卡片自然淡出
  • 非激活卡片增加saturate/brightness滤镜，强化主次视觉层级
  • 激活卡与非激活卡分别设置图片filter效果
  • 移除旧carousel-card-label样式
  • 多断点适配：1200px/980px/720px/480px逐级调整卡片尺寸和舞台高度

2. 首页入口按钮重设计 (HomePage.tsx + home.css)

  • 按钮文案从'新手/老手/电商'改为'快速生成/专业创作/电商出图'
  • 每个按钮新增small副标题（'新手友好'/'画布工作流'/'商品视觉'）
  • 主按钮(专业创作)使用渐变绿色背景+发光阴影，新建--primary small样式
  • 普通按钮玻璃态背景+内阴影，hover绿色边框高亮
  • 720px以下单列全宽布局，按钮居中

3. 首页全页视觉强化 (home.css)

  • Scrim层三重渐变叠加+radial光晕
  • Hero区域文字text-shadow + text-wrap: balance排版
  • Feature页面::before叠加渐变遮罩
  • Feature Visual卡片增加边框/阴影/背景三层嵌套
  • Experience区域斜向分割线装饰背景
  • Cookie Consent弹窗玻璃态重设计，移动端自适应

4. 首页工具盒区域打磨 (toolbox.css)

  • 全新CSS变量（--toolbox-radius-card/inner）
  • 工具盒整体深色渐变背景+radial光晕
  • Shell容器max-width + clamp流式padding
  • 左侧品牌区域标题/brand-icon/subtitle重设计
  • 工具列表项、工作流卡片统一玻璃态风格
  • 工具卡片hover上浮4px+绿色边框+阴影增强
  • @media: 1160px/980px/680px/420px四断点响应式

5. 工具盒卡片布局简化 (MorePage.tsx + more.css)

  • 核心工具卡片移除独立icon区域，改为单列网格布局
  • 普通工具卡片隐藏.more-card__icon（近期记录除外）
  • 预览图aspect-ratio从16/9改为4/3，内边距优化
  • 移动端移除featured-icon相关样式

6. 脚本评审Showcase响应式改造 (script-review-showcase.css)

  • 主容器从@media切换为@container查询，跟随父容器自适应
  • 新增880px/720px/560px三档container断点
  • 图表列在720px以下改为水平进度条布局（bar从垂直改水平）
  • 图表列增加卡片边框/圆角/背景
  • 品牌区域、评分标签、流程卡片逐级压缩
  • @media保留外层padding控制

7. 通知中心UI修复 (dark-green.css)

  • notification-center改为inline-flex定位锚点
  • 面板改为absolute+flex列布局，修复定位偏移
  • 列表flex自适应高度+overscroll-behavior: contain
  • 移动端面板右偏移clamp适配，箭头位置同步
  • 高度单位从vh改为dvh，避免移动浏览器地址栏干扰
本次提交包含以下改进： ## 1. 首页轮播卡片响应式重构 (HomePage.tsx + home.css) - 将旋转木马卡片偏移量从固定px值改为clamp()流式单位，随视口宽度自适应缩放 - 使用calc(0px - ...)替代乘法计算方向偏移，兼容CSS变量传递 - 轮播舞台新增mask-image渐变遮罩，边缘卡片自然淡出 - 非激活卡片增加saturate/brightness滤镜，强化主次视觉层级 - 激活卡与非激活卡分别设置图片filter效果 - 移除旧carousel-card-label样式 - 多断点适配：1200px/980px/720px/480px逐级调整卡片尺寸和舞台高度 ## 2. 首页入口按钮重设计 (HomePage.tsx + home.css) - 按钮文案从'新手/老手/电商'改为'快速生成/专业创作/电商出图' - 每个按钮新增small副标题（'新手友好'/'画布工作流'/'商品视觉'） - 主按钮(专业创作)使用渐变绿色背景+发光阴影，新建--primary small样式 - 普通按钮玻璃态背景+内阴影，hover绿色边框高亮 - 720px以下单列全宽布局，按钮居中 ## 3. 首页全页视觉强化 (home.css) - Scrim层三重渐变叠加+radial光晕 - Hero区域文字text-shadow + text-wrap: balance排版 - Feature页面::before叠加渐变遮罩 - Feature Visual卡片增加边框/阴影/背景三层嵌套 - Experience区域斜向分割线装饰背景 - Cookie Consent弹窗玻璃态重设计，移动端自适应 ## 4. 首页工具盒区域打磨 (toolbox.css) - 全新CSS变量（--toolbox-radius-card/inner） - 工具盒整体深色渐变背景+radial光晕 - Shell容器max-width + clamp流式padding - 左侧品牌区域标题/brand-icon/subtitle重设计 - 工具列表项、工作流卡片统一玻璃态风格 - 工具卡片hover上浮4px+绿色边框+阴影增强 - @media: 1160px/980px/680px/420px四断点响应式 ## 5. 工具盒卡片布局简化 (MorePage.tsx + more.css) - 核心工具卡片移除独立icon区域，改为单列网格布局 - 普通工具卡片隐藏.more-card__icon（近期记录除外） - 预览图aspect-ratio从16/9改为4/3，内边距优化 - 移动端移除featured-icon相关样式 ## 6. 脚本评审Showcase响应式改造 (script-review-showcase.css) - 主容器从@media切换为@container查询，跟随父容器自适应 - 新增880px/720px/560px三档container断点 - 图表列在720px以下改为水平进度条布局（bar从垂直改水平） - 图表列增加卡片边框/圆角/背景 - 品牌区域、评分标签、流程卡片逐级压缩 - @media保留外层padding控制 ## 7. 通知中心UI修复 (dark-green.css) - notification-center改为inline-flex定位锚点 - 面板改为absolute+flex列布局，修复定位偏移 - 列表flex自适应高度+overscroll-behavior: contain - 移动端面板右偏移clamp适配，箭头位置同步 - 高度单位从vh改为dvh，避免移动浏览器地址栏干扰
stringadmin added 1 commit 2026-06-10 02:22:06 +00:00
feat: 首页响应式视觉升级与全局UI细节打磨 52677e33f1 
本次提交包含以下改进：

## 1. 首页轮播卡片响应式重构 (HomePage.tsx + home.css)
- 将旋转木马卡片偏移量从固定px值改为clamp()流式单位，随视口宽度自适应缩放
- 使用calc(0px - ...)替代乘法计算方向偏移，兼容CSS变量传递
- 轮播舞台新增mask-image渐变遮罩，边缘卡片自然淡出
- 非激活卡片增加saturate/brightness滤镜，强化主次视觉层级
- 激活卡与非激活卡分别设置图片filter效果
- 移除旧carousel-card-label样式
- 多断点适配：1200px/980px/720px/480px逐级调整卡片尺寸和舞台高度

## 2. 首页入口按钮重设计 (HomePage.tsx + home.css)
- 按钮文案从'新手/老手/电商'改为'快速生成/专业创作/电商出图'
- 每个按钮新增small副标题（'新手友好'/'画布工作流'/'商品视觉'）
- 主按钮(专业创作)使用渐变绿色背景+发光阴影，新建--primary small样式
- 普通按钮玻璃态背景+内阴影，hover绿色边框高亮
- 720px以下单列全宽布局，按钮居中

## 3. 首页全页视觉强化 (home.css)
- Scrim层三重渐变叠加+radial光晕
- Hero区域文字text-shadow + text-wrap: balance排版
- Feature页面::before叠加渐变遮罩
- Feature Visual卡片增加边框/阴影/背景三层嵌套
- Experience区域斜向分割线装饰背景
- Cookie Consent弹窗玻璃态重设计，移动端自适应

## 4. 首页工具盒区域打磨 (toolbox.css)
- 全新CSS变量（--toolbox-radius-card/inner）
- 工具盒整体深色渐变背景+radial光晕
- Shell容器max-width + clamp流式padding
- 左侧品牌区域标题/brand-icon/subtitle重设计
- 工具列表项、工作流卡片统一玻璃态风格
- 工具卡片hover上浮4px+绿色边框+阴影增强
- @media: 1160px/980px/680px/420px四断点响应式

## 5. 工具盒卡片布局简化 (MorePage.tsx + more.css)
- 核心工具卡片移除独立icon区域，改为单列网格布局
- 普通工具卡片隐藏.more-card__icon（近期记录除外）
- 预览图aspect-ratio从16/9改为4/3，内边距优化
- 移动端移除featured-icon相关样式

## 6. 脚本评审Showcase响应式改造 (script-review-showcase.css)
- 主容器从@media切换为@container查询，跟随父容器自适应
- 新增880px/720px/560px三档container断点
- 图表列在720px以下改为水平进度条布局（bar从垂直改水平）
- 图表列增加卡片边框/圆角/背景
- 品牌区域、评分标签、流程卡片逐级压缩
- @media保留外层padding控制

## 7. 通知中心UI修复 (dark-green.css)
- notification-center改为inline-flex定位锚点
- 面板改为absolute+flex列布局，修复定位偏移
- 列表flex自适应高度+overscroll-behavior: contain
- 移动端面板右偏移clamp适配，箭头位置同步
- 高度单位从vh改为dvh，避免移动浏览器地址栏干扰
stringadmin added 1 commit 2026-06-10 02:22:15 +00:00
Merge branch 'master' into feat/home-responsive-polish-and-ui-refinements 4562243fd7
stringadmin merged commit 2509925644 into master 2026-06-10 02:22:18 +00:00
stringadmin deleted branch feat/home-responsive-polish-and-ui-refinements 2026-06-10 02:22:18 +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#30
Delete Branch "feat/home-responsive-polish-and-ui-refinements"

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?