feat: 集成文件系统真实API并优化文件类型识别
- 创建 fileSystemService.ts 服务层封装后端 API 调用 - 实现 useFileSystemAPI.ts 组合式函数进行状态管理 - 修改 FieldView.vue 默认启用真实 API 模式 - 修复面包屑导航和历史记录前进后退功能 - 实现文件类型智能识别(支持 30+ 图片和 20+ 视频格式) - 不支持的文件显示扩展名徽章而非照片图标 - 添加完整的集成文档和使用说明 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
jimmyandClaude committed
1 parent
725bc466c1
commit
bfafbb3b82
12 files changed
+2006
-41
No files matched your search
@@ -82,6 +82,28 @@
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<!-- API 集成状态 -->
|
||||
<section class="debug-section">
|
||||
<h4>🔌 API 集成</h4>
|
||||
<table class="metrics-table">
|
||||
<tr>
|
||||
<td>数据源:</td>
|
||||
<td><strong>{{ useRealApi ? '真实 API' : 'Mock 数据' }}</strong></td>
|
||||
</tr>
|
||||
<tr v-if="useRealApi">
|
||||
<td>加载状态:</td>
|
||||
<td><strong>{{ apiLoading ? '⏳ 加载中' : '✅ 就绪' }}</strong></td>
|
||||
</tr>
|
||||
<tr v-if="useRealApi && apiError">
|
||||
<td>错误信息:</td>
|
||||
<td class="error-text"><strong>{{ apiError }}</strong></td>
|
||||
</tr>
|
||||
</table>
|
||||
<button @click="$emit('toggle-api')" class="btn-primary" style="width: 100%; margin-top: 8px;">
|
||||
{{ useRealApi ? '切换到 Mock 数据' : '切换到真实 API' }}
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<section class="debug-section">
|
||||
<h4>⚡ 快速操作</h4>
|
||||
@@ -116,6 +138,9 @@ interface DebugMetrics {
|
||||
const props = defineProps<{
|
||||
visible: boolean
|
||||
metrics: DebugMetrics
|
||||
useRealApi?: boolean
|
||||
apiLoading?: boolean
|
||||
apiError?: string | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -123,6 +148,7 @@ const emit = defineEmits<{
|
||||
(e: 'generate', count: number): void
|
||||
(e: 'scrollTo', position: 'top' | 'bottom' | 'middle'): void
|
||||
(e: 'clear'): void
|
||||
(e: 'toggle-api'): void
|
||||
}>()
|
||||
|
||||
const testCount = ref(1000)
|
||||
@@ -311,6 +337,15 @@ function clearData() {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.metrics-table .error-text {
|
||||
color: #ff0000;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.metrics-table .error-text strong {
|
||||
color: #ff4444;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
@@ -79,6 +79,7 @@
|
||||
:sort-options="paneConfigs.left.sortOptions"
|
||||
:filter-options="paneConfigs.left.filterOptions"
|
||||
:is-active="activePane === 'left'"
|
||||
:use-real-api="props.useRealApi"
|
||||
@activate="activePane = 'left'"
|
||||
/>
|
||||
|
||||
@@ -97,6 +98,7 @@
|
||||
:sort-options="paneConfigs.right.sortOptions"
|
||||
:filter-options="paneConfigs.right.filterOptions"
|
||||
:is-active="activePane === 'right'"
|
||||
:use-real-api="props.useRealApi"
|
||||
@activate="activePane = 'right'"
|
||||
/>
|
||||
</div>
|
||||
@@ -108,6 +110,13 @@ import { ref, computed } from 'vue'
|
||||
import FilePane from './FilePane.vue'
|
||||
import type { ViewMode, ThumbnailSize, LayoutMode, PaneId, SortOptions, FilterOptions } from './types'
|
||||
|
||||
// Props
|
||||
const props = withDefaults(defineProps<{
|
||||
useRealApi?: boolean // 是否使用真实 API
|
||||
}>(), {
|
||||
useRealApi: false // 默认使用 mock 数据
|
||||
})
|
||||
|
||||
// FilePane refs
|
||||
const leftPaneRef = ref<InstanceType<typeof FilePane>>()
|
||||
const rightPaneRef = ref<InstanceType<typeof FilePane>>()
|
||||
|
||||
@@ -116,7 +116,7 @@
|
||||
@drop="handleDrop($event, item)"
|
||||
>
|
||||
<div class="file-icon">
|
||||
{{ item.type === 'folder' ? '📁' : '🖼️' }}
|
||||
{{ getFileIcon(item.type, item.extension) }}
|
||||
</div>
|
||||
<div class="file-name" v-html="highlightText(item.name)"></div>
|
||||
<div v-if="item.size" class="file-size">{{ item.size }}</div>
|
||||
@@ -175,7 +175,7 @@
|
||||
@dragleave="handleDragLeave($event)"
|
||||
@drop="handleDrop($event, item)"
|
||||
>
|
||||
<span class="list-icon">{{ item.type === 'folder' ? '📁' : '🖼️' }}</span>
|
||||
<span class="list-icon">{{ getFileIcon(item.type, item.extension) }}</span>
|
||||
<span class="list-name" v-html="highlightText(item.name)"></span>
|
||||
<span class="list-size">{{ item.size || '-' }}</span>
|
||||
<span class="list-date">{{ item.date || '-' }}</span>
|
||||
@@ -244,10 +244,14 @@
|
||||
v-if="isDevelopment"
|
||||
:visible="debugPanelVisible"
|
||||
:metrics="debugMetrics"
|
||||
:use-real-api="USE_REAL_API"
|
||||
:api-loading="fileSystemAPI.loading.value"
|
||||
:api-error="fileSystemAPI.error.value"
|
||||
@close="debugPanelVisible = false"
|
||||
@generate="generateTestData"
|
||||
@scrollTo="handleDebugScrollTo"
|
||||
@clear="clearTestData"
|
||||
@toggle-api="USE_REAL_API = !USE_REAL_API"
|
||||
/>
|
||||
|
||||
<!-- Debug Toggle Button (开发环境) -->
|
||||
@@ -269,9 +273,11 @@ import { useKeyboardNav } from '@/composables/fileManager/useKeyboardNav'
|
||||
import { useDragSelection } from '@/composables/fileManager/useDragSelection'
|
||||
import { useDragAndDrop } from '@/composables/fileManager/useDragAndDrop'
|
||||
import { useVirtualScroll, useVirtualGrid } from '@/composables/fileManager/useVirtualScroll'
|
||||
import { useFileSystemAPI } from '@/composables/fileManager/useFileSystemAPI'
|
||||
import { moveItems, getFolderByPath, searchItems } from '@/utils/fileManager/fileOperations'
|
||||
import { mockFolderStructure as originalMockData } from './mockData'
|
||||
import type { FileItem, ViewMode, ThumbnailSize, PaneId } from './types'
|
||||
import { getFileIcon } from '@/config/fileTypes'
|
||||
import ContextMenu from './ContextMenu.vue'
|
||||
import Tooltip from './Tooltip.vue'
|
||||
import QuickPreview from './QuickPreview.vue'
|
||||
@@ -283,11 +289,15 @@ const mockFolderStructure = reactive(originalMockData)
|
||||
// 开发环境标识
|
||||
const isDevelopment = import.meta.env.DEV
|
||||
|
||||
// 文件系统 API 集成
|
||||
const fileSystemAPI = useFileSystemAPI()
|
||||
|
||||
const props = defineProps<{
|
||||
paneId: PaneId
|
||||
viewMode: ViewMode
|
||||
thumbnailSize: ThumbnailSize
|
||||
isActive: boolean
|
||||
useRealApi?: boolean // 是否使用真实 API
|
||||
sortOptions: {
|
||||
field: string
|
||||
order: string
|
||||
@@ -298,6 +308,9 @@ const props = defineProps<{
|
||||
}
|
||||
}>()
|
||||
|
||||
// 内部响应式状态,用于调试面板切换
|
||||
const USE_REAL_API = ref(props.useRealApi ?? false)
|
||||
|
||||
const emit = defineEmits<{
|
||||
activate: []
|
||||
}>()
|
||||
@@ -382,7 +395,18 @@ const VIRTUAL_SCROLL_THRESHOLD = 100 // 超过100个项目时启用虚拟滚动
|
||||
|
||||
// Computed
|
||||
const currentFolder = computed(() => {
|
||||
return getFolderByPath(mockFolderStructure, currentPath.value)
|
||||
if (USE_REAL_API.value) {
|
||||
// 使用真实 API 时，返回一个模拟的文件夹结构
|
||||
// 将 fileSystemAPI.fileItems 转换为 Record<string, FileItem> 格式
|
||||
const folder: Record<string, FileItem> = {}
|
||||
for (const item of fileSystemAPI.fileItems.value) {
|
||||
folder[item.name] = item
|
||||
}
|
||||
return folder
|
||||
} else {
|
||||
// 使用 mock 数据
|
||||
return getFolderByPath(mockFolderStructure, currentPath.value)
|
||||
}
|
||||
})
|
||||
|
||||
// 总项目数（未过滤）
|
||||
@@ -588,10 +612,36 @@ function highlightText(text: string): string {
|
||||
return text.replace(regex, '<mark>$1</mark>')
|
||||
}
|
||||
|
||||
function navigateToIndex(index: number) {
|
||||
currentPath.value = currentPath.value.slice(0, index + 1)
|
||||
addToHistory(currentPath.value)
|
||||
selection.clearSelection()
|
||||
async function navigateToIndex(index: number) {
|
||||
if (USE_REAL_API.value) {
|
||||
// 真实 API 模式：从面包屑重建完整路径
|
||||
const targetPath = currentPath.value.slice(0, index + 1)
|
||||
const fullPath = targetPath.join('\\')
|
||||
|
||||
try {
|
||||
// 特殊处理：如果是 "所有驱动器"，调用空路径
|
||||
if (targetPath.length === 1 && targetPath[0] === '所有驱动器') {
|
||||
await fileSystemAPI.browse()
|
||||
} else {
|
||||
await fileSystemAPI.browse(fullPath)
|
||||
}
|
||||
|
||||
const pathStr = fileSystemAPI.currentPath.value
|
||||
const breadcrumbs = pathStr ? convertPathToBreadcrumbs(pathStr) : ['所有驱动器']
|
||||
currentPath.value = breadcrumbs
|
||||
addToHistory(currentPath.value)
|
||||
selection.clearSelection()
|
||||
} catch (err) {
|
||||
console.error('面包屑导航失败:', err)
|
||||
alert('无法导航到该路径')
|
||||
}
|
||||
} else {
|
||||
// Mock 数据模式
|
||||
currentPath.value = currentPath.value.slice(0, index + 1)
|
||||
addToHistory(currentPath.value)
|
||||
selection.clearSelection()
|
||||
}
|
||||
|
||||
breadcrumbDropdown.value.visible = false
|
||||
}
|
||||
|
||||
@@ -610,24 +660,66 @@ function addToHistory(path: string[]) {
|
||||
historyIndex.value = history.value.length - 1
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
async function goBack() {
|
||||
if (historyIndex.value > 0) {
|
||||
historyIndex.value--
|
||||
currentPath.value = [...history.value[historyIndex.value]]
|
||||
selection.clearSelection()
|
||||
const targetPath = [...history.value[historyIndex.value]]
|
||||
|
||||
if (USE_REAL_API.value) {
|
||||
// 真实 API 模式：重建路径并调用 API
|
||||
await navigateToPathArray(targetPath)
|
||||
} else {
|
||||
// Mock 数据模式
|
||||
currentPath.value = targetPath
|
||||
selection.clearSelection()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function goForward() {
|
||||
async function goForward() {
|
||||
if (historyIndex.value < history.value.length - 1) {
|
||||
historyIndex.value++
|
||||
currentPath.value = [...history.value[historyIndex.value]]
|
||||
const targetPath = [...history.value[historyIndex.value]]
|
||||
|
||||
if (USE_REAL_API.value) {
|
||||
// 真实 API 模式：重建路径并调用 API
|
||||
await navigateToPathArray(targetPath)
|
||||
} else {
|
||||
// Mock 数据模式
|
||||
currentPath.value = targetPath
|
||||
selection.clearSelection()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 根据路径数组导航 (真实 API 辅助函数)
|
||||
async function navigateToPathArray(pathArray: string[]) {
|
||||
try {
|
||||
// 特殊处理：如果是 "所有驱动器"，调用空路径
|
||||
if (pathArray.length === 1 && pathArray[0] === '所有驱动器') {
|
||||
await fileSystemAPI.browse()
|
||||
} else {
|
||||
const fullPath = pathArray.join('\\')
|
||||
await fileSystemAPI.browse(fullPath)
|
||||
}
|
||||
|
||||
const pathStr = fileSystemAPI.currentPath.value
|
||||
const breadcrumbs = pathStr ? convertPathToBreadcrumbs(pathStr) : ['所有驱动器']
|
||||
currentPath.value = breadcrumbs
|
||||
selection.clearSelection()
|
||||
} catch (err) {
|
||||
console.error('历史导航失败:', err)
|
||||
alert('无法导航到该路径')
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumb dropdown
|
||||
function toggleBreadcrumbDropdown(index: number) {
|
||||
// 真实 API 模式暂不支持面包屑下拉菜单
|
||||
if (USE_REAL_API.value) {
|
||||
return
|
||||
}
|
||||
|
||||
if (breadcrumbDropdown.value.visible && breadcrumbDropdown.value.index === index) {
|
||||
breadcrumbDropdown.value.visible = false
|
||||
return
|
||||
@@ -685,7 +777,10 @@ function navigateToBreadcrumbFolder(folderName: string) {
|
||||
// Path editing
|
||||
function enterPathEditMode() {
|
||||
pathEditMode.value = true
|
||||
pathEditValue.value = currentPath.value.join('/')
|
||||
// 真实 API 模式使用反斜杠，Mock 模式使用正斜杠
|
||||
pathEditValue.value = USE_REAL_API.value
|
||||
? currentPath.value.join('\\')
|
||||
: currentPath.value.join('/')
|
||||
nextTick(() => {
|
||||
pathInputRef.value?.focus()
|
||||
pathInputRef.value?.select()
|
||||
@@ -699,36 +794,53 @@ function exitPathEditMode() {
|
||||
}, 150)
|
||||
}
|
||||
|
||||
function applyPathEdit() {
|
||||
async function applyPathEdit() {
|
||||
const path = pathEditValue.value.trim()
|
||||
if (!path) {
|
||||
cancelPathEdit()
|
||||
return
|
||||
}
|
||||
|
||||
// 解析路径
|
||||
const segments = path.split('/').filter(s => s.trim())
|
||||
if (segments.length === 0) {
|
||||
cancelPathEdit()
|
||||
return
|
||||
}
|
||||
|
||||
// 验证路径是否存在
|
||||
let folder: any = mockFolderStructure
|
||||
for (const segment of segments) {
|
||||
if (folder[segment] && folder[segment].children) {
|
||||
folder = folder[segment].children
|
||||
} else {
|
||||
alert(`路径不存在: ${path}`)
|
||||
if (USE_REAL_API.value) {
|
||||
// 真实 API 模式：直接使用输入的路径
|
||||
try {
|
||||
await fileSystemAPI.browse(path)
|
||||
const pathStr = fileSystemAPI.currentPath.value
|
||||
const breadcrumbs = pathStr ? convertPathToBreadcrumbs(pathStr) : ['所有驱动器']
|
||||
currentPath.value = breadcrumbs
|
||||
addToHistory(currentPath.value)
|
||||
selection.clearSelection()
|
||||
pathEditMode.value = false
|
||||
} catch (err) {
|
||||
console.error('路径导航失败:', err)
|
||||
alert(`路径不存在或无法访问: ${path}`)
|
||||
}
|
||||
} else {
|
||||
// Mock 数据模式
|
||||
// 解析路径
|
||||
const segments = path.split('/').filter(s => s.trim())
|
||||
if (segments.length === 0) {
|
||||
cancelPathEdit()
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// 应用路径
|
||||
currentPath.value = segments
|
||||
addToHistory(currentPath.value)
|
||||
selection.clearSelection()
|
||||
pathEditMode.value = false
|
||||
// 验证路径是否存在
|
||||
let folder: any = mockFolderStructure
|
||||
for (const segment of segments) {
|
||||
if (folder[segment] && folder[segment].children) {
|
||||
folder = folder[segment].children
|
||||
} else {
|
||||
alert(`路径不存在: ${path}`)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// 应用路径
|
||||
currentPath.value = segments
|
||||
addToHistory(currentPath.value)
|
||||
selection.clearSelection()
|
||||
pathEditMode.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function cancelPathEdit() {
|
||||
@@ -736,10 +848,60 @@ function cancelPathEdit() {
|
||||
pathEditValue.value = ''
|
||||
}
|
||||
|
||||
function navigateToFolder(folderName: string) {
|
||||
currentPath.value.push(folderName)
|
||||
addToHistory(currentPath.value)
|
||||
selection.clearSelection()
|
||||
async function navigateToFolder(folderName: string) {
|
||||
if (USE_REAL_API.value) {
|
||||
// 使用真实 API - 拼接路径
|
||||
const newPath = fileSystemAPI.currentPath.value
|
||||
? `${fileSystemAPI.currentPath.value}\\${folderName}`
|
||||
: folderName
|
||||
|
||||
try {
|
||||
await fileSystemAPI.browse(newPath)
|
||||
currentPath.value = [fileSystemAPI.currentPath.value]
|
||||
addToHistory(currentPath.value)
|
||||
selection.clearSelection()
|
||||
} catch (err) {
|
||||
console.error('导航失败:', err)
|
||||
alert('无法打开文件夹')
|
||||
}
|
||||
} else {
|
||||
// 使用 mock 数据
|
||||
currentPath.value.push(folderName)
|
||||
addToHistory(currentPath.value)
|
||||
selection.clearSelection()
|
||||
}
|
||||
}
|
||||
|
||||
// 使用完整路径导航 (真实 API 专用)
|
||||
async function navigateToFolderByPath(fullPath: string) {
|
||||
try {
|
||||
await fileSystemAPI.browse(fullPath)
|
||||
// 将路径转换为面包屑数组
|
||||
const pathStr = fileSystemAPI.currentPath.value || fullPath
|
||||
const breadcrumbs = convertPathToBreadcrumbs(pathStr)
|
||||
currentPath.value = breadcrumbs
|
||||
addToHistory(currentPath.value)
|
||||
selection.clearSelection()
|
||||
} catch (err) {
|
||||
console.error('导航失败:', err)
|
||||
alert('无法打开文件夹')
|
||||
}
|
||||
}
|
||||
|
||||
// 将路径字符串转换为面包屑数组
|
||||
function convertPathToBreadcrumbs(path: string): string[] {
|
||||
if (!path) return ['根目录']
|
||||
|
||||
// Windows 路径: C:\, D:\Users\Documents
|
||||
// 先处理驱动器路径
|
||||
if (/^[A-Z]:\\?$/.test(path)) {
|
||||
// 纯驱动器，如 "C:\" 或 "C:"
|
||||
return [path]
|
||||
}
|
||||
|
||||
// 有子路径的情况
|
||||
const parts = path.split('\\').filter(p => p)
|
||||
return parts.length > 0 ? parts : ['根目录']
|
||||
}
|
||||
|
||||
function isFocused(itemName: string): boolean {
|
||||
@@ -769,7 +931,13 @@ function handleItemClick(event: MouseEvent, itemName: string, index: number) {
|
||||
|
||||
function handleItemDoubleClick(item: FileItem) {
|
||||
if (item.type === 'folder') {
|
||||
navigateToFolder(item.name)
|
||||
if (USE_REAL_API.value && item.path) {
|
||||
// 真实 API 模式，使用完整路径
|
||||
navigateToFolderByPath(item.path)
|
||||
} else {
|
||||
// Mock 数据模式，使用名称
|
||||
navigateToFolder(item.name)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1285,7 +1453,20 @@ function updateContainerSize() {
|
||||
}
|
||||
|
||||
// 关闭breadcrumb dropdown 和 添加滚轮监听
|
||||
onMounted(() => {
|
||||
onMounted(async () => {
|
||||
// 如果使用真实 API,初始化加载根目录
|
||||
if (USE_REAL_API.value) {
|
||||
try {
|
||||
await fileSystemAPI.browse() // 加载根级别（所有驱动器）
|
||||
const pathStr = fileSystemAPI.currentPath.value
|
||||
const breadcrumbs = pathStr ? convertPathToBreadcrumbs(pathStr) : ['所有驱动器']
|
||||
currentPath.value = breadcrumbs
|
||||
addToHistory(currentPath.value)
|
||||
} catch (err) {
|
||||
console.error('初始化文件系统失败:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const closeDropdown = () => {
|
||||
breadcrumbDropdown.value.visible = false
|
||||
}
|
||||
@@ -1904,6 +2085,18 @@ defineExpose({
|
||||
|
||||
.file-item[data-item-type="file"] .file-icon {
|
||||
color: #6b7280;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
background: #f3f4f6;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 4px;
|
||||
padding: 8px 6px;
|
||||
min-width: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
@@ -2047,6 +2240,18 @@ defineExpose({
|
||||
|
||||
.list-item[data-item-type="file"] .list-icon {
|
||||
color: #6b7280;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
background: #f3f4f6;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 3px;
|
||||
padding: 2px 4px;
|
||||
min-width: 28px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.list-name {
|
||||
|
||||
@@ -5,6 +5,8 @@ export interface FileItem {
|
||||
type: 'folder' | 'photo' | 'video' | 'file'
|
||||
size?: string
|
||||
date?: string
|
||||
path?: string // 完整路径 (用于真实 API)
|
||||
extension?: string // 文件扩展名 (用于显示)
|
||||
children?: Record<string, FileItem>
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,290 @@
|
||||
/**
|
||||
* 文件系统 API 集成 Composable
|
||||
* 用于在 FileManager 中集成后端文件系统 API
|
||||
*/
|
||||
import { ref, computed } from 'vue'
|
||||
import { fileSystemService } from '@/services/fileSystemService'
|
||||
import type {
|
||||
FileSystemItem,
|
||||
BrowseResult,
|
||||
OperationResult
|
||||
} from '@/services/fileSystemService'
|
||||
import type { FileItem } from '@/components/FileManager/types'
|
||||
import { getFileTypeByMime, getFileTypeByExtension, getExtension } from '@/config/fileTypes'
|
||||
|
||||
export function useFileSystemAPI() {
|
||||
// 状态
|
||||
const currentPath = ref<string>('') // 当前路径
|
||||
const items = ref<FileSystemItem[]>([]) // 当前目录下的项目
|
||||
const loading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
const parentPath = ref<string>('') // 父路径
|
||||
|
||||
/**
|
||||
* 将后端 FileSystemItem 转换为前端 FileItem 格式
|
||||
*/
|
||||
function convertToFileItem(item: FileSystemItem): FileItem {
|
||||
// 判断文件类型
|
||||
let itemType: FileItem['type'] = 'file'
|
||||
|
||||
if (item.type === 'directory') {
|
||||
itemType = 'folder'
|
||||
} else if (item.type === 'drive') {
|
||||
itemType = 'folder' // 驱动器视为特殊文件夹
|
||||
} else if (item.file_info) {
|
||||
// 优先根据 MIME 类型判断
|
||||
if (item.file_info.mime_type) {
|
||||
itemType = getFileTypeByMime(item.file_info.mime_type)
|
||||
}
|
||||
|
||||
// 如果 MIME 类型无法识别，尝试使用扩展名
|
||||
if (itemType === 'file' && item.file_info.extension) {
|
||||
const ext = item.file_info.extension.replace('.', '')
|
||||
itemType = getFileTypeByExtension(ext)
|
||||
}
|
||||
} else {
|
||||
// 没有 file_info，尝试从文件名提取扩展名
|
||||
const ext = getExtension(item.name)
|
||||
if (ext) {
|
||||
itemType = getFileTypeByExtension(ext)
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化文件大小
|
||||
let sizeStr = ''
|
||||
if (item.size > 0) {
|
||||
const kb = item.size / 1024
|
||||
const mb = kb / 1024
|
||||
const gb = mb / 1024
|
||||
|
||||
if (gb >= 1) {
|
||||
sizeStr = `${gb.toFixed(2)} GB`
|
||||
} else if (mb >= 1) {
|
||||
sizeStr = `${mb.toFixed(2)} MB`
|
||||
} else if (kb >= 1) {
|
||||
sizeStr = `${kb.toFixed(2)} KB`
|
||||
} else {
|
||||
sizeStr = `${item.size} B`
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化修改时间
|
||||
let dateStr = ''
|
||||
if (item.mod_time) {
|
||||
try {
|
||||
const date = new Date(item.mod_time)
|
||||
dateStr = date.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})
|
||||
} catch (e) {
|
||||
dateStr = item.mod_time
|
||||
}
|
||||
}
|
||||
|
||||
// 获取扩展名 (用于不支持的文件显示)
|
||||
let extension = ''
|
||||
if (item.file_info?.extension) {
|
||||
extension = item.file_info.extension.replace('.', '').toLowerCase()
|
||||
} else {
|
||||
extension = getExtension(item.name)
|
||||
}
|
||||
|
||||
return {
|
||||
name: item.name,
|
||||
type: itemType,
|
||||
size: sizeStr,
|
||||
date: dateStr,
|
||||
path: item.path, // 保存完整路径
|
||||
extension: extension || undefined,
|
||||
children: undefined // 后端按需加载，不预加载子项
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 浏览指定路径
|
||||
*/
|
||||
async function browse(path?: string) {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
const result: BrowseResult = await fileSystemService.browse(path)
|
||||
|
||||
currentPath.value = result.current_path
|
||||
parentPath.value = result.parent_path
|
||||
|
||||
// 转换项目列表
|
||||
items.value = result.items
|
||||
|
||||
return result
|
||||
} catch (err: any) {
|
||||
error.value = err.message || '浏览文件系统失败'
|
||||
items.value = []
|
||||
throw err
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建目录
|
||||
*/
|
||||
async function createDirectory(path: string): Promise<OperationResult> {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
const result = await fileSystemService.createDirectory(path)
|
||||
|
||||
// 刷新当前目录
|
||||
await browse(currentPath.value)
|
||||
|
||||
return result
|
||||
} catch (err: any) {
|
||||
error.value = err.message || '创建目录失败'
|
||||
throw err
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除文件或目录
|
||||
*/
|
||||
async function deleteItem(path: string, recursive: boolean = true): Promise<OperationResult> {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
const result = await fileSystemService.deleteItem(path, undefined, recursive)
|
||||
|
||||
// 刷新当前目录
|
||||
await browse(currentPath.value)
|
||||
|
||||
return result
|
||||
} catch (err: any) {
|
||||
error.value = err.message || '删除失败'
|
||||
throw err
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 移动/重命名文件或目录
|
||||
*/
|
||||
async function moveItem(
|
||||
source: string,
|
||||
destination: string,
|
||||
overwrite: boolean = false
|
||||
): Promise<OperationResult> {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
const result = await fileSystemService.moveItem(source, destination, undefined, overwrite)
|
||||
|
||||
// 刷新当前目录
|
||||
await browse(currentPath.value)
|
||||
|
||||
return result
|
||||
} catch (err: any) {
|
||||
error.value = err.message || '移动失败'
|
||||
throw err
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 复制文件或目录
|
||||
*/
|
||||
async function copyItem(
|
||||
source: string,
|
||||
destination: string,
|
||||
overwrite: boolean = false
|
||||
): Promise<OperationResult> {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
const result = await fileSystemService.copyItem(source, destination, undefined, overwrite)
|
||||
|
||||
// 刷新当前目录
|
||||
await browse(currentPath.value)
|
||||
|
||||
return result
|
||||
} catch (err: any) {
|
||||
error.value = err.message || '复制失败'
|
||||
throw err
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 搜索文件
|
||||
*/
|
||||
async function searchFiles(
|
||||
path: string,
|
||||
pattern: string = '*',
|
||||
type?: string,
|
||||
recursive: boolean = false
|
||||
) {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
const result = await fileSystemService.searchFiles(path, pattern, type, recursive)
|
||||
return result
|
||||
} catch (err: any) {
|
||||
error.value = err.message || '搜索失败'
|
||||
throw err
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 转换后的 FileItem 列表（computed）
|
||||
*/
|
||||
const fileItems = computed<FileItem[]>(() => {
|
||||
return items.value.map(convertToFileItem)
|
||||
})
|
||||
|
||||
/**
|
||||
* 获取磁盘使用情况
|
||||
*/
|
||||
async function getDiskUsage(path: string) {
|
||||
try {
|
||||
return await fileSystemService.getDiskUsage(path)
|
||||
} catch (err: any) {
|
||||
error.value = err.message || '获取磁盘使用情况失败'
|
||||
throw err
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
// 状态
|
||||
currentPath,
|
||||
parentPath,
|
||||
items,
|
||||
fileItems,
|
||||
loading,
|
||||
error,
|
||||
|
||||
// 方法
|
||||
browse,
|
||||
createDirectory,
|
||||
deleteItem,
|
||||
moveItem,
|
||||
copyItem,
|
||||
searchFiles,
|
||||
getDiskUsage,
|
||||
convertToFileItem
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,205 @@
|
||||
/**
|
||||
* 文件类型配置
|
||||
* 定义照片管理系统支持的文件类型
|
||||
*/
|
||||
|
||||
/** 支持的图片格式 */
|
||||
export const IMAGE_EXTENSIONS = [
|
||||
// 常见格式
|
||||
'jpg',
|
||||
'jpeg',
|
||||
'png',
|
||||
'gif',
|
||||
'bmp',
|
||||
'webp',
|
||||
'svg',
|
||||
|
||||
// RAW 格式
|
||||
'raw',
|
||||
'cr2',
|
||||
'cr3',
|
||||
'nef',
|
||||
'arw',
|
||||
'dng',
|
||||
'orf',
|
||||
'rw2',
|
||||
'pef',
|
||||
'srw',
|
||||
'raf',
|
||||
|
||||
// 其他
|
||||
'tiff',
|
||||
'tif',
|
||||
'heic',
|
||||
'heif',
|
||||
'avif',
|
||||
'jxl'
|
||||
] as const
|
||||
|
||||
/** 支持的视频格式 */
|
||||
export const VIDEO_EXTENSIONS = [
|
||||
// 常见格式
|
||||
'mp4',
|
||||
'avi',
|
||||
'mov',
|
||||
'mkv',
|
||||
'wmv',
|
||||
'flv',
|
||||
'webm',
|
||||
'm4v',
|
||||
|
||||
// 高清格式
|
||||
'mts',
|
||||
'm2ts',
|
||||
'ts',
|
||||
|
||||
// 其他
|
||||
'3gp',
|
||||
'mpg',
|
||||
'mpeg',
|
||||
'vob',
|
||||
'ogv',
|
||||
'rm',
|
||||
'rmvb',
|
||||
'asf'
|
||||
] as const
|
||||
|
||||
/** 文件类型 MIME 映射 */
|
||||
export const MIME_TYPE_MAP = {
|
||||
// 图片
|
||||
'image/jpeg': 'photo',
|
||||
'image/png': 'photo',
|
||||
'image/gif': 'photo',
|
||||
'image/bmp': 'photo',
|
||||
'image/webp': 'photo',
|
||||
'image/svg+xml': 'photo',
|
||||
'image/tiff': 'photo',
|
||||
'image/heic': 'photo',
|
||||
'image/heif': 'photo',
|
||||
'image/avif': 'photo',
|
||||
|
||||
// 视频
|
||||
'video/mp4': 'video',
|
||||
'video/avi': 'video',
|
||||
'video/quicktime': 'video',
|
||||
'video/x-matroska': 'video',
|
||||
'video/x-msvideo': 'video',
|
||||
'video/x-ms-wmv': 'video',
|
||||
'video/x-flv': 'video',
|
||||
'video/webm': 'video',
|
||||
'video/3gpp': 'video',
|
||||
'video/mpeg': 'video'
|
||||
} as const
|
||||
|
||||
/** 文件类型 */
|
||||
export type FileType = 'folder' | 'photo' | 'video' | 'file'
|
||||
|
||||
/**
|
||||
* 根据扩展名判断文件类型
|
||||
* @param extension 文件扩展名 (小写，不含点)
|
||||
* @returns 文件类型
|
||||
*/
|
||||
export function getFileTypeByExtension(extension: string): FileType {
|
||||
const ext = extension.toLowerCase()
|
||||
|
||||
if (IMAGE_EXTENSIONS.includes(ext as any)) {
|
||||
return 'photo'
|
||||
}
|
||||
|
||||
if (VIDEO_EXTENSIONS.includes(ext as any)) {
|
||||
return 'video'
|
||||
}
|
||||
|
||||
return 'file'
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据 MIME 类型判断文件类型
|
||||
* @param mimeType MIME 类型
|
||||
* @returns 文件类型
|
||||
*/
|
||||
export function getFileTypeByMime(mimeType: string): FileType {
|
||||
const mime = mimeType.toLowerCase()
|
||||
|
||||
// 精确匹配
|
||||
if (MIME_TYPE_MAP[mime as keyof typeof MIME_TYPE_MAP]) {
|
||||
return MIME_TYPE_MAP[mime as keyof typeof MIME_TYPE_MAP] as FileType
|
||||
}
|
||||
|
||||
// 模糊匹配
|
||||
if (mime.startsWith('image/')) {
|
||||
return 'photo'
|
||||
}
|
||||
|
||||
if (mime.startsWith('video/')) {
|
||||
return 'video'
|
||||
}
|
||||
|
||||
return 'file'
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否为支持的媒体文件
|
||||
* @param extension 文件扩展名
|
||||
* @returns 是否支持
|
||||
*/
|
||||
export function isSupportedMediaFile(extension: string): boolean {
|
||||
const ext = extension.toLowerCase()
|
||||
return (
|
||||
IMAGE_EXTENSIONS.includes(ext as any) ||
|
||||
VIDEO_EXTENSIONS.includes(ext as any)
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取文件扩展名
|
||||
* @param filename 文件名
|
||||
* @returns 扩展名 (小写，不含点)
|
||||
*/
|
||||
export function getExtension(filename: string): string {
|
||||
const lastDot = filename.lastIndexOf('.')
|
||||
if (lastDot === -1 || lastDot === 0) return ''
|
||||
return filename.substring(lastDot + 1).toLowerCase()
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取文件图标/显示
|
||||
* @param type 文件类型
|
||||
* @param extension 文件扩展名 (用于未支持文件)
|
||||
* @returns 图标字符串或扩展名
|
||||
*/
|
||||
export function getFileIcon(type: FileType, extension?: string): string {
|
||||
switch (type) {
|
||||
case 'folder':
|
||||
return '📁'
|
||||
case 'photo':
|
||||
return '🖼️'
|
||||
case 'video':
|
||||
return '🎬'
|
||||
case 'file':
|
||||
// 不支持的文件显示扩展名
|
||||
return extension ? extension.toUpperCase() : '📄'
|
||||
default:
|
||||
return '📄'
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取文件类型的描述
|
||||
* @param type 文件类型
|
||||
* @returns 描述文本
|
||||
*/
|
||||
export function getFileTypeDescription(type: FileType): string {
|
||||
switch (type) {
|
||||
case 'folder':
|
||||
return '文件夹'
|
||||
case 'photo':
|
||||
return '图片'
|
||||
case 'video':
|
||||
return '视频'
|
||||
case 'file':
|
||||
return '文件'
|
||||
default:
|
||||
return '未知'
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,225 @@
|
||||
/**
|
||||
* 文件系统服务
|
||||
* 提供文件和文件夹的浏览、操作功能
|
||||
*/
|
||||
import { httpClient } from '@/utils/http'
|
||||
|
||||
// ==================== 类型定义 ====================
|
||||
|
||||
/** 文件系统项目类型 */
|
||||
export type FileSystemItemType = 'drive' | 'directory' | 'file'
|
||||
|
||||
/** 驱动器信息 */
|
||||
export interface DriveInfo {
|
||||
label: string // 卷标
|
||||
file_system: string // 文件系统类型
|
||||
total_space: number // 总空间 (字节)
|
||||
free_space: number // 可用空间
|
||||
used_space: number // 已用空间
|
||||
usage_percent: number // 使用百分比
|
||||
is_removable: boolean // 是否可移动
|
||||
drive_type: string // 驱动器类型
|
||||
}
|
||||
|
||||
/** 文件信息 */
|
||||
export interface FileInfo {
|
||||
extension: string // 文件扩展名
|
||||
mime_type: string // MIME类型
|
||||
}
|
||||
|
||||
/** 目录信息 */
|
||||
export interface DirectoryInfo {
|
||||
item_count: number // 子项目数量
|
||||
}
|
||||
|
||||
/** 文件系统项目 */
|
||||
export interface FileSystemItem {
|
||||
id: string // 项目唯一标识
|
||||
name: string // 显示名称
|
||||
path: string // 完整路径
|
||||
type: FileSystemItemType // 项目类型
|
||||
size: number // 大小 (字节)
|
||||
mod_time: string // 修改时间
|
||||
is_accessible: boolean // 是否可访问
|
||||
drive_info?: DriveInfo // 驱动器信息 (仅drive类型)
|
||||
file_info?: FileInfo // 文件信息 (仅file类型)
|
||||
directory_info?: DirectoryInfo // 目录信息 (仅directory类型)
|
||||
}
|
||||
|
||||
/** 浏览结果摘要 */
|
||||
export interface BrowseSummary {
|
||||
total_items: number // 总项目数
|
||||
directory_count: number // 目录数量
|
||||
file_count: number // 文件数量
|
||||
drive_count: number // 驱动器数量
|
||||
}
|
||||
|
||||
/** 浏览结果 */
|
||||
export interface BrowseResult {
|
||||
current_path: string // 当前路径
|
||||
parent_path: string // 父路径
|
||||
items: FileSystemItem[] // 项目列表
|
||||
summary: BrowseSummary // 摘要信息
|
||||
}
|
||||
|
||||
/** 磁盘使用情况 */
|
||||
export interface DiskUsage {
|
||||
path: string // 路径
|
||||
total: number // 总空间 (字节)
|
||||
free: number // 可用空间
|
||||
used: number // 已用空间
|
||||
usage_percent: number // 使用百分比
|
||||
}
|
||||
|
||||
/** 搜索结果 */
|
||||
export interface SearchResult {
|
||||
items: FileSystemItem[] // 匹配的项目列表
|
||||
total_count: number // 总匹配数
|
||||
}
|
||||
|
||||
/** 操作结果 */
|
||||
export interface OperationResult {
|
||||
success: boolean // 操作是否成功
|
||||
message: string // 结果消息
|
||||
path?: string // 相关路径
|
||||
operation_id?: string // 操作ID
|
||||
}
|
||||
|
||||
// ==================== API 服务 ====================
|
||||
|
||||
class FileSystemService {
|
||||
/**
|
||||
* 浏览文件系统
|
||||
* @param path 路径 (为空则返回根级别/所有硬盘)
|
||||
*/
|
||||
async browse(path?: string): Promise<BrowseResult> {
|
||||
const response = await httpClient.get<BrowseResult>('/v1/filesystem/browse', {
|
||||
path: path || ''
|
||||
})
|
||||
return response.data
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取磁盘使用情况
|
||||
* @param path 路径
|
||||
*/
|
||||
async getDiskUsage(path: string): Promise<DiskUsage> {
|
||||
const response = await httpClient.get<DiskUsage>('/v1/filesystem/disk-usage', {
|
||||
path
|
||||
})
|
||||
return response.data
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取文件系统项目信息
|
||||
* @param path 项目路径
|
||||
*/
|
||||
async getItem(path: string): Promise<BrowseResult> {
|
||||
const response = await httpClient.get<BrowseResult>('/v1/filesystem/item', {
|
||||
path
|
||||
})
|
||||
return response.data
|
||||
}
|
||||
|
||||
/**
|
||||
* 搜索文件
|
||||
* @param path 搜索路径
|
||||
* @param pattern 匹配模式 (例如: *.txt)
|
||||
* @param type 文件类型筛选
|
||||
* @param recursive 是否递归搜索
|
||||
*/
|
||||
async searchFiles(
|
||||
path: string,
|
||||
pattern: string = '*',
|
||||
type?: string,
|
||||
recursive: boolean = false
|
||||
): Promise<SearchResult> {
|
||||
const response = await httpClient.get<SearchResult>('/v1/filesystem/search', {
|
||||
path,
|
||||
pattern,
|
||||
type: type || '',
|
||||
recursive: recursive.toString()
|
||||
})
|
||||
return response.data
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建目录
|
||||
* @param path 目录路径
|
||||
*/
|
||||
async createDirectory(path: string): Promise<OperationResult> {
|
||||
const response = await httpClient.post<OperationResult>('/v1/filesystem/directory', {
|
||||
path
|
||||
})
|
||||
return response.data
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除文件或目录
|
||||
* @param path 路径
|
||||
* @param operationId 操作ID (用于进度追踪)
|
||||
* @param recursive 是否递归删除 (默认true)
|
||||
*/
|
||||
async deleteItem(
|
||||
path: string,
|
||||
operationId?: string,
|
||||
recursive: boolean = true
|
||||
): Promise<OperationResult> {
|
||||
const response = await httpClient.delete<OperationResult>('/v1/filesystem/item', {
|
||||
path,
|
||||
operation_id: operationId || '',
|
||||
recursive: recursive.toString()
|
||||
})
|
||||
return response.data
|
||||
}
|
||||
|
||||
/**
|
||||
* 移动/重命名文件或目录
|
||||
* @param source 源路径
|
||||
* @param destination 目标路径
|
||||
* @param operationId 操作ID
|
||||
* @param overwrite 是否覆盖已存在文件
|
||||
*/
|
||||
async moveItem(
|
||||
source: string,
|
||||
destination: string,
|
||||
operationId?: string,
|
||||
overwrite: boolean = false
|
||||
): Promise<OperationResult> {
|
||||
const response = await httpClient.put<OperationResult>('/v1/filesystem/item/move', {
|
||||
source,
|
||||
destination,
|
||||
operation_id: operationId || '',
|
||||
overwrite
|
||||
})
|
||||
return response.data
|
||||
}
|
||||
|
||||
/**
|
||||
* 复制文件或目录
|
||||
* @param source 源路径
|
||||
* @param destination 目标路径
|
||||
* @param operationId 操作ID
|
||||
* @param overwrite 是否覆盖已存在文件
|
||||
*/
|
||||
async copyItem(
|
||||
source: string,
|
||||
destination: string,
|
||||
operationId?: string,
|
||||
overwrite: boolean = false
|
||||
): Promise<OperationResult> {
|
||||
const response = await httpClient.post<OperationResult>('/v1/filesystem/item/copy', {
|
||||
source,
|
||||
destination,
|
||||
operation_id: operationId || '',
|
||||
overwrite
|
||||
})
|
||||
return response.data
|
||||
}
|
||||
}
|
||||
|
||||
// 导出单例实例
|
||||
export const fileSystemService = new FileSystemService()
|
||||
|
||||
// 导出服务类 (用于测试)
|
||||
export default FileSystemService
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="field-view">
|
||||
<FileManager ref="fileManagerRef" />
|
||||
<FileManager ref="fileManagerRef" :use-real-api="true" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -0,0 +1,126 @@
|
||||
# 🚀 文件管理器快速开始
|
||||
|
||||
## 一、启动服务
|
||||
|
||||
### 1. 启动后端 (必需)
|
||||
|
||||
```bash
|
||||
cd D:\go-argus\src\rear
|
||||
go run main.go
|
||||
```
|
||||
|
||||
✅ 看到以下信息表示后端启动成功:
|
||||
```
|
||||
服务器启动成功: http://localhost:9484
|
||||
```
|
||||
|
||||
### 2. 启动前端
|
||||
|
||||
```bash
|
||||
cd D:\go-argus\src\front\argus-front
|
||||
npm run dev
|
||||
```
|
||||
|
||||
✅ 看到以下信息表示前端启动成功:
|
||||
```
|
||||
VITE ready in xxx ms
|
||||
➜ Local: http://localhost:3000/
|
||||
```
|
||||
|
||||
## 二、访问文件管理器
|
||||
|
||||
打开浏览器访问: **http://localhost:3000/field**
|
||||
|
||||
## 三、功能说明
|
||||
|
||||
### 当前已实现功能 ✅
|
||||
|
||||
1. **浏览文件系统**
|
||||
- 自动显示所有驱动器 (C:, D: 等)
|
||||
- 双击进入文件夹
|
||||
- 显示文件和文件夹列表
|
||||
|
||||
2. **面包屑导航**
|
||||
- 显示当前路径
|
||||
- 点击路径段快速跳转
|
||||
|
||||
3. **文件统计**
|
||||
- 自动统计照片数量 🖼️
|
||||
- 自动统计视频数量 🎬
|
||||
|
||||
4. **视图切换**
|
||||
- 网格视图
|
||||
- 列表视图
|
||||
- 三种缩略图大小
|
||||
|
||||
5. **调试工具** 🔬
|
||||
- 实时查看 API 状态
|
||||
- 切换真实 API / Mock 数据
|
||||
- 查看加载状态和错误
|
||||
|
||||
### 待实现功能 🔄
|
||||
|
||||
- [ ] 创建文件夹
|
||||
- [ ] 删除文件/文件夹
|
||||
- [ ] 重命名
|
||||
- [ ] 复制
|
||||
- [ ] 移动
|
||||
- [ ] 拖放操作
|
||||
- [ ] 搜索文件
|
||||
|
||||
## 四、常见问题
|
||||
|
||||
### Q1: 页面显示空白或加载失败?
|
||||
|
||||
**检查后端是否启动**
|
||||
```bash
|
||||
# 测试后端 API
|
||||
curl http://localhost:9484/api/v1/filesystem/browse
|
||||
```
|
||||
|
||||
应该返回驱动器列表的 JSON 数据。
|
||||
|
||||
### Q2: 显示 "无法打开文件夹"?
|
||||
|
||||
可能原因:
|
||||
1. 权限不足 (某些系统文件夹需要管理员权限)
|
||||
2. 路径不存在
|
||||
3. 后端服务未响应
|
||||
|
||||
### Q3: 如何切换到 Mock 数据模式?
|
||||
|
||||
1. 点击右下角 🔬 按钮打开调试面板
|
||||
2. 找到"🔌 API 集成"部分
|
||||
3. 点击"切换到 Mock 数据"
|
||||
|
||||
### Q4: 如何查看 API 请求?
|
||||
|
||||
1. 打开浏览器开发者工具 (F12)
|
||||
2. 切换到 Network 标签
|
||||
3. 筛选 XHR 请求
|
||||
4. 查看 `/api/v1/filesystem/` 开头的请求
|
||||
|
||||
## 五、开发模式
|
||||
|
||||
### 修改 API 基础 URL
|
||||
|
||||
编辑 `.env` 文件:
|
||||
```env
|
||||
VITE_APP_API_URL=http://127.0.0.1:9484/api
|
||||
```
|
||||
|
||||
### 禁用真实 API (测试 Mock 数据)
|
||||
|
||||
编辑 `src/views/FieldView.vue`:
|
||||
```vue
|
||||
<!-- 改为 false 使用 Mock 数据 -->
|
||||
<FileManager :use-real-api="false" />
|
||||
```
|
||||
|
||||
## 六、下一步
|
||||
|
||||
查看详细文档: `文件系统集成说明.md`
|
||||
|
||||
---
|
||||
|
||||
**最后更新**: 2025-10-03
|
||||
@@ -0,0 +1,339 @@
|
||||
# 文件类型支持说明
|
||||
|
||||
## 概述
|
||||
|
||||
Argus 照片管理系统专注于照片和视频的管理，支持常见的图片和视频格式。对于不支持的文件类型，会显示其文件扩展名。
|
||||
|
||||
## 支持的文件类型
|
||||
|
||||
### 📸 图片格式
|
||||
|
||||
#### 常见格式
|
||||
- **JPEG/JPG** - 最常见的照片格式
|
||||
- **PNG** - 支持透明的图片格式
|
||||
- **GIF** - 动图格式
|
||||
- **BMP** - 位图格式
|
||||
- **WEBP** - Google 开发的现代图片格式
|
||||
- **SVG** - 矢量图格式
|
||||
|
||||
#### RAW 格式（专业相机）
|
||||
- **CR2/CR3** - Canon RAW
|
||||
- **NEF** - Nikon RAW
|
||||
- **ARW** - Sony RAW
|
||||
- **DNG** - Adobe Digital Negative
|
||||
- **ORF** - Olympus RAW
|
||||
- **RW2** - Panasonic RAW
|
||||
- **PEF** - Pentax RAW
|
||||
- **SRW** - Samsung RAW
|
||||
- **RAF** - Fujifilm RAW
|
||||
|
||||
#### 高级格式
|
||||
- **TIFF/TIF** - 无损图片格式
|
||||
- **HEIC/HEIF** - iOS 照片格式
|
||||
- **AVIF** - 新一代图片格式
|
||||
- **JXL** - JPEG XL 格式
|
||||
|
||||
### 🎬 视频格式
|
||||
|
||||
#### 常见格式
|
||||
- **MP4** - 最常见的视频格式
|
||||
- **AVI** - 微软视频格式
|
||||
- **MOV** - QuickTime 视频格式
|
||||
- **MKV** - 高清视频容器
|
||||
- **WMV** - Windows Media Video
|
||||
- **FLV** - Flash 视频
|
||||
- **WEBM** - Web 视频格式
|
||||
- **M4V** - iTunes 视频格式
|
||||
|
||||
#### 高清格式
|
||||
- **MTS/M2TS/TS** - AVCHD 高清视频
|
||||
|
||||
#### 其他格式
|
||||
- **3GP** - 手机视频格式
|
||||
- **MPG/MPEG** - MPEG 视频
|
||||
- **VOB** - DVD 视频
|
||||
- **OGV** - Ogg 视频
|
||||
- **RM/RMVB** - RealMedia 视频
|
||||
- **ASF** - Advanced Systems Format
|
||||
|
||||
## 文件类型识别逻辑
|
||||
|
||||
### 识别优先级
|
||||
|
||||
1. **MIME 类型** (后端提供)
|
||||
- 最准确的文件类型识别
|
||||
- 基于文件内容而非扩展名
|
||||
|
||||
2. **文件扩展名**
|
||||
- MIME 类型无法识别时使用
|
||||
- 基于文件名后缀判断
|
||||
|
||||
### 类型分类
|
||||
|
||||
```typescript
|
||||
// 文件夹
|
||||
type: 'folder' → 📁
|
||||
|
||||
// 照片
|
||||
type: 'photo' → 🖼️
|
||||
|
||||
// 视频
|
||||
type: 'video' → 🎬
|
||||
|
||||
// 不支持的文件
|
||||
type: 'file' → 显示扩展名 (例如: TXT, ZIP, PDF)
|
||||
```
|
||||
|
||||
## 显示样式
|
||||
|
||||
### 网格视图
|
||||
|
||||
**支持的文件**
|
||||
- 文件夹: 📁 大图标，橙色
|
||||
- 照片: 🖼️ 大图标，蓝色
|
||||
- 视频: 🎬 大图标，粉色
|
||||
|
||||
**不支持的文件**
|
||||
- 样式: 灰色背景，边框，显示扩展名
|
||||
- 示例: `TXT`, `ZIP`, `PDF`, `DOC`
|
||||
- 字体: 11px, 粗体, 大写
|
||||
|
||||
### 列表视图
|
||||
|
||||
**支持的文件**
|
||||
- 文件夹: 📁 20px
|
||||
- 照片: 🖼️ 18px
|
||||
- 视频: 🎬 18px
|
||||
|
||||
**不支持的文件**
|
||||
- 样式: 小标签样式，灰色背景
|
||||
- 字体: 10px, 粗体, 大写
|
||||
- 最小宽度: 28px
|
||||
|
||||
## 配置文件位置
|
||||
|
||||
**`src/config/fileTypes.ts`**
|
||||
|
||||
```typescript
|
||||
// 添加新的图片格式
|
||||
export const IMAGE_EXTENSIONS = [
|
||||
'jpg',
|
||||
'png',
|
||||
// ... 添加新格式
|
||||
'newformat'
|
||||
]
|
||||
|
||||
// 添加新的视频格式
|
||||
export const VIDEO_EXTENSIONS = [
|
||||
'mp4',
|
||||
'mov',
|
||||
// ... 添加新格式
|
||||
'newformat'
|
||||
]
|
||||
```
|
||||
|
||||
## API 集成
|
||||
|
||||
### 后端返回数据
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "file123",
|
||||
"name": "example.jpg",
|
||||
"type": "file",
|
||||
"file_info": {
|
||||
"extension": ".jpg",
|
||||
"mime_type": "image/jpeg"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 前端转换
|
||||
|
||||
```typescript
|
||||
// 优先使用 MIME 类型
|
||||
if (item.file_info.mime_type) {
|
||||
itemType = getFileTypeByMime(item.file_info.mime_type)
|
||||
}
|
||||
|
||||
// MIME 无法识别时使用扩展名
|
||||
if (itemType === 'file' && item.file_info.extension) {
|
||||
itemType = getFileTypeByExtension(extension)
|
||||
}
|
||||
```
|
||||
|
||||
## 统计功能
|
||||
|
||||
### 文件统计
|
||||
|
||||
在面包屑导航右侧显示当前文件夹的统计信息:
|
||||
|
||||
```
|
||||
🖼️ 128 (照片数量)
|
||||
🎬 15 (视频数量)
|
||||
```
|
||||
|
||||
**统计逻辑**
|
||||
```typescript
|
||||
const fileStats = computed(() => {
|
||||
const items = visibleItems.value
|
||||
return {
|
||||
photos: items.filter(item => item.type === 'photo').length,
|
||||
videos: items.filter(item => item.type === 'video').length
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
**注意**: 只统计照片和视频，不统计其他文件类型
|
||||
|
||||
## 工具函数
|
||||
|
||||
### `getFileTypeByExtension(extension: string)`
|
||||
根据扩展名判断文件类型
|
||||
|
||||
```typescript
|
||||
getFileTypeByExtension('jpg') // 'photo'
|
||||
getFileTypeByExtension('mp4') // 'video'
|
||||
getFileTypeByExtension('txt') // 'file'
|
||||
```
|
||||
|
||||
### `getFileTypeByMime(mimeType: string)`
|
||||
根据 MIME 类型判断文件类型
|
||||
|
||||
```typescript
|
||||
getFileTypeByMime('image/jpeg') // 'photo'
|
||||
getFileTypeByMime('video/mp4') // 'video'
|
||||
getFileTypeByMime('text/plain') // 'file'
|
||||
```
|
||||
|
||||
### `isSupportedMediaFile(extension: string)`
|
||||
判断是否为支持的媒体文件
|
||||
|
||||
```typescript
|
||||
isSupportedMediaFile('jpg') // true
|
||||
isSupportedMediaFile('mp4') // true
|
||||
isSupportedMediaFile('txt') // false
|
||||
```
|
||||
|
||||
### `getFileIcon(type: FileType, extension?: string)`
|
||||
获取文件图标或扩展名显示
|
||||
|
||||
```typescript
|
||||
getFileIcon('folder') // '📁'
|
||||
getFileIcon('photo') // '🖼️'
|
||||
getFileIcon('video') // '🎬'
|
||||
getFileIcon('file', 'txt') // 'TXT'
|
||||
getFileIcon('file', 'pdf') // 'PDF'
|
||||
getFileIcon('file') // '📄' (无扩展名)
|
||||
```
|
||||
|
||||
## 扩展指南
|
||||
|
||||
### 添加新的图片格式
|
||||
|
||||
1. 编辑 `src/config/fileTypes.ts`
|
||||
2. 在 `IMAGE_EXTENSIONS` 数组中添加扩展名
|
||||
3. 如果需要，在 `MIME_TYPE_MAP` 中添加 MIME 映射
|
||||
|
||||
```typescript
|
||||
export const IMAGE_EXTENSIONS = [
|
||||
// ... 现有格式
|
||||
'jxl', // 新格式
|
||||
'avif' // 新格式
|
||||
]
|
||||
|
||||
export const MIME_TYPE_MAP = {
|
||||
// ... 现有映射
|
||||
'image/jxl': 'photo',
|
||||
'image/avif': 'photo'
|
||||
}
|
||||
```
|
||||
|
||||
### 添加新的视频格式
|
||||
|
||||
同样的流程，修改 `VIDEO_EXTENSIONS`:
|
||||
|
||||
```typescript
|
||||
export const VIDEO_EXTENSIONS = [
|
||||
// ... 现有格式
|
||||
'av1', // 新格式
|
||||
]
|
||||
```
|
||||
|
||||
### 自定义文件类型图标
|
||||
|
||||
修改 `getFileIcon` 函数:
|
||||
|
||||
```typescript
|
||||
export function getFileIcon(type: FileType, extension?: string): string {
|
||||
switch (type) {
|
||||
case 'file':
|
||||
// 可以为特定扩展名定制图标
|
||||
if (extension === 'pdf') return '📕'
|
||||
if (extension === 'zip') return '📦'
|
||||
return extension ? extension.toUpperCase() : '📄'
|
||||
// ... 其他类型
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 性能考虑
|
||||
|
||||
### 类型判断缓存
|
||||
|
||||
对于大量文件，类型判断已经优化:
|
||||
|
||||
1. **一次判断**: 在 `convertToFileItem` 中完成
|
||||
2. **结果缓存**: 存储在 `FileItem.type` 中
|
||||
3. **扩展名预处理**: 提前提取并存储
|
||||
|
||||
### 统计计算
|
||||
|
||||
文件统计使用 computed 属性，只在数据变化时重新计算。
|
||||
|
||||
## 常见问题
|
||||
|
||||
### Q: 为什么某些图片显示为普通文件?
|
||||
|
||||
**可能原因**:
|
||||
1. 扩展名不在支持列表中
|
||||
2. 后端未正确识别 MIME 类型
|
||||
3. 文件扩展名大小写问题 (已自动处理为小写)
|
||||
|
||||
**解决方法**:
|
||||
- 检查 `IMAGE_EXTENSIONS` 是否包含该扩展名
|
||||
- 添加缺失的扩展名到配置
|
||||
|
||||
### Q: 如何自定义不支持文件的显示?
|
||||
|
||||
编辑 `src/components/FileManager/FilePane.vue` 的样式:
|
||||
|
||||
```css
|
||||
.file-item[data-item-type="file"] .file-icon {
|
||||
/* 修改样式 */
|
||||
background: #your-color;
|
||||
font-size: 12px;
|
||||
}
|
||||
```
|
||||
|
||||
### Q: 能否添加文档类型的特殊处理?
|
||||
|
||||
可以扩展 `FileType` 类型:
|
||||
|
||||
```typescript
|
||||
// types.ts
|
||||
export type FileType = 'folder' | 'photo' | 'video' | 'document' | 'file'
|
||||
|
||||
// fileTypes.ts
|
||||
export const DOCUMENT_EXTENSIONS = ['pdf', 'doc', 'docx', 'txt']
|
||||
|
||||
// 添加判断逻辑
|
||||
if (DOCUMENT_EXTENSIONS.includes(ext)) {
|
||||
return 'document'
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**最后更新**: 2025-10-03
|
||||
**维护者**: Claude Code
|
||||
@@ -0,0 +1,236 @@
|
||||
# 文件系统 API 集成说明
|
||||
|
||||
## 概述
|
||||
|
||||
已成功将前端文件管理器与后端文件系统 API 集成。前端可以通过 API 访问真实的文件系统,包括浏览文件夹、创建目录、删除文件等操作。
|
||||
|
||||
## 集成内容
|
||||
|
||||
### 1. 新增文件
|
||||
|
||||
#### `src/services/fileSystemService.ts`
|
||||
文件系统 API 服务层,提供以下功能:
|
||||
- `browse(path)` - 浏览文件系统
|
||||
- `getDiskUsage(path)` - 获取磁盘使用情况
|
||||
- `getItem(path)` - 获取文件系统项目信息
|
||||
- `searchFiles(path, pattern, type, recursive)` - 搜索文件
|
||||
- `createDirectory(path)` - 创建目录
|
||||
- `deleteItem(path, operationId, recursive)` - 删除文件或目录
|
||||
- `moveItem(source, destination, operationId, overwrite)` - 移动/重命名
|
||||
- `copyItem(source, destination, operationId, overwrite)` - 复制
|
||||
|
||||
#### `src/composables/fileManager/useFileSystemAPI.ts`
|
||||
文件系统 API Composable,用于在组件中集成:
|
||||
- 状态管理: `currentPath`, `items`, `loading`, `error`
|
||||
- 转换函数: `convertToFileItem` (后端格式 → 前端格式)
|
||||
- 所有 CRUD 操作的封装
|
||||
|
||||
### 2. 修改文件
|
||||
|
||||
#### `src/components/FileManager/FilePane.vue`
|
||||
- 添加 `useFileSystemAPI` 集成
|
||||
- 添加 `USE_REAL_API` 开关(默认 false,使用 Mock 数据)
|
||||
- 修改 `currentFolder` 计算逻辑,支持真实 API 和 Mock 数据
|
||||
- 修改 `navigateToFolder` 函数,支持真实 API 导航
|
||||
- 在 `onMounted` 中初始化真实 API(如果启用)
|
||||
- 传递 API 状态给 DebugPanel
|
||||
|
||||
#### `src/components/FileManager/DebugPanel.vue`
|
||||
- 添加"API 集成"部分
|
||||
- 显示当前数据源(真实 API / Mock 数据)
|
||||
- 显示 API 加载状态和错误信息
|
||||
- 添加切换按钮,可在真实 API 和 Mock 数据间切换
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 开发环境测试
|
||||
|
||||
1. **启动后端服务**
|
||||
```bash
|
||||
cd D:\go-argus\src\rear
|
||||
go run main.go
|
||||
```
|
||||
后端将运行在 `http://localhost:9484` (或配置的端口)
|
||||
|
||||
2. **启动前端服务**
|
||||
```bash
|
||||
cd D:\go-argus\src\front\argus-front
|
||||
npm run dev
|
||||
```
|
||||
|
||||
3. **打开文件管理器页面**
|
||||
- 访问 `http://localhost:3000/field`
|
||||
- ✅ **现在默认启用真实 API** (不需要手动切换)
|
||||
|
||||
4. **浏览文件系统**
|
||||
- 初始会显示所有驱动器(Windows 上是 C:, D: 等盘符)
|
||||
- 双击驱动器或文件夹可进入
|
||||
- 面包屑导航显示当前路径
|
||||
|
||||
5. **调试模式** (可选)
|
||||
- 点击右下角的调试按钮 🔬 打开调试面板
|
||||
- 在"🔌 API 集成"部分可以切换 Mock 数据和真实 API
|
||||
- 查看 API 加载状态和错误信息
|
||||
|
||||
## 功能对照
|
||||
|
||||
| 功能 | Mock 数据模式 | 真实 API 模式 | 状态 |
|
||||
|------|--------------|--------------|------|
|
||||
| 浏览文件夹 | ✅ | ✅ | 已实现 |
|
||||
| 面包屑导航 | ✅ | ⚠️ 部分支持 | 需优化 |
|
||||
| 搜索文件 | ✅ | 🔄 | 待集成 |
|
||||
| 创建文件夹 | ✅ | 🔄 | 待集成 |
|
||||
| 删除文件 | ✅ | 🔄 | 待集成 |
|
||||
| 复制文件 | ✅ | 🔄 | 待集成 |
|
||||
| 移动文件 | ✅ | 🔄 | 待集成 |
|
||||
| 重命名 | ✅ | 🔄 | 待集成 |
|
||||
| 拖放操作 | ✅ | 🔄 | 待集成 |
|
||||
|
||||
## 后端 API 端点
|
||||
|
||||
基础 URL: `http://localhost:9484/api/v1`
|
||||
|
||||
### 浏览相关
|
||||
- `GET /filesystem/browse?path={path}` - 浏览文件系统
|
||||
- `GET /filesystem/disk-usage?path={path}` - 获取磁盘使用情况
|
||||
- `GET /filesystem/item?path={path}` - 获取项目信息
|
||||
- `GET /filesystem/search?path={path}&pattern={pattern}&recursive={bool}` - 搜索文件
|
||||
|
||||
### 操作相关
|
||||
- `POST /filesystem/directory` - 创建目录
|
||||
```json
|
||||
{ "path": "/path/to/directory" }
|
||||
```
|
||||
|
||||
- `DELETE /filesystem/item?path={path}` - 删除文件或目录
|
||||
|
||||
- `PUT /filesystem/item/move` - 移动/重命名
|
||||
```json
|
||||
{
|
||||
"source": "/old/path",
|
||||
"destination": "/new/path",
|
||||
"overwrite": false
|
||||
}
|
||||
```
|
||||
|
||||
- `POST /filesystem/item/copy` - 复制
|
||||
```json
|
||||
{
|
||||
"source": "/source/path",
|
||||
"destination": "/dest/path",
|
||||
"overwrite": false
|
||||
}
|
||||
```
|
||||
|
||||
## 数据格式
|
||||
|
||||
### 后端响应格式 (FileSystemItem)
|
||||
```typescript
|
||||
{
|
||||
id: string // 唯一标识
|
||||
name: string // 显示名称
|
||||
path: string // 完整路径
|
||||
type: 'drive' | 'directory' | 'file'
|
||||
size: number // 字节
|
||||
mod_time: string // ISO 8601 时间
|
||||
is_accessible: boolean
|
||||
drive_info?: { // 驱动器信息
|
||||
label: string
|
||||
total_space: number
|
||||
free_space: number
|
||||
usage_percent: number
|
||||
}
|
||||
file_info?: { // 文件信息
|
||||
extension: string
|
||||
mime_type: string
|
||||
}
|
||||
directory_info?: { // 目录信息
|
||||
item_count: number
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 前端格式 (FileItem)
|
||||
```typescript
|
||||
{
|
||||
name: string
|
||||
type: 'folder' | 'photo' | 'video' | 'file'
|
||||
size?: string // 格式化的大小字符串
|
||||
date?: string // 格式化的日期字符串
|
||||
children?: Record<string, FileItem>
|
||||
}
|
||||
```
|
||||
|
||||
## 后续优化
|
||||
|
||||
### 短期任务
|
||||
1. ✅ 基础浏览功能
|
||||
2. 🔄 完善面包屑导航(路径解析)
|
||||
3. 🔄 集成创建/删除/移动/复制操作
|
||||
4. 🔄 集成拖放操作到真实 API
|
||||
5. 🔄 添加错误处理和用户提示
|
||||
|
||||
### 中期任务
|
||||
1. 🔄 优化路径处理(Windows 路径 vs Unix 路径)
|
||||
2. 🔄 添加操作进度显示(大文件复制)
|
||||
3. 🔄 添加操作历史和撤销功能
|
||||
4. 🔄 优化性能(虚拟滚动 + API 分页)
|
||||
|
||||
### 长期任务
|
||||
1. 🔄 文件预览功能
|
||||
2. 🔄 批量操作支持
|
||||
3. 🔄 权限管理
|
||||
4. 🔄 文件搜索优化
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **路径格式**: Windows 使用反斜杠 `\`,需要在 API 调用时正确处理
|
||||
2. **权限问题**: 某些系统目录可能无权访问,需要处理权限错误
|
||||
3. **大文件操作**: 复制/移动大文件时需要显示进度
|
||||
4. **并发控制**: 避免同时进行多个修改操作
|
||||
5. **错误处理**: 网络错误、权限错误等需要友好提示
|
||||
|
||||
## 测试建议
|
||||
|
||||
### 基础功能测试
|
||||
- [ ] 切换到真实 API 模式
|
||||
- [ ] 浏览根目录(显示所有驱动器)
|
||||
- [ ] 进入某个驱动器
|
||||
- [ ] 进入多层文件夹
|
||||
- [ ] 查看文件统计信息
|
||||
|
||||
### 操作测试 (待实现)
|
||||
- [ ] 创建新文件夹
|
||||
- [ ] 删除文件
|
||||
- [ ] 重命名文件
|
||||
- [ ] 复制文件
|
||||
- [ ] 移动文件
|
||||
- [ ] 拖放操作
|
||||
|
||||
### 边界测试
|
||||
- [ ] 访问无权限目录
|
||||
- [ ] 访问不存在的路径
|
||||
- [ ] 网络断开时的表现
|
||||
- [ ] 后端服务未启动时的提示
|
||||
|
||||
## 开发者指南
|
||||
|
||||
### 添加新的文件操作
|
||||
|
||||
1. 在 `fileSystemService.ts` 中添加 API 方法
|
||||
2. 在 `useFileSystemAPI.ts` 中添加封装函数
|
||||
3. 在 `FilePane.vue` 中调用相应函数
|
||||
4. 更新 UI 反馈(loading、成功、失败提示)
|
||||
|
||||
### 调试技巧
|
||||
|
||||
- 使用调试面板的"API 集成"部分监控状态
|
||||
- 检查浏览器 Network 标签查看 API 请求
|
||||
- 查看 Console 查看错误日志
|
||||
- 使用后端日志确认请求处理情况
|
||||
|
||||
---
|
||||
|
||||
**创建时间**: 2025-10-03
|
||||
**集成版本**: v1.0
|
||||
**维护者**: Claude Code
|
||||
@@ -0,0 +1,293 @@
|
||||
# 真实 API 集成状态
|
||||
|
||||
**最后更新**: 2025-10-03
|
||||
|
||||
## ✅ 已完成的功能
|
||||
|
||||
### 基础浏览功能
|
||||
- [x] 浏览驱动器列表 (根目录)
|
||||
- [x] 双击进入文件夹
|
||||
- [x] 显示文件和文件夹列表
|
||||
- [x] 文件类型识别 (photo/video/file/folder)
|
||||
- [x] 文件大小格式化显示
|
||||
- [x] 修改时间格式化显示
|
||||
|
||||
### 导航功能
|
||||
- [x] 面包屑导航点击跳转
|
||||
- [x] 鼠标前进/后退按钮
|
||||
- [x] 历史记录管理
|
||||
- [x] 路径编辑功能 (手动输入路径)
|
||||
|
||||
### UI 显示
|
||||
- [x] 面包屑路径显示
|
||||
- [x] 文件统计 (照片数量、视频数量)
|
||||
- [x] 网格/列表视图切换
|
||||
- [x] 缩略图大小调整
|
||||
- [x] 加载状态显示
|
||||
- [x] 错误提示
|
||||
|
||||
### 调试工具
|
||||
- [x] 调试面板显示 API 状态
|
||||
- [x] 真实 API / Mock 数据切换
|
||||
- [x] API 加载状态监控
|
||||
- [x] 错误信息显示
|
||||
|
||||
## ⚠️ 部分支持的功能
|
||||
|
||||
### 面包屑下拉菜单
|
||||
- **状态**: 真实 API 模式下已禁用
|
||||
- **原因**: 需要额外的 API 调用获取同级目录列表
|
||||
- **Mock 模式**: 正常工作
|
||||
- **后续**: 可以添加一个新的 API 端点支持
|
||||
|
||||
### 搜索功能
|
||||
- **状态**: UI 存在，但真实 API 未集成
|
||||
- **后端 API**: 已实现 `/api/v1/filesystem/search`
|
||||
- **待集成**: 前端调用和结果显示
|
||||
|
||||
## ❌ 未支持的功能
|
||||
|
||||
### 文件操作 (需要集成后端 API)
|
||||
- [ ] 创建文件夹
|
||||
- [ ] 删除文件/文件夹
|
||||
- [ ] 重命名
|
||||
- [ ] 复制文件/文件夹
|
||||
- [ ] 移动文件/文件夹
|
||||
- [ ] 拖放操作
|
||||
|
||||
### 高级功能
|
||||
- [ ] 文件预览
|
||||
- [ ] 批量选择操作
|
||||
- [ ] 右键菜单集成真实 API
|
||||
- [ ] 快速预览
|
||||
|
||||
## 📝 已修改的文件
|
||||
|
||||
### 核心文件
|
||||
1. **`src/views/FieldView.vue`**
|
||||
- 添加 `:use-real-api="true"` 启用真实 API
|
||||
|
||||
2. **`src/components/FileManager/FileManager.vue`**
|
||||
- 添加 `useRealApi` prop
|
||||
- 传递给所有 FilePane 组件
|
||||
|
||||
3. **`src/components/FileManager/FilePane.vue`**
|
||||
- 接收 `useRealApi` prop
|
||||
- 修改所有导航函数支持真实 API:
|
||||
- `navigateToFolder` - 文件夹导航
|
||||
- `navigateToFolderByPath` - 使用完整路径导航
|
||||
- `navigateToIndex` - 面包屑点击导航
|
||||
- `goBack` / `goForward` - 历史记录前进后退
|
||||
- `navigateToPathArray` - 路径数组导航辅助函数
|
||||
- `convertPathToBreadcrumbs` - 路径转面包屑
|
||||
- `applyPathEdit` - 手动输入路径
|
||||
- `enterPathEditMode` - 路径编辑模式
|
||||
- 修改 `handleItemDoubleClick` - 使用 item.path
|
||||
- 修改 `onMounted` - 初始化加载真实文件系统
|
||||
- 修改 `currentFolder` computed - 支持真实 API 数据
|
||||
- 禁用 `toggleBreadcrumbDropdown` (真实 API 模式)
|
||||
|
||||
4. **`src/components/FileManager/types.ts`**
|
||||
- 添加 `path?: string` 字段到 FileItem
|
||||
|
||||
5. **`src/components/FileManager/DebugPanel.vue`**
|
||||
- 添加 API 集成状态显示
|
||||
- 添加 API 切换按钮
|
||||
- 显示加载状态和错误
|
||||
|
||||
### 新增文件
|
||||
1. **`src/services/fileSystemService.ts`**
|
||||
- 文件系统 API 服务层
|
||||
- 封装所有后端 API 调用
|
||||
|
||||
2. **`src/composables/fileManager/useFileSystemAPI.ts`**
|
||||
- 文件系统 API Composable
|
||||
- 状态管理和数据转换
|
||||
|
||||
## 🔍 技术细节
|
||||
|
||||
### 路径处理
|
||||
|
||||
#### Windows 路径格式
|
||||
- **驱动器**: `D:\`
|
||||
- **子目录**: `D:\Users\Documents`
|
||||
- **分隔符**: 反斜杠 `\`
|
||||
|
||||
#### 面包屑转换
|
||||
```typescript
|
||||
// 后端返回: "D:\Users\Documents"
|
||||
// 前端显示: ["D:", "Users", "Documents"]
|
||||
|
||||
function convertPathToBreadcrumbs(path: string): string[] {
|
||||
if (!path) return ['根目录']
|
||||
|
||||
// 处理纯驱动器: "D:\" -> ["D:\"]
|
||||
if (/^[A-Z]:\\?$/.test(path)) {
|
||||
return [path]
|
||||
}
|
||||
|
||||
// 处理子路径: "D:\Users\Docs" -> ["D:", "Users", "Docs"]
|
||||
const parts = path.split('\\').filter(p => p)
|
||||
return parts.length > 0 ? parts : ['根目录']
|
||||
}
|
||||
```
|
||||
|
||||
#### 路径重建
|
||||
```typescript
|
||||
// 面包屑: ["D:", "Users", "Documents"]
|
||||
// 重建路径: "D:\Users\Documents"
|
||||
|
||||
const fullPath = pathArray.join('\\')
|
||||
await fileSystemAPI.browse(fullPath)
|
||||
```
|
||||
|
||||
### 数据流
|
||||
|
||||
#### 初始加载
|
||||
```
|
||||
用户访问页面
|
||||
→ FilePane.onMounted()
|
||||
→ fileSystemAPI.browse() (空路径)
|
||||
→ 后端返回驱动器列表
|
||||
→ 显示面包屑: ["所有驱动器"]
|
||||
```
|
||||
|
||||
#### 双击文件夹
|
||||
```
|
||||
用户双击 "D: (Data)"
|
||||
→ handleItemDoubleClick(item)
|
||||
→ navigateToFolderByPath(item.path) // "D:\"
|
||||
→ fileSystemAPI.browse("D:\")
|
||||
→ 后端返回 D:\ 内容
|
||||
→ convertPathToBreadcrumbs("D:\") → ["D:\"]
|
||||
→ 更新 UI
|
||||
```
|
||||
|
||||
#### 面包屑导航
|
||||
```
|
||||
用户点击面包屑 "Users"
|
||||
→ navigateToIndex(1)
|
||||
→ 重建路径: ["D:", "Users"] → "D:\Users"
|
||||
→ fileSystemAPI.browse("D:\Users")
|
||||
→ 更新 UI
|
||||
```
|
||||
|
||||
#### 历史前进/后退
|
||||
```
|
||||
用户点击鼠标后退
|
||||
→ goBack()
|
||||
→ 从历史获取路径数组
|
||||
→ navigateToPathArray(pathArray)
|
||||
→ 重建路径并调用 API
|
||||
→ 更新 UI
|
||||
```
|
||||
|
||||
## 🐛 已知问题
|
||||
|
||||
### 1. 路径格式不统一
|
||||
- **问题**: 有时面包屑显示 `["D:"]`，有时显示 `["D:\"]`
|
||||
- **影响**: 路径重建时可能出错
|
||||
- **状态**: 需要统一处理
|
||||
|
||||
### 2. 特殊路径处理
|
||||
- **问题**: 网络路径 `\\server\share` 未测试
|
||||
- **影响**: 可能无法访问网络共享
|
||||
- **状态**: 待测试
|
||||
|
||||
### 3. 权限错误提示
|
||||
- **问题**: 访问受保护目录时错误提示不够友好
|
||||
- **影响**: 用户体验
|
||||
- **状态**: 可优化
|
||||
|
||||
## 🚀 后续开发计划
|
||||
|
||||
### 短期 (1-2天)
|
||||
- [ ] 集成文件操作 API (创建/删除/重命名/复制/移动)
|
||||
- [ ] 集成搜索功能
|
||||
- [ ] 优化路径处理，统一格式
|
||||
- [ ] 改进错误提示
|
||||
|
||||
### 中期 (1周)
|
||||
- [ ] 集成拖放操作到真实 API
|
||||
- [ ] 添加面包屑下拉菜单支持 (需要新 API)
|
||||
- [ ] 文件预览功能
|
||||
- [ ] 批量操作支持
|
||||
|
||||
### 长期 (2周+)
|
||||
- [ ] 性能优化 (虚拟滚动 + API 分页)
|
||||
- [ ] 操作进度显示 (大文件复制)
|
||||
- [ ] 操作历史和撤销
|
||||
- [ ] 收藏夹功能
|
||||
|
||||
## 📖 开发指南
|
||||
|
||||
### 添加新的文件操作
|
||||
|
||||
1. **确认后端 API 存在**
|
||||
- 查看 `rear/tests/filesystem.http`
|
||||
- 确认端点和参数格式
|
||||
|
||||
2. **在 fileSystemService.ts 添加方法**
|
||||
```typescript
|
||||
async createDirectory(path: string): Promise<OperationResult> {
|
||||
const response = await httpClient.post('/v1/filesystem/directory', { path })
|
||||
return response.data
|
||||
}
|
||||
```
|
||||
|
||||
3. **在 useFileSystemAPI.ts 封装**
|
||||
```typescript
|
||||
async function createDirectory(path: string) {
|
||||
try {
|
||||
const result = await fileSystemService.createDirectory(path)
|
||||
await browse(currentPath.value) // 刷新
|
||||
return result
|
||||
} catch (err) {
|
||||
error.value = err.message
|
||||
throw err
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
4. **在 FilePane.vue 调用**
|
||||
```typescript
|
||||
async function handleCreateFolder() {
|
||||
if (USE_REAL_API.value) {
|
||||
const newPath = `${fileSystemAPI.currentPath.value}\\新建文件夹`
|
||||
await fileSystemAPI.createDirectory(newPath)
|
||||
} else {
|
||||
// Mock 数据模式
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 测试建议
|
||||
|
||||
1. **基础功能测试**
|
||||
- 浏览根目录
|
||||
- 进入驱动器
|
||||
- 进入多层文件夹
|
||||
- 点击面包屑返回
|
||||
- 鼠标前进/后退
|
||||
|
||||
2. **边界测试**
|
||||
- 访问无权限目录
|
||||
- 访问不存在路径
|
||||
- 网络断开
|
||||
- 后端服务停止
|
||||
|
||||
3. **性能测试**
|
||||
- 大量文件的文件夹
|
||||
- 深层嵌套目录
|
||||
- 快速连续导航
|
||||
|
||||
## 🔗 相关文档
|
||||
|
||||
- [文件系统集成说明.md](./文件系统集成说明.md) - 完整集成文档
|
||||
- [快速开始.md](./快速开始.md) - 快速启动指南
|
||||
- [后端 API 测试](../../rear/tests/filesystem.http) - API 测试用例
|
||||
|
||||
---
|
||||
|
||||
**维护者**: Claude Code
|
||||
**项目**: Argus 照片管理系统
|
||||
Reference in new issue
Block a user