v1.0.0

.gitignore

@@ -1,2 +1,26 @@
-web/*
-miao-directory.exe
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.vscode
+serve

.vscode/settings.json

@@ -1,6 +0,0 @@
-{
-  "cSpell.words": [
-    "birthtime",
-    "gonic"
-  ]
-}

README.md

@@ -0,0 +1,5 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).

api/apiConfig.go

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

api/copyHandler.go

@@ -1,57 +0,0 @@
-package api
-
-import (
-	"io"
-	"net/http"
-	"os"
-	"path/filepath"
-
-	"github.com/gin-gonic/gin"
-
-	"miao-directory/fsOperateEventCenter"
-)
-
-func CopyHandler(fsOperateEventCenter *fsOperateEventCenter.FsOperateEventCenter) gin.HandlerFunc {
-	return func(c *gin.Context) {
-		var req struct {
-			NewPath string `json:"newPath"`
-		}
-		if err := c.ShouldBindJSON(&req); err != nil {
-			c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid request body"})
-			return
-		}
-
-		decodedPath, err := filepath.Abs(filepath.Join(staticPath, c.Param("path")))
-		if err != nil {
-			c.JSON(http.StatusInternalServerError, gin.H{"error": "Unable to access path"})
-			return
-		}
-
-		newPath := filepath.Join(staticPath, req.NewPath, filepath.Base(decodedPath))
-		eventId := fsOperateEventCenter.Push(func() error {
-			return copyFile(decodedPath, newPath)
-		})
-		c.JSON(http.StatusOK, gin.H{"eventId": eventId})
-	}
-}
-
-func copyFile(src, dst string) error {
-	sourceFile, err := os.Open(src)
-	if err != nil {
-		return err
-	}
-	defer sourceFile.Close()
-
-	destFile, err := os.Create(dst)
-	if err != nil {
-		return err
-	}
-	defer destFile.Close()
-
-	_, err = io.Copy(destFile, sourceFile)
-	if err != nil {
-		return err
-	}
-
-	return destFile.Sync()
-}

api/cutHandler.go

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

api/deleteHandler.go

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

api/getHandler.go

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

api/mkdirHandler.go

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

api/queryHandler.go

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

api/renameHandler.go

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

api/uploadHandler.go

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

fsOperateEventCenter/fsOperateEventCenter.go

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

go.mod

@@ -1,36 +0,0 @@
-module miao-directory
-
-go 1.23.0
-
-require (
-	github.com/akavel/rsrc v0.10.2 // indirect
-	github.com/bytedance/sonic v1.12.1 // indirect
-	github.com/bytedance/sonic/loader v0.2.0 // indirect
-	github.com/cloudwego/base64x v0.1.4 // indirect
-	github.com/cloudwego/iasm v0.2.0 // indirect
-	github.com/gabriel-vasile/mimetype v1.4.5 // indirect
-	github.com/gin-contrib/gzip v1.0.1 // indirect
-	github.com/gin-contrib/sse v0.1.0 // indirect
-	github.com/gin-gonic/gin v1.10.0 // indirect
-	github.com/go-playground/locales v0.14.1 // indirect
-	github.com/go-playground/universal-translator v0.18.1 // indirect
-	github.com/go-playground/validator/v10 v10.22.0 // indirect
-	github.com/goccy/go-json v0.10.3 // indirect
-	github.com/josephspurrier/goversioninfo v1.4.0 // indirect
-	github.com/json-iterator/go v1.1.12 // indirect
-	github.com/klauspost/cpuid/v2 v2.2.8 // indirect
-	github.com/leodido/go-urn v1.4.0 // indirect
-	github.com/mattn/go-isatty v0.0.20 // indirect
-	github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
-	github.com/modern-go/reflect2 v1.0.2 // indirect
-	github.com/pelletier/go-toml/v2 v2.2.2 // indirect
-	github.com/twitchyliquid64/golang-asm v0.15.1 // indirect
-	github.com/ugorji/go/codec v1.2.12 // indirect
-	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/text v0.17.0 // indirect
-	google.golang.org/protobuf v1.34.2 // indirect
-	gopkg.in/yaml.v3 v3.0.1 // indirect
-)

go.sum

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

index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>MDW</title>
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/src/main.ts"></script>
+	</body>
+	<style>
+		#app{
+		  height: 100vh;
+		  width: 100vw;
+		}
+	</style>
+</html>

main.go

@@ -1,84 +0,0 @@
-//go:generate goversioninfo -icon=./icon.ico
-package main
-
-import (
-	"embed"
-	"fmt"
-	"net"
-	"net/http"
-	"os"
-	"strings"
-
-	"github.com/gin-contrib/gzip"
-	"github.com/gin-gonic/gin"
-
-	"miao-directory/api"
-	"miao-directory/fsOperateEventCenter"
-)
-
-//go:embed all:web/*
-var webFS embed.FS
-
-var port = ":17705"
-
-func main() {
-	// gin.SetMode(gin.ReleaseMode)
-
-	fsOperateEventCenter := fsOperateEventCenter.NewFsOperateEventCenter()
-
-	router := gin.Default()
-	router.Use(corsMiddleware())
-
-	router.GET("/query", api.QueryHandler(fsOperateEventCenter))
-	router.GET("/get/*path", api.GetHandler)
-	router.POST("/mkdir/*path", api.MkdirHandler)
-	router.POST("/upload/*path", api.UploadHandler)
-	router.POST("/cut/*path", api.CutHandler(fsOperateEventCenter))
-	router.POST("/copy/*path", api.CopyHandler(fsOperateEventCenter))
-	router.POST("/rename/*path", api.RenameHandler(fsOperateEventCenter))
-	router.POST("/delete/*path", api.DeleteHandler(fsOperateEventCenter))
-
-	// Redirect from '/' to '/web/'
-	router.GET("/", func(c *gin.Context) {
-		c.Redirect(http.StatusMovedPermanently, "/web/")
-	})
-
-	// Serve static files from the embedded filesystem with gzip compression
-	staticFS := http.FS(webFS)
-	staticGroup := router.Group("/web")
-	staticGroup.Use(gzip.Gzip(gzip.DefaultCompression))
-	staticGroup.GET("/*filepath", func(c *gin.Context) {
-		http.FileServer(staticFS).ServeHTTP(c.Writer, c.Request)
-	})
-
-	address := "[::]" + port
-	printListeningAddresses(port)
-	router.Run(address)
-}
-
-func corsMiddleware() gin.HandlerFunc {
-	return func(c *gin.Context) {
-		c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
-		c.Next()
-	}
-}
-
-func printListeningAddresses(port string) {
-	host, _ := os.Hostname()
-	addrs, _ := net.LookupHost(host)
-
-	fmt.Printf("Listening on:\n")
-	fmt.Printf("  ➜  Local:   http://localhost%s\n", port)
-	for _, addr := range addrs {
-		if strings.Contains(addr, "%") {
-			addr = strings.Split(addr, "%")[0]
-		}
-		if strings.Contains(addr, ":") {
-			// IPv6 address
-			fmt.Printf("  ➜  Network: http://[%s]%s\n", addr, port)
-		} else {
-			// IPv4 address
-			fmt.Printf("  ➜  Network: http://%s%s\n", addr, port)
-		}
-	}
-}

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "miao-directory-web",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vicons/ionicons5": "^0.12.0",
+    "naive-ui": "^2.39.0",
+    "sass": "^1.77.8",
+    "vue": "^3.4.35"
+  },
+  "devDependencies": {
+    "@types/node": "^22.1.0",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.0",
+    "vue-tsc": "^2.0.29"
+  }
+}

readme.md

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

src/App.vue

@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import { onMounted, reactive } from 'vue';
+import { NIcon, NScrollbar } from 'naive-ui';
+import { EyeOffOutline, EyeOutline, CloseOutline, CopyOutline, EllipsisVertical } from '@vicons/ionicons5'
+import miaoDirectory from './views/miaoDirectory.vue';
+import VirtualPage from './class/virtualPage';
+import VirtualDirectory from './class/virtualDirectory';
+
+const views = reactive<VirtualPage[]>([])
+
+const rootDirectory = new VirtualDirectory({
+  name: '根目录',
+  stats: {
+    atimeMs: 0,
+    birthtimeMs: 0,
+    ctimeMs: 0,
+    mtimeMs: 0,
+  }
+})
+
+const createView = (initDirectory: VirtualDirectory, index?: number) => {
+  index ?? (index = views.length)
+  console.log(initDirectory)
+  views.splice(index, 0, reactive<VirtualPage>(new VirtualPage(initDirectory)))
+}
+
+const deleteView = (index: number) => {
+  views.splice(index, 1)
+  if (views.length === 0) {
+    createView(rootDirectory)
+  }
+}
+
+onMounted(() => {
+  createView(rootDirectory)
+})
+
+// todo: 让所有伪页面共享一个rootDirectory
+</script>
+
+<template>
+	<div class="view-controler">
+		<n-scrollbar x-scrollable>
+			<div class="tags-container">
+				<div class="tag" v-for="(view, index) of views" :key="view.uid">
+					<div class="tag-title">{{ view.title }}</div>
+					<div class="tag-point" :style="{ backgroundColor: view.color } "></div>
+					<div class="tag-control">
+						<n-icon class="tag-control-icon icon" @click="view.switchShow()">
+							<EyeOutline v-show="view.visible" class="icon-inner" />
+							<EyeOffOutline v-show="!view.visible" class="icon-inner" />
+						</n-icon>
+						<n-icon class="tag-control-icon icon" @click="createView(view.currentDirectory, index + 1)">
+							<CopyOutline />
+						</n-icon>
+						<n-icon class="tag-control-icon icon" @click="deleteView(index)">
+							<CloseOutline class="icon-inner" />
+						</n-icon>
+					</div>
+				</div>
+			</div>
+		</n-scrollbar>
+		<div class="view-controler-menu">
+			<div class="view-controler-menu-item">
+				<n-icon class="icon" @click="">
+					<EllipsisVertical class="icon-inner" />
+				</n-icon>
+			</div>
+		</div>
+	</div>
+	<div class="view-container">
+		<div class="view" v-for="(view, index) of views" v-show="view.visible" :key="view.uid">
+			<miao-directory v-model:current-directory="view.currentDirectory" :color="view.color" :index="index" @exit="deleteView(index)"></miao-directory>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+$controler-height: 25px;
+
+.view-controler {
+  display: flex;
+  height: $controler-height;
+  width: 100%;
+  background-color: #dadada;
+  // overflow: hidden;
+
+  .tags-container {
+    display: flex;
+    margin-left: 5px;
+    flex: 1;
+    // overflow-x: scroll;
+    .tag {
+      position: relative;
+      width: 170px;
+      margin: 0 5px;
+      // flex: 1;
+      display: flex;
+      border-radius: 5px 5px 0 0;
+      align-items: center;
+
+      .tag-title {
+        margin-left: 4px;
+        // width: 70%;
+        user-select: none;
+      }
+
+      .tag-point {
+        height: 5px;
+        aspect-ratio: 1;
+        border-radius: 66px;
+        margin-left: 5px;
+      }
+
+      .tag-control {
+        position: absolute;
+        right: 10px;
+        display: flex;
+        align-items: center;
+
+        .tag-control-icon:not(:last-child) {
+          margin-right: 5px;
+        }
+      }
+
+      &:not(:last-child)::after {
+        content: '';
+        height: calc($controler-height*0.6);
+        width: 1px;
+        border-right: 1px solid black;
+        position: absolute;
+        right: 0px;
+      }
+    }
+  }
+
+  .view-controler-menu {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0 5px;
+    .view-controler-menu-item {
+      height: 100%;
+      aspect-ratio: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    &::before {
+        content: '';
+        height: calc($controler-height*0.6);
+        width: 1px;
+        border-right: 1px solid black;
+        position: absolute;
+        left: 2px;
+    }
+  }
+
+  .icon {
+    height: calc($controler-height * 0.7);
+    width: calc($controler-height * 0.7);
+    border-radius: 5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    background-color: rgba(128, 128, 128, 0);
+    transition: background-color 0.3s;
+
+    &:hover {
+      background-color: rgba(128, 128, 128, 0.4);
+    }
+  }
+}
+
+.view-container {
+  position: relative;
+  display: flex;
+  // flex-direction: column;
+  height: calc(100% - $controler-height);
+  overflow-y: overlay;
+  overflow-x: overlay;
+  .view {
+    flex: 1;
+    height: 100%;
+  }
+  &::-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;
+  }
+
+}
+</style>

src/class/virtualDirectory.ts

@@ -0,0 +1,131 @@
+import generateId from "@/hooks/generateId";
+import type { stats, file, directory } from "@/types/type.ts";
+
+export class VirtualFile {
+	constructor(info: file, parent: VirtualDirectory) {
+		this.name = info.name;
+		this.size = info.size;
+		this.stats = info.stats;
+		this.parent = parent;
+		this.type = "file";
+		this.uid = generateId();
+	}
+	name: string;
+	type: "file";
+	size: number;
+	stats: stats;
+	parent: VirtualDirectory;
+	uid: number;
+	get path() {
+		return `${this.parent.path}${this.name}`;
+	}
+}
+
+class VirtualDirectory {
+	constructor(info: directory, parent?: VirtualDirectory) {
+		this.name = info.name;
+		this.type = "directory";
+		this.stats = info.stats;
+		this.parent = parent ?? undefined;
+		this.uid = generateId();
+	}
+	// 文件夹名
+	name: string;
+	// 子文件
+	files?: VirtualFile[];
+	// 子目录
+	directorys?: VirtualDirectory[];
+	// 没啥意义，标注一下就是了
+	type: "directory";
+	// 文件夹创建时间等杂项属性
+	stats: stats;
+	// 父文件夹
+	parent?: VirtualDirectory;
+
+	uid: number;
+
+	/**
+	 * 获取相对于根目录的路径的层数
+	 * 用于目录下文件定位
+	 * @returns {string}
+	 */
+	get layer(): number {
+		return this.parent ? this.parent.layer + 1 : 0;
+	}
+	/**
+	 * 相对于根目录的路径， 如: "/",  "/123/321/"
+	 * 用于目录下文件定位
+	 * @returns {string}
+	 */
+	get path(): string {
+		if (!this.parent) {
+			return "/";
+		}
+		return `${this.parent.path}${this.name}/`;
+	}
+
+	/**
+	 * 获取从根目录开始的按顺序的文件夹
+	 * @returns {VirtualDirectory[]}
+	 */
+	get directoryArray(): VirtualDirectory[] {
+		if (!this.parent) {
+			return [this];
+		}
+		return [...this.parent.directoryArray, this];
+	}
+
+	/**
+	 * 获取 layer 级父文件夹, 如getParent(1)就返回父级
+	 * @param {number} layer 需要跳转的层数
+	 * @returns {VirtualDirectory}
+	 */
+	getParent(layer: number): VirtualDirectory {
+		if (layer <= 0 || !this.parent) {
+			return this;
+		}
+		return this.parent.getParent(layer - 1);
+	}
+
+	updateContent(content: (file | directory)[]) {
+		this.files = this.files ?? [];
+		this.directorys = this.directorys ?? [];
+		const fileNames: string[] = this.files.map(v => v.name);
+		const dirNames: string[] = this.directorys.map(v => v.name);
+		const itemNames: string[] = content.map(v => v.name);
+		// 删去远程端已不存在的文件与文件夹
+		const _delete = (target: (VirtualFile | VirtualDirectory)[]) => {
+			let index = 0;
+			while (index < target.length) {
+				if (!itemNames.includes(target[index].name)) {
+					target.splice(index, 1);
+				} else {
+					index += 1;
+				}
+			}
+		};
+		_delete(this.files);
+		_delete(this.directorys);
+		// 加入新的文件与文件夹
+		for (let item of content) {
+			if (item.type === "file") {
+				if (!fileNames.includes(item.name)) {
+					this.files.push(new VirtualFile(item, this));
+				}
+			} else if (item.type === "directory") {
+				if (!dirNames.includes(item.name)) {
+					this.directorys.push(new VirtualDirectory(item, this));
+				}
+			}
+		}
+	}
+
+	hasChild(item: VirtualDirectory | VirtualFile): boolean {
+		if (item.type === "directory") {
+			return this.directorys?.includes(item) ?? false;
+		} else {
+			return this.files?.includes(item) ?? false;
+		}
+	}
+}
+export default VirtualDirectory;

src/class/virtualPage.ts

@@ -0,0 +1,48 @@
+import VirtualDirectory from "./virtualDirectory";
+import generateId from "@/hooks/generateId";
+
+const getRandomWebSafeColor = (() => {
+	const webSafeColors = ["#009900", "#999900", "#009999", "#990099", "#0000ee"];
+	let counter = 0
+	return () => {
+		const color = webSafeColors[counter % webSafeColors.length]
+		counter += 1
+		return color;
+	};
+})();
+
+export default class VirtualPage {
+	constructor(initDirectory: VirtualDirectory) {
+		this.visible = true;
+		this.uid = generateId();
+		this.currentDirectory = initDirectory;
+		this.refreshKey = Math.random();
+		this.color = getRandomWebSafeColor();
+	}
+	visible: boolean;
+	currentDirectory: VirtualDirectory;
+	// 区分每一个页面的唯一id
+	uid: number;
+	// 当refreshKey改变时需要刷新页面，目前还没接入刷新
+	refreshKey: number;
+
+	color: string;
+
+	get title() {
+		return this.currentDirectory.name;
+	}
+
+	// 切换显示状态
+	switchShow() {
+		this.visible = !this.visible;
+	}
+
+	// 设置（同步）正在展示的文件夹
+	setCurrrentDirectory(currDir: VirtualDirectory) {
+		this.currentDirectory = currDir;
+	}
+
+	refresh() {
+		this.refreshKey = Math.random();
+	}
+}

src/components/miaoDirectory/miaoDirectoryItem.vue

@@ -0,0 +1,182 @@
+<template>
+	<div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
+		<div class="item-main">
+			<div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
+			<Icon class="item-main-icon"></Icon>
+			<div class="item-main-info">
+				<div class="item-main-info-name">
+					{{ name }}
+				</div>
+				<div class="item-main-info-date" v-if="time">
+					{{ time }}
+				</div>
+			</div>
+			<n-dropdown trigger="click" :options="dropDownOptions" @select="handleDropdownSelect">
+				<div class="item-main-option" @click="e=>e.stopPropagation()">
+					<EllipsisVertical class="item-main-option-icon" />
+				</div>
+			</n-dropdown>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+
+import VirtualDirectory, { VirtualFile } from '@/class/virtualDirectory';
+import { DocumentText, FileTray, Help, Image, LogoChrome, LogoCss3, LogoJavascript, LogoVue, PlayCircle, EllipsisVertical, Disc } from '@vicons/ionicons5';
+import { computed, ref } from 'vue';
+import dateFormatter from '@/hooks/dateFormatter';
+import useDataBus from '@/hooks/useDataBus';
+import { NDropdown } from 'naive-ui';
+
+const dataBus = useDataBus()
+
+const emit = defineEmits<{
+    download: []
+}>()
+
+const props = defineProps<{
+  item: VirtualDirectory | VirtualFile
+  name?: string
+  color:string
+}>()
+
+const itemType = ref<'file' | 'directory'>(props.item.type)
+
+const name = props.name ?? props.item.name
+
+const time = computed(()=>{
+    return dateFormatter(new Date(props.item.stats.mtimeMs), "yyyy-MM-dd hh:mm:ss");
+})
+
+const dropDownOptions = computed(()=> {
+    const options = []
+    if(itemType.value === 'file'){
+        options.push(...[{
+                label: '下载',
+                key: 'download',
+            }
+        ])
+    }
+    return options
+})
+
+const handleDropdownSelect = (key: 'download') => {
+    console.log(key)
+    emit(key)
+}
+
+const Icon = computed(()=>{
+    try{
+        if(props.item.type === 'directory') {
+            return FileTray
+        } else if(props.item.type === 'file') {
+            const aft = props.item.name.split('.').at(-1)?.toLowerCase()
+            if(!aft){
+                throw(1)
+            }else if(['txt', 'doc', 'docs', 'docx', 'xls', 'xlsx'].includes(aft)){
+                return DocumentText
+            }else if(['mp3', 'wav', 'ape', 'acc', 'ogg', 'flac'].includes(aft)){
+                return Disc
+            }else if(['.xbm','.tif','pjp','.svgz','jpg','jpeg','ico','tiff','.gif','svg','.jfif','.webp','.png','.bmp','pjpeg','.avif'].includes(aft)){
+                return Image
+            }else if(['mp4', 'm2v', 'mkv'].includes(aft)){
+                return PlayCircle
+            }else if(['js', 'jsx', 'ts', 'tsx'].includes(aft)){
+                return LogoJavascript
+            }else if(['html'].includes(aft)){
+                return LogoChrome
+            }else if(['css', 'scss', 'less'].includes(aft)){
+                return LogoCss3
+            }else if(['vue'].includes(aft)){
+                return LogoVue
+            }
+            return DocumentText
+        }
+    }catch{
+        return Help
+    }
+})
+
+const itemRef = ref()
+
+const handleDragStart = () => {
+    dataBus.set('dragData', [ props.item ])
+}
+</script>
+
+<style lang="scss" scoped>
+.miao-item {
+    cursor: pointer;
+    width: calc(100% - 16px);
+    min-width: 250px;
+    // aspect-ratio: 66/9;
+    height: 50px;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 10px 8px;
+    .item-main {
+        position: relative;
+        width: 100%;
+        height: 95%;
+        background-color: rgb(255, 255, 255);
+        border-radius: 7px;
+        display: flex;
+        align-items: center;
+        transition: background-color 0.3s;
+        .item-main-front {
+            height: 100%;
+            width: 10px;
+            border-radius: 7px 0 0 7px ;
+            background-color: rgb(0, 0, 0);
+        }
+        .item-main-icon {
+            margin-left: 10px;
+            height: 80%;
+        }
+        .item-main-info {
+            margin-left: 10px;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            &-name {
+                user-select: none;
+            }
+            &-date {
+                user-select: none;
+                font-size: small;
+            }
+        }
+        .item-main-option {
+            height: 100%;
+            width: 20px;
+            position: absolute;
+            right: 0;
+            border-radius: 0 7px 7px 0;
+            background-color: rgba(0, 0, 0, 0);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+
+            transition: background-color 0.3s;
+            .item-main-option-icon {
+                color: #000;
+                transition: color 0.15s;
+            }
+            &:hover, &:active {
+                background-color: #8b8b8b;
+                .item-main-option-icon {
+                    color: #FFF;
+                }
+            }
+        }
+        &:hover, &:active {
+            background-color: #d2d2d2;
+        }
+
+    }
+}
+</style>

src/components/miaoMask.vue

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

src/config.ts

@@ -0,0 +1,9 @@
+const baseUrl = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
+
+export default {
+	baseUrl,
+	uploadSizeLimit: 1024 * 1024 * 100,
+	api: {
+		get: '/get'
+	}
+};

src/hooks/dateFormatter.ts

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

src/hooks/dropHandler.ts

@@ -0,0 +1,109 @@
+import config from "@/config";
+
+const { uploadSizeLimit } = config;
+
+export type dropHandlerHooks = {
+	/**
+	 * 仅返回小于config.ts中大小限制的文件，不会返回文件夹
+	 */
+	onDropFiles?: (files: File[]) => void;
+	/**
+	 * 当拖动时
+	 */
+	onOver?: () => void;
+	/**
+	 * 当进入时
+	 */
+	onEnter?: () => void;
+
+	/**
+	 * 当离开时
+	 */
+	onLeave?: () => void;
+
+	/**
+	 * 离开或是放下时都会触发
+	 * @returns {any}
+	 */
+	onEnd?: () => void;
+};
+
+const isFile = (file: File) =>
+	new Promise(resolve => {
+		const reader = new FileReader();
+		reader.onload = () => {
+			resolve(true);
+			reader.abort();
+		};
+		reader.onerror = () => {
+			resolve(false);
+			reader.abort();
+		};
+		reader.readAsText(file);
+	});
+
+/**
+ * 只保留文件，移去文件夹
+ * @param {File[]} files
+ */
+const filesFilter = async (files: File[]) => {
+	let index = 0;
+	while (index < files.length) {
+		const currentFile = files[index];
+		const _isFile = await isFile(currentFile);
+		if (_isFile) {
+			index += 1;
+			continue;
+		} else {
+			files.splice(index, 1);
+			continue;
+		}
+	}
+};
+
+export default function dropHandler(dom: HTMLDivElement, hooks?: dropHandlerHooks) {
+	dom.addEventListener(
+		"dragenter",
+		function (e) {
+			e.preventDefault();
+			e.stopPropagation();
+			hooks?.onEnter && hooks?.onEnter();
+		},
+		false
+	);
+
+	dom.addEventListener(
+		"dragover",
+		function (e) {
+			e.preventDefault();
+			e.stopPropagation();
+			hooks?.onOver && hooks?.onOver();
+		},
+		false
+	);
+
+	dom.addEventListener(
+		"dragleave",
+		function (e) {
+			e.preventDefault();
+			e.stopPropagation();
+			hooks?.onLeave && hooks?.onLeave();
+			hooks?.onEnd && hooks.onEnd();
+		},
+		false
+	);
+
+	dom.addEventListener(
+		"drop",
+		async function (e) {
+			// console.log(e, e.dataTransfer?.types);
+			e.preventDefault();
+			e.stopPropagation();
+			const files = [...(e.dataTransfer?.files ?? [])].filter(file => file.size < uploadSizeLimit);
+			await filesFilter(files);
+			hooks?.onDropFiles && hooks.onDropFiles(files);
+			hooks?.onEnd && hooks.onEnd();
+		},
+		false
+	);
+}

src/hooks/generateId.ts

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

src/hooks/useDataBus.ts

@@ -0,0 +1,15 @@
+const dataStorage: any = {};
+
+export default function useDataBus() {
+	return {
+		set(key: string | number, value: any) {
+			dataStorage[key] = value;
+			return value;
+		},
+		get(key: string | number) {
+			const value = dataStorage[key];
+			dataStorage[key] = undefined;
+			return value;
+		}
+	};
+}

src/hooks/useMiaoFetch.ts

@@ -0,0 +1,22 @@
+type miaoFetchConfig = {
+	retry: number;
+};
+
+export default function useMiaoFetch(config: miaoFetchConfig) {
+	const { retry } = config;
+
+	return async (input: RequestInfo | URL, init?: RequestInit) => {
+		let retryTimes = 0;
+		let err: any;
+		while (retryTimes <= retry) {
+			try {
+				const response = await fetch(input, init);
+				return response;
+			} catch (e) {
+				err = e;
+				retryTimes += 1;
+			}
+		}
+		throw err;
+	};
+}

src/main.ts

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

src/types/type.ts

@@ -0,0 +1,22 @@
+export type stats = {
+	atimeMs: number; // 上次访问时间（毫秒）
+	birthtimeMs: number; // 创建时间（毫秒）
+	ctimeMs: number; // 状态更改时间（毫秒）
+	mtimeMs: number; // 上次修改时间（毫秒）
+};
+
+export type file = {
+	name: string;
+	size: number;
+	type?: "file";
+	stats: stats;
+};
+
+export type directory = {
+	name: string;
+	// 考虑到可能还没请求过来
+	content?: (file | directory)[];
+	type?: "directory";
+	stats: stats;
+	parent?: directory;
+};

src/views/miaoDirectory.vue

@@ -0,0 +1,262 @@
+<template>
+	<div class="miao-directory-item-container" ref="rootDomRef">
+		<div class="container-top">
+			<div class="container-top-colorbar" :style="{ backgroundColor: props.color }"></div>
+			<div class="container-top-breadcrumb">
+				<!-- <n-scrollbar x-scrollable> -->
+				<div class="container-top-breadcrumb-container">
+					<n-breadcrumb separator=">" style="margin-left: 5px;">
+						<n-breadcrumb-item :clickable="false">
+							<n-icon size="18">
+								<CloudOutline />
+							</n-icon>
+						</n-breadcrumb-item>
+						<n-breadcrumb-item v-for="(dir) in currentDirectory?.directoryArray" @click="setCurrentDirectory(dir)" :clickable="true">
+							<div>{{ dir.name }}</div>
+						</n-breadcrumb-item>
+					</n-breadcrumb>
+				</div>
+				<!-- </n-scrollbar> -->
+			</div>
+			<div class="container-top-tools">
+				<n-icon class="container-top-tools-item" size="15" @click="handleBack">
+					<ChevronBackOutline />
+				</n-icon>
+				<n-icon class="container-top-tools-item" size="14" @click="handleReload">
+					<ReloadOutline class="container-top-tools-item-reload" />
+				</n-icon>
+				<n-icon class="container-top-tools-item" size="20" @click="emit('exit')">
+					<CloseOutline />
+				</n-icon>
+			</div>
+		</div>
+		<div class="container-items" :style="{ backgroundColor: props.index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)' }">
+			<n-scrollbar>
+				<miaoDirectoryItem v-for="(dir) in currentDirectory?.directorys" @click="setCurrentDirectory(dir)" :item="dir" :key="dir.uid" :color="props.color" />
+				<miaoDirectoryItem
+					v-for="(file) in currentDirectory?.files"
+					:item="file"
+					:key="file.uid"
+					@click="openUrl(`${baseUrl}${api.get}${file.path}`)"
+					@download="openUrl(`${baseUrl}${api.get}${file.path}`, {download: file.name})"
+					:color="props.color"
+				/>
+			</n-scrollbar>
+		</div>
+		<div class="container-bottom" :style="{ backgroundColor: props.index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)' }"></div>
+		<miaoMask v-model:show="showModel"></miaoMask>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { NBreadcrumbItem, NBreadcrumb, NIcon, NScrollbar } from 'naive-ui'
+import type { file, directory } from '@/types/type.ts'
+import VirtualDirectory from '@/class/virtualDirectory';
+import { onMounted, ref } from 'vue';
+import Config from '@/config'
+import dropHandler, { dropHandlerHooks } from '@/hooks/dropHandler';
+import miaoMask from '@/components/miaoMask.vue';
+import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue';
+import useMiaoFetch from '@/hooks/useMiaoFetch';
+import useDataBus from '@/hooks/useDataBus';
+import { CloudOutline, ChevronBackOutline, ReloadOutline, CloseOutline } from '@vicons/ionicons5'
+
+const { baseUrl, api } = Config
+const dataBus = useDataBus()
+
+const miaoFetch = useMiaoFetch({
+    retry: 5,
+})
+
+const props = defineProps<{
+    color: string
+    index: number
+}>()
+
+const emit = defineEmits<{
+    exit: []
+}>()
+
+// 目前展示的Dir
+const currentDirectory = defineModel<VirtualDirectory | undefined>('currentDirectory', { required: true })
+
+// 是否显示模态框
+const showModel = ref(0)
+
+// 用于监听拖拽文件事件
+const rootDomRef = ref<HTMLDivElement>()
+
+// 设置显示的dir
+const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
+    // 若没有缓存数据则同步刷新，有缓存数据则异步刷新
+    if (virtualDirectory.files === undefined || virtualDirectory.directorys === undefined) {
+        const data: (file | directory)[] = await (await miaoFetch(`${baseUrl}${api.get}${virtualDirectory.path}`)).json()
+        virtualDirectory.updateContent(data)
+    } else {
+        ; (async () => {
+            const data: (file | directory)[] = await (await miaoFetch(`${baseUrl}${api.get}${virtualDirectory.path}`)).json()
+            virtualDirectory.updateContent(data)
+            currentDirectory.value = undefined
+            currentDirectory.value = virtualDirectory
+        })()
+    }
+    // 刷新一下
+    currentDirectory.value = undefined
+    currentDirectory.value = virtualDirectory
+    // emit("onCurrentDirectoryChange", currentDirectory.value)
+}
+
+const openUrl = (href: string, config?: {
+    download?: string
+    target?: string
+}) => {
+    let {target, download} = config ?? {}
+
+    console.log({target, download})
+    const a = document.createElement('a');
+    a.setAttribute('href', href);
+    a.setAttribute('target', target ?? '_blank')
+    a.setAttribute('download', download ?? '');
+    a.click();
+    // var a = document.createElement("a");
+    // a.setAttribute('href', href)
+    // a.setAttribute('target', target ?? '_blank')
+    // a.setAttribute('download', download ?? '')
+    // console.log({target, download})
+    // a.click();
+}
+
+const handleBack = () => {
+    if(currentDirectory.value?.parent){
+        setCurrentDirectory(currentDirectory.value.parent)
+    }
+}
+
+const handleReload = () => {
+    currentDirectory.value && setCurrentDirectory(currentDirectory.value)
+}
+
+onMounted(async () => {
+    currentDirectory.value && await setCurrentDirectory(currentDirectory.value)
+    // 拖动事件处理
+    const dropFileOption:dropHandlerHooks = {
+        onDropFiles(files: File[]) {
+            const dragData = dataBus.get('dragData')
+            console.log({dragData, files})
+        },
+        onEnter() {
+            showModel.value += 1
+        },
+        onEnd() {
+            showModel.value -= 1
+        },
+    }
+    rootDomRef.value && dropHandler(rootDomRef.value, dropFileOption)
+})
+</script>
+
+<style scoped lang="scss">
+$top-height: 30px;
+$bottom-bar-height: 60px;
+
+.miao-directory-item-container {
+    position: relative;
+    height: 100%;
+    width: inherit;
+    min-width: 266px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    .container-top {
+        height: $top-height;
+        width: 100%;
+        user-select: none;
+        position: relative;
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        background-color: #f1f1f1;
+        .container-top-colorbar {
+            height: 70%;
+            width: 5px;
+            margin-left: 10px;
+            border-radius: 3px 0 0 3px;
+        }
+        .container-top-breadcrumb {
+            position: relative;
+            height: 70%;
+            width: calc(100% - 95px);
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            // overflow: hidden;
+            overflow-y: hidden;
+            overflow-x: hidden;
+            background-color: #ffffff;
+            padding: 0 5px;
+            border-radius: 0 3px 3px 0;
+            .container-top-breadcrumb-container {
+                position: absolute;
+                height: 100%;
+                right: 0;
+                top: 0;
+                min-width: 100%;
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+            }
+        }
+        .container-top-tools {
+            position: relative;
+            height: 100%;
+            width: 70px;
+            padding: 0 5px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            .container-top-tools-item {
+                width: 20px;
+                height: 20px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                background-color: #ffffff00;
+                border-radius: 5px;
+                transition: background-color 0.3s;
+                cursor: pointer;
+                .container-top-tools-item-reload {
+                    transition: transform 0.6s ease-in-out;
+                }
+                &:hover {
+                    background-color: rgba(128,128,128,0.4);
+                }
+                &:active .container-top-tools-item-reload {
+                    transform: rotate(360deg);
+                }
+            }
+            &::after {
+                content: '';
+                height: 60%;
+                position: absolute;
+                right: -1px;
+                width: 2px;
+                background-color: #828282;
+            }
+        }
+    }
+    .container-items {
+        width: 100%;
+        height: calc(100% - $top-height - $bottom-bar-height);
+    }
+    .container-bottom {
+        height: $bottom-bar-height;
+        background-color: bisque;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        user-select: none;
+        box-shadow: 0px 1px 10px #888888;
+        z-index: 2;
+    }
+}
+</style>

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "module": "ESNext",
+        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+        "skipLibCheck": true,
+
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "isolatedModules": true,
+        "moduleDetection": "force",
+        "noEmit": true,
+        "jsx": "preserve",
+
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true,
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["src/*"]
+        }
+    },
+    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

tsconfig.json

@@ -0,0 +1,7 @@
+{
+    "files": [],
+    "references": [
+        { "path": "./tsconfig.app.json" },
+        { "path": "./tsconfig.node.json" }
+    ]
+}

tsconfig.node.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

versioninfo.json

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

vite.config.ts

@@ -0,0 +1,37 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { resolve } from "path";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [vue()],
+	resolve: {
+		alias: {
+			"@": resolve(__dirname, "src")
+		}
+	},
+	server: {
+		proxy: {
+			"/get": {
+				target: "http://127.0.0.1:17705",
+				changeOrigin: true,
+				rewrite: path => path.replace(/^\/get/, "/get")
+			}
+		}
+	},
+	build: {
+		rollupOptions: {
+			input: {
+				main: resolve(__dirname, "index.html")
+			},
+			output: {
+				// 配置输出为单文件
+				inlineDynamicImports: true,
+				manualChunks: undefined,
+				entryFileNames: "bundle.js",
+				format: "iife", // 立即执行函数格式
+				name: "MyBundle"
+			}
+		}
+	}
+});