From 73a60433108835a7f9ee53aea38de2485e4ddc3a Mon Sep 17 00:00:00 2001 From: ludan <251918489@qq.com> Date: Wed, 3 Jun 2026 18:21:10 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=89=A7=E6=9C=AC=E8=AF=84=E5=88=86Saa?= =?UTF-8?q?S=E5=8C=96=E7=B2=BE=E4=BF=AE=E3=80=81=E7=94=BB=E5=B8=83?= =?UTF-8?q?=E8=A7=86=E8=A7=89=E5=8D=87=E7=BA=A7=E3=80=81=E7=94=B5=E5=95=86?= =?UTF-8?q?=E5=85=8B=E9=9A=86=E9=A2=84=E8=A7=88=E5=93=8D=E5=BA=94=E5=BC=8F?= =?UTF-8?q?=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 【剧本评分页面 SaaS 商业化精修】 - 上传区增加玻璃拟态渐变边框，hover 时高亮为品牌绿 - 已上传文件显示文件名+文件大小，重新上传按钮优化 - 上传按钮文案从"+ 上传剧本"改为"选择剧本"，增加图标 - 评测按钮增加 LoadingOutlined/ThunderboltOutlined 图标动画 - 评测等待态增加分步加载提示（结构识别/冲突评估/商业潜力） - 六维评分柱状图增加 hover/focus 交互：悬停维度高亮，其余维度 dim，底部显示当前维度详细说明 - 评分卡片、报告面板、历史记录项增加渐变背景与阴影层次 - 新增 script-tokens-v5 设计 Token 变量体系 - 响应式断点适配 1180px/900px/680px，移动端左右面板上下堆叠 【画布页面视觉升级】 - 画布背景增加网点纹理 + 径向渐变，增强空间感 - 项目栏/缩放控件增加玻璃拟态毛玻璃效果 - 节点卡片增加渐变背景、内阴影、边框高亮 - 选中节点增加品牌绿外圈光环 + 投影 - 连线 connector 增加 hover 品牌绿高亮 - 节点连线/选区框/缩放手柄统一品牌绿主题色 - 所有编辑器/菜单面板统一玻璃拟态风格 - 移动端 560px 项目栏改为 4 列网格布局，按钮显示中文标签（编辑/最近/导出/提交） 【电商克隆预览响应式修复】 - 短视口（高度≤760px）下预览面板内 header/空状态/底部输入改为静态流式布局 - 平板（≤860px）下预览面板取消绝对定位，改为 grid 流式布局 - 手机（≤620px）缩小间距与最小高度 【其他】 - 个人中心登录注册表单移除 form-kicker 标签 - 品牌色（auth-page__brand）调整为强调绿色 --- src/features/profile/ProfilePage.tsx | 1 - .../script-tokens/ScriptTokensPage.tsx | 52 +- src/styles/pages/ecommerce.css | 85 ++ src/styles/pages/script-tokens-v5.css | 772 ++++++++++++++++++ src/styles/themes/dark-green.css | 406 ++++++++- 5 files changed, 1307 insertions(+), 9 deletions(-) diff --git a/src/features/profile/ProfilePage.tsx b/src/features/profile/ProfilePage.tsx index fa509d9..0d074aa 100644 --- a/src/features/profile/ProfilePage.tsx +++ b/src/features/profile/ProfilePage.tsx @@ -850,7 +850,6 @@ function ProfilePage({ OmniAI - {mode === "login" ? "账户登录" : "新用户注册"}

{mode === "login" ? "欢迎回来" : "创建账号"}

{mode === "login" ? "登录后继续你的 AI 创作之旅" : "注册即可免费体验全部功能"} diff --git a/src/features/script-tokens/ScriptTokensPage.tsx b/src/features/script-tokens/ScriptTokensPage.tsx index fc3a849..4b8887b 100644 --- a/src/features/script-tokens/ScriptTokensPage.tsx +++ b/src/features/script-tokens/ScriptTokensPage.tsx @@ -1,8 +1,11 @@ import { + BarChartOutlined, CheckCircleFilled, CopyOutlined, DownloadOutlined, FileTextOutlined, + LoadingOutlined, + ThunderboltOutlined, UploadOutlined, } from "@ant-design/icons"; import { useEffect, useRef, useState, type ChangeEvent, type KeyboardEvent } from "react"; @@ -168,6 +171,12 @@ function normalizeUploadedText(raw: string, ext: string): string { return raw; } +function formatFileSize(size: number): string { + if (size < 1024) return `${size} B`; + if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`; + return `${(size / 1024 / 1024).toFixed(1)} MB`; +} + const SCORE_DIMENSIONS: ScoreDimension[] = [ { key: "hook", label: "钩子设计", maxScore: 20, hint: "开篇吸引力·悬念设置·黄金三秒", detail: "开篇即抛出高概念钩子，悬念设置紧凑有力。" }, { key: "character", label: "角色塑造", maxScore: 15, hint: "人物立体度·动机合理性·弧光设计", detail: "主角动机有铺垫，配角功能性较强，人物弧光尚可进一步深化。" }, @@ -346,9 +355,10 @@ function ScriptTokensPage() { const compactTitle = uploadedFile?.name?.replace(/\.[^.]+$/, "") ?? "剧本评测"; const scriptMinutes = Math.max(8, Math.round(script.length / 460)); const reportDate = new Date().toLocaleDateString("zh-CN", { month: "2-digit", day: "2-digit" }); + const statusClass = loading ? "is-loading" : result ? "is-complete" : hasContent ? "is-ready" : "is-idle"; return ( -

+
{/* Left Panel */} @@ -482,6 +497,11 @@ function ScriptTokensPage() {
AI 正在分析剧本...

正在调用模型进行六维评分，预计需要 15-30 秒

+
@@ -568,13 +588,23 @@ function ScriptTokensPage() { 0%
- {SCORE_DIMENSIONS.map((dim) => { + {SCORE_DIMENSIONS.map((dim, dimIndex) => { const score = result.dimensionScores[dim.key] ?? 0; const pct = Math.max(0, Math.min(1, score / dim.maxScore)); const lossPct = 1 - pct; const isPerfect = score === dim.maxScore; + const isActive = activeDim === null || activeDim === dimIndex; return ( -
+
+ + + {activeDim === null + ? "悬停维度可查看当前分项表现，优先从低分项制定改稿计划。" + : `${SCORE_DIMENSIONS[activeDim].label}：${SCORE_DIMENSIONS[activeDim].detail}`} + +
diff --git a/src/styles/pages/ecommerce.css b/src/styles/pages/ecommerce.css index 635ab75..fae888d 100644 --- a/src/styles/pages/ecommerce.css +++ b/src/styles/pages/ecommerce.css @@ -8707,3 +8707,88 @@ font-size: 10px; } } + +@media (max-height: 760px) { + .product-clone-page[data-tool="clone"].is-settings-collapsed .clone-ai-preview { + grid-template-rows: auto minmax(220px, 1fr) auto; + align-content: stretch; + justify-items: stretch; + overflow: auto; + padding-top: clamp(28px, 7vh, 72px); + padding-bottom: 20px; + } + + .product-clone-page[data-tool="clone"].is-settings-collapsed .clone-ai-preview-header { + position: static; + width: 100%; + max-width: none; + } + + .product-clone-page[data-tool="clone"].is-settings-collapsed .clone-ai-empty-state { + align-self: center; + justify-self: center; + min-height: min(260px, 36vh); + } + + .product-clone-page[data-tool="clone"].is-settings-collapsed .clone-ai-bottom-input { + position: static; + width: min(100%, 780px); + align-self: end; + justify-self: center; + } +} + +@media (max-width: 860px) { + .product-clone-page[data-tool="clone"] .clone-ai-preview { + grid-template-rows: auto minmax(220px, 1fr) auto; + align-content: stretch; + justify-items: stretch; + overflow: auto; + padding-bottom: 20px; + } + + .product-clone-page[data-tool="clone"] .clone-ai-preview-header { + position: static; + width: 100%; + max-width: none; + } + + .product-clone-page[data-tool="clone"] .clone-ai-empty-state { + align-self: center; + justify-self: center; + } + + .product-clone-page[data-tool="clone"] .clone-ai-bottom-input { + position: static; + width: min(100%, 780px); + align-self: end; + justify-self: center; + } +} + +@media (max-width: 620px) { + .product-clone-page[data-tool="clone"] .clone-ai-preview { + grid-template-rows: auto minmax(210px, 1fr) auto; + gap: 16px; + padding-bottom: 14px; + } + + .product-clone-page[data-tool="clone"] .clone-ai-empty-state { + min-height: min(220px, 34vh); + } +} + +/* Mobile preview rhythm: once the preview header is in normal flow, remove the desktop top reserve. */ +@media (max-width: 860px) { + .product-clone-page[data-tool="clone"] .clone-ai-preview { + min-height: 520px; + padding-top: 18px; + } +} + +@media (max-width: 620px) { + .product-clone-page[data-tool="clone"] .clone-ai-preview { + min-height: 440px; + padding-top: 14px; + } +} diff --git a/src/styles/pages/script-tokens-v5.css b/src/styles/pages/script-tokens-v5.css index f07be33..932c360 100644 --- a/src/styles/pages/script-tokens-v5.css +++ b/src/styles/pages/script-tokens-v5.css @@ -2649,3 +2649,775 @@ min-height: 52px; } } + +/* ===== Commercial SaaS polish for script review page ===== */ +.script-eval-v5 { + --v5-radius-xs: 6px; + --v5-radius-sm: 8px; + --v5-radius-md: 12px; + --v5-radius-lg: 16px; + --v5-panel: #131616; + --v5-panel-2: #181c1b; + --v5-panel-3: #101312; + --v5-line: rgb(255 255 255 / 7%); + --v5-line-strong: rgb(0 255 136 / 22%); + --v5-shadow-soft: 0 18px 48px rgb(0 0 0 / 24%); + --v5-shadow-tight: 0 10px 24px rgb(0 0 0 / 18%); + background: + linear-gradient(180deg, rgb(255 255 255 / 2.2%), transparent 220px), + var(--v5-bg); + letter-spacing: 0; +} + +.script-eval-v5-page { + background: linear-gradient(90deg, rgb(0 255 136 / 3%), transparent 28%); +} + +.script-eval-v5-left { + background: + linear-gradient(180deg, rgb(255 255 255 / 3.5%), transparent 180px), + var(--v5-panel); + border-right-color: var(--v5-line); + box-shadow: inset -1px 0 0 rgb(0 255 136 / 4%), 18px 0 38px rgb(0 0 0 / 18%); +} + +.script-eval-v5-lp-section { + border-bottom-color: var(--v5-line); +} + +.script-eval-v5-lp-label { + display: flex; + align-items: center; + gap: 8px; + color: #7f8d88; + font-size: 12px; + font-weight: 800; + letter-spacing: 0.06em; +} + +.script-eval-v5-lp-label::before { + content: ""; + width: 6px; + height: 6px; + border-radius: 999px; + background: rgb(0 255 136 / 42%); + box-shadow: 0 0 14px rgb(0 255 136 / 24%); +} + +.script-eval-v5-upload-zone { + position: relative; + min-height: 214px; + border: 1px dashed rgb(255 255 255 / 14%); + border-radius: var(--v5-radius-lg); + background: + linear-gradient(180deg, rgb(255 255 255 / 4%), transparent), + rgb(255 255 255 / 2.5%); + box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%); +} + +.script-eval-v5-upload-zone:hover, +.script-eval-v5-upload-zone:focus-visible { + border-color: var(--v5-line-strong); + background: + linear-gradient(180deg, rgb(0 255 136 / 8%), transparent), + rgb(0 255 136 / 4%); + outline: none; + box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%), 0 16px 36px rgb(0 0 0 / 16%); +} + +.script-eval-v5-upload-icon { + display: grid; + place-items: center; + width: 58px; + height: 58px; + margin: 0 auto 14px; + border: 1px solid rgb(255 255 255 / 7%); + border-radius: 18px; + background: rgb(0 255 136 / 8%); + color: color-mix(in srgb, var(--v5-green) 74%, #ffffff); +} + +.script-eval-v5-upload-text { + margin-bottom: 14px; + color: #d7dedb; + font-weight: 760; +} + +.script-eval-v5-upload-btn, +.script-eval-v5-eval-btn, +.script-eval-v5-export-btn, +.script-eval-v5-action-btn, +.script-eval-v5-retry-btn { + font-family: inherit; + letter-spacing: 0; +} + +.script-eval-v5-upload-btn, +.script-eval-v5-eval-btn, +.script-eval-v5-export-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; +} + +.script-eval-v5-upload-btn, +.script-eval-v5-eval-btn { + background: linear-gradient(180deg, #34ffa9 0%, var(--v5-green) 52%, #07cf73 100%); + box-shadow: 0 12px 28px rgb(0 255 136 / 14%), inset 0 1px 0 rgb(255 255 255 / 36%); +} + +.script-eval-v5-upload-btn:hover, +.script-eval-v5-eval-btn:hover:not(:disabled) { + background: linear-gradient(180deg, #55ffb8 0%, #10f58c 56%, var(--v5-green-dim) 100%); + transform: translateY(-1px); +} + +.script-eval-v5-upload-hint { + max-width: 300px; + margin-inline: auto; + color: #74837e; + line-height: 1.6; +} + +.script-eval-v5-upload-done { + min-height: 86px; + border-color: var(--v5-line-strong); + border-radius: var(--v5-radius-md); + background: + linear-gradient(180deg, rgb(0 255 136 / 12%), rgb(0 255 136 / 5%)), + rgb(255 255 255 / 2%); +} + +.script-eval-v5-uf-meta { + min-width: 0; + flex: 1; + display: grid; + gap: 4px; + text-align: left; +} + +.script-eval-v5-uf-name { + display: block; + color: #e9fff5; + font-size: 14px; + line-height: 1.25; +} + +.script-eval-v5-uf-size { + color: #7f918a; + font-size: 11px; + font-weight: 700; +} + +.script-eval-v5-uf-re { + padding: 5px 8px; + border-radius: var(--v5-radius-xs); + color: #a2b0ab; + transition: color 160ms ease, background 160ms ease; +} + +.script-eval-v5-uf-re:hover { + background: rgb(255 255 255 / 6%); +} + +.script-eval-v5-info-grid { + gap: 8px; +} + +.script-eval-v5-info-item { + min-height: 38px; + padding: 0 12px; + border: 1px solid rgb(255 255 255 / 5%); + border-radius: var(--v5-radius-sm); + background: rgb(255 255 255 / 2.6%); +} + +.script-eval-v5-info-key { + color: #84928d; + font-size: 13px; + font-weight: 650; +} + +.script-eval-v5-info-val { + color: #e5ebe8; + font-size: 13px; + font-weight: 800; +} + +.script-eval-v5-info-tag { + border-radius: 999px; + padding: 4px 10px; +} + +.script-eval-v5-info-empty, +.script-eval-v5-history-empty { + min-height: 70px; + display: grid; + place-items: center; + border: 1px dashed rgb(255 255 255 / 9%); + border-radius: var(--v5-radius-md); + background: rgb(255 255 255 / 2%); + color: #75827e; + line-height: 1.5; +} + +.script-eval-v5-history-list { + gap: 8px; +} + +.script-eval-v5-history-item { + border: 1px solid rgb(255 255 255 / 5%); + border-radius: var(--v5-radius-md); + background: rgb(255 255 255 / 2.4%); + transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease; +} + +.script-eval-v5-history-item:hover { + border-color: rgb(255 255 255 / 10%); + background: rgb(255 255 255 / 4%); + transform: translateY(-1px); +} + +.script-eval-v5-history-item.is-active { + border-color: var(--v5-line-strong); + background: linear-gradient(90deg, rgb(0 255 136 / 10%), rgb(0 255 136 / 3%)); + box-shadow: inset 3px 0 0 var(--v5-green); +} + +.script-eval-v5-hi-name { + color: #dce5e1; + font-size: 14px; + font-weight: 760; +} + +.script-eval-v5-hi-date { + color: #73817c; + font-size: 11px; +} + +.script-eval-v5-hi-score { + font-variant-numeric: tabular-nums; + font-size: 28px; +} + +.script-eval-v5-hi-grade { + color: #7d8985; +} + +.script-eval-v5-lp-bottom { + border-top-color: var(--v5-line); + background: linear-gradient(180deg, rgb(19 22 22 / 72%), #111414); + box-shadow: 0 -18px 34px rgb(0 0 0 / 18%); +} + +.script-eval-v5-eval-btn { + min-height: 58px; + border-radius: var(--v5-radius-md); + font-size: 17px; + font-weight: 850; + transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease; +} + +.script-eval-v5-eval-btn:disabled { + opacity: 0.44; + box-shadow: none; +} + +.script-eval-v5-export-btn { + min-height: 50px; + border-color: rgb(255 255 255 / 9%); + border-radius: var(--v5-radius-md); + background: rgb(255 255 255 / 3.5%); + color: #aab8b2; + font-size: 14px; + font-weight: 760; +} + +.script-eval-v5-export-btn:hover:not(:disabled) { + border-color: var(--v5-line-strong); + background: rgb(0 255 136 / 7%); + color: #dcfff0; +} + +.script-eval-v5-right { + background: + linear-gradient(180deg, rgb(255 255 255 / 2.4%), transparent 240px), + #0d0f0f; +} + +.script-eval-v5-right-topbar { + min-height: 52px; + border-bottom-color: var(--v5-line); + background: rgb(13 15 15 / 88%); + backdrop-filter: blur(18px); +} + +.script-eval-v5-right-title { + color: #87938f; + font-size: 14px; + font-weight: 760; +} + +.script-eval-v5-rt-green { + color: #b7ffdc; +} + +.script-eval-v5-action-btn { + min-height: 32px; + border-color: rgb(255 255 255 / 9%); + border-radius: var(--v5-radius-sm); + background: rgb(255 255 255 / 3.8%); + color: #a8b5b0; + font-weight: 760; +} + +.script-eval-v5-action-btn:hover { + border-color: var(--v5-line-strong); + background: rgb(0 255 136 / 7%); + color: #dffff0; +} + +.script-eval-v5-right-content { + padding: 20px 32px 42px; +} + +.script-eval-v5-illustration-hit { + border: 1px solid rgb(255 255 255 / 7%); + background: + linear-gradient(180deg, rgb(255 255 255 / 4.5%), transparent), + var(--v5-panel-3); + box-shadow: var(--v5-shadow-soft); +} + +.script-eval-v5-illustration-hit:hover, +.script-eval-v5-illustration-hit:focus-visible { + border-color: var(--v5-line-strong); + background: + linear-gradient(180deg, rgb(0 255 136 / 7%), transparent), + var(--v5-panel-3); +} + +.script-eval-v5-upload-card-icon { + border: 1px solid var(--v5-line-strong); + background: + linear-gradient(180deg, rgb(0 255 136 / 18%), rgb(0 255 136 / 8%)), + #101714; +} + +.script-eval-v5-upload-card-title { + color: #f4fbf8; + font-size: 22px; + font-weight: 850; +} + +.script-eval-v5-upload-card-desc { + color: #91a19b; +} + +.script-eval-v5-loading { + min-width: min(520px, 92%); + border: 1px solid rgb(255 255 255 / 7%); + border-radius: var(--v5-radius-lg); + background: + linear-gradient(180deg, rgb(255 255 255 / 4%), transparent), + var(--v5-panel-3); + box-shadow: var(--v5-shadow-soft); +} + +.script-eval-v5-loading strong { + color: #f4fbf8; +} + +.script-eval-v5-loading p { + margin: 0; + color: #8f9f99; +} + +.script-eval-v5-loading-steps { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 8px; + margin-top: 4px; +} + +.script-eval-v5-loading-steps span { + border: 1px solid rgb(0 255 136 / 18%); + border-radius: 999px; + background: rgb(0 255 136 / 7%); + color: #b6ffdc; + padding: 5px 10px; + font-size: 11px; + font-weight: 780; +} + +.script-eval-v5-error { + border-color: rgb(244 178 46 / 28%); + border-radius: var(--v5-radius-md); + background: rgb(244 178 46 / 8%); + color: #f4c767; + box-shadow: var(--v5-shadow-tight); +} + +.script-eval-v5-error span:first-child { + color: #ffe0a1; + font-weight: 850; +} + +.script-eval-v5-retry-btn { + border-color: rgb(244 178 46 / 32%); + color: #ffd47a; +} + +.script-eval-report { + --report-panel: #151918; + --report-panel-2: #111514; + --report-row: #181e1c; + --report-border: rgb(255 255 255 / 8%); + --report-muted: #93a29c; + --report-dim: #67736f; + background: + linear-gradient(180deg, rgb(255 255 255 / 3.2%), transparent 230px), + var(--report-bg); +} + +.script-eval-report::before, +.script-eval-report::after { + opacity: 0.75; +} + +.script-eval-report--inside .script-eval-report__body { + padding: 18px 32px 46px; +} + +.script-eval-report--inside .script-eval-report__hero { + align-items: center; + padding: 4px 0 22px; +} + +.script-eval-report__score-block { + min-height: 184px; + display: flex; + flex-direction: column; + justify-content: center; + padding: 18px 22px; + border: 1px solid rgb(255 255 255 / 7%); + border-radius: var(--v5-radius-lg); + background: + linear-gradient(180deg, rgb(0 255 136 / 9%), rgb(0 255 136 / 2%)), + #101413; + box-shadow: var(--v5-shadow-tight); +} + +.script-eval-report__score { + text-shadow: 0 0 28px rgb(0 255 136 / 14%); +} + +.script-eval-report__score-total { + color: #7e8b86; +} + +.script-eval-report__grade { + border-radius: 999px; + box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%); +} + +.script-eval-report__beat { + color: #a6b4ae; +} + +.script-eval-report__summary { + padding: 6px 0; +} + +.script-eval-report__summary h1 { + color: #f6fbf9; + font-size: clamp(25px, 2vw, 32px); + font-weight: 900; +} + +.script-eval-report__summary p { + color: #7d8b86; +} + +.script-eval-report__desc { + max-width: 980px; + color: #cbd5d1 !important; + font-size: 14px !important; +} + +.script-eval-report__chart-card, +.script-eval-report__path-card { + border-color: var(--report-border); + border-radius: var(--v5-radius-lg); + background: + linear-gradient(180deg, rgb(255 255 255 / 3.8%), transparent), + var(--report-panel); + box-shadow: var(--v5-shadow-tight); +} + +.script-eval-report__card-head { + min-height: 50px; + padding-inline: 18px; + border-bottom: 1px solid rgb(255 255 255 / 5%); + color: #b5c0bc; + text-transform: none; +} + +.script-eval-report__legend { + color: #7e8a86; +} + +.script-eval-report__chart { + padding-bottom: 12px; +} + +.script-eval-report__chart-grid { + gap: clamp(18px, 3vw, 52px); +} + +.script-eval-report__bar-col { + cursor: pointer; + transition: opacity 180ms ease, transform 180ms ease; +} + +.script-eval-report__bar-col:hover, +.script-eval-report__bar-col:focus-visible { + outline: none; + transform: translateY(-2px); +} + +.script-eval-report__bar-col.is-dimmed { + opacity: 0.36; +} + +.script-eval-report__bar-fill { + box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 10px 22px rgb(0 255 136 / 12%); +} + +.script-eval-report__bar-col:hover .script-eval-report__bar-fill, +.script-eval-report__bar-col:focus-visible .script-eval-report__bar-fill { + filter: brightness(1.08); +} + +.script-eval-report__bar-col strong { + color: #eef5f2; +} + +.script-eval-report__bar-col > span { + color: #74807c; +} + +.script-eval-report__chart-note { + display: flex; + align-items: center; + gap: 9px; + min-height: 44px; + margin: 0 18px 18px; + border: 1px solid rgb(0 255 136 / 14%); + border-radius: var(--v5-radius-md); + background: rgb(0 255 136 / 5%); + color: #a9bbb4; + padding: 10px 14px; + font-size: 13px; + font-weight: 700; + line-height: 1.45; +} + +.script-eval-report__chart-note .anticon { + flex-shrink: 0; + color: var(--report-green); +} + +.script-eval-report__findings { + gap: 18px; +} + +.script-eval-report__finding-group p { + border: 1px solid rgb(255 255 255 / 5%); + border-radius: var(--v5-radius-md); + background: linear-gradient(180deg, rgb(255 255 255 / 3%), transparent), var(--report-row); + color: #d7e0dc; + font-size: 14px; + font-weight: 650; +} + +.script-eval-report__path-table th { + color: #87938f; + font-size: 12px; +} + +.script-eval-report__path-table td { + color: #d8e1dd; + font-size: 14px; +} + +.script-eval-report__path-table tr:hover td { + background: rgb(255 255 255 / 2.8%); +} + +.script-eval-v5-statusbar { + height: 34px; + border-top-color: var(--v5-line); + background: rgb(18 21 21 / 94%); + color: #7c8984; + font-weight: 700; +} + +.script-eval-v5.is-loading .script-eval-v5-status-dot { + animation: v5-pulse 1.2s ease infinite; +} + +.script-eval-v5.is-complete .script-eval-v5-status-dot, +.script-eval-v5.is-ready .script-eval-v5-status-dot { + box-shadow: 0 0 16px rgb(0 255 136 / 34%); +} + +@media (max-width: 1180px) { + .script-eval-report--inside .script-eval-report__body { + padding-inline: 24px; + } +} + +@media (max-width: 900px) { + .script-eval-v5-page { + padding-left: 0; + padding-top: 74px; + scroll-padding-top: 74px; + } + + .script-eval-v5-left { + flex-basis: 320px; + } + + .script-eval-v5-right-content { + padding: 18px; + } +} + +@media (max-width: 680px) { + .script-eval-v5 { + overflow: hidden; + } + + .script-eval-v5-page { + min-height: 0; + overflow-y: auto; + } + + .script-eval-v5-left { + flex: 0 0 auto; + overflow: visible; + max-height: none; + border-right: 0; + border-bottom: 1px solid var(--v5-line); + } + + .script-eval-v5-lp-section.is-fill { + flex: 0 0 auto; + } + + .script-eval-v5-history-list { + flex: 0 0 auto; + max-height: 180px; + } + + .script-eval-v5-lp-section { + padding: 16px; + } + + .script-eval-v5-upload-zone { + min-height: 148px; + padding: 18px 14px; + } + + .script-eval-v5-upload-icon { + width: 48px; + height: 48px; + margin-bottom: 10px; + border-radius: 15px; + font-size: 30px; + } + + .script-eval-v5-upload-text { + margin-bottom: 10px; + font-size: 15px; + } + + .script-eval-v5-upload-btn { + padding: 9px 24px; + font-size: 14px; + } + + .script-eval-v5-upload-hint { + margin-top: 8px; + font-size: 12px; + line-height: 1.45; + } + + .script-eval-v5-info-item { + min-height: 36px; + } + + .script-eval-v5-info-empty, + .script-eval-v5-history-empty { + min-height: 56px; + } + + .script-eval-v5-lp-bottom { + gap: 8px; + padding: 12px 16px 14px; + } + + .script-eval-v5-eval-btn { + min-height: 48px; + font-size: 16px; + } + + .script-eval-v5-export-btn { + min-height: 42px; + font-size: 13px; + } + + .script-eval-v5-right-topbar { + padding-inline: 16px; + } + + .script-eval-v5-right { + flex: 0 0 auto; + min-height: 560px; + overflow: visible; + } + + .script-eval-report--inside .script-eval-report__body { + padding: 16px 16px 36px; + } + + .script-eval-report__score-block { + min-height: 150px; + padding: 16px; + } + + .script-eval-report--inside .script-eval-report__score { + font-size: clamp(62px, 22vw, 82px); + } + + .script-eval-report__score-total { + padding-top: 24px; + font-size: 18px; + } + + .script-eval-report__summary h1 { + font-size: 24px; + } + + .script-eval-report__chart-note { + margin-inline: 14px; + } + + .script-eval-report__finding-group p, + .script-eval-report__path-table td { + font-size: 13px; + } +} diff --git a/src/styles/themes/dark-green.css b/src/styles/themes/dark-green.css index 7d97531..84993ce 100644 --- a/src/styles/themes/dark-green.css +++ b/src/styles/themes/dark-green.css @@ -5356,7 +5356,7 @@ } .web-shell[data-ui-theme="dark-green"] .auth-page__brand { - color: var(--fg-body); + color: var(--accent); font-size: clamp(44px, 7vw, 76px); line-height: 0.96; } @@ -8945,3 +8945,407 @@ ) { color: rgba(232, 240, 235, 0.62); } + +/* Canvas SaaS polish: refined production-tool surfaces without changing canvas behavior. */ +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page .studio-canvas { + background: + radial-gradient(circle at 18% 8%, rgba(var(--accent-rgb), 0.055), transparent 30%), + radial-gradient(circle at 72% 88%, rgba(255, 255, 255, 0.035), transparent 28%), + linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px), + var(--dg-page); + background-size: + auto, + auto, + 24px 24px, + 24px 24px, + auto; + color: var(--fg-body); +} + +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar, +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-zoom-controls { + border-color: rgba(255, 255, 255, 0.105); + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)), + rgba(17, 20, 21, 0.88); + box-shadow: + 0 16px 42px rgba(0, 0, 0, 0.26), + inset 0 1px 0 rgba(255, 255, 255, 0.04); + backdrop-filter: blur(16px); +} + +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar { + min-height: 42px; + border-radius: 13px; +} + +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__name { + color: var(--fg-strong); + font-size: 13px; + font-weight: 820; +} + +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__status, +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__autosave-status { + color: var(--fg-muted); +} + +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar :is( + .studio-canvas-project-bar__rename, + .studio-canvas-project-bar__recent, + .studio-canvas-project-bar__export, + .studio-canvas-project-bar__publish +) { + border-color: rgba(255, 255, 255, 0.095); + background: rgba(255, 255, 255, 0.035); + color: var(--fg-muted); + box-shadow: none; +} + +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar :is( + .studio-canvas-project-bar__rename, + .studio-canvas-project-bar__recent, + .studio-canvas-project-bar__export, + .studio-canvas-project-bar__publish +):hover:not(:disabled) { + border-color: rgba(var(--accent-rgb), 0.34); + background: rgba(var(--accent-rgb), 0.08); + color: var(--accent); +} + +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__save { + border-color: rgba(var(--accent-rgb), 0.72); + background: var(--accent); + color: var(--dg-button-text); + box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.18); +} + +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-zoom-controls { + gap: 3px; + padding: 5px; + border-radius: 14px; +} + +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-zoom-controls button { + min-width: 32px; + height: 30px; + border-radius: 9px; + color: var(--fg-muted); +} + +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-zoom-controls button:hover { + background: rgba(var(--accent-rgb), 0.1); + color: var(--accent); +} + +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-zoom-controls__pct { + color: var(--fg-body) !important; + font-weight: 780; +} + +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is( + .studio-canvas-text-node__card, + .studio-canvas-image-node__card, + .studio-canvas-video-node__preview +) { + border-color: rgba(255, 255, 255, 0.11); + border-radius: 14px; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 54%), + rgba(17, 20, 21, 0.96); + box-shadow: + 0 18px 42px rgba(0, 0, 0, 0.22), + inset 0 1px 0 rgba(255, 255, 255, 0.03); +} + +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is( + .studio-canvas-text-node.is-selected .studio-canvas-text-node__card, + .studio-canvas-image-node.is-selected .studio-canvas-image-node__card, + .studio-canvas-video-node.is-selected .studio-canvas-video-node__preview +) { + border-color: rgba(var(--accent-rgb), 0.72); + box-shadow: + 0 0 0 2px rgba(var(--accent-rgb), 0.28), + 0 20px 48px rgba(0, 0, 0, 0.28); +} + +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is( + .studio-canvas-text-node__title, + .studio-canvas-image-node__title, + .studio-canvas-video-node__title +) { + gap: 7px; + color: rgba(232, 240, 235, 0.68) !important; + font-size: 12px; + font-weight: 760; +} + +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is( + .studio-canvas-text-composer, + .studio-canvas-image-composer, + .studio-canvas-video-composer, + .studio-canvas-context-menu, + .studio-canvas-node-context-menu, + .studio-canvas-selection-context-menu, + .studio-canvas-add-node-menu, + .studio-canvas-save-asset__modal, + .studio-canvas-save-asset__cover-menu, + .studio-canvas-save-asset__select-menu, + .canvas-select-chip__dropdown +) { + border-color: rgba(255, 255, 255, 0.11); + border-radius: 14px; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)), + rgba(18, 21, 22, 0.96); + box-shadow: + 0 18px 46px rgba(0, 0, 0, 0.26), + inset 0 1px 0 rgba(255, 255, 255, 0.035); + backdrop-filter: blur(16px); +} + +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is( + .studio-canvas-text-composer textarea, + .studio-canvas-image-composer textarea, + .studio-canvas-video-composer textarea, + .studio-canvas-text-node__inline-input +) { + color: var(--fg-body); + line-height: 1.55; +} + +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is( + .studio-canvas-text-composer__footer button, + .studio-canvas-image-composer__footer button, + .studio-canvas-image-composer__tools button, + .studio-canvas-video-composer__tabs button, + .studio-canvas-video-composer__tools button, + .studio-canvas-video-composer__footer button, + .studio-canvas-context-menu button, + .studio-canvas-node-context-menu button, + .studio-canvas-selection-context-menu button, + .studio-canvas-add-node-menu button, + .studio-canvas-save-asset__head button, + .studio-canvas-save-asset__cover-menu button, + .studio-canvas-save-asset__select-menu button, + .studio-canvas-save-asset__existing-grid button, + .canvas-select-chip__trigger, + .canvas-select-chip__option +) { + border-color: rgba(255, 255, 255, 0.095) !important; + background: rgba(255, 255, 255, 0.035) !important; + color: var(--fg-body) !important; +} + +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is( + .studio-canvas-text-composer__footer button:hover, + .studio-canvas-image-composer__footer button:hover, + .studio-canvas-image-composer__tools button:hover, + .studio-canvas-video-composer__tabs button:hover, + .studio-canvas-video-composer__tools button:hover, + .studio-canvas-video-composer__footer button:hover, + .studio-canvas-context-menu button:hover:not(:disabled), + .studio-canvas-node-context-menu button:hover:not(:disabled), + .studio-canvas-selection-context-menu button:hover:not(:disabled), + .studio-canvas-add-node-menu button:hover:not(:disabled), + .studio-canvas-save-asset__head button:hover, + .studio-canvas-save-asset__cover-menu button:hover, + .studio-canvas-save-asset__select-menu button:hover, + .studio-canvas-save-asset__existing-grid button:hover, + .canvas-select-chip__trigger:hover, + .canvas-select-chip__option:hover, + .canvas-select-chip__option.is-active +) { + border-color: rgba(var(--accent-rgb), 0.34) !important; + background: rgba(var(--accent-rgb), 0.085) !important; + color: var(--accent) !important; +} + +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is( + .studio-canvas-text-composer__send, + .studio-canvas-image-composer__footer .studio-canvas-text-composer__send, + .studio-canvas-video-composer__footer > button:last-child, + .studio-canvas-save-asset__create +) { + border-color: rgba(var(--accent-rgb), 0.72) !important; + background: var(--accent) !important; + color: var(--dg-button-text) !important; + box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.18) !important; +} + +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page .studio-canvas-generate-button:not(.is-ready) { + border-color: rgba(255, 255, 255, 0.075) !important; + background: rgba(255, 255, 255, 0.028) !important; + color: var(--fg-soft) !important; + box-shadow: none !important; +} + +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is( + .studio-canvas-text-node__connector span, + .studio-canvas-image-node__connector span, + .studio-canvas-video-node__connector span, + .studio-canvas-text-node__glyph span +) { + border-color: rgba(255, 255, 255, 0.16); + background: rgba(255, 255, 255, 0.055); +} + +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is( + .studio-canvas-text-node__connector:hover span, + .studio-canvas-image-node__connector:hover span, + .studio-canvas-video-node__connector:hover span +) { + border-color: rgba(var(--accent-rgb), 0.56); + background: rgba(var(--accent-rgb), 0.14); + color: var(--accent) !important; +} + +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page .studio-canvas-node-links path { + stroke: rgba(var(--accent-rgb), 0.48); + stroke-width: 2; +} + +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page .studio-canvas-node-links circle { + fill: var(--accent); + stroke: rgba(10, 14, 13, 0.95); +} + +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page .studio-canvas-selection-box { + border-color: rgba(var(--accent-rgb), 0.72); + background: rgba(var(--accent-rgb), 0.11); +} + +.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page .studio-canvas-node-resize-handle { + border-color: rgba(var(--accent-rgb), 0.72); + background: var(--accent); + box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.18); +} + +@media (max-width: 900px) { + .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar { + top: 70px; + right: 12px; + left: 12px; + max-width: none; + overflow-x: auto; + } + + .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-zoom-controls { + bottom: 14px; + left: 12px; + } +} + +@media (max-width: 560px) { + .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + align-items: center; + gap: 7px; + min-height: 82px; + padding: 8px; + } + + .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__identity { + grid-column: 1 / 4; + max-width: none; + } + + .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__status, + .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__autosave-status { + display: none; + } + + .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__rename { + grid-column: 4; + } + + .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__recent { + grid-column: 1; + } + + .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__export { + grid-column: 2; + } + + .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__save { + grid-column: 3; + } + + .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__publish { + grid-column: 4; + } + + .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar :is( + .studio-canvas-project-bar__rename, + .studio-canvas-project-bar__recent, + .studio-canvas-project-bar__export, + .studio-canvas-project-bar__save, + .studio-canvas-project-bar__publish + ) { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 5px; + width: 100%; + min-width: 0; + min-height: 32px; + padding: 0 7px; + border-radius: 10px; + font-size: 11px; + font-weight: 780; + line-height: 1; + white-space: nowrap; + } + + .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__rename::after { + content: "编辑"; + } + + .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__recent span, + .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__export span, + .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__publish span, + .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__save span { + display: inline; + } + + .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__recent span, + .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__export span, + .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__publish span { + width: 0; + max-width: 0; + overflow: hidden; + font-size: 0; + opacity: 0; + pointer-events: none; + } + + .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__recent::after { + font-size: 11px; + content: "最近"; + } + + .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__export::after { + font-size: 11px; + content: "导出"; + } + + .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__publish::after { + font-size: 11px; + content: "提交"; + } + + .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__recent em { + display: inline-flex; + min-width: 16px; + height: 16px; + align-items: center; + justify-content: center; + padding: 0 4px; + border-radius: 999px; + background: rgba(var(--accent-rgb), 0.16); + color: var(--accent); + font-size: 10px; + } +}