app.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <!--    调试对象-->
-    <ImageUpload />
+    <DrawPanneImageUpload />
   </div>
 </template>
 <script lang="ts" setup>

components/ImagePreviewWithUpload.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useUploadImage } from "~/composables/draw/useUploadImage";
 
 const props = withDefaults(
   defineProps<{

components/ImageUploadDropPasteClick.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useUploadImage } from "~/composables/draw/useUploadImage";
+
 const props = withDefaults(
   defineProps<{
     maxSizeMB?: number;

components/RecommendedImages.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
 import {
   GlobalInjectKeyConst,
   type GlobalInjectMaterials,

components/drawPanne/ImageUpload.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-
-
-import {GlobalInjectKeyConst, type GlobalInjectUploadFileToOSS} from "~/types";
-import ImagePreviewWithUpload from "./ImagePreviewWithUpload.vue";
-import RecommendedImages from "./RecommendedImages.vue";
+import {
+  GlobalInjectKeyConst,
+  type GlobalInjectUploadFileToOSS,
+} from "~/types/common";
+import { ref } from "vue";
 
 interface Props {
   title?: string; // 标题，显示在上传按钮上方
@@ -57,7 +57,7 @@ defineExpose({
   <div>
     <div class="max-w-[460px] mt-1">
       <div class="flex items-center py-1">
-        <icon name="icon-park:upload-picture" size="20" class="mr-1 text-blue-500 dark:text-white" />
+        <icon name="icon-park:upload-picture" size="20" class="mr-1" />
         {{ title || "图片上传" }}
       </div>
       <div class="flex flex-col items-center border rounded">

manifest/ImageUpload.ts

@@ -2,16 +2,16 @@ import { ComponentSceneConst, type IComponentMateInfo } from "~/composables";
 import { ComponentGroupConst } from "~/composables";
 
 export default {
-  name: "ImageUpload", // 组件名称
-  path: "./components/ImageUpload/index.vue", // 组件路径
+  name: "DrawImageUpload", // 组件名称
+  path: "./components/drawPanne/ImageUpload.vue", // 组件路径
   scenes: ComponentSceneConst.DrawPanne, // 组件场景
   description: "A image upload component", // 组件描述
   data: {
     // 组件数据
-    paramName: "upload_image_path", // 参数名称,可自定义
-    label: "图片上传", // 组件标签，显示在组件面板时候的名称
-    icon: "icon-park:upload-picture", // 组件图标，显示在组件面板的图标
-    group: ComponentGroupConst.IMAGE, // 针对组件
+    paramName: "upload_image_path", // 参数名称
+    label: "图片上传", // 组件标签
+    icon: "icon-park:upload-picture", // 组件图标
+    group: ComponentGroupConst.IMAGE, // 组件分组
     isRefComponent: true, // 是否为引用组件 （引用组件，在执行绘画的时候会执行参数赋值操作）
   },
 } satisfies IComponentMateInfo;

package.json

@@ -1,12 +1,12 @@
 {
   "name": "easyai-remote-ui-kit",
   "private": true,
-  "version": "1.0.2",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "prebuild": "node scripts/updateVersion.js",
     "build": "nuxt build",
-    "dev": "nuxt dev --port 3201 --host",
+    "dev": "nuxt dev --port 3201",
     "generate": "nuxt generate",
     "preview": "nuxt preview PORT=3202",
     "postinstall": "nuxt prepare",

types/index.ts

@@ -1 +0,0 @@
-export * from "./common";