Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2025-12-26 20:12:38 +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
gridTemplate?: string
isSelected?: boolean
}
const getFileIcon = (type?: string) => {
@ -80,17 +79,13 @@ const getFileIcon = (type?: string) => {
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
return (
<FileItemCard style={style} className={isSelected ? 'selected' : ''}>
<FileItemCard style={style}>
<FileGrid style={{ gridTemplateColumns: gridTemplate }}>
{checkbox && (
<FileCell>
<CheckboxContainer className="file-checkbox">{checkbox}</CheckboxContainer>
</FileCell>
)}
{checkbox && <FileCell>{checkbox}</FileCell>}
<FileCell>
<FileIcon>{icon || getFileIcon(ext)}</FileIcon>
</FileCell>
@ -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)

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

@ -23,7 +23,7 @@ interface FileItemProps {
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) {
// return (
// <div style={{ padding: 16, overflowY: 'auto' }}>
@ -90,7 +90,6 @@ const FileList: React.FC<FileItemProps> = ({ list, columnWidths, selectedFileIds
actions: item.actions
}}
gridTemplate={columnWidths}
isSelected={selectedFileIds.includes(item.key as string)}
/>
</div>
)}

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

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