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