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

2024-09-12 07:47:12 +08:00
parent 14b9553b7e 855ac02622
commit e1a1a23923
22 changed files with 697 additions and 244 deletions
--- a/packages/effects/common-ui/src/ui/authentication/code-login.vue
+++ b/packages/effects/common-ui/src/ui/authentication/code-login.vue
@@ -22,6 +22,18 @@ interface Props {
   * @zh_CN 登陆路径
   */
  loginPath?: string;
+  /**
+   * @zh_CN 标题
+   */
+  title?: string;
+  /**
+   * @zh_CN 描述
+   */
+  subTitle?: string;
+  /**
+   * @zh_CN 按钮文本
+   */
+  submitButtonText?: string;
 }

 defineOptions({
@@ -31,6 +43,9 @@ defineOptions({
 const props = withDefaults(defineProps<Props>(), {
  loading: false,
  loginPath: '/auth/login',
+  submitButtonText: '',
+  subTitle: '',
+  title: '',
 });

 const emit = defineEmits<{
@@ -69,16 +84,22 @@ function goToLogin() {
 <template>
  <div>
    <Title>
-      {{ $t('authentication.welcomeBack') }} 📲
+      <slot name="title">
+        {{ title || $t('authentication.welcomeBack') }} 📲
+      </slot>
      <template #desc>
        <span class="text-muted-foreground">
-          {{ $t('authentication.codeSubtitle') }}
+          <slot name="subTitle">
+            {{ subTitle || $t('authentication.codeSubtitle') }}
+          </slot>
        </span>
      </template>
    </Title>
    <Form />
    <VbenButton :loading="loading" class="w-full" @click="handleSubmit">
-      {{ $t('common.login') }}
+      <slot name="submitButtonText">
+        {{ submitButtonText || $t('common.login') }}
+      </slot>
    </VbenButton>
    <VbenButton class="mt-4 w-full" variant="outline" @click="goToLogin()">
      {{ $t('common.back') }}
--- a/packages/effects/common-ui/src/ui/authentication/forget-password.vue
+++ b/packages/effects/common-ui/src/ui/authentication/forget-password.vue
@@ -11,6 +11,7 @@ import { VbenButton } from '@vben-core/shadcn-ui';
 import Title from './auth-title.vue';

 interface Props {
+  formSchema: VbenFormSchema[];
  /**
   * @zh_CN 是否处于加载处理状态
   */
@@ -19,8 +20,18 @@ interface Props {
   * @zh_CN 登陆路径
   */
  loginPath?: string;
-
-  formSchema: VbenFormSchema[];
+  /**
+   * @zh_CN 标题
+   */
+  title?: string;
+  /**
+   * @zh_CN 描述
+   */
+  subTitle?: string;
+  /**
+   * @zh_CN 按钮文本
+   */
+  submitButtonText?: string;
 }

 defineOptions({
@@ -30,6 +41,9 @@ defineOptions({
 const props = withDefaults(defineProps<Props>(), {
  loading: false,
  loginPath: '/auth/login',
+  submitButtonText: '',
+  subTitle: '',
+  title: '',
 });

 const emit = defineEmits<{
@@ -65,16 +79,22 @@ function goToLogin() {
 <template>
  <div>
    <Title>
-      {{ $t('authentication.forgetPassword') }} 🤦🏻‍♂️
+      <slot name="title">
+        {{ title || $t('authentication.forgetPassword') }} 🤦🏻‍♂️
+      </slot>
      <template #desc>
-        {{ $t('authentication.forgetPasswordSubtitle') }}
+        <slot name="subTitle">
+          {{ subTitle || $t('authentication.forgetPasswordSubtitle') }}
+        </slot>
      </template>
    </Title>
    <Form />

    <div>
      <VbenButton class="mt-2 w-full" @click="handleSubmit">
-        {{ $t('authentication.sendResetLink') }}
+        <slot name="submitButtonText">
+          {{ submitButtonText || $t('authentication.sendResetLink') }}
+        </slot>
      </VbenButton>
      <VbenButton class="mt-4 w-full" variant="outline" @click="goToLogin()">
        {{ $t('common.back') }}
--- a/packages/effects/common-ui/src/ui/authentication/login.vue
+++ b/packages/effects/common-ui/src/ui/authentication/login.vue
@@ -38,6 +38,7 @@ const props = withDefaults(defineProps<Props>(), {
  showRegister: true,
  showRememberMe: true,
  showThirdPartyLogin: true,
+  submitButtonText: '',
  subTitle: '',
  title: '',
 });
@@ -94,10 +95,14 @@ defineExpose({ setFieldValue });
  <div @keydown.enter.prevent="handleSubmit">
    <slot name="title">
      <Title>
-        {{ title || `${$t('authentication.welcomeBack')} 👋🏻` }}
+        <slot name="title">
+          {{ title || `${$t('authentication.welcomeBack')} 👋🏻` }}
+        </slot>
        <template #desc>
          <span class="text-muted-foreground">
-            {{ subTitle || $t('authentication.loginSubtitle') }}
+            <slot name="subTitle">
+              {{ subTitle || $t('authentication.loginSubtitle') }}
+            </slot>
          </span>
        </template>
      </Title>
@@ -109,8 +114,12 @@ defineExpose({ setFieldValue });
      v-if="showRememberMe || showForgetPassword"
      class="mb-6 flex justify-between"
    >
-      <div v-if="showRememberMe" class="flex-center">
-        <VbenCheckbox v-model:checked="rememberMe" name="rememberMe">
+      <div class="flex-center">
+        <VbenCheckbox
+          v-if="showRememberMe"
+          v-model:checked="rememberMe"
+          name="rememberMe"
+        >
          {{ $t('authentication.rememberMe') }}
        </VbenCheckbox>
      </div>
@@ -124,7 +133,7 @@ defineExpose({ setFieldValue });
      </span>
    </div>
    <VbenButton :loading="loading" class="w-full" @click="handleSubmit">
-      {{ $t('common.login') }}
+      {{ submitButtonText || $t('common.login') }}
    </VbenButton>

    <div
--- a/packages/effects/common-ui/src/ui/authentication/qrcode-login.vue
+++ b/packages/effects/common-ui/src/ui/authentication/qrcode-login.vue
@@ -18,6 +18,22 @@ interface Props {
   * @zh_CN 登陆路径
   */
  loginPath?: string;
+  /**
+   * @zh_CN 标题
+   */
+  title?: string;
+  /**
+   * @zh_CN 描述
+   */
+  subTitle?: string;
+  /**
+   * @zh_CN 按钮文本
+   */
+  submitButtonText?: string;
+  /**
+   * @zh_CN 描述
+   */
+  description?: string;
 }

 defineOptions({
@@ -25,8 +41,12 @@ defineOptions({
 });

 const props = withDefaults(defineProps<Props>(), {
+  description: '',
  loading: false,
  loginPath: '/auth/login',
+  submitButtonText: '',
+  subTitle: '',
+  title: '',
 });

 const router = useRouter();
@@ -46,10 +66,14 @@ function goToLogin() {
 <template>
  <div>
    <Title>
-      {{ $t('authentication.welcomeBack') }} 📱
+      <slot name="title">
+        {{ title || $t('authentication.welcomeBack') }} 📱
+      </slot>
      <template #desc>
        <span class="text-muted-foreground">
-          {{ $t('authentication.qrcodeSubtitle') }}
+          <slot name="subTitle">
+            {{ subTitle || $t('authentication.qrcodeSubtitle') }}
+          </slot>
        </span>
      </template>
    </Title>
@@ -57,7 +81,9 @@ function goToLogin() {
    <div class="flex-col-center mt-6">
      <img :src="qrcode" alt="qrcode" class="w-1/2" />
      <p class="text-muted-foreground mt-4 text-sm">
-        {{ $t('authentication.qrcodePrompt') }}
+        <slot name="description">
+          {{ description || $t('authentication.qrcodePrompt') }}
+        </slot>
      </p>
    </div>

--- a/packages/effects/common-ui/src/ui/authentication/register.vue
+++ b/packages/effects/common-ui/src/ui/authentication/register.vue
@@ -22,6 +22,18 @@ interface Props {
   * @zh_CN 登陆路径
   */
  loginPath?: string;
+  /**
+   * @zh_CN 标题
+   */
+  title?: string;
+  /**
+   * @zh_CN 描述
+   */
+  subTitle?: string;
+  /**
+   * @zh_CN 按钮文本
+   */
+  submitButtonText?: string;
 }

 defineOptions({
@@ -32,6 +44,9 @@ const props = withDefaults(defineProps<Props>(), {
  formSchema: () => [],
  loading: false,
  loginPath: '/auth/login',
+  submitButtonText: '',
+  subTitle: '',
+  title: '',
 });

 const emit = defineEmits<{
@@ -66,13 +81,21 @@ function goToLogin() {
 <template>
  <div>
    <Title>
-      {{ $t('authentication.createAnAccount') }} 🚀
-      <template #desc> {{ $t('authentication.signUpSubtitle') }} </template>
+      <slot name="title">
+        {{ title || $t('authentication.createAnAccount') }} 🚀
+      </slot>
+      <template #desc>
+        <slot name="subTitle">
+          {{ subTitle || $t('authentication.signUpSubtitle') }}
+        </slot>
+      </template>
    </Title>
    <Form />

    <VbenButton :loading="loading" class="mt-2 w-full" @click="handleSubmit">
-      {{ $t('authentication.signUp') }}
+      <slot name="submitButtonText">
+        {{ submitButtonText || $t('authentication.signUp') }}
+      </slot>
    </VbenButton>
    <div class="mt-4 text-center text-sm">
      {{ $t('authentication.alreadyHaveAccount') }}
--- a/packages/effects/common-ui/src/ui/authentication/types.ts
+++ b/packages/effects/common-ui/src/ui/authentication/types.ts
@@ -63,6 +63,10 @@ interface AuthenticationProps {
   * @zh_CN 登录框标题
   */
  title?: string;
+  /**
+   * @zh_CN 提交按钮文本
+   */
+  submitButtonText?: string;
 }

 /**
--- a/packages/effects/layouts/src/authentication/toolbar.vue
+++ b/packages/effects/layouts/src/authentication/toolbar.vue
@@ -31,9 +31,9 @@ const showTheme = computed(() => props.toolbarList.includes('theme'));
 <template>
  <div
    :class="{
-      'bg-accent z-10 rounded-3xl px-3 py-1': toolbarList.length > 1,
+      'bg-accent rounded-3xl px-3 py-1': toolbarList.length > 1,
    }"
-    class="flex-center absolute right-2 top-4"
+    class="flex-center absolute right-2 top-4 z-10"
  >
    <!-- Only show on medium and larger screens -->
    <div class="hidden md:flex">
--- a/packages/effects/layouts/src/basic/layout.vue
+++ b/packages/effects/layouts/src/basic/layout.vue
@@ -11,7 +11,7 @@ import {
  usePreferences,
 } from '@vben/preferences';
 import { useLockStore, useUserStore } from '@vben/stores';
-import { mapTree } from '@vben/utils';
+import { deepToRaw, mapTree } from '@vben/utils';
 import { VbenAdminLayout } from '@vben-core/layout-ui';
 import { Toaster, VbenBackTop, VbenLogo } from '@vben-core/shadcn-ui';

@@ -113,7 +113,7 @@ const {

 function wrapperMenus(menus: MenuRecordRaw[]) {
  return mapTree(menus, (item) => {
-    return { ...item, name: $t(item.name) };
+    return { ...deepToRaw(item), name: $t(item.name) };
  });
 }

--- a/packages/effects/layouts/src/basic/menu/menu.vue
+++ b/packages/effects/layouts/src/basic/menu/menu.vue
@@ -5,7 +5,7 @@ import type { MenuProps } from '@vben-core/menu-ui';
 import { Menu } from '@vben-core/menu-ui';

 interface Props extends MenuProps {
-  menus?: MenuRecordRaw[];
+  menus: MenuRecordRaw[];
 }

 const props = withDefaults(defineProps<Props>(), {