添加删除和查询文件操作事件的api

src/App.vue

@@ -42,6 +42,23 @@ const deleteView = (index: number) => {
   }
 }
 
+// 若存在两个以上标签页可见则除点击的标签页以外其他全部隐藏，若只有一个标签页可见则全部展示
+// 这个逻辑以后再研究吧，平时感觉用不到
+const handleClickTitle = (index: number) => {
+  let count = views.filter(v=>v.visible).length
+  let _index = 0
+  while(_index < views.length) {
+    if(_index !== index) {
+      views[_index].visible = count > 1 ? false : true
+    }else {
+      views[_index].visible = true
+    }
+    _index += 1
+  }
+}
+
+
+// 顶部菜单相关
 function renderIcon(icon: any) {
   return () => {
     return h(NIcon, null, {
@@ -66,7 +83,7 @@ const handleMenuSelect = (key: string) => {
       component: NQrCode,
       props: {
         value: baseUrl,
-        size: 500,
+        size: 300,
         errorCorrectionLevel: 'H'
       }
     }
@@ -76,8 +93,6 @@ const handleMenuSelect = (key: string) => {
 onMounted(() => {
   createView(rootDirectory)
 })
-
-// todo: 让所有伪页面共享一个rootDirectory
 </script>
 
 <template>
@@ -86,7 +101,7 @@ onMounted(() => {
 			<n-scrollbar x-scrollable>
 				<div class="tags-container">
 					<div class="tag" v-for="(view, index) of views" :key="view.uid">
-						<div class="tag-title">{{ view.title }}</div>
+						<div class="tag-title" @click="handleClickTitle(index)">{{ view.title }}</div>
 						<div class="tag-point" :style="{ backgroundColor: view.color } "></div>
 						<div class="tag-control">
 							<n-icon class="tag-control-icon icon" @click="view.switchShow()">
@@ -156,6 +171,7 @@ $controler-height: 25px;
           margin-left: 4px;
           // width: 70%;
           user-select: none;
+          cursor: pointer;
         }
 
         .tag-point {

src/class/UploadQueue.ts

@@ -41,15 +41,15 @@ export class UploadQueueItem {
 		if (this.status === "uploading") {
 			return;
 		}
-		const { abort, status } = miaoFetchApi.upload(this.file, this.targetDirectory, {
+		const { abort, response } = miaoFetchApi.upload(this.file, this.targetDirectory, {
 			onProcess: percent => {
 				this.process = percent;
 			}
 		});
 		this._abort = abort;
-		this._status = status;
+		this._status = response;
 		this.status = "uploading";
-		status
+		response
 			.then(() => {
 				this.status = "success";
 				this.onSuccess && this.onSuccess();

src/components/miaoDirectory/miaoDirectoryItem.vue

@@ -33,6 +33,7 @@ const dataBus = useDataBus()
 
 const emit = defineEmits<{
     download: []
+    delete: []
 }>()
 
 const props = defineProps<{
@@ -65,9 +66,13 @@ const dropDownOptions = computed(()=> {
     return options
 })
 
-const handleDropdownSelect = (key: 'download') => {
+const handleDropdownSelect = (key: 'download' | 'delete') => {
     console.log(key)
-    emit(key)
+    if(key === 'download'){
+        emit('download')
+    } else if (key === 'delete') {
+        emit('delete')
+    }
 }
 
 const Icon = computed(()=>{
@@ -112,7 +117,7 @@ const handleDragStart = () => {
 <style lang="scss" scoped>
 .miao-item {
     cursor: pointer;
-    width: calc(100% - 16px);
+    width: calc(100% - 20px);
     min-width: 250px;
     // aspect-ratio: 66/9;
     height: 50px;
@@ -120,7 +125,7 @@ const handleDragStart = () => {
     display: flex;
     justify-content: center;
     align-items: center;
-    margin: 10px 8px;
+    margin: 10px 10px;
     .item-main {
         position: relative;
         width: 100%;

src/config.ts

@@ -5,7 +5,9 @@ export default {
 	uploadSizeLimit: 1024 * 1024 * 100,
 	api: {
 		get: '/get',
-		upload: '/upload'
+		upload: '/upload',
+		delete: '/delete',
+		query: '/query'
 	},
 	enableUpload: true,
 };

src/hooks/useMiaoFetchApi.ts

@@ -1,5 +1,5 @@
-import VirtualDirectory from "@/class/VirtualDirectory";
-import { getOption, getResponse, miaoFetchConfig, uploadOption } from "@/types/fetch";
+import VirtualDirectory, { VirtualFile } from "@/class/VirtualDirectory";
+import { getOption, getResponse, miaoFetchConfig, deleteOption, uploadOption, queryOption } from "@/types/fetch";
 import Config from "@/config";
 import axios, { AxiosRequestConfig } from "axios";
 
@@ -55,36 +55,92 @@ const miaoFetchApi = {
 	},
 
 	/**
-	 * 上传单个文件到对应文件夹
+	 * 上传单个文件到对应文件夹, 后续要将data类型改成buffer以支持分片上传
 	 */
-	upload(file: File, targetVDir: VirtualDirectory, option?: uploadOption) {
+	upload(data: File, targetVDir: VirtualDirectory, option?: uploadOption) {
 		const { baseUrl, api } = Config;
 		const url = `${baseUrl}${api.upload}${targetVDir.path}`;
 		const retry = option?.retry ?? 0;
 		const { miaoFetch, abortMiaoFetch } = useMiaoFetch({
 			retry
 		});
-		const sizeTotal = file.size
+		const sizeTotal = data.size;
 
-		const opType = option?.type ?? 'write'
+		const opType = option?.type ?? "write";
 
-		const data = new FormData()
+		const formData = new FormData();
 
-		data.append('file', file)
-		data.append('oprateType', opType)
+		formData.append("file", data);
+        // 必须这样传，不然中文乱码
+		formData.append("fileName", data.name)
+		formData.append("oprateType", opType);
 
 		return {
 			abort: () => abortMiaoFetch(),
-			status: new Promise(async (resolve)=>{
+			response: new Promise<{
+				message: 'success' | 'failed'
+				error?: string
+			}>(async resolve => {
 				const response = await miaoFetch({
 					url,
-					method: 'post',
-					data: data,
+					method: "post",
+					data: formData,
 					onUploadProgress(progressEvent) {
-						option && option.onProcess && option.onProcess(progressEvent.loaded / sizeTotal)
-					},
-				})
-				resolve(response.data)
+						option && option.onProcess && option.onProcess(progressEvent.loaded / sizeTotal);
+					}
+				});
+				resolve(response.data);
+			})
+		};
+	},
+
+	/**
+	 * 删除对应的文件或文件夹，若为文件夹会递归删除
+	 */
+	delete(target: VirtualFile | VirtualDirectory, option?: deleteOption) {
+		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 => {
+				const response = await miaoFetch({
+					url,
+					method: "post"
+				});
+				resolve(response.data);
+			})
+		};
+	},
+
+	/**
+	 * 查询服务端操作事件的进展
+	 */
+	query(eventId: number, option?: queryOption) {
+		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 => {
+				const response = await miaoFetch({
+					url,
+					method: "get",
+					params: {
+                        id: eventId
+                    }
+				});
+				resolve(response.data);
 			})
 		};
 	}

src/types/fetch.ts

@@ -21,4 +21,9 @@ export type uploadOption = {
      * append即为增量写
      */
     type?: 'write' | 'append'
+} & miaoFetchConfig
+
+export type deleteOption = {
+} & miaoFetchConfig
+export type queryOption = {
 } & miaoFetchConfig

src/views/miaoDirectory.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="miao-directory-item-container" ref="rootDomRef" >
+	<div class="miao-directory-item-container" ref="rootDomRef">
 		<div class="container-top" :style="{ backgroundColor: props.index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)' }">
 			<div class="container-top-colorbar" :style="{ backgroundColor: props.color }"></div>
 			<div class="container-top-breadcrumb">
@@ -32,13 +32,21 @@
 		</div>
 		<div class="container-items" :style="{ backgroundColor: props.index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)' }">
 			<n-scrollbar>
-				<miaoDirectoryItem v-for="(dir) in currentDirectory?.directorys" @click="setCurrentDirectory(dir)" :item="dir" :key="dir.uid" :color="props.color" />
 				<miaoDirectoryItem
-					v-for="(file) in currentDirectory?.files"
+					v-for="(dir) in showData_directory"
+					@click="setCurrentDirectory(dir)"
+					:item="dir"
+					:key="dir.uid"
+					:color="props.color"
+					@delete="handleItemDelete(dir)"
+				/>
+				<miaoDirectoryItem
+					v-for="(file) in showData_files"
 					:item="file"
 					:key="file.uid"
 					@click="openUrl(`${baseUrl}${api.get}${file.path}`)"
 					@download="openUrl(`${baseUrl}${api.get}${file.path}`, {download: file.name})"
+					@delete="handleItemDelete(file)"
 					:color="props.color"
 				/>
 			</n-scrollbar>
@@ -51,8 +59,8 @@
 <script setup lang="ts">
 import { NBreadcrumbItem, NBreadcrumb, NIcon, NScrollbar } from 'naive-ui'
 import type { file, directory } from '@/types/type.ts'
-import VirtualDirectory from '@/class/VirtualDirectory';
-import { onMounted, ref } from 'vue';
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory';
+import { computed, onMounted, ref } from 'vue';
 import Config from '@/config'
 import dropHandler, { dropHandlerHooks } from '@/hooks/dropHandler';
 import miaoMask from '@/components/miaoMask.vue';
@@ -75,12 +83,21 @@ const props = defineProps<{
 const emit = defineEmits<{
     exit: []
 }>()
+// 是否显示模态框
+const showModel = ref(0)
 
 // 目前展示的Dir
 const currentDirectory = defineModel<VirtualDirectory | undefined>('currentDirectory', { required: true })
 
-// 是否显示模态框
-const showModel = ref(0)
+// 用于展示的数据，后续会增加排序等操作
+const showData_directory = computed<VirtualDirectory[]>(() => {
+    const data = currentDirectory.value?.directorys ? [...currentDirectory.value?.directorys ] : []
+    return data
+})
+const showData_files = computed<VirtualFile[]>(() => {
+    const data = currentDirectory.value?.files ? [...currentDirectory.value?.files ] : []
+    return data
+})
 
 // 用于监听拖拽文件事件
 const rootDomRef = ref<HTMLDivElement>()
@@ -123,12 +140,6 @@ const openUrl = (href: string, config?: {
     a.setAttribute('target', target ?? '_blank')
     download && a.setAttribute('download', download);
     a.click();
-    // var a = document.createElement("a");
-    // a.setAttribute('href', href)
-    // a.setAttribute('target', target ?? '_blank')
-    // a.setAttribute('download', download ?? '')
-    // console.log({target, download})
-    // a.click();
 }
 
 const handleBack = () => {
@@ -141,6 +152,17 @@ const handleReload = () => {
     reload()
 }
 
+const handleItemDelete = async (item: VirtualDirectory | VirtualFile) => {
+    const {response} = miaoFetchApi.delete(item)
+    // todo: 将删除事件统一用一个事件管理中心管理
+    const id = (await response).eventId
+    const {response : res} = miaoFetchApi.query(id)
+    const eventResult = await res
+    if(eventResult.status === 'success'){
+        reload()
+    }
+}
+
 onMounted(async () => {
     currentDirectory.value && await setCurrentDirectory(currentDirectory.value)
     // 拖动事件处理

vite.config.ts

@@ -23,7 +23,18 @@ export default defineConfig({
 				target: "http://127.0.0.1:17705",
 				changeOrigin: true,
 				rewrite: path => path.replace(/^\/upload/, "/upload")
-			}
+			},
+			
+			"/delete": {
+				target: "http://127.0.0.1:17705",
+				changeOrigin: true,
+				rewrite: path => path.replace(/^\/delete/, "/delete")
+			},
+			"/query": {
+				target: "http://127.0.0.1:17705",
+				changeOrigin: true,
+				rewrite: path => path.replace(/^\/query/, "/query")
+			}, 
 		}
 	},
 	build: {