vome-core 0.0.1

package/src/admin/crud/components/vm-upload-item.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="vm-upload-item">
+    <template v-if="item.type === 'image' && !item.error && !imgBroken">
+      <img
+        class="vm-upload-item__image"
+        :src="item.preload || item.url"
+        alt=""
+        @error="imgBroken = true"
+      />
+    </template>
+
+    <template v-else-if="item.type === 'video' && item.url">
+      <video class="vm-upload-item__video" :src="item.url" muted />
+    </template>
+
+    <template v-else>
+      <div class="vm-upload-item__file">
+        <vm-file-icon :name="iconName" :size="56" />
+        <span class="vm-upload-item__name">{{ item.name || item.url }}</span>
+        <span v-if="item.error || imgBroken" class="vm-upload-item__error">
+          {{ item.error || '加载失败' }}
+        </span>
+      </div>
+    </template>
+
+    <div
+      v-if="item.progress >= 0 && item.progress < 100"
+      class="vm-upload-item__progress"
+    >
+      <span>{{ item.progress }}%</span>
+    </div>
+
+    <span
+      v-if="showTag"
+      class="vm-upload-item__tag"
+      :style="{ backgroundColor: tag.color }"
+    >
+      {{ tag.label }}
+    </span>
+
+    <div v-if="item.url || item.preload" class="vm-upload-item__actions">
+      <button
+        v-if="item.type === 'image'"
+        type="button"
+        title="预览"
+        @click.stop="previewOpen = true"
+      >
+        <i class="ri-zoom-in-line" />
+      </button>
+      <button v-if="!disabled" type="button" title="删除" @click.stop="emit('remove')">
+        <i class="ri-delete-bin-line" />
+      </button>
+    </div>
+
+    <Dialog v-model:open="previewOpen">
+      <DialogContent class="vm-upload-item__preview">
+        <img :src="item.preload || item.url" alt="" />
+      </DialogContent>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { extname, getUploadRule } from '../../lib/upload'
+import type { UploadItem } from '../../../../typings/admin/comm/upload'
+
+defineOptions({ name: 'vm-upload-item' })
+
+const props = withDefaults(
+  defineProps<{
+    item: UploadItem
+    disabled?: boolean
+    showTag?: boolean
+  }>(),
+  {
+    disabled: false,
+    showTag: true,
+  },
+)
+
+const emit = defineEmits<{ remove: [] }>()
+
+const previewOpen = ref(false)
+const imgBroken = ref(false)
+
+const iconName = computed(() => extname(props.item.name || props.item.url) || 'file')
+
+const tag = computed(() => {
+  const rule = getUploadRule(props.item.type)
+  return {
+    color: rule.color,
+    label: extname(props.item.name || props.item.url) || rule.name,
+  }
+})
+
+watch(
+  () => props.item.url,
+  () => {
+    imgBroken.value = false
+  },
+)
+</script>
+
+<style lang="scss" scoped>
+.vm-upload-item {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: var(--muted);
+}
+
+.vm-upload-item__image,
+.vm-upload-item__video {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+}
+
+.vm-upload-item__file {
+  display: grid;
+  gap: 6px;
+  height: 100%;
+  padding: 10px;
+  place-content: center;
+  justify-items: center;
+}
+
+.vm-upload-item__name {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  color: var(--muted-foreground);
+}
+
+.vm-upload-item__error {
+  font-size: 11px;
+  color: var(--destructive);
+}
+
+.vm-upload-item__progress {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: rgba(0, 0, 0, 0.45);
+  color: #fff;
+  font-size: 22px;
+  font-weight: 650;
+}
+
+.vm-upload-item__tag {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  max-width: 72px;
+  padding: 2px 6px;
+  border-radius: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 10px;
+  color: #fff;
+  text-transform: uppercase;
+}
+
+.vm-upload-item__actions {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  opacity: 0;
+  background: rgba(0, 0, 0, 0.45);
+  transition: opacity 0.15s ease;
+
+  button {
+    display: inline-flex;
+    width: 30px;
+    height: 30px;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.92);
+    color: var(--foreground);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--brand);
+    }
+  }
+}
+
+.vm-upload-item:hover .vm-upload-item__actions {
+  opacity: 1;
+}
+
+.vm-upload-item__preview {
+  width: min(720px, calc(100vw - 32px));
+  padding: 12px;
+
+  img {
+    width: 100%;
+    max-height: 70vh;
+    object-fit: contain;
+  }
+}
+</style>

package/src/admin/crud/components/vm-upload.vue

@@ -0,0 +1,323 @@
+<template>
+  <div
+    class="vm-upload"
+    :class="[
+      `vm-upload--${type}`,
+      {
+        'is-disabled': disabled,
+        'is-multiple': multiple,
+        'is-drag': drag,
+      },
+    ]"
+  >
+    <div v-if="type === 'file' && isAdd" class="vm-upload__file-btn">
+      <label class="vm-upload__pick">
+        <input
+          ref="inputRef"
+          type="file"
+          class="vm-upload__input"
+          :accept="acceptValue"
+          :multiple="multiple"
+          :disabled="disabled"
+          @change="onInputChange"
+        />
+        <Button type="button" variant="softSuccess" :disabled="disabled">
+          {{ text }}
+        </Button>
+      </label>
+    </div>
+
+    <div class="vm-upload__list">
+      <div
+        v-for="(item, index) in list"
+        :key="item.uid"
+        class="vm-upload__item"
+        :style="itemStyle"
+      >
+        <vm-upload-item
+          :item="item"
+          :disabled="disabled"
+          :show-tag="showTag"
+          @remove="remove(index)"
+        />
+      </div>
+
+      <label
+        v-if="isAdd && (type === 'image' || drag)"
+        class="vm-upload__trigger"
+        :class="{ 'is-drag': drag }"
+        :style="itemStyle"
+      >
+        <input
+          ref="inputRef"
+          type="file"
+          class="vm-upload__input"
+          :accept="acceptValue"
+          :multiple="multiple"
+          :disabled="disabled"
+          @change="onInputChange"
+        />
+        <slot>
+          <div v-if="drag" class="vm-upload__drag">
+            <i class="ri-upload-cloud-2-line" />
+            <span>点击或拖拽上传，限制 {{ limitSize }}MB</span>
+          </div>
+          <div v-else class="vm-upload__demo">
+            <i class="ri-image-add-line" />
+            <span v-if="text">{{ text }}</span>
+          </div>
+        </slot>
+      </label>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useUpload } from '../../hooks/useUpload'
+import { getFileType, getUrls, uploadUid } from '../../lib/upload'
+import type { UploadItem } from '../../../../typings/admin/comm/upload'
+
+defineOptions({ name: 'vm-upload' })
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | string[]
+    type?: 'image' | 'file'
+    accept?: string
+    multiple?: boolean
+    limit?: number
+    limitSize?: number
+    disabled?: boolean
+    text?: string
+    size?: number | string | Array<number | string>
+    showTag?: boolean
+    drag?: boolean
+    prefixPath?: string
+    beforeUpload?: (file: File) => boolean | Promise<boolean>
+  }>(),
+  {
+    modelValue: '',
+    type: 'image',
+    multiple: false,
+    limit: 9,
+    limitSize: 100,
+    disabled: false,
+    text: '',
+    size: 120,
+    showTag: true,
+    drag: false,
+    prefixPath: 'app/base',
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [v: string | string[]]
+  change: [v: string | string[]]
+  success: [item: UploadItem]
+  error: [item: UploadItem]
+}>()
+
+const { toUpload } = useUpload()
+const inputRef = ref<HTMLInputElement | null>(null)
+const list = ref<UploadItem[]>([])
+
+const acceptValue = computed(
+  () => props.accept || (props.type === 'file' ? '' : 'image/*'),
+)
+
+const text = computed(() => {
+  if (props.text) return props.text
+  return props.type === 'file' ? '选择文件' : '选择图片'
+})
+
+const itemStyle = computed(() => {
+  const raw = Array.isArray(props.size) ? props.size[0] : props.size
+  const n = typeof raw === 'number' ? `${raw}px` : raw
+  return { width: n, height: n }
+})
+
+const isAdd = computed(() => {
+  if (props.disabled) return false
+  if (props.multiple) return list.value.length < props.limit
+  return list.value.length === 0
+})
+
+function normalizeValue(val: string | string[] | undefined) {
+  if (Array.isArray(val)) return val.filter(Boolean)
+  if (val) return [val]
+  return []
+}
+
+function syncFromModel(val: string | string[] | undefined) {
+  const urls = normalizeValue(val)
+  if (list.value.some((item) => item.progress < 100)) return
+  list.value = urls.map((url, index) => {
+    const old = list.value[index]
+    return {
+      uid: old?.uid || uploadUid(),
+      name: old?.name || url.split('/').pop() || url,
+      url,
+      preload: old?.url === url ? old.preload : url,
+      type: getFileType(url),
+      progress: 100,
+      error: '',
+    }
+  })
+}
+
+watch(
+  () => props.modelValue,
+  (val) => syncFromModel(val),
+  { immediate: true },
+)
+
+function emitValue() {
+  const urls = getUrls(list.value.filter((item) => item.url))
+  const val = props.multiple ? urls : urls[0] || ''
+  emit('update:modelValue', val)
+  emit('change', val)
+}
+
+function remove(index: number) {
+  const item = list.value[index]
+  if (item?.preload?.startsWith('blob:')) {
+    URL.revokeObjectURL(item.preload)
+  }
+  list.value.splice(index, 1)
+  emitValue()
+}
+
+async function onInputChange(e: Event) {
+  const input = e.target as HTMLInputElement
+  const files = Array.from(input.files ?? [])
+  input.value = ''
+  for (const file of files) {
+    if (!isAdd.value) {
+      toast.warning(`最多上传 ${props.limit} 个文件`)
+      break
+    }
+    await appendFile(file)
+  }
+}
+
+async function appendFile(file: File) {
+  if (file.size / 1024 / 1024 >= props.limitSize) {
+    toast.error(`文件不能超过 ${props.limitSize}MB`)
+    return
+  }
+  if (props.beforeUpload) {
+    const ok = await props.beforeUpload(file)
+    if (!ok) return
+  }
+
+  const item: UploadItem = {
+    uid: uploadUid(),
+    name: file.name,
+    url: '',
+    type: getFileType(file.name),
+    size: file.size,
+    progress: 0,
+    error: '',
+  }
+  if (item.type === 'image') {
+    item.preload = URL.createObjectURL(file)
+  }
+
+  if (props.multiple) list.value.push(item)
+  else list.value = [item]
+
+  try {
+    const res = await toUpload(file, {
+      prefixPath: props.prefixPath,
+      onProgress: (n) => {
+        item.progress = n
+      },
+    })
+    item.url = res.url
+    item.progress = 100
+    item.error = ''
+    emit('success', item)
+    emitValue()
+  } catch (e) {
+    item.progress = -1
+    item.error = e instanceof Error ? e.message : '上传失败'
+    emit('error', item)
+  }
+}
+
+defineExpose({ list, remove })
+</script>
+
+<style lang="scss" scoped>
+.vm-upload {
+  width: 100%;
+}
+
+.vm-upload__input {
+  display: none;
+}
+
+.vm-upload__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.vm-upload__item,
+.vm-upload__trigger {
+  flex-shrink: 0;
+}
+
+.vm-upload__trigger {
+  display: grid;
+  place-items: center;
+  border: 1px dashed var(--border);
+  border-radius: 10px;
+  background: var(--muted);
+  color: var(--muted-foreground);
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    color 0.15s ease,
+    background 0.15s ease;
+
+  &:hover {
+    border-color: var(--brand);
+    color: var(--brand);
+    background: var(--brand-soft);
+  }
+
+  &.is-drag {
+    width: 100%;
+    min-height: 120px;
+  }
+}
+
+.vm-upload__demo,
+.vm-upload__drag {
+  display: grid;
+  gap: 6px;
+  place-items: center;
+  padding: 10px;
+  font-size: 12px;
+  text-align: center;
+
+  i {
+    font-size: 28px;
+  }
+}
+
+.vm-upload__file-btn {
+  margin-bottom: 8px;
+}
+
+.vm-upload__pick {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.vm-upload.is-disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+</style>