feat: Add custom background color #3221 (#3336)

### What problem does this PR solve?

feat: Add custom background color #3221

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/home/card.tsx

@@ -0,0 +1,39 @@
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+export function CardWithForm() {
+  return (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Create project</CardTitle>
+        <CardDescription>Deploy your new project in one-click.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form>
+          <div className="grid w-full items-center gap-4">
+            <div className="flex flex-col space-y-1.5">
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" placeholder="Name of your project" />
+            </div>
+            <div className="flex flex-col space-y-1.5">
+              <Label htmlFor="framework">Framework</Label>
+            </div>
+          </div>
+        </form>
+      </CardContent>
+      <CardFooter className="flex justify-between">
+        <Button variant="outline">Cancel</Button>
+        <Button>Deploy</Button>
+      </CardFooter>
+    </Card>
+  );
+}

web/src/pages/home/header.tsx

@@ -0,0 +1,106 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import { Container } from '@/components/ui/container';
+import { Segmented, SegmentedValue } from '@/components/ui/segmented ';
+import { useTranslate } from '@/hooks/common-hooks';
+import { useNavigateWithFromState } from '@/hooks/route-hook';
+import {
+  Cpu,
+  Github,
+  Library,
+  MessageSquareText,
+  Search,
+  Star,
+  Zap,
+} from 'lucide-react';
+import { useCallback, useMemo, useState } from 'react';
+import { useLocation } from 'umi';
+
+export function HomeHeader() {
+  const { t } = useTranslate('header');
+  const { pathname } = useLocation();
+  const navigate = useNavigateWithFromState();
+  const [currentPath, setCurrentPath] = useState('/home');
+
+  const tagsData = useMemo(
+    () => [
+      { path: '/home', name: t('knowledgeBase'), icon: Library },
+      { path: '/chat', name: t('chat'), icon: MessageSquareText },
+      { path: '/search', name: t('search'), icon: Search },
+      { path: '/flow', name: t('flow'), icon: Cpu },
+      // { path: '/file', name: t('fileManager'), icon: FileIcon },
+    ],
+    [t],
+  );
+
+  const options = useMemo(() => {
+    return tagsData.map((tag) => {
+      const HeaderIcon = tag.icon;
+
+      return {
+        label: (
+          <div className="flex items-center gap-1">
+            <HeaderIcon className="size-5"></HeaderIcon>
+            <span>{tag.name}</span>
+          </div>
+        ),
+        value: tag.path,
+      };
+    });
+  }, [tagsData]);
+
+  // const currentPath = useMemo(() => {
+  //   return tagsData.find((x) => pathname.startsWith(x.path))?.name || 'home';
+  // }, [pathname, tagsData]);
+
+  const handleChange = (path: SegmentedValue) => {
+    // navigate(path as string);
+    setCurrentPath(path as string);
+  };
+
+  const handleLogoClick = useCallback(() => {
+    navigate('/');
+  }, [navigate]);
+
+  return (
+    <section className="px-[60px] py-[12px] flex justify-between">
+      <div className="flex items-center gap-4">
+        <img
+          src={'/logo.svg'}
+          alt="logo"
+          className="w-[100] h-[100] mr-[12]"
+          onClick={handleLogoClick}
+        />
+        <Button variant="secondary">
+          <Github />
+          21.5k stars
+          <Star />
+        </Button>
+      </div>
+      <div>
+        <Segmented
+          options={options}
+          value={currentPath}
+          onChange={handleChange}
+        ></Segmented>
+      </div>
+      <div className="flex items-center gap-4">
+        <Button variant="secondary">V 0.13.0</Button>
+        <Container>
+          <Avatar className="w-[30px] h-[30px]">
+            <AvatarImage src="https://github.com/shadcn.png" />
+            <AvatarFallback>CN</AvatarFallback>
+          </Avatar>
+          yifanwu92@gmail.com
+          <Button
+            variant="destructive"
+            className="py-[2px] px-[8px] h-[23px] rounded-[4px]"
+          >
+            <Zap />
+            Pro
+          </Button>
+        </Container>
+      </div>
+    </section>
+  );
+}

web/src/pages/home/index.tsx

@@ -0,0 +1,15 @@
+import { CardWithForm } from './card';
+import { HomeHeader } from './header';
+
+const Home = () => {
+  return (
+    <div>
+      <HomeHeader></HomeHeader>
+      <section>
+        <CardWithForm></CardWithForm>
+      </section>
+    </div>
+  );
+};
+
+export default Home;