将多个组件中的VFab按钮包裹在Teleport中,以确保在移动设备上正确显示

This commit is contained in:
jxxghp
2025-07-03 07:18:31 +08:00
parent 7d36330b4b
commit 8718816fce
7 changed files with 106 additions and 92 deletions
+2
View File
@@ -342,6 +342,7 @@ onDeactivated(() => {
</draggable> </draggable>
<!-- 底部操作按钮只在非移动设备上显示 --> <!-- 底部操作按钮只在非移动设备上显示 -->
<Teleport to="body">
<VFab <VFab
v-if="!appMode" v-if="!appMode"
icon="mdi-view-dashboard-edit" icon="mdi-view-dashboard-edit"
@@ -352,6 +353,7 @@ onDeactivated(() => {
appear appear
@click="dialog = true" @click="dialog = true"
/> />
</Teleport>
<!-- 弹窗根据配置生成选项 --> <!-- 弹窗根据配置生成选项 -->
<VDialog v-if="dialog" v-model="dialog" max-width="35rem" :fullscreen="!display.mdAndUp.value" scrollable> <VDialog v-if="dialog" v-model="dialog" max-width="35rem" :fullscreen="!display.mdAndUp.value" scrollable>
+2
View File
@@ -1504,6 +1504,7 @@ function onDragStartPlugin(evt: any) {
<div v-if="isRefreshed"> <div v-if="isRefreshed">
<!-- 插件搜索图标 --> <!-- 插件搜索图标 -->
<Teleport to="body">
<VFab <VFab
v-if="!appMode" v-if="!appMode"
icon="mdi-magnify" icon="mdi-magnify"
@@ -1516,6 +1517,7 @@ function onDragStartPlugin(evt: any) {
@click="SearchDialog = true" @click="SearchDialog = true"
:class="{ 'mb-12': appMode }" :class="{ 'mb-12': appMode }"
/> />
</Teleport>
</div> </div>
<!-- 插件市场设置窗口 --> <!-- 插件市场设置窗口 -->
<PluginMarketSettingDialog <PluginMarketSettingDialog
@@ -698,6 +698,7 @@ onMounted(() => {
</VCard> </VCard>
<!-- 底部操作按钮 --> <!-- 底部操作按钮 -->
<Teleport to="body">
<div v-if="isRefreshed && selected.length > 0"> <div v-if="isRefreshed && selected.length > 0">
<VFab <VFab
icon="mdi-trash-can-outline" icon="mdi-trash-can-outline"
@@ -721,6 +722,7 @@ onMounted(() => {
@click="retransferBatch" @click="retransferBatch"
/> />
</div> </div>
</Teleport>
<!-- 底部弹窗 --> <!-- 底部弹窗 -->
<VBottomSheet v-model="deleteConfirmDialog" inset> <VBottomSheet v-model="deleteConfirmDialog" inset>
<VCard class="text-center"> <VCard class="text-center">
+2
View File
@@ -288,6 +288,7 @@ useDynamicButton({
:error-description="filterOption === 'all' ? t('site.sitesWillBeShownHere') : t('common.tryChangingFilters')" :error-description="filterOption === 'all' ? t('site.sitesWillBeShownHere') : t('common.tryChangingFilters')"
/> />
<!-- 新增站点按钮 --> <!-- 新增站点按钮 -->
<Teleport to="body">
<VFab <VFab
v-if="isRefreshed && !appMode" v-if="isRefreshed && !appMode"
icon="mdi-web-plus" icon="mdi-web-plus"
@@ -299,6 +300,7 @@ useDynamicButton({
@click="siteAddDialog = true" @click="siteAddDialog = true"
:class="{ 'mb-12': appMode }" :class="{ 'mb-12': appMode }"
/> />
</Teleport>
<!-- 新增站点弹窗 --> <!-- 新增站点弹窗 -->
<SiteAddEditDialog <SiteAddEditDialog
v-if="siteAddDialog" v-if="siteAddDialog"
@@ -181,6 +181,7 @@ useDynamicButton({
:error-description="keyword ? t('subscribe.noFilterData') : t('subscribe.noSubscribeData')" :error-description="keyword ? t('subscribe.noFilterData') : t('subscribe.noSubscribeData')"
/> />
<!-- 底部操作按钮 --> <!-- 底部操作按钮 -->
<Teleport to="body">
<div v-if="isRefreshed"> <div v-if="isRefreshed">
<VFab <VFab
v-if="userStore.superUser && !appMode" v-if="userStore.superUser && !appMode"
@@ -195,6 +196,7 @@ useDynamicButton({
@click="historyDialog = true" @click="historyDialog = true"
/> />
</div> </div>
</Teleport>
<!-- 历史记录弹窗 --> <!-- 历史记录弹窗 -->
<SubscribeHistoryDialog <SubscribeHistoryDialog
v-if="historyDialog" v-if="historyDialog"
+2
View File
@@ -96,6 +96,7 @@ useDynamicButton({
</div> </div>
<!-- 新增用户按钮 --> <!-- 新增用户按钮 -->
<Teleport to="body">
<VFab <VFab
v-if="isRefreshed && !appMode" v-if="isRefreshed && !appMode"
icon="mdi-account-plus" icon="mdi-account-plus"
@@ -107,6 +108,7 @@ useDynamicButton({
@click="openAddUserDialog" @click="openAddUserDialog"
:class="{ 'mb-12': appMode }" :class="{ 'mb-12': appMode }"
/> />
</Teleport>
<!-- 用户添加弹窗 --> <!-- 用户添加弹窗 -->
<UserAddEditDialog <UserAddEditDialog
+2
View File
@@ -72,6 +72,7 @@ useDynamicButton({
</div> </div>
<!-- 新增按钮 --> <!-- 新增按钮 -->
<Teleport to="body">
<VFab <VFab
v-if="isRefreshed && !appMode" v-if="isRefreshed && !appMode"
icon="mdi-plus" icon="mdi-plus"
@@ -83,6 +84,7 @@ useDynamicButton({
:class="{ 'mb-12': appMode }" :class="{ 'mb-12': appMode }"
@click="addDialog = true" @click="addDialog = true"
/> />
</Teleport>
<!-- 新增对话框 --> <!-- 新增对话框 -->
<WorkflowAddEditDialog v-if="addDialog" v-model="addDialog" @close="addDialog = false" @save="addDone" /> <WorkflowAddEditDialog v-if="addDialog" v-model="addDialog" @close="addDialog = false" @save="addDone" />
</template> </template>