refactor: enhance dynamic button system to support menus, reactive properties, and improved PWA floating action button integration

src/components/FileBrowser.vue

@@ -5,6 +5,8 @@ import FileNavigator from './filebrowser/FileNavigator.vue'
 import type { EndPoints, FileItem, StorageConf } from '@/api/types'
 import { storageIconDict } from '@/api/constants'
 import type { AxiosInstance } from 'axios'
+import { useDynamicButton } from '@/composables/useDynamicButton'
+import { usePWA } from '@/composables/usePWA'
 
 // LocalStorage keys
 const SORT_KEY = 'fileBrowser.sort'
@@ -33,6 +35,9 @@ const props = defineProps({
 
 // 对外事件
 const emit = defineEmits(['pathchanged'])
+const route = useRoute()
+const { appMode } = usePWA()
+const toolbarRef = ref<InstanceType<typeof FileToolbar> | null>(null)
 
 const fileIcons = {
   // 压缩包
@@ -123,6 +128,18 @@ const fileIcons = {
   other: 'mdi-file-outline',
 }
 
+function openNewFolderDialog() {
+  toolbarRef.value?.openNewFolderDialog()
+}
+
+const showFloatingNewFolderAction = computed(() => route.path === '/filemanager')
+
+useDynamicButton({
+  icon: 'mdi-folder-plus-outline',
+  onClick: openNewFolderDialog,
+  show: computed(() => appMode.value && showFloatingNewFolderAction.value),
+})
+
 // 加载次数
 const loading = ref(0)
 
@@ -254,12 +271,14 @@ function stopDrag() {
   <div class="mx-auto" :loading="loading > 0">
     <div v-if="item">
       <FileToolbar
+        ref="toolbarRef"
         :sort="sort"
         :item="item"
         :itemstack="itemstack"
         :storages="storagesArray"
         :endpoints="endpoints"
         :axios="axios"
+        :show-new-folder-button="!showFloatingNewFolderAction"
         @storagechanged="storageChanged"
         @pathchanged="pathChanged"
         @foldercreated="refreshPending = true"
@@ -301,6 +320,18 @@ function stopDrag() {
       </div>
     </div>
   </div>
+
+  <Teleport to="body" v-if="!appMode && showFloatingNewFolderAction">
+    <VFab
+      icon="mdi-folder-plus-outline"
+      location="bottom"
+      size="x-large"
+      fixed
+      app
+      appear
+      @click="openNewFolderDialog"
+    />
+  </Teleport>
 </template>
 
 <style scoped>

src/components/filebrowser/FileToolbar.vue

@@ -30,6 +30,10 @@ const inProps = defineProps({
     type: String,
     default: 'name',
   },
+  showNewFolderButton: {
+    type: Boolean,
+    default: true,
+  },
 })
 
 // 对外事件
@@ -109,11 +113,20 @@ async function mkdir() {
   emit('foldercreated')
 }
 
+function openNewFolderDialog() {
+  newFolderName.value = ''
+  newFolderPopper.value = true
+}
+
 // 计算排序图标
 const sortIcon = computed(() => {
   if (inProps.sort === 'time') return 'mdi-sort-clock-ascending-outline'
   else return 'mdi-sort-alphabetical-ascending'
 })
+
+defineExpose({
+  openNewFolderDialog,
+})
 </script>
 
 <template>
@@ -165,9 +178,9 @@ const sortIcon = computed(() => {
     </IconBtn>
     <!-- 新建文件夹 -->
     <VDialog v-model="newFolderPopper" max-width="35rem">
-      <template #activator="{ props }">
-        <IconBtn>
-          <VIcon v-bind="props" icon="mdi-folder-plus-outline" />
+      <template v-if="showNewFolderButton" #activator="{ props }">
+        <IconBtn v-bind="props">
+          <VIcon icon="mdi-folder-plus-outline" />
         </IconBtn>
       </template>
       <VCard>