feat(v2): add website overview

src/client/routeTree.gen.ts

@@ -19,6 +19,7 @@ import { Route as MonitorImport } from './routes/monitor'
 import { Route as LoginImport } from './routes/login'
 import { Route as DashboardImport } from './routes/dashboard'
 import { Route as IndexImport } from './routes/index'
+import { Route as WebsiteOverviewImport } from './routes/website/overview'
 import { Route as WebsiteAddImport } from './routes/website/add'
 import { Route as WebsiteWebsiteIdImport } from './routes/website/$websiteId'
 import { Route as TelemetryAddImport } from './routes/telemetry/add'
@@ -70,6 +71,11 @@ const IndexRoute = IndexImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const WebsiteOverviewRoute = WebsiteOverviewImport.update({
+  path: '/overview',
+  getParentRoute: () => WebsiteRoute,
+} as any)
+
 const WebsiteAddRoute = WebsiteAddImport.update({
   path: '/add',
   getParentRoute: () => WebsiteRoute,
@@ -178,6 +184,10 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof WebsiteAddImport
       parentRoute: typeof WebsiteImport
     }
+    '/website/overview': {
+      preLoaderRoute: typeof WebsiteOverviewImport
+      parentRoute: typeof WebsiteImport
+    }
   }
 }
 
@@ -191,7 +201,11 @@ export const routeTree = rootRoute.addChildren([
   PageRoute.addChildren([PageSlugRoute, PageAddRoute]),
   RegisterRoute,
   TelemetryRoute.addChildren([TelemetryTelemetryIdRoute, TelemetryAddRoute]),
-  WebsiteRoute.addChildren([WebsiteWebsiteIdRoute, WebsiteAddRoute]),
+  WebsiteRoute.addChildren([
+    WebsiteWebsiteIdRoute,
+    WebsiteAddRoute,
+    WebsiteOverviewRoute,
+  ]),
 ])
 
 /* prettier-ignore-end */

src/client/routes/website.tsx

@@ -14,7 +14,8 @@ import {
   useNavigate,
   useRouterState,
 } from '@tanstack/react-router';
-import { LuPlus } from 'react-icons/lu';
+import { useEffect } from 'react';
+import { LuEye, LuPlus } from 'react-icons/lu';
 
 export const Route = createFileRoute('/website')({
   beforeLoad: routeAuthBeforeLoad,
@@ -39,19 +40,19 @@ function WebsiteComponent() {
     href: `/website/${item.id}`,
   }));
 
-  useDataReady(
-    () => data.length > 0,
-    () => {
+  useEffect(() => {
     if (pathname === Route.fullPath) {
       navigate({
-          to: '/website/$websiteId',
-          params: {
-            websiteId: data[0].id,
-          },
+        to: '/website/overview',
       });
     }
-    }
-  );
+  }, []);
+
+  const handleClickOverview = useEvent(() => {
+    navigate({
+      to: '/website/overview',
+    });
+  });
 
   const handleClickAdd = useEvent(() => {
     navigate({
@@ -67,6 +68,14 @@ function WebsiteComponent() {
             <CommonHeader
               title={t('Website')}
               actions={
+                <div className="space-x-2">
+                  <Button
+                    variant="outline"
+                    Icon={LuEye}
+                    onClick={handleClickOverview}
+                  >
+                    {t('Overview')}
+                  </Button>
                   <Button
                     variant="outline"
                     Icon={LuPlus}
@@ -74,6 +83,7 @@ function WebsiteComponent() {
                   >
                     {t('Add')}
                   </Button>
+                </div>
               }
             />
           }

src/client/routes/website/overview.tsx

@@ -0,0 +1,77 @@
+import { routeAuthBeforeLoad } from '@/utils/route';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from '@i18next-toolkit/react';
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { useEvent } from '@/hooks/useEvent';
+import { Input } from '@/components/ui/input';
+import { useCurrentWorkspaceId } from '@/store/user';
+import { trpc } from '@/api/trpc';
+import { hostnameRegex } from '@tianji/shared';
+import { Card, CardContent, CardFooter } from '@/components/ui/card';
+import { CommonWrapper } from '@/components/CommonWrapper';
+import { WebsiteOverview } from '@/components/website/WebsiteOverview';
+import { Empty } from 'antd';
+import { LuPlus } from 'react-icons/lu';
+import { ScrollArea } from '@/components/ui/scroll-area';
+
+export const Route = createFileRoute('/website/overview')({
+  beforeLoad: routeAuthBeforeLoad,
+  component: WebsiteOverviewComponent,
+});
+
+function WebsiteOverviewComponent() {
+  const { t } = useTranslation();
+  const workspaceId = useCurrentWorkspaceId();
+  const { data: websites = [], isLoading } = trpc.website.all.useQuery({
+    workspaceId,
+  });
+  const navigate = useNavigate();
+
+  return (
+    <CommonWrapper
+      header={<h1 className="text-xl font-bold">{t('Add Website')}</h1>}
+    >
+      <ScrollArea className="h-full overflow-hidden p-4">
+        {websites.length === 0 && isLoading === false && (
+          <Empty
+            description={
+              <div className="py-2">
+                <div className="mb-1">
+                  {t('Not any website has been exist')}
+                </div>
+                <Button
+                  Icon={LuPlus}
+                  onClick={() =>
+                    navigate({
+                      to: '/website/add',
+                    })
+                  }
+                >
+                  {t('Add Website Now')}
+                </Button>
+              </div>
+            }
+          />
+        )}
+
+        <div className="space-y-10 p-4">
+          {websites.map((website) => (
+            <WebsiteOverview website={website} />
+          ))}
+        </div>
+      </ScrollArea>
+    </CommonWrapper>
+  );
+}