复用项目页错误提示组件
项目页读取失败提示改为复用 PlatformStatusMessage 删除项目页局部错误提示视觉样式 补充项目页错误状态测试和 TRACKING 记录
This commit is contained in:
@@ -80,3 +80,4 @@
|
|||||||
- 2026-06-14 组件复用修正:编辑器生成图元数据弹窗改为复用 `UnifiedModal`,不再手写元数据弹窗遮罩、dialog role 和关闭按钮;验证命令:`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/UnifiedModal.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。
|
- 2026-06-14 组件复用修正:编辑器生成图元数据弹窗改为复用 `UnifiedModal`,不再手写元数据弹窗遮罩、dialog role 和关闭按钮;验证命令:`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/UnifiedModal.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。
|
||||||
- 2026-06-14 组件复用修正:编辑器“修改图片”弹窗改为复用 `UnifiedModal`,删除编辑器局部 modal backdrop、dialog role、header 和关闭按钮样式;验证命令:`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/UnifiedModal.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。
|
- 2026-06-14 组件复用修正:编辑器“修改图片”弹窗改为复用 `UnifiedModal`,删除编辑器局部 modal backdrop、dialog role、header 和关闭按钮样式;验证命令:`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/UnifiedModal.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。
|
||||||
- 2026-06-14 组件复用修正:新增 `PlatformBatchActionToolbar`,项目页选择模式底部批量操作栏改为复用平台批量工具栏原语;验证命令:`npm run test -- src/components/common/PlatformBatchActionToolbar.test.tsx src/components/project/ProjectGalleryView.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。
|
- 2026-06-14 组件复用修正:新增 `PlatformBatchActionToolbar`,项目页选择模式底部批量操作栏改为复用平台批量工具栏原语;验证命令:`npm run test -- src/components/common/PlatformBatchActionToolbar.test.tsx src/components/project/ProjectGalleryView.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。
|
||||||
|
- 2026-06-14 组件复用修正:项目页读取失败提示改为复用 `PlatformStatusMessage`,页面局部错误样式只保留布局间距;验证命令:`npm run test -- src/components/project/ProjectGalleryView.test.tsx src/components/common/PlatformStatusMessage.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。
|
||||||
|
|||||||
@@ -67,6 +67,18 @@ describe('ProjectGalleryView', () => {
|
|||||||
expect(onOpenProject).toHaveBeenCalledWith('editor-project-1');
|
expect(onOpenProject).toHaveBeenCalledWith('editor-project-1');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('renders project loading errors through the shared status message', async () => {
|
||||||
|
listEditorProjectsMock.mockRejectedValueOnce(new Error('读取项目失败'));
|
||||||
|
|
||||||
|
render(<ProjectGalleryView onOpenProject={vi.fn()} />);
|
||||||
|
|
||||||
|
const alert = await screen.findByRole('alert');
|
||||||
|
|
||||||
|
expect(alert.textContent).toContain('读取项目失败');
|
||||||
|
expect(alert.className).toContain('platform-status-message');
|
||||||
|
expect(alert.className).toContain('project-gallery__error');
|
||||||
|
});
|
||||||
|
|
||||||
it('renames and deletes a project from the hover menu', async () => {
|
it('renames and deletes a project from the hover menu', async () => {
|
||||||
listEditorProjectsMock.mockResolvedValueOnce(projectItems);
|
listEditorProjectsMock.mockResolvedValueOnce(projectItems);
|
||||||
renameEditorProjectMock.mockResolvedValueOnce({
|
renameEditorProjectMock.mockResolvedValueOnce({
|
||||||
|
|||||||
@@ -24,6 +24,7 @@ import {
|
|||||||
PlatformFloatingMenuItem,
|
PlatformFloatingMenuItem,
|
||||||
} from '../common/PlatformFloatingMenu';
|
} from '../common/PlatformFloatingMenu';
|
||||||
import { PlatformIconButton } from '../common/PlatformIconButton';
|
import { PlatformIconButton } from '../common/PlatformIconButton';
|
||||||
|
import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
|
||||||
import { PlatformTextField } from '../common/PlatformTextField';
|
import { PlatformTextField } from '../common/PlatformTextField';
|
||||||
import { UnifiedModal } from '../common/UnifiedModal';
|
import { UnifiedModal } from '../common/UnifiedModal';
|
||||||
|
|
||||||
@@ -307,9 +308,14 @@ export function ProjectGalleryView({ onOpenProject }: ProjectGalleryViewProps) {
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
{errorMessage ? (
|
{errorMessage ? (
|
||||||
<div className="project-gallery__error" role="alert">
|
<PlatformStatusMessage
|
||||||
|
tone="error"
|
||||||
|
surface="platform"
|
||||||
|
className="project-gallery__error"
|
||||||
|
role="alert"
|
||||||
|
>
|
||||||
{errorMessage}
|
{errorMessage}
|
||||||
</div>
|
</PlatformStatusMessage>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
|
|||||||
@@ -3220,13 +3220,6 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
|||||||
.project-gallery__error {
|
.project-gallery__error {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
margin: 1rem 1.5rem 0;
|
margin: 1rem 1.5rem 0;
|
||||||
border: 1px solid #fecdd3;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
background: #fff1f2;
|
|
||||||
padding: 0.75rem 0.9rem;
|
|
||||||
color: #be123c;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
font-weight: 760;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-canvas-editor {
|
.image-canvas-editor {
|
||||||
|
|||||||
Reference in New Issue
Block a user