feat(admin): 存储管理 - 新增资源只读查询、统计与预览
Adapted from ddcat-ai/open-ai-canvas#339 Original commit: fcdbe2aa833f31f683f709b7f409a0534ed78e20 Refs #339 Co-authored-by: 宇熙 <101980758+yuxiwl@users.noreply.github.com>
This commit is contained in:
ddCat
@@ -9,6 +9,7 @@ const CreditOperationsPanel = lazy(() => import("./components/credit-operations-
|
||||
const AccessSettingsPanel = lazy(() => import("./components/access-settings-panel"));
|
||||
const EmailSettingsPanel = lazy(() => import("./components/email-settings-panel"));
|
||||
const FeatureAvailabilityPanel = lazy(() => import("./components/feature-availability-panel"));
|
||||
const StorageResourcesPanel = lazy(() => import("./components/storage-resources-panel"));
|
||||
|
||||
function PageFallback({ label }: { label: string }) {
|
||||
return <div className="py-16 text-center text-sm text-foreground/50">正在读取{label}...</div>;
|
||||
@@ -39,3 +40,7 @@ export function EmailSettingsPage() {
|
||||
export function FeatureAvailabilityPage() {
|
||||
return <AdminPageFrame title="功能开放" description="控制用户工作台入口、渠道、插件与计费模式" scroll><Suspense fallback={<PageFallback label="功能开放配置" />}><FeatureAvailabilityPanel /></Suspense></AdminPageFrame>;
|
||||
}
|
||||
|
||||
export function StorageResourcesPage() {
|
||||
return <AdminPageFrame title="存储资源" description="只读查看资源记录、容量分布与文件预览" scroll><Suspense fallback={<PageFallback label="存储资源" />}><StorageResourcesPanel /></Suspense></AdminPageFrame>;
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@ import {
|
||||
BellRing,
|
||||
CloudUpload,
|
||||
Coins,
|
||||
Database,
|
||||
FileClock,
|
||||
HardDrive,
|
||||
Home,
|
||||
@@ -57,6 +58,7 @@ const adminNavigation: Array<{ label: string; items: AdminNavigationItem[] }> =
|
||||
{ path: "/admin/models", label: "前台模型", description: "展示、线路与用户价格", icon: <Layers3 className="size-4" />, requireFeature: "frontendModelsEnabled" },
|
||||
{ path: "/admin/plugins", label: "插件管理", description: "平台可用性、上传与卸载", icon: <PlugZap className="size-4" /> },
|
||||
{ path: "/admin/prompt-templates", label: "提示词模板", description: "平台创作策略版本", icon: <MessageSquareText className="size-4" /> },
|
||||
{ path: "/admin/resources", label: "存储资源", description: "资源列表、容量与预览", icon: <Database className="size-4" /> },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
167
web/src/pages/admin/components/storage-resources-panel.tsx
Normal file
167
web/src/pages/admin/components/storage-resources-panel.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
import { App, Button, Input, Modal, Select } from "antd";
|
||||
import type { ColumnsType } from "antd/es/table";
|
||||
import { Download, Eye, Search } from "lucide-react";
|
||||
import { saveAs } from "file-saver";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useSearchParams } from "react-router";
|
||||
|
||||
import { PaginationBar } from "@/components/layout/workspace-page";
|
||||
import { useDebouncedValue } from "@/hooks/use-debounced-value";
|
||||
import {
|
||||
adminResourceFileUrl,
|
||||
downloadAdminResource,
|
||||
getAdminStorageStats,
|
||||
listAdminResources,
|
||||
type AdminStorageResource,
|
||||
type AdminStorageStats,
|
||||
} from "@/services/api/admin-storage";
|
||||
import { AdminDataTable, AdminFilterChip, AdminStatTile, AdminStatusBadge, AdminTableEmpty } from "./admin-ui";
|
||||
|
||||
const pageSizes = [20, 50, 100];
|
||||
|
||||
export default function StorageResourcesPanel() {
|
||||
const { message } = App.useApp();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const keyword = searchParams.get("filter") || "";
|
||||
const kind = normalizeOption(searchParams.get("kind"), ["image", "video", "audio", "file"]);
|
||||
const status = normalizeOption(searchParams.get("status"), ["pending", "ready", "failed", "deleted"]);
|
||||
const provider = normalizeOption(searchParams.get("provider"), ["local", "aliyun", "tencent", "qiniu", "s3"]);
|
||||
const userId = searchParams.get("userId") || "";
|
||||
const page = positiveInt(searchParams.get("page"), 1);
|
||||
const pageSize = normalizePageSize(searchParams.get("pageSize"));
|
||||
const debouncedKeyword = useDebouncedValue(keyword);
|
||||
const debouncedUserId = useDebouncedValue(userId);
|
||||
const [resources, setResources] = useState<AdminStorageResource[]>([]);
|
||||
const [stats, setStats] = useState<AdminStorageStats | null>(null);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [previewing, setPreviewing] = useState<AdminStorageResource | null>(null);
|
||||
const [downloadingId, setDownloadingId] = useState("");
|
||||
const requestSequence = useRef(0);
|
||||
const hasFilters = Boolean(keyword || userId || kind !== "all" || status !== "all" || provider !== "all");
|
||||
|
||||
const updateUrl = (patch: Record<string, string | number>, replace = false) => {
|
||||
const next = new URLSearchParams(searchParams);
|
||||
Object.entries(patch).forEach(([key, value]) => {
|
||||
const isDefault = (key === "filter" || key === "userId") && value === ""
|
||||
|| ["kind", "status", "provider"].includes(key) && value === "all"
|
||||
|| key === "page" && value === 1
|
||||
|| key === "pageSize" && value === 20;
|
||||
if (isDefault) next.delete(key);
|
||||
else next.set(key, String(value));
|
||||
});
|
||||
setSearchParams(next, { replace });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController();
|
||||
void getAdminStorageStats(controller.signal)
|
||||
.then(setStats)
|
||||
.catch((error) => {
|
||||
if (error instanceof DOMException && error.name === "AbortError") return;
|
||||
message.error(error instanceof Error ? error.message : "读取存储统计失败");
|
||||
});
|
||||
return () => controller.abort();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const sequence = ++requestSequence.current;
|
||||
const controller = new AbortController();
|
||||
setLoading(true);
|
||||
void listAdminResources({
|
||||
keyword: debouncedKeyword || undefined,
|
||||
kind: kind === "all" ? undefined : kind,
|
||||
status: status === "all" ? undefined : status,
|
||||
provider: provider === "all" ? undefined : provider,
|
||||
userId: debouncedUserId || undefined,
|
||||
page,
|
||||
limit: pageSize,
|
||||
}, controller.signal)
|
||||
.then((result) => {
|
||||
if (sequence !== requestSequence.current) return;
|
||||
setResources(result.items);
|
||||
setTotal(result.total);
|
||||
if (result.total > 0 && result.items.length === 0 && page > 1) updateUrl({ page: 1 }, true);
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error instanceof DOMException && error.name === "AbortError") return;
|
||||
if (sequence === requestSequence.current) message.error(error instanceof Error ? error.message : "读取资源列表失败");
|
||||
})
|
||||
.finally(() => sequence === requestSequence.current && setLoading(false));
|
||||
return () => controller.abort();
|
||||
}, [debouncedKeyword, debouncedUserId, kind, status, provider, page, pageSize]);
|
||||
|
||||
const columns = useMemo<ColumnsType<AdminStorageResource>>(() => [
|
||||
{ title: "资源", width: 260, render: (_, resource) => <div className="min-w-0"><div className="truncate font-medium text-foreground/85" title={resource.objectKey}>{fileName(resource.objectKey) || resource.id}</div><div className="admin-monospace truncate text-foreground/42" title={resource.id}>{resource.id}</div></div> },
|
||||
{ title: "用户", width: 170, render: (_, resource) => <div className="min-w-0"><div className="truncate text-foreground/78">{resource.userName || resource.userId}</div><div className="admin-monospace truncate text-foreground/38" title={resource.userId}>{resource.userId}</div></div> },
|
||||
{ title: "类型", dataIndex: "kind", width: 92, render: (value) => kindLabel(value) },
|
||||
{ title: "状态", dataIndex: "status", width: 104, render: (value) => <AdminStatusBadge label={statusLabel(value)} tone={statusTone(value)} /> },
|
||||
{ title: "存储", dataIndex: "provider", width: 110, render: (value) => providerLabel(value) },
|
||||
{ title: "大小", dataIndex: "size", width: 110, render: (value) => <span className="tabular-nums">{formatBytes(value)}</span> },
|
||||
{ title: "规格", width: 135, render: (_, resource) => resourceDimensions(resource) },
|
||||
{ title: "创建时间", dataIndex: "createdAt", width: 170, render: formatTime },
|
||||
{ title: "操作", width: 154, align: "right", fixed: "right", render: (_, resource) => <div className="flex justify-end gap-1"><Button type="text" size="small" icon={<Eye className="size-3.5" />} disabled={resource.status !== "ready"} onClick={() => setPreviewing(resource)}>预览</Button><Button type="text" size="small" icon={<Download className="size-3.5" />} loading={downloadingId === resource.id} disabled={resource.status !== "ready"} onClick={() => void download(resource)}>下载</Button></div> },
|
||||
], [downloadingId]);
|
||||
|
||||
const download = async (resource: AdminStorageResource) => {
|
||||
setDownloadingId(resource.id);
|
||||
try {
|
||||
const blob = await downloadAdminResource(resource);
|
||||
saveAs(blob, fileName(resource.objectKey) || resource.id);
|
||||
} catch (error) {
|
||||
message.error(error instanceof Error ? error.message : "下载资源失败");
|
||||
} finally {
|
||||
setDownloadingId("");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4 pt-4">
|
||||
<div className="grid overflow-hidden rounded-md border border-border sm:grid-cols-2 xl:grid-cols-4">
|
||||
<AdminStatTile label="资源记录" value={stats ? stats.resourceCount.toLocaleString() : "--"} detail={stats ? `可用 ${stats.readyCount.toLocaleString()} 项` : undefined} />
|
||||
<AdminStatTile label="逻辑体积" value={stats ? formatBytes(stats.logicalBytes) : "--"} detail="包含失败与待处理记录" />
|
||||
<AdminStatTile label="实际可用体积" value={stats ? formatBytes(stats.physicalBytes) : "--"} detail="仅统计已就绪资源" />
|
||||
<AdminStatTile label="存储分布" value={stats ? formatBytes(stats.remoteBytes) : "--"} detail={stats ? `本地 ${formatBytes(stats.localBytes)} · 远端` : undefined} />
|
||||
</div>
|
||||
<AdminDataTable
|
||||
toolbar={<><Input aria-label="搜索资源" autoComplete="off" allowClear className="app-list-search" prefix={<Search className="size-4 text-foreground/40" />} value={keyword} placeholder="搜索资源 ID 或对象路径" onChange={(event) => updateUrl({ filter: event.target.value, page: 1 }, true)} /><Input aria-label="按用户 ID 筛选" autoComplete="off" allowClear className="w-48" value={userId} placeholder="用户 ID" onChange={(event) => updateUrl({ userId: event.target.value, page: 1 }, true)} /></>}
|
||||
toolbarFilters={<><Select className="w-32" value={kind} onChange={(value) => updateUrl({ kind: value, page: 1 })} options={kindOptions} /><Select className="w-32" value={status} onChange={(value) => updateUrl({ status: value, page: 1 })} options={statusOptions} /><Select className="w-36" value={provider} onChange={(value) => updateUrl({ provider: value, page: 1 })} options={providerOptions} /></>}
|
||||
toolbarActiveFilters={<>{keyword ? <AdminFilterChip label={`搜索：${keyword}`} onRemove={() => updateUrl({ filter: "", page: 1 })} /> : null}{userId ? <AdminFilterChip label={`用户：${userId}`} onRemove={() => updateUrl({ userId: "", page: 1 })} /> : null}{kind !== "all" ? <AdminFilterChip label={`类型：${kindLabel(kind)}`} onRemove={() => updateUrl({ kind: "all", page: 1 })} /> : null}{status !== "all" ? <AdminFilterChip label={`状态：${statusLabel(status)}`} onRemove={() => updateUrl({ status: "all", page: 1 })} /> : null}{provider !== "all" ? <AdminFilterChip label={`存储：${providerLabel(provider)}`} onRemove={() => updateUrl({ provider: "all", page: 1 })} /> : null}</>}
|
||||
toolbarActive={hasFilters}
|
||||
onReset={() => updateUrl({ filter: "", userId: "", kind: "all", status: "all", provider: "all", page: 1 })}
|
||||
skeletonColumns={9}
|
||||
table={{ className: "app-data-table", size: "small", rowKey: "id", loading, columns, dataSource: resources, pagination: false, scroll: { x: 1320 } }}
|
||||
empty={<AdminTableEmpty filtered={hasFilters} title={hasFilters ? undefined : "暂无资源记录"} description={hasFilters ? undefined : "资源上传或生成后会显示在这里。"} />}
|
||||
footer={<PaginationBar alwaysShow current={page} pageSize={pageSize} total={total} onChange={(nextPage, nextSize) => updateUrl({ page: nextSize !== pageSize ? 1 : nextPage, pageSize: nextSize })} />}
|
||||
/>
|
||||
<Modal title={previewing ? fileName(previewing.objectKey) || "资源预览" : "资源预览"} open={Boolean(previewing)} width={880} onCancel={() => setPreviewing(null)} footer={previewing ? <Button icon={<Download className="size-4" />} loading={downloadingId === previewing.id} onClick={() => void download(previewing)}>下载原文件</Button> : null} destroyOnHidden>
|
||||
{previewing ? <ResourcePreview resource={previewing} /> : null}
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ResourcePreview({ resource }: { resource: AdminStorageResource }) {
|
||||
const url = adminResourceFileUrl(resource.id);
|
||||
if (resource.kind === "image" || resource.mimeType.startsWith("image/")) return <img className="mx-auto max-h-[65vh] max-w-full object-contain" src={url} alt={fileName(resource.objectKey) || "资源预览"} />;
|
||||
if (resource.kind === "video" || resource.mimeType.startsWith("video/")) return <video className="mx-auto max-h-[65vh] max-w-full bg-black" src={url} controls playsInline />;
|
||||
if (resource.kind === "audio" || resource.mimeType.startsWith("audio/")) return <div className="py-12"><audio className="w-full" src={url} controls /></div>;
|
||||
return <div className="rounded-md border border-border bg-muted/20 px-5 py-10 text-center text-sm text-foreground/55">该文件类型不支持内嵌预览，请下载后查看。</div>;
|
||||
}
|
||||
|
||||
const kindOptions = [{ label: "全部类型", value: "all" }, { label: "图片", value: "image" }, { label: "视频", value: "video" }, { label: "音频", value: "audio" }, { label: "文件", value: "file" }];
|
||||
const statusOptions = [{ label: "全部状态", value: "all" }, { label: "待处理", value: "pending" }, { label: "已就绪", value: "ready" }, { label: "失败", value: "failed" }, { label: "已删除", value: "deleted" }];
|
||||
const providerOptions = [{ label: "全部存储", value: "all" }, { label: "本地", value: "local" }, { label: "阿里云 OSS", value: "aliyun" }, { label: "腾讯云 COS", value: "tencent" }, { label: "七牛云 Kodo", value: "qiniu" }, { label: "S3", value: "s3" }];
|
||||
|
||||
function normalizeOption(value: string | null, values: string[]) { return value && values.includes(value) ? value : "all"; }
|
||||
function positiveInt(value: string | null, fallback: number) { const parsed = Number(value); return Number.isInteger(parsed) && parsed > 0 ? parsed : fallback; }
|
||||
function normalizePageSize(value: string | null) { const parsed = positiveInt(value, 20); return pageSizes.includes(parsed) ? parsed : 20; }
|
||||
function fileName(objectKey: string) { return objectKey.split("/").filter(Boolean).at(-1) || ""; }
|
||||
function kindLabel(kind: string) { return ({ image: "图片", video: "视频", audio: "音频", file: "文件" } as Record<string, string>)[kind] || kind || "未知"; }
|
||||
function statusLabel(status: string) { return ({ pending: "待处理", ready: "已就绪", failed: "失败", deleted: "已删除" } as Record<string, string>)[status] || status || "未知"; }
|
||||
function statusTone(status: string): "neutral" | "success" | "warning" | "error" { return status === "ready" ? "success" : status === "pending" ? "warning" : status === "failed" ? "error" : "neutral"; }
|
||||
function providerLabel(provider: string) { return ({ local: "本地", aliyun: "阿里云 OSS", tencent: "腾讯云 COS", qiniu: "七牛云 Kodo", s3: "S3" } as Record<string, string>)[provider] || provider || "本地"; }
|
||||
function formatBytes(bytes: number) { if (!Number.isFinite(bytes) || bytes <= 0) return "0 B"; const units = ["B", "KB", "MB", "GB", "TB"]; const unit = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1); const value = bytes / 1024 ** unit; return `${value >= 100 || unit === 0 ? value.toFixed(0) : value.toFixed(1)} ${units[unit]}`; }
|
||||
function formatTime(value: string) { const date = new Date(value); return Number.isNaN(date.getTime()) ? "--" : date.toLocaleString("zh-CN", { hour12: false }); }
|
||||
function resourceDimensions(resource: AdminStorageResource) { if (resource.width > 0 && resource.height > 0) return <span className="tabular-nums">{resource.width} × {resource.height}</span>; if (resource.durationMs > 0) return <span className="tabular-nums">{formatDuration(resource.durationMs)}</span>; return <span className="text-foreground/30">--</span>; }
|
||||
function formatDuration(durationMs: number) { const seconds = Math.round(durationMs / 1000); const minutes = Math.floor(seconds / 60); return minutes > 0 ? `${minutes}:${String(seconds % 60).padStart(2, "0")}` : `${seconds} 秒`; }
|
||||
@@ -12,6 +12,7 @@ import RouteErrorPage from "@/pages/route-error";
|
||||
const AdminPage = lazy(() => import("@/pages/admin"));
|
||||
const AnalyticsPage = lazy(() => import("@/pages/admin/admin-route-pages").then((module) => ({ default: module.AnalyticsPage })));
|
||||
const AnnouncementsPage = lazy(() => import("@/pages/admin/admin-route-pages").then((module) => ({ default: module.AnnouncementsPage })));
|
||||
const StorageResourcesPage = lazy(() => import("@/pages/admin/admin-route-pages").then((module) => ({ default: module.StorageResourcesPage })));
|
||||
const CreditOperationsPage = lazy(() => import("@/pages/admin/admin-route-pages").then((module) => ({ default: module.CreditOperationsPage })));
|
||||
const AccessSettingsPage = lazy(() => import("@/pages/admin/admin-route-pages").then((module) => ({ default: module.AccessSettingsPage })));
|
||||
const EmailSettingsPage = lazy(() => import("@/pages/admin/admin-route-pages").then((module) => ({ default: module.EmailSettingsPage })));
|
||||
@@ -171,6 +172,7 @@ export const router = createBrowserRouter([
|
||||
{ path: "prompt-templates", element: deferred(<StoryboardPromptsPage />) },
|
||||
{ path: "storyboard-prompts", element: <Navigate to="/admin/prompt-templates" replace /> },
|
||||
{ path: "announcements", element: deferred(<AnnouncementsPage />) },
|
||||
{ path: "resources", element: deferred(<StorageResourcesPage />) },
|
||||
{ path: "credit-operations", element: deferred(<CreditOperationsPage />) },
|
||||
{ path: "redemption-codes", element: deferred(<RedemptionCodesPage />) },
|
||||
{ path: "logs", element: deferred(<LogsPage />) },
|
||||
|
||||
84
web/src/services/api/admin-storage.ts
Normal file
84
web/src/services/api/admin-storage.ts
Normal file
@@ -0,0 +1,84 @@
|
||||
import { apiBaseURL, apiClient, compactApiParams, request } from "@/services/api/request";
|
||||
|
||||
export type AdminStorageResource = {
|
||||
id: string;
|
||||
userId: string;
|
||||
userName: string;
|
||||
kind: "image" | "video" | "audio" | "file" | string;
|
||||
status: "pending" | "ready" | "failed" | "deleted" | string;
|
||||
provider: string;
|
||||
bucket?: string;
|
||||
objectKey: string;
|
||||
mimeType: string;
|
||||
size: number;
|
||||
physicalBytes: number;
|
||||
width: number;
|
||||
height: number;
|
||||
durationMs: number;
|
||||
fileUrl: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
};
|
||||
|
||||
export type AdminResourcePage = {
|
||||
items: AdminStorageResource[];
|
||||
total: number;
|
||||
page: number;
|
||||
limit: number;
|
||||
};
|
||||
|
||||
export type AdminStorageDimensionStat = {
|
||||
count: number;
|
||||
logicalBytes: number;
|
||||
physicalBytes: number;
|
||||
};
|
||||
|
||||
export type AdminStorageStats = {
|
||||
resourceCount: number;
|
||||
readyCount: number;
|
||||
logicalBytes: number;
|
||||
physicalBytes: number;
|
||||
localBytes: number;
|
||||
remoteBytes: number;
|
||||
byKind: Array<AdminStorageDimensionStat & { kind: string }>;
|
||||
byProvider: Array<AdminStorageDimensionStat & { provider: string }>;
|
||||
};
|
||||
|
||||
export type AdminResourceQuery = {
|
||||
keyword?: string;
|
||||
kind?: string;
|
||||
status?: string;
|
||||
provider?: string;
|
||||
userId?: string;
|
||||
page?: number;
|
||||
limit?: number;
|
||||
};
|
||||
|
||||
export async function listAdminResources(query: AdminResourceQuery, signal?: AbortSignal) {
|
||||
return request<AdminResourcePage>(apiClient.get("/admin/resources", { params: compactApiParams(query), signal }));
|
||||
}
|
||||
|
||||
export async function getAdminStorageStats(signal?: AbortSignal) {
|
||||
const result = await request<{ stats: AdminStorageStats }>(apiClient.get("/admin/storage/stats", { signal }));
|
||||
return result.stats;
|
||||
}
|
||||
|
||||
export function adminResourceFileUrl(id: string, download = false) {
|
||||
const base = String(apiBaseURL).replace(/\/+$/, "");
|
||||
return `${base}/admin/resources/${encodeURIComponent(id)}/file${download ? "?download=1" : ""}`;
|
||||
}
|
||||
|
||||
export async function downloadAdminResource(resource: AdminStorageResource) {
|
||||
const response = await fetch(adminResourceFileUrl(resource.id, true), { credentials: "include" });
|
||||
if (!response.ok) {
|
||||
let message = "下载资源失败";
|
||||
try {
|
||||
const body = (await response.json()) as { msg?: string };
|
||||
if (body.msg) message = body.msg;
|
||||
} catch {
|
||||
// 文件接口失败时不保证返回 JSON。
|
||||
}
|
||||
throw new Error(message);
|
||||
}
|
||||
return response.blob();
|
||||
}
|
||||
Reference in New Issue
Block a user