From 63e498ac79934f0e84fbfaea050e2b48adcbf6bd Mon Sep 17 00:00:00 2001 From: balibabu Date: Thu, 7 Mar 2024 19:13:16 +0800 Subject: [PATCH] feat: add UserSetting and set height of MoreIcon to 24px and replace logo (#111) * feat: replace logo * feat: set height of MoreIcon to 24px * feat: add UserSetting --- web/src/assets/svg/logo.svg | 32 +++++++++-- web/src/constants/setting.ts | 17 ++++++ web/src/layouts/components/header/index.less | 4 ++ web/src/layouts/components/header/index.tsx | 10 +++- web/src/layouts/components/user/index.tsx | 2 +- web/src/less/mixins.less | 4 ++ web/src/pages/add-knowledge/constant.ts | 1 - web/src/pages/chat/chat-container/index.tsx | 2 +- .../pages/knowledge/knowledge-card/index.less | 4 ++ .../pages/knowledge/knowledge-card/index.tsx | 19 +++---- web/src/pages/user-setting/constants.tsx | 16 ++++++ web/src/pages/user-setting/index.tsx | 14 +++++ .../user-setting/setting-model/index.tsx | 5 ++ .../user-setting/setting-password/index.tsx | 5 ++ .../user-setting/setting-profile/index.tsx | 5 ++ .../pages/user-setting/setting-team/index.tsx | 5 ++ web/src/pages/user-setting/sidebar/index.tsx | 57 +++++++++++++++++++ web/src/routes.ts | 23 ++++++++ 18 files changed, 205 insertions(+), 20 deletions(-) create mode 100644 web/src/constants/setting.ts create mode 100644 web/src/pages/user-setting/constants.tsx create mode 100644 web/src/pages/user-setting/index.tsx create mode 100644 web/src/pages/user-setting/setting-model/index.tsx create mode 100644 web/src/pages/user-setting/setting-password/index.tsx create mode 100644 web/src/pages/user-setting/setting-profile/index.tsx create mode 100644 web/src/pages/user-setting/setting-team/index.tsx create mode 100644 web/src/pages/user-setting/sidebar/index.tsx diff --git a/web/src/assets/svg/logo.svg b/web/src/assets/svg/logo.svg index 8e7968d2..54167d2f 100644 --- a/web/src/assets/svg/logo.svg +++ b/web/src/assets/svg/logo.svg @@ -1,5 +1,29 @@ - - + + + + + + + + + + \ No newline at end of file diff --git a/web/src/constants/setting.ts b/web/src/constants/setting.ts new file mode 100644 index 00000000..915a2d6a --- /dev/null +++ b/web/src/constants/setting.ts @@ -0,0 +1,17 @@ +export const UserSettingBaseKey = 'user-setting'; + +export enum UserSettingRouteKey { + Profile = 'profile', + Password = 'password', + Model = 'model', + Team = 'team', + Logout = 'logout', +} + +export const UserSettingRouteMap = { + [UserSettingRouteKey.Profile]: 'Profile', + [UserSettingRouteKey.Password]: 'Password', + [UserSettingRouteKey.Model]: 'Model Providers', + [UserSettingRouteKey.Team]: 'Team', + [UserSettingRouteKey.Logout]: 'Log out', +}; diff --git a/web/src/layouts/components/header/index.less b/web/src/layouts/components/header/index.less index 9ef620f6..93cc794f 100644 --- a/web/src/layouts/components/header/index.less +++ b/web/src/layouts/components/header/index.less @@ -12,6 +12,10 @@ border-color: #1677ff; } +.logoWrapper { + .pointerCursor; +} + .appIcon { vertical-align: middle; } diff --git a/web/src/layouts/components/header/index.tsx b/web/src/layouts/components/header/index.tsx index 210c823b..bb6da36a 100644 --- a/web/src/layouts/components/header/index.tsx +++ b/web/src/layouts/components/header/index.tsx @@ -6,7 +6,7 @@ import Toolbar from '../right-toolbar'; import styles from './index.less'; -import { useMemo } from 'react'; +import { useCallback, useMemo } from 'react'; import { useLocation, useNavigate } from 'umi'; const { Header } = Layout; @@ -37,6 +37,10 @@ const RagHeader = () => { navigate(path); }; + const handleLogoClick = useCallback(() => { + navigate('/'); + }, [navigate]); + return (
{ height: '72px', }} > - + - +
RagFlow { }, [logout]); const toSetting = () => { - history.push('/setting'); + history.push('/user-setting'); }; const items: MenuProps['items'] = useMemo(() => { diff --git a/web/src/less/mixins.less b/web/src/less/mixins.less index 734924b2..85c808a3 100644 --- a/web/src/less/mixins.less +++ b/web/src/less/mixins.less @@ -29,3 +29,7 @@ background-color: #f2f2f2; } } + +.pointerCursor() { + cursor: pointer; +} diff --git a/web/src/pages/add-knowledge/constant.ts b/web/src/pages/add-knowledge/constant.ts index fb0e5594..f68a7d0f 100644 --- a/web/src/pages/add-knowledge/constant.ts +++ b/web/src/pages/add-knowledge/constant.ts @@ -4,7 +4,6 @@ export const routeMap = { [KnowledgeRouteKey.Dataset]: 'Dataset', [KnowledgeRouteKey.Testing]: 'Retrieval testing', [KnowledgeRouteKey.Configuration]: 'Configuration', - [KnowledgeRouteKey.TempTesting]: 'Testing', }; export enum KnowledgeDatasetRouteKey { diff --git a/web/src/pages/chat/chat-container/index.tsx b/web/src/pages/chat/chat-container/index.tsx index 79edd5a7..3201b08a 100644 --- a/web/src/pages/chat/chat-container/index.tsx +++ b/web/src/pages/chat/chat-container/index.tsx @@ -36,7 +36,7 @@ import styles from './index.less'; const reg = /(#{2}\d+\${2})/g; -const getChunkIndex = (match: string) => Number(match.slice(2, 3)); +const getChunkIndex = (match: string) => Number(match.slice(2, -2)); const rehypeWrapReference = () => { return function wrapTextTransform(tree: any) { diff --git a/web/src/pages/knowledge/knowledge-card/index.less b/web/src/pages/knowledge/knowledge-card/index.less index 43157d8e..5c37caa5 100644 --- a/web/src/pages/knowledge/knowledge-card/index.less +++ b/web/src/pages/knowledge/knowledge-card/index.less @@ -4,6 +4,10 @@ flex-direction: column; justify-content: space-between; + .delete { + height: 24px; + } + .content { display: flex; justify-content: space-between; diff --git a/web/src/pages/knowledge/knowledge-card/index.tsx b/web/src/pages/knowledge/knowledge-card/index.tsx index 8f7b0509..872aadbd 100644 --- a/web/src/pages/knowledge/knowledge-card/index.tsx +++ b/web/src/pages/knowledge/knowledge-card/index.tsx @@ -64,17 +64,16 @@ const KnowledgeCard = ({ item }: IProps) => {
} src={item.avatar} /> - - - + + - - + +
{item.name} diff --git a/web/src/pages/user-setting/constants.tsx b/web/src/pages/user-setting/constants.tsx new file mode 100644 index 00000000..5c9790af --- /dev/null +++ b/web/src/pages/user-setting/constants.tsx @@ -0,0 +1,16 @@ +import { UserSettingRouteKey } from '@/constants/setting'; +import { + ContainerOutlined, + DesktopOutlined, + PieChartOutlined, +} from '@ant-design/icons'; + +export const UserSettingIconMap = { + [UserSettingRouteKey.Profile]: , + [UserSettingRouteKey.Password]: , + [UserSettingRouteKey.Model]: , + [UserSettingRouteKey.Team]: , + [UserSettingRouteKey.Logout]: , +}; + +export * from '@/constants/setting'; diff --git a/web/src/pages/user-setting/index.tsx b/web/src/pages/user-setting/index.tsx new file mode 100644 index 00000000..ba364de6 --- /dev/null +++ b/web/src/pages/user-setting/index.tsx @@ -0,0 +1,14 @@ +import { Flex } from 'antd'; +import { Outlet } from 'umi'; +import SideBar from './sidebar'; + +const UserSetting = () => { + return ( + + + + + ); +}; + +export default UserSetting; diff --git a/web/src/pages/user-setting/setting-model/index.tsx b/web/src/pages/user-setting/setting-model/index.tsx new file mode 100644 index 00000000..fea0ea4a --- /dev/null +++ b/web/src/pages/user-setting/setting-model/index.tsx @@ -0,0 +1,5 @@ +const UserSettingModel = () => { + return
UserSettingModel
; +}; + +export default UserSettingModel; diff --git a/web/src/pages/user-setting/setting-password/index.tsx b/web/src/pages/user-setting/setting-password/index.tsx new file mode 100644 index 00000000..02ce07fc --- /dev/null +++ b/web/src/pages/user-setting/setting-password/index.tsx @@ -0,0 +1,5 @@ +const UserSettingPassword = () => { + return
UserSettingPassword
; +}; + +export default UserSettingPassword; diff --git a/web/src/pages/user-setting/setting-profile/index.tsx b/web/src/pages/user-setting/setting-profile/index.tsx new file mode 100644 index 00000000..10df96dc --- /dev/null +++ b/web/src/pages/user-setting/setting-profile/index.tsx @@ -0,0 +1,5 @@ +const UserSettingProfile = () => { + return
UserSettingProfile
; +}; + +export default UserSettingProfile; diff --git a/web/src/pages/user-setting/setting-team/index.tsx b/web/src/pages/user-setting/setting-team/index.tsx new file mode 100644 index 00000000..b4f16f9c --- /dev/null +++ b/web/src/pages/user-setting/setting-team/index.tsx @@ -0,0 +1,5 @@ +const UserSettingTeam = () => { + return
UserSettingTeam
; +}; + +export default UserSettingTeam; diff --git a/web/src/pages/user-setting/sidebar/index.tsx b/web/src/pages/user-setting/sidebar/index.tsx new file mode 100644 index 00000000..ed62b9c4 --- /dev/null +++ b/web/src/pages/user-setting/sidebar/index.tsx @@ -0,0 +1,57 @@ +import { useSecondPathName } from '@/hooks/routeHook'; +import type { MenuProps } from 'antd'; +import { Menu } from 'antd'; +import React, { useMemo } from 'react'; +import { useNavigate } from 'umi'; +import { + UserSettingBaseKey, + UserSettingIconMap, + UserSettingRouteKey, + UserSettingRouteMap, +} from '../constants'; + +type MenuItem = Required['items'][number]; + +function getItem( + label: React.ReactNode, + key: React.Key, + icon?: React.ReactNode, + children?: MenuItem[], + type?: 'group', +): MenuItem { + return { + key, + icon, + children, + label, + type, + } as MenuItem; +} + +const items: MenuItem[] = Object.values(UserSettingRouteKey).map((value) => + getItem(UserSettingRouteMap[value], value, UserSettingIconMap[value]), +); + +const SideBar = () => { + const navigate = useNavigate(); + const pathName = useSecondPathName(); + + const handleMenuClick: MenuProps['onClick'] = ({ key }) => { + navigate(`/${UserSettingBaseKey}/${key}`); + }; + + const selectedKeys = useMemo(() => { + return [pathName]; + }, [pathName]); + + return ( + + ); +}; + +export default SideBar; diff --git a/web/src/routes.ts b/web/src/routes.ts index aff5178c..0a3018ac 100644 --- a/web/src/routes.ts +++ b/web/src/routes.ts @@ -56,6 +56,29 @@ const routes = [ path: '/setting', component: '@/pages/setting', }, + { + path: '/user-setting', + component: '@/pages/user-setting', + routes: [ + { path: '/user-setting', redirect: '/user-setting/profile' }, + { + path: '/user-setting/profile', + component: '@/pages/user-setting/setting-profile', + }, + { + path: '/user-setting/password', + component: '@/pages/user-setting/setting-password', + }, + { + path: '/user-setting/model', + component: '@/pages/user-setting/setting-model', + }, + { + path: '/user-setting/team', + component: '@/pages/user-setting/setting-team', + }, + ], + }, { path: '/file', component: '@/pages/file',