Init
This commit is contained in:
39
.eslintrc.cjs
Normal file
39
.eslintrc.cjs
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
/* eslint-env node */
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
env: { browser: true, es2020: true },
|
||||||
|
extends: [
|
||||||
|
'eslint:recommended',
|
||||||
|
'plugin:@typescript-eslint/recommended',
|
||||||
|
'plugin:@typescript-eslint/recommended-requiring-type-checking',
|
||||||
|
'plugin:react-hooks/recommended',
|
||||||
|
'plugin:prettier/recommended'
|
||||||
|
],
|
||||||
|
parser: '@typescript-eslint/parser',
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 'latest',
|
||||||
|
sourceType: 'module',
|
||||||
|
project: './tsconfig*.json',
|
||||||
|
tsconfigRootDir: __dirname,
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
'react-refresh',
|
||||||
|
'prettier'],
|
||||||
|
rules: {
|
||||||
|
'no-cond-assign': 'error',
|
||||||
|
'eqeqeq': 'error',
|
||||||
|
'indent': ['error', 4, { 'SwitchCase': 1 }],
|
||||||
|
'prettier/prettier': [
|
||||||
|
'error',
|
||||||
|
{
|
||||||
|
endOfLine: 'auto'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true }
|
||||||
|
],
|
||||||
|
'@typescript-eslint/no-non-null-assertion': 'off'
|
||||||
|
}
|
||||||
|
}
|
||||||
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
8
.prettierrc.json
Normal file
8
.prettierrc.json
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://json.schemastore.org/prettierrc",
|
||||||
|
"semi": false,
|
||||||
|
"tabWidth": 4,
|
||||||
|
"singleQuote": true,
|
||||||
|
"printWidth": 100,
|
||||||
|
"trailingComma": "none"
|
||||||
|
}
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vite + React + TS</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
12014
package-lock.json
generated
Normal file
12014
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
51
package.json
Normal file
51
package.json
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
{
|
||||||
|
"name": "react-ui",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"dev-host": "vite --host 0.0.0.0",
|
||||||
|
"build": "tsc && vite build",
|
||||||
|
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||||
|
"format": "prettier --write src/",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@ant-design/icons": "^5.1.4",
|
||||||
|
"antd": "^5.7.0",
|
||||||
|
"axios": "^1.4.0",
|
||||||
|
"jwt-decode": "^3.1.2",
|
||||||
|
"localforage": "^1.10.0",
|
||||||
|
"lodash": "^4.17.21",
|
||||||
|
"match-sorter": "^6.3.1",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-router": "^6.14.1",
|
||||||
|
"react-router-dom": "^6.14.1",
|
||||||
|
"sort-by": "^1.2.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/jsdom": "^21.1.1",
|
||||||
|
"@types/lodash": "^4.14.195",
|
||||||
|
"@types/node": "^20.4.2",
|
||||||
|
"@types/react": "^18.2.14",
|
||||||
|
"@types/react-dom": "^18.2.6",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^5.61.0",
|
||||||
|
"@typescript-eslint/parser": "^5.61.0",
|
||||||
|
"@vitejs/plugin-react": "^4.0.1",
|
||||||
|
"eslint": "^8.44.0",
|
||||||
|
"eslint-config-prettier": "^8.8.0",
|
||||||
|
"eslint-config-standard-with-typescript": "^36.0.0",
|
||||||
|
"eslint-plugin-import": "^2.27.5",
|
||||||
|
"eslint-plugin-prettier": "^5.0.0",
|
||||||
|
"eslint-plugin-promise": "^6.1.1",
|
||||||
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.1",
|
||||||
|
"jsdom": "^22.1.0",
|
||||||
|
"prettier": "^3.0.0",
|
||||||
|
"stylelint-config-prettier": "^9.0.5",
|
||||||
|
"typescript": "^5.0.2",
|
||||||
|
"vite": "^4.4.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
42
src/App.css
Normal file
42
src/App.css
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
#root {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 6em;
|
||||||
|
padding: 1.5em;
|
||||||
|
will-change: filter;
|
||||||
|
transition: filter 300ms;
|
||||||
|
}
|
||||||
|
.logo:hover {
|
||||||
|
filter: drop-shadow(0 0 2em #646cffaa);
|
||||||
|
}
|
||||||
|
.logo.react:hover {
|
||||||
|
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes logo-spin {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
a:nth-of-type(2) .logo {
|
||||||
|
animation: logo-spin infinite 20s linear;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.read-the-docs {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
13
src/App.tsx
Normal file
13
src/App.tsx
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { RouterProvider } from 'react-router'
|
||||||
|
import router from '@/router'
|
||||||
|
|
||||||
|
const App: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<RouterProvider router={router} />
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
||||||
23
src/AuthRoute.tsx
Normal file
23
src/AuthRoute.tsx
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import { useMatches, useOutlet } from 'react-router'
|
||||||
|
import { useMemo } from 'react'
|
||||||
|
import { Navigate } from 'react-router-dom'
|
||||||
|
import { getLoginStatus } from '@/utils/auth.ts'
|
||||||
|
|
||||||
|
const AuthRoute = () => {
|
||||||
|
const match = useMatches()[1]
|
||||||
|
const handle = match.handle as RouteHandle
|
||||||
|
const outlet = useOutlet()
|
||||||
|
const isLogin = getLoginStatus()
|
||||||
|
|
||||||
|
return useMemo(() => {
|
||||||
|
if (handle?.auth && !isLogin) {
|
||||||
|
return <Navigate to="/login" />
|
||||||
|
}
|
||||||
|
if (isLogin && match.pathname === '/login') {
|
||||||
|
return <Navigate to="/" />
|
||||||
|
}
|
||||||
|
return outlet
|
||||||
|
}, [handle?.auth, isLogin, match.pathname, outlet])
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AuthRoute
|
||||||
63
src/assets/css/base.css
Normal file
63
src/assets/css/base.css
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
em,
|
||||||
|
i {
|
||||||
|
font-style: normal
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style: none
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
border: 0;
|
||||||
|
vertical-align: middle
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
cursor: pointer
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #666;
|
||||||
|
text-decoration: none
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input {
|
||||||
|
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
|
||||||
|
border: 0;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
background-color: #fff;
|
||||||
|
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
|
||||||
|
color: #666
|
||||||
|
}
|
||||||
|
|
||||||
|
.hide,
|
||||||
|
.none {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearfix:after {
|
||||||
|
visibility: hidden;
|
||||||
|
clear: both;
|
||||||
|
display: block;
|
||||||
|
content: ".";
|
||||||
|
height: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearfix {
|
||||||
|
*zoom: 1
|
||||||
|
}
|
||||||
106
src/assets/css/common.css
Normal file
106
src/assets/css/common.css
Normal file
@@ -0,0 +1,106 @@
|
|||||||
|
:root {
|
||||||
|
--main-color: #00D4FF;
|
||||||
|
--background-color: #F5F5F5;
|
||||||
|
--font-main-color: #4D4D4D;
|
||||||
|
--font-secondary-color: #9E9E9E;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body {
|
||||||
|
color: var(--font-main-color);
|
||||||
|
user-select: none;
|
||||||
|
min-width: 1800px;
|
||||||
|
min-height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fill {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fill-with {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fill-height {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-white {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vertical-center-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal-center-box {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-size-xs {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-size-xs > use {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-size-sm {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-size-sm > use {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-size-md {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-size-md > use {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-size-lg {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-size-lg > use {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-size-xl {
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-size-xl > use {
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-size-menu {
|
||||||
|
width: 23px;
|
||||||
|
height: 23px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-size-menu > use {
|
||||||
|
width: 23px;
|
||||||
|
height: 23px;
|
||||||
|
}
|
||||||
63
src/assets/css/login.css
Normal file
63
src/assets/css/login.css
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
.login-background {
|
||||||
|
display: flex;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #B3E5FC;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-box {
|
||||||
|
display: flex;
|
||||||
|
width: 800px;
|
||||||
|
height: 450px;
|
||||||
|
background-color: #448AFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-box-left {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
flex: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-box-left-text {
|
||||||
|
font-size: 3rem;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-box-left-text>div:last-child {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-box-right {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
flex: 3;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-from-text {
|
||||||
|
position: absolute;
|
||||||
|
top: 60px;
|
||||||
|
left: 40px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-from {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 30px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-from-item {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
35
src/assets/css/manager.css
Normal file
35
src/assets/css/manager.css
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
.top-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: right;
|
||||||
|
background-color: #317ece;
|
||||||
|
padding: 10px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-bar > button:hover {
|
||||||
|
color: #F5F5F5;
|
||||||
|
border-color: #F5F5F5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
margin: 10px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-row > * {
|
||||||
|
display: flex;
|
||||||
|
gap: 5px;
|
||||||
|
align-items: center;
|
||||||
|
flex: 1;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-row > *:not(.operation-buttons) > *:last-child {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.operation-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: right;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
85
src/constants/Common.constants.ts
Normal file
85
src/constants/Common.constants.ts
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
const PRODUCTION_NAME = 'Pinnacle OA'
|
||||||
|
const TOKEN_NAME = 'JWT_TOKEN'
|
||||||
|
const COLOR_PRODUCTION = '#00D4FF'
|
||||||
|
const COLOR_BACKGROUND = '#F5F5F5'
|
||||||
|
const COLOR_TOP = 'rgba(234,46,13,0.85)'
|
||||||
|
const COLOR_FONT_MAIN = '#4D4D4D'
|
||||||
|
const COLOR_FONT_SECONDARY = '#9E9E9E'
|
||||||
|
const SIZE_ICON_XS = '16px'
|
||||||
|
const SIZE_ICON_SM = '20px'
|
||||||
|
const SIZE_ICON_MD = '24px'
|
||||||
|
const SIZE_ICON_LG = '32px'
|
||||||
|
const SIZE_ICON_XL = '64px'
|
||||||
|
|
||||||
|
// Response Code
|
||||||
|
const SYSTEM_OK = 20000
|
||||||
|
const LOGIN_SUCCESS = 20010
|
||||||
|
const LOGIN_USERNAME_PASSWORD_ERROR = 20011
|
||||||
|
const OLD_PASSWORD_NOT_MATCH = 20012
|
||||||
|
const LOGOUT_SUCCESS = 20015
|
||||||
|
const LOGOUT_FAILED = 20016
|
||||||
|
const TOKEN_IS_ILLEGAL = 20017
|
||||||
|
const TOKEN_HAS_EXPIRED = 20018
|
||||||
|
const TOKEN_RENEW_SUCCESS = 20019
|
||||||
|
const DATABASE_SELECT_OK = 20021
|
||||||
|
const DATABASE_SAVE_OK = 20022
|
||||||
|
const DATABASE_UPDATE_OK = 20023
|
||||||
|
const DATABASE_DELETE_OK = 20024
|
||||||
|
const DATABASE_SELECT_ERROR = 20031
|
||||||
|
const DATABASE_SAVE_ERROR = 20032
|
||||||
|
const DATABASE_UPDATE_ERROR = 20033
|
||||||
|
const DATABASE_DELETE_ERROR = 20034
|
||||||
|
const DATABASE_TIMEOUT_ERROR = 20035
|
||||||
|
const DATABASE_CONNECT_ERROR = 20036
|
||||||
|
const DATABASE_DATA_TO_LONG = 20037
|
||||||
|
const DATABASE_DATA_VALIDATION_FAILED = 20038
|
||||||
|
const DATABASE_EXECUTE_ERROR = 20039
|
||||||
|
|
||||||
|
const UNAUTHORIZED = 30010
|
||||||
|
const ACCESS_DENIED = 30030
|
||||||
|
const USER_DISABLE = 30031
|
||||||
|
|
||||||
|
const SYSTEM_ERROR = 50001
|
||||||
|
const SYSTEM_TIMEOUT = 50002
|
||||||
|
|
||||||
|
export {
|
||||||
|
PRODUCTION_NAME,
|
||||||
|
TOKEN_NAME,
|
||||||
|
COLOR_PRODUCTION,
|
||||||
|
COLOR_BACKGROUND,
|
||||||
|
COLOR_FONT_MAIN,
|
||||||
|
COLOR_FONT_SECONDARY,
|
||||||
|
COLOR_TOP,
|
||||||
|
SIZE_ICON_XS,
|
||||||
|
SIZE_ICON_SM,
|
||||||
|
SIZE_ICON_MD,
|
||||||
|
SIZE_ICON_LG,
|
||||||
|
SIZE_ICON_XL,
|
||||||
|
SYSTEM_OK,
|
||||||
|
LOGIN_SUCCESS,
|
||||||
|
LOGIN_USERNAME_PASSWORD_ERROR,
|
||||||
|
OLD_PASSWORD_NOT_MATCH,
|
||||||
|
LOGOUT_SUCCESS,
|
||||||
|
LOGOUT_FAILED,
|
||||||
|
TOKEN_IS_ILLEGAL,
|
||||||
|
TOKEN_HAS_EXPIRED,
|
||||||
|
TOKEN_RENEW_SUCCESS,
|
||||||
|
DATABASE_SELECT_OK,
|
||||||
|
DATABASE_SAVE_OK,
|
||||||
|
DATABASE_UPDATE_OK,
|
||||||
|
DATABASE_DELETE_OK,
|
||||||
|
DATABASE_SELECT_ERROR,
|
||||||
|
DATABASE_SAVE_ERROR,
|
||||||
|
DATABASE_UPDATE_ERROR,
|
||||||
|
DATABASE_DELETE_ERROR,
|
||||||
|
DATABASE_TIMEOUT_ERROR,
|
||||||
|
DATABASE_CONNECT_ERROR,
|
||||||
|
DATABASE_DATA_TO_LONG,
|
||||||
|
DATABASE_DATA_VALIDATION_FAILED,
|
||||||
|
DATABASE_EXECUTE_ERROR,
|
||||||
|
UNAUTHORIZED,
|
||||||
|
ACCESS_DENIED,
|
||||||
|
USER_DISABLE,
|
||||||
|
SYSTEM_ERROR,
|
||||||
|
SYSTEM_TIMEOUT
|
||||||
|
}
|
||||||
69
src/index.css
Normal file
69
src/index.css
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
:root {
|
||||||
|
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color-scheme: light dark;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
background-color: #242424;
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #646cff;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #535bf2;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
min-width: 320px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.2em;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 0.6em 1.2em;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: inherit;
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color 0.25s;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
border-color: #646cff;
|
||||||
|
}
|
||||||
|
button:focus,
|
||||||
|
button:focus-visible {
|
||||||
|
outline: 4px auto -webkit-focus-ring-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
color: #213547;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #747bff;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
}
|
||||||
15
src/main.tsx
Normal file
15
src/main.tsx
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom/client'
|
||||||
|
import App from './App.tsx'
|
||||||
|
import '@/assets/css/base.css'
|
||||||
|
import '@/assets/css/common.css'
|
||||||
|
import { ConfigProvider } from 'antd'
|
||||||
|
import zh_CN from 'antd/locale/zh_CN'
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<ConfigProvider locale={zh_CN}>
|
||||||
|
<App />
|
||||||
|
</ConfigProvider>
|
||||||
|
</React.StrictMode>
|
||||||
|
)
|
||||||
109
src/pages/Login.tsx
Normal file
109
src/pages/Login.tsx
Normal file
@@ -0,0 +1,109 @@
|
|||||||
|
import React, { useState } from 'react'
|
||||||
|
import { Button, Form, Input, message } from 'antd'
|
||||||
|
import { LockOutlined, UserOutlined } from '@ant-design/icons'
|
||||||
|
import { login } from '@/utils/auth.ts'
|
||||||
|
import { LOGIN_SUCCESS, LOGIN_USERNAME_PASSWORD_ERROR } from '@/constants/Common.constants.ts'
|
||||||
|
import { setToken } from '@/utils/common.ts'
|
||||||
|
import { useNavigate } from 'react-router'
|
||||||
|
import '@/assets/css/login.css'
|
||||||
|
|
||||||
|
const Login: React.FC = () => {
|
||||||
|
const [messageApi, contextHolder] = message.useMessage()
|
||||||
|
const navigate = useNavigate()
|
||||||
|
const [isLoggingIn, setIsLoggingIn] = useState(false)
|
||||||
|
|
||||||
|
const onFinish = (values: LoginForm) => {
|
||||||
|
setIsLoggingIn(true)
|
||||||
|
void login(values.username, values.password).then((value) => {
|
||||||
|
const res = value.data
|
||||||
|
const { code, data } = res
|
||||||
|
switch (code) {
|
||||||
|
case LOGIN_SUCCESS:
|
||||||
|
setToken(data?.token ?? '')
|
||||||
|
void messageApi.success('登录成功')
|
||||||
|
setTimeout(() => {
|
||||||
|
navigate('/')
|
||||||
|
}, 1500)
|
||||||
|
break
|
||||||
|
case LOGIN_USERNAME_PASSWORD_ERROR:
|
||||||
|
void messageApi.error(
|
||||||
|
<>
|
||||||
|
<strong>用户名</strong>或<strong>密码</strong>错误，请重试
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
setIsLoggingIn(false)
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
void messageApi.error(
|
||||||
|
<>
|
||||||
|
<strong>服务器出错了</strong>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
setIsLoggingIn(false)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{contextHolder}
|
||||||
|
<div className={'login-background'}>
|
||||||
|
<div className={'login-box'}>
|
||||||
|
<div className={'login-box-left'}>
|
||||||
|
<div className={'login-box-left-text'}>
|
||||||
|
<div>欢迎回来</div>
|
||||||
|
<div>Welcome back</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={'login-box-right'}>
|
||||||
|
<div className={'login-from-text'}>
|
||||||
|
<span>登 录</span>
|
||||||
|
</div>
|
||||||
|
<Form
|
||||||
|
name="login-form"
|
||||||
|
autoComplete="on"
|
||||||
|
onFinish={onFinish}
|
||||||
|
className={'login-from'}
|
||||||
|
>
|
||||||
|
<Form.Item
|
||||||
|
className={'login-from-item'}
|
||||||
|
name={'username'}
|
||||||
|
rules={[{ required: true, message: '用户名为空' }]}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
prefix={<UserOutlined />}
|
||||||
|
placeholder={'用户名'}
|
||||||
|
disabled={isLoggingIn}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
className={'login-from-item'}
|
||||||
|
name={'password'}
|
||||||
|
rules={[{ required: true, message: '密码为空' }]}
|
||||||
|
>
|
||||||
|
<Input.Password
|
||||||
|
prefix={<LockOutlined />}
|
||||||
|
placeholder={'密码'}
|
||||||
|
disabled={isLoggingIn}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item className={'login-from-item'}>
|
||||||
|
<Button
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
type={'primary'}
|
||||||
|
htmlType={'submit'}
|
||||||
|
disabled={isLoggingIn}
|
||||||
|
loading={isLoggingIn}
|
||||||
|
>
|
||||||
|
登    录
|
||||||
|
</Button>
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Login
|
||||||
395
src/pages/Manager.tsx
Normal file
395
src/pages/Manager.tsx
Normal file
@@ -0,0 +1,395 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { Button, Checkbox, DatePicker, Input, Select, Space, Table } from 'antd'
|
||||||
|
import { removeToken } from '@/utils/common.ts'
|
||||||
|
import { logout } from '@/utils/auth.ts'
|
||||||
|
import '@/assets/css/manager.css'
|
||||||
|
import { DeleteOutlined, SearchOutlined } from '@ant-design/icons'
|
||||||
|
import { ColumnsType } from 'antd/es/table'
|
||||||
|
|
||||||
|
type OrderDataType = {
|
||||||
|
order_number?: string
|
||||||
|
platform?: string
|
||||||
|
platform_order_number?: string
|
||||||
|
b2b_order_number?: string
|
||||||
|
hotel?: string
|
||||||
|
first_name?: string
|
||||||
|
last_name?: string
|
||||||
|
check_in_date?: Date
|
||||||
|
departure_date?: Date
|
||||||
|
total_room_night?: number
|
||||||
|
total_direct_customer?: number
|
||||||
|
total_cost?: number
|
||||||
|
supplier_order_amount?: number
|
||||||
|
supplier_rebate?: number
|
||||||
|
gross_profit?: number
|
||||||
|
operator?: string
|
||||||
|
submission_date?: Date
|
||||||
|
order_processing_status?: string
|
||||||
|
remark?: string
|
||||||
|
approval_level?: string
|
||||||
|
approval_comment?: string
|
||||||
|
approval_status?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const columns: ColumnsType<OrderDataType> = [
|
||||||
|
{ title: '订单号', dataIndex: 'order_number', key: 'order_number' },
|
||||||
|
{ title: '客户平台', dataIndex: 'platform', key: 'platform' },
|
||||||
|
{ title: '平台单号', dataIndex: 'platform_order_number', key: 'platform_order_number' },
|
||||||
|
{ title: 'B2B单号', dataIndex: 'b2b_order_number', key: 'b2b_order_number' },
|
||||||
|
{ title: '酒店', dataIndex: 'hotel', key: 'hotel' },
|
||||||
|
{
|
||||||
|
title: '客人姓名',
|
||||||
|
key: 'total_name',
|
||||||
|
render: (_, record) => `名字: ${record.last_name ?? ''}姓氏: ${record.first_name ?? ''}`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '入住日期',
|
||||||
|
key: 'check_in_date',
|
||||||
|
render: (_, record) => record.check_in_date?.toLocaleDateString()
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '离店日期',
|
||||||
|
key: 'departure_date',
|
||||||
|
render: (_, record) => record.departure_date?.toLocaleDateString()
|
||||||
|
},
|
||||||
|
{ title: '总间夜数', dataIndex: 'total_room_night', key: 'total_room_night' },
|
||||||
|
{ title: '直客总数', dataIndex: 'total_direct_customer', key: 'total_direct_customer' },
|
||||||
|
{ title: '成本总额', dataIndex: 'total_cost', key: 'total_cost' },
|
||||||
|
{ title: '供应商订单总额', dataIndex: 'supplier_order_amount', key: 'supplier_order_amount' },
|
||||||
|
{ title: '供应商返佣', dataIndex: 'supplier_rebate', key: 'supplier_rebate' },
|
||||||
|
{ title: '毛利', dataIndex: 'gross_profit', key: 'gross_profit' },
|
||||||
|
{ title: '操作人', dataIndex: 'operator', key: 'operator' },
|
||||||
|
{
|
||||||
|
title: '提交日期',
|
||||||
|
key: 'submission_date',
|
||||||
|
render: (_, record) => record.submission_date?.toLocaleDateString()
|
||||||
|
},
|
||||||
|
{ title: '订单处理状态', dataIndex: 'order_processing_status', key: 'order_processing_status' },
|
||||||
|
{ title: '备注', dataIndex: 'remark', key: 'remark' },
|
||||||
|
{ title: '审批级别', dataIndex: 'approval_level', key: 'approval_level' },
|
||||||
|
{ title: '审批意见', dataIndex: 'approval_comment', key: 'approval_comment' },
|
||||||
|
{ title: '订单审批状态', dataIndex: 'approval_status', key: 'approval_status' },
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
render: () => (
|
||||||
|
<Space size={'middle'}>
|
||||||
|
<a style={{ color: 'skyblue' }}>浏览</a>
|
||||||
|
<a style={{ color: 'skyblue' }}>编辑</a>
|
||||||
|
<a style={{ color: 'skyblue' }}>确认订单</a>
|
||||||
|
</Space>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const data: OrderDataType[] = [
|
||||||
|
{
|
||||||
|
order_number: '2307000172',
|
||||||
|
platform: 'YJ-',
|
||||||
|
platform_order_number: 'MEB-23070522395',
|
||||||
|
hotel: '伦敦布罗姆立法院酒店',
|
||||||
|
first_name: 'Casar',
|
||||||
|
last_name: 'Solder',
|
||||||
|
check_in_date: new Date('2023-07-08'),
|
||||||
|
departure_date: new Date('2023-07-09'),
|
||||||
|
total_room_night: 1,
|
||||||
|
total_direct_customer: 1988,
|
||||||
|
total_cost: 1912.0,
|
||||||
|
supplier_order_amount: 2118.14,
|
||||||
|
supplier_rebate: 206.278,
|
||||||
|
gross_profit: 76.138,
|
||||||
|
operator: '曾妍',
|
||||||
|
submission_date: new Date('203-07-10'),
|
||||||
|
approval_level: '个人提交',
|
||||||
|
approval_comment: '提交',
|
||||||
|
approval_status: '待审批'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
order_number: '2307000166',
|
||||||
|
platform: 'YJ-',
|
||||||
|
platform_order_number: 'MEB-23062520324',
|
||||||
|
hotel: '伦敦尊贵海德公园罗亚尔大酒店',
|
||||||
|
first_name: 'Joanne',
|
||||||
|
last_name: 'Willie',
|
||||||
|
check_in_date: new Date('2023-07-08'),
|
||||||
|
departure_date: new Date('2023-07-09'),
|
||||||
|
total_room_night: 1,
|
||||||
|
total_direct_customer: 3580,
|
||||||
|
total_cost: 3340.0,
|
||||||
|
supplier_order_amount: 3340,
|
||||||
|
supplier_rebate: 0,
|
||||||
|
gross_profit: 240,
|
||||||
|
operator: '陈姣',
|
||||||
|
submission_date: new Date('203-07-06'),
|
||||||
|
approval_level: '个人提交',
|
||||||
|
approval_comment: '提交',
|
||||||
|
approval_status: '待审批'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const Manager: React.FC = () => {
|
||||||
|
const handleOnClick = () => {
|
||||||
|
logout()
|
||||||
|
setTimeout(() => {
|
||||||
|
removeToken()
|
||||||
|
location.reload()
|
||||||
|
}, 1500)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className={'body'}>
|
||||||
|
<div className={'top-bar'}>
|
||||||
|
<Button onClick={handleOnClick} ghost>
|
||||||
|
退出登录
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className={'search-bar'}>
|
||||||
|
<div className={'search-row'}>
|
||||||
|
<label>
|
||||||
|
日期类型
|
||||||
|
<Select
|
||||||
|
defaultValue={1}
|
||||||
|
options={[{ value: 1, label: '创建日期' }]}
|
||||||
|
showSearch
|
||||||
|
filterOption={(input, option) =>
|
||||||
|
(option?.label ?? '')
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(input.toLowerCase())
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
开始日期
|
||||||
|
<DatePicker />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
结束日期
|
||||||
|
<DatePicker />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
所属部门
|
||||||
|
<Select
|
||||||
|
defaultValue={0}
|
||||||
|
allowClear
|
||||||
|
showSearch
|
||||||
|
options={[{ label: '--不限--', value: 0 }]}
|
||||||
|
filterOption={(input, option) =>
|
||||||
|
(option?.label ?? '')
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(input.toLowerCase())
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
操作员
|
||||||
|
<Select
|
||||||
|
defaultValue={0}
|
||||||
|
allowClear
|
||||||
|
showSearch
|
||||||
|
options={[{ label: '--不限--', value: 0 }]}
|
||||||
|
filterOption={(input, option) =>
|
||||||
|
(option?.label ?? '')
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(input.toLowerCase())
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
公司名称
|
||||||
|
<Select
|
||||||
|
defaultValue={0}
|
||||||
|
allowClear
|
||||||
|
showSearch
|
||||||
|
options={[{ label: '--不限--', value: 0 }]}
|
||||||
|
filterOption={(input, option) =>
|
||||||
|
(option?.label ?? '')
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(input.toLowerCase())
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className={'search-row'}>
|
||||||
|
<label>
|
||||||
|
平台单号
|
||||||
|
<Input placeholder={'平台单号'} />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
系统单号
|
||||||
|
<Input placeholder={'系统单号'} />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
B2B单号
|
||||||
|
<Input placeholder={'B2B单号'} />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
供应商单号
|
||||||
|
<Input placeholder={'供应商单号'} />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
国家
|
||||||
|
<Select
|
||||||
|
defaultValue={0}
|
||||||
|
allowClear
|
||||||
|
showSearch
|
||||||
|
options={[{ label: '--不限--', value: 0 }]}
|
||||||
|
filterOption={(input, option) =>
|
||||||
|
(option?.label ?? '')
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(input.toLowerCase())
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
省份
|
||||||
|
<Select
|
||||||
|
defaultValue={0}
|
||||||
|
allowClear
|
||||||
|
showSearch
|
||||||
|
options={[{ label: '--不限--', value: 0 }]}
|
||||||
|
filterOption={(input, option) =>
|
||||||
|
(option?.label ?? '')
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(input.toLowerCase())
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className={'search-row'}>
|
||||||
|
<label>
|
||||||
|
酒店名称
|
||||||
|
<Input placeholder={'酒店名称'} />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
客人信息
|
||||||
|
<Input placeholder={'客人信息'} />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
成本总额
|
||||||
|
<Input placeholder={'成本总额'} />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
客户平台
|
||||||
|
<Select
|
||||||
|
defaultValue={0}
|
||||||
|
allowClear
|
||||||
|
showSearch
|
||||||
|
options={[{ label: '--不限--', value: 0 }]}
|
||||||
|
filterOption={(input, option) =>
|
||||||
|
(option?.label ?? '')
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(input.toLowerCase())
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
客户子平台
|
||||||
|
<Select
|
||||||
|
defaultValue={0}
|
||||||
|
allowClear
|
||||||
|
showSearch
|
||||||
|
options={[{ label: '--不限--', value: 0 }]}
|
||||||
|
filterOption={(input, option) =>
|
||||||
|
(option?.label ?? '')
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(input.toLowerCase())
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<Checkbox>草稿单</Checkbox>
|
||||||
|
</div>
|
||||||
|
<div className={'search-row'}>
|
||||||
|
<label>
|
||||||
|
订单状态
|
||||||
|
<Select
|
||||||
|
defaultValue={0}
|
||||||
|
allowClear
|
||||||
|
showSearch
|
||||||
|
options={[{ label: '--不限--', value: 0 }]}
|
||||||
|
filterOption={(input, option) =>
|
||||||
|
(option?.label ?? '')
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(input.toLowerCase())
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
审批级别
|
||||||
|
<Select
|
||||||
|
defaultValue={0}
|
||||||
|
allowClear
|
||||||
|
showSearch
|
||||||
|
options={[{ label: '--不限--', value: 0 }]}
|
||||||
|
filterOption={(input, option) =>
|
||||||
|
(option?.label ?? '')
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(input.toLowerCase())
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
订单审批状态
|
||||||
|
<Select
|
||||||
|
defaultValue={0}
|
||||||
|
allowClear
|
||||||
|
showSearch
|
||||||
|
options={[{ label: '--不限--', value: 0 }]}
|
||||||
|
filterOption={(input, option) =>
|
||||||
|
(option?.label ?? '')
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(input.toLowerCase())
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
订单来源
|
||||||
|
<Select
|
||||||
|
defaultValue={0}
|
||||||
|
allowClear
|
||||||
|
showSearch
|
||||||
|
options={[{ label: '--不限--', value: 0 }]}
|
||||||
|
filterOption={(input, option) =>
|
||||||
|
(option?.label ?? '')
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(input.toLowerCase())
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
颜色类型
|
||||||
|
<Select
|
||||||
|
defaultValue={0}
|
||||||
|
allowClear
|
||||||
|
showSearch
|
||||||
|
options={[{ label: '--不限--', value: 0 }]}
|
||||||
|
filterOption={(input, option) =>
|
||||||
|
(option?.label ?? '')
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(input.toLowerCase())
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div className={'operation-buttons'}>
|
||||||
|
<Button type={'primary'} icon={<SearchOutlined />}>
|
||||||
|
查询
|
||||||
|
</Button>
|
||||||
|
<Button type={'dashed'} icon={<DeleteOutlined />}>
|
||||||
|
重置
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={'operation-buttons'} style={{ marginRight: '10px' }}>
|
||||||
|
<Button type={'primary'}>预览</Button>
|
||||||
|
<Button type={'primary'}>编辑</Button>
|
||||||
|
<Button type={'primary'}>颜色设置</Button>
|
||||||
|
<Button type={'primary'}>批量提交</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Table columns={columns} dataSource={data} style={{ marginTop: '20px' }} />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Manager
|
||||||
45
src/router/index.tsx
Normal file
45
src/router/index.tsx
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
import { createBrowserRouter, Navigate, RouteObject } from 'react-router-dom'
|
||||||
|
import Login from '@/pages/Login.tsx'
|
||||||
|
import Manager from '@/pages/Manager.tsx'
|
||||||
|
import AuthRoute from '@/AuthRoute.tsx'
|
||||||
|
|
||||||
|
const routes: RouteObject[] = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
element: <AuthRoute />,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
element: <Login />,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: 'login',
|
||||||
|
path: '1',
|
||||||
|
element: <Manager />
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
element: <Manager />,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
id: 'manager',
|
||||||
|
path: '1',
|
||||||
|
element: <Login />
|
||||||
|
}
|
||||||
|
],
|
||||||
|
handle: {
|
||||||
|
auth: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '*',
|
||||||
|
element: <Navigate to="/" replace />
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = createBrowserRouter(routes)
|
||||||
|
export default router
|
||||||
155
src/services/index.tsx
Normal file
155
src/services/index.tsx
Normal file
@@ -0,0 +1,155 @@
|
|||||||
|
import axios, { type AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
|
||||||
|
import jwtDecode, { JwtPayload } from 'jwt-decode'
|
||||||
|
import { clearLocalStorage, getToken, setToken } from '@/utils/common'
|
||||||
|
import {
|
||||||
|
ACCESS_DENIED,
|
||||||
|
DATABASE_DATA_TO_LONG,
|
||||||
|
DATABASE_DATA_VALIDATION_FAILED,
|
||||||
|
DATABASE_EXECUTE_ERROR,
|
||||||
|
TOKEN_HAS_EXPIRED,
|
||||||
|
TOKEN_IS_ILLEGAL,
|
||||||
|
TOKEN_RENEW_SUCCESS,
|
||||||
|
UNAUTHORIZED
|
||||||
|
} from '@/constants/Common.constants'
|
||||||
|
import { message } from 'antd'
|
||||||
|
|
||||||
|
const service: AxiosInstance = axios.create({
|
||||||
|
baseURL: 'http://localhost:8181',
|
||||||
|
timeout: 10000,
|
||||||
|
withCredentials: false
|
||||||
|
})
|
||||||
|
|
||||||
|
service.defaults.paramsSerializer = (params: Record<string, string>) => {
|
||||||
|
return Object.keys(params)
|
||||||
|
.filter((it) => {
|
||||||
|
return Object.prototype.hasOwnProperty.call(params, it)
|
||||||
|
})
|
||||||
|
.reduce((pre, curr) => {
|
||||||
|
return params[curr] !== null
|
||||||
|
? (pre !== '' ? pre + '&' : '') + curr + '=' + encodeURIComponent(params[curr])
|
||||||
|
: pre
|
||||||
|
}, '')
|
||||||
|
}
|
||||||
|
|
||||||
|
service.interceptors.request.use(
|
||||||
|
async (config) => {
|
||||||
|
let token = getToken()
|
||||||
|
if (token !== null) {
|
||||||
|
const jwt = jwtDecode<JwtPayload>(token)
|
||||||
|
if (!jwt.exp) {
|
||||||
|
return config
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
jwt.exp * 1000 - new Date().getTime() < 1200000 &&
|
||||||
|
jwt.exp * 1000 - new Date().getTime() > 0
|
||||||
|
) {
|
||||||
|
await axios
|
||||||
|
.get('http://localhost:8181/token', {
|
||||||
|
headers: { token }
|
||||||
|
})
|
||||||
|
.then((value: AxiosResponse<_Response<Token>>) => {
|
||||||
|
const response = value.data
|
||||||
|
if (response.code === TOKEN_RENEW_SUCCESS) {
|
||||||
|
setToken(response.data?.token ?? '')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
token = getToken()
|
||||||
|
config.headers.set('token', token)
|
||||||
|
}
|
||||||
|
return config
|
||||||
|
},
|
||||||
|
async (error) => {
|
||||||
|
return await Promise.reject(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
service.interceptors.response.use(
|
||||||
|
(response: AxiosResponse<_Response<never>>) => {
|
||||||
|
switch (response.data.code) {
|
||||||
|
case UNAUTHORIZED:
|
||||||
|
case TOKEN_IS_ILLEGAL:
|
||||||
|
case TOKEN_HAS_EXPIRED:
|
||||||
|
clearLocalStorage()
|
||||||
|
void message.error(
|
||||||
|
<>
|
||||||
|
<strong>登录已过期</strong>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
setTimeout(function () {
|
||||||
|
location.reload()
|
||||||
|
}, 1500)
|
||||||
|
throw response?.data
|
||||||
|
case ACCESS_DENIED:
|
||||||
|
void message.error(
|
||||||
|
<>
|
||||||
|
<strong>暂无权限操作</strong>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
throw response?.data
|
||||||
|
case DATABASE_DATA_TO_LONG:
|
||||||
|
void message.error(
|
||||||
|
<>
|
||||||
|
<strong>数据过长</strong>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
throw response?.data
|
||||||
|
case DATABASE_DATA_VALIDATION_FAILED:
|
||||||
|
void message.error(
|
||||||
|
<>
|
||||||
|
<strong>数据验证失败</strong>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
throw response?.data
|
||||||
|
case DATABASE_EXECUTE_ERROR:
|
||||||
|
void message.error(
|
||||||
|
<>
|
||||||
|
<strong>数据库执行出错</strong>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
throw response?.data
|
||||||
|
}
|
||||||
|
return response
|
||||||
|
},
|
||||||
|
async (error: AxiosError) => {
|
||||||
|
void message.error(
|
||||||
|
<>
|
||||||
|
<strong>服务器出错</strong>，请稍后重试
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
return await Promise.reject(error?.response?.data)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
const request = {
|
||||||
|
async get<T>(url: string, data?: object): Promise<AxiosResponse<_Response<T>>> {
|
||||||
|
return await request.request('GET', url, { params: data })
|
||||||
|
},
|
||||||
|
async post<T>(url: string, data?: object): Promise<AxiosResponse<_Response<T>>> {
|
||||||
|
return await request.request('POST', url, { data })
|
||||||
|
},
|
||||||
|
async put<T>(url: string, data?: object): Promise<AxiosResponse<_Response<T>>> {
|
||||||
|
return await request.request('PUT', url, { data })
|
||||||
|
},
|
||||||
|
async delete<T>(url: string, data?: object): Promise<AxiosResponse<_Response<T>>> {
|
||||||
|
return await request.request('DELETE', url, { params: data })
|
||||||
|
},
|
||||||
|
async request<T>(
|
||||||
|
method = 'GET',
|
||||||
|
url: string,
|
||||||
|
data?: AxiosRequestConfig
|
||||||
|
): Promise<AxiosResponse<_Response<T>>> {
|
||||||
|
return await new Promise((resolve, reject) => {
|
||||||
|
service({ method, url, ...data })
|
||||||
|
.then((res) => {
|
||||||
|
resolve(res as unknown as Promise<AxiosResponse<_Response<T>>>)
|
||||||
|
})
|
||||||
|
.catch((e: Error | AxiosError) => {
|
||||||
|
reject(e)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default request
|
||||||
65
src/utils/auth.ts
Normal file
65
src/utils/auth.ts
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
import { clearLocalStorage, getCaptcha, getLocalStorage, setLocalStorage } from './common'
|
||||||
|
import { DATABASE_SELECT_OK, TOKEN_NAME } from '@/constants/Common.constants'
|
||||||
|
import request from '@/services'
|
||||||
|
|
||||||
|
let captcha: Captcha
|
||||||
|
|
||||||
|
export async function login(username: string, password: string) {
|
||||||
|
return await request.post<Token>('/login', {
|
||||||
|
username,
|
||||||
|
password
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function logout(): void {
|
||||||
|
request.get('/logout').finally(() => {
|
||||||
|
clearLocalStorage()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getLoginStatus(): boolean {
|
||||||
|
return getLocalStorage(TOKEN_NAME) !== null
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getUser(): Promise<User> {
|
||||||
|
if (getLocalStorage('userInfo') !== null) {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
resolve(JSON.parse(getLocalStorage('userInfo') as string) as User)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return requestUser()
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function requestUser(): Promise<User> {
|
||||||
|
let user: User | null
|
||||||
|
|
||||||
|
await request.get<User>('/user/info').then((value) => {
|
||||||
|
const response = value.data
|
||||||
|
if (response.code === DATABASE_SELECT_OK) {
|
||||||
|
user = response.data
|
||||||
|
setLocalStorage('userInfo', JSON.stringify(user))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return new Promise<User>((resolve, reject) => {
|
||||||
|
if (user) {
|
||||||
|
resolve(user)
|
||||||
|
}
|
||||||
|
reject(user)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getUsername(): Promise<string> {
|
||||||
|
const user = await getUser()
|
||||||
|
|
||||||
|
return user.username
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getCaptchaSrc(): string {
|
||||||
|
captcha = getCaptcha(300, 150, 4)
|
||||||
|
return captcha.base64Src
|
||||||
|
}
|
||||||
|
|
||||||
|
export function verifyCaptcha(value: string): boolean {
|
||||||
|
return captcha.value.toLowerCase() === value.replace(/\s*/g, '').toLowerCase()
|
||||||
|
}
|
||||||
136
src/utils/common.ts
Normal file
136
src/utils/common.ts
Normal file
@@ -0,0 +1,136 @@
|
|||||||
|
import { TOKEN_NAME } from '@/constants/Common.constants'
|
||||||
|
|
||||||
|
export function getQueryVariable(variable: string): string | null {
|
||||||
|
const query = window.location.search.substring(1)
|
||||||
|
const vars = query.split('&')
|
||||||
|
for (const value of vars) {
|
||||||
|
const pair = value.split('=')
|
||||||
|
if (pair[0] === variable) {
|
||||||
|
return decodeURIComponent(pair[1].replace(/\+/g, ' '))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setCookie(
|
||||||
|
name: string,
|
||||||
|
value: string,
|
||||||
|
daysToLive: number | null,
|
||||||
|
path: string | null
|
||||||
|
): void {
|
||||||
|
let cookie = name + '=' + encodeURIComponent(value)
|
||||||
|
|
||||||
|
if (typeof daysToLive === 'number') {
|
||||||
|
cookie = `${cookie}; max-age=${daysToLive * 24 * 60 * 60}`
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof path === 'string') {
|
||||||
|
cookie += '; path=' + path
|
||||||
|
}
|
||||||
|
|
||||||
|
document.cookie = cookie
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setLocalStorage(name: string, value: string): void {
|
||||||
|
localStorage.setItem(name, value)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setToken(token: string): void {
|
||||||
|
setLocalStorage(TOKEN_NAME, token)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getCookie(name: string): string | null {
|
||||||
|
const cookieArr = document.cookie.split(';')
|
||||||
|
|
||||||
|
for (const cookie of cookieArr) {
|
||||||
|
const cookiePair = cookie.split('=')
|
||||||
|
if (cookiePair[0].trim() === name) {
|
||||||
|
return decodeURIComponent(cookiePair[1])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getLocalStorage(name: string): string | null {
|
||||||
|
return localStorage.getItem(name)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getToken(): string | null {
|
||||||
|
return getLocalStorage(TOKEN_NAME)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function removeCookie(name: string): void {
|
||||||
|
document.cookie = name + '=; max-age=0'
|
||||||
|
}
|
||||||
|
|
||||||
|
export function removeLocalStorage(name: string): void {
|
||||||
|
localStorage.removeItem(name)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function removeToken(): void {
|
||||||
|
removeLocalStorage(TOKEN_NAME)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function clearLocalStorage(): void {
|
||||||
|
localStorage.clear()
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getCaptcha(width: number, high: number, num: number): Captcha {
|
||||||
|
const CHARTS = '23456789ABCDEFGHJKLMNPRSTUVWXYZabcdefghijklmnpqrstuvwxyz'.split('')
|
||||||
|
|
||||||
|
const canvas = document.createElement('canvas')
|
||||||
|
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
|
||||||
|
|
||||||
|
ctx.rect(0, 0, width, high)
|
||||||
|
ctx.clip()
|
||||||
|
|
||||||
|
ctx.fillStyle = randomColor(200, 250)
|
||||||
|
ctx.fillRect(0, 0, width, high)
|
||||||
|
|
||||||
|
for (let i = 0.05 * width * high; i > 0; i--) {
|
||||||
|
ctx.fillStyle = randomColor(0, 256)
|
||||||
|
ctx.fillRect(randomInt(0, width), randomInt(0, high), 1, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.font = `${high - 4}px Consolas`
|
||||||
|
ctx.fillStyle = randomColor(160, 200)
|
||||||
|
let value = ''
|
||||||
|
for (let i = 0; i < num; i++) {
|
||||||
|
const x = ((width - 10) / num) * i + 5
|
||||||
|
const y = high - 12
|
||||||
|
const r = Math.PI * randomFloat(-0.12, 0.12)
|
||||||
|
const ch = CHARTS[randomInt(0, CHARTS.length)]
|
||||||
|
value += ch
|
||||||
|
ctx.translate(x, y)
|
||||||
|
ctx.rotate(r)
|
||||||
|
ctx.fillText(ch, 0, 0)
|
||||||
|
ctx.rotate(-r)
|
||||||
|
ctx.translate(-x, -y)
|
||||||
|
}
|
||||||
|
|
||||||
|
const base64Src = canvas.toDataURL('image/jpg')
|
||||||
|
return {
|
||||||
|
value,
|
||||||
|
base64Src
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function randomInt(start: number, end: number): number {
|
||||||
|
if (start > end) {
|
||||||
|
const t = start
|
||||||
|
start = end
|
||||||
|
end = t
|
||||||
|
}
|
||||||
|
start = Math.ceil(start)
|
||||||
|
end = Math.floor(end)
|
||||||
|
return start + Math.floor(Math.random() * (end - start))
|
||||||
|
}
|
||||||
|
|
||||||
|
function randomFloat(start: number, end: number): number {
|
||||||
|
return start + Math.random() * (end - start)
|
||||||
|
}
|
||||||
|
|
||||||
|
function randomColor(start: number, end: number): string {
|
||||||
|
return `rgb(${randomInt(start, end)},${randomInt(start, end)},${randomInt(start, end)})`
|
||||||
|
}
|
||||||
31
src/vite-env.d.ts
vendored
Normal file
31
src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
|
type Captcha = {
|
||||||
|
value: string
|
||||||
|
base64Src: string
|
||||||
|
}
|
||||||
|
|
||||||
|
type RouteHandle = {
|
||||||
|
auth: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
type _Response<T> = {
|
||||||
|
code: number
|
||||||
|
msg: string
|
||||||
|
data: T | null
|
||||||
|
}
|
||||||
|
|
||||||
|
type Token = {
|
||||||
|
token: string
|
||||||
|
}
|
||||||
|
|
||||||
|
type User = {
|
||||||
|
id: number
|
||||||
|
username: string
|
||||||
|
enable: number
|
||||||
|
}
|
||||||
|
|
||||||
|
type LoginForm = {
|
||||||
|
username: string
|
||||||
|
password: string
|
||||||
|
}
|
||||||
29
tsconfig.json
Normal file
29
tsconfig.json
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
},
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src"],
|
||||||
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
||||||
11
tsconfig.node.json
Normal file
11
tsconfig.node.json
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"types": ["node"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
14
vite.config.ts
Normal file
14
vite.config.ts
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user