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)
2024-11-22 15:11:38 +08:00
parent ee7fd71fdc
commit ee33bf71eb
15 changed files with 334 additions and 28 deletions
--- a/web/src/pages/profile-setting/sidebar/index.tsx
+++ 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 (
+    <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>
+  );
+}