FileExplorer

安装

pnpm i @unicom-blockchain/file-explorer

使用

<template>
  <div style="width: 1000px; height: 500px">
    <FileExplore :data-model="MyModel" :on-right-click="onRightClick">
      <template #file="{ fileInfo }">
        <div style="display: flex; flex-direction: column; width: 64px">
          <img :src="getFileExtImgSrc(fileInfo)" class="file-bg" />
          <AutoOverflowTip v-if="!fileInfo.isEditing" :content="fileInfo.name">
            {{ fileInfo.name }}
          </AutoOverflowTip>
          <el-input
            v-if="fileInfo.isEditing"
            v-model="fileInfo.name"
            style="width: 64px"
            size="small"
            @blur="endEditing(fileInfo)"
            @keyup.enter="endEditing(fileInfo)"
          />
        </div>
      </template>
    </FileExplore>
  </div>
</template>
<script setup lang="ts">
import {
  DataModel,
  FileDisplayType,
  type FileItem,
  getFileType,
  MoveFileDataType,
} from '@unicom-blockchain/file-system-utils';
import { AutoOverflowTip } from '@unicom-blockchain/useful-tools';
import FileExplore from '../FileExplorer.vue';
import fileIcon from '../assets/file.png';
import folderIcon from '../assets/folder.png';
import imgIcon from '../assets/img.png';
import pdfIcon from '../assets/pdf.png';
import txtIcon from '../assets/txt.png';

function onRightClick(_root: FileItem, _clickItem?: FileItem) {
  return {
    hasCreateFolder: false,
    hasDelete: true,
    hasDetail: true,
    hasDownload: false,
    hasRename: false,
    hasAddTag: false,
    hasMove: false,
    hasCopy: false,
    extra: [],
  };
}
function endEditing(info: FileItem) {
  info.isEditing = false;
}
function getFileExtImgSrc(file: FileItem) {
  if (file.type === 'folder') {
    return folderIcon;
  }
  const { ext, type } = getFileType(file.name);
  if (ext === 'pdf') {
    return pdfIcon;
  }
  if (ext === 'txt') {
    return txtIcon;
  }
  if (type === FileDisplayType.Img) {
    return imgIcon;
  }
  return fileIcon;
}
class MyModel extends DataModel {
  loadNode(_parentID: string): Promise<FileItem<any>[]> {
    throw new Error('Method not implemented.');
  }
  loadData(): Promise<FileItem<any>> {
    throw new Error('Method not implemented.');
  }
  deleteItem(_file: FileItem<any>): Promise<boolean> {
    throw new Error('Method not implemented.');
  }
  rename(_file: FileItem<any>): Promise<{ id: string; newName: string }> {
    throw new Error('Method not implemented.');
  }
  createFile(_file: File, _root: FileItem<any>): Promise<{ isSuccess: boolean; id: string }> {
    throw new Error('Method not implemented.');
  }
  createFolder(_name: string, _root: FileItem<any>): Promise<{ isSuccess: boolean; id: string }> {
    throw new Error('Method not implemented.');
  }
  downLoadFile(_file: FileItem<any>): Promise<Blob> {
    throw new Error('Method not implemented.');
  }
  downloadDirectories(_file: FileItem<any>): Promise<Blob> {
    throw new Error('Method not implemented.');
  }
  previewFile(_file: FileItem<any>): Promise<Blob> {
    throw new Error('Method not implemented.');
  }
  uploadTags(_tag: any): Promise<boolean> {
    throw new Error('Method not implemented.');
  }
  getDirectoryTree(_file: FileItem<any>): Promise<any> {
    throw new Error('Method not implemented.');
  }
  moveFileDirectory(_file: MoveFileDataType): Promise<any> {
    throw new Error('Method not implemented.');
  }
  copyFile(_file: FileItem, _newName: string): Promise<boolean> {
    throw new Error('Method not implemented.');
  }
}
</script>
<style>
:root {
  --un-color-fill-2: #f2fefe;
}
</style>
<style scoped>
.file-bg {
  width: 64px;
  height: 64px;
}
.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0px;
}
</style>