hace 1 año · 673174d651
--- a/.env
+++ b/.env
@@ -0,0 +1,2 @@
 
				+VITE_SERVER_BASE=/api
			
 
				+# VITE_LOGIN_URL=http://localhost:3009/admin/
			
--- a/.env.production
+++ b/.env.production
@@ -0,0 +1,2 @@
 
				+# VITE_SERVER_BASE=https://api.crm2.njyunzhi.com/api/platform
			
 
				+# VITE_LOGIN_URL=https://crm2.njyunzhi.com/admin/index.html
			
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,24 @@
 
				+# Logs
			
 
				+logs
			
 
				+*.log
			
 
				+npm-debug.log*
			
 
				+yarn-debug.log*
			
 
				+yarn-error.log*
			
 
				+pnpm-debug.log*
			
 
				+lerna-debug.log*
			
 
				+
			
 
				+node_modules
			
 
				+dist
			
 
				+dist-ssr
			
 
				+*.local
			
 
				+
			
 
				+# Editor directories and files
			
 
				+.vscode/*
			
 
				+!.vscode/extensions.json
			
 
				+.idea
			
 
				+.DS_Store
			
 
				+*.suo
			
 
				+*.ntvs*
			
 
				+*.njsproj
			
 
				+*.sln
			
 
				+*.sw?
			
--- a/index.html
+++ b/index.html
@@ -0,0 +1,19 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8" />
			
 
				+  
			
 
				+  <link rel="icon" type="image/svg+xml" href="https://yz-crm.oss-cn-nanjing.aliyuncs.com/images/favicon.ico" />
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				+  <script src="./config.js"></script>
			
 
				+  <script src="./qrcode.min.js"></script>
			
 
				+  <title>商户管理</title>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <div id="root"></div>
			
 
				+  <script type="module" src="/src/main.jsx"></script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -0,0 +1,8 @@
 
				+{
			
 
				+  "compilerOptions": {
			
 
				+    "baseUrl": ".",
			
 
				+    "paths": {
			
 
				+      "@/*": ["./src/*"]
			
 
				+    }
			
 
				+  }
			
 
				+}
			
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,41 @@
 
				+{
			
 
				+  "name": "vite-project",
			
 
				+  "private": true,
			
 
				+  "version": "0.0.0",
			
 
				+  "type": "module",
			
 
				+  "scripts": {
			
 
				+    "dev": "vite",
			
 
				+    "build": "vite build",
			
 
				+    "preview": "vite preview"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "@ant-design/icons": "^4.7.0",
			
 
				+    "@ant-design/pro-components": "^2.3.13",
			
 
				+    "@wangeditor/editor": "^5.1.23",
			
 
				+    "@wangeditor/editor-for-react": "^1.0.6",
			
 
				+    "@zjxpcyc/react-tiny-store": "^3.0.3",
			
 
				+    "antd": "^4.23.4",
			
 
				+    "axios": "^1.2.0",
			
 
				+    "classnames": "^2.3.2",
			
 
				+    "echarts": "^5.4.0",
			
 
				+    "i18next": "^23.9.0",
			
 
				+    "md5": "^2.3.0",
			
 
				+    "moment": "^2.29.4",
			
 
				+    "react": "18.2.0",
			
 
				+    "react-dom": "18.2.0",
			
 
				+    "react-helmet": "^6.1.0",
			
 
				+    "react-i18next": "^14.0.5",
			
 
				+    "react-intl": "^6.6.2",
			
 
				+    "react-intl-universal": "^2.10.1",
			
 
				+    "react-router-dom": "^6.4.2",
			
 
				+    "react-transition-group": "^4.4.5"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "@types/react": "18.0.27",
			
 
				+    "@types/react-dom": "18.0.10",
			
 
				+    "@vitejs/plugin-react": "^2.0.0",
			
 
				+    "less": "^4.1.3",
			
 
				+    "vite": "^3.0.0",
			
 
				+    "vite-plugin-imp": "^2.2.0"
			
 
				+  }
			
 
				+}
			
--- a/public/config.js
+++ b/public/config.js
@@ -0,0 +1,7 @@
 
				+
			
 
				+var SERVER_BASE = 'http://api.crm.njyunzhi.com';
			
 
				+
			
 
				+// 获取真实的上传文件地址
			
 
				+function getRealPath(path) {
			
 
				+  return path;
			
 
				+}
			
--- a/public/logo.png
+++ b/public/logo.png
--- a/public/particles/particles.json
+++ b/public/particles/particles.json
@@ -0,0 +1,110 @@
 
				+{
			
 
				+  "particles": {
			
 
				+    "number": {
			
 
				+      "value": 80,
			
 
				+      "density": {
			
 
				+        "enable": true,
			
 
				+        "value_area": 800
			
 
				+      }
			
 
				+    },
			
 
				+    "color": {
			
 
				+      "value": "#1890ff"
			
 
				+    },
			
 
				+    "shape": {
			
 
				+      "type": "circle",
			
 
				+      "stroke": {
			
 
				+        "width": 0,
			
 
				+        "color": "#000000"
			
 
				+      },
			
 
				+      "polygon": {
			
 
				+        "nb_sides": 5
			
 
				+      },
			
 
				+      "image": {
			
 
				+        "src": "img/github.svg",
			
 
				+        "width": 100,
			
 
				+        "height": 100
			
 
				+      }
			
 
				+    },
			
 
				+    "opacity": {
			
 
				+      "value": 0.5,
			
 
				+      "random": false,
			
 
				+      "anim": {
			
 
				+        "enable": false,
			
 
				+        "speed": 1,
			
 
				+        "opacity_min": 0.1,
			
 
				+        "sync": false
			
 
				+      }
			
 
				+    },
			
 
				+    "size": {
			
 
				+      "value": 3,
			
 
				+      "random": true,
			
 
				+      "anim": {
			
 
				+        "enable": false,
			
 
				+        "speed": 40,
			
 
				+        "size_min": 0.1,
			
 
				+        "sync": false
			
 
				+      }
			
 
				+    },
			
 
				+    "line_linked": {
			
 
				+      "enable": true,
			
 
				+      "distance": 150,
			
 
				+      "color": "#1890ff",
			
 
				+      "opacity": 0.4,
			
 
				+      "width": 1
			
 
				+    },
			
 
				+    "move": {
			
 
				+      "enable": true,
			
 
				+      "speed": 2,
			
 
				+      "direction": "none",
			
 
				+      "random": false,
			
 
				+      "straight": false,
			
 
				+      "out_mode": "out",
			
 
				+      "bounce": false,
			
 
				+      "attract": {
			
 
				+        "enable": false,
			
 
				+        "rotateX": 600,
			
 
				+        "rotateY": 1200
			
 
				+      }
			
 
				+    }
			
 
				+  },
			
 
				+  "interactivity": {
			
 
				+    "detect_on": "canvas",
			
 
				+    "events": {
			
 
				+      "onhover": {
			
 
				+        "enable": false,
			
 
				+        "mode": "repulse"
			
 
				+      },
			
 
				+      "onclick": {
			
 
				+        "enable": false,
			
 
				+        "mode": "push"
			
 
				+      },
			
 
				+      "resize": true
			
 
				+    },
			
 
				+    "modes": {
			
 
				+      "grab": {
			
 
				+        "distance": 400,
			
 
				+        "line_linked": {
			
 
				+          "opacity": 1
			
 
				+        }
			
 
				+      },
			
 
				+      "bubble": {
			
 
				+        "distance": 400,
			
 
				+        "size": 40,
			
 
				+        "duration": 2,
			
 
				+        "opacity": 8,
			
 
				+        "speed": 3
			
 
				+      },
			
 
				+      "repulse": {
			
 
				+        "distance": 200,
			
 
				+        "duration": 0.4
			
 
				+      },
			
 
				+      "push": {
			
 
				+        "particles_nb": 4
			
 
				+      },
			
 
				+      "remove": {
			
 
				+        "particles_nb": 2
			
 
				+      }
			
 
				+    }
			
 
				+  },
			
 
				+  "retina_detect": true
			
 
				+}
			
--- a/public/particles/particles.min.js
+++ b/public/particles/particles.min.js
--- a/public/qrcode.min.js
+++ b/public/qrcode.min.js
--- a/public/vite.svg
+++ b/public/vite.svg
@@ -0,0 +1 @@
 
				+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
			
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,42 @@
 
				+#root {
			
 
				+  max-width: 1280px;
			
 
				+  margin: 0 auto;
			
 
				+  padding: 2rem;
			
 
				+  text-align: center;
			
 
				+}
			
 
				+
			
 
				+.logo {
			
 
				+  height: 6em;
			
 
				+  padding: 1.5em;
			
 
				+  will-change: filter;
			
 
				+}
			
 
				+.logo:hover {
			
 
				+  filter: drop-shadow(0 0 2em #646cffaa);
			
 
				+}
			
 
				+.logo.react:hover {
			
 
				+  filter: drop-shadow(0 0 2em #61dafbaa);
			
 
				+}
			
 
				+
			
 
				+
			
 
				+@keyframes logo-spin {
			
 
				+  from {
			
 
				+    transform: rotate(0deg);
			
 
				+  }
			
 
				+  to {
			
 
				+    transform: rotate(360deg);
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@media (prefers-reduced-motion: no-preference) {
			
 
				+  a:nth-of-type(2) .logo {
			
 
				+    animation: logo-spin infinite 20s linear;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.card {
			
 
				+  padding: 2em;
			
 
				+}
			
 
				+
			
 
				+.read-the-docs {
			
 
				+  color: #888;
			
 
				+}
			
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -0,0 +1,10 @@
 
				+import { useState } from 'react'
			
 
				+
			
 
				+
			
 
				+function App() {
			
 
				+  const [count, setCount] = useState(0)
			
 
				+
			
 
				+  return null;
			
 
				+}
			
 
				+
			
 
				+export default App
			
--- a/src/assets/react.svg
+++ b/src/assets/react.svg
@@ -0,0 +1 @@
 
				+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
			
--- a/src/components/EditableTag/Tag.jsx
+++ b/src/components/EditableTag/Tag.jsx
@@ -0,0 +1,15 @@
 
				+import React from 'react';
			
 
				+import { Button } from 'antd';
			
 
				+import { CloseOutlined } from '@ant-design/icons';
			
 
				+import './style.less'
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const { size, type, onDelete, children } = props;
			
 
				+
			
 
				+  return (
			
 
				+    <div className='tag-btn-group'>
			
 
				+      <Button size={size} type={type}>{children}</Button>
			
 
				+      <Button size={size} type="primary" icon={<CloseOutlined />} onClick={onDelete} />
			
 
				+    </div>
			
 
				+  )
			
 
				+}
			
--- a/src/components/EditableTag/index.jsx
+++ b/src/components/EditableTag/index.jsx
@@ -0,0 +1,21 @@
 
				+import React from 'react';
			
 
				+import { Button } from 'antd';
			
 
				+import Tag from './Tag';
			
 
				+import './style.less'
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const { size, type, list = [], onDelete, keyFuc, labelFunc } = props;
			
 
				+
			
 
				+  return (
			
 
				+    <div className='editable-tag-box'>
			
 
				+      {
			
 
				+        list.map((item, index) => {
			
 
				+          const key = keyFuc(item, index);
			
 
				+          const label = labelFunc(item, index);
			
 
				+
			
 
				+          return <Tag key={key} size={size} type={type} onDelete={() => onDelete(item)}>{label}</Tag>
			
 
				+        })
			
 
				+      }
			
 
				+    </div>
			
 
				+  )
			
 
				+}
			
--- a/src/components/EditableTag/style.less
+++ b/src/components/EditableTag/style.less
@@ -0,0 +1,27 @@
 
				+.tag-btn-group {
			
 
				+  .ant-btn {
			
 
				+    vertical-align: middle;
			
 
				+  }
			
 
				+
			
 
				+  .ant-btn:first-child {
			
 
				+    border-right: none;
			
 
				+  }
			
 
				+
			
 
				+  .ant-btn:last-child {
			
 
				+    // border-left: none;
			
 
				+    border-top-left-radius: 0;
			
 
				+    border-bottom-left-radius: 0;
			
 
				+    margin-left: -1px;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.editable-tag-box {
			
 
				+  display: flex;
			
 
				+  flex-wrap: wrap;
			
 
				+
			
 
				+  .tag-btn-group {
			
 
				+    flex: none;
			
 
				+    box-sizing: border-box;
			
 
				+    padding: 1em;
			
 
				+  }
			
 
				+}
			
--- a/src/components/Money/float.js
+++ b/src/components/Money/float.js
@@ -0,0 +1,4 @@
 
				+const epsilonN = N => num => Math.round( num * N + Number.EPSILON ) / N;
			
 
				+const epsilon2 = epsilonN(1e2);
			
 
				+
			
 
				+export default epsilon2;
			
--- a/src/components/Money/index.jsx
+++ b/src/components/Money/index.jsx
@@ -0,0 +1,30 @@
 
				+import { InputNumber } from "antd"
			
 
				+import { useEffect, useState } from "react"
			
 
				+import epsilon2 from './float'
			
 
				+
			
 
				+export default (props) => {
			
 
				+
			
 
				+  const { value, onChange, ...leftProps } = props
			
 
				+
			
 
				+  const [money, setMoney] = useState(0)
			
 
				+
			
 
				+  useEffect(() => {
			
 
				+    setMoney(epsilon2(value / 100))
			
 
				+  }, [value])
			
 
				+
			
 
				+  const handleChange = (val) => {
			
 
				+    onChange(epsilon2(val * 100))
			
 
				+  }
			
 
				+
			
 
				+  return (
			
 
				+    <InputNumber
			
 
				+      min='0'
			
 
				+      {...leftProps}
			
 
				+      value={money}
			
 
				+      onChange={handleChange}
			
 
				+      precision={2}
			
 
				+      formatter={value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
			
 
				+      parser={value => value.replace(/\￥\s?|(,*)/g, '')}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
--- a/src/components/Page/Curd.jsx
+++ b/src/components/Page/Curd.jsx
@@ -0,0 +1,83 @@
 
				+import React from 'react';
			
 
				+import { DrawerForm } from '@ant-design/pro-components';
			
 
				+import { Form } from 'antd';
			
 
				+import List from './List';
			
 
				+
			
 
				+const drawerProps = {
			
 
				+  destroyOnClose: true
			
 
				+}
			
 
				+export default (props) => {
			
 
				+  const { rowKey, columns, request, formProps, renderFormItems, ...leftProps } = props;
			
 
				+
			
 
				+  const [form] = Form.useForm();
			
 
				+  const listRef = React.useRef();
			
 
				+  const rowRef = React.useRef();
			
 
				+  const [open, setOpen] = React.useState(false);
			
 
				+  
			
 
				+  const onAdd = () => {
			
 
				+    rowRef.current = undefined;
			
 
				+    form.resetFields();
			
 
				+    setOpen(true);
			
 
				+  }
			
 
				+
			
 
				+  const onEdit = (row) => {
			
 
				+    rowRef.current = row;
			
 
				+    form.setFieldsValue(row);
			
 
				+    setOpen(true);
			
 
				+  }
			
 
				+
			
 
				+  const onDelete = (row) => {
			
 
				+    rowRef.current = row;
			
 
				+
			
 
				+    listRef.current.showLoading('正在操作, 请稍候...');
			
 
				+    request.del(row[rowKey]).then(() => {
			
 
				+      listRef.current.hideLoading();
			
 
				+      listRef.current.reload();
			
 
				+    }).catch(() => {
			
 
				+      listRef.current.hideLoading();
			
 
				+    });
			
 
				+  }
			
 
				+
			
 
				+  const onFinish = async (values) => {
			
 
				+    if (rowRef.current) {
			
 
				+      await request.update(rowRef.current[rowKey], {
			
 
				+        ...rowRef.current,
			
 
				+        ...values,
			
 
				+      });
			
 
				+    } else {
			
 
				+      await request.save(values);
			
 
				+    }
			
 
				+    listRef.current.reload();
			
 
				+
			
 
				+    return true;
			
 
				+  }
			
 
				+
			
 
				+  return (
			
 
				+    <>
			
 
				+      <List
			
 
				+        ref={listRef}
			
 
				+        rowKey={rowKey}
			
 
				+        columns={columns}
			
 
				+        request={request.list}
			
 
				+        onAdd={onAdd}
			
 
				+        onDelete={onDelete}
			
 
				+        onEdit={onEdit}
			
 
				+        {...leftProps}
			
 
				+      />
			
 
				+
			
 
				+      <DrawerForm
			
 
				+        submitTimeout={3000}
			
 
				+        open={open}
			
 
				+        form={form}
			
 
				+        drawerProps={drawerProps}
			
 
				+        onOpenChange={setOpen}
			
 
				+        onFinish={onFinish}
			
 
				+        {...formProps}
			
 
				+      >
			
 
				+        {
			
 
				+          renderFormItems && renderFormItems()
			
 
				+        }
			
 
				+      </DrawerForm>
			
 
				+    </>
			
 
				+  )
			
 
				+}
			
--- a/src/components/Page/Edit.jsx
+++ b/src/components/Page/Edit.jsx
@@ -0,0 +1,93 @@
 
				+import React from 'react';
			
 
				+import { Button, Card, Form } from 'antd';
			
 
				+import { useSearchParams, useNavigate } from "react-router-dom";
			
 
				+import useBool from '@/utils/hooks/useBool';
			
 
				+import Page from './index';
			
 
				+
			
 
				+const FormItem = Form.Item;
			
 
				+const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
			
 
				+
			
 
				+export default (props) => {
			
 
				+  /**
			
 
				+   * request 编辑或者新增接口
			
 
				+   * dataFunc 将 form 表单数据转换为接口需要格式, 一般情况下不需要这个操作
			
 
				+   * formDataFunc 将接口返回的值转换为 form 表单数据格式, 一般情况下不需要这个操作
			
 
				+   * width form 表单宽度, 默认 800px
			
 
				+   */
			
 
				+  const { request, dataFunc, formDataFunc, width = '800px', onFinish, ...leftProps } = props;
			
 
				+  const [loading, startLoading, stopLoading] = useBool();
			
 
				+  const [form] = Form.useForm();
			
 
				+  const navigate = useNavigate();
			
 
				+
			
 
				+  // 获取 id query 参数, 如果存在说明是编辑，而不是新增
			
 
				+  const [params] = useSearchParams();
			
 
				+  const id = params.get("id");
			
 
				+  
			
 
				+  const navBack = React.useCallback(() => {
			
 
				+    const t = setTimeout(() => {
			
 
				+      navigate(-1);
			
 
				+      clearTimeout(t);
			
 
				+    }, 600);
			
 
				+  }, [navigate]);
			
 
				+
			
 
				+  // 表单提交
			
 
				+  const onSubmit = (values) => {    
			
 
				+    startLoading();
			
 
				+    // 可能需要转换下格式
			
 
				+    const data = dataFunc ? dataFunc(id, values) : values;
			
 
				+    if (id) {
			
 
				+      request.update(id, data).then((res) => {
			
 
				+        stopLoading();
			
 
				+        if (onFinish) {
			
 
				+          onFinish(res);
			
 
				+        } else {
			
 
				+          navBack();
			
 
				+        }
			
 
				+      }).catch(stopLoading);
			
 
				+    } else {
			
 
				+      request.save(data)
			
 
				+        .then((res) => {
			
 
				+          stopLoading();
			
 
				+          if (onFinish) {
			
 
				+            onFinish(res);
			
 
				+          } else {
			
 
				+            navBack();
			
 
				+          }
			
 
				+        }).catch(stopLoading);
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  // 查询详情
			
 
				+  React.useEffect(() => {
			
 
				+    if (id && request) {
			
 
				+      request.get(id).then(res => {
			
 
				+        // 此处可能需要转换下数据格式
			
 
				+        const formData = formDataFunc ? formDataFunc(res) : res;
			
 
				+        form.setFieldsValue(formData);
			
 
				+      })
			
 
				+    }
			
 
				+  }, [request, id]);
			
 
				+
			
 
				+  return (
			
 
				+    <Page>
			
 
				+      <Card bodyStyle={{padding: '48px 24px'}}>
			
 
				+        <Form {...formItemLayout} form={form} onFinish={onSubmit} style={{width}} {...leftProps} >
			
 
				+          {props.children}
			
 
				+          <FormItem label=" " colon={false} style={{marginBottom: 0}}>
			
 
				+            <Button type="default" onClick={() => navigate(-1)}>
			
 
				+              取消
			
 
				+            </Button>
			
 
				+            <Button
			
 
				+              type="primary"
			
 
				+              htmlType="submit"
			
 
				+              style={{ marginLeft: '4em' }}
			
 
				+              loading={loading}
			
 
				+            >
			
 
				+              确认
			
 
				+            </Button>
			
 
				+          </FormItem>
			
 
				+        </Form>
			
 
				+      </Card>
			
 
				+    </Page>
			
 
				+  )
			
 
				+}
			
--- a/src/components/Page/List.jsx
+++ b/src/components/Page/List.jsx
@@ -0,0 +1,90 @@
 
				+import React from 'react';
			
 
				+import { Button, Popconfirm, message } from 'antd';
			
 
				+import { ProTable } from '@ant-design/pro-components';
			
 
				+import { queryTable } from '@/utils/request';
			
 
				+import Page from './index';
			
 
				+
			
 
				+export default React.forwardRef((props, ref) => {
			
 
				+  /**
			
 
				+   * request 与 ProTable 定义不同，这个只是普通的接口即可
			
 
				+   */
			
 
				+  const { request, rowKey, columns, onAdd, onDelete, onEdit, toolBarRender, columnOptionRender, ...leftProps } = props;
			
 
				+  const actionRef = React.useRef();
			
 
				+  const hideRef = React.useRef();
			
 
				+
			
 
				+  const api = React.useMemo(() => queryTable(request), [request]);
			
 
				+// console.log(request)
			
 
				+  // 统一实现操作列
			
 
				+  const cols = React.useMemo(() => [
			
 
				+    ...columns,
			
 
				+    {
			
 
				+      title: '操作',
			
 
				+      valueType: 'option',
			
 
				+      key: 'option',
			
 
				+      ellipsis: true,
			
 
				+      fixed: 'right',
			
 
				+      render: (_, record) => [
			
 
				+        (
			
 
				+          onEdit &&
			
 
				+          <Button style={{ padding: 0 }} type="link" key={1} onClick={() => onEdit(record)}>
			
 
				+            编辑
			
 
				+          </Button>
			
 
				+        ),
			
 
				+        (
			
 
				+          onDelete &&
			
 
				+          <Popconfirm
			
 
				+            key={3}
			
 
				+            title="您是否确认删除 ?"
			
 
				+            onConfirm={() => onDelete(record)}
			
 
				+            okText="确定"
			
 
				+            cancelText="取消"
			
 
				+          >
			
 
				+            <Button style={{ padding: 0 }} type="link">
			
 
				+              删除
			
 
				+            </Button>
			
 
				+          </Popconfirm>
			
 
				+        ),
			
 
				+        ...(columnOptionRender ? columnOptionRender(_, record) : []),
			
 
				+      ].filter(Boolean),
			
 
				+    },
			
 
				+  ], [columns, onEdit, onDelete]);
			
 
				+
			
 
				+  React.useImperativeHandle(ref, () => {
			
 
				+    const showLoading = msg => (hideRef.current = message.loading(msg || '操作中, 请稍候...'));
			
 
				+    const hideLoading = () => hideRef.current && hideRef.current();
			
 
				+    const reload = () => actionRef.current?.reload && actionRef.current.reload();
			
 
				+
			
 
				+    return {
			
 
				+      showLoading,
			
 
				+      hideLoading,
			
 
				+      reload,
			
 
				+      actionRef: actionRef,
			
 
				+    }
			
 
				+  }, []);
			
 
				+
			
 
				+  return (
			
 
				+    <Page>
			
 
				+      <ProTable
			
 
				+        rowKey={rowKey}
			
 
				+        columns={cols}
			
 
				+        request={api}
			
 
				+        cardBordered
			
 
				+        actionRef={actionRef}
			
 
				+        toolBarRender={() => [
			
 
				+          (
			
 
				+            onAdd &&
			
 
				+            <Button
			
 
				+              key="1"
			
 
				+              type="primary"
			
 
				+              onClick={onAdd}
			
 
				+            >
			
 
				+              新增
			
 
				+            </Button>
			
 
				+          ),
			
 
				+          ...(toolBarRender ? toolBarRender() : []),
			
 
				+        ].filter(Boolean)}
			
 
				+        {...leftProps}
			
 
				+      />
			
 
				+    </Page>
			
 
				+  )
			
 
				+});
			
--- a/src/components/Page/index.jsx
+++ b/src/components/Page/index.jsx
@@ -0,0 +1,23 @@
 
				+import React from 'react';
			
 
				+import { Typography } from 'antd';
			
 
				+import useRoute from '@/routes/hooks/useRoute';
			
 
				+
			
 
				+const pageStyle = {
			
 
				+  margin: '0 24px 24px 24px',
			
 
				+  // margin: '24px',
			
 
				+  minHeight: 'calc(100% - 24px)',
			
 
				+}
			
 
				+const { Title } = Typography;
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const { meta = {} } = useRoute() || {};
			
 
				+  const style = meta.noLayout ? { height: '100%' } : pageStyle;
			
 
				+  const title = props.title || meta.title;
			
 
				+
			
 
				+  return (
			
 
				+    <div style={style}>
			
 
				+      { title && !meta.noLayout && <Title level={3} style={{ paddingBottom: '12px', fontWeight: 400 }}>{ title }</Title> }
			
 
				+      {props.children}
			
 
				+    </div>
			
 
				+  )
			
 
				+}
			
--- a/src/components/Upload/Upload.jsx
+++ b/src/components/Upload/Upload.jsx
@@ -0,0 +1,10 @@
 
				+import { Upload } from 'antd';
			
 
				+import { uploadFile } from './request'
			
 
				+
			
 
				+export default (props) => {
			
 
				+  return (
			
 
				+    <Upload {...props} customRequest={uploadFile} >
			
 
				+      {props.children}
			
 
				+    </Upload>
			
 
				+  )
			
 
				+}
			
--- a/src/components/Upload/UploadImage.jsx
+++ b/src/components/Upload/UploadImage.jsx
@@ -0,0 +1,60 @@
 
				+import React, { useState } from 'react';
			
 
				+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
			
 
				+import Upload from './Upload';
			
 
				+
			
 
				+function beforeUpload(file) {
			
 
				+  const isImage = file.type === 'image/jpeg' || file.type === 'image/png'||file.type==='image/gif';
			
 
				+  if (!isImage) {
			
 
				+    message.error('请上传 JPG , PNG或GIF 图片!');
			
 
				+  }
			
 
				+  const isLt10M = file.size / 1024 / 1024 < 10;
			
 
				+  if (!isLt10M) {
			
 
				+    message.error('图片大小必须小于 10MB!');
			
 
				+  }
			
 
				+
			
 
				+  return isImage && isLt10M;
			
 
				+}
			
 
				+
			
 
				+const UploadButton = (props) => (
			
 
				+  <div>
			
 
				+    {props.loading ? <LoadingOutlined /> : <PlusOutlined />}
			
 
				+    <div style={{ marginTop: 8 }}>上传</div>
			
 
				+  </div>
			
 
				+);
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const { value, onChange } = props;
			
 
				+
			
 
				+  const [loading, setLoading] = useState(false);
			
 
				+
			
 
				+  const handleChange = info => {
			
 
				+    if (info.file.status === 'uploading') {
			
 
				+      setLoading(true);
			
 
				+      return;
			
 
				+    }
			
 
				+    if (info.file.status === 'error') {
			
 
				+      setLoading(false);
			
 
				+      return;
			
 
				+    }
			
 
				+
			
 
				+    if (info.file.status === 'done') {
			
 
				+      setLoading(false);
			
 
				+      const { url, fileType } = info.file.response;
			
 
				+      onChange(url);
			
 
				+    }
			
 
				+  };
			
 
				+
			
 
				+  const previewUrl = getRealPath ? getRealPath(value) : value;
			
 
				+
			
 
				+  return (
			
 
				+    <Upload
			
 
				+      listType="picture-card"
			
 
				+      className="image-uploader"
			
 
				+      showUploadList={false}
			
 
				+      beforeUpload={beforeUpload}
			
 
				+      onChange={handleChange}
			
 
				+    >
			
 
				+      {value ? <img src={previewUrl} alt="avatar" style={{ width: '100%', height: '100%' }} /> : <UploadButton loading={loading} />}
			
 
				+    </Upload>
			
 
				+  );
			
 
				+}
			
--- a/src/components/Upload/UploadImageList.jsx
+++ b/src/components/Upload/UploadImageList.jsx
@@ -0,0 +1,115 @@
 
				+
			
 
				+import React, { useEffect, useState } from 'react';
			
 
				+import { Modal } from 'antd'
			
 
				+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
			
 
				+import Upload from './Upload';
			
 
				+
			
 
				+function beforeUpload(file) {
			
 
				+  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'|| file.type === 'image/gif';
			
 
				+  if (!isJpgOrPng) {
			
 
				+    message.error('请上传 JPG,PNG 或 GIF 图片!');
			
 
				+  }
			
 
				+  const isLt10M = file.size / 1024 / 1024 < 10;
			
 
				+  if (!isLt10M) {
			
 
				+    message.error('图片大小必须小于 10MB!');
			
 
				+  }
			
 
				+
			
 
				+  return isJpgOrPng && isLt10M;
			
 
				+}
			
 
				+
			
 
				+const UploadButton = (props) => (
			
 
				+  <div>
			
 
				+    {props.loading ? <LoadingOutlined /> : <PlusOutlined />}
			
 
				+    <div style={{ marginTop: 8 }}>上传</div>
			
 
				+  </div>
			
 
				+);
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const { value, onChange, input, output } = props;
			
 
				+
			
 
				+  const [loading, setLoading] = useState(false);
			
 
				+  const [previewVisible, setPreviewVisible] = useState(false);
			
 
				+  const [previewImage, setPreviewImage] = useState();
			
 
				+  const [fileList, setFileList] = useState([]);
			
 
				+
			
 
				+  const handleChange = info => {
			
 
				+    if (info.file.status === 'uploading') {
			
 
				+      setLoading(true);
			
 
				+      return;
			
 
				+    }
			
 
				+    if (info.file.status === 'error') {
			
 
				+      setLoading(false);
			
 
				+      return;
			
 
				+    }
			
 
				+
			
 
				+    if (info.file.status === 'removed') {
			
 
				+      toggleChange(info.fileList)
			
 
				+    }
			
 
				+  };
			
 
				+
			
 
				+  const handleSuccess = ({url}) => {
			
 
				+    setLoading(false)
			
 
				+    const inx = fileList?.length ? fileList.length + 1 : 1
			
 
				+    const list = fileList.concat({
			
 
				+      url,
			
 
				+      uid: `new-${inx}`,
			
 
				+      status: 'done'
			
 
				+    })
			
 
				+    toggleChange(list)
			
 
				+  }
			
 
				+
			
 
				+  const toggleChange = (list) => {
			
 
				+    if (output) {
			
 
				+      onChange(list.map(x => output(x)))
			
 
				+    } else {
			
 
				+      onChange(list)
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  const handlePreview = (file) => {
			
 
				+    setPreviewImage(file.url)
			
 
				+    setPreviewVisible(true)
			
 
				+  }
			
 
				+
			
 
				+  useEffect(() => {
			
 
				+    if (input) {
			
 
				+      const lst = (value || []).map((it) => {
			
 
				+        const { uid, url } = input(it)
			
 
				+        return {
			
 
				+          uid,
			
 
				+          url,
			
 
				+          status: 'done',
			
 
				+          raw: it,
			
 
				+        }
			
 
				+      })
			
 
				+      setFileList(lst)
			
 
				+    } else {
			
 
				+      setFileList(value || [])
			
 
				+    }
			
 
				+  }, [value])
			
 
				+
			
 
				+  return (
			
 
				+    <>
			
 
				+      <Upload
			
 
				+        listType="picture-card"
			
 
				+        className="image-uploader"
			
 
				+        fileList={fileList}
			
 
				+        beforeUpload={beforeUpload}
			
 
				+        onChange={handleChange}
			
 
				+        onPreview={handlePreview}
			
 
				+        onSuccess={handleSuccess}
			
 
				+      >
			
 
				+        <UploadButton loading={loading} />
			
 
				+      </Upload>
			
 
				+      <Modal
			
 
				+        visible={previewVisible}
			
 
				+        title="图片预览"
			
 
				+        footer={null}
			
 
				+        onCancel={() => setPreviewVisible(false)}
			
 
				+      >
			
 
				+        <img alt="example" style={{ width: '100%' }} src={previewImage} />
			
 
				+      </Modal>
			
 
				+    </>
			
 
				+  );
			
 
				+}
			
 
				+
			
--- a/src/components/Upload/UploadVideo.jsx
+++ b/src/components/Upload/UploadVideo.jsx
@@ -0,0 +1,94 @@
 
				+import React, { useState, useRef, useEffect } from 'react';
			
 
				+import { Button } from 'antd'
			
 
				+import Upload from './Upload';
			
 
				+// import { uplodeNoteImage } from '@/services/note';
			
 
				+import styles from './style.less';
			
 
				+
			
 
				+function beforeUpload(file) {
			
 
				+  const isMp4 = file.type === 'video/mp4';
			
 
				+  if (!isMp4) {
			
 
				+    message.error('请上传 MP4 视频!');
			
 
				+  }
			
 
				+
			
 
				+  return isMp4;
			
 
				+}
			
 
				+
			
 
				+export default (props) => {
			
 
				+  //onPoster 改变主图事件   isScreenshot判断父组件是否需要截屏按钮
			
 
				+  const { value, onChange, onPoster, isScreenshot } = props;
			
 
				+  const [loading, setLoading] = useState(false);//上传按钮loading框
			
 
				+  const [capturing, setCapturing] = useState(false);//截屏按钮loading框
			
 
				+  const [video, setVideo] = useState()//当前上传的视频
			
 
				+  const [isVideoReady, setIsVideoReady] = useState(false)//判断视频是否加载成功
			
 
				+  
			
 
				+  const canvasRef = useRef()
			
 
				+  const videoRef = useRef()
			
 
				+
			
 
				+  useEffect(() => {
			
 
				+    setVideo(value)//父组件的视频获取成功时改变当前页面的视频
			
 
				+  }, [value])
			
 
				+
			
 
				+  const handleChange = info => {
			
 
				+    if (info.file.status === 'uploading') {
			
 
				+      setLoading(true);
			
 
				+      return;
			
 
				+    }
			
 
				+    if (info.file.status === 'error') {
			
 
				+      setLoading(false);
			
 
				+      return;
			
 
				+    }
			
 
				+    if (info.file.status === 'done') {
			
 
				+      onChange(info.file.response);
			
 
				+      setLoading(false);
			
 
				+    }
			
 
				+  };
			
 
				+
			
 
				+  //开始截图
			
 
				+  const handelScreenshot = () => {
			
 
				+    const ctx = canvasRef.current.getContext("2d");  
			
 
				+    ctx.drawImage(videoRef.current, 0, 0);    
			
 
				+    const image = canvasRef.current.toDataURL("image/png", 0.9)
			
 
				+    setCapturing(true)
			
 
				+    // uplodeNoteImage({ base64: image }).then((res) => {
			
 
				+    //   onPoster(res)
			
 
				+    //   setCapturing(false)
			
 
				+    // })
			
 
				+  }
			
 
				+
			
 
				+  //视频加载成功事件
			
 
				+  const handleVideoReady = (e) => {
			
 
				+    setIsVideoReady(true)
			
 
				+    canvasRef.current.width = e.target.videoWidth;
			
 
				+    canvasRef.current.height = e.target.videoHeight;
			
 
				+  }
			
 
				+
			
 
				+  return (
			
 
				+    <div className={styles['video-uploader']}>
			
 
				+      <Upload
			
 
				+        className="image-uploader"
			
 
				+        showUploadList={false}
			
 
				+        beforeUpload={beforeUpload}
			
 
				+        onChange={handleChange}
			
 
				+      >
			
 
				+        <div style={{ maxWidth: '1px', maxHeight: '1px', overflow: 'hidden' }}>
			
 
				+          <canvas ref={canvasRef}></canvas>
			
 
				+        </div>
			
 
				+        <Button loading={loading}>
			
 
				+          点击上传视频 (MP4)
			
 
				+        </Button>
			
 
				+
			
 
				+      </Upload>
			
 
				+      {
			
 
				+        isScreenshot && (
			
 
				+          // disabled={!isVideoReady} 当视频准备成功时截屏按钮可以点击  否则不能点击
			
 
				+          <Button loading={capturing} style={{ marginLeft: '1em' }} onClick={handelScreenshot} disabled={!isVideoReady}>截屏</Button>
			
 
				+        )
			
 
				+      }
			
 
				+      {
			
 
				+        !!video && (
			
 
				+          <video ref={videoRef} width="320" height='500' crossOrigin='anonymous' controls src={video} onCanPlay={handleVideoReady}></video>
			
 
				+        )
			
 
				+      }
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
--- a/src/components/Upload/index.jsx
+++ b/src/components/Upload/index.jsx
@@ -0,0 +1,11 @@
 
				+import Upload from './Upload';
			
 
				+import UploadImage from './UploadImage';
			
 
				+import UploadImageList from './UploadImageList';
			
 
				+import UploadVideo from './UploadVideo';
			
 
				+
			
 
				+export {
			
 
				+  Upload,
			
 
				+  UploadImage,
			
 
				+  UploadImageList,
			
 
				+  UploadVideo,
			
 
				+}
			
--- a/src/components/Upload/request.js
+++ b/src/components/Upload/request.js
@@ -0,0 +1,32 @@
 
				+import request from '@/utils/request';
			
 
				+
			
 
				+const upload = (file, fileType = 'image') => {
			
 
				+  const formData = new FormData();
			
 
				+  formData.append("file", file);
			
 
				+  formData.append("fileType", fileType);
			
 
				+
			
 
				+  return request('/api/admin/file', {
			
 
				+    method: 'post',
			
 
				+    data: formData,
			
 
				+    headers: {
			
 
				+      'Content-Type': 'multipart/form-data',
			
 
				+    }
			
 
				+  });
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * 上传文件
			
 
				+ * @returns 
			
 
				+ */
			
 
				+export function uploadFile(params) {
			
 
				+  const { file, onSuccess, onError } = params;
			
 
				+  upload(file).then((res) => {
			
 
				+    onSuccess(res, file)
			
 
				+  }).catch((e) => {
			
 
				+    onError(e)
			
 
				+  });
			
 
				+
			
 
				+  return {
			
 
				+    abort: () => {},
			
 
				+  };
			
 
				+}
			
--- a/src/components/Upload/style.less
+++ b/src/components/Upload/style.less
@@ -0,0 +1,7 @@
 
				+.video-uploader {
			
 
				+  video {
			
 
				+    margin-top: 2em;
			
 
				+    width: 100%;
			
 
				+    max-height: 360px;
			
 
				+  }
			
 
				+}
			
--- a/src/components/Wangeditor/index.jsx
+++ b/src/components/Wangeditor/index.jsx
@@ -0,0 +1,87 @@
 
				+import React, { useState, useEffect } from "react";
			
 
				+import "@wangeditor/editor/dist/css/style.css";
			
 
				+import { Editor, Toolbar } from "@wangeditor/editor-for-react";
			
 
				+
			
 
				+// 工具栏配置参考
			
 
				+// https://www.cnblogs.com/-roc/p/16400965.html
			
 
				+
			
 
				+const defaultStyle = {
			
 
				+  border: "1px solid #ccc",
			
 
				+  zIndex: 100,
			
 
				+  marginTop: "15px"
			
 
				+}
			
 
				+
			
 
				+function MyEditor(props) {
			
 
				+
			
 
				+  const style = React.useMemo(() => ({ ...defaultStyle, ...(props.style || {}) }), [props.style])
			
 
				+
			
 
				+  const {
			
 
				+    value = "",
			
 
				+    onChange = (e) => {
			
 
				+      setHtml(e);
			
 
				+    },
			
 
				+    toolbarConfig = {
			
 
				+      excludeKeys: ["group-image", "group-video"],
			
 
				+    },
			
 
				+    editorConfig = {
			
 
				+      placeholder: "请输入内容...",
			
 
				+    },
			
 
				+    readonly = false,
			
 
				+  } = props;
			
 
				+  const [editor, setEditor] = useState(null); // 存储 editor 实例
			
 
				+  const [html, setHtml] = useState("");
			
 
				+ 
			
 
				+  // 模拟 ajax 请求，异步设置 html
			
 
				+  useEffect(() => {
			
 
				+    setHtml(value || "");
			
 
				+  }, [value]);
			
 
				+
			
 
				+  // 及时销毁 editor
			
 
				+  useEffect(() => {
			
 
				+    return () => {
			
 
				+      if (editor == null) return;
			
 
				+      editor.destroy();
			
 
				+      setEditor(null);
			
 
				+    };
			
 
				+  }, [editor]);
			
 
				+
			
 
				+  function insertText() {
			
 
				+    if (editor == null) return;
			
 
				+    editor.insertText(" hello ");
			
 
				+  }
			
 
				+
			
 
				+  function printHtml() {
			
 
				+    if (editor == null) return;
			
 
				+    console.log(editor.getHtml());
			
 
				+  }
			
 
				+
			
 
				+  const handleChange = (editor) => {
			
 
				+    const raw = editor.getHtml();
			
 
				+    if (raw !== '<p><br></p>') {
			
 
				+      onChange(raw)
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  return !readonly ? (
			
 
				+    <div className={props.className} style={style}>
			
 
				+      <Toolbar
			
 
				+        editor={editor}
			
 
				+        defaultConfig={toolbarConfig}
			
 
				+        mode="default"
			
 
				+        style={{ borderBottom: "1px solid #ccc" }}
			
 
				+      />
			
 
				+      <Editor
			
 
				+        defaultConfig={editorConfig}
			
 
				+        value={html}
			
 
				+        onCreated={setEditor}
			
 
				+        onChange={handleChange}
			
 
				+        mode="default"
			
 
				+        style={{ height: "500px" }}
			
 
				+      />
			
 
				+    </div>
			
 
				+  ) : (
			
 
				+    <div dangerouslySetInnerHTML={{ __html: value }}></div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export default MyEditor;
			
--- a/src/components/chart/index.jsx
+++ b/src/components/chart/index.jsx
@@ -0,0 +1,81 @@
 
				+import React, { useRef, useEffect } from 'react';
			
 
				+
			
 
				+// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
			
 
				+import * as echarts from 'echarts/core';
			
 
				+// 引入图表，图表后缀都为 Chart
			
 
				+import {
			
 
				+  BarChart,
			
 
				+  PieChart,
			
 
				+  LineChart,
			
 
				+  GaugeChart,
			
 
				+  RadarChart,
			
 
				+  PictorialBarChart,
			
 
				+} from 'echarts/charts';
			
 
				+// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
			
 
				+import {
			
 
				+  TitleComponent,
			
 
				+  TooltipComponent,
			
 
				+  ToolboxComponent,
			
 
				+  GridComponent,
			
 
				+  DatasetComponent,
			
 
				+  LegendComponent,
			
 
				+  DataZoomComponent,
			
 
				+  TransformComponent,
			
 
				+  VisualMapComponent,
			
 
				+} from 'echarts/components';
			
 
				+// 标签自动布局，全局过渡动画等特性
			
 
				+import { LabelLayout, UniversalTransition } from 'echarts/features';
			
 
				+// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
			
 
				+import { CanvasRenderer } from 'echarts/renderers';
			
 
				+
			
 
				+// 注册必须的组件
			
 
				+echarts.use([
			
 
				+  TitleComponent,
			
 
				+  TooltipComponent,
			
 
				+  ToolboxComponent,
			
 
				+  GridComponent,
			
 
				+  DatasetComponent,
			
 
				+  LegendComponent,
			
 
				+  DataZoomComponent,
			
 
				+  TransformComponent,
			
 
				+  VisualMapComponent,
			
 
				+  BarChart,
			
 
				+  PieChart,
			
 
				+  LineChart,
			
 
				+  GaugeChart,
			
 
				+  RadarChart,
			
 
				+  PictorialBarChart,
			
 
				+  LabelLayout,
			
 
				+  UniversalTransition,
			
 
				+  CanvasRenderer
			
 
				+]);
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const { className, style, option } = props;
			
 
				+
			
 
				+  const domRef = useRef();
			
 
				+  const chartRef = useRef();
			
 
				+
			
 
				+  useEffect(() => {
			
 
				+    if (!chartRef.current) {
			
 
				+      chartRef.current = echarts.init(domRef.current);
			
 
				+    }
			
 
				+
			
 
				+    const resize = () => {
			
 
				+      const t = setTimeout(() => {
			
 
				+        clearTimeout(t);
			
 
				+        chartRef.current.resize();
			
 
				+      }, 100);
			
 
				+    };
			
 
				+
			
 
				+    chartRef.current.setOption(option);
			
 
				+    resize();
			
 
				+
			
 
				+    window.addEventListener('resize', resize);    
			
 
				+    return () => window.removeEventListener('resize', resize);
			
 
				+  }, [option]);
			
 
				+
			
 
				+  return (
			
 
				+    <div className={className} style={style} ref={domRef}></div>
			
 
				+  )
			
 
				+}
			
--- a/src/index.less
+++ b/src/index.less
@@ -0,0 +1,79 @@
 
				+@import './theme.less';
			
 
				+
			
 
				+html,
			
 
				+body,
			
 
				+#root {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  margin: 0;
			
 
				+}
			
 
				+
			
 
				+:root {
			
 
				+  --theme-color: #fff;
			
 
				+  --theme-front: #000;
			
 
				+  --theme-main-bg: #f1f7fe; // #f0f2f5;
			
 
				+  --header-height: 60px;
			
 
				+  --siderbar-width: 240px;
			
 
				+}
			
 
				+
			
 
				+.main-layout {
			
 
				+  height: 100vh;
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+}
			
 
				+
			
 
				+.fixd-header {
			
 
				+  width: 100%;
			
 
				+  position: fixed;
			
 
				+  top: 0;
			
 
				+  height: var(--header-height);
			
 
				+  line-height: var(--header-height);
			
 
				+  z-index: 100;
			
 
				+}
			
 
				+
			
 
				+.ant-layout-header {
			
 
				+  line-height: var(--header-height);
			
 
				+  z-index: 10;
			
 
				+}
			
 
				+
			
 
				+.layout-sidebar {
			
 
				+  width: var(--siderbar-width);
			
 
				+  color: var(--theme-front);
			
 
				+}
			
 
				+
			
 
				+.ant-card,
			
 
				+.ant-pro-card {
			
 
				+  border-radius: 8px !important;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+// 兼容 360
			
 
				+.ant-pro-sider-collapsed-button {
			
 
				+  top: 18px;
			
 
				+  right: -13px;
			
 
				+}
			
 
				+
			
 
				+.ant-pro .ant-pro-layout .ant-pro-sider-logo {
			
 
				+  padding: 16px;
			
 
				+}
			
 
				+
			
 
				+.ant-pro .ant-pro-query-filter .ant-form-item {
			
 
				+  margin: 0;
			
 
				+}
			
 
				+
			
 
				+.ant-pro-page-container .ant-pro-page-container-warp-page-header~.ant-pro-grid-content .ant-pro-page-container-children-content {
			
 
				+  margin: 8px 40px 40px 40px;
			
 
				+}
			
 
				+
			
 
				+.ant-pro-table-list-toolbar-container {
			
 
				+  padding: 16px 0;
			
 
				+}
			
 
				+
			
 
				+.ant-pro-card .ant-pro-card-body {
			
 
				+  padding: 16px 24px;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.pointer {
			
 
				+  cursor: pointer;
			
 
				+}
			
--- a/src/layouts/AuthLayout/Main.jsx
+++ b/src/layouts/AuthLayout/Main.jsx
@@ -0,0 +1,31 @@
 
				+import React from "react";
			
 
				+import { Layout } from "antd";
			
 
				+import { useLocation, Outlet, useNavigate } from "react-router-dom";
			
 
				+import { useModel } from "@/store";
			
 
				+import useRoute from "@/routes/hooks/useRoute";
			
 
				+import SiderBar from "./components/SiderBar";
			
 
				+import Header from "./components/Header";
			
 
				+import Container from "./components/Container";
			
 
				+import { authRoutes } from "@/routes/routes";
			
 
				+import { getMenuItems } from "@/routes/menus";
			
 
				+
			
 
				+import "./style.less";
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const { theme } = useModel("system");
			
 
				+  const { user } = useModel("user");
			
 
				+  const navigate = useNavigate();
			
 
				+  const location = useLocation();
			
 
				+  const menus = getMenuItems(authRoutes);
			
 
				+
			
 
				+
			
 
				+  return (
			
 
				+    <Layout className={theme} style={{ height: "100vh" }}>
			
 
				+      <Header theme={theme} user={user} />
			
 
				+      <Layout style={{ height: "calc(100vh - var(--header-height))" }}>
			
 
				+        <SiderBar theme={theme} menus={menus} location={location} />
			
 
				+        <Container location={location} />
			
 
				+      </Layout>
			
 
				+    </Layout>
			
 
				+  );
			
 
				+};
			
--- a/src/layouts/AuthLayout/RedirectLogin.jsx
+++ b/src/layouts/AuthLayout/RedirectLogin.jsx
@@ -0,0 +1,3 @@
 
				+import { Navigate } from "react-router-dom";
			
 
				+
			
 
				+export default () => <Navigate to="/login" />;
			
--- a/src/layouts/AuthLayout/RequireLogin.jsx
+++ b/src/layouts/AuthLayout/RequireLogin.jsx
@@ -0,0 +1,31 @@
 
				+import React, { useState, useEffect } from "react";
			
 
				+import { useNavigate } from "react-router-dom";
			
 
				+import { useModel } from "@/store";
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const { user, getCurrentUser } = useModel("user");
			
 
				+  const navigate = useNavigate();
			
 
				+  const [userStatus, setUserStatus] = useState(user && user.userId ? 1 : 0);
			
 
				+
			
 
				+  useEffect(() => {
			
 
				+    if (!user || !user.userId) {
			
 
				+      getCurrentUser()
			
 
				+        .then((res) => {
			
 
				+          setUserStatus(1);
			
 
				+        })
			
 
				+        .catch((err) => {
			
 
				+          console.error(err);
			
 
				+          setUserStatus(-1);
			
 
				+        });
			
 
				+    }
			
 
				+  }, []);
			
 
				+
			
 
				+  useEffect(() => {
			
 
				+    if (userStatus === -1) {
			
 
				+      navigate("/login");
			
 
				+      return;
			
 
				+    }
			
 
				+  }, [userStatus]);
			
 
				+
			
 
				+  return userStatus < 1 ? null : props.children;
			
 
				+};
			
--- a/src/layouts/AuthLayout/components/Background.jsx
+++ b/src/layouts/AuthLayout/components/Background.jsx
@@ -0,0 +1,72 @@
 
				+import React from 'react'
			
 
				+
			
 
				+const wrapperStyle = {
			
 
				+  width: '100%',
			
 
				+  height: '100%',
			
 
				+  position: 'absolute',
			
 
				+  zIndex: 0,
			
 
				+  top: 0,
			
 
				+  left: 0,
			
 
				+  overflow: 'hidden',
			
 
				+}
			
 
				+
			
 
				+const colors = [
			
 
				+  '#fff1f0',
			
 
				+  '#fff2e8',
			
 
				+  '#fff7e6',
			
 
				+  '#fffbe6',
			
 
				+  '#feffe6',
			
 
				+  '#fcffe6',
			
 
				+  '#f6ffed',
			
 
				+  '#e6fffb',
			
 
				+  '#e6f4ff',
			
 
				+  '#f0f5ff',
			
 
				+  '#f9f0ff',
			
 
				+  '#fff0f6',
			
 
				+]
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const ref = React.useRef();
			
 
				+
			
 
				+  const [color1, color2] = React.useMemo(() => {
			
 
				+    const inx1 = Math.floor(Math.random() * colors.length);
			
 
				+    const inx2 = Math.floor(Math.random() * colors.length);
			
 
				+
			
 
				+    return [colors[inx1], colors[inx2]];
			
 
				+  }, []);
			
 
				+
			
 
				+  React.useEffect(() => {
			
 
				+    const dom = ref.current;
			
 
				+    const canvas = dom.firstElementChild;
			
 
				+    canvas.width = dom.offsetWidth;
			
 
				+    canvas.height = dom.offsetHeight;
			
 
				+
			
 
				+    const centerX = canvas.width / 2;
			
 
				+    const centerY = canvas.height / 2;
			
 
				+    const size = centerX / 3
			
 
				+
			
 
				+    const ctx = canvas.getContext("2d");
			
 
				+    
			
 
				+    ctx.filter = `blur(200px)`;
			
 
				+
			
 
				+    ctx.beginPath()
			
 
				+    ctx.fillStyle = color1; // "#ffd8bf";
			
 
				+    ctx.ellipse(centerX + 100, centerY + 80, size, size + Math.random() * 100, Math.PI / 4, 0, 2 * Math.PI);
			
 
				+    ctx.fill();
			
 
				+    ctx.closePath();
			
 
				+
			
 
				+    ctx.beginPath()
			
 
				+    ctx.fillStyle = color2; // "#e6fffb";
			
 
				+    ctx.ellipse(centerX + 400, centerY + 120, size, size + Math.random() * 100, Math.PI / 2, 0, 2 * Math.PI);
			
 
				+    ctx.fill();
			
 
				+    ctx.closePath();
			
 
				+
			
 
				+  }, []);
			
 
				+
			
 
				+  return (
			
 
				+    <div ref={ref} style={wrapperStyle}>
			
 
				+      <canvas>
			
 
				+      </canvas>
			
 
				+    </div>
			
 
				+  )
			
 
				+}
			
--- a/src/layouts/AuthLayout/components/Container.jsx
+++ b/src/layouts/AuthLayout/components/Container.jsx
@@ -0,0 +1,31 @@
 
				+import React from 'react';
			
 
				+import { Layout } from 'antd';
			
 
				+import { Outlet } from "react-router-dom";
			
 
				+import PageTransition from './PageTransition';
			
 
				+import Footer from './Footer';
			
 
				+
			
 
				+const { Content } = Layout;
			
 
				+const marginSpace = 24;
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const { noFooter } = props;
			
 
				+  const footerRef = React.useRef();
			
 
				+  const [height, setHeight] = React.useState(`calc(100% - ${marginSpace * 2}px`);
			
 
				+
			
 
				+  React.useEffect(() => {
			
 
				+    if (footerRef.current) {
			
 
				+      setHeight(`calc(100% - ${footerRef.current.offsetHeight + marginSpace * 2}px)`);
			
 
				+    }
			
 
				+  }, [noFooter])
			
 
				+
			
 
				+  return (
			
 
				+    <div className='layout-container'>
			
 
				+      <Content style={{ minHeight: height, margin: `0 ${marginSpace}px` }}>
			
 
				+        <PageTransition location={props.location}>
			
 
				+          <Outlet />
			
 
				+        </PageTransition>
			
 
				+      </Content>
			
 
				+      <Footer ref={footerRef} />
			
 
				+    </div>
			
 
				+  )
			
 
				+}
			
--- a/src/layouts/AuthLayout/components/Footer.jsx
+++ b/src/layouts/AuthLayout/components/Footer.jsx
@@ -0,0 +1,15 @@
 
				+import React from 'react';
			
 
				+import { Layout } from 'antd';
			
 
				+import { useModel } from '@/store';
			
 
				+
			
 
				+const { Footer } = Layout;
			
 
				+
			
 
				+const year = new Date().getFullYear();
			
 
				+export default React.forwardRef((props, ref) => {
			
 
				+  const { app } = useModel('system');
			
 
				+  const copyRight = `${app.company || '南京云致'} @ ${year}`;
			
 
				+
			
 
				+  return (
			
 
				+    <Footer ref={ref} style={{ textAlign: 'center', color: 'rgba(0,0,0, 0.3)' }}>{copyRight}</Footer>
			
 
				+  )
			
 
				+})
			
--- a/src/layouts/AuthLayout/components/Header/Exit.jsx
+++ b/src/layouts/AuthLayout/components/Header/Exit.jsx
@@ -0,0 +1,36 @@
 
				+import React from "react";
			
 
				+import { useNavigate } from "react-router-dom";
			
 
				+import { LogoutOutlined } from "@ant-design/icons";
			
 
				+import { Button, Modal } from "antd";
			
 
				+import { useModel } from "@/store";
			
 
				+import { logout } from "@/services/login";
			
 
				+
			
 
				+const { confirm } = Modal;
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const navigate = useNavigate();
			
 
				+  // const { setUser } = useModel("user");
			
 
				+
			
 
				+  const onExit = () => {
			
 
				+    confirm({
			
 
				+      title: "确认退出系统?",
			
 
				+      onOk: () => {
			
 
				+        logout(); // 调用接口
			
 
				+        localStorage.removeItem("token");
			
 
				+        // setUser();
			
 
				+        navigate("/login");
			
 
				+      },
			
 
				+    });
			
 
				+  };
			
 
				+
			
 
				+  return (
			
 
				+    <Button
			
 
				+      className="font"
			
 
				+      type="text"
			
 
				+      icon={<LogoutOutlined />}
			
 
				+      onClick={onExit}
			
 
				+    >
			
 
				+      退出
			
 
				+    </Button>
			
 
				+  );
			
 
				+};
			
--- a/src/layouts/AuthLayout/components/Header/Language.jsx
+++ b/src/layouts/AuthLayout/components/Header/Language.jsx
@@ -0,0 +1,14 @@
 
				+import { ProFormSelect } from "@ant-design/pro-components";
			
 
				+import { Select } from "antd";
			
 
				+import React from "react";
			
 
				+import { useModel } from '@/store';
			
 
				+export default (props) => {
			
 
				+
			
 
				+  const {lang}=useModel("language")
			
 
				+  const language = [
			
 
				+    { label: "中文简体", value: "zh-CN" },
			
 
				+    { label: "中文繁体", value: "zh-Tw" },
			
 
				+    { label: "英文", value: "en-Us" },
			
 
				+  ];
			
 
				+  return <Select defaultValue={lang} style={{ width: 120 }} options={language} />;
			
 
				+};
			
--- a/src/layouts/AuthLayout/components/Header/Title.jsx
+++ b/src/layouts/AuthLayout/components/Header/Title.jsx
@@ -0,0 +1,24 @@
 
				+
			
 
				+import useRoute from '@/routes/hooks/useRoute';
			
 
				+
			
 
				+const titleStyle = {
			
 
				+  margin: 0,
			
 
				+}
			
 
				+
			
 
				+const spanStyle = {
			
 
				+  display: 'inline-block',
			
 
				+  width: '24px',
			
 
				+  textAlign: 'center'
			
 
				+}
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const route = useRoute();
			
 
				+  const { title } = route && route.meta || {}
			
 
				+
			
 
				+  return (
			
 
				+    <h5 style={titleStyle}>
			
 
				+      { title && <span style={spanStyle}>&raquo;</span> }
			
 
				+      { title && <span>{title}</span> }
			
 
				+    </h5>
			
 
				+  );
			
 
				+}
			
--- a/src/layouts/AuthLayout/components/Header/User.jsx
+++ b/src/layouts/AuthLayout/components/Header/User.jsx
@@ -0,0 +1,120 @@
 
				+import React, {
			
 
				+  useState,
			
 
				+  forwardRef,
			
 
				+  useRef,
			
 
				+  useImperativeHandle,
			
 
				+} from "react";
			
 
				+import { Avatar, Dropdown } from "antd";
			
 
				+import {
			
 
				+  ModalForm,
			
 
				+  ProFormText,
			
 
				+  ProFormDependency,
			
 
				+} from "@ant-design/pro-components";
			
 
				+import md5 from "md5";
			
 
				+import { changePassword } from "@/services/login";
			
 
				+import { useNavigate } from "react-router-dom";
			
 
				+
			
 
				+const DefaultAvatar = ({ color = "#1296db" }) => (
			
 
				+  <svg
			
 
				+    viewBox="0 0 1024 1024"
			
 
				+    version="1.1"
			
 
				+    xmlns="http://www.w3.org/2000/svg"
			
 
				+    width="24"
			
 
				+    height="24"
			
 
				+  >
			
 
				+    <path
			
 
				+      d="M938.666667 883.2c0-8.533333 0-42.666667-21.333334-81.066667-12.8-25.6-34.133333-42.666667-59.733333-59.733333-29.866667-17.066667-68.266667-34.133333-115.2-42.666667-4.266667 0-34.133333-4.266667-59.733333-12.8-29.866667-8.533333-42.666667-12.8-46.933334-17.066666v-25.6c4.266667-55.466667 34.133333-85.333333 59.733334-110.933334 8.533333-8.533333 17.066667-17.066667 25.6-29.866666 29.866667-42.666667 34.133333-85.333333 34.133333-93.866667 0-8.533333 0-12.8-4.266667-21.333333s-8.533333-17.066667-12.8-21.333334c0-12.8 4.266667-25.6 4.266667-34.133333 0-21.333333 4.266667-55.466667-4.266667-89.6 0-4.266667 0-12.8-4.266666-21.333333-8.533333-25.6-17.066667-46.933333-34.133334-64-8.533333 0-68.266667-59.733333-230.4-72.533334H405.333333c-8.533333 0-17.066667 0-25.6 4.266667-29.866667 8.533333-34.133333 29.866667-38.4 38.4v25.6l-4.266666 4.266667c-4.266667 4.266667-46.933333 42.666667-51.2 93.866666-4.266667 34.133333-4.266667 85.333333 0 123.733334-4.266667 8.533333-12.8 17.066667-12.8 38.4 0 8.533333 4.266667 51.2 34.133333 89.6 8.533333 8.533333 12.8 17.066667 25.6 29.866666 25.6 29.866667 55.466667 59.733333 59.733333 110.933334v25.6c-8.533333 4.266667-21.333333 12.8-51.2 21.333333s-59.733333 12.8-64 12.8c-42.666667 8.533333-81.066667 21.333333-110.933333 38.4-25.6 17.066667-46.933333 38.4-59.733333 59.733333-21.333333 38.4-21.333333 72.533333-21.333334 81.066667v21.333333c0 17.066667 17.066667 34.133333 38.4 34.133334h776.533334c21.333333 0 38.4-17.066667 38.4-38.4v-17.066667z"
			
 
				+      fill={color}
			
 
				+    ></path>
			
 
				+  </svg>
			
 
				+);
			
 
				+
			
 
				+const ChangePassword = forwardRef((props, ref) => {
			
 
				+  const [visible, setVisible] = useState(false);
			
 
				+  const navigate = useNavigate();
			
 
				+  const onFinish = async (values) => {
			
 
				+    const data = {
			
 
				+      originPassword: md5(values.password),
			
 
				+      newPassword: md5(values.newPassword),
			
 
				+    };
			
 
				+    await changePassword(data);
			
 
				+    navigate(`/login`);
			
 
				+
			
 
				+    return true;
			
 
				+  };
			
 
				+
			
 
				+  useImperativeHandle(ref, () => {
			
 
				+    return {
			
 
				+      show: () => setVisible(true),
			
 
				+    };
			
 
				+  });
			
 
				+
			
 
				+  return (
			
 
				+    <ModalForm
			
 
				+      title="修改密码"
			
 
				+      width="480px"
			
 
				+      open={visible}
			
 
				+      onOpenChange={setVisible}
			
 
				+      onFinish={onFinish}
			
 
				+    >
			
 
				+      <ProFormText.Password
			
 
				+        label="原始密码"
			
 
				+        name="password"
			
 
				+        rules={[{ required: true, message: "请输入原始密码!" }]}
			
 
				+      />
			
 
				+      <ProFormText.Password
			
 
				+        label="新密码"
			
 
				+        name="newPassword"
			
 
				+        rules={[{ required: true, message: "请输入新密码!" }]}
			
 
				+      />
			
 
				+
			
 
				+      <ProFormDependency name={["newPassword"]}>
			
 
				+        {({ newPassword }) => (
			
 
				+          <ProFormText.Password
			
 
				+            label="确认新密码"
			
 
				+            name="newPassword2"
			
 
				+            rules={[
			
 
				+              { required: true, message: "请输入新密码!" },
			
 
				+              () => ({
			
 
				+                validator(_, value) {
			
 
				+                  if (!value || value == newPassword) {
			
 
				+                    return Promise.resolve();
			
 
				+                  }
			
 
				+
			
 
				+                  return Promise.reject("两次输入密码不一致");
			
 
				+                },
			
 
				+              }),
			
 
				+            ]}
			
 
				+          />
			
 
				+        )}
			
 
				+      </ProFormDependency>
			
 
				+    </ModalForm>
			
 
				+  );
			
 
				+});
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const items = [
			
 
				+    {
			
 
				+      key: "changePassword",
			
 
				+      label: "修改密码",
			
 
				+    },
			
 
				+  ];
			
 
				+
			
 
				+  const passRef = useRef();
			
 
				+  const { user = {} } = props;
			
 
				+
			
 
				+  const onClick = ({ key }) => {
			
 
				+    if (key === "changePassword") {
			
 
				+      passRef.current.show();
			
 
				+    }
			
 
				+  };
			
 
				+  return (
			
 
				+    <Dropdown menu={{ items, onClick }}>
			
 
				+      <div className="user-info">
			
 
				+        <Avatar size={24} src={<DefaultAvatar />} />
			
 
				+        <span className="font">{user?.user?.userName}</span>
			
 
				+        <ChangePassword user={user} ref={passRef} />
			
 
				+      </div>
			
 
				+    </Dropdown>
			
 
				+  );
			
 
				+};
			
--- a/src/layouts/AuthLayout/components/Header/index.jsx
+++ b/src/layouts/AuthLayout/components/Header/index.jsx
@@ -0,0 +1,30 @@
 
				+import React, { useMemo } from 'react';
			
 
				+import { Layout, Space } from 'antd';
			
 
				+import classNames from 'classnames';
			
 
				+import Title from './Title';
			
 
				+import User from './User';
			
 
				+import Exit from './Exit';
			
 
				+import Logo from '../Logo';
			
 
				+import Language from './Language';
			
 
				+
			
 
				+const { Header } = Layout;
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const { user } = props;
			
 
				+
			
 
				+  const className = useMemo(() => classNames({
			
 
				+    'layout-header': true,
			
 
				+    'light': props.theme === 'light',
			
 
				+  }), [props.theme]);
			
 
				+
			
 
				+  return (
			
 
				+    <Header className={className}>
			
 
				+      <Logo />
			
 
				+      <Space>
			
 
				+        <Language />
			
 
				+        <User user={user} />
			
 
				+        <Exit />
			
 
				+      </Space>
			
 
				+    </Header>
			
 
				+  )
			
 
				+}
			
--- a/src/layouts/AuthLayout/components/HtmlTitle.jsx
+++ b/src/layouts/AuthLayout/components/HtmlTitle.jsx
@@ -0,0 +1,19 @@
 
				+
			
 
				+import { Helmet } from "react-helmet";
			
 
				+import { useModel } from '@/store';
			
 
				+import useRoute from '@/routes/hooks/useRoute';
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const { app } = useModel('system');
			
 
				+  const route = useRoute();
			
 
				+  const { title } = route && route.meta || {}
			
 
				+  
			
 
				+  const titleTemplate = `%s - ${app.fullName}`;
			
 
				+  const defaultTitle = app.fullName;
			
 
				+
			
 
				+  return (
			
 
				+    <Helmet titleTemplate={titleTemplate} defaultTitle={defaultTitle}>
			
 
				+      <title>{title}</title>
			
 
				+    </Helmet>
			
 
				+  );
			
 
				+}
			
--- a/src/layouts/AuthLayout/components/Logo.jsx
+++ b/src/layouts/AuthLayout/components/Logo.jsx
@@ -0,0 +1,17 @@
 
				+import React from 'react';
			
 
				+import { Typography } from 'antd';
			
 
				+import { NavLink } from "react-router-dom";
			
 
				+import { useModel } from '@/store';
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const { app } = useModel('system');
			
 
				+
			
 
				+  return (
			
 
				+    // <NavLink className='logo'  to="/">
			
 
				+    <div className="logo">
			
 
				+      <img src="./logo.png" alt="" />
			
 
				+      <h3>{app.shorName}</h3>
			
 
				+    </div>
			
 
				+    // </NavLink>
			
 
				+  )
			
 
				+}
			
--- a/src/layouts/AuthLayout/components/Menus.jsx
+++ b/src/layouts/AuthLayout/components/Menus.jsx
@@ -0,0 +1,31 @@
 
				+import React from 'react';
			
 
				+import { Menu } from 'antd';
			
 
				+
			
 
				+const menuStyle = { height: '100%' };
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const { theme, items, location } = props;
			
 
				+
			
 
				+  // const selectedKeys = React.useMemo(() => {
			
 
				+  //   const parts = location.pathname.split('/').filter(Boolean);
			
 
				+  //   const keys = parts.reduce((acc, it) => {
			
 
				+  //     const parent = acc.pop();
			
 
				+  //     const path = !parent ? `/${it}` : `${parent}/${it}`
			
 
				+
			
 
				+  //     return acc.concat([parent, path].filter(Boolean));
			
 
				+  //   }, []);
			
 
				+
			
 
				+  //   return keys;
			
 
				+  // }, [location.pathname]);
			
 
				+
			
 
				+  const selectedKeys = [location.pathname];
			
 
				+  return (
			
 
				+    <Menu
			
 
				+      mode="inline"
			
 
				+      style={menuStyle}
			
 
				+      theme={theme}
			
 
				+      items={items}
			
 
				+      selectedKeys={selectedKeys}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
--- a/src/layouts/AuthLayout/components/PageTransition/index.jsx
+++ b/src/layouts/AuthLayout/components/PageTransition/index.jsx
@@ -0,0 +1,21 @@
 
				+import { TransitionGroup, CSSTransition } from 'react-transition-group';
			
 
				+import './style.less';
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const { location } = props;
			
 
				+  const currentURL = location.pathname + location.search;
			
 
				+
			
 
				+  return (
			
 
				+    <TransitionGroup component={null}>
			
 
				+      <CSSTransition
			
 
				+        key={currentURL}
			
 
				+        addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
			
 
				+        classNames="page-fade"
			
 
				+      >
			
 
				+        <div style={{ height: '100%' }}>
			
 
				+          {props.children}
			
 
				+        </div>
			
 
				+      </CSSTransition>
			
 
				+    </TransitionGroup>
			
 
				+  );
			
 
				+}
			
--- a/src/layouts/AuthLayout/components/PageTransition/style.less
+++ b/src/layouts/AuthLayout/components/PageTransition/style.less
@@ -0,0 +1,21 @@
 
				+
			
 
				+.page-fade-enter {
			
 
				+  opacity: 0;
			
 
				+  transform: translateY(10%);
			
 
				+}
			
 
				+.page-fade-enter-active {
			
 
				+  opacity: 1;
			
 
				+  transform: translateY(0%);
			
 
				+}
			
 
				+.page-fade-exit {
			
 
				+  opacity: 0; // 1;
			
 
				+  transform: translateY(0%);
			
 
				+}
			
 
				+.page-fade-exit-active {
			
 
				+  opacity: 0;
			
 
				+  transform: translateY(10%);
			
 
				+}
			
 
				+.page-fade-enter-active,
			
 
				+.page-fade-exit-active {
			
 
				+  transition: opacity 220ms, transform 220ms;
			
 
				+}
			
--- a/src/layouts/AuthLayout/components/SiderBar.jsx
+++ b/src/layouts/AuthLayout/components/SiderBar.jsx
@@ -0,0 +1,21 @@
 
				+import React, { useMemo } from 'react';
			
 
				+import { Layout, Spin } from 'antd';
			
 
				+import { getPropertyValue } from '@/utils/css';
			
 
				+import Menus from './Menus';
			
 
				+
			
 
				+const { Sider } = Layout;
			
 
				+
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const { theme, location, menus } = props;
			
 
				+
			
 
				+  const width = useMemo(() => {
			
 
				+    return /\d+/.exec(getPropertyValue('--siderbar-width'))[0] - 0;
			
 
				+  }, []);
			
 
				+
			
 
				+  return (
			
 
				+    <Sider className='layout-sidebar' theme={theme} collapsible width={width}>
			
 
				+      <Menus theme={theme} items={menus} location={location} />
			
 
				+    </Sider>
			
 
				+  );
			
 
				+}
			
--- a/src/layouts/AuthLayout/index.jsx
+++ b/src/layouts/AuthLayout/index.jsx
@@ -0,0 +1,55 @@
 
				+import React from "react";
			
 
				+import { Spin, Layout } from "antd";
			
 
				+import HtmlTitle from "./components/HtmlTitle";
			
 
				+// import Main from './Main';
			
 
				+import withLogin from "./withLogin";
			
 
				+import { useLocation, useNavigate } from "react-router-dom";
			
 
				+import { useModel } from "@/store";
			
 
				+
			
 
				+import SiderBar from "./components/SiderBar";
			
 
				+import Header from "./components/Header";
			
 
				+import Container from "./components/Container";
			
 
				+import { authRoutes } from "@/routes/routes";
			
 
				+import { getMenuItems } from "@/routes/menus";
			
 
				+import RequireLogin from "./RequireLogin";
			
 
				+import "./style.less";
			
 
				+
			
 
				+const Spinner = () => (
			
 
				+  <div
			
 
				+    style={{
			
 
				+      width: "100%",
			
 
				+      height: "100%",
			
 
				+      display: "grid",
			
 
				+      placeItems: "center",
			
 
				+    }}
			
 
				+  >
			
 
				+    <Spin />
			
 
				+  </div>
			
 
				+);
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const { theme } = useModel("system");
			
 
				+  const { user, menus } = useModel("user");
			
 
				+  const navigate = useNavigate();
			
 
				+  const location = useLocation();
			
 
				+  // const menus = getMenuItems(authRoutes);
			
 
				+  // const RequireLogin = React.lazy(() => {
			
 
				+  //   return withLogin(import("./Main"));
			
 
				+  // });
			
 
				+  return (
			
 
				+    <Spin spinning={!user} size="large">
			
 
				+      <HtmlTitle />
			
 
				+      {/* <React.Suspense fallback={<Spinner />}> */}
			
 
				+      <RequireLogin>
			
 
				+        <Layout className={theme} style={{ height: "100vh" }}>
			
 
				+          <Header theme={theme} user={user} />
			
 
				+          <Layout style={{ height: "calc(100vh - var(--header-height))" }}>
			
 
				+            <SiderBar theme="light" menus={menus} location={location} />
			
 
				+            <Container location={location} />
			
 
				+          </Layout>
			
 
				+        </Layout>
			
 
				+      </RequireLogin>
			
 
				+      {/* </React.Suspense> */}
			
 
				+    </Spin>
			
 
				+  );
			
 
				+};
			
--- a/src/layouts/AuthLayout/style.less
+++ b/src/layouts/AuthLayout/style.less
@@ -0,0 +1,81 @@
 
				+.layout-header {
			
 
				+  height: var(--header-height);
			
 
				+  box-sizing: border-box;
			
 
				+  padding: 0;
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  justify-content: space-between;
			
 
				+  color: #fff;
			
 
				+
			
 
				+  &.light {
			
 
				+    color: #000;
			
 
				+  }
			
 
				+
			
 
				+  .header-content {
			
 
				+    flex: 1;
			
 
				+
			
 
				+  }
			
 
				+
			
 
				+  .font {
			
 
				+    color: inherit;
			
 
				+    display: inline-block;
			
 
				+  }
			
 
				+
			
 
				+  .user-info {
			
 
				+    cursor: pointer;
			
 
				+
			
 
				+    .ant-avatar {
			
 
				+      border: 1px solid rgba(255, 255, 255, 0.4);
			
 
				+    }
			
 
				+
			
 
				+    span {
			
 
				+      margin-left: 1em;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .sys-exit {
			
 
				+    margin-right: 1em;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.logo {
			
 
				+  height: var(--header-height);
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  box-sizing: border-box;
			
 
				+  padding-left: 1em;
			
 
				+  color: inherit;
			
 
				+
			
 
				+  & > * {
			
 
				+    color: inherit;
			
 
				+    margin: 0;
			
 
				+  }
			
 
				+
			
 
				+  h5 {
			
 
				+    margin: 0;
			
 
				+  }
			
 
				+
			
 
				+  img {
			
 
				+    width: 28px;
			
 
				+    vertical-align: middle;
			
 
				+    margin-right: 1em;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.layout-container {
			
 
				+  flex: 1;
			
 
				+
			
 
				+  overflow-y: auto;
			
 
				+  scrollbar-width: none;
			
 
				+  -ms-overflow-style: none;
			
 
				+
			
 
				+  &::--webkit-scrollbar {
			
 
				+    display: none;
			
 
				+  }
			
 
				+
			
 
				+  padding-top: 0; // 避免子元素的 margin 影响
			
 
				+}
			
 
				+
			
 
				+.ant-menu-vertical {
			
 
				+  border: none;
			
 
				+}
			
--- a/src/layouts/AuthLayout/withLogin.jsx
+++ b/src/layouts/AuthLayout/withLogin.jsx
@@ -0,0 +1,27 @@
 
				+import React from "react";
			
 
				+import store from "@/store";
			
 
				+
			
 
				+export default function withLogin (factory) {
			
 
				+  return new Promise((resolve) => {
			
 
				+    const { user, getCurrentUser } = store.getState("user");
			
 
				+    const loged = user && (user.userId || user.id);
			
 
				+    if (loged) {
			
 
				+      resolve(factory);
			
 
				+    } else {
			
 
				+      let ticket = undefined;
			
 
				+      const match = window.location?.href?.match(/ticket=([^?&/]*)/);
			
 
				+      if (match?.length > 0) {
			
 
				+        ticket = match[1];
			
 
				+      }
			
 
				+
			
 
				+      getCurrentUser({ ticket: ticket })
			
 
				+        .then(() => {
			
 
				+          resolve(factory);
			
 
				+        })
			
 
				+        .catch((e) => {
			
 
				+          console.error(e);
			
 
				+          resolve(import("./RedirectLogin"));
			
 
				+        });
			
 
				+    }
			
 
				+  });
			
 
				+}
			
--- a/src/locale/config.js
+++ b/src/locale/config.js
@@ -0,0 +1,28 @@
 
				+import i18n from 'i18next';
			
 
				+import { initReactI18next } from 'react-i18next';
			
 
				+import translation_en from './en.json';
			
 
				+import translation_zh from './zh.json';
			
 
				+import translation_zht from './zht.json';
			
 
				+
			
 
				+const resources = {
			
 
				+    en: {
			
 
				+        translation: translation_en,
			
 
				+    },
			
 
				+    zh: {
			
 
				+        translation: translation_zh,
			
 
				+    },
			
 
				+    zht: {
			
 
				+        translation: translation_zht,
			
 
				+    },
			
 
				+};
			
 
				+
			
 
				+i18n.use(initReactI18next).init({
			
 
				+    resources,
			
 
				+    // 默认语言  zh/en/zht  中文/英文/繁体
			
 
				+    lng: 'en',
			
 
				+    interpolation: {
			
 
				+        escapeValue: false,
			
 
				+    },
			
 
				+});
			
 
				+
			
 
				+export default i18n;
			
--- a/src/locale/en.json
+++ b/src/locale/en.json
@@ -0,0 +1,4 @@
 
				+{
			
 
				+  "language": "Language",
			
 
				+  "switch": "Switch"
			
 
				+}
			
--- a/src/locale/zh.json
+++ b/src/locale/zh.json
@@ -0,0 +1,4 @@
 
				+{
			
 
				+  "language": "语言",
			
 
				+  "switch": "选择"
			
 
				+}
			
--- a/src/locale/zht.json
+++ b/src/locale/zht.json
@@ -0,0 +1,5 @@
 
				+{
			
 
				+    "language": "語言",
			
 
				+    "switch": "選擇"
			
 
				+  }
			
 
				+  
			
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -0,0 +1,21 @@
 
				+import React from "react";
			
 
				+import ReactDOM from "react-dom/client";
			
 
				+import Background from "./layouts/AuthLayout/components/Background";
			
 
				+import Router from "./routes/Router";
			
 
				+import "./index.less";
			
 
				+import { Provider } from "./store";
			
 
				+import { initTokenIfExists } from "./utils/sso";
			
 
				+
			
 
				+import { ConfigProvider } from "antd";
			
 
				+import zhCN from "antd/es/locale/zh_CN";
			
 
				+import enUS from "antd/es/locale/en_US";
			
 
				+import "moment/dist/locale/zh-cn";
			
 
				+
			
 
				+ReactDOM.createRoot(document.getElementById("root")).render(
			
 
				+  <ConfigProvider locale={zhCN} >
			
 
				+    <Provider>
			
 
				+      {/* <Background /> */}
			
 
				+      <Router />
			
 
				+    </Provider>
			
 
				+  </ConfigProvider>
			
 
				+);
			
--- a/src/pages/404/index.jsx
+++ b/src/pages/404/index.jsx
@@ -0,0 +1,29 @@
 
				+import React from 'react';
			
 
				+import { Button, Result } from 'antd';
			
 
				+import { Helmet } from "react-helmet";
			
 
				+import { NavLink } from "react-router-dom";
			
 
				+import { useModel } from '@/store';
			
 
				+
			
 
				+const style = {
			
 
				+  display: 'grid',
			
 
				+  placeItems: 'center',
			
 
				+  height: '100%'
			
 
				+}
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const { app } = useModel('system');
			
 
				+
			
 
				+  return (
			
 
				+    <div style={style}>
			
 
				+      <Helmet>
			
 
				+        <title>{app.fullName}</title>
			
 
				+      </Helmet>
			
 
				+      <Result
			
 
				+        status="404"
			
 
				+        title="404"
			
 
				+        subTitle="页面不存在"
			
 
				+        extra={<NavLink to="/" replace><Button type="primary">返回首页</Button></NavLink>}
			
 
				+      />
			
 
				+    </div>
			
 
				+  )
			
 
				+}
			
--- a/src/pages/firstPage/components/Brand.jsx
+++ b/src/pages/firstPage/components/Brand.jsx
@@ -0,0 +1,24 @@
 
				+import React from "react";
			
 
				+export default (props) => {
			
 
				+  const imgs = [
			
 
				+    "https://qbitnetwork.com/_nuxt/img/002.001.2fc0413.png",
			
 
				+    "https://qbitnetwork.com/_nuxt/img/002.001.2fc0413.png",
			
 
				+    "https://qbitnetwork.com/_nuxt/img/002.001.2fc0413.png",
			
 
				+    "https://qbitnetwork.com/_nuxt/img/002.001.2fc0413.png",
			
 
				+    "https://qbitnetwork.com/_nuxt/img/002.001.2fc0413.png",
			
 
				+    "https://qbitnetwork.com/_nuxt/img/002.001.2fc0413.png",
			
 
				+    "https://qbitnetwork.com/_nuxt/img/002.001.2fc0413.png",
			
 
				+    "https://qbitnetwork.com/_nuxt/img/002.001.2fc0413.png",
			
 
				+  ];
			
 
				+  return (
			
 
				+    <div className="brand">
			
 
				+      <div className="brand_data">服务品牌/机构客户已逾12,000+</div>
			
 
				+      <div style={{ height: "60px" }}></div>
			
 
				+      <div className="brand_img">
			
 
				+        {imgs.map((x) => {
			
 
				+          return <img src={x} alt="" height="54"/>;
			
 
				+        })}
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+};
			
--- a/src/pages/firstPage/components/Content.jsx
+++ b/src/pages/firstPage/components/Content.jsx
@@ -0,0 +1,66 @@
 
				+import React, { useEffect, useState } from "react";
			
 
				+export default (props) => {
			
 
				+  const [currentImageIndex, setCurrentImageIndex] = useState(0);
			
 
				+  const [isFadingOut, setIsFadingOut] = useState(false);
			
 
				+
			
 
				+  const imgShow = [
			
 
				+    "https://qbitnetwork.com/_nuxt/img/001.003.9de6ffe.png",
			
 
				+    "https://qbitnetwork.com/_nuxt/img/001.002.c7d53bd.png",
			
 
				+    "https://qbitnetwork.com/_nuxt/img/001.001.97d8def.png",
			
 
				+  ];
			
 
				+
			
 
				+  const updateImageIndex = () => {
			
 
				+    setIsFadingOut(true);
			
 
				+
			
 
				+    setCurrentImageIndex((prevIndex) => (prevIndex + 1) % imgShow.length);
			
 
				+
			
 
				+    setTimeout(() => {
			
 
				+      setIsFadingOut(false);
			
 
				+    }, 1500); 
			
 
				+  };
			
 
				+  useEffect(() => {
			
 
				+    const timer = setInterval(updateImageIndex, 5000);
			
 
				+
			
 
				+    // 清除定时器
			
 
				+    return () => clearInterval(timer);
			
 
				+  }, []);
			
 
				+
			
 
				+  return (
			
 
				+    <div className="page_details">
			
 
				+      <div className="page_black">
			
 
				+        <span>
			
 
				+          一站式全球资金
			
 
				+          <br />
			
 
				+          管理平台
			
 
				+        </span>
			
 
				+        <p>
			
 
				+          通过搭建数字化的跨境支付和金融基础设施，帮助企业实现更高时效、更低成本的全球收付和财务管理，轻松实现全球业务扩展与增长。
			
 
				+        </p>
			
 
				+        <div className="flickerAll">
			
 
				+          <div className="flicker">
			
 
				+            <span>现在注册</span>
			
 
				+          </div>
			
 
				+          <div className="flicker flickers">
			
 
				+            <span>联系我们</span>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      <img
			
 
				+        className="svgImg"
			
 
				+        src="https://qbitnetwork.com/_nuxt/img/001.000.94cac20.svg"
			
 
				+        alt=""
			
 
				+      />
			
 
				+      <div className="imgRound">
			
 
				+        <div className="relatives">
			
 
				+          <img
			
 
				+            src={imgShow[currentImageIndex]}
			
 
				+            className={isFadingOut ? "fade-out" : ""}
			
 
				+            alt=""
			
 
				+          />
			
 
				+        </div>
			
 
				+      </div>
			
 
				+
			
 
				+
			
 
				+    </div>
			
 
				+  );
			
 
				+};
			
--- a/src/pages/firstPage/components/DetailedPlan.jsx
+++ b/src/pages/firstPage/components/DetailedPlan.jsx
@@ -0,0 +1,238 @@
 
				+import { ArrowRightOutlined, RightOutlined } from "@ant-design/icons";
			
 
				+import React from "react";
			
 
				+export default (props) => {
			
 
				+  return (
			
 
				+    <div style={{ width: "100%", backgroundColor: "#f0f8f8" }}>
			
 
				+      <div className="marginAuto">
			
 
				+        <div style={{ height: "120px" }}></div>
			
 
				+        <div className="detailed_plan">
			
 
				+          {/* 收款 */}
			
 
				+          <div className="detailed_plan_payment">
			
 
				+            <div style={{ width: "590px" }}>
			
 
				+              <div className="detailed_plan_payment_text">收款</div>
			
 
				+              <div style={{ height: "4px" }}></div>
			
 
				+              <div className="detailed_plan_payment_title">
			
 
				+                <div>一个账户</div>
			
 
				+                <div>轻松管理全球资金</div>
			
 
				+              </div>
			
 
				+              <div style={{ height: "48px" }}></div>
			
 
				+              <div className="detailed_plan_payment_gap">
			
 
				+                <div>
			
 
				+                  <div className="title">多币种</div>
			
 
				+                  <div style={{ height: "12px" }}></div>
			
 
				+                  <div className="nicety">
			
 
				+                    <div>
			
 
				+                      快速开设多币种账户，支持14+本地币种，轻松收取本地&跨境资金。
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <div>
			
 
				+                  <div className="title">轻松收款</div>
			
 
				+                  <div style={{ height: "12px" }}></div>
			
 
				+                  <div className="nicety">
			
 
				+                    <div>
			
 
				+                      直连Shopify、PayPal等主流平台，订单信息自动同步，统一管理。
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <div>
			
 
				+                  <div className="title">高效管理</div>
			
 
				+                  <div style={{ height: "12px" }}></div>
			
 
				+                  <div className="nicety">
			
 
				+                    <div>
			
 
				+                      可根据需求设置多位管理员，定制化角色查看、管理和操作，赋能团队高效协作。
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+
			
 
				+              <div style={{ height: "40px" }}></div>
			
 
				+
			
 
				+              <div className="signal">
			
 
				+                <a
			
 
				+                  href="JavaScript:;"
			
 
				+                  style={{
			
 
				+                    fontWeight: "600",
			
 
				+                    fontSize: "18px",
			
 
				+                  }}
			
 
				+                >
			
 
				+                  了解全球收款账户
			
 
				+                </a>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <img
			
 
				+              src="https://qbitnetwork.com/_nuxt/img/005.fa1511a.png"
			
 
				+              alt=""
			
 
				+              width="790"
			
 
				+            />
			
 
				+          </div>
			
 
				+          {/* 管理 */}
			
 
				+          <div className="detailed_plan_manger">
			
 
				+            <div className="manger">
			
 
				+              <div className="detailed_plan_manger_text">管理</div>
			
 
				+              <div style={{ height: "4px" }}></div>
			
 
				+              <div className="manger_title">
			
 
				+                <div>一个账户</div>
			
 
				+                <div>轻松管理全球资金</div>
			
 
				+              </div>
			
 
				+              <div style={{ height: "48px" }}></div>
			
 
				+              <div className="detailed_plan_manger_gap">
			
 
				+                <div>
			
 
				+                  <div className="title">高效操作</div>
			
 
				+                  <div style={{ height: "12px" }}></div>
			
 
				+                  <div className="nicety">
			
 
				+                    <div>全流程线上操作，一键快捷开启收款服务。</div>
			
 
				+                    <div>轻松运营，便捷对账，助力企业实现高效管理。</div>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <div>
			
 
				+                  <div className="title">实时互转</div>
			
 
				+                  <div style={{ height: "12px" }}></div>
			
 
				+                  <div className="nicety">
			
 
				+                    <div>无额外成本，0费用完成Qbit账户间互转。</div>
			
 
				+                    <div>不必提现，实时收付境内外供应商费用。</div>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <img
			
 
				+              src="https://qbitnetwork.com/_nuxt/img/006.dc6c4bc.png"
			
 
				+              width="878"
			
 
				+              alt=""
			
 
				+            />
			
 
				+          </div>
			
 
				+          {/* 付款 */}
			
 
				+          <div className="detailed_plan_pay">
			
 
				+            <div style={{ width: "590px" }}>
			
 
				+              <div className="detailed_plan_pay_text">付款</div>
			
 
				+              <div style={{ height: "4px" }}></div>
			
 
				+              <div className="detailed_plan_pay_title">
			
 
				+                <div>笔笔畅达</div>
			
 
				+                <div>解锁全球新机遇</div>
			
 
				+              </div>
			
 
				+              <div style={{ height: "48px" }}></div>
			
 
				+              <div className="detailed_plan_pay_gap">
			
 
				+                <div>
			
 
				+                  <div className="title">国际付款</div>
			
 
				+                  <div style={{ height: "12px" }}></div>
			
 
				+                  <div className="nicety">
			
 
				+                    <div>
			
 
				+                      覆盖180+个国家和地区的国际支付能力，连接本地清算网络，快至T+0到账，实现资金快速流转。{" "}
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <div style={{ height: "16px" }}></div>
			
 
				+                  <div className="signal">
			
 
				+                    <a
			
 
				+                      href="JavaScript:;"
			
 
				+                      style={{
			
 
				+                        fontWeight: "600",
			
 
				+                        fontSize: "18px",
			
 
				+                      }}
			
 
				+                    >
			
 
				+                      了解国际付款
			
 
				+                    </a>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <div>
			
 
				+                  <div className="title">国际付款</div>
			
 
				+                  <div style={{ height: "12px" }}></div>
			
 
				+                  <div className="nicety">
			
 
				+                    <div>
			
 
				+                      覆盖180+个国家和地区的国际支付能力，连接本地清算网络，快至T+0到账，实现资金快速流转。{" "}
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <div style={{ height: "16px" }}></div>
			
 
				+                  <div className="signal">
			
 
				+                    <a
			
 
				+                      href="JavaScript:;"
			
 
				+                      style={{
			
 
				+                        fontWeight: "600",
			
 
				+                        fontSize: "18px",
			
 
				+                      }}
			
 
				+                    >
			
 
				+                      了解国际付款
			
 
				+                    </a>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <div>
			
 
				+                  <div className="title">国际付款</div>
			
 
				+                  <div style={{ height: "12px" }}></div>
			
 
				+                  <div className="nicety">
			
 
				+                    <div>
			
 
				+                      覆盖180+个国家和地区的国际支付能力，连接本地清算网络，快至T+0到账，实现资金快速流转。{" "}
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+
			
 
				+              <div style={{ height: "40px" }}></div>
			
 
				+            </div>
			
 
				+            <img
			
 
				+              src="https://qbitnetwork.com/_nuxt/img/007.c4273a0.png"
			
 
				+              alt=""
			
 
				+              width="896"
			
 
				+            />
			
 
				+          </div>
			
 
				+          {/* 金融 */}
			
 
				+          <div className="detailed_plan_finance">
			
 
				+            <div style={{ width: "590px" }}>
			
 
				+              <div className="detailed_plan_finance_text">供应链金融</div>
			
 
				+              <div style={{ height: "4px" }}></div>
			
 
				+              <div className="detailed_plan_finance_title">
			
 
				+                <div>开拓高速增长新蓝海</div>
			
 
				+              </div>
			
 
				+              <div style={{ height: "48px" }}></div>
			
 
				+              <div className="detailed_plan_finance_gap">
			
 
				+                <div>
			
 
				+                  <div className="title">线上申请，便捷省心</div>
			
 
				+                  <div style={{ height: "12px" }}></div>
			
 
				+                  <div className="nicety">
			
 
				+                    <div>线上申请流程，快至24小时内完成风控，48小时放款。</div>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <div>
			
 
				+                  <div className="title">实时授权，无抵押</div>
			
 
				+                  <div style={{ height: "12px" }}></div>
			
 
				+                  <div className="nicety">
			
 
				+                    <div>
			
 
				+                      纯信用贷款一次授信、循环使用，流程操作简单，省心省事。
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <div>
			
 
				+                  <div className="title">更低利率，灵活还款</div>
			
 
				+                  <div style={{ height: "12px" }}></div>
			
 
				+                  <div className="nicety">
			
 
				+                    <div>
			
 
				+                      动态额度年化利率，日&周扣款模型，账户收款余额直扣。
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+
			
 
				+              <div style={{ height: "40px" }}></div>
			
 
				+
			
 
				+              <div className="signal">
			
 
				+                <a
			
 
				+                  href="JavaScript:;"
			
 
				+                  style={{
			
 
				+                    fontWeight: "600",
			
 
				+                    fontSize: "18px",
			
 
				+                  }}
			
 
				+                >
			
 
				+                  了解供应链金融
			
 
				+                </a>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+
			
 
				+            <img
			
 
				+              src="https://qbitnetwork.com/_nuxt/img/008.4078b74.png"
			
 
				+              alt=""
			
 
				+              width="820"
			
 
				+            />
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+};
			
--- a/src/pages/firstPage/components/Header.jsx
+++ b/src/pages/firstPage/components/Header.jsx
@@ -0,0 +1,29 @@
 
				+import Logo from "@/layouts/AuthLayout/components/Logo";
			
 
				+import { Button, Layout, Popover, Space } from "antd";
			
 
				+import classNames from "classnames";
			
 
				+import React, { useMemo } from "react";
			
 
				+import HeaderCenter from "./HeaderCenter";
			
 
				+import InWebsite from "./InWebsite";
			
 
				+import Content from "./Content";
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const className = useMemo(
			
 
				+    () =>
			
 
				+      classNames({
			
 
				+        "layout-header": true,
			
 
				+        light: props.theme === "light",
			
 
				+      }),
			
 
				+    [props.theme]
			
 
				+  );
			
 
				+  return (
			
 
				+    <Layout.Header className={className}>
			
 
				+      {/* <div style={{ width: "1200px", display: "flex", margin: "0 auto" }}> */}
			
 
				+        <Logo />
			
 
				+        <Space className="space">
			
 
				+          <HeaderCenter />
			
 
				+          <InWebsite />
			
 
				+        </Space>
			
 
				+      {/* </div> */}
			
 
				+    </Layout.Header>
			
 
				+  );
			
 
				+};
			
--- a/src/pages/firstPage/components/HeaderCenter.jsx
+++ b/src/pages/firstPage/components/HeaderCenter.jsx
@@ -0,0 +1,17 @@
 
				+import { Button, Popconfirm, Popover } from "antd";
			
 
				+import React from "react";
			
 
				+export default (props) => {
			
 
				+  return (
			
 
				+    <div style={{marginLeft:"80px"}}>
			
 
				+      <Popover title="产品" trigger="hover">
			
 
				+        <Button className="btn">产品</Button>
			
 
				+      </Popover>
			
 
				+      <Popover title="关于" trigger="hover">
			
 
				+        <Button className="btn">关于</Button>
			
 
				+      </Popover>
			
 
				+      <Popover title="资源" trigger="hover">
			
 
				+        <Button className="btn">资源</Button>
			
 
				+      </Popover>
			
 
				+    </div>
			
 
				+  );
			
 
				+};
			
--- a/src/pages/firstPage/components/InWebsite.jsx
+++ b/src/pages/firstPage/components/InWebsite.jsx
@@ -0,0 +1,15 @@
 
				+import { ContainerOutlined } from "@ant-design/icons";
			
 
				+import React from "react";
			
 
				+export default (props) => {
			
 
				+  const onLogin=()=>{}
			
 
				+  const onRegister=()=>{}
			
 
				+  return (
			
 
				+    <div className="InWebsite">
			
 
				+      <ContainerOutlined />
			
 
				+      <div onClick={onLogin}>登录</div>
			
 
				+      <div className="flicker"  onClick={onRegister}>
			
 
				+        <span >注册</span>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+};
			
--- a/src/pages/firstPage/components/InitialHeart.jsx
+++ b/src/pages/firstPage/components/InitialHeart.jsx
@@ -0,0 +1,71 @@
 
				+import React from "react";
			
 
				+export default (props) => {
			
 
				+  const listBox = [
			
 
				+    {
			
 
				+      id: 1,
			
 
				+      img: "https://qbitnetwork.com/_nuxt/img/005.001.e3cfeda.svg",
			
 
				+      label: "牌照监管",
			
 
				+      remake:
			
 
				+        "合规即服务，持有美国、香港等国家及地区金融牌照，严格遵守监管机构相关法律法规要求。",
			
 
				+    },
			
 
				+    {
			
 
				+      id: 2,
			
 
				+      img: "https://qbitnetwork.com/_nuxt/img/005.002.b81a265.svg",
			
 
				+      label: "资金安全",
			
 
				+      remake:
			
 
				+        "采取了严格的资金安全保障措施，金融解决方案获得合作银行与机构的合规检验与认可。",
			
 
				+    },
			
 
				+    {
			
 
				+      id: 3,
			
 
				+      img: "https://qbitnetwork.com/_nuxt/img/005.003.55a8f50.svg",
			
 
				+      label: "风控安全",
			
 
				+      remake:
			
 
				+        "实时监控交易，结合复杂的反洗钱监控算法及各类金融行业黑名单，为您的交易保驾护航。",
			
 
				+    },
			
 
				+    {
			
 
				+      id: 4,
			
 
				+      img: "https://qbitnetwork.com/_nuxt/img/005.004.576a014.svg",
			
 
				+      label: "隐私保护",
			
 
				+      remake:
			
 
				+        "构建完善的信息管理体系，所有数据均存放在有密码控制的服务器中，未经授权，绝不透露。",
			
 
				+    },
			
 
				+  ];
			
 
				+  return (
			
 
				+    <div className="initial_heart">
			
 
				+      <div className="initial_heart_important">您的每一笔钱，都很重要</div>
			
 
				+      <div style={{ height: "40px" }}></div>
			
 
				+      <div className="initial_heart_detail">
			
 
				+        自成立之初，Qbit趣比汇便以积极态度拥抱全球行业监管，保障您的资金安全。
			
 
				+      </div>
			
 
				+      <div style={{ height: "40px" }}></div>
			
 
				+
			
 
				+      <div className="signal">
			
 
				+        <a
			
 
				+          href="JavaScript:;"
			
 
				+          style={{
			
 
				+            fontWeight: "600",
			
 
				+            fontSize: "18px",
			
 
				+          }}
			
 
				+        >
			
 
				+          Qbit趣比汇的安全性
			
 
				+        </a>
			
 
				+      </div>
			
 
				+      <div style={{ height: "40px" }}></div>
			
 
				+      <div className="box4">
			
 
				+        {listBox.map((x) => {
			
 
				+          return (
			
 
				+            <div key={x.id} className="box4Background">
			
 
				+              <div className="box4Detail">
			
 
				+                <img src={x.img} alt="" />
			
 
				+                <div style={{ height: "16px" }}></div>
			
 
				+                <div style={{fontWeight:"600",fontSize:"22px",color:"#FFF"}}>{x.label}</div>
			
 
				+                <div style={{ height: "12px" }}></div>
			
 
				+                <div style={{opacity:".8",fontSize:"22px",color:"#FFF"}}>{x.remake}</div>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+          );
			
 
				+        })}
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+};
			
--- a/src/pages/firstPage/components/Introduce.jsx
+++ b/src/pages/firstPage/components/Introduce.jsx
@@ -0,0 +1,30 @@
 
				+import React from "react";
			
 
				+export default (props) => {
			
 
				+  return (
			
 
				+    <div className="introduce">
			
 
				+      <div className="introduce_plan">一站式打通海外资金「收、管、付、融」</div>
			
 
				+      <div style={{ height: "36px" }}></div>
			
 
				+      <div className="introduce_title">
			
 
				+        为跨境贸易构建高效金融生态，解决企业全链路财务需求。
			
 
				+      </div>
			
 
				+      <div style={{ height: "60px" }}></div>
			
 
				+      <img
			
 
				+        style={{ position: "relative" }}
			
 
				+        src="https://qbitnetwork.com/_nuxt/img/003.85fc294.png"
			
 
				+        height="436"
			
 
				+        alt=""
			
 
				+      />
			
 
				+      <img
			
 
				+        src="https://qbitnetwork.com/_nuxt/img/004.f3f7b95.png"
			
 
				+        alt=""
			
 
				+        height="822"
			
 
				+        style={{
			
 
				+          position: "absolute",
			
 
				+          top: "62px",
			
 
				+          right: "-360px",
			
 
				+        }}
			
 
				+      />
			
 
				+      <div style={{ height: "120px" }}></div>
			
 
				+    </div>
			
 
				+  );
			
 
				+};
			
--- a/src/pages/firstPage/components/SelectRegister.jsx
+++ b/src/pages/firstPage/components/SelectRegister.jsx
@@ -0,0 +1,11 @@
 
				+import React from "react";
			
 
				+export default (props) => {
			
 
				+  return (
			
 
				+    <div className="select_register">
			
 
				+      <div>选择Qbit趣比汇，加速您的全球业务</div>
			
 
				+      <div className="flicker" >
			
 
				+        <span>现在注册</span>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+};
			
--- a/src/pages/firstPage/components/ToInitialHeart.jsx
+++ b/src/pages/firstPage/components/ToInitialHeart.jsx
@@ -0,0 +1,17 @@
 
				+import React from 'react'
			
 
				+import InitialHeart from './InitialHeart'
			
 
				+export default (props) => {
			
 
				+return (
			
 
				+ <div
			
 
				+      style={{
			
 
				+        backgroundColor: "#313131",
			
 
				+      }}
			
 
				+    >
			
 
				+      <div className="marginAuto">
			
 
				+        <div style={{ height: "120px" }}></div>
			
 
				+        <InitialHeart />
			
 
				+      <div style={{ height: "120px" }}></div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+)
			
 
				+}
			
--- a/src/pages/firstPage/components/ToIntroduce.jsx
+++ b/src/pages/firstPage/components/ToIntroduce.jsx
@@ -0,0 +1,16 @@
 
				+import React from "react";
			
 
				+import Introduce from "./Introduce";
			
 
				+export default (props) => {
			
 
				+  return (
			
 
				+    <div
			
 
				+      style={{
			
 
				+        backgroundColor: "#313131",
			
 
				+      }}
			
 
				+    >
			
 
				+      <div className="marginAuto">
			
 
				+        <div style={{ height: "120px" }}></div>
			
 
				+        <Introduce />
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+};
			
--- a/src/pages/firstPage/components/ToSelectRegister.jsx
+++ b/src/pages/firstPage/components/ToSelectRegister.jsx
@@ -0,0 +1,18 @@
 
				+import React from "react";
			
 
				+import SelectRegister from "./SelectRegister";
			
 
				+export default (props) => {
			
 
				+  return (
			
 
				+    <div
			
 
				+      style={{
			
 
				+        background:
			
 
				+          "linear-gradient(135deg, rgb(153, 250, 255) 0%, rgb(195, 255, 166) 100%)",
			
 
				+      }}
			
 
				+    >
			
 
				+      <div className="marginAuto">
			
 
				+        <div style={{ height: "120px" }}></div>
			
 
				+        <SelectRegister />
			
 
				+        <div style={{ height: "120px" }}></div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+};
			
--- a/src/pages/firstPage/index.jsx
+++ b/src/pages/firstPage/index.jsx
@@ -0,0 +1,42 @@
 
				+import Logo from "@/layouts/AuthLayout/components/Logo";
			
 
				+import { Layout, Space } from "antd";
			
 
				+import classNames from "classnames";
			
 
				+import React, { useMemo } from "react";
			
 
				+import Header from "./components/Header";
			
 
				+
			
 
				+import "./index.less";
			
 
				+import Content from "./components/Content";
			
 
				+import Brand from "./components/Brand";
			
 
				+import Introduce from "./components/Introduce";
			
 
				+import ToIntroduce from "./components/ToIntroduce";
			
 
				+import DetailedPlan from "./components/DetailedPlan";
			
 
				+import InitialHeart from "./components/ToInitialHeart";
			
 
				+import ToInitialHeart from "./components/ToInitialHeart";
			
 
				+import ToSelect from "./components/ToSelectRegister";
			
 
				+import ToSelectRegister from "./components/ToSelectRegister";
			
 
				+export default (props) => {
			
 
				+  const theme = "light";
			
 
				+  return (
			
 
				+    <Layout
			
 
				+      className={theme}
			
 
				+      style={{
			
 
				+        backgroundColor: "#f0f8f8",
			
 
				+        fontFamily: "CN",
			
 
				+        overflow: "hidden",
			
 
				+      }}
			
 
				+    >
			
 
				+      <div className="marginAuto">
			
 
				+        <Header theme={theme} />
			
 
				+        <Content />
			
 
				+        <div style={{ height: "284px" }}> </div>
			
 
				+        <Brand />
			
 
				+        <div style={{ height: "200px" }}></div>
			
 
				+      </div>
			
 
				+      <ToIntroduce />
			
 
				+      <DetailedPlan />
			
 
				+      <div style={{ height: "200px" }}></div>
			
 
				+      <ToInitialHeart />
			
 
				+      <ToSelectRegister />
			
 
				+    </Layout>
			
 
				+  );
			
 
				+};
			
--- a/src/pages/firstPage/index.less
+++ b/src/pages/firstPage/index.less
@@ -0,0 +1,606 @@
 
				+.space {
			
 
				+    margin-left: auto !important;
			
 
				+    margin-right: auto !important;
			
 
				+}
			
 
				+
			
 
				+.marginAuto {
			
 
				+    width: 1200px;
			
 
				+    margin: 0 auto;
			
 
				+    position: relative
			
 
				+}
			
 
				+
			
 
				+.btn {
			
 
				+    background-color: rgba(0, 0, 0, 0);
			
 
				+    border: none;
			
 
				+
			
 
				+}
			
 
				+
			
 
				+.btn:hover {
			
 
				+    background-color: rgba(0, 0, 0, 0);
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+.InWebsite {
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    margin-left: 50%;
			
 
				+    width: 100%;
			
 
				+    position: relative;
			
 
				+
			
 
				+    * {
			
 
				+        margin: 0 20px;
			
 
				+        cursor: pointer;
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+
			
 
				+    .flicker {
			
 
				+        background: black;
			
 
				+        color: white;
			
 
				+        width: 72px;
			
 
				+        height: 42px !important;
			
 
				+        border-radius: 12px;
			
 
				+        text-align: center;
			
 
				+
			
 
				+        span {
			
 
				+            display: block;
			
 
				+            text-align: center;
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+        }
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+    .flicker:hover {
			
 
				+        animation-duration: 1s;
			
 
				+        animation-fill-mode: both;
			
 
				+        animation-name: box-button-background-black-unset;
			
 
				+        transition-timing-function: linear;
			
 
				+    }
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+.page_details {
			
 
				+    display: flex;
			
 
				+    margin-top: 180px;
			
 
				+
			
 
				+    .page_black {
			
 
				+        width: 616px;
			
 
				+
			
 
				+        &>span {
			
 
				+            display: block;
			
 
				+            box-sizing: border-box;
			
 
				+            color: #000;
			
 
				+            font-weight: 700;
			
 
				+            font-size: 70px;
			
 
				+            line-height: 94px;
			
 
				+
			
 
				+        }
			
 
				+
			
 
				+        &>p {
			
 
				+            padding-top: 28px;
			
 
				+            padding-bottom: 60px;
			
 
				+            color: #3b4d59;
			
 
				+            width: 550px;
			
 
				+            font-size: 20px;
			
 
				+            line-height: 32px;
			
 
				+        }
			
 
				+
			
 
				+        .flickerAll {
			
 
				+            display: flex;
			
 
				+
			
 
				+            .flicker {
			
 
				+                width: 136px;
			
 
				+                height: 50px;
			
 
				+                margin: 0 25px;
			
 
				+                background: black;
			
 
				+                color: white;
			
 
				+                border-radius: 12px;
			
 
				+                padding: 12px 36px;
			
 
				+                position: relative;
			
 
				+                line-height: 50px;
			
 
				+
			
 
				+                span {
			
 
				+                    display: block;
			
 
				+                    text-align: center;
			
 
				+                    position: absolute;
			
 
				+                    top: 0;
			
 
				+                    font-size: 16px;
			
 
				+                    font-weight: 600;
			
 
				+                }
			
 
				+
			
 
				+            }
			
 
				+
			
 
				+            .flicker:hover {
			
 
				+                animation-duration: 1s;
			
 
				+                animation-fill-mode: both;
			
 
				+                animation-name: box-button-background-black-unset;
			
 
				+                transition-timing-function: linear;
			
 
				+            }
			
 
				+
			
 
				+            .flickers:hover {
			
 
				+                animation-duration: 1s;
			
 
				+                animation-fill-mode: both;
			
 
				+                animation-name: box-button-background-transparent-black;
			
 
				+                transition-timing-function: linear;
			
 
				+
			
 
				+                span {
			
 
				+                    color: #FFF;
			
 
				+                }
			
 
				+
			
 
				+            }
			
 
				+
			
 
				+
			
 
				+            .flickers {
			
 
				+                border: 1 solid #000;
			
 
				+                background: rgba(0, 0, 0, 0);
			
 
				+                border: 1px solid #000;
			
 
				+
			
 
				+                span {
			
 
				+                    color: #000;
			
 
				+                }
			
 
				+
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .svgImg {
			
 
				+        position: absolute;
			
 
				+        top: 68px;
			
 
				+        right: -260px;
			
 
				+    }
			
 
				+
			
 
				+    .imgRound {
			
 
				+        position: absolute;
			
 
				+        top: 210px;
			
 
				+        right: -260px;
			
 
				+
			
 
				+        .relatives {
			
 
				+            position: relative;
			
 
				+
			
 
				+            img {
			
 
				+                height: 686px;
			
 
				+            }
			
 
				+
			
 
				+            .fade-out {
			
 
				+                animation: fadeOut 1.5s forwards;
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.brand {
			
 
				+    .brand_data {
			
 
				+        font-size: 22px;
			
 
				+        font-weight: 600;
			
 
				+        color: #698f8f;
			
 
				+    }
			
 
				+
			
 
				+    .brand_img {
			
 
				+        display: flex;
			
 
				+        flex-wrap: wrap;
			
 
				+        row-gap: 60px;
			
 
				+        column-gap: 120px;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.introduce {
			
 
				+
			
 
				+    .introduce_plan {
			
 
				+        color: #fff;
			
 
				+        font-size: 60px;
			
 
				+        font-weight: 700;
			
 
				+    }
			
 
				+
			
 
				+    .introduce_title {
			
 
				+        color: #fff;
			
 
				+        font-size: 20px;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.detailed_plan {
			
 
				+    display: grid;
			
 
				+    gap: 200px;
			
 
				+
			
 
				+    .detailed_plan_payment {
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+        position: relative;
			
 
				+        left: 0px;
			
 
				+
			
 
				+        .detailed_plan_payment_text {
			
 
				+            color: #698f8f;
			
 
				+            font-weight: 600;
			
 
				+            font-size: 18px;
			
 
				+        }
			
 
				+
			
 
				+        .detailed_plan_payment_title {
			
 
				+            color: #000;
			
 
				+            font-weight: 700;
			
 
				+            font-size: 60px;
			
 
				+        }
			
 
				+
			
 
				+
			
 
				+
			
 
				+        .detailed_plan_payment_gap {
			
 
				+            display: grid;
			
 
				+            gap: 40px;
			
 
				+
			
 
				+            .title {
			
 
				+                color: #031520;
			
 
				+                font-weight: 600;
			
 
				+                font-size: 22px;
			
 
				+            }
			
 
				+
			
 
				+            .nicety {
			
 
				+                color: #5e6970;
			
 
				+                font-size: 18px;
			
 
				+                font-weight: 100;
			
 
				+            }
			
 
				+
			
 
				+        }
			
 
				+
			
 
				+        .signal {
			
 
				+            align-items: center;
			
 
				+            display: flex
			
 
				+        }
			
 
				+
			
 
				+        .signal:after {
			
 
				+            content: "\003E";
			
 
				+            color: #1890FF;
			
 
				+            margin-left: 0.3em;
			
 
				+            font-weight: 900;
			
 
				+            width: 18px;
			
 
				+            height: 28px;
			
 
				+            line-height: 28px;
			
 
				+        }
			
 
				+
			
 
				+        .signal:hover::after {
			
 
				+            content: "\2794";
			
 
				+            color: #1890FF;
			
 
				+            margin-left: 0.3em;
			
 
				+            font-weight: 900;
			
 
				+            width: 18px;
			
 
				+            height: 28px;
			
 
				+            line-height: 28px;
			
 
				+        }
			
 
				+
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+    .detailed_plan_manger {
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+        flex-direction: row-reverse;
			
 
				+        position: relative;
			
 
				+        left: -268px;
			
 
				+
			
 
				+        .manger {
			
 
				+            width: 590px;
			
 
				+        }
			
 
				+
			
 
				+        .detailed_plan_manger_text {
			
 
				+            color: #698f8f;
			
 
				+            font-weight: 600;
			
 
				+            font-size: 18px;
			
 
				+        }
			
 
				+
			
 
				+        .manger_title {
			
 
				+            color: #000;
			
 
				+            font-weight: 700;
			
 
				+            font-size: 60px;
			
 
				+        }
			
 
				+
			
 
				+        .detailed_plan_manger_gap {
			
 
				+            display: grid;
			
 
				+            gap: 40px;
			
 
				+
			
 
				+            .title {
			
 
				+                color: #031520;
			
 
				+                font-weight: 600;
			
 
				+                font-size: 22px;
			
 
				+            }
			
 
				+
			
 
				+            .nicety {
			
 
				+                color: #5e6970;
			
 
				+                font-size: 18px;
			
 
				+                font-weight: 100;
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+
			
 
				+    .detailed_plan_pay {
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+        position: relative;
			
 
				+        left: 0px;
			
 
				+
			
 
				+        .detailed_plan_pay_text {
			
 
				+            color: #698f8f;
			
 
				+            font-weight: 600;
			
 
				+            font-size: 18px;
			
 
				+        }
			
 
				+
			
 
				+        .detailed_plan_pay_title {
			
 
				+            color: #000;
			
 
				+            font-weight: 700;
			
 
				+            font-size: 60px;
			
 
				+        }
			
 
				+
			
 
				+
			
 
				+
			
 
				+        .detailed_plan_pay_gap {
			
 
				+            display: grid;
			
 
				+            gap: 40px;
			
 
				+
			
 
				+            .title {
			
 
				+                color: #031520;
			
 
				+                font-weight: 600;
			
 
				+                font-size: 22px;
			
 
				+            }
			
 
				+
			
 
				+            .nicety {
			
 
				+                color: #5e6970;
			
 
				+                font-size: 18px;
			
 
				+                font-weight: 100;
			
 
				+            }
			
 
				+
			
 
				+        }
			
 
				+
			
 
				+        .signal {
			
 
				+            align-items: center;
			
 
				+            display: flex
			
 
				+        }
			
 
				+
			
 
				+        .signal:after {
			
 
				+            content: "\003E";
			
 
				+            color: #1890FF;
			
 
				+            margin-left: 0.3em;
			
 
				+            font-weight: 900;
			
 
				+            width: 18px;
			
 
				+            height: 28px;
			
 
				+            line-height: 28px;
			
 
				+        }
			
 
				+
			
 
				+        .signal:hover::after {
			
 
				+            content: "\2794";
			
 
				+            color: #1890FF;
			
 
				+            margin-left: 0.3em;
			
 
				+            font-weight: 900;
			
 
				+            width: 18px;
			
 
				+            height: 28px;
			
 
				+            line-height: 28px;
			
 
				+        }
			
 
				+
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+
			
 
				+    .detailed_plan_finance {
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+        position: relative;
			
 
				+        left: -210px;
			
 
				+        flex-direction: row-reverse !important;
			
 
				+
			
 
				+        .detailed_plan_finance_text {
			
 
				+            color: #698f8f;
			
 
				+            font-weight: 600;
			
 
				+            font-size: 18px;
			
 
				+        }
			
 
				+
			
 
				+        .detailed_plan_finance_title {
			
 
				+            color: #000;
			
 
				+            font-weight: 700;
			
 
				+            font-size: 60px;
			
 
				+        }
			
 
				+
			
 
				+
			
 
				+
			
 
				+        .detailed_plan_finance_gap {
			
 
				+            display: grid;
			
 
				+            gap: 40px;
			
 
				+
			
 
				+            .title {
			
 
				+                color: #031520;
			
 
				+                font-weight: 600;
			
 
				+                font-size: 22px;
			
 
				+            }
			
 
				+
			
 
				+            .nicety {
			
 
				+                color: #5e6970;
			
 
				+                font-size: 18px;
			
 
				+                font-weight: 100;
			
 
				+            }
			
 
				+
			
 
				+        }
			
 
				+
			
 
				+        .signal {
			
 
				+            align-items: center;
			
 
				+            display: flex
			
 
				+        }
			
 
				+
			
 
				+        .signal:after {
			
 
				+            content: "\003E";
			
 
				+            color: #1890FF;
			
 
				+            margin-left: 0.3em;
			
 
				+            font-weight: 900;
			
 
				+            width: 18px;
			
 
				+            height: 28px;
			
 
				+            line-height: 28px;
			
 
				+        }
			
 
				+
			
 
				+        .signal:hover::after {
			
 
				+            content: "\2794";
			
 
				+            color: #1890FF;
			
 
				+            margin-left: 0.3em;
			
 
				+            font-weight: 900;
			
 
				+            width: 18px;
			
 
				+            height: 28px;
			
 
				+            line-height: 28px;
			
 
				+        }
			
 
				+
			
 
				+
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+
			
 
				+.initial_heart {
			
 
				+    .initial_heart_important {
			
 
				+        color: #fff;
			
 
				+        font-size: 60px;
			
 
				+        font-weight: 700;
			
 
				+    }
			
 
				+
			
 
				+    .initial_heart_detail {
			
 
				+        color: #FFF;
			
 
				+        opacity: .8;
			
 
				+        font-size: 18;
			
 
				+    }
			
 
				+
			
 
				+    .signal {
			
 
				+        align-items: center;
			
 
				+        display: flex;
			
 
				+        color: #99faff;
			
 
				+
			
 
				+        a {
			
 
				+
			
 
				+            color: #99faff;
			
 
				+        }
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+    .signal:after {
			
 
				+        content: "\003E";
			
 
				+        // color: #1890FF;
			
 
				+        margin-left: 0.3em;
			
 
				+        font-weight: 900;
			
 
				+        width: 18px;
			
 
				+        height: 28px;
			
 
				+        line-height: 28px;
			
 
				+    }
			
 
				+
			
 
				+    .signal:hover::after {
			
 
				+        content: "\2794";
			
 
				+        // color: #1890FF;
			
 
				+        margin-left: 0.3em;
			
 
				+        font-weight: 900;
			
 
				+        width: 18px;
			
 
				+        height: 28px;
			
 
				+        line-height: 28px;
			
 
				+    }
			
 
				+
			
 
				+
			
 
				+    .box4 {
			
 
				+        display: flex;
			
 
				+        gap: 12px;
			
 
				+        flex-wrap: wrap;
			
 
				+
			
 
				+        .box4Background {
			
 
				+            background: #f0f5f50d;
			
 
				+            border-radius: 6px;
			
 
				+            height: 220px;
			
 
				+            width: 594px;
			
 
				+
			
 
				+            .box4Detail {
			
 
				+                padding: 28px 36px 40px 36px;
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+.select_register {
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    position: relative;
			
 
				+
			
 
				+    div:nth-child(1) {
			
 
				+        color: #000;
			
 
				+        font-weight: 700;
			
 
				+        font-size: 48px;
			
 
				+    }
			
 
				+
			
 
				+    .flicker {
			
 
				+        width: 136px;
			
 
				+        height: 50px;
			
 
				+        margin: 0 25px;
			
 
				+        background: black;
			
 
				+        color: white;
			
 
				+        border-radius: 12px;
			
 
				+        padding: 12px 36px;
			
 
				+        position: relative;
			
 
				+        line-height: 50px;
			
 
				+
			
 
				+        span {
			
 
				+            display: block;
			
 
				+            text-align: center;
			
 
				+            position: absolute;
			
 
				+            top: 0;
			
 
				+            font-size: 16px;
			
 
				+            font-weight: 600;
			
 
				+        }
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+    .flicker:hover {
			
 
				+        animation-duration: 1s;
			
 
				+        animation-fill-mode: both;
			
 
				+        animation-name: box-button-background-black-unset;
			
 
				+        transition-timing-function: linear;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+@keyframes fadeOut {
			
 
				+    from {
			
 
				+        opacity: 0;
			
 
				+    }
			
 
				+
			
 
				+    to {
			
 
				+        opacity: 1;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+@keyframes box-button-background-transparent-black {
			
 
				+    0% {
			
 
				+        background: linear-gradient(45deg, transparent, transparent 20%, #99faff 40%, #c3ffa6 60%, #000 80%, #000);
			
 
				+        background-position: 0 0;
			
 
				+        background-size: 500% 100%;
			
 
				+        border-color: #000;
			
 
				+    }
			
 
				+
			
 
				+    100% {
			
 
				+        background: linear-gradient(45deg, transparent, transparent 20%, #99faff 40%, #c3ffa6 60%, #000 80%, #000);
			
 
				+        background-position: 100% 100%;
			
 
				+        background-size: 500% 100%;
			
 
				+        border-color: #000;
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+
			
 
				+@keyframes box-button-background-black-unset {
			
 
				+    0% {
			
 
				+
			
 
				+        background: linear-gradient(45deg, #000, #000 20%, #99faff 40%, #c3ffa6 60%, #000 80%, #000);
			
 
				+        background-position: 0 0;
			
 
				+        background-size: 500% 100%;
			
 
				+        border-color: initial;
			
 
				+    }
			
 
				+
			
 
				+    100% {
			
 
				+        background: linear-gradient(45deg, #000, #000 20%, #99faff 40%, #c3ffa6 60%, #000 80%, #000);
			
 
				+        background-position: 100% 100%;
			
 
				+        background-size: 500% 100%;
			
 
				+        border-color: #000;
			
 
				+    }
			
 
				+}
			
--- a/src/pages/fxuser/Edit.jsx
+++ b/src/pages/fxuser/Edit.jsx
@@ -0,0 +1,111 @@
 
				+import React, { useMemo } from "react";
			
 
				+import { Button, Card, Form, Input, Select } from "antd";
			
 
				+import useBool from "@/utils/hooks/useBool";
			
 
				+import { useSearchParams, useNavigate } from "react-router-dom";
			
 
				+import Page from "@/components/Page";
			
 
				+import { formItemLayout, tailFormItemLayout } from "@/utils/form";
			
 
				+import {
			
 
				+  getFxUserId,
			
 
				+  postFxUser,
			
 
				+  putFxUser,
			
 
				+  postFxUserAndLogin,
			
 
				+  putFxUserAndLogin,
			
 
				+} from "@/services/fxuser";
			
 
				+const { Option } = Select;
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const [loading, startLoading, cancelLoading] = useBool();
			
 
				+  const [submiting, startSubmit, cancelSubmit] = useBool();
			
 
				+
			
 
				+  const [searchParams] = useSearchParams();
			
 
				+  const [form] = Form.useForm();
			
 
				+  const navigate = useNavigate();
			
 
				+
			
 
				+  const id = searchParams.get("id");
			
 
				+
			
 
				+  React.useEffect(() => {
			
 
				+    if (id) {
			
 
				+      getFxUserId(id).then((res) => {
			
 
				+        form.setFieldsValue(res);
			
 
				+      });
			
 
				+    }
			
 
				+  });
			
 
				+
			
 
				+  const onFinish = (values) => {
			
 
				+    console.log(values);
			
 
				+    startSubmit();
			
 
				+    if (id) {
			
 
				+      //修改
			
 
				+      putFxUserAndLogin(id, values)
			
 
				+        .then((res) => {
			
 
				+          cancelSubmit();
			
 
				+          navigate(-1);
			
 
				+        })
			
 
				+        .catch(() => {
			
 
				+          cancelSubmit();
			
 
				+        });
			
 
				+    } else {
			
 
				+      //新增
			
 
				+      postFxUserAndLogin(values)
			
 
				+        .then((res) => {
			
 
				+          cancelSubmit();
			
 
				+          navigate(-1);
			
 
				+        })
			
 
				+        .catch(() => {
			
 
				+          cancelSubmit();
			
 
				+        });
			
 
				+    }
			
 
				+  };
			
 
				+
			
 
				+  return (
			
 
				+    <Page>
			
 
				+      <Card loading={loading}>
			
 
				+        <Form
			
 
				+          onFinish={onFinish}
			
 
				+          form={form}
			
 
				+          {...formItemLayout}
			
 
				+          scrollToFirstError
			
 
				+          style={{ maxWidth: "1000px" }}
			
 
				+        >
			
 
				+          <Form.Item
			
 
				+            name="userName"
			
 
				+            label="用户名称"
			
 
				+            rules={[
			
 
				+              {
			
 
				+                required: true,
			
 
				+                message: "请填写用户名称",
			
 
				+              },
			
 
				+            ]}
			
 
				+          >
			
 
				+            <Input placeholder="请输入用户名称" />
			
 
				+          </Form.Item>
			
 
				+          <Form.Item
			
 
				+            name="phone"
			
 
				+            label="手机号"
			
 
				+            rules={[
			
 
				+              {
			
 
				+                required: true,
			
 
				+                message: "请填写手机号",
			
 
				+              },
			
 
				+            ]}
			
 
				+          >
			
 
				+            <Input placeholder="请输入手机号" />
			
 
				+          </Form.Item>
			
 
				+          {id ? null : (
			
 
				+            <Form.Item label="账 户">
			
 
				+              <div style={{ color: "#333" }}>手机号；默认密码：123456</div>
			
 
				+            </Form.Item>
			
 
				+          )}
			
 
				+          <Form.Item {...tailFormItemLayout}>
			
 
				+            <Button loading={submiting} type="primary" htmlType="submit">
			
 
				+              保存
			
 
				+            </Button>
			
 
				+            <Button style={{ marginLeft: "2em" }} onClick={() => navigate(-1)}>
			
 
				+              返回
			
 
				+            </Button>
			
 
				+          </Form.Item>
			
 
				+        </Form>
			
 
				+      </Card>
			
 
				+    </Page>
			
 
				+  );
			
 
				+};
			
--- a/src/pages/fxuser/index.jsx
+++ b/src/pages/fxuser/index.jsx
@@ -0,0 +1,61 @@
 
				+import List from "@/components/Page/List";
			
 
				+import React from "react";
			
 
				+
			
 
				+import { getFxUser, deleteFxUserAndLogin } from "@/services/fxuser";
			
 
				+
			
 
				+import { useNavigate } from "react-router-dom";
			
 
				+import { Button } from "antd";
			
 
				+import moment from "moment";
			
 
				+export default (props) => {
			
 
				+  const navigate = useNavigate();
			
 
				+  const actionRef = React.useRef();
			
 
				+
			
 
				+  const columns = [
			
 
				+    {
			
 
				+      title: "用户名",
			
 
				+      dataIndex: "userName",
			
 
				+      key: "userName",
			
 
				+    },
			
 
				+    {
			
 
				+      title: "手机号",
			
 
				+      dataIndex: "phone",
			
 
				+      key: "phone",
			
 
				+    },
			
 
				+   
			
 
				+    {
			
 
				+      title: "创建时间",
			
 
				+      dataIndex: "createdAt",
			
 
				+      key: "createdAy",
			
 
				+      search: false,
			
 
				+      render: (t) => moment(t).format("YYYY-MM-DD HH:mm:ss"),
			
 
				+    },
			
 
				+   
			
 
				+  ];
			
 
				+
			
 
				+  const DeleteFxUser = (record) => {
			
 
				+    deleteFxUserAndLogin(record.userId).then((res) => {
			
 
				+      actionRef.current.reload();
			
 
				+    });
			
 
				+  };
			
 
				+  return (
			
 
				+    <List
			
 
				+      rowKey="userId"
			
 
				+      actionRef={actionRef}
			
 
				+      request={()=>{}}
			
 
				+      onEdit={(record) => navigate(`/fxuser/edit?id=${record.userId}`)}
			
 
				+      onDelete={DeleteFxUser}
			
 
				+      toolBarRender={() => [
			
 
				+        <Button
			
 
				+          key="1"
			
 
				+          type="primary"
			
 
				+          onClick={() => {
			
 
				+            navigate("edit");
			
 
				+          }}
			
 
				+        >
			
 
				+          新增
			
 
				+        </Button>,
			
 
				+      ]}
			
 
				+      columns={columns}
			
 
				+    />
			
 
				+  );
			
 
				+};
			
--- a/src/pages/login/Effect.jsx
+++ b/src/pages/login/Effect.jsx
@@ -0,0 +1,11 @@
 
				+import React from "react";
			
 
				+
			
 
				+export default (props) => {
			
 
				+  return (
			
 
				+    <div className="login-effect-box">
			
 
				+      <div className="login-effect">
			
 
				+        <div className="login-effect-arc"></div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+};
			
--- a/src/pages/login/LoginForm.bak.jsx
+++ b/src/pages/login/LoginForm.bak.jsx
@@ -0,0 +1,187 @@
 
				+import React, { useEffect, useRef, useState } from "react";
			
 
				+import md5 from "md5";
			
 
				+import { Form } from "antd";
			
 
				+import { login, qrCode, postQrCode } from "@/services/login";
			
 
				+import { json, useSearchParams } from "react-router-dom";
			
 
				+import LoginUse from "./LoginUse";
			
 
				+import LoginQrcode from "./LoginQrcode.bak";
			
 
				+export default (props) => {
			
 
				+  const [searchParams] = useSearchParams();
			
 
				+  const appid = searchParams.get("appid");
			
 
				+  const { onSuccess, mode } = props;
			
 
				+  const [form] = Form.useForm();
			
 
				+  const [loading, setLoading] = useState(false);
			
 
				+  const [showLogin, setShowLogin] = useState(true);
			
 
				+  const [codeLapse, setCodeLapse] = useState(0); //0 未扫码,1 扫码, 2确认扫码 3取消扫码 4已删除
			
 
				+
			
 
				+  const qrcodeRef = useRef();
			
 
				+  const refData = useRef();
			
 
				+  useEffect(() => {
			
 
				+    getQrCode();
			
 
				+    console.log(refData);
			
 
				+  }, [refData.id]);
			
 
				+
			
 
				+  const onFinish = (values) => {
			
 
				+    const formData = new FormData();
			
 
				+    formData.append("name", values.name);
			
 
				+    formData.append("pwd", md5(values.pwd));
			
 
				+    if (mode) {
			
 
				+      formData.append("mode", mode);
			
 
				+    }
			
 
				+    formData.append("client", appid);
			
 
				+
			
 
				+    setLoading(true);
			
 
				+    login(formData)
			
 
				+      .then((res) => {
			
 
				+        onSuccess(res);
			
 
				+        setLoading(false);
			
 
				+      })
			
 
				+      .catch((err) => {
			
 
				+        console.log("----err--", err);
			
 
				+        setLoading(false);
			
 
				+      });
			
 
				+  };
			
 
				+
			
 
				+  const getQrCode = () => {
			
 
				+    qrCode({ client: appid || "authcenter" })
			
 
				+      .then((res) => {
			
 
				+        refData.current = res;
			
 
				+        createdCode(res);
			
 
				+        checkTimeUp();
			
 
				+
			
 
				+        console.log(res);
			
 
				+      })
			
 
				+      .catch((err) => {
			
 
				+        setCodeLapse(4);
			
 
				+      });
			
 
				+  };
			
 
				+
			
 
				+  const createdCode = (res) => {
			
 
				+    new QRCode(qrcodeRef.current, {
			
 
				+      width: 150,
			
 
				+      height: 150,
			
 
				+      text: res.qrCode,
			
 
				+      correctLevel: 3,
			
 
				+    });
			
 
				+  };
			
 
				+  /**
			
 
				+   * @param {*轮询方法}
			
 
				+   */
			
 
				+  //  检测二维码状态 业务代码
			
 
				+  const checkStatus = () => {
			
 
				+    const { current } = refData;
			
 
				+    return new Promise((resolve, reject) => {
			
 
				+      postQrCode(current.id, mode)
			
 
				+        .then((it) => {
			
 
				+          if (current.expire >= 0) {
			
 
				+            // 二维码还没有失效
			
 
				+            current.expire--;
			
 
				+            if (it.state == 0) {
			
 
				+              // console.log("未扫码");
			
 
				+              setCodeLapse(0);
			
 
				+              resolve();
			
 
				+            } else if (it.state == 1) {
			
 
				+              // console.log("已扫码");
			
 
				+              setCodeLapse(1);
			
 
				+              resolve();
			
 
				+            } else if (it.state == 3 || it.state == 4) {
			
 
				+              setCodeLapse(4);
			
 
				+              reject();
			
 
				+            } else if (it.token) {
			
 
				+              onSuccess(it);
			
 
				+            } else if (it == null) {
			
 
				+              console.log("null");
			
 
				+              setCodeLapse(4);
			
 
				+            }
			
 
				+          } else {
			
 
				+            // 二维码失效
			
 
				+            console.log("二维码失效");
			
 
				+            qrStop();
			
 
				+            setCodeLapse(4);
			
 
				+            reject();
			
 
				+          }
			
 
				+        })
			
 
				+        .catch((err) => {
			
 
				+          console.log(err);
			
 
				+          qrStop();
			
 
				+          setCodeLapse(4);
			
 
				+          reject();
			
 
				+        });
			
 
				+    });
			
 
				+  };
			
 
				+
			
 
				+  // 检测二维码状态 逻辑代码
			
 
				+  let time = useRef();
			
 
				+  const checkTimeUp = () => {
			
 
				+    checkStatus()
			
 
				+      .then(() => {
			
 
				+        // console.log("===================");
			
 
				+        // console.log("最上面的", time.current);
			
 
				+        time.current = setTimeout(() => {
			
 
				+          // console.log("上面的", time.current);
			
 
				+          if (time.current) {
			
 
				+            // console.log("下面的", time.current);
			
 
				+            console.log("我先清除一下定时器");
			
 
				+            clearTimeout(time.current);
			
 
				+            checkTimeUp();
			
 
				+          }
			
 
				+        }, 1000);
			
 
				+      })
			
 
				+      .catch(() => {
			
 
				+        if (time.current) {
			
 
				+          clearTimeout(time.current);
			
 
				+        }
			
 
				+      });
			
 
				+  };
			
 
				+
			
 
				+  // 删除二维码
			
 
				+  const qrStop = () => {
			
 
				+    if (qrcodeRef.current) {
			
 
				+      const idv = qrcodeRef.current.children;
			
 
				+      for (var i = idv.length - 1; i >= 0; i--) {
			
 
				+        qrcodeRef.current.removeChild(idv[i]);
			
 
				+      }
			
 
				+    } else {
			
 
				+      return;
			
 
				+    }
			
 
				+  };
			
 
				+  // 重新刷新二维码
			
 
				+  const onRenovate4 = () => {
			
 
				+    // 重新查询
			
 
				+    getQrCode();
			
 
				+    setCodeLapse(0);
			
 
				+  };
			
 
				+  // 重新刷新二维码
			
 
				+  const onRenovate1 = () => {
			
 
				+    // 重新查询
			
 
				+    clearTimeout(time.current);
			
 
				+    setCodeLapse(0);
			
 
				+    getQrCode();
			
 
				+  };
			
 
				+  // 切换账号登录
			
 
				+  const checkLoginUse = () => {
			
 
				+    setShowLogin(false);
			
 
				+    clearTimeout(time.current);
			
 
				+  };
			
 
				+  // 切换二维码登录
			
 
				+  const checkLoginwx = () => {
			
 
				+    setShowLogin(true);
			
 
				+    setCodeLapse(0);
			
 
				+    getQrCode();
			
 
				+  };
			
 
				+  return (
			
 
				+    <Form form={form} layout="vertical" onFinish={onFinish}>
			
 
				+      {showLogin ? (
			
 
				+        <LoginQrcode
			
 
				+          qrcodeRef={qrcodeRef}
			
 
				+          codeLapse={codeLapse}
			
 
				+          onRenovate4={onRenovate4}
			
 
				+          onRenovate1={onRenovate1}
			
 
				+          checkLoginUse={checkLoginUse}
			
 
				+        />
			
 
				+      ) : (
			
 
				+        <LoginUse loading={loading} checkLoginwx={checkLoginwx} />
			
 
				+      )}
			
 
				+    </Form>
			
 
				+  );
			
 
				+};
			
--- a/src/pages/login/LoginForm.jsx
+++ b/src/pages/login/LoginForm.jsx
@@ -0,0 +1,67 @@
 
				+import React from "react";
			
 
				+import md5 from "md5";
			
 
				+import { Button, Form, Input, Radio } from "antd";
			
 
				+import { login } from "@/services/login";
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const { onSuccess, mode, appid } = props;
			
 
				+  const [form] = Form.useForm();
			
 
				+  const [loading, setLoading] = React.useState(false);
			
 
				+  console.log(process.env.NODE_ENV);
			
 
				+  const onFinish = (values) => {
			
 
				+    setLoading(true);
			
 
				+    login({
			
 
				+      loginName: values.loginName,
			
 
				+      loginType: "platform.pc",
			
 
				+      password: md5(values.password),
			
 
				+    })
			
 
				+      .then((res) => {
			
 
				+        setLoading(true);
			
 
				+        onSuccess(res.user);
			
 
				+        setLoading(false);
			
 
				+      })
			
 
				+      .catch((err) => {
			
 
				+        // console.log('----err--', err);
			
 
				+        setLoading(false);
			
 
				+      });
			
 
				+
			
 
				+    setLoading(false);
			
 
				+  };
			
 
				+  return (
			
 
				+    <Form
			
 
				+      form={form}
			
 
				+      layout="vertical"
			
 
				+      onFinish={onFinish}
			
 
				+    // style={{ width: "260px", marginTop: "24px", paddingBottom: "24px" }}
			
 
				+    >
			
 
				+      <Form.Item
			
 
				+        label="账户"
			
 
				+        name="loginName"
			
 
				+        rules={[{ required: true, message: "请输入账户" }]}
			
 
				+      >
			
 
				+        <Input placeholder="请输入账户" style={{ borderRadius: "4px" }} />
			
 
				+      </Form.Item>
			
 
				+      <Form.Item
			
 
				+        label="密 码"
			
 
				+        name="password"
			
 
				+        rules={[{ required: true, message: "请输入密码" }]}
			
 
				+      >
			
 
				+        <Input.Password
			
 
				+          placeholder="请输入密码"
			
 
				+          style={{ borderRadius: "4px" }}
			
 
				+        />
			
 
				+      </Form.Item>
			
 
				+      <Form.Item>
			
 
				+        <Button
			
 
				+          type="primary"
			
 
				+          size="large"
			
 
				+          style={{ width: "100%", marginTop: "24px", borderRadius: "4px" }}
			
 
				+          loading={loading}
			
 
				+          htmlType="submit"
			
 
				+        >
			
 
				+          登录
			
 
				+        </Button>
			
 
				+      </Form.Item>
			
 
				+    </Form>
			
 
				+  );
			
 
				+};
			
--- a/src/pages/login/LoginQrcode.bak.jsx
+++ b/src/pages/login/LoginQrcode.bak.jsx
@@ -0,0 +1,67 @@
 
				+import React from "react";
			
 
				+import "./qrcode.less";
			
 
				+export default (props) => {
			
 
				+  const { qrcodeRef, codeLapse, onRenovate4, onRenovate1, checkLoginUse } =
			
 
				+    props;
			
 
				+  console.log(codeLapse);
			
 
				+
			
 
				+  return (
			
 
				+    <>
			
 
				+      <span className="pageUse" onClick={checkLoginUse}>
			
 
				+        使用账号登录
			
 
				+      </span>
			
 
				+      <div className="pageQr">
			
 
				+        {codeLapse == 0 ? (
			
 
				+          <div className="qrcode">
			
 
				+            <div className="qrBoder">
			
 
				+              <div ref={qrcodeRef}></div>
			
 
				+            </div>
			
 
				+            <span>微信扫一扫登录</span>
			
 
				+          </div>
			
 
				+        ) : codeLapse == 1 ? (
			
 
				+          <div className="loginSvg">
			
 
				+            <svg
			
 
				+              className="svg"
			
 
				+              width="74"
			
 
				+              height="74"
			
 
				+              viewBox="0 0 18 18"
			
 
				+              xmlns="http://www.w3.org/2000/svg"
			
 
				+            >
			
 
				+              <path
			
 
				+                d="M18 9.111C18 13.971 13.97 18 8.889 18 4.029 18 0 13.97 0 9.111 0 4.03 4.03 0 8.889 0 13.97 0 18 4.03 18 9.111zM4.788 9.79l2.876 2.976c.041.043.109.047.15.007l6.327-6.227a.196.196 0 00-.006-.275l-.236-.233a.221.221 0 00-.291-.017l-5.792 4.825c-.037.032-.114.034-.161-.002L5.329 9.06c-.09-.068-.207-.043-.274.048l-.28.38a.234.234 0 00.013.3z"
			
 
				+                fill="#09BB07"
			
 
				+                fillRule="evenodd"
			
 
				+              ></path>
			
 
				+              <path
			
 
				+                d="M18 9.111C18 13.971 13.97 18 8.889 18 4.029 18 0 13.97 0 9.111 0 4.03 4.03 0 8.889 0 13.97 0 18 4.03 18 9.111zM4.788 9.79l2.876 2.976c.041.043.109.047.15.007l6.327-6.227a.196.196 0 00-.006-.275l-.236-.233a.221.221 0 00-.291-.017l-5.792 4.825c-.037.032-.114.034-.161-.002L5.329 9.06c-.09-.068-.207-.043-.274.048l-.28.38a.234.234 0 00.013.3z"
			
 
				+                fill="#09BB07"
			
 
				+                fillRule="evenodd"
			
 
				+              ></path>
			
 
				+              <path
			
 
				+                d="M18 9.111C18 13.971 13.97 18 8.889 18 4.029 18 0 13.97 0 9.111 0 4.03 4.03 0 8.889 0 13.97 0 18 4.03 18 9.111zM4.788 9.79l2.876 2.976c.041.043.109.047.15.007l6.327-6.227a.196.196 0 00-.006-.275l-.236-.233a.221.221 0 00-.291-.017l-5.792 4.825c-.037.032-.114.034-.161-.002L5.329 9.06c-.09-.068-.207-.043-.274.048l-.28.38a.234.234 0 00.013.3z"
			
 
				+                fill="#09BB07"
			
 
				+                fillRule="evenodd"
			
 
				+              ></path>
			
 
				+            </svg>
			
 
				+            <span className="ScanningCode">已扫码成功</span>
			
 
				+
			
 
				+            <a className="newCode" onClick={onRenovate1}>
			
 
				+              重新扫码
			
 
				+            </a>
			
 
				+          </div>
			
 
				+        ) : codeLapse == 4 ? (
			
 
				+          <div className="loginPage">
			
 
				+            <div className="loginLap">
			
 
				+              <p>二维码已过期</p>
			
 
				+              <p>
			
 
				+                <a onClick={onRenovate4}>点击刷新</a>
			
 
				+              </p>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        ) : (
			
 
				+          <div></div>
			
 
				+        )}
			
 
				+      </div>
			
 
				+    </>
			
 
				+  );
			
 
				+};
			
--- a/src/pages/login/LoginUse.jsx
+++ b/src/pages/login/LoginUse.jsx
@@ -0,0 +1,45 @@
 
				+import React from "react";
			
 
				+import { Button, Form, Input } from "antd";
			
 
				+export default (props) => {
			
 
				+  const { loading, checkLoginwx } = props;
			
 
				+  console.log(loading);
			
 
				+  const style = {
			
 
				+    display: "flex",
			
 
				+    justifyContent: "flex-end",
			
 
				+    cursor: "pointer",
			
 
				+    color: "#576b95",
			
 
				+    position: "absolute",
			
 
				+    top: "0",
			
 
				+    right: "0",
			
 
				+    height: "33px",
			
 
				+    lineHeight: "33px",
			
 
				+  };
			
 
				+  return (
			
 
				+    <>
			
 
				+      <span style={style} onClick={checkLoginwx}>
			
 
				+        使用二维码登录
			
 
				+      </span>
			
 
				+
			
 
				+      <Form.Item label="用户名" name="name" required>
			
 
				+        <Input placeholder="请输入用户名" style={{ borderRadius: "4px" }} />
			
 
				+      </Form.Item>
			
 
				+      <Form.Item label="密 码" name="pwd" required>
			
 
				+        <Input.Password
			
 
				+          placeholder="请输入密码"
			
 
				+          style={{ borderRadius: "4px" }}
			
 
				+        />
			
 
				+      </Form.Item>
			
 
				+      <Form.Item>
			
 
				+        <Button
			
 
				+          type="primary"
			
 
				+          size="large"
			
 
				+          style={{ width: "100%", marginTop: "24px", borderRadius: "4px" }}
			
 
				+          loading={loading}
			
 
				+          htmlType="submit"
			
 
				+        >
			
 
				+          登录
			
 
				+        </Button>
			
 
				+      </Form.Item>
			
 
				+    </>
			
 
				+  );
			
 
				+};
			
--- a/src/pages/login/Particles.jsx
+++ b/src/pages/login/Particles.jsx
@@ -0,0 +1,24 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default (props) => {
			
 
				+  React.useEffect(() => {
			
 
				+    const baseUrl = import.meta.env.BASE_URL;
			
 
				+    const oScript = document.createElement("script");
			
 
				+    oScript.type = "text\/javascript";
			
 
				+    oScript.onload = () => {
			
 
				+      particlesJS.load('particles-js', `${baseUrl}particles/particles.json`, function() {
			
 
				+        console.log('callback - particles.js config loaded');
			
 
				+      });
			
 
				+    }
			
 
				+    document.querySelector('head').appendChild(oScript);
			
 
				+    oScript.src = `${baseUrl}particles/particles.min.js`;
			
 
				+
			
 
				+    return () => {
			
 
				+      document.querySelector('head').removeChild(oScript);
			
 
				+    }
			
 
				+  }, [])
			
 
				+
			
 
				+  return (
			
 
				+    <div id="particles-js"></div>
			
 
				+  )
			
 
				+}
			
--- a/src/pages/login/components/LoginQrCode.jsx
+++ b/src/pages/login/components/LoginQrCode.jsx
@@ -0,0 +1,159 @@
 
				+import React from 'react';
			
 
				+import { Button } from 'antd';
			
 
				+// import { qrCode, postQrCode } from "@/services/login";
			
 
				+import QrCode from './QrCode';
			
 
				+import SuccessIcon from './SuccessIcon';
			
 
				+import styles from './qrcode.module.less';
			
 
				+
			
 
				+// 轮询
			
 
				+const polling = (p, delay) => {
			
 
				+  let t = null;
			
 
				+  let cancelled = false;
			
 
				+
			
 
				+  const clearTicker = () => {
			
 
				+    if (t) {
			
 
				+      clearTimeout(t);
			
 
				+      t = null;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  const cancel = () => {
			
 
				+    cancelled = true;
			
 
				+    clearTimeout(t);
			
 
				+  };
			
 
				+
			
 
				+  const fn = () => {
			
 
				+    p().then((done) => {
			
 
				+      clearTicker();
			
 
				+
			
 
				+      if (!done && !cancelled) {
			
 
				+        t = setTimeout(fn, delay);
			
 
				+      }
			
 
				+    }).catch(() => {
			
 
				+      clearTicker();
			
 
				+    });
			
 
				+  }
			
 
				+
			
 
				+  fn();
			
 
				+
			
 
				+  return cancel;
			
 
				+};
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const { onSuccess, mode, appid } = props;
			
 
				+
			
 
				+  // 二维码是否初始化
			
 
				+  const [qrInited, setQrInited] = React.useState(false);
			
 
				+  // 是否扫码
			
 
				+  const [scaned, setScaned] = React.useState(false);
			
 
				+  // 二维码数据
			
 
				+  const [qrData, setQrData] = React.useState();
			
 
				+  // 是否发生错误
			
 
				+  const [hasError, setHasError] = React.useState(false);
			
 
				+  // 提示信息
			
 
				+  const [tips, setTips] = React.useState();
			
 
				+  // 停止轮询控制器
			
 
				+  const pollingCancel = React.useRef();
			
 
				+
			
 
				+  // 重新开始
			
 
				+  const onReset = () => {
			
 
				+    // 停止轮询
			
 
				+    if (pollingCancel.current) {
			
 
				+      pollingCancel.current();
			
 
				+    }
			
 
				+
			
 
				+    setQrInited(false);
			
 
				+    setScaned(false);
			
 
				+    setHasError(false);
			
 
				+  }
			
 
				+
			
 
				+  // 校验二维码各种状态
			
 
				+  // const checkQrCode = React.useCallback((qrId, params) => {
			
 
				+  //   return new Promise((resolve, reject) => {
			
 
				+  //     postQrCode(qrId, params).then(res => {
			
 
				+  //       // 带有 token 说明扫码登录成功
			
 
				+  //       if (res.token) {
			
 
				+  //         onSuccess(res);
			
 
				+  //         resolve(true);
			
 
				+  //         return ;
			
 
				+  //       } else {
			
 
				+  //         // state 与 stateLabels 是对应关系
			
 
				+  //         const { state } = res;
			
 
				+  //         const stateLabels = [
			
 
				+  //           '未扫码',
			
 
				+  //           '扫码成功, 请确认登录',
			
 
				+  //           '扫码确认',
			
 
				+  //           '已取消',
			
 
				+  //           '已删除',
			
 
				+  //         ]
			
 
				+
			
 
				+  //         const isError = state > 2;
			
 
				+  //         setScaned(state == 1);
			
 
				+  //         setHasError(isError);
			
 
				+  //         setTips(stateLabels[state]);
			
 
				+
			
 
				+  //         if (isError) {
			
 
				+  //           reject();
			
 
				+  //         } else {
			
 
				+  //           resolve();
			
 
				+  //         }
			
 
				+  //       }
			
 
				+  //     }).catch((err) => {
			
 
				+  //       console.error(err);
			
 
				+  //       setTips(err.data.msg || err.message || err);
			
 
				+
			
 
				+  //       setScaned(false);
			
 
				+  //       setHasError(true);
			
 
				+  //       reject();
			
 
				+  //     });
			
 
				+  //   });
			
 
				+  // }, []);
			
 
				+
			
 
				+  // 请求二维码
			
 
				+  // React.useEffect(() => {
			
 
				+  //   if (!qrInited) {
			
 
				+  //     qrCode({ client: appid || "authcenter" }).then(res => {
			
 
				+  //       setQrData(res);
			
 
				+  //       setQrInited(true);
			
 
				+
			
 
				+  //       // 开启轮询
			
 
				+  //       const fn = () => checkQrCode(res.id, { mode });
			
 
				+  //       pollingCancel.current = polling(fn, 1000);
			
 
				+  //     })
			
 
				+  //   }
			
 
				+  // }, [qrInited, mode]);
			
 
				+
			
 
				+  return (
			
 
				+    <div className={styles['qr-form']}>
			
 
				+      <div className={styles['qr-form-wrapper']}>
			
 
				+
			
 
				+        <div className={styles['qr-box']}>
			
 
				+          <QrCode text={qrData?.qrCode} />
			
 
				+        </div>
			
 
				+
			
 
				+        {
			
 
				+          (scaned || hasError) && (
			
 
				+            <div className={styles['status-box']}>
			
 
				+              <div>
			
 
				+                {
			
 
				+                  scaned && !hasError && <SuccessIcon />
			
 
				+                }
			
 
				+                <div className={styles['status-tip']}>{tips}</div>
			
 
				+                <Button type='link' onClick={onReset}>点击刷新</Button>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+          )
			
 
				+        }
			
 
				+
			
 
				+      </div>
			
 
				+
			
 
				+      <div className={styles['tip-box']}>
			
 
				+        {
			
 
				+          qrInited && !hasError && (
			
 
				+            <div>请使用行信扫码登录</div>
			
 
				+          )
			
 
				+        }
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  )
			
 
				+}
			
--- a/src/pages/login/components/QrCode.jsx
+++ b/src/pages/login/components/QrCode.jsx
@@ -0,0 +1,28 @@
 
				+import React from 'react';
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const { text, width = 200, height = 200 } = props;
			
 
				+
			
 
				+  const ref = React.useRef();
			
 
				+  const qrRef = React.useRef();
			
 
				+
			
 
				+  React.useEffect(() => {
			
 
				+    if (text) {
			
 
				+      if (qrRef.current) {
			
 
				+        qrRef.current.clear();
			
 
				+        qrRef.current.makeCode(text);
			
 
				+      } else {
			
 
				+        qrRef.current = new QRCode(ref.current, {
			
 
				+          text,
			
 
				+          width,
			
 
				+          height,
			
 
				+          correctLevel: QRCode.CorrectLevel.Q
			
 
				+        });
			
 
				+      }
			
 
				+    }
			
 
				+  }, [text, width, height]);
			
 
				+
			
 
				+  return (
			
 
				+    <div ref={ref}></div>
			
 
				+  )
			
 
				+}
			
--- a/src/pages/login/components/SuccessIcon.jsx
+++ b/src/pages/login/components/SuccessIcon.jsx
@@ -0,0 +1,29 @@
 
				+import React from 'react'
			
 
				+
			
 
				+export default (props) => {
			
 
				+  return (
			
 
				+    <svg
			
 
				+      className="svg"
			
 
				+      width="74"
			
 
				+      height="74"
			
 
				+      viewBox="0 0 18 18"
			
 
				+      xmlns="http://www.w3.org/2000/svg"
			
 
				+    >
			
 
				+      <path
			
 
				+        d="M18 9.111C18 13.971 13.97 18 8.889 18 4.029 18 0 13.97 0 9.111 0 4.03 4.03 0 8.889 0 13.97 0 18 4.03 18 9.111zM4.788 9.79l2.876 2.976c.041.043.109.047.15.007l6.327-6.227a.196.196 0 00-.006-.275l-.236-.233a.221.221 0 00-.291-.017l-5.792 4.825c-.037.032-.114.034-.161-.002L5.329 9.06c-.09-.068-.207-.043-.274.048l-.28.38a.234.234 0 00.013.3z"
			
 
				+        fill="#09BB07"
			
 
				+        fillRule="evenodd"
			
 
				+      ></path>
			
 
				+      <path
			
 
				+        d="M18 9.111C18 13.971 13.97 18 8.889 18 4.029 18 0 13.97 0 9.111 0 4.03 4.03 0 8.889 0 13.97 0 18 4.03 18 9.111zM4.788 9.79l2.876 2.976c.041.043.109.047.15.007l6.327-6.227a.196.196 0 00-.006-.275l-.236-.233a.221.221 0 00-.291-.017l-5.792 4.825c-.037.032-.114.034-.161-.002L5.329 9.06c-.09-.068-.207-.043-.274.048l-.28.38a.234.234 0 00.013.3z"
			
 
				+        fill="#09BB07"
			
 
				+        fillRule="evenodd"
			
 
				+      ></path>
			
 
				+      <path
			
 
				+        d="M18 9.111C18 13.971 13.97 18 8.889 18 4.029 18 0 13.97 0 9.111 0 4.03 4.03 0 8.889 0 13.97 0 18 4.03 18 9.111zM4.788 9.79l2.876 2.976c.041.043.109.047.15.007l6.327-6.227a.196.196 0 00-.006-.275l-.236-.233a.221.221 0 00-.291-.017l-5.792 4.825c-.037.032-.114.034-.161-.002L5.329 9.06c-.09-.068-.207-.043-.274.048l-.28.38a.234.234 0 00.013.3z"
			
 
				+        fill="#09BB07"
			
 
				+        fillRule="evenodd"
			
 
				+      ></path>
			
 
				+    </svg>
			
 
				+  )
			
 
				+}
			
--- a/src/pages/login/components/qrcode.module.less
+++ b/src/pages/login/components/qrcode.module.less
@@ -0,0 +1,41 @@
 
				+
			
 
				+.qr-form {
			
 
				+  position: relative;
			
 
				+  line-height: 2em;
			
 
				+  text-align: center;
			
 
				+  margin-top: 24px;
			
 
				+
			
 
				+  .qr-form-wrapper {
			
 
				+    margin: 0 auto;
			
 
				+    width: 240px;
			
 
				+    height: 240px;
			
 
				+    display: grid;
			
 
				+    place-items: center;
			
 
				+  }
			
 
				+
			
 
				+  .qr-box {
			
 
				+    position: absolute;
			
 
				+    padding: 15px;
			
 
				+    box-sizing: border-box;
			
 
				+    border: 1px solid #e2e2e2;
			
 
				+    z-index: 1;
			
 
				+  }
			
 
				+
			
 
				+  .status-box {
			
 
				+    background: rgba(255, 255, 255, 0.98);
			
 
				+    position: relative;
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    z-index: 10;
			
 
				+    display: grid;
			
 
				+    place-items: center;
			
 
				+  
			
 
				+    // .status-tip {
			
 
				+    // }
			
 
				+  }
			
 
				+
			
 
				+  .tip-box {
			
 
				+    margin-top: 1em;
			
 
				+    letter-spacing: 1.4px;
			
 
				+  }
			
 
				+}
			
--- a/src/pages/login/foo.js
+++ b/src/pages/login/foo.js
@@ -0,0 +1,34 @@
 
				+const { postQrCode } = require("@/services/login");
			
 
				+
			
 
				+const foo = (fp, delay) => {
			
 
				+
			
 
				+    let t = null;
			
 
				+
			
 
				+    const fn = () => {
			
 
				+        fp().then(() => {
			
 
				+            if (t) {
			
 
				+                clearTimeout(t);
			
 
				+            }
			
 
				+    
			
 
				+            t = setTimeout(fn, delay);
			
 
				+        }).catch(() => {
			
 
				+            if (t) {
			
 
				+                clearTimeout(t);
			
 
				+            }
			
 
				+        });
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+const fp = () => {
			
 
				+    return new Promise((resovle, reject) => {
			
 
				+        postQrCode().then(() => {
			
 
				+            if (succes) {
			
 
				+                resovle()
			
 
				+            } else {
			
 
				+                reject()
			
 
				+            }
			
 
				+        }).catch(() => {
			
 
				+            reject()
			
 
				+        });
			
 
				+    });
			
 
				+}
			
--- a/src/pages/login/index.jsx
+++ b/src/pages/login/index.jsx
@@ -0,0 +1,61 @@
 
				+import React, { useEffect } from "react";
			
 
				+import { Button, message } from "antd";
			
 
				+import { Helmet } from "react-helmet";
			
 
				+import { useNavigate, useSearchParams } from "react-router-dom";
			
 
				+import { useModel } from "@/store";
			
 
				+import LoginForm from "./LoginForm";
			
 
				+import LoginQrCode from "./components/LoginQrCode";
			
 
				+import LoginEffect from "./Effect";
			
 
				+import Particles from './Particles';
			
 
				+import "./style.less";
			
 
				+
			
 
				+const year = new Date().getFullYear();
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const { app } = useModel("system");
			
 
				+  const navigate = useNavigate();
			
 
				+  const [searchParams] = useSearchParams();
			
 
				+
			
 
				+  const title = `欢迎使用${app.fullName}`;
			
 
				+  const copyright = `${app.company} @ ${year}`;
			
 
				+
			
 
				+  const onChangeType = () => {
			
 
				+    setLoginType(loginType == 0 ? 1 : 0);
			
 
				+  };
			
 
				+
			
 
				+  const onSuccess = (row) => {
			
 
				+    try {
			
 
				+      navigate("/fxuser");
			
 
				+    } catch (e) {
			
 
				+      message.error(e);
			
 
				+    }
			
 
				+  };
			
 
				+
			
 
				+  return (
			
 
				+    <div className="login-page">
			
 
				+      <Helmet>
			
 
				+        <title>{app.fullName}</title>
			
 
				+      </Helmet>
			
 
				+      <Particles />
			
 
				+      <div className="login-page-container">
			
 
				+        <div className="login-card">
			
 
				+          <div className="login-card-left">
			
 
				+            <div className="login-form-box">
			
 
				+              <div className="login-form">
			
 
				+                <h2 className="login-text">登录系统</h2>
			
 
				+                <div className="login-subtitle">{title}</div>
			
 
				+                <LoginForm onSuccess={onSuccess} />
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <div className="login-copyright">
			
 
				+              {copyright}
			
 
				+            </div>
			
 
				+          </div>
			
 
				+          <div className="login-card-right">
			
 
				+            <LoginEffect />
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+};
			
--- a/src/pages/login/qrcode.less
+++ b/src/pages/login/qrcode.less
@@ -0,0 +1,77 @@
 
				+ .pageQr{
			
 
				+  position: relative;
			
 
				+  width: 180px;
			
 
				+  height: 180px;
			
 
				+  margin: 0 auto;
			
 
				+  // top: 50%;
			
 
				+  .loginPage,.loginSvg{
			
 
				+    display: table;
			
 
				+      position: absolute;
			
 
				+      top: 100%;
			
 
				+      left: 40%;
			
 
				+      text-align: center;
			
 
				+      width: 180px;
			
 
				+      height: 180px;
			
 
				+      margin-left: -61px;
			
 
				+      margin-top: -132px;
			
 
				+      background-color: #fffffff5;
			
 
				+      .loginLap{
			
 
				+        display: table-cell;
			
 
				+    vertical-align: middle;
			
 
				+      }
			
 
				+
			
 
				+  }
			
 
				+
			
 
				+  .loginSvg{
			
 
				+.ScanningCode{
			
 
				+  display: block;
			
 
				+  // cursor: pointer;
			
 
				+}
			
 
				+
			
 
				+  }
			
 
				+  .newCode{
			
 
				+    position: absolute;
			
 
				+    top: 100%;
			
 
				+    right: 37%;
			
 
				+    cursor: pointer;
			
 
				+    color: #576b95;
			
 
				+    text-decoration: none;
			
 
				+  }
			
 
				+  .qrcode{
			
 
				+    width: 178px;
			
 
				+    height: 150px;
			
 
				+    margin: auto;
			
 
				+    position: absolute;
			
 
				+    top: 30%;
			
 
				+    span{
			
 
				+      display: block;
			
 
				+      text-align: center; 
			
 
				+      padding-top:10px ;
			
 
				+    }
			
 
				+    .qrBoder{
			
 
				+      box-sizing: border-box;
			
 
				+    border: 1px solid #e2e2e2;
			
 
				+    width: 180px;
			
 
				+    height: 180px;
			
 
				+    text-align: -webkit-center;
			
 
				+    img{
			
 
				+      position: absolute;
			
 
				+    top: 10%;
			
 
				+    right: 6%;
			
 
				+    }
			
 
				+    }
			
 
				+  }
			
 
				+ }
			
 
				+
			
 
				+ .pageUse{
			
 
				+  display: flex;
			
 
				+  justify-content: flex-end;
			
 
				+  cursor: pointer;
			
 
				+  color: #576b95;
			
 
				+  
			
 
				+  position: absolute;
			
 
				+  top: 0;
			
 
				+  right: 0;
			
 
				+  height: 33px;
			
 
				+  line-height: 33px;
			
 
				+}
			
--- a/src/pages/login/style.less
+++ b/src/pages/login/style.less
@@ -0,0 +1,99 @@
 
				+.login-page {
			
 
				+  height: 100%;
			
 
				+  background: linear-gradient(#fff, #e6f7ff);
			
 
				+
			
 
				+  #particles-js {
			
 
				+    position: absolute;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+  }
			
 
				+
			
 
				+  .login-page-container {
			
 
				+    height: 100%;
			
 
				+    display: grid;
			
 
				+    place-items: center;
			
 
				+    position: relative;
			
 
				+    z-index: 10;
			
 
				+  }
			
 
				+
			
 
				+  .login-card {
			
 
				+    width: 900px;
			
 
				+    height: 600px;
			
 
				+    border-radius: 8px;
			
 
				+    overflow: hidden;
			
 
				+    backdrop-filter: blur(6px);
			
 
				+    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
			
 
				+
			
 
				+    display: grid;
			
 
				+    grid-template-columns: 1fr 1fr;
			
 
				+  }
			
 
				+
			
 
				+  .login-card-left {
			
 
				+    background: rgba(255, 255, 255, 0.45);
			
 
				+  }
			
 
				+  .login-card-right {
			
 
				+    // background: #EFF6FA;
			
 
				+  }
			
 
				+
			
 
				+  .login-form-box {
			
 
				+    height: 560px;
			
 
				+    display: grid;
			
 
				+    place-items: center;
			
 
				+
			
 
				+    .login-form {
			
 
				+      min-width: 280px;
			
 
				+      .login-text {
			
 
				+        font-weight: 700;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .login-subtitle {
			
 
				+      font-size: 0.9em;
			
 
				+      color: #666;
			
 
				+      margin-bottom: 24px;
			
 
				+      letter-spacing: 2px;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .login-effect-box {
			
 
				+    height: 100%;
			
 
				+    display: grid;
			
 
				+    place-items: center;
			
 
				+
			
 
				+    .login-effect {
			
 
				+      width: 180px;
			
 
				+      height: 180px;
			
 
				+      position: relative;
			
 
				+    }
			
 
				+
			
 
				+    .login-effect-arc {
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+      border-radius: 50%;
			
 
				+      background-color: #fa8c16;
			
 
				+
			
 
				+      &::after {
			
 
				+        content: '';
			
 
				+        width: 200%;
			
 
				+        height: 100%;
			
 
				+        top: 50%;
			
 
				+        left: -50%;
			
 
				+        position: absolute;
			
 
				+        z-index: 10;
			
 
				+        background-color: rgba(255, 255, 255, 0.001);
			
 
				+        backdrop-filter: blur(16px);
			
 
				+        border-top: 1px solid rgba(255, 255, 255, 0.2);
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .login-copyright {
			
 
				+    font-size: 12px;
			
 
				+    color: #666;
			
 
				+    line-height: 40px;
			
 
				+    padding-left: 20px;
			
 
				+    box-sizing: border-box;
			
 
				+  }
			
 
				+}
			
--- a/src/pages/menu/index.jsx
+++ b/src/pages/menu/index.jsx
@@ -0,0 +1,6 @@
 
				+import React from 'react'
			
 
				+export default (props) => {
			
 
				+return (
			
 
				+<div>11111</div>
			
 
				+)
			
 
				+}
			
--- a/src/pages/tenant/Edit.jsx
+++ b/src/pages/tenant/Edit.jsx
@@ -0,0 +1,120 @@
 
				+import React, { useEffect, useState } from "react";
			
 
				+import { postFxTenant, putFxTenant, getFxTenantId } from "@/services/fxtenant";
			
 
				+import { useNavigate, useSearchParams } from "react-router-dom";
			
 
				+import {
			
 
				+  ProForm,
			
 
				+  ProFormText,
			
 
				+  ProFormDateRangePicker,
			
 
				+  ProFormSelect,
			
 
				+} from "@ant-design/pro-components";
			
 
				+import { Card, Form, Row, Col, Button, DatePicker, Select } from "antd";
			
 
				+import Page from "@/components/Page";
			
 
				+import { formItemLayout, tailFormItemLayout } from "@/utils/form";
			
 
				+import moment from "moment";
			
 
				+
			
 
				+const dateFormat = "YYYY-MM-DD";
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const formRef = React.useRef();
			
 
				+  const navigate = useNavigate();
			
 
				+  const [searchParams] = useSearchParams();
			
 
				+  const id = searchParams.get("id");
			
 
				+  useEffect(() => {
			
 
				+    formRef.current?.resetFields();
			
 
				+    if (id) {
			
 
				+      getFxTenantId(id).then((res) => {
			
 
				+        formRef.current?.setFieldsValue({
			
 
				+          ...res,
			
 
				+          time: [
			
 
				+            moment(res.startTime, dateFormat),
			
 
				+            moment(res.endTime, dateFormat),
			
 
				+          ],
			
 
				+
			
 
				+        });
			
 
				+      });
			
 
				+    }
			
 
				+  }, []);
			
 
				+
			
 
				+  const onFinish = (x) => {
			
 
				+    formRef.current?.validateFieldsReturnFormatValue?.().then((values) => {
			
 
				+      console.log("values", values);
			
 
				+      const data = {
			
 
				+        ...values,
			
 
				+        startTime: values?.time[0],
			
 
				+        endTime: values?.time[1],
			
 
				+      };
			
 
				+      const tenantId = id;
			
 
				+      if (!tenantId) {
			
 
				+        postFxTenant(data).then((res) => {
			
 
				+          navigate(-1);
			
 
				+        });
			
 
				+      } else {
			
 
				+        putFxTenant(tenantId, { tenantId, ...data }).then((res) => {
			
 
				+          navigate(-1);
			
 
				+        });
			
 
				+      }
			
 
				+    });
			
 
				+  };
			
 
				+
			
 
				+  return (
			
 
				+    <Page>
			
 
				+      <Card>
			
 
				+        <ProForm
			
 
				+          formRef={formRef}
			
 
				+          onFinish={onFinish}
			
 
				+          layout="horizontal"
			
 
				+          {...formItemLayout}
			
 
				+          submitter={{
			
 
				+            render: (_, doms) => [
			
 
				+              <Row>
			
 
				+                <Col offset={8}>
			
 
				+                  <Button type="primary" htmlType="submit">
			
 
				+                    提交
			
 
				+                  </Button>
			
 
				+                </Col>
			
 
				+                <Col offset={1}>
			
 
				+                  <Button onClick={() => navigate(-1)}>返回</Button>
			
 
				+                </Col>
			
 
				+              </Row>,
			
 
				+            ],
			
 
				+          }}
			
 
				+        >
			
 
				+          <ProFormText
			
 
				+            name="tenantName"
			
 
				+            label="租户名称"
			
 
				+            placeholder="请输入租户名称"
			
 
				+            rules={[{ required: true, message: "租户名称不能为空" }]}
			
 
				+          />
			
 
				+          <Form.Item
			
 
				+            name={["time"]}
			
 
				+            label="合同生效时间"
			
 
				+            rules={[{ required: true, message: "合同生效时间不能为空" }]}
			
 
				+          >
			
 
				+            <DatePicker.RangePicker />
			
 
				+          </Form.Item>
			
 
				+
			
 
				+          <ProFormText
			
 
				+            name="manager"
			
 
				+            label="管理员名称"
			
 
				+            placeholder="请输入管理员名称"
			
 
				+          />
			
 
				+          <ProFormText
			
 
				+            name="phone"
			
 
				+            label="手机号(租户账号)"
			
 
				+            placeholder="请输入手机号"
			
 
				+            rules={[{ required: true, message: "手机号不能为空" }]}
			
 
				+          />
			
 
				+          <ProFormSelect
			
 
				+            label="状态"
			
 
				+            name="status"
			
 
				+            options={[
			
 
				+              { label: '未激活', value: 0 },
			
 
				+              { label: '已激活', value: 1 },
			
 
				+              { label: '停用', value: 2 }
			
 
				+            ]}
			
 
				+          />
			
 
				+        </ProForm>
			
 
				+      </Card>
			
 
				+    </Page>
			
 
				+  );
			
 
				+};
			
--- a/src/pages/tenant/index.jsx
+++ b/src/pages/tenant/index.jsx
@@ -0,0 +1,109 @@
 
				+import List from "@/components/Page/List";
			
 
				+import React from "react";
			
 
				+
			
 
				+import { getFxTenant, deleteFxTenant } from "@/services/fxtenant";
			
 
				+
			
 
				+import { useNavigate } from "react-router-dom";
			
 
				+import { Button, Typography } from "antd";
			
 
				+import moment from "moment";
			
 
				+export default (props) => {
			
 
				+  const { Text } = Typography;
			
 
				+  const navigate = useNavigate();
			
 
				+  const actionRef = React.useRef();
			
 
				+
			
 
				+  const columns = [
			
 
				+    {
			
 
				+      title: "时间",
			
 
				+      dataIndex: "time",
			
 
				+      valueType: "dateRange",
			
 
				+      hideInTable: true,
			
 
				+      search: {
			
 
				+        transform: (value) => {
			
 
				+          return {
			
 
				+            startTime: value[0],
			
 
				+            endTime: value[1],
			
 
				+          };
			
 
				+        },
			
 
				+      },
			
 
				+    },
			
 
				+    {
			
 
				+      title: "租户名称",
			
 
				+      dataIndex: "tenantName",
			
 
				+    },
			
 
				+    {
			
 
				+      title: "开始时间",
			
 
				+      dataIndex: "startTime",
			
 
				+      render: (t) => moment(t).format("YYYY-MM-DD"),
			
 
				+      search: false,
			
 
				+    },
			
 
				+    {
			
 
				+      title: "结束时间",
			
 
				+      dataIndex: "endTime",
			
 
				+      render: (t) => moment(t).format("YYYY-MM-DD"),
			
 
				+      search: false,
			
 
				+    },
			
 
				+    {
			
 
				+      title: "管理人名称",
			
 
				+      dataIndex: "manager",
			
 
				+      search: false,
			
 
				+    },
			
 
				+    {
			
 
				+      title: "手机号",
			
 
				+      dataIndex: "phone",
			
 
				+    },
			
 
				+    {
			
 
				+      title: "登录地址",
			
 
				+      dataIndex: "tenantId",
			
 
				+      render: (_, record) => {
			
 
				+        const url = `${import.meta.env.VITE_LOGIN_URL}#/${record.tenantId}/login`
			
 
				+        console.log(url)
			
 
				+        return <Text copyable={{ text: url }} ellipsis={true}>{url}</Text>;
			
 
				+      },
			
 
				+      search: false,
			
 
				+    },
			
 
				+    {
			
 
				+      title: "状态",
			
 
				+      dataIndex: "status",
			
 
				+      valueType: "select",
			
 
				+      render: (_, record) =>
			
 
				+        record.status == 0 ? "未激活" : record.status == 1 ? "已激活" : "停用",
			
 
				+      valueEnum: {
			
 
				+        0: "未激活",
			
 
				+        1: "已激活",
			
 
				+        2: "停用",
			
 
				+      },
			
 
				+    }
			
 
				+  ];
			
 
				+
			
 
				+  const DeleteFxUser = (record) => {
			
 
				+    deleteFxTenant(record.tenantId).then((res) => {
			
 
				+      actionRef.current.reload();
			
 
				+    });
			
 
				+  };
			
 
				+
			
 
				+
			
 
				+  return (
			
 
				+    <List
			
 
				+      rowKey="tenantId"
			
 
				+      actionRef={actionRef}
			
 
				+      request={getFxTenant}
			
 
				+      onEdit={(record) => navigate(`/tenant/edit?id=${record.tenantId}`)}
			
 
				+      onDelete={DeleteFxUser}
			
 
				+      toolBarRender={() => [
			
 
				+        <Button
			
 
				+          key="1"
			
 
				+          type="primary"
			
 
				+          onClick={() => {
			
 
				+            navigate("edit");
			
 
				+          }}
			
 
				+        >
			
 
				+          新增
			
 
				+        </Button>,
			
 
				+      ]}
			
 
				+      columnOptionRender={(_, record) => [
			
 
				+        <a href={`${import.meta.env.VITE_LOGIN_URL}#/${record.tenantId}/login`} target='_blank'>登录</a>
			
 
				+      ]}
			
 
				+      columns={columns}
			
 
				+    />
			
 
				+  );
			
 
				+};
			
--- a/src/routes/Router.jsx
+++ b/src/routes/Router.jsx
@@ -0,0 +1,18 @@
 
				+import React from "react";
			
 
				+import { createHashRouter, RouterProvider } from "react-router-dom";
			
 
				+import { useModel } from "@/store";
			
 
				+import { defaultRoutes, mergeAuthRoutes } from "./routes";
			
 
				+
			
 
				+export default (props) => {
			
 
				+  const { routes } = useModel("user");
			
 
				+  console.log(routes)
			
 
				+  const router = React.useMemo(() => {
			
 
				+    if (!routes || routes.length < 1) {
			
 
				+      return createHashRouter(defaultRoutes);
			
 
				+    } else {
			
 
				+      return createHashRouter(routes);
			
 
				+    }
			
 
				+  }, [routes]);
			
 
				+
			
 
				+  return <RouterProvider router={router} />;
			
 
				+};
			
--- a/src/routes/hooks/usePrompt.jsx
+++ b/src/routes/hooks/usePrompt.jsx
@@ -0,0 +1,37 @@
 
				+import React from "react";
			
 
				+import { UNSAFE_NavigationContext } from "react-router-dom";
			
 
				+
			
 
				+// 估计在 react-router v6 的后续某个版本 usePrompt 会回归
			
 
				+// v6.7 已经添加 UNSAFE_usePrompt
			
 
				+export function usePrompt(message, when = true) {
			
 
				+  let blocker = React.useCallback(
			
 
				+    tx => {
			
 
				+      if (window.confirm(message)) tx.retry();
			
 
				+    },
			
 
				+    [message]
			
 
				+  );
			
 
				+
			
 
				+  useBlocker(blocker, when);
			
 
				+}
			
 
				+
			
 
				+function useBlocker(blocker, when = true) {
			
 
				+  let { navigator } = React.useContext(UNSAFE_NavigationContext);
			
 
				+
			
 
				+  React.useEffect(() => {
			
 
				+    if (!when) return;
			
 
				+
			
 
				+    let unblock = navigator.block((tx) => {
			
 
				+      let autoUnblockingTx = {
			
 
				+        ...tx,
			
 
				+        retry() {
			
 
				+          unblock();
			
 
				+          tx.retry();
			
 
				+        }
			
 
				+      };
			
 
				+
			
 
				+      blocker(autoUnblockingTx);
			
 
				+    });
			
 
				+
			
 
				+    return unblock;
			
 
				+  }, [navigator, blocker, when]);
			
 
				+}
			
--- a/src/routes/hooks/useRoute.jsx
+++ b/src/routes/hooks/useRoute.jsx
@@ -0,0 +1,17 @@
 
				+import { useLocation } from "react-router-dom";
			
 
				+import { routes } from '../routes';
			
 
				+import { flatten } from "../utils";
			
 
				+
			
 
				+let routeMap = null;
			
 
				+
			
 
				+// 获取当前的 route 信息
			
 
				+export default function useRoute() {
			
 
				+  if (!routeMap) {
			
 
				+    routeMap = flatten(routes);
			
 
				+  }
			
 
				+
			
 
				+  const location = useLocation();
			
 
				+  return routeMap[location.pathname];
			
 
				+  // const currentRoute = routeArr.filter(x => x.path === location.pathname)[0];
			
 
				+  // return currentRoute;
			
 
				+}
			
--- a/src/routes/menus.jsx
+++ b/src/routes/menus.jsx
@@ -0,0 +1,44 @@
 
				+import { Link } from 'react-router-dom';
			
 
				+import { getPath } from './utils';
			
 
				+
			
 
				+// 菜单是否显示
			
 
				+// 没有 meta 或者 meta.title 为空, 或者 meta.hideInMenu = true 的 都不显示
			
 
				+const isShow = item => item.meta && item.meta.title && !item.meta.hideInMenu;
			
 
				+
			
 
				+const hasChildren = (list) => {
			
 
				+  if (!list || list.length < 1) return false;
			
 
				+
			
 
				+  // 如果子元素全部都是不显示的, 说明子菜单不需要显示
			
 
				+  return list.filter(it => !isShow(it)).length !== list.length;
			
 
				+}
			
 
				+
			
 
				+export const getMenuItems = (routes = [], fullPath = '/') => {
			
 
				+  return routes.map(route => {
			
 
				+    const path = getPath(fullPath, route.path);
			
 
				+
			
 
				+    //
			
 
				+    if (!isShow(route)) return false;
			
 
				+    
			
 
				+    const children = hasChildren(route.children) ? getMenuItems(route.children, path) : false;
			
 
				+
			
 
				+    const { target, title, icon } = route.meta || {}
			
 
				+
			
 
				+    // 坑爹 react-router v6 不支持 hash 路由的 target 跳转
			
 
				+    const label = target === '_blank' ?
			
 
				+      <a href={`${window.location.pathname}#${path}`} target={target}>{title}</a>
			
 
				+      : (
			
 
				+        path.indexOf('http') === 0  ? <a href={path} target="_blank">{title}</a>
			
 
				+        : <Link to={path} target={target}>{title}</Link>
			
 
				+      );
			
 
				+
			
 
				+    return Object.assign(
			
 
				+      {
			
 
				+        key: path,
			
 
				+        label,
			
 
				+        title,
			
 
				+        icon,
			
 
				+      },
			
 
				+      children && { children },
			
 
				+    )
			
 
				+  }).filter(Boolean);
			
 
				+}
			
--- a/src/routes/permissions.js
+++ b/src/routes/permissions.js
@@ -0,0 +1,13 @@
 
				+
			
 
				+export const getAuthedRoutes = (routes, permissions) => {
			
 
				+  if (!routes || routes.length < 1) return [];
			
 
				+
			
 
				+  return routes.map(route => {
			
 
				+    if (route.meta && route.meta.permission && permissions.indexOf(route.meta.permission) < 0) return false;
			
 
				+
			
 
				+    if (route.children) {
			
 
				+      route.children = getAuthedRoutes(route.children, permissions);
			
 
				+    }
			
 
				+    return route;
			
 
				+  }).filter(Boolean);
			
 
				+}
			
--- a/src/routes/routes.jsx
+++ b/src/routes/routes.jsx