perf: optimize interface color matching

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

@@ -4,46 +4,40 @@ import { computed } from 'vue';
 import { $t } from '@vben-core/locales';
 import { preferences, usePreferences } from '@vben-core/preferences';
 
-import AuthenticationFromView from './from-view.vue';
+import AuthenticationFormView from './form.vue';
 import SloganIcon from './icons/slogan.vue';
 import Toolbar from './toolbar.vue';
 
-defineOptions({
-  name: 'Authentication',
-});
+defineOptions({ name: 'Authentication' });
 
 const { authPanelCenter, authPanelLeft, authPanelRight } = usePreferences();
 const appName = computed(() => preferences.app.name);
+const logoSource = computed(() => preferences.logo.source);
 </script>
 
 <template>
   <div class="flex min-h-full flex-1 select-none overflow-x-hidden">
-    <AuthenticationFromView
+    <!-- 左侧认证面板 -->
+    <AuthenticationFormView
       v-if="authPanelLeft"
-      class="-enter-x min-h-full w-2/5"
+      class="min-h-full w-2/5"
       transition-name="slide-left"
     />
 
+    <!-- 头部 Logo 和应用名称 -->
     <div class="absolute left-0 top-0 z-10 flex flex-1">
       <div
-        :class="
-          authPanelLeft || authPanelCenter
-            ? 'lg:text-foreground'
-            : 'lg:text-white'
-        "
+        :class="authPanelLeft ? '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"
-        />
+        <img :alt="appName" :src="logoSource" class="mr-2" width="42" />
         <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">
@@ -57,18 +51,22 @@ const appName = computed(() => preferences.app.name);
         </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"
+      <AuthenticationFormView
+        class="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" />
+          <Toolbar />
         </template>
-      </AuthenticationFromView>
+      </AuthenticationFormView>
     </div>
-    <AuthenticationFromView
+
+    <!-- 右侧认证面板 -->
+    <AuthenticationFormView
       v-if="authPanelRight"
-      class="enter-x min-h-full w-2/5 flex-1"
+      class="min-h-full w-2/5 flex-1"
     />
   </div>
 </template>

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

@@ -9,7 +9,9 @@ defineOptions({
 });
 </script>
 <template>
-  <div class="flex-col-center relative px-6 py-10 lg:flex-initial lg:px-8">
+  <div
+    class="flex-col-center bg-background-content relative px-6 py-10 lg:flex-initial lg:px-8"
+  >
     <slot name="toolbar">
       <Toolbar />
     </slot>
@@ -20,7 +22,7 @@ defineOptions({
           <component
             :is="Component"
             :key="route.fullPath"
-            class="mt-6 w-full sm:mx-auto md:max-w-md"
+            class="enter-x mt-6 w-full sm:mx-auto md:max-w-md"
           />
         </KeepAlive>
       </Transition>

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

@@ -12,7 +12,7 @@ defineOptions({
 </script>
 <template>
   <div
-    class="flex-center bg-accent absolute right-2 top-4 rounded-3xl px-3 py-1"
+    class="flex-center bg-background dark:bg-accent absolute right-2 top-4 rounded-3xl px-3 py-1"
   >
     <div class="hidden md:flex">
       <AuthenticationColorToggle />

packages/effects/layouts/src/widgets/global-search/global-search.vue

@@ -91,7 +91,7 @@ onMounted(() => {
             class="text-muted-foreground group-hover:text-foreground size-4 group-hover:opacity-100"
           />
           <span
-            class="text-muted-foreground group-hover:text-foreground hidden text-sm duration-300 md:block"
+            class="text-muted-foreground group-hover:text-foreground hidden text-xs duration-300 md:block"
           >
             {{ $t('widgets.search.title') }}
           </span>

packages/effects/layouts/src/widgets/preferences/preferences-sheet.vue

@@ -227,9 +227,7 @@ async function handleReset() {
           :title="$t('preferences.title')"
           class="bg-primary flex-col-center h-12 w-12 cursor-pointer rounded-l-lg rounded-r-none border-none"
         >
-          <IconSetting
-            class="duration-3000 fill-primary-foreground animate-spin text-2xl"
-          />
+          <IconSetting class="duration-3000 fill-primary-foreground text-2xl" />
         </VbenButton>
       </template>
       <template #extra>