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

feat(web): components update

Browse Source
This commit is contained in:
zhaoying
2026-03-07 12:18:11 +08:00
parent 4c18f9e858
commit 0b3b241436
44 changed files with 1881 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/components/Layout/AuthLayout.tsx
View File

@@ -1,8 +1,8 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-02 15:11:02
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-02 15:11:02
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 18:43:42
*/
/**
* AuthLayout Component
@@ -61,7 +61,7 @@ const AuthLayout: FC = () => {
{/* Header with breadcrumbs and user menu */}
<AppHeader />
{/* Main content area - renders child routes */}
<Content style={{ padding: '16px 17px 24px 16px', zIndex: 0 }}>
<Content style={{ padding: '0 12px 20px 12px', zIndex: 0 }}>
<Outlet />
</Content>
</Layout>

6
web/src/components/Layout/AuthSpaceLayout.tsx
View File

@@ -1,8 +1,8 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-02 15:11:43
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-02 15:11:43
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-05 14:57:08
*/
/**
* AuthSpaceLayout Component
@@ -63,7 +63,7 @@ const AuthSpaceLayout: FC = () => {
{/* Header with breadcrumbs and user menu configured for space mode */}
<AppHeader source="space" />
{/* Main content area for knowledge base pages - renders child routes */}
<Content style={{ padding: '16px 17px 24px 16px', zIndex: 0, height: 'calc(100vh - 64px)', overflowY: 'auto' }}>
<Content style={{ padding: '0 12px 12px 12px', zIndex: 0, height: 'calc(100vh - 64px)', overflowY: 'auto' }}>
<Outlet />
</Content>
</Layout>

9
web/src/components/Layout/BasicLayout.tsx
View File

@@ -1,8 +1,8 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-02 15:12:42
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-02 15:12:42
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-24 15:07:38
*/
/**
* BasicLayout Component
@@ -19,6 +19,7 @@
import { Outlet } from 'react-router-dom';
import { useEffect, type FC } from 'react';
import { Layout } from 'antd';
import { useUser } from '@/store/user';
@@ -36,10 +37,10 @@ const BasicLayout: FC = () => {
}, [getUserInfo, getStorageType]);
return (
<div className="rb:relative rb:h-full rb:w-full">
<Layout className="rb:min-h-screen!">
{/* Render child routes without additional UI */}
<Outlet />
</div>
</Layout>
)
};

41
web/src/components/Layout/LayoutBg.tsx
View File

@@ -1,41 +0,0 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-02 15:13:20
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-02 15:13:20
*/
/**
* LayoutBg Component
*
* A decorative background component that displays styled background elements.
* Provides visual aesthetics with positioned decorative shapes.
*
* @component
*/
import { type FC } from 'react';
import clsx from 'clsx';
import styles from './layout.module.css';
/**
* Background layout component with decorative elements.
* Renders a fixed full-screen background with styled shapes.
*/
const LayoutBg: FC = () => {
return (
<div className="rb:fixed rb:top-0 rb:right-0 rb:left-0 rb:bottom-0 rb:bg-[#FBFDFF]">
{/* Top section with decorative background shapes */}
<div className={clsx('rb:h-60', styles.bgTop)}>
{/* Left decorative element 1 */}
<div className={clsx(styles.left1)}></div>
{/* Left decorative element 2 */}
<div className={clsx(styles.left2)}></div>
{/* Right decorative element */}
<div className={clsx(styles.right1)}></div>
</div>
</div>
)
};
export default LayoutBg;

70
web/src/components/Layout/PageHeader.tsx Normal file
View File

@@ -0,0 +1,70 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-10 11:08:27
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-24 15:25:14
*/
/*
* PageHeader Component
*
* A reusable page header component that provides a consistent layout for page titles,
* subtitles, and action buttons across the application.
*
* Features:
* - Displays a main title and optional subtitle
* - Supports custom action buttons or extra content on the right side
* - Fixed height (64px) with responsive layout
* - Text overflow handling with ellipsis
* - Consistent spacing and styling using Tailwind CSS
*/
import { type FC, type ReactNode } from 'react';
import { Layout, Flex } from 'antd';
import clsx from 'clsx';
const { Header } = Layout;
interface ConfigHeaderProps {
avatarUrl?: string | null;
avatarText?: string;
avatarClassName?: string;
title?: ReactNode | string;
operation?: ReactNode;
extra?: ReactNode;
centerContent?: ReactNode;
}
const PageHeader: FC<ConfigHeaderProps> = ({
avatarUrl,
avatarText,
avatarClassName,
title,
operation,
extra,
centerContent
}) => {
return (
// Main header container: full width, 64px height, flex layout with space between
<Header className="rb:w-full rb:h-16 rb:flex rb:items-center rb:justify-between rb:gap-6 rb:px-4! rb:bg-[#FFFFFF]!">
<Flex align="center" gap={8}>
{avatarUrl
? <img src={avatarUrl} alt={avatarUrl} className="rb:size-8 rb:rounded-lg rb:mr-2" />
: avatarText
? <Flex align="center" justify="center" className={clsx(avatarClassName, "rb:size-8 rb:rounded-lg rb:text-[24px] rb:text-[#ffffff] rb:bg-[#155EEF] rb:mr-2")}>{avatarText}</Flex> : null
}
{/* Left section: Title and subtitle */}
<div>
{/* Main title: 18px font, semibold, [#212332] color, single line with ellipsis */}
<div className="rb:leading-5 rb:text-[14px] rb:text-[#212332] rb:font-medium rb:wrap-break-word rb:line-clamp-1">{title}</div>
</div>
{operation}
</Flex>
{centerContent}
{/* Right section: Extra content (buttons, filters, etc.) */}
<Flex align="center" gap={12}>
{extra}
</Flex>
</Header>
);
};
export default PageHeader;

37
web/src/components/Layout/layout.module.css
View File

@@ -1,37 +0,0 @@
.bg-top {
width: 100%;
height: 240px;
background: linear-gradient(to bottom, rgba(229, 242, 254, 1), rgba(251, 253, 255, 1));
opacity: 0.8;
}
.left1 {
width: 748px;
height: 354px;
background: radial-gradient(circle, rgba(138, 239, 255, 1) 100%, rgba(232, 244, 255, 0.71) 100%);
opacity: 0.24;
filter: blur(50px);
position: absolute;
left: -374px;
top: -187px;
}
.left2 {
width: 558px;
height: 504px;
background: radial-gradient(circle, #155EEF 0%, rgba(232, 244, 255, 0) 100%);
opacity: 0.22399999999999998;
filter: blur(50px);
position: absolute;
left: -279px;
top: -252px;
}
.right1 {
width: 470px;
height: 474px;
background: radial-gradient(circle, rgba(21, 94, 239, 1) 0%, rgba(232, 244, 255, 0) 100%);
opacity: 0.32;
filter: blur(50px);
position: absolute;
right: -235px;
top: -237px;
}