feat: 新增主页未登录时提示。

src/views/Home.vue

@@ -3,14 +3,21 @@
     <div class="poster">
     </div>
     <div style="font-weight: bolder;font-size: 32px;padding: 30px">Hello,{{username}}</div>
-    <div class="project-list">
-      <ProjectCard
-        v-for="project in projectList"
-        :key="project.id"
-        v-bind="project"
-        @click="handleProjectChange(project.id)"
-      ></ProjectCard>
-    </div>
+    <template v-if="userLoggedIn">
+      <div class="project-list">
+        <ProjectCard
+          v-for="project in projectList"
+          :key="project.id"
+          v-bind="project"
+          @click="handleProjectChange(project.id)"
+        ></ProjectCard>
+      </div>
+    </template>
+    <template v-else>
+      <div class="guest-view">
+      请先进行登录。
+      </div>
+    </template>
   </div>
 </template>
 
@@ -19,6 +26,7 @@ import { defineComponent, computed } from 'vue';
 import ProjectCard from '@/components/ProjectCard.vue';
 import { useProjectList } from '@/composable/useProject';
 import { useStore } from '@/store';
+import { useUser } from '@/composable/useUser';
 
 export default defineComponent({
   components: {
@@ -26,11 +34,14 @@ export default defineComponent({
   },
   setup() {
     const { projectList, handleProjectChange } = useProjectList();
+    const { userLoggedIn } = useUser();
     const store = useStore();
     return {
       projectList,
-      username: computed(() => store.state.user.username),
       handleProjectChange,
+
+      username: computed(() => store.state.user.username),
+      userLoggedIn,
     };
   },
 });
@@ -43,4 +54,11 @@ export default defineComponent({
   display:flex;
   flex-wrap: wrap;
 }
+.guest-view {
+  height: 400px;
+  width: 100%;
+  text-align: center;
+  line-height: 400px;
+  user-select: none;
+}
 </style>