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,10 +24,60 @@ dist-ssr
 *.sln
 *.sw?
 .vscode
+
 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

@@ -63,7 +63,7 @@ export default {
      * @default false
      * @type {boolean}
      */
-    bracketSameLine: false,
+    bracketSameLine: true,
     /**
      * 当箭头函数只有一个参数是否加括号
      * @default "always"
@@ -99,6 +99,6 @@ export default {
      * @default true
      * @type {boolean}
      */
-    singleAttributePerLine: true,
-    disableLanguages: ['html']
+    // singleAttributePerLine: true,
+    // disableLanguages: ['html']
 }

README.md

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

auto-imports.d.ts

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

build.auto.release.sh

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

components.d.ts

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

package.json

@@ -8,7 +8,8 @@
         "dev:host": "vite --host 0.0.0.0",
         "build": "vue-tsc -b && vite build",
         "build:auto": "pnpm run build && go env -w GOOS=windows GOARCH=amd64 && rm -rf ./src-server/web/* && cp -r ./dist/* ./src-server/web/ && cd ./src-server && go env -w GOOS=windows && go build -o ../miao-directory.exe",
-        "build:auto:release": "pnpm run build && rm -rf ./src-server/web/* && cp -r ./dist/* ./src-server/web/ && cd ./src-server && 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",
+        "build:fast": "bash build.auto.release.sh -fast",
+        "build:normal": "bash build.auto.release.sh",
         "preview": "vite preview",
         "format": "prettier --write src/"
     },
@@ -24,6 +25,8 @@
         "@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",
@@ -39,6 +42,7 @@
         "pdfjs-dist": "^4.5.136",
         "sass": "^1.77.8",
         "sortablejs": "^1.15.3",
+        "tailwindcss": "^4.0.13",
         "vue": "3.5.0",
         "vue-codemirror": "^6.1.1",
         "vue-draggable-plus": "^0.5.3",
@@ -56,6 +60,8 @@
         "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"

pnpm-lock.yaml

@@ -41,6 +41,12 @@ importers:
       '@codemirror/lang-yaml':
         specifier: ^6.1.1
         version: 6.1.1(@codemirror/view@6.33.0)
+      '@mediapipe/tasks-genai':
+        specifier: ^0.10.22
+        version: 0.10.22
+      '@tailwindcss/vite':
+        specifier: ^4.0.13
+        version: 4.0.13(vite@5.4.0(@types/node@22.1.0)(lightningcss@1.29.2)(sass@1.77.8))
       '@types/sortablejs':
         specifier: ^1.15.8
         version: 1.15.8
@@ -86,6 +92,9 @@ importers:
       sortablejs:
         specifier: ^1.15.3
         version: 1.15.3
+      tailwindcss:
+        specifier: ^4.0.13
+        version: 4.0.13
       vue:
         specifier: 3.5.0
         version: 3.5.0(typescript@5.5.4)
@@ -119,7 +128,7 @@ importers:
         version: 2.10.378
       '@vitejs/plugin-vue':
         specifier: ^5.1.2
-        version: 5.1.2(vite@5.4.0(@types/node@22.1.0)(sass@1.77.8))(vue@3.5.0(typescript@5.5.4))
+        version: 5.1.2(vite@5.4.0(@types/node@22.1.0)(lightningcss@1.29.2)(sass@1.77.8))(vue@3.5.0(typescript@5.5.4))
       prettier:
         specifier: ^3.4.2
         version: 3.4.2
@@ -132,12 +141,18 @@ importers:
       typescript:
         specifier: ^5.5.3
         version: 5.5.4
+      unplugin-auto-import:
+        specifier: ^19.1.1
+        version: 19.1.1
+      unplugin-vue-components:
+        specifier: ^28.4.1
+        version: 28.4.1(@babel/parser@7.25.3)(vue@3.5.0(typescript@5.5.4))
       vite:
         specifier: ^5.4.0
-        version: 5.4.0(@types/node@22.1.0)(sass@1.77.8)
+        version: 5.4.0(@types/node@22.1.0)(lightningcss@1.29.2)(sass@1.77.8)
       vite-plugin-singlefile:
         specifier: ^2.0.2
-        version: 2.0.2(rollup@4.20.0)(vite@5.4.0(@types/node@22.1.0)(sass@1.77.8))
+        version: 2.0.2(rollup@4.20.0)(vite@5.4.0(@types/node@22.1.0)(lightningcss@1.29.2)(sass@1.77.8))
       vue-tsc:
         specifier: ^2.0.29
         version: 2.0.29(typescript@5.5.4)
@@ -427,6 +442,9 @@ packages:
     resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==}
     hasBin: true
 
+  '@mediapipe/tasks-genai@0.10.22':
+    resolution: {integrity: sha512-nAFOptwdeg0h3D2jLm4JDR+rTHu9l2Nd7em7HId/2hyUU77jvNFeqwTXC4CNm9oW9+jBUG/6l8wJdhg+T8SrTQ==}
+
   '@rollup/rollup-android-arm-eabi@4.20.0':
     resolution: {integrity: sha512-TSpWzflCc4VGAUJZlPpgAJE1+V60MePDQnBd7PPkpuEmOy8i87aL6tinFGKBFKuEDikYpig72QzdT3QPYIi+oA==}
     cpu: [arm]
@@ -516,6 +534,88 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@tailwindcss/node@4.0.13':
+    resolution: {integrity: sha512-P9TmtE9Vew0vv5FwyD4bsg/dHHsIsAuUXkenuGUc5gm8fYgaxpdoxIKngCyEMEQxyCKR8PQY5V5VrrKNOx7exg==}
+
+  '@tailwindcss/oxide-android-arm64@4.0.13':
+    resolution: {integrity: sha512-+9zmwaPQ8A9ycDcdb+hRkMn6NzsmZ4YJBsW5Xqq5EdOu9xlIgmuMuJauVzDPB5BSbIWfhPdZ+le8NeRZpl1coA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.13':
+    resolution: {integrity: sha512-Bj1QGlEJSjs/205CIRfb5/jeveOqzJ4pFMdRxu0gyiYWxBRyxsExXqaD+7162wnLP/EDKh6S1MC9E/1GwEhLtA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.0.13':
+    resolution: {integrity: sha512-lRTkxjTpMGXhLLM5GjZ0MtjPczMuhAo9j7PeSsaU6Imkm7W7RbrXfT8aP934kS7cBBV+HKN5U19Z0WWaORfb8Q==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.13':
+    resolution: {integrity: sha512-p/YLyKhs+xFibVeAPlpMGDVMKgjChgzs12VnDFaaqRSJoOz+uJgRSKiir2tn50e7Nm4YYw35q/DRBwpDBNo1MQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.13':
+    resolution: {integrity: sha512-Ua/5ydE/QOTX8jHuc7M9ICWnaLi6K2MV/r+Ws2OppsOjy8tdlPbqYainJJ6Kl7ofm524K+4Fk9CQITPzeIESPw==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.13':
+    resolution: {integrity: sha512-/W1+Q6tBAVgZWh/bhfOHo4n7Ryh6E7zYj4bJd9SRbkPyLtRioyK3bi6RLuDj57sa7Amk/DeomSV9iycS0xqIPA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.13':
+    resolution: {integrity: sha512-GQj6TWevNxwsYw20FdT2r2d1f7uiRsF07iFvNYxPIvIyPEV74eZ0zgFEsAH1daK1OxPy+LXdZ4grV17P5tVzhQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.13':
+    resolution: {integrity: sha512-sQRH09faifF9w9WS6TKDWr1oLi4hoPx0EIWXZHQK/jcjarDpXGQ2DbF0KnALJCwWBxOIP/1nrmU01fZwwMzY3g==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.13':
+    resolution: {integrity: sha512-Or1N8DIF3tP+LsloJp+UXLTIMMHMUcWXFhJLCsM4T7MzFzxkeReewRWXfk5mk137cdqVeUEH/R50xAhY1mOkTQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.13':
+    resolution: {integrity: sha512-u2mQyqCFrr9vVTP6sfDRfGE6bhOX3/7rInehzxNhHX1HYRIx09H3sDdXzTxnZWKOjIg3qjFTCrYFUZckva5PIg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.13':
+    resolution: {integrity: sha512-sOEc4iCanp1Yqyeu9suQcEzfaUcHnqjBUgDg0ZXpjUMUwdSi37S1lu1RGoV1BYInvvGu3y3HHTmvsSfDhx2L8w==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.0.13':
+    resolution: {integrity: sha512-pTH3Ex5zAWC9LbS+WsYAFmkXQW3NRjmvxkKJY3NP1x0KHBWjz0Q2uGtdGMJzsa0EwoZ7wq9RTbMH1UNPceCpWw==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/vite@4.0.13':
+    resolution: {integrity: sha512-0XTd/NoVUAktIDaA4MdXhve0QWYh7WlZg20EHCuBFR80F8FhbVkRX+AY5cjbUP/IO2itHzt0iHc0iSE5kBUMhQ==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6
+
   '@types/aes-js@3.1.4':
     resolution: {integrity: sha512-v3D66IptpUqh+pHKVNRxY8yvp2ESSZXe0rTzsGdzUhEwag7ljVfgCllkWv2YgiYXDhWFBrEywll4A5JToyTNFA==}
 
@@ -621,6 +721,11 @@ packages:
   abbrev@1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
 
+  acorn@8.14.1:
+    resolution: {integrity: sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
   aes-js@3.1.2:
     resolution: {integrity: sha512-e5pEa2kBnBOgR4Y/p20pskXI74UEz7de8ZGVo58asOtvSVG5YAbJeELPZxOmt+Bnz3rX753YKhfIn4X4l1PPRQ==}
 
@@ -723,6 +828,12 @@ packages:
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
+  confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+
+  confbox@0.2.1:
+    resolution: {integrity: sha512-hkT3yDPFbs95mNCy1+7qNKC6Pro+/ibzYxtM2iqEigpf0sVw+bg4Zh9/snjsBcf990vfIsg5+1U7VyiyBb3etg==}
+
   console-control-strings@1.1.0:
     resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
 
@@ -772,6 +883,15 @@ packages:
       supports-color:
         optional: true
 
+  debug@4.4.0:
+    resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
   decompress-response@4.2.1:
     resolution: {integrity: sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==}
     engines: {node: '>=8'}
@@ -803,6 +923,10 @@ packages:
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
+  enhanced-resolve@5.18.1:
+    resolution: {integrity: sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==}
+    engines: {node: '>=10.13.0'}
+
   entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
@@ -831,6 +955,10 @@ packages:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
 
+  escape-string-regexp@5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+
   esniff@2.0.1:
     resolution: {integrity: sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==}
     engines: {node: '>=0.10'}
@@ -838,6 +966,9 @@ packages:
   estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
   event-emitter@0.3.5:
     resolution: {integrity: sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==}
 
@@ -847,9 +978,20 @@ packages:
   evtd@0.2.4:
     resolution: {integrity: sha512-qaeGN5bx63s/AXgQo8gj6fBkxge+OoLddLniox5qtLAEY5HSnuSlISXVPxnSae1dWblvTh4/HoMIB+mbMsvZzw==}
 
+  exsolve@1.0.4:
+    resolution: {integrity: sha512-xsZH6PXaER4XoV+NiT7JHp1bJodJVT+cxeSH1G0f0tlT0lJqYuHUP3bUx2HtfTDvOagMINYp8rsqusxud3RXhw==}
+
   ext@1.7.0:
     resolution: {integrity: sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==}
 
+  fdir@6.4.3:
+    resolution: {integrity: sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
   fill-range@7.1.1:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
@@ -896,6 +1038,9 @@ packages:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
     deprecated: Glob versions prior to v9 are no longer supported
 
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
   has-unicode@2.0.1:
     resolution: {integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==}
 
@@ -953,12 +1098,91 @@ packages:
     resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
     engines: {node: '>=8'}
 
+  jiti@2.4.2:
+    resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
+    hasBin: true
+
+  js-tokens@9.0.1:
+    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
+
   lie@3.1.1:
     resolution: {integrity: sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==}
 
+  lightningcss-darwin-arm64@1.29.2:
+    resolution: {integrity: sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.29.2:
+    resolution: {integrity: sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.29.2:
+    resolution: {integrity: sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.29.2:
+    resolution: {integrity: sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.29.2:
+    resolution: {integrity: sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-arm64-musl@1.29.2:
+    resolution: {integrity: sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-linux-x64-gnu@1.29.2:
+    resolution: {integrity: sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-x64-musl@1.29.2:
+    resolution: {integrity: sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-win32-arm64-msvc@1.29.2:
+    resolution: {integrity: sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.29.2:
+    resolution: {integrity: sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.29.2:
+    resolution: {integrity: sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==}
+    engines: {node: '>= 12.0.0'}
+
   linkify-it@5.0.0:
     resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
 
+  local-pkg@1.1.1:
+    resolution: {integrity: sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==}
+    engines: {node: '>=14'}
+
   localforage@1.10.0:
     resolution: {integrity: sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==}
 
@@ -971,6 +1195,9 @@ packages:
   magic-string@0.30.11:
     resolution: {integrity: sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==}
 
+  magic-string@0.30.17:
+    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
+
   make-dir@3.1.0:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
     engines: {node: '>=8'}
@@ -1022,9 +1249,15 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  mlly@1.7.4:
+    resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
+
   ms@2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
 
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
   muggle-string@0.4.1:
     resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
 
@@ -1088,6 +1321,9 @@ packages:
     resolution: {integrity: sha512-Fl2z/BHvkTNvkuBzYTpTuirHZg6wW9z8+4SND/3mDTEcYbbNKWAy21dz9D3ePNNwrrK8pqZO5vLPZ1hLF6T7XA==}
     engines: {node: '>=6'}
 
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
   pdfjs-dist@4.5.136:
     resolution: {integrity: sha512-V1BALcAN/FmxBEShLxoP73PlQZAZtzlaNfRbRhJrKvXzjLC5VaIlBAQUJuWP8iaYUmIdmdLHmt3E2TBglxOm3w==}
     engines: {node: '>=18'}
@@ -1099,6 +1335,16 @@ packages:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
 
+  picomatch@4.0.2:
+    resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
+    engines: {node: '>=12'}
+
+  pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
+
+  pkg-types@2.1.0:
+    resolution: {integrity: sha512-wmJwA+8ihJixSoHKxZJRBQG1oY8Yr9pGLzRmSsNms0iNWyHHAlZCa7mmKiFR10YPZuz/2k169JiS/inOjBCZ2A==}
+
   postcss@8.4.41:
     resolution: {integrity: sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -1130,6 +1376,9 @@ packages:
     resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
     engines: {node: '>=6'}
 
+  quansync@0.2.8:
+    resolution: {integrity: sha512-4+saucphJMazjt7iOM27mbFCk+D9dd/zmgMDCzRZ8MEoBfYp7lAvoN38et/phRQF6wOPMy/OROBGgoWeSKyluA==}
+
   readable-stream@3.6.2:
     resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
     engines: {node: '>= 6'}
@@ -1173,6 +1422,9 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  scule@1.3.0:
+    resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
+
   seemly@0.3.8:
     resolution: {integrity: sha512-MW8Qs6vbzo0pHmDpFSYPna+lwpZ6Zk1ancbajw/7E8TKtHdV+1DfZZD+kKJEhG/cAoB/i+LiT+5msZOqj0DwRA==}
 
@@ -1222,13 +1474,27 @@ packages:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
 
+  strip-literal@3.0.0:
+    resolution: {integrity: sha512-TcccoMhJOM3OebGhSBEmp3UZ2SfDMZUEBdRA/9ynfLi8yYajyWX3JiXArcJt4Umh4vISpspkQIY8ZZoCqjbviA==}
+
   style-mod@4.1.2:
     resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==}
 
+  tailwindcss@4.0.13:
+    resolution: {integrity: sha512-gbvFrB0fOsTv/OugXWi2PtflJ4S6/ctu6Mmn3bCftmLY/6xRsQVEJPgIIpABwpZ52DpONkCA3bEj5b54MHxF2Q==}
+
+  tapable@2.2.1:
+    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
+    engines: {node: '>=6'}
+
   tar@6.2.1:
     resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
     engines: {node: '>=10'}
 
+  tinyglobby@0.2.12:
+    resolution: {integrity: sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==}
+    engines: {node: '>=12.0.0'}
+
   to-fast-properties@2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
@@ -1257,9 +1523,49 @@ packages:
   uc.micro@2.1.0:
     resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
 
+  ufo@1.5.4:
+    resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
+
   undici-types@6.13.0:
     resolution: {integrity: sha512-xtFJHudx8S2DSoujjMd1WeWvn7KKWFRESZTMeL1RptAYERu29D6jphMjjY+vn96jvN3kVPDNxU/E13VTaXj6jg==}
 
+  unimport@4.1.2:
+    resolution: {integrity: sha512-oVUL7PSlyVV3QRhsdcyYEMaDX8HJyS/CnUonEJTYA3//bWO+o/4gG8F7auGWWWkrrxBQBYOO8DKe+C53ktpRXw==}
+    engines: {node: '>=18.12.0'}
+
+  unplugin-auto-import@19.1.1:
+    resolution: {integrity: sha512-sCGZZrSR1Bc8RfN8Q0RUDxXtC20rdAt7UB4lDyq8MNtKVHiXXh+5af6Nz4JRp9Q+7HjnbgQfQox0TkEymjdUAQ==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@nuxt/kit': ^3.2.2
+      '@vueuse/core': '*'
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+      '@vueuse/core':
+        optional: true
+
+  unplugin-utils@0.2.4:
+    resolution: {integrity: sha512-8U/MtpkPkkk3Atewj1+RcKIjb5WBimZ/WSLhhR3w6SsIj8XJuKTacSP8g+2JhfSGw0Cb125Y+2zA/IzJZDVbhA==}
+    engines: {node: '>=18.12.0'}
+
+  unplugin-vue-components@28.4.1:
+    resolution: {integrity: sha512-niGSc0vJD9ueAnsqcfAldmtpkppZ09B6p2G1dL7X5S8KPdgbk1P+txPwaaDCe7N+eZh2VG1aAypLXkuJs3OSUg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@babel/parser': ^7.15.8
+      '@nuxt/kit': ^3.2.2
+      vue: 2 || 3
+    peerDependenciesMeta:
+      '@babel/parser':
+        optional: true
+      '@nuxt/kit':
+        optional: true
+
+  unplugin@2.2.0:
+    resolution: {integrity: sha512-m1ekpSwuOT5hxkJeZGRxO7gXbXT3gF26NjQ7GdVHoLoF8/nopLcd/QfPigpCy7i51oFHiRJg/CyHhj4vs2+KGw==}
+    engines: {node: '>=18.12.0'}
+
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -1354,6 +1660,9 @@ packages:
   webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
 
+  webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
+
   whatwg-url@5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
 
@@ -1740,6 +2049,8 @@ snapshots:
       - supports-color
     optional: true
 
+  '@mediapipe/tasks-genai@0.10.22': {}
+
   '@rollup/rollup-android-arm-eabi@4.20.0':
     optional: true
 
@@ -1788,6 +2099,67 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.20.0':
     optional: true
 
+  '@tailwindcss/node@4.0.13':
+    dependencies:
+      enhanced-resolve: 5.18.1
+      jiti: 2.4.2
+      tailwindcss: 4.0.13
+
+  '@tailwindcss/oxide-android-arm64@4.0.13':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.13':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.0.13':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.13':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.13':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.13':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.13':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.13':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.13':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.13':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.13':
+    optional: true
+
+  '@tailwindcss/oxide@4.0.13':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.0.13
+      '@tailwindcss/oxide-darwin-arm64': 4.0.13
+      '@tailwindcss/oxide-darwin-x64': 4.0.13
+      '@tailwindcss/oxide-freebsd-x64': 4.0.13
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.0.13
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.0.13
+      '@tailwindcss/oxide-linux-arm64-musl': 4.0.13
+      '@tailwindcss/oxide-linux-x64-gnu': 4.0.13
+      '@tailwindcss/oxide-linux-x64-musl': 4.0.13
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.0.13
+      '@tailwindcss/oxide-win32-x64-msvc': 4.0.13
+
+  '@tailwindcss/vite@4.0.13(vite@5.4.0(@types/node@22.1.0)(lightningcss@1.29.2)(sass@1.77.8))':
+    dependencies:
+      '@tailwindcss/node': 4.0.13
+      '@tailwindcss/oxide': 4.0.13
+      lightningcss: 1.29.2
+      tailwindcss: 4.0.13
+      vite: 5.4.0(@types/node@22.1.0)(lightningcss@1.29.2)(sass@1.77.8)
+
   '@types/aes-js@3.1.4': {}
 
   '@types/estree@1.0.5': {}
@@ -1824,9 +2196,9 @@ snapshots:
 
   '@vicons/ionicons5@0.12.0': {}
 
-  '@vitejs/plugin-vue@5.1.2(vite@5.4.0(@types/node@22.1.0)(sass@1.77.8))(vue@3.5.0(typescript@5.5.4))':
+  '@vitejs/plugin-vue@5.1.2(vite@5.4.0(@types/node@22.1.0)(lightningcss@1.29.2)(sass@1.77.8))(vue@3.5.0(typescript@5.5.4))':
     dependencies:
-      vite: 5.4.0(@types/node@22.1.0)(sass@1.77.8)
+      vite: 5.4.0(@types/node@22.1.0)(lightningcss@1.29.2)(sass@1.77.8)
       vue: 3.5.0(typescript@5.5.4)
 
   '@volar/language-core@2.4.0-alpha.18':
@@ -1931,6 +2303,8 @@ snapshots:
   abbrev@1.1.1:
     optional: true
 
+  acorn@8.14.1: {}
+
   aes-js@3.1.2: {}
 
   agent-base@6.0.2:
@@ -2061,6 +2435,10 @@ snapshots:
   concat-map@0.0.1:
     optional: true
 
+  confbox@0.1.8: {}
+
+  confbox@0.2.1: {}
+
   console-control-strings@1.1.0:
     optional: true
 
@@ -2105,6 +2483,10 @@ snapshots:
       ms: 2.1.2
     optional: true
 
+  debug@4.4.0:
+    dependencies:
+      ms: 2.1.3
+
   decompress-response@4.2.1:
     dependencies:
       mimic-response: 2.1.0
@@ -2119,8 +2501,7 @@ snapshots:
   delegates@1.0.0:
     optional: true
 
-  detect-libc@2.0.3:
-    optional: true
+  detect-libc@2.0.3: {}
 
   downloadjs@1.4.7: {}
 
@@ -2128,6 +2509,11 @@ snapshots:
 
   emoji-regex@8.0.0: {}
 
+  enhanced-resolve@5.18.1:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.2.1
+
   entities@4.5.0: {}
 
   entities@5.0.0: {}
@@ -2178,6 +2564,8 @@ snapshots:
 
   escalade@3.2.0: {}
 
+  escape-string-regexp@5.0.0: {}
+
   esniff@2.0.1:
     dependencies:
       d: 1.0.2
@@ -2187,6 +2575,10 @@ snapshots:
 
   estree-walker@2.0.2: {}
 
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.5
+
   event-emitter@0.3.5:
     dependencies:
       d: 1.0.2
@@ -2196,10 +2588,16 @@ snapshots:
 
   evtd@0.2.4: {}
 
+  exsolve@1.0.4: {}
+
   ext@1.7.0:
     dependencies:
       type: 2.7.3
 
+  fdir@6.4.3(picomatch@4.0.2):
+    optionalDependencies:
+      picomatch: 4.0.2
+
   fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
@@ -2252,6 +2650,8 @@ snapshots:
       path-is-absolute: 1.0.1
     optional: true
 
+  graceful-fs@4.2.11: {}
+
   has-unicode@2.0.1:
     optional: true
 
@@ -2300,14 +2700,69 @@ snapshots:
     dependencies:
       is-docker: 2.2.1
 
+  jiti@2.4.2: {}
+
+  js-tokens@9.0.1: {}
+
   lie@3.1.1:
     dependencies:
       immediate: 3.0.6
 
+  lightningcss-darwin-arm64@1.29.2:
+    optional: true
+
+  lightningcss-darwin-x64@1.29.2:
+    optional: true
+
+  lightningcss-freebsd-x64@1.29.2:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.29.2:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.29.2:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.29.2:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.29.2:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.29.2:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.29.2:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.29.2:
+    optional: true
+
+  lightningcss@1.29.2:
+    dependencies:
+      detect-libc: 2.0.3
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.29.2
+      lightningcss-darwin-x64: 1.29.2
+      lightningcss-freebsd-x64: 1.29.2
+      lightningcss-linux-arm-gnueabihf: 1.29.2
+      lightningcss-linux-arm64-gnu: 1.29.2
+      lightningcss-linux-arm64-musl: 1.29.2
+      lightningcss-linux-x64-gnu: 1.29.2
+      lightningcss-linux-x64-musl: 1.29.2
+      lightningcss-win32-arm64-msvc: 1.29.2
+      lightningcss-win32-x64-msvc: 1.29.2
+
   linkify-it@5.0.0:
     dependencies:
       uc.micro: 2.1.0
 
+  local-pkg@1.1.1:
+    dependencies:
+      mlly: 1.7.4
+      pkg-types: 2.1.0
+      quansync: 0.2.8
+
   localforage@1.10.0:
     dependencies:
       lie: 3.1.1
@@ -2320,6 +2775,10 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  magic-string@0.30.17:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+
   make-dir@3.1.0:
     dependencies:
       semver: 6.3.1
@@ -2376,9 +2835,18 @@ snapshots:
   mkdirp@1.0.4:
     optional: true
 
+  mlly@1.7.4:
+    dependencies:
+      acorn: 8.14.1
+      pathe: 2.0.3
+      pkg-types: 1.3.1
+      ufo: 1.5.4
+
   ms@2.1.2:
     optional: true
 
+  ms@2.1.3: {}
+
   muggle-string@0.4.1: {}
 
   naive-ui@2.39.0(vue@3.5.0(typescript@5.5.4)):
@@ -2453,6 +2921,8 @@ snapshots:
   path2d@0.2.1:
     optional: true
 
+  pathe@2.0.3: {}
+
   pdfjs-dist@4.5.136:
     optionalDependencies:
       canvas: 2.11.2
@@ -2465,6 +2935,20 @@ snapshots:
 
   picomatch@2.3.1: {}
 
+  picomatch@4.0.2: {}
+
+  pkg-types@1.3.1:
+    dependencies:
+      confbox: 0.1.8
+      mlly: 1.7.4
+      pathe: 2.0.3
+
+  pkg-types@2.1.0:
+    dependencies:
+      confbox: 0.2.1
+      exsolve: 1.0.4
+      pathe: 2.0.3
+
   postcss@8.4.41:
     dependencies:
       nanoid: 3.3.7
@@ -2491,6 +2975,8 @@ snapshots:
 
   punycode.js@2.3.1: {}
 
+  quansync@0.2.8: {}
+
   readable-stream@3.6.2:
     dependencies:
       inherits: 2.0.4
@@ -2551,6 +3037,8 @@ snapshots:
       immutable: 4.3.7
       source-map-js: 1.2.0
 
+  scule@1.3.0: {}
+
   seemly@0.3.8: {}
 
   semver@6.3.1:
@@ -2597,8 +3085,16 @@ snapshots:
     dependencies:
       ansi-regex: 5.0.1
 
+  strip-literal@3.0.0:
+    dependencies:
+      js-tokens: 9.0.1
+
   style-mod@4.1.2: {}
 
+  tailwindcss@4.0.13: {}
+
+  tapable@2.2.1: {}
+
   tar@6.2.1:
     dependencies:
       chownr: 2.0.0
@@ -2609,6 +3105,11 @@ snapshots:
       yallist: 4.0.0
     optional: true
 
+  tinyglobby@0.2.12:
+    dependencies:
+      fdir: 6.4.3(picomatch@4.0.2)
+      picomatch: 4.0.2
+
   to-fast-properties@2.0.0: {}
 
   to-regex-range@5.0.1:
@@ -2628,8 +3129,62 @@ snapshots:
 
   uc.micro@2.1.0: {}
 
+  ufo@1.5.4: {}
+
   undici-types@6.13.0: {}
 
+  unimport@4.1.2:
+    dependencies:
+      acorn: 8.14.1
+      escape-string-regexp: 5.0.0
+      estree-walker: 3.0.3
+      local-pkg: 1.1.1
+      magic-string: 0.30.17
+      mlly: 1.7.4
+      pathe: 2.0.3
+      picomatch: 4.0.2
+      pkg-types: 1.3.1
+      scule: 1.3.0
+      strip-literal: 3.0.0
+      tinyglobby: 0.2.12
+      unplugin: 2.2.0
+      unplugin-utils: 0.2.4
+
+  unplugin-auto-import@19.1.1:
+    dependencies:
+      local-pkg: 1.1.1
+      magic-string: 0.30.17
+      picomatch: 4.0.2
+      unimport: 4.1.2
+      unplugin: 2.2.0
+      unplugin-utils: 0.2.4
+
+  unplugin-utils@0.2.4:
+    dependencies:
+      pathe: 2.0.3
+      picomatch: 4.0.2
+
+  unplugin-vue-components@28.4.1(@babel/parser@7.25.3)(vue@3.5.0(typescript@5.5.4)):
+    dependencies:
+      chokidar: 3.6.0
+      debug: 4.4.0
+      local-pkg: 1.1.1
+      magic-string: 0.30.17
+      mlly: 1.7.4
+      tinyglobby: 0.2.12
+      unplugin: 2.2.0
+      unplugin-utils: 0.2.4
+      vue: 3.5.0(typescript@5.5.4)
+    optionalDependencies:
+      '@babel/parser': 7.25.3
+    transitivePeerDependencies:
+      - supports-color
+
+  unplugin@2.2.0:
+    dependencies:
+      acorn: 8.14.1
+      webpack-virtual-modules: 0.6.2
+
   util-deprecate@1.0.2:
     optional: true
 
@@ -2638,13 +3193,13 @@ snapshots:
       evtd: 0.2.4
       vue: 3.5.0(typescript@5.5.4)
 
-  vite-plugin-singlefile@2.0.2(rollup@4.20.0)(vite@5.4.0(@types/node@22.1.0)(sass@1.77.8)):
+  vite-plugin-singlefile@2.0.2(rollup@4.20.0)(vite@5.4.0(@types/node@22.1.0)(lightningcss@1.29.2)(sass@1.77.8)):
     dependencies:
       micromatch: 4.0.7
       rollup: 4.20.0
-      vite: 5.4.0(@types/node@22.1.0)(sass@1.77.8)
+      vite: 5.4.0(@types/node@22.1.0)(lightningcss@1.29.2)(sass@1.77.8)
 
-  vite@5.4.0(@types/node@22.1.0)(sass@1.77.8):
+  vite@5.4.0(@types/node@22.1.0)(lightningcss@1.29.2)(sass@1.77.8):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.41
@@ -2652,6 +3207,7 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.1.0
       fsevents: 2.3.3
+      lightningcss: 1.29.2
       sass: 1.77.8
 
   vooks@0.2.12(vue@3.5.0(typescript@5.5.4)):
@@ -2707,6 +3263,8 @@ snapshots:
   webidl-conversions@3.0.1:
     optional: true
 
+  webpack-virtual-modules@0.6.2: {}
+
   whatwg-url@5.0.0:
     dependencies:
       tr46: 0.0.3

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/copyHandler.go

@@ -29,6 +29,15 @@ func CopyHandler(fsOperateEventCenter *fsOperateEventCenter.FsOperateEventCenter
 
 		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})
@@ -55,3 +64,43 @@ func copyFile(src, dst string) error {
 
 	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/getHandler.go

@@ -72,6 +72,7 @@ func GetHandler(c *gin.Context) {
 			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")
@@ -79,6 +80,8 @@ func GetHandler(c *gin.Context) {
 				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")
 			}

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/go.mod

@@ -16,6 +16,8 @@ require (
 	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
@@ -26,10 +28,11 @@ require (
 	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.24.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

@@ -28,6 +28,11 @@ github.com/go-playground/validator/v10 v10.22.0/go.mod h1:dbuPbCMFw/DrkbEynArYaC
 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=
@@ -64,16 +69,22 @@ github.com/twitchyliquid64/golang-asm v0.15.1 h1:SU5vSMR7hnwNxj24w34ZyCi/FmDZTkS
 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=

src-server/main.go

@@ -31,6 +31,7 @@ func main() {
 
 	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))
@@ -38,6 +39,14 @@ func main() {
 	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/")
@@ -53,7 +62,22 @@ func main() {
 
 	address := "[::]" + port
 	printListeningAddresses(port)
-	router.Run(address)
+
+	// 在非阻塞的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 {

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

@@ -7,47 +7,37 @@ import {
    shallowRef,
    useTemplateRef
 } from 'vue'
-import { NIcon, NScrollbar, NDropdown } from 'naive-ui'
-import {
-   EyeOffOutline,
-   EyeOutline,
-   CloseOutline,
-   CopyOutline,
-   EllipsisVertical,
-   QrCodeOutline,
-   ExtensionPuzzleOutline
-} from '@vicons/ionicons5'
+import { QrCodeOutline, ExtensionPuzzleOutline } from '@vicons/ionicons5'
 import type VirtualDirectory from './class/VirtualDirectory'
 import type { VirtualFile } from './class/VirtualDirectory'
 import MiaoMask from './components/miaoMask.vue'
 import MiaoMessageProvider from './components/miaoAlertTipProvider.vue'
-import config from './config'
+// import config from './config'
 import useVirtualPages from './hooks/useVirtualPages'
 import init from './hooks/init'
 import usePluginCenter from './hooks/usePluginCenter'
 import PluginCenter, { PluginGroup } from './class/PluginCenter'
-import { renderIcon } from './hooks/miaoTools'
+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()
 
+
 // component就是一个vue组件，类似于miaoDirectory
 const createView = (
    component: any,
@@ -110,14 +100,13 @@ const openMenuOption = computed(
 
 const handleMenuSelect = async (key: string) => {
    if (key === 'share') {
+      // 立即显示模态框
       showModal.value = true
+
+      // 设置模态框数据，将serverAddressesService传递给组件
       modalData.value = {
-         component: (await import('naive-ui/es/qr-code')).NQrCode,
-         props: {
-            value: baseUrl,
-            size: 300,
-            errorCorrectionLevel: 'H'
-         }
+         component: ShareQrCodeCard,
+         props: {}
       }
    } else if (key.startsWith('plugin:')) {
       const pluginName = key.split(':')[1]
@@ -125,6 +114,13 @@ const handleMenuSelect = async (key: string) => {
    }
 }
 
+const handleModalClose = () => {
+   showModal.value = false
+   nextTick(() => {
+      modalData.value = undefined
+   })
+}
+
 onMounted(async () => {
    // @ts-ignore
    await init(messageProviderRef.value?.alertTip)
@@ -137,126 +133,23 @@ provide('rootDirectory', rootDirectory)
 </script>
 
 <template>
-   <div
-      class="view"
-      ref="viewRef"
-   >
+   <div class="view" ref="viewRef">
       <miao-message-provider ref="messageProviderRef">
-         <div class="view-controller">
-            <n-scrollbar x-scrollable>
-               <div class="tabs-container">
-                  <transition-group name="tab">
-                     <div
-                        class="tab"
-                        v-for="(view, index) of views._views"
-                        :key="view.id"
-                     >
-                        <span
-                           class="tab-title"
-                           :title="view.title"
-                           @click="handleClickTitle(index)"
-                        >
-                           {{
-                              view.title.length > 5 && 0
-                                 ? `${view.title.substring(0, 5)}...`
-                                 : view.title
-                           }}
-                        </span>
-                        <div class="tab-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="
-                                 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="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"
-               :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="views"
-                  @exit="deleteView(index)"
-               ></component>
-            </div>
-            <!-- </transition-group> -->
-         </div>
+         <ViewController :views="views" :handleClickTitle="handleClickTitle" :createView="createView"
+            :deleteView="deleteView" :openMenuOption="openMenuOption" :handleMenuSelect="handleMenuSelect" />
+         <ViewContainer :views="views" :deleteView="deleteView" :handleClickTitle="handleClickTitle" />
       </miao-message-provider>
    </div>
    <!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
-   <MiaoMask
-      v-model:show="showModal"
-      @click="showModal = false"
-   >
-      <component
-         @click="(e: any) => e.stopPropagation()"
-         :is="modalData?.component"
-         v-bind="modalData?.props"
-      ></component>
+   <MiaoMask v-model:show="showModal" @click="handleModalClose">
+      <component @click="(e: any) => e.stopPropagation()" :is="modalData?.component" v-bind="modalData?.props">
+      </component>
    </MiaoMask>
 </template>
 
 <style lang="scss" scoped>
+@use "styles/default.scss";
+
 $controller-height: 25px;
 $tag-width: 170px;
 
@@ -265,215 +158,5 @@ $tag-width: 170px;
    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-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);
-         }
-      }
-   }
-
-   .view-container {
-      position: relative;
-      display: flex;
-      // flex-direction: column;
-      height: calc(100% - $controller-height);
-      overflow-y: hidden;
-      overflow-x: overlay;
-
-      .view-container-item {
-         flex: 1;
-         height: 100%;
-         min-width: 180px;
-         opacity: 1;
-         transition:
-            flex 0.25s ease,
-            opacity 0.25s ease;
-      }
-
-      .view-container-item-hidden {
-         flex: 0;
-         min-width: 0px;
-         opacity: 0;
-         // transition-delay: opacity .25s;
-         // transition: opacity 5.25s ease;
-      }
-
-      &::-webkit-scrollbar {
-         position: absolute;
-         width: 4px;
-      }
-
-      // 滚动条轨道
-      &::-webkit-scrollbar-track {
-         // background: rgb(239, 239, 239);
-         border-radius: 2px;
-      }
-
-      // 小滑块
-      &::-webkit-scrollbar-thumb {
-         background: #e0e0e0;
-         // border-radius: 5px;
-      }
-
-      &::-webkit-scrollbar-thumb:hover {
-         background: #999999;
-      }
-   }
-}
-
-// transition动画相关
-.view {
-   .view-controller {
-      .tabs-container {
-         .tab-move,
-         .tab-enter-active {
-            transition: all 0.2s ease;
-         }
-
-         .tab-leave-active {
-            opacity: 0;
-            transition: none;
-         }
-
-         .tab-enter-from {
-            opacity: 0;
-            transform: translateY(-30px);
-         }
-
-         // .tab-leave-to {
-         //   opacity: 0;
-         //   transform: translateY(-80px) translateX(calc($tag-width + 10px));
-         // }
-
-         .tab-leave-active {
-            position: absolute;
-         }
-      }
-   }
-
-   // .view-container {
-   //     .page-move {
-   //         //   transition: all 0.55s ease;
-   //     }
-
-   //     .page-enter-active {}
-
-   //     .page-leave-active {
-   //         transition: none !important;
-   //     }
-
-   //     .page-enter-from {
-   //         //   opacity: 0;
-   //     }
-
-   //     .page-leave-active {
-   //         display: none;
-   //         position: absolute;
-   //     }
-   // }
 }
 </style>

src/class/PluginCenter.ts

@@ -173,12 +173,12 @@ export default class PluginCenter {
       }
    }
 
-   usePlugin(
-      key: string,
-      VDirectories?: VirtualDirectory[],
-      VFiles?: VirtualFile[],
-      ...args: any[]
-   ): void
+   // usePlugin(
+   //    key: string,
+   //    VDirectories?: VirtualDirectory[],
+   //    VFiles?: VirtualFile[],
+   //    ...args: any[]
+   // ): void
    usePlugin(
       key: string,
       VDirectories?: VirtualDirectory[],

src/class/UploadQueue.ts

@@ -1,4 +1,4 @@
-import generateId from '@/hooks/generateId'
+import generateId from '@/utils/generateId'
 import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
 import VirtualDirectory from './VirtualDirectory'
 

src/class/VirtualDirectory.ts

@@ -1,10 +1,6 @@
-import config from '@/config'
-import generateId from '@/hooks/generateId'
-import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
+import generateId from '@/utils/generateId'
 import type { stats, file, directory } from '@/types/type.ts'
-import difference from 'lodash/difference'
 
-const miaoFetchApi = useMiaoFetchApi()
 
 // const vDirectoryMap = new Map<string, VirtualDirectory>()
 // const vFileMap = new Map<string, VirtualFile>()
@@ -24,65 +20,70 @@ export interface Tree {
    directories: Tree[]
 }
 
-export class VirtualFile {
-   constructor(info: file, parent: VirtualDirectory) {
-      this.name = info.name
-      this.size = info.size
-      this.stats = info.stats
-      this.parent = parent
-      this.type = 'file'
-      this.id = generateId()
-      // if (vFileMap.get(this.path) !== undefined) {
-      //     throw `${this.path} is already exist`
-      // }
-      // vFileMap.set(this.path, this)
-   }
+export abstract class VirtualFileBase {
    name: string
-   type: 'file'
+   type: 'file' = 'file'
    size: number
    stats: stats
-   parent: VirtualDirectory
+   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}`
    }
 
-   get url() {
-      return `${config.api.get}${this.parent.path}${this.name}`
-   }
+   abstract get url(): string;
    
-   // destroy() {
-   //     vFileMap.delete(this.path)
-   // }
+   /**
+    * 删除文件
+    * @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 {
-   /**
-    * 除非为根节点，否则必须设置parent
-    */
-   constructor(info: directory, parent?: VirtualDirectory) {
-      this.name = info.name
-      this.stats = info.stats
-      this.parent = parent ?? undefined
-      this.id = generateId()
-      // if (vDirectoryMap.get(this.path) !== undefined) {
-      //     throw `${this.path} is already exist`
-      // }
-      // vDirectoryMap.set(this.path, this)
-   }
+export abstract class VirtualDirectoryBase {
    // 文件夹名
    name: string
    // 子文件
-   files: VirtualFile[] = []
+   files: VirtualFileBase[] = []
    // 子目录
-   directories: VirtualDirectory[] = []
+   directories: VirtualDirectoryBase[] = []
    // 没啥意义，标注一下就是了
    type: 'directory' = 'directory'
    // 文件夹创建时间等杂项属性
    stats: stats
    // 父文件夹
-   parent?: VirtualDirectory
+   parent?: VirtualDirectoryBase
 
    _isUpdated: boolean = false
 
@@ -91,6 +92,13 @@ class VirtualDirectory {
    // 用来存储一些标记信息啥的
    storage: { [key: string]: any } = {}
 
+   constructor(name: string, stats: stats, parent?: VirtualDirectoryBase) {
+      this.name = name
+      this.stats = stats
+      this.parent = parent
+      this.id = generateId()
+   }
+
    /**
     * 获取相对于根目录的路径的层数
     * 用于目录下文件定位
@@ -99,6 +107,7 @@ class VirtualDirectory {
    get layer(): number {
       return this.parent ? this.parent.layer + 1 : 0
    }
+   
    /**
     * 相对于根目录的路径， 如: "/",  "/123/321/"
     * 用于目录下文件定位
@@ -111,11 +120,13 @@ class VirtualDirectory {
       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]
       }
@@ -132,9 +143,9 @@ class VirtualDirectory {
    /**
     * 获取 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
       }
@@ -159,77 +170,46 @@ class VirtualDirectory {
       }
    }
 
-   // 时间复杂度大爆炸
-   updateContent(content: (file | directory)[]) {
-      this._isUpdated = true
-
-      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
-            }
-         }
-      }
-      const _addFile = (item: file) => {
-         const nvf =
-            // vFileMap.get(`${this.path}${item.name}`) ??
-            new VirtualFile(item, this)
-         this.files.push(nvf)
-      }
-      const _addDirectory = (item: directory) => {
-         const nvd =
-            // vDirectoryMap.get(`${this.path}${item.name}/`) ??
-            new VirtualDirectory(item, this)
-         this.directories.push(nvd)
-      }
-      const newFileNames: string[] = difference(
-         content.filter((v) => v.type === 'file').map((v) => v.name),
-         this.files.map((v) => v.name)
-      )
-      const newDirectoryNames: string[] = difference(
-         content.filter((v) => v.type === 'directory').map((v) => v.name),
-         this.directories.map((v) => v.name)
-      )
-      _delete(this.files)
-      _delete(this.directories)
-      // 加入新的文件与文件夹
-      for (let item of content.filter((v) => newFileNames.includes(v.name))) {
-         _addFile(item as file)
-      }
-      for (let item of content.filter((v) =>
-         newDirectoryNames.includes(v.name)
-      )) {
-         _addDirectory(item as directory)
-      }
-   }
-
-   hasChild(item: VirtualDirectory | VirtualFile): boolean {
+   hasChild(item: VirtualDirectoryBase | VirtualFileBase): boolean {
       if (item.type === 'directory') {
-         return this.directories?.includes(item) ?? false
+         return this.directories?.includes(item as VirtualDirectoryBase) ?? false
       } else {
-         return this.files?.includes(item) ?? false
+         return this.files?.includes(item as VirtualFileBase) ?? false
       }
    }
 
-   // destroy() {
-   //     for(const item of [...this.files, ...this.directories]){
-   //         item.destroy()
-   //     }
-   //     vDirectoryMap.delete(this.path)
-   // }
+   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 abstract class VirtualFile extends VirtualFileBase {}
+export abstract class VirtualDirectory extends VirtualDirectoryBase {}
+
 export default VirtualDirectory

src/class/VirtualPage.ts

@@ -1,6 +1,6 @@
 import { Component, reactive, shallowRef } from 'vue'
 import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
-import generateId from '@/hooks/generateId'
+import generateId from '@/utils/generateId'
 
 export interface VirtualPageOption {
    exitConfirm?: boolean
@@ -42,6 +42,7 @@ export default class VirtualPage {
       this.color = getRandomWebSafeColor()
       this.exitConfirm = initObjects?.option?.exitConfirm ?? false
       this.allowCopy = initObjects?.option?.allowCopy ?? true
+      this.pageStorage = {}
    }
    // 页面使用的组件
    component: Component
@@ -53,6 +54,8 @@ export default class VirtualPage {
    currentDirectories: VirtualDirectory[]
    // 当前正在使用的文件
    currentFiles: VirtualFile[]
+   // 页面数据存储
+   pageStorage: { [key: string]: any }
    // 区分每一个页面的唯一id
    id: number
    // 当refreshKey改变时需要刷新页面，目前还没接入刷新

src/class/VirtualRemoteDirectory.ts

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

src/components/APP/ShareQrCodeCard.vue

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

src/components/APP/ViewContainer.vue

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

src/components/APP/ViewController.vue

@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import { NIcon, NScrollbar, NDropdown } from 'naive-ui'
+import {
+   EyeOffOutline,
+   EyeOutline,
+   CloseOutline,
+   CopyOutline,
+   EllipsisVertical
+} from '@vicons/ionicons5'
+import type { DropdownMixedOption } from 'naive-ui/es/dropdown/src/interface'
+import type { VirtualPages } from '@/class/VirtualPage'
+import type VirtualDirectory from '@/class/VirtualDirectory'
+import type { VirtualFile } from '@/class/VirtualDirectory'
+
+const props = defineProps<{
+   views: VirtualPages
+   handleClickTitle: (index: number) => void
+   createView: (
+      component: any,
+      name: string,
+      currentDirectories?: VirtualDirectory[],
+      currentFiles?: VirtualFile[],
+      index?: number
+   ) => void
+   deleteView: (index: number) => void
+   openMenuOption: DropdownMixedOption[]
+   handleMenuSelect: (key: string) => any
+}>()
+</script>
+
+<template>
+   <div class="view-controller">
+      <n-scrollbar x-scrollable>
+         <div class="tabs-container">
+            <transition-group name="tab">
+               <div
+                  class="tab"
+                  v-for="(view, index) of props.views._views"
+                  :key="view.id">
+                  <span
+                     class="tab-title"
+                     :title="view.title"
+                     @click="props.handleClickTitle(index)">
+                     {{
+                        view.title.length > 5 && 0
+                           ? `${view.title.substring(0, 5)}...`
+                           : view.title
+                     }}
+                  </span>
+                  <div class="tab-control">
+                     <div
+                        class="tab-point"
+                        :style="{ backgroundColor: view.color }"></div>
+                     <n-icon
+                        class="tag-control-icon icon"
+                        @click="view.switchShow()">
+                        <EyeOutline v-show="view.visible" class="icon-inner" />
+                        <EyeOffOutline
+                           v-show="!view.visible"
+                           class="icon-inner" />
+                     </n-icon>
+                     <n-icon
+                        class="tag-control-icon icon"
+                        @click="
+                           props.createView(
+                              view.component,
+                              view.name,
+                              view.currentDirectories,
+                              view.currentFiles,
+                              index + 1
+                           )
+                        "
+                        v-if="view.allowCopy">
+                        <CopyOutline />
+                     </n-icon>
+                     <n-icon
+                        class="tag-control-icon icon"
+                        @click="props.deleteView(index)">
+                        <CloseOutline class="icon-inner" />
+                     </n-icon>
+                  </div>
+               </div>
+            </transition-group>
+         </div>
+      </n-scrollbar>
+      <div class="view-controller-menu">
+         <div class="view-controller-menu-item">
+            <n-dropdown
+               trigger="click"
+               :options="props.openMenuOption"
+               @select="props.handleMenuSelect">
+               <n-icon class="icon">
+                  <EllipsisVertical class="icon-inner" />
+               </n-icon>
+            </n-dropdown>
+         </div>
+      </div>
+   </div>
+</template>
+
+<style lang="scss" scoped>
+$controller-height: 25px;
+$tag-width: 170px;
+
+.view-controller {
+   display: flex;
+   height: $controller-height;
+   width: 100%;
+   background-color: #dadada;
+
+   .tabs-container {
+      display: flex;
+      margin-left: 5px;
+      flex: 1;
+
+      .tab {
+         position: relative;
+         width: $tag-width;
+         height: $controller-height;
+         margin: 0 5px;
+         display: flex;
+         border-radius: 5px 5px 0 0;
+         align-items: center;
+
+         .tab-title {
+            margin-left: 4px;
+            width: 90px;
+            user-select: none;
+            cursor: pointer;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+
+            span {
+               user-select: none;
+               cursor: pointer;
+            }
+         }
+
+         .tab-point {
+            height: 5px;
+            aspect-ratio: 1;
+            border-radius: 66px;
+            margin-right: 5px;
+         }
+
+         .tab-control {
+            position: absolute;
+            right: 10px;
+            display: flex;
+            align-items: center;
+
+            .tab-control-icon:not(:last-child) {
+               margin-right: 5px;
+            }
+         }
+
+         &:not(:last-child)::after {
+            content: '';
+            height: calc($controller-height * 0.6);
+            width: 1px;
+            border-right: 1px solid black;
+            position: absolute;
+            right: 0px;
+         }
+      }
+   }
+
+   .view-controller-menu {
+      position: relative;
+      display: flex;
+      align-items: center;
+      padding: 0 5px;
+
+      .view-controller-menu-item {
+         height: 100%;
+         aspect-ratio: 1;
+         display: flex;
+         justify-content: center;
+         align-items: center;
+      }
+
+      &::before {
+         content: '';
+         height: calc($controller-height * 0.6);
+         width: 1px;
+         border-right: 1px solid black;
+         position: absolute;
+         left: 2px;
+      }
+   }
+
+   .icon {
+      height: calc($controller-height * 0.7);
+      width: calc($controller-height * 0.7);
+      border-radius: 5px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      background-color: rgba(128, 128, 128, 0);
+      transition: background-color 0.3s;
+
+      &:hover {
+         background-color: rgba(128, 128, 128, 0.4);
+      }
+   }
+}
+
+// transition动画相关
+.view-controller {
+   .tabs-container {
+      .tab-move,
+      .tab-enter-active {
+         transition: all 0.2s ease;
+      }
+
+      .tab-leave-active {
+         opacity: 0;
+         transition: none;
+      }
+
+      .tab-enter-from {
+         opacity: 0;
+         transform: translateY(-30px);
+      }
+
+      .tab-leave-active {
+         position: absolute;
+      }
+   }
+}
+</style>

src/components/miaoAlertTipProvider.vue

@@ -1,25 +1,16 @@
 <template>
-   <div
-      class="miao-message-provider"
-      ref="rootRef"
-   >
+   <div class="miao-message-provider" ref="rootRef">
       <slot></slot>
       <transition-group
          name="message-fade"
          tag="div"
-         class="miao-message-provider-container"
-      >
+         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"
-            >
+            :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">
@@ -31,7 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import generateId from '@/hooks/generateId'
+import generateId from '@/utils/generateId'
 import { NIcon } from 'naive-ui'
 import { computed, onMounted, ref, shallowReactive } from 'vue'
 import {

src/components/miaoContextMenu.vue

@@ -4,8 +4,7 @@
    <div
       class="main"
       @contextmenu="handleContextMenu"
-      @mouseleave="handleMainMouseLeave"
-   >
+      @mouseleave="handleMainMouseLeave">
       <slot></slot>
    </div>
    <n-dropdown
@@ -18,8 +17,7 @@
       :on-clickoutside="onClickoutside"
       @select="handleSelect"
       @mouseleave="showContextMenu -= 1"
-      @mouseenter="showContextMenu += 1"
-   />
+      @mouseenter="showContextMenu += 1" />
 </template>
 
 <script setup lang="ts">

src/components/miaoDraggableDiv.vue

@@ -1,21 +1,20 @@
 <template>
-   <div
-      ref="divRef"
-      @dragstart="onDs"
-      :draggable="isDraggable"
-   >
+   <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
+   isDraggable?: boolean,
+   bindVirtualFiles?: VirtualFile[],
+   bindVirtualDirectories?: VirtualDirectory[],
 }>()
-props
 const emit = defineEmits<{
    onDragStart: [e: DragEvent]
 }>()
@@ -24,6 +23,15 @@ 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(() => {

src/components/miaoDropHandler.vue

@@ -1,10 +1,9 @@
 <template>
    <div
-      class="container"
+      class="miao-drop-container"
       @dragover="handleDragOver"
       @dragleave="handleDragLeave"
-      @drop="handleDrop"
-   >
+      @drop="handleDrop">
       <slot></slot>
       <miao-mask v-model:show="showMask"></miao-mask>
    </div>
@@ -124,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

@@ -13,8 +13,7 @@
                  margin
               }
             : {}
-      "
-   >
+      ">
       <slot v-if="show" />
    </div>
 </template>

src/components/miaoMask.vue

@@ -1,10 +1,6 @@
 <template>
    <transition name="transition">
-      <div
-         class="mask-body"
-         ref="maskBodyRef"
-         v-show="showMask"
-      >
+      <div class="mask-body" ref="maskBodyRef" v-show="showMask">
          <slot></slot>
       </div>
    </transition>

src/components/miaoPopupInput.vue

@@ -1,10 +1,6 @@
 <template>
    <miao-mask v-model:show="showMask">
-      <n-card
-         class="popup-card"
-         :title="popupConfig?.title"
-         size="medium"
-      >
+      <n-card class="popup-card" :title="popupConfig?.title" size="medium">
          {{ popupConfig?.content }}
          <n-input
             class="popup-input"
@@ -13,16 +9,14 @@
             v-bind="popupConfig?.inputProps"
             passively-activated
             autofocus
-            v-if="popupConfig?.inputProps"
-         />
+            v-if="popupConfig?.inputProps" />
          <div class="popup-button-container">
             <n-button
                class="popup-button-container-button"
                v-for="option in popupConfig?.options"
                :key="option.label"
                :type="option.type"
-               @click="_resolve && _resolve(option.key)"
-            >
+               @click="_resolve && _resolve(option.key)">
                {{ option.label }}
             </n-button>
          </div>

src/config.ts

@@ -14,7 +14,9 @@ export default {
       query: '/query',
       rename: '/rename',
       mkdir: '/mkdir',
-      cut: '/cut'
+      cut: '/cut',
+      copy: '/copy',
+      addresses: '/addresses'
    },
    enableUpload: true
 }

src/hooks/init/initPlugin.ts

@@ -9,12 +9,13 @@ const initPlugin = async (globalAlertTip: alertTipType) => {
    })
    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 } = _config
+         const { type, key = `${Math.random()}` } = _config
          if (type === PluginExportType.component) {
             pluginCenter.registerComponent(
                _config.default as registerComponentOption
@@ -22,6 +23,9 @@ const initPlugin = async (globalAlertTip: alertTipType) => {
          } else if (type === PluginExportType.default) {
             pluginCenter.register(key as string, _config.default as Plugin)
          }
+      } catch (error) {
+         console.error(`插件 ${pluginConfig} 初始化失败`, error)
+      }
    }
 }
 

src/hooks/useMiaoFetchApi.ts

@@ -9,7 +9,8 @@ import {
    renameOption,
    cutOption,
    mkdirOption,
-   getFileOption
+   getFileOption,
+   copyOption
 } from '@/types/fetch'
 import Config from '@/config'
 import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
@@ -270,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/useRootVDirectory.ts

@@ -1,8 +1,8 @@
-import VirtualDirectory from '@/class/VirtualDirectory'
+import { VirtualRemoteDirectory } from '@/class/VirtualRemoteDirectory'
 import { reactive } from 'vue'
 
 const root = reactive(
-   new VirtualDirectory({
+   new VirtualRemoteDirectory({
       name: '根目录',
       stats: {
          atimeMs: 0,

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

@@ -1,5 +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/export.ts

@@ -19,11 +19,9 @@ const pluginConfig: Plugin = {
    disable: false,
    group: [PluginGroup.default],
    func: Copy,
-   priority: -1
+   priority: -100
 }
 
 export default pluginConfig
 
 export const type = PluginExportType.default
-
-export const key = 'miaoCopy'

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/miaoCodeMirror/miaoCodeMirror.vue

@@ -3,28 +3,22 @@
       <div
          class="codemirror-container"
          ref="rootRef"
-         :class="`codemirror-container-${theme}`"
-      >
+         :class="`codemirror-container-${theme}`">
          <div class="codemirror-container-top">
             <div
                class="codemirror-container-btn codemirror-container-btn-save"
-               @click="handleSave"
-            >
+               @click="handleSave">
                保存
             </div>
             <div
                class="codemirror-container-btn codemirror-container-btn-save"
-               @click="handleReset"
-            >
+               @click="handleReset">
                恢复到上次保存
             </div>
          </div>
          <div class="codemirror-container-main">
             <NScrollbar style="max-height: calc(100%)">
-               <codemirror
-                  v-model="codeData"
-                  :extensions="extensions"
-               />
+               <codemirror v-model="codeData" :extensions="extensions" />
             </NScrollbar>
          </div>
       </div>

src/plugins/miaoCrypto/miaoCrypto.vue

@@ -6,8 +6,7 @@
                <div
                   v-for="item of workItemList"
                   :key="item.id"
-                  class="miaoCrypto-container-item-item"
-               >
+                  class="miaoCrypto-container-item-item">
                   <div
                      class="miaoCrypto-container-item-percentBar"
                      :style="{
@@ -17,16 +16,14 @@
                               ? `${item.getBufferProgress * 100}%`
                               : `0%`,
                         backgroundColor: 'blue'
-                     }"
-                  ></div>
+                     }"></div>
                   <div
                      class="miaoCrypto-container-item-percentBar"
                      :style="{
                         zIndex: 1,
                         width: item.status === 'finish' ? `100%` : `0%`,
                         backgroundColor: 'green'
-                     }"
-                  ></div>
+                     }"></div>
                   <span class="miaoCrypto-container-item-content">
                      {{ item.name }}{{ item.status }}
                   </span>

src/plugins/miaoDirectory/components/miaoDirectoryBottom.vue

@@ -3,16 +3,14 @@
       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')"
-            />
+               @click="emit('add-new-item')" />
          </div>
       </div>
       <div class="container-bottom-item">
@@ -21,8 +19,7 @@
                :style="{
                   color: index % 2 === 0 ? 'rgb(0 0 0)' : 'rgb(255 255 255)'
                }"
-               @click="emit('pick-files-upload')"
-            />
+               @click="emit('pick-files-upload')" />
          </div>
       </div>
    </div>

src/plugins/miaoDirectory/components/miaoDirectoryItem.vue

@@ -1,51 +1,21 @@
 <template>
-   <miao-draggable-div
-      class="miao-item"
-      :isDraggable="!draggable"
-      ref="itemRef"
-      @on-drag-start="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>
+   <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%' }"
-                  >
+                  <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"
-               >
+               <div class="item-main-info-date" v-if="time">
                   {{ time }}
                </div>
             </div>
-            <miao-draggable-div
-               class="item-main-dragBtn"
-               :isDraggable="draggable"
-            >
+            <miao-draggable-div class="item-main-dragBtn" :isDraggable="draggable" @on-drag-start="handleDragStart">
                <ReorderFourOutline></ReorderFourOutline>
             </miao-draggable-div>
          </div>
@@ -69,7 +39,7 @@ import {
    ReorderFourOutline
 } from '@vicons/ionicons5'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
-import dateFormatter from '@/hooks/dateFormatter'
+import dateFormatter from '@/utils/dateFormatter'
 import { NEllipsis } from 'naive-ui'
 import { DropdownOption } from 'naive-ui/es/dropdown'
 import miaoDraggableDiv from '@/components/miaoDraggableDiv.vue'
@@ -214,7 +184,8 @@ onBeforeUnmount(() => {
 <style lang="scss" scoped>
 .miao-item {
    cursor: pointer;
-   width: calc(100% - 20px);
+   // width: calc(100% - 20px);
+   width: 100%;
    // min-width: 170px;
    // aspect-ratio: 66/9;
    height: 50px;
@@ -222,12 +193,12 @@ onBeforeUnmount(() => {
    display: flex;
    justify-content: center;
    align-items: center;
-   margin: 10px 10px;
+   // margin: 10px 10px;
 
    .item-main {
       position: relative;
       width: 100%;
-      height: 95%;
+      height: 100%;
       background-color: rgb(255, 255, 255);
       border-radius: 7px;
       display: flex;

src/plugins/miaoDirectory/components/miaoDirectoryItemsContainer.vue

@@ -3,18 +3,15 @@
       class="miao-directory-container-items"
       :style="{
          backgroundColor: index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
-      }"
-   >
-      <n-scrollbar
-         ref="scrollbarRef"
-         style="max-height: 100%"
-      >
+      }">
+      <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"
-            margin="10px"
-         >
+            :disable-lazy="props.index < 20"
+            margin="10px">
             <miaoDirectoryItem
                :item="dir"
                :color="props.color"
@@ -25,14 +22,13 @@
                @click="handleItemClick(dir)"
                @drag-start="(e) => handleItemDragStart(dir)(e)"
                @rename="handleItemRename(dir)"
-               @on-selected="handleItemSelect(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"
-         >
+            min-height="50px">
             <miaoDirectoryItem
                :item="file"
                :color="props.color"
@@ -44,8 +40,7 @@
                @drag-start="(e) => handleItemDragStart(file)(e)"
                @rename="handleItemRename(file)"
                @plugin="(p) => handleItemUsePlugin(file)(p)"
-               @on-selected="handleItemSelect(file)"
-            />
+               @on-selected="handleItemSelect(file)" />
          </miao-lazy-div>
       </n-scrollbar>
    </div>
@@ -58,7 +53,7 @@ import miaoDirectoryItem from './miaoDirectoryItem.vue'
 import miaoLazyDiv from '@/components/miaoLazyDiv.vue'
 import { computed, ref } from 'vue'
 import usePluginCenter from '@/hooks/usePluginCenter'
-import { renderIcon } from '@/hooks/miaoTools'
+import { renderIcon } from '@/utils/miaoTools'
 
 const pluginCenter = usePluginCenter()
 
@@ -186,5 +181,8 @@ defineExpose({
    width: 100%;
    flex: 1;
    min-height: 0;
+   .miao-directory-container-items-container {
+      margin: 10px;
+   }
 }
 </style>

src/plugins/miaoDirectory/components/miaoDirectoryTop.vue

@@ -3,18 +3,21 @@
       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>
+         :style="{ backgroundColor: props.color }"></div>
       <div class="container-top-breadcrumb">
+         <n-scrollbar
+            ref="scrollbarRef"
+            :x-scrollable="true"
+            class="container-top-breadcrumb-scroll"
+            @wheel="handleWheel">
             <div class="container-top-breadcrumb-container">
                <n-breadcrumb
                   separator=">"
-               style="margin-left: 5px"
-            >
+                  class="sb-nn"
+                  style="margin-left: 5px">
                   <n-breadcrumb-item :clickable="false">
                      <n-icon size="18">
                         <CloudOutline />
@@ -23,37 +26,33 @@
                   <n-breadcrumb-item
                      v-for="dir in currentDirectory?.getParents"
                      @click="handleClickBreadcrumbItem(dir)"
-                  :clickable="true"
-               >
-                  <div>{{ dir.name }}</div>
+                     :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')"
-         >
+            @click="$emit('back')">
             <ChevronBackOutline />
          </n-icon>
          <n-icon
             class="container-top-tools-item"
             size="14"
-            @click="$emit('reload')"
-         >
+            @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"
-            >
+            @select="(key: string) => emit('menuSelect', key)">
+            <n-icon class="container-top-tools-item" size="14">
                <EllipsisVertical />
             </n-icon>
          </n-dropdown>
@@ -62,7 +61,6 @@
 </template>
 
 <script setup lang="ts">
-import { NBreadcrumbItem, NBreadcrumb, NIcon, NDropdown } from 'naive-ui'
 import {
    CloudOutline,
    ChevronBackOutline,
@@ -70,6 +68,8 @@ import {
    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
@@ -89,9 +89,28 @@ const emit = defineEmits<{
    '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">
@@ -127,14 +146,15 @@ const handleClickBreadcrumbItem = (virtualDirectory: VirtualDirectory) => {
       border-radius: 0 3px 3px 0;
 
       .container-top-breadcrumb-container {
-         position: absolute;
-         height: 100%;
-         right: 0;
-         top: 0;
+         // position: absolute;
+         height: 21px;
+         // right: 0;
+         // top: 0;
          min-width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
+         overflow: hidden;
       }
    }
 
@@ -174,3 +194,11 @@ const handleClickBreadcrumbItem = (virtualDirectory: VirtualDirectory) => {
    }
 }
 </style>
+
+<style lang="scss">
+.container-top-breadcrumb-scroll {
+   .n-scrollbar-rail {
+      transform: translateY(5px);
+   }
+}
+</style>

src/plugins/miaoDirectory/export.ts

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

src/plugins/miaoDirectory/miaoDirectory.vue

@@ -2,15 +2,12 @@
    <miao-drop-handler
       @on-virtual-directory="handleDropVDirectory"
       @on-files="handleDropFiles"
-      @on-virtual-files="handleDropVirtualFiles"
-   >
+      @on-virtual-files="handleDropVirtualFiles">
       <miaoAlertTipProvider ref="miaoAlertTip">
-         <div
-            class="miao-directory-item-container"
-            ref="rootDomRef"
-         >
+         <div class="miao-directory-item-container" ref="rootDomRef">
             <!-- 顶部面包屑导航和工具栏 -->
             <miao-directory-top
+               ref="miaoDirectoryTopRef"
                :color="props.color"
                :current-directory="currentDirectory"
                @back="handleBack"
@@ -20,8 +17,7 @@
                :index="index"
                @set-current-directory="setCurrentDirectory"
                @search="handleSearch"
-               @menu-select="handleTopBarMenuSelect"
-            />
+               @menu-select="handleTopBarMenuSelect" />
 
             <!-- 文件和文件夹列表 -->
             <miao-directory-items
@@ -36,16 +32,14 @@
                @item-delete="handleItemDelete"
                @item-drag-start="handleItemDragStart"
                @item-rename="handleItemRename"
-               @item-select="handleItemSelect"
-            />
+               @item-select="handleItemSelect" />
 
             <!-- 底部工具栏 -->
             <miao-directory-bottom
                :index="index"
                @add-new-item="handleAddNewItem"
                v-if="false"
-               @pick-files-upload="handlePickFilesUpload"
-            />
+               @pick-files-upload="handlePickFilesUpload" />
 
             <miao-mask v-model:show="showModel"></miao-mask>
             <miao-popup-input ref="popupInput"></miao-popup-input>
@@ -62,7 +56,7 @@ import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
 import useDataBus from '@/hooks/useDataBus'
 import useUploadQueue from '@/hooks/useUploadQueue'
 import useVirtualPages from '@/hooks/useVirtualPages'
-import { filePicker, renderIcon } from '@/hooks/miaoTools'
+import { filePicker, renderIcon } from '@/utils/miaoTools'
 import uniq from 'lodash/uniq'
 
 import miaoDirectoryTop from './components/miaoDirectoryTop.vue'
@@ -108,6 +102,7 @@ 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 {
@@ -177,7 +172,7 @@ const showData_directory = computed<VirtualDirectory[]>(() => {
    if (searchText.value !== '') {
       data = data.filter((vd) => vd.name.includes(searchText.value))
    }
-   return data
+   return data.sort((a, b) => a.name.localeCompare(b.name))
 })
 const showData_files = computed<VirtualFile[]>(() => {
    if (showFiles.value === false) {
@@ -189,7 +184,7 @@ const showData_files = computed<VirtualFile[]>(() => {
    if (searchText.value !== '') {
       data = data.filter((vd) => vd.name.includes(searchText.value))
    }
-   return data
+   return data.sort((a, b) => a.name.localeCompare(b.name))
 })
 
 const topBarMenuOption = computed(() => {
@@ -304,6 +299,16 @@ const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
                top: 0,
                behavior: 'instant'
             })
+            // miaoDirectoryTopRef.value &&
+            //    miaoDirectoryTopRef.value.scrollTo({
+            //    top: 0,
+            //    behavior: 'instant'
+            // })
+            miaoDirectoryTopRef.value?.scrollTo({
+               top: 0,
+               left: 999,
+               behavior: 'instant'
+            })
          })
       }
       currentDirectories.value[0] = virtualDirectory
@@ -436,18 +441,12 @@ const handleItemDownload = (item: VirtualFile) => {
 
 const handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
    for (let item of uniq([...selectedItem.value, _item])) {
-      ;(async () => {
-         const { response } = miaoFetchApi.delete(item, {
-            retry: 5
-         })
-         // todo: 将删除事件统一用一个事件管理中心管理
-         const id = (await response).eventId
-         const { response: res } = miaoFetchApi.query(id)
-         const eventResult = await res
-         if (eventResult.status === 'success') {
-            reload()
+      (async () => {
+         const success = await item.delete();
+         if (success) {
+            reload();
          }
-      })()
+      })();
    }
 }
 
@@ -478,14 +477,10 @@ const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
    if (!newName) {
       return
    }
-   const { response } = miaoFetchApi.rename(item, newName, {
-      retry: 5
-   })
-   const id = (await response).eventId
-   const { response: res } = miaoFetchApi.query(id)
-   const eventResult = await res
-   if (eventResult.status === 'success') {
-      reload()
+   
+   const success = await item.rename(newName);
+   if (success) {
+      reload();
    }
 }
 
@@ -515,46 +510,25 @@ const handleDropFiles = async (files: File[]) => {
 }
 
 const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
-   // 不能移到自己或自己的子文件夹内
-   for (let vDir of vDirs) {
-      if (currentDirectory.value.getParents.includes(vDir)) {
-         return
-      }
-      if (vDir.parent === currentDirectory.value) {
-         return
-      }
-   }
+   console.log(vDirs, currentDirectory.value)
    for (let dir of vDirs) {
-      ;(async () => {
-         const _from = dir.parent
-         const { response } = miaoFetchApi.cut(dir, currentDirectory.value)
-         const id = (await response).eventId
-         const { response: res } = miaoFetchApi.query(id)
-         const eventResult = await res
-         if (eventResult.status === 'success') {
-            reload()
-            _from && _from.update()
+      (async () => {
+         const success = await dir.mv(currentDirectory.value);
+         if (success) {
+            reload();
          }
-      })()
+      })();
    }
 }
 
 const handleDropVirtualFiles = (files: VirtualFile[]) => {
-   if (files[0].parent === currentDirectory.value) {
-      return
-   }
    for (let file of files) {
-      ;(async () => {
-         const _from = file.parent
-         const { response } = miaoFetchApi.cut(file, currentDirectory.value)
-         const id = (await response).eventId
-         const { response: res } = miaoFetchApi.query(id)
-         const eventResult = await res
-         if (eventResult.status === 'success') {
-            reload()
-            _from.update()
+      (async () => {
+         const success = await file.moveTo(currentDirectory.value);
+         if (success) {
+            reload();
          }
-      })()
+      })();
    }
 }
 

src/plugins/miaoIframe/miaoIframe.vue

@@ -4,8 +4,7 @@
          ref="iframeRef"
          :src="iframeSrc"
          frameborder="0"
-         class="iframe-container-iframe"
-      ></iframe>
+         class="iframe-container-iframe"></iframe>
    </div>
 </template>
 
@@ -13,7 +12,7 @@
 import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
 import cloneDeep from 'lodash/cloneDeep'
 import { inject, onMounted, ref } from 'vue'
-import buildFromTree from '../../hooks/buildFromTree'
+import buildFromTree from '../../utils/buildFromTree'
 
 const root = inject('rootDirectory') as VirtualDirectory
 const currentFiles = defineModel<VirtualFile[]>('currentFiles', {

src/plugins/miaoImages/miaoImageViewer.vue

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

src/plugins/miaoImages/miaoImages.vue

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

src/plugins/miaoKVMap/KVMapPlugin.vue

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

src/plugins/miaoKVMap/export.ts

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

src/plugins/miaoKVMap/export_mainMenu.ts

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

src/plugins/miaoMarkdown/miaoMarkdown.vue

@@ -2,8 +2,7 @@
    <n-scrollbar>
       <div
          class="miao-markdown-container-miaomiaomiao"
-         v-html="renderedMarkdown"
-      ></div>
+         v-html="renderedMarkdown"></div>
       <div style="height: 50px; width: 100%"></div>
    </n-scrollbar>
 </template>

src/plugins/miaoMusicPlayer/miaoMusicPlayer.vue

@@ -7,21 +7,15 @@
                :ap="ap"
                v-model:data="data"
                :updateLocalData="updateLocalData"
-               @new-collection="saveCurrPlayList"
-            ></miao-music-main>
+               @new-collection="saveCurrPlayList"></miao-music-main>
             <miao-mask
                :show="isAPlayerListShow"
                style="z-index: 5"
-               @click="() => ap?.list.hide()"
-            ></miao-mask>
-            <div
-               ref="aplayer"
-               style="z-index: 10"
-            />
+               @click="() => ap?.list.hide()"></miao-mask>
+            <div ref="aplayer" style="z-index: 10" />
             <miao-mask
                :show="isSavingCollection"
-               @click="isSavingCollection = false"
-            ></miao-mask>
+               @click="isSavingCollection = false"></miao-mask>
          </div>
       </miao-alert-tip-provider>
    </miao-drop-handler>
@@ -42,7 +36,7 @@ import {
 } from 'vue'
 import './src/APlayer.fix.css'
 // @ts-ignore
-import APlayer from 'APlayer'
+import APlayer from 'aplayer'
 import config from '@/config'
 import difference from 'lodash/difference'
 import uniq from 'lodash/uniq'

src/plugins/miaoMusicPlayer/src/collectionInfo.vue

@@ -1,23 +1,14 @@
 <template>
    <div class="collection-info-container">
       <div class="collection-info-container-top">
-         <div
-            class="collection-info-container-top-exit"
-            @click="emit('exit')"
-         >
+         <div class="collection-info-container-top-exit" @click="emit('exit')">
             <ArrowBackOutline></ArrowBackOutline>
          </div>
          <div class="collection-info-container-top-title">
-            <span
-               :tooltip="false"
-               v-if="!isEditing"
-            >
+            <span :tooltip="false" v-if="!isEditing">
                {{ collection.name }}
             </span>
-            <n-input
-               v-if="isEditing"
-               v-model:value="collection.name"
-            ></n-input>
+            <n-input v-if="isEditing" v-model:value="collection.name"></n-input>
          </div>
 
          <div
@@ -25,8 +16,7 @@
             v-if="isEditing"
             @click="
                clickDeleteCount !== 2 ? clickDeleteCount++ : emit('deleteSelf')
-            "
-         >
+            ">
             <TrashOutline></TrashOutline>
             <span>
                {{
@@ -42,8 +32,7 @@
       <div class="collection-info-container-controller">
          <div
             class="collection-info-container-controller-play"
-            @click="emit('playAll', collection)"
-         >
+            @click="emit('playAll', collection)">
             <div class="collection-info-container-controller-play-icon">
                <CaretForwardOutline></CaretForwardOutline>
             </div>
@@ -54,11 +43,11 @@
          <div class="collection-info-container-controller-right">
             <div
                class="collection-info-container-controller-edit"
-               @click="isEditing = !isEditing"
-            >
+               @click="isEditing = !isEditing">
                <component
-                  :is="isEditing ? CheckmarkOutline : CreateOutline"
-               ></component>
+                  :is="
+                     isEditing ? CheckmarkOutline : CreateOutline
+                  "></component>
             </div>
          </div>
       </div>
@@ -69,46 +58,40 @@
                :animation="150"
                handle=".collection-info-container-audioList-item-controller-item-drag"
                ghostClass="iSDragging"
-               @end="updateAudiosIndex"
-            >
+               @end="updateAudiosIndex">
                <div
                   v-for="(audio, index) in collection.audios"
-                  class="collection-info-container-audioList-item"
-               >
+                  class="collection-info-container-audioList-item">
                   <div class="collection-info-container-audioList-item-index">
                      <div>{{ index + 1 }}</div>
                   </div>
                   <div class="collection-info-container-audioList-item-info">
                      <div
                         v-if="!isEditing"
-                        class="collection-info-container-audioList-item-info-name"
-                     >
+                        class="collection-info-container-audioList-item-info-name">
                         <NEllipsis :tooltip="false">
                            {{ audio.name }}
                         </NEllipsis>
                      </div>
                      <n-input
                         v-model:value="audio.name"
-                        v-if="isEditing"
-                     ></n-input>
+                        v-if="isEditing"></n-input>
                   </div>
                   <div
-                     class="collection-info-container-audioList-item-controller"
-                  >
+                     class="collection-info-container-audioList-item-controller">
                      <PlayOutline
                         class="collection-info-container-audioList-item-controller-item"
                         v-if="!isEditing"
-                        @click="emit('playAll', collection, index)"
-                     ></PlayOutline>
+                        @click="
+                           emit('playAll', collection, index)
+                        "></PlayOutline>
                      <TrashOutline
                         class="collection-info-container-audioList-item-controller-item"
                         v-if="isEditing"
-                        @click="handleDelete(index)"
-                     ></TrashOutline>
+                        @click="handleDelete(index)"></TrashOutline>
                      <ReorderFourOutline
                         v-if="isEditing"
-                        class="collection-info-container-audioList-item-controller-item collection-info-container-audioList-item-controller-item-drag"
-                     ></ReorderFourOutline>
+                        class="collection-info-container-audioList-item-controller-item collection-info-container-audioList-item-controller-item-drag"></ReorderFourOutline>
                   </div>
                </div>
             </VueDraggable>

src/plugins/miaoMusicPlayer/src/components/aplayerListNew.vue

@@ -1,13 +1,9 @@
 <template>
    <div class="aplayer-list-top">
-      <div
-         @click="loopModeToggle"
-         class="aplayer-list-top-loopMode"
-      >
+      <div @click="loopModeToggle" class="aplayer-list-top-loopMode">
          <component
             :is="loopModeMap[loopMode].icon"
-            class="aplayer-list-top-loopMode-icon"
-         ></component>
+            class="aplayer-list-top-loopMode-icon"></component>
          <span class="aplayer-list-top-loopMode-name">
             {{ loopModeMap[loopMode].name }}
          </span>
@@ -16,8 +12,7 @@
          <AddCircleOutline
             v-if="onSaveCollection"
             class="aplayer-list-top-buttons-icon"
-            @click="onSaveCollection(ap.list.audios)"
-         ></AddCircleOutline>
+            @click="onSaveCollection(ap.list.audios)"></AddCircleOutline>
       </div>
       <span></span>
    </div>
@@ -27,8 +22,7 @@
          !isDragging ? 'miaoMusic-ol-isDragging' : 'miaoMusic-ol-notDragging'
       ]"
       :key="refreshKey"
-      ref="ol"
-   >
+      ref="ol">
       <VueDraggable
          v-model="ap.list.audios"
          @start="onDragStart"
@@ -36,79 +30,67 @@
          item-key="id"
          handle=".aplayer-list-control-btn-reorder"
          ghostClass="iSDragging"
-         :animation="150"
-      >
+         :animation="150">
          <!-- <miaoLazyDiv :min-height="'32px'" auto-height> -->
          <li
             v-for="(element, index) in ap.list.audios"
             :class="[activeAudioIndex == index ? 'aplayer-list-light' : '']"
             class="aplayer-list-new"
-            :key="element.id"
-         >
+            :key="element.id">
             <span
                class="aplayer-list-cur"
-               :style="{ backgroundColor: apTheme }"
-            ></span>
+               :style="{ backgroundColor: apTheme }"></span>
             <span class="aplayer-list-index">{{ index + 1 }}</span>
             <span class="aplayer-list-title">{{ element.name }}</span>
             <div class="aplayer-list-control">
                <div
                   v-if="isVideo(element)"
                   class="aplayer-list-control-btn aplayer-list-control-btn-hover aplayer-list-control-btn-play"
-                  @click.stop="onPlayVideo && onPlayVideo(element)"
-               >
+                  @click.stop="onPlayVideo && onPlayVideo(element)">
                   <VideocamOutline class="aplayer-list-control-btn-svg" />
                </div>
                <div
                   class="aplayer-list-control-btn aplayer-list-control-btn-hover aplayer-list-control-btn-play"
-                  @click.stop="switchAudio(index)"
-               >
+                  @click.stop="switchAudio(index)">
                   <component
                      :is="
                         activeAudioIndex == index && !isPaused
                            ? PauseOutline
                            : PlayOutline
                      "
-                     class="aplayer-list-control-btn-svg"
-                  ></component>
+                     class="aplayer-list-control-btn-svg"></component>
                </div>
                <div
                   class="aplayer-list-control-btn aplayer-list-control-btn-hover"
                   @click.stop="switchAudio(index)"
-                  v-if="false"
-               >
+                  v-if="false">
                   <HeartOutline class="aplayer-list-control-btn-svg" />
                </div>
                <div
                   class="aplayer-list-control-btn"
                   @click.stop="listAudioUp(index)"
-                  v-if="false"
-               >
+                  v-if="false">
                   <ChevronUpOutline class="aplayer-list-control-btn-svg" />
                </div>
                <div
                   class="aplayer-list-control-btn"
                   @click.stop="listAudioDown(index)"
-                  v-if="false"
-               >
+                  v-if="false">
                   <ChevronDownOutline class="aplayer-list-control-btn-svg" />
                </div>
                <div
                   class="aplayer-list-control-btn aplayer-list-control-btn-hover"
-                  @click.stop="listAudioRemove(index)"
-               >
+                  @click.stop="listAudioRemove(index)">
                   <CloseOutline class="aplayer-list-control-btn-svg" />
                </div>
                <div
-                  class="aplayer-list-control-btn aplayer-list-control-btn-reorder"
-               >
+                  class="aplayer-list-control-btn aplayer-list-control-btn-reorder">
                   <ReorderFourOutline class="aplayer-list-control-btn-svg" />
                </div>
             </div>
             <span
                class="aplayer-list-author"
-               v-show="element.artist !== 'Audio artist1'"
-            >
+               v-show="element.artist !== 'Audio artist1'">
                {{ element.artist }}
             </span>
          </li>

src/plugins/miaoMusicPlayer/src/components/collection.vue

@@ -1,17 +1,10 @@
 <template>
-   <div
-      class="collection"
-      @click="emit('onenter')"
-   >
-      <div
-         class="collection-cover"
-         @click.stop="emit('onPlay')"
-      >
+   <div class="collection" @click="emit('onenter')">
+      <div class="collection-cover" @click.stop="emit('onPlay')">
          <img
             v-if="item.coverUrl"
             class="collection-cover-img"
-            :src="item.coverUrl"
-         />
+            :src="item.coverUrl" />
          <div class="collection-cover-play">
             <Play></Play>
          </div>
@@ -37,7 +30,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import collectionType from '../../types/collection'
-import dateFormatter from '@/hooks/dateFormatter'
+import dateFormatter from '@/utils/dateFormatter'
 import { Play } from '@vicons/ionicons5'
 
 const props = defineProps<{

src/plugins/miaoMusicPlayer/src/main.vue

@@ -8,21 +8,18 @@
                v-model="collections"
                :animation="150"
                :delay="100"
-               ghostClass="iSDragging"
-            >
+               ghostClass="iSDragging">
                <collection
                   v-for="item in collections"
                   :item="item"
                   @on-play="handleCollectionsPlay(item)"
-                  @onenter="handleCollectionEnter(item)"
-               ></collection>
+                  @onenter="handleCollectionEnter(item)"></collection>
             </VueDraggable>
             <n-empty
                description="空空如也~"
                size="huge"
                style="margin-top: 200px"
-               v-if="!data || data?.length === 0"
-            >
+               v-if="!data || data?.length === 0">
                <template #icon>
                   <n-icon>
                      <HandLeftOutline />
@@ -32,8 +29,7 @@
                   <n-button
                      size="small"
                      type="primary"
-                     @click="emit('newCollection')"
-                  >
+                     @click="emit('newCollection')">
                      立刻创建
                   </n-button>
                </template>
@@ -47,8 +43,7 @@
             v-if="currCollection"
             @exit="handleCollectionEnter(undefined)"
             @delete-self="handleCollectionDelete()"
-            @play-all="handleCollectionsPlay"
-         ></collectionInfo>
+            @play-all="handleCollectionsPlay"></collectionInfo>
       </Transition>
    </div>
 </template>

src/plugins/miaoPDF/miaoPDF.vue

@@ -2,56 +2,31 @@
    <miao-message-provider ref="miaoMessageRef">
       <div class="miao-container">
          <div class="miao-container-topBar">
-            <div
-               class="miao-container-topBar-btn"
-               @click="() => handleZoom(10)"
-               title="快速缩小"
-            >
-               --
-            </div>
-            <div
-               class="miao-container-topBar-btn"
-               @click="() => handleZoom()"
-               title="缩小"
-            >
-               -
-            </div>
-            <div
-               class="miao-container-topBar-btn"
-               @click="() => handleResetMargin()"
-               title="还原"
-            >
-               还原缩放
-            </div>
-            <div
-               class="miao-container-topBar-btn"
-               @click="() => handleShrink()"
-               title="放大"
-            >
-               +
-            </div>
-            <div
-               class="miao-container-topBar-btn"
-               @click="() => handleShrink(10)"
-               title="快速放大"
-            >
-               ++
+            <div class="topBar-main">
+               <div class="top-btn" @click="() => handleZoom(10)" title="快速缩小">--</div>
+               <div class="top-btn" @click="() => handleZoom()" title="缩小">-</div>
+               <div class="top-btn" @click="() => handleResetMargin()" title="重置">重置</div>
+               <div class="top-btn" @click="() => handleShrink()" title="放大">+</div>
+               <div class="top-btn" @click="() => handleShrink(10)" title="快速放大">++</div>
+               <div class="scale-indicator">{{ Math.round(scale * 100) }}%</div>
             </div>
          </div>
-         <NScrollbar>
+         <NScrollbar ref="scrollRef">
             <div
                class="miao-container-pdf"
-               :style="{
-                  alignItems: pdfMargin < 0 ? 'baseline' : 'center'
-               }"
-            >
+               @pointerdown="onPointerDown"
+               @pointermove="onPointerMove"
+               @pointerup="onPointerUp"
+               @pointercancel="onPointerCancel"
+               :class="{ 'is-dragging': isDragging}"
+               :style="{'align-items': scale > 1 ? 'unset' : 'center' }">
+
                <div
                   ref="pdfEl"
                   class="miao-container-pdf-content"
                   :style="{
-                     width: `calc( 100% - ${pdfMargin}px)`
-                  }"
-               ></div>
+                     width: `${(scale * 100).toFixed(2)}%`,
+                  }"></div>
             </div>
          </NScrollbar>
       </div>
@@ -60,7 +35,7 @@
 
 <script setup lang="ts">
 import miaoMessageProvider from '@/components/miaoAlertTipProvider.vue'
-import { onMounted, ref, shallowReactive } from 'vue'
+import { onMounted, ref, shallowReactive, computed, onBeforeUnmount } from 'vue'
 import PdfjsWorker from 'pdfjs-dist/build/pdf.worker.mjs?worker'
 import { VirtualFile } from '@/class/VirtualDirectory'
 import { NScrollbar } from 'naive-ui'
@@ -71,31 +46,148 @@ const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
 
 const pdfEl = ref<HTMLDivElement>()
 const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
-// 通过margin来实现缩小功能
-const pdfMargin = ref<number>(0)
+// 新缩放方案：使用等比scale
+const scale = ref<number>(1)
+const minScale = 0.5
+const maxScale = 4
 
-const pdfPageCount = ref<number>(-1)
+const scrollRef = ref<InstanceType<typeof NScrollbar> | null>(null)
+const isDragging = ref(false)
+let pressTimeoutId: number | null = null
+let dragging = false
+let startX = 0
+let startY = 0
+let startLeft = 0
+let startTop = 0
+const longPressDelay = 100
 
-const canvasList = shallowReactive<HTMLCanvasElement[]>([])
+// 更稳健的滚动容器解析逻辑，避免依赖 $el.querySelector
+const scrollContainer = ref<HTMLElement | null>(null)
+const findScrollableParent = (el: HTMLElement | null): HTMLElement | null => {
+   let cur: HTMLElement | null = el?.parentElement ?? null
+   while (cur) {
+      const style = window.getComputedStyle(cur)
+      const overflowY = style.overflowY
+      const overflowX = style.overflowX
+      const canScroll =
+         (overflowY === 'auto' || overflowY === 'scroll' || overflowX === 'auto' || overflowX === 'scroll') &&
+         (cur.scrollHeight > cur.clientHeight || cur.scrollWidth > cur.clientWidth)
+      if (canScroll) return cur
+      cur = cur.parentElement
+   }
+   return null
+}
+const resolveScrollContainer = () => {
+   const fromScrollbar = pdfEl.value?.closest('.n-scrollbar')?.querySelector('.n-scrollbar-container') as HTMLElement | null
+   scrollContainer.value = fromScrollbar ?? findScrollableParent(pdfEl.value ?? null)
+}
+const getScrollEl = (): HTMLElement | null => {
+   if (!scrollContainer.value) resolveScrollContainer()
+   return scrollContainer.value
+}
+
+const onPointerDown = (e: PointerEvent) => {
+   resolveScrollContainer()
+   const el = getScrollEl()
+   if (!el) return
+   startX = e.clientX
+   startY = e.clientY
+   startLeft = el.scrollLeft
+   startTop = el.scrollTop
+   dragging = false
+   ;(e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId)
+   if (pressTimeoutId) window.clearTimeout(pressTimeoutId)
+   pressTimeoutId = window.setTimeout(() => {
+      dragging = true
+      isDragging.value = true
+      document.body.style.cursor = 'grabbing'
+   }, longPressDelay)
+}
+
+const onPointerMove = (e: PointerEvent) => {
+   const el = getScrollEl()
+   if (!el || !dragging) return
+   const dx = e.clientX - startX
+   const dy = e.clientY - startY
+   let newLeft = startLeft - dx
+   let newTop = startTop - dy
+   const maxLeft = Math.max(0, el.scrollWidth - el.clientWidth)
+   const maxTop = Math.max(0, el.scrollHeight - el.clientHeight)
+   newLeft = Math.max(0, Math.min(maxLeft, newLeft))
+   newTop = Math.max(0, Math.min(maxTop, newTop))
+   el.scrollLeft = newLeft
+   el.scrollTop = newTop
+   e.preventDefault()
+}
+
+const endDrag = (e: PointerEvent) => {
+   if (pressTimeoutId) {
+      window.clearTimeout(pressTimeoutId)
+      pressTimeoutId = null
+   }
+   if (dragging) {
+      isDragging.value = false
+      document.body.style.cursor = ''
+   }
+   dragging = false
+   try {
+      (e.currentTarget as HTMLElement).releasePointerCapture?.(e.pointerId)
+   } catch {}
+}
+const onPointerUp = endDrag
+const onPointerCancel = endDrag
+
+onBeforeUnmount(() => {
+   if (pressTimeoutId) window.clearTimeout(pressTimeoutId)
+})
+
+// 等比缩放并保持视窗中心不抖动
+const applyZoom = (multiplier: number) => {
+   // const el = getScrollEl()
+   const oldScale = scale.value
+   let newScale = oldScale * multiplier
+   newScale = Math.max(minScale, Math.min(maxScale, newScale))
+   // const ratio = newScale / oldScale
+   // if (el) {
+   //    const cx = el.clientWidth / 2
+   //    const cy = el.clientHeight / 2
+   //    // const targetLeft = (el.scrollLeft + cx) * ratio - cx
+   //    // const targetTop = (el.scrollTop + cy) * ratio - cy
+   //    scale.value = +newScale.toFixed(4)
+   //    // requestAnimationFrame(() => {
+   //    //    const maxLeft = Math.max(0, el.scrollWidth - el.clientWidth)
+   //    //    const maxTop = Math.max(0, el.scrollHeight - el.clientHeight)
+   //    //    el.scrollLeft = Math.max(0, Math.min(maxLeft, targetLeft))
+   //    //    el.scrollTop = Math.max(0, Math.min(maxTop, targetTop))
+   //    // })
+   //    return
+   // }
+   scale.value = +newScale.toFixed(4)
+}
 
 const handleZoom = (index?: number) => {
    const _index = index ?? 1
-   pdfMargin.value += 10 * _index
+   const factor = 1 + 0.1 * _index
+   applyZoom(1 / factor)
 }
 
 const handleShrink = (index?: number) => {
    const _index = index ?? 1
-   // if (pdfMargin.value - 10 * _index <= 0) {
-   //     return pdfMargin.value = 0
-   // }
-   pdfMargin.value -= 10 * _index
+   const factor = 1 + 0.1 * _index
+   applyZoom(factor)
 }
 
 const handleResetMargin = () => {
-   pdfMargin.value = 0
+   const el = getScrollEl()
+   scale.value = 1
 }
 
+const pdfPageCount = ref<number>(-1)
+const canvasList = shallowReactive<HTMLCanvasElement[]>([])
+
 onMounted(async () => {
+   // 初始解析一次滚动容器（等待一帧确保DOM就绪）
+   requestAnimationFrame(() => resolveScrollContainer())
    const setLoadingMessage = miaoMessageRef.value?.alertTip('加载PDF插件中', {
       type: 'info',
       timeout: -1
@@ -141,6 +233,15 @@ onMounted(async () => {
 
 <style scoped lang="scss">
 .miao-container {
+   --bar-height: 44px;
+   --bar-bg: linear-gradient(90deg, #eef1f5 0%, #e3e7ec 100%);
+   --btn-bg: #ffffff;
+   --btn-hover: #f2f4f7;
+   --btn-active: #e6e9ef;
+   --btn-border: #d7dbe2;
+   --text: #1f2328;
+   --subtext: #6b7280;
+
    width: 100%;
    height: 100%;
    background-color: rgb(201, 201, 201);
@@ -151,31 +252,57 @@ onMounted(async () => {
 
    .miao-container-topBar {
       box-sizing: border-box;
-      padding: 0 30px;
-      height: 30px;
+      padding: 0 12px;
+      height: var(--bar-height);
       width: 100%;
-      background-color: rgb(170, 176, 182);
+      background: var(--bar-bg);
       display: flex;
-      justify-content: space-around;
+      justify-content: center;
       align-items: center;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+      backdrop-filter: saturate(180%) blur(8px);
 
-      &-btn {
+      .topBar-main {
+         display: flex;
+         align-items: center;
+         gap: 8px;
+         position: relative;
+         user-select: none;
+      }
+
+      .top-btn {
          cursor: pointer;
          user-select: none;
-         height: 80%;
-         padding: 0 5px;
-         display: flex;
+         height: 30px;
+         min-width: 34px;
+         padding: 0 10px;
+         display: inline-flex;
          align-items: center;
          justify-content: center;
-         font-size: larger;
-         letter-spacing: 1px;
-         color: black;
-         border-radius: 5px;
+         font-size: 14px;
+         letter-spacing: 0.5px;
+         color: var(--text);
+         background-color: var(--btn-bg);
+         border: 1px solid var(--btn-border);
+         border-radius: 8px;
+         box-shadow: 0 1px 0 rgba(0,0,0,0.02);
+         transition: background-color .15s ease, transform .08s ease, box-shadow .15s ease;
 
-         &:hover {
-            background-color: #eaeaea42;
+         &:hover { background-color: var(--btn-hover); }
+         &:active { background-color: var(--btn-active); transform: scale(0.98); }
       }
+
+      .scale-indicator {
+         position: absolute;
+         right: -60px;
+         min-width: 54px;
+         text-align: center;
+         font-size: 13px;
+         color: var(--subtext);
+         padding: 0 8px;
       }
+
+      .hint { color: var(--subtext); font-size: 12px; }
    }
 
    .miao-container-pdf {
@@ -183,9 +310,26 @@ onMounted(async () => {
       width: 100%;
       display: flex;
       flex-direction: column;
+      align-items: center; // 居中以便缩小时居中显示
+      touch-action: none; // 以便自定义拖动
+      &.is-dragging { cursor: grabbing; }
+
       .miao-container-pdf-content {
          display: flex;
          flex-direction: column;
+         transition: width .12s ease, padding-top .12s ease;
+         will-change: width, padding-top;
+
+         // 让Canvas随容器宽度等比缩放，保证显示完整
+         canvas {
+            width: 100%;
+            height: auto;
+            display: block;
+            margin: 0 auto 12px auto;
+            background: #fff;
+            border-radius: 6px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+         }
       }
    }
 

src/plugins/miaoVideoPlayer/miaoVideoPlayer.vue

@@ -1,10 +1,7 @@
 <template>
    <miao-drop-handler @on-virtual-files="handleDropVFiles">
       <div class="player-container">
-         <div
-            ref="xgPlayer"
-            id="xgplayer"
-         ></div>
+         <div ref="xgPlayer" id="xgplayer"></div>
       </div>
    </miao-drop-handler>
 </template>

src/plugins/onnx_demo_bird/export.ts

@@ -0,0 +1,51 @@
+import { registerComponentOption } from '@/class/PluginCenter'
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
+import { Analytics } from '@vicons/ionicons5'
+
+const pluginConfig: registerComponentOption = {
+   key: '45632456',
+   name: 'ONNX DEMO BIRD',
+   icon: Analytics,
+   getComponent: async () =>
+      (await import('./onnx_demo.vue')).default,
+   filter: (_vDirs: VirtualDirectory[], vFiles: VirtualFile[]) => {
+      if (vFiles.length === 0) {
+         return false
+      }
+      
+      // 检查是否存在.onnx文件
+      let hasOnnxFile = false
+      // 检查是否存在图片文件
+      let hasImageFile = false
+      
+      const imageSuffixList = [
+         'xbm', 'tif', 'pjp', 'svgz', 'jpg', 'jpeg', 'ico', 'tiff', 'gif',
+         'svg', 'jfif', 'webp', 'png', 'bmp', 'pjpeg', 'avif'
+      ]
+      
+      for (let vf of vFiles) {
+         if (vf.name.endsWith('.onnx')) {
+            hasOnnxFile = true
+            return true
+         }
+         
+         for (let end of imageSuffixList) {
+            if (vf.name.endsWith(end)) {
+               hasImageFile = true
+               break
+            }
+         }
+         
+         if (hasOnnxFile && hasImageFile) {
+            return true
+         }
+      }
+      
+      return false
+   }
+}
+
+export default pluginConfig
+
+import { PluginExportType } from '@/types/type'
+export const type = PluginExportType.component 

src/plugins/onnx_demo_bird/onnx_demo.vue

@@ -0,0 +1,306 @@
+<template>
+   <miao-drop-handler @on-virtual-files="handleDrop">
+      <miao-message-provider ref="miaoMessageRef">
+         <div class="onnx-demo" ref="rootRef">
+            <n-card title="ONNX模型演示" class="onnx-demo-card">
+               <n-grid :cols="2" :x-gap="12">
+                  <n-grid-item>
+                     <div class="onnx-demo-section">
+                        <h3>输入图像</h3>
+                        <div v-if="inputImage" class="onnx-demo-image-container">
+                           <img :src="inputImage.url" class="onnx-demo-image" />
+                           <p>{{ inputImage.name }}</p>
+                        </div>
+                        <n-empty v-else description="无图像" />
+                     </div>
+                  </n-grid-item>
+                  <n-grid-item>
+                     <div class="onnx-demo-section">
+                        <h3>ONNX模型</h3>
+                        <div v-if="onnxModel" class="onnx-demo-model-info">
+                           <p>模型: {{ onnxModel.name }}</p>
+                           <p>大小: {{ formatFileSize(onnxModel.size) }}</p>
+                        </div>
+                        <n-empty v-else description="无模型" />
+                     </div>
+                  </n-grid-item>
+               </n-grid>
+
+               <!-- <div class="onnx-demo-control">
+                  <n-button type="primary" @click="processImage" :disabled="!inputImage || !onnxModel || isProcessing"
+                     :loading="isProcessing">
+                     处理图像
+                  </n-button>
+               </div> -->
+
+               <div class="onnx-demo-result" v-if="modelOutput">
+                  <h3>模型输出:</h3>
+                  <n-card embedded>
+                     <pre>{{ modelOutput }}</pre>
+                  </n-card>
+               </div>
+            </n-card>
+         </div>
+      </miao-message-provider>
+   </miao-drop-handler>
+</template>
+
+<script setup lang="ts">
+import miaoDropHandler from '@/components/miaoDropHandler.vue'
+import miaoMessageProvider from '@/components/miaoAlertTipProvider.vue'
+import { VirtualFile } from '@/class/VirtualDirectory'
+import VirtualDirectory from '@/class/VirtualDirectory'
+import { onMounted, ref, computed, watch } from 'vue'
+// @ts-ignore
+let ort: any;
+
+const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
+   required: true
+})
+
+const currentDirectories = defineModel<VirtualDirectory[]>(
+  'currentDirectories',
+  {
+    required: true
+  }
+)
+
+const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
+const rootRef = ref()
+const isProcessing = ref(false)
+const modelOutput = ref<string | null>(null)
+
+// 获取第一个图像文件
+const inputImage = computed(() => {
+   const imageSuffixList = [
+      'xbm', 'tif', 'pjp', 'svgz', 'jpg', 'jpeg', 'ico', 'tiff', 'gif',
+      'svg', 'jfif', 'webp', 'png', 'bmp', 'pjpeg', 'avif'
+   ]
+
+   for (const file of currentFiles.value) {
+      for (const suffix of imageSuffixList) {
+         if (file.name.toLowerCase().endsWith(suffix)) {
+            return file
+         }
+      }
+   }
+
+   return null
+})
+
+// 获取ONNX模型文件
+const onnxModel = computed(() => {
+   for (const file of currentFiles.value) {
+      if (file.name.toLowerCase().endsWith('.onnx')) {
+         return file
+      }
+   }
+
+   return null
+})
+
+const handleDrop = (vFiles: VirtualFile[]) => {
+   const imageSuffixList = [
+      'xbm', 'tif', 'pjp', 'svgz', 'jpg', 'jpeg', 'ico', 'tiff', 'gif',
+      'svg', 'jfif', 'webp', 'png', 'bmp', 'pjpeg', 'avif'
+   ]
+   let imgFile: VirtualFile | null = null
+   out: for (const file of vFiles) {
+      for (const suffix of imageSuffixList) {
+         if (file.name.toLowerCase().endsWith(suffix)) {
+            imgFile = file
+            break out
+         }
+      }
+   }
+   if (imgFile) {
+      currentFiles.value.unshift(imgFile)
+   }
+}
+
+// 格式化文件大小
+const formatFileSize = (size: number): string => {
+   if (size < 1024) {
+      return `${size} B`
+   } else if (size < 1024 * 1024) {
+      return `${(size / 1024).toFixed(2)} KB`
+   } else {
+      return `${(size / (1024 * 1024)).toFixed(2)} MB`
+   }
+}
+
+const resizeImage = async (img: ImageBitmap, width: number, height: number): Promise<ImageBitmap> => {
+   const canvas = new OffscreenCanvas(width, height)
+   canvas.width = width
+   canvas.height = height
+   const ctx = canvas.getContext('2d')
+   ctx?.drawImage(img, 0, 0, width, height)
+   return await createImageBitmap(canvas)
+}
+
+// 处理图像
+const processImage = async () => {
+   if (!inputImage.value || !onnxModel.value) {
+      miaoMessageRef.value?.alertTip('请选择图像和ONNX模型文件', { type: 'error', timeout: 2000 })
+      return
+   }
+
+   isProcessing.value = true
+   modelOutput.value = null
+
+   try {
+      const alertUpdate = miaoMessageRef.value!.alertTip('正在加载ONNX模型...', { type: 'info', timeout: 2000 })
+
+      const modelResponse = await fetch(onnxModel.value.url)
+      const modelBuffer = await modelResponse.arrayBuffer()
+      alertUpdate('正在创建推理会话...')
+
+      const session = await ort.InferenceSession.create(modelBuffer)
+
+      alertUpdate('正在加载图像...')
+      const imgResponse = await fetch(inputImage.value.url)
+      const imgBlob = await imgResponse.blob()
+
+      alertUpdate('正在预处理图像...')
+      const size = 448
+      const img = await createImageBitmap(imgBlob)
+      const data = await resizeImage(img, size, size)
+
+      const canvas = new OffscreenCanvas(size, size)
+      const ctx = canvas.getContext('2d') as unknown as CanvasRenderingContext2D
+      ctx.drawImage(data, 0, 0, size, size)
+      const imageData = ctx.getImageData(0, 0, size, size).data
+      const newImageData = new Uint8ClampedArray(size * size * 3)
+      for (let i = 0; i < size * size; i++) {
+         newImageData[i * 3] = imageData[i * 4]
+         newImageData[i * 3 + 1] = imageData[i * 4 + 1] 
+         newImageData[i * 3 + 2] = imageData[i * 4 + 2]
+      }
+
+      // const greyScale = [];
+      // for (let i = 0; i < imageData.length; i += 4) {
+      //    greyScale.push(
+      //       (imageData[i] * 0.299 + imageData[i + 1] * 0.587 + imageData[i + 2] * 0.114 - 127.5) /
+      //       127.5
+      //    );
+      // }
+      // debugger
+      const inputTensor = new ort.Tensor('float32', new Float32Array(newImageData), [1, 3, size, size])
+
+      alertUpdate('执行模型推理...')
+      const outputMap = await session.run({
+         input: inputTensor
+      })
+
+      alertUpdate('处理模型输出结果...')
+
+      const outputTensor = Object.values(outputMap)[0]
+      const formattedOutput = JSON.stringify(
+         {
+            data: [...[...(outputTensor as { data: Float32Array }).data].entries()].sort((a, b) => b[1] - a[1]).map(([index, value]) => ({ index, value }))
+         },
+         null,
+         2
+      )
+      modelOutput.value = formattedOutput
+
+      alertUpdate('处理完成!', { type: 'success' })
+   } catch (error) {
+      console.error('ONNX处理错误:', error)
+      miaoMessageRef.value?.alertTip(`处理出错`, { type: 'error', timeout: 2000 })
+      modelOutput.value = `错误: ${error}`
+   } finally {
+      isProcessing.value = false
+   }
+}
+
+onMounted(async () => {
+   console.log('currentDirectories.value[0].url', currentDirectories.value[0]?.url)
+   if (currentDirectories.value && currentDirectories.value.length > 0 && currentDirectories.value[0].url) {
+      const ortModule = await import(/* @vite-ignore */ `${currentDirectories.value[0].url}dist/ort.all.min.mjs`);
+      ort = ortModule;
+      console.log('ort', ort)
+   } else {
+      //  @ts-ignore
+      const ortModule = await import(/* @vite-ignore */ 'https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.all.min.js');
+      ort = ortModule;
+   }
+   
+   await initModel();
+})
+
+const initModel = async () => {
+   if (inputImage.value && onnxModel.value) {
+      miaoMessageRef.value?.alertTip('已检测到图像和ONNX模型，可以进行处理', { type: 'info', timeout: 2000 })
+   }
+
+   watch(() => inputImage.value, () => {
+      processImage()
+   }, {
+      immediate: true
+   })
+}
+</script>
+
+<style scoped>
+.onnx-demo {
+   width: 100%;
+   height: 100%;
+   padding: 16px;
+   overflow: auto;
+}
+
+.onnx-demo-card {
+   margin-bottom: 16px;
+}
+
+.onnx-demo-section {
+   padding: 8px;
+   text-align: center;
+   border: 1px dashed #ccc;
+   border-radius: 4px;
+   min-height: 200px;
+   display: flex;
+   flex-direction: column;
+   justify-content: center;
+}
+
+.onnx-demo-image-container {
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+}
+
+.onnx-demo-image {
+   max-width: 100%;
+   max-height: 180px;
+   object-fit: contain;
+}
+
+.onnx-demo-model-info {
+   text-align: left;
+   width: 100%;
+}
+
+.onnx-demo-control {
+   display: flex;
+   justify-content: center;
+   margin: 16px 0;
+}
+
+.onnx-demo-result {
+   margin-top: 16px;
+   border-top: 1px solid #eee;
+   padding-top: 16px;
+}
+
+.onnx-demo-result pre {
+   white-space: pre-wrap;
+   word-break: break-all;
+   max-height: 300px;
+   overflow: auto;
+   background-color: #f5f5f5;
+   padding: 8px;
+   border-radius: 4px;
+}
+</style>

src/plugins/onnx_demo_emotion/export.ts

@@ -0,0 +1,51 @@
+import { registerComponentOption } from '@/class/PluginCenter'
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
+import { Analytics } from '@vicons/ionicons5'
+
+const pluginConfig: registerComponentOption = {
+   key: 'onnx_demo_emotion',
+   name: 'ONNX DEMO EMOTION',
+   icon: Analytics,
+   getComponent: async () =>
+      (await import('@/plugins/onnx_demo_emotion/onnx_demo.vue')).default,
+   filter: (_vDirs: VirtualDirectory[], vFiles: VirtualFile[]) => {
+      if (vFiles.length === 0) {
+         return false
+      }
+      
+      // 检查是否存在.onnx文件
+      let hasOnnxFile = false
+      // 检查是否存在图片文件
+      let hasImageFile = false
+      
+      const imageSuffixList = [
+         'xbm', 'tif', 'pjp', 'svgz', 'jpg', 'jpeg', 'ico', 'tiff', 'gif',
+         'svg', 'jfif', 'webp', 'png', 'bmp', 'pjpeg', 'avif'
+      ]
+      
+      for (let vf of vFiles) {
+         if (vf.name.endsWith('.onnx')) {
+            hasOnnxFile = true
+            return true
+         }
+         
+         for (let end of imageSuffixList) {
+            if (vf.name.endsWith(end)) {
+               hasImageFile = true
+               break
+            }
+         }
+         
+         if (hasOnnxFile && hasImageFile) {
+            return true
+         }
+      }
+      
+      return false
+   }
+}
+
+export default pluginConfig
+
+import { PluginExportType } from '@/types/type'
+export const type = PluginExportType.component 

src/plugins/onnx_demo_emotion/onnx_demo.vue

@@ -0,0 +1,299 @@
+<template>
+   <miao-drop-handler @on-virtual-files="handleDrop">
+      <miao-message-provider ref="miaoMessageRef">
+         <div class="onnx-demo" ref="rootRef">
+            <n-card title="ONNX模型演示" class="onnx-demo-card">
+               <n-grid :cols="2" :x-gap="12">
+                  <n-grid-item>
+                     <div class="onnx-demo-section">
+                        <h3>输入图像</h3>
+                        <div v-if="inputImage" class="onnx-demo-image-container">
+                           <img :src="inputImage.url" class="onnx-demo-image" />
+                           <p>{{ inputImage.name }}</p>
+                        </div>
+                        <n-empty v-else description="无图像" />
+                     </div>
+                  </n-grid-item>
+                  <n-grid-item>
+                     <div class="onnx-demo-section">
+                        <h3>ONNX模型</h3>
+                        <div v-if="onnxModel" class="onnx-demo-model-info">
+                           <p>模型: {{ onnxModel.name }}</p>
+                           <p>大小: {{ formatFileSize(onnxModel.size) }}</p>
+                        </div>
+                        <n-empty v-else description="无模型" />
+                     </div>
+                  </n-grid-item>
+               </n-grid>
+
+               <!-- <div class="onnx-demo-control">
+                  <n-button type="primary" @click="processImage" :disabled="!inputImage || !onnxModel || isProcessing"
+                     :loading="isProcessing">
+                     处理图像
+                  </n-button>
+               </div> -->
+
+               <div class="onnx-demo-result" v-if="modelOutput">
+                  <h3>模型输出:</h3>
+                  <n-card embedded>
+                     <pre>{{ modelOutput }}</pre>
+                  </n-card>
+               </div>
+            </n-card>
+         </div>
+      </miao-message-provider>
+   </miao-drop-handler>
+</template>
+
+<script setup lang="ts">
+import miaoDropHandler from '@/components/miaoDropHandler.vue'
+import miaoMessageProvider from '@/components/miaoAlertTipProvider.vue'
+import { VirtualFile } from '@/class/VirtualDirectory'
+import VirtualDirectory from '@/class/VirtualDirectory'
+import { onMounted, ref, computed, watch } from 'vue'
+// @ts-ignore
+let ort: any;
+
+const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
+   required: true
+})
+
+const currentDirectories = defineModel<VirtualDirectory[]>(
+  'currentDirectories',
+  {
+    required: true
+  }
+)
+
+const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
+const rootRef = ref()
+const isProcessing = ref(false)
+const modelOutput = ref<string | null>(null)
+
+// 获取第一个图像文件
+const inputImage = computed(() => {
+   const imageSuffixList = [
+      'xbm', 'tif', 'pjp', 'svgz', 'jpg', 'jpeg', 'ico', 'tiff', 'gif',
+      'svg', 'jfif', 'webp', 'png', 'bmp', 'pjpeg', 'avif'
+   ]
+
+   for (const file of currentFiles.value) {
+      for (const suffix of imageSuffixList) {
+         if (file.name.toLowerCase().endsWith(suffix)) {
+            return file
+         }
+      }
+   }
+
+   return null
+})
+
+// 获取ONNX模型文件
+const onnxModel = computed(() => {
+   for (const file of currentFiles.value) {
+      if (file.name.toLowerCase().endsWith('.onnx')) {
+         return file
+      }
+   }
+
+   return null
+})
+
+const handleDrop = (vFiles: VirtualFile[]) => {
+   const imageSuffixList = [
+      'xbm', 'tif', 'pjp', 'svgz', 'jpg', 'jpeg', 'ico', 'tiff', 'gif',
+      'svg', 'jfif', 'webp', 'png', 'bmp', 'pjpeg', 'avif'
+   ]
+   let imgFile: VirtualFile | null = null
+   out: for (const file of vFiles) {
+      for (const suffix of imageSuffixList) {
+         if (file.name.toLowerCase().endsWith(suffix)) {
+            imgFile = file
+            break out
+         }
+      }
+   }
+   if (imgFile) {
+      currentFiles.value.unshift(imgFile)
+   }
+}
+
+// 格式化文件大小
+const formatFileSize = (size: number): string => {
+   if (size < 1024) {
+      return `${size} B`
+   } else if (size < 1024 * 1024) {
+      return `${(size / 1024).toFixed(2)} KB`
+   } else {
+      return `${(size / (1024 * 1024)).toFixed(2)} MB`
+   }
+}
+
+const resizeImage = async (img: ImageBitmap, width: number, height: number): Promise<ImageBitmap> => {
+   const canvas = new OffscreenCanvas(width, height)
+   canvas.width = width
+   canvas.height = height
+   const ctx = canvas.getContext('2d')
+   ctx?.drawImage(img, 0, 0, width, height)
+   return await createImageBitmap(canvas)
+}
+
+// 处理图像
+const processImage = async () => {
+   if (!inputImage.value || !onnxModel.value) {
+      miaoMessageRef.value?.alertTip('请选择图像和ONNX模型文件', { type: 'error', timeout: 2000 })
+      return
+   }
+
+   isProcessing.value = true
+   modelOutput.value = null
+
+   try {
+      const alertUpdate = miaoMessageRef.value!.alertTip('正在加载ONNX模型...', { type: 'info', timeout: 2000 })
+
+      const modelResponse = await fetch(onnxModel.value.url)
+      const modelBuffer = await modelResponse.arrayBuffer()
+      alertUpdate('正在创建推理会话...')
+
+      const session = await ort.InferenceSession.create(modelBuffer)
+
+      alertUpdate('正在加载图像...')
+      const imgResponse = await fetch(inputImage.value.url)
+      const imgBlob = await imgResponse.blob()
+
+      alertUpdate('正在预处理图像...')
+      const size = 64
+      const img = await createImageBitmap(imgBlob)
+      const data = await resizeImage(img, size, size)
+
+      const canvas = new OffscreenCanvas(size, size)
+      const ctx = canvas.getContext('2d') as unknown as CanvasRenderingContext2D
+      ctx.drawImage(data, 0, 0, size, size)
+      const imageData = ctx.getImageData(0, 0, size, size).data
+
+      const greyScale = [];
+      for (let i = 0; i < imageData.length; i += 4) {
+         greyScale.push(
+            (imageData[i] * 0.299 + imageData[i + 1] * 0.587 + imageData[i + 2] * 0.114 - 127.5) /
+            127.5
+         );
+      }
+      const inputTensor = new ort.Tensor('float32', new Float32Array(greyScale), [1, 1, size, size])
+
+      alertUpdate('执行模型推理...')
+      const outputMap = await session.run({
+         Input2505: inputTensor
+      })
+
+      alertUpdate('处理模型输出结果...')
+
+      const outputTensor = Object.values(outputMap)[0]
+      const formattedOutput = JSON.stringify(
+         {
+            data: [...[...(outputTensor as { data: Float32Array }).data].entries()].sort((a, b) => b[1] - a[1]).map(([index, value]) => ({ index, value }))
+         },
+         null,
+         2
+      )
+      modelOutput.value = formattedOutput
+
+      alertUpdate('处理完成!', { type: 'success' })
+   } catch (error) {
+      console.error('ONNX处理错误:', error)
+      miaoMessageRef.value?.alertTip(`处理出错`, { type: 'error', timeout: 2000 })
+      modelOutput.value = `错误: ${error}`
+   } finally {
+      isProcessing.value = false
+   }
+}
+
+onMounted(async () => {
+   console.log('currentDirectories.value[0].url', currentDirectories.value[0]?.url)
+   if (currentDirectories.value && currentDirectories.value.length > 0 && currentDirectories.value[0].url) {
+      const ortModule = await import(/* @vite-ignore */ `${currentDirectories.value[0].url}dist/ort.all.min.mjs`);
+      ort = ortModule;
+      console.log('ort', ort)
+   } else {
+      //  @ts-ignore
+      const ortModule = await import(/* @vite-ignore */ 'https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.all.min.js');
+      ort = ortModule;
+   }
+   
+   await initModel();
+})
+
+const initModel = async () => {
+   if (inputImage.value && onnxModel.value) {
+      miaoMessageRef.value?.alertTip('已检测到图像和ONNX模型，可以进行处理', { type: 'info', timeout: 2000 })
+   }
+
+   watch(() => inputImage.value, () => {
+      processImage()
+   }, {
+      immediate: true
+   })
+}
+</script>
+
+<style scoped>
+.onnx-demo {
+   width: 100%;
+   height: 100%;
+   padding: 16px;
+   overflow: auto;
+}
+
+.onnx-demo-card {
+   margin-bottom: 16px;
+}
+
+.onnx-demo-section {
+   padding: 8px;
+   text-align: center;
+   border: 1px dashed #ccc;
+   border-radius: 4px;
+   min-height: 200px;
+   display: flex;
+   flex-direction: column;
+   justify-content: center;
+}
+
+.onnx-demo-image-container {
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+}
+
+.onnx-demo-image {
+   max-width: 100%;
+   max-height: 180px;
+   object-fit: contain;
+}
+
+.onnx-demo-model-info {
+   text-align: left;
+   width: 100%;
+}
+
+.onnx-demo-control {
+   display: flex;
+   justify-content: center;
+   margin: 16px 0;
+}
+
+.onnx-demo-result {
+   margin-top: 16px;
+   border-top: 1px solid #eee;
+   padding-top: 16px;
+}
+
+.onnx-demo-result pre {
+   white-space: pre-wrap;
+   word-break: break-all;
+   max-height: 300px;
+   overflow: auto;
+   background-color: #f5f5f5;
+   padding: 8px;
+   border-radius: 4px;
+}
+</style>

src/plugins/onnx_demo_mnist/export.ts

@@ -0,0 +1,31 @@
+import { registerComponentOption } from '@/class/PluginCenter'
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
+import { Analytics } from '@vicons/ionicons5'
+
+const pluginConfig: registerComponentOption = {
+   key: 'onnx_demo_mnist',
+   name: 'ONNX DEMO MNIST',
+   icon: Analytics,
+   getComponent: async () =>
+      // @ts-ignore
+      (await import('@/plugins/onnx_demo_mnist/onnx_demo_mnist.vue')).default,
+   filter: (_vDirs: VirtualDirectory[], vFiles: VirtualFile[]) => {
+      if (vFiles.length === 0) {
+         return false
+      }
+      
+      // 检查是否存在.onnx文件
+      for (let vf of vFiles) {
+         if (vf.name.endsWith('.onnx')) {
+            return true
+         }
+      }
+      
+      return false
+   }
+}
+
+export default pluginConfig
+
+import { PluginExportType } from '@/types/type'
+export const type = PluginExportType.component 

src/plugins/onnx_demo_mnist/onnx_demo_mnist.vue

@@ -0,0 +1,536 @@
+<template>
+   <miao-drop-handler @on-virtual-files="handleDrop">
+      <miao-message-provider ref="miaoMessageRef">
+         <div class="mnist-demo" ref="rootRef">
+            <n-card title="MNIST手写数字识别" class="mnist-demo-card">
+               <n-grid :cols="2" :x-gap="12">
+                  <n-grid-item>
+                     <div class="mnist-demo-section">
+                        <h3>手写数字画板 (28×28像素)</h3>
+                        <div class="canvas-container">
+                           <canvas ref="drawingCanvasRef" width="28" height="28" class="drawing-canvas"
+                              @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing"
+                              @mouseleave="stopDrawing" @touchstart.prevent="handleTouchStart"
+                              @touchmove.prevent="handleTouchMove" @touchend.prevent="stopDrawing"></canvas>
+                           <div class="canvas-controls">
+                              <n-button @click="clearCanvas">清除</n-button>
+                              <n-button type="primary" @click="recognizeDigit" :disabled="!onnxModel || isProcessing"
+                                 :loading="isProcessing">
+                                 识别
+                              </n-button>
+                           </div>
+                        </div>
+                     </div>
+                  </n-grid-item>
+                  <n-grid-item>
+                     <div class="mnist-demo-section">
+                        <h3>ONNX模型</h3>
+                        <div v-if="onnxModel" class="mnist-demo-model-info">
+                           <p>模型: {{ onnxModel.name }}</p>
+                           <p>大小: {{ formatFileSize(onnxModel.size) }}</p>
+                        </div>
+                        <n-empty v-else description="无模型" />
+
+                        <div class="mnist-demo-result" v-if="modelOutput">
+                           <h3>识别结果:</h3>
+                           <div class="result-container">
+                              <div class="result-digit">{{ recognizedDigit }}</div>
+                              <!-- <n-progress type="line" :percentage="confidence" :indicator-placement="'inside'" :color="resultColor" /> -->
+                              <div class="confidence-text">置信度: {{ (confidence).toFixed(2) }}%</div>
+                           </div>
+                        </div>
+                     </div>
+                  </n-grid-item>
+               </n-grid>
+            </n-card>
+         </div>
+      </miao-message-provider>
+   </miao-drop-handler>
+</template>
+
+<script setup lang="ts">
+import miaoDropHandler from '@/components/miaoDropHandler.vue'
+import miaoMessageProvider from '@/components/miaoAlertTipProvider.vue'
+import { VirtualFile } from '@/class/VirtualDirectory'
+import VirtualDirectory from '@/class/VirtualDirectory'
+import { onMounted, ref, computed } from 'vue'
+// @ts-ignore
+let ort: any;
+
+const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
+   required: true
+})
+
+const currentDirectories = defineModel<VirtualDirectory[]>(
+   'currentDirectories',
+   {
+      required: true
+   }
+)
+
+// 画板常量
+const GRID_SIZE = 28  // MNIST 模型的输入是 28x28
+// const DISPLAY_SCALE = 10 // 显示缩放比例，用于CSS缩放
+
+const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
+const rootRef = ref()
+const drawingCanvasRef = ref<HTMLCanvasElement | null>(null)
+const isProcessing = ref(false)
+const modelOutput = ref<number[] | null>(null)
+const recognizedDigit = ref<number | null>(null)
+const confidence = ref<number>(0)
+const resultColor = ref('#18a058')
+
+// 绘图相关状态
+const isDrawing = ref(false)
+const lastPos = ref<{ x: number, y: number } | null>(null)
+const gridData = ref<number[][]>(Array(GRID_SIZE).fill(0).map(() => Array(GRID_SIZE).fill(0)))
+
+// 获取ONNX模型文件
+const onnxModel = computed(() => {
+   for (const file of currentFiles.value) {
+      if (file.name.toLowerCase().endsWith('.onnx')) {
+         return file
+      }
+   }
+   return null
+})
+
+// 获取Canvas上下文
+const getContext = (): CanvasRenderingContext2D | null => {
+   const canvas = drawingCanvasRef.value
+   if (!canvas) return null
+   const ctx = canvas.getContext('2d')
+   if (!ctx) return null
+   return ctx
+}
+
+// 将显示坐标转换为Canvas像素坐标
+const convertCoordsToCanvas = (displayX: number, displayY: number): { x: number, y: number } => {
+   const canvas = drawingCanvasRef.value
+   if (!canvas) return { x: 0, y: 0 }
+
+   // 获取Canvas的CSS尺寸
+   const rect = canvas.getBoundingClientRect()
+
+   // 计算缩放比例
+   const scaleX = canvas.width / rect.width
+   const scaleY = canvas.height / rect.height
+
+   // 将显示坐标转换为Canvas坐标
+   const canvasX = (displayX - rect.left) * scaleX
+   const canvasY = (displayY - rect.top) * scaleY
+
+   // 返回整数坐标（因为我们是28x28的像素级别操作）
+   return {
+      x: Math.floor(canvasX),
+      y: Math.floor(canvasY)
+   }
+}
+
+// 画板绘图相关函数
+const clearCanvas = () => {
+   const ctx = getContext()
+   if (!ctx) return
+
+   // 清空Canvas
+   ctx.fillStyle = 'white'
+   ctx.fillRect(0, 0, GRID_SIZE, GRID_SIZE)
+
+   // 清空数据
+   gridData.value = Array(GRID_SIZE).fill(0).map(() => Array(GRID_SIZE).fill(0))
+
+   // 清除结果
+   modelOutput.value = null
+   recognizedDigit.value = null
+   confidence.value = 0
+}
+
+// 开始绘制
+const startDrawing = (e: MouseEvent) => {
+   isDrawing.value = true
+
+   const { x, y } = convertCoordsToCanvas(e.clientX, e.clientY)
+   lastPos.value = { x, y }
+   drawPixel(x, y)
+}
+
+// 绘制
+const draw = (e: MouseEvent) => {
+   if (!isDrawing.value || !lastPos.value) return
+
+   const { x, y } = convertCoordsToCanvas(e.clientX, e.clientY)
+   if (x === lastPos.value.x && y === lastPos.value.y) return // 避免在同一像素重复绘制
+
+   // 绘制当前像素
+   drawPixel(x, y)
+
+   // 绘制连续线条（Bresenham算法）
+   const { x: lastX, y: lastY } = lastPos.value
+   drawLine(lastX, lastY, x, y)
+
+   // 更新最后位置
+   lastPos.value = { x, y }
+}
+
+// 停止绘制
+const stopDrawing = () => {
+   isDrawing.value = false
+   lastPos.value = null
+   // 更新到gridData（因为我们在绘制时已经更新了，所以这里不需要额外操作）
+
+   // 如果有ONNX模型且当前没有在推理中，则自动进行推理
+   // if (onnxModel.value && !isProcessing.value) {
+   //    recognizeDigit()
+   // }
+}
+
+// 绘制单个像素
+const drawPixel = (x: number, y: number) => {
+   if (x < 0 || x >= GRID_SIZE || y < 0 || y >= GRID_SIZE) return
+
+   const ctx = getContext()
+   if (!ctx) return
+
+   // 绘制到Canvas
+   ctx.fillStyle = 'black'
+   ctx.fillRect(x, y, 1, 1)
+
+   // 更新数据
+   gridData.value[y][x] = 1
+}
+
+// 使用Bresenham算法绘制线条
+const drawLine = (x0: number, y0: number, x1: number, y1: number) => {
+   const dx = Math.abs(x1 - x0)
+   const dy = Math.abs(y1 - y0)
+   const sx = x0 < x1 ? 1 : -1
+   const sy = y0 < y1 ? 1 : -1
+   let err = dx - dy
+
+   while (true) {
+      // 如果是终点，结束循环
+      if (x0 === x1 && y0 === y1) break
+
+      const e2 = 2 * err
+      if (e2 > -dy) {
+         err -= dy
+         x0 += sx
+      }
+      if (e2 < dx) {
+         err += dx
+         y0 += sy
+      }
+
+      drawPixel(x0, y0)
+   }
+}
+
+// 处理触摸事件
+const handleTouchStart = (e: TouchEvent) => {
+   if (e.touches.length !== 1) return
+
+   const touch = e.touches[0]
+   const { x, y } = convertCoordsToCanvas(touch.clientX, touch.clientY)
+
+   isDrawing.value = true
+   lastPos.value = { x, y }
+   drawPixel(x, y)
+}
+
+const handleTouchMove = (e: TouchEvent) => {
+   if (!isDrawing.value || !lastPos.value) return
+   if (e.touches.length !== 1) return
+
+   const touch = e.touches[0]
+   const { x, y } = convertCoordsToCanvas(touch.clientX, touch.clientY)
+
+   if (x === lastPos.value.x && y === lastPos.value.y) return // 避免在同一像素重复绘制
+
+   // 绘制当前像素
+   drawPixel(x, y)
+
+   // 绘制连续线条
+   const { x: lastX, y: lastY } = lastPos.value
+   drawLine(lastX, lastY, x, y)
+
+   // 更新最后位置
+   lastPos.value = { x, y }
+}
+
+// 从Canvas更新gridData（在本实现中，我们在绘制时已经同步更新了gridData，这个函数保留用于检查）
+const updateGridDataFromCanvas = () => {
+   const ctx = getContext()
+   if (!ctx) return
+
+   // 从Canvas读取像素数据
+   const imageData = ctx.getImageData(0, 0, GRID_SIZE, GRID_SIZE)
+   const data = imageData.data
+
+   // 更新gridData
+   for (let y = 0; y < GRID_SIZE; y++) {
+      for (let x = 0; x < GRID_SIZE; x++) {
+         const pixelIndex = (y * GRID_SIZE + x) * 4
+         const r = data[pixelIndex]
+         const g = data[pixelIndex + 1]
+         const b = data[pixelIndex + 2]
+
+         // 简单阈值处理，非白即黑
+         gridData.value[y][x] = (r + g + b < 600) ? 1 : 0
+      }
+   }
+}
+
+// 处理文件拖放
+const handleDrop = (vFiles: VirtualFile[]) => {
+   for (const file of vFiles) {
+      if (file.name.toLowerCase().endsWith('.onnx')) {
+         currentFiles.value.unshift(file)
+         miaoMessageRef.value?.alertTip('已添加ONNX模型文件', { type: 'success', timeout: 2000 })
+         return
+      }
+   }
+}
+
+// 格式化文件大小
+const formatFileSize = (size: number): string => {
+   if (size < 1024) {
+      return `${size} B`
+   } else if (size < 1024 * 1024) {
+      return `${(size / 1024).toFixed(2)} KB`
+   } else {
+      return `${(size / (1024 * 1024)).toFixed(2)} MB`
+   }
+}
+
+// 将grid数据预处理为MNIST输入格式
+const preprocessGridData = (): Float32Array => {
+   // 转换为MNIST模型期望的格式 (1x1x28x28)
+   const inputData = new Float32Array(GRID_SIZE * GRID_SIZE)
+
+   for (let row = 0; row < GRID_SIZE; row++) {
+      for (let col = 0; col < GRID_SIZE; col++) {
+         // 计算一维索引
+         const index = row * GRID_SIZE + col
+         // 存储像素值（MNIST期望格式为：黑色笔画对应较高的值，白色背景对应较低的值）
+         inputData[index] = gridData.value[row][col]
+      }
+   }
+
+   return inputData
+}
+
+// 识别手写数字
+const recognizeDigit = async () => {
+   if (!onnxModel.value) {
+      miaoMessageRef.value?.alertTip('请先选择ONNX模型文件', { type: 'error', timeout: 2000 })
+      return
+   }
+
+   // 在识别前检查并更新gridData
+   updateGridDataFromCanvas()
+
+   isProcessing.value = true
+   modelOutput.value = null
+   recognizedDigit.value = null
+   confidence.value = 0
+
+   try {
+      // 显示处理信息
+      const alertUpdate = miaoMessageRef.value!.alertTip('正在加载ONNX模型...', { type: 'info', timeout: 2000 })
+
+      // 1. 加载模型
+      const modelResponse = await fetch(onnxModel.value.url)
+      const modelBuffer = await modelResponse.arrayBuffer()
+      alertUpdate('正在创建推理会话...')
+
+      // 创建ONNX会话
+      const session = await ort.InferenceSession.create(modelBuffer)
+
+      // 2. 预处理画布数据
+      alertUpdate('正在预处理图像...')
+      const inputData = preprocessGridData()
+
+      // 创建输入张量
+      // MNIST模型通常期望形状为[1, 1, 28, 28]的输入
+      const inputTensor = new ort.Tensor('float32', inputData, [1, 1, 28, 28])
+
+      alertUpdate('执行模型推理...')
+
+      // 3. 运行模型推理 - 使用"Input3"作为输入名称
+      const outputs = await session.run({
+         // 使用正确的输入名称
+         Input3: inputTensor
+      })
+
+      // 4. 处理模型输出
+      alertUpdate('处理模型输出结果...')
+
+      // 获取输出数据
+      const outputTensor = Object.values(outputs)[0]
+      const outputData = [...(outputTensor as { data: Float32Array }).data]
+
+      // 设置结果
+      modelOutput.value = outputData
+
+      // 找出最可能的数字（最大概率对应的索引）
+      let maxIndex = 0
+      let maxProb = outputData[0]
+
+      for (let i = 1; i < outputData.length; i++) {
+         if (outputData[i] > maxProb) {
+            maxProb = outputData[i]
+            maxIndex = i
+         }
+      }
+
+      recognizedDigit.value = maxIndex
+
+      // 计算置信度百分比
+      const softmaxSum = outputData.reduce((sum, val) => sum + Math.exp(val), 0)
+      const probability = Math.exp(maxProb) / softmaxSum
+      confidence.value = probability * 100
+
+      // 设置结果颜色
+      if (confidence.value > 90) {
+         resultColor.value = '#18a058' // 绿色
+      } else if (confidence.value > 70) {
+         resultColor.value = '#2080f0' // 蓝色
+      } else if (confidence.value > 50) {
+         resultColor.value = '#f0a020' // 橙色
+      } else {
+         resultColor.value = '#d03050' // 红色
+      }
+
+      alertUpdate('识别完成!', { type: 'success' })
+   } catch (error) {
+      console.error('ONNX处理错误:', error)
+      miaoMessageRef.value?.alertTip(`处理出错: ${error}`, { type: 'error', timeout: 2000 })
+   } finally {
+      isProcessing.value = false
+   }
+}
+
+onMounted(async () => {
+   // 如果传入了onnxruntime-web，则使用传入的，否则从jsdelivr加载
+   if (currentDirectories.value && currentDirectories.value.length > 0 && currentDirectories.value[0]?.url) {
+      const ortModule = await import(/* @vite-ignore */ `${currentDirectories.value[0]?.url}/dist/ort.all.min.mjs`);
+      ort = ortModule;
+   } else {
+      // 从jsdelivr加载
+      //  @ts-ignore
+      const ortModule = await import(/* @vite-ignore */ 'https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.all.min.js');
+      ort = ortModule;
+   }
+
+   // 初始化绘图区域
+   if (drawingCanvasRef.value) {
+      initCanvas();
+   }
+})
+
+// 添加初始化画布函数
+const initCanvas = () => {
+   // 初始化Canvas
+   const ctx = getContext()
+   if (ctx) {
+      // 设置白色背景
+      ctx.fillStyle = 'white'
+      ctx.fillRect(0, 0, GRID_SIZE, GRID_SIZE)
+
+      // 设置抗锯齿（关闭，保证像素对齐）
+      ctx.imageSmoothingEnabled = false
+   }
+
+   // 检查是否有ONNX模型
+   if (onnxModel.value) {
+      miaoMessageRef.value?.alertTip('已检测到ONNX模型文件，您可以绘制数字进行识别', { type: 'info', timeout: 2000 })
+   } else {
+      miaoMessageRef.value?.alertTip('请添加MNIST模型(.onnx)文件', { type: 'info', timeout: 2000 })
+   }
+}
+</script>
+
+<style scoped>
+.mnist-demo {
+   width: 100%;
+   height: 100%;
+   padding: 16px;
+   overflow: auto;
+}
+
+.mnist-demo-card {
+   margin-bottom: 16px;
+}
+
+.mnist-demo-section {
+   padding: 8px;
+   text-align: center;
+   border: 1px dashed #ccc;
+   border-radius: 4px;
+   min-height: 320px;
+   display: flex;
+   flex-direction: column;
+   justify-content: flex-start;
+}
+
+.canvas-container {
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   margin-top: 8px;
+}
+
+.drawing-canvas {
+   width: 280px;
+   height: 280px;
+   border: 1px solid #ccc;
+   touch-action: none;
+   image-rendering: pixelated;
+   /* 像素化渲染 */
+   image-rendering: crisp-edges;
+   /* 确保边缘清晰 */
+   background-color: white;
+   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+}
+
+.canvas-controls {
+   display: flex;
+   justify-content: center;
+   gap: 12px;
+   margin-top: 16px;
+}
+
+.mnist-demo-model-info {
+   text-align: left;
+   width: 100%;
+   margin-bottom: 20px;
+}
+
+.mnist-demo-result {
+   margin-top: 16px;
+   border-top: 1px solid #eee;
+   padding-top: 16px;
+   width: 100%;
+}
+
+.result-container {
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   margin-top: 16px;
+}
+
+.result-digit {
+   font-size: 64px;
+   font-weight: bold;
+   line-height: 1;
+   margin-bottom: 16px;
+}
+
+.confidence-text {
+   margin-top: 8px;
+   font-size: 14px;
+   color: #666;
+}
+</style>

src/styles/default.scss

@@ -1,3 +1,5 @@
+@use './naive-ui-fix.scss';
+
 :root body {
    background-color: aliceblue;
 }

src/styles/naive-ui-fix.scss

@@ -0,0 +1,4 @@
+// 修复naive-ui与tailwindcss冲突
+.n-qr-code {
+   box-sizing: content-box;
+}

src/styles/tailwind.css

@@ -0,0 +1 @@
+@import "tailwindcss";

src/types/fetch.ts

@@ -35,5 +35,6 @@ export type uploadOption = {
 export type deleteOption = {} & miaoFetchConfig
 export type renameOption = {} & miaoFetchConfig
 export type cutOption = {} & miaoFetchConfig
+export type copyOption = {} & miaoFetchConfig
 export type mkdirOption = {} & miaoFetchConfig
 export type queryOption = {} & miaoFetchConfig

src/utils/buildFromTree.ts

@@ -1,4 +1,5 @@
-import VirtualDirectory, { Tree, VirtualFile } from '@/class/VirtualDirectory'
+import { Tree } from '@/class/VirtualDirectory'
+import { VirtualRemoteDirectory, VirtualRemoteFile } from '@/class/VirtualRemoteDirectory'
 
 /**
  * 通过VirtualDirectory的.tree重建文件夹树
@@ -6,8 +7,8 @@ import VirtualDirectory, { Tree, VirtualFile } from '@/class/VirtualDirectory'
  * @returns {any}
  */
 const buildFromTree = (data: Tree) => {
-   const root = new VirtualDirectory(data)
-   root.files = data.files?.map((v) => new VirtualFile(v, root))
+   const root = new VirtualRemoteDirectory(data)
+   root.files = data.files?.map((v) => new VirtualRemoteFile(v, root))
    root.directories = data.directories?.map((v) => buildFromTree(v))
    return root
 }

src/utils/component2plugin.ts

@@ -0,0 +1,74 @@
+import { PluginGroup, registerComponentOption } from "@/class/PluginCenter"
+import VirtualDirectory, { VirtualFile } from "@/class/VirtualDirectory"
+import VirtualPage from "@/class/VirtualPage"
+import usePluginCenter from "@/hooks/usePluginCenter"
+import useVirtualPages from "@/hooks/useVirtualPages"
+import { Component } from "vue"
+
+export const componentOption2pluginOption = (option: registerComponentOption) => {
+    const {
+        key,
+        name,
+        getComponent,
+        icon,
+        filter,
+        group = [PluginGroup.default],
+        disable = false,
+        exitConfirm = false,
+        single = false,
+        priority = 0
+    } = option
+    let _component: Component
+    let _componentPromise: Promise<Component>
+    const views = useVirtualPages()
+    const pluginCenter = usePluginCenter()
+    return {
+        name,
+        filter,
+        icon: shallowRef(icon),
+        group,
+        disable,
+        priority,
+        func: async (
+            VDirectories: VirtualDirectory[],
+            VFiles: VirtualFile[]
+        ) => {
+            if (filter(VDirectories, VFiles) === false) {
+                return
+            }
+
+            if (_component === undefined) {
+                if (_componentPromise !== undefined) {
+                    await _componentPromise
+                }
+                else {
+                    const setAlertTip = pluginCenter.globalAlertTip(`加载 ${name} 插件中`)
+                    _componentPromise = getComponent()
+                    _component = await _componentPromise
+                    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
+                    }
+                })
+            }
+        }
+    }
+}
+

src/utils/getLocalIpAddress.ts

@@ -0,0 +1,70 @@
+/**
+ * 获取本机的局域网IP地址
+ * 使用Web API获取可用的网络接口信息（如果浏览器支持）
+ * @returns 一个Promise，解析为包含可用局域网IP地址的数组
+ */
+export async function getLocalIpAddresses(): Promise<string[]> {
+  // 部分浏览器未实现RTCPeerConnection对象
+  if (!window.RTCPeerConnection) {
+    console.warn('当前浏览器不支持获取局域网IP')
+    return []
+  }
+  
+  return new Promise((resolve) => {
+    const ips: string[] = []
+    const pc = new RTCPeerConnection({
+      // 使用Google的STUN服务器
+      iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
+    })
+
+    pc.createDataChannel('')
+    
+    // 创建一个offer来触发ICE候选者的收集
+    pc.createOffer()
+      .then(offer => pc.setLocalDescription(offer))
+      .catch(err => console.error('获取IP地址时出错:', err))
+
+    // 监听ICE候选者事件
+    pc.onicecandidate = (event) => {
+      if (!event.candidate) {
+        // ICE收集完成
+        pc.close()
+        resolve(ips)
+        return
+      }
+
+      // 解析候选者信息中的IP地址
+      const ipMatch = /([0-9]{1,3}(\.[0-9]{1,3}){3})/.exec(event.candidate.candidate)
+      const ipAddress = ipMatch && ipMatch[1]
+      
+      if (ipAddress && !ips.includes(ipAddress) && isPrivateIp(ipAddress)) {
+        ips.push(ipAddress)
+      }
+    }
+    
+    // 5秒超时，确保不会无限等待
+    setTimeout(() => {
+      pc.close()
+      resolve(ips)
+    }, 5000)
+  })
+}
+
+/**
+ * 判断一个IP地址是否为私有局域网IP
+ * @param ip IP地址
+ * @returns 是否为私有IP
+ */
+function isPrivateIp(ip: string): boolean {
+  const parts = ip.split('.').map(part => parseInt(part, 10))
+  
+  // 检查是否是局域网IP
+  // 10.0.0.0 - 10.255.255.255
+  // 172.16.0.0 - 172.31.255.255
+  // 192.168.0.0 - 192.168.255.255
+  return (
+    (parts[0] === 10) ||
+    (parts[0] === 172 && parts[1] >= 16 && parts[1] <= 31) ||
+    (parts[0] === 192 && parts[1] === 168)
+  )
+} 

tsconfig.app.json

@@ -24,5 +24,5 @@
             "@/*": ["src/*"]
         }
     },
-    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "auto-imports.d.ts", "components.d.ts"]
 }

vite.config.ts

@@ -3,13 +3,34 @@ import vue from "@vitejs/plugin-vue";
 import { resolve } from "path";
 // import { viteSingleFile } from 'vite-plugin-singlefile'
 import { visualizer } from 'rollup-plugin-visualizer'
+import AutoImport from 'unplugin-auto-import/vite'
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
+import Components from 'unplugin-vue-components/vite'
+import tailwindcss from '@tailwindcss/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
     base: './',
     plugins: [
         vue(),
-        visualizer()
+        visualizer(),
+        AutoImport({
+          imports: [
+            'vue',
+            {
+              'naive-ui': [
+                'useDialog',
+                'useMessage',
+                'useNotification',
+                'useLoadingBar'
+              ]
+            }
+          ]
+        }),
+        Components({
+          resolvers: [NaiveUiResolver()]
+        }),
+        tailwindcss()
         // viteSingleFile()
     ],
     resolve: {
@@ -19,7 +40,7 @@ export default defineConfig({
     },
     server: {
         proxy: {
-            '^/(get|upload|delete|query|rename|cut|mkdir)': {
+            '^/(get|upload|delete|query|rename|cut|copy|mkdir|addresses|map)': {
                 target: 'http://127.0.0.1:17705',
                 changeOrigin: true,
                 rewrite: (path) => path
@@ -42,5 +63,11 @@ export default defineConfig({
                 }
             }
         }
+    },
+    // 支持Web Worker
+    worker: {
+    },
+    optimizeDeps: {
+        include: ['aplayer']
     }
 })