pref: 项目案例 免密链接添加 权限 ，项目案例用iframe打开

src/components/Container/Iframe/index.js

+/*
+ * @Title:
+ * @Author: hongmye
+ * @Date: 2023-01-10 11:18:55
+ */
+import React, { memo, useEffect } from 'react';
+import Iframe from 'react-iframe';
+import Empty from '@wisdom-components/empty';
+import styles from './index.less';
+
+const IframeContainer = props => {
+  const { linkUrl } = props;
+
+  const onMessage = e => {};
+  useEffect(() => {
+    window.addEventListener('message', onMessage);
+    return () => {
+      window.removeEventListener('message', onMessage);
+    };
+  }, [onMessage]);
+  return (
+    <div className={styles['tab-iframe']}>
+      {linkUrl ? (
+        <Iframe
+          url={linkUrl}
+          width="100%"
+          height="100%"
+          display="block"
+          position="relative"
+          styles={{ border: 'none' }}
+        />
+      ) : (
+        <Empty description="配置url链接才能显示哦！" />
+      )}
+    </div>
+  );
+};
+
+export default IframeContainer;

src/components/Container/Iframe/index.less

+.tab-iframe {
+    width: 100vw;
+    height: 100vh;
+    position: relative;
+    overflow: hidden;
+    z-index: 100;
+
+    iframe {
+        border: none;
+    }
+}
\ No newline at end of file

src/pages/bootpage/demonstration/components/Bottom/index.js

@@ -9,7 +9,7 @@ import classNames from 'classnames';
 import DataCarousel from '../DataCarousel';
 import styles from './index.less';
 const BottomItem = props => {
-  const { listData = [], configData = [], onLineUrl, handToPage, handlePage, industries = [] } = props;
+  const { projectConfig, listData = [], configData = [], onLineUrl, handToPage, handlePage, industries = [] } = props;
   const isJump = industries.includes('项目案例');
   const [list, setList] = useState([]);
   const [infoData, setInfoData] = useState({});
@@ -23,9 +23,12 @@ const BottomItem = props => {
       </div>
     ));
   };
-  const toPage = url => {
+  const toPage = (url, col) => {
     if (!isJump) return message.warning('该用户没有权限！');
-    handToPage(url);
+    if (!url.includes('user/noscret') || projectConfig[col['平台名称']]) {
+      return handToPage(url);
+    }
+    handToPage(url.split('user/noscret')[0]);
   };
   const toMore = (e, url) => {
     if (!isJump) return message.warning('该用户没有权限！');
@@ -39,7 +42,7 @@ const BottomItem = props => {
           <div
             key={`${rindex}-${cIndex}`}
             type={col['项目环境'] && isJump ? 'jump' : 'none'}
-            onClick={() => toPage(col['项目环境'])}
+            onClick={() => toPage(col['项目环境'], col)}
             alt="点击体验"
             className={styles.list_item}
           >

src/pages/bootpage/demonstration/index.js

@@ -7,7 +7,7 @@
  * @Author: hongmye
  * @Date: 2023-12-26 18:34:42
  */
-import { FullscreenExitOutlined, FullscreenOutlined, RightOutlined } from '@ant-design/icons';
+import { DoubleLeftOutlined, FullscreenExitOutlined, FullscreenOutlined, RightOutlined } from '@ant-design/icons';
 import exitImg from '@/assets/images/demonstration/退出.png';
 import { Button, Spin, message, Progress } from 'antd';
 import React, { useMemo, useState, useEffect, useRef } from 'react';
@@ -20,6 +20,8 @@ import { connect } from 'react-redux';
 import LoginAction from '@/pages/user/login/login';
 import classNames from 'classnames';
 import { defaultApp } from '@/micro';
+import Iframe from '@/components/Container/Iframe';
+import moment from 'moment';
 import useFullScreen from './components/useFullScreen';
 import styles from './index.less';
 import LeftItem from './components/Left';
@@ -42,6 +44,7 @@ const Demonstration = props => {
   const timer2 = useRef(null);
   const [progressValue2, setProgressValue2] = useState(0);
   const [loading, setLoading] = useState(true);
+  const [projectConfig, setProjectConfig] = useState({}); // 项目案例是否可免密跳转
   const [showContent, setShowContent] = useState(false);
   const [jumpLoading, setJumpLoading] = useState(false);
   const [selectKey, setSelectKey] = useState('供水产品');
@@ -49,7 +52,7 @@ const Demonstration = props => {
     scale: 1,
     boxHeight: 911,
   });
-
+  const [linkUrl, setLinkUrl] = useState('');
   const [projectData, setProjectData] = useState([]);
   const [configData, setConfigData] = useState([]);
   const [productData, setProductData] = useState([]);
@@ -202,7 +205,8 @@ const Demonstration = props => {
 
   const handToPage = url => {
     if (!url) return message.warning('该环境未配置，请联系管理员');
-    window.open(url, '_blank');
+
+    setLinkUrl(url);
   };
 
   const handToPlatform = col => {
@@ -261,6 +265,38 @@ const Demonstration = props => {
       });
     }
   };
+  const getProjectConfig = () => {
+    if (!props.global?.userInfo?.loginName) return;
+    appService
+      .getAccountPageList({
+        ignoreSite: true,
+        accountName: '项目案例临时账号管理',
+        isAll: true,
+        queryWheres: [
+          {
+            field: '账号',
+            type: '等于',
+            value: props.global.userInfo.loginName,
+          },
+        ],
+      })
+      .then(res => {
+        const dataStr = res?.data?.jsonData || '';
+        const data = dataStr ? JSON.parse(dataStr) : [];
+        const obj = {};
+        data.forEach(d => {
+          if (!d['开始时间']) return false;
+          if (!d['结束时间'] && moment().isAfter(d['开始时间'])) {
+            obj[d['项目平台名称']] = true;
+            return;
+          }
+          if (moment().isBetween(d['开始时间'], d['结束时间'])) {
+            obj[d['项目平台名称']] = true;
+          }
+        });
+        setProjectConfig(obj);
+      });
+  };
   const getData = () => {
     setLoading(true);
     const req1 = appService.getAccountPageList({
@@ -374,6 +410,7 @@ const Demonstration = props => {
   }, [jumpLoading]);
   useEffect(() => {
     getData();
+    getProjectConfig();
     window.addEventListener('resize', debounce(onResize, 300));
     onResize();
     return () => {
@@ -468,6 +505,7 @@ const Demonstration = props => {
                 listData={projectData}
                 configData={configData}
                 onLineUrl={onLineUrl}
+                projectConfig={projectConfig}
                 handToPage={handToPage}
                 handlePage={handlePage}
                 industries={props.global?.userInfo?.Industries || []}
@@ -476,6 +514,21 @@ const Demonstration = props => {
           </>
         ) : null}
       </div>
+
+      {linkUrl ? (
+        <>
+          <div className={classNames(styles.iframeExit, 'animate__animated')} onClick={() => setLinkUrl('')}>
+            <DoubleLeftOutlined />
+            &nbsp;&nbsp; 返回
+            <div className={styles.iframeExitIcon}>
+              <DoubleLeftOutlined />
+            </div>
+          </div>
+          <div className={classNames('animate__fadeIn', 'animate__animated', 'duration-500ms')}>
+            <Iframe linkUrl={linkUrl} />
+          </div>
+        </>
+      ) : null}
     </div>
   );
 };

src/pages/bootpage/demonstration/index.less

@@ -15,6 +15,73 @@
   align-items: center;
   justify-content: center;
 
+  .iframeExitIcon {
+    position: absolute;
+    top: 36px;
+    width: 100px;
+    height: 14px;
+    left: calc(50% - 50px);
+    line-height: 14px;
+    text-align: center;
+  }
+
+  .iframeExitIcon::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    transform: perspective(0.35em) rotateX(-5deg);
+    transform-origin: bottom;
+
+    line-height: 20px;
+    text-align: center;
+  }
+
+  .iframeExit:hover {
+    transform: translateY(0);
+  }
+
+  .iframeExit:hover .iframeExitIcon {
+    display: none;
+  }
+
+  .iframeExit {
+    width: 100px;
+    height: 30px;
+    position: absolute;
+    top: 0;
+    left: calc(50% - 50px);
+    transform: translateY(-100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #FFF;
+    cursor: pointer;
+    user-select: none;
+    position: absolute;
+
+    z-index: 110;
+
+  }
+
+  .iframeExit::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    transform: perspective(.5em) rotateX(-5deg);
+    transform-origin: bottom;
+    background: rgba(0, 0, 0, 0.5);
+    line-height: 0.2rem;
+    text-align: center;
+  }
+
   .demonstrationLoad {
     width: 100%;
     height: 100%;