Merge branch 'main' into type-force

2025-07-19 12:03:37 +00:00 · 2025-02-03 11:13:46 +08:00
parent 15854c605b 93ed589ac7
commit 48b1f3d4f0
53 changed files with 3929 additions and 157 deletions
--- a/napcat.webui/package.json
+++ b/napcat.webui/package.json
@@ -4,12 +4,15 @@
  "version": "0.0.6",
  "type": "module",
  "scripts": {
-    "dev": "vite",
+    "dev": "vite --host=0.0.0.0",
    "build": "tsc && vite build",
    "lint": "eslint -c eslint.config.mjs ./src/**/**/*.{ts,tsx} --fix",
    "preview": "vite preview"
  },
  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
    "@heroui/avatar": "2.2.7",
    "@heroui/breadcrumbs": "2.2.7",
    "@heroui/button": "2.2.10",
@@ -33,6 +36,7 @@
    "@heroui/spinner": "2.2.7",
    "@heroui/switch": "2.2.9",
    "@heroui/system": "2.4.7",
+    "@heroui/table": "^2.2.9",
    "@heroui/tabs": "2.2.8",
    "@heroui/theme": "2.4.6",
    "@heroui/tooltip": "2.2.8",
@@ -53,6 +57,7 @@
    "framer-motion": "^12.0.6",
    "monaco-editor": "^0.52.2",
    "motion": "^12.0.6",
+    "path-browserify": "^1.0.1",
    "qface": "^1.4.1",
    "qrcode.react": "^4.2.0",
    "quill": "^2.0.3",
@@ -80,6 +85,7 @@
    "@types/event-source-polyfill": "^1.0.5",
    "@types/fabric": "^5.3.9",
    "@types/node": "^22.12.0",
+    "@types/path-browserify": "^1.0.3",
    "@types/react": "^19.0.8",
    "@types/react-dom": "^19.0.3",
    "@types/react-window": "^1.8.8",
--- a/napcat.webui/src/components/file_icon.tsx
+++ b/napcat.webui/src/components/file_icon.tsx
@@ -0,0 +1,166 @@
+import {
+  FaFile,
+  FaFileAudio,
+  FaFileCode,
+  FaFileCsv,
+  FaFileExcel,
+  FaFileImage,
+  FaFileLines,
+  FaFilePdf,
+  FaFilePowerpoint,
+  FaFileVideo,
+  FaFileWord,
+  FaFileZipper,
+  FaFolderClosed
+} from 'react-icons/fa6'
+
+export interface FileIconProps {
+  name?: string
+  isDirectory?: boolean
+}
+
+const FileIcon = (props: FileIconProps) => {
+  const { name, isDirectory = false } = props
+  if (isDirectory) {
+    return <FaFolderClosed className="text-yellow-500" />
+  }
+
+  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 <FaFileImage className="text-green-500" />
+      case 'pdf':
+        return <FaFilePdf className="text-red-500" />
+      case 'doc':
+      case 'docx':
+        return <FaFileWord className="text-blue-500" />
+      case 'xls':
+      case 'xlsx':
+        return <FaFileExcel className="text-green-500" />
+      case 'csv':
+        return <FaFileCsv className="text-green-500" />
+      case 'ppt':
+      case 'pptx':
+        return <FaFilePowerpoint className="text-red-500" />
+      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 <FaFileZipper className="text-green-500" />
+      case 'txt':
+        return <FaFileLines className="text-gray-500" />
+      case 'mp3':
+      case 'wav':
+      case 'flac':
+        return <FaFileAudio className="text-green-500" />
+      case 'mp4':
+      case 'avi':
+      case 'mov':
+      case 'wmv':
+        return <FaFileVideo className="text-red-500" />
+      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 <FaFileCode className="text-blue-500" />
+      default:
+        return <FaFile className="text-gray-500" />
+    }
+  }
+
+  return <FaFile className="text-gray-500" />
+}
+
+export default FileIcon
--- a/napcat.webui/src/components/file_manage/create_file_modal.tsx
+++ 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<HTMLInputElement>) => void
+  onClose: () => void
+  onCreate: () => void
+}
+
+export default function CreateFileModal({
+  isOpen,
+  fileType,
+  newFileName,
+  onTypeChange,
+  onNameChange,
+  onClose,
+  onCreate
+}: CreateFileModalProps) {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalContent>
+        <ModalHeader>新建</ModalHeader>
+        <ModalBody>
+          <div className="flex flex-col gap-4">
+            <ButtonGroup color="danger">
+              <Button
+                variant={fileType === 'file' ? 'solid' : 'flat'}
+                onPress={() => onTypeChange('file')}
+              >
+                文件
+              </Button>
+              <Button
+                variant={fileType === 'directory' ? 'solid' : 'flat'}
+                onPress={() => onTypeChange('directory')}
+              >
+                目录
+              </Button>
+            </ButtonGroup>
+            <Input label="名称" value={newFileName} onChange={onNameChange} />
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="danger" variant="flat" onPress={onClose}>
+            取消
+          </Button>
+          <Button color="danger" onPress={onCreate}>
+            创建
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}
--- a/napcat.webui/src/components/file_manage/file_edit_modal.tsx
+++ 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 (
+    <Modal size="full" isOpen={isOpen} onClose={onClose}>
+      <ModalContent>
+        <ModalHeader className="flex items-center gap-2 bg-content2 bg-opacity-50">
+          <span>编辑文件</span>
+          <Code className="text-xs">{file?.path}</Code>
+        </ModalHeader>
+        <ModalBody className="p-0">
+          <div className="h-full">
+            <CodeEditor
+              height="100%"
+              value={file?.content || ''}
+              onChange={onContentChange}
+              options={{ wordWrap: 'on' }}
+              language={file?.path ? getLanguage(file.path) : 'plaintext'}
+            />
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="danger" variant="flat" onPress={onClose}>
+            取消
+          </Button>
+          <Button color="danger" onPress={onSave}>
+            保存
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}
--- a/napcat.webui/src/components/file_manage/file_table.tsx
+++ b/napcat.webui/src/components/file_manage/file_table.tsx
@@ -0,0 +1,159 @@
+import { Button, ButtonGroup } from '@heroui/button'
+import { Spinner } from '@heroui/spinner'
+import {
+  type Selection,
+  type SortDescriptor,
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow
+} from '@heroui/table'
+import { Tooltip } from '@heroui/tooltip'
+import path from 'path-browserify'
+import { BiRename } from 'react-icons/bi'
+import { FiCopy, FiMove, FiTrash2 } from 'react-icons/fi'
+
+import FileIcon from '@/components/file_icon'
+
+import type { FileInfo } from '@/controllers/file_manager'
+
+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
+  onRenameRequest: (name: string) => void
+  onMoveRequest: (name: string) => void
+  onCopyPath: (fileName: string) => void
+  onDelete: (filePath: string) => void
+}
+
+export default function FileTable({
+  files,
+  currentPath,
+  loading,
+  sortDescriptor,
+  onSortChange,
+  selectedFiles,
+  onSelectionChange,
+  onDirectoryClick,
+  onEdit,
+  onRenameRequest,
+  onMoveRequest,
+  onCopyPath,
+  onDelete
+}: FileTableProps) {
+  return (
+    <Table
+      aria-label="文件列表"
+      sortDescriptor={sortDescriptor}
+      onSortChange={onSortChange}
+      onSelectionChange={onSelectionChange}
+      defaultSelectedKeys={[]}
+      selectedKeys={selectedFiles}
+      selectionMode="multiple"
+    >
+      <TableHeader>
+        <TableColumn key="name" allowsSorting>
+          名称
+        </TableColumn>
+        <TableColumn key="type" allowsSorting>
+          类型
+        </TableColumn>
+        <TableColumn key="size" allowsSorting>
+          大小
+        </TableColumn>
+        <TableColumn key="mtime" allowsSorting>
+          修改时间
+        </TableColumn>
+        <TableColumn key="actions">操作</TableColumn>
+      </TableHeader>
+      <TableBody
+        isLoading={loading}
+        loadingContent={
+          <div className="flex justify-center items-center h-full">
+            <Spinner />
+          </div>
+        }
+        items={files}
+      >
+        {(file: FileInfo) => (
+          <TableRow key={file.name}>
+            <TableCell>
+              <Button
+                variant="light"
+                onPress={() =>
+                  file.isDirectory
+                    ? onDirectoryClick(file.name)
+                    : onEdit(path.join(currentPath, file.name))
+                }
+                className="text-left justify-start"
+                startContent={
+                  <FileIcon name={file.name} isDirectory={file.isDirectory} />
+                }
+              >
+                {file.name}
+              </Button>
+            </TableCell>
+            <TableCell>{file.isDirectory ? '目录' : '文件'}</TableCell>
+            <TableCell>
+              {isNaN(file.size) || file.isDirectory ? '-' : `${file.size} 字节`}
+            </TableCell>
+            <TableCell>{new Date(file.mtime).toLocaleString()}</TableCell>
+            <TableCell>
+              <ButtonGroup size="sm">
+                <Tooltip content="重命名">
+                  <Button
+                    isIconOnly
+                    color="danger"
+                    variant="flat"
+                    onPress={() => onRenameRequest(file.name)}
+                  >
+                    <BiRename />
+                  </Button>
+                </Tooltip>
+                <Tooltip content="移动">
+                  <Button
+                    isIconOnly
+                    color="danger"
+                    variant="flat"
+                    onPress={() => onMoveRequest(file.name)}
+                  >
+                    <FiMove />
+                  </Button>
+                </Tooltip>
+                <Tooltip content="复制路径">
+                  <Button
+                    isIconOnly
+                    color="danger"
+                    variant="flat"
+                    onPress={() => onCopyPath(file.name)}
+                  >
+                    <FiCopy />
+                  </Button>
+                </Tooltip>
+                <Tooltip content="删除">
+                  <Button
+                    isIconOnly
+                    color="danger"
+                    variant="flat"
+                    onPress={() => onDelete(path.join(currentPath, file.name))}
+                  >
+                    <FiTrash2 />
+                  </Button>
+                </Tooltip>
+              </ButtonGroup>
+            </TableCell>
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  )
+}
--- a/napcat.webui/src/components/file_manage/move_modal.tsx
+++ 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<string[]>([])
+  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 (
+    <div className="ml-4">
+      <Button
+        onPress={handleClick}
+        className="py-1 px-2 text-left justify-start min-w-0 min-h-0 h-auto text-sm rounded-md"
+        size="sm"
+        color="danger"
+        variant={variant}
+        startContent={
+          <div
+            className={clsx(
+              'rounded-md',
+              isSeleted ? 'bg-danger-600' : 'bg-danger-50'
+            )}
+          >
+            {expanded ? <IoRemove /> : <IoAdd />}
+          </div>
+        }
+      >
+        {getDisplayName()}
+      </Button>
+      {expanded && (
+        <div>
+          {loading ? (
+            <div className="flex py-1 px-8">
+              <Spinner size="sm" color="danger" />
+            </div>
+          ) : (
+            dirs.map((dirName) => {
+              const childPath =
+                basePath === '/' && /^[A-Z]:$/i.test(dirName)
+                  ? dirName
+                  : path.join(basePath, dirName)
+              return (
+                <DirectoryTree
+                  key={childPath}
+                  basePath={childPath}
+                  onSelect={onSelect}
+                  selectedPath={selectedPath}
+                />
+              )
+            })
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default function MoveModal({
+  isOpen,
+  moveTargetPath,
+  selectionInfo,
+  onClose,
+  onMove,
+  onSelect
+}: MoveModalProps) {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalContent>
+        <ModalHeader>选择目标目录</ModalHeader>
+        <ModalBody>
+          <div className="rounded-md p-2 border border-default-300 overflow-auto max-h-60">
+            <DirectoryTree
+              basePath="/"
+              onSelect={onSelect}
+              selectedPath={moveTargetPath}
+            />
+          </div>
+          <p className="text-sm text-default-500 mt-2">
+            当前选择：{moveTargetPath || '未选择'}
+          </p>
+          <p className="text-sm text-default-500">移动项：{selectionInfo}</p>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="danger" variant="flat" onPress={onClose}>
+            取消
+          </Button>
+          <Button color="danger" onPress={onMove}>
+            确定
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}
--- a/napcat.webui/src/components/file_manage/rename_modal.tsx
+++ b/napcat.webui/src/components/file_manage/rename_modal.tsx
@@ -0,0 +1,44 @@
+import { Button } from '@heroui/button'
+import { Input } from '@heroui/input'
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader
+} from '@heroui/modal'
+
+interface RenameModalProps {
+  isOpen: boolean
+  newFileName: string
+  onNameChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onClose: () => void
+  onRename: () => void
+}
+
+export default function RenameModal({
+  isOpen,
+  newFileName,
+  onNameChange,
+  onClose,
+  onRename
+}: RenameModalProps) {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalContent>
+        <ModalHeader>重命名</ModalHeader>
+        <ModalBody>
+          <Input label="新名称" value={newFileName} onChange={onNameChange} />
+        </ModalBody>
+        <ModalFooter>
+          <Button color="danger" variant="flat" onPress={onClose}>
+            取消
+          </Button>
+          <Button color="danger" onPress={onRename}>
+            确定
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}
--- a/napcat.webui/src/components/icons.tsx
+++ b/napcat.webui/src/components/icons.tsx
@@ -1152,7 +1152,7 @@ export const WebUIIcon = (props: IconSvgProps) => (
            begin="0ms"
          ></animate>
          <animate
-            attributeName="fill-opacity"
+            attributeName="fillOpacity"
            to="1"
            dur="800ms"
            calcMode="linear"
@@ -1197,7 +1197,7 @@ export const WebUIIcon = (props: IconSvgProps) => (
            begin="800ms"
          ></animate>
          <animate
-            attributeName="fill-opacity"
+            attributeName="fillOpacity"
            to="1"
            dur="800ms"
            calcMode="linear"
@@ -1247,7 +1247,7 @@ export const WebUIIcon = (props: IconSvgProps) => (
            begin="1600ms"
          ></animate>
          <animate
-            attributeName="fill-opacity"
+            attributeName="fillOpacity"
            to="1"
            dur="800ms"
            calcMode="linear"
@@ -1297,7 +1297,7 @@ export const WebUIIcon = (props: IconSvgProps) => (
            begin="2400ms"
          ></animate>
          <animate
-            attributeName="fill-opacity"
+            attributeName="fillOpacity"
            to="1"
            dur="800ms"
            calcMode="linear"
@@ -1344,7 +1344,7 @@ export const WebUIIcon = (props: IconSvgProps) => (
            begin="3200ms"
          ></animate>
          <animate
-            attributeName="fill-opacity"
+            attributeName="fillOpacity"
            to="1"
            dur="800ms"
            calcMode="linear"
@@ -1399,7 +1399,7 @@ export const BietiaopIcon = (props: IconSvgProps) => (
            begin="0ms"
          ></animate>
          <animate
-            attributeName="fill-opacity"
+            attributeName="fillOpacity"
            to="1"
            dur="800ms"
            calcMode="linear"
@@ -1446,7 +1446,7 @@ export const BietiaopIcon = (props: IconSvgProps) => (
            begin="600ms"
          ></animate>
          <animate
-            attributeName="fill-opacity"
+            attributeName="fillOpacity"
            to="1"
            dur="800ms"
            calcMode="linear"
@@ -1496,7 +1496,7 @@ export const BietiaopIcon = (props: IconSvgProps) => (
            begin="1200ms"
          ></animate>
          <animate
-            attributeName="fill-opacity"
+            attributeName="fillOpacity"
            to="1"
            dur="800ms"
            calcMode="linear"
@@ -1543,7 +1543,7 @@ export const BietiaopIcon = (props: IconSvgProps) => (
            begin="1800ms"
          ></animate>
          <animate
-            attributeName="fill-opacity"
+            attributeName="fillOpacity"
            to="1"
            dur="800ms"
            calcMode="linear"
@@ -1590,7 +1590,7 @@ export const BietiaopIcon = (props: IconSvgProps) => (
            begin="2400ms"
          ></animate>
          <animate
-            attributeName="fill-opacity"
+            attributeName="fillOpacity"
            to="1"
            dur="800ms"
            calcMode="linear"
@@ -1637,7 +1637,7 @@ export const BietiaopIcon = (props: IconSvgProps) => (
            begin="3000ms"
          ></animate>
          <animate
-            attributeName="fill-opacity"
+            attributeName="fillOpacity"
            to="1"
            dur="800ms"
            calcMode="linear"
@@ -1684,7 +1684,7 @@ export const BietiaopIcon = (props: IconSvgProps) => (
            begin="3600ms"
          ></animate>
          <animate
-            attributeName="fill-opacity"
+            attributeName="fillOpacity"
            to="1"
            dur="800ms"
            calcMode="linear"
@@ -1731,7 +1731,7 @@ export const BietiaopIcon = (props: IconSvgProps) => (
            begin="4200ms"
          ></animate>
          <animate
-            attributeName="fill-opacity"
+            attributeName="fillOpacity"
            to="1"
            dur="800ms"
            calcMode="linear"
@@ -1744,3 +1744,224 @@ export const BietiaopIcon = (props: IconSvgProps) => (
    </svg>
  </>
 )
+
+export const FileIcon = (props: IconSvgProps) => (
+  <svg
+    version="1.1"
+    id="_x36_"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 512 512"
+    xmlSpace="preserve"
+    {...props}
+  >
+    <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+    <g
+      id="SVGRepo_tracerCarrier"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    ></g>
+    <g id="SVGRepo_iconCarrier">
+      <g>
+        <path
+          style={{ fill: '#D4B476' }}
+          d="M441.853,393.794H70.147C31.566,393.794,0,362.228,0,323.647V106.969 c0-38.581,31.566-70.147,70.147-70.147h371.706c38.581,0,70.147,31.566,70.147,70.147v216.678 C512,362.228,480.434,393.794,441.853,393.794z"
+        ></path>
+        <path
+          style={{ fill: '#D4B476' }}
+          d="M199.884,249.574H70.147C31.566,249.574,0,218.008,0,179.427V70.147C0,31.566,31.566,0,70.147,0 h129.737c38.581,0,70.147,31.566,70.147,70.147v109.28C270.031,218.008,238.465,249.574,199.884,249.574z"
+        ></path>
+        <polygon
+          style={{ fill: '#F0EFEF' }}
+          points="485.439,329.388 87.357,347.774 78.653,130.095 476.734,111.709 "
+        ></polygon>
+        <defs>
+          <filter
+            id="Adobe_OpacityMaskFilter"
+            filterUnits="userSpaceOnUse"
+            x="34.381"
+            y="60.216"
+            width="416.68"
+            height="259.557"
+          >
+            <feFlood
+              style={{
+                floodColor: 'white',
+                floodOpacity: 1
+              }}
+              result="back"
+            ></feFlood>
+            <feBlend in="SourceGraphic" in2="back" mode="normal"></feBlend>
+          </filter>
+        </defs>
+        <mask
+          maskUnits="userSpaceOnUse"
+          x="34.381"
+          y="60.216"
+          width="416.68"
+          height="259.557"
+          id="SVGID_1_"
+        >
+          <g style={{ filter: 'url(#Adobe_OpacityMaskFilter)' }}>
+            <defs>
+              <filter
+                id="Adobe_OpacityMaskFilter_1_"
+                filterUnits="userSpaceOnUse"
+                x="34.381"
+                y="60.216"
+                width="416.68"
+                height="259.557"
+              >
+                <feFlood
+                  style={{ floodColor: 'white', floodOpacity: 1 }}
+                  result="back"
+                ></feFlood>
+                <feBlend in="SourceGraphic" in2="back" mode="normal"></feBlend>
+              </filter>
+            </defs>
+            <mask
+              maskUnits="userSpaceOnUse"
+              x="34.381"
+              y="60.216"
+              width="416.68"
+              height="259.557"
+              id="SVGID_1_"
+            >
+              <g style={{ filter: 'url(#Adobe_OpacityMaskFilter_1_)' }}> </g>
+            </mask>
+            <linearGradient
+              id="SVGID_2_"
+              gradientUnits="userSpaceOnUse"
+              x1="34.3814"
+              y1="189.9944"
+              x2="451.061"
+              y2="189.9944"
+            >
+              <stop offset="0.57" style={{ stopColor: '#F6F6F6' }}></stop>
+              <stop offset="0.6039" style={{ stopColor: '#F6F6F6' }}></stop>
+            </linearGradient>
+            <polygon
+              style={{ mask: 'url(#SVGID_1_)', fill: 'url(#SVGID_2_)' }}
+              points="451.061,277.073 54.598,319.773 34.381,102.916 430.845,60.216 "
+            ></polygon>
+          </g>
+        </mask>
+        <linearGradient
+          id="SVGID_3_"
+          gradientUnits="userSpaceOnUse"
+          x1="34.3814"
+          y1="189.9944"
+          x2="451.061"
+          y2="189.9944"
+        >
+          <stop offset="0.57" style={{ stopColor: '#FFFFFF' }}></stop>
+          <stop offset="0.6039" style={{ stopColor: '#F0F0F0' }}></stop>
+        </linearGradient>
+        <polygon
+          style={{ fill: 'url(#SVGID_3_)' }}
+          points="451.061,277.073 54.598,319.773 34.381,102.916 430.845,60.216 "
+        ></polygon>
+        <path
+          style={{ fill: '#69A092' }}
+          d="M441.853,417.32H70.147C31.566,417.32,0,385.754,0,347.173V168.515h512v178.658 C512,385.754,480.434,417.32,441.853,417.32z"
+        ></path>
+        <path
+          style={{ fill: '#D4B476' }}
+          d="M441.853,429.594H70.147C31.566,429.594,0,398.028,0,359.447V189.995h512v169.453 C512,398.028,480.434,429.594,441.853,429.594z"
+        ></path>
+        <g>
+          <g>
+            <path
+              style={{ fill: '#CBBC89' }}
+              d="M41.051,330.321h28.918h7.581c0.686,0,1.357,0,2.012,0c0.655,0,1.171,0.126,1.545,0.375 c0.499,0.312,0.795,0.764,0.889,1.357c0.094,0.594,0.141,1.296,0.141,2.106c0,0.312,0.014,0.608,0.047,0.888 c0.031,0.281-0.016,0.547-0.14,0.796c-0.25,0.998-0.796,1.543-1.638,1.638c-0.843,0.094-1.888,0.14-3.136,0.14h-9.733H53.778 c-0.998,0-2.058-0.015-3.182-0.047c-1.122-0.03-1.965,0.173-2.526,0.608c-0.563,0.375-0.858,1.03-0.89,1.965 c-0.032,0.937-0.047,1.873-0.047,2.808v9.265c0,0.5-0.015,1.123-0.046,1.872c-0.033,0.749,0.014,1.373,0.139,1.871v0.748 c0.125,0.375,0.235,0.735,0.328,1.077c0.093,0.344,0.295,0.608,0.608,0.796c0.562,0.374,1.436,0.547,2.621,0.514 c1.184-0.03,2.214-0.047,3.088-0.047h16.845c0.561,0,1.171-0.014,1.825-0.046c0.655-0.031,1.31-0.031,1.965,0 c0.655,0.032,1.248,0.109,1.779,0.234c0.529,0.126,0.889,0.344,1.076,0.655c0.311,0.375,0.467,0.843,0.467,1.404 c0,0.56,0,1.186,0,1.871c0,0.375,0,0.719,0,1.03c0,0.313-0.062,0.594-0.186,0.842c-0.25,0.625-0.595,0.969-1.03,1.03 c-0.25,0.125-0.485,0.186-0.702,0.186c-0.219,0-0.483,0.033-0.796,0.094c-0.25,0.063-0.514,0.079-0.796,0.047 c-0.281-0.03-0.546-0.047-0.794-0.047h-3.277H54.433c-0.999,0-2.168-0.014-3.51-0.047c-1.342-0.03-2.292,0.172-2.853,0.609 c-0.314,0.25-0.547,0.64-0.702,1.169c-0.156,0.531-0.25,1.14-0.281,1.825c-0.033,0.687-0.033,1.389,0,2.106 c0.03,0.717,0.046,1.357,0.046,1.918v16.096c0,1.062,0.032,2.217,0.094,3.463c0.062,1.249-0.156,2.185-0.655,2.807 c-0.186,0.25-0.469,0.391-0.842,0.422c-0.374,0.032-0.749,0.109-1.123,0.234h-1.779c-0.875,0-1.684-0.03-2.433-0.093 c-0.749-0.062-1.279-0.375-1.59-0.937c-0.25-0.374-0.375-0.888-0.375-1.543c0-0.656,0-1.326,0-2.013v-7.488v-39.119v-10.107 c0-0.686-0.016-1.45-0.047-2.292c-0.032-0.842,0.107-1.512,0.422-2.012c0.249-0.374,0.715-0.685,1.404-0.935 c0.124-0.062,0.264-0.077,0.42-0.047C40.785,330.4,40.925,330.383,41.051,330.321z"
+            ></path>
+            <path
+              style={{ fill: '#CBBC89' }}
+              d="M96.895,330.508c0.436,0,0.935-0.014,1.496-0.046c0.563-0.032,1.108-0.032,1.639,0 c0.529,0.032,1.013,0.109,1.45,0.234c0.437,0.125,0.749,0.312,0.937,0.561c0.374,0.438,0.576,1.046,0.608,1.825 c0.03,0.78,0.047,1.576,0.047,2.386v9.079v36.124v10.949c0,0.811,0,1.669,0,2.574c0,0.905-0.156,1.606-0.468,2.105 c-0.25,0.314-0.547,0.5-0.889,0.563c-0.344,0.062-0.765,0.156-1.264,0.28h-1.777c-0.874,0-1.684-0.034-2.433-0.094 c-0.749-0.061-1.28-0.374-1.592-0.935c-0.25-0.374-0.375-0.89-0.375-1.545c0-0.655,0-1.325,0-2.012v-7.487V345.95v-10.107 c0-0.686-0.015-1.451-0.045-2.292c-0.034-0.843,0.108-1.514,0.42-2.013c0.249-0.436,0.748-0.748,1.497-0.936 c0.125-0.061,0.25-0.077,0.375-0.047C96.645,330.587,96.769,330.571,96.895,330.508z"
+            ></path>
+            <path
+              style={{ fill: '#CBBC89' }}
+              d="M126.093,330.321c0.436,0,0.935-0.015,1.498-0.047c0.561-0.03,1.107-0.03,1.638,0 c0.529,0.032,1.012,0.109,1.451,0.234c0.436,0.125,0.748,0.313,0.936,0.562c0.374,0.5,0.56,1.155,0.56,1.965 c0,0.811,0,1.654,0,2.528v9.826v30.042v8.609c0,0.687,0,1.436,0,2.245c0,0.813,0.094,1.468,0.281,1.967 c0.188,0.436,0.529,0.811,1.03,1.122c0.313,0.125,0.717,0.203,1.217,0.235c0.499,0.032,0.998,0.046,1.498,0.046h4.772h16.845 h5.24c0.436,0,0.89-0.014,1.359-0.046c0.467-0.032,0.888,0.016,1.263,0.139c0.81,0.25,1.34,0.594,1.591,1.03 c0.062,0.188,0.124,0.5,0.188,0.937c0.061,0.436,0.107,0.889,0.139,1.357c0.03,0.467,0.015,0.935-0.047,1.402 c-0.062,0.469-0.126,0.829-0.187,1.077c-0.126,0.437-0.406,0.782-0.843,1.029c-0.313,0.25-0.765,0.375-1.357,0.375 c-0.593,0-1.169,0-1.731,0h-6.177H133.58h-6.083c-0.874,0-1.623-0.047-2.246-0.139c-0.624-0.094-1.092-0.39-1.404-0.89 c-0.25-0.374-0.373-0.857-0.373-1.451c0-0.591,0-1.168,0-1.729v-6.74v-25.549v-20.308v-5.802c0-0.561,0.014-1.122,0.045-1.684 c0.032-0.561,0.141-0.998,0.328-1.31c0.249-0.374,0.717-0.685,1.404-0.935c0.124-0.062,0.265-0.077,0.422-0.047 C125.827,330.4,125.968,330.383,126.093,330.321z"
+            ></path>
+            <path
+              style={{ fill: '#CBBC89' }}
+              d="M187.883,330.321h30.602h8.049c0.686,0,1.372-0.015,2.059-0.047 c0.685-0.03,1.248,0.109,1.684,0.422c0.188,0.125,0.343,0.281,0.468,0.467c0.124,0.188,0.249,0.375,0.374,0.563 c0.125,0.436,0.187,1.138,0.187,2.105c0,0.967-0.062,1.701-0.187,2.199c-0.25,0.874-0.78,1.357-1.592,1.451 c-0.811,0.094-1.777,0.14-2.9,0.14h-9.359h-15.722c-0.998,0-2.169-0.015-3.51-0.047c-1.343-0.03-2.325,0.139-2.949,0.514 c-0.624,0.374-0.951,1.03-0.982,1.966c-0.032,0.936-0.048,1.904-0.048,2.901v9.546c0,0.688-0.015,1.498-0.045,2.433 c-0.034,0.937,0.014,1.686,0.139,2.246c0.188,0.749,0.562,1.249,1.123,1.498c0.249,0.125,0.686,0.25,1.31,0.373h0.935 c0.249,0.063,0.515,0.08,0.796,0.047c0.281-0.03,0.577-0.047,0.89-0.047h3.181h18.343c0.561,0,1.184-0.014,1.872-0.046 c0.685-0.031,1.387-0.031,2.104,0c0.717,0.032,1.372,0.093,1.967,0.187c0.591,0.094,1.044,0.233,1.357,0.421 c0.186,0.126,0.341,0.407,0.467,0.842c0.125,0.438,0.218,0.905,0.282,1.404c0.061,0.5,0.077,1.016,0.045,1.545 c-0.031,0.531-0.109,0.983-0.233,1.357c-0.126,0.561-0.406,0.967-0.842,1.217c-0.127,0.126-0.297,0.203-0.515,0.235 c-0.22,0.032-0.422,0.079-0.608,0.139h-0.563c-0.312,0.063-0.623,0.079-0.935,0.047c-0.313-0.03-0.624-0.047-0.935-0.047h-3.463 h-19.747c-0.747,0-1.482-0.014-2.199-0.047c-0.719-0.03-1.39,0-2.012,0.094c-0.624,0.094-1.171,0.267-1.639,0.515 c-0.467,0.25-0.794,0.687-0.982,1.31c-0.126,0.375-0.173,0.811-0.139,1.31c0.03,0.5,0.045,0.999,0.045,1.498v5.239v8.892 c0,0.873,0.032,1.669,0.094,2.386c0.062,0.718,0.312,1.233,0.749,1.544c0.435,0.313,0.935,0.483,1.497,0.515 c0.561,0.032,1.185,0.046,1.871,0.046h5.99h17.314h5.334c0.499,0,0.998-0.014,1.497-0.046c0.498-0.032,0.936,0.016,1.31,0.139 c0.749,0.25,1.248,0.594,1.498,1.03c0.123,0.188,0.217,0.5,0.281,0.937c0.061,0.436,0.108,0.889,0.14,1.357 c0.03,0.467,0.015,0.935-0.047,1.402c-0.062,0.469-0.126,0.829-0.187,1.077c-0.25,0.5-0.531,0.842-0.842,1.029 c-0.375,0.25-0.858,0.375-1.45,0.375c-0.594,0-1.171,0-1.731,0h-6.552h-24.894h-6.551c-0.874,0-1.623-0.047-2.245-0.139 c-0.624-0.094-1.093-0.39-1.404-0.89c-0.25-0.374-0.374-0.857-0.374-1.451c0-0.591,0-1.168,0-1.729v-6.551v-25.082v-20.964 v-5.802c0-0.561,0-1.122,0-1.684c0-0.561,0.124-0.998,0.374-1.31c0.249-0.435,0.716-0.749,1.404-0.935 c0.125-0.062,0.248-0.077,0.375-0.047C187.632,330.4,187.756,330.383,187.883,330.321z"
+            ></path>
+          </g>
+          <g>
+            <path
+              style={{ fill: '#98806E' }}
+              d="M41.051,330.321h28.918h7.581c0.686,0,1.357,0,2.012,0c0.655,0,1.171,0.126,1.545,0.375 c0.499,0.312,0.795,0.764,0.889,1.357c0.094,0.594,0.141,1.296,0.141,2.106c0,0.312,0.014,0.608,0.047,0.888 c0.031,0.281-0.016,0.547-0.14,0.796c-0.25,0.998-0.796,1.543-1.638,1.638c-0.843,0.094-1.888,0.14-3.136,0.14h-9.733H53.778 c-0.998,0-2.058-0.015-3.182-0.047c-1.122-0.03-1.965,0.173-2.526,0.608c-0.563,0.375-0.858,1.03-0.89,1.965 c-0.032,0.937-0.047,1.873-0.047,2.808v9.265c0,0.5-0.015,1.123-0.046,1.872c-0.033,0.749,0.014,1.373,0.139,1.871v0.748 c0.125,0.375,0.235,0.735,0.328,1.077c0.093,0.344,0.295,0.608,0.608,0.796c0.562,0.374,1.436,0.547,2.621,0.514 c1.184-0.03,2.214-0.047,3.088-0.047h16.845c0.561,0,1.171-0.014,1.825-0.046c0.655-0.031,1.31-0.031,1.965,0 c0.655,0.032,1.248,0.109,1.779,0.234c0.529,0.126,0.889,0.344,1.076,0.655c0.311,0.375,0.467,0.843,0.467,1.404 c0,0.56,0,1.186,0,1.871c0,0.375,0,0.719,0,1.03c0,0.313-0.062,0.594-0.186,0.842c-0.25,0.625-0.595,0.969-1.03,1.03 c-0.25,0.125-0.485,0.186-0.702,0.186c-0.219,0-0.483,0.033-0.796,0.094c-0.25,0.063-0.514,0.079-0.796,0.047 c-0.281-0.03-0.546-0.047-0.794-0.047h-3.277H54.433c-0.999,0-2.168-0.014-3.51-0.047c-1.342-0.03-2.292,0.172-2.853,0.609 c-0.314,0.25-0.547,0.64-0.702,1.169c-0.156,0.531-0.25,1.14-0.281,1.825c-0.033,0.687-0.033,1.389,0,2.106 c0.03,0.717,0.046,1.357,0.046,1.918v16.096c0,1.062,0.032,2.217,0.094,3.463c0.062,1.249-0.156,2.185-0.655,2.807 c-0.186,0.25-0.469,0.391-0.842,0.422c-0.374,0.032-0.749,0.109-1.123,0.234h-1.779c-0.875,0-1.684-0.03-2.433-0.093 c-0.749-0.062-1.279-0.375-1.59-0.937c-0.25-0.374-0.375-0.888-0.375-1.543c0-0.656,0-1.326,0-2.013v-7.488v-39.119v-10.107 c0-0.686-0.016-1.45-0.047-2.292c-0.032-0.842,0.107-1.512,0.422-2.012c0.249-0.374,0.715-0.685,1.404-0.935 c0.124-0.062,0.264-0.077,0.42-0.047C40.785,330.4,40.925,330.383,41.051,330.321z"
+            ></path>
+            <path
+              style={{ fill: '#98806E' }}
+              d="M96.895,330.508c0.436,0,0.935-0.014,1.496-0.046c0.563-0.032,1.108-0.032,1.639,0 c0.529,0.032,1.013,0.109,1.45,0.234c0.437,0.125,0.749,0.312,0.937,0.561c0.374,0.438,0.576,1.046,0.608,1.825 c0.03,0.78,0.047,1.576,0.047,2.386v9.079v36.124v10.949c0,0.811,0,1.669,0,2.574c0,0.905-0.156,1.606-0.468,2.105 c-0.25,0.314-0.547,0.5-0.889,0.563c-0.344,0.062-0.765,0.156-1.264,0.28h-1.777c-0.874,0-1.684-0.034-2.433-0.094 c-0.749-0.061-1.28-0.374-1.592-0.935c-0.25-0.374-0.375-0.89-0.375-1.545c0-0.655,0-1.325,0-2.012v-7.487V345.95v-10.107 c0-0.686-0.015-1.451-0.045-2.292c-0.034-0.843,0.108-1.514,0.42-2.013c0.249-0.436,0.748-0.748,1.497-0.936 c0.125-0.061,0.25-0.077,0.375-0.047C96.645,330.587,96.769,330.571,96.895,330.508z"
+            ></path>
+            <path
+              style={{ fill: '#98806E' }}
+              d="M126.093,330.321c0.436,0,0.935-0.015,1.498-0.047c0.561-0.03,1.107-0.03,1.638,0 c0.529,0.032,1.012,0.109,1.451,0.234c0.436,0.125,0.748,0.313,0.936,0.562c0.374,0.5,0.56,1.155,0.56,1.965 c0,0.811,0,1.654,0,2.528v9.826v30.042v8.609c0,0.687,0,1.436,0,2.245c0,0.813,0.094,1.468,0.281,1.967 c0.188,0.436,0.529,0.811,1.03,1.122c0.313,0.125,0.717,0.203,1.217,0.235c0.499,0.032,0.998,0.046,1.498,0.046h4.772h16.845 h5.24c0.436,0,0.89-0.014,1.359-0.046c0.467-0.032,0.888,0.016,1.263,0.139c0.81,0.25,1.34,0.594,1.591,1.03 c0.062,0.188,0.124,0.5,0.188,0.937c0.061,0.436,0.107,0.889,0.139,1.357c0.03,0.467,0.015,0.935-0.047,1.402 c-0.062,0.469-0.126,0.829-0.187,1.077c-0.126,0.437-0.406,0.782-0.843,1.029c-0.313,0.25-0.765,0.375-1.357,0.375 c-0.593,0-1.169,0-1.731,0h-6.177H133.58h-6.083c-0.874,0-1.623-0.047-2.246-0.139c-0.624-0.094-1.092-0.39-1.404-0.89 c-0.25-0.374-0.373-0.857-0.373-1.451c0-0.591,0-1.168,0-1.729v-6.74v-25.549v-20.308v-5.802c0-0.561,0.014-1.122,0.045-1.684 c0.032-0.561,0.141-0.998,0.328-1.31c0.249-0.374,0.717-0.685,1.404-0.935c0.124-0.062,0.265-0.077,0.422-0.047 C125.827,330.4,125.968,330.383,126.093,330.321z"
+            ></path>
+            <path
+              style={{ fill: '#98806E' }}
+              d="M187.883,330.321h30.602h8.049c0.686,0,1.372-0.015,2.059-0.047 c0.685-0.03,1.248,0.109,1.684,0.422c0.188,0.125,0.343,0.281,0.468,0.467c0.124,0.188,0.249,0.375,0.374,0.563 c0.125,0.436,0.187,1.138,0.187,2.105c0,0.967-0.062,1.701-0.187,2.199c-0.25,0.874-0.78,1.357-1.592,1.451 c-0.811,0.094-1.777,0.14-2.9,0.14h-9.359h-15.722c-0.998,0-2.169-0.015-3.51-0.047c-1.343-0.03-2.325,0.139-2.949,0.514 c-0.624,0.374-0.951,1.03-0.982,1.966c-0.032,0.936-0.048,1.904-0.048,2.901v9.546c0,0.688-0.015,1.498-0.045,2.433 c-0.034,0.937,0.014,1.686,0.139,2.246c0.188,0.749,0.562,1.249,1.123,1.498c0.249,0.125,0.686,0.25,1.31,0.373h0.935 c0.249,0.063,0.515,0.08,0.796,0.047c0.281-0.03,0.577-0.047,0.89-0.047h3.181h18.343c0.561,0,1.184-0.014,1.872-0.046 c0.685-0.031,1.387-0.031,2.104,0c0.717,0.032,1.372,0.093,1.967,0.187c0.591,0.094,1.044,0.233,1.357,0.421 c0.186,0.126,0.341,0.407,0.467,0.842c0.125,0.438,0.218,0.905,0.282,1.404c0.061,0.5,0.077,1.016,0.045,1.545 c-0.031,0.531-0.109,0.983-0.233,1.357c-0.126,0.561-0.406,0.967-0.842,1.217c-0.127,0.126-0.297,0.203-0.515,0.235 c-0.22,0.032-0.422,0.079-0.608,0.139h-0.563c-0.312,0.063-0.623,0.079-0.935,0.047c-0.313-0.03-0.624-0.047-0.935-0.047h-3.463 h-19.747c-0.747,0-1.482-0.014-2.199-0.047c-0.719-0.03-1.39,0-2.012,0.094c-0.624,0.094-1.171,0.267-1.639,0.515 c-0.467,0.25-0.794,0.687-0.982,1.31c-0.126,0.375-0.173,0.811-0.139,1.31c0.03,0.5,0.045,0.999,0.045,1.498v5.239v8.892 c0,0.873,0.032,1.669,0.094,2.386c0.062,0.718,0.312,1.233,0.749,1.544c0.435,0.313,0.935,0.483,1.497,0.515 c0.561,0.032,1.185,0.046,1.871,0.046h5.99h17.314h5.334c0.499,0,0.998-0.014,1.497-0.046c0.498-0.032,0.936,0.016,1.31,0.139 c0.749,0.25,1.248,0.594,1.498,1.03c0.123,0.188,0.217,0.5,0.281,0.937c0.061,0.436,0.108,0.889,0.14,1.357 c0.03,0.467,0.015,0.935-0.047,1.402c-0.062,0.469-0.126,0.829-0.187,1.077c-0.25,0.5-0.531,0.842-0.842,1.029 c-0.375,0.25-0.858,0.375-1.45,0.375c-0.594,0-1.171,0-1.731,0h-6.552h-24.894h-6.551c-0.874,0-1.623-0.047-2.245-0.139 c-0.624-0.094-1.093-0.39-1.404-0.89c-0.25-0.374-0.374-0.857-0.374-1.451c0-0.591,0-1.168,0-1.729v-6.551v-25.082v-20.964 v-5.802c0-0.561,0-1.122,0-1.684c0-0.561,0.124-0.998,0.374-1.31c0.249-0.435,0.716-0.749,1.404-0.935 c0.125-0.062,0.248-0.077,0.375-0.047C187.632,330.4,187.756,330.383,187.883,330.321z"
+            ></path>
+          </g>
+        </g>
+        <polygon
+          style={{ fill: '#BBAF98' }}
+          points="276.167,208.741 0,302.069 0,186.053 512,186.053 512,302.069 "
+        ></polygon>
+      </g>
+    </g>
+  </svg>
+)
+
+export const LogIcon = (props: IconSvgProps) => (
+  <svg
+    viewBox="0 0 48 48"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+    <g
+      id="SVGRepo_tracerCarrier"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    ></g>
+    <g id="SVGRepo_iconCarrier">
+      <rect width="48" height="48" fill="white" fillOpacity="0.01"></rect>
+      <rect
+        x="13"
+        y="10"
+        width="28"
+        height="34"
+        fill="#2F88FF"
+        stroke="#000000"
+        strokeWidth="4"
+        strokeLinejoin="round"
+      ></rect>
+      <path
+        d="M35 10V4H8C7.44772 4 7 4.44772 7 5V38H13"
+        stroke="#000000"
+        strokeWidth="4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      ></path>
+      <path
+        d="M21 22H33"
+        stroke="white"
+        strokeWidth="4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      ></path>
+      <path
+        d="M21 30H33"
+        stroke="white"
+        strokeWidth="4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      ></path>
+    </g>
+  </svg>
+)
--- a/napcat.webui/src/components/tabs/index.tsx
+++ b/napcat.webui/src/components/tabs/index.tsx
@@ -0,0 +1,89 @@
+import clsx from 'clsx'
+import { type ReactNode, createContext, forwardRef, useContext } from 'react'
+
+export interface TabsContextValue {
+  activeKey: string
+  onChange: (key: string) => void
+}
+
+const TabsContext = createContext<TabsContextValue>({
+  activeKey: '',
+  onChange: () => {}
+})
+
+export interface TabsProps {
+  activeKey: string
+  onChange: (key: string) => void
+  children: ReactNode
+  className?: string
+}
+
+export function Tabs({ activeKey, onChange, children, className }: TabsProps) {
+  return (
+    <TabsContext.Provider value={{ activeKey, onChange }}>
+      <div className={clsx('flex flex-col gap-2', className)}>{children}</div>
+    </TabsContext.Provider>
+  )
+}
+
+export interface TabListProps {
+  children: ReactNode
+  className?: string
+}
+
+export function TabList({ children, className }: TabListProps) {
+  return (
+    <div className={clsx('flex items-center gap-1', className)}>{children}</div>
+  )
+}
+
+export interface TabProps extends React.ButtonHTMLAttributes<HTMLDivElement> {
+  value: string
+  className?: string
+  children: ReactNode
+  isSelected?: boolean
+}
+
+export const Tab = forwardRef<HTMLDivElement, TabProps>(
+  ({ className, isSelected, value, ...props }, ref) => {
+    const { onChange } = useContext(TabsContext)
+
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+      onChange(value)
+      props.onClick?.(e)
+    }
+
+    return (
+      <div
+        ref={ref}
+        role="tab"
+        aria-selected={isSelected}
+        onClick={handleClick}
+        className={clsx(
+          'px-2 py-1 flex items-center gap-1 text-sm font-medium border-b-2 transition-colors',
+          isSelected
+            ? 'border-danger text-danger'
+            : 'border-transparent hover:border-default',
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+
+Tab.displayName = 'Tab'
+
+export interface TabPanelProps {
+  value: string
+  children: ReactNode
+  className?: string
+}
+
+export function TabPanel({ value, children, className }: TabPanelProps) {
+  const { activeKey } = useContext(TabsContext)
+
+  if (value !== activeKey) return null
+
+  return <div className={clsx('flex-1', className)}>{children}</div>
+}
--- a/napcat.webui/src/components/tabs/sortable_tab.tsx
+++ b/napcat.webui/src/components/tabs/sortable_tab.tsx
@@ -0,0 +1,38 @@
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+
+import { Tab } from '@/components/tabs'
+import type { TabProps } from '@/components/tabs'
+
+interface SortableTabProps extends TabProps {
+  id: string
+}
+
+export function SortableTab({ id, ...props }: SortableTabProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 1 : 0,
+    position: 'relative' as const,
+    touchAction: 'none'
+  }
+
+  return (
+    <Tab
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      {...props}
+    />
+  )
+}
--- a/napcat.webui/src/components/terminal/terminal-instance.tsx
+++ b/napcat.webui/src/components/terminal/terminal-instance.tsx
@@ -0,0 +1,38 @@
+import { useEffect, useRef } from 'react'
+
+import TerminalManager from '@/controllers/terminal_manager'
+
+import XTerm, { XTermRef } from '../xterm'
+
+interface TerminalInstanceProps {
+  id: string
+}
+
+export function TerminalInstance({ id }: TerminalInstanceProps) {
+  const termRef = useRef<XTermRef>(null)
+
+  useEffect(() => {
+    const handleData = (data: string) => {
+      try {
+        const parsed = JSON.parse(data)
+        if (parsed.data) {
+          termRef.current?.write(parsed.data)
+        }
+      } catch (e) {
+        termRef.current?.write(data)
+      }
+    }
+
+    TerminalManager.connectTerminal(id, handleData)
+
+    return () => {
+      TerminalManager.disconnectTerminal(id, handleData)
+    }
+  }, [id])
+
+  const handleInput = (data: string) => {
+    TerminalManager.sendInput(id, data)
+  }
+
+  return <XTerm ref={termRef} onInput={handleInput} className="w-full h-full" />
+}
--- a/napcat.webui/src/components/under_construction.tsx
+++ b/napcat.webui/src/components/under_construction.tsx
@@ -0,0 +1,12 @@
+export default function UnderConstruction() {
+  return (
+    <div className="flex flex-col items-center justify-center h-full pt-4">
+      <div className="flex flex-col items-center justify-center space-y-4">
+        <div className="text-6xl font-bold text-gray-500">🚧</div>
+        <div className="text-2xl font-bold text-gray-500">
+          Under Construction
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/napcat.webui/src/components/xterm.tsx
+++ b/napcat.webui/src/components/xterm.tsx
@@ -22,132 +22,146 @@ export type XTermRef = {
  clear: () => void
 }

-const XTerm = forwardRef<XTermRef, React.HTMLAttributes<HTMLDivElement>>(
-  (props, ref) => {
-    const domRef = useRef<HTMLDivElement>(null)
-    const terminalRef = useRef<Terminal | null>(null)
-    const { className, ...rest } = props
-    const { theme } = useTheme()
-    useEffect(() => {
-      if (!domRef.current) {
-        return
-      }
-      const terminal = new Terminal({
-        allowTransparency: true,
-        fontFamily: '"Fira Code", "Harmony", "Noto Serif SC", monospace',
-        cursorInactiveStyle: 'outline',
-        drawBoldTextInBrightColors: false,
-        letterSpacing: 0,
-        lineHeight: 1.0
+export interface XTermProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onInput'> {
+  onInput?: (data: string) => void
+  onKey?: (key: string, event: KeyboardEvent) => void
+}
+
+const XTerm = forwardRef<XTermRef, XTermProps>((props, ref) => {
+  const domRef = useRef<HTMLDivElement>(null)
+  const terminalRef = useRef<Terminal | null>(null)
+  const { className, onInput, onKey, ...rest } = props
+  const { theme } = useTheme()
+  useEffect(() => {
+    if (!domRef.current) {
+      return
+    }
+    const terminal = new Terminal({
+      allowTransparency: true,
+      fontFamily: '"Fira Code", "Harmony", "Noto Serif SC", monospace',
+      cursorInactiveStyle: 'outline',
+      drawBoldTextInBrightColors: false
+    })
+    terminalRef.current = terminal
+    const fitAddon = new FitAddon()
+    terminal.loadAddon(
+      new WebLinksAddon((event, uri) => {
+        if (event.ctrlKey) {
+          window.open(uri, '_blank')
+        }
      })
-      terminalRef.current = terminal
-      const fitAddon = new FitAddon()
-      terminal.loadAddon(
-        new WebLinksAddon((event, uri) => {
-          if (event.ctrlKey) {
-            window.open(uri, '_blank')
-          }
+    )
+    terminal.loadAddon(fitAddon)
+    terminal.loadAddon(new WebglAddon())
+    terminal.open(domRef.current)
+
+    terminal.writeln(
+      gradientText(
+        'Welcome to NapCat WebUI',
+        [255, 0, 0],
+        [0, 255, 0],
+        true,
+        true,
+        true
+      )
+    )
+
+    terminal.onData((data) => {
+      if (onInput) {
+        onInput(data)
+      }
+    })
+
+    terminal.onKey((event) => {
+      if (onKey) {
+        onKey(event.key, event.domEvent)
+      }
+    })
+
+    const resizeObserver = new ResizeObserver(() => {
+      fitAddon.fit()
+    })
+
+    // 字体加载完成后重新调整终端大小
+    document.fonts.ready.then(() => {
+      fitAddon.fit()
+
+      resizeObserver.observe(domRef.current!)
+    })
+
+    return () => {
+      resizeObserver.disconnect()
+      setTimeout(() => {
+        terminal.dispose()
+      }, 0)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (terminalRef.current) {
+      terminalRef.current.options.theme = {
+        background: theme === 'dark' ? '#00000000' : '#ffffff00',
+        foreground: theme === 'dark' ? '#fff' : '#000',
+        selectionBackground:
+          theme === 'dark'
+            ? 'rgba(179, 0, 0, 0.3)'
+            : 'rgba(255, 167, 167, 0.3)',
+        cursor: theme === 'dark' ? '#fff' : '#000',
+        cursorAccent: theme === 'dark' ? '#000' : '#fff',
+        black: theme === 'dark' ? '#fff' : '#000'
+      }
+      terminalRef.current.options.fontWeight =
+        theme === 'dark' ? 'normal' : '600'
+      terminalRef.current.options.fontWeightBold =
+        theme === 'dark' ? 'bold' : '900'
+    }
+  }, [theme])
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      write: (...args) => {
+        return terminalRef.current?.write(...args)
+      },
+      writeAsync: async (data) => {
+        return new Promise((resolve) => {
+          terminalRef.current?.write(data, resolve)
        })
-      )
-      terminal.loadAddon(fitAddon)
-      terminal.loadAddon(new WebglAddon())
-      terminal.open(domRef.current)
-
-      terminal.writeln(
-        gradientText(
-          'Welcome to NapCat WebUI',
-          [255, 0, 0],
-          [0, 255, 0],
-          true,
-          true,
-          true
-        )
-      )
-
-      const resizeObserver = new ResizeObserver(() => {
-        fitAddon.fit()
-      })
-
-      // 字体加载完成后重新调整终端大小
-      document.fonts.ready.then(() => {
-        fitAddon.fit()
-
-        resizeObserver.observe(domRef.current!)
-      })
-
-      return () => {
-        resizeObserver.disconnect()
-        setTimeout(() => {
-          terminal.dispose()
-        }, 0)
+      },
+      writeln: (...args) => {
+        return terminalRef.current?.writeln(...args)
+      },
+      writelnAsync: async (data) => {
+        return new Promise((resolve) => {
+          terminalRef.current?.writeln(data, resolve)
+        })
+      },
+      clear: () => {
+        terminalRef.current?.clear()
      }
-    }, [])
+    }),
+    []
+  )

-    useEffect(() => {
-      if (terminalRef.current) {
-        terminalRef.current.options.theme = {
-          background: theme === 'dark' ? '#00000000' : '#ffffff00',
-          foreground: theme === 'dark' ? '#fff' : '#000',
-          selectionBackground:
-            theme === 'dark'
-              ? 'rgba(179, 0, 0, 0.3)'
-              : 'rgba(255, 167, 167, 0.3)',
-          cursor: theme === 'dark' ? '#fff' : '#000',
-          cursorAccent: theme === 'dark' ? '#000' : '#fff',
-          black: theme === 'dark' ? '#fff' : '#000'
-        }
-        terminalRef.current.options.fontWeight =
-          theme === 'dark' ? 'normal' : '600'
-        terminalRef.current.options.fontWeightBold =
-          theme === 'dark' ? 'bold' : '900'
-      }
-    }, [theme])
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        write: (...args) => {
-          return terminalRef.current?.write(...args)
-        },
-        writeAsync: async (data) => {
-          return new Promise((resolve) => {
-            terminalRef.current?.write(data, resolve)
-          })
-        },
-        writeln: (...args) => {
-          return terminalRef.current?.writeln(...args)
-        },
-        writelnAsync: async (data) => {
-          return new Promise((resolve) => {
-            terminalRef.current?.writeln(data, resolve)
-          })
-        },
-        clear: () => {
-          terminalRef.current?.clear()
-        }
-      }),
-      []
-    )
-
-    return (
+  return (
+    <div
+      className={clsx(
+        'p-2 rounded-md shadow-sm border border-default-200 w-full h-full overflow-hidden bg-opacity-50 backdrop-blur-sm',
+        theme === 'dark' ? 'bg-black' : 'bg-white',
+        className
+      )}
+      {...rest}
+    >
      <div
-        className={clsx(
-          'p-2 rounded-md shadow-sm border border-default-200 w-full h-full overflow-hidden bg-opacity-50 backdrop-blur-sm',
-          theme === 'dark' ? 'bg-black' : 'bg-white',
-          className
-        )}
-        {...rest}
-      >
-        <div
-          style={{
-            width: '100%',
-            height: '100%'
-          }}
-          ref={domRef}
-        ></div>
-      </div>
-    )
-  }
-)
+        style={{
+          width: '100%',
+          height: '100%'
+        }}
+        ref={domRef}
+      ></div>
+    </div>
+  )
+})

 export default XTerm
--- a/napcat.webui/src/config/site.tsx
+++ b/napcat.webui/src/config/site.tsx
@@ -1,6 +1,8 @@
 import {
  BugIcon2,
+  FileIcon,
  InfoIcon,
+  LogIcon,
  RouteIcon,
  SettingsIcon,
  SignalTowerIcon,
@@ -49,10 +51,10 @@ export const siteConfig = {
      href: '/config'
    },
    {
-      label: '系统日志',
+      label: 'NapCat日志',
      icon: (
        <div className="w-5 h-5">
-          <TerminalIcon />
+          <LogIcon />
        </div>
      ),
      href: '/logs'
@@ -75,6 +77,24 @@ export const siteConfig = {
        }
      ]
    },
+    {
+      label: '文件管理',
+      icon: (
+        <div className="w-5 h-5">
+          <FileIcon />
+        </div>
+      ),
+      href: '/file_manager'
+    },
+    {
+      label: '系统终端',
+      icon: (
+        <div className="w-5 h-5">
+          <TerminalIcon />
+        </div>
+      ),
+      href: '/terminal'
+    },
    {
      label: '关于我们',
      icon: (
--- a/napcat.webui/src/controllers/file_manager.ts
+++ b/napcat.webui/src/controllers/file_manager.ts
@@ -0,0 +1,98 @@
+import { serverRequest } from '@/utils/request'
+
+export interface FileInfo {
+  name: string
+  isDirectory: boolean
+  size: number
+  mtime: Date
+}
+
+export default class FileManager {
+  public static async listFiles(path: string = '/') {
+    const { data } = await serverRequest.get<ServerResponse<FileInfo[]>>(
+      `/File/list?path=${encodeURIComponent(path)}`
+    )
+    return data.data
+  }
+
+  // 新增：按目录获取
+  public static async listDirectories(path: string = '/') {
+    const { data } = await serverRequest.get<ServerResponse<FileInfo[]>>(
+      `/File/list?path=${encodeURIComponent(path)}&onlyDirectory=true`
+    )
+    return data.data
+  }
+
+  public static async createDirectory(path: string): Promise<boolean> {
+    const { data } = await serverRequest.post<ServerResponse<boolean>>(
+      '/File/mkdir',
+      { path }
+    )
+    return data.data
+  }
+
+  public static async delete(path: string) {
+    const { data } = await serverRequest.post<ServerResponse<boolean>>(
+      '/File/delete',
+      { path }
+    )
+    return data.data
+  }
+
+  public static async readFile(path: string) {
+    const { data } = await serverRequest.get<ServerResponse<string>>(
+      `/File/read?path=${encodeURIComponent(path)}`
+    )
+    return data.data
+  }
+
+  public static async writeFile(path: string, content: string) {
+    const { data } = await serverRequest.post<ServerResponse<boolean>>(
+      '/File/write',
+      { path, content }
+    )
+    return data.data
+  }
+
+  public static async createFile(path: string): Promise<boolean> {
+    const { data } = await serverRequest.post<ServerResponse<boolean>>(
+      '/File/create',
+      { path }
+    )
+    return data.data
+  }
+
+  public static async batchDelete(paths: string[]) {
+    const { data } = await serverRequest.post<ServerResponse<boolean>>(
+      '/File/batchDelete',
+      { paths }
+    )
+    return data.data
+  }
+
+  public static async rename(oldPath: string, newPath: string) {
+    const { data } = await serverRequest.post<ServerResponse<boolean>>(
+      '/File/rename',
+      { oldPath, newPath }
+    )
+    return data.data
+  }
+
+  public static async move(sourcePath: string, targetPath: string) {
+    const { data } = await serverRequest.post<ServerResponse<boolean>>(
+      '/File/move',
+      { sourcePath, targetPath }
+    )
+    return data.data
+  }
+
+  public static async batchMove(
+    items: { sourcePath: string; targetPath: string }[]
+  ) {
+    const { data } = await serverRequest.post<ServerResponse<boolean>>(
+      '/File/batchMove',
+      { items }
+    )
+    return data.data
+  }
+}
--- a/napcat.webui/src/controllers/terminal_manager.ts
+++ b/napcat.webui/src/controllers/terminal_manager.ts
@@ -0,0 +1,118 @@
+import { serverRequest } from '@/utils/request'
+
+type TerminalCallback = (data: string) => void
+
+interface TerminalConnection {
+  ws: WebSocket
+  callbacks: Set<TerminalCallback>
+  isConnected: boolean
+  buffer: string[] // 添加缓存数组
+}
+
+export interface TerminalSession {
+  id: string
+}
+
+export interface TerminalInfo {
+  id: string
+}
+
+class TerminalManager {
+  private connections: Map<string, TerminalConnection> = new Map()
+  private readonly MAX_BUFFER_SIZE = 1000 // 限制缓存大小
+
+  async createTerminal(cols: number, rows: number): Promise<TerminalSession> {
+    const { data } = await serverRequest.post<ServerResponse<TerminalSession>>(
+      '/Log/terminal/create',
+      { cols, rows }
+    )
+    return data.data
+  }
+
+  async closeTerminal(id: string): Promise<void> {
+    await serverRequest.post(`/Log/terminal/${id}/close`)
+  }
+
+  async getTerminalList(): Promise<TerminalInfo[]> {
+    const { data } =
+      await serverRequest.get<ServerResponse<TerminalInfo[]>>(
+        '/Log/terminal/list'
+      )
+    return data.data
+  }
+
+  connectTerminal(id: string, callback: TerminalCallback): WebSocket {
+    let conn = this.connections.get(id)
+
+    if (!conn) {
+      const url = new URL(window.location.href)
+      url.protocol = url.protocol.replace('http', 'ws')
+      url.pathname = `/api/ws/terminal`
+      url.searchParams.set('id', id)
+      const token = JSON.parse(localStorage.getItem('token') || '')
+      if (!token) {
+        throw new Error('No token found')
+      }
+      url.searchParams.set('token', token)
+      const ws = new WebSocket(url.toString())
+      conn = {
+        ws,
+        callbacks: new Set([callback]),
+        isConnected: false,
+        buffer: [] // 初始化缓存
+      }
+
+      ws.onmessage = (event) => {
+        const data = event.data
+        // 保存到缓存
+        conn?.buffer.push(data)
+        if ((conn?.buffer.length ?? 0) > this.MAX_BUFFER_SIZE) {
+          conn?.buffer.shift()
+        }
+        conn?.callbacks.forEach((cb) => cb(data))
+      }
+
+      ws.onopen = () => {
+        if (conn) conn.isConnected = true
+      }
+
+      ws.onclose = () => {
+        if (conn) conn.isConnected = false
+      }
+
+      this.connections.set(id, conn)
+    } else {
+      conn.callbacks.add(callback)
+      // 恢复历史内容
+      conn.buffer.forEach((data) => callback(data))
+    }
+
+    return conn.ws
+  }
+
+  disconnectTerminal(id: string, callback: TerminalCallback) {
+    const conn = this.connections.get(id)
+    if (!conn) return
+
+    conn.callbacks.delete(callback)
+  }
+
+  removeTerminal(id: string) {
+    const conn = this.connections.get(id)
+    if (conn?.ws.readyState === WebSocket.OPEN) {
+      conn.ws.close()
+    }
+    this.connections.delete(id)
+  }
+
+  sendInput(id: string, data: string) {
+    const conn = this.connections.get(id)
+    if (conn?.ws.readyState === WebSocket.OPEN) {
+      conn.ws.send(JSON.stringify({ type: 'input', data }))
+    }
+  }
+}
+
+const terminalManager = new TerminalManager()
+
+export default terminalManager
--- a/napcat.webui/src/controllers/webui_manager.ts
+++ b/napcat.webui/src/controllers/webui_manager.ts
@@ -9,6 +9,14 @@ export interface Log {
  message: string
 }

+export interface TerminalSession {
+  id: string
+}
+
+export interface TerminalInfo {
+  id: string
+}
+
 export default class WebUIManager {
  public static async checkWebUiLogined() {
    const { data } =
--- a/napcat.webui/src/pages/dashboard/file_manager.tsx
+++ b/napcat.webui/src/pages/dashboard/file_manager.tsx
@@ -0,0 +1,433 @@
+import { BreadcrumbItem, Breadcrumbs } from '@heroui/breadcrumbs'
+import { Button } from '@heroui/button'
+import { Input } from '@heroui/input'
+import type { Selection, SortDescriptor } from '@react-types/shared'
+import path from 'path-browserify'
+import { useEffect, useState } from 'react'
+import toast from 'react-hot-toast'
+import { FiMove, FiPlus } from 'react-icons/fi'
+import { MdRefresh } from 'react-icons/md'
+import { TbTrash } from 'react-icons/tb'
+import { TiArrowBack } from 'react-icons/ti'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+import CreateFileModal from '@/components/file_manage/create_file_modal'
+import FileEditModal from '@/components/file_manage/file_edit_modal'
+import FileTable from '@/components/file_manage/file_table'
+import MoveModal from '@/components/file_manage/move_modal'
+import RenameModal from '@/components/file_manage/rename_modal'
+
+import useDialog from '@/hooks/use-dialog'
+
+import FileManager, { FileInfo } from '@/controllers/file_manager'
+
+export default function FileManagerPage() {
+  const [files, setFiles] = useState<FileInfo[]>([])
+  const [loading, setLoading] = useState(false)
+  const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
+    column: 'name',
+    direction: 'ascending'
+  })
+  const dialog = useDialog()
+  const location = useLocation()
+  const navigate = useNavigate()
+  // 修改 currentPath 初始化逻辑，去掉可能的前导斜杠
+  let currentPath = decodeURIComponent(location.hash.slice(1) || '/')
+  if (/^\/[A-Z]:$/i.test(currentPath)) {
+    currentPath = currentPath.slice(1)
+  }
+  const [editingFile, setEditingFile] = useState<{
+    path: string
+    content: string
+  } | null>(null)
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)
+  const [newFileName, setNewFileName] = useState('')
+  const [fileType, setFileType] = useState<'file' | 'directory'>('file')
+  const [selectedFiles, setSelectedFiles] = useState<Selection>(new Set())
+  const [isRenameModalOpen, setIsRenameModalOpen] = useState(false)
+  const [isMoveModalOpen, setIsMoveModalOpen] = useState(false)
+  const [renamingFile, setRenamingFile] = useState<string>('')
+  const [moveTargetPath, setMoveTargetPath] = useState('')
+  const [jumpPath, setJumpPath] = useState('')
+
+  const sortFiles = (files: FileInfo[], descriptor: typeof sortDescriptor) => {
+    return [...files].sort((a, b) => {
+      if (a.isDirectory !== b.isDirectory) return a.isDirectory ? -1 : 1
+      const direction = descriptor.direction === 'ascending' ? 1 : -1
+      switch (descriptor.column) {
+        case 'name':
+          return direction * a.name.localeCompare(b.name)
+        case 'type': {
+          const aType = a.isDirectory ? '目录' : '文件'
+          const bType = a.isDirectory ? '目录' : '文件'
+          return direction * aType.localeCompare(bType)
+        }
+        case 'size':
+          return direction * ((a.size || 0) - (b.size || 0))
+        case 'mtime':
+          return (
+            direction *
+            (new Date(a.mtime).getTime() - new Date(b.mtime).getTime())
+          )
+        default:
+          return 0
+      }
+    })
+  }
+
+  const loadFiles = async () => {
+    setLoading(true)
+    try {
+      const fileList = await FileManager.listFiles(currentPath)
+      setFiles(sortFiles(fileList, sortDescriptor))
+    } catch (error) {
+      toast.error('加载文件列表失败')
+      setFiles([])
+    }
+    setLoading(false)
+  }
+
+  useEffect(() => {
+    loadFiles()
+  }, [currentPath])
+
+  const handleSortChange = (descriptor: typeof sortDescriptor) => {
+    setSortDescriptor(descriptor)
+    setFiles((prev) => sortFiles(prev, descriptor))
+  }
+
+  const handleDirectoryClick = (dirPath: string) => {
+    if (dirPath === '..') {
+      if (/^[A-Z]:$/i.test(currentPath)) {
+        navigate('/file_manager#/')
+        return
+      }
+      const parentPath = path.dirname(currentPath)
+      navigate(
+        `/file_manager#${encodeURIComponent(parentPath === currentPath ? '/' : parentPath)}`
+      )
+      return
+    }
+    navigate(
+      `/file_manager#${encodeURIComponent(path.join(currentPath, dirPath))}`
+    )
+  }
+
+  const handleEdit = async (filePath: string) => {
+    try {
+      const content = await FileManager.readFile(filePath)
+      setEditingFile({ path: filePath, content })
+    } catch (error) {
+      toast.error('打开文件失败')
+    }
+  }
+
+  const handleSave = async () => {
+    if (!editingFile) return
+    try {
+      await FileManager.writeFile(editingFile.path, editingFile.content)
+      toast.success('保存成功')
+      setEditingFile(null)
+      loadFiles()
+    } catch (error) {
+      toast.error('保存失败')
+    }
+  }
+
+  const handleDelete = async (filePath: string) => {
+    dialog.confirm({
+      title: '删除文件',
+      content: <div>确定要删除文件 {filePath} 吗？</div>,
+      onConfirm: async () => {
+        try {
+          await FileManager.delete(filePath)
+          toast.success('删除成功')
+          loadFiles()
+        } catch (error) {
+          toast.error('删除失败')
+        }
+      }
+    })
+  }
+
+  const handleCreate = async () => {
+    if (!newFileName) return
+    const newPath = path.join(currentPath, newFileName)
+    try {
+      if (fileType === 'directory') {
+        if (!(await FileManager.createDirectory(newPath))) {
+          toast.error('目录已存在')
+          return
+        }
+      } else {
+        if (!(await FileManager.createFile(newPath))) {
+          toast.error('文件已存在')
+          return
+        }
+      }
+      toast.success('创建成功')
+      setIsCreateModalOpen(false)
+      setNewFileName('')
+      loadFiles()
+    } catch (error) {
+      toast.error((error as Error)?.message || '创建失败')
+    }
+  }
+
+  const handleBatchDelete = async () => {
+    const selectedArray =
+      selectedFiles instanceof Set
+        ? Array.from(selectedFiles)
+        : files.map((f) => f.name)
+    if (selectedArray.length === 0) return
+    dialog.confirm({
+      title: '批量删除',
+      content: <div>确定要删除选中的 {selectedArray.length} 个项目吗？</div>,
+      onConfirm: async () => {
+        try {
+          const paths = selectedArray.map((key) =>
+            path.join(currentPath, key.toString())
+          )
+          await FileManager.batchDelete(paths)
+          toast.success('批量删除成功')
+          setSelectedFiles(new Set())
+          loadFiles()
+        } catch (error) {
+          toast.error('批量删除失败')
+        }
+      }
+    })
+  }
+
+  const handleRename = async () => {
+    if (!renamingFile || !newFileName) return
+    try {
+      await FileManager.rename(
+        path.join(currentPath, renamingFile),
+        path.join(currentPath, newFileName)
+      )
+      toast.success('重命名成功')
+      setIsRenameModalOpen(false)
+      setRenamingFile('')
+      setNewFileName('')
+      loadFiles()
+    } catch (error) {
+      toast.error('重命名失败')
+    }
+  }
+
+  const handleMove = async (sourceName: string) => {
+    if (!moveTargetPath) return
+    try {
+      await FileManager.move(
+        path.join(currentPath, sourceName),
+        path.join(moveTargetPath, sourceName)
+      )
+      toast.success('移动成功')
+      setIsMoveModalOpen(false)
+      setMoveTargetPath('')
+      loadFiles()
+    } catch (error) {
+      toast.error('移动失败')
+    }
+  }
+
+  const handleBatchMove = async () => {
+    if (!moveTargetPath) return
+    const selectedArray =
+      selectedFiles instanceof Set
+        ? Array.from(selectedFiles)
+        : files.map((f) => f.name)
+    if (selectedArray.length === 0) return
+    try {
+      const items = selectedArray.map((name) => ({
+        sourcePath: path.join(currentPath, name.toString()),
+        targetPath: path.join(moveTargetPath, name.toString())
+      }))
+      await FileManager.batchMove(items)
+      toast.success('批量移动成功')
+      setIsMoveModalOpen(false)
+      setMoveTargetPath('')
+      setSelectedFiles(new Set())
+      loadFiles()
+    } catch (error) {
+      toast.error('批量移动失败')
+    }
+  }
+
+  const handleCopyPath = (fileName: string) => {
+    navigator.clipboard.writeText(path.join(currentPath, fileName))
+    toast.success('路径已复制')
+  }
+
+  const handleMoveClick = (fileName: string) => {
+    setRenamingFile(fileName)
+    setMoveTargetPath('')
+    setIsMoveModalOpen(true)
+  }
+
+  return (
+    <div className="p-4">
+      <div className="mb-4 flex items-center gap-4 sticky top-14 z-10 bg-content1 py-1">
+        <Button
+          color="danger"
+          size="sm"
+          isIconOnly
+          variant="flat"
+          onPress={() => handleDirectoryClick('..')}
+          className="text-lg"
+        >
+          <TiArrowBack />
+        </Button>
+
+        <Button
+          color="danger"
+          size="sm"
+          isIconOnly
+          variant="flat"
+          onPress={() => setIsCreateModalOpen(true)}
+          className="text-lg"
+        >
+          <FiPlus />
+        </Button>
+
+        <Button
+          color="danger"
+          isLoading={loading}
+          size="sm"
+          isIconOnly
+          variant="flat"
+          onPress={loadFiles}
+          className="text-lg"
+        >
+          <MdRefresh />
+        </Button>
+        {((selectedFiles instanceof Set && selectedFiles.size > 0) ||
+          selectedFiles === 'all') && (
+          <>
+            <Button
+              color="danger"
+              size="sm"
+              variant="flat"
+              onPress={handleBatchDelete}
+              className="text-sm"
+              startContent={<TbTrash className="text-lg" />}
+            >
+              (
+              {selectedFiles instanceof Set ? selectedFiles.size : files.length}
+              )
+            </Button>
+            <Button
+              color="danger"
+              size="sm"
+              variant="flat"
+              onPress={() => {
+                setMoveTargetPath('')
+                setIsMoveModalOpen(true)
+              }}
+              className="text-sm"
+              startContent={<FiMove className="text-lg" />}
+            >
+              (
+              {selectedFiles instanceof Set ? selectedFiles.size : files.length}
+              )
+            </Button>
+          </>
+        )}
+        <Breadcrumbs className="flex-1 shadow-small px-2 py-2 rounded-lg">
+          {currentPath.split('/').map((part, index, parts) => (
+            <BreadcrumbItem
+              key={part}
+              isCurrent={index === parts.length - 1}
+              onPress={() => {
+                const newPath = parts.slice(0, index + 1).join('/')
+                navigate(`/file_manager#${encodeURIComponent(newPath)}`)
+              }}
+            >
+              {part}
+            </BreadcrumbItem>
+          ))}
+        </Breadcrumbs>
+        <Input
+          type="text"
+          placeholder="输入跳转路径"
+          value={jumpPath}
+          onChange={(e) => setJumpPath(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && jumpPath.trim() !== '') {
+              navigate(`/file_manager#${encodeURIComponent(jumpPath.trim())}`)
+            }
+          }}
+          className="ml-auto w-64"
+        />
+      </div>
+
+      <FileTable
+        files={files}
+        currentPath={currentPath}
+        loading={loading}
+        sortDescriptor={sortDescriptor}
+        onSortChange={handleSortChange}
+        selectedFiles={selectedFiles}
+        onSelectionChange={setSelectedFiles}
+        onDirectoryClick={handleDirectoryClick}
+        onEdit={handleEdit}
+        onRenameRequest={(name) => {
+          setRenamingFile(name)
+          setNewFileName(name)
+          setIsRenameModalOpen(true)
+        }}
+        onMoveRequest={handleMoveClick}
+        onCopyPath={handleCopyPath}
+        onDelete={handleDelete}
+      />
+
+      <FileEditModal
+        isOpen={!!editingFile}
+        file={editingFile}
+        onClose={() => setEditingFile(null)}
+        onSave={handleSave}
+        onContentChange={(newContent) =>
+          setEditingFile((prev) =>
+            prev ? { ...prev, content: newContent ?? '' } : null
+          )
+        }
+      />
+
+      <CreateFileModal
+        isOpen={isCreateModalOpen}
+        fileType={fileType}
+        newFileName={newFileName}
+        onTypeChange={setFileType}
+        onNameChange={(e) => setNewFileName(e.target.value)}
+        onClose={() => setIsCreateModalOpen(false)}
+        onCreate={handleCreate}
+      />
+
+      <RenameModal
+        isOpen={isRenameModalOpen}
+        newFileName={newFileName}
+        onNameChange={(e) => setNewFileName(e.target.value)}
+        onClose={() => setIsRenameModalOpen(false)}
+        onRename={handleRename}
+      />
+
+      <MoveModal
+        isOpen={isMoveModalOpen}
+        moveTargetPath={moveTargetPath}
+        selectionInfo={
+          selectedFiles instanceof Set && selectedFiles.size > 0
+            ? `${selectedFiles.size} 个项目`
+            : renamingFile
+        }
+        onClose={() => setIsMoveModalOpen(false)}
+        onMove={() =>
+          selectedFiles instanceof Set && selectedFiles.size > 0
+            ? handleBatchMove()
+            : handleMove(renamingFile)
+        }
+        onSelect={(dir) => setMoveTargetPath(dir)} // 替换原有 onTargetChange
+      />
+    </div>
+  )
+}
--- a/napcat.webui/src/pages/dashboard/terminal.tsx
+++ b/napcat.webui/src/pages/dashboard/terminal.tsx
@@ -0,0 +1,171 @@
+import {
+  DndContext,
+  DragEndEvent,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors
+} from '@dnd-kit/core'
+import {
+  SortableContext,
+  arrayMove,
+  horizontalListSortingStrategy
+} from '@dnd-kit/sortable'
+import { Button } from '@heroui/button'
+import { useEffect, useState } from 'react'
+import toast from 'react-hot-toast'
+import { IoAdd, IoClose } from 'react-icons/io5'
+
+import { TabList, TabPanel, Tabs } from '@/components/tabs'
+import { SortableTab } from '@/components/tabs/sortable_tab.tsx'
+import { TerminalInstance } from '@/components/terminal/terminal-instance'
+
+import terminalManager from '@/controllers/terminal_manager'
+
+interface TerminalTab {
+  id: string
+  title: string
+}
+
+export default function TerminalPage() {
+  const [tabs, setTabs] = useState<TerminalTab[]>([])
+  const [selectedTab, setSelectedTab] = useState<string>('')
+
+  useEffect(() => {
+    // 获取已存在的终端列表
+    terminalManager.getTerminalList().then((terminals) => {
+      if (terminals.length === 0) return
+
+      const newTabs = terminals.map((terminal) => ({
+        id: terminal.id,
+        title: terminal.id
+      }))
+
+      setTabs(newTabs)
+      setSelectedTab(newTabs[0].id)
+    })
+  }, [])
+
+  const createNewTerminal = async () => {
+    try {
+      const { id } = await terminalManager.createTerminal(80, 24)
+      const newTab = {
+        id,
+        title: id
+      }
+
+      setTabs((prev) => [...prev, newTab])
+      setSelectedTab(id)
+    } catch (error) {
+      console.error('Failed to create terminal:', error)
+      toast.error('创建终端失败')
+    }
+  }
+
+  const closeTerminal = async (id: string) => {
+    try {
+      await terminalManager.closeTerminal(id)
+      terminalManager.removeTerminal(id)
+      if (selectedTab === id) {
+        const previousIndex = tabs.findIndex((tab) => tab.id === id) - 1
+        if (previousIndex >= 0) {
+          setSelectedTab(tabs[previousIndex].id)
+        } else {
+          setSelectedTab(tabs[0]?.id || '')
+        }
+      }
+      setTabs((prev) => prev.filter((tab) => tab.id !== id))
+    } catch (error) {
+      toast.error('关闭终端失败')
+    }
+  }
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event
+    if (active.id !== over?.id) {
+      setTabs((items) => {
+        const oldIndex = items.findIndex((item) => item.id === active.id)
+        const newIndex = items.findIndex((item) => item.id === over?.id)
+        return arrayMove(items, oldIndex, newIndex)
+      })
+    }
+  }
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8
+      }
+    })
+  )
+
+  return (
+    <div className="flex flex-col gap-2 p-4">
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={handleDragEnd}
+      >
+        <Tabs
+          activeKey={selectedTab}
+          onChange={setSelectedTab}
+          className="h-full overflow-hidden"
+        >
+          <div className="flex items-center gap-2 flex-shrink-0 flex-grow-0">
+            <TabList className="flex-1 !overflow-x-auto w-full hide-scrollbar">
+              <SortableContext
+                items={tabs}
+                strategy={horizontalListSortingStrategy}
+              >
+                {tabs.map((tab) => (
+                  <SortableTab
+                    key={tab.id}
+                    id={tab.id}
+                    value={tab.id}
+                    isSelected={selectedTab === tab.id}
+                    className="flex gap-2 items-center flex-shrink-0"
+                  >
+                    {tab.title}
+                    <Button
+                      isIconOnly
+                      radius="full"
+                      variant="flat"
+                      size="sm"
+                      className="min-w-0 w-4 h-4 flex-shrink-0"
+                      onPress={() => closeTerminal(tab.id)}
+                      color={selectedTab === tab.id ? 'danger' : 'default'}
+                    >
+                      <IoClose />
+                    </Button>
+                  </SortableTab>
+                ))}
+              </SortableContext>
+            </TabList>
+            <Button
+              isIconOnly
+              color="danger"
+              size="sm"
+              variant="flat"
+              onPress={createNewTerminal}
+              startContent={<IoAdd />}
+              className="text-xl"
+            />
+          </div>
+          <div className="flex-grow overflow-hidden">
+            {tabs.length === 0 && (
+              <div className="flex flex-col gap-2 items-center justify-center h-full text-gray-500 py-5">
+                <IoAdd className="text-4xl" />
+                <div className="text-sm">点击右上角按钮创建终端</div>
+              </div>
+            )}
+            {tabs.map((tab) => (
+              <TabPanel key={tab.id} value={tab.id} className="h-full">
+                <TerminalInstance id={tab.id} />
+              </TabPanel>
+            ))}
+          </div>
+        </Tabs>
+      </DndContext>
+    </div>
+  )
+}
--- a/napcat.webui/src/pages/index.tsx
+++ b/napcat.webui/src/pages/index.tsx
@@ -9,8 +9,10 @@ import ConfigPage from './dashboard/config'
 import DebugPage from './dashboard/debug'
 import HttpDebug from './dashboard/debug/http'
 import WSDebug from './dashboard/debug/websocket'
+import FileManagerPage from './dashboard/file_manager'
 import LogsPage from './dashboard/logs'
 import NetworkPage from './dashboard/network'
+import TerminalPage from './dashboard/terminal'

 export default function IndexPage() {
  const location = useLocation()
@@ -33,6 +35,8 @@ export default function IndexPage() {
              <Route path="ws" element={<WSDebug />} />
              <Route path="http" element={<HttpDebug />} />
            </Route>
+            <Route element={<FileManagerPage />} path="/file_manager" />
+            <Route element={<TerminalPage />} path="/terminal" />
            <Route element={<AboutPage />} path="/about" />
          </Routes>
        </motion.div>
--- a/napcat.webui/src/styles/globals.css
+++ b/napcat.webui/src/styles/globals.css
@@ -35,6 +35,20 @@ body {
  .font-noto-serif {
    font-family: 'Noto Serif SC', serif;
  }
+  .hide-scrollbar::-webkit-scrollbar {
+    width: 0 !important;
+    height: 0 !important;
+  }
+  .hide-scrollbar::-webkit-scrollbar-thumb {
+    width: 0 !important;
+    height: 0 !important;
+    background-color: transparent !important;
+  }
+  .hide-scrollbar::-webkit-scrollbar-track {
+    width: 0 !important;
+    height: 0 !important;
+    background-color: transparent !important;
+  }
 }

 ::-webkit-scrollbar {
--- a/napcat.webui/vite.config.ts
+++ b/napcat.webui/vite.config.ts
@@ -29,6 +29,11 @@ export default defineConfig(({ mode }) => {
    base: '/webui/',
    server: {
      proxy: {
+        '/api/ws/terminal': {
+          target: backendDebugUrl,
+          ws: true,
+          changeOrigin: true
+        },
        '/api': backendDebugUrl
      }
    },