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,7 +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

@@ -1,13 +1,28 @@
 ## TODO list:
 
-| 任务 | 状态 | 
+| 计划 | 状态 |
 |---|---|
 | 拆分miaoDirectory | ✅ |
 | 完善视频插件 | ✅ |
 | 完善PDF插件 | ✅ |
 | 完善Code插件 | ✅ |
-| 实现miaoDirectory的搜索功能 | ❌ |
+| 实现miaoDirectory的搜索功能 | ✅ |
+| 创建音乐播放器组件（仿QQ音乐移动端吧） | ✅ |
+| plugin增加些属性，icon, disable, group之类的 | ✅ |
+| 实现miaoDirectory的排序功能 | ✅ |
+| 重构主界面，拆分主界面组件的实现 | ✅ |
+| 重构miaoFetchApi.getFile， 增加进度 | ❌ |
 | 完善miaoDirectory的搜索功能 | ❌ |
 | 完善图片浏览插件 | ❌ |
 | VirtualDirectory更新时更新文件信息 | ❌ |
 | miaoDirectory的复制文件/文件夹功能 | ❌ |
+| 重构miaoDropHandler的实现 | ❌ |
+
+
+| 长期计划 |
+|---|
+| 无 |
+
+## 碎碎念：
+
+写的真潦草

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 && 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,24 +25,43 @@
         "@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",
-        "vue": "^3.4.35",
+        "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"
     },
     "devDependencies": {
+        "@types/aes-js": "^3.1.4",
         "@types/lodash": "^4.17.7",
+        "@types/markdown-it": "^14.1.2",
         "@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,65 +1,63 @@
 <script setup lang="ts">
-import { h, onMounted, reactive, ref, shallowRef } from 'vue'
-import { NIcon, NScrollbar, NDropdown, NQrCode } from 'naive-ui'
 import {
-    EyeOffOutline,
-    EyeOutline,
-    CloseOutline,
-    CopyOutline,
-    EllipsisVertical,
-    QrCodeOutline
-} from '@vicons/ionicons5'
-import miaoDirectory from '@/views/miaoDirectory.vue'
-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 config from './config'
+import MiaoMessageProvider from './components/miaoAlertTipProvider.vue'
+// import config from './config'
 import useVirtualPages from './hooks/useVirtualPages'
 import init from './hooks/init'
+import usePluginCenter from './hooks/usePluginCenter'
+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 = 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) {
-        createView(miaoDirectory, [rootDirectory])
-    }
 }
 
 // 点击标题是隐藏其他标签或显示其他标签，还挺好用的
 const handleClickTitle = (index: number) => {
    let count = views._views.filter((v) => v.visible).length
-    let op = !views._views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
+   let op =
+      !views._views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
    let _index = 0
    while (_index < views._views.length) {
       if (_index !== index) {
@@ -71,343 +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)
-    }
-]
-
-const handleMenuSelect = (key: string) => {
-    if (key === 'share') {
-        showModal.value = true
-        modalData.value = {
-            component: NQrCode,
-            props: {
-                value: baseUrl,
-                size: 300,
-                errorCorrectionLevel: 'H'
-            }
-        }
-    }
-}
-
-onMounted(() => {
-    init()
-    createView(miaoDirectory, [rootDirectory])
+         },
+         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: 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.value = usePluginCenter()
+})
+
+// @ts-ignore
+provide('globalAlertTip', messageProviderRef.value?.alertTip)
+provide('rootDirectory', rootDirectory)
 </script>
 
 <template>
-    <div class="view">
-        <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.uid">
-                            <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.uid">
-                    <component
-                        :is="view.component"
-                        v-model:current-directories="view.currentDirectories"
-                        v-model:current-files="view.currentFiles"
-                        :id="view.uid"
-                        :color="view.color"
-                        @exit="deleteView(index)"></component>
-                </div>
-            </transition-group>
-        </div>
+   <div class="view" ref="viewRef">
+      <miao-message-provider ref="messageProviderRef">
+         <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: 200px;
-        }
-
-        &::-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 {
-                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,44 +1,104 @@
 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'
 
-type plugin = {
+export enum PluginGroup {
+   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
+   // 若为true，则只会创建一个页面，当存在已创建页面则会直接将VFile和VDir加到curr里面
+   single?: boolean
+   priority?: number
+}
+
+export type Plugin = {
    // 用于显示的名字
    name: string
-    // 判断是否可以使用这个组件
+   // 代表插件的icon
+   icon?: ShallowRef<any>
+   // 是否禁用插件
+   disable: boolean
+   // 插件所属的group，用于区分插件使用的场合
+   group: PluginGroup[]
+   // 插件优先级
+   priority: number
+   // 判断在未禁用时是否可以使用这个组件
    // 使用组件即调用下面的func
-    filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
-    func: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => void
+   filter: (
+      VDirectories: VirtualDirectory[],
+      VFiles: VirtualFile[],
+      VPages: VirtualPages
+   ) => boolean
+   func: (
+      VDirectories: VirtualDirectory[],
+      VFiles: VirtualFile[],
+      hooks: usePluginHooksType,
+      ...args: any[]
+   ) => void
 }
 
 export default class PluginCenter {
-    constructor() {
+   constructor(globalAlertTip: alertTipType) {
       this.pluginsMap = {}
+      this.globalAlertTip = globalAlertTip
    }
    pluginsMap: {
-        [key: string]: plugin
+      [key: string]: Plugin
    }
 
-    register(key: string, plugin: plugin) {
+   globalAlertTip: alertTipType
+
+   register(key: string, plugin: 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(
-        key: string,
-        name: string,
-        getComponent: () => Promise<any>,
-        filter: (
-            VDirectories: VirtualDirectory[],
-            VFiles: VirtualFile[]
-        ) => boolean
-    ): void {
+   registerComponent(option: registerComponentOption): void {
+      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,
+         priority,
          func: async (
             VDirectories: VirtualDirectory[],
             VFiles: VirtualFile[]
@@ -46,30 +106,90 @@ export default class PluginCenter {
             if (filter(VDirectories, VFiles) === false) {
                return
             }
-                if (_component === undefined) _component = await getComponent()
-                views.push(_component, VDirectories, VFiles)
+
+            if (_component === undefined) {
+               const setAlertTip = this.globalAlertTip(`加载 ${name} 插件中`)
+               _component = await getComponent()
+               setAlertTip &&
+                  setAlertTip(`加载 ${name} 插件完成`, {
+                     type: 'success',
+                     timeout: 2000
+                  })
+            }
+            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,
+                     allowCopy: single === false
+                  }
+               })
+            }
          }
       })
    }
 
-    getUsablePlugin(VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) {
+   getUsablePlugin(
+      VDirectories: VirtualDirectory[],
+      VFiles: VirtualFile[],
+      option?: {
+         group?: PluginGroup[]
+      }
+   ) {
+      const { group = [PluginGroup.default] } = option ?? {}
       const usableList = []
+      const views = useVirtualPages()
       for (let key of Object.keys(this.pluginsMap)) {
-            if (this.pluginsMap[key].filter(VDirectories, VFiles)) {
+         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
    }
 
+   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[]
+      VDirectories?: VirtualDirectory[],
+      VFiles?: VirtualFile[],
+      ...args: any[]
    ) {
-        this.pluginsMap[key].func(VDirectories, VFiles)
+      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.uid = 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;
-	uid: 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.uid = 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
 
-	uid: 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,75 +1,109 @@
-import { reactive, shallowRef } from "vue";
-import VirtualDirectory, { VirtualFile } from "./VirtualDirectory";
-import generateId from "@/hooks/generateId";
+import { Component, reactive, shallowRef } from 'vue'
+import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
+import generateId from '@/utils/generateId'
+
+export interface VirtualPageOption {
+   exitConfirm?: boolean
+   allowCopy?: boolean
+}
+
+export interface ViewsPushOption {
+   index?: number
+   VirtualPageOption?: VirtualPageOption
+}
 
 const getRandomWebSafeColor = (() => {
-	const webSafeColors = ["#009900", "#999900", "#009999", "#990099", "#0000ee"];
-	let counter = 0;
+   const webSafeColors = ['#009900', '#999900', '#009999', '#990099', '#0000ee']
+   let counter = 0
    return () => {
-		const color = webSafeColors[counter % webSafeColors.length];
-		counter += 1;
-		return color;
-	};
-})();
+      const color = webSafeColors[counter % webSafeColors.length]
+      counter += 1
+      return color
+   }
+})()
 
 export default class VirtualPage {
-	constructor(component: any, initObjects?: { directories?: VirtualDirectory[]; files?: VirtualFile[] }) {
-		this.component = shallowRef(component);
-		this.currentDirectories = initObjects?.directories ?? [];
-		this.currentFiles = initObjects?.files ?? [];
-		this.visible = true;
-		this.uid = generateId();
-		this.refreshKey = Math.random();
-		this.color = getRandomWebSafeColor();
+   constructor(
+      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 ?? []
+      this.visible = true
+      this.id = generateId()
+      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;
+   visible: boolean
    // 当前正在使用的文件夹
-	currentDirectories: VirtualDirectory[];
+   currentDirectories: VirtualDirectory[]
    // 当前正在使用的文件
-	currentFiles: VirtualFile[];
+   currentFiles: VirtualFile[]
+   // 页面数据存储
+   pageStorage: { [key: string]: any }
    // 区分每一个页面的唯一id
-	uid: number;
+   id: number
    // 当refreshKey改变时需要刷新页面，目前还没接入刷新
-	refreshKey: number;
+   refreshKey: number
    // 为了区分，每个虚拟页面都会分配一个color，这个color会体现在tab上
-	color: string;
+   color: string
    // 用于展示的title
-	_title?: string;
+   _title?: string
+   // 关闭时是否需要确认（未实现）
+   exitConfirm: boolean
+   // 是否允许复制页面
+   allowCopy: boolean
 
    get title() {
       if (this._title) {
-			return this._title;
+         return this._title
       }
-		return this?.currentDirectories[0]?.name ?? this?.currentFiles[0]?.name ?? "未命名标签";
+      return (
+         this?.currentDirectories[0]?.name ??
+         this?.currentFiles[0]?.name ??
+         '未命名标签'
+      )
    }
 
    setTitle(title: string) {
-		this._title = title;
+      this._title = title
    }
 
    // 切换显示状态
    switchShow() {
-		this.visible = !this.visible;
+      this.visible = !this.visible
    }
 
    // 刷新，不过好像没有用得到的时候吧
    // 事实上也不应该用得到，因为更新应该是响应式的
    refresh() {
-		this.refreshKey = Math.random();
+      this.refreshKey = Math.random()
    }
 }
 
 export class VirtualPages {
    constructor() {
-		this._views = reactive<VirtualPage[]>([]);
+      this._views = reactive<VirtualPage[]>([])
    }
-	_views: VirtualPage[];
+   _views: VirtualPage[]
 
    get length() {
-		return this._views.length;
+      return this._views.length
    }
 
    /**
@@ -79,11 +113,11 @@ export class VirtualPages {
     */
    getIndex(id: number) {
       for (let i in this._views) {
-			if (this._views[i].uid === id) {
-				return parseInt(i);
+         if (this._views[i].id === id) {
+            return parseInt(i)
          }
       }
-		return -1;
+      return -1
    }
    /**
     * 根据id得到view
@@ -91,33 +125,59 @@ export class VirtualPages {
     */
    getView(id: number) {
       for (let v of this._views) {
-			if (v.uid === id) {
-				return v;
+         if (v.id === id) {
+            return v
          }
       }
-		return undefined;
+      return undefined
    }
 
    /**
     * 推入一个新的页面
     */
-	push(component: any, currentDirectories?: VirtualDirectory[], currentFiles?: VirtualFile[], index?: number) {
-		index ?? (index = this.length);
+   push(
+      component: Component,
+      name: string,
+      currentDirectories?: VirtualDirectory[],
+      currentFiles?: VirtualFile[],
+      option?: ViewsPushOption
+   ) {
+      const { index = this.length, VirtualPageOption } = option ?? {}
       this._views.splice(
          index,
          0,
          reactive<VirtualPage>(
             new VirtualPage(component, {
+               name,
                directories: [...(currentDirectories ?? [])],
-					files: [...(currentFiles ?? [])]
+               files: [...(currentFiles ?? [])],
+               option: VirtualPageOption
             })
          )
-		);
+      )
    }
    /**
     * 根据次序删除一个页面
     */
    deleteView(index: number) {
-		this._views.splice(index, 1);
+      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

@@ -0,0 +1,158 @@
+<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"
+            :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>
+      </transition-group>
+   </div>
+</template>
+
+<script setup lang="ts">
+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
+}
+
+const iconMap = {
+   info: { icon: InformationCircle, color: 'blue' },
+   success: { icon: CheckmarkCircle, color: 'green' },
+   error: { icon: CloseCircle, color: 'red' }
+}
+
+const messageMap = shallowReactive<Record<string, Message | undefined>>({})
+const rootRef = ref<HTMLDivElement>()
+const maxMessageWidth = ref<number>(-1)
+
+const messageList = computed(() => {
+   return Object.keys(messageMap).map((v) => ({
+      id: v,
+      ...messageMap[v]
+   }))
+})
+const alertTip = (content: string, options?: AlertTipMessageOptions) => {
+   let timer: any
+   const { timeout = 0, type = 'info', id = generateId() } = options ?? {}
+   if (timeout > 0) {
+      messageMap[id]?.timer && clearTimeout(messageMap[id]?.timer)
+      timer = setTimeout(() => {
+         delete messageMap[id]
+      }, timeout)
+   }
+   messageMap[id] = {
+      icon: iconMap[type].icon,
+      iconColor: iconMap[type].color,
+      content,
+      timer
+   }
+   return (newContent: string, newOptions?: AlertTipMessageOptions) => {
+      newOptions = newOptions ?? {}
+      newOptions.id = id
+      alertTip(newContent, newOptions)
+   }
+}
+
+onMounted(async () => {
+   // const set = message('test', { timeout: 5000 })
+   // setTimeout(() => {
+   //     set('miao', { type: 'success' })
+   // }, 1000);
+   const observer = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+         maxMessageWidth.value = entry.contentRect.width * 0.8
+      }
+   })
+   if (rootRef.value) {
+      observer.observe(rootRef.value)
+   }
+})
+
+defineExpose({ alertTip })
+</script>
+
+<style scoped lang="scss">
+.miao-message-provider {
+   width: 100%;
+   height: 100%;
+   position: relative;
+   overflow: hidden;
+
+   .miao-message-provider-container {
+      position: absolute;
+      width: 0;
+      height: 0;
+      left: 50%;
+      top: 30px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      overflow: visible;
+      z-index: 70582140539943419;
+
+      .miao-message {
+         display: flex;
+         align-items: center;
+         width: max-content;
+         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, 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;
+
+         .miao-message-item {
+            margin: 0 5px;
+         }
+
+         .miao-message-item-content {
+            white-space: pre-wrap;
+         }
+      }
+   }
+
+   .message-fade-move,
+   .message-fade-enter-active,
+   .message-fade-leave-active {
+      transition: all 0.5s ease;
+   }
+
+   .message-fade-enter-from,
+   .message-fade-leave-to {
+      opacity: 0;
+      transform: translateX(30px);
+   }
+
+   .message-fade-leave-active {
+      position: absolute;
+   }
+}
+</style>

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/miaoDirectory/miaoDirectoryBottom.vue

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

src/components/miaoDirectory/miaoDirectoryItem.vue

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

src/components/miaoDirectory/miaoDirectoryItemsContainer.vue

@@ -1,82 +0,0 @@
-<template>
-    <div class="miao-directory-container-items" :style="{
-        backgroundColor:
-            index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
-    }">
-        <n-scrollbar ref="scrollbarRef">
-            <miao-lazy-div v-for="(dir, index) in showData_directory" :key="dir.uid" :disableLazy="index < 20"
-                min-height="50px">
-                <miaoDirectoryItem :item="dir" :color="props.color" :selectedItem="selectedItem"
-                    @delete="handleItemDelete(dir)" @click="handleItemClick(dir)" @drag-start="handleItemDragStart"
-                    @rename="handleItemRename(dir)" @on-selected="handleItemSelect(dir)" />
-            </miao-lazy-div>
-            <miao-lazy-div v-for="(file, index) in showData_files" :key="file.uid" :disableLazy="index < 20"
-                min-height="50px">
-                <miaoDirectoryItem :item="file" :color="props.color" :selectedItem="selectedItem"
-                    @click="handleItemClick(file)" @download="handleItemDownload(file)" @delete="handleItemDelete(file)"
-                    @drag-start="handleItemDragStart" @rename="handleItemRename(file)"
-                    @on-selected="handleItemSelect(file)" />
-            </miao-lazy-div>
-        </n-scrollbar>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { NScrollbar } from 'naive-ui'
-import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
-import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue'
-import miaoLazyDiv from '@/components/miaoLazyDiv.vue'
-import { ref } from 'vue';
-
-const props = defineProps<{
-    color: string
-    index: number
-    showData_directory: VirtualDirectory[]
-    showData_files: VirtualFile[]
-    selectedItem: (VirtualFile | VirtualDirectory)[]
-}>()
-
-const emit = defineEmits<{
-    'item-click': [item: VirtualDirectory | VirtualFile]
-    'item-download': [item: VirtualFile]
-    'item-delete': [item: VirtualDirectory | VirtualFile]
-    'item-drag-start': [_event: DragEvent, item: VirtualDirectory | VirtualFile]
-    'item-rename': [item: VirtualDirectory | VirtualFile]
-    'item-select': [item: VirtualDirectory | VirtualFile]
-}>()
-
-const scrollbarRef = ref()
-
-defineExpose({ scrollTo: (...args: any) => scrollbarRef.value.scrollTo(...args) });
-
-const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
-    emit('item-click', item)
-}
-
-const handleItemDownload = (item: VirtualFile) => {
-    emit('item-download', item)
-}
-
-const handleItemDelete = (item: VirtualDirectory | VirtualFile) => {
-    emit('item-delete', item)
-}
-
-const handleItemDragStart = (_event: DragEvent, item: VirtualDirectory | VirtualFile) => {
-    emit('item-drag-start', _event, item)
-}
-
-const handleItemRename = (item: VirtualDirectory | VirtualFile) => {
-    emit('item-rename', item)
-}
-
-const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
-    emit('item-select', item)
-}
-</script>
-
-<style scoped lang="scss">
-.miao-directory-container-items {
-    width: 100%;
-    height: calc(100% - 30px - 60px);
-}
-</style>

src/components/miaoDirectory/miaoDirectoryTop.vue

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

src/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,6 +1,6 @@
 <template>
    <div
-        class="container"
+      class="miao-drop-container"
       @dragover="handleDragOver"
       @dragleave="handleDragLeave"
       @drop="handleDrop">
@@ -16,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
@@ -61,10 +68,25 @@ 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) => {
-    showMask.value += 1
+   if (props.disable || check(event) === false) {
+      return
+   }
    event.preventDefault()
+   if (showMask.value === 1) {
+      return
+   }
+   showMask.value = 1
 }
 
 const handleDragLeave = async () => {
@@ -72,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()
@@ -98,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/components/miaoMessageProvider.vue

@@ -1,147 +0,0 @@
-<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"
-                :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>
-        </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'
-
-interface MessageOptions {
-    type?: 'info' | 'success' | 'error'
-    timeout?: number
-    id?: number
-}
-
-interface Message {
-    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' },
-}
-
-const messageMap = shallowReactive<Record<string, Message | undefined>>({})
-const rootRef = ref<HTMLDivElement>()
-const maxMessageWidth = ref<number>(-1)
-
-const messageList = computed(() => {
-    return Object.keys(messageMap).filter(v => messageMap[v] !== undefined).map(v => ({
-        id: v,
-        ...messageMap[v],
-    }))
-})
-const message = (content: string, options?: MessageOptions) => {
-    let timer: any
-    const { timeout = 0, type = 'info', id = generateId() } = options ?? {}
-    if (timeout > 0) {
-        messageMap[id]?.timer && clearTimeout(messageMap[id]?.timer)
-        timer = setTimeout(() => {
-            messageMap[id] = undefined
-        }, timeout)
-    }
-    messageMap[id] = {
-        icon: iconMap[type].icon,
-        iconColor: iconMap[type].color,
-        content,
-        timer
-    }
-    return (newContent: string, newOptions?: MessageOptions) => {
-        newOptions = newOptions ?? {}
-        newOptions.id = id
-        message(newContent, newOptions)
-    }
-}
-
-onMounted(async () => {
-    // const set = message('test', { timeout: 5000 })
-    // setTimeout(() => {
-    //     set('miao', { type: 'success' })
-    // }, 1000);
-    const observer = new ResizeObserver(entries => {
-        for (let entry of entries) {
-            maxMessageWidth.value = entry.contentRect.width * 0.8;
-        }
-    });
-    if (rootRef.value) {
-        observer.observe(rootRef.value);
-    }
-})
-
-
-defineExpose({ message });
-</script>
-
-<style scoped lang="scss">
-.miao-message-provider {
-    width: 100%;
-    height: 100%;
-    position: relative;
-
-    .miao-message-provider-container {
-        position: absolute;
-        width: 0;
-        height: 0;
-        left: 50%;
-        top: 30px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        overflow: visible;
-
-        .miao-message {
-            display: flex;
-            align-items: center;
-            width: max-content;
-            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);
-            border-radius: 5px;
-            user-select: none;
-            margin-top: 10px;
-
-            .miao-message-item {
-                margin: 0 5px;
-            }
-
-            .miao-message-item-content {
-                white-space: pre-wrap;
-            }
-        }
-    }
-
-    .message-fade-move,
-    .message-fade-enter-active,
-    .message-fade-leave-active {
-        transition: all 0.5s ease;
-    }
-
-    .message-fade-enter-from,
-    .message-fade-leave-to {
-        opacity: 0;
-        transform: translateX(30px);
-    }
-
-    .message-fade-leave-active {
-        position: absolute;
-    }
-}
-</style>

src/components/miaoPopupInput.vue

@@ -2,34 +2,53 @@
    <miao-mask v-model:show="showMask">
       <n-card class="popup-card" :title="popupConfig?.title" size="medium">
          {{ popupConfig?.content }}
-      <n-input class="popup-input" v-model:value="inputValue" type="text" v-bind="popupConfig?.inputProps"
+         <n-input
+            class="popup-input"
+            v-model:value="inputValue"
+            type="text"
+            v-bind="popupConfig?.inputProps"
+            passively-activated
+            autofocus
             v-if="popupConfig?.inputProps" />
          <div class="popup-button-container">
-        <n-button class="popup-button-container-button" v-for="option in popupConfig?.options" :key="option.label"
-          :type="option.type" @click="_resolve && _resolve(option.key)">{{ option.label }}</n-button>
+            <n-button
+               class="popup-button-container-button"
+               v-for="option in popupConfig?.options"
+               :key="option.label"
+               :type="option.type"
+               @click="_resolve && _resolve(option.key)">
+               {{ option.label }}
+            </n-button>
          </div>
       </n-card>
    </miao-mask>
 </template>
 <script lang="ts" setup>
-import { ref, nextTick } from "vue";
-import { NCard, NInput, NButton } from "naive-ui";
-import miaoMask from "./miaoMask.vue";
-import { InputProps } from "naive-ui";
+import { ref, nextTick } from 'vue'
+import { NCard, NInput, NButton } from 'naive-ui'
+import miaoMask from './miaoMask.vue'
+import { InputProps } from 'naive-ui'
 
-const showMask = ref(false);
-const inputValue = ref<string>("");
+const showMask = ref(false)
+const inputValue = ref<string>('')
 const _resolve = ref()
 
 type popupConfigType = {
    title: string
    content?: string
-  inputValue?: string,
+   inputValue?: string
    inputProps?: InputProps
    options: {
       label: string
       key: unknown
-    type: 'default' | 'tertiary' | 'primary' | 'success' | 'info' | 'warning' | 'error'
+      type:
+         | 'default'
+         | 'tertiary'
+         | 'primary'
+         | 'success'
+         | 'info'
+         | 'warning'
+         | 'error'
    }[]
 }
 
@@ -43,7 +62,7 @@ const popup = async (config: popupConfigType) => {
       _resolve.value = resolve
    })
    const text = inputValue.value
-  showMask.value = false;
+   showMask.value = false
    nextTick(() => {
       inputValue.value = ''
       _resolve.value = undefined
@@ -51,10 +70,10 @@ const popup = async (config: popupConfigType) => {
    return {
       text,
       key
-  };
-};
+   }
+}
 
-defineExpose({ popup });
+defineExpose({ popup })
 </script>
 
 <style scoped lang="scss">

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/generateId.ts

@@ -1,16 +0,0 @@
-const idList: number[] = [];
-
-/**
- * 生成一个唯一的id
- * @param {any} length 生成id的长度
- * @returns {number}
- */
-export default function generateId(length?: number) {
-	length || (length = 16);
-	let id;
-	while (!id || idList.includes(id)) {
-		id = Math.ceil(Math.random() * 10 ** 16);
-	}
-	idList.push(id)
-    return id
-}

src/hooks/init.ts

@@ -1,121 +1,6 @@
-import MiaoDirectory from '@/views/miaoDirectory.vue'
-import usePluginCenter from './usePluginCenter'
+import { alertTipType } from '@/types/type'
+import initPlugin from './init/initPlugin'
 
-export default function init() {
-    const pluginCenter = usePluginCenter()
-    pluginCenter.registerComponent(
-        'miaoDirectory',
-        '文件夹',
-        async () => MiaoDirectory,
-        (vDirs, vFiles) => {
-            if (vFiles.length) {
-                return false
-            }
-            return vDirs.length === 1
-        }
-    )
-    pluginCenter.registerComponent(
-        'miaoVideoPlayer',
-        '视频',
-        async () => (await import('@/views/miaoVideoPlayer.vue')).default,
-        (vDirs, vFiles) => {
-            if (vDirs.length !== 0) {
-                return false
-            }
-            if (vFiles.length === 0) {
-                return false
-            }
-            for (let i of vFiles) {
-                for (let s of ['mp4', 'm3u8', 'hls']) {
-                    if (i.name.endsWith(s)) {
-                        return true
-                    }
-                }
-            }
-            return false
-        }
-    )
-    pluginCenter.registerComponent(
-        'miaoIframe',
-        '框架',
-        async () => (await import('@/views/miaoIframe.vue')).default,
-        (vDirs, vFiles) => {
-            if (vDirs.length !== 0) {
-                return false
-            }
-            if (vFiles.length !== 1) {
-                return false
-            }
-            return vFiles[0].name.endsWith('html')
-        }
-    )
-    pluginCenter.registerComponent(
-        'miaoPDF',
-        'PDF浏览',
-        async () => (await import('@/views/miaoPDF.vue')).default,
-        (vDirs, vFiles) => {
-            if (vDirs.length !== 0) {
-                return false
-            }
-            if (vFiles.length !== 1) {
-                return false
-            }
-            return vFiles[0].name.endsWith('pdf')
-        }
-    )
-    pluginCenter.registerComponent(
-        'miaoCodeMirror',
-        '代码编辑',
-        async () => (await import('@/views/miaoCodeMirror.vue')).default,
-        (vDirs, vFiles) => {
-            if (vDirs.length !== 0) {
-                return false
-            }
-            if (vFiles.length !== 1) {
-                return false
-            }
-            for (let end of [
-                'js',
-                'ts',
-                'jsx',
-                'tsx',
-                'py',
-                'html',
-                'css',
-                'scss',
-                'go',
-                'json',
-                'md',
-                'yaml',
-                'txt',
-                'xml',
-                'vue',
-            ]) {
-                if (vFiles[0].name.endsWith(end)) {
-                    return true
-                }
-            }
-            return false
-        }
-    )
-	pluginCenter.registerComponent(
-		"miaoImages",
-		"图片浏览",
-		async () => (await import("@/views/miaoImages.vue")).default,
-		(vDirs, vFiles) => {
-			if (vDirs.length === 0 && vFiles.length === 0) {
-				return false;
-			}
-            if( vDirs.length ) {
-                return true
-            }
-			for (let vf of vFiles)
-				for (let end of ["xbm", "tif", "pjp", "svgz", "jpg", "jpeg", "ico", "tiff", "gif", "svg", "jfif", "webp", "png", ".bmp", "pjpeg", "avif"]) {
-					if (vf.name.endsWith(end)) {
-						return true
-					}
-				}
-			return false;
-		}
-	);
+export default async function init(globalAlertTip: alertTipType) {
+   await initPlugin(globalAlertTip)
 }

src/hooks/init/initPlugin.ts

@@ -0,0 +1,32 @@
+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', {
+      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)
+      }
+   }
+}
+
+export default initPlugin

src/hooks/miaoTools.ts

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

src/hooks/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

@@ -8,17 +8,21 @@ import {
    queryOption,
    renameOption,
    cutOption,
-    mkdirOption
+   mkdirOption,
+   getFileOption,
+   copyOption
 } from '@/types/fetch'
 import Config from '@/config'
-import axios, { AxiosRequestConfig } from 'axios'
+import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
 
 export const useMiaoFetch = (option?: miaoFetchConfig) => {
    const retry = option?.retry ?? 0
    const controller = new AbortController()
    let flag = true
    return {
-        miaoFetch: async (config: AxiosRequestConfig<any>) => {
+      miaoFetch: async (
+         config: AxiosRequestConfig<any>
+      ): Promise<AxiosResponse<any, any>> => {
          let counter = 0
          let response: any
          let errList = []
@@ -68,24 +72,37 @@ const miaoFetchApi = {
    },
 
    /**
-     * 获取对应文件夹下的数据
+    * 获取对应文件下的数据
     */
-    async getFile(
-        vFile: VirtualFile,
-        option?: getOption
-    ): Promise<getResponse> {
+   getFile(vFile: VirtualFile, option?: getFileOption) {
       // const { baseUrl, api } = Config
       const url = vFile.url
       const retry = option?.retry ?? 0
       const axiosOption = option?.axiosOption ?? {}
 
-        const { miaoFetch } = useMiaoFetch({
+      const { miaoFetch, abortMiaoFetch: abort } = useMiaoFetch({
          retry
       })
-        const response = await miaoFetch({
-            url, ...axiosOption
+      const response = miaoFetch({
+         url,
+         responseType: 'arraybuffer',
+         onDownloadProgress(progressEvent) {
+            option &&
+               option.onProcess &&
+               option.onProcess(
+                  progressEvent.total
+                     ? progressEvent.loaded / progressEvent.total
+                     : -1
+               )
+         },
+         ...axiosOption
       })
-        return response.data
+      return {
+         response: new Promise<Uint8Array>(async (resolve) => {
+            resolve(new Uint8Array((await response).data))
+         }),
+         abort
+      }
    },
 
    /**
@@ -254,6 +271,35 @@ const miaoFetchApi = {
       }
    },
 
+   /**
+    * 复制文件或文件夹
+    */
+   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)
+         })
+      }
+   },
+
    /**
     * 查询服务端操作事件的进展
     */

src/hooks/usePluginCenter.ts

@@ -1,11 +1,15 @@
-import PluginCenter from "@/class/PluginCenter";
-import { reactive } from "vue";
+import PluginCenter from '@/class/PluginCenter'
+import { alertTipType } from '@/types/type'
+import { reactive } from 'vue'
 
 let pluginCenter: PluginCenter
 
-export default function usePluginCenter(){
+export const initPluginCenter = (globalAlertTip: alertTipType) => {
    if (!pluginCenter) {
-        pluginCenter = reactive(new PluginCenter())
+      pluginCenter = reactive(new PluginCenter(globalAlertTip))
    }
+}
+
+export default function usePluginCenter() {
    return 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

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

src/plugins/miaoCodeMirror/miaoCodeMirror.vue

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

src/plugins/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/hooks/AES.ts

@@ -0,0 +1,19 @@
+import aesJs from 'aes-js'
+import aes_worker from '../workers/aes-worker?worker'
+
+/**
+ * 使用worker进行aes加密
+ * @param {any} key:string 须保证长度正确
+ * @param {any} data:Uint8Array
+ * @returns {Uint8Array}
+ */
+export default (key: string, data: Uint8Array) => {
+   const key_u8i = aesJs.utils.utf8.toBytes(key)
+   return new Promise<Uint8Array>((resolve) => {
+      const aesWorker = new aes_worker()
+      aesWorker.onmessage = (event) => {
+         resolve(event.data)
+      }
+      aesWorker.postMessage({ data, key: key_u8i })
+   })
+}

src/plugins/miaoCrypto/miaoCrypto.vue

@@ -0,0 +1,208 @@
+<template>
+   <miao-drop-handler @on-virtual-files="handleDropVirtualFiles">
+      <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="{
+                        zIndex: 0,
+                        width:
+                           item.getBufferProgress !== -1
+                              ? `${item.getBufferProgress * 100}%`
+                              : `0%`,
+                        backgroundColor: 'blue'
+                     }"></div>
+                  <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>
+               </div>
+            </n-scrollbar>
+         </div>
+         <!-- <div class="miaoCrypto-container-decrypt miaoCrypto-container-item"></div> -->
+      </div>
+   </miao-drop-handler>
+</template>
+
+<script setup lang="ts">
+import { NScrollbar } from 'naive-ui'
+import { onUnmounted, ref, shallowReactive } from 'vue'
+import aes_ctr_worker from './hooks/AES'
+import { VirtualFile } from '@/class/VirtualDirectory'
+import miaoDropHandler from '@/components/miaoDropHandler.vue'
+import { reactive } from 'vue'
+import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
+import { onMounted } from 'vue'
+import { computed } from 'vue'
+
+const miaoFetchApi = useMiaoFetchApi()
+
+interface workItem {
+   id: number
+   status: 'wait' | 'process' | 'finish' | 'error'
+   buffer?: Uint8Array
+   getBuffer: () => Promise<Uint8Array>
+   getBufferProgress: number
+   getBufferAbort?: () => void
+   isGettingBuffer: boolean
+   name: string
+}
+
+class Work {
+   constructor(func: (key: string, data: Uint8Array) => Promise<Uint8Array>) {
+      this.queue = []
+      this.func = func
+      this.abortLoop = false
+   }
+   queue: workItem[]
+   func: (key: string, data: Uint8Array) => Promise<Uint8Array>
+   abortLoop: boolean
+   get isBusy() {
+      return this.queue.filter((v) => v.status === 'process').length > 0
+   }
+   async funcLoop() {
+      if (this.isBusy || this.abortLoop) {
+         return
+      }
+      const currentItem = this.queue.filter((v) => v.status === 'wait')[0]
+      if (currentItem === undefined || currentItem.buffer === undefined) {
+         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() {
+      const _list = this.queue.filter(
+         (v) => v.isGettingBuffer === false && v.buffer === undefined
+      )
+      if (_list.length === 0 || this.abortLoop) {
+         return
+      }
+      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()
+   }
+   push(itemList: workItem[]) {
+      this.queue.push(...itemList)
+      this.getBufferLoop()
+   }
+   pushVFiles(itemList: VirtualFile[]) {
+      this.push(
+         itemList.map((v) => {
+            const item: workItem = shallowReactive({
+               id: Math.random(),
+               status: 'wait',
+               name: v.name,
+               getBuffer: () => {
+                  const { response, abort } = miaoFetchApi.getFile(v, {
+                     onProcess(percent) {
+                        item.getBufferProgress = percent
+                     }
+                  })
+                  item.getBufferAbort = abort
+                  return response
+               },
+               isGettingBuffer: false,
+               getBufferProgress: 0
+            })
+            return item
+         })
+      )
+   }
+}
+
+const encryptWork = reactive(new Work(aes_ctr_worker))
+// const decryptWork = reactive(new Work(aes_ctr_worker))
+
+const workItemList = computed(() => [
+   ...encryptWork.queue
+   // ...decryptWork.queue
+])
+
+const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
+   required: true
+})
+
+const key = ref('ABlockIs16Bytes!')
+
+const handleDropVirtualFiles = (vFiles: VirtualFile[]) => {
+   encryptWork.pushVFiles(vFiles)
+}
+
+onMounted(() => {
+   encryptWork.pushVFiles(currentFiles.value)
+})
+
+onUnmounted(() => {
+   encryptWork.abortLoop = true
+   encryptWork.queue.forEach((item) => {
+      item.getBufferAbort && item.getBufferAbort()
+   })
+})
+</script>
+
+<style scoped lang="scss">
+.miaoCrypto-container {
+   width: 100%;
+   height: 100%;
+   display: flex;
+   flex-direction: column;
+
+   &-item {
+      max-height: 100%;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      &-item {
+         margin: 10px auto;
+         width: 95%;
+         height: 40px;
+         background-color: #fff;
+         box-shadow:
+            0 0 15px -7px rgba(0, 0, 0, 0.1725490196),
+            0 0 3px 1px #43434359;
+         border-radius: 5px;
+         position: relative;
+
+         .miaoCrypto-container-item-percentBar {
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+            border-radius: 5px;
+         }
+
+         .miaoCrypto-container-item-content {
+            position: relative;
+            z-index: 3;
+         }
+      }
+   }
+}
+</style>

src/plugins/miaoCrypto/workers/aes-worker.ts

@@ -0,0 +1,9 @@
+import aesJs from 'aes-js'
+
+self.onmessage = async function (event) {
+   const data = event.data.data as Uint8Array
+   const key = event.data.key as Uint8Array
+   var aesCtr = new aesJs.ModeOfOperation.ctr(key, new aesJs.Counter(7058))
+   const encryptData = aesCtr.encrypt(data)
+   self.postMessage(encryptData)
+}

src/plugins/miaoDirectory/components/miaoDirectoryBottom.vue

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

src/plugins/miaoDirectory/components/miaoDirectoryItem.vue

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

src/plugins/miaoDirectory/components/miaoDirectoryItemsContainer.vue

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

src/plugins/miaoDirectory/components/miaoDirectoryTop.vue

@@ -0,0 +1,204 @@
+<template>
+   <div
+      class="miao-directory-container-top"
+      :style="{
+         backgroundColor: index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
+      }">
+      <div
+         class="container-top-colorfulBar"
+         :style="{ backgroundColor: props.color }"></div>
+      <div class="container-top-breadcrumb">
+         <n-scrollbar
+            ref="scrollbarRef"
+            :x-scrollable="true"
+            class="container-top-breadcrumb-scroll"
+            @wheel="handleWheel">
+            <div class="container-top-breadcrumb-container">
+               <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">
+                     <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')">
+            <ChevronBackOutline />
+         </n-icon>
+         <n-icon
+            class="container-top-tools-item"
+            size="14"
+            @click="$emit('reload')">
+            <ReloadOutline class="container-top-tools-item-reload" />
+         </n-icon>
+         <n-dropdown
+            trigger="click"
+            :options="openMenuOption"
+            @select="(key: string) => emit('menuSelect', key)">
+            <n-icon class="container-top-tools-item" size="14">
+               <EllipsisVertical />
+            </n-icon>
+         </n-dropdown>
+      </div>
+   </div>
+</template>
+
+<script setup lang="ts">
+import {
+   CloudOutline,
+   ChevronBackOutline,
+   ReloadOutline,
+   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
+   index: number
+   currentDirectory: VirtualDirectory | undefined
+   openMenuOption: {
+      key: string
+      label: string
+      [key: string]: any
+   }[]
+}>()
+
+const emit = defineEmits<{
+   back: []
+   reload: []
+   menuSelect: [key: string]
+   'set-current-directory': [virtualDirectory: VirtualDirectory]
+}>()
+
+const 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">
+.miao-directory-container-top {
+   height: 30px;
+   width: 100%;
+   user-select: none;
+   position: relative;
+   display: flex;
+   align-items: center;
+   overflow: hidden;
+   background-color: #f1f1f1;
+
+   .container-top-colorfulBar {
+      height: 70%;
+      width: 5px;
+      margin-left: 10px;
+      border-radius: 3px 0 0 3px;
+   }
+
+   .container-top-breadcrumb {
+      position: relative;
+      height: 70%;
+      width: calc(100% - 95px);
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      // overflow: hidden;
+      overflow-y: hidden;
+      overflow-x: hidden;
+      background-color: #ffffff;
+      padding: 0 5px;
+      border-radius: 0 3px 3px 0;
+
+      .container-top-breadcrumb-container {
+         // position: absolute;
+         height: 21px;
+         // right: 0;
+         // top: 0;
+         min-width: 100%;
+         display: flex;
+         justify-content: flex-start;
+         align-items: center;
+         overflow: hidden;
+      }
+   }
+
+   .container-top-tools {
+      position: relative;
+      height: 100%;
+      // width: 70px;
+      padding: 0 5px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      .container-top-tools-item {
+         width: 20px;
+         height: 20px;
+         margin: 0 1px;
+         display: flex;
+         justify-content: center;
+         align-items: center;
+         background-color: #ffffff00;
+         border-radius: 5px;
+         transition: background-color 0.3s;
+         cursor: pointer;
+
+         .container-top-tools-item-reload {
+            transition: transform 0.6s ease-in-out;
+         }
+
+         &:hover {
+            background-color: rgba(128, 128, 128, 0.4);
+         }
+
+         &:active .container-top-tools-item-reload {
+            transform: rotate(360deg);
+         }
+      }
+   }
+}
+</style>
+
+<style lang="scss">
+.container-top-breadcrumb-scroll {
+   .n-scrollbar-rail {
+      transform: translateY(5px);
+   }
+}
+</style>

src/plugins/miaoDirectory/export.ts

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

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

src/plugins/miaoIframe/export.ts

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

src/plugins/miaoIframe/miaoIframe.vue

@@ -0,0 +1,53 @@
+<template>
+   <div class="miao-markdown-container-miaomiaomiao">
+      <iframe
+         ref="iframeRef"
+         :src="iframeSrc"
+         frameborder="0"
+         class="iframe-container-iframe"></iframe>
+   </div>
+</template>
+
+<script setup lang="ts">
+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>
+
+<style scoped lang="scss">
+.miao-markdown-container-miaomiaomiao {
+   width: 100%;
+   height: 100%;
+   .iframe-container-iframe {
+      width: inherit;
+      height: inherit;
+   }
+}
+</style>

src/plugins/miaoImages/export.ts

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