Compare commits
1
Commits
1.8.0
..
4c87bea073
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
4c87bea073 |
No files matched your search
+1
-24
@@ -1,26 +1,3 @@
|
|||||||
# Logs
|
|
||||||
logs
|
|
||||||
*.log
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
pnpm-debug.log*
|
|
||||||
lerna-debug.log*
|
|
||||||
|
|
||||||
node_modules
|
node_modules
|
||||||
dist
|
dist
|
||||||
dist-ssr
|
static
|
||||||
*.local
|
|
||||||
|
|
||||||
# Editor directories and files
|
|
||||||
.vscode/*
|
|
||||||
!.vscode/extensions.json
|
|
||||||
.idea
|
|
||||||
.DS_Store
|
|
||||||
*.suo
|
|
||||||
*.ntvs*
|
|
||||||
*.njsproj
|
|
||||||
*.sln
|
|
||||||
*.sw?
|
|
||||||
.vscode
|
|
||||||
serve
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
todo: 标签页,miaoDirectory切换动画 [finish]
|
|
||||||
todo: 重构virtualPage,所有page以插件形式使用 [finish]
|
|
||||||
todo: miaoDirectory插件化,为后续插件功能开发做准备 [finish]
|
|
||||||
todo: miaoPopupInput, 弹出一个输入框 [finish]
|
|
||||||
todo: miaoDirectory的重命名功能 [finish]
|
|
||||||
todo: miaoDirectory的剪切功能 [finish]
|
|
||||||
todo: miaoDirectory的上传按钮 [finish]
|
|
||||||
todo: miaoDirectory的新建文件/文件夹功能 [finish]
|
|
||||||
todo: miaoDirectory的多选功能 [finish]
|
|
||||||
todo: VirtualDirectory更新时更新文件信息
|
|
||||||
todo: miaoDirectory的复制文件/文件夹功能
|
|
||||||
-19
@@ -1,19 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>MDW</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
|
||||||
<script type="module" src="/src/main.ts"></script>
|
|
||||||
</body>
|
|
||||||
<style>
|
|
||||||
#app{
|
|
||||||
height: 100vh;
|
|
||||||
width: 100vw;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</html>
|
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
import express from 'express'
|
||||||
|
import os from 'os'
|
||||||
|
import path from 'path'
|
||||||
|
import cors from 'cors'
|
||||||
|
import fs from 'fs'
|
||||||
|
|
||||||
|
if (!fs.existsSync('./static')) {
|
||||||
|
fs.mkdirSync('./static')
|
||||||
|
}
|
||||||
|
|
||||||
|
const staticPath = path.join('./static')
|
||||||
|
const port = 17705
|
||||||
|
|
||||||
|
const prev = `/${'get'}`
|
||||||
|
const app = express()
|
||||||
|
app.use(cors())
|
||||||
|
|
||||||
|
// 不存在文件与文件夹同名的问题
|
||||||
|
app.use(prev, express.static(staticPath))
|
||||||
|
app.use(prev, (req, res) => {
|
||||||
|
const directoryPath = path.join(staticPath, req.path)
|
||||||
|
fs.readdir(directoryPath, (err, files) => {
|
||||||
|
if (err) {
|
||||||
|
console.log(err, directoryPath)
|
||||||
|
return res.status(500).json({ error: 'Unable to scan directory' })
|
||||||
|
}
|
||||||
|
const fileDetails = files.map((file) => {
|
||||||
|
const filePath = path.join(directoryPath, file)
|
||||||
|
const stats = fs.statSync(filePath)
|
||||||
|
return {
|
||||||
|
name: file,
|
||||||
|
size: stats.isDirectory() ? undefined : stats.size,
|
||||||
|
type: stats.isDirectory() ? 'directory' : 'file',
|
||||||
|
stat: {
|
||||||
|
atimeMs: stats.atimeMs,
|
||||||
|
birthtimeMs: stats.birthtimeMs,
|
||||||
|
ctimeMs: stats.ctimeMs,
|
||||||
|
mtimeMs: stats.mtimeMs
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
res.json(fileDetails)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
app.listen(port, '::', () => {
|
||||||
|
const interfaces = os.networkInterfaces()
|
||||||
|
console.log(`服务器正在以下地址运行:`)
|
||||||
|
for (const name of Object.keys(interfaces)) {
|
||||||
|
for (const iface of interfaces[name]) {
|
||||||
|
iface.family === 'IPv6'
|
||||||
|
? console.log(`http://[${iface.address}]:${port}`)
|
||||||
|
: console.log(`http://${iface.address}:${port}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log(`以下地址访问文件/文件夹:`)
|
||||||
|
for (const name of Object.keys(interfaces)) {
|
||||||
|
for (const iface of interfaces[name]) {
|
||||||
|
iface.family === 'IPv6'
|
||||||
|
? console.log(`http://[${iface.address}]:${port}${prev}`)
|
||||||
|
: console.log(`http://${iface.address}:${port}${prev}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
+16
-20
@@ -1,29 +1,25 @@
|
|||||||
{
|
{
|
||||||
"name": "miao-directory-web",
|
"name": "miao-directory",
|
||||||
"private": true,
|
"version": "1.0.0",
|
||||||
"version": "0.0.0",
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "node index.js",
|
||||||
"dev:host": "vite --host 0.0.0.0",
|
"dev:bun": "bun index.js",
|
||||||
"build": "vue-tsc -b && vite build",
|
"serve": "node dist/index.min.js",
|
||||||
"preview": "vite preview"
|
"serve:bun": "bun dist/index.min.js",
|
||||||
|
"build": "ncc build index.js && uglifyjs dist/index.js -o dist/index.min.js"
|
||||||
},
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vicons/ionicons5": "^0.12.0",
|
"cors": "^2.8.5",
|
||||||
"axios": "^1.7.3",
|
"express": "^4.19.2"
|
||||||
"lodash": "^4.17.21",
|
|
||||||
"naive-ui": "^2.39.0",
|
|
||||||
"sass": "^1.77.8",
|
|
||||||
"vue": "^3.4.35"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/lodash": "^4.17.7",
|
"@vercel/ncc": "^0.38.1",
|
||||||
"@types/node": "^22.1.0",
|
"uglify-js": "^3.19.1"
|
||||||
"@vitejs/plugin-vue": "^5.1.2",
|
|
||||||
"typescript": "^5.5.3",
|
|
||||||
"vite": "^5.4.0",
|
|
||||||
"vite-plugin-singlefile": "^2.0.2",
|
|
||||||
"vue-tsc": "^2.0.29"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Generated
+465
-1154
File diff suppressed because it is too large.
Load diff
-403
@@ -1,403 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { h, onMounted, reactive, ref, shallowRef } from 'vue'
|
|
||||||
import { NIcon, NScrollbar, NDropdown, NQrCode } from 'naive-ui'
|
|
||||||
import {
|
|
||||||
EyeOffOutline,
|
|
||||||
EyeOutline,
|
|
||||||
CloseOutline,
|
|
||||||
CopyOutline,
|
|
||||||
EllipsisVertical,
|
|
||||||
QrCodeOutline
|
|
||||||
} from '@vicons/ionicons5'
|
|
||||||
import miaoDirectory from './views/miaoDirectory.vue'
|
|
||||||
import VirtualPage from './class/VirtualPage'
|
|
||||||
import VirtualDirectory, { VirtualFile } from './class/VirtualDirectory'
|
|
||||||
import MiaoMask from './components/miaoMask.vue'
|
|
||||||
import config from './config'
|
|
||||||
import useVirtualPages from './hooks/useVirtualPages'
|
|
||||||
|
|
||||||
const { baseUrl } = config
|
|
||||||
|
|
||||||
const showModal = ref<boolean>(false)
|
|
||||||
|
|
||||||
const modalData = shallowRef<{
|
|
||||||
component: any
|
|
||||||
props: any
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const views = useVirtualPages()
|
|
||||||
|
|
||||||
const rootDirectory = reactive(
|
|
||||||
new VirtualDirectory({
|
|
||||||
name: '根目录',
|
|
||||||
stats: {
|
|
||||||
atimeMs: 0,
|
|
||||||
birthtimeMs: 0,
|
|
||||||
ctimeMs: 0,
|
|
||||||
mtimeMs: 0
|
|
||||||
}
|
|
||||||
})
|
|
||||||
)
|
|
||||||
|
|
||||||
// component就是一个vue组件,类似于miaoDirectory
|
|
||||||
const createView = (
|
|
||||||
component: any,
|
|
||||||
currentDirectorys?: VirtualDirectory[],
|
|
||||||
currentFiles?: VirtualFile[],
|
|
||||||
index?: number
|
|
||||||
) => {
|
|
||||||
index ?? (index = views.length)
|
|
||||||
views.splice(
|
|
||||||
index,
|
|
||||||
0,
|
|
||||||
reactive<VirtualPage>(new VirtualPage(component, {
|
|
||||||
directorys: [...(currentDirectorys ?? [])],
|
|
||||||
files: [...(currentFiles ?? [])]
|
|
||||||
}))
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const deleteView = (index: number) => {
|
|
||||||
views.splice(index, 1)
|
|
||||||
if (views.length === 0) {
|
|
||||||
createView(miaoDirectory, [rootDirectory])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 点击标题是隐藏其他标签或显示其他标签,还挺好用的
|
|
||||||
const handleClickTitle = (index: number) => {
|
|
||||||
let count = views.filter((v) => v.visible).length
|
|
||||||
let op = !views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
|
|
||||||
let _index = 0
|
|
||||||
while (_index < views.length) {
|
|
||||||
if (_index !== index) {
|
|
||||||
views[_index].visible = op === 'hideOthers' ? false : true
|
|
||||||
} else {
|
|
||||||
views[_index].visible = true
|
|
||||||
}
|
|
||||||
_index += 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 顶部菜单相关
|
|
||||||
function renderIcon(icon: any) {
|
|
||||||
return () => {
|
|
||||||
return h(NIcon, null, {
|
|
||||||
default: () => h(icon)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const openMenuOption = [
|
|
||||||
{
|
|
||||||
label: '分享',
|
|
||||||
key: 'share',
|
|
||||||
icon: renderIcon(QrCodeOutline)
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
const handleMenuSelect = (key: string) => {
|
|
||||||
if (key === 'share') {
|
|
||||||
showModal.value = true
|
|
||||||
modalData.value = {
|
|
||||||
component: NQrCode,
|
|
||||||
props: {
|
|
||||||
value: baseUrl,
|
|
||||||
size: 300,
|
|
||||||
errorCorrectionLevel: 'H'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
createView(miaoDirectory, [rootDirectory])
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="view">
|
|
||||||
<div class="view-controler">
|
|
||||||
<n-scrollbar x-scrollable>
|
|
||||||
<div class="tags-container">
|
|
||||||
<transition-group name="tab">
|
|
||||||
<div
|
|
||||||
class="tab"
|
|
||||||
v-for="(view, index) of views"
|
|
||||||
:key="view.uid">
|
|
||||||
<div
|
|
||||||
class="tab-title"
|
|
||||||
@click="handleClickTitle(index)">
|
|
||||||
{{ view.title }}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="tab-point"
|
|
||||||
:style="{ backgroundColor: view.color }"></div>
|
|
||||||
<div class="tab-control">
|
|
||||||
<n-icon
|
|
||||||
class="tag-control-icon icon"
|
|
||||||
@click="view.switchShow()">
|
|
||||||
<EyeOutline
|
|
||||||
v-show="view.visible"
|
|
||||||
class="icon-inner" />
|
|
||||||
<EyeOffOutline
|
|
||||||
v-show="!view.visible"
|
|
||||||
class="icon-inner" />
|
|
||||||
</n-icon>
|
|
||||||
<n-icon
|
|
||||||
class="tag-control-icon icon"
|
|
||||||
@click="
|
|
||||||
createView(
|
|
||||||
view.component,
|
|
||||||
view.currentDirectorys,
|
|
||||||
view.currentFiles,
|
|
||||||
index + 1
|
|
||||||
)
|
|
||||||
">
|
|
||||||
<CopyOutline />
|
|
||||||
</n-icon>
|
|
||||||
<n-icon
|
|
||||||
class="tag-control-icon icon"
|
|
||||||
@click="deleteView(index)">
|
|
||||||
<CloseOutline class="icon-inner" />
|
|
||||||
</n-icon>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</transition-group>
|
|
||||||
</div>
|
|
||||||
</n-scrollbar>
|
|
||||||
<div class="view-controller-menu">
|
|
||||||
<div class="view-controller-menu-item">
|
|
||||||
<n-dropdown
|
|
||||||
trigger="click"
|
|
||||||
:options="openMenuOption"
|
|
||||||
@select="handleMenuSelect">
|
|
||||||
<n-icon class="icon">
|
|
||||||
<EllipsisVertical class="icon-inner" />
|
|
||||||
</n-icon>
|
|
||||||
</n-dropdown>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="view-container">
|
|
||||||
<transition-group name="page">
|
|
||||||
<div
|
|
||||||
class="view-container-item"
|
|
||||||
v-for="(view, index) of views"
|
|
||||||
v-show="view.visible"
|
|
||||||
:key="view.uid">
|
|
||||||
<component
|
|
||||||
:is="view.component"
|
|
||||||
v-model:current-objects="view.currentDirectorys"
|
|
||||||
:id="view.uid"
|
|
||||||
:color="view.color"
|
|
||||||
@exit="deleteView(index)"></component>
|
|
||||||
</div>
|
|
||||||
</transition-group>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 模态框展示,用来显示分享二维码,设置菜单之类的东西 -->
|
|
||||||
<MiaoMask v-model:show="showModal" @click="showModal = false">
|
|
||||||
<component
|
|
||||||
@click="(e:any) => e.stopPropagation()"
|
|
||||||
:is="modalData?.component"
|
|
||||||
v-bind="modalData?.props"></component>
|
|
||||||
</MiaoMask>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
$controler-height: 25px;
|
|
||||||
$tag-width: 170px;
|
|
||||||
|
|
||||||
.view {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.view-controler {
|
|
||||||
display: flex;
|
|
||||||
height: $controler-height;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #dadada;
|
|
||||||
// overflow: hidden;
|
|
||||||
|
|
||||||
.tags-container {
|
|
||||||
display: flex;
|
|
||||||
margin-left: 5px;
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
// overflow-x: scroll;
|
|
||||||
.tab {
|
|
||||||
position: relative;
|
|
||||||
width: $tag-width;
|
|
||||||
margin: 0 5px;
|
|
||||||
// flex: 1;
|
|
||||||
display: flex;
|
|
||||||
border-radius: 5px 5px 0 0;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.tab-title {
|
|
||||||
margin-left: 4px;
|
|
||||||
// width: 70%;
|
|
||||||
user-select: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-point {
|
|
||||||
height: 5px;
|
|
||||||
aspect-ratio: 1;
|
|
||||||
border-radius: 66px;
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-control {
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.tab-control-icon:not(:last-child) {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:last-child)::after {
|
|
||||||
content: '';
|
|
||||||
height: calc($controler-height * 0.6);
|
|
||||||
width: 1px;
|
|
||||||
border-right: 1px solid black;
|
|
||||||
position: absolute;
|
|
||||||
right: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-controller-menu {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 5px;
|
|
||||||
|
|
||||||
.view-controller-menu-item {
|
|
||||||
height: 100%;
|
|
||||||
aspect-ratio: 1;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
height: calc($controler-height * 0.6);
|
|
||||||
width: 1px;
|
|
||||||
border-right: 1px solid black;
|
|
||||||
position: absolute;
|
|
||||||
left: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
height: calc($controler-height * 0.7);
|
|
||||||
width: calc($controler-height * 0.7);
|
|
||||||
border-radius: 5px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: rgba(128, 128, 128, 0);
|
|
||||||
transition: background-color 0.3s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: rgba(128, 128, 128, 0.4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-container {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
// flex-direction: column;
|
|
||||||
height: calc(100% - $controler-height);
|
|
||||||
overflow-y: overlay;
|
|
||||||
overflow-x: overlay;
|
|
||||||
|
|
||||||
.view-container-item {
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
position: absolute;
|
|
||||||
width: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 滚动条轨道
|
|
||||||
&::-webkit-scrollbar-track {
|
|
||||||
// background: rgb(239, 239, 239);
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 小滑块
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
background: #e0e0e0;
|
|
||||||
// border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: #999999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// transition动画相关
|
|
||||||
.view {
|
|
||||||
.view-controler {
|
|
||||||
.tags-container {
|
|
||||||
.tab-move,
|
|
||||||
.tab-enter-active {
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-leave-active {
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-enter-from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-30px);
|
|
||||||
}
|
|
||||||
|
|
||||||
// .tab-leave-to {
|
|
||||||
// opacity: 0;
|
|
||||||
// transform: translateY(-80px) translateX(calc($tag-width + 10px));
|
|
||||||
// }
|
|
||||||
|
|
||||||
.tab-leave-active {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// .view-container {
|
|
||||||
// .page-move {
|
|
||||||
// transition: all 0.2s ease;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .page-enter-active {
|
|
||||||
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .page-leave-active {
|
|
||||||
// transition: none;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .page-enter-from {
|
|
||||||
// opacity: 0;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .page-leave-active {
|
|
||||||
// position: absolute;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,165 +0,0 @@
|
|||||||
import generateId from "@/hooks/generateId";
|
|
||||||
import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
|
|
||||||
import VirtualDirectory from "./VirtualDirectory";
|
|
||||||
|
|
||||||
const miaoFetchApi = useMiaoFetchApi();
|
|
||||||
|
|
||||||
export class UploadQueueItem {
|
|
||||||
constructor(
|
|
||||||
file: File,
|
|
||||||
targetDirectory: VirtualDirectory,
|
|
||||||
config?: {
|
|
||||||
onSuccess?: () => void;
|
|
||||||
onFailed?: () => void;
|
|
||||||
}
|
|
||||||
) {
|
|
||||||
this.file = file;
|
|
||||||
this.targetDirectory = targetDirectory;
|
|
||||||
this.uid = generateId();
|
|
||||||
this.status = "waiting";
|
|
||||||
this.process = 0;
|
|
||||||
this.onSuccess = config && config.onSuccess;
|
|
||||||
this.onFailed = config && config.onFailed;
|
|
||||||
}
|
|
||||||
uid: number;
|
|
||||||
file: File;
|
|
||||||
targetDirectory: VirtualDirectory;
|
|
||||||
status: "waiting" | "uploading" | "success" | "failed";
|
|
||||||
process: number;
|
|
||||||
failedReason: unknown | undefined;
|
|
||||||
|
|
||||||
onSuccess?: () => void;
|
|
||||||
onFailed?: () => void;
|
|
||||||
|
|
||||||
_abort: (() => void | undefined) | undefined;
|
|
||||||
_status: Promise<any> | undefined;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 开始上传文件
|
|
||||||
*/
|
|
||||||
startUpload() {
|
|
||||||
if (this.status === "uploading") {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const { abort, response } = miaoFetchApi.upload(this.file, this.targetDirectory, {
|
|
||||||
onProcess: percent => {
|
|
||||||
this.process = percent;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this._abort = abort;
|
|
||||||
this._status = response;
|
|
||||||
this.status = "uploading";
|
|
||||||
response
|
|
||||||
.then(() => {
|
|
||||||
this.status = "success";
|
|
||||||
this.onSuccess && this.onSuccess();
|
|
||||||
this._abort = undefined;
|
|
||||||
this._status = undefined;
|
|
||||||
})
|
|
||||||
.catch(e => {
|
|
||||||
this.status = "failed";
|
|
||||||
this.failedReason = e;
|
|
||||||
this.onFailed && this.onFailed();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 终止上传文件
|
|
||||||
*/
|
|
||||||
abortUpload() {
|
|
||||||
this._abort && this._abort();
|
|
||||||
this.status = "failed";
|
|
||||||
this.failedReason = "abort";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class UploadQueue {
|
|
||||||
constructor() {
|
|
||||||
this.uid = generateId();
|
|
||||||
this.queue = [];
|
|
||||||
this.mode = "serial";
|
|
||||||
}
|
|
||||||
uid: number;
|
|
||||||
queue: UploadQueueItem[];
|
|
||||||
current: UploadQueueItem | undefined;
|
|
||||||
|
|
||||||
// 未来再去实现,目前就是串行的
|
|
||||||
// 好像也不用去实现
|
|
||||||
mode: "serial" | "parallel";
|
|
||||||
get status() {
|
|
||||||
for (let item of this.queue) {
|
|
||||||
if (item.status === "uploading") {
|
|
||||||
return "busy";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return "free";
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取下一个需要被上传的item
|
|
||||||
*/
|
|
||||||
get nextUplpadItem() {
|
|
||||||
for (let item of this.queue) {
|
|
||||||
if (item.status === "waiting") {
|
|
||||||
return item;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 开始串行的上传循环
|
|
||||||
*/
|
|
||||||
loop() {
|
|
||||||
if (this.status === "busy") {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (this.nextUplpadItem) {
|
|
||||||
this.nextUplpadItem.startUpload();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 向上传文件队列输送一批新的文件
|
|
||||||
* @param {any} files 需要上传的文件
|
|
||||||
* @param {any} targetDirectory 目标文件夹
|
|
||||||
* @param {any} option 每个文件上传完成以后都会触发一遍的回调函数
|
|
||||||
* @returns {any}
|
|
||||||
*/
|
|
||||||
push(
|
|
||||||
files: File[],
|
|
||||||
targetDirectory: VirtualDirectory,
|
|
||||||
option?: {
|
|
||||||
/**
|
|
||||||
* 每个文件上传完成以后都会触发一遍的回调函数
|
|
||||||
*/
|
|
||||||
onFinish?: () => void;
|
|
||||||
/**
|
|
||||||
* 是否立即开始上传,若否则按队列顺序一个一个上传
|
|
||||||
*/
|
|
||||||
immediately?: boolean;
|
|
||||||
}
|
|
||||||
) {
|
|
||||||
const onFinish = option?.onFinish;
|
|
||||||
const immediately = option?.immediately ?? false;
|
|
||||||
const uploadQueue = files.map(file => {
|
|
||||||
return new UploadQueueItem(file, targetDirectory, {
|
|
||||||
onSuccess: () => {
|
|
||||||
this.loop();
|
|
||||||
onFinish && onFinish();
|
|
||||||
},
|
|
||||||
onFailed: () => {
|
|
||||||
this.loop();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
this.queue.push(...uploadQueue);
|
|
||||||
if (!immediately) {
|
|
||||||
this.loop();
|
|
||||||
} else {
|
|
||||||
uploadQueue.forEach(item => {
|
|
||||||
item.startUpload();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return uploadQueue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,144 +0,0 @@
|
|||||||
import generateId from "@/hooks/generateId";
|
|
||||||
import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
|
|
||||||
// import { debounce } from "lodash";
|
|
||||||
import type { stats, file, directory } from "@/types/type.ts";
|
|
||||||
|
|
||||||
const miaoFetchApi = useMiaoFetchApi();
|
|
||||||
|
|
||||||
export class VirtualFile {
|
|
||||||
constructor(info: file, parent: VirtualDirectory) {
|
|
||||||
this.name = info.name;
|
|
||||||
this.size = info.size;
|
|
||||||
this.stats = info.stats;
|
|
||||||
this.parent = parent;
|
|
||||||
this.type = "file";
|
|
||||||
this.uid = generateId();
|
|
||||||
}
|
|
||||||
name: string;
|
|
||||||
type: "file";
|
|
||||||
size: number;
|
|
||||||
stats: stats;
|
|
||||||
parent: VirtualDirectory;
|
|
||||||
uid: number;
|
|
||||||
get path() {
|
|
||||||
return `${this.parent.path}${this.name}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class VirtualDirectory {
|
|
||||||
constructor(info: directory, parent?: VirtualDirectory) {
|
|
||||||
this.name = info.name;
|
|
||||||
this.type = "directory";
|
|
||||||
this.stats = info.stats;
|
|
||||||
this.parent = parent ?? undefined;
|
|
||||||
this.uid = generateId();
|
|
||||||
}
|
|
||||||
// 文件夹名
|
|
||||||
name: string;
|
|
||||||
// 子文件
|
|
||||||
files?: VirtualFile[];
|
|
||||||
// 子目录
|
|
||||||
directorys?: VirtualDirectory[];
|
|
||||||
// 没啥意义,标注一下就是了
|
|
||||||
type: "directory";
|
|
||||||
// 文件夹创建时间等杂项属性
|
|
||||||
stats: stats;
|
|
||||||
// 父文件夹
|
|
||||||
parent?: VirtualDirectory;
|
|
||||||
|
|
||||||
uid: number;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取相对于根目录的路径的层数
|
|
||||||
* 用于目录下文件定位
|
|
||||||
* @returns {string}
|
|
||||||
*/
|
|
||||||
get layer(): number {
|
|
||||||
return this.parent ? this.parent.layer + 1 : 0;
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* 相对于根目录的路径, 如: "/", "/123/321/"
|
|
||||||
* 用于目录下文件定位
|
|
||||||
* @returns {string}
|
|
||||||
*/
|
|
||||||
get path(): string {
|
|
||||||
if (!this.parent) {
|
|
||||||
return "/";
|
|
||||||
}
|
|
||||||
return `${this.parent.path}${this.name}/`;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取从根目录开始的按顺序的文件夹
|
|
||||||
* @returns {VirtualDirectory[]}
|
|
||||||
*/
|
|
||||||
get getParents(): VirtualDirectory[] {
|
|
||||||
if (!this.parent) {
|
|
||||||
return [this];
|
|
||||||
}
|
|
||||||
return [...this.parent.getParents, this];
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取 layer 级父文件夹, 如getParent(1)就返回父级
|
|
||||||
* @param {number} layer 需要跳转的层数
|
|
||||||
* @returns {VirtualDirectory}
|
|
||||||
*/
|
|
||||||
getParent(layer: number): VirtualDirectory {
|
|
||||||
if (layer <= 0 || !this.parent) {
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
return this.parent.getParent(layer - 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
updateContent(content: (file | directory)[]) {
|
|
||||||
this.files = this.files ?? [];
|
|
||||||
this.directorys = this.directorys ?? [];
|
|
||||||
const fileNames: string[] = this.files.map(v => v.name);
|
|
||||||
const dirNames: string[] = this.directorys.map(v => v.name);
|
|
||||||
const itemNames: string[] = content.map(v => v.name);
|
|
||||||
// 删去远程端已不存在的文件与文件夹
|
|
||||||
const _delete = (target: (VirtualFile | VirtualDirectory)[]) => {
|
|
||||||
let index = 0;
|
|
||||||
while (index < target.length) {
|
|
||||||
if (!itemNames.includes(target[index].name)) {
|
|
||||||
target.splice(index, 1);
|
|
||||||
} else {
|
|
||||||
index += 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
_delete(this.files);
|
|
||||||
_delete(this.directorys);
|
|
||||||
// 加入新的文件与文件夹
|
|
||||||
for (let item of content) {
|
|
||||||
if (item.type === "file") {
|
|
||||||
if (!fileNames.includes(item.name)) {
|
|
||||||
this.files.push(new VirtualFile(item, this));
|
|
||||||
}
|
|
||||||
} else if (item.type === "directory") {
|
|
||||||
if (!dirNames.includes(item.name)) {
|
|
||||||
this.directorys.push(new VirtualDirectory(item, this));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
hasChild(item: VirtualDirectory | VirtualFile): boolean {
|
|
||||||
if (item.type === "directory") {
|
|
||||||
return this.directorys?.includes(item) ?? false;
|
|
||||||
} else {
|
|
||||||
return this.files?.includes(item) ?? false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 调用后重新向远端拉取文件夹信息并进行更新
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
async update(): Promise<void> {
|
|
||||||
const data: (file | directory)[] = await miaoFetchApi.get(this);
|
|
||||||
this.updateContent(data);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export default VirtualDirectory;
|
|
||||||
@@ -1,63 +0,0 @@
|
|||||||
import { shallowRef } from "vue";
|
|
||||||
import VirtualDirectory, { VirtualFile } from "./VirtualDirectory";
|
|
||||||
import generateId from "@/hooks/generateId";
|
|
||||||
|
|
||||||
const getRandomWebSafeColor = (() => {
|
|
||||||
const webSafeColors = ["#009900", "#999900", "#009999", "#990099", "#0000ee"];
|
|
||||||
let counter = 0;
|
|
||||||
return () => {
|
|
||||||
const color = webSafeColors[counter % webSafeColors.length];
|
|
||||||
counter += 1;
|
|
||||||
return color;
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
|
|
||||||
export default class VirtualPage {
|
|
||||||
constructor(component: any, initObjects?:{ directorys?: VirtualDirectory[], files?: VirtualFile[]}) {
|
|
||||||
this.component = shallowRef(component);
|
|
||||||
this.currentDirectorys = initObjects?.directorys ?? [];
|
|
||||||
this.currentFiles = initObjects?.files ?? [];
|
|
||||||
this.visible = true;
|
|
||||||
this.uid = generateId();
|
|
||||||
this.refreshKey = Math.random();
|
|
||||||
this.color = getRandomWebSafeColor();
|
|
||||||
}
|
|
||||||
// 页面使用的组件
|
|
||||||
component: any;
|
|
||||||
// 是否可见
|
|
||||||
visible: boolean;
|
|
||||||
// 当前正在使用的文件夹
|
|
||||||
currentDirectorys: VirtualDirectory[];
|
|
||||||
// 当前正在使用的文件
|
|
||||||
currentFiles: VirtualFile[];
|
|
||||||
// 区分每一个页面的唯一id
|
|
||||||
uid: number;
|
|
||||||
// 当refreshKey改变时需要刷新页面,目前还没接入刷新
|
|
||||||
refreshKey: number;
|
|
||||||
// 为了区分,每个虚拟页面都会分配一个color,这个color会体现在tab上
|
|
||||||
color: string;
|
|
||||||
// 用于展示的title
|
|
||||||
_title?: string;
|
|
||||||
|
|
||||||
get title() {
|
|
||||||
if (this._title) {
|
|
||||||
return this._title;
|
|
||||||
}
|
|
||||||
return this.currentDirectorys[0].name;
|
|
||||||
}
|
|
||||||
|
|
||||||
setTitle(title: string) {
|
|
||||||
this._title = title;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 切换显示状态
|
|
||||||
switchShow() {
|
|
||||||
this.visible = !this.visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 刷新,不过好像没有用得到的时候吧
|
|
||||||
// 事实上也不应该用得到,因为更新应该是响应式的
|
|
||||||
refresh() {
|
|
||||||
this.refreshKey = Math.random();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,89 +0,0 @@
|
|||||||
<!-- 基于naiveui的下拉菜单实现的自定义下拉菜单 -->
|
|
||||||
<!-- 支持长按和右键呼出下拉菜单 -->
|
|
||||||
<template>
|
|
||||||
<div class="main" @contextmenu="handleContextMenu" @mouseleave="handleMainMouseLeave" @touchstart="handleTouchStart"
|
|
||||||
@touchend="handleTouchEnd">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
<n-dropdown placement="bottom-start" trigger="manual" :x="x" :y="y" :options="props.options"
|
|
||||||
:show="showContextMenu > 0" :on-clickoutside="onClickoutside" @select="handleSelect" @mouseleave="
|
|
||||||
showContextMenu -= 1" @mouseenter="showContextMenu += 1" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { NDropdown } from 'naive-ui/es/dropdown';
|
|
||||||
import { DropdownOption } from 'naive-ui/es/dropdown';
|
|
||||||
import { nextTick, ref } from 'vue';
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
options: DropdownOption[]
|
|
||||||
// 长按呼出右键菜单的时延,undefined时不生效
|
|
||||||
touchTimeOut?: number
|
|
||||||
}>()
|
|
||||||
const emit = defineEmits<{
|
|
||||||
select: [key: string]
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const x = ref(0)
|
|
||||||
const y = ref(0)
|
|
||||||
const showContextMenu = ref(0)
|
|
||||||
// 长按计时器
|
|
||||||
let timer_touch: string | number | NodeJS.Timeout | undefined
|
|
||||||
|
|
||||||
const onClickoutside = async () => {
|
|
||||||
showContextMenu.value = 0
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleMainMouseLeave = async () => {
|
|
||||||
setTimeout(() => {
|
|
||||||
showContextMenu.value -= 1
|
|
||||||
}, 20)
|
|
||||||
// nextTick(()=>{
|
|
||||||
// showContextMenu.value -= 1
|
|
||||||
// })
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSelect = async (key: string) => {
|
|
||||||
emit('select', key)
|
|
||||||
showContextMenu.value = 0
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleContextMenu = (e: MouseEvent) => {
|
|
||||||
e.preventDefault()
|
|
||||||
showContextMenu.value = 0
|
|
||||||
nextTick().then(() => {
|
|
||||||
showContextMenu.value += 1
|
|
||||||
x.value = e.clientX
|
|
||||||
y.value = e.clientY
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleTouchStart = (e: TouchEvent) => {
|
|
||||||
if(props.touchTimeOut === undefined) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
timer_touch ?? clearTimeout(timer_touch)
|
|
||||||
timer_touch = setTimeout(() => {
|
|
||||||
showContextMenu.value = 1
|
|
||||||
x.value = e.targetTouches[0].clientX
|
|
||||||
y.value = e.targetTouches[0].clientY
|
|
||||||
}, props.touchTimeOut)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleTouchEnd = () => {
|
|
||||||
if(timer_touch) {
|
|
||||||
clearTimeout(timer_touch)
|
|
||||||
timer_touch = undefined
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.main {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,315 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
|
|
||||||
<miaoContextMenu :options="dropDownOptions" :touch-time-out="500" @select="handleDropdownSelect">
|
|
||||||
<div class="item-main" :class="props.selected ? 'item-main-selected' : ''" ref="mainRef">
|
|
||||||
<div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
|
|
||||||
<Icon class="item-main-icon" v-show="clientWidth > 250"></Icon>
|
|
||||||
<div class="item-main-info">
|
|
||||||
<div class="item-main-info-name">
|
|
||||||
<Icon class="item-main-info-name-icon" v-show="clientWidth <= 250"></Icon>
|
|
||||||
<n-ellipsis style="max-width: 140px;">{{ name }}</n-ellipsis>
|
|
||||||
</div>
|
|
||||||
<div class="item-main-info-date" v-if="time">
|
|
||||||
{{ time }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 菜单现在通过右键/长按呼出 -->
|
|
||||||
<!-- <n-dropdown trigger="click" :options="dropDownOptions" @select="handleDropdownSelect">
|
|
||||||
<div class="item-main-option" @click="(e) => e.stopPropagation()">
|
|
||||||
<EllipsisVertical class="item-main-option-icon" />
|
|
||||||
</div>
|
|
||||||
</n-dropdown> -->
|
|
||||||
</div>
|
|
||||||
</miaoContextMenu>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
|
||||||
import miaoContextMenu from '../miaoContextMenu.vue'
|
|
||||||
import {
|
|
||||||
DocumentText,
|
|
||||||
FileTray,
|
|
||||||
Help,
|
|
||||||
Image,
|
|
||||||
LogoChrome,
|
|
||||||
LogoCss3,
|
|
||||||
LogoJavascript,
|
|
||||||
LogoVue,
|
|
||||||
PlayCircle,
|
|
||||||
Disc
|
|
||||||
} from '@vicons/ionicons5'
|
|
||||||
import { computed, onMounted, ref } from 'vue'
|
|
||||||
import dateFormatter from '@/hooks/dateFormatter'
|
|
||||||
import { NEllipsis } from 'naive-ui'
|
|
||||||
// import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
|
||||||
|
|
||||||
// const miaoFetchApi = useMiaoFetchApi()
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
item: VirtualDirectory | VirtualFile
|
|
||||||
name?: string
|
|
||||||
color: string
|
|
||||||
selected: boolean
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
download: []
|
|
||||||
delete: []
|
|
||||||
rename: []
|
|
||||||
dragStart: [event: DragEvent, item: VirtualDirectory | VirtualFile]
|
|
||||||
onSelected: []
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const itemType = ref<'file' | 'directory'>(props.item.type)
|
|
||||||
|
|
||||||
const mainRef = ref<HTMLDivElement>()
|
|
||||||
|
|
||||||
// 使用ResizeObserver实现
|
|
||||||
const clientWidth = ref<number>(666)
|
|
||||||
|
|
||||||
const name = props.name ?? props.item.name
|
|
||||||
|
|
||||||
const time = computed(() => {
|
|
||||||
return dateFormatter(
|
|
||||||
new Date(props.item.stats.mtimeMs),
|
|
||||||
'yyyy-MM-dd hh:mm:ss'
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
const dropDownOptions = computed(() => {
|
|
||||||
const options = [
|
|
||||||
{
|
|
||||||
label: '重命名',
|
|
||||||
key: 'rename'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '删除',
|
|
||||||
key: 'delete'
|
|
||||||
},
|
|
||||||
]
|
|
||||||
if (itemType.value === 'file') {
|
|
||||||
options.push(
|
|
||||||
...[
|
|
||||||
{
|
|
||||||
label: '下载',
|
|
||||||
key: 'download'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
)
|
|
||||||
}
|
|
||||||
if (props.selected === false) {
|
|
||||||
options.push(
|
|
||||||
...[
|
|
||||||
{
|
|
||||||
label: '多选:选择',
|
|
||||||
key: 'select'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
options.push(
|
|
||||||
...[
|
|
||||||
{
|
|
||||||
label: '多选:取消',
|
|
||||||
key: 'select'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
)
|
|
||||||
}
|
|
||||||
return options
|
|
||||||
})
|
|
||||||
|
|
||||||
// 是不是可以直接在这里面实现?
|
|
||||||
const handleDropdownSelect = (key: string) => {
|
|
||||||
if (key === 'rename') {
|
|
||||||
emit('rename')
|
|
||||||
} else if (key === 'download') {
|
|
||||||
emit('download')
|
|
||||||
} else if (key === 'delete') {
|
|
||||||
emit('delete')
|
|
||||||
} else if (key === 'select') {
|
|
||||||
emit('onSelected')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const Icon = computed(() => {
|
|
||||||
try {
|
|
||||||
if (props.item.type === 'directory') {
|
|
||||||
return FileTray
|
|
||||||
} else if (props.item.type === 'file') {
|
|
||||||
const aft = props.item.name.split('.').at(-1)?.toLowerCase()
|
|
||||||
if (!aft) {
|
|
||||||
throw 1
|
|
||||||
} else if (
|
|
||||||
['txt', 'doc', 'docs', 'docx', 'xls', 'xlsx'].includes(aft)
|
|
||||||
) {
|
|
||||||
return DocumentText
|
|
||||||
} else if (
|
|
||||||
['mp3', 'wav', 'ape', 'acc', 'ogg', 'flac'].includes(aft)
|
|
||||||
) {
|
|
||||||
return Disc
|
|
||||||
} else if (
|
|
||||||
[
|
|
||||||
'.xbm',
|
|
||||||
'.tif',
|
|
||||||
'pjp',
|
|
||||||
'.svgz',
|
|
||||||
'jpg',
|
|
||||||
'jpeg',
|
|
||||||
'ico',
|
|
||||||
'tiff',
|
|
||||||
'.gif',
|
|
||||||
'svg',
|
|
||||||
'.jfif',
|
|
||||||
'.webp',
|
|
||||||
'.png',
|
|
||||||
'.bmp',
|
|
||||||
'pjpeg',
|
|
||||||
'.avif'
|
|
||||||
].includes(aft)
|
|
||||||
) {
|
|
||||||
return Image
|
|
||||||
} else if (['mp4', 'm2v', 'mkv'].includes(aft)) {
|
|
||||||
return PlayCircle
|
|
||||||
} else if (['js', 'jsx', 'ts', 'tsx'].includes(aft)) {
|
|
||||||
return LogoJavascript
|
|
||||||
} else if (['html'].includes(aft)) {
|
|
||||||
return LogoChrome
|
|
||||||
} else if (['css', 'scss', 'less'].includes(aft)) {
|
|
||||||
return LogoCss3
|
|
||||||
} else if (['vue'].includes(aft)) {
|
|
||||||
return LogoVue
|
|
||||||
}
|
|
||||||
return DocumentText
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
return Help
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const itemRef = ref()
|
|
||||||
|
|
||||||
const handleDragStart = (event: DragEvent) => {
|
|
||||||
emit('dragStart', event, props.item)
|
|
||||||
// dataBus.set('dragData', [props.item])
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
const observer = new ResizeObserver(entries => {
|
|
||||||
for (let entry of entries) {
|
|
||||||
clientWidth.value = entry.contentRect.width;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (mainRef.value) {
|
|
||||||
observer.observe(mainRef.value);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.miao-item {
|
|
||||||
cursor: pointer;
|
|
||||||
width: calc(100% - 20px);
|
|
||||||
min-width: 170px;
|
|
||||||
// aspect-ratio: 66/9;
|
|
||||||
height: 50px;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin: 10px 10px;
|
|
||||||
|
|
||||||
.item-main {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 95%;
|
|
||||||
background-color: rgb(255, 255, 255);
|
|
||||||
border-radius: 7px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
transition: background-color 0.3s ease;
|
|
||||||
|
|
||||||
.item-main-front {
|
|
||||||
height: 100%;
|
|
||||||
width: 10px;
|
|
||||||
border-radius: 7px 0 0 7px;
|
|
||||||
background-color: rgb(0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-main-icon {
|
|
||||||
margin-left: 10px;
|
|
||||||
height: 80%;
|
|
||||||
color: #00403e;
|
|
||||||
transition: color 0.15s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-main-info {
|
|
||||||
margin-left: 10px;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
&-name {
|
|
||||||
position: relative;
|
|
||||||
user-select: none;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 3px;
|
|
||||||
|
|
||||||
&-icon {
|
|
||||||
color: #00403e;
|
|
||||||
width: 20px;
|
|
||||||
margin-right: 5px;
|
|
||||||
transition: color 0.15s ease-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-date {
|
|
||||||
user-select: none;
|
|
||||||
font-size: small;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-main-option {
|
|
||||||
height: 100%;
|
|
||||||
width: 20px;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
border-radius: 0 7px 7px 0;
|
|
||||||
background-color: rgba(0, 0, 0, 0);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
transition: background-color 0.3s;
|
|
||||||
|
|
||||||
.item-main-option-icon {
|
|
||||||
color: #000;
|
|
||||||
transition: color 0.15s;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:active {
|
|
||||||
background-color: #8b8b8b;
|
|
||||||
|
|
||||||
.item-main-option-icon {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:active {
|
|
||||||
background-color: #d2d2d2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.item-main-selected {
|
|
||||||
background-color: rgba(0, 128, 207, 0.32);
|
|
||||||
&:hover {
|
|
||||||
background-color: rgba(0, 128, 207, 0.64);;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,106 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="container"
|
|
||||||
@dragover="handleDragOver"
|
|
||||||
@dragleave="handleDragLeave"
|
|
||||||
@drop="handleDrop">
|
|
||||||
<slot></slot>
|
|
||||||
<miao-mask v-model:show="showMask"></miao-mask>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import miaoMask from './miaoMask.vue'
|
|
||||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
|
||||||
import config from '@/config'
|
|
||||||
import useDataBus from '@/hooks/useDataBus'
|
|
||||||
|
|
||||||
const dataBus = useDataBus()
|
|
||||||
|
|
||||||
const { uploadSizeLimit } = config
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
onFiles: [files: File[]]
|
|
||||||
onVirtualFiles: [vFiles: VirtualFile[]]
|
|
||||||
onVirtualDirectory: [vDirectory: VirtualDirectory[]]
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const showMask = ref<number>(0)
|
|
||||||
|
|
||||||
// File類型的數據可能爲文件夾,通過FileReader進行判斷
|
|
||||||
const isFile = (file: File) =>
|
|
||||||
new Promise((resolve) => {
|
|
||||||
const reader = new FileReader()
|
|
||||||
reader.onload = () => {
|
|
||||||
resolve(true)
|
|
||||||
reader.abort()
|
|
||||||
}
|
|
||||||
reader.onerror = () => {
|
|
||||||
resolve(false)
|
|
||||||
reader.abort()
|
|
||||||
}
|
|
||||||
reader.readAsText(file)
|
|
||||||
})
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 只保留文件,移去文件夹
|
|
||||||
* @param {File[]} files
|
|
||||||
*/
|
|
||||||
const removeDirectory = async (files: File[]) => {
|
|
||||||
let index = 0
|
|
||||||
while (index < files.length) {
|
|
||||||
const currentFile = files[index]
|
|
||||||
const _isFile = await isFile(currentFile)
|
|
||||||
if (_isFile) {
|
|
||||||
index += 1
|
|
||||||
continue
|
|
||||||
} else {
|
|
||||||
files.splice(index, 1)
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDragOver = async (event: DragEvent) => {
|
|
||||||
showMask.value += 1
|
|
||||||
event.preventDefault()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDragLeave = async () => {
|
|
||||||
showMask.value = 0
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDrop = async (event: DragEvent) => {
|
|
||||||
showMask.value = 0
|
|
||||||
event.preventDefault()
|
|
||||||
event.stopPropagation()
|
|
||||||
// todo: uploadSize的限制不應該在這裏
|
|
||||||
const files = [...(event.dataTransfer?.files ?? [])].filter(
|
|
||||||
(file) => file.size < uploadSizeLimit
|
|
||||||
)
|
|
||||||
await removeDirectory(files)
|
|
||||||
const virtualFiles: VirtualFile[] = dataBus.pop('dragData_vFiles')
|
|
||||||
const virtualDirectory: VirtualDirectory[] = dataBus.pop(
|
|
||||||
'dragData_vDirectory'
|
|
||||||
)
|
|
||||||
// console.log({ virtualDirectory, virtualFiles })
|
|
||||||
if (files && files.length) {
|
|
||||||
emit('onFiles', files)
|
|
||||||
}
|
|
||||||
if (virtualFiles && virtualFiles.length) {
|
|
||||||
emit('onVirtualFiles', virtualFiles)
|
|
||||||
}
|
|
||||||
if (virtualDirectory && virtualDirectory.length) {
|
|
||||||
emit('onVirtualDirectory', virtualDirectory)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,55 +0,0 @@
|
|||||||
<template>
|
|
||||||
<transition name="transition">
|
|
||||||
<div class="mask-body" ref="maskBodyRef" v-show="showMask">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</transition>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from 'vue';
|
|
||||||
|
|
||||||
const maskBodyRef = ref<HTMLDivElement>()
|
|
||||||
|
|
||||||
const showMask = defineModel<boolean | number>('show', { default: false, required: true })
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.mask-body {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
|
||||||
z-index: 7058214053994319;
|
|
||||||
|
|
||||||
// &-container {
|
|
||||||
|
|
||||||
// }
|
|
||||||
|
|
||||||
&-show {
|
|
||||||
display: flex;
|
|
||||||
transition: opacity 0.3s 0.01s;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-hide {
|
|
||||||
opacity: 0;
|
|
||||||
transition: display 0.01s 0.3s;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.transition-enter-active,
|
|
||||||
.transition-leave-active {
|
|
||||||
transition: opacity 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.transition-enter-from,
|
|
||||||
.transition-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,83 +0,0 @@
|
|||||||
<template>
|
|
||||||
<miao-mask v-model:show="showMask">
|
|
||||||
<n-card class="popup-card" :title="popupConfig?.title" size="medium">
|
|
||||||
{{ popupConfig?.content }}
|
|
||||||
<n-input class="popup-input" v-model:value="inputValue" type="text" v-bind="popupConfig?.inputProps"
|
|
||||||
v-if="popupConfig?.inputProps" />
|
|
||||||
<div class="popup-button-container">
|
|
||||||
<n-button class="popup-button-container-button" v-for="option in popupConfig?.options" :key="option.label"
|
|
||||||
:type="option.type" @click="_resolve && _resolve(option.key)">{{ option.label }}</n-button>
|
|
||||||
</div>
|
|
||||||
</n-card>
|
|
||||||
</miao-mask>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref, nextTick } from "vue";
|
|
||||||
import { NCard, NInput, NButton } from "naive-ui";
|
|
||||||
import miaoMask from "./miaoMask.vue";
|
|
||||||
import { InputProps } from "naive-ui";
|
|
||||||
|
|
||||||
const showMask = ref(false);
|
|
||||||
const inputValue = ref<string>("");
|
|
||||||
const _resolve = ref()
|
|
||||||
|
|
||||||
type popupConfigType = {
|
|
||||||
title: string
|
|
||||||
content?: string
|
|
||||||
inputValue?: string,
|
|
||||||
inputProps?: InputProps
|
|
||||||
options: {
|
|
||||||
label: string
|
|
||||||
key: unknown
|
|
||||||
type: 'default' | 'tertiary' | 'primary' | 'success' | 'info' | 'warning' | 'error'
|
|
||||||
}[]
|
|
||||||
}
|
|
||||||
|
|
||||||
const popupConfig = ref<popupConfigType>()
|
|
||||||
|
|
||||||
const popup = async (config: popupConfigType) => {
|
|
||||||
popupConfig.value = config
|
|
||||||
inputValue.value = config.inputValue ?? ''
|
|
||||||
showMask.value = true
|
|
||||||
const key = await new Promise((resolve: (key: unknown) => unknown) => {
|
|
||||||
_resolve.value = resolve
|
|
||||||
})
|
|
||||||
const text = inputValue.value
|
|
||||||
showMask.value = false;
|
|
||||||
nextTick(() => {
|
|
||||||
inputValue.value = ''
|
|
||||||
_resolve.value = undefined
|
|
||||||
})
|
|
||||||
return {
|
|
||||||
text,
|
|
||||||
key
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
defineExpose({ popup });
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.popup-card {
|
|
||||||
width: 80%;
|
|
||||||
|
|
||||||
.popup-input {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-button-container {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.popup-button-container-button {
|
|
||||||
margin-top: 3px;
|
|
||||||
&:not(:last-child) {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
const baseUrl = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
|
|
||||||
|
|
||||||
export default {
|
|
||||||
baseUrl,
|
|
||||||
uploadSizeLimit: 1024 * 1024 * 100,
|
|
||||||
api: {
|
|
||||||
get: '/get',
|
|
||||||
upload: '/upload',
|
|
||||||
delete: '/delete',
|
|
||||||
query: '/query',
|
|
||||||
rename: '/rename',
|
|
||||||
mkdir: '/mkdir',
|
|
||||||
cut: '/cut'
|
|
||||||
},
|
|
||||||
enableUpload: true
|
|
||||||
}
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
export default function dateFormatter(date: Date, fmt: string) {
|
|
||||||
var o:any = {
|
|
||||||
"M+": date.getMonth() + 1, //月份
|
|
||||||
"d+": date.getDate(), //日
|
|
||||||
"h+": date.getHours(), //小时
|
|
||||||
"m+": date.getMinutes(), //分
|
|
||||||
"s+": date.getSeconds(), //秒
|
|
||||||
"q+": Math.floor((date.getMonth() + 3) / 3), //季度
|
|
||||||
"S": date.getMilliseconds() //毫秒
|
|
||||||
};
|
|
||||||
if (/(y+)/.test(fmt)) {
|
|
||||||
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
|
|
||||||
}
|
|
||||||
for (var k in o) {
|
|
||||||
if (new RegExp("(" + k + ")").test(fmt)) {
|
|
||||||
fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return fmt;
|
|
||||||
}
|
|
||||||
@@ -1,109 +0,0 @@
|
|||||||
import config from "@/config";
|
|
||||||
|
|
||||||
const { uploadSizeLimit } = config;
|
|
||||||
|
|
||||||
export type dropHandlerHooks = {
|
|
||||||
/**
|
|
||||||
* 仅返回小于config.ts中大小限制的文件,不会返回文件夹
|
|
||||||
*/
|
|
||||||
onDropFiles?: (files: File[]) => void;
|
|
||||||
/**
|
|
||||||
* 当拖动时
|
|
||||||
*/
|
|
||||||
onOver?: () => void;
|
|
||||||
/**
|
|
||||||
* 当进入时
|
|
||||||
*/
|
|
||||||
onEnter?: () => void;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 当离开时
|
|
||||||
*/
|
|
||||||
onLeave?: () => void;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 离开或是放下时都会触发
|
|
||||||
* @returns {any}
|
|
||||||
*/
|
|
||||||
onEnd?: () => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
const isFile = (file: File) =>
|
|
||||||
new Promise(resolve => {
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onload = () => {
|
|
||||||
resolve(true);
|
|
||||||
reader.abort();
|
|
||||||
};
|
|
||||||
reader.onerror = () => {
|
|
||||||
resolve(false);
|
|
||||||
reader.abort();
|
|
||||||
};
|
|
||||||
reader.readAsText(file);
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 只保留文件,移去文件夹
|
|
||||||
* @param {File[]} files
|
|
||||||
*/
|
|
||||||
const filesFilter = async (files: File[]) => {
|
|
||||||
let index = 0;
|
|
||||||
while (index < files.length) {
|
|
||||||
const currentFile = files[index];
|
|
||||||
const _isFile = await isFile(currentFile);
|
|
||||||
if (_isFile) {
|
|
||||||
index += 1;
|
|
||||||
continue;
|
|
||||||
} else {
|
|
||||||
files.splice(index, 1);
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function dropHandler(dom: HTMLDivElement, hooks?: dropHandlerHooks) {
|
|
||||||
dom.addEventListener(
|
|
||||||
"dragenter",
|
|
||||||
function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
hooks?.onEnter && hooks?.onEnter();
|
|
||||||
},
|
|
||||||
false
|
|
||||||
);
|
|
||||||
|
|
||||||
dom.addEventListener(
|
|
||||||
"dragover",
|
|
||||||
function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
hooks?.onOver && hooks?.onOver();
|
|
||||||
},
|
|
||||||
false
|
|
||||||
);
|
|
||||||
|
|
||||||
dom.addEventListener(
|
|
||||||
"dragleave",
|
|
||||||
function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
hooks?.onLeave && hooks?.onLeave();
|
|
||||||
hooks?.onEnd && hooks.onEnd();
|
|
||||||
},
|
|
||||||
false
|
|
||||||
);
|
|
||||||
|
|
||||||
dom.addEventListener(
|
|
||||||
"drop",
|
|
||||||
async function (e) {
|
|
||||||
// console.log(e, e.dataTransfer?.types);
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
const files = [...(e.dataTransfer?.files ?? [])].filter(file => file.size < uploadSizeLimit);
|
|
||||||
await filesFilter(files);
|
|
||||||
hooks?.onDropFiles && hooks.onDropFiles(files);
|
|
||||||
hooks?.onEnd && hooks.onEnd();
|
|
||||||
},
|
|
||||||
false
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
const idList: number[] = [];
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 生成一个唯一的id
|
|
||||||
* @param {any} length 生成id的长度
|
|
||||||
* @returns {number}
|
|
||||||
*/
|
|
||||||
export default function generateId(length?: number) {
|
|
||||||
length || (length = 16);
|
|
||||||
let id;
|
|
||||||
while (!id || idList.includes(id)) {
|
|
||||||
id = Math.ceil(Math.random() * 10 ** 16);
|
|
||||||
}
|
|
||||||
idList.push(id)
|
|
||||||
return id
|
|
||||||
}
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
export const filePicker = (() => {
|
|
||||||
let _resolve: ((files: File[]) => void) | undefined;
|
|
||||||
return (option?: { accept?: "string"; multiple: boolean }) => {
|
|
||||||
if (_resolve) {
|
|
||||||
_resolve([]);
|
|
||||||
_resolve = undefined;
|
|
||||||
}
|
|
||||||
return new Promise<File[]>(resolve => {
|
|
||||||
const inpEle = document.createElement("input");
|
|
||||||
inpEle.id = `__file_${Math.ceil(Math.random() * 100000000)}`;
|
|
||||||
inpEle.type = "file";
|
|
||||||
inpEle.style.display = "none";
|
|
||||||
_resolve = resolve;
|
|
||||||
// 文件类型限制
|
|
||||||
// inpEle.accept="image/*"
|
|
||||||
option?.accept && (inpEle.accept = option?.accept);
|
|
||||||
// 多选限制
|
|
||||||
option?.multiple && (inpEle.multiple = option?.multiple);
|
|
||||||
// inpEle.addEventListener("change", event => fn.call(inpEle, event, inpEle.files), { once: true });
|
|
||||||
inpEle.addEventListener(
|
|
||||||
"change",
|
|
||||||
() => {
|
|
||||||
if (!inpEle.files) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const files: File[] = [];
|
|
||||||
let i = 0;
|
|
||||||
while (i < inpEle.files?.length) {
|
|
||||||
const _file = inpEle?.files?.item(i);
|
|
||||||
if (_file !== null) {
|
|
||||||
files.push(_file);
|
|
||||||
}
|
|
||||||
i += 1;
|
|
||||||
}
|
|
||||||
resolve(files);
|
|
||||||
_resolve = undefined
|
|
||||||
},
|
|
||||||
{ once: true }
|
|
||||||
);
|
|
||||||
inpEle.click();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
|
|
||||||
export default {
|
|
||||||
filePicker
|
|
||||||
};
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
import { reactive } from "vue";
|
|
||||||
|
|
||||||
let dataStorage: {
|
|
||||||
[key: string | number] : any
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function useDataBus() {
|
|
||||||
if(dataStorage === undefined) {
|
|
||||||
dataStorage = reactive({})
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
set(key: string | number, value: any) {
|
|
||||||
dataStorage[key] = value;
|
|
||||||
return value;
|
|
||||||
},
|
|
||||||
pop(key: string | number) {
|
|
||||||
const value = dataStorage[key];
|
|
||||||
dataStorage[key] = undefined;
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -1,266 +0,0 @@
|
|||||||
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
|
|
||||||
return {
|
|
||||||
miaoFetch: async (config: AxiosRequestConfig<any>) => {
|
|
||||||
let counter = 0
|
|
||||||
let response: any
|
|
||||||
let errList = []
|
|
||||||
while (flag && counter <= retry) {
|
|
||||||
try {
|
|
||||||
response = await axios({
|
|
||||||
...config,
|
|
||||||
signal: controller.signal
|
|
||||||
})
|
|
||||||
return response
|
|
||||||
} catch (_e) {
|
|
||||||
errList.push(_e)
|
|
||||||
counter += 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
throw errList
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 强制终止miaoFetch
|
|
||||||
*/
|
|
||||||
abortMiaoFetch: () => {
|
|
||||||
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
|
|
||||||
|
|
||||||
const { miaoFetch } = useMiaoFetch({
|
|
||||||
retry
|
|
||||||
})
|
|
||||||
const response = await miaoFetch({
|
|
||||||
url
|
|
||||||
})
|
|
||||||
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 { miaoFetch, abortMiaoFetch } = useMiaoFetch({
|
|
||||||
retry
|
|
||||||
})
|
|
||||||
const sizeTotal = data.size
|
|
||||||
|
|
||||||
const opType = option?.type ?? 'write'
|
|
||||||
|
|
||||||
const formData = new FormData()
|
|
||||||
|
|
||||||
formData.append('file', data)
|
|
||||||
// 必须这样传,不然中文乱码
|
|
||||||
formData.append('fileName', data.name)
|
|
||||||
formData.append('operateType', opType)
|
|
||||||
|
|
||||||
return {
|
|
||||||
abort: () => abortMiaoFetch(),
|
|
||||||
response: new Promise<{
|
|
||||||
message: 'success' | 'failed'
|
|
||||||
error?: string
|
|
||||||
}>(async (resolve) => {
|
|
||||||
const response = await miaoFetch({
|
|
||||||
url,
|
|
||||||
method: 'post',
|
|
||||||
data: formData,
|
|
||||||
onUploadProgress(progressEvent) {
|
|
||||||
option &&
|
|
||||||
option.onProcess &&
|
|
||||||
option.onProcess(progressEvent.loaded / sizeTotal)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
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 { miaoFetch } = useMiaoFetch({
|
|
||||||
retry
|
|
||||||
})
|
|
||||||
|
|
||||||
return {
|
|
||||||
response: new Promise<{
|
|
||||||
eventId: number
|
|
||||||
}>(async (resolve) => {
|
|
||||||
const response = await miaoFetch({
|
|
||||||
url,
|
|
||||||
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
|
|
||||||
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() {
|
|
||||||
return miaoFetchApi
|
|
||||||
}
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
import UploadQueue from "@/class/UploadQueue";
|
|
||||||
import { reactive } from "vue";
|
|
||||||
|
|
||||||
let uploadQueue: UploadQueue
|
|
||||||
|
|
||||||
export default () => {
|
|
||||||
if(uploadQueue === undefined){
|
|
||||||
uploadQueue = reactive(new UploadQueue())
|
|
||||||
}
|
|
||||||
return uploadQueue
|
|
||||||
}
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
import VirtualPage from "@/class/VirtualPage"
|
|
||||||
import { Reactive, reactive } from "vue"
|
|
||||||
|
|
||||||
let views: Reactive<VirtualPage[]>
|
|
||||||
|
|
||||||
export default function useViretualPages(){
|
|
||||||
if(views === undefined) {
|
|
||||||
views = reactive<VirtualPage[]>([])
|
|
||||||
}
|
|
||||||
return views
|
|
||||||
}
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
import { createApp } from 'vue'
|
|
||||||
import App from './App.vue'
|
|
||||||
|
|
||||||
createApp(App).mount('#app')
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
import { directory, file } from "./type";
|
|
||||||
|
|
||||||
export type miaoFetchConfig = {
|
|
||||||
retry?: number;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type getOption = {} & miaoFetchConfig;
|
|
||||||
|
|
||||||
export type getResponse = (file | directory)[];
|
|
||||||
|
|
||||||
export type uploadOption = {
|
|
||||||
/**
|
|
||||||
* 上传进度回调函数
|
|
||||||
* @param {any} percent 进度百分比,float类型
|
|
||||||
*/
|
|
||||||
onProcess?: (percent: number) => void;
|
|
||||||
/**
|
|
||||||
* 上传文件执行的操作
|
|
||||||
* write即为覆盖写
|
|
||||||
* append即为增量写
|
|
||||||
*/
|
|
||||||
type?: "write" | "append";
|
|
||||||
} & miaoFetchConfig;
|
|
||||||
|
|
||||||
export type deleteOption = {} & miaoFetchConfig;
|
|
||||||
export type renameOption = {} & miaoFetchConfig;
|
|
||||||
export type cutOption = {} & miaoFetchConfig
|
|
||||||
export type mkdirOption = {} & miaoFetchConfig
|
|
||||||
export type queryOption = {} & miaoFetchConfig;
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
export type stats = {
|
|
||||||
atimeMs: number; // 上次访问时间(毫秒)
|
|
||||||
birthtimeMs: number; // 创建时间(毫秒)
|
|
||||||
ctimeMs: number; // 状态更改时间(毫秒)
|
|
||||||
mtimeMs: number; // 上次修改时间(毫秒)
|
|
||||||
};
|
|
||||||
|
|
||||||
export type file = {
|
|
||||||
name: string;
|
|
||||||
size: number;
|
|
||||||
type?: "file";
|
|
||||||
stats: stats;
|
|
||||||
};
|
|
||||||
|
|
||||||
export type directory = {
|
|
||||||
name: string;
|
|
||||||
// 考虑到可能还没请求过来
|
|
||||||
content?: (file | directory)[];
|
|
||||||
type?: "directory";
|
|
||||||
stats: stats;
|
|
||||||
parent?: directory;
|
|
||||||
};
|
|
||||||
@@ -1,605 +0,0 @@
|
|||||||
<template>
|
|
||||||
<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="{
|
|
||||||
backgroundColor:
|
|
||||||
index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
|
|
||||||
}">
|
|
||||||
<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">
|
|
||||||
<n-breadcrumb separator=">" style="margin-left: 5px">
|
|
||||||
<n-breadcrumb-item :clickable="false">
|
|
||||||
<n-icon size="18">
|
|
||||||
<CloudOutline />
|
|
||||||
</n-icon>
|
|
||||||
</n-breadcrumb-item>
|
|
||||||
<n-breadcrumb-item v-for="dir in currentDirectory?.getParents"
|
|
||||||
@click="setCurrentDirectory(dir)" :clickable="true">
|
|
||||||
<div>{{ dir.name }}</div>
|
|
||||||
</n-breadcrumb-item>
|
|
||||||
</n-breadcrumb>
|
|
||||||
</div>
|
|
||||||
<!-- </n-scrollbar> -->
|
|
||||||
</div>
|
|
||||||
<div class="container-top-tools">
|
|
||||||
<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>
|
|
||||||
<n-icon class="container-top-tools-item" size="20" @click="emit('exit')">
|
|
||||||
<CloseOutline />
|
|
||||||
</n-icon>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<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" :item="dir" :key="dir.uid"
|
|
||||||
:color="props.color" :selected="selectedItem.value.includes(dir)"
|
|
||||||
@delete="handleItemDelete(dir)" @click="handleItemClick(dir)"
|
|
||||||
@drag-start="handleItemDragStart" @rename="handleItemRename(dir)"
|
|
||||||
@on-selected="handleItemSelect(dir)" />
|
|
||||||
</transition-group>
|
|
||||||
<transition-group name="dirItem">
|
|
||||||
<miaoDirectoryItem v-for="file in showData_files" :item="file" :key="file.uid"
|
|
||||||
:color="props.color" :selected="selectedItem.value.includes(file)"
|
|
||||||
@click="handleItemClick(file)" @download="handleItemDownload(file)"
|
|
||||||
@delete="handleItemDelete(file)" @drag-start="handleItemDragStart"
|
|
||||||
@rename="handleItemRename(file)" @on-selected="handleItemSelect(file)" />
|
|
||||||
</transition-group>
|
|
||||||
</n-scrollbar>
|
|
||||||
</div>
|
|
||||||
<div class="container-bottom" :style="{
|
|
||||||
backgroundColor:
|
|
||||||
index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
|
|
||||||
}">
|
|
||||||
<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>
|
|
||||||
<miao-mask v-model:show="showModel"></miao-mask>
|
|
||||||
<miao-popup-input ref="popupInput"></miao-popup-input>
|
|
||||||
</div>
|
|
||||||
</miao-drop-handler>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { NBreadcrumbItem, NBreadcrumb, NIcon, NScrollbar } from 'naive-ui'
|
|
||||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
|
||||||
import { computed, onMounted, reactive, 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 miaoDropHandler from '@/components/miaoDropHandler.vue'
|
|
||||||
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
|
||||||
import useDataBus from '@/hooks/useDataBus'
|
|
||||||
import {
|
|
||||||
CloudOutline,
|
|
||||||
ChevronBackOutline,
|
|
||||||
ReloadOutline,
|
|
||||||
CloseOutline,
|
|
||||||
CloudUploadOutline,
|
|
||||||
AddOutline
|
|
||||||
} from '@vicons/ionicons5'
|
|
||||||
import useUploadQueue from '@/hooks/useUploadQueue'
|
|
||||||
import useVirtualPages from '@/hooks/useVirtualPages'
|
|
||||||
import { filePicker } from '@/hooks/miaoTools'
|
|
||||||
import { uniq } from 'lodash'
|
|
||||||
|
|
||||||
const { baseUrl, api } = Config
|
|
||||||
const dataBus = useDataBus()
|
|
||||||
const views = useVirtualPages()
|
|
||||||
|
|
||||||
const miaoFetchApi = useMiaoFetchApi()
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
color: string
|
|
||||||
id: number
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
exit: []
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const popupInput = ref()
|
|
||||||
// 是否显示模态框
|
|
||||||
const showModel = ref(0)
|
|
||||||
|
|
||||||
class SelectedItem {
|
|
||||||
constructor() {
|
|
||||||
this._selectedItem = []
|
|
||||||
}
|
|
||||||
_selectedItem: (VirtualDirectory | VirtualFile)[]
|
|
||||||
push(item: VirtualDirectory | VirtualFile) {
|
|
||||||
this._selectedItem = [item, ...this._selectedItem]
|
|
||||||
}
|
|
||||||
remove(item: VirtualDirectory | VirtualFile) {
|
|
||||||
this._selectedItem = this._selectedItem.filter(v => v !== item)
|
|
||||||
}
|
|
||||||
clear() {
|
|
||||||
this._selectedItem = []
|
|
||||||
}
|
|
||||||
// 保证内容仍然存在于dir中且各个元素不重复
|
|
||||||
get value() {
|
|
||||||
return uniq(this._selectedItem).filter(v => {
|
|
||||||
if (currentDirectory.value === undefined) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
// @ts-ignore
|
|
||||||
return [...currentDirectory.value?.directorys, ...currentDirectory.value?.files].includes(v)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 已选择的item,用于多选功能
|
|
||||||
const selectedItem = reactive(new SelectedItem())
|
|
||||||
|
|
||||||
const currentObjects = defineModel<VirtualDirectory[]>('currentObjects', {
|
|
||||||
required: true
|
|
||||||
})
|
|
||||||
|
|
||||||
// 目前展示的Dir
|
|
||||||
const currentDirectory = computed(() => {
|
|
||||||
return currentObjects.value[0]
|
|
||||||
})
|
|
||||||
|
|
||||||
// 当前组件在views中的序号
|
|
||||||
const index = computed(() => {
|
|
||||||
for (let i in views) {
|
|
||||||
if (views[i].uid === props.id) {
|
|
||||||
return parseInt(i)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return 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>()
|
|
||||||
|
|
||||||
const uploadQueue = useUploadQueue()
|
|
||||||
|
|
||||||
// 设置显示的dir
|
|
||||||
const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
|
|
||||||
// 若没有缓存数据则同步刷新,有缓存数据则异步刷新
|
|
||||||
if (
|
|
||||||
virtualDirectory.files === undefined ||
|
|
||||||
virtualDirectory.directorys === undefined
|
|
||||||
) {
|
|
||||||
await virtualDirectory.update()
|
|
||||||
} else {
|
|
||||||
virtualDirectory.update()
|
|
||||||
}
|
|
||||||
currentObjects.value[0] = virtualDirectory
|
|
||||||
}
|
|
||||||
|
|
||||||
const reload = () => {
|
|
||||||
setCurrentDirectory(currentDirectory.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
const openUrl = (
|
|
||||||
href: string,
|
|
||||||
config?: {
|
|
||||||
download?: string
|
|
||||||
target?: string
|
|
||||||
}
|
|
||||||
) => {
|
|
||||||
let { target, download } = config ?? {}
|
|
||||||
const a = document.createElement('a')
|
|
||||||
a.setAttribute('href', href)
|
|
||||||
a.setAttribute('target', target ?? '_blank')
|
|
||||||
download && a.setAttribute('download', download)
|
|
||||||
a.click()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleBack = () => {
|
|
||||||
if (currentDirectory.value?.parent) {
|
|
||||||
setCurrentDirectory(currentDirectory.value.parent)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleReload = () => {
|
|
||||||
reload()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
|
|
||||||
if (selectedItem.value.length > 0) {
|
|
||||||
handleItemSelect(item)
|
|
||||||
} else {
|
|
||||||
if (item.type === 'file') {
|
|
||||||
openUrl(`${baseUrl}${api.get}${item.path}`)
|
|
||||||
} else if (item.type === 'directory') {
|
|
||||||
setCurrentDirectory(item)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleItemDownload = (item: VirtualFile) => {
|
|
||||||
openUrl(`${baseUrl}${api.get}${item.path}`, {
|
|
||||||
download: item.name
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
|
|
||||||
for (let item of uniq([...selectedItem.value, _item])) {
|
|
||||||
; (async () => {
|
|
||||||
const { response } = miaoFetchApi.delete(item, {
|
|
||||||
retry: 5
|
|
||||||
})
|
|
||||||
// todo: 将删除事件统一用一个事件管理中心管理
|
|
||||||
const id = (await response).eventId
|
|
||||||
const { response: res } = miaoFetchApi.query(id)
|
|
||||||
const eventResult = await res
|
|
||||||
if (eventResult.status === 'success') {
|
|
||||||
reload()
|
|
||||||
}
|
|
||||||
})()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
|
|
||||||
const popupRes = await popupInput.value.popup({
|
|
||||||
title: '重命名',
|
|
||||||
showInput: true,
|
|
||||||
inputValue: item.name,
|
|
||||||
inputProps: {
|
|
||||||
placeholder: item.name
|
|
||||||
},
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
label: '取消',
|
|
||||||
key: false,
|
|
||||||
type: 'error'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '确认',
|
|
||||||
key: true,
|
|
||||||
type: 'success'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
if (popupRes.key === false) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const newName = popupRes.text
|
|
||||||
const { response } = miaoFetchApi.rename(item, newName, {
|
|
||||||
retry: 5
|
|
||||||
})
|
|
||||||
const id = (await response).eventId
|
|
||||||
const { response: res } = miaoFetchApi.query(id)
|
|
||||||
const eventResult = await res
|
|
||||||
if (eventResult.status === 'success') {
|
|
||||||
reload()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleItemDragStart = async (
|
|
||||||
_event: DragEvent,
|
|
||||||
item: VirtualDirectory | VirtualFile
|
|
||||||
) => {
|
|
||||||
const items = uniq([item, ...selectedItem.value])
|
|
||||||
dataBus.set('dragData_vFiles', items.filter(v => v.type === 'file'))
|
|
||||||
dataBus.set('dragData_vDirectory', items.filter(v => v.type === 'directory'))
|
|
||||||
selectedItem.clear()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDropFiles = async (files: File[]) => {
|
|
||||||
currentDirectory.value &&
|
|
||||||
uploadQueue.push(files, currentDirectory.value, {
|
|
||||||
onFinish() {
|
|
||||||
reload()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
|
|
||||||
// 不能移到自己或自己的子文件夹内
|
|
||||||
for (let vDir of vDirs) {
|
|
||||||
if (currentDirectory.value.getParents.includes(vDir)) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
}
|
|
||||||
for (let dir of vDirs) {
|
|
||||||
; (async () => {
|
|
||||||
const _from = dir.parent
|
|
||||||
const { response } = miaoFetchApi.cut(dir, currentDirectory.value)
|
|
||||||
const id = (await response).eventId
|
|
||||||
const { response: res } = miaoFetchApi.query(id)
|
|
||||||
const eventResult = await res
|
|
||||||
if (eventResult.status === 'success') {
|
|
||||||
reload()
|
|
||||||
_from && _from.update()
|
|
||||||
}
|
|
||||||
})()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDropVirtualFiles = (files: VirtualFile[]) => {
|
|
||||||
if (files[0].parent === currentDirectory.value) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
for (let file of files) {
|
|
||||||
; (async () => {
|
|
||||||
const _from = file.parent
|
|
||||||
const { response } = miaoFetchApi.cut(file, currentDirectory.value)
|
|
||||||
const id = (await response).eventId
|
|
||||||
const { response: res } = miaoFetchApi.query(id)
|
|
||||||
const eventResult = await res
|
|
||||||
if (eventResult.status === 'success') {
|
|
||||||
reload()
|
|
||||||
_from.update()
|
|
||||||
}
|
|
||||||
})()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handlePickFilesUpload = async () => {
|
|
||||||
const files = await filePicker({
|
|
||||||
multiple: true
|
|
||||||
})
|
|
||||||
const _currDir = currentDirectory.value
|
|
||||||
uploadQueue.push(files, _currDir, {
|
|
||||||
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
|
|
||||||
}
|
|
||||||
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()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
|
|
||||||
if (!selectedItem.value.includes(item)) {
|
|
||||||
selectedItem.push(item)
|
|
||||||
} else {
|
|
||||||
selectedItem.remove(item)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
onMounted(async () => {
|
|
||||||
await setCurrentDirectory(currentDirectory.value)
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
$top-height: 30px;
|
|
||||||
$bottom-bar-height: 60px;
|
|
||||||
|
|
||||||
.miao-directory-item-container {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
width: inherit;
|
|
||||||
// min-width: 236px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.container-top {
|
|
||||||
height: $top-height;
|
|
||||||
width: 100%;
|
|
||||||
user-select: none;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: #f1f1f1;
|
|
||||||
|
|
||||||
.container-top-colorfulBar {
|
|
||||||
height: 70%;
|
|
||||||
width: 5px;
|
|
||||||
margin-left: 10px;
|
|
||||||
border-radius: 3px 0 0 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-top-breadcrumb {
|
|
||||||
position: relative;
|
|
||||||
height: 70%;
|
|
||||||
width: calc(100% - 95px);
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
// overflow: hidden;
|
|
||||||
overflow-y: hidden;
|
|
||||||
overflow-x: hidden;
|
|
||||||
background-color: #ffffff;
|
|
||||||
padding: 0 5px;
|
|
||||||
border-radius: 0 3px 3px 0;
|
|
||||||
|
|
||||||
.container-top-breadcrumb-container {
|
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
min-width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-top-tools {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
width: 70px;
|
|
||||||
padding: 0 5px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.container-top-tools-item {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background-color: #ffffff00;
|
|
||||||
border-radius: 5px;
|
|
||||||
transition: background-color 0.3s;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.container-top-tools-item-reload {
|
|
||||||
transition: transform 0.6s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: rgba(128, 128, 128, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active .container-top-tools-item-reload {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// &::after {
|
|
||||||
// content: '';
|
|
||||||
// height: 60%;
|
|
||||||
// position: absolute;
|
|
||||||
// right: -2px;
|
|
||||||
// width: 2px;
|
|
||||||
// background-color: #828282;
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-items {
|
|
||||||
width: 100%;
|
|
||||||
height: calc(100% - $top-height - $bottom-bar-height);
|
|
||||||
// flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-bottom {
|
|
||||||
height: $bottom-bar-height;
|
|
||||||
background-color: bisque;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
|
||||||
user-select: none;
|
|
||||||
box-shadow: 0px 1px 10px #888888;
|
|
||||||
z-index: 2;
|
|
||||||
|
|
||||||
.container-bottom-item {
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.container-bottom-item-icon {
|
|
||||||
svg {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
svg {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// transition动画相关
|
|
||||||
// .miao-directory-item-container {
|
|
||||||
// .container-items {
|
|
||||||
// .dirItem-move {
|
|
||||||
// transition: all 0.2s ease;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .dirItem-leave-active {
|
|
||||||
// transition: none;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .dirItem-enter-from {
|
|
||||||
// opacity: 0;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .dirItem-leave-active {
|
|
||||||
// position: absolute;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }</style>
|
|
||||||
Vendored
-1
@@ -1 +0,0 @@
|
|||||||
/// <reference types="vite/client" />
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"target": "ES2020",
|
|
||||||
"useDefineForClassFields": true,
|
|
||||||
"module": "ESNext",
|
|
||||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
|
||||||
"skipLibCheck": true,
|
|
||||||
|
|
||||||
/* Bundler mode */
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
"allowImportingTsExtensions": true,
|
|
||||||
"isolatedModules": true,
|
|
||||||
"moduleDetection": "force",
|
|
||||||
"noEmit": true,
|
|
||||||
"jsx": "preserve",
|
|
||||||
|
|
||||||
/* Linting */
|
|
||||||
"strict": true,
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
"noUnusedParameters": true,
|
|
||||||
"noFallthroughCasesInSwitch": true,
|
|
||||||
"baseUrl": ".",
|
|
||||||
"paths": {
|
|
||||||
"@/*": ["src/*"]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
|
||||||
}
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
{
|
|
||||||
"files": [],
|
|
||||||
"references": [
|
|
||||||
{ "path": "./tsconfig.app.json" },
|
|
||||||
{ "path": "./tsconfig.node.json" }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"target": "ES2022",
|
|
||||||
"lib": ["ES2023"],
|
|
||||||
"module": "ESNext",
|
|
||||||
"skipLibCheck": true,
|
|
||||||
|
|
||||||
/* Bundler mode */
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
"allowImportingTsExtensions": true,
|
|
||||||
"isolatedModules": true,
|
|
||||||
"moduleDetection": "force",
|
|
||||||
"noEmit": true,
|
|
||||||
|
|
||||||
/* Linting */
|
|
||||||
"strict": true,
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
"noUnusedParameters": true,
|
|
||||||
"noFallthroughCasesInSwitch": true
|
|
||||||
},
|
|
||||||
"include": ["vite.config.ts"]
|
|
||||||
}
|
|
||||||
@@ -1,70 +0,0 @@
|
|||||||
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')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
server: {
|
|
||||||
proxy: {
|
|
||||||
'/get': {
|
|
||||||
target: 'http://127.0.0.1:17705',
|
|
||||||
changeOrigin: true,
|
|
||||||
rewrite: (path) => path.replace(/^\/get/, '/get')
|
|
||||||
},
|
|
||||||
|
|
||||||
'/upload': {
|
|
||||||
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')
|
|
||||||
},
|
|
||||||
'/rename': {
|
|
||||||
target: 'http://127.0.0.1:17705',
|
|
||||||
changeOrigin: true,
|
|
||||||
rewrite: (path) => path.replace(/^\/rename/, '/rename')
|
|
||||||
},
|
|
||||||
'/cut': {
|
|
||||||
target: 'http://127.0.0.1:17705',
|
|
||||||
changeOrigin: true,
|
|
||||||
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')
|
|
||||||
},
|
|
||||||
output: {
|
|
||||||
// 配置输出为单文件
|
|
||||||
inlineDynamicImports: true,
|
|
||||||
manualChunks: undefined,
|
|
||||||
entryFileNames: 'bundle.js',
|
|
||||||
format: 'iife', // 立即执行函数格式
|
|
||||||
name: 'MyBundle'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
Reference in new issue
Block a user