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

86
web/src/components/Header/UserInfoModal.tsx
View File

@@ -15,7 +15,7 @@
*/
import { forwardRef, useImperativeHandle, useState, useRef } from 'react';
import { Button, Space } from 'antd';
import { Button, Flex, Space } from 'antd';
import { UnlockOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
@@ -79,49 +79,67 @@ const UserInfoModal = forwardRef<UserInfoModalRef>((_props, ref) => {
footer={null}
>
{/* Basic Information Section */}
<div className="rb:text-[#5B6167] rb:font-medium">{t('header.basicInfo')}</div>
{/* Username */}
<div className="rb:flex rb:justify-between rb:text-[#5B6167] rb:text-[14px] rb:leading-5 rb:mb-3 rb:mt-3">
<span className="rb:whitespace-nowrap">{t('user.username')}</span>
<span className="rb:text-[#212332]">{user.username}</span>
</div>
{/* Email */}
<div className="rb:flex rb:justify-between rb:text-[#5B6167] rb:text-[14px] rb:leading-5 rb:mb-3">
<span className="rb:whitespace-nowrap">{t('user.email')}</span>
<Space size={8} className="rb:text-[#212332]">
{user.email}
<div
className="rb:size-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/editBorder.svg')] rb:hover:bg-[url('@/assets/images/editBg.svg')]"
onClick={handleEditEmail}
></div>
</Space>
</div>
{/* Role */}
<div className="rb:flex rb:justify-between rb:text-[#5B6167] rb:text-[14px] rb:leading-5 rb:mb-3">
<span className="rb:whitespace-nowrap">{t('user.role')}</span>
<span className="rb:text-[#212332]">{user.is_superuser ? t('user.superuser') : t('user.normalUser')}</span>
</div>
{/* Created Date */}
<div className="rb:flex rb:justify-between rb:text-[#5B6167] rb:text-[14px] rb:leading-5 rb:mb-3">
<span className="rb:whitespace-nowrap">{t('user.createdAt')}</span>
<span className="rb:text-[#212332]">{formatDateTime(user.created_at, 'YYYY-MM-DD HH:mm:ss')}</span>
</div>
<Flex vertical gap={12}>
<div className="rb:text-[#5B6167] rb:font-medium">{t('header.basicInfo')}</div>
{/* Username */}
<Flex
justify="space-between"
className="rb:text-[#5B6167] rb:leading-5"
>
<span className="rb:whitespace-nowrap">{t('user.username')}</span>
<span className="rb:text-[#212332]">{user.username}</span>
</Flex>
{/* Email */}
<Flex
justify="space-between"
className="rb:text-[#5B6167] rb:leading-5"
>
<span className="rb:whitespace-nowrap">{t('user.email')}</span>
<Space size={8} className="rb:text-[#212332]">
{user.email}
<div
className="rb:size-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/editBorder.svg')] rb:hover:bg-[url('@/assets/images/editBg.svg')]"
onClick={handleEditEmail}
></div>
</Space>
</Flex>
{/* Role */}
<Flex
justify="space-between"
className="rb:text-[#5B6167] rb:leading-5"
>
<span className="rb:whitespace-nowrap">{t('user.role')}</span>
<span className="rb:text-[#212332]">{user.is_superuser ? t('user.superuser') : t('user.normalUser')}</span>
</Flex>
{/* Created Date */}
<Flex
justify="space-between"
className="rb:text-[#5B6167] rb:leading-5"
>
<span className="rb:whitespace-nowrap">{t('user.createdAt')}</span>
<span className="rb:text-[#212332]">{formatDateTime(user.created_at, 'YYYY-MM-DD HH:mm:ss')}</span>
</Flex>
</Flex>
{/* Security Settings Section */}
<div className="rb:text-[#5B6167] rb:font-medium rb:mt-6">{t('header.securitySettings')}</div>
<div className="rb:text-[#5B6167] rb:font-medium rb:mt-6 rb:mb-3">{t('header.securitySettings')}</div>
{/* Password Change Card */}
<div className="rb:mt-3 rb:bg-[#F0F3F8] rb:p-[10px_12px] rb:rounded-md rb:flex rb:items-center rb:justify-between rb:gap-2">
<div className="rb:flex rb:items-center rb:gap-3">
<Flex
align="center"
justify="space-between"
gap={8}
className="rb:bg-[#F0F3F8] rb:px-3! rb:py-2.5! rb:rounded-md"
>
<Flex align="center" gap={12}>
<UnlockOutlined className="rb:text-[24px]" />
<div>
<div className="rb:leading-5">{t('header.changePassword')}</div>
<div className="rb:text-[#5B6167] rb:text-[12px] rb:mt-1 rb:leading-4">{t('header.changePasswordDesc')}</div>
</div>
</div>
</Flex>
<Button onClick={() => resetPasswordModalRef.current?.handleOpen(user)}>{t('common.change')}</Button>
</div>
</Flex>
<ResetPasswordModal
ref={resetPasswordModalRef}

16
web/src/components/Header/index.module.css
View File

@@ -1,13 +1,11 @@
.header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 46px 16px 21px;
padding: 16px 24px 16px 20px;
height: 64px;
border-bottom: 1px solid #EAECEE;
color: #212332;
z-index: 0;
line-height: 32px;
font-size: 14px;
}
.title {
@@ -17,4 +15,14 @@
}
.header :global(.ant-breadcrumb) {
line-height: 31px;
}
.header :global(.ant-breadcrumb .ant-breadcrumb-item a) {
height: inherit;
color: #5B6167;
font-weight: normal;
}
.header :global(.ant-breadcrumb .ant-breadcrumb-separator:nth-last-child(2)),
.header :global(.ant-breadcrumb .ant-breadcrumb-item:last-child a) {
color: #212332;
font-weight: 600;
}

10
web/src/components/Header/index.tsx
View File

@@ -1,8 +1,8 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-02 15:07:49
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-02 15:07:49
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-05 13:43:59
*/
/**
* AppHeader Component
@@ -121,7 +121,7 @@ const AppHeader: FC<{source?: 'space' | 'manage';}> = ({source = 'manage'}) => {
* - Disables navigation for the last breadcrumb item
*/
const formatBreadcrumbNames = () => {
return breadcrumbs.map((menu, index) => {
return breadcrumbs.filter(item => item.type !== 'group').map((menu, index) => {
const item: any = {
title: menu.i18nKey ? t(menu.i18nKey) : menu.label,
};
@@ -150,14 +150,14 @@ const AppHeader: FC<{source?: 'space' | 'manage';}> = ({source = 'manage'}) => {
return (
<Header className={styles.header}>
{/* Breadcrumb navigation */}
<Breadcrumb separator=">" items={formatBreadcrumbNames() as BreadcrumbProps['items']} />
<Breadcrumb separator="<" items={formatBreadcrumbNames() as BreadcrumbProps['items']} className="rb:font-medium!" />
{/* User info dropdown menu */}
<Dropdown
menu={{
items: userMenuItems
}}
>
<div className="rb:cursor-pointer">{user.username}</div>
<div className="rb:cursor-pointer rb:font-medium">{user.username}</div>
</Dropdown>
<SettingModal
ref={settingModalRef}