refactor(miaoImages): 将图片查看功能提取为独立组件

提取图片查看逻辑到独立的 MiaoImageViewer 组件，提高代码复用性和可维护性
移除原文件中的重复代码，统一处理图片缩放和拖拽功能

.github/workflows/build.yml

@@ -0,0 +1,83 @@
+name: 构建并发布应用
+
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+jobs:
+  build:
+    name: 构建和发布
+    runs-on: ubuntu-latest
+    
+    steps:
+      - name: 检出代码
+        uses: actions/checkout@v4
+      
+      - name: 设置Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          
+      - name: 安装pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 8
+          
+      - name: 安装前端依赖
+        run: pnpm install
+        
+      - name: 显示依赖包信息
+        run: |
+          ls -la node_modules/aplayer
+          ls -la node_modules/APlayer || echo "大写的APlayer不存在"
+        
+      - name: 构建前端
+        run: pnpm run build
+        
+      - name: 设置Go环境
+        uses: actions/setup-go@v5
+        with:
+          go-version: '1.21'
+          
+      - name: 安装UPX
+        run: sudo apt-get update && sudo apt-get install -y upx
+        
+      - name: 构建应用
+        run: bash build.auto.release.sh -full
+      
+      - name: 显示构建产物
+        run: |
+          ls -la output || true
+          find output -type f -name "miao-directory*" || true
+        
+      - name: 上传构建产物
+        uses: actions/upload-artifact@v4
+        with:
+          name: miao-directory-all
+          path: |
+            output/**
+            
+      - name: 生成版本号
+        id: version
+        run: |
+          echo "date=$(date +'%Y%m%d%H%M')" >> $GITHUB_OUTPUT
+          echo "sha_short=$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
+          
+      - name: 创建自动发布
+        if: github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/master')
+        uses: softprops/action-gh-release@v2
+        with:
+          name: Auto-Build-${{ steps.version.outputs.date }}-${{ steps.version.outputs.sha_short }}
+          tag_name: auto-${{ steps.version.outputs.date }}-${{ steps.version.outputs.sha_short }}
+          draft: false
+          prerelease: false
+          files: |
+            output/**
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -9,6 +9,7 @@ lerna-debug.log*
 
 node_modules
 dist
+output/
 dist-ssr
 *.local
 
@@ -23,8 +24,60 @@ dist-ssr
 *.sln
 *.sw?
 .vscode
-serve
+
 miao-directory.exe
 miao-directory-amd64-linux
 miao-directory-amd64-win.exe
+miao-directory-amd64-win.gui.exe
+miao-directory-amd64-win.upx.exe
+miao-directory-amd64-win.gui.upx.exe
+miao-directory.exe~
+miao-directory-amd64-linux~
+miao-directory-amd64-win.exe~
+miao-directory-amd64-win.gui.exe~
+miao-directory-amd64-win.upx.exe~
+miao-directory-amd64-win.gui.upx.exe~
+
+# Linux 压缩版本
+miao-directory-amd64-linux.upx
+miao-directory-amd64-linux.upx~
+
+# Linux ARM64 版本
+miao-directory-arm64-linux
+miao-directory-arm64-linux~
+miao-directory-arm64-linux.upx
+miao-directory-arm64-linux.upx~
+
+# macOS AMD64 版本
+miao-directory-amd64-darwin
+miao-directory-amd64-darwin~
+miao-directory-amd64-darwin.upx
+miao-directory-amd64-darwin.upx~
+
+# macOS ARM64 版本
+miao-directory-arm64-darwin
+miao-directory-arm64-darwin~
+miao-directory-arm64-darwin.upx
+miao-directory-arm64-darwin.upx~
+
+# Windows ARM64 版本
+miao-directory-arm64-win.exe
+miao-directory-arm64-win.exe~
+
+# 带x-前缀的版本
+miao-directory-x-*
+
 test
+stats.html
+
+src-server/web/*
+
+# auto-imports.d.ts
+
+# components.d.ts
+
+# src/plugins/onnx_demo_*
+
+public/test
+
+doc

.prettierrc.js

@@ -0,0 +1,104 @@
+export default {
+    /**
+     * 换行宽度，当代码宽度达到多少时换行
+     * @default 80
+     * @type {number}
+     */
+    printWidth: 80,
+    /**
+     * 缩进的空格数量
+     * @default 2
+     * @type {number}
+     */
+    tabWidth: 3,
+    /**
+     * 是否使用制表符代替空格
+     * @default false
+     * @type {boolean}
+     */
+    useTabs: false,
+    /**
+     * 是否在代码块结尾加上分号
+     * @default true
+     * @type {boolean}
+     */
+    semi: false,
+    /**
+     * 是否使用单引号替代双引号
+     * @default false
+     * @type {boolean}
+     */
+    singleQuote: true,
+    /**
+     * 对象属性的引号处理
+     * @default "as-needed"
+     * @type {"as-needed"|"consistent"|"preserve"}
+     */
+    quoteProps: 'as-needed',
+    /**
+     * jsx中是否使用单引号替代双引号
+     * @default false
+     * @type {boolean}
+     */
+    jsxSingleQuote: true,
+    /**
+     * 在jsx中使用是否单引号代替双引号
+     * @default false
+     * @type {boolean}
+     */
+    /**
+     * 末尾是否加上逗号
+     * @default "es5"
+     * @type {"es5"|"none"|"all"}
+     */
+    trailingComma: 'none',
+    /**
+     * 在对象，数组括号与文字之间加空格 "{ foo: bar }"
+     * @default true
+     * @type {boolean}
+     */
+    bracketSpacing: true,
+    /**
+     * 把多行HTML (HTML, JSX, Vue, Angular)元素的>放在最后一行的末尾，而不是单独放在下一行(不适用于自关闭元素)。
+     * @default false
+     * @type {boolean}
+     */
+    bracketSameLine: true,
+    /**
+     * 当箭头函数只有一个参数是否加括号
+     * @default "always"
+     * @type {"always"|"avoid"}
+     */
+    arrowParens: 'always',
+    /**
+     * 为HTML、Vue、Angular和Handlebars指定全局空格敏感性
+     * @default "css"
+     * @type {"css"|"strict"|"ignore"}
+     */
+    htmlWhitespaceSensitivity: 'ignore',
+    /**
+     * 是否缩进Vue文件中的<script>和<style>标记内的代码。有些人(比如Vue的创建者)不使用缩进来保存缩进级别，但这可能会破坏编辑器中的代码折叠。
+     * @default "always"
+     * @type {"always"|"avoid"}
+     */
+    vueIndentScriptAndStyle: false,
+    /**
+     * 文件结束符
+     * @default "lf"
+     * @type {"lf"|"crlf"|"cr"|"auto"}
+     */
+    endOfLine: 'crlf',
+    /**
+     * 因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
+     */
+    proseWrap: 'never',
+    // 是否使用根目录下的EditorConfig配置文件
+    useEditorConfig: false,
+    /**
+     * HTML\VUE\JSX每行只有单个属性
+     * @default true
+     * @type {boolean}
+     */
+    // singleAttributePerLine: true,
+    // disableLanguages: ['html']
+}

README.md

@@ -7,23 +7,22 @@
 | 完善PDF插件 | ✅ |
 | 完善Code插件 | ✅ |
 | 实现miaoDirectory的搜索功能 | ✅ |
+| 创建音乐播放器组件（仿QQ音乐移动端吧） | ✅ |
+| plugin增加些属性，icon, disable, group之类的 | ✅ |
+| 实现miaoDirectory的排序功能 | ✅ |
+| 重构主界面，拆分主界面组件的实现 | ✅ |
 | 重构miaoFetchApi.getFile， 增加进度 | ❌ |
-| plugin增加些属性，icon, disable, group之类的 | ❌ |
 | 完善miaoDirectory的搜索功能 | ❌ |
-| 实现miaoDirectory的排序功能 | ❌ |
 | 完善图片浏览插件 | ❌ |
 | VirtualDirectory更新时更新文件信息 | ❌ |
-| 创建音乐播放器组件（仿QQ音乐移动端吧） | ❌ |
 | miaoDirectory的复制文件/文件夹功能 | ❌ |
 | 重构miaoDropHandler的实现 | ❌ |
-| 重构主界面，拆分主界面组件的实现 | ❌ |
 
 
 | 长期计划 |
 |---|
-| 重构virtualDirectory，使其不用直接拥有父文件夹 |
-| 重构virtualDirectory，使其不用直接拥有父文件夹 |
+| 无 |
 
 ## 碎碎念：
 
-为什么不直接做成类似于windows的风格呢？其实技术实现上问题应该不大，重构也不用重构太多东西（APP.vue改改，插件部分改改这样），但是开学了事情一大堆，实习又没法比较美好地推掉。平时每天到宿舍都精疲力竭还要准备秋招和学校的破事。更何况搞不好还会被两个学分卡得没法毕业，好烦好烦。md想这么多干嘛，反正都快岩壁了，mdmdmdmd
+写的真潦草

auto-imports.d.ts

@@ -0,0 +1,75 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useDialog: typeof import('naive-ui')['useDialog']
+  const useId: typeof import('vue')['useId']
+  const useLoadingBar: typeof import('naive-ui')['useLoadingBar']
+  const useMessage: typeof import('naive-ui')['useMessage']
+  const useModel: typeof import('vue')['useModel']
+  const useNotification: typeof import('naive-ui')['useNotification']
+  const useSlots: typeof import('vue')['useSlots']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}

build.auto.release.sh

@@ -0,0 +1,258 @@
+#!/bin/bash
+set -Eeuo pipefail
+IFS=$'\n\t'
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+OUT_DIR="$SCRIPT_DIR/output"
+
+# 解析命令行参数
+FULL_BUILD=false
+FAST_COMPRESSION=false
+
+for arg in "$@"; do
+  case $arg in
+    -full)
+      FULL_BUILD=true
+      ;;
+    -fast)
+      FAST_COMPRESSION=true
+      ;;
+  esac
+done
+
+# 检查UPX是否存在
+check_upx() {
+  if command -v upx &> /dev/null; then
+    echo "UPX已找到，将执行可执行文件压缩"
+    return 0
+  else
+    echo "UPX未找到，跳过压缩步骤"
+    return 1
+  fi
+}
+require_cmd() {
+  if ! command -v "$1" >/dev/null 2>&1; then
+    echo "$1 未找到，请安装后再试"
+    exit 1
+  fi
+}
+
+# 清理已有构建产物
+echo "清理已有构建产物..."
+mkdir -p "$OUT_DIR"
+
+# 基础前缀
+PREFIX="miao-directory"
+
+# 基础构建产物
+BASE_ARCHOS=(
+  "amd64-win.exe"
+  "amd64-win.upx.exe"
+  "amd64-win.gui.exe"
+  "amd64-win.gui.upx.exe"
+  "amd64-linux"
+  "amd64-linux.upx"
+)
+
+# 清理基础构建产物
+for suffix in "${BASE_ARCHOS[@]}"; do
+  [ -f "$OUT_DIR/$PREFIX-$suffix" ] && rm "$OUT_DIR/$PREFIX-$suffix"
+done
+
+# 如果是完整构建，清理额外架构产物
+if [ "$FULL_BUILD" = true ]; then
+  echo "完整构建模式，清理额外架构产物..."
+  
+  # 无需添加x-前缀的特殊版本
+  SPECIAL_ARCHOS=(
+    "arm64-linux"
+    "arm64-linux.upx"
+    "amd64-darwin"
+    "amd64-darwin.upx"
+    "arm64-darwin"
+    "arm64-darwin.upx"
+    "arm64-win.exe"
+  )
+  
+  # 清理特殊版本产物
+  for suffix in "${SPECIAL_ARCHOS[@]}"; do
+    [ -f "$OUT_DIR/$PREFIX-$suffix" ] && rm "$OUT_DIR/$PREFIX-$suffix"
+  done
+  
+  # 处理带x-前缀的不同系统和架构
+  X_OS_ARCHS=(
+    # FreeBSD系列
+    "freebsd:amd64,arm64,386"
+    # OpenBSD系列
+    "openbsd:amd64,arm64,386"
+    # Windows额外架构
+    "windows:arm64"
+    # Linux额外架构
+    "linux:386,mips,mips64,mips64le,ppc64,ppc64le,riscv64,s390x"
+  )
+  
+  # 清理带x-前缀的版本产物
+  for os_arch in "${X_OS_ARCHS[@]}"; do
+    # 分离操作系统和架构列表
+    IFS=":" read -r os archs <<< "$os_arch"
+    
+    # 处理每个架构
+    IFS="," read -ra arch_array <<< "$archs"
+    for arch in "${arch_array[@]}"; do
+      file="$PREFIX-x-$arch-$os"
+      [ -f "$OUT_DIR/$file" ] && rm "$OUT_DIR/$file"
+    done
+  done
+fi
+
+echo "构建前端..."
+require_cmd pnpm
+require_cmd go
+pnpm run build
+
+echo "复制前端文件到服务端..."
+rm -rf ./src-server/web/*
+mkdir -p ./src-server/web/
+if compgen -G "./dist/*" > /dev/null; then
+  cp -r ./dist/* ./src-server/web/
+fi
+
+cd "$SCRIPT_DIR/src-server"
+
+# ===== 构建阶段 =====
+echo "===== 开始构建阶段 ====="
+
+# 基础构建 - 始终构建的版本
+echo "构建基础版本..."
+
+# Windows AMD64 无GUI
+echo "构建 Win AMD64 无GUI 版本"
+GOOS=windows GOARCH=amd64 go build -ldflags="-s -w" -o "$OUT_DIR/miao-directory-amd64-win.exe"
+
+# Linux AMD64 无GUI
+echo "构建 Linux AMD64 无GUI 版本"
+CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -ldflags="-s -w" -o "$OUT_DIR/miao-directory-amd64-linux"
+chmod +x "$OUT_DIR/miao-directory-amd64-linux"
+
+# Windows AMD64 GUI
+echo "构建 Win AMD64 GUI 版本"
+GOOS=windows GOARCH=amd64 go build -tags webview -ldflags="-s -w -H=windowsgui" -o "$OUT_DIR/miao-directory-amd64-win.gui.exe"
+
+# 完整构建 - 额外的系统和架构
+if [ "$FULL_BUILD" = true ]; then
+  echo "构建额外架构版本..."
+  
+  # 备份resource.syso文件(如果存在)
+  if [ -f "resource.syso" ]; then
+    echo "备份resource.syso文件"
+    mv resource.syso resource.syso.bak
+  fi
+  
+  : # CGO 在每次构建调用中禁用，无需全局 export
+  
+  # 定义操作系统和架构映射
+  # 在工具函数处增加大小写格式化，避免使用 Bash 4 的 ${var^}/${var^^}
+  uc_first() {
+    local s="$1"
+    local first="${s:0:1}"
+    local rest="${s:1}"
+    printf "%s%s" "$(printf "%s" "$first" | tr '[:lower:]' '[:upper:]')" "$rest"
+  }
+  
+  to_upper() {
+    printf "%s" "$1" | tr '[:lower:]' '[:upper:]'
+  }
+  OS_LIST=(linux darwin win freebsd openbsd)
+  for os in "${OS_LIST[@]}"; do
+    echo "构建 $(uc_first "$os") 系列版本..."
+    case "$os" in
+      linux) archs=(arm64 386 mips mips64 mips64le ppc64 ppc64le riscv64 s390x) ;; 
+      darwin) archs=(amd64 arm64) ;; 
+      win) archs=(arm64) ;; 
+      freebsd) archs=(amd64 arm64 386) ;; 
+      openbsd) archs=(amd64 arm64 386) ;; 
+      *) archs=() ;; 
+    esac
+
+    for arch in "${archs[@]}"; do
+      # 设置输出文件名后缀
+      suffix=""
+      if [ "$os" = "win" ]; then
+        suffix=".exe"
+      fi
+
+      echo "构建 $(uc_first "$os") $(to_upper "$arch") 版本"
+
+      # 根据条件设置不同的输出文件名格式
+      if [[ "$os" == "darwin" || ("$os" == "linux" && "$arch" == "arm64") || ("$os" == "win" && "$arch" == "arm64") ]]; then
+        output_file="$OUT_DIR/miao-directory-${arch}-${os}${suffix}"
+      else
+        output_file="$OUT_DIR/miao-directory-x-${arch}-${os}${suffix}"
+      fi
+
+      GOOS_VAR="$os"
+      if [ "$os" = "win" ]; then
+        GOOS_VAR="windows"
+      fi
+      CGO_ENABLED=0 GOOS="$GOOS_VAR" GOARCH="$arch" go build -ldflags="-s -w" -o "$output_file"
+      if [ "$os" != "win" ]; then
+        chmod +x "$output_file"
+      fi
+    done
+  done
+  
+  # 恢复resource.syso文件
+  if [ -f "resource.syso.bak" ]; then
+    echo "恢复resource.syso文件"
+    mv resource.syso.bak resource.syso
+  fi
+  
+  : # 无需恢复 CGO，全程使用内联变量
+fi
+
+# ===== 压缩阶段 =====
+echo "===== 开始压缩阶段 ====="
+
+# 检查是否可以进行UPX压缩
+if check_upx; then
+  echo "开始压缩所有可执行文件..."
+  
+  # 设置压缩级别
+  COMPRESSION_LEVEL="--ultra-brute"
+  if [ "$FAST_COMPRESSION" = true ]; then
+    echo "使用快速压缩模式"
+    COMPRESSION_LEVEL="--fast"
+  else
+    echo "使用极限压缩模式"
+  fi
+  
+  # 压缩基础版本
+  echo "压缩基础版本..."
+  
+  # 压缩Windows无GUI版本
+  echo "正在压缩Win AMD64无GUI版本"
+  upx $COMPRESSION_LEVEL -o "$OUT_DIR/miao-directory-amd64-win.upx.exe" "$OUT_DIR/miao-directory-amd64-win.exe"
+  
+  # 压缩Linux AMD64版本
+  echo "正在压缩Linux AMD64版本"
+  upx $COMPRESSION_LEVEL -o "$OUT_DIR/miao-directory-amd64-linux.upx" "$OUT_DIR/miao-directory-amd64-linux"
+  
+  # 压缩Windows GUI版本
+  echo "正在压缩Win AMD64 GUI版本"
+  upx $COMPRESSION_LEVEL -o "$OUT_DIR/miao-directory-amd64-win.gui.upx.exe" "$OUT_DIR/miao-directory-amd64-win.gui.exe"
+  
+  # 压缩额外架构版本
+  if [ "$FULL_BUILD" = true ]; then
+    echo "压缩额外架构版本..."
+    
+    # 压缩Linux ARM64版本
+    echo "正在压缩Linux ARM64版本"
+    upx $COMPRESSION_LEVEL -o "$OUT_DIR/miao-directory-arm64-linux.upx" "$OUT_DIR/miao-directory-arm64-linux"
+    
+  fi
+  
+  echo "所有压缩完成"
+fi
+
+echo "构建完成"
+echo "构建模式: $([ "$FULL_BUILD" = true ] && echo "完整构建" || echo "基础构建")"
+echo "压缩模式: $([ "$FAST_COMPRESSION" = true ] && echo "快速压缩" || echo "极限压缩")"

components.d.ts

@@ -0,0 +1,38 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    MiaoAlertTipProvider: typeof import('./src/components/miaoAlertTipProvider.vue')['default']
+    MiaoContextMenu: typeof import('./src/components/miaoContextMenu.vue')['default']
+    MiaoDraggableDiv: typeof import('./src/components/miaoDraggableDiv.vue')['default']
+    MiaoDropHandler: typeof import('./src/components/miaoDropHandler.vue')['default']
+    MiaoLazyDiv: typeof import('./src/components/miaoLazyDiv.vue')['default']
+    MiaoMask: typeof import('./src/components/miaoMask.vue')['default']
+    MiaoPopupInput: typeof import('./src/components/miaoPopupInput.vue')['default']
+    NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
+    NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
+    NButton: typeof import('naive-ui')['NButton']
+    NCard: typeof import('naive-ui')['NCard']
+    NDropdown: typeof import('naive-ui')['NDropdown']
+    NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NEmpty: typeof import('naive-ui')['NEmpty']
+    NGrid: typeof import('naive-ui')['NGrid']
+    NGridItem: typeof import('naive-ui')['NGridItem']
+    NIcon: typeof import('naive-ui')['NIcon']
+    NQrCode: typeof import('naive-ui')['NQrCode']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSpace: typeof import('naive-ui')['NSpace']
+    NSpin: typeof import('naive-ui')['NSpin']
+    NText: typeof import('naive-ui')['NText']
+    NTooltip: typeof import('naive-ui')['NTooltip']
+    ShareQrCodeCard: typeof import('./src/components/APP/ShareQrCodeCard.vue')['default']
+    ViewContainer: typeof import('./src/components/APP/ViewContainer.vue')['default']
+    ViewController: typeof import('./src/components/APP/ViewController.vue')['default']
+  }
+}

package.json

@@ -7,9 +7,11 @@
         "dev": "vite",
         "dev:host": "vite --host 0.0.0.0",
         "build": "vue-tsc -b && vite build",
-        "build:auto": "pnpm run build && go env -w GOOS=windows GOARCH=amd64 && rm -rf ./serve/web/* && cp -r ./dist/* ./serve/web/ && cd ./serve && go env -w GOOS=windows && go build -o ../miao-directory.exe",
-        "build:auto:release": "pnpm run build && rm -rf ./serve/web/* && cp -r ./dist/* ./serve/web/ && cd ./serve && go env -w GOOS=windows GOARCH=amd64 && go build -o ../miao-directory-amd64-win.exe && go env -w GOOS=linux GOARCH=amd64 && go build -o ../miao-directory-amd64-linux",
-        "preview": "vite preview"
+        "build:auto": "pnpm run build && go env -w GOOS=windows GOARCH=amd64 && rm -rf ./src-server/web/* && cp -r ./dist/* ./src-server/web/ && cd ./src-server && go env -w GOOS=windows && go build -o ../miao-directory.exe",
+        "build:fast": "bash build.auto.release.sh -fast",
+        "build:normal": "bash build.auto.release.sh",
+        "preview": "vite preview",
+        "format": "prettier --write src/"
     },
     "dependencies": {
         "@codemirror/lang-go": "^6.0.1",
@@ -23,17 +25,27 @@
         "@codemirror/lang-vue": "^0.1.3",
         "@codemirror/lang-xml": "^6.1.0",
         "@codemirror/lang-yaml": "^6.1.1",
+        "@mediapipe/tasks-genai": "^0.10.22",
+        "@tailwindcss/vite": "^4.0.13",
+        "@types/sortablejs": "^1.15.8",
         "@vicons/ionicons5": "^0.12.0",
         "aes-js": "^3.1.2",
+        "aplayer": "^1.10.1",
         "axios": "^1.7.3",
         "codemirror": "^6.0.1",
+        "copy-to-clipboard": "^3.3.3",
+        "drag-drop-touch": "^1.3.1",
+        "localforage": "^1.10.0",
         "lodash": "^4.17.21",
         "markdown-it": "^14.1.0",
         "naive-ui": "^2.39.0",
         "pdfjs-dist": "^4.5.136",
         "sass": "^1.77.8",
+        "sortablejs": "^1.15.3",
+        "tailwindcss": "^4.0.13",
         "vue": "3.5.0",
         "vue-codemirror": "^6.1.1",
+        "vue-draggable-plus": "^0.5.3",
         "xgplayer": "^3.0.20",
         "xgplayer-subtitles": "^3.0.20"
     },
@@ -44,7 +56,12 @@
         "@types/node": "^22.1.0",
         "@types/pdfjs-dist": "^2.10.378",
         "@vitejs/plugin-vue": "^5.1.2",
+        "prettier": "^3.4.2",
+        "prettier-plugin-vue": "^1.1.6",
+        "rollup-plugin-visualizer": "^5.12.0",
         "typescript": "^5.5.3",
+        "unplugin-auto-import": "^19.1.1",
+        "unplugin-vue-components": "^28.4.1",
         "vite": "^5.4.0",
         "vite-plugin-singlefile": "^2.0.2",
         "vue-tsc": "^2.0.29"

src-server/api/addressesHandler.go

@@ -0,0 +1,76 @@
+package api
+
+import (
+	"net"
+	"net/http"
+	"os"
+	"strings"
+
+	"github.com/gin-gonic/gin"
+)
+
+// AddressesHandler 返回服务器所有可用的访问地址
+func AddressesHandler(serverPort string) gin.HandlerFunc {
+	return func(c *gin.Context) {
+		addresses := []gin.H{}
+
+		addresses = append(addresses, gin.H{
+			"title": "localhost",
+			"url":   "http://localhost" + serverPort,
+		})
+
+		host, _ := os.Hostname()
+
+		addrs, _ := net.LookupHost(host)
+		for _, addr := range addrs {
+			if strings.Contains(addr, "%") {
+				addr = strings.Split(addr, "%")[0]
+			}
+
+			var url string
+			var title string
+
+			if strings.Contains(addr, ":") {
+				url = "http://[" + addr + "]" + serverPort
+				title = "IPv6 Address (" + addr + ")"
+			} else {
+				url = "http://" + addr + serverPort
+				title = "IPv4 Address (" + addr + ")"
+			}
+			addresses = append(addresses, gin.H{
+				"title": title,
+				"url":   url,
+			})
+		}
+
+		c.JSON(http.StatusOK, addresses)
+	}
+}
+
+// 判断是否是私有IP地址
+func isPrivateIP(ip string) bool {
+	ipAddr := net.ParseIP(ip)
+	if ipAddr == nil {
+		return false
+	}
+
+	// 检查常见的私有IP范围
+	// 10.0.0.0/8
+	if ipAddr[0] == 10 {
+		return true
+	}
+	// 172.16.0.0/12
+	if ipAddr[0] == 172 && ipAddr[1] >= 16 && ipAddr[1] <= 31 {
+		return true
+	}
+	// 192.168.0.0/16
+	if ipAddr[0] == 192 && ipAddr[1] == 168 {
+		return true
+	}
+	// 127.0.0.0/8 (本地回环)
+	if ipAddr[0] == 127 {
+		return true
+	}
+
+	return false
+}

src-server/api/apiConfig.go

@@ -0,0 +1,3 @@
+package api
+
+var staticPath = "./"

src-server/api/copyHandler.go

@@ -0,0 +1,106 @@
+package api
+
+import (
+	"io"
+	"net/http"
+	"os"
+	"path/filepath"
+
+	"github.com/gin-gonic/gin"
+
+	"miao-directory/fsOperateEventCenter"
+)
+
+func CopyHandler(fsOperateEventCenter *fsOperateEventCenter.FsOperateEventCenter) gin.HandlerFunc {
+	return func(c *gin.Context) {
+		var req struct {
+			NewPath string `json:"newPath"`
+		}
+		if err := c.ShouldBindJSON(&req); err != nil {
+			c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid request body"})
+			return
+		}
+
+		decodedPath, err := filepath.Abs(filepath.Join(staticPath, c.Param("path")))
+		if err != nil {
+			c.JSON(http.StatusInternalServerError, gin.H{"error": "Unable to access path"})
+			return
+		}
+
+		newPath := filepath.Join(staticPath, req.NewPath, filepath.Base(decodedPath))
+		eventId := fsOperateEventCenter.Push(func() error {
+			// 检查源路径是文件还是目录
+			fileInfo, err := os.Stat(decodedPath)
+			if err != nil {
+				return err
+			}
+
+			if fileInfo.IsDir() {
+				return copyDir(decodedPath, newPath)
+			}
+			return copyFile(decodedPath, newPath)
+		})
+		c.JSON(http.StatusOK, gin.H{"eventId": eventId})
+	}
+}
+
+func copyFile(src, dst string) error {
+	sourceFile, err := os.Open(src)
+	if err != nil {
+		return err
+	}
+	defer sourceFile.Close()
+
+	destFile, err := os.Create(dst)
+	if err != nil {
+		return err
+	}
+	defer destFile.Close()
+
+	_, err = io.Copy(destFile, sourceFile)
+	if err != nil {
+		return err
+	}
+
+	return destFile.Sync()
+}
+
+// 复制目录及其内容
+func copyDir(src, dst string) error {
+	// 获取源目录信息
+	srcInfo, err := os.Stat(src)
+	if err != nil {
+		return err
+	}
+
+	// 创建目标目录
+	if err = os.MkdirAll(dst, srcInfo.Mode()); err != nil {
+		return err
+	}
+
+	// 读取源目录内容
+	entries, err := os.ReadDir(src)
+	if err != nil {
+		return err
+	}
+
+	// 遍历并复制每个条目
+	for _, entry := range entries {
+		srcPath := filepath.Join(src, entry.Name())
+		dstPath := filepath.Join(dst, entry.Name())
+
+		if entry.IsDir() {
+			// 递归复制子目录
+			if err = copyDir(srcPath, dstPath); err != nil {
+				return err
+			}
+		} else {
+			// 复制文件
+			if err = copyFile(srcPath, dstPath); err != nil {
+				return err
+			}
+		}
+	}
+
+	return nil
+}

src-server/api/cutHandler.go

@@ -0,0 +1,36 @@
+package api
+
+import (
+	// "fmt"
+	"net/http"
+	"os"
+	"path/filepath"
+
+	"github.com/gin-gonic/gin"
+
+	"miao-directory/fsOperateEventCenter"
+)
+
+func CutHandler(fsOperateEventCenter *fsOperateEventCenter.FsOperateEventCenter) gin.HandlerFunc {
+	return func(c *gin.Context) {
+		var req struct {
+			NewPath string `json:"newPath"`
+		}
+		if err := c.ShouldBindJSON(&req); err != nil {
+			c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid request body"})
+			return
+		}
+
+		decodedPath, err := filepath.Abs(filepath.Join(staticPath, c.Param("path")))
+		if err != nil {
+			c.JSON(http.StatusInternalServerError, gin.H{"error": "Unable to access path"})
+			return
+		}
+
+		newPath := filepath.Join(staticPath, req.NewPath, filepath.Base(decodedPath))
+		eventId := fsOperateEventCenter.Push(func() error {
+			return os.Rename(decodedPath, newPath)
+		})
+		c.JSON(http.StatusOK, gin.H{"eventId": eventId})
+	}
+}

src-server/api/deleteHandler.go

@@ -0,0 +1,26 @@
+package api
+
+import (
+	// "fmt"
+	"miao-directory/fsOperateEventCenter"
+	"net/http"
+	"os"
+	"path/filepath"
+
+	"github.com/gin-gonic/gin"
+)
+
+func DeleteHandler(fsOperateEventCenter *fsOperateEventCenter.FsOperateEventCenter) gin.HandlerFunc {
+	return func(c *gin.Context) {
+		decodedPath, err := filepath.Abs(filepath.Join(staticPath, c.Param("path")))
+		if err != nil {
+			c.JSON(http.StatusInternalServerError, gin.H{"error": "Unable to access path"})
+			return
+		}
+
+		eventId := fsOperateEventCenter.Push(func() error {
+			return os.RemoveAll(decodedPath)
+		})
+		c.JSON(http.StatusOK, gin.H{"eventId": eventId})
+	}
+}

src-server/api/getHandler.go

@@ -0,0 +1,91 @@
+package api
+
+import (
+	"io/ioutil"
+	"net/http"
+	"os"
+	"path/filepath"
+	"strings"
+	"time"
+
+	"github.com/gin-gonic/gin"
+)
+
+func GetHandler(c *gin.Context) {
+	decodedPath, err := filepath.Abs(filepath.Join(staticPath, c.Param("path")))
+	if err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "Unable to access path"})
+		return
+	}
+
+	fileInfo, err := os.Stat(decodedPath)
+	if os.IsNotExist(err) {
+		c.JSON(http.StatusNotFound, gin.H{"error": "Path not found"})
+		return
+	}
+
+	if fileInfo.IsDir() {
+		files, err := ioutil.ReadDir(decodedPath)
+		if err != nil {
+			c.JSON(http.StatusInternalServerError, gin.H{"error": "Unable to scan directory"})
+			return
+		}
+
+		var fileDetails []gin.H
+		for _, file := range files {
+			fileDetails = append(fileDetails, gin.H{
+				"name": file.Name(),
+				"size": file.Size(),
+				"type": func() string {
+					if file.IsDir() {
+						return "directory"
+					}
+					return "file"
+				}(),
+				"stats": gin.H{
+					"atimeMs":     file.ModTime().UnixNano() / 1e6,
+					"birthtimeMs": file.ModTime().UnixNano() / 1e6,
+					"ctimeMs":     file.ModTime().UnixNano() / 1e6,
+					"mtimeMs":     file.ModTime().UnixNano() / 1e6,
+				},
+			})
+		}
+		if len(fileDetails) == 0 {
+			c.JSON(http.StatusOK, []gin.H{})
+		} else {
+			c.JSON(http.StatusOK, fileDetails)
+		}
+	} else {
+		if strings.HasSuffix(decodedPath, "index.html") {
+			f, err := os.Open(decodedPath)
+			if err != nil {
+				c.Writer.WriteHeader(http.StatusInternalServerError)
+				c.Writer.Write([]byte("Internal Server Error"))
+				return
+			}
+			http.ServeContent(c.Writer, c.Request, "index.html", time.Now(), f)
+		} else {
+			// if c.Query("import") != "" {
+			// 	c.Writer.Header().Set("Content-Type", "application/javascript")
+			// }
+			ext := filepath.Ext(decodedPath)
+			switch ext {
+			case ".js":
+			case ".cjs":
+			case ".mjs":
+				c.Writer.Header().Set("Content-Type", "application/javascript")
+			case ".css":
+				c.Writer.Header().Set("Content-Type", "text/css")
+			case ".html":
+				c.Writer.Header().Set("Content-Type", "text/html")
+			case ".json":
+				c.Writer.Header().Set("Content-Type", "application/json")
+			case ".wasm":
+				c.Writer.Header().Set("Content-Type", "application/wasm")
+			default:
+				c.Writer.Header().Set("Content-Type", "application/octet-stream")
+			}
+			c.File(decodedPath)
+		}
+	}
+}

src-server/api/mapHandler.go

@@ -0,0 +1,142 @@
+package api
+
+import (
+	"crypto/md5"
+	"encoding/hex"
+	"io/ioutil"
+	"net/http"
+	"os"
+	"path/filepath"
+
+	"github.com/gin-gonic/gin"
+)
+
+// 内存存储
+var memoryStorage = make(map[string][]byte)
+
+// MapSetHandler 处理 /map/set/*key 请求
+func MapSetHandler(c *gin.Context) {
+	key := c.Param("key")
+	if key == "" || key == "/" {
+		c.JSON(http.StatusBadRequest, gin.H{"message": "failed", "error": "Key is required"})
+		return
+	}
+	key = key[1:] // 移除开头的"/"
+
+	// 获取disk参数
+	diskParam := c.DefaultQuery("disk", "0")
+
+	// 读取请求体数据
+	data, err := ioutil.ReadAll(c.Request.Body)
+	if err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{"message": "failed", "error": "Failed to read request body"})
+		return
+	}
+
+	if diskParam == "1" {
+		// 保存到文件系统
+		cachePath := filepath.Join(staticPath, ".miaodir_cache")
+
+		// 确保缓存目录存在
+		if err := os.MkdirAll(cachePath, os.ModePerm); err != nil {
+			c.JSON(http.StatusInternalServerError, gin.H{"message": "failed", "error": "Failed to create cache directory"})
+			return
+		}
+
+		// 生成文件名
+		hasher := md5.New()
+		hasher.Write([]byte(key))
+		filename := hex.EncodeToString(hasher.Sum(nil))
+
+		// 写入文件
+		filePath := filepath.Join(cachePath, filename)
+		if err := ioutil.WriteFile(filePath, data, 0644); err != nil {
+			c.JSON(http.StatusInternalServerError, gin.H{"message": "failed", "error": "Failed to write file"})
+			return
+		}
+	} else {
+		// 保存到内存
+		memoryStorage[key] = data
+	}
+
+	c.JSON(http.StatusOK, gin.H{"message": "success"})
+}
+
+// MapGetHandler 处理 /map/get/*key 请求
+func MapGetHandler(c *gin.Context) {
+	key := c.Param("key")
+	if key == "" || key == "/" {
+		c.JSON(http.StatusBadRequest, gin.H{"message": "failed", "error": "Key is required"})
+		return
+	}
+	key = key[1:] // 移除开头的"/"
+
+	// 获取disk参数
+	diskParam := c.DefaultQuery("disk", "0")
+
+	var data []byte
+	var err error
+
+	if diskParam == "1" {
+		// 从文件系统获取
+		cachePath := filepath.Join(staticPath, ".miaodir_cache")
+
+		// 生成文件名
+		hasher := md5.New()
+		hasher.Write([]byte(key))
+		filename := hex.EncodeToString(hasher.Sum(nil))
+
+		// 读取文件
+		filePath := filepath.Join(cachePath, filename)
+		data, err = ioutil.ReadFile(filePath)
+		if err != nil {
+			c.JSON(http.StatusNotFound, gin.H{"message": "failed", "error": "Key not found"})
+			return
+		}
+	} else {
+		// 从内存获取
+		var exists bool
+		data, exists = memoryStorage[key]
+		if !exists {
+			c.JSON(http.StatusNotFound, gin.H{"message": "failed", "error": "Key not found"})
+			return
+		}
+	}
+
+	c.Data(http.StatusOK, "application/octet-stream", data)
+}
+
+// MapDeleteHandler 处理 /map/delete/*key 请求
+func MapDeleteHandler(c *gin.Context) {
+	key := c.Param("key")
+	if key == "" || key == "/" {
+		c.JSON(http.StatusBadRequest, gin.H{"message": "failed", "error": "Key is required"})
+		return
+	}
+	key = key[1:] // 移除开头的"/"
+
+	// 获取disk参数
+	diskParam := c.DefaultQuery("disk", "0")
+
+	if diskParam == "1" {
+		// 从文件系统删除
+		cachePath := filepath.Join(staticPath, ".miaodir_cache")
+
+		// 生成文件名
+		hasher := md5.New()
+		hasher.Write([]byte(key))
+		filename := hex.EncodeToString(hasher.Sum(nil))
+
+		// 删除文件
+		filePath := filepath.Join(cachePath, filename)
+		if err := os.Remove(filePath); err != nil && !os.IsNotExist(err) {
+			c.JSON(http.StatusInternalServerError, gin.H{"message": "failed", "error": "Failed to delete file"})
+			return
+		}
+	} else {
+		// 从内存删除
+		delete(memoryStorage, key)
+	}
+
+	c.JSON(http.StatusOK, gin.H{"message": "success"})
+}

src-server/api/mkdirHandler.go

@@ -0,0 +1,34 @@
+package api
+
+import (
+    "github.com/gin-gonic/gin"
+    "net/http"
+    "os"
+    "path/filepath"
+)
+
+func MkdirHandler(c *gin.Context) {
+    var request struct {
+        FolderName string `json:"folderName"`
+    }
+
+    if err := c.ShouldBindJSON(&request); err != nil {
+        c.JSON(http.StatusBadRequest, gin.H{"message": "failed", "error": err.Error()})
+        return
+    }
+
+    decodedPath, err := filepath.Abs(filepath.Join(staticPath, c.Param("path")))
+    if err != nil {
+        c.JSON(http.StatusInternalServerError, gin.H{"message": "failed", "error": "Unable to access path"})
+        return
+    }
+
+    mkdirPath := filepath.Join(decodedPath, request.FolderName)
+
+    if err := os.MkdirAll(mkdirPath, os.ModePerm); err != nil {
+        c.JSON(http.StatusInternalServerError, gin.H{"message": "failed", "error": err.Error()})
+        return
+    }
+
+    c.JSON(http.StatusOK, gin.H{"message": "success"})
+}

src-server/api/queryHandler.go

@@ -0,0 +1,24 @@
+package api
+
+import (
+	"net/http"
+	"strconv"
+
+	"github.com/gin-gonic/gin"
+
+	"miao-directory/fsOperateEventCenter"
+)
+
+func QueryHandler(fsOperateEventCenter *fsOperateEventCenter.FsOperateEventCenter) gin.HandlerFunc {
+	return func(c *gin.Context) {
+		idStr := c.Query("id")
+		id, err := strconv.ParseInt(idStr, 10, 32)
+		if err != nil {
+			c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid id"})
+			return
+		}
+
+		event := fsOperateEventCenter.Query(int32(id))
+		c.JSON(http.StatusOK, event)
+	}
+}

src-server/api/renameHandler.go

@@ -0,0 +1,36 @@
+package api
+
+import (
+	// "fmt"
+	"net/http"
+	"os"
+	"path/filepath"
+
+	"github.com/gin-gonic/gin"
+
+	"miao-directory/fsOperateEventCenter"
+)
+
+func RenameHandler(fsOperateEventCenter *fsOperateEventCenter.FsOperateEventCenter) gin.HandlerFunc {
+	return func(c *gin.Context) {
+		var req struct {
+			NewName string `json:"newName"`
+		}
+		if err := c.ShouldBindJSON(&req); err != nil {
+			c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid request body"})
+			return
+		}
+
+		decodedPath, err := filepath.Abs(filepath.Join(staticPath, c.Param("path")))
+		if err != nil {
+			c.JSON(http.StatusInternalServerError, gin.H{"error": "Unable to access path"})
+			return
+		}
+
+		newTargetPath := filepath.Join(filepath.Dir(decodedPath), req.NewName)
+		eventId := fsOperateEventCenter.Push(func() error {
+			return os.Rename(decodedPath, newTargetPath)
+		})
+		c.JSON(http.StatusOK, gin.H{"eventId": eventId})
+	}
+}

src-server/api/uploadHandler.go

@@ -0,0 +1,58 @@
+package api
+
+import (
+    "github.com/gin-gonic/gin"
+    "net/http"
+    "os"
+    "path/filepath"
+    "io/ioutil"
+)
+
+func UploadHandler(c *gin.Context) {
+    fileName := c.PostForm("fileName")
+    operateType := c.PostForm("operateType")
+    file, err := c.FormFile("file")
+    if err != nil {
+        c.JSON(http.StatusBadRequest, gin.H{"message": "failed", "error": err.Error()})
+        return
+    }
+
+    decodedPath, err := filepath.Abs(filepath.Join(staticPath, c.Param("path")))
+    if err != nil {
+        c.JSON(http.StatusInternalServerError, gin.H{"message": "failed", "error": "Unable to access path"})
+        return
+    }
+
+    savePath := filepath.Join(decodedPath, fileName)
+    fileData, err := file.Open()
+    if err != nil {
+        c.JSON(http.StatusInternalServerError, gin.H{"message": "failed", "error": err.Error()})
+        return
+    }
+    defer fileData.Close()
+
+    data, err := ioutil.ReadAll(fileData)
+    if err != nil {
+        c.JSON(http.StatusInternalServerError, gin.H{"message": "failed", "error": err.Error()})
+        return
+    }
+
+    if operateType == "write" {
+        err = ioutil.WriteFile(savePath, data, 0644)
+    } else {
+        f, err := os.OpenFile(savePath, os.O_APPEND|os.O_WRONLY|os.O_CREATE, 0644)
+        if err != nil {
+            c.JSON(http.StatusInternalServerError, gin.H{"message": "failed", "error": err.Error()})
+            return
+        }
+        defer f.Close()
+        _, err = f.Write(data)
+    }
+
+    if err != nil {
+        c.JSON(http.StatusInternalServerError, gin.H{"message": "failed", "error": err.Error()})
+        return
+    }
+
+    c.JSON(http.StatusOK, gin.H{"message": "success"})
+}

src-server/fsOperateEventCenter/fsOperateEventCenter.go

@@ -0,0 +1,93 @@
+package fsOperateEventCenter
+
+import (
+	// "fmt"
+	"math/rand"
+	"sync"
+	"time"
+)
+
+type FsOperateEventStatus string
+
+const (
+	FsOperateEventStatusProgress FsOperateEventStatus = "progress"
+	FsOperateEventStatusSuccess  FsOperateEventStatus = "success"
+	FsOperateEventStatusFailed   FsOperateEventStatus = "failed"
+	FsOperateEventStatusUnknown  FsOperateEventStatus = "unknown"
+)
+
+type FsOperateEvent struct {
+	Status      FsOperateEventStatus `json:"status"`
+	FailedEvent error                `json:"failedEvent"`
+	UID         int32                `json:"uid"`
+}
+
+type FsOperateEventCenter struct {
+	eventMap sync.Map
+}
+
+func NewFsOperateEventCenter() *FsOperateEventCenter {
+	return &FsOperateEventCenter{}
+}
+
+func (c *FsOperateEventCenter) Push(event func() error) int32 {
+	ev := &FsOperateEvent{
+		Status: FsOperateEventStatusProgress,
+		UID:    generateId(),
+	}
+
+	wrapper := &eventWrapper{
+		event: ev,
+		timer: time.AfterFunc(time.Hour, func() {
+			c.Query(ev.UID)
+		}),
+	}
+
+	c.eventMap.Store(ev.UID, wrapper)
+
+	go func() {
+		if err := event(); err != nil {
+			wrapper.event.Status = FsOperateEventStatusFailed
+			wrapper.event.FailedEvent = err
+		} else {
+			wrapper.event.Status = FsOperateEventStatusSuccess
+		}
+	}()
+
+	return ev.UID
+}
+
+type eventWrapper struct {
+	event *FsOperateEvent
+	timer *time.Timer
+}
+
+func (c *FsOperateEventCenter) Query(id int32) *FsOperateEvent {
+	val, ok := c.eventMap.Load(id)
+	// fmt.Printf("Query ID: %d; ok: %t; val: %v\n", id, ok, val)
+
+	// c.eventMap.Range(func(key, value interface{}) bool {
+	// 	fmt.Printf("key: %d (type: %T), id: %d (type: %T), bool: %t\n", key, key, id, id, id == key)
+	// 	event := value.(*eventWrapper).event
+	// 	fmt.Printf("Event UID: %d, Status: %s\n", event.UID, event.Status)
+	// 	return true
+	// })
+
+	if !ok {
+		return &FsOperateEvent{
+			Status: FsOperateEventStatusUnknown,
+		}
+	}
+
+	wrapper := val.(*eventWrapper)
+	if wrapper.event.Status == FsOperateEventStatusSuccess || wrapper.event.Status == FsOperateEventStatusFailed {
+		wrapper.timer.Stop()
+		c.eventMap.Delete(id)
+	}
+
+	return wrapper.event
+}
+
+func generateId() int32 {
+	return rand.Int31()
+}

src-server/go.mod

@@ -0,0 +1,39 @@
+module miao-directory
+
+go 1.23.0
+
+require (
+	github.com/akavel/rsrc v0.10.2 // indirect
+	github.com/bytedance/sonic v1.12.1 // indirect
+	github.com/bytedance/sonic/loader v0.2.0 // indirect
+	github.com/cloudwego/base64x v0.1.4 // indirect
+	github.com/cloudwego/iasm v0.2.0 // indirect
+	github.com/gabriel-vasile/mimetype v1.4.5 // indirect
+	github.com/gin-contrib/gzip v1.0.1 // indirect
+	github.com/gin-contrib/sse v0.1.0 // indirect
+	github.com/gin-gonic/gin v1.10.0 // indirect
+	github.com/go-playground/locales v0.14.1 // indirect
+	github.com/go-playground/universal-translator v0.18.1 // indirect
+	github.com/go-playground/validator/v10 v10.22.0 // indirect
+	github.com/goccy/go-json v0.10.3 // indirect
+	github.com/jchv/go-webview2 v0.0.0-20221223143126-dc24628cff85 // indirect
+	github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e // indirect
+	github.com/josephspurrier/goversioninfo v1.4.0 // indirect
+	github.com/json-iterator/go v1.1.12 // indirect
+	github.com/klauspost/cpuid/v2 v2.2.8 // indirect
+	github.com/leodido/go-urn v1.4.0 // indirect
+	github.com/mattn/go-isatty v0.0.20 // indirect
+	github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
+	github.com/modern-go/reflect2 v1.0.2 // indirect
+	github.com/pelletier/go-toml/v2 v2.2.2 // indirect
+	github.com/twitchyliquid64/golang-asm v0.15.1 // indirect
+	github.com/ugorji/go/codec v1.2.12 // indirect
+	github.com/webview/webview v0.0.0-20250319170551-f1f42f0f164e // indirect
+	golang.org/x/arch v0.9.0 // indirect
+	golang.org/x/crypto v0.26.0 // indirect
+	golang.org/x/net v0.28.0 // indirect
+	golang.org/x/sys v0.31.0 // indirect
+	golang.org/x/text v0.17.0 // indirect
+	google.golang.org/protobuf v1.34.2 // indirect
+	gopkg.in/yaml.v3 v3.0.1 // indirect
+)

src-server/go.sum

@@ -0,0 +1,97 @@
+github.com/akavel/rsrc v0.10.2 h1:Zxm8V5eI1hW4gGaYsJQUhxpjkENuG91ki8B4zCrvEsw=
+github.com/akavel/rsrc v0.10.2/go.mod h1:uLoCtb9J+EyAqh+26kdrTgmzRBFPGOolLWKpdxkKq+c=
+github.com/bytedance/sonic v1.12.1 h1:jWl5Qz1fy7X1ioY74WqO0KjAMtAGQs4sYnjiEBiyX24=
+github.com/bytedance/sonic v1.12.1/go.mod h1:B8Gt/XvtZ3Fqj+iSKMypzymZxw/FVwgIGKzMzT9r/rk=
+github.com/bytedance/sonic/loader v0.1.1/go.mod h1:ncP89zfokxS5LZrJxl5z0UJcsk4M4yY2JpfqGeCtNLU=
+github.com/bytedance/sonic/loader v0.2.0 h1:zNprn+lsIP06C/IqCHs3gPQIvnvpKbbxyXQP1iU4kWM=
+github.com/bytedance/sonic/loader v0.2.0/go.mod h1:ncP89zfokxS5LZrJxl5z0UJcsk4M4yY2JpfqGeCtNLU=
+github.com/cloudwego/base64x v0.1.4 h1:jwCgWpFanWmN8xoIUHa2rtzmkd5J2plF/dnLS6Xd/0Y=
+github.com/cloudwego/base64x v0.1.4/go.mod h1:0zlkT4Wn5C6NdauXdJRhSKRlJvmclQ1hhJgA0rcu/8w=
+github.com/cloudwego/iasm v0.2.0 h1:1KNIy1I1H9hNNFEEH3DVnI4UujN+1zjpuk6gwHLTssg=
+github.com/cloudwego/iasm v0.2.0/go.mod h1:8rXZaNYT2n95jn+zTI1sDr+IgcD2GVs0nlbbQPiEFhY=
+github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/gabriel-vasile/mimetype v1.4.5 h1:J7wGKdGu33ocBOhGy0z653k/lFKLFDPJMG8Gql0kxn4=
+github.com/gabriel-vasile/mimetype v1.4.5/go.mod h1:ibHel+/kbxn9x2407k1izTA1S81ku1z/DlgOW2QE0M4=
+github.com/gin-contrib/gzip v1.0.1 h1:HQ8ENHODeLY7a4g1Au/46Z92bdGFl74OhxcZble9WJE=
+github.com/gin-contrib/gzip v1.0.1/go.mod h1:njt428fdUNRvjuJf16tZMYZ2Yl+WQB53X5wmhDwXvC4=
+github.com/gin-contrib/sse v0.1.0 h1:Y/yl/+YNO8GZSjAhjMsSuLt29uWRFHdHYUb5lYOV9qE=
+github.com/gin-contrib/sse v0.1.0/go.mod h1:RHrZQHXnP2xjPF+u1gW/2HnVO7nvIa9PG3Gm+fLHvGI=
+github.com/gin-gonic/gin v1.10.0 h1:nTuyha1TYqgedzytsKYqna+DfLos46nTv2ygFy86HFU=
+github.com/gin-gonic/gin v1.10.0/go.mod h1:4PMNQiOhvDRa013RKVbsiNwoyezlm2rm0uX/T7kzp5Y=
+github.com/go-playground/locales v0.14.1 h1:EWaQ/wswjilfKLTECiXz7Rh+3BjFhfDFKv/oXslEjJA=
+github.com/go-playground/locales v0.14.1/go.mod h1:hxrqLVvrK65+Rwrd5Fc6F2O76J/NuW9t0sjnWqG1slY=
+github.com/go-playground/universal-translator v0.18.1 h1:Bcnm0ZwsGyWbCzImXv+pAJnYK9S473LQFuzCbDbfSFY=
+github.com/go-playground/universal-translator v0.18.1/go.mod h1:xekY+UJKNuX9WP91TpwSH2VMlDf28Uj24BCp08ZFTUY=
+github.com/go-playground/validator/v10 v10.22.0 h1:k6HsTZ0sTnROkhS//R0O+55JgM8C4Bx7ia+JlgcnOao=
+github.com/go-playground/validator/v10 v10.22.0/go.mod h1:dbuPbCMFw/DrkbEynArYaCwl3amGuJotoKCe95atGMM=
+github.com/goccy/go-json v0.10.3 h1:KZ5WoDbxAIgm2HNbYckL0se1fHD6rz5j4ywS6ebzDqA=
+github.com/goccy/go-json v0.10.3/go.mod h1:oq7eo15ShAhp70Anwd5lgX2pLfOS3QCiwU/PULtXL6M=
+github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
+github.com/jchv/go-webview2 v0.0.0-20221223143126-dc24628cff85 h1:t6lhRbwURcdWgp8OsJlq6sOfWMOXP21YuiCicjutHv4=
+github.com/jchv/go-webview2 v0.0.0-20221223143126-dc24628cff85/go.mod h1:/BNVc0Sw3Wj6Sz9uSxPwhCEUhhWs92hPde75K2YV24A=
+github.com/jchv/go-winloader v0.0.0-20200815041850-dec1ee9a7fd5/go.mod h1:alcuEEnZsY1WQsagKhZDsoPCRoOijYqhZvPwLG0kzVs=
+github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e h1:Q3+PugElBCf4PFpxhErSzU3/PY5sFL5Z6rfv4AbGAck=
+github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e/go.mod h1:alcuEEnZsY1WQsagKhZDsoPCRoOijYqhZvPwLG0kzVs=
+github.com/josephspurrier/goversioninfo v1.4.0 h1:Puhl12NSHUSALHSuzYwPYQkqa2E1+7SrtAPJorKK0C8=
+github.com/josephspurrier/goversioninfo v1.4.0/go.mod h1:JWzv5rKQr+MmW+LvM412ToT/IkYDZjaclF2pKDss8IY=
+github.com/json-iterator/go v1.1.12 h1:PV8peI4a0ysnczrg+LtxykD8LfKY9ML6u2jnxaEnrnM=
+github.com/json-iterator/go v1.1.12/go.mod h1:e30LSqwooZae/UwlEbR2852Gd8hjQvJoHmT4TnhNGBo=
+github.com/klauspost/cpuid/v2 v2.0.9/go.mod h1:FInQzS24/EEf25PyTYn52gqo7WaD8xa0213Md/qVLRg=
+github.com/klauspost/cpuid/v2 v2.2.8 h1:+StwCXwm9PdpiEkPyzBXIy+M9KUb4ODm0Zarf1kS5BM=
+github.com/klauspost/cpuid/v2 v2.2.8/go.mod h1:Lcz8mBdAVJIBVzewtcLocK12l3Y+JytZYpaMropDUws=
+github.com/knz/go-libedit v1.10.1/go.mod h1:MZTVkCWyz0oBc7JOWP3wNAzd002ZbM/5hgShxwh4x8M=
+github.com/leodido/go-urn v1.4.0 h1:WT9HwE9SGECu3lg4d/dIA+jxlljEa1/ffXKmRjqdmIQ=
+github.com/leodido/go-urn v1.4.0/go.mod h1:bvxc+MVxLKB4z00jd1z+Dvzr47oO32F/QSNjSBOlFxI=
+github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
+github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
+github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
+github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd h1:TRLaZ9cD/w8PVh93nsPXa1VrQ6jlwL5oN8l14QlcNfg=
+github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
+github.com/modern-go/reflect2 v1.0.2 h1:xBagoLtFs94CBntxluKeaWgTMpvLxC4ur3nMaC9Gz0M=
+github.com/modern-go/reflect2 v1.0.2/go.mod h1:yWuevngMOJpCy52FWWMvUC8ws7m/LJsjYzDa0/r8luk=
+github.com/pelletier/go-toml/v2 v2.2.2 h1:aYUidT7k73Pcl9nb2gScu7NSrKCSHIDE89b3+6Wq+LM=
+github.com/pelletier/go-toml/v2 v2.2.2/go.mod h1:1t835xjRzz80PqgE6HHgN2JOsmgYu/h4qDAS4n929Rs=
+github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
+github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
+github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo=
+github.com/stretchr/objx v0.5.2/go.mod h1:FRsXN1f5AsAjCGJKqEizvkpNtU+EGNCLh3NxZ/8L+MA=
+github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
+github.com/stretchr/testify v1.6.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
+github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
+github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
+github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
+github.com/stretchr/testify v1.8.1/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
+github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
+github.com/stretchr/testify v1.9.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
+github.com/twitchyliquid64/golang-asm v0.15.1 h1:SU5vSMR7hnwNxj24w34ZyCi/FmDZTkS4MhqMhdFk5YI=
+github.com/twitchyliquid64/golang-asm v0.15.1/go.mod h1:a1lVb/DtPvCB8fslRZhAngC2+aY1QWCk3Cedj/Gdt08=
+github.com/ugorji/go/codec v1.2.12 h1:9LC83zGrHhuUA9l16C9AHXAqEV/2wBQ4nkvumAE65EE=
+github.com/ugorji/go/codec v1.2.12/go.mod h1:UNopzCgEMSXjBc6AOMqYvWC1ktqTAfzJZUZgYf6w6lg=
+github.com/webview/webview v0.0.0-20250319170551-f1f42f0f164e h1:Kz8a4/xfC3vH5sXgPfNfwu2qwwTUrD79N0bFRS6E4tI=
+github.com/webview/webview v0.0.0-20250319170551-f1f42f0f164e/go.mod h1:Zk81X+8/mp/MNoeJXXK4Noydn8pcea09e00dFfAwrxg=
+golang.org/x/arch v0.9.0 h1:ub9TgUInamJ8mrZIGlBG6/4TqWeMszd4N8lNorbrr6k=
+golang.org/x/arch v0.9.0/go.mod h1:FEVrYAQjsQXMVJ1nsMoVVXPZg6p2JE2mx8psSWTDQys=
+golang.org/x/crypto v0.26.0 h1:RrRspgV4mU+YwB4FYnuBoKsUapNIL5cohGAmSH3azsw=
+golang.org/x/crypto v0.26.0/go.mod h1:GY7jblb9wI+FOo5y8/S2oY4zWP07AkOJ4+jxCqdqn54=
+golang.org/x/net v0.28.0 h1:a9JDOJc5GMUJ0+UDqmLT86WiEy7iWyIhz8gz8E4e5hE=
+golang.org/x/net v0.28.0/go.mod h1:yqtgsTWOOnlGLG9GFRrK3++bGOUEkNBoHZc8MEDWPNg=
+golang.org/x/sys v0.0.0-20200810151505-1b9f1253b3ed/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20210218145245-beda7e5e158e/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.24.0 h1:Twjiwq9dn6R1fQcyiK+wQyHWfaz/BJB+YIpzU/Cv3Xg=
+golang.org/x/sys v0.24.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.31.0 h1:ioabZlmFYtWhL+TRYpcnNlLwhyxaM9kWTDEmfnprqik=
+golang.org/x/sys v0.31.0/go.mod h1:BJP2sWEmIv4KK5OTEluFJCKSidICx8ciO85XgH3Ak8k=
+golang.org/x/text v0.17.0 h1:XtiM5bkSOt+ewxlOE/aE/AKEHibwj/6gvWMl9Rsh0Qc=
+golang.org/x/text v0.17.0/go.mod h1:BuEKDfySbSR4drPmRPG/7iBdf8hvFMuRexcpahXilzY=
+google.golang.org/protobuf v1.34.2 h1:6xV6lTsCfpGD21XK49h7MhtcApnLqkfYgPcdHftf6hg=
+google.golang.org/protobuf v1.34.2/go.mod h1:qYOHts0dSfpeUzUFpOMr/WGzszTmLH+DiWniOlNbLDw=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
+gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+nullprogram.com/x/optparse v1.0.0/go.mod h1:KdyPE+Igbe0jQUrVfMqDMeJQIJZEuyV7pjYmp6pbG50=
+rsc.io/pdf v0.1.1/go.mod h1:n8OzWcQ6Sp37PL01nO98y4iUCRdTGarVfzxY20ICaU4=

src-server/main.go

@@ -0,0 +1,108 @@
+//go:generate goversioninfo -icon=./icon.ico
+package main
+
+import (
+	"embed"
+	"fmt"
+	"net"
+	"net/http"
+	"os"
+	"strings"
+
+	"github.com/gin-contrib/gzip"
+	"github.com/gin-gonic/gin"
+
+	"miao-directory/api"
+	"miao-directory/fsOperateEventCenter"
+)
+
+//go:embed all:web/*
+var webFS embed.FS
+
+var port = ":17705"
+
+func main() {
+	gin.SetMode(gin.ReleaseMode)
+
+	fsOperateEventCenter := fsOperateEventCenter.NewFsOperateEventCenter()
+
+	router := gin.Default()
+	router.Use(corsMiddleware())
+
+	router.GET("/query", api.QueryHandler(fsOperateEventCenter))
+	router.GET("/get/*path", api.GetHandler)
+	router.HEAD("/get/*path", api.GetHandler)
+	router.POST("/mkdir/*path", api.MkdirHandler)
+	router.POST("/upload/*path", api.UploadHandler)
+	router.POST("/cut/*path", api.CutHandler(fsOperateEventCenter))
+	router.POST("/copy/*path", api.CopyHandler(fsOperateEventCenter))
+	router.POST("/rename/*path", api.RenameHandler(fsOperateEventCenter))
+	router.POST("/delete/*path", api.DeleteHandler(fsOperateEventCenter))
+
+	// 添加获取所有可用地址的API
+	router.GET("/addresses", api.AddressesHandler(port))
+
+	// 添加map相关API
+	router.POST("/map/set/*key", api.MapSetHandler)
+	router.GET("/map/get/*key", api.MapGetHandler)
+	router.POST("/map/delete/*key", api.MapDeleteHandler)
+
+	// Redirect from '/' to '/web/'
+	router.GET("/", func(c *gin.Context) {
+		c.Redirect(http.StatusMovedPermanently, "/web/")
+	})
+
+	// Serve static files from the embedded filesystem with gzip compression
+	staticFS := http.FS(webFS)
+	staticGroup := router.Group("/web")
+	staticGroup.Use(gzip.Gzip(gzip.DefaultCompression))
+	staticGroup.GET("/*filepath", func(c *gin.Context) {
+		http.FileServer(staticFS).ServeHTTP(c.Writer, c.Request)
+	})
+
+	address := "[::]" + port
+	printListeningAddresses(port)
+
+	// 在非阻塞的goroutine中启动服务器
+	go func() {
+		if err := router.Run(address); err != nil {
+			fmt.Printf("服务器启动失败: %v\n", err)
+			os.Exit(1)
+		}
+	}()
+
+	// 如果启用了webview，则启动webview窗口
+	if useWebView {
+		startWebView(port)
+	} else {
+		// 如果不使用webview，则阻塞主线程，保持服务器运行
+		select {}
+	}
+}
+
+func corsMiddleware() gin.HandlerFunc {
+	return func(c *gin.Context) {
+		c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
+		c.Next()
+	}
+}
+
+func printListeningAddresses(port string) {
+	host, _ := os.Hostname()
+	addrs, _ := net.LookupHost(host)
+
+	fmt.Printf("Listening on:\n")
+	fmt.Printf("  ➜  Local:   http://localhost%s\n", port)
+	for _, addr := range addrs {
+		if strings.Contains(addr, "%") {
+			addr = strings.Split(addr, "%")[0]
+		}
+		if strings.Contains(addr, ":") {
+			// IPv6 address
+			fmt.Printf("  ➜  Network: http://[%s]%s\n", addr, port)
+		} else {
+			// IPv4 address
+			fmt.Printf("  ➜  Network: http://%s%s\n", addr, port)
+		}
+	}
+}

src-server/readme.md

@@ -0,0 +1,3 @@
+# miao-directory的后端部分
+* 原有的node后端不再维护。
+* ./web文件夹中的内容自己到main分支去打包一个出来

src-server/versioninfo.json

@@ -0,0 +1,3 @@
+{
+    "IconPath": "icon.ico"
+}

src-server/webview.go

@@ -0,0 +1,38 @@
+//go:build webview
+// +build webview
+
+package main
+
+import (
+	"fmt"
+
+	"github.com/jchv/go-webview2"
+)
+
+// 启动WebView窗口
+func startWebView(port string) {
+	// 构建本地服务URL
+	serverURL := fmt.Sprintf("http://localhost%s", port)
+
+	// 创建webview窗口
+	w := webview2.NewWithOptions(webview2.WebViewOptions{
+		Debug:     false,
+		AutoFocus: true,
+		WindowOptions: webview2.WindowOptions{
+			Title:  "MiaoDirectory Server",
+			Width:  1024,
+			Height: 768,
+			Center: true,
+		},
+	})
+	defer w.Destroy()
+
+	// 导航到本地服务器
+	w.Navigate(serverURL)
+
+	// 启动webview窗口
+	w.Run()
+}
+
+// 定义是否使用WebView的变量
+var useWebView = true

src-server/webview_no.go

@@ -0,0 +1,12 @@
+//go:build !webview
+// +build !webview
+
+package main
+
+// 定义是否使用WebView的变量
+var useWebView = false
+
+// 空函数，在非webview版本中不执行任何操作
+func startWebView(port string) {
+	// 在非webview版本中不做任何事情
+}

src/App.vue

@@ -1,64 +1,56 @@
 <script setup lang="ts">
-import { h, onMounted, provide, reactive, ref, shallowRef, useTemplateRef } from 'vue'
-import { NIcon, NScrollbar, NDropdown } from 'naive-ui'
 import {
-    EyeOffOutline,
-    EyeOutline,
-    CloseOutline,
-    CopyOutline,
-    EllipsisVertical,
-    QrCodeOutline
-} from '@vicons/ionicons5'
-import VirtualDirectory, { VirtualFile } from './class/VirtualDirectory'
+   computed,
+   onMounted,
+   provide,
+   ref,
+   shallowRef,
+   useTemplateRef
+} from 'vue'
+import { QrCodeOutline, ExtensionPuzzleOutline } from '@vicons/ionicons5'
+import type VirtualDirectory from './class/VirtualDirectory'
+import type { VirtualFile } from './class/VirtualDirectory'
 import MiaoMask from './components/miaoMask.vue'
 import MiaoMessageProvider from './components/miaoAlertTipProvider.vue'
-import config from './config'
+// import config from './config'
 import useVirtualPages from './hooks/useVirtualPages'
 import init from './hooks/init'
 import usePluginCenter from './hooks/usePluginCenter'
-import PluginCenter from './class/PluginCenter'
+import PluginCenter, { PluginGroup } from './class/PluginCenter'
+import { renderIcon } from './utils/miaoTools'
+import { DropdownMixedOption } from 'naive-ui/es/dropdown/src/interface'
+import useRootVDirectory from './hooks/useRootVDirectory'
+import ViewController from '@/components/APP/ViewController.vue'
+import ViewContainer from '@/components/APP/ViewContainer.vue'
+import ShareQrCodeCard from './components/APP/ShareQrCodeCard.vue'
 
-const { baseUrl } = config
+// const { baseUrl } = config
 
 const showModal = ref<boolean>(false)
-
+const viewRef = ref<HTMLDivElement>()
 const modalData = shallowRef<{
    component: any
    props: any
 }>()
-
 const messageProviderRef = useTemplateRef('messageProviderRef')
-
 const views = useVirtualPages()
-let pluginCenter: PluginCenter
+let pluginCenter = ref<PluginCenter>()
+const rootDirectory = useRootVDirectory()
 
-const rootDirectory = reactive(
-    new VirtualDirectory({
-        name: '根目录',
-        stats: {
-            atimeMs: 0,
-            birthtimeMs: 0,
-            ctimeMs: 0,
-            mtimeMs: 0
-        }
-    })
-)
 
 // component就是一个vue组件，类似于miaoDirectory
 const createView = (
    component: any,
+   name: string,
    currentDirectories?: VirtualDirectory[],
    currentFiles?: VirtualFile[],
    index?: number
 ) => {
-    views.push(component, currentDirectories, currentFiles, { index })
+   views.push(component, name, currentDirectories, currentFiles, { index })
 }
 
 const deleteView = (index: number) => {
    views.deleteView(index)
-    if (views.length === 0) {
-        pluginCenter.usePlugin('miaoDirectory', [rootDirectory], [])
-    }
 }
 
 // 点击标题是隐藏其他标签或显示其他标签，还挺好用的
@@ -77,354 +69,94 @@ const handleClickTitle = (index: number) => {
    }
 }
 
-// 顶部菜单相关
-function renderIcon(icon: any) {
-    return () => {
-        return h(NIcon, null, {
-            default: () => h(icon)
-        })
-    }
-}
-
-const openMenuOption = [
+const openMenuOption = computed(
+   () =>
+      [
          {
             label: '分享',
             key: 'share',
             icon: renderIcon(QrCodeOutline)
+         },
+         pluginCenter.value
+            ? {
+               label: '插件',
+               key: 'plugin',
+               children: [
+                  ...pluginCenter.value
+                     .getUsablePlugin([], [], {
+                        group: [PluginGroup.mainMenu]
+                     })
+                     .map((v) => ({
+                        label: `${v.name}`,
+                        key: `plugin:${v.key}`,
+                        icon: v.icon ? renderIcon(v.icon) : undefined
+                     }))
+               ],
+               icon: renderIcon(ExtensionPuzzleOutline)
             }
-]
+            : undefined
+      ].filter((v) => v) as DropdownMixedOption[]
+)
 
 const handleMenuSelect = async (key: string) => {
    if (key === 'share') {
+      // 立即显示模态框
       showModal.value = true
+
+      // 设置模态框数据，将serverAddressesService传递给组件
       modalData.value = {
-            component: (await import('naive-ui/es/qr-code')).NQrCode,
-            props: {
-                value: baseUrl,
-                size: 300,
-                errorCorrectionLevel: 'H'
-            }
+         component: ShareQrCodeCard,
+         props: {}
+      }
+   } else if (key.startsWith('plugin:')) {
+      const pluginName = key.split(':')[1]
+      pluginCenter.value && pluginCenter.value.usePlugin(pluginName, [], [])
    }
 }
+
+const handleModalClose = () => {
+   showModal.value = false
+   nextTick(() => {
+      modalData.value = undefined
+   })
 }
 
 onMounted(async () => {
    // @ts-ignore
    await init(messageProviderRef.value?.alertTip)
-    pluginCenter = usePluginCenter()
-    pluginCenter.usePlugin('miaoDirectory', [rootDirectory], [])
+   pluginCenter.value = usePluginCenter()
 })
 
 // @ts-ignore
 provide('globalAlertTip', messageProviderRef.value?.alertTip)
+provide('rootDirectory', rootDirectory)
 </script>
 
 <template>
-    <div class="view">
+   <div class="view" ref="viewRef">
       <miao-message-provider ref="messageProviderRef">
-        <div class="view-controller">
-            <n-scrollbar x-scrollable>
-                <div class="tabs-container">
-                    <transition-group name="tab">
-                        <div
-                            class="tab"
-                            v-for="(view, index) of views._views"
-                            :key="view.id">
-                            <span
-                                class="tab-title"
-                                :title="view.title"
-                                @click="handleClickTitle(index)">
-                                {{
-                                    view.title.length > 5 && 0
-                                        ? `${view.title.substring(0, 5)}...`
-                                        : view.title
-                                }}
-                            </span>
-                            <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.currentDirectories,
-                                            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>
-        </div>
-        <div class="view-container">
-            <transition-group name="page">
-                <div
-                    class="view-container-item"
-                    v-for="(view, index) of views._views"
-                    v-show="view.visible"
-                    :key="view.id">
-                    <component
-                        :is="view.component"
-                        v-model:current-directories="view.currentDirectories"
-                        v-model:current-files="view.currentFiles"
-                        :id="view.id"
-                        :color="view.color"
-                        :view="view"
-                        :views="views"
-                        @exit="deleteView(index)"></component>
-                </div>
-            </transition-group>
-        </div>
+         <ViewController :views="views" :handleClickTitle="handleClickTitle" :createView="createView"
+            :deleteView="deleteView" :openMenuOption="openMenuOption" :handleMenuSelect="handleMenuSelect" />
+         <ViewContainer :views="views" :deleteView="deleteView" :handleClickTitle="handleClickTitle" />
       </miao-message-provider>
    </div>
    <!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
-    <MiaoMask v-model:show="showModal" @click="showModal = false">
-        <component
-            @click="(e: any) => e.stopPropagation()"
-            :is="modalData?.component"
-            v-bind="modalData?.props"></component>
+   <MiaoMask v-model:show="showModal" @click="handleModalClose">
+      <component @click="(e: any) => e.stopPropagation()" :is="modalData?.component" v-bind="modalData?.props">
+      </component>
    </MiaoMask>
 </template>
 
 <style lang="scss" scoped>
+@use "styles/default.scss";
+
 $controller-height: 25px;
 $tag-width: 170px;
 
 .view {
+   background-color: #ffffff;
    position: relative;
    height: 100%;
    width: 100%;
-
-    .view-controller {
-        display: flex;
-        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);
-            }
-        }
-    }
-
-    .view-container {
-        position: relative;
-        display: flex;
-        // flex-direction: column;
-        height: calc(100% - $controller-height);
-        overflow-y: hidden;
-        overflow-x: overlay;
-
-        .view-container-item {
-            flex: 1;
-            height: 100%;
-            min-width: 180px;
-        }
-
-        &::-webkit-scrollbar {
-            position: absolute;
-            width: 4px;
-        }
-
-        // 滚动条轨道
-        &::-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-controller {
-        .tabs-container {
-            .tab-move,
-            .tab-enter-active {
-                transition: all 0.2s ease;
-            }
-
-            .tab-leave-active {
-                opacity: 0;
-                transition: none;
-            }
-
-            .tab-enter-from {
-                opacity: 0;
-                transform: translateY(-30px);
-            }
-
-            // .tab-leave-to {
-            //   opacity: 0;
-            //   transform: translateY(-80px) translateX(calc($tag-width + 10px));
-            // }
-
-            .tab-leave-active {
-                position: absolute;
-            }
-        }
-    }
-
-    // .view-container {
-    //     .page-move {
-    //       transition: all 0.2s ease;
-    //     }
-
-    //     .page-enter-active {
-
-    //     }
-
-    //     .page-leave-active {
-    //       transition: none;
-    //     }
-
-    //     .page-enter-from {
-    //       opacity: 0;
-    //     }
-
-    //     .page-leave-active {
-    //       position: absolute;
-    //     }
-    // }
 }
 </style>

src/class/PluginCenter.ts

@@ -1,112 +1,195 @@
-import useVirtualPages from "@/hooks/useVirtualPages";
-import VirtualDirectory, { VirtualFile } from "./VirtualDirectory";
-import { ShallowRef, shallowRef } from "vue";
-import { alertTipType } from "@/types/type";
+import useVirtualPages from '@/hooks/useVirtualPages'
+import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
+import { ShallowRef, shallowRef } from 'vue'
+import { alertTipType, usePluginHooksType } from '@/types/type'
+import VirtualPage, { VirtualPages } from './VirtualPage'
+import useRootVDirectory from '@/hooks/useRootVDirectory'
 
 export enum PluginGroup {
-	default = "default",
-	mainMenu = "mainMenu"
+   default = 'default',
+   mainMenu = 'mainMenu',
+   // 导入的时候会立即执行函数一次
+   immediately = 'immediately'
 }
 
 export interface registerComponentOption {
-	key: string;
-	name: string;
-	icon?: any;
-	getComponent: () => Promise<any>;
-	group?: PluginGroup[];
-	filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean;
-	disable?: boolean;
-	exitConfirm?: boolean;
+   key: string
+   name: string
+   icon?: any
+   getComponent: () => Promise<any>
+   group?: PluginGroup[]
+   filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
+   disable?: boolean
+   exitConfirm?: boolean
+   // 若为true，则只会创建一个页面，当存在已创建页面则会直接将VFile和VDir加到curr里面
+   single?: boolean
+   priority?: number
 }
 
-type Plugin = {
+export type Plugin = {
    // 用于显示的名字
-	name: string;
+   name: string
    // 代表插件的icon
-	icon?: ShallowRef<any>;
+   icon?: ShallowRef<any>
    // 是否禁用插件
-	disable: boolean;
+   disable: boolean
    // 插件所属的group，用于区分插件使用的场合
-	group: PluginGroup[];
+   group: PluginGroup[]
+   // 插件优先级
+   priority: number
    // 判断在未禁用时是否可以使用这个组件
    // 使用组件即调用下面的func
-	filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean;
-	func: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[], ...args: any[]) => void;
-};
+   filter: (
+      VDirectories: VirtualDirectory[],
+      VFiles: VirtualFile[],
+      VPages: VirtualPages
+   ) => boolean
+   func: (
+      VDirectories: VirtualDirectory[],
+      VFiles: VirtualFile[],
+      hooks: usePluginHooksType,
+      ...args: any[]
+   ) => void
+}
 
 export default class PluginCenter {
    constructor(globalAlertTip: alertTipType) {
-		this.pluginsMap = {};
-		this.globalAlertTip = globalAlertTip;
+      this.pluginsMap = {}
+      this.globalAlertTip = globalAlertTip
    }
    pluginsMap: {
-		[key: string]: Plugin;
-	};
+      [key: string]: Plugin
+   }
 
-	globalAlertTip: alertTipType;
+   globalAlertTip: alertTipType
 
    register(key: string, plugin: Plugin) {
-		this.pluginsMap[key] = plugin;
+      this.pluginsMap[key] = plugin
+      if (plugin.group.includes(PluginGroup.immediately)) {
+         this.usePlugin(key, [], [], this.usePluginHook)
+      }
+   }
+
+   deregister(key: string) {
+      delete this.pluginsMap[key]
    }
 
    /**
-	 * 便捷地注册一个组件为插件，触发时直接用新页面打开
+    * 便捷地注册一个组件为插件，触发时直接用新页面打开，页面名为key
     */
    registerComponent(option: registerComponentOption): void {
-		const { key, name, getComponent, icon, filter, group = [PluginGroup.default], disable = false, exitConfirm = false } = option;
-		let _component: any;
-		const views = useVirtualPages();
+      const {
+         key,
+         name,
+         getComponent,
+         icon,
+         filter,
+         group = [PluginGroup.default],
+         disable = false,
+         exitConfirm = false,
+         single = false,
+         priority = 0
+      } = option
+      let _component: any
+      const views = useVirtualPages()
       this.register(key, {
          name,
          filter,
          icon: shallowRef(icon),
          group,
          disable,
-			func: async (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => {
+         priority,
+         func: async (
+            VDirectories: VirtualDirectory[],
+            VFiles: VirtualFile[]
+         ) => {
             if (filter(VDirectories, VFiles) === false) {
-					return;
+               return
             }
 
             if (_component === undefined) {
-					const setAlertTip = key !== "miaoDirectory" && this.globalAlertTip(`加载 ${name} 插件中`);
-					_component = await getComponent();
+               const setAlertTip = this.globalAlertTip(`加载 ${name} 插件中`)
+               _component = await getComponent()
                setAlertTip &&
                   setAlertTip(`加载 ${name} 插件完成`, {
-							type: "success",
+                     type: 'success',
                      timeout: 2000
-						});
+                  })
             }
-				views.push(_component, VDirectories, VFiles, {
+            const _findRes = views.find(_component) as VirtualPage[]
+            if (single && _findRes.length !== 0) {
+               const view = _findRes[0]
+               view.currentFiles = [...view.currentFiles, ...VFiles]
+               view.currentDirectories = [
+                  ...view.currentDirectories,
+                  ...VDirectories
+               ]
+            } else {
+               views.push(_component, key, VDirectories, VFiles, {
                   VirtualPageOption: {
-						exitConfirm
+                     exitConfirm,
+                     allowCopy: single === false
                   }
-				});
+               })
             }
-		});
+         }
+      })
    }
 
    getUsablePlugin(
       VDirectories: VirtualDirectory[],
       VFiles: VirtualFile[],
       option?: {
-			group?: PluginGroup[];
+         group?: PluginGroup[]
       }
    ) {
-		const { group = [PluginGroup.default] } = option ?? {};
-		const usableList = [];
+      const { group = [PluginGroup.default] } = option ?? {}
+      const usableList = []
+      const views = useVirtualPages()
       for (let key of Object.keys(this.pluginsMap)) {
-			const _plugin = this.pluginsMap[key];
-			if (!_plugin.disable && _plugin.group.filter(v => group.includes(v)).length > 0 && _plugin.filter(VDirectories, VFiles)) {
-				usableList.push(key);
+         const _plugin = this.pluginsMap[key]
+         if (
+            !_plugin.disable &&
+            _plugin.group.filter((v) => group.includes(v)).length > 0 &&
+            _plugin.filter(VDirectories, VFiles, views)
+         ) {
+            usableList.push(key)
          }
       }
-		return usableList.map(key => ({
+      const res = usableList.map((key) => ({
          key,
          ...this.pluginsMap[key]
-		}));
+      }))
+      res.sort((a, b) => b.priority - a.priority)
+      return res
    }
 
-	usePlugin(key: string, VDirectories?: VirtualDirectory[], VFiles?: VirtualFile[], ...args: any[]) {
-		this.pluginsMap[key].func(VDirectories ?? [], VFiles ?? [], ...args);
+   get usePluginHook(): usePluginHooksType {
+      return {
+         globalAlertTip: this.globalAlertTip,
+         getViews: useVirtualPages,
+         getPluginCenter: () => this,
+         getRootVDirectory: () => useRootVDirectory()
+      }
+   }
+
+   // usePlugin(
+   //    key: string,
+   //    VDirectories?: VirtualDirectory[],
+   //    VFiles?: VirtualFile[],
+   //    ...args: any[]
+   // ): void
+   usePlugin(
+      key: string,
+      VDirectories?: VirtualDirectory[],
+      VFiles?: VirtualFile[],
+      ...args: any[]
+   ) {
+      this.pluginsMap[key].func(
+         VDirectories ?? [],
+         VFiles ?? [],
+         this.usePluginHook,
+         ...args
+      )
    }
 }

src/class/UploadQueue.ts

@@ -1,98 +1,102 @@
-import generateId from "@/hooks/generateId";
-import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
-import VirtualDirectory from "./VirtualDirectory";
+import generateId from '@/utils/generateId'
+import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
+import VirtualDirectory from './VirtualDirectory'
 
-const miaoFetchApi = useMiaoFetchApi();
+const miaoFetchApi = useMiaoFetchApi()
 
 export class UploadQueueItem {
    constructor(
       file: File,
       targetDirectory: VirtualDirectory,
       config?: {
-			onSuccess?: () => void;
-			onFailed?: () => void;
+         onSuccess?: () => void
+         onFailed?: () => void
       }
    ) {
-		this.file = file;
-		this.targetDirectory = targetDirectory;
-		this.uid = generateId();
-		this.status = "waiting";
-		this.process = 0;
-		this.onSuccess = config && config.onSuccess;
-		this.onFailed = config && config.onFailed;
+      this.file = file
+      this.targetDirectory = targetDirectory
+      this.uid = generateId()
+      this.status = 'waiting'
+      this.process = 0
+      this.onSuccess = config && config.onSuccess
+      this.onFailed = config && config.onFailed
    }
-	uid: number;
-	file: File;
-	targetDirectory: VirtualDirectory;
-	status: "waiting" | "uploading" | "success" | "failed";
-	process: number;
-	failedReason: unknown | undefined;
+   uid: number
+   file: File
+   targetDirectory: VirtualDirectory
+   status: 'waiting' | 'uploading' | 'success' | 'failed'
+   process: number
+   failedReason: unknown | undefined
 
-	onSuccess?: () => void;
-	onFailed?: () => void;
+   onSuccess?: () => void
+   onFailed?: () => void
 
-	_abort: (() => void | undefined) | undefined;
-	_status: Promise<any> | undefined;
+   _abort: (() => void | undefined) | undefined
+   _status: Promise<any> | undefined
 
    /**
     * 开始上传文件
     */
    startUpload() {
-		if (this.status === "uploading") {
-			return;
+      if (this.status === 'uploading') {
+         return
       }
-		const { abort, response } = miaoFetchApi.upload(this.file, this.targetDirectory, {
-			onProcess: percent => {
-				this.process = percent;
+      const { abort, response } = miaoFetchApi.upload(
+         this.file,
+         this.targetDirectory,
+         {
+            onProcess: (percent) => {
+               this.process = percent
             }
-		});
-		this._abort = abort;
-		this._status = response;
-		this.status = "uploading";
+         }
+      )
+      this._abort = abort
+      this._status = response
+      this.status = 'uploading'
       response
          .then(() => {
-				this.status = "success";
-				this.onSuccess && this.onSuccess();
-				this._abort = undefined;
-				this._status = undefined;
+            this.status = 'success'
+            this.onSuccess && this.onSuccess()
+            this._abort = undefined
+            this._status = undefined
+         })
+         .catch((e) => {
+            this.status = 'failed'
+            this.failedReason = e
+            this.onFailed && this.onFailed()
          })
-			.catch(e => {
-				this.status = "failed";
-				this.failedReason = e;
-				this.onFailed && this.onFailed();
-			});
    }
 
    /**
     * 终止上传文件
     */
    abortUpload() {
-		this._abort && this._abort();
-		this.status = "failed";
-		this.failedReason = "abort";
+      this._abort && this._abort()
+      this.status = 'failed'
+      this.failedReason = 'abort'
    }
 }
 
 export default class UploadQueue {
    constructor() {
-		this.uid = generateId();
-		this.queue = [];
-		this.mode = "serial";
+      this.uid = generateId()
+      this.queue = []
+      this.mode = 'serial'
    }
-	uid: number;
-	queue: UploadQueueItem[];
-	current: UploadQueueItem | undefined;
+   uid: number
+   queue: UploadQueueItem[]
+   current: UploadQueueItem | undefined
 
    // 未来再去实现，目前就是串行的
    // 好像也不用去实现
-	mode: "serial" | "parallel";
+   mode: 'serial' | 'parallel'
    get status() {
       for (let item of this.queue) {
-			if (item.status === "uploading") {
-				return "busy";
+         if (item.status === 'uploading') {
+            return 'busy'
          }
       }
-		return "free";
+      return 'free'
    }
 
    /**
@@ -100,8 +104,8 @@ export default class UploadQueue {
     */
    get nextUplpadItem() {
       for (let item of this.queue) {
-			if (item.status === "waiting") {
-				return item;
+         if (item.status === 'waiting') {
+            return item
          }
       }
    }
@@ -110,11 +114,11 @@ export default class UploadQueue {
     * 开始串行的上传循环
     */
    loop() {
-		if (this.status === "busy") {
-			return;
+      if (this.status === 'busy') {
+         return
       }
       if (this.nextUplpadItem) {
-			this.nextUplpadItem.startUpload();
+         this.nextUplpadItem.startUpload()
       }
    }
 
@@ -132,34 +136,34 @@ export default class UploadQueue {
          /**
           * 每个文件上传完成以后都会触发一遍的回调函数
           */
-			onFinish?: () => void;
+         onFinish?: () => void
          /**
           * 是否立即开始上传，若否则按队列顺序一个一个上传
           */
-			immediately?: boolean;
+         immediately?: boolean
       }
    ) {
-		const onFinish = option?.onFinish;
-		const immediately = option?.immediately ?? false;
-		const uploadQueue = files.map(file => {
+      const onFinish = option?.onFinish
+      const immediately = option?.immediately ?? false
+      const uploadQueue = files.map((file) => {
          return new UploadQueueItem(file, targetDirectory, {
             onSuccess: () => {
-					this.loop();
-					onFinish && onFinish();
+               this.loop()
+               onFinish && onFinish()
             },
             onFailed: () => {
-					this.loop();
+               this.loop()
             }
-			});
-		});
-		this.queue.push(...uploadQueue);
+         })
+      })
+      this.queue.push(...uploadQueue)
       if (!immediately) {
-			this.loop();
+         this.loop()
       } else {
-			uploadQueue.forEach(item => {
-				item.startUpload();
-			});
+         uploadQueue.forEach((item) => {
+            item.startUpload()
+         })
       }
-		return uploadQueue;
+      return uploadQueue
    }
 }

src/class/VirtualDirectory.ts

@@ -1,57 +1,103 @@
-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";
+import generateId from '@/utils/generateId'
+import type { stats, file, directory } from '@/types/type.ts'
 
-const miaoFetchApi = useMiaoFetchApi();
 
-export class VirtualFile {
-	constructor(info: file, parent: VirtualDirectory) {
-		this.name = info.name;
-		this.size = info.size;
-		this.stats = info.stats;
-		this.parent = parent;
-		this.type = "file";
-		this.id = generateId();
+// const vDirectoryMap = new Map<string, VirtualDirectory>()
+// const vFileMap = new Map<string, VirtualFile>()
+
+export interface Tree {
+   name: string
+   type: 'directory'
+   path: string
+   stats: stats
+   files: {
+      name: string
+      type: 'file'
+      size: number
+      stats: stats
+      url: string
+   }[]
+   directories: Tree[]
 }
-	name: string;
-	type: "file";
-	size: number;
-	stats: stats;
-	parent: VirtualDirectory;
-	id: number;
+
+export abstract class VirtualFileBase {
+   name: string
+   type: 'file' = 'file'
+   size: number
+   stats: stats
+   parent: VirtualDirectoryBase
+   id: number
+   storage: { [key: string]: any } = {}
+
+   constructor(name: string, size: number, stats: stats, parent: VirtualDirectoryBase) {
+      this.name = name
+      this.size = size
+      this.stats = stats
+      this.parent = parent
+      this.id = generateId()
+   }
+
    get path() {
-		return `${this.parent.path}${this.name}`;
+      return `${this.parent.path}${this.name}`
    }
 
-	get url() {
-		return `${config.api.get}${this.parent.path}${this.name}`
-	}
+   abstract get url(): string;
+   
+   /**
+    * 删除文件
+    * @returns {Promise<boolean>} 删除是否成功
+    */
+   abstract delete(): Promise<boolean>;
+   
+   /**
+    * 重命名文件
+    * @param {string} newName 新文件名
+    * @returns {Promise<boolean>} 重命名是否成功
+    */
+   abstract rename(newName: string): Promise<boolean>;
+   
+   /**
+    * 移动文件到目标目录
+    * @param {VirtualDirectoryBase} targetDir 目标目录
+    * @returns {Promise<boolean>} 移动是否成功
+    */
+   abstract moveTo(targetDir: VirtualDirectoryBase): Promise<boolean>;
+   
+   /**
+    * 复制文件到目标目录
+    * @param {VirtualDirectoryBase} targetDir 目标目录
+    * @returns {Promise<boolean>} 复制是否成功
+    */
+   abstract copyTo(targetDir: VirtualDirectoryBase): Promise<boolean>;
 }
 
-class VirtualDirectory {
-	constructor(info: directory, parent?: VirtualDirectory) {
-		this.name = info.name;
-		this.type = "directory";
-		this.stats = info.stats;
-		this.parent = parent ?? undefined;
-		this.id = generateId();
-	}
+export abstract class VirtualDirectoryBase {
    // 文件夹名
-	name: string;
+   name: string
    // 子文件
-	files?: VirtualFile[];
+   files: VirtualFileBase[] = []
    // 子目录
-	directories?: VirtualDirectory[];
+   directories: VirtualDirectoryBase[] = []
    // 没啥意义，标注一下就是了
-	type: "directory";
+   type: 'directory' = 'directory'
    // 文件夹创建时间等杂项属性
-	stats: stats;
+   stats: stats
    // 父文件夹
-	parent?: VirtualDirectory;
+   parent?: VirtualDirectoryBase
 
-	id: number;
+   _isUpdated: boolean = false
+
+   id: number
+
+   // 用来存储一些标记信息啥的
+   storage: { [key: string]: any } = {}
+
+   constructor(name: string, stats: stats, parent?: VirtualDirectoryBase) {
+      this.name = name
+      this.stats = stats
+      this.parent = parent
+      this.id = generateId()
+   }
 
    /**
     * 获取相对于根目录的路径的层数
@@ -59,8 +105,9 @@ class VirtualDirectory {
     * @returns {string}
     */
    get layer(): number {
-		return this.parent ? this.parent.layer + 1 : 0;
+      return this.parent ? this.parent.layer + 1 : 0
    }
+   
    /**
     * 相对于根目录的路径， 如: "/",  "/123/321/"
     * 用于目录下文件定位
@@ -68,82 +115,101 @@ class VirtualDirectory {
     */
    get path(): string {
       if (!this.parent) {
-			return "/";
+         return '/'
       }
-		return `${this.parent.path}${this.name}/`;
+      return `${this.parent.path}${this.name}/`
    }
 
+   abstract get url(): string;
+
    /**
     * 获取从根目录开始的按顺序的文件夹
-	 * @returns {VirtualDirectory[]}
+    * @returns {VirtualDirectoryBase[]}
     */
-	get getParents(): VirtualDirectory[] {
+   get getParents(): VirtualDirectoryBase[] {
       if (!this.parent) {
-			return [this];
+         return [this]
       }
-		return [...this.parent.getParents, this];
+      return [...this.parent.getParents, this]
+   }
+
+   /**
+    * 获取当前文件夹是否已经请求过至少一次数据
+    */
+   get isUpdated() {
+      return this._isUpdated
    }
 
    /**
     * 获取 layer 级父文件夹, 如getParent(1)就返回父级
     * @param {number} layer 需要跳转的层数
-	 * @returns {VirtualDirectory}
+    * @returns {VirtualDirectoryBase}
     */
-	getParent(layer: number): VirtualDirectory {
+   getParent(layer: number): VirtualDirectoryBase {
       if (layer <= 0 || !this.parent) {
-			return this;
+         return this
       }
-		return this.parent.getParent(layer - 1);
+      return this.parent.getParent(layer - 1)
    }
 
-	updateContent(content: (file | directory)[]) {
-		this.files = this.files ?? [];
-		this.directories = this.directories ?? [];
-		const fileNames: string[] = this.files.map(v => v.name);
-		const dirNames: string[] = this.directories.map(v => v.name);
-		const itemNames: string[] = content.map(v => v.name);
-		// 删去远程端已不存在的文件与文件夹
-		const _delete = (target: (VirtualFile | VirtualDirectory)[]) => {
-			let index = 0;
-			while (index < target.length) {
-				if (!itemNames.includes(target[index].name)) {
-					target.splice(index, 1);
-				} else {
-					index += 1;
-				}
-			}
-		};
-		_delete(this.files);
-		_delete(this.directories);
-		// 加入新的文件与文件夹
-		for (let item of content) {
-			if (item.type === "file") {
-				if (!fileNames.includes(item.name)) {
-					this.files.push(new VirtualFile(item, this));
-				}
-			} else if (item.type === "directory") {
-				if (!dirNames.includes(item.name)) {
-					this.directories.push(new VirtualDirectory(item, this));
-				}
-			}
+   get tree(): Tree {
+      return {
+         name: this.name,
+         type: this.type,
+         path: this.path,
+         stats: this.stats,
+         files:
+            this.files?.map((v) => ({
+               name: v.name,
+               type: v.type,
+               size: v.size,
+               stats: v.stats,
+               url: v.url
+            })) ?? [],
+         directories: this.directories?.map((v) => v.tree) ?? []
       }
    }
 
-	hasChild(item: VirtualDirectory | VirtualFile): boolean {
-		if (item.type === "directory") {
-			return this.directories?.includes(item) ?? false;
+   hasChild(item: VirtualDirectoryBase | VirtualFileBase): boolean {
+      if (item.type === 'directory') {
+         return this.directories?.includes(item as VirtualDirectoryBase) ?? false
       } else {
-			return this.files?.includes(item) ?? false;
+         return this.files?.includes(item as VirtualFileBase) ?? false
       }
    }
 
+   abstract updateContent(content: (file | directory)[]): void;
+   abstract update(): Promise<void>;
+   
    /**
-	 * 调用后重新向远端拉取文件夹信息并进行更新
-	 * @returns {void}
+    * 删除目录
+    * @returns {Promise<boolean>} 删除是否成功
     */
-	async update(): Promise<void> {
-		const data: (file | directory)[] = await miaoFetchApi.get(this);
-		this.updateContent(data);
+   abstract delete(): Promise<boolean>;
+   
+   /**
+    * 重命名目录
+    * @param {string} newName 新目录名
+    * @returns {Promise<boolean>} 重命名是否成功
+    */
+   abstract rename(newName: string): Promise<boolean>;
+   
+   /**
+    * 移动目录到目标目录
+    * @param {VirtualDirectoryBase} targetDir 目标目录
+    * @returns {Promise<boolean>} 移动是否成功
+    */
+   abstract mv(targetDir: VirtualDirectoryBase): Promise<boolean>;
+   
+   /**
+    * 复制目录到目标目录
+    * @param {VirtualDirectoryBase} targetDir 目标目录
+    * @returns {Promise<boolean>} 复制是否成功
+    */
+   abstract copy(targetDir: VirtualDirectoryBase): Promise<boolean>;
 }
-}
-export default VirtualDirectory;
+
+export abstract class VirtualFile extends VirtualFileBase {}
+export abstract class VirtualDirectory extends VirtualDirectoryBase {}
+
+export default VirtualDirectory

src/class/VirtualPage.ts

@@ -1,9 +1,10 @@
-import { reactive, shallowRef } from 'vue'
+import { Component, reactive, shallowRef } from 'vue'
 import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
-import generateId from '@/hooks/generateId'
+import generateId from '@/utils/generateId'
 
 export interface VirtualPageOption {
    exitConfirm?: boolean
+   allowCopy?: boolean
 }
 
 export interface ViewsPushOption {
@@ -12,13 +13,7 @@ export interface ViewsPushOption {
 }
 
 const getRandomWebSafeColor = (() => {
-    const webSafeColors = [
-        '#009900',
-        '#999900',
-        '#009999',
-        '#990099',
-        '#0000ee'
-    ]
+   const webSafeColors = ['#009900', '#999900', '#009999', '#990099', '#0000ee']
    let counter = 0
    return () => {
       const color = webSafeColors[counter % webSafeColors.length]
@@ -29,13 +24,15 @@ const getRandomWebSafeColor = (() => {
 
 export default class VirtualPage {
    constructor(
-        component: any,
-        initObjects?: {
+      component: Component,
+      initObjects: {
+         name: string
          directories?: VirtualDirectory[]
          files?: VirtualFile[]
          option?: VirtualPageOption
       }
    ) {
+      this.name = initObjects?.name
       this.component = shallowRef(component)
       this.currentDirectories = initObjects?.directories ?? []
       this.currentFiles = initObjects?.files ?? []
@@ -44,15 +41,21 @@ export default class VirtualPage {
       this.refreshKey = Math.random()
       this.color = getRandomWebSafeColor()
       this.exitConfirm = initObjects?.option?.exitConfirm ?? false
+      this.allowCopy = initObjects?.option?.allowCopy ?? true
+      this.pageStorage = {}
    }
    // 页面使用的组件
-    component: any
+   component: Component
+   // 页面名
+   name: string
    // 是否可见
    visible: boolean
    // 当前正在使用的文件夹
    currentDirectories: VirtualDirectory[]
    // 当前正在使用的文件
    currentFiles: VirtualFile[]
+   // 页面数据存储
+   pageStorage: { [key: string]: any }
    // 区分每一个页面的唯一id
    id: number
    // 当refreshKey改变时需要刷新页面，目前还没接入刷新
@@ -61,8 +64,10 @@ export default class VirtualPage {
    color: string
    // 用于展示的title
    _title?: string
-    // 关闭时是否需要确认
+   // 关闭时是否需要确认（未实现）
    exitConfirm: boolean
+   // 是否允许复制页面
+   allowCopy: boolean
 
    get title() {
       if (this._title) {
@@ -131,7 +136,8 @@ export class VirtualPages {
     * 推入一个新的页面
     */
    push(
-        component: any,
+      component: Component,
+      name: string,
       currentDirectories?: VirtualDirectory[],
       currentFiles?: VirtualFile[],
       option?: ViewsPushOption
@@ -142,6 +148,7 @@ export class VirtualPages {
          0,
          reactive<VirtualPage>(
             new VirtualPage(component, {
+               name,
                directories: [...(currentDirectories ?? [])],
                files: [...(currentFiles ?? [])],
                option: VirtualPageOption
@@ -155,4 +162,22 @@ export class VirtualPages {
    deleteView(index: number) {
       this._views.splice(index, 1)
    }
+
+   /**
+    * 返回第一个使用此组件的页面
+    */
+   find(component: Component): VirtualPage[]
+   /**
+    * 通过页面名查找
+    */
+   find(name: string): VirtualPage[]
+
+   find(input: unknown) {
+      // console.log(this)
+      if (typeof input === 'string') {
+         return this._views.filter((v) => v.component.name === input)
+      } else {
+         return this._views.filter((v) => v.component === input)
+      }
+   }
 }

src/class/VirtualRemoteDirectory.ts

@@ -0,0 +1,339 @@
+import { file, directory } from "@/types/type";
+import { VirtualFileBase, VirtualDirectoryBase } from "./VirtualDirectory";
+import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
+import config from '@/config'
+
+const miaoFetchApi = useMiaoFetchApi()
+
+/**
+ * 轮询事件直到完成
+ * @param eventId 事件ID
+ * @param maxRetries 最大重试次数
+ * @param interval 轮询间隔(毫秒)
+ * @returns 事件结果
+ */
+async function pollEventUntilComplete(eventId: number, maxRetries = 100, interval = 300) {
+    let _count = 0;
+    while (_count < maxRetries) {
+        try {
+            const { response } = miaoFetchApi.query(eventId);
+            const result = await response;
+            if (result.status === 'success' || result.status === 'failed') {
+                return result;
+            }
+            _count++;
+            await new Promise(_ => setTimeout(_, interval));
+        } catch (error) {
+            throw error;
+        }
+    }
+    throw new Error('poll timeout');
+}
+
+export class VirtualRemoteFile extends VirtualFileBase {
+    constructor(info: file, parent: VirtualDirectoryBase) {
+        super(info.name, info.size, info.stats, parent)
+    }
+
+    get url() {
+        return `${config.api.get}${this.parent.path}${this.name}`
+    }
+
+    async delete(): Promise<boolean> {
+        try {
+            const { response } = miaoFetchApi.delete(this, {
+                retry: 5
+            });
+            const id = (await response).eventId;
+            
+            const eventResult = await pollEventUntilComplete(id);
+            
+            if (eventResult.status === 'success' && this.parent) {
+                await this.parent.update(); // 操作成功后更新父目录
+            }
+            
+            return eventResult.status === 'success';
+        } catch (error) {
+            console.error('删除文件失败:', error);
+            return false;
+        }
+    }
+
+    async rename(newName: string): Promise<boolean> {
+        if (!newName) {
+            return false;
+        }
+
+        try {
+            const { response } = miaoFetchApi.rename(this, newName, {
+                retry: 5
+            });
+            const id = (await response).eventId;
+            
+            const eventResult = await pollEventUntilComplete(id);
+            
+            if (eventResult.status === 'success' && this.parent) {
+                await this.parent.update(); // 操作成功后更新父目录
+            }
+            
+            return eventResult.status === 'success';
+        } catch (error) {
+            console.error('重命名文件失败:', error);
+            return false;
+        }
+    }
+
+    async moveTo(targetDir: VirtualDirectoryBase): Promise<boolean> {
+        if (this.parent === targetDir) {
+            return false; // 已经在目标目录中
+        }
+
+        try {
+            const _from = this.parent;
+            const { response } = miaoFetchApi.cut(this, targetDir);
+            const id = (await response).eventId;
+            
+            const eventResult = await pollEventUntilComplete(id);
+            const success = eventResult.status === 'success';
+
+            if (success) {
+                if (_from) await _from.update(); // 更新源目录
+                await targetDir.update(); // 更新目标目录
+            }
+
+            return success;
+        } catch (error) {
+            console.error('移动文件失败:', error);
+            return false;
+        }
+    }
+
+    async copyTo(targetDir: VirtualDirectoryBase): Promise<boolean> {
+        // 检查目标目录是否已存在同名文件
+        const existingFile = targetDir.files.find(file => file.name === this.name);
+        if (existingFile) {
+            // 存在同名文件，拒绝操作并显示提示
+            console.error(`目标目录已存在同名文件: ${this.name}`);
+            alert(`复制失败：目标目录已存在同名文件"${this.name}"`);
+            return false;
+        }
+
+        try {
+            const { response } = miaoFetchApi.copy(this, targetDir);
+            const id = (await response).eventId;
+            
+            const eventResult = await pollEventUntilComplete(id);
+            const success = eventResult.status === 'success';
+
+            if (success) {
+                await targetDir.update(); // 更新目标目录
+            }
+
+            return success;
+        } catch (error) {
+            console.error('复制文件失败:', error);
+            return false;
+        }
+    }
+}
+
+export class VirtualRemoteDirectory extends VirtualDirectoryBase {
+    constructor(info: directory, parent?: VirtualDirectoryBase) {
+        super(info.name, info.stats, parent)
+    }
+
+    get url(): string {
+        return `${config.api.get}${this.path}`
+    }
+
+    updateContent(content: (file | directory)[]) {
+        this._isUpdated = true
+
+        const files = content.filter(item => item.type === 'file') as file[];
+        const directories = content.filter(item => item.type === 'directory') as directory[];
+
+        this.diffFiles(files);
+        this.diffDirectories(directories);
+    }
+
+    /**
+     * 文件diff算法，类似Vue的diff
+     * @param newFiles 新文件列表
+     */
+    private diffFiles(newFiles: file[]) {
+        if (this.files.length === 0) {
+            this.files = newFiles.map(file => new VirtualRemoteFile(file, this));
+            return;
+        }
+
+        const oldFiles = [...this.files];
+        const newFilesList: VirtualRemoteFile[] = [];
+        
+        const oldKeyMap = new Map<string, VirtualRemoteFile>();
+        oldFiles.forEach(file => oldKeyMap.set(file.name, file as VirtualRemoteFile));
+        
+        for (let i = 0; i < newFiles.length; i++) {
+            const newFile = newFiles[i];
+            const key = newFile.name;
+            
+            const oldFile = oldKeyMap.get(key);
+            
+            if (oldFile) {
+                oldFile.size = newFile.size;
+                oldFile.stats = newFile.stats;
+                newFilesList.push(oldFile);
+                // 从旧映射中删除，表示已处理
+                oldKeyMap.delete(key);
+            } else {
+                newFilesList.push(new VirtualRemoteFile(newFile, this));
+            }
+        }
+        
+        this.files = newFilesList;
+    }
+
+    /**
+     * 目录diff算法，类似Vue的diff
+     * @param newDirs 新目录列表
+     */
+    private diffDirectories(newDirs: directory[]) {
+        if (this.directories.length === 0) {
+            this.directories = newDirs.map(dir => new VirtualRemoteDirectory(dir, this));
+            return;
+        }
+
+        const oldDirs = [...this.directories];
+        const newDirsList: VirtualRemoteDirectory[] = [];
+        
+        const oldKeyMap = new Map<string, VirtualRemoteDirectory>();
+        oldDirs.forEach(dir => oldKeyMap.set(dir.name, dir as VirtualRemoteDirectory));
+        
+        for (let i = 0; i < newDirs.length; i++) {
+            const newDir = newDirs[i];
+            const key = newDir.name;
+            
+            const oldDir = oldKeyMap.get(key);
+            
+            if (oldDir) {
+                oldDir.stats = newDir.stats;
+                newDirsList.push(oldDir);
+                oldKeyMap.delete(key);
+            } else {
+                newDirsList.push(new VirtualRemoteDirectory(newDir, this));
+            }
+        }
+        
+        this.directories = newDirsList;
+    }
+
+    async update(): Promise<void> {
+        const data: (file | directory)[] = await miaoFetchApi.get(this)
+        this.updateContent(data)
+    }
+
+    async delete(): Promise<boolean> {
+        try {
+            const { response } = miaoFetchApi.delete(this, {
+                retry: 5
+            });
+            const id = (await response).eventId;
+            
+            const eventResult = await pollEventUntilComplete(id);
+            
+            if (eventResult.status === 'success' && this.parent) {
+                await this.parent.update(); // 操作成功后更新父目录
+            }
+            
+            return eventResult.status === 'success';
+        } catch (error) {
+            console.error('删除目录失败:', error);
+            return false;
+        }
+    }
+
+    async rename(newName: string): Promise<boolean> {
+        if (!newName) {
+            return false;
+        }
+
+        try {
+            const { response } = miaoFetchApi.rename(this, newName, {
+                retry: 5
+            });
+            const id = (await response).eventId;
+            
+            const eventResult = await pollEventUntilComplete(id);
+            
+            if (eventResult.status === 'success' && this.parent) {
+                await this.parent.update(); // 操作成功后更新父目录
+            }
+            
+            return eventResult.status === 'success';
+        } catch (error) {
+            console.error('重命名目录失败:', error);
+            return false;
+        }
+    }
+
+    async mv(targetDir: VirtualDirectoryBase): Promise<boolean> {
+        if (targetDir === this || targetDir.getParents.includes(this)) {
+            return false;
+        }
+
+        if (this.parent === targetDir) {
+            return false; // 已经在目标目录中
+        }
+
+        try {
+            const _from = this.parent;
+            const { response } = miaoFetchApi.cut(this, targetDir);
+            const id = (await response).eventId;
+            
+            const eventResult = await pollEventUntilComplete(id);
+            const success = eventResult.status === 'success';
+
+            if (success) {
+                if (_from) await _from.update(); // 更新源目录
+                await targetDir.update(); // 更新目标目录
+            }
+
+            return success;
+        } catch (error) {
+            console.error('移动目录失败:', error);
+            return false;
+        }
+    }
+
+    async copy(targetDir: VirtualDirectoryBase): Promise<boolean> {
+        if (targetDir === this || targetDir.getParents.includes(this)) {
+            return false;
+        }
+
+        // 检查目标目录是否已存在同名目录
+        const existingDir = targetDir.directories.find(dir => dir.name === this.name);
+        if (existingDir) {
+            // 存在同名目录，拒绝操作并显示提示
+            console.error(`目标位置已存在同名目录: ${this.name}`);
+            alert(`复制失败：目标位置已存在同名目录"${this.name}"`);
+            return false;
+        }
+
+        try {
+            const { response } = miaoFetchApi.copy(this, targetDir);
+            const id = (await response).eventId;
+            
+            const eventResult = await pollEventUntilComplete(id);
+            const success = eventResult.status === 'success';
+
+            if (success) {
+                // 不需要更新源目录，因为复制不会改变源目录
+                await targetDir.update(); // 更新目标目录
+            }
+
+            return success;
+        } catch (error) {
+            console.error('复制目录失败:', error);
+            return false;
+        }
+    }
+}

src/components/APP/ShareQrCodeCard.vue

@@ -0,0 +1,145 @@
+<template>
+  <n-card title="分享链接" class="share-card">
+    <miao-message-provider ref="messageProviderRef">
+      <n-scrollbar style="max-height: 60vh;">
+        <n-space vertical>
+          <!-- <n-text>扫描下方二维码访问不同设备上的应用</n-text>
+          <n-divider /> -->
+          <n-spin :show="loading">
+            <div class="grid-container">
+              <div v-for="(item, index) in shareLinks" :key="index" class="grid-item">
+                <n-card embedded class="qrcode-card">
+                  <template #header>
+                    <div class="card-header bg-zinc-100 p-3 rounded-md">
+                      <n-text>{{ item.title.split('(')[0] }}</n-text>
+                      <n-tooltip trigger="hover" placement="top">
+                        <template #trigger>
+                          <n-button quaternary circle size="small" @click="copyUrl(item.url)">
+                            <template #icon>
+                              <n-icon><copy-outline /></n-icon>
+                            </template>
+                          </n-button>
+                        </template>
+                        复制链接
+                      </n-tooltip>
+                    </div>
+                  </template>
+                  <div class="qrcode-container">
+                    <n-qr-code :value="item.url" :size="200" error-correction-level="H"
+                      style="box-sizing: content-box;" />
+                  </div>
+                  <template #footer>
+                    <div @click="openUrl(item.url)" class="cursor-pointer hover:text-blue-500 hover:underline">
+                      <n-ellipsis style="max-width: 100%" :tooltip="{ maxWidth: 300 }">
+                        {{ item.url }}
+                      </n-ellipsis>
+                    </div>
+                  </template>
+                </n-card>
+              </div>
+            </div>
+          </n-spin>
+        </n-space>
+      </n-scrollbar>
+    </miao-message-provider>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { CopyOutline } from '@vicons/ionicons5'
+import { onMounted, ref, useTemplateRef } from 'vue'
+import useServerAddresses from '@/hooks/useServerAddresses'
+import MiaoMessageProvider from '@/components/miaoAlertTipProvider.vue'
+
+// 服务器地址服务
+const serverAddressesService = useServerAddresses()
+
+interface ShareLink {
+  title: string
+  url: string
+}
+
+// 加载状态
+const loading = ref(true)
+// 分享链接
+const shareLinks = ref<ShareLink[]>([])
+
+// 使用本地消息提示组件
+const messageProviderRef = useTemplateRef<InstanceType<typeof MiaoMessageProvider>>('messageProviderRef')
+
+// 组件挂载后获取地址列表
+onMounted(async () => {
+  try {
+    await serverAddressesService.fetchAddresses()
+    shareLinks.value = serverAddressesService.addresses.value
+  } catch (error) {
+    // 使用本地的alertTip
+    messageProviderRef.value?.alertTip('获取分享链接失败', {
+      type: 'error',
+      timeout: 3000
+    })
+    console.error('获取分享链接失败:', error)
+  } finally {
+    loading.value = false
+  }
+})
+
+/**
+ * 复制URL到剪贴板
+ */
+const copyUrl = (url: string) => {
+  navigator.clipboard.writeText(url).then(
+    () => {
+      // 使用本地的alertTip
+      messageProviderRef.value?.alertTip('链接已复制到剪贴板', {
+        type: 'success',
+        timeout: 3000
+      })
+    },
+    (err) => {
+      console.error('复制失败:', err)
+      // 使用本地的alertTip
+      messageProviderRef.value?.alertTip('复制失败', {
+        type: 'error',
+        timeout: 3000
+      })
+    }
+  )
+}
+
+const openUrl = (url: string) => {
+  window.open(url, '_blank')
+}
+</script>
+
+<style scoped>
+.share-card {
+  min-width: 280px;
+  max-width: 90vw;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 8px;
+}
+
+.qrcode-card {
+  text-align: center;
+}
+
+.qrcode-container {
+  display: flex;
+  justify-content: center;
+  padding: 8px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+</style>

src/components/APP/ViewContainer.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+const props = defineProps({
+   views: {
+      type: Object,
+      required: true
+   },
+   deleteView: {
+      type: Function,
+      required: true
+   }
+})
+</script>
+
+<template>
+   <div class="view-container">
+      <div
+         class="view-container-item"
+         v-for="(view, index) of props.views._views"
+         :class="!view.visible ? 'view-container-item-hidden' : ''"
+         :key="view.id">
+         <component
+            :is="view.component"
+            v-model:current-directories="view.currentDirectories"
+            v-model:current-files="view.currentFiles"
+            :id="view.id"
+            :color="view.color"
+            :view="view"
+            :views="props.views"
+            @exit="props.deleteView(index)"></component>
+      </div>
+   </div>
+</template>
+
+<style lang="scss" scoped>
+$controller-height: 25px;
+
+.view-container {
+   position: relative;
+   display: flex;
+   height: calc(100% - $controller-height);
+   overflow-y: hidden;
+   overflow-x: overlay;
+
+   .view-container-item {
+      flex: 1;
+      height: 100%;
+      min-width: 180px;
+      opacity: 1;
+      transition:
+         flex 0.25s ease,
+         opacity 0.25s ease;
+   }
+
+   .view-container-item-hidden {
+      flex: 0;
+      min-width: 0px;
+      opacity: 0;
+   }
+
+   &::-webkit-scrollbar {
+      position: absolute;
+      width: 4px;
+   }
+
+   // 滚动条轨道
+   &::-webkit-scrollbar-track {
+      border-radius: 2px;
+   }
+
+   // 小滑块
+   &::-webkit-scrollbar-thumb {
+      background: #e0e0e0;
+   }
+
+   &::-webkit-scrollbar-thumb:hover {
+      background: #999999;
+   }
+}
+</style>

src/components/APP/ViewController.vue

@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import { NIcon, NScrollbar, NDropdown } from 'naive-ui'
+import {
+   EyeOffOutline,
+   EyeOutline,
+   CloseOutline,
+   CopyOutline,
+   EllipsisVertical
+} from '@vicons/ionicons5'
+import type { DropdownMixedOption } from 'naive-ui/es/dropdown/src/interface'
+import type { VirtualPages } from '@/class/VirtualPage'
+import type VirtualDirectory from '@/class/VirtualDirectory'
+import type { VirtualFile } from '@/class/VirtualDirectory'
+
+const props = defineProps<{
+   views: VirtualPages
+   handleClickTitle: (index: number) => void
+   createView: (
+      component: any,
+      name: string,
+      currentDirectories?: VirtualDirectory[],
+      currentFiles?: VirtualFile[],
+      index?: number
+   ) => void
+   deleteView: (index: number) => void
+   openMenuOption: DropdownMixedOption[]
+   handleMenuSelect: (key: string) => any
+}>()
+</script>
+
+<template>
+   <div class="view-controller">
+      <n-scrollbar x-scrollable>
+         <div class="tabs-container">
+            <transition-group name="tab">
+               <div
+                  class="tab"
+                  v-for="(view, index) of props.views._views"
+                  :key="view.id">
+                  <span
+                     class="tab-title"
+                     :title="view.title"
+                     @click="props.handleClickTitle(index)">
+                     {{
+                        view.title.length > 5 && 0
+                           ? `${view.title.substring(0, 5)}...`
+                           : view.title
+                     }}
+                  </span>
+                  <div class="tab-control">
+                     <div
+                        class="tab-point"
+                        :style="{ backgroundColor: view.color }"></div>
+                     <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="
+                           props.createView(
+                              view.component,
+                              view.name,
+                              view.currentDirectories,
+                              view.currentFiles,
+                              index + 1
+                           )
+                        "
+                        v-if="view.allowCopy">
+                        <CopyOutline />
+                     </n-icon>
+                     <n-icon
+                        class="tag-control-icon icon"
+                        @click="props.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="props.openMenuOption"
+               @select="props.handleMenuSelect">
+               <n-icon class="icon">
+                  <EllipsisVertical class="icon-inner" />
+               </n-icon>
+            </n-dropdown>
+         </div>
+      </div>
+   </div>
+</template>
+
+<style lang="scss" scoped>
+$controller-height: 25px;
+$tag-width: 170px;
+
+.view-controller {
+   display: flex;
+   height: $controller-height;
+   width: 100%;
+   background-color: #dadada;
+
+   .tabs-container {
+      display: flex;
+      margin-left: 5px;
+      flex: 1;
+
+      .tab {
+         position: relative;
+         width: $tag-width;
+         height: $controller-height;
+         margin: 0 5px;
+         display: flex;
+         border-radius: 5px 5px 0 0;
+         align-items: center;
+
+         .tab-title {
+            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-right: 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);
+      }
+   }
+}
+
+// transition动画相关
+.view-controller {
+   .tabs-container {
+      .tab-move,
+      .tab-enter-active {
+         transition: all 0.2s ease;
+      }
+
+      .tab-leave-active {
+         opacity: 0;
+         transition: none;
+      }
+
+      .tab-enter-from {
+         opacity: 0;
+         transform: translateY(-30px);
+      }
+
+      .tab-leave-active {
+         position: absolute;
+      }
+   }
+}
+</style>

src/components/miaoAlertTipProvider.vue

@@ -1,36 +1,48 @@
 <template>
    <div class="miao-message-provider" ref="rootRef">
       <slot></slot>
-        <transition-group name="message-fade" tag="div" class="miao-message-provider-container">
-            <div class="miao-message" v-for="msg in messageList" :key="msg.id"
+      <transition-group
+         name="message-fade"
+         tag="div"
+         class="miao-message-provider-container">
+         <div
+            class="miao-message"
+            v-for="msg in messageList"
+            :key="msg.id"
             :style="{ maxWidth: maxMessageWidth + 'px' }">
             <n-icon class="miao-message-item" size="18" :color="msg.iconColor">
                <component :is="msg.icon"></component>
             </n-icon>
-                <div class="miao-message-item miao-message-item-content">{{ msg.content }}</div>
+            <div class="miao-message-item miao-message-item-content">
+               {{ msg.content }}
+            </div>
          </div>
       </transition-group>
    </div>
 </template>
 
 <script setup lang="ts">
-import generateId from '@/hooks/generateId';
-import { NIcon } from 'naive-ui';
-import { computed, onMounted, ref, shallowReactive } from 'vue';
-import { InformationCircle, CheckmarkCircle, CloseCircle } from '@vicons/ionicons5'
-import { AlertTipMessageOptions } from '@/types/type';
+import generateId from '@/utils/generateId'
+import { NIcon } from 'naive-ui'
+import { computed, onMounted, ref, shallowReactive } from 'vue'
+import {
+   InformationCircle,
+   CheckmarkCircle,
+   CloseCircle
+} from '@vicons/ionicons5'
+import { AlertTipMessageOptions } from '@/types/type'
 
 interface Message {
-    icon: any,
-    timer: any,
-    iconColor: string,
-    content: string,
+   icon: any
+   timer: any
+   iconColor: string
+   content: string
 }
 
 const iconMap = {
-    'info': { icon: InformationCircle, color: 'blue' },
-    'success': { icon: CheckmarkCircle, color: 'green' },
-    'error': { icon: CloseCircle, color: 'red' },
+   info: { icon: InformationCircle, color: 'blue' },
+   success: { icon: CheckmarkCircle, color: 'green' },
+   error: { icon: CloseCircle, color: 'red' }
 }
 
 const messageMap = shallowReactive<Record<string, Message | undefined>>({})
@@ -38,9 +50,9 @@ const rootRef = ref<HTMLDivElement>()
 const maxMessageWidth = ref<number>(-1)
 
 const messageList = computed(() => {
-    return Object.keys(messageMap).map(v => ({
+   return Object.keys(messageMap).map((v) => ({
       id: v,
-        ...messageMap[v],
+      ...messageMap[v]
    }))
 })
 const alertTip = (content: string, options?: AlertTipMessageOptions) => {
@@ -70,18 +82,17 @@ onMounted(async () => {
    // setTimeout(() => {
    //     set('miao', { type: 'success' })
    // }, 1000);
-    const observer = new ResizeObserver(entries => {
+   const observer = new ResizeObserver((entries) => {
       for (let entry of entries) {
-            maxMessageWidth.value = entry.contentRect.width * 0.8;
+         maxMessageWidth.value = entry.contentRect.width * 0.8
       }
-    });
+   })
    if (rootRef.value) {
-        observer.observe(rootRef.value);
+      observer.observe(rootRef.value)
    }
 })
 
-
-defineExpose({ alertTip });
+defineExpose({ alertTip })
 </script>
 
 <style scoped lang="scss">
@@ -89,6 +100,7 @@ defineExpose({ alertTip });
    width: 100%;
    height: 100%;
    position: relative;
+   overflow: hidden;
 
    .miao-message-provider-container {
       position: absolute;
@@ -109,7 +121,10 @@ defineExpose({ alertTip });
          background-color: rgb(249, 249, 249);
          padding: 5px 10px;
          background-color: rgb(255 255 255);
-            box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
+         box-shadow:
+            0 3px 6px -4px rgba(0, 0, 0, 0.12),
+            0 6px 16px 0 rgba(0, 0, 0, 0.08),
+            0 9px 28px 8px rgba(0, 0, 0, 0.05);
          border-radius: 5px;
          user-select: none;
          margin-top: 10px;

src/components/miaoContextMenu.vue

@@ -1,18 +1,29 @@
 <!-- 基于naiveui的下拉菜单实现的自定义下拉菜单 -->
 <!-- 支持长按和右键呼出下拉菜单 -->
 <template>
-    <div class="main" @contextmenu="handleContextMenu" @mouseleave="handleMainMouseLeave">
+   <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" />
+   <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';
+import { NDropdown } from 'naive-ui/es/dropdown'
+import { DropdownOption } from 'naive-ui/es/dropdown'
+import { nextTick, ref } from 'vue'
 
 const props = defineProps<{
    options: DropdownOption[]
@@ -76,7 +87,6 @@ const handleContextMenu = (e: MouseEvent) => {
 //     }
 
 // }
-
 </script>
 
 <style>

src/components/miaoDraggableDiv.vue

@@ -0,0 +1,47 @@
+<template>
+   <div ref="divRef" @dragstart="onDs" :draggable="isDraggable ?? true">
+      <slot></slot>
+   </div>
+</template>
+
+<script setup lang="ts">
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory';
+import useDataBus from '@/hooks/useDataBus';
+import { onMounted, ref } from 'vue'
+// import Sortable from 'sortablejs'
+
+const props = defineProps<{
+   isDraggable?: boolean,
+   bindVirtualFiles?: VirtualFile[],
+   bindVirtualDirectories?: VirtualDirectory[],
+}>()
+const emit = defineEmits<{
+   onDragStart: [e: DragEvent]
+}>()
+
+const divRef = ref<HTMLDivElement>()
+
+const onDs = (e: DragEvent) => {
+   emit('onDragStart', e)
+   const dataBus = useDataBus()
+   props.bindVirtualFiles && dataBus.set(
+      'dragData_vFiles',
+      props.bindVirtualFiles
+   )
+   props.bindVirtualDirectories && dataBus.set(
+      'dragData_vDirectory',
+      props.bindVirtualDirectories
+   )
+}
+
+onMounted(() => {
+   divRef?.value?.addEventListener('dragstart', function (ev) {
+      var img = new Image()
+      img.src =
+         "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath /%3E%3C/svg%3E"
+      ev?.dataTransfer?.setDragImage(img, 0, 0)
+   })
+})
+</script>
+
+<style scoped></style>

src/components/miaoDropHandler.vue

@@ -1,5 +1,9 @@
 <template>
-    <div class="container" @dragover="handleDragOver" @dragleave="handleDragLeave" @drop="handleDrop">
+   <div
+      class="miao-drop-container"
+      @dragover="handleDragOver"
+      @dragleave="handleDragLeave"
+      @drop="handleDrop">
       <slot></slot>
       <miao-mask v-model:show="showMask"></miao-mask>
    </div>
@@ -12,6 +16,13 @@ import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
 import config from '@/config'
 import useDataBus from '@/hooks/useDataBus'
 
+const props = defineProps({
+   disable: {
+      type: Boolean,
+      default: false
+   }
+})
+
 const dataBus = useDataBus()
 
 const { uploadSizeLimit } = config
@@ -57,8 +68,20 @@ const removeDirectory = async (files: File[]) => {
       }
    }
 }
+const check = (event: DragEvent) => {
+   return (
+      [
+         ...(event.dataTransfer?.types?.filter((v) => v === 'Files') ?? []),
+         ...(dataBus.get('dragData_vFiles') ?? []),
+         ...(dataBus.get('dragData_vDirectory') ?? [])
+      ].length !== 0
+   )
+}
 
 const handleDragOver = async (event: DragEvent) => {
+   if (props.disable || check(event) === false) {
+      return
+   }
    event.preventDefault()
    if (showMask.value === 1) {
       return
@@ -71,6 +94,9 @@ const handleDragLeave = async () => {
 }
 
 const handleDrop = async (event: DragEvent) => {
+   if (props.disable || check(event) === false) {
+      return
+   }
    showMask.value = 0
    event.preventDefault()
    event.stopPropagation()
@@ -97,7 +123,7 @@ const handleDrop = async (event: DragEvent) => {
 </script>
 
 <style lang="scss" scoped>
-.container {
+.miao-drop-container {
    width: 100%;
    height: 100%;
    position: relative;

src/components/miaoLazyDiv.vue

@@ -1,32 +1,58 @@
 <!-- 只适合用于渲染过程较为复杂的组件，不然可能得不偿失
      这么泛用的组件，性能差点也能理解 -->
 <template>
-    <div class="miao-lazy" ref="miaoLazyRoot" :style="!show ? { minHeight, minWidth } : {}">
+   <div
+      class="miao-lazy"
+      ref="miaoLazyRoot"
+      :style="
+         !show
+            ? {
+                 minHeight:
+                    _autoHeight !== undefined ? _autoHeight : props.minHeight,
+                 minWidth,
+                 margin
+              }
+            : {}
+      ">
       <slot v-if="show" />
    </div>
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 
 const props = defineProps({
+   // disable: {
+   //     type: Boolean,
+   //     default: false,
+   // },
    disableLazy: {
       type: Boolean,
-        default: false,
+      default: false
    },
    // 仅在内容未加载时生效，用于占位
    minHeight: {
       type: String,
-        default: 'none',
+      default: 'none'
    },
    minWidth: {
       type: String,
-        default: 'none',
+      default: 'none'
+   },
+   margin: {
+      type: String,
+      default: 'none'
+   },
+   autoHeight: {
+      type: Boolean,
+      default: false
    }
 })
 
 const miaoLazyRoot = ref<HTMLDivElement>()
 
+const _autoHeight = ref<string>()
+
 const show = ref<boolean>(props.disableLazy)
 
 const isVisible = (dom: HTMLDivElement) => {
@@ -45,6 +71,9 @@ const { showSlot, hideSlot, clearTimer } = (() => {
    }
    const hideSlot = () => {
       clearTimer()
+      if (props.autoHeight) {
+         _autoHeight.value = `${miaoLazyRoot.value?.clientHeight}px`
+      }
       show.value = false
    }
    const showSlot = () => {
@@ -65,7 +94,12 @@ const { showSlot, hideSlot, clearTimer } = (() => {
             hideSlot()
          }
       }, 1000)
+      // if (props.autoHeight) {
+      //     nextTick(() => {
+      //         console.log(miaoLazyRoot.value?.clientHeight)
+      //         _autoHeight.value = `${miaoLazyRoot.value?.clientHeight}px`
       //     })
+      // }
    }
    return { showSlot, hideSlot, clearTimer }
 })()
@@ -74,9 +108,10 @@ onMounted(() => {
    if (show.value === false) {
       let options = {
          threshold: 0
-        };
+      }
 
-        let observer: IntersectionObserver | undefined = new IntersectionObserver((entries) => {
+      let observer: IntersectionObserver | undefined = new IntersectionObserver(
+         (entries) => {
             if (entries[0].isIntersecting) {
                showSlot()
                // miaoLazyRoot.value && observer?.unobserve(miaoLazyRoot.value)
@@ -84,8 +119,10 @@ onMounted(() => {
             } else {
                hideSlot()
             }
-        }, options);
-        miaoLazyRoot.value && observer.observe(miaoLazyRoot.value);
+         },
+         options
+      )
+      miaoLazyRoot.value && observer.observe(miaoLazyRoot.value)
    }
 })
 

src/components/miaoMask.vue

@@ -6,12 +6,14 @@
    </transition>
 </template>
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref } from 'vue'
 
 const maskBodyRef = ref<HTMLDivElement>()
 
-const showMask = defineModel<boolean | number>('show', { default: false, required: true })
-
+const showMask = defineModel<boolean | number>('show', {
+   default: false,
+   required: true
+})
 </script>
 <style lang="scss" scoped>
 .mask-body {

src/config.ts

@@ -1,4 +1,8 @@
-const baseUrl = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
+const baseUrl =
+   window.location.protocol +
+   '//' +
+   window.location.hostname +
+   (window.location.port ? ':' + window.location.port : '')
 
 export default {
    baseUrl,
@@ -10,7 +14,9 @@ export default {
       query: '/query',
       rename: '/rename',
       mkdir: '/mkdir',
-        cut: '/cut'
+      cut: '/cut',
+      copy: '/copy',
+      addresses: '/addresses'
    },
    enableUpload: true
 }

src/hooks/dateFormatter.ts

@@ -1,20 +0,0 @@
-export default function dateFormatter(date: Date, fmt: string) {
-	var o:any = {
-		"M+": date.getMonth() + 1, //月份
-		"d+": date.getDate(), //日
-		"h+": date.getHours(), //小时
-		"m+": date.getMinutes(), //分
-		"s+": date.getSeconds(), //秒
-		"q+": Math.floor((date.getMonth() + 3) / 3), //季度
-		"S": date.getMilliseconds() //毫秒
-	};
-	if (/(y+)/.test(fmt)) {
-		fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
-	}
-	for (var k in o) {
-		if (new RegExp("(" + k + ")").test(fmt)) {
-			fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ?  o[k] : ("00" + o[k]).substr(("" + o[k]).length));
-		}
-	}
-	return fmt;
-}

src/hooks/dropHandler.ts

@@ -1,109 +0,0 @@
-import config from "@/config";
-
-const { uploadSizeLimit } = config;
-
-export type dropHandlerHooks = {
-	/**
-	 * 仅返回小于config.ts中大小限制的文件，不会返回文件夹
-	 */
-	onDropFiles?: (files: File[]) => void;
-	/**
-	 * 当拖动时
-	 */
-	onOver?: () => void;
-	/**
-	 * 当进入时
-	 */
-	onEnter?: () => void;
-
-	/**
-	 * 当离开时
-	 */
-	onLeave?: () => void;
-
-	/**
-	 * 离开或是放下时都会触发
-	 * @returns {any}
-	 */
-	onEnd?: () => void;
-};
-
-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 filesFilter = 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;
-		}
-	}
-};
-
-export default function dropHandler(dom: HTMLDivElement, hooks?: dropHandlerHooks) {
-	dom.addEventListener(
-		"dragenter",
-		function (e) {
-			e.preventDefault();
-			e.stopPropagation();
-			hooks?.onEnter && hooks?.onEnter();
-		},
-		false
-	);
-
-	dom.addEventListener(
-		"dragover",
-		function (e) {
-			e.preventDefault();
-			e.stopPropagation();
-			hooks?.onOver && hooks?.onOver();
-		},
-		false
-	);
-
-	dom.addEventListener(
-		"dragleave",
-		function (e) {
-			e.preventDefault();
-			e.stopPropagation();
-			hooks?.onLeave && hooks?.onLeave();
-			hooks?.onEnd && hooks.onEnd();
-		},
-		false
-	);
-
-	dom.addEventListener(
-		"drop",
-		async function (e) {
-			// console.log(e, e.dataTransfer?.types);
-			e.preventDefault();
-			e.stopPropagation();
-			const files = [...(e.dataTransfer?.files ?? [])].filter(file => file.size < uploadSizeLimit);
-			await filesFilter(files);
-			hooks?.onDropFiles && hooks.onDropFiles(files);
-			hooks?.onEnd && hooks.onEnd();
-		},
-		false
-	);
-}

src/hooks/init.ts

@@ -1,5 +1,5 @@
-import { alertTipType } from "@/types/type";
-import initPlugin from "./init/initPlugin";
+import { alertTipType } from '@/types/type'
+import initPlugin from './init/initPlugin'
 
 export default async function init(globalAlertTip: alertTipType) {
    await initPlugin(globalAlertTip)

src/hooks/init/initPlugin.ts

@@ -1,23 +1,32 @@
-import usePluginCenter, { initPluginCenter } from "@/hooks/usePluginCenter";
-import { registerComponentOption } from "@/class/PluginCenter";
-import { alertTipType } from "@/types/type";
+import usePluginCenter, { initPluginCenter } from '@/hooks/usePluginCenter'
+import { Plugin, registerComponentOption } from '@/class/PluginCenter'
+import { alertTipType, PluginExportType } from '@/types/type'
 
 const initPlugin = async (globalAlertTip: alertTipType) => {
    initPluginCenter(globalAlertTip)
-	const modulesFiles = import.meta.glob("@/plugins/**/export.ts");
-	const pluginCenter = usePluginCenter();
-	const promiseArray = [];
-	for (let pluginConfig of Object.values(modulesFiles)) {
-		promiseArray.push(
-			new Promise(async resolve => {
-				const _config = pluginConfig as () => Promise<{
-					default: registerComponentOption;
-				}>;
-				resolve(pluginCenter.registerComponent((await _config()).default));
+   const modulesFiles = import.meta.glob('@/plugins/**/export*.ts', {
+      eager: true
    })
-		);
+   const pluginCenter = usePluginCenter()
+   for (let pluginConfig of Object.values(modulesFiles)) {
+      try {
+         const _config = pluginConfig as {
+            default: registerComponentOption | Plugin
+            type: PluginExportType
+            key?: string
+         }
+         const { type, key = `${Math.random()}` } = _config
+         if (type === PluginExportType.component) {
+            pluginCenter.registerComponent(
+               _config.default as registerComponentOption
+            )
+         } else if (type === PluginExportType.default) {
+            pluginCenter.register(key as string, _config.default as Plugin)
+         }
+      } catch (error) {
+         console.error(`插件 ${pluginConfig} 初始化失败`, error)
+      }
+   }
 }
-	await Promise.all(promiseArray);
-};
 
-export default initPlugin;
+export default initPlugin

src/hooks/miaoTools.ts

@@ -1,59 +0,0 @@
-import { NIcon } from 'naive-ui'
-import { h } from 'vue'
-
-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 const renderIcon = (icon: any) => {
-    return () => {
-        return h(NIcon, null, {
-            default: () => h(icon)
-        })
-    }
-}
-
-export default {
-    filePicker,
-    renderIcon
-}

src/hooks/useDataBus.ts

@@ -1,8 +1,8 @@
-import { reactive } from "vue";
+import { reactive } from 'vue'
 
 let dataStorage: {
    [key: string | number]: any
-};
+}
 
 export default function useDataBus() {
    if (dataStorage === undefined) {
@@ -10,13 +10,17 @@ export default function useDataBus() {
    }
    return {
       set(key: string | number, value: any) {
-			dataStorage[key] = value;
-			return value;
+         dataStorage[key] = value
+         return value
       },
       pop(key: string | number) {
-			const value = dataStorage[key];
-			dataStorage[key] = undefined;
-			return value;
+         const value = dataStorage[key]
+         dataStorage[key] = undefined
+         return value
+      },
+      get(key: string | number) {
+         const value = dataStorage[key]
+         return value
+      }
    }
-	};
 }

src/hooks/useMiaoFetchApi.ts

@@ -1,4 +1,4 @@
-import VirtualDirectory, { VirtualFile } from "@/class/VirtualDirectory";
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
 import {
    getOption,
    getResponse,
@@ -9,60 +9,66 @@ import {
    renameOption,
    cutOption,
    mkdirOption,
-	getFileOption
-} from "@/types/fetch";
-import Config from "@/config";
-import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
+   getFileOption,
+   copyOption
+} from '@/types/fetch'
+import Config from '@/config'
+import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
 
 export const useMiaoFetch = (option?: miaoFetchConfig) => {
-	const retry = option?.retry ?? 0;
-	const controller = new AbortController();
-	let flag = true;
+   const retry = option?.retry ?? 0
+   const controller = new AbortController()
+   let flag = true
    return {
-		miaoFetch: async (config: AxiosRequestConfig<any>): Promise<AxiosResponse<any, any>> => {
-			let counter = 0;
-			let response: any;
-			let errList = [];
+      miaoFetch: async (
+         config: AxiosRequestConfig<any>
+      ): Promise<AxiosResponse<any, any>> => {
+         let counter = 0
+         let response: any
+         let errList = []
          while (flag && counter <= retry) {
             try {
                response = await axios({
                   ...config,
                   signal: controller.signal
-					});
-					return response;
+               })
+               return response
             } catch (_e) {
-					errList.push(_e);
-					counter += 1;
+               errList.push(_e)
+               counter += 1
             }
          }
-			throw errList;
+         throw errList
       },
       /**
        * 强制终止miaoFetch
        */
       abortMiaoFetch: () => {
-			flag = false;
-			controller.abort();
+         flag = false
+         controller.abort()
+      }
+   }
 }
-	};
-};
 
 const miaoFetchApi = {
    /**
     * 获取对应文件夹下的数据
     */
-	async get(vDirectory: VirtualDirectory, option?: getOption): Promise<getResponse> {
-		const { baseUrl, api } = Config;
-		const url = `${baseUrl}${api.get}${vDirectory.path}`;
-		const retry = option?.retry ?? 0;
+   async get(
+      vDirectory: VirtualDirectory,
+      option?: getOption
+   ): Promise<getResponse> {
+      const { baseUrl, api } = Config
+      const url = `${baseUrl}${api.get}${vDirectory.path}`
+      const retry = option?.retry ?? 0
 
       const { miaoFetch } = useMiaoFetch({
          retry
-		});
+      })
       const response = await miaoFetch({
          url
-		});
-		return response.data;
+      })
+      return response.data
    },
 
    /**
@@ -70,27 +76,33 @@ const miaoFetchApi = {
     */
    getFile(vFile: VirtualFile, option?: getFileOption) {
       // const { baseUrl, api } = Config
-		const url = vFile.url;
-		const retry = option?.retry ?? 0;
-		const axiosOption = option?.axiosOption ?? {};
+      const url = vFile.url
+      const retry = option?.retry ?? 0
+      const axiosOption = option?.axiosOption ?? {}
 
       const { miaoFetch, abortMiaoFetch: abort } = useMiaoFetch({
          retry
-		});
+      })
       const response = miaoFetch({
          url,
-			responseType: "arraybuffer",
+         responseType: 'arraybuffer',
          onDownloadProgress(progressEvent) {
-				option && option.onProcess && option.onProcess(progressEvent.total ? progressEvent.loaded / progressEvent.total : -1);
+            option &&
+               option.onProcess &&
+               option.onProcess(
+                  progressEvent.total
+                     ? progressEvent.loaded / progressEvent.total
+                     : -1
+               )
          },
          ...axiosOption
-		});
+      })
       return {
-			response: new Promise<Uint8Array>(async resolve => {
-				resolve(new Uint8Array((await response).data));
+         response: new Promise<Uint8Array>(async (resolve) => {
+            resolve(new Uint8Array((await response).data))
          }),
          abort
-		};
+      }
    },
 
    /**
@@ -98,177 +110,224 @@ const miaoFetchApi = {
     * 正常上传文件请使用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 { baseUrl, api } = Config
+      const url = `${baseUrl}${api.upload}${targetVDir.path}`
+      const retry = option?.retry ?? 0
       const { miaoFetch, abortMiaoFetch } = useMiaoFetch({
          retry
-		});
-		const sizeTotal = data.size;
+      })
+      const sizeTotal = data.size
 
-		const opType = option?.type ?? "write";
+      const opType = option?.type ?? 'write'
 
-		const formData = new FormData();
+      const formData = new FormData()
 
-		formData.append("file", data);
+      formData.append('file', data)
       // 必须这样传，不然中文乱码
-		formData.append("fileName", data.name);
-		formData.append("operateType", opType);
+      formData.append('fileName', data.name)
+      formData.append('operateType', opType)
 
       return {
          abort: () => abortMiaoFetch(),
          response: new Promise<{
-				message: "success" | "failed";
-				error?: string;
-			}>(async resolve => {
+            message: 'success' | 'failed'
+            error?: string
+         }>(async (resolve) => {
             const response = await miaoFetch({
                url,
-					method: "post",
+               method: 'post',
                data: formData,
                onUploadProgress(progressEvent) {
-						option && option.onProcess && option.onProcess(progressEvent.loaded / sizeTotal);
+                  option &&
+                     option.onProcess &&
+                     option.onProcess(progressEvent.loaded / sizeTotal)
                }
-				});
-				resolve(response.data);
             })
-		};
+            resolve(response.data)
+         })
+      }
    },
 
    /**
     * 在目标文件夹下创建新的文件夹
     */
-	mkdir(targetVDir: VirtualDirectory, newFolderName: string, option?: mkdirOption) {
-		const { baseUrl, api } = Config;
-		const url = `${baseUrl}${api.mkdir}${targetVDir.path}`;
+   mkdir(
+      targetVDir: VirtualDirectory,
+      newFolderName: string,
+      option?: mkdirOption
+   ) {
+      const { baseUrl, api } = Config
+      const url = `${baseUrl}${api.mkdir}${targetVDir.path}`
       const { miaoFetch } = useMiaoFetch({
          retry: option?.retry ?? 0
-		});
+      })
 
       return new Promise<{
-			message: "success" | "failed";
-			error?: string;
-		}>(async resolve => {
+         message: 'success' | 'failed'
+         error?: string
+      }>(async (resolve) => {
          const response = await miaoFetch({
             url,
-				method: "post",
+            method: 'post',
             data: {
                folderName: newFolderName
             }
-			});
-			resolve(response.data);
-		});
+         })
+         resolve(response.data)
+      })
    },
    /**
     * 在目标文件夹下创建新的空文件，实际上是通过upload空文件实现
     */
-	mkFile(targetVDir: VirtualDirectory, newFileName: string, option?: uploadOption) {
-		const emptyBlob = new Blob([]);
+   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);
+         type: 'text/plain'
+      })
+      return this.upload(emptyFile, targetVDir, option)
    },
 
    /**
     * 删除对应的文件或文件夹，若为文件夹会递归删除
     */
    delete(target: VirtualFile | VirtualDirectory, option?: deleteOption) {
-		const { baseUrl, api } = Config;
-		const url = `${baseUrl}${api.delete}${target.path}`;
-		const retry = option?.retry ?? 0;
+      const { baseUrl, api } = Config
+      const url = `${baseUrl}${api.delete}${target.path}`
+      const retry = option?.retry ?? 0
       const { miaoFetch } = useMiaoFetch({
          retry
-		});
+      })
 
       return {
          response: new Promise<{
-				eventId: number;
-			}>(async resolve => {
+            eventId: number
+         }>(async (resolve) => {
             const response = await miaoFetch({
                url,
-					method: "post"
-				});
-				resolve(response.data);
+               method: 'post'
             })
-		};
+            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;
+   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 => {
+            eventId: number
+         }>(async (resolve) => {
             const response = await miaoFetch({
                url,
-					method: "post",
+               method: 'post',
                data: { newName }
-				});
-				resolve(response.data);
             })
-		};
+            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;
+   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 => {
+            eventId: number
+         }>(async (resolve) => {
             const response = await miaoFetch({
                url,
-					method: "post",
+               method: 'post',
                data: { newPath }
-				});
-				resolve(response.data);
             })
-		};
+            resolve(response.data)
+         })
+      }
+   },
+
+   /**
+    * 复制文件或文件夹
+    */
+   copy(
+      target: VirtualFile | VirtualDirectory,
+      to: VirtualDirectory,
+      option?: copyOption
+   ) {
+      const newPath = to.path
+      const { baseUrl, api } = Config
+      const url = `${baseUrl}${api.copy}${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 { 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 => {
+            status: 'process' | 'success' | 'failed'
+            error?: unknown
+         }>(async (resolve) => {
             const response = await miaoFetch({
                url,
-					method: "get",
+               method: 'get',
                params: {
                   id: eventId
                }
-				});
-				resolve(response.data);
             })
-		};
+            resolve(response.data)
+         })
+      }
+   }
 }
-};
 
 export default function useMiaoFetchApi() {
-	return miaoFetchApi;
+   return miaoFetchApi
 }

src/hooks/usePluginCenter.ts

@@ -1,6 +1,6 @@
-import PluginCenter from "@/class/PluginCenter";
-import { alertTipType } from "@/types/type";
-import { reactive } from "vue";
+import PluginCenter from '@/class/PluginCenter'
+import { alertTipType } from '@/types/type'
+import { reactive } from 'vue'
 
 let pluginCenter: PluginCenter
 

src/hooks/useRootVDirectory.ts

@@ -0,0 +1,17 @@
+import { VirtualRemoteDirectory } from '@/class/VirtualRemoteDirectory'
+import { reactive } from 'vue'
+
+const root = reactive(
+   new VirtualRemoteDirectory({
+      name: '根目录',
+      stats: {
+         atimeMs: 0,
+         birthtimeMs: 0,
+         ctimeMs: 0,
+         mtimeMs: 0
+      }
+   })
+)
+export default function useRootVDirectory() {
+   return root
+}

src/hooks/useServerAddresses.ts

@@ -0,0 +1,54 @@
+import { ref } from 'vue'
+import config from '@/config'
+import { useMiaoFetch } from '@/hooks/useMiaoFetchApi'
+
+export interface ServerAddress {
+  title: string
+  url: string
+}
+
+/**
+ * 获取服务器所有可用的访问地址
+ */
+export default function useServerAddresses() {
+  const addresses = ref<ServerAddress[]>([])
+  const loading = ref(false)
+  const error = ref<Error | null>(null)
+
+  /**
+   * 从服务器获取可用地址列表
+   */
+  const fetchAddresses = async () => {
+    loading.value = true
+    error.value = null
+
+    try {
+      const { baseUrl, api } = config
+      const { miaoFetch } = useMiaoFetch({ retry: 1 })
+      
+      const response = await miaoFetch({
+        url: `${baseUrl}${api.addresses}`
+      })
+      
+      addresses.value = response.data as ServerAddress[]
+    } catch (err) {
+      console.error('获取服务器地址失败:', err)
+      error.value = err as Error
+      
+      // 如果API失败，提供基本的地址
+      addresses.value = [
+        { title: '当前地址', url: config.baseUrl },
+        { title: '本地地址', url: 'http://localhost:17705' }
+      ]
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    addresses,
+    loading,
+    error,
+    fetchAddresses
+  }
+} 

src/hooks/useUploadQueue.ts

@@ -1,5 +1,5 @@
-import UploadQueue from "@/class/UploadQueue";
-import { reactive } from "vue";
+import UploadQueue from '@/class/UploadQueue'
+import { reactive } from 'vue'
 
 let uploadQueue: UploadQueue
 

src/hooks/useVirtualPages.ts

@@ -1,5 +1,5 @@
-import { VirtualPages } from "@/class/VirtualPage"
-import { Reactive, reactive } from "vue"
+import { VirtualPages } from '@/class/VirtualPage'
+import { Reactive, reactive } from 'vue'
 
 let views: Reactive<VirtualPages>
 

src/main.ts

@@ -1,4 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import 'drag-drop-touch'
+import '@/styles/tailwind.css'
 
 createApp(App).mount('#app')

src/plugins/browser_llm/browser_llm.vue

@@ -0,0 +1,512 @@
+<template>
+  <div class="chat-container">
+    <div v-if="loading" class="loading-container">
+      <div class="loading-spinner"></div>
+      <div class="progress-container">
+        <div class="progress-bar" :style="{ width: loadingProgress + '%' }"></div>
+      </div>
+      <p class="loading-percentage">{{ loadingProgress }}%</p>
+      <p>{{ loadingState }}</p>
+    </div>
+    <div v-else class="chat-main">
+      <div class="chat-history" ref="chatHistoryRef">
+        <div v-for="(message, index) in chatHistory" :key="index"
+          :class="['message', message.role === 'user' ? 'user-message' : 'ai-message']">
+          <div class="message-content" v-if="message.role === 'user'">{{ message.content }}</div>
+          <div class="message-content markdown-content" v-else v-html="renderMarkdown(message.content)"></div>
+        </div>
+        <!-- 实时生成的内容 -->
+        <div v-if="generatingMessage" class="message ai-message">
+          <div class="message-content markdown-content" v-html="renderMarkdown(currentGeneratedText)"></div>
+          <div class="generating-indicator"><span>.</span><span>.</span><span>.</span></div>
+        </div>
+      </div>
+      <div class="chat-input">
+        <textarea v-model="userInput" @keydown.enter.prevent="sendMessage" placeholder="输入消息..."
+          :disabled="processing"></textarea>
+        <button @click="sendMessage" :disabled="processing || !userInput.trim()">
+          发送
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory';
+import { ref, watch, nextTick, onUnmounted } from 'vue';
+import MarkdownIt from 'markdown-it';
+import { FilesetResolver, LlmInference } from '@mediapipe/tasks-genai';
+import VirtualPage from '@/class/VirtualPage';
+
+const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
+  required: true
+});
+
+const currentDirectories = defineModel<VirtualDirectory[]>(
+  'currentDirectories',
+  {
+    required: true
+  }
+)
+
+const props = defineProps<{
+  view: VirtualPage
+}>()
+
+// 初始化MarkdownIt
+const md = new MarkdownIt({
+  html: true,
+  linkify: true,
+  typographer: true,
+  breaks: true
+});
+
+// 状态管理
+const loading = ref(true);
+const loadingState = ref('正在初始化模型...');
+const loadingProgress = ref(0);
+const processing = ref(false);
+const userInput = ref('');
+const chatHistory = ref<{ role: string, content: string }[]>([]);
+const chatHistoryRef = ref<HTMLElement | null>(null);
+const llmInstance = ref<any>(null);
+
+const generatingMessage = ref(false);
+const currentGeneratedText = ref('');
+
+const updateLoadingProgress = (progress: number, state: string) => {
+  loadingProgress.value = progress;
+  loadingState.value = state;
+};
+
+const renderMarkdown = (text: string) => {
+  return md.render(text);
+};
+
+const initializeModel = async () => {
+  if (!currentFiles.value || currentFiles.value.length === 0) {
+    loadingState.value = '错误：未找到模型文件';
+    return;
+  }
+
+  try {
+    const modelFile = currentFiles.value[0];
+    const modelName = modelFile.name.split('.model.bin')[0] && modelFile.name.split('.model.task')[0];
+
+    updateLoadingProgress(5, '正在加载MediaPipe LLM引擎...');
+
+    const simulateDownloadProgress = () => {
+      const totalTime = 2000; // 2秒
+      const interval = 100; // 每100毫秒更新一次
+      const steps = totalTime / interval;
+      const incrementPerStep = 15 / steps; // 从5%到20%
+
+      let currentStep = 0;
+      const timer = setInterval(() => {
+        if (currentStep >= steps) {
+          clearInterval(timer);
+          return;
+        }
+
+        loadingProgress.value = Math.min(20, 5 + currentStep * incrementPerStep);
+        currentStep++;
+      }, interval);
+    };
+
+    simulateDownloadProgress();
+
+    updateLoadingProgress(20, '正在初始化MediaPipe文件解析器...');
+    const genai = await FilesetResolver.forGenAiTasks(
+      currentDirectories.value[0]?.url ?? "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai@latest/wasm"
+    );
+    updateLoadingProgress(40, '正在加载模型文件...');
+
+    const simulateModelLoadingProgress = () => {
+      const totalTime = 3000; // 3秒
+      const interval = 100; // 每100毫秒更新一次
+      const steps = totalTime / interval;
+      const incrementPerStep = 45 / steps; // 从40%到85%
+
+      let currentStep = 0;
+      const timer = setInterval(() => {
+        if (currentStep >= steps) {
+          clearInterval(timer);
+          return;
+        }
+
+        loadingProgress.value = Math.min(85, 40 + currentStep * incrementPerStep);
+        currentStep++;
+      }, interval);
+    };
+
+    simulateModelLoadingProgress();
+
+    llmInstance.value = await LlmInference.createFromOptions(genai, {
+      baseOptions: {
+        modelAssetPath: modelFile.url
+      },
+      maxTokens: 2048,
+      temperature: 0.7
+    });
+
+    updateLoadingProgress(90, '初始化对话...');
+
+    await new Promise(resolve => setTimeout(resolve, 500));
+
+    updateLoadingProgress(100, '加载完成！');
+
+    await new Promise(resolve => setTimeout(resolve, 300));
+
+    loading.value = false;
+    chatHistory.value.push({
+      role: 'assistant',
+      content: `您好！我是${modelName}，有什么可以帮助您的？`
+    });
+  } catch (error) {
+    console.error('模型加载失败:', error);
+    loadingState.value = `模型加载失败: ${error instanceof Error ? error.message : String(error)}`;
+    loadingProgress.value = 0;
+  }
+};
+
+// 发送消息
+const sendMessage = async () => {
+  if (!userInput.value.trim() || processing.value) return;
+
+  const userMessage = userInput.value.trim();
+  userInput.value = '';
+
+  // 添加用户消息到历史
+  chatHistory.value.push({
+    role: 'user',
+    content: userMessage
+  });
+
+  processing.value = true;
+  generatingMessage.value = true;
+  currentGeneratedText.value = '';
+
+  try {
+    // 滚动到底部
+    await nextTick();
+    scrollToBottom();
+
+    // 构建提示词（包含历史对话）
+    // const history = chatHistory.value
+    //   .map(msg => `${msg.role === 'user' ? '用户' : 'AI'}：${msg.content}`)
+    //   .join('\n\n');
+    // const prompt = history + '\n\n用户：' + userMessage + '\n\nAI：';
+
+    // 使用MediaPipe生成回复
+    llmInstance.value.generateResponse(
+      userMessage,
+      null, // 不使用LoRA模型
+      (partialResult: string, done: boolean) => {
+        // 累加部分结果并更新UI
+        currentGeneratedText.value += partialResult;
+        const banStart = [',', '，']
+        for (const ban of banStart) {
+          if (currentGeneratedText.value.startsWith(ban)) {
+            currentGeneratedText.value = currentGeneratedText.value.slice(1)
+          }
+        }
+
+        // 滚动到底部以显示最新内容
+        nextTick().then(scrollToBottom);
+
+        if (done) {
+          // 添加完整回复到历史
+          chatHistory.value.push({
+            role: 'assistant',
+            content: currentGeneratedText.value
+          });
+
+          // 重置生成状态
+          generatingMessage.value = false;
+          processing.value = false;
+          currentGeneratedText.value = '';
+
+          nextTick().then(scrollToBottom);
+        }
+      }
+    );
+  } catch (error) {
+    console.error('生成回复出错:', error);
+
+    // 添加错误信息
+    chatHistory.value.push({
+      role: 'assistant',
+      content: `抱歉，生成回复时出现错误: ${error instanceof Error ? error.message : String(error)}`
+    });
+
+    // 重置状态
+    generatingMessage.value = false;
+    processing.value = false;
+    currentGeneratedText.value = '';
+
+    nextTick().then(scrollToBottom);
+  }
+};
+
+// 滚动到聊天历史底部
+const scrollToBottom = () => {
+  if (chatHistoryRef.value) {
+    chatHistoryRef.value.scrollTop = chatHistoryRef.value.scrollHeight;
+  }
+};
+
+// 清理资源函数
+const cleanupResources = () => {
+  // 如果正在进行推理，停止推理过程
+  if (processing.value || generatingMessage.value) {
+    // 标记处理完成，停止状态更新
+    processing.value = false;
+    generatingMessage.value = false;
+    console.log('组件卸载：已停止正在进行的文本生成');
+  }
+
+  // 释放LLM实例资源
+  if (llmInstance.value) {
+    const releaseResources = async () => {
+      try {
+        // 调用模型实例的清理方法（如果有）
+        if (typeof llmInstance.value.close === 'function') {
+          llmInstance.value.close();
+        }
+        // 置空实例引用
+        llmInstance.value = null;
+        console.log('组件卸载：已释放模型资源');
+      } catch (error) {
+        console.error('释放模型资源时出错:', error);
+        setTimeout(() => {
+          releaseResources();
+        }, 1000);
+      }
+    }
+    releaseResources();
+  }
+};
+
+onMounted(() => {
+  props.view.setTitle('LLM Demo')
+})
+
+// 在组件卸载时清理资源
+onUnmounted(() => {
+  cleanupResources();
+});
+
+// 监听模型文件变化
+watch(() => currentFiles.value, () => {
+  if (currentFiles.value && currentFiles.value.length > 0) {
+    initializeModel();
+  }
+}, { immediate: true });
+</script>
+
+<style scoped>
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  background-color: #f5f5f5;
+  overflow: hidden;
+}
+
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  padding: 20px;
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  border-radius: 50%;
+  border-top-color: #3498db;
+  animation: spin 1s ease-in-out infinite;
+  margin-bottom: 20px;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.progress-container {
+  width: 80%;
+  height: 20px;
+  background-color: #f0f0f0;
+  border-radius: 10px;
+  overflow: hidden;
+  margin-bottom: 10px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.progress-bar {
+  height: 100%;
+  background: linear-gradient(90deg, #1e88e5, #64b5f6);
+  transition: width 0.3s ease;
+  border-radius: 10px;
+}
+
+.loading-percentage {
+  font-size: 18px;
+  font-weight: bold;
+  color: #1e88e5;
+  margin-bottom: 10px;
+}
+
+.chat-main {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.chat-history {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.message {
+  max-width: 85%;
+  padding: 10px 16px;
+  border-radius: 18px;
+  word-break: break-word;
+}
+
+.user-message {
+  align-self: flex-end;
+  background-color: #1e88e5;
+  color: white;
+  border-bottom-right-radius: 4px;
+}
+
+.ai-message {
+  align-self: flex-start;
+  background-color: #e0e0e0;
+  color: #333;
+  border-bottom-left-radius: 4px;
+}
+
+.markdown-content :deep(p) {
+  margin: 0.5em 0;
+}
+
+.markdown-content :deep(pre) {
+  background-color: #f0f0f0;
+  padding: 8px;
+  border-radius: 4px;
+  overflow-x: auto;
+}
+
+.markdown-content :deep(code) {
+  background-color: #f0f0f0;
+  padding: 2px 4px;
+  border-radius: 3px;
+  font-family: monospace;
+}
+
+.markdown-content :deep(ul),
+.markdown-content :deep(ol) {
+  margin: 0.5em 0;
+  padding-left: 1.5em;
+}
+
+.markdown-content :deep(table) {
+  border-collapse: collapse;
+  margin: 1em 0;
+}
+
+.markdown-content :deep(th),
+.markdown-content :deep(td) {
+  border: 1px solid #ddd;
+  padding: 4px 8px;
+}
+
+.markdown-content :deep(blockquote) {
+  margin: 0.5em 0;
+  padding-left: 1em;
+  border-left: 4px solid #ddd;
+  color: #555;
+}
+
+.generating-indicator {
+  display: inline-block;
+  margin-left: 5px;
+}
+
+.generating-indicator span {
+  display: inline-block;
+  animation: blink 1.4s infinite both;
+}
+
+.generating-indicator span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.generating-indicator span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes blink {
+  0% {
+    opacity: 0.2;
+  }
+
+  20% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0.2;
+  }
+}
+
+.chat-input {
+  display: flex;
+  padding: 10px;
+  background-color: white;
+  border-top: 1px solid #e0e0e0;
+}
+
+.chat-input textarea {
+  flex: 1;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  padding: 10px;
+  resize: none;
+  height: 60px;
+  font-family: inherit;
+  font-size: 14px;
+}
+
+.chat-input button {
+  margin-left: 10px;
+  background-color: #1e88e5;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 0 20px;
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.chat-input button:disabled {
+  background-color: #cccccc;
+  cursor: not-allowed;
+}
+</style>

src/plugins/browser_llm/export.ts

@@ -0,0 +1,35 @@
+import { registerComponentOption } from '@/class/PluginCenter'
+import PlayCircle from '@vicons/ionicons5/es/PlayCircle'
+
+const pluginConfig: registerComponentOption = {
+   key: 'browser_llm',  
+   name: 'Browser_LLM',
+   icon: PlayCircle,
+   getComponent: async () =>
+      (await import('@/plugins/browser_llm/browser_llm.vue')).default,
+   filter: (vDirs, vFiles) => {
+      if (vDirs.length > 1) {
+         return false
+      }
+      if (vDirs.length === 1 && vDirs[0].name !== 'tasks_genai_wasm') {
+         return false
+      }
+      if (vFiles.length === 0) {
+         return false
+      }
+      for (let i of vFiles) {
+         for (let s of ['model.bin', 'model.task']) {
+            if (i.name.endsWith(s)) {
+               return true
+            }
+         }
+      }
+      return false
+   },
+   priority: 6
+}
+
+export default pluginConfig
+
+import { PluginExportType } from '@/types/type'
+export const type = PluginExportType.component

src/plugins/copyFileUrl2Clipboard/copy.ts

@@ -0,0 +1,16 @@
+import { VirtualFile } from '@/class/VirtualDirectory'
+import config from '@/config'
+import { usePluginHooksType } from '@/types/type'
+import copy2Clipboard from 'copy-to-clipboard'
+
+const copy = (__: any, vFiles: VirtualFile[], hooks: usePluginHooksType) => {
+   const { globalAlertTip } = hooks
+   const vFile = vFiles[0]
+   console.log(vFile.url)
+   copy2Clipboard(`${config.baseUrl}${vFile.url}`)
+   globalAlertTip(`${vFile.name}的链接已复制至剪切板`, {
+      type: 'info',
+      timeout: 2000
+   })
+}
+export default copy

src/plugins/copyFileUrl2Clipboard/export.ts

@@ -0,0 +1,27 @@
+import { Plugin, PluginGroup } from '@/class/PluginCenter'
+import Copy from './copy'
+import { CopyOutline } from '@vicons/ionicons5'
+import { PluginExportType } from '@/types/type'
+import { shallowRef } from 'vue'
+
+const pluginConfig: Plugin = {
+   name: '复制链接',
+   icon: shallowRef(CopyOutline),
+   filter: (vDirs, vFiles) => {
+      if (vDirs.length !== 0) {
+         return false
+      }
+      if (vFiles.length !== 1) {
+         return false
+      }
+      return true
+   },
+   disable: false,
+   group: [PluginGroup.default],
+   func: Copy,
+   priority: -100
+}
+
+export default pluginConfig
+
+export const type = PluginExportType.default

src/plugins/copyPasteVirtualItem/copyPaste.ts

@@ -0,0 +1,174 @@
+import { VirtualDirectory, VirtualFile } from '@/class/VirtualDirectory'
+import { usePluginHooksType } from '@/types/type'
+
+// 用于存储复制的项目
+let copiedItems: {
+    files: VirtualFile[],
+    directories: VirtualDirectory[],
+    isCut: boolean
+} = {
+    files: [],
+    directories: [],
+    isCut: false
+}
+
+// 复制或剪切虚拟项目
+const copyItems = (vDirs: VirtualDirectory[], vFiles: VirtualFile[], hooks: usePluginHooksType, isCut = false) => {
+    const { globalAlertTip } = hooks
+    
+    // 保存复制的项目
+    copiedItems = {
+        files: [...vFiles],
+        directories: [...vDirs],
+        isCut
+    }
+    
+    // 生成消息文本
+    const fileCount = vFiles.length
+    const dirCount = vDirs.length
+    let messageText = ''
+    
+    if (fileCount > 0 && dirCount > 0) {
+        messageText = `已${isCut ? '剪切' : '复制'} ${fileCount}个文件和${dirCount}个文件夹`
+    } else if (fileCount > 0) {
+        messageText = `已${isCut ? '剪切' : '复制'} ${fileCount}个文件`
+    } else if (dirCount > 0) {
+        messageText = `已${isCut ? '剪切' : '复制'} ${dirCount}个文件夹`
+    }
+    
+    // 显示提示
+    globalAlertTip(messageText, {
+        type: 'info',
+        timeout: 2000
+    })
+}
+
+// 粘贴虚拟项目
+const pasteItems = async (vDirs: VirtualDirectory[], _vFiles: VirtualFile[], hooks: usePluginHooksType) => {
+    const { globalAlertTip, getRootVDirectory } = hooks
+    
+    // 检查目标目录
+    if (vDirs.length !== 1) {
+        globalAlertTip('请选择一个目标文件夹进行粘贴', {
+            type: 'error',
+            timeout: 2000
+        })
+        return
+    }
+    
+    // 检查是否有复制的项目
+    if (copiedItems.files.length === 0 && copiedItems.directories.length === 0) {
+        globalAlertTip('没有可粘贴的项目', {
+            type: 'info',
+            timeout: 2000
+        })
+        return
+    }
+    
+    const targetDir = vDirs[0]
+    let successCount = 0
+    let failCount = 0
+    
+    // 处理粘贴文件
+    for (const file of copiedItems.files) {
+        try {
+            if (copiedItems.isCut) {
+                // 剪切操作
+                const success = await file.moveTo(targetDir)
+                if (success) {
+                    successCount++
+                } else {
+                    failCount++
+                }
+            } else {
+                // 复制操作
+                const success = await file.copyTo(targetDir)
+                if (success) {
+                    successCount++
+                } else {
+                    failCount++
+                }
+            }
+        } catch (err) {
+            console.error('粘贴文件失败:', err)
+            failCount++
+        }
+    }
+    
+    // 处理粘贴目录
+    for (const dir of copiedItems.directories) {
+        try {
+            if (copiedItems.isCut) {
+                // 目录移动 - 使用mv方法而不是moveTo
+                const success = await dir.mv(targetDir)
+                if (success) {
+                    successCount++
+                } else {
+                    failCount++
+                }
+            } else {
+                // 目录复制
+                const success = await dir.copy(targetDir)
+                if (success) {
+                    successCount++
+                } else {
+                    failCount++
+                }
+            }
+        } catch (err) {
+            console.error('粘贴目录失败:', err)
+            failCount++
+        }
+    }
+    
+    // 如果是剪切操作，粘贴后清空复制的项目
+    if (copiedItems.isCut && successCount > 0) {
+        copiedItems = {
+            files: [],
+            directories: [],
+            isCut: false
+        }
+    }
+    
+    // 显示操作结果
+    if (successCount > 0 && failCount === 0) {
+        globalAlertTip(`成功${copiedItems.isCut ? '移动' : '复制'}了${successCount}个项目`, {
+            type: 'success',
+            timeout: 2000
+        })
+    } else if (successCount > 0 && failCount > 0) {
+        globalAlertTip(`${successCount}个项目成功，${failCount}个项目失败`, {
+            type: 'info',
+            timeout: 2000
+        })
+    } else {
+        globalAlertTip('操作失败', {
+            type: 'error',
+            timeout: 2000
+        })
+    }
+    
+    // 更新目录
+    try {
+        // 使用update方法更新根目录
+        const rootDir = getRootVDirectory();
+        await rootDir.update();
+    } catch (err) {
+        console.error('更新目录失败:', err);
+    }
+}
+
+// 复制功能
+export const copy = (vDirs: VirtualDirectory[], vFiles: VirtualFile[], hooks: usePluginHooksType) => {
+    copyItems(vDirs, vFiles, hooks, false)
+}
+
+// 剪切功能
+export const cut = (vDirs: VirtualDirectory[], vFiles: VirtualFile[], hooks: usePluginHooksType) => {
+    copyItems(vDirs, vFiles, hooks, true)
+}
+
+// 粘贴功能
+export const paste = (vDirs: VirtualDirectory[], vFiles: VirtualFile[], hooks: usePluginHooksType) => {
+    pasteItems(vDirs, vFiles, hooks)
+} 

src/plugins/copyPasteVirtualItem/export.ts

@@ -0,0 +1,60 @@
+import { Plugin, PluginGroup } from '@/class/PluginCenter'
+import { copy, cut, paste } from './copyPaste'
+import { 
+    CopyOutline, 
+    CutOutline, 
+    DocumentAttachOutline 
+} from '@vicons/ionicons5'
+import { PluginExportType } from '@/types/type'
+import { shallowRef } from 'vue'
+
+// 复制插件配置
+export const copyPluginConfig: Plugin = {
+    name: '复制',
+    icon: shallowRef(CopyOutline),
+    filter: (vDirs, vFiles) => {
+        // 至少选择了一个文件或文件夹
+        return vDirs.length > 0 || vFiles.length > 0
+    },
+    disable: false,
+    group: [PluginGroup.default],
+    func: copy,
+    priority: -10
+}
+
+// 剪切插件配置
+export const cutPluginConfig: Plugin = {
+    name: '剪切',
+    icon: shallowRef(CutOutline),
+    filter: (vDirs, vFiles) => {
+        // 至少选择了一个文件或文件夹
+        return vDirs.length > 0 || vFiles.length > 0
+    },
+    disable: false,
+    group: [PluginGroup.default],
+    func: cut,
+    priority: -10
+}
+
+// 粘贴插件配置
+export const pastePluginConfig: Plugin = {
+    name: '粘贴',
+    icon: shallowRef(DocumentAttachOutline),
+    filter: (vDirs, vFiles) => {
+        // 只选择了一个目录作为粘贴目标
+        return vDirs.length === 1 && vFiles.length === 0
+    },
+    disable: false,
+    group: [PluginGroup.default],
+    func: paste,
+    priority: -10
+}
+
+// 导出为默认插件类型
+export const type = PluginExportType.default
+
+// 插件键值
+export const key = 'miaoCopy'
+
+// 导出默认的复制插件
+export default copyPluginConfig 

src/plugins/copyPasteVirtualItem/exportCut.ts

@@ -0,0 +1,11 @@
+import { cutPluginConfig } from './export'
+import { PluginExportType } from '@/types/type'
+
+// 导出为默认插件类型
+export const type = PluginExportType.default
+
+// 插件键值
+export const key = 'miaoCut'
+
+// 导出剪切插件
+export default cutPluginConfig 

src/plugins/copyPasteVirtualItem/exportPaste.ts

@@ -0,0 +1,11 @@
+import { pastePluginConfig } from './export'
+import { PluginExportType } from '@/types/type'
+
+// 导出为默认插件类型
+export const type = PluginExportType.default
+
+// 插件键值
+export const key = 'miaoPaste'
+
+// 导出粘贴插件
+export default pastePluginConfig 

src/plugins/fps/export_hide.ts

@@ -0,0 +1,25 @@
+import { Plugin, PluginGroup } from '@/class/PluginCenter'
+import hideFps from './hideFps'
+import { EyeOffOutline } from '@vicons/ionicons5'
+import { PluginExportType } from '@/types/type'
+import { shallowRef } from 'vue'
+import { fpsElement } from './shared'
+
+const pluginConfig: Plugin = {
+   name: '隐藏FPS',
+   icon: shallowRef(EyeOffOutline),
+   filter: () => {
+      // 只有当FPS显示元素存在时才显示此按钮
+      return fpsElement.value !== null
+   },
+   disable: false,
+   group: [PluginGroup.mainMenu],
+   func: hideFps,
+   priority: 0
+}
+
+export default pluginConfig
+
+export const type = PluginExportType.default
+
+export const key = 'hideFps' 

src/plugins/fps/export_show.ts

@@ -0,0 +1,24 @@
+import { Plugin, PluginGroup } from '@/class/PluginCenter'
+import showFps from './showFps'
+import { SpeedometerOutline } from '@vicons/ionicons5'
+import { PluginExportType } from '@/types/type'
+import { shallowRef } from 'vue'
+import { fpsElement } from './shared'
+
+const pluginConfig: Plugin = {
+   name: '显示FPS',
+   icon: shallowRef(SpeedometerOutline),
+   filter: () => {
+      return fpsElement.value === null
+   },
+   disable: false,
+   group: [PluginGroup.mainMenu],
+   func: showFps,
+   priority: 0
+}
+
+export default pluginConfig
+
+export const type = PluginExportType.default
+
+export const key = 'showFps' 

src/plugins/fps/hideFps.ts

@@ -0,0 +1,18 @@
+// 引入共享变量
+import { fpsElement, animationFrameId, setFpsElement, setAnimationFrameId } from '../fps/shared';
+
+const hideFps = () => {
+  // 停止帧率计算
+  if (animationFrameId.value !== null) {
+    cancelAnimationFrame(animationFrameId.value);
+    setAnimationFrameId(null);
+  }
+  
+  // 移除FPS显示元素
+  if (fpsElement.value) {
+    document.body.removeChild(fpsElement.value);
+    setFpsElement(null);
+  }
+};
+
+export default hideFps; 

src/plugins/fps/hideFpsExport.ts

@@ -0,0 +1,25 @@
+import { Plugin, PluginGroup } from '@/class/PluginCenter'
+import hideFps from './hideFps'
+import { EyeOffOutline } from '@vicons/ionicons5'
+import { PluginExportType } from '@/types/type'
+import { shallowRef } from 'vue'
+import { fpsElement } from '../fps/shared'
+
+const pluginConfig: Plugin = {
+   name: '隐藏FPS',
+   icon: shallowRef(EyeOffOutline),
+   filter: () => {
+      // 只有当FPS显示元素存在时才显示此按钮
+      return fpsElement.value !== null
+   },
+   disable: false,
+   group: [PluginGroup.mainMenu],
+   func: hideFps,
+   priority: 0
+}
+
+export default pluginConfig
+
+export const type = PluginExportType.default
+
+export const key = 'hideFps' 

src/plugins/fps/index.ts

@@ -0,0 +1,5 @@
+export * from './shared';
+export { default as showFps } from './showFps';
+export { default as hideFps } from './hideFps';
+export { default as showFpsPlugin } from './export_show';
+export { default as hideFpsPlugin } from './export_hide'; 

src/plugins/fps/shared.ts

@@ -0,0 +1,14 @@
+import { shallowRef } from 'vue';
+
+// 使用shallowRef包装状态
+export const fpsElement = shallowRef<HTMLDivElement | null>(null);
+export const animationFrameId = shallowRef<number | null>(null);
+
+// 更新设置函数
+export const setFpsElement = (el: HTMLDivElement | null) => {
+  fpsElement.value = el;
+};
+
+export const setAnimationFrameId = (id: number | null) => {
+  animationFrameId.value = id;
+}; 

src/plugins/fps/showFps.ts

@@ -0,0 +1,57 @@
+import { fpsElement, setFpsElement, setAnimationFrameId } from '../fps/shared';
+
+// const frameArr = new Array<number>(0)
+let lastTime: number = 0
+
+const createFpsElement = () => {
+    const el = document.createElement('div');
+    el.style.position = 'fixed';
+    el.style.top = '10px';
+    el.style.left = '10px';
+    el.style.backgroundColor = 'rgba(255, 255, 255, 0.2)';
+    el.style.pointerEvents = 'none';
+    el.style.userSelect = 'none';
+    el.style.color = 'green';
+    el.style.padding = '5px 10px';
+    el.style.borderRadius = '4px';
+    el.style.fontFamily = 'monospace';
+    el.style.fontSize = '14px';
+    el.style.zIndex = '9999';
+    document.body.appendChild(el);
+    return el;
+};
+
+const calculateFps = () => {
+    // const range = 1000
+    // const curr = new Date()
+    // frameArr.push(curr.getTime())
+    // while (frameArr[0] < curr.getTime() - range) {
+    //     frameArr.shift()
+    // }
+    // const fps = Math.floor(frameArr.length / range * 1000)
+    // if (fpsElement.value) {
+    //     fpsElement.value.textContent = `FPS: ${fps}`;
+    // }
+    // const id = requestAnimationFrame(calculateFps);
+    // setAnimationFrameId(id);
+    const curr = new Date()
+    const fps = Math.floor(1000 / (curr.getTime() - lastTime))
+    if (fpsElement.value && lastTime !== 0) {
+        fpsElement.value.textContent = `FPS: ${fps}`;
+    }
+    lastTime = curr.getTime()
+    const id = requestAnimationFrame(calculateFps);
+    setAnimationFrameId(id);
+};
+
+const showFps = () => {
+    if (fpsElement.value) return;
+
+    const el = createFpsElement();
+    setFpsElement(el);
+
+    const id = requestAnimationFrame(calculateFps);
+    setAnimationFrameId(id);
+};
+
+export default showFps; 

src/plugins/fullScreen/export.ts

@@ -0,0 +1,23 @@
+import { Plugin, PluginGroup } from '@/class/PluginCenter'
+import fullScreen from './fullScreen'
+import { ExpandOutline } from '@vicons/ionicons5'
+import { PluginExportType } from '@/types/type'
+import { shallowRef } from 'vue'
+
+const pluginConfig: Plugin = {
+   name: '全屏',
+   icon: shallowRef(ExpandOutline),
+   filter: () => {
+      return true
+   },
+   disable: false,
+   group: [PluginGroup.mainMenu],
+   func: fullScreen,
+   priority: -1
+}
+
+export default pluginConfig
+
+export const type = PluginExportType.default
+
+export const key = 'fullScreen'

src/plugins/fullScreen/fullScreen.ts

@@ -0,0 +1,4 @@
+const fullScreen = () => {
+   document.body.requestFullscreen()
+}
+export default fullScreen

src/plugins/miaoCodeMirror/export.ts

@@ -1,5 +1,6 @@
 import { registerComponentOption } from '@/class/PluginCenter'
 import { CodeOutline } from '@vicons/ionicons5'
+import { PluginExportType } from '@/types/type'
 
 const pluginConfig: registerComponentOption = {
    key: 'miaoCodeMirror',
@@ -29,7 +30,11 @@ const pluginConfig: registerComponentOption = {
          'yaml',
          'txt',
          'xml',
-            'vue'
+         'vue',
+         'srt',
+         'vtt',
+         'ass',
+         'ssa'
       ]) {
          if (vFiles[0].name.endsWith(end)) {
             return true
@@ -40,3 +45,5 @@ const pluginConfig: registerComponentOption = {
 }
 
 export default pluginConfig
+
+export const type = PluginExportType.component

src/plugins/miaoCodeMirror/miaoCodeMirror.vue

@@ -1,11 +1,18 @@
 <template>
    <miao-message-provider ref="miaoMessage">
-        <div class="codemirror-container" ref="rootRef" :class="`codemirror-container-${theme}`">
+      <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
+               class="codemirror-container-btn codemirror-container-btn-save"
+               @click="handleSave">
                保存
             </div>
-                <div class="codemirror-container-btn codemirror-container-btn-save" @click="handleReset">
+            <div
+               class="codemirror-container-btn codemirror-container-btn-save"
+               @click="handleReset">
                恢复到上次保存
             </div>
          </div>
@@ -145,13 +152,13 @@ onMounted(async () => {
    vFile.value = currentFiles.value[0]
    const fileName = currentFiles.value[0].name
    codeData.value = decoder.decode(
-        await (miaoFetchApi.getFile(currentFiles.value[0], {
+      await miaoFetchApi.getFile(currentFiles.value[0], {
          axiosOption: {
             headers: {
                'Cache-Control': 'no-cache'
             }
          }
-        }).response)
+      }).response
    )
    bakData.value = codeData.value
    extensions.value = [...(await getLangExtensions(fileName))]

src/plugins/miaoCrypto/_export.ts

@@ -0,0 +1,24 @@
+// @ts-nocheck
+import { registerComponentOption } from '@/class/PluginCenter'
+import { PluginExportType } from '@/types/type'
+
+const pluginConfig: registerComponentOption = {
+   key: 'miaoCrypto',
+   name: '文件加密',
+   getComponent: async () => (await import('./miaoCrypto.vue')).default,
+   filter: (vDirs, vFiles) => {
+      return true
+      if (vDirs.length !== 0) {
+         return false
+      }
+      if (vFiles.length !== 1) {
+         return false
+      }
+      return vFiles[0].name.endsWith('txt')
+   },
+   disable: true
+}
+
+export default pluginConfig
+
+export const type = PluginExportType.component

src/plugins/miaoCrypto/export.ts

@@ -1,21 +0,0 @@
-// @ts-nocheck
-import { registerComponentOption } from '@/class/PluginCenter'
-
-const pluginConfig: registerComponentOption = {
-    key: 'miaoCrypto',
-    name: '文件加密',
-    getComponent: async () =>
-        (await import('./miaoCrypto.vue')).default,
-    filter: (vDirs, vFiles) => {
-        return true
-        if (vDirs.length !== 0) {
-            return false
-        }
-        if (vFiles.length !== 1) {
-            return false
-        }
-        return vFiles[0].name.endsWith('txt')
-    },
-}
-
-export default pluginConfig

src/plugins/miaoCrypto/miaoCrypto.vue

@@ -3,22 +3,34 @@
       <div class="miaoCrypto-container">
          <div class="miaoCrypto-container-encrypt miaoCrypto-container-item">
             <n-scrollbar style="max-height: 100%">
-                    <div v-for="item of workItemList" :key="item.id" class="miaoCrypto-container-item-item">
-                        <div class="miaoCrypto-container-item-percentBar" :style="{
+               <div
+                  v-for="item of workItemList"
+                  :key="item.id"
+                  class="miaoCrypto-container-item-item">
+                  <div
+                     class="miaoCrypto-container-item-percentBar"
+                     :style="{
                         zIndex: 0,
-                            width: item.getBufferProgress !== -1 ? `${item.getBufferProgress * 100}%` : `0%`,
+                        width:
+                           item.getBufferProgress !== -1
+                              ? `${item.getBufferProgress * 100}%`
+                              : `0%`,
                         backgroundColor: 'blue'
                      }"></div>
-                        <div class="miaoCrypto-container-item-percentBar" :style="{
+                  <div
+                     class="miaoCrypto-container-item-percentBar"
+                     :style="{
                         zIndex: 1,
                         width: item.status === 'finish' ? `100%` : `0%`,
                         backgroundColor: 'green'
                      }"></div>
-                        <span class="miaoCrypto-container-item-content">{{ item.name }}{{ item.status }}</span>
+                  <span class="miaoCrypto-container-item-content">
+                     {{ item.name }}{{ item.status }}
+                  </span>
                </div>
             </n-scrollbar>
          </div>
-            <div class="miaoCrypto-container-decrypt miaoCrypto-container-item"></div>
+         <!-- <div class="miaoCrypto-container-decrypt miaoCrypto-container-item"></div> -->
       </div>
    </miao-drop-handler>
 </template>
@@ -38,7 +50,7 @@ const miaoFetchApi = useMiaoFetchApi()
 
 interface workItem {
    id: number
-    status: 'wait' | 'process' | 'finish'
+   status: 'wait' | 'process' | 'finish' | 'error'
    buffer?: Uint8Array
    getBuffer: () => Promise<Uint8Array>
    getBufferProgress: number
@@ -68,8 +80,12 @@ class Work {
          return
       }
       currentItem.status = 'process'
+      try {
          currentItem.buffer = await this.func(key.value, currentItem.buffer)
          currentItem.status = 'finish'
+      } catch (e) {
+         currentItem.status = 'error'
+      }
       this.funcLoop()
    }
    async getBufferLoop() {
@@ -81,7 +97,11 @@ class Work {
       }
       const item = _list[0]
       item.isGettingBuffer = true
+      try {
          item.buffer = await item.getBuffer()
+      } catch (e) {
+         item.status = 'error'
+      }
       item.isGettingBuffer = false
       this.funcLoop()
       this.getBufferLoop()
@@ -139,7 +159,7 @@ onMounted(() => {
 
 onUnmounted(() => {
    encryptWork.abortLoop = true
-    encryptWork.queue.forEach(item=>{
+   encryptWork.queue.forEach((item) => {
       item.getBufferAbort && item.getBufferAbort()
    })
 })
@@ -164,7 +184,8 @@ onUnmounted(() => {
          width: 95%;
          height: 40px;
          background-color: #fff;
-            box-shadow: 0 0 15px -7px rgba(0, 0, 0, 0.1725490196),
+         box-shadow:
+            0 0 15px -7px rgba(0, 0, 0, 0.1725490196),
             0 0 3px 1px #43434359;
          border-radius: 5px;
          position: relative;
@@ -179,7 +200,7 @@ onUnmounted(() => {
 
          .miaoCrypto-container-item-content {
             position: relative;
-                z-index: 3
+            z-index: 3;
          }
       }
    }

src/plugins/miaoDirectory/components/miaoDirectoryBottom.vue

@@ -1,26 +1,25 @@
 <template>
-    <div class="miao-directory-container-bottom" :style="{
-      backgroundColor:
-        index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
+   <div
+      class="miao-directory-container-bottom"
+      :style="{
+         backgroundColor: index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
       }">
       <div class="container-bottom-item">
          <div class="container-bottom-item-icon">
-          <add-outline :style="{
-            color:
-              index % 2 === 0
-                ? 'rgb(0 0 0)'
-                : 'rgb(255 255 255)'
-          }" @click="emit('add-new-item')" />
+            <add-outline
+               :style="{
+                  color: index % 2 === 0 ? 'rgb(0 0 0)' : 'rgb(255 255 255)'
+               }"
+               @click="emit('add-new-item')" />
          </div>
       </div>
       <div class="container-bottom-item">
          <div class="container-bottom-item-icon">
-          <cloud-upload-outline :style="{
-            color:
-              index % 2 === 0
-                ? 'rgb(0 0 0)'
-                : 'rgb(255 255 255)'
-          }" @click="emit('pick-files-upload')" />
+            <cloud-upload-outline
+               :style="{
+                  color: index % 2 === 0 ? 'rgb(0 0 0)' : 'rgb(255 255 255)'
+               }"
+               @click="emit('pick-files-upload')" />
          </div>
       </div>
    </div>

src/plugins/miaoDirectory/components/miaoDirectoryItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
+   <miao-draggable-div class="miao-item" :isDraggable="!draggable" ref="itemRef">
       <miaoContextMenu :options="dropDownOptions ?? []" :touch-time-out="500" @select="handleDropdownSelect">
          <div class="item-main" :class="selected ? 'item-main-selected' : ''" ref="mainRef">
             <div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
@@ -7,15 +7,20 @@
             <div class="item-main-info">
                <div class="item-main-info-name">
                   <Icon class="item-main-info-name-icon" v-if="clientWidth <= 250"></Icon>
-                        <n-ellipsis :style="{ maxWidth: clientWidth > 250 ? '80%' : '75%' }">{{ name }}</n-ellipsis>
+                  <n-ellipsis :style="{ maxWidth: clientWidth > 250 ? '80%' : '75%' }">
+                     {{ name }}
+                  </n-ellipsis>
                </div>
                <div class="item-main-info-date" v-if="time">
                   {{ time }}
                </div>
             </div>
+            <miao-draggable-div class="item-main-dragBtn" :isDraggable="draggable" @on-drag-start="handleDragStart">
+               <ReorderFourOutline></ReorderFourOutline>
+            </miao-draggable-div>
          </div>
       </miaoContextMenu>
-    </div>
+   </miao-draggable-div>
 </template>
 
 <script setup lang="ts">
@@ -30,19 +35,21 @@ import {
    LogoJavascript,
    LogoVue,
    PlayCircle,
-    Disc
+   Disc,
+   ReorderFourOutline
 } from '@vicons/ionicons5'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
-import dateFormatter from '@/hooks/dateFormatter'
+import dateFormatter from '@/utils/dateFormatter'
 import { NEllipsis } from 'naive-ui'
-import { DropdownOption } from 'naive-ui/es/dropdown';
+import { DropdownOption } from 'naive-ui/es/dropdown'
+import miaoDraggableDiv from '@/components/miaoDraggableDiv.vue'
 // import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
 
 // const miaoFetchApi = useMiaoFetchApi()
 
 const props = defineProps<{
    item: {
-        name: string,
+      name: string
       type: 'directory' | 'file'
       stats: {
          mtimeMs: number
@@ -58,23 +65,26 @@ const emit = defineEmits<{
    download: []
    delete: []
    rename: []
-    dragStart: [event: DragEvent]
+   dragStart: [e: DragEvent]
    onSelected: []
    plugin: [plugin: string]
 }>()
 
 const mainRef = ref<HTMLDivElement>()
 
+const draggable = ref(true)
+
 // 使用ResizeObserver实现
+// 什么？性能问题？这玩意性能问题多着呢，轮不到它。
 const clientWidth = ref<number>(666)
 
 const name = props.name ?? props.item.name
 
-const observer = new ResizeObserver(entries => {
+const observer = new ResizeObserver((entries) => {
    for (let entry of entries) {
-        clientWidth.value = entry.contentRect.width;
+      clientWidth.value = entry.contentRect.width
    }
-});
+})
 
 const time = computed(() => {
    return dateFormatter(
@@ -83,7 +93,6 @@ const time = computed(() => {
    )
 })
 
-// 是不是可以直接在这里面实现？
 // 应该将所有事件emit出去才对
 const handleDropdownSelect = (key: string) => {
    if (key === 'rename') {
@@ -112,9 +121,7 @@ const Icon = computed(() => {
             ['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 (
             [
@@ -157,20 +164,19 @@ const Icon = computed(() => {
 
 const itemRef = ref()
 
-const handleDragStart = (event: DragEvent) => {
-    emit('dragStart', event)
-    // dataBus.set('dragData', [props.item])
+const handleDragStart = (e: DragEvent) => {
+   emit('dragStart', e)
 }
 
 onMounted(() => {
    if (mainRef.value) {
-        observer.observe(mainRef.value);
+      observer.observe(mainRef.value)
    }
 })
 
 onBeforeUnmount(() => {
    if (mainRef.value) {
-        observer.unobserve(mainRef.value);
+      observer.unobserve(mainRef.value)
    }
 })
 </script>
@@ -178,7 +184,8 @@ onBeforeUnmount(() => {
 <style lang="scss" scoped>
 .miao-item {
    cursor: pointer;
-    width: calc(100% - 20px);
+   // width: calc(100% - 20px);
+   width: 100%;
    // min-width: 170px;
    // aspect-ratio: 66/9;
    height: 50px;
@@ -186,17 +193,18 @@ onBeforeUnmount(() => {
    display: flex;
    justify-content: center;
    align-items: center;
-    margin: 10px 10px;
+   // margin: 10px 10px;
 
    .item-main {
       position: relative;
       width: 100%;
-        height: 95%;
+      height: 100%;
       background-color: rgb(255, 255, 255);
       border-radius: 7px;
       display: flex;
       align-items: center;
       transition: background-color 0.3s ease;
+      overflow-x: hidden;
 
       .item-main-front {
          height: 100%;
@@ -239,6 +247,7 @@ onBeforeUnmount(() => {
          &-date {
             user-select: none;
             font-size: small;
+            text-wrap: nowrap;
          }
       }
 
@@ -282,8 +291,14 @@ onBeforeUnmount(() => {
 
       &:hover {
          background-color: rgba(0, 128, 207, 0.64);
-            ;
       }
    }
 }
+
+.item-main-dragBtn {
+   width: 20px;
+   height: 20px;
+   position: absolute;
+   right: 5px;
+}
 </style>

src/plugins/miaoDirectory/components/miaoDirectoryItemsContainer.vue

@@ -6,9 +6,12 @@
       }">
       <n-scrollbar ref="scrollbarRef" style="max-height: 100%">
          <miao-lazy-div
+            class="miao-directory-container-items-container"
             v-for="dir in showData_directory"
             :key="dir.id"
-                min-height="50px">
+            min-height="50px"
+            :disable-lazy="props.index < 20"
+            margin="10px">
             <miaoDirectoryItem
                :item="dir"
                :color="props.color"
@@ -22,6 +25,7 @@
                @on-selected="handleItemSelect(dir)" />
          </miao-lazy-div>
          <miao-lazy-div
+            class="miao-directory-container-items-container"
             v-for="file in showData_files"
             :key="file.id"
             min-height="50px">
@@ -49,7 +53,7 @@ import miaoDirectoryItem from './miaoDirectoryItem.vue'
 import miaoLazyDiv from '@/components/miaoLazyDiv.vue'
 import { computed, ref } from 'vue'
 import usePluginCenter from '@/hooks/usePluginCenter'
-import { renderIcon } from '@/hooks/miaoTools'
+import { renderIcon } from '@/utils/miaoTools'
 
 const pluginCenter = usePluginCenter()
 
@@ -177,5 +181,8 @@ defineExpose({
    width: 100%;
    flex: 1;
    min-height: 0;
+   .miao-directory-container-items-container {
+      margin: 10px;
+   }
 }
 </style>

src/plugins/miaoDirectory/components/miaoDirectoryTop.vue

@@ -1,32 +1,57 @@
 <template>
-    <div class="miao-directory-container-top" :style="{
-        backgroundColor:
-            index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
+   <div
+      class="miao-directory-container-top"
+      :style="{
+         backgroundColor: index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
       }">
-        <div class="container-top-colorfulBar" :style="{ backgroundColor: props.color }"></div>
+      <div
+         class="container-top-colorfulBar"
+         :style="{ backgroundColor: props.color }"></div>
       <div class="container-top-breadcrumb">
+         <n-scrollbar
+            ref="scrollbarRef"
+            :x-scrollable="true"
+            class="container-top-breadcrumb-scroll"
+            @wheel="handleWheel">
             <div class="container-top-breadcrumb-container">
-                <n-breadcrumb separator=">" style="margin-left: 5px">
+               <n-breadcrumb
+                  separator=">"
+                  class="sb-nn"
+                  style="margin-left: 5px">
                   <n-breadcrumb-item :clickable="false">
                      <n-icon size="18">
                         <CloudOutline />
                      </n-icon>
                   </n-breadcrumb-item>
-                    <n-breadcrumb-item v-for="dir in currentDirectory?.getParents"
-                        @click="handleClickBreadcrumbItem(dir)" :clickable="true">
-                        <div>{{ dir.name }}</div>
+                  <n-breadcrumb-item
+                     v-for="dir in currentDirectory?.getParents"
+                     @click="handleClickBreadcrumbItem(dir)"
+                     :clickable="true">
+                     <n-ellipsis class="!max-w-[100px]">
+                        {{ dir.name }}
+                     </n-ellipsis>
                   </n-breadcrumb-item>
                </n-breadcrumb>
             </div>
+         </n-scrollbar>
       </div>
       <div class="container-top-tools">
-            <n-icon class="container-top-tools-item" size="15" @click="$emit('back')">
+         <n-icon
+            class="container-top-tools-item"
+            size="15"
+            @click="$emit('back')">
             <ChevronBackOutline />
          </n-icon>
-            <n-icon class="container-top-tools-item" size="14" @click="$emit('reload')">
+         <n-icon
+            class="container-top-tools-item"
+            size="14"
+            @click="$emit('reload')">
             <ReloadOutline class="container-top-tools-item-reload" />
          </n-icon>
-            <n-dropdown trigger="click" :options="openMenuOption" @select="(key: string) => emit('menuSelect', key)">
+         <n-dropdown
+            trigger="click"
+            :options="openMenuOption"
+            @select="(key: string) => emit('menuSelect', key)">
             <n-icon class="container-top-tools-item" size="14">
                <EllipsisVertical />
             </n-icon>
@@ -36,37 +61,56 @@
 </template>
 
 <script setup lang="ts">
-import { NBreadcrumbItem, NBreadcrumb, NIcon, NDropdown } from 'naive-ui'
 import {
    CloudOutline,
    ChevronBackOutline,
    ReloadOutline,
-    EllipsisVertical,
+   EllipsisVertical
 } from '@vicons/ionicons5'
 import VirtualDirectory from '@/class/VirtualDirectory'
+import { ref } from 'vue'
+import { NScrollbar } from 'naive-ui/es/scrollbar';
 
 const props = defineProps<{
-    color: string;
+   color: string
    index: number
-    currentDirectory: VirtualDirectory | undefined;
+   currentDirectory: VirtualDirectory | undefined
    openMenuOption: {
-        key: string,
-        label: string,
-        [key: string]: any,
+      key: string
+      label: string
+      [key: string]: any
    }[]
 }>()
 
 const emit = defineEmits<{
-    back: [],
-    reload: [],
+   back: []
+   reload: []
    menuSelect: [key: string]
    'set-current-directory': [virtualDirectory: VirtualDirectory]
 }>()
 
+const scrollbarRef = ref<InstanceType<typeof NScrollbar>>()
+
 const handleClickBreadcrumbItem = (virtualDirectory: VirtualDirectory) => {
    emit('set-current-directory', virtualDirectory)
 }
 
+const handleWheel = (event: WheelEvent) => {
+   event.preventDefault()
+   event.stopPropagation()
+   if (scrollbarRef.value) {
+      scrollbarRef.value.scrollBy({
+         left: event.deltaY,
+         behavior: "smooth"
+      })
+   }
+}
+
+defineExpose({
+   // @ts-ignore
+   scrollTo: (...args: any[]) => scrollbarRef.value?.scrollTo(...args)
+   // getRef: () => scrollbarRef.value
+})
 </script>
 
 <style scoped lang="scss">
@@ -102,14 +146,15 @@ const handleClickBreadcrumbItem = (virtualDirectory: VirtualDirectory) => {
       border-radius: 0 3px 3px 0;
 
       .container-top-breadcrumb-container {
-            position: absolute;
-            height: 100%;
-            right: 0;
-            top: 0;
+         // position: absolute;
+         height: 21px;
+         // right: 0;
+         // top: 0;
          min-width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
+         overflow: hidden;
       }
    }
 
@@ -146,7 +191,14 @@ const handleClickBreadcrumbItem = (virtualDirectory: VirtualDirectory) => {
             transform: rotate(360deg);
          }
       }
-
+   }
+}
+</style>
+
+<style lang="scss">
+.container-top-breadcrumb-scroll {
+   .n-scrollbar-rail {
+      transform: translateY(5px);
    }
 }
 </style>

src/plugins/miaoDirectory/export.ts

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

src/plugins/miaoDirectory/export_onInit.ts

@@ -0,0 +1,40 @@
+import { Plugin, PluginGroup } from '@/class/PluginCenter'
+import { PluginExportType } from '@/types/type'
+import { watch } from 'vue'
+
+const pluginConfig: Plugin = {
+   name: '初始化完成之后打开miaoDirectory',
+   filter: () => {
+      return false
+   },
+   disable: false,
+   group: [PluginGroup.immediately],
+   func: (_, __, hooks) => {
+      const { getPluginCenter, getRootVDirectory, getViews } = hooks
+      const views = getViews()
+      const pc = getPluginCenter()
+      const root = getRootVDirectory()
+      setTimeout(() => {
+         if (views.length === 0) {
+            pc.usePlugin('miaoDirectory', [root])
+         }
+         watch(
+            () => views.length,
+            () => {
+               if (views.length === 0) {
+                  pc.usePlugin('miaoDirectory', [root])
+               }
+            }
+         )
+
+         pc.deregister('miaoDirectory_onInit')
+      })
+   },
+   priority: -1
+}
+
+export default pluginConfig
+
+export const type = PluginExportType.default
+
+export const key = 'miaoDirectory_onInit'

src/plugins/miaoDirectory/miaoDirectory.vue

@@ -3,9 +3,11 @@
       @on-virtual-directory="handleDropVDirectory"
       @on-files="handleDropFiles"
       @on-virtual-files="handleDropVirtualFiles">
+      <miaoAlertTipProvider ref="miaoAlertTip">
          <div class="miao-directory-item-container" ref="rootDomRef">
             <!-- 顶部面包屑导航和工具栏 -->
             <miao-directory-top
+               ref="miaoDirectoryTopRef"
                :color="props.color"
                :current-directory="currentDirectory"
                @back="handleBack"
@@ -42,6 +44,7 @@
             <miao-mask v-model:show="showModel"></miao-mask>
             <miao-popup-input ref="popupInput"></miao-popup-input>
          </div>
+      </miaoAlertTipProvider>
    </miao-drop-handler>
 </template>
 
@@ -53,16 +56,16 @@ import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
 import useDataBus from '@/hooks/useDataBus'
 import useUploadQueue from '@/hooks/useUploadQueue'
 import useVirtualPages from '@/hooks/useVirtualPages'
-import { filePicker, renderIcon } from '@/hooks/miaoTools'
-import { uniq } from 'lodash'
+import { filePicker, renderIcon } from '@/utils/miaoTools'
+import uniq from 'lodash/uniq'
 
-// 导入子组件
 import miaoDirectoryTop from './components/miaoDirectoryTop.vue'
 import MiaoDirectoryItems from './components/miaoDirectoryItemsContainer.vue'
 import MiaoDirectoryBottom from './components/miaoDirectoryBottom.vue'
 import MiaoMask from '@/components/miaoMask.vue'
 import MiaoPopupInput from '@/components/miaoPopupInput.vue'
 import MiaoDropHandler from '@/components/miaoDropHandler.vue'
+import miaoAlertTipProvider from '@/components/miaoAlertTipProvider.vue'
 import {
    CloseOutline,
    SearchOutline,
@@ -99,6 +102,8 @@ const searchText = ref<string>('')
 const showDirs = ref<boolean>(true)
 const showFiles = ref<boolean>(true)
 const miaoDirectoryItemRef = ref()
+const miaoDirectoryTopRef = ref<InstanceType<typeof miaoDirectoryTop>>()
+const miaoAlertTip = ref<InstanceType<typeof miaoAlertTipProvider>>()
 
 class SelectedItem {
    constructor() {
@@ -106,13 +111,20 @@ class SelectedItem {
    }
    _selectedItem: (VirtualDirectory | VirtualFile)[]
    push(item: VirtualDirectory | VirtualFile) {
-        this._selectedItem = [item, ...this._selectedItem]
+      this._selectedItem = uniq([item, ...this._selectedItem])
+   }
+   pushArray(items: (VirtualDirectory | VirtualFile)[]) {
+      this._selectedItem = uniq([...items, ...this._selectedItem])
    }
    remove(item: VirtualDirectory | VirtualFile) {
       this._selectedItem = this._selectedItem.filter((v) => v !== item)
    }
-    clear() {
-        this._selectedItem = []
+   /**
+    * 仅保留filter为true的元素, filter默认为()=>false
+    */
+   clear(filter?: (item: VirtualDirectory | VirtualFile) => boolean) {
+      filter || (filter = (__) => false)
+      this._selectedItem = this.value.filter(filter)
    }
    // 保证内容仍然存在于dir中且各个元素不重复
    get value() {
@@ -160,7 +172,7 @@ const showData_directory = computed<VirtualDirectory[]>(() => {
    if (searchText.value !== '') {
       data = data.filter((vd) => vd.name.includes(searchText.value))
    }
-    return data
+   return data.sort((a, b) => a.name.localeCompare(b.name))
 })
 const showData_files = computed<VirtualFile[]>(() => {
    if (showFiles.value === false) {
@@ -172,7 +184,7 @@ const showData_files = computed<VirtualFile[]>(() => {
    if (searchText.value !== '') {
       data = data.filter((vd) => vd.name.includes(searchText.value))
    }
-    return data
+   return data.sort((a, b) => a.name.localeCompare(b.name))
 })
 
 const topBarMenuOption = computed(() => {
@@ -199,13 +211,13 @@ const topBarMenuOption = computed(() => {
               icon: renderIcon(SearchOutline)
            }
          : undefined,
-        selectedItem.value.length !== 0
-            ? {
-                  label: '重置多选',
-                  key: 'selectedItemReset',
-                  icon: renderIcon(CheckmarkDoneOutline)
-              }
-            : undefined,
+      // selectedItem.value.length !== 0
+      //     ? {
+      //         label: '重置多选',
+      //         key: 'selectedItemReset',
+      //         icon: renderIcon(CheckmarkDoneOutline)
+      //     }
+      //     : undefined,
       {
          label: '筛选',
          key: 'filter',
@@ -223,6 +235,31 @@ const topBarMenuOption = computed(() => {
          ],
          icon: renderIcon(FilterOutline)
       },
+      {
+         label: '多选',
+         key: 'multiSelect',
+         children: [
+            {
+               label: `全选`,
+               key: 'multiSelect:all'
+            },
+            {
+               label: `全不选`,
+               key: 'multiSelect:reset'
+            },
+            {
+               label: `反选`,
+               key: 'multiSelect:inversion'
+            },
+            selectedItem.value.length === 2
+               ? {
+                    label: `区间内全选`,
+                    key: 'multiSelect:range'
+                 }
+               : undefined
+         ].filter((v) => v !== undefined),
+         icon: renderIcon(CheckmarkDoneOutline)
+      },
       {
          label: '插件',
          key: 'plugin',
@@ -247,11 +284,9 @@ const topBarMenuOption = computed(() => {
 
 // 设置显示的dir
 const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
+   try {
       // 若没有缓存数据则同步刷新，有缓存数据则异步刷新
-    if (
-        virtualDirectory.files === undefined ||
-        virtualDirectory.directories === undefined
-    ) {
+      if (!virtualDirectory.isUpdated) {
          await virtualDirectory.update()
       } else {
          virtualDirectory.update()
@@ -264,9 +299,25 @@ const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
                top: 0,
                behavior: 'instant'
             })
+            // miaoDirectoryTopRef.value &&
+            //    miaoDirectoryTopRef.value.scrollTo({
+            //    top: 0,
+            //    behavior: 'instant'
+            // })
+            miaoDirectoryTopRef.value?.scrollTo({
+               top: 0,
+               left: 999,
+               behavior: 'instant'
+            })
          })
       }
       currentDirectories.value[0] = virtualDirectory
+   } catch (e) {
+      miaoAlertTip.value?.alertTip(`获取文件夹内容出错`, {
+         type: 'error',
+         timeout: 3000
+      })
+   }
 }
 
 const reload = () => {
@@ -299,15 +350,59 @@ const handleTopBarMenuSelect = (key: string) => {
       handleAddNewItem()
    } else if (key === 'searchReset') {
       handleSearchReset()
-    } else if (key === 'selectedItemReset') {
-        selectedItem.clear()
+      // } else if (key === 'selectedItemReset') {
+      //     selectedItem.clear()
    } else if (key === 'showDirs') {
       showDirs.value = !showDirs.value
+      showDirs.value === false &&
+         selectedItem.clear((v) => v.type !== 'directory')
    } else if (key === 'showFiles') {
       showFiles.value = !showFiles.value
+      showFiles.value === false && selectedItem.clear((v) => v.type !== 'file')
    } else if (key.startsWith('plugin:')) {
       const pluginName = key.split(':')[1]
       pluginCenter.usePlugin(pluginName, [currentDirectory.value], [])
+   } else if (key.startsWith('multiSelect:')) {
+      const opName = key.split(':')[1]
+      switch (opName) {
+         case 'all':
+            selectedItem.pushArray([
+               ...showData_directory.value,
+               ...showData_files.value
+            ])
+            break
+         case 'reset':
+            selectedItem.clear()
+            break
+         case 'inversion':
+            const sArr = selectedItem.value
+            const arr = [
+               ...showData_directory.value,
+               ...showData_files.value
+            ].filter((i) => !sArr.includes(i))
+            selectedItem.clear()
+            selectedItem.pushArray(arr)
+            break
+         case 'range':
+            const _sArr = selectedItem.value
+            const _arr = [...showData_directory.value, ...showData_files.value]
+            const _nArr = []
+            let _counter = 0
+            for (const i of _arr) {
+               if (_sArr.includes(i)) {
+                  _counter++
+               }
+               if (_counter === 1) {
+                  _nArr.push(i)
+               } else if (_counter === 2) {
+                  _nArr.push(i)
+                  break
+               }
+            }
+            selectedItem.clear()
+            selectedItem.pushArray(_nArr)
+            break
+      }
    }
 }
 
@@ -326,7 +421,12 @@ const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
       handleItemSelect(item)
    } else {
       if (item.type === 'file') {
+         const useablePlugins = pluginCenter.getUsablePlugin([], [item])
+         if (useablePlugins.length > 0) {
+            pluginCenter.usePlugin(useablePlugins[0].key, [], [item])
+         } else {
             openUrl(`${baseUrl}${api.get}${item.path}`)
+         }
       } else if (item.type === 'directory') {
          setCurrentDirectory(item)
       }
@@ -341,18 +441,12 @@ const handleItemDownload = (item: VirtualFile) => {
 
 const handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
    for (let item of uniq([...selectedItem.value, _item])) {
-        ;(async () => {
-            const { response } = miaoFetchApi.delete(item, {
-                retry: 5
-            })
-            // todo: 将删除事件统一用一个事件管理中心管理
-            const id = (await response).eventId
-            const { response: res } = miaoFetchApi.query(id)
-            const eventResult = await res
-            if (eventResult.status === 'success') {
-                reload()
+      (async () => {
+         const success = await item.delete();
+         if (success) {
+            reload();
          }
-        })()
+      })();
    }
 }
 
@@ -383,14 +477,10 @@ const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
    if (!newName) {
       return
    }
-    const { response } = miaoFetchApi.rename(item, newName, {
-        retry: 5
-    })
-    const id = (await response).eventId
-    const { response: res } = miaoFetchApi.query(id)
-    const eventResult = await res
-    if (eventResult.status === 'success') {
-        reload()
+   
+   const success = await item.rename(newName);
+   if (success) {
+      reload();
    }
 }
 
@@ -420,46 +510,25 @@ const handleDropFiles = async (files: File[]) => {
 }
 
 const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
-    // 不能移到自己或自己的子文件夹内
-    for (let vDir of vDirs) {
-        if (currentDirectory.value.getParents.includes(vDir)) {
-            return
-        }
-        if (vDir.parent === currentDirectory.value) {
-            return
-        }
-    }
+   console.log(vDirs, currentDirectory.value)
    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()
+      (async () => {
+         const success = await dir.mv(currentDirectory.value);
+         if (success) {
+            reload();
          }
-        })()
+      })();
    }
 }
 
 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()
+      (async () => {
+         const success = await file.moveTo(currentDirectory.value);
+         if (success) {
+            reload();
          }
-        })()
+      })();
    }
 }
 

src/plugins/miaoIframe/export.ts

@@ -15,7 +15,11 @@ const pluginConfig: registerComponentOption = {
          return false
       }
       return vFiles[0].name.endsWith('html')
-    }
+   },
+   priority: 2
 }
 
 export default pluginConfig
+
+import { PluginExportType } from '@/types/type'
+export const type = PluginExportType.component

src/plugins/miaoIframe/miaoIframe.vue

@@ -1,6 +1,7 @@
 <template>
    <div class="miao-markdown-container-miaomiaomiao">
       <iframe
+         ref="iframeRef"
          :src="iframeSrc"
          frameborder="0"
          class="iframe-container-iframe"></iframe>
@@ -8,17 +9,35 @@
 </template>
 
 <script setup lang="ts">
-import { VirtualFile } from '@/class/VirtualDirectory'
-import { onMounted, ref } from 'vue'
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
+import cloneDeep from 'lodash/cloneDeep'
+import { inject, onMounted, ref } from 'vue'
+import buildFromTree from '../../utils/buildFromTree'
 
+const root = inject('rootDirectory') as VirtualDirectory
 const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
    required: true
 })
 
 const iframeSrc = ref<string>()
+const iframeRef = ref<HTMLIFrameElement>()
 
+const sendRootTree = () => {
+   iframeRef.value?.contentWindow &&
+      iframeRef.value.contentWindow.postMessage(cloneDeep(root.tree), '*')
+}
+
+const handleIframeMessage = (e: MessageEvent<any>) => {
+   e
+   // const data = e.data;
+   sendRootTree()
+}
 onMounted(() => {
    iframeSrc.value = currentFiles.value[0].url
+   if (typeof window.addEventListener != 'undefined') {
+      window.addEventListener('message', handleIframeMessage, false)
+   }
+   console.log(buildFromTree(cloneDeep(root.tree)))
 })
 </script>
 

src/plugins/miaoImages/export.ts

@@ -43,3 +43,6 @@ const pluginConfig: registerComponentOption = {
 }
 
 export default pluginConfig
+
+import { PluginExportType } from '@/types/type'
+export const type = PluginExportType.component

src/plugins/miaoImages/miaoImageViewer.vue

@@ -0,0 +1,129 @@
+<template>
+  <miao-mask :show="show" @click="$emit('close')" class="miaoImage-mask" @wheel="handleWheel">
+    <ChevronBack class="miaoImage-mask-btn miaoImage-mask-btn-back" @click.stop="$emit('back')" />
+    <MiaoDraggableDiv
+      v-if="file"
+      :is-draggable="isDraggable"
+      :bind-virtual-files="[file]"
+      @dragend="handleDragEnd"
+      @pointerdown="handlePressStart"
+      @pointerup="handlePressEnd"
+      @pointercancel="handlePressEnd"
+      @pointerleave="handlePressEnd"
+      @touchstart.passive="handleTouchStart"
+      @touchend="handleTouchEnd"
+    >
+      <img :src="file.url" class="miaoImage-mask-active" @click="(e) => e.stopPropagation()" draggable="false" :style="{ transform: `scale(${imgViewScale})` }" />
+    </MiaoDraggableDiv>
+    <ChevronForward class="miaoImage-mask-btn miaoImage-mask-btn-forward" @click.stop="$emit('forward')" />
+  </miao-mask>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import miaoMask from '@/components/miaoMask.vue'
+import MiaoDraggableDiv from '@/components/miaoDraggableDiv.vue'
+import { ChevronBack, ChevronForward } from '@vicons/ionicons5'
+import type { VirtualFile } from '@/class/VirtualDirectory'
+
+const props = defineProps<{
+  show: boolean
+  file?: VirtualFile
+}>()
+
+const emit = defineEmits<{
+  close: []
+  back: []
+  forward: []
+}>()
+
+const imgViewScale = ref(1)
+const isDraggable = ref(false)
+let pressTimer: number | undefined
+
+const clearPress = () => {
+  if (pressTimer !== undefined) {
+    clearTimeout(pressTimer)
+    pressTimer = undefined
+  }
+}
+
+const handlePressStart = () => {
+  clearPress()
+  pressTimer = window.setTimeout(() => {
+    isDraggable.value = true
+  }, 100)
+}
+
+const handlePressEnd = () => {
+  clearPress()
+  // 延迟复位，避免影响 drop
+  setTimeout(() => {
+    isDraggable.value = false
+  }, 0)
+}
+
+const handleTouchStart = () => handlePressStart()
+const handleTouchEnd = () => handlePressEnd()
+
+const handleDragEnd = () => {
+  isDraggable.value = false
+}
+
+const handleWheel = (e: WheelEvent) => {
+  if (e.deltaY < 0) {
+    imgViewScale.value *= 1.42857
+  } else {
+    imgViewScale.value /= 1.42857
+  }
+}
+
+watch(
+  () => props.file,
+  () => {
+    imgViewScale.value = 1
+    isDraggable.value = false
+    clearPress()
+  }
+)
+
+watch(
+  () => props.show,
+  (v) => {
+    if (!v) {
+      imgViewScale.value = 1
+      isDraggable.value = false
+      clearPress()
+    }
+  }
+)
+</script>
+
+<style scoped lang="scss">
+.miaoImage-mask {
+  background-color: rgba(0, 0, 0, 0.444);
+  overflow: hidden;
+}
+
+.miaoImage-mask-active {
+  max-width: 80%;
+  max-height: 80%;
+  user-select: none;
+}
+
+.miaoImage-mask-btn {
+  color: #ffffff99;
+  width: 7%;
+  position: absolute;
+  cursor: pointer;
+  z-index: 9999;
+
+  &-back {
+    left: 1%;
+  }
+
+  &-forward {
+    right: 1%;
+  }
+}
+</style>

src/plugins/miaoImages/miaoImages.vue

@@ -1,13 +1,9 @@
 <template>
-    <miao-drop-handler
-        @on-virtual-directory="handleDrop"
-        @on-virtual-files="handleDrop">
+   <miao-drop-handler @on-virtual-directory="handleDrop" @on-virtual-files="handleDrop">
       <miao-message-provider ref="miaoMessageRef">
          <div class="miaoImage" ref="rootRef">
-                <n-scrollbar ref="NScrollbarRef" style="max-height: 100%;">
-                    <div
-                        class="miaoImage-container"
-                        v-for="imageGroup in imageGroupList">
+            <n-scrollbar ref="NScrollbarRef" style="max-height: 100%">
+               <div class="miaoImage-container" v-for="imageGroup in imageGroupList">
                   <div class="miaoImage-container-day">
                      <!-- <div class="miaoImage-container-divide miaoImage-container-divide-before">
                             <div class="miaoImage-container-divide-line"></div>
@@ -19,55 +15,36 @@
                             <div class="miaoImage-container-divide-line"></div>
                         </div> -->
                   </div>
-                        <div
-                            class="miaoImage-container-row"
-                            v-for="vFile in imageGroup.items"
-                            :key="vFile.id">
-                            <img
-                                :src="vFile.url"
-                                class="miaoImage-container-row-image"
-                                loading="lazy"
-                                :class="
-                                    activeImage === vFile
+                  <div class="miaoImage-container-row" v-for="vFile in imageGroup.items" :key="vFile.id">
+                     <MiaoDraggableDiv :bind-virtual-files="[vFile]" class="size-full flex justify-center items-center">
+                        <img :src="vFile.url" class="miaoImage-container-row-image" loading="lazy" :class="activeImage === vFile
                               ? 'miaoImage-container-row-image-active'
                               : ''
-                                "
-                                @click="activeImage = vFile" />
+                           " @click="activeImage = vFile" />
+                     </MiaoDraggableDiv >
                   </div>
                </div>
             </n-scrollbar>
-                <miao-mask
+            <MiaoImageViewer
                :show="activeImage !== undefined"
-                    @click="activeImage = undefined"
-                    class="miaoImage-mask"
-                    @wheel="handleWheel">
-                    <ChevronBack
-                        class="miaoImage-mask-btn miaoImage-mask-btn-back"
-                        @click="handleActiveImageBack" />
-                    <img
-                        :src="activeImage?.url"
-                        class="miaoImage-mask-active"
-                        @click="(e) => e.stopPropagation()"
-                        draggable="false"
-                        :style="{transform: `scale(${imgViewScale})`}" />
-                    <ChevronForward
-                        class="miaoImage-mask-btn miaoImage-mask-btn-forward"
-                        @click="handleActiveImageForward" />
-                </miao-mask>
+               :file="activeImage"
+               @close="activeImage = undefined"
+               @back="handleActiveImageBack"
+               @forward="handleActiveImageForward"
+            />
          </div>
       </miao-message-provider>
    </miao-drop-handler>
 </template>
 
 <script setup lang="ts">
-import miaoMask from '@/components/miaoMask.vue'
 import miaoDropHandler from '@/components/miaoDropHandler.vue'
 import miaoMessageProvider from '@/components/miaoAlertTipProvider.vue'
 import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
-import { uniq } from 'lodash'
+import uniq from 'lodash/uniq'
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { NScrollbar } from 'naive-ui'
-import { ChevronBack, ChevronForward } from '@vicons/ionicons5'
+import MiaoImageViewer from './miaoImageViewer.vue'
 
 const imageSuffixList = [
    'xbm',
@@ -101,7 +78,6 @@ const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
 const NScrollbarRef = ref()
 const rootRef = ref<any>()
 const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
-const imgViewScale = ref(1)
 const imageFileList = ref<VirtualFile[]>([])
 const activeImage = ref<VirtualFile>()
 
@@ -111,7 +87,6 @@ const imageGroupList = computed(() => {
 
 watch(activeImage, () => {
    nextTick(scrollToActiveImage)
-    imgViewScale.value = 1
 })
 
 const groupByDay = (array: VirtualFile[]) => {
@@ -152,7 +127,8 @@ const scrollToActiveImage = () => {
    const dom = rootRef.value?.querySelector(
       '.miaoImage-container-row-image-active'
    )
-    dom && NScrollbarRef.value.scrollTo({
+   dom &&
+      NScrollbarRef.value.scrollTo({
          top: dom.offsetTop - 30,
          behavior: 'smooth'
       })
@@ -166,8 +142,7 @@ const handleActiveImageBack = (e: any) => {
    const index = imageFileList.value.indexOf(activeImage.value)
    activeImage.value =
       imageFileList.value[
-            (index - 1 + imageFileList.value.length) %
-                imageFileList.value.length
+      (index - 1 + imageFileList.value.length) % imageFileList.value.length
       ]
 }
 
@@ -179,8 +154,7 @@ const handleActiveImageForward = (e: any) => {
    const index = imageFileList.value.indexOf(activeImage.value)
    activeImage.value =
       imageFileList.value[
-            (index + 1 + imageFileList.value.length) %
-                imageFileList.value.length
+      (index + 1 + imageFileList.value.length) % imageFileList.value.length
       ]
 }
 
@@ -205,9 +179,7 @@ const handleDrop = async (vItems: (VirtualFile | VirtualDirectory)[]) => {
          : `导入${imageFileList.value.length - length_before}张图片`,
       {
          type:
-                length_before === imageFileList.value.length
-                    ? 'info'
-                    : 'success',
+            length_before === imageFileList.value.length ? 'info' : 'success',
          timeout: 5000
       }
    )
@@ -234,14 +206,6 @@ const updateImageSrcList = async (source: VirtualFile[] | VirtualDirectory) => {
    )
 }
 
-const handleWheel = (e: WheelEvent) => {
-    if (e.deltaY < 0) {
-        imgViewScale.value *= 1.42857
-    } else {
-        imgViewScale.value /= 1.42857
-    }
-}
-
 onMounted(async () => {
    const length_before = imageFileList.value.length
    for (const i of [currentFiles.value, ...currentDirectories.value]) {
@@ -253,9 +217,7 @@ onMounted(async () => {
          : `导入${imageFileList.value.length - length_before}张图片`,
       {
          type:
-                length_before === imageFileList.value.length
-                    ? 'info'
-                    : 'success',
+            length_before === imageFileList.value.length ? 'info' : 'success',
          timeout: 5000
       }
    )
@@ -355,6 +317,7 @@ onMounted(async () => {
       width: 7%;
       position: absolute;
       cursor: pointer;
+      z-index: 9999;
 
       &-back {
          left: 1%;

src/plugins/miaoKVMap/KVMapPlugin.vue

@@ -0,0 +1,211 @@
+<template>
+   <miao-alert-tip-provider ref="miaoMessageRef">
+      <div class="clipboard-container">
+         <n-card class="clipboard-card" title="剪贴板" size="medium">
+            <div class="key-section">
+               <n-input v-model:value="key" type="text" placeholder="请输入Key值" class="key-input" />
+               <div class="button-group">
+                  <n-button @click="getData" type="primary" size="small">查询</n-button>
+                  <n-button @click="setData" type="info" size="small">设置</n-button>
+                  <n-button @click="deleteData" type="error" size="small">删除</n-button>
+               </div>
+            </div>
+            <div class="data-section">
+               <n-input v-model:value="content" type="textarea" placeholder="数据内容"
+                  :autosize="{ minRows: 5, maxRows: 15 }" class="data-input" />
+            </div>
+            <div class="flex justify-end items-center gap-3">
+               <n-button @click="clearInput" type="error" size="small">清空输入</n-button>
+               <div class="flex justify-center items-center">
+                  <n-checkbox v-model:checked="useDisk">保存到磁盘</n-checkbox>
+               </div>
+            </div>
+            <div class="status-section" v-if="statusMessage">
+               <n-alert :type="statusType" class="status-alert">
+                  {{ statusMessage }}
+               </n-alert>
+            </div>
+         </n-card>
+      </div>
+   </miao-alert-tip-provider>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, inject } from 'vue'
+import {
+   NCard,
+   NInput,
+   NButton,
+   NCheckbox,
+   NAlert
+} from 'naive-ui'
+import miaoAlertTipProvider from '@/components/miaoAlertTipProvider.vue'
+import { alertTipType } from '@/types/type'
+
+const key = ref('')
+const content = ref('')
+const useDisk = ref(false)
+const statusMessage = ref('')
+const statusType = ref<'success' | 'error' | 'info' | 'warning'>('info')
+const miaoMessageRef = ref<InstanceType<typeof miaoAlertTipProvider>>()
+const globalAlertTip = inject<alertTipType>('globalAlertTip')
+
+// 计算磁盘参数
+const diskParam = computed(() => useDisk.value ? '1' : '0')
+
+// 显示状态消息
+const showStatus = (msg: string, type: 'success' | 'error' | 'info' | 'warning' = 'info') => {
+   statusMessage.value = msg
+   statusType.value = type
+   setTimeout(() => {
+      statusMessage.value = ''
+   }, 3000)
+}
+
+// 显示消息提示
+const showMessage = (content: string, type: 'success' | 'error' | 'info' = 'info') => {
+   if (miaoMessageRef.value?.alertTip) {
+      miaoMessageRef.value.alertTip(content, { type, timeout: 3000 })
+   } else if (globalAlertTip) {
+      globalAlertTip(content, { type, timeout: 3000 })
+   }
+}
+
+// 获取数据
+const getData = async () => {
+   if (!key.value.trim()) {
+      showMessage('请输入Key值', 'error')
+      return
+   }
+
+   try {
+      const response = await fetch(`/map/get/${key.value}?disk=${diskParam.value}`)
+
+      if (!response.ok) {
+         if (response.status === 404) {
+            showStatus('未找到对应的数据', 'warning')
+            showMessage('未找到对应的数据', 'error')
+         } else {
+            showStatus(`获取失败：${response.status}`, 'error')
+            showMessage(`获取失败：${response.status}`, 'error')
+         }
+         return
+      }
+
+      const data = await response.text()
+      content.value = data
+      showStatus('获取成功', 'success')
+      showMessage('获取成功', 'success')
+   } catch (error) {
+      showStatus(`获取失败：${error}`, 'error')
+      showMessage(`获取失败：${error}`, 'error')
+   }
+}
+
+// 设置数据
+const setData = async () => {
+   if (!key.value.trim()) {
+      showMessage('请输入Key值', 'error')
+      return
+   }
+
+   try {
+      const response = await fetch(`/map/set/${key.value}?disk=${diskParam.value}`, {
+         method: 'POST',
+         body: content.value
+      })
+
+      if (!response.ok) {
+         showStatus(`设置失败：${response.status}`, 'error')
+         showMessage(`设置失败：${response.status}`, 'error')
+         return
+      }
+
+      showStatus('设置成功', 'success')
+      showMessage('设置成功', 'success')
+   } catch (error) {
+      showStatus(`设置失败：${error}`, 'error')
+      showMessage(`设置失败：${error}`, 'error')
+   }
+}
+
+// 删除数据
+const deleteData = async () => {
+   if (!key.value.trim()) {
+      showMessage('请输入Key值', 'error')
+      return
+   }
+
+   try {
+      const response = await fetch(`/map/delete/${key.value}?disk=${diskParam.value}`, {
+         method: 'POST'
+      })
+
+      if (!response.ok) {
+         showStatus(`删除失败：${response.status}`, 'error')
+         showMessage(`删除失败：${response.status}`, 'error')
+         return
+      }
+
+      content.value = ''
+      showStatus('删除成功', 'success')
+      showMessage('删除成功', 'success')
+   } catch (error) {
+      showStatus(`删除失败：${error}`, 'error')
+      showMessage(`删除失败：${error}`, 'error')
+   }
+}
+
+// 清空输入
+const clearInput = () => {
+   key.value = ''
+   content.value = ''
+}
+</script>
+
+<style scoped lang="scss">
+.clipboard-container {
+   width: 100%;
+   height: 100%;
+   display: flex;
+   justify-content: center;
+   align-items: flex-start;
+   padding: 20px;
+}
+
+.clipboard-card {
+   width: 100%;
+   max-width: 600px;
+}
+
+.key-section {
+   display: flex;
+   margin-bottom: 16px;
+   gap: 10px;
+}
+
+.key-input {
+   flex: 1;
+}
+
+.button-group {
+   display: flex;
+   gap: 8px;
+}
+
+.data-section {
+   margin-bottom: 16px;
+}
+
+// .disk-option {
+//    // margin-bottom: 16px;
+// }
+
+.status-section {
+   margin-top: 16px;
+}
+
+.status-alert {
+   width: 100%;
+}
+</style>

src/plugins/miaoKVMap/export.ts

@@ -0,0 +1,18 @@
+import { registerComponentOption } from '@/class/PluginCenter'
+import { PluginExportType } from '@/types/type'
+import { CopyOutline } from '@vicons/ionicons5'
+
+const pluginConfig: registerComponentOption = {
+   key: 'miaoKVMap',
+   name: '键值存储',
+   icon: CopyOutline,
+   getComponent: async () => (await import('./KVMapPlugin.vue')).default,
+   filter: (_, __) => _.length === 0 && __.length === 0,
+   disable: false,
+   single: true,
+   priority: 0
+}
+
+export default pluginConfig
+
+export const type = PluginExportType.component 

src/plugins/miaoKVMap/export_mainMenu.ts

@@ -0,0 +1,25 @@
+import { Plugin, PluginGroup } from '@/class/PluginCenter'
+import { PluginExportType } from '@/types/type'
+import { shallowRef } from 'vue'
+import { CopyOutline } from '@vicons/ionicons5'
+
+const pluginConfig: Plugin = {
+   name: '键值存储',
+   icon: shallowRef(CopyOutline),
+   filter: (_, __, views) => {
+      return views.find('miaoKVMap').length === 0
+   },
+   disable: false,
+   group: [PluginGroup.mainMenu],
+   func(_, __, hooks) {
+      const { getPluginCenter } = hooks
+      const PluginCenter = getPluginCenter()
+      PluginCenter.usePlugin('miaoKVMap', [], [])
+   },
+   priority: 0
+}
+
+export default pluginConfig
+
+export const type = PluginExportType.default
+// export const key = 'miaoClipboard_mainMenu' 

src/plugins/miaoMarkdown/export.ts

@@ -19,3 +19,6 @@ const pluginConfig: registerComponentOption = {
 }
 
 export default pluginConfig
+
+import { PluginExportType } from '@/types/type'
+export const type = PluginExportType.component

src/plugins/miaoMarkdown/miaoMarkdown.vue

@@ -1,19 +1,20 @@
 <template>
    <n-scrollbar>
-    <div class="miao-markdown-container-miaomiaomiao" v-html="renderedMarkdown"></div>
-    <div style="height: 50px; width: 100%;"></div>
+      <div
+         class="miao-markdown-container-miaomiaomiao"
+         v-html="renderedMarkdown"></div>
+      <div style="height: 50px; width: 100%"></div>
    </n-scrollbar>
 </template>
 
 <script setup lang="ts">
-import { NScrollbar } from 'naive-ui';
+import { NScrollbar } from 'naive-ui'
 import { VirtualFile } from '@/class/VirtualDirectory'
 import { onMounted, ref } from 'vue'
 import MarkdownIt from 'markdown-it'
-import useMiaoFetchApi from '@/hooks/useMiaoFetchApi';
+import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
 
-
-    const decoder = new TextDecoder('utf-8');
+const decoder = new TextDecoder('utf-8')
 
 const miaoFetchApi = useMiaoFetchApi()
 
@@ -28,7 +29,9 @@ const md = new MarkdownIt()
 
 onMounted(async () => {
    markdownSrc.value = currentFiles.value[0].url
-  const text = decoder.decode(await(miaoFetchApi.getFile(currentFiles.value[0])).response)
+   const text = decoder.decode(
+      await miaoFetchApi.getFile(currentFiles.value[0]).response
+   )
    renderedMarkdown.value = md.render(text)
 })
 </script>
@@ -56,11 +59,11 @@ onMounted(async () => {
    }
 
    tr:nth-child(even) {
-    background-color: #f2f2f2
+      background-color: #f2f2f2;
    }
 
    th {
-    background-color: #04AA6D;
+      background-color: #04aa6d;
       color: white;
    }
 }

src/plugins/miaoMusicPlayer/export.ts

@@ -0,0 +1,36 @@
+import { registerComponentOption } from '@/class/PluginCenter'
+import { PluginExportType } from '@/types/type'
+import Disc from '@vicons/ionicons5/es/Disc'
+
+const pluginConfig: registerComponentOption = {
+   key: 'miaoMusicPlayer',
+   name: '音乐',
+   icon: Disc,
+   getComponent: async () => (await import('./miaoMusicPlayer.vue')).default,
+   filter: (vDirs, vFiles) => {
+      if (vDirs.length === 0 && vFiles.length === 0) {
+         return true
+      }
+      if (vDirs.length !== 0) {
+         return false
+      }
+      if (vFiles.length === 0) {
+         return false
+      }
+      for (let i of vFiles) {
+         for (let s of ['mp3', 'flac', 'ogg', 'mp4']) {
+            if (i.name.endsWith(s)) {
+               return true
+            }
+         }
+      }
+      return false
+   },
+   disable: false,
+   single: true,
+   priority: 5
+}
+
+export default pluginConfig
+
+export const type = PluginExportType.component

src/plugins/miaoMusicPlayer/export_mainMenu.ts

@@ -0,0 +1,26 @@
+import { Plugin, PluginGroup } from '@/class/PluginCenter'
+import { PluginExportType } from '@/types/type'
+import { shallowRef } from 'vue'
+import Disc from '@vicons/ionicons5/es/Disc'
+
+const pluginConfig: Plugin = {
+   name: '音乐',
+   icon: shallowRef(Disc),
+   filter: (_, __, views) => {
+      return views.find('miaoMusicPlayer').length === 0
+   },
+   disable: false,
+   group: [PluginGroup.mainMenu],
+   func(_, __, hooks) {
+      const { getPluginCenter } = hooks
+      const PluginCenter = getPluginCenter()
+      PluginCenter.usePlugin('miaoMusicPlayer', [], [])
+   },
+   priority: -1
+}
+
+export default pluginConfig
+
+export const type = PluginExportType.default
+
+export const key = 'musicPlayer-mainMenu'