first commit

.editorconfig

@@ -0,0 +1,12 @@
+root = true # 控制配置文件 .editorconfig 是否生效的字段
+ 
+[**] # 匹配全部文件
+indent_style = space # 缩进风格，可选space｜tab
+indent_size = 2 # 缩进的空格数
+charset = utf-8 # 设置字符集
+trim_trailing_whitespace = true # 删除一行中的前后空格
+insert_final_newline = true # 设为true表示使文件以一个空白行结尾
+end_of_line = lf
+ 
+[**.md] # 匹配md文件
+trim_trailing_whitespace = false

.env

@@ -0,0 +1,3 @@
+# .env.production
+GENERATE_SOURCEMAP = false
+# 关闭映射

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

.prettierrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  printWidth: 100, // 一行的字符数，如果超过会进行换行
+  tabWidth: 2, // 一个tab代表几个空格数，默认就是2
+  useTabs: false, // 是否启用tab取代空格符缩进，.editorconfig设置空格缩进，所以设置为false
+  semi: false, // 行尾是否使用分号，默认为true
+  singleQuote: true, // 字符串是否使用单引号
+  trailingComma: "none", // 对象或数组末尾是否添加逗号 none| es5| all
+  jsxSingleQuote: true, // 在jsx里是否使用单引号，你看着办
+  bracketSpacing: true, // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
+  arrowParens: "avoid", // 箭头函数如果只有一个参数则省略括号
+};

.vscode/settings.json

@@ -0,0 +1,39 @@
+{
+  "search.exclude": {
+    "/node_modules": true,
+    "dist": true,
+    "pnpm-lock.sh": true
+  },
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "vscode.json-language-features"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[less]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[scss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "liveServer.settings.port": 5502
+}

README.md

@@ -0,0 +1,10 @@
+1.npm 有问题的话试试用 yarn
+
+2.测试堡垒机存放目录
+/Default/腾讯云/文物专项/腾讯云-文物专项-122.152.225.83/home/data/zhejiang_yiwu_storage_data/backstage
+
+3.蓝湖地址
+https://lanhuapp.com/web/#/item/project/product?tid=de3e5e3e-a489-4b19-862a-7c87ce113467&pid=ca5138d7-3848-429e-a539-ffc35df132ce&image_id=60d85b80-4274-4d06-a976-d2ad13f841ca&docId=60d85b80-4274-4d06-a976-d2ad13f841ca&docType=axure&versionId=305ef5a7-cce2-4b8c-acea-70ed2d684c78&pageId=868d51a177904c178b4c28de9f0c5615&parentId=48d3f365-46a9-4f97-847f-192c66632085&share_type=quickShare 4.测试域名
+https://sit-wenwucms.4dage.com
+接口地址在后面拼接：/api/doc.html#/home
+测试网址在后面拼接：/backstage

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,78 @@
+{
+  "name": "demo2",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@ant-design/cssinjs": "^1.5.6",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.3",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "antd": "^5.8.3",
+    "antd-mobile": "^5.30.0",
+    "axios": "^1.1.3",
+    "braft-editor": "^2.3.9",
+    "braft-utils": "^3.0.12",
+    "dayjs": "^1.11.10",
+    "dingtalk-jsapi": "^3.1.0",
+    "docxtemplater": "^3.61.1",
+    "docxtemplater-image-module-free": "^1.1.1",
+    "echarts": "^5.6.0",
+    "exceljs": "^4.4.0",
+    "file-saver": "^2.0.5",
+    "gdt-jsapi": "^1.9.51",
+    "js-base64": "^3.7.3",
+    "js-export-excel": "^1.1.4",
+    "jszip-utils": "^0.1.0",
+    "lodash": "^4.17.21",
+    "pizzip": "^3.1.8",
+    "query-string": "^9.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.0.4",
+    "react-router-dom": "5.3",
+    "react-scripts": "5.0.1",
+    "react-sortablejs": "^6.1.4",
+    "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/lodash": "^4.17.16",
+    "@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,20 @@
+<!doctype html>
+<html lang="zh">
+  <head>
+    <meta charset="utf-8" />
+    <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" />
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
+
+    <title>此物-文物AI识别比对系统</title>
+    <script>
+      const baseUrlTempOne = 'https://sit-ciwu.4dage.com'
+    </script>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

src/App.tsx

@@ -0,0 +1,152 @@
+import '@/assets/styles/base.css'
+// 关于路由
+import React, { useCallback, useEffect, useRef } 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 { useSelector } from 'react-redux'
+import store, { RootState } from './store'
+import UpAsyncLoding from './components/UpAsyncLoding'
+import MessageCom from './components/Message'
+import LookDom from './components/LookDom'
+
+import '@/assets/styles/app.css'
+
+const Layout = React.lazy(() => import('./pages/Layout'))
+const Login = React.lazy(() => import('./pages/Login'))
+
+let tempW = document.documentElement.clientWidth
+
+let tempH = document.documentElement.clientHeight
+
+let tempMax = tempW >= tempH ? tempW : tempH
+let tempMin = tempW >= tempH ? tempH : tempW
+
+const pageBi = Math.round(Number((tempMax / tempMin).toFixed(2)))
+
+// 设计图按照 1920 X 960 来开发
+const planSize = {
+  width: 1920,
+  height: Math.round(Number((1920 / pageBi).toFixed(0)))
+}
+
+export default function App() {
+  const rootRef = useRef<any>(null)
+
+  const timeRef = useRef(0)
+
+  const pageFullChangeFu = useCallback((num: number = 200) => {
+    clearTimeout(timeRef.current)
+    timeRef.current = window.setTimeout(() => {
+      // console.log(
+      //   '--------',
+      //   document.documentElement.clientWidth,
+      //   document.documentElement.clientHeight,
+      //   window.innerWidth,
+      //   window.innerHeight
+      // )
+
+      let width = window.visualViewport
+        ? window.visualViewport.width
+        : document.documentElement.clientWidth
+      let height = window.visualViewport
+        ? window.visualViewport.height
+        : document.documentElement.clientHeight
+
+      if (width >= height) {
+        document.querySelector('body')!.style.overflow = 'hidden'
+
+        // if (tempMax - width > 100) return
+
+        const sizeW = width / planSize.width
+        let sizeH = height / planSize.height
+
+        let moveX = (planSize.width - width) / 2
+        let moveY = (planSize.height - height) / 2
+
+        if (width >= planSize.width) moveX = 0
+        rootRef.current.style.left = '0'
+        rootRef.current.style.transform = `translate3d(${-moveX}px,${-moveY}px,0px) scale(${sizeW},${sizeH}) rotate(0deg)`
+        rootRef.current.style.transformOrigin = 'center'
+      } else {
+        document.querySelector('body')!.style.overflow = 'auto'
+        rootRef.current.style.transform = 'none'
+        // if (tempMax - height > 100) return
+        // 竖屏
+        // isHHTemp = false
+        // const temp = width
+        // width = height
+        // height = temp
+        // const sizeW = width / planSize.width
+        // let sizeH = height / planSize.height
+        // rootRef.current.style.left = '100%'
+        // rootRef.current.style.transform = `rotate(90deg) scale(${sizeW},${sizeH})`
+        // rootRef.current.style.transformOrigin = 'left top'
+        // console.log('-------', isHHTemp)
+      }
+    }, num)
+  }, [])
+
+  useEffect(() => {
+    rootRef.current = document.querySelector('#root')
+    rootRef.current.style.width = planSize.width + 'px'
+    rootRef.current.style.height = planSize.height + 'px'
+
+    pageFullChangeFu(0)
+    window.addEventListener('resize', () => pageFullChangeFu(), false)
+  }, [pageFullChangeFu])
+
+  // 从仓库中获取查看图片的信息
+  const { lookBigImg } = useSelector((state: RootState) => state.A0Layout)
+
+  return (
+    <>
+      {/* 关于路由 */}
+      <Router history={history}>
+        <React.Suspense fallback={<SpinLoding />}>
+          <Switch>
+            <Route path='/login' component={Login} />
+            {/*  打印页面 */}
+            {/* <Route
+              path='/logPage/:key'
+              component={React.lazy(() => import('./pages/W_log/index'))}
+            /> */}
+            <AuthRoute path='/' component={Layout} />
+          </Switch>
+        </React.Suspense>
+      </Router>
+
+      {/* 发送请求的加载组件 */}
+      <AsyncSpinLoding />
+
+      {/* 所有图片点击预览查看大图 */}
+      {lookBigImg.show ? (
+        <Image
+          preview={{
+            visible: lookBigImg.show,
+            src: lookBigImg.url,
+            onVisibleChange: value => {
+              // 清除仓库信息
+              store.dispatch({
+                type: 'layout/lookBigImg',
+                payload: { url: '', show: false }
+              })
+            }
+          }}
+        />
+      ) : null}
+
+      {/* 上传附件的进度条元素 */}
+      <UpAsyncLoding />
+
+      {/* 查看视频音频 */}
+      <LookDom />
+
+      {/* antd 轻提示 ---兼容360浏览器 */}
+      <MessageCom />
+    </>
+  )
+}

src/assets/styles/app.css

@@ -0,0 +1,14 @@
+.ant-table-body {
+  background-color: #fcf9f5 !important;
+}
+/* antd表格居中 */
+.ant-table-cell {
+  text-align: center !important;
+}
+.ant-table-header .ant-table-cell {
+  color: var(--themeColor) !important;
+  background-color: #fff !important;
+}
+.ant-table-body .ant-table-cell {
+  border-color: #ccc !important;
+}

src/assets/styles/app.less

@@ -0,0 +1,21 @@
+// --------关于表格
+.ant-table-body {
+  background-color: #fcf9f5 !important;
+}
+/* antd表格居中 */
+.ant-table-cell {
+  text-align: center !important;
+}
+
+.ant-table-header {
+  .ant-table-cell {
+    color: var(--themeColor) !important;
+    background-color: #fff !important;
+  }
+}
+
+.ant-table-body {
+  .ant-table-cell {
+    border-color: #ccc !important;
+  }
+}

src/assets/styles/base.css

@@ -0,0 +1,428 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+html {
+  height: 100%;
+  font-size: 14px;
+  overflow: hidden;
+}
+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: black;
+  overflow: hidden;
+}
+i {
+  font-style: normal;
+}
+img {
+  max-width: 100%;
+  max-height: 100%;
+  vertical-align: middle;
+}
+ul {
+  list-style: none;
+}
+/* 文本域取消下拉 */
+textarea {
+  resize: none !important;
+  min-height: 100px !important;
+}
+/* 主题色 */
+:root {
+  --themeColor: #b49065;
+  --themeColor2: #d3b453;
+}
+/* 找不到页面 */
+.noFindPage {
+  opacity: 0;
+  transition: opacity 0.5s;
+  background-color: #fff;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  color: #666666;
+  font-size: 16px;
+  padding-bottom: 20px;
+}
+.noFindPage > p {
+  margin-bottom: 10px;
+}
+.noFindPage > div {
+  width: 80%;
+  margin-top: 8%;
+  display: flex;
+  justify-content: space-around;
+}
+/* 兼容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);
+}
+.ant-popconfirm {
+  width: 240px;
+}
+#root {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+  /* 普通文字按钮的颜色 */
+  /* 按钮的危险颜色 */
+  /* antd分页器样式 */
+  /* 表格的图片居中 */
+  /* antd图片预览组件 */
+  /* antd表格居中 */
+}
+#root a {
+  text-decoration: none;
+  color: black;
+  outline: none;
+}
+#root .iconHoverTit {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+#root .iconHoverTitTxt {
+  background-color: var(--themeColor);
+  color: #fff;
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  text-align: center;
+  font-size: 12px;
+  border-radius: 50%;
+}
+#root .ant-btn-text {
+  color: var(--themeColor);
+}
+#root .ant-btn-text:disabled {
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.25);
+}
+#root .ant-btn-text.ant-btn-dangerous {
+  color: #ff4d4d;
+}
+#root .tableImgAuto {
+  display: flex;
+  justify-content: center;
+}
+#root .tableImgAuto .TvideoBox {
+  cursor: pointer;
+  width: 60px;
+  height: 60px;
+  position: relative;
+}
+#root .tableImgAuto .TvideoBox .TvideoBoxLook {
+  position: absolute;
+  z-index: 10;
+  opacity: 0;
+  transition: opacity 0.3s;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+#root .tableImgAuto .TvideoBox .TvideoBoxLook .anticon-eye {
+  font-size: 18px;
+}
+#root .tableImgAuto .TvideoBox video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+#root .tableImgAuto .TvideoBox:hover .TvideoBoxLook {
+  opacity: 1;
+}
+#root .ant-image {
+  display: none;
+}
+#root .ant-table-cell {
+  text-align: center !important;
+}
+#root #A2Table3 .ant-table-row-expand-icon {
+  background-color: var(--themeColor);
+  color: #fff;
+}
+#root #A2Table3 .ant-table-cell-with-append {
+  display: flex;
+  justify-content: flex-start;
+}
+[hidden] {
+  display: none !important;
+}
+#upInput {
+  display: none;
+}
+#upInput2 {
+  display: none;
+}
+#upInputAudio {
+  display: none;
+}
+.pageTitle {
+  font-size: 18px;
+  font-weight: 700;
+  position: absolute;
+  z-index: 11;
+  top: -56px;
+  left: -18px;
+  padding-left: 40px;
+}
+.pageTitle::before {
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  content: '';
+  width: 6px;
+  height: 20px;
+  background-color: var(--themeColor);
+}
+.mySorrl::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 5px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+}
+.mySorrl::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 5px transparent;
+  background: var(--themeColor);
+}
+.mySorrl::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px transparent;
+  border-radius: 10px;
+  background: transparent;
+}
+.ant-image-preview-operations {
+  background-color: rgba(0, 0, 0, 0.8) !important;
+}
+.ant-image-preview-mask {
+  z-index: 10000 !important;
+}
+.ant-image-preview-wrap {
+  z-index: 10001 !important;
+}
+.ant-image-preview-operations-wrapper {
+  z-index: 10002 !important;
+}
+.Y2xia {
+  display: block;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+.D1GtNum {
+  cursor: pointer;
+  text-decoration: underline;
+}
+.D1GtNumAc {
+  color: var(--themeColor);
+}
+.Y1info {
+  width: 100%;
+  margin-top: 5px;
+  height: calc(100% - 35px);
+  font-size: 16px;
+  padding: 15px;
+  overflow-y: auto;
+}
+.Y1info .Y1tit {
+  font-size: 18px;
+  padding-left: 15px;
+  font-weight: 700;
+  position: relative;
+  margin-bottom: 15px;
+  color: var(--themeColor);
+}
+.Y1info .Y1tit::before {
+  position: absolute;
+  left: 0px;
+  top: 50%;
+  transform: translateY(-50%);
+  content: '';
+  width: 6px;
+  height: 18px;
+  background-color: var(--themeColor);
+}
+.Y1info .Y1row {
+  width: 100%;
+  display: flex;
+  margin-bottom: 10px;
+}
+.Y1info .Y1row .Y1rowll {
+  width: 120px;
+  text-align: right;
+  font-weight: 700;
+}
+.Y1info .Y1row .Y1rowrr {
+  width: calc(100% - 120px);
+  word-wrap: break-word;
+  max-height: 130px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+}
+.Y1info .Y1rowZ .Y1z1 {
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: space-between;
+}
+.Y1info .Y1rowZ .Y1z1 .Y1rowZll {
+  width: 48%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.Y1info .Y1rowZ .Y1z1 .Y1rowZrr {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 48%;
+}
+.Y1info .Y1rowZ .Y1z1 .Y1rowZrr .Y1rowZrrModel {
+  margin-left: 20px;
+  height: 200px;
+  overflow-y: auto;
+  width: calc(100% - 220px);
+  display: flex;
+  align-items: center;
+  color: var(--themeColor);
+}
+.Y1info .Y1rowZ .Y1z1 .Y1rowZrr .Y1rowZrrModel .Y1rowZrrModelBox {
+  width: 100%;
+  max-height: 100%;
+}
+.Y1info .Y1rowZ .Y1z1 .Y1rowZrr .Y1rowZrrModel .Y1rowZrrModelBox > h3 {
+  margin-bottom: 10px;
+}
+.Y1info .Y1rowZ .Y1z1 .Y1rowZrr .Y1rowZrrModel .Y1rowZrrModelBox > div {
+  margin: 4px 0;
+  cursor: pointer;
+  transition: all 0.3s;
+  word-wrap: break-word;
+}
+.Y1info .Y1rowZ .Y1z1 .Y1rowZrr .Y1rowZrrModel .Y1rowZrrModelBox > div:hover {
+  text-shadow: 1px 1px 1px #ccc;
+}
+.Y1info .Y1rowZ .Y1z2 {
+  margin-bottom: 20px;
+}
+.Y1info .Y1rowZ .Y1z2 .y1z2_1 {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: 100%;
+}
+.Y1info .Y1rowZ .Y1z2 .y1z2_1 .y1z2_1row1 {
+  margin-bottom: 10px;
+  width: 48%;
+  display: flex;
+}
+.Y1info .Y1rowZ .Y1z2 .y1z2_1 .y1z2_1row1 .y1z2_1r11 {
+  width: 130px;
+  text-align: right;
+  font-weight: 700;
+}
+.Y1info .Y1rowZ .Y1z2 .y1z2_1 .y1z2_1row1 .y1z2_1r12 {
+  width: calc(100% - 130px);
+  word-wrap: break-word;
+  max-height: 130px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+}
+.Y1info .Y1rowZ .Y1z2 .y1z2_1 .y1z2_1row1Full {
+  width: 100%;
+}
+.Y1info .Y1rowZ .Y1z2 .y1z2_1 .y1z2_1row1Full .y1z2_1r12 {
+  max-height: 1000px;
+}
+.Y1info .Y22com .Y22sta {
+  font-weight: 700;
+  font-size: 18px;
+  margin-bottom: 20px;
+}
+.Y1info .Y22com .Y22No {
+  font-size: 16px;
+  letter-spacing: 4px;
+  height: 200px;
+  display: flex;
+  align-items: center;
+}
+.Y1info .Y22com .Y22Info {
+  width: 800px;
+  border: 1px solid #ccc;
+  border-bottom: none;
+}
+.Y1info .Y22com .Y22Info .Y22row {
+  display: flex;
+}
+.Y1info .Y22com .Y22Info .Y22row > div {
+  width: 200px;
+  text-align: center;
+  padding: 8px 4px;
+  border-bottom: 1px solid #ccc;
+}
+.Y1info .Y22com .Y22Info .Y22row > div:nth-of-type(1) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.Y1info .Y22com .Y22Info .Y22row > div:nth-of-type(2) {
+  width: 600px;
+}
+.Y1info .Y22com .Y22Info .Y22row1 {
+  background-color: #eaeaea;
+}
+.Y1info .Y22com .Y22Info .Y22rowNo {
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  border-bottom: 1px solid #ccc;
+}
+.Y1info .Y33com .Y33top {
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: space-around;
+}
+.Y1info .Y33com .Y33top .ant-btn {
+  margin-right: 15px;
+}
+.Y1info .Y33com .Y33no {
+  font-size: 16px;
+  letter-spacing: 4px;
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.C22revampBox {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  padding: 30px;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+.C22revampBox > div {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}

src/assets/styles/base.less

@@ -0,0 +1,597 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  height: 100%;
+  font-size: 14px;
+  overflow: hidden;
+  // 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: black;
+  overflow: hidden;
+}
+
+i {
+  font-style: normal;
+}
+
+img {
+  max-width: 100%;
+  max-height: 100%;
+  vertical-align: middle;
+  // object-fit: cover;
+}
+
+ul {
+  list-style: none;
+}
+
+/* 文本域取消下拉 */
+textarea {
+  resize: none !important;
+  min-height: 100px !important;
+}
+
+/* 主题色 */
+:root {
+  --themeColor: #b49065;
+  --themeColor2: #d3b453;
+}
+
+/* 找不到页面 */
+.noFindPage {
+  opacity: 0;
+  transition: opacity 0.5s;
+  background-color: #fff;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  color: #666666;
+  font-size: 16px;
+  padding-bottom: 20px;
+
+  & > p {
+    margin-bottom: 10px;
+  }
+  & > div {
+    width: 80%;
+    margin-top: 8%;
+    display: flex;
+    justify-content: space-around;
+  }
+}
+
+/* 兼容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);
+}
+
+// 气泡框闪烁问题
+.ant-popconfirm {
+  width: 240px;
+}
+
+// 重置antd样式
+#root {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+  // min-width: 1600px;
+  // min-height: 900px;
+  // overflow: auto;
+  // overflow-y: overlay;
+
+  a {
+    text-decoration: none;
+    color: black;
+    outline: none;
+  }
+
+  // ？的提示
+  .iconHoverTit {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .iconHoverTitTxt {
+    background-color: var(--themeColor);
+    color: #fff;
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    text-align: center;
+    font-size: 12px;
+    border-radius: 50%;
+  }
+
+  // a {
+  //   color: var(--themeColor);
+  // }
+
+  /* 普通文字按钮的颜色 */
+  .ant-btn-text {
+    color: var(--themeColor);
+  }
+
+  .ant-btn-text:disabled {
+    cursor: not-allowed;
+    color: rgba(0, 0, 0, 0.25);
+  }
+
+  /* 按钮的危险颜色 */
+  .ant-btn-text.ant-btn-dangerous {
+    color: #ff4d4d;
+  }
+
+  /* antd分页器样式 */
+  // .ant-pagination .ant-pagination-item {
+  //   border-radius: 50%;
+  //   border: 1px solid #999;
+  //   background-color: transparent !important;
+  // }
+
+  // .ant-pagination .ant-pagination-item-active {
+  //   background-color: var(--themeColor) !important;
+  // }
+
+  // .ant-pagination .ant-pagination-item-active a {
+  //   color: #fff !important;
+  // }
+
+  // .ant-pagination .ant-pagination-item:hover {
+  //   background-color: var(--themeColor) !important;
+  // }
+
+  // .ant-pagination .ant-pagination-item:hover a {
+  //   color: #fff !important;
+  // }
+
+  // .ant-pagination-prev {
+  //   border-radius: 50% !important;
+  //   border: 1px solid #999;
+  // }
+
+  // .ant-pagination-prev:hover {
+  //   background-color: var(--themeColor);
+  // }
+
+  // .ant-pagination-prev:hover button {
+  //   color: #fff;
+  // }
+
+  // .ant-pagination-next {
+  //   border-radius: 50% !important;
+  //   border: 1px solid #999;
+  // }
+
+  // .ant-pagination-next:hover {
+  //   background-color: var(--themeColor);
+  // }
+
+  // .ant-pagination-next:hover button {
+  //   color: #fff;
+  // }
+
+  // .ant-pagination-disabled {
+  //   border: 1px solid #ccc;
+  // }
+
+  // .ant-pagination-disabled:hover {
+  //   background-color: transparent;
+  // }
+
+  /* 表格的图片居中 */
+  .tableImgAuto {
+    display: flex;
+    justify-content: center;
+    .TvideoBox {
+      cursor: pointer;
+      width: 60px;
+      height: 60px;
+      position: relative;
+      .TvideoBoxLook {
+        position: absolute;
+        z-index: 10;
+        opacity: 0;
+        transition: opacity 0.3s;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 14px;
+        color: #fff;
+        background-color: rgba(0, 0, 0, 0.6);
+        .anticon-eye {
+          font-size: 18px;
+        }
+      }
+      video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      &:hover {
+        .TvideoBoxLook {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  /* antd图片预览组件 */
+  .ant-image {
+    display: none;
+  }
+
+  /* antd表格居中 */
+
+  .ant-table-cell {
+    text-align: center !important;
+  }
+
+  // 树型 表格 定制化
+  #A2Table3 {
+    .ant-table-row-expand-icon {
+      background-color: var(--themeColor);
+      color: #fff;
+    }
+
+    .ant-table-cell-with-append {
+      display: flex;
+      justify-content: flex-start;
+    }
+  }
+}
+
+[hidden] {
+  display: none !important;
+}
+
+#upInput {
+  display: none;
+}
+
+#upInput2 {
+  display: none;
+}
+
+#upInputAudio {
+  display: none;
+}
+
+// 页面标题
+.pageTitle {
+  font-size: 18px;
+  font-weight: 700;
+  position: absolute;
+  z-index: 11;
+  top: -56px;
+  left: -18px;
+  padding-left: 40px;
+
+  &::before {
+    position: absolute;
+    left: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+    content: '';
+    width: 6px;
+    height: 20px;
+    background-color: var(--themeColor);
+  }
+}
+
+// 滚动条
+.mySorrl::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 5px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+}
+
+.mySorrl::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 5px transparent;
+  background: var(--themeColor);
+}
+
+.mySorrl::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px transparent;
+  border-radius: 10px;
+  background: transparent;
+}
+.ant-image-preview-operations {
+  background-color: rgba(0, 0, 0, 0.8) !important;
+}
+.ant-image-preview-mask {
+  z-index: 10000 !important;
+}
+.ant-image-preview-wrap {
+  z-index: 10001 !important;
+}
+.ant-image-preview-operations-wrapper {
+  z-index: 10002 !important;
+}
+
+// .ant-notification-notice {
+//   max-height: 500px !important;
+//   overflow-y: auto !important;
+// }
+
+// 热点页面打开透明的变化
+// #Y1cathet {
+//   animation: Y1cathet 0.5s linear forwards;
+// }
+// @keyframes Y1cathet {
+//   0% {
+//     right: -700px;
+//   }
+
+//   100% {
+//     right: 0;
+//   }
+// }
+
+.Y2xia {
+  display: block;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
+// 打开侧边栏高亮
+.D1GtNum {
+  cursor: pointer;
+  text-decoration: underline;
+  // &:hover {
+  //   color: var(--themeColor);
+  // }
+}
+
+.D1GtNumAc {
+  color: var(--themeColor);
+}
+
+// 侧边栏藏品详情
+.Y1info {
+  width: 100%;
+  margin-top: 5px;
+  height: calc(100% - 35px);
+  font-size: 16px;
+  padding: 15px;
+  overflow-y: auto;
+  .Y1tit {
+    font-size: 18px;
+    padding-left: 15px;
+    font-weight: 700;
+    position: relative;
+    margin-bottom: 15px;
+    color: var(--themeColor);
+    &::before {
+      position: absolute;
+      left: 0px;
+      top: 50%;
+      transform: translateY(-50%);
+      content: '';
+      width: 6px;
+      height: 18px;
+      background-color: var(--themeColor);
+    }
+  }
+
+  .Y1row {
+    width: 100%;
+    display: flex;
+    margin-bottom: 10px;
+    .Y1rowll {
+      width: 120px;
+      text-align: right;
+      font-weight: 700;
+    }
+    .Y1rowrr {
+      width: calc(100% - 120px);
+      word-wrap: break-word;
+      max-height: 130px;
+      overflow-y: auto;
+      white-space: pre-wrap;
+    }
+  }
+
+  // ------------------------档案信息
+  .Y1rowZ {
+    .Y1z1 {
+      margin-bottom: 20px;
+      display: flex;
+      justify-content: space-between;
+      .Y1rowZll {
+        width: 48%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+      .Y1rowZrr {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 48%;
+        .Y1rowZrrModel {
+          margin-left: 20px;
+          height: 200px;
+          overflow-y: auto;
+          width: calc(100% - 220px);
+          display: flex;
+          align-items: center;
+          color: var(--themeColor);
+          .Y1rowZrrModelBox {
+            width: 100%;
+            max-height: 100%;
+            & > h3 {
+              // text-align: center;
+              margin-bottom: 10px;
+            }
+            & > div {
+              margin: 4px 0;
+              cursor: pointer;
+              transition: all 0.3s;
+              word-wrap: break-word;
+              &:hover {
+                text-shadow: 1px 1px 1px #ccc;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .Y1z2 {
+      margin-bottom: 20px;
+      .y1z2_1 {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        width: 100%;
+        .y1z2_1row1 {
+          margin-bottom: 10px;
+          width: 48%;
+          display: flex;
+          .y1z2_1r11 {
+            width: 130px;
+            text-align: right;
+            font-weight: 700;
+          }
+          // .y1z2_1r11long {
+          //   width: 132px;
+          //   position: relative;
+          //   left: -6px;
+          // }
+          .y1z2_1r12 {
+            width: calc(100% - 130px);
+            word-wrap: break-word;
+            max-height: 130px;
+            overflow-y: auto;
+            white-space: pre-wrap;
+          }
+        }
+        .y1z2_1row1Full {
+          width: 100%;
+          .y1z2_1r12 {
+            max-height: 1000px;
+          }
+        }
+      }
+    }
+  }
+
+  // ------------------------库存信息
+  .Y22com {
+    .Y22sta {
+      font-weight: 700;
+      font-size: 18px;
+      margin-bottom: 20px;
+    }
+    .Y22No {
+      font-size: 16px;
+      letter-spacing: 4px;
+      height: 200px;
+      display: flex;
+      align-items: center;
+    }
+    .Y22Info {
+      width: 800px;
+      border: 1px solid #ccc;
+      border-bottom: none;
+      .Y22row {
+        display: flex;
+        // align-items: center;
+        & > div {
+          width: 200px;
+          text-align: center;
+          padding: 8px 4px;
+          border-bottom: 1px solid #ccc;
+          &:nth-of-type(1) {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+          &:nth-of-type(2) {
+            width: 600px;
+          }
+        }
+      }
+      .Y22row1 {
+        background-color: #eaeaea;
+      }
+      .Y22rowNo {
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        border-bottom: 1px solid #ccc;
+      }
+    }
+  }
+
+  // ------------------------藏品附件
+  .Y33com {
+    .Y33top {
+      margin-bottom: 20px;
+      display: flex;
+      justify-content: space-around;
+      .ant-btn {
+        margin-right: 15px;
+      }
+    }
+    .Y33no {
+      font-size: 16px;
+      letter-spacing: 4px;
+      height: 200px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+
+// 点击藏品编辑
+.C22revampBox {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  padding: 30px;
+  background-color: rgba(0, 0, 0, 0.6);
+  & > div {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+}

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/AuthRoute/index.tsx

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

src/components/ImageLazy/index.module.scss

@@ -0,0 +1,51 @@
+.ImageLazy {
+  position: relative;
+
+  :global {
+    .lazyBox {
+      width: 100%;
+      height: 100%;
+      position: relative;
+
+      .adm-image {
+        width: 100%;
+        height: 100%;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .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,63 @@
+import React, { useCallback, useState } from 'react'
+import styles from './index.module.scss'
+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'
+import { Image } from 'antd-mobile'
+
+type Props = {
+  width?: number | string
+  height?: number | string
+  src: string
+  srcBig?: string
+  noLook?: boolean
+  offline?: boolean
+}
+
+function ImageLazy({ width = 100, height = 100, src, srcBig, noLook, offline = false }: Props) {
+  // 默认不能预览图片，加载成功之后能预览
+  const [lookImg, setLookImg] = useState(false)
+
+  // 图片加载完成
+  const onLoad = useCallback(() => {
+    setLookImg(true)
+  }, [])
+
+  // 点击预览图片
+  const lookBigImg = useCallback(() => {
+    store.dispatch({
+      type: 'layout/lookBigImg',
+      payload: { url: offline ? src : srcBig ? baseURL + srcBig : baseURL + src, show: true }
+    })
+  }, [offline, src, srcBig])
+
+  return (
+    <div className={styles.ImageLazy} style={{ width: width, height: height }} id='ImageLazy'>
+      <div className='lazyBox'>
+        <Image
+          lazy
+          onLoad={onLoad}
+          src={src ? (offline ? src : baseURL + src) : ''}
+          placeholder={<img src={imgLoding} alt='' />}
+          fallback={<img src={imgErr} alt='' />}
+          fit='cover'
+        />
+
+        {/* 图片预览 */}
+        {noLook || !lookImg ? null : (
+          <div className='lookImg' onClick={lookBigImg}>
+            <EyeOutlined rev={undefined} />
+            &nbsp;
+            <div>预览</div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+const MemoImageLazy = React.memo(ImageLazy)
+
+export default MemoImageLazy

src/components/LookDom/index.module.scss

@@ -0,0 +1,98 @@
+.LookDom {
+  transition: opacity 0.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, 0.6);
+
+  :global {
+    .close {
+      color: #fff;
+      position: absolute;
+      right: 70px;
+      top: 70px;
+      font-size: 30px;
+      cursor: pointer;
+      z-index: 10;
+    }
+    .closeModel {
+      right: aoto;
+      left: 40px;
+      top: 40px;
+      img {
+        width: 50px;
+      }
+    }
+
+    .viedoBox {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 800px;
+      height: 500px;
+
+      video {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .audioBox {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 500px;
+      height: 60px;
+
+      audio {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .modelBox {
+      background-color: rgba(0, 0, 0, 0.7);
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+
+      iframe {
+        width: 100%;
+        height: 100%;
+      }
+
+      .modelBtn {
+        cursor: pointer;
+        position: absolute;
+        z-index: 10;
+        right: 30px;
+        bottom: 50px;
+        img {
+          display: block;
+          margin: 15px 0;
+        }
+      }
+      .modelName {
+        pointer-events: none;
+        position: absolute;
+        z-index: 10;
+        bottom: 80px;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 18px;
+        font-weight: 700;
+        color: var(--themeColor);
+        letter-spacing: 4px;
+      }
+    }
+  }
+}

src/components/LookDom/index.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { CloseCircleOutlined } from '@ant-design/icons'
+import styles from './index.module.scss'
+import { useSelector } from 'react-redux'
+import store, { RootState } from '@/store'
+import { baseURL } from '@/utils/http'
+import classNames from 'classnames'
+
+function LookDom() {
+  const { src, type, flag, name } = useSelector((state: RootState) => state.A0Layout.lookDom)
+
+  // 控制放大缩小复位
+  // const modelMoveFu = useCallback((fuName: 'resetView' | 'zoomIn' | 'zoomOut') => {
+  //   const dom: any = document.querySelector('#modelIframe')
+  //   if (dom && dom.contentWindow && dom.contentWindow.sceneFc[fuName]) {
+  //     dom.contentWindow.sceneFc[fuName]()
+  //   }
+  // }, [])
+
+  return (
+    <div className={styles.LookDom} style={src ? { opacity: 1, pointerEvents: 'auto' } : {}}>
+      {src ? (
+        <>
+          {type === 'video' ? (
+            <div className='viedoBox'>
+              <video autoPlay controls src={flag ? src : baseURL + src}></video>
+            </div>
+          ) : type === 'audio' ? (
+            <div className='audioBox'>
+              <audio autoPlay controls src={flag ? src : baseURL + src}></audio>
+            </div>
+          ) : (
+            <div className='modelBox'>
+              <iframe
+                id='modelIframe'
+                src={`./modelLook/index.html?src=${baseURL + src}&min=0.3&max=3`}
+                frameBorder='0'
+                title='model'
+              ></iframe>
+
+              {name ? <div className='modelName'>{name}</div> : null}
+            </div>
+          )}
+
+          <div
+            className={classNames('close', type === 'model' ? 'closeModel' : '')}
+            onClick={() =>
+              store.dispatch({
+                type: 'layout/lookDom',
+                payload: { src: '', type: '', flag: false, name: '' }
+              })
+            }
+          >
+            {type === 'model' ? (
+              <img src={require('@/assets/img/modelBack.png')} alt='' />
+            ) : (
+              <CloseCircleOutlined rev={undefined} />
+            )}
+          </div>
+        </>
+      ) : null}
+    </div>
+  )
+}
+
+const MemoLookDom = React.memo(LookDom)
+
+export default MemoLookDom

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/MyPopconfirm.tsx

@@ -0,0 +1,64 @@
+import React, { useMemo } from 'react'
+import { Button, Popconfirm } from 'antd'
+
+type Props = {
+  txtK:
+    | '删除'
+    | '取消'
+    | '重置密码'
+    | '退出登录'
+    | '清空数据'
+    | '撤回'
+    | '恢复'
+    | '导入当前合格数据'
+    | '取消关注'
+    | '清空'
+  onConfirm: () => void
+  Dom?: React.ReactNode
+  loc?: 'bottom'
+  disabled?: boolean
+}
+
+function MyPopconfirm({ txtK, onConfirm, Dom, loc, disabled }: Props) {
+  const txt = useMemo(() => {
+    const obj = {
+      删除: ['删除后无法恢复，是否删除?', '删除'],
+      取消: ['放弃编辑后，信息将不会保存!', '放弃'],
+      重置密码: ['密码重制后为Aa147852，是否重置?', '重置'],
+      退出登录: ['确定退出吗?', '确定'],
+      清空数据: ['确定清空吗?', '确定'],
+      撤回: ['确定撤回吗?', '确定'],
+      恢复: ['确定恢复吗?', '确定'],
+      导入当前合格数据: ['确定导入吗?如数据太大可能需要等待', '确定'],
+      取消关注: ['确定取消关注吗?', '确定'],
+      清空: ['确定清空数据嘛?', '确定']
+    }
+    return Reflect.get(obj, txtK) || ['', '']
+  }, [txtK])
+
+  return (
+    <Popconfirm
+      disabled={disabled}
+      placement={loc}
+      title={txt[0]}
+      okText={txt[1]}
+      cancelText='取消'
+      onConfirm={onConfirm}
+      okButtonProps={{ loading: false }}
+    >
+      {Dom ? (
+        Dom
+      ) : ['删除', '恢复', '导入当前合格数据', '清空数据'].includes(txtK) ? (
+        <Button disabled={disabled} size='small' type='text' danger>
+          {txtK}
+        </Button>
+      ) : (
+        <Button>{txtK}</Button>
+      )}
+    </Popconfirm>
+  )
+}
+
+const MemoMyPopconfirm = React.memo(MyPopconfirm)
+
+export default MemoMyPopconfirm

src/components/MyTable/index.module.scss

@@ -0,0 +1,65 @@
+.MyTable {
+  :global {
+    .ant-table-body {
+      overflow-y: auto !important;
+      overflow-y: overlay !important;
+
+      .ant-table-row {
+        .ant-table-cell {
+          padding: 10px;
+
+          a {
+            color: var(--themeColor) !important;
+          }
+        }
+      }
+      .tabx {
+        color: #ff4d4d;
+      }
+      .MTclick {
+        cursor: pointer;
+        text-decoration: underline;
+        &:hover {
+          color: var(--themeColor);
+        }
+      }
+      // .MTclickAc {
+      //   color: var(--themeColor);
+      // }
+    }
+
+    .NODATA {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      color: #666666;
+      font-size: 16px;
+      // img {
+      //   width: 150px;
+      // }
+      & > p {
+        margin-bottom: 10px;
+      }
+      div {
+        width: 80%;
+        margin-top: 8%;
+        display: flex;
+        justify-content: space-around;
+      }
+    }
+  }
+}
+
+.MyTableNull {
+  :global {
+    .ant-table-body {
+      .ant-table-placeholder {
+        .ant-table-cell {
+          padding: 0 !important;
+          border-bottom: none !important;
+        }
+      }
+    }
+  }
+}

src/components/MyTable/index.tsx

@@ -0,0 +1,357 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from 'react'
+import styles from './index.module.scss'
+import { DatePicker, Form, FormInstance, Input, Table, TableProps } from 'antd'
+import ImageLazy from '../ImageLazy'
+import classNames from 'classnames'
+import { resJiLianFu } from '@/utils/history'
+import { baseURL } from '@/utils/http'
+import dayjs from 'dayjs'
+
+interface MyTableProps extends Omit<TableProps, 'onChange'> {
+  yHeight?: number //设置表格的高度
+  list: any //表格数据
+  columnsTemp: any[][] //表格展示
+  total?: number //总数
+  pageNum?: number
+  pageSize?: number
+  pagingInfo?: any | boolean
+  onChange?: (pageNum: number, pageSize: number) => void
+  lastBtn?: any //后面的操作按钮
+  startBtn?: any
+  classKey?: string //一个组件多次使用的时候要传递，分别设置style
+  // 表格简单的合并
+  merge?: { type: string; num: number; loc: 'rowSpan' | 'colSpan' }
+  // 定制化表头
+  myTitle?: { name: string; Com: React.ReactNode }
+  // 为空的定制字段
+  isNull?: string
+  // 设置宽度
+  widthSet?: any
+  rowKey?: string
+  readOnly?: boolean
+  // 没有数据的时候展示
+  emptyText?: boolean
+}
+
+export interface MyTableMethods {
+  form: FormInstance<any>
+}
+
+export const myTableTransferSize = (item: any) => {
+  let danWei = isNaN(item.sizeUnit) ? item.sizeUnit : resJiLianFu(item.sizeUnit, ' ')
+
+  let txt1 = item.sizeL ? `通长${item.sizeL}` : ''
+  let txt2 = item.sizeW ? `通宽${item.sizeW}` : ''
+  let txt3 = item.sizeH ? `通高${item.sizeH}` : ''
+
+  txt1 = txt1 ? txt1 + danWei : ''
+  txt2 = txt2 ? txt2 + danWei : ''
+  txt3 = txt3 ? txt3 + danWei : ''
+
+  let arr = [txt1, txt2, txt3]
+  arr = arr.filter(v => v)
+
+  if (!txt1 && !txt2 && !txt3) return '（空）'
+  else return arr.join(' - ')
+}
+
+export const getDesensitizeTxt = (txt: string, frontLen = 3, endLen = 4) => {
+  if (!txt) return txt
+  const totalVisible = frontLen + endLen
+  if (txt.length <= totalVisible) {
+    return txt
+  }
+  const frontStr = txt.substring(0, frontLen)
+  const endStr = endLen > 0 ? txt.substring(txt.length - endLen) : ''
+  const maskStr = '*'.repeat(txt.length - frontLen - endLen)
+
+  return frontStr + maskStr + endStr
+}
+
+const MyTable = forwardRef<MyTableMethods, MyTableProps>(
+  (
+    {
+      yHeight,
+      list,
+      columnsTemp,
+      total,
+      pageNum = 1,
+      pageSize = 10,
+      pagingInfo = {
+        showQuickJumper: true,
+        position: ['bottomCenter'],
+        showSizeChanger: true
+      },
+      onChange,
+      lastBtn = [],
+      startBtn = [],
+      classKey = '',
+      merge,
+      myTitle,
+      isNull = '（空）',
+      widthSet,
+      rowKey = 'id',
+      readOnly,
+      emptyText,
+      ...rest
+    },
+    ref
+  ) => {
+    // 点击操作高亮
+    const [clickAc, setClickAc] = useState(0)
+    const [form] = Form.useForm()
+
+    // 表格内容定制化
+    const tableComObj = useCallback(
+      (key: string, val: string[], id?: any, backFu?: (id: number) => void) => {
+        const obj = {
+          // 超链接打开
+          A: (
+            <a href={val[1]} target='_blank' title={val[1]} rel='noreferrer'>
+              {val[0]}
+            </a>
+          ),
+          // 点击触发事件
+          S: (
+            <span
+              className={classNames('MTclick', clickAc === id ? 'MTclickAc' : '')}
+              onClick={() => {
+                if (id && backFu) {
+                  backFu(id)
+                  setClickAc(id)
+                }
+              }}
+            >
+              {val[1]}
+            </span>
+          )
+        }
+        return Reflect.get(obj, key)
+      },
+      [clickAc]
+    )
+
+    useEffect(() => {
+      const dom = document.querySelector(`.MyTable${classKey} .ant-table-body`) as HTMLDivElement
+
+      if (dom && yHeight) dom.style.height = yHeight + 'px'
+    }, [classKey, yHeight])
+
+    // 页码变化
+    const paginationChange = useCallback(
+      () => (pageNum: number, pageSize: number) => {
+        if (onChange) {
+          onChange(pageNum, pageSize)
+        }
+      },
+      [onChange]
+    )
+
+    const dataChangeFu = useCallback(
+      (v: any) => {
+        /**
+         * index:序号
+         * txt:正常数据
+         * img:图片
+         * txtChange:判断显示不同字段
+         * text:文字比较多的情况
+         */
+
+        const obj = {
+          index: (_: any, __: any, index: number) => index + 1 + (pageNum - 1) * pageSize,
+          txt: (item: any) =>
+            v[3] && !item[v[2]] ? (
+              <div dangerouslySetInnerHTML={{ __html: v[3] }}></div>
+            ) : item[v[2]] && item[v[2]] !== '0' ? (
+              item[v[2]]
+            ) : v[3] ? (
+              v[3]
+            ) : (
+              isNull
+            ),
+          txtArr: (item: any) => (
+            <div dangerouslySetInnerHTML={{ __html: (item[v[2]] || []).join('<br/>') }}></div>
+          ),
+          // 日期去掉00：00：00
+          dateRes: (item: any) => {
+            let res = item[v[2]] ? dayjs(item[v[2]]).format('YYYY-MM-DD') : isNull
+            return res
+          },
+          // 多个字段拼接
+          ping: (item: any) => (item[v[2]] || '') + (resJiLianFu(item[v[3]]) || '') || isNull,
+          // 这个模块特有的级联控制
+          txtC: (item: any) =>
+            v[1] === '年代' && item[v[2]] === '其他' ? '其他' : resJiLianFu(item[v[2]]),
+          // 尺寸
+          size: myTableTransferSize,
+          img: (item: any) =>
+            v[3] && !item[v[2]] ? (
+              <div dangerouslySetInnerHTML={{ __html: v[3] }}></div>
+            ) : (
+              <div className='tableImgAuto'>
+                <ImageLazy
+                  width={60}
+                  height={60}
+                  srcBig={item.thumbPc || item.filePath}
+                  src={item[v[2]] || item.thumb}
+                  offline={(item[v[2]] || item.thumb).includes('http')}
+                />
+              </div>
+            ),
+          // 附件大小
+          fileSize: (item: any) => {
+            if (item[v[2]]) {
+              const resTxt = (item[v[2]] / 1024).toFixed(2)
+              if (resTxt === '0.00') return '0.01'
+              else return resTxt
+            } else return isNull
+          },
+          txtChange: (item: any) => Reflect.get(v[3], item[v[2]]) || v[4] || isNull,
+          text: (item: any) => {
+            let tempCom: any = item[v[2]] || isNull
+
+            if (tempCom.length >= v[3]) {
+              tempCom = tempCom.substring(0, v[3]) + '...'
+            }
+
+            if (v[4]) {
+              tempCom = tableComObj(v[4], [tempCom, item[v[2]]], item.id, v[5])
+            } else if ((item[v[2]] || '').length >= v[3]) {
+              tempCom = (
+                <span style={{ cursor: 'pointer' }} title={item[v[2]]}>
+                  {tempCom}
+                </span>
+              )
+            }
+
+            return tempCom
+          },
+          input: (item: any) => {
+            return (
+              <Form.Item noStyle name={`${item.id}-${v[2]}`}>
+                <Input
+                  allowClear
+                  readOnly={readOnly}
+                  maxLength={v[3]?.maxLength}
+                  placeholder={v[3]?.placeholder || '请输入'}
+                />
+              </Form.Item>
+            )
+          },
+          datePicker: (item: any) => {
+            return (
+              <Form.Item noStyle name={`${item.id}-${v[2]}`}>
+                <DatePicker disabled={readOnly} {...(v[3] || {})} />
+              </Form.Item>
+            )
+          },
+          custom: (item: any) => {
+            return (
+              <Form.Item noStyle name={`${item.id}-${v[2]}`}>
+                {v[3].render(readOnly)}
+              </Form.Item>
+            )
+          },
+          desensitize: (item: any) => {
+            const txt = item[v[2]]
+            if (!txt) return isNull
+            const frontLen = v[3]?.frontLen || 3
+            const endLen = v[3]?.endLen || 4
+
+            return getDesensitizeTxt(txt, frontLen, endLen)
+          }
+        }
+
+        return Reflect.get(obj, v[0])
+      },
+      [isNull, pageNum, pageSize, readOnly, tableComObj]
+    )
+
+    const columns = useMemo(() => {
+      const arr: any = columnsTemp.map((v: any) => ({
+        title: myTitle && v.includes(myTitle.name) ? myTitle.Com : v[1],
+        render: dataChangeFu(v),
+        width: widthSet && Reflect.get(widthSet, v[2]) ? Reflect.get(widthSet, v[2]) : 'auto',
+        onCell:
+          merge && v.includes(merge.type)
+            ? // {rowSpan:3}
+              (item: any, index: number) => ({
+                rowSpan: index === 0 ? merge.num : 0
+              })
+            : ''
+      }))
+
+      return arr
+    }, [columnsTemp, dataChangeFu, merge, myTitle, widthSet])
+
+    useImperativeHandle(ref, () => ({
+      form
+    }))
+
+    // 空数据列表会闪一下的问题
+    const timerrRef = useRef(-1)
+    const [isLoding, setIsLoding] = useState(false)
+    useEffect(() => {
+      timerrRef.current = window.setTimeout(() => {
+        setIsLoding(true)
+      }, 500)
+      return () => {
+        clearTimeout(timerrRef.current)
+      }
+    }, [])
+
+    return (
+      <Form form={form} component={false}>
+        <Table
+          className={classNames(
+            `${styles.MyTable} MyTable${classKey}`,
+            emptyText ? styles.MyTableNull : ''
+          )}
+          scroll={{ y: yHeight ? yHeight : '' }}
+          dataSource={list}
+          columns={[...startBtn, ...columns, ...lastBtn]}
+          rowKey={rowKey}
+          pagination={
+            pagingInfo
+              ? {
+                  ...pagingInfo,
+                  current: pageNum,
+                  pageSize: pageSize,
+                  total: total,
+                  onChange: paginationChange()
+                }
+              : false
+          }
+          {...rest}
+          locale={
+            emptyText
+              ? {
+                  emptyText: (
+                    <div
+                      className='NODATA'
+                      style={{ height: yHeight ? yHeight : 500, opacity: isLoding ? '1' : '0' }}
+                    >
+                      <img src={baseURL + `/baseData/staImg/build.png`} alt='' />
+                      <p>暂无相关搜索结果，请更换关键字搜索</p>
+                    </div>
+                  )
+                }
+              : {}
+          }
+        />
+      </Form>
+    )
+  }
+)
+
+const MemoMyTable = React.memo(MyTable)
+
+export default MemoMyTable

src/components/NoPower/index.module.scss

@@ -0,0 +1,26 @@
+.NoPower {
+  background-color: #fff;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #666666;
+  font-size: 16px;
+  padding-bottom: 20px;
+
+  :global {
+    img {
+      width: 300px;
+    }
+    p {
+      margin-bottom: 10px;
+    }
+    div {
+      width: 80%;
+      margin-top: 8%;
+      display: flex;
+      justify-content: space-around;
+    }
+  }
+}

src/components/NoPower/index.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react'
+import styles from './index.module.scss'
+
+const objData = {
+  // 500
+  1: {
+    txt1: '抱歉，系统错误，',
+    txt2: '您可以选择尝试清除缓存或联系管理员',
+    imgName: '500'
+  },
+
+  // 网络错误
+  2: {
+    txt1: '网络错误， ',
+    txt2: '请检查网络连接是否正常',
+    imgName: 'err'
+  },
+  // 建设中页面
+  3: {
+    txt1: '正在建设中，敬请期待',
+    txt2: '',
+    imgName: 'isBuild'
+  },
+  // 查询为空
+  4: {
+    txt1: '暂无相关搜索结果，请更换关键字搜索',
+    txt2: '',
+    imgName: 'build'
+  },
+  // 详情页为空
+  5: {
+    txt1: '暂无相关内容，请退回上一页',
+    txt2: '',
+    imgName: 'null'
+  },
+  // 404
+  6: {
+    txt1: '抱歉，系统错误，',
+    txt2: '您可以选择尝试清除缓存或联系管理员',
+    imgName: '404'
+  }
+}
+
+function NoPower() {
+  const [info, setInfo] = useState({
+    txt1: '',
+    txt2: '',
+    imgName: ''
+  })
+
+  useEffect(() => {
+    const urlAll = window.location.href
+    const arr = urlAll.split('?k=')
+    if (arr && arr.length > 1) {
+      const num = arr[1]
+
+      const obj = Reflect.get(objData, num)
+      if (obj.imgName) setInfo(obj)
+    } else {
+      setInfo({
+        txt1: '抱歉，您暂无当前页面的访问权限，',
+        txt2: '请联系管理员',
+        imgName: 'noPower'
+      })
+    }
+  }, [])
+
+  return (
+    <div className={styles.NoPower}>
+      <img src={require(`@/assets/img/NoPower.png`)} alt='' />
+      <p>{info.txt1} </p>
+      <p>{info.txt2}</p>
+    </div>
+  )
+}
+
+const MemoNoPower = React.memo(NoPower)
+
+export default MemoNoPower

src/components/NotFound/index.tsx

@@ -0,0 +1,25 @@
+import { baseURL } from '@/utils/http'
+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'
+    }, 500)
+    return () => {
+      clearTimeout(timeRef.current)
+    }
+  }, [])
+
+  return (
+    <div className='noFindPage'>
+      <img src={baseURL + '/baseData/staImg/404.png'} alt='' />
+      <p>抱歉，系统错误， </p>
+      <p>您可以选择尝试清除缓存或联系管理员</p>
+
+    </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,43 @@
+.UpAsyncLoding {
+  opacity: 0;
+  pointer-events: none;
+  position: fixed;
+  z-index: 10000;
+  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);
+      }
+
+    }
+
+    .closeUpBtn {
+      position: absolute;
+      top: 70%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+  }
+}

src/components/UpAsyncLoding/index.tsx

@@ -0,0 +1,38 @@
+import store, { RootState } from "@/store";
+import { Button } from "antd";
+import React, { useCallback } from "react";
+import { useSelector } from "react-redux";
+import styles from "./index.module.scss";
+function UpAsyncLoding() {
+  // 从仓库中获取取消上传的函数
+  const closeUpFile = useSelector(
+    (state: RootState) => state.A0Layout.closeUpFile
+  );
+
+  const btnClose = useCallback(() => {
+    closeUpFile.fu();
+
+    setTimeout(() => {
+      store.dispatch({
+        type: "layout/closeUpFile",
+        payload: { fu: () => {}, state: false },
+      });
+    }, 200);
+  }, [closeUpFile]);
+
+  return (
+    <div id="UpAsyncLoding" className={styles.UpAsyncLoding}>
+      <div className="progressBox">
+        <div id="progress"></div>
+      </div>
+      {/* 手动取消上传按钮 */}
+      <div className="closeUpBtn">
+        <Button onClick={btnClose}>取消上传</Button>
+      </div>
+    </div>
+  );
+}
+
+const MemoUpAsyncLoding = React.memo(UpAsyncLoding);
+
+export default MemoUpAsyncLoding;

src/components/YtableVideo/index.module.scss

@@ -0,0 +1,41 @@
+.YtableVideo {
+  display: flex;
+  justify-content: center;
+  :global {
+    .TvideoBox {
+      cursor: pointer;
+      width: 60px;
+      height: 60px;
+      position: relative;
+      .TvideoBoxLook {
+        position: absolute;
+        z-index: 10;
+        opacity: 0;
+        transition: opacity 0.3s;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 14px;
+        color: #fff;
+        background-color: rgba(0, 0, 0, 0.6);
+        .anticon-eye {
+          font-size: 18px;
+        }
+      }
+      video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      &:hover {
+        .TvideoBoxLook {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}

src/components/YtableVideo/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import styles from './index.module.scss'
+import store from '@/store'
+import { EyeOutlined } from '@ant-design/icons'
+import { baseURL } from '@/utils/http'
+
+type Props = {
+  src: string
+}
+
+function YtableVideo({ src }: Props) {
+  return (
+    <div className={styles.YtableVideo}>
+      <div className='TvideoBox'>
+        <div
+          className='TvideoBoxLook'
+          onClick={() =>
+            store.dispatch({
+              type: 'layout/lookDom',
+              payload: { src: baseURL + src, type: 'video', flag: true }
+            })
+          }
+        >
+          <EyeOutlined />
+          &nbsp;
+          <div>预览</div>
+        </div>
+        <video src={baseURL + src}></video>
+      </div>
+    </div>
+  )
+}
+
+const MemoYtableVideo = React.memo(YtableVideo)
+
+export default MemoYtableVideo

src/components/Z3upFiles/data.ts

@@ -0,0 +1,77 @@
+import store from '@/store'
+import { baseURL } from '@/utils/http'
+
+// 查看 权限 图片 /视频 、音频
+export const authFilesLookFu = (name: string, url: string) => {
+  let flag = false
+
+  const nameRes = name ? name : ''
+
+  // pdf和txt 直接新窗口打开
+  // const arr0: ('.pdf' | '.txt')[] = ['.pdf', '.txt']
+  // arr0.forEach(v => {
+  //   if (nameRes.toLowerCase().endsWith(v)) {
+  //     if (url) window.open(baseURL + url)
+  //     flag = true
+  //   }
+  // })
+
+  // 图片使用 antd的图片预览组件
+  const arr1 = ['.png', '.jpg', '.jpeg', '.gif']
+  arr1.forEach(v => {
+    if (nameRes.toLowerCase().endsWith(v)) {
+      if (url)
+        store.dispatch({
+          type: 'layout/lookBigImg',
+          payload: {
+            url: baseURL + url,
+            show: true
+          }
+        })
+
+      flag = true
+    }
+  })
+
+  // 视频和音频 使用自己的封装的组件
+  let type: '' | 'video' | 'audio' = ''
+  const arr2 = ['.mp3', '.wav']
+  arr2.forEach(v => {
+    if (nameRes.toLowerCase().endsWith(v)) {
+      type = 'audio'
+      flag = true
+    }
+  })
+
+  if (nameRes.toLowerCase().endsWith('.mp4')) {
+    type = 'video'
+    flag = true
+  }
+
+  if (type && url)
+    store.dispatch({
+      type: 'layout/lookDom',
+      payload: {
+        src: url,
+        type
+      }
+    })
+
+  // docx xlsx使用插件
+  // const arr3: (".docx" | ".xlsx")[] = [".docx", ".xlsx"];
+  // arr3.forEach((v) => {
+  //   if (nameRes.toLowerCase().endsWith(v)) {
+  //     if (url) {
+  //       noAuth
+  //         ? store.dispatch({
+  //             type: "layout/fileLookUrl",
+  //             payload: { url: baseURL + url, name: v },
+  //           })
+  //         : urlChangeFu(url, false, v, nameRes);
+  //     }
+  //     flag = true;
+  //   }
+  // });
+
+  return flag
+}

src/components/Z3upFiles/index.module.scss

@@ -0,0 +1,69 @@
+.Z3upFiles {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  :global {
+    .Z3files {
+      width: 500px;
+      // padding-top: 6px;
+
+      .Z3filesRow {
+        display: flex;
+        margin-top: 5px;
+        // justify-content: space-between;
+        align-items: center;
+        font-size: 16px;
+        // border-bottom: 1px dashed #999;
+        padding-bottom: 5px;
+
+        .Z3files1 {
+          max-width: calc(100% - 130px);
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .Z3files2 {
+          display: flex;
+          width: 120px;
+          justify-content: flex-end;
+
+          & > span {
+            cursor: pointer;
+          }
+
+          a {
+            color: black;
+          }
+        }
+      }
+    }
+
+    .fileTit {
+      margin-top: 14px;
+      font-size: 14px;
+      color: rgb(126, 124, 124);
+
+      .noUpThumb {
+        position: relative;
+        overflow: hidden;
+        opacity: 0;
+        transition: top 0.2s;
+        color: #ff4d4f;
+        top: -10px;
+      }
+
+      .noUpThumbAc {
+        top: 0;
+        opacity: 1;
+      }
+    }
+
+    .lookNone {
+      position: relative;
+      top: 4px;
+      left: 10px;
+    }
+  }
+}

src/components/Z3upFiles/index.tsx

@@ -0,0 +1,238 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import { FileImgListType } from '@/types'
+import { API_upFile, fileTypeRes } from '@/store/action/layout'
+import { MessageFu } from '@/utils/message'
+import { fileDomInitialFu } from '@/utils/domShow'
+import { forwardRef, useImperativeHandle } from 'react'
+import { Button, Popconfirm } from 'antd'
+import { EyeOutlined, UploadOutlined, CloseOutlined, DownloadOutlined } from '@ant-design/icons'
+import classNames from 'classnames'
+import { baseURL } from '@/utils/http'
+import { authFilesLookFu } from './data'
+
+const size = Infinity
+
+export type GoodFileType = {
+  createTime: string
+  creatorId: number
+  creatorName: string
+  description: string
+  display?: any
+  effect: string | null
+  fileName: string
+  filePath: string
+  fileSize: string
+  goodName: string
+  goodNum: string
+  goodNumName: string
+  id: number
+  moduleId?: any
+  moduleName: string
+  parentId?: any
+  thumb: string
+  type: string
+  updateTime: string
+}
+
+type Props = {
+  max: number //最多传多少个文件
+  isLook: boolean //是否是查看
+  ref: any //当前自己的ref，给父组件调用
+  fileCheck: boolean
+  dirCode: string //文件的code码
+  myUrl: string
+  fromData?: any
+  lookData: FileImgListType[] //编辑或者 查看 回显
+  accept?: string
+  // result:成果 | list:清单
+  tips?: string
+  // 文件大小
+  noShowList?: boolean //不回显列表
+  fileRes?: (obj: GoodFileType) => void
+}
+
+function Z3upFiles(
+  {
+    max,
+    isLook,
+    fileCheck,
+    dirCode,
+    myUrl,
+    fromData,
+    lookData,
+    accept = '*',
+    tips = '',
+    noShowList = false,
+    fileRes
+  }: Props,
+  ref: any
+) {
+  const [fileList, setFileList] = useState<FileImgListType[]>([])
+
+  useEffect(() => {
+    if (lookData && lookData.length > 0) setFileList(lookData)
+  }, [lookData])
+
+  const myInput = useRef<HTMLInputElement>(null)
+
+  // 上传文件
+  const handeUpPhoto = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files) {
+        // 拿到files信息
+        const filesInfo = e.target.files[0]
+
+        // 校验格式
+        if (!filesInfo.name.includes('.zip') && accept !== '*') {
+          e.target.value = ''
+          return MessageFu.warning(`只支持zip格式!`)
+        }
+
+        // 校验大小
+        if (size && filesInfo.size > size * 1024 * 1024) {
+          e.target.value = ''
+          return MessageFu.warning(`最大支持${size}M!`)
+        }
+
+        // 创建FormData对象
+        const fd = new FormData()
+        // 把files添加进FormData对象（‘photo’为后端需要的字段）
+
+        const typeRes = fileTypeRes(filesInfo.name)
+
+        fd.append('file', filesInfo)
+        fd.append('type', typeRes)
+        fd.append('dirCode', dirCode)
+        fd.append('isDb', 'true')
+
+        // 开启压缩图片
+        fd.append('isCompress', 'true')
+
+        if (fromData) {
+          for (const k in fromData) {
+            if (fromData[k]) fd.append(k, fromData[k])
+          }
+        }
+
+        e.target.value = ''
+
+        try {
+          const res = await API_upFile(fd, myUrl)
+          if (res.code === 0) {
+            MessageFu.success('上传成功!')
+            setFileList([...fileList, res.data])
+
+            if (fileRes) {
+              fileRes(res.data)
+            }
+          }
+          fileDomInitialFu()
+        } catch (error) {
+          fileDomInitialFu()
+        }
+      }
+    },
+    [accept, dirCode, fileList, fileRes, fromData, myUrl]
+  )
+
+  // 列表删除某一个文件
+  const delImgListFu = useCallback(
+    async (id: number) => {
+      setFileList(fileList.filter(v => v.id !== id))
+    },
+    [fileList]
+  )
+
+  // 让父组件调用，拿到 附件信息
+  const filesIdRes = useCallback(() => {
+    return fileList.map(v => v.id)
+  }, [fileList])
+
+  // 可以让父组件调用子组件的方法
+  useImperativeHandle(ref, () => ({
+    filesIdRes
+  }))
+
+  return (
+    <div className={styles.Z3upFiles} id='Z3upFiles'>
+      <input
+        id='upInput'
+        type='file'
+        accept={accept}
+        ref={myInput}
+        onChange={e => handeUpPhoto(e)}
+      />
+      <div className='Z3Btn'>
+        {fileList.length < max && !isLook ? (
+          <Button
+            onClick={() => myInput.current?.click()}
+            icon={<UploadOutlined rev={undefined} />}
+            type={noShowList ? 'primary' : 'default'}
+          >
+            上传
+          </Button>
+        ) : null}
+
+        {noShowList ? null : (
+          <div className='Z3files'>
+            {fileList.map(v => (
+              <div className='Z3filesRow' key={v.id}>
+                <div className='Z3files1' title={v.fileName}>
+                  {v.fileName}
+                </div>
+                <div className='Z3files2'>
+                  {authFilesLookFu(v.fileName, '') ? (
+                    <>
+                      <EyeOutlined
+                        rev={undefined}
+                        title='查看'
+                        onClick={() => authFilesLookFu(v.fileName, v.filePath)}
+                      />
+                      &emsp;
+                    </>
+                  ) : null}
+                  <a
+                    title='下载'
+                    href={baseURL + v.filePath}
+                    download={v.fileName}
+                    target='_blank'
+                    rel='noreferrer'
+                  >
+                    <DownloadOutlined rev={undefined} />
+                  </a>
+                  &emsp;
+                  <Popconfirm
+                    title='删除后无法恢复，是否删除?'
+                    okText='删除'
+                    cancelText='取消'
+                    onConfirm={() => delImgListFu(v.id)}
+                    okButtonProps={{ loading: false }}
+                  >
+                    <CloseOutlined rev={undefined} title='删除' hidden={isLook} />
+                  </Popconfirm>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        <div className='fileTit' hidden={isLook || noShowList}>
+          {tips ? tips : null}
+          <br />
+          <div
+            className={classNames(
+              'noUpThumb',
+              fileList.length <= 0 && fileCheck ? 'noUpThumbAc' : ''
+            )}
+          >
+            请上传视频!
+          </div>
+        </div>
+      </div>
+      {isLook && fileList.length <= 0 ? <div className='lookNone'>（空）</div> : null}
+    </div>
+  )
+}
+
+export default forwardRef(Z3upFiles)

src/components/ZRichText/index.module.scss

@@ -0,0 +1,82 @@
+.ZRichText {
+  width: 1000px;
+  height: 100%;
+
+  :global {
+    .txtBox {
+      width: 100%;
+      height: 100%;
+      border: 1px solid #ccc;
+
+      a{
+        color: #fff !important;
+      }
+
+      // 隐藏媒体功能
+      .control-item.media {
+        display: none;
+      }
+
+      .bf-container {
+        height:100%;
+      }
+
+      .bf-content {
+        height: calc(100% - 92px);
+        padding-bottom: 0px;
+      }
+
+
+
+      .bf-controlbar {
+        position: relative;
+
+        .upImgBox {
+          position: absolute;
+          bottom: 13px;
+          right: 15px;
+          cursor: pointer;
+          color: var(--themeColor);
+          // display: none;
+        }
+
+        .upImgBoxNo {
+          display: none;
+        }
+
+      }
+    }
+
+    .noUpThumb {
+      position: relative;
+      overflow: hidden;
+      opacity: 0;
+      transition: top .2s;
+      color: #ff4d4f;
+      top: -10px;
+    }
+
+    .noUpThumbAc {
+      top: 0;
+      opacity: 1;
+    }
+
+    .bf-media .bf-image {
+      float: initial !important;
+      display: block;
+      margin: 10px auto;
+      text-align: center;
+
+      // 不让拖动放大缩小图片（会报错）
+      .bf-csize-icon {
+        display: none !important;
+      }
+
+      img {
+        max-width: 500px;
+        max-height: 300px;
+      }
+    }
+
+  }
+}

src/components/ZRichText/index.tsx

@@ -0,0 +1,202 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import styles from './index.module.scss'
+
+// 引入编辑器组件
+
+// 安装---npm install braft-editor --save --force
+// npm install braft-utils --save --force
+import { ContentUtils } from 'braft-utils'
+import BraftEditor from 'braft-editor'
+// 引入编辑器样式
+import 'braft-editor/dist/index.css'
+
+import classNames from 'classnames'
+import { MessageFu } from '@/utils/message'
+import { fileDomInitialFu } from '@/utils/domShow'
+import { baseURL } from '@/utils/http'
+
+import { forwardRef, useImperativeHandle } from 'react'
+import { API_upFile } from '@/store/action/layout'
+
+type Props = {
+  check: boolean //表单校验，为fasle表示不校验
+  dirCode: string //文件的code码
+  isLook: boolean //是否是查看进来
+  ref: any //当前自己的ref，给父组件调用
+  myUrl: string //上传的api地址
+  full?: boolean
+}
+
+function ZRichText({ check, dirCode, isLook, myUrl, full }: Props, ref: any) {
+  // 添加 上传 图片的dom
+  useEffect(() => {
+    setTimeout(() => {
+      const dom = document.querySelector('.bf-controlbar')!
+      const div = document.createElement('div')
+      div.className = 'upImgBox'
+      // div.title = "上传图片";
+      div.innerHTML = '上传图片/视频'
+      div.onclick = async () => {
+        myInput.current?.click()
+      }
+      dom.appendChild(div)
+    }, 20)
+
+    // 监听 富文本 的 class 变化，在全屏的时候会 富文本会添加上 fullscreen 的类
+    // 修复顶部样式冲突问题
+
+    const editorDom = document.querySelector('.bf-container') as HTMLDivElement
+
+    const observer = new MutationObserver(() => {
+      // console.log("change");
+      const dom = document.querySelector('.layoutRightTop') as HTMLDivElement
+
+      if (editorDom.className.includes('fullscreen')) dom.style.zIndex = '-1'
+      else dom.style.zIndex = '100'
+    })
+
+    observer.observe(editorDom, {
+      attributes: true
+    })
+
+    // 销毁监听
+    return () => {
+      observer.disconnect()
+    }
+  }, [])
+
+  useEffect(() => {
+    const controlbarDom = document.querySelectorAll('.txtBox .bf-controlbar ')
+    const contentDom = document.querySelectorAll('.txtBox .bf-content ')
+    if (controlbarDom) {
+      controlbarDom.forEach((v: any) => {
+        v.style.display = isLook ? 'none' : 'block'
+      })
+      contentDom.forEach((v: any) => {
+        v.style.height = isLook ? '100%' : ''
+      })
+    }
+  }, [isLook])
+
+  // 编辑器文本
+  const [editorValue, setEditorValue] = useState(
+    // 初始内容
+    BraftEditor.createEditorState('')
+  )
+
+  // 判断 富文本是否为空
+  const isTxtFlag = useMemo(() => {
+    const txt: string = editorValue.toHTML()
+    if (txt.replaceAll('<p>', '').replaceAll('</p>', '').replaceAll(' ', '') === '') {
+      return true
+    } else return false
+  }, [editorValue])
+
+  const myInput = useRef<HTMLInputElement>(null)
+
+  // 上传图片
+  const handeUpPhoto = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files) {
+        // 拿到files信息
+        const filesInfo = e.target.files[0]
+
+        let type = ['image/jpeg', 'image/png', 'video/mp4']
+        let size = 5
+        let txt = '图片只支持png、jpg和jpeg格式!'
+        let txt2 = '图片最大支持5M!'
+
+        const isVideoFlag = filesInfo.name.endsWith('.mp4')
+
+        // 校验格式
+        if (!type.includes(filesInfo.type)) {
+          e.target.value = ''
+          if (isVideoFlag) {
+            // 上传视频
+            size = 500
+            txt = '视频只支持mp4格式!'
+            txt2 = '视频最大支持500M!'
+          }
+
+          return MessageFu.warning(txt)
+        }
+        // 校验大小
+        if (filesInfo.size > size * 1024 * 1024) {
+          e.target.value = ''
+          return MessageFu.warning(txt2)
+        }
+        // 创建FormData对象
+        const fd = new FormData()
+        // 把files添加进FormData对象（‘photo’为后端需要的字段）
+        fd.append('type', isVideoFlag ? 'video' : 'img')
+        fd.append('dirCode', dirCode)
+        fd.append('file', filesInfo)
+
+        e.target.value = ''
+
+        try {
+          const res = await API_upFile(fd, myUrl)
+          if (res.code === 0) {
+            MessageFu.success('上传成功!')
+            // 在光标位置插入图片
+            const newTxt = ContentUtils.insertMedias(editorValue, [
+              {
+                type: 'IMAGE',
+                url: baseURL + res.data.filePath
+              }
+            ])
+
+            setEditorValue(newTxt)
+          }
+          fileDomInitialFu()
+        } catch (error) {
+          fileDomInitialFu()
+        }
+      }
+    },
+    [dirCode, editorValue, myUrl]
+  )
+
+  // 让父组件调用的 回显 富文本
+  const ritxtShowFu = useCallback((val: string) => {
+    setEditorValue(BraftEditor.createEditorState(val))
+  }, [])
+
+  // 让父组件调用的返回 富文本信息 和 表单校验 isTxtFlag为ture表示未通过校验
+  const fatherBtnOkFu = useCallback(() => {
+    return { val: editorValue.toHTML(), flag: isTxtFlag }
+  }, [editorValue, isTxtFlag])
+
+  // 可以让父组件调用子组件的方法
+  useImperativeHandle(ref, () => ({
+    ritxtShowFu,
+    fatherBtnOkFu
+  }))
+
+  return (
+    <div className={styles.ZRichText} style={{ width: full ? '100%' : '' }}>
+      <input
+        id='upInput'
+        type='file'
+        accept='.png,.jpg,.jpeg,.mp4'
+        ref={myInput}
+        onChange={e => handeUpPhoto(e)}
+      />
+
+      <div className='txtBox'>
+        <BraftEditor
+          readOnly={isLook}
+          placeholder='请输入内容'
+          value={editorValue}
+          onChange={e => setEditorValue(e)}
+          imageControls={['remove']}
+        />
+      </div>
+      <div className={classNames('noUpThumb', check && isTxtFlag ? 'noUpThumbAc' : '')}>
+        请输入正文!
+      </div>
+    </div>
+  )
+}
+
+export default forwardRef(ZRichText)

src/components/ZRichTexts/index.module.scss

@@ -0,0 +1,208 @@
+.ZRichTexts {
+  width: 1000px;
+
+  :global {
+    // 正文
+    .formRightZW {
+      width: 1000px;
+      top: -3px;
+      position: relative;
+      display: flex;
+      align-items: center;
+      // justify-content: space-between;
+      height: 32px;
+
+      .formRightZWRR {
+        display: flex;
+      }
+    }
+
+    // 从查看进来
+    .formRightZWLook {
+      .ant-checkbox-wrapper {
+        pointer-events: none;
+      }
+    }
+
+    .txtBox {
+      width: 100%;
+      position: relative;
+
+      a {
+        color: #fff !important;
+      }
+
+      // 隐藏媒体功能
+      .control-item.media {
+        display: none;
+      }
+
+      button {
+        &:nth-of-type(7) {
+          display: none !important;
+        }
+        &:nth-of-type(8) {
+          display: none !important;
+        }
+        &:nth-of-type(18) {
+          display: none !important;
+        }
+        &:nth-of-type(19) {
+          display: none !important;
+        }
+      }
+
+      .bf-container {
+        height: 100%;
+      }
+
+      .bf-content {
+        height: auto;
+        max-height: 300px;
+        padding-bottom: 0px;
+      }
+      .fullscreen {
+        .bf-content {
+          max-height: 3000px;
+        }
+      }
+
+      .bf-controlbar {
+        position: relative;
+
+        .upImgBox {
+          position: absolute;
+          bottom: 13px;
+          right: 15px;
+          cursor: pointer;
+          color: var(--themeColor);
+          // display: none;
+        }
+
+        .upImgBoxNo {
+          display: none;
+        }
+      }
+
+      .zztxtRow {
+        margin-bottom: 20px;
+        border: 1px solid #ccc;
+
+        .zztxtRow1 {
+          padding: 0 20px;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          background-color: #e8e8e8;
+
+          .zztxtRow1_1 {
+            display: flex;
+            align-items: center;
+
+            .zztxtRow1_1_1 {
+              font-weight: 700;
+              font-size: 16px;
+              margin-right: 20px;
+            }
+
+            .zztxtRow1_1_2 {
+              display: flex;
+              align-items: center;
+              width: 580px;
+              height: 32px;
+            }
+          }
+        }
+
+        .zztxtRow1_2 {
+          display: flex;
+          align-items: center;
+
+          .anticon {
+            cursor: pointer;
+            font-size: 18px;
+          }
+
+          .zztxtRow1_2Icon {
+            position: relative;
+            top: 2px;
+          }
+
+          .zztxtRow1_2IconNo {
+            pointer-events: none;
+            opacity: 0.2;
+          }
+        }
+      }
+
+      .zztxtRowErr {
+        border-color: #ff4d4f;
+      }
+    }
+
+    // 从查看进来
+    .txtBoxLook {
+      .button-remove {
+        display: none !important;
+      }
+      .bf-controlbar {
+        pointer-events: auto !important;
+        display: flex;
+        justify-content: flex-end;
+        button {
+          display: none;
+          &:last-child {
+            display: inline-block;
+          }
+        }
+        div {
+          display: none;
+        }
+        .separator-line {
+          display: none;
+        }
+      }
+    }
+
+    .noUpThumb {
+      position: relative;
+      overflow: hidden;
+      opacity: 0;
+      transition: top 0.2s;
+      color: #ff4d4f;
+      top: -20px;
+    }
+
+    .noUpThumbAc {
+      top: -10px;
+      opacity: 1;
+    }
+
+    .bf-media .bf-image {
+      float: initial !important;
+      display: block;
+      margin: 0px auto;
+      text-align: center;
+
+      // 不让拖动放大缩小图片（会报错）
+      .bf-csize-icon {
+        display: none !important;
+      }
+
+      img {
+        max-width: 500px;
+        max-height: 300px;
+      }
+    }
+
+    // .bf-video-wrap
+    // 折叠菜单 高度问题
+    .bf-dropdown .dropdown-content {
+      display: none;
+    }
+    .bf-dropdown.active .dropdown-content {
+      display: block;
+    }
+  }
+}

src/components/ZRichTexts/index.tsx

@@ -0,0 +1,411 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react'
+import styles from './index.module.scss'
+
+// 引入编辑器组件
+
+// 安装---npm install braft-editor --save --force
+// npm install braft-utils --save --force
+import { ContentUtils } from 'braft-utils'
+import BraftEditor from 'braft-editor'
+// 引入编辑器样式
+import 'braft-editor/dist/index.css'
+
+import classNames from 'classnames'
+import { MessageFu } from '@/utils/message'
+import { fileDomInitialFu } from '@/utils/domShow'
+import { baseURL } from '@/utils/http'
+
+import { forwardRef, useImperativeHandle } from 'react'
+import { API_upFile } from '@/store/action/layout'
+import ZupAudio, { ZupAudioType } from '../ZupAudio'
+import { Button, Checkbox, Input } from 'antd'
+import { ArrowDownOutlined, DeleteOutlined, ArrowUpOutlined } from '@ant-design/icons'
+import MyPopconfirm from '../MyPopconfirm'
+
+export type SectionArrType = {
+  id: number
+  name: string
+  txt: any
+  fileInfo: ZupAudioType
+}
+
+type Props = {
+  check: boolean //表单校验，为fasle表示不校验
+  dirCode: string //文件的code码
+  isLook: boolean //是否是查看进来
+  ref: any //当前自己的ref，给父组件调用
+  myUrl: string //上传的api地址
+  isOne?: boolean //只显示单个富文本
+  upAudioBtnNone?: boolean //是否能上传无障碍音频
+  params?: Record<string, string | number> //一些上传的其它参数
+}
+
+function ZRichTexts(
+  { check, dirCode, isLook, myUrl, isOne = false, upAudioBtnNone = false, params }: Props,
+  ref: any
+) {
+  const [sectionArr, setSectionArr] = useState<SectionArrType[]>([
+    {
+      id: Date.now(),
+      name: '',
+      txt: BraftEditor.createEditorState(''),
+      fileInfo: { fileName: '', filePath: '' }
+    }
+  ])
+
+  // 是否按章节发布
+  const [isSection, setIsSection] = useState(false)
+
+  // 当前上传 图片
+  const nowIndexRef = useRef(0)
+
+  // 判断 富文本是否为空
+  const isTxtFlag = useMemo(() => {
+    let flag = false
+
+    // 不是按章节发布，检查第一个富文本
+    if (!isSection) {
+      const txt = sectionArr[0].txt.toText()
+      const txtHtml = sectionArr[0].txt.toHTML()
+      const txtRes = txt.replaceAll('\n', '').replaceAll(' ', '')
+      if (!txtRes && !txtHtml.includes('class="media-wrap')) flag = true
+    } else {
+      // 按章节发布  检查 所有的 标题 和富文本
+      sectionArr.forEach(v => {
+        if (!v.name) flag = true
+        const txt = v.txt.toText()
+        const txtHtml = sectionArr[0].txt.toHTML()
+        const txtRes = txt.replaceAll('\n', '').replaceAll(' ', '')
+        if (!txtRes && !txtHtml.includes('class="media-wrap')) flag = true
+      })
+    }
+
+    return flag
+  }, [isSection, sectionArr])
+
+  const myInput = useRef<HTMLInputElement>(null)
+
+  // 上传图片
+  const handeUpPhoto = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files) {
+        // 拿到files信息
+        const filesInfo = e.target.files[0]
+
+        let type = ['image/jpeg', 'image/png']
+        // let size = 5
+        let txt = '图片只支持png、jpg和jpeg格式!'
+        // let txt2 = '图片最大支持5M!'
+
+        // 校验格式
+        if (!type.includes(filesInfo.type)) {
+          e.target.value = ''
+          return MessageFu.warning(txt)
+        }
+
+        // 校验大小
+        // if (filesInfo.size > size * 1024 * 1024) {
+        //   e.target.value = ''
+        //   return MessageFu.warning(txt2)
+        // }
+
+        // 创建FormData对象
+        const fd = new FormData()
+        // 把files添加进FormData对象（‘photo’为后端需要的字段）
+        fd.append('type', 'img')
+        fd.append('dirCode', dirCode)
+        fd.append('file', filesInfo)
+
+        if (params) {
+          Object.keys(params).forEach(key => {
+            fd.append(key, `${params[key]}`)
+          })
+        }
+
+        e.target.value = ''
+
+        try {
+          const res = await API_upFile(fd, myUrl)
+          if (res.code === 0) {
+            MessageFu.success('上传成功!')
+            // 在光标位置插入图片
+            const newTxt = ContentUtils.insertMedias(sectionArr[nowIndexRef.current].txt, [
+              {
+                type: 'IMAGE',
+                url: baseURL + res.data.filePath
+              }
+            ])
+            const arr = [...sectionArr]
+            arr[nowIndexRef.current].txt = newTxt
+            setSectionArr(arr)
+          }
+          fileDomInitialFu()
+        } catch (error) {
+          fileDomInitialFu()
+        }
+      }
+    },
+    [dirCode, myUrl, params, sectionArr]
+  )
+
+  // 让父组件调用的 回显 富文本
+  const ritxtShowFu = useCallback((val: any) => {
+    if (val) {
+      setIsSection(val.isSection || false)
+      if (val.txtArr) {
+        const arr = val.txtArr.map((v: any) => ({
+          ...v,
+          txt: BraftEditor.createEditorState(v.txt)
+        }))
+        setSectionArr(arr)
+      }
+    }
+  }, [])
+
+  // 让父组件调用的返回 富文本信息 和 表单校验 isTxtFlag为ture表示未通过校验
+  const fatherBtnOkFu = useCallback(() => {
+    const arr: any[] = []
+
+    sectionArr.forEach((v, i) => {
+      arr.push({
+        ...v,
+        txt: v.txt.toHTML()
+      })
+    })
+
+    const obj = {
+      isSection: isSection, //是否按章节发布
+      txtArr: arr
+    }
+
+    return { val: obj, flag: isTxtFlag }
+  }, [isSection, isTxtFlag, sectionArr])
+
+  // 可以让父组件调用子组件的方法
+  useImperativeHandle(ref, () => ({
+    ritxtShowFu,
+    fatherBtnOkFu
+  }))
+
+  // 点击新增章节
+  const addSectionFu = useCallback(() => {
+    if (sectionArr.length >= 20) return MessageFu.warning('最多存在20个章节')
+    setSectionArr([
+      ...sectionArr,
+      {
+        id: Date.now(),
+        name: '',
+        txt: BraftEditor.createEditorState(''),
+        fileInfo: { fileName: '', filePath: '' }
+      }
+    ])
+  }, [sectionArr])
+
+  // 章节音频上传成功
+  const upSectionFu = useCallback(
+    (info: ZupAudioType, index: number) => {
+      const arr = [...sectionArr]
+      arr[index].fileInfo = info
+      setSectionArr(arr)
+    },
+    [sectionArr]
+  )
+
+  // 章节音频删除
+  const delSectionFu = useCallback(
+    (index: number) => {
+      // console.log("ppppppppp", index);
+
+      const arr = [...sectionArr]
+      arr[index].fileInfo = { fileName: '', filePath: '' }
+      setSectionArr(arr)
+    },
+    [sectionArr]
+  )
+
+  // 整个章节的删除
+  const delSectionAllFu = useCallback(
+    (id: number) => {
+      setSectionArr(sectionArr.filter(v => v.id !== id))
+    },
+    [sectionArr]
+  )
+
+  // 整个章节的位移
+  const moveSectionFu = useCallback(
+    (index: number, num: number) => {
+      const arr = [...sectionArr]
+      const temp = arr[index]
+      arr[index] = arr[index + num]
+      arr[index + num] = temp
+      setSectionArr(arr)
+    },
+    [sectionArr]
+  )
+
+  // 单个富文本是否输入完整
+  const isOneTxtFlag = useCallback(
+    (name: string, txt: any) => {
+      let flag = false
+      if (!name && isSection) flag = true
+      const txt2 = txt.toText()
+      const txtHtml = txt.toHTML()
+      const txtRes = txt2.replaceAll('\n', '').replaceAll(' ', '')
+      if (!txtRes && !txtHtml.includes('class="media-wrap')) flag = true
+      return flag
+    },
+    [isSection]
+  )
+
+  return (
+    <div className={styles.ZRichTexts}>
+      <input
+        id='upInput'
+        type='file'
+        accept='.png,.jpg,.jpeg'
+        ref={myInput}
+        onChange={e => handeUpPhoto(e)}
+      />
+
+      <div className={classNames('formRightZW', isLook ? 'formRightZWLook' : '')}>
+        {isOne ? (
+          <div></div>
+        ) : (
+          <Checkbox checked={isSection} onChange={e => setIsSection(e.target.checked)}>
+            按章节发布
+          </Checkbox>
+        )}
+
+        {isSection ? (
+          <Button hidden={isLook} type='primary' onClick={addSectionFu}>
+            新增章节
+          </Button>
+        ) : (
+          <div className='formRightZWRR'>
+            {upAudioBtnNone ? null : (
+              <ZupAudio
+                fileInfo={sectionArr[0].fileInfo}
+                upDataFu={info => upSectionFu(info, 0)}
+                delFu={() => delSectionFu(0)}
+                dirCode={dirCode}
+                myUrl={myUrl}
+                isLook={isLook}
+              />
+            )}
+
+            <div hidden={isLook}>
+              <Button
+                onClick={() => {
+                  nowIndexRef.current = 0
+                  myInput.current?.click()
+                }}
+              >
+                上传图片
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className={classNames('txtBox', isLook ? 'txtBoxLook' : '')}>
+        {sectionArr.map((item, index) => (
+          <div
+            className={classNames(
+              'zztxtRow',
+              isOneTxtFlag(item.name, item.txt) && check ? 'zztxtRowErr' : ''
+            )}
+            key={item.id}
+            hidden={!isSection && index > 0}
+          >
+            {/* 顶部 */}
+            <div className='zztxtRow1' hidden={!isSection && index === 0}>
+              <div className='zztxtRow1_1'>
+                <div className='zztxtRow1_1_1'>章节 {index + 1}</div>
+                <div className='zztxtRow1_1_2'>
+                  标题：
+                  <Input
+                    readOnly={isLook}
+                    value={item.name}
+                    placeholder='请输入内容'
+                    maxLength={100}
+                    showCount
+                    style={{ width: 400 }}
+                    onChange={e => {
+                      const arr = [...sectionArr]
+                      arr[index].name = e.target.value.replace(/\s+/g, '')
+                      setSectionArr(arr)
+                    }}
+                  />
+                  &emsp;
+                  <Button
+                    hidden={isLook}
+                    onClick={() => {
+                      nowIndexRef.current = index
+                      myInput.current?.click()
+                    }}
+                  >
+                    上传图片
+                  </Button>
+                </div>
+              </div>
+              <div className='zztxtRow1_2'>
+                <ZupAudio
+                  fileInfo={item.fileInfo}
+                  upDataFu={info => upSectionFu(info, index)}
+                  delFu={() => delSectionFu(index)}
+                  dirCode={dirCode}
+                  myUrl={myUrl}
+                  isLook={isLook}
+                />
+                &emsp;
+                <div
+                  hidden={isLook}
+                  className={classNames('zztxtRow1_2Icon', index === 0 ? 'zztxtRow1_2IconNo' : '')}
+                  onClick={() => moveSectionFu(index, -1)}
+                >
+                  <ArrowUpOutlined title='上移' />
+                </div>
+                &emsp;
+                <div
+                  hidden={isLook}
+                  className={classNames(
+                    'zztxtRow1_2Icon',
+                    index === sectionArr.length - 1 ? 'zztxtRow1_2IconNo' : ''
+                  )}
+                  onClick={() => moveSectionFu(index, 1)}
+                >
+                  <ArrowDownOutlined title='下移' />
+                </div>
+                &emsp;
+                {isLook || sectionArr.length <= 1 ? null : (
+                  <MyPopconfirm
+                    txtK='删除'
+                    onConfirm={() => delSectionAllFu(item.id)}
+                    Dom={<DeleteOutlined title='删除' className='ZTbox2X' />}
+                  />
+                )}
+              </div>
+            </div>
+            {/* 主体 */}
+            <BraftEditor
+              readOnly={isLook}
+              placeholder={isLook ? '（空）' : '请输入内容'}
+              value={item.txt}
+              onChange={e => {
+                const arr = [...sectionArr]
+                arr[index].txt = e
+                setSectionArr(arr)
+              }}
+              imageControls={['remove']}
+            />
+          </div>
+        ))}
+      </div>
+      <div className={classNames('noUpThumb', check && isTxtFlag ? 'noUpThumbAc' : '')}>
+        {`请完整输入${isSection ? '标题/' : ''}正文!`}
+      </div>
+    </div>
+  )
+}
+
+export default forwardRef(ZRichTexts)

src/components/ZupAudio/index.module.scss

@@ -0,0 +1,63 @@
+// 上传无障碍音频的样式
+.ZupAudio {
+  margin-left: 20px;
+  width: 180px;
+  height: 32px;
+  // position: relative;
+  // top: -4px;
+  border: 1px solid #ccc;
+  border-radius: 16px;
+  background-color: #fff;
+
+  :global {
+
+    .ZupAudio1 {
+      cursor: pointer;
+
+      display: flex;
+      justify-content: center;
+
+      .anticon-upload {
+        font-size: 20px;
+      }
+
+      .ZupAudio1_1 {
+        line-height: 15px;
+        color: #aaa5cb;
+        margin-left: 10px;
+
+        &>p {
+          &:nth-of-type(2) {
+            font-size: 10px;
+            // color: red;
+            opacity: .7;
+          }
+        }
+      }
+    }
+
+    .ZupAudio2 {
+      padding: 0 10px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+
+      .anticon {
+        font-size: 18px;
+        cursor: pointer;
+
+      }
+
+      &>div {
+        height: 100%;
+        line-height: 30px;
+        width: calc(100% - 35px);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+
+  }
+}

src/components/ZupAudio/index.tsx

@@ -0,0 +1,140 @@
+import React, { useCallback, useRef } from "react";
+import styles from "./index.module.scss";
+import { MessageFu } from "@/utils/message";
+import { API_upFile } from "@/store/action/layout";
+import { fileDomInitialFu } from "@/utils/domShow";
+import { UploadOutlined, DeleteOutlined, EyeOutlined } from "@ant-design/icons";
+import store from "@/store";
+import MyPopconfirm from "../MyPopconfirm";
+
+export type ZupAudioType = {
+  fileName: string;
+  filePath: string;
+};
+
+type Props = {
+  fileInfo: ZupAudioType;
+  upDataFu: (info: ZupAudioType) => void;
+  delFu: () => void;
+  dirCode: string;
+  myUrl: string;
+  size?: number;
+  isLook?: boolean;
+};
+
+function ZupAudio({
+  size = 10,
+  isLook = false,
+  fileInfo,
+  upDataFu,
+  delFu,
+  dirCode,
+  myUrl,
+}: Props) {
+  // 上传 无障碍音频的 点击
+  const handeUpAudio = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files) {
+        // 拿到files信息
+        const filesInfo = e.target.files[0];
+        // console.log("-----", filesInfo);
+
+        // 校验格式
+        const type = ["audio/mpeg"];
+        if (!type.includes(filesInfo.type)) {
+          e.target.value = "";
+          return MessageFu.warning(`只支持.mp3格式!`);
+        }
+
+        // 校验大小
+        if (filesInfo.size > size * 1024 * 1024) {
+          e.target.value = "";
+          return MessageFu.warning(`最大支持${size}M!`);
+        }
+        // 创建FormData对象
+        const fd = new FormData();
+
+        fd.append("type", "audio");
+        fd.append("dirCode", dirCode);
+        fd.append("file", filesInfo);
+        e.target.value = "";
+
+        try {
+          const res = await API_upFile(fd, myUrl);
+          if (res.code === 0) {
+            MessageFu.success("上传成功!");
+            // console.log(res);
+            upDataFu(res.data);
+          }
+          fileDomInitialFu();
+        } catch (error) {
+          fileDomInitialFu();
+        }
+      }
+    },
+    [dirCode, myUrl, size, upDataFu]
+  );
+
+  // 上传附近的ref
+  const myInput = useRef<HTMLInputElement>(null);
+
+  return (
+    <div
+      className={styles.ZupAudio}
+      id="upInputAudioBox"
+      hidden={isLook && !fileInfo.filePath}
+    >
+      {/* 上传无障碍音频 */}
+      <input
+        id="upInputAudio"
+        type="file"
+        accept=".mp3"
+        onChange={(e) => handeUpAudio(e)}
+        ref={myInput}
+      />
+      {fileInfo.filePath ? (
+        <div className="ZupAudio2">
+          <div title={fileInfo.fileName}>{fileInfo.fileName}</div>
+          <EyeOutlined
+            title="预览"
+            onClick={() =>
+              store.dispatch({
+                type: "layout/lookDom",
+                payload: { src: fileInfo.filePath, type: "audio" },
+              })
+            }
+          />
+
+          {isLook ? null : (
+            <>
+              &nbsp;
+              <MyPopconfirm
+                txtK="删除"
+                onConfirm={delFu}
+                Dom={
+                  <DeleteOutlined
+                    title="删除"
+                    className="ZTbox2X"
+                    rev={undefined}
+                  />
+                }
+              />
+            </>
+          )}
+        </div>
+      ) : (
+        <div className="ZupAudio1" onClick={() => myInput.current?.click()}>
+          <UploadOutlined />
+          <div className="ZupAudio1_1">
+            <p>上传无障碍音频</p>
+            <p>支持{size}MB以下mp3格式</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+const MemoZupAudio = React.memo(ZupAudio);
+
+export default MemoZupAudio;

src/components/ZupOne/index.module.scss

@@ -0,0 +1,101 @@
+.ZupOne {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  :global {
+    .file_upIcon {
+      color: #a6a6a6;
+      border-radius: 3px;
+      cursor: pointer;
+      font-size: 30px;
+      width: 100px;
+      height: 100px;
+      border: 1px dashed #797979;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .file_img {
+      width: 100px;
+      height: 126px;
+      position: relative;
+      margin-top: 10px;
+
+      .file_closeBox {
+        position: absolute;
+        right: -10px;
+        top: -10px;
+        z-index: 99;
+        background-color: rgba(0, 0, 0, 0.8);
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        font-size: 16px;
+        color: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .file_lookBox {
+        width: 100%;
+        background-color: rgba(0, 0, 0, 0.6);
+        color: #fff;
+        display: flex;
+        justify-content: space-around;
+
+        & > a {
+          color: #fff !important;
+        }
+
+        font-size: 16px;
+      }
+    }
+
+    .file_imgYuan {
+      #ImageLazy {
+        border-radius: 50%;
+        overflow: hidden;
+      }
+    }
+
+    .fileInfo {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+
+      .clearCover {
+        margin-left: 20px;
+        cursor: pointer;
+        font-size: 16px;
+      }
+
+      & > a {
+        color: black;
+      }
+    }
+
+    .fileBoxRow_r_tit {
+      height: 46px;
+      margin-top: 5px;
+      font-size: 14px;
+      color: rgb(126, 124, 124);
+    }
+
+    .noUpThumb {
+      position: relative;
+      overflow: hidden;
+      opacity: 0;
+      transition: top 0.2s;
+      color: #ff4d4f;
+      top: -10px;
+    }
+
+    .noUpThumbAc {
+      top: 0;
+      opacity: 1;
+    }
+  }
+}

src/components/ZupOne/index.tsx

@@ -0,0 +1,295 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import ImageLazy from '@/components/ImageLazy'
+import {
+  PlusOutlined,
+  EyeOutlined,
+  CloseOutlined,
+  DownloadOutlined,
+  UploadOutlined
+} from '@ant-design/icons'
+import store from '@/store'
+import { baseURL } from '@/utils/http'
+import classNames from 'classnames'
+import { Button } from 'antd'
+import { MessageFu } from '@/utils/message'
+import { fileDomInitialFu } from '@/utils/domShow'
+import { API_upFile } from '@/store/action/layout'
+import { forwardRef, useImperativeHandle } from 'react'
+import MyPopconfirm from '../MyPopconfirm'
+
+type MyTypeType = 'thumb' | 'video' | 'audio' | 'model' | 'pdf' | 'epub'
+
+// 这个组件 只处理 上传 一张图片或者 视频 音频 模型 pdf 的情况
+
+type Props = {
+  fileCheck: boolean //有没有点击过确定
+  dirCode: string //文件的code码
+  myUrl: string //请求地址
+  format: string[] //上传格式 ["image/jpeg", "image/png"] ["video/mp4"] ,application/pdf
+  formatTxt: string //上传图片提示
+  checkTxt: string
+  upTxt: string
+  myType: MyTypeType
+  isLook?: boolean //是不是查看
+  fromData?: any
+  ref: any //当前自己的ref，给父组件调用
+  isTouXiang?: boolean //圆形头像展示
+}
+
+function ZupOne(
+  {
+    fileCheck,
+    dirCode,
+    myUrl,
+    format,
+    formatTxt,
+    checkTxt,
+    upTxt,
+    myType,
+    isLook = false,
+    fromData,
+    isTouXiang
+  }: Props,
+  ref: any
+) {
+  const [fileUrl, setFileUrl] = useState({
+    fileName: '',
+    filePath: '',
+    thumb: '' //压缩图
+  })
+
+  const myInput = useRef<HTMLInputElement>(null)
+
+  // 上传封面图
+  const handeUpPhoto = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files) {
+        // 拿到files信息
+        const filesInfo = e.target.files[0]
+        // console.log("-----", filesInfo.type);
+
+        // 校验格式
+        const type = format
+
+        if (myType === 'pdf') {
+          if (!filesInfo.type.includes('pdf')) {
+            e.target.value = ''
+            return MessageFu.warning(`只支持${formatTxt}格式!`)
+          }
+        } else if (myType === 'epub') {
+          if (!filesInfo.name.endsWith('.epub')) {
+            e.target.value = ''
+            return MessageFu.warning(`只支持${formatTxt}格式!`)
+          }
+        } else {
+          if (!type.includes(filesInfo.type)) {
+            e.target.value = ''
+            return MessageFu.warning(`只支持${formatTxt}格式!`)
+          }
+        }
+
+        // 校验大小
+        // if (filesInfo.size > size * 1024 * 1024) {
+        //   e.target.value = ''
+        //   return MessageFu.warning(`最大支持${size}M!`)
+        // }
+        // 创建FormData对象
+        const fd = new FormData()
+        // 把files添加进FormData对象（‘photo’为后端需要的字段）
+        let myTypeRes: string = myType
+        if (['pdf', 'epub'].includes(myTypeRes)) myTypeRes = 'doc'
+        fd.append('type', myTypeRes === 'thumb' ? 'img' : myTypeRes)
+        fd.append('dirCode', dirCode)
+        fd.append('file', filesInfo)
+
+        if (fromData) {
+          for (const k in fromData) {
+            if (fromData[k]) fd.append(k, fromData[k])
+          }
+        }
+
+        // 开启压缩图片
+        fd.append('isCompress', 'true')
+
+        e.target.value = ''
+
+        try {
+          const res = await API_upFile(fd, myUrl)
+          if (res.code === 0) {
+            MessageFu.success('上传成功!')
+            setFileUrl(res.data)
+          }
+          fileDomInitialFu()
+        } catch (error) {
+          fileDomInitialFu()
+        }
+      }
+    },
+    [dirCode, format, formatTxt, fromData, myType, myUrl]
+  )
+
+  // 让父组件调用的 回显 附件 地址
+  const setFileComFileFu = useCallback(
+    (valObj: { fileName: string; filePath: string; thumb: string }) => {
+      setFileUrl(valObj)
+    },
+    []
+  )
+
+  // 让父组件调用的返回 附件 名字和路径
+  const fileComFileResFu = useCallback(() => {
+    return fileUrl
+  }, [fileUrl])
+
+  // 可以让父组件调用子组件的方法
+  useImperativeHandle(ref, () => ({
+    setFileComFileFu,
+    fileComFileResFu
+  }))
+
+  const acceptRes = useMemo(() => {
+    let accept = '.png,.jpg,.jpeg'
+    if (myType === 'video') accept = '.mp4'
+    else if (myType === 'audio') accept = '.mp3'
+    else if (myType === 'model') accept = '.4dage'
+    else if (myType === 'pdf') accept = '.pdf'
+    else if (myType === 'epub') accept = '.epub'
+    return accept
+  }, [myType])
+
+  // 点击 预览（除了图片）
+  const lookFileNoImgFu = useCallback(
+    (type: MyTypeType) => {
+      if (type === 'pdf' || type === 'thumb') {
+        // 新窗口打开
+        window.open(baseURL + fileUrl.filePath)
+      } else if (type !== 'epub') {
+        store.dispatch({
+          type: 'layout/lookDom',
+          payload: { src: fileUrl.filePath, type }
+        })
+      }
+
+      // if (type === "pdf") {
+      // } else {
+      // }
+    },
+    [fileUrl.filePath]
+  )
+
+  return (
+    <div className={styles.ZupOne}>
+      <input
+        id='upInput'
+        type='file'
+        accept={acceptRes}
+        ref={myInput}
+        onChange={e => handeUpPhoto(e)}
+      />
+      {myType === 'thumb' ? (
+        <div
+          hidden={fileUrl.filePath !== ''}
+          className='file_upIcon'
+          onClick={() => myInput.current?.click()}
+        >
+          <PlusOutlined rev={undefined} />
+        </div>
+      ) : (
+        <Button
+          hidden={fileUrl.filePath !== ''}
+          onClick={() => myInput.current?.click()}
+          icon={<UploadOutlined rev={undefined} />}
+        >
+          上传
+        </Button>
+      )}
+
+      {/* 为图片的情况-------------- */}
+      {myType === 'thumb' ? (
+        <div
+          className={classNames('file_img', isTouXiang ? 'file_imgYuan' : '')}
+          hidden={fileUrl.filePath === ''}
+        >
+          {fileUrl ? (
+            <ImageLazy
+              width={100}
+              height={100}
+              srcBig={fileUrl.filePath}
+              src={fileUrl.thumb}
+              noLook
+            />
+          ) : null}
+
+          {/* 删除 */}
+          <div className='file_closeBox' hidden={isLook}>
+            <MyPopconfirm
+              txtK='删除'
+              onConfirm={() => setFileUrl({ fileName: '', filePath: '', thumb: '' })}
+              Dom={<CloseOutlined rev={undefined} />}
+            />
+          </div>
+
+          {/* 预览 下载 */}
+          <div className='file_lookBox' hidden={isTouXiang}>
+            <EyeOutlined
+              onClick={() =>
+                store.dispatch({
+                  type: 'layout/lookBigImg',
+                  payload: { url: baseURL + fileUrl.filePath, show: true }
+                })
+              }
+              rev={undefined}
+            />
+            <a href={baseURL + fileUrl.filePath} download target='_blank' rel='noreferrer'>
+              <DownloadOutlined rev={undefined} />
+            </a>
+          </div>
+        </div>
+      ) : fileUrl.filePath ? (
+        <div className='fileInfo'>
+          <div className='upSuccTxt'>{fileUrl.fileName}</div>
+          {/* 视频预览 */}
+          <div
+            className='clearCover'
+            hidden={!fileUrl.filePath || myType === 'epub'}
+            onClick={() => lookFileNoImgFu(myType)}
+          >
+            <EyeOutlined rev={undefined} />
+          </div>
+          {/* 视频下载 */}
+          <a
+            href={baseURL + fileUrl.filePath}
+            download
+            target='_blank'
+            className='clearCover'
+            rel='noreferrer'
+          >
+            <DownloadOutlined rev={undefined} />
+          </a>
+          {/* 视频删除 */}
+
+          {isLook ? null : (
+            <MyPopconfirm
+              txtK='删除'
+              onConfirm={() => setFileUrl({ fileName: '', filePath: '', thumb: '' })}
+              Dom={<CloseOutlined className='clearCover' rev={undefined} />}
+            />
+          )}
+        </div>
+      ) : null}
+
+      <div className='fileBoxRow_r_tit' hidden={isLook}>
+        格式要求：支持{formatTxt}格式。{upTxt}
+        <br />
+        <div
+          className={classNames('noUpThumb', !fileUrl.filePath && fileCheck ? 'noUpThumbAc' : '')}
+        >
+          {checkTxt}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default forwardRef(ZupOne)

src/components/ZupTypes/index.module.scss

@@ -0,0 +1,216 @@
+.ZupTypes {
+  padding-top: 3px;
+
+  :global {
+    .ZTboxTit {
+      margin-left: 10px;
+      font-size: 14px;
+      color: rgb(126, 124, 124);
+      position: relative;
+      top: 4px;
+    }
+
+    .ZTbox {
+      margin-top: 20px;
+      display: flex;
+
+      .ZTbox1 {
+        position: relative;
+        top: 3px;
+        width: 60px;
+
+        & > span {
+          color: #ff4d4f;
+        }
+      }
+
+      .ZTbox2 {
+        width: calc(100% - 60px);
+        margin-left: 5px;
+        display: flex;
+        font-size: 16px;
+        align-items: center;
+
+        .ZTbox2Look {
+          margin-left: 20px;
+          cursor: pointer;
+        }
+
+        .ZTbox2Down {
+          margin-left: 15px;
+          color: black;
+        }
+
+        .ZTbox2X {
+          cursor: pointer;
+          margin-left: 15px;
+        }
+      }
+    }
+
+    // 图片
+    .ZTboxImgMain {
+      margin-top: 20px;
+
+      .ZTboxImgBox {
+        display: flex;
+
+        .ZTbox1 {
+          position: relative;
+          top: 3px;
+          width: 60px;
+
+          & > span {
+            color: #ff4d4f;
+          }
+        }
+
+        .ZTbox1Img {
+          width: calc(100% - 60px);
+          display: flex;
+          flex-wrap: wrap;
+
+          .ZTbox1ImgIcon {
+            margin-right: 20px;
+            color: #a6a6a6;
+            border-radius: 3px;
+            cursor: pointer;
+            font-size: 30px;
+            width: 100px;
+            height: 100px;
+            border: 1px dashed #797979;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+
+          .ZTbox1ImgRow {
+            // content-visibility:auto;
+            margin-right: 20px;
+            width: 100px;
+            height: 125px;
+            position: relative;
+            margin-bottom: 20px;
+            cursor: move;
+            position: relative;
+
+            // 第一张作为封面
+            .ZTbox1ImgRowCover {
+              font-size: 12px;
+              line-height: 22px;
+              position: absolute;
+              left: 0;
+              top: 0;
+              width: 100%;
+              height: 24px;
+              background-color: rgba(0, 0, 0, 0.8);
+              color: #fff;
+              text-align: center;
+              pointer-events: none;
+            }
+
+            // 修改图片名字
+            .ZTbox1ImgRowName {
+              font-size: 12px;
+              line-height: 22px;
+              position: absolute;
+              left: 0;
+              bottom: 25px;
+              width: 100%;
+              cursor: pointer;
+              height: 24px;
+              padding: 0 3px;
+              background-color: rgba(0, 0, 0, 0.8);
+              color: #fff;
+              text-align: center;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+
+              &:hover {
+                color: var(--themeColor);
+              }
+            }
+
+            .ZTbox1ImgRowIcon {
+              width: 100%;
+              background-color: rgba(0, 0, 0, 0.6);
+              color: #fff;
+              display: flex;
+              justify-content: space-around;
+              font-size: 16px;
+
+              a {
+                color: #fff !important;
+              }
+            }
+
+            .ZTbox1ImgRowX {
+              cursor: pointer;
+              position: absolute;
+              right: -10px;
+              top: -10px;
+              z-index: 99;
+              background-color: rgba(0, 0, 0, 0.8);
+              width: 20px;
+              height: 20px;
+              border-radius: 50%;
+              font-size: 16px;
+              color: #fff;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            }
+          }
+        }
+      }
+    }
+
+    .ZcheckTxt {
+      position: relative;
+      overflow: hidden;
+      opacity: 0;
+      transition: top 0.2s;
+      color: #ff4d4f;
+      top: -10px;
+      margin-bottom: 10px;
+    }
+
+    .ZcheckTxtAc {
+      top: 2px;
+      opacity: 1;
+    }
+  }
+}
+
+// 查看情况
+.ZupTypesLook {
+  :global {
+    .ZTbox1ImgRowName {
+      cursor: default !important;
+      color: #fff !important;
+    }
+
+    .ZTbox1ImgRow {
+      cursor: default !important;
+    }
+
+    .ZTbox1ImgRowX {
+      display: none !important;
+    }
+  }
+}
+
+// 修改图片名字的弹窗
+.ZupTypesMo {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+
+    .ZupTypesMoBtn {
+      margin-top: 24px;
+      text-align: center;
+    }
+  }
+}

src/components/ZupTypes/index.tsx

@@ -0,0 +1,618 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import { Button, Checkbox, Input, Modal, Radio } from 'antd'
+import { forwardRef, useImperativeHandle } from 'react'
+import { baseURL } from '@/utils/http'
+import {
+  PlusOutlined,
+  CloseCircleOutlined,
+  UploadOutlined,
+  CloseOutlined,
+  DownloadOutlined,
+  EyeOutlined
+} from '@ant-design/icons'
+import { MessageFu } from '@/utils/message'
+import { API_upFile } from '@/store/action/layout'
+import { fileDomInitialFu } from '@/utils/domShow'
+import store from '@/store'
+import ImageLazy from '../ImageLazy'
+import classNames from 'classnames'
+import MyPopconfirm from '../MyPopconfirm'
+// import { A2_APIchangeImgName } from "@/store/action/A2exhibition";
+
+const imgSize = Infinity
+
+export type FileListType = {
+  fileName: string
+  thumb?: string
+  filePath: string
+  id: number
+  type: 'model' | 'img' | 'audio' | 'video'
+  imgName: string
+  creatorId: number
+}
+
+type Props = {
+  ref: any //当前自己的ref，给父组件调用
+  selecFlag: string //筛选的字符串 模型/图片/音频/视频
+  fileCheck: boolean //有没有点击过确定
+  dirCode: string //文件的code码
+  myUrl: string //请求地址
+  isEdit: boolean //是否是编辑
+  isLook?: boolean //是不是查看
+  modelSize?: number //模型文件大小限制
+  imgLength?: number //图片数量限制
+  audioSize?: number //音频大小限制
+  videoSize?: number //视频大小限制
+  videoTit?: string //视频上传的提示语
+  isTypeShow?: boolean //默认就选中
+  isUpName?: boolean //是否能修改图片名字
+  lastImgTxt?: string //加载最后面的上传提示
+  oneIsCover?: boolean //是否将第一张作为封面
+  isOneType?: boolean //是否类型为单选
+  fromData?: any
+}
+
+function ZupTypes(
+  {
+    selecFlag,
+    fileCheck,
+    dirCode,
+    myUrl,
+    isEdit,
+    isLook = false,
+    modelSize = 500,
+    imgLength = 9,
+    audioSize = 10,
+    videoSize = 500,
+    videoTit = '',
+    isTypeShow = false,
+    isUpName = false,
+    lastImgTxt = '',
+    oneIsCover = false,
+    isOneType = false,
+    fromData
+  }: Props,
+  ref: any
+) {
+  // 筛选
+  const [typeCheck, setTypeCheck] = useState<string[]>([])
+
+  // 筛选数组
+  const typeCheckArr = useMemo(() => {
+    const arr = [
+      { label: '图片', value: 'img' },
+      { label: '模型', value: 'model' },
+      { label: '音频', value: 'audio' },
+      { label: '视频', value: 'video' }
+    ]
+
+    const arrRes = arr.filter(v => selecFlag.includes(v.label))
+    if (isTypeShow && !isEdit) {
+      setTypeCheck([arrRes[0].value])
+      // 默认就选中
+    }
+
+    return arrRes
+  }, [isEdit, isTypeShow, selecFlag])
+
+  // 上传附件的信息
+  const [fileList, setFileList] = useState({
+    model: {} as FileListType,
+    img: [] as FileListType[],
+    audio: {} as FileListType,
+    video: {} as FileListType
+  })
+
+  // 附件信息的校验，不满足返回 true
+  const fileCheckFu = useMemo(() => {
+    let flag = false
+    if (typeCheck.length === 0) flag = true
+    if (typeCheck.includes('model') && !fileList.model.id) flag = true
+    if (typeCheck.includes('img') && fileList.img.length === 0) flag = true
+    if (typeCheck.includes('audio') && !fileList.audio.id) flag = true
+    if (typeCheck.includes('video') && !fileList.video.id) flag = true
+    return flag
+  }, [fileList, typeCheck])
+
+  // 点击上传附件按钮
+  const myInput = useRef<HTMLInputElement>(null)
+
+  const [fileOneType, setFileOneType] = useState('')
+
+  useEffect(() => {
+    if (fileOneType) myInput.current?.click()
+  }, [fileOneType])
+
+  const upFileFu = useCallback((type: string) => {
+    setFileOneType('')
+    window.setTimeout(() => {
+      setFileOneType(type)
+    }, 100)
+  }, [])
+
+  // 上传附件的处理函数
+  const handeUpPhoto2 = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files) {
+        // 拿到files信息
+        const filesInfo = e.target.files[0]
+
+        let anType = ['image/jpeg', 'image/png']
+        let anTit1 = '只支持png、jpg格式!'
+        let anTit2 = `最大支持${imgSize}M!`
+        let anSize = imgSize * 1024 * 1024
+
+        if (fileOneType === 'audio') {
+          anType = ['audio/mpeg']
+          anTit1 = '只支持mp3格式!'
+          anTit2 = `最大支持${audioSize}M!`
+          anSize = audioSize * 1024 * 1024
+        } else if (fileOneType === 'video') {
+          anType = ['video/mp4']
+          anTit1 = '只支持mp4格式!'
+          anTit2 = `最大支持${videoSize}M!`
+          anSize = videoSize * 1024 * 1024
+        } else if (fileOneType === 'model') {
+          anType = ['']
+          anTit1 = '只支持4dage格式!'
+          anTit2 = `最大支持${modelSize}M!`
+          anSize = modelSize * 1024 * 1024
+        }
+
+        // 校验格式
+        if (fileOneType !== 'model') {
+          if (!anType.includes(filesInfo.type)) {
+            e.target.value = ''
+            return MessageFu.warning(anTit1)
+          }
+        } else {
+          if (!filesInfo.name.includes('.4dage')) {
+            e.target.value = ''
+            return MessageFu.warning(anTit1)
+          }
+        }
+
+        // 校验大小
+        if (filesInfo.size > anSize) {
+          e.target.value = ''
+          return MessageFu.warning(anTit2)
+        }
+        // 创建FormData对象
+        const fd = new FormData()
+        // 把files添加进FormData对象（‘photo’为后端需要的字段）
+        fd.append('type', fileOneType)
+        fd.append('dirCode', dirCode)
+        fd.append('isDb', 'true')
+
+        //初始图片 fileName为：未命名
+        if (isUpName) {
+          fd.append('isDefaultName', 'false')
+        }
+
+        fd.append('file', filesInfo)
+
+        if (fileOneType === 'img') {
+          // 开启压缩图片
+          fd.append('isCompress', 'true')
+        }
+
+        if (fromData) {
+          for (const k in fromData) {
+            if (fromData[k]) fd.append(k, fromData[k])
+          }
+        }
+
+        e.target.value = ''
+
+        const res = await API_upFile(fd, myUrl)
+
+        try {
+          if (res.code === 0) {
+            MessageFu.success('上传成功!')
+            if (fileOneType === 'img')
+              setFileList({
+                ...fileList,
+                img: [...fileList.img, { ...res.data, imgName: '未命名' }]
+              })
+            else setFileList({ ...fileList, [fileOneType]: res.data })
+          }
+          fileDomInitialFu()
+        } catch (error) {
+          fileDomInitialFu()
+        }
+      }
+    },
+    [audioSize, dirCode, fileList, fileOneType, fromData, isUpName, modelSize, myUrl, videoSize]
+  )
+
+  // 附件图片的拖动
+  const [dragImg, setDragImg] = useState<any>(null)
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent<HTMLDivElement>, item: FileListType) => {
+      if (isLook) return
+      e.dataTransfer.dropEffect = 'move'
+    },
+    [isLook]
+  )
+
+  const handleDragEnter = useCallback(
+    (e: React.DragEvent<HTMLDivElement>, item: FileListType) => {
+      if (isLook) return
+
+      e.dataTransfer.effectAllowed = 'move'
+      if (item === dragImg) return
+      const newItems = [...fileList.img] //拷贝一份数据进行交换操作。
+      const src = newItems.indexOf(dragImg) //获取数组下标
+      const dst = newItems.indexOf(item)
+      newItems.splice(dst, 0, ...newItems.splice(src, 1)) //交换位置
+      setFileList({ ...fileList, img: newItems })
+    },
+    [dragImg, fileList, isLook]
+  )
+
+  // 删除某一张图片
+  const delImgListFu = useCallback(
+    (id: number) => {
+      const newItems = fileList.img.filter(v => v.id !== id)
+      setFileList({ ...fileList, img: newItems })
+    },
+    [fileList]
+  )
+
+  // 模型 音频 视频 的 dom
+  const resOneDivDom = useCallback(
+    (type: 'model' | 'audio' | 'video') => {
+      const dom = (
+        <div className='ZTbox' hidden={!typeCheck.includes(type)}>
+          <div className='ZTbox1' hidden={isOneType}>
+            <span> </span>
+            {type === 'model' ? '模型' : type === 'audio' ? '音频' : '视频'}：
+          </div>
+          {fileList[type].id ? (
+            <div className='ZTbox2'>
+              <div className='ZTbox2Name'>{fileList[type].fileName}</div>
+
+              <div
+                className='ZTbox2Look'
+                onClick={() =>
+                  store.dispatch({
+                    type: 'layout/lookDom',
+                    payload: { src: fileList[type].filePath, type }
+                  })
+                }
+              >
+                <EyeOutlined rev={undefined} />
+              </div>
+
+              <a
+                href={baseURL + fileList[type].filePath}
+                download
+                target='_blank'
+                className='ZTbox2Down'
+                rel='noreferrer'
+              >
+                <DownloadOutlined rev={undefined} />
+              </a>
+
+              <MyPopconfirm
+                txtK='删除'
+                onConfirm={() => setFileList({ ...fileList, [type]: {} as FileListType })}
+                Dom={<CloseCircleOutlined className='ZTbox2X' rev={undefined} />}
+              />
+            </div>
+          ) : (
+            <>
+              <Button onClick={() => upFileFu(type)} icon={<UploadOutlined rev={undefined} />}>
+                上传
+              </Button>
+
+              <div className='ZTboxTit'>
+                {type === 'model'
+                  ? `仅支持4dage格式的模型文件，大小不能超过${modelSize}M。`
+                  : type === 'audio'
+                  ? `仅支持mp3格式的音频文件，大小不得超过${audioSize}MB。`
+                  : `仅支持mp4格式的视频文件，大小不得超过${videoSize}MB。${videoTit}`}
+              </div>
+            </>
+          )}
+        </div>
+      )
+      return dom
+    },
+    [audioSize, fileList, isOneType, modelSize, typeCheck, upFileFu, videoSize, videoTit]
+  )
+
+  // ------------让父组件调用的 回显
+  const setFileComFileFu = useCallback((info: any) => {
+    if (info.type) setTypeCheck(info.type.split(','))
+
+    if (info.fileList && info.fileList.length) {
+      const data: FileListType[] = info.fileList
+      const obj = {
+        model: {} as FileListType,
+        img: [] as FileListType[],
+        audio: {} as FileListType,
+        video: {} as FileListType
+      }
+
+      data.forEach(v => {
+        if (v.type === 'img') {
+          obj.img.push({ ...v, imgName: v.fileName })
+        } else obj[v.type!] = v
+      })
+      setFileList(obj)
+    }
+  }, [])
+
+  // --------------让父组件调用的返回 附件 信息
+  const fileComFileResFu = useCallback(() => {
+    let coverUrl = ''
+    let coverPcUrl = ''
+    const fileIds = []
+    if (fileList.model.id && typeCheck.includes('model')) fileIds.push(fileList.model.id)
+    if (fileList.audio.id && typeCheck.includes('audio')) fileIds.push(fileList.audio.id)
+    if (fileList.video.id && typeCheck.includes('video')) fileIds.push(fileList.video.id)
+    if (typeCheck.includes('img')) {
+      fileList.img.forEach((v, i) => {
+        if (v.id) {
+          fileIds.push(v.id)
+          if (oneIsCover && i === 0) {
+            // 返回 第一张图的url 作为封面
+            coverUrl = v.thumb || v.filePath
+            coverPcUrl = v.filePath
+          }
+        }
+      })
+    }
+    return {
+      sonType: typeCheck,
+      sonFileIds: fileIds,
+      sonIsOk: fileCheckFu,
+      coverUrl,
+      coverPcUrl
+    }
+  }, [
+    fileCheckFu,
+    fileList.audio.id,
+    fileList.img,
+    fileList.model.id,
+    fileList.video.id,
+    oneIsCover,
+    typeCheck
+  ])
+
+  // 可以让父组件调用子组件的方法
+  useImperativeHandle(ref, () => ({
+    setFileComFileFu,
+    fileComFileResFu
+  }))
+
+  // 修改图片名称
+  const [isNameChange, setIsNameChange] = useState({
+    id: 0,
+    oldName: '',
+    newName: ''
+  })
+
+  // 关闭弹窗
+  const isNameChangeXFu = useCallback(() => {
+    setIsNameChange({ id: 0, oldName: '', newName: '' })
+  }, [])
+
+  // 点击图片名字-出来弹窗
+  const isNameChangeFu = useCallback(
+    (item: FileListType) => {
+      if (isLook) return
+      setIsNameChange({ id: item.id, oldName: item.imgName, newName: '' })
+    },
+    [isLook]
+  )
+
+  // 修改完这点击 确定修改
+  const isNameChangeOkFu = useCallback(async () => {
+    // if (!isNameChange.newName) return MessageFu.warning("图片名不能为空!");
+    // const res = await A2_APIchangeImgName({
+    //   id: isNameChange.id,
+    //   fileName: isNameChange.newName,
+    // });
+    // if (res.code === 0) {
+    //   MessageFu.success("修改图片名成功!");
+    //   setFileList({
+    //     ...fileList,
+    //     img: fileList.img.map((v) => ({
+    //       ...v,
+    //       imgName: v.id === isNameChange.id ? isNameChange.newName : v.imgName,
+    //     })),
+    //   });
+    //   isNameChangeXFu();
+    // }
+  }, [])
+  //
+
+  return (
+    <div className={classNames(styles.ZupTypes, isLook ? styles.ZupTypesLook : '')}>
+      <input
+        id='upInput'
+        type='file'
+        accept={
+          fileOneType === 'img'
+            ? '.png,.jpg,.jpeg'
+            : fileOneType === 'audio'
+            ? '.mp3'
+            : fileOneType === 'model'
+            ? '.4dage'
+            : '.mp4'
+        }
+        ref={myInput}
+        onChange={e => handeUpPhoto2(e)}
+      />
+      <div hidden={isOneType}>
+        {isOneType ? (
+          <>
+            {typeCheckArr.map(v => (
+              <Radio
+                key={v.label}
+                onClick={() => setTypeCheck([v.value])}
+                checked={v.value === typeCheck[0]}
+              >
+                {v.label}
+              </Radio>
+            ))}
+          </>
+        ) : (
+          <Checkbox.Group
+            options={typeCheckArr}
+            value={typeCheck}
+            onChange={e => setTypeCheck(e as string[])}
+          />
+        )}
+      </div>
+
+      {/* -----------模型 */}
+      {resOneDivDom('model')}
+
+      {/* -----------图片 */}
+      <div className='ZTboxImgMain' hidden={!typeCheck.includes('img')}>
+        <div className='ZTboxImgBox'>
+          <div className='ZTbox1' hidden={isOneType}>
+            <span> </span> 图片：
+          </div>
+
+          <div className='ZTbox1Img'>
+            <div
+              hidden={(!!fileList.img.length && fileList.img.length >= imgLength) || isLook}
+              className='ZTbox1ImgIcon'
+              onClick={() => upFileFu('img')}
+            >
+              <PlusOutlined rev={undefined} />
+            </div>
+            {fileList.img.map((v, i) => (
+              <div
+                className='ZTbox1ImgRow'
+                key={v.id}
+                draggable='true'
+                onDragStart={() => setDragImg(v)}
+                onDragOver={e => handleDragOver(e, v)}
+                onDragEnter={e => handleDragEnter(e, v)}
+                onDragEnd={() => setDragImg(null)}
+              >
+                {v.thumb || v.filePath ? (
+                  <ImageLazy noLook={true} width={100} height={100} src={v.thumb || v.filePath} />
+                ) : null}
+
+                {oneIsCover && i === 0 ? <div className='ZTbox1ImgRowCover'>封面</div> : null}
+
+                {/* 修改图片名字 */}
+                {isUpName ? (
+                  <div
+                    title={v.imgName}
+                    className='ZTbox1ImgRowName'
+                    onClick={() => isNameChangeFu(v)}
+                  >
+                    {v.imgName}
+                  </div>
+                ) : null}
+
+                <div className='ZTbox1ImgRowIcon'>
+                  <EyeOutlined
+                    onClick={() =>
+                      store.dispatch({
+                        type: 'layout/lookBigImg',
+                        payload: {
+                          url: baseURL + v.filePath,
+                          show: true
+                        }
+                      })
+                    }
+                    rev={undefined}
+                  />
+                  <a href={baseURL + v.filePath} download target='_blank' rel='noreferrer'>
+                    <DownloadOutlined rev={undefined} />
+                  </a>
+                </div>
+
+                <MyPopconfirm
+                  txtK='删除'
+                  onConfirm={() => delImgListFu(v.id!)}
+                  Dom={<CloseOutlined className='ZTbox1ImgRowX' rev={undefined} />}
+                />
+              </div>
+            ))}
+            {fileList.img.length === 0 && oneIsCover && isLook ? (
+              <span style={{ position: 'relative', top: -2 }}>（空）</span>
+            ) : null}
+          </div>
+        </div>
+
+        <div className='ZTboxTit' hidden={isLook}>
+          {fileList.img.length && fileList.img.length >= 2 ? (
+            <>
+              按住鼠标可拖动图片调整顺序。
+              <br />
+            </>
+          ) : null}
+          支持png、jpg的图片格式；最多支持{imgLength}张。
+          {lastImgTxt}
+        </div>
+      </div>
+
+      {/* -----------音频 */}
+      {resOneDivDom('audio')}
+
+      {/* -----------视频 */}
+      {resOneDivDom('video')}
+
+      {/* 最后的提示 */}
+      <div className={classNames('ZcheckTxt', fileCheck && fileCheckFu ? 'ZcheckTxtAc' : '')}>
+        请上传附件!
+      </div>
+
+      {/* 点击修改名字出来的弹窗 */}
+      {isNameChange.id ? (
+        <Modal
+          wrapClassName={styles.ZupTypesMo}
+          open={true}
+          title='修改展品图片名称'
+          footer={
+            [] // 设置footer为空，去掉 取消 确定默认按钮
+          }
+        >
+          <br />
+          <div className='ZupTypesMoRow'>
+            <strong>当前名：</strong>
+            {isNameChange.oldName}
+          </div>
+          <div className='ZupTypesMoRow'>
+            <br />
+            <strong>修改为：</strong>
+            <Input
+              style={{ width: 400 }}
+              placeholder='请输入图片名'
+              maxLength={50}
+              showCount
+              value={isNameChange.newName}
+              onChange={e => {
+                setIsNameChange({
+                  ...isNameChange,
+                  newName: e.target.value.replace(/\s+/g, '')
+                })
+              }}
+            />
+          </div>
+
+          <div className='ZupTypesMoBtn'>
+            <Button onClick={isNameChangeXFu}>取消</Button>
+            &emsp;
+            <Button type='primary' onClick={isNameChangeOkFu}>
+              修改
+            </Button>
+          </div>
+        </Modal>
+      ) : null}
+    </div>
+  )
+}
+
+export default forwardRef(ZupTypes)

src/index.tsx

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

src/pages/AAnew/AA1info/index.module.scss

@@ -0,0 +1,148 @@
+.AA1info {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  background-color: #fcf9f5;
+  border-radius: 10px;
+  padding: 20px;
+  :global {
+    .AA1Itop {
+      display: flex;
+      justify-content: space-between;
+      .AA1Itop1 {
+        color: var(--themeColor);
+        border-color: var(--themeColor);
+        padding: 0px 15px;
+        line-height: 40px;
+      }
+      .AA1Itop2 {
+        display: flex;
+        & > div {
+          margin-left: 15px;
+        }
+      }
+    }
+
+    .AA1IMain {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 20px;
+      height: calc(100% - 55px);
+
+      .AA1ITit {
+        font-weight: 700;
+        font-size: 18px;
+        color: var(--themeColor);
+        margin-bottom: 8px;
+      }
+
+      .AA1Ill {
+        width: 600px;
+        iframe {
+          border-radius: 10px;
+          overflow: hidden;
+          width: 100%;
+          height: 600px;
+        }
+
+        .AA1Illtxt {
+          display: flex;
+          margin-top: 3px;
+          border-bottom: 1px solid #ccc;
+          & > div {
+            width: 120px;
+            text-align: center;
+            background-color: #eaeaea;
+
+            padding: 8px 0;
+          }
+          & > p {
+            padding: 8px 0 8px 10px;
+            width: calc(100% - 120px);
+          }
+        }
+      }
+      .AA1Irr {
+        width: calc(100% - 630px);
+        margin-left: 30px;
+        .AA1IrrBox {
+          width: 100%;
+          height: calc(100% - 34px);
+          overflow-y: auto;
+          .AA1IrrNull {
+            width: 70%;
+            height: 70%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            letter-spacing: 4px;
+            font-size: 20px;
+          }
+
+          .AA1IrrRow {
+            border: 1px solid #ccc;
+            padding: 15px 10px;
+            margin-bottom: 15px;
+            .AA1IrrRow1 {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              & > div {
+                display: flex;
+                align-items: center;
+                .AA1IrrRow1_1 {
+                  font-weight: 700;
+                }
+              }
+            }
+
+            .AA1IrrRow2 {
+              margin-top: 10px;
+              display: flex;
+              .AA1IrrRow2ll {
+                width: 330px;
+                .AA1IrrRow2llRow {
+                  display: flex;
+                  margin-top: 3px;
+                  border-bottom: 1px solid #ccc;
+                  & > div {
+                    width: 120px;
+                    text-align: center;
+                    background-color: #eaeaea;
+
+                    padding: 8px 0;
+                  }
+                  & > p {
+                    padding: 8px 0 8px 10px;
+                    width: calc(100% - 120px);
+                  }
+                }
+              }
+              .AA1IrrRow2rr {
+                padding-top: 20px;
+                margin-left: 10px;
+                width: calc(100% - 330px);
+                display: flex;
+                flex-wrap: wrap;
+                & > div {
+                  min-width: 150px;
+                  max-width: 320px;
+                  padding: 0 5px;
+                  margin-bottom: 5px;
+                  flex: 1;
+                  #ImageLazy {
+                    border-radius: 5px;
+                    overflow: hidden;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/pages/AAnew/AA1info/index.tsx

@@ -0,0 +1,170 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import styles from './index.module.scss'
+import { Radio, Tag } from 'antd'
+import { MessageFu } from '@/utils/message'
+import { AA1_APIgetInfo } from '@/store/action/AAnew/AA1onePu'
+import { AA1infoType, AAdomArr } from '../AA1onePu/data'
+import ImageLazy from '@/components/ImageLazy'
+import AAlook from '../AAlook'
+import AAbtn from '../AAbtn'
+import { GoodsType } from '../data'
+
+type Props = {
+  sId: number
+  closeFu: () => void
+  delFu: (id: number) => void
+}
+
+function AA1info({ sId, closeFu, delFu }: Props) {
+  const [info, setInfo] = useState({} as AA1infoType)
+
+  const getInfoFu = useCallback(async () => {
+    const res = await AA1_APIgetInfo(sId)
+    if (res.code === 0) {
+      setInfo(res.data)
+    }
+  }, [sId])
+
+  useEffect(() => {
+    getInfoFu()
+  }, [getInfoFu])
+
+  const modelSrc = useMemo(() => {
+    let url = ''
+    if (info.fileList && info.fileList.length) {
+      const obj = info.fileList.find(v => v.name.includes('.usdz'))
+      if (obj) url = obj.url
+    }
+    return url
+  }, [info.fileList])
+
+  const goodsList = useMemo(() => {
+    return info.goodsList || []
+  }, [info.goodsList])
+
+  const [checkId, setCheckId] = useState(0)
+
+  const rightTxt = useMemo(() => {
+    let arr: any = [{ isWai: '名称', key: 'name' }, ...AAdomArr.filter(v => v.isWai)]
+    return arr
+  }, [])
+
+  // 查看藏品
+  const [lookInfo, setLookInfo] = useState({} as GoodsType)
+
+  return (
+    <div className={styles.AA1info}>
+      <div className='AA1Itop'>
+        <Tag className='AA1Itop1'>待处理</Tag>
+        <div className='AA1Itop2'>
+          <AAbtn txt={1} onClick={() => MessageFu.warning('功能开发中')} tit='关联藏品' />
+          {/* <Button type='primary' onClick={() => MessageFu.warning('功能开发中')}>
+            关联藏品
+          </Button> */}
+          <AAbtn
+            txt={3}
+            onClick={() => {
+              closeFu()
+              delFu(sId)
+            }}
+          />
+          <AAbtn txt={2} onClick={closeFu} tit='返回' />
+        </div>
+      </div>
+
+      <div className='AA1IMain'>
+        {info.id ? (
+          <>
+            <div className='AA1Ill'>
+              <div className='AA1ITit'>文物数字身份证</div>
+              <iframe
+                src={`./usdzModel/index.html?m=${modelSrc}`}
+                frameBorder='0'
+                title='model'
+              ></iframe>
+              <div className='AA1Illtxt'>
+                <div>上传用户</div>
+                <p>{info.uploader || '归藏APP'}</p>
+              </div>
+              <div className='AA1Illtxt'>
+                <div>上传时间</div>
+                <p>{info.createTime || '-'}</p>
+              </div>
+              <div className='AA1Illtxt'>
+                <div>计算完成时间</div>
+                <p>{info.updateTime || '-'}</p>
+              </div>
+            </div>
+            <div className='AA1Irr'>
+              <div className='AA1ITit'>AI识别匹配数据</div>
+              <div className='AA1IrrBox'>
+                {goodsList.length === 0 ? (
+                  <div className='AA1IrrNull'>暂无数据</div>
+                ) : (
+                  goodsList.map(item => (
+                    <div className='AA1IrrRow' key={item.id}>
+                      <div className='AA1IrrRow1'>
+                        <div>
+                          <Radio
+                            checked={checkId === item.id}
+                            onClick={e => {
+                              if (checkId === item.id) setCheckId(0)
+                              else setCheckId(item.id)
+                            }}
+                          >
+                            <h3>选择</h3>
+                          </Radio>
+                          &emsp;
+                          <span className='AA1IrrRow1_1'>总登记号：</span>
+                          {item.num || ' - '}
+                        </div>
+                        <AAbtn txt={1} onClick={() => setLookInfo(item)} tit='查看藏品' />
+
+                        {/* <Button type='primary' onClick={() => setLookInfo(item)}>
+                          查看藏品
+                        </Button> */}
+                      </div>
+
+                      <div className='AA1IrrRow2'>
+                        <div className='AA1IrrRow2ll'>
+                          {rightTxt.map((item2: any) => (
+                            <div key={item2.key} className='AA1IrrRow2llRow'>
+                              <div>{item2.isWai}</div>
+                              <p>
+                                {item2.backFu
+                                  ? item2.backFu(item)
+                                  : item[item2.key as 'num'] || '-'}
+                              </p>
+                            </div>
+                          ))}
+                        </div>
+                        <div className='AA1IrrRow2rr'>
+                          {item.file.map((file: any) => (
+                            <div key={file.id}>
+                              <ImageLazy
+                                width='100%'
+                                height={200}
+                                srcBig={file.filePath || file.thumb}
+                                src={file.thumb || file.filePath}
+                                offline={(file.thumb || file.filePath).includes('http')}
+                              />
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  ))
+                )}
+              </div>
+            </div>
+          </>
+        ) : null}
+      </div>
+      {lookInfo.id ? <AAlook info={lookInfo} closeFu={() => setLookInfo({} as GoodsType)} /> : null}
+    </div>
+  )
+}
+
+const MemoAA1info = React.memo(AA1info)
+
+export default MemoAA1info

src/pages/AAnew/AA1onePu/data.ts

@@ -0,0 +1,171 @@
+import { resJiLianFu } from '@/utils/history'
+import { GoodsType } from '../data'
+
+export type AA1tableType = {
+  address: string
+  audit: number
+  city: string
+  coverImgUrl: string
+  createTime: string
+  creatorDate: string
+  creatorTime: string
+  description: string
+  display: number
+  enable: number
+  env: number
+  hot: number
+  id: number
+  latitude: number
+  longitude: number
+  modelType: number
+  name: string
+  pv: number
+  sort: number
+  updateTime: string
+  uploader: string
+  userId: number
+}
+
+export const AA1baseForm = {
+  pageSize: 10,
+  pageNum: 1,
+  uploadTime: '',
+  searchKey: ''
+}
+
+// -----------盘点详情类型
+export type AA1infoFileType = {
+  name: string
+  url: string
+}
+
+export type AA1infoType = {
+  uploader: string
+  coverImgUrl: string
+  createTime: string
+  description: string
+  fileList: AA1infoFileType[]
+  goodsList: GoodsType[]
+  id: number
+  matchStatus: number
+  name: string
+  updateTime: string
+}
+
+type ArrkeyType = {
+  name: string
+  key: string
+  isWai?: string
+  backFu?: (info: GoodsType) => void
+  full?: boolean
+}
+
+export const AAdomArr: ArrkeyType[] = [
+  { name: '藏品总登记号', key: 'num' },
+  { name: '藏品原名', key: 'namePrimitive' },
+  { name: '藏品级别', key: 'dictLevel', isWai: '级别' },
+  {
+    name: '藏品类别',
+    key: 'dictType',
+    isWai: '类别',
+    backFu: info => {
+      return resJiLianFu(info.dictType)
+    }
+  },
+  {
+    name: '藏品年代',
+    key: 'dictAge',
+    isWai: '年代',
+
+    backFu: info => {
+      return info.dictAge === '其他' ? '其他' : resJiLianFu(info.dictAge)
+    }
+  },
+  {
+    name: '具体年代',
+    key: 'ageInfo'
+  },
+  { name: '实际数量', key: 'pcsActual' },
+  {
+    name: '质地',
+    key: 'dictTexture1',
+    isWai: '质地',
+    backFu: info => {
+      let txt = ''
+      if (info.texture) txt = info.texture.replaceAll('/', ' / ')
+      return txt
+    }
+  },
+  {
+    name: '完残程度',
+    key: 'dictTorn',
+    isWai: '完残程度',
+    backFu: info => {
+      return resJiLianFu(info.dictTorn)
+    }
+  },
+  { name: '完残状况', key: 'torn' },
+  {
+    name: '保存状态',
+    key: 'preserveState',
+    backFu: info => {
+      return resJiLianFu(info.preserveState)
+    }
+  },
+  {
+    name: '文物来源',
+    key: 'source',
+    backFu: info => {
+      return resJiLianFu(info.source)
+    }
+  },
+  {
+    name: '尺寸',
+    key: 'sizeL',
+    backFu: info => {
+      let danWei = resJiLianFu(info.sizeUnit, ' ')
+
+      let txt1 = info.sizeL ? `通长${info.sizeL}` : ''
+      let txt2 = info.sizeW ? `通宽${info.sizeW}` : ''
+      let txt3 = info.sizeH ? `通高${info.sizeH}` : ''
+
+      txt1 = txt1 ? txt1 + danWei : ''
+      txt2 = txt2 ? txt2 + danWei : ''
+      txt3 = txt3 ? txt3 + danWei : ''
+
+      let arr = [txt1, txt2, txt3]
+      arr = arr.filter(v => v)
+
+      if (!txt1 && !txt2 && !txt3) return '-'
+      else return arr.join(' - ')
+    }
+  },
+  { name: '具体尺寸', key: 'sizeInfo' },
+  {
+    name: '质量范围',
+    key: 'qualityDictScope',
+    backFu: info => {
+      return resJiLianFu(info.qualityDictScope)
+    }
+  },
+  {
+    name: '具体质量',
+    key: 'quality',
+    backFu: info => {
+      return info.quality + resJiLianFu(info.qualityUnit)
+    }
+  },
+  { name: '入藏年度', key: 'inGoodsDate' },
+  {
+    name: '入藏时间范围',
+    key: 'inDictDateScope',
+    backFu: info => {
+      return resJiLianFu(info.inDictDateScope)
+    }
+  },
+
+  { name: '著者', key: 'pressAuthor', full: true },
+  { name: '存卷', key: 'pressFile', full: true },
+  { name: '版本', key: 'pressVersion', full: true },
+  { name: '备注', key: 'rtf', full: true }
+]

src/pages/AAnew/AA1onePu/index.module.scss

@@ -0,0 +1,42 @@
+.AA1onePu {
+  background-color: #fcf9f5;
+  border-radius: 10px;
+  padding: 15px 24px 0;
+  position: relative;
+  :global {
+    .AA1top {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 15px;
+      .AA1topll {
+        display: flex;
+        & > div {
+          position: relative;
+          margin-right: 15px;
+          display: flex;
+          align-items: center;
+          .ant-input {
+            width: 160px;
+          }
+        }
+      }
+      .ant-select-selection-placeholder {
+        color: black;
+      }
+      .AA1toprr {
+        display: flex;
+      }
+
+      .ant-input,
+      .ant-picker {
+        height: 40px;
+        border: none;
+        background-size: 100% 100%;
+        background-image: url('../../../assets/layImg/home_input_bg.png');
+      }
+    }
+    // .ant-table-cell {
+    //   padding: 8px !important;
+    // }
+  }
+}

src/pages/AAnew/AA1onePu/index.tsx

@@ -0,0 +1,172 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import { Button, Input } from 'antd'
+import { useDispatch, useSelector } from 'react-redux'
+import { AA1baseForm, AA1tableType } from './data'
+import { AA1_APIdel, AA1_APIgetList } from '@/store/action/AAnew/AA1onePu'
+import { RootState } from '@/store'
+import MyTable from '@/components/MyTable'
+import AA1info from '../AA1info'
+import { MessageFu } from '@/utils/message'
+import AAbtn from '../AAbtn'
+function AA1onePu() {
+  const dispatch = useDispatch()
+  const [formData, setFormData] = useState(AA1baseForm)
+  const formDataRef = useRef(AA1baseForm)
+  const formDataOldRef = useRef(AA1baseForm)
+
+  useEffect(() => {
+    formDataRef.current = formData
+  }, [formData])
+
+  // 点击搜索的 时间戳
+  const [timeKey, setTimeKey] = useState(0)
+
+  // 点击搜索
+  const clickSearch = useCallback(() => {
+    setFormData({ ...formData, pageNum: 1 })
+    setTimeout(() => {
+      setTimeKey(Date.now())
+    }, 50)
+  }, [formData])
+
+  // 封装发送请求的函数
+  const getListFu = useCallback(() => {
+    formDataOldRef.current = { ...formDataRef.current }
+    dispatch(AA1_APIgetList(formDataRef.current))
+  }, [dispatch])
+
+  useEffect(() => {
+    getListFu()
+  }, [getListFu, timeKey])
+
+  // 输入框的改变
+  const txtChangeFu = useCallback(
+    (txt: string, key: any) => {
+      setFormData({
+        ...formData,
+        [key]: txt
+      })
+    },
+    [formData]
+  )
+
+  // 时间选择器的改变
+  // const timeChangeFu = useCallback(
+  //   (date: any, dateString: any) => {
+  //     let uploadTime = dateString || ''
+
+  //     setFormData({ ...formData, uploadTime })
+  //   },
+  //   [formData]
+  // )
+
+  // 点击重置
+  const resetSelectFu = useCallback(() => {
+    setFormData(AA1baseForm)
+    setTimeout(() => {
+      setTimeKey(Date.now())
+    }, 50)
+  }, [])
+
+  // 页码变化
+  const paginationChange = useCallback(
+    (pageNum: number, pageSize: number) => {
+      setFormData({ ...formData, pageNum, pageSize })
+      setTimeout(() => {
+        setTimeKey(Date.now())
+      }, 50)
+    },
+    [formData]
+  )
+
+  // 点击删除
+  const delTableFu = useCallback(
+    async (id: number) => {
+      const res = await AA1_APIdel(id)
+      if (res.code === 0) {
+        MessageFu.success('删除成功')
+        getListFu()
+      }
+    },
+    [getListFu]
+  )
+
+  const tableLastBtn = useMemo(() => {
+    return [
+      {
+        title: '操作',
+        render: (item: AA1tableType) => (
+          <Button size='small' type='text' onClick={() => setSId(item.id)}>
+            查看
+          </Button>
+        )
+      }
+    ]
+  }, [])
+
+  // 从仓库拿数据
+  const tableInfo = useSelector((state: RootState) => state.AA1onePu.tableInfo)
+
+  // 查看详情
+  const [sId, setSId] = useState(0)
+
+  return (
+    <div className={styles.AA1onePu}>
+      <div className='pageTitle'>{sId ? '盘点详情' : '一普盘点'}</div>
+
+      <div className='AA1top'>
+        <div className='AA1topll'>
+          {/* <div>
+            <DatePicker
+              style={{ width: 200 }}
+              value={formData.uploadTime ? dayjs(formData.uploadTime) : null}
+              onChange={timeChangeFu}
+              placeholder='请选择上传日期'
+            />
+          </div> */}
+          <div>
+            <Input
+              style={{ width: 200 }}
+              placeholder='请搜索上传用户或名称'
+              maxLength={30}
+              value={formData.searchKey}
+              onChange={e => txtChangeFu(e.target.value, 'searchKey')}
+            />
+          </div>
+        </div>
+        <div className='AA1toprr'>
+          <AAbtn txt={1} onClick={clickSearch} />
+          &emsp;
+          <AAbtn txt={2} onClick={resetSelectFu} />
+        </div>
+      </div>
+
+      {/* 表格 */}
+      <MyTable
+        yHeight={680}
+        list={tableInfo.list}
+        columnsTemp={[
+          ['txt', '文物名称', 'name'],
+          ['txt', '上传时间', 'createTime'],
+          ['txt', '上传用户', 'uploader', '归藏APP'],
+          ['img', '图片', 'coverImgUrl'],
+          ['txt', '处理时间', 'num111', '（空）'],
+          ['txt', '处理人', 'num111', '（空）'],
+          ['txt', '处理意见', 'num111', '（空）'],
+          ['txt', '处理状态', 'num111', '待处理']
+        ]}
+        lastBtn={tableLastBtn}
+        pageNum={formData.pageNum}
+        pageSize={formData.pageSize}
+        total={tableInfo.total}
+        onChange={(pageNum, pageSize) => paginationChange(pageNum, pageSize)}
+      />
+      {sId ? <AA1info sId={sId} closeFu={() => setSId(0)} delFu={id => delTableFu(id)} /> : null}
+    </div>
+  )
+}
+
+const MemoAA1onePu = React.memo(AA1onePu)
+
+export default MemoAA1onePu

src/pages/AAnew/AAbtn/index.module.scss

@@ -0,0 +1,25 @@
+.AAbtn {
+  width: 90px;
+  height: 40px;
+  cursor: pointer;
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s;
+  color: #fcf9f5;
+  letter-spacing: 2px;
+  font-weight: 400;
+  font-size: 14px;
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+.AAbtn2 {
+  color: var(--themeColor);
+}
+
+.AAbtn3 {
+  color: #d35759;
+}

src/pages/AAnew/AAbtn/index.tsx

@@ -0,0 +1,65 @@
+import React, { useMemo } from 'react'
+import styles from './index.module.scss'
+import classNames from 'classnames'
+import { Popconfirm } from 'antd'
+
+const btnObj = {
+  1: {
+    name: '搜索',
+    url: require('@/assets/layImg/home_btn_brown.png')
+  },
+  2: {
+    name: '重置',
+    url: require('@/assets/layImg/home_btn_white.png')
+  },
+  3: {
+    name: '删除',
+    url: require('@/assets/layImg/home_btn_white.png')
+  }
+}
+
+type Props = {
+  txt: 1 | 2 | 3
+  onClick: () => void
+  tit?: string
+}
+
+function AAbtn({ txt, onClick, tit }: Props) {
+  const info = useMemo(() => {
+    return btnObj[txt]
+  }, [txt])
+
+  return (
+    <>
+      {txt === 3 ? (
+        <Popconfirm
+          placement='bottom'
+          title={`确定${tit || info.name}吗?`}
+          okText='确定'
+          cancelText='取消'
+          onConfirm={onClick}
+          okButtonProps={{ loading: false }}
+        >
+          <div
+            style={{ backgroundImage: `url(${info.url})` }}
+            className={classNames(styles.AAbtn, styles[`AAbtn${txt}`])}
+          >
+            {tit || info.name}
+          </div>
+        </Popconfirm>
+      ) : (
+        <div
+          onClick={onClick}
+          style={{ backgroundImage: `url(${info.url})` }}
+          className={classNames(styles.AAbtn, styles[`AAbtn${txt}`])}
+        >
+          {tit || info.name}
+        </div>
+      )}
+    </>
+  )
+}
+
+const MemoAAbtn = React.memo(AAbtn)
+
+export default MemoAAbtn

src/pages/AAnew/AAlook/index.module.scss

@@ -0,0 +1,71 @@
+.AAlook {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+
+    .ant-modal {
+      top: 50px !important;
+      width: 1200px !important;
+    }
+
+    .ant-modal-header,
+    .ant-modal-content {
+      background-color: #fcf9f5 !important;
+    }
+
+    .ant-modal-body {
+      border-top: 1px solid #ccc;
+    }
+    .AAlbtn {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: var(--themeColor);
+      font-size: 22px;
+    }
+
+    .AAlMain {
+      padding-top: 15px;
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      align-content: flex-start;
+      .AA1IrrRow2llRow {
+        width: 48%;
+        display: flex;
+        margin-top: 3px;
+        border-bottom: 1px solid #ccc;
+        & > div {
+          width: 120px;
+          text-align: center;
+          background-color: #eaeaea;
+
+          padding: 8px 0;
+        }
+        & > p {
+          padding: 8px 0 8px 10px;
+          width: calc(100% - 120px);
+        }
+      }
+      .AA1IrrRow2llRowFull {
+        width: 96%;
+      }
+    }
+    .AAlimg {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      // justify-content: center;
+      align-content: flex-start;
+      & > div {
+        width: 150px;
+        height: 150px;
+        margin: 10px;
+        border-radius: 5px;
+        overflow: hidden;
+      }
+    }
+  }
+}

src/pages/AAnew/AAlook/index.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import styles from './index.module.scss'
+import { Modal } from 'antd'
+import { AAdomArr } from '../AA1onePu/data'
+import classNames from 'classnames'
+import ImageLazy from '@/components/ImageLazy'
+import AAbtn from '../AAbtn'
+import { GoodsType } from '../data'
+
+type Props = {
+  info: GoodsType
+  closeFu: () => void
+}
+
+function AAlook({ info, closeFu }: Props) {
+  return (
+    <Modal
+      wrapClassName={styles.AAlook}
+      open={true}
+      title={
+        <div className='AAlbtn'>
+          {info.name}
+          <AAbtn txt={2} onClick={closeFu} tit='返回' />
+        </div>
+      }
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className='AAlMain'>
+        {AAdomArr.map(item2 => (
+          <div
+            key={item2.key}
+            className={classNames('AA1IrrRow2llRow', item2.full ? 'AA1IrrRow2llRowFull' : '')}
+          >
+            <div>{item2.name}</div>
+            <p>{item2.backFu ? item2.backFu(info) : info[item2.key] || '-'}</p>
+          </div>
+        ))}
+      </div>
+
+      {info.file && info.file.length ? (
+        <div className='AAlimg'>
+          {info.file.map((item: any) => (
+            <div key={item.id}>
+              <ImageLazy
+                width={150}
+                height={150}
+                srcBig={item.filePath || item.thumb}
+                src={item.thumb || item.filePath}
+                offline={(item.thumb || item.filePath).includes('http')}
+              />
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </Modal>
+  )
+}
+
+const MemoAAlook = React.memo(AAlook)
+
+export default MemoAAlook

src/pages/AAnew/data.ts

@@ -0,0 +1 @@
+export type GoodsType = any

src/pages/Layout/data.ts

@@ -0,0 +1,35 @@
+import { RouterType, RouterTypeRow } from '@/types'
+import React from 'react'
+
+const tabLeftArr: RouterType = [
+  {
+    id: 7,
+    name: '系统管理',
+    son: [
+      {
+        id: 6601,
+        name: '一普盘点',
+        path: '/',
+        Com: React.lazy(() => import('../AAnew/AA1onePu'))
+      },
+      {
+        id: 740,
+        name: '部门管理',
+        path: '/organization',
+        Com: React.lazy(() => import('../Z_system/Z4organization'))
+      },
+
+      {
+        id: 760,
+        name: '用户管理',
+        path: '/user',
+        Com: React.lazy(() => import('../Z_system/Z6user'))
+      }
+    ]
+  }
+]
+
+export default tabLeftArr
+
+// 里面的页面，不是左边的tab栏
+export const routerSon: RouterTypeRow[] = []

src/pages/Layout/index.module.scss

@@ -0,0 +1,193 @@
+.Layout {
+  width: 100%;
+  height: 100%;
+  display: flex;
+
+  :global {
+    .layoutLeft {
+      position: relative;
+      width: 220px;
+      height: 100%;
+      background-color: var(--themeColor);
+      background-image: url('../../assets/layImg/home_btn.png');
+      background-position: bottom left;
+      background-repeat: no-repeat;
+      background-size: 100% auto;
+
+      .layoutLeftTop {
+        text-align: center;
+        padding-top: 3px;
+        margin-bottom: 3px;
+
+        & > img {
+          width: 100%;
+        }
+      }
+
+      .layoutLeftMain {
+        height: calc(100% - 67px);
+        overflow-y: auto;
+        padding-bottom: 10px;
+        &::-webkit-scrollbar-thumb {
+          background: var(--themeColor2);
+        }
+        .layoutLRowBox {
+          .layoutLRowBoxTxt {
+            // opacity: 0.8;
+            font-size: 18px;
+            font-weight: 700;
+            height: 50px;
+            line-height: 50px;
+            padding-left: 35px;
+            color: #fff;
+            display: flex;
+            align-items: center;
+            & > img {
+              width: 30px;
+              height: 30px;
+              object-fit: cover;
+              display: inline-block;
+              margin-right: 10px;
+            }
+          }
+
+          .layoutLRowBoxRow {
+            color: #fff;
+            // text-align: center;
+            padding-left: 24px;
+            cursor: pointer;
+
+            font-size: 16px;
+            height: 50px;
+            line-height: 50px;
+            position: relative;
+
+            &:hover {
+              color: #fcf9f5;
+              background-color: #a18869;
+            }
+          }
+
+          .active {
+            color: #fcf9f5;
+            // pointer-events: none;
+            background-color: #a18869;
+            &::before {
+              content: '';
+              position: absolute;
+              left: 0;
+              top: 0;
+              width: 6px;
+              height: 100%;
+              background-color: #fff;
+            }
+          }
+        }
+      }
+    }
+
+    .layoutRight {
+      width: calc(100% - 220px);
+      height: 100%;
+      overflow: hidden;
+
+      .layoutRightTop {
+        height: 60px;
+        position: relative;
+        background-color: #fcf9f5;
+
+        .user {
+          position: absolute;
+          right: -150px;
+          top: 0;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          font-size: 16px;
+          color: black;
+          transition: all 0.3s;
+
+          .userNameBox {
+            cursor: pointer;
+            // background: url('../../assets/img/user.png') no-repeat left center;
+            // background-size: 40px 40px;
+            // padding-left: 46px;
+            height: 60px;
+            display: flex;
+            align-items: center;
+            img {
+              border-radius: 50%;
+              width: 40px;
+              height: 40px;
+              margin-right: 20px;
+            }
+          }
+          .userNameBoxDing {
+            pointer-events: none;
+          }
+
+          .userInco {
+            margin-left: 10px;
+            color: black;
+          }
+
+          .userInco1 {
+            // display: none;
+            opacity: 0 !important;
+          }
+
+          .userSet {
+            position: relative;
+            top: 10px;
+            margin-left: 40px;
+            width: 140px;
+            opacity: 1;
+            height: 74px;
+
+            & > div {
+              box-shadow: 1px 1px 4px 4px #ccc;
+              border-radius: 10px;
+              overflow: hidden;
+
+              & > span {
+                cursor: pointer;
+                background-color: #fff;
+                display: block;
+                width: 100%;
+                text-align: center;
+                height: 35px;
+                line-height: 35px;
+
+                &:hover {
+                  color: var(--themeColor);
+                }
+              }
+            }
+          }
+        }
+
+        .userShow {
+          right: 20px;
+        }
+      }
+
+      .layoutRightMain {
+        height: calc(100% - 60px);
+        padding: 15px;
+        background-color: #ecedf1;
+
+        .mainBoxR {
+          width: 100%;
+          height: 100%;
+          // overflow: hidden;
+          position: relative;
+
+          & > div {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/Layout/index.tsx

@@ -0,0 +1,418 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { CaretRightOutlined } 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 classNames from 'classnames'
+import history from '@/utils/history'
+import { Button, Form, Input, Modal } from 'antd'
+import { Base64 } from 'js-base64'
+import encodeStr from '@/utils/pass'
+import { passWordEditAPI } from '@/store/action/layout'
+import { changSetFu, getTokenInfo, removeTokenInfo, setTokenInfo } from '@/utils/storage'
+import { MessageFu } from '@/utils/message'
+import NotFound from '@/components/NotFound'
+import { RouterType, RouterTypeRow } from '@/types'
+import tabLeftArr, { routerSon } from './data'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import { useDispatch, useSelector } from 'react-redux'
+import { Z1_APIgetDict } from '@/store/action/Z1dict'
+import store, { RootState } from '@/store'
+import { baseURL } from '@/utils/http'
+import baseTouXiangImg from '@/assets/img/user.png'
+import { getUserInfoByIdAPI } from '@/store/action/Z6user'
+
+function Layout() {
+  // 字典加载完毕才加载别的
+  const [isLoding, setIsLoding] = useState(false)
+
+  const dispatch = useDispatch()
+
+  // 很多地方会用到的下拉框 或者级联数据
+  useEffect(() => {
+    // 获取全部级联数据
+    dispatch(
+      Z1_APIgetDict(undefined, () => {
+        setIsLoding(true)
+      })
+    )
+  }, [dispatch])
+
+  // 获取最新用户信息 存到本地
+  const getUserInfoFu = useCallback(async () => {
+    const userInfoJting = getTokenInfo()
+    const res = await getUserInfoByIdAPI(userInfoJting.user.id)
+    if (res.code === 0) {
+      // alert(JSON.stringify(userInfoJting.token))
+      setTokenInfo({
+        ...userInfoJting,
+        user: res.data
+      })
+    }
+  }, [])
+
+  useEffect(() => {
+    getUserInfoFu()
+  }, [getUserInfoFu])
+
+  // 获取角色下载权限
+  const getDownRole = useCallback(async () => {
+    // const info = getTokenInfo().user || {}
+    // if (info && info.roleId) {
+    //   const res = await Z5_APIgetInfo(info.roleId)
+    //   if (res.code === 0) {
+    //     const data = res.data.role
+    //     store.dispatch({
+    //       type: 'layout/downImg',
+    //       payload: {
+    //         可见: data.scopeGoodsFile === 1 ? '可见' : '不可见',
+    //         图片: data.scopeGoodsFileDownload === 1 ? '原图和缩略图' : '缩略图'
+    //       }
+    //     })
+    //     // 藏品详情页面tab和按钮权限
+    //     const scopeGoods: string = data.scopeGoods
+    //     if (scopeGoods) {
+    //       store.dispatch({ type: 'layout/goodsInfoPower', payload: scopeGoods.split(',') })
+    //     }
+    //   }
+    // }
+  }, [])
+
+  // 用户信息存到仓库
+  useEffect(() => {
+    store.dispatch({ type: 'layout/userInfo', payload: (getTokenInfo() || {}).user })
+    getDownRole()
+  }, [getDownRole])
+
+  // 获取用户信息
+  const { userInfo, passEditShow } = useSelector((state: RootState) => state.A0Layout)
+
+  // 当前路径选中的左侧菜单
+  const location = useLocation()
+  const [path, setPath] = useState('')
+
+  const sroolRef = useRef<HTMLDivElement>(null)
+  const sroolTimeRef = useRef(-1)
+
+  useEffect(() => {
+    const arr = location.pathname.split('/')
+    let pathTemp = '/'
+    if (arr[1]) pathTemp = '/' + arr[1]
+
+    // 滚动到中间
+    clearTimeout(sroolTimeRef.current)
+    if (pathTemp !== '/goodsLook') {
+      sroolTimeRef.current = window.setTimeout(() => {
+        if (sroolRef.current) {
+          const dom = document.querySelector('.layoutLeftMain') as HTMLDivElement
+          if (dom) {
+            dom.scrollTo({
+              top: sroolRef.current.offsetTop - 400,
+              behavior: 'smooth'
+            })
+          }
+        }
+      }, 200)
+    }
+
+    setPath(pathTemp)
+  }, [location])
+
+  // 获取用户权限信息
+  const getUserAuthFu = useCallback(async () => {
+    const userInfo = getTokenInfo().user || {}
+
+    const isOkIdArr: number[] = [6601]
+
+    // 是管理员
+    if (userInfo.roleId === 1) {
+      // push角色管理
+      isOkIdArr.push(740)
+      isOkIdArr.push(760)
+    }
+
+    const tempArr: RouterTypeRow[] = []
+
+    // 权限数据存到仓库
+    const roleArrStoreArr: RouterType = []
+
+    tabLeftArr.forEach(v1 => {
+      if (v1.son && v1.son[0]) {
+        const obj = {
+          ...v1,
+          son: [] as RouterTypeRow[]
+        }
+
+        v1.son.forEach(v2 => {
+          if (isOkIdArr.includes(v2.id)) {
+            tempArr.push(v2)
+            obj.son.push({ ...v2, authority: true })
+          }
+        })
+
+        roleArrStoreArr.push(obj)
+      }
+    })
+
+    setRouterCom(tempArr)
+
+    // 如果当前页面没有权限了，跳转有权限的第一个页面
+    const urlAll = window.location.hash
+
+    const isNowPath = urlAll.replace('#', '')
+    const pathArr = tempArr.map(v => v.pathLast || v.path)
+
+    const routerSonArr = routerSon.map(v => v.path)
+
+    const lastArr = [...pathArr, ...routerSonArr]
+
+    let flagPush = true
+
+    lastArr.forEach(v => {
+      if (v === '/') {
+        if (isNowPath === '/') flagPush = false
+      } else {
+        if (isNowPath.includes(v)) flagPush = false
+      }
+    })
+
+    if (flagPush) history.push(pathArr[0])
+
+    const resList: RouterType = tabLeftArr.map(v => ({
+      ...v,
+      son: v.son.filter(c => isOkIdArr.includes(c.id))
+    }))
+
+    setList(resList)
+  }, [])
+
+  useEffect(() => {
+    getUserAuthFu()
+  }, [getUserAuthFu])
+
+  // 左侧菜单 信息
+  const [list, setList] = useState([] as RouterType)
+
+  // 路由信息（过滤之后的）
+  const [RouterCom, setRouterCom] = useState<RouterTypeRow[]>([])
+
+  // useEffect(() => {
+  //   console.log(123, list);
+  // }, [list]);
+
+  // 点击跳转
+  const pathCutFu = useCallback((item: RouterTypeRow) => {
+    history.push(item.path)
+    if (item.name !== '业务中心') changSetFu(item)
+  }, [])
+
+  // 拿到新密码的输入框的值
+  const oldPasswordValue = useRef('')
+
+  const checkPassWord = (rule: any, value: any = '') => {
+    if (value !== oldPasswordValue.current) return Promise.reject('新密码不一致!')
+    else return Promise.resolve(value)
+  }
+
+  const onFinish = async (values: any) => {
+    // 通过校验之后发送请求
+    if (values.oldPassword === values.newPassword) return MessageFu.warning('新旧密码不能相同!')
+
+    const regex =
+      /^(?=.*[A-Za-z])(?=.*\d)|(?=.*[A-Za-z])(?=.*[!@#$%^&*])|(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/
+
+    const flagPass = regex.test(values.newPassword)
+    if (!flagPass) {
+      return MessageFu.warning('密码要求由数字、字母或特殊字符中2种方式组成')
+    }
+
+    const obj = {
+      oldPassword: encodeStr(Base64.encode(values.oldPassword)),
+      newPassword: encodeStr(Base64.encode(values.newPassword))
+    }
+    const res: any = await passWordEditAPI(obj)
+    if (res.code === 0) {
+      MessageFu.success('修改成功!')
+      store.dispatch({ type: 'layout/passEditShow', payload: false })
+      loginExit()
+    }
+  }
+
+  // 点击退出登录
+  const loginExit = () => {
+    removeTokenInfo()
+    history.push('/login')
+  }
+
+  // 点击用户 出来 退出登录 修改密码
+  const [isUserBtnShow, setIsUserBtnShow] = useState(false)
+
+  // path的高亮判断
+  const pathAcFu = useCallback(
+    (url: string) => {
+      let flag = false
+      if (url === '/') {
+        if (path.includes('/_') || path === '/') flag = true
+      } else {
+        if (path.includes(url)) flag = true
+      }
+      return flag
+    },
+    [path]
+  )
+
+  return (
+    <div className={styles.Layout}>
+      {/* 左边 */}
+      <div className='layoutLeft'>
+        <div className='layoutLeftTop'>
+          <img src={require('@/assets/layImg/home_logo.png')} alt='' />
+        </div>
+        {/* 左边主体 */}
+        <div className='layoutLeftMain mySorrl'>
+          {list.map(v => (
+            <div className={classNames('layoutLRowBox')} key={v.id}>
+              {/* 一级目录 */}
+              <div className='layoutLRowBoxTxt' hidden>
+                <img src={baseURL + '/baseData/tabImg/' + v.name + '.png'} alt='' />
+                {v.name}
+              </div>
+              {v.son.map(v2 => (
+                <div
+                  key={v2.id}
+                  className={classNames('layoutLRowBoxRow', pathAcFu(v2.path) ? 'active' : '')}
+                  ref={pathAcFu(v2.path) ? sroolRef : null}
+                  onClick={() => pathCutFu(v2)}
+                >
+                  {v2.name}
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+      {/* 右边 */}
+      <div className='layoutRight'>
+        <div className='layoutRightTop'>
+          {/* 用户相关 */}
+          <div
+            className={classNames('user', isUserBtnShow ? 'userShow' : '')}
+            onMouseLeave={() => setIsUserBtnShow(false)}
+          >
+            <div className={classNames('userNameBox')} onClick={() => setIsUserBtnShow(true)}>
+              <img src={userInfo.thumb ? baseURL + userInfo.thumb : baseTouXiangImg} alt='' />
+
+              {userInfo.realName || userInfo.userName || '匿名'}
+
+              <div className='userInco userInco2'>
+                <CaretRightOutlined />
+              </div>
+            </div>
+
+            <div className='userSet'>
+              <div>
+                <span
+                  onClick={() => store.dispatch({ type: 'layout/passEditShow', payload: true })}
+                >
+                  修改密码
+                </span>
+                <MyPopconfirm txtK='退出登录' onConfirm={loginExit} Dom='退出登录' loc='bottom' />
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* 右边主体 */}
+        <div className='layoutRightMain'>
+          {/* 二级路由页面 */}
+          {isLoding ? (
+            <div className='mainBoxR'>
+              <React.Suspense fallback={<SpinLoding />}>
+                <Switch>
+                  {/* 左侧tab栏页面 */}
+                  {RouterCom.map(v => (
+                    <AuthRoute key={v.id} exact path={v.path} component={v.Com} />
+                  ))}
+
+                  {/* 非tab栏页面 */}
+                  {routerSon.map(v => (
+                    <AuthRoute key={v.id} exact path={v.path} component={v.Com} />
+                  ))}
+
+                  <Route path='*' component={NotFound} />
+                </Switch>
+              </React.Suspense>
+            </div>
+          ) : null}
+        </div>
+      </div>
+
+      {/* 点击修改密码打开的对话框 */}
+      <Modal
+        destroyOnClose
+        open={passEditShow}
+        title='修改密码'
+        onCancel={() => store.dispatch({ type: 'layout/passEditShow', payload: false })}
+        footer={
+          [] // 设置footer为空，去掉 取消 确定默认按钮
+        }
+      >
+        <Form
+          scrollToFirstError={true}
+          name='basic'
+          labelCol={{ span: 5 }}
+          wrapperCol={{ span: 16 }}
+          onFinish={onFinish}
+          autoComplete='off'
+        >
+          <Form.Item
+            label='旧密码'
+            name='oldPassword'
+            rules={[{ required: true, message: '不能为空!' }]}
+            getValueFromEvent={e => e.target.value.replace(/\s+/g, '')}
+          >
+            <Input.Password maxLength={20} />
+          </Form.Item>
+
+          <Form.Item
+            label='新密码'
+            name='newPassword'
+            rules={[
+              { required: true, message: '不能为空!' },
+              { min: 6, max: 20, message: '密码长度为6-20个字符!' }
+            ]}
+            getValueFromEvent={e => e.target.value.replace(/\s+/g, '')}
+          >
+            <Input.Password
+              maxLength={15}
+              onChange={e => (oldPasswordValue.current = e.target.value)}
+            />
+          </Form.Item>
+
+          <Form.Item
+            label='确定新密码'
+            name='checkPass'
+            rules={[{ validator: checkPassWord }]}
+            getValueFromEvent={e => e.target.value.replace(/\s+/g, '')}
+          >
+            <Input.Password maxLength={15} />
+          </Form.Item>
+
+          <Form.Item wrapperCol={{ offset: 14, span: 16 }}>
+            <Button onClick={() => store.dispatch({ type: 'layout/passEditShow', payload: 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/Login/index.module.scss

@@ -0,0 +1,158 @@
+.Login {
+  width: 100%;
+  height: 100%;
+  background-image: url('../../assets/img/loginBac.jpg');
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  :global {
+    .loginTit {
+      position: absolute;
+      bottom: 3%;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 20px;
+      color: #383127;
+      letter-spacing: 4px;
+    }
+
+    .mainleft {
+      width: auto;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      .mainleft1 {
+        width: 400px;
+        margin-bottom: 15px;
+      }
+      .mainleft2 {
+        width: 650px;
+      }
+    }
+
+    .mainRight {
+      margin-left: 15%;
+      width: 500px;
+      background-image: url('../../assets/img/loginKuang.png');
+      background-size: 100% 100%;
+
+      padding: 80px 60px 150px;
+      border-radius: 6px;
+      position: relative;
+
+      .loginImg {
+        position: absolute;
+        bottom: 7%;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      .loginTxt {
+        color: #413a31;
+        font-size: 24px;
+        font-weight: 700;
+        text-align: left;
+      }
+
+      .inputBox {
+        margin: 10px 0 30px;
+        width: 100%;
+
+        input::-webkit-input-placeholder {
+          /* WebKit browsers */
+          color: rgba(0, 0, 0, 0.4);
+        }
+
+        input:-moz-placeholder {
+          /* Mozilla Firefox 4 to 18 */
+          color: rgba(0, 0, 0, 0.4);
+        }
+
+        input::-moz-placeholder {
+          /* Mozilla Firefox 19+ */
+          color: rgba(0, 0, 0, 0.4);
+        }
+
+        input:-ms-input-placeholder {
+          /* Internet Explorer 10+ */
+          color: rgba(0, 0, 0, 0.4);
+        }
+
+        .inputBoxRow {
+          width: 100%;
+          margin: 30px auto;
+
+          .ant-input-suffix .ant-input-password-icon {
+            color: rgba(0, 0, 0, 0.4);
+            font-size: 22px;
+          }
+
+          .ant-input {
+            width: 100%;
+            font-size: 18px;
+            height: 55px;
+            line-height: 55px;
+            background-clip: content-box;
+          }
+        }
+
+        .ant-input-prefix {
+          margin-right: 10px;
+
+          .anticon {
+            padding-right: 10px;
+            width: 36px;
+            height: 36px;
+
+            svg {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+
+        input:-webkit-autofill {
+          font-size: 18px !important;
+          -webkit-text-fill-color: black !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 {
+          padding: 0 11px;
+          width: 100%;
+          height: 60px;
+          color: var(--themeColor);
+
+          .ant-input {
+            width: 100%;
+            height: 55px;
+            line-height: 55px;
+            color: black;
+          }
+        }
+
+        .ant-input-affix-wrapper-focused {
+          box-shadow: none;
+        }
+      }
+
+      .loginBtn {
+        .ant-btn {
+          color: #fff;
+          background-color: var(--themeColor);
+          border-radius: 6px;
+          font-size: 18px;
+          width: 375px;
+          height: 45px;
+        }
+      }
+    }
+  }
+}

src/pages/Login/index.tsx

@@ -0,0 +1,134 @@
+import styles from './index.module.scss'
+
+import { Input, Button, Checkbox } from 'antd'
+import { useCallback, useEffect, useState } from 'react'
+import { Base64 } from 'js-base64'
+import encodeStr from '@/utils/pass'
+import { getPassSave, setPassSave, setTokenInfo } from '@/utils/storage'
+import history from '@/utils/history'
+import { MessageFu } from '@/utils/message'
+import { userLoginAPI } from '@/store/action/layout'
+
+export default function Login() {
+  // 账号密码 - 验证码
+  const [userName, setUserName] = useState('')
+  const [passWord, setPassWord] = useState('')
+
+  const [check, setCheck] = useState(false)
+
+  useEffect(() => {
+    const info = getPassSave()
+    if (info.userName && info.passWord) {
+      setCheck(true)
+      setUserName(info.userName)
+      setPassWord(info.passWord)
+    }
+  }, [])
+
+  // 键盘按下回车事件
+  const keyUpEntFu = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') loginClickFu()
+  }
+  // 点击登录
+  const loginClickFu = useCallback(async () => {
+    // 非空判断
+    if (userName === '') return MessageFu.warning('请输入账号!')
+    else if (passWord === '') return MessageFu.warning('请输入密码!')
+
+    const regex =
+      /^(?=.*[A-Za-z])(?=.*\d)|(?=.*[A-Za-z])(?=.*[!@#$%^&*])|(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/
+
+    const flagPass = regex.test(passWord)
+    if (!flagPass) {
+      return MessageFu.warning('用户名或密码错误')
+    }
+
+    const obj = {
+      userName,
+      passWord: encodeStr(Base64.encode(passWord))
+    }
+    const res: any = await userLoginAPI(obj)
+    if (res.code === 0) {
+      MessageFu.success('登录成功')
+
+      // 检查密码是不是默认密码，是的话给提示
+      if (passWord === 'Aa147852') {
+        window.setTimeout(() => {
+          MessageFu.warning('您的密码还是默认密码，请尽快修改!')
+        }, 1000)
+      }
+
+      // 用户信息存到本地
+      setTokenInfo(res.data)
+      history.push('/')
+
+      // 记住密码
+      if (check) {
+        setPassSave({ userName, passWord })
+      } else setPassSave({})
+
+      // const urlAll = window.location.href
+      // if (urlAll.includes('?back=')) {
+      //   const url = urlAll.split('?back=')[1]
+      //   if (url) history.push(`/${url}`)
+      //   else history.push('/')
+      // } else history.push('/')
+    } else if (res.code === 3014) {
+      MessageFu.warning('用户名或密码错误')
+    }
+  }, [check, passWord, userName])
+
+  return (
+    <div className={styles.Login}>
+      <div className='loginTit'>馆藏文物安全管理专项行动</div>
+
+      <div className='mainleft'>
+        <img className='mainleft1' src={require('@/assets/img/login_logo.png')} alt='' />
+        <img className='mainleft2' src={require('@/assets/img/loginImg.png')} alt='' />
+      </div>
+
+      <div className='mainRight'>
+        {/* logg */}
+        <div className='loginTxt'>欢迎登录</div>
+
+        <img className='loginImg' src={require('@/assets/img/login_logo_3.png')} alt='' />
+
+        {/* 账号密码输入框 */}
+        <div className='inputBox'>
+          <div className='inputBoxRow'>
+            <Input
+              onKeyUp={e => keyUpEntFu(e)}
+              value={userName}
+              onChange={e => setUserName(e.target.value.trim())}
+              // prefix={<UserOutlined rev={undefined} />}
+              placeholder='请输入账号'
+              maxLength={15}
+            />
+          </div>
+          <div className='inputBoxRow'>
+            <Input.Password
+              onKeyUp={e => keyUpEntFu(e)}
+              value={passWord}
+              onChange={e => setPassWord(e.target.value.trim())}
+              // prefix={<LockOutlined rev={undefined} />}
+              placeholder='请输入密码'
+              maxLength={20}
+            />
+          </div>
+          <div className='inputBoxRow'>
+            <Checkbox checked={check} onChange={e => setCheck(e.target.checked)}>
+              记住密码
+            </Checkbox>
+          </div>
+        </div>
+
+        {/* 登录按钮 */}
+        <div className='loginBtn'>
+          <Button type='primary' size='large' onClick={loginClickFu}>
+            登 录
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/Z_system/Z1dict/Z1add.tsx

@@ -0,0 +1,224 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import { Button, Cascader, Form, FormInstance, Input, InputNumber, Modal } from 'antd'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
+import { MessageFu } from '@/utils/message'
+import { TypeZ1dict } from './type'
+import { Z1_APIgetInfo, Z1_APIsave } from '@/store/action/Z1dict'
+
+export type Z1AddInfoType = {
+  id: string
+  txt: '新增' | '编辑'
+  acInfo: TypeZ1dict
+}
+
+type Props = {
+  acShuTxt: string
+  addInfo: Z1AddInfoType
+  addFu: () => void
+  closeFu: () => void
+  isNoAcIds: string[] //没有数据或者删除了的时候-既右侧没有操作的时候用到
+}
+
+function Z1add({ addInfo, addFu, closeFu, isNoAcIds, acShuTxt }: Props) {
+  const { dictList: treeData } = useSelector((state: RootState) => state.Z1dict)
+
+  // 级联选择器改变的时候 筛选当前级联的 信息出来
+  const [acCardInfo, setAcCardInfo] = useState({} as TypeZ1dict)
+  const [parentIdArr, setParentIdArr] = useState<string[] | null>(null)
+
+  // useEffect(() => {
+  //   console.log(acCardInfo, parentIdArr)
+  // }, [acCardInfo, parentIdArr])
+
+  const saveIdsRef = useRef<string[]>([])
+
+  useEffect(() => {
+    setAcCardInfo(addInfo.acInfo)
+
+    let ids: string[] | null = addInfo.acInfo.id ? [addInfo.acInfo.id] : null
+
+    if (addInfo.acInfo.ancestor) ids = [...addInfo.acInfo.ancestor.split(','), addInfo.acInfo.id]
+
+    let idsRes = ids
+    if (ids && ids.length >= 1 && addInfo.txt === '编辑') {
+      ids.pop()
+    }
+
+    if (idsRes) {
+      // 保存的时候需要补前面3个级别
+      saveIdsRef.current = idsRes.filter((v, i) => i <= 2)
+      // 去掉0和前2级
+      idsRes = idsRes.filter((v, i) => i > 2)
+    }
+
+    setParentIdArr(idsRes)
+  }, [addInfo.acInfo, addInfo.txt])
+
+  const cardChange = useCallback((aa: any, bb: any) => {
+    setParentIdArr(aa)
+
+    if (bb && bb.length) setAcCardInfo(bb[bb.length - 1])
+    else setAcCardInfo({} as TypeZ1dict)
+  }, [])
+
+  const getInfoFu = useCallback(async (id: string) => {
+    const res = await Z1_APIgetInfo(id)
+    if (res.code === 0) {
+      FormBoxRef.current?.setFieldsValue({
+        ...res.data
+      })
+    }
+  }, [])
+  useEffect(() => {
+    if (addInfo.txt === '编辑') getInfoFu(addInfo.id)
+    else {
+      FormBoxRef.current?.setFieldsValue({
+        sort: 50000
+      })
+    }
+  }, [addInfo.id, addInfo.txt, getInfoFu])
+
+  // 设置表单初始数据（区分编辑和新增）
+  const FormBoxRef = useRef<FormInstance>(null)
+
+  // 没有通过校验
+  const onFinishFailed = useCallback(() => {
+    // return MessageFu.warning("有表单不符号规则!");
+  }, [])
+
+  // 通过校验点击确定
+  const onFinish = useCallback(
+    async (values: any) => {
+      let ancestor = ''
+      let parentId: string | null = null
+
+      if (parentIdArr && parentIdArr.length >= 5 && addInfo.txt === '新增')
+        return MessageFu.warning('最多支持五级!')
+
+      if (acCardInfo) parentId = addInfo.txt === '编辑' ? acCardInfo.parentId : acCardInfo.id
+      if (parentIdArr && parentId) {
+        let arrTemp = [...saveIdsRef.current, ...parentIdArr.filter(v => v !== addInfo.id)]
+        ancestor = arrTemp.join(',')
+      }
+
+      // 新增并且没有父级
+      if (addInfo.txt === '新增' && !parentId && !ancestor) {
+        // console.log('xxx', saveIdsRef.current)
+
+        parentId = saveIdsRef.current[saveIdsRef.current.length - 1]
+        ancestor = saveIdsRef.current.join(',')
+        // console.log(123, parentId, ancestor)
+
+        // 外层没有选中
+        if (!addInfo.acInfo.id) {
+          parentId = isNoAcIds[isNoAcIds.length - 1]
+          ancestor = isNoAcIds.join(',')
+        }
+      }
+
+      // let level = 1
+      // if (parentIdArr) {
+      //   level = addInfo.txt === '新增' ? acCardInfo.level + 1 : acCardInfo.level
+      // }
+      const obj = {
+        ...values,
+        id: addInfo.txt === '编辑' ? addInfo.id : null,
+        ancestor,
+        // level,
+        parentId,
+        type: 'dict'
+      }
+      // console.log(123, obj)
+      // if (1 + 1 === 2) {
+      //   return
+      // }
+
+      const res = await Z1_APIsave(obj)
+
+      if (res.code === 0) {
+        MessageFu.success(addInfo.txt + '成功!')
+        addFu()
+        closeFu()
+      }
+    },
+    [acCardInfo, addFu, addInfo.acInfo.id, addInfo.id, addInfo.txt, closeFu, isNoAcIds, parentIdArr]
+  )
+  return (
+    <Modal
+      wrapClassName={styles.Z1add}
+      open={true}
+      title={addInfo.txt}
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className='Z1aMain'>
+        <Form
+          scrollToFirstError={true}
+          ref={FormBoxRef}
+          name='basic'
+          labelCol={{ span: 3 }}
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+          autoComplete='off'
+        >
+          <div className='fromRow'>
+            <div className='fromRowll'>上级字典：</div>
+            <div className='fromRowrr'>
+              <Cascader
+                style={{ width: 658 }}
+                disabled={addInfo.txt === '编辑'}
+                changeOnSelect
+                fieldNames={{ label: 'name', value: 'id', children: 'children' }}
+                options={treeData}
+                // placeholder={addInfo.txt === '编辑' ? '空' : '请选择'}
+                placeholder={acShuTxt}
+                value={parentIdArr ? [...parentIdArr] : []}
+                onChange={cardChange}
+              />
+            </div>
+          </div>
+
+          <Form.Item
+            label='字典值'
+            name='name'
+            rules={[{ required: true, message: '请输入字典值!' }]}
+            getValueFromEvent={e => e.target.value.replace(/\s+/g, '')}
+          >
+            <Input maxLength={30} showCount placeholder='请输入内容' />
+          </Form.Item>
+
+          <div className='fromRow2'>
+            <Form.Item
+              label='排序值'
+              name='sort'
+              rules={[{ required: true, message: '请输入排序值!' }]}
+            >
+              <InputNumber min={1} max={50000} precision={0} placeholder='请输入' />
+            </Form.Item>
+            <div className='fromRowTit'>
+              请输入1~50000的数字。数字越小，排序越靠前。数字相同时，更新发布的内容排在前面
+            </div>
+          </div>
+
+          {/* 确定和取消按钮 */}
+          <br />
+          <Form.Item wrapperCol={{ offset: 9, span: 16 }}>
+            <Button type='primary' htmlType='submit'>
+              提交
+            </Button>
+            &emsp;
+            <MyPopconfirm txtK='取消' onConfirm={closeFu} />
+          </Form.Item>
+        </Form>
+      </div>
+    </Modal>
+  )
+}
+
+const MemoZ1add = React.memo(Z1add)
+
+export default MemoZ1add

src/pages/Z_system/Z1dict/data.ts

@@ -0,0 +1,32 @@
+import { TypeZ1dict } from './type'
+
+// 把所有的字典，只保留前面2级，给下拉框筛选
+export const Z1toTowFu = (data: TypeZ1dict[]) => {
+  return data.map(item => ({
+    ...item,
+    children: item.children?.map(child => ({
+      ...child,
+      children: undefined // 移除第三层子级
+    }))
+  }))
+}
+
+// 通过id获取 树的obj
+export const treeResIdFu = (list: any, id: string) => {
+  // 每次进来使用find遍历一次
+  let res = list.find((item: any) => item.id === id)
+
+  if (res) {
+    return res
+  } else {
+    for (let i = 0; i < list.length; i++) {
+      if (list[i].children instanceof Array && list[i].children.length > 0) {
+        res = treeResIdFu(list[i].children, id)
+
+        if (res) return res
+      }
+    }
+
+    return null
+  }
+}

src/pages/Z_system/Z1dict/index.module.scss

@@ -0,0 +1,141 @@
+.Z1dict {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 24px;
+  :global {
+    .Z1top {
+      display: flex;
+      justify-content: space-between;
+      .Z1topll {
+        display: flex;
+        align-items: center;
+      }
+    }
+    .Z1main {
+      margin-top: 20px;
+      height: calc(100% - 30px);
+      display: flex;
+      justify-content: space-between;
+      .Z1m1ll {
+        width: 70%;
+        overflow-y: auto;
+        .site-tree-search-value {
+          color: red;
+          font-weight: 700;
+        }
+        .ant-tree {
+          min-height: 100%;
+          padding: 10px;
+        }
+        .Z1m1llNone {
+          width: 70%;
+          height: 80%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: var(--themeColor);
+          font-size: 20px;
+          letter-spacing: 4px;
+          font-weight: 700;
+        }
+
+        .NODATA {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          color: #666666;
+          font-size: 16px;
+          height: 100%;
+          // img {
+          //   width: 150px;
+          // }
+          & > p {
+            margin-bottom: 10px;
+          }
+          div {
+            width: 80%;
+            margin-top: 8%;
+            display: flex;
+            justify-content: space-around;
+          }
+        }
+      }
+      .Z1m1rr {
+        width: calc(30% - 24px);
+        padding: 20px;
+        .Z1mr1 {
+          font-weight: 700;
+          color: var(--themeColor);
+          font-size: 24px;
+        }
+        .Z1mr2 {
+          margin: 20px 0 40px;
+          .ant-btn {
+            font-size: 24px;
+            height: 46px;
+          }
+        }
+
+        .Z1mr3 {
+          display: flex;
+          font-size: 20px;
+          margin-bottom: 30px;
+          .Z1mr3ll {
+            width: 100px;
+            text-align: right;
+            font-weight: 700;
+          }
+          .Z1mr3rr {
+            width: calc(100% - 100px);
+          }
+        }
+      }
+    }
+  }
+}
+
+// 新增弹窗页面
+.Z1add {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+
+    .ant-modal {
+      width: 800px !important;
+    }
+
+    .ant-modal-body {
+      border-top: 1px solid #ccc;
+    }
+
+    .Z1aMain {
+      padding-top: 15px;
+      .fromRow2 {
+        position: relative;
+
+        .fromRowTit {
+          position: absolute;
+          left: 200px;
+          top: 5px;
+          color: #999;
+          font-size: 12px;
+        }
+      }
+      .fromRow {
+        display: flex;
+        align-items: center;
+        margin-bottom: 24px;
+        .fromRowll {
+          width: 94px;
+          text-align: right;
+          position: relative;
+        }
+        .fromRowrr {
+          width: calc(100% - 94px);
+        }
+      }
+    }
+  }
+}

src/pages/Z_system/Z1dict/index.tsx

@@ -0,0 +1,327 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import { useDispatch, useSelector } from 'react-redux'
+import { Z1_APIdel, Z1_APIgetDict } from '@/store/action/Z1dict'
+import { RootState } from '@/store'
+import { Button, Cascader, Input, Tree, TreeDataNode } from 'antd'
+import { treeResIdFu, Z1toTowFu } from './data'
+import { TypeZ1dict } from './type'
+import Z1add, { Z1AddInfoType } from './Z1add'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import { MessageFu } from '@/utils/message'
+import { filterTreeByName } from '@/utils/history'
+import { baseURL } from '@/utils/http'
+
+// 不可编辑的id集合
+const noIdArr = [
+  '12592',
+  '12593',
+  '12594',
+  '12595',
+  '12596',
+  '12597',
+  '12561',
+  '12635',
+  '12535',
+  // '12568',
+  // '12569',
+  // '12572',
+  // '12573',
+  // '12574',
+  // '12577',
+  '12545',
+  '12500'
+]
+
+function Z1dict() {
+  const [loding, setLoding] = useState(false)
+
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    dispatch(Z1_APIgetDict())
+  }, [dispatch])
+
+  // 级联改变
+  const [topId, setTopId] = useState(['10000', '12000'])
+
+  // 传给新增、编辑子组件（没有数据或者删除了的时候-既右侧没有操作的时候）
+  const isNoAcIds = useRef<string[]>([])
+
+  useEffect(() => {
+    isNoAcIds.current = ['0', ...topId]
+
+    if (topId && topId.length)
+      dispatch(
+        Z1_APIgetDict(topId[1], data => {
+          setLoding(true)
+          if (data && data.length) {
+            setAcShu(data[0].id)
+            const txtDom: HTMLDivElement = document.querySelector('.ant-select-selection-item')!
+            if (txtDom) {
+              acShuTxtRef.current = txtDom.title
+            }
+          }
+        })
+      )
+  }, [dispatch, topId])
+
+  const onChange = useCallback((value: any) => {
+    // console.log('级联改变', value)
+    setTopId(value)
+  }, [])
+
+  const { dictAll, dictList } = useSelector((state: RootState) => state.Z1dict)
+
+  // 点击重置
+  const resetFu = useCallback(
+    (flag: boolean) => {
+      // 重置 flag为true
+      // 新增和编辑 为false
+      if (flag) {
+        setTopId(['10000', '12000'])
+      } else dispatch(Z1_APIgetDict(topId[1]))
+
+      setValue('')
+      setValue2('')
+    },
+    [dispatch, topId]
+  )
+
+  // 当前选中的树节点ID
+  const [acShu, setAcShu] = useState('0')
+  // 树节点文字信息
+  const acShuTxtRef = useRef('')
+
+  // 点击树节点
+  const onSelect = (id: any) => {
+    // console.log('点击树节点', id)
+    if (id[0]) {
+      setAcShu(id[0])
+      // const txtDom: HTMLDivElement = document.querySelector('.ant-select-selection-item')!
+      // console.log('-------11', txtDom.title)
+      // if (txtDom) acShuTxtRef.current = txtDom.title
+    }
+  }
+
+  const [value, setValue] = useState('')
+  const [value2, setValue2] = useState('')
+
+  const timeRef = useRef(-1)
+  const valueChange = useCallback((val: string) => {
+    setValue(val.trim())
+    clearTimeout(timeRef.current)
+    timeRef.current = window.setTimeout(() => {
+      setValue2(val.trim())
+    }, 500)
+  }, [])
+
+  // value变化的时候获取所有dom 设置隐藏
+  const treeDataTemp = useMemo(() => {
+    if (value2) {
+      return filterTreeByName(dictList, value2)
+    } else return dictList
+  }, [dictList, value2])
+
+  // 搜索高亮
+  const treeData = useMemo(() => {
+    const loop = (dataTemp: any[]): TreeDataNode[] => {
+      const data = dataTemp || []
+
+      return data.map(item => {
+        const strTitle = ((item.num ? item.num + ' ' : '') + item.name) as string
+        const strTitleD = strTitle.toUpperCase()
+
+        const valueD = value.toUpperCase()
+        const index = strTitleD.indexOf(valueD)
+
+        const beforeStr = strTitle.substring(0, index)
+        const afterStr = strTitle.slice(index + value.length)
+        const title =
+          index > -1 ? (
+            <span key={item.id}>
+              {beforeStr}
+              <span className='site-tree-search-value'>{value}</span>
+              {afterStr}
+            </span>
+          ) : (
+            <span key={item.id}>{strTitle}</span>
+          )
+        if (item.children) {
+          return { title, key: item.id, children: loop(item.children) }
+        }
+        return {
+          title,
+          key: item.id
+        }
+      })
+    }
+
+    return loop(treeDataTemp)
+  }, [treeDataTemp, value])
+
+  // 右侧信息
+  const rightData = useMemo(() => {
+    let obj = {} as TypeZ1dict
+    if (treeDataTemp && treeDataTemp.length) obj = treeResIdFu(treeDataTemp, acShu)
+
+    return obj || {}
+  }, [acShu, treeDataTemp])
+
+  // 点击新增和编辑
+  const [addInfo, setAddInfo] = useState({} as Z1AddInfoType)
+
+  const addSonFu = useCallback(
+    (id: string) => {
+      setAddInfo({
+        id,
+        txt: id === '-1' ? '新增' : '编辑',
+        acInfo: rightData
+      })
+    },
+    [rightData]
+  )
+
+  // 点击删除
+  const delTree = useCallback(
+    async (id: string) => {
+      const res = await Z1_APIdel(id)
+      if (res.code === 0) {
+        MessageFu.success('删除成功!')
+        resetFu(false)
+      }
+    },
+    [resetFu]
+  )
+
+  return (
+    <div className={styles.Z1dict}>
+      <div className='pageTitle'>数据字典</div>
+      {/* 顶部 */}
+      <div className='Z1top'>
+        <div className='Z1topll'>
+          {dictAll.length ? (
+            <Cascader
+              style={{ width: 240 }}
+              value={topId}
+              options={Z1toTowFu(dictAll)}
+              fieldNames={{ label: 'name', value: 'id', children: 'children' }}
+              onChange={onChange}
+              allowClear={false}
+            />
+          ) : (
+            <div style={{ width: 240 }}></div>
+          )}
+          &emsp;
+          <Input
+            style={{ width: 240 }}
+            placeholder='请输入字典值'
+            maxLength={30}
+            value={value}
+            onChange={e => valueChange(e.target.value)}
+          />
+        </div>
+        <div className='Z1toprr'>
+          <Button
+            type='primary'
+            onClick={() =>
+              setAddInfo({
+                id: '-1',
+                txt: '新增',
+                acInfo: rightData
+              })
+            }
+          >
+            新增
+          </Button>
+          &emsp;
+          <Button onClick={() => resetFu(true)}>重置</Button>
+        </div>
+      </div>
+      {/* 主体 */}
+      <div className='Z1main'>
+        <div className='Z1m1ll'>
+          {treeDataTemp && treeDataTemp.length ? (
+            <Tree
+              // 默认全部展开
+              defaultExpandAll={true}
+              // 数据
+              treeData={treeData}
+              // 自定义字段
+              // fieldNames={{ title: 'name', key: 'id', children: 'children' }}
+              // 选中
+              selectedKeys={[acShu]}
+              // 点击
+              onSelect={onSelect}
+            />
+          ) : null}
+
+          {loding && treeDataTemp.length === 0 ? (
+            <div className='NODATA'>
+              <img src={baseURL + `/baseData/staImg/build.png`} alt='' />
+              <p>暂无相关搜索结果，请更换关键字搜索</p>
+            </div>
+          ) : null}
+        </div>
+        <div className='Z1m1rr'>
+          {rightData.id ? (
+            <>
+              <div className='Z1mr1'>
+                操作{noIdArr.includes(rightData.id) ? '（不可编辑）' : ''}
+              </div>
+              <div className='Z1mr2'>
+                <Button
+                  type='text'
+                  onClick={() => addSonFu(rightData.id)}
+                  disabled={noIdArr.includes(rightData.id)}
+                >
+                  编辑
+                </Button>
+                &emsp;
+                <MyPopconfirm
+                  txtK='删除'
+                  onConfirm={() => delTree(rightData.id)}
+                  disabled={noIdArr.includes(rightData.id)}
+                />
+              </div>
+
+              {/* <div className='Z1mr3'>
+                <div className='Z1mr3ll'>id:</div>
+                <div className='Z1mr3rr'>{rightData.id}</div>
+              </div> */}
+
+              <div className='Z1mr3'>
+                <div className='Z1mr3ll'>字典值：</div>
+                <div className='Z1mr3rr'>{rightData.name}</div>
+              </div>
+
+              <div className='Z1mr3'>
+                <div className='Z1mr3ll'>层级：</div>
+                <div className='Z1mr3rr'>{rightData.level - 2}</div>
+              </div>
+
+              <div className='Z1mr3'>
+                <div className='Z1mr3ll'>排序值：</div>
+                <div className='Z1mr3rr'>{rightData.sort}</div>
+              </div>
+            </>
+          ) : null}
+        </div>
+      </div>
+      {/* 新增/编辑页面 中图法分类 */}
+      {addInfo.id ? (
+        <Z1add
+          acShuTxt={acShuTxtRef.current}
+          addInfo={addInfo}
+          addFu={() => resetFu(false)}
+          closeFu={() => setAddInfo({} as Z1AddInfoType)}
+          isNoAcIds={isNoAcIds.current}
+        />
+      ) : null}
+    </div>
+  )
+}
+
+const MemoZ1dict = React.memo(Z1dict)
+
+export default MemoZ1dict

src/pages/Z_system/Z1dict/type.d.ts

@@ -0,0 +1,13 @@
+export type TypeZ1dict = {
+  id: string
+  parentId: string
+  sort: number
+  name: string
+  num: string
+  description: any
+  ancestor: string
+  level: number
+  children?: TypeZ1dict[]
+
+  __keep?: boolean
+}

src/pages/Z_system/Z4organization/Z4add.tsx

@@ -0,0 +1,215 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import { Button, Cascader, Form, FormInstance, Input, InputNumber, Modal } from 'antd'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
+import { MessageFu } from '@/utils/message'
+import { TypeZ4Tree } from './type'
+import { Z4_APIgetInfo, Z4_APIsave } from '@/store/action/Z4organization'
+import TextArea from 'antd/es/input/TextArea'
+
+export type Z4AddInfoType = {
+  id: string
+  txt: '新增' | '编辑'
+  acInfo: TypeZ4Tree
+}
+
+type Props = {
+  addInfo: Z4AddInfoType
+  addFu: () => void
+  closeFu: () => void
+}
+
+function Z4add({ addInfo, addFu, closeFu }: Props) {
+  const treeData = useSelector((state: RootState) => state.Z4organization.treeData)
+
+  // 级联选择器改变的时候 筛选当前级联的 信息出来
+  const [acCardInfo, setAcCardInfo] = useState({} as TypeZ4Tree)
+  const [parentIdArr, setParentIdArr] = useState<string[] | null>(null)
+
+  // useEffect(() => {
+  //   console.log(acCardInfo, parentIdArr)
+  // }, [acCardInfo, parentIdArr])
+
+  useEffect(() => {
+    setAcCardInfo(addInfo.acInfo)
+
+    let ids: string[] | null = addInfo.acInfo.id ? [addInfo.acInfo.id] : null
+
+    if (addInfo.acInfo.ancestor) ids = [...addInfo.acInfo.ancestor.split(','), addInfo.acInfo.id]
+
+    let idsRes = ids
+    if (ids && ids.length >= 1 && addInfo.txt === '编辑') {
+      ids.pop()
+    }
+
+    if (idsRes) idsRes = idsRes.filter((v, i) => v !== '0')
+
+    setParentIdArr(idsRes)
+  }, [addInfo.acInfo, addInfo.txt])
+
+  const cardChange = useCallback((aa: any, bb: any) => {
+    setParentIdArr(aa)
+
+    if (bb && bb.length) setAcCardInfo(bb[bb.length - 1])
+    else setAcCardInfo({} as TypeZ4Tree)
+  }, [])
+
+  const getInfoFu = useCallback(async (id: string) => {
+    const res = await Z4_APIgetInfo(id)
+    if (res.code === 0) {
+      FormBoxRef.current?.setFieldsValue({
+        ...res.data
+      })
+    }
+  }, [])
+  useEffect(() => {
+    if (addInfo.txt === '编辑') getInfoFu(addInfo.id)
+    else {
+      FormBoxRef.current?.setFieldsValue({
+        sort: 999
+      })
+    }
+  }, [addInfo.id, addInfo.txt, getInfoFu])
+
+  // 设置表单初始数据（区分编辑和新增）
+  const FormBoxRef = useRef<FormInstance>(null)
+
+  // 没有通过校验
+  const onFinishFailed = useCallback(() => {
+    // return MessageFu.warning("有表单不符号规则!");
+  }, [])
+
+  // 通过校验点击确定
+  const onFinish = useCallback(
+    async (values: any) => {
+      let ancestor = ''
+      let parentId: string | null = null
+
+      if (parentIdArr && parentIdArr.length >= 5 && addInfo.txt === '新增')
+        return MessageFu.warning('最多支持五级!')
+
+      if (acCardInfo) parentId = addInfo.txt === '编辑' ? acCardInfo.parentId : acCardInfo.id
+      if (parentIdArr && parentId) ancestor = parentIdArr.filter(v => v !== addInfo.id).join(',')
+
+      let level = 1
+      if (parentIdArr) {
+        level = addInfo.txt === '新增' ? acCardInfo.level + 1 : acCardInfo.level
+      }
+
+      // 补0
+      if (addInfo.id === '-1') {
+        // 新增
+        if (!parentId && !ancestor) {
+          ancestor = '0'
+          parentId = '0'
+        } else ancestor = '0,' + ancestor
+      } else {
+        // 编辑
+        if (!ancestor) ancestor = '0'
+        else ancestor = '0,' + ancestor
+      }
+
+      const obj = {
+        ...values,
+        id: addInfo.id === '-1' ? null : addInfo.id,
+        ancestor,
+        level,
+        parentId
+      }
+      // console.log(123, obj)
+      // if (1 + 1 === 2) {
+      //   return
+      // }
+
+      const res = await Z4_APIsave(obj)
+
+      if (res.code === 0) {
+        MessageFu.success(addInfo.txt + '成功!')
+        addFu()
+        closeFu()
+      }
+    },
+    [acCardInfo, addFu, addInfo.id, addInfo.txt, closeFu, parentIdArr]
+  )
+
+  return (
+    <Modal
+      wrapClassName={styles.Z4add}
+      open={true}
+      title={addInfo.txt}
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className='Z4aMain'>
+        <Form
+          scrollToFirstError={true}
+          ref={FormBoxRef}
+          name='basic'
+          labelCol={{ span: 3 }}
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+          autoComplete='off'
+        >
+          <div className='fromRow'>
+            <div className='fromRowll'>上级部门：</div>
+            <div className='fromRowrr'>
+              <Cascader
+                style={{ width: 658 }}
+                disabled={addInfo.txt === '编辑'}
+                changeOnSelect
+                fieldNames={{ label: 'name', value: 'id', children: 'children' }}
+                options={treeData}
+                placeholder={addInfo.txt === '编辑' ? '空' : '请选择'}
+                value={parentIdArr ? [...parentIdArr] : []}
+                onChange={cardChange}
+              />
+            </div>
+          </div>
+
+          <Form.Item
+            label='部门名称'
+            name='name'
+            rules={[{ required: true, message: '请输入部门名称!' }]}
+            getValueFromEvent={e => e.target.value.replace(/\s+/g, '')}
+          >
+            <Input maxLength={20} showCount placeholder='请输入内容' />
+          </Form.Item>
+
+          <Form.Item label='部门说明' name='description'>
+            <TextArea maxLength={100} showCount placeholder='请输入内容' />
+          </Form.Item>
+
+          <div className='fromRow2'>
+            <Form.Item
+              label='排序值'
+              name='sort'
+              rules={[{ required: true, message: '请输入排序值!' }]}
+            >
+              <InputNumber min={1} max={999} precision={0} placeholder='请输入' />
+            </Form.Item>
+            <div className='fromRowTit'>
+              请输入1~999的数字。数字越小，排序越靠前。数字相同时，更新发布的内容排在前面
+            </div>
+          </div>
+
+          {/* 确定和取消按钮 */}
+          <br />
+          <Form.Item wrapperCol={{ offset: 9, span: 16 }}>
+            <Button type='primary' htmlType='submit'>
+              提交
+            </Button>
+            &emsp;
+            <MyPopconfirm txtK='取消' onConfirm={closeFu} />
+          </Form.Item>
+        </Form>
+      </div>
+    </Modal>
+  )
+}
+
+const MemoZ4add = React.memo(Z4add)
+
+export default MemoZ4add

src/pages/Z_system/Z4organization/index.module.scss

@@ -0,0 +1,158 @@
+.Z4organization {
+  background-color: #fcf9f5;
+  border-radius: 10px;
+  padding: 24px;
+  :global {
+    .Z4top {
+      display: flex;
+      justify-content: space-between;
+      .ant-input-affix-wrapper {
+        height: 40px;
+        border: none;
+        background-size: 100% 100%;
+        background-image: url('../../../assets/layImg/home_input_bg.png');
+      }
+    }
+    .ant-tree {
+      background-color: #fcf9f5;
+      .ant-tree-title {
+        font-size: 20px;
+      }
+      .ant-tree-node-selected {
+        background-color: var(--themeColor) !important;
+        color: #fff;
+        padding: 3px 8px;
+      }
+      .ant-tree-switcher {
+        & > span {
+          line-height: 30px !important;
+          font-size: 20px !important;
+        }
+      }
+    }
+
+    .Z4main {
+      margin-top: 15px;
+      height: calc(100% - 50px);
+      & > div {
+        height: 100%;
+      }
+      .Z4Null {
+        width: 100%;
+        height: 300px;
+        font-size: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .Z4m1 {
+        display: flex;
+        justify-content: space-between;
+        .Z4m1ll {
+          width: 50%;
+          overflow-y: auto;
+          .site-tree-search-value {
+            color: red;
+            font-weight: 700;
+          }
+          .ant-tree {
+            min-height: 100%;
+          }
+        }
+        .Z4m1rr {
+          width: calc(50% - 24px);
+
+          .Z4mr2 {
+            .Z4mr2Row {
+              display: flex;
+              // align-items: center;
+              margin-bottom: 20px;
+              font-size: 20px;
+              .Z4mr2Row1 {
+                font-weight: 700;
+                font-size: 20px;
+              }
+
+              .ant-btn {
+                font-size: 20px;
+                height: 46px;
+              }
+
+              .Z4mr2Row2 {
+                width: calc(100% - 105px);
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+              .Z4mr2Row2_1 {
+                width: calc(100% - 105px);
+              }
+            }
+            .Z4mr2Row0 {
+              margin-bottom: 0;
+              align-items: center;
+            }
+            .Z4mr2RowLast {
+              align-items: self-start;
+              .Z4mr2Row2 {
+                display: flex;
+                flex-wrap: wrap;
+              }
+            }
+          }
+
+          .Z4mr3 {
+            margin-top: 15px;
+            height: calc(100% - 100px);
+            background-color: red;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 新增弹窗页面
+.Z4add {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+
+    .ant-modal {
+      width: 800px !important;
+    }
+
+    .ant-modal-body {
+      border-top: 1px solid #ccc;
+    }
+
+    .Z4aMain {
+      padding-top: 15px;
+      .fromRow2 {
+        position: relative;
+
+        .fromRowTit {
+          position: absolute;
+          left: 200px;
+          top: 5px;
+          color: #999;
+          font-size: 12px;
+        }
+      }
+      .fromRow {
+        display: flex;
+        align-items: center;
+        margin-bottom: 24px;
+        .fromRowll {
+          width: 94px;
+          text-align: right;
+          position: relative;
+        }
+        .fromRowrr {
+          width: calc(100% - 94px);
+        }
+      }
+    }
+  }
+}

src/pages/Z_system/Z4organization/index.tsx

@@ -0,0 +1,277 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import { Button, Input, Tree, TreeDataNode } from 'antd'
+import { useDispatch, useSelector } from 'react-redux'
+import { D4_APIgetTree, Z4_APIdel, Z4_APIgetUserById } from '@/store/action/Z4organization'
+import { RootState } from '@/store'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import { MessageFu } from '@/utils/message'
+import { treeResIdFu } from '../Z1dict/data'
+import { TypeZ4Tree, TypeZ4UserList } from './type'
+import Z4add, { Z4AddInfoType } from './Z4add'
+import AAbtn from '@/pages/AAnew/AAbtn'
+import { filterTreeByName } from '@/utils/history'
+
+function Z4organization() {
+  const dispatch = useDispatch()
+
+  const [loding, setLoding] = useState(false)
+
+  const getInfoFu = useCallback(
+    (flag: boolean) => {
+      // 默认选中第一个为true
+      dispatch(
+        D4_APIgetTree(data => {
+          setLoding(true)
+          if (flag && data && data.length) setAcShu(data[0].id)
+        })
+      )
+    },
+    [dispatch]
+  )
+
+  useEffect(() => {
+    getInfoFu(true)
+  }, [getInfoFu])
+
+  const { treeData: dictAll } = useSelector((state: RootState) => state.Z4organization)
+
+  // 点击重置
+  const resetFu = useCallback(
+    (flag: boolean) => {
+      // 重置 flag为true
+      // 新增和编辑 为false
+      getInfoFu(flag)
+
+      setValue('')
+      setValue2('')
+    },
+    [getInfoFu]
+  )
+
+  // 当前选中的树节点ID
+  const [acShu, setAcShu] = useState('')
+
+  // 获取相关成员列表
+  const [userList, setUserList] = useState<TypeZ4UserList[]>([])
+
+  const getUserByIdFu = useCallback(async (id: string) => {
+    const res = await Z4_APIgetUserById(id)
+    if (res.code === 0) {
+      setUserList(res.data)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (acShu) getUserByIdFu(acShu)
+  }, [acShu, getUserByIdFu])
+
+  // 点击树节点
+  const onSelect = (id: any) => {
+    if (id[0]) setAcShu(id[0])
+  }
+  const [value, setValue] = useState('')
+  const [value2, setValue2] = useState('')
+
+  const timeRef = useRef(-1)
+  const valueChange = useCallback((val: string) => {
+    setValue(val.trim())
+    clearTimeout(timeRef.current)
+    timeRef.current = window.setTimeout(() => {
+      setValue2(val.trim())
+    }, 500)
+  }, [])
+
+  // value变化的时候获取所有dom 设置隐藏
+  const treeDataTemp = useMemo(() => {
+    if (value2) {
+      const list: any = dictAll
+      return filterTreeByName(list, value2)
+    } else return dictAll
+  }, [dictAll, value2])
+
+  const treeData = useMemo(() => {
+    const loop = (dataTemp: any[]): TreeDataNode[] => {
+      const data = dataTemp || []
+
+      return data.map(item => {
+        const strTitle = ((item.num ? item.num + ' ' : '') + item.name) as string
+
+        const strTitleD = strTitle.toUpperCase()
+
+        const valueD = value.toUpperCase()
+        const index = strTitleD.indexOf(valueD)
+
+        const beforeStr = strTitle.substring(0, index)
+        const afterStr = strTitle.slice(index + value.length)
+        const title =
+          index > -1 ? (
+            <span key={item.id}>
+              {beforeStr}
+              <span className='site-tree-search-value'>{value}</span>
+              {afterStr}
+            </span>
+          ) : (
+            <span key={item.id}>{strTitle}</span>
+          )
+        if (item.children) {
+          return { title, key: item.id, children: loop(item.children) }
+        }
+        return {
+          title,
+          key: item.id
+        }
+      })
+    }
+
+    return loop(treeDataTemp)
+  }, [treeDataTemp, value])
+
+  // 右侧信息
+  const rightData = useMemo(() => {
+    let obj = {} as TypeZ4Tree
+
+    obj = treeResIdFu(treeDataTemp, acShu)
+
+    return obj || {}
+  }, [acShu, treeDataTemp])
+
+  // 点击删除
+  const delTree = useCallback(
+    async (id: string) => {
+      const res = await Z4_APIdel(id)
+      if (res.code === 0) {
+        MessageFu.success('删除成功!')
+        resetFu(true)
+      }
+    },
+    [resetFu]
+  )
+
+  // 点击新增和编辑
+  const [addInfo, setAddInfo] = useState({} as Z4AddInfoType)
+
+  const addSonFu = useCallback(
+    (id: string) => {
+      setAddInfo({
+        id,
+        txt: id === '-1' ? '新增' : '编辑',
+        acInfo: rightData
+      })
+    },
+    [rightData]
+  )
+
+  return (
+    <div className={styles.Z4organization}>
+      <div className='pageTitle'>部门管理</div>
+      <div className='Z4top'>
+        <Input
+          allowClear
+          placeholder='请输入部门名称'
+          style={{ width: 300 }}
+          value={value}
+          onChange={e => valueChange(e.target.value)}
+        />
+        <AAbtn
+          txt={1}
+          onClick={() => setAddInfo({ id: '-1', txt: '新增', acInfo: rightData })}
+          tit='新增'
+        />
+      </div>
+
+      {/* 主体 */}
+      <div className='Z4main'>
+        <div className='Z4m1'>
+          <div className='Z4m1ll'>
+            {treeDataTemp && treeDataTemp.length ? (
+              <Tree
+                // 默认全部展开
+                defaultExpandAll={true}
+                // 数据
+                treeData={treeData}
+                // 自定义字段
+                // fieldNames={{ title: 'title', key: 'key', children: 'children' }}
+                // 选中
+                selectedKeys={[acShu]}
+                // 点击
+                onSelect={onSelect}
+              />
+            ) : loding ? (
+              <div className='Z4Null'>暂无数据</div>
+            ) : null}
+          </div>
+          <div className='Z4m1rr'>
+            {rightData.id ? (
+              <>
+                <div className='Z4mr2'>
+                  <div className='Z4mr2Row Z4mr2Row0'>
+                    <div className='Z4mr2Row1'>操作：</div>
+                    <div>
+                      <Button type='text' onClick={() => addSonFu(rightData.id)}>
+                        编辑
+                      </Button>
+                      &emsp;
+                      <MyPopconfirm txtK='删除' onConfirm={() => delTree(rightData.id)} />
+                    </div>
+                  </div>
+
+                  <div className='Z4mr2Row'>
+                    <div className='Z4mr2Row1'>部门名称：</div>
+                    <div>{rightData.name}</div>
+                  </div>
+
+                  <div className='Z4mr2Row'>
+                    <div className='Z4mr2Row1'>部门说明：</div>
+                    <div className='Z4mr2Row2_1'>{rightData.description || '（空）'}</div>
+                  </div>
+
+                  <div className='Z4mr2Row'>
+                    <div className='Z4mr2Row1'>层级：</div>
+                    <div>{rightData.level}</div>
+                  </div>
+                  {/* <div className='Z4mr2Row'>
+                    <div className='Z4mr2Row1'>id：</div>
+                    <div>{rightData.id}</div>
+                  </div> */}
+
+                  <div className='Z4mr2Row'>
+                    <div className='Z4mr2Row1'>排序值：</div>
+                    <div>{rightData.sort}</div>
+                  </div>
+
+                  <div className='Z4mr2Row Z4mr2RowLast'>
+                    <div className='Z4mr2Row1'>相关成员：</div>
+                    <div className='Z4mr2Row2'>
+                      {userList.length
+                        ? userList.map((v, i) => (
+                            <div key={v.userId}>
+                              {v.userName}
+
+                              {i < userList.length - 1 ? '，' : ''}
+                            </div>
+                          ))
+                        : '（空）'}
+                    </div>
+                  </div>
+                </div>
+              </>
+            ) : null}
+          </div>
+        </div>
+      </div>
+      {/* 新增/编辑页面 中图法分类 */}
+      {addInfo.id ? (
+        <Z4add
+          addInfo={addInfo}
+          addFu={() => resetFu(false)}
+          closeFu={() => setAddInfo({} as Z4AddInfoType)}
+        />
+      ) : null}
+    </div>
+  )
+}
+
+const MemoZ4organization = React.memo(Z4organization)
+
+export default MemoZ4organization

src/pages/Z_system/Z4organization/type.d.ts

@@ -0,0 +1,17 @@
+export type TypeZ4Tree = {
+  id: string
+  parentId: string
+  sort: number
+  name: string
+  ancestor: string
+  level: number
+  description: string
+  children?: TypeZ4Tree[]
+}
+
+export type TypeZ4UserList = {
+  deptId: number
+  isLeader: number
+  userId: number
+  userName: string
+}

src/pages/Z_system/Z6user/UserAdd/index.module.scss

@@ -0,0 +1,34 @@
+.userAdd {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+
+    .ant-modal {
+      width: 800px !important;
+    }
+
+    .userAddMain {
+      border-top: 1px solid #999999;
+      padding-top: 15px;
+      width: 100%;
+
+      .passTit {
+        color: #ff4d4f;
+        font-size: 14px;
+        padding-left: 98px;
+      }
+
+      .ant-form-item-label {
+        max-width: 98px;
+        min-width: 98px;
+      }
+      .Z6arow {
+        display: flex;
+        .ant-form-item {
+          margin-right: 40px;
+        }
+      }
+    }
+  }
+}

src/pages/Z_system/Z6user/UserAdd/index.tsx

@@ -0,0 +1,188 @@
+import { MessageFu } from '@/utils/message'
+import { Button, Cascader, Form, FormInstance, Input, Modal, Radio } from 'antd'
+import React, { useCallback, useEffect, useRef } from 'react'
+import styles from './index.module.scss'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import { getUserInfoByIdAPI, userSaveAPI } from '@/store/action/Z6user'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
+import { treeLastIdFindFatherFu } from '../data'
+import { UserTableAPIType } from '@/types'
+
+type Props = {
+  id: any
+  closePage: () => void
+  upTableList: (formOld: UserTableAPIType) => void
+  addTableList: () => void
+  formOld: UserTableAPIType
+}
+
+function UserAdd({ id, closePage, upTableList, addTableList, formOld }: Props) {
+  // 所属部门
+  const { treeData } = useSelector((state: RootState) => state.Z4organization)
+
+  // 设置表单初始数据（区分编辑和新增）
+  const FormBoxRef = useRef<FormInstance>(null)
+
+  const getInfoInAPIFu = useCallback(
+    async (id: number) => {
+      if (treeData && treeData.length) {
+        const res = await getUserInfoByIdAPI(id)
+
+        const data = res.data
+
+        const deptId = treeLastIdFindFatherFu(treeData, data.deptId + '', 'id')
+
+        FormBoxRef.current?.setFieldsValue({
+          ...data,
+          deptId
+        })
+      }
+
+      // console.log("是编辑，在这里发请求拿数据", res);
+    },
+    [treeData]
+  )
+
+  // 没有通过校验
+  const onFinishFailed = useCallback(() => {
+    // return MessageFu.warning("有表单不符号规则!");
+  }, [])
+
+  useEffect(() => {
+    if (id) getInfoInAPIFu(id)
+    else {
+      FormBoxRef.current?.setFieldsValue({})
+    }
+  }, [getInfoInAPIFu, id])
+
+  // 通过校验点击确定
+  const onFinish = useCallback(
+    async (values: any) => {
+      const obj = {
+        ...values,
+        id: id ? id : null
+      }
+
+      const deptIdRes = obj.deptId
+      if (deptIdRes) obj.deptId = Number(deptIdRes[deptIdRes.length - 1])
+
+      // if (1 + 1 === 2) {
+      //   console.log(123, obj)
+
+      //   return
+      // }
+
+      const res: any = await userSaveAPI(obj)
+
+      if (res.code === 0) {
+        MessageFu.success(id ? '编辑成功!' : '新增成功!')
+        if (id) upTableList(formOld)
+        else addTableList()
+
+        closePage()
+      }
+      // console.log("通过校验，点击确定");
+    },
+    [addTableList, closePage, formOld, id, upTableList]
+  )
+
+  return (
+    <Modal
+      wrapClassName={styles.userAdd}
+      destroyOnClose
+      open={true}
+      title={id ? '编辑用户' : '新增用户'}
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <div className='userAddMain'>
+        <Form
+          scrollToFirstError={true}
+          ref={FormBoxRef}
+          name='basic'
+          labelCol={{ span: 5 }}
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+          autoComplete='off'
+          initialValues={{ roleId: 1 }}
+        >
+          <Form.Item
+            label='登录账号'
+            name='userName'
+            rules={[
+              { required: true, message: '请输入账号名!' }
+              // { min: 6, message: '最少4个字!' }
+            ]}
+            getValueFromEvent={e => e.target.value.replace(/\s+/g, '')}
+          >
+            <Input disabled={id} maxLength={15} showCount placeholder='请输入内容' />
+          </Form.Item>
+          {id > 0 ? null : (
+            <Form.Item
+              label='登录密码'
+              name='password'
+              rules={[
+                { required: true, message: '请输入登录密码!' },
+                { min: 8, message: '最少8个字!' },
+                { max: 16, message: '最多16个字!' }
+              ]}
+              getValueFromEvent={e => e.target.value.replace(/\s+/g, '')}
+            >
+              <Input disabled={id} maxLength={16} showCount placeholder='请输入内容' />
+            </Form.Item>
+          )}
+
+          <Form.Item label='用户名称' name='realName'>
+            <Input maxLength={10} showCount placeholder='请输入内容' />
+          </Form.Item>
+
+          <div className='Z6arow'>
+            <Form.Item
+              label='所属部门'
+              name='deptId'
+              rules={[{ required: true, message: '请选择所属部门部门!' }]}
+            >
+              <Cascader
+                allowClear={false}
+                changeOnSelect
+                style={{ width: 240 }}
+                options={treeData}
+                fieldNames={{ label: 'name', value: 'id', children: 'children' }}
+                placeholder='请选择'
+              />
+            </Form.Item>
+          </div>
+
+          <Form.Item
+            label='用户角色'
+            name='roleId'
+            rules={[{ required: true, message: '请选择用户角色!' }]}
+          >
+            <Radio.Group
+              options={[
+                { value: 1, label: '管理员' },
+                { value: 2, label: '普通用户' }
+              ]}
+            />
+          </Form.Item>
+
+          {/* 确定和取消按钮 */}
+          <br />
+          <Form.Item wrapperCol={{ offset: 9, span: 16 }}>
+            <Button type='primary' htmlType='submit'>
+              提交
+            </Button>
+            &emsp;
+            <MyPopconfirm txtK='取消' onConfirm={closePage} />
+          </Form.Item>
+        </Form>
+      </div>
+    </Modal>
+  )
+}
+
+const MemoUserAdd = React.memo(UserAdd)
+
+export default MemoUserAdd

src/pages/Z_system/Z6user/data.ts

@@ -0,0 +1,34 @@
+import { TypeZ4Tree } from '../Z4organization/type'
+
+// 树结构 通过最后一级id得到前面的id或者名称
+
+export function treeLastIdFindFatherFu(
+  tree: TypeZ4Tree[],
+  targetId: string,
+  returnType: 'id' | 'name'
+): string[] {
+  let pathNodes: TypeZ4Tree[] = []
+
+  // 递归遍历函数
+  const traverse = (nodes: TypeZ4Tree[], currentPath: TypeZ4Tree[]): boolean => {
+    for (const node of nodes) {
+      const newPath = [...currentPath, node]
+
+      if (node.id === targetId) {
+        pathNodes = newPath
+        return true
+      }
+
+      if (node.children?.length) {
+        const found = traverse(node.children, newPath)
+        if (found) return true
+      }
+    }
+    return false
+  }
+
+  traverse(tree, [])
+
+  // 根据返回类型转换结果
+  return returnType === 'id' ? pathNodes.map(n => n.id) : pathNodes.map(n => n.name)
+}

src/pages/Z_system/Z6user/index.module.scss

@@ -0,0 +1,99 @@
+.Z6user {
+  background-color: #fcf9f5;
+  border-radius: 10px;
+  :global {
+    .selectBox {
+      border-radius: 10px;
+      padding: 15px 24px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .selectBoxRow {
+        display: flex;
+        .ant-select-selector,
+        .ant-input-affix-wrapper {
+          height: 40px;
+          border: none;
+          background-size: 100% 100%;
+          background-image: url('../../../assets/layImg/home_input_bg.png');
+        }
+        .ant-select-arrow {
+          font-size: 18px;
+          top: 60%;
+        }
+        .ant-select-clear {
+          font-size: 18px;
+          top: 50%;
+          right: 18px;
+        }
+      }
+    }
+
+    .tableBox {
+      border-radius: 10px;
+      overflow: hidden;
+      margin-top: 15px;
+      height: calc(100% - 77px);
+      background-color: #fcf9f5;
+    }
+  }
+}
+
+// 授权
+.Z6auth {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+
+    .ant-modal {
+      width: 800px !important;
+    }
+
+    .ant-modal-body {
+      border-top: 1px solid #ccc;
+    }
+
+    .Z6aEmain {
+      padding-top: 15px;
+
+      .Z6aRow {
+        margin-bottom: 10px;
+        // display: flex;
+
+        // 隐藏一级数据
+        // .Z6aRow1 {
+        //   width: 90px;
+        //   font-weight: 700;
+        // }
+
+        .Z6aRow2 {
+          width: calc(100% - 90px);
+          & > div {
+            margin-bottom: 15px;
+          }
+        }
+      }
+
+      .Z6aErr {
+        margin-bottom: 20px;
+        text-align: center;
+        color: #ff4d4f;
+        opacity: 0;
+        pointer-events: none;
+        transition: all 0.3s;
+        position: relative;
+        top: -10px;
+      }
+
+      .Z6aErrAc {
+        opacity: 1;
+        top: 0;
+      }
+
+      .Z6aEbtn {
+        text-align: center;
+      }
+    }
+  }
+}

src/pages/Z_system/Z6user/index.tsx

@@ -0,0 +1,242 @@
+import { RootState } from '@/store'
+import { UserTableAPIType, UserTableListType } from '@/types'
+import { MessageFu } from '@/utils/message'
+import { Input, Button, Cascader } from 'antd'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import styles from './index.module.scss'
+import UserAdd from './UserAdd'
+import MyTable from '@/components/MyTable'
+import { Z6tableC } from '@/utils/tableData'
+import MyPopconfirm from '@/components/MyPopconfirm'
+import { getUserListAPI, userPassResetAPI, userRemoveAPI } from '@/store/action/Z6user'
+import { D4_APIgetTree } from '@/store/action/Z4organization'
+import { buMenRes } from '@/utils/history'
+import AAbtn from '@/pages/AAnew/AAbtn'
+
+const baseFormData: UserTableAPIType = {
+  pageNum: 1,
+  pageSize: 10,
+  searchKey: '',
+  deptId: undefined
+}
+
+function Z6user() {
+  const dispatch = useDispatch()
+
+  // 获取部门管理列表
+  useEffect(() => {
+    dispatch(D4_APIgetTree())
+  }, [dispatch])
+
+  const { treeData } = useSelector((state: RootState) => state.Z4organization)
+
+  // 顶部筛选
+  const [formData, setFormData] = useState(baseFormData)
+  const formDataRef = useRef(baseFormData)
+  const formDataOldRef = useRef(baseFormData)
+
+  useEffect(() => {
+    formDataRef.current = formData
+  }, [formData])
+
+  // 点击搜索的 时间戳
+  const [timeKey, setTimeKey] = useState(0)
+
+  // 点击搜索
+  const clickSearch = useCallback(() => {
+    setFormData({ ...formData, pageNum: 1 })
+    setTimeout(() => {
+      setTimeKey(Date.now())
+    }, 50)
+  }, [formData])
+
+  // 封装发送请求的函数
+  const getListFu = useCallback(
+    (formOld?: UserTableAPIType) => {
+      if (formOld) setFormData({ ...formOld })
+
+      const obj = formOld
+        ? { ...formOld }
+        : {
+            ...formDataRef.current
+          }
+
+      formDataOldRef.current = { ...formDataRef.current }
+
+      let deptIdRes = obj.deptId
+
+      if (deptIdRes) obj.deptId = Number(deptIdRes[deptIdRes.length - 1])
+
+      dispatch(getUserListAPI(obj))
+    },
+    [dispatch]
+  )
+
+  useEffect(() => {
+    getListFu()
+  }, [getListFu, timeKey])
+
+  // 输入框的改变
+  const txtChangeFu = useCallback(
+    (txt: string, key: 'searchKey') => {
+      setFormData({
+        ...formData,
+        [key]: txt
+      })
+    },
+    [formData]
+  )
+
+  // 点击重置
+  const resetSelectFu = useCallback(() => {
+    // 把2个输入框和时间选择器清空
+    setFormData(baseFormData)
+    setTimeout(() => {
+      setTimeKey(Date.now())
+    }, 50)
+  }, [])
+
+  // 从仓库中获取表格数据
+  const tableInfo = useSelector((state: RootState) => state.Z6user.tableInfo)
+
+  // 页码变化
+  const paginationChange = useCallback(
+    (pageNum: number, pageSize: number) => {
+      setFormData({ ...formData, pageNum, pageSize })
+      setTimeout(() => {
+        setTimeKey(Date.now())
+      }, 50)
+    },
+    [formData]
+  )
+
+  // 点击删除
+  const delTableFu = useCallback(
+    async (id: number) => {
+      const res: any = await userRemoveAPI(id)
+      if (res.code === 0) {
+        MessageFu.success('删除成功!')
+        getListFu()
+      }
+    },
+    [getListFu]
+  )
+
+  // 点击重置密码
+  const resetPassFu = useCallback(async (id: number) => {
+    const res: any = await userPassResetAPI(id)
+    if (res.code === 0) MessageFu.success('重置成功!')
+  }, [])
+
+  // 0------------点击新增或者编辑出来的页面
+  const [editPageShow, setEditPageShow] = useState(false)
+  const editId = useRef(0)
+
+  const openEditPageFu = useCallback((id: number) => {
+    editId.current = id
+    setEditPageShow(true)
+  }, [])
+
+  const tableLastBtn = useMemo(() => {
+    return [
+      {
+        title: '操作',
+        render: (item: UserTableListType) => {
+          return item.id === 1 ? (
+            '-'
+          ) : (
+            <>
+              <MyPopconfirm
+                txtK='重置密码'
+                onConfirm={() => resetPassFu(item.id)}
+                Dom={
+                  <Button size='small' type='text'>
+                    重置密码
+                  </Button>
+                }
+              />
+              <Button size='small' type='text' onClick={() => openEditPageFu(item.id)}>
+                编辑
+              </Button>
+              <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.id)} />
+            </>
+          )
+        }
+      }
+    ]
+  }, [delTableFu, openEditPageFu, resetPassFu])
+
+  return (
+    <div className={styles.Z6user}>
+      <div className='pageTitle'>用户管理</div>
+      <div className='userTop'>
+        <div className='selectBox'>
+          <div className='selectBoxRow'>
+            <Input
+              maxLength={15}
+              showCount
+              style={{ width: 300 }}
+              placeholder='请输入用户名或真实姓名'
+              value={formData.searchKey}
+              onChange={e => txtChangeFu(e.target.value, 'searchKey')}
+            />
+            &emsp;&emsp;
+            <span></span>
+            <Cascader
+              // allowClear={false}
+              changeOnSelect
+              style={{ width: 300 }}
+              options={treeData}
+              value={formData.deptId as string[]}
+              fieldNames={{ label: 'name', value: 'id', children: 'children' }}
+              placeholder='选择部门'
+              onChange={e =>
+                setFormData({
+                  ...formData,
+                  deptId: e as string[]
+                })
+              }
+            />
+          </div>
+
+          <div className='selectBoxRow'>
+            <AAbtn txt={1} onClick={() => openEditPageFu(0)} tit='新增' />
+            &emsp;
+            <AAbtn txt={1} onClick={clickSearch} tit='查询' />
+            &emsp;
+            <AAbtn txt={2} onClick={resetSelectFu} />
+          </div>
+        </div>
+      </div>
+      {/* 表格主体 */}
+      <div className='tableBox'>
+        <MyTable
+          yHeight={670}
+          list={buMenRes(tableInfo.list)}
+          columnsTemp={Z6tableC()}
+          lastBtn={tableLastBtn}
+          pageNum={formData.pageNum}
+          pageSize={formData.pageSize}
+          total={tableInfo.total}
+          onChange={(pageNum, pageSize) => paginationChange(pageNum, pageSize)}
+        />
+      </div>
+
+      {/* 点击新增或者编辑 */}
+      {editPageShow ? (
+        <UserAdd
+          id={editId.current}
+          closePage={() => setEditPageShow(false)}
+          upTableList={formOld => getListFu(formOld)}
+          addTableList={resetSelectFu}
+          formOld={formDataOldRef.current}
+        />
+      ) : null}
+    </div>
+  )
+}
+
+const MemoZ6user = React.memo(Z6user)
+
+export default MemoZ6user

src/pages/Z_system/Z7log/index.module.scss

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

src/pages/Z_system/Z7log/index.tsx

@@ -0,0 +1,99 @@
+import { RootState } from '@/store'
+import { Input, DatePicker } from 'antd'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+
+import styles from './index.module.scss'
+import MyTable from '@/components/MyTable'
+import { Z7tableC } from '@/utils/tableData'
+import { getLogListAPI } from '@/store/action/Z7log'
+
+const { RangePicker } = DatePicker
+
+function Z7log() {
+  const dispatch = useDispatch()
+
+  // 筛选和分页
+  const [fromData, setFromData] = useState({
+    searchKey: '',
+    pageSize: 10,
+    pageNum: 1,
+    startTime: '',
+    endTime: ''
+  })
+
+  // 账号的输入
+  const nameTime = useRef(-1)
+  const nameChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      clearTimeout(nameTime.current)
+      nameTime.current = window.setTimeout(() => {
+        setFromData({ ...fromData, searchKey: e.target.value, pageNum: 1 })
+      }, 500)
+    },
+    [fromData]
+  )
+  // 时间选择器改变
+  const timeChange = useCallback(
+    (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'
+      }
+      setFromData({ ...fromData, startTime, endTime, pageNum: 1 })
+    },
+    [fromData]
+  )
+
+  useEffect(() => {
+    dispatch(getLogListAPI(fromData))
+  }, [dispatch, fromData])
+
+  // ---------关于表格
+  const tableInfo = useSelector((state: RootState) => state.Z7log.tableInfo)
+
+  return (
+    <div className={styles.Z7log}>
+      <div className='pageTitle'>操作日志</div>
+      <div className='logTop'>
+        <div className='tableSelectBox'>
+          <div className='row'>
+            <span>账号：</span>
+            <Input
+              maxLength={10}
+              showCount
+              style={{ width: 300 }}
+              placeholder='请输入账号'
+              allowClear
+              onChange={e => nameChange(e)}
+            />
+          </div>
+          <div className='row'>
+            <span>操作日期：</span>
+            <RangePicker onChange={timeChange} />
+          </div>
+        </div>
+      </div>
+
+      {/* 表格主体 */}
+      <div className='tableMain'>
+        <MyTable
+          emptyText={true}
+          yHeight={630}
+          list={tableInfo.list}
+          columnsTemp={Z7tableC}
+          pageNum={fromData.pageNum}
+          pageSize={fromData.pageSize}
+          total={tableInfo.total}
+          onChange={(pageNum, pageSize) => setFromData({ ...fromData, pageNum, pageSize })}
+        />
+      </div>
+    </div>
+  )
+}
+
+const MemoZ7log = React.memo(Z7log)
+
+export default MemoZ7log

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

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

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

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

src/store/action/AAnew/AA1onePu.ts

@@ -0,0 +1,35 @@
+import { AppDispatch } from '@/store'
+import http from '@/utils/http'
+
+/**
+ * 一普盘点 - 获取分页列表
+ */
+export const AA1_APIgetList = (data: any, exportFlag?: boolean): any => {
+  if (exportFlag) return http.post('cms/antique/page', data)
+  else {
+    return async (dispatch: AppDispatch) => {
+      const res = await http.post('cms/antique/page', data)
+      if (res.code === 0) {
+        const obj = {
+          list: res.data.records,
+          total: res.data.total
+        }
+        dispatch({ type: 'AA1/getList', payload: obj })
+      }
+    }
+  }
+}
+
+/**
+ * 一普盘点-详情
+ */
+export const AA1_APIgetInfo = (id: number) => {
+  return http.get(`cms/antique/detail/${id}`)
+}
+
+/**
+ * 一普盘点-删除
+ */
+export const AA1_APIdel = (id: number) => {
+  return http.get(`cms/antique/remove/${id}`)
+}