重写子系统

文物鉴赏子系统/vueapp/src/components/CollectionSwiper.vue

@@ -1,58 +1,72 @@
 <template>
-  <swiper :modules="modules" :space-between="38" :scrollbar="{ draggable: true }" :freeMode="true" :observer="true"
-    :mousewheel="true" :grid="{
+  <swiper
+    :modules="modules"
+    :space-between="38"
+    :scrollbar="{ draggable: true }"
+    :freeMode="true"
+    :observer="true"
+    :mousewheel="true"
+    :grid="{
       rows: 2,
-    }" :slidesPerView="'auto'" @reachEnd="onReachEnd" @swiper="onSwiper" @slideChange="onSlideChange">
-    <swiper-slide @click="onClickItem(item)" class='slide-item' v-for="item in list" :key="item">
-      <img v-lazy="`${$config.MODELLINKPERFIX}${item.thumb}`" :src="`${$config.MODELLINKPERFIX}${item.thumb}`" alt="">
-      <span :title="item.name" class='i-name van-ellipsis'>{{ item.name }}</span>
+    }"
+    :slidesPerView="'auto'"
+    @reachEnd="onReachEnd"
+    @swiper="onSwiper"
+    @slideChange="onSlideChange"
+  >
+    <swiper-slide
+      @click="onClickItem(item)"
+      class="slide-item"
+      v-for="item in list"
+      :key="item"
+    >
+      <img
+        v-lazy="`${$config.MODELLINKPERFIX}${item.thumb}`"
+        :src="`${$config.MODELLINKPERFIX}${item.thumb}`"
+        alt=""
+      />
+      <span :title="item.name" class="i-name van-ellipsis">{{
+        item.name
+      }}</span>
     </swiper-slide>
   </swiper>
 </template>
 
 <script setup>
-import { Grid, FreeMode, Mousewheel } from 'swiper';
+import { Grid, FreeMode, Mousewheel } from "swiper";
 // Import Swiper Vue.js components
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import { ref } from 'vue';
+import { Swiper, SwiperSlide } from "swiper/vue";
+import { ref } from "vue";
 
 // Import Swiper styles
-import 'swiper/css';
-import 'swiper/css/grid';
-import 'swiper/css/free-mode';
-import 'swiper/css/mousewheel';
+import "swiper/css";
+import "swiper/css/grid";
+import "swiper/css/free-mode";
+import "swiper/css/mousewheel";
 
 import { useRoute, useRouter } from "vue-router";
 
-
-const router = useRouter()
+const router = useRouter();
 
 const props = defineProps({
-  list: Array
-})
-
+  list: Array,
+});
 
-const emit = defineEmits(['reachEnd'])
+const emit = defineEmits(["reachEnd"]);
 
-
-const onSwiper = (swiper) => {
-};
-const onSlideChange = () => {
-};
+const onSwiper = (swiper) => {};
+const onSlideChange = () => {};
 
 const onReachEnd = () => {
-  emit('reachEnd')
-}
-
-const onClickItem = (item)=>{
-  console.log('result:', item);
-  router.push({ name: 'CulturalRelics', params: { id: item.id } })
-
-}
-
+  emit("reachEnd");
+};
 
-const modules = [Grid, FreeMode, Mousewheel]
+const onClickItem = (item) => {
+  console.log("result:", item.id);
+  // router.push({ path: "/cultural-relics", params: { id: item.id } });
+};
 
+const modules = [Grid, FreeMode, Mousewheel];
 </script>
 
 
@@ -64,7 +78,7 @@ const modules = [Grid, FreeMode, Mousewheel]
   width: 100%;
 
   .swiper-wrapper {
-    margin: 0!important;
+    margin: 0 !important;
     .swiper-slide {
       text-align: center;
       font-size: 18px;
@@ -77,9 +91,9 @@ const modules = [Grid, FreeMode, Mousewheel]
       overflow: hidden;
       box-sizing: border-box;
       cursor: pointer;
-      background: linear-gradient(180deg, #75736E 0%, #BCBBB8 100%);
+      background: linear-gradient(180deg, #75736e 0%, #bcbbb8 100%);
 
-      >img {
+      > img {
         width: 100%;
         height: calc(100% - 55px);
         object-fit: cover;
@@ -95,16 +109,17 @@ const modules = [Grid, FreeMode, Mousewheel]
         color: #666666;
         padding: 0 10px;
         box-sizing: border-box;
-        background: #FFFFFF;
+        background: #ffffff;
         font-size: 24px;
         display: inline-block;
       }
     }
   }
-}</style>
+}
+</style>
 
 <style>
-.swiper-wrapper{
-  margin: 0!important;
+.swiper-wrapper {
+  margin: 0 !important;
 }
 </style>

文物鉴赏子系统/vueapp/src/components/Dropdown.vue

@@ -69,6 +69,10 @@ export default {
     selected(newVal){
       console.log('result:', newVal);
       this.$emit('onSelect',newVal)
+    },
+    defaultOption:function(newVal){
+      console.log('newVal',newVal)
+      this.selected = "全部类别"
     }
   },
   mounted() {

文物鉴赏子系统/vueapp/src/components/Search.vue

@@ -5,26 +5,35 @@
       <van-icon name="search" />
     </div>
     <van-button round type="primary" @click="search">查询</van-button>
-    <van-button round type="primary" plain @click="keyword=''">重置</van-button>
+    <van-button
+      round
+      type="primary"
+      plain
+      @click="
+        keyword = '';
+        $emit('chongZhi');
+      "
+      >重置</van-button
+    >
   </div>
 </template>
 
 <script>
-import { ref } from 'vue';
+import { ref } from "vue";
 
 export default {
-  name: 'Search',
+  name: "Search",
   props: {
     placeholder: {
       type: String,
-      default: '请输入关键字',
+      default: "请输入关键字",
     },
   },
   setup(props, { emit }) {
-    const keyword = ref('');
+    const keyword = ref("");
 
     const search = () => {
-      emit('search', keyword.value);
+      emit("search", keyword.value);
     };
 
     return {
@@ -47,26 +56,24 @@ export default {
     height: 40px;
     position: relative;
 
-    input[type='text'] {
+    input[type="text"] {
       border-radius: 4px;
       padding: 0 40px 0 20px;
       width: 100%;
       height: 100%;
-      background: #FFFFFF;
+      background: #ffffff;
       border-radius: 50px;
       border: 1px solid #999999;
       box-sizing: border-box;
     }
 
-    >i {
+    > i {
       position: absolute;
       right: 16px;
       top: 50%;
       transform: translateY(-50%);
     }
   }
-
-
 }
 </style>
 

文物鉴赏子系统/vueapp/src/views/home.vue

@@ -10,7 +10,7 @@
             placeholder="请输入关键词"
           />
           <van-button @click="reset" round size="small" type="default"
-            >搜索</van-button
+            >搜索1</van-button
           >
           <van-button
             @click="keyword = ''"
@@ -18,7 +18,7 @@
             size="small"
             color="#ffffff"
             plain
-            >重置</van-button
+            >重置1</van-button
           >
         </div>
 

文物鉴赏子系统/vueapp/src/views/home_pc.vue

@@ -13,9 +13,9 @@
             }
           "
           :options="menu1.slice(1)"
-          :default-option="menu1[0].text"
+          :default-option="defaop"
         />
-        <Dropdown
+        <!-- <Dropdown
           @onSelect="
             (val) => {
               value2 = val;
@@ -23,7 +23,7 @@
           "
           :options="menu2.slice(1)"
           :default-option="menu2[0].text"
-        />
+        /> -->
         <Dropdown
           @onSelect="
             (val) => {
@@ -31,7 +31,7 @@
             }
           "
           :options="menu3.slice(1)"
-          :default-option="menu3[0].text"
+          default-option="全部年代"
         />
         <div class="cchr">
           <Search
@@ -41,6 +41,7 @@
                 reset();
               }
             "
+            @chongZhi="chongZhi"
           />
         </div>
       </div>
@@ -61,6 +62,8 @@ import CollectionSwiper from "@/components/CollectionSwiper.vue";
 import { ref, shallowReactive, watch, onMounted } from "vue";
 import http from "@/api/index.js";
 
+let count = 1
+
 export default {
   setup() {
     const activelist = ref([]);
@@ -79,6 +82,17 @@ export default {
     const value2 = ref("");
     const value3 = ref("");
 
+    const defaop = ref("全部类别");
+
+    // 点击重置
+    const chongZhi = () => {
+      console.log("pppppppp");
+      defaop.value = count++;
+      value3.value = "";
+      keyword.value = "";
+      reset();
+    };
+
     const menuList = shallowReactive({
       option1: [{ text: "文物类别", value: "" }],
       option2: [{ text: "质地", value: "" }],
@@ -109,10 +123,12 @@ export default {
       pageNum.value = 1;
       list$.value && (list$.value.scrollTop = 0);
       list.value = [];
+      console.log(2222222222);
       getList();
     };
 
     const getList = async () => {
+      console.log("11111111");
       if (finished.value) return;
 
       // let fixSearchType = [value1.value, value2.value, value3.value].filter(Boolean).join(',')
@@ -123,9 +139,9 @@ export default {
           pageSize: pageSize.value,
           searchKey: keyword.value,
           // "searchType": keyword.value ? 'name' : fixSearchType,
-          dictGoodsType: value1.value,
-          dictTexture: value2.value,
-          dictAge: value3.value,
+          dictGoodsType: value1.value.indexOf("全部") > -1 ? "" : value1.value,
+          dictTexture: value2.value.indexOf("全部") > -1 ? "" : value2.value,
+          dictAge: value3.value.indexOf("全部") > -1 ? "" : value3.value,
         })
       ).data.data;
 
@@ -160,6 +176,7 @@ export default {
     );
 
     return {
+      defaop,
       list,
       activelist,
       loading,
@@ -174,6 +191,7 @@ export default {
       menuList,
       getList,
       reset,
+      chongZhi,
     };
   },
 

新建文件夹/.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,61 @@
+{
+  "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.4.2",
+    "axios": "^1.1.3",
+    "gsap": "^3.11.5",
+    "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",
+    "swiper": "^9.1.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,60 @@
+<!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>
+
+<script>
+  // 移动端和pc端的切换
+  if (
+    window.navigator.userAgent.match(
+      /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
+    )
+  ) {
+    // 移动端
+    if (window.location.href.includes("web")) {
+      window.location.href = window.location.href.replace("web", "webM");
+      setTimeout(() => {
+        location.reload(true);
+      }, 200);
+    }
+  }
+</script>
+
+<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>

新建文件夹/public/model.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="./4dage.js"></script>
+  <title>Document</title>
+  <style>
+    html {
+      overflow: hidden;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="ui"></div>
+  <script>
+    let url = getQueryVariable("m");
+    fdage.embed(url, {
+      // fdage.embed('https://hnbwg.4dage.com' + url, {
+      // fdage.embed('http://192.168.20.55:8041/api' + url, {
+      transparentBackground: true,
+      width: 800,
+      height: 600,
+      autoStart: true,
+      fullFrame: true,
+      pagePreset: false
+    });
+  </script>
+</body>
+
+</html>

新建文件夹/src/App.tsx

@@ -0,0 +1,63 @@
+import "@/assets/styles/base.css";
+
+import React from "react";
+import SpinLoding from "./components/SpinLoding";
+import AsyncSpinLoding from "./components/AsyncSpinLoding";
+import { Router, Route, Switch } from "react-router-dom";
+import { Image } from "antd";
+import history from "./utils/history";
+import { useSelector } from "react-redux";
+import store, { RootState } from "./store";
+import MessageCom from "./components/Message";
+
+// 使用 React.lazy 懒加载页面
+const A1Home = React.lazy(() => import("./pages/A1Home"));
+
+const NotFound = React.lazy(() => import("@/components/NotFound"));
+
+function App() {
+  // 从仓库中获取查看图片的信息
+  const lookBigImg = useSelector(
+    (state: RootState) => state.A0layout.lookBigImg
+  );
+  return (
+    <div id="app">
+      {/* 关于路由 */}
+      <Router history={history}>
+        <React.Suspense fallback={<SpinLoding />}>
+          <Switch>
+            {/* 封面页 */}
+            <Route path="/" exact component={A1Home} />
+            {/* 找不到页面 */}
+            <Route path="*" component={NotFound} />
+          </Switch>
+        </React.Suspense>
+      </Router>
+
+      {/* 发送请求的加载组件 */}
+      <AsyncSpinLoding />
+
+      {/* 所有图片点击预览查看大图 */}
+      <Image
+        preview={{
+          visible: lookBigImg.show,
+          src: lookBigImg.url,
+          onVisibleChange: (value) => {
+            // 清除仓库信息
+            store.dispatch({
+              type: "layout/lookBigImg",
+              payload: { url: "", show: false },
+            });
+          },
+        }}
+      />
+
+      {/* antd 轻提示 ---兼容360浏览器 */}
+      <MessageCom />
+    </div>
+  );
+}
+
+const MemoApp = React.memo(App);
+
+export default MemoApp;

新建文件夹/src/assets/styles/base.css

@@ -0,0 +1,126 @@
+* {
+  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;
+  object-fit: cover;
+}
+ul {
+  list-style: none;
+}
+body {
+  overflow: auto;
+  overflow-y: overlay;
+}
+/* 文本域取消下拉 */
+textarea {
+  resize: none !important;
+}
+/* 主题色 */
+:root {
+  --themeColor: #9f1927;
+}
+[hidden] {
+  display: none !important;
+}
+/* 找不到页面 */
+.noFindPage {
+  opacity: 0;
+  transition: opacity 0.5s;
+}
+.noFindPage .noFindBtn {
+  text-align: center;
+}
+/* 兼容360浏览器的下拉框 */
+.ant-select-selector {
+  position: relative;
+  background-color: #ffffff;
+  border: 1px solid #d9d9d9;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+#root {
+  width: 100vw;
+  height: 100vh;
+  min-width: 1600px;
+  min-height: 900px;
+  overflow: auto;
+  overflow-y: overlay;
+}
+#root a {
+  color: var(--themeColor);
+}
+#root #app {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+#root #app > div {
+  width: 100%;
+  height: 100%;
+}
+#root .myscroll::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 3px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+}
+#root .myscroll::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 5px transparent;
+  background: #8a7351;
+}
+#root .myscroll::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px transparent;
+  border-radius: 10px;
+  background: transparent;
+}
+.moveImg {
+  animation: moveRight 3.5s linear;
+}
+@keyframes moveRight {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+    bottom: 0px;
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.5);
+    bottom: 100px;
+  }
+}
+.yunSon2 {
+  animation: moveyun 8s linear infinite alternate;
+}
+@keyframes moveyun {
+  0% {
+    transform: translate(0);
+  }
+  100% {
+    transform: translate(-1600px);
+  }
+}

新建文件夹/src/assets/styles/base.less

@@ -0,0 +1,163 @@
+* {
+  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;
+  object-fit: cover;
+}
+
+ul {
+  list-style: none;
+}
+
+body {
+  overflow: auto;
+  overflow-y: overlay;
+}
+
+/* 文本域取消下拉 */
+textarea {
+  resize: none !important;
+}
+
+/* 主题色 */
+:root {
+  --themeColor: #9f1927;
+}
+
+
+
+[hidden] {
+  display: none !important;
+}
+
+/* 找不到页面 */
+.noFindPage {
+  opacity: 0;
+  transition: opacity .5s;
+
+  .noFindBtn {
+    text-align: center;
+  }
+}
+
+/* 兼容360浏览器的下拉框 */
+.ant-select-selector {
+  position: relative;
+  background-color: #ffffff;
+  border: 1px solid #d9d9d9;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+// 重置antd样式
+#root {
+  width: 100vw;
+  height: 100vh;
+  min-width: 1600px;
+  min-height: 900px;
+  overflow: auto;
+  overflow-y: overlay;
+
+  a {
+    color: var(--themeColor);
+  }
+
+  #app {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    &>div {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .myscroll::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 3px;
+    /*高宽分别对应横竖滚动条的尺寸*/
+    height: 1px;
+  }
+
+  .myscroll::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 5px transparent;
+    background: #8a7351;
+  }
+
+  .myscroll::-webkit-scrollbar-track {
+    /*滚动条里面轨道*/
+    -webkit-box-shadow: inset 0 0 5px transparent;
+    border-radius: 10px;
+    background: transparent;
+  }
+}
+
+
+.moveImg {
+  animation: moveRight 3.5s linear;
+}
+
+
+// 动画帧
+@keyframes moveRight {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+    bottom: 0px;
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(1.5);
+    bottom: 100px;
+  }
+
+}
+
+
+
+.yunSon2 {
+  animation: moveyun 8s linear infinite alternate;
+}
+
+// 动画帧
+@keyframes moveyun {
+  0% {
+    transform: translate(0);
+  }
+
+  100% {
+    transform: translate(-1600px);
+  }
+
+}

新建文件夹/src/components/AsyncSpinLoding/index.module.scss

@@ -0,0 +1,21 @@
+.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%);
+    }
+  }
+}

新建文件夹/src/components/AsyncSpinLoding/index.tsx

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

新建文件夹/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,93 @@
+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 store from "@/store";
+
+type Props = {
+  width?: number | string;
+  height?: number | string;
+  src: string;
+  noLook?: boolean;
+  offline?: boolean;
+};
+
+function ImageLazy({
+  width = 100,
+  height = 100,
+  src,
+  noLook,
+  offline = false,
+}: Props) {
+  // 图片占位符
+  const [placeholderUrl, setPlaceholderUrl] = useState(
+    src ? imgLoding : imgErr
+  );
+
+  // 默认不能预览图片，加载成功之后能预览
+  const [lookImg, setLookImg] = useState(false);
+
+  useEffect(() => {
+    if (src) {
+      // 进页面查看图片的加载情况
+      // 创建一个img标签
+      const imgDom = document.createElement("img");
+      imgDom.src = offline ? src : baseURL + src;
+
+      // 不管图片加载成功或者失败，都删除掉，提高性能
+      // 图片加载成功
+      imgDom.onload = function () {
+        setLookImg(true);
+        imgDom.remove();
+      };
+      // 图片加载失败
+      imgDom.onerror = function () {
+        setPlaceholderUrl(imgErr);
+        imgDom.remove();
+      };
+
+      return () => {
+        // 离开页面也删掉掉元素
+        imgDom.remove();
+      };
+    }
+  }, [offline, src]);
+
+  // 点击预览图片
+  const lookBigImg = useCallback(() => {
+    store.dispatch({
+      type: "layout/lookBigImg",
+      payload: { url: offline ? src : baseURL + src, show: true },
+    });
+  }, [offline, src]);
+
+  return (
+    <div className={styles.ImageLazy} style={{ width: width, height: height }}>
+      <div className="lazyBox">
+        <Lazyimg
+          src={src ? (offline ? 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/Message/index.tsx

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

新建文件夹/src/components/NotFound/index.tsx

@@ -0,0 +1,28 @@
+import history from "@/utils/history";
+import { Button, Result } from "antd";
+import { useEffect, useRef } from "react";
+
+export default function NotFound() {
+  const timeRef = useRef(-1);
+
+  useEffect(() => {
+    timeRef.current = window.setTimeout(() => {
+      const dom: HTMLDivElement = document.querySelector(".noFindPage")!;
+      dom.style.opacity = "1";
+    }, 300);
+    return () => {
+      clearTimeout(timeRef.current);
+    };
+  }, []);
+
+  return (
+    <div className="noFindPage">
+      <Result status="404" title="404" subTitle="页面找不到啦!" />
+      <div className="noFindBtn">
+        <Button type="primary" onClick={() => history.replace("/")}>
+          去首页
+        </Button>
+      </div>
+    </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;
+}