优化组件开发的文件结构

app.vue

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

components/ImageUpload/ImagePreviewWithUpload.vue

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

components/ImageUpload/ImageUploadDropPasteClick.vue

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

components/ImageUpload/RecommendedImages.vue

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

components/ImageUpload/index.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import {
+
-  GlobalInjectKeyConst,
+
-  type GlobalInjectUploadFileToOSS,
+import {GlobalInjectKeyConst, type GlobalInjectUploadFileToOSS} from "~/types";
-} from "~/types/common";
+import ImagePreviewWithUpload from "./ImagePreviewWithUpload.vue";
-import { ref } from "vue";
+import RecommendedImages from "./RecommendedImages.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" />
+        <icon name="icon-park:upload-picture" size="20" class="mr-1 text-blue-500 dark:text-white" />
         {{ 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: "DrawImageUpload", // 组件名称
+  name: "ImageUpload", // 组件名称
-  path: "./components/drawPanne/ImageUpload.vue", // 组件路径
+  path: "./components/ImageUpload/index.vue", // 组件路径
   scenes: ComponentSceneConst.DrawPanne, // 组件场景
   description: "A image upload component", // 组件描述
   data: {
     // 组件数据
-    paramName: "upload_image_path", // 参数名称
+    paramName: "upload_image_path", // 参数名称,可自定义
-    label: "图片上传", // 组件标签
+    label: "图片上传", // 组件标签，显示在组件面板时候的名称
-    icon: "icon-park:upload-picture", // 组件图标
+    icon: "icon-park:upload-picture", // 组件图标，显示在组件面板的图标
-    group: ComponentGroupConst.IMAGE, // 组件分组
+    group: ComponentGroupConst.IMAGE, // 针对组件
     isRefComponent: true, // 是否为引用组件 （引用组件，在执行绘画的时候会执行参数赋值操作）
   },
 } satisfies IComponentMateInfo;

nuxt.config.ts

@@ -17,7 +17,7 @@ export default defineNuxtConfig({
     "@nuxtjs/tailwindcss",
     "~/modules/generate-manifest",
   ],
-  // ssr: false,
+  ssr: false,
   css: ["~/assets/css/tailwind.css"],
   postcss: {
     plugins: {

package.json

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

types/index.ts

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