修复图片信息文本复制

移除图片信息弹窗的整段复制按钮保留选中文本时的浏览器原生 Ctrl+C 放行图片信息弹窗内的浏览器右键菜单补充文本复制与右键菜单回归测试
2026-06-28 17:40:27 +08:00
parent 4321312b8e
commit 73121f18ba
7 changed files with 75 additions and 123 deletions
@@ -287,6 +287,37 @@ describe('ImageCanvasEditorShellView', () => {
    expect((preview as HTMLElement).style.top).toBe('48px');
  });

+  it('keeps the native context menu available inside metadata text', () => {
+    render(
+      <ImageCanvasEditorShellView
+        editorRootRef={createRef<HTMLElement>()}
+        uploadInputRef={createRef<HTMLInputElement>()}
+        onUploadInputChange={vi.fn()}
+        assetDragPreview={null}
+        sidebarProps={createSidebarProps()}
+        topbarProps={createTopbarProps()}
+        stageProps={createStageProps()}
+        metadataProps={createMetadataProps(createLayer())}
+      />,
+    );
+
+    const editor = screen.getByRole('region', { name: '图片画布编辑器' });
+    const metadataText = screen.getByText('上传图片');
+    const metadataContextMenuEvent = new MouseEvent('contextmenu', {
+      bubbles: true,
+      cancelable: true,
+    });
+    metadataText.dispatchEvent(metadataContextMenuEvent);
+    expect(metadataContextMenuEvent.defaultPrevented).toBe(false);
+
+    const editorContextMenuEvent = new MouseEvent('contextmenu', {
+      bubbles: true,
+      cancelable: true,
+    });
+    editor.dispatchEvent(editorContextMenuEvent);
+    expect(editorContextMenuEvent.defaultPrevented).toBe(true);
+  });
+
  it('renders quick edit selection tools through the stage props', () => {
    const layer = createLayer();
    const handleQuickEditToolChange = vi.fn();
@@ -48,7 +48,15 @@ export function ImageCanvasEditorShellView({
      ref={editorRootRef}
      className="image-canvas-editor"
      aria-label="图片画布编辑器"
-      onContextMenu={(event) => event.preventDefault()}
+      onContextMenu={(event) => {
+        if (
+          event.target instanceof Element &&
+          event.target.closest('.image-canvas-editor__metadata-dialog')
+        ) {
+          return;
+        }
+        event.preventDefault();
+      }}
    >
      <input
        ref={uploadInputRef}
@@ -3,14 +3,9 @@
 import { fireEvent, render, screen, within } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';

-import * as clipboardService from '../../services/clipboard';
 import type { CanvasLayer } from './ImageCanvasEditorTypes';
 import { ImageCanvasMetadataModalView } from './ImageCanvasMetadataModalView';

-vi.mock('../../services/clipboard', () => ({
-  copyTextToClipboard: vi.fn(),
-}));
-
 function createLayer(overrides: Partial<CanvasLayer> = {}): CanvasLayer {
  return {
    id: 'layer-1',
@@ -72,51 +67,6 @@ describe('ImageCanvasMetadataModalView', () => {
    expect(within(dialog).getByText('generated/object.png')).toBeTruthy();
  });

-  it('copies the visible metadata snapshot without restoring internal prompt fields', async () => {
-    vi.mocked(clipboardService.copyTextToClipboard).mockResolvedValueOnce(true);
-
-    render(
-      <ImageCanvasMetadataModalView
-        layer={createLayer({
-          prompt: '内部组装 Prompt 不应复制',
-          model: 'gpt-image-2',
-          taskId: 'gpt-image-2-task-123',
-          objectKey: 'generated/object.png',
-          generationInputs: {
-            fields: [{ title: '生成提示词', value: '清爽游戏按钮' }],
-            references: [
-              {
-                title: '参考图',
-                label: '角色立绘',
-                refType: 'project-resource',
-                refId: 'resource-reference',
-              },
-            ],
-          },
-        })}
-        onClose={vi.fn()}
-      />,
-    );
-
-    const dialog = screen.getByRole('dialog', { name: '图片信息' });
-    fireEvent.click(within(dialog).getByRole('button', { name: '复制图片信息' }));
-
-    expect(clipboardService.copyTextToClipboard).toHaveBeenCalledWith(
-      [
-        '图片类型：生成图片',
-        '生成输入：\n生成提示词：清爽游戏按钮\n参考图：角色立绘 (项目资源 · resource-reference)',
-        'Model：gpt-image-2',
-        'Resolution：1024 x 768 px',
-        'Task：123',
-        'Object：generated/object.png',
-      ].join('\n'),
-    );
-    expect(clipboardService.copyTextToClipboard).not.toHaveBeenCalledWith(
-      expect.stringContaining('内部组装 Prompt 不应复制'),
-    );
-    expect(await within(dialog).findByText('已复制')).toBeTruthy();
-  });
-
  it('renders nanobanana2 instead of the raw Gemini image model id', () => {
    render(
      <ImageCanvasMetadataModalView
@@ -1,8 +1,4 @@
-import { useEffect } from 'react';
-
-import { CopyFeedbackButton } from '../common/CopyFeedbackButton';
 import { UnifiedModal } from '../common/UnifiedModal';
-import { useCopyFeedback } from '../common/useCopyFeedback';
 import type { CanvasLayer } from './ImageCanvasEditorTypes';
 import { formatTaskIdForDisplay } from './ImageCanvasExportModel';
 import {
@@ -27,43 +23,10 @@ function formatLayerDurationForDisplay(layer: CanvasLayer) {
  );
 }

-function formatGenerationInputsForCopy(layer: CanvasLayer) {
-  const fields = layer.generationInputs?.fields ?? [];
-  const references = layer.generationInputs?.references ?? [];
-
-  if (!fields.length && !references.length) {
-    return '-';
-  }
-
-  return [
-    ...fields.map((field) => `${field.title}：${field.value}`),
-    ...references.map(
-      (reference) =>
-        `${reference.title}：${reference.label} (${formatReferenceType(
-          reference.refType,
-        )} · ${reference.refId})`,
-    ),
-  ].join('\n');
-}
-
-function buildLayerMetadataCopyText(layer: CanvasLayer, mediaLabel: string) {
-  return [
-    `${mediaLabel}类型：${formatLayerImageType(layer)}`,
-    `生成输入：\n${formatGenerationInputsForCopy(layer)}`,
-    `Model：${layer.model ? getEditorImageModelDisplayName(layer.model) : '-'}`,
-    layer.mediaType === 'audio'
-      ? `时长：${formatLayerDurationForDisplay(layer)}`
-      : `Resolution：${layer.originalWidth} x ${layer.originalHeight} px`,
-    `Task：${formatTaskIdForDisplay(layer.taskId)}`,
-    `Object：${layer.objectKey ?? layer.assetObjectId ?? '-'}`,
-  ].join('\n');
-}
-
 export function ImageCanvasMetadataModalView({
  layer,
  onClose,
 }: ImageCanvasMetadataModalViewProps) {
-  const { copyState, copyText, resetCopyState } = useCopyFeedback();
  const mediaLabel =
    layer?.mediaType === 'audio'
      ? '音频'
@@ -72,19 +35,6 @@ export function ImageCanvasMetadataModalView({
        : layer?.mediaType === 'image-sequence'
          ? '序列帧'
        : '图片';
-  const metadataText = layer ? buildLayerMetadataCopyText(layer, mediaLabel) : '';
-
-  useEffect(() => {
-    resetCopyState();
-  }, [metadataText, resetCopyState]);
-
-  const copyMetadata = () => {
-    if (!metadataText) {
-      return;
-    }
-
-    void copyText(metadataText);
-  };

  return (
    <UnifiedModal
@@ -95,20 +45,6 @@ export function ImageCanvasMetadataModalView({
      onClose={onClose}
      panelClassName="image-canvas-editor__metadata-dialog"
      bodyClassName="image-canvas-editor__metadata-body"
-      footerClassName="image-canvas-editor__metadata-footer"
-      footer={
-        layer ? (
-          <CopyFeedbackButton
-            state={copyState}
-            idleLabel="复制信息"
-            accessibleLabel={`复制${mediaLabel}信息`}
-            actionSurface="platform"
-            actionFullWidth
-            className="image-canvas-editor__metadata-copy-button sm:w-auto"
-            onClick={copyMetadata}
-          />
-        ) : null
-      }
    >
      {layer ? (
        <dl className="image-canvas-editor__metadata-grid">
@@ -347,6 +347,33 @@ describe('useImageCanvasKeyboardShortcuts', () => {
    expect(pasteEvent.defaultPrevented).toBe(false);
  });

+  it('leaves native copy available when text is selected', () => {
+    const copySelectedCanvasLayers = vi.fn();
+    const removeAllRanges = vi.fn();
+    const selectedText = vi.fn(() => '清爽游戏按钮');
+    vi.spyOn(window, 'getSelection').mockReturnValue({
+      toString: selectedText,
+      removeAllRanges,
+    } as unknown as Selection);
+    render(
+      <KeyboardShortcutsHarness
+        copySelectedCanvasLayers={copySelectedCanvasLayers}
+      />,
+    );
+
+    const copyEvent = new KeyboardEvent('keydown', {
+      key: 'c',
+      code: 'KeyC',
+      ctrlKey: true,
+      bubbles: true,
+      cancelable: true,
+    });
+    window.dispatchEvent(copyEvent);
+
+    expect(copySelectedCanvasLayers).not.toHaveBeenCalled();
+    expect(copyEvent.defaultPrevented).toBe(false);
+  });
+
  it('routes Windows view and layer ordering shortcuts', () => {
    const fitLayers = vi.fn();
    const updateScaleFromCenter = vi.fn();
@@ -112,6 +112,11 @@ function isCtrlShortcut(event: KeyboardEvent) {
  return event.ctrlKey && !event.altKey && !event.metaKey;
 }

+function hasSelectedText() {
+  const selection = window.getSelection();
+  return Boolean(selection?.toString().trim());
+}
+
 function isKey(event: KeyboardEvent, key: string, code?: string) {
  return event.key.toLowerCase() === key || event.code === code;
 }
@@ -268,6 +273,9 @@ export function useImageCanvasKeyboardShortcuts({
          return;
        }
        if (event.code === 'KeyC') {
+          if (hasSelectedText()) {
+            return;
+          }
          event.preventDefault();
          copySelectedCanvasLayers?.();
          return;
@@ -8571,14 +8571,6 @@ button.image-canvas-editor__reference-chip:disabled {
  overflow-wrap: anywhere;
 }

-.image-canvas-editor__metadata-footer {
-  padding: 0.72rem 0.85rem;
-}
-
-.image-canvas-editor__metadata-copy-button {
-  justify-content: center;
-}
-
@media (max-width: 760px) {
  .image-canvas-editor {
    flex-direction: column;