refactor(project): business changed its name to effects, and universal-ui changed its name to common-ui

packages/effects/layouts/src/authentication/authentication.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { $t } from '@vben-core/locales';
+import { preferences, usePreferences } from '@vben-core/preferences';
+
+import AuthenticationFromView from './from-view.vue';
+import SloganIcon from './icons/slogan.vue';
+import Toolbar from './toolbar.vue';
+
+defineOptions({
+  name: 'Authentication',
+});
+
+const { authPanelCenter, authPanelLeft, authPanelRight } = usePreferences();
+const appName = computed(() => preferences.app.name);
+</script>
+
+<template>
+  <div class="flex min-h-full flex-1 select-none overflow-x-hidden">
+    <AuthenticationFromView
+      v-if="authPanelLeft"
+      class="-enter-x min-h-full w-2/5"
+      transition-name="slide-left"
+    />
+
+    <div class="absolute left-0 top-0 z-10 flex flex-1">
+      <div
+        :class="
+          authPanelLeft || authPanelCenter
+            ? 'lg:text-foreground'
+            : 'lg:text-white'
+        "
+        class="text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
+      >
+        <img
+          :alt="appName"
+          :src="preferences.logo.source"
+          :width="42"
+          class="mr-2"
+        />
+        <p class="text-xl font-medium">
+          {{ appName }}
+        </p>
+      </div>
+    </div>
+    <div v-if="!authPanelCenter" class="relative hidden w-0 flex-1 lg:block">
+      <div class="bg-authentication absolute inset-0 h-full w-full">
+        <div class="flex-col-center -enter-x mr-20 h-full">
+          <SloganIcon :alt="appName" class="animate-float h-64 w-2/5" />
+          <div class="text-1xl mt-6 font-sans text-white lg:text-2xl">
+            {{ $t('authentication.pageTitle') }}
+          </div>
+          <div class="dark:text-muted-foreground mt-2 text-white/60">
+            {{ $t('authentication.pageDesc') }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="authPanelCenter" class="flex-center bg-authentication w-full">
+      <AuthenticationFromView
+        class="enter-y md:bg-background w-full rounded-3xl pb-20 shadow-2xl md:w-2/3 lg:w-1/2 xl:w-2/5"
+      >
+        <template #toolbar>
+          <Toolbar class="bg-muted" />
+        </template>
+      </AuthenticationFromView>
+    </div>
+    <AuthenticationFromView
+      v-if="authPanelRight"
+      class="enter-x min-h-full w-2/5 flex-1"
+    />
+  </div>
+</template>

packages/effects/layouts/src/authentication/from-view.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { preferences } from '@vben-core/preferences';
+
+import { Copyright } from '../basic/copyright';
+import Toolbar from './toolbar.vue';
+
+defineOptions({
+  name: 'AuthenticationFormView',
+});
+</script>
+<template>
+  <div class="flex-col-center relative px-6 py-10 lg:flex-initial lg:px-8">
+    <slot name="toolbar">
+      <Toolbar />
+    </slot>
+
+    <RouterView v-slot="{ Component, route }">
+      <Transition appear mode="out-in" name="slide-right">
+        <KeepAlive :include="['Login']">
+          <component
+            :is="Component"
+            :key="route.fullPath"
+            class="mt-6 w-full sm:mx-auto md:max-w-md"
+          />
+        </KeepAlive>
+      </Transition>
+    </RouterView>
+
+    <div
+      class="text-muted-foreground absolute bottom-3 flex text-center text-xs"
+    >
+      <Copyright
+        v-if="preferences.copyright.enable"
+        v-bind="preferences.copyright"
+      />
+    </div>
+  </div>
+</template>

packages/effects/layouts/src/authentication/index.ts

@@ -0,0 +1 @@
+export { default as AuthPageLayout } from './authentication.vue';

packages/effects/layouts/src/authentication/toolbar.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import {
+  AuthenticationColorToggle,
+  AuthenticationLayoutToggle,
+  LanguageToggle,
+  ThemeToggle,
+} from '../widgets';
+
+defineOptions({
+  name: 'AuthenticationToolbar',
+});
+</script>
+<template>
+  <div
+    class="flex-center bg-accent absolute right-2 top-4 rounded-3xl px-3 py-1"
+  >
+    <div class="hidden md:flex">
+      <AuthenticationColorToggle />
+      <AuthenticationLayoutToggle />
+    </div>
+    <LanguageToggle />
+    <ThemeToggle />
+  </div>
+</template>