refactor: refactor code structure and improve demo page (#4389)

* feat: captcha example

* fix: fix lint errors

* chore: event handling and methods

* chore: add accessibility features ARIA labels and roles

* refactor: refactor code structure and improve captcha demo page

* feat: add captcha internationalization

* chore: 适配时间戳国际化展示

---------

Co-authored-by: vince <vince292007@gmail.com>

playground/src/locales/langs/en-US.json

@@ -81,7 +81,27 @@
         "custom": "Custom Component"
       },
       "captcha": {
-        "title": "Captcha"
+        "title": "Captcha",
+        "captchaCardTitle": "Please complete the security verification",
+        "pageDescription": "Verify user identity by clicking on specific locations in the image.",
+        "pageTitle": "Captcha Component Example",
+        "basic": "Basic Usage",
+        "titlePlaceholder": "Captcha Title Text",
+        "captchaImageUrlPlaceholder": "Captcha Image (supports img tag src attribute value)",
+        "hintImage": "Hint Image",
+        "hintText": "Hint Text",
+        "hintImagePlaceholder": "Hint Image (supports img tag src attribute value)",
+        "hintTextPlaceholder": "Hint Text",
+        "showConfirm": "Show Confirm",
+        "hideConfirm": "Hide Confirm",
+        "widthPlaceholder": "Captcha Image Width Default 300px",
+        "heightPlaceholder": "Captcha Image Height Default 220px",
+        "paddingXPlaceholder": "Horizontal Padding Default 12px",
+        "paddingYPlaceholder": "Vertical Padding Default 16px",
+        "index": "Index:",
+        "timestamp": "Timestamp:",
+        "x": "x:",
+        "y": "y:"
       }
     }
   }

playground/src/locales/langs/zh-CN.json

@@ -81,7 +81,27 @@
         "custom": "自定义组件"
       },
       "captcha": {
-        "title": "验证码"
+        "title": "验证码",
+        "captchaCardTitle": "请完成安全验证",
+        "pageDescription": "通过点击图片中的特定位置来验证用户身份。",
+        "pageTitle": "验证码组件示例",
+        "basic": "基本使用",
+        "titlePlaceholder": "验证码标题文案",
+        "captchaImageUrlPlaceholder": "验证码图片（支持img标签src属性值）",
+        "hintImage": "提示图片",
+        "hintText": "提示文本",
+        "hintImagePlaceholder": "提示图片（支持img标签src属性值）",
+        "hintTextPlaceholder": "提示文本",
+        "showConfirm": "展示确认",
+        "hideConfirm": "隐藏确认",
+        "widthPlaceholder": "验证码图片宽度 默认300px",
+        "heightPlaceholder": "验证码图片高度 默认220px",
+        "paddingXPlaceholder": "水平内边距 默认12px",
+        "paddingYPlaceholder": "垂直内边距 默认16px",
+        "index": "索引：",
+        "timestamp": "时间戳：",
+        "x": "x：",
+        "y": "y："
       }
     }
   }