Init

2023-08-09 22:28:23 +08:00
commit 21483eee26
27 changed files with 13654 additions and 0 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -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'
+    }
+}
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 4,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}
--- a/index.html
+++ b/index.html
@@ -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>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -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"
+  }
+}
--- a/public/vite.svg
+++ b/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  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;
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -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
--- a/src/AuthRoute.tsx
+++ b/src/AuthRoute.tsx
@@ -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
--- a/src/assets/css/base.css
+++ b/src/assets/css/base.css
@@ -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
+}
--- a/src/assets/css/common.css
+++ b/src/assets/css/common.css
@@ -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;
+}
--- a/src/assets/css/login.css
+++ b/src/assets/css/login.css
@@ -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%;
+}
--- a/src/assets/css/manager.css
+++ b/src/assets/css/manager.css
@@ -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;
+}
--- a/src/constants/Common.constants.ts
+++ b/src/constants/Common.constants.ts
@@ -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
+}
--- a/src/index.css
+++ b/src/index.css
@@ -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;
+  }
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -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>
+)
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -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>登&ensp;录</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}
+                                >
+                                    登&ensp;&ensp;&ensp;&ensp;录
+                                </Button>
+                            </Form.Item>
+                        </Form>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default Login
--- a/src/pages/Manager.tsx
+++ b/src/pages/Manager.tsx
@@ -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
--- a/src/router/index.tsx
+++ b/src/router/index.tsx
@@ -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
--- a/src/services/index.tsx
+++ b/src/services/index.tsx
@@ -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
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -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()
+}
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -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)})`
+}
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -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
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -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" }]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "types": ["node"],
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -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))
+    }
+  }
+})
				`@@ -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>