19 Commits
Author SHA1 Message Date
539943419 210e251b23 feat: 添加一个没啥功能的图片浏览插件 2024-08-30 05:15:32 +08:00
539943419 93ca2a29a6 fix: 修正大量拼写错误 2024-08-30 03:12:18 +08:00
539943419 25f25ff669 feat: 配置交叉编译。 2024-08-29 23:56:43 +08:00
539943419 f2333f74cb feat: 添加图标,因有bug故暂时取消代码编辑主题功能 2024-08-29 20:26:16 +08:00
539943419 d0bad77387 Merge branch 'main' of http://git.miaospring.top:3000/539943419/miaoDirectory 2024-08-29 18:50:38 +08:00
539943419 f8ca6dba67 feat: 新增了代码编辑插件的主题选择(当然样式还是没改) 2024-08-29 17:58:35 +08:00
539943419 2d401f7a17 feat: 新增build:auto可以一键直接build出exe文件 2024-08-29 15:56:19 +08:00
539943419 ef5a8f1a9e feat: 为代码编辑插件增加了更多的语言支持,修复了一些bug,样式还没写。 2024-08-29 15:19:36 +08:00
539943419 86b3a02237 feat: 配置了插件动态导入,新增了一个完成度不高的代码编辑插件 2024-08-29 12:24:40 +08:00
539943419 ea43e641ce feat: 优化player插件的样式 2024-08-28 21:25:34 +08:00
539943419 803fd69850 feat: 优化PDF插件的放缩操作实现 2024-08-28 21:13:24 +08:00
539943419 f6c1ba199f feat: 优化了PDF插件的相关表现 2024-08-28 20:27:48 +08:00
539943419 c595ebb260 feat: 添加一个急需缩放功能的pdf插件 2024-08-28 17:59:14 +08:00
539943419 d5d9984ae5 fix: 删除无用函数,变量 2024-08-28 11:52:24 +08:00
539943419 3a48fd5643 feat: 视频播放器字幕添加对ass, ssa格式字幕的支持。优化视频插件与文件夹插件的相关逻辑 2024-08-28 11:49:48 +08:00
539943419 f578072997 feat: 视频播放插件添加了一个极其简陋的字幕 2024-08-27 20:42:53 +08:00
539943419 632a562348 feat: 视频播放器风格修正,卸载页面时卸载视频播放器 2024-08-24 15:22:49 +08:00
539943419 1f6c924e11 feat: 1.新增视频播放插件。2.新增插件中心 2024-08-24 14:20:33 +08:00
539943419 f5e0bd4a56 style: 添加tab的文本省略 2024-08-23 14:28:35 +08:00
24 changed files with 4518 additions and 146 deletions

No files matched your search

+4 -1
View File
@@ -23,4 +23,7 @@ dist-ssr
*.sln *.sln
*.sw? *.sw?
.vscode .vscode
serve serve
miao-directory.exe
miao-directory-amd64-linux
miao-directory-amd64-win.exe
+2 -2
View File
@@ -2,9 +2,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="./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
View File
@@ -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"
}
} }
+1100
View File
File diff suppressed because it is too large. Load diff
BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

+50 -40
View File
@@ -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
@@ -42,23 +42,15 @@ const rootDirectory = reactive(
// component就是一个vue组件,类似于miaoDirectory // component就是一个vue组件,类似于miaoDirectory
const createView = ( const createView = (
component: any, component: any,
currentDirectorys?: VirtualDirectory[], currentDirectories?: VirtualDirectory[],
currentFiles?: VirtualFile[], currentFiles?: VirtualFile[],
index?: number index?: number
) => { ) => {
index ?? (index = views.length) views.push(component, currentDirectories, currentFiles, index)
views.splice(
index,
0,
reactive<VirtualPage>(new VirtualPage(component, {
directorys: [...(currentDirectorys ?? [])],
files: [...(currentFiles ?? [])]
}))
)
} }
const deleteView = (index: number) => { const deleteView = (index: number) => {
views.splice(index, 1) views.deleteView(index)
if (views.length === 0) { if (views.length === 0) {
createView(miaoDirectory, [rootDirectory]) 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>
@@ -149,7 +147,7 @@ onMounted(() => {
@click=" @click="
createView( createView(
view.component, view.component,
view.currentDirectorys, view.currentDirectories,
view.currentFiles, view.currentFiles,
index + 1 index + 1
) )
@@ -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-directories="view.currentDirectories"
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;
+75
View File
@@ -0,0 +1,75 @@
import useVirtualPages from '@/hooks/useVirtualPages'
import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
type plugin = {
// 用于显示的名字
name: string
// 判断是否可以使用这个组件
// 使用组件即调用下面的func
filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
func: (VDirectories: 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: (
VDirectories: VirtualDirectory[],
VFiles: VirtualFile[]
) => boolean
): void {
let _component: any
const views = useVirtualPages()
this.register(key, {
name,
filter,
func: async (
VDirectories: VirtualDirectory[],
VFiles: VirtualFile[]
) => {
if (filter(VDirectories, VFiles) === false) {
return
}
if (_component === undefined) _component = await getComponent()
views.push(_component, VDirectories, VFiles)
}
})
}
getUsablePlugin(VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) {
const usableList = []
for (let key of Object.keys(this.pluginsMap)) {
if (this.pluginsMap[key].filter(VDirectories, VFiles)) {
usableList.push(key)
}
}
return usableList.map((key) => ({
key,
...this.pluginsMap[key]
}))
}
usePlugin(
key: string,
VDirectories: VirtualDirectory[],
VFiles: VirtualFile[]
) {
this.pluginsMap[key].func(VDirectories, VFiles)
}
}
+11 -6
View File
@@ -1,3 +1,4 @@
import config from "@/config";
import generateId from "@/hooks/generateId"; import generateId from "@/hooks/generateId";
import useMiaoFetchApi from "@/hooks/useMiaoFetchApi"; import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
// import { debounce } from "lodash"; // import { debounce } from "lodash";
@@ -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 {
@@ -38,7 +43,7 @@ class VirtualDirectory {
// 子文件 // 子文件
files?: VirtualFile[]; files?: VirtualFile[];
// 子目录 // 子目录
directorys?: VirtualDirectory[]; directories?: VirtualDirectory[];
// 没啥意义,标注一下就是了 // 没啥意义,标注一下就是了
type: "directory"; type: "directory";
// 文件夹创建时间等杂项属性 // 文件夹创建时间等杂项属性
@@ -93,9 +98,9 @@ class VirtualDirectory {
updateContent(content: (file | directory)[]) { updateContent(content: (file | directory)[]) {
this.files = this.files ?? []; this.files = this.files ?? [];
this.directorys = this.directorys ?? []; this.directories = this.directories ?? [];
const fileNames: string[] = this.files.map(v => v.name); const fileNames: string[] = this.files.map(v => v.name);
const dirNames: string[] = this.directorys.map(v => v.name); const dirNames: string[] = this.directories.map(v => v.name);
const itemNames: string[] = content.map(v => v.name); const itemNames: string[] = content.map(v => v.name);
// 删去远程端已不存在的文件与文件夹 // 删去远程端已不存在的文件与文件夹
const _delete = (target: (VirtualFile | VirtualDirectory)[]) => { const _delete = (target: (VirtualFile | VirtualDirectory)[]) => {
@@ -109,7 +114,7 @@ class VirtualDirectory {
} }
}; };
_delete(this.files); _delete(this.files);
_delete(this.directorys); _delete(this.directories);
// 加入新的文件与文件夹 // 加入新的文件与文件夹
for (let item of content) { for (let item of content) {
if (item.type === "file") { if (item.type === "file") {
@@ -118,7 +123,7 @@ class VirtualDirectory {
} }
} else if (item.type === "directory") { } else if (item.type === "directory") {
if (!dirNames.includes(item.name)) { if (!dirNames.includes(item.name)) {
this.directorys.push(new VirtualDirectory(item, this)); this.directories.push(new VirtualDirectory(item, this));
} }
} }
} }
@@ -126,7 +131,7 @@ class VirtualDirectory {
hasChild(item: VirtualDirectory | VirtualFile): boolean { hasChild(item: VirtualDirectory | VirtualFile): boolean {
if (item.type === "directory") { if (item.type === "directory") {
return this.directorys?.includes(item) ?? false; return this.directories?.includes(item) ?? false;
} else { } else {
return this.files?.includes(item) ?? false; return this.files?.includes(item) ?? false;
} }
+65 -5
View File
@@ -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,9 +13,9 @@ const getRandomWebSafeColor = (() => {
})(); })();
export default class VirtualPage { export default class VirtualPage {
constructor(component: any, initObjects?:{ directorys?: VirtualDirectory[], files?: VirtualFile[]}) { constructor(component: any, initObjects?: { directories?: VirtualDirectory[]; files?: VirtualFile[] }) {
this.component = shallowRef(component); this.component = shallowRef(component);
this.currentDirectorys = initObjects?.directorys ?? []; this.currentDirectories = initObjects?.directories ?? [];
this.currentFiles = initObjects?.files ?? []; this.currentFiles = initObjects?.files ?? [];
this.visible = true; this.visible = true;
this.uid = generateId(); this.uid = generateId();
@@ -27,7 +27,7 @@ export default class VirtualPage {
// 是否可见 // 是否可见
visible: boolean; visible: boolean;
// 当前正在使用的文件夹 // 当前正在使用的文件夹
currentDirectorys: VirtualDirectory[]; currentDirectories: VirtualDirectory[];
// 当前正在使用的文件 // 当前正在使用的文件
currentFiles: VirtualFile[]; currentFiles: VirtualFile[];
// 区分每一个页面的唯一id // 区分每一个页面的唯一id
@@ -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?.currentDirectories[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, currentDirectories?: VirtualDirectory[], currentFiles?: VirtualFile[], index?: number) {
index ?? (index = this.length);
this._views.splice(
index,
0,
reactive<VirtualPage>(
new VirtualPage(component, {
directories: [...(currentDirectories ?? [])],
files: [...(currentFiles ?? [])]
})
)
);
}
/**
* 根据次序删除一个页面
*/
deleteView(index: number) {
this._views.splice(index, 1);
}
}
+19 -20
View File
@@ -1,8 +1,7 @@
<!-- 基于naiveui的下拉菜单实现的自定义下拉菜单 --> <!-- 基于naiveui的下拉菜单实现的自定义下拉菜单 -->
<!-- 支持长按和右键呼出下拉菜单 --> <!-- 支持长按和右键呼出下拉菜单 -->
<template> <template>
<div class="main" @contextmenu="handleContextMenu" @mouseleave="handleMainMouseLeave" @touchstart="handleTouchStart" <div class="main" @contextmenu="handleContextMenu" @mouseleave="handleMainMouseLeave">
@touchend="handleTouchEnd">
<slot></slot> <slot></slot>
</div> </div>
<n-dropdown placement="bottom-start" trigger="manual" :x="x" :y="y" :options="props.options" <n-dropdown placement="bottom-start" trigger="manual" :x="x" :y="y" :options="props.options"
@@ -28,7 +27,7 @@ const x = ref(0)
const y = ref(0) const y = ref(0)
const showContextMenu = ref(0) const showContextMenu = ref(0)
// 长按计时器 // 长按计时器
let timer_touch: string | number | NodeJS.Timeout | undefined // let timer_touch: string | number | NodeJS.Timeout | undefined
const onClickoutside = async () => { const onClickoutside = async () => {
showContextMenu.value = 0 showContextMenu.value = 0
@@ -58,25 +57,25 @@ const handleContextMenu = (e: MouseEvent) => {
}) })
} }
const handleTouchStart = (e: TouchEvent) => { // const handleTouchStart = (e: TouchEvent) => {
if(props.touchTimeOut === undefined) { // if(props.touchTimeOut === undefined) {
return // return
} // }
timer_touch ?? clearTimeout(timer_touch) // timer_touch ?? clearTimeout(timer_touch)
timer_touch = setTimeout(() => { // timer_touch = setTimeout(() => {
showContextMenu.value = 1 // showContextMenu.value = 1
x.value = e.targetTouches[0].clientX // x.value = e.targetTouches[0].clientX
y.value = e.targetTouches[0].clientY // y.value = e.targetTouches[0].clientY
}, props.touchTimeOut) // }, props.touchTimeOut)
} // }
const handleTouchEnd = () => { // const handleTouchEnd = () => {
if(timer_touch) { // if(timer_touch) {
clearTimeout(timer_touch) // clearTimeout(timer_touch)
timer_touch = undefined // timer_touch = undefined
} // }
} // }
</script> </script>
@@ -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);
;
} }
} }
} }
+118
View File
@@ -0,0 +1,118 @@
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
}
)
pluginCenter.registerComponent(
"miaoImages",
"图片浏览",
async () => (await import("@/views/miaoImages.vue")).default,
(vDirs, vFiles) => {
if (vDirs.length === 0 && vFiles.length === 0) {
return false;
}
miao: 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)) {
continue miao;
}
}
return true;
}
);
}
+22 -1
View File
@@ -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
+11
View File
@@ -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
}
+5 -4
View File
@@ -1,11 +1,12 @@
import VirtualPage from "@/class/VirtualPage" import { VirtualPages } from "@/class/VirtualPage"
import { Reactive, reactive } from "vue" import { Reactive, reactive } from "vue"
let views: Reactive<VirtualPage[]> let views: Reactive<VirtualPages>
export default function useViretualPages(){ export default function useVirtualPages(){
if(views === undefined) { if(views === undefined) {
views = reactive<VirtualPage[]>([]) // views = reactive<VirtualPage[]>([])
views = reactive(new VirtualPages())
} }
return views return views
} }
File diff suppressed because it is too large. Load diff
+4 -2
View File
@@ -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;
+172
View File
@@ -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>
+29 -23
View File
@@ -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="{
@@ -152,36 +154,31 @@ class SelectedItem {
return false return false
} }
// @ts-ignore // @ts-ignore
return [...currentDirectory.value?.directorys, ...currentDirectory.value?.files].includes(v) return [...currentDirectory.value?.directories, ...currentDirectory.value?.files].includes(v)
}) })
} }
} }
// 已选择的item,用于多选功能 // 已选择的item,用于多选功能
const selectedItem = reactive(new SelectedItem()) const selectedItem = reactive(new SelectedItem())
const currentObjects = defineModel<VirtualDirectory[]>('currentObjects', { const currentDirectories = defineModel<VirtualDirectory[]>('currentDirectories', {
required: true required: true
}) })
// 目前展示的Dir // 目前展示的Dir
const currentDirectory = computed(() => { const currentDirectory = computed(() => {
return currentObjects.value[0] return currentDirectories.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
}) })
// 用于展示的数据,后续会增加排序等操作 // 用于展示的数据,后续会增加排序等操作
const showData_directory = computed<VirtualDirectory[]>(() => { const showData_directory = computed<VirtualDirectory[]>(() => {
const data = currentDirectory.value?.directorys const data = currentDirectory.value?.directories
? [...currentDirectory.value?.directorys] ? [...currentDirectory.value?.directories]
: [] : []
return data return data
}) })
@@ -191,6 +188,13 @@ const showData_files = computed<VirtualFile[]>(() => {
: [] : []
return data return data
}) })
// const showData_all = computed<(VirtualDirectory | VirtualFile)[]>(() => {
// const data = currentDirectory.value?.directories
// ? [...currentDirectory.value?.directories]
// : []
// data.push(...currentDirectory.value?.files)
// return data
// })
// 用于监听拖拽文件事件 // 用于监听拖拽文件事件
const rootDomRef = ref<HTMLDivElement>() const rootDomRef = ref<HTMLDivElement>()
@@ -202,13 +206,13 @@ const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
// 若没有缓存数据则同步刷新,有缓存数据则异步刷新 // 若没有缓存数据则同步刷新,有缓存数据则异步刷新
if ( if (
virtualDirectory.files === undefined || virtualDirectory.files === undefined ||
virtualDirectory.directorys === undefined virtualDirectory.directories === undefined
) { ) {
await virtualDirectory.update() await virtualDirectory.update()
} else { } else {
virtualDirectory.update() virtualDirectory.update()
} }
currentObjects.value[0] = virtualDirectory currentDirectories.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>
+34
View File
@@ -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>
+167
View File
@@ -0,0 +1,167 @@
<template>
<div class="miaoImage" ref="rootRef">
<n-scrollbar ref="NScrollbarRef">
<div class="miaoImage-container">
<div class="miaoImage-container-row" v-for="(src, index) in imageSrcList" :key="index">
<img :src="src" class="miaoImage-container-row-image" loading="lazy"
:class="activeImageIndex === index ? 'miaoImage-container-row-image-active' : ''"
@click="activeImageIndex = index" draggable="false" />
</div>
</div>
</n-scrollbar>
<miao-mask :show="activeImageIndex !== -1" @click="activeImageIndex = -1" class="miaoImage-mask">
<ChevronBack class="miaoImage-mask-btn miaoImage-mask-btn-back" @click="handleActiveImageIndexBack" />
<img :src="imageSrcList[activeImageIndex]" class="miaoImage-mask-active" @click="e => e.stopPropagation()"
draggable="false">
<ChevronForward class="miaoImage-mask-btn miaoImage-mask-btn-forward"
@click="handleActiveImageIndexForward" />
</miao-mask>
</div>
</template>
<script setup lang="ts">
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import { uniq } from 'lodash';
import { nextTick, onMounted, ref } from 'vue'
import { NScrollbar } from 'naive-ui';
import miaoMask from '@/components/miaoMask.vue';
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 imageSrcList = ref<string[]>([])
const activeImageIndex = ref(-1)
const scrollToActiveImage = () => {
const dom = rootRef.value?.querySelector('.miaoImage-container-row-image-active')
console.log({ dom })
NScrollbarRef.value.scrollTo({
top: dom?.offsetTop - 30 ?? 0,
behavior: "smooth"
})
}
const handleActiveImageIndexBack = (e: any) => {
e.stopPropagation()
activeImageIndex.value = (activeImageIndex.value - 1 + imageSrcList.value.length) % imageSrcList.value.length
nextTick(scrollToActiveImage)
}
const handleActiveImageIndexForward = (e: any) => {
e.stopPropagation()
activeImageIndex.value = (activeImageIndex.value + 1 + imageSrcList.value.length) % imageSrcList.value.length
nextTick(scrollToActiveImage)
}
const updateImageSrcList = async (source: VirtualFile | VirtualDirectory) => {
let srcList: string[]
if (source.type === 'directory') {
await source.update()
srcList = source.files?.filter(v => imageSuffixList.includes(v.name.split('.').pop() ?? '')).map(v => v.url) ?? []
} else {
srcList = [source.url]
}
imageSrcList.value = uniq([...imageSrcList.value, ...srcList])
}
onMounted(() => {
[...currentDirectories.value, ...currentFiles.value].forEach(updateImageSrcList)
})
</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;
.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);
}
.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>
+168
View File
@@ -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>
+342
View File
@@ -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 useVirtualPages 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 = useVirtualPages()
// 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
View File
@@ -1,11 +1,15 @@
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' import { resolve } from 'path'
import { viteSingleFile } from 'vite-plugin-singlefile' // import { viteSingleFile } from 'vite-plugin-singlefile'
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [vue(), viteSingleFile()], base: './',
plugins: [
vue()
// viteSingleFile()
],
resolve: { resolve: {
alias: { alias: {
'@': resolve(__dirname, 'src') '@': resolve(__dirname, 'src')
@@ -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'
} }
} }
} }