fix ui

2026-07-09 14:31:35 +08:00 · 2025-03-30 19:54:55 +08:00
parent a909cdc21c
commit ef5db9ee4b
10 changed files with 249 additions and 304 deletions
--- a/src/components/filebrowser/FileNavigator.vue
+++ b/src/components/filebrowser/FileNavigator.vue
@@ -12,34 +12,34 @@ const display = useDisplay()
 const props = defineProps({
  storage: {
    type: String,
-    default: 'local'
+    default: 'local',
  },
  currentPath: {
    type: String,
-    default: '/'
+    default: '/',
  },
  items: {
    type: Array as PropType<FileItem[]>,
-    default: () => []
+    default: () => [],
  },
  endpoints: Object,
  axios: {
    type: Object as PropType<Axios>,
    required: true,
-  }
+  },
 })

 // 对外事件
 const emit = defineEmits(['navigate'])

 // 树形节点缓存
-const treeCache = ref<{[key: string]: FileItem[]}>({})
+const treeCache = ref<{ [key: string]: FileItem[] }>({})

 // 展开的文件夹
 const expandedFolders = ref<string[]>([])

 // 是否正在加载
-const loading = ref<{[key: string]: boolean}>({})
+const loading = ref<{ [key: string]: boolean }>({})

 // 点击目录
 function handleFolderClick(item: FileItem) {
@@ -79,33 +79,33 @@ function renderFolderIcon(isExpanded: boolean) {
 async function loadSubdirectories(path: string) {
  // 如果已经在加载中或已有缓存，跳过
  if (loading.value[path] || treeCache.value[path]) return
-  
+
  // 标记为加载中
  loading.value[path] = true
-  
+
  try {
    // 构建假的文件项以加载目录内容
    const fakeItem: FileItem = {
      storage: props.storage,
      type: 'dir',
      name: path.split('/').pop() || '/',
-      path: path
+      path: path,
    }
-    
+
    // 调用API加载目录内容
    const url = props.endpoints?.list.url.replace(/{sort}/g, 'name')
-    
+
    const config: AxiosRequestConfig<FileItem> = {
      url,
      method: props.endpoints?.list.method || 'get',
      data: fakeItem,
    }
-    
+
    const result = await props.axios?.request(config)
    if (result && Array.isArray(result)) {
      // 过滤出目录项
      const dirs = result.filter(item => item.type === 'dir')
-      
+
      // 缓存目录内容
      treeCache.value[path] = dirs
    }
@@ -129,24 +129,28 @@ function getDirectoryDepth(path: string) {

 // 检索所有目录节点
 function getAllDirectories() {
-  const allDirs: {dir: FileItem, level: number, parentPath: string}[] = []
-  
+  const allDirs: { dir: FileItem; level: number; parentPath: string }[] = []
+
  // 添加根目录的子目录
  if (treeCache.value['/']) {
    treeCache.value['/'].forEach(dir => {
-      allDirs.push({dir, level: 0, parentPath: '/'})
+      allDirs.push({ dir, level: 0, parentPath: '/' })
      addSubdirectories(dir.path || '', 1, allDirs)
    })
  }
-  
+
  return allDirs
 }

 // 递归添加子目录
-function addSubdirectories(parentPath: string, level: number, result: {dir: FileItem, level: number, parentPath: string}[]) {
+function addSubdirectories(
+  parentPath: string,
+  level: number,
+  result: { dir: FileItem; level: number; parentPath: string }[],
+) {
  if (treeCache.value[parentPath]) {
    treeCache.value[parentPath].forEach(dir => {
-      result.push({dir, level, parentPath})
+      result.push({ dir, level, parentPath })
      if (isFolderExpanded(dir.path || '')) {
        addSubdirectories(dir.path || '', level + 1, result)
      }
@@ -155,47 +159,55 @@ function addSubdirectories(parentPath: string, level: number, result: {dir: File
 }

 // 监听当前路径变化，自动展开当前路径
-watch(() => props.currentPath, async (newPath) => {
-  if (!newPath) return
-  
-  // 如果当前路径不是根目录，自动展开父目录
-  if (newPath !== '/') {
-    const parts = newPath.split('/').filter(p => p)
-    let currentPath = ''
-    
-    // 展开到当前路径的每一层
-    for (const part of parts) {
-      currentPath += '/' + part
-      
-      // 如果该路径未展开，则展开它
-      if (!expandedFolders.value.includes(currentPath)) {
-        expandedFolders.value.push(currentPath)
-        
-        // 确保子目录已加载
-        if (!treeCache.value[currentPath]) {
-          await loadSubdirectories(currentPath)
+watch(
+  () => props.currentPath,
+  async newPath => {
+    if (!newPath) return
+
+    // 如果当前路径不是根目录，自动展开父目录
+    if (newPath !== '/') {
+      const parts = newPath.split('/').filter(p => p)
+      let currentPath = ''
+
+      // 展开到当前路径的每一层
+      for (const part of parts) {
+        currentPath += '/' + part
+
+        // 如果该路径未展开，则展开它
+        if (!expandedFolders.value.includes(currentPath)) {
+          expandedFolders.value.push(currentPath)
+
+          // 确保子目录已加载
+          if (!treeCache.value[currentPath]) {
+            await loadSubdirectories(currentPath)
+          }
+        }
+
+        // 如果有上一级目录，确保它已加载
+        const parentPath = currentPath.substring(0, currentPath.lastIndexOf('/')) || '/'
+        if (!treeCache.value[parentPath]) {
+          await loadSubdirectories(parentPath)
        }
      }
-      
-      // 如果有上一级目录，确保它已加载
-      const parentPath = currentPath.substring(0, currentPath.lastIndexOf('/')) || '/'
-      if (!treeCache.value[parentPath]) {
-        await loadSubdirectories(parentPath)
-      }
    }
-  }
-}, { immediate: true })
+  },
+  { immediate: true },
+)

 // 监听目录变化，缓存当前目录的内容
-watch(() => props.items, (newItems) => {
-  if (newItems && newItems.length > 0) {
-    // 过滤出目录项
-    const dirs = newItems.filter(item => item.type === 'dir')
-    
-    // 缓存当前目录内容
-    treeCache.value[props.currentPath || '/'] = dirs
-  }
-}, { immediate: true })
+watch(
+  () => props.items,
+  newItems => {
+    if (newItems && newItems.length > 0) {
+      // 过滤出目录项
+      const dirs = newItems.filter(item => item.type === 'dir')
+
+      // 缓存当前目录内容
+      treeCache.value[props.currentPath || '/'] = dirs
+    }
+  },
+  { immediate: true },
+)

 // 是否为移动端
 const isMobile = computed(() => {
@@ -219,106 +231,91 @@ onMounted(async () => {

 // 检查路径是否为指定目录的子目录或后代
 function isChildOrDescendant(path: string, ancestorPath: string) {
-  if (!path || !ancestorPath) return false;
-  if (ancestorPath === '/') return true;
-  
+  if (!path || !ancestorPath) return false
+  if (ancestorPath === '/') return true
+
  // 确保路径以斜杠结尾，便于比较
-  const normalizedPath = path.endsWith('/') ? path : path + '/';
-  const normalizedAncestorPath = ancestorPath.endsWith('/') ? ancestorPath : ancestorPath + '/';
-  
+  const normalizedPath = path.endsWith('/') ? path : path + '/'
+  const normalizedAncestorPath = ancestorPath.endsWith('/') ? ancestorPath : ancestorPath + '/'
+
  // 检查路径是否以祖先路径开头，但不是祖先路径本身
-  return normalizedPath.startsWith(normalizedAncestorPath) && normalizedPath !== normalizedAncestorPath;
+  return normalizedPath.startsWith(normalizedAncestorPath) && normalizedPath !== normalizedAncestorPath
 }

 // 计算目录相对于其祖先的缩进级别
 function getIndentLevel(path: string, ancestorPath: string) {
-  if (!path || !ancestorPath) return 0;
-  
+  if (!path || !ancestorPath) return 0
+
  // 根目录特殊处理
  if (ancestorPath === '/') {
-    return path.split('/').filter(p => p).length - 1;
+    return path.split('/').filter(p => p).length - 1
  }
-  
+
  // 计算路径中斜杠的数量差异
-  const pathParts = path.split('/').filter(p => p).length;
-  const ancestorParts = ancestorPath.split('/').filter(p => p).length;
-  
-  return pathParts - ancestorParts;
+  const pathParts = path.split('/').filter(p => p).length
+  const ancestorParts = ancestorPath.split('/').filter(p => p).length
+
+  return pathParts - ancestorParts
 }
 </script>

 <template>
  <div class="file-navigator" v-if="!isMobile">
-    <div class="navigator-header">
-      <VIcon icon="mdi-folder-home" color="primary" class="me-2" />
-      <span class="font-weight-medium">文件导航</span>
-    </div>
-    
    <div class="tree-container">
      <!-- 根目录项 -->
-      <div 
+      <div
        class="tree-item root-item"
        :class="{ 'active': currentPath === '/' }"
-        @click="handleFolderClick({ 
-          storage: storage, 
-          type: 'dir', 
-          name: '/',
-          path: '/'
-        })"
+        @click="
+          handleFolderClick({
+            storage: storage,
+            type: 'dir',
+            name: '/',
+            path: '/',
+          })
+        "
      >
        <div class="folder-content">
-          <VIcon 
-            size="small" 
-            icon="mdi-home" 
-            :color="currentPath === '/' ? 'primary' : 'grey-darken-1'" 
-            class="me-2"
-          />
          <span>根目录</span>
        </div>
      </div>
-      
+
      <!-- 加载根目录 -->
      <div v-if="loading['/']" class="tree-loading">
        <VProgressCircular indeterminate size="24" color="primary" class="ma-2" />
        <span>加载目录结构...</span>
      </div>
-      
+
      <!-- 目录树结构 -->
      <template v-else>
        <!-- 一级目录(根目录下的目录) -->
        <div v-for="directory in rootDirectories" :key="directory.path" class="tree-item-container">
          <!-- 目录项 -->
-          <div 
-            class="tree-item"
-            :class="{ 'active': currentPath === directory.path }"
-          >
+          <div class="tree-item" :class="{ 'active': currentPath === directory.path }">
            <div class="folder-toggle" @click.stop="toggleFolder(directory.path || '')">
-              <VProgressCircular 
-                v-if="loading[directory.path || '']" 
-                indeterminate 
-                size="14" 
-                width="2" 
-                color="primary" 
+              <VProgressCircular
+                v-if="loading[directory.path || '']"
+                indeterminate
+                size="14"
+                width="2"
+                color="primary"
              />
-              <VIcon 
+              <VIcon
                v-else
-                size="small" 
-                :icon="isFolderExpanded(directory.path || '') ? 'mdi-chevron-down' : 'mdi-chevron-right'" 
+                size="small"
+                :icon="isFolderExpanded(directory.path || '') ? 'mdi-chevron-down' : 'mdi-chevron-right'"
              />
            </div>
            <div class="folder-content" @click.stop="handleFolderClick(directory)">
-              <VIcon 
-                size="small" 
-                :icon="renderFolderIcon(isFolderExpanded(directory.path || ''))" 
-                :color="currentPath === directory.path ? 'primary' : 'amber-darken-1'" 
+              <VIcon
+                size="small"
+                :icon="renderFolderIcon(isFolderExpanded(directory.path || ''))"
+                :color="currentPath === directory.path ? 'primary' : 'amber-darken-1'"
                class="me-1"
              />
              <VTooltip :disabled="directory.name.length <= 18">
                <template #activator="{ props: tooltipProps }">
-                  <span 
-                    class="folder-name" 
-                    v-bind="tooltipProps"
-                  >
+                  <span class="folder-name" v-bind="tooltipProps">
                    {{ directory.name }}
                  </span>
                </template>
@@ -326,7 +323,7 @@ function getIndentLevel(path: string, ancestorPath: string) {
              </VTooltip>
            </div>
          </div>
-          
+
          <!-- 子目录容器 - 如果该目录被展开，显示其所有子目录 -->
          <div v-if="isFolderExpanded(directory.path || '')">
            <!-- 加载中状态 -->
@@ -334,48 +331,45 @@ function getIndentLevel(path: string, ancestorPath: string) {
              <VProgressCircular indeterminate size="14" color="primary" class="ma-2" />
              <span class="text-caption">加载中...</span>
            </div>
-            
+
            <!-- 所有层级的子目录列表 -->
            <div v-else>
              <!-- 遍历所有扁平化的目录列表，查找对应层级的目录 -->
-              <div 
-                v-for="item in flattenedDirectories" 
-                :key="item.dir.path" 
-                v-show="isChildOrDescendant(item.dir.path || '', directory.path || '')" 
+              <div
+                v-for="item in flattenedDirectories"
+                :key="item.dir.path"
+                v-show="isChildOrDescendant(item.dir.path || '', directory.path || '')"
                class="tree-item"
                :class="{ 'active': currentPath === item.dir.path }"
-                :style="{ paddingLeft: (16 + getIndentLevel(item.dir.path || '', directory.path || '') * 12) + 'px' }"
+                :style="{ paddingLeft: 16 + getIndentLevel(item.dir.path || '', directory.path || '') * 12 + 'px' }"
              >
                <!-- 展开/折叠按钮 -->
                <div class="folder-toggle" @click.stop="toggleFolder(item.dir.path || '')">
-                  <VProgressCircular 
-                    v-if="loading[item.dir.path || '']" 
-                    indeterminate 
-                    size="14" 
-                    width="2" 
-                    color="primary" 
+                  <VProgressCircular
+                    v-if="loading[item.dir.path || '']"
+                    indeterminate
+                    size="14"
+                    width="2"
+                    color="primary"
                  />
-                  <VIcon 
+                  <VIcon
                    v-else
-                    size="small" 
-                    :icon="isFolderExpanded(item.dir.path || '') ? 'mdi-chevron-down' : 'mdi-chevron-right'" 
+                    size="small"
+                    :icon="isFolderExpanded(item.dir.path || '') ? 'mdi-chevron-down' : 'mdi-chevron-right'"
                  />
                </div>
-                
+
                <!-- 文件夹图标和名称 -->
                <div class="folder-content" @click.stop="handleFolderClick(item.dir)">
-                  <VIcon 
-                    size="small" 
-                    :icon="renderFolderIcon(isFolderExpanded(item.dir.path || ''))" 
-                    :color="currentPath === item.dir.path ? 'primary' : 'amber-darken-1'" 
+                  <VIcon
+                    size="small"
+                    :icon="renderFolderIcon(isFolderExpanded(item.dir.path || ''))"
+                    :color="currentPath === item.dir.path ? 'primary' : 'amber-darken-1'"
                    class="me-1"
                  />
                  <VTooltip :disabled="item.dir.name.length <= 18">
                    <template #activator="{ props: tooltipProps }">
-                      <span 
-                        class="folder-name" 
-                        v-bind="tooltipProps"
-                      >
+                      <span class="folder-name" v-bind="tooltipProps">
                        {{ item.dir.name }}
                      </span>
                    </template>
@@ -432,11 +426,11 @@ function getIndentLevel(path: string, ancestorPath: string) {
  min-width: 100%;
  max-width: 100%;
  box-sizing: border-box;
-  
+
  &:hover {
    background-color: rgba(var(--v-theme-primary), 0.05);
  }
-  
+
  &.active {
    background-color: rgba(var(--v-theme-primary), 0.08);
  }
@@ -488,4 +482,4 @@ function getIndentLevel(path: string, ancestorPath: string) {
 .pl-8 {
  padding-left: 20px !important;
 }
-</style> 
+</style>