10 Commits
Author SHA1 Message Date
539943419 afc57bc229 fix: 修正错别字 2024-08-23 10:00:53 +08:00
539943419 28ee6daab4 feat: 添加上传文件接口 2024-08-16 17:04:19 +08:00
539943419 59dbbb288c feat: 新增剪切与重命名的api 2024-08-16 00:40:16 +08:00
539943419 e0febdfa07 ... 2024-08-13 21:05:01 +08:00
539943419 d18ffaafc6 replace fs.rmdir to fs.rm 2024-08-11 23:02:09 +08:00
539943419 64259e37f4 添加delete, query的api, 修复上传中文名文件乱码的问题 2024-08-11 22:39:20 +08:00
539943419 737ee87bae 拆分文件,增加上传接口 2024-08-11 14:55:37 +08:00
539943419 f22dd54490 fix 2024-08-11 09:26:23 +08:00
539943419 233db48aae fix 2024-08-11 01:03:21 +08:00
539943419 4c87bea073 init 2024-08-09 16:19:41 +08:00
35 changed files with 1114 additions and 2279 deletions

No files matched your search

+1 -24
View File
@@ -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
-5
View File
@@ -1,5 +0,0 @@
# 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).
+33
View File
@@ -0,0 +1,33 @@
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 });
});
}
+40
View File
@@ -0,0 +1,40 @@
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 });
});
}
+50
View File
@@ -0,0 +1,50 @@
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));
}
+23
View File
@@ -0,0 +1,23 @@
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' })
})
})
}
+15
View File
@@ -0,0 +1,15 @@
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));
});
}
+34
View File
@@ -0,0 +1,34 @@
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 });
});
}
+37
View File
@@ -0,0 +1,37 @@
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' });
});
}
});
}
+17
View File
@@ -0,0 +1,17 @@
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 }
+11
View File
@@ -0,0 +1,11 @@
/**
* 生成一个id,不唯一的几率比因为我代码烂的几率低
* @param length 生成id的长度
* @returns {number}
*/
export default function generateId(length) {
length || (length = 16);
let id = Math.ceil(Math.random() * 10 ** 16);
return id
}
+79
View File
@@ -0,0 +1,79 @@
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
View File
@@ -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>
+45
View File
@@ -0,0 +1,45 @@
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}`);
}
}
});
+25 -22
View File
@@ -1,24 +1,27 @@
{ {
"name": "miao-directory-web", "name": "miao-directory",
"private": true, "version": "1.0.0",
"version": "0.0.0", "description": "",
"type": "module", "main": "index.js",
"scripts": { "type": "module",
"dev": "vite", "scripts": {
"build": "vue-tsc -b && vite build", "dev": "ts-node index.js",
"preview": "vite preview" "dev:bun": "bun index.js",
}, "serve": "node dist/index.min.js",
"dependencies": { "serve:bun": "bun dist/index.min.js",
"@vicons/ionicons5": "^0.12.0", "build": "ncc build index.js && uglifyjs dist/index.js -o dist/index.min.js"
"naive-ui": "^2.39.0", },
"sass": "^1.77.8", "keywords": [],
"vue": "^3.4.35" "author": "",
}, "license": "ISC",
"devDependencies": { "dependencies": {
"@types/node": "^22.1.0", "cors": "^2.8.5",
"@vitejs/plugin-vue": "^5.1.2", "express": "^4.19.2",
"typescript": "^5.5.3", "multer": "1.4.5-lts.1",
"vite": "^5.4.0", "ts-node": "^10.9.2"
"vue-tsc": "^2.0.29" },
} "devDependencies": {
"@vercel/ncc": "^0.38.1",
"uglify-js": "^3.19.1"
}
} }
+704 -1020
View File
File diff suppressed because it is too large. Load diff
-206
View File
@@ -1,206 +0,0 @@
<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import { NIcon, NScrollbar } from 'naive-ui';
import { EyeOffOutline, EyeOutline, CloseOutline, CopyOutline, EllipsisVertical } from '@vicons/ionicons5'
import miaoDirectory from './views/miaoDirectory.vue';
import VirtualPage from './class/virtualPage';
import VirtualDirectory from './class/virtualDirectory';
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)
}
}
onMounted(() => {
createView(rootDirectory)
})
// todo: 让所有伪页面共享一个rootDirectory
</script>
<template>
<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-icon class="icon" @click="">
<EllipsisVertical class="icon-inner" />
</n-icon>
</div>
</div>
</div>
<div class="view-container">
<div class="view" 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>
</template>
<style lang="scss" scoped>
$controler-height: 25px;
.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 {
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>
-131
View File
@@ -1,131 +0,0 @@
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;
-48
View File
@@ -1,48 +0,0 @@
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();
}
}
@@ -1,182 +0,0 @@
<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 = []
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%;
}
.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>
-48
View File
@@ -1,48 +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;
&-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>
-9
View File
@@ -1,9 +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'
}
};
-20
View File
@@ -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;
}
-109
View File
@@ -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
);
}
-16
View File
@@ -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
}
-15
View File
@@ -1,15 +0,0 @@
const dataStorage: any = {};
export default function useDataBus() {
return {
set(key: string | number, value: any) {
dataStorage[key] = value;
return value;
},
get(key: string | number) {
const value = dataStorage[key];
dataStorage[key] = undefined;
return value;
}
};
}
-22
View File
@@ -1,22 +0,0 @@
type miaoFetchConfig = {
retry: number;
};
export default function useMiaoFetch(config: miaoFetchConfig) {
const { retry } = config;
return async (input: RequestInfo | URL, init?: RequestInit) => {
let retryTimes = 0;
let err: any;
while (retryTimes <= retry) {
try {
const response = await fetch(input, init);
return response;
} catch (e) {
err = e;
retryTimes += 1;
}
}
throw err;
};
}
-4
View File
@@ -1,4 +0,0 @@
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
-22
View File
@@ -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;
};
-262
View File
@@ -1,262 +0,0 @@
<template>
<div class="miao-directory-item-container" ref="rootDomRef">
<div class="container-top">
<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 useMiaoFetch from '@/hooks/useMiaoFetch';
import useDataBus from '@/hooks/useDataBus';
import { CloudOutline, ChevronBackOutline, ReloadOutline, CloseOutline } from '@vicons/ionicons5'
const { baseUrl, api } = Config
const dataBus = useDataBus()
const miaoFetch = useMiaoFetch({
retry: 5,
})
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>()
// 设置显示的dir
const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
// 若没有缓存数据则同步刷新,有缓存数据则异步刷新
if (virtualDirectory.files === undefined || virtualDirectory.directorys === undefined) {
const data: (file | directory)[] = await (await miaoFetch(`${baseUrl}${api.get}${virtualDirectory.path}`)).json()
virtualDirectory.updateContent(data)
} else {
; (async () => {
const data: (file | directory)[] = await (await miaoFetch(`${baseUrl}${api.get}${virtualDirectory.path}`)).json()
virtualDirectory.updateContent(data)
currentDirectory.value = undefined
currentDirectory.value = virtualDirectory
})()
}
// 刷新一下
currentDirectory.value = undefined
currentDirectory.value = virtualDirectory
// emit("onCurrentDirectoryChange", currentDirectory.value)
}
const openUrl = (href: string, config?: {
download?: string
target?: string
}) => {
let {target, download} = config ?? {}
console.log({target, download})
const a = document.createElement('a');
a.setAttribute('href', href);
a.setAttribute('target', target ?? '_blank')
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 = () => {
currentDirectory.value && setCurrentDirectory(currentDirectory.value)
}
onMounted(async () => {
currentDirectory.value && await setCurrentDirectory(currentDirectory.value)
// 拖动事件处理
const dropFileOption:dropHandlerHooks = {
onDropFiles(files: File[]) {
const dragData = dataBus.get('dragData')
console.log({dragData, files})
},
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: -1px;
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>
-1
View File
@@ -1 +0,0 @@
/// <reference types="vite/client" />
-28
View File
@@ -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"]
}
-7
View File
@@ -1,7 +0,0 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}
-22
View File
@@ -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"]
}
-37
View File
@@ -1,37 +0,0 @@
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": resolve(__dirname, "src")
}
},
server: {
proxy: {
"/get": {
target: "http://127.0.0.1:17705",
changeOrigin: true,
rewrite: path => path.replace(/^\/get/, "/get")
}
}
},
build: {
rollupOptions: {
input: {
main: resolve(__dirname, "index.html")
},
output: {
// 配置输出为单文件
inlineDynamicImports: true,
manualChunks: undefined,
entryFileNames: "bundle.js",
format: "iife", // 立即执行函数格式
name: "MyBundle"
}
}
}
});