diff --git a/TRACKING.md b/TRACKING.md index 4882e11f..f908d28c 100644 --- a/TRACKING.md +++ b/TRACKING.md @@ -106,3 +106,4 @@ - 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`。 - 2026-06-14 组件复用修正:编辑器侧栏素材和图层缩略图通过 `SidebarMediaItem` 改为复用 `PlatformMediaFrame`,删除缩略图内部图片填充的重复 CSS,统一媒体预览框和 fallback 结构;验证命令:`npm run test -- src/components/image-editor/ImageCanvasEditorPrimitives.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformMediaFrame.test.tsx`、`npm run typecheck`。 +- 2026-06-14 组件复用修正:画布图片 hover 尺寸标签改为复用 `PlatformPillBadge tone="lightOverlay"`,局部 CSS 只保留定位和深色覆盖,不再重复维护 badge 的圆角、字号和基础排版;验证命令:`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformPillBadge.test.tsx`、`npm run typecheck`。 diff --git a/src/components/image-editor/ImageCanvasEditorView.test.tsx b/src/components/image-editor/ImageCanvasEditorView.test.tsx index a77003d2..4dc20e58 100644 --- a/src/components/image-editor/ImageCanvasEditorView.test.tsx +++ b/src/components/image-editor/ImageCanvasEditorView.test.tsx @@ -479,7 +479,9 @@ describe('ImageCanvasEditorView', () => { const canvasImage = screen.getByAltText('画布图片:拼图素材'); fireEvent.mouseEnter(canvasImage.closest('button')!); - expect(screen.getByText('420 x 420 px')).toBeTruthy(); + const sizeBadge = screen.getByText('420 x 420 px'); + expect(sizeBadge.className).toContain('rounded-full'); + expect(sizeBadge.className).toContain('image-canvas-editor__size-badge'); fireEvent.pointerDown(canvasImage.closest('button')!, { button: 0, diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx index 02a90add..fe5119a4 100644 --- a/src/components/image-editor/ImageCanvasEditorView.tsx +++ b/src/components/image-editor/ImageCanvasEditorView.tsx @@ -71,6 +71,7 @@ import { } from '../common/PlatformFloatingMenu'; import { PlatformIconButton } from '../common/PlatformIconButton'; import { PlatformInlineOptionButton } from '../common/PlatformInlineOptionButton'; +import { PlatformPillBadge } from '../common/PlatformPillBadge'; import { PlatformStatusMessage } from '../common/PlatformStatusMessage'; import { PlatformTextField } from '../common/PlatformTextField'; import { UnifiedModal } from '../common/UnifiedModal'; @@ -2575,9 +2576,13 @@ export function ImageCanvasEditorView() { /> ) : null} {isHovered ? ( - + {Math.round(layer.width)} x {Math.round(layer.height)} px - + ) : null} ); diff --git a/src/index.css b/src/index.css index 73231ca4..e9ca6cd0 100644 --- a/src/index.css +++ b/src/index.css @@ -3854,13 +3854,9 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { left: 0.35rem; top: 0.35rem; z-index: 2; - border-radius: 0.3rem; + border-color: rgba(255, 255, 255, 0.16); background: rgba(16, 15, 14, 0.82); - padding: 0.18rem 0.35rem; color: #ffffff; - font-size: 0.72rem; - font-weight: 850; - line-height: 1.2; white-space: nowrap; }