From 8c6ab520cca5767743e3052d6616620e078380b5 Mon Sep 17 00:00:00 2001 From: gujiaming <52187003+AtomsH4@users.noreply.github.com> Date: Mon, 6 Jul 2026 11:42:57 +0800 Subject: [PATCH 1/2] refactor(paintings): use inline artboard loading bar Signed-off-by: gujiaming <52187003+AtomsH4@users.noreply.github.com> --- src/renderer/i18n/locales/en-us.json | 2 +- src/renderer/i18n/locales/zh-cn.json | 2 +- src/renderer/i18n/locales/zh-tw.json | 2 +- .../pages/paintings/components/Artboard.tsx | 34 +++++++++---------- .../components/__tests__/Artboard.test.tsx | 29 +++++++++++++++- 5 files changed, 47 insertions(+), 22 deletions(-) diff --git a/src/renderer/i18n/locales/en-us.json b/src/renderer/i18n/locales/en-us.json index 735d137482c..d8117c1fb53 100644 --- a/src/renderer/i18n/locales/en-us.json +++ b/src/renderer/i18n/locales/en-us.json @@ -4434,7 +4434,7 @@ }, "generate_failed": "Failed to generate image", "generated_image": "Generated Image", - "generating": "Generating...", + "generating": "Drawing in progress. Please do not leave this page.", "go_to_settings": "Go to Settings", "guidance_scale": "Guidance Scale", "guidance_scale_tip": "Classifier Free Guidance ({{min}}-{{max}}). How close you want the model to stick to your prompt when looking for a related image to show you", diff --git a/src/renderer/i18n/locales/zh-cn.json b/src/renderer/i18n/locales/zh-cn.json index 1175bc96d61..97a3bb67119 100644 --- a/src/renderer/i18n/locales/zh-cn.json +++ b/src/renderer/i18n/locales/zh-cn.json @@ -4434,7 +4434,7 @@ }, "generate_failed": "生成图像失败", "generated_image": "生成图片", - "generating": "生成中...", + "generating": "绘图进行中，请不要离开页面", "go_to_settings": "去设置", "guidance_scale": "引导比例", "guidance_scale_tip": "无分类器指导 ({{min}}-{{max}})。控制模型在寻找相关图像时对提示词的遵循程度", diff --git a/src/renderer/i18n/locales/zh-tw.json b/src/renderer/i18n/locales/zh-tw.json index dce9ffc6cb5..48bb0fbe747 100644 --- a/src/renderer/i18n/locales/zh-tw.json +++ b/src/renderer/i18n/locales/zh-tw.json @@ -4434,7 +4434,7 @@ }, "generate_failed": "無法生成圖片", "generated_image": "產生的圖片", - "generating": "生成中...", + "generating": "繪圖進行中，請不要離開頁面", "go_to_settings": "前往設定", "guidance_scale": "引導比例", "guidance_scale_tip": "無分類器指導 ({{min}}-{{max}})。控制模型在尋找相關影像時對提示詞的遵循程度", diff --git a/src/renderer/pages/paintings/components/Artboard.tsx b/src/renderer/pages/paintings/components/Artboard.tsx index 7e9e9761f47..aad0fd88f68 100644 --- a/src/renderer/pages/paintings/components/Artboard.tsx +++ b/src/renderer/pages/paintings/components/Artboard.tsx @@ -1,7 +1,6 @@ import { Button, Tooltip } from '@cherrystudio/ui' import ImageViewer from '@renderer/components/ImageViewer' import { ImageDown, ImageUp, RefreshCcw, RotateCcwSquare, RotateCwSquare, ZoomIn, ZoomOut } from 'lucide-react' -import { motion } from 'motion/react' import { type FC, type PointerEvent, @@ -40,27 +39,26 @@ export interface ArtboardProps { loadText?: ReactNode } -const LoadingStateCard: FC<{ text: ReactNode; onCancel: () => void; cancelLabel: string }> = ({ +const InlineLoadingState: FC<{ text: ReactNode; onCancel: () => void; cancelLabel: string }> = ({ text, onCancel, cancelLabel }) => { + const progressLabel = typeof text === 'string' ? text : undefined + return ( -
-
- - +
+
{text}
+
+
-
{text}
-
@@ -253,8 +251,8 @@ const Artboard: FC = ({ painting, isLoading, onCancel, imageCover ) : null} {isLoading && ( -
- +
+
)}
diff --git a/src/renderer/pages/paintings/components/__tests__/Artboard.test.tsx b/src/renderer/pages/paintings/components/__tests__/Artboard.test.tsx index 239994de430..5ac5a73bfce 100644 --- a/src/renderer/pages/paintings/components/__tests__/Artboard.test.tsx +++ b/src/renderer/pages/paintings/components/__tests__/Artboard.test.tsx @@ -5,7 +5,9 @@ import { beforeAll, describe, expect, it, vi } from 'vitest' import type { PaintingData } from '../../model/types/paintingData' vi.mock('react-i18next', () => ({ - useTranslation: () => ({ t: (key: string) => key }) + useTranslation: () => ({ + t: (key: string) => (key === 'paintings.generating' ? '绘图进行中，请不要离开页面' : key) + }) })) vi.mock('@renderer/utils/image', () => ({ @@ -53,6 +55,31 @@ describe('Artboard', () => { HTMLElement.prototype.hasPointerCapture ??= vi.fn(() => true) }) + it('renders an inline loading bar and cancel action while generating', () => { + const onCancel = vi.fn() + + render() + + const loadingStatus = screen.getByRole('status') + expect(loadingStatus).toHaveTextContent('绘图进行中，请不要离开页面') + expect(loadingStatus.className).not.toContain('border') + + const loadingBar = screen.getByRole('progressbar', { name: '绘图进行中，请不要离开页面' }) + expect(loadingBar).toBeInTheDocument() + expect(loadingBar.firstElementChild).toHaveClass('animation-migration-backup-progress-indeterminate') + expect(loadingBar.firstElementChild).toHaveClass('bg-linear-to-r') + + fireEvent.click(screen.getByRole('button', { name: 'common.cancel' })) + + expect(onCancel).toHaveBeenCalledTimes(1) + }) + + it('does not render the loading bar when idle', () => { + render() + + expect(screen.queryByRole('progressbar')).not.toBeInTheDocument() + }) + it('resets image transform when switching generated images', () => { render() From ffc0112abb2dec3fb153af14f42aa268af7f1e6e Mon Sep 17 00:00:00 2001 From: gujiaming <52187003+AtomsH4@users.noreply.github.com> Date: Mon, 6 Jul 2026 11:50:57 +0800 Subject: [PATCH 2/2] style(paintings): use spacing token for inline loading width Signed-off-by: gujiaming <52187003+AtomsH4@users.noreply.github.com> --- src/renderer/pages/paintings/components/Artboard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/pages/paintings/components/Artboard.tsx b/src/renderer/pages/paintings/components/Artboard.tsx index aad0fd88f68..880026efdc6 100644 --- a/src/renderer/pages/paintings/components/Artboard.tsx +++ b/src/renderer/pages/paintings/components/Artboard.tsx @@ -48,7 +48,7 @@ const InlineLoadingState: FC<{ text: ReactNode; onCancel: () => void; cancelLabe return (
{text}