{
+ const { name, isDirectory = false } = props
+ if (isDirectory) {
+ return
+ }
+
+ const ext = name?.split('.').pop() || ''
+ if (ext) {
+ switch (ext.toLowerCase()) {
+ case 'jpg':
+ case 'jpeg':
+ case 'png':
+ case 'gif':
+ case 'svg':
+ case 'bmp':
+ case 'ico':
+ case 'webp':
+ case 'tiff':
+ case 'tif':
+ case 'heic':
+ case 'heif':
+ case 'avif':
+ case 'apng':
+ case 'flif':
+ case 'ai':
+ case 'psd':
+ case 'xcf':
+ case 'sketch':
+ case 'fig':
+ case 'xd':
+ case 'svgz':
+ return
+ case 'pdf':
+ return
+ case 'doc':
+ case 'docx':
+ return
+ case 'xls':
+ case 'xlsx':
+ return
+ case 'csv':
+ return
+ case 'ppt':
+ case 'pptx':
+ return
+ case 'zip':
+ case 'rar':
+ case '7z':
+ case 'tar':
+ case 'gz':
+ case 'bz2':
+ case 'xz':
+ case 'lz':
+ case 'lzma':
+ case 'zst':
+ case 'zstd':
+ case 'z':
+ case 'taz':
+ case 'tz':
+ case 'tzo':
+ return
+ case 'txt':
+ return
+ case 'mp3':
+ case 'wav':
+ case 'flac':
+ return
+ case 'mp4':
+ case 'avi':
+ case 'mov':
+ case 'wmv':
+ return
+ case 'html':
+ case 'css':
+ case 'js':
+ case 'ts':
+ case 'jsx':
+ case 'tsx':
+ case 'json':
+ case 'xml':
+ case 'yaml':
+ case 'yml':
+ case 'md':
+ case 'sh':
+ case 'py':
+ case 'java':
+ case 'c':
+ case 'cpp':
+ case 'cs':
+ case 'go':
+ case 'php':
+ case 'rb':
+ case 'pl':
+ case 'swift':
+ case 'kt':
+ case 'rs':
+ case 'sql':
+ case 'r':
+ case 'scala':
+ case 'groovy':
+ case 'dart':
+ case 'lua':
+ case 'perl':
+ case 'h':
+ case 'm':
+ case 'mm':
+ case 'makefile':
+ case 'cmake':
+ case 'dockerfile':
+ case 'gradle':
+ case 'properties':
+ case 'ini':
+ case 'conf':
+ case 'env':
+ case 'bat':
+ case 'cmd':
+ case 'ps1':
+ case 'psm1':
+ case 'psd1':
+ case 'ps1xml':
+ case 'psc1':
+ case 'pssc':
+ case 'nuspec':
+ case 'resx':
+ case 'resw':
+ case 'csproj':
+ case 'vbproj':
+ case 'vcxproj':
+ case 'fsproj':
+ case 'sln':
+ case 'suo':
+ case 'user':
+ case 'userosscache':
+ case 'sln.docstates':
+ case 'dll':
+ return
+ default:
+ return
+ }
+ }
+
+ return
+}
+
+export default FileIcon
diff --git a/napcat.webui/src/components/file_manage/create_file_modal.tsx b/napcat.webui/src/components/file_manage/create_file_modal.tsx
new file mode 100644
index 00000000..51b3a14c
--- /dev/null
+++ b/napcat.webui/src/components/file_manage/create_file_modal.tsx
@@ -0,0 +1,64 @@
+import { Button, ButtonGroup } from '@heroui/button'
+import { Input } from '@heroui/input'
+import {
+ Modal,
+ ModalBody,
+ ModalContent,
+ ModalFooter,
+ ModalHeader
+} from '@heroui/modal'
+
+interface CreateFileModalProps {
+ isOpen: boolean
+ fileType: 'file' | 'directory'
+ newFileName: string
+ onTypeChange: (type: 'file' | 'directory') => void
+ onNameChange: (e: React.ChangeEvent
) => void
+ onClose: () => void
+ onCreate: () => void
+}
+
+export default function CreateFileModal({
+ isOpen,
+ fileType,
+ newFileName,
+ onTypeChange,
+ onNameChange,
+ onClose,
+ onCreate
+}: CreateFileModalProps) {
+ return (
+
+
+ 新建
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/napcat.webui/src/components/file_manage/file_edit_modal.tsx b/napcat.webui/src/components/file_manage/file_edit_modal.tsx
new file mode 100644
index 00000000..cc906e63
--- /dev/null
+++ b/napcat.webui/src/components/file_manage/file_edit_modal.tsx
@@ -0,0 +1,94 @@
+import { Button } from '@heroui/button'
+import { Code } from '@heroui/code'
+import {
+ Modal,
+ ModalBody,
+ ModalContent,
+ ModalFooter,
+ ModalHeader
+} from '@heroui/modal'
+
+import CodeEditor from '@/components/code_editor'
+
+interface FileEditModalProps {
+ isOpen: boolean
+ file: { path: string; content: string } | null
+ onClose: () => void
+ onSave: () => void
+ onContentChange: (newContent?: string) => void
+}
+
+export default function FileEditModal({
+ isOpen,
+ file,
+ onClose,
+ onSave,
+ onContentChange
+}: FileEditModalProps) {
+ // 根据文件后缀返回对应语言
+ const getLanguage = (filePath: string) => {
+ if (filePath.endsWith('.js')) return 'javascript'
+ if (filePath.endsWith('.ts')) return 'typescript'
+ if (filePath.endsWith('.tsx')) return 'tsx'
+ if (filePath.endsWith('.jsx')) return 'jsx'
+ if (filePath.endsWith('.vue')) return 'vue'
+ if (filePath.endsWith('.svelte')) return 'svelte'
+ if (filePath.endsWith('.json')) return 'json'
+ if (filePath.endsWith('.html')) return 'html'
+ if (filePath.endsWith('.css')) return 'css'
+ if (filePath.endsWith('.scss')) return 'scss'
+ if (filePath.endsWith('.less')) return 'less'
+ if (filePath.endsWith('.md')) return 'markdown'
+ if (filePath.endsWith('.yaml') || filePath.endsWith('.yml')) return 'yaml'
+ if (filePath.endsWith('.xml')) return 'xml'
+ if (filePath.endsWith('.sql')) return 'sql'
+ if (filePath.endsWith('.sh')) return 'shell'
+ if (filePath.endsWith('.bat')) return 'bat'
+ if (filePath.endsWith('.php')) return 'php'
+ if (filePath.endsWith('.java')) return 'java'
+ if (filePath.endsWith('.c')) return 'c'
+ if (filePath.endsWith('.cpp')) return 'cpp'
+ if (filePath.endsWith('.h')) return 'h'
+ if (filePath.endsWith('.hpp')) return 'hpp'
+ if (filePath.endsWith('.go')) return 'go'
+ if (filePath.endsWith('.py')) return 'python'
+ if (filePath.endsWith('.rb')) return 'ruby'
+ if (filePath.endsWith('.cs')) return 'csharp'
+ if (filePath.endsWith('.swift')) return 'swift'
+ if (filePath.endsWith('.vb')) return 'vb'
+ if (filePath.endsWith('.lua')) return 'lua'
+ if (filePath.endsWith('.pl')) return 'perl'
+ if (filePath.endsWith('.r')) return 'r'
+ return 'plaintext'
+ }
+
+ return (
+
+
+
+ 编辑文件
+ {file?.path}
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/napcat.webui/src/components/file_manage/file_preview_modal.tsx b/napcat.webui/src/components/file_manage/file_preview_modal.tsx
new file mode 100644
index 00000000..e416eb48
--- /dev/null
+++ b/napcat.webui/src/components/file_manage/file_preview_modal.tsx
@@ -0,0 +1,92 @@
+import { Button } from '@heroui/button'
+import {
+ Modal,
+ ModalBody,
+ ModalContent,
+ ModalFooter,
+ ModalHeader
+} from '@heroui/modal'
+import { Spinner } from '@heroui/spinner'
+import { useRequest } from 'ahooks'
+import path from 'path-browserify'
+import { useEffect } from 'react'
+
+import FileManager from '@/controllers/file_manager'
+
+interface FilePreviewModalProps {
+ isOpen: boolean
+ filePath: string
+ onClose: () => void
+}
+
+export const videoExts = ['.mp4', '.webm']
+export const audioExts = ['.mp3', '.wav']
+
+export const supportedPreviewExts = [...videoExts, ...audioExts]
+
+export default function FilePreviewModal({
+ isOpen,
+ filePath,
+ onClose
+}: FilePreviewModalProps) {
+ const ext = path.extname(filePath).toLowerCase()
+ const { data, loading, error, run } = useRequest(
+ async () => FileManager.downloadToURL(filePath),
+ {
+ refreshDeps: [filePath],
+ manual: true,
+ refreshDepsAction: () => {
+ const ext = path.extname(filePath).toLowerCase()
+ if (!filePath || !supportedPreviewExts.includes(ext)) {
+ return
+ }
+ run()
+ }
+ }
+ )
+
+ useEffect(() => {
+ if (filePath) {
+ run()
+ }
+ }, [filePath])
+
+ let contentElement = null
+ if (!supportedPreviewExts.includes(ext)) {
+ contentElement = 暂不支持预览此文件类型
+ } else if (error) {
+ contentElement = 读取文件失败
+ } else if (loading || !data) {
+ contentElement = (
+
+
+
+ )
+ } else if (videoExts.includes(ext)) {
+ contentElement =
+ } else if (audioExts.includes(ext)) {
+ contentElement =
+ } else {
+ contentElement = (
+
+
+
+ )
+ }
+
+ return (
+
+
+ 文件预览
+
+ {contentElement}
+
+
+
+
+
+
+ )
+}
diff --git a/napcat.webui/src/components/file_manage/file_table.tsx b/napcat.webui/src/components/file_manage/file_table.tsx
new file mode 100644
index 00000000..33f63fbf
--- /dev/null
+++ b/napcat.webui/src/components/file_manage/file_table.tsx
@@ -0,0 +1,245 @@
+import { Button, ButtonGroup } from '@heroui/button'
+import { Pagination } from '@heroui/pagination'
+import { Spinner } from '@heroui/spinner'
+import {
+ type Selection,
+ type SortDescriptor,
+ Table,
+ TableBody,
+ TableCell,
+ TableColumn,
+ TableHeader,
+ TableRow
+} from '@heroui/table'
+import path from 'path-browserify'
+import { useCallback, useEffect, useState } from 'react'
+import { BiRename } from 'react-icons/bi'
+import { FiCopy, FiDownload, FiMove, FiTrash2 } from 'react-icons/fi'
+import { PhotoSlider } from 'react-photo-view'
+
+import FileIcon from '@/components/file_icon'
+
+import type { FileInfo } from '@/controllers/file_manager'
+
+import { supportedPreviewExts } from './file_preview_modal'
+import ImageNameButton, { PreviewImage, imageExts } from './image_name_button'
+
+export interface FileTableProps {
+ files: FileInfo[]
+ currentPath: string
+ loading: boolean
+ sortDescriptor: SortDescriptor
+ onSortChange: (descriptor: SortDescriptor) => void
+ selectedFiles: Selection
+ onSelectionChange: (selected: Selection) => void
+ onDirectoryClick: (dirPath: string) => void
+ onEdit: (filePath: string) => void
+ onPreview: (filePath: string) => void
+ onRenameRequest: (name: string) => void
+ onMoveRequest: (name: string) => void
+ onCopyPath: (fileName: string) => void
+ onDelete: (filePath: string) => void
+ onDownload: (filePath: string) => void
+}
+
+const PAGE_SIZE = 20
+
+export default function FileTable({
+ files,
+ currentPath,
+ loading,
+ sortDescriptor,
+ onSortChange,
+ selectedFiles,
+ onSelectionChange,
+ onDirectoryClick,
+ onEdit,
+ onPreview,
+ onRenameRequest,
+ onMoveRequest,
+ onCopyPath,
+ onDelete,
+ onDownload
+}: FileTableProps) {
+ const [page, setPage] = useState(1)
+ const pages = Math.ceil(files.length / PAGE_SIZE) || 1
+ const start = (page - 1) * PAGE_SIZE
+ const end = start + PAGE_SIZE
+ const displayFiles = files.slice(start, end)
+ const [showImage, setShowImage] = useState(false)
+ const [previewIndex, setPreviewIndex] = useState(0)
+ const [previewImages, setPreviewImages] = useState([])
+
+ const addPreviewImage = useCallback((image: PreviewImage) => {
+ setPreviewImages((prev) => {
+ const exists = prev.some((p) => p.key === image.key)
+ if (exists) return prev
+ return [...prev, image]
+ })
+ }, [])
+
+ useEffect(() => {
+ setPreviewImages([])
+ setPreviewIndex(0)
+ setShowImage(false)
+ }, [currentPath])
+
+ const onPreviewImage = (name: string, images: PreviewImage[]) => {
+ const index = images.findIndex((image) => image.key === name)
+ if (index === -1) {
+ return
+ }
+ setPreviewIndex(index)
+ setShowImage(true)
+ }
+
+ return (
+ <>
+ setShowImage(false)}
+ index={previewIndex}
+ onIndexChange={setPreviewIndex}
+ />
+
+ setPage(page)}
+ />
+
+ }
+ >
+
+
+ 名称
+
+
+ 类型
+
+
+ 大小
+
+
+ 修改时间
+
+ 操作
+
+
+
+
+ }
+ >
+ {displayFiles.map((file: FileInfo) => {
+ const filePath = path.join(currentPath, file.name)
+ const ext = path.extname(file.name).toLowerCase()
+ const previewable = supportedPreviewExts.includes(ext)
+ const images = previewImages
+ return (
+
+
+ {imageExts.includes(ext) ? (
+ onPreviewImage(file.name, images)}
+ onAddPreview={addPreviewImage}
+ />
+ ) : (
+
+ )}
+
+ {file.isDirectory ? '目录' : '文件'}
+
+ {isNaN(file.size) || file.isDirectory
+ ? '-'
+ : `${file.size} 字节`}
+
+ {new Date(file.mtime).toLocaleString()}
+
+
+
+
+
+
+
+
+
+
+ )
+ })}
+
+
+
+ )
+}
diff --git a/napcat.webui/src/components/file_manage/image_name_button.tsx b/napcat.webui/src/components/file_manage/image_name_button.tsx
new file mode 100644
index 00000000..c1332f41
--- /dev/null
+++ b/napcat.webui/src/components/file_manage/image_name_button.tsx
@@ -0,0 +1,88 @@
+import { Button } from '@heroui/button'
+import { Image } from '@heroui/image'
+import { Spinner } from '@heroui/spinner'
+import { useRequest } from 'ahooks'
+import path from 'path-browserify'
+import { useEffect } from 'react'
+
+import FileManager from '@/controllers/file_manager'
+
+import FileIcon from '../file_icon'
+
+export interface PreviewImage {
+ key: string
+ src: string
+ alt: string
+}
+export const imageExts = ['.png', '.jpg', '.jpeg', '.gif', '.bmp']
+
+export interface ImageNameButtonProps {
+ name: string
+ filePath: string
+ onPreview: () => void
+ onAddPreview: (image: PreviewImage) => void
+}
+
+export default function ImageNameButton({
+ name,
+ filePath,
+ onPreview,
+ onAddPreview
+}: ImageNameButtonProps) {
+ const { data, loading, error, run } = useRequest(
+ async () => FileManager.downloadToURL(filePath),
+ {
+ refreshDeps: [filePath],
+ manual: true,
+ refreshDepsAction: () => {
+ const ext = path.extname(filePath).toLowerCase()
+ if (!filePath || !imageExts.includes(ext)) {
+ return
+ }
+ run()
+ }
+ }
+ )
+ useEffect(() => {
+ if (data) {
+ onAddPreview({
+ key: name,
+ src: data,
+ alt: name
+ })
+ }
+ }, [data, name, onAddPreview])
+
+ useEffect(() => {
+ if (filePath) {
+ run()
+ }
+ }, [])
+
+ return (
+
+ ) : loading || !data ? (
+
+ ) : (
+
+ )
+ }
+ >
+ {name}
+
+ )
+}
diff --git a/napcat.webui/src/components/file_manage/move_modal.tsx b/napcat.webui/src/components/file_manage/move_modal.tsx
new file mode 100644
index 00000000..ab7a631a
--- /dev/null
+++ b/napcat.webui/src/components/file_manage/move_modal.tsx
@@ -0,0 +1,168 @@
+import { Button } from '@heroui/button'
+import {
+ Modal,
+ ModalBody,
+ ModalContent,
+ ModalFooter,
+ ModalHeader
+} from '@heroui/modal'
+import { Spinner } from '@heroui/spinner'
+import clsx from 'clsx'
+import path from 'path-browserify'
+import { useState } from 'react'
+import { IoAdd, IoRemove } from 'react-icons/io5'
+
+import FileManager from '@/controllers/file_manager'
+
+interface MoveModalProps {
+ isOpen: boolean
+ moveTargetPath: string
+ selectionInfo: string
+ onClose: () => void
+ onMove: () => void
+ onSelect: (dir: string) => void // 新增回调
+}
+
+// 将 DirectoryTree 改为递归组件
+// 新增 selectedPath 属性，用于标识当前选中的目录
+function DirectoryTree({
+ basePath,
+ onSelect,
+ selectedPath
+}: {
+ basePath: string
+ onSelect: (dir: string) => void
+ selectedPath?: string
+}) {
+ const [dirs, setDirs] = useState([])
+ const [expanded, setExpanded] = useState(false)
+ // 新增loading状态
+ const [loading, setLoading] = useState(false)
+
+ const fetchDirectories = async () => {
+ try {
+ // 直接使用 basePath 调用接口，移除 process.platform 判断
+ const list = await FileManager.listDirectories(basePath)
+ setDirs(list.map((item) => item.name))
+ } catch (error) {
+ // ...error handling...
+ }
+ }
+
+ const handleToggle = async () => {
+ if (!expanded) {
+ setExpanded(true)
+ setLoading(true)
+ await fetchDirectories()
+ setLoading(false)
+ } else {
+ setExpanded(false)
+ }
+ }
+
+ const handleClick = () => {
+ onSelect(basePath)
+ handleToggle()
+ }
+
+ // 计算显示的名称
+ const getDisplayName = () => {
+ if (basePath === '/') return '/'
+ if (/^[A-Z]:$/i.test(basePath)) return basePath
+ return path.basename(basePath)
+ }
+
+ // 更新 Button 的 variant 逻辑
+ const isSeleted = selectedPath === basePath
+ const variant = isSeleted
+ ? 'solid'
+ : selectedPath && path.dirname(selectedPath) === basePath
+ ? 'flat'
+ : 'light'
+
+ return (
+
+ }
+ >
+ {getDisplayName()}
+
+ {expanded && (
+
+ {loading ? (
+
+
+
+ ) : (
+ dirs.map((dirName) => {
+ const childPath =
+ basePath === '/' && /^[A-Z]:$/i.test(dirName)
+ ? dirName
+ : path.join(basePath, dirName)
+ return (
+
+ )
+ })
+ )}
+