Compare commits
17
Commits
5719012c2c
..
2.0.0
| Author | SHA1 | Date | |
|---|---|---|---|
 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,6 @@ dist-ssr
|
|||||||
*.sw?
|
*.sw?
|
||||||
.vscode
|
.vscode
|
||||||
serve
|
serve
|
||||||
|
miao-directory.exe
|
||||||
|
miao-directory-amd64-linux
|
||||||
|
miao-directory-amd64-win.exe
|
||||||
+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="./public/favicon.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>
|
||||||
|
|||||||
+46
-27
@@ -1,29 +1,48 @@
|
|||||||
{
|
{
|
||||||
"name": "miao-directory-web",
|
"name": "miao-directory-web",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"dev:host": "vite --host 0.0.0.0",
|
"dev:host": "vite --host 0.0.0.0",
|
||||||
"build": "vue-tsc -b && vite build",
|
"build": "vue-tsc -b && vite build",
|
||||||
"preview": "vite preview"
|
"build:auto": "pnpm run build && rm -rf ./serve/web/* && cp -r ./dist/* ./serve/web/ && cd ./serve && go build && mv ./miao-directory.exe ../",
|
||||||
},
|
"build:auto:release": "pnpm run build && rm -rf ./serve/web/* && cp -r ./dist/* ./serve/web/ && cd ./serve && go env -w GOOS=windows GOARCH=amd64 && go build -o ../miao-directory-amd64-win.exe && go env -w GOOS=linux GOARCH=amd64 && go build -o ../miao-directory-amd64-linux",
|
||||||
"dependencies": {
|
"preview": "vite preview"
|
||||||
"@vicons/ionicons5": "^0.12.0",
|
},
|
||||||
"axios": "^1.7.3",
|
"dependencies": {
|
||||||
"lodash": "^4.17.21",
|
"@codemirror/lang-go": "^6.0.1",
|
||||||
"naive-ui": "^2.39.0",
|
"@codemirror/lang-html": "^6.4.9",
|
||||||
"sass": "^1.77.8",
|
"@codemirror/lang-javascript": "^6.2.2",
|
||||||
"vue": "^3.4.35"
|
"@codemirror/lang-json": "^6.0.1",
|
||||||
},
|
"@codemirror/lang-markdown": "^6.2.5",
|
||||||
"devDependencies": {
|
"@codemirror/lang-python": "^6.1.6",
|
||||||
"@types/lodash": "^4.17.7",
|
"@codemirror/lang-sass": "^6.0.2",
|
||||||
"@types/node": "^22.1.0",
|
"@codemirror/lang-sql": "^6.7.1",
|
||||||
"@vitejs/plugin-vue": "^5.1.2",
|
"@codemirror/lang-vue": "^0.1.3",
|
||||||
"typescript": "^5.5.3",
|
"@codemirror/lang-xml": "^6.1.0",
|
||||||
"vite": "^5.4.0",
|
"@codemirror/lang-yaml": "^6.1.1",
|
||||||
"vite-plugin-singlefile": "^2.0.2",
|
"@vicons/ionicons5": "^0.12.0",
|
||||||
"vue-tsc": "^2.0.29"
|
"axios": "^1.7.3",
|
||||||
}
|
"codemirror": "^6.0.1",
|
||||||
|
"lodash": "^4.17.21",
|
||||||
|
"naive-ui": "^2.39.0",
|
||||||
|
"pdfjs-dist": "^4.5.136",
|
||||||
|
"sass": "^1.77.8",
|
||||||
|
"vue": "^3.4.35",
|
||||||
|
"vue-codemirror": "^6.1.1",
|
||||||
|
"xgplayer": "^3.0.20",
|
||||||
|
"xgplayer-subtitles": "^3.0.20"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/lodash": "^4.17.7",
|
||||||
|
"@types/node": "^22.1.0",
|
||||||
|
"@types/pdfjs-dist": "^2.10.378",
|
||||||
|
"@vitejs/plugin-vue": "^5.1.2",
|
||||||
|
"typescript": "^5.5.3",
|
||||||
|
"vite": "^5.4.0",
|
||||||
|
"vite-plugin-singlefile": "^2.0.2",
|
||||||
|
"vue-tsc": "^2.0.29"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Generated
+1100
File diff suppressed because it is too large.
Load diff
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
+48
-38
@@ -9,12 +9,12 @@ import {
|
|||||||
EllipsisVertical,
|
EllipsisVertical,
|
||||||
QrCodeOutline
|
QrCodeOutline
|
||||||
} from '@vicons/ionicons5'
|
} from '@vicons/ionicons5'
|
||||||
import miaoDirectory from './views/miaoDirectory.vue'
|
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 config from './config'
|
import config from './config'
|
||||||
import useVirtualPages from './hooks/useVirtualPages'
|
import useVirtualPages from './hooks/useVirtualPages'
|
||||||
|
import init from './hooks/init'
|
||||||
|
|
||||||
const { baseUrl } = config
|
const { baseUrl } = config
|
||||||
|
|
||||||
@@ -46,19 +46,11 @@ const createView = (
|
|||||||
currentFiles?: VirtualFile[],
|
currentFiles?: VirtualFile[],
|
||||||
index?: number
|
index?: number
|
||||||
) => {
|
) => {
|
||||||
index ?? (index = views.length)
|
views.push(component, currentDirectorys, 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])
|
createView(miaoDirectory, [rootDirectory])
|
||||||
}
|
}
|
||||||
@@ -66,14 +58,14 @@ const deleteView = (index: number) => {
|
|||||||
|
|
||||||
// 点击标题是隐藏其他标签或显示其他标签，还挺好用的
|
// 点击标题是隐藏其他标签或显示其他标签，还挺好用的
|
||||||
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
|
||||||
}
|
}
|
||||||
@@ -111,25 +103,31 @@ const handleMenuSelect = (key: string) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
init()
|
||||||
createView(miaoDirectory, [rootDirectory])
|
createView(miaoDirectory, [rootDirectory])
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="view">
|
<div class="view">
|
||||||
<div class="view-controler">
|
<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"
|
class="tab"
|
||||||
v-for="(view, index) of views"
|
v-for="(view, index) of views._views"
|
||||||
:key="view.uid">
|
:key="view.uid">
|
||||||
<div
|
<span
|
||||||
class="tab-title"
|
class="tab-title"
|
||||||
|
:title="view.title"
|
||||||
@click="handleClickTitle(index)">
|
@click="handleClickTitle(index)">
|
||||||
{{ view.title }}
|
{{
|
||||||
</div>
|
view.title.length > 5 && 0
|
||||||
|
? `${view.title.substring(0, 5)}...`
|
||||||
|
: view.title
|
||||||
|
}}
|
||||||
|
</span>
|
||||||
<div
|
<div
|
||||||
class="tab-point"
|
class="tab-point"
|
||||||
:style="{ backgroundColor: view.color }"></div>
|
:style="{ backgroundColor: view.color }"></div>
|
||||||
@@ -183,12 +181,13 @@ onMounted(() => {
|
|||||||
<transition-group name="page">
|
<transition-group name="page">
|
||||||
<div
|
<div
|
||||||
class="view-container-item"
|
class="view-container-item"
|
||||||
v-for="(view, index) of views"
|
v-for="(view, index) of views._views"
|
||||||
v-show="view.visible"
|
v-show="view.visible"
|
||||||
:key="view.uid">
|
:key="view.uid">
|
||||||
<component
|
<component
|
||||||
:is="view.component"
|
:is="view.component"
|
||||||
v-model:current-objects="view.currentDirectorys"
|
v-model:current-directorys="view.currentDirectorys"
|
||||||
|
v-model:current-files="view.currentFiles"
|
||||||
:id="view.uid"
|
:id="view.uid"
|
||||||
:color="view.color"
|
:color="view.color"
|
||||||
@exit="deleteView(index)"></component>
|
@exit="deleteView(index)"></component>
|
||||||
@@ -206,7 +205,7 @@ onMounted(() => {
|
|||||||
</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 +213,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 +229,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,10 +237,19 @@ $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 {
|
||||||
@@ -263,7 +272,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 +297,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 +306,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 +326,14 @@ $tag-width: 170px;
|
|||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
// flex-direction: column;
|
// flex-direction: column;
|
||||||
height: calc(100% - $controler-height);
|
height: calc(100% - $controller-height);
|
||||||
overflow-y: overlay;
|
overflow-y: hidden;
|
||||||
overflow-x: overlay;
|
overflow-x: overlay;
|
||||||
|
|
||||||
.view-container-item {
|
.view-container-item {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
min-width: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
@@ -351,8 +361,8 @@ $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;
|
||||||
|
|||||||
@@ -0,0 +1,75 @@
|
|||||||
|
import useVirtualPages from '@/hooks/useVirtualPages'
|
||||||
|
import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
|
||||||
|
|
||||||
|
type plugin = {
|
||||||
|
// 用于显示的名字
|
||||||
|
name: string
|
||||||
|
// 判断是否可以使用这个组件
|
||||||
|
// 使用组件即调用下面的func
|
||||||
|
filter: (VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
|
||||||
|
func: (VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class PluginCenter {
|
||||||
|
constructor() {
|
||||||
|
this.pluginsMap = {}
|
||||||
|
}
|
||||||
|
pluginsMap: {
|
||||||
|
[key: string]: plugin
|
||||||
|
}
|
||||||
|
|
||||||
|
register(key: string, plugin: plugin) {
|
||||||
|
this.pluginsMap[key] = plugin
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 便捷地注册一个组件为插件，触发时直接用新页面打开
|
||||||
|
*/
|
||||||
|
registerComponent(
|
||||||
|
key: string,
|
||||||
|
name: string,
|
||||||
|
getComponent: () => Promise<any>,
|
||||||
|
filter: (
|
||||||
|
VDirectorys: VirtualDirectory[],
|
||||||
|
VFiles: VirtualFile[]
|
||||||
|
) => boolean
|
||||||
|
): void {
|
||||||
|
let _component: any
|
||||||
|
const views = useVirtualPages()
|
||||||
|
this.register(key, {
|
||||||
|
name,
|
||||||
|
filter,
|
||||||
|
func: async (
|
||||||
|
VDirectorys: VirtualDirectory[],
|
||||||
|
VFiles: VirtualFile[]
|
||||||
|
) => {
|
||||||
|
if (filter(VDirectorys, VFiles) === false) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (_component === undefined) _component = await getComponent()
|
||||||
|
views.push(_component, VDirectorys, VFiles)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
getUsablePlugin(VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) {
|
||||||
|
const usableList = []
|
||||||
|
for (let key of Object.keys(this.pluginsMap)) {
|
||||||
|
if (this.pluginsMap[key].filter(VDirectorys, VFiles)) {
|
||||||
|
usableList.push(key)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return usableList.map((key) => ({
|
||||||
|
key,
|
||||||
|
...this.pluginsMap[key]
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
usePlugin(
|
||||||
|
key: string,
|
||||||
|
VDirectorys: VirtualDirectory[],
|
||||||
|
VFiles: VirtualFile[]
|
||||||
|
) {
|
||||||
|
this.pluginsMap[key].func(VDirectorys, VFiles)
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import config from "@/config";
|
||||||
import generateId from "@/hooks/generateId";
|
import generateId from "@/hooks/generateId";
|
||||||
import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
|
import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
|
||||||
// import { debounce } from "lodash";
|
// import { debounce } from "lodash";
|
||||||
@@ -23,6 +24,10 @@ export class VirtualFile {
|
|||||||
get path() {
|
get path() {
|
||||||
return `${this.parent.path}${this.name}`;
|
return `${this.parent.path}${this.name}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get url() {
|
||||||
|
return `${config.api.get}${this.parent.path}${this.name}`
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class VirtualDirectory {
|
class VirtualDirectory {
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { shallowRef } from "vue";
|
import { reactive, shallowRef } from "vue";
|
||||||
import VirtualDirectory, { VirtualFile } from "./VirtualDirectory";
|
import VirtualDirectory, { VirtualFile } from "./VirtualDirectory";
|
||||||
import generateId from "@/hooks/generateId";
|
import generateId from "@/hooks/generateId";
|
||||||
|
|
||||||
@@ -13,7 +13,7 @@ const getRandomWebSafeColor = (() => {
|
|||||||
})();
|
})();
|
||||||
|
|
||||||
export default class VirtualPage {
|
export default class VirtualPage {
|
||||||
constructor(component: any, initObjects?:{ directorys?: VirtualDirectory[], files?: VirtualFile[]}) {
|
constructor(component: any, initObjects?: { directorys?: VirtualDirectory[]; files?: VirtualFile[] }) {
|
||||||
this.component = shallowRef(component);
|
this.component = shallowRef(component);
|
||||||
this.currentDirectorys = initObjects?.directorys ?? [];
|
this.currentDirectorys = initObjects?.directorys ?? [];
|
||||||
this.currentFiles = initObjects?.files ?? [];
|
this.currentFiles = initObjects?.files ?? [];
|
||||||
@@ -43,7 +43,7 @@ export default class VirtualPage {
|
|||||||
if (this._title) {
|
if (this._title) {
|
||||||
return this._title;
|
return this._title;
|
||||||
}
|
}
|
||||||
return this.currentDirectorys[0].name;
|
return this?.currentDirectorys[0]?.name ?? this?.currentFiles[0]?.name ?? "未命名标签";
|
||||||
}
|
}
|
||||||
|
|
||||||
setTitle(title: string) {
|
setTitle(title: string) {
|
||||||
@@ -61,3 +61,63 @@ export default class VirtualPage {
|
|||||||
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].uid === id) {
|
||||||
|
return parseInt(i);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 根据id得到view
|
||||||
|
* @param {any} id 要查询的页面的id
|
||||||
|
*/
|
||||||
|
getView(id: number) {
|
||||||
|
for (let v of this._views) {
|
||||||
|
if (v.uid === id) {
|
||||||
|
return v;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 推入一个新的页面
|
||||||
|
*/
|
||||||
|
push(component: any, currentDirectorys?: VirtualDirectory[], currentFiles?: VirtualFile[], index?: number) {
|
||||||
|
index ?? (index = this.length);
|
||||||
|
this._views.splice(
|
||||||
|
index,
|
||||||
|
0,
|
||||||
|
reactive<VirtualPage>(
|
||||||
|
new VirtualPage(component, {
|
||||||
|
directorys: [...(currentDirectorys ?? [])],
|
||||||
|
files: [...(currentFiles ?? [])]
|
||||||
|
})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 根据次序删除一个页面
|
||||||
|
*/
|
||||||
|
deleteView(index: number) {
|
||||||
|
this._views.splice(index, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
|
<div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
|
||||||
<miaoContextMenu :options="dropDownOptions" :touch-time-out="500" @select="handleDropdownSelect">
|
<miaoContextMenu :options="dropDownOptions" :touch-time-out="500" @select="handleDropdownSelect">
|
||||||
<div class="item-main" :class="props.selected ? 'item-main-selected' : ''" ref="mainRef">
|
<div class="item-main" :class="selected ? 'item-main-selected' : ''" ref="mainRef">
|
||||||
<div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
|
<div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
|
||||||
<Icon class="item-main-icon" v-show="clientWidth > 250"></Icon>
|
<Icon class="item-main-icon" v-show="clientWidth > 250"></Icon>
|
||||||
<div class="item-main-info">
|
<div class="item-main-info">
|
||||||
<div class="item-main-info-name">
|
<div class="item-main-info-name">
|
||||||
<Icon class="item-main-info-name-icon" v-show="clientWidth <= 250"></Icon>
|
<Icon class="item-main-info-name-icon" v-if="clientWidth <= 250"></Icon>
|
||||||
<n-ellipsis style="max-width: 140px;">{{ name }}</n-ellipsis>
|
<n-ellipsis style="max-width: 80%;">{{ 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 }}
|
||||||
@@ -42,6 +42,7 @@ import {
|
|||||||
import { computed, onMounted, ref } from 'vue'
|
import { computed, 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 usePluginCenter from '@/hooks/usePluginCenter'
|
||||||
// import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
// import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
||||||
|
|
||||||
// const miaoFetchApi = useMiaoFetchApi()
|
// const miaoFetchApi = useMiaoFetchApi()
|
||||||
@@ -50,7 +51,7 @@ const props = defineProps<{
|
|||||||
item: VirtualDirectory | VirtualFile
|
item: VirtualDirectory | VirtualFile
|
||||||
name?: string
|
name?: string
|
||||||
color: string
|
color: string
|
||||||
selected: boolean
|
selectedItem: (VirtualDirectory | VirtualFile)[]
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
@@ -61,6 +62,8 @@ const emit = defineEmits<{
|
|||||||
onSelected: []
|
onSelected: []
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
const pluginCenter = usePluginCenter()
|
||||||
|
|
||||||
const itemType = ref<'file' | 'directory'>(props.item.type)
|
const itemType = ref<'file' | 'directory'>(props.item.type)
|
||||||
|
|
||||||
const mainRef = ref<HTMLDivElement>()
|
const mainRef = ref<HTMLDivElement>()
|
||||||
@@ -70,6 +73,10 @@ const clientWidth = ref<number>(666)
|
|||||||
|
|
||||||
const name = props.name ?? props.item.name
|
const name = props.name ?? props.item.name
|
||||||
|
|
||||||
|
const selected = computed(() => {
|
||||||
|
return props.selectedItem.includes(props.item)
|
||||||
|
})
|
||||||
|
|
||||||
const time = computed(() => {
|
const time = computed(() => {
|
||||||
return dateFormatter(
|
return dateFormatter(
|
||||||
new Date(props.item.stats.mtimeMs),
|
new Date(props.item.stats.mtimeMs),
|
||||||
@@ -78,6 +85,12 @@ const time = computed(() => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
const dropDownOptions = computed(() => {
|
const dropDownOptions = computed(() => {
|
||||||
|
const items = [...props.selectedItem]
|
||||||
|
if (!selected.value) {
|
||||||
|
items.push(props.item)
|
||||||
|
}
|
||||||
|
const vDirs = items.filter(v => v.type === 'directory')
|
||||||
|
const vFiles = items.filter(v => v.type === 'file')
|
||||||
const options = [
|
const options = [
|
||||||
{
|
{
|
||||||
label: '重命名',
|
label: '重命名',
|
||||||
@@ -98,7 +111,7 @@ const dropDownOptions = computed(() => {
|
|||||||
]
|
]
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
if (props.selected === false) {
|
if (selected.value === false) {
|
||||||
options.push(
|
options.push(
|
||||||
...[
|
...[
|
||||||
{
|
{
|
||||||
@@ -117,6 +130,10 @@ const dropDownOptions = computed(() => {
|
|||||||
]
|
]
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
options.push(...pluginCenter.getUsablePlugin(vDirs, vFiles).map(v => ({
|
||||||
|
label: `插件:${v.name}`,
|
||||||
|
key: `plugin:${v.key}`
|
||||||
|
})))
|
||||||
return options
|
return options
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -130,6 +147,15 @@ 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 items = [...props.selectedItem]
|
||||||
|
if (!selected.value) {
|
||||||
|
items.push(props.item)
|
||||||
|
}
|
||||||
|
const vDirs = items.filter(v => v.type === 'directory')
|
||||||
|
const vFiles = items.filter(v => v.type === 'file')
|
||||||
|
const plugin = key.split(':')[1]
|
||||||
|
pluginCenter.usePlugin(plugin, vDirs, vFiles)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -223,6 +249,7 @@ onMounted(() => {
|
|||||||
.item-main {
|
.item-main {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
min-width: 200px;
|
||||||
height: 95%;
|
height: 95%;
|
||||||
background-color: rgb(255, 255, 255);
|
background-color: rgb(255, 255, 255);
|
||||||
border-radius: 7px;
|
border-radius: 7px;
|
||||||
@@ -232,14 +259,16 @@ onMounted(() => {
|
|||||||
|
|
||||||
.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 +276,7 @@ onMounted(() => {
|
|||||||
.item-main-info {
|
.item-main-info {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
width: calc( 100% - 10px );
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
@@ -305,10 +335,13 @@ onMounted(() => {
|
|||||||
background-color: #d2d2d2;
|
background-color: #d2d2d2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-main-selected {
|
.item-main-selected {
|
||||||
background-color: rgba(0, 128, 207, 0.32);
|
background-color: rgba(0, 128, 207, 0.32);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: rgba(0, 128, 207, 0.64);;
|
background-color: rgba(0, 128, 207, 0.64);
|
||||||
|
;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,101 @@
|
|||||||
|
import MiaoDirectory from '@/views/miaoDirectory.vue'
|
||||||
|
import usePluginCenter from './usePluginCenter'
|
||||||
|
|
||||||
|
export default function init() {
|
||||||
|
const pluginCenter = usePluginCenter()
|
||||||
|
pluginCenter.registerComponent(
|
||||||
|
'miaoDirectory',
|
||||||
|
'文件夹',
|
||||||
|
async () => MiaoDirectory,
|
||||||
|
(vDirs, vFiles) => {
|
||||||
|
if (vFiles.length) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
return vDirs.length === 1
|
||||||
|
}
|
||||||
|
)
|
||||||
|
pluginCenter.registerComponent(
|
||||||
|
'miaoVideoPlayer',
|
||||||
|
'视频',
|
||||||
|
async () => (await import('@/views/miaoVideoPlayer.vue')).default,
|
||||||
|
(vDirs, vFiles) => {
|
||||||
|
if (vDirs.length !== 0) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
if (vFiles.length === 0) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
for (let i of vFiles) {
|
||||||
|
for (let s of ['mp4', 'm3u8', 'hls']) {
|
||||||
|
if (i.name.endsWith(s)) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
)
|
||||||
|
pluginCenter.registerComponent(
|
||||||
|
'miaoIframe',
|
||||||
|
'框架',
|
||||||
|
async () => (await import('@/views/miaoIframe.vue')).default,
|
||||||
|
(vDirs, vFiles) => {
|
||||||
|
if (vDirs.length !== 0) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
if (vFiles.length !== 1) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
return vFiles[0].name.endsWith('html')
|
||||||
|
}
|
||||||
|
)
|
||||||
|
pluginCenter.registerComponent(
|
||||||
|
'miaoPDF',
|
||||||
|
'PDF浏览',
|
||||||
|
async () => (await import('@/views/miaoPDF.vue')).default,
|
||||||
|
(vDirs, vFiles) => {
|
||||||
|
if (vDirs.length !== 0) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
if (vFiles.length !== 1) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
return vFiles[0].name.endsWith('pdf')
|
||||||
|
}
|
||||||
|
)
|
||||||
|
pluginCenter.registerComponent(
|
||||||
|
'miaoCodeMirror',
|
||||||
|
'代码编辑',
|
||||||
|
async () => (await import('@/views/miaoCodeMirror.vue')).default,
|
||||||
|
(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
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -67,9 +67,30 @@ const miaoFetchApi = {
|
|||||||
return response.data
|
return response.data
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取对应文件夹下的数据
|
||||||
|
*/
|
||||||
|
async getFile(
|
||||||
|
vFile: VirtualFile,
|
||||||
|
option?: getOption
|
||||||
|
): Promise<getResponse> {
|
||||||
|
// const { baseUrl, api } = Config
|
||||||
|
const url = vFile.url
|
||||||
|
const retry = option?.retry ?? 0
|
||||||
|
const axiosOption = option?.axiosOption ?? {}
|
||||||
|
|
||||||
|
const { miaoFetch } = useMiaoFetch({
|
||||||
|
retry
|
||||||
|
})
|
||||||
|
const response = await miaoFetch({
|
||||||
|
url, ...axiosOption
|
||||||
|
})
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 上传单个文件到对应文件夹, 后续要将data类型改成buffer以支持分片上传
|
* 上传单个文件到对应文件夹, 后续要将data类型改成buffer以支持分片上传
|
||||||
* 正常上传文件请使用uploadQueue
|
* 正常上传文件请使用uploadQueue
|
||||||
*/
|
*/
|
||||||
upload(data: File, targetVDir: VirtualDirectory, option?: uploadOption) {
|
upload(data: File, targetVDir: VirtualDirectory, option?: uploadOption) {
|
||||||
const { baseUrl, api } = Config
|
const { baseUrl, api } = Config
|
||||||
|
|||||||
@@ -0,0 +1,11 @@
|
|||||||
|
import PluginCenter from "@/class/PluginCenter";
|
||||||
|
import { reactive } from "vue";
|
||||||
|
|
||||||
|
let pluginCenter: PluginCenter
|
||||||
|
|
||||||
|
export default function usePluginCenter(){
|
||||||
|
if(!pluginCenter) {
|
||||||
|
pluginCenter = reactive(new PluginCenter())
|
||||||
|
}
|
||||||
|
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 useViretualPages(){
|
||||||
if(views === undefined) {
|
if(views === undefined) {
|
||||||
views = reactive<VirtualPage[]>([])
|
// views = reactive<VirtualPage[]>([])
|
||||||
|
views = reactive(new VirtualPages())
|
||||||
}
|
}
|
||||||
return views
|
return views
|
||||||
}
|
}
|
||||||
File diff suppressed because it is too large.
Load diff
+4
-2
@@ -1,8 +1,10 @@
|
|||||||
|
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;
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,172 @@
|
|||||||
|
<template>
|
||||||
|
<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>
|
||||||
|
<NScrollbar>
|
||||||
|
<codemirror v-model="codeData" :extensions="extensions" :style="{ height: '100%' }" />
|
||||||
|
</NScrollbar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
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 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) {
|
||||||
|
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
|
||||||
|
miaoFetchApi.upload(file, parentDir)
|
||||||
|
false && miaoFetchApi.upload(file_bak, parentDir)
|
||||||
|
}
|
||||||
|
|
||||||
|
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 = (
|
||||||
|
await miaoFetchApi.getFile(currentFiles.value[0], {
|
||||||
|
axiosOption: { responseType: 'text' }
|
||||||
|
})
|
||||||
|
).toString()
|
||||||
|
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%;
|
||||||
|
|
||||||
|
.codemirror-container-top {
|
||||||
|
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-dark {
|
||||||
|
background-color: rgb(30, 30, 30);
|
||||||
|
}
|
||||||
|
|
||||||
|
.codemirror-container-light {
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
+25
-19
@@ -43,18 +43,20 @@
|
|||||||
<n-scrollbar>
|
<n-scrollbar>
|
||||||
<transition-group name="dirItem">
|
<transition-group name="dirItem">
|
||||||
<miaoDirectoryItem v-for="dir in showData_directory" :item="dir" :key="dir.uid"
|
<miaoDirectoryItem v-for="dir in showData_directory" :item="dir" :key="dir.uid"
|
||||||
:color="props.color" :selected="selectedItem.value.includes(dir)"
|
:color="props.color" :selectedItem="selectedItem.value" @delete="handleItemDelete(dir)"
|
||||||
@delete="handleItemDelete(dir)" @click="handleItemClick(dir)"
|
@click="handleItemClick(dir)" @drag-start="handleItemDragStart"
|
||||||
@drag-start="handleItemDragStart" @rename="handleItemRename(dir)"
|
@rename="handleItemRename(dir)" @on-selected="handleItemSelect(dir)" />
|
||||||
@on-selected="handleItemSelect(dir)" />
|
|
||||||
</transition-group>
|
</transition-group>
|
||||||
<transition-group name="dirItem">
|
<transition-group name="dirItem">
|
||||||
<miaoDirectoryItem v-for="file in showData_files" :item="file" :key="file.uid"
|
<miaoDirectoryItem v-for="file in showData_files" :item="file" :key="file.uid"
|
||||||
:color="props.color" :selected="selectedItem.value.includes(file)"
|
:color="props.color" :selectedItem="selectedItem.value" @click="handleItemClick(file)"
|
||||||
@click="handleItemClick(file)" @download="handleItemDownload(file)"
|
@download="handleItemDownload(file)" @delete="handleItemDelete(file)"
|
||||||
@delete="handleItemDelete(file)" @drag-start="handleItemDragStart"
|
@drag-start="handleItemDragStart" @rename="handleItemRename(file)"
|
||||||
@rename="handleItemRename(file)" @on-selected="handleItemSelect(file)" />
|
@on-selected="handleItemSelect(file)" />
|
||||||
</transition-group>
|
</transition-group>
|
||||||
|
<!-- <n-virtual-list :item="showData_all" :item-size="50">
|
||||||
|
|
||||||
|
</n-virtual-list> -->
|
||||||
</n-scrollbar>
|
</n-scrollbar>
|
||||||
</div>
|
</div>
|
||||||
<div class="container-bottom" :style="{
|
<div class="container-bottom" :style="{
|
||||||
@@ -159,23 +161,18 @@ class SelectedItem {
|
|||||||
// 已选择的item，用于多选功能
|
// 已选择的item，用于多选功能
|
||||||
const selectedItem = reactive(new SelectedItem())
|
const selectedItem = reactive(new SelectedItem())
|
||||||
|
|
||||||
const currentObjects = defineModel<VirtualDirectory[]>('currentObjects', {
|
const currentDirectorys = defineModel<VirtualDirectory[]>('currentDirectorys', {
|
||||||
required: true
|
required: true
|
||||||
})
|
})
|
||||||
|
|
||||||
// 目前展示的Dir
|
// 目前展示的Dir
|
||||||
const currentDirectory = computed(() => {
|
const currentDirectory = computed(() => {
|
||||||
return currentObjects.value[0]
|
return currentDirectorys.value[0]
|
||||||
})
|
})
|
||||||
|
|
||||||
// 当前组件在views中的序号
|
// 当前组件在views中的序号
|
||||||
const index = computed(() => {
|
const index = computed(() => {
|
||||||
for (let i in views) {
|
return views.getIndex(props.id)
|
||||||
if (views[i].uid === props.id) {
|
|
||||||
return parseInt(i)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return 0
|
|
||||||
})
|
})
|
||||||
|
|
||||||
// 用于展示的数据，后续会增加排序等操作
|
// 用于展示的数据，后续会增加排序等操作
|
||||||
@@ -191,6 +188,13 @@ const showData_files = computed<VirtualFile[]>(() => {
|
|||||||
: []
|
: []
|
||||||
return data
|
return data
|
||||||
})
|
})
|
||||||
|
// const showData_all = computed<(VirtualDirectory | VirtualFile)[]>(() => {
|
||||||
|
// const data = currentDirectory.value?.directorys
|
||||||
|
// ? [...currentDirectory.value?.directorys]
|
||||||
|
// : []
|
||||||
|
// data.push(...currentDirectory.value?.files)
|
||||||
|
// return data
|
||||||
|
// })
|
||||||
|
|
||||||
// 用于监听拖拽文件事件
|
// 用于监听拖拽文件事件
|
||||||
const rootDomRef = ref<HTMLDivElement>()
|
const rootDomRef = ref<HTMLDivElement>()
|
||||||
@@ -208,7 +212,7 @@ const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
|
|||||||
} else {
|
} else {
|
||||||
virtualDirectory.update()
|
virtualDirectory.update()
|
||||||
}
|
}
|
||||||
currentObjects.value[0] = virtualDirectory
|
currentDirectorys.value[0] = virtualDirectory
|
||||||
}
|
}
|
||||||
|
|
||||||
const reload = () => {
|
const reload = () => {
|
||||||
@@ -318,7 +322,7 @@ const handleItemDragStart = async (
|
|||||||
const items = uniq([item, ...selectedItem.value])
|
const items = uniq([item, ...selectedItem.value])
|
||||||
dataBus.set('dragData_vFiles', items.filter(v => v.type === 'file'))
|
dataBus.set('dragData_vFiles', items.filter(v => v.type === 'file'))
|
||||||
dataBus.set('dragData_vDirectory', items.filter(v => v.type === 'directory'))
|
dataBus.set('dragData_vDirectory', items.filter(v => v.type === 'directory'))
|
||||||
selectedItem.clear()
|
// selectedItem.clear()
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleDropFiles = async (files: File[]) => {
|
const handleDropFiles = async (files: File[]) => {
|
||||||
@@ -453,6 +457,7 @@ $bottom-bar-height: 60px;
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
min-width: 170px;
|
||||||
|
|
||||||
.container-top {
|
.container-top {
|
||||||
height: $top-height;
|
height: $top-height;
|
||||||
@@ -602,4 +607,5 @@ $bottom-bar-height: 60px;
|
|||||||
// position: absolute;
|
// position: absolute;
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
// }</style>
|
// }
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
<template>
|
||||||
|
<div class="iframe-container">
|
||||||
|
<iframe
|
||||||
|
:src="iframeSrc"
|
||||||
|
frameborder="0"
|
||||||
|
class="iframe-container-iframe"></iframe>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { VirtualFile } from '@/class/VirtualDirectory'
|
||||||
|
import { onMounted, ref } from 'vue'
|
||||||
|
|
||||||
|
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
||||||
|
required: true
|
||||||
|
})
|
||||||
|
|
||||||
|
const iframeSrc = ref<string>()
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
iframeSrc.value = currentFiles.value[0].url
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.iframe-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
.iframe-container-iframe {
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,168 @@
|
|||||||
|
<template>
|
||||||
|
<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 class="miao-container-loading" v-if="isLoading">{{ loadingPercent === -1 ? '加载插件中' :
|
||||||
|
`渲染进度：${canvasList.length}/${pdfPageCount}` }}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, 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>()
|
||||||
|
|
||||||
|
// 通过margin来实现缩小功能
|
||||||
|
const pdfMargin = ref<number>(0)
|
||||||
|
|
||||||
|
const pdfPageCount = ref<number>(-1)
|
||||||
|
|
||||||
|
const isLoading = computed(() => {
|
||||||
|
return canvasList.length !== pdfPageCount.value
|
||||||
|
})
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadingPercent = computed(() => {
|
||||||
|
if (pdfPageCount.value === -1) {
|
||||||
|
return -1
|
||||||
|
}
|
||||||
|
return canvasList.length / pdfPageCount.value
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
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++) {
|
||||||
|
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 // 一页一页的渲染
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</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,342 @@
|
|||||||
|
<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 useViretualPages from '@/hooks/useVirtualPages';
|
||||||
|
import XGPlayer from 'xgplayer'
|
||||||
|
import '@/style/xgplayer.scss'
|
||||||
|
import TextTrack from 'xgplayer/es/plugins/track'
|
||||||
|
import 'xgplayer/es/plugins/track/index.css'
|
||||||
|
import axios from 'axios'
|
||||||
|
import { uniq } from 'lodash'
|
||||||
|
// import config from '@/config'
|
||||||
|
|
||||||
|
// const props = defineProps<{
|
||||||
|
// id: number
|
||||||
|
// }>()
|
||||||
|
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
||||||
|
required: true
|
||||||
|
})
|
||||||
|
|
||||||
|
// const views = useViretualPages()
|
||||||
|
// const view = views.getView(props.id)
|
||||||
|
|
||||||
|
// const videoPath = ref<string>('');
|
||||||
|
const xgPlayer = ref()
|
||||||
|
|
||||||
|
let _player: XGPlayer
|
||||||
|
const { setVideo } = (() => {
|
||||||
|
return {
|
||||||
|
setVideo: async (
|
||||||
|
videoVFile: VirtualFile,
|
||||||
|
textTrackFiles?: VirtualFile[]
|
||||||
|
) => {
|
||||||
|
if(!currentFiles.value.includes(videoVFile)) {
|
||||||
|
currentFiles.value = [videoVFile]
|
||||||
|
}
|
||||||
|
videoVFile || (videoVFile = findVideo(currentFiles.value))
|
||||||
|
textTrackFiles &&
|
||||||
|
textTrackFiles.push(...findTextTrack(currentFiles.value))
|
||||||
|
textTrackFiles = uniq(textTrackFiles)
|
||||||
|
currentFiles.value = [videoVFile, ...(textTrackFiles ?? [])]
|
||||||
|
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.uid,
|
||||||
|
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.uid,
|
||||||
|
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.uid,
|
||||||
|
url,
|
||||||
|
text: i.name
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
_list.push({
|
||||||
|
id: i.uid,
|
||||||
|
url: i.url,
|
||||||
|
text: i.name
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const texttrack = {
|
||||||
|
list: _list
|
||||||
|
}
|
||||||
|
_player && _player.destroy()
|
||||||
|
_player = new XGPlayer({
|
||||||
|
plugins: [TextTrack],
|
||||||
|
el: xgPlayer.value,
|
||||||
|
url: videoVFile.url,
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
volume: 1,
|
||||||
|
pip: true,
|
||||||
|
videoFillMode: 'contain',
|
||||||
|
autoplay: true,
|
||||||
|
download: true,
|
||||||
|
screenShot: {
|
||||||
|
saveImg: true,
|
||||||
|
quality: 0.92,
|
||||||
|
type: 'image/png',
|
||||||
|
format: '.png'
|
||||||
|
},
|
||||||
|
lang: 'zh-cn',
|
||||||
|
playbackRate: [0.1, 0.3, 0.5, 0.75, 1, 1.5, 2, 3, 5, 10],
|
||||||
|
playNext: {
|
||||||
|
urlList: []
|
||||||
|
},
|
||||||
|
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), 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[]) =>
|
||||||
|
vFiles.filter((v) => {
|
||||||
|
for (let s of ['mp4', 'm3u8', 'hls']) {
|
||||||
|
if (v.name.endsWith(s)) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
})[0]
|
||||||
|
|
||||||
|
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) {
|
||||||
|
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>
|
||||||
+16
-7
@@ -1,11 +1,15 @@
|
|||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite'
|
||||||
import vue from '@vitejs/plugin-vue'
|
import vue from '@vitejs/plugin-vue'
|
||||||
import { resolve } from 'path'
|
import { resolve } from 'path'
|
||||||
import { viteSingleFile } from 'vite-plugin-singlefile'
|
// import { viteSingleFile } from 'vite-plugin-singlefile'
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [vue(), viteSingleFile()],
|
base: './',
|
||||||
|
plugins: [
|
||||||
|
vue()
|
||||||
|
// viteSingleFile()
|
||||||
|
],
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
'@': resolve(__dirname, 'src')
|
'@': resolve(__dirname, 'src')
|
||||||
@@ -59,11 +63,16 @@ export default defineConfig({
|
|||||||
},
|
},
|
||||||
output: {
|
output: {
|
||||||
// 配置输出为单文件
|
// 配置输出为单文件
|
||||||
inlineDynamicImports: true,
|
// inlineDynamicImports: true,
|
||||||
manualChunks: undefined,
|
// manualChunks(id) {
|
||||||
entryFileNames: 'bundle.js',
|
// 加了会有bug
|
||||||
format: 'iife', // 立即执行函数格式
|
// if (id.includes('@codemirror')) {
|
||||||
name: 'MyBundle'
|
// return id.split('@')[1].replace('+', '-')
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// entryFileNames: 'bundle.js',
|
||||||
|
// format: 'iife', // 立即执行函数格式
|
||||||
|
// name: 'MyBundle'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in new issue
Block a user