GithubBackup/Foxel
1
0
Fork 0
mirror of https://github.com/DrizzleTime/Foxel.git synced 2026-05-07 03:22:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Simplify EmptyState component

Browse Source
This commit is contained in:
shiyu
2025-08-29 12:55:53 +08:00
parent 20bc1cfbb7
commit 24ce681c28
2 changed files with 4 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/pages/FileExplorerPage/FileExplorerPage.tsx
View File

@@ -109,7 +109,7 @@ const FileExplorerPage = memo(function FileExplorerPage() {
<div style={{ flex: 1, overflow: 'auto', paddingBottom: pagination.total > 0 ? '80px' : '0' }} onContextMenu={openBlankContextMenu}>
{loading && entries.length === 0 ? (
<div style={{ textAlign: 'center', padding: 40 }}><EmptyState isRoot={path === '/'} onCreateDir={() => setCreatingDir(true)} onGoUp={goUp} /></div>
<div style={{ textAlign: 'center', padding: 40 }}><EmptyState isRoot={path === '/'} /></div>
) : viewMode === 'grid' ? (
<GridView
entries={entries}

17
web/src/pages/FileExplorerPage/components/EmptyState.tsx
View File

@@ -1,14 +1,12 @@
import React from 'react';
import { Button, Space, Typography, theme } from 'antd';
import { PlusOutlined, CloudUploadOutlined, ArrowUpOutlined, FolderOpenOutlined } from '@ant-design/icons';
import { Typography, theme } from 'antd';
import { FolderOpenOutlined } from '@ant-design/icons';
interface Props {
isRoot: boolean;
onCreateDir: () => void;
onGoUp: () => void;
}
export const EmptyState: React.FC<Props> = ({ isRoot, onCreateDir, onGoUp }) => {
export const EmptyState: React.FC<Props> = ({ isRoot }) => {
const { token } = theme.useToken();
return (
<div style={{ display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding:isRoot? '80px 40px':'60px 40px', minHeight: isRoot? '400px':'300px', color: token.colorTextSecondary }}>
@@ -19,15 +17,6 @@ export const EmptyState: React.FC<Props> = ({ isRoot, onCreateDir, onGoUp }) =>
<Typography.Text style={{ color: token.colorTextTertiary, marginBottom:24, textAlign:'center', maxWidth:300, lineHeight:1.5 }}>
{isRoot ? '开始上传文件或创建新目录来组织您的内容' : '您可以在此目录中创建新的文件夹或上传文件'}
</Typography.Text>
<Space size={12}>
<Button type="primary" icon={<PlusOutlined />} onClick={onCreateDir}>新建目录</Button>
<Button icon={<CloudUploadOutlined />} disabled>上传文件</Button>
</Space>
{!isRoot && (
<div style={{ marginTop:16 }}>
<Button type="link" size="small" icon={<ArrowUpOutlined />} onClick={onGoUp} style={{ color: token.colorTextTertiary }}>返回上级目录</Button>
</div>
)}
</div>
);
};