feat: login dialog (#37)

* chore: login-dialog demo

* Merge branch 'main' into login-dialog

* chore: update dialog

* Merge branch 'main' into login-dialog

* chore: accept login params

* chore: redirect to login or show login dialog

packages/@core/ui-kit/layout-ui/src/vben-layout.vue

@@ -565,6 +565,7 @@ function handleOpenMenu() {
         <slot name="footer"></slot>
       </LayoutFooter>
     </div>
+    <slot name="extra"></slot>
     <div
       v-if="maskVisible"
       :style="maskStyle"

packages/business/layouts/package.json

@@ -48,6 +48,7 @@
     "@vben-core/stores": "workspace:*",
     "@vben-core/tabs-ui": "workspace:*",
     "@vben-core/toolkit": "workspace:*",
+    "@vben/universal-ui": "workspace:*",
     "@vueuse/core": "^10.11.0",
     "vue": "^3.4.31",
     "vue-router": "^4.4.0"

packages/business/layouts/src/basic/layout.vue

@@ -277,5 +277,9 @@ function clearPreferencesAndLogout() {
         />
       </LayoutFooter>
     </template>
+
+    <template #extra>
+      <slot name="dialog"></slot>
+    </template>
   </VbenAdminLayout>
 </template>

packages/business/layouts/src/widgets/index.ts

@@ -4,6 +4,7 @@ export { default as CozeAssistant } from './coze-assistant.vue';
 export * from './global-search';
 export { default as LanguageToggle } from './language-toggle.vue';
 export { default as AuthenticationLayoutToggle } from './layout-toggle.vue';
+export * from './login-dialog';
 export * from './notification';
 export * from './preferences';
 export * from './theme-toggle';

packages/business/layouts/src/widgets/login-dialog/index.ts

@@ -0,0 +1 @@
+export { default as LoginDialog } from './login-dialog.vue';

packages/business/layouts/src/widgets/login-dialog/login-dialog.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import {
+  AuthenticationLogin,
+  AuthenticationProps,
+  LoginAndRegisterParams,
+} from '@vben/universal-ui';
+import { Dialog, DialogContent } from '@vben-core/shadcn-ui';
+
+interface Props extends AuthenticationProps {
+  open: boolean;
+}
+
+defineOptions({
+  name: 'LoginDialog',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  open: false,
+});
+
+const emit = defineEmits<{
+  login: [LoginAndRegisterParams];
+}>();
+
+const loginProps = computed(() => {
+  const { open: _, ...rest } = props;
+  return rest;
+});
+</script>
+
+<template>
+  <div>
+    <Dialog :open="open" class="flex items-center justify-center">
+      <DialogContent
+        class="top-[50%] w-full translate-y-[-50%] border-none p-0 shadow-xl sm:w-[600px] sm:rounded-2xl"
+      >
+        <div class="p-4">
+          <AuthenticationLogin
+            v-bind="loginProps"
+            @submit="(e) => emit('login', e)"
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  </div>
+</template>

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

@@ -3,4 +3,8 @@ export { default as AuthenticationForgetPassword } from './forget-password.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 type {
+  AuthenticationProps,
+  LoginAndRegisterParams,
+  LoginCodeParams,
+} from './typings';

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

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { LoginEmits } from './typings';
-
 import { computed, reactive } from 'vue';
 import { useRouter } from 'vue-router';
 
@@ -14,68 +12,9 @@ import {
 
 import Title from './auth-title.vue';
 import ThirdPartyLogin from './third-party-login.vue';
+import { AuthenticationProps, 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;
-}
+interface Props extends AuthenticationProps {}
 
 defineOptions({
   name: 'AuthenticationLogin',

packages/business/universal-ui/src/authentication/typings.ts

@@ -1,3 +1,65 @@
+interface AuthenticationProps {
+  /**
+   * @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;
+}
+
 interface LoginAndRegisterParams {
   password: string;
   username: string;
@@ -21,6 +83,7 @@ interface RegisterEmits {
 }
 
 export type {
+  AuthenticationProps,
   LoginAndRegisterParams,
   LoginCodeEmits,
   LoginCodeParams,