feat: login

components/LoginNeededContent.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const loginState = useLoginState()
+
+defineProps({
+  contentClass: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<template>
+  <div v-if="!loginState.is_logged_in"
+       class="w-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900">
+    <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" to="/login" color="black" variant="solid" size="xs">登录</UButton>
+  </div>
+  <div :class="contentClass" v-else>
+    <slot/>
+  </div>
+</template>
+
+<style scoped>
+
+</style>