From ee33bf71eb10b202a08537469dc3e8912cfd0589 Mon Sep 17 00:00:00 2001 From: balibabu Date: Fri, 22 Nov 2024 15:11:38 +0800 Subject: [PATCH] Feat: Add ProfileSetting page #3221 (#3588) ### What problem does this PR solve? Feat: Add ProfileSetting page #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality) --- web/src/components/ui/button.tsx | 2 +- web/src/constants/setting.ts | 21 +++-- web/src/pages/home/applications.tsx | 48 +++++++--- web/src/pages/home/datasets.tsx | 8 +- web/src/pages/home/header.tsx | 2 +- web/src/pages/profile-setting/hooks.tsx | 20 ++++ web/src/pages/profile-setting/index.tsx | 34 +++++++ web/src/pages/profile-setting/plan/index.tsx | 3 + .../pages/profile-setting/profile/index.tsx | 72 +++++++++++++++ .../pages/profile-setting/sidebar/hooks.tsx | 25 +++++ .../pages/profile-setting/sidebar/index.tsx | 92 +++++++++++++++++++ web/src/pages/profile-setting/team/index.tsx | 3 + web/src/routes.ts | 20 ++++ web/tailwind.config.js | 4 + web/tailwind.css | 8 ++ 15 files changed, 334 insertions(+), 28 deletions(-) create mode 100644 web/src/pages/profile-setting/hooks.tsx create mode 100644 web/src/pages/profile-setting/index.tsx create mode 100644 web/src/pages/profile-setting/plan/index.tsx create mode 100644 web/src/pages/profile-setting/profile/index.tsx create mode 100644 web/src/pages/profile-setting/sidebar/hooks.tsx create mode 100644 web/src/pages/profile-setting/sidebar/index.tsx create mode 100644 web/src/pages/profile-setting/team/index.tsx diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx index 74155f8a8e..bd2c5eb885 100644 --- a/web/src/components/ui/button.tsx +++ b/web/src/components/ui/button.tsx @@ -13,7 +13,7 @@ const buttonVariants = cva( destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90', outline: - 'border border-input bg-background hover:bg-accent hover:text-accent-foreground', + 'border border-colors-outline-sentiment-primary bg-background hover:bg-accent hover:text-accent-foreground', secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground', diff --git a/web/src/constants/setting.ts b/web/src/constants/setting.ts index 22c4735803..9cb05c1259 100644 --- a/web/src/constants/setting.ts +++ b/web/src/constants/setting.ts @@ -10,14 +10,19 @@ export enum UserSettingRouteKey { Logout = 'logout', } -export const UserSettingRouteMap = { - [UserSettingRouteKey.Profile]: 'Profile', - [UserSettingRouteKey.Password]: 'Password', - [UserSettingRouteKey.Model]: 'Model Providers', - [UserSettingRouteKey.System]: 'System Version', - [UserSettingRouteKey.Team]: 'Team', - [UserSettingRouteKey.Logout]: 'Log out', -}; +export const ProfileSettingBaseKey = 'profile-setting'; + +export enum ProfileSettingRouteKey { + Profile = 'profile', + Plan = 'plan', + Model = 'model', + System = 'system', + Api = 'api', + Team = 'team', + Prompt = 'prompt', + Chunk = 'chunk', + Logout = 'logout', +} // Please lowercase the file name export const IconMap = { diff --git a/web/src/pages/home/applications.tsx b/web/src/pages/home/applications.tsx index bd67fc83dc..c3ca5935e2 100644 --- a/web/src/pages/home/applications.tsx +++ b/web/src/pages/home/applications.tsx @@ -1,6 +1,8 @@ import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; +import { Segmented, SegmentedValue } from '@/components/ui/segmented '; import { ChevronRight, Cpu, MessageSquare, Search } from 'lucide-react'; +import { useMemo, useState } from 'react'; const applications = [ { @@ -34,24 +36,42 @@ const applications = [ ]; export function Applications() { + const [val, setVal] = useState('all'); + const options = useMemo(() => { + return [ + { + label: 'All', + value: 'all', + }, + { + label: 'Chat', + value: 'chat', + }, + { + label: 'Search', + value: 'search', + }, + { + label: 'Agent', + value: 'agent', + }, + ]; + }, []); + + const handleChange = (path: SegmentedValue) => { + setVal(path as string); + }; + return (

Applications

-
- - - - -
+
{[...Array(12)].map((_, i) => { diff --git a/web/src/pages/home/datasets.tsx b/web/src/pages/home/datasets.tsx index fea9a01db8..1f694052af 100644 --- a/web/src/pages/home/datasets.tsx +++ b/web/src/pages/home/datasets.tsx @@ -9,7 +9,7 @@ const datasets = [ files: '1,242 files', size: '152 MB', created: '12.02.2024', - image: '/image-3.png', + image: 'https://github.com/shadcn.png', }, { id: 2, @@ -17,7 +17,7 @@ const datasets = [ files: '1,242 files', size: '152 MB', created: '12.02.2024', - image: '/image.png', + image: 'https://github.com/shadcn.png', }, { id: 3, @@ -25,7 +25,7 @@ const datasets = [ files: '1,242 files', size: '152 MB', created: '12.02.2024', - image: '/rectangle-86.png', + image: 'https://github.com/shadcn.png', }, { id: 4, @@ -33,7 +33,7 @@ const datasets = [ files: '1,242 files', size: '152 MB', created: '12.02.2024', - image: '/image-2.png', + image: 'https://github.com/shadcn.png', }, ]; diff --git a/web/src/pages/home/header.tsx b/web/src/pages/home/header.tsx index bb0dbd74d9..2619b723d4 100644 --- a/web/src/pages/home/header.tsx +++ b/web/src/pages/home/header.tsx @@ -83,7 +83,7 @@ export function HomeHeader() { options={options} value={currentPath} onChange={handleChange} - className="bg-backgroundInverseStandard text-backgroundInverseStandard-foreground" + className="bg-colors-background-inverse-standard text-backgroundInverseStandard-foreground" >
diff --git a/web/src/pages/profile-setting/hooks.tsx b/web/src/pages/profile-setting/hooks.tsx new file mode 100644 index 0000000000..34fedfa13e --- /dev/null +++ b/web/src/pages/profile-setting/hooks.tsx @@ -0,0 +1,20 @@ +import { ProfileSettingRouteKey } from '@/constants/setting'; +import { useSecondPathName } from '@/hooks/route-hook'; + +export const useGetPageTitle = (): string => { + const pathName = useSecondPathName(); + + const LabelMap = { + [ProfileSettingRouteKey.Profile]: 'User profile', + [ProfileSettingRouteKey.Plan]: 'Plan & balance', + [ProfileSettingRouteKey.Model]: 'Model management', + [ProfileSettingRouteKey.System]: 'System', + [ProfileSettingRouteKey.Api]: 'Api', + [ProfileSettingRouteKey.Team]: 'Team management', + [ProfileSettingRouteKey.Prompt]: 'Prompt management', + [ProfileSettingRouteKey.Chunk]: 'Chunk method', + [ProfileSettingRouteKey.Logout]: 'Logout', + }; + + return LabelMap[pathName as ProfileSettingRouteKey]; +}; diff --git a/web/src/pages/profile-setting/index.tsx b/web/src/pages/profile-setting/index.tsx new file mode 100644 index 0000000000..bcae513305 --- /dev/null +++ b/web/src/pages/profile-setting/index.tsx @@ -0,0 +1,34 @@ +import { Button } from '@/components/ui/button'; +import { ArrowLeft } from 'lucide-react'; +import { Outlet } from 'umi'; +import { useGetPageTitle } from './hooks'; +import { SideBar } from './sidebar'; + +export default function ProfileSetting() { + const title = useGetPageTitle(); + return ( +
+
+
+ +
+
+

+ Profile & settings +

+
+
+ +
+ + +
+

{title}

+ +
+
+
+ ); +} diff --git a/web/src/pages/profile-setting/plan/index.tsx b/web/src/pages/profile-setting/plan/index.tsx new file mode 100644 index 0000000000..d6cd5869ae --- /dev/null +++ b/web/src/pages/profile-setting/plan/index.tsx @@ -0,0 +1,3 @@ +export default function Plan() { + return
plan
; +} diff --git a/web/src/pages/profile-setting/profile/index.tsx b/web/src/pages/profile-setting/profile/index.tsx new file mode 100644 index 0000000000..26bab91e8e --- /dev/null +++ b/web/src/pages/profile-setting/profile/index.tsx @@ -0,0 +1,72 @@ +import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; + +export default function Profile() { + return ( +
+ + + YW + + +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+ ); +} diff --git a/web/src/pages/profile-setting/sidebar/hooks.tsx b/web/src/pages/profile-setting/sidebar/hooks.tsx new file mode 100644 index 0000000000..9acc1d831e --- /dev/null +++ b/web/src/pages/profile-setting/sidebar/hooks.tsx @@ -0,0 +1,25 @@ +import { + ProfileSettingBaseKey, + ProfileSettingRouteKey, +} from '@/constants/setting'; +import { useLogout } from '@/hooks/login-hooks'; +import { useCallback } from 'react'; +import { useNavigate } from 'umi'; + +export const useHandleMenuClick = () => { + const navigate = useNavigate(); + const { logout } = useLogout(); + + const handleMenuClick = useCallback( + (key: ProfileSettingRouteKey) => () => { + if (key === ProfileSettingRouteKey.Logout) { + logout(); + } else { + navigate(`/${ProfileSettingBaseKey}/${key}`); + } + }, + [logout, navigate], + ); + + return { handleMenuClick }; +}; diff --git a/web/src/pages/profile-setting/sidebar/index.tsx b/web/src/pages/profile-setting/sidebar/index.tsx new file mode 100644 index 0000000000..21a6ad2f47 --- /dev/null +++ b/web/src/pages/profile-setting/sidebar/index.tsx @@ -0,0 +1,92 @@ +import { Button } from '@/components/ui/button'; +import { Label } from '@/components/ui/label'; +import { Switch } from '@/components/ui/switch'; +import { ProfileSettingRouteKey } from '@/constants/setting'; +import { useSecondPathName } from '@/hooks/route-hook'; +import { cn } from '@/lib/utils'; +import { + AlignEndVertical, + Banknote, + Box, + FileCog, + LayoutGrid, + LogOut, + User, +} from 'lucide-react'; +import { useHandleMenuClick } from './hooks'; + +const menuItems = [ + { + section: 'Account & collaboration', + items: [ + { icon: User, label: 'Profile', key: ProfileSettingRouteKey.Profile }, + { icon: LayoutGrid, label: 'Team', key: ProfileSettingRouteKey.Team }, + { icon: Banknote, label: 'Plan', key: ProfileSettingRouteKey.Plan }, + ], + }, + { + section: 'System configurations', + items: [ + { + icon: Box, + label: 'Model management', + key: ProfileSettingRouteKey.Model, + }, + { + icon: FileCog, + label: 'Prompt management', + key: ProfileSettingRouteKey.Prompt, + }, + { + icon: AlignEndVertical, + label: 'Chunking method', + key: ProfileSettingRouteKey.Chunk, + }, + ], + }, +]; + +export function SideBar() { + const pathName = useSecondPathName(); + const { handleMenuClick } = useHandleMenuClick(); + + return ( + + ); +} diff --git a/web/src/pages/profile-setting/team/index.tsx b/web/src/pages/profile-setting/team/index.tsx new file mode 100644 index 0000000000..ae342fd493 --- /dev/null +++ b/web/src/pages/profile-setting/team/index.tsx @@ -0,0 +1,3 @@ +export default function Team() { + return
team
; +} diff --git a/web/src/routes.ts b/web/src/routes.ts index 7300a2a343..e7c7545bc7 100644 --- a/web/src/routes.ts +++ b/web/src/routes.ts @@ -131,6 +131,26 @@ const routes = [ layout: false, component: '@/pages/home', }, + { + path: '/profile-setting', + layout: false, + component: '@/pages/profile-setting', + routes: [ + { path: '/profile-setting', redirect: '/profile-setting/profile' }, + { + path: '/profile-setting/profile', + component: '@/pages/profile-setting/profile', + }, + { + path: '/profile-setting/team', + component: '@/pages/profile-setting/team', + }, + { + path: '/profile-setting/plan', + component: '@/pages/profile-setting/plan', + }, + ], + }, ]; export default routes; diff --git a/web/tailwind.config.js b/web/tailwind.config.js index 619b1905e8..b37a574011 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -25,6 +25,10 @@ module.exports = { background: 'var(--background)', foreground: 'hsl(var(--foreground))', buttonBlueText: 'var(--button-blue-text)', + + 'colors-outline-sentiment-primary': + 'var(--colors-outline-sentiment-primary)', + primary: { DEFAULT: 'hsl(var(--primary))', foreground: 'hsl(var(--primary-foreground))', diff --git a/web/tailwind.css b/web/tailwind.css index 3213eae810..4e43b89e23 100644 --- a/web/tailwind.css +++ b/web/tailwind.css @@ -39,6 +39,10 @@ --background-inverse-standard-foreground: rgb(92, 81, 81); --button-blue-text: rgb(22, 119, 255); + + --colors-outline-sentiment-primary: rgba(127, 105, 255, 1); + + --colors-text-core-standard: rgba(127, 105, 255, 1); } .dark { @@ -108,6 +112,10 @@ --colors-background-neutral-standard: rgba(11, 10, 18, 1); --colors-background-neutral-strong: rgba(29, 26, 44, 1); --colors-background-neutral-weak: rgba(17, 16, 23, 1); + + --colors-outline-sentiment-primary: rgba(146, 118, 255, 1); + + --colors-text-core-standard: rgba(137, 126, 255, 1); } }