1394 lines
52 KiB
TypeScript
1394 lines
52 KiB
TypeScript
import {
|
||
CloseOutlined,
|
||
CloudUploadOutlined,
|
||
FileImageOutlined,
|
||
MenuFoldOutlined,
|
||
MenuUnfoldOutlined,
|
||
SettingOutlined,
|
||
} from "@ant-design/icons";
|
||
import { useEffect, useMemo, useRef, useState, type ChangeEvent, type DragEvent } from "react";
|
||
import type { WebViewKey } from "../../types";
|
||
import ImageMentionMenu, { getImageMentionQuery, insertImageMentionValue, type MentionImageOption } from "../ecommerce/ImageMentionMenu";
|
||
import "../../styles/pages/ecommerce.css";
|
||
import "../../styles/pages/size-template.css";
|
||
import "../../styles/pages/local-theme-parity.css";
|
||
|
||
interface SizeTemplatePageProps {
|
||
isAuthenticated?: boolean;
|
||
onOpenMore?: () => void;
|
||
onOpenEcommerce?: () => void;
|
||
onSelectView?: (view: WebViewKey) => void;
|
||
}
|
||
|
||
interface SizeTemplatePreset {
|
||
title: string;
|
||
group: string;
|
||
category: string;
|
||
mainSpec: string;
|
||
ratio: string;
|
||
ratioCss: string;
|
||
limit: string;
|
||
summary: string;
|
||
details: string[];
|
||
tone: "green" | "cyan" | "violet" | "amber";
|
||
}
|
||
|
||
interface SizeTemplateSizeOption {
|
||
label: string;
|
||
mainSpec: string;
|
||
ratio: string;
|
||
ratioCss: string;
|
||
}
|
||
|
||
interface SizeTemplateUploadImage {
|
||
id: string;
|
||
src: string;
|
||
name: string;
|
||
}
|
||
|
||
const sizeTemplateGroups = [
|
||
{ key: "socialCn", label: "社交/内容平台" },
|
||
{ key: "socialGlobal", label: "国际社交平台" },
|
||
{ key: "ecommerce", label: "电商平台" },
|
||
{ key: "id", label: "证件照/官方证件" },
|
||
];
|
||
|
||
const socialContentPlatformOptions = [
|
||
{ label: "微信公众号", category: "微信公众号" },
|
||
{ label: "小红书", category: "小红书" },
|
||
{ label: "抖音", category: "抖音/TikTok" },
|
||
{ label: "B站", category: "B站" },
|
||
{ label: "微博", category: "微博" },
|
||
];
|
||
|
||
const internationalSocialPlatformOptions = [
|
||
{ label: "Instagram", category: "Instagram" },
|
||
{ label: "YouTube", category: "YouTube" },
|
||
{ label: "Twitter/X", category: "Twitter/X" },
|
||
{ label: "Facebook", category: "Facebook" },
|
||
{ label: "LinkedIn", category: "LinkedIn" },
|
||
];
|
||
|
||
const ecommercePlatformOptions = [
|
||
{ label: "淘宝/天猫", category: "淘宝/天猫" },
|
||
{ label: "京东", category: "京东" },
|
||
{ label: "拼多多", category: "拼多多" },
|
||
{ label: "亚马逊", category: "亚马逊" },
|
||
{ label: "虾皮 Shopee/Lazada", category: "虾皮 Shopee/Lazada" },
|
||
];
|
||
|
||
const idPhotoPlatformOptions = [
|
||
{ label: "常规证件照", category: "常规证件照" },
|
||
{ label: "各国签证 / 护照电子照", category: "各国签证/护照电子照" },
|
||
{ label: "考试报名照片", category: "考试报名照片" },
|
||
{ label: "求职相关", category: "求职相关" },
|
||
];
|
||
|
||
const wechatTypeOptions = [
|
||
{ label: "头条封面", title: "微信公众号头条封面" },
|
||
{ label: "次条封面", title: "微信公众号次条封面" },
|
||
{ label: "正文图", title: "微信公众号正文图" },
|
||
];
|
||
|
||
const xiaohongshuTypeOptions = [
|
||
{ label: "笔记封面", title: "小红书笔记封面" },
|
||
{ label: "头像", title: "小红书头像" },
|
||
];
|
||
|
||
const douyinTypeOptions = [
|
||
{ label: "视频封面", title: "抖音/TikTok 视频封面" },
|
||
{ label: "头像", title: "抖音/TikTok 头像" },
|
||
];
|
||
|
||
const bilibiliTypeOptions = [
|
||
{ label: "视频封面", title: "B站视频封面" },
|
||
{ label: "头像", title: "B站头像" },
|
||
{ label: "专栏配图", title: "B站专栏配图" },
|
||
];
|
||
|
||
const weiboTypeOptions = [
|
||
{ label: "正文图", title: "微博正文图" },
|
||
{ label: "动图", title: "微博动图" },
|
||
{ label: "头像", title: "微博头像" },
|
||
{ label: "背景图", title: "微博背景图" },
|
||
];
|
||
|
||
const instagramTypeOptions = [
|
||
{ label: "常规帖子", title: "Instagram 常规帖子" },
|
||
{ label: "动态 / Reels 封面", title: "Instagram 动态/Reels 封面" },
|
||
{ label: "头像", title: "Instagram 头像" },
|
||
];
|
||
|
||
const youtubeTypeOptions = [
|
||
{ label: "视频缩略图", title: "YouTube 视频缩略图" },
|
||
{ label: "频道横幅", title: "YouTube 频道横幅" },
|
||
{ label: "频道头像", title: "YouTube 频道头像" },
|
||
];
|
||
|
||
const twitterTypeOptions = [
|
||
{ label: "推文图", title: "Twitter/X 推文图" },
|
||
{ label: "头部图", title: "Twitter/X 头部图" },
|
||
{ label: "卡片图", title: "Twitter/X 卡片图" },
|
||
{ label: "头像", title: "Twitter/X 头像" },
|
||
];
|
||
|
||
const facebookTypeOptions = [
|
||
{ label: "帖子图", title: "Facebook 帖子图" },
|
||
{ label: "桌面封面", title: "Facebook 桌面封面" },
|
||
{ label: "移动端封面", title: "Facebook 移动端封面" },
|
||
{ label: "故事", title: "Facebook 故事" },
|
||
{ label: "群组封面", title: "Facebook 群组封面" },
|
||
{ label: "头像", title: "Facebook 头像" },
|
||
];
|
||
|
||
const linkedInTypeOptions = [
|
||
{ label: "帖子图", title: "LinkedIn 帖子图" },
|
||
{ label: "文章封面", title: "LinkedIn 文章封面" },
|
||
{ label: "个人背景图", title: "LinkedIn 个人背景图" },
|
||
{ label: "个人头像", title: "LinkedIn 个人头像" },
|
||
{ label: "企业 Logo", title: "LinkedIn 企业 Logo" },
|
||
{ label: "企业横幅", title: "LinkedIn 企业横幅" },
|
||
];
|
||
|
||
const taobaoTypeOptions = [
|
||
{ label: "主图 / SKU 图", title: "淘宝/天猫主图/SKU图" },
|
||
{ label: "详情页", title: "淘宝/天猫详情页" },
|
||
];
|
||
|
||
const jingdongTypeOptions = [
|
||
{ label: "主图 / SKU 图", title: "京东主图/SKU图" },
|
||
{ label: "详情页", title: "京东详情页" },
|
||
];
|
||
|
||
const pinduoduoTypeOptions = [
|
||
{ label: "主图", title: "拼多多主图" },
|
||
{ label: "详情页", title: "拼多多详情页" },
|
||
];
|
||
|
||
const amazonTypeOptions = [{ label: "主图", title: "亚马逊主图" }];
|
||
|
||
const shopeeLazadaTypeOptions = [{ label: "商品主图", title: "虾皮 Shopee/Lazada 商品主图" }];
|
||
|
||
const regularIdPhotoTypeOptions = [
|
||
{ label: "一寸照", title: "一寸照" },
|
||
{ label: "二寸照", title: "二寸照" },
|
||
{ label: "小二寸", title: "小二寸（护照/签证）" },
|
||
];
|
||
|
||
const visaPassportTypeOptions = [
|
||
{ label: "中国护照", title: "中国护照" },
|
||
{ label: "美国签证", title: "美国签证" },
|
||
{ label: "英国签证", title: "英国签证" },
|
||
{ label: "加拿大签证", title: "加拿大签证" },
|
||
];
|
||
|
||
const examPhotoTypeOptions = [
|
||
{ label: "国考", title: "国考报名照片" },
|
||
{ label: "英语四六级", title: "英语四六级报名照片" },
|
||
{ label: "教资", title: "教资报名照片" },
|
||
];
|
||
|
||
const jobPhotoTypeOptions = [
|
||
{ label: "简历照片", title: "简历照片" },
|
||
{ label: "LinkedIn 头像", title: "求职 LinkedIn 头像" },
|
||
];
|
||
|
||
const typeOptionsByCategory = {
|
||
微信公众号: wechatTypeOptions,
|
||
小红书: xiaohongshuTypeOptions,
|
||
"抖音/TikTok": douyinTypeOptions,
|
||
B站: bilibiliTypeOptions,
|
||
微博: weiboTypeOptions,
|
||
Instagram: instagramTypeOptions,
|
||
YouTube: youtubeTypeOptions,
|
||
"Twitter/X": twitterTypeOptions,
|
||
Facebook: facebookTypeOptions,
|
||
LinkedIn: linkedInTypeOptions,
|
||
"淘宝/天猫": taobaoTypeOptions,
|
||
京东: jingdongTypeOptions,
|
||
拼多多: pinduoduoTypeOptions,
|
||
亚马逊: amazonTypeOptions,
|
||
"虾皮 Shopee/Lazada": shopeeLazadaTypeOptions,
|
||
常规证件照: regularIdPhotoTypeOptions,
|
||
"各国签证/护照电子照": visaPassportTypeOptions,
|
||
考试报名照片: examPhotoTypeOptions,
|
||
求职相关: jobPhotoTypeOptions,
|
||
};
|
||
|
||
const sizeOptionsByPresetTitle: Record<string, SizeTemplateSizeOption[]> = {
|
||
小红书笔记封面: [
|
||
{ label: "1080×1440px", mainSpec: "1080×1440px", ratio: "3:4", ratioCss: "3 / 4" },
|
||
{ label: "1080×1080px", mainSpec: "1080×1080px", ratio: "1:1", ratioCss: "1 / 1" },
|
||
],
|
||
"Instagram 常规帖子": [
|
||
{ label: "1080×1350px", mainSpec: "1080×1350px", ratio: "4:5", ratioCss: "4 / 5" },
|
||
{ label: "1080×1080px", mainSpec: "1080×1080px", ratio: "1:1", ratioCss: "1 / 1" },
|
||
],
|
||
"淘宝/天猫详情页": [
|
||
{ label: "宽750px", mainSpec: "宽750px", ratio: "高≤1546px", ratioCss: "750 / 1546" },
|
||
{ label: "宽790px", mainSpec: "宽790px", ratio: "高≤1546px", ratioCss: "790 / 1546" },
|
||
],
|
||
拼多多主图: [
|
||
{ label: "750×352px", mainSpec: "750×352px", ratio: "750:352", ratioCss: "750 / 352" },
|
||
{ label: "800×800px", mainSpec: "800×800px", ratio: "1:1", ratioCss: "1 / 1" },
|
||
],
|
||
"虾皮 Shopee/Lazada 商品主图": [
|
||
{ label: "推荐 1024×1024px", mainSpec: "1024×1024px", ratio: "1:1", ratioCss: "1 / 1" },
|
||
{ label: "基础 800×800px", mainSpec: "800×800px", ratio: "1:1", ratioCss: "1 / 1" },
|
||
],
|
||
};
|
||
|
||
const sizeTemplatePresets: SizeTemplatePreset[] = [
|
||
{
|
||
title: "微信公众号头条封面",
|
||
group: "socialCn",
|
||
category: "微信公众号",
|
||
mainSpec: "900×383px",
|
||
ratio: "2.35:1",
|
||
ratioCss: "900 / 383",
|
||
limit: "≤5MB",
|
||
summary: "头条封面：900×383px，2.35:1，≤5MB。",
|
||
details: ["次条封面：200×200px，1:1", "正文图：宽≤1080px，单张≤10MB"],
|
||
tone: "green",
|
||
},
|
||
{
|
||
title: "微信公众号次条封面",
|
||
group: "socialCn",
|
||
category: "微信公众号",
|
||
mainSpec: "200×200px",
|
||
ratio: "1:1",
|
||
ratioCss: "1 / 1",
|
||
limit: "按平台限制导出",
|
||
summary: "次条封面：200×200px，1:1。",
|
||
details: ["头条封面：900×383px，2.35:1，≤5MB", "正文图：宽≤1080px，单张≤10MB"],
|
||
tone: "green",
|
||
},
|
||
{
|
||
title: "微信公众号正文图",
|
||
group: "socialCn",
|
||
category: "微信公众号",
|
||
mainSpec: "宽≤1080px",
|
||
ratio: "自适应",
|
||
ratioCss: "4 / 3",
|
||
limit: "单张≤10MB",
|
||
summary: "正文图：宽≤1080px，单张≤10MB。",
|
||
details: ["头条封面：900×383px，2.35:1，≤5MB", "次条封面：200×200px，1:1"],
|
||
tone: "green",
|
||
},
|
||
{
|
||
title: "小红书笔记封面",
|
||
group: "socialCn",
|
||
category: "小红书",
|
||
mainSpec: "1080×1440px",
|
||
ratio: "3:4",
|
||
ratioCss: "3 / 4",
|
||
limit: "单张≤20MB",
|
||
summary: "笔记封面：1080×1440px（3:4），单张≤20MB。",
|
||
details: ["可在尺寸中切换 1080×1080px，1:1", "头像：400×400px，1:1"],
|
||
tone: "cyan",
|
||
},
|
||
{
|
||
title: "小红书头像",
|
||
group: "socialCn",
|
||
category: "小红书",
|
||
mainSpec: "400×400px",
|
||
ratio: "1:1",
|
||
ratioCss: "1 / 1",
|
||
limit: "按平台限制导出",
|
||
summary: "头像：400×400px，1:1。",
|
||
details: ["笔记封面：1080×1440px（3:4）、1080×1080px（1:1），单张≤20MB"],
|
||
tone: "cyan",
|
||
},
|
||
{
|
||
title: "抖音/TikTok 视频封面",
|
||
group: "socialCn",
|
||
category: "抖音/TikTok",
|
||
mainSpec: "1080×1920px",
|
||
ratio: "9:16",
|
||
ratioCss: "9 / 16",
|
||
limit: "≤2MB",
|
||
summary: "视频封面：1080×1920px，9:16，≤2MB（上下 15% 区域会被遮挡）。",
|
||
details: ["头像：200×200px，1:1"],
|
||
tone: "violet",
|
||
},
|
||
{
|
||
title: "抖音/TikTok 头像",
|
||
group: "socialCn",
|
||
category: "抖音/TikTok",
|
||
mainSpec: "200×200px",
|
||
ratio: "1:1",
|
||
ratioCss: "1 / 1",
|
||
limit: "按平台限制导出",
|
||
summary: "头像：200×200px，1:1。",
|
||
details: ["视频封面：1080×1920px，9:16，≤2MB（上下 15% 区域会被遮挡）"],
|
||
tone: "violet",
|
||
},
|
||
{
|
||
title: "B站视频封面",
|
||
group: "socialCn",
|
||
category: "B站",
|
||
mainSpec: "1146×717px",
|
||
ratio: "16:10",
|
||
ratioCss: "1146 / 717",
|
||
limit: "≤2MB",
|
||
summary: "视频封面：1146×717px，16:10，≤2MB。",
|
||
details: ["头像：300×300px，1:1", "专栏配图：宽度≤1000px"],
|
||
tone: "amber",
|
||
},
|
||
{
|
||
title: "B站头像",
|
||
group: "socialCn",
|
||
category: "B站",
|
||
mainSpec: "300×300px",
|
||
ratio: "1:1",
|
||
ratioCss: "1 / 1",
|
||
limit: "按平台限制导出",
|
||
summary: "头像：300×300px，1:1。",
|
||
details: ["视频封面：1146×717px，16:10，≤2MB", "专栏配图：宽度≤1000px"],
|
||
tone: "amber",
|
||
},
|
||
{
|
||
title: "B站专栏配图",
|
||
group: "socialCn",
|
||
category: "B站",
|
||
mainSpec: "宽度≤1000px",
|
||
ratio: "自适应",
|
||
ratioCss: "4 / 3",
|
||
limit: "按平台限制导出",
|
||
summary: "专栏配图：宽度≤1000px。",
|
||
details: ["视频封面：1146×717px，16:10，≤2MB", "头像：300×300px，1:1"],
|
||
tone: "amber",
|
||
},
|
||
{
|
||
title: "微博正文图",
|
||
group: "socialCn",
|
||
category: "微博",
|
||
mainSpec: "推荐宽1080px",
|
||
ratio: "长图≤1:3",
|
||
ratioCss: "4 / 3",
|
||
limit: "单张≤20MB",
|
||
summary: "正文图：推荐宽 1080px，单张≤20MB；长图比例≤1:3。",
|
||
details: ["动图：≤5MB", "头像：200×200px，1:1", "背景图：920×300px"],
|
||
tone: "green",
|
||
},
|
||
{
|
||
title: "微博动图",
|
||
group: "socialCn",
|
||
category: "微博",
|
||
mainSpec: "按内容导出",
|
||
ratio: "自适应",
|
||
ratioCss: "4 / 3",
|
||
limit: "≤5MB",
|
||
summary: "动图：≤5MB。",
|
||
details: ["正文图：推荐宽 1080px，单张≤20MB；长图比例≤1:3", "头像：200×200px，1:1", "背景图：920×300px"],
|
||
tone: "green",
|
||
},
|
||
{
|
||
title: "微博头像",
|
||
group: "socialCn",
|
||
category: "微博",
|
||
mainSpec: "200×200px",
|
||
ratio: "1:1",
|
||
ratioCss: "1 / 1",
|
||
limit: "按平台限制导出",
|
||
summary: "头像：200×200px，1:1。",
|
||
details: ["正文图：推荐宽 1080px，单张≤20MB；长图比例≤1:3", "动图：≤5MB", "背景图：920×300px"],
|
||
tone: "green",
|
||
},
|
||
{
|
||
title: "微博背景图",
|
||
group: "socialCn",
|
||
category: "微博",
|
||
mainSpec: "920×300px",
|
||
ratio: "920:300",
|
||
ratioCss: "920 / 300",
|
||
limit: "按平台限制导出",
|
||
summary: "背景图：920×300px。",
|
||
details: ["正文图：推荐宽 1080px，单张≤20MB；长图比例≤1:3", "动图：≤5MB", "头像：200×200px，1:1"],
|
||
tone: "green",
|
||
},
|
||
{
|
||
title: "Instagram 常规帖子",
|
||
group: "socialGlobal",
|
||
category: "Instagram",
|
||
mainSpec: "1080×1350px",
|
||
ratio: "4:5",
|
||
ratioCss: "4 / 5",
|
||
limit: "图片≤1MB",
|
||
summary: "常规帖子：1080×1350px（4:5 推荐），图片≤1MB。",
|
||
details: ["可在尺寸中切换 1080×1080px，1:1", "动态 / Reels 封面：1080×1920px，9:16", "头像：320×320px，1:1"],
|
||
tone: "cyan",
|
||
},
|
||
{
|
||
title: "Instagram 动态/Reels 封面",
|
||
group: "socialGlobal",
|
||
category: "Instagram",
|
||
mainSpec: "1080×1920px",
|
||
ratio: "9:16",
|
||
ratioCss: "9 / 16",
|
||
limit: "图片≤1MB",
|
||
summary: "动态 / Reels 封面：1080×1920px，9:16，图片≤1MB。",
|
||
details: ["常规帖子：1080×1350px（4:5 推荐）或 1080×1080px（1:1）", "头像：320×320px，1:1"],
|
||
tone: "cyan",
|
||
},
|
||
{
|
||
title: "Instagram 头像",
|
||
group: "socialGlobal",
|
||
category: "Instagram",
|
||
mainSpec: "320×320px",
|
||
ratio: "1:1",
|
||
ratioCss: "1 / 1",
|
||
limit: "图片≤1MB",
|
||
summary: "头像：320×320px，1:1，图片≤1MB。",
|
||
details: ["常规帖子：1080×1350px（4:5 推荐）或 1080×1080px（1:1）", "动态 / Reels 封面：1080×1920px，9:16"],
|
||
tone: "cyan",
|
||
},
|
||
{
|
||
title: "YouTube 视频缩略图",
|
||
group: "socialGlobal",
|
||
category: "YouTube",
|
||
mainSpec: "1280×720px",
|
||
ratio: "16:9",
|
||
ratioCss: "16 / 9",
|
||
limit: "宽≥640px，≤2MB",
|
||
summary: "视频缩略图：1280×720px，16:9，宽≥640px，≤2MB。",
|
||
details: ["频道横幅：2560×1440px；安全区 1546×423px", "频道头像：800×800px，1:1"],
|
||
tone: "amber",
|
||
},
|
||
{
|
||
title: "YouTube 频道横幅",
|
||
group: "socialGlobal",
|
||
category: "YouTube",
|
||
mainSpec: "2560×1440px",
|
||
ratio: "16:9",
|
||
ratioCss: "16 / 9",
|
||
limit: "安全区1546×423px",
|
||
summary: "频道横幅：2560×1440px；安全区 1546×423px。",
|
||
details: ["视频缩略图：1280×720px，16:9，宽≥640px，≤2MB", "频道头像：800×800px，1:1"],
|
||
tone: "amber",
|
||
},
|
||
{
|
||
title: "YouTube 频道头像",
|
||
group: "socialGlobal",
|
||
category: "YouTube",
|
||
mainSpec: "800×800px",
|
||
ratio: "1:1",
|
||
ratioCss: "1 / 1",
|
||
limit: "按平台限制导出",
|
||
summary: "频道头像：800×800px，1:1。",
|
||
details: ["视频缩略图：1280×720px，16:9，宽≥640px，≤2MB", "频道横幅：2560×1440px；安全区 1546×423px"],
|
||
tone: "amber",
|
||
},
|
||
{
|
||
title: "Twitter/X 推文图",
|
||
group: "socialGlobal",
|
||
category: "Twitter/X",
|
||
mainSpec: "1600×900px",
|
||
ratio: "16:9",
|
||
ratioCss: "16 / 9",
|
||
limit: "GIF≤15MB，视频≤512MB",
|
||
summary: "推文图：1600×900px，16:9。素材限制：GIF≤15MB，视频≤512MB。",
|
||
details: ["头部图：1500×500px，3:1", "卡片图：800×418px", "头像：400×400px，1:1"],
|
||
tone: "violet",
|
||
},
|
||
{
|
||
title: "Twitter/X 头部图",
|
||
group: "socialGlobal",
|
||
category: "Twitter/X",
|
||
mainSpec: "1500×500px",
|
||
ratio: "3:1",
|
||
ratioCss: "3 / 1",
|
||
limit: "GIF≤15MB，视频≤512MB",
|
||
summary: "头部图：1500×500px，3:1。素材限制：GIF≤15MB，视频≤512MB。",
|
||
details: ["推文图：1600×900px，16:9", "卡片图：800×418px", "头像：400×400px，1:1"],
|
||
tone: "violet",
|
||
},
|
||
{
|
||
title: "Twitter/X 卡片图",
|
||
group: "socialGlobal",
|
||
category: "Twitter/X",
|
||
mainSpec: "800×418px",
|
||
ratio: "800:418",
|
||
ratioCss: "800 / 418",
|
||
limit: "GIF≤15MB，视频≤512MB",
|
||
summary: "卡片图：800×418px。素材限制：GIF≤15MB，视频≤512MB。",
|
||
details: ["推文图：1600×900px，16:9", "头部图：1500×500px，3:1", "头像：400×400px，1:1"],
|
||
tone: "violet",
|
||
},
|
||
{
|
||
title: "Twitter/X 头像",
|
||
group: "socialGlobal",
|
||
category: "Twitter/X",
|
||
mainSpec: "400×400px",
|
||
ratio: "1:1",
|
||
ratioCss: "1 / 1",
|
||
limit: "GIF≤15MB，视频≤512MB",
|
||
summary: "头像：400×400px，1:1。素材限制：GIF≤15MB，视频≤512MB。",
|
||
details: ["推文图：1600×900px，16:9", "头部图：1500×500px，3:1", "卡片图：800×418px"],
|
||
tone: "violet",
|
||
},
|
||
{
|
||
title: "Facebook 帖子图",
|
||
group: "socialGlobal",
|
||
category: "Facebook",
|
||
mainSpec: "1200×630px",
|
||
ratio: "1.91:1",
|
||
ratioCss: "1200 / 630",
|
||
limit: "按平台压缩规则导出",
|
||
summary: "帖子图：1200×630px。",
|
||
details: ["桌面封面：820×312px", "移动端封面：640×360px", "故事：1080×1920px，9:16", "群组封面：1640×856px", "头像：170×170px，1:1"],
|
||
tone: "green",
|
||
},
|
||
{
|
||
title: "Facebook 桌面封面",
|
||
group: "socialGlobal",
|
||
category: "Facebook",
|
||
mainSpec: "820×312px",
|
||
ratio: "820:312",
|
||
ratioCss: "820 / 312",
|
||
limit: "按平台压缩规则导出",
|
||
summary: "桌面封面：820×312px。",
|
||
details: ["帖子图：1200×630px", "移动端封面：640×360px", "故事：1080×1920px，9:16", "群组封面：1640×856px", "头像：170×170px，1:1"],
|
||
tone: "green",
|
||
},
|
||
{
|
||
title: "Facebook 移动端封面",
|
||
group: "socialGlobal",
|
||
category: "Facebook",
|
||
mainSpec: "640×360px",
|
||
ratio: "16:9",
|
||
ratioCss: "16 / 9",
|
||
limit: "按平台压缩规则导出",
|
||
summary: "移动端封面：640×360px。",
|
||
details: ["帖子图：1200×630px", "桌面封面：820×312px", "故事：1080×1920px，9:16", "群组封面：1640×856px", "头像：170×170px，1:1"],
|
||
tone: "green",
|
||
},
|
||
{
|
||
title: "Facebook 故事",
|
||
group: "socialGlobal",
|
||
category: "Facebook",
|
||
mainSpec: "1080×1920px",
|
||
ratio: "9:16",
|
||
ratioCss: "9 / 16",
|
||
limit: "按平台压缩规则导出",
|
||
summary: "故事：1080×1920px，9:16。",
|
||
details: ["帖子图：1200×630px", "桌面封面：820×312px", "移动端封面：640×360px", "群组封面：1640×856px", "头像：170×170px，1:1"],
|
||
tone: "green",
|
||
},
|
||
{
|
||
title: "Facebook 群组封面",
|
||
group: "socialGlobal",
|
||
category: "Facebook",
|
||
mainSpec: "1640×856px",
|
||
ratio: "1640:856",
|
||
ratioCss: "1640 / 856",
|
||
limit: "按平台压缩规则导出",
|
||
summary: "群组封面：1640×856px。",
|
||
details: ["帖子图：1200×630px", "桌面封面：820×312px", "移动端封面：640×360px", "故事：1080×1920px，9:16", "头像：170×170px，1:1"],
|
||
tone: "green",
|
||
},
|
||
{
|
||
title: "Facebook 头像",
|
||
group: "socialGlobal",
|
||
category: "Facebook",
|
||
mainSpec: "170×170px",
|
||
ratio: "1:1",
|
||
ratioCss: "1 / 1",
|
||
limit: "按平台压缩规则导出",
|
||
summary: "头像：170×170px，1:1。",
|
||
details: ["帖子图：1200×630px", "桌面封面：820×312px", "移动端封面：640×360px", "故事：1080×1920px，9:16", "群组封面：1640×856px"],
|
||
tone: "green",
|
||
},
|
||
{
|
||
title: "LinkedIn 帖子图",
|
||
group: "socialGlobal",
|
||
category: "LinkedIn",
|
||
mainSpec: "1200×627px",
|
||
ratio: "1.91:1",
|
||
ratioCss: "1200 / 627",
|
||
limit: "按平台压缩规则导出",
|
||
summary: "帖子图：1200×627px。",
|
||
details: ["文章封面：1200×644px", "个人背景图：1584×396px", "个人头像：400×400px，1:1", "企业 Logo：300×300px，1:1", "企业横幅：1128×191px"],
|
||
tone: "cyan",
|
||
},
|
||
{
|
||
title: "LinkedIn 文章封面",
|
||
group: "socialGlobal",
|
||
category: "LinkedIn",
|
||
mainSpec: "1200×644px",
|
||
ratio: "1200:644",
|
||
ratioCss: "1200 / 644",
|
||
limit: "按平台压缩规则导出",
|
||
summary: "文章封面：1200×644px。",
|
||
details: ["帖子图：1200×627px", "个人背景图：1584×396px", "个人头像：400×400px，1:1", "企业 Logo：300×300px，1:1", "企业横幅：1128×191px"],
|
||
tone: "cyan",
|
||
},
|
||
{
|
||
title: "LinkedIn 个人背景图",
|
||
group: "socialGlobal",
|
||
category: "LinkedIn",
|
||
mainSpec: "1584×396px",
|
||
ratio: "4:1",
|
||
ratioCss: "4 / 1",
|
||
limit: "按平台限制导出",
|
||
summary: "个人背景图：1584×396px。",
|
||
details: ["帖子图：1200×627px", "文章封面：1200×644px", "个人头像：400×400px，1:1", "企业 Logo：300×300px，1:1", "企业横幅：1128×191px"],
|
||
tone: "cyan",
|
||
},
|
||
{
|
||
title: "LinkedIn 个人头像",
|
||
group: "socialGlobal",
|
||
category: "LinkedIn",
|
||
mainSpec: "400×400px",
|
||
ratio: "1:1",
|
||
ratioCss: "1 / 1",
|
||
limit: "按平台限制导出",
|
||
summary: "个人头像：400×400px，1:1。",
|
||
details: ["帖子图：1200×627px", "文章封面：1200×644px", "个人背景图：1584×396px", "企业 Logo：300×300px，1:1", "企业横幅：1128×191px"],
|
||
tone: "cyan",
|
||
},
|
||
{
|
||
title: "LinkedIn 企业 Logo",
|
||
group: "socialGlobal",
|
||
category: "LinkedIn",
|
||
mainSpec: "300×300px",
|
||
ratio: "1:1",
|
||
ratioCss: "1 / 1",
|
||
limit: "按平台限制导出",
|
||
summary: "企业 Logo：300×300px，1:1。",
|
||
details: ["帖子图：1200×627px", "文章封面：1200×644px", "个人背景图：1584×396px", "个人头像：400×400px，1:1", "企业横幅：1128×191px"],
|
||
tone: "cyan",
|
||
},
|
||
{
|
||
title: "LinkedIn 企业横幅",
|
||
group: "socialGlobal",
|
||
category: "LinkedIn",
|
||
mainSpec: "1128×191px",
|
||
ratio: "1128:191",
|
||
ratioCss: "1128 / 191",
|
||
limit: "按平台限制导出",
|
||
summary: "企业横幅：1128×191px。",
|
||
details: ["帖子图：1200×627px", "文章封面：1200×644px", "个人背景图：1584×396px", "个人头像：400×400px，1:1", "企业 Logo：300×300px，1:1"],
|
||
tone: "cyan",
|
||
},
|
||
{
|
||
title: "淘宝/天猫主图/SKU图",
|
||
group: "ecommerce",
|
||
category: "淘宝/天猫",
|
||
mainSpec: "800×800px",
|
||
ratio: "1:1",
|
||
ratioCss: "1 / 1",
|
||
limit: "≤3MB",
|
||
summary: "主图 / SKU 图：800×800px，1:1，≤3MB。",
|
||
details: ["详情页：宽 750px/790px，单张高≤1546px"],
|
||
tone: "green",
|
||
},
|
||
{
|
||
title: "淘宝/天猫详情页",
|
||
group: "ecommerce",
|
||
category: "淘宝/天猫",
|
||
mainSpec: "宽750px",
|
||
ratio: "高≤1546px",
|
||
ratioCss: "750 / 1546",
|
||
limit: "单张高≤1546px",
|
||
summary: "详情页：宽 750px/790px，单张高≤1546px。",
|
||
details: ["主图 / SKU 图：800×800px，1:1，≤3MB"],
|
||
tone: "green",
|
||
},
|
||
{
|
||
title: "京东主图/SKU图",
|
||
group: "ecommerce",
|
||
category: "京东",
|
||
mainSpec: "800×800px",
|
||
ratio: "1:1",
|
||
ratioCss: "1 / 1",
|
||
limit: "≤1MB（白底）",
|
||
summary: "主图 / SKU 图：800×800px，1:1，≤1MB（白底）。",
|
||
details: ["详情页：宽 750px"],
|
||
tone: "cyan",
|
||
},
|
||
{
|
||
title: "京东详情页",
|
||
group: "ecommerce",
|
||
category: "京东",
|
||
mainSpec: "宽750px",
|
||
ratio: "自适应",
|
||
ratioCss: "4 / 3",
|
||
limit: "按平台限制导出",
|
||
summary: "详情页：宽 750px。",
|
||
details: ["主图 / SKU 图：800×800px，1:1，≤1MB（白底）"],
|
||
tone: "cyan",
|
||
},
|
||
{
|
||
title: "拼多多主图",
|
||
group: "ecommerce",
|
||
category: "拼多多",
|
||
mainSpec: "750×352px",
|
||
ratio: "750:352",
|
||
ratioCss: "750 / 352",
|
||
limit: "≤1MB",
|
||
summary: "主图：750×352px，≤1MB。",
|
||
details: ["可在尺寸中切换 800×800px，1:1", "详情页：宽 750px"],
|
||
tone: "amber",
|
||
},
|
||
{
|
||
title: "拼多多详情页",
|
||
group: "ecommerce",
|
||
category: "拼多多",
|
||
mainSpec: "宽750px",
|
||
ratio: "自适应",
|
||
ratioCss: "4 / 3",
|
||
limit: "按平台限制导出",
|
||
summary: "详情页：宽 750px。",
|
||
details: ["主图：750×352px、800×800px（1:1），≤1MB"],
|
||
tone: "amber",
|
||
},
|
||
{
|
||
title: "亚马逊主图",
|
||
group: "ecommerce",
|
||
category: "亚马逊",
|
||
mainSpec: "≥1600×1600px",
|
||
ratio: "1:1",
|
||
ratioCss: "1 / 1",
|
||
limit: "≤10MB（纯白底）",
|
||
summary: "主图：≥1600×1600px，1:1，≤10MB（纯白底），最小 500×500px。",
|
||
details: ["最小 500×500px"],
|
||
tone: "violet",
|
||
},
|
||
{
|
||
title: "虾皮 Shopee/Lazada 商品主图",
|
||
group: "ecommerce",
|
||
category: "虾皮 Shopee/Lazada",
|
||
mainSpec: "1024×1024px",
|
||
ratio: "1:1",
|
||
ratioCss: "1 / 1",
|
||
limit: "≤2MB",
|
||
summary: "商品主图：推荐 1024×1024px，1:1，≤2MB。",
|
||
details: ["可在尺寸中切换基础 800×800px，1:1"],
|
||
tone: "green",
|
||
},
|
||
{
|
||
title: "一寸照",
|
||
group: "id",
|
||
category: "常规证件照",
|
||
mainSpec: "295×413px",
|
||
ratio: "295:413",
|
||
ratioCss: "295 / 413",
|
||
limit: "按平台限制导出",
|
||
summary: "一寸照：295×413px。",
|
||
details: ["二寸照：413×579px", "小二寸（护照 / 签证）：413×531px"],
|
||
tone: "cyan",
|
||
},
|
||
{
|
||
title: "二寸照",
|
||
group: "id",
|
||
category: "常规证件照",
|
||
mainSpec: "413×579px",
|
||
ratio: "413:579",
|
||
ratioCss: "413 / 579",
|
||
limit: "按平台限制导出",
|
||
summary: "二寸照：413×579px。",
|
||
details: ["一寸照：295×413px", "小二寸（护照 / 签证）：413×531px"],
|
||
tone: "cyan",
|
||
},
|
||
{
|
||
title: "小二寸（护照/签证）",
|
||
group: "id",
|
||
category: "常规证件照",
|
||
mainSpec: "413×531px",
|
||
ratio: "413:531",
|
||
ratioCss: "413 / 531",
|
||
limit: "按平台限制导出",
|
||
summary: "小二寸（护照 / 签证）：413×531px。",
|
||
details: ["一寸照：295×413px", "二寸照：413×579px"],
|
||
tone: "cyan",
|
||
},
|
||
{
|
||
title: "中国护照",
|
||
group: "id",
|
||
category: "各国签证/护照电子照",
|
||
mainSpec: "354×472px",
|
||
ratio: "354:472",
|
||
ratioCss: "354 / 472",
|
||
limit: "≤40KB（白底）",
|
||
summary: "中国护照：354×472px，≤40KB（白底）。",
|
||
details: ["美国签证：600×600px，1:1，≤240KB", "英国签证：600×750px", "加拿大签证：420×540px"],
|
||
tone: "violet",
|
||
},
|
||
{
|
||
title: "美国签证",
|
||
group: "id",
|
||
category: "各国签证/护照电子照",
|
||
mainSpec: "600×600px",
|
||
ratio: "1:1",
|
||
ratioCss: "1 / 1",
|
||
limit: "≤240KB",
|
||
summary: "美国签证：600×600px，1:1，≤240KB。",
|
||
details: ["中国护照：354×472px，≤40KB（白底）", "英国签证：600×750px", "加拿大签证：420×540px"],
|
||
tone: "violet",
|
||
},
|
||
{
|
||
title: "英国签证",
|
||
group: "id",
|
||
category: "各国签证/护照电子照",
|
||
mainSpec: "600×750px",
|
||
ratio: "600:750",
|
||
ratioCss: "600 / 750",
|
||
limit: "按平台限制导出",
|
||
summary: "英国签证：600×750px。",
|
||
details: ["中国护照：354×472px，≤40KB（白底）", "美国签证：600×600px，1:1，≤240KB", "加拿大签证：420×540px"],
|
||
tone: "violet",
|
||
},
|
||
{
|
||
title: "加拿大签证",
|
||
group: "id",
|
||
category: "各国签证/护照电子照",
|
||
mainSpec: "420×540px",
|
||
ratio: "420:540",
|
||
ratioCss: "420 / 540",
|
||
limit: "按平台限制导出",
|
||
summary: "加拿大签证：420×540px。",
|
||
details: ["中国护照：354×472px，≤40KB（白底）", "美国签证：600×600px，1:1，≤240KB", "英国签证：600×750px"],
|
||
tone: "violet",
|
||
},
|
||
{
|
||
title: "国考报名照片",
|
||
group: "id",
|
||
category: "考试报名照片",
|
||
mainSpec: "宽130px",
|
||
ratio: "按公告",
|
||
ratioCss: "4 / 5",
|
||
limit: "≤30KB",
|
||
summary: "国考：宽 130px，≤30KB。",
|
||
details: ["英语四六级：192×144px，≤20KB", "教资：宽 114-480px，≤200KB"],
|
||
tone: "amber",
|
||
},
|
||
{
|
||
title: "英语四六级报名照片",
|
||
group: "id",
|
||
category: "考试报名照片",
|
||
mainSpec: "192×144px",
|
||
ratio: "4:3",
|
||
ratioCss: "4 / 3",
|
||
limit: "≤20KB",
|
||
summary: "英语四六级：192×144px，≤20KB。",
|
||
details: ["国考：宽 130px，≤30KB", "教资：宽 114-480px，≤200KB"],
|
||
tone: "amber",
|
||
},
|
||
{
|
||
title: "教资报名照片",
|
||
group: "id",
|
||
category: "考试报名照片",
|
||
mainSpec: "宽114-480px",
|
||
ratio: "按公告",
|
||
ratioCss: "4 / 5",
|
||
limit: "≤200KB",
|
||
summary: "教资：宽 114-480px，≤200KB。",
|
||
details: ["国考：宽 130px，≤30KB", "英语四六级：192×144px，≤20KB"],
|
||
tone: "amber",
|
||
},
|
||
{
|
||
title: "简历照片",
|
||
group: "id",
|
||
category: "求职相关",
|
||
mainSpec: "300dpi起",
|
||
ratio: "按简历要求",
|
||
ratioCss: "4 / 5",
|
||
limit: "≤200KB（部分≤100KB）",
|
||
summary: "简历照片：≤200KB（部分≤100KB），300dpi 起。",
|
||
details: ["LinkedIn 头像：400×400px，1:1"],
|
||
tone: "green",
|
||
},
|
||
{
|
||
title: "求职 LinkedIn 头像",
|
||
group: "id",
|
||
category: "求职相关",
|
||
mainSpec: "400×400px",
|
||
ratio: "1:1",
|
||
ratioCss: "1 / 1",
|
||
limit: "按平台限制导出",
|
||
summary: "LinkedIn 头像：400×400px，1:1。",
|
||
details: ["简历照片：≤200KB（部分≤100KB），300dpi 起"],
|
||
tone: "green",
|
||
},
|
||
];
|
||
|
||
function createSizeTemplateUploadItems(files: File[], remainingSlots: number): SizeTemplateUploadImage[] {
|
||
return files
|
||
.filter((file) => file.type.startsWith("image/"))
|
||
.slice(0, remainingSlots)
|
||
.map((file, index) => ({
|
||
id: `size-template-${Date.now()}-${index}-${file.name}`,
|
||
src: URL.createObjectURL(file),
|
||
name: file.name,
|
||
}));
|
||
}
|
||
|
||
function SizeTemplatePage({ onOpenEcommerce }: SizeTemplatePageProps) {
|
||
const uploadInputRef = useRef<HTMLInputElement>(null);
|
||
const requirementTextareaRef = useRef<HTMLTextAreaElement>(null);
|
||
const uploadObjectUrlsRef = useRef<string[]>([]);
|
||
const [activeGroup, setActiveGroup] = useState(sizeTemplateGroups[0]!.key);
|
||
const [activePresetTitle, setActivePresetTitle] = useState(sizeTemplatePresets[0]!.title);
|
||
const [activePanelTab, setActivePanelTab] = useState<"preset" | "detail">("preset");
|
||
const [platformDialogOpen, setPlatformDialogOpen] = useState(false);
|
||
const [typeDialogOpen, setTypeDialogOpen] = useState(false);
|
||
const [sizeDialogOpen, setSizeDialogOpen] = useState(false);
|
||
const [activeSizeOptionByTitle, setActiveSizeOptionByTitle] = useState<Record<string, string>>({});
|
||
const [uploadedImages, setUploadedImages] = useState<SizeTemplateUploadImage[]>([]);
|
||
const [isUploadDragging, setIsUploadDragging] = useState(false);
|
||
const [isSettingsCollapsed, setIsSettingsCollapsed] = useState(false);
|
||
const [requirement, setRequirement] = useState("");
|
||
const [requirementImageMentionQuery, setRequirementImageMentionQuery] = useState<string | null>(null);
|
||
|
||
const filteredTemplates = useMemo(
|
||
() => sizeTemplatePresets.filter((item) => item.group === activeGroup),
|
||
[activeGroup],
|
||
);
|
||
const selectedPreset =
|
||
filteredTemplates.find((item) => item.title === activePresetTitle) ?? filteredTemplates[0] ?? sizeTemplatePresets[0]!;
|
||
const activeGroupLabel = sizeTemplateGroups.find((item) => item.key === selectedPreset.group)?.label ?? "尺寸模板";
|
||
const platformOptions =
|
||
activeGroup === "socialCn"
|
||
? socialContentPlatformOptions
|
||
: activeGroup === "socialGlobal"
|
||
? internationalSocialPlatformOptions
|
||
: activeGroup === "ecommerce"
|
||
? ecommercePlatformOptions
|
||
: activeGroup === "id"
|
||
? idPhotoPlatformOptions
|
||
: [];
|
||
const selectedPlatformLabel =
|
||
platformOptions.length
|
||
? (platformOptions.find((item) => item.category === selectedPreset.category)?.label ?? selectedPreset.category)
|
||
: selectedPreset.category;
|
||
const typeOptions = typeOptionsByCategory[selectedPreset.category as keyof typeof typeOptionsByCategory] ?? [];
|
||
const selectedTypeLabel = typeOptions.find((option) => option.title === selectedPreset.title)?.label ?? selectedPreset.title;
|
||
const sizeOptions = sizeOptionsByPresetTitle[selectedPreset.title] ?? [];
|
||
const selectedSizeOption =
|
||
sizeOptions.find((option) => option.mainSpec === activeSizeOptionByTitle[selectedPreset.title]) ?? sizeOptions[0];
|
||
const selectedMainSpec = selectedSizeOption?.mainSpec ?? selectedPreset.mainSpec;
|
||
const selectedRatio = selectedSizeOption?.ratio ?? selectedPreset.ratio;
|
||
const primaryUploadedImage = uploadedImages[0] ?? null;
|
||
const sizeTemplateMentionImages: MentionImageOption[] = uploadedImages.map((image, index) => ({
|
||
...image,
|
||
label: `上传图 ${index + 1}`,
|
||
}));
|
||
|
||
const syncRequirementMentionQuery = (value: string, selectionStart: number | null | undefined) => {
|
||
setRequirementImageMentionQuery(sizeTemplateMentionImages.length ? getImageMentionQuery(value, selectionStart) : null);
|
||
};
|
||
|
||
const insertRequirementImageMention = (image: MentionImageOption) => {
|
||
const textarea = requirementTextareaRef.current;
|
||
const cursor = textarea?.selectionStart ?? requirement.length;
|
||
const next = insertImageMentionValue(requirement, cursor, image.name, 500);
|
||
setRequirement(next.value);
|
||
setRequirementImageMentionQuery(null);
|
||
window.requestAnimationFrame(() => {
|
||
requirementTextareaRef.current?.focus();
|
||
requirementTextareaRef.current?.setSelectionRange(next.selectionStart, next.selectionStart);
|
||
});
|
||
};
|
||
|
||
useEffect(
|
||
() => () => {
|
||
uploadObjectUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));
|
||
uploadObjectUrlsRef.current = [];
|
||
},
|
||
[],
|
||
);
|
||
|
||
const addUploadedImages = (files: File[]) => {
|
||
const remainingSlots = 7 - uploadedImages.length;
|
||
if (remainingSlots <= 0) return;
|
||
const nextImages = createSizeTemplateUploadItems(files, remainingSlots);
|
||
if (!nextImages.length) return;
|
||
uploadObjectUrlsRef.current.push(...nextImages.map((item) => item.src));
|
||
setUploadedImages((current) => [...current, ...nextImages].slice(0, 7));
|
||
};
|
||
|
||
const handleUploadChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||
const files = event.target.files;
|
||
if (!files?.length) return;
|
||
addUploadedImages(Array.from(files));
|
||
event.target.value = "";
|
||
};
|
||
|
||
const handleUploadDrop = (event: DragEvent<HTMLElement>) => {
|
||
event.preventDefault();
|
||
setIsUploadDragging(false);
|
||
const files = Array.from(event.dataTransfer.files);
|
||
if (files.length) addUploadedImages(files);
|
||
};
|
||
|
||
const removeUploadedImage = (imageId: string) => {
|
||
setUploadedImages((current) => {
|
||
const removed = current.find((item) => item.id === imageId);
|
||
if (removed) {
|
||
URL.revokeObjectURL(removed.src);
|
||
uploadObjectUrlsRef.current = uploadObjectUrlsRef.current.filter((url) => url !== removed.src);
|
||
}
|
||
return current.filter((item) => item.id !== imageId);
|
||
});
|
||
};
|
||
|
||
const selectGroup = (group: string) => {
|
||
setActiveGroup(group);
|
||
setPlatformDialogOpen(false);
|
||
setTypeDialogOpen(false);
|
||
setSizeDialogOpen(false);
|
||
const firstPreset = sizeTemplatePresets.find((item) => item.group === group);
|
||
if (firstPreset) setActivePresetTitle(firstPreset.title);
|
||
};
|
||
|
||
const selectPlatform = (category: string) => {
|
||
const nextPreset = sizeTemplatePresets.find((item) => item.group === activeGroup && item.category === category);
|
||
if (nextPreset) setActivePresetTitle(nextPreset.title);
|
||
setPlatformDialogOpen(false);
|
||
setTypeDialogOpen(false);
|
||
setSizeDialogOpen(false);
|
||
};
|
||
|
||
const selectType = (title: string) => {
|
||
setActivePresetTitle(title);
|
||
setPlatformDialogOpen(false);
|
||
setTypeDialogOpen(false);
|
||
setSizeDialogOpen(false);
|
||
};
|
||
|
||
const selectSizeOption = (mainSpec: string) => {
|
||
setActiveSizeOptionByTitle((current) => ({ ...current, [selectedPreset.title]: mainSpec }));
|
||
setPlatformDialogOpen(false);
|
||
setTypeDialogOpen(false);
|
||
setSizeDialogOpen(false);
|
||
};
|
||
|
||
return (
|
||
<section
|
||
className={`product-clone-page page-motion size-template-workbench${isSettingsCollapsed ? " is-settings-collapsed" : ""}`}
|
||
data-tool="clone"
|
||
aria-label="尺寸模板"
|
||
>
|
||
<div className="product-clone-shell">
|
||
<aside
|
||
id="size-template-settings-panel"
|
||
className="product-clone-panel"
|
||
aria-label="尺寸模板参数"
|
||
aria-hidden={isSettingsCollapsed ? true : undefined}
|
||
>
|
||
<div className="product-clone-panel__scroll clone-ai-panel size-template-settings-panel">
|
||
<section className="clone-ai-card size-template-upload-card">
|
||
<h2>
|
||
<CloudUploadOutlined />
|
||
上传商品原图
|
||
</h2>
|
||
<div
|
||
role="button"
|
||
tabIndex={0}
|
||
className={`clone-ai-upload-zone size-template-upload-zone${isUploadDragging ? " is-dragging" : ""}`}
|
||
onClick={() => uploadInputRef.current?.click()}
|
||
onKeyDown={(event) => {
|
||
if (event.target !== event.currentTarget) return;
|
||
if (event.key === "Enter" || event.key === " ") {
|
||
event.preventDefault();
|
||
uploadInputRef.current?.click();
|
||
}
|
||
}}
|
||
onDragEnter={(event) => {
|
||
event.preventDefault();
|
||
setIsUploadDragging(true);
|
||
}}
|
||
onDragOver={(event) => event.preventDefault()}
|
||
onDragLeave={() => setIsUploadDragging(false)}
|
||
onDrop={handleUploadDrop}
|
||
>
|
||
<div className="clone-ai-upload-main">
|
||
<span className="clone-ai-upload-icon">
|
||
<FileImageOutlined />
|
||
</span>
|
||
<span className="clone-ai-upload-title">拖拽或点击上传</span>
|
||
<strong>
|
||
<span aria-hidden="true">+</span>
|
||
上传图片
|
||
</strong>
|
||
<span className="clone-ai-upload-hint">同一产品，最多 7 张</span>
|
||
</div>
|
||
{uploadedImages.length ? (
|
||
<div className="clone-ai-uploaded-files size-template-uploaded-files" aria-label="已上传商品原图">
|
||
{uploadedImages.map((item) => (
|
||
<figure key={item.id} className="clone-ai-uploaded-file">
|
||
<img src={item.src} alt={item.name} />
|
||
<span className="uploaded-image-zoom" aria-hidden="true">
|
||
<img src={item.src} alt="" />
|
||
</span>
|
||
<button
|
||
type="button"
|
||
aria-label={`移除 ${item.name}`}
|
||
onClick={(event) => {
|
||
event.stopPropagation();
|
||
removeUploadedImage(item.id);
|
||
}}
|
||
>
|
||
<CloseOutlined />
|
||
</button>
|
||
</figure>
|
||
))}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
<input ref={uploadInputRef} type="file" accept="image/*" multiple onChange={handleUploadChange} />
|
||
</section>
|
||
|
||
<section className="clone-ai-card size-template-generate-card">
|
||
<h2>
|
||
<SettingOutlined />
|
||
生成设置
|
||
</h2>
|
||
<div className="clone-ai-settings-section">
|
||
<span className="clone-ai-settings-label">生成内容</span>
|
||
<div className="clone-ai-tag-group size-template-category-grid" role="tablist" aria-label="尺寸模板分类">
|
||
{sizeTemplateGroups.map((group) => (
|
||
<button
|
||
key={group.key}
|
||
type="button"
|
||
role="tab"
|
||
aria-selected={activeGroup === group.key}
|
||
className={activeGroup === group.key ? "is-active" : ""}
|
||
onClick={() => selectGroup(group.key)}
|
||
>
|
||
{group.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="clone-ai-settings-section">
|
||
<span className="clone-ai-settings-label">基础信息</span>
|
||
<div className="clone-ai-select-group">
|
||
{[
|
||
{ key: "platform", label: "平台", value: selectedPlatformLabel },
|
||
{ key: "type", label: "类型", value: typeOptions.length > 0 ? selectedTypeLabel : selectedPreset.title },
|
||
{ key: "size", label: "尺寸", value: selectedMainSpec },
|
||
{ key: "ratio", label: "比例", value: selectedRatio },
|
||
].map((item) => {
|
||
const isPlatformSelect = platformOptions.length > 0 && item.key === "platform";
|
||
const isTypeSelect = typeOptions.length > 0 && item.key === "type";
|
||
const isSizeSelect = sizeOptions.length > 0 && item.key === "size";
|
||
const isClickable = isPlatformSelect || isTypeSelect || isSizeSelect;
|
||
return (
|
||
<div
|
||
key={item.label}
|
||
className={`clone-ai-basic-select size-template-static-field${isClickable ? " is-clickable" : ""}`}
|
||
>
|
||
<button
|
||
type="button"
|
||
aria-expanded={
|
||
isClickable
|
||
? isPlatformSelect
|
||
? platformDialogOpen
|
||
: isTypeSelect
|
||
? typeDialogOpen
|
||
: sizeDialogOpen
|
||
: undefined
|
||
}
|
||
aria-haspopup={isClickable ? "dialog" : undefined}
|
||
onClick={
|
||
isPlatformSelect
|
||
? () => {
|
||
setTypeDialogOpen(false);
|
||
setSizeDialogOpen(false);
|
||
setPlatformDialogOpen((current) => !current);
|
||
}
|
||
: isTypeSelect
|
||
? () => {
|
||
setPlatformDialogOpen(false);
|
||
setSizeDialogOpen(false);
|
||
setTypeDialogOpen((current) => !current);
|
||
}
|
||
: isSizeSelect
|
||
? () => {
|
||
setPlatformDialogOpen(false);
|
||
setTypeDialogOpen(false);
|
||
setSizeDialogOpen((current) => !current);
|
||
}
|
||
: undefined
|
||
}
|
||
>
|
||
<span>{item.label}</span>
|
||
<strong>{item.value}</strong>
|
||
<i aria-hidden="true" />
|
||
</button>
|
||
{isPlatformSelect && platformDialogOpen ? (
|
||
<div className="size-template-platform-dialog" role="dialog" aria-label="选择平台">
|
||
{platformOptions.map((option) => (
|
||
<button
|
||
key={option.category}
|
||
type="button"
|
||
className={selectedPreset.category === option.category ? "is-active" : ""}
|
||
onClick={() => selectPlatform(option.category)}
|
||
>
|
||
{option.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
) : null}
|
||
{isTypeSelect && typeDialogOpen ? (
|
||
<div className="size-template-platform-dialog" role="dialog" aria-label="选择类型">
|
||
{typeOptions.map((option) => (
|
||
<button
|
||
key={option.title}
|
||
type="button"
|
||
className={selectedPreset.title === option.title ? "is-active" : ""}
|
||
onClick={() => selectType(option.title)}
|
||
>
|
||
{option.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
) : null}
|
||
{isSizeSelect && sizeDialogOpen ? (
|
||
<div className="size-template-platform-dialog" role="dialog" aria-label="选择尺寸">
|
||
{sizeOptions.map((option) => (
|
||
<button
|
||
key={option.mainSpec}
|
||
type="button"
|
||
className={selectedMainSpec === option.mainSpec ? "is-active" : ""}
|
||
onClick={() => selectSizeOption(option.mainSpec)}
|
||
>
|
||
{option.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="clone-ai-model-panel size-template-option-panel" aria-label="平台尺寸设置">
|
||
<div className="clone-ai-model-tabs" role="tablist" aria-label="尺寸模板设置类型">
|
||
<button
|
||
type="button"
|
||
className={activePanelTab === "preset" ? "is-active" : ""}
|
||
aria-selected={activePanelTab === "preset"}
|
||
onClick={() => setActivePanelTab("preset")}
|
||
>
|
||
平台尺寸
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={activePanelTab === "detail" ? "is-active" : ""}
|
||
aria-selected={activePanelTab === "detail"}
|
||
onClick={() => setActivePanelTab("detail")}
|
||
>
|
||
补充规格
|
||
</button>
|
||
</div>
|
||
<div className="clone-ai-model-scroll">
|
||
{activePanelTab === "preset" ? (
|
||
<div className="clone-ai-model-scene-grid size-template-option-grid">
|
||
{filteredTemplates.map((item) => (
|
||
<button
|
||
key={item.title}
|
||
type="button"
|
||
className={selectedPreset.title === item.title ? "is-active" : ""}
|
||
aria-pressed={selectedPreset.title === item.title}
|
||
onClick={() => {
|
||
setActivePresetTitle(item.title);
|
||
setPlatformDialogOpen(false);
|
||
setTypeDialogOpen(false);
|
||
setSizeDialogOpen(false);
|
||
}}
|
||
>
|
||
<span aria-hidden="true" />
|
||
{item.title}
|
||
</button>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="clone-ai-model-scene-grid size-template-option-grid">
|
||
{selectedPreset.details.map((item) => (
|
||
<button key={item} type="button" className="is-active">
|
||
<span aria-hidden="true" />
|
||
{item}
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</section>
|
||
|
||
<button type="button" className="clone-ai-generate size-template-submit" onClick={onOpenEcommerce}>
|
||
✦ 开始生成
|
||
</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<button
|
||
type="button"
|
||
className="clone-ai-settings-toggle"
|
||
onClick={() => setIsSettingsCollapsed((current) => !current)}
|
||
aria-label={isSettingsCollapsed ? "展开设置面板" : "收起设置面板"}
|
||
aria-controls="size-template-settings-panel"
|
||
aria-expanded={!isSettingsCollapsed}
|
||
title={isSettingsCollapsed ? "展开设置面板" : "收起设置面板"}
|
||
>
|
||
{isSettingsCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
||
</button>
|
||
|
||
<main className="product-clone-preview clone-ai-preview size-template-preview" aria-label="尺寸模板预览">
|
||
<header className="clone-ai-preview-header size-template-preview-header">
|
||
<strong>预览</strong>
|
||
<span>
|
||
上传商品图，AI 即刻生成 <b>符合多电商平台规范</b> 的高转化率商品素材。
|
||
</span>
|
||
</header>
|
||
|
||
<section className={`clone-ai-empty-state size-template-empty-state${primaryUploadedImage ? " has-upload" : ""}`} aria-live="polite">
|
||
{primaryUploadedImage ? (
|
||
<img className="size-template-empty-state__image" src={primaryUploadedImage.src} alt={primaryUploadedImage.name} />
|
||
) : (
|
||
<FileImageOutlined />
|
||
)}
|
||
<strong>{primaryUploadedImage ? "已添加参考图" : "等待生成"}</strong>
|
||
<span>{primaryUploadedImage ? `已上传 ${uploadedImages.length}/7 张，开始生成后将套用当前尺寸。` : "上传商品原图并填写信息后，AI 将在这里展示生成结果。"}</span>
|
||
</section>
|
||
|
||
<section className="clone-ai-bottom-input" aria-label="信息详情">
|
||
<div className="clone-ai-input-wrapper">
|
||
<textarea
|
||
ref={requirementTextareaRef}
|
||
value={requirement}
|
||
onChange={(event) => {
|
||
const nextValue = event.target.value.slice(0, 500);
|
||
setRequirement(nextValue);
|
||
syncRequirementMentionQuery(nextValue, event.target.selectionStart);
|
||
}}
|
||
onClick={(event) => syncRequirementMentionQuery(requirement, event.currentTarget.selectionStart)}
|
||
onKeyUp={(event) => syncRequirementMentionQuery(requirement, event.currentTarget.selectionStart)}
|
||
onKeyDown={(event) => {
|
||
if (event.key === "Escape") setRequirementImageMentionQuery(null);
|
||
}}
|
||
maxLength={500}
|
||
placeholder="补充尺寸用途，例如平台、商品类型、是否需要留白或安全区"
|
||
/>
|
||
{requirementImageMentionQuery !== null && sizeTemplateMentionImages.length ? (
|
||
<ImageMentionMenu images={sizeTemplateMentionImages} query={requirementImageMentionQuery} onSelect={insertRequirementImageMention} />
|
||
) : null}
|
||
<button type="button" className="clone-ai-send-button" onClick={onOpenEcommerce} aria-label="应用到电商生成">
|
||
↑
|
||
</button>
|
||
</div>
|
||
<span className="clone-ai-char-count">{requirement.length}/500</span>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
export default SizeTemplatePage;
|