feat(components): 添加图片上传组件及对话框功能

新增 `ImageUpload` 组件用于文件选择与预览，并集成到 `UploadDialog` 中实现图片上传逻辑。
更新了 `Dialog` 组件以支持可选属性和 model 绑定，增强其灵活性和可用性。
引入 `lucide-vue-next` 图标库支持图标渲染。
重构图片配置页面，移除旧上传逻辑，使用新的弹窗方式进行图片上传操作。

src/components/Dialog/index.vue

@@ -1,13 +1,13 @@
 <script setup lang='ts'>
-import { ref, toRefs } from 'vue'
+import { onMounted, ref, toRefs } from 'vue'
 import i18n from '@/locales/i18n'
 
 interface Props {
   title: string
-  desc: string
+  desc?: string
   cancelText?: string
   submitText?: string
-  submitFunc: () => void
+  submitFunc?: () => void
   cancelFunc?: () => void
 }
 const props = withDefaults(defineProps<Props>(), {
@@ -15,6 +15,10 @@ const props = withDefaults(defineProps<Props>(), {
   submitText: i18n.global.t('button.confirm'),
   cancelFunc: () => {},
 })
+const visible = defineModel('visible', {
+  type: Boolean,
+  default: false,
+})
 
 const dialogRef = ref <HTMLDialogElement | null> (null)
 function defaultCancelFunc() {
@@ -26,6 +30,13 @@ function showDialog() {
 }
 defineExpose({
   showDialog,
+  closed,
+})
+
+onMounted(() => {
+  dialogRef.value?.addEventListener('close', () => {
+    visible.value = false
+  })
 })
 const { title, desc, cancelText, submitText, submitFunc, cancelFunc = defaultCancelFunc } = toRefs(props)
 </script>
@@ -33,12 +44,15 @@ const { title, desc, cancelText, submitText, submitFunc, cancelFunc = defaultCan
 <template>
   <dialog id="my_modal" ref="dialogRef" class="border-none modal">
     <div class="modal-box">
-      <h3 class="text-lg font-bold">
+      <h3 v-if="title" class="text-lg font-bold">
         {{ title }}
       </h3>
-      <p class="py-4">
+      <p v-if="desc" class="py-4">
         {{ desc }}
       </p>
+      <div>
+        <slot name="content" />
+      </div>
       <div class="modal-action">
         <form method="dialog" class="flex gap-3">
           <!-- if there is a button in form, it will close the modal -->

src/components/ImageUpload/index.vue

@@ -0,0 +1,58 @@
+<script setup lang='ts'>
+import type { IFileData } from './type'
+import { FileImage, X } from 'lucide-vue-next'
+import { ref } from 'vue'
+import { readFileData } from '@/utils/file'
+
+defineProps<{
+  limitType?: string
+}>()
+
+const emits = defineEmits<{
+  uploadFile: [fileData: IFileData | null]
+}>()
+const originFileName = ref<string | null>(null)
+const fileData = ref<IFileData | null>(null)
+
+async function handleFileChange(e: Event) {
+  const file = ((e.target as HTMLInputElement).files as FileList)[0]
+  const type = file.type
+  const { dataUrl, fileName } = await readFileData(file)
+  fileData.value = { dataUrl, fileName, type }
+  originFileName.value = fileName
+  emits('uploadFile', fileData.value)
+}
+function removeFile() {
+  fileData.value = null
+  emits('uploadFile', null)
+}
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col items-center mt-6">
+    <input
+      id="file-upload"
+      type="file" class="w-full bg-red-400/50 max-h-52 cursor-pointer absolute" style="display: none;" :accept="limitType"
+      @change="handleFileChange"
+    >
+    <label for="file-upload" class="w-full h-52 cursor-pointer border-2 border-dashed flex items-center justify-center overflow-hidden">
+      <img v-if="fileData" class="w-full object-cover stroke-0" :src="fileData.dataUrl" alt="">
+      <div v-else class="w-full h-full flex justify-center items-center flex-col gap-4">
+        <FileImage class="w-2/3 h-2/3 stroke-1 text-gray-500/50" />
+        <span class="btn btn-neutral">点击上传</span>
+      </div>
+    </label>
+    <div v-if="fileData" class="w-full flex items-center justify-between mt-2">
+      <p class="max-w-[3/4] truncate text-sm">
+        {{ originFileName }}
+      </p>
+      <button class="btn btn-xs btn-square btn-ghost" @click="removeFile">
+        <X />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/ImageUpload/type.ts

@@ -0,0 +1,5 @@
+export interface IFileData {
+    dataUrl: string
+    fileName: string
+    type: string
+}