[Feat 0000] 调整CAD viewer获取数据的逻辑，避免意外的bug

build/vite/plugin/serveStatic.ts

@@ -15,10 +15,11 @@ export function configServerPlugin(): PluginOption {
       return () => {
         server.middlewares.use(async (req, res, next) => {
           STATIC_SERVED_FILE_SUFFIX.forEach((suffix) => {
-            if (req.originalUrl?.endsWith(suffix)) {
+            if (req.originalUrl?.includes(suffix)) {
               res.setHeader('Content-Type', CONTENT_TYPE_MAP.get(suffix) || 'application/application');
               res.writeHead(200);
-              res.write(fs.readFileSync(path.join(__dirname, `../../../public/${req.originalUrl}`)));
+              const [url] = (req.originalUrl || '')?.split('?');
+              res.write(fs.readFileSync(path.join(__dirname, `../../../public/${url}`)));
               res.end();
             }
 

src/components/CADViewer/src/CADViewer.vue

@@ -12,6 +12,7 @@
   import { CAD_VIEWER_IFRAME_ID } from './viewer.data';
   import { onMounted, onUnmounted } from 'vue';
   import { operationMap } from './operationMap';
+  import useCADViewer from './hooks/useCADViewer';
   // import url from '/mxcad/index.html?url';
 
   withDefaults(
@@ -32,16 +33,22 @@
       height: 980,
       // iframeMode: true,
       showOperations: false,
-      iframeSrc: '/mxcad/index.html',
+      iframeSrc: '/mxcad/index.html?file=default.mxweb',
     }
   );
 
+  const { triggerHook } = useCADViewer();
+
   const onMessage = (message: MessageEvent) => {
     try {
-      if (!message.isTrusted || !operationMap.has(message.data.cmd)) return;
-      const op = operationMap.get(message.data.cmd) as SupportedOperation;
-      if (!op.messageHandler) return;
-      op.messageHandler(message.data);
+      if (!message.isTrusted) return;
+
+      if (operationMap.has(message.data.cmd)) {
+        const op = operationMap.get(message.data.cmd) as SupportedOperation;
+        if (!op.messageHandler) return;
+        op.messageHandler(message.data);
+      }
+      triggerHook(message.data.cmd);
     } catch (e) {}
   };
 

src/components/CADViewer/src/hooks/useCADViewer.ts

@@ -6,6 +6,9 @@ import { useGlobSetting } from '/@/hooks/setting';
 const globSetting = useGlobSetting();
 const baseApiUrl = globSetting.domainUrl;
 
+// 先设计成这样避免hooks无法取消注册
+const hooks = new Map<SupportedOperationName, () => void>();
+
 export default function useCADViewer() {
   /** 向CADViewer发送指令 */
   function postMessage(cmd: SupportedOperationName, param?: unknown) {
@@ -39,10 +42,32 @@ export default function useCADViewer() {
         close();
       });
   }
+
+  function registHook(name: SupportedOperationName, callback: () => void) {
+    hooks.set(name, callback);
+  }
+
+  function triggerHook(name: SupportedOperationName) {
+    if (hooks.has(name)) {
+      const fn = hooks.get(name) as () => void;
+      fn();
+    }
+  }
+
+  function unregistHook(name: SupportedOperationName) {
+    hooks.delete(name);
+  }
+
   return {
     /** 向CADViewer发送指令 */
     postMessage,
     /** 调用 api 转换文件格式，并返回转换后文件的网络地址 */
     processFile,
+    /** 注册Hook函数，同名的Hook函数将覆盖，常用于在某些指令执行完毕后做处理 */
+    registHook,
+    /** 触发Hook函数 */
+    triggerHook,
+    /** 解除注册Hook函数 */
+    unregistHook,
   };
 }

src/components/CADViewer/src/types/index.ts

@@ -1,7 +1,7 @@
 import { Component } from 'vue';
 
 /** 支持的操作名称，即mxcad app支持的命令 */
-export type SupportedOperationName = 'MKY_Open_Mxweb' | 'MKY_Download_Mxweb';
+export type SupportedOperationName = 'MKY_Open_Mxweb' | 'MKY_Download_Mxweb' | 'MKY_Open_File_Complete';
 export type SupportedOperation = {
   name: SupportedOperationName;
   alias: string;

src/views/vent/performance/fileDetail/commen/CADViewer.vue

@@ -3,7 +3,7 @@
   <CADViewer class="w-100% h-100%" :height="height" />
 </template>
 <script lang="ts" setup>
-  import { onMounted, watch } from 'vue';
+  import { onMounted, onUnmounted, watch } from 'vue';
   import { CADViewer, useCADViewer } from '/@/components/CADViewer';
   import { downLoad } from '../fileDetail.api';
   import { useRoute } from 'vue-router';
@@ -17,28 +17,32 @@
     height: number;
   }>();
 
-  const { processFile, postMessage } = useCADViewer();
+  const { processFile, postMessage, registHook, unregistHook } = useCADViewer();
 
   function openFile(id: string, filename: string) {
-    const loading = message.loading('正在下载文件', 0);
-    downLoad({ id }).then((res: Blob) => {
-      processFile(new File([res], filename))
-        .then((path) => {
-          postMessage('MKY_Open_Mxweb', path);
-        })
-        .finally(() => {
-          loading();
-        });
+    // 只触发一次，因为MKY_Open_Mxweb之后会自动触发MKY_Open_File_Complete钩子，导致循环
+    registHook('MKY_Open_File_Complete', () => {
+      unregistHook('MKY_Open_File_Complete');
+      const loading = message.loading('正在下载文件', 0);
+      downLoad({ id }).then((res: Blob) => {
+        processFile(new File([res], filename))
+          .then((path) => {
+            postMessage('MKY_Open_Mxweb', path);
+          })
+          .finally(() => {
+            loading();
+          });
+      });
     });
   }
 
-  watch(
-    () => props.id,
-    (v) => {
-      if (!v) return;
-      openFile(v, props.filename);
-    }
-  );
+  // watch(
+  //   () => props.id,
+  //   (v) => {
+  //     if (!v) return;
+  //     openFile(v, props.filename);
+  //   }
+  // );
 
   onMounted(() => {
     const route = useRoute();
@@ -50,6 +54,10 @@
       openFile(props.id, props.filename);
     }
   });
+
+  onUnmounted(() => {
+    unregistHook('MKY_Open_File_Complete');
+  });
 </script>
 
 <style scoped lang="less">