= ({ list, columnWidths, selectedFileIds = [] }) => {
// if (id === FileTypes.IMAGE && files?.length && files?.length > 0) {
// return (
//
@@ -90,6 +90,7 @@ const FileList: React.FC = ({ list, columnWidths }) => {
actions: item.actions
}}
gridTemplate={columnWidths}
+ isSelected={selectedFileIds.includes(item.key as string)}
/>
)}
diff --git a/src/renderer/src/pages/files/FilesPage.tsx b/src/renderer/src/pages/files/FilesPage.tsx
index 64b21839cf..c805903538 100644
--- a/src/renderer/src/pages/files/FilesPage.tsx
+++ b/src/renderer/src/pages/files/FilesPage.tsx
@@ -267,12 +267,14 @@ const FilesPage: FC = () => {
- 0 && selectedFileIds.length < sortedFiles.length}
- checked={selectedFileIds.length === sortedFiles.length && sortedFiles.length > 0}
- onChange={(e) => handleSelectAll(e.target.checked)}
- disabled={sortedFiles.length === 0}
- />
+ 0 ? 'selected' : ''}`}>
+ 0 && selectedFileIds.length < sortedFiles.length}
+ checked={selectedFileIds.length === sortedFiles.length && sortedFiles.length > 0}
+ onChange={(e) => handleSelectAll(e.target.checked)}
+ disabled={sortedFiles.length === 0}
+ />
+
{/* 图标列 */}
@@ -471,6 +473,25 @@ const TableCell = styled.div`
const TableHeader = styled.div`
margin: 0 16px;
+
+ .header-checkbox {
+ opacity: 0;
+ transition: opacity 0.2s ease;
+ }
+
+ &:hover .header-checkbox {
+ opacity: 1;
+ }
+
+ .header-checkbox.selected {
+ opacity: 1;
+ }
+`
+
+const CheckboxContainer = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: center;
`
export default FilesPage