feat: 配置交叉编译。

.gitignore

@@ -23,4 +23,7 @@ dist-ssr
 *.sln
 *.sw?
 .vscode
-serve
+serve
+miao-directory.exe
+miao-directory-amd64-linux
+miao-directory-amd64-win.exe

README.md

@@ -1,8 +1,11 @@
 todo: 标签页，miaoDirectory切换动画                      [finish]
 todo: 重构virtualPage，所有page以插件形式使用             [finish]
-todo: miaoDirectory插件化，为后续插件功能开发做准备       [finish]
+todo: miaoDirectory插件化，为后续插件功能开发做准备        [finish]
-todo: miaoPopupInput, 弹出一个输入框
+todo: miaoPopupInput, 弹出一个输入框                     [finish]
-todo: miaoDirectory的新建文件/文件夹功能
+todo: miaoDirectory的重命名功能                          [finish]
-todo: miaoDirectory的重命名功能
+todo: miaoDirectory的剪切功能                            [finish]
-todo: miaoDirectory的多选功能
+todo: miaoDirectory的上传按钮                            [finish]
-todo: VirtualDirectory更新时更新文件信息
+todo: miaoDirectory的新建文件/文件夹功能                  [finish]
+todo: miaoDirectory的多选功能                            [finish]
+todo: VirtualDirectory更新时更新文件信息
+todo: miaoDirectory的复制文件/文件夹功能

index.html

@@ -2,9 +2,9 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<link rel="icon" type="image/svg+xml" href="./public/favicon.ico" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>MDW</title>
+		<title>MiaoDirectory</title>
 	</head>
 	<body>
 		<div id="app"></div>

package.json

@@ -1,28 +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": {
-    "naive-ui": "^2.39.0",
+        "@codemirror/lang-go": "^6.0.1",
-    "sass": "^1.77.8",
+        "@codemirror/lang-html": "^6.4.9",
-    "vue": "^3.4.35"
+        "@codemirror/lang-javascript": "^6.2.2",
-  },
+        "@codemirror/lang-json": "^6.0.1",
-  "devDependencies": {
+        "@codemirror/lang-markdown": "^6.2.5",
-    "@types/lodash": "^4.17.7",
+        "@codemirror/lang-python": "^6.1.6",
-    "@types/node": "^22.1.0",
+        "@codemirror/lang-sass": "^6.0.2",
-    "@vitejs/plugin-vue": "^5.1.2",
+        "@codemirror/lang-sql": "^6.7.1",
-    "typescript": "^5.5.3",
+        "@codemirror/lang-vue": "^0.1.3",
-    "vite": "^5.4.0",
+        "@codemirror/lang-xml": "^6.1.0",
-    "vite-plugin-singlefile": "^2.0.2",
+        "@codemirror/lang-yaml": "^6.1.1",
-    "vue-tsc": "^2.0.29"
+        "@vicons/ionicons5": "^0.12.0",
-  }
+        "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"
+    }
 }

src/App.vue

@@ -1,348 +1,413 @@
 <script setup lang="ts">
-
+import { h, onMounted, reactive, ref, shallowRef } from 'vue'
-import { h, onMounted, reactive, ref, shallowRef } from 'vue';
+import { NIcon, NScrollbar, NDropdown, NQrCode } from 'naive-ui'
-import { NIcon, NScrollbar, NDropdown, NQrCode } from 'naive-ui';
+import {
-import { EyeOffOutline, EyeOutline, CloseOutline, CopyOutline, EllipsisVertical, QrCodeOutline } from '@vicons/ionicons5'
+    EyeOffOutline,
-import miaoDirectory from './views/miaoDirectory.vue';
+    EyeOutline,
-import VirtualPage from './class/VirtualPage';
+    CloseOutline,
-import VirtualDirectory, { VirtualFile } from './class/VirtualDirectory';
+    CopyOutline,
-import MiaoMask from './components/miaoMask.vue';
+    EllipsisVertical,
-import config from './config';
+    QrCodeOutline
-import useViretualPages from './hooks/useVirtualPages';
+} from '@vicons/ionicons5'
+import miaoDirectory from '@/views/miaoDirectory.vue'
+import VirtualDirectory, { VirtualFile } from './class/VirtualDirectory'
+import MiaoMask from './components/miaoMask.vue'
+import config from './config'
+import useVirtualPages from './hooks/useVirtualPages'
+import init from './hooks/init'
 
 const { baseUrl } = config
 
 const showModal = ref<boolean>(false)
 
 const modalData = shallowRef<{
-  component: any
+    component: any
-  props: any
+    props: any
 }>()
 
-const views = useViretualPages()
+const views = useVirtualPages()
 
-const rootDirectory = reactive(new VirtualDirectory({
+const rootDirectory = reactive(
-  name: '根目录',
+    new VirtualDirectory({
-  stats: {
+        name: '根目录',
-    atimeMs: 0,
+        stats: {
-    birthtimeMs: 0,
+            atimeMs: 0,
-    ctimeMs: 0,
+            birthtimeMs: 0,
-    mtimeMs: 0,
+            ctimeMs: 0,
-  }
+            mtimeMs: 0
-}))
+        }
+    })
+)
 
 // component就是一个vue组件，类似于miaoDirectory
-const createView = (component: any, currentObjects: (VirtualDirectory | VirtualFile)[], index?: number) => {
+const createView = (
-  index ?? (index = views.length)
+    component: any,
-  views.splice(index, 0, reactive<VirtualPage>(new VirtualPage(component, [...currentObjects])))
+    currentDirectorys?: VirtualDirectory[],
+    currentFiles?: VirtualFile[],
+    index?: number
+) => {
+    views.push(component, currentDirectorys, currentFiles, index)
 }
 
 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])
-  }
+    }
 }
 
 // 点击标题是隐藏其他标签或显示其他标签，还挺好用的
 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
-  }
 }
 
-
 // 顶部菜单相关
 function renderIcon(icon: any) {
-  return () => {
+    return () => {
-    return h(NIcon, null, {
+        return h(NIcon, null, {
-      default: () => h(icon)
+            default: () => h(icon)
-    })
+        })
-  }
+    }
 }
 
 const openMenuOption = [
-  {
+    {
-    label: '分享',
+        label: '分享',
-    key: 'share',
+        key: 'share',
-    icon: renderIcon(QrCodeOutline)
+        icon: renderIcon(QrCodeOutline)
-  }
+    }
 ]
 
 const handleMenuSelect = (key: string) => {
-  if (key === 'share') {
+    if (key === 'share') {
-    showModal.value = true
+        showModal.value = true
-    modalData.value = {
+        modalData.value = {
-      component: NQrCode,
+            component: NQrCode,
-      props: {
+            props: {
-        value: baseUrl,
+                value: baseUrl,
-        size: 300,
+                size: 300,
-        errorCorrectionLevel: 'H'
+                errorCorrectionLevel: 'H'
-      }
+            }
+        }
     }
-  }
 }
 
 onMounted(() => {
-  createView(miaoDirectory, [rootDirectory])
+    init()
+    createView(miaoDirectory, [rootDirectory])
 })
 </script>
 
 <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 class="tab" v-for="(view, index) of views" :key="view.uid">
+                        <div
-              <div class="tab-title" @click="handleClickTitle(index)">{{ view.title }}</div>
+                            class="tab"
-              <div class="tab-point" :style="{ backgroundColor: view.color }"></div>
+                            v-for="(view, index) of views._views"
-              <div class="tab-control">
+                            :key="view.uid">
-                <n-icon class="tag-control-icon icon" @click="view.switchShow()">
+                            <span
-                  <EyeOutline v-show="view.visible" class="icon-inner" />
+                                class="tab-title"
-                  <EyeOffOutline v-show="!view.visible" class="icon-inner" />
+                                :title="view.title"
-                </n-icon>
+                                @click="handleClickTitle(index)">
-                <n-icon class="tag-control-icon icon"
+                                {{
-                  @click="createView(view.component, view.currentObjects, index + 1)">
+                                    view.title.length > 5 && 0
-                  <CopyOutline />
+                                        ? `${view.title.substring(0, 5)}...`
-                </n-icon>
+                                        : view.title
-                <n-icon class="tag-control-icon icon" @click="deleteView(index)">
+                                }}
-                  <CloseOutline class="icon-inner" />
+                            </span>
-                </n-icon>
+                            <div
-              </div>
+                                class="tab-point"
+                                :style="{ backgroundColor: view.color }"></div>
+                            <div class="tab-control">
+                                <n-icon
+                                    class="tag-control-icon icon"
+                                    @click="view.switchShow()">
+                                    <EyeOutline
+                                        v-show="view.visible"
+                                        class="icon-inner" />
+                                    <EyeOffOutline
+                                        v-show="!view.visible"
+                                        class="icon-inner" />
+                                </n-icon>
+                                <n-icon
+                                    class="tag-control-icon icon"
+                                    @click="
+                                        createView(
+                                            view.component,
+                                            view.currentDirectorys,
+                                            view.currentFiles,
+                                            index + 1
+                                        )
+                                    ">
+                                    <CopyOutline />
+                                </n-icon>
+                                <n-icon
+                                    class="tag-control-icon icon"
+                                    @click="deleteView(index)">
+                                    <CloseOutline class="icon-inner" />
+                                </n-icon>
+                            </div>
+                        </div>
+                    </transition-group>
+                </div>
+            </n-scrollbar>
+            <div class="view-controller-menu">
+                <div class="view-controller-menu-item">
+                    <n-dropdown
+                        trigger="click"
+                        :options="openMenuOption"
+                        @select="handleMenuSelect">
+                        <n-icon class="icon">
+                            <EllipsisVertical class="icon-inner" />
+                        </n-icon>
+                    </n-dropdown>
+                </div>
             </div>
-          </transition-group>
         </div>
-      </n-scrollbar>
+        <div class="view-container">
-      <div class="view-controler-menu">
+            <transition-group name="page">
-        <div class="view-controler-menu-item">
+                <div
-          <n-dropdown trigger="click" :options="openMenuOption" @select="handleMenuSelect">
+                    class="view-container-item"
-            <n-icon class="icon">
+                    v-for="(view, index) of views._views"
-              <EllipsisVertical class="icon-inner" />
+                    v-show="view.visible"
-            </n-icon>
+                    :key="view.uid">
-          </n-dropdown>
+                    <component
+                        :is="view.component"
+                        v-model:current-directorys="view.currentDirectorys"
+                        v-model:current-files="view.currentFiles"
+                        :id="view.uid"
+                        :color="view.color"
+                        @exit="deleteView(index)"></component>
+                </div>
+            </transition-group>
         </div>
-      </div>
     </div>
-    <div class="view-container">
+    <!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
-      <transition-group name="page">
+    <MiaoMask v-model:show="showModal" @click="showModal = false">
-        <div class="view-container-item" v-for="(view, index) of views" v-show="view.visible" :key="view.uid">
+        <component
-          <component :is="view.component" v-model:current-objects="view.currentObjects" :id="view.uid"
+            @click="(e:any) => e.stopPropagation()"
-            :color="view.color" @exit="deleteView(index)"></component>
+            :is="modalData?.component"
-        </div>
+            v-bind="modalData?.props"></component>
-      </transition-group>
+    </MiaoMask>
-    </div>
-  </div>
-  <!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
-  <MiaoMask v-model:show="showModal" @click="showModal = false">
-    <component :is="modalData?.component" v-bind="modalData?.props"></component>
-  </MiaoMask>
 </template>
 
 <style lang="scss" scoped>
-$controler-height: 25px;
+$controller-height: 25px;
 $tag-width: 170px;
 
 .view {
-  position: relative;
-  height: 100%;
-  width: 100%;
-
-  .view-controler {
-    display: flex;
-    height: $controler-height;
-    width: 100%;
-    background-color: #dadada;
-    // overflow: hidden;
-
-    .tags-container {
-      display: flex;
-      margin-left: 5px;
-      flex: 1;
-
-      // overflow-x: scroll;
-      .tab {
-        position: relative;
-        width: $tag-width;
-        margin: 0 5px;
-        // flex: 1;
-        display: flex;
-        border-radius: 5px 5px 0 0;
-        align-items: center;
-
-        .tab-title {
-          margin-left: 4px;
-          // width: 70%;
-          user-select: none;
-          cursor: pointer;
-        }
-
-        .tab-point {
-          height: 5px;
-          aspect-ratio: 1;
-          border-radius: 66px;
-          margin-left: 5px;
-        }
-
-        .tab-control {
-          position: absolute;
-          right: 10px;
-          display: flex;
-          align-items: center;
-
-          .tab-control-icon:not(:last-child) {
-            margin-right: 5px;
-          }
-        }
-
-        &:not(:last-child)::after {
-          content: '';
-          height: calc($controler-height*0.6);
-          width: 1px;
-          border-right: 1px solid black;
-          position: absolute;
-          right: 0px;
-        }
-      }
-    }
-
-    .view-controler-menu {
-      position: relative;
-      display: flex;
-      align-items: center;
-      padding: 0 5px;
-
-      .view-controler-menu-item {
-        height: 100%;
-        aspect-ratio: 1;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      &::before {
-        content: '';
-        height: calc($controler-height*0.6);
-        width: 1px;
-        border-right: 1px solid black;
-        position: absolute;
-        left: 2px;
-      }
-    }
-
-    .icon {
-      height: calc($controler-height * 0.7);
-      width: calc($controler-height * 0.7);
-      border-radius: 5px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-      background-color: rgba(128, 128, 128, 0);
-      transition: background-color 0.3s;
-
-      &:hover {
-        background-color: rgba(128, 128, 128, 0.4);
-      }
-    }
-  }
-
-  .view-container {
     position: relative;
-    display: flex;
+    height: 100%;
-    // flex-direction: column;
+    width: 100%;
-    height: calc(100% - $controler-height);
-    overflow-y: overlay;
-    overflow-x: overlay;
 
-    .view-container-item {
+    .view-controller {
-      flex: 1;
+        display: flex;
-      height: 100%;
+        height: $controller-height;
+        width: 100%;
+        background-color: #dadada;
+        // overflow: hidden;
+
+        .tabs-container {
+            display: flex;
+            margin-left: 5px;
+            flex: 1;
+
+            // overflow-x: scroll;
+            .tab {
+                position: relative;
+                width: $tag-width;
+                height: $controller-height;
+                margin: 0 5px;
+                // flex: 1;
+                display: flex;
+                border-radius: 5px 5px 0 0;
+                align-items: center;
+
+                .tab-title {
+                    // font-family: monospace;
+                    // font-weight: bolder;
+                    margin-left: 4px;
+                    width: 90px;
+                    user-select: none;
+                    cursor: pointer;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    span {
+                        user-select: none;
+                        cursor: pointer;
+                    }
+                }
+
+                .tab-point {
+                    height: 5px;
+                    aspect-ratio: 1;
+                    border-radius: 66px;
+                    margin-left: 5px;
+                }
+
+                .tab-control {
+                    position: absolute;
+                    right: 10px;
+                    display: flex;
+                    align-items: center;
+
+                    .tab-control-icon:not(:last-child) {
+                        margin-right: 5px;
+                    }
+                }
+
+                &:not(:last-child)::after {
+                    content: '';
+                    height: calc($controller-height * 0.6);
+                    width: 1px;
+                    border-right: 1px solid black;
+                    position: absolute;
+                    right: 0px;
+                }
+            }
+        }
+
+        .view-controller-menu {
+            position: relative;
+            display: flex;
+            align-items: center;
+            padding: 0 5px;
+
+            .view-controller-menu-item {
+                height: 100%;
+                aspect-ratio: 1;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+
+            &::before {
+                content: '';
+                height: calc($controller-height * 0.6);
+                width: 1px;
+                border-right: 1px solid black;
+                position: absolute;
+                left: 2px;
+            }
+        }
+
+        .icon {
+            height: calc($controller-height * 0.7);
+            width: calc($controller-height * 0.7);
+            border-radius: 5px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            background-color: rgba(128, 128, 128, 0);
+            transition: background-color 0.3s;
+
+            &:hover {
+                background-color: rgba(128, 128, 128, 0.4);
+            }
+        }
     }
 
-    &::-webkit-scrollbar {
+    .view-container {
-      position: absolute;
+        position: relative;
-      width: 4px;
+        display: flex;
-    }
+        // flex-direction: column;
+        height: calc(100% - $controller-height);
+        overflow-y: hidden;
+        overflow-x: overlay;
 
-    // 滚动条轨道
+        .view-container-item {
-    &::-webkit-scrollbar-track {
+            flex: 1;
-      // background: rgb(239, 239, 239);
+            height: 100%;
-      border-radius: 2px;
+            min-width: 200px;
-    }
+        }
 
-    // 小滑块
+        &::-webkit-scrollbar {
-    &::-webkit-scrollbar-thumb {
+            position: absolute;
-      background: #e0e0e0;
+            width: 4px;
-      // border-radius: 5px;
+        }
-    }
 
-    &::-webkit-scrollbar-thumb:hover {
+        // 滚动条轨道
-      background: #999999;
+        &::-webkit-scrollbar-track {
+            // background: rgb(239, 239, 239);
+            border-radius: 2px;
+        }
+
+        // 小滑块
+        &::-webkit-scrollbar-thumb {
+            background: #e0e0e0;
+            // border-radius: 5px;
+        }
+
+        &::-webkit-scrollbar-thumb:hover {
+            background: #999999;
+        }
     }
-  }
 }
 
 // transition动画相关
 .view {
-  .view-controler {
+    .view-controller {
-    .tags-container {
+        .tabs-container {
+            .tab-move,
+            .tab-enter-active {
+                transition: all 0.2s ease;
+            }
 
-      .tab-move,
+            .tab-leave-active {
-      .tab-enter-active {
+                transition: none;
-        transition: all 0.2s ease;
+            }
-      }
 
-      .tab-leave-active {
+            .tab-enter-from {
-        transition: none;
+                opacity: 0;
-      }
+                transform: translateY(-30px);
+            }
 
-      .tab-enter-from {
+            // .tab-leave-to {
-        opacity: 0;
+            //   opacity: 0;
-        transform: translateY(-30px);
+            //   transform: translateY(-80px) translateX(calc($tag-width + 10px));
-      }
+            // }
 
-      // .tab-leave-to {
+            .tab-leave-active {
-      //   opacity: 0;
+                position: absolute;
-      //   transform: translateY(-80px) translateX(calc($tag-width + 10px));
+            }
-      // }
+        }
-
-      .tab-leave-active {
-        position: absolute;
-      }
     }
-  }
 
-  .view-container {
+    // .view-container {
+    //     .page-move {
+    //       transition: all 0.2s ease;
+    //     }
 
-    // .page-move {
+    //     .page-enter-active {
-    //   transition: all 0.2s ease;
+
+    //     }
+
+    //     .page-leave-active {
+    //       transition: none;
+    //     }
+
+    //     .page-enter-from {
+    //       opacity: 0;
+    //     }
+
+    //     .page-leave-active {
+    //       position: absolute;
+    //     }
     // }
-
-
-    // .page-enter-active {
-
-    // }
-
-    // .page-leave-active {
-    //   transition: none;
-    // }
-
-    // .page-enter-from {
-    //   opacity: 0;
-    // }
-
-    // .page-leave-active {
-    //   position: absolute;
-    // }
-  }
 }
 </style>

src/class/PluginCenter.ts

@@ -0,0 +1,75 @@
+import useVirtualPages from '@/hooks/useVirtualPages'
+import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
+
+type plugin = {
+    // 用于显示的名字
+    name: string
+    // 判断是否可以使用这个组件
+    // 使用组件即调用下面的func
+    filter: (VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
+    func: (VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) => void
+}
+
+export default class PluginCenter {
+    constructor() {
+        this.pluginsMap = {}
+    }
+    pluginsMap: {
+        [key: string]: plugin
+    }
+
+    register(key: string, plugin: plugin) {
+        this.pluginsMap[key] = plugin
+    }
+
+    /**
+     * 便捷地注册一个组件为插件，触发时直接用新页面打开
+     */
+    registerComponent(
+        key: string,
+        name: string,
+        getComponent: () => Promise<any>,
+        filter: (
+            VDirectorys: VirtualDirectory[],
+            VFiles: VirtualFile[]
+        ) => boolean
+    ): void {
+        let _component: any
+        const views = useVirtualPages()
+        this.register(key, {
+            name,
+            filter,
+            func: async (
+                VDirectorys: VirtualDirectory[],
+                VFiles: VirtualFile[]
+            ) => {
+                if (filter(VDirectorys, VFiles) === false) {
+                    return
+                }
+                if (_component === undefined) _component = await getComponent()
+                views.push(_component, VDirectorys, VFiles)
+            }
+        })
+    }
+
+    getUsablePlugin(VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) {
+        const usableList = []
+        for (let key of Object.keys(this.pluginsMap)) {
+            if (this.pluginsMap[key].filter(VDirectorys, VFiles)) {
+                usableList.push(key)
+            }
+        }
+        return usableList.map((key) => ({
+            key,
+            ...this.pluginsMap[key]
+        }))
+    }
+
+    usePlugin(
+        key: string,
+        VDirectorys: VirtualDirectory[],
+        VFiles: VirtualFile[]
+    ) {
+        this.pluginsMap[key].func(VDirectorys, VFiles)
+    }
+}

src/class/VirtualDirectory.ts

@@ -1,6 +1,11 @@
+import config from "@/config";
 import generateId from "@/hooks/generateId";
+import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
+// import { debounce } from "lodash";
 import type { stats, file, directory } from "@/types/type.ts";
 
+const miaoFetchApi = useMiaoFetchApi();
+
 export class VirtualFile {
 	constructor(info: file, parent: VirtualDirectory) {
 		this.name = info.name;
@@ -19,6 +24,10 @@ export class VirtualFile {
 	get path() {
 		return `${this.parent.path}${this.name}`;
 	}
+
+	get url() {
+		return `${config.api.get}${this.parent.path}${this.name}`
+	}
 }
 
 class VirtualDirectory {
@@ -68,11 +77,11 @@ class VirtualDirectory {
 	 * 获取从根目录开始的按顺序的文件夹
 	 * @returns {VirtualDirectory[]}
 	 */
-	get directoryArray(): VirtualDirectory[] {
+	get getParents(): VirtualDirectory[] {
 		if (!this.parent) {
 			return [this];
 		}
-		return [...this.parent.directoryArray, this];
+		return [...this.parent.getParents, this];
 	}
 
 	/**
@@ -127,5 +136,14 @@ class VirtualDirectory {
 			return this.files?.includes(item) ?? false;
 		}
 	}
+
+	/**
+	 * 调用后重新向远端拉取文件夹信息并进行更新
+	 * @returns {void}
+	 */
+	async update(): Promise<void> {
+		const data: (file | directory)[] = await miaoFetchApi.get(this);
+		this.updateContent(data);
+	}
 }
 export default VirtualDirectory;

src/class/VirtualPage.ts

@@ -0,0 +1,123 @@
+import { reactive, shallowRef } from "vue";
+import VirtualDirectory, { VirtualFile } from "./VirtualDirectory";
+import generateId from "@/hooks/generateId";
+
+const getRandomWebSafeColor = (() => {
+	const webSafeColors = ["#009900", "#999900", "#009999", "#990099", "#0000ee"];
+	let counter = 0;
+	return () => {
+		const color = webSafeColors[counter % webSafeColors.length];
+		counter += 1;
+		return color;
+	};
+})();
+
+export default class VirtualPage {
+	constructor(component: any, initObjects?: { directorys?: VirtualDirectory[]; files?: VirtualFile[] }) {
+		this.component = shallowRef(component);
+		this.currentDirectorys = initObjects?.directorys ?? [];
+		this.currentFiles = initObjects?.files ?? [];
+		this.visible = true;
+		this.uid = generateId();
+		this.refreshKey = Math.random();
+		this.color = getRandomWebSafeColor();
+	}
+	// 页面使用的组件
+	component: any;
+	// 是否可见
+	visible: boolean;
+	// 当前正在使用的文件夹
+	currentDirectorys: VirtualDirectory[];
+	// 当前正在使用的文件
+	currentFiles: VirtualFile[];
+	// 区分每一个页面的唯一id
+	uid: number;
+	// 当refreshKey改变时需要刷新页面，目前还没接入刷新
+	refreshKey: number;
+	// 为了区分，每个虚拟页面都会分配一个color，这个color会体现在tab上
+	color: string;
+	// 用于展示的title
+	_title?: string;
+
+	get title() {
+		if (this._title) {
+			return this._title;
+		}
+		return this?.currentDirectorys[0]?.name ?? this?.currentFiles[0]?.name ?? "未命名标签";
+	}
+
+	setTitle(title: string) {
+		this._title = title;
+	}
+
+	// 切换显示状态
+	switchShow() {
+		this.visible = !this.visible;
+	}
+
+	// 刷新，不过好像没有用得到的时候吧
+	// 事实上也不应该用得到，因为更新应该是响应式的
+	refresh() {
+		this.refreshKey = Math.random();
+	}
+}
+
+export class VirtualPages {
+	constructor() {
+		this._views = reactive<VirtualPage[]>([]);
+	}
+	_views: VirtualPage[];
+
+	get length() {
+		return this._views.length;
+	}
+
+	/**
+	 * 查询一个页面位于_views中的次序
+	 * @param {any} id 要查询的页面的id
+	 * @returns {any}
+	 */
+	getIndex(id: number) {
+		for (let i in this._views) {
+			if (this._views[i].uid === id) {
+				return parseInt(i);
+			}
+		}
+		return -1;
+	}
+	/**
+	 * 根据id得到view
+	 * @param {any} id 要查询的页面的id
+	 */
+	getView(id: number) {
+		for (let v of this._views) {
+			if (v.uid === id) {
+				return v;
+			}
+		}
+		return undefined;
+	}
+
+	/**
+	 * 推入一个新的页面
+	 */
+	push(component: any, currentDirectorys?: VirtualDirectory[], currentFiles?: VirtualFile[], index?: number) {
+		index ?? (index = this.length);
+		this._views.splice(
+			index,
+			0,
+			reactive<VirtualPage>(
+				new VirtualPage(component, {
+					directorys: [...(currentDirectorys ?? [])],
+					files: [...(currentFiles ?? [])]
+				})
+			)
+		);
+	}
+	/**
+	 * 根据次序删除一个页面
+	 */
+	deleteView(index: number) {
+		this._views.splice(index, 1);
+	}
+}

src/class/virtualPage.ts

@@ -1,60 +0,0 @@
-import { shallowRef } from "vue";
-import VirtualDirectory, { VirtualFile } from "./VirtualDirectory";
-import generateId from "@/hooks/generateId";
-
-const getRandomWebSafeColor = (() => {
-	const webSafeColors = ["#009900", "#999900", "#009999", "#990099", "#0000ee"];
-	let counter = 0;
-	return () => {
-		const color = webSafeColors[counter % webSafeColors.length];
-		counter += 1;
-		return color;
-	};
-})();
-
-export default class VirtualPage {
-	constructor(component: any, initObjects: (VirtualDirectory | VirtualFile)[]) {
-		this.component = shallowRef(component);
-		this.currentObjects = initObjects;
-
-		this.visible = true;
-		this.uid = generateId();
-		this.refreshKey = Math.random();
-		this.color = getRandomWebSafeColor();
-	}
-	component: any;
-	// 是否可见
-	visible: boolean;
-	// 当前正在使用的文件或是文件夹
-	currentObjects: (VirtualDirectory | VirtualFile)[];
-	// 区分每一个页面的唯一id
-	uid: number;
-	// 当refreshKey改变时需要刷新页面，目前还没接入刷新
-	refreshKey: number;
-	// 为了区分，每个虚拟页面都会分配一个color，这个color会体现在tab上
-	color: string;
-	// 用于展示的title
-	_title?: string;
-
-	get title() {
-		if (this._title) {
-			return this._title;
-		}
-		return this.currentObjects[0].name;
-	}
-
-	setTitle(title: string) {
-		this._title = title;
-	}
-
-	// 切换显示状态
-	switchShow() {
-		this.visible = !this.visible;
-	}
-
-	// 刷新，不过好像没有用得到的时候吧
-	// 事实上也不应该用得到，因为更新应该是响应式的
-	refresh() {
-		this.refreshKey = Math.random();
-	}
-}

src/components/miaoContextMenu.vue

@@ -0,0 +1,88 @@
+<!-- 基于naiveui的下拉菜单实现的自定义下拉菜单 -->
+<!-- 支持长按和右键呼出下拉菜单 -->
+<template>
+    <div class="main" @contextmenu="handleContextMenu" @mouseleave="handleMainMouseLeave">
+        <slot></slot>
+    </div>
+    <n-dropdown placement="bottom-start" trigger="manual" :x="x" :y="y" :options="props.options"
+        :show="showContextMenu > 0" :on-clickoutside="onClickoutside" @select="handleSelect" @mouseleave="
+            showContextMenu -= 1" @mouseenter="showContextMenu += 1" />
+</template>
+
+<script setup lang="ts">
+import { NDropdown } from 'naive-ui/es/dropdown';
+import { DropdownOption } from 'naive-ui/es/dropdown';
+import { nextTick, ref } from 'vue';
+
+const props = defineProps<{
+    options: DropdownOption[]
+    // 长按呼出右键菜单的时延，undefined时不生效
+    touchTimeOut?: number
+}>()
+const emit = defineEmits<{
+    select: [key: string]
+}>()
+
+const x = ref(0)
+const y = ref(0)
+const showContextMenu = ref(0)
+// 长按计时器
+// let timer_touch: string | number | NodeJS.Timeout | undefined
+
+const onClickoutside = async () => {
+    showContextMenu.value = 0
+}
+
+const handleMainMouseLeave = async () => {
+    setTimeout(() => {
+        showContextMenu.value -= 1
+    }, 20)
+    // nextTick(()=>{
+    //     showContextMenu.value -= 1
+    // })
+}
+
+const handleSelect = async (key: string) => {
+    emit('select', key)
+    showContextMenu.value = 0
+}
+
+const handleContextMenu = (e: MouseEvent) => {
+    e.preventDefault()
+    showContextMenu.value = 0
+    nextTick().then(() => {
+        showContextMenu.value += 1
+        x.value = e.clientX
+        y.value = e.clientY
+    })
+}
+
+// const handleTouchStart = (e: TouchEvent) => {
+//     if(props.touchTimeOut === undefined) {
+//         return
+//     }
+//     timer_touch ?? clearTimeout(timer_touch)
+//     timer_touch = setTimeout(() => {
+//         showContextMenu.value = 1
+//         x.value = e.targetTouches[0].clientX
+//         y.value = e.targetTouches[0].clientY
+//     }, props.touchTimeOut)
+// }
+
+// const handleTouchEnd = () => {
+//     if(timer_touch) {
+//         clearTimeout(timer_touch)
+//         timer_touch = undefined
+//     }
+
+// }
+
+</script>
+
+<style>
+.main {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+</style>

src/components/miaoDirectory/miaoDirectoryItem.vue

@@ -1,124 +1,243 @@
 <template>
-	<div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
+    <div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
-		<div class="item-main">
+        <miaoContextMenu :options="dropDownOptions" :touch-time-out="500" @select="handleDropdownSelect">
-			<div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
+            <div class="item-main" :class="selected ? 'item-main-selected' : ''" ref="mainRef">
-			<Icon class="item-main-icon"></Icon>
+                <div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
-			<div class="item-main-info">
+                <Icon class="item-main-icon" v-show="clientWidth > 250"></Icon>
-				<div class="item-main-info-name">
+                <div class="item-main-info">
-					{{ name }}
+                    <div class="item-main-info-name">
-				</div>
+                        <Icon class="item-main-info-name-icon" v-if="clientWidth <= 250"></Icon>
-				<div class="item-main-info-date" v-if="time">
+                        <n-ellipsis style="max-width: 80%;">{{ name }}</n-ellipsis>
-					{{ time }}
+                    </div>
-				</div>
+                    <div class="item-main-info-date" v-if="time">
-			</div>
+                        {{ time }}
-			<n-dropdown trigger="click" :options="dropDownOptions" @select="handleDropdownSelect">
+                    </div>
-				<div class="item-main-option" @click="e=>e.stopPropagation()">
+                </div>
-					<EllipsisVertical class="item-main-option-icon" />
+                <!-- 菜单现在通过右键/长按呼出 -->
-				</div>
+                <!-- <n-dropdown trigger="click" :options="dropDownOptions" @select="handleDropdownSelect">
-			</n-dropdown>
+                    <div class="item-main-option" @click="(e) => e.stopPropagation()">
-		</div>
+                        <EllipsisVertical class="item-main-option-icon" />
-	</div>
+                    </div>
+                </n-dropdown> -->
+            </div>
+        </miaoContextMenu>
+    </div>
 </template>
 
 <script setup lang="ts">
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
+import miaoContextMenu from '../miaoContextMenu.vue'
+import {
+    DocumentText,
+    FileTray,
+    Help,
+    Image,
+    LogoChrome,
+    LogoCss3,
+    LogoJavascript,
+    LogoVue,
+    PlayCircle,
+    Disc
+} from '@vicons/ionicons5'
+import { computed, onMounted, ref } from 'vue'
+import dateFormatter from '@/hooks/dateFormatter'
+import { NEllipsis } from 'naive-ui'
+import usePluginCenter from '@/hooks/usePluginCenter'
+// import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
 
-import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory';
+// const miaoFetchApi = useMiaoFetchApi()
-import { DocumentText, FileTray, Help, Image, LogoChrome, LogoCss3, LogoJavascript, LogoVue, PlayCircle, EllipsisVertical, Disc } from '@vicons/ionicons5';
-import { computed, ref } from 'vue';
-import dateFormatter from '@/hooks/dateFormatter';
-import useDataBus from '@/hooks/useDataBus';
-import { NDropdown } from 'naive-ui';
 
-const dataBus = useDataBus()
+const props = defineProps<{
+    item: VirtualDirectory | VirtualFile
+    name?: string
+    color: string
+    selectedItem: (VirtualDirectory | VirtualFile)[]
+}>()
 
 const emit = defineEmits<{
     download: []
     delete: []
-    dragStart: []
+    rename: []
+    dragStart: [event: DragEvent, item: VirtualDirectory | VirtualFile]
+    onSelected: []
 }>()
 
-const props = defineProps<{
+const pluginCenter = usePluginCenter()
-  item: VirtualDirectory | VirtualFile
-  name?: string
-  color:string
-}>()
 
 const itemType = ref<'file' | 'directory'>(props.item.type)
 
+const mainRef = ref<HTMLDivElement>()
+
+// 使用ResizeObserver实现
+const clientWidth = ref<number>(666)
+
 const name = props.name ?? props.item.name
 
-const time = computed(()=>{
+const selected = computed(() => {
-    return dateFormatter(new Date(props.item.stats.mtimeMs), "yyyy-MM-dd hh:mm:ss");
+    return props.selectedItem.includes(props.item)
 })
 
-const dropDownOptions = computed(()=> {
+const time = computed(() => {
-    const options = [{
+    return dateFormatter(
-        label: '删除',
+        new Date(props.item.stats.mtimeMs),
-        key: 'delete'
+        'yyyy-MM-dd hh:mm:ss'
-    }]
+    )
-    if(itemType.value === 'file'){
+})
-        options.push(...[
+
-            {
+const dropDownOptions = computed(() => {
-                label: '下载',
+    const items = [...props.selectedItem]
-                key: 'download',
+    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 = [
+        {
+            label: '重命名',
+            key: 'rename'
+        },
+        {
+            label: '删除',
+            key: 'delete'
+        },
+    ]
+    if (itemType.value === 'file') {
+        options.push(
+            ...[
+                {
+                    label: '下载',
+                    key: 'download'
+                }
+            ]
+        )
+    }
+    if (selected.value === 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}`
+    })))
     return options
 })
 
-const handleDropdownSelect = (key: 'download' | 'delete') => {
+// 是不是可以直接在这里面实现？
-    if(key === 'download'){
+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 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)
     }
 }
 
-const Icon = computed(()=>{
+const Icon = computed(() => {
-    try{
+    try {
-        if(props.item.type === 'directory') {
+        if (props.item.type === 'directory') {
             return FileTray
-        } else if(props.item.type === 'file') {
+        } else if (props.item.type === 'file') {
             const aft = props.item.name.split('.').at(-1)?.toLowerCase()
-            if(!aft){
+            if (!aft) {
-                throw(1)
+                throw 1
-            }else if(['txt', 'doc', 'docs', 'docx', 'xls', 'xlsx'].includes(aft)){
+            } else if (
+                ['txt', 'doc', 'docs', 'docx', 'xls', 'xlsx'].includes(aft)
+            ) {
                 return DocumentText
-            }else if(['mp3', 'wav', 'ape', 'acc', 'ogg', 'flac'].includes(aft)){
+            } 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)){
+            } 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)){
+            } else if (['mp4', 'm2v', 'mkv'].includes(aft)) {
                 return PlayCircle
-            }else if(['js', 'jsx', 'ts', 'tsx'].includes(aft)){
+            } else if (['js', 'jsx', 'ts', 'tsx'].includes(aft)) {
                 return LogoJavascript
-            }else if(['html'].includes(aft)){
+            } else if (['html'].includes(aft)) {
                 return LogoChrome
-            }else if(['css', 'scss', 'less'].includes(aft)){
+            } else if (['css', 'scss', 'less'].includes(aft)) {
                 return LogoCss3
-            }else if(['vue'].includes(aft)){
+            } else if (['vue'].includes(aft)) {
                 return LogoVue
             }
             return DocumentText
         }
-    }catch{
+    } catch {
         return Help
     }
 })
 
 const itemRef = ref()
 
-const handleDragStart = () => {
+const handleDragStart = (event: DragEvent) => {
-    dataBus.set('dragData', [ props.item ])
+    emit('dragStart', event, props.item)
+    // dataBus.set('dragData', [props.item])
 }
+
+onMounted(() => {
+    const observer = new ResizeObserver(entries => {
+        for (let entry of entries) {
+            clientWidth.value = entry.contentRect.width;
+        }
+    });
+    if (mainRef.value) {
+        observer.observe(mainRef.value);
+    }
+})
 </script>
 
 <style lang="scss" scoped>
 .miao-item {
     cursor: pointer;
     width: calc(100% - 20px);
-    min-width: 250px;
+    min-width: 170px;
     // aspect-ratio: 66/9;
     height: 50px;
     position: relative;
@@ -126,39 +245,62 @@ const handleDragStart = () => {
     justify-content: center;
     align-items: center;
     margin: 10px 10px;
+
     .item-main {
         position: relative;
         width: 100%;
+        min-width: 200px;
         height: 95%;
         background-color: rgb(255, 255, 255);
         border-radius: 7px;
         display: flex;
         align-items: center;
-        transition: background-color 0.3s;
+        transition: background-color 0.3s ease;
+
         .item-main-front {
             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);
         }
+
         .item-main-icon {
+            min-width: 30px;
             margin-left: 10px;
-            height: 80%;
+            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;
@@ -172,21 +314,35 @@ const handleDragStart = () => {
             align-items: center;
 
             transition: background-color 0.3s;
+
             .item-main-option-icon {
                 color: #000;
                 transition: color 0.15s;
             }
-            &:hover, &:active {
+
+            &:hover,
+            &:active {
                 background-color: #8b8b8b;
+
                 .item-main-option-icon {
-                    color: #FFF;
+                    color: #fff;
                 }
             }
         }
-        &:hover, &:active {
+
+        &: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/components/miaoDropHandler.vue

@@ -0,0 +1,106 @@
+<template>
+    <div
+        class="container"
+        @dragover="handleDragOver"
+        @dragleave="handleDragLeave"
+        @drop="handleDrop">
+        <slot></slot>
+        <miao-mask v-model:show="showMask"></miao-mask>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import miaoMask from './miaoMask.vue'
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
+import config from '@/config'
+import useDataBus from '@/hooks/useDataBus'
+
+const dataBus = useDataBus()
+
+const { uploadSizeLimit } = config
+
+const emit = defineEmits<{
+    onFiles: [files: File[]]
+    onVirtualFiles: [vFiles: VirtualFile[]]
+    onVirtualDirectory: [vDirectory: VirtualDirectory[]]
+}>()
+
+const showMask = ref<number>(0)
+
+// File類型的數據可能爲文件夾，通過FileReader進行判斷
+const isFile = (file: File) =>
+    new Promise((resolve) => {
+        const reader = new FileReader()
+        reader.onload = () => {
+            resolve(true)
+            reader.abort()
+        }
+        reader.onerror = () => {
+            resolve(false)
+            reader.abort()
+        }
+        reader.readAsText(file)
+    })
+
+/**
+ * 只保留文件，移去文件夹
+ * @param {File[]} files
+ */
+const removeDirectory = async (files: File[]) => {
+    let index = 0
+    while (index < files.length) {
+        const currentFile = files[index]
+        const _isFile = await isFile(currentFile)
+        if (_isFile) {
+            index += 1
+            continue
+        } else {
+            files.splice(index, 1)
+            continue
+        }
+    }
+}
+
+const handleDragOver = async (event: DragEvent) => {
+    showMask.value += 1
+    event.preventDefault()
+}
+
+const handleDragLeave = async () => {
+    showMask.value = 0
+}
+
+const handleDrop = async (event: DragEvent) => {
+    showMask.value = 0
+    event.preventDefault()
+    event.stopPropagation()
+    // todo: uploadSize的限制不應該在這裏
+    const files = [...(event.dataTransfer?.files ?? [])].filter(
+        (file) => file.size < uploadSizeLimit
+    )
+    await removeDirectory(files)
+    const virtualFiles: VirtualFile[] = dataBus.pop('dragData_vFiles')
+    const virtualDirectory: VirtualDirectory[] = dataBus.pop(
+        'dragData_vDirectory'
+    )
+    // console.log({ virtualDirectory, virtualFiles })
+    if (files && files.length) {
+        emit('onFiles', files)
+    }
+    if (virtualFiles && virtualFiles.length) {
+        emit('onVirtualFiles', virtualFiles)
+    }
+    if (virtualDirectory && virtualDirectory.length) {
+        emit('onVirtualDirectory', virtualDirectory)
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+</style>

src/components/miaoMask.vue

@@ -1,11 +1,9 @@
 <template>
-	<transition name="transition">
+  <transition name="transition">
-		<div class="mask-body" ref="maskBodyRef" v-show="showMask">
+    <div class="mask-body" ref="maskBodyRef" v-show="showMask">
-      <div @click="e=>e.stopPropagation()">
+        <slot></slot>
-        <slot> {{}} </slot>
+    </div>
-      </div>
+  </transition>
-		</div>
-	</transition>
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
@@ -17,27 +15,34 @@ const showMask = defineModel<boolean | number>('show', { default: false, require
 </script>
 <style lang="scss" scoped>
 .mask-body {
-    height: 100%;
+  height: 100%;
-    width: 100%;
+  width: 100%;
-    position: absolute;
+  position: absolute;
-    top:0;
+  top: 0;
-    left: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.3);
+  z-index: 7058214053994319;
+
+  // &-container {
+
+  // }
+
+  &-show {
     display: flex;
-    justify-content: center;
+    transition: opacity 0.3s 0.01s;
-    align-items: center;
+    opacity: 1;
-    background-color: rgba(0, 0, 0, 0.3);
+  }
-    z-index: 7058214053994319;
+
-    &-show {
+  &-hide {
-        display: flex;
+    opacity: 0;
-        transition: opacity 0.3s 0.01s;
+    transition: display 0.01s 0.3s;
-        opacity: 1;
+    display: none;
-    }
+  }
-    &-hide {
-        opacity: 0;
-        transition: display 0.01s 0.3s;
-        display: none;
-    }
 }
+
 .transition-enter-active,
 .transition-leave-active {
   transition: opacity 0.3s ease;

src/components/miaoPopupInput.vue

@@ -1,43 +1,83 @@
 <template>
   <miao-mask v-model:show="showMask">
-    <n-card title="">
+    <n-card class="popup-card" :title="popupConfig?.title" size="medium">
-      <n-input v-model:value="inputValue" type="text" placeholder="基本的 Input" />
+      {{ popupConfig?.content }}
-      <n-button @click="_resolve && _resolve(inputValue)">确认</n-button>
+      <n-input class="popup-input" v-model:value="inputValue" type="text" v-bind="popupConfig?.inputProps"
+        v-if="popupConfig?.inputProps" />
+      <div class="popup-button-container">
+        <n-button class="popup-button-container-button" v-for="option in popupConfig?.options" :key="option.label"
+          :type="option.type" @click="_resolve && _resolve(option.key)">{{ option.label }}</n-button>
+      </div>
     </n-card>
   </miao-mask>
 </template>
 <script lang="ts" setup>
-import { reactive, ref } from "vue";
+import { ref, nextTick } from "vue";
 import { NCard, NInput, NButton } from "naive-ui";
 import miaoMask from "./miaoMask.vue";
+import { InputProps } from "naive-ui";
 
-const showMask = ref(true);
+const showMask = ref(false);
 const inputValue = ref<string>("");
-const _resolve = ref<(text: string) => void>()
+const _resolve = ref()
 
-type popupConfig = {
+type popupConfigType = {
   title: string
-  placeholder: string
+  content?: string
+  inputValue?: string,
+  inputProps?: InputProps
   options: {
-    label
+    label: string
-  }
+    key: unknown
+    type: 'default' | 'tertiary' | 'primary' | 'success' | 'info' | 'warning' | 'error'
+  }[]
 }
 
-const _config = reactive<popupConfig>({
+const popupConfig = ref<popupConfigType>()
-  title: '',
-  placeholder: ''
-})
 
-
+const popup = async (config: popupConfigType) => {
-const popup = () => {
+  popupConfig.value = config
+  inputValue.value = config.inputValue ?? ''
   showMask.value = true
-  return new Promise((resolve: (text: string) => void) => { _resolve.value = resolve }).then((text: string) => {
+  const key = await new Promise((resolve: (key: unknown) => unknown) => {
-    showMask.value = false
+    _resolve.value = resolve
-    return text;
+  })
-  });
+  const text = inputValue.value
+  showMask.value = false;
+  nextTick(() => {
+    inputValue.value = ''
+    _resolve.value = undefined
+  })
+  return {
+    text,
+    key
+  };
 };
 
 defineExpose({ popup });
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.popup-card {
+  width: 80%;
+
+  .popup-input {
+    margin-bottom: 10px;
+  }
+
+  .popup-button-container {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+
+    .popup-button-container-button {
+      margin-top: 3px;
+      &:not(:last-child) {
+        margin-right: 5px;
+      }
+    }
+  }
+}
+</style>

src/config.ts

@@ -1,13 +1,16 @@
 const baseUrl = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
 
 export default {
-	baseUrl,
+    baseUrl,
-	uploadSizeLimit: 1024 * 1024 * 100,
+    uploadSizeLimit: 1024 * 1024 * 100,
-	api: {
+    api: {
-		get: '/get',
+        get: '/get',
-		upload: '/upload',
+        upload: '/upload',
-		delete: '/delete',
+        delete: '/delete',
-		query: '/query'
+        query: '/query',
-	},
+        rename: '/rename',
-	enableUpload: true,
+        mkdir: '/mkdir',
-};
+        cut: '/cut'
+    },
+    enableUpload: true
+}

src/hooks/init.ts

@@ -0,0 +1,101 @@
+import MiaoDirectory from '@/views/miaoDirectory.vue'
+import usePluginCenter from './usePluginCenter'
+
+export default function init() {
+    const pluginCenter = usePluginCenter()
+    pluginCenter.registerComponent(
+        'miaoDirectory',
+        '文件夹',
+        async () => MiaoDirectory,
+        (vDirs, vFiles) => {
+            if (vFiles.length) {
+                return false
+            }
+            return vDirs.length === 1
+        }
+    )
+    pluginCenter.registerComponent(
+        'miaoVideoPlayer',
+        '视频',
+        async () => (await import('@/views/miaoVideoPlayer.vue')).default,
+        (vDirs, vFiles) => {
+            if (vDirs.length !== 0) {
+                return false
+            }
+            if (vFiles.length === 0) {
+                return false
+            }
+            for (let i of vFiles) {
+                for (let s of ['mp4', 'm3u8', 'hls']) {
+                    if (i.name.endsWith(s)) {
+                        return true
+                    }
+                }
+            }
+            return false
+        }
+    )
+    pluginCenter.registerComponent(
+        'miaoIframe',
+        '框架',
+        async () => (await import('@/views/miaoIframe.vue')).default,
+        (vDirs, vFiles) => {
+            if (vDirs.length !== 0) {
+                return false
+            }
+            if (vFiles.length !== 1) {
+                return false
+            }
+            return vFiles[0].name.endsWith('html')
+        }
+    )
+    pluginCenter.registerComponent(
+        'miaoPDF',
+        'PDF浏览',
+        async () => (await import('@/views/miaoPDF.vue')).default,
+        (vDirs, vFiles) => {
+            if (vDirs.length !== 0) {
+                return false
+            }
+            if (vFiles.length !== 1) {
+                return false
+            }
+            return vFiles[0].name.endsWith('pdf')
+        }
+    )
+    pluginCenter.registerComponent(
+        'miaoCodeMirror',
+        '代码编辑',
+        async () => (await import('@/views/miaoCodeMirror.vue')).default,
+        (vDirs, vFiles) => {
+            if (vDirs.length !== 0) {
+                return false
+            }
+            if (vFiles.length !== 1) {
+                return false
+            }
+            for (let end of [
+                'js',
+                'ts',
+                'jsx',
+                'tsx',
+                'py',
+                'html',
+                'css',
+                'scss',
+                'go',
+                'json',
+                'md',
+                'yaml',
+                'txt',
+                'xml',
+                'vue',
+            ]) {
+                if (vFiles[0].name.endsWith(end)) {
+                    return true
+                }
+            }
+            return false
+        }
+    )
+}

src/hooks/miaoTools.ts

@@ -0,0 +1,47 @@
+export const filePicker = (() => {
+	let _resolve: ((files: File[]) => void) | undefined;
+	return (option?: { accept?: "string"; multiple: boolean }) => {
+		if (_resolve) {
+			_resolve([]);
+			_resolve = undefined;
+		}
+		return new Promise<File[]>(resolve => {
+			const inpEle = document.createElement("input");
+			inpEle.id = `__file_${Math.ceil(Math.random() * 100000000)}`;
+			inpEle.type = "file";
+			inpEle.style.display = "none";
+			_resolve = resolve;
+			// 文件类型限制
+			// inpEle.accept="image/*"
+			option?.accept && (inpEle.accept = option?.accept);
+			// 多选限制
+			option?.multiple && (inpEle.multiple = option?.multiple);
+			// inpEle.addEventListener("change", event => fn.call(inpEle, event, inpEle.files), { once: true });
+			inpEle.addEventListener(
+				"change",
+				() => {
+					if (!inpEle.files) {
+						return;
+					}
+					const files: File[] = [];
+					let i = 0;
+					while (i < inpEle.files?.length) {
+						const _file = inpEle?.files?.item(i);
+						if (_file !== null) {
+							files.push(_file);
+						}
+						i += 1;
+					}
+					resolve(files);
+                    _resolve = undefined
+				},
+				{ once: true }
+			);
+			inpEle.click();
+		});
+	};
+})();
+
+export default {
+	filePicker
+};

src/hooks/useMiaoFetchApi.ts

@@ -1,151 +1,287 @@
-import VirtualDirectory, { VirtualFile } from "@/class/VirtualDirectory";
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
-import { getOption, getResponse, miaoFetchConfig, deleteOption, uploadOption, queryOption } from "@/types/fetch";
+import {
-import Config from "@/config";
+    getOption,
-import axios, { AxiosRequestConfig } from "axios";
+    getResponse,
+    miaoFetchConfig,
+    deleteOption,
+    uploadOption,
+    queryOption,
+    renameOption,
+    cutOption,
+    mkdirOption
+} from '@/types/fetch'
+import Config from '@/config'
+import axios, { AxiosRequestConfig } from 'axios'
 
 export const useMiaoFetch = (option?: miaoFetchConfig) => {
-	const retry = option?.retry ?? 0;
+    const retry = option?.retry ?? 0
-	const controller = new AbortController();
+    const controller = new AbortController()
-	let flag = true;
+    let flag = true
-	return {
+    return {
-		miaoFetch: async (config: AxiosRequestConfig<any>) => {
+        miaoFetch: async (config: AxiosRequestConfig<any>) => {
-			let counter = 0;
+            let counter = 0
-			let response: any;
+            let response: any
-			let errList = [];
+            let errList = []
-			while (flag && counter <= retry) {
+            while (flag && counter <= retry) {
-				try {
+                try {
-					response = await axios({
+                    response = await axios({
-						...config,
+                        ...config,
-						signal: controller.signal
+                        signal: controller.signal
-					});
+                    })
-					return response;
+                    return response
-				} catch (_e) {
+                } catch (_e) {
-					errList.push(_e);
+                    errList.push(_e)
-					counter += 1;
+                    counter += 1
-				}
+                }
-			}
+            }
-			throw errList;
+            throw errList
-		},
+        },
-		/**
+        /**
-		 * 强制终止miaoFetch
+         * 强制终止miaoFetch
-		 */
+         */
-		abortMiaoFetch: () => {
+        abortMiaoFetch: () => {
-			flag = false;
+            flag = false
-			controller.abort();
+            controller.abort()
-		}
+        }
-	};
+    }
-};
+}
 
 const miaoFetchApi = {
-	/**
+    /**
-	 * 获取对应文件夹下的数据
+     * 获取对应文件夹下的数据
-	 */
+     */
-	async get(vDirectory: VirtualDirectory, option?: getOption): Promise<getResponse> {
+    async get(
-		const { baseUrl, api } = Config;
+        vDirectory: VirtualDirectory,
-		const url = `${baseUrl}${api.get}${vDirectory.path}`;
+        option?: getOption
-		const retry = option?.retry ?? 0;
+    ): Promise<getResponse> {
+        const { baseUrl, api } = Config
+        const url = `${baseUrl}${api.get}${vDirectory.path}`
+        const retry = option?.retry ?? 0
 
-		const { miaoFetch } = useMiaoFetch({
+        const { miaoFetch } = useMiaoFetch({
-			retry
+            retry
-		});
+        })
-		const response = await miaoFetch({
+        const response = await miaoFetch({
-			url
+            url
-		});
+        })
-		return response.data;
+        return response.data
-	},
+    },
 
-	/**
+    /**
-	 * 上传单个文件到对应文件夹, 后续要将data类型改成buffer以支持分片上传
+     * 获取对应文件夹下的数据
-	 */
+     */
-	upload(data: File, targetVDir: VirtualDirectory, option?: uploadOption) {
+    async getFile(
-		const { baseUrl, api } = Config;
+        vFile: VirtualFile,
-		const url = `${baseUrl}${api.upload}${targetVDir.path}`;
+        option?: getOption
-		const retry = option?.retry ?? 0;
+    ): Promise<getResponse> {
-		const { miaoFetch, abortMiaoFetch } = useMiaoFetch({
+        // const { baseUrl, api } = Config
-			retry
+        const url = vFile.url
-		});
+        const retry = option?.retry ?? 0
-		const sizeTotal = data.size;
+        const axiosOption = option?.axiosOption ?? {}
 
-		const opType = option?.type ?? "write";
+        const { miaoFetch } = useMiaoFetch({
+            retry
+        })
+        const response = await miaoFetch({
+            url, ...axiosOption
+        })
+        return response.data
+    },
 
-		const formData = new FormData();
+    /**
+     * 上传单个文件到对应文件夹, 后续要将data类型改成buffer以支持分片上传
+     * 正常上传文件请使用uploadQueue
+     */
+    upload(data: File, targetVDir: VirtualDirectory, option?: uploadOption) {
+        const { baseUrl, api } = Config
+        const url = `${baseUrl}${api.upload}${targetVDir.path}`
+        const retry = option?.retry ?? 0
+        const { miaoFetch, abortMiaoFetch } = useMiaoFetch({
+            retry
+        })
+        const sizeTotal = data.size
 
-		formData.append("file", data);
+        const opType = option?.type ?? 'write'
+
+        const formData = new FormData()
+
+        formData.append('file', data)
         // 必须这样传，不然中文乱码
-		formData.append("fileName", data.name)
+        formData.append('fileName', data.name)
-		formData.append("oprateType", opType);
+        formData.append('operateType', opType)
 
-		return {
+        return {
-			abort: () => abortMiaoFetch(),
+            abort: () => abortMiaoFetch(),
-			response: new Promise<{
+            response: new Promise<{
-				message: 'success' | 'failed'
+                message: 'success' | 'failed'
-				error?: string
+                error?: string
-			}>(async resolve => {
+            }>(async (resolve) => {
-				const response = await miaoFetch({
+                const response = await miaoFetch({
-					url,
+                    url,
-					method: "post",
+                    method: 'post',
-					data: formData,
+                    data: formData,
-					onUploadProgress(progressEvent) {
+                    onUploadProgress(progressEvent) {
-						option && option.onProcess && option.onProcess(progressEvent.loaded / sizeTotal);
+                        option &&
-					}
+                            option.onProcess &&
-				});
+                            option.onProcess(progressEvent.loaded / sizeTotal)
-				resolve(response.data);
+                    }
-			})
+                })
-		};
+                resolve(response.data)
-	},
+            })
+        }
+    },
 
-	/**
+    /**
-	 * 删除对应的文件或文件夹，若为文件夹会递归删除
+     * 在目标文件夹下创建新的文件夹
-	 */
+     */
-	delete(target: VirtualFile | VirtualDirectory, option?: deleteOption) {
+    mkdir(
-		const { baseUrl, api } = Config;
+        targetVDir: VirtualDirectory,
-		const url = `${baseUrl}${api.delete}${target.path}`;
+        newFolderName: string,
-		const retry = option?.retry ?? 0;
+        option?: mkdirOption
-		const { miaoFetch } = useMiaoFetch({
+    ) {
-			retry
+        const { baseUrl, api } = Config
-		});
+        const url = `${baseUrl}${api.mkdir}${targetVDir.path}`
+        const { miaoFetch } = useMiaoFetch({
+            retry: option?.retry ?? 0
+        })
 
-		return {
+        return new Promise<{
-			response: new Promise<{
+            message: 'success' | 'failed'
-				eventId: number
+            error?: string
-			}>(async resolve => {
+        }>(async (resolve) => {
-				const response = await miaoFetch({
+            const response = await miaoFetch({
-					url,
+                url,
-					method: "post"
+                method: 'post',
-				});
+                data: {
-				resolve(response.data);
+                    folderName: newFolderName
-			})
+                }
-		};
+            })
-	},
+            resolve(response.data)
+        })
+    },
+    /**
+     * 在目标文件夹下创建新的空文件，实际上是通过upload空文件实现
+     */
+    mkFile(
+        targetVDir: VirtualDirectory,
+        newFileName: string,
+        option?: uploadOption
+    ) {
+        const emptyBlob = new Blob([])
+        const emptyFile = new File([emptyBlob], newFileName, {
+            type: 'text/plain'
+        })
+        return this.upload(emptyFile, targetVDir, option)
+    },
 
-	/**
+    /**
-	 * 查询服务端操作事件的进展
+     * 删除对应的文件或文件夹，若为文件夹会递归删除
-	 */
+     */
-	query(eventId: number, option?: queryOption) {
+    delete(target: VirtualFile | VirtualDirectory, option?: deleteOption) {
-		const { baseUrl, api } = Config;
+        const { baseUrl, api } = Config
-		const url = `${baseUrl}${api.query}`;
+        const url = `${baseUrl}${api.delete}${target.path}`
-		const retry = option?.retry ?? 0;
+        const retry = option?.retry ?? 0
-		const { miaoFetch } = useMiaoFetch({
+        const { miaoFetch } = useMiaoFetch({
-			retry
+            retry
-		});
+        })
-		return {
+
-			response: new Promise<{
+        return {
-				status: 'process' | 'success' | 'failed',
+            response: new Promise<{
-				error?: unknown
+                eventId: number
-			}>(async resolve => {
+            }>(async (resolve) => {
-				const response = await miaoFetch({
+                const response = await miaoFetch({
-					url,
+                    url,
-					method: "get",
+                    method: 'post'
-					params: {
+                })
+                resolve(response.data)
+            })
+        }
+    },
+    /**
+     * 重命名对应的文件或文件夹
+     */
+    rename(
+        target: VirtualFile | VirtualDirectory,
+        newName: string,
+        option?: renameOption
+    ) {
+        const { baseUrl, api } = Config
+        const url = `${baseUrl}${api.rename}${target.path}`
+        const retry = option?.retry ?? 0
+        const { miaoFetch } = useMiaoFetch({
+            retry
+        })
+
+        return {
+            response: new Promise<{
+                eventId: number
+            }>(async (resolve) => {
+                const response = await miaoFetch({
+                    url,
+                    method: 'post',
+                    data: { newName }
+                })
+                resolve(response.data)
+            })
+        }
+    },
+    /**
+     * 剪切文件或文件夹
+     */
+    cut(
+        target: VirtualFile | VirtualDirectory,
+        to: VirtualDirectory,
+        option?: cutOption
+    ) {
+        const newPath = to.path
+        const { baseUrl, api } = Config
+        const url = `${baseUrl}${api.cut}${target.path}`
+        const retry = option?.retry ?? 0
+        const { miaoFetch } = useMiaoFetch({
+            retry
+        })
+        return {
+            response: new Promise<{
+                eventId: number
+            }>(async (resolve) => {
+                const response = await miaoFetch({
+                    url,
+                    method: 'post',
+                    data: { newPath }
+                })
+                resolve(response.data)
+            })
+        }
+    },
+
+    /**
+     * 查询服务端操作事件的进展
+     */
+    query(eventId: number, option?: queryOption) {
+        const { baseUrl, api } = Config
+        const url = `${baseUrl}${api.query}`
+        const retry = option?.retry ?? 0
+        const { miaoFetch } = useMiaoFetch({
+            retry
+        })
+        return {
+            response: new Promise<{
+                status: 'process' | 'success' | 'failed'
+                error?: unknown
+            }>(async (resolve) => {
+                const response = await miaoFetch({
+                    url,
+                    method: 'get',
+                    params: {
                         id: eventId
                     }
-				});
+                })
-				resolve(response.data);
+                resolve(response.data)
-			})
+            })
-		};
+        }
-	}
+    }
-};
+}
 
 export default function useMiaoFetchApi() {
-	return miaoFetchApi;
+    return miaoFetchApi
 }

src/hooks/usePluginCenter.ts

@@ -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
+}

src/hooks/useVirtualPages.ts

@@ -1,11 +1,12 @@
-import VirtualPage from "@/class/VirtualPage"
+import { VirtualPages } from "@/class/VirtualPage"
 import { Reactive, reactive } from "vue"
 
-let views: Reactive<VirtualPage[]>
+let views: Reactive<VirtualPages>
 
 export default function useViretualPages(){
     if(views === undefined) {
-        views = reactive<VirtualPage[]>([])
+        // views = reactive<VirtualPage[]>([])
+        views = reactive(new VirtualPages())
     }
     return views
 }

src/types/fetch.ts

@@ -1,29 +1,31 @@
+import { AxiosRequestConfig } from "axios";
 import { directory, file } from "./type";
 
 export type miaoFetchConfig = {
     retry?: number
+    axiosOption?: AxiosRequestConfig<any>
 }
 
-export type getOption = {
+export type getOption = {} & miaoFetchConfig;
-} & miaoFetchConfig
 
-export type getResponse = (file | directory)[]
+export type getResponse = (file | directory)[];
 
 export type uploadOption = {
-    /**
+	/**
-     * 上传进度回调函数
+	 * 上传进度回调函数
-     * @param {any} percent 进度百分比，float类型
+	 * @param {any} percent 进度百分比，float类型
-     */
+	 */
-    onProcess?: (percent: number) => void
+	onProcess?: (percent: number) => void;
-    /**
+	/**
-     * 上传文件执行的操作
+	 * 上传文件执行的操作
-     * write即为覆盖写
+	 * write即为覆盖写
-     * append即为增量写
+	 * append即为增量写
-     */
+	 */
-    type?: 'write' | 'append'
+	type?: "write" | "append";
-} & miaoFetchConfig
+} & miaoFetchConfig;
 
-export type deleteOption = {
+export type deleteOption = {} & miaoFetchConfig;
-} & miaoFetchConfig
+export type renameOption = {} & miaoFetchConfig;
-export type queryOption = {
+export type cutOption = {} & miaoFetchConfig
-} & miaoFetchConfig
+export type mkdirOption = {} & miaoFetchConfig
+export type queryOption = {} & miaoFetchConfig;

src/views/miaoCodeMirror.vue

@@ -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>

src/views/miaoDirectory.vue

@@ -1,240 +1,448 @@
 <template>
-  <div class="miao-directory-item-container" ref="rootDomRef">
+    <miao-drop-handler @on-virtual-directory="handleDropVDirectory" @on-files="handleDropFiles"
-    <div
+        @on-virtual-files="handleDropVirtualFiles">
-      class="container-top"
+        <div class="miao-directory-item-container" ref="rootDomRef">
-      :style="{ backgroundColor: index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)' }"
+            <div class="container-top" :style="{
-    >
+                backgroundColor:
-      <div class="container-top-colorbar" :style="{ backgroundColor: props.color }"></div>
+                    index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
-      <div class="container-top-breadcrumb">
+            }">
-        <!-- <n-scrollbar x-scrollable> -->
+                <div class="container-top-colorfulBar" :style="{ backgroundColor: props.color }"></div>
-        <div class="container-top-breadcrumb-container">
+                <div class="container-top-breadcrumb">
-          <n-breadcrumb separator=">" style="margin-left: 5px">
+                    <!-- <n-scrollbar x-scrollable> -->
-            <n-breadcrumb-item :clickable="false">
+                    <div class="container-top-breadcrumb-container">
-              <n-icon size="18">
+                        <n-breadcrumb separator=">" style="margin-left: 5px">
-                <CloudOutline />
+                            <n-breadcrumb-item :clickable="false">
-              </n-icon>
+                                <n-icon size="18">
-            </n-breadcrumb-item>
+                                    <CloudOutline />
-            <n-breadcrumb-item
+                                </n-icon>
-              v-for="dir in currentDirectory?.directoryArray"
+                            </n-breadcrumb-item>
-              @click="setCurrentDirectory(dir)"
+                            <n-breadcrumb-item v-for="dir in currentDirectory?.getParents"
-              :clickable="true"
+                                @click="setCurrentDirectory(dir)" :clickable="true">
-            >
+                                <div>{{ dir.name }}</div>
-              <div>{{ dir.name }}</div>
+                            </n-breadcrumb-item>
-            </n-breadcrumb-item>
+                        </n-breadcrumb>
-          </n-breadcrumb>
+                    </div>
+                    <!-- </n-scrollbar> -->
+                </div>
+                <div class="container-top-tools">
+                    <n-icon class="container-top-tools-item" size="15" @click="handleBack">
+                        <ChevronBackOutline />
+                    </n-icon>
+                    <n-icon class="container-top-tools-item" size="14" @click="handleReload">
+                        <ReloadOutline class="container-top-tools-item-reload" />
+                    </n-icon>
+                    <n-icon class="container-top-tools-item" size="20" @click="emit('exit')">
+                        <CloseOutline />
+                    </n-icon>
+                </div>
+            </div>
+            <div class="container-items" :style="{
+                backgroundColor:
+                    index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
+            }">
+                <n-scrollbar>
+                    <transition-group name="dirItem">
+                        <miaoDirectoryItem v-for="dir in showData_directory" :item="dir" :key="dir.uid"
+                            :color="props.color" :selectedItem="selectedItem.value" @delete="handleItemDelete(dir)"
+                            @click="handleItemClick(dir)" @drag-start="handleItemDragStart"
+                            @rename="handleItemRename(dir)" @on-selected="handleItemSelect(dir)" />
+                    </transition-group>
+                    <transition-group name="dirItem">
+                        <miaoDirectoryItem v-for="file in showData_files" :item="file" :key="file.uid"
+                            :color="props.color" :selectedItem="selectedItem.value" @click="handleItemClick(file)"
+                            @download="handleItemDownload(file)" @delete="handleItemDelete(file)"
+                            @drag-start="handleItemDragStart" @rename="handleItemRename(file)"
+                            @on-selected="handleItemSelect(file)" />
+                    </transition-group>
+                    <!-- <n-virtual-list :item="showData_all" :item-size="50">
+
+                    </n-virtual-list> -->
+                </n-scrollbar>
+            </div>
+            <div class="container-bottom" :style="{
+                backgroundColor:
+                    index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
+            }">
+                <div class="container-bottom-item">
+                    <div class="container-bottom-item-icon">
+                        <add-outline :style="{
+                            color:
+                                index % 2 === 0
+                                    ? 'rgb(0 0 0)'
+                                    : 'rgb(255 255 255)'
+                        }" @click="handleAddNewItem" />
+                    </div>
+                </div>
+                <div class="container-bottom-item">
+                    <div class="container-bottom-item-icon">
+                        <cloud-upload-outline :style="{
+                            color:
+                                index % 2 === 0
+                                    ? 'rgb(0 0 0)'
+                                    : 'rgb(255 255 255)'
+                        }" @click="handlePickFilesUpload" />
+                    </div>
+                </div>
+            </div>
+            <miao-mask v-model:show="showModel"></miao-mask>
+            <miao-popup-input ref="popupInput"></miao-popup-input>
         </div>
-        <!-- </n-scrollbar> -->
+    </miao-drop-handler>
-      </div>
-      <div class="container-top-tools">
-        <n-icon class="container-top-tools-item" size="15" @click="handleBack">
-          <ChevronBackOutline />
-        </n-icon>
-        <n-icon class="container-top-tools-item" size="14" @click="handleReload">
-          <ReloadOutline class="container-top-tools-item-reload" />
-        </n-icon>
-        <n-icon class="container-top-tools-item" size="20" @click="emit('exit')">
-          <CloseOutline />
-        </n-icon>
-      </div>
-    </div>
-    <div
-      class="container-items"
-      :style="{ backgroundColor: index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)' }"
-    >
-      <n-scrollbar>
-        <transition-group name="dirItem">
-          <miaoDirectoryItem
-            v-for="dir in showData_directory"
-            @click="setCurrentDirectory(dir)"
-            :item="dir"
-            :key="dir.uid"
-            :color="props.color"
-            @delete="handleItemDelete(dir)"
-          />
-        </transition-group>
-        <transition-group name="dirItem">
-          <miaoDirectoryItem
-            v-for="file in showData_files"
-            :item="file"
-            :key="file.uid"
-            @click="openUrl(`${baseUrl}${api.get}${file.path}`)"
-            @download="
-              openUrl(`${baseUrl}${api.get}${file.path}`, { download: file.name })
-            "
-            @delete="handleItemDelete(file)"
-            :color="props.color"
-          />
-        </transition-group>
-      </n-scrollbar>
-    </div>
-    <div
-      class="container-bottom"
-      :style="{ backgroundColor: index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)' }"
-    ></div>
-    <miao-mask v-model:show="showModel"></miao-mask>
-    <!-- <miao-popup-input ref="popupInput"></miao-popup-input> -->
-  </div>
 </template>
 
 <script setup lang="ts">
-import { NBreadcrumbItem, NBreadcrumb, NIcon, NScrollbar } from "naive-ui";
+import { NBreadcrumbItem, NBreadcrumb, NIcon, NScrollbar } from 'naive-ui'
-import type { file, directory } from "@/types/type.ts";
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
-import VirtualDirectory, { VirtualFile } from "@/class/VirtualDirectory";
+import { computed, onMounted, reactive, ref } from 'vue'
-import { computed, onMounted, ref } from "vue";
+import Config from '@/config'
-import Config from "@/config";
+import miaoMask from '@/components/miaoMask.vue'
-import dropHandler, { dropHandlerHooks } from "@/hooks/dropHandler";
+import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue'
-import miaoMask from "@/components/miaoMask.vue";
+import miaoPopupInput from '@/components/miaoPopupInput.vue'
-import miaoPopupInput from "@/components/miaoPopupInput.vue";
+import miaoDropHandler from '@/components/miaoDropHandler.vue'
-import miaoDirectoryItem from "@/components/miaoDirectory/miaoDirectoryItem.vue";
+import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
-import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
+import useDataBus from '@/hooks/useDataBus'
-import useDataBus from "@/hooks/useDataBus";
 import {
-  CloudOutline,
+    CloudOutline,
-  ChevronBackOutline,
+    ChevronBackOutline,
-  ReloadOutline,
+    ReloadOutline,
-  CloseOutline,
+    CloseOutline,
-} from "@vicons/ionicons5";
+    CloudUploadOutline,
-import useUploadQueue from "@/hooks/useUploadQueue";
+    AddOutline
-import useViretualPages from "@/hooks/useVirtualPages";
+} from '@vicons/ionicons5'
+import useUploadQueue from '@/hooks/useUploadQueue'
+import useVirtualPages from '@/hooks/useVirtualPages'
+import { filePicker } from '@/hooks/miaoTools'
+import { uniq } from 'lodash'
 
-const { baseUrl, api } = Config;
+const { baseUrl, api } = Config
-const dataBus = useDataBus();
+const dataBus = useDataBus()
-const views = useViretualPages();
+const views = useVirtualPages()
 
-const miaoFetchApi = useMiaoFetchApi();
+const miaoFetchApi = useMiaoFetchApi()
 
 const props = defineProps<{
-  color: string;
+    color: string
-  id: number;
+    id: number
-}>();
+}>()
 
 const emit = defineEmits<{
-  exit: [];
+    exit: []
-}>();
+}>()
 
 const popupInput = ref()
 // 是否显示模态框
-const showModel = ref(0);
+const showModel = ref(0)
 
-const currentObjects = defineModel<VirtualDirectory[]>("currentObjects", {
+class SelectedItem {
-  required: true,
+    constructor() {
-});
+        this._selectedItem = []
+    }
+    _selectedItem: (VirtualDirectory | VirtualFile)[]
+    push(item: VirtualDirectory | VirtualFile) {
+        this._selectedItem = [item, ...this._selectedItem]
+    }
+    remove(item: VirtualDirectory | VirtualFile) {
+        this._selectedItem = this._selectedItem.filter(v => v !== item)
+    }
+    clear() {
+        this._selectedItem = []
+    }
+    // 保证内容仍然存在于dir中且各个元素不重复
+    get value() {
+        return uniq(this._selectedItem).filter(v => {
+            if (currentDirectory.value === undefined) {
+                return false
+            }
+            // @ts-ignore
+            return [...currentDirectory.value?.directorys, ...currentDirectory.value?.files].includes(v)
+        })
+    }
+}
+// 已选择的item，用于多选功能
+const selectedItem = reactive(new SelectedItem())
+
+const currentDirectorys = defineModel<VirtualDirectory[]>('currentDirectorys', {
+    required: true
+})
 
 // 目前展示的Dir
 const currentDirectory = computed(() => {
-  return currentObjects.value[0];
+    return currentDirectorys.value[0]
-});
+})
 
+// 当前组件在views中的序号
 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 data = currentDirectory.value?.directorys
+    const data = currentDirectory.value?.directorys
-    ? [...currentDirectory.value?.directorys]
+        ? [...currentDirectory.value?.directorys]
-    : [];
+        : []
-  return data;
+    return data
-});
+})
 const showData_files = computed<VirtualFile[]>(() => {
-  const data = currentDirectory.value?.files ? [...currentDirectory.value?.files] : [];
+    const data = currentDirectory.value?.files
-  return data;
+        ? [...currentDirectory.value?.files]
-});
+        : []
+    return data
+})
+// const showData_all = computed<(VirtualDirectory | VirtualFile)[]>(() => {
+//     const data = currentDirectory.value?.directorys
+//         ? [...currentDirectory.value?.directorys]
+//         : []
+//     data.push(...currentDirectory.value?.files)
+//     return data
+// })
 
 // 用于监听拖拽文件事件
-const rootDomRef = ref<HTMLDivElement>();
+const rootDomRef = ref<HTMLDivElement>()
 
-const uploadQueue = useUploadQueue();
+const uploadQueue = useUploadQueue()
 
 // 设置显示的dir
 const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
-  // 若没有缓存数据则同步刷新，有缓存数据则异步刷新
+    // 若没有缓存数据则同步刷新，有缓存数据则异步刷新
-  if (virtualDirectory.files === undefined || virtualDirectory.directorys === undefined) {
+    if (
-    const data: (file | directory)[] = await miaoFetchApi.get(virtualDirectory);
+        virtualDirectory.files === undefined ||
-    virtualDirectory.updateContent(data);
+        virtualDirectory.directorys === undefined
-  } else {
+    ) {
-    (async () => {
+        await virtualDirectory.update()
-      const data: (file | directory)[] = await miaoFetchApi.get(virtualDirectory);
+    } else {
-      virtualDirectory.updateContent(data);
+        virtualDirectory.update()
-    })();
+    }
-  }
+    currentDirectorys.value[0] = virtualDirectory
-  currentObjects.value[0] = virtualDirectory;
+}
-};
 
 const reload = () => {
-  setCurrentDirectory(currentDirectory.value);
+    setCurrentDirectory(currentDirectory.value)
-};
+}
 
 const openUrl = (
-  href: string,
+    href: string,
-  config?: {
+    config?: {
-    download?: string;
+        download?: string
-    target?: string;
+        target?: string
-  }
+    }
 ) => {
-  let { target, download } = config ?? {};
+    let { target, download } = config ?? {}
-  const a = document.createElement("a");
+    const a = document.createElement('a')
-  a.setAttribute("href", href);
+    a.setAttribute('href', href)
-  a.setAttribute("target", target ?? "_blank");
+    a.setAttribute('target', target ?? '_blank')
-  download && a.setAttribute("download", download);
+    download && a.setAttribute('download', download)
-  a.click();
+    a.click()
-};
+}
 
 const handleBack = () => {
-  if (currentDirectory.value?.parent) {
+    if (currentDirectory.value?.parent) {
-    setCurrentDirectory(currentDirectory.value.parent);
+        setCurrentDirectory(currentDirectory.value.parent)
-  }
+    }
-};
+}
 
 const handleReload = () => {
-  reload();
+    reload()
-};
+}
 
-const handleItemDelete = async (item: VirtualDirectory | VirtualFile) => {
+const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
-  const { response } = miaoFetchApi.delete(item, {
+    if (selectedItem.value.length > 0) {
-    retry: 5,
+        handleItemSelect(item)
-  });
+    } else {
-  // todo: 将删除事件统一用一个事件管理中心管理
+        if (item.type === 'file') {
-  const id = (await response).eventId;
+            openUrl(`${baseUrl}${api.get}${item.path}`)
-  const { response: res } = miaoFetchApi.query(id);
+        } else if (item.type === 'directory') {
-  const eventResult = await res;
+            setCurrentDirectory(item)
-  if (eventResult.status === "success") {
+        }
-    reload();
+    }
-  }
+}
-};
 
-onMounted(async () => {
+const handleItemDownload = (item: VirtualFile) => {
-  await setCurrentDirectory(currentDirectory.value);
+    openUrl(`${baseUrl}${api.get}${item.path}`, {
-  // 拖动事件处理
+        download: item.name
-  const dropFileOption: dropHandlerHooks = {
+    })
-    onDropFiles(files: File[]) {
+}
-      const dragData = dataBus.pop("dragData");
+
-      console.log({ dragData, files });
+const handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
-      if (files && files.length > 0) {
+    for (let item of uniq([...selectedItem.value, _item])) {
-        currentDirectory.value &&
+        ; (async () => {
-          uploadQueue.push(files, currentDirectory.value, {
+            const { response } = miaoFetchApi.delete(item, {
-            onFinish() {
+                retry: 5
-              reload();
+            })
+            // todo: 将删除事件统一用一个事件管理中心管理
+            const id = (await response).eventId
+            const { response: res } = miaoFetchApi.query(id)
+            const eventResult = await res
+            if (eventResult.status === 'success') {
+                reload()
+            }
+        })()
+    }
+}
+
+const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
+    const popupRes = await popupInput.value.popup({
+        title: '重命名',
+        showInput: true,
+        inputValue: item.name,
+        inputProps: {
+            placeholder: item.name
+        },
+        options: [
+            {
+                label: '取消',
+                key: false,
+                type: 'error'
             },
-          });
+            {
-      }
+                label: '确认',
-    },
+                key: true,
-    onEnter() {
+                type: 'success'
-      showModel.value += 1;
+            }
-    },
+        ]
-    onEnd() {
+    })
-      showModel.value -= 1;
+    if (popupRes.key === false) {
-    },
+        return
-  };
+    }
-  rootDomRef.value && dropHandler(rootDomRef.value, dropFileOption);
+    const newName = popupRes.text
+    const { response } = miaoFetchApi.rename(item, newName, {
+        retry: 5
+    })
+    const id = (await response).eventId
+    const { response: res } = miaoFetchApi.query(id)
+    const eventResult = await res
+    if (eventResult.status === 'success') {
+        reload()
+    }
+}
 
-  console.log(await popupInput.value.popup())
+const handleItemDragStart = async (
-});
+    _event: DragEvent,
+    item: VirtualDirectory | VirtualFile
+) => {
+    const items = uniq([item, ...selectedItem.value])
+    dataBus.set('dragData_vFiles', items.filter(v => v.type === 'file'))
+    dataBus.set('dragData_vDirectory', items.filter(v => v.type === 'directory'))
+    // selectedItem.clear()
+}
+
+const handleDropFiles = async (files: File[]) => {
+    currentDirectory.value &&
+        uploadQueue.push(files, currentDirectory.value, {
+            onFinish() {
+                reload()
+            }
+        })
+}
+
+const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
+    // 不能移到自己或自己的子文件夹内
+    for (let vDir of vDirs) {
+        if (currentDirectory.value.getParents.includes(vDir)) {
+            return
+        }
+    }
+    for (let dir of vDirs) {
+        ; (async () => {
+            const _from = dir.parent
+            const { response } = miaoFetchApi.cut(dir, currentDirectory.value)
+            const id = (await response).eventId
+            const { response: res } = miaoFetchApi.query(id)
+            const eventResult = await res
+            if (eventResult.status === 'success') {
+                reload()
+                _from && _from.update()
+            }
+        })()
+    }
+}
+
+const handleDropVirtualFiles = (files: VirtualFile[]) => {
+    if (files[0].parent === currentDirectory.value) {
+        return
+    }
+    for (let file of files) {
+        ; (async () => {
+            const _from = file.parent
+            const { response } = miaoFetchApi.cut(file, currentDirectory.value)
+            const id = (await response).eventId
+            const { response: res } = miaoFetchApi.query(id)
+            const eventResult = await res
+            if (eventResult.status === 'success') {
+                reload()
+                _from.update()
+            }
+        })()
+    }
+}
+
+const handlePickFilesUpload = async () => {
+    const files = await filePicker({
+        multiple: true
+    })
+    const _currDir = currentDirectory.value
+    uploadQueue.push(files, _currDir, {
+        onFinish() {
+            _currDir.update()
+        }
+    })
+}
+
+const handleAddNewItem = async () => {
+    const popupRes = await popupInput.value.popup({
+        title: '新建文件/文件夹',
+        showInput: true,
+        inputProps: {
+            placeholder: ''
+        },
+        options: [
+            {
+                label: '取消',
+                key: 'cancel',
+                type: 'error'
+            },
+            {
+                label: '文件',
+                key: 'file',
+                type: 'success'
+            },
+            {
+                label: '文件夹',
+                key: 'dir',
+                type: 'success'
+            }
+        ]
+    })
+    // todo: 上传前如重名文件夹等等的错误提前检查
+    if (popupRes.key === 'cancel' || popupRes.text === '') {
+        return
+    }
+    const _currDir = currentDirectory.value
+    const name = popupRes.text
+    const opType: 'file' | 'dir' = popupRes.key
+    if (opType === 'dir') {
+        const res = await miaoFetchApi.mkdir(currentDirectory.value, name)
+        if (res.message === 'success') {
+            _currDir.update()
+        }
+    } else {
+        const { response } = miaoFetchApi.mkFile(currentDirectory.value, name)
+        const res = await response
+        if (res.message === 'success') {
+            _currDir.update()
+        }
+    }
+}
+
+const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
+    if (!selectedItem.value.includes(item)) {
+        selectedItem.push(item)
+    } else {
+        selectedItem.remove(item)
+    }
+}
+onMounted(async () => {
+    await setCurrentDirectory(currentDirectory.value)
+})
 </script>
 
 <style scoped lang="scss">
@@ -242,137 +450,162 @@ $top-height: 30px;
 $bottom-bar-height: 60px;
 
 .miao-directory-item-container {
-  position: relative;
-  height: 100%;
-  width: inherit;
-  min-width: 266px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-
-  .container-top {
-    height: $top-height;
-    width: 100%;
-    user-select: none;
     position: relative;
+    height: 100%;
+    width: inherit;
+    // min-width: 236px;
     display: flex;
-    align-items: center;
+    flex-direction: column;
     overflow: hidden;
-    background-color: #f1f1f1;
+    min-width: 170px;
 
-    .container-top-colorbar {
+    .container-top {
-      height: 70%;
+        height: $top-height;
-      width: 5px;
+        width: 100%;
-      margin-left: 10px;
+        user-select: none;
-      border-radius: 3px 0 0 3px;
+        position: relative;
-    }
-
-    .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;
-      }
+        overflow: hidden;
+        background-color: #f1f1f1;
+
+        .container-top-colorfulBar {
+            height: 70%;
+            width: 5px;
+            margin-left: 10px;
+            border-radius: 3px 0 0 3px;
+        }
+
+        .container-top-breadcrumb {
+            position: relative;
+            height: 70%;
+            width: calc(100% - 95px);
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            // overflow: hidden;
+            overflow-y: hidden;
+            overflow-x: hidden;
+            background-color: #ffffff;
+            padding: 0 5px;
+            border-radius: 0 3px 3px 0;
+
+            .container-top-breadcrumb-container {
+                position: absolute;
+                height: 100%;
+                right: 0;
+                top: 0;
+                min-width: 100%;
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+            }
+        }
+
+        .container-top-tools {
+            position: relative;
+            height: 100%;
+            width: 70px;
+            padding: 0 5px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            .container-top-tools-item {
+                width: 20px;
+                height: 20px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                background-color: #ffffff00;
+                border-radius: 5px;
+                transition: background-color 0.3s;
+                cursor: pointer;
+
+                .container-top-tools-item-reload {
+                    transition: transform 0.6s ease-in-out;
+                }
+
+                &:hover {
+                    background-color: rgba(128, 128, 128, 0.4);
+                }
+
+                &:active .container-top-tools-item-reload {
+                    transform: rotate(360deg);
+                }
+            }
+
+            // &::after {
+            //     content: '';
+            //     height: 60%;
+            //     position: absolute;
+            //     right: -2px;
+            //     width: 2px;
+            //     background-color: #828282;
+            // }
+        }
     }
 
-    .container-top-tools {
+    .container-items {
-      position: relative;
+        width: 100%;
-      height: 100%;
+        height: calc(100% - $top-height - $bottom-bar-height);
-      width: 70px;
+        // flex: 1;
-      padding: 0 5px;
+    }
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
 
-      .container-top-tools-item {
+    .container-bottom {
-        width: 20px;
+        height: $bottom-bar-height;
-        height: 20px;
+        background-color: bisque;
         display: flex;
-        justify-content: center;
+        justify-content: space-around;
         align-items: center;
-        background-color: #ffffff00;
+        user-select: none;
-        border-radius: 5px;
+        box-shadow: 0px 1px 10px #888888;
-        transition: background-color 0.3s;
+        z-index: 2;
-        cursor: pointer;
 
-        .container-top-tools-item-reload {
+        .container-bottom-item {
-          transition: transform 0.6s ease-in-out;
+            height: 40px;
+            width: 40px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .container-bottom-item-icon {
+                svg {
+                    width: 30px;
+                    height: 30px;
+                    transition: all 0.3s ease;
+                    cursor: pointer;
+                }
+
+                &:hover {
+                    svg {
+                        width: 40px;
+                        height: 40px;
+                    }
+                }
+            }
         }
-
-        &:hover {
-          background-color: rgba(128, 128, 128, 0.4);
-        }
-
-        &:active .container-top-tools-item-reload {
-          transform: rotate(360deg);
-        }
-      }
-
-      // &::after {
-      //     content: '';
-      //     height: 60%;
-      //     position: absolute;
-      //     right: -2px;
-      //     width: 2px;
-      //     background-color: #828282;
-      // }
     }
-  }
-
-  .container-items {
-    width: 100%;
-    height: calc(100% - $top-height - $bottom-bar-height);
-    // flex: 1;
-  }
-
-  .container-bottom {
-    height: $bottom-bar-height;
-    background-color: bisque;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    user-select: none;
-    box-shadow: 0px 1px 10px #888888;
-    z-index: 2;
-  }
 }
 
 // transition动画相关
-.miao-directory-item-container {
+// .miao-directory-item-container {
-  .container-items {
+//     .container-items {
-    .dirItem-move {
+//         .dirItem-move {
-      transition: all 0.2s ease;
+//             transition: all 0.2s ease;
-    }
+//         }
 
-    .dirItem-leave-active {
+//         .dirItem-leave-active {
-      transition: none;
+//             transition: none;
-    }
+//         }
 
-    .dirItem-enter-from {
+//         .dirItem-enter-from {
-      opacity: 0;
+//             opacity: 0;
-    }
+//         }
 
-    .dirItem-leave-active {
+//         .dirItem-leave-active {
-      position: absolute;
+//             position: absolute;
-    }
+//         }
-  }
+//     }
-}
+// }
 </style>

src/views/miaoIframe.vue

@@ -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>

src/views/miaoPDF.vue

@@ -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>

src/views/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 useViretualPages from '@/hooks/useVirtualPages';
+import XGPlayer from 'xgplayer'
+import '@/style/xgplayer.scss'
+import TextTrack from 'xgplayer/es/plugins/track'
+import 'xgplayer/es/plugins/track/index.css'
+import axios from 'axios'
+import { uniq } from 'lodash'
+// import config from '@/config'
+
+// const props = defineProps<{
+//     id: number
+// }>()
+const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
+    required: true
+})
+
+// const views = useViretualPages()
+// const view = views.getView(props.id)
+
+// const videoPath = ref<string>('');
+const xgPlayer = ref()
+
+let _player: XGPlayer
+const { setVideo } = (() => {
+    return {
+        setVideo: async (
+            videoVFile: VirtualFile,
+            textTrackFiles?: VirtualFile[]
+        ) => {
+            if(!currentFiles.value.includes(videoVFile)) {
+                currentFiles.value = [videoVFile]
+            }
+            videoVFile || (videoVFile = findVideo(currentFiles.value))
+            textTrackFiles &&
+                textTrackFiles.push(...findTextTrack(currentFiles.value))
+            textTrackFiles = uniq(textTrackFiles)
+            currentFiles.value = [videoVFile, ...(textTrackFiles ?? [])]
+            const _list = []
+            if (textTrackFiles) {
+                for (let i of textTrackFiles) {
+                    if (i.name.endsWith('srt')) {
+                        const response = await axios.get(i.url)
+                        // console.log(srtToVtt(response.data))
+                        const url = setUrl(new Blob([srtToVtt(response.data)]))
+                        _list.push({
+                            id: i.uid,
+                            url,
+                            // 这个language会覆盖id的设置，导致无法切换字幕
+                            // language: 'zh-cn',
+                            text: i.name
+                        })
+                    } else if (i.name.endsWith('ass')) {
+                        const response = await axios.get(i.url)
+                        // console.log(assToVtt(response.data))
+                        const url = setUrl(new Blob([assToVtt(response.data)]))
+                        _list.push({
+                            id: i.uid,
+                            url,
+                            text: i.name
+                        })
+                    } else if (i.name.endsWith('ssa')) {
+                        const response = await axios.get(i.url)
+                        // console.log(ssaToVtt(response.data))
+                        const url = setUrl(new Blob([ssaToVtt(response.data)]))
+                        _list.push({
+                            id: i.uid,
+                            url,
+                            text: i.name
+                        })
+                    } else {
+                        _list.push({
+                            id: i.uid,
+                            url: i.url,
+                            text: i.name
+                        })
+                    }
+                }
+            }
+            const texttrack = {
+                list: _list
+            }
+            _player && _player.destroy()
+            _player = new XGPlayer({
+                plugins: [TextTrack],
+                el: xgPlayer.value,
+                url: videoVFile.url,
+                width: '100%',
+                height: '100%',
+                volume: 1,
+                pip: true,
+                videoFillMode: 'contain',
+                autoplay: true,
+                download: true,
+                screenShot: {
+                    saveImg: true,
+                    quality: 0.92,
+                    type: 'image/png',
+                    format: '.png'
+                },
+                lang: 'zh-cn',
+                playbackRate: [0.1, 0.3, 0.5, 0.75, 1, 1.5, 2, 3, 5, 10],
+                playNext: {
+                    urlList: []
+                },
+                texttrack
+            })
+        }
+    }
+})()
+
+const { setUrl, destroyUrl } = (() => {
+    const urlList: string[] = []
+    return {
+        setUrl(blob: Blob) {
+            const url = URL.createObjectURL(blob)
+            urlList.push(url)
+            return url
+        },
+        destroyUrl() {
+            for (const url of urlList) {
+                URL.revokeObjectURL(url)
+            }
+        }
+    }
+})()
+
+const handleDropVFiles = (files: VirtualFile[]) => {
+    setVideo(findVideo(files), findTextTrack(files))
+}
+
+function srtToVtt(srt: string) {
+    // 将 SRT 字幕按行分割
+    const lines = srt.split('\n')
+    let vtt = 'WEBVTT\n\n' // VTT 文件的开头
+
+    let index = 0
+    while (index < lines.length) {
+        // 跳过空行
+        if (lines[index].trim() === '') {
+            index++
+            continue
+        }
+
+        // SRT 中的序号
+        lines[index].trim()
+        index++
+
+        // 时间戳
+        const timeLine = lines[index].trim().replace(/,/g, '.') // 将逗号替换为点
+        index++
+
+        // 字幕文本
+        let text = ''
+        while (index < lines.length && lines[index].trim() !== '') {
+            text += lines[index].trim() + '\n'
+            index++
+        }
+
+        // 添加到 VTT 字幕中
+        vtt += `${timeLine}\n${text.trim()}\n\n`
+    }
+
+    return vtt
+}
+
+function assToVtt(assContent: string) {
+    // 分割 ASS 内容为行
+    const lines = assContent.split('\n')
+    let vttContent = 'WEBVTT\n\n' // VTT 文件头
+
+    // 遍历每一行，寻找字幕条目
+    for (let line of lines) {
+        // 只处理 [Events] 部分后的 Dialogue 行
+        if (line.startsWith('Dialogue:')) {
+            // 提取时间戳和文本
+            const parts = line.split(',')
+            if (parts.length >= 5) {
+                // 将时间戳格式化为 VTT 格式
+                const startTime = parts[1]
+                    .trim()
+                    .replace('.', ',')
+                    .replace(',', '.') // 替换 . 为 ,，然后再替换为 .
+                const endTime = parts[2]
+                    .trim()
+                    .replace('.', ',')
+                    .replace(',', '.') // 替换 . 为 ,，然后再替换为 .
+
+                // 确保时间戳是两位数格式
+                const formattedStartTime = startTime.replace(
+                    /(\d+):(\d+):(\d+)\.(\d+)/,
+                    (match: any, h: any, m: any, s: any, ms: any) => {
+                        match
+                        return `${String(h).padStart(2, '0')}:${String(
+                            m
+                        ).padStart(2, '0')}:${String(s).padStart(
+                            2,
+                            '0'
+                        )}.${String(ms).padStart(3, '0')}`
+                    }
+                )
+
+                const formattedEndTime = endTime.replace(
+                    /(\d+):(\d+):(\d+)\.(\d+)/,
+                    (match: any, h: any, m: any, s: any, ms: any) => {
+                        match
+                        return `${String(h).padStart(2, '0')}:${String(
+                            m
+                        ).padStart(2, '0')}:${String(s).padStart(
+                            2,
+                            '0'
+                        )}.${String(ms).padStart(3, '0')}`
+                    }
+                )
+
+                const rawText = parts.slice(9).join(',').trim() // 提取文本
+
+                // 清理文本中的样式信息
+                const cleanText = rawText
+                    .replace(/{[^}]*}/g, '')
+                    .replace(/\\N/g, '\n')
+                    .trim()
+
+                // 添加到 VTT 内容
+                vttContent += `${formattedStartTime} --> ${formattedEndTime}\n${cleanText}\n\n`
+            }
+        }
+    }
+
+    return vttContent.trim() // 返回 VTT 内容，去掉末尾空行
+}
+
+function ssaToVtt(ssaContent: string): string {
+    function convertSsaTimeToVtt(ssaTime: string): string {
+        const timeParts = ssaTime.split(':')
+        const hours = timeParts[0].padStart(2, '0')
+        const minutes = timeParts[1].padStart(2, '0')
+        const secondsAndMilliseconds = timeParts[2].split('.')
+        const seconds = secondsAndMilliseconds[0].padStart(2, '0')
+        const milliseconds = (secondsAndMilliseconds[1] || '0').padEnd(3, '0')
+
+        return `${hours}:${minutes}:${seconds}.${milliseconds}`
+    }
+    const lines = ssaContent.split('\n')
+    let vttContent = 'WEBVTT\n\n' // VTT文件头
+    let inEvents = false
+
+    for (const line of lines) {
+        // 检查是否进入[Events]部分
+        if (line.startsWith('[Events]')) {
+            inEvents = true
+            continue
+        }
+
+        // 如果在[Events]部分，处理对话行
+        if (inEvents && line.startsWith('Dialogue:')) {
+            const parts = line.split(',')
+            if (parts.length >= 3) {
+                const startTime = convertSsaTimeToVtt(parts[1].trim())
+                const endTime = convertSsaTimeToVtt(parts[2].trim())
+                const text = parts.slice(9).join(',').trim() // 获取字幕文本
+
+                // 去除样式标签
+                const cleanText = text.replace(/{[^}]*}/g, '').trim()
+
+                // 添加到VTT内容
+                vttContent += `${startTime} --> ${endTime}\n${cleanText}\n\n`
+            }
+        }
+    }
+
+    return vttContent
+}
+
+const findVideo = (vFiles: VirtualFile[]) =>
+    vFiles.filter((v) => {
+        for (let s of ['mp4', 'm3u8', 'hls']) {
+            if (v.name.endsWith(s)) {
+                return true
+            }
+        }
+        return false
+    })[0]
+
+const findTextTrack = (vFiles: VirtualFile[]) =>
+    vFiles.filter((v) => {
+        for (let s of ['vtt', 'srt', 'ass', 'ssa']) {
+            if (v.name.endsWith(s)) {
+                return true
+            }
+        }
+        return false
+    })
+
+onMounted(() => {
+    if (currentFiles.value.length) {
+        setVideo(
+            findVideo(currentFiles.value),
+            findTextTrack(currentFiles.value)
+        )
+    }
+})
+
+onBeforeUnmount(() => {
+    _player.destroy()
+    destroyUrl()
+})
+</script>
+
+<style scoped lang="scss">
+.player-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    background-color: grey;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    #xgplayer {
+        width: 100%;
+        height: 500px;
+        background-color: black;
+    }
+}
+
+.video-js {
+    width: 100%;
+    background-color: rgb(0, 0, 0);
+}
+</style>

vite.config.ts

@@ -1,55 +1,79 @@
-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/
 export default defineConfig({
-	plugins: [vue(), viteSingleFile()],
+    base: './',
-	resolve: {
+    plugins: [
-		alias: {
+        vue()
-			"@": resolve(__dirname, "src")
+        // viteSingleFile()
-		}
+    ],
-	},
+    resolve: {
-	server: {
+        alias: {
-		proxy: {
+            '@': resolve(__dirname, 'src')
-			"/get": {
+        }
-				target: "http://127.0.0.1:17705",
+    },
-				changeOrigin: true,
+    server: {
-				rewrite: path => path.replace(/^\/get/, "/get")
+        proxy: {
-			}, 
+            '/get': {
-			
+                target: 'http://127.0.0.1:17705',
-			"/upload": {
+                changeOrigin: true,
-				target: "http://127.0.0.1:17705",
+                rewrite: (path) => path.replace(/^\/get/, '/get')
-				changeOrigin: true,
+            },
-				rewrite: path => path.replace(/^\/upload/, "/upload")
+
-			},
+            '/upload': {
-			
+                target: 'http://127.0.0.1:17705',
-			"/delete": {
+                changeOrigin: true,
-				target: "http://127.0.0.1:17705",
+                rewrite: (path) => path.replace(/^\/upload/, '/upload')
-				changeOrigin: true,
+            },
-				rewrite: path => path.replace(/^\/delete/, "/delete")
+
-			},
+            '/delete': {
-			"/query": {
+                target: 'http://127.0.0.1:17705',
-				target: "http://127.0.0.1:17705",
+                changeOrigin: true,
-				changeOrigin: true,
+                rewrite: (path) => path.replace(/^\/delete/, '/delete')
-				rewrite: path => path.replace(/^\/query/, "/query")
+            },
-			}, 
+            '/query': {
-		}
+                target: 'http://127.0.0.1:17705',
-	},
+                changeOrigin: true,
-	build: {
+                rewrite: (path) => path.replace(/^\/query/, '/query')
-		rollupOptions: {
+            },
-			input: {
+            '/rename': {
-				main: resolve(__dirname, "index.html")
+                target: 'http://127.0.0.1:17705',
-			},
+                changeOrigin: true,
-			output: {
+                rewrite: (path) => path.replace(/^\/rename/, '/rename')
-				// 配置输出为单文件
+            },
-				inlineDynamicImports: true,
+            '/cut': {
-				manualChunks: undefined,
+                target: 'http://127.0.0.1:17705',
-				entryFileNames: "bundle.js",
+                changeOrigin: true,
-				format: "iife", // 立即执行函数格式
+                rewrite: (path) => path.replace(/^\/cut/, '/cut')
-				name: "MyBundle"
+            },
-			}
+            '/mkdir': {
-		}
+                target: 'http://127.0.0.1:17705',
-	}
+                changeOrigin: true,
-});
+                rewrite: (path) => path.replace(/^\/mkdir/, '/mkdir')
+            }
+        }
+    },
+    build: {
+        rollupOptions: {
+            input: {
+                main: resolve(__dirname, 'index.html')
+            },
+            output: {
+                // 配置输出为单文件
+                // inlineDynamicImports: true,
+                // manualChunks(id) {
+                //     加了会有bug
+                //     if (id.includes('@codemirror')) {
+                //         return id.split('@')[1].replace('+', '-')
+                //     }
+                // }
+                // entryFileNames: 'bundle.js',
+                // format: 'iife', // 立即执行函数格式
+                // name: 'MyBundle'
+            }
+        }
+    }
+})