feat: triggered rendering image after the image content changed (#4662)

* feat:  triggered rendering image after the image content changed

* feat: src add tag

* feat: code robustness optimization, adding single tests

* feat:  triggered rendering image after the image content changed

* feat: src add tag

* feat: code robustness optimization, adding single tests

Author: lulusir

packages/file-scheme/src/browser/preview.view.tsx

@@ -1,11 +1,38 @@
 import React, { memo } from 'react';
 
-import { Disposable, useInjectable } from '@opensumi/ide-core-browser';
+import { Disposable, URI, useInjectable } from '@opensumi/ide-core-browser';
 import { StaticResourceService } from '@opensumi/ide-core-browser/lib/static-resource';
 import { IResource, ReactEditorComponent } from '@opensumi/ide-editor/lib/browser';
+import { IFileServiceClient } from '@opensumi/ide-file-service';
 
 import styles from './style.module.less';
 
+interface UseResourceChangeResult {
+  fileChanged: number;
+}
+
+const useResourceChange = (resource: IResource): UseResourceChangeResult => {
+  const fileServiceClient = useInjectable<IFileServiceClient>(IFileServiceClient);
+  const [fileChanged, setFileChanged] = React.useState(0);
+
+  React.useEffect(() => {
+    const disposable = fileServiceClient.onImageFilesChanged((events) => {
+      const hasResourceChanged = events.some((event) => {
+        const eventUri = typeof event.uri === 'string' ? new URI(event.uri) : event.uri;
+        return eventUri.isEqual(resource.uri);
+      });
+
+      if (hasResourceChanged) {
+        setFileChanged((prev) => prev + 1);
+      }
+    });
+
+    return () => disposable.dispose();
+  }, [resource.uri, fileServiceClient]);
+
+  return { fileChanged };
+};
+
 const useResource = (resource: IResource) => {
   const staticService = useInjectable<StaticResourceService>(StaticResourceService);
 
@@ -29,16 +56,24 @@ export const ImagePreview: ReactEditorComponent<null> = (props) => {
   const imgRef = React.useRef<HTMLImageElement>();
   const imgContainerRef = React.useRef<HTMLDivElement>();
   const { src } = useResource(props.resource);
+  const { fileChanged } = useResourceChange(props.resource);
 
   React.useEffect(() => {
     const disposer = new Disposable();
     if (imgRef.current) {
-      imgRef.current.src = src;
+      try {
+        const url = new URL(src);
+        url.searchParams.set('_t', fileChanged.toString());
+        imgRef.current.src = url.href;
+      } catch (error) {
+        // 如果 src 不是有效的 URL，直接使用原始 src
+        imgRef.current.src = src;
+      }
     }
     return () => {
       disposer.dispose();
     };
-  }, [props.resource]);
+  }, [src, fileChanged]);
 
   return (
     <div className={styles.kt_image_preview}>

packages/file-service/__tests__/browser/file-service-client.test.ts

@@ -2,7 +2,7 @@ import fs from 'fs-extra';
 import temp from 'temp';
 
 import { WSChannelHandler } from '@opensumi/ide-connection/lib/browser';
-import { DisposableCollection, FileUri, UTF8 } from '@opensumi/ide-core-common';
+import { DisposableCollection, FileChangeType, FileUri, UTF8 } from '@opensumi/ide-core-common';
 import { createBrowserInjector } from '@opensumi/ide-dev-tool/src/injector-helper';
 import { FileService } from '@opensumi/ide-file-service/lib/node';
 import { DiskFileSystemProvider } from '@opensumi/ide-file-service/lib/node/disk-file-system.provider';
@@ -165,6 +165,30 @@ describe('FileServiceClient should be work', () => {
     await watcher.dispose();
   });
 
+  it('onImageFilesChanged event', (done) => {
+    async function inner() {
+      fileServiceClient.onImageFilesChanged((event) => {
+        // 期望只收到一个image的event
+        expect(event.every((v) => v.uri.includes('a.jpg'))).toBeTruthy();
+        done();
+      });
+      // 触发两个change
+      await fileServiceClient.fireFilesChange({
+        changes: [
+          {
+            uri: 'a.jpg',
+            type: FileChangeType.UPDATED,
+          },
+          {
+            uri: 'a.log',
+            type: FileChangeType.UPDATED,
+          },
+        ],
+      });
+    }
+    inner();
+  });
+
   it('set fileExcludes', async () => {
     const targetDir = tempDir.resolve('watch-file-exclude-temp-dir');
     await fs.ensureDir(targetDir.codeUri.fsPath);

packages/file-service/src/browser/file-service-client.ts

@@ -51,6 +51,7 @@ import {
   TextDocumentContentChangeEvent,
   containsExtraFileMethod,
 } from '../common';
+import { EXT_LIST_IMAGE } from '../common/file-ext';
 
 import { FileSystemWatcher } from './watcher';
 
@@ -83,6 +84,8 @@ export class FileServiceClient implements IFileServiceClient, IDisposable {
 
   protected readonly _onWatcherFailed = new Emitter<FileWatcherFailureParams>();
   readonly onWatcherFailed: Event<FileWatcherFailureParams> = this._onWatcherFailed.event;
+  protected readonly _onImageFilesChanged = new Emitter<FileChangeEvent>();
+  readonly onImageFilesChanged: Event<FileChangeEvent> = this._onImageFilesChanged.event;
 
   protected readonly _onFileProviderChanged = new Emitter<string[]>();
   readonly onFileProviderChanged: Event<string[]> = this._onFileProviderChanged.event;
@@ -172,6 +175,7 @@ export class FileServiceClient implements IFileServiceClient, IDisposable {
   }
 
   public dispose() {
+    this._onImageFilesChanged.dispose();
     return this.toDisposable.dispose();
   }
 
@@ -358,8 +362,21 @@ export class FileServiceClient implements IFileServiceClient, IDisposable {
           type: change.type,
         } as FileChange),
     );
+
+    // 触发所有文件变化事件
     this._onFilesChanged.fire(changes);
     this.eventBus.fire(new FilesChangeEvent(changes));
+
+    // 过滤图片文件变化并触发专门的事件
+    const imageChanges = changes.filter((change) => {
+      const uri = new URI(change.uri);
+      const ext = uri.path.ext?.toLowerCase().replace('.', '');
+      return ext && EXT_LIST_IMAGE.has(ext);
+    });
+
+    if (imageChanges.length > 0) {
+      this._onImageFilesChanged.fire(imageChanges);
+    }
   }
 
   fireWatcherOverflow(event: FileWatcherOverflowParams): void {

packages/file-service/src/common/file-service-client.ts

@@ -34,6 +34,8 @@ export interface IFileServiceClient {
 
   onFilesChanged: Event<FileChangeEvent>;
 
+  onImageFilesChanged: Event<FileChangeEvent>;
+
   onFileProviderChanged: Event<string[]>;
 
   onWatcherOverflow?: Event<FileWatcherOverflowParams>;