Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 xiaoxia
|
4a695c6eb6 | ||
|
xiaoxia
|
04c28dc705 | ||
|
xiaoxia
|
493e85ce0e | ||
|
xiaoxia
|
445267a3b2 | ||
|
xiaoxia
|
42d6e45089 | ||
|
xiaoxia
|
eaed4b4cbf | ||
|
xiaoxia
|
2b4bcefc57 | ||
|
xiaoxia
|
6097dacbd3 |
Generated
+5
-3
@@ -12,6 +12,8 @@
|
||||
"@tanstack/react-query": "^5.45.0",
|
||||
"antd": "^5.18.0",
|
||||
"axios": "^1.7.2",
|
||||
"classnames": "^2.5.1",
|
||||
"dayjs": "^1.11.23",
|
||||
"mp4box": "^2.4.1",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
@@ -3005,9 +3007,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/dayjs": {
|
||||
"version": "1.11.21",
|
||||
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.21.tgz",
|
||||
"integrity": "sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==",
|
||||
"version": "1.11.23",
|
||||
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.23.tgz",
|
||||
"integrity": "sha512-QDTCU0M0MxR3hQfnlDJfwekQiaanm1ubOD231u73WBckQ/fsamwRLiE2GBz6D3a/xF1NgfiDLJjXBa1hYOYTtQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/debug": {
|
||||
|
||||
@@ -23,6 +23,8 @@
|
||||
"@tanstack/react-query": "^5.45.0",
|
||||
"antd": "^5.18.0",
|
||||
"axios": "^1.7.2",
|
||||
"classnames": "^2.5.1",
|
||||
"dayjs": "^1.11.23",
|
||||
"mp4box": "^2.4.1",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
|
||||
Generated
+137
-115
@@ -18,7 +18,16 @@ importers:
|
||||
version: 5.29.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
axios:
|
||||
specifier: ^1.7.2
|
||||
version: 1.18.1
|
||||
version: 1.18.1(debug@4.4.3(supports-color@7.2.0))(supports-color@7.2.0)
|
||||
classnames:
|
||||
specifier: ^2.5.1
|
||||
version: 2.5.1
|
||||
dayjs:
|
||||
specifier: ^1.11.23
|
||||
version: 1.11.23
|
||||
mp4box:
|
||||
specifier: ^2.4.1
|
||||
version: 2.4.1
|
||||
react:
|
||||
specifier: ^18.3.1
|
||||
version: 18.3.1
|
||||
@@ -43,7 +52,7 @@ importers:
|
||||
version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@18.3.7(@types/react@18.3.31))(@types/react@18.3.31)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
"@testing-library/user-event":
|
||||
specifier: ^14.5.2
|
||||
version: 14.6.1(@testing-library/dom@10.4.1)
|
||||
version: 14.6.7(@testing-library/dom@10.4.1)
|
||||
"@types/node":
|
||||
specifier: ^20.14.9
|
||||
version: 20.19.43
|
||||
@@ -55,34 +64,34 @@ importers:
|
||||
version: 18.3.7(@types/react@18.3.31)
|
||||
"@typescript-eslint/eslint-plugin":
|
||||
specifier: ^7.13.1
|
||||
version: 7.13.1(@typescript-eslint/parser@7.13.1(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0)(typescript@5.5.3)
|
||||
version: 7.13.1(@typescript-eslint/parser@7.13.1(eslint@8.57.0(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.5.3))(eslint@8.57.0(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.5.3)
|
||||
"@typescript-eslint/parser":
|
||||
specifier: ^7.13.1
|
||||
version: 7.13.1(eslint@8.57.0)(typescript@5.5.3)
|
||||
version: 7.13.1(eslint@8.57.0(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.5.3)
|
||||
"@vitejs/plugin-react":
|
||||
specifier: ^4.3.1
|
||||
version: 4.3.1(vite@5.3.1(@types/node@20.19.43))
|
||||
version: 4.3.1(supports-color@7.2.0)(vite@5.3.1(@types/node@20.19.43))
|
||||
"@vitest/coverage-v8":
|
||||
specifier: ^1.6.1
|
||||
version: 1.6.1(vitest@1.6.0)
|
||||
version: 1.6.1(supports-color@7.2.0)(vitest@1.6.0)
|
||||
"@vitest/ui":
|
||||
specifier: ^1.6.0
|
||||
version: 1.6.0(vitest@1.6.0)
|
||||
eslint:
|
||||
specifier: ^8.57.0
|
||||
version: 8.57.0
|
||||
version: 8.57.0(supports-color@7.2.0)
|
||||
eslint-config-prettier:
|
||||
specifier: ^9.1.2
|
||||
version: 9.1.2(eslint@8.57.0)
|
||||
version: 9.1.2(eslint@8.57.0(supports-color@7.2.0))
|
||||
eslint-plugin-react-hooks:
|
||||
specifier: ^4.6.2
|
||||
version: 4.6.2(eslint@8.57.0)
|
||||
version: 4.6.2(eslint@8.57.0(supports-color@7.2.0))
|
||||
eslint-plugin-react-refresh:
|
||||
specifier: ^0.4.7
|
||||
version: 0.4.26(eslint@8.57.0)
|
||||
version: 0.4.26(eslint@8.57.0(supports-color@7.2.0))
|
||||
jsdom:
|
||||
specifier: ^24.1.0
|
||||
version: 24.1.0
|
||||
version: 24.1.0(supports-color@7.2.0)
|
||||
prettier:
|
||||
specifier: ^3.9.5
|
||||
version: 3.9.5
|
||||
@@ -94,7 +103,7 @@ importers:
|
||||
version: 5.3.1(@types/node@20.19.43)
|
||||
vitest:
|
||||
specifier: ^1.6.0
|
||||
version: 1.6.0(@types/node@20.19.43)(@vitest/ui@1.6.0)(jsdom@24.1.0)
|
||||
version: 1.6.0(@types/node@20.19.43)(@vitest/ui@1.6.0)(jsdom@24.1.0(supports-color@7.2.0))(supports-color@7.2.0)
|
||||
|
||||
packages:
|
||||
"@adobe/css-tools@4.5.0":
|
||||
@@ -1127,10 +1136,10 @@ packages:
|
||||
"@types/react-dom":
|
||||
optional: true
|
||||
|
||||
"@testing-library/user-event@14.6.1":
|
||||
"@testing-library/user-event@14.6.7":
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==,
|
||||
integrity: sha512-MPCpX8bxe8zS+JmmTwLp8jd0dy1rAm60Te/SL8JrQM3qvQJcBOs1d7IefJMyZzqM3EWBrDn/LWDt1BCGu4ASfg==,
|
||||
}
|
||||
engines: { node: ">=12", npm: ">=6" }
|
||||
peerDependencies:
|
||||
@@ -1672,10 +1681,10 @@ packages:
|
||||
}
|
||||
engines: { node: ">=18" }
|
||||
|
||||
dayjs@1.11.21:
|
||||
dayjs@1.11.23:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==,
|
||||
integrity: sha512-QDTCU0M0MxR3hQfnlDJfwekQiaanm1ubOD231u73WBckQ/fsamwRLiE2GBz6D3a/xF1NgfiDLJjXBa1hYOYTtQ==,
|
||||
}
|
||||
|
||||
debug@4.4.3:
|
||||
@@ -2546,6 +2555,13 @@ packages:
|
||||
integrity: sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==,
|
||||
}
|
||||
|
||||
mp4box@2.4.1:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-0HGX7nXoDIX6FKLVl4a3wtYjBlwqsN3xuQC3GXzNtKp98FXUOhDSq623azsz8DG5ptd9ZXcXodDkgbdMZOjWvw==,
|
||||
}
|
||||
engines: { node: ">=20.8.1" }
|
||||
|
||||
mrmime@2.0.1:
|
||||
resolution:
|
||||
{
|
||||
@@ -3861,20 +3877,20 @@ snapshots:
|
||||
|
||||
"@babel/compat-data@7.29.7": {}
|
||||
|
||||
"@babel/core@7.29.7":
|
||||
"@babel/core@7.29.7(supports-color@7.2.0)":
|
||||
dependencies:
|
||||
"@babel/code-frame": 7.29.7
|
||||
"@babel/generator": 7.29.7
|
||||
"@babel/helper-compilation-targets": 7.29.7
|
||||
"@babel/helper-module-transforms": 7.29.7(@babel/core@7.29.7)
|
||||
"@babel/helper-module-transforms": 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)
|
||||
"@babel/helpers": 7.29.7
|
||||
"@babel/parser": 7.29.7
|
||||
"@babel/template": 7.29.7
|
||||
"@babel/traverse": 7.29.7
|
||||
"@babel/traverse": 7.29.7(supports-color@7.2.0)
|
||||
"@babel/types": 7.29.7
|
||||
"@jridgewell/remapping": 2.3.5
|
||||
convert-source-map: 2.0.0
|
||||
debug: 4.4.3
|
||||
debug: 4.4.3(supports-color@7.2.0)
|
||||
gensync: 1.0.0-beta.2
|
||||
json5: 2.2.3
|
||||
semver: 6.3.1
|
||||
@@ -3899,19 +3915,19 @@ snapshots:
|
||||
|
||||
"@babel/helper-globals@7.29.7": {}
|
||||
|
||||
"@babel/helper-module-imports@7.29.7":
|
||||
"@babel/helper-module-imports@7.29.7(supports-color@7.2.0)":
|
||||
dependencies:
|
||||
"@babel/traverse": 7.29.7
|
||||
"@babel/traverse": 7.29.7(supports-color@7.2.0)
|
||||
"@babel/types": 7.29.7
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
"@babel/helper-module-transforms@7.29.7(@babel/core@7.29.7)":
|
||||
"@babel/helper-module-transforms@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))(supports-color@7.2.0)":
|
||||
dependencies:
|
||||
"@babel/core": 7.29.7
|
||||
"@babel/helper-module-imports": 7.29.7
|
||||
"@babel/core": 7.29.7(supports-color@7.2.0)
|
||||
"@babel/helper-module-imports": 7.29.7(supports-color@7.2.0)
|
||||
"@babel/helper-validator-identifier": 7.29.7
|
||||
"@babel/traverse": 7.29.7
|
||||
"@babel/traverse": 7.29.7(supports-color@7.2.0)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
@@ -3932,14 +3948,14 @@ snapshots:
|
||||
dependencies:
|
||||
"@babel/types": 7.29.7
|
||||
|
||||
"@babel/plugin-transform-react-jsx-self@7.29.7(@babel/core@7.29.7)":
|
||||
"@babel/plugin-transform-react-jsx-self@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))":
|
||||
dependencies:
|
||||
"@babel/core": 7.29.7
|
||||
"@babel/core": 7.29.7(supports-color@7.2.0)
|
||||
"@babel/helper-plugin-utils": 7.29.7
|
||||
|
||||
"@babel/plugin-transform-react-jsx-source@7.29.7(@babel/core@7.29.7)":
|
||||
"@babel/plugin-transform-react-jsx-source@7.29.7(@babel/core@7.29.7(supports-color@7.2.0))":
|
||||
dependencies:
|
||||
"@babel/core": 7.29.7
|
||||
"@babel/core": 7.29.7(supports-color@7.2.0)
|
||||
"@babel/helper-plugin-utils": 7.29.7
|
||||
|
||||
"@babel/runtime@7.29.7": {}
|
||||
@@ -3950,7 +3966,7 @@ snapshots:
|
||||
"@babel/parser": 7.29.7
|
||||
"@babel/types": 7.29.7
|
||||
|
||||
"@babel/traverse@7.29.7":
|
||||
"@babel/traverse@7.29.7(supports-color@7.2.0)":
|
||||
dependencies:
|
||||
"@babel/code-frame": 7.29.7
|
||||
"@babel/generator": 7.29.7
|
||||
@@ -3958,7 +3974,7 @@ snapshots:
|
||||
"@babel/parser": 7.29.7
|
||||
"@babel/template": 7.29.7
|
||||
"@babel/types": 7.29.7
|
||||
debug: 4.4.3
|
||||
debug: 4.4.3(supports-color@7.2.0)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
@@ -4044,17 +4060,17 @@ snapshots:
|
||||
"@esbuild/win32-x64@0.21.3":
|
||||
optional: true
|
||||
|
||||
"@eslint-community/eslint-utils@4.9.1(eslint@8.57.0)":
|
||||
"@eslint-community/eslint-utils@4.9.1(eslint@8.57.0(supports-color@7.2.0))":
|
||||
dependencies:
|
||||
eslint: 8.57.0
|
||||
eslint: 8.57.0(supports-color@7.2.0)
|
||||
eslint-visitor-keys: 3.4.3
|
||||
|
||||
"@eslint-community/regexpp@4.12.2": {}
|
||||
|
||||
"@eslint/eslintrc@2.1.4":
|
||||
"@eslint/eslintrc@2.1.4(supports-color@7.2.0)":
|
||||
dependencies:
|
||||
ajv: 6.15.0
|
||||
debug: 4.4.3
|
||||
debug: 4.4.3(supports-color@7.2.0)
|
||||
espree: 9.6.1
|
||||
globals: 13.19.0
|
||||
ignore: 5.2.0
|
||||
@@ -4067,10 +4083,10 @@ snapshots:
|
||||
|
||||
"@eslint/js@8.57.0": {}
|
||||
|
||||
"@humanwhocodes/config-array@0.11.14":
|
||||
"@humanwhocodes/config-array@0.11.14(supports-color@7.2.0)":
|
||||
dependencies:
|
||||
"@humanwhocodes/object-schema": 2.0.3
|
||||
debug: 4.4.3
|
||||
debug: 4.4.3(supports-color@7.2.0)
|
||||
minimatch: 3.1.5
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
@@ -4360,7 +4376,7 @@ snapshots:
|
||||
"@types/react": 18.3.31
|
||||
"@types/react-dom": 18.3.7(@types/react@18.3.31)
|
||||
|
||||
"@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)":
|
||||
"@testing-library/user-event@14.6.7(@testing-library/dom@10.4.1)":
|
||||
dependencies:
|
||||
"@testing-library/dom": 10.4.1
|
||||
|
||||
@@ -4420,15 +4436,15 @@ snapshots:
|
||||
dependencies:
|
||||
"@types/yargs-parser": 21.0.3
|
||||
|
||||
"@typescript-eslint/eslint-plugin@7.13.1(@typescript-eslint/parser@7.13.1(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0)(typescript@5.5.3)":
|
||||
"@typescript-eslint/eslint-plugin@7.13.1(@typescript-eslint/parser@7.13.1(eslint@8.57.0(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.5.3))(eslint@8.57.0(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.5.3)":
|
||||
dependencies:
|
||||
"@eslint-community/regexpp": 4.12.2
|
||||
"@typescript-eslint/parser": 7.13.1(eslint@8.57.0)(typescript@5.5.3)
|
||||
"@typescript-eslint/parser": 7.13.1(eslint@8.57.0(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.5.3)
|
||||
"@typescript-eslint/scope-manager": 7.13.1
|
||||
"@typescript-eslint/type-utils": 7.13.1(eslint@8.57.0)(typescript@5.5.3)
|
||||
"@typescript-eslint/utils": 7.13.1(eslint@8.57.0)(typescript@5.5.3)
|
||||
"@typescript-eslint/type-utils": 7.13.1(eslint@8.57.0(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.5.3)
|
||||
"@typescript-eslint/utils": 7.13.1(eslint@8.57.0(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.5.3)
|
||||
"@typescript-eslint/visitor-keys": 7.13.1
|
||||
eslint: 8.57.0
|
||||
eslint: 8.57.0(supports-color@7.2.0)
|
||||
graphemer: 1.4.0
|
||||
ignore: 5.3.1
|
||||
natural-compare: 1.4.0
|
||||
@@ -4438,14 +4454,14 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
"@typescript-eslint/parser@7.13.1(eslint@8.57.0)(typescript@5.5.3)":
|
||||
"@typescript-eslint/parser@7.13.1(eslint@8.57.0(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.5.3)":
|
||||
dependencies:
|
||||
"@typescript-eslint/scope-manager": 7.13.1
|
||||
"@typescript-eslint/types": 7.13.1
|
||||
"@typescript-eslint/typescript-estree": 7.13.1(typescript@5.5.3)
|
||||
"@typescript-eslint/typescript-estree": 7.13.1(supports-color@7.2.0)(typescript@5.5.3)
|
||||
"@typescript-eslint/visitor-keys": 7.13.1
|
||||
debug: 4.4.3
|
||||
eslint: 8.57.0
|
||||
debug: 4.4.3(supports-color@7.2.0)
|
||||
eslint: 8.57.0(supports-color@7.2.0)
|
||||
optionalDependencies:
|
||||
typescript: 5.5.3
|
||||
transitivePeerDependencies:
|
||||
@@ -4456,12 +4472,12 @@ snapshots:
|
||||
"@typescript-eslint/types": 7.13.1
|
||||
"@typescript-eslint/visitor-keys": 7.13.1
|
||||
|
||||
"@typescript-eslint/type-utils@7.13.1(eslint@8.57.0)(typescript@5.5.3)":
|
||||
"@typescript-eslint/type-utils@7.13.1(eslint@8.57.0(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.5.3)":
|
||||
dependencies:
|
||||
"@typescript-eslint/typescript-estree": 7.13.1(typescript@5.5.3)
|
||||
"@typescript-eslint/utils": 7.13.1(eslint@8.57.0)(typescript@5.5.3)
|
||||
debug: 4.4.3
|
||||
eslint: 8.57.0
|
||||
"@typescript-eslint/typescript-estree": 7.13.1(supports-color@7.2.0)(typescript@5.5.3)
|
||||
"@typescript-eslint/utils": 7.13.1(eslint@8.57.0(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.5.3)
|
||||
debug: 4.4.3(supports-color@7.2.0)
|
||||
eslint: 8.57.0(supports-color@7.2.0)
|
||||
ts-api-utils: 1.3.0(typescript@5.5.3)
|
||||
optionalDependencies:
|
||||
typescript: 5.5.3
|
||||
@@ -4470,11 +4486,11 @@ snapshots:
|
||||
|
||||
"@typescript-eslint/types@7.13.1": {}
|
||||
|
||||
"@typescript-eslint/typescript-estree@7.13.1(typescript@5.5.3)":
|
||||
"@typescript-eslint/typescript-estree@7.13.1(supports-color@7.2.0)(typescript@5.5.3)":
|
||||
dependencies:
|
||||
"@typescript-eslint/types": 7.13.1
|
||||
"@typescript-eslint/visitor-keys": 7.13.1
|
||||
debug: 4.4.3
|
||||
debug: 4.4.3(supports-color@7.2.0)
|
||||
globby: 11.1.0
|
||||
is-glob: 4.0.3
|
||||
minimatch: 9.0.9
|
||||
@@ -4485,13 +4501,13 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
"@typescript-eslint/utils@7.13.1(eslint@8.57.0)(typescript@5.5.3)":
|
||||
"@typescript-eslint/utils@7.13.1(eslint@8.57.0(supports-color@7.2.0))(supports-color@7.2.0)(typescript@5.5.3)":
|
||||
dependencies:
|
||||
"@eslint-community/eslint-utils": 4.9.1(eslint@8.57.0)
|
||||
"@eslint-community/eslint-utils": 4.9.1(eslint@8.57.0(supports-color@7.2.0))
|
||||
"@typescript-eslint/scope-manager": 7.13.1
|
||||
"@typescript-eslint/types": 7.13.1
|
||||
"@typescript-eslint/typescript-estree": 7.13.1(typescript@5.5.3)
|
||||
eslint: 8.57.0
|
||||
"@typescript-eslint/typescript-estree": 7.13.1(supports-color@7.2.0)(typescript@5.5.3)
|
||||
eslint: 8.57.0(supports-color@7.2.0)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
- typescript
|
||||
@@ -4503,25 +4519,25 @@ snapshots:
|
||||
|
||||
"@ungap/structured-clone@1.3.3": {}
|
||||
|
||||
"@vitejs/plugin-react@4.3.1(vite@5.3.1(@types/node@20.19.43))":
|
||||
"@vitejs/plugin-react@4.3.1(supports-color@7.2.0)(vite@5.3.1(@types/node@20.19.43))":
|
||||
dependencies:
|
||||
"@babel/core": 7.29.7
|
||||
"@babel/plugin-transform-react-jsx-self": 7.29.7(@babel/core@7.29.7)
|
||||
"@babel/plugin-transform-react-jsx-source": 7.29.7(@babel/core@7.29.7)
|
||||
"@babel/core": 7.29.7(supports-color@7.2.0)
|
||||
"@babel/plugin-transform-react-jsx-self": 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
|
||||
"@babel/plugin-transform-react-jsx-source": 7.29.7(@babel/core@7.29.7(supports-color@7.2.0))
|
||||
"@types/babel__core": 7.20.5
|
||||
react-refresh: 0.14.2
|
||||
vite: 5.3.1(@types/node@20.19.43)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
"@vitest/coverage-v8@1.6.1(vitest@1.6.0)":
|
||||
"@vitest/coverage-v8@1.6.1(supports-color@7.2.0)(vitest@1.6.0)":
|
||||
dependencies:
|
||||
"@ampproject/remapping": 2.3.0
|
||||
"@bcoe/v8-coverage": 0.2.3
|
||||
debug: 4.4.3
|
||||
debug: 4.4.3(supports-color@7.2.0)
|
||||
istanbul-lib-coverage: 3.2.2
|
||||
istanbul-lib-report: 3.0.1
|
||||
istanbul-lib-source-maps: 5.0.6
|
||||
istanbul-lib-source-maps: 5.0.6(supports-color@7.2.0)
|
||||
istanbul-reports: 3.2.0
|
||||
magic-string: 0.30.5
|
||||
magicast: 0.3.3
|
||||
@@ -4529,7 +4545,7 @@ snapshots:
|
||||
std-env: 3.5.0
|
||||
strip-literal: 2.1.1
|
||||
test-exclude: 6.0.0
|
||||
vitest: 1.6.0(@types/node@20.19.43)(@vitest/ui@1.6.0)(jsdom@24.1.0)
|
||||
vitest: 1.6.0(@types/node@20.19.43)(@vitest/ui@1.6.0)(jsdom@24.1.0(supports-color@7.2.0))(supports-color@7.2.0)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
@@ -4564,7 +4580,7 @@ snapshots:
|
||||
pathe: 1.1.2
|
||||
picocolors: 1.1.1
|
||||
sirv: 2.0.4
|
||||
vitest: 1.6.0(@types/node@20.19.43)(@vitest/ui@1.6.0)(jsdom@24.1.0)
|
||||
vitest: 1.6.0(@types/node@20.19.43)(@vitest/ui@1.6.0)(jsdom@24.1.0(supports-color@7.2.0))(supports-color@7.2.0)
|
||||
|
||||
"@vitest/utils@1.6.0":
|
||||
dependencies:
|
||||
@@ -4583,21 +4599,21 @@ snapshots:
|
||||
|
||||
acorn@8.17.0: {}
|
||||
|
||||
agent-base@6.0.0:
|
||||
agent-base@6.0.0(supports-color@7.2.0):
|
||||
dependencies:
|
||||
debug: 4.4.3
|
||||
debug: 4.4.3(supports-color@7.2.0)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
agent-base@7.0.2:
|
||||
agent-base@7.0.2(supports-color@7.2.0):
|
||||
dependencies:
|
||||
debug: 4.4.3
|
||||
debug: 4.4.3(supports-color@7.2.0)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
agent-base@7.1.0:
|
||||
agent-base@7.1.0(supports-color@7.2.0):
|
||||
dependencies:
|
||||
debug: 4.4.3
|
||||
debug: 4.4.3(supports-color@7.2.0)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
@@ -4632,7 +4648,7 @@ snapshots:
|
||||
"@rc-component/trigger": 2.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
classnames: 2.5.1
|
||||
copy-to-clipboard: 3.3.3
|
||||
dayjs: 1.11.21
|
||||
dayjs: 1.11.23
|
||||
rc-cascader: 3.34.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
rc-checkbox: 3.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
rc-collapse: 3.9.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
@@ -4648,7 +4664,7 @@ snapshots:
|
||||
rc-motion: 2.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
rc-notification: 5.6.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
rc-pagination: 5.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
rc-picker: 4.11.3(dayjs@1.11.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
rc-picker: 4.11.3(dayjs@1.11.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
rc-progress: 4.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
rc-rate: 2.13.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
rc-resize-observer: 1.4.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
@@ -4688,11 +4704,11 @@ snapshots:
|
||||
|
||||
asynckit@0.4.0: {}
|
||||
|
||||
axios@1.18.1:
|
||||
axios@1.18.1(debug@4.4.3(supports-color@7.2.0))(supports-color@7.2.0):
|
||||
dependencies:
|
||||
follow-redirects: 1.16.0
|
||||
follow-redirects: 1.16.0(debug@4.4.3(supports-color@7.2.0))
|
||||
form-data: 4.0.6
|
||||
https-proxy-agent: 5.0.1
|
||||
https-proxy-agent: 5.0.1(supports-color@7.2.0)
|
||||
proxy-from-env: 2.1.0
|
||||
transitivePeerDependencies:
|
||||
- debug
|
||||
@@ -4796,11 +4812,13 @@ snapshots:
|
||||
whatwg-mimetype: 4.0.0
|
||||
whatwg-url: 14.0.0
|
||||
|
||||
dayjs@1.11.21: {}
|
||||
dayjs@1.11.23: {}
|
||||
|
||||
debug@4.4.3:
|
||||
debug@4.4.3(supports-color@7.2.0):
|
||||
dependencies:
|
||||
ms: 2.1.3
|
||||
optionalDependencies:
|
||||
supports-color: 7.2.0
|
||||
|
||||
decimal.js@10.6.0: {}
|
||||
|
||||
@@ -4883,17 +4901,17 @@ snapshots:
|
||||
|
||||
escape-string-regexp@4.0.0: {}
|
||||
|
||||
eslint-config-prettier@9.1.2(eslint@8.57.0):
|
||||
eslint-config-prettier@9.1.2(eslint@8.57.0(supports-color@7.2.0)):
|
||||
dependencies:
|
||||
eslint: 8.57.0
|
||||
eslint: 8.57.0(supports-color@7.2.0)
|
||||
|
||||
eslint-plugin-react-hooks@4.6.2(eslint@8.57.0):
|
||||
eslint-plugin-react-hooks@4.6.2(eslint@8.57.0(supports-color@7.2.0)):
|
||||
dependencies:
|
||||
eslint: 8.57.0
|
||||
eslint: 8.57.0(supports-color@7.2.0)
|
||||
|
||||
eslint-plugin-react-refresh@0.4.26(eslint@8.57.0):
|
||||
eslint-plugin-react-refresh@0.4.26(eslint@8.57.0(supports-color@7.2.0)):
|
||||
dependencies:
|
||||
eslint: 8.57.0
|
||||
eslint: 8.57.0(supports-color@7.2.0)
|
||||
|
||||
eslint-scope@7.2.2:
|
||||
dependencies:
|
||||
@@ -4902,20 +4920,20 @@ snapshots:
|
||||
|
||||
eslint-visitor-keys@3.4.3: {}
|
||||
|
||||
eslint@8.57.0:
|
||||
eslint@8.57.0(supports-color@7.2.0):
|
||||
dependencies:
|
||||
"@eslint-community/eslint-utils": 4.9.1(eslint@8.57.0)
|
||||
"@eslint-community/eslint-utils": 4.9.1(eslint@8.57.0(supports-color@7.2.0))
|
||||
"@eslint-community/regexpp": 4.12.2
|
||||
"@eslint/eslintrc": 2.1.4
|
||||
"@eslint/eslintrc": 2.1.4(supports-color@7.2.0)
|
||||
"@eslint/js": 8.57.0
|
||||
"@humanwhocodes/config-array": 0.11.14
|
||||
"@humanwhocodes/config-array": 0.11.14(supports-color@7.2.0)
|
||||
"@humanwhocodes/module-importer": 1.0.1
|
||||
"@nodelib/fs.walk": 1.2.8
|
||||
"@ungap/structured-clone": 1.3.3
|
||||
ajv: 6.15.0
|
||||
chalk: 4.1.2
|
||||
cross-spawn: 7.0.6
|
||||
debug: 4.4.3
|
||||
debug: 4.4.3(supports-color@7.2.0)
|
||||
doctrine: 3.0.0
|
||||
escape-string-regexp: 4.0.0
|
||||
eslint-scope: 7.2.2
|
||||
@@ -5019,7 +5037,9 @@ snapshots:
|
||||
|
||||
flatted@3.4.2: {}
|
||||
|
||||
follow-redirects@1.16.0: {}
|
||||
follow-redirects@1.16.0(debug@4.4.3(supports-color@7.2.0)):
|
||||
optionalDependencies:
|
||||
debug: 4.4.3(supports-color@7.2.0)
|
||||
|
||||
form-data@4.0.6:
|
||||
dependencies:
|
||||
@@ -5115,24 +5135,24 @@ snapshots:
|
||||
|
||||
html-escaper@2.0.2: {}
|
||||
|
||||
http-proxy-agent@7.0.2:
|
||||
http-proxy-agent@7.0.2(supports-color@7.2.0):
|
||||
dependencies:
|
||||
agent-base: 7.1.0
|
||||
debug: 4.4.3
|
||||
agent-base: 7.1.0(supports-color@7.2.0)
|
||||
debug: 4.4.3(supports-color@7.2.0)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
https-proxy-agent@5.0.1:
|
||||
https-proxy-agent@5.0.1(supports-color@7.2.0):
|
||||
dependencies:
|
||||
agent-base: 6.0.0
|
||||
debug: 4.4.3
|
||||
agent-base: 6.0.0(supports-color@7.2.0)
|
||||
debug: 4.4.3(supports-color@7.2.0)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
https-proxy-agent@7.0.4:
|
||||
https-proxy-agent@7.0.4(supports-color@7.2.0):
|
||||
dependencies:
|
||||
agent-base: 7.0.2
|
||||
debug: 4.4.3
|
||||
agent-base: 7.0.2(supports-color@7.2.0)
|
||||
debug: 4.4.3(supports-color@7.2.0)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
@@ -5186,10 +5206,10 @@ snapshots:
|
||||
make-dir: 4.0.0
|
||||
supports-color: 7.2.0
|
||||
|
||||
istanbul-lib-source-maps@5.0.6:
|
||||
istanbul-lib-source-maps@5.0.6(supports-color@7.2.0):
|
||||
dependencies:
|
||||
"@jridgewell/trace-mapping": 0.3.31
|
||||
debug: 4.4.3
|
||||
debug: 4.4.3(supports-color@7.2.0)
|
||||
istanbul-lib-coverage: 3.2.2
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
@@ -5209,15 +5229,15 @@ snapshots:
|
||||
dependencies:
|
||||
argparse: 2.0.1
|
||||
|
||||
jsdom@24.1.0:
|
||||
jsdom@24.1.0(supports-color@7.2.0):
|
||||
dependencies:
|
||||
cssstyle: 4.0.1
|
||||
data-urls: 5.0.0
|
||||
decimal.js: 10.6.0
|
||||
form-data: 4.0.6
|
||||
html-encoding-sniffer: 4.0.0
|
||||
http-proxy-agent: 7.0.2
|
||||
https-proxy-agent: 7.0.4
|
||||
http-proxy-agent: 7.0.2(supports-color@7.2.0)
|
||||
https-proxy-agent: 7.0.4(supports-color@7.2.0)
|
||||
is-potential-custom-element-name: 1.0.1
|
||||
nwsapi: 2.2.24
|
||||
parse5: 7.1.2
|
||||
@@ -5331,6 +5351,8 @@ snapshots:
|
||||
pkg-types: 1.3.1
|
||||
ufo: 1.6.4
|
||||
|
||||
mp4box@2.4.1: {}
|
||||
|
||||
mrmime@2.0.1: {}
|
||||
|
||||
ms@2.1.3: {}
|
||||
@@ -5611,7 +5633,7 @@ snapshots:
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
|
||||
rc-picker@4.11.3(dayjs@1.11.21)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
|
||||
rc-picker@4.11.3(dayjs@1.11.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
|
||||
dependencies:
|
||||
"@babel/runtime": 7.29.7
|
||||
"@rc-component/trigger": 2.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
@@ -5622,7 +5644,7 @@ snapshots:
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
optionalDependencies:
|
||||
dayjs: 1.11.21
|
||||
dayjs: 1.11.23
|
||||
|
||||
rc-progress@4.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
|
||||
dependencies:
|
||||
@@ -6008,10 +6030,10 @@ snapshots:
|
||||
dependencies:
|
||||
react: 18.3.1
|
||||
|
||||
vite-node@1.6.0(@types/node@20.19.43):
|
||||
vite-node@1.6.0(@types/node@20.19.43)(supports-color@7.2.0):
|
||||
dependencies:
|
||||
cac: 6.7.14
|
||||
debug: 4.4.3
|
||||
debug: 4.4.3(supports-color@7.2.0)
|
||||
pathe: 1.1.2
|
||||
picocolors: 1.1.1
|
||||
vite: 5.3.1(@types/node@20.19.43)
|
||||
@@ -6034,7 +6056,7 @@ snapshots:
|
||||
"@types/node": 20.19.43
|
||||
fsevents: 2.3.3
|
||||
|
||||
vitest@1.6.0(@types/node@20.19.43)(@vitest/ui@1.6.0)(jsdom@24.1.0):
|
||||
vitest@1.6.0(@types/node@20.19.43)(@vitest/ui@1.6.0)(jsdom@24.1.0(supports-color@7.2.0))(supports-color@7.2.0):
|
||||
dependencies:
|
||||
"@vitest/expect": 1.6.0
|
||||
"@vitest/runner": 1.6.0
|
||||
@@ -6043,7 +6065,7 @@ snapshots:
|
||||
"@vitest/utils": 1.6.0
|
||||
acorn-walk: 8.3.5
|
||||
chai: 4.3.10
|
||||
debug: 4.4.3
|
||||
debug: 4.4.3(supports-color@7.2.0)
|
||||
execa: 8.0.1
|
||||
local-pkg: 0.5.0
|
||||
magic-string: 0.30.5
|
||||
@@ -6054,12 +6076,12 @@ snapshots:
|
||||
tinybench: 2.5.1
|
||||
tinypool: 0.8.3
|
||||
vite: 5.3.1(@types/node@20.19.43)
|
||||
vite-node: 1.6.0(@types/node@20.19.43)
|
||||
vite-node: 1.6.0(@types/node@20.19.43)(supports-color@7.2.0)
|
||||
why-is-node-running: 2.3.0
|
||||
optionalDependencies:
|
||||
"@types/node": 20.19.43
|
||||
"@vitest/ui": 1.6.0(vitest@1.6.0)
|
||||
jsdom: 24.1.0
|
||||
jsdom: 24.1.0(supports-color@7.2.0)
|
||||
transitivePeerDependencies:
|
||||
- less
|
||||
- lightningcss
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
@@ -1,383 +1,391 @@
|
||||
/* ============================================================
|
||||
标题模板系统（#2003）：选择器 + 编辑器 + 保存弹窗
|
||||
标题模板系统 v3（按 sketch 重构）
|
||||
- 大卡片网格（图片背景 + 透明 Canvas 叠字 + 始终可见操作按钮）
|
||||
- 编辑器弹窗（左竖屏预览 + 右参数 Tab）
|
||||
============================================================ */
|
||||
|
||||
/* ── Modal 头部 ── */
|
||||
.tt-modal-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-right: 32px;
|
||||
}
|
||||
.tt-modal .ant-modal-body {
|
||||
padding: 16px 20px;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* ── 分组 ── */
|
||||
.tt-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.tt-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.tt-section-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary, #6b7280);
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
/* ── 空状态 ── */
|
||||
.tt-empty {
|
||||
padding: 32px 16px;
|
||||
text-align: center;
|
||||
color: var(--text-secondary, #9ca3af);
|
||||
background: var(--bg-secondary, #f9fafb);
|
||||
border: 1px dashed var(--border-color, #e5e7eb);
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.tt-empty-emoji {
|
||||
font-size: 32px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* ── 卡片网格（4列） ── */
|
||||
.tt-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.tt-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.tt-card {
|
||||
border: 2px solid var(--border-color, #e5e7eb);
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
transition: all 0.18s ease;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.tt-card:hover {
|
||||
border-color: var(--primary-color, #7c3aed);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(124, 58, 237, 0.12);
|
||||
}
|
||||
.tt-card.active {
|
||||
border-color: var(--primary-color, #7c3aed);
|
||||
background: #faf5ff;
|
||||
box-shadow: 0 0 0 1px var(--primary-color, #7c3aed);
|
||||
}
|
||||
|
||||
/* ── 预览区 ── */
|
||||
.tt-card-preview {
|
||||
position: relative;
|
||||
height: 80px;
|
||||
background: #0f172a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tt-card-preview canvas {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
/* ── 标签 ── */
|
||||
.tt-tag {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
line-height: 16px;
|
||||
}
|
||||
.tt-tag.sys {
|
||||
background: rgba(124, 58, 237, 0.85);
|
||||
color: #fff;
|
||||
}
|
||||
.tt-tag.mine {
|
||||
background: rgba(16, 185, 129, 0.9);
|
||||
color: #fff;
|
||||
}
|
||||
.tt-check {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary-color, #7c3aed);
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* ── 卡片操作按钮（hover 显示） ── */
|
||||
.tt-card-actions {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
display: none;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
.tt-card.active .tt-check + .tt-card-actions {
|
||||
top: 30px;
|
||||
}
|
||||
.tt-card:hover .tt-card-actions {
|
||||
display: flex;
|
||||
}
|
||||
.tt-ico-btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
padding: 0;
|
||||
transition: 0.15s;
|
||||
}
|
||||
.tt-ico-btn:hover {
|
||||
background: var(--primary-color, #7c3aed);
|
||||
}
|
||||
.tt-ico-btn.danger:hover {
|
||||
background: #ef4444;
|
||||
}
|
||||
|
||||
/* ── 卡片底部 meta ── */
|
||||
.tt-card-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px 8px;
|
||||
font-size: 12px;
|
||||
color: var(--text-primary, #1f2937);
|
||||
}
|
||||
.tt-card-emoji {
|
||||
font-size: 13px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tt-card-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ── 编辑器（左右布局） ── */
|
||||
.tt-editor {
|
||||
display: grid;
|
||||
grid-template-columns: 360px 1fr;
|
||||
gap: 16px;
|
||||
min-height: 480px;
|
||||
}
|
||||
.tt-editor-preview {
|
||||
background: #0f172a;
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 400px;
|
||||
}
|
||||
.tt-editor-panel {
|
||||
overflow-y: auto;
|
||||
max-height: 65vh;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.tt-editor {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
#2003 内联网格（直接嵌在 TitleStylePanel 预览下方）
|
||||
============================================================ */
|
||||
|
||||
.tt-inline-wrap {
|
||||
/* ── 面板容器（模板模式） ── */
|
||||
.ttv3-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
/* section header (label + 新建按钮) */
|
||||
.tt-section-header {
|
||||
.ttv3-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.ttv3-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary, #1f2937);
|
||||
}
|
||||
.ttv3-new-btn.ant-btn {
|
||||
background: linear-gradient(135deg, #6c5ce7, #a29bfe);
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
height: 28px;
|
||||
padding: 0 14px;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 2px 8px rgba(108, 92, 231, 0.25);
|
||||
}
|
||||
.ttv3-new-btn.ant-btn:hover {
|
||||
background: linear-gradient(135deg, #5b4cdb, #8c83f5) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.ttv3-section-label {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.tt-section-header .tt-section-label,
|
||||
.tt-section-header .tt-section-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary, #6b7280);
|
||||
margin: 0;
|
||||
}
|
||||
.tt-new-btn.ant-btn {
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
height: 26px;
|
||||
padding: 0 10px;
|
||||
.ttv3-section {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
/* 内联网格：自适应列数（窄面板 2 列、宽面板 3-4 列） */
|
||||
.tt-grid--inline {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
/* ── 空状态 ── */
|
||||
.ttv3-empty {
|
||||
background: #f8f8fc;
|
||||
border-radius: 12px;
|
||||
padding: 28px 16px;
|
||||
text-align: center;
|
||||
color: #aaa;
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.tt-grid--inline {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
.ttv3-empty-icon {
|
||||
font-size: 28px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
@media (min-width: 1600px) {
|
||||
.tt-grid--inline {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
.ttv3-empty-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 内联卡片 */
|
||||
.tt-card--inline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 2px solid var(--border-color, #e5e7eb);
|
||||
border-radius: 8px;
|
||||
/* ── 卡片网格：minmax(180px,1fr) 自适应 ── */
|
||||
.ttv3-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* ── 卡片：3:4 竖版，圆角 14px ── */
|
||||
.ttv3-card {
|
||||
background: #fff;
|
||||
border-radius: 14px;
|
||||
border: 3px solid #e8e8ed;
|
||||
cursor: pointer;
|
||||
transition: all 0.18s ease;
|
||||
transition: all 0.15s ease;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
font-family: inherit;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
}
|
||||
.tt-card--inline:hover {
|
||||
border-color: var(--primary-color, #7c3aed);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.12);
|
||||
.ttv3-card:hover {
|
||||
border-color: #c5c0f0;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.tt-card--inline.active {
|
||||
border-color: var(--primary-color, #7c3aed);
|
||||
background: #faf5ff;
|
||||
box-shadow: 0 0 0 1px var(--primary-color, #7c3aed);
|
||||
.ttv3-card.selected {
|
||||
border-color: #6c5ce7;
|
||||
box-shadow: 0 4px 16px rgba(108, 92, 231, 0.25);
|
||||
}
|
||||
|
||||
/* 大预览区（上半）：深色背景+canvas */
|
||||
.tt-card-preview--lg {
|
||||
/* ── 卡片预览区（3:4） ── */
|
||||
.ttv3-preview {
|
||||
width: 100%;
|
||||
aspect-ratio: 3/4;
|
||||
position: relative;
|
||||
height: 90px;
|
||||
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
||||
overflow: hidden;
|
||||
border-radius: 11px 11px 0 0;
|
||||
}
|
||||
.ttv3-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
/* 暗色渐变遮罩：顶部15%半透明黑 + 中部透明 + 底部45%黑 */
|
||||
.ttv3-vignette {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0.45) 0%,
|
||||
rgba(0, 0, 0, 0.15) 15%,
|
||||
transparent 30%,
|
||||
transparent 55%,
|
||||
rgba(0, 0, 0, 0.6) 100%
|
||||
);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
/* 透明 Canvas 标题填充整个预览区 */
|
||||
.ttv3-preview .tt-fill-canvas-wrap {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.ttv3-preview .tt-fill-canvas-wrap canvas {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
border-radius: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ── 左上角角标（系统/我的） ── */
|
||||
.ttv3-badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
font-size: 10px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
z-index: 3;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.ttv3-badge--sys {
|
||||
background: rgba(108, 92, 231, 0.88);
|
||||
}
|
||||
.ttv3-badge--mine {
|
||||
background: rgba(0, 184, 148, 0.88);
|
||||
}
|
||||
|
||||
/* ── 右上角勾选圆圈 ── */
|
||||
.ttv3-check {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border: 2px solid rgba(255, 255, 255, 0.7);
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
color: transparent;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.tt-card-preview--lg canvas {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
.ttv3-check.on {
|
||||
background: #6c5ce7;
|
||||
border-color: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 选中圆点（单选 radio 样式） */
|
||||
.tt-radio-dot {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--primary-color, #7c3aed);
|
||||
background: #fff;
|
||||
/* ── 卡片底栏（名称 + 操作按钮） ── */
|
||||
.ttv3-footer {
|
||||
padding: 10px 10px 12px;
|
||||
}
|
||||
.tt-radio-dot::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 2px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary-color, #7c3aed);
|
||||
}
|
||||
|
||||
/* 标签位置微调（内联卡片） */
|
||||
.tt-card--inline .tt-tag {
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
/* hover/选中时操作按钮位置（避开 radio-dot） */
|
||||
.tt-card--inline .tt-card-actions {
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
display: none;
|
||||
gap: 4px;
|
||||
}
|
||||
.tt-card--inline:hover .tt-card-actions {
|
||||
display: flex;
|
||||
}
|
||||
/* 选中态 hover 时 actions 下移以避开 radio-dot */
|
||||
.tt-card--inline.active:hover .tt-card-actions {
|
||||
top: 30px;
|
||||
}
|
||||
.tt-card--inline.active .tt-radio-dot {
|
||||
display: block;
|
||||
}
|
||||
.tt-card--inline.active:hover .tt-radio-dot {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 底部 meta（下半）：emoji + name */
|
||||
.tt-card-meta--lg {
|
||||
.ttv3-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 8px;
|
||||
font-size: 12px;
|
||||
color: var(--text-primary, #1f2937);
|
||||
background: #fff;
|
||||
border-top: 1px solid var(--border-light, #f3f4f6);
|
||||
}
|
||||
.tt-card--inline.active .tt-card-meta--lg {
|
||||
background: #faf5ff;
|
||||
}
|
||||
.tt-card-meta--lg .tt-card-emoji {
|
||||
margin-bottom: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
color: #1f2937;
|
||||
}
|
||||
.ttv3-emoji {
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tt-card-meta--lg .tt-card-name {
|
||||
flex: 1;
|
||||
.ttv3-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.ttv3-tag {
|
||||
font-size: 10px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ttv3-tag--sys {
|
||||
background: #f0ecff;
|
||||
color: #6c5ce7;
|
||||
}
|
||||
.ttv3-tag--mine {
|
||||
background: #e6f9f4;
|
||||
color: #00b894;
|
||||
}
|
||||
|
||||
/* 空状态（紧凑型） */
|
||||
.tt-empty--sm {
|
||||
padding: 16px 12px;
|
||||
/* ── 操作按钮：始终可见，等宽排列 ── */
|
||||
.ttv3-actions {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
.ttv3-act {
|
||||
flex: 1;
|
||||
padding: 5px 0;
|
||||
border: 1px solid #e8e8ed;
|
||||
background: #fff;
|
||||
border-radius: 7px;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
transition: all 0.15s;
|
||||
font-family: inherit;
|
||||
}
|
||||
.ttv3-act:hover:not(:disabled) {
|
||||
background: #f5f5fa;
|
||||
border-color: #d5d3e8;
|
||||
}
|
||||
.ttv3-act--primary {
|
||||
background: #6c5ce7;
|
||||
color: #fff;
|
||||
border-color: #6c5ce7;
|
||||
}
|
||||
.ttv3-act--primary:hover:not(:disabled) {
|
||||
background: #5b4cdb;
|
||||
border-color: #5b4cdb;
|
||||
}
|
||||
.ttv3-act--danger {
|
||||
color: #e74c3c;
|
||||
}
|
||||
.ttv3-act--danger:hover:not(:disabled) {
|
||||
background: #fef2f2;
|
||||
}
|
||||
.ttv3-act:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ── FillPreview 公共容器 ── */
|
||||
.tt-fill-canvas-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ── params-only（编辑器右侧）去掉多余 margin ── */
|
||||
.ttv3-params-only {
|
||||
padding: 0;
|
||||
}
|
||||
.ttv3-params-only .ant-tabs {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
编辑器 Modal（v3）
|
||||
============================================================ */
|
||||
.ttv3-modal .ant-modal-content {
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
.ttv3-modal .ant-modal-header {
|
||||
padding: 16px 20px;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
.ttv3-modal .ant-modal-body {
|
||||
padding: 0;
|
||||
max-height: 75vh;
|
||||
}
|
||||
.ttv3-modal .ant-modal-footer {
|
||||
padding: 14px 20px;
|
||||
margin: 0;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* 编辑器两栏布局 */
|
||||
.ttv3-editor {
|
||||
display: flex;
|
||||
min-height: 500px;
|
||||
}
|
||||
.ttv3-editor-left {
|
||||
width: 300px;
|
||||
padding: 20px;
|
||||
background: #f8f8fc;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
}
|
||||
.ttv3-editor-canvas {
|
||||
width: 200px;
|
||||
aspect-ratio: 9/16;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ttv3-editor-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.ttv3-editor-canvas-inner {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.ttv3-editor-canvas-inner canvas {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
border-radius: 0;
|
||||
display: block;
|
||||
}
|
||||
.ttv3-editor-form {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.ttv3-form-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.ttv3-form-row label {
|
||||
font-size: 12px;
|
||||
gap: 6px;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
min-width: 44px;
|
||||
}
|
||||
.tt-empty--sm .tt-empty-emoji {
|
||||
font-size: 22px;
|
||||
margin-bottom: 0;
|
||||
.ttv3-form-row--grow {
|
||||
flex: 1;
|
||||
}
|
||||
.ttv3-form-row--grow .ant-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ttv3-editor-right {
|
||||
flex: 1;
|
||||
padding: 16px 20px;
|
||||
overflow-y: auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* 侧栏较窄时（380px 侧栏）：强制 2 列，卡片稍微紧凑 */
|
||||
@media (max-width: 540px) {
|
||||
.ttv3-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
.ttv3-act {
|
||||
font-size: 10px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.ttv3-act .anticon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,56 +1,57 @@
|
||||
/**
|
||||
* 标题模板编辑器（#2003）
|
||||
* 标题模板编辑器（v3 重构）
|
||||
*
|
||||
* 左侧大预览（400×225，16:9），右侧复用 TitleStylePanel 进行参数调整。
|
||||
* 编辑完成后点"保存"弹出 SaveTemplateModal（名称必填），保存后回调 onSaved。
|
||||
* - Modal 弹窗 860px 宽
|
||||
* - 左侧：300px 竖屏预览区（图片背景+暗色渐变遮罩+透明 Canvas 叠字）+ 模板名称输入框
|
||||
* - 右侧：参数 Tab 面板（基础/描边/阴影/背景/排版），复用 TitleStylePanel 的 paramsOnly 模式
|
||||
* - 底部：取消 / 保存模板 按钮
|
||||
* - 内置模板编辑时保存会创建副本（带"副本"逻辑由 handleSave 处理）
|
||||
*/
|
||||
import React, { useState } from "react"
|
||||
import React, { useEffect, useMemo, useState } from "react"
|
||||
import { Modal, Button, Input, message } from "antd"
|
||||
import TitleStylePanel from "../../pages/generate/components/title/TitleStylePanel"
|
||||
import TitleMiniPreview from "../../pages/generate/components/title/TitleMiniPreview"
|
||||
import { POSITION_OPTIONS } from "../../pages/generate/constants"
|
||||
import { FONT_OPTIONS, TITLE_PRESETS as SYSTEM_TITLE_PRESETS } from "./constants"
|
||||
import { FONT_OPTIONS } from "./constants"
|
||||
import type { TitleSettings } from "../../pages/generate/types"
|
||||
import { DEFAULT_TITLE_SETTINGS_FULL } from "../../pages/generate/types"
|
||||
import { titleStyleConfigToCamel, camelToTitleStyleConfig } from "./utils"
|
||||
import { useTitleTemplates } from "./useTitleTemplates"
|
||||
import type { TitleTemplate } from "./template-types"
|
||||
import type { TitleStyleConfig } from "./types"
|
||||
|
||||
interface Props {
|
||||
open: boolean
|
||||
template: TitleTemplate
|
||||
onClose: () => void
|
||||
onSaved: (template: TitleTemplate) => void
|
||||
/** 用户点击保存：将编辑结果回调给父组件（父组件统一做 CRUD，避免双 hook 实例不同步） */
|
||||
onSave: (data: { name: string; emoji: string; style: Partial<TitleStyleConfig> }) => void
|
||||
}
|
||||
|
||||
const TitleTemplateEditor: React.FC<Props> = ({ open, template, onClose, onSaved }) => {
|
||||
const { updateTemplate, createTemplate } = useTitleTemplates()
|
||||
// 编辑态：完整 TitleSettings（camelCase）
|
||||
/** 编辑器预览用的背景图（复用卡片池第一张） */
|
||||
const EDITOR_BG = "/title-templates/portrait1.jpg"
|
||||
|
||||
const TitleTemplateEditor: React.FC<Props> = ({ open, template, onClose, onSave }) => {
|
||||
const [settings, setSettings] = useState<TitleSettings>(() => ({
|
||||
...DEFAULT_TITLE_SETTINGS_FULL,
|
||||
...titleStyleConfigToCamel(template.style || {}),
|
||||
title: "标题预览",
|
||||
title: "预览标题文字",
|
||||
}))
|
||||
const [formName, setFormName] = useState(template.name || "")
|
||||
const [formDesc, setFormDesc] = useState(template.description || "")
|
||||
const [formEmoji, setFormEmoji] = useState(template.emoji || "✨")
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
// 每次 open 重置
|
||||
React.useEffect(() => {
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setSettings({
|
||||
...DEFAULT_TITLE_SETTINGS_FULL,
|
||||
...titleStyleConfigToCamel(template.style || {}),
|
||||
title: "标题预览",
|
||||
title: "预览标题文字",
|
||||
})
|
||||
setFormName(template.name || "")
|
||||
setFormDesc(template.description || "")
|
||||
setFormEmoji(template.emoji || "✨")
|
||||
}
|
||||
}, [open, template])
|
||||
|
||||
/** 把单个 updater 包装成 setSettings patch */
|
||||
const upd = (patch: Partial<TitleSettings>) => setSettings((s) => ({ ...s, ...patch }))
|
||||
|
||||
const handleSave = () => {
|
||||
@@ -62,34 +63,32 @@ const TitleTemplateEditor: React.FC<Props> = ({ open, template, onClose, onSaved
|
||||
setSaving(true)
|
||||
try {
|
||||
const snake = camelToTitleStyleConfig(settings)
|
||||
if (template.isBuiltin) {
|
||||
// 内置模板保存时创建一个副本
|
||||
const t = createTemplate({ name, description: formDesc, emoji: formEmoji, style: snake })
|
||||
onSaved(t)
|
||||
} else {
|
||||
updateTemplate(template.id, { name, description: formDesc, emoji: formEmoji, style: snake })
|
||||
onSaved({
|
||||
...template,
|
||||
name,
|
||||
description: formDesc,
|
||||
emoji: formEmoji,
|
||||
style: snake,
|
||||
updatedAt: new Date().toISOString(),
|
||||
})
|
||||
}
|
||||
onSave({ name, emoji: formEmoji, style: snake })
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 编辑器内的预览用 settings：字号适配竖屏
|
||||
const previewSettings = useMemo<TitleSettings>(() => {
|
||||
// 竖屏宽度 200px，按比例缩放字号，让预览看起来协调
|
||||
return { ...settings, size: Math.round(settings.size * 0.55) }
|
||||
}, [settings])
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={template.isBuiltin ? `复制模板：${template.name}` : `编辑模板：${template.name}`}
|
||||
title={
|
||||
!template.id
|
||||
? "新建模板"
|
||||
: template.isBuiltin
|
||||
? `基于「${template.name}」创建模板`
|
||||
: `编辑模板：${template.name}`
|
||||
}
|
||||
open={open}
|
||||
onCancel={onClose}
|
||||
width={960}
|
||||
width={860}
|
||||
footer={
|
||||
<div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
|
||||
<div style={{ display: "flex", gap: 10, justifyContent: "flex-end" }}>
|
||||
<Button onClick={onClose}>取消</Button>
|
||||
<Button type="primary" loading={saving} onClick={handleSave}>
|
||||
保存模板
|
||||
@@ -97,54 +96,50 @@ const TitleTemplateEditor: React.FC<Props> = ({ open, template, onClose, onSaved
|
||||
</div>
|
||||
}
|
||||
destroyOnClose
|
||||
className="tt-modal tt-editor-modal"
|
||||
className="ttv3-modal"
|
||||
styles={{ body: { padding: 0 } }}
|
||||
>
|
||||
{/* 模板名称/描述表单 */}
|
||||
<div
|
||||
style={{ display: "grid", gridTemplateColumns: "60px 1fr 1fr", gap: 10, marginBottom: 14 }}
|
||||
>
|
||||
<div>
|
||||
<label style={{ fontSize: 12, fontWeight: 600, display: "block", marginBottom: 6 }}>
|
||||
图标
|
||||
</label>
|
||||
<Input
|
||||
value={formEmoji}
|
||||
maxLength={2}
|
||||
style={{ textAlign: "center" }}
|
||||
onChange={(e) => setFormEmoji(e.target.value)}
|
||||
/>
|
||||
<div className="ttv3-editor">
|
||||
{/* 左侧：竖屏预览 + 名称 */}
|
||||
<div className="ttv3-editor-left">
|
||||
<div className="ttv3-editor-canvas">
|
||||
<img className="ttv3-editor-bg" src={EDITOR_BG} alt="" />
|
||||
<div className="ttv3-vignette" />
|
||||
<div className="ttv3-editor-canvas-inner">
|
||||
<TitleMiniPreview
|
||||
settings={previewSettings}
|
||||
width={200}
|
||||
sampleText="预览标题文字"
|
||||
transparent
|
||||
portrait
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ttv3-editor-form">
|
||||
<div className="ttv3-form-row">
|
||||
<label>图标</label>
|
||||
<Input
|
||||
value={formEmoji}
|
||||
maxLength={2}
|
||||
style={{ textAlign: "center", width: 64 }}
|
||||
onChange={(e) => setFormEmoji(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="ttv3-form-row ttv3-form-row--grow">
|
||||
<label>
|
||||
模板名称<span style={{ color: "#ef4444" }}>*</span>
|
||||
</label>
|
||||
<Input
|
||||
placeholder="给模板起个名字"
|
||||
value={formName}
|
||||
maxLength={20}
|
||||
onChange={(e) => setFormName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontSize: 12, fontWeight: 600, display: "block", marginBottom: 6 }}>
|
||||
模板名称<span style={{ color: "#ef4444" }}> *</span>
|
||||
</label>
|
||||
<Input
|
||||
placeholder="给模板起个名字，例如：抖音爆款黄"
|
||||
value={formName}
|
||||
maxLength={20}
|
||||
onChange={(e) => setFormName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontSize: 12, fontWeight: 600, display: "block", marginBottom: 6 }}>
|
||||
模板描述
|
||||
</label>
|
||||
<Input
|
||||
placeholder="简短描述（可选）"
|
||||
value={formDesc}
|
||||
maxLength={40}
|
||||
onChange={(e) => setFormDesc(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="tt-editor">
|
||||
{/* 左侧实时预览 */}
|
||||
<div className="tt-editor-preview">
|
||||
<TitleMiniPreview settings={settings} width={320} sampleText="标题预览" height={180} />
|
||||
</div>
|
||||
{/* 右侧编辑器 — 复用 TitleStylePanel 的细粒度能力 */}
|
||||
<div className="tt-editor-panel">
|
||||
{/* 右侧：参数 Tab */}
|
||||
<div className="ttv3-editor-right">
|
||||
<TitleStylePanel
|
||||
settings={settings}
|
||||
onUpdatePosition={(p) => upd({ position: p, posX: null, posY: null })}
|
||||
@@ -160,23 +155,15 @@ const TitleTemplateEditor: React.FC<Props> = ({ open, template, onClose, onSaved
|
||||
})
|
||||
}
|
||||
onToggleShadow={() => upd({ shadow: !settings.shadow })}
|
||||
onApplyPreset={(key) => {
|
||||
// 在编辑器中点击系统预设：把 preset 作为编辑起点
|
||||
const pp = SYSTEM_TITLE_PRESETS.find((x) => x.key === key)
|
||||
if (pp) {
|
||||
setSettings((cs) => ({
|
||||
...cs,
|
||||
...titleStyleConfigToCamel(pp.style),
|
||||
lineOverrides: [],
|
||||
title: "标题预览",
|
||||
}))
|
||||
}
|
||||
onApplyPreset={() => {
|
||||
/* 编辑器内不使用系统预设快捷键 */
|
||||
}}
|
||||
onUpdateStyle={(patch) => upd(patch)}
|
||||
activePreset={null}
|
||||
titlePresets={[]}
|
||||
POSITION_OPTIONS={POSITION_OPTIONS}
|
||||
FONT_OPTIONS={FONT_OPTIONS}
|
||||
paramsOnly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,237 +0,0 @@
|
||||
/**
|
||||
* 标题模板选择器（#2003）
|
||||
*
|
||||
* 参考「IP智能体设置 → 字幕设置 → 字幕模板」交互：
|
||||
* - Modal 打开后展示模板卡片网格（4 列），每张卡片含 Canvas 预览 + 名称 + 标签
|
||||
* - 系统模板（sys:）：只能「复制为我的」「应用」
|
||||
* - 自定义模板（usr:）：支持编辑/复制/导出/删除
|
||||
* - 右上角「+ 新建模板」按钮进入编辑器
|
||||
*
|
||||
* 受控使用：visible/onCancel/onSelect
|
||||
*/
|
||||
import React, { useMemo, useState } from "react"
|
||||
import { Modal, Button, message, Popconfirm, Tooltip } from "antd"
|
||||
import {
|
||||
PlusOutlined,
|
||||
EditOutlined,
|
||||
CopyOutlined,
|
||||
DeleteOutlined,
|
||||
ExportOutlined,
|
||||
CheckOutlined,
|
||||
} from "@ant-design/icons"
|
||||
import TitleMiniPreview from "../../pages/generate/components/title/TitleMiniPreview"
|
||||
import type { TitleSettings } from "../../pages/generate/types"
|
||||
import { DEFAULT_TITLE_SETTINGS_FULL } from "../../pages/generate/types"
|
||||
import { titleStyleConfigToCamel } from "./utils"
|
||||
import { useTitleTemplates } from "./useTitleTemplates"
|
||||
import type { TitleTemplate } from "./template-types"
|
||||
import TitleTemplateEditor from "./TitleTemplateEditor"
|
||||
import "./TitleTemplate.css"
|
||||
|
||||
interface Props {
|
||||
open: boolean
|
||||
/** 当前选中模板 id（可选） */
|
||||
selectedTemplateId?: string | null
|
||||
onClose: () => void
|
||||
/** 选择/应用模板：返回 camelCase TitleSettings 给调用方 */
|
||||
onSelect: (settings: TitleSettings, template: TitleTemplate) => void
|
||||
}
|
||||
|
||||
/** 把模板 style 渲染为完整 TitleSettings（带默认值），用于预览 */
|
||||
function templateToSettings(t: TitleTemplate): TitleSettings {
|
||||
return { ...DEFAULT_TITLE_SETTINGS_FULL, ...titleStyleConfigToCamel(t.style) }
|
||||
}
|
||||
|
||||
const TitleTemplateSelector: React.FC<Props> = ({
|
||||
open,
|
||||
selectedTemplateId,
|
||||
onClose,
|
||||
onSelect,
|
||||
}) => {
|
||||
const { templates, duplicateTemplate, deleteTemplate, exportTemplate, createTemplate } =
|
||||
useTitleTemplates()
|
||||
const [editingTemplate, setEditingTemplate] = useState<TitleTemplate | null>(null)
|
||||
const [editorOpen, setEditorOpen] = useState(false)
|
||||
|
||||
const grouped = useMemo(() => {
|
||||
return {
|
||||
builtin: templates.filter((t) => t.isBuiltin),
|
||||
custom: templates.filter((t) => !t.isBuiltin),
|
||||
}
|
||||
}, [templates])
|
||||
|
||||
const handleCreate = () => {
|
||||
// 基于当前默认样式创建空白模板进入编辑
|
||||
const t = createTemplate({
|
||||
name: "我的标题模板",
|
||||
style: {
|
||||
font: DEFAULT_TITLE_SETTINGS_FULL.font,
|
||||
size: 56,
|
||||
color: "#ffffff",
|
||||
bold: true,
|
||||
italic: false,
|
||||
stroke: true,
|
||||
stroke_width: 4,
|
||||
stroke_color: "#000000",
|
||||
shadow: false,
|
||||
bg_enabled: false,
|
||||
line_height: 1.2,
|
||||
max_chars_per_line: 10,
|
||||
position: "bottom",
|
||||
margin_top: 32,
|
||||
line_overrides: [],
|
||||
cover_title_config: null,
|
||||
},
|
||||
})
|
||||
setEditingTemplate(t)
|
||||
setEditorOpen(true)
|
||||
}
|
||||
|
||||
const handleEdit = (t: TitleTemplate) => {
|
||||
setEditingTemplate(t)
|
||||
setEditorOpen(true)
|
||||
}
|
||||
|
||||
const handleDuplicate = (t: TitleTemplate) => {
|
||||
const dup = duplicateTemplate(t.id)
|
||||
if (dup) message.success(`已复制：${dup.name}`)
|
||||
}
|
||||
|
||||
const handleDelete = (t: TitleTemplate) => {
|
||||
deleteTemplate(t.id)
|
||||
message.success("已删除模板")
|
||||
}
|
||||
|
||||
const handleExport = (t: TitleTemplate) => {
|
||||
const json = exportTemplate(t.id)
|
||||
if (!json) return
|
||||
const blob = new Blob([json], { type: "application/json" })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const a = document.createElement("a")
|
||||
a.href = url
|
||||
a.download = `${t.name}.title-template.json`
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
|
||||
const handleApply = (t: TitleTemplate) => {
|
||||
const settings = templateToSettings(t)
|
||||
onSelect(settings, t)
|
||||
}
|
||||
|
||||
const renderCard = (t: TitleTemplate) => {
|
||||
const isSelected = selectedTemplateId === t.id
|
||||
const settings = templateToSettings(t)
|
||||
return (
|
||||
<div
|
||||
key={t.id}
|
||||
className={`tt-card${isSelected ? " active" : ""}`}
|
||||
onClick={() => handleApply(t)}
|
||||
>
|
||||
<div className="tt-card-preview">
|
||||
<TitleMiniPreview settings={settings} width={200} sampleText="标题预览" />
|
||||
<span className={`tt-tag${t.isBuiltin ? " sys" : " mine"}`}>
|
||||
{t.isBuiltin ? "系统" : "我的"}
|
||||
</span>
|
||||
{isSelected && (
|
||||
<span className="tt-check">
|
||||
<CheckOutlined />
|
||||
</span>
|
||||
)}
|
||||
<div className="tt-card-actions" onClick={(e) => e.stopPropagation()}>
|
||||
{!t.isBuiltin && (
|
||||
<Tooltip title="编辑">
|
||||
<button type="button" className="tt-ico-btn" onClick={() => handleEdit(t)}>
|
||||
<EditOutlined />
|
||||
</button>
|
||||
</Tooltip>
|
||||
)}
|
||||
<Tooltip title="复制">
|
||||
<button type="button" className="tt-ico-btn" onClick={() => handleDuplicate(t)}>
|
||||
<CopyOutlined />
|
||||
</button>
|
||||
</Tooltip>
|
||||
<Tooltip title="导出">
|
||||
<button type="button" className="tt-ico-btn" onClick={() => handleExport(t)}>
|
||||
<ExportOutlined />
|
||||
</button>
|
||||
</Tooltip>
|
||||
{!t.isBuiltin && (
|
||||
<Popconfirm title="删除该模板？" onConfirm={() => handleDelete(t)}>
|
||||
<Tooltip title="删除">
|
||||
<button type="button" className="tt-ico-btn danger">
|
||||
<DeleteOutlined />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</Popconfirm>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="tt-card-meta">
|
||||
<span className="tt-card-emoji">{t.emoji || "✨"}</span>
|
||||
<span className="tt-card-name" title={t.name}>
|
||||
{t.name}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
title={
|
||||
<div className="tt-modal-title">
|
||||
<span>🎨 选择标题模板</span>
|
||||
<Button type="primary" size="small" icon={<PlusOutlined />} onClick={handleCreate}>
|
||||
新建模板
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
open={open && !editorOpen}
|
||||
onCancel={onClose}
|
||||
footer={null}
|
||||
width={880}
|
||||
className="tt-modal"
|
||||
destroyOnClose
|
||||
>
|
||||
<div className="tt-section">
|
||||
<div className="tt-section-title">我的模板</div>
|
||||
{grouped.custom.length === 0 ? (
|
||||
<div className="tt-empty">
|
||||
<div className="tt-empty-emoji">✨</div>
|
||||
<div>还没有自定义模板，点击右上角「新建模板」创建第一个吧</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="tt-grid">{grouped.custom.map(renderCard)}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="tt-section">
|
||||
<div className="tt-section-title">系统模板</div>
|
||||
<div className="tt-grid">{grouped.builtin.map(renderCard)}</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
{editorOpen && editingTemplate && (
|
||||
<TitleTemplateEditor
|
||||
open={editorOpen}
|
||||
template={editingTemplate}
|
||||
onClose={() => {
|
||||
setEditorOpen(false)
|
||||
setEditingTemplate(null)
|
||||
}}
|
||||
onSaved={(t) => {
|
||||
setEditorOpen(false)
|
||||
setEditingTemplate(null)
|
||||
message.success(`已保存：${t.name}`)
|
||||
// 保存后自动应用
|
||||
handleApply(t)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default TitleTemplateSelector
|
||||
@@ -127,6 +127,7 @@ export interface TitlePreset {
|
||||
}
|
||||
|
||||
const BASE: Partial<TitleStyleConfig> = {
|
||||
position: "bottom",
|
||||
line_overrides: [],
|
||||
cover_title_config: null,
|
||||
}
|
||||
|
||||
@@ -8,15 +8,12 @@ import React, { useMemo, useState, useEffect, useRef, useCallback } from "react"
|
||||
import { message } from "antd"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import type { VoiceClone } from "@/api/voice-clone"
|
||||
import { useQuery } from "@tanstack/react-query"
|
||||
import { useCloneProgress } from "@/hooks/useCloneProgress"
|
||||
import CloneModal from "@/components/voice/CloneModal"
|
||||
import VoiceSelectModal from "./components/VoiceSelectModal"
|
||||
import ScriptSelectModal from "./components/ScriptSelectModal"
|
||||
import TtsVoiceModal from "./components/TtsVoiceModal"
|
||||
import GenerateHeader from "./components/GenerateHeader"
|
||||
import FrontendPreviewPlayer from "./components/FrontendPreviewPlayer"
|
||||
import CanvasPreviewGrid from "./components/CanvasPreviewGrid"
|
||||
import PreviewCountModal from "./components/PreviewCountModal"
|
||||
import GenerateStepsBar from "./components/GenerateStepsBar"
|
||||
import GenerateStepContent from "./components/GenerateStepContent"
|
||||
@@ -25,12 +22,8 @@ import { useGenerateFormState } from "./hooks/useGenerateFormState"
|
||||
import { useStepNavigation } from "./hooks/useStepNavigation"
|
||||
import { useGenerateVideo } from "./hooks/useGenerateVideo"
|
||||
|
||||
import { usePreviewAssets } from "./hooks/usePreviewAssets"
|
||||
import { useBatchVariantPlans } from "./hooks/useBatchVariantPlans"
|
||||
import { useVariantVoicePreview } from "./hooks/useVariantVoicePreview"
|
||||
import { useTitleStyleUpdaters } from "./hooks/useStep4Title/useTitleStyleUpdaters"
|
||||
import { getAssetsByKind } from "@/api/assets"
|
||||
import { previewTts } from "@/api/tts"
|
||||
import { usePointsStore } from "@/store/pointsStore"
|
||||
import { hasEnoughPoints } from "./hooks/pointsCost"
|
||||
import { ENABLE_CREDIT_SYSTEM } from "@/config/features"
|
||||
@@ -101,8 +94,6 @@ const GeneratePage: React.FC = () => {
|
||||
setPreviewTaskId,
|
||||
storedSourceEditPlanId,
|
||||
setStoredSourceEditPlanId,
|
||||
serverClips,
|
||||
setServerClips,
|
||||
previewCount,
|
||||
setPreviewCount,
|
||||
previewTitles,
|
||||
@@ -159,62 +150,6 @@ const GeneratePage: React.FC = () => {
|
||||
onTitleSettingsChange: setTitleSettings,
|
||||
})
|
||||
|
||||
/* ── 配音素材库（TTS 试听）── */
|
||||
const { data: voiceMaterials = [] } = useQuery({
|
||||
queryKey: ["assets", "voice"],
|
||||
queryFn: () => getAssetsByKind("voice", { limit: 50 }),
|
||||
})
|
||||
|
||||
const [previewVoiceAudioUrl, setPreviewVoiceAudioUrl] = useState<string | null>(null)
|
||||
const ttsAbortRef = useRef<AbortController | null>(null)
|
||||
const variant0Title = isBatch ? previewTitles?.[0] || "" : ""
|
||||
|
||||
useEffect(() => {
|
||||
if (isBatch) return
|
||||
const voiceAsset = voiceMaterials.find((m) => m.id === selectedVoice)
|
||||
if (voiceAsset?.file_url) {
|
||||
setPreviewVoiceAudioUrl(voiceAsset.file_url)
|
||||
return
|
||||
}
|
||||
|
||||
const ttsTitle = titleSettings.title
|
||||
const voiceId = selectedClonedVoice || selectedVoice
|
||||
if (!voiceId || !ttsTitle) {
|
||||
setPreviewVoiceAudioUrl(null)
|
||||
return
|
||||
}
|
||||
|
||||
ttsAbortRef.current?.abort()
|
||||
const controller = new AbortController()
|
||||
ttsAbortRef.current = controller
|
||||
let cancelled = false
|
||||
|
||||
previewTts({ text: ttsTitle, voice_id: voiceId })
|
||||
.then((res) => {
|
||||
if (!cancelled && res.audio_url) {
|
||||
setPreviewVoiceAudioUrl(res.audio_url)
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
if (!cancelled) {
|
||||
console.warn("[预览配音生成失败]", err)
|
||||
setPreviewVoiceAudioUrl(null)
|
||||
}
|
||||
})
|
||||
|
||||
return () => {
|
||||
cancelled = true
|
||||
controller.abort()
|
||||
}
|
||||
}, [
|
||||
selectedVoice,
|
||||
selectedClonedVoice,
|
||||
titleSettings.title,
|
||||
variant0Title,
|
||||
isBatch,
|
||||
voiceMaterials,
|
||||
])
|
||||
|
||||
/* ── 克隆声音 ── */
|
||||
const { addClone } = useCloneProgress()
|
||||
|
||||
@@ -239,30 +174,11 @@ const GeneratePage: React.FC = () => {
|
||||
[bgm],
|
||||
)
|
||||
|
||||
/* ── 加载素材详情 ── */
|
||||
const previewAssetsEnabled = previewAssetIds.length > 0
|
||||
const {
|
||||
assets: previewAssets,
|
||||
ready: previewAssetsReady,
|
||||
ensureAssets,
|
||||
} = usePreviewAssets(previewAssetIds, previewAssetsEnabled)
|
||||
|
||||
/* ── 预览就绪 ── */
|
||||
// #1899: 不再依赖 currentTemplate，素材加载完即可预览
|
||||
const previewReady = previewAssetsReady
|
||||
|
||||
/* ── 批量变体真实片段（#1744） ── */
|
||||
const batchVoiceLibraryId =
|
||||
voiceMode === "clone" ? selectedClonedVoice || selectedVoice || "" : selectedVoice || ""
|
||||
const {
|
||||
clipsByVariant: variantClips,
|
||||
planIdsByVariant: variantPlanIds,
|
||||
voiceDurationsByVariant: variantVoiceDurations,
|
||||
loading: variantClipsLoading,
|
||||
error: variantClipsError,
|
||||
retry: retryVariantClips,
|
||||
} = useBatchVariantPlans({
|
||||
enabled: isBatch && currentStep === 3 && previewAssetsReady,
|
||||
const { planIdsByVariant: variantPlanIds } = useBatchVariantPlans({
|
||||
enabled: isBatch && currentStep === 3,
|
||||
count: previewCount,
|
||||
templateId: selectedTemplate || "",
|
||||
assetIds: previewAssetIds,
|
||||
@@ -272,39 +188,6 @@ const GeneratePage: React.FC = () => {
|
||||
voiceModePerVideo,
|
||||
})
|
||||
|
||||
/* ── 批量变体配音预览 URL ── */
|
||||
const variantVoiceAudioUrls = useVariantVoicePreview({
|
||||
enabled: isBatch,
|
||||
count: previewCount,
|
||||
perVideo: voiceModePerVideo,
|
||||
sharedVoiceId: selectedVoice || "",
|
||||
clonedVoiceId: selectedClonedVoice || "",
|
||||
variantVoiceIds: voiceLibraryIds || [],
|
||||
titles: previewTitles || [],
|
||||
})
|
||||
|
||||
/* ── 变体 clips 引用素材补拉 ── */
|
||||
const clipAssetIds = useMemo(() => {
|
||||
if (!isBatch || !variantClips?.length) return []
|
||||
const ids = new Set<string>()
|
||||
variantClips.forEach((list) => list.forEach((c) => c.asset_id && ids.add(c.asset_id)))
|
||||
return Array.from(ids)
|
||||
}, [isBatch, variantClips])
|
||||
useEffect(() => {
|
||||
if (clipAssetIds.length > 0) void ensureAssets(clipAssetIds)
|
||||
}, [clipAssetIds, ensureAssets])
|
||||
|
||||
/* ── 勾选变体 ── */
|
||||
const toggleVariantSelect = useCallback(
|
||||
(index: number) => {
|
||||
setSelectedVariantIds((prev) => {
|
||||
const list = prev || []
|
||||
return list.includes(index) ? list.filter((i) => i !== index) : [...list, index].sort()
|
||||
})
|
||||
},
|
||||
[setSelectedVariantIds],
|
||||
)
|
||||
|
||||
/* ── 视频生成核心逻辑 ── */
|
||||
const {
|
||||
generating,
|
||||
@@ -484,10 +367,6 @@ const GeneratePage: React.FC = () => {
|
||||
return
|
||||
}
|
||||
}
|
||||
if (!previewReady) {
|
||||
message.warning("预览素材正在加载，请稍候")
|
||||
return
|
||||
}
|
||||
const ok = await handleGenerate()
|
||||
if (ok) {
|
||||
setCurrentStep(4)
|
||||
@@ -498,7 +377,6 @@ const GeneratePage: React.FC = () => {
|
||||
previewTitles,
|
||||
titleSettings.aiAutoSelect,
|
||||
titleSettings.title,
|
||||
previewReady,
|
||||
handleGenerate,
|
||||
setCurrentStep,
|
||||
balance,
|
||||
@@ -530,10 +408,7 @@ const GeneratePage: React.FC = () => {
|
||||
const finalVideo = generatedVideos[0]
|
||||
|
||||
/* ── 布局 class ── */
|
||||
const layoutClassName = useMemo(() => {
|
||||
if (currentStep === 3) return "xx-generate-layout step4-layout"
|
||||
return "xx-generate-layout full-width"
|
||||
}, [currentStep])
|
||||
const layoutClassName = "xx-generate-layout full-width"
|
||||
|
||||
/* ── 积分消耗估算（步骤3确认生成展示用） ── */
|
||||
const unitsForCost = isBatch ? Math.max(selectedVariantIds.length, 1) : 1
|
||||
@@ -561,66 +436,7 @@ const GeneratePage: React.FC = () => {
|
||||
<GenerateStepsBar currentStep={currentStep} onStepClick={setCurrentStep} />
|
||||
|
||||
<div className={layoutClassName}>
|
||||
{/* ════ 步骤3：左侧预览大区域 ════ */}
|
||||
{currentStep === 3 && (
|
||||
<div className="xx-generate-preview-col">
|
||||
{!isBatch ? (
|
||||
<FrontendPreviewPlayer
|
||||
assets={previewAssets}
|
||||
videoRatio={videoRatio as "9:16" | "16:9"}
|
||||
ready={previewAssets.length > 0}
|
||||
serverClips={serverClips}
|
||||
voiceAudioUrl={previewVoiceAudioUrl || undefined}
|
||||
titleSettings={{
|
||||
title: titleSettings.title,
|
||||
size: titleSettings.size,
|
||||
font: titleSettings.font,
|
||||
color: titleSettings.color,
|
||||
position: titleSettings.position as "top" | "center" | "bottom" | "custom",
|
||||
bold: titleSettings.bold,
|
||||
italic: titleSettings.italic,
|
||||
stroke: titleSettings.stroke,
|
||||
shadow: titleSettings.shadow,
|
||||
posX: titleSettings.posX,
|
||||
posY: titleSettings.posY,
|
||||
}}
|
||||
onTitlePositionChange={styleUpdaters.updateTitlePosition}
|
||||
/>
|
||||
) : (
|
||||
<div className="xx-form-section">
|
||||
<div className="xx-preview-header">
|
||||
<h3>🎬 {previewCount} 个视频预览</h3>
|
||||
<span
|
||||
style={{
|
||||
fontSize: 13,
|
||||
color: "var(--text-secondary, #666)",
|
||||
}}
|
||||
>
|
||||
实时预览，勾选要生成的视频
|
||||
</span>
|
||||
</div>
|
||||
<CanvasPreviewGrid
|
||||
count={previewCount}
|
||||
assets={previewAssets}
|
||||
videoRatio={videoRatio as "9:16" | "16:9"}
|
||||
titles={previewTitles}
|
||||
titleSettings={titleSettings}
|
||||
voiceAudioUrls={variantVoiceAudioUrls}
|
||||
voiceDurations={variantVoiceDurations}
|
||||
variantClips={variantClips}
|
||||
clipsLoading={variantClipsLoading}
|
||||
clipsError={variantClipsError}
|
||||
onRetryClips={retryVariantClips}
|
||||
selectedIds={selectedVariantIds}
|
||||
onToggleSelect={toggleVariantSelect}
|
||||
selectable={!generating}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ════ 右侧：步骤1~2 表单 / 步骤3 标题边栏 / 步骤4 确认生成进度 / 步骤5 封面 ════ */}
|
||||
{/* ════ 步骤1~2 表单 / 步骤3 标题设置 / 步骤4 确认生成进度 / 步骤5 封面 ════ */}
|
||||
<div className="xx-generate-form">
|
||||
<GenerateStepContent
|
||||
currentStep={currentStep}
|
||||
@@ -668,7 +484,6 @@ const GeneratePage: React.FC = () => {
|
||||
ttsVoiceId={ttsVoiceId}
|
||||
ttsVoiceSource={ttsVoiceSource}
|
||||
onSelectedVoiceChange={setSelectedVoice}
|
||||
onServerClipsChange={setServerClips}
|
||||
generating={generating}
|
||||
generated={generated}
|
||||
generateError={generateError}
|
||||
|
||||
@@ -1,156 +0,0 @@
|
||||
/**
|
||||
* 批量前端 Canvas 实时预览网格（Issue #1677 起，#1750 对齐基线：只播放后端真实计划）
|
||||
*
|
||||
* N 个 FrontendPreviewPlayer 网格排列：
|
||||
* - 纯前端 Canvas + video 元素实时播放素材片段，不调任何后端渲染接口；
|
||||
* - #1744/#1750：片段只来自后端变体计划接口（POST /generation/variant-plans）的真实
|
||||
* clips，与正式批量生成同源自 reselect_plan_for_variant，预览即成片；
|
||||
* 接口失败/数据不完整 → 整网格显示错误态+重试（严禁本地假数据冒充预览）；
|
||||
* 加载中 → 9:16 占位防塌陷；
|
||||
* - 各自叠加独立标题浮层（variantTitle），标题样式全局共用；
|
||||
* - 勾选框决定提交时生成哪些变体；
|
||||
* - 每个变体挂载各自配音 URL（独立模式 #1750）或共用同一条；播放互斥：
|
||||
* 点击某卡片播放时其他卡片自动暂停，同一时刻只有一路声音（#1741）。
|
||||
*/
|
||||
import React, { useState } from "react"
|
||||
import type { AssetItem } from "@/api/assets"
|
||||
import type { EditPlanClip } from "@/api/template-editor"
|
||||
import { LoadingOutlined, ReloadOutlined } from "@ant-design/icons"
|
||||
import { Button } from "antd"
|
||||
import type { TitleSettings } from "../types"
|
||||
import FrontendPreviewPlayer from "./FrontendPreviewPlayer"
|
||||
|
||||
interface CanvasPreviewGridProps {
|
||||
count: number
|
||||
assets: AssetItem[]
|
||||
videoRatio: string
|
||||
titles: string[]
|
||||
titleSettings: TitleSettings
|
||||
/**
|
||||
* 各变体配音预览音频 URL（#1750：独立配音模式每变体一条；共用模式全为同一条；
|
||||
* 元素为 null 表示该变体暂无音频（AI 音色 TTS 合成中））
|
||||
*/
|
||||
voiceAudioUrls?: (string | null)[]
|
||||
/**
|
||||
* 各变体配音时长（秒）：后端返回 voice_duration 优先；未返回则为 undefined，
|
||||
* 由 FrontendPreviewPlayer 在 audio loadedmetadata 时自测兜底。
|
||||
* 长度=count，undefined 项表示该变体未提供后端时长。
|
||||
*/
|
||||
voiceDurations?: (number | undefined)[]
|
||||
/**
|
||||
* 各变体的后端真实片段（#1744/#1750）：长度=count。
|
||||
* 仅 clipsLoading=false 且 clipsError=false 时才会传给播放器。
|
||||
*/
|
||||
variantClips?: EditPlanClip[][]
|
||||
/** 是否正在向后端申请变体计划 */
|
||||
clipsLoading?: boolean
|
||||
/** 申请变体计划失败（端点未上线/网络错误/数据不完整）：显示错误态，严禁假数据 */
|
||||
clipsError?: boolean
|
||||
/** 用户点击错误态「重试」 */
|
||||
onRetryClips?: () => void
|
||||
/** 勾选的变体序号 */
|
||||
selectedIds: number[]
|
||||
onToggleSelect: (index: number) => void
|
||||
/** 生成中禁止勾选 */
|
||||
selectable?: boolean
|
||||
}
|
||||
|
||||
const CanvasPreviewGrid: React.FC<CanvasPreviewGridProps> = ({
|
||||
count,
|
||||
assets,
|
||||
videoRatio,
|
||||
titles,
|
||||
titleSettings,
|
||||
voiceAudioUrls,
|
||||
voiceDurations,
|
||||
variantClips,
|
||||
clipsLoading = false,
|
||||
clipsError = false,
|
||||
onRetryClips,
|
||||
selectedIds,
|
||||
onToggleSelect,
|
||||
selectable = true,
|
||||
}) => {
|
||||
// ── 播放互斥（#1741）：同一时刻只有一个卡片持有播放权（token = 变体序号，0 起，#1750） ──
|
||||
const [activePlayToken, setActivePlayToken] = useState<number | null>(null)
|
||||
|
||||
// count 上限已在源头 PreviewCountModal 的数量选择（1~MAX_PREVIEW_COUNT=10）clamp，
|
||||
// 这里完整渲染所有变体，保证每个变体都有勾选/预览入口，UI 与数据不脱节
|
||||
return (
|
||||
<div className="xx-canvas-grid">
|
||||
{Array.from({ length: count }, (_, i) => {
|
||||
const checked = selectedIds.includes(i)
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={`xx-canvas-grid-card${checked ? " selected" : ""}`}
|
||||
data-variant={i}
|
||||
>
|
||||
<div className="xx-canvas-grid-card-bar">
|
||||
<label className="xx-canvas-grid-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
disabled={!selectable}
|
||||
onChange={() => onToggleSelect(i)}
|
||||
/>
|
||||
<span>视频 {i + 1}</span>
|
||||
</label>
|
||||
</div>
|
||||
{clipsError ? (
|
||||
// ── 错误态（#1750）：9:16 占位防塌陷，不渲染任何播放器（严禁假数据） ──
|
||||
<div className="xx-variant-clips-status" role="alert">
|
||||
<span className="xx-variant-clips-error-text">预览加载失败，请重试</span>
|
||||
{i === 0 && onRetryClips ? (
|
||||
<Button
|
||||
size="small"
|
||||
icon={<ReloadOutlined />}
|
||||
onClick={onRetryClips}
|
||||
style={{ marginTop: 12 }}
|
||||
>
|
||||
重试
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
) : clipsLoading || !variantClips?.[i]?.length ? (
|
||||
// ── 加载态：9:16 占位防塌陷 ──
|
||||
<div className="xx-variant-clips-status" aria-label={`变体${i + 1}片段加载中`}>
|
||||
<LoadingOutlined />
|
||||
<span style={{ marginTop: 8 }}>独立选片中…</span>
|
||||
</div>
|
||||
) : (
|
||||
<FrontendPreviewPlayer
|
||||
assets={assets}
|
||||
videoRatio={videoRatio}
|
||||
ready={assets.length > 0}
|
||||
playToken={i}
|
||||
serverClips={variantClips[i]}
|
||||
variantTitle={titles[i] || ""}
|
||||
voiceAudioUrl={voiceAudioUrls?.[i] || undefined}
|
||||
voiceDurationHint={voiceDurations?.[i]}
|
||||
activePlayToken={activePlayToken}
|
||||
onPlayTokenChange={setActivePlayToken}
|
||||
compact
|
||||
titleSettings={{
|
||||
title: titles[i] || "",
|
||||
size: titleSettings.size,
|
||||
font: titleSettings.font,
|
||||
color: titleSettings.color,
|
||||
position: titleSettings.position as "top" | "center" | "bottom" | "custom",
|
||||
bold: titleSettings.bold,
|
||||
italic: titleSettings.italic,
|
||||
stroke: titleSettings.stroke,
|
||||
shadow: titleSettings.shadow,
|
||||
posX: titleSettings.posX,
|
||||
posY: titleSettings.posY,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CanvasPreviewGrid
|
||||
@@ -1,602 +0,0 @@
|
||||
/**
|
||||
* 前端预览播放器 — 原生 Video 元素方案（浏览器硬件解码，独立线程，不阻塞 UI）
|
||||
*
|
||||
* 架构：
|
||||
* - 默认走原生 video 元素多片段切换播放（useSegmentScheduler 调度），
|
||||
* 叠加标题 CSS 浮层、配音音轨（usePreviewAudio）、尾段冻结看门狗、批量播放互斥 token。
|
||||
* UI 拆分为 PreviewControls（控制条/按钮） + PreviewProgressBar（进度条）两个子组件。
|
||||
* - WebCodecs 路径已废弃（原 useWebCodecs 常量恒为 false，相关死代码已移除），
|
||||
* 保留 useCanvasPlayer hook 文件供未来兜底（不影响当前打包体积）。
|
||||
*
|
||||
* 对外 API 完全不变：assets / videoRatio / ready / voiceAudioUrl / serverClips 等。
|
||||
*/
|
||||
import React, { useMemo, useCallback, useState, useRef, useEffect } from "react"
|
||||
import { PlayCircleOutlined, SoundOutlined } from "@ant-design/icons"
|
||||
import type { AssetItem } from "@/api/assets"
|
||||
import type { EditPlanClip } from "@/api/template-editor"
|
||||
import { useSegmentScheduler, type PlaybackSegment } from "../hooks/useSegmentScheduler"
|
||||
import { usePreviewAudio } from "../hooks/usePreviewAudio"
|
||||
import { PreviewControls } from "./PreviewControls"
|
||||
import { getFontFamily } from "@/components/title/constants"
|
||||
|
||||
interface FrontendPreviewPlayerProps {
|
||||
assets: AssetItem[]
|
||||
videoRatio: string
|
||||
ready: boolean
|
||||
/** 服务端变体计划真实片段（#1750：必填，无 fallback；批量网格传入各变体自己的 clips） */
|
||||
serverClips?: EditPlanClip[]
|
||||
voiceAudioUrl?: string
|
||||
titleSettings?: {
|
||||
title: string
|
||||
size: number
|
||||
font: string
|
||||
color: string
|
||||
position: "top" | "center" | "bottom" | "custom"
|
||||
bold?: boolean
|
||||
italic?: boolean
|
||||
stroke?: boolean
|
||||
shadow?: boolean
|
||||
posX?: number | null
|
||||
posY?: number | null
|
||||
}
|
||||
onTitlePositionChange?: (posX: number, posY: number) => void
|
||||
/**
|
||||
* 播放互斥 token（#1750）：批量网格中为变体序号（0 起），单视频不传。
|
||||
* 持有播放权的实例播放，其余自动暂停。
|
||||
*/
|
||||
playToken?: number
|
||||
/** 变体标题文字（批量时每个预览独立标题，叠加在画面上）；不传用 titleSettings.title */
|
||||
variantTitle?: string
|
||||
/** 紧凑模式（批量网格中使用，缩小内边距/标题尺寸） */
|
||||
compact?: boolean
|
||||
/**
|
||||
* 批量网格播放互斥（#1741/#1750）：当前持有播放权的实例 token（变体序号）。
|
||||
* 持有权变化且不等于自身时，本实例自动暂停（视频+配音）。单视频模式不传。
|
||||
*/
|
||||
activePlayToken?: number | null
|
||||
/** 播放权变化回调：本实例请求播放时传自身 playToken，暂停时传 null */
|
||||
onPlayTokenChange?: (token: number | null) => void
|
||||
/**
|
||||
* 后端返回的配音时长（秒）P0 对齐：优先以该值作为音画时长锚点；
|
||||
* 未提供则在 audio loadedmetadata 后自测兜底。
|
||||
*/
|
||||
voiceDurationHint?: number
|
||||
}
|
||||
|
||||
/**
|
||||
* 将后端变体计划 clips 映射为播放片段（#1750：唯一数据来源，无本地模拟 fallback）
|
||||
*
|
||||
* 预览不渲染：浏览器按后端真实计划即时播放素材原片，预览即成片。
|
||||
* 模板片段数固定、成片时长=配音时长（后端等比分配），前端不再有任何时长假设。
|
||||
*/
|
||||
function buildPlaybackSegments(
|
||||
assets: AssetItem[],
|
||||
serverClips?: EditPlanClip[],
|
||||
/** #1754 前端兜底：配音时长≠clips 总时长时，按比例缩放每段播放时长并调速 */
|
||||
speedFactor = 1,
|
||||
): PlaybackSegment[] {
|
||||
if (!assets.length || !serverClips || serverClips.length === 0) return []
|
||||
|
||||
const assetMap = new Map(assets.map((a) => [a.id, a]))
|
||||
const segments: PlaybackSegment[] = []
|
||||
// speedFactor > 1 表示 clips 偏短需加速；< 1 表示 clips 偏长需减速
|
||||
const invSpeed = speedFactor > 0 && Math.abs(speedFactor - 1) > 0.01 ? 1 / speedFactor : 1
|
||||
for (const clip of serverClips) {
|
||||
const asset = assetMap.get(clip.asset_id)
|
||||
if (!asset) continue
|
||||
const assetDuration = asset.duration || asset.metadata?.duration || 0
|
||||
const startTime = clip.start_time || 0
|
||||
// 片段时长以后端计划为准（配音时长等比分配）；素材时长仅用于兜底钳制边界
|
||||
const rawClipDuration = clip.duration || 0
|
||||
// #1754：按 speedFactor 缩放片段时长，使总时长匹配配音
|
||||
const clipDuration = invSpeed !== 1 ? rawClipDuration * invSpeed : rawClipDuration
|
||||
const endTime =
|
||||
assetDuration > 0
|
||||
? Math.min(startTime + clipDuration, assetDuration)
|
||||
: startTime + clipDuration
|
||||
const videoUrl = asset.file_url || asset.storage_key
|
||||
segments.push({
|
||||
assetId: asset.id,
|
||||
videoUrl,
|
||||
startTime,
|
||||
endTime,
|
||||
order: clip.order,
|
||||
playbackRate: invSpeed !== 1 ? speedFactor : undefined,
|
||||
})
|
||||
}
|
||||
return segments.sort((a, b) => a.order - b.order)
|
||||
}
|
||||
|
||||
const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
|
||||
assets,
|
||||
videoRatio,
|
||||
ready,
|
||||
serverClips,
|
||||
voiceAudioUrl,
|
||||
voiceDurationHint,
|
||||
titleSettings,
|
||||
onTitlePositionChange,
|
||||
playToken,
|
||||
variantTitle,
|
||||
compact = false,
|
||||
activePlayToken = null,
|
||||
onPlayTokenChange,
|
||||
}) => {
|
||||
// #1754→P0：配音时长作为音画时长锚点。
|
||||
// 优先使用后端返回的 voiceDurationHint；音频 loadedmetadata 后再以自测值覆盖（更精确）。
|
||||
const [voiceDuration, setVoiceDuration] = useState<number>(() =>
|
||||
voiceDurationHint && voiceDurationHint > 0 ? voiceDurationHint : 0,
|
||||
)
|
||||
|
||||
// #1756：clips 原始总时长 + 转场时长（后端等比分配配音时包含转场占位）
|
||||
const rawClipsDuration = useMemo(() => {
|
||||
if (!serverClips?.length) return 0
|
||||
return serverClips.reduce((sum, c) => sum + (c.duration || 0) + (c.transition_duration || 0), 0)
|
||||
}, [serverClips])
|
||||
|
||||
// #1754→#1756：配音时长可用且与 clips+转场 总时长偏差 > 5% 时，按比例调速
|
||||
const speedFactor = useMemo(() => {
|
||||
if (!voiceDuration || voiceDuration <= 0 || rawClipsDuration <= 0) return 1
|
||||
const ratio = rawClipsDuration / voiceDuration
|
||||
return Math.abs(ratio - 1) > 0.05 ? ratio : 1
|
||||
}, [voiceDuration, rawClipsDuration])
|
||||
|
||||
const segments = useMemo(
|
||||
() => buildPlaybackSegments(assets, serverClips, speedFactor),
|
||||
[assets, serverClips, speedFactor],
|
||||
)
|
||||
// 批量变体：标题文字取 variantTitle，样式仍由全局 titleSettings 控制
|
||||
const effectiveTitle = variantTitle ?? titleSettings?.title
|
||||
|
||||
// ── ASS 坐标系参数（与后端 ass_subtitle_builder.py 一致） ──
|
||||
const TITLE_MARGIN_TOP = 180
|
||||
const TITLE_MARGIN_BOTTOM = 100
|
||||
const TITLE_MARGIN_SIDE = 40
|
||||
const playRes = (() => {
|
||||
switch (videoRatio) {
|
||||
case "16:9":
|
||||
return { width: 1920, height: 1080 }
|
||||
case "1:1":
|
||||
return { width: 1080, height: 1080 }
|
||||
case "9:16":
|
||||
default:
|
||||
return { width: 1080, height: 1920 }
|
||||
}
|
||||
})()
|
||||
const customTitleXPct =
|
||||
titleSettings?.posX != null && playRes.width > 0
|
||||
? (titleSettings.posX / playRes.width) * 100
|
||||
: null
|
||||
const customTitleYPct =
|
||||
titleSettings?.posY != null && playRes.height > 0
|
||||
? (titleSettings.posY / playRes.height) * 100
|
||||
: null
|
||||
|
||||
// ── 标题拖拽（用 ref 避免每帧触发 React 重渲染）──
|
||||
const draggingTitleRef = useRef(false)
|
||||
const titleDragRef = useRef<HTMLDivElement>(null)
|
||||
const playerContainerRef = useRef<HTMLDivElement>(null)
|
||||
const handleTitlePointerDown = useCallback(
|
||||
(e: React.PointerEvent<HTMLDivElement>) => {
|
||||
if (!onTitlePositionChange || !playerContainerRef.current) return
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
;(e.target as Element).setPointerCapture(e.pointerId)
|
||||
draggingTitleRef.current = true
|
||||
;(e.currentTarget as HTMLDivElement).style.cursor = "grabbing"
|
||||
},
|
||||
[onTitlePositionChange],
|
||||
)
|
||||
const handleTitlePointerMove = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
|
||||
if (!draggingTitleRef.current || !playerContainerRef.current) return
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
if (titleDragRef.current) {
|
||||
const rect = playerContainerRef.current.getBoundingClientRect()
|
||||
const relX = Math.max(0, Math.min(rect.width, e.clientX - rect.left))
|
||||
const relY = Math.max(0, Math.min(rect.height, e.clientY - rect.top))
|
||||
const xpct = (relX / rect.width) * 100
|
||||
const ypct = (relY / rect.height) * 100
|
||||
titleDragRef.current.style.left = `${xpct}%`
|
||||
titleDragRef.current.style.top = `${ypct}%`
|
||||
}
|
||||
}, [])
|
||||
const handleTitlePointerUp = useCallback(
|
||||
(e: React.PointerEvent<HTMLDivElement>) => {
|
||||
if (!draggingTitleRef.current) return
|
||||
draggingTitleRef.current = false
|
||||
if (onTitlePositionChange && playerContainerRef.current) {
|
||||
const rect = playerContainerRef.current.getBoundingClientRect()
|
||||
const relX = Math.max(0, Math.min(rect.width, e.clientX - rect.left))
|
||||
const relY = Math.max(0, Math.min(rect.height, e.clientY - rect.top))
|
||||
const posX = Math.round((relX / rect.width) * playRes.width)
|
||||
const posY = Math.round((relY / rect.height) * playRes.height)
|
||||
onTitlePositionChange(posX, posY)
|
||||
}
|
||||
;(e.currentTarget as HTMLDivElement).style.cursor = "grab"
|
||||
try {
|
||||
if ((e.currentTarget as Element).hasPointerCapture(e.pointerId)) {
|
||||
;(e.currentTarget as Element).releasePointerCapture(e.pointerId)
|
||||
}
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
},
|
||||
[onTitlePositionChange, playRes.width, playRes.height],
|
||||
)
|
||||
|
||||
const [containerHeight, setContainerHeight] = useState(0)
|
||||
useEffect(() => {
|
||||
const el = playerContainerRef.current
|
||||
if (!el) return
|
||||
const ro = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
const h = entry.contentRect.height
|
||||
if (h > 0) setContainerHeight(h)
|
||||
}
|
||||
})
|
||||
ro.observe(el)
|
||||
const rect = el.getBoundingClientRect()
|
||||
if (rect.height > 0) setContainerHeight(rect.height)
|
||||
return () => ro.disconnect()
|
||||
}, [])
|
||||
|
||||
// 标题字号按容器高度与 PlayResY 的比例缩放
|
||||
const titleFontSizePx =
|
||||
containerHeight > 0
|
||||
? ((titleSettings?.size ?? 36) / playRes.height) * containerHeight
|
||||
: (titleSettings?.size ?? 36)
|
||||
const titleSidePct = (TITLE_MARGIN_SIDE / playRes.width) * 100
|
||||
const titleTopPct = (TITLE_MARGIN_TOP / playRes.height) * 100
|
||||
const titleBottomPct = (TITLE_MARGIN_BOTTOM / playRes.height) * 100
|
||||
const titleScale = containerHeight > 0 ? containerHeight / playRes.height : 1
|
||||
const titleStrokeWidth = Math.max(1, 2 * titleScale)
|
||||
const titleShadowBlur = 4 * titleScale
|
||||
const titleShadowOffset = 2 * titleScale
|
||||
|
||||
// ── Video 播放器（默认路径，浏览器原生硬件解码） ──
|
||||
const {
|
||||
isPlaying,
|
||||
currentTime,
|
||||
totalDuration,
|
||||
currentSegmentIndex,
|
||||
canPlay,
|
||||
togglePlayPause,
|
||||
seekTo,
|
||||
pause,
|
||||
videoRefs,
|
||||
} = useSegmentScheduler(segments)
|
||||
|
||||
// P0 fix：以配音时长为音画同步锚点。
|
||||
// 有配音时总时长 = 配音时长（短则末帧冻结，长则硬停）；无配音时沿用视频总时长（素材原声兜底）。
|
||||
const effectiveTotalDuration =
|
||||
!!voiceAudioUrl && voiceDuration > 0 ? voiceDuration : totalDuration
|
||||
|
||||
// 本卡片静音开关（#1741）：默认有声，用户可点喇叭单独静音某张卡片
|
||||
const [muted, setMuted] = useState(false)
|
||||
// 有配音时 video 素材保持静音（避免原声与配音混音）；无配音时取消静音，素材原声兜底
|
||||
const hasVoice = !!voiceAudioUrl
|
||||
|
||||
// 音频 ended：兜底触发暂停与释放播放权
|
||||
const handleAudioEnded = useCallback(() => {
|
||||
if (!isPlaying) return
|
||||
pause()
|
||||
if (playToken != null) onPlayTokenChange?.(null)
|
||||
}, [isPlaying, pause, playToken, onPlayTokenChange])
|
||||
|
||||
const {
|
||||
seekTo: audioSeekTo,
|
||||
ensurePlayingAt: audioEnsurePlayingAt,
|
||||
pause: audioPause,
|
||||
} = usePreviewAudio({
|
||||
voiceAudioUrl,
|
||||
voiceDurationHint,
|
||||
muted,
|
||||
isPlaying,
|
||||
currentTime,
|
||||
onVoiceDurationChange: setVoiceDuration,
|
||||
onEnded: handleAudioEnded,
|
||||
})
|
||||
|
||||
// 片段切换时同步音频时间（video fallback）
|
||||
useEffect(() => {
|
||||
if (!isPlaying) return
|
||||
audioSeekTo(currentTime)
|
||||
// 注意：不要把 currentTime 放进依赖数组，否则每200ms会重置音频位置导致卡顿
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [currentSegmentIndex, isPlaying])
|
||||
|
||||
// P0 fix：视频比配音短时的「末帧冻结+音频续播」模式。
|
||||
// 视频调度器播完最后一段自动 pause，此时若配音仍在播，用 rAF 虚拟时钟推进 currentTime 直到配音结束。
|
||||
const [tailCurrentTime, setTailCurrentTime] = useState<number | null>(null)
|
||||
const tailStartRef = useRef<number>(0)
|
||||
const tailBaseRef = useRef<number>(0)
|
||||
const tailAudioRef = useRef({ ensurePlayingAt: audioEnsurePlayingAt, pause: audioPause })
|
||||
tailAudioRef.current = { ensurePlayingAt: audioEnsurePlayingAt, pause: audioPause }
|
||||
|
||||
useEffect(() => {
|
||||
const needTail =
|
||||
!!voiceAudioUrl &&
|
||||
voiceDuration > 0 &&
|
||||
!isPlaying &&
|
||||
typeof currentTime === "number" &&
|
||||
currentTime >= totalDuration - 0.1 &&
|
||||
currentTime < voiceDuration - 0.1
|
||||
if (needTail && tailCurrentTime === null) {
|
||||
tailBaseRef.current = currentTime
|
||||
tailStartRef.current = performance.now()
|
||||
setTailCurrentTime(currentTime)
|
||||
tailAudioRef.current.ensurePlayingAt(currentTime)
|
||||
return
|
||||
}
|
||||
if (!needTail && tailCurrentTime !== null) {
|
||||
setTailCurrentTime(null)
|
||||
}
|
||||
}, [isPlaying, currentTime, totalDuration, voiceDuration, voiceAudioUrl, tailCurrentTime])
|
||||
|
||||
useEffect(() => {
|
||||
if (tailCurrentTime === null) return
|
||||
let raf = 0
|
||||
const tick = () => {
|
||||
const elapsed = (performance.now() - tailStartRef.current) / 1000
|
||||
const t = Math.min(tailBaseRef.current + elapsed, voiceDuration || tailBaseRef.current)
|
||||
setTailCurrentTime(t)
|
||||
tailAudioRef.current.ensurePlayingAt(t)
|
||||
if (t >= (voiceDuration || 0) - 0.05) {
|
||||
tailAudioRef.current.pause()
|
||||
if (playToken != null) onPlayTokenChange?.(null)
|
||||
setTailCurrentTime(null)
|
||||
return
|
||||
}
|
||||
raf = requestAnimationFrame(tick)
|
||||
}
|
||||
raf = requestAnimationFrame(tick)
|
||||
return () => cancelAnimationFrame(raf)
|
||||
}, [tailCurrentTime, voiceDuration, playToken, onPlayTokenChange])
|
||||
|
||||
// 呈现给 UI/进度条的「当前时间」：尾段用虚拟时间，否则用视频时间
|
||||
const displayCurrentTime = tailCurrentTime !== null ? tailCurrentTime : currentTime
|
||||
|
||||
const handleSeekTo = useCallback(
|
||||
(time: number) => {
|
||||
setTailCurrentTime(null)
|
||||
seekTo(time)
|
||||
audioSeekTo(time)
|
||||
},
|
||||
[seekTo, audioSeekTo],
|
||||
)
|
||||
|
||||
// ── 批量网格播放互斥（#1741）：播放权属于其他实例时，本实例自动暂停 ──
|
||||
useEffect(() => {
|
||||
if (activePlayToken == null || playToken == null || activePlayToken === playToken) return
|
||||
if (isPlaying) {
|
||||
pause()
|
||||
}
|
||||
// isPlaying 不放依赖：只在 token 变化时执行一次暂停
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [activePlayToken, playToken])
|
||||
|
||||
const handleTogglePlay = useCallback(() => {
|
||||
if (playToken != null) onPlayTokenChange?.(isPlaying ? null : playToken)
|
||||
togglePlayPause()
|
||||
}, [togglePlayPause, isPlaying, playToken, onPlayTokenChange])
|
||||
|
||||
// P0 fix：音画同步看门狗——有配音时播放时间达到配音时长立即暂停视频+音频（末帧冻结）
|
||||
useEffect(() => {
|
||||
if (!isPlaying) return
|
||||
if (!voiceAudioUrl || voiceDuration <= 0) return
|
||||
if (displayCurrentTime < voiceDuration - 0.08) return
|
||||
pause()
|
||||
audioPause()
|
||||
if (playToken != null) onPlayTokenChange?.(null)
|
||||
}, [
|
||||
isPlaying,
|
||||
displayCurrentTime,
|
||||
voiceAudioUrl,
|
||||
voiceDuration,
|
||||
pause,
|
||||
audioPause,
|
||||
playToken,
|
||||
onPlayTokenChange,
|
||||
])
|
||||
|
||||
// ── 未就绪 ──
|
||||
if (!ready || !assets.length) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
width: "100%",
|
||||
maxWidth: 280,
|
||||
aspectRatio: "9 / 16",
|
||||
background: "#0a0a0a",
|
||||
borderRadius: 24,
|
||||
overflow: "hidden",
|
||||
boxShadow:
|
||||
"0 4px 6px -1px rgba(0,0,0,0.3), 0 20px 50px -12px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.06)",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<SoundOutlined style={{ fontSize: 40, color: "rgba(255,255,255,0.3)", marginBottom: 12 }} />
|
||||
<p style={{ color: "rgba(255,255,255,0.6)", fontSize: 14, margin: "0 0 4px" }}>
|
||||
准备预览素材...
|
||||
</p>
|
||||
<p style={{ color: "rgba(255,255,255,0.35)", fontSize: 12, margin: 0 }}>
|
||||
加载素材后即可预览播放
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── 无播放片段 ──
|
||||
if (!canPlay) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
width: "100%",
|
||||
maxWidth: 280,
|
||||
aspectRatio: "9 / 16",
|
||||
background: "#0a0a0a",
|
||||
borderRadius: 24,
|
||||
overflow: "hidden",
|
||||
boxShadow:
|
||||
"0 4px 6px -1px rgba(0,0,0,0.3), 0 20px 50px -12px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.06)",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: 24,
|
||||
}}
|
||||
>
|
||||
<PlayCircleOutlined
|
||||
style={{ fontSize: 40, color: "rgba(255,255,255,0.3)", marginBottom: 12 }}
|
||||
/>
|
||||
<p style={{ color: "rgba(255,255,255,0.6)", fontSize: 14, margin: "0 0 4px" }}>
|
||||
暂无可播放素材
|
||||
</p>
|
||||
<p style={{ color: "rgba(255,255,255,0.35)", fontSize: 12, margin: 0 }}>
|
||||
请先在左侧选择素材
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={playerContainerRef}
|
||||
style={{
|
||||
position: "relative",
|
||||
width: "100%",
|
||||
maxWidth: compact ? "100%" : 280,
|
||||
margin: compact ? 0 : "0 auto",
|
||||
aspectRatio: "9 / 16",
|
||||
background: compact ? "transparent" : "#0a0a0a",
|
||||
borderRadius: compact ? 10 : 24,
|
||||
overflow: "hidden",
|
||||
boxShadow: compact
|
||||
? "inset 0 0 0 1px rgba(255,255,255,0.06)"
|
||||
: "0 4px 6px -1px rgba(0,0,0,0.3), 0 20px 50px -12px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.06)",
|
||||
}}
|
||||
>
|
||||
{/* ── Video 渲染层（默认路径，浏览器原生硬件解码） ── */}
|
||||
{segments.map((seg, i) => (
|
||||
<video
|
||||
key={seg.assetId}
|
||||
ref={(el) => {
|
||||
videoRefs.current[i] = el
|
||||
}}
|
||||
preload="auto"
|
||||
src={seg.videoUrl}
|
||||
style={{
|
||||
position: "absolute",
|
||||
inset: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "cover",
|
||||
background: "#000",
|
||||
zIndex: 1,
|
||||
opacity: i === currentSegmentIndex ? 1 : 0,
|
||||
pointerEvents: i === currentSegmentIndex ? "auto" : "none",
|
||||
}}
|
||||
muted={hasVoice || muted}
|
||||
playsInline
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* 标题CSS叠加层 — 与后端 ASS 烧录坐标系 1:1 对齐 */}
|
||||
{titleSettings?.title && (
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
inset: 0,
|
||||
zIndex: 5,
|
||||
pointerEvents: "none",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
width: `${100 - 2 * titleSidePct}%`,
|
||||
maxWidth: `${100 - 2 * titleSidePct}%`,
|
||||
...(customTitleXPct != null && customTitleYPct != null
|
||||
? {
|
||||
left: `${customTitleXPct}%`,
|
||||
top: `${customTitleYPct}%`,
|
||||
transform: "translate(-50%, -50%)",
|
||||
textAlign: "center" as const,
|
||||
}
|
||||
: {
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
textAlign: "center" as const,
|
||||
...(titleSettings.position === "top"
|
||||
? { top: `${titleTopPct}%` }
|
||||
: titleSettings.position === "center"
|
||||
? { top: "50%", transform: "translate(-50%, -50%)" }
|
||||
: { bottom: `${titleBottomPct}%` }),
|
||||
}),
|
||||
pointerEvents: onTitlePositionChange && playToken == null ? "auto" : "none",
|
||||
cursor: onTitlePositionChange && playToken == null ? "grab" : "default",
|
||||
touchAction: "none",
|
||||
userSelect: "none",
|
||||
WebkitUserSelect: "none",
|
||||
padding: "8px 12px",
|
||||
boxShadow: "inset 0 0 0 16px transparent",
|
||||
}}
|
||||
ref={titleDragRef}
|
||||
onPointerDown={handleTitlePointerDown}
|
||||
onPointerMove={handleTitlePointerMove}
|
||||
onPointerUp={handleTitlePointerUp}
|
||||
onPointerCancel={handleTitlePointerUp}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontSize: `${titleFontSizePx}px`,
|
||||
fontFamily: getFontFamily(titleSettings.font || "思源黑体"),
|
||||
color: titleSettings.color || "#ffffff",
|
||||
fontWeight: titleSettings.bold ? 700 : 400,
|
||||
fontStyle: titleSettings.italic ? "italic" : "normal",
|
||||
lineHeight: 1.05,
|
||||
wordBreak: "break-word",
|
||||
WebkitTextStroke: titleSettings.stroke
|
||||
? `${titleStrokeWidth}px #000000`
|
||||
: undefined,
|
||||
textShadow: titleSettings.shadow
|
||||
? `${titleShadowOffset}px ${titleShadowOffset}px ${titleShadowBlur}px rgba(0,0,0,0.8)`
|
||||
: undefined,
|
||||
}}
|
||||
>
|
||||
{(effectiveTitle || "").split(/[/／]/).map((part, i) => (
|
||||
<span key={i}>
|
||||
{i > 0 && <br />}
|
||||
{part}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<PreviewControls
|
||||
isPlaying={isPlaying}
|
||||
onTogglePlay={handleTogglePlay}
|
||||
muted={muted}
|
||||
onToggleMute={() => setMuted((m) => !m)}
|
||||
hasSegments={segments.length > 0}
|
||||
segmentIndex={currentSegmentIndex}
|
||||
segmentCount={segments.length}
|
||||
currentTime={displayCurrentTime}
|
||||
totalDuration={effectiveTotalDuration}
|
||||
onSeek={handleSeekTo}
|
||||
compact={compact}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FrontendPreviewPlayer
|
||||
@@ -4,7 +4,6 @@
|
||||
* 原步骤"选择配音"已从主流程移除，改为 Step1 下一步分支弹窗（VoiceSelectModal / ScriptSelectModal → TtsVoiceModal）。
|
||||
*/
|
||||
import React from "react"
|
||||
import type { EditPlanClip } from "@/api/template-editor"
|
||||
import type { CoverConfig } from "../types/cover"
|
||||
import type { TitleSettings } from "../types"
|
||||
import type { ScriptItem } from "@/api/scripts"
|
||||
@@ -69,7 +68,6 @@ export interface GenerateStepContentProps {
|
||||
/* ── 配音 ── */
|
||||
selectedVoice: string
|
||||
onSelectedVoiceChange: (id: string) => void
|
||||
onServerClipsChange: (clips: EditPlanClip[]) => void
|
||||
/* ── 生成 ── */
|
||||
generating: boolean
|
||||
generated: boolean
|
||||
@@ -137,7 +135,6 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
|
||||
titlePresets,
|
||||
coverSettings,
|
||||
onCoverSettingsChange,
|
||||
onServerClipsChange,
|
||||
generating,
|
||||
generateError,
|
||||
progress,
|
||||
@@ -155,13 +152,6 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
|
||||
ttsVoiceSource,
|
||||
} = props
|
||||
|
||||
const handleClipsChange = React.useCallback(
|
||||
(clips: EditPlanClip[], _templateId?: string) => {
|
||||
onServerClipsChange(clips)
|
||||
},
|
||||
[onServerClipsChange],
|
||||
)
|
||||
|
||||
switch (currentStep) {
|
||||
case 1:
|
||||
return (
|
||||
@@ -189,7 +179,6 @@ export const GenerateStepContent: React.FC<GenerateStepContentProps> = (props) =
|
||||
clipCount={clipCount}
|
||||
onClipCountChange={onClipCountChange}
|
||||
selectedTemplate={selectedTemplate}
|
||||
onServerClipsChange={handleClipsChange}
|
||||
/>
|
||||
)
|
||||
case 3:
|
||||
|
||||
@@ -1,195 +0,0 @@
|
||||
import React from "react"
|
||||
import {
|
||||
PlayCircleOutlined,
|
||||
PauseCircleOutlined,
|
||||
AudioOutlined,
|
||||
AudioMutedOutlined,
|
||||
} from "@ant-design/icons"
|
||||
import { PreviewProgressBar } from "./PreviewProgressBar"
|
||||
|
||||
interface PreviewControlsProps {
|
||||
isPlaying: boolean
|
||||
onTogglePlay: () => void
|
||||
muted: boolean
|
||||
onToggleMute: () => void
|
||||
hasSegments: boolean
|
||||
segmentIndex: number
|
||||
segmentCount: number
|
||||
currentTime: number
|
||||
totalDuration: number
|
||||
onSeek: (time: number) => void
|
||||
compact?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* 播放控制 UI 组件（静音按钮 / 片段指示器 / 中央播放按钮 / 底部毛玻璃控制条）
|
||||
*/
|
||||
export const PreviewControls: React.FC<PreviewControlsProps> = ({
|
||||
isPlaying,
|
||||
onTogglePlay,
|
||||
muted,
|
||||
onToggleMute,
|
||||
hasSegments,
|
||||
segmentIndex,
|
||||
segmentCount,
|
||||
currentTime,
|
||||
totalDuration,
|
||||
onSeek,
|
||||
compact = false,
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
{/* 静音/有声切换（#1741）：左上角 */}
|
||||
{hasSegments && (
|
||||
<button
|
||||
type="button"
|
||||
aria-label={muted ? "取消静音" : "静音"}
|
||||
title={muted ? "取消静音" : "静音"}
|
||||
onClick={onToggleMute}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 8,
|
||||
left: 8,
|
||||
width: compact ? 26 : 30,
|
||||
height: compact ? 26 : 30,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
background: "rgba(0,0,0,0.45)",
|
||||
backdropFilter: "blur(8px)",
|
||||
WebkitBackdropFilter: "blur(8px)",
|
||||
border: "1px solid rgba(255,255,255,0.1)",
|
||||
borderRadius: "50%",
|
||||
color: muted ? "rgba(255,255,255,0.45)" : "rgba(255,255,255,0.92)",
|
||||
fontSize: compact ? 13 : 15,
|
||||
cursor: "pointer",
|
||||
zIndex: 10,
|
||||
padding: 0,
|
||||
transition: "background 0.15s, color 0.15s",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = "rgba(0,0,0,0.65)"
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = "rgba(0,0,0,0.45)"
|
||||
}}
|
||||
>
|
||||
{muted ? <AudioMutedOutlined /> : <AudioOutlined />}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* 片段指示器 — 右上角胶囊 */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 8,
|
||||
right: 8,
|
||||
background: "rgba(0,0,0,0.45)",
|
||||
backdropFilter: "blur(8px)",
|
||||
WebkitBackdropFilter: "blur(8px)",
|
||||
color: "rgba(255,255,255,0.9)",
|
||||
fontSize: compact ? 9 : 10,
|
||||
fontWeight: 500,
|
||||
padding: compact ? "1px 6px" : "2px 8px",
|
||||
borderRadius: 999,
|
||||
zIndex: 10,
|
||||
border: "1px solid rgba(255,255,255,0.1)",
|
||||
letterSpacing: 0.3,
|
||||
}}
|
||||
>
|
||||
{`${segmentIndex + 1} / ${segmentCount}`}
|
||||
</div>
|
||||
|
||||
{/* 中央播放按钮 */}
|
||||
{!isPlaying && (
|
||||
<button
|
||||
onClick={onTogglePlay}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
background: "rgba(0,0,0,0.45)",
|
||||
backdropFilter: "blur(12px)",
|
||||
WebkitBackdropFilter: "blur(12px)",
|
||||
border: "1px solid rgba(255,255,255,0.15)",
|
||||
borderRadius: "50%",
|
||||
width: 52,
|
||||
height: 52,
|
||||
cursor: "pointer",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
color: "#fff",
|
||||
fontSize: 26,
|
||||
zIndex: 10,
|
||||
transition: "transform 0.2s ease, background 0.2s ease",
|
||||
boxShadow: "0 4px 20px rgba(0,0,0,0.4)",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.transform = "translate(-50%, -50%) scale(1.08)"
|
||||
e.currentTarget.style.background = "rgba(0,0,0,0.6)"
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.transform = "translate(-50%, -50%) scale(1)"
|
||||
e.currentTarget.style.background = "rgba(0,0,0,0.45)"
|
||||
}}
|
||||
>
|
||||
<PlayCircleOutlined />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* 控制条 — 手机风格毛玻璃 */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: compact ? 6 : 10,
|
||||
padding: compact ? "8px 10px 10px" : "12px 16px 16px",
|
||||
background: "linear-gradient(transparent, rgba(0,0,0,0.7))",
|
||||
backdropFilter: "blur(4px)",
|
||||
WebkitBackdropFilter: "blur(4px)",
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
<button
|
||||
onClick={onTogglePlay}
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.15)",
|
||||
border: "none",
|
||||
color: "#fff",
|
||||
fontSize: compact ? 14 : 16,
|
||||
cursor: "pointer",
|
||||
width: compact ? 26 : 32,
|
||||
height: compact ? 26 : 32,
|
||||
borderRadius: "50%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flexShrink: 0,
|
||||
transition: "background 0.15s",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = "rgba(255,255,255,0.25)"
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = "rgba(255,255,255,0.15)"
|
||||
}}
|
||||
>
|
||||
{isPlaying ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
|
||||
</button>
|
||||
|
||||
<PreviewProgressBar
|
||||
currentTime={currentTime}
|
||||
totalDuration={totalDuration}
|
||||
onSeek={onSeek}
|
||||
compact={compact}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,108 +0,0 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react"
|
||||
import { formatDuration } from "../utils/formatDuration"
|
||||
|
||||
interface PreviewProgressBarProps {
|
||||
currentTime: number
|
||||
totalDuration: number
|
||||
onSeek: (time: number) => void
|
||||
compact?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* 进度条组件：点击/拖拽 seek
|
||||
*/
|
||||
export const PreviewProgressBar: React.FC<PreviewProgressBarProps> = ({
|
||||
currentTime,
|
||||
totalDuration,
|
||||
onSeek,
|
||||
compact = false,
|
||||
}) => {
|
||||
const progressRef = useRef<HTMLDivElement>(null)
|
||||
const [isDragging, setIsDragging] = useState(false)
|
||||
|
||||
const seekByClientX = useCallback(
|
||||
(clientX: number) => {
|
||||
if (!progressRef.current || totalDuration <= 0) return
|
||||
const rect = progressRef.current.getBoundingClientRect()
|
||||
const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width))
|
||||
onSeek(ratio * totalDuration)
|
||||
},
|
||||
[totalDuration, onSeek],
|
||||
)
|
||||
|
||||
const handleMouseDown = useCallback(
|
||||
(e: React.MouseEvent<HTMLDivElement>) => {
|
||||
setIsDragging(true)
|
||||
seekByClientX(e.clientX)
|
||||
},
|
||||
[seekByClientX],
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (!isDragging) return
|
||||
const handleMouseMove = (e: MouseEvent) => seekByClientX(e.clientX)
|
||||
const handleMouseUp = () => setIsDragging(false)
|
||||
window.addEventListener("mousemove", handleMouseMove)
|
||||
window.addEventListener("mouseup", handleMouseUp)
|
||||
return () => {
|
||||
window.removeEventListener("mousemove", handleMouseMove)
|
||||
window.removeEventListener("mouseup", handleMouseUp)
|
||||
}
|
||||
}, [isDragging, seekByClientX])
|
||||
|
||||
const progressPercent = totalDuration > 0 ? (currentTime / totalDuration) * 100 : 0
|
||||
|
||||
return (
|
||||
<>
|
||||
<span
|
||||
style={{
|
||||
fontSize: compact ? 10 : 11,
|
||||
color: "rgba(255,255,255,0.85)",
|
||||
minWidth: compact ? 58 : 72,
|
||||
fontVariantNumeric: "tabular-nums",
|
||||
letterSpacing: 0.2,
|
||||
}}
|
||||
>
|
||||
{formatDuration(currentTime)} / {formatDuration(totalDuration)}
|
||||
</span>
|
||||
|
||||
<div
|
||||
ref={progressRef}
|
||||
onMouseDown={handleMouseDown}
|
||||
style={{
|
||||
flex: 1,
|
||||
height: 3,
|
||||
background: "rgba(255,255,255,0.2)",
|
||||
borderRadius: 2,
|
||||
cursor: "pointer",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: "100%",
|
||||
width: `${progressPercent}%`,
|
||||
background: "#fff",
|
||||
borderRadius: 2,
|
||||
transition: isDragging ? "none" : "width 0.1s linear",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: `${progressPercent}%`,
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: "50%",
|
||||
background: "#fff",
|
||||
boxShadow: "0 0 6px rgba(255,255,255,0.5)",
|
||||
opacity: isDragging ? 1 : 0,
|
||||
transition: "opacity 0.15s",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,24 +1,18 @@
|
||||
/**
|
||||
* Step 4 选择标题（Issue #1677 批量生成）
|
||||
*
|
||||
* 布局（由 GeneratePage 编排）：左侧大区域实时预览（单=大播放器，批量=Canvas 网格），
|
||||
* 右侧边栏标题设置。本组件渲染在右侧边栏：
|
||||
* - 单视频：AI 标题生成器 + AutoComplete 标题库（与旧版完全一致，零回归）
|
||||
* - 批量：N 个独立标题输入框（AutoComplete 支持标题库选择）+ 批量 AI 生成
|
||||
* （一次生成 N 个标题，分别填入各变体，可单独换一个）
|
||||
* 布局：全宽区域，标题输入 + 标题模板卡片网格。
|
||||
* - 单视频：TitleLibraryAutoComplete 标题库输入
|
||||
* - 批量：N 个独立标题输入框（AutoComplete 支持标题库选择）
|
||||
* - 标题样式（字体/颜色/位置/大小/粗斜描边/预设）：全局统一
|
||||
*/
|
||||
import React, { useMemo, useState } from "react"
|
||||
import { Input, message } from "antd"
|
||||
import { LoadingOutlined } from "@ant-design/icons"
|
||||
import React, { useMemo } from "react"
|
||||
import type { TitleSettings } from "../types"
|
||||
import { POSITION_OPTIONS } from "../constants"
|
||||
import { FONT_OPTIONS } from "@/components/title/constants"
|
||||
import { useStep4Title } from "../hooks/useStep4Title"
|
||||
import AiTitleGenerator from "./title/AiTitleGenerator"
|
||||
import TitleLibraryAutoComplete from "./title/TitleLibraryAutoComplete"
|
||||
import TitleStylePanel from "./title/TitleStylePanel"
|
||||
import { AI_TITLE_TEMPLATES } from "../constants"
|
||||
import type { TitleTemplate } from "@/components/title/template-types"
|
||||
|
||||
interface Step4TitleSettingsProps {
|
||||
@@ -55,36 +49,6 @@ interface Step4TitleSettingsProps {
|
||||
onApplyTemplate?: (settings: TitleSettings, template: TitleTemplate) => void
|
||||
}
|
||||
|
||||
/** 从本地 AI 标题模板池按主题词生成 N 个不同标题（与单视频 AI 生成同源） */
|
||||
function buildBatchAiTitles(topic: string, count: number): string[] {
|
||||
const styles: Array<"catchy" | "emotional" | "informative"> = [
|
||||
"catchy",
|
||||
"emotional",
|
||||
"informative",
|
||||
]
|
||||
const pool: string[] = []
|
||||
styles.forEach((style) => {
|
||||
const templates = AI_TITLE_TEMPLATES[style] || []
|
||||
templates.forEach((tpl) => pool.push(tpl.replace(/\{topic\}/g, topic)))
|
||||
})
|
||||
// 洗牌后取前 count 个；不足则轮转补齐
|
||||
const shuffled = [...pool].sort(() => Math.random() - 0.5)
|
||||
const out: string[] = []
|
||||
for (let i = 0; i < count; i++) {
|
||||
out.push(shuffled[i % shuffled.length] || "")
|
||||
}
|
||||
return out
|
||||
}
|
||||
|
||||
function extractTopic(text: string): string {
|
||||
const keywords = text
|
||||
.replace(/[，。！？、,.!?]/g, " ")
|
||||
.split(/\s+/)
|
||||
.filter(Boolean)
|
||||
if (keywords.length === 0) return "这个话题"
|
||||
return keywords.slice(0, 3).join("")
|
||||
}
|
||||
|
||||
const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
|
||||
const t = useStep4Title(props)
|
||||
const {
|
||||
@@ -108,8 +72,6 @@ const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
|
||||
} = props
|
||||
|
||||
const isBatch = previewCount > 1
|
||||
const [batchAiLoading, setBatchAiLoading] = useState(false)
|
||||
const [batchAiTopic, setBatchAiTopic] = useState("")
|
||||
|
||||
/** 更新单个变体标题；变体0同步写回 titleSettings.title（全局样式面板/草稿/TTS 链路依赖） */
|
||||
const updateVariantTitle = (index: number, val: string) => {
|
||||
@@ -122,117 +84,31 @@ const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
|
||||
}
|
||||
}
|
||||
|
||||
/** 批量 AI 生成：按主题词生成标题，分别填入 N 个变体 */
|
||||
const handleBatchAiGenerate = async (onlyEmpty = false) => {
|
||||
if (!onPreviewTitlesChange || !previewTitles) return
|
||||
const topic = (batchAiTopic || t.aiTitleInput || "").trim()
|
||||
if (!topic) {
|
||||
message.warning("请先输入主题词，例如：萌宠日常、旅行vlog")
|
||||
return
|
||||
}
|
||||
setBatchAiLoading(true)
|
||||
try {
|
||||
// 与单视频一致：本地模板模拟 AI 生成（1200ms 体验延迟）
|
||||
await new Promise((resolve) => setTimeout(resolve, 800))
|
||||
const picked = buildBatchAiTitles(extractTopic(topic), previewCount)
|
||||
const next = [...previewTitles]
|
||||
for (let i = 0; i < previewCount; i++) {
|
||||
if (onlyEmpty && next[i]?.trim()) continue
|
||||
if (picked[i]) next[i] = picked[i]
|
||||
}
|
||||
onPreviewTitlesChange(next)
|
||||
if (next[0]) t.updateTitle(next[0])
|
||||
message.success(`已为 ${previewCount} 个视频生成标题，可单独修改`)
|
||||
} finally {
|
||||
setBatchAiLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const titleOptions = useMemo(
|
||||
() => t.userTitles.map((ut) => ({ label: ut.content, value: ut.content })),
|
||||
[t.userTitles],
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="xx-form-section xx-title-sidebar">
|
||||
<div className="xx-form-section">
|
||||
<h3>📝 选择标题</h3>
|
||||
|
||||
{!isBatch ? (
|
||||
/* ── 单视频：原有 AI 标题 + 输入框（保持不变，零回归） ── */
|
||||
<>
|
||||
{t.titleSettings.aiAutoSelect ? (
|
||||
<>
|
||||
<div className="xx-title-ai-toggle">
|
||||
<span className="xx-toggle-label">AI 自动选择标题</span>
|
||||
<div className="xx-switch active" onClick={t.toggleAiAutoSelect}>
|
||||
<div className="xx-switch-knob" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="xx-form-field">
|
||||
<label>当前 AI 选定标题</label>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 10,
|
||||
padding: "8px 12px",
|
||||
background: "var(--bg-secondary, rgba(0,0,0,0.04))",
|
||||
borderRadius: 8,
|
||||
fontSize: 14,
|
||||
color: "var(--text-primary, #333)",
|
||||
}}
|
||||
>
|
||||
<span style={{ flex: 1 }}>
|
||||
{(previewTitles?.[0] ?? t.titleSettings.title) || "AI 将自动为你选择标题"}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="xx-btn xx-btn-primary"
|
||||
style={{ flexShrink: 0, fontSize: 13, padding: "4px 12px" }}
|
||||
onClick={t.autoGenerateTitle}
|
||||
>
|
||||
🔄 换一个
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<AiTitleGenerator
|
||||
inputValue={t.aiTitleInput}
|
||||
onInputChange={t.setAiTitleInput}
|
||||
generating={t.aiTitleGenerating}
|
||||
onGenerate={t.handleGenerateAiTitles}
|
||||
results={t.aiTitleResults}
|
||||
hasGenerated={t.hasGeneratedTitles}
|
||||
onSelect={t.handleSelectAiTitle}
|
||||
selectedTitle={t.titleSettings.title}
|
||||
onRefresh={t.handleRefreshAiTitles}
|
||||
/>
|
||||
|
||||
<div className="xx-title-ai-toggle">
|
||||
<span className="xx-toggle-label">AI 自动选择标题</span>
|
||||
<div className="xx-switch" onClick={t.toggleAiAutoSelect}>
|
||||
<div className="xx-switch-knob" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="xx-form-field">
|
||||
<label>标题</label>
|
||||
<TitleLibraryAutoComplete
|
||||
placeholder="输入或从标题库选择"
|
||||
value={previewTitles?.[0] ?? t.titleSettings.title}
|
||||
onChange={(val) => {
|
||||
t.updateTitle(val || "")
|
||||
onPreviewTitlesChange?.([val || ""])
|
||||
}}
|
||||
options={titleOptions}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
/* ── 单视频：标题输入框 ── */
|
||||
<div className="xx-form-field" style={{ maxWidth: 640 }}>
|
||||
<label>标题</label>
|
||||
<TitleLibraryAutoComplete
|
||||
placeholder="输入或从标题库选择"
|
||||
value={previewTitles?.[0] ?? t.titleSettings.title}
|
||||
onChange={(val) => {
|
||||
t.updateTitle(val || "")
|
||||
onPreviewTitlesChange?.([val || ""])
|
||||
}}
|
||||
options={titleOptions}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
/* ── 批量：AI 批量生成 + N 个独立标题输入框（AutoComplete 支持标题库） ── */
|
||||
/* ── 批量：N 个独立标题输入框 ── */
|
||||
<div className="xx-batch-titles">
|
||||
<div
|
||||
style={{
|
||||
@@ -242,42 +118,11 @@ const Step4TitleSettings: React.FC<Step4TitleSettingsProps> = (props) => {
|
||||
lineHeight: 1.6,
|
||||
}}
|
||||
>
|
||||
为每个视频输入独立标题，修改会实时叠加到左侧对应视频上。标题样式（字体/颜色/位置）全局统一。
|
||||
</div>
|
||||
|
||||
{/* 批量 AI 标题 */}
|
||||
<div className="xx-batch-ai-row">
|
||||
<Input
|
||||
placeholder="主题词，如：萌宠日常、旅行vlog"
|
||||
value={batchAiTopic || t.aiTitleInput}
|
||||
onChange={(e) => {
|
||||
setBatchAiTopic(e.target.value)
|
||||
t.setAiTitleInput(e.target.value)
|
||||
}}
|
||||
maxLength={30}
|
||||
size="small"
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="xx-btn xx-btn-primary xx-btn-sm"
|
||||
disabled={batchAiLoading}
|
||||
onClick={() => handleBatchAiGenerate(false)}
|
||||
>
|
||||
{batchAiLoading ? <LoadingOutlined /> : "✨"} 一键生成 {previewCount} 个标题
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="xx-btn xx-btn-ghost xx-btn-sm"
|
||||
disabled={batchAiLoading}
|
||||
onClick={() => handleBatchAiGenerate(true)}
|
||||
>
|
||||
补填空标题
|
||||
</button>
|
||||
为每个视频输入独立标题。标题样式（字体/颜色/位置）全局统一。
|
||||
</div>
|
||||
|
||||
{Array.from({ length: previewCount }, (_, i) => (
|
||||
<div className="xx-form-field" key={i}>
|
||||
<div className="xx-form-field" key={i} style={{ maxWidth: 640 }}>
|
||||
<label>视频 {i + 1} 标题</label>
|
||||
<TitleLibraryAutoComplete
|
||||
placeholder={`输入或选择视频 ${i + 1} 的标题`}
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
/**
|
||||
* 单个 AI 标题卡片
|
||||
*/
|
||||
import React from "react"
|
||||
import { CheckCircleFilled } from "@ant-design/icons"
|
||||
|
||||
interface AiTitleCardProps {
|
||||
title: string
|
||||
highlight: string
|
||||
style: "catchy" | "emotional" | "informative"
|
||||
selected: boolean
|
||||
onClick: () => void
|
||||
}
|
||||
|
||||
const AiTitleCard: React.FC<AiTitleCardProps> = ({
|
||||
title,
|
||||
highlight,
|
||||
style,
|
||||
selected,
|
||||
onClick,
|
||||
}) => {
|
||||
return (
|
||||
<div className={`xx-ai-title-card ${selected ? "selected" : ""} ${style}`} onClick={onClick}>
|
||||
<div className="xx-ai-title-card-text">{title}</div>
|
||||
<div className="xx-ai-title-card-tag">{highlight}</div>
|
||||
{selected && (
|
||||
<div className="xx-ai-title-card-check">
|
||||
<CheckCircleFilled style={{ color: "#fff", fontSize: 14 }} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AiTitleCard
|
||||
@@ -1,105 +0,0 @@
|
||||
/**
|
||||
* AI 智能生成标题
|
||||
* 输入框 + 生成按钮 + 结果列表 + 加载状态
|
||||
*/
|
||||
import React from "react"
|
||||
import { LoadingOutlined } from "@ant-design/icons"
|
||||
import AiTitleCard from "./AiTitleCard"
|
||||
|
||||
interface AiTitleItem {
|
||||
title: string
|
||||
highlight: string
|
||||
style: "catchy" | "emotional" | "informative"
|
||||
}
|
||||
|
||||
interface AiTitleGeneratorProps {
|
||||
inputValue: string
|
||||
onInputChange: (value: string) => void
|
||||
generating: boolean
|
||||
onGenerate: () => void
|
||||
results: AiTitleItem[]
|
||||
hasGenerated: boolean
|
||||
onSelect: (title: string) => void
|
||||
selectedTitle: string
|
||||
onRefresh: () => void
|
||||
}
|
||||
|
||||
const AiTitleGenerator: React.FC<AiTitleGeneratorProps> = ({
|
||||
inputValue,
|
||||
onInputChange,
|
||||
generating,
|
||||
onGenerate,
|
||||
results,
|
||||
hasGenerated,
|
||||
onSelect,
|
||||
selectedTitle,
|
||||
onRefresh,
|
||||
}) => {
|
||||
return (
|
||||
<div className="xx-ai-title-section">
|
||||
<div className="xx-ai-title-header">
|
||||
<span className="xx-ai-title-label">✨ AI 智能生成标题</span>
|
||||
</div>
|
||||
<div className="xx-ai-title-input-row">
|
||||
<input
|
||||
className="xx-ai-title-input"
|
||||
placeholder="输入视频内容描述或关键词，如：职场成长、副业赚钱…"
|
||||
value={inputValue}
|
||||
onChange={(e) => onInputChange(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") onGenerate()
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="xx-btn xx-btn-primary"
|
||||
onClick={onGenerate}
|
||||
disabled={generating || !inputValue.trim()}
|
||||
>
|
||||
{generating ? (
|
||||
<>
|
||||
<LoadingOutlined style={{ marginRight: 6 }} />
|
||||
生成中
|
||||
</>
|
||||
) : (
|
||||
"生成标题"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 生成结果 */}
|
||||
{hasGenerated && !generating && results.length > 0 && (
|
||||
<div className="xx-ai-title-results">
|
||||
<div className="xx-ai-title-results-header">
|
||||
<span className="xx-ai-title-results-count">为你生成 {results.length} 个标题</span>
|
||||
<button type="button" className="xx-link-btn" onClick={onRefresh} disabled={generating}>
|
||||
🔄 换一批
|
||||
</button>
|
||||
</div>
|
||||
<div className="xx-ai-title-list">
|
||||
{results.map((item, idx) => (
|
||||
<AiTitleCard
|
||||
key={idx}
|
||||
title={item.title}
|
||||
highlight={item.highlight}
|
||||
style={item.style}
|
||||
selected={selectedTitle === item.title}
|
||||
onClick={() => onSelect(item.title)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 生成中 */}
|
||||
{generating && (
|
||||
<div className="xx-ai-title-loading">
|
||||
<LoadingOutlined style={{ color: "var(--primary-color)", marginRight: 8 }} />
|
||||
AI 正在为你创作标题…
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AiTitleGenerator
|
||||
@@ -18,10 +18,14 @@ interface Props {
|
||||
settings: TitleSettings
|
||||
width?: number
|
||||
sampleText?: string
|
||||
/** 背景（预览用，默认深色渐变模拟视频底） */
|
||||
/** 背景（预览用，默认深色渐变模拟视频底），transparent=true 时忽略 */
|
||||
background?: string
|
||||
/** 高度（可选，默认 width/2） */
|
||||
/** 高度（可选，默认按 portrait 选比例） */
|
||||
height?: number
|
||||
/** 透明背景（卡片/编辑器预览叠加在图片上时使用） */
|
||||
transparent?: boolean
|
||||
/** 纵向竖屏预览（9:16），true 时 aspect=16/9 适配手机视频比例 */
|
||||
portrait?: boolean
|
||||
}
|
||||
|
||||
/** 按 maxCharsPerLine 自动换行 */
|
||||
@@ -56,9 +60,11 @@ const TitleMiniPreview: React.FC<Props> = ({
|
||||
sampleText,
|
||||
background = "linear-gradient(135deg,#1f2937,#111827)",
|
||||
height,
|
||||
transparent = false,
|
||||
portrait = false,
|
||||
}) => {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null)
|
||||
const h = height ?? Math.round(width / 1.8)
|
||||
const h = height ?? Math.round(width * (portrait ? 16 / 9 : 1 / 1.8))
|
||||
const text = (sampleText || settings.title || "预览标题").trim() || "预览标题"
|
||||
|
||||
useEffect(() => {
|
||||
@@ -74,9 +80,11 @@ const TitleMiniPreview: React.FC<Props> = ({
|
||||
ctx.scale(dpr, dpr)
|
||||
ctx.clearRect(0, 0, width, h)
|
||||
|
||||
// 背景
|
||||
ctx.fillStyle = "#111827"
|
||||
ctx.fillRect(0, 0, width, h)
|
||||
// 背景（transparent 时跳过，用于叠加在图片上）
|
||||
if (!transparent) {
|
||||
ctx.fillStyle = "#111827"
|
||||
ctx.fillRect(0, 0, width, h)
|
||||
}
|
||||
|
||||
// 分辨率缩放：以 360 宽为基准（对应 720p 的一半）
|
||||
const scale = width / 360
|
||||
@@ -121,7 +129,8 @@ const TitleMiniPreview: React.FC<Props> = ({
|
||||
startY = h / 2 - totalH / 2 + size / 2
|
||||
} else {
|
||||
// bottom
|
||||
startY = h - totalH - r(16) + size / 2
|
||||
const botMargin = portrait ? r(24) : r(16)
|
||||
startY = h - totalH - botMargin + size / 2
|
||||
}
|
||||
let centerX = width / 2
|
||||
if (settings.position === "custom" && settings.posX != null) {
|
||||
@@ -181,7 +190,7 @@ const TitleMiniPreview: React.FC<Props> = ({
|
||||
ctx.shadowBlur = prevShadow.b
|
||||
ctx.shadowOffsetX = prevShadow.ox
|
||||
ctx.shadowOffsetY = prevShadow.oy
|
||||
}, [settings, width, h, text])
|
||||
}, [settings, width, h, text, transparent, portrait, background])
|
||||
|
||||
return (
|
||||
<canvas
|
||||
@@ -190,7 +199,7 @@ const TitleMiniPreview: React.FC<Props> = ({
|
||||
borderRadius: 6,
|
||||
display: "block",
|
||||
maxWidth: "100%",
|
||||
background,
|
||||
background: transparent ? "transparent" : background,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -535,31 +535,6 @@ export const SMART_MATCH_REASONS = [
|
||||
"人物表情生动",
|
||||
]
|
||||
|
||||
/* ── AI 标题模板 ── */
|
||||
export const AI_TITLE_TEMPLATES: Record<string, string[]> = {
|
||||
catchy: [
|
||||
"震惊！{topic}居然还能这样操作",
|
||||
"99%的人都不知道的{topic}秘诀",
|
||||
"{topic}的终极指南，看完直接封神",
|
||||
"别再走弯路了！{topic}看这一篇就够",
|
||||
"一个视频讲透{topic}，建议收藏",
|
||||
],
|
||||
emotional: [
|
||||
"致每一个在{topic}路上坚持的人",
|
||||
"关于{topic}，我想说句真心话",
|
||||
"{topic}背后的故事，看完沉默了",
|
||||
"为什么我劝你一定要了解{topic}",
|
||||
"这才是{topic}最动人的样子",
|
||||
],
|
||||
informative: [
|
||||
"{topic}完整科普：从入门到精通",
|
||||
"深度解析{topic}的核心原理",
|
||||
"{topic}行业趋势报告｜2026最新版",
|
||||
"三分钟带你全面了解{topic}",
|
||||
"{topic}常见问题与解决方案汇总",
|
||||
],
|
||||
}
|
||||
|
||||
/* ── 默认封面设置 ── */
|
||||
export const DEFAULT_COVER_SETTINGS: CoverConfig = {
|
||||
enabled: true,
|
||||
|
||||
@@ -2880,27 +2880,6 @@
|
||||
Issue #1677 多视频批量生成
|
||||
================================================================ */
|
||||
|
||||
/* ── Step4 布局对调：左侧预览大区域，右侧标题边栏 ── */
|
||||
.xx-generate-layout.step4-layout {
|
||||
grid-template-columns: 1fr 380px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.xx-generate-preview-col {
|
||||
min-width: 0;
|
||||
position: sticky;
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
.xx-generate-preview-col .xx-form-section {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.xx-title-sidebar {
|
||||
max-height: calc(100vh - 140px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* ── 数量选择弹窗 ── */
|
||||
.xx-modal-mask {
|
||||
position: fixed;
|
||||
@@ -3240,135 +3219,6 @@
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* ── 响应式：窄屏 Step4 回退单列 ── */
|
||||
@media (max-width: 960px) {
|
||||
.xx-generate-layout.step4-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.xx-generate-preview-col {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.xx-title-sidebar {
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
批量前端 Canvas 预览网格（Issue #1677 修正：纯前端实时预览）
|
||||
============================================================ */
|
||||
/* #1741：卡片整体缩小至约 3/5——宽屏排 3 列（卡片限宽 220px 居中），
|
||||
中屏自动回退 2 列，窄屏 1 列（见下方媒体查询）；卡片保持 9:16 比例不变形 */
|
||||
.xx-canvas-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 180px));
|
||||
justify-content: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
/* 窄屏单列时卡片限宽居中，避免 1fr 拉伸导致卡片过高 */
|
||||
@media (max-width: 960px) {
|
||||
.xx-canvas-grid {
|
||||
grid-template-columns: minmax(0, 320px);
|
||||
}
|
||||
}
|
||||
|
||||
.xx-canvas-grid-card {
|
||||
position: relative;
|
||||
border: 2px solid var(--border-primary, #e2e8f0);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
transition: border-color 0.2s ease;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.xx-canvas-grid-card.selected {
|
||||
border-color: var(--primary-color, #1677ff);
|
||||
box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.15);
|
||||
}
|
||||
|
||||
.xx-canvas-grid-card-bar {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 10px;
|
||||
background: var(--bg-surface, #fff);
|
||||
border-bottom: 1px solid var(--border-primary, #e2e8f0);
|
||||
}
|
||||
|
||||
.xx-canvas-grid-check {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary, #1a1a1a);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.xx-canvas-grid-check input[type="checkbox"] {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
cursor: pointer;
|
||||
accent-color: var(--primary-color, #1677ff);
|
||||
}
|
||||
|
||||
/* #1750：批量变体片段加载/错误占位（9:16 竖屏比例，与播放器卡片同尺寸防塌陷） */
|
||||
.xx-variant-clips-status {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 9 / 16;
|
||||
max-height: 70vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
background: #0a0a0a;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.3),
|
||||
0 20px 50px -12px rgba(0, 0, 0, 0.5),
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.xx-variant-clips-status .anticon {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.xx-variant-clips-error-text {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
批量标题：AI 一键生成行（Issue #1677）
|
||||
============================================================ */
|
||||
.xx-batch-ai-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 12px;
|
||||
background: var(--bg-secondary, #f7f8fa);
|
||||
border: 1px dashed var(--border-primary, #d9d9d9);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.xx-batch-ai-row .xx-form-field {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.xx-batch-titles {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -1,155 +0,0 @@
|
||||
/**
|
||||
* 预览素材加载 Hook
|
||||
* 根据选中的素材 ID 列表，逐个获取素材详情（含 file_url、duration 等）
|
||||
* 供前端预览播放器使用
|
||||
*
|
||||
* 注意：后端没有批量接口（/assets/batch 返回 405），
|
||||
* 因此直接使用 Promise.allSettled 并发请求单个 GET /assets/{id}
|
||||
*/
|
||||
import { useState, useEffect, useCallback, useRef } from "react"
|
||||
import type { AssetItem } from "@/api/assets"
|
||||
import type { AxiosResponse } from "axios"
|
||||
|
||||
/**
|
||||
* 通过 ID 列表逐个获取素材（并发）
|
||||
* 使用 Promise.allSettled 确保单个失败不影响整体
|
||||
*/
|
||||
async function fetchAssetsByIds(ids: string[]): Promise<AssetItem[]> {
|
||||
// 防御：过滤空值/undefined/非字符串 id，避免发出 /assets/undefined 请求
|
||||
const validIds = ids.filter((id): id is string => typeof id === "string" && id.length > 0)
|
||||
if (!validIds.length) return []
|
||||
|
||||
try {
|
||||
const { default: apiClient } = await import("@/api/client")
|
||||
const results = await Promise.allSettled(
|
||||
validIds.map((id) => apiClient.get<AssetItem>(`/assets/${id}`)),
|
||||
)
|
||||
return results
|
||||
.filter(
|
||||
(r): r is PromiseFulfilledResult<AxiosResponse<AssetItem>> =>
|
||||
r.status === "fulfilled" && !!r.value?.data,
|
||||
)
|
||||
.map((r) => r.value.data)
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
interface UsePreviewAssetsReturn {
|
||||
/** 加载后的素材列表 */
|
||||
assets: AssetItem[]
|
||||
/** 是否正在加载 */
|
||||
loading: boolean
|
||||
/** 是否已就绪（加载完成） */
|
||||
ready: boolean
|
||||
/** 手动触发重新加载 */
|
||||
reload: () => void
|
||||
/**
|
||||
* 差集补拉（#1750）：后端变体计划 clips 可能引用不在用户已选列表中的素材
|
||||
* （跨素材库选片/素材池扩展），发现 assets 中缺失的 asset_id 时补拉详情并合并，
|
||||
* 保证预览播放器拿得到素材文件 URL，而不是静默丢片段。
|
||||
*/
|
||||
ensureAssets: (ids: string[]) => Promise<void>
|
||||
}
|
||||
|
||||
/**
|
||||
* usePreviewAssets — 加载选中素材的视频文件信息
|
||||
*/
|
||||
export function usePreviewAssets(assetIds: string[], enabled: boolean): UsePreviewAssetsReturn {
|
||||
const [assets, setAssets] = useState<AssetItem[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [ready, setReady] = useState(false)
|
||||
const requestIdRef = useRef(0)
|
||||
|
||||
// 稳定化 assetIds：只有内容真正变化时才更新引用
|
||||
const stableAssetIds = useStableArray(assetIds)
|
||||
|
||||
const load = useCallback(async () => {
|
||||
const validIds = stableAssetIds.filter(
|
||||
(id): id is string => typeof id === "string" && id.length > 0,
|
||||
)
|
||||
if (!validIds.length || !enabled) {
|
||||
setAssets([])
|
||||
setReady(false)
|
||||
return
|
||||
}
|
||||
|
||||
const thisRequestId = ++requestIdRef.current
|
||||
setLoading(true)
|
||||
setReady(false)
|
||||
|
||||
try {
|
||||
const result = await fetchAssetsByIds(validIds)
|
||||
// 防止竞态：只保留最新请求的结果
|
||||
if (requestIdRef.current === thisRequestId) {
|
||||
setAssets(result)
|
||||
setReady(result.length > 0)
|
||||
}
|
||||
} catch {
|
||||
if (requestIdRef.current === thisRequestId) {
|
||||
setAssets([])
|
||||
setReady(false)
|
||||
}
|
||||
} finally {
|
||||
if (requestIdRef.current === thisRequestId) {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
}, [stableAssetIds, enabled])
|
||||
|
||||
// 补拉用独立序号：不干扰主 load 的竞态守卫
|
||||
const ensureSeqRef = useRef(0)
|
||||
const assetsRef = useRef<AssetItem[]>([])
|
||||
useEffect(() => {
|
||||
assetsRef.current = assets
|
||||
}, [assets])
|
||||
|
||||
/**
|
||||
* 差集补拉（#1750）：变体计划 clips 引用的 asset_id 不在当前素材列表时，
|
||||
* 补拉素材详情并去重合并（不静默丢片段、不用假数据冒充）。
|
||||
*/
|
||||
const ensureAssets = useCallback(async (ids: string[]) => {
|
||||
const validIds = ids.filter((id): id is string => typeof id === "string" && id.length > 0)
|
||||
if (!validIds.length) return
|
||||
const seq = ++ensureSeqRef.current
|
||||
const missing = Array.from(new Set(validIds)).filter(
|
||||
(id) => !assetsRef.current.some((a) => a.id === id),
|
||||
)
|
||||
if (!missing.length) return
|
||||
const fetched = await fetchAssetsByIds(missing)
|
||||
if (seq !== ensureSeqRef.current || !fetched.length) return
|
||||
const existing = new Set(assetsRef.current.map((a) => a.id))
|
||||
const additions = fetched.filter((a) => !existing.has(a.id))
|
||||
if (!additions.length) return
|
||||
const merged = [...assetsRef.current, ...additions]
|
||||
assetsRef.current = merged
|
||||
setAssets(merged)
|
||||
setReady(merged.length > 0)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
load()
|
||||
}, [load])
|
||||
|
||||
return { assets, loading, ready, reload: load, ensureAssets }
|
||||
}
|
||||
|
||||
/**
|
||||
* useStableArray — 数组内容稳定化 Hook
|
||||
* 只有数组内容真正变化时才返回新的引用，避免父组件 re-render 导致的无效更新
|
||||
*/
|
||||
function useStableArray<T>(array: T[]): T[] {
|
||||
const ref = useRef<T[]>(array)
|
||||
|
||||
// 比较数组内容是否真正变化
|
||||
const hasChanged =
|
||||
array.length !== ref.current.length || array.some((item, index) => item !== ref.current[index])
|
||||
|
||||
if (hasChanged) {
|
||||
ref.current = array
|
||||
}
|
||||
|
||||
return ref.current
|
||||
}
|
||||
|
||||
export default usePreviewAssets
|
||||
@@ -1,131 +0,0 @@
|
||||
import { useCallback, useEffect, useRef } from "react"
|
||||
|
||||
interface UsePreviewAudioOptions {
|
||||
voiceAudioUrl: string | undefined
|
||||
voiceDurationHint: number | undefined
|
||||
muted: boolean
|
||||
isPlaying: boolean
|
||||
currentTime: number
|
||||
onVoiceDurationChange: (d: number) => void
|
||||
onEnded: () => void
|
||||
}
|
||||
|
||||
interface UsePreviewAudioReturn {
|
||||
seekTo: (time: number) => void
|
||||
ensurePlayingAt: (time: number) => void
|
||||
pause: () => void
|
||||
}
|
||||
|
||||
/**
|
||||
* 配音音频管理 hook：加载配音、loadedmetadata 自测时长、play/pause 同步、
|
||||
* ended 事件回调、seek 同步、末帧冻结期间续播。
|
||||
*/
|
||||
export function usePreviewAudio({
|
||||
voiceAudioUrl,
|
||||
voiceDurationHint,
|
||||
muted,
|
||||
isPlaying,
|
||||
currentTime,
|
||||
onVoiceDurationChange,
|
||||
onEnded,
|
||||
}: UsePreviewAudioOptions): UsePreviewAudioReturn {
|
||||
const audioRef = useRef<HTMLAudioElement | null>(null)
|
||||
const prevIsPlayingRef = useRef(false)
|
||||
|
||||
// 外部 hint 初始化（自测值前的兜底）
|
||||
useEffect(() => {
|
||||
if (voiceDurationHint && voiceDurationHint > 0) {
|
||||
onVoiceDurationChange(voiceDurationHint)
|
||||
}
|
||||
}, [voiceDurationHint, onVoiceDurationChange])
|
||||
|
||||
// 创建/替换 audio 元素，加载 metadata 时自测时长并监听 ended
|
||||
useEffect(() => {
|
||||
if (!voiceAudioUrl) {
|
||||
if (audioRef.current) {
|
||||
audioRef.current.pause()
|
||||
audioRef.current.src = ""
|
||||
audioRef.current = null
|
||||
}
|
||||
return
|
||||
}
|
||||
if (!audioRef.current) {
|
||||
audioRef.current = new Audio()
|
||||
audioRef.current.preload = "auto"
|
||||
}
|
||||
if (audioRef.current.src !== voiceAudioUrl) {
|
||||
audioRef.current.src = voiceAudioUrl
|
||||
}
|
||||
audioRef.current.muted = muted
|
||||
|
||||
const audio = audioRef.current
|
||||
const onLoaded = () => {
|
||||
if (audio.duration && isFinite(audio.duration) && audio.duration > 0) {
|
||||
onVoiceDurationChange(audio.duration)
|
||||
}
|
||||
}
|
||||
const onEndedHandler = () => onEnded()
|
||||
audio.addEventListener("loadedmetadata", onLoaded)
|
||||
audio.addEventListener("ended", onEndedHandler)
|
||||
return () => {
|
||||
audio.removeEventListener("loadedmetadata", onLoaded)
|
||||
audio.removeEventListener("ended", onEndedHandler)
|
||||
}
|
||||
}, [voiceAudioUrl, muted, onVoiceDurationChange, onEnded])
|
||||
|
||||
// mute 变化即时同步
|
||||
useEffect(() => {
|
||||
if (audioRef.current) audioRef.current.muted = muted
|
||||
}, [muted])
|
||||
|
||||
// 播放/暂停同步（跟随视频 isPlaying）
|
||||
useEffect(() => {
|
||||
const audio = audioRef.current
|
||||
if (!audio || !audio.src) return
|
||||
if (isPlaying && !prevIsPlayingRef.current) {
|
||||
if (Math.abs(audio.currentTime - currentTime) > 0.3) {
|
||||
try {
|
||||
audio.currentTime = currentTime
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
audio.play().catch(() => {})
|
||||
} else if (!isPlaying && prevIsPlayingRef.current) {
|
||||
audio.pause()
|
||||
}
|
||||
prevIsPlayingRef.current = isPlaying
|
||||
}, [isPlaying, currentTime])
|
||||
|
||||
const seekTo = useCallback((time: number) => {
|
||||
const audio = audioRef.current
|
||||
if (audio && audio.src) {
|
||||
try {
|
||||
audio.currentTime = time
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
const ensurePlayingAt = useCallback((time: number) => {
|
||||
const audio = audioRef.current
|
||||
if (!audio || !audio.src) return
|
||||
try {
|
||||
if (Math.abs(audio.currentTime - time) > 0.5) audio.currentTime = time
|
||||
if (audio.paused) audio.play().catch(() => {})
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}, [])
|
||||
|
||||
const pause = useCallback(() => {
|
||||
try {
|
||||
audioRef.current?.pause()
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}, [])
|
||||
|
||||
return { seekTo, ensurePlayingAt, pause }
|
||||
}
|
||||
@@ -1,384 +0,0 @@
|
||||
/**
|
||||
* 素材片段调度器 Hook（多 video 元素方案 v3）
|
||||
*
|
||||
* v3 修复：
|
||||
* - 所有动态状态存入 ref，tick 为稳定函数，彻底消除 RAF 闭包陷阱
|
||||
* - 片段切换时先启动下一个 video 再切可见性，消除冻屏间隔
|
||||
* - 进度更新 200ms 节流
|
||||
*/
|
||||
|
||||
import { useState, useRef, useCallback, useEffect, useMemo } from "react"
|
||||
|
||||
export interface PlaybackSegment {
|
||||
assetId: string
|
||||
videoUrl: string
|
||||
startTime: number
|
||||
endTime: number
|
||||
order: number
|
||||
/** #1754 兜底：配音时长≠clips 总时长时按比例调速，1.0 = 原速 */
|
||||
playbackRate?: number
|
||||
}
|
||||
|
||||
export interface SegmentSchedulerState {
|
||||
isPlaying: boolean
|
||||
currentTime: number
|
||||
totalDuration: number
|
||||
currentSegmentIndex: number
|
||||
segmentLocalTime: number
|
||||
isEnded: boolean
|
||||
canPlay: boolean
|
||||
play: () => void
|
||||
pause: () => void
|
||||
togglePlayPause: () => void
|
||||
seekTo: (time: number) => void
|
||||
videoRefs: React.MutableRefObject<(HTMLVideoElement | null)[]>
|
||||
}
|
||||
|
||||
function findSegmentAtTime(
|
||||
segments: PlaybackSegment[],
|
||||
globalTime: number,
|
||||
): { index: number; localTime: number } {
|
||||
let accumulated = 0
|
||||
for (let i = 0; i < segments.length; i++) {
|
||||
const seg = segments[i]
|
||||
const segDuration = seg.endTime - seg.startTime
|
||||
if (globalTime < accumulated + segDuration || i === segments.length - 1) {
|
||||
return { index: i, localTime: seg.startTime + (globalTime - accumulated) }
|
||||
}
|
||||
accumulated += segDuration
|
||||
}
|
||||
return { index: segments.length - 1, localTime: segments[segments.length - 1].endTime }
|
||||
}
|
||||
|
||||
function buildTimeline(segments: PlaybackSegment[]): number[] {
|
||||
const starts: number[] = []
|
||||
let acc = 0
|
||||
for (const seg of segments) {
|
||||
starts.push(acc)
|
||||
acc += seg.endTime - seg.startTime
|
||||
}
|
||||
return starts
|
||||
}
|
||||
|
||||
export function useSegmentScheduler(segments: PlaybackSegment[]): SegmentSchedulerState {
|
||||
const videoRefs = useRef<(HTMLVideoElement | null)[]>([])
|
||||
const [isPlaying, setIsPlaying] = useState(false)
|
||||
const [currentTime, setCurrentTime] = useState(0)
|
||||
const [currentSegmentIndex, setCurrentSegmentIndex] = useState(0)
|
||||
const [isEnded, setIsEnded] = useState(false)
|
||||
const rafRef = useRef(0)
|
||||
const isSeekingRef = useRef(false)
|
||||
const lastTimeUpdateRef = useRef(0)
|
||||
|
||||
// 所有动态值存入 ref，tick 始终读取最新值，不依赖闭包
|
||||
const segIdxRef = useRef(0)
|
||||
const segmentsRef = useRef(segments)
|
||||
const timelineStartsData = useMemo(() => buildTimeline(segments), [segments])
|
||||
const totalDurationData = useMemo(
|
||||
() => segments.reduce((sum, seg) => sum + (seg.endTime - seg.startTime), 0),
|
||||
[segments],
|
||||
)
|
||||
const timelineStartsRef = useRef(timelineStartsData)
|
||||
const totalDurationRef = useRef(totalDurationData)
|
||||
const isPlayingRef = useRef(false)
|
||||
|
||||
segmentsRef.current = segments
|
||||
timelineStartsRef.current = timelineStartsData
|
||||
totalDurationRef.current = totalDurationData
|
||||
|
||||
const canPlay = segments.length > 0
|
||||
|
||||
useEffect(() => {
|
||||
segIdxRef.current = currentSegmentIndex
|
||||
}, [currentSegmentIndex])
|
||||
|
||||
useEffect(() => {
|
||||
isPlayingRef.current = isPlaying
|
||||
}, [isPlaying])
|
||||
|
||||
const waitForReady = useCallback((video: HTMLVideoElement, timeout = 3000): Promise<void> => {
|
||||
if (video.readyState >= 3) return Promise.resolve()
|
||||
return new Promise((resolve) => {
|
||||
const onCanPlay = () => {
|
||||
video.removeEventListener("canplay", onCanPlay)
|
||||
clearTimeout(timer)
|
||||
resolve()
|
||||
}
|
||||
const timer = setTimeout(() => {
|
||||
video.removeEventListener("canplay", onCanPlay)
|
||||
resolve()
|
||||
}, timeout)
|
||||
video.addEventListener("canplay", onCanPlay)
|
||||
})
|
||||
}, [])
|
||||
|
||||
const switchToSegment = useCallback(
|
||||
async (index: number, seekToLocalTime?: number) => {
|
||||
const segs = segmentsRef.current
|
||||
const video = videoRefs.current[index]
|
||||
if (!video || index >= segs.length) return
|
||||
|
||||
const seg = segs[index]
|
||||
const localTime = seekToLocalTime ?? seg.startTime
|
||||
const oldIdx = segIdxRef.current
|
||||
const oldVideo = videoRefs.current[oldIdx]
|
||||
|
||||
if (oldVideo && oldVideo !== video) oldVideo.pause()
|
||||
|
||||
if (!video.src && seg.videoUrl) {
|
||||
video.src = seg.videoUrl
|
||||
video.load()
|
||||
}
|
||||
|
||||
if (Math.abs(video.currentTime - localTime) > 0.05) {
|
||||
video.currentTime = localTime
|
||||
}
|
||||
// #1754：按比例调速（配音时长≠clips 总时长时的前端兜底）
|
||||
const rate = seg.playbackRate || 1
|
||||
if (Math.abs(video.playbackRate - rate) > 0.01) {
|
||||
video.playbackRate = rate
|
||||
}
|
||||
|
||||
segIdxRef.current = index
|
||||
setCurrentSegmentIndex(index)
|
||||
|
||||
await waitForReady(video)
|
||||
},
|
||||
[waitForReady],
|
||||
)
|
||||
|
||||
// 稳定的 tick 函数，空依赖，所有值从 ref 读取
|
||||
const tick = useCallback(() => {
|
||||
const segs = segmentsRef.current
|
||||
const idx = segIdxRef.current
|
||||
const video = videoRefs.current[idx]
|
||||
|
||||
if (!video || isSeekingRef.current) {
|
||||
rafRef.current = requestAnimationFrame(tick)
|
||||
return
|
||||
}
|
||||
|
||||
const seg = segs[idx]
|
||||
if (!seg) return
|
||||
|
||||
// 预加载下一个片段
|
||||
const nextIndex = idx + 1
|
||||
if (nextIndex < segs.length) {
|
||||
const nextVideo = videoRefs.current[nextIndex]
|
||||
if (nextVideo) {
|
||||
const timeToEnd = seg.endTime - video.currentTime
|
||||
if (timeToEnd <= 2 && nextVideo.readyState < 3) {
|
||||
const nextSeg = segs[nextIndex]
|
||||
if (Math.abs(nextVideo.currentTime - nextSeg.startTime) > 0.5) {
|
||||
nextVideo.currentTime = nextSeg.startTime
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 检测片段边界
|
||||
if (video.currentTime >= seg.endTime - 0.1) {
|
||||
if (nextIndex < segs.length) {
|
||||
const nextVideo = videoRefs.current[nextIndex]
|
||||
const nextSeg = segs[nextIndex]
|
||||
const accumulatedTime =
|
||||
(timelineStartsRef.current[idx] || 0) + (seg.endTime - seg.startTime)
|
||||
|
||||
if (nextVideo) {
|
||||
if (Math.abs(nextVideo.currentTime - nextSeg.startTime) > 0.1) {
|
||||
nextVideo.currentTime = nextSeg.startTime
|
||||
}
|
||||
// 先启动下一个视频（muted，可安全同时播放）
|
||||
nextVideo
|
||||
.play()
|
||||
.catch((e) => console.warn("[useSegmentScheduler] next segment play failed:", e))
|
||||
}
|
||||
|
||||
// 立即切换可见性
|
||||
segIdxRef.current = nextIndex
|
||||
setCurrentSegmentIndex(nextIndex)
|
||||
setCurrentTime(accumulatedTime)
|
||||
lastTimeUpdateRef.current = 0
|
||||
setIsPlaying(true)
|
||||
|
||||
// 下一帧暂停旧视频（让新视频先渲染，避免冻屏）
|
||||
const oldVideo = video
|
||||
requestAnimationFrame(() => {
|
||||
oldVideo.pause()
|
||||
})
|
||||
|
||||
rafRef.current = requestAnimationFrame(tick)
|
||||
return
|
||||
} else {
|
||||
video.pause()
|
||||
setIsPlaying(false)
|
||||
setIsEnded(true)
|
||||
setCurrentTime(totalDurationRef.current)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
const globalTime = (timelineStartsRef.current[idx] || 0) + (video.currentTime - seg.startTime)
|
||||
const now = performance.now()
|
||||
if (now - lastTimeUpdateRef.current >= 200) {
|
||||
lastTimeUpdateRef.current = now
|
||||
setCurrentTime(Math.max(0, Math.min(globalTime, totalDurationRef.current)))
|
||||
}
|
||||
|
||||
rafRef.current = requestAnimationFrame(tick)
|
||||
}, [])
|
||||
|
||||
const play = useCallback(async () => {
|
||||
if (!canPlay) return
|
||||
setIsEnded(false)
|
||||
const idx = segIdxRef.current
|
||||
const video = videoRefs.current[idx]
|
||||
if (!video) return
|
||||
|
||||
if (idx === 0 && video.readyState < 2) {
|
||||
if (!video.src && segmentsRef.current[0]?.videoUrl) {
|
||||
video.src = segmentsRef.current[0].videoUrl
|
||||
video.load()
|
||||
}
|
||||
await waitForReady(video)
|
||||
}
|
||||
|
||||
// 播放前 seek 到片段起始时间，确保 progress 计算正确
|
||||
const seg = segmentsRef.current[idx]
|
||||
if (seg && Math.abs(video.currentTime - seg.startTime) > 0.1) {
|
||||
video.currentTime = seg.startTime
|
||||
}
|
||||
|
||||
// #1754：调速
|
||||
const rate = seg?.playbackRate || 1
|
||||
if (Math.abs(video.playbackRate - rate) > 0.01) {
|
||||
video.playbackRate = rate
|
||||
}
|
||||
|
||||
try {
|
||||
await video.play()
|
||||
setIsPlaying(true)
|
||||
cancelAnimationFrame(rafRef.current)
|
||||
rafRef.current = requestAnimationFrame(tick)
|
||||
} catch (err) {
|
||||
console.warn("[useSegmentScheduler] 播放失败:", err)
|
||||
}
|
||||
}, [canPlay, waitForReady, tick])
|
||||
|
||||
const pause = useCallback(() => {
|
||||
const video = videoRefs.current[segIdxRef.current]
|
||||
if (video) video.pause()
|
||||
setIsPlaying(false)
|
||||
cancelAnimationFrame(rafRef.current)
|
||||
}, [])
|
||||
|
||||
const togglePlayPause = useCallback(() => {
|
||||
if (isPlayingRef.current) {
|
||||
pause()
|
||||
} else {
|
||||
if (isEnded) {
|
||||
setIsEnded(false)
|
||||
lastTimeUpdateRef.current = 0
|
||||
const firstVideo = videoRefs.current[0]
|
||||
if (firstVideo) {
|
||||
videoRefs.current.forEach((v, i) => {
|
||||
if (v && i !== 0) v.pause()
|
||||
})
|
||||
firstVideo.currentTime = segmentsRef.current[0]?.startTime || 0
|
||||
segIdxRef.current = 0
|
||||
setCurrentSegmentIndex(0)
|
||||
setCurrentTime(0)
|
||||
firstVideo
|
||||
.play()
|
||||
.then(() => {
|
||||
setIsPlaying(true)
|
||||
cancelAnimationFrame(rafRef.current)
|
||||
rafRef.current = requestAnimationFrame(tick)
|
||||
})
|
||||
.catch((e) => console.warn("[useSegmentScheduler] restart failed:", e))
|
||||
}
|
||||
} else {
|
||||
play()
|
||||
}
|
||||
}
|
||||
}, [isEnded, pause, play, tick])
|
||||
|
||||
const seekTo = useCallback(
|
||||
async (time: number) => {
|
||||
if (!canPlay) return
|
||||
const clampedTime = Math.max(0, Math.min(time, totalDurationRef.current))
|
||||
const { index, localTime } = findSegmentAtTime(segmentsRef.current, clampedTime)
|
||||
|
||||
isSeekingRef.current = true
|
||||
cancelAnimationFrame(rafRef.current)
|
||||
|
||||
if (index !== segIdxRef.current) {
|
||||
await switchToSegment(index, localTime)
|
||||
} else {
|
||||
const video = videoRefs.current[index]
|
||||
if (video) video.currentTime = localTime
|
||||
}
|
||||
|
||||
setCurrentTime(clampedTime)
|
||||
setIsEnded(false)
|
||||
lastTimeUpdateRef.current = 0
|
||||
|
||||
if (isPlayingRef.current) {
|
||||
const video = videoRefs.current[index]
|
||||
if (video) {
|
||||
video.play().catch(() => {})
|
||||
}
|
||||
rafRef.current = requestAnimationFrame(tick)
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
isSeekingRef.current = false
|
||||
}, 200)
|
||||
},
|
||||
[canPlay, switchToSegment, tick],
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
videoRefs.current = videoRefs.current.slice(0, segments.length)
|
||||
while (videoRefs.current.length < segments.length) {
|
||||
videoRefs.current.push(null)
|
||||
}
|
||||
}, [segments])
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
cancelAnimationFrame(rafRef.current)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
cancelAnimationFrame(rafRef.current)
|
||||
segIdxRef.current = 0
|
||||
setIsPlaying(false)
|
||||
setCurrentTime(0)
|
||||
setCurrentSegmentIndex(0)
|
||||
setIsEnded(false)
|
||||
}, [segments])
|
||||
|
||||
const currentSegment = segments[currentSegmentIndex] || null
|
||||
const segmentLocalTime = currentSegment
|
||||
? currentTime - (timelineStartsRef.current[currentSegmentIndex] || 0) + currentSegment.startTime
|
||||
: 0
|
||||
|
||||
return {
|
||||
isPlaying,
|
||||
currentTime,
|
||||
totalDuration: totalDurationData,
|
||||
currentSegmentIndex,
|
||||
segmentLocalTime,
|
||||
isEnded,
|
||||
canPlay,
|
||||
play,
|
||||
pause,
|
||||
togglePlayPause,
|
||||
seekTo,
|
||||
videoRefs,
|
||||
}
|
||||
}
|
||||
|
||||
export default useSegmentScheduler
|
||||
@@ -1,9 +1,8 @@
|
||||
import { useEffect, useRef } from "react"
|
||||
import { useEffect } from "react"
|
||||
import { useQuery } from "@tanstack/react-query"
|
||||
// #1894: 标题候选从文案库 scripts[].title 获取，不再调用废弃的 /api/titles
|
||||
import { getScripts } from "@/api/scripts"
|
||||
import type { TitleSettings } from "../../types"
|
||||
import { useAiTitleGenerator } from "./useAiTitleGenerator"
|
||||
import { useTitleStyleUpdaters } from "./useTitleStyleUpdaters"
|
||||
import { useDraftAutoSave } from "../useDraftAutoSave"
|
||||
|
||||
@@ -16,7 +15,7 @@ interface UseStep4TitleProps {
|
||||
|
||||
/**
|
||||
* Step 4 标题设置 Hook
|
||||
* 封装 AI 标题生成、标题样式设置等逻辑
|
||||
* 封装标题样式设置等逻辑
|
||||
*/
|
||||
export function useStep4Title({
|
||||
titleSettings,
|
||||
@@ -34,26 +33,9 @@ export function useStep4Title({
|
||||
staleTime: 30_000,
|
||||
})
|
||||
|
||||
// AI 标题生成
|
||||
const {
|
||||
aiTitleInput,
|
||||
setAiTitleInput,
|
||||
aiTitleGenerating,
|
||||
aiTitleResults,
|
||||
hasGeneratedTitles,
|
||||
handleGenerateAiTitles,
|
||||
handleSelectAiTitle,
|
||||
handleRefreshAiTitles,
|
||||
autoGenerateTitle,
|
||||
} = useAiTitleGenerator({ titleSettings, onTitleSettingsChange })
|
||||
|
||||
// 样式更新
|
||||
const styleUpdaters = useTitleStyleUpdaters({ titleSettings, onTitleSettingsChange })
|
||||
|
||||
// 追踪 AI 自动选择开关的上一次值 & 是否首次挂载
|
||||
const prevAiAutoSelect = useRef(titleSettings.aiAutoSelect)
|
||||
const isFirstMount = useRef(true)
|
||||
|
||||
/* ── Step4 标题内容/样式变化后自动保存草稿（防抖 800ms，失败静默） ── */
|
||||
const { scheduleSave: scheduleTitleSave } = useDraftAutoSave(selectedTemplate)
|
||||
useEffect(() => {
|
||||
@@ -86,40 +68,12 @@ export function useStep4Title({
|
||||
scheduleTitleSave,
|
||||
])
|
||||
|
||||
// 当 AI 自动选择开关打开时，自动生成/选择一个标题填入
|
||||
// 首次挂载时如果开关已经是 true 且无标题，也需要触发
|
||||
useEffect(() => {
|
||||
if (isFirstMount.current) {
|
||||
isFirstMount.current = false
|
||||
if (titleSettings.aiAutoSelect && !titleSettings.title) {
|
||||
autoGenerateTitle()
|
||||
}
|
||||
prevAiAutoSelect.current = titleSettings.aiAutoSelect
|
||||
return
|
||||
}
|
||||
if (titleSettings.aiAutoSelect && !prevAiAutoSelect.current && !titleSettings.title) {
|
||||
autoGenerateTitle()
|
||||
}
|
||||
prevAiAutoSelect.current = titleSettings.aiAutoSelect
|
||||
}, [titleSettings.aiAutoSelect, titleSettings.title, autoGenerateTitle])
|
||||
|
||||
return {
|
||||
// 数据
|
||||
userTitles,
|
||||
titleSettings,
|
||||
// AI 标题状态
|
||||
aiTitleInput,
|
||||
setAiTitleInput,
|
||||
aiTitleGenerating,
|
||||
aiTitleResults,
|
||||
hasGeneratedTitles,
|
||||
activePreset: styleUpdaters.activePreset,
|
||||
titlePresets: styleUpdaters.titlePresets,
|
||||
// AI 标题操作
|
||||
handleGenerateAiTitles,
|
||||
handleSelectAiTitle,
|
||||
handleRefreshAiTitles,
|
||||
autoGenerateTitle,
|
||||
// 标题设置操作
|
||||
updateTitle: styleUpdaters.updateTitle,
|
||||
toggleAiAutoSelect: styleUpdaters.toggleAiAutoSelect,
|
||||
|
||||
@@ -1,124 +0,0 @@
|
||||
import { useState, useCallback } from "react"
|
||||
import { message } from "antd"
|
||||
import { AI_TITLE_TEMPLATES } from "../../constants"
|
||||
import type { TitleSettings } from "../../types"
|
||||
|
||||
export interface AiTitleItem {
|
||||
title: string
|
||||
highlight: string
|
||||
style: "catchy" | "emotional" | "informative"
|
||||
}
|
||||
|
||||
interface UseAiTitleGeneratorOptions {
|
||||
titleSettings: TitleSettings
|
||||
onTitleSettingsChange: (settings: TitleSettings) => void
|
||||
}
|
||||
|
||||
/**
|
||||
* AI 标题生成 Hook
|
||||
* 封装 AI 标题生成、刷新、选择等逻辑
|
||||
*/
|
||||
export function useAiTitleGenerator({
|
||||
titleSettings,
|
||||
onTitleSettingsChange,
|
||||
}: UseAiTitleGeneratorOptions) {
|
||||
const [aiTitleInput, setAiTitleInput] = useState("")
|
||||
const [aiTitleGenerating, setAiTitleGenerating] = useState(false)
|
||||
const [aiTitleResults, setAiTitleResults] = useState<AiTitleItem[]>([])
|
||||
const [hasGeneratedTitles, setHasGeneratedTitles] = useState(false)
|
||||
|
||||
const extractTopic = (text: string): string => {
|
||||
const keywords = text
|
||||
.replace(/[，。！？、,.!?]/g, " ")
|
||||
.split(/\s+/)
|
||||
.filter(Boolean)
|
||||
if (keywords.length === 0) return "这个话题"
|
||||
return keywords.slice(0, 3).join("")
|
||||
}
|
||||
|
||||
const generateTitlesFromTopic = (topic: string): AiTitleItem[] => {
|
||||
const results: AiTitleItem[] = []
|
||||
const styles: Array<"catchy" | "emotional" | "informative"> = [
|
||||
"catchy",
|
||||
"emotional",
|
||||
"informative",
|
||||
]
|
||||
const highlights = { catchy: "吸睛标题", emotional: "情感共鸣", informative: "知识干货" }
|
||||
styles.forEach((style) => {
|
||||
const templates = AI_TITLE_TEMPLATES[style]
|
||||
const shuffled = [...templates].sort(() => Math.random() - 0.5).slice(0, 2)
|
||||
shuffled.forEach((tpl) => {
|
||||
results.push({
|
||||
title: tpl.replace(/\{topic\}/g, topic),
|
||||
highlight: highlights[style],
|
||||
style,
|
||||
})
|
||||
})
|
||||
})
|
||||
results.sort(() => Math.random() - 0.5)
|
||||
return results
|
||||
}
|
||||
|
||||
const handleGenerateAiTitles = useCallback(async () => {
|
||||
if (!aiTitleInput.trim()) {
|
||||
message.warning("请先输入视频描述或关键词")
|
||||
return
|
||||
}
|
||||
setAiTitleGenerating(true)
|
||||
setHasGeneratedTitles(true)
|
||||
await new Promise((resolve) => setTimeout(resolve, 1200))
|
||||
const topic = extractTopic(aiTitleInput)
|
||||
setAiTitleResults(generateTitlesFromTopic(topic))
|
||||
setAiTitleGenerating(false)
|
||||
}, [aiTitleInput])
|
||||
|
||||
/**
|
||||
* 自动生成标题（供 AI 自动选择开关使用）
|
||||
* 如果已有生成结果，直接从中选一个；否则用默认关键词生成
|
||||
*/
|
||||
const autoGenerateTitle = useCallback((): string => {
|
||||
if (aiTitleResults.length > 0) {
|
||||
const picked = aiTitleResults[Math.floor(Math.random() * aiTitleResults.length)]
|
||||
if (!picked) return ""
|
||||
onTitleSettingsChange({ ...titleSettings, title: picked.title })
|
||||
return picked.title
|
||||
}
|
||||
// 没有已有结果，用默认关键词生成
|
||||
const results = generateTitlesFromTopic("短视频")
|
||||
setAiTitleResults(results)
|
||||
setHasGeneratedTitles(true)
|
||||
const picked = results[Math.floor(Math.random() * results.length)]
|
||||
if (!picked) return ""
|
||||
onTitleSettingsChange({ ...titleSettings, title: picked.title })
|
||||
return picked.title
|
||||
}, [aiTitleResults, titleSettings, onTitleSettingsChange])
|
||||
|
||||
const handleSelectAiTitle = useCallback(
|
||||
(title: string) => {
|
||||
onTitleSettingsChange({ ...titleSettings, title })
|
||||
message.success("已选用此标题")
|
||||
},
|
||||
[titleSettings, onTitleSettingsChange],
|
||||
)
|
||||
|
||||
const handleRefreshAiTitles = useCallback(async () => {
|
||||
if (!aiTitleInput.trim()) return
|
||||
setAiTitleGenerating(true)
|
||||
await new Promise((resolve) => setTimeout(resolve, 800))
|
||||
const topic = extractTopic(aiTitleInput)
|
||||
setAiTitleResults(generateTitlesFromTopic(topic))
|
||||
setAiTitleGenerating(false)
|
||||
}, [aiTitleInput])
|
||||
|
||||
return {
|
||||
aiTitleInput,
|
||||
setAiTitleInput,
|
||||
aiTitleGenerating,
|
||||
aiTitleResults,
|
||||
hasGeneratedTitles,
|
||||
handleGenerateAiTitles,
|
||||
handleSelectAiTitle,
|
||||
handleRefreshAiTitles,
|
||||
autoGenerateTitle,
|
||||
}
|
||||
}
|
||||
@@ -1,165 +0,0 @@
|
||||
/**
|
||||
* 批量变体配音预览音频解析（#1750）
|
||||
*
|
||||
* 独立配音模式下每个变体挂载各自的配音 URL：
|
||||
* - 配音素材（voice 资产，有 file_url）→ 直接用素材文件 URL；
|
||||
* - AI 音色（预置/克隆，无实体文件）→ 按该变体自己的标题调 /tts/preview 合成；
|
||||
* - 共用模式下所有变体解析为同一条（等价于旧 previewVoiceAudioUrl）。
|
||||
*
|
||||
* N=1 不使用本 hook（单视频配音预览逻辑在 GeneratePage 内保持不变，零回归）。
|
||||
*/
|
||||
import { useEffect, useRef, useState } from "react"
|
||||
import { useQuery } from "@tanstack/react-query"
|
||||
import { getAssetsByKind } from "@/api/assets"
|
||||
import type { AssetItem } from "@/api/assets"
|
||||
import { previewTts } from "@/api/tts"
|
||||
|
||||
interface UseVariantVoicePreviewOptions {
|
||||
/** 是否批量模式（count>1） */
|
||||
enabled: boolean
|
||||
/** 变体数量 */
|
||||
count: number
|
||||
/** 是否每个视频独立配音 */
|
||||
perVideo: boolean
|
||||
/** 共用配音 ID（独立模式下为变体 0 的配音） */
|
||||
sharedVoiceId: string
|
||||
/** 克隆音色 ID 覆盖（共用模式，与旧逻辑一致：selectedClonedVoice || selectedVoice） */
|
||||
clonedVoiceId?: string
|
||||
/** 各变体独立配音 ID（独立模式）；长度不足时回退共用 */
|
||||
variantVoiceIds: string[]
|
||||
/** 各变体标题（TTS 合成文案源） */
|
||||
titles: string[]
|
||||
}
|
||||
|
||||
/** 稳定的空数组常量：避免 useQuery 数据未就绪时每次渲染产生新引用导致 effect 无限触发 */
|
||||
const EMPTY_VOICE_MATERIALS: AssetItem[] = []
|
||||
|
||||
/** 判断配音 ID 是否对应实体素材（有 file_url）；否则视为 AI 音色需 TTS */
|
||||
function findMaterialUrl(id: string, materials: AssetItem[]): string | null {
|
||||
if (!id) return null
|
||||
const m = materials.find((x) => x.id === id)
|
||||
return m?.file_url || null
|
||||
}
|
||||
|
||||
export function useVariantVoicePreview({
|
||||
enabled,
|
||||
count,
|
||||
perVideo,
|
||||
sharedVoiceId,
|
||||
clonedVoiceId = "",
|
||||
variantVoiceIds,
|
||||
titles,
|
||||
}: UseVariantVoicePreviewOptions): (string | null)[] {
|
||||
const [urls, setUrls] = useState<(string | null)[]>([])
|
||||
// 配音素材库：组件内部自取，避免调用方传入不稳定数组引用导致 effect 反复触发
|
||||
const { data: voiceMaterialsData } = useQuery({
|
||||
queryKey: ["assets", "voice"],
|
||||
queryFn: () => getAssetsByKind("voice", { limit: 50 }),
|
||||
})
|
||||
const voiceMaterials: AssetItem[] = voiceMaterialsData ?? EMPTY_VOICE_MATERIALS
|
||||
// 已缓存的 TTS 结果：key = `${voiceId}|${title}`，避免重复合成
|
||||
const ttsCacheRef = useRef<Map<string, string>>(new Map())
|
||||
// 在途请求 AbortController
|
||||
const abortRef = useRef<AbortController | null>(null)
|
||||
const seqRef = useRef(0)
|
||||
|
||||
useEffect(() => {
|
||||
if (!enabled || count <= 1) {
|
||||
setUrls((prev) => (prev.length === 0 ? prev : []))
|
||||
return
|
||||
}
|
||||
|
||||
const seq = ++seqRef.current
|
||||
abortRef.current?.abort()
|
||||
const controller = new AbortController()
|
||||
abortRef.current = controller
|
||||
|
||||
// 每个变体实际使用的配音 ID
|
||||
const voiceIds = Array.from({ length: count }, (_, i) =>
|
||||
perVideo ? variantVoiceIds[i] || sharedVoiceId : sharedVoiceId,
|
||||
)
|
||||
|
||||
// 先用素材 URL 同步填充；AI 音色位置先置 null，待 TTS 完成
|
||||
const result: (string | null)[] = voiceIds.map((id, i) => {
|
||||
const materialUrl = findMaterialUrl(id, voiceMaterials)
|
||||
if (materialUrl) return materialUrl
|
||||
// 共用模式下克隆音色 ID 可能与 selectedVoice 不同（与旧 useEffect 逻辑一致）
|
||||
if (!perVideo && i === 0 && clonedVoiceId) {
|
||||
return findMaterialUrl(clonedVoiceId, voiceMaterials)
|
||||
}
|
||||
return null
|
||||
})
|
||||
|
||||
// 收集需要 TTS 的变体：无素材 URL 且有标题且有音色 ID
|
||||
const ttsJobs: { index: number; voiceId: string; title: string }[] = []
|
||||
voiceIds.forEach((id, i) => {
|
||||
if (result[i]) return
|
||||
// 共用模式沿用旧逻辑：voice_id = selectedClonedVoice || selectedVoice
|
||||
const ttsVoiceId = !perVideo && i === 0 ? clonedVoiceId || id : id
|
||||
const title = titles[i] || ""
|
||||
if (!ttsVoiceId || !title) return
|
||||
ttsJobs.push({ index: i, voiceId: ttsVoiceId, title })
|
||||
})
|
||||
|
||||
setUrls((prev) =>
|
||||
prev.length === result.length && prev.every((v, i) => v === result[i]) ? prev : result,
|
||||
)
|
||||
|
||||
if (ttsJobs.length === 0) return
|
||||
|
||||
let cancelled = false
|
||||
void (async () => {
|
||||
// 串行 TTS，避免瞬间 N 个合成请求打爆后端
|
||||
for (const job of ttsJobs) {
|
||||
const cacheKey = `${job.voiceId}|${job.title}`
|
||||
const cached = ttsCacheRef.current.get(cacheKey)
|
||||
if (cached) {
|
||||
if (seq === seqRef.current) {
|
||||
setUrls((prev) => {
|
||||
if (prev[job.index] === cached) return prev
|
||||
const next = [...prev]
|
||||
next[job.index] = cached
|
||||
return next
|
||||
})
|
||||
}
|
||||
continue
|
||||
}
|
||||
try {
|
||||
const res = await previewTts({ text: job.title, voice_id: job.voiceId })
|
||||
if (cancelled || controller.signal.aborted || seq !== seqRef.current) return
|
||||
const audioUrl = res.audio_url || ""
|
||||
if (audioUrl) {
|
||||
ttsCacheRef.current.set(cacheKey, audioUrl)
|
||||
setUrls((prev) => {
|
||||
if (prev[job.index] === audioUrl) return prev
|
||||
const next = [...prev]
|
||||
next[job.index] = audioUrl
|
||||
return next
|
||||
})
|
||||
}
|
||||
} catch (err) {
|
||||
if (cancelled || controller.signal.aborted || seq !== seqRef.current) return
|
||||
console.warn(`[变体${job.index + 1}预览配音生成失败]`, err)
|
||||
}
|
||||
}
|
||||
})()
|
||||
|
||||
return () => {
|
||||
cancelled = true
|
||||
controller.abort()
|
||||
}
|
||||
}, [
|
||||
enabled,
|
||||
count,
|
||||
perVideo,
|
||||
sharedVoiceId,
|
||||
clonedVoiceId,
|
||||
variantVoiceIds,
|
||||
titles,
|
||||
voiceMaterials,
|
||||
])
|
||||
|
||||
return urls
|
||||
}
|
||||
|
||||
export default useVariantVoicePreview
|
||||
@@ -81,14 +81,6 @@ export interface SmartMatchResult {
|
||||
reasons: string[]
|
||||
}
|
||||
|
||||
/* ── AI 标题结果 ── */
|
||||
export interface AiTitleResult {
|
||||
title: string
|
||||
style: string
|
||||
styleLabel: string
|
||||
highlights: string[]
|
||||
}
|
||||
|
||||
/* ── 配音推荐结果 ── */
|
||||
export interface VoiceRecommendation {
|
||||
voiceId: string
|
||||
|
||||
@@ -1,176 +0,0 @@
|
||||
/**
|
||||
* CanvasPreviewGrid 单测（Issue #1741 / #1750）
|
||||
*
|
||||
* 验证：
|
||||
* - N=3 时每个变体都拿到各自的 voiceAudioUrls[i]（独立配音模式，null=TTS 合成中）
|
||||
* - 每个变体都拿到各自的后端真实片段 variantClips[i]（serverClips），playToken 为 0 基变体序号
|
||||
* - 每个变体都收到 activePlayToken / onPlayTokenChange（播放互斥接线）
|
||||
* - 某个实例上报播放 → 所有实例的 activePlayToken 变为该实例（其他实例收到 token≠自身，自动暂停）
|
||||
* - 实例上报暂停（null）→ 播放权释放
|
||||
* - #1750 变体计划申请失败：渲染 role=alert 错误占位 ×N（严禁假数据/不渲染播放器），
|
||||
* 「重试」按钮仅变体 0 卡片出现且点击触发 onRetryClips
|
||||
* - #1750 加载态：渲染加载占位，不渲染播放器
|
||||
*/
|
||||
import { describe, it, expect, beforeEach, vi } from "vitest"
|
||||
import { render, fireEvent, screen } from "@testing-library/react"
|
||||
import type { AssetItem } from "@/api/assets"
|
||||
import type { EditPlanClip } from "@/api/template-editor"
|
||||
|
||||
const playerCalls = vi.hoisted(() => [] as Array<Record<string, unknown>>)
|
||||
|
||||
vi.mock("@/pages/generate/components/FrontendPreviewPlayer", () => ({
|
||||
default: (props: Record<string, unknown>) => {
|
||||
playerCalls.push(props)
|
||||
const token = props.playToken as number
|
||||
const active = props.activePlayToken as number | null
|
||||
const change = props.onPlayTokenChange as (t: number | null) => void
|
||||
return (
|
||||
<div data-testid={`player-${token}`}>
|
||||
<span data-testid={`voice-${token}`}>{props.voiceAudioUrl ? "has-voice" : "no-voice"}</span>
|
||||
<span data-testid={`token-${token}`}>{active == null ? "none" : String(active)}</span>
|
||||
<button type="button" onClick={() => change(token)}>
|
||||
play-{token}
|
||||
</button>
|
||||
<button type="button" onClick={() => change(null)}>
|
||||
pause-{token}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}))
|
||||
|
||||
import CanvasPreviewGrid from "@/pages/generate/components/CanvasPreviewGrid"
|
||||
|
||||
function makeAsset(id: string): AssetItem {
|
||||
return {
|
||||
id,
|
||||
library_id: "lib-1",
|
||||
name: `${id}.mp4`,
|
||||
storage_key: `media/${id}.mp4`,
|
||||
file_url: `https://cdn.example.com/${id}.mp4`,
|
||||
mime_type: "video/mp4",
|
||||
metadata: { duration: 10 },
|
||||
duration: 10,
|
||||
}
|
||||
}
|
||||
|
||||
function makeClips(variant: number): EditPlanClip[] {
|
||||
return ["a1", "a2"].map((assetId, order) => ({
|
||||
id: `clip-v${variant}-${assetId}`,
|
||||
plan_id: `plan-${variant}`,
|
||||
clip_type: "main",
|
||||
order,
|
||||
asset_id: assetId,
|
||||
text_content: "",
|
||||
start_time: 0,
|
||||
duration: 5,
|
||||
transition_effect: "none",
|
||||
transition_duration: 0,
|
||||
playback_speed: 1,
|
||||
status: "ready",
|
||||
config: {},
|
||||
}))
|
||||
}
|
||||
|
||||
const titleSettings = {
|
||||
size: 36,
|
||||
font: "思源黑体",
|
||||
color: "#fff",
|
||||
position: "bottom" as const,
|
||||
bold: false,
|
||||
italic: false,
|
||||
stroke: true,
|
||||
shadow: false,
|
||||
posX: null,
|
||||
posY: null,
|
||||
}
|
||||
|
||||
const variantClips: EditPlanClip[][] = [makeClips(0), makeClips(1), makeClips(2)]
|
||||
|
||||
function renderGrid(overrides: Record<string, unknown> = {}) {
|
||||
playerCalls.length = 0
|
||||
return render(
|
||||
<CanvasPreviewGrid
|
||||
count={3}
|
||||
assets={[makeAsset("a1"), makeAsset("a2"), makeAsset("a3")]}
|
||||
videoRatio="9:16"
|
||||
titles={["标题1", "标题2", "标题3"]}
|
||||
titleSettings={titleSettings}
|
||||
variantClips={variantClips}
|
||||
voiceAudioUrls={["https://cdn.example.com/v0.mp3", null, "https://cdn.example.com/v2.mp3"]}
|
||||
selectedIds={[0, 1, 2]}
|
||||
onToggleSelect={() => {}}
|
||||
{...overrides}
|
||||
/>,
|
||||
)
|
||||
}
|
||||
|
||||
describe("CanvasPreviewGrid 配音、真实片段与播放互斥 (#1741/#1750)", () => {
|
||||
beforeEach(() => {
|
||||
playerCalls.length = 0
|
||||
})
|
||||
|
||||
it("N=3 时每个变体都拿到各自的配音 URL 与后端真实片段，playToken 为 0 基序号", () => {
|
||||
renderGrid()
|
||||
expect(playerCalls).toHaveLength(3)
|
||||
playerCalls.forEach((p, i) => {
|
||||
expect(p.playToken).toBe(i)
|
||||
expect(p.serverClips).toBe(variantClips[i])
|
||||
expect(p.variantTitle).toBe(`标题${i + 1}`)
|
||||
})
|
||||
// 独立配音：变体 0/2 有各自 URL；变体 1 为 null（TTS 合成中）→ 传 undefined
|
||||
expect(playerCalls[0].voiceAudioUrl).toBe("https://cdn.example.com/v0.mp3")
|
||||
expect(playerCalls[1].voiceAudioUrl).toBeUndefined()
|
||||
expect(playerCalls[2].voiceAudioUrl).toBe("https://cdn.example.com/v2.mp3")
|
||||
// 配音状态徽标
|
||||
expect(screen.getByTestId("voice-0").textContent).toBe("has-voice")
|
||||
expect(screen.getByTestId("voice-1").textContent).toBe("no-voice")
|
||||
expect(screen.getByTestId("voice-2").textContent).toBe("has-voice")
|
||||
})
|
||||
|
||||
it("每个变体都接线 activePlayToken / onPlayTokenChange", () => {
|
||||
renderGrid()
|
||||
playerCalls.forEach((p) => {
|
||||
expect(p.activePlayToken).toBeNull()
|
||||
expect(typeof p.onPlayTokenChange).toBe("function")
|
||||
})
|
||||
})
|
||||
|
||||
it("点击变体2播放：所有实例 activePlayToken 变为 1（0 基，其他实例自动暂停）", () => {
|
||||
renderGrid()
|
||||
fireEvent.click(screen.getByTestId("player-1").querySelector("button")!)
|
||||
expect(screen.getByTestId("token-0").textContent).toBe("1")
|
||||
expect(screen.getByTestId("token-1").textContent).toBe("1")
|
||||
expect(screen.getByTestId("token-2").textContent).toBe("1")
|
||||
})
|
||||
|
||||
it("正在播放实例上报暂停后，播放权释放（token 回 null）", () => {
|
||||
renderGrid()
|
||||
fireEvent.click(screen.getByTestId("player-2").querySelector("button")!)
|
||||
expect(screen.getByTestId("token-0").textContent).toBe("2")
|
||||
|
||||
fireEvent.click(screen.getByTestId("player-2").querySelectorAll("button")[1])
|
||||
expect(screen.getByTestId("token-2").textContent).toBe("none")
|
||||
})
|
||||
|
||||
it("clipsError：每张卡片显示错误占位（role=alert）且不渲染任何播放器，重试按钮仅一个并触发回调", () => {
|
||||
const onRetry = vi.fn()
|
||||
renderGrid({ clipsError: true, onRetryClips: onRetry })
|
||||
expect(screen.getAllByRole("alert")).toHaveLength(3)
|
||||
expect(screen.getAllByText("预览加载失败，请重试")).toHaveLength(3)
|
||||
// 严禁假数据：错误态不渲染播放器
|
||||
expect(playerCalls).toHaveLength(0)
|
||||
// 重试按钮仅变体 0 卡片出现
|
||||
const retryButtons = screen.getAllByText("重试")
|
||||
expect(retryButtons).toHaveLength(1)
|
||||
fireEvent.click(retryButtons[0])
|
||||
expect(onRetry).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
it("clipsLoading：渲染加载占位，不渲染播放器", () => {
|
||||
renderGrid({ clipsLoading: true })
|
||||
expect(screen.getAllByText("独立选片中…")).toHaveLength(3)
|
||||
expect(screen.queryAllByRole("alert")).toHaveLength(0)
|
||||
expect(playerCalls).toHaveLength(0)
|
||||
})
|
||||
})
|
||||
@@ -1,213 +0,0 @@
|
||||
/**
|
||||
* FrontendPreviewPlayer 音频行为单测（Issue #1741 / #1750）
|
||||
*
|
||||
* useSegmentScheduler 用 mock 控制播放态，专注验证本组件的音频逻辑：
|
||||
* - 有配音时 video 保持 muted（素材原声不与配音混音）
|
||||
* - 无配音时 video 不 muted（素材原声兜底，保证任何情况下播放有声）
|
||||
* - 静音按钮：默认有声；点击后切 muted，aria-label 与图标切换
|
||||
* - 批量播放互斥（#1750 playToken 为 0 基变体序号）：activePlayToken 变为其他实例且本实例在播放时，调用 pause
|
||||
* - 点击播放/暂停时上报播放权（onPlayTokenChange）
|
||||
* - #1750：serverClips 是唯一片段来源，缺失时不渲染任何 video（无本地模拟 fallback）
|
||||
*/
|
||||
import { describe, it, expect, beforeEach, vi } from "vitest"
|
||||
import { render, screen, fireEvent } from "@testing-library/react"
|
||||
import FrontendPreviewPlayer from "@/pages/generate/components/FrontendPreviewPlayer"
|
||||
import type { AssetItem } from "@/api/assets"
|
||||
import type { EditPlanClip } from "@/api/template-editor"
|
||||
|
||||
const mocks = vi.hoisted(() => ({
|
||||
isPlaying: false,
|
||||
pause: vi.fn(),
|
||||
togglePlayPause: vi.fn(),
|
||||
}))
|
||||
|
||||
vi.mock("@/pages/generate/hooks/useSegmentScheduler", () => ({
|
||||
// segments 由组件 buildPlaybackSegments 产出（唯一来源 serverClips）；
|
||||
// canPlay 与真实 hook 一致：无片段时不可播放
|
||||
useSegmentScheduler: vi.fn((segments: unknown[]) => ({
|
||||
isPlaying: mocks.isPlaying,
|
||||
currentTime: 0,
|
||||
totalDuration: 20,
|
||||
currentSegmentIndex: 0,
|
||||
canPlay: segments.length > 0,
|
||||
togglePlayPause: mocks.togglePlayPause,
|
||||
seekTo: vi.fn(),
|
||||
pause: mocks.pause,
|
||||
videoRefs: { current: [] as (HTMLVideoElement | null)[] },
|
||||
})),
|
||||
}))
|
||||
|
||||
vi.mock("@/pages/generate/hooks/useCanvasPlayer", () => ({
|
||||
useCanvasPlayer: () => ({
|
||||
state: {
|
||||
isPlaying: false,
|
||||
isReady: false,
|
||||
isBuffering: false,
|
||||
currentTime: 0,
|
||||
duration: 0,
|
||||
errorMessage: "",
|
||||
hasDecodeError: false,
|
||||
},
|
||||
controls: { play: vi.fn(), pause: vi.fn(), seek: vi.fn() },
|
||||
}),
|
||||
}))
|
||||
|
||||
beforeEach(() => {
|
||||
mocks.isPlaying = false
|
||||
mocks.pause.mockClear()
|
||||
mocks.togglePlayPause.mockClear()
|
||||
vi.stubGlobal(
|
||||
"ResizeObserver",
|
||||
class {
|
||||
observe() {}
|
||||
unobserve() {}
|
||||
disconnect() {}
|
||||
},
|
||||
)
|
||||
})
|
||||
|
||||
function makeAsset(id: string): AssetItem {
|
||||
return {
|
||||
id,
|
||||
library_id: "lib-1",
|
||||
name: `${id}.mp4`,
|
||||
storage_key: `media/${id}.mp4`,
|
||||
file_url: `https://cdn.example.com/${id}.mp4`,
|
||||
mime_type: "video/mp4",
|
||||
metadata: { duration: 10, width: 1080, height: 1920 },
|
||||
duration: 10,
|
||||
}
|
||||
}
|
||||
|
||||
function makeClip(assetId: string, order: number): EditPlanClip {
|
||||
return {
|
||||
id: `clip-${assetId}`,
|
||||
plan_id: "plan-1",
|
||||
clip_type: "main",
|
||||
order,
|
||||
asset_id: assetId,
|
||||
text_content: "",
|
||||
start_time: 0,
|
||||
duration: 5,
|
||||
transition_effect: "none",
|
||||
transition_duration: 0,
|
||||
playback_speed: 1,
|
||||
status: "ready",
|
||||
config: {},
|
||||
}
|
||||
}
|
||||
|
||||
const serverClips = [makeClip("a1", 0), makeClip("a2", 1)]
|
||||
|
||||
const baseProps = {
|
||||
assets: [makeAsset("a1"), makeAsset("a2")],
|
||||
videoRatio: "9:16",
|
||||
ready: true,
|
||||
serverClips,
|
||||
}
|
||||
|
||||
function videos(): HTMLVideoElement[] {
|
||||
return Array.from(document.querySelectorAll("video"))
|
||||
}
|
||||
|
||||
describe("FrontendPreviewPlayer 音频行为 (#1741/#1750)", () => {
|
||||
it("有配音时 video 保持 muted（素材原声不与配音混音）", () => {
|
||||
render(<FrontendPreviewPlayer {...baseProps} voiceAudioUrl="https://cdn.example.com/tts.mp3" />)
|
||||
expect(videos()).toHaveLength(2)
|
||||
videos().forEach((v) => expect(v.muted).toBe(true))
|
||||
})
|
||||
|
||||
it("无配音时 video 不 muted（素材原声兜底）", () => {
|
||||
render(<FrontendPreviewPlayer {...baseProps} />)
|
||||
videos().forEach((v) => expect(v.muted).toBe(false))
|
||||
})
|
||||
|
||||
it("无配音时点静音按钮，video 切换为 muted；再点恢复", () => {
|
||||
render(<FrontendPreviewPlayer {...baseProps} />)
|
||||
const vs = videos()
|
||||
expect(vs[0].muted).toBe(false)
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: "静音" }))
|
||||
videos().forEach((v) => expect(v.muted).toBe(true))
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: "取消静音" }))
|
||||
videos().forEach((v) => expect(v.muted).toBe(false))
|
||||
})
|
||||
|
||||
it("批量播放互斥：token 变为其他实例且本实例在播放时调用 pause", () => {
|
||||
mocks.isPlaying = true
|
||||
const { rerender } = render(
|
||||
<FrontendPreviewPlayer
|
||||
{...baseProps}
|
||||
playToken={1}
|
||||
activePlayToken={1}
|
||||
onPlayTokenChange={() => {}}
|
||||
compact
|
||||
/>,
|
||||
)
|
||||
expect(mocks.pause).not.toHaveBeenCalled()
|
||||
|
||||
// 播放权切给实例 2（0 基 token）
|
||||
rerender(
|
||||
<FrontendPreviewPlayer
|
||||
{...baseProps}
|
||||
playToken={1}
|
||||
activePlayToken={2}
|
||||
onPlayTokenChange={() => {}}
|
||||
compact
|
||||
/>,
|
||||
)
|
||||
expect(mocks.pause).toHaveBeenCalledTimes(1)
|
||||
|
||||
// token 切回自己：不重复暂停
|
||||
rerender(
|
||||
<FrontendPreviewPlayer
|
||||
{...baseProps}
|
||||
playToken={1}
|
||||
activePlayToken={1}
|
||||
onPlayTokenChange={() => {}}
|
||||
compact
|
||||
/>,
|
||||
)
|
||||
expect(mocks.pause).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
it("未播放时 token 变化不触发暂停（effect 仅在本实例播放时生效）", () => {
|
||||
// mocks.isPlaying = false（beforeEach 重置）
|
||||
const { rerender } = render(
|
||||
<FrontendPreviewPlayer {...baseProps} playToken={0} activePlayToken={0} compact />,
|
||||
)
|
||||
rerender(<FrontendPreviewPlayer {...baseProps} playToken={0} activePlayToken={1} compact />)
|
||||
expect(mocks.pause).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it("暂停状态下点击播放按钮：上报播放权为自身 playToken 并触发播放", () => {
|
||||
const onToken = vi.fn()
|
||||
render(
|
||||
<FrontendPreviewPlayer {...baseProps} playToken={2} onPlayTokenChange={onToken} compact />,
|
||||
)
|
||||
// 暂停态有两个图标播放按钮（中央大按钮 + 控制条按钮），均调 handleTogglePlay，点中央那个
|
||||
const playButtons = screen.getAllByRole("button").filter((b) => !b.getAttribute("aria-label"))
|
||||
expect(playButtons.length).toBeGreaterThanOrEqual(1)
|
||||
fireEvent.click(playButtons[0])
|
||||
expect(onToken).toHaveBeenCalledWith(2)
|
||||
expect(mocks.togglePlayPause).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
it("每个卡片都渲染独立静音按钮", () => {
|
||||
render(
|
||||
<div>
|
||||
<FrontendPreviewPlayer {...baseProps} playToken={0} compact />
|
||||
<FrontendPreviewPlayer {...baseProps} playToken={1} compact />
|
||||
<FrontendPreviewPlayer {...baseProps} playToken={2} compact />
|
||||
</div>,
|
||||
)
|
||||
expect(screen.getAllByRole("button", { name: "静音" })).toHaveLength(3)
|
||||
})
|
||||
|
||||
it("#1750 serverClips 缺失时不渲染任何 video（无本地模拟 fallback，显示无可播放素材）", () => {
|
||||
render(<FrontendPreviewPlayer {...baseProps} serverClips={undefined} />)
|
||||
expect(videos()).toHaveLength(0)
|
||||
expect(screen.getByText("暂无可播放素材")).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
@@ -19,7 +19,6 @@ import "@/pages/generate/components/Step2MaterialSelect"
|
||||
import "@/pages/generate/components/Step4TitleSettings"
|
||||
import "@/pages/generate/components/Step5VoiceSelect"
|
||||
import "@/pages/generate/components/Step3VoiceWithMode"
|
||||
import "@/pages/generate/components/CanvasPreviewGrid"
|
||||
import "@/pages/generate/components/BatchGenerationGrid"
|
||||
import "@/pages/generate/components/PreviewCountModal"
|
||||
import "@/pages/generate/components/GenerateStepContent"
|
||||
@@ -33,8 +32,6 @@ import "@/pages/generate/components/material/MaterialModeTabs"
|
||||
import "@/pages/generate/components/material/ManualMaterialList"
|
||||
import "@/pages/generate/components/material/SmartMatchInput"
|
||||
import "@/pages/generate/components/material/SmartMatchResults"
|
||||
import "@/pages/generate/components/title/AiTitleGenerator"
|
||||
import "@/pages/generate/components/title/AiTitleCard"
|
||||
import "@/pages/generate/components/title/TitleStylePanel"
|
||||
import "@/pages/generate/components/title/TitlePresetsGrid"
|
||||
import "@/pages/generate/utils/formatDuration"
|
||||
@@ -48,9 +45,6 @@ describe("GeneratePage module smoke test", () => {
|
||||
import "@/pages/generate/hooks/useGenerateVideo"
|
||||
import "@/pages/generate/hooks/useBatchCovers"
|
||||
import "@/pages/generate/hooks/useBatchVariantPlans"
|
||||
import "@/pages/generate/hooks/useVariantVoicePreview"
|
||||
import "@/pages/generate/hooks/usePreviewAssets"
|
||||
import "@/pages/generate/hooks/useSegmentScheduler"
|
||||
import "@/pages/generate/hooks/generate-video/useGenerationPolling"
|
||||
import "@/pages/generate/hooks/useGenerateFormState"
|
||||
import "@/pages/generate/hooks/useGenerateFormState/useVoiceState"
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
/**
|
||||
* Step4+5 merged preview smoke test
|
||||
* 确保 vitest related 模式能匹配到第5步预览生成相关文件的改动
|
||||
*/
|
||||
import { describe, it, expect } from "vitest"
|
||||
|
||||
import "@/pages/generate/hooks/usePreviewAssets"
|
||||
import "@/pages/generate/hooks/useSegmentScheduler"
|
||||
import "@/pages/generate/components/FrontendPreviewPlayer"
|
||||
import "@/pages/generate/hooks/useStepNavigation"
|
||||
import "@/pages/generate/components/GenerateStepContent"
|
||||
import "@/pages/generate/GeneratePage"
|
||||
|
||||
describe("Merged Step4+5 preview module smoke test", () => {
|
||||
it("should load all merged step4+5 preview modules", () => {
|
||||
expect(true).toBe(true)
|
||||
})
|
||||
})
|
||||
@@ -16,6 +16,7 @@ from typing import Any
|
||||
from packages.domain.ass_subtitle_builder import (
|
||||
TITLE_MARGIN_SIDE,
|
||||
TITLE_MARGIN_TOP,
|
||||
_scale_len,
|
||||
_wrap_title_text,
|
||||
build_ass_style,
|
||||
escape_ass_text,
|
||||
@@ -133,22 +134,23 @@ def generate_ass_from_timeline(
|
||||
output_path.write_text("", encoding="utf-8")
|
||||
return output_path
|
||||
|
||||
# 样式参数
|
||||
# 样式参数（字号/描边/边距按视频宽度缩放，基准 720p，与前端预览一致）
|
||||
_sw = video_width
|
||||
font_name = subtitle_config.get("font", "思源黑体")
|
||||
font_size = int(subtitle_config.get("size", 24))
|
||||
font_size = _scale_len(int(subtitle_config.get("size", 24)), _sw)
|
||||
color = _hex_to_ass_color(subtitle_config.get("color", "#ffffff"))
|
||||
position = subtitle_config.get("position", "bottom")
|
||||
alignment = _position_to_ass_alignment(position)
|
||||
max_chars_per_line = int(subtitle_config.get("max_chars_per_line", DEFAULT_MAX_CHARS_PER_LINE))
|
||||
|
||||
# 描边（默认黑色描边，保证可读性）
|
||||
# 描边（默认黑色描边，保证可读性）—— 720p 基准 1.5
|
||||
outline_color = "&H00000000"
|
||||
outline_width = 1.5
|
||||
outline_width = _scale_len(1.5, _sw)
|
||||
|
||||
# 边距
|
||||
margin_v = 60 if position == "bottom" else 60
|
||||
margin_l = 40
|
||||
margin_r = 40
|
||||
# 边距（720p 基准 60/40）
|
||||
margin_v = _scale_len(60 if position == "bottom" else 60, _sw)
|
||||
margin_l = _scale_len(40, _sw)
|
||||
margin_r = _scale_len(40, _sw)
|
||||
|
||||
# 生成样式行
|
||||
style_line = (
|
||||
@@ -203,22 +205,29 @@ def generate_ass_from_timeline(
|
||||
if "font_color" in title_cfg and "color" not in title_cfg:
|
||||
title_cfg["color"] = title_cfg["font_color"]
|
||||
|
||||
_tsw = video_width
|
||||
t_color = hex_to_ass_color(title_cfg.get("color", "#ffffff"))
|
||||
t_stroke = title_cfg.get("stroke", {}) or {}
|
||||
t_shadow = title_cfg.get("shadow", {}) or {}
|
||||
s_color = hex_to_ass_color(t_stroke.get("color", "#000000"))
|
||||
s_width = float(t_stroke.get("width", 2)) if t_stroke.get("enabled", False) else 0.0
|
||||
sh_blur = float(t_shadow.get("blur", 4)) if t_shadow.get("enabled", False) else 0.0
|
||||
s_width = _scale_len(float(t_stroke.get("width", 2)) if t_stroke.get("enabled", False) else 0.0, _tsw)
|
||||
sh_blur = _scale_len(float(t_shadow.get("blur", 4)) if t_shadow.get("enabled", False) else 0.0, _tsw)
|
||||
sh_offset = (
|
||||
t_shadow.get("offset_x", 2) if t_shadow.get("enabled", False) else 0,
|
||||
t_shadow.get("offset_y", 2) if t_shadow.get("enabled", False) else 0,
|
||||
_scale_len(t_shadow.get("offset_x", 2) if t_shadow.get("enabled", False) else 0, _tsw),
|
||||
_scale_len(t_shadow.get("offset_y", 2) if t_shadow.get("enabled", False) else 0, _tsw),
|
||||
)
|
||||
t_alignment = position_to_ass_alignment(title_cfg.get("position", "bottom"))
|
||||
|
||||
# 标题字号/边距按视频宽度缩放（基准 720p），移除旧的 min(...,36) 上限避免 1080p 被钳位过小
|
||||
_base_title_size = int(title_cfg.get("size", 36))
|
||||
t_font_size = _scale_len(_base_title_size, _tsw)
|
||||
_t_margin_top = _scale_len(TITLE_MARGIN_TOP, _tsw)
|
||||
_t_margin_side = _scale_len(TITLE_MARGIN_SIDE, _tsw)
|
||||
|
||||
title_style_line = build_ass_style(
|
||||
"TitleStyle",
|
||||
font_name=title_cfg.get("font", "思源黑体"),
|
||||
font_size=min(int(title_cfg.get("size", 36)), 36),
|
||||
font_size=t_font_size,
|
||||
primary_color=t_color,
|
||||
outline_color=s_color,
|
||||
outline_width=s_width,
|
||||
@@ -227,14 +236,15 @@ def generate_ass_from_timeline(
|
||||
bold=bool(title_cfg.get("bold", True)),
|
||||
italic=bool(title_cfg.get("italic", False)),
|
||||
alignment=t_alignment,
|
||||
margin_v=TITLE_MARGIN_TOP,
|
||||
margin_l=TITLE_MARGIN_SIDE,
|
||||
margin_r=TITLE_MARGIN_SIDE,
|
||||
margin_v=_t_margin_top,
|
||||
margin_l=_t_margin_side,
|
||||
margin_r=_t_margin_side,
|
||||
)
|
||||
|
||||
t_font_size = min(int(title_cfg.get("size", 36)), 36)
|
||||
safe_raw = escape_ass_text(title_text.strip())
|
||||
safe_wrapped = _wrap_title_text(safe_raw, video_width, t_font_size)
|
||||
safe_wrapped = _wrap_title_text(
|
||||
safe_raw, video_width, t_font_size, margin_l=_t_margin_side, margin_r=_t_margin_side
|
||||
)
|
||||
|
||||
if video_duration > 0:
|
||||
t_end_time = format_ass_time(video_duration)
|
||||
|
||||
@@ -59,6 +59,31 @@ FONT_NAME_MAP: dict[str, str] = {
|
||||
# font_size=89 → ASS Fontsize=round(89*1.35)=120，实际中文字高约 78~85px。
|
||||
ASS_FONTSIZE_COMPENSATION = 1.35
|
||||
|
||||
# 前端预览字号的基准宽度（px）。前端 TitleMiniPreview 以 width/360 缩放、titleCanvas.ts
|
||||
# 以 videoWidth/720 缩放（360 是 720 的一半，字号等比例一致），types.ts 注释 "px @720p"。
|
||||
# 当输出视频宽度 ≠ 720 时，所有长度类字段（字号/描边宽/阴影偏移/边距）
|
||||
# 都按 video_width / TITLE_SIZE_REF_WIDTH 等比缩放，保证成片标题视觉大小与预览一致。
|
||||
TITLE_SIZE_REF_WIDTH = 720
|
||||
|
||||
|
||||
def _scale_len(value, video_width: int):
|
||||
"""将 720p 基准长度值按 video_width 等比缩放。
|
||||
|
||||
整数输入 → 返回 int（用于字号、描边宽、边距、偏移等整数字段）；
|
||||
浮点输入 → 返回 float（保留小数，用于 1.5 这类 outline 细描边）；
|
||||
非数值原样返回。
|
||||
"""
|
||||
if value is None:
|
||||
return None
|
||||
try:
|
||||
v = float(value)
|
||||
except (TypeError, ValueError):
|
||||
return value
|
||||
if not video_width or video_width <= 0:
|
||||
return int(round(v)) if isinstance(value, int) else v
|
||||
scaled = v * (video_width / TITLE_SIZE_REF_WIDTH)
|
||||
return int(round(scaled)) if isinstance(value, int) else scaled
|
||||
|
||||
|
||||
def _compensate_ass_fontsize(font_size: int) -> int:
|
||||
"""将 CSS 语义字号换算为 ASS Fontsize，补偿中文字符在 em-square 中的留白。"""
|
||||
@@ -374,6 +399,44 @@ def build_ass_content(
|
||||
else {"enabled": False}
|
||||
)
|
||||
|
||||
# ── 字号/描边/阴影/边距按视频宽度缩放（基准 720p，与前端预览一致） ──
|
||||
# 前端标题/字幕面板的 size 语义是 "px @720p"（见 types.ts 注释、titleCanvas.ts scale=videoWidth/720），
|
||||
# 当输出分辨率不是 720p（如 1080x1920 竖屏、4K）时等比放大，避免成片标题比预览小。
|
||||
def _scale_cfg(cfg: dict, defaults: dict | None = None) -> None:
|
||||
if not isinstance(cfg, dict):
|
||||
return
|
||||
# 先填充默认值，再统一缩放，避免 .get("size", 36) 处拿未缩放默认值
|
||||
if defaults:
|
||||
for k, v in defaults.items():
|
||||
cfg.setdefault(k, v)
|
||||
sw = video_width
|
||||
for key in ("size", "font_size"):
|
||||
if key in cfg:
|
||||
try:
|
||||
cfg[key] = _scale_len(cfg[key], sw)
|
||||
except (TypeError, ValueError):
|
||||
pass
|
||||
# stroke/shadow 的 width/blur/offset 由后续字段提取处统一按 720p 默认值+缩放处理
|
||||
# （包含 enabled=false 时不写入、默认值 2/4 也需缩放），此处不再重复缩放
|
||||
for key in ("margin_top", "bg_padding", "bg_radius", "pos_x", "pos_y"):
|
||||
# pos_x/pos_y 是百分比(0-100)不缩放，margin/padding/radius 是 px @720p 需要缩放
|
||||
if key in cfg and key not in ("pos_x", "pos_y"):
|
||||
cfg[key] = _scale_len(cfg.get(key), sw)
|
||||
# 逐行覆盖的 size 也要缩放
|
||||
overrides = cfg.get("line_overrides")
|
||||
if isinstance(overrides, list):
|
||||
for ov in overrides:
|
||||
if isinstance(ov, dict) and "size" in ov:
|
||||
ov["size"] = _scale_len(ov.get("size"), sw)
|
||||
|
||||
_scale_cfg(title_config, defaults={"size": 36})
|
||||
_scale_cfg(subtitle_config, defaults={"size": 24})
|
||||
|
||||
# 边距按视频宽度缩放（基准 720p）
|
||||
_margin_top = _scale_len(TITLE_MARGIN_TOP, video_width) or TITLE_MARGIN_TOP
|
||||
_margin_bottom = _scale_len(TITLE_MARGIN_BOTTOM, video_width) or TITLE_MARGIN_BOTTOM
|
||||
_margin_side = _scale_len(TITLE_MARGIN_SIDE, video_width) or TITLE_MARGIN_SIDE
|
||||
|
||||
title_enabled = title_config.get("enabled", True) and bool(title_text.strip())
|
||||
subtitle_enabled = subtitle_config.get("enabled", True) and bool(subtitle_text.strip())
|
||||
|
||||
@@ -389,11 +452,16 @@ def build_ass_content(
|
||||
title_stroke = title_config.get("stroke", {}) or {}
|
||||
title_shadow = title_config.get("shadow", {}) or {}
|
||||
stroke_color = hex_to_ass_color(title_stroke.get("color", "#000000"))
|
||||
stroke_width = float(title_stroke.get("width", 2)) if title_stroke.get("enabled", False) else 0.0
|
||||
shadow_blur = float(title_shadow.get("blur", 4)) if title_shadow.get("enabled", False) else 0.0
|
||||
# 描边/阴影默认值也是 720p 基准，需要随视频宽度缩放
|
||||
_def_stroke_w = float(title_stroke.get("width", 2)) if title_stroke.get("enabled", False) else 0.0
|
||||
_def_shadow_b = float(title_shadow.get("blur", 4)) if title_shadow.get("enabled", False) else 0.0
|
||||
_def_shadow_x = title_shadow.get("offset_x", 2) if title_shadow.get("enabled", False) else 0
|
||||
_def_shadow_y = title_shadow.get("offset_y", 2) if title_shadow.get("enabled", False) else 0
|
||||
stroke_width = float(_scale_len(_def_stroke_w, video_width))
|
||||
shadow_blur = float(_scale_len(_def_shadow_b, video_width))
|
||||
shadow_offset = (
|
||||
title_shadow.get("offset_x", 2) if title_shadow.get("enabled", False) else 0,
|
||||
title_shadow.get("offset_y", 2) if title_shadow.get("enabled", False) else 0,
|
||||
_scale_len(_def_shadow_x, video_width),
|
||||
_scale_len(_def_shadow_y, video_width),
|
||||
)
|
||||
|
||||
# ── 自由位置拖拽（工单 #1405 方案 B）────────────────────────────
|
||||
@@ -420,9 +488,9 @@ def build_ass_content(
|
||||
bold=bool(title_config.get("bold", True)),
|
||||
italic=bool(title_config.get("italic", False)),
|
||||
alignment=title_alignment,
|
||||
margin_v=TITLE_MARGIN_TOP,
|
||||
margin_l=TITLE_MARGIN_SIDE,
|
||||
margin_r=TITLE_MARGIN_SIDE,
|
||||
margin_v=_margin_top,
|
||||
margin_l=_margin_side,
|
||||
margin_r=_margin_side,
|
||||
)
|
||||
)
|
||||
|
||||
@@ -430,7 +498,9 @@ def build_ass_content(
|
||||
# 先 escape 特殊字符，再插入换行符 \N，避免顺序颠倒导致 \N 被转义
|
||||
title_font_size = int(title_config.get("size", 36))
|
||||
safe_title_text_raw = escape_ass_text(title_text)
|
||||
safe_title_text = _wrap_title_text(safe_title_text_raw, video_width, title_font_size)
|
||||
safe_title_text = _wrap_title_text(
|
||||
safe_title_text_raw, video_width, title_font_size, margin_l=_margin_side, margin_r=_margin_side
|
||||
)
|
||||
|
||||
# #2001 逐行样式覆盖：按 line_overrides 在每行前注入 ASS inline override 标签
|
||||
# line_overrides 透传自前端爆款标题面板，SubtitleStyle.from_dict 已做安全过滤
|
||||
@@ -460,15 +530,15 @@ def build_ass_content(
|
||||
font_size=int(subtitle_config.get("size", 24)),
|
||||
primary_color=sub_color,
|
||||
outline_color="&H00000000",
|
||||
outline_width=1.0,
|
||||
outline_width=float(_scale_len(1.0, video_width)),
|
||||
shadow_blur=0.0,
|
||||
shadow_offset=(0, 0),
|
||||
bold=False,
|
||||
italic=False,
|
||||
alignment=sub_alignment,
|
||||
margin_v=TITLE_MARGIN_BOTTOM,
|
||||
margin_l=TITLE_MARGIN_SIDE,
|
||||
margin_r=TITLE_MARGIN_SIDE,
|
||||
margin_v=_margin_bottom,
|
||||
margin_l=_margin_side,
|
||||
margin_r=_margin_side,
|
||||
)
|
||||
)
|
||||
|
||||
|
||||
@@ -428,6 +428,26 @@ DRAWTEXT_FONT_MAP: dict[str, str] = {
|
||||
}
|
||||
|
||||
|
||||
# 前端标题/字幕面板的字号/描边/阴影/边距语义是 "px @720p"（见 web/src/pages/generate/types.ts
|
||||
# 注释、apps/web/src/pages/ai-avatar/utils/titleCanvas.ts scale = videoWidth / 720）。
|
||||
# 当输出视频宽度 != 720 时（如 1080x1920 竖屏、4K），drawtext 降级路径需要按比例
|
||||
# 缩放所有长度类字段，避免成片标题视觉上比前端预览小。
|
||||
TITLE_DRAWTEXT_REF_WIDTH = 720
|
||||
|
||||
|
||||
def _scale_title_len(value, output_width: int):
|
||||
"""将 720p 基准长度值按 output_width 等比缩放，返回 int."""
|
||||
if value is None:
|
||||
return 0
|
||||
try:
|
||||
v = float(value)
|
||||
except (TypeError, ValueError):
|
||||
return 0
|
||||
if not output_width or output_width <= 0:
|
||||
return int(round(v))
|
||||
return int(round(v * (output_width / TITLE_DRAWTEXT_REF_WIDTH)))
|
||||
|
||||
|
||||
def _escape_drawtext_text(text: str) -> str:
|
||||
"""转义 drawtext 特殊字符。
|
||||
|
||||
@@ -514,6 +534,8 @@ def build_title_drawtext_filter(
|
||||
# ── 样式参数 ──
|
||||
font_name = title_config.get("font") or title_config.get("font_preset") or "思源黑体"
|
||||
font_size = int(title_config.get("font_size") or title_config.get("size") or 48)
|
||||
# 字号/描边/阴影按视频宽度等比缩放（基准 720p，与前端预览一致）
|
||||
font_size = _scale_title_len(font_size, output_width)
|
||||
font_color = title_config.get("font_color") or title_config.get("color") or "#ffffff"
|
||||
# 去掉 # 前缀（drawtext 用纯 hex 或颜色名）
|
||||
if font_color.startswith("#"):
|
||||
@@ -549,31 +571,31 @@ def build_title_drawtext_filter(
|
||||
border_color = "000000"
|
||||
if stroke:
|
||||
if isinstance(stroke, bool):
|
||||
border_width = 2
|
||||
border_width = _scale_title_len(2, output_width)
|
||||
border_color = "000000"
|
||||
elif isinstance(stroke, dict):
|
||||
if stroke.get("enabled", True):
|
||||
border_width = int(stroke.get("width", 2))
|
||||
border_width = _scale_title_len(int(stroke.get("width", 2)), output_width)
|
||||
border_color = (stroke.get("color") or "#000000").lstrip("#")
|
||||
elif bold:
|
||||
# 粗体模式且未配描边：黑色细描边，模拟粗体同时保证不重影
|
||||
border_width = 2
|
||||
border_width = _scale_title_len(2, output_width)
|
||||
border_color = "000000"
|
||||
if border_width > 0:
|
||||
params.append(f"borderw={border_width}")
|
||||
params.append(f"bordercolor={border_color}")
|
||||
|
||||
# 阴影（shadowcolor + shadowx/y）
|
||||
# 阴影（shadowcolor + shadowx/y）—— 同样按视频宽度缩放
|
||||
if shadow:
|
||||
if isinstance(shadow, bool):
|
||||
params.append("shadowcolor=black")
|
||||
params.append("shadowx=2")
|
||||
params.append("shadowy=2")
|
||||
params.append(f"shadowx={_scale_title_len(2, output_width)}")
|
||||
params.append(f"shadowy={_scale_title_len(2, output_width)}")
|
||||
elif isinstance(shadow, dict):
|
||||
if shadow.get("enabled", True):
|
||||
params.append(f"shadowcolor={(shadow.get('color') or '#000000').lstrip('#')}")
|
||||
params.append(f"shadowx={int(shadow.get('offset_x', 2))}")
|
||||
params.append(f"shadowy={int(shadow.get('offset_y', 2))}")
|
||||
params.append(f"shadowx={_scale_title_len(int(shadow.get('offset_x', 2)), output_width)}")
|
||||
params.append(f"shadowy={_scale_title_len(int(shadow.get('offset_y', 2)), output_width)}")
|
||||
|
||||
# ── 位置计算 ──
|
||||
# 优先使用自定义坐标 pos_x / pos_y
|
||||
@@ -600,10 +622,10 @@ def build_title_drawtext_filter(
|
||||
if position == "center":
|
||||
params.append("y=(h-text_h)/2")
|
||||
elif position == "bottom":
|
||||
params.append("y=h-text_h-50")
|
||||
params.append(f"y=h-text_h-{_scale_title_len(50, output_width)}")
|
||||
else:
|
||||
# top（默认）
|
||||
params.append("y=50")
|
||||
params.append(f"y={_scale_title_len(50, output_width)}")
|
||||
|
||||
return "drawtext=" + ":".join(params)
|
||||
|
||||
|
||||
@@ -285,20 +285,20 @@ class TestFormatAssTime:
|
||||
|
||||
class TestBuildAssContent:
|
||||
def test_no_subtitles_returns_empty(self):
|
||||
result = build_ass_content(video_width=1920, video_height=1080, video_duration=10.0)
|
||||
result = build_ass_content(video_width=720, video_height=1280, video_duration=10.0)
|
||||
assert result == ""
|
||||
|
||||
def test_title_only(self):
|
||||
result = build_ass_content(
|
||||
video_width=1920,
|
||||
video_height=1080,
|
||||
video_width=720,
|
||||
video_height=1280,
|
||||
video_duration=5.0,
|
||||
title_text="Test Title",
|
||||
)
|
||||
assert result != ""
|
||||
assert "[Script Info]" in result
|
||||
assert "PlayResX: 1920" in result
|
||||
assert "PlayResY: 1080" in result
|
||||
assert "PlayResX: 720" in result
|
||||
assert "PlayResY: 1280" in result
|
||||
assert "[V4+ Styles]" in result
|
||||
assert "[Events]" in result
|
||||
assert "TitleStyle" in result
|
||||
@@ -306,8 +306,8 @@ class TestBuildAssContent:
|
||||
|
||||
def test_subtitle_only(self):
|
||||
result = build_ass_content(
|
||||
video_width=1920,
|
||||
video_height=1080,
|
||||
video_width=720,
|
||||
video_height=1280,
|
||||
video_duration=5.0,
|
||||
subtitle_text="Hello Subtitle",
|
||||
)
|
||||
@@ -317,8 +317,8 @@ class TestBuildAssContent:
|
||||
|
||||
def test_both_title_and_subtitle(self):
|
||||
result = build_ass_content(
|
||||
video_width=1920,
|
||||
video_height=1080,
|
||||
video_width=720,
|
||||
video_height=1280,
|
||||
video_duration=5.0,
|
||||
title_text="Title",
|
||||
subtitle_text="Subtitle",
|
||||
@@ -330,8 +330,8 @@ class TestBuildAssContent:
|
||||
|
||||
def test_whitespace_title_returns_empty(self):
|
||||
result = build_ass_content(
|
||||
video_width=1920,
|
||||
video_height=1080,
|
||||
video_width=720,
|
||||
video_height=1280,
|
||||
video_duration=5.0,
|
||||
title_text=" ",
|
||||
)
|
||||
@@ -339,8 +339,8 @@ class TestBuildAssContent:
|
||||
|
||||
def test_whitespace_subtitle_returns_empty(self):
|
||||
result = build_ass_content(
|
||||
video_width=1920,
|
||||
video_height=1080,
|
||||
video_width=720,
|
||||
video_height=1280,
|
||||
video_duration=5.0,
|
||||
subtitle_text=" \n ",
|
||||
)
|
||||
@@ -348,8 +348,8 @@ class TestBuildAssContent:
|
||||
|
||||
def test_title_disabled(self):
|
||||
result = build_ass_content(
|
||||
video_width=1920,
|
||||
video_height=1080,
|
||||
video_width=720,
|
||||
video_height=1280,
|
||||
video_duration=5.0,
|
||||
title_text="Title",
|
||||
title_config={"enabled": False},
|
||||
@@ -358,8 +358,8 @@ class TestBuildAssContent:
|
||||
|
||||
def test_subtitle_disabled(self):
|
||||
result = build_ass_content(
|
||||
video_width=1920,
|
||||
video_height=1080,
|
||||
video_width=720,
|
||||
video_height=1280,
|
||||
video_duration=5.0,
|
||||
subtitle_text="Sub",
|
||||
subtitle_config={"enabled": False},
|
||||
@@ -368,8 +368,8 @@ class TestBuildAssContent:
|
||||
|
||||
def test_title_color(self):
|
||||
result = build_ass_content(
|
||||
video_width=1920,
|
||||
video_height=1080,
|
||||
video_width=720,
|
||||
video_height=1280,
|
||||
video_duration=5.0,
|
||||
title_text="T",
|
||||
title_config={"color": "#FF0000"},
|
||||
@@ -379,8 +379,8 @@ class TestBuildAssContent:
|
||||
|
||||
def test_title_position_top(self):
|
||||
result = build_ass_content(
|
||||
video_width=1920,
|
||||
video_height=1080,
|
||||
video_width=720,
|
||||
video_height=1280,
|
||||
video_duration=5.0,
|
||||
title_text="T",
|
||||
title_config={"position": "top"},
|
||||
@@ -390,8 +390,8 @@ class TestBuildAssContent:
|
||||
|
||||
def test_title_position_bottom(self):
|
||||
result = build_ass_content(
|
||||
video_width=1920,
|
||||
video_height=1080,
|
||||
video_width=720,
|
||||
video_height=1280,
|
||||
video_duration=5.0,
|
||||
title_text="T",
|
||||
title_config={"position": "bottom"},
|
||||
@@ -401,8 +401,8 @@ class TestBuildAssContent:
|
||||
|
||||
def test_subtitle_position_bottom(self):
|
||||
result = build_ass_content(
|
||||
video_width=1920,
|
||||
video_height=1080,
|
||||
video_width=720,
|
||||
video_height=1280,
|
||||
video_duration=5.0,
|
||||
subtitle_text="S",
|
||||
subtitle_config={"position": "bottom"},
|
||||
@@ -411,8 +411,8 @@ class TestBuildAssContent:
|
||||
|
||||
def test_title_font_size(self):
|
||||
result = build_ass_content(
|
||||
video_width=1920,
|
||||
video_height=1080,
|
||||
video_width=720,
|
||||
video_height=1280,
|
||||
video_duration=5.0,
|
||||
title_text="T",
|
||||
title_config={"size": 72},
|
||||
@@ -427,8 +427,8 @@ class TestBuildAssContent:
|
||||
def test_title_font_size_frontend_field_alias(self):
|
||||
"""前端传 font_size 应归一化为内部 size 字段。"""
|
||||
result = build_ass_content(
|
||||
video_width=1920,
|
||||
video_height=1080,
|
||||
video_width=720,
|
||||
video_height=1280,
|
||||
video_duration=5.0,
|
||||
title_text="T",
|
||||
title_config={"font_size": 48},
|
||||
@@ -442,8 +442,8 @@ class TestBuildAssContent:
|
||||
def test_title_font_color_frontend_field_alias(self):
|
||||
"""前端传 font_color 应归一化为内部 color 字段。"""
|
||||
result = build_ass_content(
|
||||
video_width=1920,
|
||||
video_height=1080,
|
||||
video_width=720,
|
||||
video_height=1280,
|
||||
video_duration=5.0,
|
||||
title_text="T",
|
||||
title_config={"font_color": "#FF0000"},
|
||||
@@ -454,8 +454,8 @@ class TestBuildAssContent:
|
||||
def test_title_size_takes_precedence_over_font_size(self):
|
||||
"""同时传 size 和 font_size 时，size 优先。"""
|
||||
result = build_ass_content(
|
||||
video_width=1920,
|
||||
video_height=1080,
|
||||
video_width=720,
|
||||
video_height=1280,
|
||||
video_duration=5.0,
|
||||
title_text="T",
|
||||
title_config={"size": 56, "font_size": 28},
|
||||
@@ -468,8 +468,8 @@ class TestBuildAssContent:
|
||||
|
||||
def test_title_bold(self):
|
||||
result = build_ass_content(
|
||||
video_width=1920,
|
||||
video_height=1080,
|
||||
video_width=720,
|
||||
video_height=1280,
|
||||
video_duration=5.0,
|
||||
title_text="T",
|
||||
title_config={"bold": True},
|
||||
@@ -482,8 +482,8 @@ class TestBuildAssContent:
|
||||
|
||||
def test_title_stroke_enabled(self):
|
||||
result = build_ass_content(
|
||||
video_width=1920,
|
||||
video_height=1080,
|
||||
video_width=720,
|
||||
video_height=1280,
|
||||
video_duration=5.0,
|
||||
title_text="T",
|
||||
title_config={"stroke": {"enabled": True, "width": 3, "color": "#000000"}},
|
||||
@@ -496,8 +496,8 @@ class TestBuildAssContent:
|
||||
|
||||
def test_title_stroke_disabled(self):
|
||||
result = build_ass_content(
|
||||
video_width=1920,
|
||||
video_height=1080,
|
||||
video_width=720,
|
||||
video_height=1280,
|
||||
video_duration=5.0,
|
||||
title_text="T",
|
||||
title_config={"stroke": {"enabled": False, "width": 3}},
|
||||
@@ -510,8 +510,8 @@ class TestBuildAssContent:
|
||||
|
||||
def test_title_shadow_enabled(self):
|
||||
result = build_ass_content(
|
||||
video_width=1920,
|
||||
video_height=1080,
|
||||
video_width=720,
|
||||
video_height=1280,
|
||||
video_duration=5.0,
|
||||
title_text="T",
|
||||
title_config={"shadow": {"enabled": True, "blur": 2, "offset_x": 2, "offset_y": 4}},
|
||||
@@ -524,8 +524,8 @@ class TestBuildAssContent:
|
||||
|
||||
def test_dialogue_has_correct_timing(self):
|
||||
result = build_ass_content(
|
||||
video_width=1920,
|
||||
video_height=1080,
|
||||
video_width=720,
|
||||
video_height=1280,
|
||||
video_duration=65.5,
|
||||
title_text="T",
|
||||
)
|
||||
@@ -534,8 +534,8 @@ class TestBuildAssContent:
|
||||
|
||||
def test_dialogue_starts_at_zero(self):
|
||||
result = build_ass_content(
|
||||
video_width=1920,
|
||||
video_height=1080,
|
||||
video_width=720,
|
||||
video_height=1280,
|
||||
video_duration=10.0,
|
||||
subtitle_text="S",
|
||||
)
|
||||
@@ -543,8 +543,8 @@ class TestBuildAssContent:
|
||||
|
||||
def test_contains_script_info_header(self):
|
||||
result = build_ass_content(
|
||||
video_width=1920,
|
||||
video_height=1080,
|
||||
video_width=720,
|
||||
video_height=1280,
|
||||
video_duration=10.0,
|
||||
title_text="T",
|
||||
)
|
||||
@@ -554,8 +554,8 @@ class TestBuildAssContent:
|
||||
|
||||
def test_escaped_text_in_dialogue(self):
|
||||
result = build_ass_content(
|
||||
video_width=1920,
|
||||
video_height=1080,
|
||||
video_width=720,
|
||||
video_height=1280,
|
||||
video_duration=10.0,
|
||||
title_text="line1\nline2",
|
||||
)
|
||||
|
||||
@@ -587,9 +587,10 @@ class TestFontsizeCompensation:
|
||||
assert parts[2] == "120"
|
||||
|
||||
def test_subtitle_also_compensated(self):
|
||||
# 720p 基准宽度：只做 ASS fontsize 1.35x 补偿，不做分辨率缩放
|
||||
content = build_ass_content(
|
||||
video_width=1080,
|
||||
video_height=1920,
|
||||
video_width=720,
|
||||
video_height=1280,
|
||||
video_duration=5.0,
|
||||
subtitle_text="字幕",
|
||||
subtitle_config={"size": 24},
|
||||
@@ -789,3 +790,112 @@ class TestDefaultPositionBottom:
|
||||
style_line = [line for line in content.splitlines() if line.startswith("Style: TitleStyle")][0]
|
||||
fields = [f.strip() for f in style_line.split(",")]
|
||||
assert fields[18] == "8"
|
||||
|
||||
|
||||
|
||||
class TestTitleFontsizeScaling:
|
||||
"""标题/字幕字号按 video_width/720 等比缩放（工单：标题字号校准）。
|
||||
|
||||
前端标题面板 size 语义是"px @720p"，输出到 1080p/4K 等非 720 宽度
|
||||
视频时需要等比放大所有长度类字段（字号/描边/阴影/边距），保证成片
|
||||
标题视觉大小与前端预览一致。
|
||||
"""
|
||||
|
||||
BASE_KWARGS = dict(video_duration=5.0, title_text="标题测试", subtitle_text="字幕测试")
|
||||
|
||||
def _title_fontsize(self, content: str) -> int:
|
||||
line = [ln for ln in content.splitlines() if ln.startswith("Style: TitleStyle")][0]
|
||||
return int(line.split(",")[2])
|
||||
|
||||
def _subtitle_fontsize(self, content: str) -> int:
|
||||
line = [ln for ln in content.splitlines() if ln.startswith("Style: SubtitleStyle")][0]
|
||||
return int(line.split(",")[2])
|
||||
|
||||
def test_720p_title_no_scale(self):
|
||||
"""720p 宽度时只做 1.35x ASS 补偿，不做分辨率缩放。"""
|
||||
from packages.domain.ass_subtitle_builder import ASS_FONTSIZE_COMPENSATION
|
||||
content = build_ass_content(
|
||||
video_width=720, video_height=1280, **self.BASE_KWARGS, title_config={"size": 28}
|
||||
)
|
||||
expected = round(28 * ASS_FONTSIZE_COMPENSATION) # 38
|
||||
assert self._title_fontsize(content) == expected
|
||||
|
||||
def test_1080p_title_scaled(self):
|
||||
"""1080 宽度（1080x1920 竖屏）时 size=28 → 28*1.5=42 → ASS 补偿 → round(42*1.35)=57."""
|
||||
content = build_ass_content(
|
||||
video_width=1080, video_height=1920, **self.BASE_KWARGS, title_config={"size": 28}
|
||||
)
|
||||
# 28 * 1080/720 = 42; round(42*1.35)=57
|
||||
assert self._title_fontsize(content) == 57
|
||||
|
||||
def test_1920p_title_scaled(self):
|
||||
"""1920 宽度（横屏 1920x1080）时 size=28 → 28*1920/720≈75 → round(75*1.35)=101."""
|
||||
content = build_ass_content(
|
||||
video_width=1920, video_height=1080, **self.BASE_KWARGS, title_config={"size": 28}
|
||||
)
|
||||
assert self._title_fontsize(content) == 101
|
||||
|
||||
def test_subtitle_scaled_1080p(self):
|
||||
"""字幕默认 size=24 在 1080p 下也应按比例缩放：24*1.5=36 → round(36*1.35)=49."""
|
||||
content = build_ass_content(
|
||||
video_width=1080, video_height=1920, **self.BASE_KWARGS, subtitle_config={"size": 24}
|
||||
)
|
||||
assert self._subtitle_fontsize(content) == 49
|
||||
|
||||
def test_stroke_width_scaled(self):
|
||||
"""描边宽度（Style 字段 Outline=16 索引）按同比例缩放。"""
|
||||
content = build_ass_content(
|
||||
video_width=1080,
|
||||
video_height=1920,
|
||||
**self.BASE_KWARGS,
|
||||
title_config={"size": 36, "stroke": {"enabled": True, "width": 4, "color": "#000000"}},
|
||||
)
|
||||
line = [ln for ln in content.splitlines() if ln.startswith("Style: TitleStyle")][0]
|
||||
fields = [f.strip() for f in line.split(",")]
|
||||
# Outline width 字段索引 16
|
||||
outline = float(fields[16])
|
||||
# 4 * 1.5 = 6
|
||||
assert outline == 6.0
|
||||
|
||||
def test_shadow_offset_scaled(self):
|
||||
"""阴影偏移 x/y（Shadow 字段 17 存单值；验证 style line 中无异常）。
|
||||
shadow 同时注入 \\4a/\\xshad/\\yshad 级标签，这里检查 style line。"""
|
||||
content = build_ass_content(
|
||||
video_width=1080,
|
||||
video_height=1920,
|
||||
**self.BASE_KWARGS,
|
||||
title_config={"size": 36, "shadow": {"enabled": True, "offset_x": 4, "offset_y": 4, "blur": 0}},
|
||||
)
|
||||
# 不应崩溃；检查存在 shadow 字段
|
||||
assert "TitleStyle" in content
|
||||
|
||||
def test_margins_scaled(self):
|
||||
"""MarginL/MarginR/MarginV（字段 19/20/21）按同比例缩放。"""
|
||||
content = build_ass_content(
|
||||
video_width=1080,
|
||||
video_height=1920,
|
||||
**self.BASE_KWARGS,
|
||||
title_config={"size": 36, "position": "top"},
|
||||
)
|
||||
line = [ln for ln in content.splitlines() if ln.startswith("Style: TitleStyle")][0]
|
||||
fields = [f.strip() for f in line.split(",")]
|
||||
# 默认 TITLE_MARGIN_TOP=180, TITLE_MARGIN_SIDE=40, 1080/720=1.5
|
||||
assert int(fields[19]) == 60 # margin_l = 40*1.5 = 60
|
||||
assert int(fields[20]) == 60 # margin_r = 60
|
||||
assert int(fields[21]) == 270 # margin_v = 180*1.5 = 270
|
||||
|
||||
def test_line_overrides_size_scaled(self):
|
||||
"""逐行覆盖 size 也按比例缩放（标题 line_overrides）。"""
|
||||
content = build_ass_content(
|
||||
video_width=1080,
|
||||
video_height=1920,
|
||||
video_duration=5.0,
|
||||
title_text="第一行\\N第二行",
|
||||
title_config={
|
||||
"size": 36,
|
||||
"line_overrides": [{"line_index": 0, "size": 72}],
|
||||
},
|
||||
)
|
||||
# 行 0 应注入 \\fs 标签：72 * 1.5 = 108，然后 ASS 补偿仅作用于 style fontsize，inline fs 已是 PlayRes 像素
|
||||
assert "\\fs108" in content
|
||||
|
||||
|
||||
@@ -143,7 +143,7 @@ class TestGenerateAssFromTimeline:
|
||||
generate_ass_from_timeline(
|
||||
output_path,
|
||||
timeline,
|
||||
video_width=1280,
|
||||
video_width=720,
|
||||
video_height=720,
|
||||
subtitle_config={
|
||||
"font": "微软雅黑",
|
||||
@@ -684,8 +684,8 @@ class TestGenerateAssFromTimelineMore:
|
||||
generate_ass_from_timeline(
|
||||
output,
|
||||
timeline,
|
||||
video_width=1920,
|
||||
video_height=1080,
|
||||
video_width=720,
|
||||
video_height=1280,
|
||||
subtitle_config={"size": 48},
|
||||
)
|
||||
content = output.read_text(encoding="utf-8")
|
||||
@@ -706,10 +706,10 @@ class TestGenerateAssFromTimelineMore:
|
||||
)
|
||||
with tempfile.TemporaryDirectory() as tmpdir:
|
||||
output = Path(tmpdir) / "720p.ass"
|
||||
generate_ass_from_timeline(output, timeline, video_width=1280, video_height=720)
|
||||
generate_ass_from_timeline(output, timeline, video_width=720, video_height=1280)
|
||||
content = output.read_text(encoding="utf-8")
|
||||
assert "PlayResX: 1280" in content
|
||||
assert "PlayResY: 720" in content
|
||||
assert "PlayResX: 720" in content
|
||||
assert "PlayResY: 1280" in content
|
||||
|
||||
def test_special_characters_in_text(self):
|
||||
"""字幕文本含特殊字符（花括号、换行）"""
|
||||
|
||||
@@ -31,7 +31,7 @@ class TestFontSize:
|
||||
title_text="测试标题",
|
||||
title_config=config,
|
||||
)
|
||||
assert ",49," in content, f"默认字号36应补偿为49(36*1.35)，实际内容: {content}"
|
||||
assert ",73," in content, f"默认字号36应缩放+补偿为73(36*1.5*1.35)，实际内容: {content}"
|
||||
|
||||
def test_size_32_preserved(self):
|
||||
"""size=32 应原样使用。"""
|
||||
@@ -43,7 +43,7 @@ class TestFontSize:
|
||||
title_text="测试标题",
|
||||
title_config=config,
|
||||
)
|
||||
assert ",43," in content # 32*1.35=43
|
||||
assert ",65," in content # 32*1.5*1.35=65
|
||||
|
||||
def test_size_60_preserved(self):
|
||||
"""size=60 应原样保留（字号上限已移除）。"""
|
||||
@@ -58,7 +58,7 @@ class TestFontSize:
|
||||
style_line = [line for line in content.splitlines() if line.startswith("Style: TitleStyle")][0]
|
||||
fields = [f.strip() for f in style_line.split(",")]
|
||||
font_size = int(fields[2])
|
||||
assert font_size == 81, f"字号60应补偿为81(60*1.35), 实际={font_size}"
|
||||
assert font_size == 122, f"字号60应缩放+补偿为122(60*1.5*1.35), 实际={font_size}"
|
||||
|
||||
def test_font_size_alias_normalized(self):
|
||||
"""前端传 font_size 应归一化为 size。"""
|
||||
@@ -72,7 +72,7 @@ class TestFontSize:
|
||||
)
|
||||
style_line = [line for line in content.splitlines() if line.startswith("Style: TitleStyle")][0]
|
||||
fields = [f.strip() for f in style_line.split(",")]
|
||||
assert fields[2] == "70", f"font_size=52 应补偿为70(52*1.35), 实际={fields[2]}"
|
||||
assert fields[2] == "105", f"font_size=52 应缩放+补偿为105(52*1.5*1.35), 实际={fields[2]}"
|
||||
|
||||
def test_font_color_alias_normalized(self):
|
||||
"""前端传 font_color 应归一化为 color。"""
|
||||
@@ -97,7 +97,7 @@ class TestFontSize:
|
||||
title_text="测试标题",
|
||||
title_config=config,
|
||||
)
|
||||
assert ",32," in content # 24*1.35=32.4→32
|
||||
assert ",49," in content # 24*1.5*1.35=49.4→32
|
||||
|
||||
|
||||
class TestBooleanStrokeNormalization:
|
||||
@@ -117,7 +117,7 @@ class TestBooleanStrokeNormalization:
|
||||
style_line = [line for line in content.splitlines() if line.startswith("Style: TitleStyle")][0]
|
||||
fields = [f.strip() for f in style_line.split(",")]
|
||||
outline_width = float(fields[16])
|
||||
assert outline_width == 2.0, f"stroke=true 应产生 outline_width=2, 实际={outline_width}"
|
||||
assert outline_width == 3.0, f"stroke=true 应产生 outline_width=3(2*1.5 scale), 实际={outline_width}"
|
||||
|
||||
def test_stroke_false_no_outline(self):
|
||||
"""stroke=false 应生成 outline_width=0 的样式。"""
|
||||
@@ -147,7 +147,7 @@ class TestBooleanStrokeNormalization:
|
||||
style_line = [line for line in content.splitlines() if line.startswith("Style: TitleStyle")][0]
|
||||
fields = [f.strip() for f in style_line.split(",")]
|
||||
outline_width = float(fields[16])
|
||||
assert outline_width == 3.0, f"自定义stroke width=3 应保留, 实际={outline_width}"
|
||||
assert outline_width == 4.5, f"自定义stroke width=3 @1080p 应缩放为4.5(3*1.5), 实际={outline_width}"
|
||||
|
||||
|
||||
class TestBooleanShadowNormalization:
|
||||
@@ -167,7 +167,7 @@ class TestBooleanShadowNormalization:
|
||||
fields = [f.strip() for f in style_line.split(",")]
|
||||
# Shadow 字段是第18个（索引17）
|
||||
shadow_depth = int(fields[17])
|
||||
assert shadow_depth == 2, f"shadow=true 应产生 shadow_depth=2, 实际={shadow_depth}"
|
||||
assert shadow_depth == 3, f"shadow=true @1080p 应产生 shadow_depth=3(2*1.5), 实际={shadow_depth}"
|
||||
|
||||
def test_shadow_false_no_shadow(self):
|
||||
"""shadow=false 应生成 shadow_depth=0 的样式。"""
|
||||
@@ -197,7 +197,7 @@ class TestBooleanShadowNormalization:
|
||||
style_line = [line for line in content.splitlines() if line.startswith("Style: TitleStyle")][0]
|
||||
fields = [f.strip() for f in style_line.split(",")]
|
||||
shadow_depth = int(fields[17])
|
||||
assert shadow_depth == 3, f"自定义shadow offset_y=3 应保留, 实际={shadow_depth}"
|
||||
assert shadow_depth == 4, f"自定义shadow offset_y=3 @1080p 应缩放为4(3*1.5), 实际={shadow_depth}"
|
||||
|
||||
|
||||
class TestFullStyleConsistency:
|
||||
@@ -231,14 +231,14 @@ class TestFullStyleConsistency:
|
||||
|
||||
# Fontname
|
||||
assert fields[1] == "Noto Sans SC"
|
||||
# Fontsize = 28*1.35=37.8→38
|
||||
assert fields[2] == "38"
|
||||
# Fontsize = 28*1.5*1.35=56.7→57
|
||||
assert fields[2] == "57" # 28*1.5*1.35=57
|
||||
# Bold = -1 (True)
|
||||
assert fields[7] == "-1"
|
||||
# Outline width = 2 (前端默认 stroke width)
|
||||
assert float(fields[16]) == 2.0
|
||||
# Shadow depth = 2 (offset_y)
|
||||
assert int(fields[17]) == 2
|
||||
# Outline width = 2*1.5=3.0 @1080p (前端默认 stroke width 经缩放)
|
||||
assert float(fields[16]) == 3.0
|
||||
# Shadow depth = 2*1.5=3 @1080p (offset_y 经缩放)
|
||||
assert int(fields[17]) == 3
|
||||
# Alignment = 8 (top)
|
||||
assert int(fields[18]) == 8
|
||||
|
||||
|
||||
@@ -944,7 +944,7 @@ class TestDrawtextFontFileIncluded(unittest.TestCase):
|
||||
@patch("packages.domain.video_filter_builder._resolve_font_path")
|
||||
def test_fontfile_in_output(self, mock_font):
|
||||
mock_font.return_value = "/usr/share/fonts/opentype/noto/NotoSansCJK-Regular.ttc"
|
||||
result = build_title_drawtext_filter({"text": "标题"})
|
||||
result = build_title_drawtext_filter({"text": "标题"}, output_width=720)
|
||||
self.assertIsNotNone(result)
|
||||
self.assertIn("fontfile=", result)
|
||||
self.assertIn("NotoSansCJK", result)
|
||||
@@ -952,7 +952,7 @@ class TestDrawtextFontFileIncluded(unittest.TestCase):
|
||||
@patch("packages.domain.video_filter_builder._resolve_font_path")
|
||||
def test_fontfile_escaped(self, mock_font):
|
||||
mock_font.return_value = "/path/with:special'chars.ttf"
|
||||
result = build_title_drawtext_filter({"text": "标题"})
|
||||
result = build_title_drawtext_filter({"text": "标题"}, output_width=720)
|
||||
self.assertIsNotNone(result)
|
||||
self.assertIn("fontfile=", result)
|
||||
|
||||
@@ -963,7 +963,7 @@ class TestDrawtextFontFileNotIncluded(unittest.TestCase):
|
||||
@patch("packages.domain.video_filter_builder._resolve_font_path")
|
||||
def test_no_fontfile(self, mock_font):
|
||||
mock_font.return_value = ""
|
||||
result = build_title_drawtext_filter({"text": "标题"})
|
||||
result = build_title_drawtext_filter({"text": "标题"}, output_width=720)
|
||||
self.assertIsNotNone(result)
|
||||
self.assertNotIn("fontfile=", result)
|
||||
|
||||
@@ -972,14 +972,14 @@ class TestDrawtextStrokeBranches(unittest.TestCase):
|
||||
"""stroke 各分支覆盖。"""
|
||||
|
||||
def test_stroke_non_bool_non_dict(self):
|
||||
result = build_title_drawtext_filter({"text": "标题", "stroke": "yes"})
|
||||
result = build_title_drawtext_filter({"text": "标题", "stroke": "yes"}, output_width=720)
|
||||
self.assertIsNotNone(result)
|
||||
self.assertNotIn("borderw", result)
|
||||
|
||||
@patch("packages.domain.video_filter_builder._resolve_font_path")
|
||||
def test_stroke_dict_default_color(self, mock_font):
|
||||
mock_font.return_value = ""
|
||||
result = build_title_drawtext_filter({"text": "标题", "stroke": {"width": 4}})
|
||||
result = build_title_drawtext_filter({"text": "标题", "stroke": {"width": 4}}, output_width=720)
|
||||
self.assertIsNotNone(result)
|
||||
self.assertIn("borderw=4", result)
|
||||
self.assertIn("bordercolor=000000", result)
|
||||
@@ -987,14 +987,14 @@ class TestDrawtextStrokeBranches(unittest.TestCase):
|
||||
@patch("packages.domain.video_filter_builder._resolve_font_path")
|
||||
def test_stroke_dict_enabled_false(self, mock_font):
|
||||
mock_font.return_value = ""
|
||||
result = build_title_drawtext_filter({"text": "标题", "stroke": {"enabled": False, "width": 5}})
|
||||
result = build_title_drawtext_filter({"text": "标题", "stroke": {"enabled": False, "width": 5}}, output_width=720)
|
||||
self.assertIsNotNone(result)
|
||||
self.assertNotIn("borderw", result)
|
||||
|
||||
@patch("packages.domain.video_filter_builder._resolve_font_path")
|
||||
def test_stroke_dict_custom_color(self, mock_font):
|
||||
mock_font.return_value = ""
|
||||
result = build_title_drawtext_filter({"text": "标题", "stroke": {"width": 2, "color": "#ff0000"}})
|
||||
result = build_title_drawtext_filter({"text": "标题", "stroke": {"width": 2, "color": "#ff0000"}}, output_width=720)
|
||||
self.assertIsNotNone(result)
|
||||
self.assertIn("bordercolor=ff0000", result)
|
||||
|
||||
@@ -1005,7 +1005,7 @@ class TestDrawtextShadowBranches(unittest.TestCase):
|
||||
@patch("packages.domain.video_filter_builder._resolve_font_path")
|
||||
def test_shadow_dict_default_color(self, mock_font):
|
||||
mock_font.return_value = ""
|
||||
result = build_title_drawtext_filter({"text": "标题", "shadow": {"offset_x": 5, "offset_y": 5}})
|
||||
result = build_title_drawtext_filter({"text": "标题", "shadow": {"offset_x": 5, "offset_y": 5}}, output_width=720)
|
||||
self.assertIsNotNone(result)
|
||||
self.assertIn("shadowcolor=000000", result)
|
||||
self.assertIn("shadowx=5", result)
|
||||
@@ -1014,7 +1014,7 @@ class TestDrawtextShadowBranches(unittest.TestCase):
|
||||
@patch("packages.domain.video_filter_builder._resolve_font_path")
|
||||
def test_shadow_dict_disabled(self, mock_font):
|
||||
mock_font.return_value = ""
|
||||
result = build_title_drawtext_filter({"text": "标题", "shadow": {"enabled": False}})
|
||||
result = build_title_drawtext_filter({"text": "标题", "shadow": {"enabled": False}}, output_width=720)
|
||||
self.assertIsNotNone(result)
|
||||
self.assertNotIn("shadowcolor", result)
|
||||
|
||||
@@ -1022,7 +1022,8 @@ class TestDrawtextShadowBranches(unittest.TestCase):
|
||||
def test_shadow_dict_custom_color(self, mock_font):
|
||||
mock_font.return_value = ""
|
||||
result = build_title_drawtext_filter(
|
||||
{"text": "标题", "shadow": {"color": "#555555", "offset_x": 1, "offset_y": 1}}
|
||||
{"text": "标题", "shadow": {"color": "#555555", "offset_x": 1, "offset_y": 1}},
|
||||
output_width=720,
|
||||
)
|
||||
self.assertIsNotNone(result)
|
||||
self.assertIn("shadowcolor=555555", result)
|
||||
@@ -1030,13 +1031,13 @@ class TestDrawtextShadowBranches(unittest.TestCase):
|
||||
|
||||
class TestDrawtextBoldFalse(unittest.TestCase):
|
||||
def test_bold_false(self):
|
||||
result = build_title_drawtext_filter({"text": "标题", "bold": False})
|
||||
result = build_title_drawtext_filter({"text": "标题", "bold": False}, output_width=720)
|
||||
self.assertIsNotNone(result)
|
||||
self.assertNotIn("font=bold", result)
|
||||
|
||||
def test_bold_true_does_not_use_font_bold_param(self):
|
||||
"""粗体模式不得使用 `font=bold`——该参数无效，会导致 filter_complex 解析失败（exit 234）。"""
|
||||
result = build_title_drawtext_filter({"text": "标题", "bold": True})
|
||||
result = build_title_drawtext_filter({"text": "标题", "bold": True}, output_width=720)
|
||||
self.assertIsNotNone(result)
|
||||
self.assertNotIn("font=bold", result)
|
||||
# 粗体应通过 borderw 实现
|
||||
@@ -1047,7 +1048,7 @@ class TestDrawtextBoldFalse(unittest.TestCase):
|
||||
"""默认 bold=true 且无 Bold 字体文件时，使用黑色细描边（borderw=2 + 黑），
|
||||
不得使用与文字同色的 borderw>=3（否则会造成竖屏小字号重影）。"""
|
||||
mock_font.return_value = "" # 无粗体字体
|
||||
result = build_title_drawtext_filter({"text": "标题"})
|
||||
result = build_title_drawtext_filter({"text": "标题"}, output_width=720)
|
||||
self.assertIsNotNone(result)
|
||||
self.assertIn("borderw=2", result)
|
||||
# 黑描边：要么是 black 关键字，要么是 000000
|
||||
@@ -1059,7 +1060,8 @@ class TestDrawtextBoldFalse(unittest.TestCase):
|
||||
"""用户显式开启 stroke 时，stroke 颜色/宽度优先于默认粗体黑边。"""
|
||||
mock_font.return_value = ""
|
||||
result = build_title_drawtext_filter(
|
||||
{"text": "标题", "bold": True, "stroke": {"width": 4, "color": "#ffffff"}}
|
||||
{"text": "标题", "bold": True, "stroke": {"width": 4, "color": "#ffffff"}},
|
||||
output_width=720,
|
||||
)
|
||||
self.assertIsNotNone(result)
|
||||
self.assertIn("borderw=4", result)
|
||||
@@ -1072,21 +1074,21 @@ class TestDrawtextPositionBranches(unittest.TestCase):
|
||||
@patch("packages.domain.video_filter_builder._resolve_font_path")
|
||||
def test_position_top_explicit(self, mock_font):
|
||||
mock_font.return_value = ""
|
||||
result = build_title_drawtext_filter({"text": "标题", "position": "top"})
|
||||
result = build_title_drawtext_filter({"text": "标题", "position": "top"}, output_width=720)
|
||||
self.assertIsNotNone(result)
|
||||
self.assertIn("y=50", result)
|
||||
|
||||
@patch("packages.domain.video_filter_builder._resolve_font_path")
|
||||
def test_position_center_explicit(self, mock_font):
|
||||
mock_font.return_value = ""
|
||||
result = build_title_drawtext_filter({"text": "标题", "position": "center"})
|
||||
result = build_title_drawtext_filter({"text": "标题", "position": "center"}, output_width=720)
|
||||
self.assertIsNotNone(result)
|
||||
self.assertIn("y=(h-text_h)/2", result)
|
||||
|
||||
@patch("packages.domain.video_filter_builder._resolve_font_path")
|
||||
def test_position_bottom_explicit(self, mock_font):
|
||||
mock_font.return_value = ""
|
||||
result = build_title_drawtext_filter({"text": "标题", "position": "bottom"})
|
||||
result = build_title_drawtext_filter({"text": "标题", "position": "bottom"}, output_width=720)
|
||||
self.assertIsNotNone(result)
|
||||
self.assertIn("y=h-text_h-50", result)
|
||||
|
||||
@@ -1095,7 +1097,7 @@ class TestDrawtextPositionBranches(unittest.TestCase):
|
||||
"""自定义位置：百分比坐标转换为 drawtext 表达式."""
|
||||
mock_font.return_value = ""
|
||||
# pos_x=50, pos_y=30 → x=(w-text_w)*0.5000, y=(h-text_h)*0.3000
|
||||
result = build_title_drawtext_filter({"text": "标题", "position": "custom", "pos_x": 50, "pos_y": 30})
|
||||
result = build_title_drawtext_filter({"text": "标题", "position": "custom", "pos_x": 50, "pos_y": 30}, output_width=720)
|
||||
self.assertIsNotNone(result)
|
||||
self.assertIn("x=(w-text_w)*0.5000", result)
|
||||
self.assertIn("y=(h-text_h)*0.3000", result)
|
||||
@@ -1104,7 +1106,7 @@ class TestDrawtextPositionBranches(unittest.TestCase):
|
||||
def test_position_custom_clamped_to_100(self, mock_font):
|
||||
"""自定义位置：超过100的坐标被截断到100%."""
|
||||
mock_font.return_value = ""
|
||||
result = build_title_drawtext_filter({"text": "标题", "position": "custom", "pos_x": 100.7, "pos_y": 200.3})
|
||||
result = build_title_drawtext_filter({"text": "标题", "position": "custom", "pos_x": 100.7, "pos_y": 200.3}, output_width=720)
|
||||
self.assertIsNotNone(result)
|
||||
self.assertIn("x=(w-text_w)*1.0000", result)
|
||||
self.assertIn("y=(h-text_h)*1.0000", result)
|
||||
@@ -1112,7 +1114,7 @@ class TestDrawtextPositionBranches(unittest.TestCase):
|
||||
@patch("packages.domain.video_filter_builder._resolve_font_path")
|
||||
def test_position_custom_bool_coords_fallback(self, mock_font):
|
||||
mock_font.return_value = ""
|
||||
result = build_title_drawtext_filter({"text": "标题", "position": "custom", "pos_x": True, "pos_y": True})
|
||||
result = build_title_drawtext_filter({"text": "标题", "position": "custom", "pos_x": True, "pos_y": True}, output_width=720)
|
||||
self.assertIsNotNone(result)
|
||||
self.assertIn("x=(w-text_w)/2", result)
|
||||
self.assertIn("y=50", result)
|
||||
@@ -1120,7 +1122,7 @@ class TestDrawtextPositionBranches(unittest.TestCase):
|
||||
|
||||
class TestDrawtextColorNoHash(unittest.TestCase):
|
||||
def test_color_without_hash(self):
|
||||
result = build_title_drawtext_filter({"text": "标题", "font_color": "red"})
|
||||
result = build_title_drawtext_filter({"text": "标题", "font_color": "red"}, output_width=720)
|
||||
self.assertIsNotNone(result)
|
||||
self.assertIn("fontcolor=red", result)
|
||||
|
||||
@@ -1131,27 +1133,27 @@ class TestDrawtextFieldNormalization(unittest.TestCase):
|
||||
@patch("packages.domain.video_filter_builder._resolve_font_path")
|
||||
def test_content_fallback(self, mock_font):
|
||||
mock_font.return_value = ""
|
||||
result = build_title_drawtext_filter({"content": "备用标题"})
|
||||
result = build_title_drawtext_filter({"content": "备用标题"}, output_width=720)
|
||||
self.assertIsNotNone(result)
|
||||
self.assertIn("备用标题", result)
|
||||
|
||||
@patch("packages.domain.video_filter_builder._resolve_font_path")
|
||||
def test_font_preset_fallback(self, mock_font):
|
||||
mock_font.return_value = ""
|
||||
result = build_title_drawtext_filter({"text": "标题", "font_preset": "楷体"})
|
||||
result = build_title_drawtext_filter({"text": "标题", "font_preset": "楷体"}, output_width=720)
|
||||
self.assertIsNotNone(result)
|
||||
|
||||
@patch("packages.domain.video_filter_builder._resolve_font_path")
|
||||
def test_size_fallback(self, mock_font):
|
||||
mock_font.return_value = ""
|
||||
result = build_title_drawtext_filter({"text": "标题", "size": 72})
|
||||
result = build_title_drawtext_filter({"text": "标题", "size": 72}, output_width=720)
|
||||
self.assertIsNotNone(result)
|
||||
self.assertIn("fontsize=72", result)
|
||||
|
||||
@patch("packages.domain.video_filter_builder._resolve_font_path")
|
||||
def test_color_fallback(self, mock_font):
|
||||
mock_font.return_value = ""
|
||||
result = build_title_drawtext_filter({"text": "标题", "color": "#abcdef"})
|
||||
result = build_title_drawtext_filter({"text": "标题", "color": "#abcdef"}, output_width=720)
|
||||
self.assertIsNotNone(result)
|
||||
self.assertIn("fontcolor=abcdef", result)
|
||||
|
||||
@@ -1256,5 +1258,79 @@ class TestTitleOverlay(unittest.TestCase):
|
||||
)
|
||||
|
||||
|
||||
|
||||
|
||||
class TestDrawtextFontsizeScaling(unittest.TestCase):
|
||||
"""字号/描边/阴影/边距按 video_width/720 等比缩放（工单：标题字号校准）。
|
||||
|
||||
前端标题面板的 size 语义是"px @720p"（见 web/src/pages/generate/types.ts 注释、
|
||||
apps/web/src/pages/ai-avatar/utils/titleCanvas.ts scale=videoWidth/720）。
|
||||
输出视频宽度不是 720 时（如 1080x1920 竖屏、1920x1080 横屏），
|
||||
drawtext 降级路径需等比缩放所有长度类字段，保证成片标题视觉大小与预览一致。
|
||||
"""
|
||||
|
||||
@patch("packages.domain.video_filter_builder._resolve_font_path")
|
||||
def test_720p_no_scaling(self, mock_font):
|
||||
"""720p 宽度时 fontsize 保持原值。"""
|
||||
mock_font.return_value = ""
|
||||
r = build_title_drawtext_filter({"text": "标题", "size": 28}, output_width=720)
|
||||
self.assertIn("fontsize=28", r)
|
||||
|
||||
@patch("packages.domain.video_filter_builder._resolve_font_path")
|
||||
def test_1080p_scales_1_5x(self, mock_font):
|
||||
"""1080 宽度（1080x1920 竖屏）时 size=28 → 42。"""
|
||||
mock_font.return_value = ""
|
||||
r = build_title_drawtext_filter({"text": "标题", "size": 28}, output_width=1080)
|
||||
self.assertIn("fontsize=42", r)
|
||||
|
||||
@patch("packages.domain.video_filter_builder._resolve_font_path")
|
||||
def test_1920p_scales_2_67x(self, mock_font):
|
||||
"""1920 宽度（横屏 1920x1080）时 size=28 → 75（四舍五入）。"""
|
||||
mock_font.return_value = ""
|
||||
r = build_title_drawtext_filter({"text": "标题", "size": 28}, output_width=1920)
|
||||
self.assertIn("fontsize=75", r)
|
||||
|
||||
@patch("packages.domain.video_filter_builder._resolve_font_path")
|
||||
def test_stroke_width_scaled(self, mock_font):
|
||||
"""描边宽度按同比例缩放。"""
|
||||
mock_font.return_value = ""
|
||||
r = build_title_drawtext_filter(
|
||||
{"text": "标题", "stroke": {"width": 4, "color": "#ff0000"}},
|
||||
output_width=1080,
|
||||
)
|
||||
# 4 * 1080/720 = 6
|
||||
self.assertIn("borderw=6", r)
|
||||
self.assertIn("bordercolor=ff0000", r)
|
||||
|
||||
@patch("packages.domain.video_filter_builder._resolve_font_path")
|
||||
def test_shadow_offset_scaled(self, mock_font):
|
||||
"""阴影偏移按同比例缩放。"""
|
||||
mock_font.return_value = ""
|
||||
r = build_title_drawtext_filter(
|
||||
{"text": "标题", "shadow": {"offset_x": 5, "offset_y": 5}},
|
||||
output_width=1080,
|
||||
)
|
||||
# 5 * 1.5 = 7.5 → 8
|
||||
self.assertIn("shadowx=8", r)
|
||||
self.assertIn("shadowy=8", r)
|
||||
|
||||
@patch("packages.domain.video_filter_builder._resolve_font_path")
|
||||
def test_position_offsets_scaled(self, mock_font):
|
||||
"""top/bottom 距边缘的 50px 边距也按比例缩放。"""
|
||||
mock_font.return_value = ""
|
||||
r_top = build_title_drawtext_filter({"text": "标题", "position": "top"}, output_width=1080)
|
||||
self.assertIn("y=75", r_top) # 50 * 1.5 = 75
|
||||
r_bot = build_title_drawtext_filter({"text": "标题", "position": "bottom"}, output_width=1080)
|
||||
self.assertIn("y=h-text_h-75", r_bot)
|
||||
|
||||
@patch("packages.domain.video_filter_builder._resolve_font_path")
|
||||
def test_bold_stroke_scaled(self, mock_font):
|
||||
"""粗体黑色描边默认宽度 2 也需缩放。"""
|
||||
mock_font.return_value = ""
|
||||
r = build_title_drawtext_filter({"text": "标题", "bold": True}, output_width=1080)
|
||||
# bold 默认 border_width=2 → 2*1.5=3
|
||||
self.assertIn("borderw=3", r)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
unittest.main()
|
||||
|
||||
Reference in New Issue
Block a user