feat: 重新组织代码结构

src/plugins/miaoCodeMirror/export.ts

@@ -0,0 +1,42 @@
+import { registerComponentOption } from '@/class/PluginCenter'
+import { CodeOutline } from '@vicons/ionicons5'
+
+const pluginConfig: registerComponentOption = {
+    key: 'miaoCodeMirror',
+    name: '代码编辑',
+    icon: CodeOutline,
+    getComponent: async () =>
+        (await import('@/plugins/miaoCodeMirror/miaoCodeMirror.vue')).default,
+    filter: (vDirs, vFiles) => {
+        if (vDirs.length !== 0) {
+            return false
+        }
+        if (vFiles.length !== 1) {
+            return false
+        }
+        for (let end of [
+            'js',
+            'ts',
+            'jsx',
+            'tsx',
+            'py',
+            'html',
+            'css',
+            'scss',
+            'go',
+            'json',
+            'md',
+            'yaml',
+            'txt',
+            'xml',
+            'vue'
+        ]) {
+            if (vFiles[0].name.endsWith(end)) {
+                return true
+            }
+        }
+        return false
+    }
+}
+
+export default pluginConfig

src/plugins/miaoCodeMirror/miaoCodeMirror.vue

@@ -0,0 +1,200 @@
+<template>
+    <miao-message-provider ref="miaoMessage">
+        <div class="codemirror-container" ref="rootRef" :class="`codemirror-container-${theme}`">
+            <div class="codemirror-container-top">
+                <div class="codemirror-container-btn codemirror-container-btn-save" @click="handleSave">保存</div>
+                <div class="codemirror-container-btn codemirror-container-btn-save" @click="handleReset">恢复到上次保存</div>
+            </div>
+            <div class="codemirror-container-main">
+                <NScrollbar style="max-height: calc( 100% );">
+                    <codemirror v-model="codeData" :extensions="extensions" />
+                </NScrollbar>
+            </div>
+        </div>
+    </miao-message-provider>
+</template>
+
+<script setup lang="ts">
+import miaoMessageProvider from '@/components/miaoMessageProvider.vue'
+import { VirtualFile } from '@/class/VirtualDirectory'
+import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
+import { onMounted, ref } from 'vue'
+import { Codemirror } from 'vue-codemirror'
+import { NScrollbar } from 'naive-ui'
+
+const miaoFetchApi = useMiaoFetchApi()
+
+const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
+    required: true
+})
+
+const miaoMessage = ref<InstanceType<typeof miaoMessageProvider>>()
+const vFile = ref<VirtualFile>()
+const rootRef = ref<HTMLDivElement>()
+// const _key = ref(Math.random())
+const codeData = ref<string>()
+// 第一次点击保存时自动备份data，暂时懒得做
+const bakData = ref<string>()
+const extensions = ref<any[]>([])
+const theme = ref<'light' | 'dark'>('light')
+
+const handleSave = async () => {
+    if (bakData.value === codeData.value || !vFile.value) {
+        miaoMessage.value?.message('内容未改动', {
+            timeout: 3000,
+            type: 'info'
+        })
+        return
+    }
+    const parentDir = vFile.value?.parent
+    const file_bak = new File(
+        [new Blob([bakData.value ?? ''])],
+        `${vFile.value?.name}.bak`
+    )
+    const file = new File([new Blob([codeData.value ?? ''])], vFile.value.name)
+    bakData.value = codeData.value
+    const { response } = miaoFetchApi.upload(file, parentDir)
+    false && miaoFetchApi.upload(file_bak, parentDir)
+    await response
+    miaoMessage.value?.message('保存成功', {
+        timeout: 5000,
+        type: 'success'
+    })
+
+}
+
+const handleReset = async () => {
+    codeData.value = bakData.value
+}
+
+// const switchTheme = async () => {
+//     if (!vFile.value) {
+//         return
+//     }
+//     theme.value = theme.value === 'dark' ? 'light' : 'dark'
+//     extensions.value = [
+//         ...(await getLangExtensions(vFile.value?.name)),
+//         // theme.value === 'dark' ?
+//     ]
+//     _key.value = Math.random()
+// }
+
+const getLangExtensions = async (fileName: string) => {
+    const ext = fileName.split('.').pop()?.toLocaleLowerCase()
+    switch (ext) {
+        case 'js':
+        case 'jsx':
+        case 'ts':
+        case 'tsx':
+            const { javascript } = await import('@codemirror/lang-javascript')
+            return [javascript({ jsx: ext.substring(2, 3) === 'x', typescript: ext.substring(0, 2) === 'js', })]
+            break
+        case 'css':
+        case 'scss':
+            const { sass } = await import('@codemirror/lang-sass')
+            return [sass()]
+            break
+        case 'html':
+            const { html } = await import('@codemirror/lang-html')
+            return [html()]
+            break
+        case 'py':
+            const { python } = await import('@codemirror/lang-python')
+            return [python()]
+            break
+        case 'go':
+            const { go } = await import('@codemirror/lang-go')
+            return [go()]
+            break
+        case 'json':
+            const { json } = await import('@codemirror/lang-json')
+            return [json()]
+            break
+        case 'md':
+            const { markdown } = await import('@codemirror/lang-markdown')
+            return [markdown()]
+            break
+        case 'yaml':
+            const { yaml } = await import('@codemirror/lang-yaml')
+            return [yaml()]
+            break
+        case 'vue':
+            const { vue } = await import('@codemirror/lang-vue')
+            return [vue()]
+            break
+        case 'xml':
+            const { xml } = await import('@codemirror/lang-xml')
+            return [xml()]
+            break
+        default:
+            return []
+    }
+}
+
+onMounted(async () => {
+    vFile.value = currentFiles.value[0]
+    const fileName = currentFiles.value[0].name
+    codeData.value = (
+        await miaoFetchApi.getFile(currentFiles.value[0], {
+            axiosOption: {
+                responseType: 'text',
+                headers: {
+                    'Cache-Control': 'no-cache'
+                }
+            }
+        })
+    ).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%;
+    overflow-y: hidden;
+
+    .codemirror-container-top {
+        height: 25px;
+        display: flex;
+        border-bottom: 1px solid #000;
+    }
+
+    .codemirror-container-btn {
+        height: 25px;
+        padding: 0 10px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        user-select: none;
+        background-color: none;
+        transition: background-color 0.25s;
+
+        &:hover {
+            background-color: #e8e8e8;
+        }
+    }
+
+    .codemirror-container-main {
+        height: calc(100% - 25px);
+        position: relative;
+    }
+}
+
+.codemirror-container-dark {
+    background-color: rgb(30, 30, 30);
+}
+
+.codemirror-container-light {
+    background-color: rgb(255, 255, 255);
+}
+</style>

src/plugins/miaoDirectory/components/miaoDirectoryBottom.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="miao-directory-container-bottom" :style="{
+      backgroundColor:
+        index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
+    }">
+      <div class="container-bottom-item">
+        <div class="container-bottom-item-icon">
+          <add-outline :style="{
+            color:
+              index % 2 === 0
+                ? 'rgb(0 0 0)'
+                : 'rgb(255 255 255)'
+          }" @click="emit('add-new-item')" />
+        </div>
+      </div>
+      <div class="container-bottom-item">
+        <div class="container-bottom-item-icon">
+          <cloud-upload-outline :style="{
+            color:
+              index % 2 === 0
+                ? 'rgb(0 0 0)'
+                : 'rgb(255 255 255)'
+          }" @click="emit('pick-files-upload')" />
+        </div>
+      </div>
+    </div>
+  </template>
+
+  <script setup lang="ts">
+  import { AddOutline, CloudUploadOutline } from '@vicons/ionicons5'
+  defineProps<{
+    index: number
+  }>()
+
+  const emit = defineEmits<{
+    'add-new-item': []
+    'pick-files-upload': []
+  }>()
+  </script>
+
+  <style scoped lang="scss">
+  .miao-directory-container-bottom {
+    height: 60px;
+    background-color: bisque;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    user-select: none;
+    box-shadow: 0px 1px 10px #888888;
+    z-index: 2;
+
+    .container-bottom-item {
+      height: 40px;
+      width: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .container-bottom-item-icon {
+        svg {
+          width: 30px;
+          height: 30px;
+          transition: width 0.3s ease;
+          transition: height 0.3s ease;
+          cursor: pointer;
+        }
+
+        &:hover {
+          svg {
+            width: 40px;
+            height: 40px;
+          }
+        }
+      }
+    }
+  }
+  </style>

src/plugins/miaoDirectory/components/miaoDirectoryItem.vue

@@ -0,0 +1,289 @@
+<template>
+    <div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
+        <miaoContextMenu :options="dropDownOptions ?? []" :touch-time-out="500" @select="handleDropdownSelect">
+            <div class="item-main" :class="selected ? 'item-main-selected' : ''" ref="mainRef">
+                <div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
+                <Icon class="item-main-icon" v-show="clientWidth > 250"></Icon>
+                <div class="item-main-info">
+                    <div class="item-main-info-name">
+                        <Icon class="item-main-info-name-icon" v-if="clientWidth <= 250"></Icon>
+                        <n-ellipsis :style="{ maxWidth: clientWidth > 250 ? '80%' : '75%' }">{{ name }}</n-ellipsis>
+                    </div>
+                    <div class="item-main-info-date" v-if="time">
+                        {{ time }}
+                    </div>
+                </div>
+            </div>
+        </miaoContextMenu>
+    </div>
+</template>
+
+<script setup lang="ts">
+import miaoContextMenu from '@/components/miaoContextMenu.vue'
+import {
+    DocumentText,
+    FileTray,
+    Help,
+    Image,
+    LogoChrome,
+    LogoCss3,
+    LogoJavascript,
+    LogoVue,
+    PlayCircle,
+    Disc
+} from '@vicons/ionicons5'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import dateFormatter from '@/hooks/dateFormatter'
+import { NEllipsis } from 'naive-ui'
+import { DropdownOption } from 'naive-ui/es/dropdown';
+// import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
+
+// const miaoFetchApi = useMiaoFetchApi()
+
+const props = defineProps<{
+    item: {
+        name: string,
+        type: 'directory' | 'file'
+        stats: {
+            mtimeMs: number
+        }
+    }
+    name?: string
+    color: string
+    dropDownOptions?: DropdownOption[]
+    selected?: boolean
+}>()
+
+const emit = defineEmits<{
+    download: []
+    delete: []
+    rename: []
+    dragStart: [event: DragEvent]
+    onSelected: []
+    plugin: [plugin: string]
+}>()
+
+const mainRef = ref<HTMLDivElement>()
+
+// 使用ResizeObserver实现
+const clientWidth = ref<number>(666)
+
+const name = props.name ?? props.item.name
+
+const observer = new ResizeObserver(entries => {
+    for (let entry of entries) {
+        clientWidth.value = entry.contentRect.width;
+    }
+});
+
+const time = computed(() => {
+    return dateFormatter(
+        new Date(props.item.stats.mtimeMs),
+        'yyyy-MM-dd hh:mm:ss'
+    )
+})
+
+// 是不是可以直接在这里面实现？
+// 应该将所有事件emit出去才对
+const handleDropdownSelect = (key: string) => {
+    if (key === 'rename') {
+        emit('rename')
+    } else if (key === 'download') {
+        emit('download')
+    } else if (key === 'delete') {
+        emit('delete')
+    } else if (key === 'select') {
+        emit('onSelected')
+    } else if (key.startsWith('plugin:')) {
+        const plugin = key.split(':')[1]
+        emit('plugin', plugin)
+    }
+}
+
+const Icon = computed(() => {
+    try {
+        if (props.item.type === 'directory') {
+            return FileTray
+        } else if (props.item.type === 'file') {
+            const aft = props.item.name.split('.').at(-1)?.toLowerCase()
+            if (!aft) {
+                throw 1
+            } else if (
+                ['txt', 'doc', 'docs', 'docx', 'xls', 'xlsx'].includes(aft)
+            ) {
+                return DocumentText
+            } else if (
+                ['mp3', 'wav', 'ape', 'acc', 'ogg', 'flac'].includes(aft)
+            ) {
+                return Disc
+            } else if (
+                [
+                    'xbm',
+                    'tif',
+                    'pjp',
+                    'svgz',
+                    'jpg',
+                    'jpeg',
+                    'ico',
+                    'tiff',
+                    'gif',
+                    'svg',
+                    'jfif',
+                    'webp',
+                    'png',
+                    'bmp',
+                    'pjpeg',
+                    'avif'
+                ].includes(aft)
+            ) {
+                return Image
+            } else if (['mp4', 'm2v', 'mkv'].includes(aft)) {
+                return PlayCircle
+            } else if (['js', 'jsx', 'ts', 'tsx'].includes(aft)) {
+                return LogoJavascript
+            } else if (['html'].includes(aft)) {
+                return LogoChrome
+            } else if (['css', 'scss', 'less'].includes(aft)) {
+                return LogoCss3
+            } else if (['vue'].includes(aft)) {
+                return LogoVue
+            }
+            return DocumentText
+        }
+    } catch {
+        return Help
+    }
+})
+
+const itemRef = ref()
+
+const handleDragStart = (event: DragEvent) => {
+    emit('dragStart', event)
+    // dataBus.set('dragData', [props.item])
+}
+
+onMounted(() => {
+    if (mainRef.value) {
+        observer.observe(mainRef.value);
+    }
+})
+
+onBeforeUnmount(() => {
+    if (mainRef.value) {
+        observer.unobserve(mainRef.value);
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.miao-item {
+    cursor: pointer;
+    width: calc(100% - 20px);
+    // min-width: 170px;
+    // aspect-ratio: 66/9;
+    height: 50px;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 10px 10px;
+
+    .item-main {
+        position: relative;
+        width: 100%;
+        height: 95%;
+        background-color: rgb(255, 255, 255);
+        border-radius: 7px;
+        display: flex;
+        align-items: center;
+        transition: background-color 0.3s ease;
+
+        .item-main-front {
+            height: 100%;
+            min-width: 10px;
+            border-radius: 7px 0 0 7px;
+            background-color: rgb(0, 0, 0);
+        }
+
+        .item-main-icon {
+            min-width: 30px;
+            margin-left: 10px;
+            height: 30px;
+            width: 30px;
+            color: #00403e;
+            transition: color 0.15s ease-out;
+        }
+
+        .item-main-info {
+            margin-left: 10px;
+            height: 100%;
+            width: calc(100% - 10px);
+            display: flex;
+            flex-direction: column;
+
+            &-name {
+                position: relative;
+                user-select: none;
+                display: flex;
+                align-items: center;
+                margin-top: 3px;
+
+                &-icon {
+                    color: #00403e;
+                    width: 20px;
+                    margin-right: 5px;
+                    transition: color 0.15s ease-out;
+                }
+            }
+
+            &-date {
+                user-select: none;
+                font-size: small;
+            }
+        }
+
+        .item-main-option {
+            height: 100%;
+            width: 20px;
+            position: absolute;
+            right: 0;
+            border-radius: 0 7px 7px 0;
+            background-color: rgba(0, 0, 0, 0);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+
+            transition: background-color 0.3s;
+
+            .item-main-option-icon {
+                color: #000;
+                transition: color 0.15s;
+            }
+
+            &:hover,
+            &:active {
+                background-color: #8b8b8b;
+
+                .item-main-option-icon {
+                    color: #fff;
+                }
+            }
+        }
+
+        &:hover,
+        &:active {
+            background-color: #d2d2d2;
+        }
+    }
+
+    .item-main-selected {
+        background-color: rgba(0, 128, 207, 0.32);
+
+        &:hover {
+            background-color: rgba(0, 128, 207, 0.64);
+            ;
+        }
+    }
+}
+</style>

src/plugins/miaoDirectory/components/miaoDirectoryItemsContainer.vue

@@ -0,0 +1,181 @@
+<template>
+    <div
+        class="miao-directory-container-items"
+        :style="{
+            backgroundColor: index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
+        }">
+        <n-scrollbar ref="scrollbarRef" style="max-height: 100%">
+            <miao-lazy-div
+                v-for="dir in showData_directory"
+                :key="dir.id"
+                min-height="50px">
+                <miaoDirectoryItem
+                    :item="dir"
+                    :color="props.color"
+                    :selected="selectedItem.includes(dir)"
+                    :drop-down-options="itemDropDownOptions(dir).value"
+                    @delete="handleItemDelete(dir)"
+                    @plugin="(p) => handleItemUsePlugin(dir)(p)"
+                    @click="handleItemClick(dir)"
+                    @drag-start="(e) => handleItemDragStart(dir)(e)"
+                    @rename="handleItemRename(dir)"
+                    @on-selected="handleItemSelect(dir)" />
+            </miao-lazy-div>
+            <miao-lazy-div
+                v-for="file in showData_files"
+                :key="file.id"
+                min-height="50px">
+                <miaoDirectoryItem
+                    :item="file"
+                    :color="props.color"
+                    :selected="selectedItem.includes(file)"
+                    :drop-down-options="itemDropDownOptions(file).value"
+                    @click="handleItemClick(file)"
+                    @download="handleItemDownload(file)"
+                    @delete="handleItemDelete(file)"
+                    @drag-start="(e) => handleItemDragStart(file)(e)"
+                    @rename="handleItemRename(file)"
+                    @plugin="(p) => handleItemUsePlugin(file)(p)"
+                    @on-selected="handleItemSelect(file)" />
+            </miao-lazy-div>
+        </n-scrollbar>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { NScrollbar } from 'naive-ui'
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
+import miaoDirectoryItem from './miaoDirectoryItem.vue'
+import miaoLazyDiv from '@/components/miaoLazyDiv.vue'
+import { computed, ref } from 'vue'
+import usePluginCenter from '@/hooks/usePluginCenter'
+import { renderIcon } from '@/hooks/miaoTools'
+
+const pluginCenter = usePluginCenter()
+
+const props = defineProps<{
+    color: string
+    index: number
+    showData_directory: VirtualDirectory[]
+    showData_files: VirtualFile[]
+    selectedItem: (VirtualFile | VirtualDirectory)[]
+}>()
+
+const emit = defineEmits<{
+    'item-click': [item: VirtualDirectory | VirtualFile]
+    'item-download': [item: VirtualFile]
+    'item-delete': [item: VirtualDirectory | VirtualFile]
+    'item-drag-start': [_event: DragEvent, item: VirtualDirectory | VirtualFile]
+    'item-rename': [item: VirtualDirectory | VirtualFile]
+    'item-select': [item: VirtualDirectory | VirtualFile]
+}>()
+
+const scrollbarRef = ref()
+
+const itemDropDownOptions = (item: VirtualDirectory | VirtualFile) =>
+    computed(() => {
+        const items = [...props.selectedItem]
+        const selected = props.selectedItem.includes(item)
+        if (!selected) {
+            items.push(item)
+        }
+        const vDirs = items.filter((v) => v.type === 'directory')
+        const vFiles = items.filter((v) => v.type === 'file')
+        const options = [
+            {
+                label: '重命名',
+                key: 'rename'
+            },
+            {
+                label: '删除',
+                key: 'delete'
+            }
+        ]
+        if (item.type === 'file') {
+            options.push(
+                ...[
+                    {
+                        label: '下载',
+                        key: 'download'
+                    }
+                ]
+            )
+        }
+        if (selected === false) {
+            options.push(
+                ...[
+                    {
+                        label: '多选:选择',
+                        key: 'select'
+                    }
+                ]
+            )
+        } else {
+            options.push(
+                ...[
+                    {
+                        label: '多选:取消',
+                        key: 'select'
+                    }
+                ]
+            )
+        }
+        options.push(
+            ...pluginCenter.getUsablePlugin(vDirs, vFiles).map((v) => ({
+                label: `插件:${v.name}`,
+                key: `plugin:${v.key}`,
+                icon: v.icon ? renderIcon(v.icon) : undefined
+            }))
+        )
+        return options
+    })
+
+const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
+    emit('item-click', item)
+}
+
+const handleItemDownload = (item: VirtualFile) => {
+    emit('item-download', item)
+}
+
+const handleItemDelete = (item: VirtualDirectory | VirtualFile) => {
+    emit('item-delete', item)
+}
+
+const handleItemDragStart =
+    (item: VirtualDirectory | VirtualFile) => (_event: DragEvent) => {
+        emit('item-drag-start', _event, item)
+    }
+
+const handleItemRename = (item: VirtualDirectory | VirtualFile) => {
+    emit('item-rename', item)
+}
+
+const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
+    emit('item-select', item)
+}
+
+const handleItemUsePlugin =
+    (item: VirtualDirectory | VirtualFile) => (plugin: string) => {
+        const items = [...props.selectedItem]
+        const selected = props.selectedItem.includes(item)
+        if (!selected) {
+            items.push(item)
+        }
+        const vDirs = items.filter((v) => v.type === 'directory')
+        const vFiles = items.filter((v) => v.type === 'file')
+        pluginCenter.usePlugin(plugin, vDirs, vFiles)
+    }
+
+defineExpose({
+    scrollTo: (...args: any) => scrollbarRef.value.scrollTo(...args)
+})
+</script>
+
+<style scoped lang="scss">
+.miao-directory-container-items {
+    width: 100%;
+    flex: 1;
+    min-height: 0;
+}
+</style>

src/plugins/miaoDirectory/components/miaoDirectoryTop.vue

@@ -0,0 +1,152 @@
+<template>
+    <div class="miao-directory-container-top" :style="{
+        backgroundColor:
+            index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
+    }">
+        <div class="container-top-colorfulBar" :style="{ backgroundColor: props.color }"></div>
+        <div class="container-top-breadcrumb">
+            <div class="container-top-breadcrumb-container">
+                <n-breadcrumb separator=">" style="margin-left: 5px">
+                    <n-breadcrumb-item :clickable="false">
+                        <n-icon size="18">
+                            <CloudOutline />
+                        </n-icon>
+                    </n-breadcrumb-item>
+                    <n-breadcrumb-item v-for="dir in currentDirectory?.getParents"
+                        @click="handleClickBreadcrumbItem(dir)" :clickable="true">
+                        <div>{{ dir.name }}</div>
+                    </n-breadcrumb-item>
+                </n-breadcrumb>
+            </div>
+        </div>
+        <div class="container-top-tools">
+            <n-icon class="container-top-tools-item" size="15" @click="$emit('back')">
+                <ChevronBackOutline />
+            </n-icon>
+            <n-icon class="container-top-tools-item" size="14" @click="$emit('reload')">
+                <ReloadOutline class="container-top-tools-item-reload" />
+            </n-icon>
+            <n-dropdown trigger="click" :options="openMenuOption" @select="(key: string) => emit('menuSelect', key)">
+                <n-icon class="container-top-tools-item" size="14">
+                    <EllipsisVertical />
+                </n-icon>
+            </n-dropdown>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { NBreadcrumbItem, NBreadcrumb, NIcon, NDropdown } from 'naive-ui'
+import {
+    CloudOutline,
+    ChevronBackOutline,
+    ReloadOutline,
+    EllipsisVertical,
+} from '@vicons/ionicons5'
+import VirtualDirectory from '@/class/VirtualDirectory'
+
+const props = defineProps<{
+    color: string;
+    index: number
+    currentDirectory: VirtualDirectory | undefined;
+    openMenuOption: {
+        key: string,
+        label: string,
+        [key: string]: any,
+    }[]
+}>()
+
+const emit = defineEmits<{
+    back: [],
+    reload: [],
+    menuSelect: [key: string]
+    'set-current-directory': [virtualDirectory: VirtualDirectory]
+}>()
+
+const handleClickBreadcrumbItem = (virtualDirectory: VirtualDirectory) => {
+    emit('set-current-directory', virtualDirectory)
+}
+
+</script>
+
+<style scoped lang="scss">
+.miao-directory-container-top {
+    height: 30px;
+    width: 100%;
+    user-select: none;
+    position: relative;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    background-color: #f1f1f1;
+
+    .container-top-colorfulBar {
+        height: 70%;
+        width: 5px;
+        margin-left: 10px;
+        border-radius: 3px 0 0 3px;
+    }
+
+    .container-top-breadcrumb {
+        position: relative;
+        height: 70%;
+        width: calc(100% - 95px);
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        // overflow: hidden;
+        overflow-y: hidden;
+        overflow-x: hidden;
+        background-color: #ffffff;
+        padding: 0 5px;
+        border-radius: 0 3px 3px 0;
+
+        .container-top-breadcrumb-container {
+            position: absolute;
+            height: 100%;
+            right: 0;
+            top: 0;
+            min-width: 100%;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+        }
+    }
+
+    .container-top-tools {
+        position: relative;
+        height: 100%;
+        // width: 70px;
+        padding: 0 5px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .container-top-tools-item {
+            width: 20px;
+            height: 20px;
+            margin: 0 1px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: #ffffff00;
+            border-radius: 5px;
+            transition: background-color 0.3s;
+            cursor: pointer;
+
+            .container-top-tools-item-reload {
+                transition: transform 0.6s ease-in-out;
+            }
+
+            &:hover {
+                background-color: rgba(128, 128, 128, 0.4);
+            }
+
+            &:active .container-top-tools-item-reload {
+                transform: rotate(360deg);
+            }
+        }
+
+    }
+}
+</style>

src/plugins/miaoDirectory/export.ts

@@ -0,0 +1,19 @@
+import { registerComponentOption } from '@/class/PluginCenter'
+import FileTray from '@vicons/ionicons5/es/FileTray'
+// import MiaoDirectory from '@/plugins/miaoDirectory/miaoDirectory.vue'
+
+const pluginConfig: registerComponentOption = {
+    key: 'miaoDirectory',
+    name: '文件夹',
+    icon: FileTray,
+    getComponent: async () =>
+        (await import('@/plugins/miaoDirectory/miaoDirectory.vue')).default,
+    filter: (vDirs, vFiles) => {
+        if (vFiles.length) {
+            return false
+        }
+        return vDirs.length === 1
+    }
+}
+
+export default pluginConfig

src/plugins/miaoDirectory/miaoDirectory.vue

@@ -0,0 +1,591 @@
+<template>
+    <miao-drop-handler
+        @on-virtual-directory="handleDropVDirectory"
+        @on-files="handleDropFiles"
+        @on-virtual-files="handleDropVirtualFiles">
+        <div class="miao-directory-item-container" ref="rootDomRef">
+            <!-- 顶部面包屑导航和工具栏 -->
+            <miao-directory-top
+                :color="props.color"
+                :current-directory="currentDirectory"
+                @back="handleBack"
+                :open-menu-option="topBarMenuOption"
+                @reload="handleReload"
+                @exit="emit('exit')"
+                :index="index"
+                @set-current-directory="setCurrentDirectory"
+                @search="handleSearch"
+                @menu-select="handleTopBarMenuSelect" />
+
+            <!-- 文件和文件夹列表 -->
+            <miao-directory-items
+                ref="miaoDirectoryItemRef"
+                :color="props.color"
+                :showData_directory="showData_directory"
+                :showData_files="showData_files"
+                :selected-item="selectedItem.value"
+                :index="index"
+                @item-click="handleItemClick"
+                @item-download="handleItemDownload"
+                @item-delete="handleItemDelete"
+                @item-drag-start="handleItemDragStart"
+                @item-rename="handleItemRename"
+                @item-select="handleItemSelect" />
+
+            <!-- 底部工具栏 -->
+            <miao-directory-bottom
+                :index="index"
+                @add-new-item="handleAddNewItem"
+                v-if="false"
+                @pick-files-upload="handlePickFilesUpload" />
+
+            <miao-mask v-model:show="showModel"></miao-mask>
+            <miao-popup-input ref="popupInput"></miao-popup-input>
+        </div>
+    </miao-drop-handler>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, reactive, ref } from 'vue'
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
+import Config from '@/config'
+import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
+import useDataBus from '@/hooks/useDataBus'
+import useUploadQueue from '@/hooks/useUploadQueue'
+import useVirtualPages from '@/hooks/useVirtualPages'
+import { filePicker, renderIcon } from '@/hooks/miaoTools'
+import { uniq } from 'lodash'
+
+// 导入子组件
+import miaoDirectoryTop from './components/miaoDirectoryTop.vue'
+import MiaoDirectoryItems from './components/miaoDirectoryItemsContainer.vue'
+import MiaoDirectoryBottom from './components/miaoDirectoryBottom.vue'
+import MiaoMask from '@/components/miaoMask.vue'
+import MiaoPopupInput from '@/components/miaoPopupInput.vue'
+import MiaoDropHandler from '@/components/miaoDropHandler.vue'
+import {
+    CloseOutline,
+    SearchOutline,
+    FilterOutline,
+    CheckmarkDoneOutline,
+    DocumentText,
+    ExtensionPuzzleOutline,
+    FileTray,
+    AddOutline,
+    CloudUploadOutline
+} from '@vicons/ionicons5'
+import usePluginCenter from '@/hooks/usePluginCenter'
+
+const { baseUrl, api } = Config
+const dataBus = useDataBus()
+const views = useVirtualPages()
+const uploadQueue = useUploadQueue()
+const miaoFetchApi = useMiaoFetchApi()
+const pluginCenter = usePluginCenter()
+
+const props = defineProps<{
+    color: string
+    id: number
+}>()
+
+const emit = defineEmits<{
+    exit: []
+}>()
+
+const popupInput = ref<InstanceType<typeof MiaoPopupInput>>()
+// 是否显示模态框
+const showModel = ref(0)
+const searchText = ref<string>('')
+const showDirs = ref<boolean>(true)
+const showFiles = ref<boolean>(true)
+const miaoDirectoryItemRef = ref()
+
+class SelectedItem {
+    constructor() {
+        this._selectedItem = []
+    }
+    _selectedItem: (VirtualDirectory | VirtualFile)[]
+    push(item: VirtualDirectory | VirtualFile) {
+        this._selectedItem = [item, ...this._selectedItem]
+    }
+    remove(item: VirtualDirectory | VirtualFile) {
+        this._selectedItem = this._selectedItem.filter((v) => v !== item)
+    }
+    clear() {
+        this._selectedItem = []
+    }
+    // 保证内容仍然存在于dir中且各个元素不重复
+    get value() {
+        const _filterList = [
+            ...(currentDirectory.value?.directories ?? []),
+            ...(currentDirectory.value?.files ?? [])
+        ]
+        return uniq(this._selectedItem).filter((v) => {
+            if (currentDirectory.value === undefined) {
+                return false
+            }
+            // @ts-ignore
+            return _filterList.includes(v)
+        })
+    }
+}
+// 已选择的item，用于多选功能
+const selectedItem = reactive(new SelectedItem())
+
+const currentDirectories = defineModel<VirtualDirectory[]>(
+    'currentDirectories',
+    {
+        required: true
+    }
+)
+
+// 目前展示的Dir
+const currentDirectory = computed(() => {
+    return currentDirectories.value[0]
+})
+
+// 当前组件在views中的序号
+const index = computed(() => {
+    return views.getIndex(props.id)
+})
+
+// 用于展示的数据，后续会增加排序等操作
+const showData_directory = computed<VirtualDirectory[]>(() => {
+    if (showDirs.value === false) {
+        return []
+    }
+    let data = currentDirectory.value?.directories
+        ? [...currentDirectory.value?.directories]
+        : []
+    if (searchText.value !== '') {
+        data = data.filter((vd) => vd.name.includes(searchText.value))
+    }
+    return data
+})
+const showData_files = computed<VirtualFile[]>(() => {
+    if (showFiles.value === false) {
+        return []
+    }
+    let data = currentDirectory.value?.files
+        ? [...currentDirectory.value?.files]
+        : []
+    if (searchText.value !== '') {
+        data = data.filter((vd) => vd.name.includes(searchText.value))
+    }
+    return data
+})
+
+const topBarMenuOption = computed(() => {
+    return [
+        {
+            label: '新建',
+            key: 'create',
+            icon: renderIcon(AddOutline)
+        },
+        {
+            label: '上传',
+            key: 'upload',
+            icon: renderIcon(CloudUploadOutline)
+        },
+        {
+            label: '搜索',
+            key: 'search',
+            icon: renderIcon(SearchOutline)
+        },
+        searchText.value !== ''
+            ? {
+                  label: '重置搜索',
+                  key: 'searchReset',
+                  icon: renderIcon(SearchOutline)
+              }
+            : undefined,
+        selectedItem.value.length !== 0
+            ? {
+                  label: '重置多选',
+                  key: 'selectedItemReset',
+                  icon: renderIcon(CheckmarkDoneOutline)
+              }
+            : undefined,
+        {
+            label: '筛选',
+            key: 'filter',
+            children: [
+                {
+                    label: `${showDirs.value ? '隐藏' : '显示'}文件夹`,
+                    key: 'showDirs',
+                    icon: renderIcon(FileTray)
+                },
+                {
+                    label: `${showFiles.value ? '隐藏' : '显示'}文件`,
+                    key: 'showFiles',
+                    icon: renderIcon(DocumentText)
+                }
+            ],
+            icon: renderIcon(FilterOutline)
+        },
+        {
+            label: '插件',
+            key: 'plugin',
+            children: [
+                ...pluginCenter
+                    .getUsablePlugin([currentDirectories.value[0]], [])
+                    .map((v) => ({
+                        label: `${v.name}`,
+                        key: `plugin:${v.key}`,
+                        icon: v.icon ? renderIcon(v.icon) : undefined
+                    }))
+            ],
+            icon: renderIcon(ExtensionPuzzleOutline)
+        },
+        {
+            label: '关闭',
+            key: 'close',
+            icon: renderIcon(CloseOutline)
+        }
+    ].filter((v) => v !== undefined)
+})
+
+// 设置显示的dir
+const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
+    // 若没有缓存数据则同步刷新，有缓存数据则异步刷新
+    if (
+        virtualDirectory.files === undefined ||
+        virtualDirectory.directories === undefined
+    ) {
+        await virtualDirectory.update()
+    } else {
+        virtualDirectory.update()
+    }
+    if (currentDirectories.value[0] !== virtualDirectory) {
+        selectedItem.clear()
+        handleSearchReset()
+        nextTick(() => {
+            miaoDirectoryItemRef.value.scrollTo({
+                top: 0,
+                behavior: 'instant'
+            })
+        })
+    }
+    currentDirectories.value[0] = virtualDirectory
+}
+
+const reload = () => {
+    setCurrentDirectory(currentDirectory.value)
+}
+
+const openUrl = (
+    href: string,
+    config?: {
+        download?: string
+        target?: string
+    }
+) => {
+    let { target, download } = config ?? {}
+    const a = document.createElement('a')
+    a.setAttribute('href', href)
+    a.setAttribute('target', target ?? '_blank')
+    download && a.setAttribute('download', download)
+    a.click()
+}
+
+const handleTopBarMenuSelect = (key: string) => {
+    if (key === 'close') {
+        emit('exit')
+    } else if (key === 'search') {
+        handleSearch()
+    } else if (key === 'upload') {
+        handlePickFilesUpload()
+    } else if (key === 'create') {
+        handleAddNewItem()
+    } else if (key === 'searchReset') {
+        handleSearchReset()
+    } else if (key === 'selectedItemReset') {
+        selectedItem.clear()
+    } else if (key === 'showDirs') {
+        showDirs.value = !showDirs.value
+    } else if (key === 'showFiles') {
+        showFiles.value = !showFiles.value
+    } else if (key.startsWith('plugin:')) {
+        const pluginName = key.split(':')[1]
+        pluginCenter.usePlugin(pluginName, [currentDirectory.value], [])
+    }
+}
+
+const handleBack = () => {
+    if (currentDirectory.value?.parent) {
+        setCurrentDirectory(currentDirectory.value.parent)
+    }
+}
+
+const handleReload = () => {
+    reload()
+}
+
+const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
+    if (selectedItem.value.length > 0) {
+        handleItemSelect(item)
+    } else {
+        if (item.type === 'file') {
+            openUrl(`${baseUrl}${api.get}${item.path}`)
+        } else if (item.type === 'directory') {
+            setCurrentDirectory(item)
+        }
+    }
+}
+
+const handleItemDownload = (item: VirtualFile) => {
+    openUrl(`${baseUrl}${api.get}${item.path}`, {
+        download: item.name
+    })
+}
+
+const handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
+    for (let item of uniq([...selectedItem.value, _item])) {
+        ;(async () => {
+            const { response } = miaoFetchApi.delete(item, {
+                retry: 5
+            })
+            // todo: 将删除事件统一用一个事件管理中心管理
+            const id = (await response).eventId
+            const { response: res } = miaoFetchApi.query(id)
+            const eventResult = await res
+            if (eventResult.status === 'success') {
+                reload()
+            }
+        })()
+    }
+}
+
+const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
+    const popupRes = await popupInput.value?.popup({
+        title: '重命名',
+        inputValue: item.name,
+        inputProps: {
+            placeholder: item.name
+        },
+        options: [
+            {
+                label: '取消',
+                key: false,
+                type: 'error'
+            },
+            {
+                label: '确认',
+                key: true,
+                type: 'success'
+            }
+        ]
+    })
+    if (popupRes?.key === false) {
+        return
+    }
+    const newName = popupRes?.text
+    if (!newName) {
+        return
+    }
+    const { response } = miaoFetchApi.rename(item, newName, {
+        retry: 5
+    })
+    const id = (await response).eventId
+    const { response: res } = miaoFetchApi.query(id)
+    const eventResult = await res
+    if (eventResult.status === 'success') {
+        reload()
+    }
+}
+
+const handleItemDragStart = async (
+    _event: DragEvent,
+    item: VirtualDirectory | VirtualFile
+) => {
+    const items = uniq([item, ...selectedItem.value])
+    dataBus.set(
+        'dragData_vFiles',
+        items.filter((v) => v.type === 'file')
+    )
+    dataBus.set(
+        'dragData_vDirectory',
+        items.filter((v) => v.type === 'directory')
+    )
+    // selectedItem.clear()
+}
+
+const handleDropFiles = async (files: File[]) => {
+    currentDirectory.value &&
+        uploadQueue.push(files, currentDirectory.value, {
+            onFinish() {
+                reload()
+            }
+        })
+}
+
+const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
+    // 不能移到自己或自己的子文件夹内
+    for (let vDir of vDirs) {
+        if (currentDirectory.value.getParents.includes(vDir)) {
+            return
+        }
+        if (vDir.parent === currentDirectory.value) {
+            return
+        }
+    }
+    for (let dir of vDirs) {
+        ;(async () => {
+            const _from = dir.parent
+            const { response } = miaoFetchApi.cut(dir, currentDirectory.value)
+            const id = (await response).eventId
+            const { response: res } = miaoFetchApi.query(id)
+            const eventResult = await res
+            if (eventResult.status === 'success') {
+                reload()
+                _from && _from.update()
+            }
+        })()
+    }
+}
+
+const handleDropVirtualFiles = (files: VirtualFile[]) => {
+    if (files[0].parent === currentDirectory.value) {
+        return
+    }
+    for (let file of files) {
+        ;(async () => {
+            const _from = file.parent
+            const { response } = miaoFetchApi.cut(file, currentDirectory.value)
+            const id = (await response).eventId
+            const { response: res } = miaoFetchApi.query(id)
+            const eventResult = await res
+            if (eventResult.status === 'success') {
+                reload()
+                _from.update()
+            }
+        })()
+    }
+}
+
+const handlePickFilesUpload = async () => {
+    const files = await filePicker({
+        multiple: true
+    })
+    const _currDir = currentDirectory.value
+    uploadQueue.push(files, _currDir, {
+        onFinish() {
+            _currDir.update()
+        }
+    })
+}
+
+const handleAddNewItem = async () => {
+    const popupRes = await popupInput.value?.popup({
+        title: '新建文件/文件夹',
+        inputProps: {
+            placeholder: ''
+        },
+        options: [
+            {
+                label: '取消',
+                key: 'cancel',
+                type: 'error'
+            },
+            {
+                label: '文件',
+                key: 'file',
+                type: 'success'
+            },
+            {
+                label: '文件夹',
+                key: 'dir',
+                type: 'success'
+            }
+        ]
+    })
+    // todo: 上传前如重名文件夹等等的错误提前检查
+    if (popupRes?.key === 'cancel' || popupRes?.text === '') {
+        return
+    }
+    const _currDir = currentDirectory.value
+    const name = popupRes?.text
+    if (!name) {
+        return
+    }
+    // @ts-ignore
+    const opType: 'file' | 'dir' = popupRes?.key
+    if (opType === 'dir') {
+        const res = await miaoFetchApi.mkdir(currentDirectory.value, name)
+        if (res.message === 'success') {
+            _currDir.update()
+        }
+    } else {
+        const { response } = miaoFetchApi.mkFile(currentDirectory.value, name)
+        const res = await response
+        if (res.message === 'success') {
+            _currDir.update()
+        }
+    }
+}
+
+const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
+    if (!selectedItem.value.includes(item)) {
+        selectedItem.push(item)
+    } else {
+        selectedItem.remove(item)
+    }
+}
+
+const handleSearch = async () => {
+    const popupRes = await popupInput.value?.popup({
+        title: '搜索当前文件夹',
+        inputValue: searchText.value,
+        inputProps: {
+            placeholder: ''
+        },
+        options: [
+            {
+                label: '取消',
+                key: 'cancel',
+                type: 'default'
+            },
+            {
+                label: '重置',
+                key: 'reset',
+                type: 'default'
+            },
+            {
+                label: '搜索',
+                key: 'search',
+                type: 'success'
+            }
+        ]
+    })
+    if (!popupRes) {
+        return
+    }
+    if (popupRes.key === 'search') {
+        searchText.value = popupRes.text
+    } else if (popupRes.key === 'reset') {
+        handleSearchReset()
+    }
+}
+
+const handleSearchReset = () => {
+    searchText.value = ''
+}
+onMounted(async () => {
+    await setCurrentDirectory(currentDirectory.value)
+})
+</script>
+
+<style scoped lang="scss">
+$top-height: 30px;
+$bottom-bar-height: 60px;
+
+.miao-directory-item-container {
+    position: relative;
+    height: 100%;
+    width: inherit;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    min-width: 170px;
+}
+</style>

src/plugins/miaoIframe/export.ts

@@ -0,0 +1,21 @@
+import { registerComponentOption } from '@/class/PluginCenter'
+import LogoChrome from '@vicons/ionicons5/es/LogoChrome'
+
+const pluginConfig: registerComponentOption = {
+    key: 'miaoIframe',
+    name: '框架',
+    icon: LogoChrome,
+    getComponent: async () =>
+        (await import('@/plugins/miaoIframe/miaoIframe.vue')).default,
+    filter: (vDirs, vFiles) => {
+        if (vDirs.length !== 0) {
+            return false
+        }
+        if (vFiles.length !== 1) {
+            return false
+        }
+        return vFiles[0].name.endsWith('html')
+    }
+}
+
+export default pluginConfig

src/plugins/miaoIframe/miaoIframe.vue

@@ -0,0 +1,34 @@
+<template>
+    <div class="miao-markdown-container-miaomiaomiao">
+        <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">
+.miao-markdown-container-miaomiaomiao {
+    width: 100%;
+    height: 100%;
+    .iframe-container-iframe {
+        width: inherit;
+        height: inherit;
+    }
+}
+</style>

src/plugins/miaoImages/export.ts

@@ -0,0 +1,45 @@
+import { registerComponentOption } from '@/class/PluginCenter'
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
+import { Image } from '@vicons/ionicons5'
+
+const pluginConfig: registerComponentOption = {
+    key: 'miaoImages',
+    name: '图片浏览',
+    icon: Image,
+    getComponent: async () =>
+        (await import('@/plugins/miaoImages/miaoImages.vue')).default,
+    filter: (vDirs: VirtualDirectory[], vFiles: VirtualFile[]) => {
+        if (vDirs.length === 0 && vFiles.length === 0) {
+            return false
+        }
+        if (vDirs.length) {
+            return true
+        }
+        for (let vf of vFiles)
+            for (let end of [
+                'xbm',
+                'tif',
+                'pjp',
+                'svgz',
+                'jpg',
+                'jpeg',
+                'ico',
+                'tiff',
+                'gif',
+                'svg',
+                'jfif',
+                'webp',
+                'png',
+                '.bmp',
+                'pjpeg',
+                'avif'
+            ]) {
+                if (vf.name.endsWith(end)) {
+                    return true
+                }
+            }
+        return false
+    }
+}
+
+export default pluginConfig

src/plugins/miaoImages/miaoImages.vue

@@ -0,0 +1,316 @@
+<template>
+    <miao-drop-handler @on-virtual-directory="handleDrop" @on-virtual-files="handleDrop">
+        <miao-message-provider ref="miaoMessageRef">
+            <div class="miaoImage" ref="rootRef">
+                <n-scrollbar ref="NScrollbarRef">
+                    <div class="miaoImage-container" v-for="imageGroup in imageGroupList">
+                        <div class="miaoImage-container-day">
+                            <!-- <div class="miaoImage-container-divide miaoImage-container-divide-before">
+                            <div class="miaoImage-container-divide-line"></div>
+                        </div> -->
+                            <span class="miaoImage-container-day-text">
+                                {{ imageGroup.day }}
+                            </span>
+                            <!-- <div class="miaoImage-container-divide">
+                            <div class="miaoImage-container-divide-line"></div>
+                        </div> -->
+                        </div>
+                        <div class="miaoImage-container-row" v-for="vFile in imageGroup.items" :key="vFile.id">
+                            <img :src="vFile.url" class="miaoImage-container-row-image" loading="lazy" :class="activeImage === vFile
+                                ? 'miaoImage-container-row-image-active'
+                                : ''
+                                " @click="activeImage = vFile" />
+                        </div>
+                    </div>
+                </n-scrollbar>
+                <miao-mask :show="activeImage !== undefined" @click="activeImage = undefined" class="miaoImage-mask">
+                    <ChevronBack class="miaoImage-mask-btn miaoImage-mask-btn-back" @click="handleActiveImageBack" />
+                    <img :src="activeImage?.url" class="miaoImage-mask-active" @click="(e) => e.stopPropagation()"
+                        draggable="false" />
+                    <ChevronForward class="miaoImage-mask-btn miaoImage-mask-btn-forward"
+                        @click="handleActiveImageForward" />
+                </miao-mask>
+            </div>
+        </miao-message-provider>
+    </miao-drop-handler>
+</template>
+
+<script setup lang="ts">
+import miaoMask from '@/components/miaoMask.vue'
+import miaoDropHandler from '@/components/miaoDropHandler.vue'
+import miaoMessageProvider from '@/components/miaoMessageProvider.vue'
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
+import { uniq } from 'lodash'
+import { computed, nextTick, onMounted, ref } from 'vue'
+import { NScrollbar } from 'naive-ui'
+import { ChevronBack, ChevronForward } from '@vicons/ionicons5'
+
+const imageSuffixList = [
+    'xbm',
+    'tif',
+    'pjp',
+    'svgz',
+    'jpg',
+    'jpeg',
+    'ico',
+    'tiff',
+    'gif',
+    'svg',
+    'jfif',
+    'webp',
+    'png',
+    'bmp',
+    'pjpeg',
+    'avif'
+]
+
+const currentDirectories = defineModel<VirtualDirectory[]>(
+    'currentDirectories',
+    {
+        required: true
+    }
+)
+const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
+    required: true
+})
+
+const NScrollbarRef = ref()
+const rootRef = ref<any>()
+const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
+
+const imageFileList = ref<VirtualFile[]>([])
+
+const imageGroupList = computed(() => {
+    return groupByDay(imageFileList.value)
+})
+const activeImage = ref<VirtualFile>()
+
+const groupByDay = (array: VirtualFile[]) => {
+    const result = []
+    let currentDay = null
+    let currentGroup: VirtualFile[] = []
+
+    for (const item of array) {
+        const date = new Date(item.stats.mtimeMs)
+        const day = `${date.getFullYear()}年 ${String(
+            date.getMonth() + 1
+        ).padStart(2, '0')}月 ${String(date.getDate()).padStart(2, '0')}日`
+
+        if (day !== currentDay) {
+            if (currentGroup.length > 0) {
+                result.push({
+                    day: currentDay,
+                    items: currentGroup
+                })
+            }
+            currentDay = day
+            currentGroup = [item]
+        } else {
+            currentGroup.push(item)
+        }
+    }
+    if (currentGroup.length > 0) {
+        result.push({
+            day: currentDay,
+            items: currentGroup
+        })
+    }
+
+    return result
+}
+
+const scrollToActiveImage = () => {
+    const dom = rootRef.value?.querySelector(
+        '.miaoImage-container-row-image-active'
+    )
+    NScrollbarRef.value.scrollTo({
+        top: dom.offsetTop - 30,
+        behavior: 'smooth'
+    })
+}
+
+const handleActiveImageBack = (e: any) => {
+    e.stopPropagation()
+    if (!activeImage.value) {
+        return
+    }
+    const index = imageFileList.value.indexOf(activeImage.value)
+    activeImage.value =
+        imageFileList.value[
+        (index - 1 + imageFileList.value.length) %
+        imageFileList.value.length
+        ]
+    nextTick(scrollToActiveImage)
+}
+
+const handleActiveImageForward = (e: any) => {
+    e.stopPropagation()
+    if (!activeImage.value) {
+        return
+    }
+    const index = imageFileList.value.indexOf(activeImage.value)
+    activeImage.value =
+        imageFileList.value[
+        (index + 1 + imageFileList.value.length) %
+        imageFileList.value.length
+        ]
+    nextTick(scrollToActiveImage)
+}
+
+const handleDrop = async (vItems: (VirtualFile | VirtualDirectory)[]) => {
+    const length_before = imageFileList.value.length
+    if (vItems[0].type === 'directory') {
+        // @ts-ignore
+        currentDirectories.value = [...currentDirectories.value, ...vItems]
+        for (const i of vItems) {
+            // @ts-ignore
+            await updateImageSrcList(i)
+        }
+    } else {
+        // @ts-ignore
+        currentFiles.value = [...currentFiles, ...vItems]
+        // @ts-ignore
+        await updateImageSrcList(vItems)
+    }
+    miaoMessageRef.value?.message(length_before === imageFileList.value.length ? '未发现任何可添加图片' : `导入${imageFileList.value.length - length_before}张图片`, {
+        type: length_before === imageFileList.value.length ? 'info' : 'success'
+        , timeout: 5000
+    })
+}
+
+const updateImageSrcList = async (source: VirtualFile[] | VirtualDirectory) => {
+    let newFileList: VirtualFile[]
+    if ('type' in source) {
+        await source.update()
+        newFileList = [
+            ...(source.files?.filter((v) =>
+                imageSuffixList.includes(v.name.split('.').pop() ?? '')
+            ) ?? [])
+        ]
+    } else {
+        newFileList = [
+            ...(source.filter((v) =>
+                imageSuffixList.includes(v.name.split('.').pop() ?? '')
+            ) ?? [])
+        ]
+    }
+    imageFileList.value = uniq([...imageFileList.value, ...newFileList]).sort(
+        (a, b) => - a.stats.mtimeMs + b.stats.mtimeMs
+    )
+}
+
+onMounted(async () => {
+    const length_before = imageFileList.value.length;
+    for (const i of [currentFiles.value, ...currentDirectories.value]) {
+        await updateImageSrcList(i)
+    }
+    miaoMessageRef.value?.message(length_before === imageFileList.value.length ? '未发现任何新增图片' : `导入${imageFileList.value.length - length_before}张图片`, {
+        type: length_before === imageFileList.value.length ? 'info' : 'success'
+        , timeout: 5000
+    })
+})
+</script>
+
+<style scoped lang="scss">
+.miaoImage {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+
+    .miaoImage-container {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        margin-bottom: 20px;
+        margin-top: 20px;
+
+        .miaoImage-container-day {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            position: relative;
+            margin: 0 20px;
+
+            .miaoImage-container-divide {
+                flex: 1;
+                height: 100%;
+                position: relative;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+
+            .miaoImage-container-divide-line {
+                height: 3px;
+                width: 100%;
+                border-radius: 5px;
+                background-color: rgb(244 244 244);
+            }
+
+            .miaoImage-container-divide-before {
+                flex: 0.1;
+            }
+
+            .miaoImage-container-day-text {
+                margin: 0 0 0 10px;
+                font-size: 15px;
+                user-select: none;
+            }
+        }
+
+        .miaoImage-container-row {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 25%;
+            aspect-ratio: 1;
+
+            .miaoImage-container-row-image {
+                width: 80%;
+                aspect-ratio: 1;
+                object-fit: cover;
+                transition: width 0.25s;
+                box-shadow: 0 0 10px -5px;
+                cursor: pointer;
+                user-select: none;
+
+                &:hover {
+                    width: 90%;
+                }
+
+                &-active {
+                    width: 90%;
+                }
+            }
+        }
+    }
+
+    .miaoImage-mask {
+        background-color: rgba(0, 0, 0, 0.444);
+    }
+
+    .miaoImage-mask-active {
+        max-width: 80%;
+        max-height: 80%;
+        user-select: none;
+    }
+
+    .miaoImage-mask-btn {
+        color: #ffffff99;
+        width: 7%;
+        position: absolute;
+        cursor: pointer;
+
+        &-back {
+            left: 1%;
+        }
+
+        &-forward {
+            right: 1%;
+        }
+    }
+}
+</style>

src/plugins/miaoMarkdown/export.ts

@@ -0,0 +1,21 @@
+import { registerComponentOption } from '@/class/PluginCenter'
+import DocumentText from '@vicons/ionicons5/es/DocumentText'
+
+const pluginConfig: registerComponentOption = {
+    key: 'miaoMarkdown',
+    name: 'markdown浏览',
+    icon: DocumentText,
+    getComponent: async () =>
+        (await import('@/plugins/miaoMarkdown/miaoMarkdown.vue')).default,
+    filter: (vDirs, vFiles) => {
+        if (vDirs.length !== 0) {
+            return false
+        }
+        if (vFiles.length !== 1) {
+            return false
+        }
+        return vFiles[0].name.endsWith('md')
+    }
+}
+
+export default pluginConfig

src/plugins/miaoMarkdown/miaoMarkdown.vue

@@ -0,0 +1,64 @@
+<template>
+  <n-scrollbar>
+    <div class="miao-markdown-container-miaomiaomiao" v-html="renderedMarkdown"></div>
+    <div style="height: 50px; width: 100%;"></div>
+  </n-scrollbar>
+</template>
+
+<script setup lang="ts">
+import { NScrollbar } from 'naive-ui';
+import { VirtualFile } from '@/class/VirtualDirectory'
+import { onMounted, ref } from 'vue'
+import MarkdownIt from 'markdown-it'
+import useMiaoFetchApi from '@/hooks/useMiaoFetchApi';
+
+const miaoFetchApi = useMiaoFetchApi()
+
+const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
+  required: true
+})
+
+const markdownSrc = ref<string>()
+const renderedMarkdown = ref<string>('')
+
+const md = new MarkdownIt()
+
+onMounted(async () => {
+  markdownSrc.value = currentFiles.value[0].url
+  const text = (await miaoFetchApi.getFile(currentFiles.value[0])).toString()
+  renderedMarkdown.value = md.render(text)
+})
+</script>
+
+<style lang="scss">
+.miao-markdown-container-miaomiaomiao {
+  width: 95%;
+  margin: 20px;
+
+  table,
+  td,
+  th {
+    border: 1px solid #ddd;
+    text-align: left;
+  }
+
+  table {
+    border-collapse: collapse;
+    margin-bottom: 20px;
+  }
+
+  th,
+  td {
+    padding: 15px;
+  }
+
+  tr:nth-child(even) {
+    background-color: #f2f2f2
+  }
+
+  th {
+    background-color: #04AA6D;
+    color: white;
+  }
+}
+</style>

src/plugins/miaoPDF/export.ts

@@ -0,0 +1,21 @@
+import { registerComponentOption } from '@/class/PluginCenter'
+import DocumentText from '@vicons/ionicons5/es/DocumentText'
+
+const pluginConfig: registerComponentOption = {
+    key: 'miaoPDF',
+    name: 'PDF浏览',
+    icon: DocumentText,
+    getComponent: async () =>
+        (await import('@/plugins/miaoPDF/miaoPDF.vue')).default,
+    filter: (vDirs, vFiles) => {
+        if (vDirs.length !== 0) {
+            return false
+        }
+        if (vFiles.length !== 1) {
+            return false
+        }
+        return vFiles[0].name.endsWith('pdf')
+    }
+}
+
+export default pluginConfig

src/plugins/miaoPDF/miaoPDF.vue

@@ -0,0 +1,201 @@
+<template>
+    <miao-message-provider ref="miaoMessageRef">
+        <div class="miao-container">
+            <div class="miao-container-topBar">
+                <div
+                    class="miao-container-topBar-btn"
+                    @click="() => handleZoom(10)"
+                    title="快速缩小">
+                    --
+                </div>
+                <div
+                    class="miao-container-topBar-btn"
+                    @click="() => handleZoom()"
+                    title="缩小">
+                    -
+                </div>
+                <div
+                    class="miao-container-topBar-btn"
+                    @click="() => handleResetMargin()"
+                    title="还原">
+                    还原缩放
+                </div>
+                <div
+                    class="miao-container-topBar-btn"
+                    @click="() => handleShrink()"
+                    title="放大">
+                    +
+                </div>
+                <div
+                    class="miao-container-topBar-btn"
+                    @click="() => handleShrink(10)"
+                    title="快速放大">
+                    ++
+                </div>
+            </div>
+            <NScrollbar>
+                <div
+                    class="miao-container-pdf"
+                    :style="{
+                        alignItems: pdfMargin < 0 ? 'baseline' : 'center'
+                    }">
+                    <div
+                        ref="pdfEl"
+                        class="miao-container-pdf-content"
+                        :style="{
+                            width: `calc( 100% - ${pdfMargin}px)`
+                        }"></div>
+                </div>
+            </NScrollbar>
+        </div>
+    </miao-message-provider>
+</template>
+
+<script setup lang="ts">
+import miaoMessageProvider from '@/components/miaoMessageProvider.vue'
+import { onMounted, ref, shallowReactive } from 'vue'
+import PdfjsWorker from 'pdfjs-dist/build/pdf.worker.mjs?worker'
+import { VirtualFile } from '@/class/VirtualDirectory'
+import { NScrollbar } from 'naive-ui'
+
+const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
+    required: true
+})
+
+const pdfEl = ref<HTMLDivElement>()
+const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
+// 通过margin来实现缩小功能
+const pdfMargin = ref<number>(0)
+
+const pdfPageCount = ref<number>(-1)
+
+const canvasList = shallowReactive<HTMLCanvasElement[]>([])
+
+const handleZoom = (index?: number) => {
+    const _index = index ?? 1
+    pdfMargin.value += 10 * _index
+}
+
+const handleShrink = (index?: number) => {
+    const _index = index ?? 1
+    // if (pdfMargin.value - 10 * _index <= 0) {
+    //     return pdfMargin.value = 0
+    // }
+    pdfMargin.value -= 10 * _index
+}
+
+const handleResetMargin = () => {
+    pdfMargin.value = 0
+}
+
+onMounted(async () => {
+    const setLoadingMessage = miaoMessageRef.value?.message('加载PDF插件中', {
+        type: 'info',
+        timeout: -1
+    })
+    const pdfSrc = currentFiles.value[0].url
+    // @ts-ignore
+    const PDFJS = await import('pdfjs-dist/build/pdf.mjs')
+    if (typeof window !== 'undefined' && 'Worker' in window) {
+        PDFJS.GlobalWorkerOptions.workerPort = new PdfjsWorker()
+    }
+    // 加载文档
+    let loadingTask = PDFJS.getDocument({ url: pdfSrc })
+    loadingTask.__PDFDocumentLoadingTask = true
+    const pdf = await loadingTask.promise // 使用await等待加载完毕
+    pdfPageCount.value = pdf.numPages
+    // 循环渲染每一页
+    for (let i = 1; i <= pdf.numPages; i++) {
+        setLoadingMessage && setLoadingMessage(`渲染进度：${i}/${pdf.numPages}`)
+        const page = await pdf.getPage(i)
+        let pixelRatio = 3
+        let viewport = page.getViewport({ scale: 1 })
+        // 使用canvas渲染
+        let canvas = window.document.createElement('canvas')
+        canvasList.push(canvas)
+        // @ts-ignore
+        pdfEl.value.appendChild(canvas)
+        canvas.width = viewport.width * pixelRatio // 计算宽度
+        canvas.height = viewport.height * pixelRatio
+        let renderContext = {
+            canvasContext: canvas.getContext('2d'),
+            viewport: viewport,
+            transform: [pixelRatio, 0, 0, pixelRatio, 0, 0]
+        }
+        await page.render(renderContext).promise // 一页一页的渲染
+    }
+    setLoadingMessage &&
+        setLoadingMessage(`渲染PDF完成`, {
+            type: 'success',
+            timeout: 3456
+        })
+})
+</script>
+
+<style scoped lang="scss">
+.miao-container {
+    width: 100%;
+    height: 100%;
+    background-color: rgb(201, 201, 201);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .miao-container-topBar {
+        box-sizing: border-box;
+        padding: 0 30px;
+        height: 30px;
+        width: 100%;
+        background-color: rgb(170, 176, 182);
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        &-btn {
+            cursor: pointer;
+            user-select: none;
+            height: 80%;
+            padding: 0 5px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: larger;
+            letter-spacing: 1px;
+            color: black;
+            border-radius: 5px;
+
+            &:hover {
+                background-color: #eaeaea42;
+            }
+        }
+    }
+
+    .miao-container-pdf {
+        min-width: 0;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        .miao-container-pdf-content {
+            display: flex;
+            flex-direction: column;
+        }
+    }
+
+    .miao-container-loading {
+        position: absolute;
+        top: 40px;
+        background-color: aliceblue;
+        border: 1px solid black;
+        height: 40px;
+        width: 200px;
+        border-radius: 10px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 15px;
+        letter-spacing: 5px;
+        user-select: none;
+    }
+}
+</style>

src/plugins/miaoVideoPlayer/export.ts

@@ -0,0 +1,28 @@
+import { registerComponentOption } from '@/class/PluginCenter'
+import PlayCircle from '@vicons/ionicons5/es/PlayCircle'
+
+const pluginConfig: registerComponentOption = {
+    key: 'miaoVideoPlayer',
+    name: '视频',
+    icon: PlayCircle,
+    getComponent: async () =>
+        (await import('@/plugins/miaoVideoPlayer/miaoVideoPlayer.vue')).default,
+    filter: (vDirs, vFiles) => {
+        if (vDirs.length !== 0) {
+            return false
+        }
+        if (vFiles.length === 0) {
+            return false
+        }
+        for (let i of vFiles) {
+            for (let s of ['mp4']) {
+                if (i.name.endsWith(s)) {
+                    return true
+                }
+            }
+        }
+        return false
+    }
+}
+
+export default pluginConfig

src/plugins/miaoVideoPlayer/miaoVideoPlayer.vue

@@ -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.id,
+                            url,
+                            // 这个language会覆盖id的设置，导致无法切换字幕
+                            // language: 'zh-cn',
+                            text: i.name
+                        })
+                    } else if (i.name.endsWith('ass')) {
+                        const response = await axios.get(i.url)
+                        // console.log(assToVtt(response.data))
+                        const url = setUrl(new Blob([assToVtt(response.data)]))
+                        _list.push({
+                            id: i.id,
+                            url,
+                            text: i.name
+                        })
+                    } else if (i.name.endsWith('ssa')) {
+                        const response = await axios.get(i.url)
+                        // console.log(ssaToVtt(response.data))
+                        const url = setUrl(new Blob([ssaToVtt(response.data)]))
+                        _list.push({
+                            id: i.id,
+                            url,
+                            text: i.name
+                        })
+                    } else {
+                        _list.push({
+                            id: i.id,
+                            url: i.url,
+                            text: i.name
+                        })
+                    }
+                }
+            }
+            const texttrack = {
+                list: _list
+            }
+            _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>