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:
@@ -1,4 +1,4 @@
|
||||
import { ToolOutlined } from "@ant-design/icons";
|
||||
import { CameraOutlined, PictureOutlined, ScissorOutlined, ToolOutlined, VideoCameraOutlined } from "@ant-design/icons";
|
||||
import type { WebViewKey, WebImageWorkbenchTool } from "../../types";
|
||||
import { ossAssets } from "../../data/ossAssets";
|
||||
import "../../styles/pages/toolbox.css";
|
||||
@@ -18,25 +18,25 @@ interface ToolboxSectionProps {
|
||||
const TOOLS = [
|
||||
{
|
||||
key: "image-studio",
|
||||
icon: "🎨",
|
||||
icon: <PictureOutlined />,
|
||||
name: "图片工作室",
|
||||
desc: "图片二次加工,调色裁剪特效风格迁移",
|
||||
},
|
||||
{
|
||||
key: "lens-lab",
|
||||
icon: "📷",
|
||||
icon: <CameraOutlined />,
|
||||
name: "镜头实验室",
|
||||
desc: "多视角镜头生成,不同角度与姿势",
|
||||
},
|
||||
{
|
||||
key: "digital-human",
|
||||
icon: "🧑",
|
||||
icon: <VideoCameraOutlined />,
|
||||
name: "一键数字人",
|
||||
desc: "上传图片和音频,生成数字人视频",
|
||||
},
|
||||
{
|
||||
key: "watermark-removal",
|
||||
icon: "✨",
|
||||
icon: <ScissorOutlined />,
|
||||
name: "去除水印",
|
||||
desc: "AI智能识别去除图片视频水印",
|
||||
},
|
||||
@@ -47,7 +47,7 @@ const CARDS = [
|
||||
key: "image-studio",
|
||||
title: "图片工作室",
|
||||
tag: "图片加工",
|
||||
icon: "🎨",
|
||||
icon: <PictureOutlined />,
|
||||
features: ["二次加工", "调色", "裁剪", "风格迁移"],
|
||||
targetView: "imageWorkbench" as WebViewKey,
|
||||
render: () => (
|
||||
@@ -72,7 +72,7 @@ const CARDS = [
|
||||
key: "lens-lab",
|
||||
title: "镜头实验室",
|
||||
tag: "多视角",
|
||||
icon: "📷",
|
||||
icon: <CameraOutlined />,
|
||||
features: ["正面", "45°侧", "俯拍", "仰拍", "背面"],
|
||||
targetView: "imageWorkbench" as WebViewKey,
|
||||
render: () => (
|
||||
@@ -91,7 +91,7 @@ const CARDS = [
|
||||
key: "digital-human",
|
||||
title: "一键数字人",
|
||||
tag: "视频生成",
|
||||
icon: "🧑",
|
||||
icon: <VideoCameraOutlined />,
|
||||
features: ["上传人像", "匹配音频", "唇形同步", "生成视频"],
|
||||
targetView: "digitalHuman" as WebViewKey,
|
||||
render: () => (
|
||||
@@ -122,7 +122,7 @@ const CARDS = [
|
||||
key: "watermark-removal",
|
||||
title: "去除水印",
|
||||
tag: "AI清除",
|
||||
icon: "✨",
|
||||
icon: <ScissorOutlined />,
|
||||
features: ["智能识别", "精准去除", "无损画质"],
|
||||
targetView: "watermarkRemoval" as WebViewKey,
|
||||
render: () => (
|
||||
|
||||
Reference in New Issue
Block a user