feat(v2): add mobile layout

2024-04-03 11:30:22 +08:00 · 2024-04-03 11:30:22 +08:00 · af1d99d2ff
commit af1d99d2ff
parent 0711c3c003
5 changed files with 195 additions and 61 deletions
--- a/src/client/App.tsx
+++ b/src/client/App.tsx
@ -23,6 +23,7 @@ import { isDev } from './utils/env';
 import { RouterProvider, createRouter } from '@tanstack/react-router';
 import { routeTree } from './routeTree.gen';
 import { DefaultNotFound } from './components/DefaultNotFound';
+import { TooltipProvider } from './components/ui/tooltip';

 const router = createRouter({
  routeTree,
@ -95,7 +96,9 @@ export const App: React.FC = React.memo(() => {
              {isDev ? (
                // Compatible with old routes
                <BrowserRouter>
+                  <TooltipProvider delayDuration={0}>
                    <RouterProvider router={router} context={{ userInfo }} />
+                  </TooltipProvider>
                </BrowserRouter>
              ) : (
                <BrowserRouter>
--- a/src/client/pages/Layout/DesktopLayout.tsx
+++ b/src/client/pages/Layout/DesktopLayout.tsx
@ -22,6 +22,7 @@ import { Outlet } from '@tanstack/react-router';
 import { trpc } from '@/api/trpc';
 import { useUserStore } from '@/store/user';
 import { LayoutProps } from './types';
+import { useTranslation } from '@i18next-toolkit/react';

 const defaultLayout: [number, number, number] = [265, 440, 655];

@ -45,6 +46,7 @@ export const DesktopLayout: React.FC<LayoutProps> = React.memo((props) => {
      enabled: !!workspaceId,
    }
  );
+  const { t } = useTranslation();

  const navbar = (
    <>
@ -61,31 +63,31 @@ export const DesktopLayout: React.FC<LayoutProps> = React.memo((props) => {
        isCollapsed={isCollapsed}
        links={[
          {
-            title: 'Website',
+            title: t('Website'),
            label: String(serviceCount?.website ?? ''),
            icon: LuAreaChart,
            to: '/website',
          },
          {
-            title: 'Monitor',
+            title: t('Monitor'),
            label: String(serviceCount?.monitor ?? ''),
            icon: LuMonitorDot,
            to: '/monitor',
          },
          {
-            title: 'Servers',
+            title: t('Servers'),
            label: '',
            icon: LuServer,
            to: '/server',
          },
          {
-            title: 'Telemetry',
+            title: t('Telemetry'),
            label: String(serviceCount?.telemetry ?? ''),
            icon: LuWifi,
            to: '/telemetry',
          },
          {
-            title: 'Pages',
+            title: t('Pages'),
            label: String(serviceCount?.page ?? ''),
            icon: LuFilePieChart,
            to: '/page',
@ -103,7 +105,6 @@ export const DesktopLayout: React.FC<LayoutProps> = React.memo((props) => {
  );

  return (
-    <TooltipProvider delayDuration={0}>
    <ResizablePanelGroup
      direction="horizontal"
      onLayout={(sizes: number[]) => {
@ -131,8 +132,7 @@ export const DesktopLayout: React.FC<LayoutProps> = React.memo((props) => {
        }}
        className={cn(
          'flex flex-col',
-            isCollapsed &&
-              'min-w-[50px] transition-all duration-300 ease-in-out'
+          isCollapsed && 'min-w-[50px] transition-all duration-300 ease-in-out'
        )}
      >
        {navbar}
@ -156,7 +156,6 @@ export const DesktopLayout: React.FC<LayoutProps> = React.memo((props) => {
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
-    </TooltipProvider>
  );
 });
 DesktopLayout.displayName = 'DesktopLayout';
--- a/src/client/pages/Layout/MobileLayout.tsx
+++ b/src/client/pages/Layout/MobileLayout.tsx
@ -1,6 +1,105 @@
 import React from 'react';
+import {
+  LuAreaChart,
+  LuFilePieChart,
+  LuMenu,
+  LuMonitorDot,
+  LuServer,
+  LuWifi,
+} from 'react-icons/lu';
+import { useTranslation } from '@i18next-toolkit/react';
+import { IconType } from 'react-icons';
+import { useRouterState, Link, Outlet } from '@tanstack/react-router';
+import { cn } from '@/utils/style';
+import { Separator } from '@/components/ui/separator';
+import { LayoutProps } from './types';
+import { UserConfig } from './UserConfig';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
+import { Button } from '@/components/ui/button';

-export const MobileLayout: React.FC = React.memo(() => {
-  return <div>Mobile</div>;
+export const MobileLayout: React.FC<LayoutProps> = React.memo((props) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex h-svh flex-col">
+      <div className="flex h-[52px] items-center justify-between px-2">
+        <Sheet>
+          <SheetTrigger>
+            <Button variant="outline" size="icon">
+              <LuMenu />
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="left" className="w-11/12">
+            <ScrollArea className="h-full">{props.list}</ScrollArea>
+          </SheetContent>
+        </Sheet>
+
+        <div>
+          <img className="m-auto h-8 w-8" src="/icon.svg" />
+        </div>
+
+        <div>
+          <UserConfig isCollapsed={true} />
+        </div>
+      </div>
+
+      <Separator />
+
+      <div className="flex-1 overflow-hidden">
+        {props.children ?? <Outlet />}
+      </div>
+
+      <Separator />
+
+      <div className="p-2">
+        <div className="flex justify-between">
+          <MobileNavItem
+            title={t('Website')}
+            icon={LuAreaChart}
+            to="/website"
+          />
+          <MobileNavItem
+            title={t('Monitor')}
+            icon={LuMonitorDot}
+            to="/monitor"
+          />
+          <MobileNavItem title={t('Servers')} icon={LuServer} to="/server" />
+          <MobileNavItem title={t('Telemetry')} icon={LuWifi} to="/telemetry" />
+          <MobileNavItem title={t('Pages')} icon={LuFilePieChart} to="/page" />
+        </div>
+      </div>
+    </div>
+  );
 });
 MobileLayout.displayName = 'MobileLayout';
+
+const MobileNavItem: React.FC<{
+  title: string;
+  icon: IconType;
+  to: string;
+}> = React.memo((props) => {
+  const pathname = useRouterState({
+    select: (state) => state.location.pathname,
+  });
+
+  const isSelect = pathname.startsWith(props.to);
+
+  return (
+    <Link
+      className={cn(
+        'flex-1 rounded-lg p-1 text-center',
+        isSelect
+          ? 'bg-muted text-black dark:text-white'
+          : 'text-muted-foreground'
+      )}
+      to={props.to}
+    >
+      <props.icon size={24} className="m-auto mb-1" />
+      <div className={cn('text-sm font-semibold', isSelect && 'font-bold')}>
+        {props.title}
+      </div>
+    </Link>
+  );
+});
+MobileNavItem.displayName = 'MobileNavItem';
--- a/src/client/pages/Layout/UserConfig.tsx
+++ b/src/client/pages/Layout/UserConfig.tsx
@ -16,7 +16,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { useEvent } from '@/hooks/useEvent';
 import { useSettingsStore } from '@/store/settings';
-import { useUserInfo } from '@/store/user';
+import { useCurrentWorkspaceId, useUserInfo, useUserStore } from '@/store/user';
 import { languages } from '@/utils/constants';
 import { useTranslation, setLanguage } from '@i18next-toolkit/react';
 import { useNavigate } from '@tanstack/react-router';
@ -32,6 +32,20 @@ export const UserConfig: React.FC<UserConfigProps> = React.memo((props) => {
  const { i18n, t } = useTranslation();
  const navigate = useNavigate();
  const colorScheme = useSettingsStore((state) => state.colorScheme);
+  const workspaceId = useCurrentWorkspaceId();
+  const workspaces = useUserStore((state) => {
+    const userInfo = state.info;
+    if (userInfo) {
+      return userInfo.workspaces.map((w) => ({
+        id: w.workspace.id,
+        name: w.workspace.name,
+        role: w.role,
+        current: userInfo.currentWorkspace?.id === w.workspace.id,
+      }));
+    }
+
+    return [];
+  });

  const handleChangeColorSchema = useEvent((colorScheme) => {
    useSettingsStore.setState({
@ -97,6 +111,25 @@ export const UserConfig: React.FC<UserConfigProps> = React.memo((props) => {
            {t('Notifications')}
          </DropdownMenuItem>

+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>{t('Workspaces')}</DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent>
+                <DropdownMenuRadioGroup value={workspaceId}>
+                  {workspaces.map((workspace) => (
+                    <DropdownMenuRadioItem
+                      key={workspace.id}
+                      value={workspace.id}
+                      disabled={true}
+                    >
+                      {workspace.name}
+                    </DropdownMenuRadioItem>
+                  ))}
+                </DropdownMenuRadioGroup>
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+
          <DropdownMenuSub>
            <DropdownMenuSubTrigger>{t('Language')}</DropdownMenuSubTrigger>
            <DropdownMenuPortal>
--- a/src/client/pages/LayoutV2.tsx
+++ b/src/client/pages/LayoutV2.tsx
@ -8,7 +8,7 @@ export const LayoutV2: React.FC<LayoutProps> = React.memo((props) => {
  const isMobile = useIsMobile();

  if (isMobile) {
-    return <MobileLayout />;
+    return <MobileLayout {...props} />;
  }

  return <DesktopLayout {...props} />;