From 9cdd321585500aaedf504f03b433ba25fc86ab6f Mon Sep 17 00:00:00 2001 From: marherb <1014287974@qq.com> Date: Sun, 5 May 2024 15:51:08 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(All):=20=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E6=96=87=E6=A1=A3=20=E7=BB=84=E4=BB=B6=E9=83=A8=E5=88=86?= =?UTF-8?q?=E7=BB=86=E8=8A=82=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/CusButton/CusIconButton.tsx | 8 ++-- src/CusButton/index.fixture.tsx | 62 ++++++++++++++++++-------- src/CusIcon/Icons.tsx | 5 +-- src/CusIcon/index.fixture.tsx | 6 +++ src/CusInput/index.fixture.tsx | 56 +++++++++++++++++++++++ src/CusInput/inputConfig.ts | 32 ++++++------- src/CusListSelect/index.fixture.tsx | 27 +++++++++++ src/CusListSelect/style.scss | 1 + src/CusMenu/index.fixture.tsx | 37 +++++++++++++++ src/CusMenu/style.scss | 5 ++- src/CusModal/index.fixture.tsx | 40 +++++++++++++++++ src/CusText/index.fixture.tsx | 19 ++++++++ src/CusTooltip/index.fixture.tsx | 15 +++++++ src/{CusInput => }/assets/error.png | Bin src/{CusInput => }/assets/success.png | Bin src/assets/test.png | Bin 0 -> 4862 bytes src/{CusInput => }/assets/warning.png | Bin 18 files changed, 271 insertions(+), 44 deletions(-) create mode 100644 src/CusIcon/index.fixture.tsx create mode 100644 src/CusInput/index.fixture.tsx create mode 100644 src/CusListSelect/index.fixture.tsx create mode 100644 src/CusMenu/index.fixture.tsx create mode 100644 src/CusModal/index.fixture.tsx create mode 100644 src/CusText/index.fixture.tsx create mode 100644 src/CusTooltip/index.fixture.tsx rename src/{CusInput => }/assets/error.png (100%) rename src/{CusInput => }/assets/success.png (100%) create mode 100644 src/assets/test.png rename src/{CusInput => }/assets/warning.png (100%) diff --git a/package.json b/package.json index 4852ae8..4768b57 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@marherb-work/m-bob-components", - "version": "0.0.2", + "version": "0.0.3", "type": "module", "repository": { "type": "git", diff --git a/src/CusButton/CusIconButton.tsx b/src/CusButton/CusIconButton.tsx index 6979551..5fb0fab 100644 --- a/src/CusButton/CusIconButton.tsx +++ b/src/CusButton/CusIconButton.tsx @@ -1,4 +1,4 @@ -import { MouseEventHandler, memo, useRef } from "react"; +import { MouseEventHandler, useRef } from "react"; import { useHover } from "ahooks"; import { Button } from "antd"; import { borderRadius, paddings } from "../config"; @@ -6,7 +6,7 @@ import { backgrounds, borderColors, borderColorsOnHover } from "./buttonConfig"; import CusComIcon, { CusComIconType } from "../CusIcon/CusComIcon"; /**图标按钮 */ -function CusIconButton({ +export default function CusIconButton({ icon, onClick, size = "m", @@ -52,9 +52,11 @@ function CusIconButton({ control={isHovering} size={size} animation="rotate" + style={{ + cursor: "pointer", + }} {...icon} /> ); } -export default memo(CusIconButton); diff --git a/src/CusButton/index.fixture.tsx b/src/CusButton/index.fixture.tsx index 18cb717..8d3e1fd 100644 --- a/src/CusButton/index.fixture.tsx +++ b/src/CusButton/index.fixture.tsx @@ -1,27 +1,51 @@ -import { Space } from "antd"; +import { Row, Space } from "antd"; import CusButton from "."; +import testPng from "../assets/test.png"; export default () => { return ( - - size=el - size=l - size=m - size=s - size=es - - - type=solid - type=outline - type=text - - - disabled - - - block - + + + size=el + size=l + size=m + size=s + size=es + + + + + type=solid + type=outline + type=text + + + + disabled + + + block + + + + + leftIcon + + + HoverAnimation + + + ); }; diff --git a/src/CusIcon/Icons.tsx b/src/CusIcon/Icons.tsx index 8c356f3..237a00d 100644 --- a/src/CusIcon/Icons.tsx +++ b/src/CusIcon/Icons.tsx @@ -1,12 +1,9 @@ import Icon from "@ant-design/icons"; /**自定义图标 */ -export default { - CloseIcon, -}; /**Modal框 关闭按钮 */ -function CloseIcon() { +export function CloseIcon() { return ( ( diff --git a/src/CusIcon/index.fixture.tsx b/src/CusIcon/index.fixture.tsx new file mode 100644 index 0000000..462c830 --- /dev/null +++ b/src/CusIcon/index.fixture.tsx @@ -0,0 +1,6 @@ +import CusIconButton from "../CusButton/CusIconButton"; +import testPng from "../assets/test.png"; + +export default function () { + return ; +} diff --git a/src/CusInput/index.fixture.tsx b/src/CusInput/index.fixture.tsx new file mode 100644 index 0000000..86f39f2 --- /dev/null +++ b/src/CusInput/index.fixture.tsx @@ -0,0 +1,56 @@ +import { Divider, Space } from "antd"; +import CusInput from "."; +import TestPng from "../assets/test.png"; +import CusTextArea from "./CusTextArea"; + +export default function () { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +} diff --git a/src/CusInput/inputConfig.ts b/src/CusInput/inputConfig.ts index 525870e..35bb9f6 100644 --- a/src/CusInput/inputConfig.ts +++ b/src/CusInput/inputConfig.ts @@ -1,30 +1,30 @@ -import SuccessIcon from "./assets/success.png"; -import WarningIcon from "./assets/warning.png"; -import ErrorIcon from "./assets/error.png"; +import SuccessIcon from "../assets/success.png"; +import WarningIcon from "../assets/warning.png"; +import ErrorIcon from "../assets/error.png"; // input框主题色 export const themeColor = { - default: "#FFFFFF", - success: "#55EB47", - warning: "#FF9933", - error: "#FF3333", + default: "#FFFFFF", + success: "#55EB47", + warning: "#FF9933", + error: "#FF3333", }; // 反馈图标 export const feedbackIcon = { - success: SuccessIcon, - warning: WarningIcon, - error: ErrorIcon, + success: SuccessIcon, + warning: WarningIcon, + error: ErrorIcon, }; // 反馈图标大小 export const feedbackIconSize = { - el: 1.25, - l: 1.125, - m: 1, + el: 1.25, + l: 1.125, + m: 1, }; // 反馈图标间距 export const feedbackGap = { - el: 0.5, - l: 0.44, - m: 0.38, + el: 0.5, + l: 0.44, + m: 0.38, }; diff --git a/src/CusListSelect/index.fixture.tsx b/src/CusListSelect/index.fixture.tsx new file mode 100644 index 0000000..2e10697 --- /dev/null +++ b/src/CusListSelect/index.fixture.tsx @@ -0,0 +1,27 @@ +import { useState } from "react"; +import CusListSelect from "."; +import { Space } from "antd"; + +export default function () { + const [value, setValue] = useState("one"); + + return ( +
+ + + +
+ ); +} diff --git a/src/CusListSelect/style.scss b/src/CusListSelect/style.scss index f67f57f..5cf73e0 100644 --- a/src/CusListSelect/style.scss +++ b/src/CusListSelect/style.scss @@ -3,6 +3,7 @@ display: flex; justify-content: space-between; align-items: center; + cursor: pointer; &:nth-last-child(n + 2) { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } diff --git a/src/CusMenu/index.fixture.tsx b/src/CusMenu/index.fixture.tsx new file mode 100644 index 0000000..19d7e8f --- /dev/null +++ b/src/CusMenu/index.fixture.tsx @@ -0,0 +1,37 @@ +import CusMenu from "."; +import TestPng from "../assets/test.png"; + +export default function () { + return ( +
+ + ), + label: "one", + onClick: () => { + alert("one"); + }, + }, + { + label: "two", + onClick: () => { + alert("two"); + }, + }, + ]} + /> +
+ ); +} diff --git a/src/CusMenu/style.scss b/src/CusMenu/style.scss index 86d28af..b76c682 100644 --- a/src/CusMenu/style.scss +++ b/src/CusMenu/style.scss @@ -17,6 +17,7 @@ align-items: center; color: #ffffff; background: rgba(255, 255, 255, 0.05); + padding-left: 1rem; cursor: pointer; &:hover { color: #0b4367; @@ -24,8 +25,10 @@ .item-icon { width: 2.5rem; height: 2.5rem; - margin-left: 1rem; margin-right: 0.5rem; + display: flex; + justify-content: center; + align-items: center; } .item-text { font-size: 1rem; diff --git a/src/CusModal/index.fixture.tsx b/src/CusModal/index.fixture.tsx new file mode 100644 index 0000000..5d45850 --- /dev/null +++ b/src/CusModal/index.fixture.tsx @@ -0,0 +1,40 @@ +import { Space } from "antd"; +import CusModal from "."; +import CusButton from "../CusButton"; +import { useBoolean } from "ahooks"; +import { useEffect } from "react"; + +export default function () { + const [open, setOpen] = useBoolean(false); + const [loading, setLoading] = useBoolean(false); + + useEffect(() => { + if (loading) { + setTimeout(() => { + setLoading.setFalse(); + }, 1000); + } + }, [loading]); + + return ( + + modal + { + setOpen.setFalse(); + setLoading.setFalse(); + }} + loading={loading} + > + + loading + + + + ); +} diff --git a/src/CusText/index.fixture.tsx b/src/CusText/index.fixture.tsx new file mode 100644 index 0000000..e22f46a --- /dev/null +++ b/src/CusText/index.fixture.tsx @@ -0,0 +1,19 @@ +import { Space } from "antd"; +import CusText from "."; + +export default function () { + return ( + + + style=b1 + style=b2 + + + outline=regular + outline=medium + outline=semibold + outline=bold + + + ); +} diff --git a/src/CusTooltip/index.fixture.tsx b/src/CusTooltip/index.fixture.tsx new file mode 100644 index 0000000..dc3ad5d --- /dev/null +++ b/src/CusTooltip/index.fixture.tsx @@ -0,0 +1,15 @@ +import { Space, Tooltip } from "antd"; +import TestPng from "../assets/test.png"; +import CusIconButton from "../CusButton/CusIconButton"; + +export default function () { + return ( + + +
+ +
+ + + ); +} diff --git a/src/CusInput/assets/error.png b/src/assets/error.png similarity index 100% rename from src/CusInput/assets/error.png rename to src/assets/error.png diff --git a/src/CusInput/assets/success.png b/src/assets/success.png similarity index 100% rename from src/CusInput/assets/success.png rename to src/assets/success.png diff --git a/src/assets/test.png b/src/assets/test.png new file mode 100644 index 0000000000000000000000000000000000000000..5c55022a945bfb08c9a76889840f47683be1279f GIT binary patch literal 4862 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 literal 0 HcmV?d00001 diff --git a/src/CusInput/assets/warning.png b/src/assets/warning.png similarity index 100% rename from src/CusInput/assets/warning.png rename to src/assets/warning.png