init

.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*

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/).

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)

package.json

@@ -0,0 +1,63 @@
+{
+  "name": "demo",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@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": "."
+}

path.tsconfig.json

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

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>

src/App.tsx

@@ -0,0 +1,62 @@
+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";
+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 />
+    </>
+  );
+}

src/assets/styles/base.css

@@ -0,0 +1,185 @@
+* {
+  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: #333;
+}
+
+a {
+  text-decoration: none;
+  color: #333;
+  outline: none;
+}
+
+i {
+  font-style: normal;
+}
+
+img {
+  max-width: 100%;
+  max-height: 100%;
+  vertical-align: middle;
+}
+
+ul {
+  list-style: none;
+}
+
+#root {
+  width: 100vw;
+  height: 100vh;
+  min-width: 1600px;
+  min-height: 900px;
+  overflow-y: auto;
+
+}
+
+body {
+  overflow-y: overlay;
+}
+
+/* 文本域取消下拉 */
+textarea {
+  resize: none !important;
+}
+
+/* 主题色 */
+:root {
+  --themeColor: #863326
+}
+
+a {
+  color: var(--themeColor);
+}
+
+/* 按钮的危险颜色 */
+.ant-btn-text.ant-btn-dangerous {
+  color: #2f489a;
+}
+
+/* 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;
+}
+
+img {
+  object-fit: cover;
+}
+
+/* 表格的图片居中 */
+.tableImgAuto{
+  display: flex;
+  justify-content: center;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+
+/* 找不到页面 */
+.noFindPage {
+  opacity: 0;
+  transition: opacity .5s;
+}
+
+/* antd图片预览组件 */
+.ant-image {
+  display: none;
+}
+
+/* antd表格居中 */
+
+.ant-table-cell {
+  text-align: center !important;
+}
+
+/* 页面的顶部title */
+.pageTitlt {
+  background-color: #fff;
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  font-size: 16px;
+  font-weight: 700;
+  padding-left: 30px;
+  border-radius: 10px;
+  position: relative;
+}
+
+.pageTitlt::before {
+  content: '';
+  position: absolute;
+  top: 8px;
+  left: 18px;
+  width: 5px;
+  height: 24px;
+  background-color: var(--themeColor);
+}

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;
+}

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;

src/components/AuthRoute/index.tsx

@@ -0,0 +1,32 @@
+import { hasToken } from "@//utils/storage";
+import { message } from "antd";
+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 {
+          message.warning("登录失效!");
+          return (
+            <Redirect
+              to={{
+                pathname: "/login",
+              }}
+            />
+          );
+        }
+      }}
+    />
+  );
+}

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;
+        }
+      }
+    }
+  }
+
+}

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;

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>
+  );
+}

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;
+}

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;

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);
+      }
+
+    }
+
+  }
+}

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;

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;
+          }
+        }
+      }
+    }
+  }
+}

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;

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%;
+      }
+    }
+  }
+}

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;

src/index.tsx

@@ -0,0 +1,30 @@
+// 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";
+// import dayjs from "dayjs";
+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: "#863326",
+      },
+    }}
+  >
+    <Provider store={store}>
+      <App />
+    </Provider>
+  </ConfigProvider>
+);

src/pages/Goods/index.module.scss

@@ -0,0 +1,24 @@
+.Goods {
+  :global {
+    .goodsTop {
+      height: 400px;
+      background-color: #fff;
+      border-radius: 10px;
+
+      .goodsSearchBox {
+        padding-left: 20px;
+
+        .goodsSearchBox1 {
+          display: flex;
+          align-items: center;
+          flex-wrap: wrap;
+          margin-bottom: 12px;
+          .row {
+            margin-right: 30px;
+            margin-bottom: 15px;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/Goods/index.tsx

@@ -0,0 +1,272 @@
+import { RootState } from "@/store";
+import { GoodsTableSearch } from "@/types";
+import { Input, Select, DatePicker, Button } from "antd";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useSelector } from "react-redux";
+import { useLocation } from "react-router-dom";
+import styles from "./index.module.scss";
+
+const { RangePicker } = DatePicker;
+
+function Goods() {
+  // 获取地址栏参数
+  const location = useLocation();
+
+  const pageNumRef = useRef(1);
+
+  // 从仓库获取下拉列表数据
+  const dictList = useSelector((state: RootState) => state.loginStore.dictList);
+
+  // 如果有参数 根据参数页码在次发送请求
+  useEffect(() => {
+    const urlParam = location.state || {};
+    setTableSelect({
+      ...tableSelect,
+      pageNum: Number(urlParam.k) ? Number(urlParam.k) : 1,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location]);
+
+  // 顶部筛选
+  const [tableSelect, setTableSelect] = useState<GoodsTableSearch>({
+    name: "",
+    num: "",
+    dictTexture: "",
+    dictAge: "",
+    dictLevel: "",
+    dictSource: "",
+    startTime: "",
+    endTime: "",
+    topic: -1,
+    display: -1,
+    pageSize: 10,
+    pageNum: 1,
+  });
+
+  // 封装发送请求的函数
+
+  const getList = useCallback(() => {
+    const data = {
+      ...tableSelect,
+      topic: tableSelect.topic === -1 ? null : tableSelect.topic,
+      display: tableSelect.display === -1 ? null : tableSelect.display,
+
+      pageNum: pageNumRef.current,
+    };
+    console.log("发送请求", data);
+
+    // dispatch(getObject1List(data));
+  }, [tableSelect]);
+
+  // 当前页码统一
+  useEffect(() => {
+    pageNumRef.current = tableSelect.pageNum;
+  }, [tableSelect.pageNum]);
+
+  // 防止返回的时候发送了2次请求来对应页码
+
+  const getListRef = useRef(-1);
+
+  useEffect(() => {
+    clearTimeout(getListRef.current);
+    getListRef.current = window.setTimeout(() => {
+      getList();
+    }, 100);
+  }, [getList, tableSelect]);
+
+  // 名称的输入
+  const nameTime = useRef(-1);
+  const nameChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      clearTimeout(nameTime.current);
+      nameTime.current = window.setTimeout(() => {
+        setTableSelect({
+          ...tableSelect,
+          name: e.target.value,
+          pageNum: 1,
+        });
+      }, 500);
+    },
+    [tableSelect]
+  );
+
+  // 登记编号的输入
+  const numTime = useRef(-1);
+  const numChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      clearTimeout(numTime.current);
+      numTime.current = window.setTimeout(() => {
+        setTableSelect({
+          ...tableSelect,
+          num: e.target.value,
+          pageNum: 1,
+        });
+      }, 500);
+    },
+    [tableSelect]
+  );
+
+  // 时间选择器改变
+  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 });
+  };
+
+  // 点击重置
+  const resetSelectFu = useCallback(() => {
+
+    // 把2个输入框和时间选择器清空
+
+
+    setTableSelect({
+      name: "",
+      num: "",
+      dictTexture: "",
+      dictAge: "",
+      dictLevel: "",
+      dictSource: "",
+      startTime: "",
+      endTime: "",
+      topic: -1,
+      display: -1,
+      pageSize: 10,
+      pageNum: 1,
+    });
+  }, []);
+
+  return (
+    <div className={styles.Goods}>
+      <div className="goodsTop">
+        <div className="pageTitlt">馆藏管理</div>
+        <div className="goodsSearchBox">
+          <div className="goodsSearchBox1">
+            <div className="row">
+              <span>名称：</span>
+              <Input
+                maxLength={10}
+                style={{ width: 150 }}
+                placeholder="请输入"
+                allowClear
+                onChange={(e) => nameChange(e)}
+              />
+            </div>
+
+            <div className="row">
+              <span>登记编号：</span>
+              <Input
+                maxLength={20}
+                style={{ width: 150 }}
+                placeholder="请输入"
+                allowClear
+                onChange={(e) => numChange(e)}
+              />
+            </div>
+
+            <div className="row">
+              <span>类别：</span>
+              <Select
+                placeholder="请选择"
+                style={{ width: 160 }}
+                value={tableSelect.dictTexture}
+                onChange={(e) =>
+                  setTableSelect({ ...tableSelect, dictTexture: e, pageNum: 1 })
+                }
+                options={dictList["texture"]}
+              />
+            </div>
+
+            <div className="row">
+              <span>年代：</span>
+              <Select
+                placeholder="请选择"
+                style={{ width: 150 }}
+                value={tableSelect.dictAge}
+                onChange={(e) =>
+                  setTableSelect({ ...tableSelect, dictAge: e, pageNum: 1 })
+                }
+                options={dictList["age"]}
+              />
+            </div>
+
+            <div className="row">
+              <span>级别：</span>
+              <Select
+                placeholder="请选择"
+                style={{ width: 100 }}
+                value={tableSelect.dictLevel}
+                onChange={(e) =>
+                  setTableSelect({ ...tableSelect, dictLevel: e, pageNum: 1 })
+                }
+                options={dictList["level"]}
+              />
+            </div>
+            <div className="row">
+              <span>来源：</span>
+              <Select
+                placeholder="请选择"
+                style={{ width: 100 }}
+                value={tableSelect.dictSource}
+                onChange={(e) =>
+                  setTableSelect({ ...tableSelect, dictSource: e, pageNum: 1 })
+                }
+                options={dictList["source"]}
+              />
+            </div>
+
+            <div className="row">
+              <span>最近编辑日期：</span>
+              <RangePicker onChange={timeChange} />
+            </div>
+            <div className="row">
+              <span>万物墙：</span>
+              <Select
+                placeholder="请选择"
+                style={{ width: 100 }}
+                value={tableSelect.topic}
+                onChange={(e) =>
+                  setTableSelect({ ...tableSelect, topic: e, pageNum: 1 })
+                }
+                options={[
+                  { value: -1, label: "全部" },
+                  { value: 1, label: "珍品" },
+                  { value: 2, label: "精品" },
+                ]}
+              />
+            </div>
+            <div className="row">
+              <span>展示状态：</span>
+              <Select
+                placeholder="请选择"
+                style={{ width: 100 }}
+                value={tableSelect.display}
+                onChange={(e) =>
+                  setTableSelect({ ...tableSelect, display: e, pageNum: 1 })
+                }
+                options={[
+                  { value: -1, label: "全部" },
+                  { value: 1, label: "开启" },
+                  { value: 0, label: "关闭" },
+                ]}
+              />
+            </div>
+
+            <div className="row">
+              <Button onClick={resetSelectFu}>重置</Button>{" "}
+              &emsp;&emsp;&emsp;&emsp;
+              <Button type="primary">新增</Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const MemoGoods = React.memo(Goods);
+
+export default MemoGoods;

src/pages/Hot/index.module.scss

@@ -0,0 +1,178 @@
+.Hot {
+  display: flex;
+  color: #696969;
+
+  :global {
+    .hotTitle {
+      color: #696969;
+      display: flex;
+      align-items: center;
+
+      .hotTitle1 {
+        font-weight: 700;
+        font-size: 20px;
+      }
+
+      .hotTitle2 {
+        font-size: 14px;
+        margin-left: 20px;
+      }
+
+      .hotTitleInco {
+        cursor: pointer;
+        position: relative;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background-color: #696969;
+        margin-left: 8px;
+        text-align: center;
+        line-height: 16px;
+        color: #fff;
+        font-size: 12px;
+      }
+    }
+
+    .hotLeft {
+      width: 970px;
+      height: 100%;
+      margin-right: 15px;
+
+      &>div {
+        padding: 10px 15px 0;
+        width: 100%;
+        background-color: #fff;
+        border-radius: 10px;
+      }
+
+      .hotLeft_1 {
+        height: 250px;
+        margin-bottom: 15px;
+
+        .hotEch1 {
+          width: 100%;
+          height: 180px;
+        }
+
+        .hotLeft_1Txt {
+          color: #aaaaaa;
+          font-size: 14px;
+          text-align: center;
+          height: 28px;
+          line-height: 28px;
+        }
+      }
+
+      .hotLeft_2 {
+        height: calc(100% - 265px);
+
+        .hotEch2Box {
+          width: 100%;
+          height: calc(100% - 28px);
+          display: flex;
+          flex-wrap: wrap;
+
+          .hotEch2BoxSon {
+            position: relative;
+            width: 50%;
+            height: 50%;
+
+            .txt {
+              position: absolute;
+              font-weight: 700;
+              font-size: 18px;
+              top: 30px;
+              left: 10px;
+            }
+
+            .ech2BoxCake {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
+    }
+
+    .hotRight {
+      padding: 10px 15px 0;
+      width: calc(100% - 985px);
+      height: 100%;
+      background-color: #fff;
+      border-radius: 10px;
+
+      .hotRightTitle {
+        color: #696969;
+        display: flex;
+        align-items: center;
+
+        .hotRightTitle1 {
+          font-weight: 700;
+          font-size: 20px;
+        }
+
+      }
+
+      .hotRightMain::-webkit-scrollbar {
+        /*滚动条整体样式*/
+        width: 5px;
+        /*高宽分别对应横竖滚动条的尺寸*/
+        height: 1px;
+      }
+
+      .hotRightMain::-webkit-scrollbar-thumb {
+        /*滚动条里面小方块*/
+        border-radius: 10px;
+        -webkit-box-shadow: inset 0 0 5px transparent;
+        background-color: var(--themeColor);
+      }
+
+      .hotRightMain::-webkit-scrollbar-track {
+        /*滚动条里面轨道*/
+        -webkit-box-shadow: inset 0 0 5px transparent;
+        border-radius: 10px;
+        background: transparent;
+      }
+
+      .hotRightMain {
+        margin-top: 10px;
+        width: 100%;
+        height: calc(100% - 50px);
+        overflow-y: auto;
+        padding: 1px 8px 0 3px;
+
+        .hotRightMainRow {
+          margin-bottom: 15px;
+          border-radius: 5px;
+          box-shadow: 0px 0px 4px 0px #ccc;
+          height: 50px;
+          line-height: 50px;
+          padding: 0 20px 0 8px;
+          display: flex;
+          justify-content: space-between;
+
+          .hotRightMainRow1 {
+            cursor: pointer;
+            width: calc(100% - 50px);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .hotRightMainRow2 {
+            text-align: right;
+            width: 50px;
+          }
+        }
+      }
+
+      .noneInfo {
+        width: 100%;
+        height: calc(100% - 32px);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+}

src/pages/Hot/index.tsx

@@ -0,0 +1,352 @@
+import React, { useCallback, useEffect, useState } from "react";
+import styles from "./index.module.scss";
+import { ExclamationOutlined } from "@ant-design/icons";
+
+import * as echarts from "echarts/core";
+import { GridComponent } from "echarts/components";
+import { LineChart } from "echarts/charts";
+import { UniversalTransition } from "echarts/features";
+import { CanvasRenderer } from "echarts/renderers";
+import { TooltipComponent, LegendComponent } from "echarts/components";
+
+import { PieChart } from "echarts/charts";
+import { LabelLayout } from "echarts/features";
+import { Button, Empty, message, Select, Tooltip } from "antd";
+import ExportJsonExcel from "js-export-excel";
+import dayjs from "dayjs";
+
+echarts.use([
+  GridComponent,
+  LineChart,
+  CanvasRenderer,
+  UniversalTransition,
+  TooltipComponent,
+  LegendComponent,
+  PieChart,
+  LabelLayout,
+]);
+
+function Hot() {
+  // 生成4个饼图的方法
+  const echFu2 = useCallback(
+    (
+      dom: any,
+      data: { value: number; name: string }[],
+      data2: { name: string; icon: string }[]
+    ) => {
+      let chartDom2: any = document.querySelector(dom);
+      let myChart2 = echarts.init(chartDom2);
+      let option2 = {
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          orient: "vertical",
+          top: "center",
+          right: 30,
+          data: data2,
+          formatter: (name: string) => {
+            let resName = "";
+            data.forEach((v) => {
+              if (name === v.name) {
+                if (name.length > 4)
+                  resName = name.slice(0, 4) + "... " + v.value;
+                else resName = name + " " + v.value;
+              }
+            });
+
+            return resName;
+          },
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            center: ["34%", "50%"],
+            radius: ["40%", "70%"],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: "center",
+            },
+            emphasis: {
+              label: {
+                show: false,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data,
+          },
+        ],
+      };
+      option2 && myChart2.setOption(option2);
+    },
+    []
+  );
+
+  // 获取图表数据
+  const getHotInfo = useCallback(async () => {
+    // 设置折线图图表
+    const chartDom1: any = document.querySelector(".hotEch1")!;
+    const myChart1 = echarts.init(chartDom1);
+    const option1 = {
+      grid: {
+        left: "-24", //距左边边框的距离
+        right: "0%", //距右边边框的距离
+        bottom: "10", //距下面边框的距离
+        top: "15", //距上面边框的距离
+        containLabel: true,
+      },
+
+      xAxis: {
+        type: "category",
+        data: [
+          "1月1日",
+          "1月2日",
+          "1月3日",
+          "1月4日",
+          "1月5日",
+          "1月6日",
+          "1月7日",
+          "1月8日",
+          "1月9日",
+          "1月10日",
+          "1月11日",
+          "1月12日",
+          "1月13日",
+          "1月14日",
+        ],
+        axisLine: {
+          show: false, //隐藏X轴
+        },
+        axisTick: {
+          show: false, //隐藏刻度线
+        },
+        axisLabel: {
+          show: false, //隐藏X轴文字
+        },
+      },
+      yAxis: {
+        type: "value",
+      },
+      series: [
+        {
+          data: [
+            150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147,
+            100,
+          ],
+          type: "line",
+        },
+      ],
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "cross",
+          label: {
+            backgroundColor: "#6a7985",
+          },
+        },
+        // formatter: "{a} <br/>{b} : {c}"
+      },
+    };
+    option1 && myChart1.setOption(option1);
+
+    const data = [
+      { value: 1048, name: "石头" },
+      { value: 735, name: "玉器" },
+      { value: 580, name: "陶器" },
+      { value: 484, name: "快乐的小青蛙" },
+      { value: 300, name: "其他" },
+    ];
+    const data2 = [
+      { icon: "circle", name: "石头" },
+      { icon: "circle", name: "玉器" },
+      { icon: "circle", name: "陶器" },
+      { icon: "circle", name: "快乐的小青蛙" },
+      { icon: "circle", name: "其他" },
+    ];
+    // 4个饼图
+    echFu2(".hotEch2", data, data2);
+    echFu2(".hotEch3", data, data2);
+    echFu2(".hotEch4", data, data2);
+    echFu2(".hotEch5", data, data2);
+  }, [echFu2]);
+
+  useEffect(() => {
+    getHotInfo();
+  }, [getHotInfo]);
+
+  // 馆藏点赞的时间筛选
+  const [value, setValue] = useState(2);
+
+  useEffect(() => {
+    const dom: any = document.querySelector(".hotRightMain");
+    if (dom) dom.scrollTop = 0;
+    if (value === 0) {
+      setLikeData([
+        { name: "民国制林则徐手迹玻璃底片", num: 99 },
+        { name: "民国制林则徐手迹玻璃底片sssssssssssssssssssss", num: 99 },
+        { name: "民国制林则徐手迹玻璃底片", num: 99 },
+      ]);
+    }
+  }, [value]);
+
+  // 馆藏点赞数据
+  const [likeData, setLikeData] = useState([
+    { name: "民国制林则徐手迹玻璃底片", num: 99999 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片sssssssssssssssssssss", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+    { name: "民国制林则徐手迹玻璃底片", num: 99 },
+  ]);
+
+  // 点击导出
+  const deriveFu = useCallback(async () => {
+    if (likeData.length === 0) return message.warning("当前搜索条件没有数据!");
+    const name = dayjs(new Date()).format("YYYYMMDD");
+
+    const option = {
+      fileName: name,
+      datas: [
+        {
+          sheetData: likeData.map((v, i) => {
+            return {
+              index: i + 1,
+              ...v,
+            };
+          }),
+          sheetName: name,
+          sheetFilter: ["index", "name", "num"],
+          sheetHeader: ["排序", "藏品名称", "点赞数"],
+          columnWidths: [5, 20, 5],
+        },
+      ],
+    };
+
+    const toExcel = new ExportJsonExcel(option); //new
+    toExcel.saveExcel(); //保存
+  }, [likeData]);
+
+  return (
+    <div className={styles.Hot}>
+      <div className="hotLeft">
+        {/* 第一个盒子 */}
+        <div className="hotLeft_1">
+          {/* 标题和！提示 */}
+          <div className="hotTitle">
+            <div className="hotTitle1">万物墙使用热度 58</div>
+            <div className="hotTitleInco">
+              <Tooltip title=" 游客通过万物墙每查看一次数据，热度值记为1">
+                <div className="hotTitleInco1">
+                  <ExclamationOutlined />
+                </div>{" "}
+              </Tooltip>
+            </div>
+          </div>
+          {/* 折线图 */}
+          <div className="hotEch1"></div>
+          {/* 近十四天数据文字 */}
+          <div className="hotLeft_1Txt">近十四天数据</div>
+        </div>
+
+        {/* 第二个盒子 */}
+        <div className="hotLeft_2">
+          <div className="hotTitle">
+            <div className="hotTitle1">馆藏统计</div>
+            <div className="hotTitle2">当前文物合计共 124 件</div>
+          </div>
+          {/* 4个饼图 */}
+          <div className="hotEch2Box">
+            <div className="hotEch2BoxSon">
+              <div className="txt">类别</div>
+              <div className="hotEch2 ech2BoxCake"></div>
+            </div>
+            <div className="hotEch2BoxSon">
+              <div className="txt">年代</div>
+              <div className="hotEch3 ech2BoxCake"></div>
+            </div>
+            <div className="hotEch2BoxSon">
+              <div className="txt">级别</div>
+              <div className="hotEch4 ech2BoxCake"></div>
+            </div>
+            <div className="hotEch2BoxSon">
+              <div className="txt">来源</div>
+              <div className="hotEch5 ech2BoxCake"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="hotRight">
+        <div className="hotRightTitle">
+          <div className="hotRightTitle1">馆藏点赞</div>
+          &emsp;&emsp;
+          <div>
+            <Button onClick={deriveFu}>导出数据</Button>
+            &emsp;
+            <Select
+              value={value}
+              style={{ width: 120 }}
+              onChange={(e) => setValue(e)}
+              options={[
+                { value: 0, label: "今日" },
+                { value: 1, label: "近七日" },
+                { value: 2, label: "近三十日" },
+                { value: 3, label: "所有时间" },
+              ]}
+            />
+          </div>
+        </div>
+        {1 + 1 === 2 ? (
+          <div className="hotRightMain">
+            {likeData.map((v, i) => (
+              <div className="hotRightMainRow" key={i}>
+                <div className="hotRightMainRow1" title="666666">
+                  {i + 1}. {v.name}
+                </div>
+                <div className="hotRightMainRow2">{v.num}</div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="noneInfo">
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const MemoHot = React.memo(Hot);
+
+export default MemoHot;

src/pages/Layout/index.module.scss

@@ -0,0 +1,178 @@
+.Layout {
+  width: 100%;
+  height: 100%;
+  background-image: url('../../assets/img/layoutBg.jpg');
+  background-size: 100% 100%;
+
+  :global {
+
+    .topTitle {
+      position: relative;
+      z-index: 10;
+      width: 100%;
+      height: 70px;
+      background-image: url('../../assets/img/layoutTopBg.png');
+      background-size: 100% 100%;
+      padding: 0 30px 0 15px;
+      display: flex;
+      justify-content: space-between;
+
+      .logo {
+        margin-top: 8px;
+        width: 290px;
+        height: 42px;
+        background-image: url('../../assets/img/logo.png');
+        background-size: 100% 100%;
+      }
+
+      .user {
+        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: #fff2da;
+
+        .userInco {
+          margin-left: 10px;
+          color: #fff2da;
+        }
+
+        .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: #fff2da;
+            }
+          }
+        }
+
+        &:hover {
+          .userSet {
+            opacity: 1;
+            pointer-events: auto;
+            bottom: -110px;
+          }
+
+          .userInco1 {
+            display: block;
+          }
+
+          .userInco2 {
+            display: none;
+          }
+
+
+        }
+      }
+    }
+
+    .mainBox {
+      margin-top: 8px;
+      width: 100%;
+      height: calc(100% - 85px);
+      display: flex;
+
+      .mainBoxL {
+        width: 200px;
+        height: 100%;
+        background-image: url('../../assets/img/layotLftBg.png');
+        background-size: 100% 100%;
+        margin-right: 15px;
+        padding: 20px 0 0 10px;
+        display: flex;
+
+        .mainBoxL1 {
+          width: 22px;
+          height: 368px;
+          background-image: url('../../assets/img/llTab.png');
+          background-size: 100% 100%;
+        }
+
+        .mainBoxL2 {
+          .mainBoxL2Row {
+            padding-left: 34px;
+            cursor: pointer;
+            height: 50px;
+            line-height: 50px;
+            margin-bottom: 8px;
+            font-size: 16px;
+            color: #fef4e9;
+            position: relative;
+
+            &:hover {
+              &::before {
+                content: '';
+                position: absolute;
+                width: 150px;
+                height: 28px;
+                bottom: 6px;
+                left: 0px;
+                background-image: url('../../assets/img/activeLL.png');
+                background-size: 100% 100%;
+              }
+            }
+          }
+
+          .active {
+            pointer-events: none;
+            &::before {
+              content: '';
+              position: absolute;
+              width: 150px;
+              height: 28px;
+              bottom: 6px;
+              left: 0px;
+              background-image: url('../../assets/img/activeLL.png');
+              background-size: 100% 100%;
+            }
+          }
+        }
+      }
+
+      .mainBoxR {
+        width: calc(100% - 215px);
+        height: 100%;
+        overflow: hidden;
+        padding: 10px 15px 10px 0;
+
+        &>div {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+  }
+}

src/pages/Layout/index.tsx

@@ -0,0 +1,259 @@
+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, message, 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";
+
+function Layout() {
+  const dispatch = useDispatch();
+
+  const list = useMemo(() => {
+    return [
+      {
+        id: 1,
+        name: "热度统计",
+        path: "/",
+        done: true,
+        Com: React.lazy(() => import("../Hot")),
+      },
+      {
+        id: 2,
+        name: "万物墙管理",
+        path: "/wall",
+        done: true,
+        Com: React.lazy(() => import("../Wall")),
+      },
+      {
+        id: 3,
+        name: "馆藏管理",
+        path: "/goods",
+        done: true,
+        Com: React.lazy(() => import("../Goods")),
+      },
+      {
+        id: 4,
+        name: "用户管理",
+        path: "/user",
+        done: true,
+        Com: React.lazy(() => import("../User")),
+      },
+      {
+        id: 5,
+        name: "角色管理",
+        path: "/role",
+        done: true,
+        Com: React.lazy(() => import("../Role")),
+      },
+      {
+        id: 6,
+        name: "操作日志",
+        path: "/log",
+        done: true,
+        Com: React.lazy(() => import("../Log")),
+      },
+    ];
+  }, []);
+
+  // 进页面获取所有下拉信息
+  useEffect(() => {
+    dispatch(getDictListAPI());
+  }, [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 message.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) {
+      message.success("修改成功!");
+      loginExit();
+    }
+  };
+
+  // 点击退出登录
+  const loginExit = () => {
+    removeTokenInfo();
+    history.push("/login");
+  };
+
+  return (
+    <div className={styles.Layout}>
+      {/* 顶部 */}
+      <div className="topTitle">
+        {/* logo */}
+        <div className="logo"></div>
+        {/* 用户相关 */}
+        <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
+              title="确定退出吗?"
+              okText="确定"
+              cancelText="取消"
+              onConfirm={loginExit}
+            >
+              退出登录
+            </Popconfirm>
+          </div>
+        </div>
+      </div>
+
+      {/* 下面主体 */}
+      <div className="mainBox">
+        <div className="mainBoxL">
+          <div className="mainBoxL1"></div>
+          <div className="mainBoxL2">
+            {list.map((v) => (
+              <div
+                key={v.id}
+                onClick={() => pathCutFu(v.path)}
+                className={classNames(
+                  "mainBoxL2Row",
+                  v.path === path ? "active" : ""
+                )}
+              >
+                <div className="txt">{v.name}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+        {/* 二级路由页面 */}
+        <div className="mainBoxR">
+          <React.Suspense fallback={<SpinLoding />}>
+            <Switch>
+              {list.map((v: any, i: number) => (
+                <AuthRoute
+                  key={v.id}
+                  exact={i === 0 ? true : false}
+                  path={v.path}
+                  component={v.Com}
+                />
+              ))}
+              <Route path="*" component={NotFound} />
+            </Switch>
+          </React.Suspense>
+        </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;

src/pages/Log/index.module.scss

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

src/pages/Log/index.tsx

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

src/pages/Login/index.module.scss

@@ -0,0 +1,143 @@
+.Login {
+  width: 100%;
+  height: 100%;
+  background-image: url('../../assets/img/bg.jpg');
+  background-size: cover;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, .6);
+  }
+
+  :global {
+    .main {
+      border-radius: 6px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 1266px;
+      height: 694px;
+      background-image: url('../../assets/img/loginMain.jpg');
+      background-size: 100% 100%;
+
+      .mainRight {
+        width: 50%;
+        height: 100%;
+        float: right;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        &>h1 {
+          letter-spacing: 6px;
+          font-size: 40px;
+          font-weight: 600;
+          color: var(--themeColor);
+        }
+
+        .inputBox {
+          width: 100%;
+
+          .inputBoxRow {
+            width: 400px;
+            margin: 50px auto;
+
+            /*修改提示文字的颜色*/
+            input::-webkit-input-placeholder {
+              /* WebKit browsers */
+              color: var(--themeColor);
+            }
+
+            input:-moz-placeholder {
+              /* Mozilla Firefox 4 to 18 */
+              color: var(--themeColor);
+            }
+
+            input::-moz-placeholder {
+              /* Mozilla Firefox 19+ */
+              color: var(--themeColor);
+            }
+
+            input:-ms-input-placeholder {
+              /* Internet Explorer 10+ */
+              color: var(--themeColor);
+            }
+
+            .ant-input-suffix .ant-input-password-icon {
+              font-size: 22px;
+              color: var(--themeColor);
+            }
+          }
+
+          .ant-input-prefix {
+            margin-right: 10px;
+            color: var(--themeColor);
+
+            .anticon {
+              padding-right: 10px;
+              border-right: 1px solid var(--themeColor);
+              width: 36px;
+              height: 36px;
+
+              svg {
+                width: 100%;
+                height: 100%;
+              }
+            }
+          }
+
+          .ant-input {
+            color: var(--themeColor);
+            font-size: 18px;
+            width: 45%;
+            height: 60px;
+            line-height: 60px;
+            background-clip: content-box;
+          }
+
+          input:-webkit-autofill {
+            color: var(--themeColor) !important;
+            -webkit-text-fill-color: var(--themeColor) !important; //文字颜色
+            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%;
+            border-color: var(--themeColor);
+            height: 60px;
+
+            .ant-input {
+              background-color: transparent;
+              width: 100%;
+              height: 60px;
+            }
+          }
+        }
+
+        .loginBtn {
+
+          .ant-btn {
+            font-size: 24px;
+            width: 400px;
+            height: 60px;
+          }
+        }
+      }
+
+    }
+  }
+}

src/pages/Login/index.tsx

@@ -0,0 +1,86 @@
+import styles from "./index.module.scss";
+
+import { Input, Button, message } 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";
+
+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 message.warning("请输入用户名!");
+    else if (passWord === "") return message.warning("请输入密码!");
+    const obj = {
+      userName,
+      passWord: encodeStr(Base64.encode(passWord)),
+    };
+    const res: any = await userLoginAPI(obj);
+    if (res.code === 0) {
+      message.success("登录成功");
+      // 用户信息存到本地
+      setTokenInfo(res.data);
+      history.push("/");
+    }
+  };
+
+  return (
+    <div className={styles.Login}>
+      <div className="main">
+        <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>
+  );
+}

src/pages/Role/index.module.scss

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

src/pages/Role/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;

src/pages/User/index.module.scss

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

src/pages/User/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;

src/pages/Wall/WallAdd/index.css

@@ -0,0 +1,90 @@
+.wallAdd .ant-modal-close {
+  display: none;
+}
+.wallAdd .wallAddMain {
+  border-top: 1px solid #999999;
+  padding-top: 15px;
+  width: 100%;
+}
+.wallAdd .wallAddMain #upInput {
+  display: none;
+}
+.wallAdd .wallAddMain .fileBoxRow_up {
+  cursor: pointer;
+  font-size: 30px;
+  width: 100px;
+  height: 100px;
+  background-color: #fafafa;
+  border: 1px dashed #ccc;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.wallAdd .wallAddMain .fileBoxRow_r_img {
+  width: 120px;
+  height: 120px;
+  position: relative;
+}
+.wallAdd .wallAddMain .fileBoxRow_r_img .clearCover {
+  cursor: pointer;
+  z-index: 10;
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  top: 50%;
+  transform: translateY(-50%);
+  right: -50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+}
+.wallAdd .wallAddMain .fileBoxRow_r_tit {
+  margin-top: 5px;
+  font-size: 14px;
+  color: #7e7c7c;
+}
+.wallAdd .wallAddMain .row {
+  position: relative;
+  margin-bottom: 15px;
+  display: flex;
+}
+.wallAdd .wallAddMain .row .lable {
+  line-height: 30px;
+  width: 54px;
+  text-align: right;
+  font-weight: 700;
+}
+.wallAdd .wallAddMain .row .bs {
+  position: absolute;
+  top: 7px;
+  left: 0px;
+  z-index: 10;
+  color: #ff4d4f;
+}
+.wallAdd .wallAddMain .upBox .upVideoSucc {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin: 10px 30px 10px 0;
+}
+.wallAdd .wallAddMain .upBox .upVideoSucc .upVideoSuccTxt {
+  max-width: 280px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.wallAdd .wallAddMain .upBox .upVideoSucc > div {
+  margin-right: 20px;
+}
+.wallAdd .wallAddMain .upBox .upVideoSucc .lookVideoIncoBox {
+  cursor: pointer;
+  font-size: 20px;
+}
+.wallAdd .wallAddMain .upBox .upVideoSucc .clearCover {
+  cursor: pointer;
+  font-size: 20px;
+}
+.wallAdd .wallAddBtn {
+  text-align: center;
+}

src/pages/Wall/WallAdd/index.less

@@ -0,0 +1,111 @@
+.wallAdd {
+  .ant-modal-close {
+    display: none;
+  }
+
+  .wallAddMain {
+    border-top: 1px solid #999999;
+    padding-top: 15px;
+    width: 100%;
+
+    #upInput {
+      display: none;
+    }
+
+    .fileBoxRow_up {
+      cursor: pointer;
+      font-size: 30px;
+      width: 100px;
+      height: 100px;
+      background-color: #fafafa;
+      border: 1px dashed #ccc;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+
+    }
+
+    .fileBoxRow_r_img {
+      width: 120px;
+      height: 120px;
+      position: relative;
+
+      .clearCover {
+        cursor: pointer;
+        z-index: 10;
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        top: 50%;
+        transform: translateY(-50%);
+        right: -50px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 24px;
+      }
+    }
+
+    .fileBoxRow_r_tit {
+      margin-top: 5px;
+      font-size: 14px;
+      color: rgb(126, 124, 124);
+    }
+
+    .row {
+      position: relative;
+      margin-bottom: 15px;
+      display: flex;
+
+      .lable {
+        line-height: 30px;
+        width: 54px;
+        text-align: right;
+        font-weight: 700;
+      }
+
+      .bs {
+        position: absolute;
+        top: 7px;
+        left: 0px;
+        z-index: 10;
+        color: #ff4d4f;
+      }
+    }
+
+    .upBox {
+      .upVideoSucc {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        margin: 10px 30px 10px 0;
+
+        .upVideoSuccTxt {
+          max-width: 280px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        &>div {
+          margin-right: 20px;
+        }
+
+        .lookVideoIncoBox {
+          cursor: pointer;
+          font-size: 20px;
+        }
+
+        .clearCover {
+          cursor: pointer;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+
+  .wallAddBtn {
+    text-align: center;
+  }
+}

src/pages/Wall/WallAdd/index.tsx

@@ -0,0 +1,313 @@
+import { Button, Input, message, Modal, Popconfirm, Select } from "antd";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+  PlusOutlined,
+  CloseCircleOutlined,
+  UploadOutlined,
+  PlayCircleOutlined,
+} from "@ant-design/icons";
+import "./index.css";
+import ImageLazy from "@/components/ImageLazy";
+import {
+  getWallDetailByIdAPI,
+  wallUploadAPI,
+  wallUpSaveAPI,
+} from "@/store/action/wall";
+import { WallUpSaveAPI } from "@/types";
+import { useDispatch } from "react-redux";
+
+type Props = {
+  id: number;
+  closeFu: () => void;
+  upList: () => void;
+};
+
+// 上传附件的进度条
+const UpAsyncLodingDom: any = document.querySelector("#UpAsyncLoding");
+const progressDom: any = document.querySelector("#progress");
+
+function WallAdd({ id, closeFu, upList }: Props) {
+  const dispatch = useDispatch();
+
+  // 上传的inputRef
+  const myInput = useRef<HTMLInputElement>(null);
+
+  // 类型
+  const [type, setType] = useState<"img" | "video">("img");
+
+  // 名称
+  const [name, setName] = useState("");
+
+  // 图片
+  const [cover, setCover] = useState({ fileName: "", filePath: "" });
+
+  // 视频
+  const [video, setVideo] = useState({ fileName: "", filePath: "" });
+
+  // 通过id获取详情
+  const getInfoById = useCallback(async () => {
+    const res = await getWallDetailByIdAPI(id);
+
+    setType(res.data.type);
+
+    setName(res.data.name);
+
+    if (res.data.type === "img")
+      setCover({ fileName: res.data.fileName, filePath: res.data.filePath });
+    else setVideo({ fileName: res.data.fileName, filePath: res.data.filePath });
+  }, [id]);
+  // 进来看看是不是编辑
+  useEffect(() => {
+    if (id) getInfoById();
+  }, [getInfoById, id]);
+
+  // 上传图片或者视频
+  const handeUpPhoto = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files) {
+        // 拿到files信息
+        const filesInfo = e.target.files[0];
+
+        let typeArr = [] as string[];
+        let tit1 = "";
+        let fileSize = 20 * 1024 * 1024;
+        let tit2 = "最大支持20M!";
+
+        if (type === "img") {
+          typeArr = ["image/jpeg", "image/png", "image/gif"];
+          tit1 = "只支持jpg、png、gif格式!";
+        } else {
+          tit2 = "最大支持500M!";
+          fileSize = 500 * 1024 * 1024;
+          typeArr = ["video/mp4"];
+          tit1 = "只支持mp4格式!";
+        }
+
+        // 校验格式
+        if (!typeArr.includes(filesInfo.type)) {
+          e.target.value = "";
+          return message.warning(tit1);
+        }
+
+        // 校验大小
+        if (filesInfo.size > fileSize) {
+          e.target.value = "";
+          return message.warning(tit2);
+        }
+
+        // 创建FormData对象
+        const fd = new FormData();
+        // 把files添加进FormData对象（‘photo’为后端需要的字段）
+        fd.append("type", type);
+        fd.append("file", filesInfo);
+        e.target.value = "";
+
+        const res: any = await wallUploadAPI(fd);
+        if (res.code === 0) {
+          message.success("上传成功!");
+
+          // 上传的是图片
+          if (type === "img") setCover(res.data);
+          else setVideo(res.data);
+        }
+        UpAsyncLodingDom.style.opacity = 0;
+        progressDom.style.width = "0%";
+      }
+    },
+    [type]
+  );
+
+  // 点击确定
+  const btnOkFu = useCallback(async () => {
+    if (name === "") return message.warning("名称不能为空!");
+
+    if (
+      (type === "img" && cover.fileName === "") ||
+      (type === "video" && video.fileName === "")
+    )
+      return message.warning("附件不能为空!");
+
+    const obj: WallUpSaveAPI = {
+      fileName: type === "img" ? cover.fileName : video.fileName,
+      filePath: type === "img" ? cover.filePath : video.filePath,
+      id: id ? id : null,
+      name: name,
+      type: type,
+    };
+
+    const res: any = await wallUpSaveAPI(obj);
+
+    if (res.code === 0) {
+      message.success(`${id ? "编辑" : "新增"}成功!`);
+
+      upList();
+      closeFu();
+    }
+  }, [
+    closeFu,
+    cover.fileName,
+    cover.filePath,
+    id,
+    name,
+    type,
+    upList,
+    video.fileName,
+    video.filePath,
+  ]);
+
+  return (
+    <Modal
+      wrapClassName="wallAdd"
+      destroyOnClose
+      open={true}
+      title={id ? "编辑" : "新增"}
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      {/* 主要内容 */}
+      <div className="wallAddMain">
+        <div className="row">
+          <div className="bs">*</div>
+          <div className="lable">类型：</div>
+          <Select
+            value={type}
+            onChange={(val) => setType(val)}
+            style={{ width: 100 }}
+            options={[
+              { value: "img", label: "图片" },
+              { value: "video", label: "视频" },
+            ]}
+          />
+        </div>
+
+        <div className="row">
+          <div className="bs">*</div>
+          <div className="lable">名称：</div>
+          <Input
+            maxLength={15}
+            showCount
+            style={{ width: 300 }}
+            placeholder="请输入"
+            value={name}
+            onChange={(e) => setName(e.target.value.trim())}
+          />
+        </div>
+
+        <div className="row">
+          <div className="bs">*</div>
+          <div className="lable">附件：</div>
+
+          <div className="upBox">
+            <input
+              id="upInput"
+              type="file"
+              accept={type === "img" ? ".png,.jpg,.gif,.jpeg" : ".mp4"}
+              ref={myInput}
+              onChange={(e) => handeUpPhoto(e)}
+            />
+            {type === "img" ? (
+              // 图片上传
+              <>
+                <div
+                  hidden={cover.fileName !== ""}
+                  className="fileBoxRow_up"
+                  onClick={() => myInput.current?.click()}
+                >
+                  <PlusOutlined />
+                </div>
+                <div
+                  className="fileBoxRow_r_img"
+                  hidden={cover.fileName === ""}
+                >
+                  {cover.filePath ? (
+                    <ImageLazy width={120} height={120} src={cover.filePath} />
+                  ) : null}
+
+                  <Popconfirm
+                    title="删除后无法恢复，是否删除?"
+                    okText="删除"
+                    cancelText="取消"
+                    onConfirm={() => setCover({ fileName: "", filePath: "" })}
+                  >
+                    <div className="clearCover">
+                      <CloseCircleOutlined />
+                    </div>
+                  </Popconfirm>
+                </div>
+              </>
+            ) : (
+              // 视频上传
+              <>
+                <div className="upVideo">
+                  <Button
+                    onClick={() => myInput.current?.click()}
+                    icon={<UploadOutlined />}
+                  >
+                    上传
+                  </Button>
+                </div>
+                {/* 视频上传成功之后的信息 */}
+                <div className="upVideoSucc">
+                  <div className="upVideoSuccTxt">{video.fileName}</div>
+                  <div
+                    className="lookVideoIncoBox"
+                    hidden={!video.fileName}
+                    onClick={() =>
+                      dispatch({
+                        type: "login/lookVideo",
+                        payload: video.filePath,
+                      })
+                    }
+                  >
+                    <PlayCircleOutlined />
+                  </div>
+                  <Popconfirm
+                    title="删除后无法恢复，是否删除?"
+                    okText="删除"
+                    cancelText="取消"
+                    onConfirm={() => setVideo({ fileName: "", filePath: "" })}
+                  >
+                    <div className="clearCover" hidden={!video.fileName}>
+                      <CloseCircleOutlined />
+                    </div>
+                  </Popconfirm>
+                </div>
+              </>
+            )}
+
+            {/* 图片上传提示 */}
+            <div className="fileBoxRow_r_tit" hidden={type !== "img"}>
+              图片格式：支持png、jpg、gif和jpeg的图片格式；最大支持20M。
+            </div>
+
+            {/* 视频上传提示 */}
+            <div className="fileBoxRow_r_tit" hidden={type !== "video"}>
+              视频格式：仅支持MP4格式的视频文件，大小不得超过500MB。
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 确定按钮 */}
+      <div className="wallAddBtn">
+        <Button type="primary" onClick={btnOkFu}>
+          提交
+        </Button>
+        &emsp;
+        <Popconfirm
+          title="放弃编辑后，信息将不会保存!"
+          okText="放弃"
+          cancelText="取消"
+          onConfirm={closeFu}
+        >
+          <Button>取消</Button>
+        </Popconfirm>
+      </div>
+    </Modal>
+  );
+}
+
+const MemoWallAdd = React.memo(WallAdd);
+
+export default MemoWallAdd;

src/pages/Wall/WallTable/index.module.scss

@@ -0,0 +1,17 @@
+.WallTable{
+  width: 1200px;
+  height: 100%;
+  :global{
+    .title{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 16px;
+      font-weight: 700;
+      width: 100%;
+    }
+    .table{
+      margin-top: 15px;
+    }
+  }
+}

src/pages/Wall/WallTable/index.tsx

@@ -0,0 +1,209 @@
+import ImageLazy from "@/components/ImageLazy";
+import VideoLook from "@/components/VideoLook";
+import { RootState } from "@/store";
+import {
+  awllDisplayAPI,
+  getWallTableListAPI,
+  wallRemoveAPI,
+  wallSortAPI,
+} from "@/store/action/wall";
+import { WallTableList } from "@/types";
+import { Button, message, Popconfirm, Switch, Table } from "antd";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useDispatch, useSelector } from "react-redux";
+import WallAdd from "../WallAdd";
+import styles from "./index.module.scss";
+function WallTable() {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(getWallTableListAPI());
+  }, [dispatch]);
+
+  // 切换表格中的启用停用状态
+  const isEnabledClickFu = useCallback(
+    async (val: boolean, id: number) => {
+      const isDisable = val ? 1 : 0;
+      const res: any = await awllDisplayAPI(id, isDisable);
+      if (res.code === 0) dispatch(getWallTableListAPI());
+    },
+    [dispatch]
+  );
+
+  // 点击删除
+  const delTableFu = useCallback(
+    async (id: number) => {
+      const res: any = await wallRemoveAPI(id);
+      if (res.code === 0) {
+        message.success("删除成功!");
+        dispatch(getWallTableListAPI());
+      }
+    },
+    [dispatch]
+  );
+
+  // 点击上移或者下移
+
+  const srotFu = useCallback(
+    async (id: number, broId: number) => {
+      const res: any = await wallSortAPI(id, broId);
+      if (res.code === 0) {
+        message.success("操作成功!");
+        dispatch(getWallTableListAPI());
+      }
+    },
+    [dispatch]
+  );
+
+  // 点击新增或者编辑
+  const [open, setOpen] = useState(false);
+
+  const editId = useRef(0);
+
+  const editTableFu = useCallback((id: number) => {
+    editId.current = id;
+    setOpen(true);
+  }, []);
+
+  // 从仓库中获取列表数据
+  const results = useSelector((state: RootState) => state.wallReducer.list);
+
+  const columns = useMemo(() => {
+    return [
+      {
+        width: 80,
+        title: "序号",
+        render: (text: any, record: any, index: any) => index + 1,
+      },
+      {
+        width: 100,
+        title: "内容类型",
+        render: (item: WallTableList) =>
+          item.type === "img" ? "图片" : "视频",
+      },
+      {
+        title: "附件名称",
+        dataIndex: "fileName",
+      },
+      {
+        width: 100,
+        title: "附件预览",
+        render: (item: WallTableList) => {
+          if (item.type === "img")
+            return (
+              <div className="tableImgAuto">
+                <ImageLazy width={80} height={80} src={item.filePath} />
+              </div>
+            );
+          else
+            return (
+              <div className="tableImgAuto">
+                <VideoLook width={80} height={80} src={item.filePath} />
+              </div>
+            );
+        },
+      },
+      {
+        title: "名称",
+        dataIndex: "name",
+      },
+      {
+        width: 100,
+        title: "展示状态",
+        render: (item: WallTableList) => (
+          <Switch
+            checkedChildren="启用"
+            unCheckedChildren="停用"
+            checked={item.display === 1}
+            onChange={(val) => isEnabledClickFu(val, item.id)}
+          />
+        ),
+      },
+      {
+        width: 200,
+        title: "操作",
+        render: (item: WallTableList, _: any, index: any) => (
+          <>
+            <Button
+              size="small"
+              type="text"
+              danger
+              disabled={index === 0}
+              onClick={() => srotFu(item.id, results[index - 1].id)}
+            >
+              上移
+            </Button>
+            <Button
+              size="small"
+              type="text"
+              danger
+              disabled={index === results.length - 1}
+              onClick={() => srotFu(item.id, results[index + 1].id)}
+            >
+              下移
+            </Button>
+            <Button
+              size="small"
+              type="text"
+              danger
+              onClick={() => editTableFu(item.id)}
+            >
+              编辑
+            </Button>
+            <Popconfirm
+              title="删除后无法恢复，是否删除?"
+              okText="删除"
+              cancelText="取消"
+              onConfirm={() => delTableFu(item.id)}
+            >
+              <Button size="small" type="text" danger>
+                删除
+              </Button>
+            </Popconfirm>
+          </>
+        ),
+      },
+    ];
+  }, [delTableFu, editTableFu, isEnabledClickFu, results, srotFu]);
+
+  return (
+    <div className={styles.WallTable}>
+      <div className="title">
+        <div className="txt">内容管理</div>
+        <div className="titleButton">
+          <Button type="primary" onClick={() => editTableFu(0)}>
+            新增
+          </Button>
+        </div>
+      </div>
+      <div className="table">
+        <Table
+          size="small"
+          scroll={{ y: 428 }}
+          dataSource={results}
+          columns={columns}
+          rowKey="id"
+          pagination={false}
+        />
+      </div>
+      {/* 点击新增或者编辑 */}
+      {open ? (
+        <WallAdd
+          id={editId.current}
+          closeFu={() => setOpen(false)}
+          upList={() => dispatch(getWallTableListAPI())}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+const MemoWallTable = React.memo(WallTable);
+
+export default MemoWallTable;

src/pages/Wall/index.module.scss

@@ -0,0 +1,60 @@
+.Wall {
+  :global {
+    .wallBox1 {
+      width: 100%;
+      height: 170px;
+      margin: 15px 0;
+      border-radius: 10px;
+      background-color: #fff;
+      padding: 10px 15px 0;
+
+      .wallTit {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 16px;
+        font-weight: 700;
+        width: 400px;
+
+        .wallLeft {
+          display: flex;
+          align-items: center;
+        }
+
+        .hotTitleInco {
+          cursor: pointer;
+          position: relative;
+          z-index: 10;
+          width: 16px;
+          height: 16px;
+          border-radius: 50%;
+          background-color: #696969;
+          margin-left: 8px;
+          text-align: center;
+          line-height: 16px;
+          color: #fff;
+          font-size: 12px;
+
+        }
+      }
+
+      .autoPlay {
+        display: flex;
+        align-items: center;
+        margin-top: 20px;
+
+        .bs {
+          margin: 0 8px;
+        }
+      }
+    }
+
+    .wallBox2 {
+      width: 100%;
+      height: calc(100% - 235px);
+      border-radius: 10px;
+      background-color: #fff;
+      padding: 10px 15px 0;
+    }
+  }
+}

src/pages/Wall/index.tsx

@@ -0,0 +1,196 @@
+import {
+  Button,
+  Radio,
+  Tooltip,
+  DatePicker,
+  Select,
+  message,
+  Popconfirm,
+} from "antd";
+import React, { useCallback, useEffect, useState } from "react";
+import styles from "./index.module.scss";
+import { ExclamationOutlined } from "@ant-design/icons";
+import dayjs from "dayjs";
+import { editWallAutoApi, getWallAutoApi } from "@/store/action/wall";
+import { EditWallAutoApi } from "@/types";
+import WallTable from "./WallTable";
+const { RangePicker } = DatePicker;
+function Wall() {
+  // 获取自动播放信息
+  const getWallAutoApiFu = useCallback(async () => {
+    const res = await getWallAutoApi();
+    setValue0(res.data.isAuto);
+    setTime0(res.data.startTime + "," + res.data.endTime);
+    setMove0(res.data.type);
+  }, []);
+
+  useEffect(() => {
+    getWallAutoApiFu();
+  }, [getWallAutoApiFu]);
+
+  // 关于自动播放的修改
+  const [state, setState] = useState(false);
+  // 自动轮播开启关闭的展示
+  const [value0, setValue0] = useState(-1);
+
+  // 自动轮播开启关闭的修改
+  const [value1, setValue1] = useState(0);
+
+  // 自动轮播时间的展示
+  const [time0, setTime0] = useState(" , ");
+
+  // 自动轮播时间的修改
+  const [time1, setTime1] = useState<string[]>([]);
+
+  // 自动轮播动画的展示
+  const [move0, setMove0] = useState("");
+
+  // 自动轮播动画的修改
+  const [move1, setMove1] = useState("");
+
+  // 点击修改
+  const editAutoPlay = useCallback(() => {
+    setValue1(value0);
+    setTime1(time0.split(","));
+    setMove1(move0);
+    setState(true);
+  }, [move0, time0, value0]);
+
+  // 时间选择器改变
+  const timeChange = (date: any, dateString: any) => {
+    setTime1(dateString);
+  };
+
+  // 自动播放点击取消
+  const btnX = useCallback(() => {
+    setState(false);
+  }, []);
+
+  // 自动播放点击确定
+
+  const btnOk = useCallback(async () => {
+    const obj = {
+      endTime: time1[1],
+      startTime: time1[0],
+      isAuto: value1,
+      type: move1,
+    } as EditWallAutoApi;
+    const res: any = await editWallAutoApi(obj);
+    if (res.code === 0) {
+      message.success("修改成功!");
+      getWallAutoApiFu();
+    }
+    btnX();
+  }, [btnX, getWallAutoApiFu, move1, time1, value1]);
+
+  return (
+    <div className={styles.Wall}>
+      <div className="pageTitlt">万物墙管理</div>
+
+      {/* 第一个盒子 */}
+      <div className="wallBox1">
+        {/* 自动播放 */}
+        <div className="wallTit">
+          <div className="wallLeft">
+            自动播放
+            <div className="hotTitleInco">
+              <Tooltip title="当超过15秒未操作时，将按顺序自动播放下列内容">
+                <div className="hotTitleInco1">
+                  <ExclamationOutlined />
+                </div>
+              </Tooltip>
+            </div>
+          </div>
+
+          <div className="awllTitButton">
+            {state ? (
+              <>
+                <Button type="primary" onClick={btnOk}>
+                  确定
+                </Button>
+                &emsp;
+                <Popconfirm
+                  title="放弃编辑后，信息将不会保存!"
+                  okText="放弃"
+                  cancelText="取消"
+                  onConfirm={btnX}
+                >
+                  <Button>取消</Button>
+                </Popconfirm>
+              </>
+            ) : (
+              <Button type="primary" onClick={editAutoPlay}>
+                修改
+              </Button>
+            )}
+          </div>
+        </div>
+
+        <div className="autoPlay">
+          <div>自动轮播：</div>&emsp;&emsp;
+          {state ? (
+            <>
+              <Radio.Group
+                onChange={(e) => setValue1(e.target.value)}
+                value={value1}
+              >
+                <Radio value={0}>关闭</Radio>
+                <Radio value={1}>开启</Radio>
+              </Radio.Group>
+              &emsp;
+              <RangePicker
+                allowClear={false}
+                defaultValue={[
+                  dayjs(time1[0], "YYYY/MM/DD"),
+                  dayjs(time1[1], "YYYY/MM/DD"),
+                ]}
+                onChange={timeChange}
+              />
+            </>
+          ) : (
+            <>
+              <div>{value0 ? "开启" : "关闭"}</div>
+              <div className="bs"> | </div>
+              <div>
+                {time0.split(",")[0]} 至 {time0.split(",")[1]}
+              </div>
+            </>
+          )}
+        </div>
+
+        <div className="autoPlay">
+          <div>动画设置：</div>&emsp;&emsp;
+          {state ? (
+            <>
+              <Select
+                style={{ width: 150 }}
+                value={move1}
+                onChange={(e) => setMove1(e)}
+                options={[
+                  { value: "随机", label: "随机" },
+                  { value: "飞入", label: "飞入" },
+                  { value: "劈裂", label: "劈裂" },
+                  { value: "百叶窗", label: "百叶窗" },
+                  { value: "落叶式", label: "落叶式" },
+                  { value: "规则图形路径", label: "规则图形路径" },
+                  { value: "圆形展开", label: "圆形展开" },
+                ]}
+              />
+            </>
+          ) : (
+            <div>{move0}</div>
+          )}
+        </div>
+      </div>
+
+      {/* 第二个盒子 */}
+      <div className="wallBox2">
+        <WallTable />
+      </div>
+    </div>
+  );
+}
+
+const MemoWall = React.memo(Wall);
+
+export default MemoWall;

src/store/action/hot.ts

@@ -0,0 +1,8 @@
+import http from "@/utils/http";
+/**
+ * 获取热度统计
+ */
+// export const userLoginAPI = (data: any) => {
+//   return http.post("admin/login", { ...data });
+// };
+

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 });
+  };
+};

src/store/action/wall.ts

@@ -0,0 +1,82 @@
+import { EditWallAutoApi, WallUpSaveAPI } from "@/types";
+import http from "@/utils/http";
+import { AppDispatch } from "..";
+
+/**
+ * 获取万物墙自动播放数据
+ */
+export const getWallAutoApi = () => {
+  return http.get("cms/wall/getInfo");
+};
+
+/**
+ * 修改万物墙自动播放数据
+ */
+export const editWallAutoApi = (data: EditWallAutoApi) => {
+  return http.post("cms/wall/editInfo", data);
+};
+
+/**
+ * 获取列表数据
+ */
+export const getWallTableListAPI = () => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.get("cms/wall/list");
+    dispatch({ type: "wall/getList", payload: res.data });
+  };
+};
+
+/**
+ * 内容-是否显示
+ */
+export const awllDisplayAPI = (id: number, display: number) => {
+  return http.get(`cms/wall/display/${id}/${display}`);
+};
+
+/**
+ * 万物墙上传图片和视频
+ */
+
+// 上传附件的进度条
+const UpAsyncLodingDom: any = document.querySelector("#UpAsyncLoding");
+const progressDom: any = document.querySelector("#progress");
+
+export const wallUploadAPI = (data: any) => {
+  UpAsyncLodingDom.style.opacity = 1;
+
+  return http.post("cms/wall/upload", data, {
+    // 显示进度条
+    onUploadProgress: (e: any) => {
+      const complete = (e.loaded / e.total) * 100 || 0;
+      progressDom.style.width = complete + "%";
+    },
+  });
+};
+
+/**
+ * 内容-新增|编辑
+ */
+export const wallUpSaveAPI = (data: WallUpSaveAPI) => {
+  return http.post("cms/wall/save", data);
+};
+
+/**
+ * 内容-排序
+ */
+export const wallSortAPI = (id1: number, id2: number) => {
+  return http.get(`cms/wall/sort/${id1}/${id2}`);
+};
+
+/**
+ * 内容-删除
+ */
+export const wallRemoveAPI = (id: number) => {
+  return http.get(`cms/wall/remove/${id}`);
+};
+
+/**
+ * 内容-详情
+ */
+export const getWallDetailByIdAPI = (id: number) => {
+  return http.get(`cms/wall/detail/${id}`);
+};

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

src/store/reducer/index.ts

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

src/store/reducer/login.ts

@@ -0,0 +1,51 @@
+import { DictListTypeObj } from "@/types";
+
+// 初始化状态
+const initState = {
+  // 所有图片点击预览查看大图
+  lookBigImg: {
+    url: "",
+    show: false,
+  },
+  // 加载请求的loding
+  asyncLoding: false,
+  // 视频的src
+  videoSrc: "",
+  // 所有的下拉框数据
+  dictList: {
+    age: [],
+    texture: [],
+    level: [],
+    source: [],
+  } as DictListTypeObj,
+};
+
+// 定义 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 };
+
+// 频道 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 };
+    default:
+      return state;
+  }
+}

src/store/reducer/wall.ts

@@ -0,0 +1,21 @@
+import { WallTableList } from "@/types";
+
+// 初始化状态
+const initState = {
+  // 列表数据
+  list: [] as WallTableList[],
+};
+
+// 定义 action 类型
+type WallActionType = { type: "wall/getList"; payload: WallTableList[] };
+
+// 频道 reducer
+export default function wallReducer(state = initState, action: WallActionType) {
+  switch (action.type) {
+    // 获取列表数据
+    case "wall/getList":
+      return { ...state, list: action.payload };
+    default:
+      return state;
+  }
+}

src/types/api/goods.d.ts

@@ -0,0 +1,14 @@
+export type GoodsTableSearch ={
+  name: string;
+  num: string;
+  dictTexture: string;
+  dictAge: string;
+  dictLevel: string;
+  dictSource: string;
+  startTime: string;
+  endTime: string;
+  topic: -1 | 1 | 2;
+  display: -1 | 0 | 1;
+  pageSize: number;
+  pageNum: number;
+}

src/types/api/wall.d.ts

@@ -0,0 +1,28 @@
+export type EditWallAutoApi = {
+  endTime: string;
+  isAuto: number;
+  startTime: string;
+  type: string;
+};
+
+export type WallTableList = {
+  createTime: string;
+  creatorId: number;
+  creatorName: string;
+  display: number;
+  fileName: string;
+  filePath: string;
+  id: number;
+  name: string;
+  sort: number;
+  type: 'img'|'video';
+  updateTime: string;
+};
+
+export type WallUpSaveAPI ={
+  fileName: string;
+  filePath: string;
+  id: number|null;
+  name: string;
+  type: string;
+}

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'

src/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './store/login'
+export * from './api/wall'
+export * from './api/goods'

src/types/store/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;
+}
+

src/utils/history.ts

@@ -0,0 +1,6 @@
+// createBrowserHistory 和 createHashHistory。
+// 这里我们简单说一下 createBrowserHistory地址栏不带#； createHashHistory 带#
+// 根据公司要求自己选择，createBrowserHistory在项目上线的时候需要服务器映射等处理。
+import { createHashHistory  } from 'history'
+const history = createHashHistory()
+export default history

src/utils/http.ts

@@ -0,0 +1,92 @@
+import axios from "axios";
+import history from "./history";
+import { getTokenInfo, removeTokenInfo } from "./storage";
+import { message } from "antd";
+import store from "@/store";
+// 请求基地址
+export const baseURL =
+  // 线下的图片地址需要加上/api/
+  // process.env.NODE_ENV === "development"
+  //   ? "http://192.168.20.55:8038/api/"
+  //   : "";
+  // process.env.NODE_ENV === "development" ? "https://xuzhouwall.4dage.com" : "";
+  process.env.NODE_ENV === "development" ? "http://192.168.20.55:8039" : "";
+
+// 创建 axios 实例
+const http = axios.create({
+  // --------线下的地址不用加/api/
+  // baseURL: baseURL,
+
+  // --------打包或线上环境接口需要加上api/
+  baseURL: baseURL + "/api/",
+  timeout: 30000,
+});
+
+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;
+
+// 上传附件的进度条
+const UpAsyncLodingDom: any = document.querySelector("#UpAsyncLoding");
+const progressDom: any = document.querySelector("#progress");
+
+// 响应拦截器
+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();
+        message.warning("登录失效!");
+        history.push("/login");
+      }, 200);
+    } else if (response.data.code === 0) {
+      // message.success(response.data.msg);
+    } else if (response.data.code === 3014)
+      message.warning("用户名不存在或密码错误，请联系管理员!");
+    else message.warning(response.data.msg);
+    return response.data;
+  },
+  async function (err) {
+    axajInd = 0;
+    store.dispatch({ type: "login/asyncLoding", payload: false });
+
+    // 响应错误也要取消 上传文件的进度条
+    UpAsyncLodingDom.style.opacity = 0;
+    progressDom.style.width = "0%";
+
+    // 如果因为网络原因，response没有，给提示消息
+    if (!err.response) {
+      message.warning("网络繁忙，请稍后重试!");
+    } else {
+      message.warning("错误!");
+    }
+
+    return Promise.reject(err);
+  }
+);
+
+// 导出 axios 实例
+export default http;

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;

src/utils/storage.ts

@@ -0,0 +1,34 @@
+// ------------------------------------token的本地存储------------------------------------
+
+// 用户 Token 的本地缓存键名，自己定义
+const TOKEN_KEY = 'XZWWQ_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)
+}
+

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"
+  ]
+}