修复编辑器登录和背景设置回归
恢复编辑器接口 401 / 403 触发登录弹窗 补齐未登录上传登录后续传和上传失败提示 恢复画布背景设置面板并支持预设色、自定义颜色、HEX 输入和默认恢复 补充编辑器回归测试和 TRACKING 验证记录
This commit is contained in:
409
src/index.css
409
src/index.css
@@ -3329,6 +3329,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
}
|
||||
|
||||
.image-canvas-editor__icon-button,
|
||||
.image-canvas-editor__project-back-button,
|
||||
.image-canvas-editor__floating-toolbar button,
|
||||
.image-canvas-editor__bottom-toolbar button,
|
||||
.image-canvas-editor__reset-button {
|
||||
@@ -3440,6 +3441,38 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
font-weight: 820;
|
||||
}
|
||||
|
||||
.image-canvas-editor__asset-folder--move-target
|
||||
> .image-canvas-editor__asset-folder-header {
|
||||
border-color: #93c5fd;
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.image-canvas-editor__asset-folder-sticky-target {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
margin-bottom: 0.45rem;
|
||||
border: 1px solid #93c5fd;
|
||||
border-radius: 0.45rem;
|
||||
background: #eff6ff;
|
||||
padding: 0.38rem 0.5rem;
|
||||
color: #1d4ed8;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 880;
|
||||
box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
|
||||
}
|
||||
|
||||
.image-canvas-editor__asset-folder-sticky-target span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.image-canvas-editor__asset-folder-list {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
@@ -3473,6 +3506,80 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
background: #dbeafe;
|
||||
}
|
||||
|
||||
.image-canvas-editor__asset-row--uploading {
|
||||
border-color: #bfdbfe;
|
||||
background: #f8fbff;
|
||||
}
|
||||
|
||||
.image-canvas-editor__asset-row--uploading:hover {
|
||||
transform: none;
|
||||
border-color: #93c5fd;
|
||||
background: #f8fbff;
|
||||
}
|
||||
|
||||
.image-canvas-editor__asset-row--upload-failed {
|
||||
border-color: #fecaca;
|
||||
background: #fff7f7;
|
||||
}
|
||||
|
||||
.image-canvas-editor__asset-drag-preview {
|
||||
position: fixed;
|
||||
z-index: 80;
|
||||
max-width: 11rem;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 1px solid #bfdbfe;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
padding: 0.4rem 0.65rem;
|
||||
color: #1d4ed8;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 880;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
|
||||
}
|
||||
|
||||
.image-canvas-editor__asset-upload-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: rgba(248, 250, 252, 0.74);
|
||||
color: #1d4ed8;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 880;
|
||||
}
|
||||
|
||||
.image-canvas-editor__asset-upload-progress {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
color: #64748b;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 780;
|
||||
}
|
||||
|
||||
.image-canvas-editor__asset-upload-progress > div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.image-canvas-editor__asset-upload-progress progress {
|
||||
width: 100%;
|
||||
height: 0.35rem;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.image-canvas-editor__asset-upload-progress progress::-webkit-progress-bar {
|
||||
background: #e2e8f0;
|
||||
}
|
||||
|
||||
.image-canvas-editor__asset-upload-progress progress::-webkit-progress-value {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.image-canvas-editor__asset-batch-toolbar {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
@@ -3496,6 +3603,41 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.image-canvas-editor__upload-drop-overlay {
|
||||
position: absolute;
|
||||
z-index: 30;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
gap: 0.25rem;
|
||||
border: 1px dashed #60a5fa;
|
||||
background: rgba(239, 246, 255, 0.72);
|
||||
color: #1d4ed8;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.image-canvas-editor__upload-drop-overlay span {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 820;
|
||||
}
|
||||
|
||||
.image-canvas-editor__upload-drop-overlay strong {
|
||||
font-size: 1rem;
|
||||
font-weight: 920;
|
||||
}
|
||||
|
||||
.image-canvas-editor__upload-drop-overlay--assets {
|
||||
inset: 0.45rem;
|
||||
border-radius: 0.55rem;
|
||||
}
|
||||
|
||||
.image-canvas-editor__upload-drop-overlay--canvas {
|
||||
inset: 0.85rem;
|
||||
border-radius: 0.65rem;
|
||||
}
|
||||
|
||||
.image-canvas-editor__asset-button {
|
||||
display: block;
|
||||
border: 0;
|
||||
@@ -3702,7 +3844,83 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
padding: 0.55rem 0.7rem;
|
||||
}
|
||||
|
||||
.image-canvas-editor__topbar-actions {
|
||||
display: inline-flex;
|
||||
min-width: 0;
|
||||
flex: 0 1 auto;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.image-canvas-editor__project-back-button {
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
flex: 0 0 auto;
|
||||
border-radius: 0.45rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.image-canvas-editor__project-title-row {
|
||||
display: inline-flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.image-canvas-editor__project-title-button {
|
||||
min-width: 0;
|
||||
max-width: min(24rem, 42vw);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.image-canvas-editor__project-title-button h1 {
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.image-canvas-editor__project-rename-button {
|
||||
opacity: 0;
|
||||
transition: opacity 140ms ease;
|
||||
}
|
||||
|
||||
.image-canvas-editor__project-title-row:hover
|
||||
.image-canvas-editor__project-rename-button,
|
||||
.image-canvas-editor__project-rename-button:focus-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.image-canvas-editor__project-title-form {
|
||||
display: inline-flex;
|
||||
min-width: 0;
|
||||
max-width: min(34rem, 58vw);
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.image-canvas-editor__project-title-input {
|
||||
width: clamp(9rem, 28vw, 18rem);
|
||||
}
|
||||
|
||||
.image-canvas-editor__project-title-error {
|
||||
max-width: 10rem;
|
||||
overflow: hidden;
|
||||
color: #dc2626;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 760;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.image-canvas-editor__zoom-menu-wrap {
|
||||
margin-left: auto;
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
display: inline-flex;
|
||||
@@ -3800,6 +4018,19 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.image-canvas-editor__layer--locked {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.image-canvas-editor__layer--locked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -0.28rem;
|
||||
border: 1px dashed rgba(71, 85, 105, 0.55);
|
||||
border-radius: 0.32rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.image-canvas-editor__layer--generating {
|
||||
cursor: progress;
|
||||
}
|
||||
@@ -4227,30 +4458,104 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
height: 0.9rem;
|
||||
}
|
||||
|
||||
.image-canvas-editor__background-menu {
|
||||
display: inline-flex;
|
||||
gap: 0.25rem;
|
||||
padding: 0.32rem;
|
||||
}
|
||||
|
||||
.image-canvas-editor__background-menu-item {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
border-radius: 0.4rem;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.image-canvas-editor__background-menu-item[aria-pressed='true'] {
|
||||
border-color: #38bdf8;
|
||||
background: #e0f2fe;
|
||||
}
|
||||
|
||||
.image-canvas-editor__background-swatch {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.image-canvas-editor__background-panel {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: calc(100% + 0.55rem);
|
||||
z-index: 24;
|
||||
display: grid;
|
||||
width: min(18.5rem, calc(100vw - 1.5rem));
|
||||
gap: 0.62rem;
|
||||
border: 1px solid rgba(148, 163, 184, 0.32);
|
||||
border-radius: 0.82rem;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
padding: 0.72rem;
|
||||
color: #1f2937;
|
||||
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.16);
|
||||
}
|
||||
|
||||
.image-canvas-editor__background-panel-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 880;
|
||||
}
|
||||
|
||||
.image-canvas-editor__background-preview {
|
||||
width: 2rem;
|
||||
height: 1.35rem;
|
||||
flex: 0 0 auto;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 0.42rem;
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.image-canvas-editor__background-presets {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.42rem;
|
||||
}
|
||||
|
||||
.image-canvas-editor__background-preset {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
justify-items: center;
|
||||
gap: 0.26rem;
|
||||
border: 1px solid #d7dfe9;
|
||||
border-radius: 0.58rem;
|
||||
background: #ffffff;
|
||||
padding: 0.44rem 0.28rem;
|
||||
color: #475569;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 820;
|
||||
}
|
||||
|
||||
.image-canvas-editor__background-preset[aria-pressed='true'] {
|
||||
border-color: #38bdf8;
|
||||
background: #e0f2fe;
|
||||
color: #0369a1;
|
||||
}
|
||||
|
||||
.image-canvas-editor__background-field {
|
||||
display: grid;
|
||||
grid-template-columns: 4.1rem minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 0.55rem;
|
||||
color: #64748b;
|
||||
font-size: 0.74rem;
|
||||
font-weight: 840;
|
||||
}
|
||||
|
||||
.image-canvas-editor__background-field input[type='color'] {
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
border: 1px solid #d7dfe9;
|
||||
border-radius: 0.56rem;
|
||||
background: #ffffff;
|
||||
padding: 0.16rem;
|
||||
}
|
||||
|
||||
.image-canvas-editor__background-field--hex .platform-text-field {
|
||||
font-family:
|
||||
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
|
||||
'Courier New', monospace;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.image-canvas-editor__background-reset {
|
||||
justify-self: end;
|
||||
gap: 0.34rem;
|
||||
border-radius: 0.56rem;
|
||||
padding-inline: 0.65rem;
|
||||
}
|
||||
|
||||
.image-canvas-editor__panel-dock button:hover,
|
||||
.image-canvas-editor__panel-dock button[aria-pressed='true'] {
|
||||
transform: translateY(-1px);
|
||||
@@ -4951,8 +5256,51 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
|
||||
.image-canvas-editor__context-menu {
|
||||
position: fixed;
|
||||
z-index: 28;
|
||||
min-width: 9rem;
|
||||
z-index: 35;
|
||||
display: grid;
|
||||
width: 11.75rem;
|
||||
gap: 0.12rem;
|
||||
border: 1px solid rgba(203, 213, 225, 0.95);
|
||||
border-radius: 0.5rem;
|
||||
background: #ffffff;
|
||||
padding: 0.32rem;
|
||||
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.image-canvas-editor__context-menu button {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 1.82rem;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
border: 0;
|
||||
border-radius: 0.34rem;
|
||||
background: transparent;
|
||||
padding: 0 0.55rem;
|
||||
color: inherit;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 820;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.image-canvas-editor__context-menu button:hover:not(:disabled) {
|
||||
background: #eef6ff;
|
||||
color: #0f4a87;
|
||||
}
|
||||
|
||||
.image-canvas-editor__context-menu button:disabled {
|
||||
cursor: not-allowed;
|
||||
color: #a3acba;
|
||||
}
|
||||
|
||||
.image-canvas-editor__context-menu hr {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin: 0.18rem 0;
|
||||
border: 0;
|
||||
background: #e2e8f0;
|
||||
}
|
||||
|
||||
.image-canvas-editor__context-menu-item {
|
||||
@@ -4960,6 +5308,15 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.image-canvas-editor__context-menu-danger {
|
||||
color: #b42318 !important;
|
||||
}
|
||||
|
||||
.image-canvas-editor__context-menu-danger:hover:not(:disabled) {
|
||||
background: #fff1f2 !important;
|
||||
color: #991b1b !important;
|
||||
}
|
||||
|
||||
.image-canvas-editor__quick-edit-panel {
|
||||
position: absolute;
|
||||
z-index: 14;
|
||||
@@ -5126,7 +5483,10 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
}
|
||||
|
||||
.image-canvas-editor__metadata-dialog {
|
||||
border: 1px solid rgba(226, 232, 240, 0.92);
|
||||
background: #ffffff;
|
||||
color: #1f2937;
|
||||
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
|
||||
}
|
||||
|
||||
.image-canvas-editor__metadata-body {
|
||||
@@ -12497,3 +12857,10 @@ button {
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #3f3f46;
|
||||
}
|
||||
|
||||
.image-canvas-editor__metadata-dialog.platform-modal-shell {
|
||||
border-color: rgba(226, 232, 240, 0.92) !important;
|
||||
background: #ffffff !important;
|
||||
color: #1f2937 !important;
|
||||
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18) !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user