zlei6/ragflow
1
0
Fork 0
mirror of https://github.com/infiniflow/ragflow.git synced 2026-07-20 14:41:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Added styles for empty states on the page. #10703 (#11588)

Browse Source 
### What problem does this PR solve?

Fix: Added styles for empty states on the page.
### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
This commit is contained in:
chanx
2025-11-28 14:03:20 +08:00
committed by GitHub
parent dbdda0fbab
commit 7d05d4ced7
29 changed files with 866 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
web/src/components/empty/empty.tsx
View File

@@ -2,79 +2,33 @@ import { cn } from '@/lib/utils';
import { t } from 'i18next';
import { useIsDarkTheme } from '../theme-provider';
import noDataIcon from './no data bri.svg';
import noDataIconDark from './no data.svg';
type EmptyProps = {
className?: string;
children?: React.ReactNode;
};
const EmptyIcon = () => {
const isDarkTheme = useIsDarkTheme();
import { Plus } from 'lucide-react';
import { useMemo } from 'react';
import SvgIcon from '../svg-icon';
import { EmptyCardData, EmptyCardType, EmptyType } from './constant';
import { EmptyCardProps, EmptyProps } from './interface';
const EmptyIcon = ({ name, width }: { name: string; width?: number }) => {
return (
<img
className="h-20"
src={isDarkTheme ? noDataIconDark : noDataIcon}
alt={t('common.noData')}
/>
);
return (
<svg
width="184"
height="152"
viewBox="0 0 184 152"
xmlns="http://www.w3.org/2000/svg"
>
<title>{t('common.noData')}</title>
<g fill="none" fillRule="evenodd">
<g transform="translate(24 31.67)">
<ellipse
fillOpacity=".8"
fill={isDarkTheme ? '#28282A' : '#F5F5F7'}
cx="67.797"
cy="106.89"
rx="67.797"
ry="12.668"
></ellipse>
<path
d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"
fill={isDarkTheme ? '#736960' : '#AEB8C2'}
></path>
<path
d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z"
fill="url(#linearGradient-1)"
transform="translate(13.56)"
></path>
<path
d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"
fill={isDarkTheme ? '#28282A' : '#F5F5F7'}
></path>
<path
d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"
fill={isDarkTheme ? '#45413A' : '#DCE0E6'}
></path>
</g>
<path
d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"
fill={isDarkTheme ? '#45413A' : '#DCE0E6'}
></path>
<g
transform="translate(149.65 15.383)"
fill={isDarkTheme ? '#222' : '#FFF'}
>
<ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815"></ellipse>
<path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z"></path>
</g>
</g>
</svg>
// <img
// className="h-20"
// src={isDarkTheme ? noDataIconDark : noDataIcon}
// alt={t('common.noData')}
// />
<SvgIcon name={name || 'empty/no-data-dark'} width={width || 42} />
);
};
const Empty = (props: EmptyProps) => {
const { className, children } = props;
const { className, children, type, text, iconWidth } = props;
const isDarkTheme = useIsDarkTheme();
const name = useMemo(() => {
return isDarkTheme
? `empty/no-${type || EmptyType.Data}-dark`
: `empty/no-${type || EmptyType.Data}-bri`;
}, [isDarkTheme, type]);
return (
<div
className={cn(
@@ -82,11 +36,12 @@ const Empty = (props: EmptyProps) => {
className,
)}
>
<EmptyIcon />
<EmptyIcon name={name} width={iconWidth} />
{!children && (
<div className="empty-text text-text-secondary">
{t('common.noData')}
<div className="empty-text text-text-secondary text-sm">
{text ||
(type === 'data' ? t('common.noData') : t('common.noResults'))}
</div>
)}
{children}
@@ -95,3 +50,65 @@ const Empty = (props: EmptyProps) => {
};
export default Empty;
export const EmptyCard = (props: EmptyCardProps) => {
const { icon, className, children, title, description, style } = props;
return (
<div
className={cn(
'flex flex-col gap-3 items-start justify-start border border-dashed border-border-button rounded-md p-5 w-fit',
className,
)}
style={style}
>
{icon}
{title && <div className="text-text-primary text-base">{title}</div>}
{description && (
<div className="text-text-secondary text-sm">{description}</div>
)}
{children}
</div>
);
};
export const EmptyAppCard = (props: {
type: EmptyCardType;
onClick?: () => void;
showIcon?: boolean;
className?: string;
size?: 'small' | 'large';
}) => {
const { type, showIcon, className } = props;
let defaultClass = '';
let style = {};
switch (props.size) {
case 'small':
style = { width: '256px' };
defaultClass = 'mt-1';
break;
case 'large':
style = { width: '480px' };
defaultClass = 'mt-5';
break;
default:
defaultClass = '';
break;
}
return (
<div className=" cursor-pointer " onClick={props.onClick}>
<EmptyCard
icon={showIcon ? EmptyCardData[type].icon : undefined}
title={EmptyCardData[type].title}
className={className}
style={style}
// description={EmptyCardData[type].description}
>
<div
className={cn(defaultClass, 'flex items-center justify-start w-full')}
>
<Plus size={24} />
</div>
</EmptyCard>
</div>
);
};