feat: 剧本评分左侧面板滚动优化、电商克隆移动端适配、视觉细节精修

【剧本评分左侧面板滚动重构】 - 新增 script-eval-v5-left-main 滚动容器，上传区/AI信息/历史记录统一在容器内滚动 - 底部操作按钮（开始评测/导出报告）独立于滚动区外，始终可见可点击 - 历史评测列表增加 max-height 限制，超出区域内置滚动条 - 自定义窄滚动条（品牌绿半透明 thumb），保持视觉干净 - 短视口（≤760px/820px）压缩上传区和历史列表最小高度【剧本评分视觉精修】 - 左侧面板增加渐变背景层次与分区微光分割线 - 上传区增加 ::after 伪元素径向光晕，hover 时品牌绿边框增强 - 已上传状态上传区增加绿色边框高亮（is-ready/is-complete） - 底部操作栏背景层次加深，导出按钮 hover 增加绿色反馈 - 右侧面板增加底部径向渐变，上传引导卡标题提亮 - 顶部状态栏背景加深，模糊效果增强【电商克隆移动端适配增强】 - 900px/620px/480px 三级断点增加顶部预留空间，避免与导航重叠 - Logo 区域定位从 sticky 改为 static，避免滚动时遮挡内容 - 设置面板在窄屏下调整内边距与边距【Token 用量页精简】 - 移除指标卡片序号角标，保持卡片视觉简洁
2026-06-04 09:40:28 +08:00
parent 7be4e65e1e
commit b08a7918da
4 changed files with 434 additions and 101 deletions
@@ -3421,3 +3421,297 @@
    font-size: 13px;
  }
 }
+
+/* Script review left panel overflow guard: keep actions available while history remains scrollable. */
+.script-eval-v5-left {
+  overflow: hidden;
+}
+
+.script-eval-v5-left-main {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgb(0 255 136 / 35%) transparent;
+}
+
+.script-eval-v5-left-main::-webkit-scrollbar,
+.script-eval-v5-history-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.script-eval-v5-left-main::-webkit-scrollbar-track,
+.script-eval-v5-history-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.script-eval-v5-left-main::-webkit-scrollbar-thumb,
+.script-eval-v5-history-list::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: rgb(0 255 136 / 28%);
+}
+
+.script-eval-v5-left-main .script-eval-v5-lp-section.is-fill {
+  flex: 0 0 auto;
+  min-height: 210px;
+}
+
+.script-eval-v5-left-main .script-eval-v5-history-list {
+  min-height: 128px;
+  max-height: clamp(160px, 28vh, 300px);
+  overflow-y: auto;
+}
+
+.script-eval-v5-lp-bottom {
+  position: static;
+  z-index: auto;
+  flex-shrink: 0;
+  margin-top: 0;
+}
+
+@media (max-height: 820px) and (min-width: 901px) {
+  .script-eval-v5-left-main .script-eval-v5-lp-section.is-fill {
+    flex-basis: auto;
+    min-height: 190px;
+  }
+
+  .script-eval-v5-left-main .script-eval-v5-history-list {
+    min-height: 118px;
+    max-height: clamp(142px, 23vh, 220px);
+  }
+}
+
+@media (max-width: 900px) {
+  .script-eval-v5-left-main {
+    overscroll-behavior: contain;
+  }
+}
+
+@media (max-width: 680px) {
+  .script-eval-v5-left {
+    overflow: visible;
+  }
+
+  .script-eval-v5-left-main {
+    flex: 0 0 auto;
+    overflow: visible;
+  }
+
+  .script-eval-v5-left-main .script-eval-v5-lp-section.is-fill {
+    min-height: 224px;
+  }
+
+  .script-eval-v5-left-main .script-eval-v5-history-list {
+    min-height: 132px;
+    max-height: min(260px, 42vh);
+  }
+
+  .script-eval-v5-history-empty {
+    min-height: 118px;
+  }
+}
+
+/* Final commercial polish for the script scoring workspace. */
+.script-eval-v5 {
+  background:
+    radial-gradient(circle at 12% 0%, rgb(0 255 136 / 5%), transparent 28%),
+    linear-gradient(180deg, #0d1010 0%, #090b0b 100%);
+}
+
+.script-eval-v5-page {
+  background:
+    linear-gradient(90deg, rgb(0 255 136 / 4%), transparent 24%),
+    linear-gradient(180deg, rgb(255 255 255 / 1.8%), transparent 180px);
+}
+
+.script-eval-v5-left {
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 4%), transparent 180px),
+    linear-gradient(90deg, rgb(0 255 136 / 4%), transparent 32%),
+    var(--v5-panel);
+}
+
+.script-eval-v5-left-main {
+  scroll-padding-block: 18px;
+}
+
+.script-eval-v5-left-main .script-eval-v5-lp-section {
+  flex-shrink: 0;
+  padding-inline: 22px;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 1.8%), transparent 80px);
+}
+
+.script-eval-v5-left-main .script-eval-v5-lp-section + .script-eval-v5-lp-section {
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 2.5%);
+}
+
+.script-eval-v5-lp-label {
+  color: #91a09b;
+}
+
+.script-eval-v5-upload-zone {
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.script-eval-v5-upload-zone::after {
+  content: "";
+  position: absolute;
+  inset: 1px;
+  z-index: -1;
+  border-radius: inherit;
+  background:
+    radial-gradient(circle at 50% 18%, rgb(0 255 136 / 11%), transparent 38%),
+    linear-gradient(180deg, rgb(255 255 255 / 2%), transparent 60%);
+  opacity: 0.78;
+  pointer-events: none;
+}
+
+.script-eval-v5-upload-zone:focus-visible {
+  outline: 2px solid rgb(0 255 136 / 42%);
+  outline-offset: 3px;
+}
+
+.script-eval-v5.is-ready .script-eval-v5-upload-zone,
+.script-eval-v5.is-complete .script-eval-v5-upload-zone {
+  border-color: rgb(0 255 136 / 28%);
+  background:
+    linear-gradient(180deg, rgb(0 255 136 / 8%), rgb(255 255 255 / 2.5%)),
+    rgb(255 255 255 / 2.8%);
+}
+
+.script-eval-v5-upload-done {
+  width: min(100%, 320px);
+  padding: 14px 14px;
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
+}
+
+.script-eval-v5-info-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+.script-eval-v5-info-item {
+  min-height: 42px;
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
+}
+
+.script-eval-v5-info-empty,
+.script-eval-v5-history-empty {
+  color: #82918c;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 3.2%), rgb(255 255 255 / 1.8%));
+}
+
+.script-eval-v5-left-main .script-eval-v5-lp-section.is-fill {
+  background:
+    linear-gradient(180deg, rgb(0 255 136 / 3.4%), transparent 92px),
+    linear-gradient(180deg, rgb(255 255 255 / 1.8%), transparent);
+}
+
+.script-eval-v5-history-list {
+  padding: 2px 8px 2px 0;
+}
+
+.script-eval-v5-history-item {
+  min-height: 68px;
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
+}
+
+.script-eval-v5-lp-bottom {
+  padding: 18px 22px 22px;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 2.2%), transparent 60px),
+    #111414;
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 3.5%);
+}
+
+.script-eval-v5-export-btn {
+  border-color: rgb(255 255 255 / 7%);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 3.5%), rgb(255 255 255 / 1.8%)),
+    #111414;
+  color: #7f8d88;
+}
+
+.script-eval-v5-export-btn:not(:disabled):hover {
+  border-color: rgb(0 255 136 / 22%);
+  color: #c7d5d0;
+  background:
+    linear-gradient(180deg, rgb(0 255 136 / 8%), rgb(255 255 255 / 2%)),
+    #111414;
+}
+
+.script-eval-v5-eval-btn:disabled,
+.script-eval-v5-export-btn:disabled {
+  opacity: 0.48;
+  cursor: not-allowed;
+}
+
+.script-eval-v5-right-topbar {
+  backdrop-filter: blur(14px);
+  background:
+    linear-gradient(180deg, rgb(18 22 21 / 92%), rgb(12 14 14 / 88%));
+}
+
+.script-eval-v5-right-content:not(.is-report) {
+  background:
+    radial-gradient(circle at 50% 43%, rgb(0 255 136 / 5%), transparent 32%),
+    linear-gradient(180deg, transparent, rgb(0 0 0 / 12%));
+}
+
+.script-eval-v5-upload-card-title {
+  color: #f0fff8;
+}
+
+.script-eval-v5-upload-card-desc {
+  max-width: 540px;
+  color: #96a5a0;
+}
+
+.script-eval-v5-statusbar {
+  background:
+    linear-gradient(180deg, rgb(17 20 20 / 84%), rgb(10 12 12 / 92%));
+}
+
+@media (max-height: 760px) and (min-width: 901px) {
+  .script-eval-v5-left-main .script-eval-v5-lp-section {
+    padding-block: 12px;
+  }
+
+  .script-eval-v5-upload-zone {
+    min-height: 156px;
+  }
+
+  .script-eval-v5-left-main .script-eval-v5-lp-section.is-fill {
+    min-height: 176px;
+  }
+
+  .script-eval-v5-left-main .script-eval-v5-history-list {
+    min-height: 110px;
+  }
+}
+
+@media (max-width: 680px) {
+  .script-eval-v5-left-main .script-eval-v5-lp-section {
+    padding-inline: 16px;
+  }
+
+  .script-eval-v5-upload-zone {
+    min-height: 164px;
+  }
+
+  .script-eval-v5-lp-bottom {
+    padding: 14px 16px 18px;
+  }
+
+  .script-eval-v5-right-content:not(.is-report) {
+    padding-top: 22px;
+  }
+}