拆分图片画布顶部栏视图
新增 ImageCanvasTopbarView 承载返回项目入口和项目标题区域 新增顶栏视图测试覆盖重命名和导出入口 精简 ImageCanvasEditorView 的顶部栏 JSX 更新图片画布拆分计划和 TRACKING 验证记录
This commit is contained in:
@@ -141,3 +141,4 @@
|
|||||||
- 2026-06-17 前端拆分第二十三阶段:新增 `ImageCanvasOverlayModel`,把生成输入框锚定、图标素材生成面板宽度、选中图片工具栏边界、快速编辑面板和角色动画面板定位从主视图抽出为纯模型;主视图继续保留生成 / quick edit / 角色动画状态机和舞台编排。新增模型单测覆盖锚定优先级、生成中隐藏、icon 宽度、工具栏 clamp、quick edit / 角色动画边界和生成 dialog 模式识别;主视图从 1182 行降至 1133 行。验证命令:`npm run test -- src/components/image-editor/ImageCanvasOverlayModel.test.ts src/components/image-editor/ImageCanvasEditorView.test.tsx`、`npm run test -- src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx`、`npm run test -- src/components/image-editor/ImageCanvasOverlayModel.test.ts src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx src/components/image-editor/ImageCanvasMetadataModalView.test.tsx src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasProjectPersistence.test.tsx src/components/image-editor/useImageCanvasCanvasDropWorkflow.test.tsx src/components/image-editor/useImageCanvasStageInteractions.test.tsx src/components/image-editor/useImageCanvasViewportControls.test.tsx src/components/image-editor/ImageCanvasInteractionModel.test.ts src/components/image-editor/useCanvasHistory.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/auth/PlatformAuthModalShell.test.tsx src/components/auth/AuthGate.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`;浏览器回归:`http://127.0.0.1:10007/editor/canvas` 未登录打开显示 `账号入口`,登录后 `画布背景设置` 点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)` 且 `background-image: none`,点击 `生成工具` 后 `Image Generator`、`生成图片` 对话框和 `AI画布工具栏` 均可见;素材库已有素材真实 pointer 拖入画布后图层数从 0 到 1,工具栏保持可见,截图留存于 `output/playwright/editor-overlay-model-regression-20260617.png`。
|
- 2026-06-17 前端拆分第二十三阶段:新增 `ImageCanvasOverlayModel`,把生成输入框锚定、图标素材生成面板宽度、选中图片工具栏边界、快速编辑面板和角色动画面板定位从主视图抽出为纯模型;主视图继续保留生成 / quick edit / 角色动画状态机和舞台编排。新增模型单测覆盖锚定优先级、生成中隐藏、icon 宽度、工具栏 clamp、quick edit / 角色动画边界和生成 dialog 模式识别;主视图从 1182 行降至 1133 行。验证命令:`npm run test -- src/components/image-editor/ImageCanvasOverlayModel.test.ts src/components/image-editor/ImageCanvasEditorView.test.tsx`、`npm run test -- src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx`、`npm run test -- src/components/image-editor/ImageCanvasOverlayModel.test.ts src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx src/components/image-editor/ImageCanvasMetadataModalView.test.tsx src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasProjectPersistence.test.tsx src/components/image-editor/useImageCanvasCanvasDropWorkflow.test.tsx src/components/image-editor/useImageCanvasStageInteractions.test.tsx src/components/image-editor/useImageCanvasViewportControls.test.tsx src/components/image-editor/ImageCanvasInteractionModel.test.ts src/components/image-editor/useCanvasHistory.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/auth/PlatformAuthModalShell.test.tsx src/components/auth/AuthGate.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`;浏览器回归:`http://127.0.0.1:10007/editor/canvas` 未登录打开显示 `账号入口`,登录后 `画布背景设置` 点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)` 且 `background-image: none`,点击 `生成工具` 后 `Image Generator`、`生成图片` 对话框和 `AI画布工具栏` 均可见;素材库已有素材真实 pointer 拖入画布后图层数从 0 到 1,工具栏保持可见,截图留存于 `output/playwright/editor-overlay-model-regression-20260617.png`。
|
||||||
- 2026-06-17 前端拆分第二十四阶段:新增 `useImageCanvasAssetCanvasBridge`,把删除素材清理画布图层、素材加入画布、素材 pointer 拖入画布 / 文件夹、画布 drag/drop 分流和文件拖入画布参数组装从主视图抽成素材到画布桥接 hook;主视图继续保留素材库事实、上传读取、工程资源持久化和历史触发。新增 hook 单测覆盖素材建层、pointer drop 入画布和删除素材清理关联图层 / 选中态;主视图从 1133 行降至 1086 行。验证命令:`npm run test -- src/components/image-editor/useImageCanvasAssetCanvasBridge.test.tsx src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasCanvasDropWorkflow.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`;浏览器回归:`http://127.0.0.1:10007/editor/canvas` 清空会话后未登录直接显示 `账号入口`;登录临时开发账号后 `画布背景设置` 是完整设置面板,包含当前色、色域、色相、自定义颜色、预设、HEX 和恢复默认,点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)` 且 `background-image: none`,HEX 输入 `#ffffff` 后变为白色,按 Escape 关闭面板;登录后上传图片请求 `/api/editor/assets` 返回 200,素材库出现上传素材,`AI画布工具栏` 保持可见。
|
- 2026-06-17 前端拆分第二十四阶段:新增 `useImageCanvasAssetCanvasBridge`,把删除素材清理画布图层、素材加入画布、素材 pointer 拖入画布 / 文件夹、画布 drag/drop 分流和文件拖入画布参数组装从主视图抽成素材到画布桥接 hook;主视图继续保留素材库事实、上传读取、工程资源持久化和历史触发。新增 hook 单测覆盖素材建层、pointer drop 入画布和删除素材清理关联图层 / 选中态;主视图从 1133 行降至 1086 行。验证命令:`npm run test -- src/components/image-editor/useImageCanvasAssetCanvasBridge.test.tsx src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasCanvasDropWorkflow.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`;浏览器回归:`http://127.0.0.1:10007/editor/canvas` 清空会话后未登录直接显示 `账号入口`;登录临时开发账号后 `画布背景设置` 是完整设置面板,包含当前色、色域、色相、自定义颜色、预设、HEX 和恢复默认,点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)` 且 `background-image: none`,HEX 输入 `#ffffff` 后变为白色,按 Escape 关闭面板;登录后上传图片请求 `/api/editor/assets` 返回 200,素材库出现上传素材,`AI画布工具栏` 保持可见。
|
||||||
- 2026-06-17 前端拆分第二十五阶段:新增 `ImageCanvasStageControllerModel` 和 `useImageCanvasStageController`,把舞台派生状态、生成 / 选中浮层位置、右键菜单目标、空白画布右键、图层右键和清空画布焦点从主视图抽出;主视图继续保留工具切换、上传 / 生成入口、图层命令、项目持久化和舞台 pointer 状态机。新增模型和 hook 单测覆盖选中 / 生成锚定、右键菜单位置、显示 / 解锁判断、清空焦点和空白 / 图层右键菜单;主视图从 1086 行降至 993 行。验证命令:`npm run test -- src/components/image-editor/ImageCanvasStageControllerModel.test.ts src/components/image-editor/useImageCanvasStageController.test.tsx`、`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/routing/appPageRoutes.test.ts`、`npm run typecheck`;浏览器回归:`http://127.0.0.1:10007/editor/canvas` 清空会话后未登录直接显示 `账号入口`,关闭登录后 `画布背景色` 打开完整 `画布背景设置` dialog,包含色相、自定义颜色、预设、HEX 和恢复默认;点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)` 且 `background-image: none`,`AI画布工具栏` 保持可见,截图留存于 `output/playwright/editor-stage-controller-smoke-20260617.png`。
|
- 2026-06-17 前端拆分第二十五阶段:新增 `ImageCanvasStageControllerModel` 和 `useImageCanvasStageController`,把舞台派生状态、生成 / 选中浮层位置、右键菜单目标、空白画布右键、图层右键和清空画布焦点从主视图抽出;主视图继续保留工具切换、上传 / 生成入口、图层命令、项目持久化和舞台 pointer 状态机。新增模型和 hook 单测覆盖选中 / 生成锚定、右键菜单位置、显示 / 解锁判断、清空焦点和空白 / 图层右键菜单;主视图从 1086 行降至 993 行。验证命令:`npm run test -- src/components/image-editor/ImageCanvasStageControllerModel.test.ts src/components/image-editor/useImageCanvasStageController.test.tsx`、`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/routing/appPageRoutes.test.ts`、`npm run typecheck`;浏览器回归:`http://127.0.0.1:10007/editor/canvas` 清空会话后未登录直接显示 `账号入口`,关闭登录后 `画布背景色` 打开完整 `画布背景设置` dialog,包含色相、自定义颜色、预设、HEX 和恢复默认;点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)` 且 `background-image: none`,`AI画布工具栏` 保持可见,截图留存于 `output/playwright/editor-stage-controller-smoke-20260617.png`。
|
||||||
|
- 2026-06-17 前端拆分第二十六阶段:新增 `ImageCanvasTopbarView`,把返回项目入口、项目标题展示 / 重命名表单、下载画布素材按钮和导出状态提示从主视图抽出;主视图继续保留 chrome hook、项目持久化、导出工作流和实际导出副作用。新增组件单测覆盖返回入口、标题编辑入口、重命名提交 / 取消、导出按钮禁用 / 启用和导出状态提示;主视图从 993 行降至 905 行。验证命令:`npm run test -- src/components/image-editor/ImageCanvasTopbarView.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`;浏览器回归:`http://127.0.0.1:10007/editor/canvas` 未登录直接显示 `账号入口`,顶栏返回项目入口、项目名、`画布` 标签和下载按钮均可见;关闭登录后打开 `画布背景设置`,点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)` 且 `background-image: none`,`AI画布工具栏` 保持可见,截图留存于 `output/playwright/editor-topbar-smoke-20260617.png`。
|
||||||
|
|||||||
@@ -219,6 +219,14 @@
|
|||||||
- 主视图继续保留工具切换、上传 / 生成入口、图层命令、项目持久化和舞台 pointer 状态机,避免把跨工作流动作塞进单个 hook。
|
- 主视图继续保留工具切换、上传 / 生成入口、图层命令、项目持久化和舞台 pointer 状态机,避免把跨工作流动作塞进单个 hook。
|
||||||
- 本阶段主视图从 1086 行降至 993 行;后续若继续拆分,应优先考虑顶栏 / 项目标题区域或把侧栏图层右键入口并入同一舞台菜单控制层。
|
- 本阶段主视图从 1086 行降至 993 行;后续若继续拆分,应优先考虑顶栏 / 项目标题区域或把侧栏图层右键入口并入同一舞台菜单控制层。
|
||||||
|
|
||||||
|
## 第二十六阶段模块
|
||||||
|
|
||||||
|
- `ImageCanvasTopbarView.tsx`
|
||||||
|
- 承载编辑器顶部栏视觉结构:返回项目入口、项目标题展示、项目标题重命名表单、下载画布素材按钮和导出状态提示。
|
||||||
|
- 主视图继续保留项目标题 / 重命名状态所属的 chrome hook、项目持久化、导出工作流和实际导出副作用;顶栏只负责表单事件和显示,不接管业务状态。
|
||||||
|
- 新增组件单测覆盖返回入口、标题编辑入口、重命名提交 / 取消、导出按钮禁用 / 启用和导出状态提示。
|
||||||
|
- 本阶段主视图从 993 行降至 905 行;后续可继续评估隐藏上传 input / 侧栏拖拽预览这类根级浮层是否值得抽为编辑器 shell 视图。
|
||||||
|
|
||||||
## 后续阶段
|
## 后续阶段
|
||||||
|
|
||||||
- 后续可继续选择更高内聚的交互 workflow 或持久化边界,不再把生成链路继续拆成浅层 wrapper。
|
- 后续可继续选择更高内聚的交互 workflow 或持久化边界,不再把生成链路继续拆成浅层 wrapper。
|
||||||
@@ -226,7 +234,7 @@
|
|||||||
|
|
||||||
## 验证计划
|
## 验证计划
|
||||||
|
|
||||||
- `npm run test -- src/components/image-editor/ImageCanvasStageControllerModel.test.ts src/components/image-editor/useImageCanvasStageController.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/routing/appPageRoutes.test.ts`
|
- `npm run test -- src/components/image-editor/ImageCanvasTopbarView.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx`
|
||||||
- `npm run typecheck`
|
- `npm run typecheck`
|
||||||
- `npm run check:encoding`
|
- `npm run check:encoding`
|
||||||
- `git diff --check`
|
- `git diff --check`
|
||||||
|
|||||||
@@ -1,14 +1,11 @@
|
|||||||
import { Check, ChevronLeft, Download, Pencil, X } from 'lucide-react';
|
|
||||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||||
|
|
||||||
import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
|
|
||||||
import { PlatformTextField } from '../common/PlatformTextField';
|
|
||||||
import { useAuthUi } from '../auth/AuthUiContext';
|
import { useAuthUi } from '../auth/AuthUiContext';
|
||||||
import { EditorIconButton } from './ImageCanvasEditorPrimitives';
|
|
||||||
import { ImageCanvasGenerationComposerView } from './ImageCanvasGenerationComposerView';
|
import { ImageCanvasGenerationComposerView } from './ImageCanvasGenerationComposerView';
|
||||||
import { ImageCanvasMetadataModalView } from './ImageCanvasMetadataModalView';
|
import { ImageCanvasMetadataModalView } from './ImageCanvasMetadataModalView';
|
||||||
import { ImageCanvasSidebarView } from './ImageCanvasSidebarView';
|
import { ImageCanvasSidebarView } from './ImageCanvasSidebarView';
|
||||||
import { ImageCanvasStageView } from './ImageCanvasStageView';
|
import { ImageCanvasStageView } from './ImageCanvasStageView';
|
||||||
|
import { ImageCanvasTopbarView } from './ImageCanvasTopbarView';
|
||||||
import { resolveContextMenuPosition } from './ImageCanvasEditorModel';
|
import { resolveContextMenuPosition } from './ImageCanvasEditorModel';
|
||||||
import {
|
import {
|
||||||
isCanvasGenerationComposerVisible,
|
isCanvasGenerationComposerVisible,
|
||||||
@@ -731,108 +728,23 @@ export function ImageCanvasEditorView() {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="image-canvas-editor__main">
|
<div className="image-canvas-editor__main">
|
||||||
<div className="image-canvas-editor__topbar">
|
<ImageCanvasTopbarView
|
||||||
<a
|
projectId={projectId}
|
||||||
className="image-canvas-editor__project-back-button"
|
projectTitle={projectTitle}
|
||||||
href="/project"
|
projectRenameValue={projectRenameValue}
|
||||||
aria-label="返回项目页面"
|
isRenamingProject={isRenamingProject}
|
||||||
title="返回项目"
|
isProjectRenameSaving={isProjectRenameSaving}
|
||||||
>
|
projectRenameError={projectRenameError}
|
||||||
<ChevronLeft className="h-4 w-4" aria-hidden="true" />
|
layers={layers}
|
||||||
</a>
|
assetExportStatus={assetExportStatus}
|
||||||
<div className="image-canvas-editor__title-block">
|
isExportingAssets={isExportingAssets}
|
||||||
{isRenamingProject ? (
|
setProjectRenameValue={setProjectRenameValue}
|
||||||
<form
|
startProjectRename={startProjectRename}
|
||||||
className="image-canvas-editor__project-title-form"
|
cancelProjectRename={cancelProjectRename}
|
||||||
onSubmit={(event) => {
|
submitProjectRename={submitProjectRename}
|
||||||
event.preventDefault();
|
resetProjectRenameError={resetProjectRenameError}
|
||||||
submitProjectRename(projectId);
|
exportCanvasAssets={exportCanvasAssets}
|
||||||
}}
|
/>
|
||||||
>
|
|
||||||
<PlatformTextField
|
|
||||||
aria-label="项目名称"
|
|
||||||
value={projectRenameValue}
|
|
||||||
autoFocus
|
|
||||||
disabled={isProjectRenameSaving}
|
|
||||||
className="image-canvas-editor__project-title-input"
|
|
||||||
onChange={(event) => {
|
|
||||||
setProjectRenameValue(event.target.value);
|
|
||||||
resetProjectRenameError();
|
|
||||||
}}
|
|
||||||
onKeyDown={(event) => {
|
|
||||||
if (event.key === 'Escape') {
|
|
||||||
event.preventDefault();
|
|
||||||
cancelProjectRename();
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<EditorIconButton
|
|
||||||
type="submit"
|
|
||||||
label="保存项目名称"
|
|
||||||
title="保存"
|
|
||||||
icon={Check}
|
|
||||||
disabled={isProjectRenameSaving}
|
|
||||||
/>
|
|
||||||
<EditorIconButton
|
|
||||||
label="取消修改项目名称"
|
|
||||||
title="取消"
|
|
||||||
icon={X}
|
|
||||||
disabled={isProjectRenameSaving}
|
|
||||||
onClick={cancelProjectRename}
|
|
||||||
/>
|
|
||||||
{projectRenameError ? (
|
|
||||||
<span
|
|
||||||
className="image-canvas-editor__project-title-error"
|
|
||||||
role="alert"
|
|
||||||
>
|
|
||||||
{projectRenameError}
|
|
||||||
</span>
|
|
||||||
) : null}
|
|
||||||
</form>
|
|
||||||
) : (
|
|
||||||
<div className="image-canvas-editor__project-title-row">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="image-canvas-editor__project-title-button"
|
|
||||||
onDoubleClick={startProjectRename}
|
|
||||||
aria-label={`编辑项目名称${projectTitle}`}
|
|
||||||
>
|
|
||||||
<h1>{projectTitle}</h1>
|
|
||||||
</button>
|
|
||||||
<EditorIconButton
|
|
||||||
className="image-canvas-editor__project-rename-button"
|
|
||||||
label="编辑项目名称"
|
|
||||||
title="编辑项目名称"
|
|
||||||
icon={Pencil}
|
|
||||||
onClick={startProjectRename}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<span>画布</span>
|
|
||||||
</div>
|
|
||||||
<div className="image-canvas-editor__topbar-actions">
|
|
||||||
<EditorIconButton
|
|
||||||
label="下载画布素材"
|
|
||||||
title="下载画布素材"
|
|
||||||
icon={Download}
|
|
||||||
disabled={
|
|
||||||
isExportingAssets ||
|
|
||||||
!layers.some((layer) => layer.src.trim().length > 0)
|
|
||||||
}
|
|
||||||
onClick={() => void exportCanvasAssets()}
|
|
||||||
/>
|
|
||||||
{assetExportStatus ? (
|
|
||||||
<PlatformStatusMessage
|
|
||||||
tone={assetExportStatus.tone}
|
|
||||||
surface="platform"
|
|
||||||
size="xs"
|
|
||||||
role={assetExportStatus.tone === 'error' ? 'alert' : 'status'}
|
|
||||||
>
|
|
||||||
{assetExportStatus.message}
|
|
||||||
</PlatformStatusMessage>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ImageCanvasStageView
|
<ImageCanvasStageView
|
||||||
canvasViewportRef={canvasViewportRef}
|
canvasViewportRef={canvasViewportRef}
|
||||||
|
|||||||
147
src/components/image-editor/ImageCanvasTopbarView.test.tsx
Normal file
147
src/components/image-editor/ImageCanvasTopbarView.test.tsx
Normal file
@@ -0,0 +1,147 @@
|
|||||||
|
/* @vitest-environment jsdom */
|
||||||
|
|
||||||
|
import { fireEvent, render, screen } from '@testing-library/react';
|
||||||
|
import { describe, expect, it, vi } from 'vitest';
|
||||||
|
|
||||||
|
import type { CanvasLayer } from './ImageCanvasEditorTypes';
|
||||||
|
import { ImageCanvasTopbarView } from './ImageCanvasTopbarView';
|
||||||
|
|
||||||
|
function createLayer(overrides: Partial<CanvasLayer> = {}): CanvasLayer {
|
||||||
|
const id = overrides.id ?? 'layer-a';
|
||||||
|
return {
|
||||||
|
id,
|
||||||
|
resourceId: `resource-${id}`,
|
||||||
|
title: id,
|
||||||
|
src: `data:image/png;base64,${id}`,
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
width: 320,
|
||||||
|
height: 180,
|
||||||
|
originalWidth: 320,
|
||||||
|
originalHeight: 180,
|
||||||
|
zIndex: 1,
|
||||||
|
sourceType: 'uploaded',
|
||||||
|
...overrides,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderTopbar(
|
||||||
|
overrides: Partial<
|
||||||
|
Parameters<typeof ImageCanvasTopbarView>[0]
|
||||||
|
> = {},
|
||||||
|
) {
|
||||||
|
const props: Parameters<typeof ImageCanvasTopbarView>[0] = {
|
||||||
|
projectId: 'project-a',
|
||||||
|
projectTitle: '默认项目',
|
||||||
|
projectRenameValue: '默认项目',
|
||||||
|
isRenamingProject: false,
|
||||||
|
isProjectRenameSaving: false,
|
||||||
|
projectRenameError: null,
|
||||||
|
layers: [],
|
||||||
|
assetExportStatus: null,
|
||||||
|
isExportingAssets: false,
|
||||||
|
setProjectRenameValue: vi.fn(),
|
||||||
|
startProjectRename: vi.fn(),
|
||||||
|
cancelProjectRename: vi.fn(),
|
||||||
|
submitProjectRename: vi.fn(),
|
||||||
|
resetProjectRenameError: vi.fn(),
|
||||||
|
exportCanvasAssets: vi.fn(),
|
||||||
|
...overrides,
|
||||||
|
};
|
||||||
|
|
||||||
|
render(<ImageCanvasTopbarView {...props} />);
|
||||||
|
|
||||||
|
return props;
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('ImageCanvasTopbarView', () => {
|
||||||
|
it('shows the project title and project gallery link', () => {
|
||||||
|
const props = renderTopbar();
|
||||||
|
|
||||||
|
expect(screen.getByRole('heading', { name: '默认项目' })).toBeTruthy();
|
||||||
|
expect(
|
||||||
|
screen.getByRole('link', { name: '返回项目页面' }).getAttribute('href'),
|
||||||
|
).toBe('/project');
|
||||||
|
|
||||||
|
fireEvent.click(screen.getByRole('button', { name: '编辑项目名称' }));
|
||||||
|
|
||||||
|
expect(props.startProjectRename).toHaveBeenCalledTimes(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('submits, resets, and cancels project rename edits', () => {
|
||||||
|
const props = renderTopbar({
|
||||||
|
isRenamingProject: true,
|
||||||
|
projectRenameValue: '草稿项目',
|
||||||
|
projectRenameError: '项目名称不能为空',
|
||||||
|
});
|
||||||
|
|
||||||
|
const input = screen.getByLabelText('项目名称');
|
||||||
|
fireEvent.change(input, { target: { value: '新项目' } });
|
||||||
|
fireEvent.click(screen.getByRole('button', { name: '保存项目名称' }));
|
||||||
|
|
||||||
|
expect(props.setProjectRenameValue).toHaveBeenCalledWith('新项目');
|
||||||
|
expect(props.resetProjectRenameError).toHaveBeenCalledTimes(1);
|
||||||
|
expect(props.submitProjectRename).toHaveBeenCalledWith('project-a');
|
||||||
|
expect(screen.getByRole('alert').textContent).toBe('项目名称不能为空');
|
||||||
|
|
||||||
|
fireEvent.keyDown(input, { key: 'Escape' });
|
||||||
|
|
||||||
|
expect(props.cancelProjectRename).toHaveBeenCalledTimes(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('exports only when canvas has exportable layers and shows export status', () => {
|
||||||
|
const exportCanvasAssets = vi.fn();
|
||||||
|
const { rerender } = render(
|
||||||
|
<ImageCanvasTopbarView
|
||||||
|
projectId="project-a"
|
||||||
|
projectTitle="默认项目"
|
||||||
|
projectRenameValue="默认项目"
|
||||||
|
isRenamingProject={false}
|
||||||
|
isProjectRenameSaving={false}
|
||||||
|
projectRenameError={null}
|
||||||
|
layers={[]}
|
||||||
|
assetExportStatus={null}
|
||||||
|
isExportingAssets={false}
|
||||||
|
setProjectRenameValue={vi.fn()}
|
||||||
|
startProjectRename={vi.fn()}
|
||||||
|
cancelProjectRename={vi.fn()}
|
||||||
|
submitProjectRename={vi.fn()}
|
||||||
|
resetProjectRenameError={vi.fn()}
|
||||||
|
exportCanvasAssets={exportCanvasAssets}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(
|
||||||
|
(screen.getByRole('button', { name: '下载画布素材' }) as HTMLButtonElement)
|
||||||
|
.disabled,
|
||||||
|
).toBe(true);
|
||||||
|
|
||||||
|
rerender(
|
||||||
|
<ImageCanvasTopbarView
|
||||||
|
projectId="project-a"
|
||||||
|
projectTitle="默认项目"
|
||||||
|
projectRenameValue="默认项目"
|
||||||
|
isRenamingProject={false}
|
||||||
|
isProjectRenameSaving={false}
|
||||||
|
projectRenameError={null}
|
||||||
|
layers={[createLayer()]}
|
||||||
|
assetExportStatus={{
|
||||||
|
tone: 'success',
|
||||||
|
message: '画布素材已导出',
|
||||||
|
}}
|
||||||
|
isExportingAssets={false}
|
||||||
|
setProjectRenameValue={vi.fn()}
|
||||||
|
startProjectRename={vi.fn()}
|
||||||
|
cancelProjectRename={vi.fn()}
|
||||||
|
submitProjectRename={vi.fn()}
|
||||||
|
resetProjectRenameError={vi.fn()}
|
||||||
|
exportCanvasAssets={exportCanvasAssets}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
|
||||||
|
fireEvent.click(screen.getByRole('button', { name: '下载画布素材' }));
|
||||||
|
|
||||||
|
expect(exportCanvasAssets).toHaveBeenCalledTimes(1);
|
||||||
|
expect(screen.getByRole('status').textContent).toBe('画布素材已导出');
|
||||||
|
});
|
||||||
|
});
|
||||||
149
src/components/image-editor/ImageCanvasTopbarView.tsx
Normal file
149
src/components/image-editor/ImageCanvasTopbarView.tsx
Normal file
@@ -0,0 +1,149 @@
|
|||||||
|
import { Check, ChevronLeft, Download, Pencil, X } from 'lucide-react';
|
||||||
|
|
||||||
|
import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
|
||||||
|
import { PlatformTextField } from '../common/PlatformTextField';
|
||||||
|
import { EditorIconButton } from './ImageCanvasEditorPrimitives';
|
||||||
|
import type { CanvasLayer } from './ImageCanvasEditorTypes';
|
||||||
|
import type { AssetExportStatus } from './useImageCanvasAssetExportWorkflow';
|
||||||
|
|
||||||
|
type ImageCanvasTopbarViewProps = {
|
||||||
|
projectId: string | null;
|
||||||
|
projectTitle: string;
|
||||||
|
projectRenameValue: string;
|
||||||
|
isRenamingProject: boolean;
|
||||||
|
isProjectRenameSaving: boolean;
|
||||||
|
projectRenameError: string | null;
|
||||||
|
layers: CanvasLayer[];
|
||||||
|
assetExportStatus: AssetExportStatus | null;
|
||||||
|
isExportingAssets: boolean;
|
||||||
|
setProjectRenameValue: (value: string) => void;
|
||||||
|
startProjectRename: () => void;
|
||||||
|
cancelProjectRename: () => void;
|
||||||
|
submitProjectRename: (projectId: string | null) => void;
|
||||||
|
resetProjectRenameError: () => void;
|
||||||
|
exportCanvasAssets: () => void | Promise<void>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function ImageCanvasTopbarView({
|
||||||
|
projectId,
|
||||||
|
projectTitle,
|
||||||
|
projectRenameValue,
|
||||||
|
isRenamingProject,
|
||||||
|
isProjectRenameSaving,
|
||||||
|
projectRenameError,
|
||||||
|
layers,
|
||||||
|
assetExportStatus,
|
||||||
|
isExportingAssets,
|
||||||
|
setProjectRenameValue,
|
||||||
|
startProjectRename,
|
||||||
|
cancelProjectRename,
|
||||||
|
submitProjectRename,
|
||||||
|
resetProjectRenameError,
|
||||||
|
exportCanvasAssets,
|
||||||
|
}: ImageCanvasTopbarViewProps) {
|
||||||
|
const hasExportableLayer = layers.some(
|
||||||
|
(layer) => layer.src.trim().length > 0,
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="image-canvas-editor__topbar">
|
||||||
|
<a
|
||||||
|
className="image-canvas-editor__project-back-button"
|
||||||
|
href="/project"
|
||||||
|
aria-label="返回项目页面"
|
||||||
|
title="返回项目"
|
||||||
|
>
|
||||||
|
<ChevronLeft className="h-4 w-4" aria-hidden="true" />
|
||||||
|
</a>
|
||||||
|
<div className="image-canvas-editor__title-block">
|
||||||
|
{isRenamingProject ? (
|
||||||
|
<form
|
||||||
|
className="image-canvas-editor__project-title-form"
|
||||||
|
onSubmit={(event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
submitProjectRename(projectId);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<PlatformTextField
|
||||||
|
aria-label="项目名称"
|
||||||
|
value={projectRenameValue}
|
||||||
|
autoFocus
|
||||||
|
disabled={isProjectRenameSaving}
|
||||||
|
className="image-canvas-editor__project-title-input"
|
||||||
|
onChange={(event) => {
|
||||||
|
setProjectRenameValue(event.target.value);
|
||||||
|
resetProjectRenameError();
|
||||||
|
}}
|
||||||
|
onKeyDown={(event) => {
|
||||||
|
if (event.key === 'Escape') {
|
||||||
|
event.preventDefault();
|
||||||
|
cancelProjectRename();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<EditorIconButton
|
||||||
|
type="submit"
|
||||||
|
label="保存项目名称"
|
||||||
|
title="保存"
|
||||||
|
icon={Check}
|
||||||
|
disabled={isProjectRenameSaving}
|
||||||
|
/>
|
||||||
|
<EditorIconButton
|
||||||
|
label="取消修改项目名称"
|
||||||
|
title="取消"
|
||||||
|
icon={X}
|
||||||
|
disabled={isProjectRenameSaving}
|
||||||
|
onClick={cancelProjectRename}
|
||||||
|
/>
|
||||||
|
{projectRenameError ? (
|
||||||
|
<span
|
||||||
|
className="image-canvas-editor__project-title-error"
|
||||||
|
role="alert"
|
||||||
|
>
|
||||||
|
{projectRenameError}
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
</form>
|
||||||
|
) : (
|
||||||
|
<div className="image-canvas-editor__project-title-row">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="image-canvas-editor__project-title-button"
|
||||||
|
onDoubleClick={startProjectRename}
|
||||||
|
aria-label={`编辑项目名称${projectTitle}`}
|
||||||
|
>
|
||||||
|
<h1>{projectTitle}</h1>
|
||||||
|
</button>
|
||||||
|
<EditorIconButton
|
||||||
|
className="image-canvas-editor__project-rename-button"
|
||||||
|
label="编辑项目名称"
|
||||||
|
title="编辑项目名称"
|
||||||
|
icon={Pencil}
|
||||||
|
onClick={startProjectRename}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<span>画布</span>
|
||||||
|
</div>
|
||||||
|
<div className="image-canvas-editor__topbar-actions">
|
||||||
|
<EditorIconButton
|
||||||
|
label="下载画布素材"
|
||||||
|
title="下载画布素材"
|
||||||
|
icon={Download}
|
||||||
|
disabled={isExportingAssets || !hasExportableLayer}
|
||||||
|
onClick={() => void exportCanvasAssets()}
|
||||||
|
/>
|
||||||
|
{assetExportStatus ? (
|
||||||
|
<PlatformStatusMessage
|
||||||
|
tone={assetExportStatus.tone}
|
||||||
|
surface="platform"
|
||||||
|
size="xs"
|
||||||
|
role={assetExportStatus.tone === 'error' ? 'alert' : 'status'}
|
||||||
|
>
|
||||||
|
{assetExportStatus.message}
|
||||||
|
</PlatformStatusMessage>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -16,7 +16,7 @@ import {
|
|||||||
sanitizeExportFilePart,
|
sanitizeExportFilePart,
|
||||||
} from './ImageCanvasExportModel';
|
} from './ImageCanvasExportModel';
|
||||||
|
|
||||||
type AssetExportStatus = {
|
export type AssetExportStatus = {
|
||||||
tone: 'info' | 'success' | 'error';
|
tone: 'info' | 'success' | 'error';
|
||||||
message: string;
|
message: string;
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user