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
@@ -24,3 +24,8 @@ dist-ssr
|
|||||||
*.sw?
|
*.sw?
|
||||||
.vscode
|
.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 list:
|
||||||
todo: 重构virtualPage，所有page以插件形式使用 [finish]
|
|
||||||
todo: miaoDirectory插件化，为后续插件功能开发做准备 [finish]
|
| 计划 | 状态 |
|
||||||
todo: miaoPopupInput, 弹出一个输入框 [finish]
|
|---|---|
|
||||||
todo: miaoDirectory的重命名功能 [finish]
|
| 拆分miaoDirectory | ✅ |
|
||||||
todo: miaoDirectory的剪切功能 [finish]
|
| 完善视频插件 | ✅ |
|
||||||
todo: miaoDirectory的上传按钮 [finish]
|
| 完善PDF插件 | ✅ |
|
||||||
todo: miaoDirectory的新建文件/文件夹功能 [finish]
|
| 完善Code插件 | ✅ |
|
||||||
todo: miaoDirectory的多选功能 [finish]
|
| 实现miaoDirectory的搜索功能 | ✅ |
|
||||||
todo: VirtualDirectory更新时更新文件信息
|
| 重构miaoFetchApi.getFile， 增加进度 | ❌ |
|
||||||
todo: miaoDirectory的复制文件/文件夹功能
|
| plugin增加些属性，icon, disable, group之类的 | ❌ |
|
||||||
|
| 完善miaoDirectory的搜索功能 | ❌ |
|
||||||
|
| 实现miaoDirectory的排序功能 | ❌ |
|
||||||
|
| 完善图片浏览插件 | ❌ |
|
||||||
|
| VirtualDirectory更新时更新文件信息 | ❌ |
|
||||||
|
| 创建音乐播放器组件（仿QQ音乐移动端吧） | ❌ |
|
||||||
|
| miaoDirectory的复制文件/文件夹功能 | ❌ |
|
||||||
|
| 重构miaoDropHandler的实现 | ❌ |
|
||||||
|
| 重构主界面，拆分主界面组件的实现 | ❌ |
|
||||||
|
|
||||||
|
|
||||||
|
| 长期计划 |
|
||||||
|
|---|
|
||||||
|
| 无 |
|
||||||
|
|
||||||
|
## 碎碎念：
|
||||||
|
|
||||||
|
为什么不直接做成类似于windows的风格呢？其实技术实现上问题应该不大，重构也不用重构太多东西（APP.vue改改，插件部分改改这样），但是开学了事情一大堆，实习又没法比较美好地推掉。平时每天到宿舍都精疲力竭还要准备秋招和学校的破事。更何况搞不好还会被两个学分卡得没法毕业，好烦好烦。md想这么多干嘛，反正都快岩壁了，mdmdmdmd
|
||||||
+2
-2
@@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="./icon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>MDW</title>
|
<title>MiaoDirectory</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
+32
-1
@@ -7,20 +7,51 @@
|
|||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"dev:host": "vite --host 0.0.0.0",
|
"dev:host": "vite --host 0.0.0.0",
|
||||||
"build": "vue-tsc -b && vite build",
|
"build": "vue-tsc -b && vite build",
|
||||||
|
"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"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"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",
|
"@vicons/ionicons5": "^0.12.0",
|
||||||
|
"aes-js": "^3.1.2",
|
||||||
|
"aplayer": "^1.10.1",
|
||||||
"axios": "^1.7.3",
|
"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",
|
"lodash": "^4.17.21",
|
||||||
|
"markdown-it": "^14.1.0",
|
||||||
"naive-ui": "^2.39.0",
|
"naive-ui": "^2.39.0",
|
||||||
|
"pdfjs-dist": "^4.5.136",
|
||||||
"sass": "^1.77.8",
|
"sass": "^1.77.8",
|
||||||
"vue": "^3.4.35"
|
"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": {
|
"devDependencies": {
|
||||||
|
"@types/aes-js": "^3.1.4",
|
||||||
"@types/lodash": "^4.17.7",
|
"@types/lodash": "^4.17.7",
|
||||||
|
"@types/markdown-it": "^14.1.2",
|
||||||
"@types/node": "^22.1.0",
|
"@types/node": "^22.1.0",
|
||||||
|
"@types/pdfjs-dist": "^2.10.378",
|
||||||
"@vitejs/plugin-vue": "^5.1.2",
|
"@vitejs/plugin-vue": "^5.1.2",
|
||||||
|
"rollup-plugin-visualizer": "^5.12.0",
|
||||||
"typescript": "^5.5.3",
|
"typescript": "^5.5.3",
|
||||||
"vite": "^5.4.0",
|
"vite": "^5.4.0",
|
||||||
"vite-plugin-singlefile": "^2.0.2",
|
"vite-plugin-singlefile": "^2.0.2",
|
||||||
|
|||||||
Generated
+1530
-66
File diff suppressed because it is too large.
Load diff
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
+134
-111
@@ -1,31 +1,41 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { h, onMounted, reactive, ref, shallowRef } from 'vue'
|
import { computed, onMounted, provide, reactive, ref, shallowRef, useTemplateRef } from 'vue'
|
||||||
import { NIcon, NScrollbar, NDropdown, NQrCode } from 'naive-ui'
|
import { NIcon, NScrollbar, NDropdown } from 'naive-ui'
|
||||||
import {
|
import {
|
||||||
EyeOffOutline,
|
EyeOffOutline,
|
||||||
EyeOutline,
|
EyeOutline,
|
||||||
CloseOutline,
|
CloseOutline,
|
||||||
CopyOutline,
|
CopyOutline,
|
||||||
EllipsisVertical,
|
EllipsisVertical,
|
||||||
QrCodeOutline
|
QrCodeOutline,
|
||||||
|
ExtensionPuzzleOutline
|
||||||
} from '@vicons/ionicons5'
|
} from '@vicons/ionicons5'
|
||||||
import miaoDirectory from './views/miaoDirectory.vue'
|
|
||||||
import VirtualPage from './class/VirtualPage'
|
|
||||||
import VirtualDirectory, { VirtualFile } from './class/VirtualDirectory'
|
import VirtualDirectory, { VirtualFile } from './class/VirtualDirectory'
|
||||||
import MiaoMask from './components/miaoMask.vue'
|
import MiaoMask from './components/miaoMask.vue'
|
||||||
|
import MiaoMessageProvider from './components/miaoAlertTipProvider.vue'
|
||||||
import config from './config'
|
import config from './config'
|
||||||
import useVirtualPages from './hooks/useVirtualPages'
|
import useVirtualPages from './hooks/useVirtualPages'
|
||||||
|
import init from './hooks/init'
|
||||||
|
import usePluginCenter from './hooks/usePluginCenter'
|
||||||
|
import PluginCenter, { PluginGroup } from './class/PluginCenter'
|
||||||
|
import { renderIcon } from './hooks/miaoTools'
|
||||||
|
import { DropdownMixedOption } from 'naive-ui/es/dropdown/src/interface'
|
||||||
|
|
||||||
const { baseUrl } = config
|
const { baseUrl } = config
|
||||||
|
|
||||||
const showModal = ref<boolean>(false)
|
const showModal = ref<boolean>(false)
|
||||||
|
|
||||||
|
const viewRef = ref<HTMLDivElement>()
|
||||||
|
|
||||||
const modalData = shallowRef<{
|
const modalData = shallowRef<{
|
||||||
component: any
|
component: any
|
||||||
props: any
|
props: any
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
const messageProviderRef = useTemplateRef('messageProviderRef')
|
||||||
|
|
||||||
const views = useVirtualPages()
|
const views = useVirtualPages()
|
||||||
|
let pluginCenter = ref<PluginCenter>()
|
||||||
|
|
||||||
const rootDirectory = reactive(
|
const rootDirectory = reactive(
|
||||||
new VirtualDirectory({
|
new VirtualDirectory({
|
||||||
@@ -42,123 +52,123 @@ const rootDirectory = reactive(
|
|||||||
// component就是一个vue组件，类似于miaoDirectory
|
// component就是一个vue组件，类似于miaoDirectory
|
||||||
const createView = (
|
const createView = (
|
||||||
component: any,
|
component: any,
|
||||||
currentDirectorys?: VirtualDirectory[],
|
name: string,
|
||||||
|
currentDirectories?: VirtualDirectory[],
|
||||||
currentFiles?: VirtualFile[],
|
currentFiles?: VirtualFile[],
|
||||||
index?: number
|
index?: number
|
||||||
) => {
|
) => {
|
||||||
index ?? (index = views.length)
|
views.push(component, name, currentDirectories, currentFiles, { index })
|
||||||
views.splice(
|
|
||||||
index,
|
|
||||||
0,
|
|
||||||
reactive<VirtualPage>(new VirtualPage(component, {
|
|
||||||
directorys: [...(currentDirectorys ?? [])],
|
|
||||||
files: [...(currentFiles ?? [])]
|
|
||||||
}))
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const deleteView = (index: number) => {
|
const deleteView = (index: number) => {
|
||||||
views.splice(index, 1)
|
views.deleteView(index)
|
||||||
if (views.length === 0) {
|
if (views.length === 0) {
|
||||||
createView(miaoDirectory, [rootDirectory])
|
pluginCenter.value && pluginCenter.value.usePlugin('miaoDirectory', [rootDirectory], [])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 点击标题是隐藏其他标签或显示其他标签，还挺好用的
|
// 点击标题是隐藏其他标签或显示其他标签，还挺好用的
|
||||||
const handleClickTitle = (index: number) => {
|
const handleClickTitle = (index: number) => {
|
||||||
let count = views.filter((v) => v.visible).length
|
let count = views._views.filter((v) => v.visible).length
|
||||||
let op = !views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
|
let op =
|
||||||
|
!views._views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
|
||||||
let _index = 0
|
let _index = 0
|
||||||
while (_index < views.length) {
|
while (_index < views._views.length) {
|
||||||
if (_index !== index) {
|
if (_index !== index) {
|
||||||
views[_index].visible = op === 'hideOthers' ? false : true
|
views._views[_index].visible = op === 'hideOthers' ? false : true
|
||||||
} else {
|
} else {
|
||||||
views[_index].visible = true
|
views._views[_index].visible = true
|
||||||
}
|
}
|
||||||
_index += 1
|
_index += 1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 顶部菜单相关
|
const openMenuOption = computed(() => [
|
||||||
function renderIcon(icon: any) {
|
|
||||||
return () => {
|
|
||||||
return h(NIcon, null, {
|
|
||||||
default: () => h(icon)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const openMenuOption = [
|
|
||||||
{
|
{
|
||||||
label: '分享',
|
label: '分享',
|
||||||
key: 'share',
|
key: 'share',
|
||||||
icon: renderIcon(QrCodeOutline)
|
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') {
|
if (key === 'share') {
|
||||||
showModal.value = true
|
showModal.value = true
|
||||||
modalData.value = {
|
modalData.value = {
|
||||||
component: NQrCode,
|
component: (await import('naive-ui/es/qr-code')).NQrCode,
|
||||||
props: {
|
props: {
|
||||||
value: baseUrl,
|
value: baseUrl,
|
||||||
size: 300,
|
size: 300,
|
||||||
errorCorrectionLevel: 'H'
|
errorCorrectionLevel: 'H'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
} else if (key.startsWith('plugin:')) {
|
||||||
|
const pluginName = key.split(':')[1]
|
||||||
|
pluginCenter.value && pluginCenter.value.usePlugin(pluginName, [], [])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(async () => {
|
||||||
createView(miaoDirectory, [rootDirectory])
|
// @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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="view">
|
<div class="view" ref="viewRef">
|
||||||
<div class="view-controler">
|
<miao-message-provider ref="messageProviderRef">
|
||||||
|
<div class="view-controller">
|
||||||
<n-scrollbar x-scrollable>
|
<n-scrollbar x-scrollable>
|
||||||
<div class="tags-container">
|
<div class="tabs-container">
|
||||||
<transition-group name="tab">
|
<transition-group name="tab">
|
||||||
<div
|
<div class="tab" v-for="(view, index) of views._views" :key="view.id">
|
||||||
class="tab"
|
<span class="tab-title" :title="view.title" @click="handleClickTitle(index)">
|
||||||
v-for="(view, index) of views"
|
{{
|
||||||
:key="view.uid">
|
view.title.length > 5 && 0
|
||||||
<div
|
? `${view.title.substring(0, 5)}...`
|
||||||
class="tab-title"
|
: view.title
|
||||||
@click="handleClickTitle(index)">
|
}}
|
||||||
{{ view.title }}
|
</span>
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="tab-point"
|
|
||||||
:style="{ backgroundColor: view.color }"></div>
|
|
||||||
<div class="tab-control">
|
<div class="tab-control">
|
||||||
<n-icon
|
<div class="tab-point" :style="{ backgroundColor: view.color }"></div>
|
||||||
class="tag-control-icon icon"
|
<n-icon class="tag-control-icon icon" @click="view.switchShow()">
|
||||||
@click="view.switchShow()">
|
<EyeOutline v-show="view.visible" class="icon-inner" />
|
||||||
<EyeOutline
|
<EyeOffOutline v-show="!view.visible" class="icon-inner" />
|
||||||
v-show="view.visible"
|
|
||||||
class="icon-inner" />
|
|
||||||
<EyeOffOutline
|
|
||||||
v-show="!view.visible"
|
|
||||||
class="icon-inner" />
|
|
||||||
</n-icon>
|
</n-icon>
|
||||||
<n-icon
|
<n-icon class="tag-control-icon icon" @click="
|
||||||
class="tag-control-icon icon"
|
|
||||||
@click="
|
|
||||||
createView(
|
createView(
|
||||||
view.component,
|
view.component,
|
||||||
view.currentDirectorys,
|
view.name,
|
||||||
|
view.currentDirectories,
|
||||||
view.currentFiles,
|
view.currentFiles,
|
||||||
index + 1
|
index + 1
|
||||||
)
|
)
|
||||||
">
|
" v-if="view.allowCopy">
|
||||||
<CopyOutline />
|
<CopyOutline />
|
||||||
</n-icon>
|
</n-icon>
|
||||||
<n-icon
|
<n-icon class="tag-control-icon icon" @click="deleteView(index)">
|
||||||
class="tag-control-icon icon"
|
|
||||||
@click="deleteView(index)">
|
|
||||||
<CloseOutline class="icon-inner" />
|
<CloseOutline class="icon-inner" />
|
||||||
</n-icon>
|
</n-icon>
|
||||||
</div>
|
</div>
|
||||||
@@ -168,10 +178,7 @@ onMounted(() => {
|
|||||||
</n-scrollbar>
|
</n-scrollbar>
|
||||||
<div class="view-controller-menu">
|
<div class="view-controller-menu">
|
||||||
<div class="view-controller-menu-item">
|
<div class="view-controller-menu-item">
|
||||||
<n-dropdown
|
<n-dropdown trigger="click" :options="openMenuOption" @select="handleMenuSelect">
|
||||||
trigger="click"
|
|
||||||
:options="openMenuOption"
|
|
||||||
@select="handleMenuSelect">
|
|
||||||
<n-icon class="icon">
|
<n-icon class="icon">
|
||||||
<EllipsisVertical class="icon-inner" />
|
<EllipsisVertical class="icon-inner" />
|
||||||
</n-icon>
|
</n-icon>
|
||||||
@@ -180,33 +187,26 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="view-container">
|
<div class="view-container">
|
||||||
<transition-group name="page">
|
<!-- <transition-group name="page"> -->
|
||||||
<div
|
<div class="view-container-item" v-for="(view, index) of views._views"
|
||||||
class="view-container-item"
|
:class="!view.visible ? 'view-container-item-hidden' : ''" :key="view.id">
|
||||||
v-for="(view, index) of views"
|
<component :is="view.component" v-model:current-directories="view.currentDirectories"
|
||||||
v-show="view.visible"
|
v-model:current-files="view.currentFiles" :id="view.id" :color="view.color" :view="view"
|
||||||
:key="view.uid">
|
:views="views" @exit="deleteView(index)"></component>
|
||||||
<component
|
|
||||||
:is="view.component"
|
|
||||||
v-model:current-objects="view.currentDirectorys"
|
|
||||||
:id="view.uid"
|
|
||||||
:color="view.color"
|
|
||||||
@exit="deleteView(index)"></component>
|
|
||||||
</div>
|
</div>
|
||||||
</transition-group>
|
<!-- </transition-group> -->
|
||||||
</div>
|
</div>
|
||||||
|
</miao-message-provider>
|
||||||
</div>
|
</div>
|
||||||
<!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
|
<!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
|
||||||
<MiaoMask v-model:show="showModal" @click="showModal = false">
|
<MiaoMask v-model:show="showModal" @click="showModal = false">
|
||||||
<component
|
<component @click="(e: any) => e.stopPropagation()" :is="modalData?.component" v-bind="modalData?.props">
|
||||||
@click="(e:any) => e.stopPropagation()"
|
</component>
|
||||||
:is="modalData?.component"
|
|
||||||
v-bind="modalData?.props"></component>
|
|
||||||
</MiaoMask>
|
</MiaoMask>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
$controler-height: 25px;
|
$controller-height: 25px;
|
||||||
$tag-width: 170px;
|
$tag-width: 170px;
|
||||||
|
|
||||||
.view {
|
.view {
|
||||||
@@ -214,14 +214,14 @@ $tag-width: 170px;
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.view-controler {
|
.view-controller {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: $controler-height;
|
height: $controller-height;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #dadada;
|
background-color: #dadada;
|
||||||
// overflow: hidden;
|
// overflow: hidden;
|
||||||
|
|
||||||
.tags-container {
|
.tabs-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -230,6 +230,7 @@ $tag-width: 170px;
|
|||||||
.tab {
|
.tab {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: $tag-width;
|
width: $tag-width;
|
||||||
|
height: $controller-height;
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
// flex: 1;
|
// flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -237,17 +238,27 @@ $tag-width: 170px;
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.tab-title {
|
.tab-title {
|
||||||
|
// font-family: monospace;
|
||||||
|
// font-weight: bolder;
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
// width: 70%;
|
width: 90px;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
|
span {
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-point {
|
.tab-point {
|
||||||
height: 5px;
|
height: 5px;
|
||||||
aspect-ratio: 1;
|
aspect-ratio: 1;
|
||||||
border-radius: 66px;
|
border-radius: 66px;
|
||||||
margin-left: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-control {
|
.tab-control {
|
||||||
@@ -263,7 +274,7 @@ $tag-width: 170px;
|
|||||||
|
|
||||||
&:not(:last-child)::after {
|
&:not(:last-child)::after {
|
||||||
content: '';
|
content: '';
|
||||||
height: calc($controler-height * 0.6);
|
height: calc($controller-height * 0.6);
|
||||||
width: 1px;
|
width: 1px;
|
||||||
border-right: 1px solid black;
|
border-right: 1px solid black;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -288,7 +299,7 @@ $tag-width: 170px;
|
|||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: '';
|
content: '';
|
||||||
height: calc($controler-height * 0.6);
|
height: calc($controller-height * 0.6);
|
||||||
width: 1px;
|
width: 1px;
|
||||||
border-right: 1px solid black;
|
border-right: 1px solid black;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -297,8 +308,8 @@ $tag-width: 170px;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
height: calc($controler-height * 0.7);
|
height: calc($controller-height * 0.7);
|
||||||
width: calc($controler-height * 0.7);
|
width: calc($controller-height * 0.7);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -317,13 +328,24 @@ $tag-width: 170px;
|
|||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
// flex-direction: column;
|
// flex-direction: column;
|
||||||
height: calc(100% - $controler-height);
|
height: calc(100% - $controller-height);
|
||||||
overflow-y: overlay;
|
overflow-y: hidden;
|
||||||
overflow-x: overlay;
|
overflow-x: overlay;
|
||||||
|
|
||||||
.view-container-item {
|
.view-container-item {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
min-width: 180px;
|
||||||
|
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 {
|
&::-webkit-scrollbar {
|
||||||
@@ -351,14 +373,16 @@ $tag-width: 170px;
|
|||||||
|
|
||||||
// transition动画相关
|
// transition动画相关
|
||||||
.view {
|
.view {
|
||||||
.view-controler {
|
.view-controller {
|
||||||
.tags-container {
|
.tabs-container {
|
||||||
|
|
||||||
.tab-move,
|
.tab-move,
|
||||||
.tab-enter-active {
|
.tab-enter-active {
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-leave-active {
|
.tab-leave-active {
|
||||||
|
opacity: 0;
|
||||||
transition: none;
|
transition: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -380,22 +404,21 @@ $tag-width: 170px;
|
|||||||
|
|
||||||
// .view-container {
|
// .view-container {
|
||||||
// .page-move {
|
// .page-move {
|
||||||
// transition: all 0.2s ease;
|
// // transition: all 0.55s ease;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// .page-enter-active {
|
// .page-enter-active {}
|
||||||
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .page-leave-active {
|
// .page-leave-active {
|
||||||
// transition: none;
|
// transition: none !important;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// .page-enter-from {
|
// .page-enter-from {
|
||||||
// opacity: 0;
|
// // opacity: 0;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// .page-leave-active {
|
// .page-leave-active {
|
||||||
|
// display: none;
|
||||||
// position: absolute;
|
// 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
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
+154
-63
@@ -1,52 +1,95 @@
|
|||||||
import generateId from "@/hooks/generateId";
|
import config from '@/config'
|
||||||
import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
|
import generateId from '@/hooks/generateId'
|
||||||
// import { debounce } from "lodash";
|
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
||||||
import type { stats, file, directory } from "@/types/type.ts";
|
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 {
|
export class VirtualFile {
|
||||||
constructor(info: file, parent: VirtualDirectory) {
|
constructor(info: file, parent: VirtualDirectory) {
|
||||||
this.name = info.name;
|
this.name = info.name
|
||||||
this.size = info.size;
|
this.size = info.size
|
||||||
this.stats = info.stats;
|
this.stats = info.stats
|
||||||
this.parent = parent;
|
this.parent = parent
|
||||||
this.type = "file";
|
this.type = 'file'
|
||||||
this.uid = generateId();
|
this.id = generateId()
|
||||||
|
// if (vFileMap.get(this.path) !== undefined) {
|
||||||
|
// throw `${this.path} is already exist`
|
||||||
|
// }
|
||||||
|
// vFileMap.set(this.path, this)
|
||||||
}
|
}
|
||||||
name: string;
|
name: string
|
||||||
type: "file";
|
type: 'file'
|
||||||
size: number;
|
size: number
|
||||||
stats: stats;
|
stats: stats
|
||||||
parent: VirtualDirectory;
|
parent: VirtualDirectory
|
||||||
uid: number;
|
id: number
|
||||||
|
storage: { [key: string]: any } = {}
|
||||||
get path() {
|
get path() {
|
||||||
return `${this.parent.path}${this.name}`;
|
return `${this.parent.path}${this.name}`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get url() {
|
||||||
|
return `${config.api.get}${this.parent.path}${this.name}`
|
||||||
|
}
|
||||||
|
|
||||||
|
// destroy() {
|
||||||
|
// vFileMap.delete(this.path)
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
class VirtualDirectory {
|
class VirtualDirectory {
|
||||||
|
/**
|
||||||
|
* 除非为根节点，否则必须设置parent
|
||||||
|
*/
|
||||||
constructor(info: directory, parent?: VirtualDirectory) {
|
constructor(info: directory, parent?: VirtualDirectory) {
|
||||||
this.name = info.name;
|
this.name = info.name
|
||||||
this.type = "directory";
|
this.stats = info.stats
|
||||||
this.stats = info.stats;
|
this.parent = parent ?? undefined
|
||||||
this.parent = parent ?? undefined;
|
this.id = generateId()
|
||||||
this.uid = generateId();
|
// if (vDirectoryMap.get(this.path) !== undefined) {
|
||||||
|
// throw `${this.path} is already exist`
|
||||||
|
// }
|
||||||
|
// vDirectoryMap.set(this.path, this)
|
||||||
}
|
}
|
||||||
// 文件夹名
|
// 文件夹名
|
||||||
name: string;
|
name: string
|
||||||
// 子文件
|
// 子文件
|
||||||
files?: VirtualFile[];
|
files: VirtualFile[] = []
|
||||||
// 子目录
|
// 子目录
|
||||||
directorys?: VirtualDirectory[];
|
directories: VirtualDirectory[] = []
|
||||||
// 没啥意义，标注一下就是了
|
// 没啥意义，标注一下就是了
|
||||||
type: "directory";
|
type: 'directory' = 'directory'
|
||||||
// 文件夹创建时间等杂项属性
|
// 文件夹创建时间等杂项属性
|
||||||
stats: stats;
|
stats: stats
|
||||||
// 父文件夹
|
// 父文件夹
|
||||||
parent?: VirtualDirectory;
|
parent?: VirtualDirectory
|
||||||
|
|
||||||
uid: number;
|
_isUpdated: boolean = false
|
||||||
|
|
||||||
|
id: number
|
||||||
|
|
||||||
|
// 用来存储一些标记信息啥的
|
||||||
|
storage: { [key: string]: any } = {}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取相对于根目录的路径的层数
|
* 获取相对于根目录的路径的层数
|
||||||
@@ -54,7 +97,7 @@ class VirtualDirectory {
|
|||||||
* @returns {string}
|
* @returns {string}
|
||||||
*/
|
*/
|
||||||
get layer(): number {
|
get layer(): number {
|
||||||
return this.parent ? this.parent.layer + 1 : 0;
|
return this.parent ? this.parent.layer + 1 : 0
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* 相对于根目录的路径， 如: "/", "/123/321/"
|
* 相对于根目录的路径， 如: "/", "/123/321/"
|
||||||
@@ -63,9 +106,9 @@ class VirtualDirectory {
|
|||||||
*/
|
*/
|
||||||
get path(): string {
|
get path(): string {
|
||||||
if (!this.parent) {
|
if (!this.parent) {
|
||||||
return "/";
|
return '/'
|
||||||
}
|
}
|
||||||
return `${this.parent.path}${this.name}/`;
|
return `${this.parent.path}${this.name}/`
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -74,9 +117,16 @@ class VirtualDirectory {
|
|||||||
*/
|
*/
|
||||||
get getParents(): VirtualDirectory[] {
|
get getParents(): VirtualDirectory[] {
|
||||||
if (!this.parent) {
|
if (!this.parent) {
|
||||||
return [this];
|
return [this]
|
||||||
}
|
}
|
||||||
return [...this.parent.getParents, this];
|
return [...this.parent.getParents, this]
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取当前文件夹是否已经请求过至少一次数据
|
||||||
|
*/
|
||||||
|
get isUpdated() {
|
||||||
|
return this._isUpdated
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -86,59 +136,100 @@ class VirtualDirectory {
|
|||||||
*/
|
*/
|
||||||
getParent(layer: number): VirtualDirectory {
|
getParent(layer: number): VirtualDirectory {
|
||||||
if (layer <= 0 || !this.parent) {
|
if (layer <= 0 || !this.parent) {
|
||||||
return this;
|
return this
|
||||||
}
|
}
|
||||||
return this.parent.getParent(layer - 1);
|
return this.parent.getParent(layer - 1)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get tree(): Tree {
|
||||||
|
return {
|
||||||
|
name: this.name,
|
||||||
|
type: this.type,
|
||||||
|
path: this.path,
|
||||||
|
stats: this.stats,
|
||||||
|
files:
|
||||||
|
this.files?.map((v) => ({
|
||||||
|
name: v.name,
|
||||||
|
type: v.type,
|
||||||
|
size: v.size,
|
||||||
|
stats: v.stats,
|
||||||
|
url: v.url
|
||||||
|
})) ?? [],
|
||||||
|
directories: this.directories?.map((v) => v.tree) ?? []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 时间复杂度大爆炸
|
||||||
updateContent(content: (file | directory)[]) {
|
updateContent(content: (file | directory)[]) {
|
||||||
this.files = this.files ?? [];
|
this._isUpdated = true
|
||||||
this.directorys = this.directorys ?? [];
|
|
||||||
const fileNames: string[] = this.files.map(v => v.name);
|
const itemNames: string[] = content.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)[]) => {
|
const _delete = (target: (VirtualFile | VirtualDirectory)[]) => {
|
||||||
let index = 0;
|
let index = 0
|
||||||
while (index < target.length) {
|
while (index < target.length) {
|
||||||
if (!itemNames.includes(target[index].name)) {
|
if (!itemNames.includes(target[index].name)) {
|
||||||
target.splice(index, 1);
|
target.splice(index, 1)
|
||||||
} else {
|
} else {
|
||||||
index += 1;
|
index += 1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
_delete(this.files);
|
const _addFile = (item: file) => {
|
||||||
_delete(this.directorys);
|
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) {
|
for (let item of content.filter((v) => newFileNames.includes(v.name))) {
|
||||||
if (item.type === "file") {
|
_addFile(item as 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));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
for (let item of content.filter((v) =>
|
||||||
|
newDirectoryNames.includes(v.name)
|
||||||
|
)) {
|
||||||
|
_addDirectory(item as directory)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
hasChild(item: VirtualDirectory | VirtualFile): boolean {
|
hasChild(item: VirtualDirectory | VirtualFile): boolean {
|
||||||
if (item.type === "directory") {
|
if (item.type === 'directory') {
|
||||||
return this.directorys?.includes(item) ?? false;
|
return this.directories?.includes(item) ?? false
|
||||||
} else {
|
} else {
|
||||||
return this.files?.includes(item) ?? false;
|
return this.files?.includes(item) ?? false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// destroy() {
|
||||||
|
// for(const item of [...this.files, ...this.directories]){
|
||||||
|
// item.destroy()
|
||||||
|
// }
|
||||||
|
// vDirectoryMap.delete(this.path)
|
||||||
|
// }
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 调用后重新向远端拉取文件夹信息并进行更新
|
* 调用后重新向远端拉取文件夹信息并进行更新
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
async update(): Promise<void> {
|
async update(): Promise<void> {
|
||||||
const data: (file | directory)[] = await miaoFetchApi.get(this);
|
const data: (file | directory)[] = await miaoFetchApi.get(this)
|
||||||
this.updateContent(data);
|
this.updateContent(data)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export default VirtualDirectory;
|
export default VirtualDirectory
|
||||||
+154
-31
@@ -1,63 +1,186 @@
|
|||||||
import { shallowRef } from "vue";
|
import { Component, reactive, shallowRef } from 'vue'
|
||||||
import VirtualDirectory, { VirtualFile } from "./VirtualDirectory";
|
import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
|
||||||
import generateId from "@/hooks/generateId";
|
import generateId from '@/hooks/generateId'
|
||||||
|
|
||||||
|
export interface VirtualPageOption {
|
||||||
|
exitConfirm?: boolean
|
||||||
|
allowCopy?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ViewsPushOption {
|
||||||
|
index?: number
|
||||||
|
VirtualPageOption?: VirtualPageOption
|
||||||
|
}
|
||||||
|
|
||||||
const getRandomWebSafeColor = (() => {
|
const getRandomWebSafeColor = (() => {
|
||||||
const webSafeColors = ["#009900", "#999900", "#009999", "#990099", "#0000ee"];
|
const webSafeColors = [
|
||||||
let counter = 0;
|
'#009900',
|
||||||
|
'#999900',
|
||||||
|
'#009999',
|
||||||
|
'#990099',
|
||||||
|
'#0000ee'
|
||||||
|
]
|
||||||
|
let counter = 0
|
||||||
return () => {
|
return () => {
|
||||||
const color = webSafeColors[counter % webSafeColors.length];
|
const color = webSafeColors[counter % webSafeColors.length]
|
||||||
counter += 1;
|
counter += 1
|
||||||
return color;
|
return color
|
||||||
};
|
}
|
||||||
})();
|
})()
|
||||||
|
|
||||||
export default class VirtualPage {
|
export default class VirtualPage {
|
||||||
constructor(component: any, initObjects?:{ directorys?: VirtualDirectory[], files?: VirtualFile[]}) {
|
constructor(
|
||||||
this.component = shallowRef(component);
|
component: Component,
|
||||||
this.currentDirectorys = initObjects?.directorys ?? [];
|
initObjects: {
|
||||||
this.currentFiles = initObjects?.files ?? [];
|
name: string
|
||||||
this.visible = true;
|
directories?: VirtualDirectory[]
|
||||||
this.uid = generateId();
|
files?: VirtualFile[]
|
||||||
this.refreshKey = Math.random();
|
option?: VirtualPageOption
|
||||||
this.color = getRandomWebSafeColor();
|
}
|
||||||
|
) {
|
||||||
|
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: any;
|
component: Component
|
||||||
|
// 页面名
|
||||||
|
name: string
|
||||||
// 是否可见
|
// 是否可见
|
||||||
visible: boolean;
|
visible: boolean
|
||||||
// 当前正在使用的文件夹
|
// 当前正在使用的文件夹
|
||||||
currentDirectorys: VirtualDirectory[];
|
currentDirectories: VirtualDirectory[]
|
||||||
// 当前正在使用的文件
|
// 当前正在使用的文件
|
||||||
currentFiles: VirtualFile[];
|
currentFiles: VirtualFile[]
|
||||||
// 区分每一个页面的唯一id
|
// 区分每一个页面的唯一id
|
||||||
uid: number;
|
id: number
|
||||||
// 当refreshKey改变时需要刷新页面，目前还没接入刷新
|
// 当refreshKey改变时需要刷新页面，目前还没接入刷新
|
||||||
refreshKey: number;
|
refreshKey: number
|
||||||
// 为了区分，每个虚拟页面都会分配一个color，这个color会体现在tab上
|
// 为了区分，每个虚拟页面都会分配一个color，这个color会体现在tab上
|
||||||
color: string;
|
color: string
|
||||||
// 用于展示的title
|
// 用于展示的title
|
||||||
_title?: string;
|
_title?: string
|
||||||
|
// 关闭时是否需要确认（未实现）
|
||||||
|
exitConfirm: boolean
|
||||||
|
// 是否允许复制页面
|
||||||
|
allowCopy: boolean
|
||||||
|
|
||||||
get title() {
|
get title() {
|
||||||
if (this._title) {
|
if (this._title) {
|
||||||
return this._title;
|
return this._title
|
||||||
}
|
}
|
||||||
return this.currentDirectorys[0].name;
|
return (
|
||||||
|
this?.currentDirectories[0]?.name ??
|
||||||
|
this?.currentFiles[0]?.name ??
|
||||||
|
'未命名标签'
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
setTitle(title: string) {
|
setTitle(title: string) {
|
||||||
this._title = title;
|
this._title = title
|
||||||
}
|
}
|
||||||
|
|
||||||
// 切换显示状态
|
// 切换显示状态
|
||||||
switchShow() {
|
switchShow() {
|
||||||
this.visible = !this.visible;
|
this.visible = !this.visible
|
||||||
}
|
}
|
||||||
|
|
||||||
// 刷新，不过好像没有用得到的时候吧
|
// 刷新，不过好像没有用得到的时候吧
|
||||||
// 事实上也不应该用得到，因为更新应该是响应式的
|
// 事实上也不应该用得到，因为更新应该是响应式的
|
||||||
refresh() {
|
refresh() {
|
||||||
this.refreshKey = Math.random();
|
this.refreshKey = Math.random()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class VirtualPages {
|
||||||
|
constructor() {
|
||||||
|
this._views = reactive<VirtualPage[]>([])
|
||||||
|
}
|
||||||
|
_views: VirtualPage[]
|
||||||
|
|
||||||
|
get length() {
|
||||||
|
return this._views.length
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 查询一个页面位于_views中的次序
|
||||||
|
* @param {any} id 要查询的页面的id
|
||||||
|
* @returns {any}
|
||||||
|
*/
|
||||||
|
getIndex(id: number) {
|
||||||
|
for (let i in this._views) {
|
||||||
|
if (this._views[i].id === id) {
|
||||||
|
return parseInt(i)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return -1
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 根据id得到view
|
||||||
|
* @param {any} id 要查询的页面的id
|
||||||
|
*/
|
||||||
|
getView(id: number) {
|
||||||
|
for (let v of this._views) {
|
||||||
|
if (v.id === id) {
|
||||||
|
return v
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 推入一个新的页面
|
||||||
|
*/
|
||||||
|
push(
|
||||||
|
component: 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的下拉菜单实现的自定义下拉菜单 -->
|
<!-- 基于naiveui的下拉菜单实现的自定义下拉菜单 -->
|
||||||
<!-- 支持长按和右键呼出下拉菜单 -->
|
<!-- 支持长按和右键呼出下拉菜单 -->
|
||||||
<template>
|
<template>
|
||||||
<div class="main" @contextmenu="handleContextMenu" @mouseleave="handleMainMouseLeave" @touchstart="handleTouchStart"
|
<div class="main" @contextmenu="handleContextMenu" @mouseleave="handleMainMouseLeave">
|
||||||
@touchend="handleTouchEnd">
|
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
<n-dropdown placement="bottom-start" trigger="manual" :x="x" :y="y" :options="props.options"
|
<n-dropdown placement="bottom-start" trigger="manual" :x="x" :y="y" :options="props.options"
|
||||||
@@ -28,7 +27,7 @@ const x = ref(0)
|
|||||||
const y = ref(0)
|
const y = ref(0)
|
||||||
const showContextMenu = ref(0)
|
const showContextMenu = ref(0)
|
||||||
// 长按计时器
|
// 长按计时器
|
||||||
let timer_touch: string | number | NodeJS.Timeout | undefined
|
// let timer_touch: string | number | NodeJS.Timeout | undefined
|
||||||
|
|
||||||
const onClickoutside = async () => {
|
const onClickoutside = async () => {
|
||||||
showContextMenu.value = 0
|
showContextMenu.value = 0
|
||||||
@@ -58,25 +57,25 @@ const handleContextMenu = (e: MouseEvent) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleTouchStart = (e: TouchEvent) => {
|
// const handleTouchStart = (e: TouchEvent) => {
|
||||||
if(props.touchTimeOut === undefined) {
|
// if(props.touchTimeOut === undefined) {
|
||||||
return
|
// return
|
||||||
}
|
// }
|
||||||
timer_touch ?? clearTimeout(timer_touch)
|
// timer_touch ?? clearTimeout(timer_touch)
|
||||||
timer_touch = setTimeout(() => {
|
// timer_touch = setTimeout(() => {
|
||||||
showContextMenu.value = 1
|
// showContextMenu.value = 1
|
||||||
x.value = e.targetTouches[0].clientX
|
// x.value = e.targetTouches[0].clientX
|
||||||
y.value = e.targetTouches[0].clientY
|
// y.value = e.targetTouches[0].clientY
|
||||||
}, props.touchTimeOut)
|
// }, props.touchTimeOut)
|
||||||
}
|
// }
|
||||||
|
|
||||||
const handleTouchEnd = () => {
|
// const handleTouchEnd = () => {
|
||||||
if(timer_touch) {
|
// if(timer_touch) {
|
||||||
clearTimeout(timer_touch)
|
// clearTimeout(timer_touch)
|
||||||
timer_touch = undefined
|
// timer_touch = undefined
|
||||||
}
|
// }
|
||||||
|
|
||||||
}
|
// }
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -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 config from '@/config'
|
||||||
import useDataBus from '@/hooks/useDataBus'
|
import useDataBus from '@/hooks/useDataBus'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
disable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
const dataBus = useDataBus()
|
const dataBus = useDataBus()
|
||||||
|
|
||||||
const { uploadSizeLimit } = config
|
const { uploadSizeLimit } = config
|
||||||
@@ -61,10 +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) => {
|
const handleDragOver = async (event: DragEvent) => {
|
||||||
showMask.value += 1
|
if (props.disable || check(event) === false) {
|
||||||
|
return
|
||||||
|
}
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
|
if (showMask.value === 1) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
showMask.value = 1
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleDragLeave = async () => {
|
const handleDragLeave = async () => {
|
||||||
@@ -72,6 +94,9 @@ const handleDragLeave = async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const handleDrop = async (event: DragEvent) => {
|
const handleDrop = async (event: DragEvent) => {
|
||||||
|
if (props.disable || check(event) === false) {
|
||||||
|
return
|
||||||
|
}
|
||||||
showMask.value = 0
|
showMask.value = 0
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
event.stopPropagation()
|
event.stopPropagation()
|
||||||
|
|||||||
@@ -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>
|
||||||
@@ -2,34 +2,53 @@
|
|||||||
<miao-mask v-model:show="showMask">
|
<miao-mask v-model:show="showMask">
|
||||||
<n-card class="popup-card" :title="popupConfig?.title" size="medium">
|
<n-card class="popup-card" :title="popupConfig?.title" size="medium">
|
||||||
{{ popupConfig?.content }}
|
{{ popupConfig?.content }}
|
||||||
<n-input class="popup-input" v-model:value="inputValue" type="text" v-bind="popupConfig?.inputProps"
|
<n-input
|
||||||
|
class="popup-input"
|
||||||
|
v-model:value="inputValue"
|
||||||
|
type="text"
|
||||||
|
v-bind="popupConfig?.inputProps"
|
||||||
|
passively-activated
|
||||||
|
autofocus
|
||||||
v-if="popupConfig?.inputProps" />
|
v-if="popupConfig?.inputProps" />
|
||||||
<div class="popup-button-container">
|
<div class="popup-button-container">
|
||||||
<n-button class="popup-button-container-button" v-for="option in popupConfig?.options" :key="option.label"
|
<n-button
|
||||||
:type="option.type" @click="_resolve && _resolve(option.key)">{{ option.label }}</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>
|
</div>
|
||||||
</n-card>
|
</n-card>
|
||||||
</miao-mask>
|
</miao-mask>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, nextTick } from "vue";
|
import { ref, nextTick } from 'vue'
|
||||||
import { NCard, NInput, NButton } from "naive-ui";
|
import { NCard, NInput, NButton } from 'naive-ui'
|
||||||
import miaoMask from "./miaoMask.vue";
|
import miaoMask from './miaoMask.vue'
|
||||||
import { InputProps } from "naive-ui";
|
import { InputProps } from 'naive-ui'
|
||||||
|
|
||||||
const showMask = ref(false);
|
const showMask = ref(false)
|
||||||
const inputValue = ref<string>("");
|
const inputValue = ref<string>('')
|
||||||
const _resolve = ref()
|
const _resolve = ref()
|
||||||
|
|
||||||
type popupConfigType = {
|
type popupConfigType = {
|
||||||
title: string
|
title: string
|
||||||
content?: string
|
content?: string
|
||||||
inputValue?: string,
|
inputValue?: string
|
||||||
inputProps?: InputProps
|
inputProps?: InputProps
|
||||||
options: {
|
options: {
|
||||||
label: string
|
label: string
|
||||||
key: unknown
|
key: unknown
|
||||||
type: 'default' | 'tertiary' | 'primary' | 'success' | 'info' | 'warning' | 'error'
|
type:
|
||||||
|
| 'default'
|
||||||
|
| 'tertiary'
|
||||||
|
| 'primary'
|
||||||
|
| 'success'
|
||||||
|
| 'info'
|
||||||
|
| 'warning'
|
||||||
|
| 'error'
|
||||||
}[]
|
}[]
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -43,7 +62,7 @@ const popup = async (config: popupConfigType) => {
|
|||||||
_resolve.value = resolve
|
_resolve.value = resolve
|
||||||
})
|
})
|
||||||
const text = inputValue.value
|
const text = inputValue.value
|
||||||
showMask.value = false;
|
showMask.value = false
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
inputValue.value = ''
|
inputValue.value = ''
|
||||||
_resolve.value = undefined
|
_resolve.value = undefined
|
||||||
@@ -51,10 +70,10 @@ const popup = async (config: popupConfigType) => {
|
|||||||
return {
|
return {
|
||||||
text,
|
text,
|
||||||
key
|
key
|
||||||
};
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
defineExpose({ popup });
|
defineExpose({ popup })
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
@@ -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
|
* 生成一个唯一的id
|
||||||
@@ -6,10 +6,10 @@ const idList: number[] = [];
|
|||||||
* @returns {number}
|
* @returns {number}
|
||||||
*/
|
*/
|
||||||
export default function generateId(length?: number) {
|
export default function generateId(length?: number) {
|
||||||
length || (length = 16);
|
length || (length = 16)
|
||||||
let id;
|
let id
|
||||||
while (!id || idList.includes(id)) {
|
while (!id || idList.includes(id)) {
|
||||||
id = Math.ceil(Math.random() * 10 ** 16);
|
id = Math.ceil(Math.random() * 10 ** 16)
|
||||||
}
|
}
|
||||||
idList.push(id)
|
idList.push(id)
|
||||||
return id
|
return id
|
||||||
|
|||||||
@@ -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;
|
||||||
+44
-27
@@ -1,47 +1,64 @@
|
|||||||
|
import { NIcon } from 'naive-ui'
|
||||||
|
import { h } from 'vue'
|
||||||
|
|
||||||
export const filePicker = (() => {
|
export const filePicker = (() => {
|
||||||
let _resolve: ((files: File[]) => void) | undefined;
|
let _resolve: ((files: File[]) => void) | undefined
|
||||||
return (option?: { accept?: "string"; multiple: boolean }) => {
|
return (option?: { accept?: 'string'; multiple: boolean }) => {
|
||||||
if (_resolve) {
|
if (_resolve) {
|
||||||
_resolve([]);
|
_resolve([])
|
||||||
_resolve = undefined;
|
_resolve = undefined
|
||||||
}
|
}
|
||||||
return new Promise<File[]>(resolve => {
|
return new Promise<File[]>((resolve) => {
|
||||||
const inpEle = document.createElement("input");
|
const inpEle = document.createElement('input')
|
||||||
inpEle.id = `__file_${Math.ceil(Math.random() * 100000000)}`;
|
inpEle.id = `__file_${Math.ceil(Math.random() * 100000000)}`
|
||||||
inpEle.type = "file";
|
inpEle.type = 'file'
|
||||||
inpEle.style.display = "none";
|
inpEle.style.display = 'none'
|
||||||
_resolve = resolve;
|
_resolve = resolve
|
||||||
// 文件类型限制
|
// 文件类型限制
|
||||||
// inpEle.accept="image/*"
|
// inpEle.accept="image/*"
|
||||||
option?.accept && (inpEle.accept = option?.accept);
|
option?.accept && (inpEle.accept = option?.accept)
|
||||||
// 多选限制
|
// 多选限制
|
||||||
option?.multiple && (inpEle.multiple = option?.multiple);
|
option?.multiple && (inpEle.multiple = option?.multiple)
|
||||||
// inpEle.addEventListener("change", event => fn.call(inpEle, event, inpEle.files), { once: true });
|
// inpEle.addEventListener("change", event => fn.call(inpEle, event, inpEle.files), { once: true });
|
||||||
inpEle.addEventListener(
|
inpEle.addEventListener(
|
||||||
"change",
|
'change',
|
||||||
() => {
|
() => {
|
||||||
if (!inpEle.files) {
|
if (!inpEle.files) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
const files: File[] = [];
|
const files: File[] = []
|
||||||
let i = 0;
|
let i = 0
|
||||||
while (i < inpEle.files?.length) {
|
while (i < inpEle.files?.length) {
|
||||||
const _file = inpEle?.files?.item(i);
|
const _file = inpEle?.files?.item(i)
|
||||||
if (_file !== null) {
|
if (_file !== null) {
|
||||||
files.push(_file);
|
files.push(_file)
|
||||||
}
|
}
|
||||||
i += 1;
|
i += 1
|
||||||
}
|
}
|
||||||
resolve(files);
|
resolve(files)
|
||||||
_resolve = undefined
|
_resolve = undefined
|
||||||
},
|
},
|
||||||
{ once: true }
|
{ once: true }
|
||||||
);
|
)
|
||||||
inpEle.click();
|
inpEle.click()
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
})();
|
})()
|
||||||
|
|
||||||
|
export const renderIcon = (icon: any) => {
|
||||||
|
return () => {
|
||||||
|
return h(NIcon, null, {
|
||||||
|
default: () => h(icon)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const sleep = async (timeout: number) => {
|
||||||
|
await new Promise(_=>setTimeout(_, timeout))
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
filePicker
|
filePicker,
|
||||||
};
|
renderIcon,
|
||||||
|
sleep
|
||||||
|
}
|
||||||
@@ -17,6 +17,10 @@ export default function useDataBus() {
|
|||||||
const value = dataStorage[key];
|
const value = dataStorage[key];
|
||||||
dataStorage[key] = undefined;
|
dataStorage[key] = undefined;
|
||||||
return value;
|
return value;
|
||||||
|
},
|
||||||
|
get(key: string | number) {
|
||||||
|
const value = dataStorage[key];
|
||||||
|
return value;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
+137
-129
@@ -1,4 +1,4 @@
|
|||||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
import VirtualDirectory, { VirtualFile } from "@/class/VirtualDirectory";
|
||||||
import {
|
import {
|
||||||
getOption,
|
getOption,
|
||||||
getResponse,
|
getResponse,
|
||||||
@@ -8,63 +8,89 @@ import {
|
|||||||
queryOption,
|
queryOption,
|
||||||
renameOption,
|
renameOption,
|
||||||
cutOption,
|
cutOption,
|
||||||
mkdirOption
|
mkdirOption,
|
||||||
} from '@/types/fetch'
|
getFileOption
|
||||||
import Config from '@/config'
|
} from "@/types/fetch";
|
||||||
import axios, { AxiosRequestConfig } from 'axios'
|
import Config from "@/config";
|
||||||
|
import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
|
||||||
|
|
||||||
export const useMiaoFetch = (option?: miaoFetchConfig) => {
|
export const useMiaoFetch = (option?: miaoFetchConfig) => {
|
||||||
const retry = option?.retry ?? 0
|
const retry = option?.retry ?? 0;
|
||||||
const controller = new AbortController()
|
const controller = new AbortController();
|
||||||
let flag = true
|
let flag = true;
|
||||||
return {
|
return {
|
||||||
miaoFetch: async (config: AxiosRequestConfig<any>) => {
|
miaoFetch: async (config: AxiosRequestConfig<any>): Promise<AxiosResponse<any, any>> => {
|
||||||
let counter = 0
|
let counter = 0;
|
||||||
let response: any
|
let response: any;
|
||||||
let errList = []
|
let errList = [];
|
||||||
while (flag && counter <= retry) {
|
while (flag && counter <= retry) {
|
||||||
try {
|
try {
|
||||||
response = await axios({
|
response = await axios({
|
||||||
...config,
|
...config,
|
||||||
signal: controller.signal
|
signal: controller.signal
|
||||||
})
|
});
|
||||||
return response
|
return response;
|
||||||
} catch (_e) {
|
} catch (_e) {
|
||||||
errList.push(_e)
|
errList.push(_e);
|
||||||
counter += 1
|
counter += 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
throw errList
|
throw errList;
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 强制终止miaoFetch
|
* 强制终止miaoFetch
|
||||||
*/
|
*/
|
||||||
abortMiaoFetch: () => {
|
abortMiaoFetch: () => {
|
||||||
flag = false
|
flag = false;
|
||||||
controller.abort()
|
controller.abort();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
}
|
};
|
||||||
|
|
||||||
const miaoFetchApi = {
|
const miaoFetchApi = {
|
||||||
/**
|
/**
|
||||||
* 获取对应文件夹下的数据
|
* 获取对应文件夹下的数据
|
||||||
*/
|
*/
|
||||||
async get(
|
async get(vDirectory: VirtualDirectory, option?: getOption): Promise<getResponse> {
|
||||||
vDirectory: VirtualDirectory,
|
const { baseUrl, api } = Config;
|
||||||
option?: getOption
|
const url = `${baseUrl}${api.get}${vDirectory.path}`;
|
||||||
): Promise<getResponse> {
|
const retry = option?.retry ?? 0;
|
||||||
const { baseUrl, api } = Config
|
|
||||||
const url = `${baseUrl}${api.get}${vDirectory.path}`
|
|
||||||
const retry = option?.retry ?? 0
|
|
||||||
|
|
||||||
const { miaoFetch } = useMiaoFetch({
|
const { miaoFetch } = useMiaoFetch({
|
||||||
retry
|
retry
|
||||||
})
|
});
|
||||||
const response = await miaoFetch({
|
const response = await miaoFetch({
|
||||||
url
|
url
|
||||||
})
|
});
|
||||||
return response.data
|
return response.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取对应文件下的数据
|
||||||
|
*/
|
||||||
|
getFile(vFile: VirtualFile, option?: getFileOption) {
|
||||||
|
// const { baseUrl, api } = Config
|
||||||
|
const url = vFile.url;
|
||||||
|
const retry = option?.retry ?? 0;
|
||||||
|
const axiosOption = option?.axiosOption ?? {};
|
||||||
|
|
||||||
|
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
|
||||||
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -72,195 +98,177 @@ const miaoFetchApi = {
|
|||||||
* 正常上传文件请使用uploadQueue
|
* 正常上传文件请使用uploadQueue
|
||||||
*/
|
*/
|
||||||
upload(data: File, targetVDir: VirtualDirectory, option?: uploadOption) {
|
upload(data: File, targetVDir: VirtualDirectory, option?: uploadOption) {
|
||||||
const { baseUrl, api } = Config
|
const { baseUrl, api } = Config;
|
||||||
const url = `${baseUrl}${api.upload}${targetVDir.path}`
|
const url = `${baseUrl}${api.upload}${targetVDir.path}`;
|
||||||
const retry = option?.retry ?? 0
|
const retry = option?.retry ?? 0;
|
||||||
const { miaoFetch, abortMiaoFetch } = useMiaoFetch({
|
const { miaoFetch, abortMiaoFetch } = useMiaoFetch({
|
||||||
retry
|
retry
|
||||||
})
|
});
|
||||||
const sizeTotal = data.size
|
const sizeTotal = data.size;
|
||||||
|
|
||||||
const opType = option?.type ?? 'write'
|
const opType = option?.type ?? "write";
|
||||||
|
|
||||||
const formData = new FormData()
|
const formData = new FormData();
|
||||||
|
|
||||||
formData.append('file', data)
|
formData.append("file", data);
|
||||||
// 必须这样传，不然中文乱码
|
// 必须这样传，不然中文乱码
|
||||||
formData.append('fileName', data.name)
|
formData.append("fileName", data.name);
|
||||||
formData.append('operateType', opType)
|
formData.append("operateType", opType);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
abort: () => abortMiaoFetch(),
|
abort: () => abortMiaoFetch(),
|
||||||
response: new Promise<{
|
response: new Promise<{
|
||||||
message: 'success' | 'failed'
|
message: "success" | "failed";
|
||||||
error?: string
|
error?: string;
|
||||||
}>(async (resolve) => {
|
}>(async resolve => {
|
||||||
const response = await miaoFetch({
|
const response = await miaoFetch({
|
||||||
url,
|
url,
|
||||||
method: 'post',
|
method: "post",
|
||||||
data: formData,
|
data: formData,
|
||||||
onUploadProgress(progressEvent) {
|
onUploadProgress(progressEvent) {
|
||||||
option &&
|
option && option.onProcess && option.onProcess(progressEvent.loaded / sizeTotal);
|
||||||
option.onProcess &&
|
|
||||||
option.onProcess(progressEvent.loaded / sizeTotal)
|
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
resolve(response.data);
|
||||||
})
|
})
|
||||||
resolve(response.data)
|
};
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 在目标文件夹下创建新的文件夹
|
* 在目标文件夹下创建新的文件夹
|
||||||
*/
|
*/
|
||||||
mkdir(
|
mkdir(targetVDir: VirtualDirectory, newFolderName: string, option?: mkdirOption) {
|
||||||
targetVDir: VirtualDirectory,
|
const { baseUrl, api } = Config;
|
||||||
newFolderName: string,
|
const url = `${baseUrl}${api.mkdir}${targetVDir.path}`;
|
||||||
option?: mkdirOption
|
|
||||||
) {
|
|
||||||
const { baseUrl, api } = Config
|
|
||||||
const url = `${baseUrl}${api.mkdir}${targetVDir.path}`
|
|
||||||
const { miaoFetch } = useMiaoFetch({
|
const { miaoFetch } = useMiaoFetch({
|
||||||
retry: option?.retry ?? 0
|
retry: option?.retry ?? 0
|
||||||
})
|
});
|
||||||
|
|
||||||
return new Promise<{
|
return new Promise<{
|
||||||
message: 'success' | 'failed'
|
message: "success" | "failed";
|
||||||
error?: string
|
error?: string;
|
||||||
}>(async (resolve) => {
|
}>(async resolve => {
|
||||||
const response = await miaoFetch({
|
const response = await miaoFetch({
|
||||||
url,
|
url,
|
||||||
method: 'post',
|
method: "post",
|
||||||
data: {
|
data: {
|
||||||
folderName: newFolderName
|
folderName: newFolderName
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
resolve(response.data)
|
resolve(response.data);
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 在目标文件夹下创建新的空文件，实际上是通过upload空文件实现
|
* 在目标文件夹下创建新的空文件，实际上是通过upload空文件实现
|
||||||
*/
|
*/
|
||||||
mkFile(
|
mkFile(targetVDir: VirtualDirectory, newFileName: string, option?: uploadOption) {
|
||||||
targetVDir: VirtualDirectory,
|
const emptyBlob = new Blob([]);
|
||||||
newFileName: string,
|
|
||||||
option?: uploadOption
|
|
||||||
) {
|
|
||||||
const emptyBlob = new Blob([])
|
|
||||||
const emptyFile = new File([emptyBlob], newFileName, {
|
const emptyFile = new File([emptyBlob], newFileName, {
|
||||||
type: 'text/plain'
|
type: "text/plain"
|
||||||
})
|
});
|
||||||
return this.upload(emptyFile, targetVDir, option)
|
return this.upload(emptyFile, targetVDir, option);
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 删除对应的文件或文件夹，若为文件夹会递归删除
|
* 删除对应的文件或文件夹，若为文件夹会递归删除
|
||||||
*/
|
*/
|
||||||
delete(target: VirtualFile | VirtualDirectory, option?: deleteOption) {
|
delete(target: VirtualFile | VirtualDirectory, option?: deleteOption) {
|
||||||
const { baseUrl, api } = Config
|
const { baseUrl, api } = Config;
|
||||||
const url = `${baseUrl}${api.delete}${target.path}`
|
const url = `${baseUrl}${api.delete}${target.path}`;
|
||||||
const retry = option?.retry ?? 0
|
const retry = option?.retry ?? 0;
|
||||||
const { miaoFetch } = useMiaoFetch({
|
const { miaoFetch } = useMiaoFetch({
|
||||||
retry
|
retry
|
||||||
})
|
});
|
||||||
|
|
||||||
return {
|
return {
|
||||||
response: new Promise<{
|
response: new Promise<{
|
||||||
eventId: number
|
eventId: number;
|
||||||
}>(async (resolve) => {
|
}>(async resolve => {
|
||||||
const response = await miaoFetch({
|
const response = await miaoFetch({
|
||||||
url,
|
url,
|
||||||
method: 'post'
|
method: "post"
|
||||||
|
});
|
||||||
|
resolve(response.data);
|
||||||
})
|
})
|
||||||
resolve(response.data)
|
};
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 重命名对应的文件或文件夹
|
* 重命名对应的文件或文件夹
|
||||||
*/
|
*/
|
||||||
rename(
|
rename(target: VirtualFile | VirtualDirectory, newName: string, option?: renameOption) {
|
||||||
target: VirtualFile | VirtualDirectory,
|
const { baseUrl, api } = Config;
|
||||||
newName: string,
|
const url = `${baseUrl}${api.rename}${target.path}`;
|
||||||
option?: renameOption
|
const retry = option?.retry ?? 0;
|
||||||
) {
|
|
||||||
const { baseUrl, api } = Config
|
|
||||||
const url = `${baseUrl}${api.rename}${target.path}`
|
|
||||||
const retry = option?.retry ?? 0
|
|
||||||
const { miaoFetch } = useMiaoFetch({
|
const { miaoFetch } = useMiaoFetch({
|
||||||
retry
|
retry
|
||||||
})
|
});
|
||||||
|
|
||||||
return {
|
return {
|
||||||
response: new Promise<{
|
response: new Promise<{
|
||||||
eventId: number
|
eventId: number;
|
||||||
}>(async (resolve) => {
|
}>(async resolve => {
|
||||||
const response = await miaoFetch({
|
const response = await miaoFetch({
|
||||||
url,
|
url,
|
||||||
method: 'post',
|
method: "post",
|
||||||
data: { newName }
|
data: { newName }
|
||||||
|
});
|
||||||
|
resolve(response.data);
|
||||||
})
|
})
|
||||||
resolve(response.data)
|
};
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 剪切文件或文件夹
|
* 剪切文件或文件夹
|
||||||
*/
|
*/
|
||||||
cut(
|
cut(target: VirtualFile | VirtualDirectory, to: VirtualDirectory, option?: cutOption) {
|
||||||
target: VirtualFile | VirtualDirectory,
|
const newPath = to.path;
|
||||||
to: VirtualDirectory,
|
const { baseUrl, api } = Config;
|
||||||
option?: cutOption
|
const url = `${baseUrl}${api.cut}${target.path}`;
|
||||||
) {
|
const retry = option?.retry ?? 0;
|
||||||
const newPath = to.path
|
|
||||||
const { baseUrl, api } = Config
|
|
||||||
const url = `${baseUrl}${api.cut}${target.path}`
|
|
||||||
const retry = option?.retry ?? 0
|
|
||||||
const { miaoFetch } = useMiaoFetch({
|
const { miaoFetch } = useMiaoFetch({
|
||||||
retry
|
retry
|
||||||
})
|
});
|
||||||
return {
|
return {
|
||||||
response: new Promise<{
|
response: new Promise<{
|
||||||
eventId: number
|
eventId: number;
|
||||||
}>(async (resolve) => {
|
}>(async resolve => {
|
||||||
const response = await miaoFetch({
|
const response = await miaoFetch({
|
||||||
url,
|
url,
|
||||||
method: 'post',
|
method: "post",
|
||||||
data: { newPath }
|
data: { newPath }
|
||||||
|
});
|
||||||
|
resolve(response.data);
|
||||||
})
|
})
|
||||||
resolve(response.data)
|
};
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 查询服务端操作事件的进展
|
* 查询服务端操作事件的进展
|
||||||
*/
|
*/
|
||||||
query(eventId: number, option?: queryOption) {
|
query(eventId: number, option?: queryOption) {
|
||||||
const { baseUrl, api } = Config
|
const { baseUrl, api } = Config;
|
||||||
const url = `${baseUrl}${api.query}`
|
const url = `${baseUrl}${api.query}`;
|
||||||
const retry = option?.retry ?? 0
|
const retry = option?.retry ?? 0;
|
||||||
const { miaoFetch } = useMiaoFetch({
|
const { miaoFetch } = useMiaoFetch({
|
||||||
retry
|
retry
|
||||||
})
|
});
|
||||||
return {
|
return {
|
||||||
response: new Promise<{
|
response: new Promise<{
|
||||||
status: 'process' | 'success' | 'failed'
|
status: "process" | "success" | "failed";
|
||||||
error?: unknown
|
error?: unknown;
|
||||||
}>(async (resolve) => {
|
}>(async resolve => {
|
||||||
const response = await miaoFetch({
|
const response = await miaoFetch({
|
||||||
url,
|
url,
|
||||||
method: 'get',
|
method: "get",
|
||||||
params: {
|
params: {
|
||||||
id: eventId
|
id: eventId
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
resolve(response.data);
|
||||||
})
|
})
|
||||||
resolve(response.data)
|
};
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
}
|
|
||||||
|
|
||||||
export default function useMiaoFetchApi() {
|
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"
|
import { Reactive, reactive } from "vue"
|
||||||
|
|
||||||
let views: Reactive<VirtualPage[]>
|
let views: Reactive<VirtualPages>
|
||||||
|
|
||||||
export default function useViretualPages(){
|
export default function useVirtualPages(){
|
||||||
if(views === undefined) {
|
if(views === undefined) {
|
||||||
views = reactive<VirtualPage[]>([])
|
// views = reactive<VirtualPage[]>([])
|
||||||
|
views = reactive(new VirtualPages())
|
||||||
}
|
}
|
||||||
return views
|
return views
|
||||||
}
|
}
|
||||||
@@ -1,4 +1,5 @@
|
|||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
|
import 'drag-drop-touch'
|
||||||
|
|
||||||
createApp(App).mount('#app')
|
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>
|
<template>
|
||||||
<div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
|
<miao-draggable-div class="miao-item" :isDraggable="!draggable" ref="itemRef" @on-drag-start="handleDragStart">
|
||||||
<miaoContextMenu :options="dropDownOptions" :touch-time-out="500" @select="handleDropdownSelect">
|
<miaoContextMenu :options="dropDownOptions ?? []" :touch-time-out="500" @select="handleDropdownSelect">
|
||||||
<div class="item-main" :class="props.selected ? 'item-main-selected' : ''" ref="mainRef">
|
<div class="item-main" :class="selected ? 'item-main-selected' : ''" ref="mainRef">
|
||||||
<div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
|
<div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
|
||||||
<Icon class="item-main-icon" v-show="clientWidth > 250"></Icon>
|
<Icon class="item-main-icon" v-show="clientWidth > 250"></Icon>
|
||||||
<div class="item-main-info">
|
<div class="item-main-info">
|
||||||
<div class="item-main-info-name">
|
<div class="item-main-info-name">
|
||||||
<Icon class="item-main-info-name-icon" v-show="clientWidth <= 250"></Icon>
|
<Icon class="item-main-info-name-icon" v-if="clientWidth <= 250"></Icon>
|
||||||
<n-ellipsis style="max-width: 140px;">{{ name }}</n-ellipsis>
|
<n-ellipsis :style="{ maxWidth: clientWidth > 250 ? '80%' : '75%' }">{{ name }}</n-ellipsis>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-main-info-date" v-if="time">
|
<div class="item-main-info-date" v-if="time">
|
||||||
{{ time }}
|
{{ time }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 菜单现在通过右键/长按呼出 -->
|
<miao-draggable-div class="item-main-dragBtn" :isDraggable="draggable">
|
||||||
<!-- <n-dropdown trigger="click" :options="dropDownOptions" @select="handleDropdownSelect">
|
<ReorderFourOutline></ReorderFourOutline>
|
||||||
<div class="item-main-option" @click="(e) => e.stopPropagation()">
|
</miao-draggable-div>
|
||||||
<EllipsisVertical class="item-main-option-icon" />
|
|
||||||
</div>
|
|
||||||
</n-dropdown> -->
|
|
||||||
</div>
|
</div>
|
||||||
</miaoContextMenu>
|
</miaoContextMenu>
|
||||||
</div>
|
</miao-draggable-div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
import miaoContextMenu from '@/components/miaoContextMenu.vue'
|
||||||
import miaoContextMenu from '../miaoContextMenu.vue'
|
|
||||||
import {
|
import {
|
||||||
DocumentText,
|
DocumentText,
|
||||||
FileTray,
|
FileTray,
|
||||||
@@ -37,39 +33,56 @@ import {
|
|||||||
LogoJavascript,
|
LogoJavascript,
|
||||||
LogoVue,
|
LogoVue,
|
||||||
PlayCircle,
|
PlayCircle,
|
||||||
Disc
|
Disc,
|
||||||
|
ReorderFourOutline,
|
||||||
} from '@vicons/ionicons5'
|
} from '@vicons/ionicons5'
|
||||||
import { computed, onMounted, ref } from 'vue'
|
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||||
import dateFormatter from '@/hooks/dateFormatter'
|
import dateFormatter from '@/hooks/dateFormatter'
|
||||||
import { NEllipsis } from 'naive-ui'
|
import { NEllipsis } from 'naive-ui'
|
||||||
|
import { DropdownOption } from 'naive-ui/es/dropdown';
|
||||||
|
import miaoDraggableDiv from '@/components/miaoDraggableDiv.vue'
|
||||||
// import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
// import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
||||||
|
|
||||||
// const miaoFetchApi = useMiaoFetchApi()
|
// const miaoFetchApi = useMiaoFetchApi()
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
item: VirtualDirectory | VirtualFile
|
item: {
|
||||||
|
name: string,
|
||||||
|
type: 'directory' | 'file'
|
||||||
|
stats: {
|
||||||
|
mtimeMs: number
|
||||||
|
}
|
||||||
|
}
|
||||||
name?: string
|
name?: string
|
||||||
color: string
|
color: string
|
||||||
selected: boolean
|
dropDownOptions?: DropdownOption[]
|
||||||
|
selected?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
download: []
|
download: []
|
||||||
delete: []
|
delete: []
|
||||||
rename: []
|
rename: []
|
||||||
dragStart: [event: DragEvent, item: VirtualDirectory | VirtualFile]
|
dragStart: [e: DragEvent]
|
||||||
onSelected: []
|
onSelected: []
|
||||||
|
plugin: [plugin: string]
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const itemType = ref<'file' | 'directory'>(props.item.type)
|
|
||||||
|
|
||||||
const mainRef = ref<HTMLDivElement>()
|
const mainRef = ref<HTMLDivElement>()
|
||||||
|
|
||||||
|
const draggable = ref(true)
|
||||||
|
|
||||||
// 使用ResizeObserver实现
|
// 使用ResizeObserver实现
|
||||||
const clientWidth = ref<number>(666)
|
const clientWidth = ref<number>(666)
|
||||||
|
|
||||||
const name = props.name ?? props.item.name
|
const name = props.name ?? props.item.name
|
||||||
|
|
||||||
|
const observer = new ResizeObserver(entries => {
|
||||||
|
for (let entry of entries) {
|
||||||
|
clientWidth.value = entry.contentRect.width;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
const time = computed(() => {
|
const time = computed(() => {
|
||||||
return dateFormatter(
|
return dateFormatter(
|
||||||
new Date(props.item.stats.mtimeMs),
|
new Date(props.item.stats.mtimeMs),
|
||||||
@@ -77,50 +90,7 @@ const time = computed(() => {
|
|||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
const dropDownOptions = computed(() => {
|
// 应该将所有事件emit出去才对
|
||||||
const options = [
|
|
||||||
{
|
|
||||||
label: '重命名',
|
|
||||||
key: 'rename'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '删除',
|
|
||||||
key: 'delete'
|
|
||||||
},
|
|
||||||
]
|
|
||||||
if (itemType.value === 'file') {
|
|
||||||
options.push(
|
|
||||||
...[
|
|
||||||
{
|
|
||||||
label: '下载',
|
|
||||||
key: 'download'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
)
|
|
||||||
}
|
|
||||||
if (props.selected === false) {
|
|
||||||
options.push(
|
|
||||||
...[
|
|
||||||
{
|
|
||||||
label: '多选:选择',
|
|
||||||
key: 'select'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
options.push(
|
|
||||||
...[
|
|
||||||
{
|
|
||||||
label: '多选:取消',
|
|
||||||
key: 'select'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
)
|
|
||||||
}
|
|
||||||
return options
|
|
||||||
})
|
|
||||||
|
|
||||||
// 是不是可以直接在这里面实现？
|
|
||||||
const handleDropdownSelect = (key: string) => {
|
const handleDropdownSelect = (key: string) => {
|
||||||
if (key === 'rename') {
|
if (key === 'rename') {
|
||||||
emit('rename')
|
emit('rename')
|
||||||
@@ -130,6 +100,9 @@ const handleDropdownSelect = (key: string) => {
|
|||||||
emit('delete')
|
emit('delete')
|
||||||
} else if (key === 'select') {
|
} else if (key === 'select') {
|
||||||
emit('onSelected')
|
emit('onSelected')
|
||||||
|
} else if (key.startsWith('plugin:')) {
|
||||||
|
const plugin = key.split(':')[1]
|
||||||
|
emit('plugin', plugin)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -151,22 +124,22 @@ const Icon = computed(() => {
|
|||||||
return Disc
|
return Disc
|
||||||
} else if (
|
} else if (
|
||||||
[
|
[
|
||||||
'.xbm',
|
'xbm',
|
||||||
'.tif',
|
'tif',
|
||||||
'pjp',
|
'pjp',
|
||||||
'.svgz',
|
'svgz',
|
||||||
'jpg',
|
'jpg',
|
||||||
'jpeg',
|
'jpeg',
|
||||||
'ico',
|
'ico',
|
||||||
'tiff',
|
'tiff',
|
||||||
'.gif',
|
'gif',
|
||||||
'svg',
|
'svg',
|
||||||
'.jfif',
|
'jfif',
|
||||||
'.webp',
|
'webp',
|
||||||
'.png',
|
'png',
|
||||||
'.bmp',
|
'bmp',
|
||||||
'pjpeg',
|
'pjpeg',
|
||||||
'.avif'
|
'avif'
|
||||||
].includes(aft)
|
].includes(aft)
|
||||||
) {
|
) {
|
||||||
return Image
|
return Image
|
||||||
@@ -190,28 +163,28 @@ const Icon = computed(() => {
|
|||||||
|
|
||||||
const itemRef = ref()
|
const itemRef = ref()
|
||||||
|
|
||||||
const handleDragStart = (event: DragEvent) => {
|
const handleDragStart = (e: DragEvent) => {
|
||||||
emit('dragStart', event, props.item)
|
emit('dragStart', e)
|
||||||
// dataBus.set('dragData', [props.item])
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
const observer = new ResizeObserver(entries => {
|
|
||||||
for (let entry of entries) {
|
|
||||||
clientWidth.value = entry.contentRect.width;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (mainRef.value) {
|
if (mainRef.value) {
|
||||||
observer.observe(mainRef.value);
|
observer.observe(mainRef.value);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
if (mainRef.value) {
|
||||||
|
observer.unobserve(mainRef.value);
|
||||||
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.miao-item {
|
.miao-item {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: calc(100% - 20px);
|
width: calc(100% - 20px);
|
||||||
min-width: 170px;
|
// min-width: 170px;
|
||||||
// aspect-ratio: 66/9;
|
// aspect-ratio: 66/9;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -229,17 +202,20 @@ onMounted(() => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
transition: background-color 0.3s ease;
|
transition: background-color 0.3s ease;
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
.item-main-front {
|
.item-main-front {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 10px;
|
min-width: 10px;
|
||||||
border-radius: 7px 0 0 7px;
|
border-radius: 7px 0 0 7px;
|
||||||
background-color: rgb(0, 0, 0);
|
background-color: rgb(0, 0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-main-icon {
|
.item-main-icon {
|
||||||
|
min-width: 30px;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
height: 80%;
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
color: #00403e;
|
color: #00403e;
|
||||||
transition: color 0.15s ease-out;
|
transition: color 0.15s ease-out;
|
||||||
}
|
}
|
||||||
@@ -247,6 +223,7 @@ onMounted(() => {
|
|||||||
.item-main-info {
|
.item-main-info {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
width: calc(100% - 10px);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
@@ -268,6 +245,7 @@ onMounted(() => {
|
|||||||
&-date {
|
&-date {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
font-size: small;
|
font-size: small;
|
||||||
|
text-wrap: nowrap;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -305,11 +283,21 @@ onMounted(() => {
|
|||||||
background-color: #d2d2d2;
|
background-color: #d2d2d2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-main-selected {
|
.item-main-selected {
|
||||||
background-color: rgba(0, 128, 207, 0.32);
|
background-color: rgba(0, 128, 207, 0.32);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: rgba(0, 128, 207, 0.64);;
|
background-color: rgba(0, 128, 207, 0.64);
|
||||||
|
;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.item-main-dragBtn {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
position: absolute;
|
||||||
|
right: 5px;
|
||||||
|
}
|
||||||
</style>
|
</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";
|
import { directory, file } from "./type";
|
||||||
|
|
||||||
export type miaoFetchConfig = {
|
export type miaoFetchConfig = {
|
||||||
retry?: number;
|
retry?: number
|
||||||
};
|
axiosOption?: AxiosRequestConfig<any>
|
||||||
|
}
|
||||||
|
|
||||||
export type getOption = {} & miaoFetchConfig;
|
export type getOption = {} & miaoFetchConfig;
|
||||||
|
|
||||||
|
export type getFileOption = {
|
||||||
|
/**
|
||||||
|
* 下载进度回调函数
|
||||||
|
* @param {any} percent 进度百分比，float类型, 0-1
|
||||||
|
*/
|
||||||
|
onProcess?: (percent: number) => void;
|
||||||
|
} & miaoFetchConfig;
|
||||||
|
|
||||||
export type getResponse = (file | directory)[];
|
export type getResponse = (file | directory)[];
|
||||||
|
|
||||||
export type uploadOption = {
|
export type uploadOption = {
|
||||||
/**
|
/**
|
||||||
* 上传进度回调函数
|
* 上传进度回调函数
|
||||||
* @param {any} percent 进度百分比，float类型
|
* @param {any} percent 进度百分比，float类型, 0-1
|
||||||
*/
|
*/
|
||||||
onProcess?: (percent: number) => void;
|
onProcess?: (percent: number) => void;
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -1,3 +1,6 @@
|
|||||||
|
import PluginCenter from "@/class/PluginCenter";
|
||||||
|
import { VirtualPages } from "@/class/VirtualPage";
|
||||||
|
|
||||||
export type stats = {
|
export type stats = {
|
||||||
atimeMs: number; // 上次访问时间（毫秒）
|
atimeMs: number; // 上次访问时间（毫秒）
|
||||||
birthtimeMs: number; // 创建时间（毫秒）
|
birthtimeMs: number; // 创建时间（毫秒）
|
||||||
@@ -20,3 +23,24 @@ export type directory = {
|
|||||||
stats: stats;
|
stats: stats;
|
||||||
parent?: directory;
|
parent?: directory;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type alertTipType = (content: string, options?: AlertTipMessageOptions) => (newContent: string, newOptions?: AlertTipMessageOptions) => void;
|
||||||
|
|
||||||
|
export interface AlertTipMessageOptions {
|
||||||
|
type?: "info" | "success" | "error";
|
||||||
|
timeout?: number;
|
||||||
|
id?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum PluginExportType {
|
||||||
|
default = "default",
|
||||||
|
component = "component"
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface usePluginHooksType {
|
||||||
|
globalAlertTip: alertTipType;
|
||||||
|
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 { defineConfig } from "vite";
|
||||||
import vue from '@vitejs/plugin-vue'
|
import vue from "@vitejs/plugin-vue";
|
||||||
import { resolve } from 'path'
|
import { resolve } from "path";
|
||||||
import { viteSingleFile } from 'vite-plugin-singlefile'
|
// import { viteSingleFile } from 'vite-plugin-singlefile'
|
||||||
|
import { visualizer } from 'rollup-plugin-visualizer'
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [vue(), viteSingleFile()],
|
base: './',
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
visualizer()
|
||||||
|
// viteSingleFile()
|
||||||
|
],
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
'@': resolve(__dirname, 'src')
|
'@': resolve(__dirname, 'src')
|
||||||
@@ -55,15 +61,17 @@ export default defineConfig({
|
|||||||
build: {
|
build: {
|
||||||
rollupOptions: {
|
rollupOptions: {
|
||||||
input: {
|
input: {
|
||||||
main: resolve(__dirname, 'index.html')
|
main: 'index.html'
|
||||||
},
|
},
|
||||||
output: {
|
output: {
|
||||||
// 配置输出为单文件
|
entryFileNames: 'assets/[name]-[hash].js',
|
||||||
inlineDynamicImports: true,
|
chunkFileNames: 'assets/chunk-[name]-[hash].js',
|
||||||
manualChunks: undefined,
|
assetFileNames: 'assets/[name]-[hash][extname]',
|
||||||
entryFileNames: 'bundle.js',
|
manualChunks(id) {
|
||||||
format: 'iife', // 立即执行函数格式
|
if (id.includes('export.ts') && id.includes('plugins')) {
|
||||||
name: 'MyBundle'
|
return 'pluginExports'
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in new issue
Block a user