update README.md

wenlng · Dec 4, 2024 · a7d7af6 · a7d7af6
1 parent 0b82367
commit a7d7af6
Show file tree

Hide file tree

Showing 6 changed files with 419 additions and 59 deletions.
diff --git a/README.md b/README.md
@@ -1,9 +1,20 @@
-# Go Captcha Solid Package
+<div align="center">
+<img width="120" style="padding-top: 50px; margin: 0;" src="http://47.104.180.148/go-captcha/gocaptcha_logo.svg?v=1"/>
+<h1 style="margin: 0; padding: 0">Go Captcha</h1>
+<p>Behavior Captcha For Solid</p>
+
+</div>
+
+<br/>
+
+> English | [中文](README_zh.md)
+
+<br/>
 
 <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
@@ -14,21 +25,31 @@ npm install go-captcha-solid
 pnpm install go-captcha-solid
 ```
 
-## 🖖 Click Mode Captcha
-```jsx
+```ts
 import GoCaptcha from 'go-captcha-solid';
+```
 
+## Click Mode
+```jsx
 <GoCaptcha.Click
   config={{}}
   data={{}}
   events={{}}
+  ref={domRef}
 />
+
+<script>
+  // call methods
+  const domRef
+  domRef.clear()
+  domRef.refresh()
+</script>
 ```
 
-### Parameter Reference
+
 ```ts
 // config = {}
-interface ClickConfig {
+interface Config {
   width?: number;
   height?: number;
   thumbWidth?: number;
@@ -43,45 +64,54 @@ interface ClickConfig {
 }
 
 // data = {}
-interface ClickData {
+interface Data {
   image: string;
   thumb: string;
 }
 
 // events = {}
-interface ClickEvents {
+interface Events {
   click?: (x: number, y: number) => void;
   refresh?: () => void;
   close?: () => void;
-  confirm?: (dots: Array<ClickDot>, reset: ()=>void) => boolean;
+  confirm?: (dots: Array<ClickDot>, reset:() => void) => boolean;
 }
 
 // component method
-interface RefMethod {
+interface ClickMethods {
+  reset: () => void,
+  clear: () => void,
+  refresh: () => void,
+  close: () => void,
+}
+
+// export component method
+interface ExportMethods {
   reset: () => void,
   clear: () => void,
   refresh: () => void,
   close: () => void,
 }
 ```
 
-## 🖖 Slide Mode Captcha
+## Slide Mode
 ```jsx
-import GoCaptcha from 'go-captcha-solid';
-
 <GoCaptcha.Slide
   config={{}}
   data={{}}
   events={{}}
+  ref={domRef}
 />
 
-<GoCaptcha.SlideRegion
-  config={{}}
-  data={{}}
-  events={{}}
-/>
+<script>
+  // call methods
+  const domRef
+  domRef.clear()
+  domRef.refresh()
+</script>
 ```
-### Parameter Reference
+
+
 ```ts
 // config = {}
 interface SlideConfig {
@@ -112,18 +142,35 @@ interface SlideEvents {
   move?: (x: number, y: number) => void;
   refresh?: () => void;
   close?: () => void;
-  confirm?: (point: SlidePoint, reset: () => void) => boolean;
+  confirm?: (point: SlidePoint, reset:() => void) => boolean;
 }
 
-// component method
-interface RefMethod {
+// export component method
+interface ExportMethods {
   reset: () => void,
   clear: () => void,
   refresh: () => void,
   close: () => void,
 }
 ```
 
+## Drag-And-Drop Mode
+```jsx
+<GoCaptcha.SlideRegion
+  config={{}}
+  data={{}}
+  events={{}}
+  ref={domRef}
+/>
+
+<script>
+  // call methods
+  const domRef
+  domRef.clear()
+  domRef.refresh()
+</script>
+```
+
 ```ts
 // config = {}
 interface SlideRegionConfig {
@@ -154,33 +201,40 @@ interface SlideRegionEvents {
   move?: (x: number, y: number) => void;
   refresh?: () => void;
   close?: () => void;
-  confirm?: (point: SlideRegionPoint, reset: () => void) => boolean;
+  confirm?: (point: SlideRegionPoint, reset:() => void) => boolean;
 }
 
-// component method
-interface RefMethod {
+// export component method
+interface ExportMethods {
   reset: () => void,
   clear: () => void,
   refresh: () => void,
   close: () => void,
 }
 ```
 
-## 🖖 Rotate Mode Captcha
-```jsx
-import GoCaptcha from 'go-captcha-solid';
 
+## Rotation Mode
+```jsx
 <GoCaptcha.Rotate
   config={{}}
   data={{}}
   events={{}}
+  ref={domRef}
 />
+
+<script>
+  // call methods
+  const domRef
+  domRef.clear()
+  domRef.refresh()
+</script>
 ```
 
-### Parameter Reference
+
 ```ts
 // config = {}
-interface RotateConfig {
+interface Config {
   width?: number;
   height?: number;
   thumbWidth?: number;
@@ -194,22 +248,22 @@ interface RotateConfig {
 }
 
 // data = {}
-interface RotateData {
+interface Data {
   angle: number;
   image: string;
   thumb: string;
 }
 
 // events = {}
-interface RotateEvents {
+interface Events {
   rotate?: (angle: number) => void;
   refresh?: () => void;
   close?: () => void;
-  confirm?: (angle: number, reset: ()=>void) => boolean;
+  confirm?: (angle: number, reset:() => void) => boolean;
 }
 
-// component method
-interface RefMethod {
+// export component method
+interface ExportMethods {
   reset: () => void,
   clear: () => void,
   refresh: () => void,
@@ -218,36 +272,27 @@ interface RefMethod {
 ```
 
 
-## 🖖 Button
-```jsx
-import GoCaptcha from 'go-captcha-solid';
 
+## Button
+```vue
 <GoCaptcha.Button />
 ```
 
-### Parameter Reference
+
 ```ts
 interface _ {
-  config?: ButtonConfig;
+  config?: CaptchaConfig;
   clickEvent?: () => void;
   disabled?: boolean;
   type?: "default" | "warn" | "error" | "success";
   title?: string;
 }
 
-export interface ButtonConfig {
+export interface CaptchaConfig {
   width?: number;
   height?: number;
   verticalPadding?: number;
   horizontalPadding?: number;
 }
-```
-
 
-<br/>
-
-## 👍 Sponsor
-<div>
-<a href="http://gocaptcha.wencodes.com/sponsor/" target="_blank">http://gocaptcha.wencodes.com/sponsor/</a>
-</div>
-<br/>
+```