OmniAI/omniai-web
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: 图片工作台/镜头实验室/局部重绘/数字人/去水印页面UI优化

Browse Source
This commit is contained in:
OmniAI Developer
2026-06-03 20:36:07 +08:00
parent 7afcfa54c2
commit 8d7f5d9a8a
5 changed files with 104 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/digital-human/DigitalHumanPage.tsx
+11 -9
View File
@@ -567,7 +567,17 @@ function DigitalHumanPage({
</button>
)}
{resultVideoUrl && (
<div className="studio-result-actions studio-result-actions--with-clear">
<button type="button" className="studio-generate-btn" onClick={() => {
setResultVideoUrl("");
setActiveTaskId("");
setTaskProgress(0);
setNotice("已清空工作区");
}}>
清空
</button>
)}
{resultVideoUrl && (
<div className="studio-result-actions">
<button type="button" onClick={() => void handleDownloadResult()} disabled={isDownloadingResult}>
<DownloadOutlined />
{isDownloadingResult ? "保存中" : "保存本地"}
@@ -576,14 +586,6 @@ function DigitalHumanPage({
<InboxOutlined />
{isSavingResultAsset ? "加入中" : "加入资产库"}
</button>
<button type="button" onClick={() => {
setResultVideoUrl("");
setActiveTaskId("");
setTaskProgress(0);
setNotice("已清空工作区");
}}>
清空
</button>
</div>
)}
</div>
src/features/image-workbench/ImageWorkbenchPage.tsx
+1 -1
View File
@@ -787,7 +787,7 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie
</div>
) : inpaintResultImages.length && activeTool === "inpaint" ? (
<div className="image-workbench-inpaint-stage">
<img src={inpaintResultImages[0]} alt="重绘结果" style={{ maxWidth: "90%", maxHeight: "90%", borderRadius: 8, objectFit: "contain" }} />
<img src={inpaintResultImages[0]} alt="重绘结果" style={{ maxWidth: "95%", maxHeight: "95%", borderRadius: 8, objectFit: "contain" }} />
<div className="image-workbench-inpaint-bottom-bar">
<button type="button" className="image-workbench-inpaint-edit-btn" onClick={() => { setInpaintResultImages([]); setIsMaskEditing(true); setInpaintTool("brush"); setCanvasInitCounter((c) => c + 1); }}>
<HighlightOutlined /> 重新编辑遮罩
src/features/watermark-removal/WatermarkRemovalPage.tsx
+3 -3
View File
@@ -356,13 +356,13 @@ function WatermarkRemovalPage({
</p>
</section>
<div className="image-workbench-actions">
<div className="image-workbench-actions watermark-removal-actions">
<button type="button" className="image-workbench-primary" onClick={() => void handleStart()} disabled={isProcessing}>
<DeleteOutlined />
{isProcessing ? "处理中" : "开始去水印"}
{isProcessing ? "处理中..." : "开始去水印"}
</button>
{isProcessing && (
<button type="button" className="image-workbench-cancel" onClick={handleCancel} style={{ marginTop: 6 }}>
<button type="button" className="image-workbench-cancel" onClick={handleCancel}>
取消
</button>
)}
src/styles/pages/image-workbench.css
+86 -43
View File
@@ -595,6 +595,7 @@ textarea.image-workbench-prompt {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
color: var(--fg-dim);
font-size: 14px;
@@ -628,16 +629,24 @@ textarea.image-workbench-prompt {
height: 100%;
}
.image-workbench-camera-stage {
flex-direction: column;
gap: 16px;
}
.image-workbench-inpaint-stage img,
.image-workbench-camera-stage img {
max-width: 90%;
max-height: 90%;
max-width: 95%;
max-height: 95%;
border-radius: 8px;
object-fit: contain;
}
.image-workbench-inpaint-stage > span,
.image-workbench-camera-stage > span {
.image-workbench-camera-stage img {
max-height: 68%;
}
.image-workbench-inpaint-stage > span {
position: absolute;
bottom: 12px;
left: 50%;
@@ -650,6 +659,15 @@ textarea.image-workbench-prompt {
white-space: nowrap;
}
.image-workbench-camera-stage > span {
padding: 4px 12px;
border-radius: var(--radius-xs);
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 13px;
white-space: nowrap;
}
/* Inpaint mask canvas */
.image-workbench-inpaint-canvas {
display: block;
@@ -692,16 +710,8 @@ textarea.image-workbench-prompt {
color: #fff;
}
.image-workbench-camera-stage > span {
bottom: 64px;
}
.image-workbench-camera-stage > .image-workbench-result-actions {
position: absolute;
bottom: 16px;
left: 50%;
width: min(360px, calc(100% - 32px));
transform: translateX(-50%);
}
.image-workbench-inpaint-tool.is-active {
@@ -812,7 +822,7 @@ textarea.image-workbench-prompt {
text-align: center;
}
.image-workbench-result-grid {
.image-workbench-panel--right .image-workbench-result-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
gap: 8px;
@@ -1470,6 +1480,27 @@ textarea.image-workbench-prompt {
margin: 0;
}
.watermark-removal-actions {
flex-direction: column;
gap: 10px;
padding: 12px 0 0;
}
.watermark-removal-actions .image-workbench-primary {
width: 100%;
min-height: 48px;
justify-content: center;
font-size: 14px;
font-weight: 750;
}
.watermark-removal-actions .image-workbench-cancel {
width: 100%;
min-height: 42px;
justify-content: center;
font-size: 13px;
}
.watermark-removal-compare {
display: grid;
grid-template-columns: 1fr 1fr;
@@ -1522,34 +1553,42 @@ textarea.image-workbench-prompt {
.watermark-removal-compare__actions {
position: absolute;
bottom: 10px;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
width: min(480px, calc(100% - 32px));
}
.watermark-removal-compare__actions button {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 12px;
border: none;
justify-content: center;
gap: 10px;
min-height: 64px;
padding: 0 24px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xs);
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 12px;
background: var(--bg-inset);
color: var(--fg-body);
font: inherit;
font-size: 18px;
font-weight: 750;
cursor: pointer;
backdrop-filter: blur(4px);
transition: background 0.15s;
backdrop-filter: none;
transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.watermark-removal-compare__actions button:hover:not(:disabled) {
background: rgba(0, 0, 0, 0.8);
border-color: rgba(var(--accent-rgb), 0.42);
background: rgba(var(--accent-rgb), 0.11);
color: var(--accent);
}
.watermark-removal-compare__actions button:disabled {
opacity: 0.5;
opacity: 0.56;
cursor: not-allowed;
}
@@ -1566,33 +1605,33 @@ textarea.image-workbench-prompt {
}
.image-workbench-generating strong {
font-size: 15px;
font-size: 20px;
color: var(--fg-default);
}
.image-workbench-progress-bar {
width: 200px;
height: 6px;
border-radius: 3px;
width: 320px;
height: 8px;
border-radius: 4px;
background: var(--bg-inset);
overflow: hidden;
}
.image-workbench-progress-fill {
height: 100%;
border-radius: 3px;
border-radius: 4px;
background: var(--accent);
transition: width 0.3s ease;
}
.image-workbench-cancel {
margin-top: 8px;
padding: 6px 16px;
margin-top: 12px;
padding: 8px 24px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xs);
background: transparent;
color: var(--fg-muted);
font-size: 13px;
font-size: 15px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
@@ -1603,14 +1642,17 @@ textarea.image-workbench-prompt {
}
.image-workbench-result-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
width: 100%;
height: 100%;
padding: 16px;
margin: 0;
padding: 24px;
overflow-y: auto;
align-content: start;
gap: 16px;
}
.image-workbench-result-item {
@@ -1637,8 +1679,9 @@ textarea.image-workbench-prompt {
.image-workbench-result-card {
display: grid;
min-width: 0;
width: min(100%, 500px);
align-content: start;
gap: 8px;
gap: 12px;
}
.image-workbench-result-actions {
@@ -1650,16 +1693,16 @@ textarea.image-workbench-prompt {
.image-workbench-result-actions button {
display: inline-flex;
min-width: 0;
min-height: 34px;
min-height: 48px;
align-items: center;
justify-content: center;
gap: 5px;
gap: 8px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xs);
background: var(--bg-inset);
color: var(--fg-body);
font: inherit;
font-size: 12px;
font-size: 14px;
font-weight: 750;
cursor: pointer;
transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
src/styles/pages/studio-layout.css
+3 -7
View File
@@ -376,23 +376,19 @@
margin-top: 8px;
}
.studio-result-actions--with-clear {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.studio-result-actions button {
display: inline-flex;
min-width: 0;
min-height: 36px;
min-height: 48px;
align-items: center;
justify-content: center;
gap: 6px;
gap: 8px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xs);
background: var(--bg-inset);
color: var(--fg-body);
font: inherit;
font-size: 12px;
font-size: 14px;
font-weight: 750;
cursor: pointer;
transition: border-color 140ms ease, background 140ms ease, color 140ms ease;