feat: 登录背景支持

.vscode/settings.json

@@ -6,13 +6,13 @@
   "prettier.enable": false,
   "editor.formatOnSave": false,
 
-  // "stylelint.enable": true,
-  // "stylelint.validate": ["css", "less"],
+  "stylelint.enable": true,
+  "stylelint.validate": ["css", "less"],
 
   // Auto fix
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit",
-    // "source.fixAll.stylelint": "explicit",
+    "source.fixAll.stylelint": "explicit",
     "source.organizeImports": "never"
   },
 

package.json

@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "@arco-design/web-react": "^2.62.0",
+    "@pansy/classnames": "^1.0.1",
     "@pansy/react-amap": "^2.20.1",
     "@pansy/react-mapbox-gl": "^1.8.1",
     "@rcuse/core": "^0.16.0",
@@ -89,7 +90,6 @@
     "vite-plugin-pages": "^0.32.1",
     "vite-plugin-pwa": "^0.20.0",
     "vite-plugin-react-virtualized": "^1.0.4",
-    "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^1.6.0"
   },
   "lint-staged": {

src/global.less

@@ -1,3 +1,14 @@
+#root {
+  width: 100%;
+  height: 100%;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+
 .amap-container {
   .amap-copyright, .amap-logo {
     display: none !important;

src/main.tsx

@@ -2,7 +2,9 @@ import ReactDOM from 'react-dom/client'
 import { App } from './App.tsx'
 import '@unocss/reset/tailwind.css'
 import 'nprogress/nprogress.css'
-import 'uno.css'
+import 'virtual:uno.css'
+// import 'virtual:unocss-devtools'
+import './global.less'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <App />,

src/pages/login/components/LoginPage/index.module.less

@@ -0,0 +1,18 @@
+.login {
+  min-height: 100%;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin-left: -48%;
+    background-image: url('@/assets/svg/login-bg.svg');
+    background-repeat: no-repeat;
+    background-position: 100%;
+    background-size: auto 100%;
+  }
+}

src/pages/login/components/LoginPage/index.tsx

@@ -1,12 +1,14 @@
 import React from 'react'
+import classnames from '@pansy/classnames'
+import styles from './index.module.less'
 
 interface LoginPageProps {
   children?: React.ReactNode
 }
 
 export const LoginPage = (props: LoginPageProps) => {
   return (
-    <div className="relative w-full h-full px-4">
+    <div className={classnames(styles.login, 'relative w-full h-full px-4')}>
       登录页面
       {props.children}
       <div className="i-carbon:accessibility-alt" />

src/pages/login/index.tsx

@@ -1,10 +1,9 @@
-import { Button } from '@arco-design/web-react'
 import { LoginPage } from './components/LoginPage'
 
 const Login = () => {
   return (
     <LoginPage>
-      <Button type="primary" long>登录</Button>
+
     </LoginPage>
   )
 }

src/routers/index.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
-import { CSSTransition, TransitionGroup } from 'react-transition-group'
-import { useNProgress } from '@rcuse/integrations/useNProgress';
-import { useRoutes, useLocation, Navigate } from 'react-router-dom';
+import { useRoutes, Navigate } from 'react-router-dom';
 import Login from '@/pages/login';
 import { BasicLayout } from '@/layouts/BasicLayout';
 import { LazyLoad } from './LazyLoad';
@@ -52,26 +50,10 @@ export const rootRouter: RouteObject[] = [
 ];
 
 const Router = () => {
-  const location = useLocation();
-  const { start, done } = useNProgress();
-
   return (
-    <TransitionGroup>
-      <CSSTransition
-        classNames="fade"
-        key={location.key}
-        onEnter={() => {
-          start();
-        }}
-        onEntered={() => {
-          done()
-        }}
-        appear
-        timeout={500}
-      >
-        {useRoutes(rootRouter)}
-      </CSSTransition>
-    </TransitionGroup>
+    <>
+      {useRoutes(rootRouter)}
+    </>
   )
 };
 

vite.config.ts

@@ -1,13 +1,16 @@
 import { defineConfig } from 'vite'
 import Unocss from 'unocss/vite'
+import { resolve } from 'node:path';
 import { vitePluginForArco } from '@arco-plugins/vite-react'
 import { virtualized } from 'vite-plugin-react-virtualized';
 import react from '@vitejs/plugin-react'
-import tsconfigPaths from 'vite-tsconfig-paths'
 import { visualizer } from 'rollup-plugin-visualizer'
 
 const analyze = process.env.ANALYZE;
 
+const root = process.cwd();
+const pathResolve = (pathname: string) => resolve(root, '.', pathname);
+
 // https://vitejs.dev/config/
 export default defineConfig(({ command }) => {
   return {
@@ -19,6 +22,14 @@ export default defineConfig(({ command }) => {
         },
       },
     },
+    resolve: {
+      alias: [
+        {
+          find: /@\//,
+          replacement: pathResolve('src') + '/',
+        },
+      ],
+    },
     plugins: [
       react(),
       vitePluginForArco({ }),
@@ -29,7 +40,6 @@ export default defineConfig(({ command }) => {
         open: true,
       }) as any,
       Unocss(),
-      tsconfigPaths(),
       virtualized(),
     ],
     build: {