Compare commits
12
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
5d0d17eb5b | ||
|
|
9c937f3907 | ||
|
|
6ea0effa12 | ||
|
|
f106d20983 | ||
|
|
9cb2a5b99f | ||
|
|
911ac7d49c | ||
|
|
871906808c | ||
|
|
817603cade | ||
|
|
71669aa380 | ||
|
|
2605f9bdb8 | ||
|
|
bc5bbaf016 | ||
|
|
acd7a8b5f0 |
No files matched your search
+2
-26
@@ -1,26 +1,2 @@
|
||||
# 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
|
||||
web/*
|
||||
miao-directory.exe
|
||||
Vendored
+6
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"cSpell.words": [
|
||||
"birthtime",
|
||||
"gonic"
|
||||
]
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
todo: 标签页,miaoDirectory切换动画 [finish]
|
||||
todo: 重构virtualPage,所有page以插件形式使用 [finish]
|
||||
todo: miaoDirectory插件化,为后续插件功能开发做准备 [finish]
|
||||
todo: miaoPopupInput, 弹出一个输入框
|
||||
todo: miaoDirectory的新建文件/文件夹功能
|
||||
todo: miaoDirectory的重命名功能
|
||||
todo: miaoDirectory的多选功能
|
||||
todo: VirtualDirectory更新时更新文件信息
|
||||
@@ -0,0 +1,3 @@
|
||||
package api
|
||||
|
||||
var staticPath = "./"
|
||||
@@ -0,0 +1,57 @@
|
||||
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()
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
package api
|
||||
|
||||
import (
|
||||
// "fmt"
|
||||
"net/http"
|
||||
"os"
|
||||
"path/filepath"
|
||||
|
||||
"github.com/gin-gonic/gin"
|
||||
|
||||
"miao-directory/fsOperateEventCenter"
|
||||
)
|
||||
|
||||
func CutHandler(fsOperateEventCenter *fsOperateEventCenter.FsOperateEventCenter) gin.HandlerFunc {
|
||||
return func(c *gin.Context) {
|
||||
var req struct {
|
||||
NewPath string `json:"newPath"`
|
||||
}
|
||||
if err := c.ShouldBindJSON(&req); err != nil {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid request body"})
|
||||
return
|
||||
}
|
||||
|
||||
decodedPath, err := filepath.Abs(filepath.Join(staticPath, c.Param("path")))
|
||||
if err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"error": "Unable to access path"})
|
||||
return
|
||||
}
|
||||
|
||||
newPath := filepath.Join(staticPath, req.NewPath, filepath.Base(decodedPath))
|
||||
eventId := fsOperateEventCenter.Push(func() error {
|
||||
return os.Rename(decodedPath, newPath)
|
||||
})
|
||||
c.JSON(http.StatusOK, gin.H{"eventId": eventId})
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
package api
|
||||
|
||||
import (
|
||||
// "fmt"
|
||||
"miao-directory/fsOperateEventCenter"
|
||||
"net/http"
|
||||
"os"
|
||||
"path/filepath"
|
||||
|
||||
"github.com/gin-gonic/gin"
|
||||
)
|
||||
|
||||
func DeleteHandler(fsOperateEventCenter *fsOperateEventCenter.FsOperateEventCenter) gin.HandlerFunc {
|
||||
return func(c *gin.Context) {
|
||||
decodedPath, err := filepath.Abs(filepath.Join(staticPath, c.Param("path")))
|
||||
if err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"error": "Unable to access path"})
|
||||
return
|
||||
}
|
||||
|
||||
eventId := fsOperateEventCenter.Push(func() error {
|
||||
return os.RemoveAll(decodedPath)
|
||||
})
|
||||
c.JSON(http.StatusOK, gin.H{"eventId": eventId})
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
package api
|
||||
|
||||
import (
|
||||
"github.com/gin-gonic/gin"
|
||||
"net/http"
|
||||
"os"
|
||||
"path/filepath"
|
||||
)
|
||||
|
||||
func MkdirHandler(c *gin.Context) {
|
||||
var request struct {
|
||||
FolderName string `json:"folderName"`
|
||||
}
|
||||
|
||||
if err := c.ShouldBindJSON(&request); err != nil {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"message": "failed", "error": err.Error()})
|
||||
return
|
||||
}
|
||||
|
||||
decodedPath, err := filepath.Abs(filepath.Join(staticPath, c.Param("path")))
|
||||
if err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"message": "failed", "error": "Unable to access path"})
|
||||
return
|
||||
}
|
||||
|
||||
mkdirPath := filepath.Join(decodedPath, request.FolderName)
|
||||
|
||||
if err := os.MkdirAll(mkdirPath, os.ModePerm); err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"message": "failed", "error": err.Error()})
|
||||
return
|
||||
}
|
||||
|
||||
c.JSON(http.StatusOK, gin.H{"message": "success"})
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
package api
|
||||
|
||||
import (
|
||||
"net/http"
|
||||
"strconv"
|
||||
|
||||
"github.com/gin-gonic/gin"
|
||||
|
||||
"miao-directory/fsOperateEventCenter"
|
||||
)
|
||||
|
||||
func QueryHandler(fsOperateEventCenter *fsOperateEventCenter.FsOperateEventCenter) gin.HandlerFunc {
|
||||
return func(c *gin.Context) {
|
||||
idStr := c.Query("id")
|
||||
id, err := strconv.ParseInt(idStr, 10, 32)
|
||||
if err != nil {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid id"})
|
||||
return
|
||||
}
|
||||
|
||||
event := fsOperateEventCenter.Query(int32(id))
|
||||
c.JSON(http.StatusOK, event)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
package api
|
||||
|
||||
import (
|
||||
// "fmt"
|
||||
"net/http"
|
||||
"os"
|
||||
"path/filepath"
|
||||
|
||||
"github.com/gin-gonic/gin"
|
||||
|
||||
"miao-directory/fsOperateEventCenter"
|
||||
)
|
||||
|
||||
func RenameHandler(fsOperateEventCenter *fsOperateEventCenter.FsOperateEventCenter) gin.HandlerFunc {
|
||||
return func(c *gin.Context) {
|
||||
var req struct {
|
||||
NewName string `json:"newName"`
|
||||
}
|
||||
if err := c.ShouldBindJSON(&req); err != nil {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid request body"})
|
||||
return
|
||||
}
|
||||
|
||||
decodedPath, err := filepath.Abs(filepath.Join(staticPath, c.Param("path")))
|
||||
if err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"error": "Unable to access path"})
|
||||
return
|
||||
}
|
||||
|
||||
newTargetPath := filepath.Join(filepath.Dir(decodedPath), req.NewName)
|
||||
eventId := fsOperateEventCenter.Push(func() error {
|
||||
return os.Rename(decodedPath, newTargetPath)
|
||||
})
|
||||
c.JSON(http.StatusOK, gin.H{"eventId": eventId})
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
package api
|
||||
|
||||
import (
|
||||
"github.com/gin-gonic/gin"
|
||||
"net/http"
|
||||
"os"
|
||||
"path/filepath"
|
||||
"io/ioutil"
|
||||
)
|
||||
|
||||
func UploadHandler(c *gin.Context) {
|
||||
fileName := c.PostForm("fileName")
|
||||
operateType := c.PostForm("operateType")
|
||||
file, err := c.FormFile("file")
|
||||
if err != nil {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"message": "failed", "error": err.Error()})
|
||||
return
|
||||
}
|
||||
|
||||
decodedPath, err := filepath.Abs(filepath.Join(staticPath, c.Param("path")))
|
||||
if err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"message": "failed", "error": "Unable to access path"})
|
||||
return
|
||||
}
|
||||
|
||||
savePath := filepath.Join(decodedPath, fileName)
|
||||
fileData, err := file.Open()
|
||||
if err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"message": "failed", "error": err.Error()})
|
||||
return
|
||||
}
|
||||
defer fileData.Close()
|
||||
|
||||
data, err := ioutil.ReadAll(fileData)
|
||||
if err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"message": "failed", "error": err.Error()})
|
||||
return
|
||||
}
|
||||
|
||||
if operateType == "write" {
|
||||
err = ioutil.WriteFile(savePath, data, 0644)
|
||||
} else {
|
||||
f, err := os.OpenFile(savePath, os.O_APPEND|os.O_WRONLY|os.O_CREATE, 0644)
|
||||
if err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"message": "failed", "error": err.Error()})
|
||||
return
|
||||
}
|
||||
defer f.Close()
|
||||
_, err = f.Write(data)
|
||||
}
|
||||
|
||||
if err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"message": "failed", "error": err.Error()})
|
||||
return
|
||||
}
|
||||
|
||||
c.JSON(http.StatusOK, gin.H{"message": "success"})
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
package fsOperateEventCenter
|
||||
|
||||
import (
|
||||
// "fmt"
|
||||
"math/rand"
|
||||
"sync"
|
||||
"time"
|
||||
)
|
||||
|
||||
type FsOperateEventStatus string
|
||||
|
||||
const (
|
||||
FsOperateEventStatusProgress FsOperateEventStatus = "progress"
|
||||
FsOperateEventStatusSuccess FsOperateEventStatus = "success"
|
||||
FsOperateEventStatusFailed FsOperateEventStatus = "failed"
|
||||
FsOperateEventStatusUnknown FsOperateEventStatus = "unknown"
|
||||
)
|
||||
|
||||
type FsOperateEvent struct {
|
||||
Status FsOperateEventStatus `json:"status"`
|
||||
FailedEvent error `json:"failedEvent"`
|
||||
UID int32 `json:"uid"`
|
||||
}
|
||||
|
||||
type FsOperateEventCenter struct {
|
||||
eventMap sync.Map
|
||||
}
|
||||
|
||||
func NewFsOperateEventCenter() *FsOperateEventCenter {
|
||||
return &FsOperateEventCenter{}
|
||||
}
|
||||
|
||||
func (c *FsOperateEventCenter) Push(event func() error) int32 {
|
||||
ev := &FsOperateEvent{
|
||||
Status: FsOperateEventStatusProgress,
|
||||
UID: generateId(),
|
||||
}
|
||||
|
||||
wrapper := &eventWrapper{
|
||||
event: ev,
|
||||
timer: time.AfterFunc(time.Hour, func() {
|
||||
c.Query(ev.UID)
|
||||
}),
|
||||
}
|
||||
|
||||
c.eventMap.Store(ev.UID, wrapper)
|
||||
|
||||
go func() {
|
||||
if err := event(); err != nil {
|
||||
wrapper.event.Status = FsOperateEventStatusFailed
|
||||
wrapper.event.FailedEvent = err
|
||||
} else {
|
||||
wrapper.event.Status = FsOperateEventStatusSuccess
|
||||
}
|
||||
}()
|
||||
|
||||
return ev.UID
|
||||
}
|
||||
|
||||
type eventWrapper struct {
|
||||
event *FsOperateEvent
|
||||
timer *time.Timer
|
||||
}
|
||||
|
||||
func (c *FsOperateEventCenter) Query(id int32) *FsOperateEvent {
|
||||
val, ok := c.eventMap.Load(id)
|
||||
// fmt.Printf("Query ID: %d; ok: %t; val: %v\n", id, ok, val)
|
||||
|
||||
// c.eventMap.Range(func(key, value interface{}) bool {
|
||||
// fmt.Printf("key: %d (type: %T), id: %d (type: %T), bool: %t\n", key, key, id, id, id == key)
|
||||
// event := value.(*eventWrapper).event
|
||||
// fmt.Printf("Event UID: %d, Status: %s\n", event.UID, event.Status)
|
||||
// return true
|
||||
// })
|
||||
|
||||
if !ok {
|
||||
return &FsOperateEvent{
|
||||
Status: FsOperateEventStatusUnknown,
|
||||
}
|
||||
}
|
||||
|
||||
wrapper := val.(*eventWrapper)
|
||||
if wrapper.event.Status == FsOperateEventStatusSuccess || wrapper.event.Status == FsOperateEventStatusFailed {
|
||||
wrapper.timer.Stop()
|
||||
c.eventMap.Delete(id)
|
||||
}
|
||||
|
||||
return wrapper.event
|
||||
}
|
||||
|
||||
func generateId() int32 {
|
||||
return rand.Int31()
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
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
|
||||
)
|
||||
@@ -0,0 +1,86 @@
|
||||
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=
|
||||
-19
@@ -1,19 +0,0 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,84 @@
|
||||
//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)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
{
|
||||
"name": "miao-directory-web",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dev:host": "vite --host 0.0.0.0",
|
||||
"build": "vue-tsc -b && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vicons/ionicons5": "^0.12.0",
|
||||
"axios": "^1.7.3",
|
||||
"naive-ui": "^2.39.0",
|
||||
"sass": "^1.77.8",
|
||||
"vue": "^3.4.35"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/lodash": "^4.17.7",
|
||||
"@types/node": "^22.1.0",
|
||||
"@vitejs/plugin-vue": "^5.1.2",
|
||||
"typescript": "^5.5.3",
|
||||
"vite": "^5.4.0",
|
||||
"vite-plugin-singlefile": "^2.0.2",
|
||||
"vue-tsc": "^2.0.29"
|
||||
}
|
||||
}
|
||||
Generated
-1265
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,3 @@
|
||||
# miao-directory的后端部分
|
||||
* 原有的node后端不再维护。
|
||||
* ./web文件夹中的内容自己到main分支去打包一个出来
|
||||
Binary file not shown.
-348
@@ -1,348 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import { h, onMounted, reactive, ref, shallowRef } from 'vue';
|
||||
import { NIcon, NScrollbar, NDropdown, NQrCode } from 'naive-ui';
|
||||
import { EyeOffOutline, EyeOutline, CloseOutline, CopyOutline, EllipsisVertical, QrCodeOutline } from '@vicons/ionicons5'
|
||||
import miaoDirectory from './views/miaoDirectory.vue';
|
||||
import VirtualPage from './class/VirtualPage';
|
||||
import VirtualDirectory, { VirtualFile } from './class/VirtualDirectory';
|
||||
import MiaoMask from './components/miaoMask.vue';
|
||||
import config from './config';
|
||||
import useViretualPages from './hooks/useVirtualPages';
|
||||
|
||||
const { baseUrl } = config
|
||||
|
||||
const showModal = ref<boolean>(false)
|
||||
|
||||
const modalData = shallowRef<{
|
||||
component: any
|
||||
props: any
|
||||
}>()
|
||||
|
||||
const views = useViretualPages()
|
||||
|
||||
const rootDirectory = reactive(new VirtualDirectory({
|
||||
name: '根目录',
|
||||
stats: {
|
||||
atimeMs: 0,
|
||||
birthtimeMs: 0,
|
||||
ctimeMs: 0,
|
||||
mtimeMs: 0,
|
||||
}
|
||||
}))
|
||||
|
||||
// component就是一个vue组件,类似于miaoDirectory
|
||||
const createView = (component: any, currentObjects: (VirtualDirectory | VirtualFile)[], index?: number) => {
|
||||
index ?? (index = views.length)
|
||||
views.splice(index, 0, reactive<VirtualPage>(new VirtualPage(component, [...currentObjects])))
|
||||
}
|
||||
|
||||
const deleteView = (index: number) => {
|
||||
views.splice(index, 1)
|
||||
if (views.length === 0) {
|
||||
createView(miaoDirectory, [rootDirectory])
|
||||
}
|
||||
}
|
||||
|
||||
// 点击标题是隐藏其他标签或显示其他标签,还挺好用的
|
||||
const handleClickTitle = (index: number) => {
|
||||
let count = views.filter(v => v.visible).length
|
||||
let op = !views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
|
||||
let _index = 0
|
||||
while (_index < views.length) {
|
||||
if (_index !== index) {
|
||||
views[_index].visible = op === 'hideOthers' ? false : true
|
||||
} else {
|
||||
views[_index].visible = true
|
||||
}
|
||||
_index += 1
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 顶部菜单相关
|
||||
function renderIcon(icon: any) {
|
||||
return () => {
|
||||
return h(NIcon, null, {
|
||||
default: () => h(icon)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const openMenuOption = [
|
||||
{
|
||||
label: '分享',
|
||||
key: 'share',
|
||||
icon: renderIcon(QrCodeOutline)
|
||||
}
|
||||
]
|
||||
|
||||
const handleMenuSelect = (key: string) => {
|
||||
if (key === 'share') {
|
||||
showModal.value = true
|
||||
modalData.value = {
|
||||
component: NQrCode,
|
||||
props: {
|
||||
value: baseUrl,
|
||||
size: 300,
|
||||
errorCorrectionLevel: 'H'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
createView(miaoDirectory, [rootDirectory])
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="view">
|
||||
<div class="view-controler">
|
||||
<n-scrollbar x-scrollable>
|
||||
<div class="tags-container">
|
||||
<transition-group name="tab">
|
||||
<div class="tab" v-for="(view, index) of views" :key="view.uid">
|
||||
<div class="tab-title" @click="handleClickTitle(index)">{{ view.title }}</div>
|
||||
<div class="tab-point" :style="{ backgroundColor: view.color }"></div>
|
||||
<div class="tab-control">
|
||||
<n-icon class="tag-control-icon icon" @click="view.switchShow()">
|
||||
<EyeOutline v-show="view.visible" class="icon-inner" />
|
||||
<EyeOffOutline v-show="!view.visible" class="icon-inner" />
|
||||
</n-icon>
|
||||
<n-icon class="tag-control-icon icon"
|
||||
@click="createView(view.component, view.currentObjects, index + 1)">
|
||||
<CopyOutline />
|
||||
</n-icon>
|
||||
<n-icon class="tag-control-icon icon" @click="deleteView(index)">
|
||||
<CloseOutline class="icon-inner" />
|
||||
</n-icon>
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</n-scrollbar>
|
||||
<div class="view-controler-menu">
|
||||
<div class="view-controler-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" v-show="view.visible" :key="view.uid">
|
||||
<component :is="view.component" v-model:current-objects="view.currentObjects" :id="view.uid"
|
||||
:color="view.color" @exit="deleteView(index)"></component>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 模态框展示,用来显示分享二维码,设置菜单之类的东西 -->
|
||||
<MiaoMask v-model:show="showModal" @click="showModal = false">
|
||||
<component :is="modalData?.component" v-bind="modalData?.props"></component>
|
||||
</MiaoMask>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$controler-height: 25px;
|
||||
$tag-width: 170px;
|
||||
|
||||
.view {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.view-controler {
|
||||
display: flex;
|
||||
height: $controler-height;
|
||||
width: 100%;
|
||||
background-color: #dadada;
|
||||
// overflow: hidden;
|
||||
|
||||
.tags-container {
|
||||
display: flex;
|
||||
margin-left: 5px;
|
||||
flex: 1;
|
||||
|
||||
// overflow-x: scroll;
|
||||
.tab {
|
||||
position: relative;
|
||||
width: $tag-width;
|
||||
margin: 0 5px;
|
||||
// flex: 1;
|
||||
display: flex;
|
||||
border-radius: 5px 5px 0 0;
|
||||
align-items: center;
|
||||
|
||||
.tab-title {
|
||||
margin-left: 4px;
|
||||
// width: 70%;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab-point {
|
||||
height: 5px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 66px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.tab-control {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tab-control-icon:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child)::after {
|
||||
content: '';
|
||||
height: calc($controler-height*0.6);
|
||||
width: 1px;
|
||||
border-right: 1px solid black;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view-controler-menu {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
|
||||
.view-controler-menu-item {
|
||||
height: 100%;
|
||||
aspect-ratio: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
height: calc($controler-height*0.6);
|
||||
width: 1px;
|
||||
border-right: 1px solid black;
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: calc($controler-height * 0.7);
|
||||
width: calc($controler-height * 0.7);
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
background-color: rgba(128, 128, 128, 0);
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(128, 128, 128, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
// flex-direction: column;
|
||||
height: calc(100% - $controler-height);
|
||||
overflow-y: overlay;
|
||||
overflow-x: overlay;
|
||||
|
||||
.view-container-item {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// transition动画相关
|
||||
.view {
|
||||
.view-controler {
|
||||
.tags-container {
|
||||
|
||||
.tab-move,
|
||||
.tab-enter-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.tab-leave-active {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.tab-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
|
||||
// .tab-leave-to {
|
||||
// opacity: 0;
|
||||
// transform: translateY(-80px) translateX(calc($tag-width + 10px));
|
||||
// }
|
||||
|
||||
.tab-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view-container {
|
||||
|
||||
// .page-move {
|
||||
// transition: all 0.2s ease;
|
||||
// }
|
||||
|
||||
|
||||
// .page-enter-active {
|
||||
|
||||
// }
|
||||
|
||||
// .page-leave-active {
|
||||
// transition: none;
|
||||
// }
|
||||
|
||||
// .page-enter-from {
|
||||
// opacity: 0;
|
||||
// }
|
||||
|
||||
// .page-leave-active {
|
||||
// position: absolute;
|
||||
// }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,165 +0,0 @@
|
||||
import generateId from "@/hooks/generateId";
|
||||
import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
|
||||
import VirtualDirectory from "./VirtualDirectory";
|
||||
|
||||
const miaoFetchApi = useMiaoFetchApi();
|
||||
|
||||
export class UploadQueueItem {
|
||||
constructor(
|
||||
file: File,
|
||||
targetDirectory: VirtualDirectory,
|
||||
config?: {
|
||||
onSuccess?: () => void;
|
||||
onFailed?: () => void;
|
||||
}
|
||||
) {
|
||||
this.file = file;
|
||||
this.targetDirectory = targetDirectory;
|
||||
this.uid = generateId();
|
||||
this.status = "waiting";
|
||||
this.process = 0;
|
||||
this.onSuccess = config && config.onSuccess;
|
||||
this.onFailed = config && config.onFailed;
|
||||
}
|
||||
uid: number;
|
||||
file: File;
|
||||
targetDirectory: VirtualDirectory;
|
||||
status: "waiting" | "uploading" | "success" | "failed";
|
||||
process: number;
|
||||
failedReason: unknown | undefined;
|
||||
|
||||
onSuccess?: () => void;
|
||||
onFailed?: () => void;
|
||||
|
||||
_abort: (() => void | undefined) | undefined;
|
||||
_status: Promise<any> | undefined;
|
||||
|
||||
/**
|
||||
* 开始上传文件
|
||||
*/
|
||||
startUpload() {
|
||||
if (this.status === "uploading") {
|
||||
return;
|
||||
}
|
||||
const { abort, response } = miaoFetchApi.upload(this.file, this.targetDirectory, {
|
||||
onProcess: percent => {
|
||||
this.process = percent;
|
||||
}
|
||||
});
|
||||
this._abort = abort;
|
||||
this._status = response;
|
||||
this.status = "uploading";
|
||||
response
|
||||
.then(() => {
|
||||
this.status = "success";
|
||||
this.onSuccess && this.onSuccess();
|
||||
this._abort = undefined;
|
||||
this._status = undefined;
|
||||
})
|
||||
.catch(e => {
|
||||
this.status = "failed";
|
||||
this.failedReason = e;
|
||||
this.onFailed && this.onFailed();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 终止上传文件
|
||||
*/
|
||||
abortUpload() {
|
||||
this._abort && this._abort();
|
||||
this.status = "failed";
|
||||
this.failedReason = "abort";
|
||||
}
|
||||
}
|
||||
|
||||
export default class UploadQueue {
|
||||
constructor() {
|
||||
this.uid = generateId();
|
||||
this.queue = [];
|
||||
this.mode = "serial";
|
||||
}
|
||||
uid: number;
|
||||
queue: UploadQueueItem[];
|
||||
current: UploadQueueItem | undefined;
|
||||
|
||||
// 未来再去实现,目前就是串行的
|
||||
// 好像也不用去实现
|
||||
mode: "serial" | "parallel";
|
||||
get status() {
|
||||
for (let item of this.queue) {
|
||||
if (item.status === "uploading") {
|
||||
return "busy";
|
||||
}
|
||||
}
|
||||
return "free";
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取下一个需要被上传的item
|
||||
*/
|
||||
get nextUplpadItem() {
|
||||
for (let item of this.queue) {
|
||||
if (item.status === "waiting") {
|
||||
return item;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 开始串行的上传循环
|
||||
*/
|
||||
loop() {
|
||||
if (this.status === "busy") {
|
||||
return;
|
||||
}
|
||||
if (this.nextUplpadItem) {
|
||||
this.nextUplpadItem.startUpload();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 向上传文件队列输送一批新的文件
|
||||
* @param {any} files 需要上传的文件
|
||||
* @param {any} targetDirectory 目标文件夹
|
||||
* @param {any} option 每个文件上传完成以后都会触发一遍的回调函数
|
||||
* @returns {any}
|
||||
*/
|
||||
push(
|
||||
files: File[],
|
||||
targetDirectory: VirtualDirectory,
|
||||
option?: {
|
||||
/**
|
||||
* 每个文件上传完成以后都会触发一遍的回调函数
|
||||
*/
|
||||
onFinish?: () => void;
|
||||
/**
|
||||
* 是否立即开始上传,若否则按队列顺序一个一个上传
|
||||
*/
|
||||
immediately?: boolean;
|
||||
}
|
||||
) {
|
||||
const onFinish = option?.onFinish;
|
||||
const immediately = option?.immediately ?? false;
|
||||
const uploadQueue = files.map(file => {
|
||||
return new UploadQueueItem(file, targetDirectory, {
|
||||
onSuccess: () => {
|
||||
this.loop();
|
||||
onFinish && onFinish();
|
||||
},
|
||||
onFailed: () => {
|
||||
this.loop();
|
||||
}
|
||||
});
|
||||
});
|
||||
this.queue.push(...uploadQueue);
|
||||
if (!immediately) {
|
||||
this.loop();
|
||||
} else {
|
||||
uploadQueue.forEach(item => {
|
||||
item.startUpload();
|
||||
});
|
||||
}
|
||||
return uploadQueue;
|
||||
}
|
||||
}
|
||||
@@ -1,131 +0,0 @@
|
||||
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;
|
||||
@@ -1,60 +0,0 @@
|
||||
import { shallowRef } from "vue";
|
||||
import VirtualDirectory, { VirtualFile } from "./VirtualDirectory";
|
||||
import generateId from "@/hooks/generateId";
|
||||
|
||||
const getRandomWebSafeColor = (() => {
|
||||
const webSafeColors = ["#009900", "#999900", "#009999", "#990099", "#0000ee"];
|
||||
let counter = 0;
|
||||
return () => {
|
||||
const color = webSafeColors[counter % webSafeColors.length];
|
||||
counter += 1;
|
||||
return color;
|
||||
};
|
||||
})();
|
||||
|
||||
export default class VirtualPage {
|
||||
constructor(component: any, initObjects: (VirtualDirectory | VirtualFile)[]) {
|
||||
this.component = shallowRef(component);
|
||||
this.currentObjects = initObjects;
|
||||
|
||||
this.visible = true;
|
||||
this.uid = generateId();
|
||||
this.refreshKey = Math.random();
|
||||
this.color = getRandomWebSafeColor();
|
||||
}
|
||||
component: any;
|
||||
// 是否可见
|
||||
visible: boolean;
|
||||
// 当前正在使用的文件或是文件夹
|
||||
currentObjects: (VirtualDirectory | VirtualFile)[];
|
||||
// 区分每一个页面的唯一id
|
||||
uid: number;
|
||||
// 当refreshKey改变时需要刷新页面,目前还没接入刷新
|
||||
refreshKey: number;
|
||||
// 为了区分,每个虚拟页面都会分配一个color,这个color会体现在tab上
|
||||
color: string;
|
||||
// 用于展示的title
|
||||
_title?: string;
|
||||
|
||||
get title() {
|
||||
if (this._title) {
|
||||
return this._title;
|
||||
}
|
||||
return this.currentObjects[0].name;
|
||||
}
|
||||
|
||||
setTitle(title: string) {
|
||||
this._title = title;
|
||||
}
|
||||
|
||||
// 切换显示状态
|
||||
switchShow() {
|
||||
this.visible = !this.visible;
|
||||
}
|
||||
|
||||
// 刷新,不过好像没有用得到的时候吧
|
||||
// 事实上也不应该用得到,因为更新应该是响应式的
|
||||
refresh() {
|
||||
this.refreshKey = Math.random();
|
||||
}
|
||||
}
|
||||
@@ -1,192 +0,0 @@
|
||||
<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: []
|
||||
delete: []
|
||||
dragStart: []
|
||||
}>()
|
||||
|
||||
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 = [{
|
||||
label: '删除',
|
||||
key: 'delete'
|
||||
}]
|
||||
if(itemType.value === 'file'){
|
||||
options.push(...[
|
||||
{
|
||||
label: '下载',
|
||||
key: 'download',
|
||||
}
|
||||
])
|
||||
}
|
||||
return options
|
||||
})
|
||||
|
||||
const handleDropdownSelect = (key: 'download' | 'delete') => {
|
||||
if(key === 'download'){
|
||||
emit('download')
|
||||
} else if (key === 'delete') {
|
||||
emit('delete')
|
||||
}
|
||||
}
|
||||
|
||||
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% - 20px);
|
||||
min-width: 250px;
|
||||
// aspect-ratio: 66/9;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 10px 10px;
|
||||
.item-main {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 95%;
|
||||
background-color: rgb(255, 255, 255);
|
||||
border-radius: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: background-color 0.3s;
|
||||
.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%;
|
||||
color: #00403e;
|
||||
}
|
||||
.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>
|
||||
@@ -1,50 +0,0 @@
|
||||
<template>
|
||||
<transition name="transition">
|
||||
<div class="mask-body" ref="maskBodyRef" v-show="showMask">
|
||||
<div @click="e=>e.stopPropagation()">
|
||||
<slot> {{}} </slot>
|
||||
</div>
|
||||
</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>
|
||||
@@ -1,43 +0,0 @@
|
||||
<template>
|
||||
<miao-mask v-model:show="showMask">
|
||||
<n-card title="">
|
||||
<n-input v-model:value="inputValue" type="text" placeholder="基本的 Input" />
|
||||
<n-button @click="_resolve && _resolve(inputValue)">确认</n-button>
|
||||
</n-card>
|
||||
</miao-mask>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from "vue";
|
||||
import { NCard, NInput, NButton } from "naive-ui";
|
||||
import miaoMask from "./miaoMask.vue";
|
||||
|
||||
const showMask = ref(true);
|
||||
const inputValue = ref<string>("");
|
||||
const _resolve = ref<(text: string) => void>()
|
||||
|
||||
type popupConfig = {
|
||||
title: string
|
||||
placeholder: string
|
||||
options: {
|
||||
label
|
||||
}
|
||||
}
|
||||
|
||||
const _config = reactive<popupConfig>({
|
||||
title: '',
|
||||
placeholder: ''
|
||||
})
|
||||
|
||||
|
||||
const popup = () => {
|
||||
showMask.value = true
|
||||
return new Promise((resolve: (text: string) => void) => { _resolve.value = resolve }).then((text: string) => {
|
||||
showMask.value = false
|
||||
return text;
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose({ popup });
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@@ -1,13 +0,0 @@
|
||||
const baseUrl = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
|
||||
|
||||
export default {
|
||||
baseUrl,
|
||||
uploadSizeLimit: 1024 * 1024 * 100,
|
||||
api: {
|
||||
get: '/get',
|
||||
upload: '/upload',
|
||||
delete: '/delete',
|
||||
query: '/query'
|
||||
},
|
||||
enableUpload: true,
|
||||
};
|
||||
@@ -1,20 +0,0 @@
|
||||
export default function dateFormatter(date: Date, fmt: string) {
|
||||
var o:any = {
|
||||
"M+": date.getMonth() + 1, //月份
|
||||
"d+": date.getDate(), //日
|
||||
"h+": date.getHours(), //小时
|
||||
"m+": date.getMinutes(), //分
|
||||
"s+": date.getSeconds(), //秒
|
||||
"q+": Math.floor((date.getMonth() + 3) / 3), //季度
|
||||
"S": date.getMilliseconds() //毫秒
|
||||
};
|
||||
if (/(y+)/.test(fmt)) {
|
||||
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
|
||||
}
|
||||
for (var k in o) {
|
||||
if (new RegExp("(" + k + ")").test(fmt)) {
|
||||
fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
|
||||
}
|
||||
}
|
||||
return fmt;
|
||||
}
|
||||
@@ -1,109 +0,0 @@
|
||||
import config from "@/config";
|
||||
|
||||
const { uploadSizeLimit } = config;
|
||||
|
||||
export type dropHandlerHooks = {
|
||||
/**
|
||||
* 仅返回小于config.ts中大小限制的文件,不会返回文件夹
|
||||
*/
|
||||
onDropFiles?: (files: File[]) => void;
|
||||
/**
|
||||
* 当拖动时
|
||||
*/
|
||||
onOver?: () => void;
|
||||
/**
|
||||
* 当进入时
|
||||
*/
|
||||
onEnter?: () => void;
|
||||
|
||||
/**
|
||||
* 当离开时
|
||||
*/
|
||||
onLeave?: () => void;
|
||||
|
||||
/**
|
||||
* 离开或是放下时都会触发
|
||||
* @returns {any}
|
||||
*/
|
||||
onEnd?: () => void;
|
||||
};
|
||||
|
||||
const isFile = (file: File) =>
|
||||
new Promise(resolve => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
resolve(true);
|
||||
reader.abort();
|
||||
};
|
||||
reader.onerror = () => {
|
||||
resolve(false);
|
||||
reader.abort();
|
||||
};
|
||||
reader.readAsText(file);
|
||||
});
|
||||
|
||||
/**
|
||||
* 只保留文件,移去文件夹
|
||||
* @param {File[]} files
|
||||
*/
|
||||
const filesFilter = async (files: File[]) => {
|
||||
let index = 0;
|
||||
while (index < files.length) {
|
||||
const currentFile = files[index];
|
||||
const _isFile = await isFile(currentFile);
|
||||
if (_isFile) {
|
||||
index += 1;
|
||||
continue;
|
||||
} else {
|
||||
files.splice(index, 1);
|
||||
continue;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default function dropHandler(dom: HTMLDivElement, hooks?: dropHandlerHooks) {
|
||||
dom.addEventListener(
|
||||
"dragenter",
|
||||
function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
hooks?.onEnter && hooks?.onEnter();
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
dom.addEventListener(
|
||||
"dragover",
|
||||
function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
hooks?.onOver && hooks?.onOver();
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
dom.addEventListener(
|
||||
"dragleave",
|
||||
function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
hooks?.onLeave && hooks?.onLeave();
|
||||
hooks?.onEnd && hooks.onEnd();
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
dom.addEventListener(
|
||||
"drop",
|
||||
async function (e) {
|
||||
// console.log(e, e.dataTransfer?.types);
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const files = [...(e.dataTransfer?.files ?? [])].filter(file => file.size < uploadSizeLimit);
|
||||
await filesFilter(files);
|
||||
hooks?.onDropFiles && hooks.onDropFiles(files);
|
||||
hooks?.onEnd && hooks.onEnd();
|
||||
},
|
||||
false
|
||||
);
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
const idList: number[] = [];
|
||||
|
||||
/**
|
||||
* 生成一个唯一的id
|
||||
* @param {any} length 生成id的长度
|
||||
* @returns {number}
|
||||
*/
|
||||
export default function generateId(length?: number) {
|
||||
length || (length = 16);
|
||||
let id;
|
||||
while (!id || idList.includes(id)) {
|
||||
id = Math.ceil(Math.random() * 10 ** 16);
|
||||
}
|
||||
idList.push(id)
|
||||
return id
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
import { reactive } from "vue";
|
||||
|
||||
let dataStorage: {
|
||||
[key: string | number] : any
|
||||
};
|
||||
|
||||
export default function useDataBus() {
|
||||
if(dataStorage === undefined) {
|
||||
dataStorage = reactive({})
|
||||
}
|
||||
return {
|
||||
set(key: string | number, value: any) {
|
||||
dataStorage[key] = value;
|
||||
return value;
|
||||
},
|
||||
pop(key: string | number) {
|
||||
const value = dataStorage[key];
|
||||
dataStorage[key] = undefined;
|
||||
return value;
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -1,151 +0,0 @@
|
||||
import VirtualDirectory, { VirtualFile } from "@/class/VirtualDirectory";
|
||||
import { getOption, getResponse, miaoFetchConfig, deleteOption, uploadOption, queryOption } from "@/types/fetch";
|
||||
import Config from "@/config";
|
||||
import axios, { AxiosRequestConfig } from "axios";
|
||||
|
||||
export const useMiaoFetch = (option?: miaoFetchConfig) => {
|
||||
const retry = option?.retry ?? 0;
|
||||
const controller = new AbortController();
|
||||
let flag = true;
|
||||
return {
|
||||
miaoFetch: async (config: AxiosRequestConfig<any>) => {
|
||||
let counter = 0;
|
||||
let response: any;
|
||||
let errList = [];
|
||||
while (flag && counter <= retry) {
|
||||
try {
|
||||
response = await axios({
|
||||
...config,
|
||||
signal: controller.signal
|
||||
});
|
||||
return response;
|
||||
} catch (_e) {
|
||||
errList.push(_e);
|
||||
counter += 1;
|
||||
}
|
||||
}
|
||||
throw errList;
|
||||
},
|
||||
/**
|
||||
* 强制终止miaoFetch
|
||||
*/
|
||||
abortMiaoFetch: () => {
|
||||
flag = false;
|
||||
controller.abort();
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const miaoFetchApi = {
|
||||
/**
|
||||
* 获取对应文件夹下的数据
|
||||
*/
|
||||
async get(vDirectory: VirtualDirectory, option?: getOption): Promise<getResponse> {
|
||||
const { baseUrl, api } = Config;
|
||||
const url = `${baseUrl}${api.get}${vDirectory.path}`;
|
||||
const retry = option?.retry ?? 0;
|
||||
|
||||
const { miaoFetch } = useMiaoFetch({
|
||||
retry
|
||||
});
|
||||
const response = await miaoFetch({
|
||||
url
|
||||
});
|
||||
return response.data;
|
||||
},
|
||||
|
||||
/**
|
||||
* 上传单个文件到对应文件夹, 后续要将data类型改成buffer以支持分片上传
|
||||
*/
|
||||
upload(data: File, targetVDir: VirtualDirectory, option?: uploadOption) {
|
||||
const { baseUrl, api } = Config;
|
||||
const url = `${baseUrl}${api.upload}${targetVDir.path}`;
|
||||
const retry = option?.retry ?? 0;
|
||||
const { miaoFetch, abortMiaoFetch } = useMiaoFetch({
|
||||
retry
|
||||
});
|
||||
const sizeTotal = data.size;
|
||||
|
||||
const opType = option?.type ?? "write";
|
||||
|
||||
const formData = new FormData();
|
||||
|
||||
formData.append("file", data);
|
||||
// 必须这样传,不然中文乱码
|
||||
formData.append("fileName", data.name)
|
||||
formData.append("oprateType", opType);
|
||||
|
||||
return {
|
||||
abort: () => abortMiaoFetch(),
|
||||
response: new Promise<{
|
||||
message: 'success' | 'failed'
|
||||
error?: string
|
||||
}>(async resolve => {
|
||||
const response = await miaoFetch({
|
||||
url,
|
||||
method: "post",
|
||||
data: formData,
|
||||
onUploadProgress(progressEvent) {
|
||||
option && option.onProcess && option.onProcess(progressEvent.loaded / sizeTotal);
|
||||
}
|
||||
});
|
||||
resolve(response.data);
|
||||
})
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除对应的文件或文件夹,若为文件夹会递归删除
|
||||
*/
|
||||
delete(target: VirtualFile | VirtualDirectory, option?: deleteOption) {
|
||||
const { baseUrl, api } = Config;
|
||||
const url = `${baseUrl}${api.delete}${target.path}`;
|
||||
const retry = option?.retry ?? 0;
|
||||
const { miaoFetch } = useMiaoFetch({
|
||||
retry
|
||||
});
|
||||
|
||||
return {
|
||||
response: new Promise<{
|
||||
eventId: number
|
||||
}>(async resolve => {
|
||||
const response = await miaoFetch({
|
||||
url,
|
||||
method: "post"
|
||||
});
|
||||
resolve(response.data);
|
||||
})
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* 查询服务端操作事件的进展
|
||||
*/
|
||||
query(eventId: number, option?: queryOption) {
|
||||
const { baseUrl, api } = Config;
|
||||
const url = `${baseUrl}${api.query}`;
|
||||
const retry = option?.retry ?? 0;
|
||||
const { miaoFetch } = useMiaoFetch({
|
||||
retry
|
||||
});
|
||||
return {
|
||||
response: new Promise<{
|
||||
status: 'process' | 'success' | 'failed',
|
||||
error?: unknown
|
||||
}>(async resolve => {
|
||||
const response = await miaoFetch({
|
||||
url,
|
||||
method: "get",
|
||||
params: {
|
||||
id: eventId
|
||||
}
|
||||
});
|
||||
resolve(response.data);
|
||||
})
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
export default function useMiaoFetchApi() {
|
||||
return miaoFetchApi;
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
import UploadQueue from "@/class/UploadQueue";
|
||||
import { reactive } from "vue";
|
||||
|
||||
let uploadQueue: UploadQueue
|
||||
|
||||
export default () => {
|
||||
if(uploadQueue === undefined){
|
||||
uploadQueue = reactive(new UploadQueue())
|
||||
}
|
||||
return uploadQueue
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
import VirtualPage from "@/class/VirtualPage"
|
||||
import { Reactive, reactive } from "vue"
|
||||
|
||||
let views: Reactive<VirtualPage[]>
|
||||
|
||||
export default function useViretualPages(){
|
||||
if(views === undefined) {
|
||||
views = reactive<VirtualPage[]>([])
|
||||
}
|
||||
return views
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
@@ -1,29 +0,0 @@
|
||||
import { directory, file } from "./type";
|
||||
|
||||
export type miaoFetchConfig = {
|
||||
retry?: number
|
||||
}
|
||||
|
||||
export type getOption = {
|
||||
} & miaoFetchConfig
|
||||
|
||||
export type getResponse = (file | directory)[]
|
||||
|
||||
export type uploadOption = {
|
||||
/**
|
||||
* 上传进度回调函数
|
||||
* @param {any} percent 进度百分比,float类型
|
||||
*/
|
||||
onProcess?: (percent: number) => void
|
||||
/**
|
||||
* 上传文件执行的操作
|
||||
* write即为覆盖写
|
||||
* append即为增量写
|
||||
*/
|
||||
type?: 'write' | 'append'
|
||||
} & miaoFetchConfig
|
||||
|
||||
export type deleteOption = {
|
||||
} & miaoFetchConfig
|
||||
export type queryOption = {
|
||||
} & miaoFetchConfig
|
||||
@@ -1,22 +0,0 @@
|
||||
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;
|
||||
};
|
||||
@@ -1,378 +0,0 @@
|
||||
<template>
|
||||
<div class="miao-directory-item-container" ref="rootDomRef">
|
||||
<div
|
||||
class="container-top"
|
||||
:style="{ backgroundColor: index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)' }"
|
||||
>
|
||||
<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: index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)' }"
|
||||
>
|
||||
<n-scrollbar>
|
||||
<transition-group name="dirItem">
|
||||
<miaoDirectoryItem
|
||||
v-for="dir in showData_directory"
|
||||
@click="setCurrentDirectory(dir)"
|
||||
:item="dir"
|
||||
:key="dir.uid"
|
||||
:color="props.color"
|
||||
@delete="handleItemDelete(dir)"
|
||||
/>
|
||||
</transition-group>
|
||||
<transition-group name="dirItem">
|
||||
<miaoDirectoryItem
|
||||
v-for="file in showData_files"
|
||||
:item="file"
|
||||
:key="file.uid"
|
||||
@click="openUrl(`${baseUrl}${api.get}${file.path}`)"
|
||||
@download="
|
||||
openUrl(`${baseUrl}${api.get}${file.path}`, { download: file.name })
|
||||
"
|
||||
@delete="handleItemDelete(file)"
|
||||
:color="props.color"
|
||||
/>
|
||||
</transition-group>
|
||||
</n-scrollbar>
|
||||
</div>
|
||||
<div
|
||||
class="container-bottom"
|
||||
:style="{ backgroundColor: index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)' }"
|
||||
></div>
|
||||
<miao-mask v-model:show="showModel"></miao-mask>
|
||||
<!-- <miao-popup-input ref="popupInput"></miao-popup-input> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NBreadcrumbItem, NBreadcrumb, NIcon, NScrollbar } from "naive-ui";
|
||||
import type { file, directory } from "@/types/type.ts";
|
||||
import VirtualDirectory, { VirtualFile } from "@/class/VirtualDirectory";
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import Config from "@/config";
|
||||
import dropHandler, { dropHandlerHooks } from "@/hooks/dropHandler";
|
||||
import miaoMask from "@/components/miaoMask.vue";
|
||||
import miaoPopupInput from "@/components/miaoPopupInput.vue";
|
||||
import miaoDirectoryItem from "@/components/miaoDirectory/miaoDirectoryItem.vue";
|
||||
import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
|
||||
import useDataBus from "@/hooks/useDataBus";
|
||||
import {
|
||||
CloudOutline,
|
||||
ChevronBackOutline,
|
||||
ReloadOutline,
|
||||
CloseOutline,
|
||||
} from "@vicons/ionicons5";
|
||||
import useUploadQueue from "@/hooks/useUploadQueue";
|
||||
import useViretualPages from "@/hooks/useVirtualPages";
|
||||
|
||||
const { baseUrl, api } = Config;
|
||||
const dataBus = useDataBus();
|
||||
const views = useViretualPages();
|
||||
|
||||
const miaoFetchApi = useMiaoFetchApi();
|
||||
|
||||
const props = defineProps<{
|
||||
color: string;
|
||||
id: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
exit: [];
|
||||
}>();
|
||||
|
||||
const popupInput = ref()
|
||||
// 是否显示模态框
|
||||
const showModel = ref(0);
|
||||
|
||||
const currentObjects = defineModel<VirtualDirectory[]>("currentObjects", {
|
||||
required: true,
|
||||
});
|
||||
|
||||
// 目前展示的Dir
|
||||
const currentDirectory = computed(() => {
|
||||
return currentObjects.value[0];
|
||||
});
|
||||
|
||||
const index = computed(() => {
|
||||
for (let i in views) {
|
||||
if (views[i].uid === props.id) {
|
||||
return parseInt(i);
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
// 用于展示的数据,后续会增加排序等操作
|
||||
const showData_directory = computed<VirtualDirectory[]>(() => {
|
||||
const data = currentDirectory.value?.directorys
|
||||
? [...currentDirectory.value?.directorys]
|
||||
: [];
|
||||
return data;
|
||||
});
|
||||
const showData_files = computed<VirtualFile[]>(() => {
|
||||
const data = currentDirectory.value?.files ? [...currentDirectory.value?.files] : [];
|
||||
return data;
|
||||
});
|
||||
|
||||
// 用于监听拖拽文件事件
|
||||
const rootDomRef = ref<HTMLDivElement>();
|
||||
|
||||
const uploadQueue = useUploadQueue();
|
||||
|
||||
// 设置显示的dir
|
||||
const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
|
||||
// 若没有缓存数据则同步刷新,有缓存数据则异步刷新
|
||||
if (virtualDirectory.files === undefined || virtualDirectory.directorys === undefined) {
|
||||
const data: (file | directory)[] = await miaoFetchApi.get(virtualDirectory);
|
||||
virtualDirectory.updateContent(data);
|
||||
} else {
|
||||
(async () => {
|
||||
const data: (file | directory)[] = await miaoFetchApi.get(virtualDirectory);
|
||||
virtualDirectory.updateContent(data);
|
||||
})();
|
||||
}
|
||||
currentObjects.value[0] = virtualDirectory;
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
setCurrentDirectory(currentDirectory.value);
|
||||
};
|
||||
|
||||
const openUrl = (
|
||||
href: string,
|
||||
config?: {
|
||||
download?: string;
|
||||
target?: string;
|
||||
}
|
||||
) => {
|
||||
let { target, download } = config ?? {};
|
||||
const a = document.createElement("a");
|
||||
a.setAttribute("href", href);
|
||||
a.setAttribute("target", target ?? "_blank");
|
||||
download && a.setAttribute("download", download);
|
||||
a.click();
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
if (currentDirectory.value?.parent) {
|
||||
setCurrentDirectory(currentDirectory.value.parent);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReload = () => {
|
||||
reload();
|
||||
};
|
||||
|
||||
const handleItemDelete = async (item: VirtualDirectory | VirtualFile) => {
|
||||
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();
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await setCurrentDirectory(currentDirectory.value);
|
||||
// 拖动事件处理
|
||||
const dropFileOption: dropHandlerHooks = {
|
||||
onDropFiles(files: File[]) {
|
||||
const dragData = dataBus.pop("dragData");
|
||||
console.log({ dragData, files });
|
||||
if (files && files.length > 0) {
|
||||
currentDirectory.value &&
|
||||
uploadQueue.push(files, currentDirectory.value, {
|
||||
onFinish() {
|
||||
reload();
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
onEnter() {
|
||||
showModel.value += 1;
|
||||
},
|
||||
onEnd() {
|
||||
showModel.value -= 1;
|
||||
},
|
||||
};
|
||||
rootDomRef.value && dropHandler(rootDomRef.value, dropFileOption);
|
||||
|
||||
console.log(await popupInput.value.popup())
|
||||
});
|
||||
</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: -2px;
|
||||
// width: 2px;
|
||||
// background-color: #828282;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.container-items {
|
||||
width: 100%;
|
||||
height: calc(100% - $top-height - $bottom-bar-height);
|
||||
// flex: 1;
|
||||
}
|
||||
|
||||
.container-bottom {
|
||||
height: $bottom-bar-height;
|
||||
background-color: bisque;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
box-shadow: 0px 1px 10px #888888;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
// transition动画相关
|
||||
.miao-directory-item-container {
|
||||
.container-items {
|
||||
.dirItem-move {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.dirItem-leave-active {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.dirItem-enter-from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.dirItem-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Vendored
-1
@@ -1 +0,0 @@
|
||||
/// <reference types="vite/client" />
|
||||
@@ -1,28 +0,0 @@
|
||||
{
|
||||
"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"]
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
{
|
||||
"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"]
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"IconPath": "icon.ico"
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
import { defineConfig } from "vite";
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
import { resolve } from "path";
|
||||
import { viteSingleFile } from "vite-plugin-singlefile"
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue(), viteSingleFile()],
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": resolve(__dirname, "src")
|
||||
}
|
||||
},
|
||||
server: {
|
||||
proxy: {
|
||||
"/get": {
|
||||
target: "http://127.0.0.1:17705",
|
||||
changeOrigin: true,
|
||||
rewrite: path => path.replace(/^\/get/, "/get")
|
||||
},
|
||||
|
||||
"/upload": {
|
||||
target: "http://127.0.0.1:17705",
|
||||
changeOrigin: true,
|
||||
rewrite: path => path.replace(/^\/upload/, "/upload")
|
||||
},
|
||||
|
||||
"/delete": {
|
||||
target: "http://127.0.0.1:17705",
|
||||
changeOrigin: true,
|
||||
rewrite: path => path.replace(/^\/delete/, "/delete")
|
||||
},
|
||||
"/query": {
|
||||
target: "http://127.0.0.1:17705",
|
||||
changeOrigin: true,
|
||||
rewrite: path => path.replace(/^\/query/, "/query")
|
||||
},
|
||||
}
|
||||
},
|
||||
build: {
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: resolve(__dirname, "index.html")
|
||||
},
|
||||
output: {
|
||||
// 配置输出为单文件
|
||||
inlineDynamicImports: true,
|
||||
manualChunks: undefined,
|
||||
entryFileNames: "bundle.js",
|
||||
format: "iife", // 立即执行函数格式
|
||||
name: "MyBundle"
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in new issue
Block a user