feat(init): 初始化远程组件项目

2025-08-19 18:15:28 +08:00
commit 611cc5c6dd
32 changed files with 13612 additions and 0 deletions
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import {
+  GlobalInjectKeyConst,
+  type GlobalInjectUploadFileToOSS,
+} from "~/types/common";
+import { ref } from "vue";
+
+interface Props {
+  title?: string; // 标题，显示在上传按钮上方
+  paramName?: string;
+  params?: { name: string; param?: string }[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: "",
+  paramName: "upload_image_path",
+});
+
+const { useUtilsUploadFileToOSS } = inject<GlobalInjectUploadFileToOSS>(
+  GlobalInjectKeyConst.UploadFileToOSS,
+  {
+    useUtilsUploadFileToOSS: async (file: File | Blob, filename?: string) => "",
+  },
+);
+
+const image = ref<string | undefined>();
+
+const handleSetImage = (url: string) => {
+  image.value = url;
+};
+const pageSize = ref<number>(8);
+
+const handleUploadImg = async (image?: string) => {
+  if (!image) return;
+  if (image.startsWith("http")) {
+    return image;
+  }
+
+  const blob = await ImageUrlToBlob(image);
+
+  const fileName = `upload_image_${new Date().getTime()}.png`;
+  return await useUtilsUploadFileToOSS(blob, fileName);
+};
+
+const handleBindParams = async () => {
+  return {
+    [props.paramName]: await handleUploadImg(image.value),
+  };
+};
+
+defineExpose({
+  handleBindParams,
+});
+</script>
+
+<template>
+  <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" />
+      {{ title || "图片上传" }}
+    </div>
+    <div class="flex flex-col items-center border rounded">
+      <!--    图片上传、预览区域 -->
+      <div class="h-48 w-full flex justify-center">
+        <!--    显示选中图片 -->
+        <div v-if="image" class="p-2 w-full">
+          <ImagePreviewWithUpload v-model="image" />
+        </div>
+
+        <!--    图片上传 -->
+        <ImageUploadDropPasteClick v-else v-model="image" />
+      </div>
+      <div>
+        <RecommendedImages v-model="pageSize" @update-image="handleSetImage" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>