yunzhi
/
crm_pc
Следить 2
В избранное 0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
Просмотр исходного кода

first commit

fangmingyue 2 лет назад
Сommit
2507557cb4
100 измененных файлов: 11691 добавлений и 0 удалений
Разделённый вид Показать статистику Diff
  1. 24
    0
      .gitignore
  2. 18
    0
      index.html
  3. 8
    0
      jsconfig.json
  4. 6551
    0
      package-lock.json
  5. 37
    0
      package.json
  6. 7
    0
      public/config.js
  7. Двоичные данные
      public/logo.png
  8. 110
    0
      public/particles/particles.json
  9. 9
    0
      public/particles/particles.min.js
  10. 1
    0
      public/qrcode.min.js
  11. 1
    0
      public/vite.svg
  12. 42
    0
      src/App.css
  13. 10
    0
      src/App.jsx
  14. 1
    0
      src/assets/react.svg
  15. 15
    0
      src/components/EditableTag/Tag.jsx
  16. 21
    0
      src/components/EditableTag/index.jsx
  17. 27
    0
      src/components/EditableTag/style.less
  18. 4
    0
      src/components/Money/float.js
  19. 30
    0
      src/components/Money/index.jsx
  20. 83
    0
      src/components/Page/Curd.jsx
  21. 93
    0
      src/components/Page/Edit.jsx
  22. 89
    0
      src/components/Page/List.jsx
  23. 24
    0
      src/components/Page/index.jsx
  24. 10
    0
      src/components/Upload/Upload.jsx
  25. 60
    0
      src/components/Upload/UploadImage.jsx
  26. 115
    0
      src/components/Upload/UploadImageList.jsx
  27. 94
    0
      src/components/Upload/UploadVideo.jsx
  28. 11
    0
      src/components/Upload/index.jsx
  29. 32
    0
      src/components/Upload/request.js
  30. 7
    0
      src/components/Upload/style.less
  31. 87
    0
      src/components/Wangeditor/index.jsx
  32. 81
    0
      src/components/chart/index.jsx
  33. 71
    0
      src/index.less
  34. 32
    0
      src/layouts/AuthLayout/Main.jsx
  35. 3
    0
      src/layouts/AuthLayout/RedirectLogin.jsx
  36. 72
    0
      src/layouts/AuthLayout/components/Background.jsx
  37. 31
    0
      src/layouts/AuthLayout/components/Container.jsx
  38. 15
    0
      src/layouts/AuthLayout/components/Footer.jsx
  39. 36
    0
      src/layouts/AuthLayout/components/Header/Exit.jsx
  40. 24
    0
      src/layouts/AuthLayout/components/Header/Title.jsx
  41. 122
    0
      src/layouts/AuthLayout/components/Header/User.jsx
  42. 28
    0
      src/layouts/AuthLayout/components/Header/index.jsx
  43. 19
    0
      src/layouts/AuthLayout/components/HtmlTitle.jsx
  44. 17
    0
      src/layouts/AuthLayout/components/Logo.jsx
  45. 31
    0
      src/layouts/AuthLayout/components/Menus.jsx
  46. 21
    0
      src/layouts/AuthLayout/components/PageTransition/index.jsx
  47. 21
    0
      src/layouts/AuthLayout/components/PageTransition/style.less
  48. 21
    0
      src/layouts/AuthLayout/components/SiderBar.jsx
  49. 33
    0
      src/layouts/AuthLayout/index.jsx
  50. 80
    0
      src/layouts/AuthLayout/style.less
  51. 30
    0
      src/layouts/AuthLayout/withLogin.jsx
  52. 16
    0
      src/main.jsx
  53. 29
    0
      src/pages/404/index.jsx
  54. 130
    0
      src/pages/custom/Account.jsx
  55. 106
    0
      src/pages/custom/Edit.jsx
  56. 114
    0
      src/pages/custom/index.jsx
  57. 11
    0
      src/pages/login/Effect.jsx
  58. 187
    0
      src/pages/login/LoginForm.bak.jsx
  59. 51
    0
      src/pages/login/LoginForm.jsx
  60. 67
    0
      src/pages/login/LoginQrcode.bak.jsx
  61. 45
    0
      src/pages/login/LoginUse.jsx
  62. 159
    0
      src/pages/login/components/LoginQrCode.jsx
  63. 28
    0
      src/pages/login/components/QrCode.jsx
  64. 29
    0
      src/pages/login/components/SuccessIcon.jsx
  65. 41
    0
      src/pages/login/components/qrcode.module.less
  66. 34
    0
      src/pages/login/foo.js
  67. 79
    0
      src/pages/login/index.jsx
  68. 77
    0
      src/pages/login/qrcode.less
  69. 118
    0
      src/pages/login/style.less
  70. 151
    0
      src/pages/project/Edit.jsx
  71. 133
    0
      src/pages/project/index.jsx
  72. 87
    0
      src/pages/role/components/Empower.jsx
  73. 27
    0
      src/pages/role/index.jsx
  74. 169
    0
      src/pages/role/list.jsx
  75. 163
    0
      src/pages/role/menus.jsx
  76. 19
    0
      src/pages/role/style.less
  77. 117
    0
      src/pages/sample/curd.jsx
  78. 308
    0
      src/pages/sample/form/index.jsx
  79. 96
    0
      src/pages/sample/table/index.jsx
  80. 62
    0
      src/pages/user/Edit.jsx
  81. 80
    0
      src/pages/user/index.jsx
  82. 18
    0
      src/routes/Router.jsx
  83. 37
    0
      src/routes/hooks/usePrompt.jsx
  84. 17
    0
      src/routes/hooks/useRoute.jsx
  85. 44
    0
      src/routes/menus.jsx
  86. 14
    0
      src/routes/permissions.js
  87. 135
    0
      src/routes/routes.jsx
  88. 22
    0
      src/routes/utils.js
  89. 25
    0
      src/services/login.js
  90. 26
    0
      src/services/project.js
  91. 26
    0
      src/services/taCustom.js
  92. 14
    0
      src/store/index.js
  93. 20
    0
      src/store/models/system.js
  94. 40
    0
      src/store/models/user.js
  95. 11
    0
      src/theme.less
  96. 64
    0
      src/utils/array.js
  97. 8
    0
      src/utils/css.js
  98. 5
    0
      src/utils/float.js
  99. 23
    0
      src/utils/form.js
  100. 0
    0
      src/utils/hooks/useBool.js

+ 24
- 0
.gitignore Просмотреть файл 

@@ -0,0 +1,24 @@
1 
+# Logs
2 
+logs
3 
+*.log
4 
+npm-debug.log*
5 
+yarn-debug.log*
6 
+yarn-error.log*
7 
+pnpm-debug.log*
8 
+lerna-debug.log*
9 
+
10 
+node_modules
11 
+dist
12 
+dist-ssr
13 
+*.local
14 
+
15 
+# Editor directories and files
16 
+.vscode/*
17 
+!.vscode/extensions.json
18 
+.idea
19 
+.DS_Store
20 
+*.suo
21 
+*.ntvs*
22 
+*.njsproj
23 
+*.sln
24 
+*.sw?

+ 18
- 0
index.html Просмотреть файл 

@@ -0,0 +1,18 @@
1 
+<!DOCTYPE html>
2 
+<html lang="en">
3 
+
4 
+<head>
5 
+  <meta charset="UTF-8" />
6 
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
7 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8 
+  <script src="./config.js"></script>
9 
+  <script src="./qrcode.min.js"></script>
10 
+  <title>CRM系统</title>
11 
+</head>
12 
+
13 
+<body>
14 
+  <div id="root"></div>
15 
+  <script type="module" src="/src/main.jsx"></script>
16 
+</body>
17 
+
18 
+</html>

+ 8
- 0
jsconfig.json Просмотреть файл 

@@ -0,0 +1,8 @@
1 
+{
2 
+  "compilerOptions": {
3 
+    "baseUrl": ".",
4 
+    "paths": {
5 
+      "@/*": ["./src/*"]
6 
+    }
7 
+  }
8 
+}

+ 6551
- 0
package-lock.json
Разница между файлами не показана из-за своего большого размера
Просмотреть файл


+ 37
- 0
package.json Просмотреть файл 

@@ -0,0 +1,37 @@
1 
+{
2 
+  "name": "vite-project",
3 
+  "private": true,
4 
+  "version": "0.0.0",
5 
+  "type": "module",
6 
+  "scripts": {
7 
+    "dev": "vite",
8 
+    "build": "vite build",
9 
+    "preview": "vite preview"
10 
+  },
11 
+  "dependencies": {
12 
+    "@ant-design/icons": "^4.7.0",
13 
+    "@ant-design/pro-components": "^2.3.13",
14 
+    "@wangeditor/editor": "^5.1.23",
15 
+    "@wangeditor/editor-for-react": "^1.0.6",
16 
+    "@zjxpcyc/react-tiny-store": "^2.0.1",
17 
+    "antd": "^4.23.4",
18 
+    "axios": "^1.2.0",
19 
+    "classnames": "^2.3.2",
20 
+    "echarts": "^5.4.0",
21 
+    "md5": "^2.3.0",
22 
+    "moment": "^2.29.4",
23 
+    "react": "18.2.0",
24 
+    "react-dom": "18.2.0",
25 
+    "react-helmet": "^6.1.0",
26 
+    "react-router-dom": "^6.4.2",
27 
+    "react-transition-group": "^4.4.5"
28 
+  },
29 
+  "devDependencies": {
30 
+    "@types/react": "18.0.27",
31 
+    "@types/react-dom": "18.0.10",
32 
+    "@vitejs/plugin-react": "^2.0.0",
33 
+    "less": "^4.1.3",
34 
+    "vite": "^3.0.0",
35 
+    "vite-plugin-imp": "^2.2.0"
36 
+  }
37 
+}

+ 7
- 0
public/config.js Просмотреть файл 

@@ -0,0 +1,7 @@
1 
+
2 
+var SERVER_BASE = '';
3 
+
4 
+// 获取真实的上传文件地址
5 
+function getRealPath(path) {
6 
+  return path;
7 
+}

Двоичные данные
public/logo.png Просмотреть файл


+ 110
- 0
public/particles/particles.json Просмотреть файл 

@@ -0,0 +1,110 @@
1 
+{
2 
+  "particles": {
3 
+    "number": {
4 
+      "value": 80,
5 
+      "density": {
6 
+        "enable": true,
7 
+        "value_area": 800
8 
+      }
9 
+    },
10 
+    "color": {
11 
+      "value": "#1890ff"
12 
+    },
13 
+    "shape": {
14 
+      "type": "circle",
15 
+      "stroke": {
16 
+        "width": 0,
17 
+        "color": "#000000"
18 
+      },
19 
+      "polygon": {
20 
+        "nb_sides": 5
21 
+      },
22 
+      "image": {
23 
+        "src": "img/github.svg",
24 
+        "width": 100,
25 
+        "height": 100
26 
+      }
27 
+    },
28 
+    "opacity": {
29 
+      "value": 0.5,
30 
+      "random": false,
31 
+      "anim": {
32 
+        "enable": false,
33 
+        "speed": 1,
34 
+        "opacity_min": 0.1,
35 
+        "sync": false
36 
+      }
37 
+    },
38 
+    "size": {
39 
+      "value": 3,
40 
+      "random": true,
41 
+      "anim": {
42 
+        "enable": false,
43 
+        "speed": 40,
44 
+        "size_min": 0.1,
45 
+        "sync": false
46 
+      }
47 
+    },
48 
+    "line_linked": {
49 
+      "enable": true,
50 
+      "distance": 150,
51 
+      "color": "#1890ff",
52 
+      "opacity": 0.4,
53 
+      "width": 1
54 
+    },
55 
+    "move": {
56 
+      "enable": true,
57 
+      "speed": 2,
58 
+      "direction": "none",
59 
+      "random": false,
60 
+      "straight": false,
61 
+      "out_mode": "out",
62 
+      "bounce": false,
63 
+      "attract": {
64 
+        "enable": false,
65 
+        "rotateX": 600,
66 
+        "rotateY": 1200
67 
+      }
68 
+    }
69 
+  },
70 
+  "interactivity": {
71 
+    "detect_on": "canvas",
72 
+    "events": {
73 
+      "onhover": {
74 
+        "enable": false,
75 
+        "mode": "repulse"
76 
+      },
77 
+      "onclick": {
78 
+        "enable": false,
79 
+        "mode": "push"
80 
+      },
81 
+      "resize": true
82 
+    },
83 
+    "modes": {
84 
+      "grab": {
85 
+        "distance": 400,
86 
+        "line_linked": {
87 
+          "opacity": 1
88 
+        }
89 
+      },
90 
+      "bubble": {
91 
+        "distance": 400,
92 
+        "size": 40,
93 
+        "duration": 2,
94 
+        "opacity": 8,
95 
+        "speed": 3
96 
+      },
97 
+      "repulse": {
98 
+        "distance": 200,
99 
+        "duration": 0.4
100 
+      },
101 
+      "push": {
102 
+        "particles_nb": 4
103 
+      },
104 
+      "remove": {
105 
+        "particles_nb": 2
106 
+      }
107 
+    }
108 
+  },
109 
+  "retina_detect": true
110 
+}

+ 9
- 0
public/particles/particles.min.js
Разница между файлами не показана из-за своего большого размера
Просмотреть файл


+ 1
- 0
public/qrcode.min.js
Разница между файлами не показана из-за своего большого размера
Просмотреть файл


+ 1
- 0
public/vite.svg Просмотреть файл 

@@ -0,0 +1 @@
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>

+ 42
- 0
src/App.css Просмотреть файл 

@@ -0,0 +1,42 @@
1 
+#root {
2 
+  max-width: 1280px;
3 
+  margin: 0 auto;
4 
+  padding: 2rem;
5 
+  text-align: center;
6 
+}
7 
+
8 
+.logo {
9 
+  height: 6em;
10 
+  padding: 1.5em;
11 
+  will-change: filter;
12 
+}
13 
+.logo:hover {
14 
+  filter: drop-shadow(0 0 2em #646cffaa);
15 
+}
16 
+.logo.react:hover {
17 
+  filter: drop-shadow(0 0 2em #61dafbaa);
18 
+}
19 
+
20 
+
21 
+@keyframes logo-spin {
22 
+  from {
23 
+    transform: rotate(0deg);
24 
+  }
25 
+  to {
26 
+    transform: rotate(360deg);
27 
+  }
28 
+}
29 
+
30 
+@media (prefers-reduced-motion: no-preference) {
31 
+  a:nth-of-type(2) .logo {
32 
+    animation: logo-spin infinite 20s linear;
33 
+  }
34 
+}
35 
+
36 
+.card {
37 
+  padding: 2em;
38 
+}
39 
+
40 
+.read-the-docs {
41 
+  color: #888;
42 
+}

+ 10
- 0
src/App.jsx Просмотреть файл 

@@ -0,0 +1,10 @@
1 
+import { useState } from 'react'
2 
+
3 
+
4 
+function App() {
5 
+  const [count, setCount] = useState(0)
6 
+
7 
+  return null;
8 
+}
9 
+
10 
+export default App

+ 1
- 0
src/assets/react.svg Просмотреть файл 

@@ -0,0 +1 @@
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>

+ 15
- 0
src/components/EditableTag/Tag.jsx Просмотреть файл 

@@ -0,0 +1,15 @@
1 
+import React from 'react';
2 
+import { Button } from 'antd';
3 
+import { CloseOutlined } from '@ant-design/icons';
4 
+import './style.less'
5 
+
6 
+export default (props) => {
7 
+  const { size, type, onDelete, children } = props;
8 
+
9 
+  return (
10 
+    <div className='tag-btn-group'>
11 
+      <Button size={size} type={type}>{children}</Button>
12 
+      <Button size={size} type="primary" icon={<CloseOutlined />} onClick={onDelete} />
13 
+    </div>
14 
+  )
15 
+}

+ 21
- 0
src/components/EditableTag/index.jsx Просмотреть файл 

@@ -0,0 +1,21 @@
1 
+import React from 'react';
2 
+import { Button } from 'antd';
3 
+import Tag from './Tag';
4 
+import './style.less'
5 
+
6 
+export default (props) => {
7 
+  const { size, type, list = [], onDelete, keyFuc, labelFunc } = props;
8 
+
9 
+  return (
10 
+    <div className='editable-tag-box'>
11 
+      {
12 
+        list.map((item, index) => {
13 
+          const key = keyFuc(item, index);
14 
+          const label = labelFunc(item, index);
15 
+
16 
+          return <Tag key={key} size={size} type={type} onDelete={() => onDelete(item)}>{label}</Tag>
17 
+        })
18 
+      }
19 
+    </div>
20 
+  )
21 
+}

+ 27
- 0
src/components/EditableTag/style.less Просмотреть файл 

@@ -0,0 +1,27 @@
1 
+.tag-btn-group {
2 
+  .ant-btn {
3 
+    vertical-align: middle;
4 
+  }
5 
+
6 
+  .ant-btn:first-child {
7 
+    border-right: none;
8 
+  }
9 
+
10 
+  .ant-btn:last-child {
11 
+    // border-left: none;
12 
+    border-top-left-radius: 0;
13 
+    border-bottom-left-radius: 0;
14 
+    margin-left: -1px;
15 
+  }
16 
+}
17 
+
18 
+.editable-tag-box {
19 
+  display: flex;
20 
+  flex-wrap: wrap;
21 
+
22 
+  .tag-btn-group {
23 
+    flex: none;
24 
+    box-sizing: border-box;
25 
+    padding: 1em;
26 
+  }
27 
+}

+ 4
- 0
src/components/Money/float.js Просмотреть файл 

@@ -0,0 +1,4 @@
1 
+const epsilonN = N => num => Math.round( num * N + Number.EPSILON ) / N;
2 
+const epsilon2 = epsilonN(1e2);
3 
+
4 
+export default epsilon2;

+ 30
- 0
src/components/Money/index.jsx Просмотреть файл 

@@ -0,0 +1,30 @@
1 
+import { InputNumber } from "antd"
2 
+import { useEffect, useState } from "react"
3 
+import epsilon2 from './float'
4 
+
5 
+export default (props) => {
6 
+
7 
+  const { value, onChange, ...leftProps } = props
8 
+
9 
+  const [money, setMoney] = useState(0)
10 
+
11 
+  useEffect(() => {
12 
+    setMoney(epsilon2(value / 100))
13 
+  }, [value])
14 
+
15 
+  const handleChange = (val) => {
16 
+    onChange(epsilon2(val * 100))
17 
+  }
18 
+
19 
+  return (
20 
+    <InputNumber
21 
+      min='0'
22 
+      {...leftProps}
23 
+      value={money}
24 
+      onChange={handleChange}
25 
+      precision={2}
26 
+      formatter={value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
27 
+      parser={value => value.replace(/\￥\s?|(,*)/g, '')}
28 
+    />
29 
+  )
30 
+}

+ 83
- 0
src/components/Page/Curd.jsx Просмотреть файл 

@@ -0,0 +1,83 @@
1 
+import React from 'react';
2 
+import { DrawerForm } from '@ant-design/pro-components';
3 
+import { Form } from 'antd';
4 
+import List from './List';
5 
+
6 
+const drawerProps = {
7 
+  destroyOnClose: true
8 
+}
9 
+export default (props) => {
10 
+  const { rowKey, columns, request, formProps, renderFormItems, ...leftProps } = props;
11 
+
12 
+  const [form] = Form.useForm();
13 
+  const listRef = React.useRef();
14 
+  const rowRef = React.useRef();
15 
+  const [open, setOpen] = React.useState(false);
16 
+
17 
+  const onAdd = () => {
18 
+    rowRef.current = undefined;
19 
+    form.resetFields();
20 
+    setOpen(true);
21 
+  }
22 
+
23 
+  const onEdit = (row) => {
24 
+    rowRef.current = row;
25 
+    form.setFieldsValue(row);
26 
+    setOpen(true);
27 
+  }
28 
+
29 
+  const onDelete = (row) => {
30 
+    rowRef.current = row;
31 
+
32 
+    listRef.current.showLoading('正在操作, 请稍候...');
33 
+    request.del(row[rowKey]).then(() => {
34 
+      listRef.current.hideLoading();
35 
+      listRef.current.reload();
36 
+    }).catch(() => {
37 
+      listRef.current.hideLoading();
38 
+    });
39 
+  }
40 
+
41 
+  const onFinish = async (values) => {
42 
+    if (rowRef.current) {
43 
+      await request.update(rowRef.current[rowKey], {
44 
+        ...rowRef.current,
45 
+        ...values,
46 
+      });
47 
+    } else {
48 
+      await request.save(values);
49 
+    }
50 
+    listRef.current.reload();
51 
+
52 
+    return true;
53 
+  }
54 
+
55 
+  return (
56 
+    <>
57 
+      <List
58 
+        ref={listRef}
59 
+        rowKey={rowKey}
60 
+        columns={columns}
61 
+        request={request.list}
62 
+        onAdd={onAdd}
63 
+        onDelete={onDelete}
64 
+        onEdit={onEdit}
65 
+        {...leftProps}
66 
+      />
67 
+
68 
+      <DrawerForm
69 
+        submitTimeout={3000}
70 
+        open={open}
71 
+        form={form}
72 
+        drawerProps={drawerProps}
73 
+        onOpenChange={setOpen}
74 
+        onFinish={onFinish}
75 
+        {...formProps}
76 
+      >
77 
+        {
78 
+          renderFormItems && renderFormItems()
79 
+        }
80 
+      </DrawerForm>
81 
+    </>
82 
+  )
83 
+}

+ 93
- 0
src/components/Page/Edit.jsx Просмотреть файл 

@@ -0,0 +1,93 @@
1 
+import React from 'react';
2 
+import { Button, Card, Form } from 'antd';
3 
+import { useSearchParams, useNavigate } from "react-router-dom";
4 
+import useBool from '@/utils/hooks/useBool';
5 
+import Page from './index';
6 
+
7 
+const FormItem = Form.Item;
8 
+const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
9 
+
10 
+export default (props) => {
11 
+  /**
12 
+   * request 编辑或者新增接口
13 
+   * dataFunc 将 form 表单数据转换为接口需要格式, 一般情况下不需要这个操作
14 
+   * formDataFunc 将接口返回的值转换为 form 表单数据格式, 一般情况下不需要这个操作
15 
+   * width form 表单宽度, 默认 800px
16 
+   */
17 
+  const { request, dataFunc, formDataFunc, width = '800px', onFinish, ...leftProps } = props;
18 
+  const [loading, startLoading, stopLoading] = useBool();
19 
+  const [form] = Form.useForm();
20 
+  const navigate = useNavigate();
21 
+
22 
+  // 获取 id query 参数, 如果存在说明是编辑，而不是新增
23 
+  const [params] = useSearchParams();
24 
+  const id = params.get("id");
25 
+
26 
+  const navBack = React.useCallback(() => {
27 
+    const t = setTimeout(() => {
28 
+      navigate(-1);
29 
+      clearTimeout(t);
30 
+    }, 600);
31 
+  }, [navigate]);
32 
+
33 
+  // 表单提交
34 
+  const onSubmit = (values) => {
35 
+    startLoading();
36 
+    // 可能需要转换下格式
37 
+    const data = dataFunc ? dataFunc(id, values) : values;
38 
+    if (id) {
39 
+      request.update(id, data).then((res) => {
40 
+        stopLoading();
41 
+        if (onFinish) {
42 
+          onFinish(res);
43 
+        } else {
44 
+          navBack();
45 
+        }
46 
+      }).catch(stopLoading);
47 
+    } else {
48 
+      request.save(data)
49 
+        .then((res) => {
50 
+          stopLoading();
51 
+          if (onFinish) {
52 
+            onFinish(res);
53 
+          } else {
54 
+            navBack();
55 
+          }
56 
+        }).catch(stopLoading);
57 
+    }
58 
+  }
59 
+
60 
+  // 查询详情
61 
+  React.useEffect(() => {
62 
+    if (id && request) {
63 
+      request.get(id).then(res => {
64 
+        // 此处可能需要转换下数据格式
65 
+        const formData = formDataFunc ? formDataFunc(res) : res;
66 
+        form.setFieldsValue(formData);
67 
+      })
68 
+    }
69 
+  }, [request, id]);
70 
+
71 
+  return (
72 
+    <Page>
73 
+      <Card bodyStyle={{padding: '48px 24px'}}>
74 
+        <Form {...formItemLayout} form={form} onFinish={onSubmit} style={{width}} {...leftProps} >
75 
+          {props.children}
76 
+          <FormItem label=" " colon={false} style={{marginBottom: 0}}>
77 
+            <Button type="default" onClick={() => navigate(-1)}>
78 
+              取消
79 
+            </Button>
80 
+            <Button
81 
+              type="primary"
82 
+              htmlType="submit"
83 
+              style={{ marginLeft: '4em' }}
84 
+              loading={loading}
85 
+            >
86 
+              确认
87 
+            </Button>
88 
+          </FormItem>
89 
+        </Form>
90 
+      </Card>
91 
+    </Page>
92 
+  )
93 
+}

+ 89
- 0
src/components/Page/List.jsx Просмотреть файл 

@@ -0,0 +1,89 @@
1 
+import React from 'react';
2 
+import { Button, Popconfirm, message } from 'antd';
3 
+import { ProTable } from '@ant-design/pro-components';
4 
+import { queryTable } from '@/utils/request';
5 
+import Page from './index';
6 
+
7 
+export default React.forwardRef((props, ref) => {
8 
+  /**
9 
+   * request 与 ProTable 定义不同，这个只是普通的接口即可
10 
+   */
11 
+  const { request, rowKey, columns, onAdd, onDelete, onEdit, toolBarRender, columnOptionRender, ...leftProps } = props;
12 
+  const actionRef = React.useRef();
13 
+  const hideRef = React.useRef();
14 
+
15 
+  const api = React.useMemo(() => queryTable(request), [request]);
16 
+
17 
+  // 统一实现操作列
18 
+  const cols = React.useMemo(() => [
19 
+    ...columns,
20 
+    {
21 
+      title: '操作',
22 
+      valueType: 'option',
23 
+      key: 'option',
24 
+      ellipsis: true,
25 
+      render: (_, record) => [
26 
+        (
27 
+          onEdit &&
28 
+          <Button style={{ padding: 0 }} type="link" key={1} onClick={() => onEdit(record) }>
29 
+            编辑
30 
+          </Button>
31 
+        ),
32 
+        (
33 
+          onDelete &&
34 
+          <Popconfirm
35 
+            key={3}
36 
+            title="您是否确认删除 ?"
37 
+            onConfirm={() => onDelete(record)}
38 
+            okText="确定"
39 
+            cancelText="取消"
40 
+          >
41 
+            <Button style={{ padding: 0 }} type="link">
42 
+              删除
43 
+            </Button>
44 
+          </Popconfirm>
45 
+        ),
46 
+        ...(columnOptionRender ? columnOptionRender(_, record) : []),
47 
+      ].filter(Boolean),
48 
+    },
49 
+  ], [columns, onEdit, onDelete]);
50 
+
51 
+  React.useImperativeHandle(ref, () => {
52 
+    const showLoading = msg => (hideRef.current = message.loading(msg || '操作中, 请稍候...'));
53 
+    const hideLoading = () => hideRef.current && hideRef.current();
54 
+    const reload = () => actionRef.current?.reload && actionRef.current.reload();
55 
+
56 
+    return {
57 
+      showLoading,
58 
+      hideLoading,
59 
+      reload,
60 
+      actionRef: actionRef,
61 
+    }
62 
+  }, []);
63 
+
64 
+  return (
65 
+    <Page>
66 
+      <ProTable
67 
+        rowKey={rowKey}
68 
+        columns={cols}
69 
+        request={api}
70 
+        cardBordered
71 
+        actionRef={actionRef}
72 
+        toolBarRender={() => [
73 
+          (
74 
+            onAdd &&
75 
+            <Button
76 
+              key="1"
77 
+              type="primary"
78 
+              onClick={onAdd}
79 
+            >
80 
+              新增
81 
+            </Button>
82 
+          ),
83 
+          ...(toolBarRender ? toolBarRender() : []),
84 
+        ].filter(Boolean)}
85 
+        {...leftProps}
86 
+      />
87 
+    </Page>
88 
+  )
89 
+});

+ 24
- 0
src/components/Page/index.jsx Просмотреть файл 

@@ -0,0 +1,24 @@
1 
+import React from 'react';
2 
+import { Typography } from 'antd';
3 
+import useRoute from '@/routes/hooks/useRoute';
4 
+
5 
+const pageStyle = {
6 
+  margin: '0 24px 24px 24px',
7 
+  // margin: '24px',
8 
+  minHeight: 'calc(100% - 24px)',
9 
+}
10 
+const { Title } = Typography;
11 
+
12 
+export default (props) => {
13 
+  console.log(props);
14 
+  const { meta = {} } = useRoute() || {};
15 
+  const style = meta.noLayout ? { height: '100%' } : pageStyle;
16 
+  const title = props.title || meta.title;
17 
+
18 
+  return (
19 
+    <div style={style}>
20 
+      { title && !meta.noLayout && <Title level={3} style={{ paddingBottom: '12px', fontWeight: 400 }}>{ title }</Title> }
21 
+      {props.children}
22 
+    </div>
23 
+  )
24 
+}

+ 10
- 0
src/components/Upload/Upload.jsx Просмотреть файл 

@@ -0,0 +1,10 @@
1 
+import { Upload } from 'antd';
2 
+import { uploadFile } from './request'
3 
+
4 
+export default (props) => {
5 
+  return (
6 
+    <Upload {...props} customRequest={uploadFile} >
7 
+      {props.children}
8 
+    </Upload>
9 
+  )
10 
+}

+ 60
- 0
src/components/Upload/UploadImage.jsx Просмотреть файл 

@@ -0,0 +1,60 @@
1 
+import React, { useState } from 'react';
2 
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
3 
+import Upload from './Upload';
4 
+
5 
+function beforeUpload(file) {
6 
+  const isImage = file.type === 'image/jpeg' || file.type === 'image/png'||file.type==='image/gif';
7 
+  if (!isImage) {
8 
+    message.error('请上传 JPG , PNG或GIF 图片!');
9 
+  }
10 
+  const isLt10M = file.size / 1024 / 1024 < 10;
11 
+  if (!isLt10M) {
12 
+    message.error('图片大小必须小于 10MB!');
13 
+  }
14 
+
15 
+  return isImage && isLt10M;
16 
+}
17 
+
18 
+const UploadButton = (props) => (
19 
+  <div>
20 
+    {props.loading ? <LoadingOutlined /> : <PlusOutlined />}
21 
+    <div style={{ marginTop: 8 }}>上传</div>
22 
+  </div>
23 
+);
24 
+
25 
+export default (props) => {
26 
+  const { value, onChange } = props;
27 
+
28 
+  const [loading, setLoading] = useState(false);
29 
+
30 
+  const handleChange = info => {
31 
+    if (info.file.status === 'uploading') {
32 
+      setLoading(true);
33 
+      return;
34 
+    }
35 
+    if (info.file.status === 'error') {
36 
+      setLoading(false);
37 
+      return;
38 
+    }
39 
+
40 
+    if (info.file.status === 'done') {
41 
+      setLoading(false);
42 
+      const { url, fileType } = info.file.response;
43 
+      onChange(url);
44 
+    }
45 
+  };
46 
+
47 
+  const previewUrl = getRealPath ? getRealPath(value) : value;
48 
+
49 
+  return (
50 
+    <Upload
51 
+      listType="picture-card"
52 
+      className="image-uploader"
53 
+      showUploadList={false}
54 
+      beforeUpload={beforeUpload}
55 
+      onChange={handleChange}
56 
+    >
57 
+      {value ? <img src={previewUrl} alt="avatar" style={{ width: '100%', height: '100%' }} /> : <UploadButton loading={loading} />}
58 
+    </Upload>
59 
+  );
60 
+}

+ 115
- 0
src/components/Upload/UploadImageList.jsx Просмотреть файл 

@@ -0,0 +1,115 @@
1 
+
2 
+import React, { useEffect, useState } from 'react';
3 
+import { Modal } from 'antd'
4 
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
5 
+import Upload from './Upload';
6 
+
7 
+function beforeUpload(file) {
8 
+  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'|| file.type === 'image/gif';
9 
+  if (!isJpgOrPng) {
10 
+    message.error('请上传 JPG,PNG 或 GIF 图片!');
11 
+  }
12 
+  const isLt10M = file.size / 1024 / 1024 < 10;
13 
+  if (!isLt10M) {
14 
+    message.error('图片大小必须小于 10MB!');
15 
+  }
16 
+
17 
+  return isJpgOrPng && isLt10M;
18 
+}
19 
+
20 
+const UploadButton = (props) => (
21 
+  <div>
22 
+    {props.loading ? <LoadingOutlined /> : <PlusOutlined />}
23 
+    <div style={{ marginTop: 8 }}>上传</div>
24 
+  </div>
25 
+);
26 
+
27 
+export default (props) => {
28 
+  const { value, onChange, input, output } = props;
29 
+
30 
+  const [loading, setLoading] = useState(false);
31 
+  const [previewVisible, setPreviewVisible] = useState(false);
32 
+  const [previewImage, setPreviewImage] = useState();
33 
+  const [fileList, setFileList] = useState([]);
34 
+
35 
+  const handleChange = info => {
36 
+    if (info.file.status === 'uploading') {
37 
+      setLoading(true);
38 
+      return;
39 
+    }
40 
+    if (info.file.status === 'error') {
41 
+      setLoading(false);
42 
+      return;
43 
+    }
44 
+
45 
+    if (info.file.status === 'removed') {
46 
+      toggleChange(info.fileList)
47 
+    }
48 
+  };
49 
+
50 
+  const handleSuccess = ({url}) => {
51 
+    setLoading(false)
52 
+    const inx = fileList?.length ? fileList.length + 1 : 1
53 
+    const list = fileList.concat({
54 
+      url,
55 
+      uid: `new-${inx}`,
56 
+      status: 'done'
57 
+    })
58 
+    toggleChange(list)
59 
+  }
60 
+
61 
+  const toggleChange = (list) => {
62 
+    if (output) {
63 
+      onChange(list.map(x => output(x)))
64 
+    } else {
65 
+      onChange(list)
66 
+    }
67 
+  }
68 
+
69 
+  const handlePreview = (file) => {
70 
+    setPreviewImage(file.url)
71 
+    setPreviewVisible(true)
72 
+  }
73 
+
74 
+  useEffect(() => {
75 
+    if (input) {
76 
+      const lst = (value || []).map((it) => {
77 
+        const { uid, url } = input(it)
78 
+        return {
79 
+          uid,
80 
+          url,
81 
+          status: 'done',
82 
+          raw: it,
83 
+        }
84 
+      })
85 
+      setFileList(lst)
86 
+    } else {
87 
+      setFileList(value || [])
88 
+    }
89 
+  }, [value])
90 
+
91 
+  return (
92 
+    <>
93 
+      <Upload
94 
+        listType="picture-card"
95 
+        className="image-uploader"
96 
+        fileList={fileList}
97 
+        beforeUpload={beforeUpload}
98 
+        onChange={handleChange}
99 
+        onPreview={handlePreview}
100 
+        onSuccess={handleSuccess}
101 
+      >
102 
+        <UploadButton loading={loading} />
103 
+      </Upload>
104 
+      <Modal
105 
+        visible={previewVisible}
106 
+        title="图片预览"
107 
+        footer={null}
108 
+        onCancel={() => setPreviewVisible(false)}
109 
+      >
110 
+        <img alt="example" style={{ width: '100%' }} src={previewImage} />
111 
+      </Modal>
112 
+    </>
113 
+  );
114 
+}
115 
+

+ 94
- 0
src/components/Upload/UploadVideo.jsx Просмотреть файл 

@@ -0,0 +1,94 @@
1 
+import React, { useState, useRef, useEffect } from 'react';
2 
+import { Button } from 'antd'
3 
+import Upload from './Upload';
4 
+// import { uplodeNoteImage } from '@/services/note';
5 
+import styles from './style.less';
6 
+
7 
+function beforeUpload(file) {
8 
+  const isMp4 = file.type === 'video/mp4';
9 
+  if (!isMp4) {
10 
+    message.error('请上传 MP4 视频!');
11 
+  }
12 
+
13 
+  return isMp4;
14 
+}
15 
+
16 
+export default (props) => {
17 
+  //onPoster 改变主图事件   isScreenshot判断父组件是否需要截屏按钮
18 
+  const { value, onChange, onPoster, isScreenshot } = props;
19 
+  const [loading, setLoading] = useState(false);//上传按钮loading框
20 
+  const [capturing, setCapturing] = useState(false);//截屏按钮loading框
21 
+  const [video, setVideo] = useState()//当前上传的视频
22 
+  const [isVideoReady, setIsVideoReady] = useState(false)//判断视频是否加载成功
23 
+
24 
+  const canvasRef = useRef()
25 
+  const videoRef = useRef()
26 
+
27 
+  useEffect(() => {
28 
+    setVideo(value)//父组件的视频获取成功时改变当前页面的视频
29 
+  }, [value])
30 
+
31 
+  const handleChange = info => {
32 
+    if (info.file.status === 'uploading') {
33 
+      setLoading(true);
34 
+      return;
35 
+    }
36 
+    if (info.file.status === 'error') {
37 
+      setLoading(false);
38 
+      return;
39 
+    }
40 
+    if (info.file.status === 'done') {
41 
+      onChange(info.file.response);
42 
+      setLoading(false);
43 
+    }
44 
+  };
45 
+
46 
+  //开始截图
47 
+  const handelScreenshot = () => {
48 
+    const ctx = canvasRef.current.getContext("2d");
49 
+    ctx.drawImage(videoRef.current, 0, 0);
50 
+    const image = canvasRef.current.toDataURL("image/png", 0.9)
51 
+    setCapturing(true)
52 
+    // uplodeNoteImage({ base64: image }).then((res) => {
53 
+    //   onPoster(res)
54 
+    //   setCapturing(false)
55 
+    // })
56 
+  }
57 
+
58 
+  //视频加载成功事件
59 
+  const handleVideoReady = (e) => {
60 
+    setIsVideoReady(true)
61 
+    canvasRef.current.width = e.target.videoWidth;
62 
+    canvasRef.current.height = e.target.videoHeight;
63 
+  }
64 
+
65 
+  return (
66 
+    <div className={styles['video-uploader']}>
67 
+      <Upload
68 
+        className="image-uploader"
69 
+        showUploadList={false}
70 
+        beforeUpload={beforeUpload}
71 
+        onChange={handleChange}
72 
+      >
73 
+        <div style={{ maxWidth: '1px', maxHeight: '1px', overflow: 'hidden' }}>
74 
+          <canvas ref={canvasRef}></canvas>
75 
+        </div>
76 
+        <Button loading={loading}>
77 
+          点击上传视频 (MP4)
78 
+        </Button>
79 
+
80 
+      </Upload>
81 
+      {
82 
+        isScreenshot && (
83 
+          // disabled={!isVideoReady} 当视频准备成功时截屏按钮可以点击  否则不能点击
84 
+          <Button loading={capturing} style={{ marginLeft: '1em' }} onClick={handelScreenshot} disabled={!isVideoReady}>截屏</Button>
85 
+        )
86 
+      }
87 
+      {
88 
+        !!video && (
89 
+          <video ref={videoRef} width="320" height='500' crossOrigin='anonymous' controls src={video} onCanPlay={handleVideoReady}></video>
90 
+        )
91 
+      }
92 
+    </div>
93 
+  );
94 
+}

+ 11
- 0
src/components/Upload/index.jsx Просмотреть файл 

@@ -0,0 +1,11 @@
1 
+import Upload from './Upload';
2 
+import UploadImage from './UploadImage';
3 
+import UploadImageList from './UploadImageList';
4 
+import UploadVideo from './UploadVideo';
5 
+
6 
+export {
7 
+  Upload,
8 
+  UploadImage,
9 
+  UploadImageList,
10 
+  UploadVideo,
11 
+}

+ 32
- 0
src/components/Upload/request.js Просмотреть файл 

@@ -0,0 +1,32 @@
1 
+import request from '@/utils/request';
2 
+
3 
+const upload = (file, fileType = 'image') => {
4 
+  const formData = new FormData();
5 
+  formData.append("file", file);
6 
+  formData.append("fileType", fileType);
7 
+
8 
+  return request('/api/admin/file', {
9 
+    method: 'post',
10 
+    data: formData,
11 
+    headers: {
12 
+      'Content-Type': 'multipart/form-data',
13 
+    }
14 
+  });
15 
+}
16 
+
17 
+/**
18 
+ * 上传文件
19 
+ * @returns
20 
+ */
21 
+export function uploadFile(params) {
22 
+  const { file, onSuccess, onError } = params;
23 
+  upload(file).then((res) => {
24 
+    onSuccess(res, file)
25 
+  }).catch((e) => {
26 
+    onError(e)
27 
+  });
28 
+
29 
+  return {
30 
+    abort: () => {},
31 
+  };
32 
+}

+ 7
- 0
src/components/Upload/style.less Просмотреть файл 

@@ -0,0 +1,7 @@
1 
+.video-uploader {
2 
+  video {
3 
+    margin-top: 2em;
4 
+    width: 100%;
5 
+    max-height: 360px;
6 
+  }
7 
+}

+ 87
- 0
src/components/Wangeditor/index.jsx Просмотреть файл 

@@ -0,0 +1,87 @@
1 
+import React, { useState, useEffect } from "react";
2 
+import "@wangeditor/editor/dist/css/style.css";
3 
+import { Editor, Toolbar } from "@wangeditor/editor-for-react";
4 
+
5 
+// 工具栏配置参考
6 
+// https://www.cnblogs.com/-roc/p/16400965.html
7 
+
8 
+const defaultStyle = {
9 
+  border: "1px solid #ccc",
10 
+  zIndex: 100,
11 
+  marginTop: "15px"
12 
+}
13 
+
14 
+function MyEditor(props) {
15 
+
16 
+  const style = React.useMemo(() => ({ ...defaultStyle, ...(props.style || {}) }), [props.style])
17 
+
18 
+  const {
19 
+    value = "",
20 
+    onChange = (e) => {
21 
+      setHtml(e);
22 
+    },
23 
+    toolbarConfig = {
24 
+      excludeKeys: ["group-image", "group-video"],
25 
+    },
26 
+    editorConfig = {
27 
+      placeholder: "请输入内容...",
28 
+    },
29 
+    readonly = false,
30 
+  } = props;
31 
+  const [editor, setEditor] = useState(null); // 存储 editor 实例
32 
+  const [html, setHtml] = useState("");
33 
+
34 
+  // 模拟 ajax 请求，异步设置 html
35 
+  useEffect(() => {
36 
+    setHtml(value || "");
37 
+  }, [value]);
38 
+
39 
+  // 及时销毁 editor
40 
+  useEffect(() => {
41 
+    return () => {
42 
+      if (editor == null) return;
43 
+      editor.destroy();
44 
+      setEditor(null);
45 
+    };
46 
+  }, [editor]);
47 
+
48 
+  function insertText() {
49 
+    if (editor == null) return;
50 
+    editor.insertText(" hello ");
51 
+  }
52 
+
53 
+  function printHtml() {
54 
+    if (editor == null) return;
55 
+    console.log(editor.getHtml());
56 
+  }
57 
+
58 
+  const handleChange = (editor) => {
59 
+    const raw = editor.getHtml();
60 
+    if (raw !== '<p><br></p>') {
61 
+      onChange(raw)
62 
+    }
63 
+  }
64 
+
65 
+  return !readonly ? (
66 
+    <div className={props.className} style={style}>
67 
+      <Toolbar
68 
+        editor={editor}
69 
+        defaultConfig={toolbarConfig}
70 
+        mode="default"
71 
+        style={{ borderBottom: "1px solid #ccc" }}
72 
+      />
73 
+      <Editor
74 
+        defaultConfig={editorConfig}
75 
+        value={html}
76 
+        onCreated={setEditor}
77 
+        onChange={handleChange}
78 
+        mode="default"
79 
+        style={{ height: "500px" }}
80 
+      />
81 
+    </div>
82 
+  ) : (
83 
+    <div dangerouslySetInnerHTML={{ __html: value }}></div>
84 
+  );
85 
+}
86 
+
87 
+export default MyEditor;

+ 81
- 0
src/components/chart/index.jsx Просмотреть файл 

@@ -0,0 +1,81 @@
1 
+import React, { useRef, useEffect } from 'react';
2 
+
3 
+// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
4 
+import * as echarts from 'echarts/core';
5 
+// 引入图表，图表后缀都为 Chart
6 
+import {
7 
+  BarChart,
8 
+  PieChart,
9 
+  LineChart,
10 
+  GaugeChart,
11 
+  RadarChart,
12 
+  PictorialBarChart,
13 
+} from 'echarts/charts';
14 
+// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
15 
+import {
16 
+  TitleComponent,
17 
+  TooltipComponent,
18 
+  ToolboxComponent,
19 
+  GridComponent,
20 
+  DatasetComponent,
21 
+  LegendComponent,
22 
+  DataZoomComponent,
23 
+  TransformComponent,
24 
+  VisualMapComponent,
25 
+} from 'echarts/components';
26 
+// 标签自动布局，全局过渡动画等特性
27 
+import { LabelLayout, UniversalTransition } from 'echarts/features';
28 
+// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
29 
+import { CanvasRenderer } from 'echarts/renderers';
30 
+
31 
+// 注册必须的组件
32 
+echarts.use([
33 
+  TitleComponent,
34 
+  TooltipComponent,
35 
+  ToolboxComponent,
36 
+  GridComponent,
37 
+  DatasetComponent,
38 
+  LegendComponent,
39 
+  DataZoomComponent,
40 
+  TransformComponent,
41 
+  VisualMapComponent,
42 
+  BarChart,
43 
+  PieChart,
44 
+  LineChart,
45 
+  GaugeChart,
46 
+  RadarChart,
47 
+  PictorialBarChart,
48 
+  LabelLayout,
49 
+  UniversalTransition,
50 
+  CanvasRenderer
51 
+]);
52 
+
53 
+export default (props) => {
54 
+  const { className, style, option } = props;
55 
+
56 
+  const domRef = useRef();
57 
+  const chartRef = useRef();
58 
+
59 
+  useEffect(() => {
60 
+    if (!chartRef.current) {
61 
+      chartRef.current = echarts.init(domRef.current);
62 
+    }
63 
+
64 
+    const resize = () => {
65 
+      const t = setTimeout(() => {
66 
+        clearTimeout(t);
67 
+        chartRef.current.resize();
68 
+      }, 100);
69 
+    };
70 
+
71 
+    chartRef.current.setOption(option);
72 
+    resize();
73 
+
74 
+    window.addEventListener('resize', resize);
75 
+    return () => window.removeEventListener('resize', resize);
76 
+  }, [option]);
77 
+
78 
+  return (
79 
+    <div className={className} style={style} ref={domRef}></div>
80 
+  )
81 
+}

+ 71
- 0
src/index.less Просмотреть файл 

@@ -0,0 +1,71 @@
1 
+@import './theme.less';
2 
+
3 
+html, body, #root {
4 
+  width: 100%;
5 
+  height: 100%;
6 
+  margin: 0;
7 
+}
8 
+
9 
+:root {
10 
+  --theme-color: #fff;
11 
+  --theme-front: #000;
12 
+  --theme-main-bg: #f1f7fe; // #f0f2f5;
13 
+  --header-height: 60px;
14 
+  --siderbar-width: 240px;
15 
+}
16 
+
17 
+.main-layout {
18 
+  height: 100vh;
19 
+  display: flex;
20 
+  flex-direction: column;
21 
+}
22 
+
23 
+.fixd-header {
24 
+  width: 100%;
25 
+  position: fixed;
26 
+  top: 0;
27 
+  height: var(--header-height);
28 
+  line-height: var(--header-height);
29 
+  z-index: 100;
30 
+}
31 
+
32 
+.ant-layout-header {
33 
+  line-height: var(--header-height);
34 
+  z-index: 10;
35 
+}
36 
+
37 
+.layout-sidebar {
38 
+  width: var(--siderbar-width);
39 
+  color: var(--theme-front);
40 
+}
41 
+
42 
+.ant-card, .ant-pro-card {
43 
+  border-radius: 8px !important;
44 
+}
45 
+
46 
+
47 
+// 兼容 360
48 
+.ant-pro-sider-collapsed-button {
49 
+  top: 18px;
50 
+  right: -13px;
51 
+}
52 
+
53 
+.ant-pro .ant-pro-layout .ant-pro-sider-logo {
54 
+  padding: 16px;
55 
+}
56 
+
57 
+.ant-pro .ant-pro-query-filter .ant-form-item {
58 
+  margin: 0;
59 
+}
60 
+
61 
+.ant-pro-page-container .ant-pro-page-container-warp-page-header ~ .ant-pro-grid-content .ant-pro-page-container-children-content {
62 
+  margin: 8px 40px 40px 40px;
63 
+}
64 
+
65 
+.ant-pro-table-list-toolbar-container {
66 
+  padding: 16px 0;
67 
+}
68 
+
69 
+.ant-pro-card .ant-pro-card-body {
70 
+  padding: 16px 24px;
71 
+}

+ 32
- 0
src/layouts/AuthLayout/Main.jsx Просмотреть файл 

@@ -0,0 +1,32 @@
1 
+import React from "react";
2 
+import { Layout } from "antd";
3 
+import { useLocation, Outlet, useNavigate } from "react-router-dom";
4 
+import { useModel } from "@/store";
5 
+import useRoute from "@/routes/hooks/useRoute";
6 
+import SiderBar from "./components/SiderBar";
7 
+import Header from "./components/Header";
8 
+import Container from "./components/Container";
9 
+import { authRoutes } from "@/routes/routes";
10 
+import { getMenuItems } from "@/routes/menus";
11 
+
12 
+import "./style.less";
13 
+
14 
+export default (props) => {
15 
+  const { theme } = useModel("system");
16 
+  const { user } = useModel("user");
17 
+  const navigate = useNavigate();
18 
+  const location = useLocation();
19 
+  const menus = getMenuItems(authRoutes);
20 
+
21 
+  // console.log('menus', menus)
22 
+
23 
+  return (
24 
+    <Layout className={theme} style={{ height: "100vh" }}>
25 
+      <Header theme={theme} user={user} />
26 
+      <Layout style={{ height: "calc(100vh - var(--header-height))" }}>
27 
+        <SiderBar theme={theme} menus={menus} location={location} />
28 
+        <Container location={location} />
29 
+      </Layout>
30 
+    </Layout>
31 
+  );
32 
+};

+ 3
- 0
src/layouts/AuthLayout/RedirectLogin.jsx Просмотреть файл 

@@ -0,0 +1,3 @@
1 
+import { Navigate } from "react-router-dom";
2 
+
3 
+export default () => <Navigate to="/login?back=true" />;

+ 72
- 0
src/layouts/AuthLayout/components/Background.jsx Просмотреть файл 

@@ -0,0 +1,72 @@
1 
+import React from 'react'
2 
+
3 
+const wrapperStyle = {
4 
+  width: '100%',
5 
+  height: '100%',
6 
+  position: 'absolute',
7 
+  zIndex: 0,
8 
+  top: 0,
9 
+  left: 0,
10 
+  overflow: 'hidden',
11 
+}
12 
+
13 
+const colors = [
14 
+  '#fff1f0',
15 
+  '#fff2e8',
16 
+  '#fff7e6',
17 
+  '#fffbe6',
18 
+  '#feffe6',
19 
+  '#fcffe6',
20 
+  '#f6ffed',
21 
+  '#e6fffb',
22 
+  '#e6f4ff',
23 
+  '#f0f5ff',
24 
+  '#f9f0ff',
25 
+  '#fff0f6',
26 
+]
27 
+
28 
+export default (props) => {
29 
+  const ref = React.useRef();
30 
+
31 
+  const [color1, color2] = React.useMemo(() => {
32 
+    const inx1 = Math.floor(Math.random() * colors.length);
33 
+    const inx2 = Math.floor(Math.random() * colors.length);
34 
+
35 
+    return [colors[inx1], colors[inx2]];
36 
+  }, []);
37 
+
38 
+  React.useEffect(() => {
39 
+    const dom = ref.current;
40 
+    const canvas = dom.firstElementChild;
41 
+    canvas.width = dom.offsetWidth;
42 
+    canvas.height = dom.offsetHeight;
43 
+
44 
+    const centerX = canvas.width / 2;
45 
+    const centerY = canvas.height / 2;
46 
+    const size = centerX / 3
47 
+
48 
+    const ctx = canvas.getContext("2d");
49 
+
50 
+    ctx.filter = `blur(200px)`;
51 
+
52 
+    ctx.beginPath()
53 
+    ctx.fillStyle = color1; // "#ffd8bf";
54 
+    ctx.ellipse(centerX + 100, centerY + 80, size, size + Math.random() * 100, Math.PI / 4, 0, 2 * Math.PI);
55 
+    ctx.fill();
56 
+    ctx.closePath();
57 
+
58 
+    ctx.beginPath()
59 
+    ctx.fillStyle = color2; // "#e6fffb";
60 
+    ctx.ellipse(centerX + 400, centerY + 120, size, size + Math.random() * 100, Math.PI / 2, 0, 2 * Math.PI);
61 
+    ctx.fill();
62 
+    ctx.closePath();
63 
+
64 
+  }, []);
65 
+
66 
+  return (
67 
+    <div ref={ref} style={wrapperStyle}>
68 
+      <canvas>
69 
+      </canvas>
70 
+    </div>
71 
+  )
72 
+}

+ 31
- 0
src/layouts/AuthLayout/components/Container.jsx Просмотреть файл 

@@ -0,0 +1,31 @@
1 
+import React from 'react';
2 
+import { Layout } from 'antd';
3 
+import { Outlet } from "react-router-dom";
4 
+import PageTransition from './PageTransition';
5 
+import Footer from './Footer';
6 
+
7 
+const { Content } = Layout;
8 
+const marginSpace = 24;
9 
+
10 
+export default (props) => {
11 
+  const { noFooter } = props;
12 
+  const footerRef = React.useRef();
13 
+  const [height, setHeight] = React.useState(`calc(100% - ${marginSpace * 2}px`);
14 
+
15 
+  React.useEffect(() => {
16 
+    if (footerRef.current) {
17 
+      setHeight(`calc(100% - ${footerRef.current.offsetHeight + marginSpace * 2}px)`);
18 
+    }
19 
+  }, [noFooter])
20 
+
21 
+  return (
22 
+    <div className='layout-container'>
23 
+      <Content style={{ minHeight: height, margin: `0 ${marginSpace}px` }}>
24 
+        <PageTransition location={props.location}>
25 
+          <Outlet />
26 
+        </PageTransition>
27 
+      </Content>
28 
+      <Footer ref={footerRef} />
29 
+    </div>
30 
+  )
31 
+}

+ 15
- 0
src/layouts/AuthLayout/components/Footer.jsx Просмотреть файл 

@@ -0,0 +1,15 @@
1 
+import React from 'react';
2 
+import { Layout } from 'antd';
3 
+import { useModel } from '@/store';
4 
+
5 
+const { Footer } = Layout;
6 
+
7 
+const year = new Date().getFullYear();
8 
+export default React.forwardRef((props, ref) => {
9 
+  const { app } = useModel('system');
10 
+  const copyRight = `${app.company || '南京云致'} @ ${year}`;
11 
+
12 
+  return (
13 
+    <Footer ref={ref} style={{ textAlign: 'center', color: 'rgba(0,0,0, 0.3)' }}>{copyRight}</Footer>
14 
+  )
15 
+})

+ 36
- 0
src/layouts/AuthLayout/components/Header/Exit.jsx Просмотреть файл 

@@ -0,0 +1,36 @@
1 
+import React from "react";
2 
+import { useNavigate } from "react-router-dom";
3 
+import { LogoutOutlined } from "@ant-design/icons";
4 
+import { Button, Modal } from "antd";
5 
+import { useModel } from "@/store";
6 
+import { logout } from "@/services/login";
7 
+
8 
+const { confirm } = Modal;
9 
+
10 
+export default (props) => {
11 
+  const navigate = useNavigate();
12 
+  const { setUser } = useModel("user");
13 
+
14 
+  const onExit = () => {
15 
+    confirm({
16 
+      title: "确认退出系统?",
17 
+      onOk: () => {
18 
+        logout(); // 调用接口
19 
+        localStorage.removeItem("token");
20 
+        setUser();
21 
+        navigate("/login?back=true");
22 
+      },
23 
+    });
24 
+  };
25 
+
26 
+  return (
27 
+    <Button
28 
+      className="font"
29 
+      type="text"
30 
+      icon={<LogoutOutlined />}
31 
+      onClick={onExit}
32 
+    >
33 
+      退出
34 
+    </Button>
35 
+  );
36 
+};

+ 24
- 0
src/layouts/AuthLayout/components/Header/Title.jsx Просмотреть файл 

@@ -0,0 +1,24 @@
1 
+
2 
+import useRoute from '@/routes/hooks/useRoute';
3 
+
4 
+const titleStyle = {
5 
+  margin: 0,
6 
+}
7 
+
8 
+const spanStyle = {
9 
+  display: 'inline-block',
10 
+  width: '24px',
11 
+  textAlign: 'center'
12 
+}
13 
+
14 
+export default (props) => {
15 
+  const route = useRoute();
16 
+  const { title } = route && route.meta || {}
17 
+
18 
+  return (
19 
+    <h5 style={titleStyle}>
20 
+      { title && <span style={spanStyle}>&raquo;</span> }
21 
+      { title && <span>{title}</span> }
22 
+    </h5>
23 
+  );
24 
+}

+ 122
- 0
src/layouts/AuthLayout/components/Header/User.jsx Просмотреть файл 

@@ -0,0 +1,122 @@
1 
+import React, {
2 
+  useState,
3 
+  forwardRef,
4 
+  useRef,
5 
+  useImperativeHandle,
6 
+} from "react";
7 
+import { Avatar, Dropdown } from "antd";
8 
+import {
9 
+  ModalForm,
10 
+  ProFormText,
11 
+  ProFormDependency,
12 
+} from "@ant-design/pro-components";
13 
+import md5 from "md5";
14 
+import { changePassword } from "@/services/login";
15 
+
16 
+const DefaultAvatar = ({ color = "#1296db" }) => (
17 
+  <svg
18 
+    viewBox="0 0 1024 1024"
19 
+    version="1.1"
20 
+    xmlns="http://www.w3.org/2000/svg"
21 
+    width="24"
22 
+    height="24"
23 
+  >
24 
+    <path
25 
+      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"
26 
+      fill={color}
27 
+    ></path>
28 
+  </svg>
29 
+);
30 
+
31 
+const ChangePassword = forwardRef((props, ref) => {
32 
+  const { user } = props;
33 
+
34 
+  const [visible, setVisible] = useState(false);
35 
+
36 
+  const onFinish = async (values) => {
37 
+    // console.log('---values---->', values)
38 
+    const data = {
39 
+      password: values.newPassword,
40 
+    };
41 
+    // console.log('---ff---->', data)
42 
+    await changePassword(data);
43 
+
44 
+    return true;
45 
+  };
46 
+
47 
+  useImperativeHandle(ref, () => {
48 
+    return {
49 
+      show: () => setVisible(true),
50 
+    };
51 
+  });
52 
+
53 
+  return (
54 
+    <ModalForm
55 
+      title="修改密码"
56 
+      width="480px"
57 
+      open={visible}
58 
+      onOpenChange={setVisible}
59 
+      onFinish={onFinish}
60 
+    >
61 
+      <ProFormText.Password
62 
+        label="原始密码"
63 
+        name="password"
64 
+        rules={[{ required: true, message: "请输入原始密码!" }]}
65 
+      />
66 
+      <ProFormText.Password
67 
+        label="新密码"
68 
+        name="newPassword"
69 
+        rules={[{ required: true, message: "请输入新密码!" }]}
70 
+      />
71 
+
72 
+      <ProFormDependency name={["newPassword"]}>
73 
+        {({ newPassword }) => (
74 
+          <ProFormText.Password
75 
+            label="确认新密码"
76 
+            name="newPassword2"
77 
+            rules={[
78 
+              { required: true, message: "请输入新密码!" },
79 
+              () => ({
80 
+                validator (_, value) {
81 
+                  if (!value || value == newPassword) {
82 
+                    return Promise.resolve();
83 
+                  }
84 
+
85 
+                  return Promise.reject("两次输入密码不一致");
86 
+                },
87 
+              }),
88 
+            ]}
89 
+          />
90 
+        )}
91 
+      </ProFormDependency>
92 
+    </ModalForm>
93 
+  );
94 
+});
95 
+
96 
+export default (props) => {
97 
+  const items = [
98 
+    {
99 
+      key: "changePassword",
100 
+      label: "修改密码",
101 
+    },
102 
+  ];
103 
+
104 
+  const passRef = useRef();
105 
+  const { user = {} } = props;
106 
+
107 
+  const onClick = ({ key }) => {
108 
+    if (key === "changePassword") {
109 
+      passRef.current.show();
110 
+    }
111 
+  };
112 
+
113 
+  return (
114 
+    <Dropdown menu={{ items, onClick }}>
115 
+      <div className="user-info">
116 
+        <Avatar size={24} src={user.avatar || <DefaultAvatar />} />
117 
+        <span className="font">{user.name}</span>
118 
+        <ChangePassword user={user} ref={passRef} />
119 
+      </div>
120 
+    </Dropdown>
121 
+  );
122 
+};

+ 28
- 0
src/layouts/AuthLayout/components/Header/index.jsx Просмотреть файл 

@@ -0,0 +1,28 @@
1 
+import React, { useMemo } from 'react';
2 
+import { Layout, Space } from 'antd';
3 
+import classNames from 'classnames';
4 
+import Title from './Title';
5 
+import User from './User';
6 
+import Exit from './Exit';
7 
+import Logo from '../Logo';
8 
+
9 
+const { Header } = Layout;
10 
+
11 
+export default (props) => {
12 
+  const { user } = props;
13 
+
14 
+  const className = useMemo(() => classNames({
15 
+    'layout-header': true,
16 
+    'light': props.theme === 'light',
17 
+  }), [props.theme]);
18 
+
19 
+  return (
20 
+    <Header className={className}>
21 
+      <Logo />
22 
+      <Space>
23 
+        <User user={user} />
24 
+        <Exit />
25 
+      </Space>
26 
+    </Header>
27 
+  )
28 
+}

+ 19
- 0
src/layouts/AuthLayout/components/HtmlTitle.jsx Просмотреть файл 

@@ -0,0 +1,19 @@
1 
+
2 
+import { Helmet } from "react-helmet";
3 
+import { useModel } from '@/store';
4 
+import useRoute from '@/routes/hooks/useRoute';
5 
+
6 
+export default (props) => {
7 
+  const { app } = useModel('system');
8 
+  const route = useRoute();
9 
+  const { title } = route && route.meta || {}
10 
+
11 
+  const titleTemplate = `%s - ${app.fullName}`;
12 
+  const defaultTitle = app.fullName;
13 
+
14 
+  return (
15 
+    <Helmet titleTemplate={titleTemplate} defaultTitle={defaultTitle}>
16 
+      <title>{title}</title>
17 
+    </Helmet>
18 
+  );
19 
+}

+ 17
- 0
src/layouts/AuthLayout/components/Logo.jsx Просмотреть файл 

@@ -0,0 +1,17 @@
1 
+import React from 'react';
2 
+import { Typography } from 'antd';
3 
+import { NavLink } from "react-router-dom";
4 
+import { useModel } from '@/store';
5 
+
6 
+export default (props) => {
7 
+  const { app } = useModel('system');
8 
+
9 
+  return (
10 
+    // <NavLink className='logo'  to="/">
11 
+    <div className="logo">
12 
+      <img src="./logo.png" alt="" />
13 
+      <h3>{app.shorName}</h3>
14 
+    </div>
15 
+    // </NavLink>
16 
+  )
17 
+}

+ 31
- 0
src/layouts/AuthLayout/components/Menus.jsx Просмотреть файл 

@@ -0,0 +1,31 @@
1 
+import React from 'react';
2 
+import { Menu } from 'antd';
3 
+
4 
+const menuStyle = { height: '100%' };
5 
+
6 
+export default (props) => {
7 
+  const { theme, items, location } = props;
8 
+
9 
+  // const selectedKeys = React.useMemo(() => {
10 
+  //   const parts = location.pathname.split('/').filter(Boolean);
11 
+  //   const keys = parts.reduce((acc, it) => {
12 
+  //     const parent = acc.pop();
13 
+  //     const path = !parent ? `/${it}` : `${parent}/${it}`
14 
+
15 
+  //     return acc.concat([parent, path].filter(Boolean));
16 
+  //   }, []);
17 
+
18 
+  //   return keys;
19 
+  // }, [location.pathname]);
20 
+
21 
+  const selectedKeys = [location.pathname];
22 
+  return (
23 
+    <Menu
24 
+      mode="inline"
25 
+      style={menuStyle}
26 
+      theme={theme}
27 
+      items={items}
28 
+      selectedKeys={selectedKeys}
29 
+    />
30 
+  )
31 
+}

+ 21
- 0
src/layouts/AuthLayout/components/PageTransition/index.jsx Просмотреть файл 

@@ -0,0 +1,21 @@
1 
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
2 
+import './style.less';
3 
+
4 
+export default (props) => {
5 
+  const { location } = props;
6 
+  const currentURL = location.pathname + location.search;
7 
+
8 
+  return (
9 
+    <TransitionGroup component={null}>
10 
+      <CSSTransition
11 
+        key={currentURL}
12 
+        addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
13 
+        classNames="page-fade"
14 
+      >
15 
+        <div style={{ height: '100%' }}>
16 
+          {props.children}
17 
+        </div>
18 
+      </CSSTransition>
19 
+    </TransitionGroup>
20 
+  );
21 
+}

+ 21
- 0
src/layouts/AuthLayout/components/PageTransition/style.less Просмотреть файл 

@@ -0,0 +1,21 @@
1 
+
2 
+.page-fade-enter {
3 
+  opacity: 0;
4 
+  transform: translateY(10%);
5 
+}
6 
+.page-fade-enter-active {
7 
+  opacity: 1;
8 
+  transform: translateY(0%);
9 
+}
10 
+.page-fade-exit {
11 
+  opacity: 0; // 1;
12 
+  transform: translateY(0%);
13 
+}
14 
+.page-fade-exit-active {
15 
+  opacity: 0;
16 
+  transform: translateY(10%);
17 
+}
18 
+.page-fade-enter-active,
19 
+.page-fade-exit-active {
20 
+  transition: opacity 220ms, transform 220ms;
21 
+}

+ 21
- 0
src/layouts/AuthLayout/components/SiderBar.jsx Просмотреть файл 

@@ -0,0 +1,21 @@
1 
+import React, { useMemo } from 'react';
2 
+import { Layout, Spin } from 'antd';
3 
+import { getPropertyValue } from '@/utils/css';
4 
+import Menus from './Menus';
5 
+
6 
+const { Sider } = Layout;
7 
+
8 
+
9 
+export default (props) => {
10 
+  const { theme, location, menus } = props;
11 
+
12 
+  const width = useMemo(() => {
13 
+    return /\d+/.exec(getPropertyValue('--siderbar-width'))[0] - 0;
14 
+  }, []);
15 
+
16 
+  return (
17 
+    <Sider className='layout-sidebar' theme={theme} collapsible width={width}>
18 
+      <Menus theme={theme} items={menus} location={location} />
19 
+    </Sider>
20 
+  );
21 
+}

+ 33
- 0
src/layouts/AuthLayout/index.jsx Просмотреть файл 

@@ -0,0 +1,33 @@
1 
+import React from "react";
2 
+import { Spin } from "antd";
3 
+import HtmlTitle from "./components/HtmlTitle";
4 
+// import Main from './Main';
5 
+import withLogin from "./withLogin";
6 
+
7 
+const Spinner = () => (
8 
+  <div
9 
+    style={{
10 
+      width: "100%",
11 
+      height: "100%",
12 
+      display: "grid",
13 
+      placeItems: "center",
14 
+    }}
15 
+  >
16 
+    <Spin />
17 
+  </div>
18 
+);
19 
+
20 
+export default (props) => {
21 
+  const RequireLogin = React.lazy(() => {
22 
+    return withLogin(import("./Main"));
23 
+  });
24 
+
25 
+  return (
26 
+    <>
27 
+      <HtmlTitle />
28 
+      <React.Suspense fallback={<Spinner />}>
29 
+        <RequireLogin />
30 
+      </React.Suspense>
31 
+    </>
32 
+  );
33 
+};

+ 80
- 0
src/layouts/AuthLayout/style.less Просмотреть файл 

@@ -0,0 +1,80 @@
1 
+.layout-header {
2 
+  height: var(--header-height);
3 
+  box-sizing: border-box;
4 
+  padding: 0;
5 
+  display: flex;
6 
+  align-items: center;
7 
+  justify-content: space-between;
8 
+  color: #fff;
9 
+
10 
+  &.light {
11 
+    color: #000;
12 
+  }
13 
+
14 
+  .header-content {
15 
+    flex: 1;
16 
+  }
17 
+
18 
+  .font {
19 
+    color: inherit;
20 
+    display: inline-block;
21 
+  }
22 
+
23 
+  .user-info {
24 
+    cursor: pointer;
25 
+
26 
+    .ant-avatar {
27 
+      border: 1px solid rgba(255, 255, 255, 0.4);
28 
+    }
29 
+
30 
+    span {
31 
+      margin-left: 1em;
32 
+    }
33 
+  }
34 
+
35 
+  .sys-exit {
36 
+    margin-right: 1em;
37 
+  }
38 
+}
39 
+
40 
+.logo {
41 
+  height: var(--header-height);
42 
+  display: flex;
43 
+  align-items: center;
44 
+  box-sizing: border-box;
45 
+  padding-left: 1em;
46 
+  color: inherit;
47 
+
48 
+  & > * {
49 
+    color: inherit;
50 
+    margin: 0;
51 
+  }
52 
+
53 
+  h5 {
54 
+    margin: 0;
55 
+  }
56 
+
57 
+  img {
58 
+    width: 28px;
59 
+    vertical-align: middle;
60 
+    margin-right: 1em;
61 
+  }
62 
+}
63 
+
64 
+.layout-container {
65 
+  flex: 1;
66 
+
67 
+  overflow-y: auto;
68 
+  scrollbar-width: none;
69 
+  -ms-overflow-style: none;
70 
+
71 
+  &::--webkit-scrollbar {
72 
+    display: none;
73 
+  }
74 
+
75 
+  padding-top: 0; // 避免子元素的 margin 影响
76 
+}
77 
+
78 
+.ant-menu-vertical {
79 
+  border: none;
80 
+}

+ 30
- 0
src/layouts/AuthLayout/withLogin.jsx Просмотреть файл 

@@ -0,0 +1,30 @@
1 
+import React from "react";
2 
+import store from "@/store";
3 
+
4 
+export default function withLogin (factory) {
5 
+  return new Promise((resolve) => {
6 
+    // console.log('------factory------>', factory)
7 
+    const { user, getCurrentUser } = store.getState("user");
8 
+    const loged = user && (user.userId || user.id);
9 
+    // console.log('------loged------>', loged)
10 
+    if (loged) {
11 
+      resolve(factory);
12 
+    } else {
13 
+      let ticket = undefined;
14 
+      const match = window.location?.href?.match(/ticket=([^?&/]*)/);
15 
+      if (match?.length > 0) {
16 
+        ticket = match[1];
17 
+      }
18 
+
19 
+      getCurrentUser({ ticket: ticket })
20 
+        .then(() => {
21 
+          resolve(factory);
22 
+        })
23 
+        .catch((e) => {
24 
+          console.error(e);
25 
+          resolve(import("./RedirectLogin"));
26 
+        });
27 
+      // resolve(import("./RedirectLogin"));
28 
+    }
29 
+  });
30 
+}

+ 16
- 0
src/main.jsx Просмотреть файл 

@@ -0,0 +1,16 @@
1 
+import React from 'react';
2 
+import ReactDOM from 'react-dom/client';
3 
+import Background from './layouts/AuthLayout/components/Background';
4 
+import Router from './routes/Router';
5 
+import './index.less';
6 
+import { Provider } from './store';
7 
+import { initTokenIfExists } from './utils/sso';
8 
+
9 
+initTokenIfExists();
10 
+
11 
+ReactDOM.createRoot(document.getElementById('root')).render(
12 
+  <Provider>
13 
+    <Background />
14 
+    <Router />
15 
+  </Provider>
16 
+);

+ 29
- 0
src/pages/404/index.jsx Просмотреть файл 

@@ -0,0 +1,29 @@
1 
+import React from 'react';
2 
+import { Button, Result } from 'antd';
3 
+import { Helmet } from "react-helmet";
4 
+import { NavLink } from "react-router-dom";
5 
+import { useModel } from '@/store';
6 
+
7 
+const style = {
8 
+  display: 'grid',
9 
+  placeItems: 'center',
10 
+  height: '100%'
11 
+}
12 
+
13 
+export default (props) => {
14 
+  const { app } = useModel('system');
15 
+
16 
+  return (
17 
+    <div style={style}>
18 
+      <Helmet>
19 
+        <title>{app.fullName}</title>
20 
+      </Helmet>
21 
+      <Result
22 
+        status="404"
23 
+        title="404"
24 
+        subTitle="页面不存在"
25 
+        extra={<NavLink to="/" replace><Button type="primary">返回首页</Button></NavLink>}
26 
+      />
27 
+    </div>
28 
+  )
29 
+}

+ 130
- 0
src/pages/custom/Account.jsx Просмотреть файл 

@@ -0,0 +1,130 @@
1 
+import React from "react";
2 
+import { Modal, Form, Input, Button, Select } from "antd";
3 
+import useBool from "@/utils/hooks/useBool";
4 
+import { getSysLogin, postSysLogin } from "@/services/syslogin";
5 
+import { postSysUser, getSysUserById } from "@/services/sysuser";
6 
+import md5 from "md5";
7 
+
8 
+const { Option } = Select;
9 
+
10 
+const formItemLayout = {
11 
+  labelCol: {
12 
+    xs: { span: 24 },
13 
+    sm: { span: 8 },
14 
+  },
15 
+  wrapperCol: {
16 
+    xs: { span: 24 },
17 
+    sm: { span: 16 },
18 
+  },
19 
+};
20 
+const tailFormItemLayout = {
21 
+  wrapperCol: {
22 
+    xs: {
23 
+      span: 24,
24 
+      offset: 0,
25 
+    },
26 
+    sm: {
27 
+      span: 16,
28 
+      offset: 8,
29 
+    },
30 
+  },
31 
+};
32 
+
33 
+const defaultPass = "123456";
34 
+
35 
+export default (props) => {
36 
+  const { user, onSuccess, onCancel, roleList = [], ...leftProps } = props;
37 
+
38 
+  const [loading, startLoading, cancelLoading] = useBool();
39 
+  const [form] = Form.useForm();
40 
+
41 
+  const onFinish = (values) => {
42 
+    const password = md5(defaultPass);
43 
+    const rolesList = (values.rolesList || []).map((x) => ({ roleId: x }));
44 
+    const data = {
45 
+      ...user,
46 
+      ...values,
47 
+      password,
48 
+
49 
+      rolesList,
50 
+      userId: user.userId,
51 
+    };
52 
+
53 
+    startLoading();
54 
+    postSysUser(data)
55 
+      .then((res) => {
56 
+        onSuccess();
57 
+        cancelLoading();
58 
+      })
59 
+      .catch(() => {
60 
+        cancelLoading();
61 
+      });
62 
+  };
63 
+
64 
+  React.useEffect(() => {
65 
+    if (user?.userId) {
66 
+      form.setFieldsValue({
67 
+        account: user.account || undefined,
68 
+        rolesList: user.rolesList.map((x) => x.roleId),
69 
+      });
70 
+    }
71 
+  }, [user, form]);
72 
+
73 
+  return (
74 
+    <Modal
75 
+      title="账号维护"
76 
+      footer={null}
77 
+      width={600}
78 
+      onCancel={onCancel}
79 
+      {...leftProps}
80 
+    >
81 
+      <Form
82 
+        {...formItemLayout}
83 
+        form={form}
84 
+        scrollToFirstError
85 
+        style={{ width: "480px" }}
86 
+        onFinish={onFinish}
87 
+      >
88 
+        <Form.Item
89 
+          name="account"
90 
+          label="账号"
91 
+          rules={[
92 
+            {
93 
+              required: true,
94 
+              message: "请填写姓名",
95 
+            },
96 
+          ]}
97 
+        >
98 
+          <Input />
99 
+        </Form.Item>
100 
+        <Form.Item name="rolesList" label="角色">
101 
+          <Select
102 
+            mode="multiple"
103 
+            allowClear
104 
+            style={{ width: "100%" }}
105 
+            placeholder="请选择角色"
106 
+          >
107 
+            {roleList.map((role) => (
108 
+              <Option key={role.roleId}>{role.name}</Option>
109 
+            ))}
110 
+          </Select>
111 
+        </Form.Item>
112 
+        <Form.Item
113 
+          // name="password"
114 
+          label="密码"
115 
+          // help={`默认密码 ${defaultPass}`}
116 
+        >
117 
+          <div>{`默认密码 ${defaultPass}`}</div>
118 
+        </Form.Item>
119 
+        <Form.Item {...tailFormItemLayout}>
120 
+          <Button loading={loading} type="primary" htmlType="submit">
121 
+            保存
122 
+          </Button>
123 
+          <Button style={{ marginLeft: "2em" }} onClick={onCancel}>
124 
+            取消
125 
+          </Button>
126 
+        </Form.Item>
127 
+      </Form>
128 
+    </Modal>
129 
+  );
130 
+};

+ 106
- 0
src/pages/custom/Edit.jsx Просмотреть файл 

@@ -0,0 +1,106 @@
1 
+import React, { useMemo } from "react";
2 
+import { Button, Card, Form, Input, Select } from "antd";
3 
+import useBool from "@/utils/hooks/useBool";
4 
+import { useSearchParams, useNavigate } from "react-router-dom";
5 
+import Page from "@/components/Page";
6 
+import { formItemLayout, tailFormItemLayout } from "@/utils/form";
7 
+import { postTaCustom, putTaCustom, getTaCustomById } from "@/services/taCustom";
8 
+const { Option } = Select;
9 
+
10 
+export default (props) => {
11 
+
12 
+  const [loading, startLoading, cancelLoading] = useBool();
13 
+  const [submiting, startSubmit, cancelSubmit] = useBool();
14 
+
15 
+  const [searchParams] = useSearchParams();
16 
+  const [form] = Form.useForm();
17 
+  const navigate = useNavigate();
18 
+
19 
+  const id = searchParams.get("id");
20 
+
21 
+  React.useEffect(() => {
22 
+    if (id) {
23 
+      getTaCustomById(id).then((res) => {
24 
+        form.setFieldsValue(res);
25 
+      })
26 
+    }
27 
+  })
28 
+
29 
+  const onFinish = (values) => {
30 
+    startSubmit();
31 
+    if (id) {
32 
+      //修改
33 
+      putTaCustom(id, values).then((res) => {
34 
+        cancelSubmit();
35 
+        navigate(-1);
36 
+      }).catch(() => {
37 
+        cancelSubmit();
38 
+      })
39 
+    } else {
40 
+      //新增
41 
+      postTaCustom(values).then((res) => {
42 
+        cancelSubmit();
43 
+        navigate(-1)
44 
+      }).catch(() => {
45 
+        cancelSubmit();
46 
+      })
47 
+    }
48 
+  }
49 
+
50 
+  return (
51 
+    <Page>
52 
+      <Card loading={loading}>
53 
+        <Form
54 
+          onFinish={onFinish}
55 
+          form={form}
56 
+          {...formItemLayout}
57 
+          scrollToFirstError
58 
+          style={{ maxWidth: "1000px" }}
59 
+        >
60 
+          <Form.Item
61 
+            name="customName"
62 
+            label="公司"
63 
+            rules={[
64 
+              {
65 
+                required: true,
66 
+                message: "请填写公司",
67 
+              },
68 
+            ]}
69 
+          >
70 
+            <Input placeholder="请输入公司" />
71 
+          </Form.Item>
72 
+          <Form.Item name="dutyParagraph" label="税号">
73 
+            <Input placeholder="请输入税号" />
74 
+          </Form.Item>
75 
+          <Form.Item name="openingBank" label="开户行">
76 
+            <Input placeholder="请输入" />
77 
+          </Form.Item>
78 
+          <Form.Item name="account" label="账号">
79 
+            <Input placeholder="请输入" />
80 
+          </Form.Item>
81 
+
82 
+          <Form.Item name="contactsName" label="联系人姓名">
83 
+            <Input placeholder="请输入" />
84 
+          </Form.Item>
85 
+          <Form.Item name="contactsTitle" label="联系人头衔">
86 
+            <Input placeholder="请输入" />
87 
+          </Form.Item>
88 
+          <Form.Item name="contactsPhone" label="联系人手机">
89 
+            <Input placeholder="请输入" />
90 
+          </Form.Item>
91 
+          <Form.Item name="contactsEmail" label="联系人邮箱">
92 
+            <Input placeholder="请输入" />
93 
+          </Form.Item>
94 
+          <Form.Item {...tailFormItemLayout}>
95 
+            <Button loading={submiting} type="primary" htmlType="submit">
96 
+              保存
97 
+            </Button>
98 
+            <Button style={{ marginLeft: "2em" }} onClick={() => navigate(-1)}>
99 
+              返回
100 
+            </Button>
101 
+          </Form.Item>
102 
+        </Form>
103 
+      </Card>
104 
+    </Page>
105 
+  );
106 
+};

+ 114
- 0
src/pages/custom/index.jsx Просмотреть файл 

@@ -0,0 +1,114 @@
1 
+import React from "react";
2 
+import { useNavigate } from "react-router-dom";
3 
+import { Button, Popconfirm, message } from "antd";
4 
+import { ProTable } from "@ant-design/pro-components";
5 
+import { queryTable, queryDict } from "@/utils/request";
6 
+import { getTaCustom, deleteTaCustom } from "@/services/taCustom";
7 
+import Page from "@/components/Page";
8 
+
9 
+const customList = queryTable(getTaCustom)
10 
+
11 
+
12 
+export default (props) => {
13 
+  const actionRef = React.useRef();
14 
+  const navigate = useNavigate();
15 
+
16 
+  const handleDelete = (id) => {
17 
+    if (id) {
18 
+      deleteTaCustom(id).then((res) => {
19 
+        actionRef.current.reload();
20 
+      })
21 
+    }
22 
+  }
23 
+
24 
+  const columns = [
25 
+    {
26 
+      title: "公司",
27 
+      dataIndex: "customName",
28 
+    },
29 
+    {
30 
+      title: "税号",
31 
+      dataIndex: "dutyParagraph",
32 
+      search: false,
33 
+    },
34 
+    {
35 
+      title: "开户行",
36 
+      search: false,
37 
+      dataIndex: "openingBank",
38 
+    },
39 
+    {
40 
+      title: "账号",
41 
+      dataIndex: "account",
42 
+      search: false,
43 
+    },
44 
+    {
45 
+      title: "联系人姓名",
46 
+      dataIndex: "contactsName",
47 
+    },
48 
+    {
49 
+      title: "联系人头衔",
50 
+      dataIndex: "contactsTitle",
51 
+      search: false,
52 
+    },
53 
+    {
54 
+      title: "联系人手机",
55 
+      dataIndex: "contactsPhone",
56 
+      search: false,
57 
+    },
58 
+    {
59 
+      title: "联系人邮箱",
60 
+      dataIndex: "contactsEmail",
61 
+      search: false,
62 
+    },
63 
+    {
64 
+      title: "操作",
65 
+      valueType: "option",
66 
+      width: 200,
67 
+      render: (_, record) => [
68 
+        <Button
69 
+          key={3}
70 
+          style={{ padding: 0 }}
71 
+          type="link"
72 
+          onClick={() => {
73 
+            navigate(`/custom/edit?id=${record.customId}`);
74 
+          }}
75 
+        >
76 
+          编辑
77 
+        </Button>,
78 
+        <Popconfirm
79 
+          key={4}
80 
+          title="您是否确认删除 ?"
81 
+          onConfirm={() => handleDelete(record.customId)}
82 
+          okText="确定"
83 
+          cancelText="取消"
84 
+        >
85 
+          <Button style={{ padding: 0 }} type="link">
86 
+            删除
87 
+          </Button>
88 
+        </Popconfirm>,
89 
+      ],
90 
+    },
91 
+  ];
92 
+
93 
+  return (
94 
+    <Page>
95 
+      <ProTable
96 
+        actionRef={actionRef}
97 
+        rowKey="customId"
98 
+        toolBarRender={() => [
99 
+          <Button
100 
+            key="1"
101 
+            type="primary"
102 
+            onClick={() => {
103 
+              navigate("/custom/edit");
104 
+            }}
105 
+          >
106 
+            新增
107 
+          </Button>,
108 
+        ]}
109 
+        request={customList}
110 
+        columns={columns}
111 
+      />
112 
+    </Page>
113 
+  );
114 
+};

+ 11
- 0
src/pages/login/Effect.jsx Просмотреть файл 

@@ -0,0 +1,11 @@
1 
+import React from "react";
2 
+
3 
+export default (props) => {
4 
+  return (
5 
+    <div className="login-effect-box">
6 
+      <div className="login-effect">
7 
+        <div className="login-effect-arc"></div>
8 
+      </div>
9 
+    </div>
10 
+  );
11 
+};

+ 187
- 0
src/pages/login/LoginForm.bak.jsx Просмотреть файл 

@@ -0,0 +1,187 @@
1 
+import React, { useEffect, useRef, useState } from "react";
2 
+import md5 from "md5";
3 
+import { Form } from "antd";
4 
+import { login, qrCode, postQrCode } from "@/services/login";
5 
+import { json, useSearchParams } from "react-router-dom";
6 
+import LoginUse from "./LoginUse";
7 
+import LoginQrcode from "./LoginQrcode.bak";
8 
+export default (props) => {
9 
+  const [searchParams] = useSearchParams();
10 
+  const appid = searchParams.get("appid");
11 
+  const { onSuccess, mode } = props;
12 
+  const [form] = Form.useForm();
13 
+  const [loading, setLoading] = useState(false);
14 
+  const [showLogin, setShowLogin] = useState(true);
15 
+  const [codeLapse, setCodeLapse] = useState(0); //0 未扫码,1 扫码, 2确认扫码 3取消扫码 4已删除
16 
+
17 
+  const qrcodeRef = useRef();
18 
+  const refData = useRef();
19 
+  useEffect(() => {
20 
+    getQrCode();
21 
+    console.log(refData);
22 
+  }, [refData.id]);
23 
+
24 
+  const onFinish = (values) => {
25 
+    const formData = new FormData();
26 
+    formData.append("name", values.name);
27 
+    formData.append("pwd", md5(values.pwd));
28 
+    if (mode) {
29 
+      formData.append("mode", mode);
30 
+    }
31 
+    formData.append("client", appid);
32 
+
33 
+    setLoading(true);
34 
+    login(formData)
35 
+      .then((res) => {
36 
+        onSuccess(res);
37 
+        setLoading(false);
38 
+      })
39 
+      .catch((err) => {
40 
+        console.log("----err--", err);
41 
+        setLoading(false);
42 
+      });
43 
+  };
44 
+
45 
+  const getQrCode = () => {
46 
+    qrCode({ client: appid || "authcenter" })
47 
+      .then((res) => {
48 
+        refData.current = res;
49 
+        createdCode(res);
50 
+        checkTimeUp();
51 
+
52 
+        console.log(res);
53 
+      })
54 
+      .catch((err) => {
55 
+        setCodeLapse(4);
56 
+      });
57 
+  };
58 
+
59 
+  const createdCode = (res) => {
60 
+    new QRCode(qrcodeRef.current, {
61 
+      width: 150,
62 
+      height: 150,
63 
+      text: res.qrCode,
64 
+      correctLevel: 3,
65 
+    });
66 
+  };
67 
+  /**
68 
+   * @param {*轮询方法}
69 
+   */
70 
+  //  检测二维码状态 业务代码
71 
+  const checkStatus = () => {
72 
+    const { current } = refData;
73 
+    return new Promise((resolve, reject) => {
74 
+      postQrCode(current.id, mode)
75 
+        .then((it) => {
76 
+          if (current.expire >= 0) {
77 
+            // 二维码还没有失效
78 
+            current.expire--;
79 
+            if (it.state == 0) {
80 
+              // console.log("未扫码");
81 
+              setCodeLapse(0);
82 
+              resolve();
83 
+            } else if (it.state == 1) {
84 
+              // console.log("已扫码");
85 
+              setCodeLapse(1);
86 
+              resolve();
87 
+            } else if (it.state == 3 || it.state == 4) {
88 
+              setCodeLapse(4);
89 
+              reject();
90 
+            } else if (it.token) {
91 
+              onSuccess(it);
92 
+            } else if (it == null) {
93 
+              console.log("null");
94 
+              setCodeLapse(4);
95 
+            }
96 
+          } else {
97 
+            // 二维码失效
98 
+            console.log("二维码失效");
99 
+            qrStop();
100 
+            setCodeLapse(4);
101 
+            reject();
102 
+          }
103 
+        })
104 
+        .catch((err) => {
105 
+          console.log(err);
106 
+          qrStop();
107 
+          setCodeLapse(4);
108 
+          reject();
109 
+        });
110 
+    });
111 
+  };
112 
+
113 
+  // 检测二维码状态 逻辑代码
114 
+  let time = useRef();
115 
+  const checkTimeUp = () => {
116 
+    checkStatus()
117 
+      .then(() => {
118 
+        // console.log("===================");
119 
+        // console.log("最上面的", time.current);
120 
+        time.current = setTimeout(() => {
121 
+          // console.log("上面的", time.current);
122 
+          if (time.current) {
123 
+            // console.log("下面的", time.current);
124 
+            console.log("我先清除一下定时器");
125 
+            clearTimeout(time.current);
126 
+            checkTimeUp();
127 
+          }
128 
+        }, 1000);
129 
+      })
130 
+      .catch(() => {
131 
+        if (time.current) {
132 
+          clearTimeout(time.current);
133 
+        }
134 
+      });
135 
+  };
136 
+
137 
+  // 删除二维码
138 
+  const qrStop = () => {
139 
+    if (qrcodeRef.current) {
140 
+      const idv = qrcodeRef.current.children;
141 
+      for (var i = idv.length - 1; i >= 0; i--) {
142 
+        qrcodeRef.current.removeChild(idv[i]);
143 
+      }
144 
+    } else {
145 
+      return;
146 
+    }
147 
+  };
148 
+  // 重新刷新二维码
149 
+  const onRenovate4 = () => {
150 
+    // 重新查询
151 
+    getQrCode();
152 
+    setCodeLapse(0);
153 
+  };
154 
+  // 重新刷新二维码
155 
+  const onRenovate1 = () => {
156 
+    // 重新查询
157 
+    clearTimeout(time.current);
158 
+    setCodeLapse(0);
159 
+    getQrCode();
160 
+  };
161 
+  // 切换账号登录
162 
+  const checkLoginUse = () => {
163 
+    setShowLogin(false);
164 
+    clearTimeout(time.current);
165 
+  };
166 
+  // 切换二维码登录
167 
+  const checkLoginwx = () => {
168 
+    setShowLogin(true);
169 
+    setCodeLapse(0);
170 
+    getQrCode();
171 
+  };
172 
+  return (
173 
+    <Form form={form} layout="vertical" onFinish={onFinish}>
174 
+      {showLogin ? (
175 
+        <LoginQrcode
176 
+          qrcodeRef={qrcodeRef}
177 
+          codeLapse={codeLapse}
178 
+          onRenovate4={onRenovate4}
179 
+          onRenovate1={onRenovate1}
180 
+          checkLoginUse={checkLoginUse}
181 
+        />
182 
+      ) : (
183 
+        <LoginUse loading={loading} checkLoginwx={checkLoginwx} />
184 
+      )}
185 
+    </Form>
186 
+  );
187 
+};

+ 51
- 0
src/pages/login/LoginForm.jsx Просмотреть файл 

@@ -0,0 +1,51 @@
1 
+import React from "react";
2 
+import md5 from "md5";
3 
+import { Button, Form, Input, Radio } from "antd";
4 
+import { login } from "@/services/login";
5 
+
6 
+export default (props) => {
7 
+  const { onSuccess, mode, appid } = props;
8 
+  const [form] = Form.useForm();
9 
+  const [loading, setLoading] = React.useState(false);
10 
+  const onFinish = (values) => {
11 
+
12 
+    setLoading(true);
13 
+    login(values)
14 
+      .then((res) => {
15 
+        setLoading(true);
16 
+        // console.log('res.user', res.user)
17 
+        onSuccess(res)
18 
+        setLoading(false);
19 
+      })
20 
+      .catch((err) => {
21 
+        // console.log('----err--', err);
22 
+        setLoading(false);
23 
+      });
24 
+
25 
+    setLoading(false);
26 
+  };
27 
+  return (
28 
+    <Form form={form} layout="vertical" onFinish={onFinish} style={{ width: '260px', marginTop: '24px', paddingBottom: '24px' }}>
29 
+      <Form.Item label="账户" name="account" rules={[{ required: true, message: '请输入账户' }]}>
30 
+        <Input placeholder="请输入账户" style={{ borderRadius: "4px" }} />
31 
+      </Form.Item>
32 
+      <Form.Item label="密 码" name="password" rules={[{ required: true, message: '请输入密码' }]}>
33 
+        <Input.Password
34 
+          placeholder="请输入密码"
35 
+          style={{ borderRadius: "4px" }}
36 
+        />
37 
+      </Form.Item>
38 
+      <Form.Item>
39 
+        <Button
40 
+          type="primary"
41 
+          size="large"
42 
+          style={{ width: "100%", marginTop: "24px", borderRadius: "4px" }}
43 
+          loading={loading}
44 
+          htmlType="submit"
45 
+        >
46 
+          登录
47 
+        </Button>
48 
+      </Form.Item>
49 
+    </Form>
50 
+  );
51 
+};

+ 67
- 0
src/pages/login/LoginQrcode.bak.jsx Просмотреть файл 

@@ -0,0 +1,67 @@
1 
+import React from "react";
2 
+import "./qrcode.less";
3 
+export default (props) => {
4 
+  const { qrcodeRef, codeLapse, onRenovate4, onRenovate1, checkLoginUse } =
5 
+    props;
6 
+  console.log(codeLapse);
7 
+
8 
+  return (
9 
+    <>
10 
+      <span className="pageUse" onClick={checkLoginUse}>
11 
+        使用账号登录
12 
+      </span>
13 
+      <div className="pageQr">
14 
+        {codeLapse == 0 ? (
15 
+          <div className="qrcode">
16 
+            <div className="qrBoder">
17 
+              <div ref={qrcodeRef}></div>
18 
+            </div>
19 
+            <span>微信扫一扫登录</span>
20 
+          </div>
21 
+        ) : codeLapse == 1 ? (
22 
+          <div className="loginSvg">
23 
+            <svg
24 
+              className="svg"
25 
+              width="74"
26 
+              height="74"
27 
+              viewBox="0 0 18 18"
28 
+              xmlns="http://www.w3.org/2000/svg"
29 
+            >
30 
+              <path
31 
+                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"
32 
+                fill="#09BB07"
33 
+                fillRule="evenodd"
34 
+              ></path>
35 
+              <path
36 
+                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"
37 
+                fill="#09BB07"
38 
+                fillRule="evenodd"
39 
+              ></path>
40 
+              <path
41 
+                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"
42 
+                fill="#09BB07"
43 
+                fillRule="evenodd"
44 
+              ></path>
45 
+            </svg>
46 
+            <span className="ScanningCode">已扫码成功</span>
47 
+
48 
+            <a className="newCode" onClick={onRenovate1}>
49 
+              重新扫码
50 
+            </a>
51 
+          </div>
52 
+        ) : codeLapse == 4 ? (
53 
+          <div className="loginPage">
54 
+            <div className="loginLap">
55 
+              <p>二维码已过期</p>
56 
+              <p>
57 
+                <a onClick={onRenovate4}>点击刷新</a>
58 
+              </p>
59 
+            </div>
60 
+          </div>
61 
+        ) : (
62 
+          <div></div>
63 
+        )}
64 
+      </div>
65 
+    </>
66 
+  );
67 
+};

+ 45
- 0
src/pages/login/LoginUse.jsx Просмотреть файл 

@@ -0,0 +1,45 @@
1 
+import React from "react";
2 
+import { Button, Form, Input } from "antd";
3 
+export default (props) => {
4 
+  const { loading, checkLoginwx } = props;
5 
+  console.log(loading);
6 
+  const style = {
7 
+    display: "flex",
8 
+    justifyContent: "flex-end",
9 
+    cursor: "pointer",
10 
+    color: "#576b95",
11 
+    position: "absolute",
12 
+    top: "0",
13 
+    right: "0",
14 
+    height: "33px",
15 
+    lineHeight: "33px",
16 
+  };
17 
+  return (
18 
+    <>
19 
+      <span style={style} onClick={checkLoginwx}>
20 
+        使用二维码登录
21 
+      </span>
22 
+
23 
+      <Form.Item label="用户名" name="name" required>
24 
+        <Input placeholder="请输入用户名" style={{ borderRadius: "4px" }} />
25 
+      </Form.Item>
26 
+      <Form.Item label="密 码" name="pwd" required>
27 
+        <Input.Password
28 
+          placeholder="请输入密码"
29 
+          style={{ borderRadius: "4px" }}
30 
+        />
31 
+      </Form.Item>
32 
+      <Form.Item>
33 
+        <Button
34 
+          type="primary"
35 
+          size="large"
36 
+          style={{ width: "100%", marginTop: "24px", borderRadius: "4px" }}
37 
+          loading={loading}
38 
+          htmlType="submit"
39 
+        >
40 
+          登录
41 
+        </Button>
42 
+      </Form.Item>
43 
+    </>
44 
+  );
45 
+};

+ 159
- 0
src/pages/login/components/LoginQrCode.jsx Просмотреть файл 

@@ -0,0 +1,159 @@
1 
+import React from 'react';
2 
+import { Button } from 'antd';
3 
+// import { qrCode, postQrCode } from "@/services/login";
4 
+import QrCode from './QrCode';
5 
+import SuccessIcon from './SuccessIcon';
6 
+import styles from './qrcode.module.less';
7 
+
8 
+// 轮询
9 
+const polling = (p, delay) => {
10 
+  let t = null;
11 
+  let cancelled = false;
12 
+
13 
+  const clearTicker = () => {
14 
+    if (t) {
15 
+      clearTimeout(t);
16 
+      t = null;
17 
+    }
18 
+  }
19 
+
20 
+  const cancel = () => {
21 
+    cancelled = true;
22 
+    clearTimeout(t);
23 
+  };
24 
+
25 
+  const fn = () => {
26 
+    p().then((done) => {
27 
+      clearTicker();
28 
+
29 
+      if (!done && !cancelled) {
30 
+        t = setTimeout(fn, delay);
31 
+      }
32 
+    }).catch(() => {
33 
+      clearTicker();
34 
+    });
35 
+  }
36 
+
37 
+  fn();
38 
+
39 
+  return cancel;
40 
+};
41 
+
42 
+export default (props) => {
43 
+  const { onSuccess, mode, appid } = props;
44 
+
45 
+  // 二维码是否初始化
46 
+  const [qrInited, setQrInited] = React.useState(false);
47 
+  // 是否扫码
48 
+  const [scaned, setScaned] = React.useState(false);
49 
+  // 二维码数据
50 
+  const [qrData, setQrData] = React.useState();
51 
+  // 是否发生错误
52 
+  const [hasError, setHasError] = React.useState(false);
53 
+  // 提示信息
54 
+  const [tips, setTips] = React.useState();
55 
+  // 停止轮询控制器
56 
+  const pollingCancel = React.useRef();
57 
+
58 
+  // 重新开始
59 
+  const onReset = () => {
60 
+    // 停止轮询
61 
+    if (pollingCancel.current) {
62 
+      pollingCancel.current();
63 
+    }
64 
+
65 
+    setQrInited(false);
66 
+    setScaned(false);
67 
+    setHasError(false);
68 
+  }
69 
+
70 
+  // 校验二维码各种状态
71 
+  // const checkQrCode = React.useCallback((qrId, params) => {
72 
+  //   return new Promise((resolve, reject) => {
73 
+  //     postQrCode(qrId, params).then(res => {
74 
+  //       // 带有 token 说明扫码登录成功
75 
+  //       if (res.token) {
76 
+  //         onSuccess(res);
77 
+  //         resolve(true);
78 
+  //         return ;
79 
+  //       } else {
80 
+  //         // state 与 stateLabels 是对应关系
81 
+  //         const { state } = res;
82 
+  //         const stateLabels = [
83 
+  //           '未扫码',
84 
+  //           '扫码成功, 请确认登录',
85 
+  //           '扫码确认',
86 
+  //           '已取消',
87 
+  //           '已删除',
88 
+  //         ]
89 
+
90 
+  //         const isError = state > 2;
91 
+  //         setScaned(state == 1);
92 
+  //         setHasError(isError);
93 
+  //         setTips(stateLabels[state]);
94 
+
95 
+  //         if (isError) {
96 
+  //           reject();
97 
+  //         } else {
98 
+  //           resolve();
99 
+  //         }
100 
+  //       }
101 
+  //     }).catch((err) => {
102 
+  //       console.error(err);
103 
+  //       setTips(err.data.msg || err.message || err);
104 
+
105 
+  //       setScaned(false);
106 
+  //       setHasError(true);
107 
+  //       reject();
108 
+  //     });
109 
+  //   });
110 
+  // }, []);
111 
+
112 
+  // 请求二维码
113 
+  // React.useEffect(() => {
114 
+  //   if (!qrInited) {
115 
+  //     qrCode({ client: appid || "authcenter" }).then(res => {
116 
+  //       setQrData(res);
117 
+  //       setQrInited(true);
118 
+
119 
+  //       // 开启轮询
120 
+  //       const fn = () => checkQrCode(res.id, { mode });
121 
+  //       pollingCancel.current = polling(fn, 1000);
122 
+  //     })
123 
+  //   }
124 
+  // }, [qrInited, mode]);
125 
+
126 
+  return (
127 
+    <div className={styles['qr-form']}>
128 
+      <div className={styles['qr-form-wrapper']}>
129 
+
130 
+        <div className={styles['qr-box']}>
131 
+          <QrCode text={qrData?.qrCode} />
132 
+        </div>
133 
+
134 
+        {
135 
+          (scaned || hasError) && (
136 
+            <div className={styles['status-box']}>
137 
+              <div>
138 
+                {
139 
+                  scaned && !hasError && <SuccessIcon />
140 
+                }
141 
+                <div className={styles['status-tip']}>{tips}</div>
142 
+                <Button type='link' onClick={onReset}>点击刷新</Button>
143 
+              </div>
144 
+            </div>
145 
+          )
146 
+        }
147 
+
148 
+      </div>
149 
+
150 
+      <div className={styles['tip-box']}>
151 
+        {
152 
+          qrInited && !hasError && (
153 
+            <div>请使用行信扫码登录</div>
154 
+          )
155 
+        }
156 
+      </div>
157 
+    </div>
158 
+  )
159 
+}

+ 28
- 0
src/pages/login/components/QrCode.jsx Просмотреть файл 

@@ -0,0 +1,28 @@
1 
+import React from 'react';
2 
+
3 
+export default (props) => {
4 
+  const { text, width = 200, height = 200 } = props;
5 
+
6 
+  const ref = React.useRef();
7 
+  const qrRef = React.useRef();
8 
+
9 
+  React.useEffect(() => {
10 
+    if (text) {
11 
+      if (qrRef.current) {
12 
+        qrRef.current.clear();
13 
+        qrRef.current.makeCode(text);
14 
+      } else {
15 
+        qrRef.current = new QRCode(ref.current, {
16 
+          text,
17 
+          width,
18 
+          height,
19 
+          correctLevel: QRCode.CorrectLevel.Q
20 
+        });
21 
+      }
22 
+    }
23 
+  }, [text, width, height]);
24 
+
25 
+  return (
26 
+    <div ref={ref}></div>
27 
+  )
28 
+}

+ 29
- 0
src/pages/login/components/SuccessIcon.jsx Просмотреть файл 

@@ -0,0 +1,29 @@
1 
+import React from 'react'
2 
+
3 
+export default (props) => {
4 
+  return (
5 
+    <svg
6 
+      className="svg"
7 
+      width="74"
8 
+      height="74"
9 
+      viewBox="0 0 18 18"
10 
+      xmlns="http://www.w3.org/2000/svg"
11 
+    >
12 
+      <path
13 
+        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"
14 
+        fill="#09BB07"
15 
+        fillRule="evenodd"
16 
+      ></path>
17 
+      <path
18 
+        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"
19 
+        fill="#09BB07"
20 
+        fillRule="evenodd"
21 
+      ></path>
22 
+      <path
23 
+        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"
24 
+        fill="#09BB07"
25 
+        fillRule="evenodd"
26 
+      ></path>
27 
+    </svg>
28 
+  )
29 
+}

+ 41
- 0
src/pages/login/components/qrcode.module.less Просмотреть файл 

@@ -0,0 +1,41 @@
1 
+
2 
+.qr-form {
3 
+  position: relative;
4 
+  line-height: 2em;
5 
+  text-align: center;
6 
+  margin-top: 24px;
7 
+
8 
+  .qr-form-wrapper {
9 
+    margin: 0 auto;
10 
+    width: 240px;
11 
+    height: 240px;
12 
+    display: grid;
13 
+    place-items: center;
14 
+  }
15 
+
16 
+  .qr-box {
17 
+    position: absolute;
18 
+    padding: 15px;
19 
+    box-sizing: border-box;
20 
+    border: 1px solid #e2e2e2;
21 
+    z-index: 1;
22 
+  }
23 
+
24 
+  .status-box {
25 
+    background: rgba(255, 255, 255, 0.98);
26 
+    position: relative;
27 
+    width: 100%;
28 
+    height: 100%;
29 
+    z-index: 10;
30 
+    display: grid;
31 
+    place-items: center;
32 
+
33 
+    .status-tip {
34 
+    }
35 
+  }
36 
+
37 
+  .tip-box {
38 
+    margin-top: 1em;
39 
+    letter-spacing: 1.4px;
40 
+  }
41 
+}

+ 34
- 0
src/pages/login/foo.js Просмотреть файл 

@@ -0,0 +1,34 @@
1 
+const { postQrCode } = require("@/services/login");
2 
+
3 
+const foo = (fp, delay) => {
4 
+
5 
+    let t = null;
6 
+
7 
+    const fn = () => {
8 
+        fp().then(() => {
9 
+            if (t) {
10 
+                clearTimeout(t);
11 
+            }
12 
+
13 
+            t = setTimeout(fn, delay);
14 
+        }).catch(() => {
15 
+            if (t) {
16 
+                clearTimeout(t);
17 
+            }
18 
+        });
19 
+    }
20 
+}
21 
+
22 
+const fp = () => {
23 
+    return new Promise((resovle, reject) => {
24 
+        postQrCode().then(() => {
25 
+            if (succes) {
26 
+                resovle()
27 
+            } else {
28 
+                reject()
29 
+            }
30 
+        }).catch(() => {
31 
+            reject()
32 
+        });
33 
+    });
34 
+}

+ 79
- 0
src/pages/login/index.jsx Просмотреть файл 

@@ -0,0 +1,79 @@
1 
+import React, { useEffect } from "react";
2 
+import { Button } from "antd";
3 
+import { Helmet } from "react-helmet";
4 
+import { useNavigate, useSearchParams } from "react-router-dom";
5 
+import { useModel } from "@/store";
6 
+import LoginForm from "./LoginForm";
7 
+import LoginQrCode from "./components/LoginQrCode";
8 
+// import LoginEffect from "./Effect";
9 
+import "./style.less";
10 
+
11 
+const year = new Date().getFullYear();
12 
+
13 
+export default (props) => {
14 
+  const { app } = useModel("system");
15 
+  const navigate = useNavigate();
16 
+  const [searchParams] = useSearchParams();
17 
+
18 
+  const baseUrl = import.meta.env.BASE_URL;
19 
+  const copyright = `${app.company} @ ${year}`;
20 
+
21 
+  const onChangeType = () => {
22 
+    setLoginType(loginType == 0 ? 1 : 0);
23 
+  }
24 
+
25 
+
26 
+  const onSuccess = ({ ticket }) => {
27 
+
28 
+    // console.log('ticket', ticket);
29 
+    if (searchParams.get("redirect")) {
30 
+      const redirect = decodeURIComponent(searchParams.get("redirect"));
31 
+      let href = "";
32 
+      if (redirect.indexOf("#") === -1) {
33 
+        href = redirect + `#/?ticket=${ticket}`;
34 
+      } else if (redirect.indexOf("?") > -1) {
35 
+        href = redirect + `ticket=${ticket}`;
36 
+      } else {
37 
+        href = redirect + `?ticket=${ticket}`;
38 
+      }
39 
+      window.location.href = href;
40 
+    } else if (searchParams.get("back")) {
41 
+      // console.log(navigate(-1), "---");
42 
+      navigate(-1);
43 
+      // navigate("/");
44 
+    } else {
45 
+      navigate("/");
46 
+    }
47 
+  };
48 
+
49 
+  return (
50 
+    <div className="login-page">
51 
+      <Helmet>
52 
+        <title>{app.fullName}</title>
53 
+      </Helmet>
54 
+      <div id="particles-js"></div>
55 
+      <div className="login-page-container">
56 
+        <div className="login-card">
57 
+          {/* <div className="login-card-left">
58 
+            <div className="login-form-box">
59 
+            </div>
60 
+            <div className="login-copyright">{copyright}</div>
61 
+          </div> */}
62 
+          <div className="login-card-right">
63 
+            {/* <div className="border-left"></div> */}
64 
+            <div className="login-form-box">
65 
+              <div className="login-form">
66 
+                <h2>
67 
+                  <span>密码登录</span>
68 
+                </h2>
69 
+                <LoginForm
70 
+                  onSuccess={onSuccess}
71 
+                />
72 
+              </div>
73 
+            </div>
74 
+          </div>
75 
+        </div>
76 
+      </div>
77 
+    </div>
78 
+  );
79 
+};

+ 77
- 0
src/pages/login/qrcode.less Просмотреть файл 

@@ -0,0 +1,77 @@
1 
+ .pageQr{
2 
+  position: relative;
3 
+  width: 180px;
4 
+  height: 180px;
5 
+  margin: 0 auto;
6 
+  // top: 50%;
7 
+  .loginPage,.loginSvg{
8 
+    display: table;
9 
+      position: absolute;
10 
+      top: 100%;
11 
+      left: 40%;
12 
+      text-align: center;
13 
+      width: 180px;
14 
+      height: 180px;
15 
+      margin-left: -61px;
16 
+      margin-top: -132px;
17 
+      background-color: #fffffff5;
18 
+      .loginLap{
19 
+        display: table-cell;
20 
+    vertical-align: middle;
21 
+      }
22 
+
23 
+  }
24 
+
25 
+  .loginSvg{
26 
+.ScanningCode{
27 
+  display: block;
28 
+  // cursor: pointer;
29 
+}
30 
+
31 
+  }
32 
+  .newCode{
33 
+    position: absolute;
34 
+    top: 100%;
35 
+    right: 37%;
36 
+    cursor: pointer;
37 
+    color: #576b95;
38 
+    text-decoration: none;
39 
+  }
40 
+  .qrcode{
41 
+    width: 178px;
42 
+    height: 150px;
43 
+    margin: auto;
44 
+    position: absolute;
45 
+    top: 30%;
46 
+    span{
47 
+      display: block;
48 
+      text-align: center;
49 
+      padding-top:10px ;
50 
+    }
51 
+    .qrBoder{
52 
+      box-sizing: border-box;
53 
+    border: 1px solid #e2e2e2;
54 
+    width: 180px;
55 
+    height: 180px;
56 
+    text-align: -webkit-center;
57 
+    img{
58 
+      position: absolute;
59 
+    top: 10%;
60 
+    right: 6%;
61 
+    }
62 
+    }
63 
+  }
64 
+ }
65 
+
66 
+ .pageUse{
67 
+  display: flex;
68 
+  justify-content: flex-end;
69 
+  cursor: pointer;
70 
+  color: #576b95;
71 
+
72 
+  position: absolute;
73 
+  top: 0;
74 
+  right: 0;
75 
+  height: 33px;
76 
+  line-height: 33px;
77 
+}

+ 118
- 0
src/pages/login/style.less Просмотреть файл 

@@ -0,0 +1,118 @@
1 
+.login-page {
2 
+  height: 100%;
3 
+  background: linear-gradient(#fff, #e6f7ff);
4 
+
5 
+  #particles-js {
6 
+    position: absolute;
7 
+    top: 0;
8 
+    left: 0;
9 
+    width: 100%;
10 
+    height: 100%;
11 
+  }
12 
+
13 
+  .login-page-container {
14 
+    height: 100%;
15 
+    display: grid;
16 
+    place-items: center;
17 
+    position: relative;
18 
+    z-index: 10;
19 
+  }
20 
+
21 
+  .login-card {
22 
+    width: 900px;
23 
+    // height: 600px;
24 
+    border-radius: 12px;
25 
+    overflow: hidden;
26 
+    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
27 
+
28 
+    // display: grid;
29 
+    // grid-template-columns: 1fr 1fr;
30 
+  }
31 
+
32 
+  .login-card-left {
33 
+    background: rgba(255, 255, 255, 0.6);
34 
+    backdrop-filter: blur(4px);
35 
+  }
36 
+  .login-card-right {
37 
+    background: rgba(255, 255, 255, 0.6);
38 
+    backdrop-filter: blur(4px);
39 
+    position: relative;
40 
+    // background: rgba(239, 246, 250, .85);
41 
+  }
42 
+
43 
+  .border-left {
44 
+    position: absolute;
45 
+    border-left: 1px solid #ccc;
46 
+    border-right: 1px solid #fff;
47 
+    width: 4px;
48 
+    height: 80%;
49 
+    left: 0px;
50 
+    top: 10%;
51 
+  }
52 
+
53 
+  .login-form-box {
54 
+    height: 560px;
55 
+    display: grid;
56 
+    place-items: center;
57 
+
58 
+    .login-form {
59 
+      min-width: 280px;
60 
+      position: absolute;
61 
+
62 
+      & > h2 {
63 
+        text-align: center;
64 
+        letter-spacing: 2px;
65 
+      }
66 
+      .ant-form-vertical {
67 
+        margin-left: 24px;
68 
+      }
69 
+    }
70 
+
71 
+    .login-subtitle {
72 
+      font-size: 0.9em;
73 
+      color: #666;
74 
+      margin-bottom: 24px;
75 
+      letter-spacing: 2px;
76 
+    }
77 
+  }
78 
+
79 
+  .login-effect-box {
80 
+    height: 100%;
81 
+    display: grid;
82 
+    place-items: center;
83 
+
84 
+    .login-effect {
85 
+      width: 180px;
86 
+      height: 180px;
87 
+      position: relative;
88 
+    }
89 
+
90 
+    .login-effect-arc {
91 
+      width: 100%;
92 
+      height: 100%;
93 
+      border-radius: 50%;
94 
+      background-color: #fa8c16;
95 
+
96 
+      &::after {
97 
+        content: '';
98 
+        width: 200%;
99 
+        height: 100%;
100 
+        top: 50%;
101 
+        left: -50%;
102 
+        position: absolute;
103 
+        z-index: 10;
104 
+        background-color: rgba(255, 255, 255, 0.001);
105 
+        backdrop-filter: blur(16px);
106 
+        border-top: 1px solid rgba(255, 255, 255, 0.2);
107 
+      }
108 
+    }
109 
+  }
110 
+
111 
+  .login-copyright {
112 
+    font-size: 12px;
113 
+    color: #666;
114 
+    line-height: 40px;
115 
+    padding-left: 20px;
116 
+    box-sizing: border-box;
117 
+  }
118 
+}

+ 151
- 0
src/pages/project/Edit.jsx Просмотреть файл 

@@ -0,0 +1,151 @@
1 
+import React, { useMemo } from "react";
2 
+import { Button, Card, Form, DatePicker, Input, Select } from "antd";
3 
+import useBool from "@/utils/hooks/useBool";
4 
+import { useSearchParams, useNavigate } from "react-router-dom";
5 
+import Page from "@/components/Page";
6 
+import { formItemLayout, tailFormItemLayout } from "@/utils/form";
7 
+import { postTaProject, putTaProject, getTaProjectById } from "@/services/project";
8 
+import moment from 'moment'
9 
+const { Option } = Select;
10 
+
11 
+export default (props) => {
12 
+
13 
+  const [loading, startLoading, cancelLoading] = useBool();
14 
+  const [submiting, startSubmit, cancelSubmit] = useBool();
15 
+
16 
+  const [searchParams] = useSearchParams();
17 
+  const [form] = Form.useForm();
18 
+  const navigate = useNavigate();
19 
+
20 
+  const id = searchParams.get("id");
21 
+
22 
+  React.useEffect(() => {
23 
+    if (id) {
24 
+      getTaProjectById(id).then((res) => {
25 
+        // const startTime = res.startTime ? { startTime: moment(res.startTime) } : undefined;
26 
+        // const endTime = res.endTime ? { endTime: moment(res.endTime) } : undefined;
27 
+        // form.setFieldsValue({ ...res, startTime, endTime });
28 
+        // console.log('-------res', { ...res, startTime, endTime })
29 
+        form.setFieldsValue({ ...res, startTime: res.startTime ? moment(res.startTime) : undefined, endTime: res.endTime ? moment(res.endTime) : undefined });
30 
+      })
31 
+    }
32 
+  }, [id])
33 
+
34 
+  const onFinish = (values) => {
35 
+    const startTime = values.startTime ? moment(values.startTime).format("YYYY-MM-DD HH:mm:ss") : undefined;
36 
+    const endTime = values.endTime ? moment(values.endTime).format("YYYY-MM-DD HH:mm:ss") : undefined;
37 
+    startSubmit();
38 
+    if (id) {
39 
+      // console.log('startTime,...values', { ...values, startTime, endTime })
40 
+      //更新
41 
+      putTaProject(id, { ...values, startTime, endTime }).then((res) => {
42 
+        cancelSubmit();
43 
+        navigate(-1)
44 
+      }).catch(() => {
45 
+        cancelSubmit();
46 
+      })
47 
+    } else {
48 
+      //新增
49 
+      postTaProject(values).then((res) => {
50 
+        cancelSubmit();
51 
+        navigate(-1)
52 
+      }).catch(() => {
53 
+        cancelSubmit();
54 
+      })
55 
+    }
56 
+  }
57 
+
58 
+  return (
59 
+    <Page>
60 
+      <Card loading={loading}>
61 
+        <Form
62 
+          onFinish={onFinish}
63 
+          form={form}
64 
+          {...formItemLayout}
65 
+          scrollToFirstError
66 
+          style={{ maxWidth: "1000px" }}
67 
+        >
68 
+          <Form.Item
69 
+            name="projectName"
70 
+            label="项目名称"
71 
+            rules={[
72 
+              {
73 
+                required: true,
74 
+                message: "请填写项目名称",
75 
+              },
76 
+            ]}
77 
+          >
78 
+            <Input placeholder="请输入项目名称" />
79 
+          </Form.Item>
80 
+          <Form.Item name="introduction" label="简介">
81 
+            <Input placeholder="请输入简介" />
82 
+          </Form.Item>
83 
+          <Form.Item name="startTime" label="开始日期">
84 
+            <DatePicker placeholder="请选择" style={{ width: '100%' }} locale />
85 
+          </Form.Item>
86 
+          <Form.Item name="endTime" label="结束日期">
87 
+            <DatePicker placeholder="请选择" style={{ width: '100%' }} locale />
88 
+          </Form.Item>
89 
+
90 
+          <Form.Item name="quotation" label="合同报价">
91 
+            <Input placeholder="请输入" />
92 
+          </Form.Item>
93 
+          <Form.Item name="stage" label="目前阶段">
94 
+            <Input placeholder="请输入" />
95 
+          </Form.Item>
96 
+          <Form.Item name="contactsName" label="联系人姓名">
97 
+            <Input placeholder="请输入" />
98 
+          </Form.Item>
99 
+          <Form.Item name="contactsTitle" label="联系人头衔">
100 
+            <Input placeholder="请输入" />
101 
+          </Form.Item>
102 
+
103 
+          <Form.Item name="contactsPhone" label="联系人手机">
104 
+            <Input placeholder="请输入" />
105 
+          </Form.Item>
106 
+          <Form.Item name="contactsEmail" label="联系人邮箱">
107 
+            <Input placeholder="请输入" />
108 
+          </Form.Item>
109 
+          <Form.Item name="headPerson" label="负责人">
110 
+            <Input placeholder="请输入" />
111 
+          </Form.Item>
112 
+          <Form.Item name="serviceIsp" label="服务运营商">
113 
+            <Input placeholder="请输入" />
114 
+          </Form.Item>
115 
+          <Form.Item name="hostMachine" label="主机">
116 
+            <Input placeholder="请输入" />
117 
+          </Form.Item>
118 
+          <Form.Item name="dataBase" label="数据库">
119 
+            <Input placeholder="请输入" />
120 
+          </Form.Item>
121 
+
122 
+          <Form.Item name="oss" label="OSS">
123 
+            <Input placeholder="请输入" />
124 
+          </Form.Item>
125 
+          <Form.Item name="webUrl" label="前端地址">
126 
+            <Input placeholder="请输入" />
127 
+          </Form.Item>
128 
+          <Form.Item name="account" label="账户">
129 
+            <Input placeholder="请输入" />
130 
+          </Form.Item>
131 
+          <Form.Item name="password" label="密码">
132 
+            <Input placeholder="请输入" />
133 
+          </Form.Item>
134 
+
135 
+          <Form.Item name="customId" label="客户ID">
136 
+            <Input placeholder="请输入" />
137 
+          </Form.Item>
138 
+
139 
+          <Form.Item {...tailFormItemLayout}>
140 
+            <Button loading={submiting} type="primary" htmlType="submit">
141 
+              保存
142 
+            </Button>
143 
+            <Button style={{ marginLeft: "2em" }} onClick={() => navigate(-1)}>
144 
+              返回
145 
+            </Button>
146 
+          </Form.Item>
147 
+        </Form>
148 
+      </Card>
149 
+    </Page>
150 
+  );
151 
+};

+ 133
- 0
src/pages/project/index.jsx Просмотреть файл 

@@ -0,0 +1,133 @@
1 
+import React from "react";
2 
+import { useNavigate } from "react-router-dom";
3 
+import { Button, Popconfirm } from "antd";
4 
+import List from "@/components/Page/List";
5 
+import { getTaProject, deleteTaProject } from "@/services/project";
6 
+
7 
+
8 
+
9 
+export default (props) => {
10 
+  const actionRef = React.useRef();
11 
+  const navigate = useNavigate();
12 
+
13 
+  const columns = [
14 
+    {
15 
+      title: "项目名称",
16 
+      dataIndex: "projectName",
17 
+    },
18 
+    {
19 
+      title: "简介",
20 
+      dataIndex: "introduction",
21 
+      search: false,
22 
+    },
23 
+    {
24 
+      title: "开始日期",
25 
+      search: false,
26 
+      dataIndex: "startTime",
27 
+    },
28 
+    {
29 
+      title: "结束日期",
30 
+      dataIndex: "endTime",
31 
+      search: false,
32 
+    },
33 
+    {
34 
+      title: "合同报价",
35 
+      dataIndex: "quotation",
36 
+      search: false,
37 
+    },
38 
+    {
39 
+      title: "目前阶段",
40 
+      dataIndex: "stage",
41 
+      search: false,
42 
+    },
43 
+    {
44 
+      title: "联系人姓名",
45 
+      dataIndex: "contactsName",
46 
+    },
47 
+    {
48 
+      title: "联系人头衔",
49 
+      dataIndex: "contactsTitle",
50 
+      search: false,
51 
+    },
52 
+
53 
+    {
54 
+      title: "联系人手机",
55 
+      dataIndex: "contactsPhone",
56 
+    },
57 
+    {
58 
+      title: "联系人邮箱",
59 
+      dataIndex: "contactsEmail",
60 
+      search: false,
61 
+    },
62 
+    {
63 
+      title: "负责人",
64 
+      dataIndex: "headPerson",
65 
+      search: false,
66 
+    },
67 
+    {
68 
+      title: "服务运营商",
69 
+      dataIndex: "serviceIsp",
70 
+      search: false,
71 
+    },
72 
+
73 
+    {
74 
+      title: "主机",
75 
+      dataIndex: "hostMachine",
76 
+      search: false,
77 
+    },
78 
+    {
79 
+      title: "数据库",
80 
+      dataIndex: "dataBase",
81 
+      search: false,
82 
+    },
83 
+    {
84 
+      title: "OSS",
85 
+      dataIndex: "oss",
86 
+      search: false,
87 
+    },
88 
+    {
89 
+      title: "前端地址",
90 
+      dataIndex: "webUrl",
91 
+      search: false,
92 
+    },
93 
+
94 
+    {
95 
+      title: "账户",
96 
+      dataIndex: "account",
97 
+      search: false,
98 
+    },
99 
+    {
100 
+      title: "密码",
101 
+      dataIndex: "password",
102 
+      render: (_, row) => row?.password.replace(row.password, '******'),
103 
+      search: false,
104 
+    },
105 
+  ];
106 
+
107 
+  const onAdd = () => {
108 
+    navigate(`/project/Edit`);
109 
+  }
110 
+
111 
+  const onDelete = (row) => {
112 
+    deleteTaProject(row.projectId).then(() => {
113 
+      actionRef.current.reload();
114 
+    })
115 
+  }
116 
+
117 
+  const onEdit = (row) => {
118 
+    navigate(`/project/Edit?id=${row.projectId}`);
119 
+  }
120 
+
121 
+  return (
122 
+    <List
123 
+      actionRef={actionRef}
124 
+      rowKey="projectId"
125 
+      scroll={{ x: 3000 }}
126 
+      columns={columns}
127 
+      onAdd={onAdd}
128 
+      onDelete={onDelete}
129 
+      onEdit={onEdit}
130 
+      request={getTaProject}
131 
+    />
132 
+  );
133 
+};

+ 87
- 0
src/pages/role/components/Empower.jsx Просмотреть файл 

@@ -0,0 +1,87 @@
1 
+import React from 'react';
2 
+
3 
+import { Card, Checkbox, Button, Space } from 'antd';
4 
+import { getSysApp } from "@/services/sysapp";
5 
+import useBool from "@/utils/hooks/useBool";
6 
+import { getSysUserRole } from "@/services/sysuserrole";
7 
+import { getRoleResource, postSysRoleResource } from "@/services/sysroleresource";
8 
+
9 
+export default (props) => {
10 
+  const { role } = props;
11 
+
12 
+  const [values, setValues] = React.useState([]);
13 
+  const [appList, setAppList] = React.useState([]);
14 
+
15 
+  const title = role ? `${role.name} - 授权应用` : "未选角色 - 授权应用";
16 
+  const [loading, startLoading, cancelLoading] = useBool();
17 
+
18 
+  React.useEffect(() => {
19 
+    getSysApp({ pageSize: 500 })
20 
+      .then((res = []) => {
21 
+        setAppList(res?.records);
22 
+      })
23 
+  }, [])
24 
+
25 
+  const onSubmit = () => {
26 
+    // 如果一个都不选，代表清空授权
27 
+    const roleId = role.roleId;
28 
+
29 
+    const data = values.map(x => ({
30 
+      resourceId: x,
31 
+      roleId,
32 
+    }));
33 
+
34 
+    startLoading();
35 
+    postSysRoleResource({ roleId }, data)
36 
+      .then((res) => {
37 
+        cancelLoading();
38 
+      })
39 
+      .catch(() => {
40 
+        cancelLoading();
41 
+      });
42 
+  };
43 
+
44 
+  React.useEffect(() => {
45 
+    //授权应用查询
46 
+    if (role?.roleId) {
47 
+      const roleId = role?.roleId;
48 
+
49 
+      startLoading();
50 
+      getRoleResource({ roleId }).then((res) => {
51 
+        cancelLoading();
52 
+        setValues(res.records.map((x) => x.resourceId))
53 
+      }).catch(() => {
54 
+        cancelLoading();
55 
+      })
56 
+    }
57 
+  }, [role?.roleId])
58 
+
59 
+  return (
60 
+    <Card
61 
+      loading={loading}
62 
+      title={title}
63 
+      extra={
64 
+        <Button
65 
+          type="primary"
66 
+          disabled={!role || !role.roleId}
67 
+          ghost
68 
+          onClick={onSubmit}
69 
+        >
70 
+          保存
71 
+        </Button>
72 
+      }
73 
+    >
74 
+      <Checkbox.Group value={values} onChange={setValues} disabled={!role?.roleId}>
75 
+        {
76 
+          appList.map((item) => {
77 
+            return (
78 
+              <div key={item.appId} style={{ lineHeight: '2em' }}>
79 
+                <Checkbox value={item.appId}>{item.appName}</Checkbox>
80 
+              </div>
81 
+            )
82 
+          })
83 
+        }
84 
+      </Checkbox.Group>
85 
+    </Card>
86 
+  )
87 
+}

+ 27
- 0
src/pages/role/index.jsx Просмотреть файл 

@@ -0,0 +1,27 @@
1 
+import React from 'react';
2 
+import { Row, Col } from 'antd';
3 
+import Page from '@/components/Page';
4 
+import RoleList from './list';
5 
+import MenuList from './menus';
6 
+import Empower from './components/Empower';
7 
+
8 
+
9 
+export default (props) => {
10 
+
11 
+  const [current, setCurrent] = React.useState();
12 
+
13 
+
14 
+  return (
15 
+    <Page>
16 
+      <Row gutter={24}>
17 
+        <Col span={8}>
18 
+          <RoleList onChange={setCurrent} current={current} />
19 
+        </Col>
20 
+        <Col span={16}>
21 
+          {/* <MenuList role={current} /> */}
22 
+          <Empower role={current} />
23 
+        </Col>
24 
+      </Row>
25 
+    </Page>
26 
+  )
27 
+}

+ 169
- 0
src/pages/role/list.jsx Просмотреть файл 

@@ -0,0 +1,169 @@
1 
+import React from "react";
2 
+import { Button, Input, List, Popconfirm, Spin, Modal, message } from "antd";
3 
+import useBool from "@/utils/hooks/useBool";
4 
+import classNames from "classnames";
5 
+import {
6 
+  getSysRole,
7 
+  postSysRole,
8 
+  putSysRole,
9 
+  deleteSysRole,
10 
+} from "@/services/sysrole";
11 
+import "./style.less";
12 
+
13 
+const Header = (props) => {
14 
+  return (
15 
+    <div className="role-list-header">
16 
+      <div className="role-list-header-body">{props.children}</div>
17 
+      <div className="role-list-header-action">{props.action}</div>
18 
+    </div>
19 
+  );
20 
+};
21 
+
22 
+export default (props) => {
23 
+  const { current, onChange } = props;
24 
+
25 
+  const [loading, startLoading, cancelLoading] = useBool();
26 
+  const [visible, openModel, hideModel] = useBool();
27 
+  const [finished, setFinished] = React.useState(false);
28 
+  const [inText, setInText] = React.useState();
29 
+  const [list, setList] = React.useState([]);
30 
+
31 
+  const onAdd = () => {
32 
+    openModel();
33 
+    setInText();
34 
+    onChange();
35 
+  };
36 
+
37 
+  const onEdit = (item) => {
38 
+    openModel();
39 
+    setInText(item.name);
40 
+    onChange(item);
41 
+  };
42 
+
43 
+  const onDelete = (item) => {
44 
+    startLoading();
45 
+    // 删除角色
46 
+    deleteSysRole(item.roleId)
47 
+      .then(() => {
48 
+        setList(list.filter((x) => x.roleId !== item.roleId));
49 
+        cancelLoading();
50 
+        hideModel();
51 
+        onChange();
52 
+      })
53 
+      .catch(() => {
54 
+        cancelLoading();
55 
+      });
56 
+  };
57 
+
58 
+  const handleOk = () => {
59 
+    if (!inText) {
60 
+      message.warn("请输入角色名称");
61 
+      return;
62 
+    }
63 
+    startLoading();
64 
+    const data = { name: inText };
65 
+
66 
+    if (current) {
67 
+      // 修改角色
68 
+      putSysRole(current.roleId, data)
69 
+        .then((res) => {
70 
+          setList(list.map((x) => (x.roleId === current.roleId ? res : x)));
71 
+          cancelLoading();
72 
+          hideModel();
73 
+        })
74 
+        .catch(() => {
75 
+          cancelLoading();
76 
+        });
77 
+    } else {
78 
+      // 新增角色
79 
+      postSysRole(data)
80 
+        .then((res) => {
81 
+          setList([res].concat(list));
82 
+          cancelLoading();
83 
+          hideModel();
84 
+          onChange(res);
85 
+        })
86 
+        .catch(() => {
87 
+          cancelLoading();
88 
+        });
89 
+    }
90 
+  };
91 
+
92 
+  const handleCancel = () => {
93 
+    if (loading) {
94 
+      return;
95 
+    }
96 
+
97 
+    hideModel();
98 
+  };
99 
+
100 
+  const queryRoles = React.useCallback((params) => {
101 
+    startLoading();
102 
+    getSysRole(params)
103 
+      .then((res) => {
104 
+        setList(res.records);
105 
+        cancelLoading();
106 
+        setFinished(res.current >= res.pages);
107 
+      })
108 
+      .catch(() => {
109 
+        cancelLoading();
110 
+      });
111 
+  }, []);
112 
+
113 
+  React.useEffect(() => {
114 
+    queryRoles({ pageNum: 1, pageSize: 500 });
115 
+  }, []);
116 
+
117 
+  return (
118 
+    <Spin spinning={loading}>
119 
+      <List
120 
+        header={
121 
+          <Header
122 
+            action={
123 
+              <Button type="primary" onClick={onAdd}>
124 
+                新增
125 
+              </Button>
126 
+            }
127 
+          >
128 
+            角色列表
129 
+          </Header>
130 
+        }
131 
+        style={{ background: "#fff" }}
132 
+        bordered
133 
+        dataSource={list}
134 
+        renderItem={(item) => (
135 
+          <List.Item
136 
+            className={classNames("role-list-item", {
137 
+              active: current && current.roleId === item.roleId,
138 
+            })}
139 
+            onClick={() => onChange(item)}
140 
+            actions={[
141 
+              <Button key="edit" type="link" onClick={() => onEdit(item)}>
142 
+                编辑
143 
+              </Button>,
144 
+              <Popconfirm
145 
+                key="delete"
146 
+                title="确认删除?"
147 
+                onConfirm={() => onDelete(item)}
148 
+              >
149 
+                <Button type="link" danger>
150 
+                  删除
151 
+                </Button>
152 
+              </Popconfirm>,
153 
+            ]}
154 
+          >
155 
+            {item.name}
156 
+          </List.Item>
157 
+        )}
158 
+      />
159 
+      <Modal
160 
+        title="请输入角色名称"
161 
+        open={visible}
162 
+        onOk={handleOk}
163 
+        onCancel={handleCancel}
164 
+      >
165 
+        <Input value={inText} onChange={(e) => setInText(e.target.value)} />
166 
+      </Modal>
167 
+    </Spin>
168 
+  );
169 
+};

+ 163
- 0
src/pages/role/menus.jsx Просмотреть файл 

@@ -0,0 +1,163 @@
1 
+import React from "react";
2 
+import { Button, Card, Tree, message } from "antd";
3 
+import useBool from "@/utils/hooks/useBool";
4 
+import { arr2Tree } from "@/utils/array";
5 
+import { getSysResource } from "@/services/sysresource";
6 
+import {
7 
+  authRoleResource,
8 
+  authRoleResourced,
9 
+} from "@/services/sysroleresource";
10 
+
11 
+export default (props) => {
12 
+  const { role } = props;
13 
+
14 
+  const [loading, startLoading, cancelLoading] = useBool();
15 
+  const [list, setList] = React.useState([]);
16 
+  const [expandedKeys, setExpandedKeys] = React.useState([]);
17 
+  const [treeData, setTreeData] = React.useState([]);
18 
+  const treeDictRef = React.useRef();
19 
+  const [checkedKeys, setCheckedKeys] = React.useState({
20 
+    checked: [],
21 
+    halfChecked: [],
22 
+  });
23 
+  const keys = checkedKeys.checked.concat(checkedKeys.halfChecked);
24 
+  console.log('expandedKeys', expandedKeys);
25 
+
26 
+  const title = role ? `${role.name} - 授权菜单` : "未选角色 - 授权菜单";
27 
+  // console.log('title', title)
28 
+
29 
+  const getListData = () => {
30 
+    return new Promise((resolve, reject) => {
31 
+      getSysResource({ typeCode: "menu" })
32 
+        .then((res = []) => {
33 
+          setList(res?.records);
34 
+          resolve(res?.records);
35 
+        })
36 
+        .catch(reject);
37 
+    });
38 
+  };
39 
+
40 
+  const onCheck = (keys, { halfCheckedKeys }) => {
41 
+    setCheckedKeys({ checked: keys, halfChecked: halfCheckedKeys });
42 
+  };
43 
+
44 
+  // console.log('checkedKeys', checkedKeys)
45 
+  // console.log('keys', keys)
46 
+
47 
+  const onSubmit = () => {
48 
+    // 如果一个都不选，代表清空授权
49 
+    const data = [];
50 
+    const roleId = role.roleId;
51 
+    for (let resourceId of keys) {
52 
+      data.push({ roleId, resourceId });
53 
+    }
54 
+    startLoading();
55 
+    authRoleResource(roleId, data)
56 
+      .then((res) => {
57 
+        cancelLoading();
58 
+      })
59 
+      .catch(() => {
60 
+        cancelLoading();
61 
+      });
62 
+  };
63 
+
64 
+  React.useEffect(() => {
65 
+    const p = !list.length ? getListData : () => Promise.resolve(list);
66 
+    if (!role || !role.roleId) {
67 
+      p();
68 
+    } else {
69 
+      startLoading();
70 
+      p()
71 
+        .then((allData) => {
72 
+          authRoleResourced(role.roleId, { typeCode: "menu" })
73 
+            .then((res = []) => {
74 
+              cancelLoading();
75 
+              // 数据分为2部分, 一部分叶子节点, 一部分非叶子节点
76 
+              const checked = [],
77 
+                halfChecked = [];
78 
+              for (let item of res) {
79 
+                // 获取子节点, 没有的话则为叶子节点, 否则为非叶子节点
80 
+                const children = allData.filter(
81 
+                  (x) => x.parentId === item.resourceId
82 
+                );
83 
+                if (!children.length) {
84 
+                  // 没有子节点, 则为叶子节点, 算入选中节点
85 
+                  checked.push(item.resourceId);
86 
+                } else {
87 
+                  // 获取选中子节点
88 
+                  const checkedChildren = res.filter(
89 
+                    (x) => x.parentId === item.resourceId
90 
+                  );
91 
+                  if (checkedChildren.length === children.length) {
92 
+                    // 非叶子节点如果 子节点全部包含, 那么算入选中节点
93 
+                    checked.push(item.resourceId);
94 
+                  } else {
95 
+                    halfChecked.push(item.resourceId);
96 
+                  }
97 
+                }
98 
+              }
99 
+              setCheckedKeys({ checked, halfChecked });
100 
+            })
101 
+            .catch(() => {
102 
+              cancelLoading();
103 
+            });
104 
+        })
105 
+        .catch(() => {
106 
+          cancelLoading();
107 
+        });
108 
+    }
109 
+  }, [role]);
110 
+
111 
+  React.useEffect(() => {
112 
+    // 展开节点
113 
+    setExpandedKeys(
114 
+      list.filter((x) => x.parentId === "-1").map((x) => x.resourceId)
115 
+    );
116 
+    // 先转为需要的格式
117 
+    const arr = list.map((x) => ({
118 
+      title: x.name,
119 
+      key: x.resourceId,
120 
+      parentId: x.parentId,
121 
+    }));
122 
+    // 再转为 tree
123 
+    const [tree, dict] = arr2Tree(arr);
124 
+    setTreeData(tree);
125 
+    treeDictRef.current = dict;
126 
+  }, [list]);
127 
+
128 
+  // console.log('checkedKeys.checked', checkedKeys.checked)
129 
+  return (
130 
+    <Card
131 
+      loading={loading}
132 
+      title={title}
133 
+      extra={
134 
+        <Button
135 
+          type="primary"
136 
+          disabled={!role || !role.roleId}
137 
+          ghost
138 
+          onClick={onSubmit}
139 
+        >
140 
+          保存
141 
+        </Button>
142 
+      }
143 
+    >
144 
+      <Tree
145 
+        checkable
146 
+        autoExpandParent
147 
+        expandedKeys={expandedKeys}
148 
+        checkStrictly={false}
149 
+        selectable={false}
150 
+        checkedKeys={checkedKeys}
151 
+        onCheck={onCheck}
152 
+        onExpand={setExpandedKeys}
153 
+        treeData={treeData}
154 
+      />
155 
+    </Card>
156 
+  );
157 
+};
158 
+
159 
+// function getKeysWithParent(node, dict) {
160 
+//   if (node.parentId === -1) return [node.key];
161 
+//   const parentKeys = getKeysWithParent(dict[node.parentId], dict);
162 
+//   return parentKeys ? [node.key].concat(parentKeys) : [node.key];
163 
+// }

+ 19
- 0
src/pages/role/style.less Просмотреть файл 

@@ -0,0 +1,19 @@
1 
+
2 
+.role-list-header {
3 
+  width: 100%;
4 
+  display: flex;
5 
+
6 
+  .role-list-header-body {
7 
+    flex: 1;
8 
+  }
9 
+
10 
+  .role-list-header-action {
11 
+    flex: 0
12 
+  }
13 
+}
14 
+
15 
+.role-list-item {
16 
+  &.active {
17 
+    background: #e6f7ff;
18 
+  }
19 
+}

+ 117
- 0
src/pages/sample/curd.jsx Просмотреть файл 

@@ -0,0 +1,117 @@
1 
+import React from 'react';
2 
+import Curd from '@/components/Page/Curd';
3 
+import { Form, Input } from 'antd';
4 
+
5 
+export default (props) => {
6 
+  const columns = [
7 
+      {
8 
+          dataIndex: 'index',
9 
+          valueType: 'indexBorder',
10 
+          width: 48,
11 
+      },
12 
+      {
13 
+          title: '标题',
14 
+          dataIndex: 'title',
15 
+          copyable: true,
16 
+          ellipsis: true,
17 
+          tip: '标题过长会自动收缩',
18 
+          formItemProps: {
19 
+              rules: [
20 
+                  {
21 
+                      required: true,
22 
+                      message: '此项为必填项',
23 
+                  },
24 
+              ],
25 
+          },
26 
+      },
27 
+      {
28 
+          disable: true,
29 
+          title: '状态',
30 
+          dataIndex: 'state',
31 
+          filters: true,
32 
+          onFilter: true,
33 
+          ellipsis: true,
34 
+          valueType: 'select',
35 
+          valueEnum: {
36 
+              all: { text: '超长'.repeat(50) },
37 
+              open: {
38 
+                  text: '未解决',
39 
+                  status: 'Error',
40 
+              },
41 
+              closed: {
42 
+                  text: '已解决',
43 
+                  status: 'Success',
44 
+                  disabled: true,
45 
+              },
46 
+              processing: {
47 
+                  text: '解决中',
48 
+                  status: 'Processing',
49 
+              },
50 
+          },
51 
+      },
52 
+      {
53 
+          disable: true,
54 
+          title: '标签',
55 
+          dataIndex: 'labels',
56 
+          search: false,
57 
+          renderFormItem: (_, { defaultRender }) => {
58 
+              return defaultRender(_);
59 
+          },
60 
+          render: (_, record) => (<Space>
61 
+          {record.labels.map(({ name, color }) => (<Tag color={color} key={name}>
62 
+              {name}
63 
+              </Tag>))}
64 
+          </Space>),
65 
+      },
66 
+      {
67 
+          title: '创建时间',
68 
+          key: 'showTime',
69 
+          dataIndex: 'created_at',
70 
+          valueType: 'date',
71 
+          sorter: true,
72 
+          hideInSearch: true,
73 
+      },
74 
+      {
75 
+          title: '创建时间',
76 
+          dataIndex: 'created_at',
77 
+          valueType: 'dateRange',
78 
+          hideInTable: true,
79 
+          search: {
80 
+              transform: (value) => {
81 
+                  return {
82 
+                      startTime: value[0],
83 
+                      endTime: value[1],
84 
+                  };
85 
+              },
86 
+          },
87 
+      },
88 
+  ];
89 
+
90 
+  return (
91 
+    <Curd
92 
+      columns={columns}
93 
+      request={{
94 
+        del: () => Promise.resolve(),
95 
+        save: () => Promise.resolve(),
96 
+        update: () => Promise.resolve(),
97 
+        list: () => Promise.resolve({total: 0}),
98 
+      }}
99 
+      renderFormItems={() => (
100 
+        <>
101 
+          <Form.Item label="示例1" name="demo1">
102 
+            <Input />
103 
+          </Form.Item>
104 
+          <Form.Item label="示例2" name="demo2">
105 
+            <Input />
106 
+          </Form.Item>
107 
+          <Form.Item label="示例3" name="demo3">
108 
+            <Input />
109 
+          </Form.Item>
110 
+          <Form.Item label="示例4" name="demo4">
111 
+            <Input />
112 
+          </Form.Item>
113 
+        </>
114 
+      )}
115 
+    />
116 
+  )
117 
+}

+ 308
- 0
src/pages/sample/form/index.jsx Просмотреть файл 

@@ -0,0 +1,308 @@
1 
+import {
2 
+  AutoComplete,
3 
+  Button,
4 
+  Cascader,
5 
+  Checkbox,
6 
+  Col,
7 
+  Form,
8 
+  Input,
9 
+  InputNumber,
10 
+  Row,
11 
+  Select,
12 
+  Card,
13 
+} from 'antd';
14 
+import React, { useState } from 'react';
15 
+import Edit from '@/components/Page/Edit';
16 
+
17 
+const { Option } = Select;
18 
+const residences = [
19 
+  {
20 
+    value: 'zhejiang',
21 
+    label: 'Zhejiang',
22 
+    children: [
23 
+      {
24 
+        value: 'hangzhou',
25 
+        label: 'Hangzhou',
26 
+        children: [
27 
+          {
28 
+            value: 'xihu',
29 
+            label: 'West Lake',
30 
+          },
31 
+        ],
32 
+      },
33 
+    ],
34 
+  },
35 
+  {
36 
+    value: 'jiangsu',
37 
+    label: 'Jiangsu',
38 
+    children: [
39 
+      {
40 
+        value: 'nanjing',
41 
+        label: 'Nanjing',
42 
+        children: [
43 
+          {
44 
+            value: 'zhonghuamen',
45 
+            label: 'Zhong Hua Men',
46 
+          },
47 
+        ],
48 
+      },
49 
+    ],
50 
+  },
51 
+];
52 
+
53 
+export default (props) => {
54 
+  const prefixSelector = (
55 
+    <Form.Item name="prefix" noStyle>
56 
+      <Select
57 
+        style={{
58 
+          width: 70,
59 
+        }}
60 
+      >
61 
+        <Option value="86">+86</Option>
62 
+        <Option value="87">+87</Option>
63 
+      </Select>
64 
+    </Form.Item>
65 
+  );
66 
+  const suffixSelector = (
67 
+    <Form.Item name="suffix" noStyle>
68 
+      <Select
69 
+        style={{
70 
+          width: 70,
71 
+        }}
72 
+      >
73 
+        <Option value="USD">$</Option>
74 
+        <Option value="CNY">¥</Option>
75 
+      </Select>
76 
+    </Form.Item>
77 
+  );
78 
+  const [autoCompleteResult, setAutoCompleteResult] = useState([]);
79 
+
80 
+  const onWebsiteChange = (value) => {
81 
+    if (!value) {
82 
+      setAutoCompleteResult([]);
83 
+    } else {
84 
+      setAutoCompleteResult(['.com', '.org', '.net'].map((domain) => `${value}${domain}`));
85 
+    }
86 
+  };
87 
+
88 
+  const websiteOptions = autoCompleteResult.map((website) => ({
89 
+    label: website,
90 
+    value: website,
91 
+  }));
92 
+  return (
93 
+    <Edit width="1000px">
94 
+      <Form.Item
95 
+        name="email"
96 
+        label="E-mail"
97 
+        rules={[
98 
+          {
99 
+            type: 'email',
100 
+            message: 'The input is not valid E-mail!',
101 
+          },
102 
+          {
103 
+            required: true,
104 
+            message: 'Please input your E-mail!',
105 
+          },
106 
+        ]}
107 
+      >
108 
+        <Input />
109 
+      </Form.Item>
110 
+
111 
+      <Form.Item
112 
+        name="password"
113 
+        label="Password"
114 
+        rules={[
115 
+          {
116 
+            required: true,
117 
+            message: 'Please input your password!',
118 
+          },
119 
+        ]}
120 
+        hasFeedback
121 
+      >
122 
+        <Input.Password />
123 
+      </Form.Item>
124 
+
125 
+      <Form.Item
126 
+        name="confirm"
127 
+        label="Confirm Password"
128 
+        dependencies={['password']}
129 
+        hasFeedback
130 
+        rules={[
131 
+          {
132 
+            required: true,
133 
+            message: 'Please confirm your password!',
134 
+          },
135 
+          ({ getFieldValue }) => ({
136 
+            validator(_, value) {
137 
+              if (!value || getFieldValue('password') === value) {
138 
+                return Promise.resolve();
139 
+              }
140 
+
141 
+              return Promise.reject(new Error('The two passwords that you entered do not match!'));
142 
+            },
143 
+          }),
144 
+        ]}
145 
+      >
146 
+        <Input.Password />
147 
+      </Form.Item>
148 
+
149 
+      <Form.Item
150 
+        name="nickname"
151 
+        label="Nickname"
152 
+        tooltip="What do you want others to call you?"
153 
+        rules={[
154 
+          {
155 
+            required: true,
156 
+            message: 'Please input your nickname!',
157 
+            whitespace: true,
158 
+          },
159 
+        ]}
160 
+      >
161 
+        <Input />
162 
+      </Form.Item>
163 
+
164 
+      <Form.Item
165 
+        name="residence"
166 
+        label="Habitual Residence"
167 
+        rules={[
168 
+          {
169 
+            type: 'array',
170 
+            required: true,
171 
+            message: 'Please select your habitual residence!',
172 
+          },
173 
+        ]}
174 
+      >
175 
+        <Cascader options={residences} />
176 
+      </Form.Item>
177 
+
178 
+      <Form.Item
179 
+        name="phone"
180 
+        label="Phone Number"
181 
+        rules={[
182 
+          {
183 
+            required: true,
184 
+            message: 'Please input your phone number!',
185 
+          },
186 
+        ]}
187 
+      >
188 
+        <Input
189 
+          addonBefore={prefixSelector}
190 
+          style={{
191 
+            width: '100%',
192 
+          }}
193 
+        />
194 
+      </Form.Item>
195 
+
196 
+      <Form.Item
197 
+        name="donation"
198 
+        label="Donation"
199 
+        rules={[
200 
+          {
201 
+            required: true,
202 
+            message: 'Please input donation amount!',
203 
+          },
204 
+        ]}
205 
+      >
206 
+        <InputNumber
207 
+          addonAfter={suffixSelector}
208 
+          style={{
209 
+            width: '100%',
210 
+          }}
211 
+        />
212 
+      </Form.Item>
213 
+
214 
+      <Form.Item
215 
+        name="website"
216 
+        label="Website"
217 
+        rules={[
218 
+          {
219 
+            required: true,
220 
+            message: 'Please input website!',
221 
+          },
222 
+        ]}
223 
+      >
224 
+        <AutoComplete options={websiteOptions} onChange={onWebsiteChange} placeholder="website">
225 
+          <Input />
226 
+        </AutoComplete>
227 
+      </Form.Item>
228 
+
229 
+      <Form.Item
230 
+        name="intro"
231 
+        label="Intro"
232 
+        rules={[
233 
+          {
234 
+            required: true,
235 
+            message: 'Please input Intro',
236 
+          },
237 
+        ]}
238 
+      >
239 
+        <Input.TextArea showCount maxLength={100} />
240 
+      </Form.Item>
241 
+
242 
+      <Form.Item
243 
+        name="gender"
244 
+        label="Gender"
245 
+        rules={[
246 
+          {
247 
+            required: true,
248 
+            message: 'Please select gender!',
249 
+          },
250 
+        ]}
251 
+      >
252 
+        <Select placeholder="select your gender">
253 
+          <Option value="male">Male</Option>
254 
+          <Option value="female">Female</Option>
255 
+          <Option value="other">Other</Option>
256 
+        </Select>
257 
+      </Form.Item>
258 
+
259 
+      <Form.Item label="Captcha" extra="We must make sure that your are a human.">
260 
+        <Row gutter={8}>
261 
+          <Col span={12}>
262 
+            <Form.Item
263 
+              name="captcha"
264 
+              noStyle
265 
+              rules={[
266 
+                {
267 
+                  required: true,
268 
+                  message: 'Please input the captcha you got!',
269 
+                },
270 
+              ]}
271 
+            >
272 
+              <Input />
273 
+            </Form.Item>
274 
+          </Col>
275 
+          <Col span={12}>
276 
+            <Button>Get captcha</Button>
277 
+          </Col>
278 
+        </Row>
279 
+      </Form.Item>
280 
+
281 
+      <Form.Item
282 
+        name="agreement"
283 
+        valuePropName="checked"
284 
+        rules={[
285 
+          {
286 
+            validator: (_, value) =>
287 
+              value ? Promise.resolve() : Promise.reject(new Error('Should accept agreement')),
288 
+          },
289 
+        ]}
290 
+        wrapperCol={{
291 
+          xs: {
292 
+            span: 24,
293 
+            offset: 0,
294 
+          },
295 
+          sm: {
296 
+            span: 16,
297 
+            offset: 8,
298 
+          },
299 
+        }}
300 
+      >
301 
+        <Checkbox>
302 
+          I have read the <a href="">agreement</a>
303 
+        </Checkbox>
304 
+      </Form.Item>
305 
+    </Edit>
306 
+  );
307 
+};
308 
+

+ 96
- 0
src/pages/sample/table/index.jsx Просмотреть файл 

@@ -0,0 +1,96 @@
1 
+
2 
+import { Space, Tag } from 'antd';
3 
+import List from '@/components/Page/List';
4 
+
5 
+export default () => {
6 
+    const columns = [
7 
+        {
8 
+            dataIndex: 'index',
9 
+            valueType: 'indexBorder',
10 
+            width: 48,
11 
+        },
12 
+        {
13 
+            title: '标题',
14 
+            dataIndex: 'title',
15 
+            copyable: true,
16 
+            ellipsis: true,
17 
+            tip: '标题过长会自动收缩',
18 
+            formItemProps: {
19 
+                rules: [
20 
+                    {
21 
+                        required: true,
22 
+                        message: '此项为必填项',
23 
+                    },
24 
+                ],
25 
+            },
26 
+        },
27 
+        {
28 
+            disable: true,
29 
+            title: '状态',
30 
+            dataIndex: 'state',
31 
+            filters: true,
32 
+            onFilter: true,
33 
+            ellipsis: true,
34 
+            valueType: 'select',
35 
+            valueEnum: {
36 
+                all: { text: '超长'.repeat(50) },
37 
+                open: {
38 
+                    text: '未解决',
39 
+                    status: 'Error',
40 
+                },
41 
+                closed: {
42 
+                    text: '已解决',
43 
+                    status: 'Success',
44 
+                    disabled: true,
45 
+                },
46 
+                processing: {
47 
+                    text: '解决中',
48 
+                    status: 'Processing',
49 
+                },
50 
+            },
51 
+        },
52 
+        {
53 
+            disable: true,
54 
+            title: '标签',
55 
+            dataIndex: 'labels',
56 
+            search: false,
57 
+            renderFormItem: (_, { defaultRender }) => {
58 
+                return defaultRender(_);
59 
+            },
60 
+            render: (_, record) => (<Space>
61 
+            {record.labels.map(({ name, color }) => (<Tag color={color} key={name}>
62 
+                {name}
63 
+                </Tag>))}
64 
+            </Space>),
65 
+        },
66 
+        {
67 
+            title: '创建时间',
68 
+            key: 'showTime',
69 
+            dataIndex: 'created_at',
70 
+            valueType: 'date',
71 
+            sorter: true,
72 
+            hideInSearch: true,
73 
+        },
74 
+        {
75 
+            title: '创建时间',
76 
+            dataIndex: 'created_at',
77 
+            valueType: 'dateRange',
78 
+            hideInTable: true,
79 
+            search: {
80 
+                transform: (value) => {
81 
+                    return {
82 
+                        startTime: value[0],
83 
+                        endTime: value[1],
84 
+                    };
85 
+                },
86 
+            },
87 
+        },
88 
+    ];
89 
+
90 
+    return (
91 
+        <List
92 
+            columns={columns}
93 
+            request={() => Promise.resolve({ total: 0 })}
94 
+        />
95 
+    );
96 
+};

+ 62
- 0
src/pages/user/Edit.jsx Просмотреть файл 

@@ -0,0 +1,62 @@
1 
+import React, { useMemo } from "react";
2 
+import { Button, Card, Form, Input, Select } from "antd";
3 
+import useBool from "@/utils/hooks/useBool";
4 
+import { useSearchParams, useNavigate } from "react-router-dom";
5 
+import Page from "@/components/Page";
6 
+import { formItemLayout, tailFormItemLayout } from "@/utils/form";
7 
+const { Option } = Select;
8 
+
9 
+export default (props) => {
10 
+
11 
+  const [loading, startLoading, cancelLoading] = useBool();
12 
+  const [submiting, startSubmit, cancelSubmit] = useBool();
13 
+
14 
+  const [searchParams] = useSearchParams();
15 
+  const [form] = Form.useForm();
16 
+  const navigate = useNavigate();
17 
+
18 
+  const id = searchParams.get("id");
19 
+
20 
+  const onFinish = () => {
21 
+
22 
+  }
23 
+
24 
+  return (
25 
+    <Page>
26 
+      <Card loading={loading}>
27 
+        <Form
28 
+          onFinish={onFinish}
29 
+          form={form}
30 
+          {...formItemLayout}
31 
+          scrollToFirstError
32 
+          style={{ maxWidth: "1000px" }}
33 
+        >
34 
+          <Form.Item
35 
+            name="userName"
36 
+            label="姓名"
37 
+            rules={[
38 
+              {
39 
+                required: true,
40 
+                message: "请填写姓名",
41 
+              },
42 
+            ]}
43 
+          >
44 
+            <Input placeholder="请输入姓名" />
45 
+          </Form.Item>
46 
+          <Form.Item name="phone" label="电话">
47 
+            <Input placeholder="请输入电话" />
48 
+          </Form.Item>
49 
+
50 
+          <Form.Item {...tailFormItemLayout}>
51 
+            <Button loading={submiting} type="primary" htmlType="submit">
52 
+              保存
53 
+            </Button>
54 
+            <Button style={{ marginLeft: "2em" }} onClick={() => navigate(-1)}>
55 
+              返回
56 
+            </Button>
57 
+          </Form.Item>
58 
+        </Form>
59 
+      </Card>
60 
+    </Page>
61 
+  );
62 
+};

+ 80
- 0
src/pages/user/index.jsx Просмотреть файл 

@@ -0,0 +1,80 @@
1 
+import React from "react";
2 
+import { useNavigate } from "react-router-dom";
3 
+import { Button, Popconfirm, message } from "antd";
4 
+import { ProTable } from "@ant-design/pro-components";
5 
+import { queryTable, queryDict } from "@/utils/request";
6 
+import Page from "@/components/Page";
7 
+
8 
+
9 
+
10 
+export default (props) => {
11 
+  const actionRef = React.useRef();
12 
+  const navigate = useNavigate();
13 
+
14 
+  const handleDelete = () => {
15 
+
16 
+  }
17 
+
18 
+  const columns = [
19 
+    {
20 
+      title: "姓名",
21 
+      dataIndex: "userName",
22 
+    },
23 
+    {
24 
+      title: "电话",
25 
+      dataIndex: "phone",
26 
+      search: false,
27 
+    },
28 
+    {
29 
+      title: "操作",
30 
+      valueType: "option",
31 
+      width: 200,
32 
+      render: (_, record) => [
33 
+        <Button
34 
+          key={3}
35 
+          style={{ padding: 0 }}
36 
+          type="link"
37 
+          disabled
38 
+          onClick={() => {
39 
+            navigate(`/user/edit?id=${record}`);
40 
+          }}
41 
+        >
42 
+          编辑
43 
+        </Button>,
44 
+        <Popconfirm
45 
+          key={4}
46 
+          title="您是否确认删除 ?"
47 
+          onConfirm={() => handleDelete(record)}
48 
+          okText="确定"
49 
+          cancelText="取消"
50 
+        >
51 
+          <Button style={{ padding: 0 }} type="link">
52 
+            删除
53 
+          </Button>
54 
+        </Popconfirm>,
55 
+      ],
56 
+    },
57 
+  ];
58 
+
59 
+  return (
60 
+    <Page>
61 
+      <ProTable
62 
+        actionRef={actionRef}
63 
+        rowKey=""
64 
+        toolBarRender={() => [
65 
+          <Button
66 
+            key="1"
67 
+            type="primary"
68 
+            onClick={() => {
69 
+              navigate("/user/edit");
70 
+            }}
71 
+          >
72 
+            新增
73 
+          </Button>,
74 
+        ]}
75 
+        // request={{}}
76 
+        columns={columns}
77 
+      />
78 
+    </Page>
79 
+  );
80 
+};

+ 18
- 0
src/routes/Router.jsx Просмотреть файл 

@@ -0,0 +1,18 @@
1 
+import React from "react";
2 
+import { createHashRouter, RouterProvider } from "react-router-dom";
3 
+import { useModel } from "@/store";
4 
+import { defaultRoutes } from './routes';
5 
+
6 
+export default (props) => {
7 
+  const { routes } = useModel('user');
8 
+
9 
+  const router = React.useMemo(() => {
10 
+    if (!routes || routes.length < 1) {
11 
+      return createHashRouter(defaultRoutes);
12 
+    } else {
13 
+      return createHashRouter(routes);
14 
+    }
15 
+  }, [routes]);
16 
+
17 
+  return <RouterProvider router={router} />
18 
+}

+ 37
- 0
src/routes/hooks/usePrompt.jsx Просмотреть файл 

@@ -0,0 +1,37 @@
1 
+import React from "react";
2 
+import { UNSAFE_NavigationContext } from "react-router-dom";
3 
+
4 
+// 估计在 react-router v6 的后续某个版本 usePrompt 会回归
5 
+// v6.7 已经添加 UNSAFE_usePrompt
6 
+export function usePrompt(message, when = true) {
7 
+  let blocker = React.useCallback(
8 
+    tx => {
9 
+      if (window.confirm(message)) tx.retry();
10 
+    },
11 
+    [message]
12 
+  );
13 
+
14 
+  useBlocker(blocker, when);
15 
+}
16 
+
17 
+function useBlocker(blocker, when = true) {
18 
+  let { navigator } = React.useContext(UNSAFE_NavigationContext);
19 
+
20 
+  React.useEffect(() => {
21 
+    if (!when) return;
22 
+
23 
+    let unblock = navigator.block((tx) => {
24 
+      let autoUnblockingTx = {
25 
+        ...tx,
26 
+        retry() {
27 
+          unblock();
28 
+          tx.retry();
29 
+        }
30 
+      };
31 
+
32 
+      blocker(autoUnblockingTx);
33 
+    });
34 
+
35 
+    return unblock;
36 
+  }, [navigator, blocker, when]);
37 
+}

+ 17
- 0
src/routes/hooks/useRoute.jsx Просмотреть файл 

@@ -0,0 +1,17 @@
1 
+import { useLocation } from "react-router-dom";
2 
+import { routes } from '../routes';
3 
+import { flatten } from "../utils";
4 
+
5 
+let routeMap = null;
6 
+
7 
+// 获取当前的 route 信息
8 
+export default function useRoute() {
9 
+  if (!routeMap) {
10 
+    routeMap = flatten(routes);
11 
+  }
12 
+
13 
+  const location = useLocation();
14 
+  return routeMap[location.pathname];
15 
+  // const currentRoute = routeArr.filter(x => x.path === location.pathname)[0];
16 
+  // return currentRoute;
17 
+}

+ 44
- 0
src/routes/menus.jsx Просмотреть файл 

@@ -0,0 +1,44 @@
1 
+import { Link } from 'react-router-dom';
2 
+import { getPath } from './utils';
3 
+
4 
+// 菜单是否显示
5 
+// 没有 meta 或者 meta.title 为空, 或者 meta.hideInMenu = true 的 都不显示
6 
+const isShow = item => item.meta && item.meta.title && !item.meta.hideInMenu;
7 
+
8 
+const hasChildren = (list) => {
9 
+  if (!list || list.length < 1) return false;
10 
+
11 
+  // 如果子元素全部都是不显示的, 说明子菜单不需要显示
12 
+  return list.filter(it => !isShow(it)).length !== list.length;
13 
+}
14 
+
15 
+export const getMenuItems = (routes = [], fullPath = '/') => {
16 
+  return routes.map(route => {
17 
+    const path = getPath(fullPath, route.path);
18 
+
19 
+    //
20 
+    if (!isShow(route)) return false;
21 
+
22 
+    const children = hasChildren(route.children) ? getMenuItems(route.children, path) : false;
23 
+
24 
+    const { target, title, icon } = route.meta || {}
25 
+
26 
+    // 坑爹 react-router v6 不支持 hash 路由的 target 跳转
27 
+    const label = target === '_blank' ?
28 
+      <a href={`${window.location.pathname}#${path}`} target={target}>{title}</a>
29 
+      : (
30 
+        path.indexOf('http') === 0  ? <a href={path} target="_blank">{title}</a>
31 
+        : <Link to={path} target={target}>{title}</Link>
32 
+      );
33 
+
34 
+    return Object.assign(
35 
+      {
36 
+        key: path,
37 
+        label,
38 
+        title,
39 
+        icon,
40 
+      },
41 
+      children && { children },
42 
+    )
43 
+  }).filter(Boolean);
44 
+}

+ 14
- 0
src/routes/permissions.js Просмотреть файл 

@@ -0,0 +1,14 @@
1 
+
2 
+export const getAuthedRoutes = (routes, permissions) => {
3 
+  if (!routes || routes.length < 1) return [];
4 
+
5 
+  return routes.map(route => {
6 
+    if (route.meta && route.meta.permission && permissions.indexOf(route.meta.permission) < 0) return false;
7 
+
8 
+    if (route.children) {
9 
+      route.children = getAuthedRoutes(route.children, permissions);
10 
+    }
11 
+
12 
+    return route;
13 
+  }).filter(Boolean);
14 
+}

+ 135
- 0
src/routes/routes.jsx Просмотреть файл 

@@ -0,0 +1,135 @@
1 
+import {
2 
+  UserOutlined,
3 
+  SolutionOutlined,
4 
+  FileTextOutlined
5 
+} from "@ant-design/icons";
6 
+import { Outlet, Navigate } from "react-router-dom";
7 
+import AuthLayout from "@/layouts/AuthLayout";
8 
+import Login from "@/pages/login";
9 
+import Page404 from "@/pages/404";
10 
+import Custom from "@/pages/custom";
11 
+import CustomEdit from "@/pages/custom/Edit";
12 
+import Project from "@/pages/project";
13 
+import ProjectEdit from "@/pages/project/Edit";
14 
+import User from "@/pages/user";
15 
+import UserEdit from "@/pages/user/Edit";
16 
+/**
17 
+ * meta 用来扩展自定义数据数据
18 
+ * {
19 
+ *    title: 用于页面或者菜单的标题, 没有此字段, 菜单不会显示
20 
+ *    hideInMenu: 布尔值, 如果为 false, 菜单不会显示
21 
+ *    noLayout: 布尔值, 如果为 true, 将不会使用默认布局
22 
+ *    noSiderBar: 布尔值, 如果为 true, 将没有左侧菜单栏
23 
+ *    noFooter: 布尔值, 如果为 true, 将没有底部 footer
24 
+ *    target: 字符串, 如果为 _blank, 将在新窗口打开
25 
+ *    permission: 对应服务器端权限名称
26 
+ * }
27 
+ */
28 
+
29 
+export const authRoutes = [
30 
+  {
31 
+    index: true,
32 
+    element: <Navigate to="/custom" replace={true} />,
33 
+  },
34 
+  {
35 
+    path: "custom",
36 
+    element: <Custom />,
37 
+    meta: {
38 
+      title: "客户管理",
39 
+      icon: <SolutionOutlined />,
40 
+    }
41 
+  },
42 
+  {
43 
+    path: "custom/edit",
44 
+    element: <CustomEdit />,
45 
+    meta: {
46 
+      title: "客户维护",
47 
+      hideInMenu: true,
48 
+    },
49 
+  },
50 
+  {
51 
+    path: "project",
52 
+    element: <Project />,
53 
+    meta: {
54 
+      title: "项目管理",
55 
+      icon: <FileTextOutlined />,
56 
+    }
57 
+  },
58 
+  {
59 
+    path: "project/edit",
60 
+    element: <ProjectEdit />,
61 
+    meta: {
62 
+      title: "项目维护",
63 
+      hideInMenu: true,
64 
+    }
65 
+  },
66 
+  {
67 
+    path: "user",
68 
+    element: <User />,
69 
+    meta: {
70 
+      title: "人员管理",
71 
+      icon: <UserOutlined />,
72 
+    }
73 
+  },
74 
+  {
75 
+    path: "user/edit",
76 
+    element: <UserEdit />,
77 
+    meta: {
78 
+      title: "人员维护",
79 
+      hideInMenu: true,
80 
+    }
81 
+  },
82 
+];
83 
+
84 
+export const defaultRoutes = [
85 
+  {
86 
+    path: "/",
87 
+    element: <AuthLayout />,
88 
+    children: [
89 
+      {
90 
+        path: "*",
91 
+        element: <Page404 />,
92 
+      },
93 
+    ],
94 
+  },
95 
+  {
96 
+    path: "/login",
97 
+    element: <Login />,
98 
+  },
99 
+  {
100 
+    path: "*",
101 
+    element: <Page404 />,
102 
+  }
103 
+];
104 
+
105 
+export function mergeAuthRoutes (r1, r2) {
106 
+  const r = r1.slice();
107 
+  const children = r1[0].children.slice();
108 
+  r[0].children = children.concat(r2);
109 
+  // console.log('r', r);
110 
+  // console.log('children', children);
111 
+  // console.log('r[0].children', r[0].children);
112 
+  return r;
113 
+}
114 
+
115 
+// 全部路由
116 
+export const routes = mergeAuthRoutes(defaultRoutes, authRoutes);
117 
+function getPath (parent = "/", current = "") {
118 
+  if (current.indexOf("/") === 0 || current.indexOf("http") === 0)
119 
+    return current;
120 
+  return `${parent}/${current}`.replace(/\/\//g, "/");
121 
+}
122 
+
123 
+// 路由数组, 一维数组
124 
+export const routeArr = (() => {
125 
+  const flatten = (routes, parentPath = "/") => {
126 
+    return routes.reduce((acc, route) => {
127 
+      const path = getPath(parentPath, route.path);
128 
+      const children = route.children ? flatten(route.children, path) : [];
129 
+
130 
+      return acc.concat([{ ...route, path }].concat(children));
131 
+    }, []);
132 
+  };
133 
+
134 
+  return flatten(routes);
135 
+})();

+ 22
- 0
src/routes/utils.js Просмотреть файл 

@@ -0,0 +1,22 @@
1 
+
2 
+// 获取组件路径
3 
+export function getPath (parent = "/", current = "") {
4 
+  if (current.indexOf("/") === 0 || current.indexOf("http") === 0)
5 
+    return current;
6 
+  return `${parent}/${current}`.replace(/\/\//g, "/");
7 
+}
8 
+
9 
+// 展平 routes, 为一个简单对象
10 
+// 如果出现 父组件与子组件相同路由, 那么子组件会覆盖父组件
11 
+export function flatten (routes, parentPath = "/") {
12 
+  return routes.reduce((acc, route) => {
13 
+    const path = route.index ? parentPath : getPath(parentPath, route.path);
14 
+    const children = route.children ? flatten(route.children, path) : {};
15 
+
16 
+    return {
17 
+      ...acc,
18 
+      [path]: route,
19 
+      ...children,
20 
+    }
21 
+  }, {});
22 
+};

+ 25
- 0
src/services/login.js Просмотреть файл 

@@ -0,0 +1,25 @@
1 
+import request from "@/utils/request";
2 
+
3 
+/*
4 
+ * 修改密码
5 
+ */
6 
+export const changePassword = (params) =>
7 
+  request(`/api/changPassword`, { params, method: "post" });
8 
+
9 
+/*
10 
+ * 后台登录
11 
+ */
12 
+export const login = (data) =>
13 
+  request("/api/login", { data, method: "post" });
14 
+
15 
+/*
16 
+* 登出
17 
+*/
18 
+export const logout = (data) =>
19 
+  request("/api/logout", { data, method: "post" });
20 
+
21 
+
22 
+/*
23 
+ *查询当前登录状态
24 
+ */
25 
+export const isLogin = (params) => request("/api/isLogin", { params })

+ 26
- 0
src/services/project.js Просмотреть файл 

@@ -0,0 +1,26 @@
1 
+import request from "@/utils/request";
2 
+
3 
+/*
4 
+ * 新增数据
5 
+ */
6 
+export const postTaProject = (data) => request(`/api/taProject/addProject`, { data, method: 'post' });
7 
+
8 
+/*
9 
+ * 分页查询
10 
+ */
11 
+export const getTaProject = (params) => request(`/api/taProject/painQuery`, { params, method: 'get' });
12 
+
13 
+/*
14 
+ * 更新数据
15 
+ */
16 
+export const putTaProject = (id, data) => request(`/api/taProject/edit/${id}`, { data, method: 'put' });
17 
+
18 
+/*
19 
+ * 通过主键删除数据
20 
+ */
21 
+export const deleteTaProject = (id) => request(`/api/taProject/deleteById/${id}`, { method: 'delete' });
22 
+
23 
+/*
24 
+ * 通过ID查询单条数据
25 
+ */
26 
+export const getTaProjectById = (id) => request(`/api/taProject/queryById/${id}`);

+ 26
- 0
src/services/taCustom.js Просмотреть файл 

@@ -0,0 +1,26 @@
1 
+import request from "@/utils/request";
2 
+
3 
+/*
4 
+ * 分页查询
5 
+ */
6 
+export const getTaCustom = (params) => request(`/api/taCustom/queryList`, { params });
7 
+
8 
+/*
9 
+ * 新增数据
10 
+ */
11 
+export const postTaCustom = (data) => request('/api/taCustom/addCustom', { data, method: 'post' });
12 
+
13 
+/*
14 
+ * 更新数据
15 
+ */
16 
+export const putTaCustom = (id, data) => request(`/api/taCustom/edit/${id}`, { data, method: 'put' });
17 
+
18 
+/*
19 
+ * 通过主键删除数据
20 
+ */
21 
+export const deleteTaCustom = (id) => request(`/api/taCustom/deleteById/${id}`, { method: 'delete' });
22 
+
23 
+/*
24 
+ * 通过ID查询单条数据
25 
+ */
26 
+export const getTaCustomById = (id) => request(`/api/taCustom/queryListId/${id}`);

+ 14
- 0
src/store/index.js Просмотреть файл 

@@ -0,0 +1,14 @@
1 
+import { createStore } from "@zjxpcyc/react-tiny-store";
2 
+import useSystem from "./models/system";
3 
+import useUser from "./models/user";
4 
+
5 
+const store = createStore({
6 
+  system: useSystem,
7 
+  user: useUser,
8 
+});
9 
+
10 
+export default store
11 
+export const useModel = store.useModel
12 
+export const addModel = store.addModel
13 
+export const removeModel = store.removeModel
14 
+export const Provider = store.Provider

+ 20
- 0
src/store/models/system.js Просмотреть файл 

@@ -0,0 +1,20 @@
1 
+import { useState, useCallback } from "react";
2 
+
3 
+export default function useSystem () {
4 
+  // 主题
5 
+  const [theme, updateTheme] = useState('light');
6 
+
7 
+  // 其他配置
8 
+  const [app, setApp] = useState({
9 
+    fullName: 'CRM管理系统',
10 
+    shorName: 'CRM系统',
11 
+    company: '云致'
12 
+  });
13 
+
14 
+  return {
15 
+    theme,
16 
+    updateTheme,
17 
+    app,
18 
+    hashRoute: true,
19 
+  }
20 
+}

+ 40
- 0
src/store/models/user.js Просмотреть файл 

@@ -0,0 +1,40 @@
1 
+import { useState, useRef } from "react";
2 
+import { defaultRoutes, authRoutes, mergeAuthRoutes } from "@/routes/routes";
3 
+import { getMenuItems } from "@/routes/menus";
4 
+// import { getAuthedRoutes } from "@/routes/permissions";
5 
+import { isLogin } from "@/services/login";
6 
+
7 
+export default function useUser () {
8 
+  const [user, setUser] = useState();
9 
+  const menusRef = useRef();
10 
+  const routesRef = useRef();
11 
+
12 
+  const getCurrentUser = (params) =>
13 
+    new Promise((resolve, reject) => {
14 
+      isLogin(params)
15 
+        .then((res) => {
16 
+          const { user } = res;
17 
+          // const permissions = res;
18 
+
19 
+          // authRoutes 是所有待验证授权的路由
20 
+          // authedRoutes 是已经被授权的路由
21 
+          // const authedRoutes = authRoutes;
22 
+
23 
+          menusRef.current = getMenuItems(defaultRoutes);
24 
+          routesRef.current = mergeAuthRoutes(defaultRoutes);
25 
+          // console.log('menusRef.current', menusRef.current)
26 
+
27 
+          setUser(user);
28 
+          resolve(user);
29 
+        })
30 
+        .catch(reject);
31 
+    });
32 
+
33 
+  return {
34 
+    user,
35 
+    setUser,
36 
+    getCurrentUser,
37 
+    menus: menusRef.current || [],
38 
+    routes: routesRef.current || [],
39 
+  };
40 
+}

+ 11
- 0
src/theme.less Просмотреть файл 

@@ -0,0 +1,11 @@
1 
+
2 
+.light {
3 
+  .ant-layout,
4 
+  .ant-layout-header,
5 
+  .ant-layout-sider,
6 
+  .ant-layout-sider-trigger,
7 
+  .ant-menu
8 
+   {
9 
+    background: transparent !important;
10 
+  }
11 
+}

+ 64
- 0
src/utils/array.js Просмотреть файл 

@@ -0,0 +1,64 @@
1 
+/**
2 
+ * 数组 转 Tree
3 
+ * @param {*} arr
4 
+ * @param {*} parent
5 
+ * @param {*} key
6 
+ * @returns
7 
+ */
8 
+export function arr2Tree(arr = [], parent = "parentId", key = "key") {
9 
+  // 转换为字典
10 
+  const dict = arr.reduce((acc, item) => {
11 
+    return {
12 
+      ...acc,
13 
+      [item[key]]: {
14 
+        ...item,
15 
+        children: [],
16 
+      },
17 
+    };
18 
+  }, {});
19 
+
20 
+  // // 查找顶级结点
21 
+  // const getRootNode = (node) => {
22 
+  //   const found = arr.filter((x) => node[parentId] === x[key])[0];
23 
+
24 
+  //   return !found ? dict[node[key]] : getRootNode(found);
25 
+  // };
26 
+
27 
+  // 挂载父子节点
28 
+  const tree = [];
29 
+  for (let item of arr) {
30 
+    const it = dict[item[key]];
31 
+    const parentNodeId = it[parent];
32 
+    const parentNode = dict[parentNodeId];
33 
+
34 
+    if (!parentNode) {
35 
+      tree.push(it);
36 
+    } else {
37 
+      dict[parentNodeId].children.push(it);
38 
+    }
39 
+  }
40 
+  return [tree, dict];
41 
+}
42 
+
43 
+/**
44 
+ * 深度展平数组
45 
+ * @param {*} arr
46 
+ * @returns
47 
+ */
48 
+export function flatten(arr = []) {
49 
+  return arr.reduce((acc, it) => {
50 
+    const list = Array.isArray(it) ? flatten(it) : it;
51 
+    return acc.concat(list);
52 
+  }, []);
53 
+}
54 
+
55 
+/**
56 
+ * 深度数组去重
57 
+ * @param {*} arr
58 
+ */
59 
+export function uniq(arr = []) {
60 
+  const list = flatten(arr);
61 
+  return list.reduce((acc, it) => {
62 
+    return acc.indexOf(it) > -1 ? acc : acc.concat(it);
63 
+  }, []);
64 
+}

+ 8
- 0
src/utils/css.js Просмотреть файл 

@@ -0,0 +1,8 @@
1 
+
2 
+export function setProperty(...args) {
3 
+  document.documentElement.style.setProperty(...args);
4 
+}
5 
+
6 
+export function getPropertyValue(...args) {
7 
+  return getComputedStyle(document.documentElement).getPropertyValue(...args);
8 
+}

+ 5
- 0
src/utils/float.js Просмотреть файл 

@@ -0,0 +1,5 @@
1 
+const epsilonN = N => num => Math.round( num * N + Number.EPSILON ) / N;
2 
+
3 
+// 可以处理丢失精度的问题
4 
+// 比如 epsilon2(0.29 * 100)
5 
+export const epsilon2 = epsilonN(1e2);

+ 23
- 0
src/utils/form.js Просмотреть файл 

@@ -0,0 +1,23 @@
1 
+
2 
+export const formItemLayout = {
3 
+  labelCol: {
4 
+    xs: { span: 24 },
5 
+    sm: { span: 8 },
6 
+  },
7 
+  wrapperCol: {
8 
+    xs: { span: 24 },
9 
+    sm: { span: 16 },
10 
+  },
11 
+};
12 
+export const tailFormItemLayout = {
13 
+  wrapperCol: {
14 
+    xs: {
15 
+      span: 24,
16 
+      offset: 0,
17 
+    },
18 
+    sm: {
19 
+      span: 16,
20 
+      offset: 8,
21 
+    },
22 
+  },
23 
+};

+ 0
- 0
src/utils/hooks/useBool.js Просмотреть файл


Некоторые файлы не были показаны из-за большого количества измененных файлов