perf: improve overall theme color matching

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

@@ -8,14 +8,17 @@ defineOptions({
   name: 'AuthenticationFormView',
 });
 </script>
+
 <template>
   <div
     class="flex-col-center bg-background-content relative px-6 py-10 lg:flex-initial lg:px-8"
   >
+    <!-- Toolbar Slot -->
     <slot name="toolbar">
       <Toolbar />
     </slot>
 
+    <!-- Router View with Transition and KeepAlive -->
     <RouterView v-slot="{ Component, route }">
       <Transition appear mode="out-in" name="slide-right">
         <KeepAlive :include="['Login']">
@@ -28,6 +31,7 @@ defineOptions({
       </Transition>
     </RouterView>
 
+    <!-- Footer Copyright -->
     <div
       class="text-muted-foreground absolute bottom-3 flex text-center text-xs"
     >

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

@@ -10,14 +10,17 @@ defineOptions({
   name: 'AuthenticationToolbar',
 });
 </script>
+
 <template>
   <div
     class="flex-center bg-background dark:bg-accent absolute right-2 top-4 rounded-3xl px-3 py-1"
   >
+    <!-- Only show on medium and larger screens -->
     <div class="hidden md:flex">
       <AuthenticationColorToggle />
       <AuthenticationLayoutToggle />
     </div>
+    <!-- Always show Language and Theme toggles -->
     <LanguageToggle />
     <ThemeToggle />
   </div>

packages/effects/layouts/src/basic/content/content.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { RouteLocationNormalizedLoaded } from 'vue-router';
 
+import { useContentHeight } from '@vben-core/hooks';
 import { preferences, usePreferences } from '@vben-core/preferences';
 import { Spinner } from '@vben-core/shadcn-ui';
 import { storeToRefs, useCoreTabbarStore } from '@vben-core/stores';
@@ -13,6 +14,7 @@ defineOptions({ name: 'LayoutContent' });
 const tabbarStore = useCoreTabbarStore();
 const { keepAlive } = usePreferences();
 const { spinning } = useContentSpinner();
+const { contentStyles } = useContentHeight();
 
 const { getCachedTabs, getExcludeCachedTabs, renderRouteView } =
   storeToRefs(tabbarStore);
@@ -47,7 +49,7 @@ function getTransitionName(route: RouteLocationNormalizedLoaded) {
     <Spinner
       v-if="preferences.transition.loading"
       :spinning="spinning"
-      class="h-[var(--vben-content-client-height)]"
+      :style="contentStyles"
     />
     <IFrameRouterView />
     <RouterView v-slot="{ Component, route }">

packages/effects/layouts/src/basic/content/use-content-spinner.ts

@@ -7,9 +7,10 @@ function useContentSpinner() {
   const spinning = ref(false);
   const startTime = ref(0);
   const router = useRouter();
-  const minShowTime = 500;
+  const minShowTime = 500; // 最小显示时间
   const enableLoading = computed(() => preferences.transition.loading);
 
+  // 结束加载动画
   const onEnd = () => {
     if (!enableLoading.value) {
       return;
@@ -24,6 +25,7 @@ function useContentSpinner() {
     }
   };
 
+  // 路由前置守卫
   router.beforeEach((to) => {
     if (to.meta.loaded || !enableLoading.value || to.meta.iframeSrc) {
       return true;
@@ -33,14 +35,12 @@ function useContentSpinner() {
     return true;
   });
 
+  // 路由后置守卫
   router.afterEach((to) => {
     if (to.meta.loaded || !enableLoading.value || to.meta.iframeSrc) {
       return true;
     }
-
-    // 关闭加载动画
     onEnd();
-
     return true;
   });
 

packages/effects/layouts/src/basic/copyright/copyright.vue

@@ -22,19 +22,23 @@ withDefaults(defineProps<Props>(), {
 
 <template>
   <div class="text-md flex-center">
+    <!-- ICP Link -->
     <a
       v-if="icp"
-      :href="icpLink || 'javascript:void 0'"
+      :href="icpLink || 'javascript:void(0)'"
       class="hover:text-primary-hover"
       target="_blank"
     >
       {{ icp }}
     </a>
 
+    <!-- Copyright Text -->
     Copyright © {{ date }}
+
+    <!-- Company Link -->
     <a
       v-if="companyName"
-      :href="companySiteLink || 'javascript:void 0'"
+      :href="companySiteLink || 'javascript:void(0)'"
       class="hover:text-primary-hover mx-1"
       target="_blank"
     >