Merge pull request #435 from sugarforever/feat/topHeader

顶部导航栏支持响应式

components/MobileMenu.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+const menus = useMenus()
+</script>
+
+<template>
+  <div class="w-full box-border">
+    <ul class="p-4">
+      <li v-for="menu in menus" :key="menu.to" class="my-1">
+        <RouterLink :to="menu.to"
+                    active-class="!text-primary-400"
+                    class="block px-2 py-1 text-gray-500 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100">
+          <Icon :name="menu.icon" />
+          <span class="ml-2">{{ menu.label }}</span>
+        </RouterLink>
+      </li>
+    </ul>
+    <div class="flex items-center p-4 border-t border-gray-200 dark:border-gray-700">
+      <div class="mr-4">
+        <ColorMode />
+      </div>
+      <ULink to="https://github.com/sugarforever/chat-ollama"
+             target="_blank"
+             class="i-mdi-github text-2xl ml-2 mr-4"></ULink>
+      <Auth class="ml-auto" />
+    </div>
+  </div>
+</template>

composables/useMenus.ts

@@ -0,0 +1,12 @@
+export function useMenus() {
+  const { t } = useI18n()
+
+  return computed(() => [
+    { label: t('menu.home'), icon: 'i-heroicons-home', to: '/' },
+    { label: t('menu.models'), icon: 'i-heroicons-rectangle-stack', to: '/models' },
+    { label: t('menu.instructions'), icon: 'i-iconoir-terminal', to: '/instructions' },
+    { label: t('menu.knowledgeBases'), icon: 'i-heroicons-book-open', to: '/knowledgebases' },
+    { label: t('menu.chat'), icon: 'i-iconoir-chat-lines', to: '/chat' },
+    { label: t('menu.settings'), icon: 'i-heroicons-cog-6-tooth', to: '/settings' }
+  ])
+}

layouts/default.vue

@@ -1,32 +1,29 @@
-<script setup>
-const { t } = useI18n()
+<script lang="ts" setup>
+const route = useRoute()
+const links = useMenus()
 
-const links = computed(() => {
-  return [
-    [
-      { label: t('menu.home'), icon: 'i-heroicons-home', to: '/' },
-      { label: t('menu.models'), icon: 'i-heroicons-rectangle-stack', to: '/models' },
-      { label: t('menu.instructions'), icon: 'i-iconoir-terminal', to: '/instructions' },
-      { label: t('menu.knowledgeBases'), icon: 'i-heroicons-book-open', to: '/knowledgebases' },
-      { label: t('menu.chat'), icon: 'i-iconoir-chat-lines', to: '/chat' },
-      { label: t('menu.settings'), icon: 'i-heroicons-cog-6-tooth', to: '/settings' }
-    ],
-  ]
+const open = ref(false)
+
+watch(() => route.path, () => {
+  open.value = false
 })
 </script>
+
 <template>
-  <div class="border-b border-gray-200 dark:border-gray-700">
-    <div class="flex items-center justify-between max-w-6xl mx-auto px-4">
+  <div class="border-b border-gray-200 dark:border-gray-700" style="--top-height: 48px;">
+    <div class="flex items-center justify-between max-w-6xl mx-auto px-4 h-[var(--top-height)]">
       <h1 class="flex flex-row items-center mr-2">
         <TheLogo class="w-[32px] h-[32px] mr-2" />
         <span class="text-primary font-semibold text-lg">{{ $config.public.appName }}</span>
       </h1>
-      <div>
-        <ClientOnly>
-          <UHorizontalNavigation :links="links" />
-        </ClientOnly>
+      <div class="hidden md:block">
+        <UHorizontalNavigation :links="[links]">
+          <template #default="{ link }">
+            <span class="group-hover:text-primary relative hidden lg:inline">{{ link.label }}</span>
+          </template>
+        </UHorizontalNavigation>
       </div>
-      <div class="flex items-center">
+      <div class="hidden md:flex items-center">
         <div class="mx-2">
           <ColorMode />
         </div>
@@ -35,9 +32,16 @@ const links = computed(() => {
                class="i-mdi-github text-2xl ml-2 mr-4"></ULink>
         <Auth />
       </div>
+      <div class="md:hidden">
+        <UPopover v-model:open="open" overlay :ui="{ width: 'w-[100vw] !translate-y-[var(--top-height)]', overlay: { background: '!bg-transparent' } }">
+          <UButton icon="i-material-symbols-menu-rounded" color="gray" />
+          <template #panel>
+            <MobileMenu />
+          </template>
+        </UPopover>
+      </div>
     </div>
   </div>
-
   <div id="main" class="p-4 box-border overflow-auto" style="height: calc(100% - 61px)">
     <slot />
   </div>