File size: 2,335 Bytes
68ed806 b941fd0 88e5a61 74ade83 503735c 88e5a61 53f091c f850783 3951bd3 598945f 53f091c 503735c 88e5a61 503735c 7c4aa10 503735c 88e5a61 53f091c 598945f 88e5a61 74ade83 f850783 74ade83 88e5a61 53f091c 503735c b941fd0 503735c 53f091c 503735c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
import { useTranslate } from '@/hooks/common-hooks';
import { DownOutlined, GithubOutlined } from '@ant-design/icons';
import { Dropdown, MenuProps, Space } from 'antd';
import camelCase from 'lodash/camelCase';
import React from 'react';
import User from '../user';
import { useTheme } from '@/components/theme-provider';
import { LanguageList, LanguageMap } from '@/constants/common';
import { useChangeLanguage } from '@/hooks/logic-hooks';
import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
import { MoonIcon, SunIcon } from 'lucide-react';
import styled from './index.less';
const Circle = ({ children, ...restProps }: React.PropsWithChildren) => {
return (
<div {...restProps} className={styled.circle}>
{children}
</div>
);
};
const handleGithubCLick = () => {
window.open('https://github.com/infiniflow/ragflow', 'target');
};
const RightToolBar = () => {
const { t } = useTranslate('common');
const changeLanguage = useChangeLanguage();
const { setTheme, theme } = useTheme();
const {
data: { language = 'English' },
} = useFetchUserInfo();
const handleItemClick: MenuProps['onClick'] = ({ key }) => {
changeLanguage(key);
};
const items: MenuProps['items'] = LanguageList.map((x) => ({
key: x,
label: <span>{LanguageMap[x as keyof typeof LanguageMap]}</span>,
})).reduce<MenuProps['items']>((pre, cur) => {
return [...pre!, { type: 'divider' }, cur];
}, []);
const onMoonClick = React.useCallback(() => {
setTheme('light');
}, [setTheme]);
const onSunClick = React.useCallback(() => {
setTheme('dark');
}, [setTheme]);
return (
<div className={styled.toolbarWrapper}>
<Space wrap size={16}>
<Dropdown menu={{ items, onClick: handleItemClick }} placement="bottom">
<Space className={styled.language}>
<b>{t(camelCase(language))}</b>
<DownOutlined />
</Space>
</Dropdown>
<Circle>
<GithubOutlined onClick={handleGithubCLick} />
</Circle>
<Circle>
{theme === 'dark' ? (
<MoonIcon onClick={onMoonClick} size={20} />
) : (
<SunIcon onClick={onSunClick} size={20} />
)}
</Circle>
<User></User>
</Space>
</div>
);
};
export default RightToolBar;
|