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

feat: 首页SaaS高端化视觉升级与图标系统统一 #31

Open
stringadmin wants to merge 2 commits from feat/home-saas-premium-and-icon-system into master
pull from: feat/home-saas-premium-and-icon-system
merge into: OmniAI:master
Conversation 0 Commits 2 Files Changed 11
+3934 -95
stringadmin commented 2026-06-10 02:22:29 +00:00
Owner
Copy Link
Copy Source

本次提交包含以下改进：

1. 首页架构精简 (HomePage.tsx)

  • 移除模型生成(ModelGenerationShowcase)专题区和相关导入
  • 移除"一站进入 OmniAI"Experience体验区及HOME_EXPERIENCE_POINTS
  • 移除未使用的导入(DashboardOutlined, ThunderboltOutlined)
  • 首页专题区从3个(model/ecommerce/script)缩减为2个(ecommerce/script)
  • 轮播卡片x偏移量从固定px值改为clamp()流式响应式单位

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

  • 按钮文案升级：新手→快速生成(副标题:新手友好)，老手→专业创作(副标题:画布工作流)，电商→电商出图(副标题:商品视觉)
  • 每个按钮新增small元素展示副标题
  • 主按钮(专业创作)渐变绿色背景+发光阴影

3. 图标系统统一 — Emoji→Ant Design (ModelGenerationShowcase.tsx + ToolboxSection.tsx)

  • ModelGenerationShowcase: emoji(🤖🖼️🎬📷🎨🛍️🌈✨)全部替换为对应的@ant-design/icons组件
  • ToolboxSection: emoji(🎨📷🧑✨)替换为PictureOutlined/CameraOutlined/VideoCameraOutlined/ScissorOutlined
  • SVG播放按钮替换为PlayCircleOutlined

4. 工具预览图补充 (MorePage.tsx)

  • 为workbench核心工具添加预览图URL
  • 为digitalHuman工具添加预览图URL

5. 合规页面按需样式加载 (App.tsx)

  • 新增COMPLIANCE_PAGE_STYLE_VIEWS集合(communityReview/communityCaseAdd/report/userAgreement/privacyPolicy)
  • 新增loadCompliancePageStyles()动态加载compliance.css
  • 只在进入合规页面时才加载对应样式，减少首屏CSS体积

6. 全局滚动操作按钮禁用 (AppShell.tsx)

  • showPageScrollActions强制设为false，全局禁用页面滚动到顶部/底部的浮动按钮

7. 首页Premium SaaS视觉升级 (home.css)

  • 全新CSS变量体系：--home-card-radius/panel-radius/section-line/panel-border/text-strong/muted/faint
  • 背景三层渐变叠加+双radial光晕(brand green+blue accent)
  • Hero区域：eyebrow胶囊标签(绿点+毛玻璃)、h1字重950+text-shadow、描述text-wrap:balance
  • 轮播卡片：流式clamp尺寸、非激活卡滤镜降饱和、激活卡高亮阴影、底部渐变分割线
  • 入口按钮组：统一三列grid布局、图标圆形背景、hover微上移
  • Feature专题页：grid网格背景+radial光晕+border分割线、Visual卡片统一玻璃态
  • Ecommerce Matrix全面重写：三栏→自适应grid、feature/item/input/ai-node/output全组件玻璃态统一风格
  • Experience区域：双radial光晕+网格纹理背景、路线卡片route-color动态渐变
  • Script Review专题区：专属高度/内边距/溢出控制，容器查询适配
  • Cookie Consent移动端优化

8. 响应式断点矩阵 (home.css)

  • 1200px: 轮播卡片尺寸压缩
  • 1100px: 专题页解除固定高度，Matrix双列布局
  • 980px: h1字号clamp、轮播缩小、Matrix紧凑间距
  • 899px: 专题页inline padding收紧
  • 720px: 入口按钮堆叠、轮播全宽、专题页解除overflow
  • 699px: Matrix grid-template-areas重构(copy+input双栏，outputs全宽)
  • 640px: Matrix单列、feature-icon/text逐级隐藏
  • 520px: output-group水平grid、output-cards三列
  • 480px: 全页面紧缩、h1最大字号、carousel最小尺寸

9. 入口按钮多轮视觉打磨 (home.css 多轮迭代)

  • Round 1: 绿色主题毛玻璃+三列grid
  • Round 2: 暗色产品路径选择器风格，actions外框+entry透明
  • Round 3: 回归深色面板风格(#101214)，保持原始配色调性

10. Ecommerce Matrix分层响应式策略 (home.css)

  • 1101px+: 三列流式宽度+dvh高度自适应
  • 900-1100px: 三列紧凑+逐步隐藏描述文字
  • 700-899px: 三列超紧凑+大量line-clamp截断
  • <699px: grid-template-areas双栏+全宽输出
  • <640px: 全单列堆叠

11. 脚本评审Showcase容器查询 (script-review-showcase.css)

  • 外层@media保留padding控制
  • 内层@container查询适配880px/720px/560px断点
  • 图表列720px以下水平进度条布局
  • 品牌区域/评分标签/流程卡片逐级压缩
本次提交包含以下改进： ## 1. 首页架构精简 (HomePage.tsx) - 移除模型生成(ModelGenerationShowcase)专题区和相关导入 - 移除"一站进入 OmniAI"Experience体验区及HOME_EXPERIENCE_POINTS - 移除未使用的导入(DashboardOutlined, ThunderboltOutlined) - 首页专题区从3个(model/ecommerce/script)缩减为2个(ecommerce/script) - 轮播卡片x偏移量从固定px值改为clamp()流式响应式单位 ## 2. 首页入口按钮重设计 (HomePage.tsx) - 按钮文案升级：新手→快速生成(副标题:新手友好)，老手→专业创作(副标题:画布工作流)，电商→电商出图(副标题:商品视觉) - 每个按钮新增small元素展示副标题 - 主按钮(专业创作)渐变绿色背景+发光阴影 ## 3. 图标系统统一 — Emoji→Ant Design (ModelGenerationShowcase.tsx + ToolboxSection.tsx) - ModelGenerationShowcase: emoji(🤖🖼️🎬📷🎨🛍️🌈✨)全部替换为对应的@ant-design/icons组件 - ToolboxSection: emoji(🎨📷🧑✨)替换为PictureOutlined/CameraOutlined/VideoCameraOutlined/ScissorOutlined - SVG播放按钮替换为PlayCircleOutlined ## 4. 工具预览图补充 (MorePage.tsx) - 为workbench核心工具添加预览图URL - 为digitalHuman工具添加预览图URL ## 5. 合规页面按需样式加载 (App.tsx) - 新增COMPLIANCE_PAGE_STYLE_VIEWS集合(communityReview/communityCaseAdd/report/userAgreement/privacyPolicy) - 新增loadCompliancePageStyles()动态加载compliance.css - 只在进入合规页面时才加载对应样式，减少首屏CSS体积 ## 6. 全局滚动操作按钮禁用 (AppShell.tsx) - showPageScrollActions强制设为false，全局禁用页面滚动到顶部/底部的浮动按钮 ## 7. 首页Premium SaaS视觉升级 (home.css) - 全新CSS变量体系：--home-card-radius/panel-radius/section-line/panel-border/text-strong/muted/faint - 背景三层渐变叠加+双radial光晕(brand green+blue accent) - Hero区域：eyebrow胶囊标签(绿点+毛玻璃)、h1字重950+text-shadow、描述text-wrap:balance - 轮播卡片：流式clamp尺寸、非激活卡滤镜降饱和、激活卡高亮阴影、底部渐变分割线 - 入口按钮组：统一三列grid布局、图标圆形背景、hover微上移 - Feature专题页：grid网格背景+radial光晕+border分割线、Visual卡片统一玻璃态 - Ecommerce Matrix全面重写：三栏→自适应grid、feature/item/input/ai-node/output全组件玻璃态统一风格 - Experience区域：双radial光晕+网格纹理背景、路线卡片route-color动态渐变 - Script Review专题区：专属高度/内边距/溢出控制，容器查询适配 - Cookie Consent移动端优化 ## 8. 响应式断点矩阵 (home.css) - 1200px: 轮播卡片尺寸压缩 - 1100px: 专题页解除固定高度，Matrix双列布局 - 980px: h1字号clamp、轮播缩小、Matrix紧凑间距 - 899px: 专题页inline padding收紧 - 720px: 入口按钮堆叠、轮播全宽、专题页解除overflow - 699px: Matrix grid-template-areas重构(copy+input双栏，outputs全宽) - 640px: Matrix单列、feature-icon/text逐级隐藏 - 520px: output-group水平grid、output-cards三列 - 480px: 全页面紧缩、h1最大字号、carousel最小尺寸 ## 9. 入口按钮多轮视觉打磨 (home.css 多轮迭代) - Round 1: 绿色主题毛玻璃+三列grid - Round 2: 暗色产品路径选择器风格，actions外框+entry透明 - Round 3: 回归深色面板风格(#101214)，保持原始配色调性 ## 10. Ecommerce Matrix分层响应式策略 (home.css) - 1101px+: 三列流式宽度+dvh高度自适应 - 900-1100px: 三列紧凑+逐步隐藏描述文字 - 700-899px: 三列超紧凑+大量line-clamp截断 - <699px: grid-template-areas双栏+全宽输出 - <640px: 全单列堆叠 ## 11. 脚本评审Showcase容器查询 (script-review-showcase.css) - 外层@media保留padding控制 - 内层@container查询适配880px/720px/560px断点 - 图表列720px以下水平进度条布局 - 品牌区域/评分标签/流程卡片逐级压缩
stringadmin added 1 commit 2026-06-10 02:22:29 +00:00
feat: 首页SaaS高端化视觉升级与图标系统统一 65bb91c551 
本次提交包含以下改进：

## 1. 首页架构精简 (HomePage.tsx)
- 移除模型生成(ModelGenerationShowcase)专题区和相关导入
- 移除"一站进入 OmniAI"Experience体验区及HOME_EXPERIENCE_POINTS
- 移除未使用的导入(DashboardOutlined, ThunderboltOutlined)
- 首页专题区从3个(model/ecommerce/script)缩减为2个(ecommerce/script)
- 轮播卡片x偏移量从固定px值改为clamp()流式响应式单位

## 2. 首页入口按钮重设计 (HomePage.tsx)
- 按钮文案升级：新手→快速生成(副标题:新手友好)，老手→专业创作(副标题:画布工作流)，电商→电商出图(副标题:商品视觉)
- 每个按钮新增small元素展示副标题
- 主按钮(专业创作)渐变绿色背景+发光阴影

## 3. 图标系统统一 — Emoji→Ant Design (ModelGenerationShowcase.tsx + ToolboxSection.tsx)
- ModelGenerationShowcase: emoji(🤖🖼️🎬📷🎨🛍️🌈✨)全部替换为对应的@ant-design/icons组件
- ToolboxSection: emoji(🎨📷🧑✨)替换为PictureOutlined/CameraOutlined/VideoCameraOutlined/ScissorOutlined
- SVG播放按钮替换为PlayCircleOutlined

## 4. 工具预览图补充 (MorePage.tsx)
- 为workbench核心工具添加预览图URL
- 为digitalHuman工具添加预览图URL

## 5. 合规页面按需样式加载 (App.tsx)
- 新增COMPLIANCE_PAGE_STYLE_VIEWS集合(communityReview/communityCaseAdd/report/userAgreement/privacyPolicy)
- 新增loadCompliancePageStyles()动态加载compliance.css
- 只在进入合规页面时才加载对应样式，减少首屏CSS体积

## 6. 全局滚动操作按钮禁用 (AppShell.tsx)
- showPageScrollActions强制设为false，全局禁用页面滚动到顶部/底部的浮动按钮

## 7. 首页Premium SaaS视觉升级 (home.css)
- 全新CSS变量体系：--home-card-radius/panel-radius/section-line/panel-border/text-strong/muted/faint
- 背景三层渐变叠加+双radial光晕(brand green+blue accent)
- Hero区域：eyebrow胶囊标签(绿点+毛玻璃)、h1字重950+text-shadow、描述text-wrap:balance
- 轮播卡片：流式clamp尺寸、非激活卡滤镜降饱和、激活卡高亮阴影、底部渐变分割线
- 入口按钮组：统一三列grid布局、图标圆形背景、hover微上移
- Feature专题页：grid网格背景+radial光晕+border分割线、Visual卡片统一玻璃态
- Ecommerce Matrix全面重写：三栏→自适应grid、feature/item/input/ai-node/output全组件玻璃态统一风格
- Experience区域：双radial光晕+网格纹理背景、路线卡片route-color动态渐变
- Script Review专题区：专属高度/内边距/溢出控制，容器查询适配
- Cookie Consent移动端优化

## 8. 响应式断点矩阵 (home.css)
- 1200px: 轮播卡片尺寸压缩
- 1100px: 专题页解除固定高度，Matrix双列布局
- 980px: h1字号clamp、轮播缩小、Matrix紧凑间距
- 899px: 专题页inline padding收紧
- 720px: 入口按钮堆叠、轮播全宽、专题页解除overflow
- 699px: Matrix grid-template-areas重构(copy+input双栏，outputs全宽)
- 640px: Matrix单列、feature-icon/text逐级隐藏
- 520px: output-group水平grid、output-cards三列
- 480px: 全页面紧缩、h1最大字号、carousel最小尺寸

## 9. 入口按钮多轮视觉打磨 (home.css 多轮迭代)
- Round 1: 绿色主题毛玻璃+三列grid
- Round 2: 暗色产品路径选择器风格，actions外框+entry透明
- Round 3: 回归深色面板风格(#101214)，保持原始配色调性

## 10. Ecommerce Matrix分层响应式策略 (home.css)
- 1101px+: 三列流式宽度+dvh高度自适应
- 900-1100px: 三列紧凑+逐步隐藏描述文字
- 700-899px: 三列超紧凑+大量line-clamp截断
- <699px: grid-template-areas双栏+全宽输出
- <640px: 全单列堆叠

## 11. 脚本评审Showcase容器查询 (script-review-showcase.css)
- 外层@media保留padding控制
- 内层@container查询适配880px/720px/560px断点
- 图表列720px以下水平进度条布局
- 品牌区域/评分标签/流程卡片逐级压缩
stringadmin added 1 commit 2026-06-10 02:22:34 +00:00
Merge branch 'master' into feat/home-saas-premium-and-icon-system f9f90bdb96
stringadmin scheduled this pull request to auto merge when all checks succeed 2026-06-10 02:22:41 +00:00
This pull request has changes conflicting with the target branch.
  • src/features/home/HomePage.tsx
View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.
git fetch -u origin feat/home-saas-premium-and-icon-system:feat/home-saas-premium-and-icon-system
git checkout feat/home-saas-premium-and-icon-system
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#31
Delete Branch "feat/home-saas-premium-and-icon-system"

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?