diff --git a/src/features/digital-human/DigitalHumanPage.tsx b/src/features/digital-human/DigitalHumanPage.tsx index 8db7a91..862dd33 100644 --- a/src/features/digital-human/DigitalHumanPage.tsx +++ b/src/features/digital-human/DigitalHumanPage.tsx @@ -567,7 +567,17 @@ function DigitalHumanPage({ )} {resultVideoUrl && ( -
+ + )} + {resultVideoUrl && ( +
-
)}
diff --git a/src/features/image-workbench/ImageWorkbenchPage.tsx b/src/features/image-workbench/ImageWorkbenchPage.tsx index c88c634..77122cf 100644 --- a/src/features/image-workbench/ImageWorkbenchPage.tsx +++ b/src/features/image-workbench/ImageWorkbenchPage.tsx @@ -787,7 +787,7 @@ function ImageWorkbenchPage({ initialTool = "workbench", onOpenMore, onSelectVie ) : inpaintResultImages.length && activeTool === "inpaint" ? (
- 重绘结果 + 重绘结果
{isProcessing && ( - )} diff --git a/src/styles/pages/image-workbench.css b/src/styles/pages/image-workbench.css index 384ada2..1497b92 100644 --- a/src/styles/pages/image-workbench.css +++ b/src/styles/pages/image-workbench.css @@ -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; diff --git a/src/styles/pages/studio-layout.css b/src/styles/pages/studio-layout.css index 743cfd7..0bfdbb2 100644 --- a/src/styles/pages/studio-layout.css +++ b/src/styles/pages/studio-layout.css @@ -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;