From f4c8a29ba1e0c937194a38c9e77bb514962518f2 Mon Sep 17 00:00:00 2001
From: Davdeyang <1320501826@qq.com>
Date: Thu, 23 Mar 2023 00:46:51 +0800
Subject: [PATCH 01/10] =?UTF-8?q?feat:=E6=B7=BB=E5=8A=A0dromDown=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/_test.tsx                                | 24 ++++++-
 src/components/dropDown/dropDown.module.css  | 11 ++++
 src/components/dropDown/dropDown.module.less | 13 ++++
 src/components/dropDown/index.tsx            | 68 ++++++++++++++++++++
 4 files changed, 115 insertions(+), 1 deletion(-)
 create mode 100644 src/components/dropDown/dropDown.module.css
 create mode 100644 src/components/dropDown/dropDown.module.less
 create mode 100644 src/components/dropDown/index.tsx

diff --git a/src/_test.tsx b/src/_test.tsx
index 4e3a04d..046615c 100644
--- a/src/_test.tsx
+++ b/src/_test.tsx
@@ -6,10 +6,13 @@ import Upload from './components/upload/upload';
 import Tab from './components/tab/tab';
 
 import * as GOJI from 'goji_ui'
+import DropDown from './components/dropDown';
 
 function App() {
 	const [visible, setVisible] = useState(false)
 	const [ev, setEv] = useState(false)
+	const [modalVisible,setModalVisible]= useState(false);
+
 	return <div>
 		{/* <GOJI.Tab
 			extSelector={'.tab'}
@@ -97,7 +100,26 @@ function App() {
 		>
 			请选择文件
 		</Upload>
+
+
+		<DropDown
+			trigger={'hover'}
+			onChangeVisible={()=>{
+				setModalVisible(true)
+			}}
+			visible={modalVisible}
+			width={100}
+			disable={false}
+			style={{
+				width:"100px",
+				height:"100px",
+				backgroundColor:"green"
+			}}
+			modelContent={<div>弹框内容</div>}
+		>
+			SHOW MODEL
+		</DropDown>
 	</div >
 }
 
-ReactDom.render(<App />, document.getElementById("app"))
\ No newline at end of file
+ReactDom.render(<App />, document.getElementById("app"))
diff --git a/src/components/dropDown/dropDown.module.css b/src/components/dropDown/dropDown.module.css
new file mode 100644
index 0000000..10ecfc7
--- /dev/null
+++ b/src/components/dropDown/dropDown.module.css
@@ -0,0 +1,11 @@
+.dropDownButton {
+  cursor: pointer;
+  position: relative;
+}
+.model {
+  height: auto;
+  border: 1px solid greenyellow;
+  position: absolute;
+  top: 20px;
+  left: 0;
+}
diff --git a/src/components/dropDown/dropDown.module.less b/src/components/dropDown/dropDown.module.less
new file mode 100644
index 0000000..04efb2c
--- /dev/null
+++ b/src/components/dropDown/dropDown.module.less
@@ -0,0 +1,13 @@
+  .dropDownButton{
+    cursor: pointer;
+    position: relative;
+  }
+
+  .model{
+    height: auto;
+    border: 1px solid greenyellow;
+    position: absolute;
+    top: 20px;
+    left: 0;
+  }
+
diff --git a/src/components/dropDown/index.tsx b/src/components/dropDown/index.tsx
new file mode 100644
index 0000000..28a64d4
--- /dev/null
+++ b/src/components/dropDown/index.tsx
@@ -0,0 +1,68 @@
+import React, { ReactElement, ReactNode, useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import styles from "./dropDown.module.less";
+
+type trigger = "click" | "hover";
+
+interface IDropDown {
+  // trigger?: ("click" | "hover")[];
+  trigger: trigger;
+  style?: React.CSSProperties;
+  className?: string;
+  children?: ReactNode;
+  visible?: boolean;
+  disable?: boolean;
+  modelContent: ReactNode;
+  width: number;
+  onChangeVisible: () => void;
+}
+
+const DropDown: React.FC<IDropDown> = ({
+  trigger,
+  style,
+  width,
+  className,
+  children,
+  visible,
+  disable,
+  modelContent,
+  onChangeVisible,
+}) => {
+  const [show, setShow] = useState(visible);
+  const dropDownButton = document.getElementById('dropDownButton') as HTMLElement;
+
+  return (
+    <div className={styles.dropDown}>
+      {trigger === "click" ? (
+        <button
+          onClick={() => onChangeVisible()}
+          disabled={disable}
+          className={styles.dropDownButton}
+          id="dropDownButton"
+        >
+          {children}
+        </button>
+      ) : (
+        <button
+          onMouseEnter={() => setShow(true)}
+          onMouseLeave={() => setShow(false)}
+          disabled={disable}
+          className={styles.dropDownButton}
+          id="dropDownButton"
+        >
+          {children}
+        </button>
+      )}
+
+      {show === true &&
+        createPortal(
+          <div className={styles.model} style={{ width: `${width}px` }}>
+            {modelContent}
+          </div>,
+          dropDownButton
+        )}
+    </div>
+  );
+};
+
+export default DropDown;

From b3d15bc311a4fcfb93c93a08ee01dba6889a2fe6 Mon Sep 17 00:00:00 2001
From: Davdeyang <1320501826@qq.com>
Date: Thu, 23 Mar 2023 16:47:46 +0800
Subject: [PATCH 02/10] =?UTF-8?q?feat:dropDown=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/_test.tsx                                |  8 ++++----
 src/components/dropDown/dropDown.module.css  | 13 ++++++-------
 src/components/dropDown/dropDown.module.less | 16 +++++++++-------
 src/components/dropDown/index.tsx            | 12 +++++-------
 4 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/src/_test.tsx b/src/_test.tsx
index 046615c..2d1d02b 100644
--- a/src/_test.tsx
+++ b/src/_test.tsx
@@ -4,7 +4,6 @@ import ReactDom from 'react-dom'
 import Modal from './components/modal/modal';
 import Upload from './components/upload/upload';
 import Tab from './components/tab/tab';
-
 import * as GOJI from 'goji_ui'
 import DropDown from './components/dropDown';
 
@@ -103,11 +102,11 @@ function App() {
 
 
 		<DropDown
-			trigger={'hover'}
+			trigger={'click'}
+			visible={modalVisible}
 			onChangeVisible={()=>{
-				setModalVisible(true)
+				setModalVisible(!modalVisible)
 			}}
-			visible={modalVisible}
 			width={100}
 			disable={false}
 			style={{
@@ -116,6 +115,7 @@ function App() {
 				backgroundColor:"green"
 			}}
 			modelContent={<div>弹框内容</div>}
+			// className={"modless"}
 		>
 			SHOW MODEL
 		</DropDown>
diff --git a/src/components/dropDown/dropDown.module.css b/src/components/dropDown/dropDown.module.css
index 10ecfc7..d9fed29 100644
--- a/src/components/dropDown/dropDown.module.css
+++ b/src/components/dropDown/dropDown.module.css
@@ -1,11 +1,10 @@
-.dropDownButton {
+.dropDown .dropDownButton {
   cursor: pointer;
-  position: relative;
+  display: block;
 }
-.model {
-  height: auto;
+.dropDown .model {
   border: 1px solid greenyellow;
-  position: absolute;
-  top: 20px;
-  left: 0;
+  display: inline-block;
+  height: auto;
+  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 }
diff --git a/src/components/dropDown/dropDown.module.less b/src/components/dropDown/dropDown.module.less
index 04efb2c..791e4d7 100644
--- a/src/components/dropDown/dropDown.module.less
+++ b/src/components/dropDown/dropDown.module.less
@@ -1,13 +1,15 @@
-  .dropDownButton{
+.dropDown {
+  .dropDownButton {
     cursor: pointer;
-    position: relative;
+    display: block;
   }
 
-  .model{
+  .model {
     height: auto;
     border: 1px solid greenyellow;
-    position: absolute;
-    top: 20px;
-    left: 0;
+    display: inline-block;
+    height: auto;
+    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
   }
-
+}
diff --git a/src/components/dropDown/index.tsx b/src/components/dropDown/index.tsx
index 28a64d4..d1f24b5 100644
--- a/src/components/dropDown/index.tsx
+++ b/src/components/dropDown/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode, useEffect, useMemo, useState } from "react";
+import React, { ReactNode, useEffect, useMemo, useState } from "react";
 import { createPortal } from "react-dom";
 import styles from "./dropDown.module.less";
 
@@ -29,16 +29,15 @@ const DropDown: React.FC<IDropDown> = ({
   onChangeVisible,
 }) => {
   const [show, setShow] = useState(visible);
-  const dropDownButton = document.getElementById('dropDownButton') as HTMLElement;
+  const dropDown = document.getElementById('dropDown') as HTMLElement;
 
   return (
-    <div className={styles.dropDown}>
+    <div id="dropDown" className={styles.dropDown}>
       {trigger === "click" ? (
         <button
           onClick={() => onChangeVisible()}
           disabled={disable}
           className={styles.dropDownButton}
-          id="dropDownButton"
         >
           {children}
         </button>
@@ -48,18 +47,17 @@ const DropDown: React.FC<IDropDown> = ({
           onMouseLeave={() => setShow(false)}
           disabled={disable}
           className={styles.dropDownButton}
-          id="dropDownButton"
         >
           {children}
         </button>
       )}
 
-      {show === true &&
+      {(show === true || visible === true) &&
         createPortal(
           <div className={styles.model} style={{ width: `${width}px` }}>
             {modelContent}
           </div>,
-          dropDownButton
+          dropDown
         )}
     </div>
   );

From e515da27c14d2897d2f5acab028a5bc5d873559a Mon Sep 17 00:00:00 2001
From: Davdeyang <1320501826@qq.com>
Date: Thu, 23 Mar 2023 18:01:51 +0800
Subject: [PATCH 03/10] =?UTF-8?q?feat:dropDown=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/_test.tsx                                 | 235 ++++++++++--------
 src/components/dropDown/dropDown.module.css   |  29 ++-
 src/components/dropDown/dropDown.module.less  |  30 ++-
 src/components/dropDown/index.tsx             |  55 +++-
 .../\344\270\213\347\256\255\345\244\264.jpg" | Bin 0 -> 7759 bytes
 5 files changed, 238 insertions(+), 111 deletions(-)
 create mode 100644 "static/\344\270\213\347\256\255\345\244\264.jpg"

diff --git a/src/_test.tsx b/src/_test.tsx
index 2d1d02b..0db12f2 100644
--- a/src/_test.tsx
+++ b/src/_test.tsx
@@ -1,19 +1,19 @@
-
-import React, { useState } from 'react';
-import ReactDom from 'react-dom'
-import Modal from './components/modal/modal';
-import Upload from './components/upload/upload';
-import Tab from './components/tab/tab';
-import * as GOJI from 'goji_ui'
-import DropDown from './components/dropDown';
+import React, { useState } from "react";
+import ReactDom from "react-dom";
+import Modal from "./components/modal/modal";
+import Upload from "./components/upload/upload";
+import Tab from "./components/tab/tab";
+import * as GOJI from "goji_ui";
+import DropDown from "./components/dropDown";
 
 function App() {
-	const [visible, setVisible] = useState(false)
-	const [ev, setEv] = useState(false)
-	const [modalVisible,setModalVisible]= useState(false);
+  const [visible, setVisible] = useState(false);
+  const [ev, setEv] = useState(false);
+  const [modalVisible, setModalVisible] = useState(false);
 
-	return <div>
-		{/* <GOJI.Tab
+  return (
+    <div>
+      {/* <GOJI.Tab
 			extSelector={'.tab'}
 			extension={<div>这是扩展的内容</div>}
 			items={[
@@ -30,96 +30,129 @@ function App() {
 			]}
 		/> */}
 
+      <h1>test</h1>
+      <button
+        onClick={() => {
+          setVisible(true);
+        }}
+      >
+        show modal
+      </button>
+      <Tab
+        onTabChange={() => {
+          setEv(true);
+        }}
+        hiddenStyle={{
+          height: "0px",
+          overflow: "hidden",
+        }}
+        tabContentVisible={ev}
+        extSelector={'[aria-label="tab"]'}
+        extension={
+          <div
+            onClick={() => {
+              setEv(!ev);
+            }}
+            className="ext"
+          >
+            这是扩展的内容
+          </div>
+        }
+        items={[
+          {
+            title: "tab1",
+            key: "tab1",
+            children: <div>tab1</div>,
+          },
+          {
+            title: "tab2",
+            key: "tab2",
+            children: <div>tab2</div>,
+          },
+        ]}
+      />
 
-		<h1>test</h1>
-		<button
-			onClick={() => {
-				setVisible(true)
-			}}
-		>
-			show modal
-		</button>
-		<Tab
-			onTabChange={()=>{
-				setEv(true)
-			}}
-			hiddenStyle={{
-				height:'0px',
-				overflow:'hidden'
-			}}
-			tabContentVisible={ev}
-			extSelector={'[aria-label="tab"]'}
-			extension={<div onClick={() => { setEv(!ev) }} className="ext">这是扩展的内容</div>}
-			items={[
-				{
-					title: "tab1",
-					key: "tab1",
-					children: <div>tab1</div>
-				},
-				{
-					title: "tab2",
-					key: "tab2",
-					children: <div>tab2</div>
-				}
-			]}
-		/>
-
-		<Modal
-			// dontDestroyOnClose={true}
-			onClose={() => {
-				setVisible(false)
-			}}
-			visible={visible}
-		>
-			<div>
-				how to set default value for typescript interface field
-				<input type="text" />
-			</div>
-		</Modal>
-
-		<Upload
-			uploadUrl='/api/video-service/upload'
-			beforeUpload={(f) => {
-				for (var i = 0; i < f.length; i++) {
-					console.log(f[i].name)
-				}
-				return new Promise((r, j) => {
-					setTimeout(() => {
-						r(f)
-					}, 1000);
-				})
-			}}
-
-			valueFilter={({ response }) => {
-				return (response as Record<string, Object>).url
-			}}
-			onComplete={(res: any[]) => {
-				console.log(res)
-			}}
-		>
-			请选择文件
-		</Upload>
+      <Modal
+        // dontDestroyOnClose={true}
+        onClose={() => {
+          setVisible(false);
+        }}
+        visible={visible}
+      >
+        <div>
+          how to set default value for typescript interface field
+          <input type="text" />
+        </div>
+      </Modal>
 
+      <Upload
+        uploadUrl="/api/video-service/upload"
+        beforeUpload={(f) => {
+          for (var i = 0; i < f.length; i++) {
+            console.log(f[i].name);
+          }
+          return new Promise((r, j) => {
+            setTimeout(() => {
+              r(f);
+            }, 1000);
+          });
+        }}
+        valueFilter={({ response }) => {
+          return (response as Record<string, Object>).url;
+        }}
+        onComplete={(res: any[]) => {
+          console.log(res);
+        }}
+      >
+        请选择文件
+      </Upload>
 
-		<DropDown
-			trigger={'click'}
-			visible={modalVisible}
-			onChangeVisible={()=>{
-				setModalVisible(!modalVisible)
-			}}
-			width={100}
-			disable={false}
-			style={{
-				width:"100px",
-				height:"100px",
-				backgroundColor:"green"
-			}}
-			modelContent={<div>弹框内容</div>}
-			// className={"modless"}
-		>
-			SHOW MODEL
-		</DropDown>
-	</div >
+      <DropDown
+        trigger={"hover"}
+        visible={modalVisible}
+        onChangeVisible={() => {
+          setModalVisible(!modalVisible);
+        }}
+        // width={100}
+        disable={false}
+        style={{
+          width: "100px",
+          height: "100px",
+          backgroundColor: "green",
+        }}
+        modelContent={[
+          {
+            id: "1",
+            label: (
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                href="#"
+              >
+                1st menu item
+              </a>
+            ),
+          },
+          {
+            id: "2",
+            label: (
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                href="#"
+              >
+                2nd menu item
+              </a>
+            ),
+          },
+        ]
+			}
+        // className={"modless"}
+      >
+        SHOW MODEL <img src="../static/下箭头.jpg"/>
+      </DropDown>
+    </div>
+  );
 }
 
-ReactDom.render(<App />, document.getElementById("app"))
+ReactDom.render(<App />, document.getElementById("app"));
diff --git a/src/components/dropDown/dropDown.module.css b/src/components/dropDown/dropDown.module.css
index d9fed29..a6316a4 100644
--- a/src/components/dropDown/dropDown.module.css
+++ b/src/components/dropDown/dropDown.module.css
@@ -1,10 +1,35 @@
+.dropDown {
+  position: relative;
+}
 .dropDown .dropDownButton {
   cursor: pointer;
-  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 .dropDown .model {
-  border: 1px solid greenyellow;
+  position: absolute;
+  top: 25px;
+  cursor: pointer;
+  padding: 5px;
   display: inline-block;
   height: auto;
+  border-radius: 5px;
   box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 }
+.dropDown .model .modelList {
+  margin: 0;
+  padding: 0;
+}
+.dropDown .model .modelList .modalListItem {
+  list-style: none;
+  padding: 5px;
+}
+.dropDown .model .modelList .modalListItem a {
+  text-decoration: none;
+  color: #414141;
+}
+.dropDown .model .modelList .modalListItem:hover {
+  transition: all 0.2s;
+  background-color: aliceblue;
+}
diff --git a/src/components/dropDown/dropDown.module.less b/src/components/dropDown/dropDown.module.less
index 791e4d7..9d2c224 100644
--- a/src/components/dropDown/dropDown.module.less
+++ b/src/components/dropDown/dropDown.module.less
@@ -1,15 +1,41 @@
 .dropDown {
+  position: relative;
   .dropDownButton {
     cursor: pointer;
-    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
   }
 
   .model {
+    position: absolute;
+    top: 25px;
+    cursor: pointer;
     height: auto;
-    border: 1px solid greenyellow;
+    padding: 5px;
     display: inline-block;
     height: auto;
+    border-radius: 5px;
     box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
       0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+
+    .modelList{
+      margin: 0;
+      padding: 0;
+     .modalListItem  {
+        list-style: none;
+        padding: 5px;
+        a{
+          text-decoration: none;
+          color: rgb(65, 65, 65);
+        }
+      }
+
+      .modalListItem:hover{
+        transition: all .2s;
+        background-color: aliceblue;
+      }
+    }
+
   }
 }
diff --git a/src/components/dropDown/index.tsx b/src/components/dropDown/index.tsx
index d1f24b5..bbb076c 100644
--- a/src/components/dropDown/index.tsx
+++ b/src/components/dropDown/index.tsx
@@ -3,7 +3,7 @@ import { createPortal } from "react-dom";
 import styles from "./dropDown.module.less";
 
 type trigger = "click" | "hover";
-
+type position = "left" | "right" | "top" | "bottom";
 interface IDropDown {
   // trigger?: ("click" | "hover")[];
   trigger: trigger;
@@ -12,8 +12,9 @@ interface IDropDown {
   children?: ReactNode;
   visible?: boolean;
   disable?: boolean;
-  modelContent: ReactNode;
-  width: number;
+  modelContent: object[];
+  width?: number;
+  position?: position;
   onChangeVisible: () => void;
 }
 
@@ -26,10 +27,38 @@ const DropDown: React.FC<IDropDown> = ({
   visible,
   disable,
   modelContent,
+  position,
   onChangeVisible,
 }) => {
   const [show, setShow] = useState(visible);
-  const dropDown = document.getElementById('dropDown') as HTMLElement;
+  const dropDown = document.getElementById("dropDown") as HTMLElement;
+
+  const fixedPositon = () => {
+    switch (position) {
+      case "left":
+        return {
+          bottom: 0,
+          left: 0,
+        };
+      case "right":
+        return {
+          right: 0,
+          top: 0,
+        };
+      case "top":
+        return {
+          bottom: 0,
+          left: 0,
+        };
+      case "bottom":
+        return {
+          bottom: 0,
+          left: 0,
+        };
+      default:
+        break;
+    }
+  };
 
   return (
     <div id="dropDown" className={styles.dropDown}>
@@ -54,8 +83,22 @@ const DropDown: React.FC<IDropDown> = ({
 
       {(show === true || visible === true) &&
         createPortal(
-          <div className={styles.model} style={{ width: `${width}px` }}>
-            {modelContent}
+          <div
+            className={styles.model}
+            style={{ width: `${width}px` }}
+            onMouseEnter={() => setShow(true)}
+            onMouseLeave={() => setShow(false)}
+          >
+            <ul className={styles.modelList}>
+              {modelContent?.map((item) => {
+                return (
+                  <li key={item?.id} className={styles.modalListItem}>
+                    {item?.label}
+                  </li>
+                );
+              })}
+            </ul>
+            {/* {modelContent} */}
           </div>,
           dropDown
         )}
diff --git "a/static/\344\270\213\347\256\255\345\244\264.jpg" "b/static/\344\270\213\347\256\255\345\244\264.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..bb86ebe6d16c086e38a8db28cfd233c684df5eab
GIT binary patch
literal 7759
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
DHC@J>

literal 0
HcmV?d00001


From 43b8d35157b7a611c2e8f16151dff6074e65cc04 Mon Sep 17 00:00:00 2001
From: Davdeyang <1320501826@qq.com>
Date: Thu, 23 Mar 2023 23:29:26 +0800
Subject: [PATCH 04/10] =?UTF-8?q?feat:dropDown=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/_test.tsx                                |   3 +-
 src/components/dropDown/dropDown.module.css  | 186 ++++++++++++++++-
 src/components/dropDown/dropDown.module.less | 206 ++++++++++++++++++-
 src/components/dropDown/index.tsx            | 145 +++++++------
 src/components/dropDown/model.tsx            |  43 ++++
 5 files changed, 505 insertions(+), 78 deletions(-)
 create mode 100644 src/components/dropDown/model.tsx

diff --git a/src/_test.tsx b/src/_test.tsx
index 0db12f2..1ee8ec3 100644
--- a/src/_test.tsx
+++ b/src/_test.tsx
@@ -113,7 +113,8 @@ function App() {
         onChangeVisible={() => {
           setModalVisible(!modalVisible);
         }}
-        // width={100}
+				position="topRight"
+        width={150}
         disable={false}
         style={{
           width: "100px",
diff --git a/src/components/dropDown/dropDown.module.css b/src/components/dropDown/dropDown.module.css
index a6316a4..79bf71a 100644
--- a/src/components/dropDown/dropDown.module.css
+++ b/src/components/dropDown/dropDown.module.css
@@ -1,15 +1,112 @@
 .dropDown {
+  margin-top: 100px;
   position: relative;
 }
 .dropDown .dropDownButton {
   cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.dropDown .modelLeft {
+  position: absolute;
+  cursor: pointer;
+  padding: 5px;
+  display: inline-block;
+  height: auto;
+  border-radius: 5px;
+  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}
+.dropDown .modelLeft .modelList {
+  margin: 0;
+  padding: 0;
+}
+.dropDown .modelLeft .modelList .modalListItem {
+  list-style: none;
+  padding: 5px;
+}
+.dropDown .modelLeft .modelList .modalListItem a {
+  text-decoration: none;
+  color: #414141;
+}
+.dropDown .modelLeft .modelList .modalListItem:hover {
+  transition: all 0.2s;
+  background-color: aliceblue;
+}
+.dropDown .modelLeft::after {
+  width: 0;
+  height: 0;
+  content: "";
+  border-width: 6px;
+  border-color: transparent transparent #a07676 transparent;
+  border-style: dashed dashed solid dashed;
+  position: absolute;
+  top: -11px;
+  right: 9px;
+  z-index: 99;
+}
+.dropDown .modelLeft::before {
+  width: 0;
+  height: 0;
+  content: "";
+  border-width: 6px;
+  border-color: transparent transparent #884b4b transparent;
+  border-style: dashed dashed solid dashed;
+  position: absolute;
+  top: -11px;
+  right: 9px;
+  z-index: 99;
+}
+.dropDown .modelCenter {
+  cursor: pointer;
+  padding: 5px;
+  display: inline-block;
+  height: auto;
+  border-radius: 5px;
+  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}
+.dropDown .modelCenter .modelList {
+  margin: 0;
+  padding: 0;
+}
+.dropDown .modelCenter .modelList .modalListItem {
+  list-style: none;
+  padding: 5px;
+}
+.dropDown .modelCenter .modelList .modalListItem a {
+  text-decoration: none;
+  color: #414141;
+}
+.dropDown .modelCenter .modelList .modalListItem:hover {
+  transition: all 0.2s;
+  background-color: aliceblue;
+}
+.dropDown .modelCenter::before {
+  width: 0;
+  height: 0;
+  content: "";
+  border-width: 6px;
+  border-color: transparent transparent #ffffff transparent;
+  border-style: dashed dashed solid dashed;
   position: absolute;
-  top: 0;
-  left: 0;
+  top: -11px;
+  right: 45%;
+  z-index: 99;
 }
-.dropDown .model {
+.dropDown .modelCenter::after {
+  width: 0;
+  height: 0;
+  content: "";
+  border-width: 6px;
+  border-color: transparent transparent #ffffff transparent;
+  border-style: dashed dashed solid dashed;
+  position: absolute;
+  top: -11px;
+  right: 45%;
+  z-index: 99;
+}
+.dropDown .modelTopRight {
   position: absolute;
-  top: 25px;
   cursor: pointer;
   padding: 5px;
   display: inline-block;
@@ -17,19 +114,92 @@
   border-radius: 5px;
   box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 }
-.dropDown .model .modelList {
+.dropDown .modelTopRight .modelList {
   margin: 0;
   padding: 0;
 }
-.dropDown .model .modelList .modalListItem {
+.dropDown .modelTopRight .modelList .modalListItem {
   list-style: none;
   padding: 5px;
 }
-.dropDown .model .modelList .modalListItem a {
+.dropDown .modelTopRight .modelList .modalListItem a {
   text-decoration: none;
   color: #414141;
 }
-.dropDown .model .modelList .modalListItem:hover {
+.dropDown .modelTopRight .modelList .modalListItem:hover {
   transition: all 0.2s;
   background-color: aliceblue;
 }
+.dropDown .modelTopRight::before {
+  width: 0;
+  height: 0;
+  content: "";
+  border-width: 6px;
+  border-color: #ffffff transparent transparent transparent;
+  border-style: dashed dashed solid dashed;
+  position: absolute;
+  top: -11px;
+  right: 9px;
+  z-index: 99;
+}
+.dropDown .modelTopRight::after {
+  width: 0;
+  height: 0;
+  content: "";
+  border-width: 6px;
+  border-color: #ffffff transparent transparent transparent;
+  border-style: dashed dashed solid dashed;
+  position: absolute;
+  top: -11px;
+  right: 9px;
+  z-index: 99;
+}
+.dropDown .modelTopCenter {
+  position: absolute;
+  cursor: pointer;
+  padding: 5px;
+  display: inline-block;
+  height: auto;
+  border-radius: 5px;
+  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}
+.dropDown .modelTopCenter .modelList {
+  margin: 0;
+  padding: 0;
+}
+.dropDown .modelTopCenter .modelList .modalListItem {
+  list-style: none;
+  padding: 5px;
+}
+.dropDown .modelTopCenter .modelList .modalListItem a {
+  text-decoration: none;
+  color: #414141;
+}
+.dropDown .modelTopCenter .modelList .modalListItem:hover {
+  transition: all 0.2s;
+  background-color: aliceblue;
+}
+.dropDown .modelTopCenter::before {
+  width: 0;
+  height: 0;
+  content: "";
+  border-width: 6px;
+  border-color: #ffffff transparent transparent transparent;
+  border-style: dashed dashed solid dashed;
+  position: absolute;
+  top: -11px;
+  right: 45%;
+  z-index: 99;
+}
+.dropDown .modelTopCenter::after {
+  width: 0;
+  height: 0;
+  content: "";
+  border-width: 6px;
+  border-color: #ffffff transparent transparent transparent;
+  border-style: dashed dashed solid dashed;
+  position: absolute;
+  top: -11px;
+  right: 45%;
+  z-index: 99;
+}
diff --git a/src/components/dropDown/dropDown.module.less b/src/components/dropDown/dropDown.module.less
index 9d2c224..c0c9ce7 100644
--- a/src/components/dropDown/dropDown.module.less
+++ b/src/components/dropDown/dropDown.module.less
@@ -1,15 +1,75 @@
 .dropDown {
+  margin-top: 100px;
   position: relative;
+  // overflow: hidden;
   .dropDownButton {
     cursor: pointer;
+    // position: absolute;
+    // top: 0;
+    // left: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .modelLeft{
     position: absolute;
-    top: 0;
-    left: 0;
+    cursor: pointer;
+    height: auto;
+    padding: 5px;
+    display: inline-block;
+    height: auto;
+    border-radius: 5px;
+    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+
+    .modelList{
+      margin: 0;
+      padding: 0;
+     .modalListItem  {
+        list-style: none;
+        padding: 5px;
+        a{
+          text-decoration: none;
+          color: rgb(65, 65, 65);
+        }
+      }
+
+      .modalListItem:hover{
+        transition: all .2s;
+        background-color: aliceblue;
+      }
+    }
   }
 
-  .model {
+  .modelLeft::after{
+    width: 0;
+    height: 0;
+    content: "";
+    border-width: 6px;
+    border-color: transparent transparent #a07676 transparent;
+    border-style: dashed dashed solid dashed;
     position: absolute;
-    top: 25px;
+    top: -11px;
+    right: 9px;
+    z-index: 99;
+  }
+
+  .modelLeft::before{
+    width: 0;
+    height: 0;
+    content: "";
+    border-width: 6px;
+    border-color: transparent transparent #884b4b transparent;
+    border-style: dashed dashed solid dashed;
+    position: absolute;
+    top: -11px;
+    right: 9px;
+    z-index: 99;
+  }
+
+  .modelCenter{
+    // position: absolute;
     cursor: pointer;
     height: auto;
     padding: 5px;
@@ -36,6 +96,144 @@
         background-color: aliceblue;
       }
     }
+  }
+
+  .modelCenter::before{
+    width: 0;
+    height: 0;
+    content: "";
+    border-width: 6px;
+    border-color: transparent transparent #ffffff transparent;
+    border-style: dashed dashed solid dashed;
+    position: absolute;
+    top: -11px;
+    right: 45%;
+    z-index: 99;
+  }
 
+  .modelCenter::after{
+    width: 0;
+    height: 0;
+    content: "";
+    border-width: 6px;
+    border-color: transparent transparent #ffffff transparent;
+    border-style: dashed dashed solid dashed;
+    position: absolute;
+    top: -11px;
+    right: 45%;
+    z-index: 99;
+  }
+
+
+  .modelTopRight{
+    position: absolute;
+    cursor: pointer;
+    height: auto;
+    padding: 5px;
+    display: inline-block;
+    height: auto;
+    border-radius: 5px;
+    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+
+    .modelList{
+      margin: 0;
+      padding: 0;
+     .modalListItem  {
+        list-style: none;
+        padding: 5px;
+        a{
+          text-decoration: none;
+          color: rgb(65, 65, 65);
+        }
+      }
+
+      .modalListItem:hover{
+        transition: all .2s;
+        background-color: aliceblue;
+      }
+    }
+  }
+
+  .modelTopRight::before{
+    width: 0;
+    height: 0;
+    content: "";
+    border-width: 6px;
+    border-color: #ffffff transparent transparent transparent;
+    border-style: dashed dashed solid dashed;
+    position: absolute;
+    top: -11px;
+    right: 9px;
+    z-index: 99;
+  }
+
+  .modelTopRight::after{
+    width: 0;
+    height: 0;
+    content: "";
+    border-width: 6px;
+    border-color: #ffffff transparent transparent transparent;
+    border-style: dashed dashed solid dashed;
+    position: absolute;
+    top: -11px;
+    right: 9px;
+    z-index: 99;
+  }
+
+  .modelTopCenter{
+    position: absolute;
+    cursor: pointer;
+    height: auto;
+    padding: 5px;
+    display: inline-block;
+    height: auto;
+    border-radius: 5px;
+    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+
+    .modelList{
+      margin: 0;
+      padding: 0;
+     .modalListItem  {
+        list-style: none;
+        padding: 5px;
+        a{
+          text-decoration: none;
+          color: rgb(65, 65, 65);
+        }
+      }
+
+      .modalListItem:hover{
+        transition: all .2s;
+        background-color: aliceblue;
+      }
+    }
+  }
+
+  .modelTopCenter::before{
+    width: 0;
+    height: 0;
+    content: "";
+    border-width: 6px;
+    border-color: #ffffff transparent transparent transparent;
+    border-style: dashed dashed solid dashed;
+    position: absolute;
+    top: -11px;
+    right: 45%;
+    z-index: 99;
+  }
+
+  .modelTopCenter::after{
+    width: 0;
+    height: 0;
+    content: "";
+    border-width: 6px;
+    border-color: #ffffff transparent transparent transparent;
+    border-style: dashed dashed solid dashed;
+    position: absolute;
+    top: -11px;
+    right: 45%;
+    z-index: 99;
   }
 }
diff --git a/src/components/dropDown/index.tsx b/src/components/dropDown/index.tsx
index bbb076c..2de8bca 100644
--- a/src/components/dropDown/index.tsx
+++ b/src/components/dropDown/index.tsx
@@ -1,9 +1,11 @@
-import React, { ReactNode, useEffect, useMemo, useState } from "react";
+import React, { ReactNode, useState } from "react";
 import { createPortal } from "react-dom";
 import styles from "./dropDown.module.less";
+import Model from "./model";
 
 type trigger = "click" | "hover";
-type position = "left" | "right" | "top" | "bottom";
+type position = "bottomRight" | "bottom" | "top" | "topRight";
+
 interface IDropDown {
   // trigger?: ("click" | "hover")[];
   trigger: trigger;
@@ -33,76 +35,89 @@ const DropDown: React.FC<IDropDown> = ({
   const [show, setShow] = useState(visible);
   const dropDown = document.getElementById("dropDown") as HTMLElement;
 
-  const fixedPositon = () => {
-    switch (position) {
-      case "left":
-        return {
-          bottom: 0,
-          left: 0,
-        };
-      case "right":
-        return {
-          right: 0,
-          top: 0,
-        };
-      case "top":
-        return {
-          bottom: 0,
-          left: 0,
-        };
-      case "bottom":
-        return {
-          bottom: 0,
-          left: 0,
-        };
-      default:
-        break;
-    }
+  const fixedPosition = {
+    bottomRight: {
+      top: "30px",
+    },
+    bottom: {
+      top: "30px",
+    },
+    top: {
+      bottom: "30px",
+    },
+    topRight: {
+      bottom: "30px",
+    },
+  };
+
+  const modelClassName = {
+    bottom: "modelCenter",
+    bottomLeft: "modelLeft",
+    top: "modelTopCenter",
+    topRight: "modelTopRight",
   };
 
   return (
-    <div id="dropDown" className={styles.dropDown}>
-      {trigger === "click" ? (
-        <button
-          onClick={() => onChangeVisible()}
-          disabled={disable}
-          className={styles.dropDownButton}
-        >
-          {children}
-        </button>
-      ) : (
-        <button
+    <>
+      {trigger === "hover" ? (
+        <div
+          id="dropDown"
+          className={styles.dropDown}
           onMouseEnter={() => setShow(true)}
           onMouseLeave={() => setShow(false)}
-          disabled={disable}
-          className={styles.dropDownButton}
         >
-          {children}
-        </button>
-      )}
-
-      {(show === true || visible === true) &&
-        createPortal(
-          <div
-            className={styles.model}
-            style={{ width: `${width}px` }}
-            onMouseEnter={() => setShow(true)}
-            onMouseLeave={() => setShow(false)}
+          <button disabled={disable} className={styles.dropDownButton}>
+            {children}
+          </button>
+          {(show === true || visible === true) &&
+            createPortal(
+              <div
+                className={styles.modelCenter}
+                style={{ width: `${width}px`, ...fixedPosition[position] }}
+              >
+                <ul className={styles.modelList}>
+                  {modelContent?.map((item) => {
+                    return (
+                      <li key={item?.id} className={styles.modalListItem}>
+                        {item?.label}
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>,
+              dropDown
+            )}
+        </div>
+      ) : (
+        <div id="dropDown" className={styles.dropDown}>
+          <button
+            onClick={() => onChangeVisible()}
+            disabled={disable}
+            className={styles.dropDownButton}
           >
-            <ul className={styles.modelList}>
-              {modelContent?.map((item) => {
-                return (
-                  <li key={item?.id} className={styles.modalListItem}>
-                    {item?.label}
-                  </li>
-                );
-              })}
-            </ul>
-            {/* {modelContent} */}
-          </div>,
-          dropDown
-        )}
-    </div>
+            {children}
+          </button>
+          {(show === true || visible === true) &&
+            createPortal(
+              <div
+                className={styles.modelCenter}
+                style={{ width: `${width}px`, ...fixedPosition[position] }}
+              >
+                <ul className={styles.modelList}>
+                  {modelContent?.map((item) => {
+                    return (
+                      <li key={item?.id} className={styles.modalListItem}>
+                        {item?.label}
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>,
+              dropDown
+            )}
+        </div>
+      )}
+    </>
   );
 };
 
diff --git a/src/components/dropDown/model.tsx b/src/components/dropDown/model.tsx
new file mode 100644
index 0000000..f3891f7
--- /dev/null
+++ b/src/components/dropDown/model.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import { createPortal } from "react-dom";
+import styles from "./dropDown.less";
+
+interface IModel {
+  modelContent: object[];
+  dropDown?: HTMLElement;
+  width?: number;
+  fixedPosition: any;
+}
+
+const Model: React.FC<IModel> = ({
+  modelContent,
+  dropDown,
+  width,
+  fixedPosition,
+}) => {
+  console.log('====',modelContent, dropDown, width, fixedPosition);
+
+  return (
+    <>
+      {createPortal(
+        <div
+          className={styles.modelCenter}
+          style={{ width: `${width}px`, ...fixedPosition[position] }}
+        >
+          <ul className={styles.modelList}>
+            {modelContent?.map((item) => {
+              return (
+                <li key={item?.id} className={styles.modalListItem}>
+                  {item?.label}
+                </li>
+              );
+            })}
+          </ul>
+        </div>,
+        dropDown
+      )}
+    </>
+  );
+};
+
+export default Model;

From 0816b7240eaf74f357912d7e261a232f2aaeb6c0 Mon Sep 17 00:00:00 2001
From: Davdeyang <1320501826@qq.com>
Date: Fri, 24 Mar 2023 10:34:30 +0800
Subject: [PATCH 05/10] =?UTF-8?q?feat:drop=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/_test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/_test.tsx b/src/_test.tsx
index 1ee8ec3..ecaa4d6 100644
--- a/src/_test.tsx
+++ b/src/_test.tsx
@@ -108,7 +108,7 @@ function App() {
       </Upload>
 
       <DropDown
-        trigger={"hover"}
+        trigger={"click"}
         visible={modalVisible}
         onChangeVisible={() => {
           setModalVisible(!modalVisible);

From 6646893a394263d74e6b52b4a6500859b3e1c34c Mon Sep 17 00:00:00 2001
From: Davdeyang <1320501826@qq.com>
Date: Wed, 29 Mar 2023 15:00:31 +0800
Subject: [PATCH 06/10] =?UTF-8?q?feat:=E6=B7=BB=E5=8A=A0button=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=20=E4=BB=A5=E5=8F=8A=E4=BF=AE=E6=94=B9dropdown?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                            |  11 +
 package.json                                 |   3 +-
 rollup.config.mjs                            |   4 +-
 src/_test.css                                |  11 +
 src/_test.less                               |   5 +
 src/_test.tsx                                | 144 +++++++----
 src/common/style/index.css                   |   8 +
 src/common/style/index.less                  |   9 +
 src/components/button/button.tsx             |  79 ++++++
 src/components/button/index.css              |  61 +++++
 src/components/button/index.less             |  72 ++++++
 src/components/dropDown/dropDown.css         | 156 ++++++++++++
 src/components/dropDown/dropDown.less        | 170 +++++++++++++
 src/components/dropDown/dropDown.module.css  | 205 ----------------
 src/components/dropDown/dropDown.module.less | 239 -------------------
 src/components/dropDown/index.tsx            | 151 ++++++------
 src/components/dropDown/model.tsx            |  25 +-
 17 files changed, 778 insertions(+), 575 deletions(-)
 create mode 100644 src/_test.css
 create mode 100644 src/_test.less
 create mode 100644 src/common/style/index.css
 create mode 100644 src/common/style/index.less
 create mode 100644 src/components/button/button.tsx
 create mode 100644 src/components/button/index.css
 create mode 100644 src/components/button/index.less
 create mode 100644 src/components/dropDown/dropDown.css
 create mode 100644 src/components/dropDown/dropDown.less
 delete mode 100644 src/components/dropDown/dropDown.module.css
 delete mode 100644 src/components/dropDown/dropDown.module.less

diff --git a/package-lock.json b/package-lock.json
index fe19286..5c3c76b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "@types/uuid": "^9.0.1",
+        "classnames": "^2.3.2",
         "framer-motion": "^8.5.5",
         "uuid": "^9.0.0"
       },
@@ -4883,6 +4884,11 @@
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==",
       "dev": true
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/clean-css": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
@@ -17996,6 +18002,11 @@
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==",
       "dev": true
     },
+    "classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "clean-css": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
diff --git a/package.json b/package.json
index 6f4b3ba..199c9e5 100644
--- a/package.json
+++ b/package.json
@@ -76,7 +76,8 @@
   },
   "dependencies": {
     "@types/uuid": "^9.0.1",
+    "classnames": "^2.3.2",
     "framer-motion": "^8.5.5",
     "uuid": "^9.0.0"
   }
-}
\ No newline at end of file
+}
diff --git a/rollup.config.mjs b/rollup.config.mjs
index b8ca7dc..66ef197 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -68,6 +68,6 @@ export default [
 		input: "dist/esm/types/index.d.ts",
 		output: [{ file: "dist/index.d.ts", format: "esm" }],
 		plugins: [dts.default()],
-		external: [/\.less$/], // telling rollup anything that is .css aren't part of type exports 
+		external: [/\.less$/], // telling rollup anything that is .css aren't part of type exports
 	},
-]
\ No newline at end of file
+]
diff --git a/src/_test.css b/src/_test.css
new file mode 100644
index 0000000..339c262
--- /dev/null
+++ b/src/_test.css
@@ -0,0 +1,11 @@
+:root {
+  --background: #ebedff;
+  --blueDark: #5c6dff;
+  --fadedGary: #818181;
+  --white: #ffffff;
+  --black: #000000;
+  --white-shadow: 0px 0px 13px 5px rgba(173, 182, 255, 0.25);
+}
+a {
+  text-decoration: none;
+}
diff --git a/src/_test.less b/src/_test.less
new file mode 100644
index 0000000..718ed92
--- /dev/null
+++ b/src/_test.less
@@ -0,0 +1,5 @@
+@import  '../src/common/style/index.less';
+
+a{
+  text-decoration: none;
+}
diff --git a/src/_test.tsx b/src/_test.tsx
index ec06faf..d28eb02 100644
--- a/src/_test.tsx
+++ b/src/_test.tsx
@@ -5,6 +5,8 @@ import Upload from "./components/upload/upload";
 import Tab from "./components/tab/tab";
 import * as GOJI from "goji_ui";
 import DropDown from "./components/dropDown";
+import Button from "./components/button/button";
+import "./_test.less";
 
 function App() {
   const [visible, setVisible] = useState(false);
@@ -72,18 +74,18 @@ function App() {
         ]}
       />
 
-		<Modal
-			// dontDestroyOnClose={true}
-			onClose={() => {
-				setVisible(false)
-			}}
-			visible={visible}
-		>
-			<div>
-				how to set default value for typescript interface field
-				<input type="text" />
-			</div>
-		</Modal>
+      <Modal
+        // dontDestroyOnClose={true}
+        onClose={() => {
+          setVisible(false);
+        }}
+        visible={visible}
+      >
+        <div>
+          how to set default value for typescript interface field
+          <input type="text" />
+        </div>
+      </Modal>
 
       <Upload
         uploadUrl="/api/video-service/upload"
@@ -107,51 +109,113 @@ function App() {
         请选择文件
       </Upload>
 
-      <DropDown
+      {/* <DropDown
         trigger={"click"}
         visible={modalVisible}
+        setVisible={setModalVisible}
         onChangeVisible={() => {
           setModalVisible(!modalVisible);
         }}
-				position="topRight"
+        position="topRight"
         width={150}
-        disable={false}
-        style={{
-          width: "100px",
-          height: "100px",
-          backgroundColor: "green",
+        modelContent={[
+          {
+            id: "1",
+            label: "first Item",
+          },
+          {
+            id: "2",
+            label: "second Item",
+          },
+        ]}
+        // className={"modless"}
+      >
+        SHOW MODEL
+      </DropDown> */}
+
+      <DropDown
+        trigger={"hover"}
+        visible={modalVisible}
+        setVisible={setModalVisible}
+        onChangeVisible={() => {
+          setModalVisible(!modalVisible);
         }}
+        position="bottom"
+        width={150}
         modelContent={[
           {
             id: "1",
-            label: (
-              <a
-                target="_blank"
-                rel="noopener noreferrer"
-                href="#"
-              >
-                1st menu item
-              </a>
-            ),
+            label: "first Item",
           },
           {
             id: "2",
-            label: (
-              <a
-                target="_blank"
-                rel="noopener noreferrer"
-                href="#"
-              >
-                2nd menu item
-              </a>
-            ),
+            label: "second Item",
           },
-        ]
-			}
+        ]}
+        icons={[
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="icon icon-tabler icon-tabler-chevron-down"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+            <path d="M6 9l6 6l6 -6"></path>
+          </svg>,
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="icon icon-tabler icon-tabler-chevron-up"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+            <path d="M6 15l6 -6l6 6"></path>
+          </svg>,
+        ]}
         // className={"modless"}
       >
-        SHOW MODEL <img src="../static/下箭头.jpg"/>
+        SHOW MODEL
       </DropDown>
+
+      <Button
+        type="primary"
+        onBtnClick={() => {
+          console.log("primary");
+        }}
+      >
+        primary
+      </Button>
+      <Button />
+      <Button
+        type="dashed"
+        onBtnClick={() => {
+          alert("Dashed Button");
+        }}
+      >
+        dashed
+      </Button>
+      <Button type="link">Link</Button>
+      <Button type="text">Text</Button>
+      <Button shape="round">Circle</Button>
+      <Button shape="circle" type="primary">
+        A
+      </Button>
+      <Button icon="" iconPos="left">
+        会计师
+      </Button>
+      <Button disable={true}> disable</Button>
     </div>
   );
 }
diff --git a/src/common/style/index.css b/src/common/style/index.css
new file mode 100644
index 0000000..98383e1
--- /dev/null
+++ b/src/common/style/index.css
@@ -0,0 +1,8 @@
+:root {
+  --background: #ebedff;
+  --blueDark: #5c6dff;
+  --fadedGary: #818181;
+  --white: #ffffff;
+  --black: #000000;
+  --white-shadow: 0px 0px 13px 5px rgba(173, 182, 255, 0.25);
+}
diff --git a/src/common/style/index.less b/src/common/style/index.less
new file mode 100644
index 0000000..97b05a3
--- /dev/null
+++ b/src/common/style/index.less
@@ -0,0 +1,9 @@
+// :root 伪类选择器 匹配文档树的根节点
+:root {
+  --background: #ebedff;
+  --blueDark: #5c6dff;
+  --fadedGary: #818181;
+  --white: #ffffff;
+  --black: #000000;
+  --white-shadow: 0px 0px 13px 5px rgba(173, 182, 255, 0.25);
+}
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
new file mode 100644
index 0000000..9b2b09d
--- /dev/null
+++ b/src/components/button/button.tsx
@@ -0,0 +1,79 @@
+import React from "react";
+import "./index.less";
+import classnames from "classnames";
+
+type type = "primary" | "link" | "dashed" | "text" | "disable";
+type shape = "round" | "circle";
+type iconPos = "left" | "right";
+
+interface IButton {
+  type?: type | undefined;
+  style?: React.CSSProperties | undefined;
+  className?: string | undefined;
+  children?: React.ReactNode | undefined;
+  disable?: boolean | undefined;
+  shape?: shape | undefined;
+  icon?: React.ReactNode | undefined;
+  iconPos?: iconPos | undefined;
+  herf?: string | undefined;
+  onBtnClick?: () => void;
+}
+
+const Button: React.FC<IButton> = ({
+  type,
+  style,
+  className,
+  children,
+  disable,
+  shape,
+  icon,
+  iconPos,
+  onBtnClick,
+}) => {
+  const getBtnClass = () => {
+    switch (type) {
+      case "primary":
+        return "primaryButton gojiButton";
+      case "dashed":
+        return "dashedButton gojiButton";
+      case "link":
+        return "linkButton gojiButton";
+      case "text":
+        return "textButton gojiButton";
+      case "disable":
+        return "disable gojiButton";
+      default:
+        return "gojiButton";
+    }
+  };
+
+  const shapes = () => {
+    switch (shape) {
+      case "circle":
+        return "circle";
+      case "round":
+        return "round";
+      default:
+        break;
+    }
+  };
+
+
+  return (
+    <button
+      className={classnames(`${getBtnClass()} ${shapes()} ${className}`, {
+        disableButton: disable,
+      })}
+      onClick={
+        onBtnClick ? onBtnClick : () => console.log("Nothing is happing")
+      }
+      disabled={disable}
+      style={style}
+    >
+      {icon && iconPos === "left"} {children ? children : "BUTTON"}
+      {icon && iconPos === "right"}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/src/components/button/index.css b/src/components/button/index.css
new file mode 100644
index 0000000..36a67cf
--- /dev/null
+++ b/src/components/button/index.css
@@ -0,0 +1,61 @@
+.gojiButton {
+  display: inline-block;
+  font-size: 14px;
+  padding: 4px 15px;
+  border-radius: 6px;
+  cursor: pointer;
+  background-color: #fff;
+  color: #000;
+  text-align: center;
+  border: 1px solid;
+  margin: 6px;
+  line-height: 30px;
+}
+.gojiButton:hover {
+  color: red;
+}
+.primaryButton {
+  font-size: 14px;
+  padding: 4px 15px;
+  border-radius: 6px;
+  cursor: pointer;
+  background-color: #fff;
+  list-style: none;
+  color: rgba(0, 0, 0, 0.88);
+  text-align: center;
+  border: 1px solid;
+}
+.primaryButton:hover {
+  background-color: green !important;
+  color: #fff !important;
+}
+.linkButton {
+  border: none;
+  color: green;
+}
+.linkButton:hover {
+  color: #1f77db !important;
+}
+.textButton {
+  border: none;
+}
+.textButton:hover {
+  background-color: #b3b4b4;
+  color: #000;
+}
+.round {
+  border-radius: 40px;
+}
+.circle {
+  border-radius: 50%;
+}
+.dashedButton {
+  border: 1px dashed;
+}
+.disableButton {
+  cursor: not-allowed !important;
+  border-color: #d9d9d9;
+  color: rgba(0, 0, 0, 0.25);
+  background-color: rgba(0, 0, 0, 0.04);
+  box-shadow: none;
+}
diff --git a/src/components/button/index.less b/src/components/button/index.less
new file mode 100644
index 0000000..3cde6cc
--- /dev/null
+++ b/src/components/button/index.less
@@ -0,0 +1,72 @@
+.gojiButton {
+  display: inline-block;
+  font-size: 14px;
+  padding: 4px 15px;
+  border-radius: 6px;
+  cursor: pointer;
+  background-color: #fff;
+  color: #000;
+  text-align: center;
+  border: 1px solid;
+  margin: 6px;
+  line-height: 30px;
+}
+
+.gojiButton:hover {
+  color: red;
+}
+
+.primaryButton {
+  font-size: 14px;
+  padding: 4px 15px;
+  border-radius: 6px;
+  cursor: pointer;
+  background-color: #fff;
+  list-style: none;
+  color: rgba(0, 0, 0, 0.88);
+  text-align: center;
+  border: 1px solid;
+}
+
+.primaryButton:hover {
+  background-color: green !important;
+  color: #fff !important;
+}
+
+.linkButton {
+  border: none;
+  color: green;
+}
+
+.linkButton:hover {
+  color: rgb(31, 119, 219) !important;
+}
+
+.textButton {
+  border: none;
+}
+
+.textButton:hover {
+  background-color: rgb(179, 180, 180);
+  color: #000;
+}
+
+.round {
+  border-radius: 40px;
+}
+
+.circle {
+  border-radius: 50%;
+}
+
+.dashedButton {
+  border: 1px dashed;
+}
+
+.disableButton {
+  cursor: not-allowed !important;
+  border-color: #d9d9d9;
+  color: rgba(0, 0, 0, 0.25);
+  background-color: rgba(0, 0, 0, 0.04);
+  box-shadow: none;
+}
diff --git a/src/components/dropDown/dropDown.css b/src/components/dropDown/dropDown.css
new file mode 100644
index 0000000..ae20d94
--- /dev/null
+++ b/src/components/dropDown/dropDown.css
@@ -0,0 +1,156 @@
+.dropDown {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: var(--white-shadow);
+  padding: 12px 24px;
+  cursor: pointer;
+  position: relative;
+  border-radius: 5px;
+}
+.dropDown .dropDownOption {
+  background: var(--white);
+  width: 100%;
+  box-shadow: var(--white-shadow);
+  padding: 2px;
+}
+.dropDown .dropDownOption .dropDownOptionItem {
+  padding: 12px;
+  color: var(--black);
+}
+.dropDown .dropDownOption .dropDownOptionItem:hover {
+  background: var(--background);
+  color: var(--fadedGary);
+}
+.dropDown .PositionTop {
+  position: absolute;
+  top: -12px;
+  left: 0;
+  transform: translateY(-100%);
+  background: var(--white);
+  width: 100%;
+  box-shadow: var(--white-shadow);
+}
+.dropDown .PositionTop::after {
+  width: 0;
+  height: 0;
+  content: "";
+  border-width: 8px;
+  border-color: #ffffff transparent transparent transparent;
+  border-style: dashed dashed solid dashed;
+  position: absolute;
+  top: 91px;
+  right: 45%;
+  z-index: 99;
+}
+.dropDown .PositionTop::before {
+  width: 0;
+  height: 0;
+  content: "";
+  border-width: 8px;
+  border-color: #ffffff transparent transparent transparent;
+  border-style: dashed dashed solid dashed;
+  position: absolute;
+  top: 91px;
+  right: 45%;
+  z-index: 99;
+}
+.dropDown .PositionTopRight {
+  position: absolute;
+  top: -12px;
+  left: 0;
+  transform: translateY(-100%);
+  background: var(--white);
+  width: 100%;
+  box-shadow: var(--white-shadow);
+}
+.dropDown .PositionTopRight::after {
+  width: 0;
+  height: 0;
+  content: "";
+  border-width: 8px;
+  border-color: #ffffff transparent transparent transparent;
+  border-style: dashed dashed solid dashed;
+  position: absolute;
+  top: 91px;
+  right: 9px;
+  z-index: 99;
+}
+.dropDown .PositionTopRight::before {
+  width: 0;
+  height: 0;
+  content: "";
+  border-width: 8px;
+  border-color: #ffffff transparent transparent transparent;
+  border-style: dashed dashed solid dashed;
+  position: absolute;
+  top: 91px;
+  right: 9px;
+  z-index: 99;
+}
+.dropDown .PositionBottom {
+  position: absolute;
+  left: 0;
+  bottom: -10px;
+  transform: translateY(100%);
+  background: var(--white);
+  width: 100%;
+  box-shadow: var(--white-shadow);
+}
+.dropDown .PositionBottom::after {
+  width: 0;
+  height: 0;
+  content: "";
+  border-width: 8px;
+  border-color: transparent transparent #ffffff transparent;
+  border-style: dashed dashed solid dashed;
+  position: absolute;
+  top: -14px;
+  right: 45%;
+  z-index: 99;
+}
+.dropDown .PositionBottom::before {
+  width: 0;
+  height: 0;
+  content: "";
+  border-width: 8px;
+  border-color: transparent transparent #ffffff transparent;
+  border-style: dashed dashed solid dashed;
+  position: absolute;
+  top: -14px;
+  right: 45%;
+  z-index: 99;
+}
+.dropDown .PositionBottomRight {
+  position: absolute;
+  left: 0;
+  bottom: -10px;
+  transform: translateY(100%);
+  background: var(--white);
+  width: 100%;
+  box-shadow: var(--white-shadow);
+}
+.dropDown .PositionBottomRight::after {
+  width: 0;
+  height: 0;
+  content: "";
+  border-width: 6px;
+  border-color: transparent transparent #a07676 transparent;
+  border-style: dashed dashed solid dashed;
+  position: absolute;
+  top: -11px;
+  right: 9px;
+  z-index: 99;
+}
+.dropDown .PositionBottomRight::before {
+  width: 0;
+  height: 0;
+  content: "";
+  border-width: 6px;
+  border-color: transparent transparent #884b4b transparent;
+  border-style: dashed dashed solid dashed;
+  position: absolute;
+  top: -11px;
+  right: 9px;
+  z-index: 99;
+}
diff --git a/src/components/dropDown/dropDown.less b/src/components/dropDown/dropDown.less
new file mode 100644
index 0000000..d2fc826
--- /dev/null
+++ b/src/components/dropDown/dropDown.less
@@ -0,0 +1,170 @@
+.dropDown {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: var(--white-shadow);
+  padding: 12px 24px;
+  cursor: pointer;
+  position: relative;
+  border-radius: 5px;
+
+  .dropDownOption {
+    background: var(--white);
+    width: 100%;
+    box-shadow: var(--white-shadow);
+    padding: 2px;
+    .dropDownOptionItem {
+      padding: 12px;
+      color: var(--black);
+    }
+
+    .dropDownOptionItem:hover {
+      background: var(--background);
+      color: var(--fadedGary);
+    }
+  }
+
+  .PositionTop {
+    position: absolute;
+    top: -12px;
+    left: 0;
+    transform: translateY(-100%);
+    background: var(--white);
+    width: 100%;
+    box-shadow: var(--white-shadow);
+  }
+
+  .PositionTop::after {
+    width: 0;
+    height: 0;
+    content: "";
+    border-width: 8px;
+    border-color: #ffffff transparent transparent transparent;
+    border-style: dashed dashed solid dashed;
+    position: absolute;
+    top: 91px;
+    right: 45%;
+    z-index: 99;
+  }
+
+  .PositionTop::before {
+    width: 0;
+    height: 0;
+    content: "";
+    border-width: 8px;
+    border-color: #ffffff transparent transparent transparent;
+    border-style: dashed dashed solid dashed;
+    position: absolute;
+    top: 91px;
+    right: 45%;
+    z-index: 99;
+  }
+
+  .PositionTopRight {
+    position: absolute;
+    top: -12px;
+    left: 0;
+    transform: translateY(-100%);
+    background: var(--white);
+    width: 100%;
+    box-shadow: var(--white-shadow);
+  }
+
+  .PositionTopRight::after {
+    width: 0;
+    height: 0;
+    content: "";
+    border-width: 8px;
+    border-color: #ffffff transparent transparent transparent;
+    border-style: dashed dashed solid dashed;
+    position: absolute;
+    top: 91px;
+    right: 9px;
+    z-index: 99;
+  }
+
+  .PositionTopRight::before {
+    width: 0;
+    height: 0;
+    content: "";
+    border-width: 8px;
+    border-color: #ffffff transparent transparent transparent;
+    border-style: dashed dashed solid dashed;
+    position: absolute;
+    top: 91px;
+    right: 9px;
+    z-index: 99;
+  }
+
+  .PositionBottom {
+    position: absolute;
+    left: 0;
+    bottom: -10px;
+    transform: translateY(100%);
+    background: var(--white);
+    width: 100%;
+    box-shadow: var(--white-shadow);
+  }
+
+  .PositionBottom::after {
+    width: 0;
+    height: 0;
+    content: "";
+    border-width: 8px;
+    border-color: transparent transparent #ffffff transparent;
+    border-style: dashed dashed solid dashed;
+    position: absolute;
+    top: -14px;
+    right: 45%;
+    z-index: 99;
+  }
+
+  .PositionBottom::before {
+    width: 0;
+    height: 0;
+    content: "";
+    border-width: 8px;
+    border-color: transparent transparent #ffffff transparent;
+    border-style: dashed dashed solid dashed;
+    position: absolute;
+    top: -14px;
+    right: 45%;
+    z-index: 99;
+  }
+
+  .PositionBottomRight {
+    position: absolute;
+    left: 0;
+    bottom: -10px;
+    transform: translateY(100%);
+    background: var(--white);
+    width: 100%;
+    box-shadow: var(--white-shadow);
+  }
+
+  .PositionBottomRight::after {
+    width: 0;
+    height: 0;
+    content: "";
+    border-width: 6px;
+    border-color: transparent transparent #a07676 transparent;
+    border-style: dashed dashed solid dashed;
+    position: absolute;
+    top: -11px;
+    right: 9px;
+    z-index: 99;
+  }
+
+  .PositionBottomRight::before {
+    width: 0;
+    height: 0;
+    content: "";
+    border-width: 6px;
+    border-color: transparent transparent #884b4b transparent;
+    border-style: dashed dashed solid dashed;
+    position: absolute;
+    top: -11px;
+    right: 9px;
+    z-index: 99;
+  }
+}
diff --git a/src/components/dropDown/dropDown.module.css b/src/components/dropDown/dropDown.module.css
deleted file mode 100644
index 79bf71a..0000000
--- a/src/components/dropDown/dropDown.module.css
+++ /dev/null
@@ -1,205 +0,0 @@
-.dropDown {
-  margin-top: 100px;
-  position: relative;
-}
-.dropDown .dropDownButton {
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.dropDown .modelLeft {
-  position: absolute;
-  cursor: pointer;
-  padding: 5px;
-  display: inline-block;
-  height: auto;
-  border-radius: 5px;
-  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-}
-.dropDown .modelLeft .modelList {
-  margin: 0;
-  padding: 0;
-}
-.dropDown .modelLeft .modelList .modalListItem {
-  list-style: none;
-  padding: 5px;
-}
-.dropDown .modelLeft .modelList .modalListItem a {
-  text-decoration: none;
-  color: #414141;
-}
-.dropDown .modelLeft .modelList .modalListItem:hover {
-  transition: all 0.2s;
-  background-color: aliceblue;
-}
-.dropDown .modelLeft::after {
-  width: 0;
-  height: 0;
-  content: "";
-  border-width: 6px;
-  border-color: transparent transparent #a07676 transparent;
-  border-style: dashed dashed solid dashed;
-  position: absolute;
-  top: -11px;
-  right: 9px;
-  z-index: 99;
-}
-.dropDown .modelLeft::before {
-  width: 0;
-  height: 0;
-  content: "";
-  border-width: 6px;
-  border-color: transparent transparent #884b4b transparent;
-  border-style: dashed dashed solid dashed;
-  position: absolute;
-  top: -11px;
-  right: 9px;
-  z-index: 99;
-}
-.dropDown .modelCenter {
-  cursor: pointer;
-  padding: 5px;
-  display: inline-block;
-  height: auto;
-  border-radius: 5px;
-  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-}
-.dropDown .modelCenter .modelList {
-  margin: 0;
-  padding: 0;
-}
-.dropDown .modelCenter .modelList .modalListItem {
-  list-style: none;
-  padding: 5px;
-}
-.dropDown .modelCenter .modelList .modalListItem a {
-  text-decoration: none;
-  color: #414141;
-}
-.dropDown .modelCenter .modelList .modalListItem:hover {
-  transition: all 0.2s;
-  background-color: aliceblue;
-}
-.dropDown .modelCenter::before {
-  width: 0;
-  height: 0;
-  content: "";
-  border-width: 6px;
-  border-color: transparent transparent #ffffff transparent;
-  border-style: dashed dashed solid dashed;
-  position: absolute;
-  top: -11px;
-  right: 45%;
-  z-index: 99;
-}
-.dropDown .modelCenter::after {
-  width: 0;
-  height: 0;
-  content: "";
-  border-width: 6px;
-  border-color: transparent transparent #ffffff transparent;
-  border-style: dashed dashed solid dashed;
-  position: absolute;
-  top: -11px;
-  right: 45%;
-  z-index: 99;
-}
-.dropDown .modelTopRight {
-  position: absolute;
-  cursor: pointer;
-  padding: 5px;
-  display: inline-block;
-  height: auto;
-  border-radius: 5px;
-  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-}
-.dropDown .modelTopRight .modelList {
-  margin: 0;
-  padding: 0;
-}
-.dropDown .modelTopRight .modelList .modalListItem {
-  list-style: none;
-  padding: 5px;
-}
-.dropDown .modelTopRight .modelList .modalListItem a {
-  text-decoration: none;
-  color: #414141;
-}
-.dropDown .modelTopRight .modelList .modalListItem:hover {
-  transition: all 0.2s;
-  background-color: aliceblue;
-}
-.dropDown .modelTopRight::before {
-  width: 0;
-  height: 0;
-  content: "";
-  border-width: 6px;
-  border-color: #ffffff transparent transparent transparent;
-  border-style: dashed dashed solid dashed;
-  position: absolute;
-  top: -11px;
-  right: 9px;
-  z-index: 99;
-}
-.dropDown .modelTopRight::after {
-  width: 0;
-  height: 0;
-  content: "";
-  border-width: 6px;
-  border-color: #ffffff transparent transparent transparent;
-  border-style: dashed dashed solid dashed;
-  position: absolute;
-  top: -11px;
-  right: 9px;
-  z-index: 99;
-}
-.dropDown .modelTopCenter {
-  position: absolute;
-  cursor: pointer;
-  padding: 5px;
-  display: inline-block;
-  height: auto;
-  border-radius: 5px;
-  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-}
-.dropDown .modelTopCenter .modelList {
-  margin: 0;
-  padding: 0;
-}
-.dropDown .modelTopCenter .modelList .modalListItem {
-  list-style: none;
-  padding: 5px;
-}
-.dropDown .modelTopCenter .modelList .modalListItem a {
-  text-decoration: none;
-  color: #414141;
-}
-.dropDown .modelTopCenter .modelList .modalListItem:hover {
-  transition: all 0.2s;
-  background-color: aliceblue;
-}
-.dropDown .modelTopCenter::before {
-  width: 0;
-  height: 0;
-  content: "";
-  border-width: 6px;
-  border-color: #ffffff transparent transparent transparent;
-  border-style: dashed dashed solid dashed;
-  position: absolute;
-  top: -11px;
-  right: 45%;
-  z-index: 99;
-}
-.dropDown .modelTopCenter::after {
-  width: 0;
-  height: 0;
-  content: "";
-  border-width: 6px;
-  border-color: #ffffff transparent transparent transparent;
-  border-style: dashed dashed solid dashed;
-  position: absolute;
-  top: -11px;
-  right: 45%;
-  z-index: 99;
-}
diff --git a/src/components/dropDown/dropDown.module.less b/src/components/dropDown/dropDown.module.less
deleted file mode 100644
index c0c9ce7..0000000
--- a/src/components/dropDown/dropDown.module.less
+++ /dev/null
@@ -1,239 +0,0 @@
-.dropDown {
-  margin-top: 100px;
-  position: relative;
-  // overflow: hidden;
-  .dropDownButton {
-    cursor: pointer;
-    // position: absolute;
-    // top: 0;
-    // left: 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .modelLeft{
-    position: absolute;
-    cursor: pointer;
-    height: auto;
-    padding: 5px;
-    display: inline-block;
-    height: auto;
-    border-radius: 5px;
-    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
-      0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-
-    .modelList{
-      margin: 0;
-      padding: 0;
-     .modalListItem  {
-        list-style: none;
-        padding: 5px;
-        a{
-          text-decoration: none;
-          color: rgb(65, 65, 65);
-        }
-      }
-
-      .modalListItem:hover{
-        transition: all .2s;
-        background-color: aliceblue;
-      }
-    }
-  }
-
-  .modelLeft::after{
-    width: 0;
-    height: 0;
-    content: "";
-    border-width: 6px;
-    border-color: transparent transparent #a07676 transparent;
-    border-style: dashed dashed solid dashed;
-    position: absolute;
-    top: -11px;
-    right: 9px;
-    z-index: 99;
-  }
-
-  .modelLeft::before{
-    width: 0;
-    height: 0;
-    content: "";
-    border-width: 6px;
-    border-color: transparent transparent #884b4b transparent;
-    border-style: dashed dashed solid dashed;
-    position: absolute;
-    top: -11px;
-    right: 9px;
-    z-index: 99;
-  }
-
-  .modelCenter{
-    // position: absolute;
-    cursor: pointer;
-    height: auto;
-    padding: 5px;
-    display: inline-block;
-    height: auto;
-    border-radius: 5px;
-    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
-      0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-
-    .modelList{
-      margin: 0;
-      padding: 0;
-     .modalListItem  {
-        list-style: none;
-        padding: 5px;
-        a{
-          text-decoration: none;
-          color: rgb(65, 65, 65);
-        }
-      }
-
-      .modalListItem:hover{
-        transition: all .2s;
-        background-color: aliceblue;
-      }
-    }
-  }
-
-  .modelCenter::before{
-    width: 0;
-    height: 0;
-    content: "";
-    border-width: 6px;
-    border-color: transparent transparent #ffffff transparent;
-    border-style: dashed dashed solid dashed;
-    position: absolute;
-    top: -11px;
-    right: 45%;
-    z-index: 99;
-  }
-
-  .modelCenter::after{
-    width: 0;
-    height: 0;
-    content: "";
-    border-width: 6px;
-    border-color: transparent transparent #ffffff transparent;
-    border-style: dashed dashed solid dashed;
-    position: absolute;
-    top: -11px;
-    right: 45%;
-    z-index: 99;
-  }
-
-
-  .modelTopRight{
-    position: absolute;
-    cursor: pointer;
-    height: auto;
-    padding: 5px;
-    display: inline-block;
-    height: auto;
-    border-radius: 5px;
-    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
-      0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-
-    .modelList{
-      margin: 0;
-      padding: 0;
-     .modalListItem  {
-        list-style: none;
-        padding: 5px;
-        a{
-          text-decoration: none;
-          color: rgb(65, 65, 65);
-        }
-      }
-
-      .modalListItem:hover{
-        transition: all .2s;
-        background-color: aliceblue;
-      }
-    }
-  }
-
-  .modelTopRight::before{
-    width: 0;
-    height: 0;
-    content: "";
-    border-width: 6px;
-    border-color: #ffffff transparent transparent transparent;
-    border-style: dashed dashed solid dashed;
-    position: absolute;
-    top: -11px;
-    right: 9px;
-    z-index: 99;
-  }
-
-  .modelTopRight::after{
-    width: 0;
-    height: 0;
-    content: "";
-    border-width: 6px;
-    border-color: #ffffff transparent transparent transparent;
-    border-style: dashed dashed solid dashed;
-    position: absolute;
-    top: -11px;
-    right: 9px;
-    z-index: 99;
-  }
-
-  .modelTopCenter{
-    position: absolute;
-    cursor: pointer;
-    height: auto;
-    padding: 5px;
-    display: inline-block;
-    height: auto;
-    border-radius: 5px;
-    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
-      0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-
-    .modelList{
-      margin: 0;
-      padding: 0;
-     .modalListItem  {
-        list-style: none;
-        padding: 5px;
-        a{
-          text-decoration: none;
-          color: rgb(65, 65, 65);
-        }
-      }
-
-      .modalListItem:hover{
-        transition: all .2s;
-        background-color: aliceblue;
-      }
-    }
-  }
-
-  .modelTopCenter::before{
-    width: 0;
-    height: 0;
-    content: "";
-    border-width: 6px;
-    border-color: #ffffff transparent transparent transparent;
-    border-style: dashed dashed solid dashed;
-    position: absolute;
-    top: -11px;
-    right: 45%;
-    z-index: 99;
-  }
-
-  .modelTopCenter::after{
-    width: 0;
-    height: 0;
-    content: "";
-    border-width: 6px;
-    border-color: #ffffff transparent transparent transparent;
-    border-style: dashed dashed solid dashed;
-    position: absolute;
-    top: -11px;
-    right: 45%;
-    z-index: 99;
-  }
-}
diff --git a/src/components/dropDown/index.tsx b/src/components/dropDown/index.tsx
index 2de8bca..c1c5dfa 100644
--- a/src/components/dropDown/index.tsx
+++ b/src/components/dropDown/index.tsx
@@ -1,23 +1,22 @@
 import React, { ReactNode, useState } from "react";
 import { createPortal } from "react-dom";
-import styles from "./dropDown.module.less";
-import Model from "./model";
-
+import "./dropDown.less";
+import { v4 as uuidv4 } from "uuid";
 type trigger = "click" | "hover";
 type position = "bottomRight" | "bottom" | "top" | "topRight";
 
 interface IDropDown {
-  // trigger?: ("click" | "hover")[];
   trigger: trigger;
   style?: React.CSSProperties;
   className?: string;
   children?: ReactNode;
   visible?: boolean;
-  disable?: boolean;
-  modelContent: object[];
+  setVisible?: any;
+  modelContent?: object[] | undefined;
   width?: number;
   position?: position;
   onChangeVisible: () => void;
+  icons: ReactNode[];
 }
 
 const DropDown: React.FC<IDropDown> = ({
@@ -27,94 +26,88 @@ const DropDown: React.FC<IDropDown> = ({
   className,
   children,
   visible,
-  disable,
   modelContent,
   position,
+  icons,
+  setVisible,
   onChangeVisible,
 }) => {
-  const [show, setShow] = useState(visible);
-  const dropDown = document.getElementById("dropDown") as HTMLElement;
+  // const dropDown = document.getElementById("dropDown") as HTMLElement;
+
+  const [optionValue, setOptionValue] = useState(children);
 
-  const fixedPosition = {
-    bottomRight: {
-      top: "30px",
-    },
-    bottom: {
-      top: "30px",
-    },
-    top: {
-      bottom: "30px",
-    },
-    topRight: {
-      bottom: "30px",
-    },
+  const fixedPosition = (position: position) => {
+    switch (position) {
+      case "bottom":
+        return "PositionBottom";
+      case "bottomRight":
+        return "PositionBottomRight";
+      case "top":
+        return "PositionTop";
+      case "topRight":
+        return "PositionTopRight";
+      default:
+        break;
+    }
   };
 
-  const modelClassName = {
-    bottom: "modelCenter",
-    bottomLeft: "modelLeft",
-    top: "modelTopCenter",
-    topRight: "modelTopRight",
+  const handleSelected = (option: unknown) => {
+    setOptionValue(option?.label);
+    setVisible(false);
   };
 
   return (
     <>
-      {trigger === "hover" ? (
+      {trigger === "click" ? (
         <div
-          id="dropDown"
-          className={styles.dropDown}
-          onMouseEnter={() => setShow(true)}
-          onMouseLeave={() => setShow(false)}
+          className="dropDown"
+          onClick={() => onChangeVisible()}
+          style={{ width: `${width}px`, ...style }}
         >
-          <button disabled={disable} className={styles.dropDownButton}>
-            {children}
-          </button>
-          {(show === true || visible === true) &&
-            createPortal(
-              <div
-                className={styles.modelCenter}
-                style={{ width: `${width}px`, ...fixedPosition[position] }}
-              >
-                <ul className={styles.modelList}>
-                  {modelContent?.map((item) => {
-                    return (
-                      <li key={item?.id} className={styles.modalListItem}>
-                        {item?.label}
-                      </li>
-                    );
-                  })}
-                </ul>
-              </div>,
-              dropDown
-            )}
+          {optionValue}
+          {visible ? icons[0] : icons[1]}
+          {visible && (
+            <div className={`dropDownOption ${fixedPosition(position)}`}>
+              {modelContent?.length > 0 &&
+                modelContent?.map((option: unknown) => {
+                  return (
+                    <div
+                      key={uuidv4()}
+                      className="dropDownOptionItem"
+                      onClick={() => handleSelected(option)}
+                    >
+                      {option?.label}
+                    </div>
+                  );
+                })}
+            </div>
+          )}
         </div>
       ) : (
-        <div id="dropDown" className={styles.dropDown}>
-          <button
-            onClick={() => onChangeVisible()}
-            disabled={disable}
-            className={styles.dropDownButton}
-          >
-            {children}
-          </button>
-          {(show === true || visible === true) &&
-            createPortal(
-              <div
-                className={styles.modelCenter}
-                style={{ width: `${width}px`, ...fixedPosition[position] }}
-              >
-                <ul className={styles.modelList}>
-                  {modelContent?.map((item) => {
-                    return (
-                      <li key={item?.id} className={styles.modalListItem}>
-                        {item?.label}
-                      </li>
-                    );
-                  })}
-                </ul>
-              </div>,
-              dropDown
-            )}
+        <div
+          className="dropDown"
+          style={{ width: `${width}px`, ...style }}
+          onMouseEnter={() => setVisible(true)}
+          onMouseLeave={() => setVisible(false)}
+        >
+          {optionValue}
+          {visible ? icons[0] : icons[1]}
+          {visible && (
+            <div className={`dropDownOption ${fixedPosition(position)}`}>
+              {modelContent?.length > 0 &&
+                modelContent?.map((option: unknown) => {
+                  return (
+                    <div
+                      key={uuidv4()}
+                      className="dropDownOptionItem"
+                      onClick={() => handleSelected(option)}
+                    >
+                      {option?.label}
+                    </div>
+                  );
+                })}
+            </div>
+          )}
         </div>
       )}
     </>
diff --git a/src/components/dropDown/model.tsx b/src/components/dropDown/model.tsx
index f3891f7..855e68a 100644
--- a/src/components/dropDown/model.tsx
+++ b/src/components/dropDown/model.tsx
@@ -1,12 +1,16 @@
+import classNames from "classnames";
 import React from "react";
 import { createPortal } from "react-dom";
-import styles from "./dropDown.less";
+import styles from "./dropDown.module.less";
 
 interface IModel {
-  modelContent: object[];
-  dropDown?: HTMLElement;
-  width?: number;
-  fixedPosition: any;
+  modelContent: object[] | undefined;
+  dropDown?: HTMLElement | undefined;
+  width?: number | undefined;
+  fixedPosition?: any;
+  position?: string | undefined;
+  className?: string | undefined;
+  style?: React.CSSProperties;
 }
 
 const Model: React.FC<IModel> = ({
@@ -14,15 +18,18 @@ const Model: React.FC<IModel> = ({
   dropDown,
   width,
   fixedPosition,
+  position,
+  className,
+  style,
 }) => {
-  console.log('====',modelContent, dropDown, width, fixedPosition);
-
   return (
     <>
       {createPortal(
         <div
-          className={styles.modelCenter}
-          style={{ width: `${width}px`, ...fixedPosition[position] }}
+          className={`${styles.modelCenter} ${fixedPosition(
+            position
+          )} ${className}`}
+          style={{ width: `${width}px`, ...style }}
         >
           <ul className={styles.modelList}>
             {modelContent?.map((item) => {

From 548a2e915bdcb6ddd2b968982a57c6fa3c9b7061 Mon Sep 17 00:00:00 2001
From: Davdeyang <1320501826@qq.com>
Date: Fri, 31 Mar 2023 16:19:22 +0800
Subject: [PATCH 07/10] =?UTF-8?q?fix:=E4=BF=AE=E6=94=B9dorpDown=20?=
 =?UTF-8?q?=E4=BC=A0=E5=8F=82=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/_test.css                     |  4 +---
 src/_test.tsx                     | 27 +++++++++++++---------
 src/components/button/button.tsx  |  5 ++--
 src/components/dropDown/index.tsx | 38 +++++++++++++++++++++++--------
 4 files changed, 48 insertions(+), 26 deletions(-)

diff --git a/src/_test.css b/src/_test.css
index 339c262..7da3761 100644
--- a/src/_test.css
+++ b/src/_test.css
@@ -6,6 +6,4 @@
   --black: #000000;
   --white-shadow: 0px 0px 13px 5px rgba(173, 182, 255, 0.25);
 }
-a {
-  text-decoration: none;
-}
+
diff --git a/src/_test.tsx b/src/_test.tsx
index d28eb02..baac6e7 100644
--- a/src/_test.tsx
+++ b/src/_test.tsx
@@ -134,7 +134,7 @@ function App() {
       </DropDown> */}
 
       <DropDown
-        trigger={"hover"}
+        trigger={"click"}
         visible={modalVisible}
         setVisible={setModalVisible}
         onChangeVisible={() => {
@@ -142,16 +142,21 @@ function App() {
         }}
         position="bottom"
         width={150}
-        modelContent={[
-          {
-            id: "1",
-            label: "first Item",
-          },
-          {
-            id: "2",
-            label: "second Item",
-          },
-        ]}
+        modelContent={
+          // 1111,
+          // "splic"
+          // "string"
+          [
+            {
+              id: "1",
+              label: "first Item",
+            },
+            {
+              id: "2",
+              label: "second Item",
+            },
+          ]
+        }
         icons={[
           <svg
             xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 9b2b09d..e64a3b6 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -6,7 +6,7 @@ type type = "primary" | "link" | "dashed" | "text" | "disable";
 type shape = "round" | "circle";
 type iconPos = "left" | "right";
 
-interface IButton {
+type IButton = {
   type?: type | undefined;
   style?: React.CSSProperties | undefined;
   className?: string | undefined;
@@ -17,7 +17,7 @@ interface IButton {
   iconPos?: iconPos | undefined;
   herf?: string | undefined;
   onBtnClick?: () => void;
-}
+};
 
 const Button: React.FC<IButton> = ({
   type,
@@ -58,7 +58,6 @@ const Button: React.FC<IButton> = ({
     }
   };
 
-
   return (
     <button
       className={classnames(`${getBtnClass()} ${shapes()} ${className}`, {
diff --git a/src/components/dropDown/index.tsx b/src/components/dropDown/index.tsx
index c1c5dfa..44801dc 100644
--- a/src/components/dropDown/index.tsx
+++ b/src/components/dropDown/index.tsx
@@ -5,19 +5,19 @@ import { v4 as uuidv4 } from "uuid";
 type trigger = "click" | "hover";
 type position = "bottomRight" | "bottom" | "top" | "topRight";
 
-interface IDropDown {
+type IDropDown = {
   trigger: trigger;
   style?: React.CSSProperties;
   className?: string;
   children?: ReactNode;
   visible?: boolean;
   setVisible?: any;
-  modelContent?: object[] | undefined;
+  modelContent?: ReactNode | React.ReactNode[];
   width?: number;
   position?: position;
   onChangeVisible: () => void;
   icons: ReactNode[];
-}
+};
 
 const DropDown: React.FC<IDropDown> = ({
   trigger,
@@ -51,8 +51,12 @@ const DropDown: React.FC<IDropDown> = ({
     }
   };
 
-  const handleSelected = (option: unknown) => {
-    setOptionValue(option?.label);
+  const handleSelected = (option: ReactNode) => {
+    if (typeof option === "object") {
+      setOptionValue(option?.label);
+    } else {
+      setOptionValue(option);
+    }
     setVisible(false);
   };
 
@@ -68,7 +72,7 @@ const DropDown: React.FC<IDropDown> = ({
           {visible ? icons[0] : icons[1]}
           {visible && (
             <div className={`dropDownOption ${fixedPosition(position)}`}>
-              {modelContent?.length > 0 &&
+              {Array.isArray(modelContent) ? (
                 modelContent?.map((option: unknown) => {
                   return (
                     <div
@@ -79,7 +83,15 @@ const DropDown: React.FC<IDropDown> = ({
                       {option?.label}
                     </div>
                   );
-                })}
+                })
+              ) : (
+                <div
+                  className="dropDownOptionItem"
+                  onClick={() => handleSelected(modelContent)}
+                >
+                  {modelContent}
+                </div>
+              )}
             </div>
           )}
         </div>
@@ -94,7 +106,7 @@ const DropDown: React.FC<IDropDown> = ({
           {visible ? icons[0] : icons[1]}
           {visible && (
             <div className={`dropDownOption ${fixedPosition(position)}`}>
-              {modelContent?.length > 0 &&
+              {Array.isArray(modelContent) ? (
                 modelContent?.map((option: unknown) => {
                   return (
                     <div
@@ -105,7 +117,15 @@ const DropDown: React.FC<IDropDown> = ({
                       {option?.label}
                     </div>
                   );
-                })}
+                })
+              ) : (
+                <div
+                  className="dropDownOptionItem"
+                  onClick={() => handleSelected(modelContent)}
+                >
+                  {modelContent}
+                </div>
+              )}
             </div>
           )}
         </div>

From be05dda6db5a286feae65a4d1b3e71c4154b3e87 Mon Sep 17 00:00:00 2001
From: Davdeyang <1320501826@qq.com>
Date: Fri, 7 Apr 2023 02:37:16 +0800
Subject: [PATCH 08/10] =?UTF-8?q?fix:=E6=B7=BB=E5=8A=A0input=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                 | 62 +++++++++++++++++++++++++++---
 package.json                      |  1 +
 src/_test.tsx                     | 56 +++++++++++++++++----------
 src/components/dropDown/index.tsx | 50 ++----------------------
 src/components/input/index.css    | 36 +++++++++++++++++
 src/components/input/index.less   | 39 +++++++++++++++++++
 src/components/input/input.tsx    | 64 +++++++++++++++++++++++++++++++
 7 files changed, 235 insertions(+), 73 deletions(-)
 create mode 100644 src/components/input/index.css
 create mode 100644 src/components/input/index.less
 create mode 100644 src/components/input/input.tsx

diff --git a/package-lock.json b/package-lock.json
index 5c3c76b..da3ed28 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "@types/uuid": "^9.0.1",
+        "@uiw/react-color-alpha": "^1.1.3",
         "classnames": "^2.3.2",
         "framer-motion": "^8.5.5",
         "uuid": "^9.0.0"
@@ -1788,7 +1789,6 @@
       "version": "7.21.0",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
       "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.13.11"
       },
@@ -3494,6 +3494,38 @@
       "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==",
       "dev": true
     },
+    "node_modules/@uiw/color-convert": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@uiw/color-convert/-/color-convert-1.1.3.tgz",
+      "integrity": "sha512-/ZtvW4YWfM9vzrbZOmlSY3DQ0mll8D6uY87yITJnDmOh50qOpiZPC2/l3ReoUxbyS6xLcn4/ba1DzH5BEx6dCg==",
+      "peerDependencies": {
+        "@babel/runtime": ">=7.19.0"
+      }
+    },
+    "node_modules/@uiw/react-color-alpha": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@uiw/react-color-alpha/-/react-color-alpha-1.1.3.tgz",
+      "integrity": "sha512-JenSKVRuDbScq0FUeIVVkIuP3x3SMdyqlwh6ik00wyvHQiaq7W1srihGtlRKlJKrignzELNprIppulI2euwvCA==",
+      "dependencies": {
+        "@uiw/color-convert": "1.1.3",
+        "@uiw/react-drag-event-interactive": "1.1.3"
+      },
+      "peerDependencies": {
+        "@babel/runtime": ">=7.19.0",
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@uiw/react-drag-event-interactive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@uiw/react-drag-event-interactive/-/react-drag-event-interactive-1.1.3.tgz",
+      "integrity": "sha512-PHbXPQELjh3TaU8m/wFblbQyiKujb/hHfs94PKfB69YnS7uZPKCMsasbxm08AmMVYSZ92MG1Ip/vIKVoAxEEaQ==",
+      "peerDependencies": {
+        "@babel/runtime": ">=7.19.0",
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
     "node_modules/@vue/compiler-core": {
       "version": "3.2.47",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
@@ -11771,8 +11803,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
-      "dev": true
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.1",
@@ -15495,7 +15526,6 @@
       "version": "7.21.0",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
       "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.11"
       }
@@ -16863,6 +16893,27 @@
       "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==",
       "dev": true
     },
+    "@uiw/color-convert": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@uiw/color-convert/-/color-convert-1.1.3.tgz",
+      "integrity": "sha512-/ZtvW4YWfM9vzrbZOmlSY3DQ0mll8D6uY87yITJnDmOh50qOpiZPC2/l3ReoUxbyS6xLcn4/ba1DzH5BEx6dCg==",
+      "requires": {}
+    },
+    "@uiw/react-color-alpha": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@uiw/react-color-alpha/-/react-color-alpha-1.1.3.tgz",
+      "integrity": "sha512-JenSKVRuDbScq0FUeIVVkIuP3x3SMdyqlwh6ik00wyvHQiaq7W1srihGtlRKlJKrignzELNprIppulI2euwvCA==",
+      "requires": {
+        "@uiw/color-convert": "1.1.3",
+        "@uiw/react-drag-event-interactive": "1.1.3"
+      }
+    },
+    "@uiw/react-drag-event-interactive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@uiw/react-drag-event-interactive/-/react-drag-event-interactive-1.1.3.tgz",
+      "integrity": "sha512-PHbXPQELjh3TaU8m/wFblbQyiKujb/hHfs94PKfB69YnS7uZPKCMsasbxm08AmMVYSZ92MG1Ip/vIKVoAxEEaQ==",
+      "requires": {}
+    },
     "@vue/compiler-core": {
       "version": "3.2.47",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
@@ -23095,8 +23146,7 @@
     "regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
-      "dev": true
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "regenerator-transform": {
       "version": "0.15.1",
diff --git a/package.json b/package.json
index 199c9e5..6054c29 100644
--- a/package.json
+++ b/package.json
@@ -76,6 +76,7 @@
   },
   "dependencies": {
     "@types/uuid": "^9.0.1",
+    "@uiw/react-color-alpha": "^1.1.3",
     "classnames": "^2.3.2",
     "framer-motion": "^8.5.5",
     "uuid": "^9.0.0"
diff --git a/src/_test.tsx b/src/_test.tsx
index baac6e7..b50b95b 100644
--- a/src/_test.tsx
+++ b/src/_test.tsx
@@ -7,14 +7,29 @@ import * as GOJI from "goji_ui";
 import DropDown from "./components/dropDown";
 import Button from "./components/button/button";
 import "./_test.less";
+import Alpha from "@uiw/react-color-alpha";
+import Input from "./components/input/input";
 
 function App() {
   const [visible, setVisible] = useState(false);
   const [ev, setEv] = useState(false);
   const [modalVisible, setModalVisible] = useState(false);
+  const [hsva, setHsva] = useState({ h: 0, s: 0, v: 20, a: 1 });
+
+  const [value, setValue] = useState();
+
+  const handleClick = (e: unknown) => {
+    setValue(e?.target.value);
+  };
 
   return (
     <div>
+      <Input
+        defaultValue={"undefinedssss"}
+        maxLength={10}
+        value={value}
+        onChange={handleClick}
+      />
       {/* <GOJI.Tab
 			extSelector={'.tab'}
 			extension={<div>这是扩展的内容</div>}
@@ -31,7 +46,6 @@ function App() {
 				}
 			]}
 		/> */}
-
       <h1>test</h1>
       <button
         onClick={() => {
@@ -73,7 +87,6 @@ function App() {
           },
         ]}
       />
-
       <Modal
         // dontDestroyOnClose={true}
         onClose={() => {
@@ -86,7 +99,6 @@ function App() {
           <input type="text" />
         </div>
       </Modal>
-
       <Upload
         uploadUrl="/api/video-service/upload"
         beforeUpload={(f) => {
@@ -108,7 +120,6 @@ function App() {
       >
         请选择文件
       </Upload>
-
       {/* <DropDown
         trigger={"click"}
         visible={modalVisible}
@@ -132,7 +143,6 @@ function App() {
       >
         SHOW MODEL
       </DropDown> */}
-
       <DropDown
         trigger={"click"}
         visible={modalVisible}
@@ -142,21 +152,7 @@ function App() {
         }}
         position="bottom"
         width={150}
-        modelContent={
-          // 1111,
-          // "splic"
-          // "string"
-          [
-            {
-              id: "1",
-              label: "first Item",
-            },
-            {
-              id: "2",
-              label: "second Item",
-            },
-          ]
-        }
+        modelContent={"KDSK"}
         icons={[
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -193,7 +189,6 @@ function App() {
       >
         SHOW MODEL
       </DropDown>
-
       <Button
         type="primary"
         onBtnClick={() => {
@@ -221,6 +216,25 @@ function App() {
         会计师
       </Button>
       <Button disable={true}> disable</Button>
+
+      <>
+        <Alpha
+          hsva={hsva}
+          onChange={(newAlpha) => {
+            setHsva({ ...hsva, ...newAlpha });
+          }}
+          background={`linear-gradient(to right,rgb(218,44,2) 0%, rgb(253,253,32)20%, rgb(255,255,255) 35%, rgb(255,255,255) 60% ,#D0F5FB 65%, rgb(98,165,218) 100%)`}
+        />
+        {/* <div
+          style={{
+            background: hsvaToRgbaString(hsva),
+            marginTop: 30,
+            padding: 10,
+          }}
+        >
+          {JSON.stringify(hsva)}
+        </div> */}
+      </>
     </div>
   );
 }
diff --git a/src/components/dropDown/index.tsx b/src/components/dropDown/index.tsx
index 44801dc..4fdb2ab 100644
--- a/src/components/dropDown/index.tsx
+++ b/src/components/dropDown/index.tsx
@@ -12,7 +12,7 @@ type IDropDown = {
   children?: ReactNode;
   visible?: boolean;
   setVisible?: any;
-  modelContent?: ReactNode | React.ReactNode[];
+  modelContent?: ReactNode;
   width?: number;
   position?: position;
   onChangeVisible: () => void;
@@ -52,11 +52,7 @@ const DropDown: React.FC<IDropDown> = ({
   };
 
   const handleSelected = (option: ReactNode) => {
-    if (typeof option === "object") {
-      setOptionValue(option?.label);
-    } else {
-      setOptionValue(option);
-    }
+    setOptionValue(option);
     setVisible(false);
   };
 
@@ -72,26 +68,7 @@ const DropDown: React.FC<IDropDown> = ({
           {visible ? icons[0] : icons[1]}
           {visible && (
             <div className={`dropDownOption ${fixedPosition(position)}`}>
-              {Array.isArray(modelContent) ? (
-                modelContent?.map((option: unknown) => {
-                  return (
-                    <div
-                      key={uuidv4()}
-                      className="dropDownOptionItem"
-                      onClick={() => handleSelected(option)}
-                    >
-                      {option?.label}
-                    </div>
-                  );
-                })
-              ) : (
-                <div
-                  className="dropDownOptionItem"
-                  onClick={() => handleSelected(modelContent)}
-                >
-                  {modelContent}
-                </div>
-              )}
+              {modelContent}
             </div>
           )}
         </div>
@@ -106,26 +83,7 @@ const DropDown: React.FC<IDropDown> = ({
           {visible ? icons[0] : icons[1]}
           {visible && (
             <div className={`dropDownOption ${fixedPosition(position)}`}>
-              {Array.isArray(modelContent) ? (
-                modelContent?.map((option: unknown) => {
-                  return (
-                    <div
-                      key={uuidv4()}
-                      className="dropDownOptionItem"
-                      onClick={() => handleSelected(option)}
-                    >
-                      {option?.label}
-                    </div>
-                  );
-                })
-              ) : (
-                <div
-                  className="dropDownOptionItem"
-                  onClick={() => handleSelected(modelContent)}
-                >
-                  {modelContent}
-                </div>
-              )}
+              {modelContent}
             </div>
           )}
         </div>
diff --git a/src/components/input/index.css b/src/components/input/index.css
new file mode 100644
index 0000000..0accd21
--- /dev/null
+++ b/src/components/input/index.css
@@ -0,0 +1,36 @@
+.inputBox {
+  border: 1px solid #036df7;
+  display: inline;
+  padding: 4px;
+  border-radius: 5px;
+  margin: 10px;
+}
+.inputBox input {
+  outline: none;
+  border: none;
+  height: 19px;
+}
+.inputBox .numberLimit {
+  font-size: 14px;
+}
+.action {
+  border: 1px solid red;
+  display: inline;
+  padding: 4px;
+  border-radius: 5px;
+  margin: 10px;
+}
+.action input {
+  outline: none;
+  border: none;
+  height: 19px;
+}
+.action .numberLimit {
+  font-size: 14px;
+}
+.message {
+  margin: 0;
+  padding: 0;
+  color: red;
+  font-size: 12px;
+}
diff --git a/src/components/input/index.less b/src/components/input/index.less
new file mode 100644
index 0000000..bd420c7
--- /dev/null
+++ b/src/components/input/index.less
@@ -0,0 +1,39 @@
+.inputBox {
+  border: 1px solid rgb(3, 109, 247);
+  display: inline;
+  padding: 4px;
+  border-radius: 5px;
+  margin: 10px;
+  input {
+    outline: none;
+    border: none;
+    height: 19px;
+  }
+
+  .numberLimit {
+    font-size: 14px;
+  }
+}
+
+.action {
+  border: 1px solid red;
+  display: inline;
+  padding: 4px;
+  border-radius: 5px;
+  margin: 10px;
+  input {
+    outline: none;
+    border: none;
+    height: 19px;
+  }
+  .numberLimit {
+    font-size: 14px;
+  }
+}
+
+.message {
+  margin: 0;
+  padding: 0;
+  color: red;
+  font-size: 12px;
+}
diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx
new file mode 100644
index 0000000..e2e6752
--- /dev/null
+++ b/src/components/input/input.tsx
@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from "react";
+import "./index.less";
+
+type IProps = {
+  value?: string | number | undefined;
+  defaultValue?: string | number | undefined;
+  maxLength?: number | undefined;
+  onChange: (e: Event) => void;
+};
+
+const Input: React.FC<IProps> = ({
+  value,
+  defaultValue,
+  maxLength,
+  onChange,
+}) => {
+  const [inputLength, setInputLength] = useState(0);
+
+  useEffect(() => {
+    if (value) {
+      let inputValues = value.split("").length;
+      setInputLength(inputValues);
+    } else {
+      setInputLength(0);
+    }
+  }, [value]);
+
+  useEffect(() => {
+    if (defaultValue) {
+      if (typeof defaultValue === "number") {
+        let defaultValueArrayLength = defaultValue
+          ?.toString()
+          ?.split("")?.length;
+        setInputLength(defaultValueArrayLength);
+      } else if (typeof defaultValue === "string") {
+        let defaultValues = defaultValue.split("").length;
+        setInputLength(defaultValues);
+      } else {
+        setInputLength(0);
+      }
+    }
+  }, [defaultValue]);
+
+  return (
+    <>
+      <div className={inputLength < 10 ? "inputBox" : "action"}>
+        <input
+          value={value}
+          defaultValue={defaultValue}
+          maxLength={maxLength}
+          onChange={(e: Event) => onChange(e)}
+        />
+        <span className="numberLimit">{`${inputLength}/${
+          maxLength && maxLength
+        }`}</span>
+      </div>
+      {inputLength > 10 && (
+        <span className="message">内容超过10，请重新输入</span>
+      )}
+    </>
+  );
+};
+
+export default Input;

From b9414ec7a840c870397ae41ed8843571554d8db2 Mon Sep 17 00:00:00 2001
From: Davdeyang <1320501826@qq.com>
Date: Fri, 7 Apr 2023 03:33:23 +0800
Subject: [PATCH 09/10] =?UTF-8?q?button=E6=8C=89=E9=92=AE=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E9=BC=A0=E6=A0=87=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/_test.tsx                    |  3 +++
 src/components/button/button.tsx | 40 ++++++++++++++++++++++++++++++++
 src/components/button/index.css  |  4 ++--
 src/components/button/index.less |  4 ++--
 src/components/input/input.tsx   |  6 ++---
 5 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/src/_test.tsx b/src/_test.tsx
index b50b95b..88919f0 100644
--- a/src/_test.tsx
+++ b/src/_test.tsx
@@ -208,6 +208,7 @@ function App() {
       </Button>
       <Button type="link">Link</Button>
       <Button type="text">Text</Button>
+
       <Button shape="round">Circle</Button>
       <Button shape="circle" type="primary">
         A
@@ -217,6 +218,8 @@ function App() {
       </Button>
       <Button disable={true}> disable</Button>
 
+      <Button onDoubleClick={() => {}}>123213213123</Button>
+
       <>
         <Alpha
           hsva={hsva}
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index e64a3b6..1afe512 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -2,6 +2,8 @@ import React from "react";
 import "./index.less";
 import classnames from "classnames";
 
+//如果继承 DOMAttributes
+
 type type = "primary" | "link" | "dashed" | "text" | "disable";
 type shape = "round" | "circle";
 type iconPos = "left" | "right";
@@ -16,7 +18,20 @@ type IButton = {
   icon?: React.ReactNode | undefined;
   iconPos?: iconPos | undefined;
   herf?: string | undefined;
+  form?: string | undefined;
+  value?: string | undefined;
+  name?: string | string;
   onBtnClick?: () => void;
+  onDoubleClick?: () => void;
+  onMouseDown?: () => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  onMouseMove?: () => void;
+  onMouseOut?: () => void;
+  onMouseOutCapture?: () => void;
+  onMouseOver?: () => void;
+  onMouseUp?: () => void;
+  onMouseUpCapture?: () => void;
 };
 
 const Button: React.FC<IButton> = ({
@@ -28,7 +43,20 @@ const Button: React.FC<IButton> = ({
   shape,
   icon,
   iconPos,
+  form,
+  value,
+  name,
   onBtnClick,
+  onDoubleClick,
+  onMouseDown,
+  onMouseEnter,
+  onMouseLeave,
+  onMouseMove,
+  onMouseOut,
+  onMouseOutCapture,
+  onMouseOver,
+  onMouseUp,
+  onMouseUpCapture,
 }) => {
   const getBtnClass = () => {
     switch (type) {
@@ -66,8 +94,20 @@ const Button: React.FC<IButton> = ({
       onClick={
         onBtnClick ? onBtnClick : () => console.log("Nothing is happing")
       }
+      onDoubleClick={
+        onDoubleClick ? onDoubleClick : () => console.log("Nothing is happing")
+      }
+      onMouseDown={
+        onMouseDown ? onMouseDown : () => console.log("Nothing is happing")
+      }
+      onMouseEnter={
+        onMouseEnter ? onMouseEnter : () => console.log("Nothing is ...")
+      }
       disabled={disable}
       style={style}
+      form={form}
+      value={value}
+      name={name}
     >
       {icon && iconPos === "left"} {children ? children : "BUTTON"}
       {icon && iconPos === "right"}
diff --git a/src/components/button/index.css b/src/components/button/index.css
index 36a67cf..2779de2 100644
--- a/src/components/button/index.css
+++ b/src/components/button/index.css
@@ -1,7 +1,7 @@
 .gojiButton {
   display: inline-block;
   font-size: 14px;
-  padding: 4px 15px;
+  padding: 0px 15px;
   border-radius: 6px;
   cursor: pointer;
   background-color: #fff;
@@ -16,7 +16,7 @@
 }
 .primaryButton {
   font-size: 14px;
-  padding: 4px 15px;
+  padding: 0px 15px;
   border-radius: 6px;
   cursor: pointer;
   background-color: #fff;
diff --git a/src/components/button/index.less b/src/components/button/index.less
index 3cde6cc..5cd6cdc 100644
--- a/src/components/button/index.less
+++ b/src/components/button/index.less
@@ -1,7 +1,7 @@
 .gojiButton {
   display: inline-block;
   font-size: 14px;
-  padding: 4px 15px;
+  padding: 0px 15px;
   border-radius: 6px;
   cursor: pointer;
   background-color: #fff;
@@ -18,7 +18,7 @@
 
 .primaryButton {
   font-size: 14px;
-  padding: 4px 15px;
+  padding: 0px 15px;
   border-radius: 6px;
   cursor: pointer;
   background-color: #fff;
diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx
index e2e6752..2ccc0a7 100644
--- a/src/components/input/input.tsx
+++ b/src/components/input/input.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import "./index.less";
 
 type IProps = {
-  value?: string | number | undefined;
+  value?: string | undefined;
   defaultValue?: string | number | undefined;
   maxLength?: number | undefined;
   onChange: (e: Event) => void;
@@ -18,7 +18,7 @@ const Input: React.FC<IProps> = ({
 
   useEffect(() => {
     if (value) {
-      let inputValues = value.split("").length;
+      let inputValues = value?.split("").length;
       setInputLength(inputValues);
     } else {
       setInputLength(0);
@@ -43,7 +43,7 @@ const Input: React.FC<IProps> = ({
 
   return (
     <>
-      <div className={inputLength < 10 ? "inputBox" : "action"}>
+      <div className={inputLength <= 10 ? "inputBox" : "action"}>
         <input
           value={value}
           defaultValue={defaultValue}

From d71d1b1b36eac41fe3216cf29f2463180b078e66 Mon Sep 17 00:00:00 2001
From: Davdeyang <1320501826@qq.com>
Date: Mon, 10 Apr 2023 19:49:21 +0800
Subject: [PATCH 10/10] =?UTF-8?q?fix:input=20=E6=B7=BB=E5=8A=A0=E5=89=A9?=
 =?UTF-8?q?=E4=BD=99=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                  | 16 ++++++
 package.json                       |  1 +
 src/_test.tsx                      | 41 +++++++++++----
 src/components/button/button.tsx   | 81 +++++++-----------------------
 src/components/countdown/index.tsx | 27 ++++++++++
 src/components/dropDown/index.tsx  |  5 --
 src/components/input/input.tsx     | 35 ++++++-------
 7 files changed, 106 insertions(+), 100 deletions(-)
 create mode 100644 src/components/countdown/index.tsx

diff --git a/package-lock.json b/package-lock.json
index da3ed28..ea2de7a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,6 +41,7 @@
         "jest": "^29.5.0",
         "jest-environment-jsdom": "^29.5.0",
         "less-loader": "^11.1.0",
+        "moment": "^2.29.4",
         "postcss": "^8.4.21",
         "react": "^18.2.0",
         "rollup": "^3.19.1",
@@ -10328,6 +10329,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -22122,6 +22132,12 @@
         "brace-expansion": "^2.0.1"
       }
     },
+    "moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "dev": true
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
diff --git a/package.json b/package.json
index 6054c29..b216125 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "less-loader": "^11.1.0",
+    "moment": "^2.29.4",
     "postcss": "^8.4.21",
     "react": "^18.2.0",
     "rollup": "^3.19.1",
diff --git a/src/_test.tsx b/src/_test.tsx
index 88919f0..16141ba 100644
--- a/src/_test.tsx
+++ b/src/_test.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import ReactDom from "react-dom";
 import Modal from "./components/modal/modal";
 import Upload from "./components/upload/upload";
@@ -9,26 +9,35 @@ import Button from "./components/button/button";
 import "./_test.less";
 import Alpha from "@uiw/react-color-alpha";
 import Input from "./components/input/input";
+import useCountdown from "./components/countdown";
 
 function App() {
   const [visible, setVisible] = useState(false);
   const [ev, setEv] = useState(false);
   const [modalVisible, setModalVisible] = useState(false);
   const [hsva, setHsva] = useState({ h: 0, s: 0, v: 20, a: 1 });
-
-  const [value, setValue] = useState();
+  const [value, setValue] = useState(10);
+  const { date } = useCountdown(3);
 
   const handleClick = (e: unknown) => {
     setValue(e?.target.value);
+    console.log("e", e?.target.value);
   };
 
   return (
     <div>
+      <div>{date}</div>
       <Input
         defaultValue={"undefinedssss"}
         maxLength={10}
         value={value}
         onChange={handleClick}
+        onBlur={() => {
+          console.log("kdsk");
+        }}
+        onFocus={() => {
+          console.log("sssss");
+        }}
       />
       {/* <GOJI.Tab
 			extSelector={'.tab'}
@@ -190,8 +199,8 @@ function App() {
         SHOW MODEL
       </DropDown>
       <Button
-        type="primary"
-        onBtnClick={() => {
+        types="primary"
+        onClick={() => {
           console.log("primary");
         }}
       >
@@ -199,26 +208,36 @@ function App() {
       </Button>
       <Button />
       <Button
-        type="dashed"
-        onBtnClick={() => {
+        types="dashed"
+        onClick={() => {
           alert("Dashed Button");
         }}
       >
         dashed
       </Button>
-      <Button type="link">Link</Button>
-      <Button type="text">Text</Button>
+      <Button types="link">Link</Button>
+      <Button types="text">Text</Button>
 
       <Button shape="round">Circle</Button>
-      <Button shape="circle" type="primary">
+      <Button shape="circle" types="primary">
         A
       </Button>
       <Button icon="" iconPos="left">
         会计师
       </Button>
-      <Button disable={true}> disable</Button>
+      <Button disabled={true}> disable</Button>
 
       <Button onDoubleClick={() => {}}>123213213123</Button>
+      <Button
+        onMouseEnter={() => {
+          console.log("kdsk");
+        }}
+      >
+        {" "}
+        onHover
+      </Button>
+
+      <Button onMouseLeave={() => console.log("mouseLeave")}>MouseLeave</Button>
 
       <>
         <Alpha
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 1afe512..9855c5f 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -2,64 +2,30 @@ import React from "react";
 import "./index.less";
 import classnames from "classnames";
 
-//如果继承 DOMAttributes
+//如何继承 DOMAttributes
 
 type type = "primary" | "link" | "dashed" | "text" | "disable";
 type shape = "round" | "circle";
 type iconPos = "left" | "right";
 
-type IButton = {
-  type?: type | undefined;
+interface IButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  types?: type | undefined;
   style?: React.CSSProperties | undefined;
   className?: string | undefined;
   children?: React.ReactNode | undefined;
-  disable?: boolean | undefined;
   shape?: shape | undefined;
   icon?: React.ReactNode | undefined;
   iconPos?: iconPos | undefined;
   herf?: string | undefined;
-  form?: string | undefined;
-  value?: string | undefined;
-  name?: string | string;
-  onBtnClick?: () => void;
-  onDoubleClick?: () => void;
-  onMouseDown?: () => void;
-  onMouseEnter?: () => void;
-  onMouseLeave?: () => void;
-  onMouseMove?: () => void;
-  onMouseOut?: () => void;
-  onMouseOutCapture?: () => void;
-  onMouseOver?: () => void;
-  onMouseUp?: () => void;
-  onMouseUpCapture?: () => void;
-};
+  disabled?: boolean | undefined;
+}
+
+const Button = (props: IButton) => {
+  const { types, style, className, children, shape, icon, iconPos, disabled } =
+    props;
 
-const Button: React.FC<IButton> = ({
-  type,
-  style,
-  className,
-  children,
-  disable,
-  shape,
-  icon,
-  iconPos,
-  form,
-  value,
-  name,
-  onBtnClick,
-  onDoubleClick,
-  onMouseDown,
-  onMouseEnter,
-  onMouseLeave,
-  onMouseMove,
-  onMouseOut,
-  onMouseOutCapture,
-  onMouseOver,
-  onMouseUp,
-  onMouseUpCapture,
-}) => {
   const getBtnClass = () => {
-    switch (type) {
+    switch (types) {
       case "primary":
         return "primaryButton gojiButton";
       case "dashed":
@@ -88,26 +54,13 @@ const Button: React.FC<IButton> = ({
 
   return (
     <button
-      className={classnames(`${getBtnClass()} ${shapes()} ${className}`, {
-        disableButton: disable,
-      })}
-      onClick={
-        onBtnClick ? onBtnClick : () => console.log("Nothing is happing")
-      }
-      onDoubleClick={
-        onDoubleClick ? onDoubleClick : () => console.log("Nothing is happing")
-      }
-      onMouseDown={
-        onMouseDown ? onMouseDown : () => console.log("Nothing is happing")
-      }
-      onMouseEnter={
-        onMouseEnter ? onMouseEnter : () => console.log("Nothing is ...")
-      }
-      disabled={disable}
-      style={style}
-      form={form}
-      value={value}
-      name={name}
+      className={classnames(
+        `${getBtnClass()} ${shapes()} ${className} ${
+          disabled && "disableButton"
+        }`
+      )}
+      style={{...style}}
+      {...props}
     >
       {icon && iconPos === "left"} {children ? children : "BUTTON"}
       {icon && iconPos === "right"}
diff --git a/src/components/countdown/index.tsx b/src/components/countdown/index.tsx
new file mode 100644
index 0000000..f2025ac
--- /dev/null
+++ b/src/components/countdown/index.tsx
@@ -0,0 +1,27 @@
+import { useEffect, useRef, useState } from "react";
+
+export default function useCountdown(time: number) {
+  const [date, setDate] = useState(time);
+  const timeRef = useRef<NodeJS.Timer>();
+
+  useEffect(() => {
+    //timeRef.current是定时器
+    timeRef.current = setInterval(() => {
+      setDate((t) => t - 1);
+    }, 1000);
+
+    return () => {
+      clearInterval(timeRef.current);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (date <= 0) {
+      clearInterval(timeRef.current);
+    }
+  }, [date]);
+
+  return {
+    date,
+  };
+}
diff --git a/src/components/dropDown/index.tsx b/src/components/dropDown/index.tsx
index 4fdb2ab..cdd777d 100644
--- a/src/components/dropDown/index.tsx
+++ b/src/components/dropDown/index.tsx
@@ -51,11 +51,6 @@ const DropDown: React.FC<IDropDown> = ({
     }
   };
 
-  const handleSelected = (option: ReactNode) => {
-    setOptionValue(option);
-    setVisible(false);
-  };
-
   return (
     <>
       {trigger === "click" ? (
diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx
index 2ccc0a7..57ee9fe 100644
--- a/src/components/input/input.tsx
+++ b/src/components/input/input.tsx
@@ -1,23 +1,20 @@
 import React, { useEffect, useState } from "react";
 import "./index.less";
 
-type IProps = {
-  value?: string | undefined;
-  defaultValue?: string | number | undefined;
+interface IProps extends React.HTMLProps<HTMLInputElement> {
+  className?: string | undefined;
+  style?: React.CSSProperties;
+  value: string | number | undefined;
   maxLength?: number | undefined;
-  onChange: (e: Event) => void;
-};
+  defaultValue?: string | undefined;
+}
 
-const Input: React.FC<IProps> = ({
-  value,
-  defaultValue,
-  maxLength,
-  onChange,
-}) => {
+const Input = (props: IProps) => {
+  const { value, defaultValue, maxLength, className, style } = props;
   const [inputLength, setInputLength] = useState(0);
 
   useEffect(() => {
-    if (value) {
+    if (value === "string") {
       let inputValues = value?.split("").length;
       setInputLength(inputValues);
     } else {
@@ -39,17 +36,15 @@ const Input: React.FC<IProps> = ({
         setInputLength(0);
       }
     }
-  }, [defaultValue]);
+  }, []);
 
   return (
     <>
-      <div className={inputLength <= 10 ? "inputBox" : "action"}>
-        <input
-          value={value}
-          defaultValue={defaultValue}
-          maxLength={maxLength}
-          onChange={(e: Event) => onChange(e)}
-        />
+      <div
+        className={`${inputLength <= 10 ? "inputBox" : "action"} ${className}`}
+        style={{ ...style }}
+      >
+        <input {...props} />
         <span className="numberLimit">{`${inputLength}/${
           maxLength && maxLength
         }`}</span>