From b08a7918da5fba9f7c411cacf242bbbd5d891c59 Mon Sep 17 00:00:00 2001 From: ludan <251918489@qq.com> Date: Thu, 4 Jun 2026 09:40:28 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=89=A7=E6=9C=AC=E8=AF=84=E5=88=86?= =?UTF-8?q?=E5=B7=A6=E4=BE=A7=E9=9D=A2=E6=9D=BF=E6=BB=9A=E5=8A=A8=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E3=80=81=E7=94=B5=E5=95=86=E5=85=8B=E9=9A=86=E7=A7=BB?= =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E9=80=82=E9=85=8D=E3=80=81=E8=A7=86=E8=A7=89?= =?UTF-8?q?=E7=BB=86=E8=8A=82=E7=B2=BE=E4=BF=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 【剧本评分左侧面板滚动重构】 - 新增 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 用量页精简】 - 移除指标卡片序号角标，保持卡片视觉简洁 --- .../script-tokens/ScriptTokensPage.tsx | 192 ++++++------ src/features/script-tokens/TokenUsagePage.tsx | 3 +- src/styles/pages/ecommerce.css | 46 ++- src/styles/pages/script-tokens-v5.css | 294 ++++++++++++++++++ 4 files changed, 434 insertions(+), 101 deletions(-) diff --git a/src/features/script-tokens/ScriptTokensPage.tsx b/src/features/script-tokens/ScriptTokensPage.tsx index 4b8887b..b490d94 100644 --- a/src/features/script-tokens/ScriptTokensPage.tsx +++ b/src/features/script-tokens/ScriptTokensPage.tsx @@ -362,109 +362,111 @@ function ScriptTokensPage() {
{/* Left Panel */} diff --git a/src/features/script-tokens/TokenUsagePage.tsx b/src/features/script-tokens/TokenUsagePage.tsx index 9aa5646..085241c 100644 --- a/src/features/script-tokens/TokenUsagePage.tsx +++ b/src/features/script-tokens/TokenUsagePage.tsx @@ -277,9 +277,8 @@ function TokenUsagePage({ ) : null}
- {metricCards.map((card, index) => ( + {metricCards.map((card) => (
- {String(index + 1).padStart(2, "0")} {card.label} {card.value} {card.hint} diff --git a/src/styles/pages/ecommerce.css b/src/styles/pages/ecommerce.css index fae888d..be67177 100644 --- a/src/styles/pages/ecommerce.css +++ b/src/styles/pages/ecommerce.css @@ -8008,9 +8008,8 @@ } .product-clone-page[data-tool="clone"] .clone-ai-logo { - position: sticky; - top: 0; - z-index: 3; + position: static; + z-index: auto; margin: -18px -18px 2px; padding: 16px 18px 14px; border-bottom-color: var(--ecm-line); @@ -8513,7 +8512,7 @@ } .product-clone-page[data-tool="clone"] .clone-ai-logo { - margin: -14px -14px 0; + margin: 0; padding: 14px 54px 12px 14px; } @@ -8792,3 +8791,42 @@ padding-top: 14px; } } + +/* Mobile clone header alignment: keep the tool title in normal flow, but attach it to the top nav rhythm. */ +@media (max-width: 900px) { + .product-clone-page[data-tool="clone"] { + padding-top: 59px; + } + + .product-clone-page[data-tool="clone"] > .product-clone-shell { + min-height: calc(100% - 59px); + } + + .product-clone-page[data-tool="clone"] .clone-ai-panel { + padding-top: 0; + } + + .product-clone-page[data-tool="clone"] .clone-ai-logo { + margin: 0 -18px 2px; + } +} + +@media (max-width: 620px) { + .product-clone-page[data-tool="clone"] .clone-ai-panel { + padding: 0 14px 14px; + } + + .product-clone-page[data-tool="clone"] .clone-ai-logo { + margin: 0 -14px 0; + } +} + +@media (max-width: 480px) { + .product-clone-page[data-tool="clone"] { + padding-top: 59px; + } + + .product-clone-page[data-tool="clone"] > .product-clone-shell { + min-height: calc(100% - 59px); + } +} diff --git a/src/styles/pages/script-tokens-v5.css b/src/styles/pages/script-tokens-v5.css index 932c360..4114e1c 100644 --- a/src/styles/pages/script-tokens-v5.css +++ b/src/styles/pages/script-tokens-v5.css @@ -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; + } +}