refactor: S06.1 reorganize frontend routes into subdirectories (media/tools/admin)
This commit is contained in:
Gan, Jimmy
@@ -0,0 +1,177 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import { get, del, upload, download } from "../../lib/api.js";
|
||||
|
||||
let entries = $state([]);
|
||||
let currentPath = $state("");
|
||||
let loading = $state(true);
|
||||
let uploading = $state(false);
|
||||
let error = $state("");
|
||||
let fileInput;
|
||||
|
||||
async function browse(path) {
|
||||
loading = true;
|
||||
currentPath = path;
|
||||
const data = await get(`/files/browse?path=${encodeURIComponent(path)}`);
|
||||
entries = data?.entries || [];
|
||||
loading = false;
|
||||
}
|
||||
|
||||
function goUp() {
|
||||
const parts = currentPath.split("/").filter(Boolean);
|
||||
parts.pop();
|
||||
browse(parts.join("/"));
|
||||
}
|
||||
|
||||
async function remove(name) {
|
||||
if (!confirm(`Delete "${name}"? This cannot be undone.`)) return;
|
||||
const path = currentPath ? `${currentPath}/${name}` : name;
|
||||
await del(`/files/delete?path=${encodeURIComponent(path)}`);
|
||||
browse(currentPath);
|
||||
}
|
||||
|
||||
async function handleDownload(name) {
|
||||
const path = currentPath ? `${currentPath}/${name}` : name;
|
||||
error = "";
|
||||
try {
|
||||
await download(path, name);
|
||||
} catch (e) {
|
||||
error = `Failed to download "${name}": ${e.message}`;
|
||||
console.error("Download failed:", e);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleUpload() {
|
||||
const file = fileInput?.files?.[0];
|
||||
if (!file) return;
|
||||
uploading = true;
|
||||
await upload(currentPath, file);
|
||||
fileInput.value = "";
|
||||
uploading = false;
|
||||
browse(currentPath);
|
||||
}
|
||||
|
||||
function formatSize(bytes) {
|
||||
if (!bytes) return "—";
|
||||
const u = ["B", "KB", "MB", "GB", "TB"];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(1024));
|
||||
return (bytes / Math.pow(1024, i)).toFixed(1) + " " + u[i];
|
||||
}
|
||||
|
||||
function fileIcon(name) {
|
||||
const ext = name.split(".").pop().toLowerCase();
|
||||
if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext)) return "image";
|
||||
if (["mp4", "mkv", "avi", "mov"].includes(ext)) return "video";
|
||||
if (["mp3", "flac", "wav", "m4a", "ogg"].includes(ext)) return "audio";
|
||||
if (["zip", "tar", "gz", "7z", "rar"].includes(ext)) return "archive";
|
||||
if (["py", "js", "ts", "go", "rs", "sh", "yml", "yaml", "json", "md"].includes(ext)) return "code";
|
||||
return "file";
|
||||
}
|
||||
|
||||
const crumbs = $derived(currentPath.split("/").filter(Boolean));
|
||||
|
||||
onMount(() => browse(""));
|
||||
</script>
|
||||
|
||||
<div class="space-y-5">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-surface-900 dark:text-white tracking-tight">Files</h1>
|
||||
<p class="text-sm text-surface-400 mt-1">/volume1{currentPath ? "/" + currentPath : ""}</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="file" bind:this={fileInput} onchange={handleUpload} class="hidden" />
|
||||
<button
|
||||
onclick={() => fileInput.click()}
|
||||
class="text-xs font-medium text-primary-600 bg-primary-50 hover:bg-primary-100 px-3 py-1.5 rounded-lg transition-colors disabled:opacity-50"
|
||||
disabled={uploading}
|
||||
>
|
||||
{uploading ? "Uploading..." : "Upload"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error message -->
|
||||
{#if error}
|
||||
<div class="bg-rose-50 dark:bg-rose-900/20 border border-rose-200 dark:border-rose-800 rounded-lg px-4 py-3 flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-rose-500 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm text-rose-700 dark:text-rose-300">{error}</p>
|
||||
</div>
|
||||
<button onclick={() => error = ""} class="text-rose-400 hover:text-rose-600 transition-colors">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Breadcrumbs -->
|
||||
<div class="flex items-center gap-1 text-sm flex-wrap">
|
||||
<button class="text-primary-600 hover:text-primary-700 font-medium transition-colors" onclick={() => browse("")}>volume1</button>
|
||||
{#each crumbs as part, i}
|
||||
<svg class="w-3.5 h-3.5 text-surface-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
|
||||
<button
|
||||
class="text-primary-600 hover:text-primary-700 font-medium transition-colors"
|
||||
onclick={() => browse(crumbs.slice(0, i + 1).join("/"))}
|
||||
>{part}</button>
|
||||
{/each}
|
||||
{#if currentPath}
|
||||
<button
|
||||
class="ml-auto text-xs font-medium text-surface-500 bg-surface-100 dark:bg-surface-700 hover:bg-surface-200 dark:hover:bg-surface-600 px-2.5 py-1 rounded-lg transition-colors flex items-center gap-1"
|
||||
onclick={goUp}
|
||||
>
|
||||
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18" /></svg>
|
||||
Up
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- File List -->
|
||||
{#if loading}
|
||||
<div class="space-y-1">
|
||||
{#each Array(8) as _}
|
||||
<div class="h-11 rounded-lg bg-surface-100 dark:bg-surface-800 animate-pulse"></div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
|
||||
<!-- Header -->
|
||||
<div class="grid grid-cols-[1fr_100px_100px] px-4 py-2 text-[11px] font-semibold uppercase tracking-wider text-surface-400 border-b border-surface-100 dark:border-surface-700">
|
||||
<span>Name</span>
|
||||
<span class="text-right">Size</span>
|
||||
<span class="text-right">Actions</span>
|
||||
</div>
|
||||
<!-- Entries -->
|
||||
{#each entries as e}
|
||||
<div class="grid grid-cols-[1fr_100px_100px] items-center px-4 py-2.5 hover:bg-surface-50 dark:hover:bg-surface-700 border-b border-surface-100 dark:border-surface-700 last:border-0 transition-colors group">
|
||||
{#if e.is_dir}
|
||||
<button class="flex items-center gap-2.5 text-sm font-medium text-surface-700 dark:text-surface-200 hover:text-primary-600 transition-colors text-left truncate" onclick={() => browse(currentPath ? `${currentPath}/${e.name}` : e.name)}>
|
||||
<svg class="w-4 h-4 text-amber-400 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" /></svg>
|
||||
{e.name}
|
||||
</button>
|
||||
{:else}
|
||||
<span class="flex items-center gap-2.5 text-sm text-surface-600 dark:text-surface-300 truncate">
|
||||
<svg class="w-4 h-4 text-surface-300 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg>
|
||||
{e.name}
|
||||
</span>
|
||||
{/if}
|
||||
<span class="text-xs text-surface-400 text-right">{e.is_dir ? "—" : formatSize(e.size)}</span>
|
||||
<div class="flex items-center justify-end gap-1 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity">
|
||||
{#if !e.is_dir}
|
||||
<button onclick={() => handleDownload(e.name)} class="text-[11px] text-primary-500 hover:text-primary-700 font-medium transition-colors">
|
||||
DL
|
||||
</button>
|
||||
{/if}
|
||||
<button class="text-[11px] text-rose-400 hover:text-rose-600 font-medium transition-colors" onclick={() => remove(e.name)}>Del</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{#if entries.length === 0}
|
||||
<div class="px-4 py-8 text-center text-sm text-surface-400">Empty directory</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user