Compare commits
97
Commits
1.8.0
..
d19cce76d2
| Author | SHA1 | Date | |
|---|---|---|---|
 539943419
|
d19cce76d2 | ||
|
539943419
|
8ef243f790 | ||
|
539943419
|
8605bd19ea | ||
|
539943419
|
c6999647c3 | ||
|
539943419
|
f33e9386cd | ||
|
539943419
|
5823d5876b | ||
|
539943419
|
011a3356b7 | ||
|
539943419
|
4aba71d451 | ||
|
539943419
|
6d550505a0 | ||
|
539943419
|
d6816925ed | ||
|
539943419
|
47590ec0db | ||
|
539943419
|
8f8d098faa | ||
|
539943419
|
bfc841fac2 | ||
|
539943419
|
e8dd9ccf11 | ||
|
539943419
|
d89978a44f | ||
|
539943419
|
5a843bf24a | ||
|
539943419
|
e876c117c6 | ||
|
539943419
|
483a573f06 | ||
|
539943419
|
90a068939d | ||
|
539943419
|
1f42785b4a | ||
|
539943419
|
3b09d4c1cb | ||
|
539943419
|
948b5f23d1 | ||
|
539943419
|
4722a2d157 | ||
|
539943419
|
65c17a8ce3 | ||
|
539943419
|
cba20150be | ||
|
539943419
|
7b52a7a62e | ||
|
539943419
|
2e75a35d10 | ||
|
539943419
|
ae476413df | ||
|
539943419
|
dcdb3a1ab8 | ||
|
539943419
|
baec1856c9 | ||
|
539943419
|
a03623a0a0 | ||
|
539943419
|
aec7fcabc9 | ||
|
539943419
|
9611e9f4ed | ||
|
539943419
|
53ab0ad45b | ||
|
539943419
|
641700d730 | ||
|
539943419
|
aa61489517 | ||
|
539943419
|
171af1219e | ||
|
539943419
|
cdc0bce108 | ||
|
539943419
|
c6b20b5b64 | ||
|
539943419
|
37791ab04e | ||
|
539943419
|
e155524e3e | ||
|
539943419
|
dafe494ce9 | ||
|
539943419
|
55381df4f6 | ||
|
539943419
|
38e1b098d2 | ||
|
539943419
|
4b5b7956c7 | ||
|
539943419
|
5173b28ec5 | ||
|
539943419
|
8d738ef3f9 | ||
|
539943419
|
96ca8fcf4c | ||
|
539943419
|
54c48c0f8f | ||
|
539943419
|
f2ff05f4e3 | ||
|
539943419
|
ff7d0d8d51 | ||
|
539943419
|
0e631a6f34 | ||
|
539943419
|
0ab58b24d9 | ||
|
539943419
|
b0cf5b312a | ||
|
539943419
|
ec4ed10afd | ||
|
539943419
|
3a18bb3cbd | ||
|
539943419
|
282bf327bb | ||
|
539943419
|
4d2bd3867f | ||
|
539943419
|
afb2440d8b | ||
|
539943419
|
8b55ac2854 | ||
|
539943419
|
f0748997be | ||
|
539943419
|
b2c5c7cc6d | ||
|
539943419
|
d16f11c263 | ||
|
539943419
|
0f6e817966 | ||
|
539943419
|
6b8f7aa6b4 | ||
|
539943419
|
78dac7482c | ||
|
539943419
|
9aec221ea3 | ||
|
539943419
|
938dde4c1c | ||
|
539943419
|
8e884eb178 | ||
|
539943419
|
8c65e66ab6 | ||
|
539943419
|
a34e27cc65 | ||
|
539943419
|
de2e53cbcf | ||
|
539943419
|
b3c6dad1b1 | ||
|
539943419
|
fcb2fe8f7f | ||
|
539943419
|
c02f6743e3 | ||
|
539943419
|
3e24d4a363 | ||
|
539943419
|
7574acdad2 | ||
|
539943419
|
704c80e019 | ||
|
539943419
|
210e251b23 | ||
|
539943419
|
93ca2a29a6 | ||
|
539943419
|
25f25ff669 | ||
|
539943419
|
f2333f74cb | ||
|
539943419
|
d0bad77387 | ||
|
539943419
|
f8ca6dba67 | ||
|
539943419
|
2d401f7a17 | ||
|
539943419
|
ef5a8f1a9e | ||
|
539943419
|
86b3a02237 | ||
|
539943419
|
ea43e641ce | ||
|
539943419
|
803fd69850 | ||
|
539943419
|
f6c1ba199f | ||
|
539943419
|
c595ebb260 | ||
|
539943419
|
d5d9984ae5 | ||
|
539943419
|
3a48fd5643 | ||
|
539943419
|
f578072997 | ||
|
539943419
|
632a562348 | ||
|
539943419
|
1f6c924e11 | ||
|
539943419
|
f5e0bd4a56 |
No files matched your search
+7
-1
@@ -23,4 +23,10 @@ dist-ssr
|
||||
*.sln
|
||||
*.sw?
|
||||
.vscode
|
||||
serve
|
||||
miao-directory.exe
|
||||
miao-directory-amd64-linux
|
||||
miao-directory-amd64-win.exe
|
||||
test
|
||||
stats.html
|
||||
|
||||
src-server/web/*
|
||||
+104
@@ -0,0 +1,104 @@
|
||||
export default {
|
||||
/**
|
||||
* 换行宽度，当代码宽度达到多少时换行
|
||||
* @default 80
|
||||
* @type {number}
|
||||
*/
|
||||
printWidth: 80,
|
||||
/**
|
||||
* 缩进的空格数量
|
||||
* @default 2
|
||||
* @type {number}
|
||||
*/
|
||||
tabWidth: 3,
|
||||
/**
|
||||
* 是否使用制表符代替空格
|
||||
* @default false
|
||||
* @type {boolean}
|
||||
*/
|
||||
useTabs: false,
|
||||
/**
|
||||
* 是否在代码块结尾加上分号
|
||||
* @default true
|
||||
* @type {boolean}
|
||||
*/
|
||||
semi: false,
|
||||
/**
|
||||
* 是否使用单引号替代双引号
|
||||
* @default false
|
||||
* @type {boolean}
|
||||
*/
|
||||
singleQuote: true,
|
||||
/**
|
||||
* 对象属性的引号处理
|
||||
* @default "as-needed"
|
||||
* @type {"as-needed"|"consistent"|"preserve"}
|
||||
*/
|
||||
quoteProps: 'as-needed',
|
||||
/**
|
||||
* jsx中是否使用单引号替代双引号
|
||||
* @default false
|
||||
* @type {boolean}
|
||||
*/
|
||||
jsxSingleQuote: true,
|
||||
/**
|
||||
* 在jsx中使用是否单引号代替双引号
|
||||
* @default false
|
||||
* @type {boolean}
|
||||
*/
|
||||
/**
|
||||
* 末尾是否加上逗号
|
||||
* @default "es5"
|
||||
* @type {"es5"|"none"|"all"}
|
||||
*/
|
||||
trailingComma: 'none',
|
||||
/**
|
||||
* 在对象，数组括号与文字之间加空格 "{ foo: bar }"
|
||||
* @default true
|
||||
* @type {boolean}
|
||||
*/
|
||||
bracketSpacing: true,
|
||||
/**
|
||||
* 把多行HTML (HTML, JSX, Vue, Angular)元素的>放在最后一行的末尾，而不是单独放在下一行(不适用于自关闭元素)。
|
||||
* @default false
|
||||
* @type {boolean}
|
||||
*/
|
||||
bracketSameLine: true,
|
||||
/**
|
||||
* 当箭头函数只有一个参数是否加括号
|
||||
* @default "always"
|
||||
* @type {"always"|"avoid"}
|
||||
*/
|
||||
arrowParens: 'always',
|
||||
/**
|
||||
* 为HTML、Vue、Angular和Handlebars指定全局空格敏感性
|
||||
* @default "css"
|
||||
* @type {"css"|"strict"|"ignore"}
|
||||
*/
|
||||
htmlWhitespaceSensitivity: 'ignore',
|
||||
/**
|
||||
* 是否缩进Vue文件中的<script>和<style>标记内的代码。有些人(比如Vue的创建者)不使用缩进来保存缩进级别，但这可能会破坏编辑器中的代码折叠。
|
||||
* @default "always"
|
||||
* @type {"always"|"avoid"}
|
||||
*/
|
||||
vueIndentScriptAndStyle: false,
|
||||
/**
|
||||
* 文件结束符
|
||||
* @default "lf"
|
||||
* @type {"lf"|"crlf"|"cr"|"auto"}
|
||||
*/
|
||||
endOfLine: 'crlf',
|
||||
/**
|
||||
* 因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
|
||||
*/
|
||||
proseWrap: 'never',
|
||||
// 是否使用根目录下的EditorConfig配置文件
|
||||
useEditorConfig: false,
|
||||
/**
|
||||
* HTML\VUE\JSX每行只有单个属性
|
||||
* @default true
|
||||
* @type {boolean}
|
||||
*/
|
||||
// singleAttributePerLine: true,
|
||||
// disableLanguages: ['html']
|
||||
}
|
||||
@@ -1,11 +1,28 @@
|
||||
todo: 标签页，miaoDirectory切换动画 [finish]
|
||||
todo: 重构virtualPage，所有page以插件形式使用 [finish]
|
||||
todo: miaoDirectory插件化，为后续插件功能开发做准备 [finish]
|
||||
todo: miaoPopupInput, 弹出一个输入框 [finish]
|
||||
todo: miaoDirectory的重命名功能 [finish]
|
||||
todo: miaoDirectory的剪切功能 [finish]
|
||||
todo: miaoDirectory的上传按钮 [finish]
|
||||
todo: miaoDirectory的新建文件/文件夹功能 [finish]
|
||||
todo: miaoDirectory的多选功能 [finish]
|
||||
todo: VirtualDirectory更新时更新文件信息
|
||||
todo: miaoDirectory的复制文件/文件夹功能
|
||||
## TODO list:
|
||||
|
||||
| 计划 | 状态 |
|
||||
|---|---|
|
||||
| 拆分miaoDirectory | ✅ |
|
||||
| 完善视频插件 | ✅ |
|
||||
| 完善PDF插件 | ✅ |
|
||||
| 完善Code插件 | ✅ |
|
||||
| 实现miaoDirectory的搜索功能 | ✅ |
|
||||
| 创建音乐播放器组件（仿QQ音乐移动端吧） | ✅ |
|
||||
| plugin增加些属性，icon, disable, group之类的 | ✅ |
|
||||
| 实现miaoDirectory的排序功能 | ✅ |
|
||||
| 重构miaoFetchApi.getFile， 增加进度 | ❌ |
|
||||
| 完善miaoDirectory的搜索功能 | ❌ |
|
||||
| 完善图片浏览插件 | ❌ |
|
||||
| VirtualDirectory更新时更新文件信息 | ❌ |
|
||||
| miaoDirectory的复制文件/文件夹功能 | ❌ |
|
||||
| 重构miaoDropHandler的实现 | ❌ |
|
||||
| 重构主界面，拆分主界面组件的实现 | ❌ |
|
||||
|
||||
|
||||
| 长期计划 |
|
||||
|---|
|
||||
| 无 |
|
||||
|
||||
## 碎碎念：
|
||||
|
||||
写的真潦草
|
||||
+2
-2
@@ -2,9 +2,9 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<link rel="icon" type="image/svg+xml" href="./icon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>MDW</title>
|
||||
<title>MiaoDirectory</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
+36
-2
@@ -7,20 +7,54 @@
|
||||
"dev": "vite",
|
||||
"dev:host": "vite --host 0.0.0.0",
|
||||
"build": "vue-tsc -b && vite build",
|
||||
"preview": "vite preview"
|
||||
"build:auto": "pnpm run build && go env -w GOOS=windows GOARCH=amd64 && rm -rf ./src-server/web/* && cp -r ./dist/* ./src-server/web/ && cd ./src-server && go env -w GOOS=windows && go build -o ../miao-directory.exe",
|
||||
"build:auto:release": "pnpm run build && rm -rf ./src-server/web/* && cp -r ./dist/* ./src-server/web/ && cd ./src-server && go env -w GOOS=windows GOARCH=amd64 && go build -o ../miao-directory-amd64-win.exe && go env -w GOOS=linux GOARCH=amd64 && go build -o ../miao-directory-amd64-linux",
|
||||
"preview": "vite preview",
|
||||
"format": "prettier --write src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"@codemirror/lang-go": "^6.0.1",
|
||||
"@codemirror/lang-html": "^6.4.9",
|
||||
"@codemirror/lang-javascript": "^6.2.2",
|
||||
"@codemirror/lang-json": "^6.0.1",
|
||||
"@codemirror/lang-markdown": "^6.2.5",
|
||||
"@codemirror/lang-python": "^6.1.6",
|
||||
"@codemirror/lang-sass": "^6.0.2",
|
||||
"@codemirror/lang-sql": "^6.7.1",
|
||||
"@codemirror/lang-vue": "^0.1.3",
|
||||
"@codemirror/lang-xml": "^6.1.0",
|
||||
"@codemirror/lang-yaml": "^6.1.1",
|
||||
"@types/sortablejs": "^1.15.8",
|
||||
"@vicons/ionicons5": "^0.12.0",
|
||||
"aes-js": "^3.1.2",
|
||||
"aplayer": "^1.10.1",
|
||||
"axios": "^1.7.3",
|
||||
"codemirror": "^6.0.1",
|
||||
"copy-to-clipboard": "^3.3.3",
|
||||
"drag-drop-touch": "^1.3.1",
|
||||
"localforage": "^1.10.0",
|
||||
"lodash": "^4.17.21",
|
||||
"markdown-it": "^14.1.0",
|
||||
"naive-ui": "^2.39.0",
|
||||
"pdfjs-dist": "^4.5.136",
|
||||
"sass": "^1.77.8",
|
||||
"vue": "^3.4.35"
|
||||
"sortablejs": "^1.15.3",
|
||||
"vue": "3.5.0",
|
||||
"vue-codemirror": "^6.1.1",
|
||||
"vue-draggable-plus": "^0.5.3",
|
||||
"xgplayer": "^3.0.20",
|
||||
"xgplayer-subtitles": "^3.0.20"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/aes-js": "^3.1.4",
|
||||
"@types/lodash": "^4.17.7",
|
||||
"@types/markdown-it": "^14.1.2",
|
||||
"@types/node": "^22.1.0",
|
||||
"@types/pdfjs-dist": "^2.10.378",
|
||||
"@vitejs/plugin-vue": "^5.1.2",
|
||||
"prettier": "^3.4.2",
|
||||
"prettier-plugin-vue": "^1.1.6",
|
||||
"rollup-plugin-visualizer": "^5.12.0",
|
||||
"typescript": "^5.5.3",
|
||||
"vite": "^5.4.0",
|
||||
"vite-plugin-singlefile": "^2.0.2",
|
||||
|
||||
Generated
+1557
-66
File diff suppressed because it is too large.
Load diff
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
@@ -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=
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
@@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
# miao-directory的后端部分
|
||||
* 原有的node后端不再维护。
|
||||
* ./web文件夹中的内容自己到main分支去打包一个出来
|
||||
Binary file not shown.
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"IconPath": "icon.ico"
|
||||
}
|
||||
+87
-326
@@ -1,200 +1,144 @@
|
||||
<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'
|
||||
computed,
|
||||
onMounted,
|
||||
provide,
|
||||
ref,
|
||||
shallowRef,
|
||||
useTemplateRef
|
||||
} from 'vue'
|
||||
import { QrCodeOutline, ExtensionPuzzleOutline } from '@vicons/ionicons5'
|
||||
import type VirtualDirectory from './class/VirtualDirectory'
|
||||
import type { VirtualFile } from './class/VirtualDirectory'
|
||||
import MiaoMask from './components/miaoMask.vue'
|
||||
import MiaoMessageProvider from './components/miaoAlertTipProvider.vue'
|
||||
import config from './config'
|
||||
import useVirtualPages from './hooks/useVirtualPages'
|
||||
import init from './hooks/init'
|
||||
import usePluginCenter from './hooks/usePluginCenter'
|
||||
import PluginCenter, { PluginGroup } from './class/PluginCenter'
|
||||
import { renderIcon } from './utils/miaoTools'
|
||||
import { DropdownMixedOption } from 'naive-ui/es/dropdown/src/interface'
|
||||
import useRootVDirectory from './hooks/useRootVDirectory'
|
||||
import ViewController from '@/components/APP/ViewController.vue'
|
||||
import ViewContainer from '@/components/APP/ViewContainer.vue'
|
||||
|
||||
const { baseUrl } = config
|
||||
|
||||
const showModal = ref<boolean>(false)
|
||||
|
||||
const viewRef = ref<HTMLDivElement>()
|
||||
const modalData = shallowRef<{
|
||||
component: any
|
||||
props: any
|
||||
}>()
|
||||
|
||||
const messageProviderRef = useTemplateRef('messageProviderRef')
|
||||
const views = useVirtualPages()
|
||||
|
||||
const rootDirectory = reactive(
|
||||
new VirtualDirectory({
|
||||
name: '根目录',
|
||||
stats: {
|
||||
atimeMs: 0,
|
||||
birthtimeMs: 0,
|
||||
ctimeMs: 0,
|
||||
mtimeMs: 0
|
||||
}
|
||||
})
|
||||
)
|
||||
let pluginCenter = ref<PluginCenter>()
|
||||
const rootDirectory = useRootVDirectory()
|
||||
|
||||
// component就是一个vue组件，类似于miaoDirectory
|
||||
const createView = (
|
||||
component: any,
|
||||
currentDirectorys?: VirtualDirectory[],
|
||||
name: string,
|
||||
currentDirectories?: VirtualDirectory[],
|
||||
currentFiles?: VirtualFile[],
|
||||
index?: number
|
||||
) => {
|
||||
index ?? (index = views.length)
|
||||
views.splice(
|
||||
index,
|
||||
0,
|
||||
reactive<VirtualPage>(new VirtualPage(component, {
|
||||
directorys: [...(currentDirectorys ?? [])],
|
||||
files: [...(currentFiles ?? [])]
|
||||
}))
|
||||
)
|
||||
views.push(component, name, currentDirectories, currentFiles, { index })
|
||||
}
|
||||
|
||||
const deleteView = (index: number) => {
|
||||
views.splice(index, 1)
|
||||
if (views.length === 0) {
|
||||
createView(miaoDirectory, [rootDirectory])
|
||||
}
|
||||
views.deleteView(index)
|
||||
}
|
||||
|
||||
// 点击标题是隐藏其他标签或显示其他标签，还挺好用的
|
||||
const handleClickTitle = (index: number) => {
|
||||
let count = views.filter((v) => v.visible).length
|
||||
let op = !views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
|
||||
let count = views._views.filter((v) => v.visible).length
|
||||
let op =
|
||||
!views._views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
|
||||
let _index = 0
|
||||
while (_index < views.length) {
|
||||
while (_index < views._views.length) {
|
||||
if (_index !== index) {
|
||||
views[_index].visible = op === 'hideOthers' ? false : true
|
||||
views._views[_index].visible = op === 'hideOthers' ? false : true
|
||||
} else {
|
||||
views[_index].visible = true
|
||||
views._views[_index].visible = true
|
||||
}
|
||||
_index += 1
|
||||
}
|
||||
}
|
||||
|
||||
// 顶部菜单相关
|
||||
function renderIcon(icon: any) {
|
||||
return () => {
|
||||
return h(NIcon, null, {
|
||||
default: () => h(icon)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const openMenuOption = [
|
||||
const openMenuOption = computed(
|
||||
() =>
|
||||
[
|
||||
{
|
||||
label: '分享',
|
||||
key: 'share',
|
||||
icon: renderIcon(QrCodeOutline)
|
||||
},
|
||||
pluginCenter.value
|
||||
? {
|
||||
label: '插件',
|
||||
key: 'plugin',
|
||||
children: [
|
||||
...pluginCenter.value
|
||||
.getUsablePlugin([], [], {
|
||||
group: [PluginGroup.mainMenu]
|
||||
})
|
||||
.map((v) => ({
|
||||
label: `${v.name}`,
|
||||
key: `plugin:${v.key}`,
|
||||
icon: v.icon ? renderIcon(v.icon) : undefined
|
||||
}))
|
||||
],
|
||||
icon: renderIcon(ExtensionPuzzleOutline)
|
||||
}
|
||||
]
|
||||
: undefined
|
||||
].filter((v) => v) as DropdownMixedOption[]
|
||||
)
|
||||
|
||||
const handleMenuSelect = (key: string) => {
|
||||
const handleMenuSelect = async (key: string) => {
|
||||
if (key === 'share') {
|
||||
showModal.value = true
|
||||
modalData.value = {
|
||||
component: NQrCode,
|
||||
component: (await import('naive-ui/es/qr-code')).NQrCode,
|
||||
props: {
|
||||
value: baseUrl,
|
||||
size: 300,
|
||||
errorCorrectionLevel: 'H'
|
||||
}
|
||||
}
|
||||
} else if (key.startsWith('plugin:')) {
|
||||
const pluginName = key.split(':')[1]
|
||||
pluginCenter.value && pluginCenter.value.usePlugin(pluginName, [], [])
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
createView(miaoDirectory, [rootDirectory])
|
||||
onMounted(async () => {
|
||||
// @ts-ignore
|
||||
await init(messageProviderRef.value?.alertTip)
|
||||
pluginCenter.value = usePluginCenter()
|
||||
})
|
||||
|
||||
// @ts-ignore
|
||||
provide('globalAlertTip', messageProviderRef.value?.alertTip)
|
||||
provide('rootDirectory', rootDirectory)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="view">
|
||||
<div class="view-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.currentDirectorys,
|
||||
view.currentFiles,
|
||||
index + 1
|
||||
)
|
||||
">
|
||||
<CopyOutline />
|
||||
</n-icon>
|
||||
<n-icon
|
||||
class="tag-control-icon icon"
|
||||
@click="deleteView(index)">
|
||||
<CloseOutline class="icon-inner" />
|
||||
</n-icon>
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</n-scrollbar>
|
||||
<div class="view-controller-menu">
|
||||
<div class="view-controller-menu-item">
|
||||
<n-dropdown
|
||||
trigger="click"
|
||||
:options="openMenuOption"
|
||||
@select="handleMenuSelect">
|
||||
<n-icon class="icon">
|
||||
<EllipsisVertical class="icon-inner" />
|
||||
</n-icon>
|
||||
</n-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="view-container">
|
||||
<transition-group name="page">
|
||||
<div
|
||||
class="view-container-item"
|
||||
v-for="(view, index) of views"
|
||||
v-show="view.visible"
|
||||
:key="view.uid">
|
||||
<component
|
||||
:is="view.component"
|
||||
v-model:current-objects="view.currentDirectorys"
|
||||
:id="view.uid"
|
||||
:color="view.color"
|
||||
@exit="deleteView(index)"></component>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
<div class="view" ref="viewRef">
|
||||
<miao-message-provider ref="messageProviderRef">
|
||||
<ViewController
|
||||
:views="views"
|
||||
:handleClickTitle="handleClickTitle"
|
||||
:createView="createView"
|
||||
:deleteView="deleteView"
|
||||
:openMenuOption="openMenuOption"
|
||||
:handleMenuSelect="handleMenuSelect" />
|
||||
<ViewContainer
|
||||
:views="views"
|
||||
:deleteView="deleteView"
|
||||
:handleClickTitle="handleClickTitle" />
|
||||
</miao-message-provider>
|
||||
</div>
|
||||
<!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
|
||||
<MiaoMask v-model:show="showModal" @click="showModal = false">
|
||||
@@ -206,198 +150,15 @@ onMounted(() => {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$controler-height: 25px;
|
||||
@use "styles/default.scss";
|
||||
|
||||
$controller-height: 25px;
|
||||
$tag-width: 170px;
|
||||
|
||||
.view {
|
||||
background-color: #ffffff;
|
||||
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-controller-menu {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
|
||||
.view-controller-menu-item {
|
||||
height: 100%;
|
||||
aspect-ratio: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
height: calc($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>
|
||||
@@ -0,0 +1,195 @@
|
||||
import useVirtualPages from '@/hooks/useVirtualPages'
|
||||
import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
|
||||
import { ShallowRef, shallowRef } from 'vue'
|
||||
import { alertTipType, usePluginHooksType } from '@/types/type'
|
||||
import VirtualPage, { VirtualPages } from './VirtualPage'
|
||||
import useRootVDirectory from '@/hooks/useRootVDirectory'
|
||||
|
||||
export enum PluginGroup {
|
||||
default = 'default',
|
||||
mainMenu = 'mainMenu',
|
||||
// 导入的时候会立即执行函数一次
|
||||
immediately = 'immediately'
|
||||
}
|
||||
|
||||
export interface registerComponentOption {
|
||||
key: string
|
||||
name: string
|
||||
icon?: any
|
||||
getComponent: () => Promise<any>
|
||||
group?: PluginGroup[]
|
||||
filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
|
||||
disable?: boolean
|
||||
exitConfirm?: boolean
|
||||
// 若为true，则只会创建一个页面，当存在已创建页面则会直接将VFile和VDir加到curr里面
|
||||
single?: boolean
|
||||
priority?: number
|
||||
}
|
||||
|
||||
export type Plugin = {
|
||||
// 用于显示的名字
|
||||
name: string
|
||||
// 代表插件的icon
|
||||
icon?: ShallowRef<any>
|
||||
// 是否禁用插件
|
||||
disable: boolean
|
||||
// 插件所属的group，用于区分插件使用的场合
|
||||
group: PluginGroup[]
|
||||
// 插件优先级
|
||||
priority: number
|
||||
// 判断在未禁用时是否可以使用这个组件
|
||||
// 使用组件即调用下面的func
|
||||
filter: (
|
||||
VDirectories: VirtualDirectory[],
|
||||
VFiles: VirtualFile[],
|
||||
VPages: VirtualPages
|
||||
) => boolean
|
||||
func: (
|
||||
VDirectories: VirtualDirectory[],
|
||||
VFiles: VirtualFile[],
|
||||
hooks: usePluginHooksType,
|
||||
...args: any[]
|
||||
) => void
|
||||
}
|
||||
|
||||
export default class PluginCenter {
|
||||
constructor(globalAlertTip: alertTipType) {
|
||||
this.pluginsMap = {}
|
||||
this.globalAlertTip = globalAlertTip
|
||||
}
|
||||
pluginsMap: {
|
||||
[key: string]: Plugin
|
||||
}
|
||||
|
||||
globalAlertTip: alertTipType
|
||||
|
||||
register(key: string, plugin: Plugin) {
|
||||
this.pluginsMap[key] = plugin
|
||||
if (plugin.group.includes(PluginGroup.immediately)) {
|
||||
this.usePlugin(key, [], [], this.usePluginHook)
|
||||
}
|
||||
}
|
||||
|
||||
deregister(key: string) {
|
||||
delete this.pluginsMap[key]
|
||||
}
|
||||
|
||||
/**
|
||||
* 便捷地注册一个组件为插件，触发时直接用新页面打开，页面名为key
|
||||
*/
|
||||
registerComponent(option: registerComponentOption): void {
|
||||
const {
|
||||
key,
|
||||
name,
|
||||
getComponent,
|
||||
icon,
|
||||
filter,
|
||||
group = [PluginGroup.default],
|
||||
disable = false,
|
||||
exitConfirm = false,
|
||||
single = false,
|
||||
priority = 0
|
||||
} = option
|
||||
let _component: any
|
||||
const views = useVirtualPages()
|
||||
this.register(key, {
|
||||
name,
|
||||
filter,
|
||||
icon: shallowRef(icon),
|
||||
group,
|
||||
disable,
|
||||
priority,
|
||||
func: async (
|
||||
VDirectories: VirtualDirectory[],
|
||||
VFiles: VirtualFile[]
|
||||
) => {
|
||||
if (filter(VDirectories, VFiles) === false) {
|
||||
return
|
||||
}
|
||||
|
||||
if (_component === undefined) {
|
||||
const setAlertTip = this.globalAlertTip(`加载 ${name} 插件中`)
|
||||
_component = await getComponent()
|
||||
setAlertTip &&
|
||||
setAlertTip(`加载 ${name} 插件完成`, {
|
||||
type: 'success',
|
||||
timeout: 2000
|
||||
})
|
||||
}
|
||||
const _findRes = views.find(_component) as VirtualPage[]
|
||||
if (single && _findRes.length !== 0) {
|
||||
const view = _findRes[0]
|
||||
view.currentFiles = [...view.currentFiles, ...VFiles]
|
||||
view.currentDirectories = [
|
||||
...view.currentDirectories,
|
||||
...VDirectories
|
||||
]
|
||||
} else {
|
||||
views.push(_component, key, VDirectories, VFiles, {
|
||||
VirtualPageOption: {
|
||||
exitConfirm,
|
||||
allowCopy: single === false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
getUsablePlugin(
|
||||
VDirectories: VirtualDirectory[],
|
||||
VFiles: VirtualFile[],
|
||||
option?: {
|
||||
group?: PluginGroup[]
|
||||
}
|
||||
) {
|
||||
const { group = [PluginGroup.default] } = option ?? {}
|
||||
const usableList = []
|
||||
const views = useVirtualPages()
|
||||
for (let key of Object.keys(this.pluginsMap)) {
|
||||
const _plugin = this.pluginsMap[key]
|
||||
if (
|
||||
!_plugin.disable &&
|
||||
_plugin.group.filter((v) => group.includes(v)).length > 0 &&
|
||||
_plugin.filter(VDirectories, VFiles, views)
|
||||
) {
|
||||
usableList.push(key)
|
||||
}
|
||||
}
|
||||
const res = usableList.map((key) => ({
|
||||
key,
|
||||
...this.pluginsMap[key]
|
||||
}))
|
||||
res.sort((a, b) => b.priority - a.priority)
|
||||
return res
|
||||
}
|
||||
|
||||
get usePluginHook(): usePluginHooksType {
|
||||
return {
|
||||
globalAlertTip: this.globalAlertTip,
|
||||
getViews: useVirtualPages,
|
||||
getPluginCenter: () => this,
|
||||
getRootVDirectory: () => useRootVDirectory()
|
||||
}
|
||||
}
|
||||
|
||||
usePlugin(
|
||||
key: string,
|
||||
VDirectories?: VirtualDirectory[],
|
||||
VFiles?: VirtualFile[],
|
||||
...args: any[]
|
||||
): void
|
||||
usePlugin(
|
||||
key: string,
|
||||
VDirectories?: VirtualDirectory[],
|
||||
VFiles?: VirtualFile[],
|
||||
...args: any[]
|
||||
) {
|
||||
this.pluginsMap[key].func(
|
||||
VDirectories ?? [],
|
||||
VFiles ?? [],
|
||||
this.usePluginHook,
|
||||
...args
|
||||
)
|
||||
}
|
||||
}
|
||||
+79
-75
@@ -1,98 +1,102 @@
|
||||
import generateId from "@/hooks/generateId";
|
||||
import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
|
||||
import VirtualDirectory from "./VirtualDirectory";
|
||||
import generateId from '@/utils/generateId'
|
||||
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
||||
import VirtualDirectory from './VirtualDirectory'
|
||||
|
||||
const miaoFetchApi = useMiaoFetchApi();
|
||||
const miaoFetchApi = useMiaoFetchApi()
|
||||
|
||||
export class UploadQueueItem {
|
||||
constructor(
|
||||
file: File,
|
||||
targetDirectory: VirtualDirectory,
|
||||
config?: {
|
||||
onSuccess?: () => void;
|
||||
onFailed?: () => void;
|
||||
onSuccess?: () => void
|
||||
onFailed?: () => void
|
||||
}
|
||||
) {
|
||||
this.file = file;
|
||||
this.targetDirectory = targetDirectory;
|
||||
this.uid = generateId();
|
||||
this.status = "waiting";
|
||||
this.process = 0;
|
||||
this.onSuccess = config && config.onSuccess;
|
||||
this.onFailed = config && config.onFailed;
|
||||
this.file = file
|
||||
this.targetDirectory = targetDirectory
|
||||
this.uid = generateId()
|
||||
this.status = 'waiting'
|
||||
this.process = 0
|
||||
this.onSuccess = config && config.onSuccess
|
||||
this.onFailed = config && config.onFailed
|
||||
}
|
||||
uid: number;
|
||||
file: File;
|
||||
targetDirectory: VirtualDirectory;
|
||||
status: "waiting" | "uploading" | "success" | "failed";
|
||||
process: number;
|
||||
failedReason: unknown | undefined;
|
||||
uid: number
|
||||
file: File
|
||||
targetDirectory: VirtualDirectory
|
||||
status: 'waiting' | 'uploading' | 'success' | 'failed'
|
||||
process: number
|
||||
failedReason: unknown | undefined
|
||||
|
||||
onSuccess?: () => void;
|
||||
onFailed?: () => void;
|
||||
onSuccess?: () => void
|
||||
onFailed?: () => void
|
||||
|
||||
_abort: (() => void | undefined) | undefined;
|
||||
_status: Promise<any> | undefined;
|
||||
_abort: (() => void | undefined) | undefined
|
||||
_status: Promise<any> | undefined
|
||||
|
||||
/**
|
||||
* 开始上传文件
|
||||
*/
|
||||
startUpload() {
|
||||
if (this.status === "uploading") {
|
||||
return;
|
||||
if (this.status === 'uploading') {
|
||||
return
|
||||
}
|
||||
const { abort, response } = miaoFetchApi.upload(this.file, this.targetDirectory, {
|
||||
onProcess: percent => {
|
||||
this.process = percent;
|
||||
const { abort, response } = miaoFetchApi.upload(
|
||||
this.file,
|
||||
this.targetDirectory,
|
||||
{
|
||||
onProcess: (percent) => {
|
||||
this.process = percent
|
||||
}
|
||||
});
|
||||
this._abort = abort;
|
||||
this._status = response;
|
||||
this.status = "uploading";
|
||||
}
|
||||
)
|
||||
this._abort = abort
|
||||
this._status = response
|
||||
this.status = 'uploading'
|
||||
response
|
||||
.then(() => {
|
||||
this.status = "success";
|
||||
this.onSuccess && this.onSuccess();
|
||||
this._abort = undefined;
|
||||
this._status = undefined;
|
||||
this.status = 'success'
|
||||
this.onSuccess && this.onSuccess()
|
||||
this._abort = undefined
|
||||
this._status = undefined
|
||||
})
|
||||
.catch((e) => {
|
||||
this.status = 'failed'
|
||||
this.failedReason = e
|
||||
this.onFailed && this.onFailed()
|
||||
})
|
||||
.catch(e => {
|
||||
this.status = "failed";
|
||||
this.failedReason = e;
|
||||
this.onFailed && this.onFailed();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 终止上传文件
|
||||
*/
|
||||
abortUpload() {
|
||||
this._abort && this._abort();
|
||||
this.status = "failed";
|
||||
this.failedReason = "abort";
|
||||
this._abort && this._abort()
|
||||
this.status = 'failed'
|
||||
this.failedReason = 'abort'
|
||||
}
|
||||
}
|
||||
|
||||
export default class UploadQueue {
|
||||
constructor() {
|
||||
this.uid = generateId();
|
||||
this.queue = [];
|
||||
this.mode = "serial";
|
||||
this.uid = generateId()
|
||||
this.queue = []
|
||||
this.mode = 'serial'
|
||||
}
|
||||
uid: number;
|
||||
queue: UploadQueueItem[];
|
||||
current: UploadQueueItem | undefined;
|
||||
uid: number
|
||||
queue: UploadQueueItem[]
|
||||
current: UploadQueueItem | undefined
|
||||
|
||||
// 未来再去实现，目前就是串行的
|
||||
// 好像也不用去实现
|
||||
mode: "serial" | "parallel";
|
||||
mode: 'serial' | 'parallel'
|
||||
get status() {
|
||||
for (let item of this.queue) {
|
||||
if (item.status === "uploading") {
|
||||
return "busy";
|
||||
if (item.status === 'uploading') {
|
||||
return 'busy'
|
||||
}
|
||||
}
|
||||
return "free";
|
||||
return 'free'
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -100,8 +104,8 @@ export default class UploadQueue {
|
||||
*/
|
||||
get nextUplpadItem() {
|
||||
for (let item of this.queue) {
|
||||
if (item.status === "waiting") {
|
||||
return item;
|
||||
if (item.status === 'waiting') {
|
||||
return item
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -110,11 +114,11 @@ export default class UploadQueue {
|
||||
* 开始串行的上传循环
|
||||
*/
|
||||
loop() {
|
||||
if (this.status === "busy") {
|
||||
return;
|
||||
if (this.status === 'busy') {
|
||||
return
|
||||
}
|
||||
if (this.nextUplpadItem) {
|
||||
this.nextUplpadItem.startUpload();
|
||||
this.nextUplpadItem.startUpload()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -132,34 +136,34 @@ export default class UploadQueue {
|
||||
/**
|
||||
* 每个文件上传完成以后都会触发一遍的回调函数
|
||||
*/
|
||||
onFinish?: () => void;
|
||||
onFinish?: () => void
|
||||
/**
|
||||
* 是否立即开始上传，若否则按队列顺序一个一个上传
|
||||
*/
|
||||
immediately?: boolean;
|
||||
immediately?: boolean
|
||||
}
|
||||
) {
|
||||
const onFinish = option?.onFinish;
|
||||
const immediately = option?.immediately ?? false;
|
||||
const uploadQueue = files.map(file => {
|
||||
const onFinish = option?.onFinish
|
||||
const immediately = option?.immediately ?? false
|
||||
const uploadQueue = files.map((file) => {
|
||||
return new UploadQueueItem(file, targetDirectory, {
|
||||
onSuccess: () => {
|
||||
this.loop();
|
||||
onFinish && onFinish();
|
||||
this.loop()
|
||||
onFinish && onFinish()
|
||||
},
|
||||
onFailed: () => {
|
||||
this.loop();
|
||||
this.loop()
|
||||
}
|
||||
});
|
||||
});
|
||||
this.queue.push(...uploadQueue);
|
||||
})
|
||||
})
|
||||
this.queue.push(...uploadQueue)
|
||||
if (!immediately) {
|
||||
this.loop();
|
||||
this.loop()
|
||||
} else {
|
||||
uploadQueue.forEach(item => {
|
||||
item.startUpload();
|
||||
});
|
||||
uploadQueue.forEach((item) => {
|
||||
item.startUpload()
|
||||
})
|
||||
}
|
||||
return uploadQueue;
|
||||
return uploadQueue
|
||||
}
|
||||
}
|
||||
+154
-63
@@ -1,52 +1,95 @@
|
||||
import generateId from "@/hooks/generateId";
|
||||
import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
|
||||
// import { debounce } from "lodash";
|
||||
import type { stats, file, directory } from "@/types/type.ts";
|
||||
import config from '@/config'
|
||||
import generateId from '@/utils/generateId'
|
||||
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
||||
import type { stats, file, directory } from '@/types/type.ts'
|
||||
import difference from 'lodash/difference'
|
||||
|
||||
const miaoFetchApi = useMiaoFetchApi();
|
||||
const miaoFetchApi = useMiaoFetchApi()
|
||||
|
||||
// const vDirectoryMap = new Map<string, VirtualDirectory>()
|
||||
// const vFileMap = new Map<string, VirtualFile>()
|
||||
|
||||
export interface Tree {
|
||||
name: string
|
||||
type: 'directory'
|
||||
path: string
|
||||
stats: stats
|
||||
files: {
|
||||
name: string
|
||||
type: 'file'
|
||||
size: number
|
||||
stats: stats
|
||||
url: string
|
||||
}[]
|
||||
directories: Tree[]
|
||||
}
|
||||
|
||||
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();
|
||||
this.name = info.name
|
||||
this.size = info.size
|
||||
this.stats = info.stats
|
||||
this.parent = parent
|
||||
this.type = 'file'
|
||||
this.id = generateId()
|
||||
// if (vFileMap.get(this.path) !== undefined) {
|
||||
// throw `${this.path} is already exist`
|
||||
// }
|
||||
// vFileMap.set(this.path, this)
|
||||
}
|
||||
name: string;
|
||||
type: "file";
|
||||
size: number;
|
||||
stats: stats;
|
||||
parent: VirtualDirectory;
|
||||
uid: number;
|
||||
name: string
|
||||
type: 'file'
|
||||
size: number
|
||||
stats: stats
|
||||
parent: VirtualDirectory
|
||||
id: number
|
||||
storage: { [key: string]: any } = {}
|
||||
get path() {
|
||||
return `${this.parent.path}${this.name}`;
|
||||
return `${this.parent.path}${this.name}`
|
||||
}
|
||||
|
||||
get url() {
|
||||
return `${config.api.get}${this.parent.path}${this.name}`
|
||||
}
|
||||
|
||||
// destroy() {
|
||||
// vFileMap.delete(this.path)
|
||||
// }
|
||||
}
|
||||
|
||||
class VirtualDirectory {
|
||||
/**
|
||||
* 除非为根节点，否则必须设置parent
|
||||
*/
|
||||
constructor(info: directory, parent?: VirtualDirectory) {
|
||||
this.name = info.name;
|
||||
this.type = "directory";
|
||||
this.stats = info.stats;
|
||||
this.parent = parent ?? undefined;
|
||||
this.uid = generateId();
|
||||
this.name = info.name
|
||||
this.stats = info.stats
|
||||
this.parent = parent ?? undefined
|
||||
this.id = generateId()
|
||||
// if (vDirectoryMap.get(this.path) !== undefined) {
|
||||
// throw `${this.path} is already exist`
|
||||
// }
|
||||
// vDirectoryMap.set(this.path, this)
|
||||
}
|
||||
// 文件夹名
|
||||
name: string;
|
||||
name: string
|
||||
// 子文件
|
||||
files?: VirtualFile[];
|
||||
files: VirtualFile[] = []
|
||||
// 子目录
|
||||
directorys?: VirtualDirectory[];
|
||||
directories: VirtualDirectory[] = []
|
||||
// 没啥意义，标注一下就是了
|
||||
type: "directory";
|
||||
type: 'directory' = 'directory'
|
||||
// 文件夹创建时间等杂项属性
|
||||
stats: stats;
|
||||
stats: stats
|
||||
// 父文件夹
|
||||
parent?: VirtualDirectory;
|
||||
parent?: VirtualDirectory
|
||||
|
||||
uid: number;
|
||||
_isUpdated: boolean = false
|
||||
|
||||
id: number
|
||||
|
||||
// 用来存储一些标记信息啥的
|
||||
storage: { [key: string]: any } = {}
|
||||
|
||||
/**
|
||||
* 获取相对于根目录的路径的层数
|
||||
@@ -54,7 +97,7 @@ class VirtualDirectory {
|
||||
* @returns {string}
|
||||
*/
|
||||
get layer(): number {
|
||||
return this.parent ? this.parent.layer + 1 : 0;
|
||||
return this.parent ? this.parent.layer + 1 : 0
|
||||
}
|
||||
/**
|
||||
* 相对于根目录的路径， 如: "/", "/123/321/"
|
||||
@@ -63,9 +106,9 @@ class VirtualDirectory {
|
||||
*/
|
||||
get path(): string {
|
||||
if (!this.parent) {
|
||||
return "/";
|
||||
return '/'
|
||||
}
|
||||
return `${this.parent.path}${this.name}/`;
|
||||
return `${this.parent.path}${this.name}/`
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -74,9 +117,16 @@ class VirtualDirectory {
|
||||
*/
|
||||
get getParents(): VirtualDirectory[] {
|
||||
if (!this.parent) {
|
||||
return [this];
|
||||
return [this]
|
||||
}
|
||||
return [...this.parent.getParents, this];
|
||||
return [...this.parent.getParents, this]
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前文件夹是否已经请求过至少一次数据
|
||||
*/
|
||||
get isUpdated() {
|
||||
return this._isUpdated
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -86,59 +136,100 @@ class VirtualDirectory {
|
||||
*/
|
||||
getParent(layer: number): VirtualDirectory {
|
||||
if (layer <= 0 || !this.parent) {
|
||||
return this;
|
||||
return this
|
||||
}
|
||||
return this.parent.getParent(layer - 1);
|
||||
return this.parent.getParent(layer - 1)
|
||||
}
|
||||
|
||||
get tree(): Tree {
|
||||
return {
|
||||
name: this.name,
|
||||
type: this.type,
|
||||
path: this.path,
|
||||
stats: this.stats,
|
||||
files:
|
||||
this.files?.map((v) => ({
|
||||
name: v.name,
|
||||
type: v.type,
|
||||
size: v.size,
|
||||
stats: v.stats,
|
||||
url: v.url
|
||||
})) ?? [],
|
||||
directories: this.directories?.map((v) => v.tree) ?? []
|
||||
}
|
||||
}
|
||||
|
||||
// 时间复杂度大爆炸
|
||||
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);
|
||||
this._isUpdated = true
|
||||
|
||||
const itemNames: string[] = content.map((v) => v.name)
|
||||
// 删去远程端已不存在的文件与文件夹
|
||||
const _delete = (target: (VirtualFile | VirtualDirectory)[]) => {
|
||||
let index = 0;
|
||||
let index = 0
|
||||
while (index < target.length) {
|
||||
if (!itemNames.includes(target[index].name)) {
|
||||
target.splice(index, 1);
|
||||
target.splice(index, 1)
|
||||
} else {
|
||||
index += 1;
|
||||
index += 1
|
||||
}
|
||||
}
|
||||
};
|
||||
_delete(this.files);
|
||||
_delete(this.directorys);
|
||||
}
|
||||
const _addFile = (item: file) => {
|
||||
const nvf =
|
||||
// vFileMap.get(`${this.path}${item.name}`) ??
|
||||
new VirtualFile(item, this)
|
||||
this.files.push(nvf)
|
||||
}
|
||||
const _addDirectory = (item: directory) => {
|
||||
const nvd =
|
||||
// vDirectoryMap.get(`${this.path}${item.name}/`) ??
|
||||
new VirtualDirectory(item, this)
|
||||
this.directories.push(nvd)
|
||||
}
|
||||
const newFileNames: string[] = difference(
|
||||
content.filter((v) => v.type === 'file').map((v) => v.name),
|
||||
this.files.map((v) => v.name)
|
||||
)
|
||||
const newDirectoryNames: string[] = difference(
|
||||
content.filter((v) => v.type === 'directory').map((v) => v.name),
|
||||
this.directories.map((v) => v.name)
|
||||
)
|
||||
_delete(this.files)
|
||||
_delete(this.directories)
|
||||
// 加入新的文件与文件夹
|
||||
for (let item of content) {
|
||||
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));
|
||||
}
|
||||
for (let item of content.filter((v) => newFileNames.includes(v.name))) {
|
||||
_addFile(item as file)
|
||||
}
|
||||
for (let item of content.filter((v) =>
|
||||
newDirectoryNames.includes(v.name)
|
||||
)) {
|
||||
_addDirectory(item as directory)
|
||||
}
|
||||
}
|
||||
|
||||
hasChild(item: VirtualDirectory | VirtualFile): boolean {
|
||||
if (item.type === "directory") {
|
||||
return this.directorys?.includes(item) ?? false;
|
||||
if (item.type === 'directory') {
|
||||
return this.directories?.includes(item) ?? false
|
||||
} else {
|
||||
return this.files?.includes(item) ?? false;
|
||||
return this.files?.includes(item) ?? false
|
||||
}
|
||||
}
|
||||
|
||||
// destroy() {
|
||||
// for(const item of [...this.files, ...this.directories]){
|
||||
// item.destroy()
|
||||
// }
|
||||
// vDirectoryMap.delete(this.path)
|
||||
// }
|
||||
|
||||
/**
|
||||
* 调用后重新向远端拉取文件夹信息并进行更新
|
||||
* @returns {void}
|
||||
*/
|
||||
async update(): Promise<void> {
|
||||
const data: (file | directory)[] = await miaoFetchApi.get(this);
|
||||
this.updateContent(data);
|
||||
const data: (file | directory)[] = await miaoFetchApi.get(this)
|
||||
this.updateContent(data)
|
||||
}
|
||||
}
|
||||
export default VirtualDirectory;
|
||||
export default VirtualDirectory
|
||||
+148
-31
@@ -1,63 +1,180 @@
|
||||
import { shallowRef } from "vue";
|
||||
import VirtualDirectory, { VirtualFile } from "./VirtualDirectory";
|
||||
import generateId from "@/hooks/generateId";
|
||||
import { Component, reactive, shallowRef } from 'vue'
|
||||
import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
|
||||
import generateId from '@/utils/generateId'
|
||||
|
||||
export interface VirtualPageOption {
|
||||
exitConfirm?: boolean
|
||||
allowCopy?: boolean
|
||||
}
|
||||
|
||||
export interface ViewsPushOption {
|
||||
index?: number
|
||||
VirtualPageOption?: VirtualPageOption
|
||||
}
|
||||
|
||||
const getRandomWebSafeColor = (() => {
|
||||
const webSafeColors = ["#009900", "#999900", "#009999", "#990099", "#0000ee"];
|
||||
let counter = 0;
|
||||
const webSafeColors = ['#009900', '#999900', '#009999', '#990099', '#0000ee']
|
||||
let counter = 0
|
||||
return () => {
|
||||
const color = webSafeColors[counter % webSafeColors.length];
|
||||
counter += 1;
|
||||
return color;
|
||||
};
|
||||
})();
|
||||
const color = webSafeColors[counter % webSafeColors.length]
|
||||
counter += 1
|
||||
return color
|
||||
}
|
||||
})()
|
||||
|
||||
export default class VirtualPage {
|
||||
constructor(component: any, initObjects?:{ directorys?: VirtualDirectory[], files?: VirtualFile[]}) {
|
||||
this.component = shallowRef(component);
|
||||
this.currentDirectorys = initObjects?.directorys ?? [];
|
||||
this.currentFiles = initObjects?.files ?? [];
|
||||
this.visible = true;
|
||||
this.uid = generateId();
|
||||
this.refreshKey = Math.random();
|
||||
this.color = getRandomWebSafeColor();
|
||||
constructor(
|
||||
component: Component,
|
||||
initObjects: {
|
||||
name: string
|
||||
directories?: VirtualDirectory[]
|
||||
files?: VirtualFile[]
|
||||
option?: VirtualPageOption
|
||||
}
|
||||
) {
|
||||
this.name = initObjects?.name
|
||||
this.component = shallowRef(component)
|
||||
this.currentDirectories = initObjects?.directories ?? []
|
||||
this.currentFiles = initObjects?.files ?? []
|
||||
this.visible = true
|
||||
this.id = generateId()
|
||||
this.refreshKey = Math.random()
|
||||
this.color = getRandomWebSafeColor()
|
||||
this.exitConfirm = initObjects?.option?.exitConfirm ?? false
|
||||
this.allowCopy = initObjects?.option?.allowCopy ?? true
|
||||
}
|
||||
// 页面使用的组件
|
||||
component: any;
|
||||
component: Component
|
||||
// 页面名
|
||||
name: string
|
||||
// 是否可见
|
||||
visible: boolean;
|
||||
visible: boolean
|
||||
// 当前正在使用的文件夹
|
||||
currentDirectorys: VirtualDirectory[];
|
||||
currentDirectories: VirtualDirectory[]
|
||||
// 当前正在使用的文件
|
||||
currentFiles: VirtualFile[];
|
||||
currentFiles: VirtualFile[]
|
||||
// 区分每一个页面的唯一id
|
||||
uid: number;
|
||||
id: number
|
||||
// 当refreshKey改变时需要刷新页面，目前还没接入刷新
|
||||
refreshKey: number;
|
||||
refreshKey: number
|
||||
// 为了区分，每个虚拟页面都会分配一个color，这个color会体现在tab上
|
||||
color: string;
|
||||
color: string
|
||||
// 用于展示的title
|
||||
_title?: string;
|
||||
_title?: string
|
||||
// 关闭时是否需要确认（未实现）
|
||||
exitConfirm: boolean
|
||||
// 是否允许复制页面
|
||||
allowCopy: boolean
|
||||
|
||||
get title() {
|
||||
if (this._title) {
|
||||
return this._title;
|
||||
return this._title
|
||||
}
|
||||
return this.currentDirectorys[0].name;
|
||||
return (
|
||||
this?.currentDirectories[0]?.name ??
|
||||
this?.currentFiles[0]?.name ??
|
||||
'未命名标签'
|
||||
)
|
||||
}
|
||||
|
||||
setTitle(title: string) {
|
||||
this._title = title;
|
||||
this._title = title
|
||||
}
|
||||
|
||||
// 切换显示状态
|
||||
switchShow() {
|
||||
this.visible = !this.visible;
|
||||
this.visible = !this.visible
|
||||
}
|
||||
|
||||
// 刷新，不过好像没有用得到的时候吧
|
||||
// 事实上也不应该用得到，因为更新应该是响应式的
|
||||
refresh() {
|
||||
this.refreshKey = Math.random();
|
||||
this.refreshKey = Math.random()
|
||||
}
|
||||
}
|
||||
|
||||
export class VirtualPages {
|
||||
constructor() {
|
||||
this._views = reactive<VirtualPage[]>([])
|
||||
}
|
||||
_views: VirtualPage[]
|
||||
|
||||
get length() {
|
||||
return this._views.length
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询一个页面位于_views中的次序
|
||||
* @param {any} id 要查询的页面的id
|
||||
* @returns {any}
|
||||
*/
|
||||
getIndex(id: number) {
|
||||
for (let i in this._views) {
|
||||
if (this._views[i].id === id) {
|
||||
return parseInt(i)
|
||||
}
|
||||
}
|
||||
return -1
|
||||
}
|
||||
/**
|
||||
* 根据id得到view
|
||||
* @param {any} id 要查询的页面的id
|
||||
*/
|
||||
getView(id: number) {
|
||||
for (let v of this._views) {
|
||||
if (v.id === id) {
|
||||
return v
|
||||
}
|
||||
}
|
||||
return undefined
|
||||
}
|
||||
|
||||
/**
|
||||
* 推入一个新的页面
|
||||
*/
|
||||
push(
|
||||
component: Component,
|
||||
name: string,
|
||||
currentDirectories?: VirtualDirectory[],
|
||||
currentFiles?: VirtualFile[],
|
||||
option?: ViewsPushOption
|
||||
) {
|
||||
const { index = this.length, VirtualPageOption } = option ?? {}
|
||||
this._views.splice(
|
||||
index,
|
||||
0,
|
||||
reactive<VirtualPage>(
|
||||
new VirtualPage(component, {
|
||||
name,
|
||||
directories: [...(currentDirectories ?? [])],
|
||||
files: [...(currentFiles ?? [])],
|
||||
option: VirtualPageOption
|
||||
})
|
||||
)
|
||||
)
|
||||
}
|
||||
/**
|
||||
* 根据次序删除一个页面
|
||||
*/
|
||||
deleteView(index: number) {
|
||||
this._views.splice(index, 1)
|
||||
}
|
||||
|
||||
/**
|
||||
* 返回第一个使用此组件的页面
|
||||
*/
|
||||
find(component: Component): VirtualPage[]
|
||||
/**
|
||||
* 通过页面名查找
|
||||
*/
|
||||
find(name: string): VirtualPage[]
|
||||
|
||||
find(input: unknown) {
|
||||
// console.log(this)
|
||||
if (typeof input === 'string') {
|
||||
return this._views.filter((v) => v.component.name === input)
|
||||
} else {
|
||||
return this._views.filter((v) => v.component === input)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
views: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
deleteView: {
|
||||
type: Function,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="view-container">
|
||||
<div
|
||||
class="view-container-item"
|
||||
v-for="(view, index) of props.views._views"
|
||||
:class="!view.visible ? 'view-container-item-hidden' : ''"
|
||||
:key="view.id">
|
||||
<component
|
||||
:is="view.component"
|
||||
v-model:current-directories="view.currentDirectories"
|
||||
v-model:current-files="view.currentFiles"
|
||||
:id="view.id"
|
||||
:color="view.color"
|
||||
:view="view"
|
||||
:views="props.views"
|
||||
@exit="props.deleteView(index)"></component>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$controller-height: 25px;
|
||||
|
||||
.view-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: calc(100% - $controller-height);
|
||||
overflow-y: hidden;
|
||||
overflow-x: overlay;
|
||||
|
||||
.view-container-item {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
min-width: 180px;
|
||||
opacity: 1;
|
||||
transition:
|
||||
flex 0.25s ease,
|
||||
opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.view-container-item-hidden {
|
||||
flex: 0;
|
||||
min-width: 0px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
// 滚动条轨道
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
// 小滑块
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #e0e0e0;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: #999999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,233 @@
|
||||
<script setup lang="ts">
|
||||
import { NIcon, NScrollbar, NDropdown } from 'naive-ui'
|
||||
import {
|
||||
EyeOffOutline,
|
||||
EyeOutline,
|
||||
CloseOutline,
|
||||
CopyOutline,
|
||||
EllipsisVertical
|
||||
} from '@vicons/ionicons5'
|
||||
import type { DropdownMixedOption } from 'naive-ui/es/dropdown/src/interface'
|
||||
import type { VirtualPages } from '@/class/VirtualPage'
|
||||
import type VirtualDirectory from '@/class/VirtualDirectory'
|
||||
import type { VirtualFile } from '@/class/VirtualDirectory'
|
||||
|
||||
const props = defineProps<{
|
||||
views: VirtualPages
|
||||
handleClickTitle: (index: number) => void
|
||||
createView: (
|
||||
component: any,
|
||||
name: string,
|
||||
currentDirectories?: VirtualDirectory[],
|
||||
currentFiles?: VirtualFile[],
|
||||
index?: number
|
||||
) => void
|
||||
deleteView: (index: number) => void
|
||||
openMenuOption: DropdownMixedOption[]
|
||||
handleMenuSelect: (key: string) => any
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="view-controller">
|
||||
<n-scrollbar x-scrollable>
|
||||
<div class="tabs-container">
|
||||
<transition-group name="tab">
|
||||
<div
|
||||
class="tab"
|
||||
v-for="(view, index) of props.views._views"
|
||||
:key="view.id">
|
||||
<span
|
||||
class="tab-title"
|
||||
:title="view.title"
|
||||
@click="props.handleClickTitle(index)">
|
||||
{{
|
||||
view.title.length > 5 && 0
|
||||
? `${view.title.substring(0, 5)}...`
|
||||
: view.title
|
||||
}}
|
||||
</span>
|
||||
<div class="tab-control">
|
||||
<div
|
||||
class="tab-point"
|
||||
:style="{ backgroundColor: view.color }"></div>
|
||||
<n-icon
|
||||
class="tag-control-icon icon"
|
||||
@click="view.switchShow()">
|
||||
<EyeOutline v-show="view.visible" class="icon-inner" />
|
||||
<EyeOffOutline
|
||||
v-show="!view.visible"
|
||||
class="icon-inner" />
|
||||
</n-icon>
|
||||
<n-icon
|
||||
class="tag-control-icon icon"
|
||||
@click="
|
||||
props.createView(
|
||||
view.component,
|
||||
view.name,
|
||||
view.currentDirectories,
|
||||
view.currentFiles,
|
||||
index + 1
|
||||
)
|
||||
"
|
||||
v-if="view.allowCopy">
|
||||
<CopyOutline />
|
||||
</n-icon>
|
||||
<n-icon
|
||||
class="tag-control-icon icon"
|
||||
@click="props.deleteView(index)">
|
||||
<CloseOutline class="icon-inner" />
|
||||
</n-icon>
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</n-scrollbar>
|
||||
<div class="view-controller-menu">
|
||||
<div class="view-controller-menu-item">
|
||||
<n-dropdown
|
||||
trigger="click"
|
||||
:options="props.openMenuOption"
|
||||
@select="props.handleMenuSelect">
|
||||
<n-icon class="icon">
|
||||
<EllipsisVertical class="icon-inner" />
|
||||
</n-icon>
|
||||
</n-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$controller-height: 25px;
|
||||
$tag-width: 170px;
|
||||
|
||||
.view-controller {
|
||||
display: flex;
|
||||
height: $controller-height;
|
||||
width: 100%;
|
||||
background-color: #dadada;
|
||||
|
||||
.tabs-container {
|
||||
display: flex;
|
||||
margin-left: 5px;
|
||||
flex: 1;
|
||||
|
||||
.tab {
|
||||
position: relative;
|
||||
width: $tag-width;
|
||||
height: $controller-height;
|
||||
margin: 0 5px;
|
||||
display: flex;
|
||||
border-radius: 5px 5px 0 0;
|
||||
align-items: center;
|
||||
|
||||
.tab-title {
|
||||
margin-left: 4px;
|
||||
width: 90px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
span {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-point {
|
||||
height: 5px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 66px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.tab-control {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tab-control-icon:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child)::after {
|
||||
content: '';
|
||||
height: calc($controller-height * 0.6);
|
||||
width: 1px;
|
||||
border-right: 1px solid black;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view-controller-menu {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
|
||||
.view-controller-menu-item {
|
||||
height: 100%;
|
||||
aspect-ratio: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
height: calc($controller-height * 0.6);
|
||||
width: 1px;
|
||||
border-right: 1px solid black;
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: calc($controller-height * 0.7);
|
||||
width: calc($controller-height * 0.7);
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
background-color: rgba(128, 128, 128, 0);
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(128, 128, 128, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// transition动画相关
|
||||
.view-controller {
|
||||
.tabs-container {
|
||||
.tab-move,
|
||||
.tab-enter-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.tab-leave-active {
|
||||
opacity: 0;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.tab-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
|
||||
.tab-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div class="miao-message-provider" ref="rootRef">
|
||||
<slot></slot>
|
||||
<transition-group
|
||||
name="message-fade"
|
||||
tag="div"
|
||||
class="miao-message-provider-container">
|
||||
<div
|
||||
class="miao-message"
|
||||
v-for="msg in messageList"
|
||||
:key="msg.id"
|
||||
:style="{ maxWidth: maxMessageWidth + 'px' }">
|
||||
<n-icon class="miao-message-item" size="18" :color="msg.iconColor">
|
||||
<component :is="msg.icon"></component>
|
||||
</n-icon>
|
||||
<div class="miao-message-item miao-message-item-content">
|
||||
{{ msg.content }}
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import generateId from '@/utils/generateId'
|
||||
import { NIcon } from 'naive-ui'
|
||||
import { computed, onMounted, ref, shallowReactive } from 'vue'
|
||||
import {
|
||||
InformationCircle,
|
||||
CheckmarkCircle,
|
||||
CloseCircle
|
||||
} from '@vicons/ionicons5'
|
||||
import { AlertTipMessageOptions } from '@/types/type'
|
||||
|
||||
interface Message {
|
||||
icon: any
|
||||
timer: any
|
||||
iconColor: string
|
||||
content: string
|
||||
}
|
||||
|
||||
const iconMap = {
|
||||
info: { icon: InformationCircle, color: 'blue' },
|
||||
success: { icon: CheckmarkCircle, color: 'green' },
|
||||
error: { icon: CloseCircle, color: 'red' }
|
||||
}
|
||||
|
||||
const messageMap = shallowReactive<Record<string, Message | undefined>>({})
|
||||
const rootRef = ref<HTMLDivElement>()
|
||||
const maxMessageWidth = ref<number>(-1)
|
||||
|
||||
const messageList = computed(() => {
|
||||
return Object.keys(messageMap).map((v) => ({
|
||||
id: v,
|
||||
...messageMap[v]
|
||||
}))
|
||||
})
|
||||
const alertTip = (content: string, options?: AlertTipMessageOptions) => {
|
||||
let timer: any
|
||||
const { timeout = 0, type = 'info', id = generateId() } = options ?? {}
|
||||
if (timeout > 0) {
|
||||
messageMap[id]?.timer && clearTimeout(messageMap[id]?.timer)
|
||||
timer = setTimeout(() => {
|
||||
delete messageMap[id]
|
||||
}, timeout)
|
||||
}
|
||||
messageMap[id] = {
|
||||
icon: iconMap[type].icon,
|
||||
iconColor: iconMap[type].color,
|
||||
content,
|
||||
timer
|
||||
}
|
||||
return (newContent: string, newOptions?: AlertTipMessageOptions) => {
|
||||
newOptions = newOptions ?? {}
|
||||
newOptions.id = id
|
||||
alertTip(newContent, newOptions)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
// const set = message('test', { timeout: 5000 })
|
||||
// setTimeout(() => {
|
||||
// set('miao', { type: 'success' })
|
||||
// }, 1000);
|
||||
const observer = new ResizeObserver((entries) => {
|
||||
for (let entry of entries) {
|
||||
maxMessageWidth.value = entry.contentRect.width * 0.8
|
||||
}
|
||||
})
|
||||
if (rootRef.value) {
|
||||
observer.observe(rootRef.value)
|
||||
}
|
||||
})
|
||||
|
||||
defineExpose({ alertTip })
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.miao-message-provider {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.miao-message-provider-container {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
left: 50%;
|
||||
top: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: visible;
|
||||
z-index: 70582140539943419;
|
||||
|
||||
.miao-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: max-content;
|
||||
background-color: rgb(249, 249, 249);
|
||||
padding: 5px 10px;
|
||||
background-color: rgb(255 255 255);
|
||||
box-shadow:
|
||||
0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
||||
0 6px 16px 0 rgba(0, 0, 0, 0.08),
|
||||
0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 5px;
|
||||
user-select: none;
|
||||
margin-top: 10px;
|
||||
|
||||
.miao-message-item {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.miao-message-item-content {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-fade-move,
|
||||
.message-fade-enter-active,
|
||||
.message-fade-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.message-fade-enter-from,
|
||||
.message-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
.message-fade-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,19 +1,29 @@
|
||||
<!-- 基于naiveui的下拉菜单实现的自定义下拉菜单 -->
|
||||
<!-- 支持长按和右键呼出下拉菜单 -->
|
||||
<template>
|
||||
<div class="main" @contextmenu="handleContextMenu" @mouseleave="handleMainMouseLeave" @touchstart="handleTouchStart"
|
||||
@touchend="handleTouchEnd">
|
||||
<div
|
||||
class="main"
|
||||
@contextmenu="handleContextMenu"
|
||||
@mouseleave="handleMainMouseLeave">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<n-dropdown placement="bottom-start" trigger="manual" :x="x" :y="y" :options="props.options"
|
||||
:show="showContextMenu > 0" :on-clickoutside="onClickoutside" @select="handleSelect" @mouseleave="
|
||||
showContextMenu -= 1" @mouseenter="showContextMenu += 1" />
|
||||
<n-dropdown
|
||||
placement="bottom-start"
|
||||
trigger="manual"
|
||||
:x="x"
|
||||
:y="y"
|
||||
:options="props.options"
|
||||
:show="showContextMenu > 0"
|
||||
:on-clickoutside="onClickoutside"
|
||||
@select="handleSelect"
|
||||
@mouseleave="showContextMenu -= 1"
|
||||
@mouseenter="showContextMenu += 1" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NDropdown } from 'naive-ui/es/dropdown';
|
||||
import { DropdownOption } from 'naive-ui/es/dropdown';
|
||||
import { nextTick, ref } from 'vue';
|
||||
import { NDropdown } from 'naive-ui/es/dropdown'
|
||||
import { DropdownOption } from 'naive-ui/es/dropdown'
|
||||
import { nextTick, ref } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
options: DropdownOption[]
|
||||
@@ -28,7 +38,7 @@ const x = ref(0)
|
||||
const y = ref(0)
|
||||
const showContextMenu = ref(0)
|
||||
// 长按计时器
|
||||
let timer_touch: string | number | NodeJS.Timeout | undefined
|
||||
// let timer_touch: string | number | NodeJS.Timeout | undefined
|
||||
|
||||
const onClickoutside = async () => {
|
||||
showContextMenu.value = 0
|
||||
@@ -58,26 +68,25 @@ const handleContextMenu = (e: MouseEvent) => {
|
||||
})
|
||||
}
|
||||
|
||||
const handleTouchStart = (e: TouchEvent) => {
|
||||
if(props.touchTimeOut === undefined) {
|
||||
return
|
||||
}
|
||||
timer_touch ?? clearTimeout(timer_touch)
|
||||
timer_touch = setTimeout(() => {
|
||||
showContextMenu.value = 1
|
||||
x.value = e.targetTouches[0].clientX
|
||||
y.value = e.targetTouches[0].clientY
|
||||
}, props.touchTimeOut)
|
||||
}
|
||||
// const handleTouchStart = (e: TouchEvent) => {
|
||||
// if(props.touchTimeOut === undefined) {
|
||||
// return
|
||||
// }
|
||||
// timer_touch ?? clearTimeout(timer_touch)
|
||||
// timer_touch = setTimeout(() => {
|
||||
// showContextMenu.value = 1
|
||||
// x.value = e.targetTouches[0].clientX
|
||||
// y.value = e.targetTouches[0].clientY
|
||||
// }, props.touchTimeOut)
|
||||
// }
|
||||
|
||||
const handleTouchEnd = () => {
|
||||
if(timer_touch) {
|
||||
clearTimeout(timer_touch)
|
||||
timer_touch = undefined
|
||||
}
|
||||
|
||||
}
|
||||
// const handleTouchEnd = () => {
|
||||
// if(timer_touch) {
|
||||
// clearTimeout(timer_touch)
|
||||
// timer_touch = undefined
|
||||
// }
|
||||
|
||||
// }
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -1,315 +0,0 @@
|
||||
<template>
|
||||
<div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
|
||||
<miaoContextMenu :options="dropDownOptions" :touch-time-out="500" @select="handleDropdownSelect">
|
||||
<div class="item-main" :class="props.selected ? 'item-main-selected' : ''" ref="mainRef">
|
||||
<div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
|
||||
<Icon class="item-main-icon" v-show="clientWidth > 250"></Icon>
|
||||
<div class="item-main-info">
|
||||
<div class="item-main-info-name">
|
||||
<Icon class="item-main-info-name-icon" v-show="clientWidth <= 250"></Icon>
|
||||
<n-ellipsis style="max-width: 140px;">{{ name }}</n-ellipsis>
|
||||
</div>
|
||||
<div class="item-main-info-date" v-if="time">
|
||||
{{ time }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 菜单现在通过右键/长按呼出 -->
|
||||
<!-- <n-dropdown trigger="click" :options="dropDownOptions" @select="handleDropdownSelect">
|
||||
<div class="item-main-option" @click="(e) => e.stopPropagation()">
|
||||
<EllipsisVertical class="item-main-option-icon" />
|
||||
</div>
|
||||
</n-dropdown> -->
|
||||
</div>
|
||||
</miaoContextMenu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
||||
import miaoContextMenu from '../miaoContextMenu.vue'
|
||||
import {
|
||||
DocumentText,
|
||||
FileTray,
|
||||
Help,
|
||||
Image,
|
||||
LogoChrome,
|
||||
LogoCss3,
|
||||
LogoJavascript,
|
||||
LogoVue,
|
||||
PlayCircle,
|
||||
Disc
|
||||
} from '@vicons/ionicons5'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import dateFormatter from '@/hooks/dateFormatter'
|
||||
import { NEllipsis } from 'naive-ui'
|
||||
// import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
||||
|
||||
// const miaoFetchApi = useMiaoFetchApi()
|
||||
|
||||
const props = defineProps<{
|
||||
item: VirtualDirectory | VirtualFile
|
||||
name?: string
|
||||
color: string
|
||||
selected: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
download: []
|
||||
delete: []
|
||||
rename: []
|
||||
dragStart: [event: DragEvent, item: VirtualDirectory | VirtualFile]
|
||||
onSelected: []
|
||||
}>()
|
||||
|
||||
const itemType = ref<'file' | 'directory'>(props.item.type)
|
||||
|
||||
const mainRef = ref<HTMLDivElement>()
|
||||
|
||||
// 使用ResizeObserver实现
|
||||
const clientWidth = ref<number>(666)
|
||||
|
||||
const name = props.name ?? props.item.name
|
||||
|
||||
const time = computed(() => {
|
||||
return dateFormatter(
|
||||
new Date(props.item.stats.mtimeMs),
|
||||
'yyyy-MM-dd hh:mm:ss'
|
||||
)
|
||||
})
|
||||
|
||||
const dropDownOptions = computed(() => {
|
||||
const options = [
|
||||
{
|
||||
label: '重命名',
|
||||
key: 'rename'
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
key: 'delete'
|
||||
},
|
||||
]
|
||||
if (itemType.value === 'file') {
|
||||
options.push(
|
||||
...[
|
||||
{
|
||||
label: '下载',
|
||||
key: 'download'
|
||||
}
|
||||
]
|
||||
)
|
||||
}
|
||||
if (props.selected === false) {
|
||||
options.push(
|
||||
...[
|
||||
{
|
||||
label: '多选:选择',
|
||||
key: 'select'
|
||||
}
|
||||
]
|
||||
)
|
||||
} else {
|
||||
options.push(
|
||||
...[
|
||||
{
|
||||
label: '多选:取消',
|
||||
key: 'select'
|
||||
}
|
||||
]
|
||||
)
|
||||
}
|
||||
return options
|
||||
})
|
||||
|
||||
// 是不是可以直接在这里面实现？
|
||||
const handleDropdownSelect = (key: string) => {
|
||||
if (key === 'rename') {
|
||||
emit('rename')
|
||||
} else if (key === 'download') {
|
||||
emit('download')
|
||||
} else if (key === 'delete') {
|
||||
emit('delete')
|
||||
} else if (key === 'select') {
|
||||
emit('onSelected')
|
||||
}
|
||||
}
|
||||
|
||||
const Icon = computed(() => {
|
||||
try {
|
||||
if (props.item.type === 'directory') {
|
||||
return FileTray
|
||||
} else if (props.item.type === 'file') {
|
||||
const aft = props.item.name.split('.').at(-1)?.toLowerCase()
|
||||
if (!aft) {
|
||||
throw 1
|
||||
} else if (
|
||||
['txt', 'doc', 'docs', 'docx', 'xls', 'xlsx'].includes(aft)
|
||||
) {
|
||||
return DocumentText
|
||||
} else if (
|
||||
['mp3', 'wav', 'ape', 'acc', 'ogg', 'flac'].includes(aft)
|
||||
) {
|
||||
return Disc
|
||||
} else if (
|
||||
[
|
||||
'.xbm',
|
||||
'.tif',
|
||||
'pjp',
|
||||
'.svgz',
|
||||
'jpg',
|
||||
'jpeg',
|
||||
'ico',
|
||||
'tiff',
|
||||
'.gif',
|
||||
'svg',
|
||||
'.jfif',
|
||||
'.webp',
|
||||
'.png',
|
||||
'.bmp',
|
||||
'pjpeg',
|
||||
'.avif'
|
||||
].includes(aft)
|
||||
) {
|
||||
return Image
|
||||
} else if (['mp4', 'm2v', 'mkv'].includes(aft)) {
|
||||
return PlayCircle
|
||||
} else if (['js', 'jsx', 'ts', 'tsx'].includes(aft)) {
|
||||
return LogoJavascript
|
||||
} else if (['html'].includes(aft)) {
|
||||
return LogoChrome
|
||||
} else if (['css', 'scss', 'less'].includes(aft)) {
|
||||
return LogoCss3
|
||||
} else if (['vue'].includes(aft)) {
|
||||
return LogoVue
|
||||
}
|
||||
return DocumentText
|
||||
}
|
||||
} catch {
|
||||
return Help
|
||||
}
|
||||
})
|
||||
|
||||
const itemRef = ref()
|
||||
|
||||
const handleDragStart = (event: DragEvent) => {
|
||||
emit('dragStart', event, props.item)
|
||||
// dataBus.set('dragData', [props.item])
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const observer = new ResizeObserver(entries => {
|
||||
for (let entry of entries) {
|
||||
clientWidth.value = entry.contentRect.width;
|
||||
}
|
||||
});
|
||||
if (mainRef.value) {
|
||||
observer.observe(mainRef.value);
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.miao-item {
|
||||
cursor: pointer;
|
||||
width: calc(100% - 20px);
|
||||
min-width: 170px;
|
||||
// aspect-ratio: 66/9;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 10px 10px;
|
||||
|
||||
.item-main {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 95%;
|
||||
background-color: rgb(255, 255, 255);
|
||||
border-radius: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
.item-main-front {
|
||||
height: 100%;
|
||||
width: 10px;
|
||||
border-radius: 7px 0 0 7px;
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.item-main-icon {
|
||||
margin-left: 10px;
|
||||
height: 80%;
|
||||
color: #00403e;
|
||||
transition: color 0.15s ease-out;
|
||||
}
|
||||
|
||||
.item-main-info {
|
||||
margin-left: 10px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&-name {
|
||||
position: relative;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 3px;
|
||||
|
||||
&-icon {
|
||||
color: #00403e;
|
||||
width: 20px;
|
||||
margin-right: 5px;
|
||||
transition: color 0.15s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
&-date {
|
||||
user-select: none;
|
||||
font-size: small;
|
||||
}
|
||||
}
|
||||
|
||||
.item-main-option {
|
||||
height: 100%;
|
||||
width: 20px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
border-radius: 0 7px 7px 0;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
transition: background-color 0.3s;
|
||||
|
||||
.item-main-option-icon {
|
||||
color: #000;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: #8b8b8b;
|
||||
|
||||
.item-main-option-icon {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: #d2d2d2;
|
||||
}
|
||||
}
|
||||
.item-main-selected {
|
||||
background-color: rgba(0, 128, 207, 0.32);
|
||||
&:hover {
|
||||
background-color: rgba(0, 128, 207, 0.64);;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div ref="divRef" @dragstart="onDs" :draggable="isDraggable">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
// import Sortable from 'sortablejs'
|
||||
|
||||
const props = defineProps<{
|
||||
isDraggable: boolean
|
||||
}>()
|
||||
props
|
||||
const emit = defineEmits<{
|
||||
onDragStart: [e: DragEvent]
|
||||
}>()
|
||||
|
||||
const divRef = ref<HTMLDivElement>()
|
||||
|
||||
const onDs = (e: DragEvent) => {
|
||||
emit('onDragStart', e)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
divRef?.value?.addEventListener('dragstart', function (ev) {
|
||||
var img = new Image()
|
||||
img.src =
|
||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath /%3E%3C/svg%3E"
|
||||
ev?.dataTransfer?.setDragImage(img, 0, 0)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -16,6 +16,13 @@ import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
||||
import config from '@/config'
|
||||
import useDataBus from '@/hooks/useDataBus'
|
||||
|
||||
const props = defineProps({
|
||||
disable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const dataBus = useDataBus()
|
||||
|
||||
const { uploadSizeLimit } = config
|
||||
@@ -61,10 +68,25 @@ const removeDirectory = async (files: File[]) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
const check = (event: DragEvent) => {
|
||||
return (
|
||||
[
|
||||
...(event.dataTransfer?.types?.filter((v) => v === 'Files') ?? []),
|
||||
...(dataBus.get('dragData_vFiles') ?? []),
|
||||
...(dataBus.get('dragData_vDirectory') ?? [])
|
||||
].length !== 0
|
||||
)
|
||||
}
|
||||
|
||||
const handleDragOver = async (event: DragEvent) => {
|
||||
showMask.value += 1
|
||||
if (props.disable || check(event) === false) {
|
||||
return
|
||||
}
|
||||
event.preventDefault()
|
||||
if (showMask.value === 1) {
|
||||
return
|
||||
}
|
||||
showMask.value = 1
|
||||
}
|
||||
|
||||
const handleDragLeave = async () => {
|
||||
@@ -72,6 +94,9 @@ const handleDragLeave = async () => {
|
||||
}
|
||||
|
||||
const handleDrop = async (event: DragEvent) => {
|
||||
if (props.disable || check(event) === false) {
|
||||
return
|
||||
}
|
||||
showMask.value = 0
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
|
||||
@@ -0,0 +1,132 @@
|
||||
<!-- 只适合用于渲染过程较为复杂的组件，不然可能得不偿失
|
||||
这么泛用的组件，性能差点也能理解 -->
|
||||
<template>
|
||||
<div
|
||||
class="miao-lazy"
|
||||
ref="miaoLazyRoot"
|
||||
:style="
|
||||
!show
|
||||
? {
|
||||
minHeight:
|
||||
_autoHeight !== undefined ? _autoHeight : props.minHeight,
|
||||
minWidth,
|
||||
margin
|
||||
}
|
||||
: {}
|
||||
">
|
||||
<slot v-if="show" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
// disable: {
|
||||
// type: Boolean,
|
||||
// default: false,
|
||||
// },
|
||||
disableLazy: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 仅在内容未加载时生效，用于占位
|
||||
minHeight: {
|
||||
type: String,
|
||||
default: 'none'
|
||||
},
|
||||
minWidth: {
|
||||
type: String,
|
||||
default: 'none'
|
||||
},
|
||||
margin: {
|
||||
type: String,
|
||||
default: 'none'
|
||||
},
|
||||
autoHeight: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const miaoLazyRoot = ref<HTMLDivElement>()
|
||||
|
||||
const _autoHeight = ref<string>()
|
||||
|
||||
const show = ref<boolean>(props.disableLazy)
|
||||
|
||||
const isVisible = (dom: HTMLDivElement) => {
|
||||
const offset = dom.getBoundingClientRect().top
|
||||
return offset > 0 && offset < 2000
|
||||
}
|
||||
|
||||
const { showSlot, hideSlot, clearTimer } = (() => {
|
||||
let timer: any
|
||||
let timerInterval: any
|
||||
const clearTimer = () => {
|
||||
timer && clearTimeout(timer)
|
||||
timerInterval && clearInterval(timerInterval)
|
||||
timer = undefined
|
||||
timerInterval = undefined
|
||||
}
|
||||
const hideSlot = () => {
|
||||
clearTimer()
|
||||
if (props.autoHeight) {
|
||||
_autoHeight.value = `${miaoLazyRoot.value?.clientHeight}px`
|
||||
}
|
||||
show.value = false
|
||||
}
|
||||
const showSlot = () => {
|
||||
if (show.value === true) {
|
||||
return
|
||||
}
|
||||
clearTimer()
|
||||
// timer = setTimeout(() => {
|
||||
if (!miaoLazyRoot.value || isVisible(miaoLazyRoot.value) === false) {
|
||||
return
|
||||
}
|
||||
show.value = true
|
||||
timerInterval = setInterval(() => {
|
||||
if (show.value === false || miaoLazyRoot.value === undefined) {
|
||||
return
|
||||
}
|
||||
if (isVisible(miaoLazyRoot.value) === false) {
|
||||
hideSlot()
|
||||
}
|
||||
}, 1000)
|
||||
// if (props.autoHeight) {
|
||||
// nextTick(() => {
|
||||
// console.log(miaoLazyRoot.value?.clientHeight)
|
||||
// _autoHeight.value = `${miaoLazyRoot.value?.clientHeight}px`
|
||||
// })
|
||||
// }
|
||||
}
|
||||
return { showSlot, hideSlot, clearTimer }
|
||||
})()
|
||||
|
||||
onMounted(() => {
|
||||
if (show.value === false) {
|
||||
let options = {
|
||||
threshold: 0
|
||||
}
|
||||
|
||||
let observer: IntersectionObserver | undefined = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0].isIntersecting) {
|
||||
showSlot()
|
||||
// miaoLazyRoot.value && observer?.unobserve(miaoLazyRoot.value)
|
||||
// observer = undefined
|
||||
} else {
|
||||
hideSlot()
|
||||
}
|
||||
},
|
||||
options
|
||||
)
|
||||
miaoLazyRoot.value && observer.observe(miaoLazyRoot.value)
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearTimer()
|
||||
})
|
||||
</script>
|
||||
@@ -6,12 +6,14 @@
|
||||
</transition>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { ref } from 'vue'
|
||||
|
||||
const maskBodyRef = ref<HTMLDivElement>()
|
||||
|
||||
const showMask = defineModel<boolean | number>('show', { default: false, required: true })
|
||||
|
||||
const showMask = defineModel<boolean | number>('show', {
|
||||
default: false,
|
||||
required: true
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.mask-body {
|
||||
|
||||
@@ -2,34 +2,53 @@
|
||||
<miao-mask v-model:show="showMask">
|
||||
<n-card class="popup-card" :title="popupConfig?.title" size="medium">
|
||||
{{ popupConfig?.content }}
|
||||
<n-input class="popup-input" v-model:value="inputValue" type="text" v-bind="popupConfig?.inputProps"
|
||||
<n-input
|
||||
class="popup-input"
|
||||
v-model:value="inputValue"
|
||||
type="text"
|
||||
v-bind="popupConfig?.inputProps"
|
||||
passively-activated
|
||||
autofocus
|
||||
v-if="popupConfig?.inputProps" />
|
||||
<div class="popup-button-container">
|
||||
<n-button class="popup-button-container-button" v-for="option in popupConfig?.options" :key="option.label"
|
||||
:type="option.type" @click="_resolve && _resolve(option.key)">{{ option.label }}</n-button>
|
||||
<n-button
|
||||
class="popup-button-container-button"
|
||||
v-for="option in popupConfig?.options"
|
||||
:key="option.label"
|
||||
:type="option.type"
|
||||
@click="_resolve && _resolve(option.key)">
|
||||
{{ option.label }}
|
||||
</n-button>
|
||||
</div>
|
||||
</n-card>
|
||||
</miao-mask>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick } from "vue";
|
||||
import { NCard, NInput, NButton } from "naive-ui";
|
||||
import miaoMask from "./miaoMask.vue";
|
||||
import { InputProps } from "naive-ui";
|
||||
import { ref, nextTick } from 'vue'
|
||||
import { NCard, NInput, NButton } from 'naive-ui'
|
||||
import miaoMask from './miaoMask.vue'
|
||||
import { InputProps } from 'naive-ui'
|
||||
|
||||
const showMask = ref(false);
|
||||
const inputValue = ref<string>("");
|
||||
const showMask = ref(false)
|
||||
const inputValue = ref<string>('')
|
||||
const _resolve = ref()
|
||||
|
||||
type popupConfigType = {
|
||||
title: string
|
||||
content?: string
|
||||
inputValue?: string,
|
||||
inputValue?: string
|
||||
inputProps?: InputProps
|
||||
options: {
|
||||
label: string
|
||||
key: unknown
|
||||
type: 'default' | 'tertiary' | 'primary' | 'success' | 'info' | 'warning' | 'error'
|
||||
type:
|
||||
| 'default'
|
||||
| 'tertiary'
|
||||
| 'primary'
|
||||
| 'success'
|
||||
| 'info'
|
||||
| 'warning'
|
||||
| 'error'
|
||||
}[]
|
||||
}
|
||||
|
||||
@@ -43,7 +62,7 @@ const popup = async (config: popupConfigType) => {
|
||||
_resolve.value = resolve
|
||||
})
|
||||
const text = inputValue.value
|
||||
showMask.value = false;
|
||||
showMask.value = false
|
||||
nextTick(() => {
|
||||
inputValue.value = ''
|
||||
_resolve.value = undefined
|
||||
@@ -51,10 +70,10 @@ const popup = async (config: popupConfigType) => {
|
||||
return {
|
||||
text,
|
||||
key
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ popup });
|
||||
defineExpose({ popup })
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
+5
-1
@@ -1,4 +1,8 @@
|
||||
const baseUrl = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
|
||||
const baseUrl =
|
||||
window.location.protocol +
|
||||
'//' +
|
||||
window.location.hostname +
|
||||
(window.location.port ? ':' + window.location.port : '')
|
||||
|
||||
export default {
|
||||
baseUrl,
|
||||
|
||||
@@ -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
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { alertTipType } from '@/types/type'
|
||||
import initPlugin from './init/initPlugin'
|
||||
|
||||
export default async function init(globalAlertTip: alertTipType) {
|
||||
await initPlugin(globalAlertTip)
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import usePluginCenter, { initPluginCenter } from '@/hooks/usePluginCenter'
|
||||
import { Plugin, registerComponentOption } from '@/class/PluginCenter'
|
||||
import { alertTipType, PluginExportType } from '@/types/type'
|
||||
|
||||
const initPlugin = async (globalAlertTip: alertTipType) => {
|
||||
initPluginCenter(globalAlertTip)
|
||||
const modulesFiles = import.meta.glob('@/plugins/**/export*.ts', {
|
||||
eager: true
|
||||
})
|
||||
const pluginCenter = usePluginCenter()
|
||||
for (let pluginConfig of Object.values(modulesFiles)) {
|
||||
const _config = pluginConfig as {
|
||||
default: registerComponentOption | Plugin
|
||||
type: PluginExportType
|
||||
key?: string
|
||||
}
|
||||
const { type, key } = _config
|
||||
if (type === PluginExportType.component) {
|
||||
pluginCenter.registerComponent(
|
||||
_config.default as registerComponentOption
|
||||
)
|
||||
} else if (type === PluginExportType.default) {
|
||||
pluginCenter.register(key as string, _config.default as Plugin)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default initPlugin
|
||||
@@ -1,47 +0,0 @@
|
||||
export const filePicker = (() => {
|
||||
let _resolve: ((files: File[]) => void) | undefined;
|
||||
return (option?: { accept?: "string"; multiple: boolean }) => {
|
||||
if (_resolve) {
|
||||
_resolve([]);
|
||||
_resolve = undefined;
|
||||
}
|
||||
return new Promise<File[]>(resolve => {
|
||||
const inpEle = document.createElement("input");
|
||||
inpEle.id = `__file_${Math.ceil(Math.random() * 100000000)}`;
|
||||
inpEle.type = "file";
|
||||
inpEle.style.display = "none";
|
||||
_resolve = resolve;
|
||||
// 文件类型限制
|
||||
// inpEle.accept="image/*"
|
||||
option?.accept && (inpEle.accept = option?.accept);
|
||||
// 多选限制
|
||||
option?.multiple && (inpEle.multiple = option?.multiple);
|
||||
// inpEle.addEventListener("change", event => fn.call(inpEle, event, inpEle.files), { once: true });
|
||||
inpEle.addEventListener(
|
||||
"change",
|
||||
() => {
|
||||
if (!inpEle.files) {
|
||||
return;
|
||||
}
|
||||
const files: File[] = [];
|
||||
let i = 0;
|
||||
while (i < inpEle.files?.length) {
|
||||
const _file = inpEle?.files?.item(i);
|
||||
if (_file !== null) {
|
||||
files.push(_file);
|
||||
}
|
||||
i += 1;
|
||||
}
|
||||
resolve(files);
|
||||
_resolve = undefined
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
inpEle.click();
|
||||
});
|
||||
};
|
||||
})();
|
||||
|
||||
export default {
|
||||
filePicker
|
||||
};
|
||||
+12
-8
@@ -1,8 +1,8 @@
|
||||
import { reactive } from "vue";
|
||||
import { reactive } from 'vue'
|
||||
|
||||
let dataStorage: {
|
||||
[key: string | number]: any
|
||||
};
|
||||
}
|
||||
|
||||
export default function useDataBus() {
|
||||
if (dataStorage === undefined) {
|
||||
@@ -10,13 +10,17 @@ export default function useDataBus() {
|
||||
}
|
||||
return {
|
||||
set(key: string | number, value: any) {
|
||||
dataStorage[key] = value;
|
||||
return value;
|
||||
dataStorage[key] = value
|
||||
return value
|
||||
},
|
||||
pop(key: string | number) {
|
||||
const value = dataStorage[key];
|
||||
dataStorage[key] = undefined;
|
||||
return value;
|
||||
const value = dataStorage[key]
|
||||
dataStorage[key] = undefined
|
||||
return value
|
||||
},
|
||||
get(key: string | number) {
|
||||
const value = dataStorage[key]
|
||||
return value
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -8,17 +8,20 @@ import {
|
||||
queryOption,
|
||||
renameOption,
|
||||
cutOption,
|
||||
mkdirOption
|
||||
mkdirOption,
|
||||
getFileOption
|
||||
} from '@/types/fetch'
|
||||
import Config from '@/config'
|
||||
import axios, { AxiosRequestConfig } from 'axios'
|
||||
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
|
||||
|
||||
export const useMiaoFetch = (option?: miaoFetchConfig) => {
|
||||
const retry = option?.retry ?? 0
|
||||
const controller = new AbortController()
|
||||
let flag = true
|
||||
return {
|
||||
miaoFetch: async (config: AxiosRequestConfig<any>) => {
|
||||
miaoFetch: async (
|
||||
config: AxiosRequestConfig<any>
|
||||
): Promise<AxiosResponse<any, any>> => {
|
||||
let counter = 0
|
||||
let response: any
|
||||
let errList = []
|
||||
@@ -67,6 +70,40 @@ const miaoFetchApi = {
|
||||
return response.data
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取对应文件下的数据
|
||||
*/
|
||||
getFile(vFile: VirtualFile, option?: getFileOption) {
|
||||
// const { baseUrl, api } = Config
|
||||
const url = vFile.url
|
||||
const retry = option?.retry ?? 0
|
||||
const axiosOption = option?.axiosOption ?? {}
|
||||
|
||||
const { miaoFetch, abortMiaoFetch: abort } = useMiaoFetch({
|
||||
retry
|
||||
})
|
||||
const response = miaoFetch({
|
||||
url,
|
||||
responseType: 'arraybuffer',
|
||||
onDownloadProgress(progressEvent) {
|
||||
option &&
|
||||
option.onProcess &&
|
||||
option.onProcess(
|
||||
progressEvent.total
|
||||
? progressEvent.loaded / progressEvent.total
|
||||
: -1
|
||||
)
|
||||
},
|
||||
...axiosOption
|
||||
})
|
||||
return {
|
||||
response: new Promise<Uint8Array>(async (resolve) => {
|
||||
resolve(new Uint8Array((await response).data))
|
||||
}),
|
||||
abort
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 上传单个文件到对应文件夹, 后续要将data类型改成buffer以支持分片上传
|
||||
* 正常上传文件请使用uploadQueue
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
import PluginCenter from '@/class/PluginCenter'
|
||||
import { alertTipType } from '@/types/type'
|
||||
import { reactive } from 'vue'
|
||||
|
||||
let pluginCenter: PluginCenter
|
||||
|
||||
export const initPluginCenter = (globalAlertTip: alertTipType) => {
|
||||
if (!pluginCenter) {
|
||||
pluginCenter = reactive(new PluginCenter(globalAlertTip))
|
||||
}
|
||||
}
|
||||
|
||||
export default function usePluginCenter() {
|
||||
return pluginCenter
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import VirtualDirectory from '@/class/VirtualDirectory'
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const root = reactive(
|
||||
new VirtualDirectory({
|
||||
name: '根目录',
|
||||
stats: {
|
||||
atimeMs: 0,
|
||||
birthtimeMs: 0,
|
||||
ctimeMs: 0,
|
||||
mtimeMs: 0
|
||||
}
|
||||
})
|
||||
)
|
||||
export default function useRootVDirectory() {
|
||||
return root
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import UploadQueue from "@/class/UploadQueue";
|
||||
import { reactive } from "vue";
|
||||
import UploadQueue from '@/class/UploadQueue'
|
||||
import { reactive } from 'vue'
|
||||
|
||||
let uploadQueue: UploadQueue
|
||||
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import VirtualPage from "@/class/VirtualPage"
|
||||
import { Reactive, reactive } from "vue"
|
||||
import { VirtualPages } from '@/class/VirtualPage'
|
||||
import { Reactive, reactive } from 'vue'
|
||||
|
||||
let views: Reactive<VirtualPage[]>
|
||||
let views: Reactive<VirtualPages>
|
||||
|
||||
export default function useViretualPages(){
|
||||
export default function useVirtualPages() {
|
||||
if (views === undefined) {
|
||||
views = reactive<VirtualPage[]>([])
|
||||
// views = reactive<VirtualPage[]>([])
|
||||
views = reactive(new VirtualPages())
|
||||
}
|
||||
return views
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import 'drag-drop-touch'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
@@ -0,0 +1,16 @@
|
||||
import { VirtualFile } from '@/class/VirtualDirectory'
|
||||
import config from '@/config'
|
||||
import { usePluginHooksType } from '@/types/type'
|
||||
import copy2Clipboard from 'copy-to-clipboard'
|
||||
|
||||
const copy = (__: any, vFiles: VirtualFile[], hooks: usePluginHooksType) => {
|
||||
const { globalAlertTip } = hooks
|
||||
const vFile = vFiles[0]
|
||||
console.log(vFile.url)
|
||||
copy2Clipboard(`${config.baseUrl}${vFile.url}`)
|
||||
globalAlertTip(`${vFile.name}的链接已复制至剪切板`, {
|
||||
type: 'info',
|
||||
timeout: 2000
|
||||
})
|
||||
}
|
||||
export default copy
|
||||
@@ -0,0 +1,29 @@
|
||||
import { Plugin, PluginGroup } from '@/class/PluginCenter'
|
||||
import Copy from './copy'
|
||||
import { CopyOutline } from '@vicons/ionicons5'
|
||||
import { PluginExportType } from '@/types/type'
|
||||
import { shallowRef } from 'vue'
|
||||
|
||||
const pluginConfig: Plugin = {
|
||||
name: '复制链接',
|
||||
icon: shallowRef(CopyOutline),
|
||||
filter: (vDirs, vFiles) => {
|
||||
if (vDirs.length !== 0) {
|
||||
return false
|
||||
}
|
||||
if (vFiles.length !== 1) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
disable: false,
|
||||
group: [PluginGroup.default],
|
||||
func: Copy,
|
||||
priority: -1
|
||||
}
|
||||
|
||||
export default pluginConfig
|
||||
|
||||
export const type = PluginExportType.default
|
||||
|
||||
export const key = 'miaoCopy'
|
||||
@@ -0,0 +1,23 @@
|
||||
import { Plugin, PluginGroup } from '@/class/PluginCenter'
|
||||
import fullScreen from './fullScreen'
|
||||
import { ExpandOutline } from '@vicons/ionicons5'
|
||||
import { PluginExportType } from '@/types/type'
|
||||
import { shallowRef } from 'vue'
|
||||
|
||||
const pluginConfig: Plugin = {
|
||||
name: '全屏',
|
||||
icon: shallowRef(ExpandOutline),
|
||||
filter: () => {
|
||||
return true
|
||||
},
|
||||
disable: false,
|
||||
group: [PluginGroup.mainMenu],
|
||||
func: fullScreen,
|
||||
priority: -1
|
||||
}
|
||||
|
||||
export default pluginConfig
|
||||
|
||||
export const type = PluginExportType.default
|
||||
|
||||
export const key = 'fullScreen'
|
||||
@@ -0,0 +1,4 @@
|
||||
const fullScreen = () => {
|
||||
document.body.requestFullscreen()
|
||||
}
|
||||
export default fullScreen
|
||||
@@ -0,0 +1,49 @@
|
||||
import { registerComponentOption } from '@/class/PluginCenter'
|
||||
import { CodeOutline } from '@vicons/ionicons5'
|
||||
import { PluginExportType } from '@/types/type'
|
||||
|
||||
const pluginConfig: registerComponentOption = {
|
||||
key: 'miaoCodeMirror',
|
||||
name: '代码编辑',
|
||||
icon: CodeOutline,
|
||||
getComponent: async () =>
|
||||
(await import('@/plugins/miaoCodeMirror/miaoCodeMirror.vue')).default,
|
||||
filter: (vDirs, vFiles) => {
|
||||
if (vDirs.length !== 0) {
|
||||
return false
|
||||
}
|
||||
if (vFiles.length !== 1) {
|
||||
return false
|
||||
}
|
||||
for (let end of [
|
||||
'js',
|
||||
'ts',
|
||||
'jsx',
|
||||
'tsx',
|
||||
'py',
|
||||
'html',
|
||||
'css',
|
||||
'scss',
|
||||
'go',
|
||||
'json',
|
||||
'md',
|
||||
'yaml',
|
||||
'txt',
|
||||
'xml',
|
||||
'vue',
|
||||
'srt',
|
||||
'vtt',
|
||||
'ass',
|
||||
'ssa'
|
||||
]) {
|
||||
if (vFiles[0].name.endsWith(end)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
export default pluginConfig
|
||||
|
||||
export const type = PluginExportType.component
|
||||
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<miao-message-provider ref="miaoMessage">
|
||||
<div
|
||||
class="codemirror-container"
|
||||
ref="rootRef"
|
||||
:class="`codemirror-container-${theme}`">
|
||||
<div class="codemirror-container-top">
|
||||
<div
|
||||
class="codemirror-container-btn codemirror-container-btn-save"
|
||||
@click="handleSave">
|
||||
保存
|
||||
</div>
|
||||
<div
|
||||
class="codemirror-container-btn codemirror-container-btn-save"
|
||||
@click="handleReset">
|
||||
恢复到上次保存
|
||||
</div>
|
||||
</div>
|
||||
<div class="codemirror-container-main">
|
||||
<NScrollbar style="max-height: calc(100%)">
|
||||
<codemirror v-model="codeData" :extensions="extensions" />
|
||||
</NScrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</miao-message-provider>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import miaoMessageProvider from '@/components/miaoAlertTipProvider.vue'
|
||||
import { VirtualFile } from '@/class/VirtualDirectory'
|
||||
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { Codemirror } from 'vue-codemirror'
|
||||
import { NScrollbar } from 'naive-ui'
|
||||
|
||||
const miaoFetchApi = useMiaoFetchApi()
|
||||
|
||||
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
||||
required: true
|
||||
})
|
||||
|
||||
const decoder = new TextDecoder('utf-8')
|
||||
|
||||
const miaoMessage = ref<InstanceType<typeof miaoMessageProvider>>()
|
||||
const vFile = ref<VirtualFile>()
|
||||
const rootRef = ref<HTMLDivElement>()
|
||||
// const _key = ref(Math.random())
|
||||
const codeData = ref<string>()
|
||||
// 第一次点击保存时自动备份data，暂时懒得做
|
||||
const bakData = ref<string>()
|
||||
const extensions = ref<any[]>([])
|
||||
const theme = ref<'light' | 'dark'>('light')
|
||||
|
||||
const handleSave = async () => {
|
||||
if (bakData.value === codeData.value || !vFile.value) {
|
||||
miaoMessage.value?.alertTip('内容未改动', {
|
||||
timeout: 3000,
|
||||
type: 'info'
|
||||
})
|
||||
return
|
||||
}
|
||||
const parentDir = vFile.value?.parent
|
||||
const file_bak = new File(
|
||||
[new Blob([bakData.value ?? ''])],
|
||||
`${vFile.value?.name}.bak`
|
||||
)
|
||||
const file = new File([new Blob([codeData.value ?? ''])], vFile.value.name)
|
||||
bakData.value = codeData.value
|
||||
const { response } = miaoFetchApi.upload(file, parentDir)
|
||||
false && miaoFetchApi.upload(file_bak, parentDir)
|
||||
await response
|
||||
miaoMessage.value?.alertTip('保存成功', {
|
||||
timeout: 5000,
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
|
||||
const handleReset = async () => {
|
||||
codeData.value = bakData.value
|
||||
}
|
||||
|
||||
// const switchTheme = async () => {
|
||||
// if (!vFile.value) {
|
||||
// return
|
||||
// }
|
||||
// theme.value = theme.value === 'dark' ? 'light' : 'dark'
|
||||
// extensions.value = [
|
||||
// ...(await getLangExtensions(vFile.value?.name)),
|
||||
// // theme.value === 'dark' ?
|
||||
// ]
|
||||
// _key.value = Math.random()
|
||||
// }
|
||||
|
||||
const getLangExtensions = async (fileName: string) => {
|
||||
const ext = fileName.split('.').pop()?.toLocaleLowerCase()
|
||||
switch (ext) {
|
||||
case 'js':
|
||||
case 'jsx':
|
||||
case 'ts':
|
||||
case 'tsx':
|
||||
const { javascript } = await import('@codemirror/lang-javascript')
|
||||
return [
|
||||
javascript({
|
||||
jsx: ext.substring(2, 3) === 'x',
|
||||
typescript: ext.substring(0, 2) === 'js'
|
||||
})
|
||||
]
|
||||
break
|
||||
case 'css':
|
||||
case 'scss':
|
||||
const { sass } = await import('@codemirror/lang-sass')
|
||||
return [sass()]
|
||||
break
|
||||
case 'html':
|
||||
const { html } = await import('@codemirror/lang-html')
|
||||
return [html()]
|
||||
break
|
||||
case 'py':
|
||||
const { python } = await import('@codemirror/lang-python')
|
||||
return [python()]
|
||||
break
|
||||
case 'go':
|
||||
const { go } = await import('@codemirror/lang-go')
|
||||
return [go()]
|
||||
break
|
||||
case 'json':
|
||||
const { json } = await import('@codemirror/lang-json')
|
||||
return [json()]
|
||||
break
|
||||
case 'md':
|
||||
const { markdown } = await import('@codemirror/lang-markdown')
|
||||
return [markdown()]
|
||||
break
|
||||
case 'yaml':
|
||||
const { yaml } = await import('@codemirror/lang-yaml')
|
||||
return [yaml()]
|
||||
break
|
||||
case 'vue':
|
||||
const { vue } = await import('@codemirror/lang-vue')
|
||||
return [vue()]
|
||||
break
|
||||
case 'xml':
|
||||
const { xml } = await import('@codemirror/lang-xml')
|
||||
return [xml()]
|
||||
break
|
||||
default:
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
vFile.value = currentFiles.value[0]
|
||||
const fileName = currentFiles.value[0].name
|
||||
codeData.value = decoder.decode(
|
||||
await miaoFetchApi.getFile(currentFiles.value[0], {
|
||||
axiosOption: {
|
||||
headers: {
|
||||
'Cache-Control': 'no-cache'
|
||||
}
|
||||
}
|
||||
}).response
|
||||
)
|
||||
bakData.value = codeData.value
|
||||
extensions.value = [...(await getLangExtensions(fileName))]
|
||||
|
||||
rootRef.value?.addEventListener('keydown', (event) => {
|
||||
if (event.ctrlKey && event.key === 's') {
|
||||
event.preventDefault()
|
||||
handleSave()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.codemirror-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: hidden;
|
||||
|
||||
.codemirror-container-top {
|
||||
height: 25px;
|
||||
display: flex;
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
|
||||
.codemirror-container-btn {
|
||||
height: 25px;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background-color: none;
|
||||
transition: background-color 0.25s;
|
||||
|
||||
&:hover {
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
}
|
||||
|
||||
.codemirror-container-main {
|
||||
height: calc(100% - 25px);
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.codemirror-container-dark {
|
||||
background-color: rgb(30, 30, 30);
|
||||
}
|
||||
|
||||
.codemirror-container-light {
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,24 @@
|
||||
// @ts-nocheck
|
||||
import { registerComponentOption } from '@/class/PluginCenter'
|
||||
import { PluginExportType } from '@/types/type'
|
||||
|
||||
const pluginConfig: registerComponentOption = {
|
||||
key: 'miaoCrypto',
|
||||
name: '文件加密',
|
||||
getComponent: async () => (await import('./miaoCrypto.vue')).default,
|
||||
filter: (vDirs, vFiles) => {
|
||||
return true
|
||||
if (vDirs.length !== 0) {
|
||||
return false
|
||||
}
|
||||
if (vFiles.length !== 1) {
|
||||
return false
|
||||
}
|
||||
return vFiles[0].name.endsWith('txt')
|
||||
},
|
||||
disable: true
|
||||
}
|
||||
|
||||
export default pluginConfig
|
||||
|
||||
export const type = PluginExportType.component
|
||||
@@ -0,0 +1,19 @@
|
||||
import aesJs from 'aes-js'
|
||||
import aes_worker from '../workers/aes-worker?worker'
|
||||
|
||||
/**
|
||||
* 使用worker进行aes加密
|
||||
* @param {any} key:string 须保证长度正确
|
||||
* @param {any} data:Uint8Array
|
||||
* @returns {Uint8Array}
|
||||
*/
|
||||
export default (key: string, data: Uint8Array) => {
|
||||
const key_u8i = aesJs.utils.utf8.toBytes(key)
|
||||
return new Promise<Uint8Array>((resolve) => {
|
||||
const aesWorker = new aes_worker()
|
||||
aesWorker.onmessage = (event) => {
|
||||
resolve(event.data)
|
||||
}
|
||||
aesWorker.postMessage({ data, key: key_u8i })
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<miao-drop-handler @on-virtual-files="handleDropVirtualFiles">
|
||||
<div class="miaoCrypto-container">
|
||||
<div class="miaoCrypto-container-encrypt miaoCrypto-container-item">
|
||||
<n-scrollbar style="max-height: 100%">
|
||||
<div
|
||||
v-for="item of workItemList"
|
||||
:key="item.id"
|
||||
class="miaoCrypto-container-item-item">
|
||||
<div
|
||||
class="miaoCrypto-container-item-percentBar"
|
||||
:style="{
|
||||
zIndex: 0,
|
||||
width:
|
||||
item.getBufferProgress !== -1
|
||||
? `${item.getBufferProgress * 100}%`
|
||||
: `0%`,
|
||||
backgroundColor: 'blue'
|
||||
}"></div>
|
||||
<div
|
||||
class="miaoCrypto-container-item-percentBar"
|
||||
:style="{
|
||||
zIndex: 1,
|
||||
width: item.status === 'finish' ? `100%` : `0%`,
|
||||
backgroundColor: 'green'
|
||||
}"></div>
|
||||
<span class="miaoCrypto-container-item-content">
|
||||
{{ item.name }}{{ item.status }}
|
||||
</span>
|
||||
</div>
|
||||
</n-scrollbar>
|
||||
</div>
|
||||
<!-- <div class="miaoCrypto-container-decrypt miaoCrypto-container-item"></div> -->
|
||||
</div>
|
||||
</miao-drop-handler>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NScrollbar } from 'naive-ui'
|
||||
import { onUnmounted, ref, shallowReactive } from 'vue'
|
||||
import aes_ctr_worker from './hooks/AES'
|
||||
import { VirtualFile } from '@/class/VirtualDirectory'
|
||||
import miaoDropHandler from '@/components/miaoDropHandler.vue'
|
||||
import { reactive } from 'vue'
|
||||
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
||||
import { onMounted } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const miaoFetchApi = useMiaoFetchApi()
|
||||
|
||||
interface workItem {
|
||||
id: number
|
||||
status: 'wait' | 'process' | 'finish' | 'error'
|
||||
buffer?: Uint8Array
|
||||
getBuffer: () => Promise<Uint8Array>
|
||||
getBufferProgress: number
|
||||
getBufferAbort?: () => void
|
||||
isGettingBuffer: boolean
|
||||
name: string
|
||||
}
|
||||
|
||||
class Work {
|
||||
constructor(func: (key: string, data: Uint8Array) => Promise<Uint8Array>) {
|
||||
this.queue = []
|
||||
this.func = func
|
||||
this.abortLoop = false
|
||||
}
|
||||
queue: workItem[]
|
||||
func: (key: string, data: Uint8Array) => Promise<Uint8Array>
|
||||
abortLoop: boolean
|
||||
get isBusy() {
|
||||
return this.queue.filter((v) => v.status === 'process').length > 0
|
||||
}
|
||||
async funcLoop() {
|
||||
if (this.isBusy || this.abortLoop) {
|
||||
return
|
||||
}
|
||||
const currentItem = this.queue.filter((v) => v.status === 'wait')[0]
|
||||
if (currentItem === undefined || currentItem.buffer === undefined) {
|
||||
return
|
||||
}
|
||||
currentItem.status = 'process'
|
||||
try {
|
||||
currentItem.buffer = await this.func(key.value, currentItem.buffer)
|
||||
currentItem.status = 'finish'
|
||||
} catch (e) {
|
||||
currentItem.status = 'error'
|
||||
}
|
||||
this.funcLoop()
|
||||
}
|
||||
async getBufferLoop() {
|
||||
const _list = this.queue.filter(
|
||||
(v) => v.isGettingBuffer === false && v.buffer === undefined
|
||||
)
|
||||
if (_list.length === 0 || this.abortLoop) {
|
||||
return
|
||||
}
|
||||
const item = _list[0]
|
||||
item.isGettingBuffer = true
|
||||
try {
|
||||
item.buffer = await item.getBuffer()
|
||||
} catch (e) {
|
||||
item.status = 'error'
|
||||
}
|
||||
item.isGettingBuffer = false
|
||||
this.funcLoop()
|
||||
this.getBufferLoop()
|
||||
}
|
||||
push(itemList: workItem[]) {
|
||||
this.queue.push(...itemList)
|
||||
this.getBufferLoop()
|
||||
}
|
||||
pushVFiles(itemList: VirtualFile[]) {
|
||||
this.push(
|
||||
itemList.map((v) => {
|
||||
const item: workItem = shallowReactive({
|
||||
id: Math.random(),
|
||||
status: 'wait',
|
||||
name: v.name,
|
||||
getBuffer: () => {
|
||||
const { response, abort } = miaoFetchApi.getFile(v, {
|
||||
onProcess(percent) {
|
||||
item.getBufferProgress = percent
|
||||
}
|
||||
})
|
||||
item.getBufferAbort = abort
|
||||
return response
|
||||
},
|
||||
isGettingBuffer: false,
|
||||
getBufferProgress: 0
|
||||
})
|
||||
return item
|
||||
})
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const encryptWork = reactive(new Work(aes_ctr_worker))
|
||||
// const decryptWork = reactive(new Work(aes_ctr_worker))
|
||||
|
||||
const workItemList = computed(() => [
|
||||
...encryptWork.queue
|
||||
// ...decryptWork.queue
|
||||
])
|
||||
|
||||
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
||||
required: true
|
||||
})
|
||||
|
||||
const key = ref('ABlockIs16Bytes!')
|
||||
|
||||
const handleDropVirtualFiles = (vFiles: VirtualFile[]) => {
|
||||
encryptWork.pushVFiles(vFiles)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
encryptWork.pushVFiles(currentFiles.value)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
encryptWork.abortLoop = true
|
||||
encryptWork.queue.forEach((item) => {
|
||||
item.getBufferAbort && item.getBufferAbort()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.miaoCrypto-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&-item {
|
||||
max-height: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
&-item {
|
||||
margin: 10px auto;
|
||||
width: 95%;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
box-shadow:
|
||||
0 0 15px -7px rgba(0, 0, 0, 0.1725490196),
|
||||
0 0 3px 1px #43434359;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
|
||||
.miaoCrypto-container-item-percentBar {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.miaoCrypto-container-item-content {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,9 @@
|
||||
import aesJs from 'aes-js'
|
||||
|
||||
self.onmessage = async function (event) {
|
||||
const data = event.data.data as Uint8Array
|
||||
const key = event.data.key as Uint8Array
|
||||
var aesCtr = new aesJs.ModeOfOperation.ctr(key, new aesJs.Counter(7058))
|
||||
const encryptData = aesCtr.encrypt(data)
|
||||
self.postMessage(encryptData)
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div
|
||||
class="miao-directory-container-bottom"
|
||||
:style="{
|
||||
backgroundColor: index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
|
||||
}">
|
||||
<div class="container-bottom-item">
|
||||
<div class="container-bottom-item-icon">
|
||||
<add-outline
|
||||
:style="{
|
||||
color: index % 2 === 0 ? 'rgb(0 0 0)' : 'rgb(255 255 255)'
|
||||
}"
|
||||
@click="emit('add-new-item')" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-bottom-item">
|
||||
<div class="container-bottom-item-icon">
|
||||
<cloud-upload-outline
|
||||
:style="{
|
||||
color: index % 2 === 0 ? 'rgb(0 0 0)' : 'rgb(255 255 255)'
|
||||
}"
|
||||
@click="emit('pick-files-upload')" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { AddOutline, CloudUploadOutline } from '@vicons/ionicons5'
|
||||
defineProps<{
|
||||
index: number
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'add-new-item': []
|
||||
'pick-files-upload': []
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.miao-directory-container-bottom {
|
||||
height: 60px;
|
||||
background-color: bisque;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
box-shadow: 0px 1px 10px #888888;
|
||||
z-index: 2;
|
||||
|
||||
.container-bottom-item {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.container-bottom-item-icon {
|
||||
svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
transition: width 0.3s ease;
|
||||
transition: height 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,320 @@
|
||||
<template>
|
||||
<miao-draggable-div
|
||||
class="miao-item"
|
||||
:isDraggable="!draggable"
|
||||
ref="itemRef"
|
||||
@on-drag-start="handleDragStart">
|
||||
<miaoContextMenu
|
||||
:options="dropDownOptions ?? []"
|
||||
:touch-time-out="500"
|
||||
@select="handleDropdownSelect">
|
||||
<div
|
||||
class="item-main"
|
||||
:class="selected ? 'item-main-selected' : ''"
|
||||
ref="mainRef">
|
||||
<div
|
||||
class="item-main-front"
|
||||
:style="{ backgroundColor: props.color }"></div>
|
||||
<Icon class="item-main-icon" v-show="clientWidth > 250"></Icon>
|
||||
<div class="item-main-info">
|
||||
<div class="item-main-info-name">
|
||||
<Icon
|
||||
class="item-main-info-name-icon"
|
||||
v-if="clientWidth <= 250"></Icon>
|
||||
<n-ellipsis
|
||||
:style="{ maxWidth: clientWidth > 250 ? '80%' : '75%' }">
|
||||
{{ name }}
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
<div class="item-main-info-date" v-if="time">
|
||||
{{ time }}
|
||||
</div>
|
||||
</div>
|
||||
<miao-draggable-div
|
||||
class="item-main-dragBtn"
|
||||
:isDraggable="draggable">
|
||||
<ReorderFourOutline></ReorderFourOutline>
|
||||
</miao-draggable-div>
|
||||
</div>
|
||||
</miaoContextMenu>
|
||||
</miao-draggable-div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import miaoContextMenu from '@/components/miaoContextMenu.vue'
|
||||
import {
|
||||
DocumentText,
|
||||
FileTray,
|
||||
Help,
|
||||
Image,
|
||||
LogoChrome,
|
||||
LogoCss3,
|
||||
LogoJavascript,
|
||||
LogoVue,
|
||||
PlayCircle,
|
||||
Disc,
|
||||
ReorderFourOutline
|
||||
} from '@vicons/ionicons5'
|
||||
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import dateFormatter from '@/utils/dateFormatter'
|
||||
import { NEllipsis } from 'naive-ui'
|
||||
import { DropdownOption } from 'naive-ui/es/dropdown'
|
||||
import miaoDraggableDiv from '@/components/miaoDraggableDiv.vue'
|
||||
// import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
||||
|
||||
// const miaoFetchApi = useMiaoFetchApi()
|
||||
|
||||
const props = defineProps<{
|
||||
item: {
|
||||
name: string
|
||||
type: 'directory' | 'file'
|
||||
stats: {
|
||||
mtimeMs: number
|
||||
}
|
||||
}
|
||||
name?: string
|
||||
color: string
|
||||
dropDownOptions?: DropdownOption[]
|
||||
selected?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
download: []
|
||||
delete: []
|
||||
rename: []
|
||||
dragStart: [e: DragEvent]
|
||||
onSelected: []
|
||||
plugin: [plugin: string]
|
||||
}>()
|
||||
|
||||
const mainRef = ref<HTMLDivElement>()
|
||||
|
||||
const draggable = ref(true)
|
||||
|
||||
// 使用ResizeObserver实现
|
||||
// 什么？性能问题？这玩意性能问题多着呢，轮不到它。
|
||||
const clientWidth = ref<number>(666)
|
||||
|
||||
const name = props.name ?? props.item.name
|
||||
|
||||
const observer = new ResizeObserver((entries) => {
|
||||
for (let entry of entries) {
|
||||
clientWidth.value = entry.contentRect.width
|
||||
}
|
||||
})
|
||||
|
||||
const time = computed(() => {
|
||||
return dateFormatter(
|
||||
new Date(props.item.stats.mtimeMs),
|
||||
'yyyy-MM-dd hh:mm:ss'
|
||||
)
|
||||
})
|
||||
|
||||
// 应该将所有事件emit出去才对
|
||||
const handleDropdownSelect = (key: string) => {
|
||||
if (key === 'rename') {
|
||||
emit('rename')
|
||||
} else if (key === 'download') {
|
||||
emit('download')
|
||||
} else if (key === 'delete') {
|
||||
emit('delete')
|
||||
} else if (key === 'select') {
|
||||
emit('onSelected')
|
||||
} else if (key.startsWith('plugin:')) {
|
||||
const plugin = key.split(':')[1]
|
||||
emit('plugin', plugin)
|
||||
}
|
||||
}
|
||||
|
||||
const Icon = computed(() => {
|
||||
try {
|
||||
if (props.item.type === 'directory') {
|
||||
return FileTray
|
||||
} else if (props.item.type === 'file') {
|
||||
const aft = props.item.name.split('.').at(-1)?.toLowerCase()
|
||||
if (!aft) {
|
||||
throw 1
|
||||
} else if (
|
||||
['txt', 'doc', 'docs', 'docx', 'xls', 'xlsx'].includes(aft)
|
||||
) {
|
||||
return DocumentText
|
||||
} else if (['mp3', 'wav', 'ape', 'acc', 'ogg', 'flac'].includes(aft)) {
|
||||
return Disc
|
||||
} else if (
|
||||
[
|
||||
'xbm',
|
||||
'tif',
|
||||
'pjp',
|
||||
'svgz',
|
||||
'jpg',
|
||||
'jpeg',
|
||||
'ico',
|
||||
'tiff',
|
||||
'gif',
|
||||
'svg',
|
||||
'jfif',
|
||||
'webp',
|
||||
'png',
|
||||
'bmp',
|
||||
'pjpeg',
|
||||
'avif'
|
||||
].includes(aft)
|
||||
) {
|
||||
return Image
|
||||
} else if (['mp4', 'm2v', 'mkv'].includes(aft)) {
|
||||
return PlayCircle
|
||||
} else if (['js', 'jsx', 'ts', 'tsx'].includes(aft)) {
|
||||
return LogoJavascript
|
||||
} else if (['html'].includes(aft)) {
|
||||
return LogoChrome
|
||||
} else if (['css', 'scss', 'less'].includes(aft)) {
|
||||
return LogoCss3
|
||||
} else if (['vue'].includes(aft)) {
|
||||
return LogoVue
|
||||
}
|
||||
return DocumentText
|
||||
}
|
||||
} catch {
|
||||
return Help
|
||||
}
|
||||
})
|
||||
|
||||
const itemRef = ref()
|
||||
|
||||
const handleDragStart = (e: DragEvent) => {
|
||||
emit('dragStart', e)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (mainRef.value) {
|
||||
observer.observe(mainRef.value)
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (mainRef.value) {
|
||||
observer.unobserve(mainRef.value)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.miao-item {
|
||||
cursor: pointer;
|
||||
width: calc(100% - 20px);
|
||||
// min-width: 170px;
|
||||
// aspect-ratio: 66/9;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 10px 10px;
|
||||
|
||||
.item-main {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 95%;
|
||||
background-color: rgb(255, 255, 255);
|
||||
border-radius: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: background-color 0.3s ease;
|
||||
overflow-x: hidden;
|
||||
|
||||
.item-main-front {
|
||||
height: 100%;
|
||||
min-width: 10px;
|
||||
border-radius: 7px 0 0 7px;
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.item-main-icon {
|
||||
min-width: 30px;
|
||||
margin-left: 10px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
color: #00403e;
|
||||
transition: color 0.15s ease-out;
|
||||
}
|
||||
|
||||
.item-main-info {
|
||||
margin-left: 10px;
|
||||
height: 100%;
|
||||
width: calc(100% - 10px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&-name {
|
||||
position: relative;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 3px;
|
||||
|
||||
&-icon {
|
||||
color: #00403e;
|
||||
width: 20px;
|
||||
margin-right: 5px;
|
||||
transition: color 0.15s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
&-date {
|
||||
user-select: none;
|
||||
font-size: small;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.item-main-option {
|
||||
height: 100%;
|
||||
width: 20px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
border-radius: 0 7px 7px 0;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
transition: background-color 0.3s;
|
||||
|
||||
.item-main-option-icon {
|
||||
color: #000;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: #8b8b8b;
|
||||
|
||||
.item-main-option-icon {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: #d2d2d2;
|
||||
}
|
||||
}
|
||||
|
||||
.item-main-selected {
|
||||
background-color: rgba(0, 128, 207, 0.32);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 128, 207, 0.64);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-main-dragBtn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<div
|
||||
class="miao-directory-container-items"
|
||||
:style="{
|
||||
backgroundColor: index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
|
||||
}">
|
||||
<n-scrollbar ref="scrollbarRef" style="max-height: 100%">
|
||||
<miao-lazy-div
|
||||
v-for="dir in showData_directory"
|
||||
:key="dir.id"
|
||||
min-height="50px"
|
||||
margin="10px">
|
||||
<miaoDirectoryItem
|
||||
:item="dir"
|
||||
:color="props.color"
|
||||
:selected="selectedItem.includes(dir)"
|
||||
:drop-down-options="itemDropDownOptions(dir).value"
|
||||
@delete="handleItemDelete(dir)"
|
||||
@plugin="(p) => handleItemUsePlugin(dir)(p)"
|
||||
@click="handleItemClick(dir)"
|
||||
@drag-start="(e) => handleItemDragStart(dir)(e)"
|
||||
@rename="handleItemRename(dir)"
|
||||
@on-selected="handleItemSelect(dir)" />
|
||||
</miao-lazy-div>
|
||||
<miao-lazy-div
|
||||
v-for="file in showData_files"
|
||||
:key="file.id"
|
||||
min-height="50px">
|
||||
<miaoDirectoryItem
|
||||
:item="file"
|
||||
:color="props.color"
|
||||
:selected="selectedItem.includes(file)"
|
||||
:drop-down-options="itemDropDownOptions(file).value"
|
||||
@click="handleItemClick(file)"
|
||||
@download="handleItemDownload(file)"
|
||||
@delete="handleItemDelete(file)"
|
||||
@drag-start="(e) => handleItemDragStart(file)(e)"
|
||||
@rename="handleItemRename(file)"
|
||||
@plugin="(p) => handleItemUsePlugin(file)(p)"
|
||||
@on-selected="handleItemSelect(file)" />
|
||||
</miao-lazy-div>
|
||||
</n-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NScrollbar } from 'naive-ui'
|
||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
||||
import miaoDirectoryItem from './miaoDirectoryItem.vue'
|
||||
import miaoLazyDiv from '@/components/miaoLazyDiv.vue'
|
||||
import { computed, ref } from 'vue'
|
||||
import usePluginCenter from '@/hooks/usePluginCenter'
|
||||
import { renderIcon } from '@/utils/miaoTools'
|
||||
|
||||
const pluginCenter = usePluginCenter()
|
||||
|
||||
const props = defineProps<{
|
||||
color: string
|
||||
index: number
|
||||
showData_directory: VirtualDirectory[]
|
||||
showData_files: VirtualFile[]
|
||||
selectedItem: (VirtualFile | VirtualDirectory)[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'item-click': [item: VirtualDirectory | VirtualFile]
|
||||
'item-download': [item: VirtualFile]
|
||||
'item-delete': [item: VirtualDirectory | VirtualFile]
|
||||
'item-drag-start': [_event: DragEvent, item: VirtualDirectory | VirtualFile]
|
||||
'item-rename': [item: VirtualDirectory | VirtualFile]
|
||||
'item-select': [item: VirtualDirectory | VirtualFile]
|
||||
}>()
|
||||
|
||||
const scrollbarRef = ref()
|
||||
|
||||
const itemDropDownOptions = (item: VirtualDirectory | VirtualFile) =>
|
||||
computed(() => {
|
||||
const items = [...props.selectedItem]
|
||||
const selected = props.selectedItem.includes(item)
|
||||
if (!selected) {
|
||||
items.push(item)
|
||||
}
|
||||
const vDirs = items.filter((v) => v.type === 'directory')
|
||||
const vFiles = items.filter((v) => v.type === 'file')
|
||||
const options = [
|
||||
{
|
||||
label: '重命名',
|
||||
key: 'rename'
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
key: 'delete'
|
||||
}
|
||||
]
|
||||
if (item.type === 'file') {
|
||||
options.push(
|
||||
...[
|
||||
{
|
||||
label: '下载',
|
||||
key: 'download'
|
||||
}
|
||||
]
|
||||
)
|
||||
}
|
||||
if (selected === false) {
|
||||
options.push(
|
||||
...[
|
||||
{
|
||||
label: '多选:选择',
|
||||
key: 'select'
|
||||
}
|
||||
]
|
||||
)
|
||||
} else {
|
||||
options.push(
|
||||
...[
|
||||
{
|
||||
label: '多选:取消',
|
||||
key: 'select'
|
||||
}
|
||||
]
|
||||
)
|
||||
}
|
||||
options.push(
|
||||
...pluginCenter.getUsablePlugin(vDirs, vFiles).map((v) => ({
|
||||
label: `插件:${v.name}`,
|
||||
key: `plugin:${v.key}`,
|
||||
icon: v.icon ? renderIcon(v.icon) : undefined
|
||||
}))
|
||||
)
|
||||
return options
|
||||
})
|
||||
|
||||
const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
|
||||
emit('item-click', item)
|
||||
}
|
||||
|
||||
const handleItemDownload = (item: VirtualFile) => {
|
||||
emit('item-download', item)
|
||||
}
|
||||
|
||||
const handleItemDelete = (item: VirtualDirectory | VirtualFile) => {
|
||||
emit('item-delete', item)
|
||||
}
|
||||
|
||||
const handleItemDragStart =
|
||||
(item: VirtualDirectory | VirtualFile) => (_event: DragEvent) => {
|
||||
emit('item-drag-start', _event, item)
|
||||
}
|
||||
|
||||
const handleItemRename = (item: VirtualDirectory | VirtualFile) => {
|
||||
emit('item-rename', item)
|
||||
}
|
||||
|
||||
const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
|
||||
emit('item-select', item)
|
||||
}
|
||||
|
||||
const handleItemUsePlugin =
|
||||
(item: VirtualDirectory | VirtualFile) => (plugin: string) => {
|
||||
const items = [...props.selectedItem]
|
||||
const selected = props.selectedItem.includes(item)
|
||||
if (!selected) {
|
||||
items.push(item)
|
||||
}
|
||||
const vDirs = items.filter((v) => v.type === 'directory')
|
||||
const vFiles = items.filter((v) => v.type === 'file')
|
||||
pluginCenter.usePlugin(plugin, vDirs, vFiles)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
scrollTo: (...args: any) => scrollbarRef.value.scrollTo(...args)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.miao-directory-container-items {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<div
|
||||
class="miao-directory-container-top"
|
||||
:style="{
|
||||
backgroundColor: index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
|
||||
}">
|
||||
<div
|
||||
class="container-top-colorfulBar"
|
||||
:style="{ backgroundColor: props.color }"></div>
|
||||
<div class="container-top-breadcrumb">
|
||||
<n-scrollbar
|
||||
ref="scrollbarRef"
|
||||
:x-scrollable="true"
|
||||
class="container-top-breadcrumb-scroll"
|
||||
@wheel="handleWheel">
|
||||
<div class="container-top-breadcrumb-container">
|
||||
<n-breadcrumb
|
||||
separator=">"
|
||||
class="sb-nn"
|
||||
style="margin-left: 5px">
|
||||
<n-breadcrumb-item :clickable="false">
|
||||
<n-icon size="18">
|
||||
<CloudOutline />
|
||||
</n-icon>
|
||||
</n-breadcrumb-item>
|
||||
<n-breadcrumb-item
|
||||
v-for="dir in currentDirectory?.getParents"
|
||||
@click="handleClickBreadcrumbItem(dir)"
|
||||
:clickable="true">
|
||||
<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="$emit('back')">
|
||||
<ChevronBackOutline />
|
||||
</n-icon>
|
||||
<n-icon
|
||||
class="container-top-tools-item"
|
||||
size="14"
|
||||
@click="$emit('reload')">
|
||||
<ReloadOutline class="container-top-tools-item-reload" />
|
||||
</n-icon>
|
||||
<n-dropdown
|
||||
trigger="click"
|
||||
:options="openMenuOption"
|
||||
@select="(key: string) => emit('menuSelect', key)">
|
||||
<n-icon class="container-top-tools-item" size="14">
|
||||
<EllipsisVertical />
|
||||
</n-icon>
|
||||
</n-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
NBreadcrumbItem,
|
||||
NBreadcrumb,
|
||||
NIcon,
|
||||
NDropdown,
|
||||
NScrollbar
|
||||
} from 'naive-ui'
|
||||
import {
|
||||
CloudOutline,
|
||||
ChevronBackOutline,
|
||||
ReloadOutline,
|
||||
EllipsisVertical
|
||||
} from '@vicons/ionicons5'
|
||||
import VirtualDirectory from '@/class/VirtualDirectory'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
color: string
|
||||
index: number
|
||||
currentDirectory: VirtualDirectory | undefined
|
||||
openMenuOption: {
|
||||
key: string
|
||||
label: string
|
||||
[key: string]: any
|
||||
}[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
back: []
|
||||
reload: []
|
||||
menuSelect: [key: string]
|
||||
'set-current-directory': [virtualDirectory: VirtualDirectory]
|
||||
}>()
|
||||
|
||||
const scrollbarRef = ref<InstanceType<typeof NScrollbar>>()
|
||||
|
||||
const handleClickBreadcrumbItem = (virtualDirectory: VirtualDirectory) => {
|
||||
emit('set-current-directory', virtualDirectory)
|
||||
}
|
||||
|
||||
const handleWheel = (event: WheelEvent) => {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
if (scrollbarRef.value) {
|
||||
scrollbarRef.value.scrollBy({
|
||||
left: event.deltaY,
|
||||
behavior: "smooth"
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
// @ts-ignore
|
||||
scrollTo: (...args: any[]) => scrollbarRef.value?.scrollTo(...args)
|
||||
// getRef: () => scrollbarRef.value
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.miao-directory-container-top {
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
background-color: #f1f1f1;
|
||||
|
||||
.container-top-colorfulBar {
|
||||
height: 70%;
|
||||
width: 5px;
|
||||
margin-left: 10px;
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.container-top-breadcrumb {
|
||||
position: relative;
|
||||
height: 70%;
|
||||
width: calc(100% - 95px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
// overflow: hidden;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
background-color: #ffffff;
|
||||
padding: 0 5px;
|
||||
border-radius: 0 3px 3px 0;
|
||||
|
||||
.container-top-breadcrumb-container {
|
||||
// position: absolute;
|
||||
height: 21px;
|
||||
// right: 0;
|
||||
// top: 0;
|
||||
min-width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.container-top-tools {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
// width: 70px;
|
||||
padding: 0 5px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
.container-top-tools-item {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0 1px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #ffffff00;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s;
|
||||
cursor: pointer;
|
||||
|
||||
.container-top-tools-item-reload {
|
||||
transition: transform 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(128, 128, 128, 0.4);
|
||||
}
|
||||
|
||||
&:active .container-top-tools-item-reload {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.container-top-breadcrumb-scroll {
|
||||
.n-scrollbar-rail {
|
||||
transform: translateY(5px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,22 @@
|
||||
import { registerComponentOption } from '@/class/PluginCenter'
|
||||
import FileTray from '@vicons/ionicons5/es/FileTray'
|
||||
// import MiaoDirectory from '@/plugins/miaoDirectory/miaoDirectory.vue'
|
||||
|
||||
const pluginConfig: registerComponentOption = {
|
||||
key: 'miaoDirectory',
|
||||
name: '文件夹',
|
||||
icon: FileTray,
|
||||
getComponent: async () =>
|
||||
(await import('@/plugins/miaoDirectory/miaoDirectory.vue')).default,
|
||||
filter: (vDirs, vFiles) => {
|
||||
if (vFiles.length) {
|
||||
return false
|
||||
}
|
||||
return vDirs.length === 1
|
||||
}
|
||||
}
|
||||
|
||||
export default pluginConfig
|
||||
|
||||
import { PluginExportType } from '@/types/type'
|
||||
export const type = PluginExportType.component
|
||||
@@ -0,0 +1,40 @@
|
||||
import { Plugin, PluginGroup } from '@/class/PluginCenter'
|
||||
import { PluginExportType } from '@/types/type'
|
||||
import { watch } from 'vue'
|
||||
|
||||
const pluginConfig: Plugin = {
|
||||
name: '初始化完成之后打开miaoDirectory',
|
||||
filter: () => {
|
||||
return false
|
||||
},
|
||||
disable: false,
|
||||
group: [PluginGroup.immediately],
|
||||
func: (_, __, hooks) => {
|
||||
const { getPluginCenter, getRootVDirectory, getViews } = hooks
|
||||
const views = getViews()
|
||||
const pc = getPluginCenter()
|
||||
const root = getRootVDirectory()
|
||||
setTimeout(() => {
|
||||
if (views.length === 0) {
|
||||
pc.usePlugin('miaoDirectory', [root])
|
||||
}
|
||||
watch(
|
||||
() => views.length,
|
||||
() => {
|
||||
if (views.length === 0) {
|
||||
pc.usePlugin('miaoDirectory', [root])
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
pc.deregister('miaoDirectory_onInit')
|
||||
})
|
||||
},
|
||||
priority: -1
|
||||
}
|
||||
|
||||
export default pluginConfig
|
||||
|
||||
export const type = PluginExportType.default
|
||||
|
||||
export const key = 'miaoDirectory_onInit'
|
||||
@@ -0,0 +1,691 @@
|
||||
<template>
|
||||
<miao-drop-handler
|
||||
@on-virtual-directory="handleDropVDirectory"
|
||||
@on-files="handleDropFiles"
|
||||
@on-virtual-files="handleDropVirtualFiles">
|
||||
<miaoAlertTipProvider ref="miaoAlertTip">
|
||||
<div class="miao-directory-item-container" ref="rootDomRef">
|
||||
<!-- 顶部面包屑导航和工具栏 -->
|
||||
<miao-directory-top
|
||||
ref="miaoDirectoryTopRef"
|
||||
:color="props.color"
|
||||
:current-directory="currentDirectory"
|
||||
@back="handleBack"
|
||||
:open-menu-option="topBarMenuOption"
|
||||
@reload="handleReload"
|
||||
@exit="emit('exit')"
|
||||
:index="index"
|
||||
@set-current-directory="setCurrentDirectory"
|
||||
@search="handleSearch"
|
||||
@menu-select="handleTopBarMenuSelect" />
|
||||
|
||||
<!-- 文件和文件夹列表 -->
|
||||
<miao-directory-items
|
||||
ref="miaoDirectoryItemRef"
|
||||
:color="props.color"
|
||||
:showData_directory="showData_directory"
|
||||
:showData_files="showData_files"
|
||||
:selected-item="selectedItem.value"
|
||||
:index="index"
|
||||
@item-click="handleItemClick"
|
||||
@item-download="handleItemDownload"
|
||||
@item-delete="handleItemDelete"
|
||||
@item-drag-start="handleItemDragStart"
|
||||
@item-rename="handleItemRename"
|
||||
@item-select="handleItemSelect" />
|
||||
|
||||
<!-- 底部工具栏 -->
|
||||
<miao-directory-bottom
|
||||
:index="index"
|
||||
@add-new-item="handleAddNewItem"
|
||||
v-if="false"
|
||||
@pick-files-upload="handlePickFilesUpload" />
|
||||
|
||||
<miao-mask v-model:show="showModel"></miao-mask>
|
||||
<miao-popup-input ref="popupInput"></miao-popup-input>
|
||||
</div>
|
||||
</miaoAlertTipProvider>
|
||||
</miao-drop-handler>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onMounted, reactive, ref } from 'vue'
|
||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
||||
import Config from '@/config'
|
||||
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
||||
import useDataBus from '@/hooks/useDataBus'
|
||||
import useUploadQueue from '@/hooks/useUploadQueue'
|
||||
import useVirtualPages from '@/hooks/useVirtualPages'
|
||||
import { filePicker, renderIcon } from '@/utils/miaoTools'
|
||||
import uniq from 'lodash/uniq'
|
||||
|
||||
import miaoDirectoryTop from './components/miaoDirectoryTop.vue'
|
||||
import MiaoDirectoryItems from './components/miaoDirectoryItemsContainer.vue'
|
||||
import MiaoDirectoryBottom from './components/miaoDirectoryBottom.vue'
|
||||
import MiaoMask from '@/components/miaoMask.vue'
|
||||
import MiaoPopupInput from '@/components/miaoPopupInput.vue'
|
||||
import MiaoDropHandler from '@/components/miaoDropHandler.vue'
|
||||
import miaoAlertTipProvider from '@/components/miaoAlertTipProvider.vue'
|
||||
import {
|
||||
CloseOutline,
|
||||
SearchOutline,
|
||||
FilterOutline,
|
||||
CheckmarkDoneOutline,
|
||||
DocumentText,
|
||||
ExtensionPuzzleOutline,
|
||||
FileTray,
|
||||
AddOutline,
|
||||
CloudUploadOutline
|
||||
} from '@vicons/ionicons5'
|
||||
import usePluginCenter from '@/hooks/usePluginCenter'
|
||||
|
||||
const { baseUrl, api } = Config
|
||||
const dataBus = useDataBus()
|
||||
const views = useVirtualPages()
|
||||
const uploadQueue = useUploadQueue()
|
||||
const miaoFetchApi = useMiaoFetchApi()
|
||||
const pluginCenter = usePluginCenter()
|
||||
|
||||
const props = defineProps<{
|
||||
color: string
|
||||
id: number
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
exit: []
|
||||
}>()
|
||||
|
||||
const popupInput = ref<InstanceType<typeof MiaoPopupInput>>()
|
||||
// 是否显示模态框
|
||||
const showModel = ref(0)
|
||||
const searchText = ref<string>('')
|
||||
const showDirs = ref<boolean>(true)
|
||||
const showFiles = ref<boolean>(true)
|
||||
const miaoDirectoryItemRef = ref()
|
||||
const miaoDirectoryTopRef = ref<InstanceType<typeof miaoDirectoryTop>>()
|
||||
const miaoAlertTip = ref<InstanceType<typeof miaoAlertTipProvider>>()
|
||||
|
||||
class SelectedItem {
|
||||
constructor() {
|
||||
this._selectedItem = []
|
||||
}
|
||||
_selectedItem: (VirtualDirectory | VirtualFile)[]
|
||||
push(item: VirtualDirectory | VirtualFile) {
|
||||
this._selectedItem = uniq([item, ...this._selectedItem])
|
||||
}
|
||||
pushArray(items: (VirtualDirectory | VirtualFile)[]) {
|
||||
this._selectedItem = uniq([...items, ...this._selectedItem])
|
||||
}
|
||||
remove(item: VirtualDirectory | VirtualFile) {
|
||||
this._selectedItem = this._selectedItem.filter((v) => v !== item)
|
||||
}
|
||||
/**
|
||||
* 仅保留filter为true的元素, filter默认为()=>false
|
||||
*/
|
||||
clear(filter?: (item: VirtualDirectory | VirtualFile) => boolean) {
|
||||
filter || (filter = (__) => false)
|
||||
this._selectedItem = this.value.filter(filter)
|
||||
}
|
||||
// 保证内容仍然存在于dir中且各个元素不重复
|
||||
get value() {
|
||||
const _filterList = [
|
||||
...(currentDirectory.value?.directories ?? []),
|
||||
...(currentDirectory.value?.files ?? [])
|
||||
]
|
||||
return uniq(this._selectedItem).filter((v) => {
|
||||
if (currentDirectory.value === undefined) {
|
||||
return false
|
||||
}
|
||||
// @ts-ignore
|
||||
return _filterList.includes(v)
|
||||
})
|
||||
}
|
||||
}
|
||||
// 已选择的item，用于多选功能
|
||||
const selectedItem = reactive(new SelectedItem())
|
||||
|
||||
const currentDirectories = defineModel<VirtualDirectory[]>(
|
||||
'currentDirectories',
|
||||
{
|
||||
required: true
|
||||
}
|
||||
)
|
||||
|
||||
// 目前展示的Dir
|
||||
const currentDirectory = computed(() => {
|
||||
return currentDirectories.value[0]
|
||||
})
|
||||
|
||||
// 当前组件在views中的序号
|
||||
const index = computed(() => {
|
||||
return views.getIndex(props.id)
|
||||
})
|
||||
|
||||
// 用于展示的数据，后续会增加排序等操作
|
||||
const showData_directory = computed<VirtualDirectory[]>(() => {
|
||||
if (showDirs.value === false) {
|
||||
return []
|
||||
}
|
||||
let data = currentDirectory.value?.directories
|
||||
? [...currentDirectory.value?.directories]
|
||||
: []
|
||||
if (searchText.value !== '') {
|
||||
data = data.filter((vd) => vd.name.includes(searchText.value))
|
||||
}
|
||||
return data
|
||||
})
|
||||
const showData_files = computed<VirtualFile[]>(() => {
|
||||
if (showFiles.value === false) {
|
||||
return []
|
||||
}
|
||||
let data = currentDirectory.value?.files
|
||||
? [...currentDirectory.value?.files]
|
||||
: []
|
||||
if (searchText.value !== '') {
|
||||
data = data.filter((vd) => vd.name.includes(searchText.value))
|
||||
}
|
||||
return data
|
||||
})
|
||||
|
||||
const topBarMenuOption = computed(() => {
|
||||
return [
|
||||
{
|
||||
label: '新建',
|
||||
key: 'create',
|
||||
icon: renderIcon(AddOutline)
|
||||
},
|
||||
{
|
||||
label: '上传',
|
||||
key: 'upload',
|
||||
icon: renderIcon(CloudUploadOutline)
|
||||
},
|
||||
{
|
||||
label: '搜索',
|
||||
key: 'search',
|
||||
icon: renderIcon(SearchOutline)
|
||||
},
|
||||
searchText.value !== ''
|
||||
? {
|
||||
label: '重置搜索',
|
||||
key: 'searchReset',
|
||||
icon: renderIcon(SearchOutline)
|
||||
}
|
||||
: undefined,
|
||||
// selectedItem.value.length !== 0
|
||||
// ? {
|
||||
// label: '重置多选',
|
||||
// key: 'selectedItemReset',
|
||||
// icon: renderIcon(CheckmarkDoneOutline)
|
||||
// }
|
||||
// : undefined,
|
||||
{
|
||||
label: '筛选',
|
||||
key: 'filter',
|
||||
children: [
|
||||
{
|
||||
label: `${showDirs.value ? '隐藏' : '显示'}文件夹`,
|
||||
key: 'showDirs',
|
||||
icon: renderIcon(FileTray)
|
||||
},
|
||||
{
|
||||
label: `${showFiles.value ? '隐藏' : '显示'}文件`,
|
||||
key: 'showFiles',
|
||||
icon: renderIcon(DocumentText)
|
||||
}
|
||||
],
|
||||
icon: renderIcon(FilterOutline)
|
||||
},
|
||||
{
|
||||
label: '多选',
|
||||
key: 'multiSelect',
|
||||
children: [
|
||||
{
|
||||
label: `全选`,
|
||||
key: 'multiSelect:all'
|
||||
},
|
||||
{
|
||||
label: `全不选`,
|
||||
key: 'multiSelect:reset'
|
||||
},
|
||||
{
|
||||
label: `反选`,
|
||||
key: 'multiSelect:inversion'
|
||||
},
|
||||
selectedItem.value.length === 2
|
||||
? {
|
||||
label: `区间内全选`,
|
||||
key: 'multiSelect:range'
|
||||
}
|
||||
: undefined
|
||||
].filter((v) => v !== undefined),
|
||||
icon: renderIcon(CheckmarkDoneOutline)
|
||||
},
|
||||
{
|
||||
label: '插件',
|
||||
key: 'plugin',
|
||||
children: [
|
||||
...pluginCenter
|
||||
.getUsablePlugin([currentDirectories.value[0]], [])
|
||||
.map((v) => ({
|
||||
label: `${v.name}`,
|
||||
key: `plugin:${v.key}`,
|
||||
icon: v.icon ? renderIcon(v.icon) : undefined
|
||||
}))
|
||||
],
|
||||
icon: renderIcon(ExtensionPuzzleOutline)
|
||||
},
|
||||
{
|
||||
label: '关闭',
|
||||
key: 'close',
|
||||
icon: renderIcon(CloseOutline)
|
||||
}
|
||||
].filter((v) => v !== undefined)
|
||||
})
|
||||
|
||||
// 设置显示的dir
|
||||
const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
|
||||
try {
|
||||
// 若没有缓存数据则同步刷新，有缓存数据则异步刷新
|
||||
if (!virtualDirectory.isUpdated) {
|
||||
await virtualDirectory.update()
|
||||
} else {
|
||||
virtualDirectory.update()
|
||||
}
|
||||
if (currentDirectories.value[0] !== virtualDirectory) {
|
||||
selectedItem.clear()
|
||||
handleSearchReset()
|
||||
nextTick(() => {
|
||||
miaoDirectoryItemRef.value.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'instant'
|
||||
})
|
||||
// miaoDirectoryTopRef.value &&
|
||||
// miaoDirectoryTopRef.value.scrollTo({
|
||||
// top: 0,
|
||||
// behavior: 'instant'
|
||||
// })
|
||||
miaoDirectoryTopRef.value?.scrollTo({
|
||||
top: 0,
|
||||
left: 999,
|
||||
behavior: 'instant'
|
||||
})
|
||||
})
|
||||
}
|
||||
currentDirectories.value[0] = virtualDirectory
|
||||
} catch (e) {
|
||||
miaoAlertTip.value?.alertTip(`获取文件夹内容出错`, {
|
||||
type: 'error',
|
||||
timeout: 3000
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const reload = () => {
|
||||
setCurrentDirectory(currentDirectory.value)
|
||||
}
|
||||
|
||||
const openUrl = (
|
||||
href: string,
|
||||
config?: {
|
||||
download?: string
|
||||
target?: string
|
||||
}
|
||||
) => {
|
||||
let { target, download } = config ?? {}
|
||||
const a = document.createElement('a')
|
||||
a.setAttribute('href', href)
|
||||
a.setAttribute('target', target ?? '_blank')
|
||||
download && a.setAttribute('download', download)
|
||||
a.click()
|
||||
}
|
||||
|
||||
const handleTopBarMenuSelect = (key: string) => {
|
||||
if (key === 'close') {
|
||||
emit('exit')
|
||||
} else if (key === 'search') {
|
||||
handleSearch()
|
||||
} else if (key === 'upload') {
|
||||
handlePickFilesUpload()
|
||||
} else if (key === 'create') {
|
||||
handleAddNewItem()
|
||||
} else if (key === 'searchReset') {
|
||||
handleSearchReset()
|
||||
// } else if (key === 'selectedItemReset') {
|
||||
// selectedItem.clear()
|
||||
} else if (key === 'showDirs') {
|
||||
showDirs.value = !showDirs.value
|
||||
showDirs.value === false &&
|
||||
selectedItem.clear((v) => v.type !== 'directory')
|
||||
} else if (key === 'showFiles') {
|
||||
showFiles.value = !showFiles.value
|
||||
showFiles.value === false && selectedItem.clear((v) => v.type !== 'file')
|
||||
} else if (key.startsWith('plugin:')) {
|
||||
const pluginName = key.split(':')[1]
|
||||
pluginCenter.usePlugin(pluginName, [currentDirectory.value], [])
|
||||
} else if (key.startsWith('multiSelect:')) {
|
||||
const opName = key.split(':')[1]
|
||||
switch (opName) {
|
||||
case 'all':
|
||||
selectedItem.pushArray([
|
||||
...showData_directory.value,
|
||||
...showData_files.value
|
||||
])
|
||||
break
|
||||
case 'reset':
|
||||
selectedItem.clear()
|
||||
break
|
||||
case 'inversion':
|
||||
const sArr = selectedItem.value
|
||||
const arr = [
|
||||
...showData_directory.value,
|
||||
...showData_files.value
|
||||
].filter((i) => !sArr.includes(i))
|
||||
selectedItem.clear()
|
||||
selectedItem.pushArray(arr)
|
||||
break
|
||||
case 'range':
|
||||
const _sArr = selectedItem.value
|
||||
const _arr = [...showData_directory.value, ...showData_files.value]
|
||||
const _nArr = []
|
||||
let _counter = 0
|
||||
for (const i of _arr) {
|
||||
if (_sArr.includes(i)) {
|
||||
_counter++
|
||||
}
|
||||
if (_counter === 1) {
|
||||
_nArr.push(i)
|
||||
} else if (_counter === 2) {
|
||||
_nArr.push(i)
|
||||
break
|
||||
}
|
||||
}
|
||||
selectedItem.clear()
|
||||
selectedItem.pushArray(_nArr)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
if (currentDirectory.value?.parent) {
|
||||
setCurrentDirectory(currentDirectory.value.parent)
|
||||
}
|
||||
}
|
||||
|
||||
const handleReload = () => {
|
||||
reload()
|
||||
}
|
||||
|
||||
const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
|
||||
if (selectedItem.value.length > 0) {
|
||||
handleItemSelect(item)
|
||||
} else {
|
||||
if (item.type === 'file') {
|
||||
const useablePlugins = pluginCenter.getUsablePlugin([], [item])
|
||||
if (useablePlugins.length > 0) {
|
||||
pluginCenter.usePlugin(useablePlugins[0].key, [], [item])
|
||||
} else {
|
||||
openUrl(`${baseUrl}${api.get}${item.path}`)
|
||||
}
|
||||
} else if (item.type === 'directory') {
|
||||
setCurrentDirectory(item)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleItemDownload = (item: VirtualFile) => {
|
||||
openUrl(`${baseUrl}${api.get}${item.path}`, {
|
||||
download: item.name
|
||||
})
|
||||
}
|
||||
|
||||
const handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
|
||||
for (let item of uniq([...selectedItem.value, _item])) {
|
||||
;(async () => {
|
||||
const { 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()
|
||||
}
|
||||
})()
|
||||
}
|
||||
}
|
||||
|
||||
const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
|
||||
const popupRes = await popupInput.value?.popup({
|
||||
title: '重命名',
|
||||
inputValue: item.name,
|
||||
inputProps: {
|
||||
placeholder: item.name
|
||||
},
|
||||
options: [
|
||||
{
|
||||
label: '取消',
|
||||
key: false,
|
||||
type: 'error'
|
||||
},
|
||||
{
|
||||
label: '确认',
|
||||
key: true,
|
||||
type: 'success'
|
||||
}
|
||||
]
|
||||
})
|
||||
if (popupRes?.key === false) {
|
||||
return
|
||||
}
|
||||
const newName = popupRes?.text
|
||||
if (!newName) {
|
||||
return
|
||||
}
|
||||
const { response } = miaoFetchApi.rename(item, newName, {
|
||||
retry: 5
|
||||
})
|
||||
const id = (await response).eventId
|
||||
const { response: res } = miaoFetchApi.query(id)
|
||||
const eventResult = await res
|
||||
if (eventResult.status === 'success') {
|
||||
reload()
|
||||
}
|
||||
}
|
||||
|
||||
const handleItemDragStart = async (
|
||||
_event: DragEvent,
|
||||
item: VirtualDirectory | VirtualFile
|
||||
) => {
|
||||
const items = uniq([item, ...selectedItem.value])
|
||||
dataBus.set(
|
||||
'dragData_vFiles',
|
||||
items.filter((v) => v.type === 'file')
|
||||
)
|
||||
dataBus.set(
|
||||
'dragData_vDirectory',
|
||||
items.filter((v) => v.type === 'directory')
|
||||
)
|
||||
// selectedItem.clear()
|
||||
}
|
||||
|
||||
const handleDropFiles = async (files: File[]) => {
|
||||
currentDirectory.value &&
|
||||
uploadQueue.push(files, currentDirectory.value, {
|
||||
onFinish() {
|
||||
reload()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
|
||||
// 不能移到自己或自己的子文件夹内
|
||||
for (let vDir of vDirs) {
|
||||
if (currentDirectory.value.getParents.includes(vDir)) {
|
||||
return
|
||||
}
|
||||
if (vDir.parent === currentDirectory.value) {
|
||||
return
|
||||
}
|
||||
}
|
||||
for (let dir of vDirs) {
|
||||
;(async () => {
|
||||
const _from = dir.parent
|
||||
const { response } = miaoFetchApi.cut(dir, currentDirectory.value)
|
||||
const id = (await response).eventId
|
||||
const { response: res } = miaoFetchApi.query(id)
|
||||
const eventResult = await res
|
||||
if (eventResult.status === 'success') {
|
||||
reload()
|
||||
_from && _from.update()
|
||||
}
|
||||
})()
|
||||
}
|
||||
}
|
||||
|
||||
const handleDropVirtualFiles = (files: VirtualFile[]) => {
|
||||
if (files[0].parent === currentDirectory.value) {
|
||||
return
|
||||
}
|
||||
for (let file of files) {
|
||||
;(async () => {
|
||||
const _from = file.parent
|
||||
const { response } = miaoFetchApi.cut(file, currentDirectory.value)
|
||||
const id = (await response).eventId
|
||||
const { response: res } = miaoFetchApi.query(id)
|
||||
const eventResult = await res
|
||||
if (eventResult.status === 'success') {
|
||||
reload()
|
||||
_from.update()
|
||||
}
|
||||
})()
|
||||
}
|
||||
}
|
||||
|
||||
const handlePickFilesUpload = async () => {
|
||||
const files = await filePicker({
|
||||
multiple: true
|
||||
})
|
||||
const _currDir = currentDirectory.value
|
||||
uploadQueue.push(files, _currDir, {
|
||||
onFinish() {
|
||||
_currDir.update()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleAddNewItem = async () => {
|
||||
const popupRes = await popupInput.value?.popup({
|
||||
title: '新建文件/文件夹',
|
||||
inputProps: {
|
||||
placeholder: ''
|
||||
},
|
||||
options: [
|
||||
{
|
||||
label: '取消',
|
||||
key: 'cancel',
|
||||
type: 'error'
|
||||
},
|
||||
{
|
||||
label: '文件',
|
||||
key: 'file',
|
||||
type: 'success'
|
||||
},
|
||||
{
|
||||
label: '文件夹',
|
||||
key: 'dir',
|
||||
type: 'success'
|
||||
}
|
||||
]
|
||||
})
|
||||
// todo: 上传前如重名文件夹等等的错误提前检查
|
||||
if (popupRes?.key === 'cancel' || popupRes?.text === '') {
|
||||
return
|
||||
}
|
||||
const _currDir = currentDirectory.value
|
||||
const name = popupRes?.text
|
||||
if (!name) {
|
||||
return
|
||||
}
|
||||
// @ts-ignore
|
||||
const opType: 'file' | 'dir' = popupRes?.key
|
||||
if (opType === 'dir') {
|
||||
const res = await miaoFetchApi.mkdir(currentDirectory.value, name)
|
||||
if (res.message === 'success') {
|
||||
_currDir.update()
|
||||
}
|
||||
} else {
|
||||
const { response } = miaoFetchApi.mkFile(currentDirectory.value, name)
|
||||
const res = await response
|
||||
if (res.message === 'success') {
|
||||
_currDir.update()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
|
||||
if (!selectedItem.value.includes(item)) {
|
||||
selectedItem.push(item)
|
||||
} else {
|
||||
selectedItem.remove(item)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearch = async () => {
|
||||
const popupRes = await popupInput.value?.popup({
|
||||
title: '搜索当前文件夹',
|
||||
inputValue: searchText.value,
|
||||
inputProps: {
|
||||
placeholder: ''
|
||||
},
|
||||
options: [
|
||||
{
|
||||
label: '取消',
|
||||
key: 'cancel',
|
||||
type: 'default'
|
||||
},
|
||||
{
|
||||
label: '重置',
|
||||
key: 'reset',
|
||||
type: 'default'
|
||||
},
|
||||
{
|
||||
label: '搜索',
|
||||
key: 'search',
|
||||
type: 'success'
|
||||
}
|
||||
]
|
||||
})
|
||||
if (!popupRes) {
|
||||
return
|
||||
}
|
||||
if (popupRes.key === 'search') {
|
||||
searchText.value = popupRes.text
|
||||
} else if (popupRes.key === 'reset') {
|
||||
handleSearchReset()
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearchReset = () => {
|
||||
searchText.value = ''
|
||||
}
|
||||
onMounted(async () => {
|
||||
await setCurrentDirectory(currentDirectory.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$top-height: 30px;
|
||||
$bottom-bar-height: 60px;
|
||||
|
||||
.miao-directory-item-container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-width: 170px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { registerComponentOption } from '@/class/PluginCenter'
|
||||
import LogoChrome from '@vicons/ionicons5/es/LogoChrome'
|
||||
|
||||
const pluginConfig: registerComponentOption = {
|
||||
key: 'miaoIframe',
|
||||
name: '框架',
|
||||
icon: LogoChrome,
|
||||
getComponent: async () =>
|
||||
(await import('@/plugins/miaoIframe/miaoIframe.vue')).default,
|
||||
filter: (vDirs, vFiles) => {
|
||||
if (vDirs.length !== 0) {
|
||||
return false
|
||||
}
|
||||
if (vFiles.length !== 1) {
|
||||
return false
|
||||
}
|
||||
return vFiles[0].name.endsWith('html')
|
||||
},
|
||||
priority: 2
|
||||
}
|
||||
|
||||
export default pluginConfig
|
||||
|
||||
import { PluginExportType } from '@/types/type'
|
||||
export const type = PluginExportType.component
|
||||
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="miao-markdown-container-miaomiaomiao">
|
||||
<iframe
|
||||
ref="iframeRef"
|
||||
:src="iframeSrc"
|
||||
frameborder="0"
|
||||
class="iframe-container-iframe"></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { inject, onMounted, ref } from 'vue'
|
||||
import buildFromTree from '../../utils/buildFromTree'
|
||||
|
||||
const root = inject('rootDirectory') as VirtualDirectory
|
||||
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
||||
required: true
|
||||
})
|
||||
|
||||
const iframeSrc = ref<string>()
|
||||
const iframeRef = ref<HTMLIFrameElement>()
|
||||
|
||||
const sendRootTree = () => {
|
||||
iframeRef.value?.contentWindow &&
|
||||
iframeRef.value.contentWindow.postMessage(cloneDeep(root.tree), '*')
|
||||
}
|
||||
|
||||
const handleIframeMessage = (e: MessageEvent<any>) => {
|
||||
e
|
||||
// const data = e.data;
|
||||
sendRootTree()
|
||||
}
|
||||
onMounted(() => {
|
||||
iframeSrc.value = currentFiles.value[0].url
|
||||
if (typeof window.addEventListener != 'undefined') {
|
||||
window.addEventListener('message', handleIframeMessage, false)
|
||||
}
|
||||
console.log(buildFromTree(cloneDeep(root.tree)))
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.miao-markdown-container-miaomiaomiao {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.iframe-container-iframe {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,48 @@
|
||||
import { registerComponentOption } from '@/class/PluginCenter'
|
||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
||||
import { Image } from '@vicons/ionicons5'
|
||||
|
||||
const pluginConfig: registerComponentOption = {
|
||||
key: 'miaoImages',
|
||||
name: '图片浏览',
|
||||
icon: Image,
|
||||
getComponent: async () =>
|
||||
(await import('@/plugins/miaoImages/miaoImages.vue')).default,
|
||||
filter: (vDirs: VirtualDirectory[], vFiles: VirtualFile[]) => {
|
||||
if (vDirs.length === 0 && vFiles.length === 0) {
|
||||
return false
|
||||
}
|
||||
if (vDirs.length) {
|
||||
return true
|
||||
}
|
||||
for (let vf of vFiles)
|
||||
for (let end of [
|
||||
'xbm',
|
||||
'tif',
|
||||
'pjp',
|
||||
'svgz',
|
||||
'jpg',
|
||||
'jpeg',
|
||||
'ico',
|
||||
'tiff',
|
||||
'gif',
|
||||
'svg',
|
||||
'jfif',
|
||||
'webp',
|
||||
'png',
|
||||
'.bmp',
|
||||
'pjpeg',
|
||||
'avif'
|
||||
]) {
|
||||
if (vf.name.endsWith(end)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
export default pluginConfig
|
||||
|
||||
import { PluginExportType } from '@/types/type'
|
||||
export const type = PluginExportType.component
|
||||
@@ -0,0 +1,363 @@
|
||||
<template>
|
||||
<miao-drop-handler
|
||||
@on-virtual-directory="handleDrop"
|
||||
@on-virtual-files="handleDrop">
|
||||
<miao-message-provider ref="miaoMessageRef">
|
||||
<div class="miaoImage" ref="rootRef">
|
||||
<n-scrollbar ref="NScrollbarRef" style="max-height: 100%">
|
||||
<div
|
||||
class="miaoImage-container"
|
||||
v-for="imageGroup in imageGroupList">
|
||||
<div class="miaoImage-container-day">
|
||||
<!-- <div class="miaoImage-container-divide miaoImage-container-divide-before">
|
||||
<div class="miaoImage-container-divide-line"></div>
|
||||
</div> -->
|
||||
<span class="miaoImage-container-day-text">
|
||||
{{ imageGroup.day }}
|
||||
</span>
|
||||
<!-- <div class="miaoImage-container-divide">
|
||||
<div class="miaoImage-container-divide-line"></div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div
|
||||
class="miaoImage-container-row"
|
||||
v-for="vFile in imageGroup.items"
|
||||
:key="vFile.id">
|
||||
<img
|
||||
:src="vFile.url"
|
||||
class="miaoImage-container-row-image"
|
||||
loading="lazy"
|
||||
:class="
|
||||
activeImage === vFile
|
||||
? 'miaoImage-container-row-image-active'
|
||||
: ''
|
||||
"
|
||||
@click="activeImage = vFile" />
|
||||
</div>
|
||||
</div>
|
||||
</n-scrollbar>
|
||||
<miao-mask
|
||||
:show="activeImage !== undefined"
|
||||
@click="activeImage = undefined"
|
||||
class="miaoImage-mask"
|
||||
@wheel="handleWheel">
|
||||
<ChevronBack
|
||||
class="miaoImage-mask-btn miaoImage-mask-btn-back"
|
||||
@click="handleActiveImageBack" />
|
||||
<img
|
||||
:src="activeImage?.url"
|
||||
class="miaoImage-mask-active"
|
||||
@click="(e) => e.stopPropagation()"
|
||||
draggable="false"
|
||||
:style="{ transform: `scale(${imgViewScale})` }" />
|
||||
<ChevronForward
|
||||
class="miaoImage-mask-btn miaoImage-mask-btn-forward"
|
||||
@click="handleActiveImageForward" />
|
||||
</miao-mask>
|
||||
</div>
|
||||
</miao-message-provider>
|
||||
</miao-drop-handler>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import miaoMask from '@/components/miaoMask.vue'
|
||||
import miaoDropHandler from '@/components/miaoDropHandler.vue'
|
||||
import miaoMessageProvider from '@/components/miaoAlertTipProvider.vue'
|
||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
||||
import uniq from 'lodash/uniq'
|
||||
import { computed, nextTick, onMounted, ref, watch } from 'vue'
|
||||
import { NScrollbar } from 'naive-ui'
|
||||
import { ChevronBack, ChevronForward } from '@vicons/ionicons5'
|
||||
|
||||
const imageSuffixList = [
|
||||
'xbm',
|
||||
'tif',
|
||||
'pjp',
|
||||
'svgz',
|
||||
'jpg',
|
||||
'jpeg',
|
||||
'ico',
|
||||
'tiff',
|
||||
'gif',
|
||||
'svg',
|
||||
'jfif',
|
||||
'webp',
|
||||
'png',
|
||||
'bmp',
|
||||
'pjpeg',
|
||||
'avif'
|
||||
]
|
||||
|
||||
const currentDirectories = defineModel<VirtualDirectory[]>(
|
||||
'currentDirectories',
|
||||
{
|
||||
required: true
|
||||
}
|
||||
)
|
||||
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
||||
required: true
|
||||
})
|
||||
|
||||
const NScrollbarRef = ref()
|
||||
const rootRef = ref<any>()
|
||||
const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
|
||||
const imgViewScale = ref(1)
|
||||
const imageFileList = ref<VirtualFile[]>([])
|
||||
const activeImage = ref<VirtualFile>()
|
||||
|
||||
const imageGroupList = computed(() => {
|
||||
return groupByDay(imageFileList.value)
|
||||
})
|
||||
|
||||
watch(activeImage, () => {
|
||||
nextTick(scrollToActiveImage)
|
||||
imgViewScale.value = 1
|
||||
})
|
||||
|
||||
const groupByDay = (array: VirtualFile[]) => {
|
||||
const result = []
|
||||
let currentDay = null
|
||||
let currentGroup: VirtualFile[] = []
|
||||
|
||||
for (const item of array) {
|
||||
const date = new Date(item.stats.mtimeMs)
|
||||
const day = `${date.getFullYear()}年 ${String(
|
||||
date.getMonth() + 1
|
||||
).padStart(2, '0')}月 ${String(date.getDate()).padStart(2, '0')}日`
|
||||
|
||||
if (day !== currentDay) {
|
||||
if (currentGroup.length > 0) {
|
||||
result.push({
|
||||
day: currentDay,
|
||||
items: currentGroup
|
||||
})
|
||||
}
|
||||
currentDay = day
|
||||
currentGroup = [item]
|
||||
} else {
|
||||
currentGroup.push(item)
|
||||
}
|
||||
}
|
||||
if (currentGroup.length > 0) {
|
||||
result.push({
|
||||
day: currentDay,
|
||||
items: currentGroup
|
||||
})
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
const scrollToActiveImage = () => {
|
||||
const dom = rootRef.value?.querySelector(
|
||||
'.miaoImage-container-row-image-active'
|
||||
)
|
||||
dom &&
|
||||
NScrollbarRef.value.scrollTo({
|
||||
top: dom.offsetTop - 30,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
|
||||
const handleActiveImageBack = (e: any) => {
|
||||
e.stopPropagation()
|
||||
if (!activeImage.value) {
|
||||
return
|
||||
}
|
||||
const index = imageFileList.value.indexOf(activeImage.value)
|
||||
activeImage.value =
|
||||
imageFileList.value[
|
||||
(index - 1 + imageFileList.value.length) % imageFileList.value.length
|
||||
]
|
||||
}
|
||||
|
||||
const handleActiveImageForward = (e: any) => {
|
||||
e.stopPropagation()
|
||||
if (!activeImage.value) {
|
||||
return
|
||||
}
|
||||
const index = imageFileList.value.indexOf(activeImage.value)
|
||||
activeImage.value =
|
||||
imageFileList.value[
|
||||
(index + 1 + imageFileList.value.length) % imageFileList.value.length
|
||||
]
|
||||
}
|
||||
|
||||
const handleDrop = async (vItems: (VirtualFile | VirtualDirectory)[]) => {
|
||||
const length_before = imageFileList.value.length
|
||||
if (vItems[0].type === 'directory') {
|
||||
// @ts-ignore
|
||||
currentDirectories.value = [...currentDirectories.value, ...vItems]
|
||||
for (const i of vItems) {
|
||||
// @ts-ignore
|
||||
await updateImageSrcList(i)
|
||||
}
|
||||
} else {
|
||||
// @ts-ignore
|
||||
currentFiles.value = [...currentFiles, ...vItems]
|
||||
// @ts-ignore
|
||||
await updateImageSrcList(vItems)
|
||||
}
|
||||
miaoMessageRef.value?.alertTip(
|
||||
length_before === imageFileList.value.length
|
||||
? '未发现任何可添加图片'
|
||||
: `导入${imageFileList.value.length - length_before}张图片`,
|
||||
{
|
||||
type:
|
||||
length_before === imageFileList.value.length ? 'info' : 'success',
|
||||
timeout: 5000
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const updateImageSrcList = async (source: VirtualFile[] | VirtualDirectory) => {
|
||||
let newFileList: VirtualFile[]
|
||||
if ('type' in source) {
|
||||
await source.update()
|
||||
newFileList = [
|
||||
...(source.files?.filter((v) =>
|
||||
imageSuffixList.includes(v.name.split('.').pop() ?? '')
|
||||
) ?? [])
|
||||
]
|
||||
} else {
|
||||
newFileList = [
|
||||
...(source.filter((v) =>
|
||||
imageSuffixList.includes(v.name.split('.').pop() ?? '')
|
||||
) ?? [])
|
||||
]
|
||||
}
|
||||
imageFileList.value = uniq([...imageFileList.value, ...newFileList]).sort(
|
||||
(a, b) => -a.stats.mtimeMs + b.stats.mtimeMs
|
||||
)
|
||||
}
|
||||
|
||||
const handleWheel = (e: WheelEvent) => {
|
||||
if (e.deltaY < 0) {
|
||||
imgViewScale.value *= 1.42857
|
||||
} else {
|
||||
imgViewScale.value /= 1.42857
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const length_before = imageFileList.value.length
|
||||
for (const i of [currentFiles.value, ...currentDirectories.value]) {
|
||||
await updateImageSrcList(i)
|
||||
}
|
||||
miaoMessageRef.value?.alertTip(
|
||||
length_before === imageFileList.value.length
|
||||
? '未发现任何新增图片'
|
||||
: `导入${imageFileList.value.length - length_before}张图片`,
|
||||
{
|
||||
type:
|
||||
length_before === imageFileList.value.length ? 'info' : 'success',
|
||||
timeout: 5000
|
||||
}
|
||||
)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.miaoImage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
|
||||
.miaoImage-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 20px;
|
||||
|
||||
.miaoImage-container-day {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
margin: 0 20px;
|
||||
|
||||
.miaoImage-container-divide {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.miaoImage-container-divide-line {
|
||||
height: 3px;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
background-color: rgb(244 244 244);
|
||||
}
|
||||
|
||||
.miaoImage-container-divide-before {
|
||||
flex: 0.1;
|
||||
}
|
||||
|
||||
.miaoImage-container-day-text {
|
||||
margin: 0 0 0 10px;
|
||||
font-size: 15px;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.miaoImage-container-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 25%;
|
||||
aspect-ratio: 1;
|
||||
|
||||
.miaoImage-container-row-image {
|
||||
width: 80%;
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover;
|
||||
transition: width 0.25s;
|
||||
box-shadow: 0 0 10px -5px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
&-active {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.miaoImage-mask {
|
||||
background-color: rgba(0, 0, 0, 0.444);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.miaoImage-mask-active {
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.miaoImage-mask-btn {
|
||||
color: #ffffff99;
|
||||
width: 7%;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
|
||||
&-back {
|
||||
left: 1%;
|
||||
}
|
||||
|
||||
&-forward {
|
||||
right: 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,24 @@
|
||||
import { registerComponentOption } from '@/class/PluginCenter'
|
||||
import DocumentText from '@vicons/ionicons5/es/DocumentText'
|
||||
|
||||
const pluginConfig: registerComponentOption = {
|
||||
key: 'miaoMarkdown',
|
||||
name: 'markdown浏览',
|
||||
icon: DocumentText,
|
||||
getComponent: async () =>
|
||||
(await import('@/plugins/miaoMarkdown/miaoMarkdown.vue')).default,
|
||||
filter: (vDirs, vFiles) => {
|
||||
if (vDirs.length !== 0) {
|
||||
return false
|
||||
}
|
||||
if (vFiles.length !== 1) {
|
||||
return false
|
||||
}
|
||||
return vFiles[0].name.endsWith('md')
|
||||
}
|
||||
}
|
||||
|
||||
export default pluginConfig
|
||||
|
||||
import { PluginExportType } from '@/types/type'
|
||||
export const type = PluginExportType.component
|
||||
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<n-scrollbar>
|
||||
<div
|
||||
class="miao-markdown-container-miaomiaomiao"
|
||||
v-html="renderedMarkdown"></div>
|
||||
<div style="height: 50px; width: 100%"></div>
|
||||
</n-scrollbar>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NScrollbar } from 'naive-ui'
|
||||
import { VirtualFile } from '@/class/VirtualDirectory'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import MarkdownIt from 'markdown-it'
|
||||
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
||||
|
||||
const decoder = new TextDecoder('utf-8')
|
||||
|
||||
const miaoFetchApi = useMiaoFetchApi()
|
||||
|
||||
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
||||
required: true
|
||||
})
|
||||
|
||||
const markdownSrc = ref<string>()
|
||||
const renderedMarkdown = ref<string>('')
|
||||
|
||||
const md = new MarkdownIt()
|
||||
|
||||
onMounted(async () => {
|
||||
markdownSrc.value = currentFiles.value[0].url
|
||||
const text = decoder.decode(
|
||||
await miaoFetchApi.getFile(currentFiles.value[0]).response
|
||||
)
|
||||
renderedMarkdown.value = md.render(text)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.miao-markdown-container-miaomiaomiao {
|
||||
width: 95%;
|
||||
margin: 20px;
|
||||
|
||||
table,
|
||||
td,
|
||||
th {
|
||||
border: 1px solid #ddd;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #04aa6d;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,36 @@
|
||||
import { registerComponentOption } from '@/class/PluginCenter'
|
||||
import { PluginExportType } from '@/types/type'
|
||||
import Disc from '@vicons/ionicons5/es/Disc'
|
||||
|
||||
const pluginConfig: registerComponentOption = {
|
||||
key: 'miaoMusicPlayer',
|
||||
name: '音乐',
|
||||
icon: Disc,
|
||||
getComponent: async () => (await import('./miaoMusicPlayer.vue')).default,
|
||||
filter: (vDirs, vFiles) => {
|
||||
if (vDirs.length === 0 && vFiles.length === 0) {
|
||||
return true
|
||||
}
|
||||
if (vDirs.length !== 0) {
|
||||
return false
|
||||
}
|
||||
if (vFiles.length === 0) {
|
||||
return false
|
||||
}
|
||||
for (let i of vFiles) {
|
||||
for (let s of ['mp3', 'flac', 'ogg', 'mp4']) {
|
||||
if (i.name.endsWith(s)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
return false
|
||||
},
|
||||
disable: false,
|
||||
single: true,
|
||||
priority: 5
|
||||
}
|
||||
|
||||
export default pluginConfig
|
||||
|
||||
export const type = PluginExportType.component
|
||||
@@ -0,0 +1,26 @@
|
||||
import { Plugin, PluginGroup } from '@/class/PluginCenter'
|
||||
import { PluginExportType } from '@/types/type'
|
||||
import { shallowRef } from 'vue'
|
||||
import Disc from '@vicons/ionicons5/es/Disc'
|
||||
|
||||
const pluginConfig: Plugin = {
|
||||
name: '音乐',
|
||||
icon: shallowRef(Disc),
|
||||
filter: (_, __, views) => {
|
||||
return views.find('miaoMusicPlayer').length === 0
|
||||
},
|
||||
disable: false,
|
||||
group: [PluginGroup.mainMenu],
|
||||
func(_, __, hooks) {
|
||||
const { getPluginCenter } = hooks
|
||||
const PluginCenter = getPluginCenter()
|
||||
PluginCenter.usePlugin('miaoMusicPlayer', [], [])
|
||||
},
|
||||
priority: -1
|
||||
}
|
||||
|
||||
export default pluginConfig
|
||||
|
||||
export const type = PluginExportType.default
|
||||
|
||||
export const key = 'musicPlayer-mainMenu'
|
||||
@@ -0,0 +1,51 @@
|
||||
import { createApp, Reactive } from 'vue'
|
||||
import aplayerListNew from '../src/components/aplayerListNew.vue'
|
||||
import apType, { audioType } from '../types/ap'
|
||||
|
||||
export type aplayerMiaoOption = {
|
||||
onDragItemStart?: () => void
|
||||
onDragItemEnd?: () => void
|
||||
onPlayVideo?: (element: audioType) => void
|
||||
onSaveCollection?: (audios: audioType[]) => void
|
||||
}
|
||||
|
||||
/**
|
||||
* 对aplayer进行一些自定义的风格优化
|
||||
*/
|
||||
const useAplayerMiao = (ap: Reactive<apType>, options?: aplayerMiaoOption) => {
|
||||
const container = ap.container as HTMLDivElement
|
||||
|
||||
// 隐藏旧版歌单
|
||||
const old_listDom = container.querySelector(
|
||||
'.aplayer-list'
|
||||
) as HTMLDivElement
|
||||
old_listDom.style.display = 'none'
|
||||
|
||||
// 新版歌单
|
||||
const new_list_dom = document.createElement('div')
|
||||
new_list_dom.classList.add('aplayer-list')
|
||||
new_list_dom.style.maxHeight = ap.options.listMaxHeight
|
||||
|
||||
ap.on('listadd', () => {
|
||||
ap.list.audios.forEach((v) => {
|
||||
!v.id && (v.id = Math.random())
|
||||
})
|
||||
})
|
||||
ap.on('listshow', () => {
|
||||
new_list_dom.classList.remove('aplayer-list-hide')
|
||||
})
|
||||
ap.on('listhide', () => {
|
||||
new_list_dom.classList.add('aplayer-list-hide')
|
||||
})
|
||||
|
||||
container.appendChild(new_list_dom)
|
||||
const app = createApp(aplayerListNew, { ap, ...(options ?? {}) })
|
||||
app.mount(new_list_dom)
|
||||
|
||||
ap.on('destroy', () => {
|
||||
app.unmount()
|
||||
})
|
||||
return app
|
||||
}
|
||||
|
||||
export default useAplayerMiao
|
||||
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<miao-drop-handler @on-virtual-files="handleDropVFiles">
|
||||
<miao-alert-tip-provider ref="miaoMessageRef">
|
||||
<div class="miaoMusic-container">
|
||||
<miao-music-main
|
||||
v-if="ap"
|
||||
:ap="ap"
|
||||
v-model:data="data"
|
||||
:updateLocalData="updateLocalData"
|
||||
@new-collection="saveCurrPlayList"></miao-music-main>
|
||||
<miao-mask
|
||||
:show="isAPlayerListShow"
|
||||
style="z-index: 5"
|
||||
@click="() => ap?.list.hide()"></miao-mask>
|
||||
<div ref="aplayer" style="z-index: 10" />
|
||||
<miao-mask
|
||||
:show="isSavingCollection"
|
||||
@click="isSavingCollection = false"></miao-mask>
|
||||
</div>
|
||||
</miao-alert-tip-provider>
|
||||
</miao-drop-handler>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import useAplayerMiao from './hooks/aplayerMiao'
|
||||
import { VirtualFile } from '@/class/VirtualDirectory'
|
||||
import {
|
||||
App,
|
||||
onBeforeMount,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
reactive,
|
||||
ref,
|
||||
toRaw,
|
||||
watch
|
||||
} from 'vue'
|
||||
import './src/APlayer.fix.css'
|
||||
// @ts-ignore
|
||||
import APlayer from 'APlayer'
|
||||
import config from '@/config'
|
||||
import difference from 'lodash/difference'
|
||||
import uniq from 'lodash/uniq'
|
||||
import apType from './types/ap'
|
||||
import miaoDropHandler from '@/components/miaoDropHandler.vue'
|
||||
import miaoAlertTipProvider from '@/components/miaoAlertTipProvider.vue'
|
||||
import usePluginCenter from '@/hooks/usePluginCenter'
|
||||
import VirtualPage from '@/class/VirtualPage'
|
||||
import miaoMask from '@/components/miaoMask.vue'
|
||||
import miaoMusicMain from './src/main.vue'
|
||||
import collectionType from './types/collection'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import localForage from 'localforage'
|
||||
import debounce from 'lodash/debounce'
|
||||
|
||||
const pluginCenter = usePluginCenter()
|
||||
let ap = ref<apType>()
|
||||
let vueApp: App<Element>
|
||||
|
||||
const miaoMessageRef = ref<InstanceType<typeof miaoAlertTipProvider>>()
|
||||
const aplayer = ref<any>(null)
|
||||
const isAPlayerListShow = ref(true)
|
||||
const isSavingCollection = ref(false)
|
||||
|
||||
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
||||
required: true
|
||||
})
|
||||
|
||||
const props = defineProps<{
|
||||
view: VirtualPage
|
||||
}>()
|
||||
|
||||
const data = ref<collectionType[]>()
|
||||
|
||||
watch(
|
||||
data,
|
||||
(_v, oldV) => {
|
||||
updateLocalData(oldV !== undefined)
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => currentFiles.value,
|
||||
(value, oldValue) => {
|
||||
const diff = difference(value, oldValue)
|
||||
if (diff.length > 0) {
|
||||
const _s = `等${diff.length}个资源`
|
||||
miaoMessageRef.value?.alertTip(
|
||||
`已添加 ${diff[0].name}${diff.length !== 1 ? _s : ''}`,
|
||||
{
|
||||
type: 'success',
|
||||
timeout: 3000
|
||||
}
|
||||
)
|
||||
ap?.value?.list.add(getMusicList(diff))
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const getMusicList = (mp3VFiles: VirtualFile[]) =>
|
||||
mp3VFiles.map((v, index) => ({
|
||||
url: `${config.baseUrl}${v.url}`,
|
||||
name: v.name,
|
||||
artist: ' ',
|
||||
index
|
||||
}))
|
||||
|
||||
const handleDropVFiles = (files: VirtualFile[]) => {
|
||||
currentFiles.value = uniq([...currentFiles.value, ...files])
|
||||
}
|
||||
|
||||
const saveCurrPlayList = () => {
|
||||
if (ap.value) {
|
||||
data.value?.unshift({
|
||||
id: Math.random(),
|
||||
name: `新建歌单-${new Date()}`,
|
||||
intro: 'none',
|
||||
createTime: new Date(),
|
||||
coverUrl: '',
|
||||
audios: cloneDeep(ap.value.list.audios).map((v, i) => ({
|
||||
...v,
|
||||
index: i
|
||||
}))
|
||||
})
|
||||
miaoMessageRef.value?.alertTip('已创建新的歌单', {
|
||||
timeout: 1000,
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const initAPlayerMiao = () => {
|
||||
const aplayerOption = {
|
||||
container: aplayer.value,
|
||||
audio: getMusicList(currentFiles.value),
|
||||
autoplay: true,
|
||||
volume: 1,
|
||||
theme: '#60e8a2',
|
||||
listMaxHeight: '500px'
|
||||
}
|
||||
ap.value = reactive<apType>(new APlayer(aplayerOption))
|
||||
vueApp = useAplayerMiao(ap.value, {
|
||||
onDragItemStart: () => {},
|
||||
onDragItemEnd: () => {},
|
||||
onPlayVideo: (element) => {
|
||||
pluginCenter.usePlugin(
|
||||
'miaoVideoPlayer',
|
||||
[],
|
||||
[
|
||||
currentFiles.value.find(
|
||||
(v) => v.name === element.name
|
||||
) as VirtualFile
|
||||
]
|
||||
)
|
||||
},
|
||||
onSaveCollection: saveCurrPlayList
|
||||
})
|
||||
ap.value.on('listremove', (...args: any) => {
|
||||
const { index } = args[0] as { index: number }
|
||||
const _name = ap?.value?.list.audios[index].name
|
||||
currentFiles.value = currentFiles.value.filter((v) => v.name !== _name)
|
||||
})
|
||||
ap.value.on('play', () => {
|
||||
const name = ap.value?.list.audios[ap.value.list.index].name as string
|
||||
props.view.setTitle(name)
|
||||
})
|
||||
ap.value.on('listshow', () => {
|
||||
isAPlayerListShow.value = true
|
||||
})
|
||||
ap.value.on('listhide', () => {
|
||||
isAPlayerListShow.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const updateLocalData = debounce(
|
||||
(log?: boolean) => {
|
||||
log &&
|
||||
miaoMessageRef.value?.alertTip(`保存设置成功`, {
|
||||
type: 'success',
|
||||
timeout: 999
|
||||
})
|
||||
localForage.setItem(
|
||||
'miaoMusic-storage-musicCollections',
|
||||
toRaw(data.value)
|
||||
)
|
||||
},
|
||||
1000,
|
||||
{
|
||||
leading: false,
|
||||
trailing: true
|
||||
}
|
||||
)
|
||||
const getLocalData = async () => {
|
||||
const _data =
|
||||
((await localForage.getItem(
|
||||
'miaoMusic-storage-musicCollections'
|
||||
)) as collectionType[]) ?? []
|
||||
_data.forEach((v) => v.audios.sort((a, b) => a.index - b.index))
|
||||
data.value = _data
|
||||
console.log('data ==>', toRaw(data.value))
|
||||
}
|
||||
onBeforeMount(async () => {
|
||||
await getLocalData()
|
||||
})
|
||||
onMounted(async () => {
|
||||
currentFiles.value = [...currentFiles.value.reverse()]
|
||||
initAPlayerMiao()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
vueApp.unmount()
|
||||
ap?.value?.destroy()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.miaoMusic-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.aplayer {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
width: -webkit-fill-available;
|
||||
|
||||
.aplayer-icon-order,
|
||||
.aplayer-icon-loop {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,803 @@
|
||||
.aplayer {
|
||||
background: #fff;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
margin: 5px;
|
||||
box-shadow:
|
||||
0 2px 2px 0 rgba(0, 0, 0, 0.07),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
line-height: normal;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.aplayer * {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.aplayer svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* .aplayer svg circle,
|
||||
.aplayer svg path {
|
||||
fill: #fff
|
||||
} */
|
||||
|
||||
.aplayer.aplayer-withlist .aplayer-info {
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
.aplayer.aplayer-withlist .aplayer-list {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.aplayer.aplayer-withlist .aplayer-icon-order,
|
||||
.aplayer.aplayer-withlist
|
||||
.aplayer-info
|
||||
.aplayer-controller
|
||||
.aplayer-time
|
||||
.aplayer-icon.aplayer-icon-menu {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.aplayer.aplayer-withlrc .aplayer-pic {
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.aplayer.aplayer-withlrc .aplayer-info {
|
||||
margin-left: 90px;
|
||||
height: 90px;
|
||||
padding: 10px 7px 0;
|
||||
}
|
||||
|
||||
.aplayer.aplayer-withlrc .aplayer-lrc {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.aplayer.aplayer-narrow {
|
||||
width: 66px;
|
||||
}
|
||||
|
||||
.aplayer.aplayer-narrow .aplayer-info,
|
||||
.aplayer.aplayer-narrow .aplayer-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.aplayer.aplayer-narrow .aplayer-body,
|
||||
.aplayer.aplayer-narrow .aplayer-pic {
|
||||
height: 66px;
|
||||
width: 66px;
|
||||
}
|
||||
|
||||
.aplayer.aplayer-fixed {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
z-index: 99;
|
||||
overflow: visible;
|
||||
max-width: 400px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.aplayer.aplayer-fixed .aplayer-list {
|
||||
margin-bottom: 65px;
|
||||
border: 1px solid #eee;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.aplayer.aplayer-fixed .aplayer-body {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
z-index: 99;
|
||||
background: #fff;
|
||||
padding-right: 18px;
|
||||
transition: all 0.3s ease;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.aplayer.aplayer-fixed .aplayer-lrc {
|
||||
display: block;
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
z-index: 98;
|
||||
pointer-events: none;
|
||||
text-shadow: -1px -1px 0 #fff;
|
||||
}
|
||||
|
||||
.aplayer.aplayer-fixed .aplayer-lrc:after,
|
||||
.aplayer.aplayer-fixed .aplayer-lrc:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.aplayer.aplayer-fixed .aplayer-info {
|
||||
-webkit-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
transition: all 0.3s ease;
|
||||
border-bottom: none;
|
||||
border-top: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
.aplayer.aplayer-fixed .aplayer-info .aplayer-music {
|
||||
width: calc(100% - 105px);
|
||||
}
|
||||
|
||||
.aplayer.aplayer-fixed .aplayer-miniswitcher {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-info {
|
||||
display: block;
|
||||
-webkit-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
|
||||
width: 66px !important;
|
||||
}
|
||||
|
||||
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-miniswitcher .aplayer-icon {
|
||||
-webkit-transform: rotateY(0);
|
||||
transform: rotateY(0);
|
||||
}
|
||||
|
||||
.aplayer.aplayer-fixed .aplayer-icon-back,
|
||||
.aplayer.aplayer-fixed .aplayer-icon-forward,
|
||||
.aplayer.aplayer-fixed .aplayer-icon-lrc,
|
||||
.aplayer.aplayer-fixed .aplayer-icon-play {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.aplayer.aplayer-fixed .aplayer-icon-back,
|
||||
.aplayer.aplayer-fixed .aplayer-icon-forward,
|
||||
.aplayer.aplayer-fixed .aplayer-icon-menu,
|
||||
.aplayer.aplayer-fixed .aplayer-icon-play {
|
||||
position: absolute;
|
||||
bottom: 27px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.aplayer.aplayer-fixed .aplayer-icon-back {
|
||||
right: 75px;
|
||||
}
|
||||
|
||||
.aplayer.aplayer-fixed .aplayer-icon-play {
|
||||
right: 50px;
|
||||
}
|
||||
|
||||
.aplayer.aplayer-fixed .aplayer-icon-forward {
|
||||
right: 25px;
|
||||
}
|
||||
|
||||
.aplayer.aplayer-fixed .aplayer-icon-menu {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.aplayer.aplayer-arrow .aplayer-icon-loop,
|
||||
.aplayer.aplayer-arrow .aplayer-icon-order,
|
||||
.aplayer.aplayer-mobile .aplayer-icon-volume-down {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.aplayer.aplayer-loading
|
||||
.aplayer-info
|
||||
.aplayer-controller
|
||||
.aplayer-loading-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.aplayer.aplayer-loading
|
||||
.aplayer-info
|
||||
.aplayer-controller
|
||||
.aplayer-bar-wrap
|
||||
.aplayer-bar
|
||||
.aplayer-played
|
||||
.aplayer-thumb {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.aplayer .aplayer-body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
vertical-align: middle;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-icon path {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-icon-back,
|
||||
.aplayer .aplayer-icon-forward,
|
||||
.aplayer .aplayer-icon-lrc,
|
||||
.aplayer .aplayer-icon-order,
|
||||
.aplayer .aplayer-icon-play {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-icon-lrc-inactivity svg {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-icon-forward {
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.aplayer .aplayer-lrc-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-pic {
|
||||
position: relative;
|
||||
float: left;
|
||||
height: 66px;
|
||||
width: 66px;
|
||||
background-size: cover;
|
||||
background-position: 50%;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-pic:hover .aplayer-button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-pic .aplayer-button {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.8;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-pic .aplayer-button path {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-pic .aplayer-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-pic .aplayer-play {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: 2px solid #fff;
|
||||
bottom: 50%;
|
||||
right: 50%;
|
||||
margin: 0 -15px -15px 0;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-pic .aplayer-play svg {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 4px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-pic .aplayer-pause {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid #fff;
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-pic .aplayer-pause svg {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-info {
|
||||
margin-left: 66px;
|
||||
padding: 14px 7px 0 10px;
|
||||
height: 66px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-info .aplayer-music {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0 0 13px 5px;
|
||||
-webkit-user-select: text;
|
||||
-moz-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
cursor: default;
|
||||
padding-bottom: 2px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-info .aplayer-music .aplayer-title {
|
||||
font-size: 14px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-info .aplayer-music .aplayer-author {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-info .aplayer-controller {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
|
||||
margin: 0 0 0 5px;
|
||||
padding: 4px 0;
|
||||
cursor: pointer !important;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.aplayer
|
||||
.aplayer-info
|
||||
.aplayer-controller
|
||||
.aplayer-bar-wrap:hover
|
||||
.aplayer-bar
|
||||
.aplayer-played
|
||||
.aplayer-thumb {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
|
||||
position: relative;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background: #cdcdcd;
|
||||
}
|
||||
|
||||
.aplayer
|
||||
.aplayer-info
|
||||
.aplayer-controller
|
||||
.aplayer-bar-wrap
|
||||
.aplayer-bar
|
||||
.aplayer-loaded {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: #aaa;
|
||||
height: 2px;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.aplayer
|
||||
.aplayer-info
|
||||
.aplayer-controller
|
||||
.aplayer-bar-wrap
|
||||
.aplayer-bar
|
||||
.aplayer-played {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.aplayer
|
||||
.aplayer-info
|
||||
.aplayer-controller
|
||||
.aplayer-bar-wrap
|
||||
.aplayer-bar
|
||||
.aplayer-played
|
||||
.aplayer-thumb {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 5px;
|
||||
margin-top: -4px;
|
||||
margin-right: -10px;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease-in-out;
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time {
|
||||
position: relative;
|
||||
right: 0;
|
||||
bottom: 4px;
|
||||
height: 17px;
|
||||
color: #999;
|
||||
font-size: 11px;
|
||||
padding-left: 7px;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-time-inner {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {
|
||||
fill: #666;
|
||||
}
|
||||
|
||||
.aplayer
|
||||
.aplayer-info
|
||||
.aplayer-controller
|
||||
.aplayer-time
|
||||
.aplayer-icon.aplayer-icon-loop {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.aplayer
|
||||
.aplayer-info
|
||||
.aplayer-controller
|
||||
.aplayer-time
|
||||
.aplayer-icon:hover
|
||||
path {
|
||||
fill: #000;
|
||||
}
|
||||
|
||||
/* .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu,
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-menu,
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-time.aplayer-time-narrow .aplayer-icon-mode {
|
||||
display: none
|
||||
} */
|
||||
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: 3px;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.aplayer
|
||||
.aplayer-info
|
||||
.aplayer-controller
|
||||
.aplayer-volume-wrap:hover
|
||||
.aplayer-volume-bar-wrap {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.aplayer
|
||||
.aplayer-info
|
||||
.aplayer-controller
|
||||
.aplayer-volume-wrap
|
||||
.aplayer-volume-bar-wrap {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
right: -3px;
|
||||
width: 25px;
|
||||
height: 0;
|
||||
z-index: 99;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.aplayer
|
||||
.aplayer-info
|
||||
.aplayer-controller
|
||||
.aplayer-volume-wrap
|
||||
.aplayer-volume-bar-wrap.aplayer-volume-bar-wrap-active {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.aplayer
|
||||
.aplayer-info
|
||||
.aplayer-controller
|
||||
.aplayer-volume-wrap
|
||||
.aplayer-volume-bar-wrap
|
||||
.aplayer-volume-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 10px;
|
||||
width: 5px;
|
||||
height: 35px;
|
||||
background: #aaa;
|
||||
border-radius: 2.5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.aplayer
|
||||
.aplayer-info
|
||||
.aplayer-controller
|
||||
.aplayer-volume-wrap
|
||||
.aplayer-volume-bar-wrap
|
||||
.aplayer-volume-bar
|
||||
.aplayer-volume {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 5px;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-loading-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-info .aplayer-controller .aplayer-loading-icon svg {
|
||||
position: absolute;
|
||||
-webkit-animation: rotate 1s linear infinite;
|
||||
animation: rotate 1s linear infinite;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-lrc {
|
||||
display: none;
|
||||
position: relative;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
margin: -10px 0 7px;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-lrc:before {
|
||||
top: 0;
|
||||
height: 10%;
|
||||
background: linear-gradient(180deg, #fff 0, hsla(0, 0%, 100%, 0));
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#00ffffff", GradientType=0);
|
||||
}
|
||||
|
||||
.aplayer .aplayer-lrc:after,
|
||||
.aplayer .aplayer-lrc:before {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
.aplayer .aplayer-lrc:after {
|
||||
bottom: 0;
|
||||
height: 33%;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
hsla(0, 0%, 100%, 0) 0,
|
||||
hsla(0, 0%, 100%, 0.8)
|
||||
);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffffff", endColorstr="#ccffffff", GradientType=0);
|
||||
}
|
||||
|
||||
.aplayer .aplayer-lrc p {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
line-height: 16px !important;
|
||||
height: 16px !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
transition: all 0.5s ease-out;
|
||||
opacity: 0.4;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-lrc p.aplayer-lrc-current {
|
||||
opacity: 1;
|
||||
overflow: visible;
|
||||
height: auto !important;
|
||||
min-height: 16px;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-lrc.aplayer-lrc-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-lrc .aplayer-lrc-contents {
|
||||
width: 100%;
|
||||
transition: all 0.5s ease-out;
|
||||
-webkit-user-select: text;
|
||||
-moz-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-list {
|
||||
overflow: auto;
|
||||
transition: all 0.35s ease;
|
||||
will-change: height;
|
||||
/* display: none; */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-list.aplayer-list-hide {
|
||||
max-height: 0 !important;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-list ol {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-list ol::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb {
|
||||
border-radius: 3px;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-list ol li {
|
||||
position: relative;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 15px;
|
||||
font-size: 12px;
|
||||
border-top: 1px solid #e9e9e9;
|
||||
cursor: pointer;
|
||||
/* transition: all .2s ease; */
|
||||
transition: background 0.2s ease;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-list ol li:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
/* .aplayer .aplayer-list ol li:hover {
|
||||
background: #efefef
|
||||
} */
|
||||
|
||||
.aplayer .aplayer-list ol li.aplayer-list-light {
|
||||
background: #e9e9e9;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-cur {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-list ol li .aplayer-list-cur {
|
||||
display: none;
|
||||
width: 3px;
|
||||
height: 22px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-list ol li .aplayer-list-index {
|
||||
color: #666;
|
||||
margin-right: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-list ol li .aplayer-list-author {
|
||||
color: #666;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-notice {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
padding: 5px 10px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
pointer-events: none;
|
||||
background-color: #f4f4f5;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-miniswitcher {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
background: #e6e6e6;
|
||||
width: 18px;
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-miniswitcher .aplayer-icon {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
-webkit-transform: rotateY(180deg);
|
||||
transform: rotateY(180deg);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-miniswitcher .aplayer-icon path {
|
||||
fill: #666;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-miniswitcher .aplayer-icon:hover path {
|
||||
fill: #000;
|
||||
}
|
||||
|
||||
@-webkit-keyframes aplayer-roll {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes aplayer-roll {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes rotate {
|
||||
0% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: rotate(1turn);
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: rotate(1turn);
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,327 @@
|
||||
<template>
|
||||
<div class="collection-info-container">
|
||||
<div class="collection-info-container-top">
|
||||
<div class="collection-info-container-top-exit" @click="emit('exit')">
|
||||
<ArrowBackOutline></ArrowBackOutline>
|
||||
</div>
|
||||
<div class="collection-info-container-top-title">
|
||||
<span :tooltip="false" v-if="!isEditing">
|
||||
{{ collection.name }}
|
||||
</span>
|
||||
<n-input v-if="isEditing" v-model:value="collection.name"></n-input>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="collection-info-container-top-delete"
|
||||
v-if="isEditing"
|
||||
@click="
|
||||
clickDeleteCount !== 2 ? clickDeleteCount++ : emit('deleteSelf')
|
||||
">
|
||||
<TrashOutline></TrashOutline>
|
||||
<span>
|
||||
{{
|
||||
clickDeleteCount === 0
|
||||
? `删除`
|
||||
: clickDeleteCount === 1
|
||||
? '确认删除'
|
||||
: '再次确认'
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collection-info-container-controller">
|
||||
<div
|
||||
class="collection-info-container-controller-play"
|
||||
@click="emit('playAll', collection)">
|
||||
<div class="collection-info-container-controller-play-icon">
|
||||
<CaretForwardOutline></CaretForwardOutline>
|
||||
</div>
|
||||
<div class="collection-info-container-controller-play-text">
|
||||
{{ `全部播放` }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="collection-info-container-controller-right">
|
||||
<div
|
||||
class="collection-info-container-controller-edit"
|
||||
@click="isEditing = !isEditing">
|
||||
<component
|
||||
:is="
|
||||
isEditing ? CheckmarkOutline : CreateOutline
|
||||
"></component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NScrollbar>
|
||||
<div class="collection-info-container-audioList">
|
||||
<VueDraggable
|
||||
v-model="collection.audios"
|
||||
:animation="150"
|
||||
handle=".collection-info-container-audioList-item-controller-item-drag"
|
||||
ghostClass="iSDragging"
|
||||
@end="updateAudiosIndex">
|
||||
<div
|
||||
v-for="(audio, index) in collection.audios"
|
||||
class="collection-info-container-audioList-item">
|
||||
<div class="collection-info-container-audioList-item-index">
|
||||
<div>{{ index + 1 }}</div>
|
||||
</div>
|
||||
<div class="collection-info-container-audioList-item-info">
|
||||
<div
|
||||
v-if="!isEditing"
|
||||
class="collection-info-container-audioList-item-info-name">
|
||||
<NEllipsis :tooltip="false">
|
||||
{{ audio.name }}
|
||||
</NEllipsis>
|
||||
</div>
|
||||
<n-input
|
||||
v-model:value="audio.name"
|
||||
v-if="isEditing"></n-input>
|
||||
</div>
|
||||
<div
|
||||
class="collection-info-container-audioList-item-controller">
|
||||
<PlayOutline
|
||||
class="collection-info-container-audioList-item-controller-item"
|
||||
v-if="!isEditing"
|
||||
@click="
|
||||
emit('playAll', collection, index)
|
||||
"></PlayOutline>
|
||||
<TrashOutline
|
||||
class="collection-info-container-audioList-item-controller-item"
|
||||
v-if="isEditing"
|
||||
@click="handleDelete(index)"></TrashOutline>
|
||||
<ReorderFourOutline
|
||||
v-if="isEditing"
|
||||
class="collection-info-container-audioList-item-controller-item collection-info-container-audioList-item-controller-item-drag"></ReorderFourOutline>
|
||||
</div>
|
||||
</div>
|
||||
</VueDraggable>
|
||||
</div>
|
||||
</NScrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NScrollbar, NEllipsis, NInput } from 'naive-ui'
|
||||
import { VueDraggable } from 'vue-draggable-plus'
|
||||
import {
|
||||
ArrowBackOutline,
|
||||
CaretForwardOutline,
|
||||
ReorderFourOutline,
|
||||
PlayOutline,
|
||||
CreateOutline,
|
||||
CheckmarkOutline,
|
||||
TrashOutline
|
||||
} from '@vicons/ionicons5'
|
||||
import collectionType from '../types/collection'
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
collection: collectionType
|
||||
}>()
|
||||
|
||||
const isEditing = ref(false)
|
||||
const clickDeleteCount = ref(0)
|
||||
|
||||
watch(isEditing, (v) => v && (clickDeleteCount.value = 0))
|
||||
|
||||
const handleDelete = (index: number) => {
|
||||
props.collection.audios.splice(index, 1)
|
||||
}
|
||||
|
||||
const updateAudiosIndex = () => {
|
||||
props.collection.audios = props.collection.audios.map((v, i) => ({
|
||||
...v,
|
||||
index: i
|
||||
}))
|
||||
}
|
||||
|
||||
const emit = defineEmits<{
|
||||
exit: []
|
||||
deleteSelf: []
|
||||
playAll: [collection: collectionType, index?: number]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$ig: linear-gradient(90deg, #a1ee5e 0%, #00e3ae 100%);
|
||||
|
||||
.collection-info-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&-top {
|
||||
height: 70px;
|
||||
padding: 0 15px;
|
||||
background: $ig;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&-exit {
|
||||
width: 30px;
|
||||
aspect-ratio: 1;
|
||||
color: #063b2a;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
width: 25px;
|
||||
aspect-ratio: 1;
|
||||
transition: width 0.25s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
display: flex;
|
||||
margin-left: 10px;
|
||||
margin-right: 100px;
|
||||
flex: 1;
|
||||
|
||||
&-confirm {
|
||||
margin-left: 10px;
|
||||
width: 32px;
|
||||
// color: #ffffff;
|
||||
}
|
||||
|
||||
span {
|
||||
user-select: none;
|
||||
font-size: larger;
|
||||
}
|
||||
}
|
||||
|
||||
&-delete {
|
||||
display: flex;
|
||||
height: 25px;
|
||||
position: absolute;
|
||||
right: 28px;
|
||||
color: red;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
& > span {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-controller {
|
||||
height: 50px;
|
||||
padding: 0 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&-play {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > div {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
height: 30px;
|
||||
width: 45px;
|
||||
background: $ig;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
width: 30px;
|
||||
height: 25px;
|
||||
color: aliceblue;
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
user-select: none;
|
||||
margin-left: 10px;
|
||||
font-size: larger;
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
& > div {
|
||||
margin: 0 10px;
|
||||
cursor: pointer;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
color: #002911;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-audioList {
|
||||
flex: 1;
|
||||
color: #002911;
|
||||
padding-bottom: 88px;
|
||||
|
||||
&-item {
|
||||
// padding: 0 20px;
|
||||
padding-right: 7px;
|
||||
display: flex;
|
||||
height: 70px;
|
||||
align-items: center;
|
||||
|
||||
&-index {
|
||||
width: 50px;
|
||||
user-select: none;
|
||||
font-size: 24px;
|
||||
text-align: right;
|
||||
|
||||
& > div {
|
||||
margin: auto;
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
|
||||
&-name {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&-controller {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&-item {
|
||||
width: 30px;
|
||||
cursor: pointer;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.isDragging {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,446 @@
|
||||
<template>
|
||||
<div class="aplayer-list-top">
|
||||
<div @click="loopModeToggle" class="aplayer-list-top-loopMode">
|
||||
<component
|
||||
:is="loopModeMap[loopMode].icon"
|
||||
class="aplayer-list-top-loopMode-icon"></component>
|
||||
<span class="aplayer-list-top-loopMode-name">
|
||||
{{ loopModeMap[loopMode].name }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="aplayer-list-top-buttons">
|
||||
<AddCircleOutline
|
||||
v-if="onSaveCollection"
|
||||
class="aplayer-list-top-buttons-icon"
|
||||
@click="onSaveCollection(ap.list.audios)"></AddCircleOutline>
|
||||
</div>
|
||||
<span></span>
|
||||
</div>
|
||||
<ol
|
||||
:style="{ maxHeight: `calc( ${ap.options.listMaxHeight} - 30px )` }"
|
||||
:class="[
|
||||
!isDragging ? 'miaoMusic-ol-isDragging' : 'miaoMusic-ol-notDragging'
|
||||
]"
|
||||
:key="refreshKey"
|
||||
ref="ol">
|
||||
<VueDraggable
|
||||
v-model="ap.list.audios"
|
||||
@start="onDragStart"
|
||||
@end="onDragEnd"
|
||||
item-key="id"
|
||||
handle=".aplayer-list-control-btn-reorder"
|
||||
ghostClass="iSDragging"
|
||||
:animation="150">
|
||||
<!-- <miaoLazyDiv :min-height="'32px'" auto-height> -->
|
||||
<li
|
||||
v-for="(element, index) in ap.list.audios"
|
||||
:class="[activeAudioIndex == index ? 'aplayer-list-light' : '']"
|
||||
class="aplayer-list-new"
|
||||
:key="element.id">
|
||||
<span
|
||||
class="aplayer-list-cur"
|
||||
:style="{ backgroundColor: apTheme }"></span>
|
||||
<span class="aplayer-list-index">{{ index + 1 }}</span>
|
||||
<span class="aplayer-list-title">{{ element.name }}</span>
|
||||
<div class="aplayer-list-control">
|
||||
<div
|
||||
v-if="isVideo(element)"
|
||||
class="aplayer-list-control-btn aplayer-list-control-btn-hover aplayer-list-control-btn-play"
|
||||
@click.stop="onPlayVideo && onPlayVideo(element)">
|
||||
<VideocamOutline class="aplayer-list-control-btn-svg" />
|
||||
</div>
|
||||
<div
|
||||
class="aplayer-list-control-btn aplayer-list-control-btn-hover aplayer-list-control-btn-play"
|
||||
@click.stop="switchAudio(index)">
|
||||
<component
|
||||
:is="
|
||||
activeAudioIndex == index && !isPaused
|
||||
? PauseOutline
|
||||
: PlayOutline
|
||||
"
|
||||
class="aplayer-list-control-btn-svg"></component>
|
||||
</div>
|
||||
<div
|
||||
class="aplayer-list-control-btn aplayer-list-control-btn-hover"
|
||||
@click.stop="switchAudio(index)"
|
||||
v-if="false">
|
||||
<HeartOutline class="aplayer-list-control-btn-svg" />
|
||||
</div>
|
||||
<div
|
||||
class="aplayer-list-control-btn"
|
||||
@click.stop="listAudioUp(index)"
|
||||
v-if="false">
|
||||
<ChevronUpOutline class="aplayer-list-control-btn-svg" />
|
||||
</div>
|
||||
<div
|
||||
class="aplayer-list-control-btn"
|
||||
@click.stop="listAudioDown(index)"
|
||||
v-if="false">
|
||||
<ChevronDownOutline class="aplayer-list-control-btn-svg" />
|
||||
</div>
|
||||
<div
|
||||
class="aplayer-list-control-btn aplayer-list-control-btn-hover"
|
||||
@click.stop="listAudioRemove(index)">
|
||||
<CloseOutline class="aplayer-list-control-btn-svg" />
|
||||
</div>
|
||||
<div
|
||||
class="aplayer-list-control-btn aplayer-list-control-btn-reorder">
|
||||
<ReorderFourOutline class="aplayer-list-control-btn-svg" />
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="aplayer-list-author"
|
||||
v-show="element.artist !== 'Audio artist1'">
|
||||
{{ element.artist }}
|
||||
</span>
|
||||
</li>
|
||||
<!-- </miaoLazyDiv> -->
|
||||
</VueDraggable>
|
||||
</ol>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onMounted, ref } from 'vue'
|
||||
import {
|
||||
ChevronUpOutline,
|
||||
ChevronDownOutline,
|
||||
CloseOutline,
|
||||
ReorderFourOutline,
|
||||
PlayOutline,
|
||||
HeartOutline,
|
||||
VideocamOutline,
|
||||
PauseOutline,
|
||||
ListCircleOutline,
|
||||
ListOutline,
|
||||
HeadsetOutline,
|
||||
LogoOctocat,
|
||||
AddCircleOutline
|
||||
} from '@vicons/ionicons5'
|
||||
|
||||
import { VueDraggable } from 'vue-draggable-plus'
|
||||
// 与vue-draggable冲突
|
||||
// import miaoLazyDiv from '@/components/miaoLazyDiv.vue';
|
||||
import apType, { audioType } from '../../types/ap'
|
||||
import { aplayerMiaoOption } from '../../hooks/aplayerMiao'
|
||||
|
||||
const props = defineProps<
|
||||
{
|
||||
ap: apType
|
||||
} & aplayerMiaoOption
|
||||
>()
|
||||
|
||||
const apRef = ref(props.ap)
|
||||
|
||||
const ol = ref<HTMLOListElement>()
|
||||
|
||||
const refreshKey = ref(Math.random())
|
||||
|
||||
const isDragging = ref(false)
|
||||
|
||||
const apTheme = computed(
|
||||
() =>
|
||||
props.ap.list.audios[activeAudioIndex.value].theme ??
|
||||
props.ap.options.theme
|
||||
)
|
||||
|
||||
const activeAudioIndex = computed(() => props.ap.list.index)
|
||||
const isPaused = ref(false)
|
||||
|
||||
props.ap.on('play', () => {
|
||||
nextTick(() => {
|
||||
isPaused.value = false
|
||||
})
|
||||
})
|
||||
|
||||
props.ap.on('pause', () => {
|
||||
isPaused.value = true
|
||||
})
|
||||
|
||||
props.ap.on('listswitch', (...args: any) => {
|
||||
// 手动触发更新，不然监听不到
|
||||
props.ap.list.index = args[0].index as number
|
||||
})
|
||||
|
||||
const refresh = () => {
|
||||
const top = ol.value?.scrollTop
|
||||
refreshKey.value = Math.random()
|
||||
nextTick(() => {
|
||||
ol.value?.scrollTo({
|
||||
top
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
props.ap.on('listremove', refresh)
|
||||
props.ap.on('listadd', refresh)
|
||||
|
||||
const switchAudio = (index: number) => {
|
||||
if (index === activeAudioIndex.value) {
|
||||
if (props.ap.paused) {
|
||||
props.ap.play()
|
||||
} else {
|
||||
props.ap.pause()
|
||||
}
|
||||
props.ap.paused = props.ap.paused
|
||||
return
|
||||
}
|
||||
props.ap.list.switch(index)
|
||||
}
|
||||
const listRefreshIndex = (curr: audioType) => {
|
||||
for (let index in props.ap.list.audios) {
|
||||
if (props.ap.list.audios[index] === curr) {
|
||||
props.ap.list.index = parseInt(index)
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const listAudioUp = (index: number) => {
|
||||
const arr = props.ap.list.audios
|
||||
const len = arr.length
|
||||
const curr = props.ap.list.audios[props.ap.list.index]
|
||||
if (index === 0) {
|
||||
const _item = arr.shift()
|
||||
_item && arr.push(_item)
|
||||
} else {
|
||||
const pre: number = (len - 1 + index) % len
|
||||
const _pre = arr[index]
|
||||
arr[index] = arr[pre]
|
||||
arr[pre] = _pre
|
||||
}
|
||||
listRefreshIndex(curr)
|
||||
}
|
||||
|
||||
const listAudioDown = (index: number) => {
|
||||
const arr = props.ap.list.audios
|
||||
const len = arr.length
|
||||
const curr = props.ap.list.audios[props.ap.list.index]
|
||||
if (index === len - 1) {
|
||||
const _item = arr.pop()
|
||||
_item && arr.unshift(_item)
|
||||
} else {
|
||||
const pre: number = (len + 1 + index) % len
|
||||
const _pre = arr[index]
|
||||
arr[index] = arr[pre]
|
||||
arr[pre] = _pre
|
||||
}
|
||||
listRefreshIndex(curr)
|
||||
}
|
||||
const listAudioRemove = (index: number) => {
|
||||
props.ap.list.remove(index)
|
||||
}
|
||||
const { onDragStart, onDragEnd } = (() => {
|
||||
let curr: audioType
|
||||
return {
|
||||
onDragStart: () => {
|
||||
isDragging.value = true
|
||||
curr = props.ap.list.audios[props.ap.list.index]
|
||||
},
|
||||
onDragEnd: () => {
|
||||
listRefreshIndex(curr)
|
||||
nextTick(() => {
|
||||
isDragging.value = false
|
||||
})
|
||||
}
|
||||
}
|
||||
})()
|
||||
|
||||
const isVideo = (element: audioType) => {
|
||||
for (let end of ['mp4']) {
|
||||
if (element.name.endsWith(end)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
const loopModeMap = {
|
||||
0: { name: '列表循环', icon: ListCircleOutline },
|
||||
1: { name: '单曲循环', icon: HeadsetOutline },
|
||||
2: { name: '列表播放', icon: ListOutline },
|
||||
3: { name: '随机播放', icon: LogoOctocat }
|
||||
}
|
||||
|
||||
const loopMode = computed(() => {
|
||||
if (apRef.value.options.order === 'list') {
|
||||
switch (apRef.value.options.loop) {
|
||||
case 'all':
|
||||
return 0
|
||||
case 'one':
|
||||
return 1
|
||||
case 'none':
|
||||
return 2
|
||||
}
|
||||
}
|
||||
return 3
|
||||
})
|
||||
|
||||
const loopModeToggle = () => {
|
||||
const ops = apRef.value.options
|
||||
if (ops.order === 'random') {
|
||||
ops.order = 'list'
|
||||
} else {
|
||||
switch (ops.loop) {
|
||||
case 'all': {
|
||||
ops.loop = 'one'
|
||||
break
|
||||
}
|
||||
case 'one': {
|
||||
ops.loop = 'none'
|
||||
break
|
||||
}
|
||||
case 'none': {
|
||||
ops.loop = 'all'
|
||||
ops.order = 'random'
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
console.log(props.ap)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.aplayer-list-new {
|
||||
height: fit-content !important;
|
||||
cursor: default !important;
|
||||
|
||||
.aplayer-list-cur {
|
||||
height: calc(100% - 8px) !important;
|
||||
}
|
||||
|
||||
.aplayer-list-index {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
margin-right: 4px !important;
|
||||
cursor: default !important;
|
||||
}
|
||||
}
|
||||
|
||||
.aplayer-list-control {
|
||||
float: right;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&-btn {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
&-svg {
|
||||
width: 20px;
|
||||
aspect-ratio: 1;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
}
|
||||
|
||||
&-btn-hover {
|
||||
.aplayer-list-control-btn-svg {
|
||||
&:hover {
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aplayer-list-top {
|
||||
height: 30px;
|
||||
// width: auto;
|
||||
// max-width: 100%;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
display: flex;
|
||||
justify-items: baseline;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
.aplayer-list-top-loopMode {
|
||||
text-align: center;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
// background-color: #f9f9f9;
|
||||
scale: 1;
|
||||
transition: scale 0.15s ease;
|
||||
&-icon {
|
||||
width: 20px;
|
||||
aspect-ratio: 1;
|
||||
transform: translateY(1px);
|
||||
fill: #000;
|
||||
path {
|
||||
fill: #000 !important;
|
||||
}
|
||||
}
|
||||
&-name {
|
||||
margin-left: 5px;
|
||||
}
|
||||
&:hover {
|
||||
scale: 1.1;
|
||||
}
|
||||
}
|
||||
.aplayer-list-top-buttons {
|
||||
display: inline-flex;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
scale: 1;
|
||||
transition: scale 0.15s ease;
|
||||
&-icon {
|
||||
width: 20px;
|
||||
aspect-ratio: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
&:hover {
|
||||
scale: 1.1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.aplayer svg circle,
|
||||
.aplayer .aplayer-list-new svg path {
|
||||
fill: #ffffff00;
|
||||
}
|
||||
|
||||
.iSDragging {
|
||||
opacity: 0.5;
|
||||
// background: #60e8a2 !important;
|
||||
}
|
||||
|
||||
.aplayer-list-light {
|
||||
background: unset !important;
|
||||
|
||||
.aplayer-list-title {
|
||||
color: #60e8a2;
|
||||
}
|
||||
}
|
||||
|
||||
.aplayer .aplayer-list .miaoMusic-ol-isDragging li:hover {
|
||||
background: #efefef !important;
|
||||
}
|
||||
|
||||
.miaoMusicDrag-move,
|
||||
.miaoMusicDrag-enter-active,
|
||||
.miaoMusicDrag-leave-active {
|
||||
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
}
|
||||
|
||||
.miaoMusicDrag-enter-from,
|
||||
.miaoMusicDrag-leave-to {
|
||||
opacity: 0;
|
||||
transform: scaleY(0.01) translate(30px, 0);
|
||||
}
|
||||
|
||||
.miaoMusicDrag-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="collection" @click="emit('onenter')">
|
||||
<div class="collection-cover" @click.stop="emit('onPlay')">
|
||||
<img
|
||||
v-if="item.coverUrl"
|
||||
class="collection-cover-img"
|
||||
:src="item.coverUrl" />
|
||||
<div class="collection-cover-play">
|
||||
<Play></Play>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collection-info">
|
||||
<div class="collection-info-name">
|
||||
<span class="collection-info-name-ellipsis">
|
||||
<span>
|
||||
{{ item.name }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="collection-info-stats">
|
||||
<span class="collection-info-stats-time">{{ dateStr }}</span>
|
||||
<span class="collection-info-stats-count">
|
||||
{{ `共${item.audios.length}首` }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import collectionType from '../../types/collection'
|
||||
import dateFormatter from '@/utils/dateFormatter'
|
||||
import { Play } from '@vicons/ionicons5'
|
||||
|
||||
const props = defineProps<{
|
||||
item: collectionType
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
onPlay: []
|
||||
onenter: []
|
||||
}>()
|
||||
|
||||
const dateStr = computed(() =>
|
||||
dateFormatter(new Date(props.item.createTime), 'yyyy-MM-dd')
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.collection {
|
||||
height: 50px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
box-shadow:
|
||||
0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
||||
0 6px 16px 0 rgba(0, 0, 0, 0.08),
|
||||
0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
transition: height 0.25s ease;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&:not(&:last-child) {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.collection-cover {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
aspect-ratio: 1;
|
||||
background-color: #60e8a2;
|
||||
margin-right: 5px;
|
||||
.collection-cover-play {
|
||||
width: 25px;
|
||||
height: 15px;
|
||||
background-color: #d1d1d1b2;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 3px;
|
||||
svg {
|
||||
height: 15px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.collection-info {
|
||||
position: relative;
|
||||
width: calc(100% - 60px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.collection-info-name {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
&-ellipsis {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
max-width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
span {
|
||||
white-space: nowrap;
|
||||
text-wrap: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
.collection-info-stats {
|
||||
text-wrap: nowrap;
|
||||
span {
|
||||
font-size: smaller;
|
||||
}
|
||||
.collection-info-stats-time {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div class="miaoMusic-main">
|
||||
<NScrollbar>
|
||||
<div class="miaoMusic-main-collectionsList">
|
||||
<div class="miaoMusic-main-collectionsList-title">自建歌单</div>
|
||||
<VueDraggable
|
||||
v-if="collections"
|
||||
v-model="collections"
|
||||
:animation="150"
|
||||
:delay="100"
|
||||
ghostClass="iSDragging">
|
||||
<collection
|
||||
v-for="item in collections"
|
||||
:item="item"
|
||||
@on-play="handleCollectionsPlay(item)"
|
||||
@onenter="handleCollectionEnter(item)"></collection>
|
||||
</VueDraggable>
|
||||
<n-empty
|
||||
description="空空如也~"
|
||||
size="huge"
|
||||
style="margin-top: 200px"
|
||||
v-if="!data || data?.length === 0">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<HandLeftOutline />
|
||||
</n-icon>
|
||||
</template>
|
||||
<template #extra>
|
||||
<n-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="emit('newCollection')">
|
||||
立刻创建
|
||||
</n-button>
|
||||
</template>
|
||||
</n-empty>
|
||||
</div>
|
||||
</NScrollbar>
|
||||
<Transition name="slide-fade">
|
||||
<collectionInfo
|
||||
class="miaoMusic-main-collection"
|
||||
:collection="currCollection"
|
||||
v-if="currCollection"
|
||||
@exit="handleCollectionEnter(undefined)"
|
||||
@delete-self="handleCollectionDelete()"
|
||||
@play-all="handleCollectionsPlay"></collectionInfo>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import apType from '../types/ap'
|
||||
import collection from './components/collection.vue'
|
||||
import collectionInfo from './collectionInfo.vue'
|
||||
import collectionType from '../types/collection'
|
||||
import { VueDraggable } from 'vue-draggable-plus'
|
||||
import { NScrollbar, NEmpty, NButton } from 'naive-ui'
|
||||
import { HandLeftOutline } from '@vicons/ionicons5'
|
||||
|
||||
const props = defineProps<{
|
||||
ap: apType
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
newCollection: []
|
||||
}>()
|
||||
|
||||
const collections = defineModel<collectionType[]>('data')
|
||||
const currCollection = ref<collectionType>()
|
||||
const playCollection = (collection: collectionType, index?: number) => {
|
||||
const ap = props.ap
|
||||
console.log({ collection, ap })
|
||||
// clear有bug
|
||||
while (ap.list.audios.length !== 0) {
|
||||
ap.list.remove(0)
|
||||
}
|
||||
ap.list.add(collection.audios)
|
||||
index && ap.list.switch(index)
|
||||
ap.play()
|
||||
}
|
||||
|
||||
const handleCollectionsPlay = (item: collectionType, index?: number) => {
|
||||
playCollection(item, index)
|
||||
}
|
||||
|
||||
const handleCollectionEnter = (item: collectionType | undefined) => {
|
||||
currCollection.value = item
|
||||
}
|
||||
|
||||
const handleCollectionDelete = () => {
|
||||
collections.value &&
|
||||
collections.value.splice(
|
||||
collections.value.findIndex((v) => v === currCollection.value),
|
||||
1
|
||||
)
|
||||
currCollection.value = undefined
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.miaoMusic-main {
|
||||
position: relative;
|
||||
max-height: 100%;
|
||||
height: 100%;
|
||||
.miaoMusic-main-collectionsList {
|
||||
padding: 15px 20px 88px;
|
||||
&-title {
|
||||
font-size: larger;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 10px;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.slide-fade-enter-active {
|
||||
transition: all 0.15s ease-out;
|
||||
}
|
||||
|
||||
.slide-fade-leave-active {
|
||||
transition: all 0.15s cubic-bezier(1, 0.5, 0.8, 1);
|
||||
}
|
||||
|
||||
.slide-fade-enter-from,
|
||||
.slide-fade-leave-to {
|
||||
transform: translateX(200px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.isDragging {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,45 @@
|
||||
export type audioType = {
|
||||
url: string
|
||||
artist?: string
|
||||
cover?: string
|
||||
name: string
|
||||
theme?: string
|
||||
id?: number
|
||||
index: number
|
||||
}
|
||||
|
||||
type apType = {
|
||||
paused: boolean
|
||||
list: {
|
||||
audios: audioType[]
|
||||
index: number
|
||||
switch: (index: number) => void
|
||||
remove: (index: number) => void
|
||||
add: (audios: audioType[]) => void
|
||||
refreshAudioIndex: () => void
|
||||
hide: () => void
|
||||
clear: () => void
|
||||
}
|
||||
container: HTMLDivElement
|
||||
on: (event: string, callback: () => void) => void
|
||||
options: {
|
||||
audio: audioType[]
|
||||
autoplay: boolean
|
||||
volume: number
|
||||
theme: string
|
||||
mini: boolean
|
||||
fixed: boolean
|
||||
mutex: boolean
|
||||
lrcType: number
|
||||
preload: 'auto'
|
||||
loop: 'all' | 'one' | 'none'
|
||||
order: 'list' | 'random'
|
||||
listMaxHeight: string
|
||||
storageName: 'aplayer-setting'
|
||||
}
|
||||
destroy: () => {}
|
||||
pause: () => void
|
||||
play: () => void
|
||||
}
|
||||
|
||||
export default apType
|
||||
@@ -0,0 +1,14 @@
|
||||
import type { audioType } from './ap'
|
||||
|
||||
export type collectionItemType = {} & audioType
|
||||
|
||||
export type collectionType = {
|
||||
id: number
|
||||
name: string
|
||||
intro: string
|
||||
createTime: Date
|
||||
coverUrl?: string
|
||||
audios: collectionItemType[]
|
||||
}
|
||||
|
||||
export default collectionType
|
||||
@@ -0,0 +1,24 @@
|
||||
import { registerComponentOption } from '@/class/PluginCenter'
|
||||
import DocumentText from '@vicons/ionicons5/es/DocumentText'
|
||||
|
||||
const pluginConfig: registerComponentOption = {
|
||||
key: 'miaoPDF',
|
||||
name: 'PDF浏览',
|
||||
icon: DocumentText,
|
||||
getComponent: async () =>
|
||||
(await import('@/plugins/miaoPDF/miaoPDF.vue')).default,
|
||||
filter: (vDirs, vFiles) => {
|
||||
if (vDirs.length !== 0) {
|
||||
return false
|
||||
}
|
||||
if (vFiles.length !== 1) {
|
||||
return false
|
||||
}
|
||||
return vFiles[0].name.endsWith('pdf')
|
||||
}
|
||||
}
|
||||
|
||||
export default pluginConfig
|
||||
|
||||
import { PluginExportType } from '@/types/type'
|
||||
export const type = PluginExportType.component
|
||||
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<miao-message-provider ref="miaoMessageRef">
|
||||
<div class="miao-container">
|
||||
<div class="miao-container-topBar">
|
||||
<div
|
||||
class="miao-container-topBar-btn"
|
||||
@click="() => handleZoom(10)"
|
||||
title="快速缩小">
|
||||
--
|
||||
</div>
|
||||
<div
|
||||
class="miao-container-topBar-btn"
|
||||
@click="() => handleZoom()"
|
||||
title="缩小">
|
||||
-
|
||||
</div>
|
||||
<div
|
||||
class="miao-container-topBar-btn"
|
||||
@click="() => handleResetMargin()"
|
||||
title="还原">
|
||||
还原缩放
|
||||
</div>
|
||||
<div
|
||||
class="miao-container-topBar-btn"
|
||||
@click="() => handleShrink()"
|
||||
title="放大">
|
||||
+
|
||||
</div>
|
||||
<div
|
||||
class="miao-container-topBar-btn"
|
||||
@click="() => handleShrink(10)"
|
||||
title="快速放大">
|
||||
++
|
||||
</div>
|
||||
</div>
|
||||
<NScrollbar>
|
||||
<div
|
||||
class="miao-container-pdf"
|
||||
:style="{
|
||||
alignItems: pdfMargin < 0 ? 'baseline' : 'center'
|
||||
}">
|
||||
<div
|
||||
ref="pdfEl"
|
||||
class="miao-container-pdf-content"
|
||||
:style="{
|
||||
width: `calc( 100% - ${pdfMargin}px)`
|
||||
}"></div>
|
||||
</div>
|
||||
</NScrollbar>
|
||||
</div>
|
||||
</miao-message-provider>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import miaoMessageProvider from '@/components/miaoAlertTipProvider.vue'
|
||||
import { onMounted, ref, shallowReactive } from 'vue'
|
||||
import PdfjsWorker from 'pdfjs-dist/build/pdf.worker.mjs?worker'
|
||||
import { VirtualFile } from '@/class/VirtualDirectory'
|
||||
import { NScrollbar } from 'naive-ui'
|
||||
|
||||
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
||||
required: true
|
||||
})
|
||||
|
||||
const pdfEl = ref<HTMLDivElement>()
|
||||
const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
|
||||
// 通过margin来实现缩小功能
|
||||
const pdfMargin = ref<number>(0)
|
||||
|
||||
const pdfPageCount = ref<number>(-1)
|
||||
|
||||
const canvasList = shallowReactive<HTMLCanvasElement[]>([])
|
||||
|
||||
const handleZoom = (index?: number) => {
|
||||
const _index = index ?? 1
|
||||
pdfMargin.value += 10 * _index
|
||||
}
|
||||
|
||||
const handleShrink = (index?: number) => {
|
||||
const _index = index ?? 1
|
||||
// if (pdfMargin.value - 10 * _index <= 0) {
|
||||
// return pdfMargin.value = 0
|
||||
// }
|
||||
pdfMargin.value -= 10 * _index
|
||||
}
|
||||
|
||||
const handleResetMargin = () => {
|
||||
pdfMargin.value = 0
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const setLoadingMessage = miaoMessageRef.value?.alertTip('加载PDF插件中', {
|
||||
type: 'info',
|
||||
timeout: -1
|
||||
})
|
||||
const pdfSrc = currentFiles.value[0].url
|
||||
// @ts-ignore
|
||||
const PDFJS = await import('pdfjs-dist/build/pdf.mjs')
|
||||
if (typeof window !== 'undefined' && 'Worker' in window) {
|
||||
PDFJS.GlobalWorkerOptions.workerPort = new PdfjsWorker()
|
||||
}
|
||||
// 加载文档
|
||||
let loadingTask = PDFJS.getDocument({ url: pdfSrc })
|
||||
loadingTask.__PDFDocumentLoadingTask = true
|
||||
const pdf = await loadingTask.promise // 使用await等待加载完毕
|
||||
pdfPageCount.value = pdf.numPages
|
||||
// 循环渲染每一页
|
||||
for (let i = 1; i <= pdf.numPages; i++) {
|
||||
setLoadingMessage && setLoadingMessage(`渲染进度：${i}/${pdf.numPages}`)
|
||||
const page = await pdf.getPage(i)
|
||||
let pixelRatio = 3
|
||||
let viewport = page.getViewport({ scale: 1 })
|
||||
// 使用canvas渲染
|
||||
let canvas = window.document.createElement('canvas')
|
||||
canvasList.push(canvas)
|
||||
// @ts-ignore
|
||||
pdfEl.value.appendChild(canvas)
|
||||
canvas.width = viewport.width * pixelRatio // 计算宽度
|
||||
canvas.height = viewport.height * pixelRatio
|
||||
let renderContext = {
|
||||
canvasContext: canvas.getContext('2d'),
|
||||
viewport: viewport,
|
||||
transform: [pixelRatio, 0, 0, pixelRatio, 0, 0]
|
||||
}
|
||||
await page.render(renderContext).promise // 一页一页的渲染
|
||||
}
|
||||
setLoadingMessage &&
|
||||
setLoadingMessage(`渲染PDF完成`, {
|
||||
type: 'success',
|
||||
timeout: 3456
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.miao-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgb(201, 201, 201);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.miao-container-topBar {
|
||||
box-sizing: border-box;
|
||||
padding: 0 30px;
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
background-color: rgb(170, 176, 182);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
&-btn {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
height: 80%;
|
||||
padding: 0 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: larger;
|
||||
letter-spacing: 1px;
|
||||
color: black;
|
||||
border-radius: 5px;
|
||||
|
||||
&:hover {
|
||||
background-color: #eaeaea42;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.miao-container-pdf {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.miao-container-pdf-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.miao-container-loading {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
background-color: aliceblue;
|
||||
border: 1px solid black;
|
||||
height: 40px;
|
||||
width: 200px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 15px;
|
||||
letter-spacing: 5px;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,25 @@
|
||||
// @ts-nocheck
|
||||
import { registerComponentOption } from '@/class/PluginCenter'
|
||||
|
||||
const pluginConfig: registerComponentOption = {
|
||||
key: 'yourPluginKey',
|
||||
name: 'yourPluginName',
|
||||
// icon: LogoChrome,
|
||||
getComponent: async () => null,
|
||||
// (await import('yourPluginPath')).default,
|
||||
filter: (vDirs, vFiles) => {
|
||||
if (vDirs.length !== 0) {
|
||||
return false
|
||||
}
|
||||
if (vFiles.length !== 1) {
|
||||
return false
|
||||
}
|
||||
return vFiles[0].name.endsWith('?')
|
||||
},
|
||||
disable: true
|
||||
}
|
||||
|
||||
export default pluginConfig
|
||||
|
||||
import { PluginExportType } from '@/types/type'
|
||||
export const type = PluginExportType.component
|
||||
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div class="template-container"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// import { VirtualFile } from '@/class/VirtualDirectory'
|
||||
|
||||
// const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
||||
// required: true
|
||||
// })
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.template-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,32 @@
|
||||
import { registerComponentOption } from '@/class/PluginCenter'
|
||||
import PlayCircle from '@vicons/ionicons5/es/PlayCircle'
|
||||
|
||||
const pluginConfig: registerComponentOption = {
|
||||
key: 'miaoVideoPlayer',
|
||||
name: '视频',
|
||||
icon: PlayCircle,
|
||||
getComponent: async () =>
|
||||
(await import('@/plugins/miaoVideoPlayer/miaoVideoPlayer.vue')).default,
|
||||
filter: (vDirs, vFiles) => {
|
||||
if (vDirs.length !== 0) {
|
||||
return false
|
||||
}
|
||||
if (vFiles.length === 0) {
|
||||
return false
|
||||
}
|
||||
for (let i of vFiles) {
|
||||
for (let s of ['mp4', 'mkv']) {
|
||||
if (i.name.endsWith(s)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
return false
|
||||
},
|
||||
priority: 6
|
||||
}
|
||||
|
||||
export default pluginConfig
|
||||
|
||||
import { PluginExportType } from '@/types/type'
|
||||
export const type = PluginExportType.component
|
||||
@@ -0,0 +1,353 @@
|
||||
<template>
|
||||
<miao-drop-handler @on-virtual-files="handleDropVFiles">
|
||||
<div class="player-container">
|
||||
<div ref="xgPlayer" id="xgplayer"></div>
|
||||
</div>
|
||||
</miao-drop-handler>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { VirtualFile } from '@/class/VirtualDirectory'
|
||||
import miaoDropHandler from '@/components/miaoDropHandler.vue'
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import XGPlayer from 'xgplayer'
|
||||
import './style/xgplayer.scss'
|
||||
import TextTrack from 'xgplayer/es/plugins/track'
|
||||
import 'xgplayer/es/plugins/track/index.css'
|
||||
import axios from 'axios'
|
||||
import uniq from 'lodash/uniq'
|
||||
import lockScreen from './playerPlugin/lockScreen/lockScreen'
|
||||
import xgplayerVueApp from './src/XGPlayerVuePluginRoot.vue'
|
||||
import useXGPlayerVueFrame from './playerPlugin/xgplayer-vue-frame/xgplayer-vue-frame'
|
||||
|
||||
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
||||
required: true
|
||||
})
|
||||
const xgPlayer = ref()
|
||||
|
||||
let _player: XGPlayer
|
||||
const { setVideo } = (() => {
|
||||
const initPlayer = (
|
||||
videos: VirtualFile[],
|
||||
texttrack: {
|
||||
list: {
|
||||
id: number
|
||||
url: string
|
||||
text: string
|
||||
}[]
|
||||
}
|
||||
) => {
|
||||
const videoVFile = videos.shift() as VirtualFile
|
||||
_player && _player.destroy()
|
||||
_player = new XGPlayer({
|
||||
plugins: [TextTrack, lockScreen, useXGPlayerVueFrame(xgplayerVueApp)],
|
||||
el: xgPlayer.value,
|
||||
url: videoVFile.url,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
volume: 1,
|
||||
// loop: true,
|
||||
// pip: true,
|
||||
videoFillMode: 'contain',
|
||||
autoplay: true,
|
||||
download: true,
|
||||
ignores: [videos.length === 0 ? 'playNext' : undefined].filter(
|
||||
(v) => v
|
||||
) as string[],
|
||||
lang: 'zh-cn',
|
||||
playbackRate: [0.1, 0.3, 0.5, 0.75, 1, 1.5, 2, 3, 5, 10],
|
||||
texttrack,
|
||||
screenShot: {
|
||||
saveImg: true,
|
||||
quality: 1,
|
||||
type: 'image/png',
|
||||
format: '.png'
|
||||
},
|
||||
playNext: {
|
||||
urlList: videos.map((v) => v.url)
|
||||
},
|
||||
progress: {
|
||||
isDragingSeek: true
|
||||
}
|
||||
// mobile: {
|
||||
// disableGesture: true
|
||||
// }
|
||||
})
|
||||
}
|
||||
return {
|
||||
setVideo: async (
|
||||
videoVFiles: VirtualFile[],
|
||||
textTrackFiles?: VirtualFile[]
|
||||
) => {
|
||||
// 天哪什么精神状态会写出这种代码
|
||||
textTrackFiles &&
|
||||
textTrackFiles.push(...findTextTrack(currentFiles.value))
|
||||
textTrackFiles = uniq(textTrackFiles)
|
||||
currentFiles.value = uniq([
|
||||
...currentFiles.value,
|
||||
...videoVFiles,
|
||||
...(textTrackFiles ?? [])
|
||||
])
|
||||
const videos = findVideo(uniq([...currentFiles.value, ...videoVFiles]))
|
||||
const _list = []
|
||||
if (textTrackFiles) {
|
||||
for (let i of textTrackFiles) {
|
||||
if (i.name.endsWith('srt')) {
|
||||
const response = await axios.get(i.url)
|
||||
// console.log(srtToVtt(response.data))
|
||||
const url = setUrl(new Blob([srtToVtt(response.data)]))
|
||||
_list.push({
|
||||
id: i.id,
|
||||
url,
|
||||
// 这个language会覆盖id的设置，导致无法切换字幕
|
||||
// language: 'zh-cn',
|
||||
text: i.name
|
||||
})
|
||||
} else if (i.name.endsWith('ass')) {
|
||||
const response = await axios.get(i.url)
|
||||
// console.log(assToVtt(response.data))
|
||||
const url = setUrl(new Blob([assToVtt(response.data)]))
|
||||
_list.push({
|
||||
id: i.id,
|
||||
url,
|
||||
text: i.name
|
||||
})
|
||||
} else if (i.name.endsWith('ssa')) {
|
||||
const response = await axios.get(i.url)
|
||||
// console.log(ssaToVtt(response.data))
|
||||
const url = setUrl(new Blob([ssaToVtt(response.data)]))
|
||||
_list.push({
|
||||
id: i.id,
|
||||
url,
|
||||
text: i.name
|
||||
})
|
||||
} else {
|
||||
_list.push({
|
||||
id: i.id,
|
||||
url: i.url,
|
||||
text: i.name
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
const texttrack = {
|
||||
list: _list
|
||||
}
|
||||
initPlayer([...videos], texttrack)
|
||||
}
|
||||
}
|
||||
})()
|
||||
|
||||
const { setUrl, destroyUrl } = (() => {
|
||||
const urlList: string[] = []
|
||||
return {
|
||||
setUrl(blob: Blob) {
|
||||
const url = URL.createObjectURL(blob)
|
||||
urlList.push(url)
|
||||
return url
|
||||
},
|
||||
destroyUrl() {
|
||||
for (const url of urlList) {
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
}
|
||||
}
|
||||
})()
|
||||
|
||||
const handleDropVFiles = (files: VirtualFile[]) => {
|
||||
setVideo(findVideo(files.reverse()), findTextTrack(files))
|
||||
}
|
||||
|
||||
function srtToVtt(srt: string) {
|
||||
// 将 SRT 字幕按行分割
|
||||
const lines = srt.split('\n')
|
||||
let vtt = 'WEBVTT\n\n' // VTT 文件的开头
|
||||
|
||||
let index = 0
|
||||
while (index < lines.length) {
|
||||
// 跳过空行
|
||||
if (lines[index].trim() === '') {
|
||||
index++
|
||||
continue
|
||||
}
|
||||
|
||||
// SRT 中的序号
|
||||
lines[index].trim()
|
||||
index++
|
||||
|
||||
// 时间戳
|
||||
const timeLine = lines[index].trim().replace(/,/g, '.') // 将逗号替换为点
|
||||
index++
|
||||
|
||||
// 字幕文本
|
||||
let text = ''
|
||||
while (index < lines.length && lines[index].trim() !== '') {
|
||||
text += lines[index].trim() + '\n'
|
||||
index++
|
||||
}
|
||||
|
||||
// 添加到 VTT 字幕中
|
||||
vtt += `${timeLine}\n${text.trim()}\n\n`
|
||||
}
|
||||
|
||||
return vtt
|
||||
}
|
||||
|
||||
function assToVtt(assContent: string) {
|
||||
// 分割 ASS 内容为行
|
||||
const lines = assContent.split('\n')
|
||||
let vttContent = 'WEBVTT\n\n' // VTT 文件头
|
||||
|
||||
// 遍历每一行，寻找字幕条目
|
||||
for (let line of lines) {
|
||||
// 只处理 [Events] 部分后的 Dialogue 行
|
||||
if (line.startsWith('Dialogue:')) {
|
||||
// 提取时间戳和文本
|
||||
const parts = line.split(',')
|
||||
if (parts.length >= 5) {
|
||||
// 将时间戳格式化为 VTT 格式
|
||||
const startTime = parts[1]
|
||||
.trim()
|
||||
.replace('.', ',')
|
||||
.replace(',', '.') // 替换 . 为 ,，然后再替换为 .
|
||||
const endTime = parts[2].trim().replace('.', ',').replace(',', '.') // 替换 . 为 ,，然后再替换为 .
|
||||
|
||||
// 确保时间戳是两位数格式
|
||||
const formattedStartTime = startTime.replace(
|
||||
/(\d+):(\d+):(\d+)\.(\d+)/,
|
||||
(match: any, h: any, m: any, s: any, ms: any) => {
|
||||
match
|
||||
return `${String(h).padStart(2, '0')}:${String(m).padStart(
|
||||
2,
|
||||
'0'
|
||||
)}:${String(s).padStart(2, '0')}.${String(ms).padStart(3, '0')}`
|
||||
}
|
||||
)
|
||||
|
||||
const formattedEndTime = endTime.replace(
|
||||
/(\d+):(\d+):(\d+)\.(\d+)/,
|
||||
(match: any, h: any, m: any, s: any, ms: any) => {
|
||||
match
|
||||
return `${String(h).padStart(2, '0')}:${String(m).padStart(
|
||||
2,
|
||||
'0'
|
||||
)}:${String(s).padStart(2, '0')}.${String(ms).padStart(3, '0')}`
|
||||
}
|
||||
)
|
||||
|
||||
const rawText = parts.slice(9).join(',').trim() // 提取文本
|
||||
|
||||
// 清理文本中的样式信息
|
||||
const cleanText = rawText
|
||||
.replace(/{[^}]*}/g, '')
|
||||
.replace(/\\N/g, '\n')
|
||||
.trim()
|
||||
|
||||
// 添加到 VTT 内容
|
||||
vttContent += `${formattedStartTime} --> ${formattedEndTime}\n${cleanText}\n\n`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return vttContent.trim() // 返回 VTT 内容，去掉末尾空行
|
||||
}
|
||||
|
||||
function ssaToVtt(ssaContent: string): string {
|
||||
function convertSsaTimeToVtt(ssaTime: string): string {
|
||||
const timeParts = ssaTime.split(':')
|
||||
const hours = timeParts[0].padStart(2, '0')
|
||||
const minutes = timeParts[1].padStart(2, '0')
|
||||
const secondsAndMilliseconds = timeParts[2].split('.')
|
||||
const seconds = secondsAndMilliseconds[0].padStart(2, '0')
|
||||
const milliseconds = (secondsAndMilliseconds[1] || '0').padEnd(3, '0')
|
||||
|
||||
return `${hours}:${minutes}:${seconds}.${milliseconds}`
|
||||
}
|
||||
const lines = ssaContent.split('\n')
|
||||
let vttContent = 'WEBVTT\n\n' // VTT文件头
|
||||
let inEvents = false
|
||||
|
||||
for (const line of lines) {
|
||||
// 检查是否进入[Events]部分
|
||||
if (line.startsWith('[Events]')) {
|
||||
inEvents = true
|
||||
continue
|
||||
}
|
||||
|
||||
// 如果在[Events]部分，处理对话行
|
||||
if (inEvents && line.startsWith('Dialogue:')) {
|
||||
const parts = line.split(',')
|
||||
if (parts.length >= 3) {
|
||||
const startTime = convertSsaTimeToVtt(parts[1].trim())
|
||||
const endTime = convertSsaTimeToVtt(parts[2].trim())
|
||||
const text = parts.slice(9).join(',').trim() // 获取字幕文本
|
||||
|
||||
// 去除样式标签
|
||||
const cleanText = text.replace(/{[^}]*}/g, '').trim()
|
||||
|
||||
// 添加到VTT内容
|
||||
vttContent += `${startTime} --> ${endTime}\n${cleanText}\n\n`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return vttContent
|
||||
}
|
||||
|
||||
const findVideo = (vFiles: VirtualFile[]) =>
|
||||
uniq(
|
||||
vFiles.filter((v) => {
|
||||
for (let s of ['mp4', 'mp3', 'mkv']) {
|
||||
if (v.name.endsWith(s)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
})
|
||||
)
|
||||
|
||||
const findTextTrack = (vFiles: VirtualFile[]) =>
|
||||
vFiles.filter((v) => {
|
||||
for (let s of ['vtt', 'srt', 'ass', 'ssa']) {
|
||||
if (v.name.endsWith(s)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (currentFiles.value.length) {
|
||||
currentFiles.value.reverse()
|
||||
setVideo(findVideo(currentFiles.value), findTextTrack(currentFiles.value))
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
_player.destroy()
|
||||
destroyUrl()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.player-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background-color: grey;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
#xgplayer {
|
||||
width: 100%;
|
||||
// height: 500px;
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.video-js {
|
||||
width: 100%;
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,55 @@
|
||||
.lock-div {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
left: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 30px;
|
||||
aspect-ratio: 1;
|
||||
cursor: pointer;
|
||||
color: #f2f2f2;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition:
|
||||
opacity 0.5s ease,
|
||||
visibility 0.5s ease,
|
||||
width 0.25s ease,
|
||||
left 0.25s ease;
|
||||
pointer-events: all !important;
|
||||
svg {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
&:hover {
|
||||
width: 36px;
|
||||
left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.xgplayer.xgplayer-inactive .lock-div {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.overlay-div {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
display: none;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.xgplayer.xgplayer-inactive .overlay-div {
|
||||
pointer-events: none;
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
.xgplayer .xgplayer-locked {
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
import { BasePlugin } from 'xgplayer'
|
||||
import './lockScreen.scss'
|
||||
import MobilePlugin from 'xgplayer/es/plugins/mobile'
|
||||
|
||||
export default class LockPlugin extends BasePlugin {
|
||||
static get pluginName() {
|
||||
return 'lockPlugin'
|
||||
}
|
||||
|
||||
private locked: boolean
|
||||
private lockDiv: HTMLDivElement = document.createElement('div')
|
||||
private overlayDiv: HTMLDivElement = document.createElement('div')
|
||||
|
||||
private lockOpenSVG: string = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M336 208v-95a80 80 0 0 0-160 0v95" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path>
|
||||
<rect x="96" y="208" width="320" height="272" rx="48" ry="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></rect>
|
||||
</svg>`
|
||||
|
||||
private lockClosedSVG: string = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M336 112a80 80 0 0 0-160 0v96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path>
|
||||
<rect x="96" y="208" width="320" height="272" rx="48" ry="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></rect>
|
||||
</svg>`
|
||||
|
||||
constructor(args: any) {
|
||||
super(args)
|
||||
this.locked = false
|
||||
}
|
||||
|
||||
afterCreate() {
|
||||
this.initLockDiv()
|
||||
this.initOverlayDiv()
|
||||
this.bindEvents()
|
||||
}
|
||||
|
||||
private initLockDiv() {
|
||||
this.lockDiv.innerHTML = this.lockClosedSVG
|
||||
this.lockDiv.className = 'lock-div'
|
||||
this.player.root !== null && this.player.root.appendChild(this.lockDiv)
|
||||
}
|
||||
|
||||
private initOverlayDiv() {
|
||||
this.overlayDiv.className = 'overlay-div'
|
||||
this.player.root !== null && this.player.root.appendChild(this.overlayDiv)
|
||||
this.overlayDiv.addEventListener('mousedown', (e) => {
|
||||
e.preventDefault()
|
||||
})
|
||||
this.overlayDiv.addEventListener('mousemove', (e) => {
|
||||
e.preventDefault()
|
||||
})
|
||||
}
|
||||
|
||||
private bindEvents() {
|
||||
this.lockDiv!.addEventListener('click', this.toggleLock.bind(this))
|
||||
this.player.root !== null &&
|
||||
this.player.root.addEventListener(
|
||||
'click',
|
||||
this.preventClick.bind(this),
|
||||
true
|
||||
)
|
||||
this.player.usePluginHooks('progress', 'dragstart', () => {
|
||||
if (this.locked) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
// 阻止进度条默认行为
|
||||
for (const event of ['dragstart', 'drag', 'dragend']) {
|
||||
this.player.usePluginHooks('progress', event, () => {
|
||||
if (this.locked) {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
private toggleLock() {
|
||||
const mobile = this.getPlugin('mobile') as MobilePlugin | undefined
|
||||
// mobile?.disableGesture()
|
||||
if (this.lockDiv && this.overlayDiv) {
|
||||
this.locked = !this.locked
|
||||
this.lockDiv.innerHTML = this.locked
|
||||
? this.lockOpenSVG
|
||||
: this.lockClosedSVG
|
||||
this.overlayDiv.style.display = this.locked ? 'block' : 'none'
|
||||
this.player.controls &&
|
||||
(this.locked
|
||||
? this.player.controls.hide()
|
||||
: this.player.controls.show())
|
||||
this.player.root !== null &&
|
||||
this.player.root.classList.toggle('xgplayer-locked', this.locked)
|
||||
this.locked ? mobile?.disableGesture() : mobile?.enableGesture()
|
||||
}
|
||||
}
|
||||
|
||||
private preventClick(event: MouseEvent) {
|
||||
if (
|
||||
this.locked &&
|
||||
event.target instanceof HTMLElement &&
|
||||
!event.target.classList.contains('lock-div')
|
||||
) {
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
}
|
||||
}
|
||||
|
||||
destroy() {
|
||||
if (this.lockDiv) {
|
||||
this.lockDiv.removeEventListener('click', this.toggleLock.bind(this))
|
||||
this.player.root !== null &&
|
||||
this.player.root.removeEventListener(
|
||||
'click',
|
||||
this.preventClick.bind(this),
|
||||
true
|
||||
)
|
||||
this.player.root !== null && this.player.root.removeChild(this.lockDiv)
|
||||
}
|
||||
if (this.overlayDiv) {
|
||||
this.player.root !== null &&
|
||||
this.player.root.removeChild(this.overlayDiv)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<Teleport :to="player.root">
|
||||
<App v-bind="pick(toRaw(props), ['player', 'root'])"></App>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Component, toRaw } from 'vue'
|
||||
import Player from 'xgplayer/es/player'
|
||||
import pick from 'lodash/pick'
|
||||
const props = defineProps({
|
||||
player: {
|
||||
type: Player,
|
||||
required: true
|
||||
},
|
||||
root: {
|
||||
type: Element,
|
||||
required: true
|
||||
},
|
||||
App: {
|
||||
type: Object as () => Component,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.test {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: aliceblue;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,39 @@
|
||||
import { App, Component, createApp } from 'vue'
|
||||
import { BasePlugin } from 'xgplayer'
|
||||
import fakeApp from './fakeRoot.vue'
|
||||
|
||||
const useXGPlayerVueFrame = (App: Component) => {
|
||||
return class XGPlayerVueFrame extends BasePlugin {
|
||||
static get pluginName() {
|
||||
return 'xgplayerVueFrame'
|
||||
}
|
||||
|
||||
private root: HTMLDivElement | null = null
|
||||
private app: App<Element> | null = null
|
||||
|
||||
constructor(args: any) {
|
||||
super(args)
|
||||
}
|
||||
|
||||
afterCreate() {
|
||||
this.createVueFrame()
|
||||
}
|
||||
|
||||
private createVueFrame() {
|
||||
this.root = document.createElement('div')
|
||||
this.app = createApp(fakeApp, {
|
||||
player: this.player,
|
||||
root: this.root,
|
||||
App
|
||||
})
|
||||
this.app.mount(this.root)
|
||||
// this.app.mount(this.player.root);
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.app?.unmount()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default useXGPlayerVueFrame
|
||||
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<!-- <div class="test"></div> -->
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import Player from 'xgplayer/es/player'
|
||||
const props = defineProps({
|
||||
player: {
|
||||
type: Player,
|
||||
required: true
|
||||
},
|
||||
root: {
|
||||
type: Element,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
props
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.test {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: aliceblue;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,35 @@
|
||||
import type { Plugin, registerComponentOption } from '@/class/PluginCenter'
|
||||
|
||||
export function checkNormalPlugin(obj: any): obj is Plugin {
|
||||
return (
|
||||
typeof obj === 'object' &&
|
||||
obj !== null &&
|
||||
typeof obj.name === 'string' &&
|
||||
(obj.icon === undefined || typeof obj.icon === 'object') &&
|
||||
typeof obj.disable === 'boolean' &&
|
||||
Array.isArray(obj.group) &&
|
||||
obj.group.every((group: any) => typeof group === 'string') &&
|
||||
typeof obj.priority === 'number' &&
|
||||
typeof obj.filter === 'function' &&
|
||||
typeof obj.func === 'function'
|
||||
)
|
||||
}
|
||||
|
||||
export function checkComponentPlugin(obj: any): obj is registerComponentOption {
|
||||
return (
|
||||
typeof obj === 'object' &&
|
||||
obj !== null &&
|
||||
typeof obj.key === 'string' &&
|
||||
typeof obj.name === 'string' &&
|
||||
(obj.icon === undefined || typeof obj.icon === 'object') &&
|
||||
typeof obj.getComponent === 'function' &&
|
||||
(obj.group === undefined ||
|
||||
(Array.isArray(obj.group) &&
|
||||
obj.group.every((item: any) => typeof item === 'string'))) &&
|
||||
typeof obj.filter === 'function' &&
|
||||
(obj.disable === undefined || typeof obj.disable === 'boolean') &&
|
||||
(obj.exitConfirm === undefined || typeof obj.exitConfirm === 'boolean') &&
|
||||
(obj.single === undefined || typeof obj.single === 'boolean') &&
|
||||
(obj.priority === undefined || typeof obj.priority === 'number')
|
||||
)
|
||||
}
|
||||
Loaded 100 of 112 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user