refactor(deps): migrate to nuxt v4

app/components/aigc/nav/NavItem.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+export type NavItemProps = {
+  label: string
+  icon: string
+  to: string
+  admin?: boolean
+  hide?: boolean
+}
+
+const props = withDefaults(defineProps<NavItemProps>(), {
+  icon: 'i-tabler-photo-filled',
+  admin: false,
+  hide: false,
+})
+
+const route = useRoute()
+
+const active = computed(() => {
+  return route.path === props.to
+})
+
+const activeClass = computed(() => {
+  return props.admin ? 'bg-amber-500 text-white' : 'bg-primary text-white'
+})
+</script>
+
+<template>
+  <NuxtLink
+    v-if="!hide"
+    :class="{
+      [activeClass]: active,
+      'hover:bg-neutral-200 dark:hover:bg-neutral-800': !active,
+    }"
+    :to="to"
+    class="px-4 py-3 flex justify-between items-center rounded-lg transition cursor-pointer"
+  >
+    <div class="flex items-center gap-2">
+      <Icon
+        :name="icon"
+        class="text-xl inline"
+      />
+      <h1 class="flex-1 text-[14px] font-medium line-clamp-1">
+        {{ label }}
+      </h1>
+    </div>
+    <UBadge
+      v-if="admin"
+      color="amber"
+      label="OP"
+      size="xs"
+      variant="subtle"
+    />
+  </NuxtLink>
+</template>
+
+<style scoped></style>