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

2024-09-01 13:07:06 +08:00
parent 34d765a9e8 277e98c42c
commit 13083e6545
77 changed files with 384 additions and 214 deletions
--- a/packages/effects/access/package.json
+++ b/packages/effects/access/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/access",
-  "version": "5.2.0",
+  "version": "5.2.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/effects/common-ui/package.json
+++ b/packages/effects/common-ui/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/common-ui",
-  "version": "5.2.0",
+  "version": "5.2.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/effects/common-ui/src/ui/authentication/login.vue
+++ b/packages/effects/common-ui/src/ui/authentication/login.vue
@@ -162,14 +162,16 @@ defineExpose({ resetCaptcha });

 <template>
  <div @keydown.enter.prevent="handleSubmit">
-    <Title>
-      {{ title || `${$t('authentication.welcomeBack')} 👋🏻` }}
-      <template #desc>
-        <span class="text-muted-foreground">
-          {{ subTitle || $t('authentication.loginSubtitle') }}
-        </span>
-      </template>
-    </Title>
+    <slot name="title">
+      <Title>
+        {{ title || `${$t('authentication.welcomeBack')} 👋🏻` }}
+        <template #desc>
+          <span class="text-muted-foreground">
+            {{ subTitle || $t('authentication.loginSubtitle') }}
+          </span>
+        </template>
+      </Title>
+    </slot>

    <!-- 租户 -->
    <div v-if="useTenant" class="tenant-picker mb-6">
@@ -234,8 +236,11 @@ defineExpose({ resetCaptcha });
      />
    </div>

-    <div class="mb-6 mt-4 flex justify-between">
-      <div v-if="showRememberMe" class="flex-center">
+    <div
+      v-if="showRememberMe || showForgetPassword"
+      class="mb-6 mt-4 flex justify-between"
+    >
+      <div class="flex-center">
        <VbenCheckbox v-model:checked="formState.rememberMe" name="rememberMe">
          {{ $t('authentication.rememberMe') }}
        </VbenCheckbox>
@@ -253,7 +258,10 @@ defineExpose({ resetCaptcha });
      {{ $t('common.login') }}
    </VbenButton>

-    <div class="mb-2 mt-4 flex items-center justify-between">
+    <div
+      v-if="showCodeLogin || showQrcodeLogin"
+      class="mb-2 mt-4 flex items-center justify-between"
+    >
      <VbenButton
        v-if="showCodeLogin"
        class="w-1/2"
@@ -273,20 +281,24 @@ defineExpose({ resetCaptcha });
    </div>

    <!-- 第三方登录 -->
-    <ThirdPartyLogin
-      v-if="showThirdPartyLogin"
-      @oauth-login="(e) => emit('oauthLogin', e)"
-    />
+    <slot name="third-party-login">
+      <ThirdPartyLogin
+        v-if="showThirdPartyLogin"
+        @oauth-login="(e) => emit('oauthLogin', e)"
+      />
+    </slot>

-    <div v-if="showRegister" class="text-center text-sm">
-      {{ $t('authentication.accountTip') }}
-      <span
-        class="text-primary hover:text-primary-hover active:text-primary-active cursor-pointer text-sm font-normal"
-        @click="handleGo(registerPath)"
-      >
-        {{ $t('authentication.createAccount') }}
-      </span>
-    </div>
+    <slot name="to-register">
+      <div v-if="showRegister" class="mt-3 text-center text-sm">
+        {{ $t('authentication.accountTip') }}
+        <span
+          class="text-primary hover:text-primary-hover active:text-primary-active cursor-pointer text-sm font-normal"
+          @click="handleGo(registerPath)"
+        >
+          {{ $t('authentication.createAccount') }}
+        </span>
+      </div>
+    </slot>
  </div>
 </template>

--- a/packages/effects/hooks/package.json
+++ b/packages/effects/hooks/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/hooks",
-  "version": "5.2.0",
+  "version": "5.2.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/effects/layouts/package.json
+++ b/packages/effects/layouts/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/layouts",
-  "version": "5.2.0",
+  "version": "5.2.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/effects/layouts/src/authentication/authentication.vue
+++ b/packages/effects/layouts/src/authentication/authentication.vue
@@ -1,24 +1,28 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { ToolbarType } from './types';

-import { $t } from '@vben/locales';
 import { preferences, usePreferences } from '@vben/preferences';

+import { Copyright } from '../basic/copyright';
 import AuthenticationFormView from './form.vue';
 import SloganIcon from './icons/slogan.vue';
 import Toolbar from './toolbar.vue';

 interface Props {
+  appName?: string;
+  logo?: string;
  pageTitle?: string;
  pageDescription?: string;
  sloganImage?: string;
  toolbar?: boolean;
-  toolbarList?: ('color' | 'language' | 'layout' | 'theme')[];
+  copyright?: boolean;
+  toolbarList?: ToolbarType[];
 }

-defineOptions({ name: 'Authentication' });
-
 withDefaults(defineProps<Props>(), {
+  appName: '',
+  copyright: true,
+  logo: '',
  pageDescription: '',
  pageTitle: '',
  sloganImage: '',
@@ -26,31 +30,42 @@ withDefaults(defineProps<Props>(), {
  toolbarList: () => ['color', 'language', 'layout', 'theme'],
 });

-const { authPanelCenter, authPanelLeft, authPanelRight } = usePreferences();
-const appName = computed(() => preferences.app.name);
-const logoSource = computed(() => preferences.logo.source);
+const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
+  usePreferences();
 </script>

 <template>
-  <div class="flex min-h-full flex-1 select-none overflow-x-hidden">
+  <div
+    :class="[isDark]"
+    class="flex min-h-full flex-1 select-none overflow-x-hidden"
+  >
+    <template v-if="toolbar">
+      <slot name="toolbar">
+        <Toolbar :toolbar-list="toolbarList" />
+      </slot>
+    </template>
    <!-- 左侧认证面板 -->
    <AuthenticationFormView
      v-if="authPanelLeft"
      class="min-h-full w-2/5 flex-1"
      transition-name="slide-left"
    >
-      <template v-if="toolbar" #toolbar>
-        <Toolbar :toolbar-list="toolbarList" />
+      <template v-if="copyright" #copyright>
+        <slot name="copyright">
+          <Copyright
+            v-if="preferences.copyright.enable"
+            v-bind="preferences.copyright"
+          />
+        </slot>
      </template>
    </AuthenticationFormView>

    <!-- 头部 Logo 和应用名称 -->
    <div class="absolute left-0 top-0 z-10 flex flex-1">
      <div
-        :class="authPanelRight ? 'lg:text-white' : 'lg:text-foreground'"
-        class="text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
+        class="text-foreground lg:text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
      >
-        <img :alt="appName" :src="logoSource" class="mr-2" width="42" />
+        <img :alt="appName" :src="logo" class="mr-2" width="42" />
        <p class="text-xl font-medium">
          {{ appName }}
        </p>
@@ -59,7 +74,9 @@ const logoSource = computed(() => preferences.logo.source);

    <!-- 系统介绍 -->
    <div v-if="!authPanelCenter" class="relative hidden w-0 flex-1 lg:block">
-      <div class="absolute inset-0 h-full w-full bg-[#070709]">
+      <div
+        class="bg-background-deep absolute inset-0 h-full w-full dark:bg-[#070709]"
+      >
        <div class="login-background absolute left-0 top-0 size-full"></div>
        <div class="flex-col-center -enter-x mr-20 h-full">
          <template v-if="sloganImage">
@@ -70,11 +87,11 @@ const logoSource = computed(() => preferences.logo.source);
            />
          </template>
          <SloganIcon v-else :alt="appName" class="animate-float h-64 w-2/5" />
-          <div class="text-1xl mt-6 font-sans text-white lg:text-2xl">
-            {{ pageTitle || $t('authentication.pageTitle') }}
+          <div class="text-1xl text-foreground mt-6 font-sans lg:text-2xl">
+            {{ pageTitle }}
          </div>
-          <div class="dark:text-muted-foreground mt-2 text-white/60">
-            {{ pageDescription || $t('authentication.pageDesc') }}
+          <div class="dark:text-muted-foreground mt-2">
+            {{ pageDescription }}
          </div>
        </div>
      </div>
@@ -84,10 +101,15 @@ const logoSource = computed(() => preferences.logo.source);
    <div v-if="authPanelCenter" class="flex-center relative w-full">
      <div class="login-background absolute left-0 top-0 size-full"></div>
      <AuthenticationFormView
-        class="md:bg-background shadow-primary/10 w-full rounded-3xl pb-20 shadow-2xl md:w-2/3 lg:w-1/2 xl:w-[36%]"
+        class="md:bg-background shadow-primary/5 shadow-float w-full rounded-3xl pb-20 md:w-2/3 lg:w-1/2 xl:w-[36%]"
      >
-        <template v-if="toolbar" #toolbar>
-          <Toolbar :toolbar-list="toolbarList" />
+        <template v-if="copyright" #copyright>
+          <slot name="copyright">
+            <Copyright
+              v-if="preferences.copyright.enable"
+              v-bind="preferences.copyright"
+            />
+          </slot>
        </template>
      </AuthenticationFormView>
    </div>
@@ -95,10 +117,15 @@ const logoSource = computed(() => preferences.logo.source);
    <!-- 右侧认证面板 -->
    <AuthenticationFormView
      v-if="authPanelRight"
-      class="min-h-full w-2/5 flex-1"
+      class="min-h-full w-[34%] flex-1"
    >
-      <template v-if="toolbar" #toolbar>
-        <Toolbar :toolbar-list="toolbarList" />
+      <template v-if="copyright" #copyright>
+        <slot name="copyright">
+          <Copyright
+            v-if="preferences.copyright.enable"
+            v-bind="preferences.copyright"
+          />
+        </slot>
      </template>
    </AuthenticationFormView>
  </div>
@@ -109,9 +136,21 @@ const logoSource = computed(() => preferences.logo.source);
  background: linear-gradient(
    154deg,
    #07070915 30%,
-    hsl(var(--primary) / 15%) 48%,
+    hsl(var(--primary) / 30%) 48%,
    #07070915 64%
  );
  filter: blur(100px);
 }
+
+.dark {
+  .login-background {
+    background: linear-gradient(
+      154deg,
+      #07070915 30%,
+      hsl(var(--primary) / 20%) 48%,
+      #07070915 64%
+    );
+    filter: blur(100px);
+  }
+}
 </style>
--- a/packages/effects/layouts/src/authentication/form.vue
+++ b/packages/effects/layouts/src/authentication/form.vue
@@ -1,8 +1,4 @@
 <script setup lang="ts">
-import { preferences } from '@vben/preferences';
-
-import { Copyright } from '../basic/copyright';
-
 defineOptions({
  name: 'AuthenticationFormView',
 });
@@ -10,11 +6,9 @@ defineOptions({

 <template>
  <div
-    class="flex-col-center bg-background-deep relative px-6 py-10 lg:flex-initial lg:px-8"
+    class="flex-col-center dark:bg-background-deep bg-background relative px-6 py-10 lg:flex-initial lg:px-8"
  >
-    <!-- Toolbar Slot -->
-    <slot name="toolbar"> </slot>
-
+    <slot></slot>
    <!-- Router View with Transition and KeepAlive -->
    <RouterView v-slot="{ Component, route }">
      <Transition appear mode="out-in" name="slide-right">
@@ -29,13 +23,11 @@ defineOptions({
    </RouterView>

    <!-- Footer Copyright -->
+
    <div
      class="text-muted-foreground absolute bottom-3 flex text-center text-xs"
    >
-      <Copyright
-        v-if="preferences.copyright.enable"
-        v-bind="preferences.copyright"
-      />
+      <slot name="copyright"> </slot>
    </div>
  </div>
 </template>
--- a/packages/effects/layouts/src/authentication/toolbar.vue
+++ b/packages/effects/layouts/src/authentication/toolbar.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { ToolbarType } from './types';
+
 import { computed } from 'vue';

 import {
@@ -9,7 +11,7 @@ import {
 } from '../widgets';

 interface Props {
-  toolbarList?: ('color' | 'language' | 'layout' | 'theme')[];
+  toolbarList?: ToolbarType[];
 }

 defineOptions({
@@ -29,8 +31,7 @@ const showTheme = computed(() => props.toolbarList.includes('theme'));
 <template>
  <div
    :class="{
-      'bg-background dark:bg-accent rounded-3xl px-3 py-1':
-        toolbarList.length > 1,
+      'bg-accent z-10 rounded-3xl px-3 py-1': toolbarList.length > 1,
    }"
    class="flex-center absolute right-2 top-4"
  >
--- a/packages/effects/layouts/src/authentication/types.ts
+++ b/packages/effects/layouts/src/authentication/types.ts
@@ -0,0 +1 @@
+export type ToolbarType = 'color' | 'language' | 'layout' | 'theme';
--- a/packages/effects/layouts/src/widgets/check-updates/check-updates.vue
+++ b/packages/effects/layouts/src/widgets/check-updates/check-updates.vue
@@ -95,6 +95,10 @@ function handleNotice(versionTag: string) {
 }

 function start() {
+  if (props.checkUpdatesInterval <= 0) {
+    return;
+  }
+
  // 每 checkUpdatesInterval(默认值为1) 分钟检查一次
  timer.value = setInterval(
    checkForUpdates,
--- a/packages/effects/plugins/package.json
+++ b/packages/effects/plugins/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/plugins",
-  "version": "5.2.0",
+  "version": "5.2.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/effects/request/package.json
+++ b/packages/effects/request/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/request",
-  "version": "5.2.0",
+  "version": "5.2.1",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
				`@@ -0,0 +1 @@`
				`export type ToolbarType = 'color' \| 'language' \| 'layout' \| 'theme';`