perf: supplement login interface documents and add configuration parameters (#4175)

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from 'vue';
+
 import {
   AuthenticationColorToggle,
   AuthenticationLayoutToggle,
@@ -6,22 +8,39 @@ import {
   ThemeToggle,
 } from '../widgets';
 
+interface Props {
+  toolbarList?: ('color' | 'language' | 'layout' | 'theme')[];
+}
+
 defineOptions({
   name: 'AuthenticationToolbar',
 });
+
+const props = withDefaults(defineProps<Props>(), {
+  toolbarList: () => ['color', 'language', 'layout', 'theme'],
+});
+
+const showColor = computed(() => props.toolbarList.includes('color'));
+const showLayout = computed(() => props.toolbarList.includes('layout'));
+const showLanguage = computed(() => props.toolbarList.includes('language'));
+const showTheme = computed(() => props.toolbarList.includes('theme'));
 </script>
 
 <template>
   <div
-    class="flex-center bg-background dark:bg-accent absolute right-2 top-4 rounded-3xl px-3 py-1"
+    :class="{
+      'bg-background dark:bg-accent rounded-3xl px-3 py-1':
+        toolbarList.length > 1,
+    }"
+    class="flex-center absolute right-2 top-4"
   >
     <!-- Only show on medium and larger screens -->
     <div class="hidden md:flex">
-      <AuthenticationColorToggle />
-      <AuthenticationLayoutToggle />
+      <AuthenticationColorToggle v-if="showColor" />
+      <AuthenticationLayoutToggle v-if="showLayout" />
     </div>
     <!-- Always show Language and Theme toggles -->
-    <LanguageToggle />
-    <ThemeToggle />
+    <LanguageToggle v-if="showLanguage" />
+    <ThemeToggle v-if="showTheme" />
   </div>
 </template>