Merge pull request #262 from hepengwei/feat_he

优化代码

src/constants/common.ts

@@ -1,4 +1,4 @@
-export const ECHART_COMMON_COLOR = [
+export const ECHART_COMMON_COLOR: string[] = [
   "#F2BB00",
   "#16BA79",
   "#2454E6",
@@ -11,8 +11,31 @@ export const ECHART_COMMON_COLOR = [
   "#9a60b4",
 ];
 
+export type Article = { name: string; href: string };
+export const ARTICLE_LIST: Article[] = [
+  {
+    name: "两个跨域页面进行跳转传参的终极方案",
+    href: "https://juejin.cn/post/7134967869326458916",
+  },
+  {
+    name: "面试秘籍之手写系列",
+    href: "https://juejin.cn/post/7134975263707758606",
+  },
+  {
+    name: "一款将打包后的Chrome插件自动化加载到浏览器的webpack插件",
+    href: "https://juejin.cn/post/7134991167095062565",
+  },
+  {
+    name: "全网最全AutoIt3基础教程及实战案例",
+    href: "https://juejin.cn/post/7134952028870017060",
+  },
+  {
+    name: "两个跨域页面实现量子纠缠的终极方案",
+    href: "https://juejin.cn/post/7312031033302614051",
+  },
+];
+
 export const IFRAME_ID = "bIframe";
 export const THAT_PAGE_URL = "http://localhost:3003";
 export const RECEIVE_SELF_KEY = "selfPageInfoList";
 export const RECEIVE_THAT_KEY = "bPageInfo";
-

src/locale/en-US.js

@@ -382,9 +382,9 @@ const en_US = {
     "Whether to retain the original dimension",
 
   // 视频处理工具页
-  "page.videoProcessingTool.tip":
-    "The tool processing video will be very slow, because it is a pure front-end implementation, the correct approach is to upload the file to the background for processing, here is only to provide a pure front-end video processing solution.",
-  "page.videoProcessingTool.generatingVideo": "Work hard at generating video",
+  // "page.videoProcessingTool.tip":
+  //   "The tool processing video will be very slow, because it is a pure front-end implementation, the correct approach is to upload the file to the background for processing, here is only to provide a pure front-end video processing solution.",
+  // "page.videoProcessingTool.generatingVideo": "Work hard at generating video",
 
   // Html视觉-应用页面框架页
   "page.htmlVision.applicationPageFrame.secondPage": "Second Page",

src/locale/zh-CN.js

@@ -329,9 +329,9 @@ const zh_CN = {
   "page.imageProcessingTool.WhetherRetainOriginalDimension": "是否保留原尺寸",
 
   // 视频处理工具页
-  "page.videoProcessingTool.tip":
-    "该工具处理视频会非常慢，因为是纯前端实现的，正确做法还是将文件上传到后台进行处理，这里只是提供一种纯前端实现视频处理的解决方案。",
-  "page.videoProcessingTool.generatingVideo": "努力生成视频中",
+  // "page.videoProcessingTool.tip":
+  //   "该工具处理视频会非常慢，因为是纯前端实现的，正确做法还是将文件上传到后台进行处理，这里只是提供一种纯前端实现视频处理的解决方案。",
+  // "page.videoProcessingTool.generatingVideo": "努力生成视频中",
 
   // Html视觉-应用页面框架页
   "page.htmlVision.applicationPageFrame.secondPage": "第二页",

src/pages/html/InteractiveDesign/components/MouseHover1/index.module.scss

@@ -34,7 +34,7 @@
             margin-top: 44px;
           }
           &:hover {
-            color: #5f82fd;
+            color: $globalPrimaryColor;
           }
         }
       }

src/pages/html/InteractiveDesign/components/MouseHover1/index.tsx

@@ -1,32 +1,10 @@
-import React, { useRef } from 'react';
-import { useIntl } from 'react-intl';
-import useCursorMove from '@/hooks/useCursorMove';
-import discuss from 'images/html/discuss.jpg';
-import styles from './index.module.scss';
-
-interface Article {
-  name: string;
-  href: string;
-}
-
-const articles = [
-  {
-    name: '两个跨域页面进行跳转传参的终极方案',
-    href: 'https://juejin.cn/post/7134967869326458916',
-  },
-  {
-    name: '面试秘籍之手写系列',
-    href: 'https://juejin.cn/post/7134975263707758606',
-  },
-  {
-    name: '一款将打包后的Chrome插件自动化加载到浏览器的webpack插件',
-    href: 'https://juejin.cn/post/7134991167095062565',
-  },
-  {
-    name: '全网最全AutoIt3基础教程及实战案例',
-    href: 'https://juejin.cn/post/7134952028870017060',
-  },
-];
+import React, { useRef } from "react";
+import { useIntl } from "react-intl";
+import useCursorMove from "@/hooks/useCursorMove";
+import { ARTICLE_LIST } from "constants/common";
+import type { Article } from "constants/common";
+import discuss from "images/html/discuss.jpg";
+import styles from "./index.module.scss";
 
 const MouseHover1 = () => {
   const intl = useIntl();
@@ -44,11 +22,11 @@ const MouseHover1 = () => {
   } = useCursorMove(containerRef, cursorRef);
 
   const onMouseEnterItem = () => {
-    setCursorSize('big');
+    setCursorSize("big");
   };
 
   const onMouseLeaveItem = () => {
-    setCursorSize('default');
+    setCursorSize("default");
   };
 
   return (
@@ -66,7 +44,7 @@ const MouseHover1 = () => {
           onMouseLeave={onMouseLeaveItem}
         >
           {intl.formatMessage({
-            id: 'page.htmlVision.interactiveDesign.personalArticle',
+            id: "page.htmlVision.interactiveDesign.personalArticle",
           })}
         </p>
         <div className={styles.bottom}>
@@ -77,7 +55,7 @@ const MouseHover1 = () => {
             onMouseLeave={onMouseLeaveItem}
           />
           <div className={styles.right}>
-            {articles.map((article: Article, index: number) => (
+            {ARTICLE_LIST.map((article: Article, index: number) => (
               <a
                 key={index}
                 href={article.href}
@@ -94,12 +72,12 @@ const MouseHover1 = () => {
       <div
         className={styles.cursor}
         style={{
-          visibility: showCursor ? 'visible' : 'hidden',
+          visibility: showCursor ? "visible" : "hidden",
           width: `${
-            cursorSize === 'big' ? cursorBigRadius * 2 : cursorDefaultRadius * 2
+            cursorSize === "big" ? cursorBigRadius * 2 : cursorDefaultRadius * 2
           }px`,
           height: `${
-            cursorSize === 'big' ? cursorBigRadius * 2 : cursorDefaultRadius * 2
+            cursorSize === "big" ? cursorBigRadius * 2 : cursorDefaultRadius * 2
           }px`,
         }}
         ref={cursorRef}

src/pages/html/InteractiveDesign/components/MouseHover2/index.module.scss

@@ -26,6 +26,10 @@
       a {
         margin-top: 20px;
         color: #ffffff;
+
+        &:hover {
+          color: $globalPrimaryColor;
+        }
       }
 
       &::before {

src/pages/html/InteractiveDesign/components/MouseHover2/index.tsx

@@ -1,34 +1,8 @@
 import React, { useRef, useEffect, useCallback } from "react";
+import { ARTICLE_LIST } from "constants/common";
+import type { Article } from "constants/common";
 import styles from "./index.module.scss";
 
-interface Article {
-  name: string;
-  href: string;
-}
-
-const articles = [
-  {
-    name: "两个跨域页面进行跳转传参的终极方案",
-    href: "https://juejin.cn/post/7134967869326458916",
-  },
-  {
-    name: "面试秘籍之手写系列",
-    href: "https://juejin.cn/post/7134975263707758606",
-  },
-  {
-    name: "一款将打包后的Chrome插件自动化加载到浏览器的webpack插件",
-    href: "https://juejin.cn/post/7134991167095062565",
-  },
-  {
-    name: "全网最全AutoIt3基础教程及实战案例",
-    href: "https://juejin.cn/post/7134952028870017060",
-  },
-  {
-    name: "两个跨域页面实现量子纠缠的终极方案",
-    href: "https://juejin.cn/post/7312031033302614051",
-  },
-];
-
 const MouseHover2 = () => {
   const contentRef = useRef<HTMLDivElement>(null);
 
@@ -57,7 +31,7 @@ const MouseHover2 = () => {
   return (
     <div className={styles.container}>
       <div className={styles.content} ref={contentRef}>
-        {articles.map((article: Article, index: number) => (
+        {ARTICLE_LIST.map((article: Article, index: number) => (
           <div className={styles.item} key={index}>
             <div className={styles.box}>
               <div>{article.name}</div>