feat: Add base project structure with API and web components
This commit is contained in:
Ke Sun
91
web/src/components/Header/SettingModal.tsx
Normal file
91
web/src/components/Header/SettingModal.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
import { forwardRef, useImperativeHandle, useState } from 'react';
|
||||
import { Form, Select } from 'antd';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import RbModal from '@/components/RbModal'
|
||||
import { useI18n } from '@/store/locale'
|
||||
import { timezones } from '@/utils/timezones'
|
||||
|
||||
const FormItem = Form.Item;
|
||||
export interface SettingModalRef {
|
||||
handleOpen: () => void;
|
||||
handleClose: () => void;
|
||||
}
|
||||
|
||||
const SettingModal = forwardRef<SettingModalRef>((_props, ref) => {
|
||||
const { t } = useTranslation();
|
||||
const { changeLanguage, language, timeZone, changeTimeZone } = useI18n()
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const values = Form.useWatch([], form);
|
||||
|
||||
// 封装取消方法，添加关闭弹窗逻辑
|
||||
const handleClose = () => {
|
||||
setVisible(false);
|
||||
form.resetFields();
|
||||
};
|
||||
|
||||
const handleOpen = () => {
|
||||
form.setFieldsValue({ language, timeZone })
|
||||
setVisible(true);
|
||||
};
|
||||
// 封装保存方法，添加提交逻辑
|
||||
const handleSave = () => {
|
||||
form
|
||||
.validateFields()
|
||||
.then(() => {
|
||||
const { language: newLanguage, timeZone: newTimeZone } = values
|
||||
if (newLanguage !== language) {
|
||||
changeLanguage(newLanguage);
|
||||
}
|
||||
changeTimeZone(newTimeZone)
|
||||
handleClose()
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('err', err)
|
||||
});
|
||||
}
|
||||
|
||||
// 暴露给父组件的方法
|
||||
useImperativeHandle(ref, () => ({
|
||||
handleOpen,
|
||||
handleClose
|
||||
}));
|
||||
return (
|
||||
<RbModal
|
||||
title={t('header.setting')}
|
||||
open={visible}
|
||||
onCancel={handleClose}
|
||||
okText={t('common.save')}
|
||||
onOk={handleSave}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
>
|
||||
{/* 中英文切换 */}
|
||||
<FormItem
|
||||
name="language"
|
||||
label={t('header.language')}
|
||||
>
|
||||
<Select
|
||||
options={['zh', 'en'].map(key => ({ label: t(`header.${key}`), value: key }))}
|
||||
/>
|
||||
</FormItem>
|
||||
{/* 时区切换 */}
|
||||
<FormItem
|
||||
name="timeZone"
|
||||
label={t('header.timeZone')}
|
||||
rules={[{ required: true, message: t('common.pleaseEnter') }]}
|
||||
>
|
||||
<Select
|
||||
options={timezones.map(key => ({ label: t(`timezones.${key}`), value: key }))}
|
||||
/>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</RbModal>
|
||||
);
|
||||
});
|
||||
|
||||
export default SettingModal;
|
||||
83
web/src/components/Header/UserInfoModal.tsx
Normal file
83
web/src/components/Header/UserInfoModal.tsx
Normal file
@@ -0,0 +1,83 @@
|
||||
import { forwardRef, useImperativeHandle, useState, useRef } from 'react';
|
||||
import { Button } from 'antd';
|
||||
import { UnlockOutlined } from '@ant-design/icons';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useUser } from '@/store/user';
|
||||
|
||||
import RbModal from '@/components/RbModal'
|
||||
import { formatDateTime } from '@/utils/format';
|
||||
import ResetPasswordModal from '@/views/UserManagement/components/ResetPasswordModal'
|
||||
import type { ResetPasswordModalRef } from '@/views/UserManagement/types'
|
||||
|
||||
export interface UserInfoModalRef {
|
||||
handleOpen: () => void;
|
||||
handleClose: () => void;
|
||||
}
|
||||
|
||||
const UserInfoModal = forwardRef<UserInfoModalRef>((_props, ref) => {
|
||||
const { t } = useTranslation();
|
||||
const resetPasswordModalRef = useRef<ResetPasswordModalRef>(null)
|
||||
const { user } = useUser();
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
// 封装取消方法，添加关闭弹窗逻辑
|
||||
const handleClose = () => {
|
||||
setVisible(false);
|
||||
};
|
||||
|
||||
const handleOpen = () => {
|
||||
setVisible(true);
|
||||
};
|
||||
|
||||
// 暴露给父组件的方法
|
||||
useImperativeHandle(ref, () => ({
|
||||
handleOpen,
|
||||
handleClose
|
||||
}));
|
||||
return (
|
||||
<RbModal
|
||||
title={t('header.userInfo')}
|
||||
open={visible}
|
||||
onCancel={handleClose}
|
||||
footer={null}
|
||||
>
|
||||
<div className="rb:text-[#5B6167] rb:font-medium">{t('header.basicInfo')}</div>
|
||||
|
||||
<div className="rb:flex rb:justify-between rb:text-[#5B6167] rb:text-[14px] rb:leading-[20px] rb:mb-[12px] rb:mt-[12px]">
|
||||
<span className="rb:whitespace-nowrap">{t('user.username')}</span>
|
||||
<span className="rb:text-[#212332]">{user.username}</span>
|
||||
</div>
|
||||
<div className="rb:flex rb:justify-between rb:text-[#5B6167] rb:text-[14px] rb:leading-[20px] rb:mb-[12px]">
|
||||
<span className="rb:whitespace-nowrap">{t('user.email')}</span>
|
||||
<span className="rb:text-[#212332]">{user.email}</span>
|
||||
</div>
|
||||
<div className="rb:flex rb:justify-between rb:text-[#5B6167] rb:text-[14px] rb:leading-[20px] rb:mb-[12px]">
|
||||
<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>
|
||||
<div className="rb:flex rb:justify-between rb:text-[#5B6167] rb:text-[14px] rb:leading-[20px] rb:mb-[12px]">
|
||||
<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>
|
||||
<div className="rb:text-[#5B6167] rb:font-medium rb:mt-[24px]">{t('header.securitySettings')}</div>
|
||||
|
||||
<div className="rb:mt-[12px] rb:bg-[#F0F3F8] rb:p-[10px_12px] rb:rounded-[6px] rb:flex rb:items-center rb:justify-between rb:gap-[8px]">
|
||||
<div className="rb:flex rb:items-center rb:gap-[12px]">
|
||||
<UnlockOutlined className="rb:text-[24px]" />
|
||||
<div>
|
||||
<div className="rb:leading-[20px]">{t('header.changePassword')}</div>
|
||||
<div className="rb:text-[#5B6167] rb:text-[12px] rb:mt-[4px] rb:leading-[16px]">{t('header.changePasswordDesc')}</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button onClick={() => resetPasswordModalRef.current?.handleOpen(user)}>{t('common.change')}</Button>
|
||||
</div>
|
||||
|
||||
<ResetPasswordModal
|
||||
ref={resetPasswordModalRef}
|
||||
source="changePassword"
|
||||
/>
|
||||
</RbModal>
|
||||
);
|
||||
});
|
||||
|
||||
export default UserInfoModal;
|
||||
20
web/src/components/Header/index.module.css
Normal file
20
web/src/components/Header/index.module.css
Normal file
@@ -0,0 +1,20 @@
|
||||
.header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 16px 46px 16px 21px;
|
||||
height: 64px;
|
||||
border-bottom: 1px solid #EAECEE;
|
||||
color: #212332;
|
||||
z-index: 0;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.title {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
.header :global(.ant-breadcrumb) {
|
||||
line-height: 31px;
|
||||
}
|
||||
106
web/src/components/Header/index.tsx
Normal file
106
web/src/components/Header/index.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
import { type FC, useRef } from 'react';
|
||||
import { Layout, Dropdown, Space, Breadcrumb } from 'antd';
|
||||
import type { MenuProps, BreadcrumbProps } from 'antd';
|
||||
import { UserOutlined, LogoutOutlined, SettingOutlined } from '@ant-design/icons';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useUser } from '@/store/user';
|
||||
import { useMenu } from '@/store/menu';
|
||||
import styles from './index.module.css'
|
||||
import SettingModal, { type SettingModalRef } from './SettingModal'
|
||||
import UserInfoModal, { type UserInfoModalRef } from './UserInfoModal'
|
||||
const { Header } = Layout;
|
||||
|
||||
const AppHeader: FC<{source?: 'space' | 'manage';}> = ({source = 'manage'}) => {
|
||||
const { t } = useTranslation();
|
||||
const settingModalRef = useRef<SettingModalRef>(null)
|
||||
const userInfoModalRef = useRef<UserInfoModalRef>(null)
|
||||
|
||||
const { user, logout } = useUser();
|
||||
const { allBreadcrumbs } = useMenu();
|
||||
const breadcrumbs = allBreadcrumbs[source] || [];
|
||||
|
||||
// 处理退出登录
|
||||
const handleLogout = () => {
|
||||
logout()
|
||||
};
|
||||
|
||||
// 用户下拉菜单配置
|
||||
const userMenuItems: MenuProps['items'] = [
|
||||
{
|
||||
key: '1',
|
||||
label: (<>
|
||||
<div>{user.username}</div>
|
||||
<div className="rb:text-[12px] rb:text-[#5B6167] rb:mt-[8px]">{user.email}</div>
|
||||
</>),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
icon: <UserOutlined />,
|
||||
label: t('header.userInfo'),
|
||||
onClick: () => {
|
||||
userInfoModalRef.current?.handleOpen()
|
||||
},
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
icon: <SettingOutlined />,
|
||||
label: t('header.settings'),
|
||||
onClick: () => {
|
||||
settingModalRef.current?.handleOpen()
|
||||
},
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
key: '6',
|
||||
icon: <LogoutOutlined />,
|
||||
label: t('header.logout'),
|
||||
danger: true,
|
||||
onClick: handleLogout,
|
||||
},
|
||||
];
|
||||
const formatBreadcrumbNames = () => {
|
||||
return breadcrumbs.map((menu, index) => ({
|
||||
title: menu.i18nKey ? t(menu.i18nKey) : menu.label,
|
||||
path: index === breadcrumbs.length - 1 ? undefined : menu.path
|
||||
}))
|
||||
}
|
||||
return (
|
||||
<Header className={styles.header}>
|
||||
<Breadcrumb separator=">" items={formatBreadcrumbNames() as BreadcrumbProps['items']} />
|
||||
{/* 语言切换和主题切换按钮 */}
|
||||
<Space>
|
||||
{/* <Button
|
||||
size="small"
|
||||
type="default"
|
||||
onClick={handleLanguageChange}
|
||||
>
|
||||
{t(`language.${language === 'en' ? 'zh' : 'en'}`)}
|
||||
</Button> */}
|
||||
|
||||
{/* 用户信息下拉菜单 */}
|
||||
<Dropdown
|
||||
menu={{
|
||||
items: userMenuItems
|
||||
}}
|
||||
>
|
||||
<div className="rb:cursor-pointer">{user.username}</div>
|
||||
</Dropdown>
|
||||
</Space>
|
||||
<SettingModal
|
||||
ref={settingModalRef}
|
||||
/>
|
||||
<UserInfoModal
|
||||
ref={userInfoModalRef}
|
||||
/>
|
||||
</Header>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppHeader;
|
||||
Reference in New Issue
Block a user