support email update

ui/src/pages/SettingLayout.tsx

@@ -1,20 +1,57 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Toaster } from "@/components/ui/toaster";
-import { Outlet } from "react-router-dom";
+import { KeyRound, UserRound } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
 
 const SettingLayout = () => {
+  const location = useLocation();
+  const [tabValue, setTabValue] = useState("account");
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const pathname = location.pathname;
+    const tabValue = pathname.split("/")[2];
+    setTabValue(tabValue);
+  }, [location]);
+
   return (
     <div>
       <Toaster />
       <div className="text-muted-foreground border-b dark:border-stone-500 py-5">
-        设置密码
+        偏好设置
       </div>
-      <div className="w-full sm:w-[35em] mt-10 flex flex-col p-3 mx-auto">
-        {/* <div className="text-muted-foreground">
-          <span className="transition-all text-sm bg-gray-400 px-3 py-1 rounded-sm text-white cursor-pointer">
-            密码
-          </span>
-        </div> */}
-        <Outlet />
+      <div className="w-full mt-5 p-3 flex justify-center">
+        <Tabs defaultValue="account" className="" value={tabValue}>
+          <TabsList>
+            <TabsTrigger
+              value="account"
+              onClick={() => {
+                navigate("/setting/account");
+              }}
+              className="px-5"
+            >
+              <UserRound size={14} />
+              <div className="ml-1">账户</div>
+            </TabsTrigger>
+            <TabsTrigger
+              value="password"
+              onClick={() => {
+                navigate("/setting/password");
+              }}
+              className="px-5"
+            >
+              <KeyRound size={14} />
+              <div className="ml-1">密码</div>
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value={tabValue}>
+            <div className="mt-5 w-full md:w-[45em]">
+              <Outlet />
+            </div>
+          </TabsContent>
+        </Tabs>
       </div>
     </div>
   );