feat(storage): 素材库容量 - 展示账号文件使用进度

Refs #227 Co-authored-by: MasterChiefCN <49179444+MasterChiefCN@users.noreply.github.com>
2026-08-15 12:52:11 +08:00
1 parent 914717cae6
commit 91ac4bd501
@@ -0,0 +1,60 @@
+import { useQuery } from "@tanstack/react-query";
+import { HardDrive } from "lucide-react";
+
+import { formatBytes } from "@/lib/image-utils";
+import { getAccountFileStorageUsage } from "@/services/api/resources";
+
+export const assetStorageUsageQueryKey = ["account-file-storage-usage"] as const;
+
+export function AssetStorageUsage() {
+    const query = useQuery({
+        queryKey: assetStorageUsageQueryKey,
+        queryFn: getAccountFileStorageUsage,
+        refetchOnMount: "always",
+    });
+    const usage = query.data;
+    const percent = usage?.totalBytes ? Math.min(100, (usage.usedBytes / usage.totalBytes) * 100) : 0;
+    const percentLabel = usage?.usedBytes && percent < 0.1 ? "<0.1%" : `${Math.round(percent * 10) / 10}%`;
+    const full = Boolean(usage && usage.usedBytes >= usage.totalBytes);
+
+    return (
+        <section className={`assets-storage-usage${full ? " is-full" : ""}${usage?.usedBytes ? " has-usage" : ""}`} aria-label="账号文件容量" aria-busy={query.isPending} title="包含素材文件和 Agent 会话附件">
+            <span className="assets-storage-usage-icon" aria-hidden="true">
+                <HardDrive />
+            </span>
+            <span className="assets-storage-usage-title">账号容量</span>
+            {usage ? (
+                <>
+                    <span className="assets-storage-usage-value">
+                        {storageBytes(usage.usedBytes)} / {storageBytes(usage.totalBytes)}
+                    </span>
+                    <span
+                        className="assets-storage-usage-track"
+                        role="progressbar"
+                        aria-label="账号文件容量使用进度"
+                        aria-valuemin={0}
+                        aria-valuemax={usage.totalBytes}
+                        aria-valuenow={Math.min(usage.usedBytes, usage.totalBytes)}
+                        aria-valuetext={`已使用 ${storageBytes(usage.usedBytes)}，总容量 ${storageBytes(usage.totalBytes)}`}
+                    >
+                        <span style={{ width: `${percent}%` }} />
+                    </span>
+                    <span className="assets-storage-usage-percent">{percentLabel}</span>
+                </>
+            ) : query.isError ? (
+                <span className="assets-storage-usage-status">
+                    容量统计暂时不可用。
+                    <button type="button" onClick={() => void query.refetch()}>
+                        重试
+                    </button>
+                </span>
+            ) : (
+                <span className="assets-storage-usage-status">正在统计已用容量…</span>
+            )}
+        </section>
+    );
+}
+
+function storageBytes(value: number) {
+    return formatBytes(value) || "0 B";
+}
@@ -1,5 +1,6 @@
 import { AudioLines, Box, CheckCheck, Clapperboard, Copy, Download, FileText, FileUp, Image as ImageIcon, Link2, MoreHorizontal, PencilLine, Play, Plus, Search, Trash2, Upload, type LucideIcon } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
 import { App, Button, Drawer, Dropdown, Form, Input, Modal, Select, Space, Tag, Typography } from "antd";
 import type { MenuProps } from "antd";
 import { useNavigate } from "react-router";
@@ -17,6 +18,7 @@ import { uploadImage } from "@/services/image-storage";
 import { uploadMediaFile } from "@/services/file-storage";
 import { useAssetStore, type Asset, type AssetCategory, type AssetKind, type ImageAsset } from "@/stores/use-asset-store";
 import { exportAssets, readAssetPackage } from "./asset-transfer";
+import { AssetStorageUsage, assetStorageUsageQueryKey } from "./asset-storage-usage";
 import { deleteAssetWithRemoteSync } from "@/services/user-data-sync";

 type LibraryAsset = Exclude<Asset, { kind: "entity" }>;
@@ -65,6 +67,7 @@ const assetKindIcons: Record<LibraryAsset["kind"], LucideIcon> = {
 export default function AssetsPage() {
    const { message } = App.useApp();
    const navigate = useNavigate();
+    const queryClient = useQueryClient();
    const copyText = useCopyText();
    const [form] = Form.useForm<AssetFormValues>();
    const coverInputRef = useRef<HTMLInputElement>(null);
@@ -188,6 +191,7 @@ export default function AssetsPage() {
    const readImageFile = async (file?: File) => {
        if (!file || !file.type.startsWith("image/")) return;
        const image = await uploadImage(file);
+        void queryClient.invalidateQueries({ queryKey: assetStorageUsageQueryKey });
        const draft = { dataUrl: image.url, storageKey: image.storageKey, width: image.width, height: image.height, bytes: image.bytes, mimeType: image.mimeType };
        setImageDraft(draft);
        if (!form.getFieldValue("coverUrl")) form.setFieldValue("coverUrl", draft.dataUrl);
@@ -197,6 +201,7 @@ export default function AssetsPage() {
    const readModelFile = async (file?: File) => {
        if (!file || !/\.(glb|gltf)$/i.test(file.name)) return;
        const uploaded = await uploadMediaFile(file, "model");
+        void queryClient.invalidateQueries({ queryKey: assetStorageUsageQueryKey });
        addAsset({ kind: "model", title: file.name.replace(/\.(glb|gltf)$/i, ""), coverUrl: "", tags: ["3D模型"], source: "手动上传", data: { url: uploaded.url, storageKey: uploaded.storageKey, bytes: uploaded.bytes, mimeType: uploaded.mimeType, fileName: file.name }, metadata: { source: "manual" } });
        message.success("3D 模型已保存");
    };
@@ -277,13 +282,16 @@ export default function AssetsPage() {
                    description="管理文本、图片、视频、音频和 3D 模型素材。"
                    meta={<span className="app-projects-header-meta assets-header-meta">{validAssets.length} 个素材</span>}
                    actions={(
-                        <>
-                            <Button className="library-primary-action" type="primary" icon={<Plus className="size-3.5" />} onClick={openCreate}>新增素材</Button>
-                            <Button title="导出全部素材" aria-label="导出全部素材" icon={<Download className="size-4" />} onClick={() => void exportAllAssets()} />
-                            <Dropdown trigger={["click"]} menu={{ items: [{ key: "package", icon: <FileUp className="size-4" />, label: "导入素材包", onClick: () => assetInputRef.current?.click() }, { key: "model", icon: <Upload className="size-4" />, label: "上传 3D 模型", onClick: () => modelInputRef.current?.click() }] }}>
-                                <Button title="导入素材" aria-label="导入素材" icon={<FileUp className="size-4" />} />
-                            </Dropdown>
-                        </>
+                        <div className="assets-header-actions">
+                            <div className="assets-header-action-buttons">
+                                <Button className="library-primary-action" type="primary" icon={<Plus className="size-3.5" />} onClick={openCreate}>新增素材</Button>
+                                <Button title="导出全部素材" aria-label="导出全部素材" icon={<Download className="size-4" />} onClick={() => void exportAllAssets()} />
+                                <Dropdown trigger={["click"]} menu={{ items: [{ key: "package", icon: <FileUp className="size-4" />, label: "导入素材包", onClick: () => assetInputRef.current?.click() }, { key: "model", icon: <Upload className="size-4" />, label: "上传 3D 模型", onClick: () => modelInputRef.current?.click() }] }}>
+                                    <Button title="导入素材" aria-label="导入素材" icon={<FileUp className="size-4" />} />
+                                </Dropdown>
+                            </div>
+                            <AssetStorageUsage />
+                        </div>
                    )}
                />
                <ListToolbar className="library-toolbar" active={Boolean(keyword || kindFilter !== "all" || categoryFilter !== "all")} onReset={() => { setKeyword(""); setKindFilter("all"); setCategoryFilter("all"); setPage(1); }}>