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

本次提交包含以下改进:

## 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以下水平进度条布局
- 品牌区域/评分标签/流程卡片逐级压缩
This commit is contained in:
2026-06-09 18:45:57 +08:00
parent 52677e33f1
commit 65bb91c551
11 changed files with 3934 additions and 95 deletions
+16
View File
@@ -132,14 +132,27 @@ const LEGACY_PAGE_STYLE_VIEWS = new Set<WebViewKey>([
"characterMix",
"more",
]);
const COMPLIANCE_PAGE_STYLE_VIEWS = new Set<WebViewKey>([
"communityReview",
"communityCaseAdd",
"report",
"userAgreement",
"privacyPolicy",
]);
let legacyPageStylesPromise: Promise<unknown> | null = null;
let compliancePageStylesPromise: Promise<unknown> | null = null;
function loadLegacyPageStyles(): Promise<unknown> {
legacyPageStylesPromise ??= import("./styles/pages/legacy-pages.css");
return legacyPageStylesPromise;
}
function loadCompliancePageStyles(): Promise<unknown> {
compliancePageStylesPromise ??= import("./styles/pages/compliance.css");
return compliancePageStylesPromise;
}
function normalizeViewKey(rawView: string): WebViewKey {
const normalized =
rawView === "profile" || rawView === "auth"
@@ -378,6 +391,9 @@ function App() {
if (LEGACY_PAGE_STYLE_VIEWS.has(activeView) || ecommerceEverMounted) {
void loadLegacyPageStyles();
}
if (COMPLIANCE_PAGE_STYLE_VIEWS.has(activeView)) {
void loadCompliancePageStyles();
}
}, [activeView, ecommerceEverMounted]);
// Dismiss boot splash after first render