复用胶囊标签收口画布尺寸提示

画布图片 hover 尺寸标签改为复用 PlatformPillBadge,统一覆盖层 badge 基础结构。

删除尺寸标签局部圆角、字号和排版样式,仅保留画布内定位与深色覆盖。

补充编辑器测试覆盖共享胶囊标签 class,并更新 TRACKING。
This commit is contained in:
2026-06-14 17:02:31 +08:00
parent fd768493fa
commit 0004d28253
4 changed files with 12 additions and 8 deletions

View File

@@ -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,

View File

@@ -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 ? (
<span className="image-canvas-editor__size-badge">
<PlatformPillBadge
tone="lightOverlay"
size="xs"
className="image-canvas-editor__size-badge"
>
{Math.round(layer.width)} x {Math.round(layer.height)} px
</span>
</PlatformPillBadge>
) : null}
</button>
);

View File

@@ -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;
}