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

新增 `ImageUpload` 组件用于文件选择与预览，并集成到 `UploadDialog` 中实现图片上传逻辑。更新了 `Dialog` 组件以支持可选属性和 model 绑定，增强其灵活性和可用性。引入 `lucide-vue-next` 图标库支持图标渲染。重构图片配置页面，移除旧上传逻辑，使用新的弹窗方式进行图片上传操作。
2025-12-04 12:45:00 +08:00
parent c6a10db36b
commit f062f7c9e6
8 changed files with 211 additions and 57 deletions
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
        "dexie": "^4.2.1",
        "github-markdown-css": "^5.8.0",
        "localforage": "^1.10.0",
+        "lucide-vue-next": "^0.555.0",
        "markdown-it": "^14.1.0",
        "pinia": "^3.0.3",
        "pinia-plugin-persist": "^1.0.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,6 +32,9 @@ importers:
      localforage:
        specifier: ^1.10.0
        version: 1.10.0
+      lucide-vue-next:
+        specifier: ^0.555.0
+        version: 0.555.0(vue@3.5.13(typescript@5.5.3))
      markdown-it:
        specifier: ^14.1.0
        version: 14.1.0
@@ -3834,6 +3837,11 @@ packages:
    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
    engines: {node: '>=10'}

+  lucide-vue-next@0.555.0:
+    resolution: {integrity: sha512-7hczPsiMD/y+VNLpal5Q5Wv09kQxlHS0l/cM1xagrd+MA3i5umMm+PUXqllvsbgwAl3PHv27fo59h4PN02GM5A==}
+    peerDependencies:
+      vue: '>=3.0.1'
+
  lz-string@1.5.0:
    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
    hasBin: true
@@ -9419,6 +9427,10 @@ snapshots:
    dependencies:
      yallist: 4.0.0

+  lucide-vue-next@0.555.0(vue@3.5.13(typescript@5.5.3)):
+    dependencies:
+      vue: 3.5.13(typescript@5.5.3)
+
  lz-string@1.5.0: {}

  magic-string@0.30.13:
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -13,6 +13,7 @@ declare module 'vue' {
    EditSeparateDialog: typeof import('./components/NumberSeparate/EditSeparateDialog.vue')['default']
    HelloWorld: typeof import('./components/HelloWorld.vue')['default']
    ImageSync: typeof import('./components/ImageSync/index.vue')['default']
+    ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
    Loading: typeof import('./components/Loading/index.vue')['default']
    PageHeader: typeof import('./components/PageHeader/index.vue')['default']
    PlayMusic: typeof import('./components/PlayMusic/index.vue')['default']
--- a/src/components/Dialog/index.vue
+++ b/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 -->
--- a/src/components/ImageUpload/index.vue
+++ b/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>
--- a/src/components/ImageUpload/type.ts
+++ b/src/components/ImageUpload/type.ts
@@ -0,0 +1,5 @@
+export interface IFileData {
+    dataUrl: string
+    fileName: string
+    type: string
+}
--- a/src/views/Config/Global/ImageConfig/components/UploadDialog.vue
+++ b/src/views/Config/Global/ImageConfig/components/UploadDialog.vue
@@ -0,0 +1,110 @@
+<script setup lang='ts'>
+import type { IFileData } from '@/components/ImageUpload/type'
+import localforage from 'localforage'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import CustomDialog from '@/components/Dialog/index.vue'
+import ImageUpload from '@/components/ImageUpload/index.vue'
+import useStore from '@/store'
+
+const { t } = useI18n()
+const limitType = ref('image/*')
+const imgUploadToast = ref(0) // 0是不显示，1是成功，2是失败,3是不是图片
+const visible = defineModel('visible', {
+  type: Boolean,
+  required: true,
+})
+const globalConfig = useStore().globalConfig
+const imageDbStore = localforage.createInstance({
+  name: 'imgStore',
+})
+const imageData = ref<IFileData | null>(null)
+
+const fileName = computed({
+  get() {
+    return imageData.value?.fileName || null
+  },
+  set(value) {
+    if (imageData.value && value) {
+      imageData.value.fileName = value
+    }
+  },
+})
+const uploadDialogRef = ref()
+
+async function uploadFile(fileData: IFileData | null) {
+  if (!fileData) {
+    imageData.value = null
+    return
+  }
+  const isImage = /image*/.test(fileData?.type || '')
+  if (!isImage) {
+    imgUploadToast.value = 3
+    return
+  }
+  imageData.value = fileData
+}
+async function getImageDbStore() {
+  const keys = await imageDbStore.keys()
+  if (keys.length > 0) {
+    imageDbStore.iterate((value, key) => {
+      globalConfig.addImage({
+        id: key,
+        name: key,
+        url: 'Storage',
+      })
+    })
+  }
+}
+function submitUpload() {
+  if (imageData.value) {
+    const { dataUrl, fileName } = imageData.value
+    console.log(dataUrl, fileName)
+    imageDbStore.setItem(`${new Date().getTime().toString()}+${fileName}`, dataUrl)
+      .then(() => {
+        imgUploadToast.value = 1
+        getImageDbStore()
+      })
+      .catch(() => {
+        imgUploadToast.value = 2
+      })
+  }
+}
+watch(visible, (newVal) => {
+  if (newVal) {
+    uploadDialogRef.value.showDialog()
+  }
+})
+</script>
+
+<template>
+  <div class="toast toast-top toast-end">
+    <div v-if="imgUploadToast === 2" class="alert alert-error">
+      <span>{{ t('error.uploadFail') }}</span>
+    </div>
+    <div v-if="imgUploadToast === 1" class="alert alert-success">
+      <span>{{ t('error.uploadSuccess') }}</span>
+    </div>
+    <div v-if="imgUploadToast === 3" class="alert alert-error">
+      <span>{{ t('error.notImage') }}</span>
+    </div>
+  </div>
+  <CustomDialog
+    ref="uploadDialogRef"
+    v-model:visible="visible"
+    title="图片上传"
+    :submit-func="submitUpload"
+    class=""
+  >
+    <template #content>
+      <div class="flex flex-col items-center gap-6 w-full px-12">
+        <ImageUpload v-if="visible" :limit-type="limitType" @upload-file="uploadFile" />
+        <input v-model="fileName" :disabled="imageData === null" type="text" placeholder="图片名称" class="input w-full">
+      </div>
+    </template>
+  </CustomDialog>
+</template>
+
+<style scoped>
+
+</style>
--- a/src/views/Config/Global/ImageConfig/index.vue
+++ b/src/views/Config/Global/ImageConfig/index.vue
@@ -2,51 +2,22 @@
 import type { IImage } from '@/types/storeType'
 import localforage from 'localforage'
 import { storeToRefs } from 'pinia'
-import { onMounted, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import ImageSync from '@/components/ImageSync/index.vue'
 import PageHeader from '@/components/PageHeader/index.vue'
 import useStore from '@/store'
-import { readFileData } from '@/utils/file'
+import UploadDialog from './components/UploadDialog.vue'

 const { t } = useI18n()
 const globalConfig = useStore().globalConfig
 const { getImageList: localImageList } = storeToRefs(globalConfig)
-const limitType = ref('image/*')
 const imgUploadToast = ref(0) // 0是不显示，1是成功，2是失败,3是不是图片
 const imageDbStore = localforage.createInstance({
  name: 'imgStore',
 })
-async function handleFileChange(e: Event) {
-  const isImage = /image*/.test(((e.target as HTMLInputElement).files as FileList)[0].type)
-  if (!isImage) {
-    imgUploadToast.value = 3

-    return
-  }
-  const { dataUrl, fileName } = await readFileData(((e.target as HTMLInputElement).files as FileList)[0])
-  imageDbStore.setItem(`${new Date().getTime().toString()}+${fileName}`, dataUrl)
-    .then(() => {
-      imgUploadToast.value = 1
-      getImageDbStore()
-    })
-    .catch(() => {
-      imgUploadToast.value = 2
-    })
-}
-
-async function getImageDbStore() {
-  const keys = await imageDbStore.keys()
-  if (keys.length > 0) {
-    imageDbStore.iterate((value, key) => {
-      globalConfig.addImage({
-        id: key,
-        name: key,
-        url: 'Storage',
-      })
-    })
-  }
-}
+const uploadVisible = ref(false)

 function removeImage(item: IImage) {
  if (item.url === 'Storage') {
@@ -56,9 +27,6 @@ function removeImage(item: IImage) {
  }
  globalConfig.removeImage(item.id)
 }
-onMounted(() => {
-  // getImageDbStore()
-})
 watch(() => imgUploadToast.value, (val) => {
  if (val !== 0) {
    setTimeout(() => {
@@ -69,28 +37,14 @@ watch(() => imgUploadToast.value, (val) => {
 </script>

 <template>
-  <div class="toast toast-top toast-end">
-    <div v-if="imgUploadToast === 2" class="alert alert-error">
-      <span>{{ t('error.uploadFail') }}</span>
-    </div>
-    <div v-if="imgUploadToast === 1" class="alert alert-success">
-      <span>{{ t('error.uploadSuccess') }}</span>
-    </div>
-    <div v-if="imgUploadToast === 3" class="alert alert-error">
-      <span>{{ t('error.notImage') }}</span>
-    </div>
-  </div>
+  <UploadDialog v-model:visible="uploadVisible" />

  <div>
    <PageHeader title="图片管理">
      <template #buttons>
        <div class="">
          <label for="explore">
-            <input
-              id="explore" type="file" class="" style="display: none" :accept="limitType"
-              @change="handleFileChange"
-            >
-            <span class="btn btn-primary btn-sm">{{ t('button.upload') }}</span>
+            <span class="btn btn-primary btn-sm" @click="uploadVisible = true">{{ t('button.upload') }}</span>
          </label>
        </div>
      </template>
@@ -101,7 +55,6 @@ watch(() => imgUploadToast.value, (val) => {
        <div class="flex items-center gap-8">
          <div class="avatar h-14">
            <div class="w-12 h-12 mask mask-squircle hover:w-14 hover:h-14">
-              <!-- <img v-if="item.url!=='Storage'" :src="item.url" alt="Avatar Tailwind CSS Component" /> -->
              <ImageSync :img-item="item" />
            </div>
          </div>