在 Footer 组件中添加动态按钮功能，支持注册和注销动态按钮，优化按钮显示逻辑；在 Dashboard 页面中集成动态按钮，增强用户交互体验。

src/composables/useDynamicButton.ts

@@ -0,0 +1,124 @@
+import { ref, inject, nextTick, onMounted, onActivated, onDeactivated, onUnmounted } from 'vue'
+
+// 声明全局变量类型
+declare global {
+  interface Window {
+    __VUE_INJECT_DYNAMIC_BUTTON__?: (button: any) => void
+  }
+}
+
+/**
+ * 动态按钮钩子函数
+ *
+ * @param options 配置选项
+ * @returns 控制函数和状态
+ *
+ * @example
+ * // 在页面中使用
+ * const { openDialog } = useDynamicButton({
+ *   icon: 'mdi-cog',
+ *   onClick: () => {
+ *     dialog.value = true
+ *   }
+ * })
+ */
+export function useDynamicButton(options: {
+  icon: string
+  onClick: () => void
+  autoRegister?: boolean // 是否自动注册，默认为true
+}) {
+  // 提取配置
+  const { icon, onClick, autoRegister = true } = options
+
+  // 动态按钮相关
+  const registerDynamicButton = inject<((button: any) => void) | null>('registerDynamicButton', null)
+  const unregisterDynamicButton = inject<(() => void) | null>('unregisterDynamicButton', null)
+
+  // 按钮注册状态
+  const dynamicButtonRegistered = ref(false)
+
+  // 注册动态按钮
+  function setupDynamicButton() {
+    // 避免重复注册
+    if (dynamicButtonRegistered.value) return
+
+    // 确保注册方法存在
+    if (!registerDynamicButton) {
+      // 尝试获取全局注册方法
+      const tryUseGlobalMethod = () => {
+        if (typeof window !== 'undefined' && window.__VUE_INJECT_DYNAMIC_BUTTON__) {
+          window.__VUE_INJECT_DYNAMIC_BUTTON__({
+            icon,
+            action: onClick,
+            show: true,
+          })
+          dynamicButtonRegistered.value = true
+          return true
+        }
+        return false
+      }
+
+      // 立即尝试一次
+      if (!tryUseGlobalMethod()) {
+        // 如果失败，延迟再试一次
+        setTimeout(tryUseGlobalMethod, 1000)
+      }
+      return
+    }
+
+    // 如果注册方法存在，直接注册
+    nextTick(() => {
+      registerDynamicButton({
+        icon,
+        action: onClick,
+        show: true,
+      })
+      dynamicButtonRegistered.value = true
+    })
+  }
+
+  // 取消注册动态按钮
+  function cleanupDynamicButton() {
+    if (unregisterDynamicButton && dynamicButtonRegistered.value) {
+      unregisterDynamicButton()
+      dynamicButtonRegistered.value = false
+    }
+  }
+
+  // 暴露方法：手动打开对话框
+  function openDialog() {
+    onClick()
+  }
+
+  // 生命周期钩子
+  if (autoRegister) {
+    onMounted(() => {
+      // 延迟执行，确保Footer组件已加载
+      setTimeout(() => {
+        setupDynamicButton()
+      }, 500)
+    })
+
+    onActivated(() => {
+      // 重置注册状态，确保每次激活时都重新注册
+      dynamicButtonRegistered.value = false
+      setupDynamicButton()
+    })
+
+    onDeactivated(() => {
+      cleanupDynamicButton()
+    })
+
+    onUnmounted(() => {
+      cleanupDynamicButton()
+    })
+  }
+
+  // 返回控制函数和状态
+  return {
+    setupDynamicButton, // 手动注册按钮
+    cleanupDynamicButton, // 手动取消注册
+    openDialog, // 手动触发点击事件
+    isRegistered: dynamicButtonRegistered, // 注册状态
+  }
+}

src/layouts/components/Footer.vue

@@ -26,9 +26,64 @@ watch(
   () => route.path,
   newPath => {
     currentMenu.value = getMenuPathFromRoute(newPath)
+    // 当路由变化时，清除动态按钮
+    dynamicButton.value = null
   },
   { immediate: false },
 )
+
+// 动态按钮相关
+// 定义动态按钮类型
+interface DynamicButton {
+  icon: string
+  action: () => void
+  show: boolean
+  routePath?: string // 添加路径属性，用于标识哪个路由注册的
+}
+
+// 提供动态按钮注册和获取的方法
+const dynamicButton = ref<DynamicButton | null>(null)
+
+// 提供一个方法让其他组件注册动态按钮
+const registerDynamicButton = (button: DynamicButton) => {
+  // 保存注册按钮的路由路径
+  button.routePath = route.path
+  dynamicButton.value = button
+}
+
+// 提供一个方法让其他组件取消注册动态按钮
+const unregisterDynamicButton = () => {
+  dynamicButton.value = null
+}
+
+// 添加全局注册方法，解决注入不可用的问题
+if (typeof window !== 'undefined') {
+  // 确保在浏览器环境中
+  ;(window as any).__VUE_INJECT_DYNAMIC_BUTTON__ = registerDynamicButton
+}
+
+// 提供给其他组件使用
+provide('registerDynamicButton', registerDynamicButton)
+provide('unregisterDynamicButton', unregisterDynamicButton)
+
+// 在组件销毁时清理
+onUnmounted(() => {
+  dynamicButton.value = null
+  // 清理全局方法
+  if (typeof window !== 'undefined') {
+    delete (window as any).__VUE_INJECT_DYNAMIC_BUTTON__
+  }
+})
+
+// 显示动态按钮
+const showDynamicButton = computed(() => {
+  return (
+    dynamicButton.value &&
+    dynamicButton.value.show &&
+    // 确保只在注册的路由路径下显示按钮
+    (!dynamicButton.value.routePath || dynamicButton.value.routePath === route.path)
+  )
+})
 </script>
 
 <template>
@@ -77,6 +132,23 @@ watch(
           </VBtnToggle>
         </VCardText>
       </VCard>
+      <VCard v-if="showDynamicButton" class="footer-nav-card dynamic-btn-card border" rounded="pill">
+        <VCardText class="footer-card-content">
+          <!-- 各页面的动态按钮 -->
+          <VBtn
+            variant="text"
+            color="primary"
+            :ripple="false"
+            @click="dynamicButton?.action()"
+            rounded="pill"
+            class="footer-nav-btn"
+          >
+            <div class="btn-content">
+              <VIcon :icon="dynamicButton?.icon || 'mdi-plus'" size="24"></VIcon>
+            </div>
+          </VBtn>
+        </VCardText>
+      </VCard>
     </div>
   </Teleport>
 </template>
@@ -91,7 +163,13 @@ watch(
   padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
   display: flex;
   justify-content: center;
+  align-items: center;
   pointer-events: none;
+
+  // 按钮卡片之间的间距
+  > .v-card + .v-card {
+    margin-left: 4px;
+  }
 }
 
 .footer-nav-card {
@@ -103,6 +181,32 @@ watch(
   position: relative;
 }
 
+// 动态按钮卡片样式
+.dynamic-btn-card {
+  min-height: 0;
+  height: auto;
+  width: auto;
+
+  .footer-card-content {
+    padding: 3px;
+  }
+
+  .footer-nav-btn {
+    min-width: 40px;
+    width: 40px;
+    height: 40px;
+    padding: 0;
+
+    .btn-content {
+      margin: 0;
+    }
+
+    .v-icon {
+      margin-bottom: 0;
+    }
+  }
+}
+
 .footer-card-content {
   padding: 6px 8px;
   position: relative;

src/pages/dashboard.vue

@@ -6,6 +6,7 @@ import { DashboardItem } from '@/api/types'
 import { useUserStore } from '@/stores'
 import DashboardElement from '@/components/misc/DashboardElement.vue'
 import { useDisplay } from 'vuetify'
+import { useDynamicButton } from '@/composables/useDynamicButton'
 
 // APP
 const display = useDisplay()
@@ -141,6 +142,14 @@ const pluginDashboardRefreshStatus = ref<{ [key: string]: boolean }>({})
 // 弹窗
 const dialog = ref(false)
 
+// 使用动态按钮钩子
+useDynamicButton({
+  icon: 'mdi-view-dashboard-edit',
+  onClick: () => {
+    dialog.value = true
+  },
+})
+
 // 加载用户监控面板配置（本地无配置时才加载）
 async function loadDashboardConfig() {
   // 显示配置
@@ -297,7 +306,7 @@ onBeforeMount(async () => {
   getPluginDashboardMeta()
 })
 
-onActivated(async () => {
+onActivated(() => {
   isRequest.value = true
 })
 
@@ -327,8 +336,9 @@ onDeactivated(() => {
     </template>
   </draggable>
 
-  <!-- 底部操作按钮 -->
+  <!-- 底部操作按钮（只在非移动设备上显示） -->
   <VFab
+    v-if="!appMode"
     icon="mdi-view-dashboard-edit"
     location="bottom"
     size="x-large"
@@ -336,7 +346,6 @@ onDeactivated(() => {
     app
     appear
     @click="dialog = true"
-    :class="{ 'mb-12': appMode }"
   />
 
   <!-- 弹窗，根据配置生成选项 -->