fix: 关闭移动端剧本标题悬浮提示
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, inject, onScopeDispose, provide, watchEffect } from 'vue'
|
import { computed, inject, onScopeDispose, provide, ref, watchEffect } from 'vue'
|
||||||
import { useRoute, useRouter } from 'vue-router'
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
import { NScrollbar, NAlert, NButton, NPageHeader, NSpin, NEllipsis } from 'naive-ui'
|
import { NScrollbar, NAlert, NButton, NPageHeader, NSpin, NEllipsis } from 'naive-ui'
|
||||||
import { EmptyState } from '../../components/ui'
|
import { EmptyState } from '../../components/ui'
|
||||||
@@ -11,6 +11,15 @@ import { isProjectComplete, projectAccessKey, type ProjectAccess } from './acces
|
|||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const id = computed(() => String(route.params.projectId))
|
const id = computed(() => String(route.params.projectId))
|
||||||
|
/** 移动端标题只截断,不弹悬浮提示;跟随视口变化并在卸载时清理监听。 */
|
||||||
|
const mobileMedia = window.matchMedia('(max-width: 760px)')
|
||||||
|
const isMobile = ref(mobileMedia.matches)
|
||||||
|
function syncMobile() {
|
||||||
|
isMobile.value = mobileMedia.matches
|
||||||
|
}
|
||||||
|
mobileMedia.addEventListener('change', syncMobile)
|
||||||
|
onScopeDispose(() => mobileMedia.removeEventListener('change', syncMobile))
|
||||||
|
|
||||||
// 图库使用手动刷新,父布局也停止轮询,避免浏览素材时被周期性更新打断。
|
// 图库使用手动刷新,父布局也停止轮询,避免浏览素材时被周期性更新打断。
|
||||||
const isGallery = computed(() => route.path.replace(/\/+$/, '').endsWith('/subject-images'))
|
const isGallery = computed(() => route.path.replace(/\/+$/, '').endsWith('/subject-images'))
|
||||||
const context = useProjectData(
|
const context = useProjectData(
|
||||||
@@ -36,7 +45,7 @@ onScopeDispose(() => {
|
|||||||
<header class="project-header">
|
<header class="project-header">
|
||||||
<NPageHeader @back="router.push('/projects')">
|
<NPageHeader @back="router.push('/projects')">
|
||||||
<template #title
|
<template #title
|
||||||
><NEllipsis class="project-title">{{
|
><NEllipsis :key="isMobile ? 'mobile' : 'desktop'" class="project-title" :tooltip="!isMobile">{{
|
||||||
context.project.value?.title || context.project.value?.topic || '读取项目'
|
context.project.value?.title || context.project.value?.topic || '读取项目'
|
||||||
}}</NEllipsis></template
|
}}</NEllipsis></template
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user