init

houtai/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

houtai/README.md

@@ -0,0 +1,46 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

houtai/config-overrides.js

@@ -0,0 +1,10 @@
+const path = require('path')
+const { override, addWebpackAlias } = require('customize-cra')
+
+// 添加 @ 别名
+const webpackAlias = addWebpackAlias({
+  '@': path.resolve(__dirname, 'src'),
+})
+
+// 导出要进行覆盖的 webpack 配置
+module.exports = override(webpackAlias)

houtai/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "demo",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@ant-design/cssinjs": "^1.5.6",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.3",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "antd": "^5.0.4",
+    "axios": "^1.1.3",
+    "dayjs": "^1.11.7",
+    "echarts": "^5.4.0",
+    "js-base64": "^3.7.3",
+    "js-export-excel": "^1.1.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-lazyimg-component": "^1.0.1",
+    "react-redux": "^8.0.4",
+    "react-router-dom": "5.3",
+    "react-scripts": "5.0.1",
+    "redux": "^4.2.0",
+    "redux-devtools-extension": "^2.13.9",
+    "redux-thunk": "^2.4.1",
+    "sass": "^1.55.0",
+    "typescript": "^4.8.4",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "dev": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/history": "^5.0.0",
+    "@types/react-router-dom": "^5.3.3",
+    "customize-cra": "^1.0.0",
+    "react-app-rewired": "^2.2.1"
+  },
+  "homepage": "."
+}

houtai/path.tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "compilerOptions": {
+      "baseUrl": "./",
+      "paths": {
+        "@/*": ["src/*"]
+      }
+    }
+  }

houtai/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="zh">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>管理后台</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

houtai/src/App.tsx

@@ -0,0 +1,66 @@
+import "@/assets/styles/base.css";
+// 关于路由
+import React from "react";
+import { Router, Route, Switch } from "react-router-dom";
+import history from "./utils/history";
+import AuthRoute from "./components/AuthRoute";
+import SpinLoding from "./components/SpinLoding";
+import AsyncSpinLoding from "./components/AsyncSpinLoding";
+import { Image } from "antd";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "./store";
+import UpAsyncLoding from "./components/UpAsyncLoding";
+import VideoLookDom from "./components/VideoLookDom";
+import MessageCom from "./components/Message";
+const Layout = React.lazy(() => import("./pages/Layout"));
+const Login = React.lazy(() => import("./pages/Login"));
+
+export default function App() {
+  const dispatch = useDispatch();
+
+  // 从仓库中获取查看图片的信息
+  const lookBigImg = useSelector(
+    (state: RootState) => state.loginStore.lookBigImg
+  );
+
+  return (
+    <>
+      {/* 关于路由 */}
+      <Router history={history}>
+        <React.Suspense fallback={<SpinLoding />}>
+          <Switch>
+            <Route path="/login" component={Login} />
+            <AuthRoute path="/" component={Layout} />
+          </Switch>
+        </React.Suspense>
+      </Router>
+
+      {/* 发送请求的加载组件 */}
+      <AsyncSpinLoding />
+
+      {/* 所有图片点击预览查看大图 */}
+      <Image
+        preview={{
+          visible: lookBigImg.show,
+          src: lookBigImg.url,
+          onVisibleChange: (value) => {
+            // 清除仓库信息
+            dispatch({
+              type: "login/lookBigImg",
+              payload: { url: "", show: false },
+            });
+          },
+        }}
+      />
+
+      {/* 上传附件的进度条元素 */}
+      <UpAsyncLoding />
+
+      {/* 点击预览视频组件 */}
+      <VideoLookDom />
+
+      {/* antd 轻提示 ---兼容360浏览器 */}
+      <MessageCom />
+    </>
+  );
+}

houtai/src/assets/styles/base.css

@@ -0,0 +1,145 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+html {
+  height: 100%;
+  font-size: 14px;
+  user-select: none;
+}
+body {
+  font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
+  height: 100%;
+  color: #7e8293;
+}
+a {
+  text-decoration: none;
+  color: #7e8293;
+  outline: none;
+}
+i {
+  font-style: normal;
+}
+img {
+  max-width: 100%;
+  max-height: 100%;
+  vertical-align: middle;
+  object-fit: cover;
+}
+ul {
+  list-style: none;
+}
+body {
+  overflow-y: overlay;
+}
+/* 文本域取消下拉 */
+textarea {
+  resize: none !important;
+}
+/* 主题色 */
+:root {
+  --themeColor: #b34831;
+}
+a {
+  color: var(--themeColor);
+}
+/* 找不到页面 */
+.noFindPage {
+  opacity: 0;
+  transition: opacity 0.5s;
+}
+/* 兼容360浏览器的下拉框 */
+.ant-select-selector {
+  position: relative;
+  background-color: #ffffff;
+  border: 1px solid #d9d9d9;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+#root {
+  width: 100vw;
+  height: 100vh;
+  min-width: 1600px;
+  min-height: 900px;
+  overflow-y: auto;
+  /* 普通按钮的颜色 */
+  /* 按钮的危险颜色 */
+  /* antd分页器样式 */
+  /* 表格的图片居中 */
+  /* antd图片预览组件 */
+  /* antd表格居中 */
+}
+#root .ant-btn-text {
+  color: #409eff;
+}
+#root .ant-btn-text.ant-btn-dangerous {
+  color: var(--themeColor);
+}
+#root .ant-pagination .ant-pagination-item {
+  border-radius: 50%;
+  border: 1px solid #999;
+  background-color: transparent !important;
+}
+#root .ant-pagination .ant-pagination-item-active {
+  background-color: var(--themeColor) !important;
+}
+#root .ant-pagination .ant-pagination-item-active a {
+  color: #fff !important;
+}
+#root .ant-pagination .ant-pagination-item:hover {
+  background-color: var(--themeColor) !important;
+}
+#root .ant-pagination .ant-pagination-item:hover a {
+  color: #fff !important;
+}
+#root .ant-pagination-prev {
+  border-radius: 50% !important;
+  border: 1px solid #999;
+}
+#root .ant-pagination-prev:hover {
+  background-color: var(--themeColor);
+}
+#root .ant-pagination-prev:hover button {
+  color: #fff;
+}
+#root .ant-pagination-next {
+  border-radius: 50% !important;
+  border: 1px solid #999;
+}
+#root .ant-pagination-next:hover {
+  background-color: var(--themeColor);
+}
+#root .ant-pagination-next:hover button {
+  color: #fff;
+}
+#root .ant-pagination-disabled {
+  border: 1px solid #ccc;
+}
+#root .ant-pagination-disabled:hover {
+  background-color: transparent;
+}
+#root .tableImgAuto {
+  display: flex;
+  justify-content: center;
+}
+#root .ant-image {
+  display: none;
+}
+#root .ant-table-cell {
+  text-align: center !important;
+}
+[hidden] {
+  display: none !important;
+}
+/* 页面的顶部title */
+.pageTitlt {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--themeColor);
+}
+#upInput {
+  display: none;
+}
+#upInput2 {
+  display: none;
+}

houtai/src/assets/styles/base.less

@@ -0,0 +1,196 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  height: 100%;
+  font-size: 14px;
+  user-select: none;
+}
+
+body {
+  font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
+  height: 100%;
+  color: #7e8293;
+}
+
+a {
+  text-decoration: none;
+  color: #7e8293;
+  outline: none;
+}
+
+i {
+  font-style: normal;
+}
+
+img {
+  max-width: 100%;
+  max-height: 100%;
+  vertical-align: middle;
+  object-fit: cover;
+}
+
+ul {
+  list-style: none;
+}
+
+body {
+  overflow-y: overlay;
+}
+
+/* 文本域取消下拉 */
+textarea {
+  resize: none !important;
+}
+
+/* 主题色 */
+:root {
+  --themeColor: #b34831;
+}
+
+a {
+  color: var(--themeColor);
+}
+
+
+
+/* 找不到页面 */
+.noFindPage {
+  opacity: 0;
+  transition: opacity .5s;
+}
+
+
+/* 兼容360浏览器的下拉框 */
+.ant-select-selector {
+  position: relative;
+  background-color: #ffffff;
+  border: 1px solid #d9d9d9;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+// 重置antd样式
+#root {
+  width: 100vw;
+  height: 100vh;
+  min-width: 1600px;
+  min-height: 900px;
+  overflow-y: auto;
+
+  /* 普通按钮的颜色 */
+  .ant-btn-text {
+    color: #409eff;
+  }
+
+  /* 按钮的危险颜色 */
+  .ant-btn-text.ant-btn-dangerous {
+    color: var(--themeColor);
+  }
+
+  /* antd分页器样式 */
+  .ant-pagination .ant-pagination-item {
+    border-radius: 50%;
+    border: 1px solid #999;
+    background-color: transparent !important;
+  }
+
+  .ant-pagination .ant-pagination-item-active {
+    background-color: var(--themeColor) !important;
+  }
+
+
+  .ant-pagination .ant-pagination-item-active a {
+    color: #fff !important;
+  }
+
+  .ant-pagination .ant-pagination-item:hover {
+    background-color: var(--themeColor) !important;
+  }
+
+  .ant-pagination .ant-pagination-item:hover a {
+    color: #fff !important;
+  }
+
+  .ant-pagination-prev {
+    border-radius: 50% !important;
+    border: 1px solid #999;
+  }
+
+  .ant-pagination-prev:hover {
+    background-color: var(--themeColor);
+  }
+
+  .ant-pagination-prev:hover button {
+    color: #fff;
+  }
+
+
+
+  .ant-pagination-next {
+    border-radius: 50% !important;
+    border: 1px solid #999;
+  }
+
+
+  .ant-pagination-next:hover {
+    background-color: var(--themeColor);
+  }
+
+  .ant-pagination-next:hover button {
+    color: #fff;
+  }
+
+  .ant-pagination-disabled {
+    border: 1px solid #ccc;
+  }
+
+  .ant-pagination-disabled:hover {
+    background-color: transparent;
+  }
+
+
+  /* 表格的图片居中 */
+  .tableImgAuto {
+    display: flex;
+    justify-content: center;
+  }
+
+  /* antd图片预览组件 */
+  .ant-image {
+    display: none;
+  }
+
+  /* antd表格居中 */
+
+  .ant-table-cell {
+    text-align: center !important;
+  }
+}
+
+
+
+[hidden] {
+  display: none !important;
+}
+
+
+
+
+/* 页面的顶部title */
+.pageTitlt {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--themeColor);
+}
+
+
+#upInput {
+  display: none;
+}
+
+#upInput2 {
+  display: none;
+}

houtai/src/components/AsyncSpinLoding/index.module.scss

@@ -0,0 +1,26 @@
+.AsyncSpinLoding {
+  opacity: 0;
+  pointer-events: none;
+  transition: all .5s;
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  // background-color: rgba(0, 0, 0, .6);
+  background-color: transparent;
+  :global{
+    .ant-spin-spinning{
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%,-50%);
+    }
+  }
+}
+
+.AsyncSpinLodingShow {
+  opacity: 1;
+  pointer-events: auto;
+}

houtai/src/components/AsyncSpinLoding/index.tsx

@@ -0,0 +1,29 @@
+import styles from "./index.module.scss";
+import { Spin } from "antd";
+import React from "react";
+import classNames from "classnames";
+import { useSelector } from "react-redux";
+import { RootState } from "@/store";
+
+function AsyncSpinLoding() {
+  // 从仓库中获取查看图片的信息
+  const asyncLoding = useSelector(
+    (state: RootState) => state.loginStore.asyncLoding
+  );
+
+  return (
+    <div
+      id="AsyncSpinLoding"
+      className={classNames(
+        styles.AsyncSpinLoding,
+        asyncLoding ? styles.AsyncSpinLodingShow : ""
+      )}
+    >
+      <Spin size="large" />
+    </div>
+  );
+}
+
+const MemoAsyncSpinLoding = React.memo(AsyncSpinLoding);
+
+export default MemoAsyncSpinLoding;

houtai/src/components/AuthRoute/index.tsx

@@ -0,0 +1,32 @@
+import { hasToken } from "@//utils/storage";
+import { MessageFu } from "@/utils/message";
+import React from "react";
+import { Redirect, Route } from "react-router-dom";
+
+type AtahType = {
+  path: string;
+  component: React.FC;
+  [x: string]: any;
+};
+
+export default function AuthRoute({ path, component: Com, ...rest }: AtahType) {
+  return (
+    <Route
+      path={path}
+      {...rest}
+      render={() => {
+        if (hasToken()) return <Com />;
+        else {
+          MessageFu.warning("登录失效!");
+          return (
+            <Redirect
+              to={{
+                pathname: "/login",
+              }}
+            />
+          );
+        }
+      }}
+    />
+  );
+}

houtai/src/components/ImageLazy/index.module.scss

@@ -0,0 +1,37 @@
+.ImageLazy{
+  position: relative;
+  :global{
+    .lazyBox{
+      width: 100%;
+      height: 100%;
+      position: relative;
+      .lookImg{
+        cursor: pointer;
+        transition: opacity .3s;
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 18px;
+        color: #fff;
+        background-color: rgba(0,0,0,.6);
+        &>div{
+          font-size: 14px;
+        }
+      }
+      &:hover{
+        .lookImg{
+          opacity: 1;
+          pointer-events: auto;
+        }
+      }
+    }
+  }
+
+}

houtai/src/components/ImageLazy/index.tsx

@@ -0,0 +1,88 @@
+import React, { useCallback, useEffect, useState } from "react";
+import styles from "./index.module.scss";
+import Lazyimg from "react-lazyimg-component";
+import { baseURL } from "@/utils/http";
+import imgLoding from "@/assets/img/loading.gif";
+import imgErr from "@/assets/img/IMGerror.png";
+import { EyeOutlined } from "@ant-design/icons";
+import { useDispatch } from "react-redux";
+
+type Props = {
+  width?: number;
+  height?: number;
+  src: string;
+  noLook?: boolean;
+};
+
+function ImageLazy({ width = 100, height = 100, src, noLook }: Props) {
+  const dispatch = useDispatch();
+
+  // 图片占位符
+  const [placeholderUrl, setPlaceholderUrl] = useState(
+    src ? imgLoding : imgErr
+  );
+
+  // 默认不能预览图片，加载成功之后能预览
+  const [lookImg, setLookImg] = useState(false);
+
+  useEffect(() => {
+    if (src) {
+      // 进页面查看图片的加载情况
+      // 创建一个img标签
+      const imgDom = document.createElement("img");
+      imgDom.src = baseURL + src;
+
+      // 不管图片加载成功或者失败，都删除掉，提高性能
+      // 图片加载成功
+      imgDom.onload = function () {
+        setLookImg(true);
+        imgDom.remove();
+      };
+      // 图片加载失败
+      imgDom.onerror = function () {
+        setPlaceholderUrl(imgErr);
+        imgDom.remove();
+      };
+
+      return () => {
+        // 离开页面也删掉掉元素
+        imgDom.remove();
+      };
+    }
+  }, [src]);
+
+  // 点击预览图片
+  const lookBigImg = useCallback(() => {
+    dispatch({
+      type: "login/lookBigImg",
+      payload: { url: baseURL + src, show: true },
+    });
+  }, [dispatch, src]);
+
+  return (
+    <div className={styles.ImageLazy} style={{ width: width, height: height }}>
+      <div className="lazyBox">
+        <Lazyimg
+          src={src ? baseURL + src : ""}
+          width={width}
+          height={height}
+          placeholder={placeholderUrl}
+          alt=""
+        />
+
+        {/* 图片预览 */}
+        {noLook || !lookImg ? null : (
+          <div className="lookImg" onClick={lookBigImg}>
+            <EyeOutlined />
+            &nbsp;
+            <div>预览</div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const MemoImageLazy = React.memo(ImageLazy);
+
+export default MemoImageLazy;

houtai/src/components/Message/index.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect } from "react";
+import { message } from "antd";
+import { useSelector } from "react-redux";
+import { RootState } from "@/store";
+
+function MessageCom() {
+  // 从仓库中获取 antd 轻提示信息
+  const messageReducerInfo = useSelector(
+    (state: RootState) => state.loginStore.message
+  );
+
+  const [messageApi, contextHolder] = message.useMessage();
+
+  useEffect(() => {
+    if (messageReducerInfo.txt) {
+      messageApi.open({
+        type: messageReducerInfo.type,
+        content: messageReducerInfo.txt,
+        duration: messageReducerInfo.duration,
+      });
+    }
+  }, [messageApi, messageReducerInfo]);
+
+  return <>{contextHolder}</>;
+}
+
+const MemoMessage = React.memo(MessageCom);
+
+export default MemoMessage;

houtai/src/components/NotFound/index.tsx

@@ -0,0 +1,26 @@
+import { Result } from "antd";
+import { useEffect, useRef } from "react";
+
+export default function NotFound() {
+  const timeRef = useRef(-1);
+
+  useEffect(() => {
+    timeRef.current = window.setTimeout(() => {
+      const dom: any = document.querySelector(".noFindPage");
+      dom.style.opacity = 1;
+    }, 200);
+    return () => {
+      clearTimeout(timeRef.current);
+    };
+  }, []);
+
+  return (
+    <div className="noFindPage">
+      <Result
+        status="404"
+        title="404"
+        subTitle="页面找不到或没有权限，请联系管理员!"
+      />
+    </div>
+  );
+}

houtai/src/components/SpinLoding/index.module.scss

@@ -0,0 +1,10 @@
+.SpinLoding {
+  position: relative;
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

houtai/src/components/SpinLoding/index.tsx

@@ -0,0 +1,13 @@
+import styles from "./index.module.scss";
+import { Spin } from "antd";
+import React from "react";
+function SpinLoding() {
+  return (
+    <div className={styles.SpinLoding}>
+      <Spin size='large'/>
+    </div>
+  );
+}
+const MemoSpinLoding = React.memo(SpinLoding);
+
+export default MemoSpinLoding;

houtai/src/components/UpAsyncLoding/index.module.scss

@@ -0,0 +1,36 @@
+.UpAsyncLoding {
+  opacity: 0;
+  pointer-events: none;
+  position: fixed;
+  z-index: 9997;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, .4);
+
+  :global {
+    .progressBox {
+      position: absolute;
+      top: 60%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 500px;
+      height: 6px;
+      border-radius: 3px;
+      border: 1px solid var(--themeColor);
+      overflow: hidden;
+
+      #progress {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 0%;
+        height: 100%;
+        background-color: var(--themeColor);
+      }
+
+    }
+
+  }
+}

houtai/src/components/UpAsyncLoding/index.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import styles from "./index.module.scss";
+function UpAsyncLoding() {
+  return (
+    <div id="UpAsyncLoding" className={styles.UpAsyncLoding}>
+      <div className="progressBox">
+        <div id="progress"></div>
+      </div>
+    </div>
+  );
+}
+
+const MemoUpAsyncLoding = React.memo(UpAsyncLoding);
+
+export default MemoUpAsyncLoding;

houtai/src/components/VideoLook/index.module.scss

@@ -0,0 +1,52 @@
+.VideoLook {
+  :global {
+    .videoLookBox {
+      cursor: pointer;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .videoCover {
+        width: 100%;
+        height: 100%;
+        position: relative;
+
+        video {
+          width: 100%;
+          height: 100%;
+        }
+
+        .videoInco {
+          cursor: pointer;
+          transition: opacity .3s;
+          opacity: 0;
+          pointer-events: none;
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-size: 18px;
+          color: #fff;
+          background-color: rgba(0, 0, 0, .6);
+
+          &>div {
+            font-size: 14px;
+          }
+        }
+
+        &:hover {
+          .videoInco {
+            opacity: 1;
+            pointer-events: auto;
+          }
+        }
+      }
+    }
+  }
+}

houtai/src/components/VideoLook/index.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { PlayCircleOutlined } from "@ant-design/icons";
+import styles from "./index.module.scss";
+import { useDispatch } from "react-redux";
+import { baseURL } from "@/utils/http";
+
+type Props = {
+  width?: number;
+  height?: number;
+  src: string;
+};
+
+function VideoLook({ src, width = 100, height = 100 }: Props) {
+  const dispatch = useDispatch();
+
+  return (
+    <div className={styles.VideoLook} style={{ width, height }}>
+      <div
+        className="videoLookBox"
+        onClick={() => dispatch({ type: "login/lookVideo", payload: src })}
+      >
+        <div className="videoCover">
+          <video src={baseURL + src}></video>
+          <div className="videoInco">
+            <PlayCircleOutlined />
+            &nbsp;
+            <div>预览</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const MemoVideoLook = React.memo(VideoLook);
+
+export default MemoVideoLook;

houtai/src/components/VideoLookDom/index.module.scss

@@ -0,0 +1,34 @@
+.VideoLookDom{
+  transition: opacity .3s;
+  position: fixed;
+  z-index: 9991;
+  opacity: 0;
+  pointer-events: none;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0,0,0,.6);
+  :global{
+    .close{
+      color: #fff;
+      position: absolute;
+      right: 70px;
+      top: 70px;
+      font-size: 30px;
+      cursor: pointer;
+    }
+    .viedoBox{
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%,-50%);
+      width: 800px;
+      height: 500px;
+      video{
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}

houtai/src/components/VideoLookDom/index.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { CloseCircleOutlined } from "@ant-design/icons";
+import styles from "./index.module.scss";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "@/store";
+import { baseURL } from "@/utils/http";
+function VideoLookDom() {
+  const videoSrc = useSelector((state: RootState) => state.loginStore.videoSrc);
+  const dispatch = useDispatch();
+  return (
+    <div
+      className={styles.VideoLookDom}
+      style={videoSrc ? { opacity: 1, pointerEvents: "auto" } : {}}
+    >
+      <div className="viedoBox">
+        {videoSrc ? (
+          <video autoPlay controls src={baseURL + videoSrc}></video>
+        ) : null}
+      </div>
+
+      <div
+        className="close"
+        onClick={() => dispatch({ type: "login/lookVideo", payload: "" })}
+      >
+        <CloseCircleOutlined />
+      </div>
+    </div>
+  );
+}
+
+const MemoVideoLookDom = React.memo(VideoLookDom);
+
+export default MemoVideoLookDom;

houtai/src/index.tsx

@@ -0,0 +1,41 @@
+// import 'default-passive-events';
+
+import App from "./App";
+import store from "./store/index";
+
+import { Provider } from "react-redux";
+import { createRoot } from "react-dom/client";
+
+import { ConfigProvider } from "antd";
+
+// 兼容360浏览器
+import {
+  StyleProvider,
+  legacyLogicalPropertiesTransformer,
+} from "@ant-design/cssinjs";
+
+import "dayjs/locale/zh-cn";
+import locale from "antd/locale/zh_CN";
+
+const container = document.getElementById("root") as HTMLElement;
+const root = createRoot(container);
+
+root.render(
+  <ConfigProvider
+    locale={locale}
+    theme={{
+      token: {
+        colorPrimary: "#b34831",
+      },
+    }}
+  >
+    <Provider store={store}>
+      <StyleProvider
+        hashPriority="high"
+        transformers={[legacyLogicalPropertiesTransformer]}
+      >
+        <App />
+      </StyleProvider>
+    </Provider>
+  </ConfigProvider>
+);

houtai/src/pages/A1Hot/index.module.scss

@@ -0,0 +1,5 @@
+.Hot{
+  :global{
+    
+  }
+}

houtai/src/pages/A1Hot/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "./index.module.scss";
+ function Hot() {
+  
+  return (
+    <div className={styles.Hot}>
+      <h1>Hot</h1>
+    </div>
+  )
+}
+
+const MemoHot = React.memo(Hot);
+
+export default MemoHot;

houtai/src/pages/B1Scene/index.module.scss

@@ -0,0 +1,5 @@
+.Scene{
+  :global{
+    
+  }
+}

houtai/src/pages/B1Scene/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "./index.module.scss";
+ function Scene() {
+  
+  return (
+    <div className={styles.Scene}>
+      <h1>Scene</h1>
+    </div>
+  )
+}
+
+const MemoScene = React.memo(Scene);
+
+export default MemoScene;

houtai/src/pages/B2Goods/index.module.scss

@@ -0,0 +1,5 @@
+.Goods{
+  :global{
+    
+  }
+}

houtai/src/pages/B2Goods/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "./index.module.scss";
+ function Goods() {
+  
+  return (
+    <div className={styles.Goods}>
+      <h1>Goods</h1>
+    </div>
+  )
+}
+
+const MemoGoods = React.memo(Goods);
+
+export default MemoGoods;

houtai/src/pages/B3Wall/index.module.scss

@@ -0,0 +1,5 @@
+.Wall{
+  :global{
+    
+  }
+}

houtai/src/pages/B3Wall/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "./index.module.scss";
+ function Wall() {
+  
+  return (
+    <div className={styles.Wall}>
+      <h1>Wall</h1>
+    </div>
+  )
+}
+
+const MemoWall = React.memo(Wall);
+
+export default MemoWall;

houtai/src/pages/B4Barrage/index.module.scss

@@ -0,0 +1,5 @@
+.Barrage{
+  :global{
+    
+  }
+}

houtai/src/pages/B4Barrage/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "./index.module.scss";
+ function Barrage() {
+  
+  return (
+    <div className={styles.Barrage}>
+      <h1>Barrage</h1>
+    </div>
+  )
+}
+
+const MemoBarrage = React.memo(Barrage);
+
+export default MemoBarrage;

houtai/src/pages/B5Topic/index.module.scss

@@ -0,0 +1,5 @@
+.Topic{
+  :global{
+    
+  }
+}

houtai/src/pages/B5Topic/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "./index.module.scss";
+ function Topic() {
+  
+  return (
+    <div className={styles.Topic}>
+      <h1>Topic</h1>
+    </div>
+  )
+}
+
+const MemoTopic = React.memo(Topic);
+
+export default MemoTopic;

houtai/src/pages/B6Smart/index.module.scss

@@ -0,0 +1,5 @@
+.Smart{
+  :global{
+    
+  }
+}

houtai/src/pages/B6Smart/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "./index.module.scss";
+ function Smart() {
+  
+  return (
+    <div className={styles.Smart}>
+      <h1>Smart</h1>
+    </div>
+  )
+}
+
+const MemoSmart = React.memo(Smart);
+
+export default MemoSmart;

houtai/src/pages/C1User/index.module.scss

@@ -0,0 +1,5 @@
+.User{
+  :global{
+    
+  }
+}

houtai/src/pages/C1User/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "./index.module.scss";
+ function User() {
+  
+  return (
+    <div className={styles.User}>
+      <h1>User</h1>
+    </div>
+  )
+}
+
+const MemoUser = React.memo(User);
+
+export default MemoUser;

houtai/src/pages/C2Role/index.module.scss

@@ -0,0 +1,5 @@
+.Role{
+  :global{
+    
+  }
+}

houtai/src/pages/C2Role/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "./index.module.scss";
+ function Role() {
+  
+  return (
+    <div className={styles.Role}>
+      <h1>Role</h1>
+    </div>
+  )
+}
+
+const MemoRole = React.memo(Role);
+
+export default MemoRole;

houtai/src/pages/C3Log/index.module.scss

@@ -0,0 +1,23 @@
+.Log{
+  :global{
+    .logTop{
+      margin-top: 15px;
+      border-radius: 10px;
+      background-color: #fff;
+      .tableSelectBox{
+        padding: 20px 24px;
+        display: flex;
+        align-items: center;
+        .row{
+          margin-right: 20px;
+        }
+      }
+    }
+    .tableMain{
+      border-radius: 10px;
+      margin-top: 15px;
+      height: calc(100% - 128px);
+      background-color: #fff;
+    }
+  }
+}

houtai/src/pages/C3Log/index.tsx

@@ -0,0 +1,133 @@
+import { RootState } from "@/store";
+import { getLogListAPI } from "@/store/action/log";
+import { Input, DatePicker, Table } from "antd";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+import styles from "./index.module.scss";
+
+const { RangePicker } = DatePicker;
+
+function Log() {
+  const dispatch = useDispatch();
+
+  const pageNumRef = useRef(1);
+  const pagePageRef = useRef(10);
+  // 筛选和分页
+  const [tableSelect, setTableSelect] = useState({
+    searchKey: "",
+    pageSize: 10,
+    pageNum: 1,
+    startTime: "",
+    endTime: "",
+  });
+
+  // 账号的输入
+  const nameTime = useRef(-1);
+  const nameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    clearTimeout(nameTime.current);
+    nameTime.current = window.setTimeout(() => {
+      setTableSelect({ ...tableSelect, searchKey: e.target.value, pageNum: 1 });
+    }, 500);
+  };
+  // 时间选择器改变
+  const timeChange = (date: any, dateString: any) => {
+    let startTime = "";
+    let endTime = "";
+    if (dateString[0] && dateString[1]) {
+      startTime = dateString[0] + " 00:00:00";
+      endTime = dateString[1] + " 23:59:59";
+    }
+    setTableSelect({ ...tableSelect, startTime, endTime, pageNum: 1 });
+  };
+
+  useEffect(() => {
+    pageNumRef.current = tableSelect.pageNum;
+    pagePageRef.current = tableSelect.pageSize;
+    dispatch(getLogListAPI(tableSelect));
+  }, [dispatch, tableSelect]);
+
+  // ---------关于表格
+
+  // 页码变化
+  const paginationChange = (pageNum: number, pageSize: number) => {
+    pageNumRef.current = pageNum;
+    pagePageRef.current = pageSize;
+    setTableSelect({ ...tableSelect, pageNum, pageSize });
+  };
+
+  const results = useSelector((state: RootState) => state.logReducer.tableInfo);
+
+  const columns = useMemo(() => {
+    return [
+      {
+        title: "序号",
+        render: (text: any, record: any, index: any) =>
+          index + 1 + (pageNumRef.current - 1) * pagePageRef.current,
+      },
+      {
+        title: "操作者",
+        dataIndex: "userName",
+      },
+      {
+        title: "操作日期",
+        dataIndex: "createTime",
+      },
+      {
+        title: "IP记录",
+        dataIndex: "ip",
+      },
+      {
+        title: "操作记录",
+        dataIndex: "type",
+      },
+    ];
+  }, []);
+
+  return (
+    <div className={styles.Log}>
+        <div className="pageTitlt">操作日志</div>
+      <div className="logTop">
+        <div className="tableSelectBox">
+          <div className="row">
+            <span>账号：</span>
+            <Input
+              maxLength={10}
+              style={{ width: 150 }}
+              placeholder="请输入"
+              allowClear
+              onChange={(e) => nameChange(e)}
+            />
+          </div>
+          <div className="row">
+            <span>操作日期：</span>
+            <RangePicker onChange={timeChange} />
+          </div>
+        </div>
+      </div>
+
+      {/* 表格主体 */}
+      <div className="tableMain">
+        <Table
+          scroll={{ y: 570 }}
+          dataSource={results.list}
+          columns={columns}
+          rowKey="id"
+          pagination={{
+            showQuickJumper: true,
+            position: ["bottomCenter"],
+            showSizeChanger: true,
+            current: tableSelect.pageNum,
+            pageSize: tableSelect.pageSize,
+            total: results.total,
+            onChange: paginationChange,
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+const MemoLog = React.memo(Log);
+
+export default MemoLog;

houtai/src/pages/Layout/index.module.scss

@@ -0,0 +1,232 @@
+.Layout {
+  width: 100%;
+  height: 100%;
+  display: flex;
+
+  :global {
+
+    .layoutLeft {
+      position: relative;
+      z-index: 10;
+      width: 220px;
+      height: 100%;
+      box-shadow: 0px 0px 5px 3px;
+
+      .layoutLeftTop {
+        height: 60px;
+        background-color: var(--themeColor);
+        padding: 7px 0 0 20px;
+
+        &>h3 {
+          color: #fff;
+        }
+      }
+
+      .layoutLeftMain {
+        height: calc(100% - 60px);
+        padding: 20px;
+        background-image: url('../../assets/img/layoutLeftMain.jpg');
+        background-size: 100% 100%;
+
+        .mainBoxL2RowBox {
+          margin-bottom: 20px;
+          .mainBoxL2RowBoxTit{
+            padding-left: 3px;
+            display: flex;
+            margin-bottom: 10px;
+            font-size: 16px;
+            font-weight: 700;
+            color: black;
+            &>.txt{
+              margin-left: 15px;
+            }
+          }
+          .mainBoxL2Row {
+            padding-left: 50px;
+            cursor: pointer;
+            height: 40px;
+            line-height: 40px;
+            font-size: 14px;
+            position: relative;
+            margin-bottom: 5px;
+  
+            .rowTip{
+              height: 26px;
+              width: 26px;
+              position: absolute;
+              z-index: 10;
+              right: 30px;
+              top: 50%;
+              transform: translateY(-50%);
+              border-radius: 50%;
+              background-color: var(--themeColor);
+              font-size: 12px;
+              color: #fff;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            }
+
+            .tabImg {
+              z-index: 3;
+              position: absolute;
+              top: 50%;
+              left: 20px;
+              transform: translateY(-50%);
+              width: 20px;
+            }
+
+            .tabImgAc {
+              z-index: 3;
+              position: absolute;
+              top: 50%;
+              left: 20px;
+              transform: translateY(-50%);
+              width: 20px;
+              display: none;
+            }
+
+            &:hover {
+              color: #fff;
+              background-image: url('../../assets/img/activeLL.png');
+              background-size: 100% 100%;
+
+              .tabImgAc {
+                display: block;
+              }
+            }
+    
+          }
+
+          .active {
+            color: #fff;
+            pointer-events: none;
+            background-image: url('../../assets/img/activeLL.png');
+            background-size: 100% 100%;
+
+            .tabImgAc {
+              display: block;
+            }
+          }
+        }
+
+
+
+
+      }
+
+
+    }
+
+    .layoutRight {
+      width: calc(100% - 220px);
+      height: 100%;
+
+
+      .layoutRightTop {
+        height: 60px;
+        background-image: url('../../assets/img/layoutTop.jpg');
+        background-size: 100% 100%;
+        display: flex;
+        justify-content: flex-end;
+        position: relative;
+        z-index: 11;
+
+        .user {
+          padding-right: 40px;
+          display: flex;
+          align-items: center;
+          padding-left: 55px;
+          cursor: pointer;
+          position: relative;
+          background: url('../../assets/img/user.png') no-repeat left center;
+          background-size: 40px 40px;
+          font-size: 16px;
+          color: #fff;
+
+          .userInco {
+            margin-left: 10px;
+            color: #fff;
+          }
+
+          .userInco1 {
+            display: none;
+          }
+
+          .userSet {
+            border-radius: 10px;
+            overflow: hidden;
+            width: 140px;
+            opacity: 0;
+            pointer-events: none;
+            transition: bottom .3s;
+            height: 120px;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            bottom: -80px;
+            padding-top: 20px;
+            color: rgb(226, 223, 223);
+
+            &>span {
+              background-color: var(--themeColor);
+              display: block;
+              width: 100%;
+              height: 50px;
+              line-height: 50px;
+              text-align: center;
+
+              &:first-child {
+                border-radius: 10px 10px 0 0;
+              }
+
+              &:hover {
+                color: #fff;
+              }
+            }
+          }
+
+          &:hover {
+            .userSet {
+              opacity: 1;
+              pointer-events: auto;
+              bottom: -110px;
+            }
+
+            .userInco1 {
+              display: block;
+            }
+
+            .userInco2 {
+              display: none;
+            }
+
+
+          }
+        }
+      }
+
+      .layoutRightMain {
+        height: calc(100% - 60px);
+
+        .mainBoxR {
+          width: 100%;
+          height: 100%;
+          background-image: url('../../assets/img/bg.jpg');
+          background-size: 100% 100%;
+          overflow: hidden;
+          padding: 24px 30px;
+
+          &>div {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+
+    }
+
+
+
+  }
+}

houtai/src/pages/Layout/index.tsx

@@ -0,0 +1,407 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { CaretUpOutlined, CaretDownOutlined } from "@ant-design/icons";
+import styles from "./index.module.scss";
+import SpinLoding from "@/components/SpinLoding";
+import { Route, Switch, useLocation } from "react-router-dom";
+import AuthRoute from "@/components/AuthRoute";
+import NotFound from "@/components/NotFound";
+import classNames from "classnames";
+import history from "@/utils/history";
+import { Button, Form, Input, Modal, Popconfirm } from "antd";
+import { Base64 } from "js-base64";
+import encodeStr from "@/utils/pass";
+import { getDictListAPI, passWordEditAPI } from "@/store/action/login";
+import { getTokenInfo, removeTokenInfo } from "@/utils/storage";
+import { useDispatch } from "react-redux";
+import inco1 from "@/assets/img/inco1.png";
+import inco2 from "@/assets/img/inco2.png";
+import inco3 from "@/assets/img/inco3.png";
+import inco4 from "@/assets/img/inco4.png";
+import inco1Ac from "@/assets/img/inco1Ac.png";
+import inco2Ac from "@/assets/img/inco2Ac.png";
+import inco3Ac from "@/assets/img/inco3Ac.png";
+import inco4Ac from "@/assets/img/inco4Ac.png";
+import { MessageFu } from "@/utils/message";
+
+function Layout() {
+  const dispatch = useDispatch();
+
+  type ListTempType = {
+    title: string;
+    inco: any;
+    son: {
+      id: number;
+      name: string;
+      path: string;
+      done: boolean;
+      Com: React.LazyExoticComponent<
+        React.MemoExoticComponent<() => JSX.Element>
+      >;
+      inco: any;
+      incoAc: any;
+      num?: number;
+    }[];
+  }[];
+
+  const listTemp = useMemo(() => {
+    const arr: ListTempType = [
+      {
+        title: "数据统计",
+        inco: inco1,
+        son: [
+          {
+            id: 100,
+            name: "热度统计",
+            path: "/",
+            done: false,
+            Com: React.lazy(() => import("../A1Hot")),
+            inco: inco1,
+            incoAc: inco1Ac,
+          },
+        ],
+      },
+      {
+        title: "内容管理",
+        inco: inco2,
+        son: [
+          {
+            id: 200,
+            name: "场景管理",
+            path: "/scene",
+            done: false,
+            Com: React.lazy(() => import("../B1Scene")),
+            inco: inco2,
+            incoAc: inco2Ac,
+          },
+          {
+            id: 300,
+            name: "馆藏管理",
+            path: "/goods",
+            done: false,
+            Com: React.lazy(() => import("../B2Goods")),
+            inco: inco2,
+            incoAc: inco2Ac,
+          },
+          {
+            id: 400,
+            name: "万物墙管理",
+            path: "/wall",
+            done: false,
+            Com: React.lazy(() => import("../B3Wall")),
+            inco: inco2,
+            incoAc: inco2Ac,
+          },
+          {
+            id: 500,
+            name: "弹幕管理",
+            path: "/barrage",
+            done: false,
+            Com: React.lazy(() => import("../B4Barrage")),
+            inco: inco2,
+            incoAc: inco2Ac,
+            num: 0,
+          },
+          {
+            id: 600,
+            name: "题库管理",
+            path: "/topic",
+            done: false,
+            Com: React.lazy(() => import("../B5Topic")),
+            inco: inco2,
+            incoAc: inco2Ac,
+          },
+          {
+            id: 700,
+            name: "智能导览管理",
+            path: "/smart",
+            done: false,
+            Com: React.lazy(() => import("../B6Smart")),
+            inco: inco2,
+            incoAc: inco2Ac,
+          },
+        ],
+      },
+    ];
+
+    return arr;
+  }, []);
+
+  // 是超级管理员
+  useEffect(() => {
+    const userInfo = getTokenInfo().user;
+    if (userInfo.isAdmin === 1) {
+      listTemp.push({
+        title: "系统管理",
+        inco: inco4,
+        son: [
+          {
+            id: 800,
+            name: "用户管理",
+            path: "/user",
+            done: true,
+            Com: React.lazy(() => import("../C1User")),
+            inco: inco3,
+            incoAc: inco3Ac,
+          },
+          {
+            id: 900,
+            name: "角色管理",
+            path: "/role",
+            done: true,
+            Com: React.lazy(() => import("../C2Role")),
+            inco: inco3,
+            incoAc: inco3Ac,
+          },
+          {
+            id: 1000,
+            name: "操作日志",
+            path: "/log",
+            done: true,
+            Com: React.lazy(() => import("../C3Log")),
+            inco: inco4,
+            incoAc: inco4Ac,
+          },
+        ],
+      });
+    }
+  }, [listTemp]);
+
+  // 权限的数据和页面判断
+  useEffect(() => {
+    // authPageArr.forEach((v) => {
+    //   if (v.authority) {
+    //     listTemp.forEach((v2) => {
+    //       if (v.id === v2.id) v2.done = true;
+    //     });
+    //   }
+    // });
+    // const newList = listTemp.filter((v) => v.done);
+    // setList(listTemp.filter((v) => v.done));
+  }, [listTemp]);
+
+  const [list, setList] = useState(listTemp);
+
+  // 进页面看看第一个页面有权限的是哪一个
+  // useEffect(() => {
+  //   const userInfo = getTokenInfo().user;
+  //   if (userInfo.isAdmin !== 1) {
+  //     if (list[0] && list[0].id !== 100) history.replace(list[0].path);
+  //   }
+  // }, [list]);
+
+  // 进页面获取所有下拉信息和权限信息
+  useEffect(() => {
+    dispatch(getDictListAPI());
+    // dispatch(getPermissionsAPI());
+  }, [dispatch]);
+
+  // 点击跳转
+  const pathCutFu = useCallback((path: string) => {
+    history.push(path);
+  }, []);
+
+  // 当前路径选中的左侧菜单
+  const location = useLocation();
+  const [path, setPath] = useState("");
+
+  useEffect(() => {
+    const arr = location.pathname.split("/");
+    let pathTemp = "/";
+    if (arr[1]) pathTemp = "/" + arr[1];
+
+    setPath(pathTemp);
+  }, [location]);
+
+  const userInfo = useMemo(() => {
+    return getTokenInfo().user;
+  }, []);
+
+  // 修改密码相关
+  const [open, setOpen] = useState(false);
+
+  // 拿到新密码的输入框的值
+  const oldPasswordValue = useRef("");
+
+  const checkPassWord = (rule: any, value: any = "") => {
+    if (value !== oldPasswordValue.current)
+      return Promise.reject("新旧密码不一致!");
+    else return Promise.resolve(value);
+  };
+
+  const onFinish = async (values: any) => {
+    // 通过校验之后发送请求
+    if (values.oldPassword === values.newPassword)
+      return MessageFu.warning("新旧密码不能相同!");
+    const obj = {
+      oldPassword: encodeStr(Base64.encode(values.oldPassword)),
+      newPassword: encodeStr(Base64.encode(values.newPassword)),
+    };
+    const res: any = await passWordEditAPI(obj);
+    if (res.code === 0) {
+      MessageFu.success("修改成功!");
+      loginExit();
+    }
+  };
+
+  // 点击退出登录
+  const loginExit = () => {
+    removeTokenInfo();
+    history.push("/login");
+  };
+
+  return (
+    <div className={styles.Layout}>
+      {/* 左边 */}
+      <div className="layoutLeft">
+        <div className="layoutLeftTop">
+          <h3>
+            中医药文化宣传教育基地
+            <br />
+            线上展馆管理后台
+          </h3>
+        </div>
+        {/* 左边主体 */}
+        <div className="layoutLeftMain">
+          {list.map((v1) => (
+            <div className="mainBoxL2RowBox" key={v1.title}>
+              <div className="mainBoxL2RowBoxTit">
+                <img className="tabImg" src={v1.inco} alt="" />
+                <div className="txt">{v1.title}</div>
+              </div>
+              {v1.son.map((v2) => (
+                <div
+                  key={v2.id}
+                  onClick={() => pathCutFu(v2.path)}
+                  className={classNames(
+                    "mainBoxL2Row",
+                    v2.path === path ? "active" : ""
+                  )}
+                >
+                  <img className="tabImg" src={v2.inco} alt="" />
+                  <img className="tabImgAc" src={v2.incoAc} alt="" />
+                  {v2.id === 500 ? (
+                    <div className="rowTip">{v2.num}</div>
+                  ) : null}
+                  <div className="txt">{v2.name}</div>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+      {/* 右边 */}
+      <div className="layoutRight">
+        <div className="layoutRightTop">
+          {/* 用户相关 */}
+          <div className="user">
+            {userInfo.realName}
+            <div className="userInco userInco1">
+              <CaretUpOutlined />
+            </div>
+            <div className="userInco userInco2">
+              <CaretDownOutlined />
+            </div>
+            <div className="userSet">
+              <span onClick={() => setOpen(true)}>修改密码</span>
+              <Popconfirm
+                placement="bottom"
+                title="确定退出吗?"
+                okText="确定"
+                cancelText="取消"
+                onConfirm={loginExit}
+              >
+                退出登录
+              </Popconfirm>
+            </div>
+          </div>
+        </div>
+        {/* 右边主体 */}
+        <div className="layoutRightMain">
+          {/* 二级路由页面 */}
+          <div className="mainBoxR">
+            <React.Suspense fallback={<SpinLoding />}>
+              <Switch>
+                {list.map((v1) => {
+                  return v1.son.map((v2) => (
+                    <AuthRoute
+                      key={v2.id}
+                      exact
+                      path={v2.path}
+                      component={v2.Com}
+                    />
+                  ));
+                })}
+
+                <Route path="*" component={NotFound} />
+              </Switch>
+            </React.Suspense>
+          </div>
+        </div>
+      </div>
+
+      {/* 点击修改密码打开的对话框 */}
+      <Modal
+        destroyOnClose
+        open={open}
+        title="修改密码"
+        onCancel={() => setOpen(false)}
+        footer={
+          [] // 设置footer为空，去掉 取消 确定默认按钮
+        }
+      >
+        <Form
+          name="basic"
+          labelCol={{ span: 5 }}
+          wrapperCol={{ span: 16 }}
+          onFinish={onFinish}
+          autoComplete="off"
+        >
+          <Form.Item
+            label="旧密码"
+            name="oldPassword"
+            rules={[{ required: true, message: "不能为空!" }]}
+          >
+            <Input.Password maxLength={15} />
+          </Form.Item>
+
+          <Form.Item
+            label="新密码"
+            name="newPassword"
+            rules={[{ required: true, message: "不能为空!" }]}
+          >
+            <Input.Password
+              maxLength={15}
+              onChange={(e) => (oldPasswordValue.current = e.target.value)}
+            />
+          </Form.Item>
+
+          <Form.Item
+            label="确定新密码"
+            name="checkPass"
+            rules={[{ validator: checkPassWord }]}
+          >
+            <Input.Password maxLength={15} />
+          </Form.Item>
+
+          <Form.Item wrapperCol={{ offset: 14, span: 16 }}>
+            <Button onClick={() => setOpen(false)}>取消</Button>
+            &emsp;
+            <Button type="primary" htmlType="submit">
+              确定
+            </Button>
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  );
+}
+
+// 使用 React.memo 来优化组件，避免组件的无效更新，类似 类组件里面的PureComponent
+const MemoLayout = React.memo(Layout);
+export default MemoLayout;

houtai/src/pages/Login/index.module.scss

@@ -0,0 +1,128 @@
+.Login {
+  width: 100%;
+  height: 100%;
+  background-image: url('../../assets/img/bg.jpg');
+  background-size: cover;
+  position: relative;
+
+  :global {
+    .loginTop{
+      height: 60px;
+      background-image: url('../../assets/img/top.jpg');
+      background-size: 100% 100%;
+      padding: 7px 0 0 20px;
+      color: #fff;
+    }
+    .main {
+      border-radius: 6px;
+      position: absolute;
+      top: 52%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 1266px;
+      height: 694px;
+      .mainLeft{
+        width: 50%;
+        height: 100%;
+        background-image: url('../../assets/img/loginLeft.png');
+        background-size: 100% 100%;
+        position: relative;
+        .mainLeftTitle{
+          font-size: 20px;
+          letter-spacing: 5px;
+          position: absolute;
+          left: 50%;
+          bottom: 60px;
+          transform: translateX(-50%);
+          color: #fff;
+        }
+      }
+      .mainRight {
+        position: absolute;
+        right: 8px;
+        top: 10%;
+        width: 50%;
+        height: 80%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        background-image: url('../../assets/img/loginRight.png');
+        background-size: 100% 100%;
+
+        &>h1 {
+          letter-spacing: 6px;
+          font-size: 30px;
+          font-weight: 600;
+        }
+
+        .inputBox {
+          width: 100%;
+
+          .inputBoxRow {
+            width: 400px;
+            margin: 50px auto;
+
+            .ant-input-suffix .ant-input-password-icon {
+              font-size: 22px;
+            }
+          }
+
+          .ant-input-prefix {
+            margin-right: 10px;
+
+            .anticon {
+              padding-right: 10px;
+              width: 36px;
+              height: 36px;
+
+              svg {
+                width: 100%;
+                height: 100%;
+              }
+            }
+          }
+
+          .ant-input {
+            font-size: 18px;
+            width: 45%;
+            height: 60px;
+            line-height: 60px;
+            background-clip: content-box;
+          }
+
+          input:-webkit-autofill {
+            background-image: none;
+            -webkit-box-shadow: 0 0 0px 1000px transparent inset !important; //填充阴影，可以用来遮住背景色
+            background-color: transparent;
+            transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
+
+          }
+
+          .ant-input-affix-wrapper {
+            background-color: transparent;
+            padding: 0 11px;
+            width: 100%;
+            height: 60px;
+
+            .ant-input {
+              background-color: transparent;
+              width: 100%;
+              height: 60px;
+            }
+          }
+        }
+
+        .loginBtn {
+
+          .ant-btn {
+            font-size: 24px;
+            width: 400px;
+            height: 60px;
+          }
+        }
+      }
+
+    }
+  }
+}

houtai/src/pages/Login/index.tsx

@@ -0,0 +1,97 @@
+import styles from "./index.module.scss";
+
+import { Input, Button } from "antd";
+import { UserOutlined, LockOutlined } from "@ant-design/icons";
+import { useEffect, useState } from "react";
+import { Base64 } from "js-base64";
+import encodeStr from "@/utils/pass";
+import { userLoginAPI } from "@/store/action/login";
+import { setTokenInfo } from "@/utils/storage";
+import history from "@/utils/history";
+import { useDispatch } from "react-redux";
+import { MessageFu } from "@/utils/message";
+
+export default function Login() {
+  const dispatch = useDispatch();
+
+  // 进登录页面把权限的信息初始化，防止登录成功之后进到首页，数据渲染问题
+  useEffect(() => {
+    dispatch({ type: "login/setAuthPageArr", payload: [] });
+  }, [dispatch]);
+
+  // 账号密码
+  const [userName, setUserName] = useState("");
+  const [passWord, setPassWord] = useState("");
+
+  // 键盘按下回车事件
+  const keyUpEntFu = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") loginClickFu();
+  };
+  // 点击登录
+  const loginClickFu = async () => {
+    // 非空判断
+    if (userName === "") return MessageFu.warning("请输入用户名!");
+    else if (passWord === "") return MessageFu.warning("请输入密码!");
+    const obj = {
+      userName,
+      passWord: encodeStr(Base64.encode(passWord)),
+    };
+    const res: any = await userLoginAPI(obj);
+    if (res.code === 0) {
+      MessageFu.success("登录成功");
+      // 用户信息存到本地
+      setTokenInfo(res.data);
+      history.push("/");
+    }
+  };
+
+  return (
+    <div className={styles.Login}>
+      <div className="loginTop">
+        <h3>
+          中医药文化宣传教育基地
+          <br />
+          线上展馆管理后台
+        </h3>
+      </div>
+      <div className="main">
+        <div className="mainLeft">
+          <div className="mainLeftTitle">江苏省中医药管理局</div>
+        </div>
+        <div className="mainRight">
+          <h1>欢迎登录</h1>
+          {/* 账号密码输入框 */}
+          <div className="inputBox">
+            <div className="inputBoxRow">
+              <Input
+                onKeyUp={(e) => keyUpEntFu(e)}
+                value={userName}
+                onChange={(e) => setUserName(e.target.value.trim())}
+                prefix={<UserOutlined />}
+                placeholder="请输入用户名"
+                maxLength={15}
+              />
+            </div>
+            <div className="inputBoxRow">
+              <Input.Password
+                onKeyUp={(e) => keyUpEntFu(e)}
+                value={passWord}
+                onChange={(e) => setPassWord(e.target.value.trim())}
+                prefix={<LockOutlined />}
+                placeholder="请输入用户密码"
+                maxLength={15}
+              />
+            </div>
+          </div>
+
+          {/* 登录按钮 */}
+          <div className="loginBtn">
+            <Button type="primary" size="large" onClick={loginClickFu}>
+              登 录
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

houtai/src/pages/初始化组件/index.module.scss

@@ -0,0 +1,5 @@
+.AAAAA{
+  :global{
+    
+  }
+}

houtai/src/pages/初始化组件/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "./index.module.scss";
+ function AAAAA() {
+  
+  return (
+    <div className={styles.AAAAA}>
+      <h1>AAAAA</h1>
+    </div>
+  )
+}
+
+const MemoAAAAA = React.memo(AAAAA);
+
+export default MemoAAAAA;

houtai/src/store/action/log.ts

@@ -0,0 +1,15 @@
+import http from "@/utils/http";
+import { AppDispatch } from "..";
+/**
+ * 获取用户管理表格列表
+ */
+export const getLogListAPI = (data: any) => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.post("sys/log/list", data);
+    const obj = {
+      list: res.data.records,
+      total: res.data.total,
+    };
+    dispatch({ type: "log/getList", payload: obj });
+  };
+};

houtai/src/store/action/login.ts

@@ -0,0 +1,40 @@
+// 导入总仓库和自己声明的 AppDispatch
+// import store, { AppDispatch } from ".."
+import { DictListTypeAPI, DictListTypeObj } from "@/types";
+import http from "@/utils/http";
+import { AppDispatch } from "..";
+
+/**
+ * 用户登录接口
+ */
+export const userLoginAPI = (data: any) => {
+  return http.post("admin/login", { ...data });
+};
+
+/**
+ * 修改密码接口
+ */
+export const passWordEditAPI = (data: any) => {
+  return http.post("sys/user/updatePwd", { ...data });
+};
+
+/**
+ * 获取下拉框数据
+ */
+export const getDictListAPI = () => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.get("cms/dict/getList");
+    const list: DictListTypeAPI[] = res.data;
+    const obj = {
+      age: [{ label: "全部", value: "", type: "age" }],
+      texture: [{ label: "全部", value: "", type: "texture" }],
+      level: [{ label: "全部", value: "", type: "level" }],
+      source: [{ label: "全部", value: "", type: "source" }],
+    } as DictListTypeObj;
+    list.forEach((v) => {
+      obj[v.type].push({ label: v.name, value: v.name, type: v.type });
+    });
+
+    dispatch({ type: "login/getDictList", payload: obj });
+  };
+};

houtai/src/store/index.ts

@@ -0,0 +1,20 @@
+// 导入 redux
+import { applyMiddleware, legacy_createStore as createStore } from 'redux'
+// 导入自己封装的  rootReducer 
+import rootReducer from './reducer'
+// 导入调试工具和 异步的 redux（用来发送异步请求）
+// 调试工具需要下载谷歌 扩展程序 我用的是 Redux DevTools 3.0.17
+import { composeWithDevTools } from 'redux-devtools-extension'
+import thunk from 'redux-thunk'
+
+// 创建仓库实例
+const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)))
+
+// 声明 RootState，在使用仓库的时候用来使用
+export type RootState = ReturnType<typeof store.getState>
+
+// 声明 AppDispatch，在异步请求的时候来使用
+export type AppDispatch = typeof store.dispatch
+
+// 导出仓库实例
+export default store

houtai/src/store/reducer/index.ts

@@ -0,0 +1,15 @@
+// 导入合并reducer的依赖
+import { combineReducers } from 'redux'
+import logReducer from './log'
+
+// 导入 登录 模块的 reducer
+import loginReducer from './login'
+
+// 合并 reducer
+const rootReducer = combineReducers({
+  loginStore: loginReducer,
+  logReducer:logReducer,
+})
+
+// 默认导出
+export default rootReducer

houtai/src/store/reducer/log.ts

@@ -0,0 +1,25 @@
+// 初始化状态
+const initState = {
+  // 列表数据
+  tableInfo: {
+    list: [] as LogTableType[],
+    total: 0,
+  },
+};
+
+// 定义 action 类型
+type LogActionType = {
+  type: "log/getList";
+  payload: { list: LogTableType[]; total: number };
+};
+
+// 频道 reducer
+export default function logReducer(state = initState, action: LogActionType) {
+  switch (action.type) {
+    // 获取列表数据
+    case "log/getList":
+      return { ...state, tableInfo: action.payload };
+    default:
+      return state;
+  }
+}

houtai/src/store/reducer/login.ts

@@ -0,0 +1,62 @@
+import { DictListTypeObj } from "@/types";
+import { MessageType } from "@/utils/message";
+
+// 初始化状态
+const initState = {
+  // 所有图片点击预览查看大图
+  lookBigImg: {
+    url: "",
+    show: false,
+  },
+  // 加载请求的loding
+  asyncLoding: false,
+  // 视频的src
+  videoSrc: "",
+  // 所有的下拉框数据
+  dictList: {
+    age: [],
+    texture: [],
+    level: [],
+    source: [],
+  } as DictListTypeObj,
+  // antd轻提示(兼容360浏览器)
+  message: {
+    txt: "",
+    type: "info",
+    duration: 3,
+  } as MessageType,
+};
+
+// 定义 action 类型
+type LoginActionType =
+  | { type: "login/lookBigImg"; payload: { url: string; show: boolean } }
+  | { type: "login/asyncLoding"; payload: boolean }
+  | { type: "login/lookVideo"; payload: string }
+  | { type: "login/getDictList"; payload: DictListTypeObj }
+  | { type: "login/message"; payload: MessageType };
+
+// 频道 reducer
+export default function loginReducer(
+  state = initState,
+  action: LoginActionType
+) {
+  switch (action.type) {
+    // 所有图片点击预览查看大图
+    case "login/lookBigImg":
+      return { ...state, lookBigImg: action.payload };
+    // 加载请求的loding
+    case "login/asyncLoding":
+      return { ...state, asyncLoding: action.payload };
+    // 查看视频
+    case "login/lookVideo":
+      return { ...state, videoSrc: action.payload };
+    // 所有的下拉框数据
+    case "login/getDictList":
+      return { ...state, dictList: action.payload };
+    // antd轻提示(兼容360浏览器)
+    case "login/message":
+      return { ...state, message: action.payload };
+    default:
+      return state;
+  }
+}

houtai/src/types/api/log.d.ts

@@ -0,0 +1,11 @@
+type LogTableType = {
+  createTime: string;
+  creatorId: null;
+  creatorName: string;
+  description: string;
+  id: number;
+  ip: string;
+  type: string;
+  updateTime: null;
+  userName: string;
+}

houtai/src/types/api/login.d.ts

@@ -0,0 +1,27 @@
+export type DictListType = {
+  label: string;
+  value: string;
+  type: "age" | "texture" | "level" | "source";
+};
+
+export type DictListTypeObj = {
+  age: DictListType[];
+  texture: DictListType[];
+  level: DictListType[];
+  source: DictListType[];
+};
+
+
+export type DictListTypeAPI ={
+  createTime: null;
+  creatorId: null;
+  creatorName: string;
+  display: number;
+  id: string;
+  name: string;
+  parentId: null;
+  sort: null;
+  type: "age" | "texture" | "level" | "source";
+  updateTime: null;
+}
+

houtai/src/types/declaration.d.ts

@@ -0,0 +1,5 @@
+declare module "history";
+declare module "*.scss";
+declare module "*.png";
+declare module "*.gif";
+declare module "js-export-excel";

houtai/src/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './api/log'
+export * from './api/login'

houtai/src/utils/changeData.ts

@@ -0,0 +1,6 @@
+export const typeChangeObj = {
+  img: "图片",
+  model: "模型",
+  audio: "音频",
+  video: "视频",
+};

houtai/src/utils/history.ts

@@ -0,0 +1,20 @@
+// createBrowserHistory 和 createHashHistory。
+// 这里我们简单说一下 createBrowserHistory地址栏不带#； createHashHistory 带#
+// 根据公司要求自己选择，createBrowserHistory在项目上线的时候需要服务器映射等处理。
+import { createHashHistory  } from 'history'
+const history = createHashHistory()
+export default history
+
+export const urlParameter = (data: string) => {
+  if (data) {
+    const query = data.substring(data.indexOf("?") + 1);
+    const arr = query.split("&");
+    const params = {} as any;
+    arr.forEach((v) => {
+      const key = v.substring(0, v.indexOf("="));
+      const val = v.substring(v.indexOf("=") + 1);
+      params[key] = val;
+    });
+    return params;
+  } else return {};
+};

houtai/src/utils/http.ts

@@ -0,0 +1,99 @@
+import axios from "axios";
+import history from "./history";
+import { getTokenInfo, removeTokenInfo } from "./storage";
+import store from "@/store";
+import { MessageFu } from "./message";
+// 请求基地址
+export const baseURL =
+  // 线下的图片地址需要加上/api/
+  // process.env.NODE_ENV === "development"
+  //   ? "http://192.168.20.55:8040/api/"
+  //   : "";
+  process.env.NODE_ENV === "development" ? "https://jszhongyi.4dage.com" : "";
+
+// 处理  类型“AxiosResponse<any, any>”上不存在属性“code”
+declare module "axios" {
+  interface AxiosResponse {
+    code: number;
+    // 这里追加你的参数
+  }
+}
+
+// 创建 axios 实例
+const http = axios.create({
+  // --------线下的地址不用加/api/
+  // baseURL: baseURL,
+
+  // --------打包或线上环境接口需要加上api/
+  baseURL: baseURL + "/api/",
+  timeout: 5000,
+});
+
+let axajInd = 0;
+
+// 请求拦截器
+http.interceptors.request.use(
+  function (config: any) {
+    // 发请求前打开加载提示
+    store.dispatch({ type: "login/asyncLoding", payload: true });
+
+    axajInd++;
+
+    const { token } = getTokenInfo();
+    if (token) config.headers.token = token;
+    return config;
+  },
+  function (err) {
+    return Promise.reject(err);
+  }
+);
+
+let timeId = -1;
+
+// 响应拦截器
+http.interceptors.response.use(
+  function (response) {
+    // 请求回来的关闭加载提示
+    axajInd--;
+    if (axajInd === 0) {
+      store.dispatch({ type: "login/asyncLoding", payload: false });
+    }
+    if (response.data.code === 5001 || response.data.code === 5002) {
+      clearTimeout(timeId);
+      timeId = window.setTimeout(() => {
+        removeTokenInfo();
+        MessageFu.warning("登录失效!");
+        history.push("/login");
+      }, 200);
+    } else if (response.data.code === 0) {
+      // MessageFu.success(response.data.msg);
+    } else if (response.data.code === 3014)
+      MessageFu.warning("用户名不存在或密码错误，请联系管理员!");
+    else MessageFu.warning(response.data.msg);
+    return response.data;
+  },
+  async function (err) {
+    axajInd = 0;
+    store.dispatch({ type: "login/asyncLoding", payload: false });
+
+    // 上传附件的进度条
+    const UpAsyncLodingDom: any = document.querySelector("#UpAsyncLoding");
+    const progressDom: any = document.querySelector("#progress");
+
+    // 如果因为网络原因，response没有，给提示消息
+    if (!err.response) {
+      MessageFu.warning("网络繁忙，请稍后重试!");
+    } else {
+      MessageFu.warning("错误!");
+    }
+
+    // 响应错误也要取消 上传文件的进度条
+    UpAsyncLodingDom.style.opacity = 0;
+    progressDom.style.width = "0%";
+
+    return Promise.reject(err);
+  }
+);
+
+// 导出 axios 实例
+export default http;

houtai/src/utils/message.ts

@@ -0,0 +1,50 @@
+import store from "@/store";
+
+export type MessageType = {
+  txt: string;
+  type: "info" | "success" | "error" | "warning";
+  duration: number;
+};
+
+export const MessageFu = {
+  info: (txt: string, duration?: number) => {
+    store.dispatch({
+      type: "login/message",
+      payload: {
+        txt,
+        type: "info",
+        duration: duration === undefined ? 3 : duration,
+      },
+    });
+  },
+  success: (txt: string, duration?: number) => {
+    store.dispatch({
+      type: "login/message",
+      payload: {
+        txt,
+        type: "success",
+        duration: duration === undefined ? 3 : duration,
+      },
+    });
+  },
+  error: (txt: string, duration?: number) => {
+    store.dispatch({
+      type: "login/message",
+      payload: {
+        txt,
+        type: "error",
+        duration: duration === undefined ? 3 : duration,
+      },
+    });
+  },
+  warning: (txt: string, duration?: number) => {
+    store.dispatch({
+      type: "login/message",
+      payload: {
+        txt,
+        type: "warning",
+        duration: duration === undefined ? 3 : duration,
+      },
+    });
+  },
+};

houtai/src/utils/pass.ts

@@ -0,0 +1,100 @@
+function randomWord(randomFlag: boolean, min: number, max: number = 15) {
+  let str = "";
+  let range = min;
+  const arr = [
+    "0",
+    "1",
+    "2",
+    "3",
+    "4",
+    "5",
+    "6",
+    "7",
+    "8",
+    "9",
+    "a",
+    "b",
+    "c",
+    "d",
+    "e",
+    "f",
+    "g",
+    "h",
+    "i",
+    "j",
+    "k",
+    "l",
+    "m",
+    "n",
+    "o",
+    "p",
+    "q",
+    "r",
+    "s",
+    "t",
+    "u",
+    "v",
+    "w",
+    "x",
+    "y",
+    "z",
+    "A",
+    "B",
+    "C",
+    "D",
+    "E",
+    "F",
+    "G",
+    "H",
+    "I",
+    "J",
+    "K",
+    "L",
+    "M",
+    "N",
+    "O",
+    "P",
+    "Q",
+    "R",
+    "S",
+    "T",
+    "U",
+    "V",
+    "W",
+    "X",
+    "Y",
+    "Z",
+  ];
+  // 随机产生
+  if (randomFlag) {
+    range = Math.round(Math.random() * (max - min)) + min;
+  }
+  for (var i = 0; i < range; i++) {
+    const pos = Math.round(Math.random() * (arr.length - 1));
+    str += arr[pos];
+  }
+  return str;
+}
+
+const encodeStr = (str: string, strv = "") => {
+  const NUM = 2;
+  const front = randomWord(false, 8);
+  const middle = randomWord(false, 8);
+  const end = randomWord(false, 8);
+
+  const str1 = str.substring(0, NUM);
+  const str2 = str.substring(NUM);
+
+  if (strv) {
+    const strv1 = strv.substring(0, NUM);
+    const strv2 = strv.substring(NUM);
+    return [
+      front + str2 + middle + str1 + end,
+      front + strv2 + middle + strv1 + end,
+    ];
+  }
+
+  return front + str2 + middle + str1 + end;
+};
+
+export default encodeStr;

houtai/src/utils/storage.ts

@@ -0,0 +1,34 @@
+// ------------------------------------token的本地存储------------------------------------
+
+// 用户 Token 的本地缓存键名，自己定义
+const TOKEN_KEY = 'YPZZBWG_USER_INFO'
+
+/**
+ * 从本地缓存中获取 Token 信息
+ */
+export const getTokenInfo = (): any => {
+  return JSON.parse(localStorage.getItem(TOKEN_KEY) || '{}')
+}
+
+/**
+ * 将 Token 信息存入缓存
+ * @param {Object} tokenInfo 从后端获取到的 Token 信息
+ */
+export const setTokenInfo = (tokenInfo: any): void => {
+  localStorage.setItem(TOKEN_KEY, JSON.stringify(tokenInfo))
+}
+
+/**
+ * 删除本地缓存中的 Token 信息
+ */
+export const removeTokenInfo = (): void => {
+  localStorage.removeItem(TOKEN_KEY)
+}
+
+/**
+ * 判断本地缓存中是否存在 Token 信息
+ */
+export const hasToken = (): boolean => {
+  return Boolean(getTokenInfo().token)
+}
+

houtai/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "extends": "./path.tsconfig.json",
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}