feat: new interface button parameters, control function display

apps/antd-view/src/apis/modules/user.ts

@@ -1,7 +1,7 @@
 import type { UserApiType } from '@/apis/types';
 import type { UserInfo } from '@vben/types';
 
-import { request } from '@/forward/request';
+import { request } from '@/forward';
 
 /**
  * 登录

apps/antd-view/src/forward/index.ts

@@ -0,0 +1 @@
+export * from './request';

apps/antd-view/src/views/_essential/authentication/login.vue

@@ -67,5 +67,10 @@ const loginLoading = computed(() => {
 </script>
 
 <template>
-  <AuthenticationLogin :loading="loginLoading" @submit="handleLogin" />
+  <AuthenticationLogin
+    username-placeholder="vben"
+    password-placeholder="123456"
+    :loading="loginLoading"
+    @submit="handleLogin"
+  />
 </template>

packages/business/common-ui/src/authentication/code-login.vue

@@ -14,14 +14,19 @@ interface Props {
    * @zh_CN 是否处于加载处理状态
    */
   loading?: boolean;
+  /**
+   * @zh_CN 登陆路径
+   */
+  loginPath?: string;
 }
 
 defineOptions({
   name: 'AuthenticationCodeLogin',
 });
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   loading: false,
+  loginPath: '/auth/login',
 });
 
 const emit = defineEmits<{
@@ -76,8 +81,8 @@ function handleSubmit() {
   });
 }
 
-function handleGo(path: string) {
-  router.push(path);
+function goLogin() {
+  router.push(props.loginPath);
 }
 
 async function handleSendCode() {
@@ -145,11 +150,7 @@ onBeforeUnmount(() => {
     <VbenButton :loading="loading" class="mt-2 w-full" @click="handleSubmit">
       {{ $t('common.login') }}
     </VbenButton>
-    <VbenButton
-      class="mt-4 w-full"
-      variant="outline"
-      @click="handleGo('/auth/login')"
-    >
+    <VbenButton class="mt-4 w-full" variant="outline" @click="goLogin()">
       {{ $t('common.back') }}
     </VbenButton>
   </div>

packages/business/common-ui/src/authentication/forget-password.vue

@@ -12,14 +12,19 @@ interface Props {
    * @zh_CN 是否处于加载处理状态
    */
   loading?: boolean;
+  /**
+   * @zh_CN 登陆路径
+   */
+  loginPath?: string;
 }
 
 defineOptions({
   name: 'AuthenticationForgetPassword',
 });
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   loading: false,
+  loginPath: '/auth/login',
 });
 
 const emit = defineEmits<{
@@ -44,8 +49,8 @@ function handleSubmut() {
   emit('submit', formState.email);
 }
 
-function handleGo(path: string) {
-  router.push(path);
+function goLogin() {
+  router.push(props.loginPath);
 }
 </script>
 
@@ -73,11 +78,7 @@ function handleGo(path: string) {
       <VbenButton class="mt-2 w-full" @click="handleSubmut">
         {{ $t('authentication.send-reset-link') }}
       </VbenButton>
-      <VbenButton
-        class="mt-4 w-full"
-        variant="outline"
-        @click="handleGo('/auth/login')"
-      >
+      <VbenButton class="mt-4 w-full" variant="outline" @click="goLogin()">
         {{ $t('common.back') }}
       </VbenButton>
     </div>

packages/business/common-ui/src/authentication/index.ts

@@ -1,8 +1,8 @@
 export { default as AuthenticationCodeLogin } from './code-login.vue';
-export { default as AuthenticationColorToggle } from './color-toggle.vue';
 export { default as AuthenticationForgetPassword } from './forget-password.vue';
-export { default as AuthenticationLayoutToggle } from './layout-toggle.vue';
 export { default as AuthenticationLogin } from './login.vue';
 export { default as AuthenticationQrCodeLogin } from './qrcode-login.vue';
 export { default as AuthenticationRegister } from './register.vue';
 export type { LoginAndRegisterParams, LoginCodeParams } from './typings';
+export { default as AuthenticationColorToggle } from './widgets/color-toggle.vue';
+export { default as AuthenticationLayoutToggle } from './widgets/layout-toggle.vue';

packages/business/common-ui/src/authentication/login.vue

@@ -16,10 +16,65 @@ import ThirdPartyLogin from './third-party-login.vue';
 import type { LoginEmits } from './typings';
 
 interface Props {
+  /**
+   * @zh_CN 验证码登录路径
+   */
+  codeLoginPath?: string;
+
+  /**
+   * @zh_CN 忘记密码路径
+   */
+  forgetPasswordPath?: string;
+
   /**
    * @zh_CN 是否处于加载处理状态
    */
   loading?: boolean;
+
+  /**
+   * @zh_CN 密码占位符
+   */
+  passwordPlaceholder?: string;
+
+  /**
+   * @zh_CN 二维码登录路径
+   */
+  qrCodeLoginPath?: string;
+
+  /**
+   * @zh_CN 注册路径
+   */
+  registerPath?: string;
+
+  /**
+   * @zh_CN 是否显示验证码登录
+   */
+  showCodeLogin?: boolean;
+
+  /**
+   * @zh_CN 是否显示忘记密码
+   */
+  showForgetPassword?: boolean;
+
+  /**
+   * @zh_CN 是否显示二维码登录
+   */
+  showQrcodeLogin?: boolean;
+
+  /**
+   * @zh_CN 是否显示注册按钮
+   */
+  showRegister?: boolean;
+
+  /**
+   * @zh_CN 是否显示第三方登录
+   */
+  showThirdPartyLogin?: boolean;
+
+  /**
+   * @zh_CN 用户名占位符
+   */
+  usernamePlaceholder?: string;
 }
 
 defineOptions({
@@ -27,7 +82,18 @@ defineOptions({
 });
 
 withDefaults(defineProps<Props>(), {
+  codeLoginPath: '/auth/code-login',
+  forgetPasswordPath: '/auth/forget-password',
   loading: false,
+  passwordPlaceholder: '',
+  qrCodeLoginPath: '/auth/qrcode-login',
+  registerPath: '/auth/register',
+  showCodeLogin: true,
+  showForgetPassword: true,
+  showQrcodeLogin: true,
+  showRegister: true,
+  showThirdPartyLogin: true,
+  usernamePlaceholder: '',
 });
 
 const emit = defineEmits<{
@@ -39,6 +105,7 @@ const router = useRouter();
 const REMEMBER_ME_KEY = 'REMEMBER_ME_USERNAME';
 
 const localUsername = localStorage.getItem(REMEMBER_ME_KEY) || '';
+
 const formState = reactive({
   password: '',
   rememberMe: !!localUsername,
@@ -81,7 +148,7 @@ function handleGo(path: string) {
 </script>
 
 <template>
-  <div @keypress.enter="handleSubmit">
+  <div @keypress.enter.prevent="handleSubmit">
     <Title>
       {{ $t('authentication.welcome-back') }} 👋🏻
       <template #desc>
@@ -97,7 +164,7 @@ function handleGo(path: string) {
       :error-tip="$t('authentication.username-tip')"
       :label="$t('authentication.username')"
       name="username"
-      :placeholder="$t('authentication.username')"
+      :placeholder="usernamePlaceholder || $t('authentication.username')"
       type="text"
       required
       :autofocus="false"
@@ -108,7 +175,7 @@ function handleGo(path: string) {
       :error-tip="$t('authentication.password-tip')"
       :label="$t('authentication.password')"
       name="password"
-      :placeholder="$t('authentication.password')"
+      :placeholder="passwordPlaceholder || $t('authentication.password')"
       required
       type="password"
     />
@@ -121,8 +188,9 @@ function handleGo(path: string) {
       </div>
 
       <span
+        v-if="showForgetPassword"
         class="text-primary hover:text-primary/80 cursor-pointer text-sm font-normal"
-        @click="handleGo('/auth/forget-password')"
+        @click="handleGo(forgetPasswordPath)"
       >
         {{ $t('authentication.forget-password') }}
       </span>
@@ -136,16 +204,18 @@ function handleGo(path: string) {
 
     <div class="mb-2 mt-4 flex items-center justify-between">
       <VbenButton
+        v-if="showCodeLogin"
         variant="outline"
         class="w-1/2"
-        @click="handleGo('/auth/code-login')"
+        @click="handleGo(codeLoginPath)"
       >
         {{ $t('authentication.mobile-login') }}
       </VbenButton>
       <VbenButton
+        v-if="showQrcodeLogin"
         variant="outline"
         class="ml-4 w-1/2"
-        @click="handleGo('/auth/qrcode-login')"
+        @click="handleGo(qrCodeLoginPath)"
       >
         {{ $t('authentication.qrcode-login') }}
       </VbenButton>
@@ -160,13 +230,13 @@ function handleGo(path: string) {
     </div>
 
     <!-- 第三方登录 -->
-    <ThirdPartyLogin />
+    <ThirdPartyLogin v-if="showThirdPartyLogin" />
 
-    <div class="text-center text-sm">
+    <div v-if="showRegister" class="text-center text-sm">
       {{ $t('authentication.account-tip') }}
       <span
         class="text-primary hover:text-primary/80 cursor-pointer text-sm font-normal"
-        @click="handleGo('/auth/register')"
+        @click="handleGo(registerPath)"
       >
         {{ $t('authentication.create-account') }}
       </span>

packages/business/common-ui/src/authentication/qrcode-login.vue

@@ -8,10 +8,26 @@ import { useRouter } from 'vue-router';
 
 import Title from './auth-title.vue';
 
+interface Props {
+  /**
+   * @zh_CN 是否处于加载处理状态
+   */
+  loading?: boolean;
+  /**
+   * @zh_CN 登陆路径
+   */
+  loginPath?: string;
+}
+
 defineOptions({
   name: 'AuthenticationQrCodeLogin',
 });
 
+const props = withDefaults(defineProps<Props>(), {
+  loading: false,
+  loginPath: '/auth/login',
+});
+
 const router = useRouter();
 
 const text = ref('https://vben.vvbin.cn');
@@ -21,8 +37,8 @@ const qrcode = useQRCode(text, {
   margin: 4,
 });
 
-function handleGo(path: string) {
-  router.push(path);
+function goLogin() {
+  router.push(props.loginPath);
 }
 </script>
 
@@ -44,11 +60,7 @@ function handleGo(path: string) {
       </p>
     </div>
 
-    <VbenButton
-      class="mt-4 w-full"
-      variant="outline"
-      @click="handleGo('/auth/login')"
-    >
+    <VbenButton class="mt-4 w-full" variant="outline" @click="goLogin()">
       {{ $t('common.back') }}
     </VbenButton>
   </div>

packages/business/common-ui/src/authentication/register.vue

@@ -19,14 +19,19 @@ interface Props {
    * @zh_CN 是否处于加载处理状态
    */
   loading?: boolean;
+  /**
+   * @zh_CN 登陆路径
+   */
+  loginPath?: string;
 }
 
 defineOptions({
   name: 'RegisterForm',
 });
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   loading: false,
+  loginPath: '/auth/login',
 });
 
 const emit = defineEmits<{
@@ -72,8 +77,8 @@ function handleSubmit() {
   });
 }
 
-function handleGo(path: string) {
-  router.push(path);
+function goLogin() {
+  router.push(props.loginPath);
 }
 </script>
 
@@ -154,7 +159,7 @@ function handleGo(path: string) {
       {{ $t('authentication.already-account') }}
       <span
         class="text-primary hover:text-primary/80 cursor-pointer text-sm font-normal"
-        @click="handleGo('/auth/login')"
+        @click="goLogin()"
       >
         {{ $t('authentication.go-login') }}
       </span>