feat: file upload

apps/web-antd/src/views/system/oss/file-upload-modal.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Alert } from 'ant-design-vue';
+
+import { FileUpload } from '#/components/upload';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const fileList = ref<string[]>([]);
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: (isOpen) => {
+    if (isOpen) {
+      return null;
+    }
+    if (fileList.value.length > 0) {
+      fileList.value = [];
+      emit('reload');
+      modalApi.close();
+      return null;
+    }
+  },
+});
+
+const accept = ref(['txt', 'excel', 'word', 'pdf']);
+const maxNumber = ref(3);
+
+const message = computed(() => {
+  return `支持 [${accept.value.join(', ')}] 格式，最多上传 ${maxNumber.value} 个文件`;
+});
+</script>
+
+<template>
+  <BasicModal
+    :close-on-click-modal="false"
+    :footer="false"
+    :fullscreen-button="false"
+    title="文件上传"
+  >
+    <div class="flex flex-col gap-4">
+      <Alert :message="message" show-icon type="info">aaa</Alert>
+      <FileUpload
+        v-model:value="fileList"
+        :accept="accept"
+        :max-number="maxNumber"
+      />
+    </div>
+  </BasicModal>
+</template>