@composy/file-manager-vue

@composy/file-manager-vue

文件管理器 Vue 3 适配层。

安装

pnpm add @composy/file-manager-vue

功能特性

• Vue 3 组件（<LDesignFileManager>）
• 组合式函数 useFileManager()
• 完整的 v-model 双向绑定
• provider 异步目录、游标分页与加载状态
• 快照恢复和上传任务取消
• Vue 插件注册
• Injection key 注入

快速开始

<script setup lang="ts">
import type { BreadcrumbItem, FileItem, SortConfig, ViewMode } from '@composy/file-manager-vue'
import { LDesignFileManager } from '@composy/file-manager-vue'
import { ref } from 'vue'

const files = ref<FileItem[]>([])
const selectedIds = ref<string[]>([])
const viewMode = ref<ViewMode>('grid')
const sort = ref<SortConfig>({ field: 'name', order: 'asc' })

function onSelection(selected: FileItem[]) {
  console.info('选中:', selected)
}

function onFileClick(file: FileItem) {
  console.info('点击:', file.name)
}

function onFolderEnter(folder: FileItem, breadcrumb: BreadcrumbItem[]) {
  console.info('进入:', folder.name, breadcrumb)
}
</script>

<template>
  <LDesignFileManager
    v-model:files="files"
    v-model:selection="selectedIds"
    v-model:view-mode="viewMode"
    v-model:sort="sort"
    theme="light"
    selection-mode="multiple"
    @selection-change="onSelection"
    @file-click="onFileClick"
    @folder-enter="onFolderEnter"
  />
</template>

Props

Events

Expose 方法

插件注册

import { FileManagerPlugin } from '@composy/file-manager-vue'
import { createApp } from 'vue'

const app = createApp(App)
app.use(FileManagerPlugin)
app.mount('#app')

插件只负责全局注册组件。若需要通过 LDesignFileManagerKey 注入一个共享 Core 实例，可传入 instance；通常每个 <FileManager> 组件会管理自己的实例。

Composable

import { useFileManager } from '@composy/file-manager-vue'

const { setFiles } = useFileManager()
setFiles([])

配置 provider 时，composable 还会返回 reload、loadMore、loading、error、 getSnapshot、restoreSnapshot 和 cancelUploads。reload/loadMore 返回 Promise，应在业务层处理网络错误；组件卸载时 Core 会自动取消未完成请求和上传。

构建产物

依赖

• @composy/file-manager-core — 核心引擎
• vue ^3.5.32 (peerDependency)

验证

pnpm run type-check
pnpm run lint:check
pnpm run build

在 packages/vue 目录执行这些命令。构建基于 packages/core；Builder、ESLint 与 ESM/CJS TypeScript 配置位于 .ldesign/。从工作区根目录运行 pnpm run build 可按依赖顺序构建并验证全部包。

License

MIT