Logo和主题色变换

app/components/AppHeader.vue

@@ -1,26 +1,62 @@
 <script lang="ts" setup>
 import type {NavigationMenuItem} from '@nuxt/ui'
 
-defineProps<{
-  links: NavigationMenuItem[]
-}>()
+const route = useRoute()
+
+const items = computed<NavigationMenuItem[]>(() => [
+  {
+    label: 'Docs',
+    to: '/docs/getting-started',
+    active: route.path.startsWith('/docs/getting-started')
+  },
+  {
+    label: 'Components',
+    to: '/docs/components',
+    active: route.path.startsWith('/docs/components')
+  },
+  {
+    label: 'Figma',
+    to: 'https://go.nuxt.com/figma-ui',
+    target: '_blank'
+  },
+  {
+    label: 'Releases',
+    to: 'https://github.com/nuxt/ui/releases',
+    target: '_blank'
+  }
+])
 </script>
 
 <template>
-  <div class="fixed top-2 sm:top-4 mx-auto left-1/2 transform -translate-x-1/2 z-10">
-    <UNavigationMenu
-        :items="links"
-        :ui="{
-        link: 'px-2 py-1',
-        linkLeadingIcon: 'hidden'
-      }"
-        class="bg-muted/80 backdrop-blur-sm rounded-full px-2 sm:px-4 border border-muted/50 shadow-lg shadow-neutral-950/5"
-        color="neutral"
-        variant="link"
-    >
-      <template #list-trailing>
-        <ColorModeButton/>
-      </template>
-    </UNavigationMenu>
-  </div>
+  <UHeader>
+    <template #title>
+      <Logo class="h-6 w-auto"/>
+    </template>
+
+    <UNavigationMenu :items="items"/>
+
+    <template #right>
+      <ColorModeButton/>
+
+      <!--      <UTooltip :kbds="['meta', 'G']" text="Open on GitHub">-->
+      <!--        <UButton-->
+      <!--            aria-label="GitHub"-->
+      <!--            color="neutral"-->
+      <!--            icon="i-simple-icons-github"-->
+      <!--            target="_blank"-->
+      <!--            to="https://github.com/nuxt/ui"-->
+      <!--            variant="ghost"-->
+      <!--        />-->
+      <!--      </UTooltip>-->
+    </template>
+    <template #body>
+      <div class="px-4 py-2">
+        <UNavigationMenu
+            :items="items"
+            class="-mx-2.5"
+            orientation="vertical"
+        />
+      </div>
+    </template>
+  </UHeader>
 </template>

app/components/ColorModeButton.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 const colorMode = useColorMode()
 
 const nextTheme = computed(() => (colorMode.value === 'dark' ? 'light' : 'dark'))
@@ -16,8 +16,8 @@ const startViewTransition = (event: MouseEvent) => {
   const x = event.clientX
   const y = event.clientY
   const endRadius = Math.hypot(
-    Math.max(x, window.innerWidth - x),
-    Math.max(y, window.innerHeight - y)
+      Math.max(x, window.innerWidth - x),
+      Math.max(y, window.innerHeight - y)
   )
 
   const transition = document.startViewTransition(() => {
@@ -25,19 +25,19 @@ const startViewTransition = (event: MouseEvent) => {
   })
 
   transition.ready.then(() => {
-    const duration = 600
+    const duration = 1000
     document.documentElement.animate(
-      {
-        clipPath: [
-          `circle(0px at ${x}px ${y}px)`,
-          `circle(${endRadius}px at ${x}px ${y}px)`
-        ]
-      },
-      {
-        duration: duration,
-        easing: 'cubic-bezier(.76,.32,.29,.99)',
-        pseudoElement: '::view-transition-new(root)'
-      }
+        {
+          clipPath: [
+            `circle(0px at ${x}px ${y}px)`,
+            `circle(${endRadius}px at ${x}px ${y}px)`
+          ]
+        },
+        {
+          duration: duration,
+          easing: 'cubic-bezier(.76,.32,.29,.99)',
+          pseudoElement: '::view-transition-new(root)'
+        }
     )
   })
 }
@@ -46,16 +46,16 @@ const startViewTransition = (event: MouseEvent) => {
 <template>
   <ClientOnly>
     <UButton
-      :aria-label="`Switch to ${nextTheme} mode`"
-      :icon="`i-lucide-${nextTheme === 'dark' ? 'sun' : 'moon'}`"
-      color="neutral"
-      variant="ghost"
-      size="sm"
-      class="rounded-full"
-      @click="startViewTransition"
+        :aria-label="`Switch to ${nextTheme} mode`"
+        :icon="`i-lucide-${nextTheme === 'dark' ? 'sun' : 'moon'}`"
+        class="rounded-full"
+        color="neutral"
+        size="sm"
+        variant="ghost"
+        @click="startViewTransition"
     />
     <template #fallback>
-      <div class="size-4" />
+      <div class="size-4"/>
     </template>
   </ClientOnly>
 </template>
@@ -70,6 +70,7 @@ const startViewTransition = (event: MouseEvent) => {
 ::view-transition-new(root) {
   z-index: 9999;
 }
+
 ::view-transition-old(root) {
   z-index: 1;
 }

app/components/Logo.vue

@@ -0,0 +1,13 @@
+<template>
+  <NuxtLink class="flex items-center" to="/">
+    <NuxtImg
+        alt="创特物联"
+        class="h-12 w-auto dark:invert"
+        loading="eager"
+        src="https://cbu01.alicdn.com/img/ibank/O1CN01uZ3fTP1Bs31lE2Mlf_!!0-0-cib.jpg"
+    />
+    创特物联
+  </NuxtLink>
+</template>
+<script lang="ts" setup>
+</script>

app/layouts/default.vue

@@ -3,10 +3,10 @@
 
 <template>
   <div>
-    <UContainer class="sm:border-x border-default pt-10">
-      <AppHeader :links="navLinks"/>
-      <slot/>
-      <AppFooter/>
-    </UContainer>
+
+    <AppHeader :links="navLinks"/>
+    <slot/>
+    <AppFooter/>
+
   </div>
 </template>