// src/utils/lazyLoadComp
import { Suspense } from 'react'

const lazyLoadComp = (children: JSX.Element, loading: JSX.Element = <div>loading</div>) => {
  return <Suspense fallback={loading}>{children}</Suspense>
}

export default lazyLoadComp

// src/router/Redirect
import { useEffect } from 'react'
import { useNavigate, To } from 'react-router-dom'

interface RedirectProps {
  to: To
}

function Redirect(props: RedirectProps) {
  const navigate = useNavigate()
  useEffect(() => {
    navigate(props.to)
  })
  return null
}

export default Redirect

// src/router/index.tsx
// 别名配置在后面
import { lazy } from 'react'
import { RouteObject } from 'react-router-dom'
import lazyLoadComp from '@/utils/lazyLoadComp'

import Redirect from './Redirect'
import AppLayout from '@/layout/AppLayout'

const LoginPage = lazy(() => import('@/layout/LoginPage'))
const NotFound = lazy(() => import('@/pages/NotFound'))
const DocsLayout = lazy(() => import('@/layout/DocsLayout'))

const HomePage = lazy(() => import('@/pages/HomePage'))
const TaskList = lazy(() => import('@/pages/TaskList'))
const TaskDetailPage = lazy(() => import('@/pages/TaskDetailPage'))

const DocsList = lazy(() => import('@/pages/DocsList'))
const DocsDetail = lazy(() => import('@/pages/DocsDetail'))

const MemberManage = lazy(() => import('@/pages/MemberManage'))

const routes = [
  { path: '/', element: <Redirect to="/index" /> },
  { path: '/login', element: <LoginPage /> },
  {
    path: '/index',
    element: <AppLayout />,
    children: [
      { index: true, element: lazyLoadComp(<HomePage />) },
      { path: 'taskList', element: lazyLoadComp(<TaskList />) },
      { path: 'taskDetail/:id', element: lazyLoadComp(<TaskDetailPage />) },
      {
        path: 'docs',
        element: lazyLoadComp(<DocsLayout />),
        children: [
          { index: true, element: lazyLoadComp(<DocsList />) },
          { path: 'docsDetail/:id', element: lazyLoadComp(<DocsDetail />) },
        ],
      },
      { path: 'memberManage', element: lazyLoadComp(<MemberManage />) },
    ],
  },
  { path: '*', element: <NotFound /> },
] as RouteObject[]

export default routes

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  preflight: false,
  extract: {
    include: ['**/*.{jsx,tsx,css}'],
    exclude: ['node_modules', '.git', '.dist', 'public'],
  },
})

// src/index.ts
import './virtual:windi.css'
import '@icon-park/react/styles/index.css'

// src/App.tsx
import { ConfigProvider } from 'antd'
import { useRoutes } from 'react-router-dom'
import zhCN from 'antd/es/locale/zh_CN'

function App() {
  return (
    <ConfigProvider locale={zhCN}>
      <div>app</div>
    </ConfigProvider>
  )
}

export default App

// src/index.tsx
import 'dayjs/locale/zh-cn'

// src/utils/helper.ts
/**
 * @desc 获取 token
 * @returns string | null
 */
export const getToken = () => localStorage.getItem('token') || null

/**
 * @desc await-to-js
 * @param func Promise
 * @param error 自定义错误提示
 * @returns [err, res]
 */
export const to = <T, U = Error>(func: Promise<T>, error?: U): Promise<[null, T] | [U, null]> => {
  return func.then<[null, T]>((res: T) => [null, res]).catch<[U, null]>((err: U) => [error || err, null])
}

/**
 * @desc 获取随机 Id
 * @returns string 时间戳 + 16进制随机数
 */
export const getRandomId = (): string =>
  Date.now().toString() + Number((Math.random() * 10000 * 10000 * 10000 * 10000).toFixed()).toString(16)

/**
 * @desc 校验是不是 FormData
 * @param data 任意数据
 * @returns boolean
 */
export const isFormData = (data: any) => Object.prototype.toString.call(data) === '[Object FormData]'

// src/utils/http.ts
import type { AxiosRequestConfig, AxiosResponse } from 'axios'
import axios from 'axios'
import Qs from 'qs'
import { getRandomId, isFormData } from '@/utils/helper'
import showHttpStatusMessage from './showHttpStatusMessage'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

const instance = axios.create({
  timeout: 30 * 1000,
  baseURL: '/api',
})

let httpNum = 0

const addHttp = () => {
  if (httpNum === 0) {
    NProgress.start()
  }
  httpNum++
}

const finishHttp = () => {
  httpNum--
  if (httpNum <= 0) {
    NProgress.done()
  }
}

// instance request 拦截器
instance.interceptors.request.use(
  (config: AxiosRequestConfig<any>) => {
    addHttp()
    if (config.url) {
      const reqId = getRandomId()
      config.url = config.url.includes('?') ? `${config.url}&reqId=${reqId}` : `${config.url}?reqId=${reqId}`
    }
    const token = localStorage.getItem('token') || ''
    if (token) {
      config.headers!.Authorization = 'Bearer ' + token
    }
    // 除入参是 fromData 之外的 post 请求，请求参数都需要序列化
    if (config.method === 'post' && !isFormData(config.data)) {
      config.data = Qs.stringify(config.data)
    }
    return config
  },
  (err) => {
    return Promise.reject(err)
  },
)

// instance response 拦截器
instance.interceptors.response.use(
  (res: AxiosResponse<any, any>) => {
    finishHttp()
    const status = res.status
    if (status >= 300 || status <= 200) {
      showHttpStatusMessage(status)
    }
    return res.data
  },
  (error) => {
    return Promise.reject(error)
  },
)

export default instance

// src/utils/showHttpStatusMessage.ts
import { message } from 'antd'

const showHttpStatusMessage = (status: number) => {
  switch (status) {
    case 403:
      message.error('登录时间已到期，请重新登录')
      localStorage.removeItem('token')
      break
    case 404:
      message.error('请求资源不存在')
      break
    case 500:
    case 501:
    case 503:
      message.error('请求资源不存在')
      break
    default:
      message.error('出现异常，请联系管理员处理')
      break
  }
}

export default showHttpStatusMessage

// src/utils/crypto.ts
import CryptoJS from 'crypto-js' // 准备跟换为 cryptojs

export interface CryptoType {
  encrypt: (word: string) => string
  decrypt: (word: string) => string
  md5: (word: string) => string
  base64: (word: string) => string
}

/**
 * @desc aes 加解密
 */
class Crypto implements CryptoType {
  private key: CryptoJS.lib.WordArray
  private iv: CryptoJS.lib.WordArray
  constructor() {
    this.key = CryptoJS.enc.Utf8.parse('1234567890abcdef') // 16位16进制数作为密钥
    this.iv = CryptoJS.enc.Utf8.parse('qazxsw1234567890') // 16位16进制数作为密钥偏移量
  }

  /**
   * @desc AES 加密
   * @param word 要加密的数据
   */
  public encrypt = (word: string) => {
    const utf8Str = CryptoJS.enc.Utf8.parse(word)
    const encrypted = CryptoJS.AES.encrypt(utf8Str, this.key, {
      iv: this.iv,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7,
    })
    const result = encrypted.ciphertext.toString().toUpperCase()
    return result
  }

  /**
   * @desc AES 解密
   * @param word 要解密的数据
   */
  public decrypt = (word: string) => {
    const encryptedHexStr = CryptoJS.enc.Hex.parse(word)
    const base64Str = CryptoJS.enc.Base64.stringify(encryptedHexStr)
    const decrypt = CryptoJS.AES.decrypt(base64Str, this.key, {
      iv: this.iv,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7,
    })
    const decryptStr = decrypt.toString(CryptoJS.enc.Utf8).toString()
    return decryptStr
  }

  /**
   * @desc md5 加密(不可逆)
   * @param word 要加密的数据
   */
  public md5 = (word: string) => {
    return CryptoJS.MD5(word).toString()
  }

  /**
   * @desc base64 加密
   * @param word 要加密的数据
   */
  public base64 = (word: string) => {
    const utf8Str = CryptoJS.enc.Utf8.parse(word)
    return CryptoJS.enc.Base64.stringify(utf8Str)
  }
}

const crypto = new Crypto()
export default crypto