feat: 完善了ts

apps/phoenix/src/App.tsx

@@ -1,19 +1,29 @@
-import { readImageDicomFileSeries } from "@itk-wasm/dicom";
+import {
+  readImageDicomFileSeries,
+  structuredReportToHtml,
+} from "@itk-wasm/dicom";
 import vtkITKHelper from "@kitware/vtk.js/Common/DataModel/ITKHelper";
 import vtkVolume from "@kitware/vtk.js/Rendering/Core/Volume";
 import vtkFullScreenRenderWindow from "@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow";
 import "@kitware/vtk.js/Rendering/Profiles/Volume";
-import vtkActor from "@kitware/vtk.js/Rendering/Core/Actor";
 import { useEffect, useRef, useState } from "react";
 import vtkRenderer from "@kitware/vtk.js/Rendering/Core/Renderer";
 import vtkVolumeMapper from "@kitware/vtk.js/Rendering/Core/VolumeMapper";
+import vtkRenderWindow from "@kitware/vtk.js/Rendering/Core/RenderWindow";
 
 function App() {
   const [files, setFiles] = useState<File[]>([]);
+  const inputRef = useRef<HTMLInputElement>(null);
   const rendererRef = useRef<vtkRenderer>();
-  const mapperRef = useRef();
+  const mapperRef = useRef<vtkVolumeMapper>();
-  const actorRef = useRef();
+  const actorRef = useRef<vtkVolume>();
-  const renderWindowRef = useRef();
+  const renderWindowRef = useRef<vtkRenderWindow>();
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.webkitdirectory = true;
+    }
+  }, []);
 
   useEffect(() => {
     if (files.length > 0) {
@@ -21,24 +31,31 @@ function App() {
       rendererRef.current = fullScreenRenderer.getRenderer();
       renderWindowRef.current = fullScreenRenderer.getRenderWindow();
       actorRef.current = vtkVolume.newInstance();
-      mapperRef.current = vtkVolumeMapper.newInstance({ sampleDistance: 1.1});
+      mapperRef.current = vtkVolumeMapper.newInstance({ sampleDistance: 1.1 });
 
       readImageDicomFileSeries(null, {
         inputImages: files,
       }).then((image) => {
         const vtkImage = vtkITKHelper.convertItkToVtkImage(image.outputImage);
-
+        mapperRef.current?.setInputData(vtkImage);
-        mapperRef.current.setInputData(vtkImage);
+        mapperRef.current && actorRef.current?.setMapper(mapperRef.current);
-        actorRef.current.setMapper(mapperRef.current);
+        actorRef.current && rendererRef.current?.addVolume(actorRef.current);
-
+        rendererRef.current?.resetCamera();
-        rendererRef.current?.addVolume(actorRef.current)
+        renderWindowRef.current?.render();
-        rendererRef.current.resetCamera();
-        renderWindowRef.current.render();
       });
+
+      return () => {
+        actorRef.current = undefined;
+        mapperRef.current = undefined;
+        rendererRef.current = undefined;
+        renderWindowRef.current = undefined;
+      };
     }
   }, [files]);
 
-  const handleFolderUpload = async (event: Event) => {
+  const handleFolderUpload = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
     const target = event.target as HTMLInputElement;
     if (!target.files) return;
     const files = [...target.files].filter((file) =>
@@ -52,7 +69,7 @@ function App() {
       <input
         type="file"
         onChange={handleFolderUpload}
-        webkitdirectory="true"
+        ref={inputRef}
         style={{ position: "fixed", zIndex: 100 }}
       />
     </>