Compare commits
86
Commits
1.8.0
..
8f8d098faa
| Author | SHA1 | Date | |
|---|---|---|---|
 539943419
|
8f8d098faa | ||
|
539943419
|
bfc841fac2 | ||
|
539943419
|
e8dd9ccf11 | ||
|
539943419
|
d89978a44f | ||
|
539943419
|
5a843bf24a | ||
|
539943419
|
e876c117c6 | ||
|
539943419
|
483a573f06 | ||
|
539943419
|
90a068939d | ||
|
539943419
|
1f42785b4a | ||
|
539943419
|
3b09d4c1cb | ||
|
539943419
|
948b5f23d1 | ||
|
539943419
|
4722a2d157 | ||
|
539943419
|
65c17a8ce3 | ||
|
539943419
|
cba20150be | ||
|
539943419
|
7b52a7a62e | ||
|
539943419
|
2e75a35d10 | ||
|
539943419
|
ae476413df | ||
|
539943419
|
dcdb3a1ab8 | ||
|
539943419
|
baec1856c9 | ||
|
539943419
|
a03623a0a0 | ||
|
539943419
|
aec7fcabc9 | ||
|
539943419
|
9611e9f4ed | ||
|
539943419
|
53ab0ad45b | ||
|
539943419
|
641700d730 | ||
|
539943419
|
aa61489517 | ||
|
539943419
|
171af1219e | ||
|
539943419
|
cdc0bce108 | ||
|
539943419
|
c6b20b5b64 | ||
|
539943419
|
37791ab04e | ||
|
539943419
|
e155524e3e | ||
|
539943419
|
dafe494ce9 | ||
|
539943419
|
55381df4f6 | ||
|
539943419
|
38e1b098d2 | ||
|
539943419
|
4b5b7956c7 | ||
|
539943419
|
5173b28ec5 | ||
|
539943419
|
8d738ef3f9 | ||
|
539943419
|
96ca8fcf4c | ||
|
539943419
|
54c48c0f8f | ||
|
539943419
|
f2ff05f4e3 | ||
|
539943419
|
ff7d0d8d51 | ||
|
539943419
|
0e631a6f34 | ||
|
539943419
|
0ab58b24d9 | ||
|
539943419
|
b0cf5b312a | ||
|
539943419
|
ec4ed10afd | ||
|
539943419
|
3a18bb3cbd | ||
|
539943419
|
282bf327bb | ||
|
539943419
|
4d2bd3867f | ||
|
539943419
|
afb2440d8b | ||
|
539943419
|
8b55ac2854 | ||
|
539943419
|
f0748997be | ||
|
539943419
|
b2c5c7cc6d | ||
|
539943419
|
d16f11c263 | ||
|
539943419
|
0f6e817966 | ||
|
539943419
|
6b8f7aa6b4 | ||
|
539943419
|
78dac7482c | ||
|
539943419
|
9aec221ea3 | ||
|
539943419
|
938dde4c1c | ||
|
539943419
|
8e884eb178 | ||
|
539943419
|
8c65e66ab6 | ||
|
539943419
|
a34e27cc65 | ||
|
539943419
|
de2e53cbcf | ||
|
539943419
|
b3c6dad1b1 | ||
|
539943419
|
fcb2fe8f7f | ||
|
539943419
|
c02f6743e3 | ||
|
539943419
|
3e24d4a363 | ||
|
539943419
|
7574acdad2 | ||
|
539943419
|
704c80e019 | ||
|
539943419
|
210e251b23 | ||
|
539943419
|
93ca2a29a6 | ||
|
539943419
|
25f25ff669 | ||
|
539943419
|
f2333f74cb | ||
|
539943419
|
d0bad77387 | ||
|
539943419
|
f8ca6dba67 | ||
|
539943419
|
2d401f7a17 | ||
|
539943419
|
ef5a8f1a9e | ||
|
539943419
|
86b3a02237 | ||
|
539943419
|
ea43e641ce | ||
|
539943419
|
803fd69850 | ||
|
539943419
|
f6c1ba199f | ||
|
539943419
|
c595ebb260 | ||
|
539943419
|
d5d9984ae5 | ||
|
539943419
|
3a48fd5643 | ||
|
539943419
|
f578072997 | ||
|
539943419
|
632a562348 | ||
|
539943419
|
1f6c924e11 | ||
|
539943419
|
f5e0bd4a56 |
No files matched your search
+6
-1
@@ -23,4 +23,9 @@ dist-ssr
|
||||
*.sln
|
||||
*.sw?
|
||||
.vscode
|
||||
serve
|
||||
serve
|
||||
miao-directory.exe
|
||||
miao-directory-amd64-linux
|
||||
miao-directory-amd64-win.exe
|
||||
test
|
||||
stats.html
|
||||
@@ -1,11 +1,28 @@
|
||||
todo: 标签页，miaoDirectory切换动画 [finish]
|
||||
todo: 重构virtualPage，所有page以插件形式使用 [finish]
|
||||
todo: miaoDirectory插件化，为后续插件功能开发做准备 [finish]
|
||||
todo: miaoPopupInput, 弹出一个输入框 [finish]
|
||||
todo: miaoDirectory的重命名功能 [finish]
|
||||
todo: miaoDirectory的剪切功能 [finish]
|
||||
todo: miaoDirectory的上传按钮 [finish]
|
||||
todo: miaoDirectory的新建文件/文件夹功能 [finish]
|
||||
todo: miaoDirectory的多选功能 [finish]
|
||||
todo: VirtualDirectory更新时更新文件信息
|
||||
todo: miaoDirectory的复制文件/文件夹功能
|
||||
## TODO list:
|
||||
|
||||
| 计划 | 状态 |
|
||||
|---|---|
|
||||
| 拆分miaoDirectory | ✅ |
|
||||
| 完善视频插件 | ✅ |
|
||||
| 完善PDF插件 | ✅ |
|
||||
| 完善Code插件 | ✅ |
|
||||
| 实现miaoDirectory的搜索功能 | ✅ |
|
||||
| 重构miaoFetchApi.getFile， 增加进度 | ❌ |
|
||||
| plugin增加些属性，icon, disable, group之类的 | ❌ |
|
||||
| 完善miaoDirectory的搜索功能 | ❌ |
|
||||
| 实现miaoDirectory的排序功能 | ❌ |
|
||||
| 完善图片浏览插件 | ❌ |
|
||||
| VirtualDirectory更新时更新文件信息 | ❌ |
|
||||
| 创建音乐播放器组件（仿QQ音乐移动端吧） | ❌ |
|
||||
| miaoDirectory的复制文件/文件夹功能 | ❌ |
|
||||
| 重构miaoDropHandler的实现 | ❌ |
|
||||
| 重构主界面，拆分主界面组件的实现 | ❌ |
|
||||
|
||||
|
||||
| 长期计划 |
|
||||
|---|
|
||||
| 无 |
|
||||
|
||||
## 碎碎念：
|
||||
|
||||
为什么不直接做成类似于windows的风格呢？其实技术实现上问题应该不大，重构也不用重构太多东西（APP.vue改改，插件部分改改这样），但是开学了事情一大堆，实习又没法比较美好地推掉。平时每天到宿舍都精疲力竭还要准备秋招和学校的破事。更何况搞不好还会被两个学分卡得没法毕业，好烦好烦。md想这么多干嘛，反正都快岩壁了，mdmdmdmd
|
||||
+2
-2
@@ -2,9 +2,9 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<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" />
|
||||
<title>MDW</title>
|
||||
<title>MiaoDirectory</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
+58
-27
@@ -1,29 +1,60 @@
|
||||
{
|
||||
"name": "miao-directory-web",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dev:host": "vite --host 0.0.0.0",
|
||||
"build": "vue-tsc -b && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vicons/ionicons5": "^0.12.0",
|
||||
"axios": "^1.7.3",
|
||||
"lodash": "^4.17.21",
|
||||
"naive-ui": "^2.39.0",
|
||||
"sass": "^1.77.8",
|
||||
"vue": "^3.4.35"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/lodash": "^4.17.7",
|
||||
"@types/node": "^22.1.0",
|
||||
"@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"
|
||||
}
|
||||
"name": "miao-directory-web",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dev:host": "vite --host 0.0.0.0",
|
||||
"build": "vue-tsc -b && vite build",
|
||||
"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",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@codemirror/lang-go": "^6.0.1",
|
||||
"@codemirror/lang-html": "^6.4.9",
|
||||
"@codemirror/lang-javascript": "^6.2.2",
|
||||
"@codemirror/lang-json": "^6.0.1",
|
||||
"@codemirror/lang-markdown": "^6.2.5",
|
||||
"@codemirror/lang-python": "^6.1.6",
|
||||
"@codemirror/lang-sass": "^6.0.2",
|
||||
"@codemirror/lang-sql": "^6.7.1",
|
||||
"@codemirror/lang-vue": "^0.1.3",
|
||||
"@codemirror/lang-xml": "^6.1.0",
|
||||
"@codemirror/lang-yaml": "^6.1.1",
|
||||
"@types/sortablejs": "^1.15.8",
|
||||
"@vicons/ionicons5": "^0.12.0",
|
||||
"aes-js": "^3.1.2",
|
||||
"aplayer": "^1.10.1",
|
||||
"axios": "^1.7.3",
|
||||
"codemirror": "^6.0.1",
|
||||
"copy-to-clipboard": "^3.3.3",
|
||||
"drag-drop-touch": "^1.3.1",
|
||||
"localforage": "^1.10.0",
|
||||
"lodash": "^4.17.21",
|
||||
"markdown-it": "^14.1.0",
|
||||
"naive-ui": "^2.39.0",
|
||||
"pdfjs-dist": "^4.5.136",
|
||||
"sass": "^1.77.8",
|
||||
"sortablejs": "^1.15.3",
|
||||
"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",
|
||||
"rollup-plugin-visualizer": "^5.12.0",
|
||||
"typescript": "^5.5.3",
|
||||
"vite": "^5.4.0",
|
||||
"vite-plugin-singlefile": "^2.0.2",
|
||||
"vue-tsc": "^2.0.29"
|
||||
}
|
||||
}
|
||||
Generated
+1530
-66
File diff suppressed because it is too large.
Load diff
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
+157
-134
@@ -1,31 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import { h, onMounted, reactive, ref, shallowRef } from 'vue'
|
||||
import { NIcon, NScrollbar, NDropdown, NQrCode } from 'naive-ui'
|
||||
import { computed, onMounted, provide, reactive, ref, shallowRef, useTemplateRef } from 'vue'
|
||||
import { NIcon, NScrollbar, NDropdown } from 'naive-ui'
|
||||
import {
|
||||
EyeOffOutline,
|
||||
EyeOutline,
|
||||
CloseOutline,
|
||||
CopyOutline,
|
||||
EllipsisVertical,
|
||||
QrCodeOutline
|
||||
QrCodeOutline,
|
||||
ExtensionPuzzleOutline
|
||||
} from '@vicons/ionicons5'
|
||||
import miaoDirectory from './views/miaoDirectory.vue'
|
||||
import VirtualPage from './class/VirtualPage'
|
||||
import VirtualDirectory, { VirtualFile } from './class/VirtualDirectory'
|
||||
import MiaoMask from './components/miaoMask.vue'
|
||||
import MiaoMessageProvider from './components/miaoAlertTipProvider.vue'
|
||||
import config from './config'
|
||||
import useVirtualPages from './hooks/useVirtualPages'
|
||||
import init from './hooks/init'
|
||||
import usePluginCenter from './hooks/usePluginCenter'
|
||||
import PluginCenter, { PluginGroup } from './class/PluginCenter'
|
||||
import { renderIcon } from './hooks/miaoTools'
|
||||
import { DropdownMixedOption } from 'naive-ui/es/dropdown/src/interface'
|
||||
|
||||
const { baseUrl } = config
|
||||
|
||||
const showModal = ref<boolean>(false)
|
||||
|
||||
const viewRef = ref<HTMLDivElement>()
|
||||
|
||||
const modalData = shallowRef<{
|
||||
component: any
|
||||
props: any
|
||||
}>()
|
||||
|
||||
const messageProviderRef = useTemplateRef('messageProviderRef')
|
||||
|
||||
const views = useVirtualPages()
|
||||
let pluginCenter = ref<PluginCenter>()
|
||||
|
||||
const rootDirectory = reactive(
|
||||
new VirtualDirectory({
|
||||
@@ -42,171 +52,161 @@ const rootDirectory = reactive(
|
||||
// component就是一个vue组件，类似于miaoDirectory
|
||||
const createView = (
|
||||
component: any,
|
||||
currentDirectorys?: VirtualDirectory[],
|
||||
name: string,
|
||||
currentDirectories?: VirtualDirectory[],
|
||||
currentFiles?: VirtualFile[],
|
||||
index?: number
|
||||
) => {
|
||||
index ?? (index = views.length)
|
||||
views.splice(
|
||||
index,
|
||||
0,
|
||||
reactive<VirtualPage>(new VirtualPage(component, {
|
||||
directorys: [...(currentDirectorys ?? [])],
|
||||
files: [...(currentFiles ?? [])]
|
||||
}))
|
||||
)
|
||||
views.push(component, name, currentDirectories, currentFiles, { index })
|
||||
}
|
||||
|
||||
const deleteView = (index: number) => {
|
||||
views.splice(index, 1)
|
||||
views.deleteView(index)
|
||||
if (views.length === 0) {
|
||||
createView(miaoDirectory, [rootDirectory])
|
||||
pluginCenter.value && pluginCenter.value.usePlugin('miaoDirectory', [rootDirectory], [])
|
||||
}
|
||||
}
|
||||
|
||||
// 点击标题是隐藏其他标签或显示其他标签，还挺好用的
|
||||
const handleClickTitle = (index: number) => {
|
||||
let count = views.filter((v) => v.visible).length
|
||||
let op = !views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
|
||||
let count = views._views.filter((v) => v.visible).length
|
||||
let op =
|
||||
!views._views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
|
||||
let _index = 0
|
||||
while (_index < views.length) {
|
||||
while (_index < views._views.length) {
|
||||
if (_index !== index) {
|
||||
views[_index].visible = op === 'hideOthers' ? false : true
|
||||
views._views[_index].visible = op === 'hideOthers' ? false : true
|
||||
} else {
|
||||
views[_index].visible = true
|
||||
views._views[_index].visible = true
|
||||
}
|
||||
_index += 1
|
||||
}
|
||||
}
|
||||
|
||||
// 顶部菜单相关
|
||||
function renderIcon(icon: any) {
|
||||
return () => {
|
||||
return h(NIcon, null, {
|
||||
default: () => h(icon)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const openMenuOption = [
|
||||
const openMenuOption = computed(() => [
|
||||
{
|
||||
label: '分享',
|
||||
key: 'share',
|
||||
icon: renderIcon(QrCodeOutline)
|
||||
}
|
||||
]
|
||||
}, pluginCenter.value ? {
|
||||
label: '插件',
|
||||
key: 'plugin',
|
||||
children: [
|
||||
...pluginCenter.value
|
||||
.getUsablePlugin([], [], {
|
||||
group: [PluginGroup.mainMenu]
|
||||
})
|
||||
.map((v) => ({
|
||||
label: `${v.name}`,
|
||||
key: `plugin:${v.key}`,
|
||||
icon: v.icon ? renderIcon(v.icon) : undefined
|
||||
}))
|
||||
],
|
||||
icon: renderIcon(ExtensionPuzzleOutline)
|
||||
} : undefined
|
||||
].filter(v => v) as DropdownMixedOption[])
|
||||
|
||||
const handleMenuSelect = (key: string) => {
|
||||
const handleMenuSelect = async (key: string) => {
|
||||
if (key === 'share') {
|
||||
showModal.value = true
|
||||
modalData.value = {
|
||||
component: NQrCode,
|
||||
component: (await import('naive-ui/es/qr-code')).NQrCode,
|
||||
props: {
|
||||
value: baseUrl,
|
||||
size: 300,
|
||||
errorCorrectionLevel: 'H'
|
||||
}
|
||||
}
|
||||
} else if (key.startsWith('plugin:')) {
|
||||
const pluginName = key.split(':')[1]
|
||||
pluginCenter.value && pluginCenter.value.usePlugin(pluginName, [], [])
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
createView(miaoDirectory, [rootDirectory])
|
||||
onMounted(async () => {
|
||||
// @ts-ignore
|
||||
await init(messageProviderRef.value?.alertTip)
|
||||
pluginCenter.value = usePluginCenter()
|
||||
// console.log({ pluginCenter })
|
||||
pluginCenter.value.usePlugin('miaoDirectory', [rootDirectory], [])
|
||||
})
|
||||
|
||||
// @ts-ignore
|
||||
provide('globalAlertTip', messageProviderRef.value?.alertTip)
|
||||
provide('rootDirectory', rootDirectory)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="view">
|
||||
<div class="view-controler">
|
||||
<n-scrollbar x-scrollable>
|
||||
<div class="tags-container">
|
||||
<transition-group name="tab">
|
||||
<div
|
||||
class="tab"
|
||||
v-for="(view, index) of views"
|
||||
:key="view.uid">
|
||||
<div
|
||||
class="tab-title"
|
||||
@click="handleClickTitle(index)">
|
||||
{{ view.title }}
|
||||
</div>
|
||||
<div
|
||||
class="tab-point"
|
||||
:style="{ backgroundColor: view.color }"></div>
|
||||
<div class="tab-control">
|
||||
<n-icon
|
||||
class="tag-control-icon icon"
|
||||
@click="view.switchShow()">
|
||||
<EyeOutline
|
||||
v-show="view.visible"
|
||||
class="icon-inner" />
|
||||
<EyeOffOutline
|
||||
v-show="!view.visible"
|
||||
class="icon-inner" />
|
||||
</n-icon>
|
||||
<n-icon
|
||||
class="tag-control-icon icon"
|
||||
@click="
|
||||
<div class="view" ref="viewRef">
|
||||
<miao-message-provider ref="messageProviderRef">
|
||||
<div class="view-controller">
|
||||
<n-scrollbar x-scrollable>
|
||||
<div class="tabs-container">
|
||||
<transition-group name="tab">
|
||||
<div class="tab" v-for="(view, index) of views._views" :key="view.id">
|
||||
<span class="tab-title" :title="view.title" @click="handleClickTitle(index)">
|
||||
{{
|
||||
view.title.length > 5 && 0
|
||||
? `${view.title.substring(0, 5)}...`
|
||||
: view.title
|
||||
}}
|
||||
</span>
|
||||
<div class="tab-control">
|
||||
<div class="tab-point" :style="{ backgroundColor: view.color }"></div>
|
||||
<n-icon class="tag-control-icon icon" @click="view.switchShow()">
|
||||
<EyeOutline v-show="view.visible" class="icon-inner" />
|
||||
<EyeOffOutline v-show="!view.visible" class="icon-inner" />
|
||||
</n-icon>
|
||||
<n-icon class="tag-control-icon icon" @click="
|
||||
createView(
|
||||
view.component,
|
||||
view.currentDirectorys,
|
||||
view.name,
|
||||
view.currentDirectories,
|
||||
view.currentFiles,
|
||||
index + 1
|
||||
)
|
||||
">
|
||||
<CopyOutline />
|
||||
</n-icon>
|
||||
<n-icon
|
||||
class="tag-control-icon icon"
|
||||
@click="deleteView(index)">
|
||||
<CloseOutline class="icon-inner" />
|
||||
</n-icon>
|
||||
" v-if="view.allowCopy">
|
||||
<CopyOutline />
|
||||
</n-icon>
|
||||
<n-icon class="tag-control-icon icon" @click="deleteView(index)">
|
||||
<CloseOutline class="icon-inner" />
|
||||
</n-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</n-scrollbar>
|
||||
<div class="view-controller-menu">
|
||||
<div class="view-controller-menu-item">
|
||||
<n-dropdown
|
||||
trigger="click"
|
||||
:options="openMenuOption"
|
||||
@select="handleMenuSelect">
|
||||
<n-icon class="icon">
|
||||
<EllipsisVertical class="icon-inner" />
|
||||
</n-icon>
|
||||
</n-dropdown>
|
||||
</transition-group>
|
||||
</div>
|
||||
</n-scrollbar>
|
||||
<div class="view-controller-menu">
|
||||
<div class="view-controller-menu-item">
|
||||
<n-dropdown trigger="click" :options="openMenuOption" @select="handleMenuSelect">
|
||||
<n-icon class="icon">
|
||||
<EllipsisVertical class="icon-inner" />
|
||||
</n-icon>
|
||||
</n-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="view-container">
|
||||
<transition-group name="page">
|
||||
<div
|
||||
class="view-container-item"
|
||||
v-for="(view, index) of views"
|
||||
v-show="view.visible"
|
||||
:key="view.uid">
|
||||
<component
|
||||
:is="view.component"
|
||||
v-model:current-objects="view.currentDirectorys"
|
||||
:id="view.uid"
|
||||
:color="view.color"
|
||||
@exit="deleteView(index)"></component>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
<div class="view-container">
|
||||
<!-- <transition-group name="page"> -->
|
||||
<div class="view-container-item" v-for="(view, index) of views._views"
|
||||
:class="!view.visible ? 'view-container-item-hidden' : ''" :key="view.id">
|
||||
<component :is="view.component" v-model:current-directories="view.currentDirectories"
|
||||
v-model:current-files="view.currentFiles" :id="view.id" :color="view.color" :view="view"
|
||||
:views="views" @exit="deleteView(index)"></component>
|
||||
</div>
|
||||
<!-- </transition-group> -->
|
||||
</div>
|
||||
</miao-message-provider>
|
||||
</div>
|
||||
<!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
|
||||
<MiaoMask v-model:show="showModal" @click="showModal = false">
|
||||
<component
|
||||
@click="(e:any) => e.stopPropagation()"
|
||||
:is="modalData?.component"
|
||||
v-bind="modalData?.props"></component>
|
||||
<component @click="(e: any) => e.stopPropagation()" :is="modalData?.component" v-bind="modalData?.props">
|
||||
</component>
|
||||
</MiaoMask>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$controler-height: 25px;
|
||||
$controller-height: 25px;
|
||||
$tag-width: 170px;
|
||||
|
||||
.view {
|
||||
@@ -214,14 +214,14 @@ $tag-width: 170px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.view-controler {
|
||||
.view-controller {
|
||||
display: flex;
|
||||
height: $controler-height;
|
||||
height: $controller-height;
|
||||
width: 100%;
|
||||
background-color: #dadada;
|
||||
// overflow: hidden;
|
||||
|
||||
.tags-container {
|
||||
.tabs-container {
|
||||
display: flex;
|
||||
margin-left: 5px;
|
||||
flex: 1;
|
||||
@@ -230,6 +230,7 @@ $tag-width: 170px;
|
||||
.tab {
|
||||
position: relative;
|
||||
width: $tag-width;
|
||||
height: $controller-height;
|
||||
margin: 0 5px;
|
||||
// flex: 1;
|
||||
display: flex;
|
||||
@@ -237,17 +238,27 @@ $tag-width: 170px;
|
||||
align-items: center;
|
||||
|
||||
.tab-title {
|
||||
// font-family: monospace;
|
||||
// font-weight: bolder;
|
||||
margin-left: 4px;
|
||||
// width: 70%;
|
||||
width: 90px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
span {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-point {
|
||||
height: 5px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 66px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.tab-control {
|
||||
@@ -263,7 +274,7 @@ $tag-width: 170px;
|
||||
|
||||
&:not(:last-child)::after {
|
||||
content: '';
|
||||
height: calc($controler-height * 0.6);
|
||||
height: calc($controller-height * 0.6);
|
||||
width: 1px;
|
||||
border-right: 1px solid black;
|
||||
position: absolute;
|
||||
@@ -288,7 +299,7 @@ $tag-width: 170px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
height: calc($controler-height * 0.6);
|
||||
height: calc($controller-height * 0.6);
|
||||
width: 1px;
|
||||
border-right: 1px solid black;
|
||||
position: absolute;
|
||||
@@ -297,8 +308,8 @@ $tag-width: 170px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: calc($controler-height * 0.7);
|
||||
width: calc($controler-height * 0.7);
|
||||
height: calc($controller-height * 0.7);
|
||||
width: calc($controller-height * 0.7);
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -317,13 +328,24 @@ $tag-width: 170px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
// flex-direction: column;
|
||||
height: calc(100% - $controler-height);
|
||||
overflow-y: overlay;
|
||||
height: calc(100% - $controller-height);
|
||||
overflow-y: hidden;
|
||||
overflow-x: overlay;
|
||||
|
||||
.view-container-item {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
min-width: 180px;
|
||||
opacity: 1;
|
||||
transition: flex .25s ease, opacity .25s ease;
|
||||
}
|
||||
|
||||
.view-container-item-hidden {
|
||||
flex: 0;
|
||||
min-width: 0px;
|
||||
opacity: 0;
|
||||
// transition-delay: opacity .25s;
|
||||
// transition: opacity 5.25s ease;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
@@ -351,14 +373,16 @@ $tag-width: 170px;
|
||||
|
||||
// transition动画相关
|
||||
.view {
|
||||
.view-controler {
|
||||
.tags-container {
|
||||
.view-controller {
|
||||
.tabs-container {
|
||||
|
||||
.tab-move,
|
||||
.tab-enter-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.tab-leave-active {
|
||||
opacity: 0;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
@@ -380,23 +404,22 @@ $tag-width: 170px;
|
||||
|
||||
// .view-container {
|
||||
// .page-move {
|
||||
// transition: all 0.2s ease;
|
||||
// // transition: all 0.55s ease;
|
||||
// }
|
||||
|
||||
// .page-enter-active {
|
||||
|
||||
// }
|
||||
// .page-enter-active {}
|
||||
|
||||
// .page-leave-active {
|
||||
// transition: none;
|
||||
// transition: none !important;
|
||||
// }
|
||||
|
||||
// .page-enter-from {
|
||||
// opacity: 0;
|
||||
// // opacity: 0;
|
||||
// }
|
||||
|
||||
// .page-leave-active {
|
||||
// position: absolute;
|
||||
// display: none;
|
||||
// position: absolute;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
@@ -0,0 +1,142 @@
|
||||
import useVirtualPages from "@/hooks/useVirtualPages";
|
||||
import VirtualDirectory, { VirtualFile } from "./VirtualDirectory";
|
||||
import { ShallowRef, shallowRef } from "vue";
|
||||
import { alertTipType, usePluginHooksType } from "@/types/type";
|
||||
import VirtualPage, { VirtualPages } 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[], VPages: VirtualPages) => 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;
|
||||
}
|
||||
|
||||
/**
|
||||
* 便捷地注册一个组件为插件，触发时直接用新页面打开，页面名为key
|
||||
*/
|
||||
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 = this.globalAlertTip(`加载 ${name} 插件中`);
|
||||
_component = await getComponent();
|
||||
setAlertTip &&
|
||||
setAlertTip(`加载 ${name} 插件完成`, {
|
||||
type: "success",
|
||||
timeout: 2000
|
||||
});
|
||||
}
|
||||
const _findRes = views.find(_component) as VirtualPage[];
|
||||
if (single && _findRes.length !== 0) {
|
||||
const view = _findRes[0];
|
||||
view.currentFiles = [...view.currentFiles, ...VFiles];
|
||||
view.currentDirectories = [...view.currentDirectories, ...VDirectories];
|
||||
} else {
|
||||
views.push(_component, key, VDirectories, VFiles, {
|
||||
VirtualPageOption: {
|
||||
exitConfirm,
|
||||
allowCopy: single === false
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getUsablePlugin(
|
||||
VDirectories: VirtualDirectory[],
|
||||
VFiles: VirtualFile[],
|
||||
option?: {
|
||||
group?: PluginGroup[];
|
||||
}
|
||||
) {
|
||||
const { group = [PluginGroup.default] } = option ?? {};
|
||||
const usableList = [];
|
||||
const views = useVirtualPages();
|
||||
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, views)) {
|
||||
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[]): void;
|
||||
// usePlugin(key: string, VPages: VirtualPages, ...args: any[]) : void
|
||||
|
||||
usePlugin(key: string, VDirectories?: VirtualDirectory[], VFiles?: VirtualFile[], ...args: any[]) {
|
||||
this.pluginsMap[key].func(
|
||||
VDirectories ?? [],
|
||||
VFiles ?? [],
|
||||
{
|
||||
globalAlertTip: this.globalAlertTip,
|
||||
getViews: useVirtualPages,
|
||||
getPluginCenter: () => this
|
||||
},
|
||||
...args
|
||||
);
|
||||
}
|
||||
}
|
||||
+221
-130
@@ -1,144 +1,235 @@
|
||||
import generateId from "@/hooks/generateId";
|
||||
import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
|
||||
// import { debounce } from "lodash";
|
||||
import type { stats, file, directory } from "@/types/type.ts";
|
||||
import config from '@/config'
|
||||
import generateId from '@/hooks/generateId'
|
||||
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
||||
import type { stats, file, directory } from '@/types/type.ts'
|
||||
import difference from 'lodash/difference'
|
||||
|
||||
const miaoFetchApi = useMiaoFetchApi();
|
||||
const miaoFetchApi = useMiaoFetchApi()
|
||||
|
||||
// const vDirectoryMap = new Map<string, VirtualDirectory>()
|
||||
// const vFileMap = new Map<string, VirtualFile>()
|
||||
|
||||
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 {
|
||||
constructor(info: file, parent: VirtualDirectory) {
|
||||
this.name = info.name;
|
||||
this.size = info.size;
|
||||
this.stats = info.stats;
|
||||
this.parent = parent;
|
||||
this.type = "file";
|
||||
this.uid = generateId();
|
||||
}
|
||||
name: string;
|
||||
type: "file";
|
||||
size: number;
|
||||
stats: stats;
|
||||
parent: VirtualDirectory;
|
||||
uid: number;
|
||||
get path() {
|
||||
return `${this.parent.path}${this.name}`;
|
||||
}
|
||||
constructor(info: file, parent: VirtualDirectory) {
|
||||
this.name = info.name
|
||||
this.size = info.size
|
||||
this.stats = info.stats
|
||||
this.parent = parent
|
||||
this.type = 'file'
|
||||
this.id = generateId()
|
||||
// if (vFileMap.get(this.path) !== undefined) {
|
||||
// throw `${this.path} is already exist`
|
||||
// }
|
||||
// vFileMap.set(this.path, this)
|
||||
}
|
||||
name: string
|
||||
type: 'file'
|
||||
size: number
|
||||
stats: stats
|
||||
parent: VirtualDirectory
|
||||
id: number
|
||||
storage: { [key: string]: any } = {}
|
||||
get path() {
|
||||
return `${this.parent.path}${this.name}`
|
||||
}
|
||||
|
||||
get url() {
|
||||
return `${config.api.get}${this.parent.path}${this.name}`
|
||||
}
|
||||
|
||||
// destroy() {
|
||||
// vFileMap.delete(this.path)
|
||||
// }
|
||||
}
|
||||
|
||||
class VirtualDirectory {
|
||||
constructor(info: directory, parent?: VirtualDirectory) {
|
||||
this.name = info.name;
|
||||
this.type = "directory";
|
||||
this.stats = info.stats;
|
||||
this.parent = parent ?? undefined;
|
||||
this.uid = generateId();
|
||||
}
|
||||
// 文件夹名
|
||||
name: string;
|
||||
// 子文件
|
||||
files?: VirtualFile[];
|
||||
// 子目录
|
||||
directorys?: VirtualDirectory[];
|
||||
// 没啥意义，标注一下就是了
|
||||
type: "directory";
|
||||
// 文件夹创建时间等杂项属性
|
||||
stats: stats;
|
||||
// 父文件夹
|
||||
parent?: VirtualDirectory;
|
||||
/**
|
||||
* 除非为根节点，否则必须设置parent
|
||||
*/
|
||||
constructor(info: directory, parent?: VirtualDirectory) {
|
||||
this.name = info.name
|
||||
this.stats = info.stats
|
||||
this.parent = parent ?? undefined
|
||||
this.id = generateId()
|
||||
// if (vDirectoryMap.get(this.path) !== undefined) {
|
||||
// throw `${this.path} is already exist`
|
||||
// }
|
||||
// vDirectoryMap.set(this.path, this)
|
||||
}
|
||||
// 文件夹名
|
||||
name: string
|
||||
// 子文件
|
||||
files: VirtualFile[] = []
|
||||
// 子目录
|
||||
directories: VirtualDirectory[] = []
|
||||
// 没啥意义，标注一下就是了
|
||||
type: 'directory' = 'directory'
|
||||
// 文件夹创建时间等杂项属性
|
||||
stats: stats
|
||||
// 父文件夹
|
||||
parent?: VirtualDirectory
|
||||
|
||||
uid: number;
|
||||
_isUpdated: boolean = false
|
||||
|
||||
/**
|
||||
* 获取相对于根目录的路径的层数
|
||||
* 用于目录下文件定位
|
||||
* @returns {string}
|
||||
*/
|
||||
get layer(): number {
|
||||
return this.parent ? this.parent.layer + 1 : 0;
|
||||
}
|
||||
/**
|
||||
* 相对于根目录的路径， 如: "/", "/123/321/"
|
||||
* 用于目录下文件定位
|
||||
* @returns {string}
|
||||
*/
|
||||
get path(): string {
|
||||
if (!this.parent) {
|
||||
return "/";
|
||||
}
|
||||
return `${this.parent.path}${this.name}/`;
|
||||
}
|
||||
id: number
|
||||
|
||||
/**
|
||||
* 获取从根目录开始的按顺序的文件夹
|
||||
* @returns {VirtualDirectory[]}
|
||||
*/
|
||||
get getParents(): VirtualDirectory[] {
|
||||
if (!this.parent) {
|
||||
return [this];
|
||||
}
|
||||
return [...this.parent.getParents, this];
|
||||
}
|
||||
// 用来存储一些标记信息啥的
|
||||
storage: { [key: string]: any } = {}
|
||||
|
||||
/**
|
||||
* 获取 layer 级父文件夹, 如getParent(1)就返回父级
|
||||
* @param {number} layer 需要跳转的层数
|
||||
* @returns {VirtualDirectory}
|
||||
*/
|
||||
getParent(layer: number): VirtualDirectory {
|
||||
if (layer <= 0 || !this.parent) {
|
||||
return this;
|
||||
}
|
||||
return this.parent.getParent(layer - 1);
|
||||
}
|
||||
/**
|
||||
* 获取相对于根目录的路径的层数
|
||||
* 用于目录下文件定位
|
||||
* @returns {string}
|
||||
*/
|
||||
get layer(): number {
|
||||
return this.parent ? this.parent.layer + 1 : 0
|
||||
}
|
||||
/**
|
||||
* 相对于根目录的路径， 如: "/", "/123/321/"
|
||||
* 用于目录下文件定位
|
||||
* @returns {string}
|
||||
*/
|
||||
get path(): string {
|
||||
if (!this.parent) {
|
||||
return '/'
|
||||
}
|
||||
return `${this.parent.path}${this.name}/`
|
||||
}
|
||||
|
||||
updateContent(content: (file | directory)[]) {
|
||||
this.files = this.files ?? [];
|
||||
this.directorys = this.directorys ?? [];
|
||||
const fileNames: string[] = this.files.map(v => v.name);
|
||||
const dirNames: string[] = this.directorys.map(v => v.name);
|
||||
const itemNames: string[] = content.map(v => v.name);
|
||||
// 删去远程端已不存在的文件与文件夹
|
||||
const _delete = (target: (VirtualFile | VirtualDirectory)[]) => {
|
||||
let index = 0;
|
||||
while (index < target.length) {
|
||||
if (!itemNames.includes(target[index].name)) {
|
||||
target.splice(index, 1);
|
||||
} else {
|
||||
index += 1;
|
||||
}
|
||||
}
|
||||
};
|
||||
_delete(this.files);
|
||||
_delete(this.directorys);
|
||||
// 加入新的文件与文件夹
|
||||
for (let item of content) {
|
||||
if (item.type === "file") {
|
||||
if (!fileNames.includes(item.name)) {
|
||||
this.files.push(new VirtualFile(item, this));
|
||||
}
|
||||
} else if (item.type === "directory") {
|
||||
if (!dirNames.includes(item.name)) {
|
||||
this.directorys.push(new VirtualDirectory(item, this));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 获取从根目录开始的按顺序的文件夹
|
||||
* @returns {VirtualDirectory[]}
|
||||
*/
|
||||
get getParents(): VirtualDirectory[] {
|
||||
if (!this.parent) {
|
||||
return [this]
|
||||
}
|
||||
return [...this.parent.getParents, this]
|
||||
}
|
||||
|
||||
hasChild(item: VirtualDirectory | VirtualFile): boolean {
|
||||
if (item.type === "directory") {
|
||||
return this.directorys?.includes(item) ?? false;
|
||||
} else {
|
||||
return this.files?.includes(item) ?? false;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 获取当前文件夹是否已经请求过至少一次数据
|
||||
*/
|
||||
get isUpdated() {
|
||||
return this._isUpdated
|
||||
}
|
||||
|
||||
/**
|
||||
* 调用后重新向远端拉取文件夹信息并进行更新
|
||||
* @returns {void}
|
||||
*/
|
||||
async update(): Promise<void> {
|
||||
const data: (file | directory)[] = await miaoFetchApi.get(this);
|
||||
this.updateContent(data);
|
||||
}
|
||||
/**
|
||||
* 获取 layer 级父文件夹, 如getParent(1)就返回父级
|
||||
* @param {number} layer 需要跳转的层数
|
||||
* @returns {VirtualDirectory}
|
||||
*/
|
||||
getParent(layer: number): VirtualDirectory {
|
||||
if (layer <= 0 || !this.parent) {
|
||||
return this
|
||||
}
|
||||
return this.parent.getParent(layer - 1)
|
||||
}
|
||||
|
||||
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)[]) {
|
||||
this._isUpdated = true
|
||||
|
||||
const itemNames: string[] = content.map((v) => v.name)
|
||||
// 删去远程端已不存在的文件与文件夹
|
||||
const _delete = (target: (VirtualFile | VirtualDirectory)[]) => {
|
||||
let index = 0
|
||||
while (index < target.length) {
|
||||
if (!itemNames.includes(target[index].name)) {
|
||||
target.splice(index, 1)
|
||||
} else {
|
||||
index += 1
|
||||
}
|
||||
}
|
||||
}
|
||||
const _addFile = (item: file) => {
|
||||
const nvf =
|
||||
// vFileMap.get(`${this.path}${item.name}`) ??
|
||||
new VirtualFile(item, this)
|
||||
this.files.push(nvf)
|
||||
}
|
||||
const _addDirectory = (item: directory) => {
|
||||
const nvd =
|
||||
// vDirectoryMap.get(`${this.path}${item.name}/`) ??
|
||||
new VirtualDirectory(item, this)
|
||||
this.directories.push(nvd)
|
||||
}
|
||||
const newFileNames: string[] = difference(
|
||||
content.filter((v) => v.type === 'file').map((v) => v.name),
|
||||
this.files.map((v) => v.name)
|
||||
)
|
||||
const newDirectoryNames: string[] = difference(
|
||||
content.filter((v) => v.type === 'directory').map((v) => v.name),
|
||||
this.directories.map((v) => v.name)
|
||||
)
|
||||
_delete(this.files)
|
||||
_delete(this.directories)
|
||||
// 加入新的文件与文件夹
|
||||
for (let item of content.filter((v) => newFileNames.includes(v.name))) {
|
||||
_addFile(item as file)
|
||||
}
|
||||
for (let item of content.filter((v) =>
|
||||
newDirectoryNames.includes(v.name)
|
||||
)) {
|
||||
_addDirectory(item as directory)
|
||||
}
|
||||
}
|
||||
|
||||
hasChild(item: VirtualDirectory | VirtualFile): boolean {
|
||||
if (item.type === 'directory') {
|
||||
return this.directories?.includes(item) ?? false
|
||||
} else {
|
||||
return this.files?.includes(item) ?? false
|
||||
}
|
||||
}
|
||||
|
||||
// destroy() {
|
||||
// for(const item of [...this.files, ...this.directories]){
|
||||
// item.destroy()
|
||||
// }
|
||||
// vDirectoryMap.delete(this.path)
|
||||
// }
|
||||
|
||||
/**
|
||||
* 调用后重新向远端拉取文件夹信息并进行更新
|
||||
* @returns {void}
|
||||
*/
|
||||
async update(): Promise<void> {
|
||||
const data: (file | directory)[] = await miaoFetchApi.get(this)
|
||||
this.updateContent(data)
|
||||
}
|
||||
}
|
||||
export default VirtualDirectory;
|
||||
export default VirtualDirectory
|
||||
+177
-54
@@ -1,63 +1,186 @@
|
||||
import { shallowRef } from "vue";
|
||||
import VirtualDirectory, { VirtualFile } from "./VirtualDirectory";
|
||||
import generateId from "@/hooks/generateId";
|
||||
import { Component, reactive, shallowRef } from 'vue'
|
||||
import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
|
||||
import generateId from '@/hooks/generateId'
|
||||
|
||||
export interface VirtualPageOption {
|
||||
exitConfirm?: boolean
|
||||
allowCopy?: boolean
|
||||
}
|
||||
|
||||
export interface ViewsPushOption {
|
||||
index?: number
|
||||
VirtualPageOption?: VirtualPageOption
|
||||
}
|
||||
|
||||
const getRandomWebSafeColor = (() => {
|
||||
const webSafeColors = ["#009900", "#999900", "#009999", "#990099", "#0000ee"];
|
||||
let counter = 0;
|
||||
return () => {
|
||||
const color = webSafeColors[counter % webSafeColors.length];
|
||||
counter += 1;
|
||||
return color;
|
||||
};
|
||||
})();
|
||||
const webSafeColors = [
|
||||
'#009900',
|
||||
'#999900',
|
||||
'#009999',
|
||||
'#990099',
|
||||
'#0000ee'
|
||||
]
|
||||
let counter = 0
|
||||
return () => {
|
||||
const color = webSafeColors[counter % webSafeColors.length]
|
||||
counter += 1
|
||||
return color
|
||||
}
|
||||
})()
|
||||
|
||||
export default class VirtualPage {
|
||||
constructor(component: any, initObjects?:{ directorys?: VirtualDirectory[], files?: VirtualFile[]}) {
|
||||
this.component = shallowRef(component);
|
||||
this.currentDirectorys = initObjects?.directorys ?? [];
|
||||
this.currentFiles = initObjects?.files ?? [];
|
||||
this.visible = true;
|
||||
this.uid = generateId();
|
||||
this.refreshKey = Math.random();
|
||||
this.color = getRandomWebSafeColor();
|
||||
}
|
||||
// 页面使用的组件
|
||||
component: any;
|
||||
// 是否可见
|
||||
visible: boolean;
|
||||
// 当前正在使用的文件夹
|
||||
currentDirectorys: VirtualDirectory[];
|
||||
// 当前正在使用的文件
|
||||
currentFiles: VirtualFile[];
|
||||
// 区分每一个页面的唯一id
|
||||
uid: number;
|
||||
// 当refreshKey改变时需要刷新页面，目前还没接入刷新
|
||||
refreshKey: number;
|
||||
// 为了区分，每个虚拟页面都会分配一个color，这个color会体现在tab上
|
||||
color: string;
|
||||
// 用于展示的title
|
||||
_title?: string;
|
||||
constructor(
|
||||
component: Component,
|
||||
initObjects: {
|
||||
name: string
|
||||
directories?: VirtualDirectory[]
|
||||
files?: VirtualFile[]
|
||||
option?: VirtualPageOption
|
||||
}
|
||||
) {
|
||||
this.name = initObjects?.name
|
||||
this.component = shallowRef(component)
|
||||
this.currentDirectories = initObjects?.directories ?? []
|
||||
this.currentFiles = initObjects?.files ?? []
|
||||
this.visible = true
|
||||
this.id = generateId()
|
||||
this.refreshKey = Math.random()
|
||||
this.color = getRandomWebSafeColor()
|
||||
this.exitConfirm = initObjects?.option?.exitConfirm ?? false
|
||||
this.allowCopy = initObjects?.option?.allowCopy ?? true
|
||||
}
|
||||
// 页面使用的组件
|
||||
component: Component
|
||||
// 页面名
|
||||
name: string
|
||||
// 是否可见
|
||||
visible: boolean
|
||||
// 当前正在使用的文件夹
|
||||
currentDirectories: VirtualDirectory[]
|
||||
// 当前正在使用的文件
|
||||
currentFiles: VirtualFile[]
|
||||
// 区分每一个页面的唯一id
|
||||
id: number
|
||||
// 当refreshKey改变时需要刷新页面，目前还没接入刷新
|
||||
refreshKey: number
|
||||
// 为了区分，每个虚拟页面都会分配一个color，这个color会体现在tab上
|
||||
color: string
|
||||
// 用于展示的title
|
||||
_title?: string
|
||||
// 关闭时是否需要确认（未实现）
|
||||
exitConfirm: boolean
|
||||
// 是否允许复制页面
|
||||
allowCopy: boolean
|
||||
|
||||
get title() {
|
||||
if (this._title) {
|
||||
return this._title;
|
||||
}
|
||||
return this.currentDirectorys[0].name;
|
||||
}
|
||||
get title() {
|
||||
if (this._title) {
|
||||
return this._title
|
||||
}
|
||||
return (
|
||||
this?.currentDirectories[0]?.name ??
|
||||
this?.currentFiles[0]?.name ??
|
||||
'未命名标签'
|
||||
)
|
||||
}
|
||||
|
||||
setTitle(title: string) {
|
||||
this._title = title;
|
||||
}
|
||||
setTitle(title: string) {
|
||||
this._title = title
|
||||
}
|
||||
|
||||
// 切换显示状态
|
||||
switchShow() {
|
||||
this.visible = !this.visible;
|
||||
}
|
||||
// 切换显示状态
|
||||
switchShow() {
|
||||
this.visible = !this.visible
|
||||
}
|
||||
|
||||
// 刷新，不过好像没有用得到的时候吧
|
||||
// 事实上也不应该用得到，因为更新应该是响应式的
|
||||
refresh() {
|
||||
this.refreshKey = Math.random();
|
||||
}
|
||||
// 刷新，不过好像没有用得到的时候吧
|
||||
// 事实上也不应该用得到，因为更新应该是响应式的
|
||||
refresh() {
|
||||
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: Component,
|
||||
name: string,
|
||||
currentDirectories?: VirtualDirectory[],
|
||||
currentFiles?: VirtualFile[],
|
||||
option?: ViewsPushOption
|
||||
) {
|
||||
const { index = this.length, VirtualPageOption } = option ?? {}
|
||||
this._views.splice(
|
||||
index,
|
||||
0,
|
||||
reactive<VirtualPage>(
|
||||
new VirtualPage(component, {
|
||||
name,
|
||||
directories: [...(currentDirectories ?? [])],
|
||||
files: [...(currentFiles ?? [])],
|
||||
option: VirtualPageOption
|
||||
})
|
||||
)
|
||||
)
|
||||
}
|
||||
/**
|
||||
* 根据次序删除一个页面
|
||||
*/
|
||||
deleteView(index: number) {
|
||||
this._views.splice(index, 1)
|
||||
}
|
||||
|
||||
/**
|
||||
* 返回第一个使用此组件的页面
|
||||
*/
|
||||
find(component: Component) : VirtualPage[]
|
||||
/**
|
||||
* 通过页面名查找
|
||||
*/
|
||||
find(name: string) : VirtualPage[]
|
||||
|
||||
find(input: unknown) {
|
||||
// console.log(this)
|
||||
if (typeof input === 'string') {
|
||||
return this._views.filter(v => v.component.name === input);
|
||||
} else {
|
||||
return this._views.filter(v => v.component === input);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
<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;
|
||||
overflow: hidden;
|
||||
|
||||
.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>
|
||||
@@ -1,8 +1,7 @@
|
||||
<!-- 基于naiveui的下拉菜单实现的自定义下拉菜单 -->
|
||||
<!-- 支持长按和右键呼出下拉菜单 -->
|
||||
<template>
|
||||
<div class="main" @contextmenu="handleContextMenu" @mouseleave="handleMainMouseLeave" @touchstart="handleTouchStart"
|
||||
@touchend="handleTouchEnd">
|
||||
<div class="main" @contextmenu="handleContextMenu" @mouseleave="handleMainMouseLeave">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<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 showContextMenu = ref(0)
|
||||
// 长按计时器
|
||||
let timer_touch: string | number | NodeJS.Timeout | undefined
|
||||
// let timer_touch: string | number | NodeJS.Timeout | undefined
|
||||
|
||||
const onClickoutside = async () => {
|
||||
showContextMenu.value = 0
|
||||
@@ -58,25 +57,25 @@ const handleContextMenu = (e: MouseEvent) => {
|
||||
})
|
||||
}
|
||||
|
||||
const handleTouchStart = (e: TouchEvent) => {
|
||||
if(props.touchTimeOut === undefined) {
|
||||
return
|
||||
}
|
||||
timer_touch ?? clearTimeout(timer_touch)
|
||||
timer_touch = setTimeout(() => {
|
||||
showContextMenu.value = 1
|
||||
x.value = e.targetTouches[0].clientX
|
||||
y.value = e.targetTouches[0].clientY
|
||||
}, props.touchTimeOut)
|
||||
}
|
||||
// const handleTouchStart = (e: TouchEvent) => {
|
||||
// if(props.touchTimeOut === undefined) {
|
||||
// return
|
||||
// }
|
||||
// timer_touch ?? clearTimeout(timer_touch)
|
||||
// timer_touch = setTimeout(() => {
|
||||
// showContextMenu.value = 1
|
||||
// x.value = e.targetTouches[0].clientX
|
||||
// y.value = e.targetTouches[0].clientY
|
||||
// }, props.touchTimeOut)
|
||||
// }
|
||||
|
||||
const handleTouchEnd = () => {
|
||||
if(timer_touch) {
|
||||
clearTimeout(timer_touch)
|
||||
timer_touch = undefined
|
||||
}
|
||||
// const handleTouchEnd = () => {
|
||||
// if(timer_touch) {
|
||||
// clearTimeout(timer_touch)
|
||||
// timer_touch = undefined
|
||||
// }
|
||||
|
||||
}
|
||||
// }
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div ref="divRef" @dragstart="onDs" :draggable="isDraggable">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
// import Sortable from 'sortablejs'
|
||||
|
||||
const props = defineProps<{
|
||||
isDraggable: boolean
|
||||
}>()
|
||||
props
|
||||
const emit = defineEmits<{
|
||||
onDragStart: [e: DragEvent]
|
||||
}>()
|
||||
|
||||
const divRef = ref<HTMLDivElement>()
|
||||
|
||||
const onDs = (e: DragEvent) => {
|
||||
emit('onDragStart', e)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
divRef?.value?.addEventListener('dragstart', function (ev) {
|
||||
var img = new Image();
|
||||
img.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath /%3E%3C/svg%3E";
|
||||
ev?.dataTransfer?.setDragImage(img, 0, 0);
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -16,6 +16,13 @@ import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
||||
import config from '@/config'
|
||||
import useDataBus from '@/hooks/useDataBus'
|
||||
|
||||
const props = defineProps({
|
||||
disable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const dataBus = useDataBus()
|
||||
|
||||
const { uploadSizeLimit } = config
|
||||
@@ -61,10 +68,25 @@ const removeDirectory = async (files: File[]) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
const check = (event: DragEvent) => {
|
||||
return (
|
||||
[
|
||||
...(event.dataTransfer?.types?.filter(v=>v === 'Files') ?? []),
|
||||
...(dataBus.get('dragData_vFiles') ?? []),
|
||||
...(dataBus.get('dragData_vDirectory') ?? [])
|
||||
].length !== 0
|
||||
)
|
||||
}
|
||||
|
||||
const handleDragOver = async (event: DragEvent) => {
|
||||
showMask.value += 1
|
||||
if (props.disable || check(event) === false) {
|
||||
return
|
||||
}
|
||||
event.preventDefault()
|
||||
if (showMask.value === 1) {
|
||||
return
|
||||
}
|
||||
showMask.value = 1
|
||||
}
|
||||
|
||||
const handleDragLeave = async () => {
|
||||
@@ -72,6 +94,9 @@ const handleDragLeave = async () => {
|
||||
}
|
||||
|
||||
const handleDrop = async (event: DragEvent) => {
|
||||
if (props.disable || check(event) === false) {
|
||||
return
|
||||
}
|
||||
showMask.value = 0
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
|
||||
@@ -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 { 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>
|
||||
@@ -1,83 +1,102 @@
|
||||
<template>
|
||||
<miao-mask v-model:show="showMask">
|
||||
<n-card class="popup-card" :title="popupConfig?.title" size="medium">
|
||||
{{ popupConfig?.content }}
|
||||
<n-input class="popup-input" v-model:value="inputValue" type="text" v-bind="popupConfig?.inputProps"
|
||||
v-if="popupConfig?.inputProps" />
|
||||
<div class="popup-button-container">
|
||||
<n-button class="popup-button-container-button" v-for="option in popupConfig?.options" :key="option.label"
|
||||
:type="option.type" @click="_resolve && _resolve(option.key)">{{ option.label }}</n-button>
|
||||
</div>
|
||||
</n-card>
|
||||
</miao-mask>
|
||||
<miao-mask v-model:show="showMask">
|
||||
<n-card class="popup-card" :title="popupConfig?.title" size="medium">
|
||||
{{ popupConfig?.content }}
|
||||
<n-input
|
||||
class="popup-input"
|
||||
v-model:value="inputValue"
|
||||
type="text"
|
||||
v-bind="popupConfig?.inputProps"
|
||||
passively-activated
|
||||
autofocus
|
||||
v-if="popupConfig?.inputProps" />
|
||||
<div class="popup-button-container">
|
||||
<n-button
|
||||
class="popup-button-container-button"
|
||||
v-for="option in popupConfig?.options"
|
||||
:key="option.label"
|
||||
:type="option.type"
|
||||
@click="_resolve && _resolve(option.key)">
|
||||
{{ option.label }}
|
||||
</n-button>
|
||||
</div>
|
||||
</n-card>
|
||||
</miao-mask>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick } from "vue";
|
||||
import { NCard, NInput, NButton } from "naive-ui";
|
||||
import miaoMask from "./miaoMask.vue";
|
||||
import { InputProps } from "naive-ui";
|
||||
import { ref, nextTick } from 'vue'
|
||||
import { NCard, NInput, NButton } from 'naive-ui'
|
||||
import miaoMask from './miaoMask.vue'
|
||||
import { InputProps } from 'naive-ui'
|
||||
|
||||
const showMask = ref(false);
|
||||
const inputValue = ref<string>("");
|
||||
const showMask = ref(false)
|
||||
const inputValue = ref<string>('')
|
||||
const _resolve = ref()
|
||||
|
||||
type popupConfigType = {
|
||||
title: string
|
||||
content?: string
|
||||
inputValue?: string,
|
||||
inputProps?: InputProps
|
||||
options: {
|
||||
label: string
|
||||
key: unknown
|
||||
type: 'default' | 'tertiary' | 'primary' | 'success' | 'info' | 'warning' | 'error'
|
||||
}[]
|
||||
title: string
|
||||
content?: string
|
||||
inputValue?: string
|
||||
inputProps?: InputProps
|
||||
options: {
|
||||
label: string
|
||||
key: unknown
|
||||
type:
|
||||
| 'default'
|
||||
| 'tertiary'
|
||||
| 'primary'
|
||||
| 'success'
|
||||
| 'info'
|
||||
| 'warning'
|
||||
| 'error'
|
||||
}[]
|
||||
}
|
||||
|
||||
const popupConfig = ref<popupConfigType>()
|
||||
|
||||
const popup = async (config: popupConfigType) => {
|
||||
popupConfig.value = config
|
||||
inputValue.value = config.inputValue ?? ''
|
||||
showMask.value = true
|
||||
const key = await new Promise((resolve: (key: unknown) => unknown) => {
|
||||
_resolve.value = resolve
|
||||
})
|
||||
const text = inputValue.value
|
||||
showMask.value = false;
|
||||
nextTick(() => {
|
||||
inputValue.value = ''
|
||||
_resolve.value = undefined
|
||||
})
|
||||
return {
|
||||
text,
|
||||
key
|
||||
};
|
||||
};
|
||||
popupConfig.value = config
|
||||
inputValue.value = config.inputValue ?? ''
|
||||
showMask.value = true
|
||||
const key = await new Promise((resolve: (key: unknown) => unknown) => {
|
||||
_resolve.value = resolve
|
||||
})
|
||||
const text = inputValue.value
|
||||
showMask.value = false
|
||||
nextTick(() => {
|
||||
inputValue.value = ''
|
||||
_resolve.value = undefined
|
||||
})
|
||||
return {
|
||||
text,
|
||||
key
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ popup });
|
||||
defineExpose({ popup })
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.popup-card {
|
||||
width: 80%;
|
||||
width: 80%;
|
||||
|
||||
.popup-input {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.popup-button-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.popup-button-container-button {
|
||||
margin-top: 3px;
|
||||
&:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.popup-input {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.popup-button-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.popup-button-container-button {
|
||||
margin-top: 3px;
|
||||
&:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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;
|
||||
@@ -1,4 +1,4 @@
|
||||
const idList: number[] = [];
|
||||
const idList: number[] = []
|
||||
|
||||
/**
|
||||
* 生成一个唯一的id
|
||||
@@ -6,11 +6,11 @@ const idList: number[] = [];
|
||||
* @returns {number}
|
||||
*/
|
||||
export default function generateId(length?: number) {
|
||||
length || (length = 16);
|
||||
let id;
|
||||
while (!id || idList.includes(id)) {
|
||||
id = Math.ceil(Math.random() * 10 ** 16);
|
||||
}
|
||||
idList.push(id)
|
||||
length || (length = 16)
|
||||
let id
|
||||
while (!id || idList.includes(id)) {
|
||||
id = Math.ceil(Math.random() * 10 ** 16)
|
||||
}
|
||||
idList.push(id)
|
||||
return id
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { alertTipType } from "@/types/type";
|
||||
import initPlugin from "./init/initPlugin";
|
||||
|
||||
export default async function init(globalAlertTip: alertTipType) {
|
||||
await initPlugin(globalAlertTip)
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
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", { eager: true });
|
||||
const pluginCenter = usePluginCenter();
|
||||
const promiseArray = [];
|
||||
for (let pluginConfig of Object.values(modulesFiles)) {
|
||||
promiseArray.push(
|
||||
new Promise(async resolve => {
|
||||
const _config = pluginConfig as {
|
||||
default: registerComponentOption | Plugin;
|
||||
type: PluginExportType;
|
||||
key?: string;
|
||||
};
|
||||
const { type, key } = _config;
|
||||
if (type === PluginExportType.component) {
|
||||
resolve(pluginCenter.registerComponent(_config.default as registerComponentOption));
|
||||
} else if (type === PluginExportType.default) {
|
||||
resolve(pluginCenter.register(key as string, _config.default as Plugin));
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
await Promise.all(promiseArray);
|
||||
};
|
||||
|
||||
export default initPlugin;
|
||||
+60
-43
@@ -1,47 +1,64 @@
|
||||
import { NIcon } from 'naive-ui'
|
||||
import { h } from 'vue'
|
||||
|
||||
export const filePicker = (() => {
|
||||
let _resolve: ((files: File[]) => void) | undefined;
|
||||
return (option?: { accept?: "string"; multiple: boolean }) => {
|
||||
if (_resolve) {
|
||||
_resolve([]);
|
||||
_resolve = undefined;
|
||||
}
|
||||
return new Promise<File[]>(resolve => {
|
||||
const inpEle = document.createElement("input");
|
||||
inpEle.id = `__file_${Math.ceil(Math.random() * 100000000)}`;
|
||||
inpEle.type = "file";
|
||||
inpEle.style.display = "none";
|
||||
_resolve = resolve;
|
||||
// 文件类型限制
|
||||
// inpEle.accept="image/*"
|
||||
option?.accept && (inpEle.accept = option?.accept);
|
||||
// 多选限制
|
||||
option?.multiple && (inpEle.multiple = option?.multiple);
|
||||
// inpEle.addEventListener("change", event => fn.call(inpEle, event, inpEle.files), { once: true });
|
||||
inpEle.addEventListener(
|
||||
"change",
|
||||
() => {
|
||||
if (!inpEle.files) {
|
||||
return;
|
||||
}
|
||||
const files: File[] = [];
|
||||
let i = 0;
|
||||
while (i < inpEle.files?.length) {
|
||||
const _file = inpEle?.files?.item(i);
|
||||
if (_file !== null) {
|
||||
files.push(_file);
|
||||
}
|
||||
i += 1;
|
||||
}
|
||||
resolve(files);
|
||||
let _resolve: ((files: File[]) => void) | undefined
|
||||
return (option?: { accept?: 'string'; multiple: boolean }) => {
|
||||
if (_resolve) {
|
||||
_resolve([])
|
||||
_resolve = undefined
|
||||
}
|
||||
return new Promise<File[]>((resolve) => {
|
||||
const inpEle = document.createElement('input')
|
||||
inpEle.id = `__file_${Math.ceil(Math.random() * 100000000)}`
|
||||
inpEle.type = 'file'
|
||||
inpEle.style.display = 'none'
|
||||
_resolve = resolve
|
||||
// 文件类型限制
|
||||
// inpEle.accept="image/*"
|
||||
option?.accept && (inpEle.accept = option?.accept)
|
||||
// 多选限制
|
||||
option?.multiple && (inpEle.multiple = option?.multiple)
|
||||
// inpEle.addEventListener("change", event => fn.call(inpEle, event, inpEle.files), { once: true });
|
||||
inpEle.addEventListener(
|
||||
'change',
|
||||
() => {
|
||||
if (!inpEle.files) {
|
||||
return
|
||||
}
|
||||
const files: File[] = []
|
||||
let i = 0
|
||||
while (i < inpEle.files?.length) {
|
||||
const _file = inpEle?.files?.item(i)
|
||||
if (_file !== null) {
|
||||
files.push(_file)
|
||||
}
|
||||
i += 1
|
||||
}
|
||||
resolve(files)
|
||||
_resolve = undefined
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
inpEle.click();
|
||||
});
|
||||
};
|
||||
})();
|
||||
},
|
||||
{ once: true }
|
||||
)
|
||||
inpEle.click()
|
||||
})
|
||||
}
|
||||
})()
|
||||
|
||||
export const renderIcon = (icon: any) => {
|
||||
return () => {
|
||||
return h(NIcon, null, {
|
||||
default: () => h(icon)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export const sleep = async (timeout: number) => {
|
||||
await new Promise(_=>setTimeout(_, timeout))
|
||||
}
|
||||
|
||||
export default {
|
||||
filePicker
|
||||
};
|
||||
filePicker,
|
||||
renderIcon,
|
||||
sleep
|
||||
}
|
||||
@@ -17,6 +17,10 @@ export default function useDataBus() {
|
||||
const value = dataStorage[key];
|
||||
dataStorage[key] = undefined;
|
||||
return value;
|
||||
},
|
||||
get(key: string | number) {
|
||||
const value = dataStorage[key];
|
||||
return value;
|
||||
}
|
||||
};
|
||||
}
|
||||
+254
-246
@@ -1,266 +1,274 @@
|
||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
||||
import VirtualDirectory, { VirtualFile } from "@/class/VirtualDirectory";
|
||||
import {
|
||||
getOption,
|
||||
getResponse,
|
||||
miaoFetchConfig,
|
||||
deleteOption,
|
||||
uploadOption,
|
||||
queryOption,
|
||||
renameOption,
|
||||
cutOption,
|
||||
mkdirOption
|
||||
} from '@/types/fetch'
|
||||
import Config from '@/config'
|
||||
import axios, { AxiosRequestConfig } from 'axios'
|
||||
getOption,
|
||||
getResponse,
|
||||
miaoFetchConfig,
|
||||
deleteOption,
|
||||
uploadOption,
|
||||
queryOption,
|
||||
renameOption,
|
||||
cutOption,
|
||||
mkdirOption,
|
||||
getFileOption
|
||||
} from "@/types/fetch";
|
||||
import Config from "@/config";
|
||||
import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
|
||||
|
||||
export const useMiaoFetch = (option?: miaoFetchConfig) => {
|
||||
const retry = option?.retry ?? 0
|
||||
const controller = new AbortController()
|
||||
let flag = true
|
||||
return {
|
||||
miaoFetch: async (config: AxiosRequestConfig<any>) => {
|
||||
let counter = 0
|
||||
let response: any
|
||||
let errList = []
|
||||
while (flag && counter <= retry) {
|
||||
try {
|
||||
response = await axios({
|
||||
...config,
|
||||
signal: controller.signal
|
||||
})
|
||||
return response
|
||||
} catch (_e) {
|
||||
errList.push(_e)
|
||||
counter += 1
|
||||
}
|
||||
}
|
||||
throw errList
|
||||
},
|
||||
/**
|
||||
* 强制终止miaoFetch
|
||||
*/
|
||||
abortMiaoFetch: () => {
|
||||
flag = false
|
||||
controller.abort()
|
||||
}
|
||||
}
|
||||
}
|
||||
const retry = option?.retry ?? 0;
|
||||
const controller = new AbortController();
|
||||
let flag = true;
|
||||
return {
|
||||
miaoFetch: async (config: AxiosRequestConfig<any>): Promise<AxiosResponse<any, any>> => {
|
||||
let counter = 0;
|
||||
let response: any;
|
||||
let errList = [];
|
||||
while (flag && counter <= retry) {
|
||||
try {
|
||||
response = await axios({
|
||||
...config,
|
||||
signal: controller.signal
|
||||
});
|
||||
return response;
|
||||
} catch (_e) {
|
||||
errList.push(_e);
|
||||
counter += 1;
|
||||
}
|
||||
}
|
||||
throw errList;
|
||||
},
|
||||
/**
|
||||
* 强制终止miaoFetch
|
||||
*/
|
||||
abortMiaoFetch: () => {
|
||||
flag = false;
|
||||
controller.abort();
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const miaoFetchApi = {
|
||||
/**
|
||||
* 获取对应文件夹下的数据
|
||||
*/
|
||||
async get(
|
||||
vDirectory: VirtualDirectory,
|
||||
option?: getOption
|
||||
): Promise<getResponse> {
|
||||
const { baseUrl, api } = Config
|
||||
const url = `${baseUrl}${api.get}${vDirectory.path}`
|
||||
const retry = option?.retry ?? 0
|
||||
/**
|
||||
* 获取对应文件夹下的数据
|
||||
*/
|
||||
async get(vDirectory: VirtualDirectory, option?: getOption): Promise<getResponse> {
|
||||
const { baseUrl, api } = Config;
|
||||
const url = `${baseUrl}${api.get}${vDirectory.path}`;
|
||||
const retry = option?.retry ?? 0;
|
||||
|
||||
const { miaoFetch } = useMiaoFetch({
|
||||
retry
|
||||
})
|
||||
const response = await miaoFetch({
|
||||
url
|
||||
})
|
||||
return response.data
|
||||
},
|
||||
const { miaoFetch } = useMiaoFetch({
|
||||
retry
|
||||
});
|
||||
const response = await miaoFetch({
|
||||
url
|
||||
});
|
||||
return response.data;
|
||||
},
|
||||
|
||||
/**
|
||||
* 上传单个文件到对应文件夹, 后续要将data类型改成buffer以支持分片上传
|
||||
* 正常上传文件请使用uploadQueue
|
||||
*/
|
||||
upload(data: File, targetVDir: VirtualDirectory, option?: uploadOption) {
|
||||
const { baseUrl, api } = Config
|
||||
const url = `${baseUrl}${api.upload}${targetVDir.path}`
|
||||
const retry = option?.retry ?? 0
|
||||
const { miaoFetch, abortMiaoFetch } = useMiaoFetch({
|
||||
retry
|
||||
})
|
||||
const sizeTotal = data.size
|
||||
/**
|
||||
* 获取对应文件下的数据
|
||||
*/
|
||||
getFile(vFile: VirtualFile, option?: getFileOption) {
|
||||
// const { baseUrl, api } = Config
|
||||
const url = vFile.url;
|
||||
const retry = option?.retry ?? 0;
|
||||
const axiosOption = option?.axiosOption ?? {};
|
||||
|
||||
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)
|
||||
// 必须这样传，不然中文乱码
|
||||
formData.append('fileName', data.name)
|
||||
formData.append('operateType', opType)
|
||||
const opType = option?.type ?? "write";
|
||||
|
||||
return {
|
||||
abort: () => abortMiaoFetch(),
|
||||
response: new Promise<{
|
||||
message: 'success' | 'failed'
|
||||
error?: string
|
||||
}>(async (resolve) => {
|
||||
const response = await miaoFetch({
|
||||
url,
|
||||
method: 'post',
|
||||
data: formData,
|
||||
onUploadProgress(progressEvent) {
|
||||
option &&
|
||||
option.onProcess &&
|
||||
option.onProcess(progressEvent.loaded / sizeTotal)
|
||||
}
|
||||
})
|
||||
resolve(response.data)
|
||||
})
|
||||
}
|
||||
},
|
||||
const formData = new FormData();
|
||||
|
||||
/**
|
||||
* 在目标文件夹下创建新的文件夹
|
||||
*/
|
||||
mkdir(
|
||||
targetVDir: VirtualDirectory,
|
||||
newFolderName: string,
|
||||
option?: mkdirOption
|
||||
) {
|
||||
const { baseUrl, api } = Config
|
||||
const url = `${baseUrl}${api.mkdir}${targetVDir.path}`
|
||||
const { miaoFetch } = useMiaoFetch({
|
||||
retry: option?.retry ?? 0
|
||||
})
|
||||
formData.append("file", data);
|
||||
// 必须这样传，不然中文乱码
|
||||
formData.append("fileName", data.name);
|
||||
formData.append("operateType", opType);
|
||||
|
||||
return new Promise<{
|
||||
message: 'success' | 'failed'
|
||||
error?: string
|
||||
}>(async (resolve) => {
|
||||
const response = await miaoFetch({
|
||||
url,
|
||||
method: 'post',
|
||||
data: {
|
||||
folderName: newFolderName
|
||||
}
|
||||
})
|
||||
resolve(response.data)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 在目标文件夹下创建新的空文件，实际上是通过upload空文件实现
|
||||
*/
|
||||
mkFile(
|
||||
targetVDir: VirtualDirectory,
|
||||
newFileName: string,
|
||||
option?: uploadOption
|
||||
) {
|
||||
const emptyBlob = new Blob([])
|
||||
const emptyFile = new File([emptyBlob], newFileName, {
|
||||
type: 'text/plain'
|
||||
})
|
||||
return this.upload(emptyFile, targetVDir, option)
|
||||
},
|
||||
return {
|
||||
abort: () => abortMiaoFetch(),
|
||||
response: new Promise<{
|
||||
message: "success" | "failed";
|
||||
error?: string;
|
||||
}>(async resolve => {
|
||||
const response = await miaoFetch({
|
||||
url,
|
||||
method: "post",
|
||||
data: formData,
|
||||
onUploadProgress(progressEvent) {
|
||||
option && option.onProcess && option.onProcess(progressEvent.loaded / sizeTotal);
|
||||
}
|
||||
});
|
||||
resolve(response.data);
|
||||
})
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除对应的文件或文件夹，若为文件夹会递归删除
|
||||
*/
|
||||
delete(target: VirtualFile | VirtualDirectory, option?: deleteOption) {
|
||||
const { baseUrl, api } = Config
|
||||
const url = `${baseUrl}${api.delete}${target.path}`
|
||||
const retry = option?.retry ?? 0
|
||||
const { miaoFetch } = useMiaoFetch({
|
||||
retry
|
||||
})
|
||||
/**
|
||||
* 在目标文件夹下创建新的文件夹
|
||||
*/
|
||||
mkdir(targetVDir: VirtualDirectory, newFolderName: string, option?: mkdirOption) {
|
||||
const { baseUrl, api } = Config;
|
||||
const url = `${baseUrl}${api.mkdir}${targetVDir.path}`;
|
||||
const { miaoFetch } = useMiaoFetch({
|
||||
retry: option?.retry ?? 0
|
||||
});
|
||||
|
||||
return {
|
||||
response: new Promise<{
|
||||
eventId: number
|
||||
}>(async (resolve) => {
|
||||
const response = await miaoFetch({
|
||||
url,
|
||||
method: 'post'
|
||||
})
|
||||
resolve(response.data)
|
||||
})
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 重命名对应的文件或文件夹
|
||||
*/
|
||||
rename(
|
||||
target: VirtualFile | VirtualDirectory,
|
||||
newName: string,
|
||||
option?: renameOption
|
||||
) {
|
||||
const { baseUrl, api } = Config
|
||||
const url = `${baseUrl}${api.rename}${target.path}`
|
||||
const retry = option?.retry ?? 0
|
||||
const { miaoFetch } = useMiaoFetch({
|
||||
retry
|
||||
})
|
||||
return new Promise<{
|
||||
message: "success" | "failed";
|
||||
error?: string;
|
||||
}>(async resolve => {
|
||||
const response = await miaoFetch({
|
||||
url,
|
||||
method: "post",
|
||||
data: {
|
||||
folderName: newFolderName
|
||||
}
|
||||
});
|
||||
resolve(response.data);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 在目标文件夹下创建新的空文件，实际上是通过upload空文件实现
|
||||
*/
|
||||
mkFile(targetVDir: VirtualDirectory, newFileName: string, option?: uploadOption) {
|
||||
const emptyBlob = new Blob([]);
|
||||
const emptyFile = new File([emptyBlob], newFileName, {
|
||||
type: "text/plain"
|
||||
});
|
||||
return this.upload(emptyFile, targetVDir, option);
|
||||
},
|
||||
|
||||
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)
|
||||
})
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 删除对应的文件或文件夹，若为文件夹会递归删除
|
||||
*/
|
||||
delete(target: VirtualFile | VirtualDirectory, option?: deleteOption) {
|
||||
const { baseUrl, api } = Config;
|
||||
const url = `${baseUrl}${api.delete}${target.path}`;
|
||||
const retry = option?.retry ?? 0;
|
||||
const { miaoFetch } = useMiaoFetch({
|
||||
retry
|
||||
});
|
||||
|
||||
/**
|
||||
* 查询服务端操作事件的进展
|
||||
*/
|
||||
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)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
response: new Promise<{
|
||||
eventId: number;
|
||||
}>(async resolve => {
|
||||
const response = await miaoFetch({
|
||||
url,
|
||||
method: "post"
|
||||
});
|
||||
resolve(response.data);
|
||||
})
|
||||
};
|
||||
},
|
||||
/**
|
||||
* 重命名对应的文件或文件夹
|
||||
*/
|
||||
rename(target: VirtualFile | VirtualDirectory, newName: string, option?: renameOption) {
|
||||
const { baseUrl, api } = Config;
|
||||
const url = `${baseUrl}${api.rename}${target.path}`;
|
||||
const retry = option?.retry ?? 0;
|
||||
const { miaoFetch } = useMiaoFetch({
|
||||
retry
|
||||
});
|
||||
|
||||
return {
|
||||
response: new Promise<{
|
||||
eventId: number;
|
||||
}>(async resolve => {
|
||||
const response = await miaoFetch({
|
||||
url,
|
||||
method: "post",
|
||||
data: { newName }
|
||||
});
|
||||
resolve(response.data);
|
||||
})
|
||||
};
|
||||
},
|
||||
/**
|
||||
* 剪切文件或文件夹
|
||||
*/
|
||||
cut(target: VirtualFile | VirtualDirectory, to: VirtualDirectory, option?: cutOption) {
|
||||
const newPath = to.path;
|
||||
const { baseUrl, api } = Config;
|
||||
const url = `${baseUrl}${api.cut}${target.path}`;
|
||||
const retry = option?.retry ?? 0;
|
||||
const { miaoFetch } = useMiaoFetch({
|
||||
retry
|
||||
});
|
||||
return {
|
||||
response: new Promise<{
|
||||
eventId: number;
|
||||
}>(async resolve => {
|
||||
const response = await miaoFetch({
|
||||
url,
|
||||
method: "post",
|
||||
data: { newPath }
|
||||
});
|
||||
resolve(response.data);
|
||||
})
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* 查询服务端操作事件的进展
|
||||
*/
|
||||
query(eventId: number, option?: queryOption) {
|
||||
const { baseUrl, api } = Config;
|
||||
const url = `${baseUrl}${api.query}`;
|
||||
const retry = option?.retry ?? 0;
|
||||
const { miaoFetch } = useMiaoFetch({
|
||||
retry
|
||||
});
|
||||
return {
|
||||
response: new Promise<{
|
||||
status: "process" | "success" | "failed";
|
||||
error?: unknown;
|
||||
}>(async resolve => {
|
||||
const response = await miaoFetch({
|
||||
url,
|
||||
method: "get",
|
||||
params: {
|
||||
id: eventId
|
||||
}
|
||||
});
|
||||
resolve(response.data);
|
||||
})
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
export default function useMiaoFetchApi() {
|
||||
return miaoFetchApi
|
||||
return miaoFetchApi;
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
@@ -1,11 +1,12 @@
|
||||
import VirtualPage from "@/class/VirtualPage"
|
||||
import { VirtualPages } from "@/class/VirtualPage"
|
||||
import { Reactive, reactive } from "vue"
|
||||
|
||||
let views: Reactive<VirtualPage[]>
|
||||
let views: Reactive<VirtualPages>
|
||||
|
||||
export default function useViretualPages(){
|
||||
export default function useVirtualPages(){
|
||||
if(views === undefined) {
|
||||
views = reactive<VirtualPage[]>([])
|
||||
// views = reactive<VirtualPage[]>([])
|
||||
views = reactive(new VirtualPages())
|
||||
}
|
||||
return views
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import 'drag-drop-touch'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
@@ -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
|
||||
@@ -0,0 +1,29 @@
|
||||
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,
|
||||
priority: -1
|
||||
};
|
||||
|
||||
export default pluginConfig;
|
||||
|
||||
export const type = PluginExportType.default;
|
||||
|
||||
export const key = 'miaoCopy';
|
||||
@@ -0,0 +1,23 @@
|
||||
import { Plugin, PluginGroup } from "@/class/PluginCenter";
|
||||
import fullScreen from "./fullScreen";
|
||||
import { ExpandOutline } from "@vicons/ionicons5";
|
||||
import { PluginExportType } from "@/types/type";
|
||||
import { shallowRef } from "vue";
|
||||
|
||||
const pluginConfig: Plugin = {
|
||||
name: "全屏",
|
||||
icon: shallowRef(ExpandOutline),
|
||||
filter: () => {
|
||||
return true;
|
||||
},
|
||||
disable: false,
|
||||
group: [PluginGroup.mainMenu],
|
||||
func: fullScreen,
|
||||
priority: -1
|
||||
};
|
||||
|
||||
export default pluginConfig;
|
||||
|
||||
export const type = PluginExportType.default;
|
||||
|
||||
export const key = "fullScreen";
|
||||
@@ -0,0 +1,4 @@
|
||||
const fullScreen = () => {
|
||||
document.body.requestFullscreen()
|
||||
}
|
||||
export default fullScreen
|
||||
@@ -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
|
||||
@@ -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>
|
||||
@@ -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
|
||||
@@ -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 })
|
||||
})
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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)
|
||||
}
|
||||
@@ -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>
|
||||
+74
-86
@@ -1,32 +1,28 @@
|
||||
<template>
|
||||
<div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
|
||||
<miaoContextMenu :options="dropDownOptions" :touch-time-out="500" @select="handleDropdownSelect">
|
||||
<div class="item-main" :class="props.selected ? 'item-main-selected' : ''" ref="mainRef">
|
||||
<miao-draggable-div class="miao-item" :isDraggable="!draggable" ref="itemRef" @on-drag-start="handleDragStart">
|
||||
<miaoContextMenu :options="dropDownOptions ?? []" :touch-time-out="500" @select="handleDropdownSelect">
|
||||
<div class="item-main" :class="selected ? 'item-main-selected' : ''" ref="mainRef">
|
||||
<div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
|
||||
<Icon class="item-main-icon" v-show="clientWidth > 250"></Icon>
|
||||
<div class="item-main-info">
|
||||
<div class="item-main-info-name">
|
||||
<Icon class="item-main-info-name-icon" v-show="clientWidth <= 250"></Icon>
|
||||
<n-ellipsis style="max-width: 140px;">{{ name }}</n-ellipsis>
|
||||
<Icon class="item-main-info-name-icon" v-if="clientWidth <= 250"></Icon>
|
||||
<n-ellipsis :style="{ maxWidth: clientWidth > 250 ? '80%' : '75%' }">{{ name }}</n-ellipsis>
|
||||
</div>
|
||||
<div class="item-main-info-date" v-if="time">
|
||||
{{ time }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 菜单现在通过右键/长按呼出 -->
|
||||
<!-- <n-dropdown trigger="click" :options="dropDownOptions" @select="handleDropdownSelect">
|
||||
<div class="item-main-option" @click="(e) => e.stopPropagation()">
|
||||
<EllipsisVertical class="item-main-option-icon" />
|
||||
</div>
|
||||
</n-dropdown> -->
|
||||
<miao-draggable-div class="item-main-dragBtn" :isDraggable="draggable">
|
||||
<ReorderFourOutline></ReorderFourOutline>
|
||||
</miao-draggable-div>
|
||||
</div>
|
||||
</miaoContextMenu>
|
||||
</div>
|
||||
</miao-draggable-div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
||||
import miaoContextMenu from '../miaoContextMenu.vue'
|
||||
import miaoContextMenu from '@/components/miaoContextMenu.vue'
|
||||
import {
|
||||
DocumentText,
|
||||
FileTray,
|
||||
@@ -37,39 +33,56 @@ import {
|
||||
LogoJavascript,
|
||||
LogoVue,
|
||||
PlayCircle,
|
||||
Disc
|
||||
Disc,
|
||||
ReorderFourOutline,
|
||||
} from '@vicons/ionicons5'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import dateFormatter from '@/hooks/dateFormatter'
|
||||
import { NEllipsis } from 'naive-ui'
|
||||
import { DropdownOption } from 'naive-ui/es/dropdown';
|
||||
import miaoDraggableDiv from '@/components/miaoDraggableDiv.vue'
|
||||
// import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
||||
|
||||
// const miaoFetchApi = useMiaoFetchApi()
|
||||
|
||||
const props = defineProps<{
|
||||
item: VirtualDirectory | VirtualFile
|
||||
item: {
|
||||
name: string,
|
||||
type: 'directory' | 'file'
|
||||
stats: {
|
||||
mtimeMs: number
|
||||
}
|
||||
}
|
||||
name?: string
|
||||
color: string
|
||||
selected: boolean
|
||||
dropDownOptions?: DropdownOption[]
|
||||
selected?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
download: []
|
||||
delete: []
|
||||
rename: []
|
||||
dragStart: [event: DragEvent, item: VirtualDirectory | VirtualFile]
|
||||
dragStart: [e: DragEvent]
|
||||
onSelected: []
|
||||
plugin: [plugin: string]
|
||||
}>()
|
||||
|
||||
const itemType = ref<'file' | 'directory'>(props.item.type)
|
||||
|
||||
const mainRef = ref<HTMLDivElement>()
|
||||
|
||||
const draggable = ref(true)
|
||||
|
||||
// 使用ResizeObserver实现
|
||||
const clientWidth = ref<number>(666)
|
||||
|
||||
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(() => {
|
||||
return dateFormatter(
|
||||
new Date(props.item.stats.mtimeMs),
|
||||
@@ -77,50 +90,7 @@ 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) => {
|
||||
if (key === 'rename') {
|
||||
emit('rename')
|
||||
@@ -130,6 +100,9 @@ const handleDropdownSelect = (key: string) => {
|
||||
emit('delete')
|
||||
} else if (key === 'select') {
|
||||
emit('onSelected')
|
||||
} else if (key.startsWith('plugin:')) {
|
||||
const plugin = key.split(':')[1]
|
||||
emit('plugin', plugin)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -151,22 +124,22 @@ const Icon = computed(() => {
|
||||
return Disc
|
||||
} else if (
|
||||
[
|
||||
'.xbm',
|
||||
'.tif',
|
||||
'xbm',
|
||||
'tif',
|
||||
'pjp',
|
||||
'.svgz',
|
||||
'svgz',
|
||||
'jpg',
|
||||
'jpeg',
|
||||
'ico',
|
||||
'tiff',
|
||||
'.gif',
|
||||
'gif',
|
||||
'svg',
|
||||
'.jfif',
|
||||
'.webp',
|
||||
'.png',
|
||||
'.bmp',
|
||||
'jfif',
|
||||
'webp',
|
||||
'png',
|
||||
'bmp',
|
||||
'pjpeg',
|
||||
'.avif'
|
||||
'avif'
|
||||
].includes(aft)
|
||||
) {
|
||||
return Image
|
||||
@@ -190,28 +163,28 @@ const Icon = computed(() => {
|
||||
|
||||
const itemRef = ref()
|
||||
|
||||
const handleDragStart = (event: DragEvent) => {
|
||||
emit('dragStart', event, props.item)
|
||||
// dataBus.set('dragData', [props.item])
|
||||
const handleDragStart = (e: DragEvent) => {
|
||||
emit('dragStart', e)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const observer = new ResizeObserver(entries => {
|
||||
for (let entry of entries) {
|
||||
clientWidth.value = entry.contentRect.width;
|
||||
}
|
||||
});
|
||||
if (mainRef.value) {
|
||||
observer.observe(mainRef.value);
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (mainRef.value) {
|
||||
observer.unobserve(mainRef.value);
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.miao-item {
|
||||
cursor: pointer;
|
||||
width: calc(100% - 20px);
|
||||
min-width: 170px;
|
||||
// min-width: 170px;
|
||||
// aspect-ratio: 66/9;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
@@ -229,17 +202,20 @@ onMounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: background-color 0.3s ease;
|
||||
overflow-x: hidden;
|
||||
|
||||
.item-main-front {
|
||||
height: 100%;
|
||||
width: 10px;
|
||||
min-width: 10px;
|
||||
border-radius: 7px 0 0 7px;
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.item-main-icon {
|
||||
min-width: 30px;
|
||||
margin-left: 10px;
|
||||
height: 80%;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
color: #00403e;
|
||||
transition: color 0.15s ease-out;
|
||||
}
|
||||
@@ -247,6 +223,7 @@ onMounted(() => {
|
||||
.item-main-info {
|
||||
margin-left: 10px;
|
||||
height: 100%;
|
||||
width: calc(100% - 10px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -268,6 +245,7 @@ onMounted(() => {
|
||||
&-date {
|
||||
user-select: none;
|
||||
font-size: small;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -305,11 +283,21 @@ onMounted(() => {
|
||||
background-color: #d2d2d2;
|
||||
}
|
||||
}
|
||||
|
||||
.item-main-selected {
|
||||
background-color: rgba(0, 128, 207, 0.32);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 128, 207, 0.64);;
|
||||
background-color: rgba(0, 128, 207, 0.64);
|
||||
;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-main-dragBtn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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
|
||||
@@ -0,0 +1,683 @@
|
||||
<template>
|
||||
<miao-drop-handler
|
||||
@on-virtual-directory="handleDropVDirectory"
|
||||
@on-files="handleDropFiles"
|
||||
@on-virtual-files="handleDropVirtualFiles">
|
||||
<miaoAlertTipProvider ref="miaoAlertTip">
|
||||
<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>
|
||||
</miaoAlertTipProvider>
|
||||
</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/uniq'
|
||||
|
||||
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 miaoAlertTipProvider from '@/components/miaoAlertTipProvider.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()
|
||||
const miaoAlertTip = ref<InstanceType<typeof miaoAlertTipProvider>>()
|
||||
|
||||
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) => {
|
||||
try {
|
||||
// 若没有缓存数据则同步刷新，有缓存数据则异步刷新
|
||||
if (!virtualDirectory.isUpdated) {
|
||||
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
|
||||
} catch(e) {
|
||||
miaoAlertTip.value?.alertTip(`获取文件夹内容出错`, {
|
||||
type: 'error',
|
||||
timeout: 3000
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
@@ -0,0 +1,26 @@
|
||||
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')
|
||||
},
|
||||
priority: 2
|
||||
}
|
||||
|
||||
export default pluginConfig
|
||||
|
||||
|
||||
import { PluginExportType } from '@/types/type'
|
||||
export const type = PluginExportType.component
|
||||
@@ -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/cloneDeep';
|
||||
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>
|
||||
@@ -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
|
||||
@@ -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/uniq'
|
||||
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>
|
||||
@@ -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
|
||||
@@ -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>
|
||||
@@ -0,0 +1,36 @@
|
||||
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("./miaoMusicPlayer.vue")).default,
|
||||
filter: (vDirs, vFiles) => {
|
||||
if (vDirs.length === 0 && vFiles.length === 0) {
|
||||
return true;
|
||||
}
|
||||
if (vDirs.length !== 0) {
|
||||
return false;
|
||||
}
|
||||
if (vFiles.length === 0) {
|
||||
return false;
|
||||
}
|
||||
for (let i of vFiles) {
|
||||
for (let s of ["mp3", "flac", "ogg", "mp4"]) {
|
||||
if (i.name.endsWith(s)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
disable: false,
|
||||
single: true,
|
||||
priority: 5
|
||||
};
|
||||
|
||||
export default pluginConfig;
|
||||
|
||||
export const type = PluginExportType.component;
|
||||
@@ -0,0 +1,49 @@
|
||||
import { createApp, Reactive } from "vue";
|
||||
import aplayerListNew from "../src/components/aplayerListNew.vue";
|
||||
import apType, { audioType } from "../types/ap";
|
||||
|
||||
export type aplayerMiaoOption = {
|
||||
onDragItemStart?: () => void
|
||||
onDragItemEnd?: () => void
|
||||
onPlayVideo?: (element: audioType) => void
|
||||
onSaveCollection?: (audios: audioType[]) => 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;
|
||||
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<miao-drop-handler @on-virtual-files="handleDropVFiles">
|
||||
<miao-alert-tip-provider ref="miaoMessageRef">
|
||||
<div class="miaoMusic-container">
|
||||
<miao-music-main v-if="ap" :ap="ap" v-model:data="data" :updateLocalData="updateLocalData"
|
||||
@new-collection="saveCurrPlayList"></miao-music-main>
|
||||
<miao-mask :show="isAPlayerListShow" style="z-index: 5" @click="() => ap?.list.hide()"></miao-mask>
|
||||
<div ref="aplayer" style="z-index: 10" />
|
||||
<miao-mask :show="isSavingCollection" @click="isSavingCollection = false"></miao-mask>
|
||||
</div>
|
||||
</miao-alert-tip-provider>
|
||||
</miao-drop-handler>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import useAplayerMiao from './hooks/aplayerMiao'
|
||||
import { VirtualFile } from '@/class/VirtualDirectory'
|
||||
import {
|
||||
App,
|
||||
onBeforeMount,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
reactive,
|
||||
ref,
|
||||
toRaw,
|
||||
watch
|
||||
} from 'vue'
|
||||
import './src/APlayer.fix.css'
|
||||
// @ts-ignore
|
||||
import APlayer from 'APlayer'
|
||||
import config from '@/config'
|
||||
import difference from 'lodash/difference'
|
||||
import uniq from 'lodash/uniq'
|
||||
import apType from './types/ap'
|
||||
import miaoDropHandler from '@/components/miaoDropHandler.vue'
|
||||
import miaoAlertTipProvider from '@/components/miaoAlertTipProvider.vue'
|
||||
import usePluginCenter from '@/hooks/usePluginCenter'
|
||||
import VirtualPage from '@/class/VirtualPage'
|
||||
import miaoMask from '@/components/miaoMask.vue'
|
||||
import miaoMusicMain from './src/main.vue'
|
||||
import collectionType from './types/collection'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import localForage from 'localforage'
|
||||
import debounce from 'lodash/debounce'
|
||||
|
||||
const pluginCenter = usePluginCenter()
|
||||
let ap = ref<apType>()
|
||||
let vueApp: App<Element>
|
||||
|
||||
const miaoMessageRef = ref<InstanceType<typeof miaoAlertTipProvider>>()
|
||||
const aplayer = ref<any>(null)
|
||||
const isAPlayerListShow = ref(true)
|
||||
const isSavingCollection = ref(false)
|
||||
|
||||
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
||||
required: true
|
||||
})
|
||||
|
||||
const props = defineProps<{
|
||||
view: VirtualPage
|
||||
}>()
|
||||
|
||||
const data = ref<collectionType[]>()
|
||||
|
||||
watch(
|
||||
data,
|
||||
(_v, oldV) => {
|
||||
updateLocalData(oldV !== undefined)
|
||||
},
|
||||
{
|
||||
deep: 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?.value?.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 saveCurrPlayList = () => {
|
||||
if (ap.value) {
|
||||
data.value?.unshift({
|
||||
id: Math.random(),
|
||||
name: `新建歌单-${new Date()}`,
|
||||
intro: 'none',
|
||||
createTime: new Date(),
|
||||
coverUrl: '',
|
||||
audios: cloneDeep(ap.value.list.audios).map((v, i) => ({ ...v, index: i }))
|
||||
})
|
||||
miaoMessageRef.value?.alertTip('已创建新的歌单', {
|
||||
timeout: 1000,
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const initAPlayerMiao = () => {
|
||||
const aplayerOption = {
|
||||
container: aplayer.value,
|
||||
audio: getMusicList(currentFiles.value),
|
||||
autoplay: true,
|
||||
volume: 1,
|
||||
theme: '#60e8a2',
|
||||
listMaxHeight: '500px'
|
||||
}
|
||||
ap.value = reactive<apType>(new APlayer(aplayerOption))
|
||||
vueApp = useAplayerMiao(ap.value, {
|
||||
onDragItemStart: () => { },
|
||||
onDragItemEnd: () => { },
|
||||
onPlayVideo: (element) => {
|
||||
pluginCenter.usePlugin(
|
||||
'miaoVideoPlayer',
|
||||
[],
|
||||
[
|
||||
currentFiles.value.find(
|
||||
(v) => v.name === element.name
|
||||
) as VirtualFile
|
||||
]
|
||||
)
|
||||
},
|
||||
onSaveCollection: saveCurrPlayList
|
||||
})
|
||||
ap.value.on('listremove', (...args: any) => {
|
||||
const { index } = args[0] as { index: number }
|
||||
const _name = ap?.value?.list.audios[index].name
|
||||
currentFiles.value = currentFiles.value.filter((v) => v.name !== _name)
|
||||
})
|
||||
ap.value.on('play', () => {
|
||||
const name = ap.value?.list.audios[ap.value.list.index].name as string
|
||||
props.view.setTitle(name)
|
||||
})
|
||||
ap.value.on('listshow', () => {
|
||||
isAPlayerListShow.value = true
|
||||
})
|
||||
ap.value.on('listhide', () => {
|
||||
isAPlayerListShow.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const updateLocalData = debounce((log?: boolean) => {
|
||||
log && miaoMessageRef.value?.alertTip(`保存设置成功`, {
|
||||
type: 'success',
|
||||
timeout: 999,
|
||||
})
|
||||
localForage.setItem('miaoMusic-storage-musicCollections', toRaw(data.value))
|
||||
}, 1000, {
|
||||
'leading': false,
|
||||
'trailing': true
|
||||
})
|
||||
const getLocalData = async () => {
|
||||
const _data =
|
||||
(await localForage.getItem('miaoMusic-storage-musicCollections') as collectionType[]) ?? []
|
||||
_data.forEach(v => v.audios.sort((a, b) => a.index - b.index))
|
||||
data.value = _data
|
||||
console.log('data ==>', toRaw(data.value))
|
||||
}
|
||||
onBeforeMount(async () => {
|
||||
await getLocalData()
|
||||
})
|
||||
onMounted(async () => {
|
||||
currentFiles.value = [...currentFiles.value.reverse()]
|
||||
initAPlayerMiao()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
vueApp.unmount()
|
||||
ap?.value?.destroy()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.miaoMusic-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.aplayer {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
width: -webkit-fill-available;
|
||||
|
||||
.aplayer-icon-order,
|
||||
.aplayer-icon-loop {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,730 @@
|
||||
.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: 5px;
|
||||
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;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.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 .35s 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)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<div class="collection-info-container">
|
||||
<div class="collection-info-container-top">
|
||||
<div class="collection-info-container-top-exit" @click="emit('exit')">
|
||||
<ArrowBackOutline></ArrowBackOutline>
|
||||
</div>
|
||||
<div class="collection-info-container-top-title">
|
||||
<span :tooltip="false" v-if="!isEditing">
|
||||
{{ collection.name }}
|
||||
</span>
|
||||
<n-input v-if="isEditing" v-model:value="collection.name"></n-input>
|
||||
</div>
|
||||
|
||||
<div class="collection-info-container-top-delete" v-if="isEditing" @click="
|
||||
clickDeleteCount !== 2
|
||||
? clickDeleteCount++
|
||||
: emit('deleteSelf')
|
||||
">
|
||||
<TrashOutline></TrashOutline>
|
||||
<span>
|
||||
{{
|
||||
clickDeleteCount === 0
|
||||
? `删除`
|
||||
: clickDeleteCount === 1
|
||||
? '确认删除'
|
||||
: '再次确认'
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collection-info-container-controller">
|
||||
<div class="collection-info-container-controller-play" @click="emit('playAll', collection)">
|
||||
<div class="collection-info-container-controller-play-icon">
|
||||
<CaretForwardOutline></CaretForwardOutline>
|
||||
</div>
|
||||
<div class="collection-info-container-controller-play-text">
|
||||
{{ `全部播放` }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="collection-info-container-controller-right">
|
||||
<div class="collection-info-container-controller-edit" @click="isEditing = !isEditing">
|
||||
<component :is="isEditing ? CheckmarkOutline : CreateOutline
|
||||
"></component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NScrollbar>
|
||||
<div class="collection-info-container-audioList">
|
||||
<VueDraggable v-model="collection.audios" :animation="150"
|
||||
handle=".collection-info-container-audioList-item-controller-item-drag" ghostClass="iSDragging"
|
||||
@end="updateAudiosIndex">
|
||||
<div v-for="(audio, index) in collection.audios" class="collection-info-container-audioList-item">
|
||||
<div class="collection-info-container-audioList-item-index">
|
||||
<div>{{ index + 1 }}</div>
|
||||
</div>
|
||||
<div class="collection-info-container-audioList-item-info">
|
||||
<div v-if="!isEditing" class="collection-info-container-audioList-item-info-name">
|
||||
<NEllipsis :tooltip="false">
|
||||
{{ audio.name }}
|
||||
</NEllipsis>
|
||||
</div>
|
||||
<n-input v-model:value="audio.name" v-if="isEditing"></n-input>
|
||||
</div>
|
||||
<div class="collection-info-container-audioList-item-controller">
|
||||
<PlayOutline class="collection-info-container-audioList-item-controller-item"
|
||||
v-if="!isEditing" @click="
|
||||
emit('playAll', collection, index)
|
||||
"></PlayOutline>
|
||||
<TrashOutline class="collection-info-container-audioList-item-controller-item"
|
||||
v-if="isEditing" @click="handleDelete(index)"></TrashOutline>
|
||||
<ReorderFourOutline v-if="isEditing"
|
||||
class="collection-info-container-audioList-item-controller-item collection-info-container-audioList-item-controller-item-drag">
|
||||
</ReorderFourOutline>
|
||||
</div>
|
||||
</div>
|
||||
</VueDraggable>
|
||||
</div>
|
||||
</NScrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NScrollbar, NEllipsis, NInput } from 'naive-ui'
|
||||
import { VueDraggable } from 'vue-draggable-plus'
|
||||
import {
|
||||
ArrowBackOutline,
|
||||
CaretForwardOutline,
|
||||
ReorderFourOutline,
|
||||
PlayOutline,
|
||||
CreateOutline,
|
||||
CheckmarkOutline,
|
||||
TrashOutline
|
||||
} from '@vicons/ionicons5'
|
||||
import collectionType from '../types/collection'
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
collection: collectionType
|
||||
}>()
|
||||
|
||||
const isEditing = ref(false)
|
||||
const clickDeleteCount = ref(0)
|
||||
|
||||
watch(isEditing, (v) => v && (clickDeleteCount.value = 0))
|
||||
|
||||
const handleDelete = (index: number) => {
|
||||
props.collection.audios.splice(index, 1)
|
||||
}
|
||||
|
||||
const updateAudiosIndex = () => {
|
||||
props.collection.audios = props.collection.audios.map((v, i) => ({ ...v, index: i }))
|
||||
}
|
||||
|
||||
const emit = defineEmits<{
|
||||
exit: []
|
||||
deleteSelf: []
|
||||
playAll: [collection: collectionType, index?: number]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$ig: linear-gradient(90deg, #a1ee5e 0%, #00e3ae 100%);
|
||||
|
||||
.collection-info-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&-top {
|
||||
height: 70px;
|
||||
padding: 0 15px;
|
||||
background: $ig;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&-exit {
|
||||
width: 30px;
|
||||
aspect-ratio: 1;
|
||||
color: #063b2a;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
width: 25px;
|
||||
aspect-ratio: 1;
|
||||
transition: width 0.25s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
display: flex;
|
||||
margin-left: 10px;
|
||||
|
||||
&-confirm {
|
||||
margin-left: 10px;
|
||||
width: 32px;
|
||||
// color: #ffffff;
|
||||
}
|
||||
|
||||
span {
|
||||
user-select: none;
|
||||
font-size: larger;
|
||||
}
|
||||
}
|
||||
|
||||
&-delete {
|
||||
display: flex;
|
||||
height: 25px;
|
||||
position: absolute;
|
||||
right: 28px;
|
||||
color: red;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
&>span {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-controller {
|
||||
height: 50px;
|
||||
padding: 0 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&-play {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&>div {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
height: 30px;
|
||||
width: 45px;
|
||||
background: $ig;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
width: 30px;
|
||||
height: 25px;
|
||||
color: aliceblue;
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
user-select: none;
|
||||
margin-left: 10px;
|
||||
font-size: larger;
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
&>div {
|
||||
margin: 0 10px;
|
||||
cursor: pointer;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
color: #002911;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-audioList {
|
||||
flex: 1;
|
||||
color: #002911;
|
||||
padding-bottom: 88px;
|
||||
|
||||
&-item {
|
||||
// padding: 0 20px;
|
||||
padding-right: 7px;
|
||||
display: flex;
|
||||
height: 70px;
|
||||
align-items: center;
|
||||
|
||||
&-index {
|
||||
width: 50px;
|
||||
user-select: none;
|
||||
font-size: 24px;
|
||||
text-align: right;
|
||||
|
||||
&>div {
|
||||
margin: auto;
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
|
||||
&-name {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&-controller {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&-item {
|
||||
width: 30px;
|
||||
cursor: pointer;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.isDragging {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,449 @@
|
||||
<template>
|
||||
<div class="aplayer-list-top">
|
||||
<div @click="loopModeToggle" class="aplayer-list-top-loopMode">
|
||||
<component
|
||||
:is="loopModeMap[loopMode].icon"
|
||||
class="aplayer-list-top-loopMode-icon"></component>
|
||||
<span class="aplayer-list-top-loopMode-name">
|
||||
{{ loopModeMap[loopMode].name }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="aplayer-list-top-buttons">
|
||||
<AddCircleOutline
|
||||
v-if="onSaveCollection"
|
||||
class="aplayer-list-top-buttons-icon"
|
||||
@click="onSaveCollection(ap.list.audios)"></AddCircleOutline>
|
||||
</div>
|
||||
<span></span>
|
||||
</div>
|
||||
<ol
|
||||
:style="{ maxHeight: `calc( ${ap.options.listMaxHeight} - 30px )` }"
|
||||
:class="[
|
||||
!isDragging ? 'miaoMusic-ol-isDragging' : 'miaoMusic-ol-notDragging'
|
||||
]"
|
||||
: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 :min-height="'32px'" auto-height> -->
|
||||
<li
|
||||
v-for="(element, index) in ap.list.audios"
|
||||
: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
|
||||
v-if="isVideo(element)"
|
||||
class="aplayer-list-control-btn aplayer-list-control-btn-hover aplayer-list-control-btn-play"
|
||||
@click.stop="onPlayVideo && onPlayVideo(element)">
|
||||
<VideocamOutline class="aplayer-list-control-btn-svg" />
|
||||
</div>
|
||||
<div
|
||||
class="aplayer-list-control-btn aplayer-list-control-btn-hover aplayer-list-control-btn-play"
|
||||
@click.stop="switchAudio(index)">
|
||||
<component
|
||||
:is="
|
||||
activeAudioIndex == index && !isPaused
|
||||
? PauseOutline
|
||||
: PlayOutline
|
||||
"
|
||||
class="aplayer-list-control-btn-svg"></component>
|
||||
</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,
|
||||
VideocamOutline,
|
||||
PauseOutline,
|
||||
ListCircleOutline,
|
||||
ListOutline,
|
||||
HeadsetOutline,
|
||||
LogoOctocat,
|
||||
AddCircleOutline
|
||||
} from '@vicons/ionicons5'
|
||||
|
||||
import { VueDraggable } from 'vue-draggable-plus'
|
||||
// 与vue-draggable冲突
|
||||
// import miaoLazyDiv from '@/components/miaoLazyDiv.vue';
|
||||
import apType, { audioType } from '../../types/ap'
|
||||
import { aplayerMiaoOption } from '../../hooks/aplayerMiao'
|
||||
|
||||
const props = defineProps<
|
||||
{
|
||||
ap: apType
|
||||
} & aplayerMiaoOption
|
||||
>()
|
||||
|
||||
const apRef = ref(props.ap)
|
||||
|
||||
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)
|
||||
const isPaused = ref(false)
|
||||
|
||||
props.ap.on('play', () => {
|
||||
nextTick(() => {
|
||||
isPaused.value = false
|
||||
})
|
||||
})
|
||||
|
||||
props.ap.on('pause', () => {
|
||||
isPaused.value = true
|
||||
})
|
||||
|
||||
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) {
|
||||
if (props.ap.paused) {
|
||||
props.ap.play()
|
||||
} else {
|
||||
props.ap.pause()
|
||||
}
|
||||
props.ap.paused = props.ap.paused
|
||||
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 isVideo = (element: audioType) => {
|
||||
for (let end of ['mp4']) {
|
||||
if (element.name.endsWith(end)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
const loopModeMap = {
|
||||
0: { name: '列表循环', icon: ListCircleOutline },
|
||||
1: { name: '单曲循环', icon: HeadsetOutline },
|
||||
2: { name: '列表播放', icon: ListOutline },
|
||||
3: { name: '随机播放', icon: LogoOctocat }
|
||||
}
|
||||
|
||||
const loopMode = computed(() => {
|
||||
if (apRef.value.options.order === 'list') {
|
||||
switch (apRef.value.options.loop) {
|
||||
case 'all':
|
||||
return 0
|
||||
case 'one':
|
||||
return 1
|
||||
case 'none':
|
||||
return 2
|
||||
}
|
||||
}
|
||||
return 3
|
||||
})
|
||||
|
||||
const loopModeToggle = () => {
|
||||
const ops = apRef.value.options
|
||||
if (ops.order === 'random') {
|
||||
ops.order = 'list'
|
||||
} else {
|
||||
switch (ops.loop) {
|
||||
case 'all': {
|
||||
ops.loop = 'one'
|
||||
break
|
||||
}
|
||||
case 'one': {
|
||||
ops.loop = 'none'
|
||||
break
|
||||
}
|
||||
case 'none': {
|
||||
ops.loop = 'all'
|
||||
ops.order = 'random'
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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 0.1s ease;
|
||||
}
|
||||
}
|
||||
|
||||
&-btn-hover {
|
||||
.aplayer-list-control-btn-svg {
|
||||
&:hover {
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aplayer-list-top {
|
||||
height: 30px;
|
||||
// width: auto;
|
||||
// max-width: 100%;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
display: flex;
|
||||
justify-items: baseline;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
.aplayer-list-top-loopMode {
|
||||
text-align: center;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
// background-color: #f9f9f9;
|
||||
scale: 1;
|
||||
transition: scale 0.15s ease;
|
||||
&-icon {
|
||||
width: 20px;
|
||||
aspect-ratio: 1;
|
||||
transform: translateY(1px);
|
||||
fill: #000;
|
||||
path {
|
||||
fill: #000 !important;
|
||||
}
|
||||
}
|
||||
&-name {
|
||||
margin-left: 5px;
|
||||
}
|
||||
&:hover {
|
||||
scale: 1.1;
|
||||
}
|
||||
}
|
||||
.aplayer-list-top-buttons {
|
||||
display: inline-flex;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
scale: 1;
|
||||
transition: scale 0.15s ease;
|
||||
&-icon {
|
||||
width: 20px;
|
||||
aspect-ratio: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
&:hover {
|
||||
scale: 1.1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</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 .miaoMusic-ol-isDragging 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>
|
||||
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div class="collection" @click="emit('onenter')">
|
||||
<div class="collection-cover" @click.stop="emit('onPlay')">
|
||||
<img
|
||||
v-if="item.coverUrl"
|
||||
class="collection-cover-img"
|
||||
:src="item.coverUrl" />
|
||||
<div class="collection-cover-play">
|
||||
<Play></Play>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collection-info">
|
||||
<div class="collection-info-name">
|
||||
<span class="collection-info-name-ellipsis">
|
||||
<span>
|
||||
{{ item.name }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="collection-info-stats">
|
||||
<span class="collection-info-stats-time">{{ dateStr }}</span>
|
||||
<span class="collection-info-stats-count">
|
||||
{{ `共${item.audios.length}首` }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import collectionType from '../../types/collection'
|
||||
import dateFormatter from '@/hooks/dateFormatter'
|
||||
import { Play } from '@vicons/ionicons5'
|
||||
|
||||
const props = defineProps<{
|
||||
item: collectionType
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
onPlay: []
|
||||
onenter: []
|
||||
}>()
|
||||
|
||||
const dateStr = computed(() =>
|
||||
dateFormatter(new Date(props.item.createTime), 'yyyy-MM-dd')
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.collection {
|
||||
height: 50px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
||||
0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
transition: height 0.25s ease;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&:not(&:last-child) {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.collection-cover {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
aspect-ratio: 1;
|
||||
background-color: #60e8a2;
|
||||
margin-right: 5px;
|
||||
.collection-cover-play {
|
||||
width: 25px;
|
||||
height: 15px;
|
||||
background-color: #d1d1d1b2;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 3px;
|
||||
svg {
|
||||
height: 15px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.collection-info {
|
||||
position: relative;
|
||||
width: calc(100% - 60px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.collection-info-name {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
&-ellipsis {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
max-width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
span {
|
||||
white-space: nowrap;
|
||||
text-wrap: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
.collection-info-stats {
|
||||
text-wrap: nowrap;
|
||||
span {
|
||||
font-size: smaller;
|
||||
}
|
||||
.collection-info-stats-time {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div class="miaoMusic-main">
|
||||
<NScrollbar>
|
||||
<div class="miaoMusic-main-collectionsList">
|
||||
<div class="miaoMusic-main-collectionsList-title">自建歌单</div>
|
||||
<VueDraggable
|
||||
v-if="collections"
|
||||
v-model="collections"
|
||||
:animation="150"
|
||||
:delay="100"
|
||||
ghostClass="iSDragging">
|
||||
<collection
|
||||
v-for="item in collections"
|
||||
:item="item"
|
||||
@on-play="handleCollectionsPlay(item)"
|
||||
@onenter="handleCollectionEnter(item)"></collection>
|
||||
</VueDraggable>
|
||||
<n-empty
|
||||
description="空空如也~"
|
||||
size="huge"
|
||||
style="margin-top: 200px"
|
||||
v-if="!data || data?.length === 0">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<HandLeftOutline />
|
||||
</n-icon>
|
||||
</template>
|
||||
<template #extra>
|
||||
<n-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="emit('newCollection')">
|
||||
立刻创建
|
||||
</n-button>
|
||||
</template>
|
||||
</n-empty>
|
||||
</div>
|
||||
</NScrollbar>
|
||||
<Transition name="slide-fade">
|
||||
<collectionInfo
|
||||
class="miaoMusic-main-collection"
|
||||
:collection="currCollection"
|
||||
v-if="currCollection"
|
||||
@exit="handleCollectionEnter(undefined)"
|
||||
@delete-self="handleCollectionDelete()"
|
||||
@play-all="handleCollectionsPlay"></collectionInfo>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import apType from '../types/ap'
|
||||
import collection from './components/collection.vue'
|
||||
import collectionInfo from './collectionInfo.vue'
|
||||
import collectionType from '../types/collection'
|
||||
import { VueDraggable } from 'vue-draggable-plus'
|
||||
import { NScrollbar, NEmpty, NButton } from 'naive-ui'
|
||||
import { HandLeftOutline } from '@vicons/ionicons5'
|
||||
|
||||
const props = defineProps<{
|
||||
ap: apType
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
newCollection: []
|
||||
}>()
|
||||
|
||||
const collections = defineModel<collectionType[]>('data')
|
||||
const currCollection = ref<collectionType>()
|
||||
const playCollection = (collection: collectionType, index?: number) => {
|
||||
const ap = props.ap
|
||||
console.log({ collection, ap })
|
||||
// clear有bug
|
||||
while (ap.list.audios.length !== 0) {
|
||||
ap.list.remove(0)
|
||||
}
|
||||
ap.list.add(collection.audios)
|
||||
index && ap.list.switch(index)
|
||||
ap.play()
|
||||
}
|
||||
|
||||
const handleCollectionsPlay = (item: collectionType, index?: number) => {
|
||||
playCollection(item, index)
|
||||
}
|
||||
|
||||
const handleCollectionEnter = (item: collectionType | undefined) => {
|
||||
currCollection.value = item
|
||||
}
|
||||
|
||||
const handleCollectionDelete = () => {
|
||||
collections.value &&
|
||||
collections.value.splice(
|
||||
collections.value.findIndex((v) => v === currCollection.value),
|
||||
1
|
||||
)
|
||||
currCollection.value = undefined
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.miaoMusic-main {
|
||||
position: relative;
|
||||
max-height: 100%;
|
||||
height: 100%;
|
||||
.miaoMusic-main-collectionsList {
|
||||
padding: 15px 20px 88px;
|
||||
&-title {
|
||||
font-size: larger;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 10px;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.slide-fade-enter-active {
|
||||
transition: all 0.15s ease-out;
|
||||
}
|
||||
|
||||
.slide-fade-leave-active {
|
||||
transition: all 0.15s cubic-bezier(1, 0.5, 0.8, 1);
|
||||
}
|
||||
|
||||
.slide-fade-enter-from,
|
||||
.slide-fade-leave-to {
|
||||
transform: translateX(200px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.isDragging {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,45 @@
|
||||
export type audioType = {
|
||||
url: string
|
||||
artist?: string
|
||||
cover?: string
|
||||
name: string
|
||||
theme?: string
|
||||
id?: number
|
||||
index: number
|
||||
}
|
||||
|
||||
type apType = {
|
||||
paused: boolean
|
||||
list: {
|
||||
audios: audioType[]
|
||||
index: number
|
||||
switch: (index: number) => void
|
||||
remove: (index: number) => void
|
||||
add: (audios: audioType[]) => void
|
||||
refreshAudioIndex: () => void
|
||||
hide: () => void
|
||||
clear: () => 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' | 'one' | 'none'
|
||||
order: 'list' | 'random'
|
||||
listMaxHeight: string
|
||||
storageName: 'aplayer-setting'
|
||||
}
|
||||
destroy: () => {}
|
||||
pause: () => void
|
||||
play: () => void
|
||||
}
|
||||
|
||||
export default apType
|
||||
@@ -0,0 +1,14 @@
|
||||
import type { audioType } from "./ap";
|
||||
|
||||
export type collectionItemType = {} & audioType;
|
||||
|
||||
export type collectionType = {
|
||||
id: number;
|
||||
name: string;
|
||||
intro: string;
|
||||
createTime: Date;
|
||||
coverUrl?: string;
|
||||
audios: collectionItemType[];
|
||||
};
|
||||
|
||||
export default collectionType;
|
||||
@@ -0,0 +1,26 @@
|
||||
import { Plugin, PluginGroup } from "@/class/PluginCenter";
|
||||
import { PluginExportType } from "@/types/type";
|
||||
import { shallowRef } from "vue";
|
||||
import Disc from "@vicons/ionicons5/es/Disc";
|
||||
|
||||
const pluginConfig: Plugin = {
|
||||
name: "音乐",
|
||||
icon: shallowRef(Disc),
|
||||
filter: (_, __, views) => {
|
||||
return views.find("miaoMusicPlayer").length === 0;
|
||||
},
|
||||
disable: false,
|
||||
group: [PluginGroup.mainMenu],
|
||||
func(_, __, hooks) {
|
||||
const { getPluginCenter } = hooks;
|
||||
const PluginCenter = getPluginCenter();
|
||||
PluginCenter.usePlugin("miaoMusicPlayer", [], []);
|
||||
},
|
||||
priority: -1
|
||||
};
|
||||
|
||||
export default pluginConfig;
|
||||
|
||||
export const type = PluginExportType.default;
|
||||
|
||||
export const key = "musicPlayer-mainMenu";
|
||||
@@ -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
|
||||
@@ -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>
|
||||
@@ -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
|
||||
@@ -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>
|
||||
@@ -0,0 +1,33 @@
|
||||
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', 'mkv']) {
|
||||
if (i.name.endsWith(s)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
return false
|
||||
},
|
||||
priority: 6
|
||||
}
|
||||
|
||||
export default pluginConfig
|
||||
|
||||
|
||||
import { PluginExportType } from '@/types/type'
|
||||
export const type = PluginExportType.component
|
||||
@@ -0,0 +1,356 @@
|
||||
<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/uniq'
|
||||
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,
|
||||
ignores: [videos.length === 0 ? 'playNext' : undefined].filter(v => v) as string[],
|
||||
lang: 'zh-cn',
|
||||
playbackRate: [0.1, 0.3, 0.5, 0.75, 1, 1.5, 2, 3, 5, 10],
|
||||
texttrack,
|
||||
screenShot: {
|
||||
saveImg: true,
|
||||
quality: 1,
|
||||
type: 'image/png',
|
||||
format: '.png'
|
||||
},
|
||||
playNext: {
|
||||
urlList: videos.map(v => v.url)
|
||||
},
|
||||
progress: {
|
||||
isDragingSeek: true
|
||||
},
|
||||
// mobile: {
|
||||
// disableGesture: true
|
||||
// }
|
||||
})
|
||||
}
|
||||
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>
|
||||
@@ -0,0 +1,51 @@
|
||||
.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;
|
||||
pointer-events: all !important;
|
||||
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;
|
||||
}
|
||||
|
||||
.xgplayer .xgplayer-locked {
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
import { BasePlugin } from "xgplayer";
|
||||
import "./lockScreen.scss";
|
||||
import MobilePlugin from "xgplayer/es/plugins/mobile";
|
||||
|
||||
export default class LockPlugin extends BasePlugin {
|
||||
static get pluginName() {
|
||||
return "lockPlugin";
|
||||
}
|
||||
|
||||
private locked: boolean;
|
||||
private lockDiv: HTMLDivElement = document.createElement("div");
|
||||
private overlayDiv: HTMLDivElement = document.createElement("div");
|
||||
|
||||
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.initLockDiv();
|
||||
this.initOverlayDiv();
|
||||
this.bindEvents();
|
||||
}
|
||||
|
||||
private initLockDiv() {
|
||||
this.lockDiv.innerHTML = this.lockClosedSVG;
|
||||
this.lockDiv.className = "lock-div";
|
||||
this.player.root !== null && this.player.root.appendChild(this.lockDiv);
|
||||
}
|
||||
|
||||
private initOverlayDiv() {
|
||||
this.overlayDiv.className = "overlay-div";
|
||||
this.player.root !== null && this.player.root.appendChild(this.overlayDiv);
|
||||
this.overlayDiv.addEventListener('mousedown', (e) => {
|
||||
e.preventDefault();
|
||||
});
|
||||
this.overlayDiv.addEventListener('mousemove', (e) => {
|
||||
e.preventDefault();
|
||||
});
|
||||
}
|
||||
|
||||
private bindEvents() {
|
||||
this.lockDiv!.addEventListener("click", this.toggleLock.bind(this));
|
||||
this.player.root !== null && this.player.root.addEventListener("click", this.preventClick.bind(this), true);
|
||||
this.player.usePluginHooks("progress", "dragstart", () => {
|
||||
if (this.locked) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
// 阻止进度条默认行为
|
||||
for(const event of ['dragstart', 'drag', 'dragend']) {
|
||||
this.player.usePluginHooks("progress", event, () => {
|
||||
if (this.locked) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private toggleLock() {
|
||||
const mobile = this.getPlugin('mobile') as MobilePlugin | undefined
|
||||
// mobile?.disableGesture()
|
||||
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("xgplayer-locked", this.locked);
|
||||
this.locked ? mobile?.disableGesture() : mobile?.enableGesture()
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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/pick";
|
||||
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>
|
||||
@@ -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;
|
||||
@@ -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>
|
||||
File diff suppressed because it is too large.
Load diff
+13
-3
@@ -1,17 +1,27 @@
|
||||
import { AxiosRequestConfig } from "axios";
|
||||
import { directory, file } from "./type";
|
||||
|
||||
export type miaoFetchConfig = {
|
||||
retry?: number;
|
||||
};
|
||||
retry?: number
|
||||
axiosOption?: AxiosRequestConfig<any>
|
||||
}
|
||||
|
||||
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 uploadOption = {
|
||||
/**
|
||||
* 上传进度回调函数
|
||||
* @param {any} percent 进度百分比，float类型
|
||||
* @param {any} percent 进度百分比，float类型, 0-1
|
||||
*/
|
||||
onProcess?: (percent: number) => void;
|
||||
/**
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
import PluginCenter from "@/class/PluginCenter";
|
||||
import { VirtualPages } from "@/class/VirtualPage";
|
||||
|
||||
export type stats = {
|
||||
atimeMs: number; // 上次访问时间（毫秒）
|
||||
birthtimeMs: number; // 创建时间（毫秒）
|
||||
@@ -20,3 +23,24 @@ export type directory = {
|
||||
stats: stats;
|
||||
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;
|
||||
getViews: () => VirtualPages;
|
||||
getPluginCenter: () => PluginCenter;
|
||||
}
|
||||
|
||||
export type Equals<X, Y> = (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2 ? true : false;
|
||||
@@ -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>
|
||||
+20
-12
@@ -1,11 +1,17 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import { resolve } from 'path'
|
||||
import { viteSingleFile } from 'vite-plugin-singlefile'
|
||||
import { defineConfig } from "vite";
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
import { resolve } from "path";
|
||||
// import { viteSingleFile } from 'vite-plugin-singlefile'
|
||||
import { visualizer } from 'rollup-plugin-visualizer'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue(), viteSingleFile()],
|
||||
base: './',
|
||||
plugins: [
|
||||
vue(),
|
||||
visualizer()
|
||||
// viteSingleFile()
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve(__dirname, 'src')
|
||||
@@ -55,15 +61,17 @@ export default defineConfig({
|
||||
build: {
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: resolve(__dirname, 'index.html')
|
||||
main: 'index.html'
|
||||
},
|
||||
output: {
|
||||
// 配置输出为单文件
|
||||
inlineDynamicImports: true,
|
||||
manualChunks: undefined,
|
||||
entryFileNames: 'bundle.js',
|
||||
format: 'iife', // 立即执行函数格式
|
||||
name: 'MyBundle'
|
||||
entryFileNames: 'assets/[name]-[hash].js',
|
||||
chunkFileNames: 'assets/chunk-[name]-[hash].js',
|
||||
assetFileNames: 'assets/[name]-[hash][extname]',
|
||||
manualChunks(id) {
|
||||
if (id.includes('export.ts') && id.includes('plugins')) {
|
||||
return 'pluginExports'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user