Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev

playground/src/adapter/component/index.ts

@@ -8,13 +8,7 @@ import type { Component } from 'vue';
 import type { BaseFormComponentType } from '@vben/common-ui';
 import type { Recordable } from '@vben/types';
 
-import {
-  defineAsyncComponent,
-  defineComponent,
-  getCurrentInstance,
-  h,
-  ref,
-} from 'vue';
+import { defineAsyncComponent, defineComponent, h, ref } from 'vue';
 
 import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
 import { $t } from '@vben/locales';
@@ -82,16 +76,24 @@ const withDefaultPlaceholder = <T extends Component>(
         $t(`ui.placeholder.${type}`);
       // 透传组件暴露的方法
       const innerRef = ref();
-      const publicApi: Recordable<any> = {};
-      expose(publicApi);
-      const instance = getCurrentInstance();
-      instance?.proxy?.$nextTick(() => {
-        for (const key in innerRef.value) {
-          if (typeof innerRef.value[key] === 'function') {
-            publicApi[key] = innerRef.value[key];
-          }
-        }
-      });
+      // const publicApi: Recordable<any> = {};
+      expose(
+        new Proxy(
+          {},
+          {
+            get: (_target, key) => innerRef.value?.[key],
+            has: (_target, key) => key in (innerRef.value || {}),
+          },
+        ),
+      );
+      // const instance = getCurrentInstance();
+      // instance?.proxy?.$nextTick(() => {
+      //   for (const key in innerRef.value) {
+      //     if (typeof innerRef.value[key] === 'function') {
+      //       publicApi[key] = innerRef.value[key];
+      //     }
+      //   }
+      // });
       return () =>
         h(
           component,

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

@@ -19,6 +19,7 @@
     "custom": "Custom Component",
     "api": "Api",
     "merge": "Merge Form",
+    "scrollToError": "Scroll to Error Field",
     "upload-error": "Partial file upload failed",
     "upload-urls": "Urls after file upload",
     "file": "file",
@@ -41,6 +42,7 @@
     "pointSelection": "Point Selection Captcha",
     "sliderCaptcha": "Slider Captcha",
     "sliderRotateCaptcha": "Rotate Captcha",
+    "sliderTranslateCaptcha": "Translate Captcha",
     "captchaCardTitle": "Please complete the security verification",
     "pageDescription": "Verify user identity by clicking on specific locations in the image.",
     "pageTitle": "Captcha Component Example",

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

@@ -22,6 +22,7 @@
     "custom": "自定义组件",
     "api": "Api",
     "merge": "合并表单",
+    "scrollToError": "滚动到错误字段",
     "upload-error": "部分文件上传失败",
     "upload-urls": "文件上传后的网址",
     "file": "文件",
@@ -44,6 +45,7 @@
     "pointSelection": "点选验证",
     "sliderCaptcha": "滑块验证",
     "sliderRotateCaptcha": "旋转验证",
+    "sliderTranslateCaptcha": "拼图滑块验证",
     "captchaCardTitle": "请完成安全验证",
     "pageDescription": "通过点击图片中的特定位置来验证用户身份。",
     "pageTitle": "验证码组件示例",

playground/src/router/routes/modules/examples.ts

@@ -85,6 +85,15 @@ const routes: RouteRecordRaw[] = [
               title: $t('examples.form.merge'),
             },
           },
+          {
+            name: 'FormScrollToErrorExample',
+            path: '/examples/form/scroll-to-error-test',
+            component: () =>
+              import('#/views/examples/form/scroll-to-error-test.vue'),
+            meta: {
+              title: $t('examples.form.scrollToError'),
+            },
+          },
         ],
       },
       {
@@ -196,6 +205,15 @@ const routes: RouteRecordRaw[] = [
               title: $t('examples.captcha.sliderRotateCaptcha'),
             },
           },
+          {
+            name: 'TranslateVerifyExample',
+            path: '/examples/captcha/slider-translate',
+            component: () =>
+              import('#/views/examples/captcha/slider-translate-captcha.vue'),
+            meta: {
+              title: $t('examples.captcha.sliderTranslateCaptcha'),
+            },
+          },
           {
             name: 'CaptchaPointSelectionExample',
             path: '/examples/captcha/point-selection',

playground/src/views/examples/captcha/slider-translate-captcha.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Page, SliderTranslateCaptcha } from '@vben/common-ui';
+
+import { Card, message } from 'ant-design-vue';
+
+function handleSuccess() {
+  message.success('success!');
+}
+</script>
+
+<template>
+  <Page
+    description="用于前端简单的拼图滑块水平拖动校验场景"
+    title="拼图滑块校验"
+  >
+    <Card class="mb-5" title="基本示例">
+      <div class="flex items-center justify-center p-4">
+        <SliderTranslateCaptcha
+          src="https://unpkg.com/@vbenjs/static-source@0.1.7/source/pro-avatar.webp"
+          :canvas-width="420"
+          :canvas-height="420"
+          @success="handleSuccess"
+        />
+      </div>
+    </Card>
+  </Page>
+</template>

playground/src/views/examples/form/scroll-to-error-test.vue

@@ -0,0 +1,183 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { Button, Card, Switch } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+
+defineOptions({
+  name: 'ScrollToErrorTest',
+});
+
+const scrollEnabled = ref(true);
+
+const [Form, formApi] = useVbenForm({
+  scrollToFirstError: scrollEnabled.value,
+  schema: [
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户名',
+      },
+      fieldName: 'username',
+      label: '用户名',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入邮箱',
+      },
+      fieldName: 'email',
+      label: '邮箱',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号',
+      },
+      fieldName: 'phone',
+      label: '手机号',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入地址',
+      },
+      fieldName: 'address',
+      label: '地址',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+      fieldName: 'remark',
+      label: '备注',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入公司名称',
+      },
+      fieldName: 'company',
+      label: '公司名称',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入职位',
+      },
+      fieldName: 'position',
+      label: '职位',
+      rules: 'required',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        options: [
+          { label: '男', value: 'male' },
+          { label: '女', value: 'female' },
+        ],
+        placeholder: '请选择性别',
+      },
+      fieldName: 'gender',
+      label: '性别',
+      rules: 'selectRequired',
+    },
+  ],
+  showDefaultActions: false,
+});
+
+// 测试 validateAndSubmitForm（验证并提交）
+async function testValidateAndSubmit() {
+  await formApi.validateAndSubmitForm();
+}
+
+// 测试 validate（手动验证整个表单）
+async function testValidate() {
+  await formApi.validate();
+}
+
+// 测试 validateField（验证单个字段）
+async function testValidateField() {
+  await formApi.validateField('username');
+}
+
+// 切换滚动功能
+function toggleScrollToError() {
+  formApi.setState({ scrollToFirstError: scrollEnabled.value });
+}
+
+// 填充部分数据测试
+async function fillPartialData() {
+  await formApi.resetForm();
+  await formApi.setFieldValue('username', '测试用户');
+  await formApi.setFieldValue('email', 'test@example.com');
+}
+</script>
+
+<template>
+  <Page
+    description="测试表单验证失败时自动滚动到错误字段的功能"
+    title="滚动到错误字段测试"
+  >
+    <Card title="功能测试">
+      <template #extra>
+        <div class="flex items-center gap-2">
+          <Switch
+            v-model:checked="scrollEnabled"
+            @change="toggleScrollToError"
+          />
+          <span>启用滚动到错误字段</span>
+        </div>
+      </template>
+
+      <div class="space-y-4">
+        <div class="rounded bg-blue-50 p-4">
+          <h3 class="mb-2 font-medium">测试说明：</h3>
+          <ul class="list-inside list-disc space-y-1 text-sm">
+            <li>所有验证方法在验证失败时都会自动滚动到第一个错误字段</li>
+            <li>可以通过右上角的开关控制是否启用自动滚动功能</li>
+          </ul>
+        </div>
+
+        <div class="rounded border p-4">
+          <h4 class="mb-3 font-medium">验证方法测试：</h4>
+          <div class="flex flex-wrap gap-2">
+            <Button type="primary" @click="testValidateAndSubmit">
+              测试 validateAndSubmitForm()
+            </Button>
+            <Button @click="testValidate"> 测试 validate() </Button>
+            <Button @click="testValidateField"> 测试 validateField() </Button>
+          </div>
+          <div class="mt-2 text-xs text-gray-500">
+            <p>• validateAndSubmitForm(): 验证表单并提交</p>
+            <p>• validate(): 手动验证整个表单</p>
+            <p>• validateField(): 验证单个字段（这里测试用户名字段）</p>
+          </div>
+        </div>
+
+        <div class="rounded border p-4">
+          <h4 class="mb-3 font-medium">数据填充测试：</h4>
+          <div class="flex flex-wrap gap-2">
+            <Button @click="fillPartialData"> 填充部分数据 </Button>
+            <Button @click="() => formApi.resetForm()"> 清空表单 </Button>
+          </div>
+          <div class="mt-2 text-xs text-gray-500">
+            <p>• 填充部分数据后验证，会滚动到第一个错误字段</p>
+          </div>
+        </div>
+
+        <Form />
+      </div>
+    </Card>
+  </Page>
+</template>