GenarrativeAI/Genarrative
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

拆分图片画布生成对象注册表

Browse Source 
新增画布生成对象 dialog 管理 hook
补充生成对象注册表 hook 单测
调整 Lovart 式画布背景色板弹层
更新图片画布前端拆分跟踪文档
This commit is contained in:
kdletters
2026-06-17 05:29:04 +08:00
parent 9f45641ccd
commit 37a738e271
8 changed files with 595 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
src/index.css
View File

@@ -4469,14 +4469,14 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
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;
width: min(16rem, calc(100vw - 1.5rem));
gap: 0.5rem;
border: 1px solid rgba(203, 213, 225, 0.72);
border-radius: 0.86rem;
background: rgba(255, 255, 255, 0.98);
padding: 0.72rem;
color: #1f2937;
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.16);
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.15);
}
.image-canvas-editor__background-panel-head {
@@ -4484,76 +4484,184 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding-bottom: 0.15rem;
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;
.image-canvas-editor__background-close {
display: inline-flex;
width: 1.65rem;
height: 1.65rem;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: 0.42rem;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
background: transparent;
color: #334155;
}
.image-canvas-editor__panel-dock .image-canvas-editor__background-panel button {
width: auto;
height: auto;
}
.image-canvas-editor__background-close:hover {
border-color: #d7dfe9;
background: #f8fafc;
}
.image-canvas-editor__background-spectrum {
position: relative;
display: block;
height: 8.2rem;
overflow: hidden;
border-radius: 0.5rem;
background:
linear-gradient(to top, #000000, transparent),
linear-gradient(to right, #ffffff, transparent),
#ef4444;
}
.image-canvas-editor__background-spectrum input,
.image-canvas-editor__background-hue input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
}
.image-canvas-editor__background-spectrum-surface {
position: absolute;
inset: 0;
background:
linear-gradient(to top, #000000, transparent),
linear-gradient(to right, #ffffff, transparent);
pointer-events: none;
}
.image-canvas-editor__background-spectrum-handle {
position: absolute;
top: 0.22rem;
left: 0.22rem;
width: 0.72rem;
height: 0.72rem;
border: 2px solid #ffffff;
border-radius: 999px;
box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.25);
pointer-events: none;
}
.image-canvas-editor__background-hue {
position: relative;
display: block;
height: 0.78rem;
overflow: hidden;
border: 2px solid #ffffff;
border-radius: 999px;
background: linear-gradient(
to right,
#ff0000,
#ffff00,
#00ff00,
#00ffff,
#0000ff,
#ff00ff,
#ff0000
);
box-shadow: 0 0 0 1px rgba(203, 213, 225, 0.72);
}
.image-canvas-editor__background-presets {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.42rem;
display: flex;
gap: 0.62rem;
overflow-x: auto;
padding: 0.08rem 0.05rem 0.18rem;
scrollbar-width: none;
}
.image-canvas-editor__background-presets::-webkit-scrollbar {
display: none;
}
.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;
display: inline-flex;
width: 2rem;
height: 2rem;
flex: 0 0 auto;
align-items: center;
justify-content: center;
border: 2px solid transparent;
border-radius: 999px;
background: transparent;
padding: 0;
}
.image-canvas-editor__panel-dock .image-canvas-editor__background-preset {
width: 2rem;
height: 2rem;
}
.image-canvas-editor__background-preset[aria-pressed='true'] {
border-color: #38bdf8;
background: #e0f2fe;
color: #0369a1;
background: #f8fafc;
}
.image-canvas-editor__background-field {
display: grid;
grid-template-columns: 4.1rem minmax(0, 1fr);
.image-canvas-editor__background-preset .image-canvas-editor__background-swatch {
width: 1.55rem;
height: 1.55rem;
border-color: #e2e8f0;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.image-canvas-editor__background-hex-field {
display: flex;
align-items: center;
gap: 0.55rem;
gap: 0.45rem;
min-height: 1.9rem;
border-radius: 0.5rem;
background: #f4f5f7;
padding: 0 0.62rem;
color: #64748b;
font-size: 0.74rem;
font-weight: 840;
font-size: 0.72rem;
font-weight: 820;
}
.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 {
.image-canvas-editor__background-hex-field input {
min-width: 0;
flex: 1;
border: 0;
background: transparent;
color: #475569;
font-family:
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
'Courier New', monospace;
font-size: 0.78rem;
font-weight: 820;
outline: none;
text-transform: lowercase;
}
.image-canvas-editor__background-reset {
justify-self: end;
display: inline-flex;
justify-self: start;
align-items: center;
gap: 0.34rem;
border-radius: 0.56rem;
padding-inline: 0.65rem;
border: 1px solid #d7dfe9;
border-radius: 0.5rem;
background: #ffffff;
padding: 0.34rem 0.55rem;
color: #475569;
font-size: 0.72rem;
font-weight: 820;
}
.image-canvas-editor__background-reset:hover {
border-color: #38bdf8;
background: #eff6ff;
color: #0369a1;
}
.image-canvas-editor__panel-dock button:hover,