feat: 剧本评分SaaS化精修、画布视觉升级、电商克隆预览响应式修复
【剧本评分页面 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）调整为强调绿色
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user