Merge pull request #575 from nagisa77/feature/ui_fix_v0

fix: 仅仅在主页显示

frontend_nuxt/app.vue

@@ -16,11 +16,7 @@
         <NuxtPage keepalive />
       </div>
 
-      <div
+      <div v-if="showNewPostIcon" class="new-post-icon" @click="goToNewPost">
-        v-if="!menuVisible && route.path !== '/new-post'"
-        class="new-post-icon"
-        @click="goToNewPost"
-      >
         <i class="fas fa-edit"></i>
       </div>
     </div>
@@ -28,21 +24,19 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import HeaderComponent from '~/components/HeaderComponent.vue'
 import MenuComponent from '~/components/MenuComponent.vue'
 import GlobalPopups from '~/components/GlobalPopups.vue'
 import { useIsMobile } from '~/utils/screen'
 
-export default {
+const isMobile = useIsMobile()
-  name: 'App',
+const menuVisible = ref(!isMobile.value)
-  components: { HeaderComponent, MenuComponent, GlobalPopups },
+const route = useRoute()
-  setup() {
-    const isMobile = useIsMobile()
-    const menuVisible = ref(!isMobile.value)
-    const route = useRoute()
 
-    const hideMenu = computed(() => {
+const showNewPostIcon = computed(() => useRoute().path === '/')
+
+const hideMenu = computed(() => {
   return [
     '/login',
     '/signup',
@@ -54,17 +48,17 @@ export default {
     '/forgot-password',
     '/google-callback',
   ].includes(useRoute().path)
-    })
+})
 
-    const header = useTemplateRef('header')
+const header = useTemplateRef('header')
 
-    onMounted(() => {
+onMounted(() => {
   if (typeof window !== 'undefined') {
     menuVisible.value = window.innerWidth > 768
   }
-    })
+})
 
-    const handleMenuOutside = (event) => {
+const handleMenuOutside = (event) => {
   const btn = header.value.$refs.menuBtn
   if (btn && (btn === event.target || btn.contains(event.target))) {
     return // 如果是菜单按钮的点击，不处理关闭
@@ -73,16 +67,13 @@ export default {
   if (isMobile.value) {
     menuVisible.value = false
   }
-    }
+}
 
-    const goToNewPost = () => {
+const goToNewPost = () => {
   navigateTo('/new-post', { replace: false })
-    }
-
-    return { menuVisible, hideMenu, handleMenuOutside, header, route, goToNewPost }
-  },
 }
 </script>
+
 <style src="~/assets/global.css"></style>
 <style scoped>
 .header-container {