temp: 适配mac桌面

src/electron/utils.ts

@@ -0,0 +1,20 @@
+export const getIsMac = async () => {
+  // @ts-ignore
+  const userAgentData = navigator.userAgentData;
+  if (userAgentData) {
+    const ua = await userAgentData.getHighEntropyValues(['platform']);
+    console.log('ua', ua);
+    if (ua.platform === 'macOS') {
+      return true;
+    }
+  }
+  return false;
+};
+export const getIsElectron = () => {
+  // 检查 window.process 和 navigator.userAgent 中是否包含 Electron 信息
+  return (
+    // @ts-ignore
+    (typeof window !== 'undefined' && typeof window.process !== 'undefined' && window.process.type === 'renderer') ||
+    (typeof navigator === 'object' && typeof navigator.userAgent === 'string' && navigator.userAgent.indexOf('Electron') >= 0)
+  );
+};

src/globals.css

@@ -56,6 +56,9 @@
     @apply bg-gray-900 p-2 text-white flex justify-between h-12;
     -webkit-app-region: drag;
   }
+  .no-drag {
+    -webkit-app-region: no-drag; 
+  }
   .bg-custom-blue {
     background-color: #3490dc;
   }

src/modules/layout/LayoutUser.tsx

@@ -57,14 +57,14 @@ export const LayoutUser = () => {
     });
   }, [store.me]);
   return (
-    <div className={clsx('w-full h-full absolute z-20', !open && 'hidden')}>
+    <div className={clsx('w-full h-full absolute z-20 no-drag', !open && 'hidden')}>
       <div
         className='bg-white w-full absolute h-full opacity-60 z-0'
         onClick={() => {
           setOpen(false);
         }}></div>
       <div className='w-[400px] h-full absolute top-0 right-0 bg-white rounded-l-lg'>
-        <div className='flex justify-between p-6 font-bold items-center border-b'>
+        <div className='flex justify-between p-6 mt-4 font-bold items-center border-b'>
           User: {store.me?.username}
           <div className='flex gap-4'>
             {items.length > 0 && (

src/modules/layout/Menu.tsx

@@ -71,14 +71,14 @@ export const LayoutMenu = () => {
   const { open, setOpen } = useLayoutStore(useShallow((state) => ({ open: state.open, setOpen: state.setOpen })));
   const navigate = useNewNavigate();
   return (
-    <div className={clsx('w-full h-full absolute z-20', !open && 'hidden')}>
+    <div className={clsx('w-full h-full absolute z-20 no-drag', !open && 'hidden')}>
       <div
         className='bg-white w-full absolute h-full opacity-60 z-0'
         onClick={() => {
           setOpen(false);
         }}></div>
       <div className='w-[300px] h-full absolute top-0 left-0 bg-white'>
-        <div className='flex justify-between p-6 font-bold items-center'>
+        <div className='flex justify-between p-6 mt-4 font-bold items-center'>
           Envision
           <div>
             <Button icon={<CloseOutlined />} onClick={() => setOpen(false)}></Button>

src/modules/layout/index.tsx

@@ -3,9 +3,9 @@ import { MenuOutlined, SwapOutlined } from '@ant-design/icons';
 import { Button, Tooltip } from 'antd';
 import { Outlet } from 'react-router-dom';
 import { LayoutMenu } from './Menu';
-import { useLayoutStore } from './store';
+import { useLayoutStore, usePlatformStore } from './store';
 import { useShallow } from 'zustand/react/shallow';
-import { useEffect } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
 import { LayoutUser } from './LayoutUser';
 import PandaPNG from '@/assets/panda.png';
 import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
@@ -28,27 +28,46 @@ export const LayoutMain = (props: LayoutMainProps) => {
       };
     }),
   );
+  const platformStore = usePlatformStore(
+    useShallow((state) => {
+      return {
+        isMac: state.isMac,
+        mount: state.mount,
+        isElectron: state.isElectron,
+        init: state.init,
+      };
+    }),
+  );
+  const { isMac, mount, isElectron } = platformStore;
   const aiStore = useAiStore(
     useShallow((state) => {
       return { open: state.open };
     }),
   );
+  useLayoutEffect(() => {
+    platformStore.init();
+  }, []);
+
   useEffect(() => {
     menuStore.getMe();
   }, []);
   return (
     <div className='flex w-full h-full flex-col relative'>
       <LayoutMenu />
-      <div className='layout-menu items-center'>
+      <div
+        className={clsx('layout-menu items-center', !mount && '!invisible')}
+        style={{
+          cursor: isElectron ? 'move' : 'default',
+        }}>
         <Button
-          className='mr-4'
+          className={clsx('mr-4 cursor-pointer no-drag', isMac && 'ml-16')}
           onClick={() => {
             menuStore.setOpen(true);
           }}
           icon={<MenuOutlined />}></Button>
         <div className='flex flex-grow justify-between'>
           {props.title}
-          <div className='mr-4 flex gap-4 items-center'>
+          <div className='mr-4 flex gap-4 items-center no-drag'>
             {menuStore.me?.type === 'org' && (
               <div>
                 <Tooltip title='Switch To User'>

src/modules/layout/store/index.ts

@@ -1,6 +1,47 @@
 import { query } from '@/modules/query';
 import { message } from 'antd';
 import { create } from 'zustand';
+export const getIsMac = async () => {
+  // @ts-ignore
+  const userAgentData = navigator.userAgentData;
+  if (userAgentData) {
+    const ua = await userAgentData.getHighEntropyValues(['platform']);
+    if (ua.platform === 'macOS') {
+      return true;
+    }
+  }
+  return false;
+};
+export const getIsElectron = () => {
+  // 检查 window.process 和 navigator.userAgent 中是否包含 Electron 信息
+  return (
+    // @ts-ignore
+    (typeof window !== 'undefined' && typeof window.process !== 'undefined' && window.process.type === 'renderer') ||
+    (typeof navigator === 'object' && typeof navigator.userAgent === 'string' && navigator.userAgent.indexOf('Electron') >= 0)
+  );
+};
+
+type PlatfromStore = {
+  isMac: boolean;
+  setIsMac: (mac: boolean) => void;
+  mount: boolean;
+  isElectron: boolean;
+  init: () => Promise<void>;
+};
+export const usePlatformStore = create<PlatfromStore>((set) => {
+  return {
+    isMac: false,
+    mount: false,
+    isElectron: false,
+    setIsMac: (mac) => set({ isMac: mac }),
+    init: async () => {
+      const mac = await getIsMac();
+      // @ts-ignore
+      const isElectron = getIsElectron()
+      set({ isMac: isElectron && mac, isElectron: isElectron, mount: true });
+    },
+  };
+});
 
 type Me = {
   id?: string;

vite.config.ts

@@ -4,10 +4,23 @@ import tailwindcss from 'tailwindcss';
 import autoprefixer from 'autoprefixer';
 import path from 'path';
 import nesting from 'tailwindcss/nesting';
-
+const isDev = process.env.NODE_ENV === 'development';
+const unamiPlugin = {
+  name: 'html-transform',
+  transformIndexHtml(html: string) {
+    return html.replace(
+      '</head>',
+      `<script defer src="https://umami.xiongxiao.me/script.js" data-website-id="aeea5ee5-df79-4e78-8c0d-a9f26db23695"></script></head>`,
+    );
+  },
+};
+const plugins = [];
+if (!isDev) {
+  plugins.push(unamiPlugin);
+}
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), ...plugins],
 
   css: {
     postcss: {