feat: Add file manager view using VueFinder
Installs VueFinder and wires it to the backend /api/files endpoint with JWT Bearer auth. Adds /files route, File Manager nav item (files.view permission-gated, FolderOpen icon), and imports VueFinder CSS globally. Driver token is computed reactively so it tracks token refreshes automatically. Uses midnight theme to match the dark admin panel aesthetic. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
49
frontend/src/views/admin/FileManagerView.vue
Normal file
49
frontend/src/views/admin/FileManagerView.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { VueFinder, RemoteDriver } from 'vuefinder'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const auth = useAuthStore()
|
||||
|
||||
// Recreate the RemoteDriver reactively so the token stays current across
|
||||
// automatic refresh cycles (useApi composable silently rotates accessToken).
|
||||
const driver = computed(
|
||||
() =>
|
||||
new RemoteDriver({
|
||||
baseURL: '/api/files',
|
||||
token: auth.accessToken ?? undefined,
|
||||
})
|
||||
)
|
||||
|
||||
// Non-persistent config passed to VueFinder per session.
|
||||
// maxFileSize in bytes — 10 MB limit matches the backend upload ceiling.
|
||||
const finderConfig = {
|
||||
theme: 'midnight',
|
||||
maxFileSize: 10 * 1024 * 1024,
|
||||
showMenuBar: true,
|
||||
showToolbar: true,
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-6 p-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-white">File Manager</h1>
|
||||
<p class="text-sm text-gray-400 mt-1">Browse and edit your server files</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="bg-neutral-900 rounded-lg border border-neutral-800 overflow-hidden"
|
||||
style="min-height: 640px;"
|
||||
>
|
||||
<VueFinder
|
||||
id="corrosion-filemanager"
|
||||
:driver="driver"
|
||||
:config="finderConfig"
|
||||
locale="en"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user