adai/MemoryBear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: add comments to the src/components directory

Browse Source
This commit is contained in:
zhaoying
2026-02-02 16:14:39 +08:00
parent 9a38e8a4a0
commit a191e32f71
55 changed files with 1417 additions and 375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
web/src/components/RbCard/Card.tsx
View File

@@ -1,24 +1,59 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-02 15:21:14
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-02 15:21:14
*/
/**
* RbCard Component
*
* A customizable card component that extends Ant Design's Card with:
* - Multiple header styles (border, borderless, borderBL, borderL)
* - Avatar support with image or custom component
* - Flexible padding and styling options
* - Tooltip support for long titles
* - Hover effects
*
* @component
*/
import { type FC, type ReactNode } from 'react'
import { Card, Tooltip } from 'antd';
import clsx from 'clsx';
/** Props interface for RbCard component */
interface RbCardProps {
/** Additional CSS classes for header */
headerClassName?: string;
/** Card title (string, ReactNode, or function) */
title?: string | ReactNode | (() => ReactNode);
/** Subtitle text displayed below title */
subTitle?: string | ReactNode;
/** Extra content displayed in header (top-right) */
extra?: ReactNode;
/** Card body content */
children?: ReactNode;
/** Custom avatar component */
avatar?: ReactNode;
/** Avatar image URL */
avatarUrl?: string | null;
/** Custom padding for card body */
bodyPadding?: string;
/** Additional CSS classes for body */
bodyClassName?: string;
/** Header style variant */
headerType?: 'border' | 'borderless' | 'borderBL' | 'borderL';
/** Background color */
bgColor?: string;
/** Card height */
height?: string;
/** Additional CSS classes */
className?: string;
/** Click handler */
onClick?: () => void;
}
/** Custom card component with flexible styling and header options */
const RbCard: FC<RbCardProps> = ({
headerClassName,
title,
@@ -35,6 +70,7 @@ const RbCard: FC<RbCardProps> = ({
className,
...props
}) => {
/** Calculate body padding based on header type and avatar presence */
const bodyClassName = bodyPadding
? `rb:p-[${bodyPadding}]!`
: headerType === 'borderL'
@@ -46,11 +82,13 @@ const RbCard: FC<RbCardProps> = ({
: (headerType === 'border' && !avatarUrl && !avatar) || headerType === 'borderBL'
? 'rb:p-[16px_16px_20px_16px]!'
: ''
return (
<Card
{...props}
title={typeof title === 'function' ? title() : title ?
<div className="rb:flex rb:items-center rb:gap-2">
{/* Avatar image or custom avatar component */}
{avatarUrl
? <img src={avatarUrl} className="rb:mr-3.25 rb:w-12 rb:h-12 rb:rounded-lg" />
: avatar ? avatar : null
@@ -63,7 +101,9 @@ const RbCard: FC<RbCardProps> = ({
}
)
}>
{/* Title with tooltip for overflow text */}
<Tooltip title={title}><div className="rb:w-full rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{title}</div></Tooltip>
{/* Optional subtitle */}
{subTitle && <div className="rb:text-[#5B6167] rb:text-[12px]">{subTitle}</div>}
</div>
</div> : null
@@ -73,10 +113,15 @@ const RbCard: FC<RbCardProps> = ({
header: clsx(
'rb:font-medium',
{
/** Borderless header style */
'rb:border-[0]! rb:text-[16px] rb:p-[0_16px]!': headerType === 'borderless',
/** Header with avatar */
'rb:border-[0]! rb:text-[16px] rb:p-[16px_16px_0_16px]!': avatarUrl || avatar,
/** Standard border header */
'rb:text-[18px] rb:p-[0]! rb:m-[0_20px]!': headerType === 'border' && !avatarUrl && !avatar,
/** Border bottom-left style */
"rb:m-[0_16px]! rb:p-[0]! rb:relative rb:before:content-[''] rb:before:w-[4px] rb:before:h-[16px] rb:before:bg-[#5B6167] rb:before:absolute rb:before:top-[50%] rb:before:left-[-16px] rb:before:translate-y-[-50%] rb:before:bg-[#5B6167]! rb:before:h-[16px]!": headerType === 'borderBL',
/** Border left style */
"rb:m-[0_16px]! rb:p-[0]! rb:leading-[20px] rb:min-h-[48px]! rb:relative rb:border-[0]! rb:before:content-[''] rb:before:w-[4px] rb:before:h-[16px] rb:before:bg-[#5B6167] rb:before:absolute rb:before:top-[50%] rb:before:left-[-16px] rb:before:translate-y-[-50%] rb:before:bg-[#5B6167]! rb:before:h-[16px]!": headerType === 'borderL',
},
headerClassName,

73
web/src/components/RbCard/index.tsx
View File

@@ -1,73 +0,0 @@
import { type FC, type ReactNode } from 'react'
import { Card } from 'antd';
import clsx from 'clsx';
interface RbCardProps {
title?: string | ReactNode;
subTitle?: string;
extra?: ReactNode;
children: ReactNode;
avatar?: ReactNode;
className?: string;
}
const RbCard: FC<RbCardProps> = ({
title,
subTitle,
extra,
children,
avatar,
className,
}) => {
if (avatar) {
return (
<Card
classNames={{
header: 'rb:p-[0]! rb:m-[0_20px]!',
body: 'rb:p-[16px_20px_16px_16px]',
}}
style={{
background: '#FBFDFF'
}}
>
{title &&
<div className={clsx("rb:text-[#212332] rb:text-[16px] rb:font-medium rb:flex rb:items-center rb:mb-[20px]", {
'rb:justify-between': extra
})}>
<div className="rb:flex rb:items-center">
<div className="rb:mr-[13px] rb:w-[48px] rb:h-[48px] rb:rounded-[8px] rb:overflow-hidden">{avatar}</div>
<div className="rb:truncate">{title}</div>
</div>
{subTitle && <div className="rb:text-[#5B6167] rb:text-[12px]">{subTitle}</div>}
{extra}
</div>
}
{children}
</Card>
)
}
return (
<Card
title={ title ?
<div className={clsx("rb:text-[#212332] rb:text-[18px] rb:font-medium rb:flex rb:items-center", {
'rb:justify-between': extra
})}>
<div className="rb:truncate">{title}</div>
{subTitle && <div className="rb:text-[#5B6167] rb:text-[12px]">{subTitle}</div>}
{extra}
</div> : null
}
classNames={{
header: 'rb:p-[0]! rb:m-[0_20px]!',
body: `rb:p-[16px_20px_20px_16px] ${className || ''}`,
}}
style={{
background: '#FBFDFF'
}}
>
{children}
</Card>
)
}
export default RbCard