fix: nju link bug (#282)

Signed-off-by: laixingyou <[email protected]>

apps/web/src/common/components/DocPopper.tsx

@@ -23,9 +23,11 @@ const DocLink: React.FC<
 
   return (
     <div className="h-6 overflow-hidden text-ellipsis whitespace-nowrap">
-      <span className="">{description}</span>
+      <span className="" title={description}>
+        {description}
+      </span>
 
-      {weight && detail ? (
+      {weight || detail ? (
         <div className="absolute right-0 bottom-2 h-4 w-24 bg-gradient-to-r from-white/30 to-white">
           <a
             className="text-primary float-right ml-1 cursor-pointer hover:underline"
@@ -52,7 +54,7 @@ const DocLink: React.FC<
           className="flex w-[564px] flex-col overflow-hidden rounded bg-white p-4 text-xs drop-shadow-2xl md:w-[90%]"
           ref={popoverRef}
         >
-          {detail ? (
+          {weight || detail ? (
             <>
               <p className="mb-2 flex">
                 <span className="w-[78px] flex-shrink-0 font-semibold">
@@ -80,7 +82,7 @@ const DocLink: React.FC<
                   {notes}
                 </p>
               )}
-              <p className="mt-2 flex">{detail}</p>
+              {detail && <p className="mt-2 flex">{detail}</p>}
             </>
           ) : (
             <>

apps/web/src/common/components/EChartGl/useOptions.tsx

@@ -213,6 +213,7 @@ const useOptions = () => {
       name: ' ',
       type: 'value',
       splitNumber: 4,
+      max: 80,
       axisLine: {
         lineStyle: { width: 0.1, opacity: 0.5 },
       },
@@ -330,7 +331,6 @@ const useOptions = () => {
         beta: 0,
       },
       boxWidth: 200,
-      boxDepth: 150,
       light: {
         //主光源
         main: {

apps/web/src/modules/academe/CooperationCase.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import classnames from 'classnames';
 import { useTranslation, Trans } from 'next-i18next';
 import Image from 'next/image';
@@ -11,6 +11,9 @@ import { isValidUrl } from '@common/utils/url';
 import { toFixed } from '@common/utils';
 import { AiOutlineLoading } from 'react-icons/ai';
 import { TbPoint } from 'react-icons/tb';
+import { gsap } from 'gsap';
+import { useInViewport } from 'ahooks';
+import LinkX from '@common/components/LinkX';
 
 async function getData({ repo }) {
   return await axios.post(
@@ -24,8 +27,42 @@ async function getData({ repo }) {
   );
 }
 
-const p = () => {
-  <Progress percent={100} size="small" />;
+const Timer = ({
+  time = 15,
+  setActiveFun,
+}: {
+  time?: number;
+  setActiveFun: () => void;
+}) => {
+  const [progress, setProgress] = useState(0);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setProgress((prevProgress) => {
+        if (prevProgress >= 101) {
+          setActiveFun();
+          return 0;
+        } else {
+          return prevProgress + 10 / time;
+        }
+      });
+    }, 100);
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  return (
+    <div>
+      <Progress
+        className="p-0"
+        percent={progress}
+        size="small"
+        showInfo={false}
+        strokeColor={'#52c41a'}
+        trailColor={'transparent'}
+      />
+    </div>
+  );
 };
 const CooperationCase = () => {
   const { t, i18n } = useTranslation();
@@ -40,14 +77,13 @@ const CooperationCase = () => {
           <li className="ml-4 mb-2 list-disc">{t('academe:nju_author2')}</li>
           <li className="ml-4 list-disc">
             {t('academe:nju_desc')}
-            <a
-              className="text-[#002fa7]"
+            <LinkX
               href={
-                'https://compass.gitee.com/zh/blog/2023/12/07/compass-prediction-activity/compass-prediction-activity'
+                '/blog/2023/12/07/compass-prediction-activity/compass-prediction-activity'
               }
             >
-              {t('academe:nju_title')}
-            </a>
+              <span className="text-[#002fa7]">{t('academe:nju_title')}</span>
+            </LinkX>
           </li>
         </ul>
       ),
@@ -243,6 +279,24 @@ const CooperationCase = () => {
   const [errorMsg, setErrorMsg] = useState('');
   const [loading, setLoading] = useState(false);
 
+  const ref = useRef(null);
+  const [inViewport] = useInViewport(ref);
+  // useEffect(() => {
+  //   inViewport &&
+  //     gsap.fromTo(
+  //       ref.current,
+  //       {
+  //         opacity: '0',
+  //         // repeat: 2,
+  //         duration: 2,
+  //       },
+  //       {
+  //         opacity: '1',
+  //         // repeat: 2,
+  //         duration: 2,
+  //       }
+  //     );
+  // }, [inViewport, active]);
   const calculate = () => {
     setErrorMsg('');
     setPredict(null);
@@ -340,7 +394,10 @@ const CooperationCase = () => {
       </div>
     </>
   );
-
+  const setActiveFun = (index) => {
+    const next = caseList[index];
+    setActive(next['name']);
+  };
   return (
     <>
       <div className="mb-3 text-2xl font-medium">
@@ -355,7 +412,7 @@ const CooperationCase = () => {
                 setActive(item.name);
               }}
               className={classnames(
-                'flex h-[56px] w-[300px] cursor-pointer items-center justify-center border border-l-0 border-[#CFCFCF] bg-[#f7f7f7]',
+                'relative flex h-[56px] w-[300px] cursor-pointer items-center justify-center border border-l-0 border-[#CFCFCF] bg-[#f7f7f7]',
                 { '!border-l ': index === 0, '!bg-white': active === item.name }
               )}
             >
@@ -369,30 +426,43 @@ const CooperationCase = () => {
                   height: 'auto',
                 }}
               />
+              <div className="absolute -bottom-2 w-full">
+                {active === item.name && (
+                  <Timer
+                    setActiveFun={() => {
+                      setActiveFun(
+                        index === caseList.length - 1 ? 0 : index + 1
+                      );
+                    }}
+                  />
+                )}
+              </div>
             </div>
           );
         })}
       </div>
-      <div className="mb-10 flex items-center border border-t-0 border-[#CFCFCF] p-8 md:flex-col">
-        <div className="mb-4 w-[550px] pl-2 md:w-full">
-          <div className="text-xl font-semibold">{activeCase.title}</div>
-          <div className="mt-2 w-[550px] text-sm">{activeCase.desc}</div>
-          {activeCase.experience && (
-            <div
-              onClick={() => {
-                if (activeCase.experienceUrl) {
-                  window.open(activeCase.experienceUrl);
-                } else {
-                  setOpen(true);
-                }
-              }}
-              className="mt-4 flex h-8 w-48 cursor-pointer items-center justify-center bg-[#000000] px-3 text-sm text-white hover:bg-black/90"
-            >
-              {t('academe:experience_immediately')}
-            </div>
-          )}
+      <div className="mb-10  border border-t-0 border-[#CFCFCF] p-8 " ref={ref}>
+        <div ref={ref} className="flex items-center md:flex-col">
+          <div className="mb-4 w-[550px] pl-2 md:w-full">
+            <div className="text-xl font-semibold">{activeCase.title}</div>
+            <div className="mt-2 w-[550px] text-sm">{activeCase.desc}</div>
+            {activeCase.experience && (
+              <div
+                onClick={() => {
+                  if (activeCase.experienceUrl) {
+                    window.open(activeCase.experienceUrl);
+                  } else {
+                    setOpen(true);
+                  }
+                }}
+                className="mt-4 flex h-8 w-48 cursor-pointer items-center justify-center bg-[#000000] px-3 text-sm text-white hover:bg-black/90"
+              >
+                {t('academe:experience_immediately')}
+              </div>
+            )}
+          </div>
+          <div className="ml-16 h-[280px] flex-1 ">{activeCase.content}</div>
         </div>
-        <div className="ml-16 h-[280px] flex-1 ">{activeCase.content}</div>
       </div>
       <Dialog
         TransitionComponent={Transition}

apps/web/src/modules/academe/Coutact.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'next-i18next';
+import Dialog, { Transition } from '@common/components/Dialog';
+import classnames from 'classnames';
+import { MdEmail } from 'react-icons/md';
+
+const Coutact = () => {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Dialog
+        TransitionComponent={Transition}
+        open={open}
+        classes={{
+          paper: classnames(
+            'border-2 border-black w-[640px] !max-w-[640px] !rounded-none !m-0 md:w-full md:h-full md:!m-0 md:!min-h-full md:border-none'
+          ),
+        }}
+        dialogContent={
+          <>
+            <div className="flex items-center justify-center text-base">
+              <MdEmail />
+              Email:
+              <a
+                className="ml-2 mb-0.5 text-[#002fa7]"
+                href="mailto:[email protected]"
+              >
+                [email protected]
+              </a>
+            </div>
+          </>
+        }
+        handleClose={() => {
+          setOpen(false);
+        }}
+      />
+      <div
+        className="h-10 cursor-pointer bg-gradient-to-r from-[#72D74F] to-[#27AE65] px-4 text-center text-sm leading-10 text-[#fff]"
+        onClick={() => {
+          setOpen(true);
+        }}
+      >
+        <a
+          // href="mailto:[email protected]"
+          title="[email protected]"
+        >
+          {t('academe:submit_your_application_now')}
+        </a>
+      </div>
+    </>
+  );
+};
+export default Coutact;

apps/web/src/modules/academe/SubmitApplication.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'next-i18next';
 import classnames from 'classnames';
+import Coutact from './Coutact';
 
 const SubmitApplication = () => {
   const { t } = useTranslation();
@@ -19,16 +20,7 @@ const SubmitApplication = () => {
         <div className="mb-8 flex justify-center bg-gradient-to-r from-[#49B821] to-[#27AEAB] bg-clip-text text-center text-2xl font-semibold text-transparent">
           {t('academe:discuss_the_evolution')}
         </div>
-        <div
-          className="h-10 cursor-pointer bg-gradient-to-r from-[#72D74F] to-[#27AE65] px-4 text-center text-sm leading-10 text-[#fff]"
-          onClick={() => {
-            // router.push('/lab/model/create');
-          }}
-        >
-          <a href="mailto:[email protected]">
-            {t('academe:submit_your_application_now')}
-          </a>
-        </div>
+        <Coutact />
       </div>
     </>
   );

apps/web/src/modules/academe/components/Banner/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useRouter } from 'next/router';
 import classnames from 'classnames';
 import { useTranslation } from 'next-i18next';
-
+import Coutact from '../../Coutact';
 import style from './index.module.css';
 
 const Banner = () => {
@@ -38,11 +38,7 @@ const Banner = () => {
           {t('academe:academic_research_desc')}
         </div>
         <div className="flex">
-          <div className="h-8 cursor-pointer bg-gradient-to-r from-[#72D74F] to-[#27AE65] px-4 text-center leading-8 text-[#fff]">
-            <a href="mailto:[email protected]">
-              {t('academe:submit_your_application_now')}
-            </a>
-          </div>
+          <Coutact />
         </div>
       </div>
     </div>