From 97276224ee7a1fb5fd3d5f7d26d0d61e3d9dfbd8 Mon Sep 17 00:00:00 2001
From: Miao_Spring <539943419@qq.com>
Date: Fri, 22 Aug 2025 01:20:48 +0800
Subject: [PATCH] =?UTF-8?q?feat(plugins):=20=E6=B7=BB=E5=8A=A0ONNX?=
 =?UTF-8?q?=E6=A8=A1=E5=9E=8B=E6=BC=94=E7=A4=BA=E6=8F=92=E4=BB=B6=E5=B9=B6?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=BB=84=E4=BB=B6=E5=8A=A0=E8=BD=BD=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refactor(component2plugin): 改进组件加载逻辑避免重复加载
style(components.d.ts): 清理未使用的组件类型声明
chore(package.json): 添加build:normal脚本
---
 components.d.ts                               |   3 -
 package.json                                  |   1 +
 .../miaoCrypto/{export.ts => _export.ts}      |   0
 src/plugins/miaoDirectory/export.ts           |   7 +-
 src/plugins/onnx_demo_bird/export.ts          |  51 +++
 src/plugins/onnx_demo_bird/onnx_demo.vue      | 306 ++++++++++++++++++
 .../{export.ts => _export.ts}                 |   0
 src/utils/component2plugin.ts                 |  24 +-
 8 files changed, 378 insertions(+), 14 deletions(-)
 rename src/plugins/miaoCrypto/{export.ts => _export.ts} (100%)
 create mode 100644 src/plugins/onnx_demo_bird/export.ts
 create mode 100644 src/plugins/onnx_demo_bird/onnx_demo.vue
 rename src/plugins/registerExternalPlugin/{export.ts => _export.ts} (100%)

diff --git a/components.d.ts b/components.d.ts
index cabcbcf..d30b787 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -15,19 +15,16 @@ declare module 'vue' {
     MiaoLazyDiv: typeof import('./src/components/miaoLazyDiv.vue')['default']
     MiaoMask: typeof import('./src/components/miaoMask.vue')['default']
     MiaoPopupInput: typeof import('./src/components/miaoPopupInput.vue')['default']
-    NAlert: typeof import('naive-ui')['NAlert']
     NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
     NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
     NButton: typeof import('naive-ui')['NButton']
     NCard: typeof import('naive-ui')['NCard']
-    NCheckbox: typeof import('naive-ui')['NCheckbox']
     NDropdown: typeof import('naive-ui')['NDropdown']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
     NEmpty: typeof import('naive-ui')['NEmpty']
     NGrid: typeof import('naive-ui')['NGrid']
     NGridItem: typeof import('naive-ui')['NGridItem']
     NIcon: typeof import('naive-ui')['NIcon']
-    NInput: typeof import('naive-ui')['NInput']
     NQrCode: typeof import('naive-ui')['NQrCode']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSpace: typeof import('naive-ui')['NSpace']
diff --git a/package.json b/package.json
index c4f5665..3166183 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
         "build": "vue-tsc -b && vite build",
         "build:auto": "pnpm run build && go env -w GOOS=windows GOARCH=amd64 && rm -rf ./src-server/web/* && cp -r ./dist/* ./src-server/web/ && cd ./src-server && go env -w GOOS=windows && go build -o ../miao-directory.exe",
         "build:fast": "bash build.auto.release.sh -fast",
+        "build:normal": "bash build.auto.release.sh",
         "preview": "vite preview",
         "format": "prettier --write src/"
     },
diff --git a/src/plugins/miaoCrypto/export.ts b/src/plugins/miaoCrypto/_export.ts
similarity index 100%
rename from src/plugins/miaoCrypto/export.ts
rename to src/plugins/miaoCrypto/_export.ts
diff --git a/src/plugins/miaoDirectory/export.ts b/src/plugins/miaoDirectory/export.ts
index aa56667..8eef82d 100644
--- a/src/plugins/miaoDirectory/export.ts
+++ b/src/plugins/miaoDirectory/export.ts
@@ -1,13 +1,14 @@
 import { registerComponentOption } from '@/class/PluginCenter'
 import FileTray from '@vicons/ionicons5/es/FileTray'
-// import MiaoDirectory from '@/plugins/miaoDirectory/miaoDirectory.vue'
+import MiaoDirectory from '@/plugins/miaoDirectory/miaoDirectory.vue'
 
 const pluginConfig: registerComponentOption = {
    key: 'miaoDirectory',
    name: '文件夹',
    icon: FileTray,
-   getComponent: async () =>
-      (await import('@/plugins/miaoDirectory/miaoDirectory.vue')).default,
+   // getComponent: async () =>
+   //    (await import('@/plugins/miaoDirectory/miaoDirectory.vue')).default,
+   getComponent: async () => MiaoDirectory,
    filter: (vDirs, vFiles) => {
       if (vFiles.length) {
          return false
diff --git a/src/plugins/onnx_demo_bird/export.ts b/src/plugins/onnx_demo_bird/export.ts
new file mode 100644
index 0000000..e33d51d
--- /dev/null
+++ b/src/plugins/onnx_demo_bird/export.ts
@@ -0,0 +1,51 @@
+import { registerComponentOption } from '@/class/PluginCenter'
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
+import { Analytics } from '@vicons/ionicons5'
+
+const pluginConfig: registerComponentOption = {
+   key: '45632456',
+   name: 'ONNX DEMO BIRD',
+   icon: Analytics,
+   getComponent: async () =>
+      (await import('./onnx_demo.vue')).default,
+   filter: (_vDirs: VirtualDirectory[], vFiles: VirtualFile[]) => {
+      if (vFiles.length === 0) {
+         return false
+      }
+      
+      // 检查是否存在.onnx文件
+      let hasOnnxFile = false
+      // 检查是否存在图片文件
+      let hasImageFile = false
+      
+      const imageSuffixList = [
+         'xbm', 'tif', 'pjp', 'svgz', 'jpg', 'jpeg', 'ico', 'tiff', 'gif',
+         'svg', 'jfif', 'webp', 'png', 'bmp', 'pjpeg', 'avif'
+      ]
+      
+      for (let vf of vFiles) {
+         if (vf.name.endsWith('.onnx')) {
+            hasOnnxFile = true
+            return true
+         }
+         
+         for (let end of imageSuffixList) {
+            if (vf.name.endsWith(end)) {
+               hasImageFile = true
+               break
+            }
+         }
+         
+         if (hasOnnxFile && hasImageFile) {
+            return true
+         }
+      }
+      
+      return false
+   }
+}
+
+export default pluginConfig
+
+import { PluginExportType } from '@/types/type'
+export const type = PluginExportType.component 
\ No newline at end of file
diff --git a/src/plugins/onnx_demo_bird/onnx_demo.vue b/src/plugins/onnx_demo_bird/onnx_demo.vue
new file mode 100644
index 0000000..b374ece
--- /dev/null
+++ b/src/plugins/onnx_demo_bird/onnx_demo.vue
@@ -0,0 +1,306 @@
+<template>
+   <miao-drop-handler @on-virtual-files="handleDrop">
+      <miao-message-provider ref="miaoMessageRef">
+         <div class="onnx-demo" ref="rootRef">
+            <n-card title="ONNX模型演示" class="onnx-demo-card">
+               <n-grid :cols="2" :x-gap="12">
+                  <n-grid-item>
+                     <div class="onnx-demo-section">
+                        <h3>输入图像</h3>
+                        <div v-if="inputImage" class="onnx-demo-image-container">
+                           <img :src="inputImage.url" class="onnx-demo-image" />
+                           <p>{{ inputImage.name }}</p>
+                        </div>
+                        <n-empty v-else description="无图像" />
+                     </div>
+                  </n-grid-item>
+                  <n-grid-item>
+                     <div class="onnx-demo-section">
+                        <h3>ONNX模型</h3>
+                        <div v-if="onnxModel" class="onnx-demo-model-info">
+                           <p>模型: {{ onnxModel.name }}</p>
+                           <p>大小: {{ formatFileSize(onnxModel.size) }}</p>
+                        </div>
+                        <n-empty v-else description="无模型" />
+                     </div>
+                  </n-grid-item>
+               </n-grid>
+
+               <!-- <div class="onnx-demo-control">
+                  <n-button type="primary" @click="processImage" :disabled="!inputImage || !onnxModel || isProcessing"
+                     :loading="isProcessing">
+                     处理图像
+                  </n-button>
+               </div> -->
+
+               <div class="onnx-demo-result" v-if="modelOutput">
+                  <h3>模型输出:</h3>
+                  <n-card embedded>
+                     <pre>{{ modelOutput }}</pre>
+                  </n-card>
+               </div>
+            </n-card>
+         </div>
+      </miao-message-provider>
+   </miao-drop-handler>
+</template>
+
+<script setup lang="ts">
+import miaoDropHandler from '@/components/miaoDropHandler.vue'
+import miaoMessageProvider from '@/components/miaoAlertTipProvider.vue'
+import { VirtualFile } from '@/class/VirtualDirectory'
+import VirtualDirectory from '@/class/VirtualDirectory'
+import { onMounted, ref, computed, watch } from 'vue'
+// @ts-ignore
+let ort: any;
+
+const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
+   required: true
+})
+
+const currentDirectories = defineModel<VirtualDirectory[]>(
+  'currentDirectories',
+  {
+    required: true
+  }
+)
+
+const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
+const rootRef = ref()
+const isProcessing = ref(false)
+const modelOutput = ref<string | null>(null)
+
+// 获取第一个图像文件
+const inputImage = computed(() => {
+   const imageSuffixList = [
+      'xbm', 'tif', 'pjp', 'svgz', 'jpg', 'jpeg', 'ico', 'tiff', 'gif',
+      'svg', 'jfif', 'webp', 'png', 'bmp', 'pjpeg', 'avif'
+   ]
+
+   for (const file of currentFiles.value) {
+      for (const suffix of imageSuffixList) {
+         if (file.name.toLowerCase().endsWith(suffix)) {
+            return file
+         }
+      }
+   }
+
+   return null
+})
+
+// 获取ONNX模型文件
+const onnxModel = computed(() => {
+   for (const file of currentFiles.value) {
+      if (file.name.toLowerCase().endsWith('.onnx')) {
+         return file
+      }
+   }
+
+   return null
+})
+
+const handleDrop = (vFiles: VirtualFile[]) => {
+   const imageSuffixList = [
+      'xbm', 'tif', 'pjp', 'svgz', 'jpg', 'jpeg', 'ico', 'tiff', 'gif',
+      'svg', 'jfif', 'webp', 'png', 'bmp', 'pjpeg', 'avif'
+   ]
+   let imgFile: VirtualFile | null = null
+   out: for (const file of vFiles) {
+      for (const suffix of imageSuffixList) {
+         if (file.name.toLowerCase().endsWith(suffix)) {
+            imgFile = file
+            break out
+         }
+      }
+   }
+   if (imgFile) {
+      currentFiles.value.unshift(imgFile)
+   }
+}
+
+// 格式化文件大小
+const formatFileSize = (size: number): string => {
+   if (size < 1024) {
+      return `${size} B`
+   } else if (size < 1024 * 1024) {
+      return `${(size / 1024).toFixed(2)} KB`
+   } else {
+      return `${(size / (1024 * 1024)).toFixed(2)} MB`
+   }
+}
+
+const resizeImage = async (img: ImageBitmap, width: number, height: number): Promise<ImageBitmap> => {
+   const canvas = new OffscreenCanvas(width, height)
+   canvas.width = width
+   canvas.height = height
+   const ctx = canvas.getContext('2d')
+   ctx?.drawImage(img, 0, 0, width, height)
+   return await createImageBitmap(canvas)
+}
+
+// 处理图像
+const processImage = async () => {
+   if (!inputImage.value || !onnxModel.value) {
+      miaoMessageRef.value?.alertTip('请选择图像和ONNX模型文件', { type: 'error', timeout: 2000 })
+      return
+   }
+
+   isProcessing.value = true
+   modelOutput.value = null
+
+   try {
+      const alertUpdate = miaoMessageRef.value!.alertTip('正在加载ONNX模型...', { type: 'info', timeout: 2000 })
+
+      const modelResponse = await fetch(onnxModel.value.url)
+      const modelBuffer = await modelResponse.arrayBuffer()
+      alertUpdate('正在创建推理会话...')
+
+      const session = await ort.InferenceSession.create(modelBuffer)
+
+      alertUpdate('正在加载图像...')
+      const imgResponse = await fetch(inputImage.value.url)
+      const imgBlob = await imgResponse.blob()
+
+      alertUpdate('正在预处理图像...')
+      const size = 448
+      const img = await createImageBitmap(imgBlob)
+      const data = await resizeImage(img, size, size)
+
+      const canvas = new OffscreenCanvas(size, size)
+      const ctx = canvas.getContext('2d') as unknown as CanvasRenderingContext2D
+      ctx.drawImage(data, 0, 0, size, size)
+      const imageData = ctx.getImageData(0, 0, size, size).data
+      const newImageData = new Uint8ClampedArray(size * size * 3)
+      for (let i = 0; i < size * size; i++) {
+         newImageData[i * 3] = imageData[i * 4]
+         newImageData[i * 3 + 1] = imageData[i * 4 + 1] 
+         newImageData[i * 3 + 2] = imageData[i * 4 + 2]
+      }
+
+      // const greyScale = [];
+      // for (let i = 0; i < imageData.length; i += 4) {
+      //    greyScale.push(
+      //       (imageData[i] * 0.299 + imageData[i + 1] * 0.587 + imageData[i + 2] * 0.114 - 127.5) /
+      //       127.5
+      //    );
+      // }
+      // debugger
+      const inputTensor = new ort.Tensor('float32', new Float32Array(newImageData), [1, 3, size, size])
+
+      alertUpdate('执行模型推理...')
+      const outputMap = await session.run({
+         input: inputTensor
+      })
+
+      alertUpdate('处理模型输出结果...')
+
+      const outputTensor = Object.values(outputMap)[0]
+      const formattedOutput = JSON.stringify(
+         {
+            data: [...[...(outputTensor as { data: Float32Array }).data].entries()].sort((a, b) => b[1] - a[1]).map(([index, value]) => ({ index, value }))
+         },
+         null,
+         2
+      )
+      modelOutput.value = formattedOutput
+
+      alertUpdate('处理完成!', { type: 'success' })
+   } catch (error) {
+      console.error('ONNX处理错误:', error)
+      miaoMessageRef.value?.alertTip(`处理出错`, { type: 'error', timeout: 2000 })
+      modelOutput.value = `错误: ${error}`
+   } finally {
+      isProcessing.value = false
+   }
+}
+
+onMounted(async () => {
+   console.log('currentDirectories.value[0].url', currentDirectories.value[0]?.url)
+   if (currentDirectories.value && currentDirectories.value.length > 0 && currentDirectories.value[0].url) {
+      const ortModule = await import(/* @vite-ignore */ `${currentDirectories.value[0].url}dist/ort.all.min.mjs`);
+      ort = ortModule;
+      console.log('ort', ort)
+   } else {
+      //  @ts-ignore
+      const ortModule = await import(/* @vite-ignore */ 'https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.all.min.js');
+      ort = ortModule;
+   }
+   
+   await initModel();
+})
+
+const initModel = async () => {
+   if (inputImage.value && onnxModel.value) {
+      miaoMessageRef.value?.alertTip('已检测到图像和ONNX模型，可以进行处理', { type: 'info', timeout: 2000 })
+   }
+
+   watch(() => inputImage.value, () => {
+      processImage()
+   }, {
+      immediate: true
+   })
+}
+</script>
+
+<style scoped>
+.onnx-demo {
+   width: 100%;
+   height: 100%;
+   padding: 16px;
+   overflow: auto;
+}
+
+.onnx-demo-card {
+   margin-bottom: 16px;
+}
+
+.onnx-demo-section {
+   padding: 8px;
+   text-align: center;
+   border: 1px dashed #ccc;
+   border-radius: 4px;
+   min-height: 200px;
+   display: flex;
+   flex-direction: column;
+   justify-content: center;
+}
+
+.onnx-demo-image-container {
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+}
+
+.onnx-demo-image {
+   max-width: 100%;
+   max-height: 180px;
+   object-fit: contain;
+}
+
+.onnx-demo-model-info {
+   text-align: left;
+   width: 100%;
+}
+
+.onnx-demo-control {
+   display: flex;
+   justify-content: center;
+   margin: 16px 0;
+}
+
+.onnx-demo-result {
+   margin-top: 16px;
+   border-top: 1px solid #eee;
+   padding-top: 16px;
+}
+
+.onnx-demo-result pre {
+   white-space: pre-wrap;
+   word-break: break-all;
+   max-height: 300px;
+   overflow: auto;
+   background-color: #f5f5f5;
+   padding: 8px;
+   border-radius: 4px;
+}
+</style>
\ No newline at end of file
diff --git a/src/plugins/registerExternalPlugin/export.ts b/src/plugins/registerExternalPlugin/_export.ts
similarity index 100%
rename from src/plugins/registerExternalPlugin/export.ts
rename to src/plugins/registerExternalPlugin/_export.ts
diff --git a/src/utils/component2plugin.ts b/src/utils/component2plugin.ts
index dfd5ec2..7279f33 100644
--- a/src/utils/component2plugin.ts
+++ b/src/utils/component2plugin.ts
@@ -3,6 +3,7 @@ import VirtualDirectory, { VirtualFile } from "@/class/VirtualDirectory"
 import VirtualPage from "@/class/VirtualPage"
 import usePluginCenter from "@/hooks/usePluginCenter"
 import useVirtualPages from "@/hooks/useVirtualPages"
+import { Component } from "vue"
 
 export const componentOption2pluginOption = (option: registerComponentOption) => {
     const {
@@ -17,7 +18,8 @@ export const componentOption2pluginOption = (option: registerComponentOption) =>
         single = false,
         priority = 0
     } = option
-    let _component: any
+    let _component: Component
+    let _componentPromise: Promise<Component>
     const views = useVirtualPages()
     const pluginCenter = usePluginCenter()
     return {
@@ -36,13 +38,19 @@ export const componentOption2pluginOption = (option: registerComponentOption) =>
             }
 
             if (_component === undefined) {
-                const setAlertTip = pluginCenter.globalAlertTip(`加载 ${name} 插件中`)
-                _component = await getComponent()
-                setAlertTip &&
-                    setAlertTip(`加载 ${name} 插件完成`, {
-                        type: 'success',
-                        timeout: 2000
-                    })
+                if (_componentPromise !== undefined) {
+                    await _componentPromise
+                }
+                else {
+                    const setAlertTip = pluginCenter.globalAlertTip(`加载 ${name} 插件中`)
+                    _componentPromise = getComponent()
+                    _component = await _componentPromise
+                    setAlertTip &&
+                        setAlertTip(`加载 ${name} 插件完成`, {
+                            type: 'success',
+                            timeout: 2000
+                        })
+                }
             }
             const _findRes = views.find(_component) as VirtualPage[]
             if (single && _findRes.length !== 0) {