feat: add animate (#61)

farm.config.ts

@@ -4,6 +4,7 @@ import { defineConfig } from '@farmfe/core';
 import less from '@farmfe/js-plugin-less';
 import postcss from '@farmfe/js-plugin-postcss';
 import Pages from 'vite-plugin-pages';
+import { adminInfo } from './global.config';
 
 export default defineConfig({
   compilation: {
@@ -12,9 +13,7 @@ export default defineConfig({
         '@/': path.join(process.cwd(), 'src'),
       },
     },
-    persistentCache: {
-      buildDependencies: ['tailwind.config.js'],
-    },
+    persistentCache: false,
     runtime: {
       isolate: true,
     },
@@ -27,20 +26,21 @@ export default defineConfig({
       },
     ],
     'farm-plugin-remove-console',
-    ["@jstors/farm-plugin-html-template",
-     {
-      template: path.resolve(__dirname, 'index.html'),
-      data: {
-        title: 'Farm React Admin',
-      }
-    }],
+    [
+      '@jstors/farm-plugin-html-template',
+      {
+        template: path.resolve(__dirname, 'index.html'),
+        data: adminInfo,
+      },
+    ],
     less(),
     postcss(),
   ],
   vitePlugins: [
     Pages({
       resolver: 'react',
       moduleId: '~react-pages',
+      importMode: 'async',
     }),
     vitePluginForArco({
       theme: '@arco-themes/react-juzi001',

global.config.ts

@@ -0,0 +1,3 @@
+export const adminInfo = {
+  title: 'Farm React Admin',
+};

package.json

@@ -20,6 +20,7 @@
     "@arco-themes/react-juzi001": "^0.0.1",
     "classnames": "^2.5.1",
     "dayjs": "^1.11.10",
+    "framer-motion": "^11.1.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.22.3",
@@ -30,12 +31,13 @@
     "@biomejs/biome": "1.7.0",
     "@commitlint/cli": "^19.2.1",
     "@commitlint/config-conventional": "^19.1.0",
+    "@emotion/is-prop-valid": "^1.2.2",
     "@farmfe/cli": "^1.0.1",
     "@farmfe/core": "^1.1.2",
     "@farmfe/js-plugin-less": "^1.7.0",
     "@farmfe/js-plugin-postcss": "^1.6.0",
     "@farmfe/plugin-react": "^1.0.1",
-    "@jstors/farm-plugin-html-template": "^0.0.2",
+    "@jstors/farm-plugin-html-template": "^0.0.3",
     "@types/react": "^18.2.78",
     "@types/react-dom": "^18.2.25",
     "autoprefixer": "^10.4.19",
@@ -49,8 +51,6 @@
     "vite-plugin-pages": "^0.32.1"
   },
   "lint-staged": {
-    "*": [
-      "pnpm check"
-    ]
+    "*": ["pnpm check"]
   }
 }

src/hooks/useRouterGuard.ts

@@ -1,4 +1,4 @@
-import { LOGIN_PATH, TOKEN_KEY } from '@/config/const';
+import { LOGIN_PATH, TOKEN_KEY } from '@/router/const';
 import { getCookie } from '@/utils/cookie';
 import { useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router';

src/layout/animate.tsx

@@ -0,0 +1,31 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import React, { useEffect, useState } from 'react';
+
+const Animate = ({ children }) => {
+  const [isOpen, setOpen] = useState(false);
+
+  useEffect(() => {
+    setOpen(!isOpen);
+  }, [location.pathname]);
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        layout
+        key="content"
+        initial={{ opacity: 0, scale: 0.5 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{
+          duration: 0.5,
+          ease: [0, 0.71, 0.2, 1.01],
+        }}
+        style={{ minHeight: isOpen ? '100px' : '500px' }}
+        onClick={() => setOpen(!isOpen)}
+      >
+        {children}
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+export default Animate;

src/layout/header.tsx

@@ -1,5 +1,5 @@
 import DefaultAvatar from '@/assets/logo.png';
-import { LOGIN_PATH, TOKEN_KEY } from '@/config/const';
+import { LOGIN_PATH, TOKEN_KEY } from '@/router/const';
 import { setCookie } from '@/utils/cookie';
 import { Avatar, Button, Dropdown, Menu, Space } from '@arco-design/web-react';
 import React from 'react';

src/layout/index.tsx

@@ -1,7 +1,9 @@
-import { INDEPENDENT_ROUTES } from '@/config/const';
+import { INDEPENDENT_ROUTES } from '@/router/const';
 import { Layout, Spin } from '@arco-design/web-react';
-import React, { Suspense, useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import React, { Suspense, useEffect, useState } from 'react';
 import { useLocation, useRoutes } from 'react-router';
+import Animate from './animate';
 import CustomHeader from './header';
 import Menu from './menu';
 import './style.less';
@@ -39,7 +41,9 @@ const CustomLayout = ({ routers = [] }) => {
   return (
     <>
       {isIndependent ? (
-        <Suspense fallback={<Spin dot />}>{useRoutes(routers)}</Suspense>
+        <Animate>
+          <Suspense fallback={<Spin dot />}>{useRoutes(routers)}</Suspense>
+        </Animate>
       ) : (
         <Layout className="h-[100vh]">
           <Layout>
@@ -59,8 +63,11 @@ const CustomLayout = ({ routers = [] }) => {
               <Header>
                 <CustomHeader />
               </Header>
-              <Content className="m-1 p-2 rounded bg-[var(--color-bg-1)]">
-                <Suspense fallback={<Spin dot />}>{useRoutes(routers)}</Suspense>
+
+              <Content className=" relative m-1 p-2 rounded bg-[var(--color-bg-1)]">
+                <Suspense fallback={<Spin className="absolute inset-0 flex justify-center items-center" dot />}>
+                  <Animate>{useRoutes(routers)}</Animate>
+                </Suspense>
               </Content>
             </div>
           </Layout>

src/layout/menu.tsx

@@ -1,4 +1,4 @@
-import menuConfig from '@/config/menu';
+import menuConfig from '@/router/menu';
 import { Menu, Slider } from '@arco-design/web-react';
 import { IconApps, IconBug, IconBulb } from '@arco-design/web-react/icon';
 import React, { useState } from 'react';

src/pages/login/loginForm.tsx

@@ -1,4 +1,4 @@
-import { TOKEN_KEY } from '@/config/const';
+import { TOKEN_KEY } from '@/router/const';
 import { setCookie } from '@/utils/cookie';
 import { Button, Form, Input, Message } from '@arco-design/web-react';
 import React from 'react';

src/pages/login/registerForm.tsx

@@ -1,4 +1,4 @@
-import { TOKEN_KEY } from '@/config/const';
+import { TOKEN_KEY } from '@/router/const';
 import { setCookie } from '@/utils/cookie';
 import { Button, Form, Input, Message } from '@arco-design/web-react';
 import React from 'react';

src/utils/cookie.ts

@@ -1,4 +1,4 @@
-import { APP_NAME } from '@/config/const';
+import { APP_NAME } from '@/router/const';
 
 /**
  * set cookie