forked from infiniflow/ragflow
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat: Add ProfileSetting page infiniflow#3221 (infiniflow#3588)
### What problem does this PR solve? Feat: Add ProfileSetting page infiniflow#3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
- Loading branch information
Showing
15 changed files
with
334 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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]; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <div className="flex flex-col w-full h-screen bg-background text-foreground"> | ||
| <header className="flex items-center border-b"> | ||
| <div className="flex items-center border-r p-1.5"> | ||
| <Button variant="ghost" size="icon"> | ||
| <ArrowLeft className="w-5 h-5" /> | ||
| </Button> | ||
| </div> | ||
| <div className="p-4"> | ||
| <h1 className="text-2xl font-semibold tracking-tight"> | ||
| Profile & settings | ||
| </h1> | ||
| </div> | ||
| </header> | ||
|
|
||
| <div className="flex flex-1 bg-muted/50"> | ||
| <SideBar></SideBar> | ||
|
|
||
| <main className="flex-1 p-10"> | ||
| <h1 className="text-3xl font-bold mb-6"> {title}</h1> | ||
| <Outlet></Outlet> | ||
| </main> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export default function Plan() { | ||
| return <div>plan</div>; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <section> | ||
| <Avatar className="w-[120px] h-[120px] mb-6"> | ||
| <AvatarImage | ||
| src={ | ||
| 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg' | ||
| } | ||
| alt="Profile" | ||
| /> | ||
| <AvatarFallback>YW</AvatarFallback> | ||
| </Avatar> | ||
|
|
||
| <div className="space-y-6 max-w-[600px]"> | ||
| <div className="space-y-2"> | ||
| <label className="text-sm text-muted-foreground">User name</label> | ||
| <Input | ||
| defaultValue="yifanwu92" | ||
| className="bg-colors-background-inverse-weak" | ||
| /> | ||
| </div> | ||
|
|
||
| <div className="space-y-2"> | ||
| <label className="text-sm text-muted-foreground">Email</label> | ||
| <Input | ||
| defaultValue="[email protected]" | ||
| className="bg-colors-background-inverse-weak" | ||
| /> | ||
| </div> | ||
|
|
||
| <div className="space-y-2"> | ||
| <label className="text-sm text-muted-foreground">Language</label> | ||
| <Select defaultValue="english"> | ||
| <SelectTrigger className="bg-colors-background-inverse-weak"> | ||
| <SelectValue /> | ||
| </SelectTrigger> | ||
| <SelectContent> | ||
| <SelectItem value="english">English</SelectItem> | ||
| </SelectContent> | ||
| </Select> | ||
| </div> | ||
|
|
||
| <div className="space-y-2"> | ||
| <label className="text-sm text-muted-foreground">Timezone</label> | ||
| <Select defaultValue="utc9"> | ||
| <SelectTrigger className="bg-colors-background-inverse-weak"> | ||
| <SelectValue /> | ||
| </SelectTrigger> | ||
| <SelectContent> | ||
| <SelectItem value="utc9">UTC+9 Asia/Shanghai</SelectItem> | ||
| </SelectContent> | ||
| </Select> | ||
| </div> | ||
|
|
||
| <Button variant="outline" className="mt-4"> | ||
| Change password | ||
| </Button> | ||
| </div> | ||
| </section> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <aside className="w-[303px] bg-background border-r"> | ||
| {menuItems.map((section, idx) => ( | ||
| <div key={idx}> | ||
| <h2 className="p-6 text-sm font-semibold">{section.section}</h2> | ||
| {section.items.map((item, itemIdx) => { | ||
| const active = pathName === item.key; | ||
| return ( | ||
| <Button | ||
| key={itemIdx} | ||
| variant={active ? 'secondary' : 'ghost'} | ||
| className={cn('w-full justify-start gap-2.5 p-6 relative')} | ||
| onClick={handleMenuClick(item.key)} | ||
| > | ||
| <item.icon className="w-6 h-6" /> | ||
| <span>{item.label}</span> | ||
| {active && ( | ||
| <div className="absolute right-0 w-[5px] h-[66px] bg-primary rounded-l-xl shadow-[0_0_5.94px_#7561ff,0_0_11.88px_#7561ff,0_0_41.58px_#7561ff,0_0_83.16px_#7561ff,0_0_142.56px_#7561ff,0_0_249.48px_#7561ff]" /> | ||
| )} | ||
| </Button> | ||
| ); | ||
| })} | ||
| </div> | ||
| ))} | ||
|
|
||
| <div className="p-6 mt-auto border-t"> | ||
| <div className="flex items-center gap-2 mb-6"> | ||
| <Switch id="dark-mode" /> | ||
| <Label htmlFor="dark-mode" className="text-sm"> | ||
| Dark | ||
| </Label> | ||
| </div> | ||
| <Button variant="outline" className="w-full gap-3"> | ||
| <LogOut className="w-6 h-6" /> | ||
| Logout | ||
| </Button> | ||
| </div> | ||
| </aside> | ||
| ); | ||
| } |
Oops, something went wrong.