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
|
*.sln
|
||||||
*.sw?
|
*.sw?
|
||||||
.vscode
|
.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 list:
|
||||||
todo: 重构virtualPage，所有page以插件形式使用 [finish]
|
|
||||||
todo: miaoDirectory插件化，为后续插件功能开发做准备 [finish]
|
| 计划 | 状态 |
|
||||||
todo: miaoPopupInput, 弹出一个输入框 [finish]
|
|---|---|
|
||||||
todo: miaoDirectory的重命名功能 [finish]
|
| 拆分miaoDirectory | ✅ |
|
||||||
todo: miaoDirectory的剪切功能 [finish]
|
| 完善视频插件 | ✅ |
|
||||||
todo: miaoDirectory的上传按钮 [finish]
|
| 完善PDF插件 | ✅ |
|
||||||
todo: miaoDirectory的新建文件/文件夹功能 [finish]
|
| 完善Code插件 | ✅ |
|
||||||
todo: miaoDirectory的多选功能 [finish]
|
| 实现miaoDirectory的搜索功能 | ✅ |
|
||||||
todo: VirtualDirectory更新时更新文件信息
|
| 创建音乐播放器组件（仿QQ音乐移动端吧） | ✅ |
|
||||||
todo: miaoDirectory的复制文件/文件夹功能
|
| plugin增加些属性，icon, disable, group之类的 | ✅ |
|
||||||
|
| 实现miaoDirectory的排序功能 | ✅ |
|
||||||
|
| 重构miaoFetchApi.getFile， 增加进度 | ❌ |
|
||||||
|
| 完善miaoDirectory的搜索功能 | ❌ |
|
||||||
|
| 完善图片浏览插件 | ❌ |
|
||||||
|
| VirtualDirectory更新时更新文件信息 | ❌ |
|
||||||
|
| miaoDirectory的复制文件/文件夹功能 | ❌ |
|
||||||
|
| 重构miaoDropHandler的实现 | ❌ |
|
||||||
|
| 重构主界面，拆分主界面组件的实现 | ❌ |
|
||||||
|
|
||||||
|
|
||||||
|
| 长期计划 |
|
||||||
|
|---|
|
||||||
|
| 无 |
|
||||||
|
|
||||||
|
## 碎碎念：
|
||||||
|
|
||||||
|
写的真潦草
|
||||||
+2
-2
@@ -2,9 +2,9 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<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" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>MDW</title>
|
<title>MiaoDirectory</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
+36
-2
@@ -7,20 +7,54 @@
|
|||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"dev:host": "vite --host 0.0.0.0",
|
"dev:host": "vite --host 0.0.0.0",
|
||||||
"build": "vue-tsc -b && vite build",
|
"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": {
|
"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",
|
"@vicons/ionicons5": "^0.12.0",
|
||||||
|
"aes-js": "^3.1.2",
|
||||||
|
"aplayer": "^1.10.1",
|
||||||
"axios": "^1.7.3",
|
"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",
|
"lodash": "^4.17.21",
|
||||||
|
"markdown-it": "^14.1.0",
|
||||||
"naive-ui": "^2.39.0",
|
"naive-ui": "^2.39.0",
|
||||||
|
"pdfjs-dist": "^4.5.136",
|
||||||
"sass": "^1.77.8",
|
"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": {
|
"devDependencies": {
|
||||||
|
"@types/aes-js": "^3.1.4",
|
||||||
"@types/lodash": "^4.17.7",
|
"@types/lodash": "^4.17.7",
|
||||||
|
"@types/markdown-it": "^14.1.2",
|
||||||
"@types/node": "^22.1.0",
|
"@types/node": "^22.1.0",
|
||||||
|
"@types/pdfjs-dist": "^2.10.378",
|
||||||
"@vitejs/plugin-vue": "^5.1.2",
|
"@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",
|
"typescript": "^5.5.3",
|
||||||
"vite": "^5.4.0",
|
"vite": "^5.4.0",
|
||||||
"vite-plugin-singlefile": "^2.0.2",
|
"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"
|
||||||
|
}
|
||||||
+88
-327
@@ -1,403 +1,164 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { h, onMounted, reactive, ref, shallowRef } from 'vue'
|
|
||||||
import { NIcon, NScrollbar, NDropdown, NQrCode } from 'naive-ui'
|
|
||||||
import {
|
import {
|
||||||
EyeOffOutline,
|
computed,
|
||||||
EyeOutline,
|
onMounted,
|
||||||
CloseOutline,
|
provide,
|
||||||
CopyOutline,
|
ref,
|
||||||
EllipsisVertical,
|
shallowRef,
|
||||||
QrCodeOutline
|
useTemplateRef
|
||||||
} from '@vicons/ionicons5'
|
} from 'vue'
|
||||||
import miaoDirectory from './views/miaoDirectory.vue'
|
import { QrCodeOutline, ExtensionPuzzleOutline } from '@vicons/ionicons5'
|
||||||
import VirtualPage from './class/VirtualPage'
|
import type VirtualDirectory from './class/VirtualDirectory'
|
||||||
import VirtualDirectory, { VirtualFile } from './class/VirtualDirectory'
|
import type { VirtualFile } from './class/VirtualDirectory'
|
||||||
import MiaoMask from './components/miaoMask.vue'
|
import MiaoMask from './components/miaoMask.vue'
|
||||||
|
import MiaoMessageProvider from './components/miaoAlertTipProvider.vue'
|
||||||
import config from './config'
|
import config from './config'
|
||||||
import useVirtualPages from './hooks/useVirtualPages'
|
import 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 { baseUrl } = config
|
||||||
|
|
||||||
const showModal = ref<boolean>(false)
|
const showModal = ref<boolean>(false)
|
||||||
|
const viewRef = ref<HTMLDivElement>()
|
||||||
const modalData = shallowRef<{
|
const modalData = shallowRef<{
|
||||||
component: any
|
component: any
|
||||||
props: any
|
props: any
|
||||||
}>()
|
}>()
|
||||||
|
const messageProviderRef = useTemplateRef('messageProviderRef')
|
||||||
const views = useVirtualPages()
|
const views = useVirtualPages()
|
||||||
|
let pluginCenter = ref<PluginCenter>()
|
||||||
const rootDirectory = reactive(
|
const rootDirectory = useRootVDirectory()
|
||||||
new VirtualDirectory({
|
|
||||||
name: '根目录',
|
|
||||||
stats: {
|
|
||||||
atimeMs: 0,
|
|
||||||
birthtimeMs: 0,
|
|
||||||
ctimeMs: 0,
|
|
||||||
mtimeMs: 0
|
|
||||||
}
|
|
||||||
})
|
|
||||||
)
|
|
||||||
|
|
||||||
// component就是一个vue组件，类似于miaoDirectory
|
// component就是一个vue组件，类似于miaoDirectory
|
||||||
const createView = (
|
const createView = (
|
||||||
component: any,
|
component: any,
|
||||||
currentDirectorys?: VirtualDirectory[],
|
name: string,
|
||||||
|
currentDirectories?: VirtualDirectory[],
|
||||||
currentFiles?: VirtualFile[],
|
currentFiles?: VirtualFile[],
|
||||||
index?: number
|
index?: number
|
||||||
) => {
|
) => {
|
||||||
index ?? (index = views.length)
|
views.push(component, name, currentDirectories, currentFiles, { index })
|
||||||
views.splice(
|
|
||||||
index,
|
|
||||||
0,
|
|
||||||
reactive<VirtualPage>(new VirtualPage(component, {
|
|
||||||
directorys: [...(currentDirectorys ?? [])],
|
|
||||||
files: [...(currentFiles ?? [])]
|
|
||||||
}))
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const deleteView = (index: number) => {
|
const deleteView = (index: number) => {
|
||||||
views.splice(index, 1)
|
views.deleteView(index)
|
||||||
if (views.length === 0) {
|
|
||||||
createView(miaoDirectory, [rootDirectory])
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 点击标题是隐藏其他标签或显示其他标签，还挺好用的
|
// 点击标题是隐藏其他标签或显示其他标签，还挺好用的
|
||||||
const handleClickTitle = (index: number) => {
|
const handleClickTitle = (index: number) => {
|
||||||
let count = views.filter((v) => v.visible).length
|
let count = views._views.filter((v) => v.visible).length
|
||||||
let op = !views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
|
let op =
|
||||||
|
!views._views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
|
||||||
let _index = 0
|
let _index = 0
|
||||||
while (_index < views.length) {
|
while (_index < views._views.length) {
|
||||||
if (_index !== index) {
|
if (_index !== index) {
|
||||||
views[_index].visible = op === 'hideOthers' ? false : true
|
views._views[_index].visible = op === 'hideOthers' ? false : true
|
||||||
} else {
|
} else {
|
||||||
views[_index].visible = true
|
views._views[_index].visible = true
|
||||||
}
|
}
|
||||||
_index += 1
|
_index += 1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 顶部菜单相关
|
const openMenuOption = computed(
|
||||||
function renderIcon(icon: any) {
|
() =>
|
||||||
return () => {
|
[
|
||||||
return h(NIcon, null, {
|
|
||||||
default: () => h(icon)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const openMenuOption = [
|
|
||||||
{
|
{
|
||||||
label: '分享',
|
label: '分享',
|
||||||
key: 'share',
|
key: 'share',
|
||||||
icon: renderIcon(QrCodeOutline)
|
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') {
|
if (key === 'share') {
|
||||||
showModal.value = true
|
showModal.value = true
|
||||||
modalData.value = {
|
modalData.value = {
|
||||||
component: NQrCode,
|
component: (await import('naive-ui/es/qr-code')).NQrCode,
|
||||||
props: {
|
props: {
|
||||||
value: baseUrl,
|
value: baseUrl,
|
||||||
size: 300,
|
size: 300,
|
||||||
errorCorrectionLevel: 'H'
|
errorCorrectionLevel: 'H'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
} else if (key.startsWith('plugin:')) {
|
||||||
|
const pluginName = key.split(':')[1]
|
||||||
|
pluginCenter.value && pluginCenter.value.usePlugin(pluginName, [], [])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(async () => {
|
||||||
createView(miaoDirectory, [rootDirectory])
|
// @ts-ignore
|
||||||
|
await init(messageProviderRef.value?.alertTip)
|
||||||
|
pluginCenter.value = usePluginCenter()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
provide('globalAlertTip', messageProviderRef.value?.alertTip)
|
||||||
|
provide('rootDirectory', rootDirectory)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="view">
|
<div class="view" ref="viewRef">
|
||||||
<div class="view-controler">
|
<miao-message-provider ref="messageProviderRef">
|
||||||
<n-scrollbar x-scrollable>
|
<ViewController
|
||||||
<div class="tags-container">
|
:views="views"
|
||||||
<transition-group name="tab">
|
:handleClickTitle="handleClickTitle"
|
||||||
<div
|
:createView="createView"
|
||||||
class="tab"
|
:deleteView="deleteView"
|
||||||
v-for="(view, index) of views"
|
:openMenuOption="openMenuOption"
|
||||||
:key="view.uid">
|
:handleMenuSelect="handleMenuSelect" />
|
||||||
<div
|
<ViewContainer
|
||||||
class="tab-title"
|
:views="views"
|
||||||
@click="handleClickTitle(index)">
|
:deleteView="deleteView"
|
||||||
{{ view.title }}
|
:handleClickTitle="handleClickTitle" />
|
||||||
</div>
|
</miao-message-provider>
|
||||||
<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>
|
</div>
|
||||||
<!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
|
<!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
|
||||||
<MiaoMask v-model:show="showModal" @click="showModal = false">
|
<MiaoMask v-model:show="showModal" @click="showModal = false">
|
||||||
<component
|
<component
|
||||||
@click="(e:any) => e.stopPropagation()"
|
@click="(e: any) => e.stopPropagation()"
|
||||||
:is="modalData?.component"
|
:is="modalData?.component"
|
||||||
v-bind="modalData?.props"></component>
|
v-bind="modalData?.props"></component>
|
||||||
</MiaoMask>
|
</MiaoMask>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
$controler-height: 25px;
|
@use "styles/default.scss";
|
||||||
|
|
||||||
|
$controller-height: 25px;
|
||||||
$tag-width: 170px;
|
$tag-width: 170px;
|
||||||
|
|
||||||
.view {
|
.view {
|
||||||
|
background-color: #ffffff;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 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>
|
</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 generateId from '@/utils/generateId'
|
||||||
import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
|
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
||||||
import VirtualDirectory from "./VirtualDirectory";
|
import VirtualDirectory from './VirtualDirectory'
|
||||||
|
|
||||||
const miaoFetchApi = useMiaoFetchApi();
|
const miaoFetchApi = useMiaoFetchApi()
|
||||||
|
|
||||||
export class UploadQueueItem {
|
export class UploadQueueItem {
|
||||||
constructor(
|
constructor(
|
||||||
file: File,
|
file: File,
|
||||||
targetDirectory: VirtualDirectory,
|
targetDirectory: VirtualDirectory,
|
||||||
config?: {
|
config?: {
|
||||||
onSuccess?: () => void;
|
onSuccess?: () => void
|
||||||
onFailed?: () => void;
|
onFailed?: () => void
|
||||||
}
|
}
|
||||||
) {
|
) {
|
||||||
this.file = file;
|
this.file = file
|
||||||
this.targetDirectory = targetDirectory;
|
this.targetDirectory = targetDirectory
|
||||||
this.uid = generateId();
|
this.uid = generateId()
|
||||||
this.status = "waiting";
|
this.status = 'waiting'
|
||||||
this.process = 0;
|
this.process = 0
|
||||||
this.onSuccess = config && config.onSuccess;
|
this.onSuccess = config && config.onSuccess
|
||||||
this.onFailed = config && config.onFailed;
|
this.onFailed = config && config.onFailed
|
||||||
}
|
}
|
||||||
uid: number;
|
uid: number
|
||||||
file: File;
|
file: File
|
||||||
targetDirectory: VirtualDirectory;
|
targetDirectory: VirtualDirectory
|
||||||
status: "waiting" | "uploading" | "success" | "failed";
|
status: 'waiting' | 'uploading' | 'success' | 'failed'
|
||||||
process: number;
|
process: number
|
||||||
failedReason: unknown | undefined;
|
failedReason: unknown | undefined
|
||||||
|
|
||||||
onSuccess?: () => void;
|
onSuccess?: () => void
|
||||||
onFailed?: () => void;
|
onFailed?: () => void
|
||||||
|
|
||||||
_abort: (() => void | undefined) | undefined;
|
_abort: (() => void | undefined) | undefined
|
||||||
_status: Promise<any> | undefined;
|
_status: Promise<any> | undefined
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 开始上传文件
|
* 开始上传文件
|
||||||
*/
|
*/
|
||||||
startUpload() {
|
startUpload() {
|
||||||
if (this.status === "uploading") {
|
if (this.status === 'uploading') {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
const { abort, response } = miaoFetchApi.upload(this.file, this.targetDirectory, {
|
const { abort, response } = miaoFetchApi.upload(
|
||||||
onProcess: percent => {
|
this.file,
|
||||||
this.process = percent;
|
this.targetDirectory,
|
||||||
|
{
|
||||||
|
onProcess: (percent) => {
|
||||||
|
this.process = percent
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
this._abort = abort;
|
)
|
||||||
this._status = response;
|
this._abort = abort
|
||||||
this.status = "uploading";
|
this._status = response
|
||||||
|
this.status = 'uploading'
|
||||||
response
|
response
|
||||||
.then(() => {
|
.then(() => {
|
||||||
this.status = "success";
|
this.status = 'success'
|
||||||
this.onSuccess && this.onSuccess();
|
this.onSuccess && this.onSuccess()
|
||||||
this._abort = undefined;
|
this._abort = undefined
|
||||||
this._status = 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() {
|
abortUpload() {
|
||||||
this._abort && this._abort();
|
this._abort && this._abort()
|
||||||
this.status = "failed";
|
this.status = 'failed'
|
||||||
this.failedReason = "abort";
|
this.failedReason = 'abort'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class UploadQueue {
|
export default class UploadQueue {
|
||||||
constructor() {
|
constructor() {
|
||||||
this.uid = generateId();
|
this.uid = generateId()
|
||||||
this.queue = [];
|
this.queue = []
|
||||||
this.mode = "serial";
|
this.mode = 'serial'
|
||||||
}
|
}
|
||||||
uid: number;
|
uid: number
|
||||||
queue: UploadQueueItem[];
|
queue: UploadQueueItem[]
|
||||||
current: UploadQueueItem | undefined;
|
current: UploadQueueItem | undefined
|
||||||
|
|
||||||
// 未来再去实现，目前就是串行的
|
// 未来再去实现，目前就是串行的
|
||||||
// 好像也不用去实现
|
// 好像也不用去实现
|
||||||
mode: "serial" | "parallel";
|
mode: 'serial' | 'parallel'
|
||||||
get status() {
|
get status() {
|
||||||
for (let item of this.queue) {
|
for (let item of this.queue) {
|
||||||
if (item.status === "uploading") {
|
if (item.status === 'uploading') {
|
||||||
return "busy";
|
return 'busy'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return "free";
|
return 'free'
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -100,8 +104,8 @@ export default class UploadQueue {
|
|||||||
*/
|
*/
|
||||||
get nextUplpadItem() {
|
get nextUplpadItem() {
|
||||||
for (let item of this.queue) {
|
for (let item of this.queue) {
|
||||||
if (item.status === "waiting") {
|
if (item.status === 'waiting') {
|
||||||
return item;
|
return item
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -110,11 +114,11 @@ export default class UploadQueue {
|
|||||||
* 开始串行的上传循环
|
* 开始串行的上传循环
|
||||||
*/
|
*/
|
||||||
loop() {
|
loop() {
|
||||||
if (this.status === "busy") {
|
if (this.status === 'busy') {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
if (this.nextUplpadItem) {
|
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 onFinish = option?.onFinish
|
||||||
const immediately = option?.immediately ?? false;
|
const immediately = option?.immediately ?? false
|
||||||
const uploadQueue = files.map(file => {
|
const uploadQueue = files.map((file) => {
|
||||||
return new UploadQueueItem(file, targetDirectory, {
|
return new UploadQueueItem(file, targetDirectory, {
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
this.loop();
|
this.loop()
|
||||||
onFinish && onFinish();
|
onFinish && onFinish()
|
||||||
},
|
},
|
||||||
onFailed: () => {
|
onFailed: () => {
|
||||||
this.loop();
|
this.loop()
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
this.queue.push(...uploadQueue);
|
this.queue.push(...uploadQueue)
|
||||||
if (!immediately) {
|
if (!immediately) {
|
||||||
this.loop();
|
this.loop()
|
||||||
} else {
|
} else {
|
||||||
uploadQueue.forEach(item => {
|
uploadQueue.forEach((item) => {
|
||||||
item.startUpload();
|
item.startUpload()
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
return uploadQueue;
|
return uploadQueue
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
+154
-63
@@ -1,52 +1,95 @@
|
|||||||
import generateId from "@/hooks/generateId";
|
import config from '@/config'
|
||||||
import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
|
import generateId from '@/utils/generateId'
|
||||||
// import { debounce } from "lodash";
|
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
||||||
import type { stats, file, directory } from "@/types/type.ts";
|
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 {
|
export class VirtualFile {
|
||||||
constructor(info: file, parent: VirtualDirectory) {
|
constructor(info: file, parent: VirtualDirectory) {
|
||||||
this.name = info.name;
|
this.name = info.name
|
||||||
this.size = info.size;
|
this.size = info.size
|
||||||
this.stats = info.stats;
|
this.stats = info.stats
|
||||||
this.parent = parent;
|
this.parent = parent
|
||||||
this.type = "file";
|
this.type = 'file'
|
||||||
this.uid = generateId();
|
this.id = generateId()
|
||||||
|
// if (vFileMap.get(this.path) !== undefined) {
|
||||||
|
// throw `${this.path} is already exist`
|
||||||
|
// }
|
||||||
|
// vFileMap.set(this.path, this)
|
||||||
}
|
}
|
||||||
name: string;
|
name: string
|
||||||
type: "file";
|
type: 'file'
|
||||||
size: number;
|
size: number
|
||||||
stats: stats;
|
stats: stats
|
||||||
parent: VirtualDirectory;
|
parent: VirtualDirectory
|
||||||
uid: number;
|
id: number
|
||||||
|
storage: { [key: string]: any } = {}
|
||||||
get path() {
|
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 {
|
class VirtualDirectory {
|
||||||
|
/**
|
||||||
|
* 除非为根节点，否则必须设置parent
|
||||||
|
*/
|
||||||
constructor(info: directory, parent?: VirtualDirectory) {
|
constructor(info: directory, parent?: VirtualDirectory) {
|
||||||
this.name = info.name;
|
this.name = info.name
|
||||||
this.type = "directory";
|
this.stats = info.stats
|
||||||
this.stats = info.stats;
|
this.parent = parent ?? undefined
|
||||||
this.parent = parent ?? undefined;
|
this.id = generateId()
|
||||||
this.uid = 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}
|
* @returns {string}
|
||||||
*/
|
*/
|
||||||
get layer(): number {
|
get layer(): number {
|
||||||
return this.parent ? this.parent.layer + 1 : 0;
|
return this.parent ? this.parent.layer + 1 : 0
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* 相对于根目录的路径， 如: "/", "/123/321/"
|
* 相对于根目录的路径， 如: "/", "/123/321/"
|
||||||
@@ -63,9 +106,9 @@ class VirtualDirectory {
|
|||||||
*/
|
*/
|
||||||
get path(): string {
|
get path(): string {
|
||||||
if (!this.parent) {
|
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[] {
|
get getParents(): VirtualDirectory[] {
|
||||||
if (!this.parent) {
|
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 {
|
getParent(layer: number): VirtualDirectory {
|
||||||
if (layer <= 0 || !this.parent) {
|
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)[]) {
|
updateContent(content: (file | directory)[]) {
|
||||||
this.files = this.files ?? [];
|
this._isUpdated = true
|
||||||
this.directorys = this.directorys ?? [];
|
|
||||||
const fileNames: string[] = this.files.map(v => v.name);
|
const itemNames: string[] = content.map((v) => v.name)
|
||||||
const dirNames: string[] = this.directorys.map(v => v.name);
|
|
||||||
const itemNames: string[] = content.map(v => v.name);
|
|
||||||
// 删去远程端已不存在的文件与文件夹
|
// 删去远程端已不存在的文件与文件夹
|
||||||
const _delete = (target: (VirtualFile | VirtualDirectory)[]) => {
|
const _delete = (target: (VirtualFile | VirtualDirectory)[]) => {
|
||||||
let index = 0;
|
let index = 0
|
||||||
while (index < target.length) {
|
while (index < target.length) {
|
||||||
if (!itemNames.includes(target[index].name)) {
|
if (!itemNames.includes(target[index].name)) {
|
||||||
target.splice(index, 1);
|
target.splice(index, 1)
|
||||||
} else {
|
} else {
|
||||||
index += 1;
|
index += 1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
_delete(this.files);
|
const _addFile = (item: file) => {
|
||||||
_delete(this.directorys);
|
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) {
|
for (let item of content.filter((v) => newFileNames.includes(v.name))) {
|
||||||
if (item.type === "file") {
|
_addFile(item as 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) =>
|
||||||
|
newDirectoryNames.includes(v.name)
|
||||||
|
)) {
|
||||||
|
_addDirectory(item as directory)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
hasChild(item: VirtualDirectory | VirtualFile): boolean {
|
hasChild(item: VirtualDirectory | VirtualFile): boolean {
|
||||||
if (item.type === "directory") {
|
if (item.type === 'directory') {
|
||||||
return this.directorys?.includes(item) ?? false;
|
return this.directories?.includes(item) ?? false
|
||||||
} else {
|
} 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}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
async update(): Promise<void> {
|
async update(): Promise<void> {
|
||||||
const data: (file | directory)[] = await miaoFetchApi.get(this);
|
const data: (file | directory)[] = await miaoFetchApi.get(this)
|
||||||
this.updateContent(data);
|
this.updateContent(data)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export default VirtualDirectory;
|
export default VirtualDirectory
|
||||||
+148
-31
@@ -1,63 +1,180 @@
|
|||||||
import { shallowRef } from "vue";
|
import { Component, reactive, shallowRef } from 'vue'
|
||||||
import VirtualDirectory, { VirtualFile } from "./VirtualDirectory";
|
import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
|
||||||
import generateId from "@/hooks/generateId";
|
import generateId from '@/utils/generateId'
|
||||||
|
|
||||||
|
export interface VirtualPageOption {
|
||||||
|
exitConfirm?: boolean
|
||||||
|
allowCopy?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ViewsPushOption {
|
||||||
|
index?: number
|
||||||
|
VirtualPageOption?: VirtualPageOption
|
||||||
|
}
|
||||||
|
|
||||||
const getRandomWebSafeColor = (() => {
|
const getRandomWebSafeColor = (() => {
|
||||||
const webSafeColors = ["#009900", "#999900", "#009999", "#990099", "#0000ee"];
|
const webSafeColors = ['#009900', '#999900', '#009999', '#990099', '#0000ee']
|
||||||
let counter = 0;
|
let counter = 0
|
||||||
return () => {
|
return () => {
|
||||||
const color = webSafeColors[counter % webSafeColors.length];
|
const color = webSafeColors[counter % webSafeColors.length]
|
||||||
counter += 1;
|
counter += 1
|
||||||
return color;
|
return color
|
||||||
};
|
}
|
||||||
})();
|
})()
|
||||||
|
|
||||||
export default class VirtualPage {
|
export default class VirtualPage {
|
||||||
constructor(component: any, initObjects?:{ directorys?: VirtualDirectory[], files?: VirtualFile[]}) {
|
constructor(
|
||||||
this.component = shallowRef(component);
|
component: Component,
|
||||||
this.currentDirectorys = initObjects?.directorys ?? [];
|
initObjects: {
|
||||||
this.currentFiles = initObjects?.files ?? [];
|
name: string
|
||||||
this.visible = true;
|
directories?: VirtualDirectory[]
|
||||||
this.uid = generateId();
|
files?: VirtualFile[]
|
||||||
this.refreshKey = Math.random();
|
option?: VirtualPageOption
|
||||||
this.color = getRandomWebSafeColor();
|
}
|
||||||
|
) {
|
||||||
|
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
|
// 区分每一个页面的唯一id
|
||||||
uid: number;
|
id: number
|
||||||
// 当refreshKey改变时需要刷新页面，目前还没接入刷新
|
// 当refreshKey改变时需要刷新页面，目前还没接入刷新
|
||||||
refreshKey: number;
|
refreshKey: number
|
||||||
// 为了区分，每个虚拟页面都会分配一个color，这个color会体现在tab上
|
// 为了区分，每个虚拟页面都会分配一个color，这个color会体现在tab上
|
||||||
color: string;
|
color: string
|
||||||
// 用于展示的title
|
// 用于展示的title
|
||||||
_title?: string;
|
_title?: string
|
||||||
|
// 关闭时是否需要确认（未实现）
|
||||||
|
exitConfirm: boolean
|
||||||
|
// 是否允许复制页面
|
||||||
|
allowCopy: boolean
|
||||||
|
|
||||||
get title() {
|
get title() {
|
||||||
if (this._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) {
|
setTitle(title: string) {
|
||||||
this._title = title;
|
this._title = title
|
||||||
}
|
}
|
||||||
|
|
||||||
// 切换显示状态
|
// 切换显示状态
|
||||||
switchShow() {
|
switchShow() {
|
||||||
this.visible = !this.visible;
|
this.visible = !this.visible
|
||||||
}
|
}
|
||||||
|
|
||||||
// 刷新，不过好像没有用得到的时候吧
|
// 刷新，不过好像没有用得到的时候吧
|
||||||
// 事实上也不应该用得到，因为更新应该是响应式的
|
// 事实上也不应该用得到，因为更新应该是响应式的
|
||||||
refresh() {
|
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的下拉菜单实现的自定义下拉菜单 -->
|
<!-- 基于naiveui的下拉菜单实现的自定义下拉菜单 -->
|
||||||
<!-- 支持长按和右键呼出下拉菜单 -->
|
<!-- 支持长按和右键呼出下拉菜单 -->
|
||||||
<template>
|
<template>
|
||||||
<div class="main" @contextmenu="handleContextMenu" @mouseleave="handleMainMouseLeave" @touchstart="handleTouchStart"
|
<div
|
||||||
@touchend="handleTouchEnd">
|
class="main"
|
||||||
|
@contextmenu="handleContextMenu"
|
||||||
|
@mouseleave="handleMainMouseLeave">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
<n-dropdown placement="bottom-start" trigger="manual" :x="x" :y="y" :options="props.options"
|
<n-dropdown
|
||||||
:show="showContextMenu > 0" :on-clickoutside="onClickoutside" @select="handleSelect" @mouseleave="
|
placement="bottom-start"
|
||||||
showContextMenu -= 1" @mouseenter="showContextMenu += 1" />
|
trigger="manual"
|
||||||
|
:x="x"
|
||||||
|
:y="y"
|
||||||
|
:options="props.options"
|
||||||
|
:show="showContextMenu > 0"
|
||||||
|
:on-clickoutside="onClickoutside"
|
||||||
|
@select="handleSelect"
|
||||||
|
@mouseleave="showContextMenu -= 1"
|
||||||
|
@mouseenter="showContextMenu += 1" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { NDropdown } from 'naive-ui/es/dropdown';
|
import { NDropdown } from 'naive-ui/es/dropdown'
|
||||||
import { DropdownOption } from 'naive-ui/es/dropdown';
|
import { DropdownOption } from 'naive-ui/es/dropdown'
|
||||||
import { nextTick, ref } from 'vue';
|
import { nextTick, ref } from 'vue'
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
options: DropdownOption[]
|
options: DropdownOption[]
|
||||||
@@ -28,7 +38,7 @@ const x = ref(0)
|
|||||||
const y = ref(0)
|
const y = ref(0)
|
||||||
const showContextMenu = 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 () => {
|
const onClickoutside = async () => {
|
||||||
showContextMenu.value = 0
|
showContextMenu.value = 0
|
||||||
@@ -58,26 +68,25 @@ const handleContextMenu = (e: MouseEvent) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleTouchStart = (e: TouchEvent) => {
|
// const handleTouchStart = (e: TouchEvent) => {
|
||||||
if(props.touchTimeOut === undefined) {
|
// if(props.touchTimeOut === undefined) {
|
||||||
return
|
// return
|
||||||
}
|
// }
|
||||||
timer_touch ?? clearTimeout(timer_touch)
|
// timer_touch ?? clearTimeout(timer_touch)
|
||||||
timer_touch = setTimeout(() => {
|
// timer_touch = setTimeout(() => {
|
||||||
showContextMenu.value = 1
|
// showContextMenu.value = 1
|
||||||
x.value = e.targetTouches[0].clientX
|
// x.value = e.targetTouches[0].clientX
|
||||||
y.value = e.targetTouches[0].clientY
|
// y.value = e.targetTouches[0].clientY
|
||||||
}, props.touchTimeOut)
|
// }, props.touchTimeOut)
|
||||||
}
|
// }
|
||||||
|
|
||||||
const handleTouchEnd = () => {
|
// const handleTouchEnd = () => {
|
||||||
if(timer_touch) {
|
// if(timer_touch) {
|
||||||
clearTimeout(timer_touch)
|
// clearTimeout(timer_touch)
|
||||||
timer_touch = undefined
|
// timer_touch = undefined
|
||||||
}
|
// }
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
// }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<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 config from '@/config'
|
||||||
import useDataBus from '@/hooks/useDataBus'
|
import useDataBus from '@/hooks/useDataBus'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
disable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
const dataBus = useDataBus()
|
const dataBus = useDataBus()
|
||||||
|
|
||||||
const { uploadSizeLimit } = config
|
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) => {
|
const handleDragOver = async (event: DragEvent) => {
|
||||||
showMask.value += 1
|
if (props.disable || check(event) === false) {
|
||||||
|
return
|
||||||
|
}
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
|
if (showMask.value === 1) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
showMask.value = 1
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleDragLeave = async () => {
|
const handleDragLeave = async () => {
|
||||||
@@ -72,6 +94,9 @@ const handleDragLeave = async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const handleDrop = async (event: DragEvent) => {
|
const handleDrop = async (event: DragEvent) => {
|
||||||
|
if (props.disable || check(event) === false) {
|
||||||
|
return
|
||||||
|
}
|
||||||
showMask.value = 0
|
showMask.value = 0
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
event.stopPropagation()
|
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>
|
</transition>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue'
|
||||||
|
|
||||||
const maskBodyRef = ref<HTMLDivElement>()
|
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>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.mask-body {
|
.mask-body {
|
||||||
|
|||||||
@@ -2,34 +2,53 @@
|
|||||||
<miao-mask v-model:show="showMask">
|
<miao-mask v-model:show="showMask">
|
||||||
<n-card class="popup-card" :title="popupConfig?.title" size="medium">
|
<n-card class="popup-card" :title="popupConfig?.title" size="medium">
|
||||||
{{ popupConfig?.content }}
|
{{ 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" />
|
v-if="popupConfig?.inputProps" />
|
||||||
<div class="popup-button-container">
|
<div class="popup-button-container">
|
||||||
<n-button class="popup-button-container-button" v-for="option in popupConfig?.options" :key="option.label"
|
<n-button
|
||||||
:type="option.type" @click="_resolve && _resolve(option.key)">{{ option.label }}</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>
|
</div>
|
||||||
</n-card>
|
</n-card>
|
||||||
</miao-mask>
|
</miao-mask>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, nextTick } from "vue";
|
import { ref, nextTick } from 'vue'
|
||||||
import { NCard, NInput, NButton } from "naive-ui";
|
import { NCard, NInput, NButton } from 'naive-ui'
|
||||||
import miaoMask from "./miaoMask.vue";
|
import miaoMask from './miaoMask.vue'
|
||||||
import { InputProps } from "naive-ui";
|
import { InputProps } from 'naive-ui'
|
||||||
|
|
||||||
const showMask = ref(false);
|
const showMask = ref(false)
|
||||||
const inputValue = ref<string>("");
|
const inputValue = ref<string>('')
|
||||||
const _resolve = ref()
|
const _resolve = ref()
|
||||||
|
|
||||||
type popupConfigType = {
|
type popupConfigType = {
|
||||||
title: string
|
title: string
|
||||||
content?: string
|
content?: string
|
||||||
inputValue?: string,
|
inputValue?: string
|
||||||
inputProps?: InputProps
|
inputProps?: InputProps
|
||||||
options: {
|
options: {
|
||||||
label: string
|
label: string
|
||||||
key: unknown
|
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
|
_resolve.value = resolve
|
||||||
})
|
})
|
||||||
const text = inputValue.value
|
const text = inputValue.value
|
||||||
showMask.value = false;
|
showMask.value = false
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
inputValue.value = ''
|
inputValue.value = ''
|
||||||
_resolve.value = undefined
|
_resolve.value = undefined
|
||||||
@@ -51,10 +70,10 @@ const popup = async (config: popupConfigType) => {
|
|||||||
return {
|
return {
|
||||||
text,
|
text,
|
||||||
key
|
key
|
||||||
};
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
defineExpose({ popup });
|
defineExpose({ popup })
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<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 {
|
export default {
|
||||||
baseUrl,
|
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
|
|
||||||
};
|
|
||||||
+14
-10
@@ -1,22 +1,26 @@
|
|||||||
import { reactive } from "vue";
|
import { reactive } from 'vue'
|
||||||
|
|
||||||
let dataStorage: {
|
let dataStorage: {
|
||||||
[key: string | number] : any
|
[key: string | number]: any
|
||||||
};
|
}
|
||||||
|
|
||||||
export default function useDataBus() {
|
export default function useDataBus() {
|
||||||
if(dataStorage === undefined) {
|
if (dataStorage === undefined) {
|
||||||
dataStorage = reactive({})
|
dataStorage = reactive({})
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
set(key: string | number, value: any) {
|
set(key: string | number, value: any) {
|
||||||
dataStorage[key] = value;
|
dataStorage[key] = value
|
||||||
return value;
|
return value
|
||||||
},
|
},
|
||||||
pop(key: string | number) {
|
pop(key: string | number) {
|
||||||
const value = dataStorage[key];
|
const value = dataStorage[key]
|
||||||
dataStorage[key] = undefined;
|
dataStorage[key] = undefined
|
||||||
return value;
|
return value
|
||||||
|
},
|
||||||
|
get(key: string | number) {
|
||||||
|
const value = dataStorage[key]
|
||||||
|
return value
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
|
||||||
}
|
}
|
||||||
@@ -8,17 +8,20 @@ import {
|
|||||||
queryOption,
|
queryOption,
|
||||||
renameOption,
|
renameOption,
|
||||||
cutOption,
|
cutOption,
|
||||||
mkdirOption
|
mkdirOption,
|
||||||
|
getFileOption
|
||||||
} from '@/types/fetch'
|
} from '@/types/fetch'
|
||||||
import Config from '@/config'
|
import Config from '@/config'
|
||||||
import axios, { AxiosRequestConfig } from 'axios'
|
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
|
||||||
|
|
||||||
export const useMiaoFetch = (option?: miaoFetchConfig) => {
|
export const useMiaoFetch = (option?: miaoFetchConfig) => {
|
||||||
const retry = option?.retry ?? 0
|
const retry = option?.retry ?? 0
|
||||||
const controller = new AbortController()
|
const controller = new AbortController()
|
||||||
let flag = true
|
let flag = true
|
||||||
return {
|
return {
|
||||||
miaoFetch: async (config: AxiosRequestConfig<any>) => {
|
miaoFetch: async (
|
||||||
|
config: AxiosRequestConfig<any>
|
||||||
|
): Promise<AxiosResponse<any, any>> => {
|
||||||
let counter = 0
|
let counter = 0
|
||||||
let response: any
|
let response: any
|
||||||
let errList = []
|
let errList = []
|
||||||
@@ -67,6 +70,40 @@ const miaoFetchApi = {
|
|||||||
return response.data
|
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以支持分片上传
|
* 上传单个文件到对应文件夹, 后续要将data类型改成buffer以支持分片上传
|
||||||
* 正常上传文件请使用uploadQueue
|
* 正常上传文件请使用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,10 +1,10 @@
|
|||||||
import UploadQueue from "@/class/UploadQueue";
|
import UploadQueue from '@/class/UploadQueue'
|
||||||
import { reactive } from "vue";
|
import { reactive } from 'vue'
|
||||||
|
|
||||||
let uploadQueue: UploadQueue
|
let uploadQueue: UploadQueue
|
||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
if(uploadQueue === undefined){
|
if (uploadQueue === undefined) {
|
||||||
uploadQueue = reactive(new UploadQueue())
|
uploadQueue = reactive(new UploadQueue())
|
||||||
}
|
}
|
||||||
return uploadQueue
|
return uploadQueue
|
||||||
|
|||||||
@@ -1,11 +1,12 @@
|
|||||||
import VirtualPage from "@/class/VirtualPage"
|
import { VirtualPages } from '@/class/VirtualPage'
|
||||||
import { Reactive, reactive } from "vue"
|
import { Reactive, reactive } from 'vue'
|
||||||
|
|
||||||
let views: Reactive<VirtualPage[]>
|
let views: Reactive<VirtualPages>
|
||||||
|
|
||||||
export default function useViretualPages(){
|
export default function useVirtualPages() {
|
||||||
if(views === undefined) {
|
if (views === undefined) {
|
||||||
views = reactive<VirtualPage[]>([])
|
// views = reactive<VirtualPage[]>([])
|
||||||
|
views = reactive(new VirtualPages())
|
||||||
}
|
}
|
||||||
return views
|
return views
|
||||||
}
|
}
|
||||||
@@ -1,4 +1,5 @@
|
|||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
|
import 'drag-drop-touch'
|
||||||
|
|
||||||
createApp(App).mount('#app')
|
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