feat: 电商克隆上传交互升级、视频模型选择器图标
【电商克隆 - 商品图上传交互重构】 - 新增上传预览大图区(clone-ai-upload-preview-wrap),点击缩略图可切换预览 - 选中缩略图增加 is-active 绿色边框高亮 - 预览区显示商品图编号 + 尺寸/比例/格式信息(formatProductImageSpec) - 上传区到达 7 张上限时显示"已达上限"、阻止拖拽上传、输入框禁用 - 上传图片自动异步读取尺寸(width/height),无需等待上传完成即可展示 - 已上传素材区重构为列表头(标题+计数)+ 缩略图栈式布局 - 缩略图增加序号角标(1-7),删除按钮独立于缩略图下方 - selectedProductImageId 状态自动管理:删除/新增时自动切换到有效图片 【工作台 - 视频模型选择器图标】 - 新增 VIDEO_MODEL_ICON_URLS 映射(HappyHorse/Pixverse/Vidu/Wan/Kling) - SelectChip 组件在 chipId=video-model 时显示模型品牌图标 - getVideoModelIconUrl 支持中英文模糊匹配 【样式】 - ecommerce.css: 预览区/素材栈/缩略图选中态/上限态完整样式 - dark-green.css: 主题层微调
This commit is contained in:
@@ -3,6 +3,24 @@ import type { ReactNode } from "react";
|
||||
import type { WorkbenchOption, WorkbenchFieldGroup } from "./workbenchConstants";
|
||||
import { getRatioOptionClassName, getSettingsGridColumnsClassName } from "./workbenchReferenceUtils";
|
||||
|
||||
const VIDEO_MODEL_ICON_URLS = {
|
||||
happyHorse: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/model-icons/HappyHorse.svg",
|
||||
pixverse: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/model-icons/Pixverse.svg",
|
||||
vidu: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/model-icons/viduQ3.svg",
|
||||
wanxiang: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/model-icons/wan.svg",
|
||||
kling: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/model-icons/kling.svg",
|
||||
} as const;
|
||||
|
||||
function getVideoModelIconUrl(option: WorkbenchOption): string | null {
|
||||
const text = `${option.value} ${option.label}`.toLowerCase();
|
||||
if (text.includes("happyhorse")) return VIDEO_MODEL_ICON_URLS.happyHorse;
|
||||
if (text.includes("pixverse")) return VIDEO_MODEL_ICON_URLS.pixverse;
|
||||
if (text.includes("vidu")) return VIDEO_MODEL_ICON_URLS.vidu;
|
||||
if (text.includes("wan") || text.includes("万相")) return VIDEO_MODEL_ICON_URLS.wanxiang;
|
||||
if (text.includes("kling") || text.includes("可灵")) return VIDEO_MODEL_ICON_URLS.kling;
|
||||
return null;
|
||||
}
|
||||
|
||||
export function SelectChip({
|
||||
chipId,
|
||||
value,
|
||||
@@ -56,6 +74,7 @@ export function SelectChip({
|
||||
>
|
||||
{options.map((option, index) => {
|
||||
const active = option.value === value;
|
||||
const iconUrl = chipId === "video-model" ? getVideoModelIconUrl(option) : null;
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
@@ -71,6 +90,11 @@ export function SelectChip({
|
||||
>
|
||||
<span className="ai-workbench-select-chip__option-label">
|
||||
<span className="ai-workbench-select-chip__option-dot" aria-hidden="true" />
|
||||
{iconUrl ? (
|
||||
<span className="ai-workbench-select-chip__option-icon" aria-hidden="true">
|
||||
<img src={iconUrl} alt="" loading="lazy" />
|
||||
</span>
|
||||
) : null}
|
||||
<span className="ai-workbench-select-chip__option-copy">
|
||||
<span className="ai-workbench-select-chip__option-title">
|
||||
<span>{option.label}</span>
|
||||
@@ -261,4 +285,4 @@ export function InlineOptionChip({
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user