18 Commits
Author SHA1 Message Date
539943419 d16f11c263 feat: codemirror插件的请求禁止使用缓存 2024-09-02 23:13:27 +08:00
539943419 0f6e817966 feat: 1.优化images样式表现。2.增加markdown浏览插件 2024-09-02 21:04:07 +08:00
539943419 6b8f7aa6b4 feat: 1.给插件新增一些属性。2.重构图片浏览组件,根据时间分组浏览 2024-09-02 17:59:49 +08:00
539943419 78dac7482c update readme 2024-09-02 00:56:05 +08:00
539943419 9aec221ea3 feat: 重构部分组件,使miaoDirectoryItem更加通用 2024-09-01 14:45:29 +08:00
539943419 938dde4c1c feat: 屏蔽miaoDirectory底部工具栏,更新readme计划书 2024-09-01 04:18:41 +08:00
539943419 8e884eb178 feat: 优化代码表现 2024-09-01 03:39:50 +08:00
539943419 8c65e66ab6 style: 微调样式 2024-08-31 17:30:21 +08:00
539943419 a34e27cc65 feat: 添加miaoMessageProvider 2024-08-31 17:19:19 +08:00
539943419 de2e53cbcf fix: 1.修复了图片插件可用性判断的问题。2.修复了code插件样式错误的问题 2024-08-31 14:18:39 +08:00
539943419 b3c6dad1b1 fix: 修复了miaoDirectory在特殊情况下显示异常的问题。 2024-08-31 00:12:56 +08:00
539943419 fcb2fe8f7f fix: 1.修复了切换文件夹后无法自动滚动到顶部的问题。2.修复了图标路径错误的问题。 2024-08-30 23:56:20 +08:00
539943419 c02f6743e3 feat: 1.拆分miaoDirectory,右上角退出按钮改为小菜单,增加搜索,屏蔽文件夹等功能。2.更新readme 2024-08-30 23:29:28 +08:00
539943419 3e24d4a363 fix: 修正miaoDirectoryItem部分图片文件图标显示错误问题 2024-08-30 21:25:40 +08:00
539943419 7574acdad2 feat: 1.优化了miaoDirectory中多选的性能表现。2.图片浏览组件新增拖入虚拟文件/文件夹相关处理 2024-08-30 20:58:18 +08:00
539943419 704c80e019 feat: 1.通过懒加载大大优化miaoDirectory的使用体验。2.现在切换文件夹时会自动清空多选文件列表。 2024-08-30 16:41:04 +08:00
539943419 210e251b23 feat: 添加一个没啥功能的图片浏览插件 2024-08-30 05:15:32 +08:00
539943419 93ca2a29a6 fix: 修正大量拼写错误 2024-08-30 03:12:18 +08:00
26 changed files with 1816 additions and 561 deletions

No files matched your search

+27 -11
View File
@@ -1,11 +1,27 @@
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更新时更新文件信息 | plugin增加些属性,icon, disable, group之类的 | ❌ |
todo: miaoDirectory的复制文件/文件夹功能 | 完善miaoDirectory的搜索功能 | ❌ |
| 实现miaoDirectory的排序功能 | ❌ |
| 完善图片浏览插件 | ❌ |
| VirtualDirectory更新时更新文件信息 | ❌ |
| 创建音乐播放器组件(仿QQ音乐移动端吧) | ❌ |
| miaoDirectory的复制文件/文件夹功能 | ❌ |
| 长期计划 |
|---|
| 重构virtualDirectory,使其不用直接拥有父文件夹 |
| 重构virtualDirectory,使其不用直接拥有父文件夹 |
## 碎碎念:
为什么不直接做成类似于windows的风格呢?其实技术实现上问题应该不大,重构也不用重构太多东西(APP.vue改改,插件部分改改这样),但是开学了事情一大堆,实习又没法比较美好地推掉。平时每天到宿舍都精疲力竭还要准备秋招和学校的破事。更何况搞不好还会被两个学分卡得没法毕业,好烦好烦。
不过可能我对插件的价值也是有所高估吧。
+1 -1
View File
@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./public/favicon.ico" /> <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>MiaoDirectory</title> <title>MiaoDirectory</title>
</head> </head>
+3 -1
View File
@@ -7,7 +7,7 @@
"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",
"build:auto": "pnpm run build && rm -rf ./serve/web/* && cp -r ./dist/* ./serve/web/ && cd ./serve && go build && mv ./miao-directory.exe ../", "build:auto": "pnpm run build && rm -rf ./serve/web/* && cp -r ./dist/* ./serve/web/ && cd ./serve && go env -w GOOS=windows && go build -o ../miao-directory.exe",
"build:auto:release": "pnpm run build && rm -rf ./serve/web/* && cp -r ./dist/* ./serve/web/ && cd ./serve && go env -w GOOS=windows GOARCH=amd64 && go build -o ../miao-directory-amd64-win.exe && go env -w GOOS=linux GOARCH=amd64 && go build -o ../miao-directory-amd64-linux", "build:auto:release": "pnpm run build && rm -rf ./serve/web/* && cp -r ./dist/* ./serve/web/ && cd ./serve && 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" "preview": "vite preview"
}, },
@@ -27,6 +27,7 @@
"axios": "^1.7.3", "axios": "^1.7.3",
"codemirror": "^6.0.1", "codemirror": "^6.0.1",
"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", "pdfjs-dist": "^4.5.136",
"sass": "^1.77.8", "sass": "^1.77.8",
@@ -37,6 +38,7 @@
}, },
"devDependencies": { "devDependencies": {
"@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", "@types/pdfjs-dist": "^2.10.378",
"@vitejs/plugin-vue": "^5.1.2", "@vitejs/plugin-vue": "^5.1.2",
+71
View File
@@ -53,6 +53,9 @@ importers:
lodash: lodash:
specifier: ^4.17.21 specifier: ^4.17.21
version: 4.17.21 version: 4.17.21
markdown-it:
specifier: ^14.1.0
version: 14.1.0
naive-ui: naive-ui:
specifier: ^2.39.0 specifier: ^2.39.0
version: 2.39.0(vue@3.4.37(typescript@5.5.4)) version: 2.39.0(vue@3.4.37(typescript@5.5.4))
@@ -78,6 +81,9 @@ importers:
'@types/lodash': '@types/lodash':
specifier: ^4.17.7 specifier: ^4.17.7
version: 4.17.7 version: 4.17.7
'@types/markdown-it':
specifier: ^14.1.2
version: 14.1.2
'@types/node': '@types/node':
specifier: ^22.1.0 specifier: ^22.1.0
version: 22.1.0 version: 22.1.0
@@ -480,12 +486,21 @@ packages:
'@types/katex@0.16.7': '@types/katex@0.16.7':
resolution: {integrity: sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==} resolution: {integrity: sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==}
'@types/linkify-it@5.0.0':
resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
'@types/lodash-es@4.17.12': '@types/lodash-es@4.17.12':
resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==} resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
'@types/lodash@4.17.7': '@types/lodash@4.17.7':
resolution: {integrity: sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==} resolution: {integrity: sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==}
'@types/markdown-it@14.1.2':
resolution: {integrity: sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==}
'@types/mdurl@2.0.0':
resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
'@types/node@22.1.0': '@types/node@22.1.0':
resolution: {integrity: sha512-AOmuRF0R2/5j1knA3c6G3HOk523Ga+l+ZXltX8SF1+5oqcXijjfTd8fY3XRZqSihEu9XhtQnKYLmkFaoxgsJHw==} resolution: {integrity: sha512-AOmuRF0R2/5j1knA3c6G3HOk523Ga+l+ZXltX8SF1+5oqcXijjfTd8fY3XRZqSihEu9XhtQnKYLmkFaoxgsJHw==}
@@ -575,6 +590,9 @@ packages:
engines: {node: '>=10'} engines: {node: '>=10'}
deprecated: This package is no longer supported. deprecated: This package is no longer supported.
argparse@2.0.1:
resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
async-validator@4.2.5: async-validator@4.2.5:
resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==} resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
@@ -700,6 +718,10 @@ packages:
emoji-regex@8.0.0: emoji-regex@8.0.0:
resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
entities@4.5.0:
resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
engines: {node: '>=0.12'}
entities@5.0.0: entities@5.0.0:
resolution: {integrity: sha512-BeJFvFRJddxobhvEdm5GqHzRV/X+ACeuw0/BuuxsCh1EUZcAIz8+kYmBp/LrQuloy6K1f3a0M7+IhmZ7QnkISA==} resolution: {integrity: sha512-BeJFvFRJddxobhvEdm5GqHzRV/X+ACeuw0/BuuxsCh1EUZcAIz8+kYmBp/LrQuloy6K1f3a0M7+IhmZ7QnkISA==}
engines: {node: '>=0.12'} engines: {node: '>=0.12'}
@@ -826,6 +848,9 @@ packages:
resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==} resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
engines: {node: '>=0.12.0'} engines: {node: '>=0.12.0'}
linkify-it@5.0.0:
resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
lodash-es@4.17.21: lodash-es@4.17.21:
resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==} resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
@@ -839,6 +864,13 @@ packages:
resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==} resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
engines: {node: '>=8'} engines: {node: '>=8'}
markdown-it@14.1.0:
resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
hasBin: true
mdurl@2.0.0:
resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
micromatch@4.0.7: micromatch@4.0.7:
resolution: {integrity: sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==} resolution: {integrity: sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==}
engines: {node: '>=8.6'} engines: {node: '>=8.6'}
@@ -959,6 +991,10 @@ packages:
proxy-from-env@1.1.0: proxy-from-env@1.1.0:
resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==} resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
punycode.js@2.3.1:
resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
engines: {node: '>=6'}
readable-stream@3.6.2: readable-stream@3.6.2:
resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==} resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
engines: {node: '>= 6'} engines: {node: '>= 6'}
@@ -1056,6 +1092,9 @@ packages:
engines: {node: '>=14.17'} engines: {node: '>=14.17'}
hasBin: true hasBin: true
uc.micro@2.1.0:
resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
undici-types@6.13.0: undici-types@6.13.0:
resolution: {integrity: sha512-xtFJHudx8S2DSoujjMd1WeWvn7KKWFRESZTMeL1RptAYERu29D6jphMjjY+vn96jvN3kVPDNxU/E13VTaXj6jg==} resolution: {integrity: sha512-xtFJHudx8S2DSoujjMd1WeWvn7KKWFRESZTMeL1RptAYERu29D6jphMjjY+vn96jvN3kVPDNxU/E13VTaXj6jg==}
@@ -1566,12 +1605,21 @@ snapshots:
'@types/katex@0.16.7': {} '@types/katex@0.16.7': {}
'@types/linkify-it@5.0.0': {}
'@types/lodash-es@4.17.12': '@types/lodash-es@4.17.12':
dependencies: dependencies:
'@types/lodash': 4.17.7 '@types/lodash': 4.17.7
'@types/lodash@4.17.7': {} '@types/lodash@4.17.7': {}
'@types/markdown-it@14.1.2':
dependencies:
'@types/linkify-it': 5.0.0
'@types/mdurl': 2.0.0
'@types/mdurl@2.0.0': {}
'@types/node@22.1.0': '@types/node@22.1.0':
dependencies: dependencies:
undici-types: 6.13.0 undici-types: 6.13.0
@@ -1701,6 +1749,8 @@ snapshots:
readable-stream: 3.6.2 readable-stream: 3.6.2
optional: true optional: true
argparse@2.0.1: {}
async-validator@4.2.5: {} async-validator@4.2.5: {}
asynckit@0.4.0: {} asynckit@0.4.0: {}
@@ -1840,6 +1890,8 @@ snapshots:
emoji-regex@8.0.0: emoji-regex@8.0.0:
optional: true optional: true
entities@4.5.0: {}
entities@5.0.0: {} entities@5.0.0: {}
es5-ext@0.10.64: es5-ext@0.10.64:
@@ -1999,6 +2051,10 @@ snapshots:
is-number@7.0.0: {} is-number@7.0.0: {}
linkify-it@5.0.0:
dependencies:
uc.micro: 2.1.0
lodash-es@4.17.21: {} lodash-es@4.17.21: {}
lodash@4.17.21: {} lodash@4.17.21: {}
@@ -2012,6 +2068,17 @@ snapshots:
semver: 6.3.1 semver: 6.3.1
optional: true optional: true
markdown-it@14.1.0:
dependencies:
argparse: 2.0.1
entities: 4.5.0
linkify-it: 5.0.0
mdurl: 2.0.0
punycode.js: 2.3.1
uc.micro: 2.1.0
mdurl@2.0.0: {}
micromatch@4.0.7: micromatch@4.0.7:
dependencies: dependencies:
braces: 3.0.3 braces: 3.0.3
@@ -2143,6 +2210,8 @@ snapshots:
proxy-from-env@1.1.0: {} proxy-from-env@1.1.0: {}
punycode.js@2.3.1: {}
readable-stream@3.6.2: readable-stream@3.6.2:
dependencies: dependencies:
inherits: 2.0.4 inherits: 2.0.4
@@ -2261,6 +2330,8 @@ snapshots:
typescript@5.5.4: {} typescript@5.5.4: {}
uc.micro@2.1.0: {}
undici-types@6.13.0: {} undici-types@6.13.0: {}
util-deprecate@1.0.2: util-deprecate@1.0.2:
+16 -12
View File
@@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { h, onMounted, reactive, ref, shallowRef } from 'vue' import { h, onMounted, reactive, ref, shallowRef } from 'vue'
import { NIcon, NScrollbar, NDropdown, NQrCode } from 'naive-ui' import { NIcon, NScrollbar, NDropdown } from 'naive-ui'
import { import {
EyeOffOutline, EyeOffOutline,
EyeOutline, EyeOutline,
@@ -42,11 +42,11 @@ const rootDirectory = reactive(
// component就是一个vue组件,类似于miaoDirectory // component就是一个vue组件,类似于miaoDirectory
const createView = ( const createView = (
component: any, component: any,
currentDirectorys?: VirtualDirectory[], currentDirectories?: VirtualDirectory[],
currentFiles?: VirtualFile[], currentFiles?: VirtualFile[],
index?: number index?: number
) => { ) => {
views.push(component, currentDirectorys, currentFiles, index) views.push(component, currentDirectories, currentFiles, index)
} }
const deleteView = (index: number) => { const deleteView = (index: number) => {
@@ -59,7 +59,8 @@ const deleteView = (index: number) => {
// 点击标题是隐藏其他标签或显示其他标签,还挺好用的 // 点击标题是隐藏其他标签或显示其他标签,还挺好用的
const handleClickTitle = (index: number) => { const handleClickTitle = (index: number) => {
let count = views._views.filter((v) => v.visible).length let count = views._views.filter((v) => v.visible).length
let op = !views._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._views.length) { while (_index < views._views.length) {
if (_index !== index) { if (_index !== index) {
@@ -88,11 +89,11 @@ const openMenuOption = [
} }
] ]
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,
@@ -117,7 +118,7 @@ onMounted(() => {
<div <div
class="tab" class="tab"
v-for="(view, index) of views._views" v-for="(view, index) of views._views"
:key="view.uid"> :key="view.id">
<span <span
class="tab-title" class="tab-title"
:title="view.title" :title="view.title"
@@ -147,7 +148,7 @@ onMounted(() => {
@click=" @click="
createView( createView(
view.component, view.component,
view.currentDirectorys, view.currentDirectories,
view.currentFiles, view.currentFiles,
index + 1 index + 1
) )
@@ -183,13 +184,15 @@ onMounted(() => {
class="view-container-item" class="view-container-item"
v-for="(view, index) of views._views" v-for="(view, index) of views._views"
v-show="view.visible" v-show="view.visible"
:key="view.uid"> :key="view.id">
<component <component
:is="view.component" :is="view.component"
v-model:current-directorys="view.currentDirectorys" v-model:current-directories="view.currentDirectories"
v-model:current-files="view.currentFiles" v-model:current-files="view.currentFiles"
:id="view.uid" :id="view.id"
:color="view.color" :color="view.color"
:view="view"
:views="views"
@exit="deleteView(index)"></component> @exit="deleteView(index)"></component>
</div> </div>
</transition-group> </transition-group>
@@ -246,6 +249,7 @@ $tag-width: 170px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
span { span {
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
@@ -333,7 +337,7 @@ $tag-width: 170px;
.view-container-item { .view-container-item {
flex: 1; flex: 1;
height: 100%; height: 100%;
min-width: 200px; min-width: 180px;
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
+62 -20
View File
@@ -1,13 +1,29 @@
import useVirtualPages from '@/hooks/useVirtualPages' import useVirtualPages from '@/hooks/useVirtualPages'
import VirtualDirectory, { VirtualFile } from './VirtualDirectory' import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
import { ShallowRef, shallowRef } from 'vue'
type plugin = { export enum PluginGroup {
default = 'default',
mainMenu = 'mainMenu'
}
type Plugin = {
// 用于显示的名字 // 用于显示的名字
name: string name: string
// 判断是否可以使用这个组件 // 代表插件的icon
icon?: ShallowRef<any>
// 是否禁用插件
disable: boolean
// 插件所属的group,用于区分插件使用的场合
group: PluginGroup[]
// 判断在未禁用时是否可以使用这个组件
// 使用组件即调用下面的func // 使用组件即调用下面的func
filter: (VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) => boolean filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
func: (VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) => void func: (
VDirectories: VirtualDirectory[],
VFiles: VirtualFile[],
...args: any[]
) => void
} }
export default class PluginCenter { export default class PluginCenter {
@@ -15,47 +31,72 @@ export default class PluginCenter {
this.pluginsMap = {} this.pluginsMap = {}
} }
pluginsMap: { pluginsMap: {
[key: string]: plugin [key: string]: Plugin
} }
register(key: string, plugin: plugin) { register(key: string, plugin: Plugin) {
this.pluginsMap[key] = plugin this.pluginsMap[key] = plugin
} }
/** /**
* 便捷地注册一个组件为插件,触发时直接用新页面打开 * 便捷地注册一个组件为插件,触发时直接用新页面打开
*/ */
registerComponent( registerComponent(option: {
key: string, key: string
name: string, name: string
getComponent: () => Promise<any>, icon?: any
getComponent: () => Promise<any>
group?: PluginGroup[]
filter: ( filter: (
VDirectorys: VirtualDirectory[], VDirectories: VirtualDirectory[],
VFiles: VirtualFile[] VFiles: VirtualFile[]
) => boolean ) => boolean
): void { }): void {
const {
key,
name,
getComponent,
icon,
filter,
group = [PluginGroup.default]
} = option
let _component: any let _component: any
const views = useVirtualPages() const views = useVirtualPages()
this.register(key, { this.register(key, {
name, name,
filter, filter,
icon: shallowRef(icon),
group,
disable: false,
func: async ( func: async (
VDirectorys: VirtualDirectory[], VDirectories: VirtualDirectory[],
VFiles: VirtualFile[] VFiles: VirtualFile[]
) => { ) => {
if (filter(VDirectorys, VFiles) === false) { if (filter(VDirectories, VFiles) === false) {
return return
} }
if (_component === undefined) _component = await getComponent() if (_component === undefined) _component = await getComponent()
views.push(_component, VDirectorys, VFiles) views.push(_component, VDirectories, VFiles)
} }
}) })
} }
getUsablePlugin(VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) { getUsablePlugin(
VDirectories: VirtualDirectory[],
VFiles: VirtualFile[],
option?: {
group?: PluginGroup[]
}
) {
const { group = [PluginGroup.default] } = option ?? {}
const usableList = [] const usableList = []
for (let key of Object.keys(this.pluginsMap)) { for (let key of Object.keys(this.pluginsMap)) {
if (this.pluginsMap[key].filter(VDirectorys, VFiles)) { const _plugin = this.pluginsMap[key]
if (
!_plugin.disable &&
_plugin.group.filter((v) => group.includes(v)).length > 0 &&
_plugin.filter(VDirectories, VFiles)
) {
usableList.push(key) usableList.push(key)
} }
} }
@@ -67,9 +108,10 @@ export default class PluginCenter {
usePlugin( usePlugin(
key: string, key: string,
VDirectorys: VirtualDirectory[], VDirectories?: VirtualDirectory[],
VFiles: VirtualFile[] VFiles?: VirtualFile[],
...args: any[]
) { ) {
this.pluginsMap[key].func(VDirectorys, VFiles) this.pluginsMap[key].func(VDirectories ?? [], VFiles ?? [], ...args)
} }
} }
+10 -10
View File
@@ -13,14 +13,14 @@ export class VirtualFile {
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();
} }
name: string; name: string;
type: "file"; type: "file";
size: number; size: number;
stats: stats; stats: stats;
parent: VirtualDirectory; parent: VirtualDirectory;
uid: number; id: number;
get path() { get path() {
return `${this.parent.path}${this.name}`; return `${this.parent.path}${this.name}`;
} }
@@ -36,14 +36,14 @@ class VirtualDirectory {
this.type = "directory"; this.type = "directory";
this.stats = info.stats; this.stats = info.stats;
this.parent = parent ?? undefined; this.parent = parent ?? undefined;
this.uid = generateId(); this.id = generateId();
} }
// 文件夹名 // 文件夹名
name: string; name: string;
// 子文件 // 子文件
files?: VirtualFile[]; files?: VirtualFile[];
// 子目录 // 子目录
directorys?: VirtualDirectory[]; directories?: VirtualDirectory[];
// 没啥意义,标注一下就是了 // 没啥意义,标注一下就是了
type: "directory"; type: "directory";
// 文件夹创建时间等杂项属性 // 文件夹创建时间等杂项属性
@@ -51,7 +51,7 @@ class VirtualDirectory {
// 父文件夹 // 父文件夹
parent?: VirtualDirectory; parent?: VirtualDirectory;
uid: number; id: number;
/** /**
* 获取相对于根目录的路径的层数 * 获取相对于根目录的路径的层数
@@ -98,9 +98,9 @@ class VirtualDirectory {
updateContent(content: (file | directory)[]) { updateContent(content: (file | directory)[]) {
this.files = this.files ?? []; this.files = this.files ?? [];
this.directorys = this.directorys ?? []; this.directories = this.directories ?? [];
const fileNames: string[] = this.files.map(v => v.name); const fileNames: string[] = this.files.map(v => v.name);
const dirNames: string[] = this.directorys.map(v => v.name); const dirNames: string[] = this.directories.map(v => v.name);
const itemNames: string[] = content.map(v => v.name); const itemNames: string[] = content.map(v => v.name);
// 删去远程端已不存在的文件与文件夹 // 删去远程端已不存在的文件与文件夹
const _delete = (target: (VirtualFile | VirtualDirectory)[]) => { const _delete = (target: (VirtualFile | VirtualDirectory)[]) => {
@@ -114,7 +114,7 @@ class VirtualDirectory {
} }
}; };
_delete(this.files); _delete(this.files);
_delete(this.directorys); _delete(this.directories);
// 加入新的文件与文件夹 // 加入新的文件与文件夹
for (let item of content) { for (let item of content) {
if (item.type === "file") { if (item.type === "file") {
@@ -123,7 +123,7 @@ class VirtualDirectory {
} }
} else if (item.type === "directory") { } else if (item.type === "directory") {
if (!dirNames.includes(item.name)) { if (!dirNames.includes(item.name)) {
this.directorys.push(new VirtualDirectory(item, this)); this.directories.push(new VirtualDirectory(item, this));
} }
} }
} }
@@ -131,7 +131,7 @@ class VirtualDirectory {
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;
} }
+10 -10
View File
@@ -13,12 +13,12 @@ const getRandomWebSafeColor = (() => {
})(); })();
export default class VirtualPage { export default class VirtualPage {
constructor(component: any, initObjects?: { directorys?: VirtualDirectory[]; files?: VirtualFile[] }) { constructor(component: any, initObjects?: { directories?: VirtualDirectory[]; files?: VirtualFile[] }) {
this.component = shallowRef(component); this.component = shallowRef(component);
this.currentDirectorys = initObjects?.directorys ?? []; this.currentDirectories = initObjects?.directories ?? [];
this.currentFiles = initObjects?.files ?? []; this.currentFiles = initObjects?.files ?? [];
this.visible = true; this.visible = true;
this.uid = generateId(); this.id = generateId();
this.refreshKey = Math.random(); this.refreshKey = Math.random();
this.color = getRandomWebSafeColor(); this.color = getRandomWebSafeColor();
} }
@@ -27,11 +27,11 @@ export default class VirtualPage {
// 是否可见 // 是否可见
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上
@@ -43,7 +43,7 @@ export default class VirtualPage {
if (this._title) { if (this._title) {
return this._title; return this._title;
} }
return this?.currentDirectorys[0]?.name ?? this?.currentFiles[0]?.name ?? "未命名标签"; return this?.currentDirectories[0]?.name ?? this?.currentFiles[0]?.name ?? "未命名标签";
} }
setTitle(title: string) { setTitle(title: string) {
@@ -79,7 +79,7 @@ export class VirtualPages {
*/ */
getIndex(id: number) { getIndex(id: number) {
for (let i in this._views) { for (let i in this._views) {
if (this._views[i].uid === id) { if (this._views[i].id === id) {
return parseInt(i); return parseInt(i);
} }
} }
@@ -91,7 +91,7 @@ export class VirtualPages {
*/ */
getView(id: number) { getView(id: number) {
for (let v of this._views) { for (let v of this._views) {
if (v.uid === id) { if (v.id === id) {
return v; return v;
} }
} }
@@ -101,14 +101,14 @@ export class VirtualPages {
/** /**
* 推入一个新的页面 * 推入一个新的页面
*/ */
push(component: any, currentDirectorys?: VirtualDirectory[], currentFiles?: VirtualFile[], index?: number) { push(component: any, currentDirectories?: VirtualDirectory[], currentFiles?: VirtualFile[], index?: number) {
index ?? (index = this.length); index ?? (index = this.length);
this._views.splice( this._views.splice(
index, index,
0, 0,
reactive<VirtualPage>( reactive<VirtualPage>(
new VirtualPage(component, { new VirtualPage(component, {
directorys: [...(currentDirectorys ?? [])], directories: [...(currentDirectories ?? [])],
files: [...(currentFiles ?? [])] files: [...(currentFiles ?? [])]
}) })
) )
@@ -0,0 +1,77 @@
<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>
@@ -1,31 +1,24 @@
<template> <template>
<div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart"> <div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
<miaoContextMenu :options="dropDownOptions" :touch-time-out="500" @select="handleDropdownSelect"> <miaoContextMenu :options="dropDownOptions ?? []" :touch-time-out="500" @select="handleDropdownSelect">
<div class="item-main" :class="selected ? 'item-main-selected' : ''" ref="mainRef"> <div class="item-main" :class="selected ? 'item-main-selected' : ''" ref="mainRef">
<div class="item-main-front" :style="{ backgroundColor: props.color }"></div> <div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
<Icon class="item-main-icon" v-show="clientWidth > 250"></Icon> <Icon class="item-main-icon" v-show="clientWidth > 250"></Icon>
<div class="item-main-info"> <div class="item-main-info">
<div class="item-main-info-name"> <div class="item-main-info-name">
<Icon class="item-main-info-name-icon" v-if="clientWidth <= 250"></Icon> <Icon class="item-main-info-name-icon" v-if="clientWidth <= 250"></Icon>
<n-ellipsis style="max-width: 80%;">{{ name }}</n-ellipsis> <n-ellipsis :style="{ maxWidth: clientWidth > 250 ? '80%' : '75%' }">{{ name }}</n-ellipsis>
</div> </div>
<div class="item-main-info-date" v-if="time"> <div class="item-main-info-date" v-if="time">
{{ time }} {{ time }}
</div> </div>
</div> </div>
<!-- 菜单现在通过右键/长按呼出 -->
<!-- <n-dropdown trigger="click" :options="dropDownOptions" @select="handleDropdownSelect">
<div class="item-main-option" @click="(e) => e.stopPropagation()">
<EllipsisVertical class="item-main-option-icon" />
</div>
</n-dropdown> -->
</div> </div>
</miaoContextMenu> </miaoContextMenu>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import miaoContextMenu from '../miaoContextMenu.vue' import miaoContextMenu from '../miaoContextMenu.vue'
import { import {
DocumentText, DocumentText,
@@ -39,33 +32,37 @@ import {
PlayCircle, PlayCircle,
Disc Disc
} from '@vicons/ionicons5' } from '@vicons/ionicons5'
import { computed, onMounted, ref } from 'vue' import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import dateFormatter from '@/hooks/dateFormatter' import dateFormatter from '@/hooks/dateFormatter'
import { NEllipsis } from 'naive-ui' import { NEllipsis } from 'naive-ui'
import usePluginCenter from '@/hooks/usePluginCenter' import { DropdownOption } from 'naive-ui/es/dropdown';
// import useMiaoFetchApi from '@/hooks/useMiaoFetchApi' // import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
// const miaoFetchApi = useMiaoFetchApi() // const miaoFetchApi = useMiaoFetchApi()
const props = defineProps<{ const props = defineProps<{
item: VirtualDirectory | VirtualFile item: {
name: string,
type: 'directory' | 'file'
stats: {
mtimeMs: number
}
}
name?: string name?: string
color: string color: string
selectedItem: (VirtualDirectory | VirtualFile)[] dropDownOptions?: DropdownOption[]
selected?: boolean
}>() }>()
const emit = defineEmits<{ const emit = defineEmits<{
download: [] download: []
delete: [] delete: []
rename: [] rename: []
dragStart: [event: DragEvent, item: VirtualDirectory | VirtualFile] dragStart: [event: DragEvent]
onSelected: [] onSelected: []
plugin: [plugin: string]
}>() }>()
const pluginCenter = usePluginCenter()
const itemType = ref<'file' | 'directory'>(props.item.type)
const mainRef = ref<HTMLDivElement>() const mainRef = ref<HTMLDivElement>()
// 使用ResizeObserver实现 // 使用ResizeObserver实现
@@ -73,9 +70,11 @@ const clientWidth = ref<number>(666)
const name = props.name ?? props.item.name const name = props.name ?? props.item.name
const selected = computed(() => { const observer = new ResizeObserver(entries => {
return props.selectedItem.includes(props.item) for (let entry of entries) {
}) clientWidth.value = entry.contentRect.width;
}
});
const time = computed(() => { const time = computed(() => {
return dateFormatter( return dateFormatter(
@@ -84,60 +83,8 @@ const time = computed(() => {
) )
}) })
const dropDownOptions = computed(() => {
const items = [...props.selectedItem]
if (!selected.value) {
items.push(props.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 (itemType.value === 'file') {
options.push(
...[
{
label: '下载',
key: 'download'
}
]
)
}
if (selected.value === 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}`
})))
return options
})
// 是不是可以直接在这里面实现? // 是不是可以直接在这里面实现?
// 应该将所有事件emit出去才对
const handleDropdownSelect = (key: string) => { const handleDropdownSelect = (key: string) => {
if (key === 'rename') { if (key === 'rename') {
emit('rename') emit('rename')
@@ -148,14 +95,8 @@ const handleDropdownSelect = (key: string) => {
} else if (key === 'select') { } else if (key === 'select') {
emit('onSelected') emit('onSelected')
} else if (key.startsWith('plugin:')) { } else if (key.startsWith('plugin:')) {
const items = [...props.selectedItem]
if (!selected.value) {
items.push(props.item)
}
const vDirs = items.filter(v => v.type === 'directory')
const vFiles = items.filter(v => v.type === 'file')
const plugin = key.split(':')[1] const plugin = key.split(':')[1]
pluginCenter.usePlugin(plugin, vDirs, vFiles) emit('plugin', plugin)
} }
} }
@@ -177,22 +118,22 @@ const Icon = computed(() => {
return Disc return Disc
} else if ( } else if (
[ [
'.xbm', 'xbm',
'.tif', 'tif',
'pjp', 'pjp',
'.svgz', 'svgz',
'jpg', 'jpg',
'jpeg', 'jpeg',
'ico', 'ico',
'tiff', 'tiff',
'.gif', 'gif',
'svg', 'svg',
'.jfif', 'jfif',
'.webp', 'webp',
'.png', 'png',
'.bmp', 'bmp',
'pjpeg', 'pjpeg',
'.avif' 'avif'
].includes(aft) ].includes(aft)
) { ) {
return Image return Image
@@ -217,27 +158,28 @@ const Icon = computed(() => {
const itemRef = ref() const itemRef = ref()
const handleDragStart = (event: DragEvent) => { const handleDragStart = (event: DragEvent) => {
emit('dragStart', event, props.item) emit('dragStart', event)
// dataBus.set('dragData', [props.item]) // dataBus.set('dragData', [props.item])
} }
onMounted(() => { onMounted(() => {
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
clientWidth.value = entry.contentRect.width;
}
});
if (mainRef.value) { if (mainRef.value) {
observer.observe(mainRef.value); observer.observe(mainRef.value);
} }
}) })
onBeforeUnmount(() => {
if (mainRef.value) {
observer.unobserve(mainRef.value);
}
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.miao-item { .miao-item {
cursor: pointer; cursor: pointer;
width: calc(100% - 20px); width: calc(100% - 20px);
min-width: 170px; // min-width: 170px;
// aspect-ratio: 66/9; // aspect-ratio: 66/9;
height: 50px; height: 50px;
position: relative; position: relative;
@@ -249,7 +191,6 @@ onMounted(() => {
.item-main { .item-main {
position: relative; position: relative;
width: 100%; width: 100%;
min-width: 200px;
height: 95%; height: 95%;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
border-radius: 7px; border-radius: 7px;
@@ -0,0 +1,181 @@
<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">
<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 '@/components/miaoDirectory/miaoDirectoryItem.vue'
import miaoLazyDiv from '@/components/miaoLazyDiv.vue'
import { computed, ref } from 'vue'
import usePluginCenter from '@/hooks/usePluginCenter'
import { renderIcon } from '@/hooks/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,152 @@
<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">
<div class="container-top-breadcrumb-container">
<n-breadcrumb separator=">" style="margin-left: 5px">
<n-breadcrumb-item :clickable="false">
<n-icon size="18">
<CloudOutline />
</n-icon>
</n-breadcrumb-item>
<n-breadcrumb-item v-for="dir in currentDirectory?.getParents"
@click="handleClickBreadcrumbItem(dir)" :clickable="true">
<div>{{ dir.name }}</div>
</n-breadcrumb-item>
</n-breadcrumb>
</div>
</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 } from 'naive-ui'
import {
CloudOutline,
ChevronBackOutline,
ReloadOutline,
EllipsisVertical,
} from '@vicons/ionicons5'
import VirtualDirectory from '@/class/VirtualDirectory'
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 handleClickBreadcrumbItem = (virtualDirectory: VirtualDirectory) => {
emit('set-current-directory', virtualDirectory)
}
</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: 100%;
right: 0;
top: 0;
min-width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
}
}
.container-top-tools {
position: relative;
height: 100%;
// width: 70px;
padding: 0 5px;
display: flex;
justify-content: space-around;
align-items: center;
.container-top-tools-item {
width: 20px;
height: 20px;
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>
+5 -6
View File
@@ -1,9 +1,5 @@
<template> <template>
<div <div class="container" @dragover="handleDragOver" @dragleave="handleDragLeave" @drop="handleDrop">
class="container"
@dragover="handleDragOver"
@dragleave="handleDragLeave"
@drop="handleDrop">
<slot></slot> <slot></slot>
<miao-mask v-model:show="showMask"></miao-mask> <miao-mask v-model:show="showMask"></miao-mask>
</div> </div>
@@ -63,8 +59,11 @@ const removeDirectory = async (files: File[]) => {
} }
const handleDragOver = async (event: DragEvent) => { const handleDragOver = async (event: DragEvent) => {
showMask.value += 1
event.preventDefault() event.preventDefault()
if (showMask.value === 1) {
return
}
showMask.value = 1
} }
const handleDragLeave = async () => { const handleDragLeave = async () => {
+95
View File
@@ -0,0 +1,95 @@
<!-- 只适合用于渲染过程较为复杂的组件,不然可能得不偿失
这么泛用的组件,性能差点也能理解 -->
<template>
<div class="miao-lazy" ref="miaoLazyRoot" :style="!show ? { minHeight, minWidth } : {}">
<slot v-if="show" />
</div>
</template>
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue';
const props = defineProps({
disableLazy: {
type: Boolean,
default: false,
},
// 仅在内容未加载时生效,用于占位
minHeight: {
type: String,
default: 'none',
},
minWidth: {
type: String,
default: 'none',
}
})
const miaoLazyRoot = ref<HTMLDivElement>()
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()
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)
// })
}
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>
+147
View File
@@ -0,0 +1,147 @@
<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 '@/hooks/generateId';
import { NIcon } from 'naive-ui';
import { computed, onMounted, ref, shallowReactive } from 'vue';
import { InformationCircle, CheckmarkCircle, CloseCircle } from '@vicons/ionicons5'
interface MessageOptions {
type?: 'info' | 'success' | 'error'
timeout?: number
id?: number
}
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).filter(v => messageMap[v] !== undefined).map(v => ({
id: v,
...messageMap[v],
}))
})
const message = (content: string, options?: MessageOptions) => {
let timer: any
const { timeout = 0, type = 'info', id = generateId() } = options ?? {}
if (timeout > 0) {
messageMap[id]?.timer && clearTimeout(messageMap[id]?.timer)
timer = setTimeout(() => {
messageMap[id] = undefined
}, timeout)
}
messageMap[id] = {
icon: iconMap[type].icon,
iconColor: iconMap[type].color,
content,
timer
}
return (newContent: string, newOptions?: MessageOptions) => {
newOptions = newOptions ?? {}
newOptions.id = id
message(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({ message });
</script>
<style scoped lang="scss">
.miao-message-provider {
width: 100%;
height: 100%;
position: relative;
.miao-message-provider-container {
position: absolute;
width: 0;
height: 0;
left: 50%;
top: 30px;
display: flex;
flex-direction: column;
align-items: center;
overflow: visible;
.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, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(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>
+34 -15
View File
@@ -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">
+107 -31
View File
@@ -1,24 +1,35 @@
import MiaoDirectory from '@/views/miaoDirectory.vue' import MiaoDirectory from '@/views/miaoDirectory.vue'
import usePluginCenter from './usePluginCenter' import usePluginCenter from './usePluginCenter'
import {
DocumentText,
FileTray,
Image,
LogoChrome,
CodeOutline,
PlayCircle,
} from '@vicons/ionicons5'
export default function init() { export default function init() {
const pluginCenter = usePluginCenter() const pluginCenter = usePluginCenter()
pluginCenter.registerComponent( pluginCenter.registerComponent({
'miaoDirectory', key: 'miaoDirectory',
'文件夹', name: '文件夹',
async () => MiaoDirectory, icon: FileTray,
(vDirs, vFiles) => { getComponent: async () => MiaoDirectory,
filter: (vDirs, vFiles) => {
if (vFiles.length) { if (vFiles.length) {
return false return false
} }
return vDirs.length === 1 return vDirs.length === 1
} }
) })
pluginCenter.registerComponent( pluginCenter.registerComponent({
'miaoVideoPlayer', key: 'miaoVideoPlayer',
'视频', name: '视频',
async () => (await import('@/views/miaoVideoPlayer.vue')).default, icon: PlayCircle,
(vDirs, vFiles) => { getComponent: async () =>
(await import('@/views/miaoVideoPlayer.vue')).default,
filter: (vDirs, vFiles) => {
if (vDirs.length !== 0) { if (vDirs.length !== 0) {
return false return false
} }
@@ -34,12 +45,15 @@ export default function init() {
} }
return false return false
} }
) })
pluginCenter.registerComponent(
'miaoIframe', pluginCenter.registerComponent({
'框架', key: 'miaoIframe',
async () => (await import('@/views/miaoIframe.vue')).default, name: '框架',
(vDirs, vFiles) => { icon: LogoChrome,
getComponent: async () =>
(await import('@/views/miaoIframe.vue')).default,
filter: (vDirs, vFiles) => {
if (vDirs.length !== 0) { if (vDirs.length !== 0) {
return false return false
} }
@@ -48,12 +62,14 @@ export default function init() {
} }
return vFiles[0].name.endsWith('html') return vFiles[0].name.endsWith('html')
} }
) })
pluginCenter.registerComponent(
'miaoPDF', pluginCenter.registerComponent({
'PDF浏览', key: 'miaoPDF',
async () => (await import('@/views/miaoPDF.vue')).default, name: 'PDF浏览',
(vDirs, vFiles) => { icon: DocumentText,
getComponent: async () => (await import('@/views/miaoPDF.vue')).default,
filter: (vDirs, vFiles) => {
if (vDirs.length !== 0) { if (vDirs.length !== 0) {
return false return false
} }
@@ -62,12 +78,15 @@ export default function init() {
} }
return vFiles[0].name.endsWith('pdf') return vFiles[0].name.endsWith('pdf')
} }
) })
pluginCenter.registerComponent(
'miaoCodeMirror', pluginCenter.registerComponent({
'代码编辑', key: 'miaoCodeMirror',
async () => (await import('@/views/miaoCodeMirror.vue')).default, name: '代码编辑',
(vDirs, vFiles) => { icon: CodeOutline,
getComponent: async () =>
(await import('@/views/miaoCodeMirror.vue')).default,
filter: (vDirs, vFiles) => {
if (vDirs.length !== 0) { if (vDirs.length !== 0) {
return false return false
} }
@@ -89,7 +108,7 @@ export default function init() {
'yaml', 'yaml',
'txt', 'txt',
'xml', 'xml',
'vue', 'vue'
]) { ]) {
if (vFiles[0].name.endsWith(end)) { if (vFiles[0].name.endsWith(end)) {
return true return true
@@ -97,5 +116,62 @@ export default function init() {
} }
return false return false
} }
) })
pluginCenter.registerComponent({
key: 'miaoImages',
name: '图片浏览',
icon: Image,
getComponent: async () =>
(await import('@/views/miaoImages.vue')).default,
filter: (vDirs, vFiles) => {
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
}
})
pluginCenter.registerComponent({
key: 'miaoMarkdown',
name: 'markdown浏览',
icon: DocumentText,
getComponent: async () => (await import('@/views/miaoMarkdown.vue')).default,
filter: (vDirs, vFiles) => {
if (vDirs.length !== 0) {
return false
}
if (vFiles.length !== 1) {
return false
}
return vFiles[0].name.endsWith('md')
}
})
} }
+39 -27
View File
@@ -1,47 +1,59 @@
import { NIcon } from 'naive-ui'
import { h } from 'vue'
export const filePicker = (() => { export const filePicker = (() => {
let _resolve: ((files: File[]) => void) | undefined; let _resolve: ((files: File[]) => void) | undefined
return (option?: { accept?: "string"; multiple: boolean }) => { return (option?: { accept?: 'string'; multiple: boolean }) => {
if (_resolve) { if (_resolve) {
_resolve([]); _resolve([])
_resolve = undefined; _resolve = undefined
} }
return new Promise<File[]>(resolve => { return new Promise<File[]>((resolve) => {
const inpEle = document.createElement("input"); const inpEle = document.createElement('input')
inpEle.id = `__file_${Math.ceil(Math.random() * 100000000)}`; inpEle.id = `__file_${Math.ceil(Math.random() * 100000000)}`
inpEle.type = "file"; inpEle.type = 'file'
inpEle.style.display = "none"; inpEle.style.display = 'none'
_resolve = resolve; _resolve = resolve
// 文件类型限制 // 文件类型限制
// inpEle.accept="image/*" // inpEle.accept="image/*"
option?.accept && (inpEle.accept = option?.accept); option?.accept && (inpEle.accept = option?.accept)
// 多选限制 // 多选限制
option?.multiple && (inpEle.multiple = option?.multiple); option?.multiple && (inpEle.multiple = option?.multiple)
// inpEle.addEventListener("change", event => fn.call(inpEle, event, inpEle.files), { once: true }); // inpEle.addEventListener("change", event => fn.call(inpEle, event, inpEle.files), { once: true });
inpEle.addEventListener( inpEle.addEventListener(
"change", 'change',
() => { () => {
if (!inpEle.files) { if (!inpEle.files) {
return; return
} }
const files: File[] = []; const files: File[] = []
let i = 0; let i = 0
while (i < inpEle.files?.length) { while (i < inpEle.files?.length) {
const _file = inpEle?.files?.item(i); const _file = inpEle?.files?.item(i)
if (_file !== null) { if (_file !== null) {
files.push(_file); files.push(_file)
} }
i += 1; i += 1
} }
resolve(files); resolve(files)
_resolve = undefined _resolve = undefined
}, },
{ once: true } { once: true }
); )
inpEle.click(); inpEle.click()
}); })
}; }
})(); })()
export const renderIcon = (icon: any) => {
return () => {
return h(NIcon, null, {
default: () => h(icon)
})
}
}
export default { export default {
filePicker filePicker,
}; renderIcon
}
+1 -1
View File
@@ -3,7 +3,7 @@ import { Reactive, reactive } from "vue"
let views: Reactive<VirtualPages> 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()) views = reactive(new VirtualPages())
+32 -4
View File
@@ -1,16 +1,21 @@
<template> <template>
<miao-message-provider ref="miaoMessage">
<div class="codemirror-container" ref="rootRef" :class="`codemirror-container-${theme}`"> <div class="codemirror-container" ref="rootRef" :class="`codemirror-container-${theme}`">
<div class="codemirror-container-top"> <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="handleSave">保存</div>
<div class="codemirror-container-btn codemirror-container-btn-save" @click="handleReset">恢复到上次保存</div> <div class="codemirror-container-btn codemirror-container-btn-save" @click="handleReset">恢复到上次保存</div>
</div> </div>
<NScrollbar> <div class="codemirror-container-main">
<codemirror v-model="codeData" :extensions="extensions" :style="{ height: '100%' }" /> <NScrollbar style="max-height: calc( 100% );">
<codemirror v-model="codeData" :extensions="extensions" />
</NScrollbar> </NScrollbar>
</div> </div>
</div>
</miao-message-provider>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import miaoMessageProvider from '@/components/miaoMessageProvider.vue'
import { VirtualFile } from '@/class/VirtualDirectory' import { VirtualFile } from '@/class/VirtualDirectory'
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi' import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
@@ -23,6 +28,7 @@ const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
required: true required: true
}) })
const miaoMessage = ref<InstanceType<typeof miaoMessageProvider>>()
const vFile = ref<VirtualFile>() const vFile = ref<VirtualFile>()
const rootRef = ref<HTMLDivElement>() const rootRef = ref<HTMLDivElement>()
// const _key = ref(Math.random()) // const _key = ref(Math.random())
@@ -34,6 +40,10 @@ const theme = ref<'light' | 'dark'>('light')
const handleSave = async () => { const handleSave = async () => {
if (bakData.value === codeData.value || !vFile.value) { if (bakData.value === codeData.value || !vFile.value) {
miaoMessage.value?.message('内容未改动', {
timeout: 3000,
type: 'info'
})
return return
} }
const parentDir = vFile.value?.parent const parentDir = vFile.value?.parent
@@ -43,8 +53,14 @@ const handleSave = async () => {
) )
const file = new File([new Blob([codeData.value ?? ''])], vFile.value.name) const file = new File([new Blob([codeData.value ?? ''])], vFile.value.name)
bakData.value = codeData.value bakData.value = codeData.value
miaoFetchApi.upload(file, parentDir) const { response } = miaoFetchApi.upload(file, parentDir)
false && miaoFetchApi.upload(file_bak, parentDir) false && miaoFetchApi.upload(file_bak, parentDir)
await response
miaoMessage.value?.message('保存成功', {
timeout: 5000,
type: 'success'
})
} }
const handleReset = async () => { const handleReset = async () => {
@@ -120,7 +136,12 @@ onMounted(async () => {
const fileName = currentFiles.value[0].name const fileName = currentFiles.value[0].name
codeData.value = ( codeData.value = (
await miaoFetchApi.getFile(currentFiles.value[0], { await miaoFetchApi.getFile(currentFiles.value[0], {
axiosOption: { responseType: 'text' } axiosOption: {
responseType: 'text',
headers: {
'Cache-Control': 'no-cache'
}
}
}) })
).toString() ).toString()
bakData.value = codeData.value bakData.value = codeData.value
@@ -139,8 +160,10 @@ onMounted(async () => {
.codemirror-container { .codemirror-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: hidden;
.codemirror-container-top { .codemirror-container-top {
height: 25px;
display: flex; display: flex;
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
} }
@@ -160,6 +183,11 @@ onMounted(async () => {
background-color: #e8e8e8; background-color: #e8e8e8;
} }
} }
.codemirror-container-main {
height: calc(100% - 25px);
position: relative;
}
} }
.codemirror-container-dark { .codemirror-container-dark {
+262 -282
View File
@@ -1,89 +1,44 @@
<template> <template>
<miao-drop-handler @on-virtual-directory="handleDropVDirectory" @on-files="handleDropFiles" <miao-drop-handler
@on-virtual-directory="handleDropVDirectory"
@on-files="handleDropFiles"
@on-virtual-files="handleDropVirtualFiles"> @on-virtual-files="handleDropVirtualFiles">
<div class="miao-directory-item-container" ref="rootDomRef"> <div class="miao-directory-item-container" ref="rootDomRef">
<div class="container-top" :style="{ <!-- 顶部面包屑导航和工具栏 -->
backgroundColor: <miao-directory-top
index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)' :color="props.color"
}"> :current-directory="currentDirectory"
<div class="container-top-colorfulBar" :style="{ backgroundColor: props.color }"></div> @back="handleBack"
<div class="container-top-breadcrumb"> :open-menu-option="topBarMenuOption"
<!-- <n-scrollbar x-scrollable> --> @reload="handleReload"
<div class="container-top-breadcrumb-container"> @exit="emit('exit')"
<n-breadcrumb separator=">" style="margin-left: 5px"> :index="index"
<n-breadcrumb-item :clickable="false"> @set-current-directory="setCurrentDirectory"
<n-icon size="18"> @search="handleSearch"
<CloudOutline /> @menu-select="handleTopBarMenuSelect" />
</n-icon>
</n-breadcrumb-item> <!-- 文件和文件夹列表 -->
<n-breadcrumb-item v-for="dir in currentDirectory?.getParents" <miao-directory-items
@click="setCurrentDirectory(dir)" :clickable="true"> ref="miaoDirectoryItemRef"
<div>{{ dir.name }}</div> :color="props.color"
</n-breadcrumb-item> :showData_directory="showData_directory"
</n-breadcrumb> :showData_files="showData_files"
</div> :selected-item="selectedItem.value"
<!-- </n-scrollbar> --> :index="index"
</div> @item-click="handleItemClick"
<div class="container-top-tools"> @item-download="handleItemDownload"
<n-icon class="container-top-tools-item" size="15" @click="handleBack"> @item-delete="handleItemDelete"
<ChevronBackOutline /> @item-drag-start="handleItemDragStart"
</n-icon> @item-rename="handleItemRename"
<n-icon class="container-top-tools-item" size="14" @click="handleReload"> @item-select="handleItemSelect" />
<ReloadOutline class="container-top-tools-item-reload" />
</n-icon> <!-- 底部工具栏 -->
<n-icon class="container-top-tools-item" size="20" @click="emit('exit')"> <miao-directory-bottom
<CloseOutline /> :index="index"
</n-icon> @add-new-item="handleAddNewItem"
</div> v-if="false"
</div> @pick-files-upload="handlePickFilesUpload" />
<div class="container-items" :style="{
backgroundColor:
index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
}">
<n-scrollbar>
<transition-group name="dirItem">
<miaoDirectoryItem v-for="dir in showData_directory" :item="dir" :key="dir.uid"
:color="props.color" :selectedItem="selectedItem.value" @delete="handleItemDelete(dir)"
@click="handleItemClick(dir)" @drag-start="handleItemDragStart"
@rename="handleItemRename(dir)" @on-selected="handleItemSelect(dir)" />
</transition-group>
<transition-group name="dirItem">
<miaoDirectoryItem v-for="file in showData_files" :item="file" :key="file.uid"
:color="props.color" :selectedItem="selectedItem.value" @click="handleItemClick(file)"
@download="handleItemDownload(file)" @delete="handleItemDelete(file)"
@drag-start="handleItemDragStart" @rename="handleItemRename(file)"
@on-selected="handleItemSelect(file)" />
</transition-group>
<!-- <n-virtual-list :item="showData_all" :item-size="50">
</n-virtual-list> -->
</n-scrollbar>
</div>
<div class="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="handleAddNewItem" />
</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="handlePickFilesUpload" />
</div>
</div>
</div>
<miao-mask v-model:show="showModel"></miao-mask> <miao-mask v-model:show="showModel"></miao-mask>
<miao-popup-input ref="popupInput"></miao-popup-input> <miao-popup-input ref="popupInput"></miao-popup-input>
</div> </div>
@@ -91,34 +46,42 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { NBreadcrumbItem, NBreadcrumb, NIcon, NScrollbar } from 'naive-ui' import { computed, nextTick, onMounted, reactive, ref } from 'vue'
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory' import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import { computed, onMounted, reactive, ref } from 'vue'
import Config from '@/config' import Config from '@/config'
import miaoMask from '@/components/miaoMask.vue'
import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue'
import miaoPopupInput from '@/components/miaoPopupInput.vue'
import miaoDropHandler from '@/components/miaoDropHandler.vue'
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi' import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
import useDataBus from '@/hooks/useDataBus' import useDataBus from '@/hooks/useDataBus'
import {
CloudOutline,
ChevronBackOutline,
ReloadOutline,
CloseOutline,
CloudUploadOutline,
AddOutline
} from '@vicons/ionicons5'
import useUploadQueue from '@/hooks/useUploadQueue' import useUploadQueue from '@/hooks/useUploadQueue'
import useVirtualPages from '@/hooks/useVirtualPages' import useVirtualPages from '@/hooks/useVirtualPages'
import { filePicker } from '@/hooks/miaoTools' import { filePicker, renderIcon } from '@/hooks/miaoTools'
import { uniq } from 'lodash' import { uniq } from 'lodash'
// 导入子组件
import MiaoDirectoryTop from '@/components/miaoDirectory/miaoDirectoryTop.vue'
import MiaoDirectoryItems from '@/components/miaoDirectory/miaoDirectoryItemsContainer.vue'
import MiaoDirectoryBottom from '@/components/miaoDirectory/miaoDirectoryBottom.vue'
import MiaoMask from '@/components/miaoMask.vue'
import MiaoPopupInput from '@/components/miaoPopupInput.vue'
import MiaoDropHandler from '@/components/miaoDropHandler.vue'
import {
CloseOutline,
SearchOutline,
FilterOutline,
CheckmarkDoneOutline,
DocumentText,
ExtensionPuzzleOutline,
FileTray,
AddOutline,
CloudUploadOutline
} from '@vicons/ionicons5'
import usePluginCenter from '@/hooks/usePluginCenter'
const { baseUrl, api } = Config const { baseUrl, api } = Config
const dataBus = useDataBus() const dataBus = useDataBus()
const views = useVirtualPages() const views = useVirtualPages()
const uploadQueue = useUploadQueue()
const miaoFetchApi = useMiaoFetchApi() const miaoFetchApi = useMiaoFetchApi()
const pluginCenter = usePluginCenter()
const props = defineProps<{ const props = defineProps<{
color: string color: string
@@ -129,9 +92,13 @@ const emit = defineEmits<{
exit: [] exit: []
}>() }>()
const popupInput = ref() const popupInput = ref<InstanceType<typeof MiaoPopupInput>>()
// 是否显示模态框 // 是否显示模态框
const showModel = ref(0) const showModel = ref(0)
const searchText = ref<string>('')
const showDirs = ref<boolean>(true)
const showFiles = ref<boolean>(true)
const miaoDirectoryItemRef = ref()
class SelectedItem { class SelectedItem {
constructor() { constructor() {
@@ -142,32 +109,39 @@ class SelectedItem {
this._selectedItem = [item, ...this._selectedItem] this._selectedItem = [item, ...this._selectedItem]
} }
remove(item: VirtualDirectory | VirtualFile) { remove(item: VirtualDirectory | VirtualFile) {
this._selectedItem = this._selectedItem.filter(v => v !== item) this._selectedItem = this._selectedItem.filter((v) => v !== item)
} }
clear() { clear() {
this._selectedItem = [] this._selectedItem = []
} }
// 保证内容仍然存在于dir中且各个元素不重复 // 保证内容仍然存在于dir中且各个元素不重复
get value() { get value() {
return uniq(this._selectedItem).filter(v => { const _filterList = [
...(currentDirectory.value?.directories ?? []),
...(currentDirectory.value?.files ?? [])
]
return uniq(this._selectedItem).filter((v) => {
if (currentDirectory.value === undefined) { if (currentDirectory.value === undefined) {
return false return false
} }
// @ts-ignore // @ts-ignore
return [...currentDirectory.value?.directorys, ...currentDirectory.value?.files].includes(v) return _filterList.includes(v)
}) })
} }
} }
// 已选择的item,用于多选功能 // 已选择的item,用于多选功能
const selectedItem = reactive(new SelectedItem()) const selectedItem = reactive(new SelectedItem())
const currentDirectorys = defineModel<VirtualDirectory[]>('currentDirectorys', { const currentDirectories = defineModel<VirtualDirectory[]>(
'currentDirectories',
{
required: true required: true
}) }
)
// 目前展示的Dir // 目前展示的Dir
const currentDirectory = computed(() => { const currentDirectory = computed(() => {
return currentDirectorys.value[0] return currentDirectories.value[0]
}) })
// 当前组件在views中的序号 // 当前组件在views中的序号
@@ -177,42 +151,122 @@ const index = computed(() => {
// 用于展示的数据,后续会增加排序等操作 // 用于展示的数据,后续会增加排序等操作
const showData_directory = computed<VirtualDirectory[]>(() => { const showData_directory = computed<VirtualDirectory[]>(() => {
const data = currentDirectory.value?.directorys if (showDirs.value === false) {
? [...currentDirectory.value?.directorys] return []
}
let data = currentDirectory.value?.directories
? [...currentDirectory.value?.directories]
: [] : []
if (searchText.value !== '') {
data = data.filter((vd) => vd.name.includes(searchText.value))
}
return data return data
}) })
const showData_files = computed<VirtualFile[]>(() => { const showData_files = computed<VirtualFile[]>(() => {
const data = currentDirectory.value?.files if (showFiles.value === false) {
return []
}
let data = currentDirectory.value?.files
? [...currentDirectory.value?.files] ? [...currentDirectory.value?.files]
: [] : []
if (searchText.value !== '') {
data = data.filter((vd) => vd.name.includes(searchText.value))
}
return data return data
}) })
// const showData_all = computed<(VirtualDirectory | VirtualFile)[]>(() => {
// const data = currentDirectory.value?.directorys
// ? [...currentDirectory.value?.directorys]
// : []
// data.push(...currentDirectory.value?.files)
// return data
// })
// 用于监听拖拽文件事件 const topBarMenuOption = computed(() => {
const rootDomRef = ref<HTMLDivElement>() return [
{
const uploadQueue = useUploadQueue() 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: '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 // 设置显示的dir
const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => { const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
// 若没有缓存数据则同步刷新,有缓存数据则异步刷新 // 若没有缓存数据则同步刷新,有缓存数据则异步刷新
if ( if (
virtualDirectory.files === undefined || virtualDirectory.files === undefined ||
virtualDirectory.directorys === undefined virtualDirectory.directories === undefined
) { ) {
await virtualDirectory.update() await virtualDirectory.update()
} else { } else {
virtualDirectory.update() virtualDirectory.update()
} }
currentDirectorys.value[0] = virtualDirectory if (currentDirectories.value[0] !== virtualDirectory) {
selectedItem.clear()
handleSearchReset()
nextTick(() => {
miaoDirectoryItemRef.value.scrollTo({
top: 0,
behavior: 'instant'
})
})
}
currentDirectories.value[0] = virtualDirectory
} }
const reload = () => { const reload = () => {
@@ -234,6 +288,29 @@ const openUrl = (
a.click() 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
} else if (key === 'showFiles') {
showFiles.value = !showFiles.value
} else if (key.startsWith('plugin:')) {
const pluginName = key.split(':')[1]
pluginCenter.usePlugin(pluginName, [currentDirectory.value], [])
}
}
const handleBack = () => { const handleBack = () => {
if (currentDirectory.value?.parent) { if (currentDirectory.value?.parent) {
setCurrentDirectory(currentDirectory.value.parent) setCurrentDirectory(currentDirectory.value.parent)
@@ -280,9 +357,8 @@ const handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
} }
const handleItemRename = async (item: VirtualDirectory | VirtualFile) => { const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
const popupRes = await popupInput.value.popup({ const popupRes = await popupInput.value?.popup({
title: '重命名', title: '重命名',
showInput: true,
inputValue: item.name, inputValue: item.name,
inputProps: { inputProps: {
placeholder: item.name placeholder: item.name
@@ -300,10 +376,13 @@ const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
} }
] ]
}) })
if (popupRes.key === false) { if (popupRes?.key === false) {
return
}
const newName = popupRes?.text
if (!newName) {
return return
} }
const newName = popupRes.text
const { response } = miaoFetchApi.rename(item, newName, { const { response } = miaoFetchApi.rename(item, newName, {
retry: 5 retry: 5
}) })
@@ -320,8 +399,14 @@ const handleItemDragStart = async (
item: VirtualDirectory | VirtualFile item: VirtualDirectory | VirtualFile
) => { ) => {
const items = uniq([item, ...selectedItem.value]) const items = uniq([item, ...selectedItem.value])
dataBus.set('dragData_vFiles', items.filter(v => v.type === 'file')) dataBus.set(
dataBus.set('dragData_vDirectory', items.filter(v => v.type === 'directory')) 'dragData_vFiles',
items.filter((v) => v.type === 'file')
)
dataBus.set(
'dragData_vDirectory',
items.filter((v) => v.type === 'directory')
)
// selectedItem.clear() // selectedItem.clear()
} }
@@ -340,6 +425,9 @@ const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
if (currentDirectory.value.getParents.includes(vDir)) { if (currentDirectory.value.getParents.includes(vDir)) {
return return
} }
if (vDir.parent === currentDirectory.value) {
return
}
} }
for (let dir of vDirs) { for (let dir of vDirs) {
;(async () => { ;(async () => {
@@ -388,9 +476,8 @@ const handlePickFilesUpload = async () => {
} }
const handleAddNewItem = async () => { const handleAddNewItem = async () => {
const popupRes = await popupInput.value.popup({ const popupRes = await popupInput.value?.popup({
title: '新建文件/文件夹', title: '新建文件/文件夹',
showInput: true,
inputProps: { inputProps: {
placeholder: '' placeholder: ''
}, },
@@ -413,12 +500,16 @@ const handleAddNewItem = async () => {
] ]
}) })
// todo: 上传前如重名文件夹等等的错误提前检查 // todo: 上传前如重名文件夹等等的错误提前检查
if (popupRes.key === 'cancel' || popupRes.text === '') { if (popupRes?.key === 'cancel' || popupRes?.text === '') {
return return
} }
const _currDir = currentDirectory.value const _currDir = currentDirectory.value
const name = popupRes.text const name = popupRes?.text
const opType: 'file' | 'dir' = popupRes.key if (!name) {
return
}
// @ts-ignore
const opType: 'file' | 'dir' = popupRes?.key
if (opType === 'dir') { if (opType === 'dir') {
const res = await miaoFetchApi.mkdir(currentDirectory.value, name) const res = await miaoFetchApi.mkdir(currentDirectory.value, name)
if (res.message === 'success') { if (res.message === 'success') {
@@ -440,6 +531,45 @@ const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
selectedItem.remove(item) 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 () => { onMounted(async () => {
await setCurrentDirectory(currentDirectory.value) await setCurrentDirectory(currentDirectory.value)
}) })
@@ -453,159 +583,9 @@ $bottom-bar-height: 60px;
position: relative; position: relative;
height: 100%; height: 100%;
width: inherit; width: inherit;
// min-width: 236px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
min-width: 170px; min-width: 170px;
.container-top {
height: $top-height;
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: 100%;
right: 0;
top: 0;
min-width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
}
}
.container-top-tools {
position: relative;
height: 100%;
width: 70px;
padding: 0 5px;
display: flex;
justify-content: space-around;
align-items: center;
.container-top-tools-item {
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
background-color: #ffffff00;
border-radius: 5px;
transition: background-color 0.3s;
cursor: pointer;
.container-top-tools-item-reload {
transition: transform 0.6s ease-in-out;
}
&:hover {
background-color: rgba(128, 128, 128, 0.4);
}
&:active .container-top-tools-item-reload {
transform: rotate(360deg);
}
}
// &::after {
// content: '';
// height: 60%;
// position: absolute;
// right: -2px;
// width: 2px;
// background-color: #828282;
// }
}
}
.container-items {
width: 100%;
height: calc(100% - $top-height - $bottom-bar-height);
// flex: 1;
}
.container-bottom {
height: $bottom-bar-height;
background-color: bisque;
display: flex;
justify-content: 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: all 0.3s ease;
cursor: pointer;
}
&:hover {
svg {
width: 40px;
height: 40px;
}
}
}
}
}
}
// transition动画相关
// .miao-directory-item-container {
// .container-items {
// .dirItem-move {
// transition: all 0.2s ease;
// }
// .dirItem-leave-active {
// transition: none;
// }
// .dirItem-enter-from {
// opacity: 0;
// }
// .dirItem-leave-active {
// position: absolute;
// }
// }
// }
</style> </style>
+2 -2
View File
@@ -1,5 +1,5 @@
<template> <template>
<div class="iframe-container"> <div class="miao-markdown-container-miaomiaomiao">
<iframe <iframe
:src="iframeSrc" :src="iframeSrc"
frameborder="0" frameborder="0"
@@ -23,7 +23,7 @@ onMounted(() => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.iframe-container { .miao-markdown-container-miaomiaomiao {
width: 100%; width: 100%;
height: 100%; height: 100%;
.iframe-container-iframe { .iframe-container-iframe {
+316
View File
@@ -0,0 +1,316 @@
<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">
<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">
<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" />
<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/miaoMessageProvider.vue'
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import { uniq } from 'lodash'
import { computed, nextTick, onMounted, ref } 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 imageFileList = ref<VirtualFile[]>([])
const imageGroupList = computed(() => {
return groupByDay(imageFileList.value)
})
const activeImage = ref<VirtualFile>()
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'
)
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
]
nextTick(scrollToActiveImage)
}
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
]
nextTick(scrollToActiveImage)
}
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?.message(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
)
}
onMounted(async () => {
const length_before = imageFileList.value.length;
for (const i of [currentFiles.value, ...currentDirectories.value]) {
await updateImageSrcList(i)
}
miaoMessageRef.value?.message(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);
}
.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>
+64
View File
@@ -0,0 +1,64 @@
<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 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 = (await miaoFetchApi.getFile(currentFiles.value[0])).toString()
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>
+57 -24
View File
@@ -1,44 +1,74 @@
<template> <template>
<miao-message-provider ref="miaoMessageRef">
<div class="miao-container"> <div class="miao-container">
<div class="miao-container-topBar"> <div class="miao-container-topBar">
<div class="miao-container-topBar-btn" @click="() => handleZoom(10)" title="快速缩小">--</div> <div
<div class="miao-container-topBar-btn" @click="() => handleZoom()" title="缩小">-</div> class="miao-container-topBar-btn"
<div class="miao-container-topBar-btn" @click="() => handleResetMargin()" title="还原">还原缩放</div> @click="() => handleZoom(10)"
<div class="miao-container-topBar-btn" @click="() => handleShrink()" title="放大">+</div> title="快速缩小">
<div class="miao-container-topBar-btn" @click="() => handleShrink(10)" title="快速放大">++</div> --
</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> </div>
<NScrollbar> <NScrollbar>
<div class="miao-container-pdf" :style="{alignItems: pdfMargin < 0 ? 'baseline' : 'center'}"> <div
<div ref="pdfEl" class="miao-container-pdf-content" :style="{ width: `calc( 100% - ${pdfMargin}px)`}"> class="miao-container-pdf"
</div> :style="{
alignItems: pdfMargin < 0 ? 'baseline' : 'center'
}">
<div
ref="pdfEl"
class="miao-container-pdf-content"
:style="{
width: `calc( 100% - ${pdfMargin}px)`
}"></div>
</div> </div>
</NScrollbar> </NScrollbar>
<div class="miao-container-loading" v-if="isLoading">{{ loadingPercent === -1 ? '加载插件中' :
`渲染进度:${canvasList.length}/${pdfPageCount}` }}</div>
</div> </div>
</miao-message-provider>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, onMounted, ref, shallowReactive } from 'vue' import miaoMessageProvider from '@/components/miaoMessageProvider.vue'
import { onMounted, ref, shallowReactive } from 'vue'
import PdfjsWorker from 'pdfjs-dist/build/pdf.worker.mjs?worker' import PdfjsWorker from 'pdfjs-dist/build/pdf.worker.mjs?worker'
import { VirtualFile } from '@/class/VirtualDirectory' import { VirtualFile } from '@/class/VirtualDirectory'
import { NScrollbar } from 'naive-ui'; import { NScrollbar } from 'naive-ui'
const currentFiles = defineModel<VirtualFile[]>('currentFiles', { const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
required: true required: true
}) })
const pdfEl = ref<HTMLDivElement>() const pdfEl = ref<HTMLDivElement>()
const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
// 通过margin来实现缩小功能 // 通过margin来实现缩小功能
const pdfMargin = ref<number>(0) const pdfMargin = ref<number>(0)
const pdfPageCount = ref<number>(-1) const pdfPageCount = ref<number>(-1)
const isLoading = computed(() => {
return canvasList.length !== pdfPageCount.value
})
const canvasList = shallowReactive<HTMLCanvasElement[]>([]) const canvasList = shallowReactive<HTMLCanvasElement[]>([])
const handleZoom = (index?: number) => { const handleZoom = (index?: number) => {
@@ -58,14 +88,11 @@ const handleResetMargin = () => {
pdfMargin.value = 0 pdfMargin.value = 0
} }
const loadingPercent = computed(() => {
if (pdfPageCount.value === -1) {
return -1
}
return canvasList.length / pdfPageCount.value
})
onMounted(async () => { onMounted(async () => {
const setLoadingMessage = miaoMessageRef.value?.message('加载PDF插件中', {
type: 'info',
timeout: -1
})
const pdfSrc = currentFiles.value[0].url const pdfSrc = currentFiles.value[0].url
// @ts-ignore // @ts-ignore
const PDFJS = await import('pdfjs-dist/build/pdf.mjs') const PDFJS = await import('pdfjs-dist/build/pdf.mjs')
@@ -79,6 +106,7 @@ onMounted(async () => {
pdfPageCount.value = pdf.numPages pdfPageCount.value = pdf.numPages
// 循环渲染每一页 // 循环渲染每一页
for (let i = 1; i <= pdf.numPages; i++) { for (let i = 1; i <= pdf.numPages; i++) {
setLoadingMessage && setLoadingMessage(`渲染进度:${i}/${pdf.numPages}`)
const page = await pdf.getPage(i) const page = await pdf.getPage(i)
let pixelRatio = 3 let pixelRatio = 3
let viewport = page.getViewport({ scale: 1 }) let viewport = page.getViewport({ scale: 1 })
@@ -96,6 +124,11 @@ onMounted(async () => {
} }
await page.render(renderContext).promise // 一页一页的渲染 await page.render(renderContext).promise // 一页一页的渲染
} }
setLoadingMessage &&
setLoadingMessage(`渲染PDF完成`, {
type: 'success',
timeout: 3456
})
}) })
</script> </script>
+6 -6
View File
@@ -10,7 +10,7 @@
import { VirtualFile } from '@/class/VirtualDirectory' import { VirtualFile } from '@/class/VirtualDirectory'
import miaoDropHandler from '@/components/miaoDropHandler.vue' import miaoDropHandler from '@/components/miaoDropHandler.vue'
import { onBeforeUnmount, onMounted, ref } from 'vue' import { onBeforeUnmount, onMounted, ref } from 'vue'
// import useViretualPages from '@/hooks/useVirtualPages'; // import useVirtualPages from '@/hooks/useVirtualPages';
import XGPlayer from 'xgplayer' import XGPlayer from 'xgplayer'
import '@/style/xgplayer.scss' import '@/style/xgplayer.scss'
import TextTrack from 'xgplayer/es/plugins/track' import TextTrack from 'xgplayer/es/plugins/track'
@@ -26,7 +26,7 @@ const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
required: true required: true
}) })
// const views = useViretualPages() // const views = useVirtualPages()
// const view = views.getView(props.id) // const view = views.getView(props.id)
// const videoPath = ref<string>(''); // const videoPath = ref<string>('');
@@ -55,7 +55,7 @@ const { setVideo } = (() => {
// console.log(srtToVtt(response.data)) // console.log(srtToVtt(response.data))
const url = setUrl(new Blob([srtToVtt(response.data)])) const url = setUrl(new Blob([srtToVtt(response.data)]))
_list.push({ _list.push({
id: i.uid, id: i.id,
url, url,
// 这个language会覆盖id的设置,导致无法切换字幕 // 这个language会覆盖id的设置,导致无法切换字幕
// language: 'zh-cn', // language: 'zh-cn',
@@ -66,7 +66,7 @@ const { setVideo } = (() => {
// console.log(assToVtt(response.data)) // console.log(assToVtt(response.data))
const url = setUrl(new Blob([assToVtt(response.data)])) const url = setUrl(new Blob([assToVtt(response.data)]))
_list.push({ _list.push({
id: i.uid, id: i.id,
url, url,
text: i.name text: i.name
}) })
@@ -75,13 +75,13 @@ const { setVideo } = (() => {
// console.log(ssaToVtt(response.data)) // console.log(ssaToVtt(response.data))
const url = setUrl(new Blob([ssaToVtt(response.data)])) const url = setUrl(new Blob([ssaToVtt(response.data)]))
_list.push({ _list.push({
id: i.uid, id: i.id,
url, url,
text: i.name text: i.name
}) })
} else { } else {
_list.push({ _list.push({
id: i.uid, id: i.id,
url: i.url, url: i.url,
text: i.name text: i.name
}) })