fix: 锁屏和解锁密码输入框自动聚焦

Author: zouawen

packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue

@@ -27,29 +27,30 @@ const emit = defineEmits<{
   submit: [Recordable<any>];
 }>();
 
-const [Form, { resetForm, validate, getValues }] = useVbenForm(
-  reactive({
-    commonConfig: {
-      hideLabel: true,
-      hideRequiredMark: true,
-    },
-    schema: computed(() => [
-      {
-        component: 'VbenInputPassword' as const,
-        componentProps: {
-          placeholder: $t('ui.widgets.lockScreen.placeholder'),
-        },
-        fieldName: 'lockScreenPassword',
-        formFieldProps: { validateOnBlur: false },
-        label: $t('authentication.password'),
-        rules: z
-          .string()
-          .min(1, { message: $t('ui.widgets.lockScreen.placeholder') }),
+const [Form, { resetForm, validate, getValues, getFieldComponentRef }] =
+  useVbenForm(
+    reactive({
+      commonConfig: {
+        hideLabel: true,
+        hideRequiredMark: true,
       },
-    ]),
-    showDefaultActions: false,
-  }),
-);
+      schema: computed(() => [
+        {
+          component: 'VbenInputPassword' as const,
+          componentProps: {
+            placeholder: $t('ui.widgets.lockScreen.placeholder'),
+          },
+          fieldName: 'lockScreenPassword',
+          formFieldProps: { validateOnBlur: false },
+          label: $t('authentication.password'),
+          rules: z
+            .string()
+            .min(1, { message: $t('ui.widgets.lockScreen.placeholder') }),
+        },
+      ]),
+      showDefaultActions: false,
+    }),
+  );
 
 const [Modal] = useVbenModal({
   onConfirm() {
@@ -60,6 +61,13 @@ const [Modal] = useVbenModal({
       resetForm();
     }
   },
+  onOpened() {
+    requestAnimationFrame(() => {
+      getFieldComponentRef('lockScreenPassword')
+        ?.$el?.querySelector('[name="lockScreenPassword"]')
+        ?.focus();
+    });
+  },
 });
 
 async function handleSubmit() {

packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue

@@ -37,7 +37,7 @@ const date = useDateFormat(now, 'YYYY-MM-DD dddd', { locales: locale.value });
 const showUnlockForm = ref(false);
 const { lockScreenPassword } = storeToRefs(accessStore);
 
-const [Form, { form, validate }] = useVbenForm(
+const [Form, { form, validate, getFieldComponentRef }] = useVbenForm(
   reactive({
     commonConfig: {
       hideLabel: true,
@@ -75,6 +75,13 @@ async function handleSubmit() {
 
 function toggleUnlockForm() {
   showUnlockForm.value = !showUnlockForm.value;
+  if (showUnlockForm.value) {
+    requestAnimationFrame(() => {
+      getFieldComponentRef('password')
+        ?.$el?.querySelector('[name="password"]')
+        ?.focus();
+    });
+  }
 }
 
 useScrollLock();