Compare commits

...

19 Commits

Author SHA1 Message Date
ludan 2a2ab701e3 feat: 工具子页面隐藏Topbar、限制素材上传数量、修复移动端布局
CI / verify (pull_request) Waiting to run
本次修改主要包含以下变更:

一、工具子页面隐藏Topbar(App.tsx / EcommercePage.tsx):
- 新增 onWorkspaceChromeChange 回调,EcommercePage 向 App 层通知当前是否为工具子页面
- 工具子页面(智能抠图/快速详情/水印移除/翻译/图片编辑/一键套图/文案/一键视频等)自动隐藏顶部导航栏
- 组件卸载时重置 isToolPage 状态,避免切换页面时残留

二、素材上传数量限制(EcommercePage.tsx):
- maxCloneProductImages 从 20 张调整为 10 张
- 上传超限时 toast 提示用户「最多上传 10 张素材」
- 新增 AppstoreAddOutlined、HighlightOutlined、TranslationOutlined、PlayCircleOutlined 等图标导入

三、移动端布局修复(ecommerce.css + ecommerce-standalone.css):
- 指令栏容器宽度限制为 calc(100vw - 24px),防止溢出
- 素材缩略图区域改为横向滚动,隐藏滚动条
- 缩略图固定 flex-shrink: 0 防止被压缩(58px / 54px)
- 工具栏宽度 100%,box-sizing 修复
- 新增工具页面相关样式规则

变更文件:
- src/App.tsx (+26)
- src/features/ecommerce/EcommercePage.tsx (+66)
- src/styles/ecommerce-standalone.css (+209)
- src/styles/pages/ecommerce.css (+198)
2026-06-18 13:23:55 +08:00
stringadmin cf88bc05e4 Merge pull request 'Codex/ecommerce history sync' (#29) from codex/ecommerce-history-sync into main
CI / verify (push) Waiting to run
Reviewed-on: #29
2026-06-18 02:20:06 +00:00
stringadmin a2ccf290e5 Fix ecommerce generation history sync
CI / verify (pull_request) Waiting to run
2026-06-18 10:16:40 +08:00
stringadmin da9c5c2fca Merge codex/main-latest-20260615-030000: 一键视频工具 + 快捷操作配色修复 2026-06-17 21:33:50 +08:00
stringadmin 0cba426788 Merge origin/main into main-merge-work 2026-06-17 21:27:24 +08:00
stringadmin 71860a1b52 Merge pull request 'Feat/ecommerce scenario tabs' (#27) from feat/ecommerce-scenario-tabs into main
Reviewed-on: #27
2026-06-17 13:21:21 +00:00
stringadmin 1adcda08b3 build: 引入 ESLint 防回潮基建 + 清理存量未使用 import 2026-06-17 20:53:23 +08:00
ludan ec31a37b9c Merge remote-tracking branch 'origin/main' into feat/ecommerce-scenario-tabs 2026-06-17 19:01:09 +08:00
ludan 3d72e166ed perf: 优化电商全场景素材上传体验,先本地预览再后台上传 OSS
- 新增 createLocalImageItems 同步创建本地 blob 预览项

- 新增 uploadImageItem 后台异步上传 OSS 并读取图片尺寸

- 改造商品主图、套图、参考图、服饰图、详情图 5 个上传入口

- 选择文件后立即渲染缩略图,OSS 上传在后台并行进行

- 上传完成后按 id 替换为 OSS URL,释放本地 blob URL
2026-06-17 18:47:10 +08:00
stringadmin a0018353ec refactor: 电商平台规格+市场语言改由 API 下发 (AGENTS.md 规则4完全合规) 2026-06-17 18:37:26 +08:00
stringadmin 22ef03839d refactor: EcommercePage 改用 platformRules.ts,删除平台/市场/语言常量内联副本 2026-06-17 17:58:20 +08:00
stringadmin d9604b99dc refactor: OSS base URL 与 logo URL 改由 API 下发 (AGENTS.md 合规) 2026-06-17 17:47:51 +08:00
stringadmin 6e45f05e69 Merge pull request 'feat: 电商创作场景支持带货视频时长、移动端隐藏设置按钮、优化平台选择器样式' (#26) from feat/ecommerce-scenario-tabs into main
Reviewed-on: #26
2026-06-17 09:44:00 +00:00
ludan 6dd2a107fd feat: 电商创作场景支持带货视频时长、移动端隐藏设置按钮、优化平台选择器样式
- 新增带货视频时长选项(5/10/15秒)及时长选择 popover

- 创作标签在移动端(<=640px)隐藏平台/语种/比例/设置/时长按钮行,仅保留文本输入框

- 重构平台选择器为单列滚动列表,移除平台 logo,统一比例/语种/平台 active 高亮样式

- 优化 composer 整体布局节奏(素材紧凑、工具栏底部固定、响应式高度)

- 调整 AI 帮写提交按钮为青色系渐变样式
2026-06-17 17:02:55 +08:00
stringadmin 2759afa176 refactor: sync clonePersistence types, extract WatermarkToolPage 2026-06-17 16:46:55 +08:00
stringadmin dfb38c21c5 refactor: unlock dev flow, dedupe EcommercePage, extract shell UI components 2026-06-17 16:37:22 +08:00
stringadmin 9729f60ea7 Merge pull request 'feat: add composer toolbelt with asset library, work mode selector, AI-powered prompt writing, and scenario settings' (#25) from feat/ecommerce-scenario-tabs into main
Reviewed-on: #25
2026-06-17 06:54:12 +00:00
ludan 2cd76ec3a5 feat: add composer toolbelt with asset library, work mode selector, AI-powered prompt writing, and scenario settings
- EcommercePage.tsx (+260):
  - Add ComposerAssetTabKey and ComposerWorkModeKey types; extend ComposerMenuKey with assetLibrary/workMode/aiWrite
  - Add composerTooltip/composerAssetTab/composerWorkMode/aiWriteDraft state
  - Add composerAssetTabs (最近保存/套图配方/模特库), composerWorkModeOptions (快捷/思考), and composerRatioOptions (7 presets with display dimensions)
  - Add scenarioSettingsKeys and scenarioAdvancedSettingsKeys for conditional settings panel display
  - Add PaperPlaneRight icon import for AI writing send button
  - Reorder salesVideo tag position in commerceScenarioOptions; emoji icons replace Ant Design icons
  - handleCommerceScenarioClick: second click on active scenario now deselects (sets null) instead of toggling visibility
  - shouldShowScenarioSettings: settings panel visible for poster/mainImage/model/scene/festival/salesVideo but not popular
  - renderComposerAssetPanel: asset library popover with tab selector (recent/recipe/model) and grid display
  - renderComposerWorkModePanel: work mode radio popover with description cards
  - renderComposerAiWritePanel: AI prompt auto-complete panel with text input and send button; applyAiWriteSuggestion merges keyword + mode hint + platform context into composer prompt
  - Toolbar restructured with .ecom-command-tool pill buttons (upload/assets/mode/AI write) in .ecom-command-composer-actions

- ecommerce-standalone.css (+937):
  - Composer toolbar: horizontal flex row with space-between, overflow-x scroll with hidden scrollbar
  - .ecom-command-tool: 40px pill-shaped buttons with gradient backgrounds, hover/active/dragging states with glow transition and lift
  - .ecom-command-tool--upload: icon+label layout for upload button
  - .ecom-command-tool--icon: 40px square icon-only button variant
  - Asset panel: tab selector row, 3-column recipe grid with aspect-ratio cards, hover scale effect
  - Work mode panel: radio-style card selector with description text
  - AI write panel: text input area with send button, responsive sizing
  - Tooltip: positioned above toolbar buttons with arrow pointer

- pages/ecommerce.css (+490):
  - Composer input focus-within: green glow border + deepened shadow + lift transition
  - Asset library, work mode, AI write panel styles with consistent tokenized spacing and transitions

- standalone/overrides.css (+7):
  - ≤420px settings option row: switch from grid to flex with flex:1 on buttons for tight viewport fit
2026-06-17 14:52:42 +08:00
stringadmin 7fa51ff90a Merge pull request 'Codex/main latest 20260615 030000' (#24) from codex/main-latest-20260615-030000 into main
Reviewed-on: #24
2026-06-17 03:20:02 +00:00
35 changed files with 6589 additions and 2031 deletions
+39
View File
@@ -0,0 +1,39 @@
# Gitea Actions CI —— 防回潮检查。
#
# 注意:本文件需 Gitea 服务端【启用 Actions】并【配置 act_runner】后才会执行。
# 未配置 runner 时本文件无副作用(不影响本地开发与 husky 钩子)。
# 启用方式:Gitea 站点管理 → 启用 Actions;在 runner 主机注册 act_runner 并打 label。
#
# 本地已有 husky 钩子兜底:pre-commit 跑 tsc+eslint(增量)pre-push 跑 css:audit。
name: CI
on:
push:
branches: [main, "main-merge-work"]
pull_request:
branches: [main]
jobs:
verify:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: "20"
cache: "npm"
- name: Install dependencies
run: npm ci
- name: Type check
run: npm run type-check
- name: Tests
run: npm run test:run
- name: Lint (error 阻断,warning 放行)
run: npm run lint
+75
View File
@@ -0,0 +1,75 @@
// ESLint flat configESLint 9)。防回潮基建:锁定去重/抽取/合规成果,约束新代码。
// 策略:warn 基线——历史问题(如 exhaustive-deps)设 warn 不阻断提交,
// 新代码的 error 类问题(unused vars 等)强制清零。CI/pre-commit 只拦 error。
import js from "@eslint/js";
import tseslint from "typescript-eslint";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import unusedImports from "eslint-plugin-unused-imports";
import globals from "globals";
export default tseslint.config(
{
// 忽略构建产物、依赖、配置脚本、JS shim。
ignores: [
"dist/**",
"node_modules/**",
"coverage/**",
"**/*.config.{js,ts,mjs,cjs}",
"scripts/**",
"src/data/ossAssets.js",
],
},
js.configs.recommended,
...tseslint.configs.recommended,
{
files: ["**/*.{ts,tsx}"],
languageOptions: {
ecmaVersion: 2022,
sourceType: "module",
globals: {
...globals.browser,
...globals.es2022,
},
},
plugins: {
"react-hooks": reactHooks,
"react-refresh": reactRefresh,
"unused-imports": unusedImports,
},
rules: {
...reactHooks.configs.recommended.rules,
// 历史问题:warn 不阻断,渐进清理。
"react-hooks/exhaustive-deps": "warn",
"@typescript-eslint/no-explicit-any": "warn",
// 未使用 importerror 且可 autofix 自动删除(unused-imports 插件专长)。
"@typescript-eslint/no-unused-vars": "off",
"unused-imports/no-unused-imports": "error",
// 未使用局部变量:warn 基线(不自动删,避免误删 dead code 有副作用的赋值)。
"unused-imports/no-unused-vars": [
"warn",
{ vars: "all", varsIgnorePattern: "^_", args: "after-used", argsIgnorePattern: "^_" },
],
// 允许 warn/error(现有 console.warn/error 是有意的诊断输出)。
"no-console": ["warn", { allow: ["warn", "error"] }],
"react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
},
},
{
// 测试文件:补 vitest 全局,避免 describe/it/expect 误报未定义。
files: ["**/*.{test,spec}.{ts,tsx}"],
languageOptions: {
globals: {
...globals.node,
describe: "readonly",
it: "readonly",
expect: "readonly",
vi: "readonly",
beforeEach: "readonly",
afterEach: "readonly",
beforeAll: "readonly",
afterAll: "readonly",
},
},
},
);
+5 -8
View File
@@ -1,10 +1,7 @@
// lint-staged 配置 —— 配合 husky pre-commit 使用 // lint-stagedpre-commit 时对暂存文件运行检查。
// // - tsc --noEmit:全量类型检查(函数语法返回命令,不追加文件名)。
// 当前只运行 tsc 全量类型检查(tsc 不接受单文件增量检查) // - eslint --fix:仅对暂存的改动文件增量检查(新代码强制 error=0
// 未来可扩展 ESLint / Prettier / stylelint 等按文件的检查 // warning 不阻断提交)。存量历史问题不会因此被卡住
//
// 函数语法返回原始命令字符串,lint-staged 不会追加文件名。
export default { export default {
"*.{ts,tsx}": () => "tsc --noEmit", "*.{ts,tsx}": [() => "tsc --noEmit", "eslint --fix"],
}; };
+1454
View File
File diff suppressed because it is too large Load Diff
+10
View File
@@ -8,6 +8,9 @@
"build": "vite build", "build": "vite build",
"preview": "vite preview --host 127.0.0.1", "preview": "vite preview --host 127.0.0.1",
"type-check": "tsc -p tsconfig.json --noEmit", "type-check": "tsc -p tsconfig.json --noEmit",
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"lint:strict": "eslint . --max-warnings=0",
"test": "vitest", "test": "vitest",
"test:run": "vitest run", "test:run": "vitest run",
"test:coverage": "vitest run --coverage", "test:coverage": "vitest run --coverage",
@@ -23,13 +26,20 @@
"zustand": "5.0.13" "zustand": "5.0.13"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.18.0",
"@types/react": "18.2.55", "@types/react": "18.2.55",
"@types/react-dom": "18.2.18", "@types/react-dom": "18.2.18",
"@vitejs/plugin-react": "4.2.1", "@vitejs/plugin-react": "4.2.1",
"@vitest/coverage-v8": "^1.6.0", "@vitest/coverage-v8": "^1.6.0",
"eslint": "^9.18.0",
"eslint-plugin-react-hooks": "^5.1.0",
"eslint-plugin-react-refresh": "^0.4.18",
"eslint-plugin-unused-imports": "^4.1.4",
"globals": "^15.14.0",
"husky": "^9.1.7", "husky": "^9.1.7",
"lint-staged": "^17.0.7", "lint-staged": "^17.0.7",
"typescript": "5.3.3", "typescript": "5.3.3",
"typescript-eslint": "^8.20.0",
"vite": "5.1.0", "vite": "5.1.0",
"vite-plugin-compression2": "2.5.3", "vite-plugin-compression2": "2.5.3",
"vitest": "^1.6.0" "vitest": "^1.6.0"
+29 -4
View File
@@ -69,15 +69,40 @@ console.log(
); );
console.log(""); console.log("");
// Exit non-zero if total !important exceeds a budget threshold. // Per-file !important budgets for the worst offenders.
// Current baseline: ~7795. Set budget slightly above to allow incremental work // These cap individual files so a single sheet cannot balloon unchecked.
// while preventing uncontrolled growth. // Current baselines (2026-06): ecommerce-standalone.css=10189, standalone/base.css=4958,
const IMPORTANT_BUDGET = 7820; // standalone/overrides.css=1886. Budgets set ~1% above baseline to allow incremental
// work while preventing uncontrolled growth. Lower these as CSS gets cleaned up.
const PER_FILE_BUDGETS = {
"ecommerce-standalone.css": 10300,
"standalone/base.css": 5000,
"standalone/overrides.css": 1900,
};
let perFileFailed = false;
for (const r of REPORT) {
const budget = PER_FILE_BUDGETS[r.file];
if (budget === undefined) continue;
if (r.important > budget) {
console.error(
`FAIL: ${r.file} !important count ${r.important} exceeds per-file budget ${budget}.`,
);
perFileFailed = true;
}
}
// Total !important budget across all stylesheets.
// Current baseline: ~18218. Set ~1% above to allow incremental work while
// preventing uncontrolled growth. Lower as CSS gets cleaned up.
const IMPORTANT_BUDGET = 18400;
if (perFileFailed || totals.important > IMPORTANT_BUDGET) {
if (totals.important > IMPORTANT_BUDGET) { if (totals.important > IMPORTANT_BUDGET) {
console.error( console.error(
`FAIL: !important count ${totals.important} exceeds budget ${IMPORTANT_BUDGET}. ` + `FAIL: !important count ${totals.important} exceeds budget ${IMPORTANT_BUDGET}. ` +
`Run with --no-important-check to bypass (not recommended).`, `Run with --no-important-check to bypass (not recommended).`,
); );
}
process.exit(1); process.exit(1);
} else { } else {
console.log( console.log(
+34 -2
View File
@@ -1,4 +1,4 @@
import { lazy, Suspense, useCallback, useEffect, useMemo, useState } from "react"; import { lazy, Suspense, useCallback, useEffect, useState } from "react";
import { import {
BugOutlined, BugOutlined,
CheckCircleFilled, CheckCircleFilled,
@@ -19,6 +19,8 @@ import ToastContainer from "./components/toast/ToastContainer";
import { toast } from "./components/toast/toastStore"; import { toast } from "./components/toast/toastStore";
import { flushPendingGenerationRecords } from "./api/generationRecordClient"; import { flushPendingGenerationRecords } from "./api/generationRecordClient";
import { keyServerClient } from "./api/keyServerClient"; import { keyServerClient } from "./api/keyServerClient";
import { preloadPublicConfig, getLogoUrl } from "./api/publicConfigClient";
import { preloadPlatformRules } from "./api/platformRulesClient";
import { setUserMaxConcurrency } from "./api/generationConcurrency"; import { setUserMaxConcurrency } from "./api/generationConcurrency";
import { import {
SERVER_SESSION_EXPIRED_EVENT, SERVER_SESSION_EXPIRED_EVENT,
@@ -155,6 +157,9 @@ function App() {
const [sessionNotice, setSessionNotice] = useState<string | null>(null); const [sessionNotice, setSessionNotice] = useState<string | null>(null);
const [profileMenuOpen, setProfileMenuOpen] = useState(false); const [profileMenuOpen, setProfileMenuOpen] = useState(false);
const [currentPage, setCurrentPage] = useState<"workspace" | "profile">("workspace"); const [currentPage, setCurrentPage] = useState<"workspace" | "profile">("workspace");
// 平台规则 gating:数据就绪(或兜底超时)后才渲染 EcommercePage
// 保证其模块求值时 platformRulesClient 缓存已填充,拿到 API 数据。
const [platformRulesReady, setPlatformRulesReady] = useState(false);
const [workspaceChrome, setWorkspaceChrome] = useState<WorkspaceChromeState>({ const [workspaceChrome, setWorkspaceChrome] = useState<WorkspaceChromeState>({
isToolPage: false, isToolPage: false,
}); });
@@ -183,6 +188,20 @@ function App() {
initNotificationPermission(); initNotificationPermission();
}, []); }, []);
// 启动 gating:预加载平台规则。preload 自带超时+fallback 一定会 resolve
// 另加 3s 兜底,避免极端情况下首屏久等(兜底放行后用 fallback,数据=正确值)。
useEffect(() => {
let settled = false;
const markReady = () => {
if (settled) return;
settled = true;
setPlatformRulesReady(true);
};
void preloadPlatformRules().then(markReady, markReady);
const fallbackTimer = window.setTimeout(markReady, 3_000);
return () => window.clearTimeout(fallbackTimer);
}, []);
useEffect(() => { useEffect(() => {
if (!session) return; if (!session) return;
void flushPendingGenerationRecords(); void flushPendingGenerationRecords();
@@ -242,6 +261,8 @@ function App() {
let cancelled = false; let cancelled = false;
const loadSession = async () => { const loadSession = async () => {
// 预加载公网配置(OSS base / logo URL),与 session 加载并行,不阻断启动。
void preloadPublicConfig();
try { try {
const nextSession = await keyServerClient.getCurrentSession(); const nextSession = await keyServerClient.getCurrentSession();
if (cancelled) return; if (cancelled) return;
@@ -326,6 +347,8 @@ function App() {
toast.info("Bug 反馈入口已保留,后续可接入反馈页面。"); toast.info("Bug 反馈入口已保留,后续可接入反馈页面。");
}; };
const shouldShowEcommerceTopbar = currentPage === "workspace" && !workspaceChrome.isToolPage;
return ( return (
<div <div
className="ecommerce-standalone web-shell" className="ecommerce-standalone web-shell"
@@ -334,6 +357,7 @@ function App() {
data-view="ecommerce" data-view="ecommerce"
data-workspace-tool-page={workspaceChrome.isToolPage ? "true" : "false"} data-workspace-tool-page={workspaceChrome.isToolPage ? "true" : "false"}
> >
{shouldShowEcommerceTopbar ? (
<Topbar <Topbar
session={session} session={session}
usage={usage} usage={usage}
@@ -345,6 +369,7 @@ function App() {
onLogout={handleLogout} onLogout={handleLogout}
onBugFeedback={handleBugFeedback} onBugFeedback={handleBugFeedback}
/> />
) : null}
<main className="ecommerce-standalone__content"> <main className="ecommerce-standalone__content">
{session ? ( {session ? (
@@ -378,6 +403,7 @@ function App() {
</div> </div>
} }
> >
{platformRulesReady ? (
<EcommercePage <EcommercePage
projects={[]} projects={[]}
isAuthenticated={Boolean(session)} isAuthenticated={Boolean(session)}
@@ -391,6 +417,12 @@ function App() {
initialTemplate={null} initialTemplate={null}
onInitialTemplateConsumed={() => undefined} onInitialTemplateConsumed={() => undefined}
/> />
) : (
<div className="page-loading-center">
<div className="page-loading-spinner" />
<span className="page-loading-center__text">...</span>
</div>
)}
</Suspense> </Suspense>
</ErrorBoundary> </ErrorBoundary>
</div> </div>
@@ -414,7 +446,7 @@ function App() {
<CloseOutlined /> <CloseOutlined />
</button> </button>
<span className="ecommerce-auth-modal__logo" aria-hidden="true"> <span className="ecommerce-auth-modal__logo" aria-hidden="true">
<img src="https://stringtest.oss-cn-hangzhou.aliyuncs.com/logo.png" alt="" /> <img src={getLogoUrl()} alt="" />
</span> </span>
<h2 id="ecommerce-auth-title">{authMode === "login" ? "欢迎回来" : "创建账号"}</h2> <h2 id="ecommerce-auth-title">{authMode === "login" ? "欢迎回来" : "创建账号"}</h2>
<p className="ecommerce-auth-modal__subtitle">{authMode === "login" ? "登录后继续你的 AI 创作之旅" : "注册即可免费体验全部功能"}</p> <p className="ecommerce-auth-modal__subtitle">{authMode === "login" ? "登录后继续你的 AI 创作之旅" : "注册即可免费体验全部功能"}</p>
+1 -1
View File
@@ -108,7 +108,7 @@ export interface ComplianceCheck {
} }
function findJsonSlice(raw: string): string { function findJsonSlice(raw: string): string {
const start = raw.search(/[\[{]/); const start = raw.search(/[{[]/);
if (start < 0) return raw; if (start < 0) return raw;
const stack: string[] = []; const stack: string[] = [];
+3 -1
View File
@@ -44,6 +44,7 @@ export interface ImageProviderDebug {
export interface ImageTaskCreateResponse { export interface ImageTaskCreateResponse {
taskId: string; taskId: string;
resultUrl?: string | null;
providerDebug?: ImageProviderDebug; providerDebug?: ImageProviderDebug;
} }
@@ -97,6 +98,7 @@ export interface ImageEditInput {
prompt?: string; prompt?: string;
maskUrl?: string; maskUrl?: string;
ratio?: string; ratio?: string;
referenceUrls?: string[];
n?: number; n?: number;
} }
@@ -126,7 +128,7 @@ export type ChatMessageContent =
| Array<{ type: "text"; text: string } | { type: "image_url"; image_url: { url: string } }>; | Array<{ type: "text"; text: string } | { type: "image_url"; image_url: { url: string } }>;
export interface ChatInput { export interface ChatInput {
model: string; model?: string;
messages: Array<{ role: string; content: ChatMessageContent }>; messages: Array<{ role: string; content: ChatMessageContent }>;
stream?: boolean; stream?: boolean;
temperature?: number; temperature?: number;
+9
View File
@@ -110,6 +110,15 @@ describe("parseImageTaskCreateResponse", () => {
expect(result.providerDebug).toBeUndefined(); expect(result.providerDebug).toBeUndefined();
}); });
it("extracts immediate image result URLs", () => {
const result = parseImageTaskCreateResponse({
taskId: "img-sync",
result_url: "https://example.com/result.png",
});
expect(result.taskId).toBe("img-sync");
expect(result.resultUrl).toBe("https://example.com/result.png");
});
it("tolerates snake_case providerDebug fields", () => { it("tolerates snake_case providerDebug fields", () => {
const result = parseImageTaskCreateResponse({ const result = parseImageTaskCreateResponse({
taskId: "img-3", taskId: "img-3",
+6 -1
View File
@@ -130,8 +130,13 @@ export function parseTaskCreateResponse(payload: unknown): { taskId: string } {
export function parseImageTaskCreateResponse(payload: unknown): ImageTaskCreateResponse { export function parseImageTaskCreateResponse(payload: unknown): ImageTaskCreateResponse {
const base = parseTaskCreateResponse(payload); const base = parseTaskCreateResponse(payload);
const body = isRecord(payload) ? payload : {}; const body = isRecord(payload) ? payload : {};
const resultUrl = toNullableString(body.resultUrl ?? body.result_url);
const providerDebug = normalizeProviderDebug(body.providerDebug ?? body.provider_debug); const providerDebug = normalizeProviderDebug(body.providerDebug ?? body.provider_debug);
return providerDebug ? { ...base, providerDebug } : base; return {
...base,
resultUrl,
...(providerDebug ? { providerDebug } : {}),
};
} }
/** /**
+50
View File
@@ -38,6 +38,39 @@ export interface SaveGenerationRecordResult {
id: string; id: string;
} }
export interface GenerationRecord {
id: string;
clientRecordId: string;
tool: string;
mode?: string;
title: string;
status: GenerationRecordStatus;
prompt?: string;
taskIds: string[];
assets: GenerationRecordAsset[];
config: Record<string, unknown>;
result: Record<string, unknown>;
metadata: Record<string, unknown>;
createdAt: string;
updatedAt: string;
}
export interface ListGenerationRecordsParams {
tool?: string;
mode?: string;
status?: GenerationRecordStatus;
q?: string;
limit?: number;
offset?: number;
}
export interface ListGenerationRecordsResult {
items: GenerationRecord[];
total: number;
limit: number;
offset: number;
}
// 同一 clientRecordId 的保存去重:套图主流程、backgroundTaskRunner、useGenerationTasks // 同一 clientRecordId 的保存去重:套图主流程、backgroundTaskRunner、useGenerationTasks
// 三处都可能对同一条终态任务调用 saveGenerationRecordSSE 重复推送 completed 时 // 三处都可能对同一条终态任务调用 saveGenerationRecordSSE 重复推送 completed 时
// 单个 poller 内也会重复触发。这里做客户端幂等:in-flight 合流 + 成功后短期拦截, // 单个 poller 内也会重复触发。这里做客户端幂等:in-flight 合流 + 成功后短期拦截,
@@ -185,6 +218,23 @@ export async function flushPendingGenerationRecords(): Promise<{ synced: number;
return { synced, remaining: remaining.length }; return { synced, remaining: remaining.length };
} }
export async function listGenerationRecords(params: ListGenerationRecordsParams = {}): Promise<ListGenerationRecordsResult> {
const search = new URLSearchParams();
if (params.tool) search.set("tool", params.tool);
if (params.mode) search.set("mode", params.mode);
if (params.status) search.set("status", params.status);
if (params.q) search.set("q", params.q);
if (params.limit !== undefined) search.set("limit", String(params.limit));
if (params.offset !== undefined) search.set("offset", String(params.offset));
const suffix = search.toString();
return serverRequest<ListGenerationRecordsResult>(`ai/generation-records${suffix ? `?${suffix}` : ""}`, {
method: "GET",
maxRetries: 1,
fallbackMessage: "Failed to load generation records",
});
}
export async function deleteGenerationRecordByClientId(clientRecordId: string): Promise<void> { export async function deleteGenerationRecordByClientId(clientRecordId: string): Promise<void> {
await serverRequest<{ success: boolean }>(`ai/generation-records/by-client-id/${encodeURIComponent(clientRecordId)}`, { await serverRequest<{ success: boolean }>(`ai/generation-records/by-client-id/${encodeURIComponent(clientRecordId)}`, {
method: "DELETE", method: "DELETE",
+470
View File
@@ -0,0 +1,470 @@
// 电商平台规格 + 市场语言业务数据客户端(AGENTS.md 规则4合规)。
// 数据由后端 GET /api/public/config/profile?name=web-ecommerce-platform-rules 下发,
// 不硬编码在前端业务逻辑里。
//
// 时序设计(启动 gating):App 启动 boot splash 期间 await preloadPlatformRules()
// 数据就绪后才渲染 EcommercePageReact.lazy)。因此 platformRules.ts 模块求值时
// (随 EcommercePage chunk 加载)缓存已填充,其顶层派生常量拿到的是 API 数据。
//
// FALLBACK = 完整当前生产数据:API 超时/失败时仍能正常工作(fallback 即正确值)。
import type { EcommercePlatformSpec } from "../features/ecommerce/utils/platformRules";
import { serverRequest } from "./serverConnection";
export interface MarketLanguageOption {
country: string;
languages: string[];
}
export interface PlatformRulesData {
platformSpecOptions: EcommercePlatformSpec[];
marketLanguageOptions: MarketLanguageOption[];
languageAliases: Record<string, string>;
legacyPlatformAliases: Record<string, string>;
domesticPlatformLabels: string[];
domesticPlatformLanguages: string[];
defaultEcommercePlatform: string;
}
// ── FALLBACK:完整当前数据,逐字迁移自原 platformRules.ts ──────────────
const FALLBACK_PLATFORM_RULES: PlatformRulesData = {
platformSpecOptions: [
{
label: "淘宝/天猫",
ratios: ["淘宝主图 / SKU 图 800×800px", "详情页宽 750px", "详情页宽 790px"],
defaultRatio: "淘宝主图 / SKU 图 800×800px",
ratioGroups: {
set: {
ratios: ["1000×1000px\u00a0\u00a0\u00a01:1", "800×800px\u00a0\u00a0\u00a01:1"],
defaultRatio: "1000×1000px\u00a0\u00a0\u00a01:1",
},
detail: {
ratios: [
"750×1000px\u00a0\u00a0\u00a03:4",
"790×1053px\u00a0\u00a0\u00a03:4",
"750×1125px\u00a0\u00a0\u00a02:3",
"790×1185px\u00a0\u00a0\u00a02:3",
],
defaultRatio: "750×1000px\u00a0\u00a0\u00a03:4",
},
model: {
ratios: ["750×1000px\u00a0\u00a0\u00a03:4"],
defaultRatio: "750×1000px\u00a0\u00a0\u00a03:4",
},
video: {
ratios: ["1080×1920px\u00a0\u00a0\u00a09:16", "1080×1440px\u00a0\u00a0\u00a03:4", "1080×1080px\u00a0\u00a0\u00a01:1"],
defaultRatio: "1080×1920px\u00a0\u00a0\u00a09:16",
},
hot: {
ratios: ["800×800px\u00a0\u00a0\u00a01:1"],
defaultRatio: "800×800px\u00a0\u00a0\u00a01:1",
},
},
specs: ["主图 / SKU 图 800×800px,≤3MB", "详情页宽 750px 或 790px,单张高度≤1546px"],
tip: "建议主图 200-400KB JPG,超过 500KB 会影响加载速度。",
},
{
label: "京东",
ratios: ["京东主图 / SKU 图 800×800px", "详情页宽 750px", "首图主体占比 ≥80%"],
defaultRatio: "京东主图 / SKU 图 800×800px",
ratioGroups: {
set: {
ratios: ["1000×1000px\u00a0\u00a0\u00a01:1"],
defaultRatio: "1000×1000px\u00a0\u00a0\u00a01:1",
},
detail: {
ratios: [
"750×1000px\u00a0\u00a0\u00a03:4",
"990×1320px\u00a0\u00a0\u00a03:4",
"750×1125px\u00a0\u00a0\u00a02:3",
"990×1485px\u00a0\u00a0\u00a02:3",
],
defaultRatio: "750×1000px\u00a0\u00a0\u00a03:4",
},
model: {
ratios: ["750×1125px\u00a0\u00a0\u00a02:3", "990×1485px\u00a0\u00a0\u00a02:3"],
defaultRatio: "750×1125px\u00a0\u00a0\u00a02:3",
},
video: {
ratios: ["1080×1920px\u00a0\u00a0\u00a09:16", "1920×1080px\u00a0\u00a0\u00a016:9"],
defaultRatio: "1080×1920px\u00a0\u00a0\u00a09:16",
},
hot: {
ratios: ["800×800px\u00a0\u00a0\u00a01:1"],
defaultRatio: "800×800px\u00a0\u00a0\u00a01:1",
},
},
specs: ["主图 / SKU 图 800×800px,白底,≤3MB", "详情页宽 750px,首图主体占比 ≥80%"],
},
{
label: "拼多多",
ratios: ["主图 750×352px", "主图 800×800px", "详情页宽 750px"],
defaultRatio: "主图 750×352px",
ratioGroups: {
set: {
ratios: ["800×800px\u00a0\u00a0\u00a01:1", "750×1000px\u00a0\u00a0\u00a03:4"],
defaultRatio: "800×800px\u00a0\u00a0\u00a01:1",
},
detail: {
ratios: ["750×1000px\u00a0\u00a0\u00a03:4", "750×1125px\u00a0\u00a0\u00a02:3"],
defaultRatio: "750×1000px\u00a0\u00a0\u00a03:4",
},
model: {
ratios: ["750×1000px\u00a0\u00a0\u00a03:4"],
defaultRatio: "750×1000px\u00a0\u00a0\u00a03:4",
},
video: {
ratios: ["1080×1920px\u00a0\u00a0\u00a09:16"],
defaultRatio: "1080×1920px\u00a0\u00a0\u00a09:16",
},
hot: {
ratios: ["800×800px\u00a0\u00a0\u00a01:1"],
defaultRatio: "800×800px\u00a0\u00a0\u00a01:1",
},
},
specs: ["主图 750×352px 或 800×800px,≤1MB", "详情页宽 750px,要求纯白底、无水印、无拼接"],
},
{
label: "抖音电商",
ratios: ["短视频1080×1920px"],
defaultRatio: "短视频1080×1920px",
ratioGroups: {
video: {
ratios: ["1080×1920px\u00a0\u00a0\u00a09:16"],
defaultRatio: "1080×1920px\u00a0\u00a0\u00a09:16",
},
hot: {
ratios: ["800×800px\u00a0\u00a0\u00a01:1"],
defaultRatio: "800×800px\u00a0\u00a0\u00a01:1",
},
},
specs: ["短视频 1080×1920px9:16", "30s 内最佳"],
},
{
label: "亚马逊 Amazon",
ratios: ["主图 ≥1600×1600px", "建议 2000×2000px+", "最小 500×500px"],
defaultRatio: "主图 ≥1600×1600px",
ratioGroups: {
set: {
ratios: ["1600×1600px\u00a0\u00a0\u00a01:1"],
defaultRatio: "1600×1600px\u00a0\u00a0\u00a01:1",
},
detail: {
ratios: ["1600×1600px\u00a0\u00a0\u00a01:1", "1200×1800px\u00a0\u00a0\u00a02:3", "1200×1600px\u00a0\u00a0\u00a03:4"],
defaultRatio: "1200×1800px\u00a0\u00a0\u00a02:3",
},
model: {
ratios: ["1200×1800px\u00a0\u00a0\u00a02:3"],
defaultRatio: "1200×1800px\u00a0\u00a0\u00a02:3",
},
video: {
ratios: ["1920×1080px\u00a0\u00a0\u00a016:9"],
defaultRatio: "1920×1080px\u00a0\u00a0\u00a016:9",
},
hot: {
ratios: ["1600×1600px\u00a0\u00a0\u00a01:1"],
defaultRatio: "1600×1600px\u00a0\u00a0\u00a01:1",
},
},
specs: ["主图 1600×1600px+,纯白底,≤10MB", "最小 500×500px,建议 2000px+ 以支持缩放"],
aliases: ["亚马逊"],
},
{
label: "Shopee",
ratios: ["商品主图 1024×1024px", "基础主图 800×800px"],
defaultRatio: "商品主图 1024×1024px",
ratioGroups: {
set: {
ratios: ["800×800px\u00a0\u00a0\u00a01:1"],
defaultRatio: "800×800px\u00a0\u00a0\u00a01:1",
},
detail: {
ratios: ["750×1000px\u00a0\u00a0\u00a03:4", "750×1125px\u00a0\u00a0\u00a02:3"],
defaultRatio: "750×1000px\u00a0\u00a0\u00a03:4",
},
model: {
ratios: ["750×1000px\u00a0\u00a0\u00a03:4"],
defaultRatio: "750×1000px\u00a0\u00a0\u00a03:4",
},
video: {
ratios: ["1080×1920px\u00a0\u00a0\u00a09:16"],
defaultRatio: "1080×1920px\u00a0\u00a0\u00a09:16",
},
hot: {
ratios: ["800×800px\u00a0\u00a0\u00a01:1"],
defaultRatio: "800×800px\u00a0\u00a0\u00a01:1",
},
},
specs: ["商品主图推荐 1024×1024px,基础 800×800px", "≤2MB,白底或浅色底"],
aliases: ["虾皮 Shopee/Lazada", "虾皮"],
},
{
label: "Lazada",
ratios: ["商品主图 800×800px"],
defaultRatio: "商品主图 800×800px",
ratioGroups: {
set: {
ratios: ["800×800px\u00a0\u00a0\u00a01:1"],
defaultRatio: "800×800px\u00a0\u00a0\u00a01:1",
},
detail: {
ratios: ["750×1000px\u00a0\u00a0\u00a03:4", "750×1125px\u00a0\u00a0\u00a02:3"],
defaultRatio: "750×1000px\u00a0\u00a0\u00a03:4",
},
model: {
ratios: ["750×1000px\u00a0\u00a0\u00a03:4"],
defaultRatio: "750×1000px\u00a0\u00a0\u00a03:4",
},
video: {
ratios: ["1080×1920px\u00a0\u00a0\u00a09:16"],
defaultRatio: "1080×1920px\u00a0\u00a0\u00a09:16",
},
hot: {
ratios: ["800×800px\u00a0\u00a0\u00a01:1"],
defaultRatio: "800×800px\u00a0\u00a0\u00a01:1",
},
},
specs: ["商品主图 800×800px1:1"],
},
{
label: "Instagram",
ratios: ["帖子 1080×1350px", "帖子 1080×1080px", "Stories / Reels 1080×1920px", "头像 320×320px"],
defaultRatio: "帖子 1080×1350px",
ratioGroups: {
set: {
ratios: ["1080×1080px\u00a0\u00a0\u00a01:1", "1080×1350px\u00a0\u00a0\u00a04:5"],
defaultRatio: "1080×1080px\u00a0\u00a0\u00a01:1",
},
detail: {
ratios: ["1080×1350px\u00a0\u00a0\u00a04:5"],
defaultRatio: "1080×1350px\u00a0\u00a0\u00a04:5",
},
model: {
ratios: ["1080×1350px\u00a0\u00a0\u00a04:5"],
defaultRatio: "1080×1350px\u00a0\u00a0\u00a04:5",
},
video: {
ratios: ["1080×1920px\u00a0\u00a0\u00a09:16", "1080×1350px\u00a0\u00a0\u00a04:5"],
defaultRatio: "1080×1920px\u00a0\u00a0\u00a09:16",
},
},
specs: ["帖子 1080×1350px 或 1080×1080px", "Stories / Reels 封面 1080×1920px,头像 320×320px"],
tip: "建议 ≤8MB JPG。",
aliases: ["Instagram Reels"],
},
{
label: "速卖通",
ratios: ["主图 800×800px", "主图 1000×1000px+"],
defaultRatio: "主图 800×800px",
ratioGroups: {
set: {
ratios: ["1000×1000px\u00a0\u00a0\u00a01:1"],
defaultRatio: "1000×1000px\u00a0\u00a0\u00a01:1",
},
detail: {
ratios: ["750×1125px\u00a0\u00a0\u00a02:3", "750×1000px\u00a0\u00a0\u00a03:4"],
defaultRatio: "750×1125px\u00a0\u00a0\u00a02:3",
},
model: {
ratios: ["750×1125px\u00a0\u00a0\u00a02:3"],
defaultRatio: "750×1125px\u00a0\u00a0\u00a02:3",
},
video: {
ratios: ["1080×1920px\u00a0\u00a0\u00a09:16", "1920×1080px\u00a0\u00a0\u00a016:9"],
defaultRatio: "1080×1920px\u00a0\u00a0\u00a09:16",
},
hot: {
ratios: ["800×800px\u00a0\u00a0\u00a01:1"],
defaultRatio: "800×800px\u00a0\u00a0\u00a01:1",
},
},
specs: ["主图建议 800×800px 或更高,1:1", "适合跨境电商主图、SKU 图和场景图"],
},
{
label: "eBay",
ratios: ["商品图1:1", "白底多角度展示图 1:1"],
defaultRatio: "商品图1:1",
ratioGroups: {
set: {
ratios: ["1600×1600px\u00a0\u00a0\u00a01:1"],
defaultRatio: "1600×1600px\u00a0\u00a0\u00a01:1",
},
detail: {
ratios: ["1000×1500px\u00a0\u00a0\u00a02:3", "1200×1600px\u00a0\u00a0\u00a03:4"],
defaultRatio: "1000×1500px\u00a0\u00a0\u00a02:3",
},
model: {
ratios: ["1000×1500px\u00a0\u00a0\u00a02:3"],
defaultRatio: "1000×1500px\u00a0\u00a0\u00a02:3",
},
video: {
ratios: ["1920×1080px\u00a0\u00a0\u00a016:9", "1080×1920px\u00a0\u00a0\u00a09:16"],
defaultRatio: "1920×1080px\u00a0\u00a0\u00a016:9",
},
hot: {
ratios: ["1600×1600px\u00a0\u00a0\u00a01:1"],
defaultRatio: "1600×1600px\u00a0\u00a0\u00a01:1",
},
},
specs: ["商品图建议 1:1,主体清晰居中", "适合白底主图和多角度展示图"],
},
{
label: "TikTok Shop",
ratios: ["商品主图 1:1", "短视频/ 竖版封面 9:16"],
defaultRatio: "商品主图 1:1",
ratioGroups: {
set: {
ratios: ["1280×1280px\u00a0\u00a0\u00a01:1"],
defaultRatio: "1280×1280px\u00a0\u00a0\u00a01:1",
},
detail: {
ratios: ["1080×1350px\u00a0\u00a0\u00a04:5"],
defaultRatio: "1080×1350px\u00a0\u00a0\u00a04:5",
},
model: {
ratios: ["1080×1350px\u00a0\u00a0\u00a04:5"],
defaultRatio: "1080×1350px\u00a0\u00a0\u00a04:5",
},
video: {
ratios: ["1080×1920px\u00a0\u00a0\u00a09:16"],
defaultRatio: "1080×1920px\u00a0\u00a0\u00a09:16",
},
hot: {
ratios: ["800×800px\u00a0\u00a0\u00a01:1"],
defaultRatio: "800×800px\u00a0\u00a0\u00a01:1",
},
},
specs: ["商品主图建议 1:1", "短视频竖版封面建议 9:16"],
},
],
marketLanguageOptions: [
{ country: "中国", languages: ["中文"] },
{ country: "美国", languages: ["英文"] },
{ country: "加拿大", languages: ["英文", "法文"] },
{ country: "英国", languages: ["英文"] },
{ country: "德国", languages: ["德文"] },
{ country: "法国", languages: ["法文"] },
{ country: "意大利", languages: ["意大利语"] },
{ country: "西班牙", languages: ["西班牙语"] },
{ country: "日本", languages: ["日文"] },
{ country: "韩国", languages: ["韩文"] },
{ country: "澳大利亚", languages: ["英文"] },
{ country: "新加坡", languages: ["英文", "中文"] },
{ country: "马来西亚", languages: ["马来语", "英文", "中文"] },
{ country: "印尼", languages: ["印度尼西亚语", "英文"] },
{ country: "越南", languages: ["越南语", "英文"] },
{ country: "泰国", languages: ["泰语", "英文"] },
{ country: "菲律宾", languages: ["菲律宾语(他加禄语)", "英文"] },
{ country: "巴西", languages: ["葡萄牙语"] },
{ country: "墨西哥", languages: ["西班牙语"] },
{ country: "智利", languages: ["西班牙语"] },
{ country: "哥伦比亚", languages: ["西班牙语"] },
{ country: "阿联酋", languages: ["阿拉伯语", "英文"] },
{ country: "沙特阿拉伯", languages: ["阿拉伯语", "英文"] },
{ country: "俄罗斯", languages: ["俄语"] },
{ country: "波兰", languages: ["波兰语"] },
],
languageAliases: {
"英文": "英文",
"中文": "中文",
"英语": "英文",
"日语": "日文",
"日文": "日文",
"德语": "德文",
"德文": "德文",
"法语": "法文",
"法文": "法文",
"韩语": "韩文",
"韩文": "韩文",
"西文": "西班牙语",
"西班牙语": "西班牙语",
"葡文": "葡萄牙语",
"葡萄牙语": "葡萄牙语",
"印尼语": "印度尼西亚语",
"印度尼西亚语": "印度尼西亚语",
"菲律宾语": "菲律宾语(他加禄语)",
"菲律宾语(他加禄语)": "菲律宾语(他加禄语)",
},
legacyPlatformAliases: {
"淘宝/天猫": "淘宝/天猫",
"京东": "京东",
"拼多多": "拼多多",
"抖音电商": "抖音电商",
"亚马逊Amazon": "亚马逊 Amazon",
"速卖通": "速卖通",
},
domesticPlatformLabels: ["淘宝/天猫", "京东", "拼多多", "抖音电商"],
domesticPlatformLanguages: ["中文"],
defaultEcommercePlatform: "淘宝/天猫",
};
interface PlatformRulesPayload {
name: string;
config: Partial<PlatformRulesData>;
}
let cached: PlatformRulesData | null = null;
let loadPromise: Promise<PlatformRulesData> | null = null;
function isNonEmptyArray(value: unknown): boolean {
return Array.isArray(value) && value.length > 0;
}
// 合并 API 返回与 fallback:仅当 API 字段有效(非空)时覆盖,避免后端漏配某字段导致 UI 空白。
function mergeWithFallback(config: Partial<PlatformRulesData>): PlatformRulesData {
return {
platformSpecOptions: isNonEmptyArray(config.platformSpecOptions)
? (config.platformSpecOptions as EcommercePlatformSpec[])
: FALLBACK_PLATFORM_RULES.platformSpecOptions,
marketLanguageOptions: isNonEmptyArray(config.marketLanguageOptions)
? (config.marketLanguageOptions as MarketLanguageOption[])
: FALLBACK_PLATFORM_RULES.marketLanguageOptions,
languageAliases:
config.languageAliases && typeof config.languageAliases === "object"
? config.languageAliases
: FALLBACK_PLATFORM_RULES.languageAliases,
legacyPlatformAliases:
config.legacyPlatformAliases && typeof config.legacyPlatformAliases === "object"
? config.legacyPlatformAliases
: FALLBACK_PLATFORM_RULES.legacyPlatformAliases,
domesticPlatformLabels: isNonEmptyArray(config.domesticPlatformLabels)
? (config.domesticPlatformLabels as string[])
: FALLBACK_PLATFORM_RULES.domesticPlatformLabels,
domesticPlatformLanguages: isNonEmptyArray(config.domesticPlatformLanguages)
? (config.domesticPlatformLanguages as string[])
: FALLBACK_PLATFORM_RULES.domesticPlatformLanguages,
defaultEcommercePlatform:
typeof config.defaultEcommercePlatform === "string" && config.defaultEcommercePlatform.trim()
? config.defaultEcommercePlatform
: FALLBACK_PLATFORM_RULES.defaultEcommercePlatform,
};
}
async function fetchPlatformRules(): Promise<PlatformRulesData> {
const payload = await serverRequest<PlatformRulesPayload>(
"public/config/profile?name=web-ecommerce-platform-rules",
{ maxRetries: 2, timeoutMs: 8_000, fallbackMessage: "加载电商平台规则失败" },
);
return mergeWithFallback(payload?.config ?? {});
}
/** 预加载平台规则。App 启动 gating 调用,await 其完成(带超时,失败用 fallback)。可安全重复调用。 */
export async function preloadPlatformRules(): Promise<void> {
if (loadPromise) return loadPromise.then(() => undefined);
loadPromise = fetchPlatformRules()
.then((data) => {
cached = data;
return data;
})
.catch((error) => {
console.warn("[platformRules] 加载失败,使用 fallback 数据", error);
cached = null;
loadPromise = null;
return FALLBACK_PLATFORM_RULES;
});
return loadPromise.then(() => undefined);
}
/** 同步获取平台规则。未加载时返回 fallback(=当前生产值,永远可用)。 */
export function getPlatformRules(): PlatformRulesData {
return cached ?? FALLBACK_PLATFORM_RULES;
}
+65
View File
@@ -0,0 +1,65 @@
// 前端公网配置客户端。
// 从 GET /api/public/config/profile?name=web-public-config 拉取运行时配置,
// 包括 OSS 公网 base URL 与 logo URL。
// 按 AGENTS.md 规则 1/4/5:这些环境权威数据不硬编码在前端源码,由 API 下发。
//
// 设计:进程内单例缓存 + promise 去重,App 启动时预加载一次,
// 之后 getOssPublicBaseUrl() / getLogoUrl() 同步返回缓存值。
// API 不可用时回退到 FALLBACK 值(当前生产 bucket),保证渐进可用。
import { serverRequest } from "./serverConnection";
interface PublicConfigPayload {
name: string;
config: {
ossPublicBaseUrl?: string;
logoUrl?: string;
};
description?: string;
updatedAt?: string;
}
// Fallback:API 不可用或未加载时的兜底值,保证首屏不白屏。
// 这些值仅作为降级,正式来源是 API 返回的 config。
const FALLBACK_OSS_PUBLIC_BASE_URL = "https://stringtest.oss-cn-hangzhou.aliyuncs.com";
const FALLBACK_LOGO_URL = "https://stringtest.oss-cn-hangzhou.aliyuncs.com/muban/logo.png";
let cachedConfig: PublicConfigPayload["config"] | null = null;
let loadPromise: Promise<PublicConfigPayload["config"]> | null = null;
async function fetchPublicConfig(): Promise<PublicConfigPayload["config"]> {
const payload = await serverRequest<PublicConfigPayload>("public/config/profile?name=web-public-config", {
// 公开端点,无需 token。
maxRetries: 2,
fallbackMessage: "加载公网配置失败",
});
return payload?.config ?? {};
}
/** 预加载公网配置。App 启动时调用一次,后续同步读取缓存。可安全重复调用(promise 去重)。 */
export async function preloadPublicConfig(): Promise<void> {
if (loadPromise) return loadPromise.then(() => undefined);
loadPromise = fetchPublicConfig()
.then((config) => {
cachedConfig = config;
return config;
})
.catch((error) => {
// 加载失败不阻断启动,用 fallback 值;记录后允许后续重试。
console.warn("[publicConfig] 加载失败,使用 fallback 值", error);
cachedConfig = null;
loadPromise = null;
return {};
});
return loadPromise.then(() => undefined);
}
/** 同步获取 OSS 公网 base URL。未加载时返回 fallback。 */
export function getOssPublicBaseUrl(): string {
return cachedConfig?.ossPublicBaseUrl?.trim() || FALLBACK_OSS_PUBLIC_BASE_URL;
}
/** 同步获取 logo URL。未加载时返回 fallback。 */
export function getLogoUrl(): string {
return cachedConfig?.logoUrl?.trim() || FALLBACK_LOGO_URL;
}
+2 -1
View File
@@ -10,6 +10,7 @@ import {
WalletOutlined, WalletOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { LocalAvatar } from "./LocalAvatar"; import { LocalAvatar } from "./LocalAvatar";
import { getLogoUrl } from "../api/publicConfigClient";
import type { WebUserSession } from "../types"; import type { WebUserSession } from "../types";
interface TopbarProps { interface TopbarProps {
@@ -110,7 +111,7 @@ export function Topbar({
onClick={onOpenWorkspace} onClick={onOpenWorkspace}
> >
<span className="ecommerce-standalone__logo" aria-hidden="true"> <span className="ecommerce-standalone__logo" aria-hidden="true">
<img src="https://stringtest.oss-cn-hangzhou.aliyuncs.com/logo.png" alt="" /> <img src={getLogoUrl()} alt="" />
</span> </span>
<strong>OmniAI </strong> <strong>OmniAI </strong>
</button> </button>
+1 -1
View File
@@ -1,4 +1,4 @@
import { useCallback, useEffect, useRef, useState } from "react"; import { useEffect, useState } from "react";
export type ToastType = "success" | "error" | "info"; export type ToastType = "success" | "error" | "info";
+5 -2
View File
@@ -1,7 +1,10 @@
const OSS_PUBLIC_BASE_URL = "https://stringtest.oss-cn-hangzhou.aliyuncs.com"; // OSS 公网 base URL 由 API 下发(AGENTS.md 规则 1/5),
// 见 src/api/publicConfigClient.ts。ossAssets 在模块加载时同步取缓存值,
// App 启动时 preloadPublicConfig() 已预加载;未加载时 getOssPublicBaseUrl() 返回 fallback。
import { getOssPublicBaseUrl } from "../api/publicConfigClient";
function oss(path: string): string { function oss(path: string): string {
return `${OSS_PUBLIC_BASE_URL}/${path.replace(/^\/+/, "")}`; return `${getOssPublicBaseUrl()}/${path.replace(/^\/+/, "")}`;
} }
function muban(path: string): string { function muban(path: string): string {
File diff suppressed because it is too large Load Diff
@@ -1,4 +1,4 @@
import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import "../../styles/pages/ecommerce-video.css"; import "../../styles/pages/ecommerce-video.css";
import { import {
CloseOutlined, CloseOutlined,
@@ -33,7 +33,6 @@ import { useGenerationTasks } from "../../hooks/useGenerationTasks";
import { import {
saveEcommerceVideoState, saveEcommerceVideoState,
loadEcommerceVideoState, loadEcommerceVideoState,
clearEcommerceVideoState,
} from "./ecommerceVideoKeepalive"; } from "./ecommerceVideoKeepalive";
import { saveUnifiedEcommerceGenerationRecord } from "./ecommerceGenerationPersistence"; import { saveUnifiedEcommerceGenerationRecord } from "./ecommerceGenerationPersistence";
import { useVideoSceneRunner } from "./useVideoSceneRunner"; import { useVideoSceneRunner } from "./useVideoSceneRunner";
@@ -1,10 +1,37 @@
import { import {
buildGenerationOssScope, buildGenerationOssScope,
deleteGenerationRecordByClientId, deleteGenerationRecordByClientId,
listGenerationRecords,
saveGenerationRecord, saveGenerationRecord,
type GenerationRecord,
type GenerationRecordAsset, type GenerationRecordAsset,
type SaveGenerationRecordInput, type SaveGenerationRecordInput,
} from "../../api/generationRecordClient"; } from "../../api/generationRecordClient";
import {
defaultCloneDetailModuleIds,
defaultCloneSetCounts,
ecommerceHistoryStorageKey,
normalizeEcommerceHistoryRecord,
type CloneImageItem,
type CloneReplicateLevelKey,
type CloneResult,
type CloneSetCountKey,
type EcommerceHistoryRecord,
type EcommerceHistoryStatus,
type EcommerceHistoryTurn,
} from "./utils/clonePersistence";
import {
defaultCloneOutput,
defaultEcommercePlatform,
getPlatformDefaultLanguage,
getPlatformDefaultRatio,
marketOptions,
type CloneOutputKey,
normalizeLanguageForPlatform,
normalizeMarket,
normalizePlatform,
normalizeRatioForPlatform,
} from "./utils/platformRules";
export const ecommerceOssScopes = { export const ecommerceOssScopes = {
productSource: buildGenerationOssScope(["ecommerce", "source", "product"]), productSource: buildGenerationOssScope(["ecommerce", "source", "product"]),
@@ -68,3 +95,237 @@ export function saveUnifiedEcommerceGenerationRecord(input: EcommerceUnifiedReco
export async function deleteEcommerceGenerationRecord(clientRecordId: string): Promise<void> { export async function deleteEcommerceGenerationRecord(clientRecordId: string): Promise<void> {
await deleteGenerationRecordByClientId(clientRecordId); await deleteGenerationRecordByClientId(clientRecordId);
} }
const ecommerceHistoryStatuses = new Set<EcommerceHistoryStatus>(["generating", "done", "failed"]);
const cloneOutputs = new Set<CloneOutputKey>(["set", "detail", "model", "video", "hot"]);
const generationKinds = new Set<EcommerceHistoryTurn["generationKind"]>(["singleImage", "imageEdit", "imageSet", "video"]);
const replicateLevels = new Set<CloneReplicateLevelKey>(["style", "high"]);
function stringValue(value: unknown, fallback = ""): string {
return typeof value === "string" && value.trim() ? value : fallback;
}
function numberValue(value: unknown, fallback: number): number {
return typeof value === "number" && Number.isFinite(value) ? value : fallback;
}
function objectValue(value: unknown): Record<string, unknown> {
return value && typeof value === "object" && !Array.isArray(value) ? value as Record<string, unknown> : {};
}
function stringArrayValue(value: unknown): string[] {
return Array.isArray(value) ? value.filter((item): item is string => typeof item === "string" && Boolean(item.trim())) : [];
}
function normalizeOutput(value: unknown): CloneOutputKey {
if (value === "short-video") return "video";
return cloneOutputs.has(value as CloneOutputKey) ? value as CloneOutputKey : defaultCloneOutput;
}
function normalizeStatus(value: unknown): EcommerceHistoryStatus {
if (value === "completed") return "done";
return ecommerceHistoryStatuses.has(value as EcommerceHistoryStatus) ? value as EcommerceHistoryStatus : "done";
}
function normalizeGenerationKind(value: unknown, output: CloneOutputKey): EcommerceHistoryTurn["generationKind"] {
if (generationKinds.has(value as EcommerceHistoryTurn["generationKind"])) return value as EcommerceHistoryTurn["generationKind"];
if (output === "video") return "video";
if (output === "set") return "imageSet";
return "singleImage";
}
function normalizeReplicateLevel(value: unknown): CloneReplicateLevelKey {
return replicateLevels.has(value as CloneReplicateLevelKey) ? value as CloneReplicateLevelKey : "high";
}
function normalizeSetCounts(value: unknown): Record<CloneSetCountKey, number> {
const counts = objectValue(value);
return {
selling: numberValue(counts.selling, defaultCloneSetCounts.selling),
white: numberValue(counts.white, defaultCloneSetCounts.white),
scene: numberValue(counts.scene, defaultCloneSetCounts.scene),
};
}
function timestampValue(value: unknown, fallback: number): number {
if (typeof value === "number" && Number.isFinite(value)) return value;
if (typeof value === "string") {
const parsed = new Date(value).getTime();
if (Number.isFinite(parsed)) return parsed;
}
return fallback;
}
function imageFromAsset(asset: GenerationRecordAsset, index: number): CloneImageItem {
return {
id: stringValue(asset.taskId, `server-source-${index + 1}`),
src: asset.url,
name: stringValue(asset.label, `source-${index + 1}`),
ossKey: asset.ossKey || undefined,
};
}
function resultFromAsset(asset: GenerationRecordAsset, index: number): CloneResult {
return {
id: stringValue(asset.taskId, `server-result-${index + 1}`),
src: asset.url,
label: stringValue(asset.label, `result-${index + 1}`),
type: asset.mediaType === "video" ? "video" : "image",
};
}
function normalizeHistoryImages(value: unknown, fallback: CloneImageItem[] = []): CloneImageItem[] {
if (!Array.isArray(value)) return fallback;
return value
.map((item, index): CloneImageItem | null => {
const record = objectValue(item);
const src = stringValue(record.src);
if (!src) return null;
return {
id: stringValue(record.id, `server-image-${index + 1}`),
src,
name: stringValue(record.name, `image-${index + 1}`),
width: typeof record.width === "number" ? record.width : undefined,
height: typeof record.height === "number" ? record.height : undefined,
format: typeof record.format === "string" ? record.format : undefined,
mimeType: typeof record.mimeType === "string" ? record.mimeType : undefined,
ossKey: typeof record.ossKey === "string" ? record.ossKey : undefined,
};
})
.filter((item): item is CloneImageItem => Boolean(item));
}
function normalizeHistoryResults(value: unknown, fallback: CloneResult[] = []): CloneResult[] {
if (!Array.isArray(value)) return fallback;
return value
.map((item, index): CloneResult | null => {
const record = objectValue(item);
const src = stringValue(record.src);
if (!src) return null;
return {
id: stringValue(record.id, `server-result-${index + 1}`),
src,
label: stringValue(record.label, `result-${index + 1}`),
type: record.type === "video" ? "video" : "image",
};
})
.filter((item): item is CloneResult => Boolean(item));
}
function buildTurnFromMetadata(value: unknown, fallback: Omit<EcommerceHistoryTurn, "id" | "createdAt">, fallbackCreatedAt: number, index: number): EcommerceHistoryTurn | null {
const turn = objectValue(value);
if (!Object.keys(turn).length) return null;
const output = normalizeOutput(turn.output ?? fallback.output);
const platform = normalizePlatform(stringValue(turn.platform, fallback.platform));
const market = normalizeMarket(stringValue(turn.market, fallback.market));
const language = normalizeLanguageForPlatform(platform, market, stringValue(turn.language, fallback.language));
const ratio = normalizeRatioForPlatform(platform, stringValue(turn.ratio, fallback.ratio), output === "hot" ? undefined : output);
const results = normalizeHistoryResults(turn.results, fallback.results);
const setResultImages = stringArrayValue(turn.setResultImages).length ? stringArrayValue(turn.setResultImages) : fallback.setResultImages;
const status = normalizeStatus(turn.status ?? fallback.status);
return {
id: stringValue(turn.id, `server-turn-${index + 1}`),
createdAt: timestampValue(turn.createdAt, fallbackCreatedAt),
status,
errorMessage: status === "failed" ? stringValue(turn.errorMessage, fallback.errorMessage) : undefined,
output,
modeLabel: typeof turn.modeLabel === "string" ? turn.modeLabel : fallback.modeLabel,
settingLabel: typeof turn.settingLabel === "string" ? turn.settingLabel : fallback.settingLabel,
generationKind: normalizeGenerationKind(turn.generationKind ?? fallback.generationKind, output),
platform,
market,
language,
ratio,
requirement: stringValue(turn.requirement, fallback.requirement),
productImages: normalizeHistoryImages(turn.productImages, fallback.productImages),
results,
setResultImages,
setCounts: normalizeSetCounts(turn.setCounts ?? fallback.setCounts),
detailModules: stringArrayValue(turn.detailModules).length ? stringArrayValue(turn.detailModules) : fallback.detailModules,
modelScenes: stringArrayValue(turn.modelScenes).length ? stringArrayValue(turn.modelScenes) : fallback.modelScenes,
referenceImages: normalizeHistoryImages(turn.referenceImages, fallback.referenceImages),
replicateLevel: normalizeReplicateLevel(turn.replicateLevel ?? fallback.replicateLevel),
};
}
export function ecommerceHistoryRecordFromGenerationRecord(record: GenerationRecord): EcommerceHistoryRecord | null {
if (record.tool !== "ecommerce") return null;
const createdAt = timestampValue(record.createdAt, Date.now());
const output = normalizeOutput(record.mode);
const config = objectValue(record.config);
const metadata = objectValue(record.metadata);
const sourceImages = record.assets.filter((asset) => asset.role === "source").map(imageFromAsset);
const results = record.assets.filter((asset) => asset.role === "result").map(resultFromAsset);
const hasHistoryMarker = metadata.localHistoryStorageKey === ecommerceHistoryStorageKey || typeof metadata.turnCount === "number";
if (!hasHistoryMarker && record.status !== "completed") return null;
if (!hasHistoryMarker && !sourceImages.length && !results.length) return null;
const platform = normalizePlatform(stringValue(config.platform, defaultEcommercePlatform));
const market = normalizeMarket(stringValue(config.market, marketOptions[0]));
const language = normalizeLanguageForPlatform(platform, market, stringValue(config.language, getPlatformDefaultLanguage(platform, market)));
const ratio = normalizeRatioForPlatform(platform, stringValue(config.ratio, getPlatformDefaultRatio(platform, output === "hot" ? undefined : output)), output === "hot" ? undefined : output);
const setResultImages = results.filter((item) => item.type !== "video").map((item) => item.src);
const status = normalizeStatus(record.status);
const baseTurn: Omit<EcommerceHistoryTurn, "id" | "createdAt"> = {
status,
errorMessage: status === "failed" ? "生成失败" : undefined,
output,
modeLabel: typeof metadata.modeLabel === "string" ? metadata.modeLabel : undefined,
settingLabel: typeof metadata.settingLabel === "string" ? metadata.settingLabel : undefined,
generationKind: normalizeGenerationKind(metadata.generationKind, output),
platform,
market,
language,
ratio,
requirement: record.prompt ?? "",
productImages: sourceImages,
results,
setResultImages: output === "set" ? setResultImages : [],
setCounts: normalizeSetCounts(config.setCounts),
detailModules: stringArrayValue(config.detailModules).length ? stringArrayValue(config.detailModules) : defaultCloneDetailModuleIds,
modelScenes: stringArrayValue(config.modelScenes),
referenceImages: normalizeHistoryImages(metadata.referenceImages),
replicateLevel: normalizeReplicateLevel(config.replicateLevel),
};
const turns = Array.isArray(metadata.turns)
? metadata.turns
.map((turn, index) => buildTurnFromMetadata(turn, baseTurn, createdAt, index))
.filter((turn): turn is EcommerceHistoryTurn => Boolean(turn))
: [];
const latestTurn = turns[turns.length - 1] ?? { id: `${record.clientRecordId}-turn-initial`, createdAt, ...baseTurn };
return normalizeEcommerceHistoryRecord({
id: record.clientRecordId,
title: record.title || record.prompt || "生成记录",
createdAt,
status: latestTurn.status,
errorMessage: latestTurn.errorMessage,
output: latestTurn.output,
modeLabel: latestTurn.modeLabel,
settingLabel: latestTurn.settingLabel,
generationKind: latestTurn.generationKind,
platform: latestTurn.platform,
market: latestTurn.market,
language: latestTurn.language,
ratio: latestTurn.ratio,
requirement: latestTurn.requirement,
productImages: latestTurn.productImages,
results: latestTurn.results,
setResultImages: latestTurn.setResultImages,
setCounts: latestTurn.setCounts,
detailModules: latestTurn.detailModules,
modelScenes: latestTurn.modelScenes,
referenceImages: latestTurn.referenceImages,
replicateLevel: latestTurn.replicateLevel,
turns: turns.length ? turns : [latestTurn],
});
}
export async function listEcommerceGenerationHistory(limit = 30): Promise<EcommerceHistoryRecord[]> {
const payload = await listGenerationRecords({ tool: "ecommerce", limit });
return payload.items
.map(ecommerceHistoryRecordFromGenerationRecord)
.filter((record): record is EcommerceHistoryRecord => Boolean(record))
.sort((a, b) => b.createdAt - a.createdAt)
.slice(0, limit);
}
@@ -0,0 +1,116 @@
import { DeleteOutlined, MenuFoldOutlined, MenuUnfoldOutlined, ReloadOutlined } from "@ant-design/icons";
import type { MouseEvent as ReactMouseEvent } from "react";
import type { EcommerceHistoryRecord } from "../utils/clonePersistence";
interface CommandHistorySidebarProps {
collapsed: boolean;
showBackdrop: boolean;
records: EcommerceHistoryRecord[];
activeRecordId: string | null;
isRefreshing: boolean;
refreshMessage: string | null;
refreshStamp: number;
refreshTick: number;
outputLabels: Array<{ key: string; label: string }>;
formatHistoryTime: (timestamp: number) => string;
onToggleCollapsed: () => void;
onCollapse: () => void;
onNewConversation: () => void;
onRefresh: () => void;
onOpenRecord: (record: EcommerceHistoryRecord) => void;
onDeleteRecord: (recordId: string, event: ReactMouseEvent) => void;
}
// 生成记录侧栏:折叠/展开、新建对话、刷新历史、记录列表(点击查看/删除)。
export default function CommandHistorySidebar({
collapsed,
showBackdrop,
records,
activeRecordId,
isRefreshing,
refreshMessage,
refreshStamp,
refreshTick,
outputLabels,
formatHistoryTime,
onToggleCollapsed,
onCollapse,
onNewConversation,
onRefresh,
onOpenRecord,
onDeleteRecord,
}: CommandHistorySidebarProps) {
return (
<>
{showBackdrop ? (
<div className="ecom-command-history__backdrop" role="presentation" onClick={onCollapse} />
) : null}
<aside className="ecom-command-history" aria-label="生成历史">
<div className="ecom-command-history__tools">
<button
type="button"
className="ecom-command-history__toggle"
onClick={onToggleCollapsed}
title={collapsed ? "展开记录" : "收起记录"}
aria-label={collapsed ? "展开记录" : "收起记录"}
aria-expanded={!collapsed}
>
{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
</button>
<button type="button" className="ecom-command-history__new" onClick={onNewConversation}>
</button>
<button
type="button"
className={`ecom-command-history__refresh${isRefreshing ? " is-refreshing" : ""}`}
aria-label={isRefreshing ? "刷新中" : "刷新历史"}
title={isRefreshing ? "刷新中" : "刷新历史"}
onPointerDown={onRefresh}
onClick={onRefresh}
disabled={isRefreshing}
>
<ReloadOutlined />
</button>
</div>
<div className="ecom-command-history__heading">
<strong></strong>
<span>{records.length} </span>
</div>
{refreshMessage ? (
<p key={refreshStamp} className="ecom-command-history__refresh-note" role="status">
{refreshMessage}
</p>
) : null}
<nav className="ecom-command-history__list" aria-label="历史对话">
{records.length ? (
records.map((record) => {
const outputLabel = outputLabels.find((option) => option.key === record.output)?.label || "生成记录";
const statusLabel =
record.status === "generating" ? "生成中" : record.status === "failed" ? "失败" : formatHistoryTime(record.createdAt);
return (
<div key={`${record.id}-${refreshTick}`} className={`ecom-command-history__item${activeRecordId === record.id ? " is-active" : ""}`}>
<button type="button" className="ecom-command-history__item-main" onClick={() => onOpenRecord(record)}>
<strong>{record.title}</strong>
<span>{outputLabel} · {statusLabel}</span>
</button>
<button
type="button"
className="ecom-command-history__item-delete"
aria-label="删除此记录"
title="删除"
onClick={(e) => onDeleteRecord(record.id, e)}
>
<DeleteOutlined />
</button>
</div>
);
})
) : (
<p className="ecom-command-history__empty"></p>
)}
</nav>
</aside>
</>
);
}
@@ -4,7 +4,6 @@ import {
CopyOutlined, CopyOutlined,
EditOutlined, EditOutlined,
FileTextOutlined, FileTextOutlined,
FireOutlined,
GlobalOutlined, GlobalOutlined,
MessageOutlined, MessageOutlined,
SmileOutlined, SmileOutlined,
@@ -0,0 +1,48 @@
import { ossAssets } from "../../../data/ossAssets";
interface ProductSetHostingModalProps {
visible: boolean;
onClose: () => void;
}
// 批量托管上线介绍弹窗。纯展示,关闭即销毁。
export default function ProductSetHostingModal({ visible, onClose }: ProductSetHostingModalProps) {
if (!visible) return null;
const hostingImage = ossAssets.ecommerce.productSet.hosting;
return (
<div className="product-set-hosting-backdrop" role="presentation">
<section className="product-set-hosting-modal" role="dialog" aria-modal="true" aria-label="批量托管上线">
<img src={hostingImage} alt="托管模式" />
<div className="product-set-hosting-content">
<button type="button" className="product-set-hosting-close" onClick={onClose} aria-label="关闭">
×
</button>
<h2>
线
<span>6</span>
</h2>
<strong></strong>
<ul>
<li>
<b></b>
<span>线</span>
</li>
<li>
<b>40%</b>
<span>线</span>
</li>
<li>
<b>AI智能提取</b>
<span></span>
</li>
</ul>
<button type="button" className="product-set-hosting-confirm" onClick={onClose}>
</button>
</div>
</section>
</div>
);
}
@@ -0,0 +1,76 @@
import { useEffect } from "react";
import { createPortal } from "react-dom";
import { CloseOutlined, DeleteOutlined, DownloadOutlined } from "@ant-design/icons";
export interface ProductSetPreviewSelection {
src: string;
label: string;
nodeId?: string;
cardId?: string;
removable?: boolean;
}
interface ProductSetPreviewModalProps {
preview: ProductSetPreviewSelection | null;
onClose: () => void;
onDownload: (preview: ProductSetPreviewSelection) => void;
onRemove: (preview: ProductSetPreviewSelection) => void;
}
// 商品套图大图预览弹窗。通过 portal 挂到 body,支持下载/移除。
export default function ProductSetPreviewModal({ preview, onClose, onDownload, onRemove }: ProductSetPreviewModalProps) {
// Esc 关闭
useEffect(() => {
if (!preview) return;
const handleKey = (event: KeyboardEvent) => {
if (event.key === "Escape") onClose();
};
window.addEventListener("keydown", handleKey);
return () => window.removeEventListener("keydown", handleKey);
}, [preview, onClose]);
if (!preview || typeof document === "undefined") return null;
return createPortal(
<div className="product-set-preview-backdrop" role="presentation" onClick={onClose}>
<section
className="product-set-preview-modal"
role="dialog"
aria-modal="true"
aria-label={preview.label}
onClick={(event) => event.stopPropagation()}
>
<button type="button" className="product-set-preview-close" onClick={onClose} aria-label="关闭预览">
<CloseOutlined />
</button>
<img src={preview.src} alt={preview.label} />
<div className="product-set-preview-footer">
<strong>{preview.label}</strong>
<div className="product-set-preview-actions" aria-label="图片操作">
<button
type="button"
className="product-set-preview-action"
onClick={() => {
onDownload(preview);
}}
>
<DownloadOutlined />
<span></span>
</button>
{preview.removable ? (
<button
type="button"
className="product-set-preview-action product-set-preview-action--danger"
onClick={() => onRemove(preview)}
>
<DeleteOutlined />
<span></span>
</button>
) : null}
</div>
</div>
</section>
</div>,
document.body,
);
}
@@ -0,0 +1,237 @@
import {
CloudUploadOutlined,
FileImageOutlined,
FolderOpenOutlined,
FrownOutlined,
LoadingOutlined,
QuestionCircleOutlined,
} from "@ant-design/icons";
import type { ChangeEvent, DragEvent, KeyboardEvent, RefObject } from "react";
import { toast } from "../../../components/toast/toastStore";
export interface WatermarkImageItem {
src: string;
name: string;
format: string;
}
export type WatermarkStatus = "idle" | "processing" | "done" | "failed";
interface WatermarkToolPageProps {
inputRef: RefObject<HTMLInputElement>;
urlInputRef: RefObject<HTMLInputElement>;
image: WatermarkImageItem | null;
isDragging: boolean;
status: WatermarkStatus;
progress: number;
resultUrl: string | null;
onUpload: (event: ChangeEvent<HTMLInputElement>) => void;
onDrop: (event: DragEvent<HTMLDivElement>) => void;
onDraggingChange: (dragging: boolean) => void;
onRemoveImage: () => void;
onUrlImport: () => void;
onGenerate: () => void;
onDownload: () => void;
onClose: () => void;
}
// 去水印工具页面:上传含水印图片 → AI 清理 → 预览/下载结果。
// 从 EcommercePage 的 watermarkPreview 抽出,状态与处理逻辑仍在父组件,本组件纯展示 + 回调。
export default function WatermarkToolPage({
inputRef,
urlInputRef,
image,
isDragging,
status,
progress,
resultUrl,
onUpload,
onDrop,
onDraggingChange,
onRemoveImage,
onUrlImport,
onGenerate,
onDownload,
onClose,
}: WatermarkToolPageProps) {
return (
<main key="watermark" className="ecom-watermark-page ecom-tool-page-enter" aria-label="去水印">
<input
ref={inputRef}
type="file"
accept="image/*"
className="ecom-command-hidden-file"
onChange={onUpload}
aria-label="上传去水印图片"
/>
<aside className="ecom-watermark-side">
<header className="ecom-quick-set-panel-head ecom-watermark-panel-head">
<strong className="ecom-quick-set-page-title"></strong>
<button type="button" className="ecom-quick-set-back" onClick={onClose}></button>
<button type="button" className="ecom-quick-set-back" onClick={onClose}></button>
</header>
<p className="ecom-watermark-intro"></p>
<section className="ecom-watermark-panel">
<header>
<strong></strong>
<span>{image ? "已上传" : "待上传"}</span>
</header>
<div
className={`ecom-watermark-upload-card${isDragging ? " is-dragging" : ""}${image ? " has-image" : ""}`}
role="button"
tabIndex={0}
onClick={() => inputRef.current?.click()}
onKeyDown={(event: KeyboardEvent) => {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
inputRef.current?.click();
}
}}
onDragEnter={(event) => {
event.preventDefault();
onDraggingChange(true);
}}
onDragOver={(event) => event.preventDefault()}
onDragLeave={() => onDraggingChange(false)}
onDrop={onDrop}
>
{image ? (
<>
<button
type="button"
className="ecom-watermark-remove"
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
onRemoveImage();
}}
aria-label="删除素材"
>
×
</button>
<figure>
<img src={image.src} alt={image.name} />
</figure>
<div>
<strong>{image.name}</strong>
<span>{image.format || "PNG / JPG / WebP"}</span>
</div>
</>
) : (
<>
<CloudUploadOutlined />
<strong></strong>
<span> PNG / JPG / WebP</span>
</>
)}
</div>
<div className="ecom-watermark-url-row">
<input
ref={urlInputRef}
placeholder="粘贴图片 URL"
aria-label="粘贴图片 URL"
onKeyDown={(event) => {
if (event.key === "Enter") void onUrlImport();
}}
/>
<button type="button" onClick={() => void onUrlImport()}></button>
</div>
</section>
<section className="ecom-watermark-panel">
<strong></strong>
<p></p>
</section>
<button
type="button"
className="ecom-watermark-primary"
onClick={onGenerate}
disabled={!image || status === "processing"}
>
{status === "processing" ? <LoadingOutlined /> : <FileImageOutlined />}
{status === "processing" ? "处理中" : "开始去水印"}
</button>
</aside>
<section className="ecom-watermark-workspace">
{!image ? (
<div
className={`ecom-watermark-dropzone${isDragging ? " is-dragging" : ""}`}
role="button"
tabIndex={0}
onClick={() => inputRef.current?.click()}
onKeyDown={(event: KeyboardEvent) => {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
inputRef.current?.click();
}
}}
onDragEnter={(event) => {
event.preventDefault();
onDraggingChange(true);
}}
onDragOver={(event) => event.preventDefault()}
onDragLeave={() => onDraggingChange(false)}
onDrop={onDrop}
>
<CloudUploadOutlined />
<strong></strong>
<span> PNG / JPG / WebP</span>
</div>
) : (
<div className="ecom-watermark-grid">
<article className="ecom-watermark-preview-card">
<span></span>
<img src={image.src} alt="原图" />
</article>
<article className="ecom-watermark-preview-card">
<span></span>
{status === "processing" ? (
<div className="ecom-watermark-processing" role="status" aria-live="polite">
<LoadingOutlined />
<strong></strong>
<em>AI </em>
<div className="ecom-quick-set-progress">
<div className="ecom-quick-set-progress-bar" style={{ width: `${Math.round(progress)}%` }} />
</div>
<em className="ecom-quick-set-progress-text">{Math.round(progress)}%</em>
</div>
) : status === "done" && resultUrl ? (
<>
<img src={resultUrl} alt="去水印结果" />
<button type="button" className="ecom-watermark-zoom" aria-label="查看大图">
<QuestionCircleOutlined />
</button>
</>
) : status === "failed" ? (
<div className="ecom-watermark-empty">
<FrownOutlined />
<strong></strong>
<em></em>
</div>
) : (
<div className="ecom-watermark-empty">
<FileImageOutlined />
<strong></strong>
<em></em>
</div>
)}
<div className="ecom-watermark-actions">
<button type="button" onClick={() => toast.success("已加入资产库")} disabled={status !== "done"}>
<FolderOpenOutlined />
</button>
<button type="button" onClick={onDownload} disabled={status !== "done"}>
<CloudUploadOutlined />
</button>
</div>
</article>
</div>
)}
</section>
</main>
);
}
@@ -13,8 +13,6 @@ import {
} from "./ecommerceVideoService"; } from "./ecommerceVideoService";
import { waitForTask } from "../../api/taskSubscription"; import { waitForTask } from "../../api/taskSubscription";
import { ServerRequestError } from "../../api/serverConnection"; import { ServerRequestError } from "../../api/serverConnection";
import { ENTERPRISE_DEFAULT_VIDEO_MODEL } from "../../utils/enterpriseVideoPolicy";
import { resolveVideoRequestModel } from "../../utils/resolveVideoModel";
import { import {
saveEcommerceVideoState, saveEcommerceVideoState,
} from "./ecommerceVideoKeepalive"; } from "./ecommerceVideoKeepalive";
@@ -60,11 +60,17 @@ export interface CloneSavedSetting {
requirement: string; requirement: string;
} }
export interface EcommerceHistoryRecord { export type EcommerceHistoryStatus = "generating" | "done" | "failed";
export interface EcommerceHistoryTurn {
id: string; id: string;
title: string;
createdAt: number; createdAt: number;
status: EcommerceHistoryStatus;
errorMessage?: string;
output: CloneOutputKey; output: CloneOutputKey;
modeLabel?: string;
settingLabel?: string;
generationKind?: "singleImage" | "imageEdit" | "imageSet" | "video";
platform: string; platform: string;
market: string; market: string;
language: string; language: string;
@@ -80,6 +86,32 @@ export interface EcommerceHistoryRecord {
replicateLevel: CloneReplicateLevelKey; replicateLevel: CloneReplicateLevelKey;
} }
export interface EcommerceHistoryRecord {
id: string;
title: string;
createdAt: number;
status?: EcommerceHistoryStatus;
errorMessage?: string;
output: CloneOutputKey;
modeLabel?: string;
settingLabel?: string;
generationKind?: "singleImage" | "imageEdit" | "imageSet" | "video";
platform: string;
market: string;
language: string;
ratio: string;
requirement: string;
productImages: CloneImageItem[];
results: CloneResult[];
setResultImages: string[];
setCounts: Record<CloneSetCountKey, number>;
detailModules: string[];
modelScenes: string[];
referenceImages: CloneImageItem[];
replicateLevel: CloneReplicateLevelKey;
turns?: EcommerceHistoryTurn[];
}
export const cloneLatestSettingStorageKey = "omniai.clone-ai.latest-setting"; export const cloneLatestSettingStorageKey = "omniai.clone-ai.latest-setting";
export const ecommerceHistoryStorageKey = "omniai.ecommerce.history.records"; export const ecommerceHistoryStorageKey = "omniai.ecommerce.history.records";
@@ -148,9 +180,76 @@ export function removeFilePayloadFromImages(images: CloneImageItem[]): CloneImag
})); }));
} }
export function normalizeEcommerceHistoryRecord(record: EcommerceHistoryRecord): EcommerceHistoryRecord { export function getTurnResults(turn: EcommerceHistoryTurn): CloneResult[] {
if (turn.results?.length) return turn.results.filter((item) => item.src);
if (turn.output !== "set") return [];
return (turn.setResultImages ?? [])
.filter(Boolean)
.map((src, index) => ({ id: `${turn.id}-set-${index}`, src, label: `套图 ${index + 1}` }));
}
export function buildHistoryTurnFromRecord(record: EcommerceHistoryRecord): EcommerceHistoryTurn {
return { return {
id: `${record.id}-turn-initial`,
createdAt: record.createdAt,
status: record.status ?? "done",
errorMessage: record.status === "failed" ? record.errorMessage : undefined,
output: record.output,
modeLabel: record.modeLabel,
settingLabel: record.settingLabel,
generationKind: record.generationKind,
platform: record.platform,
market: record.market,
language: record.language,
ratio: record.ratio,
requirement: record.requirement,
productImages: record.productImages ?? [],
results: record.results ?? [],
setResultImages: record.setResultImages ?? [],
setCounts: record.setCounts ?? defaultCloneSetCounts,
detailModules: record.detailModules ?? defaultCloneDetailModuleIds,
modelScenes: record.modelScenes ?? [],
referenceImages: record.referenceImages ?? [],
replicateLevel: record.replicateLevel ?? "high",
};
}
export function normalizeEcommerceHistoryTurn(turn: EcommerceHistoryTurn, fallback: EcommerceHistoryRecord, index: number): EcommerceHistoryTurn {
const status = turn.status ?? fallback.status ?? "done";
return {
id: typeof turn.id === "string" && turn.id ? turn.id : `${fallback.id}-turn-${index + 1}`,
createdAt: typeof turn.createdAt === "number" ? turn.createdAt : fallback.createdAt,
status,
errorMessage: status === "failed" ? turn.errorMessage ?? fallback.errorMessage : undefined,
output: turn.output ?? fallback.output,
modeLabel: turn.modeLabel ?? fallback.modeLabel,
settingLabel: turn.settingLabel ?? fallback.settingLabel,
generationKind: turn.generationKind ?? fallback.generationKind,
platform: turn.platform ?? fallback.platform,
market: turn.market ?? fallback.market,
language: turn.language ?? fallback.language,
ratio: turn.ratio ?? fallback.ratio,
requirement: turn.requirement ?? fallback.requirement,
productImages: removeFilePayloadFromImages(Array.isArray(turn.productImages) ? turn.productImages : fallback.productImages),
results: Array.isArray(turn.results) ? turn.results.filter(isCloneResult) : [],
setResultImages: Array.isArray(turn.setResultImages) ? turn.setResultImages.filter(Boolean) : [],
setCounts: turn.setCounts ?? fallback.setCounts ?? defaultCloneSetCounts,
detailModules: turn.detailModules ?? fallback.detailModules ?? defaultCloneDetailModuleIds,
modelScenes: turn.modelScenes ?? fallback.modelScenes ?? [],
referenceImages: removeFilePayloadFromImages(Array.isArray(turn.referenceImages) ? turn.referenceImages : fallback.referenceImages ?? []),
replicateLevel: turn.replicateLevel ?? fallback.replicateLevel ?? "high",
};
}
export function normalizeEcommerceHistoryRecord(record: EcommerceHistoryRecord): EcommerceHistoryRecord {
const status = record.status ?? "done";
const baseRecord = {
...record, ...record,
status,
errorMessage: status === "failed" ? record.errorMessage : undefined,
modeLabel: record.modeLabel,
settingLabel: record.settingLabel,
generationKind: record.generationKind,
productImages: removeFilePayloadFromImages(record.productImages), productImages: removeFilePayloadFromImages(record.productImages),
referenceImages: removeFilePayloadFromImages(record.referenceImages ?? []), referenceImages: removeFilePayloadFromImages(record.referenceImages ?? []),
results: record.results ?? [], results: record.results ?? [],
@@ -160,6 +259,14 @@ export function normalizeEcommerceHistoryRecord(record: EcommerceHistoryRecord):
modelScenes: record.modelScenes ?? [], modelScenes: record.modelScenes ?? [],
replicateLevel: record.replicateLevel ?? "high", replicateLevel: record.replicateLevel ?? "high",
}; };
const rawTurns = Array.isArray(record.turns) && record.turns.length
? record.turns
: [buildHistoryTurnFromRecord(baseRecord)];
const turns = rawTurns.map((turn, index) => normalizeEcommerceHistoryTurn(turn, baseRecord, index));
return {
...baseRecord,
turns,
};
} }
export function readCloneLatestSetting(): CloneSavedSetting | null { export function readCloneLatestSetting(): CloneSavedSetting | null {
+16 -402
View File
@@ -1,4 +1,5 @@
import { formatAspectRatio, normalizeRatioToken } from "./ratioUtils"; import { formatAspectRatio, normalizeRatioToken } from "./ratioUtils";
import { getPlatformRules } from "../../../api/platformRulesClient";
export type ProductSetOutputKey = "set" | "detail" | "model" | "video"; export type ProductSetOutputKey = "set" | "detail" | "model" | "video";
export type CloneOutputKey = ProductSetOutputKey | "hot"; export type CloneOutputKey = ProductSetOutputKey | "hot";
@@ -18,414 +19,26 @@ export interface EcommercePlatformSpec {
tip?: string; tip?: string;
aliases?: string[]; aliases?: string[];
} }
export const platformSpecOptions: EcommercePlatformSpec[] = [
{ // 业务数据由后端 API 下发(AGENTS.md 规则4),见 src/api/platformRulesClient.ts。
label: "淘宝/天猫", // 启动 gating 保证本模块求值时(随 EcommercePage chunk 加载)缓存已填充。
ratios: ["淘宝主图 / SKU 图 800×800px", "详情页宽 750px", "详情页宽 790px"], // 顶层读取一次:gating 后 getPlatformRules() 返回 API 数据;未就绪则返回 fallback。
defaultRatio: "淘宝主图 / SKU 图 800×800px", const rules = getPlatformRules();
ratioGroups: {
set: { export const platformSpecOptions: EcommercePlatformSpec[] = rules.platformSpecOptions;
ratios: ["1000×1000px\u00a0\u00a0\u00a01:1", "800×800px\u00a0\u00a0\u00a01:1"],
defaultRatio: "1000×1000px\u00a0\u00a0\u00a01:1",
},
detail: {
ratios: [
"750×1000px\u00a0\u00a0\u00a03:4",
"790×1053px\u00a0\u00a0\u00a03:4",
"750×1125px\u00a0\u00a0\u00a02:3",
"790×1185px\u00a0\u00a0\u00a02:3",
],
defaultRatio: "750×1000px\u00a0\u00a0\u00a03:4",
},
model: {
ratios: ["750×1000px\u00a0\u00a0\u00a03:4"],
defaultRatio: "750×1000px\u00a0\u00a0\u00a03:4",
},
video: {
ratios: ["1080×1920px\u00a0\u00a0\u00a09:16", "1080×1440px\u00a0\u00a0\u00a03:4", "1080×1080px\u00a0\u00a0\u00a01:1"],
defaultRatio: "1080×1920px\u00a0\u00a0\u00a09:16",
},
hot: {
ratios: ["800×800px\u00a0\u00a0\u00a01:1"],
defaultRatio: "800×800px\u00a0\u00a0\u00a01:1",
},
},
specs: ["主图 / SKU 图 800×800px,≤3MB", "详情页宽 750px 或 790px,单张高度≤1546px"],
tip: "建议主图 200-400KB JPG,超过 500KB 会影响加载速度。",
},
{
label: "京东",
ratios: ["京东主图 / SKU 图 800×800px", "详情页宽 750px", "首图主体占比 ≥80%"],
defaultRatio: "京东主图 / SKU 图 800×800px",
ratioGroups: {
set: {
ratios: ["1000×1000px\u00a0\u00a0\u00a01:1"],
defaultRatio: "1000×1000px\u00a0\u00a0\u00a01:1",
},
detail: {
ratios: [
"750×1000px\u00a0\u00a0\u00a03:4",
"990×1320px\u00a0\u00a0\u00a03:4",
"750×1125px\u00a0\u00a0\u00a02:3",
"990×1485px\u00a0\u00a0\u00a02:3",
],
defaultRatio: "750×1000px\u00a0\u00a0\u00a03:4",
},
model: {
ratios: ["750×1125px\u00a0\u00a0\u00a02:3", "990×1485px\u00a0\u00a0\u00a02:3"],
defaultRatio: "750×1125px\u00a0\u00a0\u00a02:3",
},
video: {
ratios: ["1080×1920px\u00a0\u00a0\u00a09:16", "1920×1080px\u00a0\u00a0\u00a016:9"],
defaultRatio: "1080×1920px\u00a0\u00a0\u00a09:16",
},
hot: {
ratios: ["800×800px\u00a0\u00a0\u00a01:1"],
defaultRatio: "800×800px\u00a0\u00a0\u00a01:1",
},
},
specs: ["主图 / SKU 图 800×800px,白底,≤3MB", "详情页宽 750px,首图主体占比 ≥80%"],
},
{
label: "拼多多",
ratios: ["主图 750×352px", "主图 800×800px", "详情页宽 750px"],
defaultRatio: "主图 750×352px",
ratioGroups: {
set: {
ratios: ["800×800px\u00a0\u00a0\u00a01:1", "750×1000px\u00a0\u00a0\u00a03:4"],
defaultRatio: "800×800px\u00a0\u00a0\u00a01:1",
},
detail: {
ratios: ["750×1000px\u00a0\u00a0\u00a03:4", "750×1125px\u00a0\u00a0\u00a02:3"],
defaultRatio: "750×1000px\u00a0\u00a0\u00a03:4",
},
model: {
ratios: ["750×1000px\u00a0\u00a0\u00a03:4"],
defaultRatio: "750×1000px\u00a0\u00a0\u00a03:4",
},
video: {
ratios: ["1080×1920px\u00a0\u00a0\u00a09:16"],
defaultRatio: "1080×1920px\u00a0\u00a0\u00a09:16",
},
hot: {
ratios: ["800×800px\u00a0\u00a0\u00a01:1"],
defaultRatio: "800×800px\u00a0\u00a0\u00a01:1",
},
},
specs: ["主图 750×352px 或 800×800px,≤1MB", "详情页宽 750px,要求纯白底、无水印、无拼接"],
},
{
label: "抖音电商",
ratios: ["短视频1080×1920px"],
defaultRatio: "短视频1080×1920px",
ratioGroups: {
video: {
ratios: ["1080×1920px\u00a0\u00a0\u00a09:16"],
defaultRatio: "1080×1920px\u00a0\u00a0\u00a09:16",
},
hot: {
ratios: ["800×800px\u00a0\u00a0\u00a01:1"],
defaultRatio: "800×800px\u00a0\u00a0\u00a01:1",
},
},
specs: ["短视频 1080×1920px9:16", "30s 内最佳"],
},
{
label: "亚马逊 Amazon",
ratios: ["主图 ≥1600×1600px", "建议 2000×2000px+", "最小 500×500px"],
defaultRatio: "主图 ≥1600×1600px",
ratioGroups: {
set: {
ratios: ["1600×1600px\u00a0\u00a0\u00a01:1"],
defaultRatio: "1600×1600px\u00a0\u00a0\u00a01:1",
},
detail: {
ratios: ["1600×1600px\u00a0\u00a0\u00a01:1", "1200×1800px\u00a0\u00a0\u00a02:3", "1200×1600px\u00a0\u00a0\u00a03:4"],
defaultRatio: "1200×1800px\u00a0\u00a0\u00a02:3",
},
model: {
ratios: ["1200×1800px\u00a0\u00a0\u00a02:3"],
defaultRatio: "1200×1800px\u00a0\u00a0\u00a02:3",
},
video: {
ratios: ["1920×1080px\u00a0\u00a0\u00a016:9"],
defaultRatio: "1920×1080px\u00a0\u00a0\u00a016:9",
},
hot: {
ratios: ["1600×1600px\u00a0\u00a0\u00a01:1"],
defaultRatio: "1600×1600px\u00a0\u00a0\u00a01:1",
},
},
specs: ["主图 1600×1600px+,纯白底,≤10MB", "最小 500×500px,建议 2000px+ 以支持缩放"],
aliases: ["亚马逊"],
},
{
label: "Shopee",
ratios: ["商品主图 1024×1024px", "基础主图 800×800px"],
defaultRatio: "商品主图 1024×1024px",
ratioGroups: {
set: {
ratios: ["800×800px\u00a0\u00a0\u00a01:1"],
defaultRatio: "800×800px\u00a0\u00a0\u00a01:1",
},
detail: {
ratios: ["750×1000px\u00a0\u00a0\u00a03:4", "750×1125px\u00a0\u00a0\u00a02:3"],
defaultRatio: "750×1000px\u00a0\u00a0\u00a03:4",
},
model: {
ratios: ["750×1000px\u00a0\u00a0\u00a03:4"],
defaultRatio: "750×1000px\u00a0\u00a0\u00a03:4",
},
video: {
ratios: ["1080×1920px\u00a0\u00a0\u00a09:16"],
defaultRatio: "1080×1920px\u00a0\u00a0\u00a09:16",
},
hot: {
ratios: ["800×800px\u00a0\u00a0\u00a01:1"],
defaultRatio: "800×800px\u00a0\u00a0\u00a01:1",
},
},
specs: ["商品主图推荐 1024×1024px,基础 800×800px", "≤2MB,白底或浅色底"],
aliases: ["虾皮 Shopee/Lazada", "虾皮"],
},
{
label: "Lazada",
ratios: ["商品主图 800×800px"],
defaultRatio: "商品主图 800×800px",
ratioGroups: {
set: {
ratios: ["800×800px\u00a0\u00a0\u00a01:1"],
defaultRatio: "800×800px\u00a0\u00a0\u00a01:1",
},
detail: {
ratios: ["750×1000px\u00a0\u00a0\u00a03:4", "750×1125px\u00a0\u00a0\u00a02:3"],
defaultRatio: "750×1000px\u00a0\u00a0\u00a03:4",
},
model: {
ratios: ["750×1000px\u00a0\u00a0\u00a03:4"],
defaultRatio: "750×1000px\u00a0\u00a0\u00a03:4",
},
video: {
ratios: ["1080×1920px\u00a0\u00a0\u00a09:16"],
defaultRatio: "1080×1920px\u00a0\u00a0\u00a09:16",
},
hot: {
ratios: ["800×800px\u00a0\u00a0\u00a01:1"],
defaultRatio: "800×800px\u00a0\u00a0\u00a01:1",
},
},
specs: ["商品主图 800×800px1:1"],
},
{
label: "Instagram",
ratios: ["帖子 1080×1350px", "帖子 1080×1080px", "Stories / Reels 1080×1920px", "头像 320×320px"],
defaultRatio: "帖子 1080×1350px",
ratioGroups: {
set: {
ratios: ["1080×1080px\u00a0\u00a0\u00a01:1", "1080×1350px\u00a0\u00a0\u00a04:5"],
defaultRatio: "1080×1080px\u00a0\u00a0\u00a01:1",
},
detail: {
ratios: ["1080×1350px\u00a0\u00a0\u00a04:5"],
defaultRatio: "1080×1350px\u00a0\u00a0\u00a04:5",
},
model: {
ratios: ["1080×1350px\u00a0\u00a0\u00a04:5"],
defaultRatio: "1080×1350px\u00a0\u00a0\u00a04:5",
},
video: {
ratios: ["1080×1920px\u00a0\u00a0\u00a09:16", "1080×1350px\u00a0\u00a0\u00a04:5"],
defaultRatio: "1080×1920px\u00a0\u00a0\u00a09:16",
},
},
specs: ["帖子 1080×1350px 或 1080×1080px", "Stories / Reels 封面 1080×1920px,头像 320×320px"],
tip: "建议 ≤8MB JPG。",
aliases: ["Instagram Reels"],
},
{
label: "速卖通",
ratios: ["主图 800×800px", "主图 1000×1000px+"],
defaultRatio: "主图 800×800px",
ratioGroups: {
set: {
ratios: ["1000×1000px\u00a0\u00a0\u00a01:1"],
defaultRatio: "1000×1000px\u00a0\u00a0\u00a01:1",
},
detail: {
ratios: ["750×1125px\u00a0\u00a0\u00a02:3", "750×1000px\u00a0\u00a0\u00a03:4"],
defaultRatio: "750×1125px\u00a0\u00a0\u00a02:3",
},
model: {
ratios: ["750×1125px\u00a0\u00a0\u00a02:3"],
defaultRatio: "750×1125px\u00a0\u00a0\u00a02:3",
},
video: {
ratios: ["1080×1920px\u00a0\u00a0\u00a09:16", "1920×1080px\u00a0\u00a0\u00a016:9"],
defaultRatio: "1080×1920px\u00a0\u00a0\u00a09:16",
},
hot: {
ratios: ["800×800px\u00a0\u00a0\u00a01:1"],
defaultRatio: "800×800px\u00a0\u00a0\u00a01:1",
},
},
specs: ["主图建议 800×800px 或更高,1:1", "适合跨境电商主图、SKU 图和场景图"],
},
{
label: "eBay",
ratios: ["商品图1:1", "白底多角度展示图 1:1"],
defaultRatio: "商品图1:1",
ratioGroups: {
set: {
ratios: ["1600×1600px\u00a0\u00a0\u00a01:1"],
defaultRatio: "1600×1600px\u00a0\u00a0\u00a01:1",
},
detail: {
ratios: ["1000×1500px\u00a0\u00a0\u00a02:3", "1200×1600px\u00a0\u00a0\u00a03:4"],
defaultRatio: "1000×1500px\u00a0\u00a0\u00a02:3",
},
model: {
ratios: ["1000×1500px\u00a0\u00a0\u00a02:3"],
defaultRatio: "1000×1500px\u00a0\u00a0\u00a02:3",
},
video: {
ratios: ["1920×1080px\u00a0\u00a0\u00a016:9", "1080×1920px\u00a0\u00a0\u00a09:16"],
defaultRatio: "1920×1080px\u00a0\u00a0\u00a016:9",
},
hot: {
ratios: ["1600×1600px\u00a0\u00a0\u00a01:1"],
defaultRatio: "1600×1600px\u00a0\u00a0\u00a01:1",
},
},
specs: ["商品图建议 1:1,主体清晰居中", "适合白底主图和多角度展示图"],
},
{
label: "TikTok Shop",
ratios: ["商品主图 1:1", "短视频/ 竖版封面 9:16"],
defaultRatio: "商品主图 1:1",
ratioGroups: {
set: {
ratios: ["1280×1280px\u00a0\u00a0\u00a01:1"],
defaultRatio: "1280×1280px\u00a0\u00a0\u00a01:1",
},
detail: {
ratios: ["1080×1350px\u00a0\u00a0\u00a04:5"],
defaultRatio: "1080×1350px\u00a0\u00a0\u00a04:5",
},
model: {
ratios: ["1080×1350px\u00a0\u00a0\u00a04:5"],
defaultRatio: "1080×1350px\u00a0\u00a0\u00a04:5",
},
video: {
ratios: ["1080×1920px\u00a0\u00a0\u00a09:16"],
defaultRatio: "1080×1920px\u00a0\u00a0\u00a09:16",
},
hot: {
ratios: ["800×800px\u00a0\u00a0\u00a01:1"],
defaultRatio: "800×800px\u00a0\u00a0\u00a01:1",
},
},
specs: ["商品主图建议 1:1", "短视频竖版封面建议 9:16"],
},
];
export const platformOptions = platformSpecOptions.map((option) => option.label); export const platformOptions = platformSpecOptions.map((option) => option.label);
const getPlatformLogoText = (value: string) => { export const marketLanguageOptions: Array<{ country: string; languages: string[] }> =
const normalized = value.toLowerCase(); rules.marketLanguageOptions;
if (value.includes("淘宝") || value.includes("天猫")) return "淘";
if (value.includes("京东")) return "京";
if (value.includes("拼多多") || value.includes("鎷煎澶")) return "拼";
if (value.includes("抖音")) return "抖";
if (normalized.includes("amazon")) return "a";
if (normalized.includes("shopee")) return "S";
if (normalized.includes("lazada")) return "L";
if (normalized.includes("instagram")) return "IG";
if (value.includes("速卖通") || value.includes("閫熷崠閫")) return "AE";
if (normalized.includes("ebay")) return "eB";
if (normalized.includes("tiktok")) return "♪";
return value.trim().slice(0, 1).toUpperCase() || "商";
};
const getPlatformLogoVariant = (value: string) => {
const normalized = value.toLowerCase();
if (value.includes("淘宝") || value.includes("天猫")) return "taobao";
if (value.includes("京东")) return "jd";
if (value.includes("拼多多") || value.includes("鎷煎澶")) return "pdd";
if (value.includes("抖音")) return "douyin";
if (normalized.includes("amazon")) return "amazon";
if (normalized.includes("shopee")) return "shopee";
if (normalized.includes("lazada")) return "lazada";
if (normalized.includes("instagram")) return "instagram";
if (value.includes("速卖通") || value.includes("閫熷崠閫")) return "aliexpress";
if (normalized.includes("ebay")) return "ebay";
if (normalized.includes("tiktok")) return "tiktok";
return "default";
};
const getPlatformLogoMarks = (value: string) => {
if (value.includes("淘宝") || value.includes("天猫")) return ["淘", "猫"];
return [getPlatformLogoText(value)];
};
export const marketLanguageOptions: Array<{ country: string; languages: string[] }> = [
{ country: "中国", languages: ["中文"] },
{ country: "美国", languages: ["英文"] },
{ country: "加拿大", languages: ["英文", "法文"] },
{ country: "英国", languages: ["英文"] },
{ country: "德国", languages: ["德文"] },
{ country: "法国", languages: ["法文"] },
{ country: "意大利", languages: ["意大利语"] },
{ country: "西班牙", languages: ["西班牙语"] },
{ country: "日本", languages: ["日文"] },
{ country: "韩国", languages: ["韩文"] },
{ country: "澳大利亚", languages: ["英文"] },
{ country: "新加坡", languages: ["英文", "中文"] },
{ country: "马来西亚", languages: ["马来语", "英文", "中文"] },
{ country: "印尼", languages: ["印度尼西亚语", "英文"] },
{ country: "越南", languages: ["越南语", "英文"] },
{ country: "泰国", languages: ["泰语", "英文"] },
{ country: "菲律宾", languages: ["菲律宾语(他加禄语)", "英文"] },
{ country: "巴西", languages: ["葡萄牙语"] },
{ country: "墨西哥", languages: ["西班牙语"] },
{ country: "智利", languages: ["西班牙语"] },
{ country: "哥伦比亚", languages: ["西班牙语"] },
{ country: "阿联酋", languages: ["阿拉伯语", "英文"] },
{ country: "沙特阿拉伯", languages: ["阿拉伯语", "英文"] },
{ country: "俄罗斯", languages: ["俄语"] },
{ country: "波兰", languages: ["波兰语"] },
];
export const marketOptions = marketLanguageOptions.map((option) => option.country); export const marketOptions = marketLanguageOptions.map((option) => option.country);
export const languageOptions = Array.from(new Set(marketLanguageOptions.flatMap((option) => option.languages))); export const languageOptions = Array.from(new Set(marketLanguageOptions.flatMap((option) => option.languages)));
export const languageAliases: Record<string, string> = { export const languageAliases: Record<string, string> = rules.languageAliases;
"英文": "英文",
"中文": "中文",
"英语": "英文",
"日语": "日文",
"日文": "日文",
"德语": "德文",
"德文": "德文",
"法语": "法文",
"法文": "法文",
"韩语": "韩文",
"韩文": "韩文",
"西文": "西班牙语",
"西班牙语": "西班牙语",
"葡文": "葡萄牙语",
"葡萄牙语": "葡萄牙语",
"印尼语": "印度尼西亚语",
"印度尼西亚语": "印度尼西亚语",
"菲律宾语": "菲律宾语(他加禄语)",
"菲律宾语(他加禄语)": "菲律宾语(他加禄语)",
};
export const defaultPlatformSpec = platformSpecOptions[0]!; export const defaultPlatformSpec = platformSpecOptions[0]!;
export const getPlatformSpec = (value: string) => export const getPlatformSpec = (value: string) =>
platformSpecOptions.find((option) => option.label === value || option.aliases?.includes(value)) ?? defaultPlatformSpec; platformSpecOptions.find((option) => option.label === value || option.aliases?.includes(value)) ?? defaultPlatformSpec;
export const legacyPlatformAliases: Record<string, string> = { export const legacyPlatformAliases: Record<string, string> = rules.legacyPlatformAliases;
"淘宝/天猫": "淘宝/天猫",
"京东": "京东",
"拼多多": "拼多多",
"抖音电商": "抖音电商",
"亚马逊Amazon": "亚马逊 Amazon",
"速卖通": "速卖通",
};
export const normalizePlatform = (value: string) => getPlatformSpec(legacyPlatformAliases[value] ?? value).label; export const normalizePlatform = (value: string) => getPlatformSpec(legacyPlatformAliases[value] ?? value).label;
export const domesticPlatformLabels = new Set(["淘宝/天猫", "京东", "拼多多", "抖音电商"]); export const domesticPlatformLabels = new Set(rules.domesticPlatformLabels);
export const domesticPlatformLanguages = ["中文"]; export const domesticPlatformLanguages = rules.domesticPlatformLanguages;
export const isDomesticPlatform = (platformValue: string) => domesticPlatformLabels.has(normalizePlatform(platformValue)); export const isDomesticPlatform = (platformValue: string) => domesticPlatformLabels.has(normalizePlatform(platformValue));
export const getPlatformRatioGroup = (value: string, mode?: PlatformRatioModeKey): PlatformRatioGroup => { export const getPlatformRatioGroup = (value: string, mode?: PlatformRatioModeKey): PlatformRatioGroup => {
const platformSpec = getPlatformSpec(value); const platformSpec = getPlatformSpec(value);
@@ -467,7 +80,7 @@ export const normalizeLanguageForPlatform = (platformValue: string, marketValue:
return platformLanguages.includes(normalizedLanguage) ? normalizedLanguage : getPlatformDefaultLanguage(platformValue, marketValue); return platformLanguages.includes(normalizedLanguage) ? normalizedLanguage : getPlatformDefaultLanguage(platformValue, marketValue);
}; };
export const defaultEcommercePlatform = "淘宝/天猫"; export const defaultEcommercePlatform = rules.defaultEcommercePlatform;
export const defaultProductSetOutput: ProductSetOutputKey = "set"; export const defaultProductSetOutput: ProductSetOutputKey = "set";
export const defaultCloneOutput: CloneOutputKey = "set"; export const defaultCloneOutput: CloneOutputKey = "set";
@@ -477,3 +90,4 @@ export const formatUploadedImageRatio = (image?: { width?: number; height?: numb
if (!image.width || !image.height) return `上传图片\u00a0\u00a0\u00a0原图比例${format}`; if (!image.width || !image.height) return `上传图片\u00a0\u00a0\u00a0原图比例${format}`;
return `上传图片 ${image.width}×${image.height}px\u00a0\u00a0\u00a0${formatAspectRatio(image.width, image.height)}${format}`; return `上传图片 ${image.width}×${image.height}px\u00a0\u00a0\u00a0${formatAspectRatio(image.width, image.height)}${format}`;
}; };
-1
View File
@@ -1,5 +1,4 @@
import { create } from "zustand"; import { create } from "zustand";
import type { WebGenerationPreviewTask } from "../types";
export type QueueItemStatus = "pending" | "running" | "completed" | "failed" | "cancelled"; export type QueueItemStatus = "pending" | "running" | "completed" | "failed" | "cancelled";
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
+12 -43
View File
@@ -1,4 +1,4 @@
@media (max-width: 640px) { @media (max-width: 640px) {
html body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover { html body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover {
position: absolute !important; position: absolute !important;
@@ -3461,9 +3461,8 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
row-gap: 10px !important; row-gap: 10px !important;
} }
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button { html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings {
flex: 1 1 calc(50% - 5px) !important; display: none !important;
justify-content: flex-start !important;
} }
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar { html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar {
@@ -3472,39 +3471,6 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
} }
@media (max-width: 420px) { @media (max-width: 420px) {
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 7px !important;
justify-content: stretch !important;
overflow: visible !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button {
display: inline-flex !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: 42px !important;
min-height: 42px !important;
padding: 0 !important;
justify-content: center !important;
font-size: 0 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button > span:not(.ecom-command-option-icon) {
display: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings .ecom-command-option-icon {
display: inline-grid !important;
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
margin: 0 !important;
font-size: 14px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar { html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar {
flex-direction: row !important; flex-direction: row !important;
align-items: center !important; align-items: center !important;
@@ -3559,15 +3525,18 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
z-index: 160 !important; z-index: 160 !important;
} }
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--platform { html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--platforms {
width: min(360px, calc(100% - var(--composer-popover-left, 0px))) !important; width: fit-content !important;
max-width: min(360px, calc(100% - var(--composer-popover-left, 0px))) !important; min-width: 0 !important;
max-width: min(320px, calc(100% - var(--composer-popover-left, 0px))) !important;
} }
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--languages, html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--languages,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--ratio-picker { html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--ratio-picker,
width: min(420px, calc(100% - var(--composer-popover-left, 0px))) !important; html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--duration {
max-width: min(420px, calc(100% - var(--composer-popover-left, 0px))) !important; width: fit-content !important;
min-width: 0 !important;
max-width: min(320px, calc(100% - var(--composer-popover-left, 0px))) !important;
} }
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--settings { html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--settings {
-1
View File
@@ -1,4 +1,3 @@
import type { ReactNode } from "react";
export type WebViewKey = export type WebViewKey =
| "home" | "home"
+1 -1
View File
@@ -10,7 +10,7 @@ interface ErrorReport {
sessionId?: string; sessionId?: string;
} }
let reportQueue: ErrorReport[] = []; const reportQueue: ErrorReport[] = [];
let flushTimer: ReturnType<typeof setTimeout> | null = null; let flushTimer: ReturnType<typeof setTimeout> | null = null;
function getSessionId(): string | undefined { function getSessionId(): string | undefined {
+10 -2
View File
@@ -42,8 +42,16 @@ export default defineConfig(({ command }) => {
if (id.includes("node_modules/react") || id.includes("node_modules/react-dom") || id.includes("node_modules/scheduler")) { if (id.includes("node_modules/react") || id.includes("node_modules/react-dom") || id.includes("node_modules/scheduler")) {
return "vendor-react"; return "vendor-react";
} }
if (id.includes("node_modules/@ant-design") || id.includes("node_modules/antd") || id.includes("node_modules/rc-")) { // 项目未安装 antd,只用了 @ant-design/icons + @phosphor-icons/react。
return "vendor-antd"; // 把图标库及其依赖(icons-svg / colors / fast-color / rc-util)单独成块,
// 避免它们被打进 EcommercePage 业务 chunk,方便浏览器长缓存。
if (
id.includes("node_modules/@ant-design") ||
id.includes("node_modules/@phosphor-icons") ||
id.includes("node_modules/rc-util") ||
id.includes("node_modules/rc-")
) {
return "vendor-icons";
} }
}, },
}, },