优化脚本

2026-08-21 10:28:35 +08:00
parent 6c588a7fee
commit c2d3a786a3
23 changed files with 1461 additions and 287 deletions
@@ -7,17 +7,14 @@
  width: 100%;
  max-width: none;
  box-sizing: border-box;
-  margin: -24px -28px -60px;
+  margin: 0;
  padding: 28px clamp(40px, 3.2vw, 68px) 32px;
-  height: calc(100vh - 116px);
+  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
 }
-@media (max-width: 1100px) {
-  .pipeline-page { margin: -28px -24px -48px; }
-}

 .pipeline-page .pl-head {
  min-height: 54px;
@@ -1223,9 +1220,10 @@
    overflow: hidden;
    display: flex;
    flex-direction: column;
-    border: 1px solid var(--border-faint);
+    border: 1px solid rgba(0, 47, 167, 0.13);
    border-radius: 12px;
    background: var(--surface);
+    box-shadow: 0 12px 28px rgba(20, 27, 38, 0.07);
    cursor: pointer;
  }
  .video-card:hover { border-color: rgba(0, 47, 167, 0.28); }
@@ -1235,7 +1233,55 @@
    aspect-ratio: 9 / 16;
    max-height: 280px;
    overflow: hidden;
-    background: #e5e6e9;
+    background: #fff;
+  }
+  .video-thumb.pending::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background-color: #fff;
+    background-image:
+      radial-gradient(ellipse 4px 1px at center, rgba(0, 47, 167, 0.28) 98%, transparent),
+      radial-gradient(ellipse 1px 4px at center, rgba(0, 47, 167, 0.28) 98%, transparent);
+    background-position: center;
+    background-size: 10px 10px;
+    -webkit-mask-image: radial-gradient(ellipse 42% 28% at center, #000 0 18%, rgba(0, 0, 0, 0.78) 40%, rgba(0, 0, 0, 0.24) 72%, transparent 100%);
+    mask-image: radial-gradient(ellipse 42% 28% at center, #000 0 18%, rgba(0, 0, 0, 0.78) 40%, rgba(0, 0, 0, 0.24) 72%, transparent 100%);
+  }
+  .video-thumb.pending::after,
+  .video-thumb.generating::after {
+    content: "待生成";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 2;
+    pointer-events: none;
+    min-width: 72px;
+    height: 32px;
+    display: grid;
+    place-items: center;
+    padding: 0 14px;
+    border: 1px solid rgba(0, 47, 167, 0.26);
+    border-radius: 8px;
+    color: var(--klein);
+    background: #fff;
+    box-shadow: 0 8px 22px rgba(0, 47, 167, 0.11);
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    transform: translate(-50%, -50%);
+  }
+  .video-thumb.generating::after { content: "生成中"; }
+  .video-thumb .video-loader {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    overflow: hidden;
+    background:
+      linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.88) 43%, transparent 66%) 0 0 / 220% 100%,
+      linear-gradient(145deg, #eaf1fb, #f8fbff 48%, #e9eef7);
+    animation: videoShimmer 2.2s linear infinite;
  }
  .video-thumb video {
    position: absolute;
@@ -1531,8 +1577,265 @@
  .vd-history-thumb.tri .placeholder { aspect-ratio: 16/9; }
 }

+/* 弹窗 portal 到 body,选择器必须顶层,否则会被工作区 overflow 裁掉顶栏 */
+.asset-modal-bg {
+  --klein: #002fa7;
+  position: fixed;
+  inset: 0;
+  z-index: 1800;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 24px;
+  background: rgba(21, 20, 15, 0.42);
+}
+.asset-modal {
+  background: var(--surface);
+  border: 1px solid var(--border-faint);
+  border-radius: 12px;
+  width: min(960px, 100%);
+  max-height: calc(100vh - 48px);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
+}
+.asset-modal-h {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 56px;
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--border-faint);
+  flex-shrink: 0;
+}
+.asset-modal-h h2 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--accent-black);
+}
+.asset-modal-h .ad-tag,
+.asset-modal-h .mono {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--black-alpha-48);
+  letter-spacing: .02em;
+}
+.asset-modal-h .x {
+  width: 30px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  color: var(--black-alpha-56);
+  border-radius: var(--r-sm);
+  margin-left: auto;
+}
+.asset-modal-h .x:hover { background: var(--black-alpha-08); color: var(--accent-black); }
+.asset-modal-body { padding: 20px 24px 24px; overflow-y: auto; flex: 1; min-height: 0; }
+.asset-modal-f {
+  padding: 14px 20px;
+  border-top: 1px solid var(--border-faint);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.asset-detail-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
+.asset-detail-lead { display: flex; flex-direction: column; gap: 10px; }
+.asset-detail-lead .ad-lead-wrap { position: relative; }
+.asset-detail-lead .placeholder.ad-lead-img { aspect-ratio: 9/16; border-radius: var(--r-md); }
+.ad-zoom-btn {
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: rgba(21, 20, 15, .7);
+  color: #fff;
+  border: 0;
+  border-radius: var(--r-sm);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity var(--t-base), background var(--t-base);
+  z-index: 3;
+}
+.ad-zoom-btn:hover { background: rgba(21, 20, 15, .92); }
+.ad-zoom-btn svg { width: 14px; height: 14px; }
+.asset-detail-lead .ad-lead-wrap:hover .ad-zoom-btn,
+.asset-detail-tri-row .ad-tri-wrap:hover .ad-zoom-btn { opacity: 1; }
+.asset-detail-tri-row .ad-tri-wrap { position: relative; }
+.asset-detail-lead .ad-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
+.asset-detail-lead .ad-thumbs .thumb {
+  flex: 0 0 56px;
+  width: 56px;
+  aspect-ratio: 3/4;
+  border-radius: var(--r-sm);
+  border: 1px solid var(--border-faint);
+  cursor: pointer;
+  overflow: hidden;
+  transition: border-color var(--t-base);
+}
+.asset-detail-lead .ad-thumbs .thumb:hover { border-color: var(--heat-40); }
+.asset-detail-lead .ad-thumbs .thumb.active { border-color: var(--heat); border-width: 2px; }
+.asset-detail-right .ad-section + .ad-section { margin-top: 18px; }
+.asset-detail-section-h {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--accent-black);
+  margin-bottom: 10px;
+}
+.asset-detail-section-h .ic { width: 14px; height: 14px; color: var(--klein); flex-shrink: 0; display: grid; place-items: center; }
+.asset-detail-section-h .ic svg { width: 14px; height: 14px; }
+.asset-detail-section-h .ad-ratio-chip {
+  margin-left: auto;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: var(--r-sm);
+  background: var(--background-lighter);
+  border: 1px solid var(--border-faint);
+  color: var(--black-alpha-56);
+  letter-spacing: .02em;
+}
+.asset-detail-section-h .ad-icon-btn {
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  background: var(--surface);
+  border: 1px solid var(--border-faint);
+  border-radius: var(--r-sm);
+  color: var(--black-alpha-56);
+  cursor: pointer;
+  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
+}
+.asset-detail-section-h .ad-icon-btn:hover { background: var(--klein); color: #fff; border-color: var(--klein); }
+.asset-detail-section-h .ad-icon-btn svg { width: 12px; height: 12px; }
+.asset-detail-section-h .ad-icon-gap { margin-left: 8px; }
+.asset-detail-tri-row .placeholder { aspect-ratio: 16 / 9; border-radius: var(--r-md); }
+.md-view-versions { display: flex; gap: 6px; overflow-x: auto; padding: 2px; margin-top: 8px; }
+.md-view-versions .v-thumb {
+  flex: 0 0 auto;
+  width: 72px;
+  aspect-ratio: 16/9;
+  background: var(--background-lighter);
+  border: 1px solid var(--border-faint);
+  border-radius: var(--r-sm);
+  position: relative;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  transition: border-color var(--t-base);
+}
+.md-view-versions .v-thumb:hover { border-color: var(--heat-40); }
+.md-view-versions .v-thumb.active { border-color: var(--heat); border-width: 2px; box-shadow: 0 0 0 2px var(--heat-12); }
+.md-view-versions .v-thumb .v { font-family: var(--font-mono); font-size: 10px; color: var(--black-alpha-56); letter-spacing: .02em; }
+.md-view-versions .v-thumb.active .v { color: var(--heat); font-weight: 600; }
+.asset-detail-tip {
+  margin-top: 10px;
+  padding: 10px 12px;
+  background: var(--heat-12);
+  border: 1px solid var(--heat-20);
+  border-radius: var(--r-sm);
+  font-size: 12px;
+  color: var(--accent-black);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  line-height: 1.5;
+}
+.asset-detail-tip svg { width: 14px; height: 14px; color: var(--heat); flex-shrink: 0; }
+.asset-detail-tip .ai-gen-btn {
+  margin-left: auto;
+  height: 26px;
+  padding: 0 10px;
+  background: var(--heat);
+  color: var(--accent-white);
+  border: 1px solid var(--heat);
+  border-radius: var(--r-sm);
+  font-size: 12px;
+  cursor: pointer;
+  font-family: inherit;
+  flex-shrink: 0;
+}
+.asset-modal-f .ad-foot-stats { display: flex; gap: 6px; margin-right: auto; }
+.asset-modal-f .ad-stat-btn {
+  height: 32px;
+  padding: 0 12px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: transparent;
+  border: 1px solid var(--border-faint);
+  border-radius: var(--r-sm);
+  color: var(--black-alpha-72);
+  font-size: 12px;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
+}
+.asset-modal-f .ad-stat-btn:hover { background: var(--background-lighter); color: var(--accent-black); }
+.asset-modal-f .ad-stat-btn svg { width: 13px; height: 13px; }
+.ad-detail-prompt {
+  width: 100%;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--black-alpha-72);
+  background: var(--background-base);
+  border: 1px solid var(--border-faint);
+  border-radius: var(--r-sm);
+  padding: 10px 12px;
+  outline: none;
+  resize: none;
+  height: 88px;
+  transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base);
+}
+.ad-thumbs .thumb.has-mock-media,
+.md-view-versions .v-thumb.has-mock-media,
+.prod-preview-history .h-thumb.has-mock-media {
+  background-image: var(--mock-media-url);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.ad-detail-prompt:hover { border-color: var(--heat-20); }
+.ad-detail-prompt:focus { border-color: var(--heat); background: var(--surface); color: var(--accent-black); box-shadow: 0 0 0 3px var(--heat-12); }
+.vd-main-wrap { display: flex; gap: 18px; align-items: flex-start; }
+.vd-main { flex: 0 0 280px; aspect-ratio: 9/16; max-height: 460px; background: #000; border-radius: var(--r-md); overflow: hidden; position: relative; }
+.vd-main video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
+.vd-info { flex: 1; min-width: 0; }
+.vd-section-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--accent-black); margin-bottom: 10px; }
+.vd-kv { display: grid; grid-template-columns: 72px 1fr; gap: 6px 10px; font-size: 13px; }
+.vd-kv .k { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .03em; padding-top: 1px; }
+.vd-kv .v { color: var(--accent-black); min-width: 0; overflow-wrap: anywhere; }
+.vd-history-h { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
+.vd-history-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
+.vd-history-thumb { flex: 0 0 64px; min-width: 64px; display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 1px solid var(--border-faint); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; transition: border-color var(--t-base); position: relative; }
+.vd-history-thumb:hover { border-color: var(--heat); }
+.vd-history-thumb.current { border-color: var(--heat); background: var(--heat-12); }
+.vd-history-thumb .placeholder { aspect-ratio: 9/16; }
+.vd-history-thumb .ts { font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); text-align: center; }
+.vd-prompt-field { margin-top: 16px; }
+.vd-prompt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
+.vd-prompt-head .label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--black-alpha-56); letter-spacing: .04em; }
+.vd-prompt-edit { background: var(--background-base); border: 1px solid var(--border-faint); border-radius: var(--r-md); padding: 12px 14px; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--accent-black); white-space: pre-wrap; min-height: 96px; outline: none; letter-spacing: .01em; cursor: text; }
+.vd-modal-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
+
 /* 流程步骤4 · 基础资产 loading 转圈(顶层 @keyframes 才注册) */
@keyframes assetSpin { to { transform: rotate(360deg); } }
+@keyframes videoShimmer { to { background-position: -220% 0, 0 0; } }

 /* 进度流逐条滚入(顶层 @keyframes 才注册) */
@keyframes psRowIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@@ -1646,7 +1949,7 @@
 .ref-gate-mask {
  position: fixed;
  inset: 0;
-  z-index: 60;
+  z-index: 1800;
  display: flex;
  align-items: center;
  justify-content: center;