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 -->