update code

Author: wenlng

.gitattributes

@@ -1,2 +1,2 @@
 *.ts linguist-language=typescript
-*.tsx linguist-language=typescript
+*.tsx linguist-language=react

README.md

@@ -1,5 +1,11 @@
 # Go Captcha React Package
 
+<p> ⭐️ If it helps you, please give a star.</p>
+<img src="http://47.104.180.148/go-captcha/go-captcha-v2.jpg" alt="Poster">
+
+<br/>
+
+## Install
 ```shell
 yarn add go-captcha-react
 # or
@@ -19,31 +25,33 @@ import GoCaptcha from 'go-captcha-react';
 />
 ```
 
-### params
+### Parameter Reference
 ```ts
 // config = {}
-interface Config {
+interface ClickConfig {
   width?: number;
   height?: number;
   thumbWidth?: number;
   thumbHeight?: number;
   verticalPadding?: number;
   horizontalPadding?: number;
   showTheme?: boolean;
+  title?: string;
+  buttonText?: string;
 }
 
 // data = {}
-interface Data {
+interface ClickData {
   image: string;
   thumb: string;
 }
 
 // events = {}
-interface Events {
+interface ClickEvents {
   click?: (x: number, y: number) => void;
   refresh?: () => void;
   close?: () => void;
-  confirm?: (dots: Array<CaptchaDot>) => boolean;
+  confirm?: (dots: Array<ClickDot>) => boolean;
 }
 ```
 
@@ -63,21 +71,22 @@ import GoCaptcha from 'go-captcha-react';
   events={{}}
 />
 ```
-### params
+### Parameter Reference
 ```ts
 // config = {}
-interface Config {
+interface SlideConfig {
   width?: number;
   height?: number;
   thumbWidth?: number;
   thumbHeight?: number;
   verticalPadding?: number;
   horizontalPadding?: number;
   showTheme?: boolean;
+  title?: string;
 }
 
 // data = {}
-interface Data {
+interface SlideData {
   thumbX: number;
   thumbY: number;
   thumbWidth: number;
@@ -87,11 +96,43 @@ interface Data {
 }
 
 // events = {}
-interface Events {
+interface SlideEvents {
   move?: (x: number, y: number) => void;
   refresh?: () => void;
   close?: () => void;
-  confirm?: (point: CaptchaPoint) => boolean;
+  confirm?: (point: SlidePoint) => boolean;
+}
+```
+
+```ts
+// config = {}
+interface SlideRegionConfig {
+  width?: number;
+  height?: number;
+  thumbWidth?: number;
+  thumbHeight?: number;
+  verticalPadding?: number;
+  horizontalPadding?: number;
+  showTheme?: boolean;
+  title?: string;
+}
+
+// data = {}
+interface SlideRegionData {
+  thumbX: number;
+  thumbY: number;
+  thumbWidth: number;
+  thumbHeight: number;
+  image: string;
+  thumb: string;
+}
+
+// events = {}
+interface SlideRegionEvents {
+  move?: (x: number, y: number) => void;
+  refresh?: () => void;
+  close?: () => void;
+  confirm?: (point: SlideRegionPoint) => boolean;
 }
 ```
 
@@ -107,31 +148,68 @@ import GoCaptcha from 'go-captcha-react';
 />
 ```
 
-### params
+### Parameter Reference
 ```ts
 // config = {}
-interface Config {
+interface RotateConfig {
   width?: number;
   height?: number;
   thumbWidth?: number;
   thumbHeight?: number;
   verticalPadding?: number;
   horizontalPadding?: number;
   showTheme?: boolean;
+  title?: string;
 }
 
 // data = {}
-interface Data {
+interface RotateData {
   angle: number;
   image: string;
   thumb: string;
 }
 
 // events = {}
-interface Events {
+interface RotateEvents {
   rotate?: (angle: number) => void;
   refresh?: () => void;
   close?: () => void;
   confirm?: (angle: number) => boolean;
 }
-```
+```
+
+
+## 🖖 Button
+```jsx
+import GoCaptcha from 'go-captcha-react';
+
+<GoCaptcha.Button />
+```
+
+### Parameter Reference
+```ts
+interface _ {
+  config?: ButtonConfig;
+  clickEvent?: () => void;
+  disabled?: boolean;
+  type?: "default" | "warn" | "error" | "success";
+  title?: string;
+}
+
+export interface ButtonConfig {
+  width?: number;
+  height?: number;
+  verticalPadding?: number;
+  horizontalPadding?: number;
+}
+```
+
+<br/>
+
+## 🍹 Buy me a coffee
+<div>
+<a href="http://witkeycode.com/sponsor" target="_blank"><img src="http://47.104.180.148/payment-code/wxpay.png" alt="Buy Me A Coffee" style="width: 217px !important;" ></a>
+<a href="http://witkeycode.com/sponsor" target="_blank"><img src="http://47.104.180.148/payment-code/alipay.png" alt="Buy Me A Coffee" style="width: 217px !important;" ></a>
+</div>
+
+<br/>

package.json

@@ -1,10 +1,10 @@
 {
   "name": "go-captcha-react",
-  "version": "2.0.0",
-  "author": "Awen",
+  "version": "1.0.0",
   "license": "MIT",
   "private": false,
   "email": "[email protected]",
+  "author": "Awen <[email protected]>",
   "description": "This is the react package for go-captcha",
   "keywords": [
     "go-captcha-react",
@@ -22,6 +22,7 @@
     "type": "git",
     "url": "git+https://github.com/wenlng/go-captcha-react.git"
   },
+  "homepage": "https://github.com/wenlng/go-captcha-react",
   "module": "dist/go-captcha-react.esm.js",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/components/Button/Index.tsx

@@ -1,17 +1,25 @@
+/**
+ * @Author Awen
+ * @Date 2024/06/01
+ * @Email [email protected]
+ **/
+
 import React, {FC} from "react";
-import {CaptchaConfig, defaultConfig} from "./meta/config";
+import {ButtonConfig, defaultConfig} from "./meta/config";
 import styles from './index.module.less'
 import BtnDefaultIcon from "../../assets/icons/BtnDefaultIcon";
 import BtnErrorIcon from "../../assets/icons/BtnErrorIcon";
 import BtnWarnIcon from "../../assets/icons/BtnWarnIcon";
 import BtnSuccessIcon from "../../assets/icons/BtnSuccessIcon";
 import classnames from "classnames";
 
+export type ButtonType = "default" | "warn" | "error" | "success";
+
 export interface Props extends React.HTMLAttributes<HTMLElement> {
-  config?: CaptchaConfig;
+  config?: ButtonConfig;
   clickEvent?: () => void;
   disabled?: boolean;
-  type?: "default" | "warn" | "error" | "success";
+  type?: ButtonType;
   title?: string;
 }
 

src/components/Button/index.module.less

@@ -1,6 +1,6 @@
 /**
  * @Author Awen
- * @Date 2024/05/25
+ * @Date 2024/06/01
  * @Email [email protected]
  **/
 
@@ -52,34 +52,38 @@
 }
 
 .default{
-  color: #3e7cff;
+  color: var(--go-captcha-theme-default-color);
   border: 1px solid #50a1ff;
-  background: #ecf5ff;
+  border-color: var(--go-captcha-theme-default-border-color);
+  background-color: var(--go-captcha-theme-default-bg-color);
   cursor: pointer;
 
   &:hover{
-    background: #e0efff !important;
+    background-color: var(--go-captcha-theme-default-hover-color) !important;
   }
 }
 
 .error{
   cursor: pointer;
-  color: #ed4630;
-  background: #fef0f0;
+  color: var(--go-captcha-theme-error-color);
+  background-color: var(--go-captcha-theme-error-bg-color);
   border: 1px solid #ff5a34;
+  border-color: var(--go-captcha-theme-error-border-color);
 }
 
 .warn{
   cursor: pointer;
-  color: #ffa000;
-  background: #fdf6ec;
+  color: var(--go-captcha-theme-warn-color);
+  background-color: var(--go-captcha-theme-warn-bg-color);
   border: 1px solid #ffbe09;
+  border-color: var(--go-captcha-theme-warn-border-color);
 }
 
 .success{
-  color: #5eaa2f;
-  background: #f0f9eb;
+  color: var(--go-captcha-theme-success-color);
+  background-color: var(--go-captcha-theme-success-bg-color);
   border: 1px solid #8bc640;
+  border-color: var(--go-captcha-theme-success-border-color);
   pointer-events: none;
 }
 
@@ -99,26 +103,30 @@
   :global {
     svg {
       position: relative;
-      z-index: 10;
+      z-index: 2;
     }
   }
 
+  & > *{
+    z-index: 2;
+  }
+
   &::after {
-    background: #409eff;
+    background-color: var(--go-captcha-theme-default-border-color);
     -webkit-border-radius: 50px;
     -moz-border-radius: 50px;
     border-radius: 50px;
     content: "";
     display: block;
-    width: 20px;
-    height: 20px;
+    width: 21px;
+    height: 21px;
     opacity: 0;
     position: absolute;
     top: 50%;
     left: 50%;
-    margin-top:  -10px;
-    margin-left:  -10px;
-    z-index: 9;
+    margin-top:  -11px;
+    margin-left:  -11px;
+    z-index: 1;
 
     animation: ripple 1.3s infinite;
     -moz-animation: ripple 1.3s infinite;

src/components/Button/meta/config.ts

@@ -1,17 +1,17 @@
 /**
  * @Author Awen
- * @Date 2024/05/25
+ * @Date 2024/06/01
  * @Email [email protected]
  **/
 
-export interface CaptchaConfig {
+export interface ButtonConfig {
   width?: number;
   height?: number;
   verticalPadding?: number;
   horizontalPadding?: number;
 }
 
-export const defaultConfig = ():CaptchaConfig => ({
+export const defaultConfig = ():ButtonConfig => ({
   width: 330,
   height: 44,
   verticalPadding: 12,