 ludan
|
52677e33f1
|
feat: 首页响应式视觉升级与全局UI细节打磨
本次提交包含以下改进：
## 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，避免移动浏览器地址栏干扰
|
2026-06-09 14:22:37 +08:00 |
|
|
ludan
|
6f54ad92c0
|
feat: 工具盒卡片预览图替换与响应式视觉优化
本次提交包含以下改进：
## 1. 工具卡片真实预览图替换 (MorePage.tsx)
- 移除原有的CSS绘制Before/After对比图(ToolComparePanel/CompareScene)
- 新增ToolPreviewPanel组件，使用OSS真实截图展示每个工具的效果预览
- 建立toolPreviewImages映射表，为8个工具分别配置预览图URL
- 预览图支持hover悬浮放大效果(popover)，桌面端鼠标悬停时展示大图
- 触摸设备通过@media (hover: none)隐藏popover，避免移动端误触
## 2. 核心工具区重构 (MorePage.tsx)
- 移除FeaturedTool独立接口和featuredTools数组，统一到tools体系
- 新增coreToolIds集合标记核心工具(workbench/inpaint/watermarkRemoval)
- 新增coreToolGradients和coreToolSteps独立配置每张核心卡的渐变和步骤
- 移除openFeaturedTool，统一使用openTool处理所有工具点击
- 核心卡片kick er改为显示分类标签(图像创作/视频创作)
- 视频生成分类标签更名为"视频创作"
## 3. 工具卡片视觉升级 (more.css)
- 新增CSS变量体系：--more-card-surface/surface-strong/border/border-strong
- 核心工具卡：三列网格布局、渐变背景叠加、预览图16:9占位区
- 普通工具卡：增大最小高度至392px、radial-gradient光晕、增强边框
- 卡片预览图：aspect-ratio容器、内边框光效、::after渐变叠加层
- Hover悬浮popover：从卡片底部弹出大图，160ms过渡动画
- CTA按钮强化：渐变背景、内阴影高光、font-weight 850
- :active状态按压反馈(translateY(0)消除位移)
- 阴影系统升级：更深、更柔和的阴影层次
## 4. Prompt案例弹窗响应式重构 (workbench.css)
- 720px断点：从垂直堆叠改为水平左右分栏布局(1.08:0.92)
- 侧边栏从底部面板移至右侧，带左分割线和投影
- 420px断点：紧凑水平分栏(0.9:1.1)、更小字号和间距
- 弹窗增加边框和圆角、关闭按钮毛玻璃效果
- 作者信息采用grid布局、描述文本line-clamp截断
## 5. 响应式细节完善
- more.css 860px: 双列核心卡、增大预览图、调整间距
- more.css 520px: 单列布局、筛选标签横向滚动、CTA按钮全宽
- workbench.css: 各断点prompt-case-modal精确调优
|
2026-06-08 18:57:07 +08:00 |
|
|
ludan
|
4530058648
|
feat: 工具盒视觉重设计 + 个人中心详情弹窗
本次提交对全部工具入口页（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 行
|
2026-06-07 11:42:00 +08:00 |
|
 stringadmin
|
aebe0ff827
|
chore: re-upload current web project code
|
2026-06-05 16:08:47 +08:00 |
|
|
ludan
|
ecade14bd0
|
feat: 实现全局响应式布局，适配不同设备、不同屏幕、不同分辨率
- 统一断点体系：560px(手机)、900px(平板)、1180px(小桌面)
- Shell导航：900px底部导航条、560px紧凑布局、顶栏触控优化
- 电商页面：三栏布局在平板/手机下改为单栏堆叠+横向标签切换
- 工作台：启动页编辑器全宽、消息气泡适配窄屏、建议标签换行
- 画布页面：工具栏横向滚动、节点缩小、手机全屏操作
- 社区/资产库/工具页/数字人等全部17个页面补齐响应式断点
- 新增32条@media规则，媒体查询从107条增至139条
|
2026-06-02 17:45:57 +08:00 |
|
|
stringadmin
|
bedee3ba8d
|
Initial commit: OmniAI Web Frontend
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
|
2026-06-02 12:38:01 +08:00 |
|