初始化项目

.babelrc

+{
+  "presets": [
+    "@babel/preset-env",
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ],
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "regenerator": true
+      }
+    ],
+    [
+      "import",
+      {
+        "libraryName": "@arco-design/mobile-react",
+        "libraryDirectory": "esm", // 注意如果是 SSR 环境，这里需使用 `cjs`
+        "style": true
+      }
+    ]
+  ]
+}

.env

+API_HOST="http://192.168.31.15:8081"
+PUBLIC_PATH = "/"
\ No newline at end of file

.eslintignore

+    config/
+    scripts/
+    build/
+    node_modules/
+    \.eslintrc.js
+
+    
\ No newline at end of file

.eslintrc.js

+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true
+  },
+  extends: [
+    'plugin:react/recommended',
+    'standard'
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    },
+    ecmaVersion: 'latest',
+    sourceType: 'module'
+  },
+  plugins: [
+    'react',
+    '@typescript-eslint',
+    'eslint-plugin-import-helpers'
+  ],
+  rules: {
+    'import-helpers/order-imports': [
+      'error',
+      { // example configuration
+        newlinesBetween: 'always',
+        groups: [
+          '/^react/',
+          'module',
+          '/antd/',
+          '/^@//',
+          'absolute'
+        ],
+        alphabetize: { order: 'asc', ignoreCase: true }
+      }
+    ],
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'no-fallthrough': 'off',
+    'no-debugger': 'off',
+    'no-async-promise-executor': 'off'
+  }
+}

.gitignore

+.DS_Store
+node_modules/
+dist/
+dist.zip
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+test/unit/coverage
+test/e2e/reports
+selenium-debug.log
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

.npmrc

+engine-strict = true

.prettierignore

+**/*.md
+**/*.svg
+**/*.html
+package.json

.prettierrc

+{
+  "printWidth": 120,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true,
+  "arrowParens": "avoid",
+  "insertPragma": false,
+  "tabWidth": 2,
+  "useTabs": false,
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": {
+        "parser": "json"
+      }
+    }
+  ]
+}
\ No newline at end of file

.stylelintrc.json

+{
+  "extends": "stylelint-config-standard"
+}
\ No newline at end of file

README.md

+# 按钮权限
+
+ ## 用户管理
+```
+查看 ： sys:tbuser:page;sys:tbuser:info
+保存 ： sys:tbuser:save
+修改 ： sys:tbuser:update
+删除 ： sys:tbuser:delete
+```
+ ## 房间管理
+```
+查看 ： sys:tbroom:page,sys:tbroom:info;sys:tbuser:list
+保存 ： sys:tbroom:save
+修改 ： sys:tbroom:update
+删除 ： sys:tbroom:delete
+```
+ ## 账号管理
+```
+查看 ： sys:user:page,sys:user:info
+新增 ： sys:user:save
+修改 ： sys:user:update
+删除 ： sys:user:delete
+```
+ ## 角色管理
+```
+查看 ： sys:role:page,sys:role:info,sys:role:list
+新增 ： sys:role:save
+修改 ： sys:role:update
+删除 ： sys:role:delete
+```
+ ## 菜单管理
+```
+查看 ： sys:menu:list,sys:menu:info
+新增 ： sys:menu:save
+修改 ： sys:menu:update
+删除 ： sys:menu:delete
+```
+ ## 比赛管理
+```
+查看 ： sys:tbschedule:page,sys:tbschedule:info
+删除 ： sys:tbschedule:delete
+保存 ： sys:tbschedule:save
+修改 ： sys:tbschedule:update
+
+擂台报名管理-查看 ：sys:tbapplylt:page,sys:tbapplylt:info
+擂台报名管理-保存 ：sys:tbapplylt:save
+擂台报名管理-修改 ：sys:tbapplylt:update
+擂台报名管理-删除 ：sys:tbapplylt:delete
+
+海选报名管理-查看 ：sys:tbapplyxb:page,sys:tbapplyxb:info
+海选报名管理-保存 ：sys:tbapplyxb:save
+海选报名管理-修改 ：sys:tbapplyxb:update
+海选报名管理-删除 ：sys:tbapplyxb:delete
+
+赛程选拔-查看 ：sys:tbschedulexb:page,sys:tbschedulexb:info
+赛程选拔-保存 ：sys:tbschedulexb:save
+赛程选拔-修改 ：sys:tbschedulexb:update
+赛程选拔-删除 ：sys:tbschedulexb:delete
+```
\ No newline at end of file

build/webpack.base.config.ts

+// import AddAssetHtmlPlugin from 'add-asset-html-webpack-plugin'
+import chalk from 'chalk'
+import CopyWebpackPlugin from 'copy-webpack-plugin'
+import dotenv from 'dotenv'
+import ESLintPlugin from 'eslint-webpack-plugin'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+import path from 'path'
+import ProgressBarPlugin from 'progress-bar-webpack-plugin'
+import webpack from 'webpack'
+
+// import AntdDayjsWebpackPlugin from 'antd-dayjs-webpack-plugin'
+
+dotenv.config()
+
+const Resolve = (...args: string[]) => {
+  return path.resolve(__dirname, '../', ...args)
+}
+const isProd = process.env.NODE_ENV === 'production'
+
+const exclude = /node_modules/
+const include = /src/
+
+const BaseConfig: webpack.Configuration = {
+  entry: ['./src/main.tsx'],
+  output: {
+    path: Resolve('dist'),
+    filename: 'js/[name].[contenthash].js',
+    chunkFilename: 'js/[name].chunk.js',
+    publicPath: process.env.PUBLIC_PATH
+  },
+  module: {
+    rules: [
+      {
+        // 同时认识ts jsx js tsx 文件
+        test: /\.(t|j)sx?$/,
+        exclude,
+        include,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              // 缓存：第二次构建时，会读取之前的缓存
+              cacheDirectory: true
+            }
+          }
+        ]
+      },
+      {
+        test: /\.less$/,
+        include: [/src/, /node_modules/],
+        use: [
+          isProd ? MiniCssExtractPlugin.loader : 'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1
+            }
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'postcss-preset-env',
+                  'autoprefixer'
+                ]
+              },
+              sourceMap: true
+            }
+          },
+          {
+            loader: 'less-loader',
+            options: {
+              lessOptions: { // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。
+                modifyVars: {
+                  // 'primary-color': '#1DA57A',
+                  // 'link-color': '#1DA57A',
+                  // 'border-radius-base': '2px'
+                },
+                javascriptEnabled: true
+              }
+            }
+          }
+        ]
+      },
+      {
+        test: /\.css$/,
+        include: [/src/, /node_modules\/@ant-design/, /node_modules\/antd/, /node_modules\/@wangeditor/],
+        use: [
+          {
+            loader: 'style-loader'
+          },
+          {
+            loader: 'css-loader'
+          }
+        ]
+      },
+      {
+        test: /\.(png|svg|jpg|gif)$/,
+        exclude,
+        include,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              limit: 5000,
+              esModule: false,
+              // 分离图片至imgs文件夹
+              name () {
+                if (process.env.NODE_ENV === 'development') {
+                  return '[path][name].[ext]'
+                }
+                return 'images/[contenthash].[ext]'
+              }
+            }
+          }
+        ]
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/,
+        exclude,
+        include,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name () {
+                if (process.env.NODE_ENV === 'development') {
+                  return '[path][name].[ext]'
+                }
+                return 'fonts/[contenthash].[ext]'
+              }
+            }
+          }
+        ]
+      }
+    ]
+  },
+  plugins: [
+    /**
+     * @description 定义全局变量插件
+     */
+    new webpack.EnvironmentPlugin(['NODE_ENV', 'API_HOST']),
+    /**
+     * @description 复制资源插件
+     */
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: Resolve('public'),
+          to: Resolve('dist')
+        }
+      ]
+    }),
+    /**
+     * @description webpack 构建进度条
+     */
+    new (ProgressBarPlugin as any)({
+      width: 50, // 默认20，进度格子数量即每个代表进度数，如果是20，那么一格就是5。
+      format: chalk.blue.bold('build') + chalk.yellow('[:bar] ') + chalk.green.bold(':percent') + ' (:elapsed秒)',
+      complete: '-', // 默认“=”，完成字符
+      clear: false // 默认true，完成时清除栏的选项
+    }),
+    new ESLintPlugin({
+      fix: true /* 自动帮助修复 */,
+      extensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'react'],
+      exclude: 'node_modules'
+    }),
+    new HtmlWebpackPlugin({
+      inject: true,
+      template: path.resolve(__dirname, '../src/index.html')
+    })
+    // new AntdDayjsWebpackPlugin()
+  ],
+  resolve: {
+    extensions: ['.js', '.json', '.jsx', '.less', '.css', '.vue', '.json', '.ts', '.tsx'],
+    alias: {
+      '@': Resolve('src')
+    }
+  },
+  cache: {
+    type: 'filesystem'
+  },
+  watchOptions: {
+    ignored: /node_modules/
+  },
+  /**
+   * @description 设置webpack 构建时候信息输出
+   */
+  stats: {
+    colors: true,
+    modules: false,
+    children: false,
+    chunks: false,
+    chunkModules: false
+  }
+}
+export default BaseConfig

build/webpack.dev.config.ts

+// import webpack from 'webpack'
+import path from 'path'
+import UnusedWebpackPlugin from 'unused-webpack-plugin'
+import merge from 'webpack-merge'
+
+import BaseConfig from './webpack.base.config'
+
+const DevConfig = merge(BaseConfig, {
+  mode: 'development',
+  devtool: 'eval',
+  output: {
+    filename: '[name].bundle.js',
+    pathinfo: false
+  },
+  devServer: {
+    hot: true,
+    open: false,
+    // host: HOST,
+    // stats: 'errors-warnings',
+    compress: false,
+    historyApiFallback: true
+  },
+  // plugins: [new webpack.HotModuleReplacementPlugin()],
+  plugins: [
+    new UnusedWebpackPlugin({
+      directories: [path.join(__dirname, 'src')],
+      root: path.join(__dirname, '../')
+    })
+  ]
+} as any)
+
+module.exports = DevConfig

build/webpack.prod.config.ts

+import { CleanWebpackPlugin } from 'clean-webpack-plugin'
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+import TerserPlugin from 'terser-webpack-plugin'
+// import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
+// import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
+import merge from 'webpack-merge'
+
+import BaseConfig from './webpack.base.config'
+
+const DevConfig = merge(BaseConfig, {
+  mode: 'production',
+  optimization: {
+    splitChunks: {
+      chunks: 'all', // initial(初始块)、async(按需加载块)、all(全部块)，默认为all
+      minChunks: 2, // 表示被引用次数，默认为1；
+      // maxInitialRequests: 5, //最大的按需(异步)加载次数，默认为1；
+      // minSize: 2, //表示在压缩前的最小模块大小，默认为0；
+      // maxInitialRequests: 1, //最大的初始化加载次数，默认为1；
+      minSize: 1,
+      cacheGroups: {
+        commons: {
+          name: 'common' // 拆分出来块的名字(Chunk Names)，默认由块名和hash值自动生成
+        }
+      }
+    },
+    minimizer: [
+      new TerserPlugin({
+        parallel: true
+        // sourceMap: true,
+      })
+    ]
+  },
+  plugins: [
+    new CleanWebpackPlugin({
+
+    }),
+    new MiniCssExtractPlugin({
+      filename: 'css/[name].[chunkhash].css'
+    }),
+    new CssMinimizerPlugin()
+    // new BundleAnalyzerPlugin()
+  ]
+})
+
+module.exports = DevConfig

package.json

+{
+  "name": "base-react-ts-web",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "preinstall": "only-allow npm",
+    "dev": "cross-env ENV=local NODE_ENV=development node --no-deprecation node_modules/webpack-dev-server/bin/webpack-dev-server.js --config build/webpack.dev.config.ts",
+    "build": "cross-env ENV=prod NODE_ENV=production webpack --config build/webpack.prod.config.ts",
+    "fix": "eslint --fix"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@gitlab.viz-cloud.top:fe/product/ig-packag-manage-web.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.18.6",
+    "@babel/plugin-transform-modules-commonjs": "^7.18.6",
+    "@babel/plugin-transform-runtime": "^7.18.6",
+    "@babel/preset-env": "^7.18.6",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@types/koa": "^2.13.5",
+    "@types/koa-static": "^4.0.2",
+    "@types/lodash": "^4.14.182",
+    "@types/progress-bar-webpack-plugin": "^2.1.2",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "@types/styled-components": "^5.1.25",
+    "@types/unused-webpack-plugin": "^2.4.2",
+    "@types/webpack-bundle-analyzer": "^4.4.1",
+    "@typescript-eslint/eslint-plugin": "^5.30.5",
+    "@typescript-eslint/parser": "^5.30.5",
+    "add-asset-html-webpack-plugin": "^5.0.2",
+    "autoprefixer": "^10.4.7",
+    "babel-loader": "^8.2.5",
+    "babel-plugin-import": "^1.13.5",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^4.0.0",
+    "dotenv": "^16.0.1",
+    "eslint": "^8.19.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-import-helpers": "^1.2.1",
+    "eslint-plugin-n": "^15.2.4",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-webpack-plugin": "^3.2.0",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.5.0",
+    "less": "^4.1.3",
+    "less-loader": "^11.0.0",
+    "mini-css-extract-plugin": "^2.6.1",
+    "node-loader": "^2.0.0",
+    "nodemon": "^2.0.20",
+    "only-allow": "^1.1.1",
+    "postcss-loader": "^7.0.0",
+    "postcss-preset-env": "^7.7.2",
+    "progress-bar-webpack-plugin": "^2.1.0",
+    "style-loader": "^3.3.1",
+    "stylelint-config-standard": "^26.0.0",
+    "terser-webpack-plugin": "^5.3.3",
+    "ts-node": "^10.8.2",
+    "typescript": "^4.7.4",
+    "unused-webpack-plugin": "^2.4.0",
+    "webpack": "^5.73.0",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.9.3",
+    "webpack-merge": "^5.8.0"
+  },
+  "dependencies": {
+    "@arco-design/mobile-react": "^2.21.2",
+    "@reduxjs/toolkit": "^1.8.3",
+    "ahooks": "^3.5.2",
+    "axios": "^0.27.2",
+    "lodash": "^4.17.21",
+    "rc-tween-one": "^3.0.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.0.2",
+    "react-router-dom": "^6.3.0",
+    "redux-persist": "^6.0.0",
+    "styled-components": "^5.3.5"
+  },
+  "engines": {
+    "node": "18.x || 16.x"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
+      "eslint --fix",
+      "git add"
+    ]
+  }
+}

src/config/config.ts

+// ? 全局不动配置项 只做导出不做修改
+
+// * 首页地址（默认）
+export const HOME_URL: string = '/home'

src/config/index.ts

+export const API_HOST = process.env.API_HOST
+export const COS_HOST = process.env.COS_HOST

src/hooks/useParams.ts

+import { useMemo } from 'react'
+
+export const useGetParams = () => {
+  const { params } = useMemo(() => {
+    const url = window.location.href
+    const d: Record<string, string | undefined> = {}
+    if (url?.indexOf('?') !== -1) {
+      const arr = url.slice(url?.indexOf('?') + 1).split('&')
+      arr.forEach(item => {
+        const [key, val] = item.split('=') || []
+        d[key] = val
+      })
+    }
+    return {
+      params: d
+    }
+  }, [])
+  return {
+    params
+  }
+}

src/hooks/useRequest.ts

+import { useCallback, useEffect, useState } from 'react'
+
+import { get, isFunction, isString } from 'lodash'
+
+type Cb = (parma?: any) => any
+type Options = {
+  defaultValue?: any;
+  deps?: any[];
+  immediate?: boolean;
+  formatResult?: string | ((res: any) => any);
+  onSuccess?: (res: any) => void;
+  onError?: (res: any) => void;
+}
+type Result<T> = {
+  data: T;
+  loading: boolean;
+  run: (params?: any) => Promise<any>;
+}
+
+export function useRequest<T = any> (fn: Cb, options: Options): Result<T> {
+  const [loading, setLoading] = useState(false)
+  const [data, setData] = useState<T>(options?.defaultValue)
+  const {
+    immediate = true,
+    formatResult,
+    onSuccess,
+    onError
+  } = options || {}
+
+  const run = useCallback(async (...args: any[]) => {
+    return new Promise((resolve, reject) => {
+      if (isFunction(fn)) {
+        if (loading) return
+        setLoading(true)
+        fn(...args)
+          .then((res) => {
+            if (formatResult) {
+              if (isFunction(formatResult)) {
+                res = formatResult(res)
+              }
+              if (isString(formatResult)) {
+                res = get(res, formatResult)
+              }
+            }
+            setData(res)
+            onSuccess && onSuccess(res)
+            resolve(res)
+            setLoading(false)
+          }).catch((error) => {
+            console.log('接口请求失败：', error)
+            onError && onError(error)
+            reject(error)
+            setLoading(false)
+          })
+      }
+    })
+  }, [fn])
+
+  useEffect(() => {
+    if (immediate) run()
+  }, [])
+
+  return {
+    loading,
+    data,
+    run
+  }
+}

src/hooks/useStore.ts

+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
+
+import type { RootState, AppDispatch } from '../store'
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = () => useDispatch<AppDispatch>()
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

src/index.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>视频旋转</title>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>
\ No newline at end of file

src/layouts/BaseLayout.tsx

+import { Suspense } from 'react'
+import { Outlet } from 'react-router-dom'
+
+const App = () => {
+  return (
+    <main>
+        <Suspense
+          // fallback={
+          //  () => (null)
+          // }
+          >
+          <Outlet />
+        </Suspense>
+    </main>
+  )
+}
+
+export default App

src/less/main.less

+@import './reset.less'
\ No newline at end of file

src/less/reset.less

+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font-family: "Microsoft YaHei", "PingFang SC";
+  vertical-align: middle;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+a {
+  text-decoration: none;
+}

src/main.tsx

+import ReactDOM from 'react-dom/client'
+import { Provider } from 'react-redux'
+import { HashRouter } from 'react-router-dom'
+
+import setRootPixel from '@arco-design/mobile-react/tools/flexible'
+import dayjs from 'dayjs'
+import { PersistGate } from 'redux-persist/integration/react'
+
+import { store, persistor } from '@/store'
+
+import Routes from './router'
+import AuthRouter from './router/AuthRouter'
+
+import 'dayjs/locale/zh-cn'
+dayjs.locale('zh-cn')
+
+const ROOT = document.getElementById('root')
+
+setRootPixel()
+
+const App = () => (
+  // <React.StrictMode>
+  <Provider store={store}>
+    <PersistGate loading={null} persistor={persistor}>
+      <HashRouter>
+        <AuthRouter>
+          <Routes />
+        </AuthRouter>
+      </HashRouter>
+    </PersistGate>
+  </Provider>
+  // </React.StrictMode>
+)
+ROOT && ReactDOM.createRoot(ROOT).render(<App />)

src/pages/GameRoomTools/index.tsx

+import React from 'react'
+
+import { Button, Cell, Toast } from '@arco-design/mobile-react'
+import styled from 'styled-components'
+
+import { useRequest } from '@/hooks/useRequest'
+
+import { DeleteMahjongQueenApi, GetMahjongQueenListApi } from './services'
+
+const LoginPage: React.FC = () => {
+  const { data: dataList, run: refreshList } = useRequest<any[]>(GetMahjongQueenListApi, {
+    defaultValue: [],
+    formatResult: (res) => (res?.data || []),
+    onSuccess: () => {
+      Toast.success('刷新成功')
+    },
+    onError: () => {
+      Toast.error('刷新失败')
+    }
+  })
+  const { loading, run: handleClickClear } = useRequest<any[]>(DeleteMahjongQueenApi, {
+    immediate: false,
+    onSuccess: () => {
+      Toast.success('清空成功')
+      refreshList()
+    },
+    onError: () => {
+      Toast.error('清空失败')
+    }
+  })
+
+  return (
+    <Layout>
+      <Headers>
+        <Button inline onClick={refreshList}>刷新</Button>
+        <Button inline type="ghost" loading={loading} onClick={handleClickClear}>清空</Button>
+      </Headers>
+
+      <Cell.Group>
+        {
+          dataList.map((item) => (<Cell key={item.userId} label={item.userId} />))
+        }
+      </Cell.Group>
+    </Layout>
+  )
+}
+
+export default LoginPage
+
+const Layout = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  /* background: #000
+    url('https://fe-internal-files-1301947356.cos.ap-beijing.myqcloud.com/public/image/background.svg')
+    no-repeat 50%; */
+`
+
+const Headers = styled.div`
+  display:flex;
+  justify-content: center;
+  > button {
+    margin:10px;
+  }
+`

src/pages/GameRoomTools/services.ts

+import { TLogin } from '@/typings/login'
+import { Delete, Get, TResult } from '@/utils/request'
+
+/**
+ * @description: 查询麻将队列
+ */
+export const GetMahjongQueenListApi = (): TResult<any> => {
+  return Get(`${process.env.API_HOST}/hzy-api/api/getMahjongQueue`)
+}
+
+/**
+ * @description: 查询麻将队列
+ */
+export const DeleteMahjongQueenApi = (params: TLogin): TResult<any> => {
+  return Delete(`${process.env.API_HOST}/hzy-api/api/delMahjongQueue`)
+}

src/pages/Home/services.ts

+import { TLogin } from '@/typings/login'
+import { Delete, Get, TResult } from '@/utils/request'
+
+/**
+ * @description: 查询麻将队列
+ */
+export const GetMahjongQueenListApi = (): TResult<any> => {
+  return Get(`${process.env.API_HOST}/hzy-api/api/getMahjongQueue`)
+}
+
+/**
+ * @description: 查询麻将队列
+ */
+export const DeleteMahjongQueenApi = (params: TLogin): TResult<any> => {
+  return Delete(`${process.env.API_HOST}/hzy-api/api/delMahjongQueue`)
+}

src/pages/Login/common/services.ts

+import { TLogin } from '@/typings/login'
+import { Post, TResult } from '@/utils/request'
+
+const PATHS = {
+  LOGIN: `${process.env.API_HOST}/hzy-admin/login`
+}
+
+/**
+ * 登录响应参数
+ */
+type LoginRes = { token: string }
+
+/**
+ * @description: 列表查询
+ * @param {TLogin} params
+ * @return {*}
+ */
+export const LoginApi = (params: TLogin): TResult<LoginRes> => {
+  return Post(PATHS.LOGIN, { params })
+}

src/pages/Login/index.tsx

+import React, { useState, useEffect, useRef, ChangeEvent, MouseEvent, TouchEvent } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import { Button, Input } from '@arco-design/mobile-react'
+import styled from 'styled-components'
+
+const LoginPage: React.FC = () => {
+  const uuid = useRef('')
+  const [captchaUrl, setCaptchaUrl] = useState<string>('')
+  console.log(captchaUrl)
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    getCaptcha()
+  }, [])
+
+  // 获取uuid 验证码
+  const getCaptcha = () => {
+    const s: any = []
+    const hexDigits = '0123456789abcdef'
+    for (let i = 0; i < 36; i++) {
+      s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
+    }
+    s[14] = '4' // bits 12-15 of the time_hi_and_version field to 0010
+    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1) // bits 6-7 of the clock_seq_hi_and_reserved to 01
+    s[8] = s[13] = s[18] = s[23] = '-'
+    const _uuid = s.join('')
+    uuid.current = _uuid
+    setCaptchaUrl(`${process.env.API_HOST}/hzy-admin/captcha?uuid=${_uuid}`)
+  }
+
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+
+  const onUsernameChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setUsername(e.target.value)
+  }
+  const onPasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setPassword(e.target.value)
+  }
+
+  const handleLogin = (e: MouseEvent | TouchEvent) => {
+    console.log('登录::', username, password)
+    navigate('/game-room-tools')
+  }
+  return (
+    <LoginLayout>
+      <LoginContainer>
+        <LoginContainerHeader>移动端模板</LoginContainerHeader>
+        <Input label="用户名" onChange={onUsernameChange} placeholder="请输入用户名" clearable border="none" />
+        <Input
+          label="密码"
+          onChange={onPasswordChange}
+          type="password"
+          placeholder="请输入密码"
+          clearable
+          border="none"
+        />
+        <LoginButton needActive onClick={handleLogin}>
+          Login
+        </LoginButton>
+      </LoginContainer>
+    </LoginLayout>
+  )
+}
+
+export default LoginPage
+
+const LoginLayout = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  /* background: #000
+    url('https://fe-internal-files-1301947356.cos.ap-beijing.myqcloud.com/public/image/background.svg')
+    no-repeat 50%; */
+`
+
+const LoginContainer = styled.div`
+  width: 100%;
+  height: 500px;
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto auto;
+  background: transparent;
+  padding: 20px;
+  .ant-space-align-center {
+    align-items: flex-start;
+  }
+`
+const LoginContainerHeader = styled.h1`
+  height: 44px;
+  line-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin-bottom: 20px;
+  font-size: 32px;
+  > img {
+    display: block;
+    height: 44px;
+    margin-bottom: 10px;
+  }
+  > span {
+    color: rgba(0, 0, 0, 0.85);
+    font-weight: 600;
+  }
+`
+
+const LoginButton = styled(Button)`
+  width: 90%;
+  margin: 20px auto 0;
+`

src/router/AuthRouter.tsx

+import { Navigate, useLocation } from 'react-router-dom'
+
+import { HOME_URL } from '@/config/config'
+import { useAppSelector } from '@/hooks/useStore'
+import { store } from '@/store'
+import { searchRoute } from '@/utils/utils'
+
+import { rootRouter } from './index'
+
+/**
+ * @description 路由守卫组件
+ * */
+const AuthRouter = (props: any) => {
+  const userStore = useAppSelector(state => state.user)
+  const { pathname } = useLocation()
+  const route = searchRoute(pathname, rootRouter)
+  // console.log('[ route ]', rootRouter)
+  // * 在跳转路由之前，清除所有的请求
+  // axiosCanceler.removeAllPending()
+
+  // * 判断当前路由是否需要访问权限(不需要权限直接放行)
+  if (!route?.meta?.auth) return props.children
+
+  // * 判断是否有Token
+  const token = store.getState().user.token
+  if (!token) return <Navigate to="/login" replace />
+
+  // * Dynamic Router(动态路由，根据后端返回的菜单数据生成的一维数组)
+  const dynamicRouter = userStore.authRouter
+  // * Static Router(静态路由，必须配置首页地址，否则不能进首页获取菜单、按钮权限等数据)，获取数据的时候会loading，所有配置首页地址也没问题
+  const staticRouter = [HOME_URL, '/403']
+  const routerList = dynamicRouter?.concat(staticRouter)
+  // * 如果访问的地址没有在路由表中重定向到403页面
+  if (routerList?.indexOf(pathname) === -1) return <Navigate to="/403" />
+
+  // * 当前账号有权限返回 Router，正常访问页面
+  return props.children
+}
+
+export default AuthRouter

src/router/index.tsx

+import { lazy } from 'react'
+import { Navigate, useRoutes } from 'react-router-dom'
+
+import BaseLayout from '@/layouts/BaseLayout'
+import Login from '@/pages/Login'
+
+import { RouteObject } from './interface'
+
+const GameRoomTools = lazy(() => import('@/pages/GameRoomTools/index'))
+const Home = lazy(() => import('@/pages/Home/index'))
+
+export const rootRouter: RouteObject[] = [
+  {
+    path: '/',
+    element: <Navigate to="/home" />
+  },
+  {
+    path: '/Login',
+    element: <Login />,
+    meta: {
+      auth: false,
+      title: '登录页',
+      key: 'login'
+    }
+  },
+  {
+    element: <BaseLayout />,
+    children: [
+      {
+        path: '/game-room-tools',
+        name: '首页',
+        element: <GameRoomTools />,
+        meta: {
+          auth: false,
+          title: '首页',
+          key: 'home'
+        }
+      },
+      {
+        path: '/home',
+        name: '视频旋转',
+        element: <Home />,
+        meta: {
+          auth: false,
+          title: '视频旋转',
+          key: 'home'
+        }
+      }
+    ]
+  }
+  // 异常页面
+  // { path: '*',  element: <Pack /> }
+]
+const Routes = () => {
+  const routes = useRoutes(rootRouter)
+  return routes
+}
+export default Routes

src/router/interface/index.ts

+import { ReactNode } from 'react'
+
+export interface MetaProps {
+  keepAlive?: boolean
+  auth?: boolean
+  title: string
+  key?: string
+}
+
+export interface RouteObject {
+  caseSensitive?: boolean
+  children?: RouteObject[]
+  element?: ReactNode
+  index?: boolean
+  path?: string
+  meta?: MetaProps
+  isLink?: string
+  name?: string
+}

src/services/common.ts

+import { TResult, Post } from '@/utils/request'
+
+/**
+ * @description 登录
+ * @api http://api-center-bigdata.huan.tv/project/529/interface/api/8925
+ */
+export const LoginApi = (params: Record<string, any>): TResult => {
+  // return new Promise((resolve, reject) => {
+  //   const { password: inputPassword, account } = params;
+  //   if (!UserDb.has(account)) {
+  //     reject("用户名不存在");
+  //   }
+  //   const { res, password } = UserDb.get(account);
+  //   if (!inputPassword || inputPassword !== password) {
+  //     reject("密码错误");
+  //   }
+  //   resolve({
+  //     code: 200,
+  //     msg: "登录成功",
+  //     data: res
+  //   });
+  // });
+  return Post('/api/admin/outer/auth/login?encrypt=false', { params })
+}

src/store/index.ts

+import { combineReducers, configureStore } from '@reduxjs/toolkit'
+import { persistStore, persistReducer } from 'redux-persist'
+import storage from 'redux-persist/es/storage'
+
+import UserReducer from './user'
+
+// 创建reducer(拆分reducer)
+const reducer = combineReducers({
+  user: UserReducer
+})
+
+// redux 持久化配置
+const persistConfig = {
+  key: 'redux-state',
+  storage
+}
+const persistedReducer = persistReducer(persistConfig, reducer)
+
+// 创建 store
+const store = configureStore({
+  reducer: persistedReducer,
+  devTools: process.env.NODE_ENV !== 'production',
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: false
+    })
+})
+
+// 创建持久化 store
+const persistor = persistStore(store)
+
+export type RootState = ReturnType<typeof store.getState>
+
+export type AppDispatch = typeof store.dispatch
+
+export { store, persistor }

src/store/user.ts

+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+export const NAMESPACE_KEY = 'user'
+
+type State = {
+  status: 'idle' | 'loading' | 'succeeded' | 'failed',
+  isLogin: boolean
+  username: string
+  password: string
+  token: string
+  remember: boolean
+  avatar?: string
+  createTime: number
+  dept: string
+  deptId: number
+  deptList: string
+  email: string
+  enabled: boolean
+  licenseExpired: boolean
+  nickname: string
+  phone: string
+  roleIdList: string
+  roles: string[]
+  userLoginInfo: {
+    address: string
+    device: string
+    ip: string
+    lastLoginTime: number
+  },
+  authRouter: string[]
+}
+
+const initialState: State = {
+  status: 'idle',
+  isLogin: false,
+  username: '',
+  password: '',
+  token: '',
+  remember: false,
+  avatar: '',
+  createTime: 0,
+  dept: '',
+  deptId: 0,
+  deptList: '',
+  email: '',
+  enabled: false,
+  licenseExpired: false,
+  nickname: '',
+  phone: '',
+  roleIdList: '',
+  roles: [],
+  userLoginInfo: {
+    address: '',
+    device: '',
+    ip: '',
+    lastLoginTime: 0
+  },
+  authRouter: []
+}
+
+const { reducer, actions } = createSlice({
+  name: NAMESPACE_KEY,
+  initialState,
+  reducers: {
+    // login(state, { payload }: PayloadAction<Partial<State>>) {
+    //   Object.assign(state, payload)
+    // },
+    setAuthRouter (state, { payload }: PayloadAction<string[]>) {
+      state.authRouter = payload
+    },
+    setLogin (state, { payload }: PayloadAction<any>) {
+      state.token = payload?.token
+      state.username = payload?.username
+      state.isLogin = true
+    },
+    setLogout (state) {
+      state.token = ''
+      state.isLogin = false
+    }
+  }
+})
+
+export const { setAuthRouter, setLogin, setLogout } = actions
+export default reducer

src/typings/images.d.ts

+declare module '*.svg'
+declare module '*.png'
+declare module '*.jpg'
+declare module '*.jpeg'
+declare module '*.gif'
+declare module '*.bmp'
+declare module '*.tiff'

src/typings/login.ts

+export type TLogin = {
+  captcha: string, // 验证码
+  password: string, // 密码
+  username: string, // 账户
+  uuid: string, // uuid
+  grant_type: string // 登录类型 默认值：password
+}

src/utils/lazyLoad.tsx

+import React from 'react'
+
+/**
+ * @description 路由懒加载
+ * @param {Element} Comp 需要访问的组件
+ * @returns element
+ */
+const lazyLoad = (Comp: React.LazyExoticComponent<any>): React.ReactNode => {
+  return (
+      <Comp />
+  )
+}
+
+export default lazyLoad

src/utils/request.ts

+import axios, { Method, AxiosRequestConfig } from 'axios'
+
+// import { message } from 'antd'
+
+import { store } from '@/store'
+
+export type TResult<T = any> = Promise<{ code: number, data: T, msg: string }>;
+const request = axios.create({
+  baseURL: process.env.API_HOST,
+  headers: { 'Content-Type': 'application/json' },
+  withCredentials: false
+})
+
+request.interceptors.request.use(
+  (config) => {
+    const _config = Object.assign({}, config)
+    return _config
+  },
+  (error) => {
+    return Promise.reject(error)
+  }
+)
+
+request.interceptors.response.use(
+  (res: any) => {
+    // console.log('res===>', res)
+
+    const { code } = res.data || {}
+    // const { code, msg } = res.data || {}
+    switch (code) {
+      case 0:
+        return res.data
+      case 10020:
+      case 10021:
+        window.location.href = '/login' // react 路由组件跳转需要使用hooks方式，所以写成原生跳转
+      default:
+        // message.error(msg || '服务器错误')
+        return Promise.reject(res)
+    }
+  },
+  (err) => {
+    switch (err?.response?.status) {
+      case 400:
+        break
+      case 401:
+        break
+      case 405:
+      case 500:
+      default:
+        break
+    }
+    return Promise.reject(err.response)
+  }
+)
+
+interface RequestOptions extends Partial<AxiosRequestConfig> {
+  isAuth?: boolean;
+  urlFields?: string[];
+  isForm?: boolean;
+  transformParams?: (params: any) => any;
+}
+const createMethod =
+  (method: Method = 'get') =>
+    (url: string, options?: RequestOptions) => {
+      const {
+        urlFields,
+        isAuth = true,
+        isForm = false,
+        headers = {},
+        transformParams,
+        params,
+        ...args
+      } = options || {}
+
+      let data = ['get'].includes(method) ? { params } : { data: params }
+      // : { data: Qs.stringify(params, { arrayFormat: "brackets" }) };
+
+      // 处理formdata形式
+      if (isForm) {
+        const formParams = new FormData()
+        for (const key in params) {
+          formParams.append(key, params[key])
+        }
+        data.data = formParams;
+        (options as any).headers = Object.assign({}, options?.headers, {
+          'Content-Type': 'multipart/form-data'
+        })
+      }
+      if (typeof transformParams === 'function') {
+        data = transformParams(params)
+      }
+      // 过滤URl参数
+      if (urlFields) {
+        for (const key of urlFields) {
+          url = url.replace(new RegExp(`:${key}`), (params as any)[key])
+        }
+      }
+      // 接口增加权限token
+      if (isAuth) {
+        const data: any = store.getState()
+        if (data.user) {
+          // (headers as any)["token"] = data.user["token"];
+          (headers as any).token = store.getState().user.token
+        }
+      }
+
+      return request(url, {
+        method,
+        headers,
+        ...data,
+        ...args
+      } as any) as Promise<any>
+    }
+
+export const Post = createMethod('post')
+export const Get = createMethod('get')
+export const Delete = createMethod('delete')
+export const Put = createMethod('put')
+
+export default request

src/utils/utils.ts

+import { RouteObject } from '@/router/interface'
+
+interface MenuOptions {
+  path: string
+  label: string
+  icon?: string
+  isLink?: string
+  close?: boolean
+  children?: MenuOptions[]
+}
+/**
+ * @description 获取需要展开的 subMenu
+ * @param {String} path 当前访问地址
+ * @returns array
+ */
+export const getOpenKeys = (path: string) => {
+  let newStr: string = ''
+  const newArr: any[] = []
+  const arr = path.split('/').map(i => '/' + i)
+  for (let i = 1; i < arr.length - 1; i++) {
+    newStr += arr[i]
+    newArr.push(newStr)
+  }
+  return newArr
+}
+
+/**
+ * @description 递归查询对应的路由
+ * @param {String} path 当前访问地址
+ * @param {Array} routes 路由列表
+ * @returns array
+ */
+export const searchRoute = (path: string, routes: RouteObject[] = []): RouteObject => {
+  let result: RouteObject = {}
+  for (const item of routes) {
+    if (item.path === path) return item
+    if (item.children) {
+      const res = searchRoute(path, item.children)
+      if (Object.keys(res).length) result = res
+    }
+  }
+  return result
+}
+/**
+ * @description 双重递归 找出 所有面包屑生成对象存到 redux 中，就不用每次都去递归查找了
+ * @param {String} menuList 当前菜单列表
+ * @returns object
+ */
+export const findAllBreadcrumb = (menuList: MenuOptions[]): { [key: string]: any } => {
+  const handleBreadcrumbList: any = {}
+  const loop = (menuItem: MenuOptions) => {
+    // 下面判断代码解释 *** !item?.children?.length   ==>   (item.children && item.children.length > 0)
+
+    // console.log('[ menulist  ]', menuItem.path, menuList)
+    if (menuItem?.children?.length) menuItem.children.forEach(item => loop(item))
+    else handleBreadcrumbList[menuItem.path] = getBreadcrumbList(menuItem.path, menuList)
+  }
+  menuList.forEach(item => loop(item))
+  return handleBreadcrumbList
+}
+
+/**
+ * @description 递归当前路由的 所有 关联的路由，生成面包屑导航栏
+ * @param {String} path 当前访问地址
+ * @param {Array} menuList 菜单列表
+ * @returns array
+ */
+export const getBreadcrumbList = (path: string, menuList: MenuOptions[]) => {
+  const tempPath: any[] = []
+  try {
+    const getNodePath = (node: MenuOptions) => {
+      tempPath.push(node)
+      // 找到符合条件的节点，通过throw终止掉递归
+      if (node.path === path) {
+        throw new Error('GOT IT!')
+      }
+      if (node.children && node.children.length > 0) {
+        for (let i = 0; i < node.children.length; i++) {
+          getNodePath(node.children[i])
+        }
+        // 当前节点的子节点遍历完依旧没找到，则删除路径中的该节点
+        tempPath.pop()
+      } else {
+        // 找到叶子节点时，删除路径当中的该叶子节点
+        tempPath.pop()
+      }
+    }
+    for (let i = 0; i < menuList.length; i++) {
+      getNodePath(menuList[i])
+    }
+  } catch (e) {
+    return tempPath.map(item => item.label)
+  }
+}
+/**
+ * @description 使用递归处理路由菜单，生成一维数组，做菜单权限判断
+ * @param {Array} menuList 所有菜单列表
+ * @param {Array} newArr 菜单的一维数组
+ * @return array
+ */
+export function handleRouter (routerList: MenuOptions[], newArr: string[] = []) {
+  routerList.forEach((item: MenuOptions) => {
+    typeof item === 'object' && item.path && newArr.push(item.path)
+    item.children && item.children.length && handleRouter(item.children, newArr)
+  })
+  return newArr
+}

tsconfig.json

+{
+  "compilerOptions": {
+    "strict": true,
+    "module": "commonjs",
+    "target": "es5",
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "checkJs": true,
+    // "noImplicitAny": true,
+    // "importHelpers": true,
+    "noEmit": true,
+    "sourceMap": true,
+    "experimentalDecorators": true,
+    "lib": ["esnext", "dom"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules"]
+}