diff --git a/apps/web/src/components/blocksuite/block-suite-page-list/index.tsx b/apps/web/src/components/blocksuite/block-suite-page-list/index.tsx index 7740051868..e70de6ef82 100644 --- a/apps/web/src/components/blocksuite/block-suite-page-list/index.tsx +++ b/apps/web/src/components/blocksuite/block-suite-page-list/index.tsx @@ -118,9 +118,6 @@ export const BlockSuitePageList: React.FC = ({ }), [pageMetas, filterMode, isPreferredEdgeless, listType, view] ); - if (list.length === 0) { - return ; - } if (listType === 'trash') { const pageList: TrashListData[] = list.map(pageMeta => { @@ -153,7 +150,12 @@ export const BlockSuitePageList: React.FC = ({ }, }; }); - return ; + return ( + } + /> + ); } const pageList: ListData[] = list.map(pageMeta => { @@ -205,6 +207,7 @@ export const BlockSuitePageList: React.FC = ({ onImportFile={importFile} isPublicWorkspace={isPublic} list={pageList} + fallback={} /> ); }; diff --git a/packages/component/src/components/page-list/all-page.tsx b/packages/component/src/components/page-list/all-page.tsx index 4bdf28342e..8ca419d241 100644 --- a/packages/component/src/components/page-list/all-page.tsx +++ b/packages/component/src/components/page-list/all-page.tsx @@ -108,6 +108,7 @@ export const PageList = ({ onCreateNewPage, onCreateNewEdgeless, onImportFile, + fallback, }: PageListProps) => { const sorter = useSorter({ data: list, @@ -152,6 +153,7 @@ export const PageList = ({ data={sorter.data} /> + {sorter.data.length === 0 && fallback ? fallback : null} ); }; @@ -172,7 +174,8 @@ const TrashListHead = () => { export const PageListTrashView: React.FC<{ list: TrashListData[]; -}> = ({ list }) => { + fallback?: React.ReactNode; +}> = ({ list, fallback }) => { const t = useAFFiNEI18N(); const theme = useTheme(); @@ -237,6 +240,7 @@ export const PageListTrashView: React.FC<{ {ListItems} + {list.length === 0 && fallback ? fallback : null} ); }; diff --git a/packages/component/src/components/page-list/styles.ts b/packages/component/src/components/page-list/styles.ts index 763dc8cdf6..0d111931af 100644 --- a/packages/component/src/components/page-list/styles.ts +++ b/packages/component/src/components/page-list/styles.ts @@ -1,10 +1,11 @@ -import { TableRow } from '../..'; -import { Content, displayFlex, styled } from '../../'; +import { displayFlex, styled } from '../../styles'; +import { Content } from '../../ui/layout/content'; +import { TableRow } from '../../ui/table/table-row'; export const StyledTableContainer = styled('div')(({ theme }) => { return { height: 'calc(100vh - 52px)', - padding: '18px 32px 52px 32px', + padding: '18px 32px 80px 32px', maxWidth: '100%', overflowY: 'auto', [theme.breakpoints.down('sm')]: { diff --git a/packages/component/src/components/page-list/type.ts b/packages/component/src/components/page-list/type.ts index e06918dcc1..04b80856d1 100644 --- a/packages/component/src/components/page-list/type.ts +++ b/packages/component/src/components/page-list/type.ts @@ -41,6 +41,7 @@ export type TrashListData = { export type PageListProps = { isPublicWorkspace?: boolean; list: ListData[]; + fallback?: React.ReactNode; onCreateNewPage: () => void; onCreateNewEdgeless: () => void; onImportFile: () => void; diff --git a/packages/component/src/stories/page-list.stories.tsx b/packages/component/src/stories/page-list.stories.tsx index 6a956496a9..f57536669a 100644 --- a/packages/component/src/stories/page-list.stories.tsx +++ b/packages/component/src/stories/page-list.stories.tsx @@ -9,6 +9,7 @@ import { PageList } from '../components/page-list/all-page'; import { NewPageButton } from '../components/page-list/components/new-page-buttton'; import type { OperationCellProps } from '../components/page-list/operation-cell'; import { OperationCell } from '../components/page-list/operation-cell'; +import Empty from '../ui/empty/empty'; import { toast } from '../ui/toast'; export default { @@ -128,6 +129,19 @@ AffineAllPageList.args = { ], }; +export const AffineEmptyAllPageList: StoryFn = ({ + ...props +}) => ; + +AffineEmptyAllPageList.args = { + isPublicWorkspace: false, + onCreateNewPage: () => toast('Create new page'), + onCreateNewEdgeless: () => toast('Create new edgeless'), + onImportFile: () => toast('Import file'), + list: [], + fallback: , +}; + export const AffinePublicPageList: StoryFn = ({ ...props }) => ; diff --git a/packages/component/src/ui/empty/empty-svg.tsx b/packages/component/src/ui/empty/empty-svg.tsx index bf29ee34f8..310e773610 100644 --- a/packages/component/src/ui/empty/empty-svg.tsx +++ b/packages/component/src/ui/empty/empty-svg.tsx @@ -1,414 +1,154 @@ import SvgIcon from '@mui/material/SvgIcon'; import { memo } from 'react'; -export const EmptySvg = memo(function EmptySvg() { +export const EmptyLightSvg = memo(function EmptySvg() { return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + ); +}); + +export const EmptyDarkSvg = memo(function EmptySvg() { + return ( + + + + + + + + + + ); }); diff --git a/packages/component/src/ui/empty/empty.tsx b/packages/component/src/ui/empty/empty.tsx index 200f4c01cd..fefb66930d 100644 --- a/packages/component/src/ui/empty/empty.tsx +++ b/packages/component/src/ui/empty/empty.tsx @@ -1,6 +1,7 @@ +import { useTheme } from 'next-themes'; import type { CSSProperties } from 'react'; -import { EmptySvg } from './empty-svg'; +import { EmptyDarkSvg, EmptyLightSvg } from './empty-svg'; import { StyledEmptyContainer } from './style'; export type EmptyContentProps = { containerStyle?: CSSProperties; @@ -13,10 +14,12 @@ export const Empty = ({ description, descriptionStyle, }: EmptyContentProps) => { + const { theme } = useTheme(); + const isDark = theme === 'dark'; return ( - -

{description}

+ {isDark ? : } +

{description}

); }; diff --git a/packages/component/src/ui/empty/style.ts b/packages/component/src/ui/empty/style.ts index 0532b2a5ef..7f2727718a 100644 --- a/packages/component/src/ui/empty/style.ts +++ b/packages/component/src/ui/empty/style.ts @@ -9,8 +9,9 @@ export const StyledEmptyContainer = styled('div')<{ style?: CSSProperties }>( ...displayFlex('center', 'center'), flexDirection: 'column', svg: { - width: style?.width ?? '320px', - height: style?.height ?? '280px', + color: 'transparent', + width: style?.width ?? '248px', + height: style?.height ?? '216px', fontSize: style?.fontSize ?? 'inherit', }, };