diff --git a/src/renderer/src/pages/files/FileItem.tsx b/src/renderer/src/pages/files/FileItem.tsx index 31dc175e58..08724033e8 100644 --- a/src/renderer/src/pages/files/FileItem.tsx +++ b/src/renderer/src/pages/files/FileItem.tsx @@ -29,7 +29,6 @@ interface FileItemProps { } style?: React.CSSProperties gridTemplate?: string - isSelected?: boolean } const getFileIcon = (type?: string) => { @@ -80,17 +79,13 @@ const getFileIcon = (type?: string) => { return } -const FileItem: React.FC = ({ fileInfo, style, gridTemplate = '', isSelected = false }) => { +const FileItem: React.FC = ({ fileInfo, style, gridTemplate = '' }) => { const { name, ext, size, created_at, count, actions, icon, checkbox } = fileInfo return ( - + - {checkbox && ( - - {checkbox} - - )} + {checkbox && {checkbox}} {icon || getFileIcon(ext)} @@ -121,26 +116,11 @@ const FileItemCard = styled.div` box-shadow 0.2s ease, background-color 0.2s ease; --shadow-color: rgba(0, 0, 0, 0.05); - &:hover { box-shadow: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color); } - - .file-checkbox { - opacity: 0; - transition: opacity 0.2s ease; - } - - &:hover .file-checkbox { - opacity: 1; - } - - &.selected .file-checkbox { - opacity: 1; - } - body[theme-mode='dark'] & { --shadow-color: rgba(255, 255, 255, 0.02); } @@ -198,10 +178,4 @@ const FileCount = styled.div` color: var(--color-text-2); ` -const CheckboxContainer = styled.div` - display: flex; - align-items: center; - justify-content: center; -` - export default memo(FileItem) diff --git a/src/renderer/src/pages/files/FileList.tsx b/src/renderer/src/pages/files/FileList.tsx index aed570fb6f..39fb61dfa9 100644 --- a/src/renderer/src/pages/files/FileList.tsx +++ b/src/renderer/src/pages/files/FileList.tsx @@ -23,7 +23,7 @@ interface FileItemProps { columnWidths?: string } -const FileList: React.FC = ({ list, columnWidths, selectedFileIds = [] }) => { +const FileList: React.FC = ({ list, columnWidths }) => { // if (id === FileTypes.IMAGE && files?.length && files?.length > 0) { // return ( //
@@ -90,7 +90,6 @@ const FileList: React.FC = ({ list, columnWidths, selectedFileIds 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 c805903538..64b21839cf 100644 --- a/src/renderer/src/pages/files/FilesPage.tsx +++ b/src/renderer/src/pages/files/FilesPage.tsx @@ -267,14 +267,12 @@ const FilesPage: FC = () => { - 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} - /> - + 0 && selectedFileIds.length < sortedFiles.length} + checked={selectedFileIds.length === sortedFiles.length && sortedFiles.length > 0} + onChange={(e) => handleSelectAll(e.target.checked)} + disabled={sortedFiles.length === 0} + /> {/* 图标列 */} @@ -473,25 +471,6 @@ 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