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

Merge branch 'main' of http://git.miaospring.top:3000/539943419/miaoDirectory

Browse Source
This commit is contained in:
539943419 committed 2024-08-19 22:39:15 +08:00
2 parents 3d22ed0c71 8b15cd9403
commit 1b5abdf40c
8 files changed
+514 -325
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

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