539943419/miaoDirectory
1
0 Fork 0
Code Pull Requests Projects Releases 2 Activity

feat: 添加新建文件/文件夹功能

Browse Source
This commit is contained in:
539943419 committed 2024-08-16 17:04:47 +08:00
1 parent fda693326e
commit 8b15cd9403
7 files changed
+348 -159
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

README.md
+1 -1
View File
@@ -5,7 +5,7 @@ todo: miaoPopupInput, 弹出一个输入框 [finish]
todo: miaoDirectory的重命名功能 [finish]
todo: miaoDirectory的剪切功能 [finish]
todo: miaoDirectory的上传按钮 [finish]
todo: miaoDirectory的新建文件/文件夹功能 [finish]
todo: VirtualDirectory更新时更新文件信息
todo: miaoDirectory的新建文件/文件夹功能
todo: miaoDirectory的复制文件/文件夹功能
todo: miaoDirectory的多选功能
src/class/VirtualDirectory.ts
+4 -4
View File
@@ -71,11 +71,11 @@ class VirtualDirectory {
* 获取从根目录开始的按顺序的文件夹
* @returns {VirtualDirectory[]}
*/
get directoryArray(): VirtualDirectory[] {
get getParents(): VirtualDirectory[] {
if (!this.parent) {
return [this];
}
return [...this.parent.directoryArray, this];
return [...this.parent.getParents, this];
}
/**
@@ -83,11 +83,11 @@ class VirtualDirectory {
* @param {number} layer 需要跳转的层数
* @returns {VirtualDirectory}
*/
getParents(layer: number): VirtualDirectory {
getParent(layer: number): VirtualDirectory {
if (layer <= 0 || !this.parent) {
return this;
}
return this.parent.getParents(layer - 1);
return this.parent.getParent(layer - 1);
}
updateContent(content: (file | directory)[]) {
src/config.ts
+3 -2
View File
@@ -9,7 +9,8 @@ export default {
delete: '/delete',
query: '/query',
rename: '/rename',
mkdir: '/mkdir',
cut: '/cut'
},
enableUpload: true,
};
enableUpload: true
}
src/hooks/useMiaoFetchApi.ts
+156 -89
View File
@@ -1,199 +1,266 @@
import VirtualDirectory, { VirtualFile } from "@/class/VirtualDirectory";
import { getOption, getResponse, miaoFetchConfig, deleteOption, uploadOption, queryOption, renameOption, cutOption } from "@/types/fetch";
import Config from "@/config";
import axios, { AxiosRequestConfig } from "axios";
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import {
getOption,
getResponse,
miaoFetchConfig,
deleteOption,
uploadOption,
queryOption,
renameOption,
cutOption,
mkdirOption
} from '@/types/fetch'
import Config from '@/config'
import axios, { AxiosRequestConfig } from 'axios'
export const useMiaoFetch = (option?: miaoFetchConfig) => {
const retry = option?.retry ?? 0;
const controller = new AbortController();
let flag = true;
const retry = option?.retry ?? 0
const controller = new AbortController()
let flag = true
return {
miaoFetch: async (config: AxiosRequestConfig<any>) => {
let counter = 0;
let response: any;
let errList = [];
let counter = 0
let response: any
let errList = []
while (flag && counter <= retry) {
try {
response = await axios({
...config,
signal: controller.signal
});
return response;
})
return response
} catch (_e) {
errList.push(_e);
counter += 1;
errList.push(_e)
counter += 1
}
}
throw errList;
throw errList
},
/**
* 强制终止miaoFetch
*/
abortMiaoFetch: () => {
flag = false;
controller.abort();
flag = false
controller.abort()
}
};
};
}
}
const miaoFetchApi = {
/**
* 获取对应文件夹下的数据
*/
async get(vDirectory: VirtualDirectory, option?: getOption): Promise<getResponse> {
const { baseUrl, api } = Config;
const url = `${baseUrl}${api.get}${vDirectory.path}`;
const retry = option?.retry ?? 0;
async get(
vDirectory: VirtualDirectory,
option?: getOption
): Promise<getResponse> {
const { baseUrl, api } = Config
const url = `${baseUrl}${api.get}${vDirectory.path}`
const retry = option?.retry ?? 0
const { miaoFetch } = useMiaoFetch({
retry
});
})
const response = await miaoFetch({
url
});
return response.data;
})
return response.data
},
/**
* 上传单个文件到对应文件夹, 后续要将data类型改成buffer以支持分片上传
* 正常上传文件请使用uploadQueue
*/
upload(data: File, targetVDir: VirtualDirectory, option?: uploadOption) {
const { baseUrl, api } = Config;
const url = `${baseUrl}${api.upload}${targetVDir.path}`;
const retry = option?.retry ?? 0;
const { baseUrl, api } = Config
const url = `${baseUrl}${api.upload}${targetVDir.path}`
const retry = option?.retry ?? 0
const { miaoFetch, abortMiaoFetch } = useMiaoFetch({
retry
});
const sizeTotal = data.size;
})
const sizeTotal = data.size
const opType = option?.type ?? "write";
const opType = option?.type ?? 'write'
const formData = new FormData();
const formData = new FormData()
formData.append("file", data);
formData.append('file', data)
// 必须这样传，不然中文乱码
formData.append("fileName", data.name);
formData.append("oprateType", opType);
formData.append('fileName', data.name)
formData.append('operateType', opType)
return {
abort: () => abortMiaoFetch(),
response: new Promise<{
message: "success" | "failed";
error?: string;
}>(async resolve => {
message: 'success' | 'failed'
error?: string
}>(async (resolve) => {
const response = await miaoFetch({
url,
method: "post",
method: 'post',
data: formData,
onUploadProgress(progressEvent) {
option && option.onProcess && option.onProcess(progressEvent.loaded / sizeTotal);
option &&
option.onProcess &&
option.onProcess(progressEvent.loaded / sizeTotal)
}
});
resolve(response.data);
})
};
resolve(response.data)
})
}
},
/**
* 在目标文件夹下创建新的文件夹
*/
mkdir(
targetVDir: VirtualDirectory,
newFolderName: string,
option?: mkdirOption
) {
const { baseUrl, api } = Config
const url = `${baseUrl}${api.mkdir}${targetVDir.path}`
const { miaoFetch } = useMiaoFetch({
retry: option?.retry ?? 0
})
return new Promise<{
message: 'success' | 'failed'
error?: string
}>(async (resolve) => {
const response = await miaoFetch({
url,
method: 'post',
data: {
folderName: newFolderName
}
})
resolve(response.data)
})
},
/**
* 在目标文件夹下创建新的空文件，实际上是通过upload空文件实现
*/
mkFile(
targetVDir: VirtualDirectory,
newFileName: string,
option?: uploadOption
) {
const emptyBlob = new Blob([])
const emptyFile = new File([emptyBlob], newFileName, {
type: 'text/plain'
})
return this.upload(emptyFile, targetVDir, option)
},
/**
* 删除对应的文件或文件夹，若为文件夹会递归删除
*/
delete(target: VirtualFile | VirtualDirectory, option?: deleteOption) {
const { baseUrl, api } = Config;
const url = `${baseUrl}${api.delete}${target.path}`;
const retry = option?.retry ?? 0;
const { baseUrl, api } = Config
const url = `${baseUrl}${api.delete}${target.path}`
const retry = option?.retry ?? 0
const { miaoFetch } = useMiaoFetch({
retry
});
})
return {
response: new Promise<{
eventId: number;
}>(async resolve => {
eventId: number
}>(async (resolve) => {
const response = await miaoFetch({
url,
method: "post"
});
resolve(response.data);
method: 'post'
})
};
resolve(response.data)
})
}
},
/**
* 重命名对应的文件或文件夹
*/
rename(target: VirtualFile | VirtualDirectory, newName: string, option?: renameOption) {
const { baseUrl, api } = Config;
const url = `${baseUrl}${api.rename}${target.path}`;
const retry = option?.retry ?? 0;
rename(
target: VirtualFile | VirtualDirectory,
newName: string,
option?: renameOption
) {
const { baseUrl, api } = Config
const url = `${baseUrl}${api.rename}${target.path}`
const retry = option?.retry ?? 0
const { miaoFetch } = useMiaoFetch({
retry
});
})
return {
response: new Promise<{
eventId: number;
}>(async resolve => {
eventId: number
}>(async (resolve) => {
const response = await miaoFetch({
url,
method: "post",
method: 'post',
data: { newName }
});
resolve(response.data);
})
};
resolve(response.data)
})
}
},
/**
* 剪切文件或文件夹
*/
cut(target: VirtualFile | VirtualDirectory, to: VirtualDirectory, option?: cutOption) {
cut(
target: VirtualFile | VirtualDirectory,
to: VirtualDirectory,
option?: cutOption
) {
const newPath = to.path
const { baseUrl, api } = Config;
const url = `${baseUrl}${api.cut}${target.path}`;
const retry = option?.retry ?? 0;
const { baseUrl, api } = Config
const url = `${baseUrl}${api.cut}${target.path}`
const retry = option?.retry ?? 0
const { miaoFetch } = useMiaoFetch({
retry
});
})
return {
response: new Promise<{
eventId: number;
}>(async resolve => {
eventId: number
}>(async (resolve) => {
const response = await miaoFetch({
url,
method: "post",
method: 'post',
data: { newPath }
});
resolve(response.data);
})
};
resolve(response.data)
})
}
},
/**
* 查询服务端操作事件的进展
*/
query(eventId: number, option?: queryOption) {
const { baseUrl, api } = Config;
const url = `${baseUrl}${api.query}`;
const retry = option?.retry ?? 0;
const { baseUrl, api } = Config
const url = `${baseUrl}${api.query}`
const retry = option?.retry ?? 0
const { miaoFetch } = useMiaoFetch({
retry
});
})
return {
response: new Promise<{
status: "process" | "success" | "failed";
error?: unknown;
}>(async resolve => {
status: 'process' | 'success' | 'failed'
error?: unknown
}>(async (resolve) => {
const response = await miaoFetch({
url,
method: "get",
method: 'get',
params: {
id: eventId
}
});
resolve(response.data);
})
};
resolve(response.data)
})
}
};
}
}
export default function useMiaoFetchApi() {
return miaoFetchApi;
return miaoFetchApi
}
src/types/fetch.ts
+2 -1
View File
@@ -24,5 +24,6 @@ export type uploadOption = {
export type deleteOption = {} & miaoFetchConfig;
export type renameOption = {} & miaoFetchConfig;
export type cutOption = {} & miaoFetchConfig;
export type cutOption = {} & miaoFetchConfig
export type mkdirOption = {} & miaoFetchConfig
export type queryOption = {} & miaoFetchConfig;
src/views/miaoDirectory.vue
+149 -34
View File
@@ -1,12 +1,18 @@
<template>
<miao-drop-handler @on-virtual-directory="handleDropVDirectory" @on-files="handleDropFiles"
<miao-drop-handler
@on-virtual-directory="handleDropVDirectory"
@on-files="handleDropFiles"
@on-virtual-files="handleDropVirtualFiles">
<div class="miao-directory-item-container" ref="rootDomRef">
<div class="container-top" :style="{
<div
class="container-top"
:style="{
backgroundColor:
index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
}">
<div class="container-top-colorfulBar" :style="{ backgroundColor: props.color }"></div>
<div
class="container-top-colorfulBar"
:style="{ backgroundColor: props.color }"></div>
<div class="container-top-breadcrumb">
<!-- <n-scrollbar x-scrollable> -->
<div class="container-top-breadcrumb-container">
@@ -16,8 +22,10 @@
<CloudOutline />
</n-icon>
</n-breadcrumb-item>
<n-breadcrumb-item v-for="dir in currentDirectory?.directoryArray"
@click="setCurrentDirectory(dir)" :clickable="true">
<n-breadcrumb-item
v-for="dir in currentDirectory?.getParents"
@click="setCurrentDirectory(dir)"
:clickable="true">
<div>{{ dir.name }}</div>
</n-breadcrumb-item>
</n-breadcrumb>
@@ -25,42 +33,88 @@
<!-- </n-scrollbar> -->
</div>
<div class="container-top-tools">
<n-icon class="container-top-tools-item" size="15" @click="handleBack">
<n-icon
class="container-top-tools-item"
size="15"
@click="handleBack">
<ChevronBackOutline />
</n-icon>
<n-icon class="container-top-tools-item" size="14" @click="handleReload">
<ReloadOutline class="container-top-tools-item-reload" />
<n-icon
class="container-top-tools-item"
size="14"
@click="handleReload">
<ReloadOutline
class="container-top-tools-item-reload" />
</n-icon>
<n-icon class="container-top-tools-item" size="20" @click="emit('exit')">
<n-icon
class="container-top-tools-item"
size="20"
@click="emit('exit')">
<CloseOutline />
</n-icon>
</div>
</div>
<div class="container-items" :style="{
<div
class="container-items"
:style="{
backgroundColor:
index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
}">
<n-scrollbar>
<transition-group name="dirItem">
<miaoDirectoryItem v-for="dir in showData_directory" @click="setCurrentDirectory(dir)"
:item="dir" :key="dir.uid" :color="props.color" @delete="handleItemDelete(dir)"
@drag-start="handleItemDragStart" @rename="handleItemRename(dir)" />
<miaoDirectoryItem
v-for="dir in showData_directory"
@click="setCurrentDirectory(dir)"
:item="dir"
:key="dir.uid"
:color="props.color"
@delete="handleItemDelete(dir)"
@drag-start="handleItemDragStart"
@rename="handleItemRename(dir)" />
</transition-group>
<transition-group name="dirItem">
<miaoDirectoryItem v-for="file in showData_files" :item="file" :key="file.uid"
@click="openUrl(`${baseUrl}${api.get}${file.path}`)" @download="handleItemDownload(file)"
@delete="handleItemDelete(file)" @drag-start="handleItemDragStart"
@rename="handleItemRename(file)" :color="props.color" />
<miaoDirectoryItem
v-for="file in showData_files"
:item="file"
:key="file.uid"
@click="openUrl(`${baseUrl}${api.get}${file.path}`)"
@download="handleItemDownload(file)"
@delete="handleItemDelete(file)"
@drag-start="handleItemDragStart"
@rename="handleItemRename(file)"
:color="props.color" />
</transition-group>
</n-scrollbar>
</div>
<div class="container-bottom" :style="{
<div
class="container-bottom"
:style="{
backgroundColor:
index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
}">
<div class="container-bottom-icon">
<div class="container-bottom-item">
<div class="container-bottom-item-icon">
<add-outline
:style="{
color:
index % 2 === 0
? 'rgb(0 0 0)'
: 'rgb(255 255 255)'
}"
@click="handleAddNewItem" />
</div>
</div>
<div class="container-bottom-item">
<div class="container-bottom-item-icon">
<cloud-upload-outline
:style="{ color: index % 2 === 0 ? 'rgb(0 0 0)' : 'rgb(255 255 255)' }" @click="handlePickFilesUpload"/>
:style="{
color:
index % 2 === 0
? 'rgb(0 0 0)'
: 'rgb(255 255 255)'
}"
@click="handlePickFilesUpload" />
</div>
</div>
</div>
<miao-mask v-model:show="showModel"></miao-mask>
@@ -77,7 +131,7 @@ import { computed, onMounted, ref } from 'vue'
import Config from '@/config'
import miaoMask from '@/components/miaoMask.vue'
import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue'
import miaoPopupInput from "@/components/miaoPopupInput.vue";
import miaoPopupInput from '@/components/miaoPopupInput.vue'
import miaoDropHandler from '@/components/miaoDropHandler.vue'
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
import useDataBus from '@/hooks/useDataBus'
@@ -86,7 +140,8 @@ import {
ChevronBackOutline,
ReloadOutline,
CloseOutline,
CloudUploadOutline
CloudUploadOutline,
AddOutline
} from '@vicons/ionicons5'
import useUploadQueue from '@/hooks/useUploadQueue'
import useVirtualPages from '@/hooks/useVirtualPages'
@@ -161,7 +216,7 @@ const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
)
virtualDirectory.updateContent(data)
} else {
; (async () => {
;(async () => {
const data: (file | directory)[] = await miaoFetchApi.get(
virtualDirectory
)
@@ -225,17 +280,20 @@ const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
showInput: true,
inputValue: item.name,
inputProps: {
placeholder: item.name,
placeholder: item.name
},
options: [{
options: [
{
label: '取消',
key: false,
type: 'error'
}, {
},
{
label: '确认',
key: true,
type: 'success'
},]
}
]
})
if (popupRes.key === false) {
return
@@ -273,11 +331,14 @@ const handleDropFiles = async (files: File[]) => {
}
const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
if (vDirs[0].parent === currentDirectory.value) {
// 不能移到自己或自己的子文件夹内
for (let vDir of vDirs) {
if (currentDirectory.value.getParents.includes(vDir)) {
return
}
}
for (let dir of vDirs) {
; (async () => {
;(async () => {
const _from = dir.parent
const { response } = miaoFetchApi.cut(dir, currentDirectory.value)
const id = (await response).eventId
@@ -297,7 +358,7 @@ const handleDropVirtualFiles = (files: VirtualFile[]) => {
return
}
for (let file of files) {
; (async () => {
;(async () => {
const _from = file.parent
const { response } = miaoFetchApi.cut(file, currentDirectory.value)
const id = (await response).eventId
@@ -317,12 +378,58 @@ const handlePickFilesUpload = async () => {
})
const _currDir = currentDirectory.value
uploadQueue.push(files, _currDir, {
onFinish(){
onFinish() {
_currDir.update()
}
})
}
const handleAddNewItem = async () => {
const popupRes = await popupInput.value.popup({
title: '新建文件/文件夹',
showInput: true,
inputProps: {
placeholder: ''
},
options: [
{
label: '取消',
key: 'cancel',
type: 'error'
},
{
label: '文件',
key: 'file',
type: 'success'
},
{
label: '文件夹',
key: 'dir',
type: 'success'
}
]
})
// todo: 上传前如重名文件夹等等的错误提前检查
if (popupRes.key === 'cancel' || popupRes.text === '') {
return
}
console.log(popupRes)
const _currDir = currentDirectory.value
const name = popupRes.text
const opType: 'file' | 'dir' = popupRes.key
if (opType === 'dir') {
const res = await miaoFetchApi.mkdir(currentDirectory.value, name)
if (res.message === 'success') {
_currDir.update()
}
} else {
const { response } = miaoFetchApi.mkFile(currentDirectory.value, name)
const res = await response
if (res.message === 'success') {
_currDir.update()
}
}
}
onMounted(async () => {
await setCurrentDirectory(currentDirectory.value)
})
@@ -438,13 +545,19 @@ $bottom-bar-height: 60px;
height: $bottom-bar-height;
background-color: bisque;
display: flex;
justify-content: center;
justify-content: space-around;
align-items: center;
user-select: none;
box-shadow: 0px 1px 10px #888888;
z-index: 2;
.container-bottom-icon {
.container-bottom-item {
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
.container-bottom-item-icon {
svg {
width: 30px;
height: 30px;
@@ -460,6 +573,7 @@ $bottom-bar-height: 60px;
}
}
}
}
}
// transition动画相关
@@ -481,4 +595,5 @@ $bottom-bar-height: 60px;
// position: absolute;
// }
// }
// }</style>
// }
</style>
vite.config.ts
+33 -28
View File
@@ -1,65 +1,70 @@
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
import { viteSingleFile } from "vite-plugin-singlefile"
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { viteSingleFile } from 'vite-plugin-singlefile'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), viteSingleFile()],
resolve: {
alias: {
"@": resolve(__dirname, "src")
'@': resolve(__dirname, 'src')
}
},
server: {
proxy: {
"/get": {
target: "http://127.0.0.1:17705",
'/get': {
target: 'http://127.0.0.1:17705',
changeOrigin: true,
rewrite: path => path.replace(/^\/get/, "/get")
rewrite: (path) => path.replace(/^\/get/, '/get')
},
"/upload": {
target: "http://127.0.0.1:17705",
'/upload': {
target: 'http://127.0.0.1:17705',
changeOrigin: true,
rewrite: path => path.replace(/^\/upload/, "/upload")
rewrite: (path) => path.replace(/^\/upload/, '/upload')
},
"/delete": {
target: "http://127.0.0.1:17705",
'/delete': {
target: 'http://127.0.0.1:17705',
changeOrigin: true,
rewrite: path => path.replace(/^\/delete/, "/delete")
rewrite: (path) => path.replace(/^\/delete/, '/delete')
},
"/query": {
target: "http://127.0.0.1:17705",
'/query': {
target: 'http://127.0.0.1:17705',
changeOrigin: true,
rewrite: path => path.replace(/^\/query/, "/query")
rewrite: (path) => path.replace(/^\/query/, '/query')
},
"/rename": {
target: "http://127.0.0.1:17705",
'/rename': {
target: 'http://127.0.0.1:17705',
changeOrigin: true,
rewrite: path => path.replace(/^\/rename/, "/rename")
rewrite: (path) => path.replace(/^\/rename/, '/rename')
},
"/cut": {
target: "http://127.0.0.1:17705",
'/cut': {
target: 'http://127.0.0.1:17705',
changeOrigin: true,
rewrite: path => path.replace(/^\/cut/, "/cut")
rewrite: (path) => path.replace(/^\/cut/, '/cut')
},
'/mkdir': {
target: 'http://127.0.0.1:17705',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/mkdir/, '/mkdir')
}
}
},
build: {
rollupOptions: {
input: {
main: resolve(__dirname, "index.html")
main: resolve(__dirname, 'index.html')
},
output: {
// 配置输出为单文件
inlineDynamicImports: true,
manualChunks: undefined,
entryFileNames: "bundle.js",
format: "iife", // 立即执行函数格式
name: "MyBundle"
entryFileNames: 'bundle.js',
format: 'iife', // 立即执行函数格式
name: 'MyBundle'
}
}
}
});
})