feat: 添加环境变量示例，更新样式和依赖，增强全局状态管理

layouts/default.vue

@@ -1,11 +1,54 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { VisitorRole } from "~/types";
+
+const route = useRoute();
+const gstate = useGState();
+
+onMounted(() => {
+  if (route.query?.role) {
+    if (
+      route.query.role !== "stu" &&
+      route.query.role !== "tea" &&
+      route.query.role !== "fans"
+    ) {
+      return;
+    }
+    gstate.setCurrentRole(route.query.role as VisitorRole);
+  }
+});
+
+// const items = ref([
+//   {
+//     label: 'Backlog',
+//     value: 'backlog',
+//     icon: 'i-lucide-circle-help'
+//   },
+//   {
+//     label: 'Todo',
+//     value: 'todo',
+//     icon: 'i-lucide-circle-plus'
+//   },
+//   {
+//     label: 'In Progress',
+//     value: 'in_progress',
+//     icon: 'i-lucide-circle-arrow-up'
+//   },
+//   {
+//     label: 'Done',
+//     value: 'done',
+//     icon: 'i-lucide-circle-check'
+//   }
+// ])
+// const value = ref(items.value[0])
+</script>
 
 <template>
   <div class="w-full h-full flex flex-col dark:bg-neutral-900/80">
     <div
       class="sticky top-0 w-full px-4 py-3 bg-white/30 backdrop-blur-2xl z-30 dark:bg-neutral-900/80"
     >
-      <h1 class="font-medium">AI 智慧校园</h1>
+      <h1 class="font-medium">{{ gstate.botName }}</h1>
+      <!-- <USelectMenu v-model="value"  color="primary" variant="none" :items="items" class="w-48" size="lg"  :ui="{base: 'w-fit'}" /> -->
     </div>
     <slot></slot>
   </div>
@@ -14,5 +57,9 @@
 <style>
 body {
   background-image: url("~/assets/image/pattern/mesh-7.png");
+  background-position: center;
+  background-size: cover;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
 }
 </style>