fix(assets): 素材库 - 修复主题按钮并新增批量全选 (#193)

web/src/pages/assets/index.tsx

@@ -1,4 +1,4 @@
-import { Copy, Download, FileUp, MoreHorizontal, PencilLine, Plus, Search, Trash2, Upload } from "lucide-react";
+import { CheckCheck, Copy, Download, FileUp, MoreHorizontal, PencilLine, Plus, Search, Trash2, Upload } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { App, Button, Drawer, Dropdown, Form, Input, Modal, Select, Space, Tag, Typography } from "antd";
 
@@ -95,6 +95,8 @@ export default function AssetsPage() {
             return assetSearchText(asset).includes(query);
         });
     }, [validAssets, keyword, kindFilter, categoryFilter]);
+    const filteredAssetIds = useMemo(() => filteredAssets.map((asset) => asset.id), [filteredAssets]);
+    const allFilteredSelected = filteredAssetIds.length > 0 && filteredAssetIds.every((id) => selectedIds.includes(id));
 
     const visibleAssets = useMemo(() => {
         const start = (page - 1) * pageSize;
@@ -283,6 +285,7 @@ export default function AssetsPage() {
                         {selectedAssets.length ? (
                             <div className="mt-3 flex min-h-10 flex-wrap items-center gap-2 border-y border-border/75 py-2 text-xs">
                                 <strong className="mr-auto font-medium">已选择 {selectedAssets.length} 个素材</strong>
+                                <Button size="small" icon={<CheckCheck className="size-3.5" />} disabled={allFilteredSelected} onClick={() => setSelectedIds((current) => Array.from(new Set([...current, ...filteredAssetIds])))}>全选</Button>
                                 <Button size="small" onClick={() => setSelectedIds([])}>取消选择</Button>
                                 <Button size="small" icon={<Download className="size-3.5" />} onClick={() => void exportSelectedAssets()}>导出</Button>
                                 <Button size="small" danger icon={<Trash2 className="size-3.5" />} onClick={() => setBatchDeleteOpen(true)}>删除</Button>

web/src/styles/globals.css

@@ -3419,17 +3419,19 @@
     .library-page .app-page-header p { max-width: 560px; }
 
     /* 页面头部按钮优化 - 去除重边框 */
-    .library-page .app-page-header .ant-btn,
-    .canvas-library-page .app-page-header .ant-btn {
+    html:not(.dark) .library-page .app-page-header .ant-btn,
+    html:not(.dark) .canvas-library-page .app-page-header .ant-btn {
         border: 1px solid rgba(17, 17, 17, 0.08) !important;
         background: #ffffff !important;
+        color: #171717 !important;
         box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
         transition: all 180ms ease-out !important;
     }
-    .library-page .app-page-header .ant-btn:hover,
-    .canvas-library-page .app-page-header .ant-btn:hover {
+    html:not(.dark) .library-page .app-page-header .ant-btn:hover,
+    html:not(.dark) .canvas-library-page .app-page-header .ant-btn:hover {
         border-color: rgba(17, 17, 17, 0.12) !important;
         background: #ffffff !important;
+        color: #171717 !important;
         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
         transform: translateY(-1px);
     }

web/test/asset-header-button-style.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, test } from "bun:test";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+describe("asset library header buttons", () => {
+    test("only forces white header buttons in light mode", () => {
+        const css = readFileSync(resolve(import.meta.dir, "../src/styles/globals.css"), "utf8");
+        const headerButtonRule = css.match(/html:not\(\.dark\) \.library-page \.app-page-header \.ant-btn,[\s\S]*?transition: all 180ms ease-out !important;\s*}/)?.[0] || "";
+        const headerButtonHoverRule = css.match(/html:not\(\.dark\) \.library-page \.app-page-header \.ant-btn:hover,[\s\S]*?transform: translateY\(-1px\);\s*}/)?.[0] || "";
+
+        expect(headerButtonRule).toContain("background: #ffffff !important;");
+        expect(headerButtonRule).toContain("color: #171717 !important;");
+        expect(headerButtonHoverRule).toContain("background: #ffffff !important;");
+        expect(headerButtonHoverRule).toContain("color: #171717 !important;");
+        expect(css).not.toContain("\n    .library-page .app-page-header .ant-btn,\n");
+    });
+});

web/test/assets-page-batch-toolbar.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, test } from "bun:test";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+describe("assets page batch toolbar", () => {
+    test("places select all before cancel selection", () => {
+        const source = readFileSync(resolve(import.meta.dir, "../src/pages/assets/index.tsx"), "utf8");
+        const selectAllIndex = source.indexOf(">全选</Button>");
+        const clearSelectionIndex = source.indexOf(">取消选择</Button>");
+
+        expect(selectAllIndex).toBeGreaterThanOrEqual(0);
+        expect(clearSelectionIndex).toBeGreaterThanOrEqual(0);
+        expect(selectAllIndex).toBeLessThan(clearSelectionIndex);
+    });
+});