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

Compare commits

base: 539943419/miaoDirectory:1.8.0
539943419/miaoDirectory:main 539943419/miaoDirectory:serve-go 539943419/miaoDirectory:serve
539943419/miaoDirectory:2.0.0 539943419/miaoDirectory:1.8.0
...
compare: 539943419/miaoDirectory:171af1219ee28881e5499ee20aa33a0a5e75b0f9
539943419/miaoDirectory:main 539943419/miaoDirectory:serve-go 539943419/miaoDirectory:serve
539943419/miaoDirectory:2.0.0 539943419/miaoDirectory:1.8.0
61 Commits
1.8.0 ... 171af1219e
Author SHA1 Message Date
539943419 171af1219e feat: 歌单内元素懒加载 2024-09-27 18:23:40 +08:00
539943419 cdc0bce108 feat: 优化体验 2024-09-27 17:15:40 +08:00
539943419 c6b20b5b64 feat: 音乐插件拖动添加动画效果 2024-09-27 16:58:26 +08:00
539943419 37791ab04e feat: 添加插件优先级 2024-09-27 16:34:06 +08:00
539943419 e155524e3e style: 样式修改 2024-09-27 16:08:34 +08:00
539943419 dafe494ce9 style: 样式调整 2024-09-27 15:51:52 +08:00
539943419 55381df4f6 feat: 歌单支持拖动排序 2024-09-27 15:03:43 +08:00
539943419 38e1b098d2 feat: 1. 更新音乐插件 2. 组件注册插件增加单插件模式 2024-09-27 14:04:41 +08:00
539943419 4b5b7956c7 feat: 用aplayer随便做了一个音乐插件 2024-09-27 00:42:15 +08:00
539943419 5173b28ec5 feat: 优化视频插件 2024-09-26 20:38:57 +08:00
539943419 8d738ef3f9 fix: 修正视频插件样式全屏不生效的问题 2024-09-26 17:57:14 +08:00
539943419 96ca8fcf4c Merge branch 'main' of http://git.miaospring.top:3000/539943419/miaoDirectory 2024-09-26 17:02:41 +08:00
539943419 54c48c0f8f feat: 为xgplayer增加一个类似于bilibili的锁定的插件 2024-09-26 17:02:28 +08:00
539943419 f2ff05f4e3 feat: 初步实现基于iframe的插件的部分逻辑。 2024-09-12 03:31:20 +08:00
539943419 ff7d0d8d51 feat: 添加一个复制文件链接到剪切板的插件 2024-09-08 05:57:13 +08:00
539943419 0e631a6f34 feat: miaoDirectory中选项栏增加多选相关操作 2024-09-05 12:46:09 +08:00
539943419 0ab58b24d9 fix: 修正了图片浏览插件高度异常的问题 2024-09-05 00:28:58 +08:00
539943419 b0cf5b312a feat: 插件加载提示只在第一次加载时弹出（后面插件会缓存下来） 2024-09-05 00:12:35 +08:00
539943419 ec4ed10afd feat: 1.插件加载时会有全局提示。2.重命名miaoMessageProvider为miaoAlertTipProvider 2024-09-05 00:10:36 +08:00
539943419 3a18bb3cbd feat: 1.现在miaoFetchApi.getFile始终返回Promise<uint8array>. 2.增加文件加/解密插件，样式还没写，加密功能是挺正常的。3.加了个插件模板 2024-09-04 17:30:22 +08:00
539943419 282bf327bb feat: 插件注册增加disable和exitConfirm 2024-09-04 14:19:11 +08:00
539943419 4d2bd3867f feat: 重新组织代码结构 2024-09-04 11:47:14 +08:00
539943419 afb2440d8b feat: 增加测试导入插件（已禁用）, 更新vue版本 2024-09-04 10:38:19 +08:00
539943419 8b55ac2854 feat: 使用vue3.5稳定版。增加一个未完成的导入插件的插件。 2024-09-04 00:02:24 +08:00
539943419 f0748997be fix: .. 2024-09-03 09:44:53 +08:00
539943419 b2c5c7cc6d feat: 1.升级vue版本，2.修正tabs在剩余2个时动画不正确的问题 2024-09-03 09:27:51 +08:00
539943419 d16f11c263 feat: codemirror插件的请求禁止使用缓存 2024-09-02 23:13:27 +08:00
539943419 0f6e817966 feat: 1.优化images样式表现。2.增加markdown浏览插件 2024-09-02 21:04:07 +08:00
539943419 6b8f7aa6b4 feat: 1.给插件新增一些属性。2.重构图片浏览组件，根据时间分组浏览 2024-09-02 17:59:49 +08:00
539943419 78dac7482c update readme 2024-09-02 00:56:05 +08:00
539943419 9aec221ea3 feat: 重构部分组件，使miaoDirectoryItem更加通用 2024-09-01 14:45:29 +08:00
539943419 938dde4c1c feat: 屏蔽miaoDirectory底部工具栏，更新readme计划书 2024-09-01 04:18:41 +08:00
539943419 8e884eb178 feat: 优化代码表现 2024-09-01 03:39:50 +08:00
539943419 8c65e66ab6 style: 微调样式 2024-08-31 17:30:21 +08:00
539943419 a34e27cc65 feat: 添加miaoMessageProvider 2024-08-31 17:19:19 +08:00
539943419 de2e53cbcf fix: 1.修复了图片插件可用性判断的问题。2.修复了code插件样式错误的问题 2024-08-31 14:18:39 +08:00
539943419 b3c6dad1b1 fix: 修复了miaoDirectory在特殊情况下显示异常的问题。 2024-08-31 00:12:56 +08:00
539943419 fcb2fe8f7f fix: 1.修复了切换文件夹后无法自动滚动到顶部的问题。2.修复了图标路径错误的问题。 2024-08-30 23:56:20 +08:00
539943419 c02f6743e3 feat: 1.拆分miaoDirectory，右上角退出按钮改为小菜单，增加搜索，屏蔽文件夹等功能。2.更新readme 2024-08-30 23:29:28 +08:00
539943419 3e24d4a363 fix: 修正miaoDirectoryItem部分图片文件图标显示错误问题 2024-08-30 21:25:40 +08:00
539943419 7574acdad2 feat: 1.优化了miaoDirectory中多选的性能表现。2.图片浏览组件新增拖入虚拟文件/文件夹相关处理 2024-08-30 20:58:18 +08:00
539943419 704c80e019 feat: 1.通过懒加载大大优化miaoDirectory的使用体验。2.现在切换文件夹时会自动清空多选文件列表。 2024-08-30 16:41:04 +08:00
539943419 210e251b23 feat: 添加一个没啥功能的图片浏览插件 2024-08-30 05:15:32 +08:00
539943419 93ca2a29a6 fix: 修正大量拼写错误 2024-08-30 03:12:18 +08:00
539943419 25f25ff669 feat: 配置交叉编译。 2024-08-29 23:56:43 +08:00
539943419 f2333f74cb feat: 添加图标，因有bug故暂时取消代码编辑主题功能 2024-08-29 20:26:16 +08:00
539943419 d0bad77387 Merge branch 'main' of http://git.miaospring.top:3000/539943419/miaoDirectory 2024-08-29 18:50:38 +08:00
539943419 f8ca6dba67 feat: 新增了代码编辑插件的主题选择（当然样式还是没改） 2024-08-29 17:58:35 +08:00
539943419 2d401f7a17 feat: 新增build:auto可以一键直接build出exe文件 2024-08-29 15:56:19 +08:00
539943419 ef5a8f1a9e feat: 为代码编辑插件增加了更多的语言支持，修复了一些bug，样式还没写。 2024-08-29 15:19:36 +08:00
539943419 86b3a02237 feat: 配置了插件动态导入，新增了一个完成度不高的代码编辑插件 2024-08-29 12:24:40 +08:00
539943419 ea43e641ce feat: 优化player插件的样式 2024-08-28 21:25:34 +08:00
539943419 803fd69850 feat: 优化PDF插件的放缩操作实现 2024-08-28 21:13:24 +08:00
539943419 f6c1ba199f feat: 优化了PDF插件的相关表现 2024-08-28 20:27:48 +08:00
539943419 c595ebb260 feat: 添加一个急需缩放功能的pdf插件 2024-08-28 17:59:14 +08:00
539943419 d5d9984ae5 fix: 删除无用函数，变量 2024-08-28 11:52:24 +08:00
539943419 3a48fd5643 feat: 视频播放器字幕添加对ass, ssa格式字幕的支持。优化视频插件与文件夹插件的相关逻辑 2024-08-28 11:49:48 +08:00
539943419 f578072997 feat: 视频播放插件添加了一个极其简陋的字幕 2024-08-27 20:42:53 +08:00
539943419 632a562348 feat: 视频播放器风格修正，卸载页面时卸载视频播放器 2024-08-24 15:22:49 +08:00
539943419 1f6c924e11 feat: 1.新增视频播放插件。2.新增插件中心 2024-08-24 14:20:33 +08:00
539943419 f5e0bd4a56 style: 添加tab的文本省略 2024-08-23 14:28:35 +08:00
66 changed files with 9122 additions and 1373 deletions
Expand all files Collapse all files

No files matched your search

.gitignore
+4
View File
@@ -24,3 +24,7 @@ dist-ssr
*.sw? *.sw?
.vscode .vscode
serve serve
miao-directory.exe
miao-directory-amd64-linux
miao-directory-amd64-win.exe
test
README.md
+29 -11
View File
@@ -1,11 +1,29 @@
todo: 标签页，miaoDirectory切换动画 [finish] ## TODO list:
todo: 重构virtualPage，所有page以插件形式使用 [finish]
todo: miaoDirectory插件化，为后续插件功能开发做准备 [finish] | 计划 | 状态 |
todo: miaoPopupInput, 弹出一个输入框 [finish] |---|---|
todo: miaoDirectory的重命名功能 [finish] | 拆分miaoDirectory | ✅ |
todo: miaoDirectory的剪切功能 [finish] | 完善视频插件 | ✅ |
todo: miaoDirectory的上传按钮 [finish] | 完善PDF插件 | ✅ |
todo: miaoDirectory的新建文件/文件夹功能 [finish] | 完善Code插件 | ✅ |
todo: miaoDirectory的多选功能 [finish] | 实现miaoDirectory的搜索功能 | ✅ |
todo: VirtualDirectory更新时更新文件信息 | 重构miaoFetchApi.getFile， 增加进度 | ❌ |
todo: miaoDirectory的复制文件/文件夹功能 | plugin增加些属性，icon, disable, group之类的 | ❌ |
| 完善miaoDirectory的搜索功能 | ❌ |
| 实现miaoDirectory的排序功能 | ❌ |
| 完善图片浏览插件 | ❌ |
| VirtualDirectory更新时更新文件信息 | ❌ |
| 创建音乐播放器组件（仿QQ音乐移动端吧） | ❌ |
| miaoDirectory的复制文件/文件夹功能 | ❌ |
| 重构miaoDropHandler的实现 | ❌ |
| 重构主界面，拆分主界面组件的实现 | ❌ |
| 长期计划 |
|---|
| 重构virtualDirectory，使其不用直接拥有父文件夹 |
| 重构virtualDirectory，使其不用直接拥有父文件夹 |
## 碎碎念：
为什么不直接做成类似于windows的风格呢？其实技术实现上问题应该不大，重构也不用重构太多东西（APP.vue改改，插件部分改改这样），但是开学了事情一大堆，实习又没法比较美好地推掉。平时每天到宿舍都精疲力竭还要准备秋招和学校的破事。更何况搞不好还会被两个学分卡得没法毕业，好烦好烦。md想这么多干嘛，反正都快岩壁了，mdmdmdmd
index.html
+2 -2
View File
@@ -2,9 +2,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="./icon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MDW</title> <title>MiaoDirectory</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
package.json
+53 -27
View File
@@ -1,29 +1,55 @@
{ {
"name": "miao-directory-web", "name": "miao-directory-web",
"private": true, "private": true,
"version": "0.0.0", "version": "0.0.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"dev:host": "vite --host 0.0.0.0", "dev:host": "vite --host 0.0.0.0",
"build": "vue-tsc -b && vite build", "build": "vue-tsc -b && vite build",
"preview": "vite preview" "build:auto": "pnpm run build && go env -w GOOS=windows GOARCH=amd64 && rm -rf ./serve/web/* && cp -r ./dist/* ./serve/web/ && cd ./serve && go env -w GOOS=windows && go build -o ../miao-directory.exe",
}, "build:auto:release": "pnpm run build && rm -rf ./serve/web/* && cp -r ./dist/* ./serve/web/ && cd ./serve && go env -w GOOS=windows GOARCH=amd64 && go build -o ../miao-directory-amd64-win.exe && go env -w GOOS=linux GOARCH=amd64 && go build -o ../miao-directory-amd64-linux",
"dependencies": { "preview": "vite preview"
"@vicons/ionicons5": "^0.12.0", },
"axios": "^1.7.3", "dependencies": {
"lodash": "^4.17.21", "@codemirror/lang-go": "^6.0.1",
"naive-ui": "^2.39.0", "@codemirror/lang-html": "^6.4.9",
"sass": "^1.77.8", "@codemirror/lang-javascript": "^6.2.2",
"vue": "^3.4.35" "@codemirror/lang-json": "^6.0.1",
}, "@codemirror/lang-markdown": "^6.2.5",
"devDependencies": { "@codemirror/lang-python": "^6.1.6",
"@types/lodash": "^4.17.7", "@codemirror/lang-sass": "^6.0.2",
"@types/node": "^22.1.0", "@codemirror/lang-sql": "^6.7.1",
"@vitejs/plugin-vue": "^5.1.2", "@codemirror/lang-vue": "^0.1.3",
"typescript": "^5.5.3", "@codemirror/lang-xml": "^6.1.0",
"vite": "^5.4.0", "@codemirror/lang-yaml": "^6.1.1",
"vite-plugin-singlefile": "^2.0.2", "@vicons/ionicons5": "^0.12.0",
"vue-tsc": "^2.0.29" "aes-js": "^3.1.2",
} "aplayer": "^1.10.1",
"axios": "^1.7.3",
"codemirror": "^6.0.1",
"copy-to-clipboard": "^3.3.3",
"lodash": "^4.17.21",
"markdown-it": "^14.1.0",
"naive-ui": "^2.39.0",
"pdfjs-dist": "^4.5.136",
"sass": "^1.77.8",
"vue": "3.5.0",
"vue-codemirror": "^6.1.1",
"vue-draggable-plus": "^0.5.3",
"xgplayer": "^3.0.20",
"xgplayer-subtitles": "^3.0.20"
},
"devDependencies": {
"@types/aes-js": "^3.1.4",
"@types/lodash": "^4.17.7",
"@types/markdown-it": "^14.1.2",
"@types/node": "^22.1.0",
"@types/pdfjs-dist": "^2.10.378",
"@vitejs/plugin-vue": "^5.1.2",
"typescript": "^5.5.3",
"vite": "^5.4.0",
"vite-plugin-singlefile": "^2.0.2",
"vue-tsc": "^2.0.29"
}
} }
pnpm-lock.yaml
Generated
+1350 -66
View File
File diff suppressed because it is too large. Load diff
public/icon.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

src/App.vue
+110 -113
View File
@@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { h, onMounted, reactive, ref, shallowRef } from 'vue' import { h, onMounted, provide, reactive, ref, shallowRef, useTemplateRef } from 'vue'
import { NIcon, NScrollbar, NDropdown, NQrCode } from 'naive-ui' import { NIcon, NScrollbar, NDropdown } from 'naive-ui'
import { import {
EyeOffOutline, EyeOffOutline,
EyeOutline, EyeOutline,
@@ -9,12 +9,14 @@ import {
EllipsisVertical, EllipsisVertical,
QrCodeOutline QrCodeOutline
} from '@vicons/ionicons5' } from '@vicons/ionicons5'
import miaoDirectory from './views/miaoDirectory.vue'
import VirtualPage from './class/VirtualPage'
import VirtualDirectory, { VirtualFile } from './class/VirtualDirectory' import VirtualDirectory, { VirtualFile } from './class/VirtualDirectory'
import MiaoMask from './components/miaoMask.vue' import MiaoMask from './components/miaoMask.vue'
import MiaoMessageProvider from './components/miaoAlertTipProvider.vue'
import config from './config' import config from './config'
import useVirtualPages from './hooks/useVirtualPages' import useVirtualPages from './hooks/useVirtualPages'
import init from './hooks/init'
import usePluginCenter from './hooks/usePluginCenter'
import PluginCenter from './class/PluginCenter'
const { baseUrl } = config const { baseUrl } = config
@@ -25,7 +27,10 @@ const modalData = shallowRef<{
props: any props: any
}>() }>()
const messageProviderRef = useTemplateRef('messageProviderRef')
const views = useVirtualPages() const views = useVirtualPages()
let pluginCenter: PluginCenter
const rootDirectory = reactive( const rootDirectory = reactive(
new VirtualDirectory({ new VirtualDirectory({
@@ -42,38 +47,31 @@ const rootDirectory = reactive(
// component就是一个vue组件，类似于miaoDirectory // component就是一个vue组件，类似于miaoDirectory
const createView = ( const createView = (
component: any, component: any,
currentDirectorys?: VirtualDirectory[], currentDirectories?: VirtualDirectory[],
currentFiles?: VirtualFile[], currentFiles?: VirtualFile[],
index?: number index?: number
) => { ) => {
index ?? (index = views.length) views.push(component, currentDirectories, currentFiles, { index })
views.splice(
index,
0,
reactive<VirtualPage>(new VirtualPage(component, {
directorys: [...(currentDirectorys ?? [])],
files: [...(currentFiles ?? [])]
}))
)
} }
const deleteView = (index: number) => { const deleteView = (index: number) => {
views.splice(index, 1) views.deleteView(index)
if (views.length === 0) { if (views.length === 0) {
createView(miaoDirectory, [rootDirectory]) pluginCenter.usePlugin('miaoDirectory', [rootDirectory], [])
} }
} }
// 点击标题是隐藏其他标签或显示其他标签，还挺好用的 // 点击标题是隐藏其他标签或显示其他标签，还挺好用的
const handleClickTitle = (index: number) => { const handleClickTitle = (index: number) => {
let count = views.filter((v) => v.visible).length let count = views._views.filter((v) => v.visible).length
let op = !views[index].visible || count > 1 ? 'hideOthers' : 'showOthers' let op =
!views._views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
let _index = 0 let _index = 0
while (_index < views.length) { while (_index < views._views.length) {
if (_index !== index) { if (_index !== index) {
views[_index].visible = op === 'hideOthers' ? false : true views._views[_index].visible = op === 'hideOthers' ? false : true
} else { } else {
views[_index].visible = true views._views[_index].visible = true
} }
_index += 1 _index += 1
} }
@@ -96,11 +94,11 @@ const openMenuOption = [
} }
] ]
const handleMenuSelect = (key: string) => { const handleMenuSelect = async (key: string) => {
if (key === 'share') { if (key === 'share') {
showModal.value = true showModal.value = true
modalData.value = { modalData.value = {
component: NQrCode, component: (await import('naive-ui/es/qr-code')).NQrCode,
props: { props: {
value: baseUrl, value: baseUrl,
size: 300, size: 300,
@@ -110,103 +108,88 @@ const handleMenuSelect = (key: string) => {
} }
} }
onMounted(() => { onMounted(async () => {
createView(miaoDirectory, [rootDirectory]) // @ts-ignore
await init(messageProviderRef.value?.alertTip)
pluginCenter = usePluginCenter()
pluginCenter.usePlugin('miaoDirectory', [rootDirectory], [])
}) })
// @ts-ignore
provide('globalAlertTip', messageProviderRef.value?.alertTip)
provide('rootDirectory', rootDirectory)
</script> </script>
<template> <template>
<div class="view"> <div class="view">
<div class="view-controler"> <miao-message-provider ref="messageProviderRef">
<n-scrollbar x-scrollable> <div class="view-controller">
<div class="tags-container"> <n-scrollbar x-scrollable>
<transition-group name="tab"> <div class="tabs-container">
<div <transition-group name="tab">
class="tab" <div class="tab" v-for="(view, index) of views._views" :key="view.id">
v-for="(view, index) of views" <span class="tab-title" :title="view.title" @click="handleClickTitle(index)">
:key="view.uid"> {{
<div view.title.length > 5 && 0
class="tab-title" ? `${view.title.substring(0, 5)}...`
@click="handleClickTitle(index)"> : view.title
{{ view.title }} }}
</div> </span>
<div <div class="tab-control">
class="tab-point" <div class="tab-point" :style="{ backgroundColor: view.color }"></div>
:style="{ backgroundColor: view.color }"></div> <n-icon class="tag-control-icon icon" @click="view.switchShow()">
<div class="tab-control"> <EyeOutline v-show="view.visible" class="icon-inner" />
<n-icon <EyeOffOutline v-show="!view.visible" class="icon-inner" />
class="tag-control-icon icon" </n-icon>
@click="view.switchShow()"> <n-icon class="tag-control-icon icon" @click="
<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( createView(
view.component, view.component,
view.currentDirectorys, view.currentDirectories,
view.currentFiles, view.currentFiles,
index + 1 index + 1
) )
"> " v-if="view.allowCopy">
<CopyOutline /> <CopyOutline />
</n-icon> </n-icon>
<n-icon <n-icon class="tag-control-icon icon" @click="deleteView(index)">
class="tag-control-icon icon" <CloseOutline class="icon-inner" />
@click="deleteView(index)"> </n-icon>
<CloseOutline class="icon-inner" /> </div>
</n-icon>
</div> </div>
</div> </transition-group>
</transition-group> </div>
</div> </n-scrollbar>
</n-scrollbar> <div class="view-controller-menu">
<div class="view-controller-menu"> <div class="view-controller-menu-item">
<div class="view-controller-menu-item"> <n-dropdown trigger="click" :options="openMenuOption" @select="handleMenuSelect">
<n-dropdown <n-icon class="icon">
trigger="click" <EllipsisVertical class="icon-inner" />
:options="openMenuOption" </n-icon>
@select="handleMenuSelect"> </n-dropdown>
<n-icon class="icon"> </div>
<EllipsisVertical class="icon-inner" />
</n-icon>
</n-dropdown>
</div> </div>
</div> </div>
</div> <div class="view-container">
<div class="view-container"> <transition-group name="page">
<transition-group name="page"> <div class="view-container-item" v-for="(view, index) of views._views" v-show="view.visible"
<div :key="view.id">
class="view-container-item" <component :is="view.component" v-model:current-directories="view.currentDirectories"
v-for="(view, index) of views" v-model:current-files="view.currentFiles" :id="view.id" :color="view.color" :view="view"
v-show="view.visible" :views="views" @exit="deleteView(index)"></component>
:key="view.uid"> </div>
<component </transition-group>
:is="view.component" </div>
v-model:current-objects="view.currentDirectorys" </miao-message-provider>
:id="view.uid"
:color="view.color"
@exit="deleteView(index)"></component>
</div>
</transition-group>
</div>
</div> </div>
<!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 --> <!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
<MiaoMask v-model:show="showModal" @click="showModal = false"> <MiaoMask v-model:show="showModal" @click="showModal = false">
<component <component @click="(e: any) => e.stopPropagation()" :is="modalData?.component" v-bind="modalData?.props">
@click="(e:any) => e.stopPropagation()" </component>
:is="modalData?.component"
v-bind="modalData?.props"></component>
</MiaoMask> </MiaoMask>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
$controler-height: 25px; $controller-height: 25px;
$tag-width: 170px; $tag-width: 170px;
.view { .view {
@@ -214,14 +197,14 @@ $tag-width: 170px;
height: 100%; height: 100%;
width: 100%; width: 100%;
.view-controler { .view-controller {
display: flex; display: flex;
height: $controler-height; height: $controller-height;
width: 100%; width: 100%;
background-color: #dadada; background-color: #dadada;
// overflow: hidden; // overflow: hidden;
.tags-container { .tabs-container {
display: flex; display: flex;
margin-left: 5px; margin-left: 5px;
flex: 1; flex: 1;
@@ -230,6 +213,7 @@ $tag-width: 170px;
.tab { .tab {
position: relative; position: relative;
width: $tag-width; width: $tag-width;
height: $controller-height;
margin: 0 5px; margin: 0 5px;
// flex: 1; // flex: 1;
display: flex; display: flex;
@@ -237,17 +221,27 @@ $tag-width: 170px;
align-items: center; align-items: center;
.tab-title { .tab-title {
// font-family: monospace;
// font-weight: bolder;
margin-left: 4px; margin-left: 4px;
// width: 70%; width: 90px;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
span {
user-select: none;
cursor: pointer;
}
} }
.tab-point { .tab-point {
height: 5px; height: 5px;
aspect-ratio: 1; aspect-ratio: 1;
border-radius: 66px; border-radius: 66px;
margin-left: 5px; margin-right: 5px;
} }
.tab-control { .tab-control {
@@ -263,7 +257,7 @@ $tag-width: 170px;
&:not(:last-child)::after { &:not(:last-child)::after {
content: ''; content: '';
height: calc($controler-height * 0.6); height: calc($controller-height * 0.6);
width: 1px; width: 1px;
border-right: 1px solid black; border-right: 1px solid black;
position: absolute; position: absolute;
@@ -288,7 +282,7 @@ $tag-width: 170px;
&::before { &::before {
content: ''; content: '';
height: calc($controler-height * 0.6); height: calc($controller-height * 0.6);
width: 1px; width: 1px;
border-right: 1px solid black; border-right: 1px solid black;
position: absolute; position: absolute;
@@ -297,8 +291,8 @@ $tag-width: 170px;
} }
.icon { .icon {
height: calc($controler-height * 0.7); height: calc($controller-height * 0.7);
width: calc($controler-height * 0.7); width: calc($controller-height * 0.7);
border-radius: 5px; border-radius: 5px;
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -317,13 +311,14 @@ $tag-width: 170px;
position: relative; position: relative;
display: flex; display: flex;
// flex-direction: column; // flex-direction: column;
height: calc(100% - $controler-height); height: calc(100% - $controller-height);
overflow-y: overlay; overflow-y: hidden;
overflow-x: overlay; overflow-x: overlay;
.view-container-item { .view-container-item {
flex: 1; flex: 1;
height: 100%; height: 100%;
min-width: 180px;
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
@@ -351,14 +346,16 @@ $tag-width: 170px;
// transition动画相关 // transition动画相关
.view { .view {
.view-controler { .view-controller {
.tags-container { .tabs-container {
.tab-move, .tab-move,
.tab-enter-active { .tab-enter-active {
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.tab-leave-active { .tab-leave-active {
opacity: 0;
transition: none; transition: none;
} }
src/class/PluginCenter.ts
+135
View File
@@ -0,0 +1,135 @@
import useVirtualPages from "@/hooks/useVirtualPages";
import VirtualDirectory, { VirtualFile } from "./VirtualDirectory";
import { ShallowRef, shallowRef } from "vue";
import { alertTipType, usePluginHooksType } from "@/types/type";
import VirtualPage from "./VirtualPage";
export enum PluginGroup {
default = "default",
mainMenu = "mainMenu"
}
export interface registerComponentOption {
key: string;
name: string;
icon?: any;
getComponent: () => Promise<any>;
group?: PluginGroup[];
filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean;
disable?: boolean;
exitConfirm?: boolean;
// 若为true，则只会创建一个页面，当存在已创建页面则会直接将VFile和VDir加到curr里面
single?: boolean;
priority?: number;
}
export type Plugin = {
// 用于显示的名字
name: string;
// 代表插件的icon
icon?: ShallowRef<any>;
// 是否禁用插件
disable: boolean;
// 插件所属的group，用于区分插件使用的场合
group: PluginGroup[];
// 插件优先级
priority: number;
// 判断在未禁用时是否可以使用这个组件
// 使用组件即调用下面的func
filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean;
func: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[], hooks: usePluginHooksType, ...args: any[]) => void;
};
export default class PluginCenter {
constructor(globalAlertTip: alertTipType) {
this.pluginsMap = {};
this.globalAlertTip = globalAlertTip;
}
pluginsMap: {
[key: string]: Plugin;
};
globalAlertTip: alertTipType;
register(key: string, plugin: Plugin) {
this.pluginsMap[key] = plugin;
}
/**
* 便捷地注册一个组件为插件，触发时直接用新页面打开
*/
registerComponent(option: registerComponentOption): void {
const { key, name, getComponent, icon, filter, group = [PluginGroup.default], disable = false, exitConfirm = false, single = false, priority = 0 } = option;
let _component: any;
const views = useVirtualPages();
this.register(key, {
name,
filter,
icon: shallowRef(icon),
group,
disable,
priority,
func: async (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => {
if (filter(VDirectories, VFiles) === false) {
return;
}
if (_component === undefined) {
const setAlertTip = key !== "miaoDirectory" && this.globalAlertTip(`加载 ${name} 插件中`);
_component = await getComponent();
setAlertTip &&
setAlertTip(`加载 ${name} 插件完成`, {
type: "success",
timeout: 2000
});
}
if (single && views.find(_component) !== undefined) {
const view = views.find(_component) as VirtualPage;
view.currentFiles = [...view.currentFiles, ...VFiles];
view.currentDirectories = [...view.currentDirectories, ...VDirectories];
} else {
views.push(_component, VDirectories, VFiles, {
VirtualPageOption: {
exitConfirm,
allowCopy: single === false
}
});
}
}
});
}
getUsablePlugin(
VDirectories: VirtualDirectory[],
VFiles: VirtualFile[],
option?: {
group?: PluginGroup[];
}
) {
const { group = [PluginGroup.default] } = option ?? {};
const usableList = [];
for (let key of Object.keys(this.pluginsMap)) {
const _plugin = this.pluginsMap[key];
if (!_plugin.disable && _plugin.group.filter(v => group.includes(v)).length > 0 && _plugin.filter(VDirectories, VFiles)) {
usableList.push(key);
}
}
const res = usableList.map(key => ({
key,
...this.pluginsMap[key]
}))
res.sort((a, b) => b.priority - a.priority);
return res
}
usePlugin(key: string, VDirectories?: VirtualDirectory[], VFiles?: VirtualFile[], ...args: any[]) {
this.pluginsMap[key].func(
VDirectories ?? [],
VFiles ?? [],
{
globalAlertTip: this.globalAlertTip
},
...args
);
}
}
src/class/VirtualDirectory.ts
+52 -12
View File
@@ -1,3 +1,4 @@
import config from "@/config";
import generateId from "@/hooks/generateId"; import generateId from "@/hooks/generateId";
import useMiaoFetchApi from "@/hooks/useMiaoFetchApi"; import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
// import { debounce } from "lodash"; // import { debounce } from "lodash";
@@ -5,6 +6,21 @@ import type { stats, file, directory } from "@/types/type.ts";
const miaoFetchApi = useMiaoFetchApi(); const miaoFetchApi = useMiaoFetchApi();
export interface Tree {
name: string;
type: 'directory';
path: string;
stats: stats;
files?: {
name: string;
type: 'file';
size: number;
stats: stats;
url: string;
}[];
directories?: Tree[];
}
export class VirtualFile { export class VirtualFile {
constructor(info: file, parent: VirtualDirectory) { constructor(info: file, parent: VirtualDirectory) {
this.name = info.name; this.name = info.name;
@@ -12,41 +28,47 @@ export class VirtualFile {
this.stats = info.stats; this.stats = info.stats;
this.parent = parent; this.parent = parent;
this.type = "file"; this.type = "file";
this.uid = generateId(); this.id = generateId();
} }
name: string; name: string;
type: "file"; type: "file";
size: number; size: number;
stats: stats; stats: stats;
parent: VirtualDirectory; parent: VirtualDirectory;
uid: number; id: number;
storage: {[key: string]: any} = {};
get path() { get path() {
return `${this.parent.path}${this.name}`; return `${this.parent.path}${this.name}`;
} }
get url() {
return `${config.api.get}${this.parent.path}${this.name}`;
}
} }
class VirtualDirectory { class VirtualDirectory {
constructor(info: directory, parent?: VirtualDirectory) { constructor(info: directory, parent?: VirtualDirectory) {
this.name = info.name; this.name = info.name;
this.type = "directory";
this.stats = info.stats; this.stats = info.stats;
this.parent = parent ?? undefined; this.parent = parent ?? undefined;
this.uid = generateId(); this.id = generateId();
} }
// 文件夹名 // 文件夹名
name: string; name: string;
// 子文件 // 子文件
files?: VirtualFile[]; files?: VirtualFile[];
// 子目录 // 子目录
directorys?: VirtualDirectory[]; directories?: VirtualDirectory[];
// 没啥意义，标注一下就是了 // 没啥意义，标注一下就是了
type: "directory"; type: "directory" = 'directory';
// 文件夹创建时间等杂项属性 // 文件夹创建时间等杂项属性
stats: stats; stats: stats;
// 父文件夹 // 父文件夹
parent?: VirtualDirectory; parent?: VirtualDirectory;
uid: number; id: number;
storage: {[key: string]: any} = {};
/** /**
* 获取相对于根目录的路径的层数 * 获取相对于根目录的路径的层数
@@ -91,11 +113,29 @@ class VirtualDirectory {
return this.parent.getParent(layer - 1); return this.parent.getParent(layer - 1);
} }
get tree(): Tree {
return {
name: this.name,
type: this.type,
path: this.path,
stats: this.stats,
files:
this.files?.map(v => ({
name: v.name,
type: v.type,
size: v.size,
stats: v.stats,
url: v.url
})) ?? [],
directories: this.directories?.map(v => v.tree) ?? []
};
}
updateContent(content: (file | directory)[]) { updateContent(content: (file | directory)[]) {
this.files = this.files ?? []; this.files = this.files ?? [];
this.directorys = this.directorys ?? []; this.directories = this.directories ?? [];
const fileNames: string[] = this.files.map(v => v.name); const fileNames: string[] = this.files.map(v => v.name);
const dirNames: string[] = this.directorys.map(v => v.name); const dirNames: string[] = this.directories.map(v => v.name);
const itemNames: string[] = content.map(v => v.name); const itemNames: string[] = content.map(v => v.name);
// 删去远程端已不存在的文件与文件夹 // 删去远程端已不存在的文件与文件夹
const _delete = (target: (VirtualFile | VirtualDirectory)[]) => { const _delete = (target: (VirtualFile | VirtualDirectory)[]) => {
@@ -109,7 +149,7 @@ class VirtualDirectory {
} }
}; };
_delete(this.files); _delete(this.files);
_delete(this.directorys); _delete(this.directories);
// 加入新的文件与文件夹 // 加入新的文件与文件夹
for (let item of content) { for (let item of content) {
if (item.type === "file") { if (item.type === "file") {
@@ -118,7 +158,7 @@ class VirtualDirectory {
} }
} else if (item.type === "directory") { } else if (item.type === "directory") {
if (!dirNames.includes(item.name)) { if (!dirNames.includes(item.name)) {
this.directorys.push(new VirtualDirectory(item, this)); this.directories.push(new VirtualDirectory(item, this));
} }
} }
} }
@@ -126,7 +166,7 @@ class VirtualDirectory {
hasChild(item: VirtualDirectory | VirtualFile): boolean { hasChild(item: VirtualDirectory | VirtualFile): boolean {
if (item.type === "directory") { if (item.type === "directory") {
return this.directorys?.includes(item) ?? false; return this.directories?.includes(item) ?? false;
} else { } else {
return this.files?.includes(item) ?? false; return this.files?.includes(item) ?? false;
} }
src/class/VirtualPage.ts
+160 -54
View File
@@ -1,63 +1,169 @@
import { shallowRef } from "vue"; import { Component, reactive, shallowRef } from 'vue'
import VirtualDirectory, { VirtualFile } from "./VirtualDirectory"; import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
import generateId from "@/hooks/generateId"; import generateId from '@/hooks/generateId'
export interface VirtualPageOption {
exitConfirm?: boolean
allowCopy?: boolean
}
export interface ViewsPushOption {
index?: number
VirtualPageOption?: VirtualPageOption
}
const getRandomWebSafeColor = (() => { const getRandomWebSafeColor = (() => {
const webSafeColors = ["#009900", "#999900", "#009999", "#990099", "#0000ee"]; const webSafeColors = [
let counter = 0; '#009900',
return () => { '#999900',
const color = webSafeColors[counter % webSafeColors.length]; '#009999',
counter += 1; '#990099',
return color; '#0000ee'
}; ]
})(); let counter = 0
return () => {
const color = webSafeColors[counter % webSafeColors.length]
counter += 1
return color
}
})()
export default class VirtualPage { export default class VirtualPage {
constructor(component: any, initObjects?:{ directorys?: VirtualDirectory[], files?: VirtualFile[]}) { constructor(
this.component = shallowRef(component); component: any,
this.currentDirectorys = initObjects?.directorys ?? []; initObjects?: {
this.currentFiles = initObjects?.files ?? []; directories?: VirtualDirectory[]
this.visible = true; files?: VirtualFile[]
this.uid = generateId(); option?: VirtualPageOption
this.refreshKey = Math.random(); }
this.color = getRandomWebSafeColor(); ) {
} this.component = shallowRef(component)
// 页面使用的组件 this.currentDirectories = initObjects?.directories ?? []
component: any; this.currentFiles = initObjects?.files ?? []
// 是否可见 this.visible = true
visible: boolean; this.id = generateId()
// 当前正在使用的文件夹 this.refreshKey = Math.random()
currentDirectorys: VirtualDirectory[]; this.color = getRandomWebSafeColor()
// 当前正在使用的文件 this.exitConfirm = initObjects?.option?.exitConfirm ?? false
currentFiles: VirtualFile[]; this.allowCopy = initObjects?.option?.allowCopy ?? true
// 区分每一个页面的唯一id }
uid: number; // 页面使用的组件
// 当refreshKey改变时需要刷新页面，目前还没接入刷新 component: any
refreshKey: number; // 是否可见
// 为了区分，每个虚拟页面都会分配一个color，这个color会体现在tab上 visible: boolean
color: string; // 当前正在使用的文件夹
// 用于展示的title currentDirectories: VirtualDirectory[]
_title?: string; // 当前正在使用的文件
currentFiles: VirtualFile[]
// 区分每一个页面的唯一id
id: number
// 当refreshKey改变时需要刷新页面，目前还没接入刷新
refreshKey: number
// 为了区分，每个虚拟页面都会分配一个color，这个color会体现在tab上
color: string
// 用于展示的title
_title?: string
// 关闭时是否需要确认（未实现）
exitConfirm: boolean
// 是否允许复制页面
allowCopy: boolean
get title() { get title() {
if (this._title) { if (this._title) {
return this._title; return this._title
} }
return this.currentDirectorys[0].name; return (
} this?.currentDirectories[0]?.name ??
this?.currentFiles[0]?.name ??
'未命名标签'
)
}
setTitle(title: string) { setTitle(title: string) {
this._title = title; this._title = title
} }
// 切换显示状态 // 切换显示状态
switchShow() { switchShow() {
this.visible = !this.visible; this.visible = !this.visible
} }
// 刷新，不过好像没有用得到的时候吧 // 刷新，不过好像没有用得到的时候吧
// 事实上也不应该用得到，因为更新应该是响应式的 // 事实上也不应该用得到，因为更新应该是响应式的
refresh() { refresh() {
this.refreshKey = Math.random(); this.refreshKey = Math.random()
} }
}
export class VirtualPages {
constructor() {
this._views = reactive<VirtualPage[]>([])
}
_views: VirtualPage[]
get length() {
return this._views.length
}
/**
* 查询一个页面位于_views中的次序
* @param {any} id 要查询的页面的id
* @returns {any}
*/
getIndex(id: number) {
for (let i in this._views) {
if (this._views[i].id === id) {
return parseInt(i)
}
}
return -1
}
/**
* 根据id得到view
* @param {any} id 要查询的页面的id
*/
getView(id: number) {
for (let v of this._views) {
if (v.id === id) {
return v
}
}
return undefined
}
/**
* 推入一个新的页面
*/
push(
component: any,
currentDirectories?: VirtualDirectory[],
currentFiles?: VirtualFile[],
option?: ViewsPushOption
) {
const { index = this.length, VirtualPageOption } = option ?? {}
this._views.splice(
index,
0,
reactive<VirtualPage>(
new VirtualPage(component, {
directories: [...(currentDirectories ?? [])],
files: [...(currentFiles ?? [])],
option: VirtualPageOption
})
)
)
}
/**
* 根据次序删除一个页面
*/
deleteView(index: number) {
this._views.splice(index, 1)
}
/**
* 返回第一个使用此组件的页面
*/
find(component: Component) {
return this._views.find(v=>v.component === component)
}
} }
src/components/miaoAlertTipProvider.vue
+143
View File
@@ -0,0 +1,143 @@
<template>
<div class="miao-message-provider" ref="rootRef">
<slot></slot>
<transition-group name="message-fade" tag="div" class="miao-message-provider-container">
<div class="miao-message" v-for="msg in messageList" :key="msg.id"
:style="{ maxWidth: maxMessageWidth + 'px' }">
<n-icon class="miao-message-item" size="18" :color="msg.iconColor">
<component :is="msg.icon"></component>
</n-icon>
<div class="miao-message-item miao-message-item-content">{{ msg.content }}</div>
</div>
</transition-group>
</div>
</template>
<script setup lang="ts">
import generateId from '@/hooks/generateId';
import { NIcon } from 'naive-ui';
import { computed, onMounted, ref, shallowReactive } from 'vue';
import { InformationCircle, CheckmarkCircle, CloseCircle } from '@vicons/ionicons5'
import { AlertTipMessageOptions } from '@/types/type';
interface Message {
icon: any,
timer: any,
iconColor: string,
content: string,
}
const iconMap = {
'info': { icon: InformationCircle, color: 'blue' },
'success': { icon: CheckmarkCircle, color: 'green' },
'error': { icon: CloseCircle, color: 'red' },
}
const messageMap = shallowReactive<Record<string, Message | undefined>>({})
const rootRef = ref<HTMLDivElement>()
const maxMessageWidth = ref<number>(-1)
const messageList = computed(() => {
return Object.keys(messageMap).map(v => ({
id: v,
...messageMap[v],
}))
})
const alertTip = (content: string, options?: AlertTipMessageOptions) => {
let timer: any
const { timeout = 0, type = 'info', id = generateId() } = options ?? {}
if (timeout > 0) {
messageMap[id]?.timer && clearTimeout(messageMap[id]?.timer)
timer = setTimeout(() => {
delete messageMap[id]
}, timeout)
}
messageMap[id] = {
icon: iconMap[type].icon,
iconColor: iconMap[type].color,
content,
timer
}
return (newContent: string, newOptions?: AlertTipMessageOptions) => {
newOptions = newOptions ?? {}
newOptions.id = id
alertTip(newContent, newOptions)
}
}
onMounted(async () => {
// const set = message('test', { timeout: 5000 })
// setTimeout(() => {
// set('miao', { type: 'success' })
// }, 1000);
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
maxMessageWidth.value = entry.contentRect.width * 0.8;
}
});
if (rootRef.value) {
observer.observe(rootRef.value);
}
})
defineExpose({ alertTip });
</script>
<style scoped lang="scss">
.miao-message-provider {
width: 100%;
height: 100%;
position: relative;
.miao-message-provider-container {
position: absolute;
width: 0;
height: 0;
left: 50%;
top: 30px;
display: flex;
flex-direction: column;
align-items: center;
overflow: visible;
z-index: 70582140539943419;
.miao-message {
display: flex;
align-items: center;
width: max-content;
background-color: rgb(249, 249, 249);
padding: 5px 10px;
background-color: rgb(255 255 255);
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
border-radius: 5px;
user-select: none;
margin-top: 10px;
.miao-message-item {
margin: 0 5px;
}
.miao-message-item-content {
white-space: pre-wrap;
}
}
}
.message-fade-move,
.message-fade-enter-active,
.message-fade-leave-active {
transition: all 0.5s ease;
}
.message-fade-enter-from,
.message-fade-leave-to {
opacity: 0;
transform: translateX(30px);
}
.message-fade-leave-active {
position: absolute;
}
}
</style>
src/components/miaoContextMenu.vue
+19 -20
View File
@@ -1,8 +1,7 @@
<!-- 基于naiveui的下拉菜单实现的自定义下拉菜单 --> <!-- 基于naiveui的下拉菜单实现的自定义下拉菜单 -->
<!-- 支持长按和右键呼出下拉菜单 --> <!-- 支持长按和右键呼出下拉菜单 -->
<template> <template>
<div class="main" @contextmenu="handleContextMenu" @mouseleave="handleMainMouseLeave" @touchstart="handleTouchStart" <div class="main" @contextmenu="handleContextMenu" @mouseleave="handleMainMouseLeave">
@touchend="handleTouchEnd">
<slot></slot> <slot></slot>
</div> </div>
<n-dropdown placement="bottom-start" trigger="manual" :x="x" :y="y" :options="props.options" <n-dropdown placement="bottom-start" trigger="manual" :x="x" :y="y" :options="props.options"
@@ -28,7 +27,7 @@ const x = ref(0)
const y = ref(0) const y = ref(0)
const showContextMenu = ref(0) const showContextMenu = ref(0)
// 长按计时器 // 长按计时器
let timer_touch: string | number | NodeJS.Timeout | undefined // let timer_touch: string | number | NodeJS.Timeout | undefined
const onClickoutside = async () => { const onClickoutside = async () => {
showContextMenu.value = 0 showContextMenu.value = 0
@@ -58,25 +57,25 @@ const handleContextMenu = (e: MouseEvent) => {
}) })
} }
const handleTouchStart = (e: TouchEvent) => { // const handleTouchStart = (e: TouchEvent) => {
if(props.touchTimeOut === undefined) { // if(props.touchTimeOut === undefined) {
return // return
} // }
timer_touch ?? clearTimeout(timer_touch) // timer_touch ?? clearTimeout(timer_touch)
timer_touch = setTimeout(() => { // timer_touch = setTimeout(() => {
showContextMenu.value = 1 // showContextMenu.value = 1
x.value = e.targetTouches[0].clientX // x.value = e.targetTouches[0].clientX
y.value = e.targetTouches[0].clientY // y.value = e.targetTouches[0].clientY
}, props.touchTimeOut) // }, props.touchTimeOut)
} // }
const handleTouchEnd = () => { // const handleTouchEnd = () => {
if(timer_touch) { // if(timer_touch) {
clearTimeout(timer_touch) // clearTimeout(timer_touch)
timer_touch = undefined // timer_touch = undefined
} // }
} // }
</script> </script>
src/components/miaoDropHandler.vue
+23 -6
View File
@@ -1,9 +1,5 @@
<template> <template>
<div <div class="container" @dragover="handleDragOver" @dragleave="handleDragLeave" @drop="handleDrop">
class="container"
@dragover="handleDragOver"
@dragleave="handleDragLeave"
@drop="handleDrop">
<slot></slot> <slot></slot>
<miao-mask v-model:show="showMask"></miao-mask> <miao-mask v-model:show="showMask"></miao-mask>
</div> </div>
@@ -16,6 +12,13 @@ import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import config from '@/config' import config from '@/config'
import useDataBus from '@/hooks/useDataBus' import useDataBus from '@/hooks/useDataBus'
const props = defineProps({
disable: {
type: Boolean,
default: false
}
})
const dataBus = useDataBus() const dataBus = useDataBus()
const { uploadSizeLimit } = config const { uploadSizeLimit } = config
@@ -61,10 +64,21 @@ const removeDirectory = async (files: File[]) => {
} }
} }
} }
const check = (event: DragEvent) => [
...(event.dataTransfer?.files ?? []),
...(dataBus.get('dragData_vFiles') ?? []),
...(dataBus.get('dragData_vDirectory') ?? [])
].length !== 0
const handleDragOver = async (event: DragEvent) => { const handleDragOver = async (event: DragEvent) => {
showMask.value += 1 if (props.disable || check(event) === false) {
return
}
event.preventDefault() event.preventDefault()
if (showMask.value === 1) {
return
}
showMask.value = 1
} }
const handleDragLeave = async () => { const handleDragLeave = async () => {
@@ -72,6 +86,9 @@ const handleDragLeave = async () => {
} }
const handleDrop = async (event: DragEvent) => { const handleDrop = async (event: DragEvent) => {
if (props.disable || check(event) === false) {
return
}
showMask.value = 0 showMask.value = 0
event.preventDefault() event.preventDefault()
event.stopPropagation() event.stopPropagation()
src/components/miaoLazyDiv.vue
+118
View File
@@ -0,0 +1,118 @@
<!-- 只适合用于渲染过程较为复杂的组件，不然可能得不偿失
这么泛用的组件，性能差点也能理解 -->
<template>
<div class="miao-lazy" ref="miaoLazyRoot"
:style="!show ? { minHeight: _autoHeight !== undefined ? _autoHeight : props.minHeight, minWidth, margin } : {}">
<slot v-if="show" />
</div>
</template>
<script setup lang="ts">
import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
const props = defineProps({
// disable: {
// type: Boolean,
// default: false,
// },
disableLazy: {
type: Boolean,
default: false,
},
// 仅在内容未加载时生效，用于占位
minHeight: {
type: String,
default: 'none',
},
minWidth: {
type: String,
default: 'none',
},
margin: {
type: String,
default: 'none',
},
autoHeight: {
type: Boolean,
default: false
}
})
const miaoLazyRoot = ref<HTMLDivElement>()
const _autoHeight = ref<string>()
const show = ref<boolean>(props.disableLazy)
const isVisible = (dom: HTMLDivElement) => {
const offset = dom.getBoundingClientRect().top
return offset > 0 && offset < 2000
}
const { showSlot, hideSlot, clearTimer } = (() => {
let timer: any
let timerInterval: any
const clearTimer = () => {
timer && clearTimeout(timer)
timerInterval && clearInterval(timerInterval)
timer = undefined
timerInterval = undefined
}
const hideSlot = () => {
clearTimer()
if (props.autoHeight) {
_autoHeight.value = `${miaoLazyRoot.value?.clientHeight}px`
}
show.value = false
}
const showSlot = () => {
if (show.value === true) {
return
}
clearTimer()
// timer = setTimeout(() => {
if (!miaoLazyRoot.value || isVisible(miaoLazyRoot.value) === false) {
return
}
show.value = true
timerInterval = setInterval(() => {
if (show.value === false || miaoLazyRoot.value === undefined) {
return
}
if (isVisible(miaoLazyRoot.value) === false) {
hideSlot()
}
}, 1000)
// if (props.autoHeight) {
// nextTick(() => {
// console.log(miaoLazyRoot.value?.clientHeight)
// _autoHeight.value = `${miaoLazyRoot.value?.clientHeight}px`
// })
// }
}
return { showSlot, hideSlot, clearTimer }
})()
onMounted(() => {
if (show.value === false) {
let options = {
threshold: 0
};
let observer: IntersectionObserver | undefined = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
showSlot()
// miaoLazyRoot.value && observer?.unobserve(miaoLazyRoot.value)
// observer = undefined
} else {
hideSlot()
}
}, options);
miaoLazyRoot.value && observer.observe(miaoLazyRoot.value);
}
})
onBeforeUnmount(() => {
clearTimer()
})
</script>
src/components/miaoPopupInput.vue
+81 -62
View File
@@ -1,83 +1,102 @@
<template> <template>
<miao-mask v-model:show="showMask"> <miao-mask v-model:show="showMask">
<n-card class="popup-card" :title="popupConfig?.title" size="medium"> <n-card class="popup-card" :title="popupConfig?.title" size="medium">
{{ popupConfig?.content }} {{ popupConfig?.content }}
<n-input class="popup-input" v-model:value="inputValue" type="text" v-bind="popupConfig?.inputProps" <n-input
v-if="popupConfig?.inputProps" /> class="popup-input"
<div class="popup-button-container"> v-model:value="inputValue"
<n-button class="popup-button-container-button" v-for="option in popupConfig?.options" :key="option.label" type="text"
:type="option.type" @click="_resolve && _resolve(option.key)">{{ option.label }}</n-button> v-bind="popupConfig?.inputProps"
</div> passively-activated
</n-card> autofocus
</miao-mask> v-if="popupConfig?.inputProps" />
<div class="popup-button-container">
<n-button
class="popup-button-container-button"
v-for="option in popupConfig?.options"
:key="option.label"
:type="option.type"
@click="_resolve && _resolve(option.key)">
{{ option.label }}
</n-button>
</div>
</n-card>
</miao-mask>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, nextTick } from "vue"; import { ref, nextTick } from 'vue'
import { NCard, NInput, NButton } from "naive-ui"; import { NCard, NInput, NButton } from 'naive-ui'
import miaoMask from "./miaoMask.vue"; import miaoMask from './miaoMask.vue'
import { InputProps } from "naive-ui"; import { InputProps } from 'naive-ui'
const showMask = ref(false); const showMask = ref(false)
const inputValue = ref<string>(""); const inputValue = ref<string>('')
const _resolve = ref() const _resolve = ref()
type popupConfigType = { type popupConfigType = {
title: string title: string
content?: string content?: string
inputValue?: string, inputValue?: string
inputProps?: InputProps inputProps?: InputProps
options: { options: {
label: string label: string
key: unknown key: unknown
type: 'default' | 'tertiary' | 'primary' | 'success' | 'info' | 'warning' | 'error' type:
}[] | 'default'
| 'tertiary'
| 'primary'
| 'success'
| 'info'
| 'warning'
| 'error'
}[]
} }
const popupConfig = ref<popupConfigType>() const popupConfig = ref<popupConfigType>()
const popup = async (config: popupConfigType) => { const popup = async (config: popupConfigType) => {
popupConfig.value = config popupConfig.value = config
inputValue.value = config.inputValue ?? '' inputValue.value = config.inputValue ?? ''
showMask.value = true showMask.value = true
const key = await new Promise((resolve: (key: unknown) => unknown) => { const key = await new Promise((resolve: (key: unknown) => unknown) => {
_resolve.value = resolve _resolve.value = resolve
}) })
const text = inputValue.value const text = inputValue.value
showMask.value = false; showMask.value = false
nextTick(() => { nextTick(() => {
inputValue.value = '' inputValue.value = ''
_resolve.value = undefined _resolve.value = undefined
}) })
return { return {
text, text,
key key
}; }
}; }
defineExpose({ popup }); defineExpose({ popup })
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.popup-card { .popup-card {
width: 80%; width: 80%;
.popup-input { .popup-input {
margin-bottom: 10px; margin-bottom: 10px;
} }
.popup-button-container { .popup-button-container {
height: 100%; height: 100%;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
flex-wrap: wrap; flex-wrap: wrap;
.popup-button-container-button { .popup-button-container-button {
margin-top: 3px; margin-top: 3px;
&:not(:last-child) { &:not(:last-child) {
margin-right: 5px; margin-right: 5px;
} }
}
} }
}
} }
</style> </style>
src/hooks/buildFromTree.ts
+15
View File
@@ -0,0 +1,15 @@
import VirtualDirectory, { Tree, VirtualFile } from "@/class/VirtualDirectory";
/**
* 通过VirtualDirectory的.tree重建文件夹树
* @param {any} data:Tree
* @returns {any}
*/
const buildFromTree = (data: Tree) => {
const root = new VirtualDirectory(data)
root.files = data.files?.map(v=>new VirtualFile(v, root))
root.directories = data.directories?.map(v=>buildFromTree(v))
return root
}
export default buildFromTree;
src/hooks/generateId.ts
+7 -7
View File
@@ -1,4 +1,4 @@
const idList: number[] = []; const idList: number[] = []
/** /**
* 生成一个唯一的id * 生成一个唯一的id
@@ -6,11 +6,11 @@ const idList: number[] = [];
* @returns {number} * @returns {number}
*/ */
export default function generateId(length?: number) { export default function generateId(length?: number) {
length || (length = 16); length || (length = 16)
let id; let id
while (!id || idList.includes(id)) { while (!id || idList.includes(id)) {
id = Math.ceil(Math.random() * 10 ** 16); id = Math.ceil(Math.random() * 10 ** 16)
} }
idList.push(id) idList.push(id)
return id return id
} }
src/hooks/init.ts
+6
View File
@@ -0,0 +1,6 @@
import { alertTipType } from "@/types/type";
import initPlugin from "./init/initPlugin";
export default async function init(globalAlertTip: alertTipType) {
await initPlugin(globalAlertTip)
}
src/hooks/init/initPlugin.ts
+32
View File
@@ -0,0 +1,32 @@
import usePluginCenter, { initPluginCenter } from "@/hooks/usePluginCenter";
import { Plugin, registerComponentOption } from "@/class/PluginCenter";
import { alertTipType, PluginExportType } from "@/types/type";
const initPlugin = async (globalAlertTip: alertTipType) => {
initPluginCenter(globalAlertTip)
const modulesFiles = import.meta.glob("@/plugins/**/export.ts");
const pluginCenter = usePluginCenter();
const promiseArray = [];
for (let pluginConfig of Object.values(modulesFiles)) {
promiseArray.push(
new Promise(async resolve => {
const _config = pluginConfig as () => Promise<{
default: registerComponentOption | Plugin;
type: PluginExportType
key?: string
}>;
const {type, key} = await _config()
if(type === PluginExportType.component) {
// @ts-ignore
resolve(pluginCenter.registerComponent((await _config()).default));
} else if (type === PluginExportType.default) {
// @ts-ignore
resolve(pluginCenter.register(key as string, (await _config()).default));
}
})
);
}
await Promise.all(promiseArray);
};
export default initPlugin;
src/hooks/miaoTools.ts
+55 -43
View File
@@ -1,47 +1,59 @@
import { NIcon } from 'naive-ui'
import { h } from 'vue'
export const filePicker = (() => { export const filePicker = (() => {
let _resolve: ((files: File[]) => void) | undefined; let _resolve: ((files: File[]) => void) | undefined
return (option?: { accept?: "string"; multiple: boolean }) => { return (option?: { accept?: 'string'; multiple: boolean }) => {
if (_resolve) { if (_resolve) {
_resolve([]); _resolve([])
_resolve = undefined; _resolve = undefined
} }
return new Promise<File[]>(resolve => { return new Promise<File[]>((resolve) => {
const inpEle = document.createElement("input"); const inpEle = document.createElement('input')
inpEle.id = `__file_${Math.ceil(Math.random() * 100000000)}`; inpEle.id = `__file_${Math.ceil(Math.random() * 100000000)}`
inpEle.type = "file"; inpEle.type = 'file'
inpEle.style.display = "none"; inpEle.style.display = 'none'
_resolve = resolve; _resolve = resolve
// 文件类型限制 // 文件类型限制
// inpEle.accept="image/*" // inpEle.accept="image/*"
option?.accept && (inpEle.accept = option?.accept); option?.accept && (inpEle.accept = option?.accept)
// 多选限制 // 多选限制
option?.multiple && (inpEle.multiple = option?.multiple); option?.multiple && (inpEle.multiple = option?.multiple)
// inpEle.addEventListener("change", event => fn.call(inpEle, event, inpEle.files), { once: true }); // inpEle.addEventListener("change", event => fn.call(inpEle, event, inpEle.files), { once: true });
inpEle.addEventListener( inpEle.addEventListener(
"change", 'change',
() => { () => {
if (!inpEle.files) { if (!inpEle.files) {
return; return
} }
const files: File[] = []; const files: File[] = []
let i = 0; let i = 0
while (i < inpEle.files?.length) { while (i < inpEle.files?.length) {
const _file = inpEle?.files?.item(i); const _file = inpEle?.files?.item(i)
if (_file !== null) { if (_file !== null) {
files.push(_file); files.push(_file)
} }
i += 1; i += 1
} }
resolve(files); resolve(files)
_resolve = undefined _resolve = undefined
}, },
{ once: true } { once: true }
); )
inpEle.click(); inpEle.click()
}); })
}; }
})(); })()
export const renderIcon = (icon: any) => {
return () => {
return h(NIcon, null, {
default: () => h(icon)
})
}
}
export default { export default {
filePicker filePicker,
}; renderIcon
}
src/hooks/useDataBus.ts
+4
View File
@@ -17,6 +17,10 @@ export default function useDataBus() {
const value = dataStorage[key]; const value = dataStorage[key];
dataStorage[key] = undefined; dataStorage[key] = undefined;
return value; return value;
},
get(key: string | number) {
const value = dataStorage[key];
return value;
} }
}; };
} }
src/hooks/useMiaoFetchApi.ts
+254 -246
View File
@@ -1,266 +1,274 @@
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory' import VirtualDirectory, { VirtualFile } from "@/class/VirtualDirectory";
import { import {
getOption, getOption,
getResponse, getResponse,
miaoFetchConfig, miaoFetchConfig,
deleteOption, deleteOption,
uploadOption, uploadOption,
queryOption, queryOption,
renameOption, renameOption,
cutOption, cutOption,
mkdirOption mkdirOption,
} from '@/types/fetch' getFileOption
import Config from '@/config' } from "@/types/fetch";
import axios, { AxiosRequestConfig } from 'axios' import Config from "@/config";
import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
export const useMiaoFetch = (option?: miaoFetchConfig) => { export const useMiaoFetch = (option?: miaoFetchConfig) => {
const retry = option?.retry ?? 0 const retry = option?.retry ?? 0;
const controller = new AbortController() const controller = new AbortController();
let flag = true let flag = true;
return { return {
miaoFetch: async (config: AxiosRequestConfig<any>) => { miaoFetch: async (config: AxiosRequestConfig<any>): Promise<AxiosResponse<any, any>> => {
let counter = 0 let counter = 0;
let response: any let response: any;
let errList = [] let errList = [];
while (flag && counter <= retry) { while (flag && counter <= retry) {
try { try {
response = await axios({ response = await axios({
...config, ...config,
signal: controller.signal signal: controller.signal
}) });
return response return response;
} catch (_e) { } catch (_e) {
errList.push(_e) errList.push(_e);
counter += 1 counter += 1;
} }
} }
throw errList throw errList;
}, },
/** /**
* 强制终止miaoFetch * 强制终止miaoFetch
*/ */
abortMiaoFetch: () => { abortMiaoFetch: () => {
flag = false flag = false;
controller.abort() controller.abort();
} }
} };
} };
const miaoFetchApi = { const miaoFetchApi = {
/** /**
* 获取对应文件夹下的数据 * 获取对应文件夹下的数据
*/ */
async get( async get(vDirectory: VirtualDirectory, option?: getOption): Promise<getResponse> {
vDirectory: VirtualDirectory, const { baseUrl, api } = Config;
option?: getOption const url = `${baseUrl}${api.get}${vDirectory.path}`;
): Promise<getResponse> { const retry = option?.retry ?? 0;
const { baseUrl, api } = Config
const url = `${baseUrl}${api.get}${vDirectory.path}`
const retry = option?.retry ?? 0
const { miaoFetch } = useMiaoFetch({ const { miaoFetch } = useMiaoFetch({
retry retry
}) });
const response = await miaoFetch({ const response = await miaoFetch({
url url
}) });
return response.data return response.data;
}, },
/** /**
* 上传单个文件到对应文件夹, 后续要将data类型改成buffer以支持分片上传 * 获取对应文件下的数据
* 正常上传文件请使用uploadQueue */
*/ getFile(vFile: VirtualFile, option?: getFileOption) {
upload(data: File, targetVDir: VirtualDirectory, option?: uploadOption) { // const { baseUrl, api } = Config
const { baseUrl, api } = Config const url = vFile.url;
const url = `${baseUrl}${api.upload}${targetVDir.path}` const retry = option?.retry ?? 0;
const retry = option?.retry ?? 0 const axiosOption = option?.axiosOption ?? {};
const { miaoFetch, abortMiaoFetch } = useMiaoFetch({
retry
})
const sizeTotal = data.size
const opType = option?.type ?? 'write' const { miaoFetch, abortMiaoFetch: abort } = useMiaoFetch({
retry
});
const response = miaoFetch({
url,
responseType: "arraybuffer",
onDownloadProgress(progressEvent) {
option && option.onProcess && option.onProcess(progressEvent.total ? progressEvent.loaded / progressEvent.total : -1);
},
...axiosOption
});
return {
response: new Promise<Uint8Array>(async resolve => {
resolve(new Uint8Array((await response).data));
}),
abort
};
},
const formData = new FormData() /**
* 上传单个文件到对应文件夹, 后续要将data类型改成buffer以支持分片上传
* 正常上传文件请使用uploadQueue
*/
upload(data: File, targetVDir: VirtualDirectory, option?: uploadOption) {
const { baseUrl, api } = Config;
const url = `${baseUrl}${api.upload}${targetVDir.path}`;
const retry = option?.retry ?? 0;
const { miaoFetch, abortMiaoFetch } = useMiaoFetch({
retry
});
const sizeTotal = data.size;
formData.append('file', data) const opType = option?.type ?? "write";
// 必须这样传，不然中文乱码
formData.append('fileName', data.name)
formData.append('operateType', opType)
return { const formData = new FormData();
abort: () => abortMiaoFetch(),
response: new Promise<{
message: 'success' | 'failed'
error?: string
}>(async (resolve) => {
const response = await miaoFetch({
url,
method: 'post',
data: formData,
onUploadProgress(progressEvent) {
option &&
option.onProcess &&
option.onProcess(progressEvent.loaded / sizeTotal)
}
})
resolve(response.data)
})
}
},
/** formData.append("file", data);
* 在目标文件夹下创建新的文件夹 // 必须这样传，不然中文乱码
*/ formData.append("fileName", data.name);
mkdir( formData.append("operateType", opType);
targetVDir: VirtualDirectory,
newFolderName: string,
option?: mkdirOption
) {
const { baseUrl, api } = Config
const url = `${baseUrl}${api.mkdir}${targetVDir.path}`
const { miaoFetch } = useMiaoFetch({
retry: option?.retry ?? 0
})
return new Promise<{ return {
message: 'success' | 'failed' abort: () => abortMiaoFetch(),
error?: string response: new Promise<{
}>(async (resolve) => { message: "success" | "failed";
const response = await miaoFetch({ error?: string;
url, }>(async resolve => {
method: 'post', const response = await miaoFetch({
data: { url,
folderName: newFolderName method: "post",
} data: formData,
}) onUploadProgress(progressEvent) {
resolve(response.data) option && option.onProcess && option.onProcess(progressEvent.loaded / sizeTotal);
}) }
}, });
/** resolve(response.data);
* 在目标文件夹下创建新的空文件，实际上是通过upload空文件实现 })
*/ };
mkFile( },
targetVDir: VirtualDirectory,
newFileName: string,
option?: uploadOption
) {
const emptyBlob = new Blob([])
const emptyFile = new File([emptyBlob], newFileName, {
type: 'text/plain'
})
return this.upload(emptyFile, targetVDir, option)
},
/** /**
* 删除对应的文件或文件夹，若为文件夹会递归删除 * 在目标文件夹下创建新的文件夹
*/ */
delete(target: VirtualFile | VirtualDirectory, option?: deleteOption) { mkdir(targetVDir: VirtualDirectory, newFolderName: string, option?: mkdirOption) {
const { baseUrl, api } = Config const { baseUrl, api } = Config;
const url = `${baseUrl}${api.delete}${target.path}` const url = `${baseUrl}${api.mkdir}${targetVDir.path}`;
const retry = option?.retry ?? 0 const { miaoFetch } = useMiaoFetch({
const { miaoFetch } = useMiaoFetch({ retry: option?.retry ?? 0
retry });
})
return { return new Promise<{
response: new Promise<{ message: "success" | "failed";
eventId: number error?: string;
}>(async (resolve) => { }>(async resolve => {
const response = await miaoFetch({ const response = await miaoFetch({
url, url,
method: 'post' method: "post",
}) data: {
resolve(response.data) folderName: newFolderName
}) }
} });
}, resolve(response.data);
/** });
* 重命名对应的文件或文件夹 },
*/ /**
rename( * 在目标文件夹下创建新的空文件，实际上是通过upload空文件实现
target: VirtualFile | VirtualDirectory, */
newName: string, mkFile(targetVDir: VirtualDirectory, newFileName: string, option?: uploadOption) {
option?: renameOption const emptyBlob = new Blob([]);
) { const emptyFile = new File([emptyBlob], newFileName, {
const { baseUrl, api } = Config type: "text/plain"
const url = `${baseUrl}${api.rename}${target.path}` });
const retry = option?.retry ?? 0 return this.upload(emptyFile, targetVDir, option);
const { miaoFetch } = useMiaoFetch({ },
retry
})
return { /**
response: new Promise<{ * 删除对应的文件或文件夹，若为文件夹会递归删除
eventId: number */
}>(async (resolve) => { delete(target: VirtualFile | VirtualDirectory, option?: deleteOption) {
const response = await miaoFetch({ const { baseUrl, api } = Config;
url, const url = `${baseUrl}${api.delete}${target.path}`;
method: 'post', const retry = option?.retry ?? 0;
data: { newName } const { miaoFetch } = useMiaoFetch({
}) retry
resolve(response.data) });
})
}
},
/**
* 剪切文件或文件夹
*/
cut(
target: VirtualFile | VirtualDirectory,
to: VirtualDirectory,
option?: cutOption
) {
const newPath = to.path
const { baseUrl, api } = Config
const url = `${baseUrl}${api.cut}${target.path}`
const retry = option?.retry ?? 0
const { miaoFetch } = useMiaoFetch({
retry
})
return {
response: new Promise<{
eventId: number
}>(async (resolve) => {
const response = await miaoFetch({
url,
method: 'post',
data: { newPath }
})
resolve(response.data)
})
}
},
/** return {
* 查询服务端操作事件的进展 response: new Promise<{
*/ eventId: number;
query(eventId: number, option?: queryOption) { }>(async resolve => {
const { baseUrl, api } = Config const response = await miaoFetch({
const url = `${baseUrl}${api.query}` url,
const retry = option?.retry ?? 0 method: "post"
const { miaoFetch } = useMiaoFetch({ });
retry resolve(response.data);
}) })
return { };
response: new Promise<{ },
status: 'process' | 'success' | 'failed' /**
error?: unknown * 重命名对应的文件或文件夹
}>(async (resolve) => { */
const response = await miaoFetch({ rename(target: VirtualFile | VirtualDirectory, newName: string, option?: renameOption) {
url, const { baseUrl, api } = Config;
method: 'get', const url = `${baseUrl}${api.rename}${target.path}`;
params: { const retry = option?.retry ?? 0;
id: eventId const { miaoFetch } = useMiaoFetch({
} retry
}) });
resolve(response.data)
}) return {
} response: new Promise<{
} eventId: number;
} }>(async resolve => {
const response = await miaoFetch({
url,
method: "post",
data: { newName }
});
resolve(response.data);
})
};
},
/**
* 剪切文件或文件夹
*/
cut(target: VirtualFile | VirtualDirectory, to: VirtualDirectory, option?: cutOption) {
const newPath = to.path;
const { baseUrl, api } = Config;
const url = `${baseUrl}${api.cut}${target.path}`;
const retry = option?.retry ?? 0;
const { miaoFetch } = useMiaoFetch({
retry
});
return {
response: new Promise<{
eventId: number;
}>(async resolve => {
const response = await miaoFetch({
url,
method: "post",
data: { newPath }
});
resolve(response.data);
})
};
},
/**
* 查询服务端操作事件的进展
*/
query(eventId: number, option?: queryOption) {
const { baseUrl, api } = Config;
const url = `${baseUrl}${api.query}`;
const retry = option?.retry ?? 0;
const { miaoFetch } = useMiaoFetch({
retry
});
return {
response: new Promise<{
status: "process" | "success" | "failed";
error?: unknown;
}>(async resolve => {
const response = await miaoFetch({
url,
method: "get",
params: {
id: eventId
}
});
resolve(response.data);
})
};
}
};
export default function useMiaoFetchApi() { export default function useMiaoFetchApi() {
return miaoFetchApi return miaoFetchApi;
} }
src/hooks/usePluginCenter.ts
+15
View File
@@ -0,0 +1,15 @@
import PluginCenter from "@/class/PluginCenter";
import { alertTipType } from "@/types/type";
import { reactive } from "vue";
let pluginCenter: PluginCenter
export const initPluginCenter = (globalAlertTip: alertTipType) => {
if(!pluginCenter) {
pluginCenter = reactive(new PluginCenter(globalAlertTip))
}
}
export default function usePluginCenter(){
return pluginCenter
}
src/hooks/useVirtualPages.ts
+5 -4
View File
@@ -1,11 +1,12 @@
import VirtualPage from "@/class/VirtualPage" import { VirtualPages } from "@/class/VirtualPage"
import { Reactive, reactive } from "vue" import { Reactive, reactive } from "vue"
let views: Reactive<VirtualPage[]> let views: Reactive<VirtualPages>
export default function useViretualPages(){ export default function useVirtualPages(){
if(views === undefined) { if(views === undefined) {
views = reactive<VirtualPage[]>([]) // views = reactive<VirtualPage[]>([])
views = reactive(new VirtualPages())
} }
return views return views
} }
src/plugins/copyFileUrl2Clipboard/copy.ts
+16
View File
@@ -0,0 +1,16 @@
import { VirtualFile } from "@/class/VirtualDirectory"
import config from "@/config"
import { usePluginHooksType } from "@/types/type"
import copy2Clipboard from 'copy-to-clipboard'
const copy = (__: any, vFiles: VirtualFile[], hooks: usePluginHooksType) => {
const { globalAlertTip } = hooks
const vFile = vFiles[0]
console.log(vFile.url)
copy2Clipboard(`${config.baseUrl}${vFile.url}`)
globalAlertTip(`${vFile.name}的链接已复制至剪切板`, {
type: 'info',
timeout: 2000
})
}
export default copy
src/plugins/copyFileUrl2Clipboard/export.ts
+26
View File
@@ -0,0 +1,26 @@
import { Plugin, PluginGroup } from "@/class/PluginCenter";
import Copy from "./copy";
import { CopyOutline } from "@vicons/ionicons5";
import { PluginExportType } from "@/types/type";
import { shallowRef } from "vue";
const pluginConfig: Plugin = {
name: "复制链接",
icon: shallowRef(CopyOutline),
filter: (vDirs, vFiles) => {
if (vDirs.length !== 0) {
return false;
}
if (vFiles.length !== 1) {
return false;
}
return true;
},
disable: false,
group: [PluginGroup.default],
func: Copy
};
export default pluginConfig;
export const type = PluginExportType.default;
src/plugins/miaoCodeMirror/export.ts
+45
View File
@@ -0,0 +1,45 @@
import { registerComponentOption } from '@/class/PluginCenter'
import { CodeOutline } from '@vicons/ionicons5'
import { PluginExportType } from '@/types/type'
const pluginConfig: registerComponentOption = {
key: 'miaoCodeMirror',
name: '代码编辑',
icon: CodeOutline,
getComponent: async () =>
(await import('@/plugins/miaoCodeMirror/miaoCodeMirror.vue')).default,
filter: (vDirs, vFiles) => {
if (vDirs.length !== 0) {
return false
}
if (vFiles.length !== 1) {
return false
}
for (let end of [
'js',
'ts',
'jsx',
'tsx',
'py',
'html',
'css',
'scss',
'go',
'json',
'md',
'yaml',
'txt',
'xml',
'vue'
]) {
if (vFiles[0].name.endsWith(end)) {
return true
}
}
return false
}
}
export default pluginConfig
export const type = PluginExportType.component
src/plugins/miaoCodeMirror/miaoCodeMirror.vue
+209
View File
@@ -0,0 +1,209 @@
<template>
<miao-message-provider ref="miaoMessage">
<div class="codemirror-container" ref="rootRef" :class="`codemirror-container-${theme}`">
<div class="codemirror-container-top">
<div class="codemirror-container-btn codemirror-container-btn-save" @click="handleSave">
保存
</div>
<div class="codemirror-container-btn codemirror-container-btn-save" @click="handleReset">
恢复到上次保存
</div>
</div>
<div class="codemirror-container-main">
<NScrollbar style="max-height: calc(100%)">
<codemirror v-model="codeData" :extensions="extensions" />
</NScrollbar>
</div>
</div>
</miao-message-provider>
</template>
<script setup lang="ts">
import miaoMessageProvider from '@/components/miaoAlertTipProvider.vue'
import { VirtualFile } from '@/class/VirtualDirectory'
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
import { onMounted, ref } from 'vue'
import { Codemirror } from 'vue-codemirror'
import { NScrollbar } from 'naive-ui'
const miaoFetchApi = useMiaoFetchApi()
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
required: true
})
const decoder = new TextDecoder('utf-8')
const miaoMessage = ref<InstanceType<typeof miaoMessageProvider>>()
const vFile = ref<VirtualFile>()
const rootRef = ref<HTMLDivElement>()
// const _key = ref(Math.random())
const codeData = ref<string>()
// 第一次点击保存时自动备份data，暂时懒得做
const bakData = ref<string>()
const extensions = ref<any[]>([])
const theme = ref<'light' | 'dark'>('light')
const handleSave = async () => {
if (bakData.value === codeData.value || !vFile.value) {
miaoMessage.value?.alertTip('内容未改动', {
timeout: 3000,
type: 'info'
})
return
}
const parentDir = vFile.value?.parent
const file_bak = new File(
[new Blob([bakData.value ?? ''])],
`${vFile.value?.name}.bak`
)
const file = new File([new Blob([codeData.value ?? ''])], vFile.value.name)
bakData.value = codeData.value
const { response } = miaoFetchApi.upload(file, parentDir)
false && miaoFetchApi.upload(file_bak, parentDir)
await response
miaoMessage.value?.alertTip('保存成功', {
timeout: 5000,
type: 'success'
})
}
const handleReset = async () => {
codeData.value = bakData.value
}
// const switchTheme = async () => {
// if (!vFile.value) {
// return
// }
// theme.value = theme.value === 'dark' ? 'light' : 'dark'
// extensions.value = [
// ...(await getLangExtensions(vFile.value?.name)),
// // theme.value === 'dark' ?
// ]
// _key.value = Math.random()
// }
const getLangExtensions = async (fileName: string) => {
const ext = fileName.split('.').pop()?.toLocaleLowerCase()
switch (ext) {
case 'js':
case 'jsx':
case 'ts':
case 'tsx':
const { javascript } = await import('@codemirror/lang-javascript')
return [
javascript({
jsx: ext.substring(2, 3) === 'x',
typescript: ext.substring(0, 2) === 'js'
})
]
break
case 'css':
case 'scss':
const { sass } = await import('@codemirror/lang-sass')
return [sass()]
break
case 'html':
const { html } = await import('@codemirror/lang-html')
return [html()]
break
case 'py':
const { python } = await import('@codemirror/lang-python')
return [python()]
break
case 'go':
const { go } = await import('@codemirror/lang-go')
return [go()]
break
case 'json':
const { json } = await import('@codemirror/lang-json')
return [json()]
break
case 'md':
const { markdown } = await import('@codemirror/lang-markdown')
return [markdown()]
break
case 'yaml':
const { yaml } = await import('@codemirror/lang-yaml')
return [yaml()]
break
case 'vue':
const { vue } = await import('@codemirror/lang-vue')
return [vue()]
break
case 'xml':
const { xml } = await import('@codemirror/lang-xml')
return [xml()]
break
default:
return []
}
}
onMounted(async () => {
vFile.value = currentFiles.value[0]
const fileName = currentFiles.value[0].name
codeData.value = decoder.decode(
await (miaoFetchApi.getFile(currentFiles.value[0], {
axiosOption: {
headers: {
'Cache-Control': 'no-cache'
}
}
}).response)
)
bakData.value = codeData.value
extensions.value = [...(await getLangExtensions(fileName))]
rootRef.value?.addEventListener('keydown', (event) => {
if (event.ctrlKey && event.key === 's') {
event.preventDefault()
handleSave()
}
})
})
</script>
<style scoped lang="scss">
.codemirror-container {
width: 100%;
height: 100%;
overflow-y: hidden;
.codemirror-container-top {
height: 25px;
display: flex;
border-bottom: 1px solid #000;
}
.codemirror-container-btn {
height: 25px;
padding: 0 10px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
user-select: none;
background-color: none;
transition: background-color 0.25s;
&:hover {
background-color: #e8e8e8;
}
}
.codemirror-container-main {
height: calc(100% - 25px);
position: relative;
}
}
.codemirror-container-dark {
background-color: rgb(30, 30, 30);
}
.codemirror-container-light {
background-color: rgb(255, 255, 255);
}
</style>
src/plugins/miaoCrypto/export.ts
+25
View File
@@ -0,0 +1,25 @@
// @ts-nocheck
import { registerComponentOption } from '@/class/PluginCenter'
import { PluginExportType } from '@/types/type'
const pluginConfig: registerComponentOption = {
key: 'miaoCrypto',
name: '文件加密',
getComponent: async () =>
(await import('./miaoCrypto.vue')).default,
filter: (vDirs, vFiles) => {
return true
if (vDirs.length !== 0) {
return false
}
if (vFiles.length !== 1) {
return false
}
return vFiles[0].name.endsWith('txt')
},
disable: true,
}
export default pluginConfig
export const type = PluginExportType.component
src/plugins/miaoCrypto/hooks/AES.ts
+19
View File
@@ -0,0 +1,19 @@
import aesJs from 'aes-js'
import aes_worker from '../workers/aes-worker?worker'
/**
* 使用worker进行aes加密
* @param {any} key:string 须保证长度正确
* @param {any} data:Uint8Array
* @returns {Uint8Array}
*/
export default (key: string, data: Uint8Array) => {
const key_u8i = aesJs.utils.utf8.toBytes(key)
return new Promise<Uint8Array>((resolve) => {
const aesWorker = new aes_worker()
aesWorker.onmessage = (event) => {
resolve(event.data)
}
aesWorker.postMessage({ data, key: key_u8i })
})
}
src/plugins/miaoCrypto/miaoCrypto.vue
+196
View File
@@ -0,0 +1,196 @@
<template>
<miao-drop-handler @on-virtual-files="handleDropVirtualFiles">
<div class="miaoCrypto-container">
<div class="miaoCrypto-container-encrypt miaoCrypto-container-item">
<n-scrollbar style="max-height: 100%">
<div v-for="item of workItemList" :key="item.id" class="miaoCrypto-container-item-item">
<div class="miaoCrypto-container-item-percentBar" :style="{
zIndex: 0,
width: item.getBufferProgress !== -1 ? `${item.getBufferProgress * 100}%` : `0%`,
backgroundColor: 'blue'
}"></div>
<div class="miaoCrypto-container-item-percentBar" :style="{
zIndex: 1,
width: item.status === 'finish' ? `100%` : `0%`,
backgroundColor: 'green'
}"></div>
<span class="miaoCrypto-container-item-content">{{ item.name }}{{ item.status }}</span>
</div>
</n-scrollbar>
</div>
<!-- <div class="miaoCrypto-container-decrypt miaoCrypto-container-item"></div> -->
</div>
</miao-drop-handler>
</template>
<script setup lang="ts">
import { NScrollbar } from 'naive-ui'
import { onUnmounted, ref, shallowReactive } from 'vue'
import aes_ctr_worker from './hooks/AES'
import { VirtualFile } from '@/class/VirtualDirectory'
import miaoDropHandler from '@/components/miaoDropHandler.vue'
import { reactive } from 'vue'
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
import { onMounted } from 'vue'
import { computed } from 'vue'
const miaoFetchApi = useMiaoFetchApi()
interface workItem {
id: number
status: 'wait' | 'process' | 'finish' | 'error'
buffer?: Uint8Array
getBuffer: () => Promise<Uint8Array>
getBufferProgress: number
getBufferAbort?: () => void
isGettingBuffer: boolean
name: string
}
class Work {
constructor(func: (key: string, data: Uint8Array) => Promise<Uint8Array>) {
this.queue = []
this.func = func
this.abortLoop = false
}
queue: workItem[]
func: (key: string, data: Uint8Array) => Promise<Uint8Array>
abortLoop: boolean
get isBusy() {
return this.queue.filter((v) => v.status === 'process').length > 0
}
async funcLoop() {
if (this.isBusy || this.abortLoop) {
return
}
const currentItem = this.queue.filter((v) => v.status === 'wait')[0]
if (currentItem === undefined || currentItem.buffer === undefined) {
return
}
currentItem.status = 'process'
try {
currentItem.buffer = await this.func(key.value, currentItem.buffer)
currentItem.status = 'finish'
} catch (e) {
currentItem.status = 'error'
}
this.funcLoop()
}
async getBufferLoop() {
const _list = this.queue.filter(
(v) => v.isGettingBuffer === false && v.buffer === undefined
)
if (_list.length === 0 || this.abortLoop) {
return
}
const item = _list[0]
item.isGettingBuffer = true
try {
item.buffer = await item.getBuffer()
} catch(e) {
item.status = 'error'
}
item.isGettingBuffer = false
this.funcLoop()
this.getBufferLoop()
}
push(itemList: workItem[]) {
this.queue.push(...itemList)
this.getBufferLoop()
}
pushVFiles(itemList: VirtualFile[]) {
this.push(
itemList.map((v) => {
const item: workItem = shallowReactive({
id: Math.random(),
status: 'wait',
name: v.name,
getBuffer: () => {
const { response, abort } = miaoFetchApi.getFile(v, {
onProcess(percent) {
item.getBufferProgress = percent
}
})
item.getBufferAbort = abort
return response
},
isGettingBuffer: false,
getBufferProgress: 0
})
return item
})
)
}
}
const encryptWork = reactive(new Work(aes_ctr_worker))
// const decryptWork = reactive(new Work(aes_ctr_worker))
const workItemList = computed(() => [
...encryptWork.queue
// ...decryptWork.queue
])
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
required: true
})
const key = ref('ABlockIs16Bytes!')
const handleDropVirtualFiles = (vFiles: VirtualFile[]) => {
encryptWork.pushVFiles(vFiles)
}
onMounted(() => {
encryptWork.pushVFiles(currentFiles.value)
})
onUnmounted(() => {
encryptWork.abortLoop = true
encryptWork.queue.forEach(item => {
item.getBufferAbort && item.getBufferAbort()
})
})
</script>
<style scoped lang="scss">
.miaoCrypto-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
&-item {
max-height: 100%;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
&-item {
margin: 10px auto;
width: 95%;
height: 40px;
background-color: #fff;
box-shadow: 0 0 15px -7px rgba(0, 0, 0, 0.1725490196),
0 0 3px 1px #43434359;
border-radius: 5px;
position: relative;
.miaoCrypto-container-item-percentBar {
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 5px;
}
.miaoCrypto-container-item-content {
position: relative;
z-index: 3
}
}
}
}
</style>
src/plugins/miaoCrypto/workers/aes-worker.ts
+9
View File
@@ -0,0 +1,9 @@
import aesJs from 'aes-js'
self.onmessage = async function (event) {
const data = event.data.data as Uint8Array
const key = event.data.key as Uint8Array
var aesCtr = new aesJs.ModeOfOperation.ctr(key, new aesJs.Counter(7058))
const encryptData = aesCtr.encrypt(data)
self.postMessage(encryptData)
}
src/plugins/miaoDirectory/components/miaoDirectoryBottom.vue
+77
View File
@@ -0,0 +1,77 @@
<template>
<div class="miao-directory-container-bottom" :style="{
backgroundColor:
index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
}">
<div class="container-bottom-item">
<div class="container-bottom-item-icon">
<add-outline :style="{
color:
index % 2 === 0
? 'rgb(0 0 0)'
: 'rgb(255 255 255)'
}" @click="emit('add-new-item')" />
</div>
</div>
<div class="container-bottom-item">
<div class="container-bottom-item-icon">
<cloud-upload-outline :style="{
color:
index % 2 === 0
? 'rgb(0 0 0)'
: 'rgb(255 255 255)'
}" @click="emit('pick-files-upload')" />
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { AddOutline, CloudUploadOutline } from '@vicons/ionicons5'
defineProps<{
index: number
}>()
const emit = defineEmits<{
'add-new-item': []
'pick-files-upload': []
}>()
</script>
<style scoped lang="scss">
.miao-directory-container-bottom {
height: 60px;
background-color: bisque;
display: flex;
justify-content: space-around;
align-items: center;
user-select: none;
box-shadow: 0px 1px 10px #888888;
z-index: 2;
.container-bottom-item {
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
.container-bottom-item-icon {
svg {
width: 30px;
height: 30px;
transition: width 0.3s ease;
transition: height 0.3s ease;
cursor: pointer;
}
&:hover {
svg {
width: 40px;
height: 40px;
}
}
}
}
}
</style>
src/components/miaoDirectory/miaoDirectoryItem.vue → src/plugins/miaoDirectory/components/miaoDirectoryItem.vue
+55 -81
View File
@@ -1,32 +1,25 @@
<template> <template>
<div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart"> <div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
<miaoContextMenu :options="dropDownOptions" :touch-time-out="500" @select="handleDropdownSelect"> <miaoContextMenu :options="dropDownOptions ?? []" :touch-time-out="500" @select="handleDropdownSelect">
<div class="item-main" :class="props.selected ? 'item-main-selected' : ''" ref="mainRef"> <div class="item-main" :class="selected ? 'item-main-selected' : ''" ref="mainRef">
<div class="item-main-front" :style="{ backgroundColor: props.color }"></div> <div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
<Icon class="item-main-icon" v-show="clientWidth > 250"></Icon> <Icon class="item-main-icon" v-show="clientWidth > 250"></Icon>
<div class="item-main-info"> <div class="item-main-info">
<div class="item-main-info-name"> <div class="item-main-info-name">
<Icon class="item-main-info-name-icon" v-show="clientWidth <= 250"></Icon> <Icon class="item-main-info-name-icon" v-if="clientWidth <= 250"></Icon>
<n-ellipsis style="max-width: 140px;">{{ name }}</n-ellipsis> <n-ellipsis :style="{ maxWidth: clientWidth > 250 ? '80%' : '75%' }">{{ name }}</n-ellipsis>
</div> </div>
<div class="item-main-info-date" v-if="time"> <div class="item-main-info-date" v-if="time">
{{ time }} {{ time }}
</div> </div>
</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>
</miaoContextMenu> </miaoContextMenu>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory' import miaoContextMenu from '@/components/miaoContextMenu.vue'
import miaoContextMenu from '../miaoContextMenu.vue'
import { import {
DocumentText, DocumentText,
FileTray, FileTray,
@@ -39,30 +32,37 @@ import {
PlayCircle, PlayCircle,
Disc Disc
} from '@vicons/ionicons5' } from '@vicons/ionicons5'
import { computed, onMounted, ref } from 'vue' import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import dateFormatter from '@/hooks/dateFormatter' import dateFormatter from '@/hooks/dateFormatter'
import { NEllipsis } from 'naive-ui' import { NEllipsis } from 'naive-ui'
import { DropdownOption } from 'naive-ui/es/dropdown';
// import useMiaoFetchApi from '@/hooks/useMiaoFetchApi' // import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
// const miaoFetchApi = useMiaoFetchApi() // const miaoFetchApi = useMiaoFetchApi()
const props = defineProps<{ const props = defineProps<{
item: VirtualDirectory | VirtualFile item: {
name: string,
type: 'directory' | 'file'
stats: {
mtimeMs: number
}
}
name?: string name?: string
color: string color: string
selected: boolean dropDownOptions?: DropdownOption[]
selected?: boolean
}>() }>()
const emit = defineEmits<{ const emit = defineEmits<{
download: [] download: []
delete: [] delete: []
rename: [] rename: []
dragStart: [event: DragEvent, item: VirtualDirectory | VirtualFile] dragStart: [event: DragEvent]
onSelected: [] onSelected: []
plugin: [plugin: string]
}>() }>()
const itemType = ref<'file' | 'directory'>(props.item.type)
const mainRef = ref<HTMLDivElement>() const mainRef = ref<HTMLDivElement>()
// 使用ResizeObserver实现 // 使用ResizeObserver实现
@@ -70,6 +70,12 @@ const clientWidth = ref<number>(666)
const name = props.name ?? props.item.name const name = props.name ?? props.item.name
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
clientWidth.value = entry.contentRect.width;
}
});
const time = computed(() => { const time = computed(() => {
return dateFormatter( return dateFormatter(
new Date(props.item.stats.mtimeMs), new Date(props.item.stats.mtimeMs),
@@ -77,50 +83,8 @@ const time = computed(() => {
) )
}) })
const dropDownOptions = computed(() => {
const options = [
{
label: '重命名',
key: 'rename'
},
{
label: '删除',
key: 'delete'
},
]
if (itemType.value === 'file') {
options.push(
...[
{
label: '下载',
key: 'download'
}
]
)
}
if (props.selected === false) {
options.push(
...[
{
label: '多选:选择',
key: 'select'
}
]
)
} else {
options.push(
...[
{
label: '多选:取消',
key: 'select'
}
]
)
}
return options
})
// 是不是可以直接在这里面实现？ // 是不是可以直接在这里面实现？
// 应该将所有事件emit出去才对
const handleDropdownSelect = (key: string) => { const handleDropdownSelect = (key: string) => {
if (key === 'rename') { if (key === 'rename') {
emit('rename') emit('rename')
@@ -130,6 +94,9 @@ const handleDropdownSelect = (key: string) => {
emit('delete') emit('delete')
} else if (key === 'select') { } else if (key === 'select') {
emit('onSelected') emit('onSelected')
} else if (key.startsWith('plugin:')) {
const plugin = key.split(':')[1]
emit('plugin', plugin)
} }
} }
@@ -151,22 +118,22 @@ const Icon = computed(() => {
return Disc return Disc
} else if ( } else if (
[ [
'.xbm', 'xbm',
'.tif', 'tif',
'pjp', 'pjp',
'.svgz', 'svgz',
'jpg', 'jpg',
'jpeg', 'jpeg',
'ico', 'ico',
'tiff', 'tiff',
'.gif', 'gif',
'svg', 'svg',
'.jfif', 'jfif',
'.webp', 'webp',
'.png', 'png',
'.bmp', 'bmp',
'pjpeg', 'pjpeg',
'.avif' 'avif'
].includes(aft) ].includes(aft)
) { ) {
return Image return Image
@@ -191,27 +158,28 @@ const Icon = computed(() => {
const itemRef = ref() const itemRef = ref()
const handleDragStart = (event: DragEvent) => { const handleDragStart = (event: DragEvent) => {
emit('dragStart', event, props.item) emit('dragStart', event)
// dataBus.set('dragData', [props.item]) // dataBus.set('dragData', [props.item])
} }
onMounted(() => { onMounted(() => {
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
clientWidth.value = entry.contentRect.width;
}
});
if (mainRef.value) { if (mainRef.value) {
observer.observe(mainRef.value); observer.observe(mainRef.value);
} }
}) })
onBeforeUnmount(() => {
if (mainRef.value) {
observer.unobserve(mainRef.value);
}
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.miao-item { .miao-item {
cursor: pointer; cursor: pointer;
width: calc(100% - 20px); width: calc(100% - 20px);
min-width: 170px; // min-width: 170px;
// aspect-ratio: 66/9; // aspect-ratio: 66/9;
height: 50px; height: 50px;
position: relative; position: relative;
@@ -229,17 +197,19 @@ onMounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
transition: background-color 0.3s ease; transition: background-color 0.3s ease;
overflow-x: hidden;
.item-main-front { .item-main-front {
height: 100%; height: 100%;
width: 10px; min-width: 10px;
border-radius: 7px 0 0 7px; border-radius: 7px 0 0 7px;
background-color: rgb(0, 0, 0); background-color: rgb(0, 0, 0);
} }
.item-main-icon { .item-main-icon {
min-width: 30px;
margin-left: 10px; margin-left: 10px;
height: 80%; height: 30px;
width: 30px;
color: #00403e; color: #00403e;
transition: color 0.15s ease-out; transition: color 0.15s ease-out;
} }
@@ -247,6 +217,7 @@ onMounted(() => {
.item-main-info { .item-main-info {
margin-left: 10px; margin-left: 10px;
height: 100%; height: 100%;
width: calc(100% - 10px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -305,10 +276,13 @@ onMounted(() => {
background-color: #d2d2d2; background-color: #d2d2d2;
} }
} }
.item-main-selected { .item-main-selected {
background-color: rgba(0, 128, 207, 0.32); background-color: rgba(0, 128, 207, 0.32);
&:hover { &:hover {
background-color: rgba(0, 128, 207, 0.64);; background-color: rgba(0, 128, 207, 0.64);
;
} }
} }
} }
src/plugins/miaoDirectory/components/miaoDirectoryItemsContainer.vue
+182
View File
@@ -0,0 +1,182 @@
<template>
<div
class="miao-directory-container-items"
:style="{
backgroundColor: index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
}">
<n-scrollbar ref="scrollbarRef" style="max-height: 100%">
<miao-lazy-div
v-for="dir in showData_directory"
:key="dir.id"
min-height="50px"
margin="10px">
<miaoDirectoryItem
:item="dir"
:color="props.color"
:selected="selectedItem.includes(dir)"
:drop-down-options="itemDropDownOptions(dir).value"
@delete="handleItemDelete(dir)"
@plugin="(p) => handleItemUsePlugin(dir)(p)"
@click="handleItemClick(dir)"
@drag-start="(e) => handleItemDragStart(dir)(e)"
@rename="handleItemRename(dir)"
@on-selected="handleItemSelect(dir)" />
</miao-lazy-div>
<miao-lazy-div
v-for="file in showData_files"
:key="file.id"
min-height="50px">
<miaoDirectoryItem
:item="file"
:color="props.color"
:selected="selectedItem.includes(file)"
:drop-down-options="itemDropDownOptions(file).value"
@click="handleItemClick(file)"
@download="handleItemDownload(file)"
@delete="handleItemDelete(file)"
@drag-start="(e) => handleItemDragStart(file)(e)"
@rename="handleItemRename(file)"
@plugin="(p) => handleItemUsePlugin(file)(p)"
@on-selected="handleItemSelect(file)" />
</miao-lazy-div>
</n-scrollbar>
</div>
</template>
<script setup lang="ts">
import { NScrollbar } from 'naive-ui'
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import miaoDirectoryItem from './miaoDirectoryItem.vue'
import miaoLazyDiv from '@/components/miaoLazyDiv.vue'
import { computed, ref } from 'vue'
import usePluginCenter from '@/hooks/usePluginCenter'
import { renderIcon } from '@/hooks/miaoTools'
const pluginCenter = usePluginCenter()
const props = defineProps<{
color: string
index: number
showData_directory: VirtualDirectory[]
showData_files: VirtualFile[]
selectedItem: (VirtualFile | VirtualDirectory)[]
}>()
const emit = defineEmits<{
'item-click': [item: VirtualDirectory | VirtualFile]
'item-download': [item: VirtualFile]
'item-delete': [item: VirtualDirectory | VirtualFile]
'item-drag-start': [_event: DragEvent, item: VirtualDirectory | VirtualFile]
'item-rename': [item: VirtualDirectory | VirtualFile]
'item-select': [item: VirtualDirectory | VirtualFile]
}>()
const scrollbarRef = ref()
const itemDropDownOptions = (item: VirtualDirectory | VirtualFile) =>
computed(() => {
const items = [...props.selectedItem]
const selected = props.selectedItem.includes(item)
if (!selected) {
items.push(item)
}
const vDirs = items.filter((v) => v.type === 'directory')
const vFiles = items.filter((v) => v.type === 'file')
const options = [
{
label: '重命名',
key: 'rename'
},
{
label: '删除',
key: 'delete'
}
]
if (item.type === 'file') {
options.push(
...[
{
label: '下载',
key: 'download'
}
]
)
}
if (selected === false) {
options.push(
...[
{
label: '多选:选择',
key: 'select'
}
]
)
} else {
options.push(
...[
{
label: '多选:取消',
key: 'select'
}
]
)
}
options.push(
...pluginCenter.getUsablePlugin(vDirs, vFiles).map((v) => ({
label: `插件:${v.name}`,
key: `plugin:${v.key}`,
icon: v.icon ? renderIcon(v.icon) : undefined
}))
)
return options
})
const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
emit('item-click', item)
}
const handleItemDownload = (item: VirtualFile) => {
emit('item-download', item)
}
const handleItemDelete = (item: VirtualDirectory | VirtualFile) => {
emit('item-delete', item)
}
const handleItemDragStart =
(item: VirtualDirectory | VirtualFile) => (_event: DragEvent) => {
emit('item-drag-start', _event, item)
}
const handleItemRename = (item: VirtualDirectory | VirtualFile) => {
emit('item-rename', item)
}
const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
emit('item-select', item)
}
const handleItemUsePlugin =
(item: VirtualDirectory | VirtualFile) => (plugin: string) => {
const items = [...props.selectedItem]
const selected = props.selectedItem.includes(item)
if (!selected) {
items.push(item)
}
const vDirs = items.filter((v) => v.type === 'directory')
const vFiles = items.filter((v) => v.type === 'file')
pluginCenter.usePlugin(plugin, vDirs, vFiles)
}
defineExpose({
scrollTo: (...args: any) => scrollbarRef.value.scrollTo(...args)
})
</script>
<style scoped lang="scss">
.miao-directory-container-items {
width: 100%;
flex: 1;
min-height: 0;
}
</style>
src/plugins/miaoDirectory/components/miaoDirectoryTop.vue
+152
View File
@@ -0,0 +1,152 @@
<template>
<div class="miao-directory-container-top" :style="{
backgroundColor:
index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
}">
<div class="container-top-colorfulBar" :style="{ backgroundColor: props.color }"></div>
<div class="container-top-breadcrumb">
<div class="container-top-breadcrumb-container">
<n-breadcrumb separator=">" style="margin-left: 5px">
<n-breadcrumb-item :clickable="false">
<n-icon size="18">
<CloudOutline />
</n-icon>
</n-breadcrumb-item>
<n-breadcrumb-item v-for="dir in currentDirectory?.getParents"
@click="handleClickBreadcrumbItem(dir)" :clickable="true">
<div>{{ dir.name }}</div>
</n-breadcrumb-item>
</n-breadcrumb>
</div>
</div>
<div class="container-top-tools">
<n-icon class="container-top-tools-item" size="15" @click="$emit('back')">
<ChevronBackOutline />
</n-icon>
<n-icon class="container-top-tools-item" size="14" @click="$emit('reload')">
<ReloadOutline class="container-top-tools-item-reload" />
</n-icon>
<n-dropdown trigger="click" :options="openMenuOption" @select="(key: string) => emit('menuSelect', key)">
<n-icon class="container-top-tools-item" size="14">
<EllipsisVertical />
</n-icon>
</n-dropdown>
</div>
</div>
</template>
<script setup lang="ts">
import { NBreadcrumbItem, NBreadcrumb, NIcon, NDropdown } from 'naive-ui'
import {
CloudOutline,
ChevronBackOutline,
ReloadOutline,
EllipsisVertical,
} from '@vicons/ionicons5'
import VirtualDirectory from '@/class/VirtualDirectory'
const props = defineProps<{
color: string;
index: number
currentDirectory: VirtualDirectory | undefined;
openMenuOption: {
key: string,
label: string,
[key: string]: any,
}[]
}>()
const emit = defineEmits<{
back: [],
reload: [],
menuSelect: [key: string]
'set-current-directory': [virtualDirectory: VirtualDirectory]
}>()
const handleClickBreadcrumbItem = (virtualDirectory: VirtualDirectory) => {
emit('set-current-directory', virtualDirectory)
}
</script>
<style scoped lang="scss">
.miao-directory-container-top {
height: 30px;
width: 100%;
user-select: none;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
background-color: #f1f1f1;
.container-top-colorfulBar {
height: 70%;
width: 5px;
margin-left: 10px;
border-radius: 3px 0 0 3px;
}
.container-top-breadcrumb {
position: relative;
height: 70%;
width: calc(100% - 95px);
display: flex;
justify-content: flex-start;
align-items: center;
// overflow: hidden;
overflow-y: hidden;
overflow-x: hidden;
background-color: #ffffff;
padding: 0 5px;
border-radius: 0 3px 3px 0;
.container-top-breadcrumb-container {
position: absolute;
height: 100%;
right: 0;
top: 0;
min-width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
}
}
.container-top-tools {
position: relative;
height: 100%;
// width: 70px;
padding: 0 5px;
display: flex;
justify-content: space-around;
align-items: center;
.container-top-tools-item {
width: 20px;
height: 20px;
margin: 0 1px;
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);
}
}
}
}
</style>
src/plugins/miaoDirectory/export.ts
+23
View File
@@ -0,0 +1,23 @@
import { registerComponentOption } from '@/class/PluginCenter'
import FileTray from '@vicons/ionicons5/es/FileTray'
// import MiaoDirectory from '@/plugins/miaoDirectory/miaoDirectory.vue'
const pluginConfig: registerComponentOption = {
key: 'miaoDirectory',
name: '文件夹',
icon: FileTray,
getComponent: async () =>
(await import('@/plugins/miaoDirectory/miaoDirectory.vue')).default,
filter: (vDirs, vFiles) => {
if (vFiles.length) {
return false
}
return vDirs.length === 1
}
}
export default pluginConfig
import { PluginExportType } from '@/types/type'
export const type = PluginExportType.component
src/plugins/miaoDirectory/miaoDirectory.vue
+646
View File
@@ -0,0 +1,646 @@
<template>
<miao-drop-handler @on-virtual-directory="handleDropVDirectory" @on-files="handleDropFiles"
@on-virtual-files="handleDropVirtualFiles">
<div class="miao-directory-item-container" ref="rootDomRef">
<!-- 顶部面包屑导航和工具栏 -->
<miao-directory-top :color="props.color" :current-directory="currentDirectory" @back="handleBack"
:open-menu-option="topBarMenuOption" @reload="handleReload" @exit="emit('exit')" :index="index"
@set-current-directory="setCurrentDirectory" @search="handleSearch"
@menu-select="handleTopBarMenuSelect" />
<!-- 文件和文件夹列表 -->
<miao-directory-items ref="miaoDirectoryItemRef" :color="props.color"
:showData_directory="showData_directory" :showData_files="showData_files"
:selected-item="selectedItem.value" :index="index" @item-click="handleItemClick"
@item-download="handleItemDownload" @item-delete="handleItemDelete"
@item-drag-start="handleItemDragStart" @item-rename="handleItemRename"
@item-select="handleItemSelect" />
<!-- 底部工具栏 -->
<miao-directory-bottom :index="index" @add-new-item="handleAddNewItem" v-if="false"
@pick-files-upload="handlePickFilesUpload" />
<miao-mask v-model:show="showModel"></miao-mask>
<miao-popup-input ref="popupInput"></miao-popup-input>
</div>
</miao-drop-handler>
</template>
<script setup lang="ts">
import { computed, nextTick, onMounted, reactive, ref } from 'vue'
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import Config from '@/config'
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
import useDataBus from '@/hooks/useDataBus'
import useUploadQueue from '@/hooks/useUploadQueue'
import useVirtualPages from '@/hooks/useVirtualPages'
import { filePicker, renderIcon } from '@/hooks/miaoTools'
import { uniq } from 'lodash'
// 导入子组件
import miaoDirectoryTop from './components/miaoDirectoryTop.vue'
import MiaoDirectoryItems from './components/miaoDirectoryItemsContainer.vue'
import MiaoDirectoryBottom from './components/miaoDirectoryBottom.vue'
import MiaoMask from '@/components/miaoMask.vue'
import MiaoPopupInput from '@/components/miaoPopupInput.vue'
import MiaoDropHandler from '@/components/miaoDropHandler.vue'
import {
CloseOutline,
SearchOutline,
FilterOutline,
CheckmarkDoneOutline,
DocumentText,
ExtensionPuzzleOutline,
FileTray,
AddOutline,
CloudUploadOutline
} from '@vicons/ionicons5'
import usePluginCenter from '@/hooks/usePluginCenter'
const { baseUrl, api } = Config
const dataBus = useDataBus()
const views = useVirtualPages()
const uploadQueue = useUploadQueue()
const miaoFetchApi = useMiaoFetchApi()
const pluginCenter = usePluginCenter()
const props = defineProps<{
color: string
id: number
}>()
const emit = defineEmits<{
exit: []
}>()
const popupInput = ref<InstanceType<typeof MiaoPopupInput>>()
// 是否显示模态框
const showModel = ref(0)
const searchText = ref<string>('')
const showDirs = ref<boolean>(true)
const showFiles = ref<boolean>(true)
const miaoDirectoryItemRef = ref()
class SelectedItem {
constructor() {
this._selectedItem = []
}
_selectedItem: (VirtualDirectory | VirtualFile)[]
push(item: VirtualDirectory | VirtualFile) {
this._selectedItem = uniq([item, ...this._selectedItem])
}
pushArray(items: (VirtualDirectory | VirtualFile)[]) {
this._selectedItem = uniq([...items, ...this._selectedItem])
}
remove(item: VirtualDirectory | VirtualFile) {
this._selectedItem = this._selectedItem.filter((v) => v !== item)
}
/**
* 仅保留filter为true的元素, filter默认为()=>false
*/
clear(filter?: (item: VirtualDirectory | VirtualFile) => boolean) {
filter || (filter = (__) => false)
this._selectedItem = this.value.filter(filter)
}
// 保证内容仍然存在于dir中且各个元素不重复
get value() {
const _filterList = [
...(currentDirectory.value?.directories ?? []),
...(currentDirectory.value?.files ?? [])
]
return uniq(this._selectedItem).filter((v) => {
if (currentDirectory.value === undefined) {
return false
}
// @ts-ignore
return _filterList.includes(v)
})
}
}
// 已选择的item，用于多选功能
const selectedItem = reactive(new SelectedItem())
const currentDirectories = defineModel<VirtualDirectory[]>(
'currentDirectories',
{
required: true
}
)
// 目前展示的Dir
const currentDirectory = computed(() => {
return currentDirectories.value[0]
})
// 当前组件在views中的序号
const index = computed(() => {
return views.getIndex(props.id)
})
// 用于展示的数据，后续会增加排序等操作
const showData_directory = computed<VirtualDirectory[]>(() => {
if (showDirs.value === false) {
return []
}
let data = currentDirectory.value?.directories
? [...currentDirectory.value?.directories]
: []
if (searchText.value !== '') {
data = data.filter((vd) => vd.name.includes(searchText.value))
}
return data
})
const showData_files = computed<VirtualFile[]>(() => {
if (showFiles.value === false) {
return []
}
let data = currentDirectory.value?.files
? [...currentDirectory.value?.files]
: []
if (searchText.value !== '') {
data = data.filter((vd) => vd.name.includes(searchText.value))
}
return data
})
const topBarMenuOption = computed(() => {
return [
{
label: '新建',
key: 'create',
icon: renderIcon(AddOutline)
},
{
label: '上传',
key: 'upload',
icon: renderIcon(CloudUploadOutline)
},
{
label: '搜索',
key: 'search',
icon: renderIcon(SearchOutline)
},
searchText.value !== ''
? {
label: '重置搜索',
key: 'searchReset',
icon: renderIcon(SearchOutline)
}
: undefined,
// selectedItem.value.length !== 0
// ? {
// label: '重置多选',
// key: 'selectedItemReset',
// icon: renderIcon(CheckmarkDoneOutline)
// }
// : undefined,
{
label: '筛选',
key: 'filter',
children: [
{
label: `${showDirs.value ? '隐藏' : '显示'}文件夹`,
key: 'showDirs',
icon: renderIcon(FileTray)
},
{
label: `${showFiles.value ? '隐藏' : '显示'}文件`,
key: 'showFiles',
icon: renderIcon(DocumentText)
}
],
icon: renderIcon(FilterOutline)
},
{
label: '多选',
key: 'multiSelect',
children: [
{
label: `全选`,
key: 'multiSelect:all'
},
{
label: `全不选`,
key: 'multiSelect:reset'
},
{
label: `反选`,
key: 'multiSelect:inversion'
},
selectedItem.value.length === 2 ?
{
label: `区间内全选`,
key: 'multiSelect:range'
} : undefined
].filter((v) => v !== undefined),
icon: renderIcon(CheckmarkDoneOutline),
},
{
label: '插件',
key: 'plugin',
children: [
...pluginCenter
.getUsablePlugin([currentDirectories.value[0]], [])
.map((v) => ({
label: `${v.name}`,
key: `plugin:${v.key}`,
icon: v.icon ? renderIcon(v.icon) : undefined
}))
],
icon: renderIcon(ExtensionPuzzleOutline)
},
{
label: '关闭',
key: 'close',
icon: renderIcon(CloseOutline)
}
].filter((v) => v !== undefined)
})
// 设置显示的dir
const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
// 若没有缓存数据则同步刷新，有缓存数据则异步刷新
if (
virtualDirectory.files === undefined ||
virtualDirectory.directories === undefined
) {
await virtualDirectory.update()
} else {
virtualDirectory.update()
}
if (currentDirectories.value[0] !== virtualDirectory) {
selectedItem.clear()
handleSearchReset()
nextTick(() => {
miaoDirectoryItemRef.value.scrollTo({
top: 0,
behavior: 'instant'
})
})
}
currentDirectories.value[0] = virtualDirectory
}
const reload = () => {
setCurrentDirectory(currentDirectory.value)
}
const openUrl = (
href: string,
config?: {
download?: string
target?: string
}
) => {
let { target, download } = config ?? {}
const a = document.createElement('a')
a.setAttribute('href', href)
a.setAttribute('target', target ?? '_blank')
download && a.setAttribute('download', download)
a.click()
}
const handleTopBarMenuSelect = (key: string) => {
if (key === 'close') {
emit('exit')
} else if (key === 'search') {
handleSearch()
} else if (key === 'upload') {
handlePickFilesUpload()
} else if (key === 'create') {
handleAddNewItem()
} else if (key === 'searchReset') {
handleSearchReset()
// } else if (key === 'selectedItemReset') {
// selectedItem.clear()
} else if (key === 'showDirs') {
showDirs.value = !showDirs.value
showDirs.value === false && selectedItem.clear(v => v.type !== 'directory')
} else if (key === 'showFiles') {
showFiles.value = !showFiles.value
showFiles.value === false && selectedItem.clear(v => v.type !== 'file')
} else if (key.startsWith('plugin:')) {
const pluginName = key.split(':')[1]
pluginCenter.usePlugin(pluginName, [currentDirectory.value], [])
} else if (key.startsWith('multiSelect:')) {
const opName = key.split(':')[1]
switch (opName) {
case 'all':
selectedItem.pushArray([...showData_directory.value, ...showData_files.value])
break;
case 'reset':
selectedItem.clear()
break
case 'inversion':
const sArr = selectedItem.value
const arr = [...showData_directory.value, ...showData_files.value].filter(i => !sArr.includes(i))
selectedItem.clear()
selectedItem.pushArray(arr)
break
case "range":
const _sArr = selectedItem.value
const _arr = [...showData_directory.value, ...showData_files.value]
const _nArr = []
let _counter = 0
for (const i of _arr) {
if (_sArr.includes(i)) {
_counter++
}
if (_counter === 1) {
_nArr.push(i)
} else if (_counter === 2) {
_nArr.push(i)
break
}
}
selectedItem.clear()
selectedItem.pushArray(_nArr)
break
}
}
}
const handleBack = () => {
if (currentDirectory.value?.parent) {
setCurrentDirectory(currentDirectory.value.parent)
}
}
const handleReload = () => {
reload()
}
const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
if (selectedItem.value.length > 0) {
handleItemSelect(item)
} else {
if (item.type === 'file') {
const useablePlugins = pluginCenter.getUsablePlugin([], [item])
if(useablePlugins.length > 0){
pluginCenter.usePlugin(useablePlugins[0].key, [], [item])
} else {
openUrl(`${baseUrl}${api.get}${item.path}`)
}
} else if (item.type === 'directory') {
setCurrentDirectory(item)
}
}
}
const handleItemDownload = (item: VirtualFile) => {
openUrl(`${baseUrl}${api.get}${item.path}`, {
download: item.name
})
}
const handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
for (let item of uniq([...selectedItem.value, _item])) {
; (async () => {
const { response } = miaoFetchApi.delete(item, {
retry: 5
})
// todo: 将删除事件统一用一个事件管理中心管理
const id = (await response).eventId
const { response: res } = miaoFetchApi.query(id)
const eventResult = await res
if (eventResult.status === 'success') {
reload()
}
})()
}
}
const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
const popupRes = await popupInput.value?.popup({
title: '重命名',
inputValue: item.name,
inputProps: {
placeholder: item.name
},
options: [
{
label: '取消',
key: false,
type: 'error'
},
{
label: '确认',
key: true,
type: 'success'
}
]
})
if (popupRes?.key === false) {
return
}
const newName = popupRes?.text
if (!newName) {
return
}
const { response } = miaoFetchApi.rename(item, newName, {
retry: 5
})
const id = (await response).eventId
const { response: res } = miaoFetchApi.query(id)
const eventResult = await res
if (eventResult.status === 'success') {
reload()
}
}
const handleItemDragStart = async (
_event: DragEvent,
item: VirtualDirectory | VirtualFile
) => {
const items = uniq([item, ...selectedItem.value])
dataBus.set(
'dragData_vFiles',
items.filter((v) => v.type === 'file')
)
dataBus.set(
'dragData_vDirectory',
items.filter((v) => v.type === 'directory')
)
// selectedItem.clear()
}
const handleDropFiles = async (files: File[]) => {
currentDirectory.value &&
uploadQueue.push(files, currentDirectory.value, {
onFinish() {
reload()
}
})
}
const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
// 不能移到自己或自己的子文件夹内
for (let vDir of vDirs) {
if (currentDirectory.value.getParents.includes(vDir)) {
return
}
if (vDir.parent === currentDirectory.value) {
return
}
}
for (let dir of vDirs) {
; (async () => {
const _from = dir.parent
const { response } = miaoFetchApi.cut(dir, currentDirectory.value)
const id = (await response).eventId
const { response: res } = miaoFetchApi.query(id)
const eventResult = await res
if (eventResult.status === 'success') {
reload()
_from && _from.update()
}
})()
}
}
const handleDropVirtualFiles = (files: VirtualFile[]) => {
if (files[0].parent === currentDirectory.value) {
return
}
for (let file of files) {
; (async () => {
const _from = file.parent
const { response } = miaoFetchApi.cut(file, currentDirectory.value)
const id = (await response).eventId
const { response: res } = miaoFetchApi.query(id)
const eventResult = await res
if (eventResult.status === 'success') {
reload()
_from.update()
}
})()
}
}
const handlePickFilesUpload = async () => {
const files = await filePicker({
multiple: true
})
const _currDir = currentDirectory.value
uploadQueue.push(files, _currDir, {
onFinish() {
_currDir.update()
}
})
}
const handleAddNewItem = async () => {
const popupRes = await popupInput.value?.popup({
title: '新建文件/文件夹',
inputProps: {
placeholder: ''
},
options: [
{
label: '取消',
key: 'cancel',
type: 'error'
},
{
label: '文件',
key: 'file',
type: 'success'
},
{
label: '文件夹',
key: 'dir',
type: 'success'
}
]
})
// todo: 上传前如重名文件夹等等的错误提前检查
if (popupRes?.key === 'cancel' || popupRes?.text === '') {
return
}
const _currDir = currentDirectory.value
const name = popupRes?.text
if (!name) {
return
}
// @ts-ignore
const opType: 'file' | 'dir' = popupRes?.key
if (opType === 'dir') {
const res = await miaoFetchApi.mkdir(currentDirectory.value, name)
if (res.message === 'success') {
_currDir.update()
}
} else {
const { response } = miaoFetchApi.mkFile(currentDirectory.value, name)
const res = await response
if (res.message === 'success') {
_currDir.update()
}
}
}
const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
if (!selectedItem.value.includes(item)) {
selectedItem.push(item)
} else {
selectedItem.remove(item)
}
}
const handleSearch = async () => {
const popupRes = await popupInput.value?.popup({
title: '搜索当前文件夹',
inputValue: searchText.value,
inputProps: {
placeholder: ''
},
options: [
{
label: '取消',
key: 'cancel',
type: 'default'
},
{
label: '重置',
key: 'reset',
type: 'default'
},
{
label: '搜索',
key: 'search',
type: 'success'
}
]
})
if (!popupRes) {
return
}
if (popupRes.key === 'search') {
searchText.value = popupRes.text
} else if (popupRes.key === 'reset') {
handleSearchReset()
}
}
const handleSearchReset = () => {
searchText.value = ''
}
onMounted(async () => {
await setCurrentDirectory(currentDirectory.value)
})
</script>
<style scoped lang="scss">
$top-height: 30px;
$bottom-bar-height: 60px;
.miao-directory-item-container {
position: relative;
height: 100%;
width: inherit;
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 170px;
}
</style>
src/plugins/miaoIframe/export.ts
+25
View File
@@ -0,0 +1,25 @@
import { registerComponentOption } from '@/class/PluginCenter'
import LogoChrome from '@vicons/ionicons5/es/LogoChrome'
const pluginConfig: registerComponentOption = {
key: 'miaoIframe',
name: '框架',
icon: LogoChrome,
getComponent: async () =>
(await import('@/plugins/miaoIframe/miaoIframe.vue')).default,
filter: (vDirs, vFiles) => {
if (vDirs.length !== 0) {
return false
}
if (vFiles.length !== 1) {
return false
}
return vFiles[0].name.endsWith('html')
}
}
export default pluginConfig
import { PluginExportType } from '@/types/type'
export const type = PluginExportType.component
src/plugins/miaoIframe/miaoIframe.vue
+52
View File
@@ -0,0 +1,52 @@
<template>
<div class="miao-markdown-container-miaomiaomiao">
<iframe
ref="iframeRef"
:src="iframeSrc"
frameborder="0"
class="iframe-container-iframe"></iframe>
</div>
</template>
<script setup lang="ts">
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import { cloneDeep } from 'lodash';
import { inject, onMounted, ref } from 'vue'
import buildFromTree from '../../hooks/buildFromTree';
const root = inject('rootDirectory') as VirtualDirectory
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
required: true
})
const iframeSrc = ref<string>()
const iframeRef = ref<HTMLIFrameElement>();
const sendRootTree = () => {
iframeRef.value?.contentWindow && iframeRef.value.contentWindow.postMessage(cloneDeep(root.tree), "*");
}
const handleIframeMessage = (e: MessageEvent<any>) => {
e
// const data = e.data;
sendRootTree()
}
onMounted(() => {
iframeSrc.value = currentFiles.value[0].url
if (typeof window.addEventListener != "undefined") {
window.addEventListener("message", handleIframeMessage, false);
}
console.log(buildFromTree(cloneDeep(root.tree)))
})
</script>
<style scoped lang="scss">
.miao-markdown-container-miaomiaomiao {
width: 100%;
height: 100%;
.iframe-container-iframe {
width: inherit;
height: inherit;
}
}
</style>
src/plugins/miaoImages/export.ts
+49
View File
@@ -0,0 +1,49 @@
import { registerComponentOption } from '@/class/PluginCenter'
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import { Image } from '@vicons/ionicons5'
const pluginConfig: registerComponentOption = {
key: 'miaoImages',
name: '图片浏览',
icon: Image,
getComponent: async () =>
(await import('@/plugins/miaoImages/miaoImages.vue')).default,
filter: (vDirs: VirtualDirectory[], vFiles: VirtualFile[]) => {
if (vDirs.length === 0 && vFiles.length === 0) {
return false
}
if (vDirs.length) {
return true
}
for (let vf of vFiles)
for (let end of [
'xbm',
'tif',
'pjp',
'svgz',
'jpg',
'jpeg',
'ico',
'tiff',
'gif',
'svg',
'jfif',
'webp',
'png',
'.bmp',
'pjpeg',
'avif'
]) {
if (vf.name.endsWith(end)) {
return true
}
}
return false
}
}
export default pluginConfig
import { PluginExportType } from '@/types/type'
export const type = PluginExportType.component
src/plugins/miaoImages/miaoImages.vue
+368
View File
@@ -0,0 +1,368 @@
<template>
<miao-drop-handler
@on-virtual-directory="handleDrop"
@on-virtual-files="handleDrop">
<miao-message-provider ref="miaoMessageRef">
<div class="miaoImage" ref="rootRef">
<n-scrollbar ref="NScrollbarRef" style="max-height: 100%;">
<div
class="miaoImage-container"
v-for="imageGroup in imageGroupList">
<div class="miaoImage-container-day">
<!-- <div class="miaoImage-container-divide miaoImage-container-divide-before">
<div class="miaoImage-container-divide-line"></div>
</div> -->
<span class="miaoImage-container-day-text">
{{ imageGroup.day }}
</span>
<!-- <div class="miaoImage-container-divide">
<div class="miaoImage-container-divide-line"></div>
</div> -->
</div>
<div
class="miaoImage-container-row"
v-for="vFile in imageGroup.items"
:key="vFile.id">
<img
:src="vFile.url"
class="miaoImage-container-row-image"
loading="lazy"
:class="
activeImage === vFile
? 'miaoImage-container-row-image-active'
: ''
"
@click="activeImage = vFile" />
</div>
</div>
</n-scrollbar>
<miao-mask
:show="activeImage !== undefined"
@click="activeImage = undefined"
class="miaoImage-mask"
@wheel="handleWheel">
<ChevronBack
class="miaoImage-mask-btn miaoImage-mask-btn-back"
@click="handleActiveImageBack" />
<img
:src="activeImage?.url"
class="miaoImage-mask-active"
@click="(e) => e.stopPropagation()"
draggable="false"
:style="{transform: `scale(${imgViewScale})`}" />
<ChevronForward
class="miaoImage-mask-btn miaoImage-mask-btn-forward"
@click="handleActiveImageForward" />
</miao-mask>
</div>
</miao-message-provider>
</miao-drop-handler>
</template>
<script setup lang="ts">
import miaoMask from '@/components/miaoMask.vue'
import miaoDropHandler from '@/components/miaoDropHandler.vue'
import miaoMessageProvider from '@/components/miaoAlertTipProvider.vue'
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import { uniq } from 'lodash'
import { computed, nextTick, onMounted, ref, watch } from 'vue'
import { NScrollbar } from 'naive-ui'
import { ChevronBack, ChevronForward } from '@vicons/ionicons5'
const imageSuffixList = [
'xbm',
'tif',
'pjp',
'svgz',
'jpg',
'jpeg',
'ico',
'tiff',
'gif',
'svg',
'jfif',
'webp',
'png',
'bmp',
'pjpeg',
'avif'
]
const currentDirectories = defineModel<VirtualDirectory[]>(
'currentDirectories',
{
required: true
}
)
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
required: true
})
const NScrollbarRef = ref()
const rootRef = ref<any>()
const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
const imgViewScale = ref(1)
const imageFileList = ref<VirtualFile[]>([])
const activeImage = ref<VirtualFile>()
const imageGroupList = computed(() => {
return groupByDay(imageFileList.value)
})
watch(activeImage, () => {
nextTick(scrollToActiveImage)
imgViewScale.value = 1
})
const groupByDay = (array: VirtualFile[]) => {
const result = []
let currentDay = null
let currentGroup: VirtualFile[] = []
for (const item of array) {
const date = new Date(item.stats.mtimeMs)
const day = `${date.getFullYear()}年 ${String(
date.getMonth() + 1
).padStart(2, '0')}月 ${String(date.getDate()).padStart(2, '0')}日`
if (day !== currentDay) {
if (currentGroup.length > 0) {
result.push({
day: currentDay,
items: currentGroup
})
}
currentDay = day
currentGroup = [item]
} else {
currentGroup.push(item)
}
}
if (currentGroup.length > 0) {
result.push({
day: currentDay,
items: currentGroup
})
}
return result
}
const scrollToActiveImage = () => {
const dom = rootRef.value?.querySelector(
'.miaoImage-container-row-image-active'
)
dom && NScrollbarRef.value.scrollTo({
top: dom.offsetTop - 30,
behavior: 'smooth'
})
}
const handleActiveImageBack = (e: any) => {
e.stopPropagation()
if (!activeImage.value) {
return
}
const index = imageFileList.value.indexOf(activeImage.value)
activeImage.value =
imageFileList.value[
(index - 1 + imageFileList.value.length) %
imageFileList.value.length
]
}
const handleActiveImageForward = (e: any) => {
e.stopPropagation()
if (!activeImage.value) {
return
}
const index = imageFileList.value.indexOf(activeImage.value)
activeImage.value =
imageFileList.value[
(index + 1 + imageFileList.value.length) %
imageFileList.value.length
]
}
const handleDrop = async (vItems: (VirtualFile | VirtualDirectory)[]) => {
const length_before = imageFileList.value.length
if (vItems[0].type === 'directory') {
// @ts-ignore
currentDirectories.value = [...currentDirectories.value, ...vItems]
for (const i of vItems) {
// @ts-ignore
await updateImageSrcList(i)
}
} else {
// @ts-ignore
currentFiles.value = [...currentFiles, ...vItems]
// @ts-ignore
await updateImageSrcList(vItems)
}
miaoMessageRef.value?.alertTip(
length_before === imageFileList.value.length
? '未发现任何可添加图片'
: `导入${imageFileList.value.length - length_before}张图片`,
{
type:
length_before === imageFileList.value.length
? 'info'
: 'success',
timeout: 5000
}
)
}
const updateImageSrcList = async (source: VirtualFile[] | VirtualDirectory) => {
let newFileList: VirtualFile[]
if ('type' in source) {
await source.update()
newFileList = [
...(source.files?.filter((v) =>
imageSuffixList.includes(v.name.split('.').pop() ?? '')
) ?? [])
]
} else {
newFileList = [
...(source.filter((v) =>
imageSuffixList.includes(v.name.split('.').pop() ?? '')
) ?? [])
]
}
imageFileList.value = uniq([...imageFileList.value, ...newFileList]).sort(
(a, b) => -a.stats.mtimeMs + b.stats.mtimeMs
)
}
const handleWheel = (e: WheelEvent) => {
if (e.deltaY < 0) {
imgViewScale.value *= 1.42857
} else {
imgViewScale.value /= 1.42857
}
}
onMounted(async () => {
const length_before = imageFileList.value.length
for (const i of [currentFiles.value, ...currentDirectories.value]) {
await updateImageSrcList(i)
}
miaoMessageRef.value?.alertTip(
length_before === imageFileList.value.length
? '未发现任何新增图片'
: `导入${imageFileList.value.length - length_before}张图片`,
{
type:
length_before === imageFileList.value.length
? 'info'
: 'success',
timeout: 5000
}
)
})
</script>
<style scoped lang="scss">
.miaoImage {
width: 100%;
height: 100%;
position: relative;
display: flex;
flex-wrap: wrap;
gap: 10px;
.miaoImage-container {
width: 100%;
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
margin-top: 20px;
.miaoImage-container-day {
width: 100%;
display: flex;
align-items: center;
position: relative;
margin: 0 20px;
.miaoImage-container-divide {
flex: 1;
height: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.miaoImage-container-divide-line {
height: 3px;
width: 100%;
border-radius: 5px;
background-color: rgb(244 244 244);
}
.miaoImage-container-divide-before {
flex: 0.1;
}
.miaoImage-container-day-text {
margin: 0 0 0 10px;
font-size: 15px;
user-select: none;
}
}
.miaoImage-container-row {
display: flex;
justify-content: center;
align-items: center;
width: 25%;
aspect-ratio: 1;
.miaoImage-container-row-image {
width: 80%;
aspect-ratio: 1;
object-fit: cover;
transition: width 0.25s;
box-shadow: 0 0 10px -5px;
cursor: pointer;
user-select: none;
&:hover {
width: 90%;
}
&-active {
width: 90%;
}
}
}
}
.miaoImage-mask {
background-color: rgba(0, 0, 0, 0.444);
overflow: hidden;
}
.miaoImage-mask-active {
max-width: 80%;
max-height: 80%;
user-select: none;
}
.miaoImage-mask-btn {
color: #ffffff99;
width: 7%;
position: absolute;
cursor: pointer;
&-back {
left: 1%;
}
&-forward {
right: 1%;
}
}
}
</style>
src/plugins/miaoMarkdown/export.ts
+25
View File
@@ -0,0 +1,25 @@
import { registerComponentOption } from '@/class/PluginCenter'
import DocumentText from '@vicons/ionicons5/es/DocumentText'
const pluginConfig: registerComponentOption = {
key: 'miaoMarkdown',
name: 'markdown浏览',
icon: DocumentText,
getComponent: async () =>
(await import('@/plugins/miaoMarkdown/miaoMarkdown.vue')).default,
filter: (vDirs, vFiles) => {
if (vDirs.length !== 0) {
return false
}
if (vFiles.length !== 1) {
return false
}
return vFiles[0].name.endsWith('md')
}
}
export default pluginConfig
import { PluginExportType } from '@/types/type'
export const type = PluginExportType.component
src/plugins/miaoMarkdown/miaoMarkdown.vue
+67
View File
@@ -0,0 +1,67 @@
<template>
<n-scrollbar>
<div class="miao-markdown-container-miaomiaomiao" v-html="renderedMarkdown"></div>
<div style="height: 50px; width: 100%;"></div>
</n-scrollbar>
</template>
<script setup lang="ts">
import { NScrollbar } from 'naive-ui';
import { VirtualFile } from '@/class/VirtualDirectory'
import { onMounted, ref } from 'vue'
import MarkdownIt from 'markdown-it'
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi';
const decoder = new TextDecoder('utf-8');
const miaoFetchApi = useMiaoFetchApi()
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
required: true
})
const markdownSrc = ref<string>()
const renderedMarkdown = ref<string>('')
const md = new MarkdownIt()
onMounted(async () => {
markdownSrc.value = currentFiles.value[0].url
const text = decoder.decode(await(miaoFetchApi.getFile(currentFiles.value[0])).response)
renderedMarkdown.value = md.render(text)
})
</script>
<style lang="scss">
.miao-markdown-container-miaomiaomiao {
width: 95%;
margin: 20px;
table,
td,
th {
border: 1px solid #ddd;
text-align: left;
}
table {
border-collapse: collapse;
margin-bottom: 20px;
}
th,
td {
padding: 15px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
th {
background-color: #04AA6D;
color: white;
}
}
</style>
src/plugins/miaoMusicPlayer/export.ts
+35
View File
@@ -0,0 +1,35 @@
import { registerComponentOption } from '@/class/PluginCenter'
import { PluginExportType } from '@/types/type'
import Disc from '@vicons/ionicons5/es/Disc'
const pluginConfig: registerComponentOption = {
key: 'miaoMusicPlayer',
name: '音乐',
icon: Disc,
getComponent: async () =>
(await import('./miaoMusicPlayerDemo.vue')).default,
filter: (vDirs, vFiles) => {
if (vDirs.length !== 0) {
return false
}
if (vFiles.length === 0) {
return false
}
for (let i of vFiles) {
for (let s of ['mp3']) {
if (i.name.endsWith(s)) {
return true
}
}
}
return vFiles[0].name.endsWith('?')
},
disable: false,
single: true,
priority: 5,
}
export default pluginConfig
export const type = PluginExportType.component
src/plugins/miaoMusicPlayer/hooks/aplayerMiao.ts
+47
View File
@@ -0,0 +1,47 @@
import { createApp, Reactive } from "vue";
import aplayerListNew from "../src/aplayerListNew.vue";
import apType from "../types/ap";
type aplayerMiaoOption = {
onDragItemStart?: () => void,
onDragItemEnd?: () => void,
}
/**
* 对aplayer进行一些自定义的风格优化
*/
const useAplayerMiao = (ap: Reactive<apType>, options?: aplayerMiaoOption) => {
const container = ap.container as HTMLDivElement;
// 隐藏旧版歌单
const old_listDom = container.querySelector(".aplayer-list") as HTMLDivElement;
old_listDom.style.display = "none";
// 新版歌单
const new_list_dom = document.createElement("div");
new_list_dom.classList.add("aplayer-list");
new_list_dom.style.maxHeight = ap.options.listMaxHeight;
ap.on("listadd", () => {
ap.list.audios.forEach(v => {
!v.id && (v.id = Math.random());
});
});
ap.on("listshow", () => {
new_list_dom.classList.remove("aplayer-list-hide");
});
ap.on("listhide", () => {
new_list_dom.classList.add("aplayer-list-hide");
});
container.appendChild(new_list_dom);
const app = createApp(aplayerListNew, { ap, ...(options ?? {}) });
app.mount(new_list_dom);
ap.on("destroy", () => {
app.unmount();
});
return app;
};
export default useAplayerMiao;
src/plugins/miaoMusicPlayer/miaoMusicPlayerDemo.vue
+117
View File
@@ -0,0 +1,117 @@
<template>
<miao-drop-handler @on-virtual-files="handleDropVFiles">
<miao-alertTip-provider ref="miaoMessageRef">
<div class="miaoMusic-container">
<NScrollbar>
<div class="miaoMusic-main">
</div>
</NScrollbar>
<div ref="aplayer" />
</div>
</miao-alertTip-provider>
</miao-drop-handler>
</template>
<script setup lang="ts">
import miaoDropHandler from '@/components/miaoDropHandler.vue'
import miaoAlertTipProvider from '@/components/miaoAlertTipProvider.vue'
import useAplayerMiao from './hooks/aplayerMiao';
import { VirtualFile } from '@/class/VirtualDirectory';
import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
import { NScrollbar } from 'naive-ui';
import "./src/APlayer.fix.css"
// @ts-ignore
import APlayer from 'APlayer';
import config from '@/config';
import { difference, uniq } from 'lodash';
import apType from './types/ap';
const miaoMessageRef = ref<InstanceType<typeof miaoAlertTipProvider>>()
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
required: true
});
watch(() => currentFiles.value, (value, oldValue) => {
const diff = difference(value, oldValue)
if (diff.length > 0) {
const _s = `等${diff.length}个资源`
miaoMessageRef.value?.alertTip(`已添加 ${diff[0].name}${diff.length !== 1 ? _s : ''}`, {
type: 'success',
timeout: 3000
})
ap.list.add(getMusicList(diff))
}
})
const getMusicList = (mp3VFiles: VirtualFile[]) => mp3VFiles.map((v, index) => ({
url: `${config.baseUrl}${v.url}`,
name: v.name,
artist: ' ',
index
}));
const handleDropVFiles = (files: VirtualFile[]) => {
currentFiles.value = uniq([...currentFiles.value, ...files]);
};
const aplayer = ref<any>(null);
const disableDropReceiver = ref(false)
let ap: apType
let vueApp: any
onMounted(() => {
currentFiles.value = [...currentFiles.value.reverse()]
const aplayerOption = {
container: aplayer.value,
audio: getMusicList(currentFiles.value),
autoplay: true,
volume: 1,
theme: "#60e8a2"
}
ap = reactive<apType>(new APlayer(aplayerOption))
vueApp = useAplayerMiao(ap, {
onDragItemStart: () => {
disableDropReceiver.value = true
},
onDragItemEnd: () => {
disableDropReceiver.value = false
},
})
ap.on('listremove', (...args: any) => {
const { index } = args[0] as { index: number }
const _name = ap.list.audios[index].name
currentFiles.value = currentFiles.value.filter(v => v.name !== _name)
})
// console.log({ ap, vueApp })
});
onUnmounted(() => {
ap.destroy()
})
</script>
<style scoped lang="scss">
.miaoMusic-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.miaoMusic-main {
padding-bottom: 88px;
}
}
</style>
<style lang="scss">
.aplayer {
display: flex;
flex-direction: column-reverse;
position: fixed;
bottom: 10px;
width: -webkit-fill-available;
}
</style>
src/plugins/miaoMusicPlayer/src/APlayer.fix.css
+729
View File
@@ -0,0 +1,729 @@
.aplayer {
background: #fff;
font-family: Arial, Helvetica, sans-serif;
margin: 5px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .07), 0 1px 5px 0 rgba(0, 0, 0, .1);
border-radius: 2px;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
line-height: normal;
position: relative
}
.aplayer * {
box-sizing: content-box
}
.aplayer svg {
width: 100%;
height: 100%
}
.aplayer svg circle,
.aplayer svg path {
fill: #fff
}
.aplayer.aplayer-withlist .aplayer-info {
border-bottom: 1px solid #e9e9e9
}
.aplayer.aplayer-withlist .aplayer-list {
display: block
}
.aplayer.aplayer-withlist .aplayer-icon-order,
.aplayer.aplayer-withlist .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu {
display: inline
}
.aplayer.aplayer-withlrc .aplayer-pic {
height: 90px;
width: 90px
}
.aplayer.aplayer-withlrc .aplayer-info {
margin-left: 90px;
height: 90px;
padding: 10px 7px 0
}
.aplayer.aplayer-withlrc .aplayer-lrc {
display: block
}
.aplayer.aplayer-narrow {
width: 66px
}
.aplayer.aplayer-narrow .aplayer-info,
.aplayer.aplayer-narrow .aplayer-list {
display: none
}
.aplayer.aplayer-narrow .aplayer-body,
.aplayer.aplayer-narrow .aplayer-pic {
height: 66px;
width: 66px
}
.aplayer.aplayer-fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin: 0;
z-index: 99;
overflow: visible;
max-width: 400px;
box-shadow: none
}
.aplayer.aplayer-fixed .aplayer-list {
margin-bottom: 65px;
border: 1px solid #eee;
border-bottom: none
}
.aplayer.aplayer-fixed .aplayer-body {
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin: 0;
z-index: 99;
background: #fff;
padding-right: 18px;
transition: all .3s ease;
max-width: 400px
}
.aplayer.aplayer-fixed .aplayer-lrc {
display: block;
position: fixed;
bottom: 10px;
left: 0;
right: 0;
margin: 0;
z-index: 98;
pointer-events: none;
text-shadow: -1px -1px 0 #fff
}
.aplayer.aplayer-fixed .aplayer-lrc:after,
.aplayer.aplayer-fixed .aplayer-lrc:before {
display: none
}
.aplayer.aplayer-fixed .aplayer-info {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
transition: all .3s ease;
border-bottom: none;
border-top: 1px solid #e9e9e9
}
.aplayer.aplayer-fixed .aplayer-info .aplayer-music {
width: calc(100% - 105px)
}
.aplayer.aplayer-fixed .aplayer-miniswitcher {
display: block
}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-info {
display: block;
-webkit-transform: scaleX(0);
transform: scaleX(0)
}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
width: 66px !important
}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-miniswitcher .aplayer-icon {
-webkit-transform: rotateY(0);
transform: rotateY(0)
}
.aplayer.aplayer-fixed .aplayer-icon-back,
.aplayer.aplayer-fixed .aplayer-icon-forward,
.aplayer.aplayer-fixed .aplayer-icon-lrc,
.aplayer.aplayer-fixed .aplayer-icon-play {
display: inline-block
}
.aplayer.aplayer-fixed .aplayer-icon-back,
.aplayer.aplayer-fixed .aplayer-icon-forward,
.aplayer.aplayer-fixed .aplayer-icon-menu,
.aplayer.aplayer-fixed .aplayer-icon-play {
position: absolute;
bottom: 27px;
width: 20px;
height: 20px
}
.aplayer.aplayer-fixed .aplayer-icon-back {
right: 75px
}
.aplayer.aplayer-fixed .aplayer-icon-play {
right: 50px
}
.aplayer.aplayer-fixed .aplayer-icon-forward {
right: 25px
}
.aplayer.aplayer-fixed .aplayer-icon-menu {
right: 0
}
.aplayer.aplayer-arrow .aplayer-icon-loop,
.aplayer.aplayer-arrow .aplayer-icon-order,
.aplayer.aplayer-mobile .aplayer-icon-volume-down {
display: none
}
.aplayer.aplayer-loading .aplayer-info .aplayer-controller .aplayer-loading-icon {
display: block
}
.aplayer.aplayer-loading .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
-webkit-transform: scale(1);
transform: scale(1)
}
.aplayer .aplayer-body {
position: relative
}
.aplayer .aplayer-icon {
width: 15px;
height: 15px;
border: none;
background-color: transparent;
outline: none;
cursor: pointer;
opacity: .8;
vertical-align: middle;
padding: 0;
font-size: 12px;
margin: 0;
display: inline-block
}
.aplayer .aplayer-icon path {
transition: all .2s ease-in-out
}
.aplayer .aplayer-icon-back,
.aplayer .aplayer-icon-forward,
.aplayer .aplayer-icon-lrc,
.aplayer .aplayer-icon-order,
.aplayer .aplayer-icon-play {
display: none
}
.aplayer .aplayer-icon-lrc-inactivity svg {
opacity: .4
}
.aplayer .aplayer-icon-forward {
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
.aplayer .aplayer-lrc-content {
display: none
}
.aplayer .aplayer-pic {
position: relative;
float: left;
height: 66px;
width: 66px;
background-size: cover;
background-position: 50%;
transition: all .3s ease;
cursor: pointer
}
.aplayer .aplayer-pic:hover .aplayer-button {
opacity: 1
}
.aplayer .aplayer-pic .aplayer-button {
position: absolute;
border-radius: 50%;
opacity: .8;
text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
background: rgba(0, 0, 0, .2);
transition: all .1s ease
}
.aplayer .aplayer-pic .aplayer-button path {
fill: #fff
}
.aplayer .aplayer-pic .aplayer-hide {
display: none
}
.aplayer .aplayer-pic .aplayer-play {
width: 26px;
height: 26px;
border: 2px solid #fff;
bottom: 50%;
right: 50%;
margin: 0 -15px -15px 0
}
.aplayer .aplayer-pic .aplayer-play svg {
position: absolute;
top: 3px;
left: 4px;
height: 20px;
width: 20px
}
.aplayer .aplayer-pic .aplayer-pause {
width: 16px;
height: 16px;
border: 2px solid #fff;
bottom: 4px;
right: 4px
}
.aplayer .aplayer-pic .aplayer-pause svg {
position: absolute;
top: 2px;
left: 2px;
height: 12px;
width: 12px
}
.aplayer .aplayer-info {
margin-left: 66px;
padding: 14px 7px 0 10px;
height: 66px;
box-sizing: border-box
}
.aplayer .aplayer-info .aplayer-music {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0 0 13px 5px;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
cursor: default;
padding-bottom: 2px;
height: 20px
}
.aplayer .aplayer-info .aplayer-music .aplayer-title {
font-size: 14px
}
.aplayer .aplayer-info .aplayer-music .aplayer-author {
font-size: 12px;
color: #666
}
.aplayer .aplayer-info .aplayer-controller {
position: relative;
display: flex
}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
margin: 0 0 0 5px;
padding: 4px 0;
cursor: pointer !important;
flex: 1
}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap:hover .aplayer-bar .aplayer-played .aplayer-thumb {
-webkit-transform: scale(1);
transform: scale(1)
}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
position: relative;
height: 2px;
width: 100%;
background: #cdcdcd
}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: #aaa;
height: 2px;
transition: all .5s ease
}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
position: absolute;
left: 0;
top: 0;
bottom: 0;
height: 2px
}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
position: absolute;
top: 0;
right: 5px;
margin-top: -4px;
margin-right: -10px;
height: 10px;
width: 10px;
border-radius: 50%;
cursor: pointer;
transition: all .3s ease-in-out;
-webkit-transform: scale(0);
transform: scale(0)
}
.aplayer .aplayer-info .aplayer-controller .aplayer-time {
position: relative;
right: 0;
bottom: 4px;
height: 17px;
color: #999;
font-size: 11px;
padding-left: 7px
}
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner {
vertical-align: middle
}
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon {
cursor: pointer;
transition: all .2s ease
}
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {
fill: #666
}
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-loop {
margin-right: 2px
}
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover path {
fill: #000
}
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu,
.aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-menu,
.aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-mode {
display: none
}
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap {
position: relative;
display: inline-block;
margin-left: 3px;
cursor: pointer !important
}
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap {
height: 40px
}
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap {
position: absolute;
bottom: 15px;
right: -3px;
width: 25px;
height: 0;
z-index: 99;
overflow: hidden;
transition: all .2s ease-in-out
}
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap.aplayer-volume-bar-wrap-active {
height: 40px
}
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar {
position: absolute;
bottom: 0;
right: 10px;
width: 5px;
height: 35px;
background: #aaa;
border-radius: 2.5px;
overflow: hidden
}
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume {
position: absolute;
bottom: 0;
right: 0;
width: 5px;
transition: all .1s ease
}
.aplayer .aplayer-info .aplayer-controller .aplayer-loading-icon {
display: none
}
.aplayer .aplayer-info .aplayer-controller .aplayer-loading-icon svg {
position: absolute;
-webkit-animation: rotate 1s linear infinite;
animation: rotate 1s linear infinite
}
.aplayer .aplayer-lrc {
display: none;
position: relative;
height: 30px;
text-align: center;
overflow: hidden;
margin: -10px 0 7px
}
.aplayer .aplayer-lrc:before {
top: 0;
height: 10%;
background: linear-gradient(180deg, #fff 0, hsla(0, 0%, 100%, 0));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#00ffffff", GradientType=0)
}
.aplayer .aplayer-lrc:after,
.aplayer .aplayer-lrc:before {
position: absolute;
z-index: 1;
display: block;
overflow: hidden;
width: 100%;
content: " "
}
.aplayer .aplayer-lrc:after {
bottom: 0;
height: 33%;
background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .8));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffffff", endColorstr="#ccffffff", GradientType=0)
}
.aplayer .aplayer-lrc p {
font-size: 12px;
color: #666;
line-height: 16px !important;
height: 16px !important;
padding: 0 !important;
margin: 0 !important;
transition: all .5s ease-out;
opacity: .4;
overflow: hidden
}
.aplayer .aplayer-lrc p.aplayer-lrc-current {
opacity: 1;
overflow: visible;
height: auto !important;
min-height: 16px
}
.aplayer .aplayer-lrc.aplayer-lrc-hide {
display: none
}
.aplayer .aplayer-lrc .aplayer-lrc-contents {
width: 100%;
transition: all .5s ease-out;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
cursor: default
}
.aplayer .aplayer-list {
overflow: auto;
transition: all .5s ease;
will-change: height;
display: none;
overflow: hidden
}
.aplayer .aplayer-list.aplayer-list-hide {
max-height: 0 !important
}
.aplayer .aplayer-list ol {
list-style-type: none;
margin: 0;
padding: 0;
overflow-y: auto
}
.aplayer .aplayer-list ol::-webkit-scrollbar {
width: 5px
}
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: #eee
}
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover {
background-color: #ccc
}
.aplayer .aplayer-list ol li {
position: relative;
height: 32px;
line-height: 32px;
padding: 0 15px;
font-size: 12px;
border-top: 1px solid #e9e9e9;
cursor: pointer;
/* transition: all .2s ease; */
transition: background .2s ease;
overflow: hidden;
margin: 0
}
.aplayer .aplayer-list ol li:first-child {
border-top: none
}
.aplayer .aplayer-list ol li:hover {
background: #efefef
}
.aplayer .aplayer-list ol li.aplayer-list-light {
background: #e9e9e9
}
.aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-cur {
display: inline-block
}
.aplayer .aplayer-list ol li .aplayer-list-cur {
display: none;
width: 3px;
height: 22px;
position: absolute;
left: 0;
top: 5px;
cursor: pointer
}
.aplayer .aplayer-list ol li .aplayer-list-index {
color: #666;
margin-right: 12px;
cursor: pointer
}
.aplayer .aplayer-list ol li .aplayer-list-author {
color: #666;
float: right;
cursor: pointer
}
.aplayer .aplayer-notice {
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 12px;
border-radius: 4px;
padding: 5px 10px;
transition: all .3s ease-in-out;
overflow: hidden;
color: #fff;
pointer-events: none;
background-color: #f4f4f5;
color: #909399
}
.aplayer .aplayer-miniswitcher {
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
height: 100%;
background: #e6e6e6;
width: 18px;
border-radius: 0 2px 2px 0
}
.aplayer .aplayer-miniswitcher .aplayer-icon {
height: 100%;
width: 100%;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
transition: all .3s ease
}
.aplayer .aplayer-miniswitcher .aplayer-icon path {
fill: #666
}
.aplayer .aplayer-miniswitcher .aplayer-icon:hover path {
fill: #000
}
@-webkit-keyframes aplayer-roll {
0% {
left: 0
}
to {
left: -100%
}
}
@keyframes aplayer-roll {
0% {
left: 0
}
to {
left: -100%
}
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
}
}
@keyframes rotate {
0% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
}
}
src/plugins/miaoMusicPlayer/src/aplayerListNew.vue
+244
View File
@@ -0,0 +1,244 @@
<template>
<ol :style="{ maxHeight: ap.options.listMaxHeight }" :key="refreshKey" ref="ol">
<VueDraggable v-model="ap.list.audios" @start="onDragStart" @end="onDragEnd" item-key="id"
handle=".aplayer-list-control-btn-reorder" ghostClass="iSDragging" :animation="150">
<miaoLazyDiv v-for="(element, index) in ap.list.audios" :min-height="'32px'" auto-height>
<li :class="activeAudioIndex == index ? 'aplayer-list-light' : ''" class="aplayer-list-new"
:key="element.id">
<span class="aplayer-list-cur" :style="{ backgroundColor: apTheme }"></span>
<span class="aplayer-list-index">{{ index + 1 }}</span>
<span class="aplayer-list-title">{{ element.name }}</span>
<div class="aplayer-list-control">
<div class="aplayer-list-control-btn aplayer-list-control-btn-hover aplayer-list-control-btn-play"
@click.stop="switchAudio(index)">
<PlayOutline class="aplayer-list-control-btn-svg" />
</div>
<div class="aplayer-list-control-btn aplayer-list-control-btn-hover"
@click.stop="switchAudio(index)" v-if="false">
<HeartOutline class="aplayer-list-control-btn-svg" />
</div>
<div class="aplayer-list-control-btn" @click.stop="listAudioUp(index)" v-if="false">
<ChevronUpOutline class="aplayer-list-control-btn-svg" />
</div>
<div class="aplayer-list-control-btn" @click.stop="listAudioDown(index)" v-if="false">
<ChevronDownOutline class="aplayer-list-control-btn-svg" />
</div>
<div class="aplayer-list-control-btn aplayer-list-control-btn-hover"
@click.stop="listAudioRemove(index)">
<CloseOutline class="aplayer-list-control-btn-svg" />
</div>
<div class="aplayer-list-control-btn aplayer-list-control-btn-reorder">
<ReorderFourOutline class="aplayer-list-control-btn-svg" />
</div>
</div>
<span class="aplayer-list-author" v-show="element.artist !== 'Audio artist1'">{{ element.artist
}}</span>
</li>
</miaoLazyDiv>
</VueDraggable>
</ol>
</template>
<script setup lang="ts">
import { computed, nextTick, onMounted, ref } from 'vue';
import { ChevronUpOutline, ChevronDownOutline, CloseOutline, ReorderFourOutline, PlayOutline, HeartOutline } from '@vicons/ionicons5';
import { VueDraggable } from 'vue-draggable-plus'
import miaoLazyDiv from '@/components/miaoLazyDiv.vue';
import apType, { audioType } from '../types/ap';
const props = defineProps<{
ap: apType
onDragItemStart: () => void,
onDragItemEnd: () => void
}>()
const ol = ref<HTMLOListElement>()
const refreshKey = ref(Math.random())
const isDragging = ref(false)
const apTheme = computed(() => props.ap.list.audios[activeAudioIndex.value].theme ?? props.ap.options.theme)
const activeAudioIndex = computed(() => props.ap.list.index)
props.ap.on('listswitch', (...args: any) => {
// 手动触发更新，不然监听不到
props.ap.list.index = args[0].index as number;
})
const refresh = () => {
const top = ol.value?.scrollTop
refreshKey.value = Math.random()
nextTick(() => {
ol.value?.scrollTo({
top,
})
})
}
props.ap.on('listremove', refresh)
props.ap.on('listadd', refresh)
const switchAudio = (index: number) => {
if (index === activeAudioIndex.value) {
return
}
props.ap.list.switch(index)
}
const listRefreshIndex = (curr: audioType) => {
for (let index in props.ap.list.audios) {
if (props.ap.list.audios[index] === curr) {
props.ap.list.index = parseInt(index)
return
}
}
}
const listAudioUp = (index: number) => {
const arr = props.ap.list.audios;
const len = arr.length
const curr = props.ap.list.audios[props.ap.list.index]
if (index === 0) {
const _item = arr.shift();
_item && arr.push(_item);
} else {
const pre: number = (len - 1 + index) % len;
const _pre = arr[index];
arr[index] = arr[pre];
arr[pre] = _pre;
}
listRefreshIndex(curr)
};
const listAudioDown = (index: number) => {
const arr = props.ap.list.audios;
const len = arr.length
const curr = props.ap.list.audios[props.ap.list.index]
if (index === len - 1) {
const _item = arr.pop();
_item && arr.unshift(_item);
} else {
const pre: number = (len + 1 + index) % len;
const _pre = arr[index];
arr[index] = arr[pre];
arr[pre] = _pre;
}
listRefreshIndex(curr)
}
const listAudioRemove = (index: number) => {
props.ap.list.remove(index)
}
const { onDragStart, onDragEnd } = (() => {
let curr: audioType
return {
onDragStart: () => {
isDragging.value = true
curr = props.ap.list.audios[props.ap.list.index]
},
onDragEnd: () => {
listRefreshIndex(curr)
nextTick(() => {
isDragging.value = false
})
}
}
})()
// const onDragEnd = (_e: any) => {
// const curr = props.ap.list.audios[props.ap.list.index]
// listRefreshIndex(curr)
// }
onMounted(() => {
// console.log(props.ap)
})
</script>
<style lang="scss" scoped>
.aplayer-list-new {
height: fit-content !important;
cursor: default !important;
.aplayer-list-cur {
height: calc(100% - 8px) !important;
}
.aplayer-list-index {
display: inline-block;
width: 20px;
margin-right: 4px !important;
cursor: default !important;
}
}
.aplayer-list-control {
float: right;
height: 32px;
display: flex;
align-items: center;
&-btn {
width: 25px;
height: 25px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
&-svg {
width: 20px;
aspect-ratio: 1;
transition: all .1s ease;
}
}
&-btn-hover {
.aplayer-list-control-btn-svg {
&:hover {
width: 24px;
}
}
}
}
</style>
<style lang="scss">
.aplayer svg circle,
.aplayer .aplayer-list-new svg path {
fill: #ffffff00;
}
.iSDragging {
opacity: 0.5;
// background: #60e8a2 !important;
}
.aplayer-list-light {
background: unset !important;
.aplayer-list-title {
color: #60e8a2;
}
}
.aplayer .aplayer-list ol li:hover {
background: #efefef !important;
}
.miaoMusicDrag-move,
.miaoMusicDrag-enter-active,
.miaoMusicDrag-leave-active {
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
.miaoMusicDrag-enter-from,
.miaoMusicDrag-leave-to {
opacity: 0;
transform: scaleY(0.01) translate(30px, 0);
}
.miaoMusicDrag-leave-active {
position: absolute;
}
</style>
src/plugins/miaoMusicPlayer/types/ap.ts
+40
View File
@@ -0,0 +1,40 @@
export type audioType = {
url: string
artist?: string
cover?: string
name: string
theme?: string
id?: number
index: number
}
type apType = {
list: {
audios: audioType[]
index: number
switch: (index: number) => void
remove: (index: number) => void
add: (audios: audioType[]) => void
refreshAudioIndex: () => void
}
container: HTMLDivElement
on: (event: string, callback: () => void) => void
options: {
audio: audioType[],
autoplay: boolean,
"volume": number,
"theme": string,
"mini": boolean,
"fixed": boolean,
"mutex": boolean,
"lrcType": number,
"preload": "auto",
"loop": "all",
"order": "list",
"listMaxHeight": string,
"storageName": "aplayer-setting"
},
destroy: () => {}
}
export default apType
src/plugins/miaoPDF/export.ts
+25
View File
@@ -0,0 +1,25 @@
import { registerComponentOption } from '@/class/PluginCenter'
import DocumentText from '@vicons/ionicons5/es/DocumentText'
const pluginConfig: registerComponentOption = {
key: 'miaoPDF',
name: 'PDF浏览',
icon: DocumentText,
getComponent: async () =>
(await import('@/plugins/miaoPDF/miaoPDF.vue')).default,
filter: (vDirs, vFiles) => {
if (vDirs.length !== 0) {
return false
}
if (vFiles.length !== 1) {
return false
}
return vFiles[0].name.endsWith('pdf')
}
}
export default pluginConfig
import { PluginExportType } from '@/types/type'
export const type = PluginExportType.component
src/plugins/miaoPDF/miaoPDF.vue
+201
View File
@@ -0,0 +1,201 @@
<template>
<miao-message-provider ref="miaoMessageRef">
<div class="miao-container">
<div class="miao-container-topBar">
<div
class="miao-container-topBar-btn"
@click="() => handleZoom(10)"
title="快速缩小">
--
</div>
<div
class="miao-container-topBar-btn"
@click="() => handleZoom()"
title="缩小">
-
</div>
<div
class="miao-container-topBar-btn"
@click="() => handleResetMargin()"
title="还原">
还原缩放
</div>
<div
class="miao-container-topBar-btn"
@click="() => handleShrink()"
title="放大">
+
</div>
<div
class="miao-container-topBar-btn"
@click="() => handleShrink(10)"
title="快速放大">
++
</div>
</div>
<NScrollbar>
<div
class="miao-container-pdf"
:style="{
alignItems: pdfMargin < 0 ? 'baseline' : 'center'
}">
<div
ref="pdfEl"
class="miao-container-pdf-content"
:style="{
width: `calc( 100% - ${pdfMargin}px)`
}"></div>
</div>
</NScrollbar>
</div>
</miao-message-provider>
</template>
<script setup lang="ts">
import miaoMessageProvider from '@/components/miaoAlertTipProvider.vue'
import { onMounted, ref, shallowReactive } from 'vue'
import PdfjsWorker from 'pdfjs-dist/build/pdf.worker.mjs?worker'
import { VirtualFile } from '@/class/VirtualDirectory'
import { NScrollbar } from 'naive-ui'
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
required: true
})
const pdfEl = ref<HTMLDivElement>()
const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
// 通过margin来实现缩小功能
const pdfMargin = ref<number>(0)
const pdfPageCount = ref<number>(-1)
const canvasList = shallowReactive<HTMLCanvasElement[]>([])
const handleZoom = (index?: number) => {
const _index = index ?? 1
pdfMargin.value += 10 * _index
}
const handleShrink = (index?: number) => {
const _index = index ?? 1
// if (pdfMargin.value - 10 * _index <= 0) {
// return pdfMargin.value = 0
// }
pdfMargin.value -= 10 * _index
}
const handleResetMargin = () => {
pdfMargin.value = 0
}
onMounted(async () => {
const setLoadingMessage = miaoMessageRef.value?.alertTip('加载PDF插件中', {
type: 'info',
timeout: -1
})
const pdfSrc = currentFiles.value[0].url
// @ts-ignore
const PDFJS = await import('pdfjs-dist/build/pdf.mjs')
if (typeof window !== 'undefined' && 'Worker' in window) {
PDFJS.GlobalWorkerOptions.workerPort = new PdfjsWorker()
}
// 加载文档
let loadingTask = PDFJS.getDocument({ url: pdfSrc })
loadingTask.__PDFDocumentLoadingTask = true
const pdf = await loadingTask.promise // 使用await等待加载完毕
pdfPageCount.value = pdf.numPages
// 循环渲染每一页
for (let i = 1; i <= pdf.numPages; i++) {
setLoadingMessage && setLoadingMessage(`渲染进度：${i}/${pdf.numPages}`)
const page = await pdf.getPage(i)
let pixelRatio = 3
let viewport = page.getViewport({ scale: 1 })
// 使用canvas渲染
let canvas = window.document.createElement('canvas')
canvasList.push(canvas)
// @ts-ignore
pdfEl.value.appendChild(canvas)
canvas.width = viewport.width * pixelRatio // 计算宽度
canvas.height = viewport.height * pixelRatio
let renderContext = {
canvasContext: canvas.getContext('2d'),
viewport: viewport,
transform: [pixelRatio, 0, 0, pixelRatio, 0, 0]
}
await page.render(renderContext).promise // 一页一页的渲染
}
setLoadingMessage &&
setLoadingMessage(`渲染PDF完成`, {
type: 'success',
timeout: 3456
})
})
</script>
<style scoped lang="scss">
.miao-container {
width: 100%;
height: 100%;
background-color: rgb(201, 201, 201);
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
.miao-container-topBar {
box-sizing: border-box;
padding: 0 30px;
height: 30px;
width: 100%;
background-color: rgb(170, 176, 182);
display: flex;
justify-content: space-around;
align-items: center;
&-btn {
cursor: pointer;
user-select: none;
height: 80%;
padding: 0 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: larger;
letter-spacing: 1px;
color: black;
border-radius: 5px;
&:hover {
background-color: #eaeaea42;
}
}
}
.miao-container-pdf {
min-width: 0;
width: 100%;
display: flex;
flex-direction: column;
.miao-container-pdf-content {
display: flex;
flex-direction: column;
}
}
.miao-container-loading {
position: absolute;
top: 40px;
background-color: aliceblue;
border: 1px solid black;
height: 40px;
width: 200px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
letter-spacing: 5px;
user-select: none;
}
}
</style>
src/plugins/miaoPluginTemplate/_export.ts
+26
View File
@@ -0,0 +1,26 @@
// @ts-nocheck
import { registerComponentOption } from '@/class/PluginCenter'
const pluginConfig: registerComponentOption = {
key: 'yourPluginKey',
name: 'yourPluginName',
// icon: LogoChrome,
getComponent: async () => null,
// (await import('yourPluginPath')).default,
filter: (vDirs, vFiles) => {
if (vDirs.length !== 0) {
return false
}
if (vFiles.length !== 1) {
return false
}
return vFiles[0].name.endsWith('?')
},
disable: true
}
export default pluginConfig
import { PluginExportType } from '@/types/type'
export const type = PluginExportType.component
src/plugins/miaoPluginTemplate/template.vue
+19
View File
@@ -0,0 +1,19 @@
<template>
<div class="template-container"></div>
</template>
<script setup lang="ts">
// import { VirtualFile } from '@/class/VirtualDirectory'
// const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
// required: true
// })
</script>
<style scoped lang="scss">
.template-container {
width: 100%;
height: 100%;
}
</style>
src/plugins/miaoVideoPlayer/export.ts
+32
View File
@@ -0,0 +1,32 @@
import { registerComponentOption } from '@/class/PluginCenter'
import PlayCircle from '@vicons/ionicons5/es/PlayCircle'
const pluginConfig: registerComponentOption = {
key: 'miaoVideoPlayer',
name: '视频',
icon: PlayCircle,
getComponent: async () =>
(await import('@/plugins/miaoVideoPlayer/miaoVideoPlayer.vue')).default,
filter: (vDirs, vFiles) => {
if (vDirs.length !== 0) {
return false
}
if (vFiles.length === 0) {
return false
}
for (let i of vFiles) {
for (let s of ['mp4', 'mp3']) {
if (i.name.endsWith(s)) {
return true
}
}
}
return false
}
}
export default pluginConfig
import { PluginExportType } from '@/types/type'
export const type = PluginExportType.component
src/plugins/miaoVideoPlayer/miaoVideoPlayer.vue
+350
View File
@@ -0,0 +1,350 @@
<template>
<miao-drop-handler @on-virtual-files="handleDropVFiles">
<div class="player-container">
<div ref="xgPlayer" id="xgplayer"></div>
</div>
</miao-drop-handler>
</template>
<script lang="ts" setup>
import { VirtualFile } from '@/class/VirtualDirectory'
import miaoDropHandler from '@/components/miaoDropHandler.vue'
import { onBeforeUnmount, onMounted, ref } from 'vue'
import XGPlayer from 'xgplayer'
import '@/style/xgplayer.scss'
import TextTrack from 'xgplayer/es/plugins/track'
import 'xgplayer/es/plugins/track/index.css'
import axios from 'axios'
import { uniq } from 'lodash'
import lockScreen from './playerPlugin/lockScreen/lockScreen'
import xgplayerVueApp from './src/XGPlayerVuePluginRoot.vue'
import useXGPlayerVueFrame from './playerPlugin/xgplayer-vue-frame/xgplayer-vue-frame'
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
required: true
})
const xgPlayer = ref()
let _player: XGPlayer
const { setVideo } = (() => {
const initPlayer = (videos: VirtualFile[], texttrack: {
list: {
id: number; url: string
text: string
}[]
}) => {
const videoVFile = videos.shift() as VirtualFile
_player && _player.destroy()
_player = new XGPlayer({
plugins: [
TextTrack,
lockScreen,
useXGPlayerVueFrame(xgplayerVueApp),
],
el: xgPlayer.value,
url: videoVFile.url,
width: '100%',
height: '100%',
volume: 1,
// loop: true,
// pip: true,
videoFillMode: 'contain',
autoplay: true,
download: true,
screenShot: {
saveImg: true,
quality: 1,
type: 'image/png',
format: '.png'
},
lang: 'zh-cn',
playbackRate: [0.1, 0.3, 0.5, 0.75, 1, 1.5, 2, 3, 5, 10],
playNext: {
urlList: videos.map(v => v.url)
},
texttrack,
ignores: [videos.length === 0 ? 'playNext' : undefined].filter(v => v) as string[]
})
}
return {
setVideo: async (
videoVFiles: VirtualFile[],
textTrackFiles?: VirtualFile[]
) => {
// 天哪什么精神状态会写出这种代码
textTrackFiles &&
textTrackFiles.push(...findTextTrack(currentFiles.value))
textTrackFiles = uniq(textTrackFiles)
currentFiles.value = uniq([...currentFiles.value, ...videoVFiles, ...(textTrackFiles ?? [])])
const videos = findVideo(uniq([...currentFiles.value, ...videoVFiles]))
const _list = []
if (textTrackFiles) {
for (let i of textTrackFiles) {
if (i.name.endsWith('srt')) {
const response = await axios.get(i.url)
// console.log(srtToVtt(response.data))
const url = setUrl(new Blob([srtToVtt(response.data)]))
_list.push({
id: i.id,
url,
// 这个language会覆盖id的设置，导致无法切换字幕
// language: 'zh-cn',
text: i.name
})
} else if (i.name.endsWith('ass')) {
const response = await axios.get(i.url)
// console.log(assToVtt(response.data))
const url = setUrl(new Blob([assToVtt(response.data)]))
_list.push({
id: i.id,
url,
text: i.name
})
} else if (i.name.endsWith('ssa')) {
const response = await axios.get(i.url)
// console.log(ssaToVtt(response.data))
const url = setUrl(new Blob([ssaToVtt(response.data)]))
_list.push({
id: i.id,
url,
text: i.name
})
} else {
_list.push({
id: i.id,
url: i.url,
text: i.name
})
}
}
}
const texttrack = {
list: _list
}
initPlayer([...videos], texttrack)
}
}
})()
const { setUrl, destroyUrl } = (() => {
const urlList: string[] = []
return {
setUrl(blob: Blob) {
const url = URL.createObjectURL(blob)
urlList.push(url)
return url
},
destroyUrl() {
for (const url of urlList) {
URL.revokeObjectURL(url)
}
}
}
})()
const handleDropVFiles = (files: VirtualFile[]) => {
setVideo(findVideo(files.reverse()), findTextTrack(files))
}
function srtToVtt(srt: string) {
// 将 SRT 字幕按行分割
const lines = srt.split('\n')
let vtt = 'WEBVTT\n\n' // VTT 文件的开头
let index = 0
while (index < lines.length) {
// 跳过空行
if (lines[index].trim() === '') {
index++
continue
}
// SRT 中的序号
lines[index].trim()
index++
// 时间戳
const timeLine = lines[index].trim().replace(/,/g, '.') // 将逗号替换为点
index++
// 字幕文本
let text = ''
while (index < lines.length && lines[index].trim() !== '') {
text += lines[index].trim() + '\n'
index++
}
// 添加到 VTT 字幕中
vtt += `${timeLine}\n${text.trim()}\n\n`
}
return vtt
}
function assToVtt(assContent: string) {
// 分割 ASS 内容为行
const lines = assContent.split('\n')
let vttContent = 'WEBVTT\n\n' // VTT 文件头
// 遍历每一行，寻找字幕条目
for (let line of lines) {
// 只处理 [Events] 部分后的 Dialogue 行
if (line.startsWith('Dialogue:')) {
// 提取时间戳和文本
const parts = line.split(',')
if (parts.length >= 5) {
// 将时间戳格式化为 VTT 格式
const startTime = parts[1]
.trim()
.replace('.', ',')
.replace(',', '.') // 替换 . 为 ,，然后再替换为 .
const endTime = parts[2]
.trim()
.replace('.', ',')
.replace(',', '.') // 替换 . 为 ,，然后再替换为 .
// 确保时间戳是两位数格式
const formattedStartTime = startTime.replace(
/(\d+):(\d+):(\d+)\.(\d+)/,
(match: any, h: any, m: any, s: any, ms: any) => {
match
return `${String(h).padStart(2, '0')}:${String(
m
).padStart(2, '0')}:${String(s).padStart(
2,
'0'
)}.${String(ms).padStart(3, '0')}`
}
)
const formattedEndTime = endTime.replace(
/(\d+):(\d+):(\d+)\.(\d+)/,
(match: any, h: any, m: any, s: any, ms: any) => {
match
return `${String(h).padStart(2, '0')}:${String(
m
).padStart(2, '0')}:${String(s).padStart(
2,
'0'
)}.${String(ms).padStart(3, '0')}`
}
)
const rawText = parts.slice(9).join(',').trim() // 提取文本
// 清理文本中的样式信息
const cleanText = rawText
.replace(/{[^}]*}/g, '')
.replace(/\\N/g, '\n')
.trim()
// 添加到 VTT 内容
vttContent += `${formattedStartTime} --> ${formattedEndTime}\n${cleanText}\n\n`
}
}
}
return vttContent.trim() // 返回 VTT 内容，去掉末尾空行
}
function ssaToVtt(ssaContent: string): string {
function convertSsaTimeToVtt(ssaTime: string): string {
const timeParts = ssaTime.split(':')
const hours = timeParts[0].padStart(2, '0')
const minutes = timeParts[1].padStart(2, '0')
const secondsAndMilliseconds = timeParts[2].split('.')
const seconds = secondsAndMilliseconds[0].padStart(2, '0')
const milliseconds = (secondsAndMilliseconds[1] || '0').padEnd(3, '0')
return `${hours}:${minutes}:${seconds}.${milliseconds}`
}
const lines = ssaContent.split('\n')
let vttContent = 'WEBVTT\n\n' // VTT文件头
let inEvents = false
for (const line of lines) {
// 检查是否进入[Events]部分
if (line.startsWith('[Events]')) {
inEvents = true
continue
}
// 如果在[Events]部分，处理对话行
if (inEvents && line.startsWith('Dialogue:')) {
const parts = line.split(',')
if (parts.length >= 3) {
const startTime = convertSsaTimeToVtt(parts[1].trim())
const endTime = convertSsaTimeToVtt(parts[2].trim())
const text = parts.slice(9).join(',').trim() // 获取字幕文本
// 去除样式标签
const cleanText = text.replace(/{[^}]*}/g, '').trim()
// 添加到VTT内容
vttContent += `${startTime} --> ${endTime}\n${cleanText}\n\n`
}
}
}
return vttContent
}
const findVideo = (vFiles: VirtualFile[]) =>
uniq(vFiles.filter((v) => {
for (let s of ['mp4', 'mp3']) {
if (v.name.endsWith(s)) {
return true
}
}
return false
}))
const findTextTrack = (vFiles: VirtualFile[]) =>
vFiles.filter((v) => {
for (let s of ['vtt', 'srt', 'ass', 'ssa']) {
if (v.name.endsWith(s)) {
return true
}
}
return false
})
onMounted(() => {
if (currentFiles.value.length) {
currentFiles.value.reverse()
setVideo(
findVideo(currentFiles.value),
findTextTrack(currentFiles.value)
)
}
})
onBeforeUnmount(() => {
_player.destroy()
destroyUrl()
})
</script>
<style scoped lang="scss">
.player-container {
width: 100%;
height: 100%;
position: relative;
background-color: grey;
display: flex;
flex-direction: column;
justify-content: center;
#xgplayer {
width: 100%;
// height: 500px;
background-color: black;
}
}
.video-js {
width: 100%;
background-color: rgb(0, 0, 0);
}
</style>
src/plugins/miaoVideoPlayer/playerPlugin/lockScreen/lockScreen.scss
+46
View File
@@ -0,0 +1,46 @@
.lock-div {
position: absolute;
z-index: 20;
left: 15px;
top: 50%;
transform: translateY(-50%);
width: 30px;
aspect-ratio: 1;
cursor: pointer;
color: #f2f2f2;
opacity: 1;
visibility: visible;
transition: opacity 0.5s ease, visibility 0.5s ease, width 0.25s ease, left 0.25s ease;
svg {
width: inherit;
height: inherit;
}
&:hover {
width: 36px;
left: 12px;
}
}
.xgplayer.xgplayer-inactive .lock-div {
pointer-events: none;
cursor: default;
visibility: hidden;
opacity: 0;
}
.overlay-div {
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
display: none;
cursor: auto;
}
.xgplayer.xgplayer-inactive .overlay-div {
pointer-events: none;
cursor: none;
}
src/plugins/miaoVideoPlayer/playerPlugin/lockScreen/lockScreen.ts
+107
View File
@@ -0,0 +1,107 @@
import { BasePlugin } from 'xgplayer'
import './lockScreen.scss'
export default class LockPlugin extends BasePlugin {
static get pluginName() {
return 'lockPlugin'
}
private locked: boolean
private lockDiv: HTMLDivElement | null = null
private overlayDiv: HTMLDivElement | null = null
private lockOpenSVG: string = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M336 208v-95a80 80 0 0 0-160 0v95" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path>
<rect x="96" y="208" width="320" height="272" rx="48" ry="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></rect>
</svg>`
private lockClosedSVG: string = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M336 112a80 80 0 0 0-160 0v96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path>
<rect x="96" y="208" width="320" height="272" rx="48" ry="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></rect>
</svg>`
constructor(args: any) {
super(args)
this.locked = false
}
afterCreate() {
this.createLockDiv()
this.createOverlayDiv()
this.bindEvents()
}
private createLockDiv() {
this.lockDiv = document.createElement('div')
this.lockDiv.innerHTML = this.lockClosedSVG
this.lockDiv.className = 'lock-div'
this.player.root !== null && this.player.root.appendChild(this.lockDiv)
}
private createOverlayDiv() {
this.overlayDiv = document.createElement('div')
this.overlayDiv.className = 'overlay-div'
this.player.root !== null &&
this.player.root.appendChild(this.overlayDiv)
}
private bindEvents() {
this.lockDiv!.addEventListener('click', this.toggleLock.bind(this))
this.player.root !== null &&
this.player.root.addEventListener(
'click',
this.preventClick.bind(this),
true
)
}
private toggleLock() {
if (this.lockDiv && this.overlayDiv) {
this.locked = !this.locked
this.lockDiv.innerHTML = this.locked
? this.lockOpenSVG
: this.lockClosedSVG
this.overlayDiv.style.display = this.locked ? 'block' : 'none'
this.player.controls &&
(this.locked
? this.player.controls.hide()
: this.player.controls.show())
this.player.root !== null &&
this.player.root.classList.toggle('locked', this.locked)
}
}
private preventClick(event: MouseEvent) {
if (
this.locked &&
event.target instanceof HTMLElement &&
!event.target.classList.contains('lock-div')
) {
event.stopPropagation()
event.preventDefault()
}
}
destroy() {
if (this.lockDiv) {
this.lockDiv.removeEventListener(
'click',
this.toggleLock.bind(this)
)
this.player.root !== null &&
this.player.root.removeEventListener(
'click',
this.preventClick.bind(this),
true
)
this.player.root !== null &&
this.player.root.removeChild(this.lockDiv)
}
if (this.overlayDiv) {
this.player.root !== null &&
this.player.root.removeChild(this.overlayDiv)
}
}
}
src/plugins/miaoVideoPlayer/playerPlugin/xgplayer-vue-frame/fakeRoot.vue
+36
View File
@@ -0,0 +1,36 @@
<template>
<Teleport :to="player.root">
<App v-bind="pick(toRaw(props), ['player', 'root'])"></App>
</Teleport>
</template>
<script setup lang="ts">
import { Component, toRaw } from "vue";
import Player from "xgplayer/es/player";
import { pick } from "lodash";
const props = defineProps({
player: {
type: Player,
required: true
},
root: {
type: Element,
required: true
},
App: {
type: Object as () => Component,
required: true
}
})
</script>
<style lang="scss" scoped>
.test {
width: 50px;
height: 50px;
background-color: aliceblue;
position: absolute;
right: 0;
}
</style>
src/plugins/miaoVideoPlayer/playerPlugin/xgplayer-vue-frame/xgplayer-vue-frame.ts
+35
View File
@@ -0,0 +1,35 @@
import { App, Component, createApp } from "vue";
import { BasePlugin } from "xgplayer";
import fakeApp from "./fakeRoot.vue";
const useXGPlayerVueFrame = (App: Component) => {
return class XGPlayerVueFrame extends BasePlugin {
static get pluginName() {
return "xgplayerVueFrame";
}
private root: HTMLDivElement | null = null;
private app: App<Element> | null = null;
constructor(args: any) {
super(args);
}
afterCreate() {
this.createVueFrame();
}
private createVueFrame() {
this.root = document.createElement("div");
this.app = createApp(fakeApp, { player: this.player, root: this.root, App })
this.app.mount(this.root);
// this.app.mount(this.player.root);
}
destroy() {
this.app?.unmount()
}
};
};
export default useXGPlayerVueFrame;
src/plugins/miaoVideoPlayer/src/XGPlayerVuePluginRoot.vue
+33
View File
@@ -0,0 +1,33 @@
<template>
<!-- <div class="test"></div> -->
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import Player from "xgplayer/es/player";
const props = defineProps({
player: {
type: Player,
required: true
},
root: {
type: Element,
required: true
}
})
onMounted(() => {
props
})
</script>
<style lang="scss" scoped>
.test {
width: 50px;
height: 50px;
background-color: aliceblue;
position: absolute;
right: 0;
}
</style>
src/style/xgplayer.scss
+2017
View File
File diff suppressed because it is too large. Load diff
src/types/fetch.ts
+13 -3
View File
@@ -1,17 +1,27 @@
import { AxiosRequestConfig } from "axios";
import { directory, file } from "./type"; import { directory, file } from "./type";
export type miaoFetchConfig = { export type miaoFetchConfig = {
retry?: number; retry?: number
}; axiosOption?: AxiosRequestConfig<any>
}
export type getOption = {} & miaoFetchConfig; export type getOption = {} & miaoFetchConfig;
export type getFileOption = {
/**
* 下载进度回调函数
* @param {any} percent 进度百分比，float类型, 0-1
*/
onProcess?: (percent: number) => void;
} & miaoFetchConfig;
export type getResponse = (file | directory)[]; export type getResponse = (file | directory)[];
export type uploadOption = { export type uploadOption = {
/** /**
* 上传进度回调函数 * 上传进度回调函数
* @param {any} percent 进度百分比，float类型 * @param {any} percent 进度百分比，float类型, 0-1
*/ */
onProcess?: (percent: number) => void; onProcess?: (percent: number) => void;
/** /**
src/types/type.ts
+17
View File
@@ -20,3 +20,20 @@ export type directory = {
stats: stats; stats: stats;
parent?: directory; parent?: directory;
}; };
export type alertTipType = ((content: string, options?: AlertTipMessageOptions) => (newContent: string, newOptions?: AlertTipMessageOptions) => void)
export interface AlertTipMessageOptions {
type?: 'info' | 'success' | 'error'
timeout?: number
id?: number
}
export enum PluginExportType {
default = 'default',
component = 'component'
}
export interface usePluginHooksType {
globalAlertTip: alertTipType;
}
src/views/miaoDirectory.vue
-605
View File
@@ -1,605 +0,0 @@
<template>
<miao-drop-handler @on-virtual-directory="handleDropVDirectory" @on-files="handleDropFiles"
@on-virtual-files="handleDropVirtualFiles">
<div class="miao-directory-item-container" ref="rootDomRef">
<div class="container-top" :style="{
backgroundColor:
index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
}">
<div class="container-top-colorfulBar" :style="{ backgroundColor: props.color }"></div>
<div class="container-top-breadcrumb">
<!-- <n-scrollbar x-scrollable> -->
<div class="container-top-breadcrumb-container">
<n-breadcrumb separator=">" style="margin-left: 5px">
<n-breadcrumb-item :clickable="false">
<n-icon size="18">
<CloudOutline />
</n-icon>
</n-breadcrumb-item>
<n-breadcrumb-item v-for="dir in currentDirectory?.getParents"
@click="setCurrentDirectory(dir)" :clickable="true">
<div>{{ dir.name }}</div>
</n-breadcrumb-item>
</n-breadcrumb>
</div>
<!-- </n-scrollbar> -->
</div>
<div class="container-top-tools">
<n-icon class="container-top-tools-item" size="15" @click="handleBack">
<ChevronBackOutline />
</n-icon>
<n-icon class="container-top-tools-item" size="14" @click="handleReload">
<ReloadOutline class="container-top-tools-item-reload" />
</n-icon>
<n-icon class="container-top-tools-item" size="20" @click="emit('exit')">
<CloseOutline />
</n-icon>
</div>
</div>
<div class="container-items" :style="{
backgroundColor:
index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
}">
<n-scrollbar>
<transition-group name="dirItem">
<miaoDirectoryItem v-for="dir in showData_directory" :item="dir" :key="dir.uid"
:color="props.color" :selected="selectedItem.value.includes(dir)"
@delete="handleItemDelete(dir)" @click="handleItemClick(dir)"
@drag-start="handleItemDragStart" @rename="handleItemRename(dir)"
@on-selected="handleItemSelect(dir)" />
</transition-group>
<transition-group name="dirItem">
<miaoDirectoryItem v-for="file in showData_files" :item="file" :key="file.uid"
:color="props.color" :selected="selectedItem.value.includes(file)"
@click="handleItemClick(file)" @download="handleItemDownload(file)"
@delete="handleItemDelete(file)" @drag-start="handleItemDragStart"
@rename="handleItemRename(file)" @on-selected="handleItemSelect(file)" />
</transition-group>
</n-scrollbar>
</div>
<div class="container-bottom" :style="{
backgroundColor:
index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
}">
<div class="container-bottom-item">
<div class="container-bottom-item-icon">
<add-outline :style="{
color:
index % 2 === 0
? 'rgb(0 0 0)'
: 'rgb(255 255 255)'
}" @click="handleAddNewItem" />
</div>
</div>
<div class="container-bottom-item">
<div class="container-bottom-item-icon">
<cloud-upload-outline :style="{
color:
index % 2 === 0
? 'rgb(0 0 0)'
: 'rgb(255 255 255)'
}" @click="handlePickFilesUpload" />
</div>
</div>
</div>
<miao-mask v-model:show="showModel"></miao-mask>
<miao-popup-input ref="popupInput"></miao-popup-input>
</div>
</miao-drop-handler>
</template>
<script setup lang="ts">
import { NBreadcrumbItem, NBreadcrumb, NIcon, NScrollbar } from 'naive-ui'
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import { computed, onMounted, reactive, ref } from 'vue'
import Config from '@/config'
import miaoMask from '@/components/miaoMask.vue'
import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue'
import miaoPopupInput from '@/components/miaoPopupInput.vue'
import miaoDropHandler from '@/components/miaoDropHandler.vue'
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
import useDataBus from '@/hooks/useDataBus'
import {
CloudOutline,
ChevronBackOutline,
ReloadOutline,
CloseOutline,
CloudUploadOutline,
AddOutline
} from '@vicons/ionicons5'
import useUploadQueue from '@/hooks/useUploadQueue'
import useVirtualPages from '@/hooks/useVirtualPages'
import { filePicker } from '@/hooks/miaoTools'
import { uniq } from 'lodash'
const { baseUrl, api } = Config
const dataBus = useDataBus()
const views = useVirtualPages()
const miaoFetchApi = useMiaoFetchApi()
const props = defineProps<{
color: string
id: number
}>()
const emit = defineEmits<{
exit: []
}>()
const popupInput = ref()
// 是否显示模态框
const showModel = ref(0)
class SelectedItem {
constructor() {
this._selectedItem = []
}
_selectedItem: (VirtualDirectory | VirtualFile)[]
push(item: VirtualDirectory | VirtualFile) {
this._selectedItem = [item, ...this._selectedItem]
}
remove(item: VirtualDirectory | VirtualFile) {
this._selectedItem = this._selectedItem.filter(v => v !== item)
}
clear() {
this._selectedItem = []
}
// 保证内容仍然存在于dir中且各个元素不重复
get value() {
return uniq(this._selectedItem).filter(v => {
if (currentDirectory.value === undefined) {
return false
}
// @ts-ignore
return [...currentDirectory.value?.directorys, ...currentDirectory.value?.files].includes(v)
})
}
}
// 已选择的item，用于多选功能
const selectedItem = reactive(new SelectedItem())
const currentObjects = defineModel<VirtualDirectory[]>('currentObjects', {
required: true
})
// 目前展示的Dir
const currentDirectory = computed(() => {
return currentObjects.value[0]
})
// 当前组件在views中的序号
const index = computed(() => {
for (let i in views) {
if (views[i].uid === props.id) {
return parseInt(i)
}
}
return 0
})
// 用于展示的数据，后续会增加排序等操作
const showData_directory = computed<VirtualDirectory[]>(() => {
const data = currentDirectory.value?.directorys
? [...currentDirectory.value?.directorys]
: []
return data
})
const showData_files = computed<VirtualFile[]>(() => {
const data = currentDirectory.value?.files
? [...currentDirectory.value?.files]
: []
return data
})
// 用于监听拖拽文件事件
const rootDomRef = ref<HTMLDivElement>()
const uploadQueue = useUploadQueue()
// 设置显示的dir
const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
// 若没有缓存数据则同步刷新，有缓存数据则异步刷新
if (
virtualDirectory.files === undefined ||
virtualDirectory.directorys === undefined
) {
await virtualDirectory.update()
} else {
virtualDirectory.update()
}
currentObjects.value[0] = virtualDirectory
}
const reload = () => {
setCurrentDirectory(currentDirectory.value)
}
const openUrl = (
href: string,
config?: {
download?: string
target?: string
}
) => {
let { target, download } = config ?? {}
const a = document.createElement('a')
a.setAttribute('href', href)
a.setAttribute('target', target ?? '_blank')
download && a.setAttribute('download', download)
a.click()
}
const handleBack = () => {
if (currentDirectory.value?.parent) {
setCurrentDirectory(currentDirectory.value.parent)
}
}
const handleReload = () => {
reload()
}
const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
if (selectedItem.value.length > 0) {
handleItemSelect(item)
} else {
if (item.type === 'file') {
openUrl(`${baseUrl}${api.get}${item.path}`)
} else if (item.type === 'directory') {
setCurrentDirectory(item)
}
}
}
const handleItemDownload = (item: VirtualFile) => {
openUrl(`${baseUrl}${api.get}${item.path}`, {
download: item.name
})
}
const handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
for (let item of uniq([...selectedItem.value, _item])) {
; (async () => {
const { response } = miaoFetchApi.delete(item, {
retry: 5
})
// todo: 将删除事件统一用一个事件管理中心管理
const id = (await response).eventId
const { response: res } = miaoFetchApi.query(id)
const eventResult = await res
if (eventResult.status === 'success') {
reload()
}
})()
}
}
const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
const popupRes = await popupInput.value.popup({
title: '重命名',
showInput: true,
inputValue: item.name,
inputProps: {
placeholder: item.name
},
options: [
{
label: '取消',
key: false,
type: 'error'
},
{
label: '确认',
key: true,
type: 'success'
}
]
})
if (popupRes.key === false) {
return
}
const newName = popupRes.text
const { response } = miaoFetchApi.rename(item, newName, {
retry: 5
})
const id = (await response).eventId
const { response: res } = miaoFetchApi.query(id)
const eventResult = await res
if (eventResult.status === 'success') {
reload()
}
}
const handleItemDragStart = async (
_event: DragEvent,
item: VirtualDirectory | VirtualFile
) => {
const items = uniq([item, ...selectedItem.value])
dataBus.set('dragData_vFiles', items.filter(v => v.type === 'file'))
dataBus.set('dragData_vDirectory', items.filter(v => v.type === 'directory'))
selectedItem.clear()
}
const handleDropFiles = async (files: File[]) => {
currentDirectory.value &&
uploadQueue.push(files, currentDirectory.value, {
onFinish() {
reload()
}
})
}
const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
// 不能移到自己或自己的子文件夹内
for (let vDir of vDirs) {
if (currentDirectory.value.getParents.includes(vDir)) {
return
}
}
for (let dir of vDirs) {
; (async () => {
const _from = dir.parent
const { response } = miaoFetchApi.cut(dir, currentDirectory.value)
const id = (await response).eventId
const { response: res } = miaoFetchApi.query(id)
const eventResult = await res
if (eventResult.status === 'success') {
reload()
_from && _from.update()
}
})()
}
}
const handleDropVirtualFiles = (files: VirtualFile[]) => {
if (files[0].parent === currentDirectory.value) {
return
}
for (let file of files) {
; (async () => {
const _from = file.parent
const { response } = miaoFetchApi.cut(file, currentDirectory.value)
const id = (await response).eventId
const { response: res } = miaoFetchApi.query(id)
const eventResult = await res
if (eventResult.status === 'success') {
reload()
_from.update()
}
})()
}
}
const handlePickFilesUpload = async () => {
const files = await filePicker({
multiple: true
})
const _currDir = currentDirectory.value
uploadQueue.push(files, _currDir, {
onFinish() {
_currDir.update()
}
})
}
const handleAddNewItem = async () => {
const popupRes = await popupInput.value.popup({
title: '新建文件/文件夹',
showInput: true,
inputProps: {
placeholder: ''
},
options: [
{
label: '取消',
key: 'cancel',
type: 'error'
},
{
label: '文件',
key: 'file',
type: 'success'
},
{
label: '文件夹',
key: 'dir',
type: 'success'
}
]
})
// todo: 上传前如重名文件夹等等的错误提前检查
if (popupRes.key === 'cancel' || popupRes.text === '') {
return
}
const _currDir = currentDirectory.value
const name = popupRes.text
const opType: 'file' | 'dir' = popupRes.key
if (opType === 'dir') {
const res = await miaoFetchApi.mkdir(currentDirectory.value, name)
if (res.message === 'success') {
_currDir.update()
}
} else {
const { response } = miaoFetchApi.mkFile(currentDirectory.value, name)
const res = await response
if (res.message === 'success') {
_currDir.update()
}
}
}
const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
if (!selectedItem.value.includes(item)) {
selectedItem.push(item)
} else {
selectedItem.remove(item)
}
}
onMounted(async () => {
await setCurrentDirectory(currentDirectory.value)
})
</script>
<style scoped lang="scss">
$top-height: 30px;
$bottom-bar-height: 60px;
.miao-directory-item-container {
position: relative;
height: 100%;
width: inherit;
// min-width: 236px;
display: flex;
flex-direction: column;
overflow: hidden;
.container-top {
height: $top-height;
width: 100%;
user-select: none;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
background-color: #f1f1f1;
.container-top-colorfulBar {
height: 70%;
width: 5px;
margin-left: 10px;
border-radius: 3px 0 0 3px;
}
.container-top-breadcrumb {
position: relative;
height: 70%;
width: calc(100% - 95px);
display: flex;
justify-content: flex-start;
align-items: center;
// overflow: hidden;
overflow-y: hidden;
overflow-x: hidden;
background-color: #ffffff;
padding: 0 5px;
border-radius: 0 3px 3px 0;
.container-top-breadcrumb-container {
position: absolute;
height: 100%;
right: 0;
top: 0;
min-width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
}
}
.container-top-tools {
position: relative;
height: 100%;
width: 70px;
padding: 0 5px;
display: flex;
justify-content: space-around;
align-items: center;
.container-top-tools-item {
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff00;
border-radius: 5px;
transition: background-color 0.3s;
cursor: pointer;
.container-top-tools-item-reload {
transition: transform 0.6s ease-in-out;
}
&:hover {
background-color: rgba(128, 128, 128, 0.4);
}
&:active .container-top-tools-item-reload {
transform: rotate(360deg);
}
}
// &::after {
// content: '';
// height: 60%;
// position: absolute;
// right: -2px;
// width: 2px;
// background-color: #828282;
// }
}
}
.container-items {
width: 100%;
height: calc(100% - $top-height - $bottom-bar-height);
// flex: 1;
}
.container-bottom {
height: $bottom-bar-height;
background-color: bisque;
display: flex;
justify-content: space-around;
align-items: center;
user-select: none;
box-shadow: 0px 1px 10px #888888;
z-index: 2;
.container-bottom-item {
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
.container-bottom-item-icon {
svg {
width: 30px;
height: 30px;
transition: all 0.3s ease;
cursor: pointer;
}
&:hover {
svg {
width: 40px;
height: 40px;
}
}
}
}
}
}
// transition动画相关
// .miao-directory-item-container {
// .container-items {
// .dirItem-move {
// transition: all 0.2s ease;
// }
// .dirItem-leave-active {
// transition: none;
// }
// .dirItem-enter-from {
// opacity: 0;
// }
// .dirItem-leave-active {
// position: absolute;
// }
// }
// }</style>
vite.config.ts
+15 -11
View File
@@ -1,11 +1,15 @@
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' import { resolve } from 'path'
import { viteSingleFile } from 'vite-plugin-singlefile' // import { viteSingleFile } from 'vite-plugin-singlefile'
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [vue(), viteSingleFile()], base: './',
plugins: [
vue()
// viteSingleFile()
],
resolve: { resolve: {
alias: { alias: {
'@': resolve(__dirname, 'src') '@': resolve(__dirname, 'src')
@@ -55,16 +59,16 @@ export default defineConfig({
build: { build: {
rollupOptions: { rollupOptions: {
input: { input: {
main: resolve(__dirname, 'index.html') main: 'index.html'
}, },
output: { // output: {
// 配置输出为单文件 // entryFileNames: (chunkInfo) => {
inlineDynamicImports: true, // if (chunkInfo.name === 'main') {
manualChunks: undefined, // return 'main.js'
entryFileNames: 'bundle.js', // }
format: 'iife', // 立即执行函数格式 // return '[name].[hash].js'
name: 'MyBundle' // }
} // }
} }
} }
}) })