update

src/modules/layout/index.tsx

@@ -0,0 +1,147 @@
+import { MenuOutlined, SwapOutlined } from '@ant-design/icons';
+import { LayoutMenu, useQuickMenu } from './Menu';
+import { useLayoutStore, usePlatformStore } from './store';
+import { useShallow } from 'zustand/react/shallow';
+import { useEffect, useLayoutEffect, useState } from 'react';
+import { LayoutUser } from './LayoutUser';
+import PandaPNG from '@/assets/panda.jpg';
+import QRCodePNG from '@/assets/qrcode-8x8.jpg';
+import clsx from 'clsx';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+
+export const IconButton = (props: any) => {
+  return (
+    <button
+      className={clsx(
+        'inline-flex items-center justify-center rounded-md p-2 transition-colors hover:bg-slate-100 disabled:opacity-50 disabled:pointer-events-none',
+        props.className,
+      )}
+      {...props}>
+      {props.children}
+    </button>
+  );
+};
+import { QrCode } from 'lucide-react';
+import { openLink } from '../basename';
+
+type LayoutMainProps = {
+  title?: React.ReactNode;
+  children?: React.ReactNode;
+};
+export const LayoutMain = (props: LayoutMainProps) => {
+  const menuStore = useLayoutStore(
+    useShallow((state) => {
+      return {
+        open: state.open,
+        setOpen: state.setOpen, //
+        getMe: state.getMe,
+        me: state.me,
+        setOpenUser: state.setOpenUser,
+        switchOrg: state.switchOrg,
+      };
+    }),
+  );
+  const platformStore = usePlatformStore(
+    useShallow((state) => {
+      return {
+        isMac: state.isMac,
+        mount: state.mount,
+        isElectron: state.isElectron,
+        init: state.init,
+      };
+    }),
+  );
+  const { isMac, mount, isElectron } = platformStore;
+  const quickMenu = useQuickMenu();
+
+  useLayoutEffect(() => {
+    platformStore.init();
+  }, []);
+
+  useEffect(() => {
+    menuStore.getMe();
+  }, []);
+
+  return (
+    <div className='flex w-full h-full flex-col relative'>
+      <div
+        className={clsx('layout-menu items-center  ', !mount && '!invisible')}
+        style={{
+          cursor: isElectron ? 'move' : 'default',
+        }}>
+        <div className='flex grow justify-between pl-4 py-2 items-center bg-gray-200'>
+          <div className='flex items-center gap-2'>
+            <div className='text-xl font-bold '>{props.title}</div>
+            <div className='flex items-center gap-2 text-sm '>
+              {quickMenu.map((item, index) => {
+                if (typeof window === 'undefined') return null;
+                const isActive = location?.pathname === item.link;
+                return (
+                  <div
+                    key={index}
+                    className={clsx('flex items-center gap-2 px-1', isActive && 'border border-white')}
+                    onClick={() => {
+                      openLink(item.link, '_self');
+                    }}>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <div className='cursor-pointer'>{item.icon}</div>
+                      </TooltipTrigger>
+                      <TooltipContent>{item.title}</TooltipContent>
+                    </Tooltip>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+          <div className='mr-4 flex gap-4 items-center no-drag'>
+            <div className='group relative'>
+              <IconButton>
+                <QrCode size={16} />
+              </IconButton>
+
+              <div className='absolute hidden group-hover:flex bg-white p-2 border shadow-md top-10 -left-15 w-40 z-[9999] flex-col items-center justify-center rounded-md'>
+                <img src={QRCodePNG.src} alt='QR Code' />
+                <div className='text-sm text-black'>逸闻设计</div>
+              </div>
+            </div>
+
+            {menuStore.me?.type === 'org' && (
+              <div>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <IconButton
+                      onClick={() => {
+                        menuStore.switchOrg('', 'user');
+                      }}>
+                      <SwapOutlined />
+                    </IconButton>
+                  </TooltipTrigger>
+                  <TooltipContent>Switch To User</TooltipContent>
+                </Tooltip>
+              </div>
+            )}
+            <div className='w-8 h-8 rounded-full avatar cursor-pointer' onClick={() => menuStore.setOpenUser(true)}>
+              {menuStore.me?.avatar ? (
+                <img className='w-8 h-8 rounded-full' src={menuStore.me?.avatar} alt='avatar' />
+              ) : (
+                <img className='w-8 h-8 rounded-full' src={PandaPNG.src} alt='avatar' />
+              )}
+            </div>
+            <div className='cursor-pointer' onClick={() => menuStore.setOpenUser(true)}>
+              {menuStore.me?.username}
+            </div>
+          </div>
+        </div>
+        <div
+          className='flex'
+          style={{
+            height: 'calc(100vh - 3rem)',
+          }}>
+          {props.children}
+        </div>
+      </div>
+      <LayoutUser />
+    </div>
+  );
+};