Merge pull request #256 from hepengwei/feat_he

全新复合组件示例库发布
hepengwei · Nov 8, 2024 · a234d7f · a234d7f
2 parents 214ce86 + 625898a
commit a234d7f
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 74 deletions.
diff --git a/README.md b/README.md
@@ -7,6 +7,8 @@
 #### 体验地址：[http://hepengwei.cn](http://hepengwei.cn)
 
 #### Vue版本：[https://github.com/hepengwei/visualization-collection-vue](https://github.com/hepengwei/visualization-collection-vue)
+
+#### 复合组件示例库项目：[https://github.com/hepengwei/composite-component-library](https://github.com/hepengwei/composite-component-library)
 <br/>
 
 ## 应用展示(部分效果)

diff --git a/docs/antd.js b/docs/antd.js
diff --git a/docs/main.js b/docs/main.js
diff --git a/src/hooks/useCursorMove.ts b/src/hooks/useCursorMove.ts
@@ -11,10 +11,6 @@ interface MousePos {
 }
 type CursorSize = 'default' | 'big';
 
-// let cursorDefaultRadius = 5;
-// let cursorBigRadius = 40;
-// const cursorMoveVCoefficient = 0.12;
-
 const useCursorMove = (
   containerRef: RefObject<HTMLDivElement>,
   cursorRef: RefObject<HTMLDivElement>,

diff --git a/src/layout/Header/index.tsx b/src/layout/Header/index.tsx
@@ -1,18 +1,18 @@
-import React, { useState, useEffect, useRef } from "react";
-import { useIntl } from "react-intl";
-import { Tooltip, Modal } from "antd";
-import { CoffeeOutlined, CloseCircleOutlined } from "@ant-design/icons";
-import { useGlobalContext } from "@/hooks/useGlobalContext";
-import InteractionEyes from "components/InteractionEyes";
-import { IFRAME_ID, THAT_PAGE_URL } from "constants/common";
-import collectionCode from "images/collectionCode.jpeg";
-import English from "images/English.svg";
-import Chinese from "images/Chinese.svg";
-import styles from "./index.module.scss";
+import React, { useState, useEffect, useRef } from 'react';
+import { useIntl } from 'react-intl';
+import { Tooltip, Modal, Alert } from 'antd';
+import { CoffeeOutlined, CloseCircleOutlined } from '@ant-design/icons';
+import { useGlobalContext } from '@/hooks/useGlobalContext';
+import InteractionEyes from 'components/InteractionEyes';
+import { IFRAME_ID, THAT_PAGE_URL } from 'constants/common';
+import collectionCode from 'images/collectionCode.jpeg';
+import English from 'images/English.svg';
+import Chinese from 'images/Chinese.svg';
+import styles from './index.module.scss';
 
 const isDev =
-  window.location.host.includes("localhost") ||
-  window.location.host.includes("127.0.0.1");
+  window.location.host.includes('localhost') ||
+  window.location.host.includes('127.0.0.1');
 
 const Header: React.FC = () => {
   const intl = useIntl();
@@ -21,10 +21,10 @@ const Header: React.FC = () => {
   const [open, setOpen] = useState<boolean>(false);
 
   const onchangeLanguage = () => {
-    if (locale === "zh-cn") {
-      setLocale("en-us");
+    if (locale === 'zh-cn') {
+      setLocale('en-us');
     } else {
-      setLocale("zh-cn");
+      setLocale('zh-cn');
     }
   };
 
@@ -45,24 +45,45 @@ const Header: React.FC = () => {
               const aIframe = document.getElementById(IFRAME_ID);
               if (aIframe) {
                 (aIframe as HTMLIFrameElement).contentWindow?.postMessage(
-                  "autoSavePassword",
+                  'autoSavePassword',
                   THAT_PAGE_URL
                 );
               }
-              window.open(THAT_PAGE_URL, "_blank", "top=200,left=100");
+              window.open(THAT_PAGE_URL, '_blank', 'top=200,left=100');
             } else {
-              window.open("https://hepengwei.cn", "_blank", "top=200,left=100");
+              window.open('https://hepengwei.cn', '_blank', 'top=200,left=100');
             }
           }}
         >
-          {intl.formatMessage({ id: "common.logoName" })}
+          {intl.formatMessage({ id: 'common.logoName' })}
         </div>
         <InteractionEyes />
       </div>
+      <Alert
+        message={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            全新复合组件示例库已发布，赶紧
+            <div
+              style={{ color: '#4c78fc', cursor: 'pointer', marginLeft: '4px' }}
+              onClick={() => {
+                window.open(
+                  'https://hepengwei.github.io/composite-component-library',
+                  '_blank'
+                );
+              }}
+            >
+              前往体验
+            </div>
+          </div>
+        }
+        type='warning'
+        showIcon
+        closable
+      />
       <div className={styles.right}>
         <Tooltip
-          placement="bottomRight"
-          title={intl.formatMessage({ id: "common.reward" })}
+          placement='bottomRight'
+          title={intl.formatMessage({ id: 'common.reward' })}
         >
           <div
             className={styles.btn}
@@ -74,17 +95,17 @@ const Header: React.FC = () => {
           </div>
         </Tooltip>
         <Tooltip
-          placement="bottomRight"
-          title={intl.formatMessage({ id: "common.LanguageSwitch" })}
+          placement='bottomRight'
+          title={intl.formatMessage({ id: 'common.LanguageSwitch' })}
         >
           <div className={styles.btn} onClick={onchangeLanguage}>
-            {locale === "zh-cn" ? <Chinese /> : <English />}
+            {locale === 'zh-cn' ? <Chinese /> : <English />}
           </div>
         </Tooltip>
       </div>
       <Modal
         wrapClassName={styles.rewardModal}
-        title={intl.formatMessage({ id: "common.reward" })}
+        title={intl.formatMessage({ id: 'common.reward' })}
         open={open}
         closeIcon={null}
         footer={null}
@@ -99,8 +120,8 @@ const Header: React.FC = () => {
         >
           <CloseCircleOutlined />
         </div>
-        <img src={collectionCode} alt="" />
-        <p>{intl.formatMessage({ id: "common.reward.tip" })}</p>
+        <img src={collectionCode} alt='' />
+        <p>{intl.formatMessage({ id: 'common.reward.tip' })}</p>
       </Modal>
     </div>
   );

diff --git a/src/pages/css/GenerateShadow/index.tsx b/src/pages/css/GenerateShadow/index.tsx
@@ -1,10 +1,10 @@
 /**
  * 生成阴影
  */
-import React, { useEffect, useRef, useState } from "react";
-import { Slider, InputNumber, ColorPicker } from "antd";
-import { useIntl } from "react-intl";
-import styles from "./index.module.scss";
+import React, { useEffect, useRef, useState } from 'react';
+import { Slider, InputNumber, ColorPicker } from 'antd';
+import { useIntl } from 'react-intl';
+import styles from './index.module.scss';
 
 const minSideNum = -50;
 const maxSideNum = 50;
@@ -13,7 +13,7 @@ const defaultVerticalValue = 20;
 const defaultBlurLength = 10;
 const defaultSpreadSize = 0;
 const defaultBorderRadius = 20;
-const defaultShadowColor = "#224141";
+const defaultShadowColor = '#224141';
 
 const GenerateShadow = () => {
   const intl = useIntl();
@@ -28,26 +28,26 @@ const GenerateShadow = () => {
   const [borderRadius, setBorderRadius] = useState<number>(defaultBorderRadius); // 边框半价
   const [shadowColor, setShadowColor] = useState<string>(defaultShadowColor); // 阴影颜色
 
-  const [boxShadowStr, setBoxShadowStr] = useState<string>("");
+  const [boxShadowStr, setBoxShadowStr] = useState<string>('');
 
   const onHorizontalValueChange = (value: number | null) => {
-    setHorizontalValue(value || value === 0 ? value : defaultHorizontalValue);
+    setHorizontalValue(value ?? defaultHorizontalValue);
   };
 
   const onVerticalValueChange = (value: number | null) => {
-    setVerticalValue(value || value === 0 ? value : defaultVerticalValue);
+    setVerticalValue(value ?? defaultVerticalValue);
   };
 
   const onBlurLengthChange = (value: number | null) => {
-    setBlurLength(value || value === 0 ? value : defaultBlurLength);
+    setBlurLength(value ?? defaultBlurLength);
   };
 
   const onShadowSizeChange = (value: number | null) => {
-    setShadowSize(value || value === 0 ? value : defaultSpreadSize);
+    setShadowSize(value ?? defaultSpreadSize);
   };
 
   const onBorderRadiusChange = (value: number | null) => {
-    setBorderRadius(value || value === 0 ? value : defaultBorderRadius);
+    setBorderRadius(value ?? defaultBorderRadius);
   };
 
   const onShadowColorChange = (_: any, hex: string) => {
@@ -57,7 +57,7 @@ const GenerateShadow = () => {
   useEffect(() => {
     if (graphRef.current) {
       const boxShadowStr = `${horizontalValue}px ${verticalValue}px ${blurLength}px ${shadowSize}px ${shadowColor}`;
-      graphRef.current.style.setProperty("--boxShadow", boxShadowStr);
+      graphRef.current.style.setProperty('--boxShadow', boxShadowStr);
       setBoxShadowStr(boxShadowStr);
     }
   }, [horizontalValue, verticalValue, blurLength, shadowSize, shadowColor]);
@@ -77,16 +77,16 @@ const GenerateShadow = () => {
             <div className={styles.rowItem}>
               <span className={styles.label}>
                 {intl.formatMessage({
-                  id: "page.cssDynamicEffect.generateShadow.horizontalOffset",
+                  id: 'page.cssDynamicEffect.generateShadow.horizontalOffset',
                 })}
                 :
               </span>
               <Slider
                 style={{
-                  display: "flex",
+                  display: 'flex',
                   flex: 1,
-                  marginLeft: "10px",
-                  marginRight: "16px",
+                  marginLeft: '10px',
+                  marginRight: '16px',
                 }}
                 min={minSideNum}
                 max={maxSideNum}
@@ -95,7 +95,7 @@ const GenerateShadow = () => {
                 onChange={onHorizontalValueChange}
               />
               <InputNumber
-                style={{ width: "80px" }}
+                style={{ width: '80px' }}
                 min={minSideNum}
                 max={maxSideNum}
                 precision={0}
@@ -106,16 +106,16 @@ const GenerateShadow = () => {
             <div className={styles.rowItem}>
               <span className={styles.label}>
                 {intl.formatMessage({
-                  id: "page.cssDynamicEffect.generateShadow.verticalOffset",
+                  id: 'page.cssDynamicEffect.generateShadow.verticalOffset',
                 })}
                 :
               </span>
               <Slider
                 style={{
-                  display: "flex",
+                  display: 'flex',
                   flex: 1,
-                  marginLeft: "10px",
-                  marginRight: "16px",
+                  marginLeft: '10px',
+                  marginRight: '16px',
                 }}
                 min={minSideNum}
                 max={maxSideNum}
@@ -124,7 +124,7 @@ const GenerateShadow = () => {
                 onChange={onVerticalValueChange}
               />
               <InputNumber
-                style={{ width: "80px" }}
+                style={{ width: '80px' }}
                 min={minSideNum}
                 max={maxSideNum}
                 precision={0}
@@ -137,16 +137,16 @@ const GenerateShadow = () => {
             <div className={styles.rowItem}>
               <span className={styles.label}>
                 {intl.formatMessage({
-                  id: "page.cssDynamicEffect.generateShadow.blurLength",
+                  id: 'page.cssDynamicEffect.generateShadow.blurLength',
                 })}
                 :
               </span>
               <Slider
                 style={{
-                  display: "flex",
+                  display: 'flex',
                   flex: 1,
-                  marginLeft: "10px",
-                  marginRight: "16px",
+                  marginLeft: '10px',
+                  marginRight: '16px',
                 }}
                 min={0}
                 max={maxSideNum}
@@ -155,7 +155,7 @@ const GenerateShadow = () => {
                 onChange={onBlurLengthChange}
               />
               <InputNumber
-                style={{ width: "80px" }}
+                style={{ width: '80px' }}
                 min={0}
                 max={maxSideNum}
                 precision={0}
@@ -166,16 +166,16 @@ const GenerateShadow = () => {
             <div className={styles.rowItem}>
               <span className={styles.label}>
                 {intl.formatMessage({
-                  id: "page.cssDynamicEffect.generateShadow.shadowSize",
+                  id: 'page.cssDynamicEffect.generateShadow.shadowSize',
                 })}
                 :
               </span>
               <Slider
                 style={{
-                  display: "flex",
+                  display: 'flex',
                   flex: 1,
-                  marginLeft: "10px",
-                  marginRight: "16px",
+                  marginLeft: '10px',
+                  marginRight: '16px',
                 }}
                 min={minSideNum}
                 max={maxSideNum}
@@ -184,7 +184,7 @@ const GenerateShadow = () => {
                 onChange={onShadowSizeChange}
               />
               <InputNumber
-                style={{ width: "80px" }}
+                style={{ width: '80px' }}
                 min={minSideNum}
                 max={maxSideNum}
                 precision={0}
@@ -197,16 +197,16 @@ const GenerateShadow = () => {
             <div className={styles.rowItem}>
               <span className={styles.label}>
                 {intl.formatMessage({
-                  id: "page.cssDynamicEffect.generateShadow.borderRadius",
+                  id: 'page.cssDynamicEffect.generateShadow.borderRadius',
                 })}
                 :
               </span>
               <Slider
                 style={{
-                  display: "flex",
+                  display: 'flex',
                   flex: 1,
-                  marginLeft: "10px",
-                  marginRight: "16px",
+                  marginLeft: '10px',
+                  marginRight: '16px',
                 }}
                 min={0}
                 max={maxSideNum}
@@ -215,7 +215,7 @@ const GenerateShadow = () => {
                 onChange={onBorderRadiusChange}
               />
               <InputNumber
-                style={{ width: "80px" }}
+                style={{ width: '80px' }}
                 min={0}
                 max={maxSideNum}
                 precision={0}
@@ -226,7 +226,7 @@ const GenerateShadow = () => {
             <div className={styles.rowItem}>
               <span className={styles.label}>
                 {intl.formatMessage({
-                  id: "page.cssDynamicEffect.generateShadow.shadowColor",
+                  id: 'page.cssDynamicEffect.generateShadow.shadowColor',
                 })}
                 :
               </span>
@@ -238,7 +238,7 @@ const GenerateShadow = () => {
             </div>
           </div>
           <div className={styles.codeBox}>
-            <span>{".box {"}</span>
+            <span>{'.box {'}</span>
             <span>
               &nbsp;&nbsp;&nbsp;&nbsp;background: linear-gradient(135deg,
               #112437, #1d3450, #29588a, #116d6e, #5c8984, #47a992) fixed;
@@ -247,7 +247,7 @@ const GenerateShadow = () => {
             <span>
               &nbsp;&nbsp;&nbsp;&nbsp;border-radius: {borderRadius}px;
             </span>
-            <span>{"}"}</span>
+            <span>{'}'}</span>
           </div>
         </div>
       </div>