feat: add VbenForm component (#4352)

* feat: add form component * fix: build error * feat: add form adapter * feat: add some component * feat: add some component * feat: add example * feat: suppoer custom action button * chore: update * feat: add example * feat: add formModel,formDrawer demo * fix: build error * fix: typo * fix: ci error --------- Co-authored-by: jinmao <jinmao88@qq.com> Co-authored-by: likui628 <90845831+likui628@users.noreply.github.com>
2024-09-10 21:48:51 +08:00
parent 86ed732ca8
commit 524b9badf2
271 changed files with 5974 additions and 1247 deletions
--- a/packages/effects/common-ui/package.json
+++ b/packages/effects/common-ui/package.json
@@ -20,10 +20,10 @@
    }
  },
  "dependencies": {
+    "@vben-core/form-ui": "workspace:*",
    "@vben-core/popup-ui": "workspace:*",
    "@vben-core/shadcn-ui": "workspace:*",
    "@vben/constants": "workspace:*",
-    "@vben/hooks": "workspace:*",
    "@vben/icons": "workspace:*",
    "@vben/locales": "workspace:*",
    "@vben/types": "workspace:*",
--- a/packages/effects/common-ui/src/components/captcha/index.ts
+++ b/packages/effects/common-ui/src/components/captcha/index.ts
@@ -1,8 +1,2 @@
 export { default as PointSelectionCaptcha } from './point-selection-captcha.vue';
-export interface Point {
-  i: number;
-  x: number;
-  y: number;
-  t: number;
-}
-export type ClearFunction = () => void;
+export type * from './types';
--- a/packages/effects/common-ui/src/components/captcha/point-selection-captcha.vue
+++ b/packages/effects/common-ui/src/components/captcha/point-selection-captcha.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import type { CaptchaPoint } from './types';
+
 import { computed, ref } from 'vue';

-import { SvgRefreshIcon } from '@vben/icons';
+import { RotateCw } from '@vben/icons';
 import {
  Card,
  CardContent,
@@ -12,8 +14,6 @@ import {
  VbenIconButton,
 } from '@vben-core/shadcn-ui';

-import { type Point } from '.';
-
 interface Props {
  /**
   * 点选的图片
@@ -74,7 +74,7 @@ const props = withDefaults(defineProps<Props>(), {

 const emit = defineEmits<{
  click: [number, number];
-  confirm: [Array<Point>, clear: () => void];
+  confirm: [Array<CaptchaPoint>, clear: () => void];
  refresh: [];
 }>();

@@ -129,10 +129,10 @@ function getElementPosition(element: HTMLElement) {
    y: posY,
  };
 }
-const points = ref<Point[]>([]);
+const points = ref<CaptchaPoint[]>([]);
 const POINT_OFFSET = 11;

-function handleClick(e: any | Event) {
+function handleClick(e: MouseEvent) {
  try {
    const dom = e.currentTarget as HTMLElement;
    if (!dom) throw new Error('Element not found');
@@ -231,7 +231,7 @@ function handleConfirm() {
    </CardContent>
    <CardFooter class="mt-2 flex justify-between p-0">
      <VbenIconButton aria-label="刷新验证码" @click="handleRefresh">
-        <SvgRefreshIcon class="size-6" />
+        <RotateCw class="size-5" />
      </VbenIconButton>
      <VbenButton aria-label="确认选择" @click="handleConfirm">
        确认
--- a/packages/effects/common-ui/src/components/captcha/types.ts
+++ b/packages/effects/common-ui/src/components/captcha/types.ts
@@ -0,0 +1,6 @@
+export interface CaptchaPoint {
+  i: number;
+  x: number;
+  y: number;
+  t: number;
+}
--- a/packages/effects/common-ui/src/components/index.ts
+++ b/packages/effects/common-ui/src/components/index.ts
@@ -1,6 +1,8 @@
 export * from './captcha';
 export * from './ellipsis-text';
 export * from './page';
+export * from '@vben-core/form-ui';
 export * from '@vben-core/popup-ui';

+// 给文档用
 export { VbenButton } from '@vben-core/shadcn-ui';
--- a/packages/effects/common-ui/src/ui/authentication/code-login.vue
+++ b/packages/effects/common-ui/src/ui/authentication/code-login.vue
@@ -1,15 +1,19 @@
 <script setup lang="ts">
+import type { VbenFormSchema } from '@vben-core/form-ui';
+
 import type { LoginCodeEmits } from './types';

-import { computed, onBeforeUnmount, reactive, ref } from 'vue';
+import { computed, reactive } from 'vue';
 import { useRouter } from 'vue-router';

 import { $t } from '@vben/locales';
-import { VbenButton, VbenInput, VbenPinInput } from '@vben-core/shadcn-ui';
+import { useVbenForm } from '@vben-core/form-ui';
+import { VbenButton } from '@vben-core/shadcn-ui';

 import Title from './auth-title.vue';

 interface Props {
+  formSchema: VbenFormSchema[];
  /**
   * @zh_CN 是否处于加载处理状态
   */
@@ -35,82 +39,31 @@ const emit = defineEmits<{

 const router = useRouter();

-const formState = reactive({
-  code: '',
-  phoneNumber: '',
-  requirePhoneNumber: false,
-  submitted: false,
-});
+const [Form, { validate }] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);

-const countdown = ref(0);
-const timer = ref<ReturnType<typeof setTimeout>>();
+async function handleSubmit() {
+  const { valid, values } = await validate();

-const isValidPhoneNumber = computed(() => {
-  return /^1[3-9]\d{9}$/.test(formState.phoneNumber);
-});
-
-const btnText = computed(() => {
-  return countdown.value > 0
-    ? $t('authentication.sendText', [countdown.value])
-    : $t('authentication.sendCode');
-});
-const btnLoading = computed(() => {
-  return countdown.value > 0;
-});
-
-const phoneNumberStatus = computed(() => {
-  return (formState.submitted || formState.requirePhoneNumber) &&
-    !isValidPhoneNumber.value
-    ? 'error'
-    : 'default';
-});
-
-const codeStatus = computed(() => {
-  return formState.submitted && !formState.code ? 'error' : 'default';
-});
-
-function handleSubmit() {
-  formState.submitted = true;
-  if (phoneNumberStatus.value !== 'default' || codeStatus.value !== 'default') {
-    return;
+  if (valid) {
+    emit('submit', {
+      code: values?.code,
+      phoneNumber: values?.phoneNumber,
+    });
  }
-
-  emit('submit', {
-    code: formState.code,
-    phoneNumber: formState.phoneNumber,
-  });
 }

 function goToLogin() {
  router.push(props.loginPath);
 }
-
-async function handleSendCode() {
-  if (btnLoading.value) {
-    return;
-  }
-  if (!isValidPhoneNumber.value) {
-    formState.requirePhoneNumber = true;
-    return;
-  }
-  countdown.value = 60;
-  // TODO: 调用发送验证码接口
-  startCountdown();
-}
-
-function startCountdown() {
-  if (countdown.value > 0) {
-    timer.value = setTimeout(() => {
-      countdown.value--;
-      startCountdown();
-    }, 1000);
-  }
-}
-
-onBeforeUnmount(() => {
-  countdown.value = 0;
-  clearTimeout(timer.value);
-});
 </script>

 <template>
@@ -123,31 +76,8 @@ onBeforeUnmount(() => {
        </span>
      </template>
    </Title>
-    <VbenInput
-      v-model="formState.phoneNumber"
-      :autofocus="true"
-      :error-tip="$t('authentication.mobile-tip')"
-      :label="$t('authentication.mobile')"
-      :placeholder="$t('authentication.mobile')"
-      :status="phoneNumberStatus"
-      name="phoneNumber"
-      type="number"
-      @keyup.enter="handleSubmit"
-    />
-    <VbenPinInput
-      v-model="formState.code"
-      :btn-loading="btnLoading"
-      :btn-text="btnText"
-      :code-length="4"
-      :error-tip="$t('authentication.codeTip')"
-      :handle-send-code="handleSendCode"
-      :label="$t('authentication.code')"
-      :placeholder="$t('authentication.code')"
-      :status="codeStatus"
-      name="password"
-      @keyup.enter="handleSubmit"
-    />
-    <VbenButton :loading="loading" class="mt-2 w-full" @click="handleSubmit">
+    <Form />
+    <VbenButton :loading="loading" class="w-full" @click="handleSubmit">
      {{ $t('common.login') }}
    </VbenButton>
    <VbenButton class="mt-4 w-full" variant="outline" @click="goToLogin()">
--- a/packages/effects/common-ui/src/ui/authentication/forget-password.vue
+++ b/packages/effects/common-ui/src/ui/authentication/forget-password.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
+import type { VbenFormSchema } from '@vben-core/form-ui';
+
 import { computed, reactive } from 'vue';
 import { useRouter } from 'vue-router';

 import { $t } from '@vben/locales';
-import { VbenButton, VbenInput } from '@vben-core/shadcn-ui';
+import { useVbenForm } from '@vben-core/form-ui';
+import { VbenButton } from '@vben-core/shadcn-ui';

 import Title from './auth-title.vue';

@@ -16,10 +19,12 @@ interface Props {
   * @zh_CN 登陆路径
   */
  loginPath?: string;
+
+  formSchema: VbenFormSchema[];
 }

 defineOptions({
-  name: 'AuthenticationForgetPassword',
+  name: 'ForgetPassword',
 });

 const props = withDefaults(defineProps<Props>(), {
@@ -31,22 +36,25 @@ const emit = defineEmits<{
  submit: [string];
 }>();

+const [Form, { validate }] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);
+
 const router = useRouter();
-const formState = reactive({
-  email: '',
-  submitted: false,
-});

-const emailStatus = computed(() => {
-  return formState.submitted && !formState.email ? 'error' : 'default';
-});
+async function handleSubmit() {
+  const { valid, values } = await validate();

-function handleSubmit() {
-  formState.submitted = true;
-  if (emailStatus.value !== 'default') {
-    return;
+  if (valid) {
+    emit('submit', values?.email);
  }
-  emit('submit', formState.email);
 }

 function goToLogin() {
@@ -62,18 +70,8 @@ function goToLogin() {
        {{ $t('authentication.forgetPasswordSubtitle') }}
      </template>
    </Title>
-    <div class="mb-6">
-      <VbenInput
-        v-model="formState.email"
-        :error-tip="$t('authentication.emailTip')"
-        :label="$t('authentication.email')"
-        :status="emailStatus"
-        autofocus
-        name="email"
-        placeholder="example@example.com"
-        type="text"
-      />
-    </div>
+    <Form />
+
    <div>
      <VbenButton class="mt-2 w-full" @click="handleSubmit">
        {{ $t('authentication.sendResetLink') }}
--- a/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
+++ b/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import type { AuthenticationProps, LoginAndRegisterParams } from './types';
+import type { AuthenticationProps } from './types';

 import { watch } from 'vue';

-import { useForwardPropsEmits } from '@vben/hooks';
 import { useVbenModal } from '@vben-core/popup-ui';
-import { VbenAvatar } from '@vben-core/shadcn-ui';
-
-import AuthenticationLogin from './login.vue';
+import { Slot, VbenAvatar } from '@vben-core/shadcn-ui';

 interface Props extends AuthenticationProps {
  avatar?: string;
@@ -17,18 +14,12 @@ defineOptions({
  name: 'LoginExpiredModal',
 });

-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
  avatar: '',
 });

-const emit = defineEmits<{
-  submit: [LoginAndRegisterParams];
-}>();
-
 const open = defineModel<boolean>('open');

-const forwarded = useForwardPropsEmits(props, emit);
-
 const [Modal, modalApi] = useVbenModal();

 watch(
@@ -51,14 +42,15 @@ watch(
      class="border-none px-10 py-6 text-center shadow-xl sm:w-[600px] sm:rounded-2xl md:h-[unset]"
    >
      <VbenAvatar :src="avatar" class="mx-auto mb-6 size-20" />
-      <AuthenticationLogin
-        v-bind="forwarded"
+      <Slot
        :show-forget-password="false"
        :show-register="false"
        :show-remember-me="false"
        :sub-title="$t('authentication.loginAgainSubTitle')"
        :title="$t('authentication.loginAgainTitle')"
-      />
+      >
+        <slot> </slot>
+      </Slot>
    </Modal>
  </div>
 </template>
--- a/packages/effects/common-ui/src/ui/authentication/login.vue
+++ b/packages/effects/common-ui/src/ui/authentication/login.vue
@@ -1,31 +1,31 @@
 <script setup lang="ts">
+import type { VbenFormSchema } from '@vben-core/form-ui';
+
 import type { AuthenticationProps, LoginEmits } from './types';

-import { computed, reactive } from 'vue';
+import { computed, onMounted, reactive, ref } from 'vue';
 import { useRouter } from 'vue-router';

 import { $t } from '@vben/locales';
-import {
-  VbenButton,
-  VbenCheckbox,
-  VbenInput,
-  VbenInputPassword,
-} from '@vben-core/shadcn-ui';
+import { useVbenForm } from '@vben-core/form-ui';
+import { VbenButton, VbenCheckbox } from '@vben-core/shadcn-ui';

 import Title from './auth-title.vue';
 import ThirdPartyLogin from './third-party-login.vue';

-interface Props extends AuthenticationProps {}
+interface Props extends AuthenticationProps {
+  formSchema: VbenFormSchema[];
+}

 defineOptions({
  name: 'AuthenticationLogin',
 });

-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
  codeLoginPath: '/auth/code-login',
  forgetPasswordPath: '/auth/forget-password',
+  formSchema: () => [],
  loading: false,
-  passwordPlaceholder: '',
  qrCodeLoginPath: '/auth/qrcode-login',
  registerPath: '/auth/register',
  showCodeLogin: true,
@@ -36,58 +36,50 @@ withDefaults(defineProps<Props>(), {
  showThirdPartyLogin: true,
  subTitle: '',
  title: '',
-  usernamePlaceholder: '',
 });

 const emit = defineEmits<{
  submit: LoginEmits['submit'];
 }>();

+const [Form, { setFieldValue, validate }] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);
 const router = useRouter();

 const REMEMBER_ME_KEY = `REMEMBER_ME_USERNAME_${location.hostname}`;

 const localUsername = localStorage.getItem(REMEMBER_ME_KEY) || '';

-const formState = reactive({
-  password: '',
-  rememberMe: !!localUsername,
-  submitted: false,
-  username: localUsername,
-});
+const rememberMe = ref(!!localUsername);

-const usernameStatus = computed(() => {
-  return formState.submitted && !formState.username ? 'error' : 'default';
-});
-
-const passwordStatus = computed(() => {
-  return formState.submitted && !formState.password ? 'error' : 'default';
-});
-
-function handleSubmit() {
-  formState.submitted = true;
-
-  if (
-    usernameStatus.value !== 'default' ||
-    passwordStatus.value !== 'default'
-  ) {
-    return;
+async function handleSubmit() {
+  const { valid, values } = await validate();
+  if (valid) {
+    localStorage.setItem(
+      REMEMBER_ME_KEY,
+      rememberMe.value ? values?.username : '',
+    );
+    emit('submit', values as { password: string; username: string });
  }
-
-  localStorage.setItem(
-    REMEMBER_ME_KEY,
-    formState.rememberMe ? formState.username : '',
-  );
-
-  emit('submit', {
-    password: formState.password,
-    username: formState.username,
-  });
 }

 function handleGo(path: string) {
  router.push(path);
 }
+
+onMounted(() => {
+  if (localUsername) {
+    setFieldValue('username', localUsername);
+  }
+});
 </script>

 <template>
@@ -103,34 +95,14 @@ function handleGo(path: string) {
      </Title>
    </slot>

-    <VbenInput
-      v-model="formState.username"
-      :autofocus="false"
-      :error-tip="$t('authentication.usernameTip')"
-      :label="$t('authentication.username')"
-      :placeholder="usernamePlaceholder || $t('authentication.username')"
-      :status="usernameStatus"
-      name="username"
-      required
-      type="text"
-    />
-    <VbenInputPassword
-      v-model="formState.password"
-      :error-tip="$t('authentication.passwordTip')"
-      :label="$t('authentication.password')"
-      :placeholder="passwordPlaceholder || $t('authentication.password')"
-      :status="passwordStatus"
-      name="password"
-      required
-      type="password"
-    />
+    <Form />

    <div
      v-if="showRememberMe || showForgetPassword"
-      class="mb-6 mt-4 flex justify-between"
+      class="mb-6 flex justify-between"
    >
      <div v-if="showRememberMe" class="flex-center">
-        <VbenCheckbox v-model:checked="formState.rememberMe" name="rememberMe">
+        <VbenCheckbox v-model:checked="rememberMe" name="rememberMe">
          {{ $t('authentication.rememberMe') }}
        </VbenCheckbox>
      </div>
--- a/packages/effects/common-ui/src/ui/authentication/register.vue
+++ b/packages/effects/common-ui/src/ui/authentication/register.vue
@@ -1,20 +1,19 @@
 <script setup lang="ts">
+import type { VbenFormSchema } from '@vben-core/form-ui';
+
 import type { RegisterEmits } from './types';

 import { computed, reactive } from 'vue';
 import { useRouter } from 'vue-router';

 import { $t } from '@vben/locales';
-import {
-  VbenButton,
-  VbenCheckbox,
-  VbenInput,
-  VbenInputPassword,
-} from '@vben-core/shadcn-ui';
+import { useVbenForm } from '@vben-core/form-ui';
+import { VbenButton } from '@vben-core/shadcn-ui';

 import Title from './auth-title.vue';

 interface Props {
+  formSchema: VbenFormSchema[];
  /**
   * @zh_CN 是否处于加载处理状态
   */
@@ -30,6 +29,7 @@ defineOptions({
 });

 const props = withDefaults(defineProps<Props>(), {
+  formSchema: () => [],
  loading: false,
  loginPath: '/auth/login',
 });
@@ -38,43 +38,24 @@ const emit = defineEmits<{
  submit: RegisterEmits['submit'];
 }>();

+const [Form, { validate }] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);
+
 const router = useRouter();

-const formState = reactive({
-  agreePolicy: false,
-  confirmPassword: '',
-  password: '',
-  submitted: false,
-  username: '',
-});
-
-const usernameStatus = computed(() => {
-  return formState.submitted && !formState.username ? 'error' : 'default';
-});
-
-const passwordStatus = computed(() => {
-  return formState.submitted && !formState.password ? 'error' : 'default';
-});
-
-const confirmPasswordStatus = computed(() => {
-  return formState.submitted && formState.password !== formState.confirmPassword
-    ? 'error'
-    : 'default';
-});
-
-function handleSubmit() {
-  formState.submitted = true;
-  if (
-    usernameStatus.value !== 'default' ||
-    passwordStatus.value !== 'default'
-  ) {
-    return;
+async function handleSubmit() {
+  const { valid, values } = await validate();
+  if (valid) {
+    emit('submit', values as { password: string; username: string });
  }
-
-  emit('submit', {
-    password: formState.password,
-    username: formState.username,
-  });
 }

 function goToLogin() {
@@ -88,73 +69,11 @@ function goToLogin() {
      {{ $t('authentication.createAnAccount') }} 🚀
      <template #desc> {{ $t('authentication.signUpSubtitle') }} </template>
    </Title>
-    <VbenInput
-      v-model="formState.username"
-      :error-tip="$t('authentication.usernameTip')"
-      :label="$t('authentication.username')"
-      :placeholder="$t('authentication.username')"
-      :status="usernameStatus"
-      name="username"
-      type="text"
-    />
-    <!-- Use 8 or more characters with a mix of letters, numbers & symbols. -->
-    <VbenInputPassword
-      v-model="formState.password"
-      :error-tip="$t('authentication.passwordTip')"
-      :label="$t('authentication.password')"
-      :password-strength="true"
-      :placeholder="$t('authentication.password')"
-      :status="passwordStatus"
-      name="password"
-      required
-      type="password"
-    >
-      <template #strengthText>
-        {{ $t('authentication.passwordStrength') }}
-      </template>
-    </VbenInputPassword>
+    <Form />

-    <VbenInputPassword
-      v-model="formState.confirmPassword"
-      :error-tip="$t('authentication.confirmPasswordTip')"
-      :label="$t('authentication.confirmPassword')"
-      :placeholder="$t('authentication.confirmPassword')"
-      :status="confirmPasswordStatus"
-      name="confirmPassword"
-      required
-      type="password"
-    />
-
-    <div class="relative mt-4 flex pb-6">
-      <div class="flex-center">
-        <VbenCheckbox
-          v-model:checked="formState.agreePolicy"
-          name="agreePolicy"
-        >
-          {{ $t('authentication.agree') }}
-          <span class="text-primary hover:text-primary-hover">{{
-            $t('authentication.privacyPolicy')
-          }}</span>
-          &
-          <span class="text-primary hover:text-primary-hover">
-            {{ $t('authentication.terms') }}
-          </span>
-        </VbenCheckbox>
-      </div>
-      <Transition name="slide-up">
-        <p
-          v-show="formState.submitted && !formState.agreePolicy"
-          class="text-destructive absolute bottom-1 left-0 text-xs"
-        >
-          {{ $t('authentication.agreeTip') }}
-        </p>
-      </Transition>
-    </div>
-    <div>
-      <VbenButton :loading="loading" class="w-full" @click="handleSubmit">
-        {{ $t('authentication.signUp') }}
-      </VbenButton>
-    </div>
+    <VbenButton :loading="loading" class="mt-2 w-full" @click="handleSubmit">
+      {{ $t('authentication.signUp') }}
+    </VbenButton>
    <div class="mt-4 text-center text-sm">
      {{ $t('authentication.alreadyHaveAccount') }}
      <span
--- a/packages/effects/common-ui/src/ui/authentication/types.ts
+++ b/packages/effects/common-ui/src/ui/authentication/types.ts
@@ -13,11 +13,6 @@ interface AuthenticationProps {
   */
  loading?: boolean;

-  /**
-   * @zh_CN 密码占位符
-   */
-  passwordPlaceholder?: string;
-
  /**
   * @zh_CN 二维码登录路径
   */
@@ -66,11 +61,6 @@ interface AuthenticationProps {
   * @zh_CN 登录框标题
   */
  title?: string;
-
-  /**
-   * @zh_CN 用户名占位符
-   */
-  usernamePlaceholder?: string;
 }

 interface LoginAndRegisterParams {
--- a/packages/effects/layouts/package.json
+++ b/packages/effects/layouts/package.json
@@ -20,6 +20,7 @@
    }
  },
  "dependencies": {
+    "@vben-core/form-ui": "workspace:*",
    "@vben-core/layout-ui": "workspace:*",
    "@vben-core/menu-ui": "workspace:*",
    "@vben-core/popup-ui": "workspace:*",
--- a/packages/effects/layouts/src/basic/header/header.vue
+++ b/packages/effects/layouts/src/basic/header/header.vue
@@ -130,18 +130,18 @@ function clearPreferencesAndLogout() {

        <template v-else-if="slot.name === 'preferences'">
          <PreferencesButton
-            class="mr-2"
+            class="mr-1"
            @clear-preferences-and-logout="clearPreferencesAndLogout"
          />
        </template>
        <template v-else-if="slot.name === 'theme-toggle'">
-          <ThemeToggle class="mr-2 mt-[2px]" />
+          <ThemeToggle class="mr-1 mt-[2px]" />
        </template>
        <template v-else-if="slot.name === 'language-toggle'">
-          <LanguageToggle class="mr-2" />
+          <LanguageToggle class="mr-1" />
        </template>
        <template v-else-if="slot.name === 'fullscreen'">
-          <VbenFullScreen class="mr-2" />
+          <VbenFullScreen class="mr-1" />
        </template>
      </slot>
    </template>
--- a/packages/effects/layouts/src/widgets/global-search/global-search.vue
+++ b/packages/effects/layouts/src/widgets/global-search/global-search.vue
@@ -60,7 +60,7 @@ whenever(open, () => {
 });

 const preventDefaultBrowserSearchHotKey = (event: KeyboardEvent) => {
-  if (event.key.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey)) {
+  if (event.key?.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey)) {
    event.preventDefault();
  }
 };
--- a/packages/effects/layouts/src/widgets/global-search/search-panel.vue
+++ b/packages/effects/layouts/src/widgets/global-search/search-panel.vue
@@ -8,7 +8,7 @@ import { SearchX, X } from '@vben/icons';
 import { $t } from '@vben/locales';
 import { mapTree, traverseTreeValues, uniqueByField } from '@vben/utils';
 import { VbenIcon, VbenScrollbar } from '@vben-core/shadcn-ui';
-import { isHttpUrl } from '@vben-core/shared';
+import { isHttpUrl } from '@vben-core/shared/utils';

 import { onKeyStroke, useLocalStorage, useThrottleFn } from '@vueuse/core';

--- a/packages/effects/layouts/src/widgets/language-toggle.vue
+++ b/packages/effects/layouts/src/widgets/language-toggle.vue
@@ -30,7 +30,7 @@ async function handleUpdate(value: string) {
      @update:model-value="handleUpdate"
    >
      <VbenIconButton>
-        <Languages class="size-4" />
+        <Languages class="text-foreground size-4" />
      </VbenIconButton>
    </VbenDropdownRadioMenu>
  </div>
--- a/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
+++ b/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue';

+import { $t } from '@vben/locales';
+import { useVbenForm, z } from '@vben-core/form-ui';
 import { useVbenModal } from '@vben-core/popup-ui';
-import {
-  VbenAvatar,
-  VbenButton,
-  VbenInputPassword,
-} from '@vben-core/shadcn-ui';
+import { VbenAvatar, VbenButton } from '@vben-core/shadcn-ui';

 interface Props {
  avatar?: string;
@@ -34,10 +32,29 @@ const emit = defineEmits<{
  submit: RegisterEmits['submit'];
 }>();

-const formState = reactive({
-  lockScreenPassword: '',
-  submitted: false,
-});
+const [Form, { resetForm, validate }] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => [
+      {
+        component: 'VbenInputPassword' as const,
+        componentProps: {
+          placeholder: $t('widgets.lockScreen.placeholder'),
+        },
+        fieldName: 'lockScreenPassword',
+        formFieldProps: { validateOnBlur: false },
+        label: $t('authentication.password'),
+        rules: z
+          .string()
+          .min(1, { message: $t('widgets.lockScreen.placeholder') }),
+      },
+    ]),
+    showDefaultActions: false,
+  }),
+);

 const [Modal] = useVbenModal({
  onConfirm() {
@@ -45,27 +62,16 @@ const [Modal] = useVbenModal({
  },
  onOpenChange(isOpen) {
    if (isOpen) {
-      // reset value reopen
-      formState.submitted = false;
-      formState.lockScreenPassword = '';
+      resetForm();
    }
  },
 });

-const passwordStatus = computed(() => {
-  return formState.submitted && !formState.lockScreenPassword
-    ? 'error'
-    : 'default';
-});
-
-function handleSubmit() {
-  formState.submitted = true;
-  if (passwordStatus.value !== 'default') {
-    return;
+async function handleSubmit() {
+  const { valid, values } = await validate();
+  if (valid) {
+    emit('submit', values?.lockScreenPassword);
  }
-  emit('submit', {
-    lockScreenPassword: formState.lockScreenPassword,
-  });
 }
 </script>

@@ -90,17 +96,8 @@ function handleSubmit() {
            {{ text }}
          </div>
        </div>
-        <VbenInputPassword
-          v-model="formState.lockScreenPassword"
-          :error-tip="$t('widgets.lockScreen.placeholder')"
-          :label="$t('widgets.lockScreen.password')"
-          :placeholder="$t('widgets.lockScreen.placeholder')"
-          :status="passwordStatus"
-          name="password"
-          required
-          type="password"
-        />
-        <VbenButton class="w-full" @click="handleSubmit">
+        <Form />
+        <VbenButton class="mt-1 w-full" @click="handleSubmit">
          {{ $t('widgets.lockScreen.screenButton') }}
        </VbenButton>
      </div>
--- a/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
+++ b/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
@@ -4,11 +4,8 @@ import { computed, reactive, ref } from 'vue';
 import { LockKeyhole } from '@vben/icons';
 import { $t, useI18n } from '@vben/locales';
 import { storeToRefs, useLockStore } from '@vben/stores';
-import {
-  VbenAvatar,
-  VbenButton,
-  VbenInputPassword,
-} from '@vben-core/shadcn-ui';
+import { useVbenForm, z } from '@vben-core/form-ui';
+import { VbenAvatar, VbenButton } from '@vben-core/shadcn-ui';

 import { useDateFormat, useNow } from '@vueuse/core';

@@ -38,36 +35,40 @@ const date = useDateFormat(now, 'YYYY-MM-DD dddd', { locales: locale.value });
 const showUnlockForm = ref(false);
 const { lockScreenPassword } = storeToRefs(lockStore);

-const formState = reactive({
-  password: '',
-  submitted: false,
-});
-
-const validPass = computed(
-  () => lockScreenPassword?.value === formState.password,
+const [Form, { form, validate }] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: computed(() => [
+      {
+        component: 'VbenInputPassword' as const,
+        componentProps: {
+          placeholder: $t('widgets.lockScreen.placeholder'),
+        },
+        fieldName: 'password',
+        label: $t('authentication.password'),
+        rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+      },
+    ]),
+    showDefaultActions: false,
+  }),
 );

-const passwordStatus = computed(() => {
-  if (formState.submitted && !validPass.value) {
-    return 'error';
+const validPass = computed(
+  () => lockScreenPassword?.value === form?.values?.password,
+);
+
+async function handleSubmit() {
+  const { valid } = await validate();
+  if (valid) {
+    if (validPass.value) {
+      lockStore.unlockScreen();
+    } else {
+      form.setFieldError('password', $t('authentication.passwordErrorTip'));
+    }
  }
-  return 'default';
-});
-
-const errorTip = computed(() => {
-  return lockScreenPassword?.value === undefined || !formState.password
-    ? $t('widgets.lockScreen.placeholder')
-    : $t('widgets.lockScreen.errorPasswordTip');
-});
-
-function handleSubmit() {
-  formState.submitted = true;
-
-  if (!validPass.value) {
-    return;
-  }
-
-  lockStore.unlockScreen();
 }

 function toggleUnlockForm() {
@@ -114,18 +115,9 @@ function toggleUnlockForm() {
      >
        <div class="flex-col-center mb-10 w-[300px]">
          <VbenAvatar :src="avatar" class="enter-x mb-6 size-20" />
+
          <div class="enter-x mb-2 w-full items-center">
-            <VbenInputPassword
-              v-model="formState.password"
-              :autofocus="true"
-              :error-tip="errorTip"
-              :label="$t('widgets.lockScreen.password')"
-              :placeholder="$t('widgets.lockScreen.placeholder')"
-              :status="passwordStatus"
-              name="password"
-              required
-              type="password"
-            />
+            <Form />
          </div>
          <VbenButton class="enter-x w-full" @click="handleSubmit">
            {{ $t('widgets.lockScreen.entry') }}
--- a/packages/effects/layouts/src/widgets/notification/notification.vue
+++ b/packages/effects/layouts/src/widgets/notification/notification.vue
@@ -67,7 +67,7 @@ function handleClick(item: NotificationItem) {
  >
    <template #trigger>
      <div class="flex-center mr-2 h-full" @click.stop="toggle()">
-        <VbenIconButton class="bell-button relative">
+        <VbenIconButton class="bell-button text-foreground relative">
          <span
            v-if="dot"
            class="bg-primary absolute right-0.5 top-0.5 h-2 w-2 rounded"
--- a/packages/effects/layouts/src/widgets/preferences/preferences-button.vue
+++ b/packages/effects/layouts/src/widgets/preferences/preferences-button.vue
@@ -13,7 +13,7 @@ function clearPreferencesAndLogout() {
 <template>
  <Preferences @clear-preferences-and-logout="clearPreferencesAndLogout">
    <VbenIconButton>
-      <Settings class="size-4" />
+      <Settings class="text-foreground size-4" />
    </VbenIconButton>
  </Preferences>
 </template>
--- a/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
+++ b/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
@@ -156,7 +156,7 @@ const {
  isSideMode,
  isSideNav,
 } = usePreferences();
-const { copy } = useClipboard();
+const { copy } = useClipboard({ legacy: true });

 const [Drawer] = useVbenDrawer();

--- a/packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue
+++ b/packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue
@@ -130,18 +130,18 @@ function toggleTheme(event: MouseEvent) {
  }

  &__sun {
-    @apply fill-foreground/70 stroke-none;
+    @apply fill-foreground/90 stroke-none;

    transition: transform 1.6s cubic-bezier(0.25, 0, 0.2, 1);
    transform-origin: center center;

    &:hover > svg > & {
-      @apply fill-foreground/70;
+      @apply fill-foreground/90;
    }
  }

  &__sun-beams {
-    @apply stroke-foreground/70 stroke-[2px];
+    @apply stroke-foreground/90 stroke-[2px];

    transition:
      transform 1.6s cubic-bezier(0.5, 1.5, 0.75, 1.25),
--- a/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
+++ b/packages/effects/layouts/src/widgets/user-dropdown/user-dropdown.vue
@@ -102,11 +102,7 @@ function handleOpenLock() {
  lockModalApi.open();
 }

-function handleSubmitLock({
-  lockScreenPassword,
-}: {
-  lockScreenPassword: string;
-}) {
+function handleSubmitLock(lockScreenPassword: string) {
  lockModalApi.close();
  lockStore.lockScreen(lockScreenPassword);
 }
--- a/packages/effects/request/src/request-client/request-client.ts
+++ b/packages/effects/request/src/request-client/request-client.ts
@@ -5,7 +5,7 @@ import type {
  CreateAxiosDefaults,
 } from 'axios';

-import { merge } from '@vben/utils';
+import { bindMethods, merge } from '@vben/utils';

 import axios from 'axios';

@@ -44,7 +44,7 @@ class RequestClient {
    const requestConfig = merge(axiosConfig, defaultConfig);
    this.instance = axios.create(requestConfig);

-    this.bindMethods();
+    bindMethods(this);

    // 实例化拦截器管理器
    const interceptorManager = new InterceptorManager(this.instance);
@@ -61,21 +61,6 @@ class RequestClient {
    this.download = fileDownloader.download.bind(fileDownloader);
  }

-  private bindMethods() {
-    const propertyNames = Object.getOwnPropertyNames(
-      Object.getPrototypeOf(this),
-    );
-    propertyNames.forEach((propertyName) => {
-      const propertyValue = (this as any)[propertyName];
-      if (
-        typeof propertyValue === 'function' &&
-        propertyName !== 'constructor'
-      ) {
-        (this as any)[propertyName] = propertyValue.bind(this);
-      }
-    });
-  }
-
  /**
   * DELETE请求方法
   */