azmat1127/yingqing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善视频提炼和视频复刻完善提交测试

Browse Source
This commit is contained in:
Azmat@qq.com
2026-08-28 10:15:15 +08:00
parent 52c5cdae1d
commit 849b14a0f6
33 changed files with 1475 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/frontend/src/video-replace-page.css
+152 -40
View File
@@ -213,24 +213,104 @@
color: #42506a;
background: rgba(0, 47, 167, 0.04);
text-align: center;
cursor: pointer;
transition: border-color 160ms ease, background 160ms ease;
}
.vrep-page .video-upload-field:hover,
.vrep-page .video-upload-field.has-file {
.vrep-page .video-upload-field.has-file,
.vrep-page .video-upload-field.is-dragover {
border-color: var(--klein);
background: rgba(0, 47, 167, 0.075);
}
.vrep-page .video-upload-field > span {
/* 拖拽悬停:实线 + 略深底,和「已选好」区分开 */
.vrep-page .video-upload-field.is-dragover {
border-style: solid;
background: rgba(0, 47, 167, 0.11);
}
/* 已有预览时容器让位给视频本身 */
.vrep-page .video-upload-field.has-preview {
min-height: 0;
padding: 12px;
border-style: solid;
place-items: stretch;
text-align: left;
}
.vrep-page .video-upload-trigger {
display: grid;
place-items: center;
gap: 8px;
min-width: 0;
width: 100%;
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
text-align: center;
cursor: pointer;
}
.vrep-page .video-upload-field svg {
.vrep-page .video-upload-trigger:disabled { cursor: default; opacity: .6; }
.vrep-page .video-upload-preview {
display: grid;
grid-template-columns: minmax(0, 132px) minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
width: 100%;
min-width: 0;
}
.vrep-page .video-upload-preview video {
width: 100%;
aspect-ratio: 9 / 16;
max-height: 168px;
border-radius: 8px;
background: #0f1728;
object-fit: contain;
}
.vrep-page .video-upload-preview-meta {
display: grid;
gap: 4px;
min-width: 0;
}
.vrep-page .video-upload-change {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 13px;
border: 1px solid rgba(0, 47, 167, 0.3);
border-radius: 8px;
background: transparent;
color: var(--klein);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 160ms ease, border-color 160ms ease;
}
.vrep-page .video-upload-change:hover:not(:disabled) {
border-color: var(--klein);
background: rgba(0, 47, 167, 0.075);
}
.vrep-page .video-upload-change:disabled { opacity: .5; cursor: default; }
.vrep-page .video-upload-change svg { width: 15px; height: 15px; }
@media (max-width: 720px) {
.vrep-page .video-upload-preview {
grid-template-columns: minmax(0, 96px) minmax(0, 1fr);
}
.vrep-page .video-upload-change { grid-column: 1 / -1; justify-content: center; }
}
/* 只给空态大图标撑到 28px:更换按钮里的小图标不能被这条盖掉 */
.vrep-page .video-upload-trigger > svg {
width: 28px;
height: 28px;
color: var(--klein);
@@ -251,6 +331,63 @@
font-size: 12px;
}
/* 临时上传商品图:拖拽悬停沿用「已选中」的蓝框,再压一层底色区分 */
.vrep-page .replace-temporary-method.is-dragover {
border-color: var(--klein);
background: rgba(0, 47, 167, 0.11);
}
/* 进页面先确认后端有没有在跑的任务。确认完之前不给看空表单,也不让提交 ——
否则用户以为没任务,又传一遍,重复扣费。 */
/* 面板是 flex column,不给 flex:1 + min-height 就会顶在最上面、下面留一大块空 */
.vrep-page .replace-restoring-state {
min-height: 470px;
flex: 1;
display: none;
place-items: center;
text-align: center;
}
/* 读取任务状态期间左侧整块不可操作:只锁提交按钮不够,用户照样能点/拖上传 */
.vrep-page .replace-flow-panel.is-locked,
.vrep-page .video-flow-panel.is-locked {
pointer-events: none;
opacity: 0.55;
filter: saturate(0.85);
transition: opacity 160ms ease;
}
.vrep-page .replace-result-panel.is-restoring .replace-restoring-state { display: grid; }
.vrep-page .replace-result-panel.is-restoring .video-result-placeholder,
.vrep-page .replace-result-panel.is-restoring .replace-generating-state,
.vrep-page .replace-result-panel.is-restoring .video-analysis-result { display: none; }
.vrep-page .replace-restoring-content {
display: grid;
justify-items: center;
gap: 10px;
width: min(280px, 100%);
}
.vrep-page .replace-restoring-content strong { color: var(--text); font-size: 16px; font-weight: 600; }
.vrep-page .replace-restoring-content span:not(.replace-restoring-spinner) {
color: var(--muted);
font-size: 12px;
line-height: 1.55;
}
.vrep-page .replace-restoring-spinner {
width: 26px;
height: 26px;
border-radius: 50%;
border: 2px solid rgba(0, 47, 167, 0.16);
border-top-color: var(--klein);
animation: replace-restoring-spin 0.8s linear infinite;
}
@keyframes replace-restoring-spin { to { transform: rotate(360deg); } }
.vrep-page .video-flow-actions {
display: flex;
align-items: center;
@@ -347,48 +484,23 @@
transition: border-color 170ms ease, background-color 170ms ease, box-shadow 170ms ease, transform 170ms ease;
}
.vrep-page .replace-product-method::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
opacity: 0;
pointer-events: none;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.08));
transition: opacity 180ms ease;
/* 选中商品后不再整块铺商品图:图一花文字就读不了,active 的蓝底也被盖没。
改成图标位直接放缩略图,文字保持全对比度。 */
.vrep-page .replace-product-method-background { display: none; }
.vrep-page .replace-product-method.has-product-preview .replace-product-method-icon {
padding: 0;
overflow: hidden;
border-color: rgba(0, 47, 167, 0.22);
background: #f1f5ff;
}
.vrep-page .replace-product-method.has-product-preview::after {
opacity: 1;
}
.vrep-page .replace-product-method > :not(.replace-product-method-background) {
position: relative;
z-index: 2;
}
.vrep-page .replace-product-method-background {
position: absolute;
inset: 0;
z-index: 0;
.vrep-page .replace-product-method-icon img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
opacity: 0;
pointer-events: none;
transition: opacity 180ms ease;
}
.vrep-page .replace-product-method.has-product-preview .replace-product-method-background {
opacity: 0.5;
}
.vrep-page .replace-product-method.has-product-preview .replace-product-method-copy {
padding: 8px 10px;
border-radius: 9px;
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(5px);
border-radius: inherit;
}
.vrep-page .replace-product-method:hover {