Compare commits
7
Commits
serve
..
4f477c99d1
| Author | SHA1 | Date | |
|---|---|---|---|
 539943419
|
4f477c99d1 | ||
|
539943419
|
e840e4eb5a | ||
|
539943419
|
1d4feb471c | ||
|
539943419
|
a668b3b840 | ||
|
539943419
|
d9363d3b93 | ||
|
539943419
|
4ce50f697b | ||
|
539943419
|
75443cffc4 |
No files matched your search
+24
-1
@@ -1,3 +1,26 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
node_modules
|
node_modules
|
||||||
dist
|
dist
|
||||||
static
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
.vscode
|
||||||
|
serve
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
# Vue 3 + TypeScript + Vite
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||||
|
|
||||||
|
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
|
||||||
@@ -1,33 +0,0 @@
|
|||||||
import { api, staticPath } from "../config.js";
|
|
||||||
import path from "path";
|
|
||||||
import useFsOperateEventCenter from "../hooks/useFsOperateEventCenter.js";
|
|
||||||
import fs from "fs";
|
|
||||||
import express from "express";
|
|
||||||
|
|
||||||
const fsOperateEventCenter = useFsOperateEventCenter();
|
|
||||||
|
|
||||||
function cutPath(targetPath, newPath) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
fs.stat(targetPath, (err, stats) => {
|
|
||||||
if (err) {
|
|
||||||
console.log(err);
|
|
||||||
return reject(err);
|
|
||||||
}
|
|
||||||
|
|
||||||
fs.rename(targetPath, newPath, err => {
|
|
||||||
if (err) return reject(err);
|
|
||||||
resolve();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function useCutApi(app) {
|
|
||||||
app.post(api.cut, express.json(), (req, res) => {
|
|
||||||
const decodedPath = decodeURIComponent(req.path).substring(api.cut.length - 1);
|
|
||||||
const targetPath = path.join(staticPath, decodedPath);
|
|
||||||
const newPath = path.join(staticPath, req.body.newPath, path.basename(targetPath));
|
|
||||||
const eventId = fsOperateEventCenter.push(cutPath(targetPath, newPath));
|
|
||||||
res.send({ eventId });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
import { api, staticPath } from "../config.js";
|
|
||||||
import path from "path";
|
|
||||||
import useFsOperateEventCenter from "../hooks/useFsOperateEventCenter.js";
|
|
||||||
import fs from 'fs'
|
|
||||||
|
|
||||||
const fsOperateEventCenter = useFsOperateEventCenter()
|
|
||||||
|
|
||||||
function deletePath(targetPath) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
fs.stat(targetPath, (err, stats) => {
|
|
||||||
if (err) {
|
|
||||||
console.log(err)
|
|
||||||
return reject(err);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (stats.isFile()) {
|
|
||||||
fs.rm(targetPath, { recursive: true }, (err) => {
|
|
||||||
if (err) return reject(err);
|
|
||||||
resolve();
|
|
||||||
});
|
|
||||||
} else if (stats.isDirectory()) {
|
|
||||||
fs.rm(targetPath, { recursive: true }, (err) => {
|
|
||||||
if (err) return reject(err);
|
|
||||||
resolve();
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
reject('unknow file');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function useDeleteApi(app) {
|
|
||||||
app.post(api.delete, (req, res) => {
|
|
||||||
const decodedPath = decodeURIComponent(req.path).substring(api.delete.length - 1);
|
|
||||||
const targetPath = path.join(staticPath, decodedPath);
|
|
||||||
const eventId = fsOperateEventCenter.push(deletePath(targetPath))
|
|
||||||
res.send({ eventId });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
import express from "express";
|
|
||||||
import path from "path";
|
|
||||||
import fs from "fs";
|
|
||||||
import { staticPath, api } from "../config.js";
|
|
||||||
|
|
||||||
const api_get = api.get
|
|
||||||
|
|
||||||
export default function useGetApi(app) {
|
|
||||||
// 不存在文件与文件夹同名的问题
|
|
||||||
app.use(api_get, (req, res, next) => {
|
|
||||||
const decodedPath = decodeURIComponent(req.path);
|
|
||||||
const directoryPath = path.join(staticPath, decodedPath);
|
|
||||||
fs.stat(directoryPath, (err, stats) => {
|
|
||||||
if (err) {
|
|
||||||
console.log(err, directoryPath);
|
|
||||||
// return res.status(500).json({ error: "Unable to access path" });
|
|
||||||
return next();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (stats.isDirectory()) {
|
|
||||||
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",
|
|
||||||
stats: {
|
|
||||||
atimeMs: stats.atimeMs,
|
|
||||||
birthtimeMs: stats.birthtimeMs,
|
|
||||||
ctimeMs: stats.ctimeMs,
|
|
||||||
mtimeMs: stats.mtimeMs
|
|
||||||
}
|
|
||||||
};
|
|
||||||
});
|
|
||||||
res.json(fileDetails);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
next();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
app.use(api_get, express.static(staticPath));
|
|
||||||
}
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
import fs from 'fs'
|
|
||||||
import path from 'path'
|
|
||||||
import express from 'express'
|
|
||||||
import { api, staticPath } from '../config.js'
|
|
||||||
|
|
||||||
export default function useMkdirApi(app) {
|
|
||||||
app.post(api.mkdir, express.json(), (req, res) => {
|
|
||||||
const folderName = req.body.folderName
|
|
||||||
const decodedPath = decodeURIComponent(req.path).substring(
|
|
||||||
api.mkdir.length - 1
|
|
||||||
)
|
|
||||||
const mkdirPath = path.join(staticPath, decodedPath, folderName)
|
|
||||||
// res.status(200).json({ mkdirPath, folderName })
|
|
||||||
|
|
||||||
// 创建文件夹
|
|
||||||
fs.mkdir(mkdirPath, { recursive: true }, (err) => {
|
|
||||||
if (err) {
|
|
||||||
return res.status(500).json({ message: 'failed', error: err })
|
|
||||||
}
|
|
||||||
res.status(200).json({ message: 'success' })
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
import { api } from "../config.js";
|
|
||||||
import useFsOperateEventCenter from "../hooks/useFsOperateEventCenter.js";
|
|
||||||
|
|
||||||
const fsOperateEventCenter = useFsOperateEventCenter();
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取一个文件操作事件的结果
|
|
||||||
* @returns {any}
|
|
||||||
*/
|
|
||||||
export default function useQueryApi(app) {
|
|
||||||
app.get(api.query, (req, res) => {
|
|
||||||
const id = req.query.id;
|
|
||||||
res.json(fsOperateEventCenter.query(id));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -1,34 +0,0 @@
|
|||||||
import { api, staticPath } from "../config.js";
|
|
||||||
import path from "path";
|
|
||||||
import useFsOperateEventCenter from "../hooks/useFsOperateEventCenter.js";
|
|
||||||
import fs from "fs";
|
|
||||||
import express from "express";
|
|
||||||
|
|
||||||
const fsOperateEventCenter = useFsOperateEventCenter();
|
|
||||||
|
|
||||||
function renamePath(targetPath, newName) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
fs.stat(targetPath, (err, stats) => {
|
|
||||||
if (err) {
|
|
||||||
console.log(err);
|
|
||||||
return reject(err);
|
|
||||||
}
|
|
||||||
|
|
||||||
const newTargetPath = path.join(path.dirname(targetPath), newName);
|
|
||||||
fs.rename(targetPath, newTargetPath, err => {
|
|
||||||
if (err) return reject(err);
|
|
||||||
resolve();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function useRenameApi(app) {
|
|
||||||
app.post(api.rename, express.json(), (req, res) => {
|
|
||||||
const decodedPath = decodeURIComponent(req.path).substring(api.rename.length - 1);
|
|
||||||
const targetPath = path.join(staticPath, decodedPath);
|
|
||||||
const newName = req.body.newName;
|
|
||||||
const eventId = fsOperateEventCenter.push(renamePath(targetPath, newName));
|
|
||||||
res.send({ eventId });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
import path from "path";
|
|
||||||
import fs from "fs";
|
|
||||||
import multer from "multer";
|
|
||||||
import { api, staticPath } from "../config.js";
|
|
||||||
|
|
||||||
const storage = multer.memoryStorage();
|
|
||||||
const upload = multer({ storage: storage }).single('file');
|
|
||||||
|
|
||||||
export default function useUploadApi(app) {
|
|
||||||
app.post(api.upload, upload, (req, res) => {
|
|
||||||
// 必须这样传，不然中文乱码
|
|
||||||
const fileName = req.body.fileName
|
|
||||||
|
|
||||||
const decodedPath = decodeURIComponent(req.path).substring(api.upload.length - 1);
|
|
||||||
const savePath = path.join(staticPath, decodedPath, fileName)
|
|
||||||
// 覆盖写or追加写
|
|
||||||
const operateType = req.body.operateType === 'write' ? 'write' : 'append'
|
|
||||||
const data = req.file.buffer
|
|
||||||
if (operateType === 'write') {
|
|
||||||
// 覆盖写入
|
|
||||||
fs.writeFile(savePath, data, (err) => {
|
|
||||||
if (err) {
|
|
||||||
return res.status(500).json({ message: 'failed', error: err });
|
|
||||||
}
|
|
||||||
res.status(200).json({ message: 'success' });
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// 追加写入
|
|
||||||
fs.appendFile(savePath, data, (err) => {
|
|
||||||
if (err) {
|
|
||||||
return res.status(500).json({ message: 'failed', error: err });
|
|
||||||
}
|
|
||||||
res.status(200).json({ message: 'success' });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
import path from "path";
|
|
||||||
|
|
||||||
|
|
||||||
export const staticPath = path.join("./static");
|
|
||||||
export const port = 17705;
|
|
||||||
|
|
||||||
export const api = {
|
|
||||||
get: `/${'get'}`,
|
|
||||||
query: `/${'query'}`,
|
|
||||||
upload: `/${'upload'}/*`,
|
|
||||||
delete: `/${'delete'}/*`,
|
|
||||||
rename: `/${'rename'}/*`,
|
|
||||||
mkdir: `/${'mkdir'}/*`,
|
|
||||||
cut: `/${'cut'}/*`
|
|
||||||
}
|
|
||||||
|
|
||||||
export default { staticPath, port, api }
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
|
|
||||||
/**
|
|
||||||
* 生成一个id，不唯一的几率比因为我代码烂的几率低
|
|
||||||
* @param length 生成id的长度
|
|
||||||
* @returns {number}
|
|
||||||
*/
|
|
||||||
export default function generateId(length) {
|
|
||||||
length || (length = 16);
|
|
||||||
let id = Math.ceil(Math.random() * 10 ** 16);
|
|
||||||
return id
|
|
||||||
}
|
|
||||||
@@ -1,79 +0,0 @@
|
|||||||
import generateId from "./generateId.js"
|
|
||||||
|
|
||||||
// 一个文件操作事件
|
|
||||||
class FsOperateEvent {
|
|
||||||
constructor(event){
|
|
||||||
this.status = 'progress'
|
|
||||||
this.uid = generateId()
|
|
||||||
event.then(()=>{
|
|
||||||
this.status = 'success'
|
|
||||||
}).catch((e)=>{
|
|
||||||
this.failedEvent = e
|
|
||||||
this.status = 'failed'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* 事件状态，分为progress, success, failed
|
|
||||||
*/
|
|
||||||
failedEvent
|
|
||||||
status
|
|
||||||
uid
|
|
||||||
}
|
|
||||||
|
|
||||||
class FsOprateEventCenter {
|
|
||||||
constructor(){
|
|
||||||
this.eventMap = {}
|
|
||||||
}
|
|
||||||
eventMap
|
|
||||||
/**
|
|
||||||
* 推送一个事件，返回这个事件的id，后续可以通过这个id查询这个事件的状态
|
|
||||||
* @param {Promise} event
|
|
||||||
* @returns {number} 事件id
|
|
||||||
*/
|
|
||||||
push(event){
|
|
||||||
const ev = new FsOperateEvent(event)
|
|
||||||
const id = ev.uid
|
|
||||||
this.eventMap[id] = {
|
|
||||||
event: ev,
|
|
||||||
// 每小时自查询一下状态，防止一直没查询导致内存泄漏
|
|
||||||
timer: setInterval(()=>{
|
|
||||||
this.query(id)
|
|
||||||
}, 1000*60*60)
|
|
||||||
}
|
|
||||||
return id
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* 推送一个事件，返回这个事件的id，后续可以通过这个id查询这个事件的状态
|
|
||||||
* 当查询到这个事件已经完成的时候，将这个事件移除出事件表(eventMap)
|
|
||||||
* @param {number} id 事件id
|
|
||||||
* @returns {{status: 'success' | 'failed' | 'progress' | 'unknow'; result?: any}} 事件id
|
|
||||||
*/
|
|
||||||
query(id){
|
|
||||||
let status
|
|
||||||
if(!this.eventMap[id]){
|
|
||||||
status = 'unknow'
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
status = this.eventMap[id].event.status
|
|
||||||
}
|
|
||||||
const res = {status}
|
|
||||||
if( ['success', 'failed'].includes(status) ){
|
|
||||||
if(status === 'failed'){
|
|
||||||
res.failedEvent = this.eventMap[id].event.failedEvent
|
|
||||||
}
|
|
||||||
clearInterval(this.eventMap[id].timer)
|
|
||||||
this.eventMap[id] = undefined
|
|
||||||
}
|
|
||||||
return res
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const fsOprateEventCenter = new FsOprateEventCenter()
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 除了上传以外的所有文件操作都统一通过这个进行管理
|
|
||||||
* @returns {fsOprateEventCenter}
|
|
||||||
*/
|
|
||||||
export default function useFsOprateEventCenter(){
|
|
||||||
return fsOprateEventCenter
|
|
||||||
}
|
|
||||||
+19
@@ -0,0 +1,19 @@
|
|||||||
|
<!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>
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
import express from "express";
|
|
||||||
import os from "os";
|
|
||||||
import cors from "cors";
|
|
||||||
import fs from "fs";
|
|
||||||
import Config from "./config.js";
|
|
||||||
import useGetApi from "./api/useGetApi.js";
|
|
||||||
import useUploadApi from "./api/useUploadApi.js";
|
|
||||||
import useDeleteApi from "./api/useDeleteApi.js";
|
|
||||||
import useQueryApi from "./api/useQueryApi.js";
|
|
||||||
import useRenameApi from "./api/useRenameApi.js";
|
|
||||||
import useCutApi from "./api/useCutApi.js";
|
|
||||||
import useMkdirApi from "./api/useMkdirApi.js";
|
|
||||||
|
|
||||||
const { staticPath, port, api } = Config;
|
|
||||||
|
|
||||||
if (!fs.existsSync(staticPath)) {
|
|
||||||
fs.mkdirSync(staticPath);
|
|
||||||
}
|
|
||||||
|
|
||||||
const app = express();
|
|
||||||
app.use(cors());
|
|
||||||
|
|
||||||
useGetApi(app);
|
|
||||||
useUploadApi(app);
|
|
||||||
useDeleteApi(app);
|
|
||||||
useQueryApi(app);
|
|
||||||
useRenameApi(app);
|
|
||||||
useCutApi(app);
|
|
||||||
useMkdirApi(app);
|
|
||||||
|
|
||||||
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}${api.get}`) : console.log(`http://${iface.address}:${port}${api.get}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
+26
-25
@@ -1,27 +1,28 @@
|
|||||||
{
|
{
|
||||||
"name": "miao-directory",
|
"name": "miao-directory-web",
|
||||||
"version": "1.0.0",
|
"private": true,
|
||||||
"description": "",
|
"version": "0.0.0",
|
||||||
"main": "index.js",
|
"type": "module",
|
||||||
"type": "module",
|
"scripts": {
|
||||||
"scripts": {
|
"dev": "vite",
|
||||||
"dev": "ts-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"
|
"dependencies": {
|
||||||
},
|
"@vicons/ionicons5": "^0.12.0",
|
||||||
"keywords": [],
|
"axios": "^1.7.3",
|
||||||
"author": "",
|
"naive-ui": "^2.39.0",
|
||||||
"license": "ISC",
|
"sass": "^1.77.8",
|
||||||
"dependencies": {
|
"vue": "^3.4.35"
|
||||||
"cors": "^2.8.5",
|
},
|
||||||
"express": "^4.19.2",
|
"devDependencies": {
|
||||||
"multer": "1.4.5-lts.1",
|
"@types/lodash": "^4.17.7",
|
||||||
"ts-node": "^10.9.2"
|
"@types/node": "^22.1.0",
|
||||||
},
|
"@vitejs/plugin-vue": "^5.1.2",
|
||||||
"devDependencies": {
|
"typescript": "^5.5.3",
|
||||||
"@vercel/ncc": "^0.38.1",
|
"vite": "^5.4.0",
|
||||||
"uglify-js": "^3.19.1"
|
"vite-plugin-singlefile": "^2.0.2",
|
||||||
}
|
"vue-tsc": "^2.0.29"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Generated
+1082
-665
File diff suppressed because it is too large.
Load diff
+260
@@ -0,0 +1,260 @@
|
|||||||
|
<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 from './class/VirtualDirectory';
|
||||||
|
import MiaoMask from './components/miaoMask.vue';
|
||||||
|
import config from './config';
|
||||||
|
|
||||||
|
const {baseUrl} = config
|
||||||
|
|
||||||
|
const showModal = ref<boolean>(false)
|
||||||
|
|
||||||
|
const modalData = shallowRef<{
|
||||||
|
component: any
|
||||||
|
props: any
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const views = reactive<VirtualPage[]>([])
|
||||||
|
|
||||||
|
const rootDirectory = new VirtualDirectory({
|
||||||
|
name: '根目录',
|
||||||
|
stats: {
|
||||||
|
atimeMs: 0,
|
||||||
|
birthtimeMs: 0,
|
||||||
|
ctimeMs: 0,
|
||||||
|
mtimeMs: 0,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const createView = (initDirectory: VirtualDirectory, index?: number) => {
|
||||||
|
index ?? (index = views.length)
|
||||||
|
console.log(initDirectory)
|
||||||
|
views.splice(index, 0, reactive<VirtualPage>(new VirtualPage(initDirectory)))
|
||||||
|
}
|
||||||
|
|
||||||
|
const deleteView = (index: number) => {
|
||||||
|
views.splice(index, 1)
|
||||||
|
if (views.length === 0) {
|
||||||
|
createView(rootDirectory)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderIcon(icon: any) {
|
||||||
|
return () => {
|
||||||
|
return h(NIcon, null, {
|
||||||
|
default: () => h(icon)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const openMenuOption = [
|
||||||
|
{
|
||||||
|
label: '分享',
|
||||||
|
key: 'share',
|
||||||
|
icon: renderIcon(QrCodeOutline)
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const handleMenuSelect = (key: string) => {
|
||||||
|
console.log(key)
|
||||||
|
if(key === 'share') {
|
||||||
|
showModal.value = true
|
||||||
|
modalData.value = {
|
||||||
|
component: NQrCode,
|
||||||
|
props: {
|
||||||
|
value: baseUrl,
|
||||||
|
size: 500,
|
||||||
|
errorCorrectionLevel: 'H'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
createView(rootDirectory)
|
||||||
|
})
|
||||||
|
|
||||||
|
// todo: 让所有伪页面共享一个rootDirectory
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="view">
|
||||||
|
<div class="view-controler">
|
||||||
|
<n-scrollbar x-scrollable>
|
||||||
|
<div class="tags-container">
|
||||||
|
<div class="tag" v-for="(view, index) of views" :key="view.uid">
|
||||||
|
<div class="tag-title">{{ view.title }}</div>
|
||||||
|
<div class="tag-point" :style="{ backgroundColor: view.color } "></div>
|
||||||
|
<div class="tag-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.currentDirectory, index + 1)">
|
||||||
|
<CopyOutline />
|
||||||
|
</n-icon>
|
||||||
|
<n-icon class="tag-control-icon icon" @click="deleteView(index)">
|
||||||
|
<CloseOutline class="icon-inner" />
|
||||||
|
</n-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</n-scrollbar>
|
||||||
|
<div class="view-controler-menu">
|
||||||
|
<div class="view-controler-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">
|
||||||
|
<div class="view-container-item" v-for="(view, index) of views" v-show="view.visible" :key="view.uid">
|
||||||
|
<miao-directory v-model:current-directory="view.currentDirectory" :color="view.color" :index="index" @exit="deleteView(index)"></miao-directory>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<MiaoMask v-model:show="showModal" @click="showModal = false" >
|
||||||
|
<component :is="modalData?.component" v-bind="modalData?.props"></component>
|
||||||
|
</MiaoMask>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$controler-height: 25px;
|
||||||
|
.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;
|
||||||
|
.tag {
|
||||||
|
position: relative;
|
||||||
|
width: 170px;
|
||||||
|
margin: 0 5px;
|
||||||
|
// flex: 1;
|
||||||
|
display: flex;
|
||||||
|
border-radius: 5px 5px 0 0;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.tag-title {
|
||||||
|
margin-left: 4px;
|
||||||
|
// width: 70%;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-point {
|
||||||
|
height: 5px;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
border-radius: 66px;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-control {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.tag-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-controler-menu {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 5px;
|
||||||
|
.view-controler-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,165 @@
|
|||||||
|
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, status } = miaoFetchApi.upload(this.file, this.targetDirectory, {
|
||||||
|
onProcess: percent => {
|
||||||
|
this.process = percent;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this._abort = abort;
|
||||||
|
this._status = status;
|
||||||
|
this.status = "uploading";
|
||||||
|
status
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,131 @@
|
|||||||
|
import generateId from "@/hooks/generateId";
|
||||||
|
import type { stats, file, directory } from "@/types/type.ts";
|
||||||
|
|
||||||
|
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 directoryArray(): VirtualDirectory[] {
|
||||||
|
if (!this.parent) {
|
||||||
|
return [this];
|
||||||
|
}
|
||||||
|
return [...this.parent.directoryArray, 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default VirtualDirectory;
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
import VirtualDirectory 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(initDirectory: VirtualDirectory) {
|
||||||
|
this.visible = true;
|
||||||
|
this.uid = generateId();
|
||||||
|
this.currentDirectory = initDirectory;
|
||||||
|
this.refreshKey = Math.random();
|
||||||
|
this.color = getRandomWebSafeColor();
|
||||||
|
}
|
||||||
|
visible: boolean;
|
||||||
|
currentDirectory: VirtualDirectory;
|
||||||
|
// 区分每一个页面的唯一id
|
||||||
|
uid: number;
|
||||||
|
// 当refreshKey改变时需要刷新页面，目前还没接入刷新
|
||||||
|
refreshKey: number;
|
||||||
|
|
||||||
|
color: string;
|
||||||
|
|
||||||
|
get title() {
|
||||||
|
return this.currentDirectory.name;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 切换显示状态
|
||||||
|
switchShow() {
|
||||||
|
this.visible = !this.visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置（同步）正在展示的文件夹
|
||||||
|
setCurrrentDirectory(currDir: VirtualDirectory) {
|
||||||
|
this.currentDirectory = currDir;
|
||||||
|
}
|
||||||
|
|
||||||
|
refresh() {
|
||||||
|
this.refreshKey = Math.random();
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,187 @@
|
|||||||
|
<template>
|
||||||
|
<div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
|
||||||
|
<div class="item-main">
|
||||||
|
<div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
|
||||||
|
<Icon class="item-main-icon"></Icon>
|
||||||
|
<div class="item-main-info">
|
||||||
|
<div class="item-main-info-name">
|
||||||
|
{{ name }}
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory';
|
||||||
|
import { DocumentText, FileTray, Help, Image, LogoChrome, LogoCss3, LogoJavascript, LogoVue, PlayCircle, EllipsisVertical, Disc } from '@vicons/ionicons5';
|
||||||
|
import { computed, ref } from 'vue';
|
||||||
|
import dateFormatter from '@/hooks/dateFormatter';
|
||||||
|
import useDataBus from '@/hooks/useDataBus';
|
||||||
|
import { NDropdown } from 'naive-ui';
|
||||||
|
|
||||||
|
const dataBus = useDataBus()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
download: []
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
item: VirtualDirectory | VirtualFile
|
||||||
|
name?: string
|
||||||
|
color:string
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const itemType = ref<'file' | 'directory'>(props.item.type)
|
||||||
|
|
||||||
|
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: 'delete'
|
||||||
|
}]
|
||||||
|
if(itemType.value === 'file'){
|
||||||
|
options.push(...[
|
||||||
|
{
|
||||||
|
label: '下载',
|
||||||
|
key: 'download',
|
||||||
|
}
|
||||||
|
])
|
||||||
|
}
|
||||||
|
return options
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleDropdownSelect = (key: 'download') => {
|
||||||
|
console.log(key)
|
||||||
|
emit(key)
|
||||||
|
}
|
||||||
|
|
||||||
|
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 = () => {
|
||||||
|
dataBus.set('dragData', [ props.item ])
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.miao-item {
|
||||||
|
cursor: pointer;
|
||||||
|
width: calc(100% - 16px);
|
||||||
|
min-width: 250px;
|
||||||
|
// aspect-ratio: 66/9;
|
||||||
|
height: 50px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 10px 8px;
|
||||||
|
.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;
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.item-main-info {
|
||||||
|
margin-left: 10px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
&-name {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
&-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
<template>
|
||||||
|
<transition name="transition">
|
||||||
|
<div class="mask-body" ref="maskBodyRef" v-show="showMask">
|
||||||
|
<div @click="e=>e.stopPropagation()">
|
||||||
|
<slot> {{}} </slot>
|
||||||
|
</div>
|
||||||
|
</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;
|
||||||
|
&-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>
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
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'
|
||||||
|
},
|
||||||
|
enableUpload: true,
|
||||||
|
};
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
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;
|
||||||
|
}
|
||||||
@@ -0,0 +1,109 @@
|
|||||||
|
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
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
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
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
const dataStorage: any = {};
|
||||||
|
|
||||||
|
export default function useDataBus() {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1,95 @@
|
|||||||
|
import VirtualDirectory from "@/class/VirtualDirectory";
|
||||||
|
import { getOption, getResponse, miaoFetchConfig, uploadOption } 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;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 上传单个文件到对应文件夹
|
||||||
|
*/
|
||||||
|
upload(file: File, targetVDir: VirtualDirectory, option?: uploadOption) {
|
||||||
|
const { baseUrl, api } = Config;
|
||||||
|
const url = `${baseUrl}${api.upload}${targetVDir.path}`;
|
||||||
|
const retry = option?.retry ?? 0;
|
||||||
|
const { miaoFetch, abortMiaoFetch } = useMiaoFetch({
|
||||||
|
retry
|
||||||
|
});
|
||||||
|
const sizeTotal = file.size
|
||||||
|
|
||||||
|
const opType = option?.type ?? 'write'
|
||||||
|
|
||||||
|
const data = new FormData()
|
||||||
|
|
||||||
|
data.append('file', file)
|
||||||
|
data.append('oprateType', opType)
|
||||||
|
|
||||||
|
return {
|
||||||
|
abort: () => abortMiaoFetch(),
|
||||||
|
status: new Promise(async (resolve)=>{
|
||||||
|
const response = await miaoFetch({
|
||||||
|
url,
|
||||||
|
method: 'post',
|
||||||
|
data: data,
|
||||||
|
onUploadProgress(progressEvent) {
|
||||||
|
option && option.onProcess && option.onProcess(progressEvent.loaded / sizeTotal)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
resolve(response.data)
|
||||||
|
})
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function useMiaoFetchApi() {
|
||||||
|
return miaoFetchApi;
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
import UploadQueue from "@/class/UploadQueue";
|
||||||
|
|
||||||
|
const uploadQueue = new UploadQueue()
|
||||||
|
|
||||||
|
export default () => uploadQueue
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
createApp(App).mount('#app')
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
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
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
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;
|
||||||
|
};
|
||||||
@@ -0,0 +1,276 @@
|
|||||||
|
<template>
|
||||||
|
<div class="miao-directory-item-container" ref="rootDomRef" >
|
||||||
|
<div class="container-top" :style="{ backgroundColor: props.index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)' }">
|
||||||
|
<div class="container-top-colorbar" :style="{ backgroundColor: props.color }"></div>
|
||||||
|
<div class="container-top-breadcrumb">
|
||||||
|
<!-- <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?.directoryArray" @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: props.index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)' }">
|
||||||
|
<n-scrollbar>
|
||||||
|
<miaoDirectoryItem v-for="(dir) in currentDirectory?.directorys" @click="setCurrentDirectory(dir)" :item="dir" :key="dir.uid" :color="props.color" />
|
||||||
|
<miaoDirectoryItem
|
||||||
|
v-for="(file) in currentDirectory?.files"
|
||||||
|
:item="file"
|
||||||
|
:key="file.uid"
|
||||||
|
@click="openUrl(`${baseUrl}${api.get}${file.path}`)"
|
||||||
|
@download="openUrl(`${baseUrl}${api.get}${file.path}`, {download: file.name})"
|
||||||
|
:color="props.color"
|
||||||
|
/>
|
||||||
|
</n-scrollbar>
|
||||||
|
</div>
|
||||||
|
<div class="container-bottom" :style="{ backgroundColor: props.index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)' }"></div>
|
||||||
|
<miaoMask v-model:show="showModel"></miaoMask>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { NBreadcrumbItem, NBreadcrumb, NIcon, NScrollbar } from 'naive-ui'
|
||||||
|
import type { file, directory } from '@/types/type.ts'
|
||||||
|
import VirtualDirectory from '@/class/VirtualDirectory';
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
import Config from '@/config'
|
||||||
|
import dropHandler, { dropHandlerHooks } from '@/hooks/dropHandler';
|
||||||
|
import miaoMask from '@/components/miaoMask.vue';
|
||||||
|
import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue';
|
||||||
|
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi';
|
||||||
|
import useDataBus from '@/hooks/useDataBus';
|
||||||
|
import { CloudOutline, ChevronBackOutline, ReloadOutline, CloseOutline } from '@vicons/ionicons5'
|
||||||
|
import useUploadQueue from '@/hooks/useUploadQueue';
|
||||||
|
|
||||||
|
const { baseUrl, api } = Config
|
||||||
|
const dataBus = useDataBus()
|
||||||
|
|
||||||
|
const miaoFetchApi = useMiaoFetchApi()
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
color: string
|
||||||
|
index: number
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
exit: []
|
||||||
|
}>()
|
||||||
|
|
||||||
|
// 目前展示的Dir
|
||||||
|
const currentDirectory = defineModel<VirtualDirectory | undefined>('currentDirectory', { required: true })
|
||||||
|
|
||||||
|
// 是否显示模态框
|
||||||
|
const showModel = ref(0)
|
||||||
|
|
||||||
|
// 用于监听拖拽文件事件
|
||||||
|
const rootDomRef = ref<HTMLDivElement>()
|
||||||
|
|
||||||
|
const uploadQueue = useUploadQueue()
|
||||||
|
|
||||||
|
// 设置显示的dir
|
||||||
|
const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
|
||||||
|
// 若没有缓存数据则同步刷新，有缓存数据则异步刷新
|
||||||
|
if (virtualDirectory.files === undefined || virtualDirectory.directorys === undefined) {
|
||||||
|
const data: (file | directory)[] = await miaoFetchApi.get(virtualDirectory)
|
||||||
|
virtualDirectory.updateContent(data)
|
||||||
|
} else {
|
||||||
|
; (async () => {
|
||||||
|
const data: (file | directory)[] = await miaoFetchApi.get(virtualDirectory)
|
||||||
|
virtualDirectory.updateContent(data)
|
||||||
|
currentDirectory.value = undefined
|
||||||
|
currentDirectory.value = virtualDirectory
|
||||||
|
})()
|
||||||
|
}
|
||||||
|
// 刷新一下
|
||||||
|
currentDirectory.value = undefined
|
||||||
|
currentDirectory.value = virtualDirectory
|
||||||
|
// emit("onCurrentDirectoryChange", currentDirectory.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
const reload = () => {
|
||||||
|
currentDirectory.value && setCurrentDirectory(currentDirectory.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
const openUrl = (href: string, config?: {
|
||||||
|
download?: string
|
||||||
|
target?: string
|
||||||
|
}) => {
|
||||||
|
let {target, download} = config ?? {}
|
||||||
|
|
||||||
|
console.log({target, download, href})
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.setAttribute('href', href);
|
||||||
|
a.setAttribute('target', target ?? '_blank')
|
||||||
|
download && a.setAttribute('download', download);
|
||||||
|
a.click();
|
||||||
|
// var a = document.createElement("a");
|
||||||
|
// a.setAttribute('href', href)
|
||||||
|
// a.setAttribute('target', target ?? '_blank')
|
||||||
|
// a.setAttribute('download', download ?? '')
|
||||||
|
// console.log({target, download})
|
||||||
|
// a.click();
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleBack = () => {
|
||||||
|
if(currentDirectory.value?.parent){
|
||||||
|
setCurrentDirectory(currentDirectory.value.parent)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleReload = () => {
|
||||||
|
reload()
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
currentDirectory.value && await setCurrentDirectory(currentDirectory.value)
|
||||||
|
// 拖动事件处理
|
||||||
|
const dropFileOption:dropHandlerHooks = {
|
||||||
|
onDropFiles(files: File[]) {
|
||||||
|
const dragData = dataBus.pop('dragData')
|
||||||
|
console.log({dragData, files})
|
||||||
|
if(files && files.length > 0){
|
||||||
|
currentDirectory.value && uploadQueue.push(files, currentDirectory.value, {
|
||||||
|
onFinish() {
|
||||||
|
reload()
|
||||||
|
},
|
||||||
|
})
|
||||||
|
const _f = files[0]
|
||||||
|
currentDirectory.value && miaoFetchApi.upload(_f, currentDirectory.value)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onEnter() {
|
||||||
|
showModel.value += 1
|
||||||
|
},
|
||||||
|
onEnd() {
|
||||||
|
showModel.value -= 1
|
||||||
|
},
|
||||||
|
}
|
||||||
|
rootDomRef.value && dropHandler(rootDomRef.value, dropFileOption)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
$top-height: 30px;
|
||||||
|
$bottom-bar-height: 60px;
|
||||||
|
|
||||||
|
.miao-directory-item-container {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
width: inherit;
|
||||||
|
min-width: 266px;
|
||||||
|
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-colorbar {
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
.container-bottom {
|
||||||
|
height: $bottom-bar-height;
|
||||||
|
background-color: bisque;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
user-select: none;
|
||||||
|
box-shadow: 0px 1px 10px #888888;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Vendored
+1
@@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"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"]
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"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"]
|
||||||
|
}
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
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")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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