first commit

src/components/DuplicateFileModal.vue

@@ -0,0 +1,133 @@
+<template>
+  <a-modal
+    :open="visible"
+    title="同名文件提示"
+    :footer="null"
+    width="600px"
+    :mask-closable="false"
+    @cancel="handleSkipAll"
+  >
+    <div class="duplicate-file-modal">
+      <!-- 警告提示 -->
+      <a-alert
+        message="上传的文件存在同名文件，是否覆盖？"
+        type="warning"
+        show-icon
+        class="warning-alert"
+      />
+
+      <!-- 文件列表 -->
+      <a-table
+        :columns="columns"
+        :data-source="duplicateFiles"
+        :pagination="false"
+        size="small"
+        class="file-table"
+        :scroll="{ y: 300 }"
+      >
+        <template #bodyCell="{ column, record, index }">
+          <template v-if="column.key === 'index'">
+            {{ index + 1 }}
+          </template>
+          <template v-if="column.key === 'name'">
+            <span class="file-name">{{ record.path || record.name }}</span>
+          </template>
+          <template v-if="column.key === 'size'">
+            <span class="file-size">{{ formatSize(record.size) }}</span>
+          </template>
+        </template>
+      </a-table>
+
+      <!-- 底部按钮 -->
+      <div class="modal-footer">
+        <a-space>
+          <a-button @click="handleSkipAll">跳过</a-button>
+          <a-button type="primary" @click="handleOverwriteAll">覆盖</a-button>
+        </a-space>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import type { DuplicateFile } from '@/types'
+
+defineProps<{
+  visible: boolean
+  duplicateFiles: DuplicateFile[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+  (e: 'skip-all'): void
+  (e: 'overwrite-all'): void
+}>()
+
+const columns = [
+  { title: '序号', key: 'index', width: 60 },
+  { title: '名称', key: 'name', ellipsis: true },
+  { title: '文件大小', key: 'size', width: 120 }
+]
+
+/**
+ * 格式化文件大小
+ */
+function formatSize(bytes: number): string {
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+}
+
+/**
+ * 跳过所有
+ */
+function handleSkipAll() {
+  emit('skip-all')
+  emit('update:visible', false)
+}
+
+/**
+ * 覆盖所有
+ */
+function handleOverwriteAll() {
+  emit('overwrite-all')
+  emit('update:visible', false)
+}
+</script>
+
+<style scoped>
+.duplicate-file-modal {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.warning-alert {
+  margin-bottom: 8px;
+}
+
+.file-table {
+  border: 1px solid #f0f0f0;
+  border-radius: 4px;
+}
+
+.file-name {
+  font-size: 13px;
+  color: #333;
+  word-break: break-all;
+}
+
+.file-size {
+  font-size: 13px;
+  color: #666;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 16px;
+  border-top: 1px solid #f0f0f0;
+}
+</style>