Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2026-01-08 06:19:05 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Revert "refactor(FileItem, FileList, FilesPage): enhance file selection UI and improve checkbox handling"

Browse Source 
This reverts commit 58f3edb352.
This commit is contained in:
Teo 2025-06-14 15:46:55 +08:00
parent 2ec0c29087
commit f1804bc3a0
3 changed files with 10 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/renderer/src/pages/files/FileItem.tsx
View File

@ -29,7 +29,6 @@ interface FileItemProps {
} }
style?: React.CSSProperties style?: React.CSSProperties
gridTemplate?: string gridTemplate?: string
isSelected?: boolean
} }
const getFileIcon = (type?: string) => { const getFileIcon = (type?: string) => {
@ -80,17 +79,13 @@ const getFileIcon = (type?: string) => {
return <FileUnknownFilled /> return <FileUnknownFilled />
} }
const FileItem: React.FC<FileItemProps> = ({ fileInfo, style, gridTemplate = '', isSelected = false }) => { const FileItem: React.FC<FileItemProps> = ({ fileInfo, style, gridTemplate = '' }) => {
const { name, ext, size, created_at, count, actions, icon, checkbox } = fileInfo const { name, ext, size, created_at, count, actions, icon, checkbox } = fileInfo
return ( return (
<FileItemCard style={style} className={isSelected ? 'selected' : ''}> <FileItemCard style={style}>
<FileGrid style={{ gridTemplateColumns: gridTemplate }}> <FileGrid style={{ gridTemplateColumns: gridTemplate }}>
{checkbox && ( {checkbox && <FileCell>{checkbox}</FileCell>}
<FileCell>
<CheckboxContainer className="file-checkbox">{checkbox}</CheckboxContainer>
</FileCell>
)}
<FileCell> <FileCell>
<FileIcon>{icon || getFileIcon(ext)}</FileIcon> <FileIcon>{icon || getFileIcon(ext)}</FileIcon>
</FileCell> </FileCell>
@ -121,26 +116,11 @@ const FileItemCard = styled.div`
box-shadow 0.2s ease, box-shadow 0.2s ease,
background-color 0.2s ease; background-color 0.2s ease;
--shadow-color: rgba(0, 0, 0, 0.05); --shadow-color: rgba(0, 0, 0, 0.05);
&:hover { &:hover {
box-shadow: box-shadow:
0 10px 15px -3px var(--shadow-color), 0 10px 15px -3px var(--shadow-color),
0 4px 6px -4px 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'] & { body[theme-mode='dark'] & {
--shadow-color: rgba(255, 255, 255, 0.02); --shadow-color: rgba(255, 255, 255, 0.02);
} }
@ -198,10 +178,4 @@ const FileCount = styled.div`
color: var(--color-text-2); color: var(--color-text-2);
` `
const CheckboxContainer = styled.div`
display: flex;
align-items: center;
justify-content: center;
`
export default memo(FileItem) export default memo(FileItem)

3
src/renderer/src/pages/files/FileList.tsx
View File

@ -23,7 +23,7 @@ interface FileItemProps {
columnWidths?: string columnWidths?: string
} }
const FileList: React.FC<FileItemProps> = ({ list, columnWidths, selectedFileIds = [] }) => { const FileList: React.FC<FileItemProps> = ({ list, columnWidths }) => {
// if (id === FileTypes.IMAGE && files?.length && files?.length > 0) { // if (id === FileTypes.IMAGE && files?.length && files?.length > 0) {
// return ( // return (
// <div style={{ padding: 16, overflowY: 'auto' }}> // <div style={{ padding: 16, overflowY: 'auto' }}>
@ -90,7 +90,6 @@ const FileList: React.FC<FileItemProps> = ({ list, columnWidths, selectedFileIds
actions: item.actions actions: item.actions
}} }}
gridTemplate={columnWidths} gridTemplate={columnWidths}
isSelected={selectedFileIds.includes(item.key as string)}
/> />
</div> </div>
)} )}

33
src/renderer/src/pages/files/FilesPage.tsx
View File

@ -267,14 +267,12 @@ const FilesPage: FC = () => {
<TableHeader> <TableHeader>
<TableGrid style={{ gridTemplateColumns: GRID_TEMPLATE }}> <TableGrid style={{ gridTemplateColumns: GRID_TEMPLATE }}>
<TableCell> <TableCell>
<CheckboxContainer className={`header-checkbox ${selectedFileIds.length > 0 ? 'selected' : ''}`}> <Checkbox
<Checkbox indeterminate={selectedFileIds.length > 0 && selectedFileIds.length < sortedFiles.length}
indeterminate={selectedFileIds.length > 0 && selectedFileIds.length < sortedFiles.length} checked={selectedFileIds.length === sortedFiles.length && sortedFiles.length > 0}
checked={selectedFileIds.length === sortedFiles.length && sortedFiles.length > 0} onChange={(e) => handleSelectAll(e.target.checked)}
onChange={(e) => handleSelectAll(e.target.checked)} disabled={sortedFiles.length === 0}
disabled={sortedFiles.length === 0} />
/>
</CheckboxContainer>
</TableCell> </TableCell>
<TableCell>{/* 图标列 */}</TableCell> <TableCell>{/* 图标列 */}</TableCell>
<TableCell> <TableCell>
@ -473,25 +471,6 @@ const TableCell = styled.div`
const TableHeader = styled.div` const TableHeader = styled.div`
margin: 0 16px; 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 export default FilesPage