feat(web): add file manager views with chunked upload and file picker
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
dailz
124
web/src/views/Files/FilePicker.vue
Normal file
124
web/src/views/Files/FilePicker.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<script setup lang="ts">
|
||||
import { listFiles, listFolders } from '@/api/files'
|
||||
import type { FileResponse, FolderResponse } from '@/types/files'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
modelValue: boolean
|
||||
multiple?: boolean
|
||||
max?: number
|
||||
}>(), {
|
||||
multiple: true,
|
||||
max: 100,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
'select': [files: FileResponse[]]
|
||||
}>()
|
||||
|
||||
const currentFolderId = ref<number | null>(null)
|
||||
const breadcrumbs = ref<Array<{ id: number | null; name: string }>>([{ id: null, name: '全部文件' }])
|
||||
const folders = ref<FolderResponse[]>([])
|
||||
const files = ref<FileResponse[]>([])
|
||||
const selectedFileIds = ref<number[]>([])
|
||||
|
||||
const dialogVisible = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val: boolean) => emit('update:modelValue', val),
|
||||
})
|
||||
|
||||
watch(() => props.modelValue, (val) => {
|
||||
if (val) {
|
||||
currentFolderId.value = null
|
||||
breadcrumbs.value = [{ id: null, name: '全部文件' }]
|
||||
selectedFileIds.value = []
|
||||
fetchContent()
|
||||
}
|
||||
})
|
||||
|
||||
const fetchContent = async () => {
|
||||
try {
|
||||
const [foldersResp, filesResp] = await Promise.all([
|
||||
listFolders({ parent_id: currentFolderId.value ?? undefined }),
|
||||
listFiles({ folder_id: currentFolderId.value ?? undefined, page_size: 100 }),
|
||||
])
|
||||
folders.value = foldersResp.data || []
|
||||
files.value = filesResp.data?.files || []
|
||||
} catch {
|
||||
// Error handled by interceptor
|
||||
}
|
||||
}
|
||||
|
||||
const navigateToFolder = (folder: FolderResponse) => {
|
||||
currentFolderId.value = folder.id
|
||||
breadcrumbs.value.push({ id: folder.id, name: folder.name })
|
||||
fetchContent()
|
||||
}
|
||||
|
||||
const navigateToBreadcrumb = (index: number) => {
|
||||
const target = breadcrumbs.value[index]
|
||||
currentFolderId.value = target.id
|
||||
breadcrumbs.value = breadcrumbs.value.slice(0, index + 1)
|
||||
fetchContent()
|
||||
}
|
||||
|
||||
const handleConfirm = () => {
|
||||
const selected = files.value.filter(f => selectedFileIds.value.includes(f.id))
|
||||
emit('select', selected)
|
||||
dialogVisible.value = false
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
dialogVisible.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" title="选择文件" width="700px" @close="dialogVisible = false">
|
||||
<!-- Breadcrumb -->
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item
|
||||
v-for="(crumb, index) in breadcrumbs"
|
||||
:key="index"
|
||||
@click="navigateToBreadcrumb(index)"
|
||||
>
|
||||
<span style="cursor: pointer">{{ crumb.name }}</span>
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
|
||||
<!-- Folders -->
|
||||
<div v-if="folders.length" style="margin-top: 12px">
|
||||
<div
|
||||
v-for="folder in folders"
|
||||
:key="folder.id"
|
||||
style="padding: 8px; cursor: pointer; border-bottom: 1px solid #f0f0f0"
|
||||
@click="navigateToFolder(folder)"
|
||||
>
|
||||
📁 {{ folder.name }} ({{ folder.file_count }} 文件)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Files with checkboxes -->
|
||||
<div v-if="files.length" style="margin-top: 12px; max-height: 400px; overflow-y: auto">
|
||||
<el-checkbox-group v-model="selectedFileIds">
|
||||
<div v-for="file in files" :key="file.id" style="padding: 6px 0">
|
||||
<el-checkbox :label="file.id" :value="file.id">
|
||||
{{ file.name }}
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
|
||||
<el-empty v-else-if="!folders.length" description="暂无文件" />
|
||||
|
||||
<!-- Actions -->
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleConfirm">
|
||||
确认 ({{ selectedFileIds.length }})
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
254
web/src/views/Files/List.vue
Normal file
254
web/src/views/Files/List.vue
Normal file
@@ -0,0 +1,254 @@
|
||||
<script setup lang="ts">
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { listFiles, deleteFile, downloadFileUrl, listFolders, createFolder, deleteFolder } from '@/api/files'
|
||||
import UploadButton from './UploadButton.vue'
|
||||
import type { FileResponse, FolderResponse } from '@/types/files'
|
||||
|
||||
const files = ref<FileResponse[]>([])
|
||||
const folders = ref<FolderResponse[]>([])
|
||||
const total = ref(0)
|
||||
const currentPage = ref(1)
|
||||
const pageSize = ref(20)
|
||||
const loading = ref(false)
|
||||
const searchQuery = ref('')
|
||||
|
||||
const breadcrumbs = ref<Array<{ id: number | null; name: string }>>([{ id: null, name: '全部文件' }])
|
||||
const currentFolderId = computed(() => {
|
||||
const last = breadcrumbs.value[breadcrumbs.value.length - 1]
|
||||
return last?.id ?? null
|
||||
})
|
||||
|
||||
const showCreateFolderDialog = ref(false)
|
||||
const newFolderName = ref('')
|
||||
|
||||
const formatSize = (bytes: number): string => {
|
||||
if (bytes < 1024) return bytes + ' B'
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
|
||||
if (bytes < 1024 * 1024 * 1024) return (bytes / 1024 / 1024).toFixed(1) + ' MB'
|
||||
return (bytes / 1024 / 1024 / 1024).toFixed(2) + ' GB'
|
||||
}
|
||||
|
||||
const fetchFiles = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const isSearching = searchQuery.value.trim() !== ''
|
||||
const params: { folder_id?: number; page?: number; page_size?: number; search?: string } = {
|
||||
page: currentPage.value,
|
||||
page_size: pageSize.value,
|
||||
}
|
||||
if (isSearching) {
|
||||
params.search = searchQuery.value.trim()
|
||||
} else {
|
||||
params.folder_id = currentFolderId.value ?? undefined
|
||||
}
|
||||
const resp = await listFiles(params)
|
||||
files.value = resp.data?.files || []
|
||||
total.value = resp.data?.total || 0
|
||||
} catch {
|
||||
// Error handled by interceptor
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const fetchFolders = async () => {
|
||||
if (searchQuery.value.trim()) {
|
||||
folders.value = []
|
||||
return
|
||||
}
|
||||
try {
|
||||
const resp = await listFolders({ parent_id: currentFolderId.value ?? undefined })
|
||||
folders.value = resp.data || []
|
||||
} catch {
|
||||
// Error handled by interceptor
|
||||
}
|
||||
}
|
||||
|
||||
const fetchData = () => {
|
||||
fetchFiles()
|
||||
fetchFolders()
|
||||
}
|
||||
|
||||
const navigateToFolder = (folder: FolderResponse) => {
|
||||
breadcrumbs.value.push({ id: folder.id, name: folder.name })
|
||||
currentPage.value = 1
|
||||
searchQuery.value = ''
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const navigateToBreadcrumb = (index: number) => {
|
||||
breadcrumbs.value = breadcrumbs.value.slice(0, index + 1)
|
||||
currentPage.value = 1
|
||||
searchQuery.value = ''
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
currentPage.value = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handleSearchClear = () => {
|
||||
searchQuery.value = ''
|
||||
currentPage.value = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
currentPage.value = page
|
||||
fetchFiles()
|
||||
}
|
||||
|
||||
const handleSizeChange = (size: number) => {
|
||||
pageSize.value = size
|
||||
currentPage.value = 1
|
||||
fetchFiles()
|
||||
}
|
||||
|
||||
const handleDownload = (file: FileResponse) => {
|
||||
window.open(downloadFileUrl(file.id), '_blank')
|
||||
}
|
||||
|
||||
const handleDeleteFile = async (file: FileResponse) => {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要删除文件 "${file.name}" 吗？`, '删除确认', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
await deleteFile(file.id)
|
||||
ElMessage.success('删除成功')
|
||||
fetchData()
|
||||
} catch {
|
||||
// User cancelled or error handled by interceptor
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteFolder = async (folder: FolderResponse) => {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要删除文件夹 "${folder.name}" 吗？只能删除空文件夹。`, '删除确认', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
await deleteFolder(folder.id)
|
||||
ElMessage.success('删除成功')
|
||||
fetchData()
|
||||
} catch {
|
||||
// User cancelled or error handled by interceptor
|
||||
}
|
||||
}
|
||||
|
||||
const handleCreateFolder = async () => {
|
||||
const name = newFolderName.value.trim()
|
||||
if (!name) {
|
||||
ElMessage.warning('请输入文件夹名称')
|
||||
return
|
||||
}
|
||||
try {
|
||||
await createFolder({ name, parent_id: currentFolderId.value ?? undefined })
|
||||
ElMessage.success('创建成功')
|
||||
showCreateFolderDialog.value = false
|
||||
newFolderName.value = ''
|
||||
fetchData()
|
||||
} catch {
|
||||
// Error handled by interceptor
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="padding: 20px">
|
||||
<h2>文件管理</h2>
|
||||
|
||||
<!-- Breadcrumb + Actions -->
|
||||
<div style="display: flex; align-items: center; margin: 16px 0; gap: 12px; flex-wrap: wrap">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item
|
||||
v-for="(crumb, index) in breadcrumbs"
|
||||
:key="index"
|
||||
@click="navigateToBreadcrumb(index)"
|
||||
>
|
||||
<span style="cursor: pointer">{{ crumb.name }}</span>
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
|
||||
<div style="flex: 1" />
|
||||
|
||||
<UploadButton :folder-id="currentFolderId ?? undefined" @uploaded="fetchData" />
|
||||
|
||||
<el-button @click="showCreateFolderDialog = true">新建文件夹</el-button>
|
||||
|
||||
<el-input
|
||||
v-model="searchQuery"
|
||||
placeholder="搜索文件"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
@keyup.enter="handleSearch"
|
||||
@clear="handleSearchClear"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Folders -->
|
||||
<div v-if="folders.length" style="margin-bottom: 12px">
|
||||
<div
|
||||
v-for="folder in folders"
|
||||
:key="folder.id"
|
||||
style="display: flex; align-items: center; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f5f5f5"
|
||||
>
|
||||
<span style="flex: 1" @click="navigateToFolder(folder)">
|
||||
📁 {{ folder.name }} ({{ folder.file_count }} 文件, {{ folder.subfolder_count }} 子文件夹)
|
||||
</span>
|
||||
<el-button text type="danger" size="small" @click.stop="handleDeleteFolder(folder)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Files Table -->
|
||||
<el-table :data="files" v-loading="loading" stripe>
|
||||
<el-table-column prop="name" label="文件名" min-width="200" />
|
||||
<el-table-column label="大小" width="120">
|
||||
<template #default="{ row }">
|
||||
{{ formatSize(row.size) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="mime_type" label="类型" width="150" />
|
||||
<el-table-column label="创建时间" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ new Date(row.created_at).toLocaleString('zh-CN') }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="160" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button text type="primary" size="small" @click="handleDownload(row)">下载</el-button>
|
||||
<el-button text type="danger" size="small" @click="handleDeleteFile(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div style="margin-top: 16px; display: flex; justify-content: flex-end">
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:total="total"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
@current-change="handlePageChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Create Folder Dialog -->
|
||||
<el-dialog v-model="showCreateFolderDialog" title="新建文件夹" width="400px">
|
||||
<el-input v-model="newFolderName" placeholder="请输入文件夹名称" @keyup.enter="handleCreateFolder" />
|
||||
<template #footer>
|
||||
<el-button @click="showCreateFolderDialog = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleCreateFolder">创建</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
141
web/src/views/Files/UploadButton.vue
Normal file
141
web/src/views/Files/UploadButton.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<script setup lang="ts">
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { initUpload, uploadChunk, completeUpload, cancelUpload } from '@/api/files'
|
||||
|
||||
const props = defineProps<{
|
||||
folderId?: number
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
uploaded: []
|
||||
}>()
|
||||
|
||||
const stage = ref<'idle' | 'hashing' | 'uploading' | 'done'>('idle')
|
||||
const hashingProgress = ref(0)
|
||||
const uploadProgress = ref(0)
|
||||
const fileInput = ref<HTMLInputElement | null>(null)
|
||||
const sessionId = ref<number | null>(null)
|
||||
|
||||
let currentWorker: Worker | null = null
|
||||
|
||||
onUnmounted(() => {
|
||||
if (currentWorker) {
|
||||
currentWorker.terminate()
|
||||
currentWorker = null
|
||||
}
|
||||
})
|
||||
|
||||
const triggerUpload = () => {
|
||||
fileInput.value?.click()
|
||||
}
|
||||
|
||||
const onFileSelected = async (event: Event) => {
|
||||
const input = event.target as HTMLInputElement
|
||||
const file = input.files?.[0]
|
||||
if (!file) return
|
||||
|
||||
input.value = ''
|
||||
|
||||
if (file.size > 500 * 1024 * 1024) {
|
||||
ElMessage.warning('文件过大，当前仅支持 500MB 以内的文件')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
stage.value = 'hashing'
|
||||
hashingProgress.value = 0
|
||||
|
||||
const sha256 = await computeSHA256(file)
|
||||
|
||||
stage.value = 'uploading'
|
||||
uploadProgress.value = 0
|
||||
|
||||
const resp = await initUpload({
|
||||
file_name: file.name,
|
||||
file_size: file.size,
|
||||
sha256,
|
||||
chunk_size: 16777216,
|
||||
folder_id: props.folderId,
|
||||
})
|
||||
|
||||
const inner = resp.data
|
||||
if (inner && 'chunk_size' in inner && 'total_chunks' in inner) {
|
||||
sessionId.value = inner.id
|
||||
const chunkSize = inner.chunk_size
|
||||
const totalChunks = inner.total_chunks
|
||||
|
||||
for (let i = 0; i < totalChunks; i++) {
|
||||
const start = i * chunkSize
|
||||
const end = Math.min(start + chunkSize, file.size)
|
||||
const chunk = file.slice(start, end)
|
||||
await uploadChunk(inner.id, i, chunk)
|
||||
uploadProgress.value = (i + 1) / totalChunks
|
||||
}
|
||||
|
||||
await completeUpload(inner.id)
|
||||
}
|
||||
|
||||
stage.value = 'done'
|
||||
emit('uploaded')
|
||||
} catch {
|
||||
if (sessionId.value) {
|
||||
try { await cancelUpload(sessionId.value) } catch { /* best-effort */ }
|
||||
}
|
||||
ElMessage.error('上传失败')
|
||||
} finally {
|
||||
stage.value = 'idle'
|
||||
hashingProgress.value = 0
|
||||
uploadProgress.value = 0
|
||||
sessionId.value = null
|
||||
}
|
||||
}
|
||||
|
||||
const computeSHA256 = (file: File): Promise<string> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const worker = new Worker(new URL('./sha256.worker.ts', import.meta.url), { type: 'module' })
|
||||
currentWorker = worker
|
||||
|
||||
worker.onmessage = (e: MessageEvent) => {
|
||||
const data = e.data as { sha256?: string; progress?: number; error?: string }
|
||||
if (data.error) {
|
||||
worker.terminate()
|
||||
currentWorker = null
|
||||
reject(new Error(data.error))
|
||||
return
|
||||
}
|
||||
if (data.sha256) {
|
||||
worker.terminate()
|
||||
currentWorker = null
|
||||
resolve(data.sha256)
|
||||
return
|
||||
}
|
||||
if (data.progress !== undefined) {
|
||||
hashingProgress.value = data.progress
|
||||
}
|
||||
}
|
||||
|
||||
worker.onerror = (e: ErrorEvent) => {
|
||||
worker.terminate()
|
||||
currentWorker = null
|
||||
reject(new Error(e.message))
|
||||
}
|
||||
|
||||
worker.postMessage({ file })
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<input ref="fileInput" type="file" style="display: none" @change="onFileSelected" />
|
||||
<el-button :disabled="stage !== 'idle'" @click="triggerUpload">上传文件</el-button>
|
||||
<div v-if="stage === 'hashing'" style="margin-top: 8px">
|
||||
<span>计算哈希中...</span>
|
||||
<el-progress :percentage="Math.round(hashingProgress * 100)" :stroke-width="10" />
|
||||
</div>
|
||||
<div v-if="stage === 'uploading'" style="margin-top: 8px">
|
||||
<span>上传中...</span>
|
||||
<el-progress :percentage="Math.round(uploadProgress * 100)" :stroke-width="10" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
34
web/src/views/Files/sha256.worker.ts
Normal file
34
web/src/views/Files/sha256.worker.ts
Normal file
@@ -0,0 +1,34 @@
|
||||
export {}
|
||||
declare const self: {
|
||||
onmessage: ((e: MessageEvent) => void) | null
|
||||
postMessage: (message: unknown) => void
|
||||
}
|
||||
|
||||
self.onmessage = async (e: MessageEvent) => {
|
||||
const file = e.data.file as File
|
||||
try {
|
||||
// Read entire file into ArrayBuffer (with progress reporting)
|
||||
const CHUNK_READ_SIZE = 16 * 1024 * 1024 // 16MB chunks for progress reporting
|
||||
const buffer = new ArrayBuffer(file.size)
|
||||
const view = new Uint8Array(buffer)
|
||||
let offset = 0
|
||||
|
||||
while (offset < file.size) {
|
||||
const end = Math.min(offset + CHUNK_READ_SIZE, file.size)
|
||||
const slice = file.slice(offset, end)
|
||||
const chunkBuffer = await slice.arrayBuffer()
|
||||
view.set(new Uint8Array(chunkBuffer), offset)
|
||||
offset = end
|
||||
self.postMessage({ progress: offset / file.size })
|
||||
}
|
||||
|
||||
// Compute SHA256 on entire buffer at once
|
||||
const hashBuffer = await crypto.subtle.digest('SHA-256', buffer)
|
||||
const hashArray = Array.from(new Uint8Array(hashBuffer))
|
||||
const sha256 = hashArray.map(b => b.toString(16).padStart(2, '0')).join('')
|
||||
|
||||
self.postMessage({ sha256, progress: 1 })
|
||||
} catch (error) {
|
||||
self.postMessage({ error: error instanceof Error ? error.message : 'SHA256 computation failed' })
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user