diff --git a/.umirc.ts b/.umirc.ts index 10043ff..5746edf 100644 --- a/.umirc.ts +++ b/.umirc.ts @@ -65,6 +65,16 @@ export default defineConfig({ }, ], }, + { + path: '/passwordManager', + component: '@/pages/PasswordManager/Header', + routes: [ + { + path: '/passwordManager/index', + component: '@/pages/PasswordManager/List/Index', + }, + ], + }, ], }, ], diff --git a/src/pages/Encrypt/List/Index/index.tsx b/src/pages/Encrypt/List/Index/index.tsx index ed23a8a..da6f74d 100644 --- a/src/pages/Encrypt/List/Index/index.tsx +++ b/src/pages/Encrypt/List/Index/index.tsx @@ -13,7 +13,7 @@ import { } from 'antd'; import Fetch from '@/utils/fetch'; import { useEffect, useState, FC, useRef } from 'react'; -import { Link } from 'umi'; +import { Link, history } from 'umi'; import { downLoadLink } from '@/utils/download'; import url from '@/utils/url'; @@ -77,6 +77,9 @@ const Page: FC = () => { downLoadLink( `${url}/openi/secretKey/encryption?type=${type}&algorithm=${algorithm}&length=${length}&count=${file.length}`, ); + setTimeout(() => { + history.push('/passwordManager/index'); + }, 500); }; console.log(file, 222); diff --git a/src/pages/PasswordManager/Header/index.less b/src/pages/PasswordManager/Header/index.less new file mode 100644 index 0000000..78dded4 --- /dev/null +++ b/src/pages/PasswordManager/Header/index.less @@ -0,0 +1,66 @@ +.head { + height: 60px; + background: #001628; + + > section { + margin: 0 auto; + height: 100%; + font-size: 18px; + display: flex; + align-items: center; + color: #fff; + width: 1200px; + + > span { + font-size: 18px; + font-weight: 500; + color: #ffffff; + line-height: 18px; + letter-spacing: 2px; + } + + > ul { + margin: 0; + padding: 0; + flex: 1; + display: flex; + align-items: center; + + .active { + color: #28b1ff; + + b { + visibility: visible; + } + } + + li { + list-style: none; + margin-left: 100px; + font-size: 14px; + font-weight: 600; + color: #fff; + position: relative; + cursor: default; + } + + b { + position: absolute; + z-index: 1; + left: 50%; + transform: translateX(-50%); + bottom: -9px; + width: 40px; + height: 2px; + background: #28b1ff; + visibility: hidden; + } + } + } +} + +.content { + height: calc(100vh - 60px); + background-color: #fafafa; + overflow: auto; +} diff --git a/src/pages/PasswordManager/Header/index.tsx b/src/pages/PasswordManager/Header/index.tsx new file mode 100644 index 0000000..c10024f --- /dev/null +++ b/src/pages/PasswordManager/Header/index.tsx @@ -0,0 +1,45 @@ +import styles from './index.less'; +import { Fragment, useEffect } from 'react'; +import { history } from 'umi'; + +const Header = ({ ...props }) => { + console.log(props, 'props'); + const pathname = props.location.pathname; + const menu = [ + { + id: '/passwordManager', + name: '密码管理', + url: '/passwordManager/index', + }, + { + id: '/basicManager', + name: '基础设施管理', + url: '/basicManager/index', + }, + ]; + return ( + +
+
+ + 设施管理设备 +
    + {menu.map((e: any) => ( +
  • history.push(e.url)} + > + {e.name} + +
    • + ))} +
+
版本号：V0.4.0.0
+
+
+
{props.children}
+ + ); +}; +export default Header; diff --git a/src/pages/PasswordManager/List/Index/index.less b/src/pages/PasswordManager/List/Index/index.less new file mode 100644 index 0000000..9a1a008 --- /dev/null +++ b/src/pages/PasswordManager/List/Index/index.less @@ -0,0 +1,85 @@ +.page { + width: 1200px; + margin: 22px auto; + display: flex; + justify-content: space-between; + + .left { + width: 146px; + height: 334px; + background: #ffffff; + border-radius: 4px; + padding-top: 18px; + + > div { + height: 44px; + display: flex; + align-items: center; + font-size: 14px; + font-weight: 400; + color: #464f66; + padding: 20px 0; + cursor: pointer; + + b { + display: inline-block; + width: 3px; + height: 16px; + background: @primary-color; + margin-right: 17px; + visibility: hidden; + } + + &:hover { + color: @primary-color; + } + + i { + padding-right: 10px; + font-size: 14px; + } + } + + .active { + color: @primary-color; + + b { + visibility: visible; + } + + i { + color: @primary-color; + } + } + } + + .right { + width: 1034px; + border-radius: 4px; + background-color: #ffffff; + + .title { + height: 36px; + background: #e3effc; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + font-weight: 500; + color: #464f66; + + i { + cursor: pointer; + } + } + .box { + height: 500px; + } + .btn { + height: 58px; + display: flex; + align-items: center; + padding: 0 20px; + } + } +} diff --git a/src/pages/PasswordManager/List/Index/index.tsx b/src/pages/PasswordManager/List/Index/index.tsx new file mode 100644 index 0000000..e915002 --- /dev/null +++ b/src/pages/PasswordManager/List/Index/index.tsx @@ -0,0 +1,173 @@ +import styles from './index.less'; +import { + InputNumber, + Input, + Button, + Select, + Row, + Modal, + Form, + message, + Empty, + Spin, +} from 'antd'; +import Fetch from '@/utils/fetch'; +import { useEffect, useState, FC, useRef } from 'react'; +import { Link } from 'umi'; +import { downLoadLink } from '@/utils/download'; +import url from '@/utils/url'; + +interface PageProps {} + +const Page: FC = () => { + const [type, setType] = useState('1'); + const [algorithm, setAlgorithm] = useState('0'); + const [length, setLength] = useState('16'); + const [pushNode, setPushNode] = useState('节点一'); + const [count, setCount] = useState(1000); + const [data, setData] = useState([]); + + useEffect(() => { + getData(); + }, [type]); + + const getData = async () => { + const res = await Fetch('/openi/secretKey/statistics', { + method: 'get', + params: { + type, + }, + }); + if (res.result === 'success') { + setData(res?.data?.[0]); + } + }; + + const item: any = [ + { + icon: 'iconfont icon-yuzhimiyuejiami', + name: '预制资源', + key: '1', + }, + { + icon: 'iconfont icon-gongsiyueduiziyuan', + name: '公私钥对资源', + key: '2', + }, + { + icon: 'iconfont icon-suanfacanshuziyuan', + name: '算法参数资源', + key: '3', + }, + { + icon: 'iconfont icon-suanfaluojiziyuan', + name: '算法逻辑资源', + key: '4', + }, + { + icon: 'iconfont icon-ruanjianziyuan', + name: '软件资源', + key: '5', + }, + ]; + + const handleFile = () => { + var inputObj = document.createElement('input'); + inputObj.setAttribute('id', '_ef'); + inputObj.setAttribute('type', 'file'); + inputObj.setAttribute('style', 'visibility:hidden'); + document.body.appendChild(inputObj); + inputObj.click(); + inputObj.onchange = async (e: any) => { + const data: any = new FormData(); + data.append('file', e?.target?.files?.[0]); + const res = await Fetch('/openi/secretKey/resourceImport', { + method: 'post', + data, + }); + if (res.result === 'success') { + message.success('导入成功'); + getData(); + } + }; + }; + + const title = item.find((e: any) => e.key === type).name; + + return ( +
+
+ {item.map((e: any) => ( +
{ + setType(e.key); + if (e.key === '2') { + setAlgorithm('1'); + } else { + setAlgorithm('0'); + } + }} + > + + + {e.name} +
+ ))} +
+
+
+ {title}资源列表 + +
+
+
+ + + 密码长度 + + + + 推送节点 + + + + 推送组数 + setCount(k)} + /> + + +
+
+
+ ); +}; +export default Page; diff --git a/src/styles/iconfont/demo_index.html b/src/styles/iconfont/demo_index.html index ad39dd3..16f6fcc 100644 --- a/src/styles/iconfont/demo_index.html +++ b/src/styles/iconfont/demo_index.html @@ -54,6 +54,12 @@
    +
  • + +
    导入数据
    +
    
    +
    • +
  • 未通过
    @@ -180,12 +186,6 @@
    
    • -
  • - -
    导入资源文件
    -
    
    -
    • -
  • 收起
    @@ -342,12 +342,12 @@ 
    @font-face {
   font-family: 'iconfont';
-  src: url('iconfont.eot?t=1660292237437'); /* IE9 */
-  src: url('iconfont.eot?t=1660292237437#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('iconfont.woff2?t=1660292237437') format('woff2'),
-       url('iconfont.woff?t=1660292237437') format('woff'),
-       url('iconfont.ttf?t=1660292237437') format('truetype'),
-       url('iconfont.svg?t=1660292237437#iconfont') format('svg');
+  src: url('iconfont.eot?t=1660555520778'); /* IE9 */
+  src: url('iconfont.eot?t=1660555520778#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('iconfont.woff2?t=1660555520778') format('woff2'),
+       url('iconfont.woff?t=1660555520778') format('woff'),
+       url('iconfont.ttf?t=1660555520778') format('truetype'),
+       url('iconfont.svg?t=1660555520778#iconfont') format('svg');
 }

    第二步：定义使用 iconfont 的样式

    @@ -373,6 +373,15 @@
      +
    • + +
      + 导入数据 +
      +
      .icon-daorushuju2 +
      +
      • +
    • @@ -562,15 +571,6 @@
      • -
    • - -
      - 导入资源文件 -
      -
      .icon-daoruziyuanwenjian -
      -
      • -
    • @@ -805,6 +805,14 @@
        +
      • + +
        导入数据
        +
        #icon-daorushuju2
        +
        • +
      • #icon-suanfaluojiziyuan
        • -
      • - -
        导入资源文件
        -
        #icon-daoruziyuanwenjian
        -
        • -