复用平台输入框收口素材侧栏
编辑器素材侧栏的新建文件夹、文件夹重命名和素材重命名输入框改为复用 PlatformTextField。 输入框局部样式改为明确 class 覆盖,不再按 input 标签选择器维护基础输入 chrome。 补充编辑器测试断言共享输入框原语,并更新 TRACKING。
This commit is contained in:
@@ -104,3 +104,4 @@
|
|||||||
- 2026-06-14 组件复用修正:`PlatformEmptyState` 增加 `asChild="button"` 形态,项目页空列表“新建项目”卡片改为复用平台空态原语,避免项目页单独维护可点击空态卡片基础 chrome;验证命令:`npm run test -- src/components/common/PlatformEmptyState.test.tsx src/components/project/ProjectGalleryView.test.tsx`、`npm run typecheck`。
|
- 2026-06-14 组件复用修正:`PlatformEmptyState` 增加 `asChild="button"` 形态,项目页空列表“新建项目”卡片改为复用平台空态原语,避免项目页单独维护可点击空态卡片基础 chrome;验证命令:`npm run test -- src/components/common/PlatformEmptyState.test.tsx src/components/project/ProjectGalleryView.test.tsx`、`npm run typecheck`。
|
||||||
- 2026-06-14 组件复用修正:编辑器顶部缩放百分比触发器改为复用 `PlatformInlineOptionButton`,让缩放菜单入口和生成器比例 / 模型 pill 共用“当前选项触发菜单”的按钮原语;验证命令:`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformInlineOptionButton.test.tsx`、`npm run typecheck`。
|
- 2026-06-14 组件复用修正:编辑器顶部缩放百分比触发器改为复用 `PlatformInlineOptionButton`,让缩放菜单入口和生成器比例 / 模型 pill 共用“当前选项触发菜单”的按钮原语;验证命令:`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformInlineOptionButton.test.tsx`、`npm run typecheck`。
|
||||||
- 2026-06-14 组件复用修正:编辑器左下面板 dock 的画布背景色入口改为复用 `PlatformIconButton`,用色块作为 icon 承载当前背景色,和素材 / 图层 / 小地图入口保持同一图标按钮原语;验证命令:`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformIconButton.test.tsx`、`npm run typecheck`。
|
- 2026-06-14 组件复用修正:编辑器左下面板 dock 的画布背景色入口改为复用 `PlatformIconButton`,用色块作为 icon 承载当前背景色,和素材 / 图层 / 小地图入口保持同一图标按钮原语;验证命令:`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformIconButton.test.tsx`、`npm run typecheck`。
|
||||||
|
- 2026-06-14 组件复用修正:编辑器素材侧栏的新建文件夹、文件夹重命名和素材重命名输入框改为复用 `PlatformTextField`,输入框局部样式改为明确 class 覆盖,不再按 `input` 标签选择器重复维护基础输入 chrome;验证命令:`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformTextField.test.tsx`、`npm run typecheck`。
|
||||||
|
|||||||
@@ -204,6 +204,10 @@ describe('ImageCanvasEditorView', () => {
|
|||||||
|
|
||||||
await user.click(screen.getByRole('button', { name: '重命名素材拼图素材' }));
|
await user.click(screen.getByRole('button', { name: '重命名素材拼图素材' }));
|
||||||
const renameInput = screen.getByLabelText('重命名素材拼图素材');
|
const renameInput = screen.getByLabelText('重命名素材拼图素材');
|
||||||
|
expect(renameInput.className).toContain('platform-text-field');
|
||||||
|
expect(renameInput.className).toContain(
|
||||||
|
'image-canvas-editor__asset-rename-input',
|
||||||
|
);
|
||||||
await user.clear(renameInput);
|
await user.clear(renameInput);
|
||||||
await user.type(renameInput, '主视觉素材');
|
await user.type(renameInput, '主视觉素材');
|
||||||
await user.click(screen.getByRole('button', { name: '保存素材拼图素材名称' }));
|
await user.click(screen.getByRole('button', { name: '保存素材拼图素材名称' }));
|
||||||
@@ -229,7 +233,12 @@ describe('ImageCanvasEditorView', () => {
|
|||||||
expect(screen.getByRole('button', { name: '添加拼图素材' })).toBeTruthy();
|
expect(screen.getByRole('button', { name: '添加拼图素材' })).toBeTruthy();
|
||||||
|
|
||||||
await user.click(screen.getByRole('button', { name: '新建素材文件夹' }));
|
await user.click(screen.getByRole('button', { name: '新建素材文件夹' }));
|
||||||
await user.type(screen.getByLabelText('素材文件夹名称'), '角色上传');
|
const folderNameInput = screen.getByLabelText('素材文件夹名称');
|
||||||
|
expect(folderNameInput.className).toContain('platform-text-field');
|
||||||
|
expect(folderNameInput.className).toContain(
|
||||||
|
'image-canvas-editor__folder-create-input',
|
||||||
|
);
|
||||||
|
await user.type(folderNameInput, '角色上传');
|
||||||
await user.click(screen.getByRole('button', { name: '保存素材文件夹' }));
|
await user.click(screen.getByRole('button', { name: '保存素材文件夹' }));
|
||||||
|
|
||||||
const uploadInput = screen.getByLabelText('上传图片文件');
|
const uploadInput = screen.getByLabelText('上传图片文件');
|
||||||
@@ -276,6 +285,10 @@ describe('ImageCanvasEditorView', () => {
|
|||||||
await screen.findByRole('region', { name: '角色' });
|
await screen.findByRole('region', { name: '角色' });
|
||||||
await user.click(screen.getByRole('button', { name: '重命名文件夹角色' }));
|
await user.click(screen.getByRole('button', { name: '重命名文件夹角色' }));
|
||||||
const folderRenameInput = screen.getByLabelText('重命名文件夹角色');
|
const folderRenameInput = screen.getByLabelText('重命名文件夹角色');
|
||||||
|
expect(folderRenameInput.className).toContain('platform-text-field');
|
||||||
|
expect(folderRenameInput.className).toContain(
|
||||||
|
'image-canvas-editor__folder-rename-input',
|
||||||
|
);
|
||||||
await user.clear(folderRenameInput);
|
await user.clear(folderRenameInput);
|
||||||
await user.type(folderRenameInput, '角色参考');
|
await user.type(folderRenameInput, '角色参考');
|
||||||
await user.click(screen.getByRole('button', { name: '保存文件夹角色名称' }));
|
await user.click(screen.getByRole('button', { name: '保存文件夹角色名称' }));
|
||||||
|
|||||||
@@ -2106,10 +2106,13 @@ export function ImageCanvasEditorView() {
|
|||||||
void commitNewAssetFolder();
|
void commitNewAssetFolder();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<input
|
<PlatformTextField
|
||||||
aria-label="素材文件夹名称"
|
aria-label="素材文件夹名称"
|
||||||
value={newFolderName}
|
value={newFolderName}
|
||||||
autoFocus
|
autoFocus
|
||||||
|
size="xs"
|
||||||
|
density="compact"
|
||||||
|
className="image-canvas-editor__folder-create-input"
|
||||||
onChange={(event) => setNewFolderName(event.target.value)}
|
onChange={(event) => setNewFolderName(event.target.value)}
|
||||||
onKeyDown={(event) => {
|
onKeyDown={(event) => {
|
||||||
if (event.key === 'Escape') {
|
if (event.key === 'Escape') {
|
||||||
@@ -2163,10 +2166,13 @@ export function ImageCanvasEditorView() {
|
|||||||
/>
|
/>
|
||||||
<Folder className="h-4 w-4" />
|
<Folder className="h-4 w-4" />
|
||||||
{renamingFolder?.folderId === folder.id ? (
|
{renamingFolder?.folderId === folder.id ? (
|
||||||
<input
|
<PlatformTextField
|
||||||
aria-label={`重命名文件夹${folder.label}`}
|
aria-label={`重命名文件夹${folder.label}`}
|
||||||
value={renamingFolder.value}
|
value={renamingFolder.value}
|
||||||
autoFocus
|
autoFocus
|
||||||
|
size="xs"
|
||||||
|
density="compact"
|
||||||
|
className="image-canvas-editor__folder-rename-input"
|
||||||
onChange={(event) =>
|
onChange={(event) =>
|
||||||
setRenamingFolder({
|
setRenamingFolder({
|
||||||
folderId: folder.id,
|
folderId: folder.id,
|
||||||
@@ -2236,10 +2242,13 @@ export function ImageCanvasEditorView() {
|
|||||||
{folder.assets.map((asset) => {
|
{folder.assets.map((asset) => {
|
||||||
const isRenaming = renamingAsset?.assetId === asset.id;
|
const isRenaming = renamingAsset?.assetId === asset.id;
|
||||||
const titleNode = isRenaming ? (
|
const titleNode = isRenaming ? (
|
||||||
<input
|
<PlatformTextField
|
||||||
aria-label={`重命名素材${asset.label}`}
|
aria-label={`重命名素材${asset.label}`}
|
||||||
value={renamingAsset.value}
|
value={renamingAsset.value}
|
||||||
autoFocus
|
autoFocus
|
||||||
|
size="xs"
|
||||||
|
density="compact"
|
||||||
|
className="image-canvas-editor__asset-rename-input"
|
||||||
onChange={(event) =>
|
onChange={(event) =>
|
||||||
setRenamingAsset({
|
setRenamingAsset({
|
||||||
assetId: asset.id,
|
assetId: asset.id,
|
||||||
|
|||||||
@@ -3392,12 +3392,12 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.image-canvas-editor__asset-folder-header > span:first-of-type,
|
.image-canvas-editor__asset-folder-header > span:first-of-type,
|
||||||
.image-canvas-editor__asset-folder-header > input {
|
.image-canvas-editor__folder-rename-input {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-canvas-editor__asset-folder-header input {
|
.image-canvas-editor__folder-rename-input {
|
||||||
height: 1.8rem;
|
height: 1.8rem;
|
||||||
border: 1px solid #8fb8ff;
|
border: 1px solid #8fb8ff;
|
||||||
border-radius: 0.35rem;
|
border-radius: 0.35rem;
|
||||||
@@ -3543,7 +3543,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-canvas-editor__asset-meta input {
|
.image-canvas-editor__asset-rename-input {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
height: 1.8rem;
|
height: 1.8rem;
|
||||||
border: 1px solid #8fb8ff;
|
border: 1px solid #8fb8ff;
|
||||||
@@ -3592,7 +3592,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
|||||||
padding: 0.4rem;
|
padding: 0.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-canvas-editor__folder-create input {
|
.image-canvas-editor__folder-create-input {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
border: 1px solid #8fb8ff;
|
border: 1px solid #8fb8ff;
|
||||||
|
|||||||
Reference in New Issue
Block a user