u

code/g3soft-libs/docs/examples/attachment/modal.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+// 弹窗用法：业务自己用 G3Modal 包一层，附件组件并不知道「弹窗」的存在
+import { ref } from 'vue'
+import { G3Attachment, G3Button, G3Modal } from '@g3soft/ui'
+import type { AttachmentItem, AttachmentUploadContext } from '@g3soft/ui'
+
+const open = ref(false)
+
+// 从空列表开始：正好看到空态投放区 → 入队（底栏变"脏"）→ 上传的完整过程
+const files = ref<AttachmentItem[]>([])
+
+const lastEvent = ref('')
+
+function onUpload(incoming: File[], context: AttachmentUploadContext) {
+  files.value = [
+    ...files.value,
+    ...incoming.map((file, index) => ({
+      id: `local-${Date.now()}-${index}`,
+      name: file.name,
+      size: file.size,
+      categoryId: context.categoryId,
+      url: URL.createObjectURL(file),
+    })),
+  ]
+  lastEvent.value = `已加入 ${incoming.length} 个文件`
+}
+
+function onRemove(items: AttachmentItem[]) {
+  const removed = new Set(items.map((item) => item.id))
+  files.value = files.value.filter((file) => !removed.has(file.id))
+  lastEvent.value = `已删除 ${items.length} 个文件`
+}
+</script>
+
+<template>
+  <div>
+    <G3Button @click="open = true">打开附件管理</G3Button>
+    <p class="hint">{{ lastEvent }}</p>
+
+    <!-- 弹窗高度用 vh，附件组件再按 100% 撑满；不给 categories 就只有列表一栏 -->
+    <G3Modal v-model:open="open" title="附件管理" width="80%" :fullscreen="false">
+      <G3Attachment
+        v-model:files="files"
+        height="60vh"
+        @upload="onUpload"
+        @remove="onRemove"
+      />
+    </G3Modal>
+  </div>
+</template>
+
+<style scoped>
+.hint {
+  margin: 8px 0 0;
+  color: #8c8c8c;
+  font-size: 12px;
+}
+</style>