在多个视图组件中添加动态按钮功能,支持不同操作的弹窗显示,优化按钮显示逻辑以提升用户交互体验。

This commit is contained in:
jxxghp
2025-04-20 14:30:39 +08:00
parent 87c11eda46
commit 1ffcfe643c
4 changed files with 40 additions and 6 deletions
+10
View File
@@ -11,6 +11,7 @@ import { useDisplay } from 'vuetify'
import { isNullOrEmptyObject } from '@/@core/utils' import { isNullOrEmptyObject } from '@/@core/utils'
import { PluginTabs } from '@/router/menu' import { PluginTabs } from '@/router/menu'
import PluginMarketSettingDialog from '@/components/dialog/PluginMarketSettingDialog.vue' import PluginMarketSettingDialog from '@/components/dialog/PluginMarketSettingDialog.vue'
import { useDynamicButton } from '@/composables/useDynamicButton'
const route = useRoute() const route = useRoute()
@@ -454,6 +455,14 @@ onMounted(async () => {
} }
} }
}) })
// 使用动态按钮钩子
useDynamicButton({
icon: 'mdi-view-dashboard-edit',
onClick: () => {
SearchDialog.value = true
},
})
</script> </script>
<template> <template>
@@ -668,6 +677,7 @@ onMounted(async () => {
<div v-if="isRefreshed"> <div v-if="isRefreshed">
<!-- 插件搜索图标 --> <!-- 插件搜索图标 -->
<VFab <VFab
v-if="!appMode"
icon="mdi-magnify" icon="mdi-magnify"
color="info" color="info"
location="bottom" location="bottom"
+10 -1
View File
@@ -6,6 +6,7 @@ import SiteCard from '@/components/cards/SiteCard.vue'
import NoDataFound from '@/components/NoDataFound.vue' import NoDataFound from '@/components/NoDataFound.vue'
import SiteAddEditDialog from '@/components/dialog/SiteAddEditDialog.vue' import SiteAddEditDialog from '@/components/dialog/SiteAddEditDialog.vue'
import { useDisplay } from 'vuetify' import { useDisplay } from 'vuetify'
import { useDynamicButton } from '@/composables/useDynamicButton'
// APP // APP
const display = useDisplay() const display = useDisplay()
@@ -84,6 +85,14 @@ onActivated(() => {
fetchUserData() fetchUserData()
} }
}) })
// 使用动态按钮钩子
useDynamicButton({
icon: 'mdi-view-dashboard-edit',
onClick: () => {
siteAddDialog.value = true
},
})
</script> </script>
<template> <template>
@@ -113,7 +122,7 @@ onActivated(() => {
/> />
<!-- 新增站点按钮 --> <!-- 新增站点按钮 -->
<VFab <VFab
v-if="isRefreshed" v-if="isRefreshed && !appMode"
icon="mdi-plus" icon="mdi-plus"
location="bottom" location="bottom"
size="x-large" size="x-large"
+10 -1
View File
@@ -7,6 +7,7 @@ import SubscribeCard from '@/components/cards/SubscribeCard.vue'
import SubscribeHistoryDialog from '@/components/dialog/SubscribeHistoryDialog.vue' import SubscribeHistoryDialog from '@/components/dialog/SubscribeHistoryDialog.vue'
import { useUserStore } from '@/stores' import { useUserStore } from '@/stores'
import { useDisplay } from 'vuetify' import { useDisplay } from 'vuetify'
import { useDynamicButton } from '@/composables/useDynamicButton'
// APP // APP
const display = useDisplay() const display = useDisplay()
@@ -148,6 +149,14 @@ onActivated(async () => {
fetchData() fetchData()
} }
}) })
// 使用动态按钮钩子
useDynamicButton({
icon: 'mdi-history',
onClick: () => {
historyDialog.value = true
},
})
</script> </script>
<template> <template>
@@ -175,7 +184,7 @@ onActivated(async () => {
<!-- 底部操作按钮 --> <!-- 底部操作按钮 -->
<div v-if="isRefreshed"> <div v-if="isRefreshed">
<VFab <VFab
v-if="userStore.superUser" v-if="userStore.superUser && !appMode"
icon="mdi-history" icon="mdi-history"
color="info" color="info"
location="bottom" location="bottom"
+10 -4
View File
@@ -5,7 +5,7 @@ import { useDisplay } from 'vuetify'
import WorkflowAddEditDialog from '@/components/dialog/WorkflowAddEditDialog.vue' import WorkflowAddEditDialog from '@/components/dialog/WorkflowAddEditDialog.vue'
import WorkflowTaskCard from '@/components/cards/WorkflowTaskCard.vue' import WorkflowTaskCard from '@/components/cards/WorkflowTaskCard.vue'
import NoDataFound from '@/components/NoDataFound.vue' import NoDataFound from '@/components/NoDataFound.vue'
import { useDynamicButton } from '@/composables/useDynamicButton'
// APP // APP
const display = useDisplay() const display = useDisplay()
const appMode = inject('pwaMode') && display.mdAndDown.value const appMode = inject('pwaMode') && display.mdAndDown.value
@@ -42,11 +42,17 @@ onMounted(() => {
onActivated(() => { onActivated(() => {
fetchData() fetchData()
}) })
</script>
// 使用动态按钮钩子 新增
useDynamicButton({
icon: 'mdi-plus',
onClick: () => {
addDialog.value = true
},
})
</script>
<template> <template>
<div> <div>
<VPageContentTitle title="工作流" /> <VPageContentTitle title="工作流" />
<LoadingBanner v-if="!isRefreshed" class="mt-12" /> <LoadingBanner v-if="!isRefreshed" class="mt-12" />
<VRow v-if="workflowList.length > 0" class="match-height"> <VRow v-if="workflowList.length > 0" class="match-height">
@@ -64,7 +70,7 @@ onActivated(() => {
<!-- 新增按钮 --> <!-- 新增按钮 -->
<VFab <VFab
v-if="isRefreshed" v-if="isRefreshed && !appMode"
icon="mdi-plus" icon="mdi-plus"
location="bottom" location="bottom"
size="x-large" size="x-large"