refactor(deps): migrate to nuxt v4

app/components/LoginNeededContent.vue

@@ -0,0 +1,60 @@
+<script setup lang="tsx">
+import ModalAuthentication from '~/components/ModalAuthentication.vue'
+
+const loginState = useLoginState()
+
+defineProps({
+  contentClass: {
+    type: String,
+    default: '',
+  },
+  needAdmin: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const modal = useModal()
+</script>
+
+<template>
+  <ClientOnly>
+    <div
+      v-if="!loginState.is_logged_in"
+      class="w-full flex flex-col justify-center items-center gap-2 py-40"
+    >
+      <Icon
+        name="i-tabler-user-circle"
+        class="text-7xl text-neutral-300 dark:text-neutral-700"
+      />
+      <p class="text-sm text-neutral-500 dark:text-neutral-400">请登录后使用</p>
+      <UButton
+        class="mt-2 font-bold"
+        color="black"
+        size="xs"
+        variant="solid"
+        @click="modal.open(ModalAuthentication)"
+      >
+        登录
+      </UButton>
+    </div>
+    <div
+      v-else-if="needAdmin && loginState.user.auth_code !== 2"
+      class="w-full flex flex-col justify-center items-center gap-2 py-40"
+    >
+      <Icon
+        class="text-7xl text-neutral-300 dark:text-neutral-700"
+        name="tabler:hand-stop"
+      />
+      <p class="text-sm text-neutral-500 dark:text-neutral-400">账号没有权限</p>
+    </div>
+    <div
+      :class="contentClass"
+      v-else
+    >
+      <slot />
+    </div>
+  </ClientOnly>
+</template>
+
+<style scoped></style>