Compare commits
12
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 539943419
|
5d0d17eb5b | ||
|
539943419
|
9c937f3907 | ||
|
539943419
|
6ea0effa12 | ||
|
539943419
|
f106d20983 | ||
|
539943419
|
9cb2a5b99f | ||
|
539943419
|
911ac7d49c | ||
|
539943419
|
871906808c | ||
|
539943419
|
817603cade | ||
|
539943419
|
71669aa380 | ||
|
539943419
|
2605f9bdb8 | ||
|
539943419
|
bc5bbaf016 | ||
|
539943419
|
acd7a8b5f0 |
No files matched your search
@@ -1,83 +0,0 @@
|
|||||||
name: 构建并发布应用
|
|
||||||
|
|
||||||
on:
|
|
||||||
push:
|
|
||||||
branches: [ main, master ]
|
|
||||||
pull_request:
|
|
||||||
branches: [ main, master ]
|
|
||||||
workflow_dispatch:
|
|
||||||
|
|
||||||
permissions:
|
|
||||||
contents: write
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
build:
|
|
||||||
name: 构建和发布
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
|
|
||||||
steps:
|
|
||||||
- name: 检出代码
|
|
||||||
uses: actions/checkout@v4
|
|
||||||
|
|
||||||
- name: 设置Node.js
|
|
||||||
uses: actions/setup-node@v4
|
|
||||||
with:
|
|
||||||
node-version: '20'
|
|
||||||
|
|
||||||
- name: 安装pnpm
|
|
||||||
uses: pnpm/action-setup@v3
|
|
||||||
with:
|
|
||||||
version: 8
|
|
||||||
|
|
||||||
- name: 安装前端依赖
|
|
||||||
run: pnpm install
|
|
||||||
|
|
||||||
- name: 显示依赖包信息
|
|
||||||
run: |
|
|
||||||
ls -la node_modules/aplayer
|
|
||||||
ls -la node_modules/APlayer || echo "大写的APlayer不存在"
|
|
||||||
|
|
||||||
- name: 构建前端
|
|
||||||
run: pnpm run build
|
|
||||||
|
|
||||||
- name: 设置Go环境
|
|
||||||
uses: actions/setup-go@v5
|
|
||||||
with:
|
|
||||||
go-version: '1.21'
|
|
||||||
|
|
||||||
- name: 安装UPX
|
|
||||||
run: sudo apt-get update && sudo apt-get install -y upx
|
|
||||||
|
|
||||||
- name: 构建应用
|
|
||||||
run: bash build.auto.release.sh -full
|
|
||||||
|
|
||||||
- name: 显示构建产物
|
|
||||||
run: |
|
|
||||||
ls -la output || true
|
|
||||||
find output -type f -name "miao-directory*" || true
|
|
||||||
|
|
||||||
- name: 上传构建产物
|
|
||||||
uses: actions/upload-artifact@v4
|
|
||||||
with:
|
|
||||||
name: miao-directory-all
|
|
||||||
path: |
|
|
||||||
output/**
|
|
||||||
|
|
||||||
- name: 生成版本号
|
|
||||||
id: version
|
|
||||||
run: |
|
|
||||||
echo "date=$(date +'%Y%m%d%H%M')" >> $GITHUB_OUTPUT
|
|
||||||
echo "sha_short=$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
|
|
||||||
|
|
||||||
- name: 创建自动发布
|
|
||||||
if: github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/master')
|
|
||||||
uses: softprops/action-gh-release@v2
|
|
||||||
with:
|
|
||||||
name: Auto-Build-${{ steps.version.outputs.date }}-${{ steps.version.outputs.sha_short }}
|
|
||||||
tag_name: auto-${{ steps.version.outputs.date }}-${{ steps.version.outputs.sha_short }}
|
|
||||||
draft: false
|
|
||||||
prerelease: false
|
|
||||||
files: |
|
|
||||||
output/**
|
|
||||||
env:
|
|
||||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
|
||||||
+1
-82
@@ -1,83 +1,2 @@
|
|||||||
# Logs
|
web/*
|
||||||
logs
|
|
||||||
*.log
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
pnpm-debug.log*
|
|
||||||
lerna-debug.log*
|
|
||||||
|
|
||||||
node_modules
|
|
||||||
dist
|
|
||||||
output/
|
|
||||||
dist-ssr
|
|
||||||
*.local
|
|
||||||
|
|
||||||
# Editor directories and files
|
|
||||||
.vscode/*
|
|
||||||
!.vscode/extensions.json
|
|
||||||
.idea
|
|
||||||
.DS_Store
|
|
||||||
*.suo
|
|
||||||
*.ntvs*
|
|
||||||
*.njsproj
|
|
||||||
*.sln
|
|
||||||
*.sw?
|
|
||||||
.vscode
|
|
||||||
|
|
||||||
miao-directory.exe
|
miao-directory.exe
|
||||||
miao-directory-amd64-linux
|
|
||||||
miao-directory-amd64-win.exe
|
|
||||||
miao-directory-amd64-win.gui.exe
|
|
||||||
miao-directory-amd64-win.upx.exe
|
|
||||||
miao-directory-amd64-win.gui.upx.exe
|
|
||||||
miao-directory.exe~
|
|
||||||
miao-directory-amd64-linux~
|
|
||||||
miao-directory-amd64-win.exe~
|
|
||||||
miao-directory-amd64-win.gui.exe~
|
|
||||||
miao-directory-amd64-win.upx.exe~
|
|
||||||
miao-directory-amd64-win.gui.upx.exe~
|
|
||||||
|
|
||||||
# Linux 压缩版本
|
|
||||||
miao-directory-amd64-linux.upx
|
|
||||||
miao-directory-amd64-linux.upx~
|
|
||||||
|
|
||||||
# Linux ARM64 版本
|
|
||||||
miao-directory-arm64-linux
|
|
||||||
miao-directory-arm64-linux~
|
|
||||||
miao-directory-arm64-linux.upx
|
|
||||||
miao-directory-arm64-linux.upx~
|
|
||||||
|
|
||||||
# macOS AMD64 版本
|
|
||||||
miao-directory-amd64-darwin
|
|
||||||
miao-directory-amd64-darwin~
|
|
||||||
miao-directory-amd64-darwin.upx
|
|
||||||
miao-directory-amd64-darwin.upx~
|
|
||||||
|
|
||||||
# macOS ARM64 版本
|
|
||||||
miao-directory-arm64-darwin
|
|
||||||
miao-directory-arm64-darwin~
|
|
||||||
miao-directory-arm64-darwin.upx
|
|
||||||
miao-directory-arm64-darwin.upx~
|
|
||||||
|
|
||||||
# Windows ARM64 版本
|
|
||||||
miao-directory-arm64-win.exe
|
|
||||||
miao-directory-arm64-win.exe~
|
|
||||||
|
|
||||||
# 带x-前缀的版本
|
|
||||||
miao-directory-x-*
|
|
||||||
|
|
||||||
test
|
|
||||||
stats.html
|
|
||||||
|
|
||||||
src-server/web/*
|
|
||||||
|
|
||||||
# auto-imports.d.ts
|
|
||||||
|
|
||||||
# components.d.ts
|
|
||||||
|
|
||||||
# src/plugins/onnx_demo_*
|
|
||||||
|
|
||||||
public/test
|
|
||||||
|
|
||||||
doc
|
|
||||||
-104
@@ -1,104 +0,0 @@
|
|||||||
export default {
|
|
||||||
/**
|
|
||||||
* 换行宽度，当代码宽度达到多少时换行
|
|
||||||
* @default 80
|
|
||||||
* @type {number}
|
|
||||||
*/
|
|
||||||
printWidth: 80,
|
|
||||||
/**
|
|
||||||
* 缩进的空格数量
|
|
||||||
* @default 2
|
|
||||||
* @type {number}
|
|
||||||
*/
|
|
||||||
tabWidth: 3,
|
|
||||||
/**
|
|
||||||
* 是否使用制表符代替空格
|
|
||||||
* @default false
|
|
||||||
* @type {boolean}
|
|
||||||
*/
|
|
||||||
useTabs: false,
|
|
||||||
/**
|
|
||||||
* 是否在代码块结尾加上分号
|
|
||||||
* @default true
|
|
||||||
* @type {boolean}
|
|
||||||
*/
|
|
||||||
semi: false,
|
|
||||||
/**
|
|
||||||
* 是否使用单引号替代双引号
|
|
||||||
* @default false
|
|
||||||
* @type {boolean}
|
|
||||||
*/
|
|
||||||
singleQuote: true,
|
|
||||||
/**
|
|
||||||
* 对象属性的引号处理
|
|
||||||
* @default "as-needed"
|
|
||||||
* @type {"as-needed"|"consistent"|"preserve"}
|
|
||||||
*/
|
|
||||||
quoteProps: 'as-needed',
|
|
||||||
/**
|
|
||||||
* jsx中是否使用单引号替代双引号
|
|
||||||
* @default false
|
|
||||||
* @type {boolean}
|
|
||||||
*/
|
|
||||||
jsxSingleQuote: true,
|
|
||||||
/**
|
|
||||||
* 在jsx中使用是否单引号代替双引号
|
|
||||||
* @default false
|
|
||||||
* @type {boolean}
|
|
||||||
*/
|
|
||||||
/**
|
|
||||||
* 末尾是否加上逗号
|
|
||||||
* @default "es5"
|
|
||||||
* @type {"es5"|"none"|"all"}
|
|
||||||
*/
|
|
||||||
trailingComma: 'none',
|
|
||||||
/**
|
|
||||||
* 在对象，数组括号与文字之间加空格 "{ foo: bar }"
|
|
||||||
* @default true
|
|
||||||
* @type {boolean}
|
|
||||||
*/
|
|
||||||
bracketSpacing: true,
|
|
||||||
/**
|
|
||||||
* 把多行HTML (HTML, JSX, Vue, Angular)元素的>放在最后一行的末尾，而不是单独放在下一行(不适用于自关闭元素)。
|
|
||||||
* @default false
|
|
||||||
* @type {boolean}
|
|
||||||
*/
|
|
||||||
bracketSameLine: true,
|
|
||||||
/**
|
|
||||||
* 当箭头函数只有一个参数是否加括号
|
|
||||||
* @default "always"
|
|
||||||
* @type {"always"|"avoid"}
|
|
||||||
*/
|
|
||||||
arrowParens: 'always',
|
|
||||||
/**
|
|
||||||
* 为HTML、Vue、Angular和Handlebars指定全局空格敏感性
|
|
||||||
* @default "css"
|
|
||||||
* @type {"css"|"strict"|"ignore"}
|
|
||||||
*/
|
|
||||||
htmlWhitespaceSensitivity: 'ignore',
|
|
||||||
/**
|
|
||||||
* 是否缩进Vue文件中的<script>和<style>标记内的代码。有些人(比如Vue的创建者)不使用缩进来保存缩进级别，但这可能会破坏编辑器中的代码折叠。
|
|
||||||
* @default "always"
|
|
||||||
* @type {"always"|"avoid"}
|
|
||||||
*/
|
|
||||||
vueIndentScriptAndStyle: false,
|
|
||||||
/**
|
|
||||||
* 文件结束符
|
|
||||||
* @default "lf"
|
|
||||||
* @type {"lf"|"crlf"|"cr"|"auto"}
|
|
||||||
*/
|
|
||||||
endOfLine: 'crlf',
|
|
||||||
/**
|
|
||||||
* 因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
|
|
||||||
*/
|
|
||||||
proseWrap: 'never',
|
|
||||||
// 是否使用根目录下的EditorConfig配置文件
|
|
||||||
useEditorConfig: false,
|
|
||||||
/**
|
|
||||||
* HTML\VUE\JSX每行只有单个属性
|
|
||||||
* @default true
|
|
||||||
* @type {boolean}
|
|
||||||
*/
|
|
||||||
// singleAttributePerLine: true,
|
|
||||||
// disableLanguages: ['html']
|
|
||||||
}
|
|
||||||
Vendored
+6
@@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"cSpell.words": [
|
||||||
|
"birthtime",
|
||||||
|
"gonic"
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
## TODO list:
|
|
||||||
|
|
||||||
| 计划 | 状态 |
|
|
||||||
|---|---|
|
|
||||||
| 拆分miaoDirectory | ✅ |
|
|
||||||
| 完善视频插件 | ✅ |
|
|
||||||
| 完善PDF插件 | ✅ |
|
|
||||||
| 完善Code插件 | ✅ |
|
|
||||||
| 实现miaoDirectory的搜索功能 | ✅ |
|
|
||||||
| 创建音乐播放器组件（仿QQ音乐移动端吧） | ✅ |
|
|
||||||
| plugin增加些属性，icon, disable, group之类的 | ✅ |
|
|
||||||
| 实现miaoDirectory的排序功能 | ✅ |
|
|
||||||
| 重构主界面，拆分主界面组件的实现 | ✅ |
|
|
||||||
| 重构miaoFetchApi.getFile， 增加进度 | ❌ |
|
|
||||||
| 完善miaoDirectory的搜索功能 | ❌ |
|
|
||||||
| 完善图片浏览插件 | ❌ |
|
|
||||||
| VirtualDirectory更新时更新文件信息 | ❌ |
|
|
||||||
| miaoDirectory的复制文件/文件夹功能 | ❌ |
|
|
||||||
| 重构miaoDropHandler的实现 | ❌ |
|
|
||||||
|
|
||||||
|
|
||||||
| 长期计划 |
|
|
||||||
|---|
|
|
||||||
| 无 |
|
|
||||||
|
|
||||||
## 碎碎念：
|
|
||||||
|
|
||||||
写的真潦草
|
|
||||||
File renamed without changes.
@@ -29,15 +29,6 @@ func CopyHandler(fsOperateEventCenter *fsOperateEventCenter.FsOperateEventCenter
|
|||||||
|
|
||||||
newPath := filepath.Join(staticPath, req.NewPath, filepath.Base(decodedPath))
|
newPath := filepath.Join(staticPath, req.NewPath, filepath.Base(decodedPath))
|
||||||
eventId := fsOperateEventCenter.Push(func() error {
|
eventId := fsOperateEventCenter.Push(func() error {
|
||||||
// 检查源路径是文件还是目录
|
|
||||||
fileInfo, err := os.Stat(decodedPath)
|
|
||||||
if err != nil {
|
|
||||||
return err
|
|
||||||
}
|
|
||||||
|
|
||||||
if fileInfo.IsDir() {
|
|
||||||
return copyDir(decodedPath, newPath)
|
|
||||||
}
|
|
||||||
return copyFile(decodedPath, newPath)
|
return copyFile(decodedPath, newPath)
|
||||||
})
|
})
|
||||||
c.JSON(http.StatusOK, gin.H{"eventId": eventId})
|
c.JSON(http.StatusOK, gin.H{"eventId": eventId})
|
||||||
@@ -64,43 +55,3 @@ func copyFile(src, dst string) error {
|
|||||||
|
|
||||||
return destFile.Sync()
|
return destFile.Sync()
|
||||||
}
|
}
|
||||||
|
|
||||||
// 复制目录及其内容
|
|
||||||
func copyDir(src, dst string) error {
|
|
||||||
// 获取源目录信息
|
|
||||||
srcInfo, err := os.Stat(src)
|
|
||||||
if err != nil {
|
|
||||||
return err
|
|
||||||
}
|
|
||||||
|
|
||||||
// 创建目标目录
|
|
||||||
if err = os.MkdirAll(dst, srcInfo.Mode()); err != nil {
|
|
||||||
return err
|
|
||||||
}
|
|
||||||
|
|
||||||
// 读取源目录内容
|
|
||||||
entries, err := os.ReadDir(src)
|
|
||||||
if err != nil {
|
|
||||||
return err
|
|
||||||
}
|
|
||||||
|
|
||||||
// 遍历并复制每个条目
|
|
||||||
for _, entry := range entries {
|
|
||||||
srcPath := filepath.Join(src, entry.Name())
|
|
||||||
dstPath := filepath.Join(dst, entry.Name())
|
|
||||||
|
|
||||||
if entry.IsDir() {
|
|
||||||
// 递归复制子目录
|
|
||||||
if err = copyDir(srcPath, dstPath); err != nil {
|
|
||||||
return err
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// 复制文件
|
|
||||||
if err = copyFile(srcPath, dstPath); err != nil {
|
|
||||||
return err
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return nil
|
|
||||||
}
|
|
||||||
File renamed without changes.
File renamed without changes.
@@ -72,7 +72,6 @@ func GetHandler(c *gin.Context) {
|
|||||||
switch ext {
|
switch ext {
|
||||||
case ".js":
|
case ".js":
|
||||||
case ".cjs":
|
case ".cjs":
|
||||||
case ".mjs":
|
|
||||||
c.Writer.Header().Set("Content-Type", "application/javascript")
|
c.Writer.Header().Set("Content-Type", "application/javascript")
|
||||||
case ".css":
|
case ".css":
|
||||||
c.Writer.Header().Set("Content-Type", "text/css")
|
c.Writer.Header().Set("Content-Type", "text/css")
|
||||||
@@ -80,8 +79,6 @@ func GetHandler(c *gin.Context) {
|
|||||||
c.Writer.Header().Set("Content-Type", "text/html")
|
c.Writer.Header().Set("Content-Type", "text/html")
|
||||||
case ".json":
|
case ".json":
|
||||||
c.Writer.Header().Set("Content-Type", "application/json")
|
c.Writer.Header().Set("Content-Type", "application/json")
|
||||||
case ".wasm":
|
|
||||||
c.Writer.Header().Set("Content-Type", "application/wasm")
|
|
||||||
default:
|
default:
|
||||||
c.Writer.Header().Set("Content-Type", "application/octet-stream")
|
c.Writer.Header().Set("Content-Type", "application/octet-stream")
|
||||||
}
|
}
|
||||||
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Vendored
-75
@@ -1,75 +0,0 @@
|
|||||||
/* eslint-disable */
|
|
||||||
/* prettier-ignore */
|
|
||||||
// @ts-nocheck
|
|
||||||
// noinspection JSUnusedGlobalSymbols
|
|
||||||
// Generated by unplugin-auto-import
|
|
||||||
// biome-ignore lint: disable
|
|
||||||
export {}
|
|
||||||
declare global {
|
|
||||||
const EffectScope: typeof import('vue')['EffectScope']
|
|
||||||
const computed: typeof import('vue')['computed']
|
|
||||||
const createApp: typeof import('vue')['createApp']
|
|
||||||
const customRef: typeof import('vue')['customRef']
|
|
||||||
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
|
|
||||||
const defineComponent: typeof import('vue')['defineComponent']
|
|
||||||
const effectScope: typeof import('vue')['effectScope']
|
|
||||||
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
|
||||||
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
|
||||||
const h: typeof import('vue')['h']
|
|
||||||
const inject: typeof import('vue')['inject']
|
|
||||||
const isProxy: typeof import('vue')['isProxy']
|
|
||||||
const isReactive: typeof import('vue')['isReactive']
|
|
||||||
const isReadonly: typeof import('vue')['isReadonly']
|
|
||||||
const isRef: typeof import('vue')['isRef']
|
|
||||||
const markRaw: typeof import('vue')['markRaw']
|
|
||||||
const nextTick: typeof import('vue')['nextTick']
|
|
||||||
const onActivated: typeof import('vue')['onActivated']
|
|
||||||
const onBeforeMount: typeof import('vue')['onBeforeMount']
|
|
||||||
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
|
|
||||||
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
|
|
||||||
const onDeactivated: typeof import('vue')['onDeactivated']
|
|
||||||
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
|
|
||||||
const onMounted: typeof import('vue')['onMounted']
|
|
||||||
const onRenderTracked: typeof import('vue')['onRenderTracked']
|
|
||||||
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
|
|
||||||
const onScopeDispose: typeof import('vue')['onScopeDispose']
|
|
||||||
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
|
||||||
const onUnmounted: typeof import('vue')['onUnmounted']
|
|
||||||
const onUpdated: typeof import('vue')['onUpdated']
|
|
||||||
const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
|
|
||||||
const provide: typeof import('vue')['provide']
|
|
||||||
const reactive: typeof import('vue')['reactive']
|
|
||||||
const readonly: typeof import('vue')['readonly']
|
|
||||||
const ref: typeof import('vue')['ref']
|
|
||||||
const resolveComponent: typeof import('vue')['resolveComponent']
|
|
||||||
const shallowReactive: typeof import('vue')['shallowReactive']
|
|
||||||
const shallowReadonly: typeof import('vue')['shallowReadonly']
|
|
||||||
const shallowRef: typeof import('vue')['shallowRef']
|
|
||||||
const toRaw: typeof import('vue')['toRaw']
|
|
||||||
const toRef: typeof import('vue')['toRef']
|
|
||||||
const toRefs: typeof import('vue')['toRefs']
|
|
||||||
const toValue: typeof import('vue')['toValue']
|
|
||||||
const triggerRef: typeof import('vue')['triggerRef']
|
|
||||||
const unref: typeof import('vue')['unref']
|
|
||||||
const useAttrs: typeof import('vue')['useAttrs']
|
|
||||||
const useCssModule: typeof import('vue')['useCssModule']
|
|
||||||
const useCssVars: typeof import('vue')['useCssVars']
|
|
||||||
const useDialog: typeof import('naive-ui')['useDialog']
|
|
||||||
const useId: typeof import('vue')['useId']
|
|
||||||
const useLoadingBar: typeof import('naive-ui')['useLoadingBar']
|
|
||||||
const useMessage: typeof import('naive-ui')['useMessage']
|
|
||||||
const useModel: typeof import('vue')['useModel']
|
|
||||||
const useNotification: typeof import('naive-ui')['useNotification']
|
|
||||||
const useSlots: typeof import('vue')['useSlots']
|
|
||||||
const useTemplateRef: typeof import('vue')['useTemplateRef']
|
|
||||||
const watch: typeof import('vue')['watch']
|
|
||||||
const watchEffect: typeof import('vue')['watchEffect']
|
|
||||||
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
|
||||||
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
|
|
||||||
}
|
|
||||||
// for type re-export
|
|
||||||
declare global {
|
|
||||||
// @ts-ignore
|
|
||||||
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
|
|
||||||
import('vue')
|
|
||||||
}
|
|
||||||
@@ -1,258 +0,0 @@
|
|||||||
#!/bin/bash
|
|
||||||
set -Eeuo pipefail
|
|
||||||
IFS=$'\n\t'
|
|
||||||
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
|
|
||||||
OUT_DIR="$SCRIPT_DIR/output"
|
|
||||||
|
|
||||||
# 解析命令行参数
|
|
||||||
FULL_BUILD=false
|
|
||||||
FAST_COMPRESSION=false
|
|
||||||
|
|
||||||
for arg in "$@"; do
|
|
||||||
case $arg in
|
|
||||||
-full)
|
|
||||||
FULL_BUILD=true
|
|
||||||
;;
|
|
||||||
-fast)
|
|
||||||
FAST_COMPRESSION=true
|
|
||||||
;;
|
|
||||||
esac
|
|
||||||
done
|
|
||||||
|
|
||||||
# 检查UPX是否存在
|
|
||||||
check_upx() {
|
|
||||||
if command -v upx &> /dev/null; then
|
|
||||||
echo "UPX已找到，将执行可执行文件压缩"
|
|
||||||
return 0
|
|
||||||
else
|
|
||||||
echo "UPX未找到，跳过压缩步骤"
|
|
||||||
return 1
|
|
||||||
fi
|
|
||||||
}
|
|
||||||
require_cmd() {
|
|
||||||
if ! command -v "$1" >/dev/null 2>&1; then
|
|
||||||
echo "$1 未找到，请安装后再试"
|
|
||||||
exit 1
|
|
||||||
fi
|
|
||||||
}
|
|
||||||
|
|
||||||
# 清理已有构建产物
|
|
||||||
echo "清理已有构建产物..."
|
|
||||||
mkdir -p "$OUT_DIR"
|
|
||||||
|
|
||||||
# 基础前缀
|
|
||||||
PREFIX="miao-directory"
|
|
||||||
|
|
||||||
# 基础构建产物
|
|
||||||
BASE_ARCHOS=(
|
|
||||||
"amd64-win.exe"
|
|
||||||
"amd64-win.upx.exe"
|
|
||||||
"amd64-win.gui.exe"
|
|
||||||
"amd64-win.gui.upx.exe"
|
|
||||||
"amd64-linux"
|
|
||||||
"amd64-linux.upx"
|
|
||||||
)
|
|
||||||
|
|
||||||
# 清理基础构建产物
|
|
||||||
for suffix in "${BASE_ARCHOS[@]}"; do
|
|
||||||
[ -f "$OUT_DIR/$PREFIX-$suffix" ] && rm "$OUT_DIR/$PREFIX-$suffix"
|
|
||||||
done
|
|
||||||
|
|
||||||
# 如果是完整构建，清理额外架构产物
|
|
||||||
if [ "$FULL_BUILD" = true ]; then
|
|
||||||
echo "完整构建模式，清理额外架构产物..."
|
|
||||||
|
|
||||||
# 无需添加x-前缀的特殊版本
|
|
||||||
SPECIAL_ARCHOS=(
|
|
||||||
"arm64-linux"
|
|
||||||
"arm64-linux.upx"
|
|
||||||
"amd64-darwin"
|
|
||||||
"amd64-darwin.upx"
|
|
||||||
"arm64-darwin"
|
|
||||||
"arm64-darwin.upx"
|
|
||||||
"arm64-win.exe"
|
|
||||||
)
|
|
||||||
|
|
||||||
# 清理特殊版本产物
|
|
||||||
for suffix in "${SPECIAL_ARCHOS[@]}"; do
|
|
||||||
[ -f "$OUT_DIR/$PREFIX-$suffix" ] && rm "$OUT_DIR/$PREFIX-$suffix"
|
|
||||||
done
|
|
||||||
|
|
||||||
# 处理带x-前缀的不同系统和架构
|
|
||||||
X_OS_ARCHS=(
|
|
||||||
# FreeBSD系列
|
|
||||||
"freebsd:amd64,arm64,386"
|
|
||||||
# OpenBSD系列
|
|
||||||
"openbsd:amd64,arm64,386"
|
|
||||||
# Windows额外架构
|
|
||||||
"windows:arm64"
|
|
||||||
# Linux额外架构
|
|
||||||
"linux:386,mips,mips64,mips64le,ppc64,ppc64le,riscv64,s390x"
|
|
||||||
)
|
|
||||||
|
|
||||||
# 清理带x-前缀的版本产物
|
|
||||||
for os_arch in "${X_OS_ARCHS[@]}"; do
|
|
||||||
# 分离操作系统和架构列表
|
|
||||||
IFS=":" read -r os archs <<< "$os_arch"
|
|
||||||
|
|
||||||
# 处理每个架构
|
|
||||||
IFS="," read -ra arch_array <<< "$archs"
|
|
||||||
for arch in "${arch_array[@]}"; do
|
|
||||||
file="$PREFIX-x-$arch-$os"
|
|
||||||
[ -f "$OUT_DIR/$file" ] && rm "$OUT_DIR/$file"
|
|
||||||
done
|
|
||||||
done
|
|
||||||
fi
|
|
||||||
|
|
||||||
echo "构建前端..."
|
|
||||||
require_cmd pnpm
|
|
||||||
require_cmd go
|
|
||||||
pnpm run build
|
|
||||||
|
|
||||||
echo "复制前端文件到服务端..."
|
|
||||||
rm -rf ./src-server/web/*
|
|
||||||
mkdir -p ./src-server/web/
|
|
||||||
if compgen -G "./dist/*" > /dev/null; then
|
|
||||||
cp -r ./dist/* ./src-server/web/
|
|
||||||
fi
|
|
||||||
|
|
||||||
cd "$SCRIPT_DIR/src-server"
|
|
||||||
|
|
||||||
# ===== 构建阶段 =====
|
|
||||||
echo "===== 开始构建阶段 ====="
|
|
||||||
|
|
||||||
# 基础构建 - 始终构建的版本
|
|
||||||
echo "构建基础版本..."
|
|
||||||
|
|
||||||
# Windows AMD64 无GUI
|
|
||||||
echo "构建 Win AMD64 无GUI 版本"
|
|
||||||
GOOS=windows GOARCH=amd64 go build -ldflags="-s -w" -o "$OUT_DIR/miao-directory-amd64-win.exe"
|
|
||||||
|
|
||||||
# Linux AMD64 无GUI
|
|
||||||
echo "构建 Linux AMD64 无GUI 版本"
|
|
||||||
CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -ldflags="-s -w" -o "$OUT_DIR/miao-directory-amd64-linux"
|
|
||||||
chmod +x "$OUT_DIR/miao-directory-amd64-linux"
|
|
||||||
|
|
||||||
# Windows AMD64 GUI
|
|
||||||
echo "构建 Win AMD64 GUI 版本"
|
|
||||||
GOOS=windows GOARCH=amd64 go build -tags webview -ldflags="-s -w -H=windowsgui" -o "$OUT_DIR/miao-directory-amd64-win.gui.exe"
|
|
||||||
|
|
||||||
# 完整构建 - 额外的系统和架构
|
|
||||||
if [ "$FULL_BUILD" = true ]; then
|
|
||||||
echo "构建额外架构版本..."
|
|
||||||
|
|
||||||
# 备份resource.syso文件(如果存在)
|
|
||||||
if [ -f "resource.syso" ]; then
|
|
||||||
echo "备份resource.syso文件"
|
|
||||||
mv resource.syso resource.syso.bak
|
|
||||||
fi
|
|
||||||
|
|
||||||
: # CGO 在每次构建调用中禁用，无需全局 export
|
|
||||||
|
|
||||||
# 定义操作系统和架构映射
|
|
||||||
# 在工具函数处增加大小写格式化，避免使用 Bash 4 的 ${var^}/${var^^}
|
|
||||||
uc_first() {
|
|
||||||
local s="$1"
|
|
||||||
local first="${s:0:1}"
|
|
||||||
local rest="${s:1}"
|
|
||||||
printf "%s%s" "$(printf "%s" "$first" | tr '[:lower:]' '[:upper:]')" "$rest"
|
|
||||||
}
|
|
||||||
|
|
||||||
to_upper() {
|
|
||||||
printf "%s" "$1" | tr '[:lower:]' '[:upper:]'
|
|
||||||
}
|
|
||||||
OS_LIST=(linux darwin win freebsd openbsd)
|
|
||||||
for os in "${OS_LIST[@]}"; do
|
|
||||||
echo "构建 $(uc_first "$os") 系列版本..."
|
|
||||||
case "$os" in
|
|
||||||
linux) archs=(arm64 386 mips mips64 mips64le ppc64 ppc64le riscv64 s390x) ;;
|
|
||||||
darwin) archs=(amd64 arm64) ;;
|
|
||||||
win) archs=(arm64) ;;
|
|
||||||
freebsd) archs=(amd64 arm64 386) ;;
|
|
||||||
openbsd) archs=(amd64 arm64 386) ;;
|
|
||||||
*) archs=() ;;
|
|
||||||
esac
|
|
||||||
|
|
||||||
for arch in "${archs[@]}"; do
|
|
||||||
# 设置输出文件名后缀
|
|
||||||
suffix=""
|
|
||||||
if [ "$os" = "win" ]; then
|
|
||||||
suffix=".exe"
|
|
||||||
fi
|
|
||||||
|
|
||||||
echo "构建 $(uc_first "$os") $(to_upper "$arch") 版本"
|
|
||||||
|
|
||||||
# 根据条件设置不同的输出文件名格式
|
|
||||||
if [[ "$os" == "darwin" || ("$os" == "linux" && "$arch" == "arm64") || ("$os" == "win" && "$arch" == "arm64") ]]; then
|
|
||||||
output_file="$OUT_DIR/miao-directory-${arch}-${os}${suffix}"
|
|
||||||
else
|
|
||||||
output_file="$OUT_DIR/miao-directory-x-${arch}-${os}${suffix}"
|
|
||||||
fi
|
|
||||||
|
|
||||||
GOOS_VAR="$os"
|
|
||||||
if [ "$os" = "win" ]; then
|
|
||||||
GOOS_VAR="windows"
|
|
||||||
fi
|
|
||||||
CGO_ENABLED=0 GOOS="$GOOS_VAR" GOARCH="$arch" go build -ldflags="-s -w" -o "$output_file"
|
|
||||||
if [ "$os" != "win" ]; then
|
|
||||||
chmod +x "$output_file"
|
|
||||||
fi
|
|
||||||
done
|
|
||||||
done
|
|
||||||
|
|
||||||
# 恢复resource.syso文件
|
|
||||||
if [ -f "resource.syso.bak" ]; then
|
|
||||||
echo "恢复resource.syso文件"
|
|
||||||
mv resource.syso.bak resource.syso
|
|
||||||
fi
|
|
||||||
|
|
||||||
: # 无需恢复 CGO，全程使用内联变量
|
|
||||||
fi
|
|
||||||
|
|
||||||
# ===== 压缩阶段 =====
|
|
||||||
echo "===== 开始压缩阶段 ====="
|
|
||||||
|
|
||||||
# 检查是否可以进行UPX压缩
|
|
||||||
if check_upx; then
|
|
||||||
echo "开始压缩所有可执行文件..."
|
|
||||||
|
|
||||||
# 设置压缩级别
|
|
||||||
COMPRESSION_LEVEL="--ultra-brute"
|
|
||||||
if [ "$FAST_COMPRESSION" = true ]; then
|
|
||||||
echo "使用快速压缩模式"
|
|
||||||
COMPRESSION_LEVEL="--fast"
|
|
||||||
else
|
|
||||||
echo "使用极限压缩模式"
|
|
||||||
fi
|
|
||||||
|
|
||||||
# 压缩基础版本
|
|
||||||
echo "压缩基础版本..."
|
|
||||||
|
|
||||||
# 压缩Windows无GUI版本
|
|
||||||
echo "正在压缩Win AMD64无GUI版本"
|
|
||||||
upx $COMPRESSION_LEVEL -o "$OUT_DIR/miao-directory-amd64-win.upx.exe" "$OUT_DIR/miao-directory-amd64-win.exe"
|
|
||||||
|
|
||||||
# 压缩Linux AMD64版本
|
|
||||||
echo "正在压缩Linux AMD64版本"
|
|
||||||
upx $COMPRESSION_LEVEL -o "$OUT_DIR/miao-directory-amd64-linux.upx" "$OUT_DIR/miao-directory-amd64-linux"
|
|
||||||
|
|
||||||
# 压缩Windows GUI版本
|
|
||||||
echo "正在压缩Win AMD64 GUI版本"
|
|
||||||
upx $COMPRESSION_LEVEL -o "$OUT_DIR/miao-directory-amd64-win.gui.upx.exe" "$OUT_DIR/miao-directory-amd64-win.gui.exe"
|
|
||||||
|
|
||||||
# 压缩额外架构版本
|
|
||||||
if [ "$FULL_BUILD" = true ]; then
|
|
||||||
echo "压缩额外架构版本..."
|
|
||||||
|
|
||||||
# 压缩Linux ARM64版本
|
|
||||||
echo "正在压缩Linux ARM64版本"
|
|
||||||
upx $COMPRESSION_LEVEL -o "$OUT_DIR/miao-directory-arm64-linux.upx" "$OUT_DIR/miao-directory-arm64-linux"
|
|
||||||
|
|
||||||
fi
|
|
||||||
|
|
||||||
echo "所有压缩完成"
|
|
||||||
fi
|
|
||||||
|
|
||||||
echo "构建完成"
|
|
||||||
echo "构建模式: $([ "$FULL_BUILD" = true ] && echo "完整构建" || echo "基础构建")"
|
|
||||||
echo "压缩模式: $([ "$FAST_COMPRESSION" = true ] && echo "快速压缩" || echo "极限压缩")"
|
|
||||||
Vendored
-38
@@ -1,38 +0,0 @@
|
|||||||
/* eslint-disable */
|
|
||||||
// @ts-nocheck
|
|
||||||
// Generated by unplugin-vue-components
|
|
||||||
// Read more: https://github.com/vuejs/core/pull/3399
|
|
||||||
// biome-ignore lint: disable
|
|
||||||
export {}
|
|
||||||
|
|
||||||
/* prettier-ignore */
|
|
||||||
declare module 'vue' {
|
|
||||||
export interface GlobalComponents {
|
|
||||||
MiaoAlertTipProvider: typeof import('./src/components/miaoAlertTipProvider.vue')['default']
|
|
||||||
MiaoContextMenu: typeof import('./src/components/miaoContextMenu.vue')['default']
|
|
||||||
MiaoDraggableDiv: typeof import('./src/components/miaoDraggableDiv.vue')['default']
|
|
||||||
MiaoDropHandler: typeof import('./src/components/miaoDropHandler.vue')['default']
|
|
||||||
MiaoLazyDiv: typeof import('./src/components/miaoLazyDiv.vue')['default']
|
|
||||||
MiaoMask: typeof import('./src/components/miaoMask.vue')['default']
|
|
||||||
MiaoPopupInput: typeof import('./src/components/miaoPopupInput.vue')['default']
|
|
||||||
NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
|
|
||||||
NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
|
|
||||||
NButton: typeof import('naive-ui')['NButton']
|
|
||||||
NCard: typeof import('naive-ui')['NCard']
|
|
||||||
NDropdown: typeof import('naive-ui')['NDropdown']
|
|
||||||
NEllipsis: typeof import('naive-ui')['NEllipsis']
|
|
||||||
NEmpty: typeof import('naive-ui')['NEmpty']
|
|
||||||
NGrid: typeof import('naive-ui')['NGrid']
|
|
||||||
NGridItem: typeof import('naive-ui')['NGridItem']
|
|
||||||
NIcon: typeof import('naive-ui')['NIcon']
|
|
||||||
NQrCode: typeof import('naive-ui')['NQrCode']
|
|
||||||
NScrollbar: typeof import('naive-ui')['NScrollbar']
|
|
||||||
NSpace: typeof import('naive-ui')['NSpace']
|
|
||||||
NSpin: typeof import('naive-ui')['NSpin']
|
|
||||||
NText: typeof import('naive-ui')['NText']
|
|
||||||
NTooltip: typeof import('naive-ui')['NTooltip']
|
|
||||||
ShareQrCodeCard: typeof import('./src/components/APP/ShareQrCodeCard.vue')['default']
|
|
||||||
ViewContainer: typeof import('./src/components/APP/ViewContainer.vue')['default']
|
|
||||||
ViewController: typeof import('./src/components/APP/ViewController.vue')['default']
|
|
||||||
}
|
|
||||||
}
|
|
||||||
File renamed without changes.
@@ -16,8 +16,6 @@ require (
|
|||||||
github.com/go-playground/universal-translator v0.18.1 // indirect
|
github.com/go-playground/universal-translator v0.18.1 // indirect
|
||||||
github.com/go-playground/validator/v10 v10.22.0 // indirect
|
github.com/go-playground/validator/v10 v10.22.0 // indirect
|
||||||
github.com/goccy/go-json v0.10.3 // indirect
|
github.com/goccy/go-json v0.10.3 // indirect
|
||||||
github.com/jchv/go-webview2 v0.0.0-20221223143126-dc24628cff85 // indirect
|
|
||||||
github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e // indirect
|
|
||||||
github.com/josephspurrier/goversioninfo v1.4.0 // indirect
|
github.com/josephspurrier/goversioninfo v1.4.0 // indirect
|
||||||
github.com/json-iterator/go v1.1.12 // indirect
|
github.com/json-iterator/go v1.1.12 // indirect
|
||||||
github.com/klauspost/cpuid/v2 v2.2.8 // indirect
|
github.com/klauspost/cpuid/v2 v2.2.8 // indirect
|
||||||
@@ -28,11 +26,10 @@ require (
|
|||||||
github.com/pelletier/go-toml/v2 v2.2.2 // indirect
|
github.com/pelletier/go-toml/v2 v2.2.2 // indirect
|
||||||
github.com/twitchyliquid64/golang-asm v0.15.1 // indirect
|
github.com/twitchyliquid64/golang-asm v0.15.1 // indirect
|
||||||
github.com/ugorji/go/codec v1.2.12 // indirect
|
github.com/ugorji/go/codec v1.2.12 // indirect
|
||||||
github.com/webview/webview v0.0.0-20250319170551-f1f42f0f164e // indirect
|
|
||||||
golang.org/x/arch v0.9.0 // indirect
|
golang.org/x/arch v0.9.0 // indirect
|
||||||
golang.org/x/crypto v0.26.0 // indirect
|
golang.org/x/crypto v0.26.0 // indirect
|
||||||
golang.org/x/net v0.28.0 // indirect
|
golang.org/x/net v0.28.0 // indirect
|
||||||
golang.org/x/sys v0.31.0 // indirect
|
golang.org/x/sys v0.24.0 // indirect
|
||||||
golang.org/x/text v0.17.0 // indirect
|
golang.org/x/text v0.17.0 // indirect
|
||||||
google.golang.org/protobuf v1.34.2 // indirect
|
google.golang.org/protobuf v1.34.2 // indirect
|
||||||
gopkg.in/yaml.v3 v3.0.1 // indirect
|
gopkg.in/yaml.v3 v3.0.1 // indirect
|
||||||
@@ -28,11 +28,6 @@ github.com/go-playground/validator/v10 v10.22.0/go.mod h1:dbuPbCMFw/DrkbEynArYaC
|
|||||||
github.com/goccy/go-json v0.10.3 h1:KZ5WoDbxAIgm2HNbYckL0se1fHD6rz5j4ywS6ebzDqA=
|
github.com/goccy/go-json v0.10.3 h1:KZ5WoDbxAIgm2HNbYckL0se1fHD6rz5j4ywS6ebzDqA=
|
||||||
github.com/goccy/go-json v0.10.3/go.mod h1:oq7eo15ShAhp70Anwd5lgX2pLfOS3QCiwU/PULtXL6M=
|
github.com/goccy/go-json v0.10.3/go.mod h1:oq7eo15ShAhp70Anwd5lgX2pLfOS3QCiwU/PULtXL6M=
|
||||||
github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
|
github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
|
||||||
github.com/jchv/go-webview2 v0.0.0-20221223143126-dc24628cff85 h1:t6lhRbwURcdWgp8OsJlq6sOfWMOXP21YuiCicjutHv4=
|
|
||||||
github.com/jchv/go-webview2 v0.0.0-20221223143126-dc24628cff85/go.mod h1:/BNVc0Sw3Wj6Sz9uSxPwhCEUhhWs92hPde75K2YV24A=
|
|
||||||
github.com/jchv/go-winloader v0.0.0-20200815041850-dec1ee9a7fd5/go.mod h1:alcuEEnZsY1WQsagKhZDsoPCRoOijYqhZvPwLG0kzVs=
|
|
||||||
github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e h1:Q3+PugElBCf4PFpxhErSzU3/PY5sFL5Z6rfv4AbGAck=
|
|
||||||
github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e/go.mod h1:alcuEEnZsY1WQsagKhZDsoPCRoOijYqhZvPwLG0kzVs=
|
|
||||||
github.com/josephspurrier/goversioninfo v1.4.0 h1:Puhl12NSHUSALHSuzYwPYQkqa2E1+7SrtAPJorKK0C8=
|
github.com/josephspurrier/goversioninfo v1.4.0 h1:Puhl12NSHUSALHSuzYwPYQkqa2E1+7SrtAPJorKK0C8=
|
||||||
github.com/josephspurrier/goversioninfo v1.4.0/go.mod h1:JWzv5rKQr+MmW+LvM412ToT/IkYDZjaclF2pKDss8IY=
|
github.com/josephspurrier/goversioninfo v1.4.0/go.mod h1:JWzv5rKQr+MmW+LvM412ToT/IkYDZjaclF2pKDss8IY=
|
||||||
github.com/json-iterator/go v1.1.12 h1:PV8peI4a0ysnczrg+LtxykD8LfKY9ML6u2jnxaEnrnM=
|
github.com/json-iterator/go v1.1.12 h1:PV8peI4a0ysnczrg+LtxykD8LfKY9ML6u2jnxaEnrnM=
|
||||||
@@ -69,22 +64,16 @@ github.com/twitchyliquid64/golang-asm v0.15.1 h1:SU5vSMR7hnwNxj24w34ZyCi/FmDZTkS
|
|||||||
github.com/twitchyliquid64/golang-asm v0.15.1/go.mod h1:a1lVb/DtPvCB8fslRZhAngC2+aY1QWCk3Cedj/Gdt08=
|
github.com/twitchyliquid64/golang-asm v0.15.1/go.mod h1:a1lVb/DtPvCB8fslRZhAngC2+aY1QWCk3Cedj/Gdt08=
|
||||||
github.com/ugorji/go/codec v1.2.12 h1:9LC83zGrHhuUA9l16C9AHXAqEV/2wBQ4nkvumAE65EE=
|
github.com/ugorji/go/codec v1.2.12 h1:9LC83zGrHhuUA9l16C9AHXAqEV/2wBQ4nkvumAE65EE=
|
||||||
github.com/ugorji/go/codec v1.2.12/go.mod h1:UNopzCgEMSXjBc6AOMqYvWC1ktqTAfzJZUZgYf6w6lg=
|
github.com/ugorji/go/codec v1.2.12/go.mod h1:UNopzCgEMSXjBc6AOMqYvWC1ktqTAfzJZUZgYf6w6lg=
|
||||||
github.com/webview/webview v0.0.0-20250319170551-f1f42f0f164e h1:Kz8a4/xfC3vH5sXgPfNfwu2qwwTUrD79N0bFRS6E4tI=
|
|
||||||
github.com/webview/webview v0.0.0-20250319170551-f1f42f0f164e/go.mod h1:Zk81X+8/mp/MNoeJXXK4Noydn8pcea09e00dFfAwrxg=
|
|
||||||
golang.org/x/arch v0.9.0 h1:ub9TgUInamJ8mrZIGlBG6/4TqWeMszd4N8lNorbrr6k=
|
golang.org/x/arch v0.9.0 h1:ub9TgUInamJ8mrZIGlBG6/4TqWeMszd4N8lNorbrr6k=
|
||||||
golang.org/x/arch v0.9.0/go.mod h1:FEVrYAQjsQXMVJ1nsMoVVXPZg6p2JE2mx8psSWTDQys=
|
golang.org/x/arch v0.9.0/go.mod h1:FEVrYAQjsQXMVJ1nsMoVVXPZg6p2JE2mx8psSWTDQys=
|
||||||
golang.org/x/crypto v0.26.0 h1:RrRspgV4mU+YwB4FYnuBoKsUapNIL5cohGAmSH3azsw=
|
golang.org/x/crypto v0.26.0 h1:RrRspgV4mU+YwB4FYnuBoKsUapNIL5cohGAmSH3azsw=
|
||||||
golang.org/x/crypto v0.26.0/go.mod h1:GY7jblb9wI+FOo5y8/S2oY4zWP07AkOJ4+jxCqdqn54=
|
golang.org/x/crypto v0.26.0/go.mod h1:GY7jblb9wI+FOo5y8/S2oY4zWP07AkOJ4+jxCqdqn54=
|
||||||
golang.org/x/net v0.28.0 h1:a9JDOJc5GMUJ0+UDqmLT86WiEy7iWyIhz8gz8E4e5hE=
|
golang.org/x/net v0.28.0 h1:a9JDOJc5GMUJ0+UDqmLT86WiEy7iWyIhz8gz8E4e5hE=
|
||||||
golang.org/x/net v0.28.0/go.mod h1:yqtgsTWOOnlGLG9GFRrK3++bGOUEkNBoHZc8MEDWPNg=
|
golang.org/x/net v0.28.0/go.mod h1:yqtgsTWOOnlGLG9GFRrK3++bGOUEkNBoHZc8MEDWPNg=
|
||||||
golang.org/x/sys v0.0.0-20200810151505-1b9f1253b3ed/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
|
|
||||||
golang.org/x/sys v0.0.0-20210218145245-beda7e5e158e/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
|
|
||||||
golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
|
golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
|
||||||
golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
|
golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
|
||||||
golang.org/x/sys v0.24.0 h1:Twjiwq9dn6R1fQcyiK+wQyHWfaz/BJB+YIpzU/Cv3Xg=
|
golang.org/x/sys v0.24.0 h1:Twjiwq9dn6R1fQcyiK+wQyHWfaz/BJB+YIpzU/Cv3Xg=
|
||||||
golang.org/x/sys v0.24.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
|
golang.org/x/sys v0.24.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
|
||||||
golang.org/x/sys v0.31.0 h1:ioabZlmFYtWhL+TRYpcnNlLwhyxaM9kWTDEmfnprqik=
|
|
||||||
golang.org/x/sys v0.31.0/go.mod h1:BJP2sWEmIv4KK5OTEluFJCKSidICx8ciO85XgH3Ak8k=
|
|
||||||
golang.org/x/text v0.17.0 h1:XtiM5bkSOt+ewxlOE/aE/AKEHibwj/6gvWMl9Rsh0Qc=
|
golang.org/x/text v0.17.0 h1:XtiM5bkSOt+ewxlOE/aE/AKEHibwj/6gvWMl9Rsh0Qc=
|
||||||
golang.org/x/text v0.17.0/go.mod h1:BuEKDfySbSR4drPmRPG/7iBdf8hvFMuRexcpahXilzY=
|
golang.org/x/text v0.17.0/go.mod h1:BuEKDfySbSR4drPmRPG/7iBdf8hvFMuRexcpahXilzY=
|
||||||
google.golang.org/protobuf v1.34.2 h1:6xV6lTsCfpGD21XK49h7MhtcApnLqkfYgPcdHftf6hg=
|
google.golang.org/protobuf v1.34.2 h1:6xV6lTsCfpGD21XK49h7MhtcApnLqkfYgPcdHftf6hg=
|
||||||
File renamed without changes.
-19
@@ -1,19 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href="./icon.ico" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>MiaoDirectory</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
|
||||||
<script type="module" src="/src/main.ts"></script>
|
|
||||||
</body>
|
|
||||||
<style>
|
|
||||||
#app{
|
|
||||||
height: 100vh;
|
|
||||||
width: 100vw;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</html>
|
|
||||||
@@ -22,7 +22,7 @@ var webFS embed.FS
|
|||||||
var port = ":17705"
|
var port = ":17705"
|
||||||
|
|
||||||
func main() {
|
func main() {
|
||||||
gin.SetMode(gin.ReleaseMode)
|
// gin.SetMode(gin.ReleaseMode)
|
||||||
|
|
||||||
fsOperateEventCenter := fsOperateEventCenter.NewFsOperateEventCenter()
|
fsOperateEventCenter := fsOperateEventCenter.NewFsOperateEventCenter()
|
||||||
|
|
||||||
@@ -31,7 +31,6 @@ func main() {
|
|||||||
|
|
||||||
router.GET("/query", api.QueryHandler(fsOperateEventCenter))
|
router.GET("/query", api.QueryHandler(fsOperateEventCenter))
|
||||||
router.GET("/get/*path", api.GetHandler)
|
router.GET("/get/*path", api.GetHandler)
|
||||||
router.HEAD("/get/*path", api.GetHandler)
|
|
||||||
router.POST("/mkdir/*path", api.MkdirHandler)
|
router.POST("/mkdir/*path", api.MkdirHandler)
|
||||||
router.POST("/upload/*path", api.UploadHandler)
|
router.POST("/upload/*path", api.UploadHandler)
|
||||||
router.POST("/cut/*path", api.CutHandler(fsOperateEventCenter))
|
router.POST("/cut/*path", api.CutHandler(fsOperateEventCenter))
|
||||||
@@ -39,14 +38,6 @@ func main() {
|
|||||||
router.POST("/rename/*path", api.RenameHandler(fsOperateEventCenter))
|
router.POST("/rename/*path", api.RenameHandler(fsOperateEventCenter))
|
||||||
router.POST("/delete/*path", api.DeleteHandler(fsOperateEventCenter))
|
router.POST("/delete/*path", api.DeleteHandler(fsOperateEventCenter))
|
||||||
|
|
||||||
// 添加获取所有可用地址的API
|
|
||||||
router.GET("/addresses", api.AddressesHandler(port))
|
|
||||||
|
|
||||||
// 添加map相关API
|
|
||||||
router.POST("/map/set/*key", api.MapSetHandler)
|
|
||||||
router.GET("/map/get/*key", api.MapGetHandler)
|
|
||||||
router.POST("/map/delete/*key", api.MapDeleteHandler)
|
|
||||||
|
|
||||||
// Redirect from '/' to '/web/'
|
// Redirect from '/' to '/web/'
|
||||||
router.GET("/", func(c *gin.Context) {
|
router.GET("/", func(c *gin.Context) {
|
||||||
c.Redirect(http.StatusMovedPermanently, "/web/")
|
c.Redirect(http.StatusMovedPermanently, "/web/")
|
||||||
@@ -62,22 +53,7 @@ func main() {
|
|||||||
|
|
||||||
address := "[::]" + port
|
address := "[::]" + port
|
||||||
printListeningAddresses(port)
|
printListeningAddresses(port)
|
||||||
|
router.Run(address)
|
||||||
// 在非阻塞的goroutine中启动服务器
|
|
||||||
go func() {
|
|
||||||
if err := router.Run(address); err != nil {
|
|
||||||
fmt.Printf("服务器启动失败: %v\n", err)
|
|
||||||
os.Exit(1)
|
|
||||||
}
|
|
||||||
}()
|
|
||||||
|
|
||||||
// 如果启用了webview，则启动webview窗口
|
|
||||||
if useWebView {
|
|
||||||
startWebView(port)
|
|
||||||
} else {
|
|
||||||
// 如果不使用webview，则阻塞主线程，保持服务器运行
|
|
||||||
select {}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
func corsMiddleware() gin.HandlerFunc {
|
func corsMiddleware() gin.HandlerFunc {
|
||||||
@@ -1,69 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "miao-directory-web",
|
|
||||||
"private": true,
|
|
||||||
"version": "0.0.0",
|
|
||||||
"type": "module",
|
|
||||||
"scripts": {
|
|
||||||
"dev": "vite",
|
|
||||||
"dev:host": "vite --host 0.0.0.0",
|
|
||||||
"build": "vue-tsc -b && vite build",
|
|
||||||
"build:auto": "pnpm run build && go env -w GOOS=windows GOARCH=amd64 && rm -rf ./src-server/web/* && cp -r ./dist/* ./src-server/web/ && cd ./src-server && go env -w GOOS=windows && go build -o ../miao-directory.exe",
|
|
||||||
"build:fast": "bash build.auto.release.sh -fast",
|
|
||||||
"build:normal": "bash build.auto.release.sh",
|
|
||||||
"preview": "vite preview",
|
|
||||||
"format": "prettier --write src/"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@codemirror/lang-go": "^6.0.1",
|
|
||||||
"@codemirror/lang-html": "^6.4.9",
|
|
||||||
"@codemirror/lang-javascript": "^6.2.2",
|
|
||||||
"@codemirror/lang-json": "^6.0.1",
|
|
||||||
"@codemirror/lang-markdown": "^6.2.5",
|
|
||||||
"@codemirror/lang-python": "^6.1.6",
|
|
||||||
"@codemirror/lang-sass": "^6.0.2",
|
|
||||||
"@codemirror/lang-sql": "^6.7.1",
|
|
||||||
"@codemirror/lang-vue": "^0.1.3",
|
|
||||||
"@codemirror/lang-xml": "^6.1.0",
|
|
||||||
"@codemirror/lang-yaml": "^6.1.1",
|
|
||||||
"@mediapipe/tasks-genai": "^0.10.22",
|
|
||||||
"@tailwindcss/vite": "^4.0.13",
|
|
||||||
"@types/sortablejs": "^1.15.8",
|
|
||||||
"@vicons/ionicons5": "^0.12.0",
|
|
||||||
"aes-js": "^3.1.2",
|
|
||||||
"aplayer": "^1.10.1",
|
|
||||||
"axios": "^1.7.3",
|
|
||||||
"codemirror": "^6.0.1",
|
|
||||||
"copy-to-clipboard": "^3.3.3",
|
|
||||||
"drag-drop-touch": "^1.3.1",
|
|
||||||
"localforage": "^1.10.0",
|
|
||||||
"lodash": "^4.17.21",
|
|
||||||
"markdown-it": "^14.1.0",
|
|
||||||
"naive-ui": "^2.39.0",
|
|
||||||
"pdfjs-dist": "^4.5.136",
|
|
||||||
"sass": "^1.77.8",
|
|
||||||
"sortablejs": "^1.15.3",
|
|
||||||
"tailwindcss": "^4.0.13",
|
|
||||||
"vue": "3.5.0",
|
|
||||||
"vue-codemirror": "^6.1.1",
|
|
||||||
"vue-draggable-plus": "^0.5.3",
|
|
||||||
"xgplayer": "^3.0.20",
|
|
||||||
"xgplayer-subtitles": "^3.0.20"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@types/aes-js": "^3.1.4",
|
|
||||||
"@types/lodash": "^4.17.7",
|
|
||||||
"@types/markdown-it": "^14.1.2",
|
|
||||||
"@types/node": "^22.1.0",
|
|
||||||
"@types/pdfjs-dist": "^2.10.378",
|
|
||||||
"@vitejs/plugin-vue": "^5.1.2",
|
|
||||||
"prettier": "^3.4.2",
|
|
||||||
"prettier-plugin-vue": "^1.1.6",
|
|
||||||
"rollup-plugin-visualizer": "^5.12.0",
|
|
||||||
"typescript": "^5.5.3",
|
|
||||||
"unplugin-auto-import": "^19.1.1",
|
|
||||||
"unplugin-vue-components": "^28.4.1",
|
|
||||||
"vite": "^5.4.0",
|
|
||||||
"vite-plugin-singlefile": "^2.0.2",
|
|
||||||
"vue-tsc": "^2.0.29"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Generated
-3317
File diff suppressed because it is too large.
Load diff
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
File renamed without changes.
File renamed without changes.
@@ -1,76 +0,0 @@
|
|||||||
package api
|
|
||||||
|
|
||||||
import (
|
|
||||||
"net"
|
|
||||||
"net/http"
|
|
||||||
"os"
|
|
||||||
"strings"
|
|
||||||
|
|
||||||
"github.com/gin-gonic/gin"
|
|
||||||
)
|
|
||||||
|
|
||||||
// AddressesHandler 返回服务器所有可用的访问地址
|
|
||||||
func AddressesHandler(serverPort string) gin.HandlerFunc {
|
|
||||||
return func(c *gin.Context) {
|
|
||||||
addresses := []gin.H{}
|
|
||||||
|
|
||||||
addresses = append(addresses, gin.H{
|
|
||||||
"title": "localhost",
|
|
||||||
"url": "http://localhost" + serverPort,
|
|
||||||
})
|
|
||||||
|
|
||||||
host, _ := os.Hostname()
|
|
||||||
|
|
||||||
addrs, _ := net.LookupHost(host)
|
|
||||||
for _, addr := range addrs {
|
|
||||||
if strings.Contains(addr, "%") {
|
|
||||||
addr = strings.Split(addr, "%")[0]
|
|
||||||
}
|
|
||||||
|
|
||||||
var url string
|
|
||||||
var title string
|
|
||||||
|
|
||||||
if strings.Contains(addr, ":") {
|
|
||||||
url = "http://[" + addr + "]" + serverPort
|
|
||||||
title = "IPv6 Address (" + addr + ")"
|
|
||||||
} else {
|
|
||||||
url = "http://" + addr + serverPort
|
|
||||||
title = "IPv4 Address (" + addr + ")"
|
|
||||||
}
|
|
||||||
addresses = append(addresses, gin.H{
|
|
||||||
"title": title,
|
|
||||||
"url": url,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
c.JSON(http.StatusOK, addresses)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 判断是否是私有IP地址
|
|
||||||
func isPrivateIP(ip string) bool {
|
|
||||||
ipAddr := net.ParseIP(ip)
|
|
||||||
if ipAddr == nil {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
// 检查常见的私有IP范围
|
|
||||||
// 10.0.0.0/8
|
|
||||||
if ipAddr[0] == 10 {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
// 172.16.0.0/12
|
|
||||||
if ipAddr[0] == 172 && ipAddr[1] >= 16 && ipAddr[1] <= 31 {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
// 192.168.0.0/16
|
|
||||||
if ipAddr[0] == 192 && ipAddr[1] == 168 {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
// 127.0.0.0/8 (本地回环)
|
|
||||||
if ipAddr[0] == 127 {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
@@ -1,142 +0,0 @@
|
|||||||
package api
|
|
||||||
|
|
||||||
import (
|
|
||||||
"crypto/md5"
|
|
||||||
"encoding/hex"
|
|
||||||
"io/ioutil"
|
|
||||||
"net/http"
|
|
||||||
"os"
|
|
||||||
"path/filepath"
|
|
||||||
|
|
||||||
"github.com/gin-gonic/gin"
|
|
||||||
)
|
|
||||||
|
|
||||||
// 内存存储
|
|
||||||
var memoryStorage = make(map[string][]byte)
|
|
||||||
|
|
||||||
// MapSetHandler 处理 /map/set/*key 请求
|
|
||||||
func MapSetHandler(c *gin.Context) {
|
|
||||||
key := c.Param("key")
|
|
||||||
if key == "" || key == "/" {
|
|
||||||
c.JSON(http.StatusBadRequest, gin.H{"message": "failed", "error": "Key is required"})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
key = key[1:] // 移除开头的"/"
|
|
||||||
|
|
||||||
// 获取disk参数
|
|
||||||
diskParam := c.DefaultQuery("disk", "0")
|
|
||||||
|
|
||||||
// 读取请求体数据
|
|
||||||
data, err := ioutil.ReadAll(c.Request.Body)
|
|
||||||
if err != nil {
|
|
||||||
c.JSON(http.StatusBadRequest, gin.H{"message": "failed", "error": "Failed to read request body"})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if diskParam == "1" {
|
|
||||||
// 保存到文件系统
|
|
||||||
cachePath := filepath.Join(staticPath, ".miaodir_cache")
|
|
||||||
|
|
||||||
// 确保缓存目录存在
|
|
||||||
if err := os.MkdirAll(cachePath, os.ModePerm); err != nil {
|
|
||||||
c.JSON(http.StatusInternalServerError, gin.H{"message": "failed", "error": "Failed to create cache directory"})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// 生成文件名
|
|
||||||
hasher := md5.New()
|
|
||||||
hasher.Write([]byte(key))
|
|
||||||
filename := hex.EncodeToString(hasher.Sum(nil))
|
|
||||||
|
|
||||||
// 写入文件
|
|
||||||
filePath := filepath.Join(cachePath, filename)
|
|
||||||
if err := ioutil.WriteFile(filePath, data, 0644); err != nil {
|
|
||||||
c.JSON(http.StatusInternalServerError, gin.H{"message": "failed", "error": "Failed to write file"})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// 保存到内存
|
|
||||||
memoryStorage[key] = data
|
|
||||||
}
|
|
||||||
|
|
||||||
c.JSON(http.StatusOK, gin.H{"message": "success"})
|
|
||||||
}
|
|
||||||
|
|
||||||
// MapGetHandler 处理 /map/get/*key 请求
|
|
||||||
func MapGetHandler(c *gin.Context) {
|
|
||||||
key := c.Param("key")
|
|
||||||
if key == "" || key == "/" {
|
|
||||||
c.JSON(http.StatusBadRequest, gin.H{"message": "failed", "error": "Key is required"})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
key = key[1:] // 移除开头的"/"
|
|
||||||
|
|
||||||
// 获取disk参数
|
|
||||||
diskParam := c.DefaultQuery("disk", "0")
|
|
||||||
|
|
||||||
var data []byte
|
|
||||||
var err error
|
|
||||||
|
|
||||||
if diskParam == "1" {
|
|
||||||
// 从文件系统获取
|
|
||||||
cachePath := filepath.Join(staticPath, ".miaodir_cache")
|
|
||||||
|
|
||||||
// 生成文件名
|
|
||||||
hasher := md5.New()
|
|
||||||
hasher.Write([]byte(key))
|
|
||||||
filename := hex.EncodeToString(hasher.Sum(nil))
|
|
||||||
|
|
||||||
// 读取文件
|
|
||||||
filePath := filepath.Join(cachePath, filename)
|
|
||||||
data, err = ioutil.ReadFile(filePath)
|
|
||||||
if err != nil {
|
|
||||||
c.JSON(http.StatusNotFound, gin.H{"message": "failed", "error": "Key not found"})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// 从内存获取
|
|
||||||
var exists bool
|
|
||||||
data, exists = memoryStorage[key]
|
|
||||||
if !exists {
|
|
||||||
c.JSON(http.StatusNotFound, gin.H{"message": "failed", "error": "Key not found"})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
c.Data(http.StatusOK, "application/octet-stream", data)
|
|
||||||
}
|
|
||||||
|
|
||||||
// MapDeleteHandler 处理 /map/delete/*key 请求
|
|
||||||
func MapDeleteHandler(c *gin.Context) {
|
|
||||||
key := c.Param("key")
|
|
||||||
if key == "" || key == "/" {
|
|
||||||
c.JSON(http.StatusBadRequest, gin.H{"message": "failed", "error": "Key is required"})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
key = key[1:] // 移除开头的"/"
|
|
||||||
|
|
||||||
// 获取disk参数
|
|
||||||
diskParam := c.DefaultQuery("disk", "0")
|
|
||||||
|
|
||||||
if diskParam == "1" {
|
|
||||||
// 从文件系统删除
|
|
||||||
cachePath := filepath.Join(staticPath, ".miaodir_cache")
|
|
||||||
|
|
||||||
// 生成文件名
|
|
||||||
hasher := md5.New()
|
|
||||||
hasher.Write([]byte(key))
|
|
||||||
filename := hex.EncodeToString(hasher.Sum(nil))
|
|
||||||
|
|
||||||
// 删除文件
|
|
||||||
filePath := filepath.Join(cachePath, filename)
|
|
||||||
if err := os.Remove(filePath); err != nil && !os.IsNotExist(err) {
|
|
||||||
c.JSON(http.StatusInternalServerError, gin.H{"message": "failed", "error": "Failed to delete file"})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// 从内存删除
|
|
||||||
delete(memoryStorage, key)
|
|
||||||
}
|
|
||||||
|
|
||||||
c.JSON(http.StatusOK, gin.H{"message": "success"})
|
|
||||||
}
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
//go:build webview
|
|
||||||
// +build webview
|
|
||||||
|
|
||||||
package main
|
|
||||||
|
|
||||||
import (
|
|
||||||
"fmt"
|
|
||||||
|
|
||||||
"github.com/jchv/go-webview2"
|
|
||||||
)
|
|
||||||
|
|
||||||
// 启动WebView窗口
|
|
||||||
func startWebView(port string) {
|
|
||||||
// 构建本地服务URL
|
|
||||||
serverURL := fmt.Sprintf("http://localhost%s", port)
|
|
||||||
|
|
||||||
// 创建webview窗口
|
|
||||||
w := webview2.NewWithOptions(webview2.WebViewOptions{
|
|
||||||
Debug: false,
|
|
||||||
AutoFocus: true,
|
|
||||||
WindowOptions: webview2.WindowOptions{
|
|
||||||
Title: "MiaoDirectory Server",
|
|
||||||
Width: 1024,
|
|
||||||
Height: 768,
|
|
||||||
Center: true,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
defer w.Destroy()
|
|
||||||
|
|
||||||
// 导航到本地服务器
|
|
||||||
w.Navigate(serverURL)
|
|
||||||
|
|
||||||
// 启动webview窗口
|
|
||||||
w.Run()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 定义是否使用WebView的变量
|
|
||||||
var useWebView = true
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
//go:build !webview
|
|
||||||
// +build !webview
|
|
||||||
|
|
||||||
package main
|
|
||||||
|
|
||||||
// 定义是否使用WebView的变量
|
|
||||||
var useWebView = false
|
|
||||||
|
|
||||||
// 空函数，在非webview版本中不执行任何操作
|
|
||||||
func startWebView(port string) {
|
|
||||||
// 在非webview版本中不做任何事情
|
|
||||||
}
|
|
||||||
-162
@@ -1,162 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import {
|
|
||||||
computed,
|
|
||||||
onMounted,
|
|
||||||
provide,
|
|
||||||
ref,
|
|
||||||
shallowRef,
|
|
||||||
useTemplateRef
|
|
||||||
} from 'vue'
|
|
||||||
import { QrCodeOutline, ExtensionPuzzleOutline } from '@vicons/ionicons5'
|
|
||||||
import type VirtualDirectory from './class/VirtualDirectory'
|
|
||||||
import type { VirtualFile } from './class/VirtualDirectory'
|
|
||||||
import MiaoMask from './components/miaoMask.vue'
|
|
||||||
import MiaoMessageProvider from './components/miaoAlertTipProvider.vue'
|
|
||||||
// import config from './config'
|
|
||||||
import useVirtualPages from './hooks/useVirtualPages'
|
|
||||||
import init from './hooks/init'
|
|
||||||
import usePluginCenter from './hooks/usePluginCenter'
|
|
||||||
import PluginCenter, { PluginGroup } from './class/PluginCenter'
|
|
||||||
import { renderIcon } from './utils/miaoTools'
|
|
||||||
import { DropdownMixedOption } from 'naive-ui/es/dropdown/src/interface'
|
|
||||||
import useRootVDirectory from './hooks/useRootVDirectory'
|
|
||||||
import ViewController from '@/components/APP/ViewController.vue'
|
|
||||||
import ViewContainer from '@/components/APP/ViewContainer.vue'
|
|
||||||
import ShareQrCodeCard from './components/APP/ShareQrCodeCard.vue'
|
|
||||||
|
|
||||||
// const { baseUrl } = config
|
|
||||||
|
|
||||||
const showModal = ref<boolean>(false)
|
|
||||||
const viewRef = ref<HTMLDivElement>()
|
|
||||||
const modalData = shallowRef<{
|
|
||||||
component: any
|
|
||||||
props: any
|
|
||||||
}>()
|
|
||||||
const messageProviderRef = useTemplateRef('messageProviderRef')
|
|
||||||
const views = useVirtualPages()
|
|
||||||
let pluginCenter = ref<PluginCenter>()
|
|
||||||
const rootDirectory = useRootVDirectory()
|
|
||||||
|
|
||||||
|
|
||||||
// component就是一个vue组件，类似于miaoDirectory
|
|
||||||
const createView = (
|
|
||||||
component: any,
|
|
||||||
name: string,
|
|
||||||
currentDirectories?: VirtualDirectory[],
|
|
||||||
currentFiles?: VirtualFile[],
|
|
||||||
index?: number
|
|
||||||
) => {
|
|
||||||
views.push(component, name, currentDirectories, currentFiles, { index })
|
|
||||||
}
|
|
||||||
|
|
||||||
const deleteView = (index: number) => {
|
|
||||||
views.deleteView(index)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 点击标题是隐藏其他标签或显示其他标签，还挺好用的
|
|
||||||
const handleClickTitle = (index: number) => {
|
|
||||||
let count = views._views.filter((v) => v.visible).length
|
|
||||||
let op =
|
|
||||||
!views._views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
|
|
||||||
let _index = 0
|
|
||||||
while (_index < views._views.length) {
|
|
||||||
if (_index !== index) {
|
|
||||||
views._views[_index].visible = op === 'hideOthers' ? false : true
|
|
||||||
} else {
|
|
||||||
views._views[_index].visible = true
|
|
||||||
}
|
|
||||||
_index += 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const openMenuOption = computed(
|
|
||||||
() =>
|
|
||||||
[
|
|
||||||
{
|
|
||||||
label: '分享',
|
|
||||||
key: 'share',
|
|
||||||
icon: renderIcon(QrCodeOutline)
|
|
||||||
},
|
|
||||||
pluginCenter.value
|
|
||||||
? {
|
|
||||||
label: '插件',
|
|
||||||
key: 'plugin',
|
|
||||||
children: [
|
|
||||||
...pluginCenter.value
|
|
||||||
.getUsablePlugin([], [], {
|
|
||||||
group: [PluginGroup.mainMenu]
|
|
||||||
})
|
|
||||||
.map((v) => ({
|
|
||||||
label: `${v.name}`,
|
|
||||||
key: `plugin:${v.key}`,
|
|
||||||
icon: v.icon ? renderIcon(v.icon) : undefined
|
|
||||||
}))
|
|
||||||
],
|
|
||||||
icon: renderIcon(ExtensionPuzzleOutline)
|
|
||||||
}
|
|
||||||
: undefined
|
|
||||||
].filter((v) => v) as DropdownMixedOption[]
|
|
||||||
)
|
|
||||||
|
|
||||||
const handleMenuSelect = async (key: string) => {
|
|
||||||
if (key === 'share') {
|
|
||||||
// 立即显示模态框
|
|
||||||
showModal.value = true
|
|
||||||
|
|
||||||
// 设置模态框数据，将serverAddressesService传递给组件
|
|
||||||
modalData.value = {
|
|
||||||
component: ShareQrCodeCard,
|
|
||||||
props: {}
|
|
||||||
}
|
|
||||||
} else if (key.startsWith('plugin:')) {
|
|
||||||
const pluginName = key.split(':')[1]
|
|
||||||
pluginCenter.value && pluginCenter.value.usePlugin(pluginName, [], [])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleModalClose = () => {
|
|
||||||
showModal.value = false
|
|
||||||
nextTick(() => {
|
|
||||||
modalData.value = undefined
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
// @ts-ignore
|
|
||||||
await init(messageProviderRef.value?.alertTip)
|
|
||||||
pluginCenter.value = usePluginCenter()
|
|
||||||
})
|
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
provide('globalAlertTip', messageProviderRef.value?.alertTip)
|
|
||||||
provide('rootDirectory', rootDirectory)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="view" ref="viewRef">
|
|
||||||
<miao-message-provider ref="messageProviderRef">
|
|
||||||
<ViewController :views="views" :handleClickTitle="handleClickTitle" :createView="createView"
|
|
||||||
:deleteView="deleteView" :openMenuOption="openMenuOption" :handleMenuSelect="handleMenuSelect" />
|
|
||||||
<ViewContainer :views="views" :deleteView="deleteView" :handleClickTitle="handleClickTitle" />
|
|
||||||
</miao-message-provider>
|
|
||||||
</div>
|
|
||||||
<!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
|
|
||||||
<MiaoMask v-model:show="showModal" @click="handleModalClose">
|
|
||||||
<component @click="(e: any) => e.stopPropagation()" :is="modalData?.component" v-bind="modalData?.props">
|
|
||||||
</component>
|
|
||||||
</MiaoMask>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@use "styles/default.scss";
|
|
||||||
|
|
||||||
$controller-height: 25px;
|
|
||||||
$tag-width: 170px;
|
|
||||||
|
|
||||||
.view {
|
|
||||||
background-color: #ffffff;
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,195 +0,0 @@
|
|||||||
import useVirtualPages from '@/hooks/useVirtualPages'
|
|
||||||
import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
|
|
||||||
import { ShallowRef, shallowRef } from 'vue'
|
|
||||||
import { alertTipType, usePluginHooksType } from '@/types/type'
|
|
||||||
import VirtualPage, { VirtualPages } from './VirtualPage'
|
|
||||||
import useRootVDirectory from '@/hooks/useRootVDirectory'
|
|
||||||
|
|
||||||
export enum PluginGroup {
|
|
||||||
default = 'default',
|
|
||||||
mainMenu = 'mainMenu',
|
|
||||||
// 导入的时候会立即执行函数一次
|
|
||||||
immediately = 'immediately'
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface registerComponentOption {
|
|
||||||
key: string
|
|
||||||
name: string
|
|
||||||
icon?: any
|
|
||||||
getComponent: () => Promise<any>
|
|
||||||
group?: PluginGroup[]
|
|
||||||
filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
|
|
||||||
disable?: boolean
|
|
||||||
exitConfirm?: boolean
|
|
||||||
// 若为true，则只会创建一个页面，当存在已创建页面则会直接将VFile和VDir加到curr里面
|
|
||||||
single?: boolean
|
|
||||||
priority?: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export type Plugin = {
|
|
||||||
// 用于显示的名字
|
|
||||||
name: string
|
|
||||||
// 代表插件的icon
|
|
||||||
icon?: ShallowRef<any>
|
|
||||||
// 是否禁用插件
|
|
||||||
disable: boolean
|
|
||||||
// 插件所属的group，用于区分插件使用的场合
|
|
||||||
group: PluginGroup[]
|
|
||||||
// 插件优先级
|
|
||||||
priority: number
|
|
||||||
// 判断在未禁用时是否可以使用这个组件
|
|
||||||
// 使用组件即调用下面的func
|
|
||||||
filter: (
|
|
||||||
VDirectories: VirtualDirectory[],
|
|
||||||
VFiles: VirtualFile[],
|
|
||||||
VPages: VirtualPages
|
|
||||||
) => boolean
|
|
||||||
func: (
|
|
||||||
VDirectories: VirtualDirectory[],
|
|
||||||
VFiles: VirtualFile[],
|
|
||||||
hooks: usePluginHooksType,
|
|
||||||
...args: any[]
|
|
||||||
) => void
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class PluginCenter {
|
|
||||||
constructor(globalAlertTip: alertTipType) {
|
|
||||||
this.pluginsMap = {}
|
|
||||||
this.globalAlertTip = globalAlertTip
|
|
||||||
}
|
|
||||||
pluginsMap: {
|
|
||||||
[key: string]: Plugin
|
|
||||||
}
|
|
||||||
|
|
||||||
globalAlertTip: alertTipType
|
|
||||||
|
|
||||||
register(key: string, plugin: Plugin) {
|
|
||||||
this.pluginsMap[key] = plugin
|
|
||||||
if (plugin.group.includes(PluginGroup.immediately)) {
|
|
||||||
this.usePlugin(key, [], [], this.usePluginHook)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
deregister(key: string) {
|
|
||||||
delete this.pluginsMap[key]
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 便捷地注册一个组件为插件，触发时直接用新页面打开，页面名为key
|
|
||||||
*/
|
|
||||||
registerComponent(option: registerComponentOption): void {
|
|
||||||
const {
|
|
||||||
key,
|
|
||||||
name,
|
|
||||||
getComponent,
|
|
||||||
icon,
|
|
||||||
filter,
|
|
||||||
group = [PluginGroup.default],
|
|
||||||
disable = false,
|
|
||||||
exitConfirm = false,
|
|
||||||
single = false,
|
|
||||||
priority = 0
|
|
||||||
} = option
|
|
||||||
let _component: any
|
|
||||||
const views = useVirtualPages()
|
|
||||||
this.register(key, {
|
|
||||||
name,
|
|
||||||
filter,
|
|
||||||
icon: shallowRef(icon),
|
|
||||||
group,
|
|
||||||
disable,
|
|
||||||
priority,
|
|
||||||
func: async (
|
|
||||||
VDirectories: VirtualDirectory[],
|
|
||||||
VFiles: VirtualFile[]
|
|
||||||
) => {
|
|
||||||
if (filter(VDirectories, VFiles) === false) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (_component === undefined) {
|
|
||||||
const setAlertTip = this.globalAlertTip(`加载 ${name} 插件中`)
|
|
||||||
_component = await getComponent()
|
|
||||||
setAlertTip &&
|
|
||||||
setAlertTip(`加载 ${name} 插件完成`, {
|
|
||||||
type: 'success',
|
|
||||||
timeout: 2000
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const _findRes = views.find(_component) as VirtualPage[]
|
|
||||||
if (single && _findRes.length !== 0) {
|
|
||||||
const view = _findRes[0]
|
|
||||||
view.currentFiles = [...view.currentFiles, ...VFiles]
|
|
||||||
view.currentDirectories = [
|
|
||||||
...view.currentDirectories,
|
|
||||||
...VDirectories
|
|
||||||
]
|
|
||||||
} else {
|
|
||||||
views.push(_component, key, VDirectories, VFiles, {
|
|
||||||
VirtualPageOption: {
|
|
||||||
exitConfirm,
|
|
||||||
allowCopy: single === false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
getUsablePlugin(
|
|
||||||
VDirectories: VirtualDirectory[],
|
|
||||||
VFiles: VirtualFile[],
|
|
||||||
option?: {
|
|
||||||
group?: PluginGroup[]
|
|
||||||
}
|
|
||||||
) {
|
|
||||||
const { group = [PluginGroup.default] } = option ?? {}
|
|
||||||
const usableList = []
|
|
||||||
const views = useVirtualPages()
|
|
||||||
for (let key of Object.keys(this.pluginsMap)) {
|
|
||||||
const _plugin = this.pluginsMap[key]
|
|
||||||
if (
|
|
||||||
!_plugin.disable &&
|
|
||||||
_plugin.group.filter((v) => group.includes(v)).length > 0 &&
|
|
||||||
_plugin.filter(VDirectories, VFiles, views)
|
|
||||||
) {
|
|
||||||
usableList.push(key)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const res = usableList.map((key) => ({
|
|
||||||
key,
|
|
||||||
...this.pluginsMap[key]
|
|
||||||
}))
|
|
||||||
res.sort((a, b) => b.priority - a.priority)
|
|
||||||
return res
|
|
||||||
}
|
|
||||||
|
|
||||||
get usePluginHook(): usePluginHooksType {
|
|
||||||
return {
|
|
||||||
globalAlertTip: this.globalAlertTip,
|
|
||||||
getViews: useVirtualPages,
|
|
||||||
getPluginCenter: () => this,
|
|
||||||
getRootVDirectory: () => useRootVDirectory()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// usePlugin(
|
|
||||||
// key: string,
|
|
||||||
// VDirectories?: VirtualDirectory[],
|
|
||||||
// VFiles?: VirtualFile[],
|
|
||||||
// ...args: any[]
|
|
||||||
// ): void
|
|
||||||
usePlugin(
|
|
||||||
key: string,
|
|
||||||
VDirectories?: VirtualDirectory[],
|
|
||||||
VFiles?: VirtualFile[],
|
|
||||||
...args: any[]
|
|
||||||
) {
|
|
||||||
this.pluginsMap[key].func(
|
|
||||||
VDirectories ?? [],
|
|
||||||
VFiles ?? [],
|
|
||||||
this.usePluginHook,
|
|
||||||
...args
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,169 +0,0 @@
|
|||||||
import generateId from '@/utils/generateId'
|
|
||||||
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
|
||||||
import VirtualDirectory from './VirtualDirectory'
|
|
||||||
|
|
||||||
const miaoFetchApi = useMiaoFetchApi()
|
|
||||||
|
|
||||||
export class UploadQueueItem {
|
|
||||||
constructor(
|
|
||||||
file: File,
|
|
||||||
targetDirectory: VirtualDirectory,
|
|
||||||
config?: {
|
|
||||||
onSuccess?: () => void
|
|
||||||
onFailed?: () => void
|
|
||||||
}
|
|
||||||
) {
|
|
||||||
this.file = file
|
|
||||||
this.targetDirectory = targetDirectory
|
|
||||||
this.uid = generateId()
|
|
||||||
this.status = 'waiting'
|
|
||||||
this.process = 0
|
|
||||||
this.onSuccess = config && config.onSuccess
|
|
||||||
this.onFailed = config && config.onFailed
|
|
||||||
}
|
|
||||||
uid: number
|
|
||||||
file: File
|
|
||||||
targetDirectory: VirtualDirectory
|
|
||||||
status: 'waiting' | 'uploading' | 'success' | 'failed'
|
|
||||||
process: number
|
|
||||||
failedReason: unknown | undefined
|
|
||||||
|
|
||||||
onSuccess?: () => void
|
|
||||||
onFailed?: () => void
|
|
||||||
|
|
||||||
_abort: (() => void | undefined) | undefined
|
|
||||||
_status: Promise<any> | undefined
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 开始上传文件
|
|
||||||
*/
|
|
||||||
startUpload() {
|
|
||||||
if (this.status === 'uploading') {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const { abort, response } = miaoFetchApi.upload(
|
|
||||||
this.file,
|
|
||||||
this.targetDirectory,
|
|
||||||
{
|
|
||||||
onProcess: (percent) => {
|
|
||||||
this.process = percent
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
this._abort = abort
|
|
||||||
this._status = response
|
|
||||||
this.status = 'uploading'
|
|
||||||
response
|
|
||||||
.then(() => {
|
|
||||||
this.status = 'success'
|
|
||||||
this.onSuccess && this.onSuccess()
|
|
||||||
this._abort = undefined
|
|
||||||
this._status = undefined
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
this.status = 'failed'
|
|
||||||
this.failedReason = e
|
|
||||||
this.onFailed && this.onFailed()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 终止上传文件
|
|
||||||
*/
|
|
||||||
abortUpload() {
|
|
||||||
this._abort && this._abort()
|
|
||||||
this.status = 'failed'
|
|
||||||
this.failedReason = 'abort'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class UploadQueue {
|
|
||||||
constructor() {
|
|
||||||
this.uid = generateId()
|
|
||||||
this.queue = []
|
|
||||||
this.mode = 'serial'
|
|
||||||
}
|
|
||||||
uid: number
|
|
||||||
queue: UploadQueueItem[]
|
|
||||||
current: UploadQueueItem | undefined
|
|
||||||
|
|
||||||
// 未来再去实现，目前就是串行的
|
|
||||||
// 好像也不用去实现
|
|
||||||
mode: 'serial' | 'parallel'
|
|
||||||
get status() {
|
|
||||||
for (let item of this.queue) {
|
|
||||||
if (item.status === 'uploading') {
|
|
||||||
return 'busy'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return 'free'
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取下一个需要被上传的item
|
|
||||||
*/
|
|
||||||
get nextUplpadItem() {
|
|
||||||
for (let item of this.queue) {
|
|
||||||
if (item.status === 'waiting') {
|
|
||||||
return item
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 开始串行的上传循环
|
|
||||||
*/
|
|
||||||
loop() {
|
|
||||||
if (this.status === 'busy') {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (this.nextUplpadItem) {
|
|
||||||
this.nextUplpadItem.startUpload()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 向上传文件队列输送一批新的文件
|
|
||||||
* @param {any} files 需要上传的文件
|
|
||||||
* @param {any} targetDirectory 目标文件夹
|
|
||||||
* @param {any} option 每个文件上传完成以后都会触发一遍的回调函数
|
|
||||||
* @returns {any}
|
|
||||||
*/
|
|
||||||
push(
|
|
||||||
files: File[],
|
|
||||||
targetDirectory: VirtualDirectory,
|
|
||||||
option?: {
|
|
||||||
/**
|
|
||||||
* 每个文件上传完成以后都会触发一遍的回调函数
|
|
||||||
*/
|
|
||||||
onFinish?: () => void
|
|
||||||
/**
|
|
||||||
* 是否立即开始上传，若否则按队列顺序一个一个上传
|
|
||||||
*/
|
|
||||||
immediately?: boolean
|
|
||||||
}
|
|
||||||
) {
|
|
||||||
const onFinish = option?.onFinish
|
|
||||||
const immediately = option?.immediately ?? false
|
|
||||||
const uploadQueue = files.map((file) => {
|
|
||||||
return new UploadQueueItem(file, targetDirectory, {
|
|
||||||
onSuccess: () => {
|
|
||||||
this.loop()
|
|
||||||
onFinish && onFinish()
|
|
||||||
},
|
|
||||||
onFailed: () => {
|
|
||||||
this.loop()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
this.queue.push(...uploadQueue)
|
|
||||||
if (!immediately) {
|
|
||||||
this.loop()
|
|
||||||
} else {
|
|
||||||
uploadQueue.forEach((item) => {
|
|
||||||
item.startUpload()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return uploadQueue
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,215 +0,0 @@
|
|||||||
import generateId from '@/utils/generateId'
|
|
||||||
import type { stats, file, directory } from '@/types/type.ts'
|
|
||||||
|
|
||||||
|
|
||||||
// const vDirectoryMap = new Map<string, VirtualDirectory>()
|
|
||||||
// const vFileMap = new Map<string, VirtualFile>()
|
|
||||||
|
|
||||||
export interface Tree {
|
|
||||||
name: string
|
|
||||||
type: 'directory'
|
|
||||||
path: string
|
|
||||||
stats: stats
|
|
||||||
files: {
|
|
||||||
name: string
|
|
||||||
type: 'file'
|
|
||||||
size: number
|
|
||||||
stats: stats
|
|
||||||
url: string
|
|
||||||
}[]
|
|
||||||
directories: Tree[]
|
|
||||||
}
|
|
||||||
|
|
||||||
export abstract class VirtualFileBase {
|
|
||||||
name: string
|
|
||||||
type: 'file' = 'file'
|
|
||||||
size: number
|
|
||||||
stats: stats
|
|
||||||
parent: VirtualDirectoryBase
|
|
||||||
id: number
|
|
||||||
storage: { [key: string]: any } = {}
|
|
||||||
|
|
||||||
constructor(name: string, size: number, stats: stats, parent: VirtualDirectoryBase) {
|
|
||||||
this.name = name
|
|
||||||
this.size = size
|
|
||||||
this.stats = stats
|
|
||||||
this.parent = parent
|
|
||||||
this.id = generateId()
|
|
||||||
}
|
|
||||||
|
|
||||||
get path() {
|
|
||||||
return `${this.parent.path}${this.name}`
|
|
||||||
}
|
|
||||||
|
|
||||||
abstract get url(): string;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 删除文件
|
|
||||||
* @returns {Promise<boolean>} 删除是否成功
|
|
||||||
*/
|
|
||||||
abstract delete(): Promise<boolean>;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 重命名文件
|
|
||||||
* @param {string} newName 新文件名
|
|
||||||
* @returns {Promise<boolean>} 重命名是否成功
|
|
||||||
*/
|
|
||||||
abstract rename(newName: string): Promise<boolean>;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 移动文件到目标目录
|
|
||||||
* @param {VirtualDirectoryBase} targetDir 目标目录
|
|
||||||
* @returns {Promise<boolean>} 移动是否成功
|
|
||||||
*/
|
|
||||||
abstract moveTo(targetDir: VirtualDirectoryBase): Promise<boolean>;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 复制文件到目标目录
|
|
||||||
* @param {VirtualDirectoryBase} targetDir 目标目录
|
|
||||||
* @returns {Promise<boolean>} 复制是否成功
|
|
||||||
*/
|
|
||||||
abstract copyTo(targetDir: VirtualDirectoryBase): Promise<boolean>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export abstract class VirtualDirectoryBase {
|
|
||||||
// 文件夹名
|
|
||||||
name: string
|
|
||||||
// 子文件
|
|
||||||
files: VirtualFileBase[] = []
|
|
||||||
// 子目录
|
|
||||||
directories: VirtualDirectoryBase[] = []
|
|
||||||
// 没啥意义，标注一下就是了
|
|
||||||
type: 'directory' = 'directory'
|
|
||||||
// 文件夹创建时间等杂项属性
|
|
||||||
stats: stats
|
|
||||||
// 父文件夹
|
|
||||||
parent?: VirtualDirectoryBase
|
|
||||||
|
|
||||||
_isUpdated: boolean = false
|
|
||||||
|
|
||||||
id: number
|
|
||||||
|
|
||||||
// 用来存储一些标记信息啥的
|
|
||||||
storage: { [key: string]: any } = {}
|
|
||||||
|
|
||||||
constructor(name: string, stats: stats, parent?: VirtualDirectoryBase) {
|
|
||||||
this.name = name
|
|
||||||
this.stats = stats
|
|
||||||
this.parent = parent
|
|
||||||
this.id = generateId()
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取相对于根目录的路径的层数
|
|
||||||
* 用于目录下文件定位
|
|
||||||
* @returns {string}
|
|
||||||
*/
|
|
||||||
get layer(): number {
|
|
||||||
return this.parent ? this.parent.layer + 1 : 0
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 相对于根目录的路径， 如: "/", "/123/321/"
|
|
||||||
* 用于目录下文件定位
|
|
||||||
* @returns {string}
|
|
||||||
*/
|
|
||||||
get path(): string {
|
|
||||||
if (!this.parent) {
|
|
||||||
return '/'
|
|
||||||
}
|
|
||||||
return `${this.parent.path}${this.name}/`
|
|
||||||
}
|
|
||||||
|
|
||||||
abstract get url(): string;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取从根目录开始的按顺序的文件夹
|
|
||||||
* @returns {VirtualDirectoryBase[]}
|
|
||||||
*/
|
|
||||||
get getParents(): VirtualDirectoryBase[] {
|
|
||||||
if (!this.parent) {
|
|
||||||
return [this]
|
|
||||||
}
|
|
||||||
return [...this.parent.getParents, this]
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取当前文件夹是否已经请求过至少一次数据
|
|
||||||
*/
|
|
||||||
get isUpdated() {
|
|
||||||
return this._isUpdated
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取 layer 级父文件夹, 如getParent(1)就返回父级
|
|
||||||
* @param {number} layer 需要跳转的层数
|
|
||||||
* @returns {VirtualDirectoryBase}
|
|
||||||
*/
|
|
||||||
getParent(layer: number): VirtualDirectoryBase {
|
|
||||||
if (layer <= 0 || !this.parent) {
|
|
||||||
return this
|
|
||||||
}
|
|
||||||
return this.parent.getParent(layer - 1)
|
|
||||||
}
|
|
||||||
|
|
||||||
get tree(): Tree {
|
|
||||||
return {
|
|
||||||
name: this.name,
|
|
||||||
type: this.type,
|
|
||||||
path: this.path,
|
|
||||||
stats: this.stats,
|
|
||||||
files:
|
|
||||||
this.files?.map((v) => ({
|
|
||||||
name: v.name,
|
|
||||||
type: v.type,
|
|
||||||
size: v.size,
|
|
||||||
stats: v.stats,
|
|
||||||
url: v.url
|
|
||||||
})) ?? [],
|
|
||||||
directories: this.directories?.map((v) => v.tree) ?? []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
hasChild(item: VirtualDirectoryBase | VirtualFileBase): boolean {
|
|
||||||
if (item.type === 'directory') {
|
|
||||||
return this.directories?.includes(item as VirtualDirectoryBase) ?? false
|
|
||||||
} else {
|
|
||||||
return this.files?.includes(item as VirtualFileBase) ?? false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
abstract updateContent(content: (file | directory)[]): void;
|
|
||||||
abstract update(): Promise<void>;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 删除目录
|
|
||||||
* @returns {Promise<boolean>} 删除是否成功
|
|
||||||
*/
|
|
||||||
abstract delete(): Promise<boolean>;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 重命名目录
|
|
||||||
* @param {string} newName 新目录名
|
|
||||||
* @returns {Promise<boolean>} 重命名是否成功
|
|
||||||
*/
|
|
||||||
abstract rename(newName: string): Promise<boolean>;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 移动目录到目标目录
|
|
||||||
* @param {VirtualDirectoryBase} targetDir 目标目录
|
|
||||||
* @returns {Promise<boolean>} 移动是否成功
|
|
||||||
*/
|
|
||||||
abstract mv(targetDir: VirtualDirectoryBase): Promise<boolean>;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 复制目录到目标目录
|
|
||||||
* @param {VirtualDirectoryBase} targetDir 目标目录
|
|
||||||
* @returns {Promise<boolean>} 复制是否成功
|
|
||||||
*/
|
|
||||||
abstract copy(targetDir: VirtualDirectoryBase): Promise<boolean>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export abstract class VirtualFile extends VirtualFileBase {}
|
|
||||||
export abstract class VirtualDirectory extends VirtualDirectoryBase {}
|
|
||||||
|
|
||||||
export default VirtualDirectory
|
|
||||||
@@ -1,183 +0,0 @@
|
|||||||
import { Component, reactive, shallowRef } from 'vue'
|
|
||||||
import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
|
|
||||||
import generateId from '@/utils/generateId'
|
|
||||||
|
|
||||||
export interface VirtualPageOption {
|
|
||||||
exitConfirm?: boolean
|
|
||||||
allowCopy?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ViewsPushOption {
|
|
||||||
index?: number
|
|
||||||
VirtualPageOption?: VirtualPageOption
|
|
||||||
}
|
|
||||||
|
|
||||||
const getRandomWebSafeColor = (() => {
|
|
||||||
const webSafeColors = ['#009900', '#999900', '#009999', '#990099', '#0000ee']
|
|
||||||
let counter = 0
|
|
||||||
return () => {
|
|
||||||
const color = webSafeColors[counter % webSafeColors.length]
|
|
||||||
counter += 1
|
|
||||||
return color
|
|
||||||
}
|
|
||||||
})()
|
|
||||||
|
|
||||||
export default class VirtualPage {
|
|
||||||
constructor(
|
|
||||||
component: Component,
|
|
||||||
initObjects: {
|
|
||||||
name: string
|
|
||||||
directories?: VirtualDirectory[]
|
|
||||||
files?: VirtualFile[]
|
|
||||||
option?: VirtualPageOption
|
|
||||||
}
|
|
||||||
) {
|
|
||||||
this.name = initObjects?.name
|
|
||||||
this.component = shallowRef(component)
|
|
||||||
this.currentDirectories = initObjects?.directories ?? []
|
|
||||||
this.currentFiles = initObjects?.files ?? []
|
|
||||||
this.visible = true
|
|
||||||
this.id = generateId()
|
|
||||||
this.refreshKey = Math.random()
|
|
||||||
this.color = getRandomWebSafeColor()
|
|
||||||
this.exitConfirm = initObjects?.option?.exitConfirm ?? false
|
|
||||||
this.allowCopy = initObjects?.option?.allowCopy ?? true
|
|
||||||
this.pageStorage = {}
|
|
||||||
}
|
|
||||||
// 页面使用的组件
|
|
||||||
component: Component
|
|
||||||
// 页面名
|
|
||||||
name: string
|
|
||||||
// 是否可见
|
|
||||||
visible: boolean
|
|
||||||
// 当前正在使用的文件夹
|
|
||||||
currentDirectories: VirtualDirectory[]
|
|
||||||
// 当前正在使用的文件
|
|
||||||
currentFiles: VirtualFile[]
|
|
||||||
// 页面数据存储
|
|
||||||
pageStorage: { [key: string]: any }
|
|
||||||
// 区分每一个页面的唯一id
|
|
||||||
id: number
|
|
||||||
// 当refreshKey改变时需要刷新页面，目前还没接入刷新
|
|
||||||
refreshKey: number
|
|
||||||
// 为了区分，每个虚拟页面都会分配一个color，这个color会体现在tab上
|
|
||||||
color: string
|
|
||||||
// 用于展示的title
|
|
||||||
_title?: string
|
|
||||||
// 关闭时是否需要确认（未实现）
|
|
||||||
exitConfirm: boolean
|
|
||||||
// 是否允许复制页面
|
|
||||||
allowCopy: boolean
|
|
||||||
|
|
||||||
get title() {
|
|
||||||
if (this._title) {
|
|
||||||
return this._title
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
this?.currentDirectories[0]?.name ??
|
|
||||||
this?.currentFiles[0]?.name ??
|
|
||||||
'未命名标签'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
setTitle(title: string) {
|
|
||||||
this._title = title
|
|
||||||
}
|
|
||||||
|
|
||||||
// 切换显示状态
|
|
||||||
switchShow() {
|
|
||||||
this.visible = !this.visible
|
|
||||||
}
|
|
||||||
|
|
||||||
// 刷新，不过好像没有用得到的时候吧
|
|
||||||
// 事实上也不应该用得到，因为更新应该是响应式的
|
|
||||||
refresh() {
|
|
||||||
this.refreshKey = Math.random()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export class VirtualPages {
|
|
||||||
constructor() {
|
|
||||||
this._views = reactive<VirtualPage[]>([])
|
|
||||||
}
|
|
||||||
_views: VirtualPage[]
|
|
||||||
|
|
||||||
get length() {
|
|
||||||
return this._views.length
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 查询一个页面位于_views中的次序
|
|
||||||
* @param {any} id 要查询的页面的id
|
|
||||||
* @returns {any}
|
|
||||||
*/
|
|
||||||
getIndex(id: number) {
|
|
||||||
for (let i in this._views) {
|
|
||||||
if (this._views[i].id === id) {
|
|
||||||
return parseInt(i)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return -1
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* 根据id得到view
|
|
||||||
* @param {any} id 要查询的页面的id
|
|
||||||
*/
|
|
||||||
getView(id: number) {
|
|
||||||
for (let v of this._views) {
|
|
||||||
if (v.id === id) {
|
|
||||||
return v
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return undefined
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 推入一个新的页面
|
|
||||||
*/
|
|
||||||
push(
|
|
||||||
component: Component,
|
|
||||||
name: string,
|
|
||||||
currentDirectories?: VirtualDirectory[],
|
|
||||||
currentFiles?: VirtualFile[],
|
|
||||||
option?: ViewsPushOption
|
|
||||||
) {
|
|
||||||
const { index = this.length, VirtualPageOption } = option ?? {}
|
|
||||||
this._views.splice(
|
|
||||||
index,
|
|
||||||
0,
|
|
||||||
reactive<VirtualPage>(
|
|
||||||
new VirtualPage(component, {
|
|
||||||
name,
|
|
||||||
directories: [...(currentDirectories ?? [])],
|
|
||||||
files: [...(currentFiles ?? [])],
|
|
||||||
option: VirtualPageOption
|
|
||||||
})
|
|
||||||
)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* 根据次序删除一个页面
|
|
||||||
*/
|
|
||||||
deleteView(index: number) {
|
|
||||||
this._views.splice(index, 1)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 返回第一个使用此组件的页面
|
|
||||||
*/
|
|
||||||
find(component: Component): VirtualPage[]
|
|
||||||
/**
|
|
||||||
* 通过页面名查找
|
|
||||||
*/
|
|
||||||
find(name: string): VirtualPage[]
|
|
||||||
|
|
||||||
find(input: unknown) {
|
|
||||||
// console.log(this)
|
|
||||||
if (typeof input === 'string') {
|
|
||||||
return this._views.filter((v) => v.component.name === input)
|
|
||||||
} else {
|
|
||||||
return this._views.filter((v) => v.component === input)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,339 +0,0 @@
|
|||||||
import { file, directory } from "@/types/type";
|
|
||||||
import { VirtualFileBase, VirtualDirectoryBase } from "./VirtualDirectory";
|
|
||||||
import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
|
|
||||||
import config from '@/config'
|
|
||||||
|
|
||||||
const miaoFetchApi = useMiaoFetchApi()
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 轮询事件直到完成
|
|
||||||
* @param eventId 事件ID
|
|
||||||
* @param maxRetries 最大重试次数
|
|
||||||
* @param interval 轮询间隔(毫秒)
|
|
||||||
* @returns 事件结果
|
|
||||||
*/
|
|
||||||
async function pollEventUntilComplete(eventId: number, maxRetries = 100, interval = 300) {
|
|
||||||
let _count = 0;
|
|
||||||
while (_count < maxRetries) {
|
|
||||||
try {
|
|
||||||
const { response } = miaoFetchApi.query(eventId);
|
|
||||||
const result = await response;
|
|
||||||
if (result.status === 'success' || result.status === 'failed') {
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
_count++;
|
|
||||||
await new Promise(_ => setTimeout(_, interval));
|
|
||||||
} catch (error) {
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
throw new Error('poll timeout');
|
|
||||||
}
|
|
||||||
|
|
||||||
export class VirtualRemoteFile extends VirtualFileBase {
|
|
||||||
constructor(info: file, parent: VirtualDirectoryBase) {
|
|
||||||
super(info.name, info.size, info.stats, parent)
|
|
||||||
}
|
|
||||||
|
|
||||||
get url() {
|
|
||||||
return `${config.api.get}${this.parent.path}${this.name}`
|
|
||||||
}
|
|
||||||
|
|
||||||
async delete(): Promise<boolean> {
|
|
||||||
try {
|
|
||||||
const { response } = miaoFetchApi.delete(this, {
|
|
||||||
retry: 5
|
|
||||||
});
|
|
||||||
const id = (await response).eventId;
|
|
||||||
|
|
||||||
const eventResult = await pollEventUntilComplete(id);
|
|
||||||
|
|
||||||
if (eventResult.status === 'success' && this.parent) {
|
|
||||||
await this.parent.update(); // 操作成功后更新父目录
|
|
||||||
}
|
|
||||||
|
|
||||||
return eventResult.status === 'success';
|
|
||||||
} catch (error) {
|
|
||||||
console.error('删除文件失败:', error);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async rename(newName: string): Promise<boolean> {
|
|
||||||
if (!newName) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const { response } = miaoFetchApi.rename(this, newName, {
|
|
||||||
retry: 5
|
|
||||||
});
|
|
||||||
const id = (await response).eventId;
|
|
||||||
|
|
||||||
const eventResult = await pollEventUntilComplete(id);
|
|
||||||
|
|
||||||
if (eventResult.status === 'success' && this.parent) {
|
|
||||||
await this.parent.update(); // 操作成功后更新父目录
|
|
||||||
}
|
|
||||||
|
|
||||||
return eventResult.status === 'success';
|
|
||||||
} catch (error) {
|
|
||||||
console.error('重命名文件失败:', error);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async moveTo(targetDir: VirtualDirectoryBase): Promise<boolean> {
|
|
||||||
if (this.parent === targetDir) {
|
|
||||||
return false; // 已经在目标目录中
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const _from = this.parent;
|
|
||||||
const { response } = miaoFetchApi.cut(this, targetDir);
|
|
||||||
const id = (await response).eventId;
|
|
||||||
|
|
||||||
const eventResult = await pollEventUntilComplete(id);
|
|
||||||
const success = eventResult.status === 'success';
|
|
||||||
|
|
||||||
if (success) {
|
|
||||||
if (_from) await _from.update(); // 更新源目录
|
|
||||||
await targetDir.update(); // 更新目标目录
|
|
||||||
}
|
|
||||||
|
|
||||||
return success;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('移动文件失败:', error);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async copyTo(targetDir: VirtualDirectoryBase): Promise<boolean> {
|
|
||||||
// 检查目标目录是否已存在同名文件
|
|
||||||
const existingFile = targetDir.files.find(file => file.name === this.name);
|
|
||||||
if (existingFile) {
|
|
||||||
// 存在同名文件，拒绝操作并显示提示
|
|
||||||
console.error(`目标目录已存在同名文件: ${this.name}`);
|
|
||||||
alert(`复制失败：目标目录已存在同名文件"${this.name}"`);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const { response } = miaoFetchApi.copy(this, targetDir);
|
|
||||||
const id = (await response).eventId;
|
|
||||||
|
|
||||||
const eventResult = await pollEventUntilComplete(id);
|
|
||||||
const success = eventResult.status === 'success';
|
|
||||||
|
|
||||||
if (success) {
|
|
||||||
await targetDir.update(); // 更新目标目录
|
|
||||||
}
|
|
||||||
|
|
||||||
return success;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('复制文件失败:', error);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export class VirtualRemoteDirectory extends VirtualDirectoryBase {
|
|
||||||
constructor(info: directory, parent?: VirtualDirectoryBase) {
|
|
||||||
super(info.name, info.stats, parent)
|
|
||||||
}
|
|
||||||
|
|
||||||
get url(): string {
|
|
||||||
return `${config.api.get}${this.path}`
|
|
||||||
}
|
|
||||||
|
|
||||||
updateContent(content: (file | directory)[]) {
|
|
||||||
this._isUpdated = true
|
|
||||||
|
|
||||||
const files = content.filter(item => item.type === 'file') as file[];
|
|
||||||
const directories = content.filter(item => item.type === 'directory') as directory[];
|
|
||||||
|
|
||||||
this.diffFiles(files);
|
|
||||||
this.diffDirectories(directories);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 文件diff算法，类似Vue的diff
|
|
||||||
* @param newFiles 新文件列表
|
|
||||||
*/
|
|
||||||
private diffFiles(newFiles: file[]) {
|
|
||||||
if (this.files.length === 0) {
|
|
||||||
this.files = newFiles.map(file => new VirtualRemoteFile(file, this));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const oldFiles = [...this.files];
|
|
||||||
const newFilesList: VirtualRemoteFile[] = [];
|
|
||||||
|
|
||||||
const oldKeyMap = new Map<string, VirtualRemoteFile>();
|
|
||||||
oldFiles.forEach(file => oldKeyMap.set(file.name, file as VirtualRemoteFile));
|
|
||||||
|
|
||||||
for (let i = 0; i < newFiles.length; i++) {
|
|
||||||
const newFile = newFiles[i];
|
|
||||||
const key = newFile.name;
|
|
||||||
|
|
||||||
const oldFile = oldKeyMap.get(key);
|
|
||||||
|
|
||||||
if (oldFile) {
|
|
||||||
oldFile.size = newFile.size;
|
|
||||||
oldFile.stats = newFile.stats;
|
|
||||||
newFilesList.push(oldFile);
|
|
||||||
// 从旧映射中删除，表示已处理
|
|
||||||
oldKeyMap.delete(key);
|
|
||||||
} else {
|
|
||||||
newFilesList.push(new VirtualRemoteFile(newFile, this));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.files = newFilesList;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 目录diff算法，类似Vue的diff
|
|
||||||
* @param newDirs 新目录列表
|
|
||||||
*/
|
|
||||||
private diffDirectories(newDirs: directory[]) {
|
|
||||||
if (this.directories.length === 0) {
|
|
||||||
this.directories = newDirs.map(dir => new VirtualRemoteDirectory(dir, this));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const oldDirs = [...this.directories];
|
|
||||||
const newDirsList: VirtualRemoteDirectory[] = [];
|
|
||||||
|
|
||||||
const oldKeyMap = new Map<string, VirtualRemoteDirectory>();
|
|
||||||
oldDirs.forEach(dir => oldKeyMap.set(dir.name, dir as VirtualRemoteDirectory));
|
|
||||||
|
|
||||||
for (let i = 0; i < newDirs.length; i++) {
|
|
||||||
const newDir = newDirs[i];
|
|
||||||
const key = newDir.name;
|
|
||||||
|
|
||||||
const oldDir = oldKeyMap.get(key);
|
|
||||||
|
|
||||||
if (oldDir) {
|
|
||||||
oldDir.stats = newDir.stats;
|
|
||||||
newDirsList.push(oldDir);
|
|
||||||
oldKeyMap.delete(key);
|
|
||||||
} else {
|
|
||||||
newDirsList.push(new VirtualRemoteDirectory(newDir, this));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.directories = newDirsList;
|
|
||||||
}
|
|
||||||
|
|
||||||
async update(): Promise<void> {
|
|
||||||
const data: (file | directory)[] = await miaoFetchApi.get(this)
|
|
||||||
this.updateContent(data)
|
|
||||||
}
|
|
||||||
|
|
||||||
async delete(): Promise<boolean> {
|
|
||||||
try {
|
|
||||||
const { response } = miaoFetchApi.delete(this, {
|
|
||||||
retry: 5
|
|
||||||
});
|
|
||||||
const id = (await response).eventId;
|
|
||||||
|
|
||||||
const eventResult = await pollEventUntilComplete(id);
|
|
||||||
|
|
||||||
if (eventResult.status === 'success' && this.parent) {
|
|
||||||
await this.parent.update(); // 操作成功后更新父目录
|
|
||||||
}
|
|
||||||
|
|
||||||
return eventResult.status === 'success';
|
|
||||||
} catch (error) {
|
|
||||||
console.error('删除目录失败:', error);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async rename(newName: string): Promise<boolean> {
|
|
||||||
if (!newName) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const { response } = miaoFetchApi.rename(this, newName, {
|
|
||||||
retry: 5
|
|
||||||
});
|
|
||||||
const id = (await response).eventId;
|
|
||||||
|
|
||||||
const eventResult = await pollEventUntilComplete(id);
|
|
||||||
|
|
||||||
if (eventResult.status === 'success' && this.parent) {
|
|
||||||
await this.parent.update(); // 操作成功后更新父目录
|
|
||||||
}
|
|
||||||
|
|
||||||
return eventResult.status === 'success';
|
|
||||||
} catch (error) {
|
|
||||||
console.error('重命名目录失败:', error);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async mv(targetDir: VirtualDirectoryBase): Promise<boolean> {
|
|
||||||
if (targetDir === this || targetDir.getParents.includes(this)) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.parent === targetDir) {
|
|
||||||
return false; // 已经在目标目录中
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const _from = this.parent;
|
|
||||||
const { response } = miaoFetchApi.cut(this, targetDir);
|
|
||||||
const id = (await response).eventId;
|
|
||||||
|
|
||||||
const eventResult = await pollEventUntilComplete(id);
|
|
||||||
const success = eventResult.status === 'success';
|
|
||||||
|
|
||||||
if (success) {
|
|
||||||
if (_from) await _from.update(); // 更新源目录
|
|
||||||
await targetDir.update(); // 更新目标目录
|
|
||||||
}
|
|
||||||
|
|
||||||
return success;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('移动目录失败:', error);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async copy(targetDir: VirtualDirectoryBase): Promise<boolean> {
|
|
||||||
if (targetDir === this || targetDir.getParents.includes(this)) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 检查目标目录是否已存在同名目录
|
|
||||||
const existingDir = targetDir.directories.find(dir => dir.name === this.name);
|
|
||||||
if (existingDir) {
|
|
||||||
// 存在同名目录，拒绝操作并显示提示
|
|
||||||
console.error(`目标位置已存在同名目录: ${this.name}`);
|
|
||||||
alert(`复制失败：目标位置已存在同名目录"${this.name}"`);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const { response } = miaoFetchApi.copy(this, targetDir);
|
|
||||||
const id = (await response).eventId;
|
|
||||||
|
|
||||||
const eventResult = await pollEventUntilComplete(id);
|
|
||||||
const success = eventResult.status === 'success';
|
|
||||||
|
|
||||||
if (success) {
|
|
||||||
// 不需要更新源目录，因为复制不会改变源目录
|
|
||||||
await targetDir.update(); // 更新目标目录
|
|
||||||
}
|
|
||||||
|
|
||||||
return success;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('复制目录失败:', error);
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,145 +0,0 @@
|
|||||||
<template>
|
|
||||||
<n-card title="分享链接" class="share-card">
|
|
||||||
<miao-message-provider ref="messageProviderRef">
|
|
||||||
<n-scrollbar style="max-height: 60vh;">
|
|
||||||
<n-space vertical>
|
|
||||||
<!-- <n-text>扫描下方二维码访问不同设备上的应用</n-text>
|
|
||||||
<n-divider /> -->
|
|
||||||
<n-spin :show="loading">
|
|
||||||
<div class="grid-container">
|
|
||||||
<div v-for="(item, index) in shareLinks" :key="index" class="grid-item">
|
|
||||||
<n-card embedded class="qrcode-card">
|
|
||||||
<template #header>
|
|
||||||
<div class="card-header bg-zinc-100 p-3 rounded-md">
|
|
||||||
<n-text>{{ item.title.split('(')[0] }}</n-text>
|
|
||||||
<n-tooltip trigger="hover" placement="top">
|
|
||||||
<template #trigger>
|
|
||||||
<n-button quaternary circle size="small" @click="copyUrl(item.url)">
|
|
||||||
<template #icon>
|
|
||||||
<n-icon><copy-outline /></n-icon>
|
|
||||||
</template>
|
|
||||||
</n-button>
|
|
||||||
</template>
|
|
||||||
复制链接
|
|
||||||
</n-tooltip>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div class="qrcode-container">
|
|
||||||
<n-qr-code :value="item.url" :size="200" error-correction-level="H"
|
|
||||||
style="box-sizing: content-box;" />
|
|
||||||
</div>
|
|
||||||
<template #footer>
|
|
||||||
<div @click="openUrl(item.url)" class="cursor-pointer hover:text-blue-500 hover:underline">
|
|
||||||
<n-ellipsis style="max-width: 100%" :tooltip="{ maxWidth: 300 }">
|
|
||||||
{{ item.url }}
|
|
||||||
</n-ellipsis>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</n-card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</n-spin>
|
|
||||||
</n-space>
|
|
||||||
</n-scrollbar>
|
|
||||||
</miao-message-provider>
|
|
||||||
</n-card>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { CopyOutline } from '@vicons/ionicons5'
|
|
||||||
import { onMounted, ref, useTemplateRef } from 'vue'
|
|
||||||
import useServerAddresses from '@/hooks/useServerAddresses'
|
|
||||||
import MiaoMessageProvider from '@/components/miaoAlertTipProvider.vue'
|
|
||||||
|
|
||||||
// 服务器地址服务
|
|
||||||
const serverAddressesService = useServerAddresses()
|
|
||||||
|
|
||||||
interface ShareLink {
|
|
||||||
title: string
|
|
||||||
url: string
|
|
||||||
}
|
|
||||||
|
|
||||||
// 加载状态
|
|
||||||
const loading = ref(true)
|
|
||||||
// 分享链接
|
|
||||||
const shareLinks = ref<ShareLink[]>([])
|
|
||||||
|
|
||||||
// 使用本地消息提示组件
|
|
||||||
const messageProviderRef = useTemplateRef<InstanceType<typeof MiaoMessageProvider>>('messageProviderRef')
|
|
||||||
|
|
||||||
// 组件挂载后获取地址列表
|
|
||||||
onMounted(async () => {
|
|
||||||
try {
|
|
||||||
await serverAddressesService.fetchAddresses()
|
|
||||||
shareLinks.value = serverAddressesService.addresses.value
|
|
||||||
} catch (error) {
|
|
||||||
// 使用本地的alertTip
|
|
||||||
messageProviderRef.value?.alertTip('获取分享链接失败', {
|
|
||||||
type: 'error',
|
|
||||||
timeout: 3000
|
|
||||||
})
|
|
||||||
console.error('获取分享链接失败:', error)
|
|
||||||
} finally {
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 复制URL到剪贴板
|
|
||||||
*/
|
|
||||||
const copyUrl = (url: string) => {
|
|
||||||
navigator.clipboard.writeText(url).then(
|
|
||||||
() => {
|
|
||||||
// 使用本地的alertTip
|
|
||||||
messageProviderRef.value?.alertTip('链接已复制到剪贴板', {
|
|
||||||
type: 'success',
|
|
||||||
timeout: 3000
|
|
||||||
})
|
|
||||||
},
|
|
||||||
(err) => {
|
|
||||||
console.error('复制失败:', err)
|
|
||||||
// 使用本地的alertTip
|
|
||||||
messageProviderRef.value?.alertTip('复制失败', {
|
|
||||||
type: 'error',
|
|
||||||
timeout: 3000
|
|
||||||
})
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const openUrl = (url: string) => {
|
|
||||||
window.open(url, '_blank')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.share-card {
|
|
||||||
min-width: 280px;
|
|
||||||
max-width: 90vw;
|
|
||||||
max-height: 80vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-container {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.qrcode-card {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.qrcode-container {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,79 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
const props = defineProps({
|
|
||||||
views: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
deleteView: {
|
|
||||||
type: Function,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="view-container">
|
|
||||||
<div
|
|
||||||
class="view-container-item"
|
|
||||||
v-for="(view, index) of props.views._views"
|
|
||||||
:class="!view.visible ? 'view-container-item-hidden' : ''"
|
|
||||||
:key="view.id">
|
|
||||||
<component
|
|
||||||
:is="view.component"
|
|
||||||
v-model:current-directories="view.currentDirectories"
|
|
||||||
v-model:current-files="view.currentFiles"
|
|
||||||
:id="view.id"
|
|
||||||
:color="view.color"
|
|
||||||
:view="view"
|
|
||||||
:views="props.views"
|
|
||||||
@exit="props.deleteView(index)"></component>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
$controller-height: 25px;
|
|
||||||
|
|
||||||
.view-container {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
height: calc(100% - $controller-height);
|
|
||||||
overflow-y: hidden;
|
|
||||||
overflow-x: overlay;
|
|
||||||
|
|
||||||
.view-container-item {
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
min-width: 180px;
|
|
||||||
opacity: 1;
|
|
||||||
transition:
|
|
||||||
flex 0.25s ease,
|
|
||||||
opacity 0.25s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-container-item-hidden {
|
|
||||||
flex: 0;
|
|
||||||
min-width: 0px;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
position: absolute;
|
|
||||||
width: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 滚动条轨道
|
|
||||||
&::-webkit-scrollbar-track {
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 小滑块
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
background: #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: #999999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,233 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { NIcon, NScrollbar, NDropdown } from 'naive-ui'
|
|
||||||
import {
|
|
||||||
EyeOffOutline,
|
|
||||||
EyeOutline,
|
|
||||||
CloseOutline,
|
|
||||||
CopyOutline,
|
|
||||||
EllipsisVertical
|
|
||||||
} from '@vicons/ionicons5'
|
|
||||||
import type { DropdownMixedOption } from 'naive-ui/es/dropdown/src/interface'
|
|
||||||
import type { VirtualPages } from '@/class/VirtualPage'
|
|
||||||
import type VirtualDirectory from '@/class/VirtualDirectory'
|
|
||||||
import type { VirtualFile } from '@/class/VirtualDirectory'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
views: VirtualPages
|
|
||||||
handleClickTitle: (index: number) => void
|
|
||||||
createView: (
|
|
||||||
component: any,
|
|
||||||
name: string,
|
|
||||||
currentDirectories?: VirtualDirectory[],
|
|
||||||
currentFiles?: VirtualFile[],
|
|
||||||
index?: number
|
|
||||||
) => void
|
|
||||||
deleteView: (index: number) => void
|
|
||||||
openMenuOption: DropdownMixedOption[]
|
|
||||||
handleMenuSelect: (key: string) => any
|
|
||||||
}>()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="view-controller">
|
|
||||||
<n-scrollbar x-scrollable>
|
|
||||||
<div class="tabs-container">
|
|
||||||
<transition-group name="tab">
|
|
||||||
<div
|
|
||||||
class="tab"
|
|
||||||
v-for="(view, index) of props.views._views"
|
|
||||||
:key="view.id">
|
|
||||||
<span
|
|
||||||
class="tab-title"
|
|
||||||
:title="view.title"
|
|
||||||
@click="props.handleClickTitle(index)">
|
|
||||||
{{
|
|
||||||
view.title.length > 5 && 0
|
|
||||||
? `${view.title.substring(0, 5)}...`
|
|
||||||
: view.title
|
|
||||||
}}
|
|
||||||
</span>
|
|
||||||
<div class="tab-control">
|
|
||||||
<div
|
|
||||||
class="tab-point"
|
|
||||||
:style="{ backgroundColor: view.color }"></div>
|
|
||||||
<n-icon
|
|
||||||
class="tag-control-icon icon"
|
|
||||||
@click="view.switchShow()">
|
|
||||||
<EyeOutline v-show="view.visible" class="icon-inner" />
|
|
||||||
<EyeOffOutline
|
|
||||||
v-show="!view.visible"
|
|
||||||
class="icon-inner" />
|
|
||||||
</n-icon>
|
|
||||||
<n-icon
|
|
||||||
class="tag-control-icon icon"
|
|
||||||
@click="
|
|
||||||
props.createView(
|
|
||||||
view.component,
|
|
||||||
view.name,
|
|
||||||
view.currentDirectories,
|
|
||||||
view.currentFiles,
|
|
||||||
index + 1
|
|
||||||
)
|
|
||||||
"
|
|
||||||
v-if="view.allowCopy">
|
|
||||||
<CopyOutline />
|
|
||||||
</n-icon>
|
|
||||||
<n-icon
|
|
||||||
class="tag-control-icon icon"
|
|
||||||
@click="props.deleteView(index)">
|
|
||||||
<CloseOutline class="icon-inner" />
|
|
||||||
</n-icon>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</transition-group>
|
|
||||||
</div>
|
|
||||||
</n-scrollbar>
|
|
||||||
<div class="view-controller-menu">
|
|
||||||
<div class="view-controller-menu-item">
|
|
||||||
<n-dropdown
|
|
||||||
trigger="click"
|
|
||||||
:options="props.openMenuOption"
|
|
||||||
@select="props.handleMenuSelect">
|
|
||||||
<n-icon class="icon">
|
|
||||||
<EllipsisVertical class="icon-inner" />
|
|
||||||
</n-icon>
|
|
||||||
</n-dropdown>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
$controller-height: 25px;
|
|
||||||
$tag-width: 170px;
|
|
||||||
|
|
||||||
.view-controller {
|
|
||||||
display: flex;
|
|
||||||
height: $controller-height;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #dadada;
|
|
||||||
|
|
||||||
.tabs-container {
|
|
||||||
display: flex;
|
|
||||||
margin-left: 5px;
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
.tab {
|
|
||||||
position: relative;
|
|
||||||
width: $tag-width;
|
|
||||||
height: $controller-height;
|
|
||||||
margin: 0 5px;
|
|
||||||
display: flex;
|
|
||||||
border-radius: 5px 5px 0 0;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.tab-title {
|
|
||||||
margin-left: 4px;
|
|
||||||
width: 90px;
|
|
||||||
user-select: none;
|
|
||||||
cursor: pointer;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
|
|
||||||
span {
|
|
||||||
user-select: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-point {
|
|
||||||
height: 5px;
|
|
||||||
aspect-ratio: 1;
|
|
||||||
border-radius: 66px;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-control {
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.tab-control-icon:not(:last-child) {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:last-child)::after {
|
|
||||||
content: '';
|
|
||||||
height: calc($controller-height * 0.6);
|
|
||||||
width: 1px;
|
|
||||||
border-right: 1px solid black;
|
|
||||||
position: absolute;
|
|
||||||
right: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-controller-menu {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 5px;
|
|
||||||
|
|
||||||
.view-controller-menu-item {
|
|
||||||
height: 100%;
|
|
||||||
aspect-ratio: 1;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
height: calc($controller-height * 0.6);
|
|
||||||
width: 1px;
|
|
||||||
border-right: 1px solid black;
|
|
||||||
position: absolute;
|
|
||||||
left: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
height: calc($controller-height * 0.7);
|
|
||||||
width: calc($controller-height * 0.7);
|
|
||||||
border-radius: 5px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: rgba(128, 128, 128, 0);
|
|
||||||
transition: background-color 0.3s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: rgba(128, 128, 128, 0.4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// transition动画相关
|
|
||||||
.view-controller {
|
|
||||||
.tabs-container {
|
|
||||||
.tab-move,
|
|
||||||
.tab-enter-active {
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-leave-active {
|
|
||||||
opacity: 0;
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-enter-from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-30px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-leave-active {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,158 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="miao-message-provider" ref="rootRef">
|
|
||||||
<slot></slot>
|
|
||||||
<transition-group
|
|
||||||
name="message-fade"
|
|
||||||
tag="div"
|
|
||||||
class="miao-message-provider-container">
|
|
||||||
<div
|
|
||||||
class="miao-message"
|
|
||||||
v-for="msg in messageList"
|
|
||||||
:key="msg.id"
|
|
||||||
:style="{ maxWidth: maxMessageWidth + 'px' }">
|
|
||||||
<n-icon class="miao-message-item" size="18" :color="msg.iconColor">
|
|
||||||
<component :is="msg.icon"></component>
|
|
||||||
</n-icon>
|
|
||||||
<div class="miao-message-item miao-message-item-content">
|
|
||||||
{{ msg.content }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</transition-group>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import generateId from '@/utils/generateId'
|
|
||||||
import { NIcon } from 'naive-ui'
|
|
||||||
import { computed, onMounted, ref, shallowReactive } from 'vue'
|
|
||||||
import {
|
|
||||||
InformationCircle,
|
|
||||||
CheckmarkCircle,
|
|
||||||
CloseCircle
|
|
||||||
} from '@vicons/ionicons5'
|
|
||||||
import { AlertTipMessageOptions } from '@/types/type'
|
|
||||||
|
|
||||||
interface Message {
|
|
||||||
icon: any
|
|
||||||
timer: any
|
|
||||||
iconColor: string
|
|
||||||
content: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const iconMap = {
|
|
||||||
info: { icon: InformationCircle, color: 'blue' },
|
|
||||||
success: { icon: CheckmarkCircle, color: 'green' },
|
|
||||||
error: { icon: CloseCircle, color: 'red' }
|
|
||||||
}
|
|
||||||
|
|
||||||
const messageMap = shallowReactive<Record<string, Message | undefined>>({})
|
|
||||||
const rootRef = ref<HTMLDivElement>()
|
|
||||||
const maxMessageWidth = ref<number>(-1)
|
|
||||||
|
|
||||||
const messageList = computed(() => {
|
|
||||||
return Object.keys(messageMap).map((v) => ({
|
|
||||||
id: v,
|
|
||||||
...messageMap[v]
|
|
||||||
}))
|
|
||||||
})
|
|
||||||
const alertTip = (content: string, options?: AlertTipMessageOptions) => {
|
|
||||||
let timer: any
|
|
||||||
const { timeout = 0, type = 'info', id = generateId() } = options ?? {}
|
|
||||||
if (timeout > 0) {
|
|
||||||
messageMap[id]?.timer && clearTimeout(messageMap[id]?.timer)
|
|
||||||
timer = setTimeout(() => {
|
|
||||||
delete messageMap[id]
|
|
||||||
}, timeout)
|
|
||||||
}
|
|
||||||
messageMap[id] = {
|
|
||||||
icon: iconMap[type].icon,
|
|
||||||
iconColor: iconMap[type].color,
|
|
||||||
content,
|
|
||||||
timer
|
|
||||||
}
|
|
||||||
return (newContent: string, newOptions?: AlertTipMessageOptions) => {
|
|
||||||
newOptions = newOptions ?? {}
|
|
||||||
newOptions.id = id
|
|
||||||
alertTip(newContent, newOptions)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
// const set = message('test', { timeout: 5000 })
|
|
||||||
// setTimeout(() => {
|
|
||||||
// set('miao', { type: 'success' })
|
|
||||||
// }, 1000);
|
|
||||||
const observer = new ResizeObserver((entries) => {
|
|
||||||
for (let entry of entries) {
|
|
||||||
maxMessageWidth.value = entry.contentRect.width * 0.8
|
|
||||||
}
|
|
||||||
})
|
|
||||||
if (rootRef.value) {
|
|
||||||
observer.observe(rootRef.value)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
defineExpose({ alertTip })
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.miao-message-provider {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.miao-message-provider-container {
|
|
||||||
position: absolute;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
left: 50%;
|
|
||||||
top: 30px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
overflow: visible;
|
|
||||||
z-index: 70582140539943419;
|
|
||||||
|
|
||||||
.miao-message {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: max-content;
|
|
||||||
background-color: rgb(249, 249, 249);
|
|
||||||
padding: 5px 10px;
|
|
||||||
background-color: rgb(255 255 255);
|
|
||||||
box-shadow:
|
|
||||||
0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
|
||||||
0 6px 16px 0 rgba(0, 0, 0, 0.08),
|
|
||||||
0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
|
||||||
border-radius: 5px;
|
|
||||||
user-select: none;
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
.miao-message-item {
|
|
||||||
margin: 0 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.miao-message-item-content {
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-fade-move,
|
|
||||||
.message-fade-enter-active,
|
|
||||||
.message-fade-leave-active {
|
|
||||||
transition: all 0.5s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-fade-enter-from,
|
|
||||||
.message-fade-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(30px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-fade-leave-active {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,98 +0,0 @@
|
|||||||
<!-- 基于naiveui的下拉菜单实现的自定义下拉菜单 -->
|
|
||||||
<!-- 支持长按和右键呼出下拉菜单 -->
|
|
||||||
<template>
|
|
||||||
<div
|
|
||||||
class="main"
|
|
||||||
@contextmenu="handleContextMenu"
|
|
||||||
@mouseleave="handleMainMouseLeave">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
<n-dropdown
|
|
||||||
placement="bottom-start"
|
|
||||||
trigger="manual"
|
|
||||||
:x="x"
|
|
||||||
:y="y"
|
|
||||||
:options="props.options"
|
|
||||||
:show="showContextMenu > 0"
|
|
||||||
:on-clickoutside="onClickoutside"
|
|
||||||
@select="handleSelect"
|
|
||||||
@mouseleave="showContextMenu -= 1"
|
|
||||||
@mouseenter="showContextMenu += 1" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { NDropdown } from 'naive-ui/es/dropdown'
|
|
||||||
import { DropdownOption } from 'naive-ui/es/dropdown'
|
|
||||||
import { nextTick, ref } from 'vue'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
options: DropdownOption[]
|
|
||||||
// 长按呼出右键菜单的时延，undefined时不生效
|
|
||||||
touchTimeOut?: number
|
|
||||||
}>()
|
|
||||||
const emit = defineEmits<{
|
|
||||||
select: [key: string]
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const x = ref(0)
|
|
||||||
const y = ref(0)
|
|
||||||
const showContextMenu = ref(0)
|
|
||||||
// 长按计时器
|
|
||||||
// let timer_touch: string | number | NodeJS.Timeout | undefined
|
|
||||||
|
|
||||||
const onClickoutside = async () => {
|
|
||||||
showContextMenu.value = 0
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleMainMouseLeave = async () => {
|
|
||||||
setTimeout(() => {
|
|
||||||
showContextMenu.value -= 1
|
|
||||||
}, 20)
|
|
||||||
// nextTick(()=>{
|
|
||||||
// showContextMenu.value -= 1
|
|
||||||
// })
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSelect = async (key: string) => {
|
|
||||||
emit('select', key)
|
|
||||||
showContextMenu.value = 0
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleContextMenu = (e: MouseEvent) => {
|
|
||||||
e.preventDefault()
|
|
||||||
showContextMenu.value = 0
|
|
||||||
nextTick().then(() => {
|
|
||||||
showContextMenu.value += 1
|
|
||||||
x.value = e.clientX
|
|
||||||
y.value = e.clientY
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// const handleTouchStart = (e: TouchEvent) => {
|
|
||||||
// if(props.touchTimeOut === undefined) {
|
|
||||||
// return
|
|
||||||
// }
|
|
||||||
// timer_touch ?? clearTimeout(timer_touch)
|
|
||||||
// timer_touch = setTimeout(() => {
|
|
||||||
// showContextMenu.value = 1
|
|
||||||
// x.value = e.targetTouches[0].clientX
|
|
||||||
// y.value = e.targetTouches[0].clientY
|
|
||||||
// }, props.touchTimeOut)
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const handleTouchEnd = () => {
|
|
||||||
// if(timer_touch) {
|
|
||||||
// clearTimeout(timer_touch)
|
|
||||||
// timer_touch = undefined
|
|
||||||
// }
|
|
||||||
|
|
||||||
// }
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.main {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div ref="divRef" @dragstart="onDs" :draggable="isDraggable ?? true">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory';
|
|
||||||
import useDataBus from '@/hooks/useDataBus';
|
|
||||||
import { onMounted, ref } from 'vue'
|
|
||||||
// import Sortable from 'sortablejs'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
isDraggable?: boolean,
|
|
||||||
bindVirtualFiles?: VirtualFile[],
|
|
||||||
bindVirtualDirectories?: VirtualDirectory[],
|
|
||||||
}>()
|
|
||||||
const emit = defineEmits<{
|
|
||||||
onDragStart: [e: DragEvent]
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const divRef = ref<HTMLDivElement>()
|
|
||||||
|
|
||||||
const onDs = (e: DragEvent) => {
|
|
||||||
emit('onDragStart', e)
|
|
||||||
const dataBus = useDataBus()
|
|
||||||
props.bindVirtualFiles && dataBus.set(
|
|
||||||
'dragData_vFiles',
|
|
||||||
props.bindVirtualFiles
|
|
||||||
)
|
|
||||||
props.bindVirtualDirectories && dataBus.set(
|
|
||||||
'dragData_vDirectory',
|
|
||||||
props.bindVirtualDirectories
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
divRef?.value?.addEventListener('dragstart', function (ev) {
|
|
||||||
var img = new Image()
|
|
||||||
img.src =
|
|
||||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cpath /%3E%3C/svg%3E"
|
|
||||||
ev?.dataTransfer?.setDragImage(img, 0, 0)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
@@ -1,131 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="miao-drop-container"
|
|
||||||
@dragover="handleDragOver"
|
|
||||||
@dragleave="handleDragLeave"
|
|
||||||
@drop="handleDrop">
|
|
||||||
<slot></slot>
|
|
||||||
<miao-mask v-model:show="showMask"></miao-mask>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import miaoMask from './miaoMask.vue'
|
|
||||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
|
||||||
import config from '@/config'
|
|
||||||
import useDataBus from '@/hooks/useDataBus'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
disable: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const dataBus = useDataBus()
|
|
||||||
|
|
||||||
const { uploadSizeLimit } = config
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
onFiles: [files: File[]]
|
|
||||||
onVirtualFiles: [vFiles: VirtualFile[]]
|
|
||||||
onVirtualDirectory: [vDirectory: VirtualDirectory[]]
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const showMask = ref<number>(0)
|
|
||||||
|
|
||||||
// File類型的數據可能爲文件夾，通過FileReader進行判斷
|
|
||||||
const isFile = (file: File) =>
|
|
||||||
new Promise((resolve) => {
|
|
||||||
const reader = new FileReader()
|
|
||||||
reader.onload = () => {
|
|
||||||
resolve(true)
|
|
||||||
reader.abort()
|
|
||||||
}
|
|
||||||
reader.onerror = () => {
|
|
||||||
resolve(false)
|
|
||||||
reader.abort()
|
|
||||||
}
|
|
||||||
reader.readAsText(file)
|
|
||||||
})
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 只保留文件，移去文件夹
|
|
||||||
* @param {File[]} files
|
|
||||||
*/
|
|
||||||
const removeDirectory = async (files: File[]) => {
|
|
||||||
let index = 0
|
|
||||||
while (index < files.length) {
|
|
||||||
const currentFile = files[index]
|
|
||||||
const _isFile = await isFile(currentFile)
|
|
||||||
if (_isFile) {
|
|
||||||
index += 1
|
|
||||||
continue
|
|
||||||
} else {
|
|
||||||
files.splice(index, 1)
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const check = (event: DragEvent) => {
|
|
||||||
return (
|
|
||||||
[
|
|
||||||
...(event.dataTransfer?.types?.filter((v) => v === 'Files') ?? []),
|
|
||||||
...(dataBus.get('dragData_vFiles') ?? []),
|
|
||||||
...(dataBus.get('dragData_vDirectory') ?? [])
|
|
||||||
].length !== 0
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDragOver = async (event: DragEvent) => {
|
|
||||||
if (props.disable || check(event) === false) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
event.preventDefault()
|
|
||||||
if (showMask.value === 1) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
showMask.value = 1
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDragLeave = async () => {
|
|
||||||
showMask.value = 0
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDrop = async (event: DragEvent) => {
|
|
||||||
if (props.disable || check(event) === false) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
showMask.value = 0
|
|
||||||
event.preventDefault()
|
|
||||||
event.stopPropagation()
|
|
||||||
// todo: uploadSize的限制不應該在這裏
|
|
||||||
const files = [...(event.dataTransfer?.files ?? [])].filter(
|
|
||||||
(file) => file.size < uploadSizeLimit
|
|
||||||
)
|
|
||||||
await removeDirectory(files)
|
|
||||||
const virtualFiles: VirtualFile[] = dataBus.pop('dragData_vFiles')
|
|
||||||
const virtualDirectory: VirtualDirectory[] = dataBus.pop(
|
|
||||||
'dragData_vDirectory'
|
|
||||||
)
|
|
||||||
// console.log({ virtualDirectory, virtualFiles })
|
|
||||||
if (files && files.length) {
|
|
||||||
emit('onFiles', files)
|
|
||||||
}
|
|
||||||
if (virtualFiles && virtualFiles.length) {
|
|
||||||
emit('onVirtualFiles', virtualFiles)
|
|
||||||
}
|
|
||||||
if (virtualDirectory && virtualDirectory.length) {
|
|
||||||
emit('onVirtualDirectory', virtualDirectory)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.miao-drop-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,132 +0,0 @@
|
|||||||
<!-- 只适合用于渲染过程较为复杂的组件，不然可能得不偿失
|
|
||||||
这么泛用的组件，性能差点也能理解 -->
|
|
||||||
<template>
|
|
||||||
<div
|
|
||||||
class="miao-lazy"
|
|
||||||
ref="miaoLazyRoot"
|
|
||||||
:style="
|
|
||||||
!show
|
|
||||||
? {
|
|
||||||
minHeight:
|
|
||||||
_autoHeight !== undefined ? _autoHeight : props.minHeight,
|
|
||||||
minWidth,
|
|
||||||
margin
|
|
||||||
}
|
|
||||||
: {}
|
|
||||||
">
|
|
||||||
<slot v-if="show" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
// disable: {
|
|
||||||
// type: Boolean,
|
|
||||||
// default: false,
|
|
||||||
// },
|
|
||||||
disableLazy: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
// 仅在内容未加载时生效，用于占位
|
|
||||||
minHeight: {
|
|
||||||
type: String,
|
|
||||||
default: 'none'
|
|
||||||
},
|
|
||||||
minWidth: {
|
|
||||||
type: String,
|
|
||||||
default: 'none'
|
|
||||||
},
|
|
||||||
margin: {
|
|
||||||
type: String,
|
|
||||||
default: 'none'
|
|
||||||
},
|
|
||||||
autoHeight: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const miaoLazyRoot = ref<HTMLDivElement>()
|
|
||||||
|
|
||||||
const _autoHeight = ref<string>()
|
|
||||||
|
|
||||||
const show = ref<boolean>(props.disableLazy)
|
|
||||||
|
|
||||||
const isVisible = (dom: HTMLDivElement) => {
|
|
||||||
const offset = dom.getBoundingClientRect().top
|
|
||||||
return offset > 0 && offset < 2000
|
|
||||||
}
|
|
||||||
|
|
||||||
const { showSlot, hideSlot, clearTimer } = (() => {
|
|
||||||
let timer: any
|
|
||||||
let timerInterval: any
|
|
||||||
const clearTimer = () => {
|
|
||||||
timer && clearTimeout(timer)
|
|
||||||
timerInterval && clearInterval(timerInterval)
|
|
||||||
timer = undefined
|
|
||||||
timerInterval = undefined
|
|
||||||
}
|
|
||||||
const hideSlot = () => {
|
|
||||||
clearTimer()
|
|
||||||
if (props.autoHeight) {
|
|
||||||
_autoHeight.value = `${miaoLazyRoot.value?.clientHeight}px`
|
|
||||||
}
|
|
||||||
show.value = false
|
|
||||||
}
|
|
||||||
const showSlot = () => {
|
|
||||||
if (show.value === true) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
clearTimer()
|
|
||||||
// timer = setTimeout(() => {
|
|
||||||
if (!miaoLazyRoot.value || isVisible(miaoLazyRoot.value) === false) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
show.value = true
|
|
||||||
timerInterval = setInterval(() => {
|
|
||||||
if (show.value === false || miaoLazyRoot.value === undefined) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (isVisible(miaoLazyRoot.value) === false) {
|
|
||||||
hideSlot()
|
|
||||||
}
|
|
||||||
}, 1000)
|
|
||||||
// if (props.autoHeight) {
|
|
||||||
// nextTick(() => {
|
|
||||||
// console.log(miaoLazyRoot.value?.clientHeight)
|
|
||||||
// _autoHeight.value = `${miaoLazyRoot.value?.clientHeight}px`
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
return { showSlot, hideSlot, clearTimer }
|
|
||||||
})()
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
if (show.value === false) {
|
|
||||||
let options = {
|
|
||||||
threshold: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
let observer: IntersectionObserver | undefined = new IntersectionObserver(
|
|
||||||
(entries) => {
|
|
||||||
if (entries[0].isIntersecting) {
|
|
||||||
showSlot()
|
|
||||||
// miaoLazyRoot.value && observer?.unobserve(miaoLazyRoot.value)
|
|
||||||
// observer = undefined
|
|
||||||
} else {
|
|
||||||
hideSlot()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
options
|
|
||||||
)
|
|
||||||
miaoLazyRoot.value && observer.observe(miaoLazyRoot.value)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
clearTimer()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
<template>
|
|
||||||
<transition name="transition">
|
|
||||||
<div class="mask-body" ref="maskBodyRef" v-show="showMask">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</transition>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
const maskBodyRef = ref<HTMLDivElement>()
|
|
||||||
|
|
||||||
const showMask = defineModel<boolean | number>('show', {
|
|
||||||
default: false,
|
|
||||||
required: true
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.mask-body {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
|
||||||
z-index: 7058214053994319;
|
|
||||||
|
|
||||||
// &-container {
|
|
||||||
|
|
||||||
// }
|
|
||||||
|
|
||||||
&-show {
|
|
||||||
display: flex;
|
|
||||||
transition: opacity 0.3s 0.01s;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-hide {
|
|
||||||
opacity: 0;
|
|
||||||
transition: display 0.01s 0.3s;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.transition-enter-active,
|
|
||||||
.transition-leave-active {
|
|
||||||
transition: opacity 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.transition-enter-from,
|
|
||||||
.transition-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,102 +0,0 @@
|
|||||||
<template>
|
|
||||||
<miao-mask v-model:show="showMask">
|
|
||||||
<n-card class="popup-card" :title="popupConfig?.title" size="medium">
|
|
||||||
{{ popupConfig?.content }}
|
|
||||||
<n-input
|
|
||||||
class="popup-input"
|
|
||||||
v-model:value="inputValue"
|
|
||||||
type="text"
|
|
||||||
v-bind="popupConfig?.inputProps"
|
|
||||||
passively-activated
|
|
||||||
autofocus
|
|
||||||
v-if="popupConfig?.inputProps" />
|
|
||||||
<div class="popup-button-container">
|
|
||||||
<n-button
|
|
||||||
class="popup-button-container-button"
|
|
||||||
v-for="option in popupConfig?.options"
|
|
||||||
:key="option.label"
|
|
||||||
:type="option.type"
|
|
||||||
@click="_resolve && _resolve(option.key)">
|
|
||||||
{{ option.label }}
|
|
||||||
</n-button>
|
|
||||||
</div>
|
|
||||||
</n-card>
|
|
||||||
</miao-mask>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref, nextTick } from 'vue'
|
|
||||||
import { NCard, NInput, NButton } from 'naive-ui'
|
|
||||||
import miaoMask from './miaoMask.vue'
|
|
||||||
import { InputProps } from 'naive-ui'
|
|
||||||
|
|
||||||
const showMask = ref(false)
|
|
||||||
const inputValue = ref<string>('')
|
|
||||||
const _resolve = ref()
|
|
||||||
|
|
||||||
type popupConfigType = {
|
|
||||||
title: string
|
|
||||||
content?: string
|
|
||||||
inputValue?: string
|
|
||||||
inputProps?: InputProps
|
|
||||||
options: {
|
|
||||||
label: string
|
|
||||||
key: unknown
|
|
||||||
type:
|
|
||||||
| 'default'
|
|
||||||
| 'tertiary'
|
|
||||||
| 'primary'
|
|
||||||
| 'success'
|
|
||||||
| 'info'
|
|
||||||
| 'warning'
|
|
||||||
| 'error'
|
|
||||||
}[]
|
|
||||||
}
|
|
||||||
|
|
||||||
const popupConfig = ref<popupConfigType>()
|
|
||||||
|
|
||||||
const popup = async (config: popupConfigType) => {
|
|
||||||
popupConfig.value = config
|
|
||||||
inputValue.value = config.inputValue ?? ''
|
|
||||||
showMask.value = true
|
|
||||||
const key = await new Promise((resolve: (key: unknown) => unknown) => {
|
|
||||||
_resolve.value = resolve
|
|
||||||
})
|
|
||||||
const text = inputValue.value
|
|
||||||
showMask.value = false
|
|
||||||
nextTick(() => {
|
|
||||||
inputValue.value = ''
|
|
||||||
_resolve.value = undefined
|
|
||||||
})
|
|
||||||
return {
|
|
||||||
text,
|
|
||||||
key
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
defineExpose({ popup })
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.popup-card {
|
|
||||||
width: 80%;
|
|
||||||
|
|
||||||
.popup-input {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-button-container {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.popup-button-container-button {
|
|
||||||
margin-top: 3px;
|
|
||||||
&:not(:last-child) {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
const baseUrl =
|
|
||||||
window.location.protocol +
|
|
||||||
'//' +
|
|
||||||
window.location.hostname +
|
|
||||||
(window.location.port ? ':' + window.location.port : '')
|
|
||||||
|
|
||||||
export default {
|
|
||||||
baseUrl,
|
|
||||||
uploadSizeLimit: 1024 * 1024 * 100,
|
|
||||||
api: {
|
|
||||||
get: '/get',
|
|
||||||
upload: '/upload',
|
|
||||||
delete: '/delete',
|
|
||||||
query: '/query',
|
|
||||||
rename: '/rename',
|
|
||||||
mkdir: '/mkdir',
|
|
||||||
cut: '/cut',
|
|
||||||
copy: '/copy',
|
|
||||||
addresses: '/addresses'
|
|
||||||
},
|
|
||||||
enableUpload: true
|
|
||||||
}
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
import { alertTipType } from '@/types/type'
|
|
||||||
import initPlugin from './init/initPlugin'
|
|
||||||
|
|
||||||
export default async function init(globalAlertTip: alertTipType) {
|
|
||||||
await initPlugin(globalAlertTip)
|
|
||||||
}
|
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
import usePluginCenter, { initPluginCenter } from '@/hooks/usePluginCenter'
|
|
||||||
import { Plugin, registerComponentOption } from '@/class/PluginCenter'
|
|
||||||
import { alertTipType, PluginExportType } from '@/types/type'
|
|
||||||
|
|
||||||
const initPlugin = async (globalAlertTip: alertTipType) => {
|
|
||||||
initPluginCenter(globalAlertTip)
|
|
||||||
const modulesFiles = import.meta.glob('@/plugins/**/export*.ts', {
|
|
||||||
eager: true
|
|
||||||
})
|
|
||||||
const pluginCenter = usePluginCenter()
|
|
||||||
for (let pluginConfig of Object.values(modulesFiles)) {
|
|
||||||
try {
|
|
||||||
const _config = pluginConfig as {
|
|
||||||
default: registerComponentOption | Plugin
|
|
||||||
type: PluginExportType
|
|
||||||
key?: string
|
|
||||||
}
|
|
||||||
const { type, key = `${Math.random()}` } = _config
|
|
||||||
if (type === PluginExportType.component) {
|
|
||||||
pluginCenter.registerComponent(
|
|
||||||
_config.default as registerComponentOption
|
|
||||||
)
|
|
||||||
} else if (type === PluginExportType.default) {
|
|
||||||
pluginCenter.register(key as string, _config.default as Plugin)
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error(`插件 ${pluginConfig} 初始化失败`, error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default initPlugin
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
import { reactive } from 'vue'
|
|
||||||
|
|
||||||
let dataStorage: {
|
|
||||||
[key: string | number]: any
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function useDataBus() {
|
|
||||||
if (dataStorage === undefined) {
|
|
||||||
dataStorage = reactive({})
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
set(key: string | number, value: any) {
|
|
||||||
dataStorage[key] = value
|
|
||||||
return value
|
|
||||||
},
|
|
||||||
pop(key: string | number) {
|
|
||||||
const value = dataStorage[key]
|
|
||||||
dataStorage[key] = undefined
|
|
||||||
return value
|
|
||||||
},
|
|
||||||
get(key: string | number) {
|
|
||||||
const value = dataStorage[key]
|
|
||||||
return value
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,333 +0,0 @@
|
|||||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
|
||||||
import {
|
|
||||||
getOption,
|
|
||||||
getResponse,
|
|
||||||
miaoFetchConfig,
|
|
||||||
deleteOption,
|
|
||||||
uploadOption,
|
|
||||||
queryOption,
|
|
||||||
renameOption,
|
|
||||||
cutOption,
|
|
||||||
mkdirOption,
|
|
||||||
getFileOption,
|
|
||||||
copyOption
|
|
||||||
} from '@/types/fetch'
|
|
||||||
import Config from '@/config'
|
|
||||||
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
|
|
||||||
|
|
||||||
export const useMiaoFetch = (option?: miaoFetchConfig) => {
|
|
||||||
const retry = option?.retry ?? 0
|
|
||||||
const controller = new AbortController()
|
|
||||||
let flag = true
|
|
||||||
return {
|
|
||||||
miaoFetch: async (
|
|
||||||
config: AxiosRequestConfig<any>
|
|
||||||
): Promise<AxiosResponse<any, any>> => {
|
|
||||||
let counter = 0
|
|
||||||
let response: any
|
|
||||||
let errList = []
|
|
||||||
while (flag && counter <= retry) {
|
|
||||||
try {
|
|
||||||
response = await axios({
|
|
||||||
...config,
|
|
||||||
signal: controller.signal
|
|
||||||
})
|
|
||||||
return response
|
|
||||||
} catch (_e) {
|
|
||||||
errList.push(_e)
|
|
||||||
counter += 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
throw errList
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 强制终止miaoFetch
|
|
||||||
*/
|
|
||||||
abortMiaoFetch: () => {
|
|
||||||
flag = false
|
|
||||||
controller.abort()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const miaoFetchApi = {
|
|
||||||
/**
|
|
||||||
* 获取对应文件夹下的数据
|
|
||||||
*/
|
|
||||||
async get(
|
|
||||||
vDirectory: VirtualDirectory,
|
|
||||||
option?: getOption
|
|
||||||
): Promise<getResponse> {
|
|
||||||
const { baseUrl, api } = Config
|
|
||||||
const url = `${baseUrl}${api.get}${vDirectory.path}`
|
|
||||||
const retry = option?.retry ?? 0
|
|
||||||
|
|
||||||
const { miaoFetch } = useMiaoFetch({
|
|
||||||
retry
|
|
||||||
})
|
|
||||||
const response = await miaoFetch({
|
|
||||||
url
|
|
||||||
})
|
|
||||||
return response.data
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取对应文件下的数据
|
|
||||||
*/
|
|
||||||
getFile(vFile: VirtualFile, option?: getFileOption) {
|
|
||||||
// const { baseUrl, api } = Config
|
|
||||||
const url = vFile.url
|
|
||||||
const retry = option?.retry ?? 0
|
|
||||||
const axiosOption = option?.axiosOption ?? {}
|
|
||||||
|
|
||||||
const { miaoFetch, abortMiaoFetch: abort } = useMiaoFetch({
|
|
||||||
retry
|
|
||||||
})
|
|
||||||
const response = miaoFetch({
|
|
||||||
url,
|
|
||||||
responseType: 'arraybuffer',
|
|
||||||
onDownloadProgress(progressEvent) {
|
|
||||||
option &&
|
|
||||||
option.onProcess &&
|
|
||||||
option.onProcess(
|
|
||||||
progressEvent.total
|
|
||||||
? progressEvent.loaded / progressEvent.total
|
|
||||||
: -1
|
|
||||||
)
|
|
||||||
},
|
|
||||||
...axiosOption
|
|
||||||
})
|
|
||||||
return {
|
|
||||||
response: new Promise<Uint8Array>(async (resolve) => {
|
|
||||||
resolve(new Uint8Array((await response).data))
|
|
||||||
}),
|
|
||||||
abort
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 上传单个文件到对应文件夹, 后续要将data类型改成buffer以支持分片上传
|
|
||||||
* 正常上传文件请使用uploadQueue
|
|
||||||
*/
|
|
||||||
upload(data: File, targetVDir: VirtualDirectory, option?: uploadOption) {
|
|
||||||
const { baseUrl, api } = Config
|
|
||||||
const url = `${baseUrl}${api.upload}${targetVDir.path}`
|
|
||||||
const retry = option?.retry ?? 0
|
|
||||||
const { miaoFetch, abortMiaoFetch } = useMiaoFetch({
|
|
||||||
retry
|
|
||||||
})
|
|
||||||
const sizeTotal = data.size
|
|
||||||
|
|
||||||
const opType = option?.type ?? 'write'
|
|
||||||
|
|
||||||
const formData = new FormData()
|
|
||||||
|
|
||||||
formData.append('file', data)
|
|
||||||
// 必须这样传，不然中文乱码
|
|
||||||
formData.append('fileName', data.name)
|
|
||||||
formData.append('operateType', opType)
|
|
||||||
|
|
||||||
return {
|
|
||||||
abort: () => abortMiaoFetch(),
|
|
||||||
response: new Promise<{
|
|
||||||
message: 'success' | 'failed'
|
|
||||||
error?: string
|
|
||||||
}>(async (resolve) => {
|
|
||||||
const response = await miaoFetch({
|
|
||||||
url,
|
|
||||||
method: 'post',
|
|
||||||
data: formData,
|
|
||||||
onUploadProgress(progressEvent) {
|
|
||||||
option &&
|
|
||||||
option.onProcess &&
|
|
||||||
option.onProcess(progressEvent.loaded / sizeTotal)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
resolve(response.data)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 在目标文件夹下创建新的文件夹
|
|
||||||
*/
|
|
||||||
mkdir(
|
|
||||||
targetVDir: VirtualDirectory,
|
|
||||||
newFolderName: string,
|
|
||||||
option?: mkdirOption
|
|
||||||
) {
|
|
||||||
const { baseUrl, api } = Config
|
|
||||||
const url = `${baseUrl}${api.mkdir}${targetVDir.path}`
|
|
||||||
const { miaoFetch } = useMiaoFetch({
|
|
||||||
retry: option?.retry ?? 0
|
|
||||||
})
|
|
||||||
|
|
||||||
return new Promise<{
|
|
||||||
message: 'success' | 'failed'
|
|
||||||
error?: string
|
|
||||||
}>(async (resolve) => {
|
|
||||||
const response = await miaoFetch({
|
|
||||||
url,
|
|
||||||
method: 'post',
|
|
||||||
data: {
|
|
||||||
folderName: newFolderName
|
|
||||||
}
|
|
||||||
})
|
|
||||||
resolve(response.data)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 在目标文件夹下创建新的空文件，实际上是通过upload空文件实现
|
|
||||||
*/
|
|
||||||
mkFile(
|
|
||||||
targetVDir: VirtualDirectory,
|
|
||||||
newFileName: string,
|
|
||||||
option?: uploadOption
|
|
||||||
) {
|
|
||||||
const emptyBlob = new Blob([])
|
|
||||||
const emptyFile = new File([emptyBlob], newFileName, {
|
|
||||||
type: 'text/plain'
|
|
||||||
})
|
|
||||||
return this.upload(emptyFile, targetVDir, option)
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 删除对应的文件或文件夹，若为文件夹会递归删除
|
|
||||||
*/
|
|
||||||
delete(target: VirtualFile | VirtualDirectory, option?: deleteOption) {
|
|
||||||
const { baseUrl, api } = Config
|
|
||||||
const url = `${baseUrl}${api.delete}${target.path}`
|
|
||||||
const retry = option?.retry ?? 0
|
|
||||||
const { miaoFetch } = useMiaoFetch({
|
|
||||||
retry
|
|
||||||
})
|
|
||||||
|
|
||||||
return {
|
|
||||||
response: new Promise<{
|
|
||||||
eventId: number
|
|
||||||
}>(async (resolve) => {
|
|
||||||
const response = await miaoFetch({
|
|
||||||
url,
|
|
||||||
method: 'post'
|
|
||||||
})
|
|
||||||
resolve(response.data)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 重命名对应的文件或文件夹
|
|
||||||
*/
|
|
||||||
rename(
|
|
||||||
target: VirtualFile | VirtualDirectory,
|
|
||||||
newName: string,
|
|
||||||
option?: renameOption
|
|
||||||
) {
|
|
||||||
const { baseUrl, api } = Config
|
|
||||||
const url = `${baseUrl}${api.rename}${target.path}`
|
|
||||||
const retry = option?.retry ?? 0
|
|
||||||
const { miaoFetch } = useMiaoFetch({
|
|
||||||
retry
|
|
||||||
})
|
|
||||||
|
|
||||||
return {
|
|
||||||
response: new Promise<{
|
|
||||||
eventId: number
|
|
||||||
}>(async (resolve) => {
|
|
||||||
const response = await miaoFetch({
|
|
||||||
url,
|
|
||||||
method: 'post',
|
|
||||||
data: { newName }
|
|
||||||
})
|
|
||||||
resolve(response.data)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 剪切文件或文件夹
|
|
||||||
*/
|
|
||||||
cut(
|
|
||||||
target: VirtualFile | VirtualDirectory,
|
|
||||||
to: VirtualDirectory,
|
|
||||||
option?: cutOption
|
|
||||||
) {
|
|
||||||
const newPath = to.path
|
|
||||||
const { baseUrl, api } = Config
|
|
||||||
const url = `${baseUrl}${api.cut}${target.path}`
|
|
||||||
const retry = option?.retry ?? 0
|
|
||||||
const { miaoFetch } = useMiaoFetch({
|
|
||||||
retry
|
|
||||||
})
|
|
||||||
return {
|
|
||||||
response: new Promise<{
|
|
||||||
eventId: number
|
|
||||||
}>(async (resolve) => {
|
|
||||||
const response = await miaoFetch({
|
|
||||||
url,
|
|
||||||
method: 'post',
|
|
||||||
data: { newPath }
|
|
||||||
})
|
|
||||||
resolve(response.data)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 复制文件或文件夹
|
|
||||||
*/
|
|
||||||
copy(
|
|
||||||
target: VirtualFile | VirtualDirectory,
|
|
||||||
to: VirtualDirectory,
|
|
||||||
option?: copyOption
|
|
||||||
) {
|
|
||||||
const newPath = to.path
|
|
||||||
const { baseUrl, api } = Config
|
|
||||||
const url = `${baseUrl}${api.copy}${target.path}`
|
|
||||||
const retry = option?.retry ?? 0
|
|
||||||
const { miaoFetch } = useMiaoFetch({
|
|
||||||
retry
|
|
||||||
})
|
|
||||||
return {
|
|
||||||
response: new Promise<{
|
|
||||||
eventId: number
|
|
||||||
}>(async (resolve) => {
|
|
||||||
const response = await miaoFetch({
|
|
||||||
url,
|
|
||||||
method: 'post',
|
|
||||||
data: { newPath }
|
|
||||||
})
|
|
||||||
resolve(response.data)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 查询服务端操作事件的进展
|
|
||||||
*/
|
|
||||||
query(eventId: number, option?: queryOption) {
|
|
||||||
const { baseUrl, api } = Config
|
|
||||||
const url = `${baseUrl}${api.query}`
|
|
||||||
const retry = option?.retry ?? 0
|
|
||||||
const { miaoFetch } = useMiaoFetch({
|
|
||||||
retry
|
|
||||||
})
|
|
||||||
return {
|
|
||||||
response: new Promise<{
|
|
||||||
status: 'process' | 'success' | 'failed'
|
|
||||||
error?: unknown
|
|
||||||
}>(async (resolve) => {
|
|
||||||
const response = await miaoFetch({
|
|
||||||
url,
|
|
||||||
method: 'get',
|
|
||||||
params: {
|
|
||||||
id: eventId
|
|
||||||
}
|
|
||||||
})
|
|
||||||
resolve(response.data)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function useMiaoFetchApi() {
|
|
||||||
return miaoFetchApi
|
|
||||||
}
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
import PluginCenter from '@/class/PluginCenter'
|
|
||||||
import { alertTipType } from '@/types/type'
|
|
||||||
import { reactive } from 'vue'
|
|
||||||
|
|
||||||
let pluginCenter: PluginCenter
|
|
||||||
|
|
||||||
export const initPluginCenter = (globalAlertTip: alertTipType) => {
|
|
||||||
if (!pluginCenter) {
|
|
||||||
pluginCenter = reactive(new PluginCenter(globalAlertTip))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function usePluginCenter() {
|
|
||||||
return pluginCenter
|
|
||||||
}
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
import { VirtualRemoteDirectory } from '@/class/VirtualRemoteDirectory'
|
|
||||||
import { reactive } from 'vue'
|
|
||||||
|
|
||||||
const root = reactive(
|
|
||||||
new VirtualRemoteDirectory({
|
|
||||||
name: '根目录',
|
|
||||||
stats: {
|
|
||||||
atimeMs: 0,
|
|
||||||
birthtimeMs: 0,
|
|
||||||
ctimeMs: 0,
|
|
||||||
mtimeMs: 0
|
|
||||||
}
|
|
||||||
})
|
|
||||||
)
|
|
||||||
export default function useRootVDirectory() {
|
|
||||||
return root
|
|
||||||
}
|
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
import { ref } from 'vue'
|
|
||||||
import config from '@/config'
|
|
||||||
import { useMiaoFetch } from '@/hooks/useMiaoFetchApi'
|
|
||||||
|
|
||||||
export interface ServerAddress {
|
|
||||||
title: string
|
|
||||||
url: string
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取服务器所有可用的访问地址
|
|
||||||
*/
|
|
||||||
export default function useServerAddresses() {
|
|
||||||
const addresses = ref<ServerAddress[]>([])
|
|
||||||
const loading = ref(false)
|
|
||||||
const error = ref<Error | null>(null)
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 从服务器获取可用地址列表
|
|
||||||
*/
|
|
||||||
const fetchAddresses = async () => {
|
|
||||||
loading.value = true
|
|
||||||
error.value = null
|
|
||||||
|
|
||||||
try {
|
|
||||||
const { baseUrl, api } = config
|
|
||||||
const { miaoFetch } = useMiaoFetch({ retry: 1 })
|
|
||||||
|
|
||||||
const response = await miaoFetch({
|
|
||||||
url: `${baseUrl}${api.addresses}`
|
|
||||||
})
|
|
||||||
|
|
||||||
addresses.value = response.data as ServerAddress[]
|
|
||||||
} catch (err) {
|
|
||||||
console.error('获取服务器地址失败:', err)
|
|
||||||
error.value = err as Error
|
|
||||||
|
|
||||||
// 如果API失败，提供基本的地址
|
|
||||||
addresses.value = [
|
|
||||||
{ title: '当前地址', url: config.baseUrl },
|
|
||||||
{ title: '本地地址', url: 'http://localhost:17705' }
|
|
||||||
]
|
|
||||||
} finally {
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
addresses,
|
|
||||||
loading,
|
|
||||||
error,
|
|
||||||
fetchAddresses
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
import UploadQueue from '@/class/UploadQueue'
|
|
||||||
import { reactive } from 'vue'
|
|
||||||
|
|
||||||
let uploadQueue: UploadQueue
|
|
||||||
|
|
||||||
export default () => {
|
|
||||||
if (uploadQueue === undefined) {
|
|
||||||
uploadQueue = reactive(new UploadQueue())
|
|
||||||
}
|
|
||||||
return uploadQueue
|
|
||||||
}
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
import { VirtualPages } from '@/class/VirtualPage'
|
|
||||||
import { Reactive, reactive } from 'vue'
|
|
||||||
|
|
||||||
let views: Reactive<VirtualPages>
|
|
||||||
|
|
||||||
export default function useVirtualPages() {
|
|
||||||
if (views === undefined) {
|
|
||||||
// views = reactive<VirtualPage[]>([])
|
|
||||||
views = reactive(new VirtualPages())
|
|
||||||
}
|
|
||||||
return views
|
|
||||||
}
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
import { createApp } from 'vue'
|
|
||||||
import App from './App.vue'
|
|
||||||
import 'drag-drop-touch'
|
|
||||||
import '@/styles/tailwind.css'
|
|
||||||
|
|
||||||
createApp(App).mount('#app')
|
|
||||||
@@ -1,512 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="chat-container">
|
|
||||||
<div v-if="loading" class="loading-container">
|
|
||||||
<div class="loading-spinner"></div>
|
|
||||||
<div class="progress-container">
|
|
||||||
<div class="progress-bar" :style="{ width: loadingProgress + '%' }"></div>
|
|
||||||
</div>
|
|
||||||
<p class="loading-percentage">{{ loadingProgress }}%</p>
|
|
||||||
<p>{{ loadingState }}</p>
|
|
||||||
</div>
|
|
||||||
<div v-else class="chat-main">
|
|
||||||
<div class="chat-history" ref="chatHistoryRef">
|
|
||||||
<div v-for="(message, index) in chatHistory" :key="index"
|
|
||||||
:class="['message', message.role === 'user' ? 'user-message' : 'ai-message']">
|
|
||||||
<div class="message-content" v-if="message.role === 'user'">{{ message.content }}</div>
|
|
||||||
<div class="message-content markdown-content" v-else v-html="renderMarkdown(message.content)"></div>
|
|
||||||
</div>
|
|
||||||
<!-- 实时生成的内容 -->
|
|
||||||
<div v-if="generatingMessage" class="message ai-message">
|
|
||||||
<div class="message-content markdown-content" v-html="renderMarkdown(currentGeneratedText)"></div>
|
|
||||||
<div class="generating-indicator"><span>.</span><span>.</span><span>.</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="chat-input">
|
|
||||||
<textarea v-model="userInput" @keydown.enter.prevent="sendMessage" placeholder="输入消息..."
|
|
||||||
:disabled="processing"></textarea>
|
|
||||||
<button @click="sendMessage" :disabled="processing || !userInput.trim()">
|
|
||||||
发送
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory';
|
|
||||||
import { ref, watch, nextTick, onUnmounted } from 'vue';
|
|
||||||
import MarkdownIt from 'markdown-it';
|
|
||||||
import { FilesetResolver, LlmInference } from '@mediapipe/tasks-genai';
|
|
||||||
import VirtualPage from '@/class/VirtualPage';
|
|
||||||
|
|
||||||
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
|
||||||
required: true
|
|
||||||
});
|
|
||||||
|
|
||||||
const currentDirectories = defineModel<VirtualDirectory[]>(
|
|
||||||
'currentDirectories',
|
|
||||||
{
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
view: VirtualPage
|
|
||||||
}>()
|
|
||||||
|
|
||||||
// 初始化MarkdownIt
|
|
||||||
const md = new MarkdownIt({
|
|
||||||
html: true,
|
|
||||||
linkify: true,
|
|
||||||
typographer: true,
|
|
||||||
breaks: true
|
|
||||||
});
|
|
||||||
|
|
||||||
// 状态管理
|
|
||||||
const loading = ref(true);
|
|
||||||
const loadingState = ref('正在初始化模型...');
|
|
||||||
const loadingProgress = ref(0);
|
|
||||||
const processing = ref(false);
|
|
||||||
const userInput = ref('');
|
|
||||||
const chatHistory = ref<{ role: string, content: string }[]>([]);
|
|
||||||
const chatHistoryRef = ref<HTMLElement | null>(null);
|
|
||||||
const llmInstance = ref<any>(null);
|
|
||||||
|
|
||||||
const generatingMessage = ref(false);
|
|
||||||
const currentGeneratedText = ref('');
|
|
||||||
|
|
||||||
const updateLoadingProgress = (progress: number, state: string) => {
|
|
||||||
loadingProgress.value = progress;
|
|
||||||
loadingState.value = state;
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderMarkdown = (text: string) => {
|
|
||||||
return md.render(text);
|
|
||||||
};
|
|
||||||
|
|
||||||
const initializeModel = async () => {
|
|
||||||
if (!currentFiles.value || currentFiles.value.length === 0) {
|
|
||||||
loadingState.value = '错误：未找到模型文件';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const modelFile = currentFiles.value[0];
|
|
||||||
const modelName = modelFile.name.split('.model.bin')[0] && modelFile.name.split('.model.task')[0];
|
|
||||||
|
|
||||||
updateLoadingProgress(5, '正在加载MediaPipe LLM引擎...');
|
|
||||||
|
|
||||||
const simulateDownloadProgress = () => {
|
|
||||||
const totalTime = 2000; // 2秒
|
|
||||||
const interval = 100; // 每100毫秒更新一次
|
|
||||||
const steps = totalTime / interval;
|
|
||||||
const incrementPerStep = 15 / steps; // 从5%到20%
|
|
||||||
|
|
||||||
let currentStep = 0;
|
|
||||||
const timer = setInterval(() => {
|
|
||||||
if (currentStep >= steps) {
|
|
||||||
clearInterval(timer);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
loadingProgress.value = Math.min(20, 5 + currentStep * incrementPerStep);
|
|
||||||
currentStep++;
|
|
||||||
}, interval);
|
|
||||||
};
|
|
||||||
|
|
||||||
simulateDownloadProgress();
|
|
||||||
|
|
||||||
updateLoadingProgress(20, '正在初始化MediaPipe文件解析器...');
|
|
||||||
const genai = await FilesetResolver.forGenAiTasks(
|
|
||||||
currentDirectories.value[0]?.url ?? "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai@latest/wasm"
|
|
||||||
);
|
|
||||||
updateLoadingProgress(40, '正在加载模型文件...');
|
|
||||||
|
|
||||||
const simulateModelLoadingProgress = () => {
|
|
||||||
const totalTime = 3000; // 3秒
|
|
||||||
const interval = 100; // 每100毫秒更新一次
|
|
||||||
const steps = totalTime / interval;
|
|
||||||
const incrementPerStep = 45 / steps; // 从40%到85%
|
|
||||||
|
|
||||||
let currentStep = 0;
|
|
||||||
const timer = setInterval(() => {
|
|
||||||
if (currentStep >= steps) {
|
|
||||||
clearInterval(timer);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
loadingProgress.value = Math.min(85, 40 + currentStep * incrementPerStep);
|
|
||||||
currentStep++;
|
|
||||||
}, interval);
|
|
||||||
};
|
|
||||||
|
|
||||||
simulateModelLoadingProgress();
|
|
||||||
|
|
||||||
llmInstance.value = await LlmInference.createFromOptions(genai, {
|
|
||||||
baseOptions: {
|
|
||||||
modelAssetPath: modelFile.url
|
|
||||||
},
|
|
||||||
maxTokens: 2048,
|
|
||||||
temperature: 0.7
|
|
||||||
});
|
|
||||||
|
|
||||||
updateLoadingProgress(90, '初始化对话...');
|
|
||||||
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 500));
|
|
||||||
|
|
||||||
updateLoadingProgress(100, '加载完成！');
|
|
||||||
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 300));
|
|
||||||
|
|
||||||
loading.value = false;
|
|
||||||
chatHistory.value.push({
|
|
||||||
role: 'assistant',
|
|
||||||
content: `您好！我是${modelName}，有什么可以帮助您的？`
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
console.error('模型加载失败:', error);
|
|
||||||
loadingState.value = `模型加载失败: ${error instanceof Error ? error.message : String(error)}`;
|
|
||||||
loadingProgress.value = 0;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 发送消息
|
|
||||||
const sendMessage = async () => {
|
|
||||||
if (!userInput.value.trim() || processing.value) return;
|
|
||||||
|
|
||||||
const userMessage = userInput.value.trim();
|
|
||||||
userInput.value = '';
|
|
||||||
|
|
||||||
// 添加用户消息到历史
|
|
||||||
chatHistory.value.push({
|
|
||||||
role: 'user',
|
|
||||||
content: userMessage
|
|
||||||
});
|
|
||||||
|
|
||||||
processing.value = true;
|
|
||||||
generatingMessage.value = true;
|
|
||||||
currentGeneratedText.value = '';
|
|
||||||
|
|
||||||
try {
|
|
||||||
// 滚动到底部
|
|
||||||
await nextTick();
|
|
||||||
scrollToBottom();
|
|
||||||
|
|
||||||
// 构建提示词（包含历史对话）
|
|
||||||
// const history = chatHistory.value
|
|
||||||
// .map(msg => `${msg.role === 'user' ? '用户' : 'AI'}：${msg.content}`)
|
|
||||||
// .join('\n\n');
|
|
||||||
// const prompt = history + '\n\n用户：' + userMessage + '\n\nAI：';
|
|
||||||
|
|
||||||
// 使用MediaPipe生成回复
|
|
||||||
llmInstance.value.generateResponse(
|
|
||||||
userMessage,
|
|
||||||
null, // 不使用LoRA模型
|
|
||||||
(partialResult: string, done: boolean) => {
|
|
||||||
// 累加部分结果并更新UI
|
|
||||||
currentGeneratedText.value += partialResult;
|
|
||||||
const banStart = [',', '，']
|
|
||||||
for (const ban of banStart) {
|
|
||||||
if (currentGeneratedText.value.startsWith(ban)) {
|
|
||||||
currentGeneratedText.value = currentGeneratedText.value.slice(1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 滚动到底部以显示最新内容
|
|
||||||
nextTick().then(scrollToBottom);
|
|
||||||
|
|
||||||
if (done) {
|
|
||||||
// 添加完整回复到历史
|
|
||||||
chatHistory.value.push({
|
|
||||||
role: 'assistant',
|
|
||||||
content: currentGeneratedText.value
|
|
||||||
});
|
|
||||||
|
|
||||||
// 重置生成状态
|
|
||||||
generatingMessage.value = false;
|
|
||||||
processing.value = false;
|
|
||||||
currentGeneratedText.value = '';
|
|
||||||
|
|
||||||
nextTick().then(scrollToBottom);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('生成回复出错:', error);
|
|
||||||
|
|
||||||
// 添加错误信息
|
|
||||||
chatHistory.value.push({
|
|
||||||
role: 'assistant',
|
|
||||||
content: `抱歉，生成回复时出现错误: ${error instanceof Error ? error.message : String(error)}`
|
|
||||||
});
|
|
||||||
|
|
||||||
// 重置状态
|
|
||||||
generatingMessage.value = false;
|
|
||||||
processing.value = false;
|
|
||||||
currentGeneratedText.value = '';
|
|
||||||
|
|
||||||
nextTick().then(scrollToBottom);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 滚动到聊天历史底部
|
|
||||||
const scrollToBottom = () => {
|
|
||||||
if (chatHistoryRef.value) {
|
|
||||||
chatHistoryRef.value.scrollTop = chatHistoryRef.value.scrollHeight;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 清理资源函数
|
|
||||||
const cleanupResources = () => {
|
|
||||||
// 如果正在进行推理，停止推理过程
|
|
||||||
if (processing.value || generatingMessage.value) {
|
|
||||||
// 标记处理完成，停止状态更新
|
|
||||||
processing.value = false;
|
|
||||||
generatingMessage.value = false;
|
|
||||||
console.log('组件卸载：已停止正在进行的文本生成');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 释放LLM实例资源
|
|
||||||
if (llmInstance.value) {
|
|
||||||
const releaseResources = async () => {
|
|
||||||
try {
|
|
||||||
// 调用模型实例的清理方法（如果有）
|
|
||||||
if (typeof llmInstance.value.close === 'function') {
|
|
||||||
llmInstance.value.close();
|
|
||||||
}
|
|
||||||
// 置空实例引用
|
|
||||||
llmInstance.value = null;
|
|
||||||
console.log('组件卸载：已释放模型资源');
|
|
||||||
} catch (error) {
|
|
||||||
console.error('释放模型资源时出错:', error);
|
|
||||||
setTimeout(() => {
|
|
||||||
releaseResources();
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
releaseResources();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
props.view.setTitle('LLM Demo')
|
|
||||||
})
|
|
||||||
|
|
||||||
// 在组件卸载时清理资源
|
|
||||||
onUnmounted(() => {
|
|
||||||
cleanupResources();
|
|
||||||
});
|
|
||||||
|
|
||||||
// 监听模型文件变化
|
|
||||||
watch(() => currentFiles.value, () => {
|
|
||||||
if (currentFiles.value && currentFiles.value.length > 0) {
|
|
||||||
initializeModel();
|
|
||||||
}
|
|
||||||
}, { immediate: true });
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.chat-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-spinner {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border: 4px solid rgba(0, 0, 0, 0.1);
|
|
||||||
border-radius: 50%;
|
|
||||||
border-top-color: #3498db;
|
|
||||||
animation: spin 1s ease-in-out infinite;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-container {
|
|
||||||
width: 80%;
|
|
||||||
height: 20px;
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
border-radius: 10px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar {
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(90deg, #1e88e5, #64b5f6);
|
|
||||||
transition: width 0.3s ease;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-percentage {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #1e88e5;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-main {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-history {
|
|
||||||
flex: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 20px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message {
|
|
||||||
max-width: 85%;
|
|
||||||
padding: 10px 16px;
|
|
||||||
border-radius: 18px;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-message {
|
|
||||||
align-self: flex-end;
|
|
||||||
background-color: #1e88e5;
|
|
||||||
color: white;
|
|
||||||
border-bottom-right-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ai-message {
|
|
||||||
align-self: flex-start;
|
|
||||||
background-color: #e0e0e0;
|
|
||||||
color: #333;
|
|
||||||
border-bottom-left-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-content :deep(p) {
|
|
||||||
margin: 0.5em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-content :deep(pre) {
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-content :deep(code) {
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
padding: 2px 4px;
|
|
||||||
border-radius: 3px;
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-content :deep(ul),
|
|
||||||
.markdown-content :deep(ol) {
|
|
||||||
margin: 0.5em 0;
|
|
||||||
padding-left: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-content :deep(table) {
|
|
||||||
border-collapse: collapse;
|
|
||||||
margin: 1em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-content :deep(th),
|
|
||||||
.markdown-content :deep(td) {
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
padding: 4px 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.markdown-content :deep(blockquote) {
|
|
||||||
margin: 0.5em 0;
|
|
||||||
padding-left: 1em;
|
|
||||||
border-left: 4px solid #ddd;
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
.generating-indicator {
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.generating-indicator span {
|
|
||||||
display: inline-block;
|
|
||||||
animation: blink 1.4s infinite both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.generating-indicator span:nth-child(2) {
|
|
||||||
animation-delay: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.generating-indicator span:nth-child(3) {
|
|
||||||
animation-delay: 0.4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes blink {
|
|
||||||
0% {
|
|
||||||
opacity: 0.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
20% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 0.2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-input {
|
|
||||||
display: flex;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: white;
|
|
||||||
border-top: 1px solid #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-input textarea {
|
|
||||||
flex: 1;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 10px;
|
|
||||||
resize: none;
|
|
||||||
height: 60px;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-input button {
|
|
||||||
margin-left: 10px;
|
|
||||||
background-color: #1e88e5;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 0 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-input button:disabled {
|
|
||||||
background-color: #cccccc;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
import { registerComponentOption } from '@/class/PluginCenter'
|
|
||||||
import PlayCircle from '@vicons/ionicons5/es/PlayCircle'
|
|
||||||
|
|
||||||
const pluginConfig: registerComponentOption = {
|
|
||||||
key: 'browser_llm',
|
|
||||||
name: 'Browser_LLM',
|
|
||||||
icon: PlayCircle,
|
|
||||||
getComponent: async () =>
|
|
||||||
(await import('@/plugins/browser_llm/browser_llm.vue')).default,
|
|
||||||
filter: (vDirs, vFiles) => {
|
|
||||||
if (vDirs.length > 1) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
if (vDirs.length === 1 && vDirs[0].name !== 'tasks_genai_wasm') {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
if (vFiles.length === 0) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
for (let i of vFiles) {
|
|
||||||
for (let s of ['model.bin', 'model.task']) {
|
|
||||||
if (i.name.endsWith(s)) {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false
|
|
||||||
},
|
|
||||||
priority: 6
|
|
||||||
}
|
|
||||||
|
|
||||||
export default pluginConfig
|
|
||||||
|
|
||||||
import { PluginExportType } from '@/types/type'
|
|
||||||
export const type = PluginExportType.component
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
import { VirtualFile } from '@/class/VirtualDirectory'
|
|
||||||
import config from '@/config'
|
|
||||||
import { usePluginHooksType } from '@/types/type'
|
|
||||||
import copy2Clipboard from 'copy-to-clipboard'
|
|
||||||
|
|
||||||
const copy = (__: any, vFiles: VirtualFile[], hooks: usePluginHooksType) => {
|
|
||||||
const { globalAlertTip } = hooks
|
|
||||||
const vFile = vFiles[0]
|
|
||||||
console.log(vFile.url)
|
|
||||||
copy2Clipboard(`${config.baseUrl}${vFile.url}`)
|
|
||||||
globalAlertTip(`${vFile.name}的链接已复制至剪切板`, {
|
|
||||||
type: 'info',
|
|
||||||
timeout: 2000
|
|
||||||
})
|
|
||||||
}
|
|
||||||
export default copy
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
import { Plugin, PluginGroup } from '@/class/PluginCenter'
|
|
||||||
import Copy from './copy'
|
|
||||||
import { CopyOutline } from '@vicons/ionicons5'
|
|
||||||
import { PluginExportType } from '@/types/type'
|
|
||||||
import { shallowRef } from 'vue'
|
|
||||||
|
|
||||||
const pluginConfig: Plugin = {
|
|
||||||
name: '复制链接',
|
|
||||||
icon: shallowRef(CopyOutline),
|
|
||||||
filter: (vDirs, vFiles) => {
|
|
||||||
if (vDirs.length !== 0) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
if (vFiles.length !== 1) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
return true
|
|
||||||
},
|
|
||||||
disable: false,
|
|
||||||
group: [PluginGroup.default],
|
|
||||||
func: Copy,
|
|
||||||
priority: -100
|
|
||||||
}
|
|
||||||
|
|
||||||
export default pluginConfig
|
|
||||||
|
|
||||||
export const type = PluginExportType.default
|
|
||||||
@@ -1,174 +0,0 @@
|
|||||||
import { VirtualDirectory, VirtualFile } from '@/class/VirtualDirectory'
|
|
||||||
import { usePluginHooksType } from '@/types/type'
|
|
||||||
|
|
||||||
// 用于存储复制的项目
|
|
||||||
let copiedItems: {
|
|
||||||
files: VirtualFile[],
|
|
||||||
directories: VirtualDirectory[],
|
|
||||||
isCut: boolean
|
|
||||||
} = {
|
|
||||||
files: [],
|
|
||||||
directories: [],
|
|
||||||
isCut: false
|
|
||||||
}
|
|
||||||
|
|
||||||
// 复制或剪切虚拟项目
|
|
||||||
const copyItems = (vDirs: VirtualDirectory[], vFiles: VirtualFile[], hooks: usePluginHooksType, isCut = false) => {
|
|
||||||
const { globalAlertTip } = hooks
|
|
||||||
|
|
||||||
// 保存复制的项目
|
|
||||||
copiedItems = {
|
|
||||||
files: [...vFiles],
|
|
||||||
directories: [...vDirs],
|
|
||||||
isCut
|
|
||||||
}
|
|
||||||
|
|
||||||
// 生成消息文本
|
|
||||||
const fileCount = vFiles.length
|
|
||||||
const dirCount = vDirs.length
|
|
||||||
let messageText = ''
|
|
||||||
|
|
||||||
if (fileCount > 0 && dirCount > 0) {
|
|
||||||
messageText = `已${isCut ? '剪切' : '复制'} ${fileCount}个文件和${dirCount}个文件夹`
|
|
||||||
} else if (fileCount > 0) {
|
|
||||||
messageText = `已${isCut ? '剪切' : '复制'} ${fileCount}个文件`
|
|
||||||
} else if (dirCount > 0) {
|
|
||||||
messageText = `已${isCut ? '剪切' : '复制'} ${dirCount}个文件夹`
|
|
||||||
}
|
|
||||||
|
|
||||||
// 显示提示
|
|
||||||
globalAlertTip(messageText, {
|
|
||||||
type: 'info',
|
|
||||||
timeout: 2000
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 粘贴虚拟项目
|
|
||||||
const pasteItems = async (vDirs: VirtualDirectory[], _vFiles: VirtualFile[], hooks: usePluginHooksType) => {
|
|
||||||
const { globalAlertTip, getRootVDirectory } = hooks
|
|
||||||
|
|
||||||
// 检查目标目录
|
|
||||||
if (vDirs.length !== 1) {
|
|
||||||
globalAlertTip('请选择一个目标文件夹进行粘贴', {
|
|
||||||
type: 'error',
|
|
||||||
timeout: 2000
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// 检查是否有复制的项目
|
|
||||||
if (copiedItems.files.length === 0 && copiedItems.directories.length === 0) {
|
|
||||||
globalAlertTip('没有可粘贴的项目', {
|
|
||||||
type: 'info',
|
|
||||||
timeout: 2000
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const targetDir = vDirs[0]
|
|
||||||
let successCount = 0
|
|
||||||
let failCount = 0
|
|
||||||
|
|
||||||
// 处理粘贴文件
|
|
||||||
for (const file of copiedItems.files) {
|
|
||||||
try {
|
|
||||||
if (copiedItems.isCut) {
|
|
||||||
// 剪切操作
|
|
||||||
const success = await file.moveTo(targetDir)
|
|
||||||
if (success) {
|
|
||||||
successCount++
|
|
||||||
} else {
|
|
||||||
failCount++
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// 复制操作
|
|
||||||
const success = await file.copyTo(targetDir)
|
|
||||||
if (success) {
|
|
||||||
successCount++
|
|
||||||
} else {
|
|
||||||
failCount++
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('粘贴文件失败:', err)
|
|
||||||
failCount++
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理粘贴目录
|
|
||||||
for (const dir of copiedItems.directories) {
|
|
||||||
try {
|
|
||||||
if (copiedItems.isCut) {
|
|
||||||
// 目录移动 - 使用mv方法而不是moveTo
|
|
||||||
const success = await dir.mv(targetDir)
|
|
||||||
if (success) {
|
|
||||||
successCount++
|
|
||||||
} else {
|
|
||||||
failCount++
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// 目录复制
|
|
||||||
const success = await dir.copy(targetDir)
|
|
||||||
if (success) {
|
|
||||||
successCount++
|
|
||||||
} else {
|
|
||||||
failCount++
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error('粘贴目录失败:', err)
|
|
||||||
failCount++
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 如果是剪切操作，粘贴后清空复制的项目
|
|
||||||
if (copiedItems.isCut && successCount > 0) {
|
|
||||||
copiedItems = {
|
|
||||||
files: [],
|
|
||||||
directories: [],
|
|
||||||
isCut: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 显示操作结果
|
|
||||||
if (successCount > 0 && failCount === 0) {
|
|
||||||
globalAlertTip(`成功${copiedItems.isCut ? '移动' : '复制'}了${successCount}个项目`, {
|
|
||||||
type: 'success',
|
|
||||||
timeout: 2000
|
|
||||||
})
|
|
||||||
} else if (successCount > 0 && failCount > 0) {
|
|
||||||
globalAlertTip(`${successCount}个项目成功，${failCount}个项目失败`, {
|
|
||||||
type: 'info',
|
|
||||||
timeout: 2000
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
globalAlertTip('操作失败', {
|
|
||||||
type: 'error',
|
|
||||||
timeout: 2000
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新目录
|
|
||||||
try {
|
|
||||||
// 使用update方法更新根目录
|
|
||||||
const rootDir = getRootVDirectory();
|
|
||||||
await rootDir.update();
|
|
||||||
} catch (err) {
|
|
||||||
console.error('更新目录失败:', err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 复制功能
|
|
||||||
export const copy = (vDirs: VirtualDirectory[], vFiles: VirtualFile[], hooks: usePluginHooksType) => {
|
|
||||||
copyItems(vDirs, vFiles, hooks, false)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 剪切功能
|
|
||||||
export const cut = (vDirs: VirtualDirectory[], vFiles: VirtualFile[], hooks: usePluginHooksType) => {
|
|
||||||
copyItems(vDirs, vFiles, hooks, true)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 粘贴功能
|
|
||||||
export const paste = (vDirs: VirtualDirectory[], vFiles: VirtualFile[], hooks: usePluginHooksType) => {
|
|
||||||
pasteItems(vDirs, vFiles, hooks)
|
|
||||||
}
|
|
||||||
@@ -1,60 +0,0 @@
|
|||||||
import { Plugin, PluginGroup } from '@/class/PluginCenter'
|
|
||||||
import { copy, cut, paste } from './copyPaste'
|
|
||||||
import {
|
|
||||||
CopyOutline,
|
|
||||||
CutOutline,
|
|
||||||
DocumentAttachOutline
|
|
||||||
} from '@vicons/ionicons5'
|
|
||||||
import { PluginExportType } from '@/types/type'
|
|
||||||
import { shallowRef } from 'vue'
|
|
||||||
|
|
||||||
// 复制插件配置
|
|
||||||
export const copyPluginConfig: Plugin = {
|
|
||||||
name: '复制',
|
|
||||||
icon: shallowRef(CopyOutline),
|
|
||||||
filter: (vDirs, vFiles) => {
|
|
||||||
// 至少选择了一个文件或文件夹
|
|
||||||
return vDirs.length > 0 || vFiles.length > 0
|
|
||||||
},
|
|
||||||
disable: false,
|
|
||||||
group: [PluginGroup.default],
|
|
||||||
func: copy,
|
|
||||||
priority: -10
|
|
||||||
}
|
|
||||||
|
|
||||||
// 剪切插件配置
|
|
||||||
export const cutPluginConfig: Plugin = {
|
|
||||||
name: '剪切',
|
|
||||||
icon: shallowRef(CutOutline),
|
|
||||||
filter: (vDirs, vFiles) => {
|
|
||||||
// 至少选择了一个文件或文件夹
|
|
||||||
return vDirs.length > 0 || vFiles.length > 0
|
|
||||||
},
|
|
||||||
disable: false,
|
|
||||||
group: [PluginGroup.default],
|
|
||||||
func: cut,
|
|
||||||
priority: -10
|
|
||||||
}
|
|
||||||
|
|
||||||
// 粘贴插件配置
|
|
||||||
export const pastePluginConfig: Plugin = {
|
|
||||||
name: '粘贴',
|
|
||||||
icon: shallowRef(DocumentAttachOutline),
|
|
||||||
filter: (vDirs, vFiles) => {
|
|
||||||
// 只选择了一个目录作为粘贴目标
|
|
||||||
return vDirs.length === 1 && vFiles.length === 0
|
|
||||||
},
|
|
||||||
disable: false,
|
|
||||||
group: [PluginGroup.default],
|
|
||||||
func: paste,
|
|
||||||
priority: -10
|
|
||||||
}
|
|
||||||
|
|
||||||
// 导出为默认插件类型
|
|
||||||
export const type = PluginExportType.default
|
|
||||||
|
|
||||||
// 插件键值
|
|
||||||
export const key = 'miaoCopy'
|
|
||||||
|
|
||||||
// 导出默认的复制插件
|
|
||||||
export default copyPluginConfig
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
import { cutPluginConfig } from './export'
|
|
||||||
import { PluginExportType } from '@/types/type'
|
|
||||||
|
|
||||||
// 导出为默认插件类型
|
|
||||||
export const type = PluginExportType.default
|
|
||||||
|
|
||||||
// 插件键值
|
|
||||||
export const key = 'miaoCut'
|
|
||||||
|
|
||||||
// 导出剪切插件
|
|
||||||
export default cutPluginConfig
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
import { pastePluginConfig } from './export'
|
|
||||||
import { PluginExportType } from '@/types/type'
|
|
||||||
|
|
||||||
// 导出为默认插件类型
|
|
||||||
export const type = PluginExportType.default
|
|
||||||
|
|
||||||
// 插件键值
|
|
||||||
export const key = 'miaoPaste'
|
|
||||||
|
|
||||||
// 导出粘贴插件
|
|
||||||
export default pastePluginConfig
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
import { Plugin, PluginGroup } from '@/class/PluginCenter'
|
|
||||||
import hideFps from './hideFps'
|
|
||||||
import { EyeOffOutline } from '@vicons/ionicons5'
|
|
||||||
import { PluginExportType } from '@/types/type'
|
|
||||||
import { shallowRef } from 'vue'
|
|
||||||
import { fpsElement } from './shared'
|
|
||||||
|
|
||||||
const pluginConfig: Plugin = {
|
|
||||||
name: '隐藏FPS',
|
|
||||||
icon: shallowRef(EyeOffOutline),
|
|
||||||
filter: () => {
|
|
||||||
// 只有当FPS显示元素存在时才显示此按钮
|
|
||||||
return fpsElement.value !== null
|
|
||||||
},
|
|
||||||
disable: false,
|
|
||||||
group: [PluginGroup.mainMenu],
|
|
||||||
func: hideFps,
|
|
||||||
priority: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
export default pluginConfig
|
|
||||||
|
|
||||||
export const type = PluginExportType.default
|
|
||||||
|
|
||||||
export const key = 'hideFps'
|
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
import { Plugin, PluginGroup } from '@/class/PluginCenter'
|
|
||||||
import showFps from './showFps'
|
|
||||||
import { SpeedometerOutline } from '@vicons/ionicons5'
|
|
||||||
import { PluginExportType } from '@/types/type'
|
|
||||||
import { shallowRef } from 'vue'
|
|
||||||
import { fpsElement } from './shared'
|
|
||||||
|
|
||||||
const pluginConfig: Plugin = {
|
|
||||||
name: '显示FPS',
|
|
||||||
icon: shallowRef(SpeedometerOutline),
|
|
||||||
filter: () => {
|
|
||||||
return fpsElement.value === null
|
|
||||||
},
|
|
||||||
disable: false,
|
|
||||||
group: [PluginGroup.mainMenu],
|
|
||||||
func: showFps,
|
|
||||||
priority: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
export default pluginConfig
|
|
||||||
|
|
||||||
export const type = PluginExportType.default
|
|
||||||
|
|
||||||
export const key = 'showFps'
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
// 引入共享变量
|
|
||||||
import { fpsElement, animationFrameId, setFpsElement, setAnimationFrameId } from '../fps/shared';
|
|
||||||
|
|
||||||
const hideFps = () => {
|
|
||||||
// 停止帧率计算
|
|
||||||
if (animationFrameId.value !== null) {
|
|
||||||
cancelAnimationFrame(animationFrameId.value);
|
|
||||||
setAnimationFrameId(null);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 移除FPS显示元素
|
|
||||||
if (fpsElement.value) {
|
|
||||||
document.body.removeChild(fpsElement.value);
|
|
||||||
setFpsElement(null);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default hideFps;
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
import { Plugin, PluginGroup } from '@/class/PluginCenter'
|
|
||||||
import hideFps from './hideFps'
|
|
||||||
import { EyeOffOutline } from '@vicons/ionicons5'
|
|
||||||
import { PluginExportType } from '@/types/type'
|
|
||||||
import { shallowRef } from 'vue'
|
|
||||||
import { fpsElement } from '../fps/shared'
|
|
||||||
|
|
||||||
const pluginConfig: Plugin = {
|
|
||||||
name: '隐藏FPS',
|
|
||||||
icon: shallowRef(EyeOffOutline),
|
|
||||||
filter: () => {
|
|
||||||
// 只有当FPS显示元素存在时才显示此按钮
|
|
||||||
return fpsElement.value !== null
|
|
||||||
},
|
|
||||||
disable: false,
|
|
||||||
group: [PluginGroup.mainMenu],
|
|
||||||
func: hideFps,
|
|
||||||
priority: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
export default pluginConfig
|
|
||||||
|
|
||||||
export const type = PluginExportType.default
|
|
||||||
|
|
||||||
export const key = 'hideFps'
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
export * from './shared';
|
|
||||||
export { default as showFps } from './showFps';
|
|
||||||
export { default as hideFps } from './hideFps';
|
|
||||||
export { default as showFpsPlugin } from './export_show';
|
|
||||||
export { default as hideFpsPlugin } from './export_hide';
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
import { shallowRef } from 'vue';
|
|
||||||
|
|
||||||
// 使用shallowRef包装状态
|
|
||||||
export const fpsElement = shallowRef<HTMLDivElement | null>(null);
|
|
||||||
export const animationFrameId = shallowRef<number | null>(null);
|
|
||||||
|
|
||||||
// 更新设置函数
|
|
||||||
export const setFpsElement = (el: HTMLDivElement | null) => {
|
|
||||||
fpsElement.value = el;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const setAnimationFrameId = (id: number | null) => {
|
|
||||||
animationFrameId.value = id;
|
|
||||||
};
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
import { fpsElement, setFpsElement, setAnimationFrameId } from '../fps/shared';
|
|
||||||
|
|
||||||
// const frameArr = new Array<number>(0)
|
|
||||||
let lastTime: number = 0
|
|
||||||
|
|
||||||
const createFpsElement = () => {
|
|
||||||
const el = document.createElement('div');
|
|
||||||
el.style.position = 'fixed';
|
|
||||||
el.style.top = '10px';
|
|
||||||
el.style.left = '10px';
|
|
||||||
el.style.backgroundColor = 'rgba(255, 255, 255, 0.2)';
|
|
||||||
el.style.pointerEvents = 'none';
|
|
||||||
el.style.userSelect = 'none';
|
|
||||||
el.style.color = 'green';
|
|
||||||
el.style.padding = '5px 10px';
|
|
||||||
el.style.borderRadius = '4px';
|
|
||||||
el.style.fontFamily = 'monospace';
|
|
||||||
el.style.fontSize = '14px';
|
|
||||||
el.style.zIndex = '9999';
|
|
||||||
document.body.appendChild(el);
|
|
||||||
return el;
|
|
||||||
};
|
|
||||||
|
|
||||||
const calculateFps = () => {
|
|
||||||
// const range = 1000
|
|
||||||
// const curr = new Date()
|
|
||||||
// frameArr.push(curr.getTime())
|
|
||||||
// while (frameArr[0] < curr.getTime() - range) {
|
|
||||||
// frameArr.shift()
|
|
||||||
// }
|
|
||||||
// const fps = Math.floor(frameArr.length / range * 1000)
|
|
||||||
// if (fpsElement.value) {
|
|
||||||
// fpsElement.value.textContent = `FPS: ${fps}`;
|
|
||||||
// }
|
|
||||||
// const id = requestAnimationFrame(calculateFps);
|
|
||||||
// setAnimationFrameId(id);
|
|
||||||
const curr = new Date()
|
|
||||||
const fps = Math.floor(1000 / (curr.getTime() - lastTime))
|
|
||||||
if (fpsElement.value && lastTime !== 0) {
|
|
||||||
fpsElement.value.textContent = `FPS: ${fps}`;
|
|
||||||
}
|
|
||||||
lastTime = curr.getTime()
|
|
||||||
const id = requestAnimationFrame(calculateFps);
|
|
||||||
setAnimationFrameId(id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const showFps = () => {
|
|
||||||
if (fpsElement.value) return;
|
|
||||||
|
|
||||||
const el = createFpsElement();
|
|
||||||
setFpsElement(el);
|
|
||||||
|
|
||||||
const id = requestAnimationFrame(calculateFps);
|
|
||||||
setAnimationFrameId(id);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default showFps;
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
import { Plugin, PluginGroup } from '@/class/PluginCenter'
|
|
||||||
import fullScreen from './fullScreen'
|
|
||||||
import { ExpandOutline } from '@vicons/ionicons5'
|
|
||||||
import { PluginExportType } from '@/types/type'
|
|
||||||
import { shallowRef } from 'vue'
|
|
||||||
|
|
||||||
const pluginConfig: Plugin = {
|
|
||||||
name: '全屏',
|
|
||||||
icon: shallowRef(ExpandOutline),
|
|
||||||
filter: () => {
|
|
||||||
return true
|
|
||||||
},
|
|
||||||
disable: false,
|
|
||||||
group: [PluginGroup.mainMenu],
|
|
||||||
func: fullScreen,
|
|
||||||
priority: -1
|
|
||||||
}
|
|
||||||
|
|
||||||
export default pluginConfig
|
|
||||||
|
|
||||||
export const type = PluginExportType.default
|
|
||||||
|
|
||||||
export const key = 'fullScreen'
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
const fullScreen = () => {
|
|
||||||
document.body.requestFullscreen()
|
|
||||||
}
|
|
||||||
export default fullScreen
|
|
||||||
@@ -1,49 +0,0 @@
|
|||||||
import { registerComponentOption } from '@/class/PluginCenter'
|
|
||||||
import { CodeOutline } from '@vicons/ionicons5'
|
|
||||||
import { PluginExportType } from '@/types/type'
|
|
||||||
|
|
||||||
const pluginConfig: registerComponentOption = {
|
|
||||||
key: 'miaoCodeMirror',
|
|
||||||
name: '代码编辑',
|
|
||||||
icon: CodeOutline,
|
|
||||||
getComponent: async () =>
|
|
||||||
(await import('@/plugins/miaoCodeMirror/miaoCodeMirror.vue')).default,
|
|
||||||
filter: (vDirs, vFiles) => {
|
|
||||||
if (vDirs.length !== 0) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
if (vFiles.length !== 1) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
for (let end of [
|
|
||||||
'js',
|
|
||||||
'ts',
|
|
||||||
'jsx',
|
|
||||||
'tsx',
|
|
||||||
'py',
|
|
||||||
'html',
|
|
||||||
'css',
|
|
||||||
'scss',
|
|
||||||
'go',
|
|
||||||
'json',
|
|
||||||
'md',
|
|
||||||
'yaml',
|
|
||||||
'txt',
|
|
||||||
'xml',
|
|
||||||
'vue',
|
|
||||||
'srt',
|
|
||||||
'vtt',
|
|
||||||
'ass',
|
|
||||||
'ssa'
|
|
||||||
]) {
|
|
||||||
if (vFiles[0].name.endsWith(end)) {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default pluginConfig
|
|
||||||
|
|
||||||
export const type = PluginExportType.component
|
|
||||||
@@ -1,216 +0,0 @@
|
|||||||
<template>
|
|
||||||
<miao-message-provider ref="miaoMessage">
|
|
||||||
<div
|
|
||||||
class="codemirror-container"
|
|
||||||
ref="rootRef"
|
|
||||||
:class="`codemirror-container-${theme}`">
|
|
||||||
<div class="codemirror-container-top">
|
|
||||||
<div
|
|
||||||
class="codemirror-container-btn codemirror-container-btn-save"
|
|
||||||
@click="handleSave">
|
|
||||||
保存
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="codemirror-container-btn codemirror-container-btn-save"
|
|
||||||
@click="handleReset">
|
|
||||||
恢复到上次保存
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="codemirror-container-main">
|
|
||||||
<NScrollbar style="max-height: calc(100%)">
|
|
||||||
<codemirror v-model="codeData" :extensions="extensions" />
|
|
||||||
</NScrollbar>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</miao-message-provider>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import miaoMessageProvider from '@/components/miaoAlertTipProvider.vue'
|
|
||||||
import { VirtualFile } from '@/class/VirtualDirectory'
|
|
||||||
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
|
||||||
import { onMounted, ref } from 'vue'
|
|
||||||
import { Codemirror } from 'vue-codemirror'
|
|
||||||
import { NScrollbar } from 'naive-ui'
|
|
||||||
|
|
||||||
const miaoFetchApi = useMiaoFetchApi()
|
|
||||||
|
|
||||||
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
|
||||||
required: true
|
|
||||||
})
|
|
||||||
|
|
||||||
const decoder = new TextDecoder('utf-8')
|
|
||||||
|
|
||||||
const miaoMessage = ref<InstanceType<typeof miaoMessageProvider>>()
|
|
||||||
const vFile = ref<VirtualFile>()
|
|
||||||
const rootRef = ref<HTMLDivElement>()
|
|
||||||
// const _key = ref(Math.random())
|
|
||||||
const codeData = ref<string>()
|
|
||||||
// 第一次点击保存时自动备份data，暂时懒得做
|
|
||||||
const bakData = ref<string>()
|
|
||||||
const extensions = ref<any[]>([])
|
|
||||||
const theme = ref<'light' | 'dark'>('light')
|
|
||||||
|
|
||||||
const handleSave = async () => {
|
|
||||||
if (bakData.value === codeData.value || !vFile.value) {
|
|
||||||
miaoMessage.value?.alertTip('内容未改动', {
|
|
||||||
timeout: 3000,
|
|
||||||
type: 'info'
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const parentDir = vFile.value?.parent
|
|
||||||
const file_bak = new File(
|
|
||||||
[new Blob([bakData.value ?? ''])],
|
|
||||||
`${vFile.value?.name}.bak`
|
|
||||||
)
|
|
||||||
const file = new File([new Blob([codeData.value ?? ''])], vFile.value.name)
|
|
||||||
bakData.value = codeData.value
|
|
||||||
const { response } = miaoFetchApi.upload(file, parentDir)
|
|
||||||
false && miaoFetchApi.upload(file_bak, parentDir)
|
|
||||||
await response
|
|
||||||
miaoMessage.value?.alertTip('保存成功', {
|
|
||||||
timeout: 5000,
|
|
||||||
type: 'success'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleReset = async () => {
|
|
||||||
codeData.value = bakData.value
|
|
||||||
}
|
|
||||||
|
|
||||||
// const switchTheme = async () => {
|
|
||||||
// if (!vFile.value) {
|
|
||||||
// return
|
|
||||||
// }
|
|
||||||
// theme.value = theme.value === 'dark' ? 'light' : 'dark'
|
|
||||||
// extensions.value = [
|
|
||||||
// ...(await getLangExtensions(vFile.value?.name)),
|
|
||||||
// // theme.value === 'dark' ?
|
|
||||||
// ]
|
|
||||||
// _key.value = Math.random()
|
|
||||||
// }
|
|
||||||
|
|
||||||
const getLangExtensions = async (fileName: string) => {
|
|
||||||
const ext = fileName.split('.').pop()?.toLocaleLowerCase()
|
|
||||||
switch (ext) {
|
|
||||||
case 'js':
|
|
||||||
case 'jsx':
|
|
||||||
case 'ts':
|
|
||||||
case 'tsx':
|
|
||||||
const { javascript } = await import('@codemirror/lang-javascript')
|
|
||||||
return [
|
|
||||||
javascript({
|
|
||||||
jsx: ext.substring(2, 3) === 'x',
|
|
||||||
typescript: ext.substring(0, 2) === 'js'
|
|
||||||
})
|
|
||||||
]
|
|
||||||
break
|
|
||||||
case 'css':
|
|
||||||
case 'scss':
|
|
||||||
const { sass } = await import('@codemirror/lang-sass')
|
|
||||||
return [sass()]
|
|
||||||
break
|
|
||||||
case 'html':
|
|
||||||
const { html } = await import('@codemirror/lang-html')
|
|
||||||
return [html()]
|
|
||||||
break
|
|
||||||
case 'py':
|
|
||||||
const { python } = await import('@codemirror/lang-python')
|
|
||||||
return [python()]
|
|
||||||
break
|
|
||||||
case 'go':
|
|
||||||
const { go } = await import('@codemirror/lang-go')
|
|
||||||
return [go()]
|
|
||||||
break
|
|
||||||
case 'json':
|
|
||||||
const { json } = await import('@codemirror/lang-json')
|
|
||||||
return [json()]
|
|
||||||
break
|
|
||||||
case 'md':
|
|
||||||
const { markdown } = await import('@codemirror/lang-markdown')
|
|
||||||
return [markdown()]
|
|
||||||
break
|
|
||||||
case 'yaml':
|
|
||||||
const { yaml } = await import('@codemirror/lang-yaml')
|
|
||||||
return [yaml()]
|
|
||||||
break
|
|
||||||
case 'vue':
|
|
||||||
const { vue } = await import('@codemirror/lang-vue')
|
|
||||||
return [vue()]
|
|
||||||
break
|
|
||||||
case 'xml':
|
|
||||||
const { xml } = await import('@codemirror/lang-xml')
|
|
||||||
return [xml()]
|
|
||||||
break
|
|
||||||
default:
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
vFile.value = currentFiles.value[0]
|
|
||||||
const fileName = currentFiles.value[0].name
|
|
||||||
codeData.value = decoder.decode(
|
|
||||||
await miaoFetchApi.getFile(currentFiles.value[0], {
|
|
||||||
axiosOption: {
|
|
||||||
headers: {
|
|
||||||
'Cache-Control': 'no-cache'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}).response
|
|
||||||
)
|
|
||||||
bakData.value = codeData.value
|
|
||||||
extensions.value = [...(await getLangExtensions(fileName))]
|
|
||||||
|
|
||||||
rootRef.value?.addEventListener('keydown', (event) => {
|
|
||||||
if (event.ctrlKey && event.key === 's') {
|
|
||||||
event.preventDefault()
|
|
||||||
handleSave()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.codemirror-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: hidden;
|
|
||||||
|
|
||||||
.codemirror-container-top {
|
|
||||||
height: 25px;
|
|
||||||
display: flex;
|
|
||||||
border-bottom: 1px solid #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.codemirror-container-btn {
|
|
||||||
height: 25px;
|
|
||||||
padding: 0 10px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
background-color: none;
|
|
||||||
transition: background-color 0.25s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: #e8e8e8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.codemirror-container-main {
|
|
||||||
height: calc(100% - 25px);
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.codemirror-container-dark {
|
|
||||||
background-color: rgb(30, 30, 30);
|
|
||||||
}
|
|
||||||
|
|
||||||
.codemirror-container-light {
|
|
||||||
background-color: rgb(255, 255, 255);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
// @ts-nocheck
|
|
||||||
import { registerComponentOption } from '@/class/PluginCenter'
|
|
||||||
import { PluginExportType } from '@/types/type'
|
|
||||||
|
|
||||||
const pluginConfig: registerComponentOption = {
|
|
||||||
key: 'miaoCrypto',
|
|
||||||
name: '文件加密',
|
|
||||||
getComponent: async () => (await import('./miaoCrypto.vue')).default,
|
|
||||||
filter: (vDirs, vFiles) => {
|
|
||||||
return true
|
|
||||||
if (vDirs.length !== 0) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
if (vFiles.length !== 1) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
return vFiles[0].name.endsWith('txt')
|
|
||||||
},
|
|
||||||
disable: true
|
|
||||||
}
|
|
||||||
|
|
||||||
export default pluginConfig
|
|
||||||
|
|
||||||
export const type = PluginExportType.component
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
import aesJs from 'aes-js'
|
|
||||||
import aes_worker from '../workers/aes-worker?worker'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 使用worker进行aes加密
|
|
||||||
* @param {any} key:string 须保证长度正确
|
|
||||||
* @param {any} data:Uint8Array
|
|
||||||
* @returns {Uint8Array}
|
|
||||||
*/
|
|
||||||
export default (key: string, data: Uint8Array) => {
|
|
||||||
const key_u8i = aesJs.utils.utf8.toBytes(key)
|
|
||||||
return new Promise<Uint8Array>((resolve) => {
|
|
||||||
const aesWorker = new aes_worker()
|
|
||||||
aesWorker.onmessage = (event) => {
|
|
||||||
resolve(event.data)
|
|
||||||
}
|
|
||||||
aesWorker.postMessage({ data, key: key_u8i })
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@@ -1,208 +0,0 @@
|
|||||||
<template>
|
|
||||||
<miao-drop-handler @on-virtual-files="handleDropVirtualFiles">
|
|
||||||
<div class="miaoCrypto-container">
|
|
||||||
<div class="miaoCrypto-container-encrypt miaoCrypto-container-item">
|
|
||||||
<n-scrollbar style="max-height: 100%">
|
|
||||||
<div
|
|
||||||
v-for="item of workItemList"
|
|
||||||
:key="item.id"
|
|
||||||
class="miaoCrypto-container-item-item">
|
|
||||||
<div
|
|
||||||
class="miaoCrypto-container-item-percentBar"
|
|
||||||
:style="{
|
|
||||||
zIndex: 0,
|
|
||||||
width:
|
|
||||||
item.getBufferProgress !== -1
|
|
||||||
? `${item.getBufferProgress * 100}%`
|
|
||||||
: `0%`,
|
|
||||||
backgroundColor: 'blue'
|
|
||||||
}"></div>
|
|
||||||
<div
|
|
||||||
class="miaoCrypto-container-item-percentBar"
|
|
||||||
:style="{
|
|
||||||
zIndex: 1,
|
|
||||||
width: item.status === 'finish' ? `100%` : `0%`,
|
|
||||||
backgroundColor: 'green'
|
|
||||||
}"></div>
|
|
||||||
<span class="miaoCrypto-container-item-content">
|
|
||||||
{{ item.name }}{{ item.status }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</n-scrollbar>
|
|
||||||
</div>
|
|
||||||
<!-- <div class="miaoCrypto-container-decrypt miaoCrypto-container-item"></div> -->
|
|
||||||
</div>
|
|
||||||
</miao-drop-handler>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { NScrollbar } from 'naive-ui'
|
|
||||||
import { onUnmounted, ref, shallowReactive } from 'vue'
|
|
||||||
import aes_ctr_worker from './hooks/AES'
|
|
||||||
import { VirtualFile } from '@/class/VirtualDirectory'
|
|
||||||
import miaoDropHandler from '@/components/miaoDropHandler.vue'
|
|
||||||
import { reactive } from 'vue'
|
|
||||||
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
|
||||||
import { onMounted } from 'vue'
|
|
||||||
import { computed } from 'vue'
|
|
||||||
|
|
||||||
const miaoFetchApi = useMiaoFetchApi()
|
|
||||||
|
|
||||||
interface workItem {
|
|
||||||
id: number
|
|
||||||
status: 'wait' | 'process' | 'finish' | 'error'
|
|
||||||
buffer?: Uint8Array
|
|
||||||
getBuffer: () => Promise<Uint8Array>
|
|
||||||
getBufferProgress: number
|
|
||||||
getBufferAbort?: () => void
|
|
||||||
isGettingBuffer: boolean
|
|
||||||
name: string
|
|
||||||
}
|
|
||||||
|
|
||||||
class Work {
|
|
||||||
constructor(func: (key: string, data: Uint8Array) => Promise<Uint8Array>) {
|
|
||||||
this.queue = []
|
|
||||||
this.func = func
|
|
||||||
this.abortLoop = false
|
|
||||||
}
|
|
||||||
queue: workItem[]
|
|
||||||
func: (key: string, data: Uint8Array) => Promise<Uint8Array>
|
|
||||||
abortLoop: boolean
|
|
||||||
get isBusy() {
|
|
||||||
return this.queue.filter((v) => v.status === 'process').length > 0
|
|
||||||
}
|
|
||||||
async funcLoop() {
|
|
||||||
if (this.isBusy || this.abortLoop) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const currentItem = this.queue.filter((v) => v.status === 'wait')[0]
|
|
||||||
if (currentItem === undefined || currentItem.buffer === undefined) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
currentItem.status = 'process'
|
|
||||||
try {
|
|
||||||
currentItem.buffer = await this.func(key.value, currentItem.buffer)
|
|
||||||
currentItem.status = 'finish'
|
|
||||||
} catch (e) {
|
|
||||||
currentItem.status = 'error'
|
|
||||||
}
|
|
||||||
this.funcLoop()
|
|
||||||
}
|
|
||||||
async getBufferLoop() {
|
|
||||||
const _list = this.queue.filter(
|
|
||||||
(v) => v.isGettingBuffer === false && v.buffer === undefined
|
|
||||||
)
|
|
||||||
if (_list.length === 0 || this.abortLoop) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const item = _list[0]
|
|
||||||
item.isGettingBuffer = true
|
|
||||||
try {
|
|
||||||
item.buffer = await item.getBuffer()
|
|
||||||
} catch (e) {
|
|
||||||
item.status = 'error'
|
|
||||||
}
|
|
||||||
item.isGettingBuffer = false
|
|
||||||
this.funcLoop()
|
|
||||||
this.getBufferLoop()
|
|
||||||
}
|
|
||||||
push(itemList: workItem[]) {
|
|
||||||
this.queue.push(...itemList)
|
|
||||||
this.getBufferLoop()
|
|
||||||
}
|
|
||||||
pushVFiles(itemList: VirtualFile[]) {
|
|
||||||
this.push(
|
|
||||||
itemList.map((v) => {
|
|
||||||
const item: workItem = shallowReactive({
|
|
||||||
id: Math.random(),
|
|
||||||
status: 'wait',
|
|
||||||
name: v.name,
|
|
||||||
getBuffer: () => {
|
|
||||||
const { response, abort } = miaoFetchApi.getFile(v, {
|
|
||||||
onProcess(percent) {
|
|
||||||
item.getBufferProgress = percent
|
|
||||||
}
|
|
||||||
})
|
|
||||||
item.getBufferAbort = abort
|
|
||||||
return response
|
|
||||||
},
|
|
||||||
isGettingBuffer: false,
|
|
||||||
getBufferProgress: 0
|
|
||||||
})
|
|
||||||
return item
|
|
||||||
})
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const encryptWork = reactive(new Work(aes_ctr_worker))
|
|
||||||
// const decryptWork = reactive(new Work(aes_ctr_worker))
|
|
||||||
|
|
||||||
const workItemList = computed(() => [
|
|
||||||
...encryptWork.queue
|
|
||||||
// ...decryptWork.queue
|
|
||||||
])
|
|
||||||
|
|
||||||
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
|
||||||
required: true
|
|
||||||
})
|
|
||||||
|
|
||||||
const key = ref('ABlockIs16Bytes!')
|
|
||||||
|
|
||||||
const handleDropVirtualFiles = (vFiles: VirtualFile[]) => {
|
|
||||||
encryptWork.pushVFiles(vFiles)
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
encryptWork.pushVFiles(currentFiles.value)
|
|
||||||
})
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
encryptWork.abortLoop = true
|
|
||||||
encryptWork.queue.forEach((item) => {
|
|
||||||
item.getBufferAbort && item.getBufferAbort()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.miaoCrypto-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
&-item {
|
|
||||||
max-height: 100%;
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&-item {
|
|
||||||
margin: 10px auto;
|
|
||||||
width: 95%;
|
|
||||||
height: 40px;
|
|
||||||
background-color: #fff;
|
|
||||||
box-shadow:
|
|
||||||
0 0 15px -7px rgba(0, 0, 0, 0.1725490196),
|
|
||||||
0 0 3px 1px #43434359;
|
|
||||||
border-radius: 5px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.miaoCrypto-container-item-percentBar {
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.miaoCrypto-container-item-content {
|
|
||||||
position: relative;
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
import aesJs from 'aes-js'
|
|
||||||
|
|
||||||
self.onmessage = async function (event) {
|
|
||||||
const data = event.data.data as Uint8Array
|
|
||||||
const key = event.data.key as Uint8Array
|
|
||||||
var aesCtr = new aesJs.ModeOfOperation.ctr(key, new aesJs.Counter(7058))
|
|
||||||
const encryptData = aesCtr.encrypt(data)
|
|
||||||
self.postMessage(encryptData)
|
|
||||||
}
|
|
||||||
@@ -1,76 +0,0 @@
|
|||||||
<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,304 +0,0 @@
|
|||||||
<template>
|
|
||||||
<miao-draggable-div class="miao-item" :isDraggable="!draggable" ref="itemRef">
|
|
||||||
<miaoContextMenu :options="dropDownOptions ?? []" :touch-time-out="500" @select="handleDropdownSelect">
|
|
||||||
<div class="item-main" :class="selected ? 'item-main-selected' : ''" ref="mainRef">
|
|
||||||
<div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
|
|
||||||
<Icon class="item-main-icon" v-show="clientWidth > 250"></Icon>
|
|
||||||
<div class="item-main-info">
|
|
||||||
<div class="item-main-info-name">
|
|
||||||
<Icon class="item-main-info-name-icon" v-if="clientWidth <= 250"></Icon>
|
|
||||||
<n-ellipsis :style="{ maxWidth: clientWidth > 250 ? '80%' : '75%' }">
|
|
||||||
{{ name }}
|
|
||||||
</n-ellipsis>
|
|
||||||
</div>
|
|
||||||
<div class="item-main-info-date" v-if="time">
|
|
||||||
{{ time }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<miao-draggable-div class="item-main-dragBtn" :isDraggable="draggable" @on-drag-start="handleDragStart">
|
|
||||||
<ReorderFourOutline></ReorderFourOutline>
|
|
||||||
</miao-draggable-div>
|
|
||||||
</div>
|
|
||||||
</miaoContextMenu>
|
|
||||||
</miao-draggable-div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import miaoContextMenu from '@/components/miaoContextMenu.vue'
|
|
||||||
import {
|
|
||||||
DocumentText,
|
|
||||||
FileTray,
|
|
||||||
Help,
|
|
||||||
Image,
|
|
||||||
LogoChrome,
|
|
||||||
LogoCss3,
|
|
||||||
LogoJavascript,
|
|
||||||
LogoVue,
|
|
||||||
PlayCircle,
|
|
||||||
Disc,
|
|
||||||
ReorderFourOutline
|
|
||||||
} from '@vicons/ionicons5'
|
|
||||||
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
|
||||||
import dateFormatter from '@/utils/dateFormatter'
|
|
||||||
import { NEllipsis } from 'naive-ui'
|
|
||||||
import { DropdownOption } from 'naive-ui/es/dropdown'
|
|
||||||
import miaoDraggableDiv from '@/components/miaoDraggableDiv.vue'
|
|
||||||
// import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
|
||||||
|
|
||||||
// const miaoFetchApi = useMiaoFetchApi()
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
item: {
|
|
||||||
name: string
|
|
||||||
type: 'directory' | 'file'
|
|
||||||
stats: {
|
|
||||||
mtimeMs: number
|
|
||||||
}
|
|
||||||
}
|
|
||||||
name?: string
|
|
||||||
color: string
|
|
||||||
dropDownOptions?: DropdownOption[]
|
|
||||||
selected?: boolean
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
download: []
|
|
||||||
delete: []
|
|
||||||
rename: []
|
|
||||||
dragStart: [e: DragEvent]
|
|
||||||
onSelected: []
|
|
||||||
plugin: [plugin: string]
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const mainRef = ref<HTMLDivElement>()
|
|
||||||
|
|
||||||
const draggable = ref(true)
|
|
||||||
|
|
||||||
// 使用ResizeObserver实现
|
|
||||||
// 什么？性能问题？这玩意性能问题多着呢，轮不到它。
|
|
||||||
const clientWidth = ref<number>(666)
|
|
||||||
|
|
||||||
const name = props.name ?? props.item.name
|
|
||||||
|
|
||||||
const observer = new ResizeObserver((entries) => {
|
|
||||||
for (let entry of entries) {
|
|
||||||
clientWidth.value = entry.contentRect.width
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const time = computed(() => {
|
|
||||||
return dateFormatter(
|
|
||||||
new Date(props.item.stats.mtimeMs),
|
|
||||||
'yyyy-MM-dd hh:mm:ss'
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
// 应该将所有事件emit出去才对
|
|
||||||
const handleDropdownSelect = (key: string) => {
|
|
||||||
if (key === 'rename') {
|
|
||||||
emit('rename')
|
|
||||||
} else if (key === 'download') {
|
|
||||||
emit('download')
|
|
||||||
} else if (key === 'delete') {
|
|
||||||
emit('delete')
|
|
||||||
} else if (key === 'select') {
|
|
||||||
emit('onSelected')
|
|
||||||
} else if (key.startsWith('plugin:')) {
|
|
||||||
const plugin = key.split(':')[1]
|
|
||||||
emit('plugin', plugin)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const Icon = computed(() => {
|
|
||||||
try {
|
|
||||||
if (props.item.type === 'directory') {
|
|
||||||
return FileTray
|
|
||||||
} else if (props.item.type === 'file') {
|
|
||||||
const aft = props.item.name.split('.').at(-1)?.toLowerCase()
|
|
||||||
if (!aft) {
|
|
||||||
throw 1
|
|
||||||
} else if (
|
|
||||||
['txt', 'doc', 'docs', 'docx', 'xls', 'xlsx'].includes(aft)
|
|
||||||
) {
|
|
||||||
return DocumentText
|
|
||||||
} else if (['mp3', 'wav', 'ape', 'acc', 'ogg', 'flac'].includes(aft)) {
|
|
||||||
return Disc
|
|
||||||
} else if (
|
|
||||||
[
|
|
||||||
'xbm',
|
|
||||||
'tif',
|
|
||||||
'pjp',
|
|
||||||
'svgz',
|
|
||||||
'jpg',
|
|
||||||
'jpeg',
|
|
||||||
'ico',
|
|
||||||
'tiff',
|
|
||||||
'gif',
|
|
||||||
'svg',
|
|
||||||
'jfif',
|
|
||||||
'webp',
|
|
||||||
'png',
|
|
||||||
'bmp',
|
|
||||||
'pjpeg',
|
|
||||||
'avif'
|
|
||||||
].includes(aft)
|
|
||||||
) {
|
|
||||||
return Image
|
|
||||||
} else if (['mp4', 'm2v', 'mkv'].includes(aft)) {
|
|
||||||
return PlayCircle
|
|
||||||
} else if (['js', 'jsx', 'ts', 'tsx'].includes(aft)) {
|
|
||||||
return LogoJavascript
|
|
||||||
} else if (['html'].includes(aft)) {
|
|
||||||
return LogoChrome
|
|
||||||
} else if (['css', 'scss', 'less'].includes(aft)) {
|
|
||||||
return LogoCss3
|
|
||||||
} else if (['vue'].includes(aft)) {
|
|
||||||
return LogoVue
|
|
||||||
}
|
|
||||||
return DocumentText
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
return Help
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const itemRef = ref()
|
|
||||||
|
|
||||||
const handleDragStart = (e: DragEvent) => {
|
|
||||||
emit('dragStart', e)
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
if (mainRef.value) {
|
|
||||||
observer.observe(mainRef.value)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
if (mainRef.value) {
|
|
||||||
observer.unobserve(mainRef.value)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.miao-item {
|
|
||||||
cursor: pointer;
|
|
||||||
// width: calc(100% - 20px);
|
|
||||||
width: 100%;
|
|
||||||
// min-width: 170px;
|
|
||||||
// aspect-ratio: 66/9;
|
|
||||||
height: 50px;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
// margin: 10px 10px;
|
|
||||||
|
|
||||||
.item-main {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: rgb(255, 255, 255);
|
|
||||||
border-radius: 7px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
transition: background-color 0.3s ease;
|
|
||||||
overflow-x: hidden;
|
|
||||||
|
|
||||||
.item-main-front {
|
|
||||||
height: 100%;
|
|
||||||
min-width: 10px;
|
|
||||||
border-radius: 7px 0 0 7px;
|
|
||||||
background-color: rgb(0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-main-icon {
|
|
||||||
min-width: 30px;
|
|
||||||
margin-left: 10px;
|
|
||||||
height: 30px;
|
|
||||||
width: 30px;
|
|
||||||
color: #00403e;
|
|
||||||
transition: color 0.15s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-main-info {
|
|
||||||
margin-left: 10px;
|
|
||||||
height: 100%;
|
|
||||||
width: calc(100% - 10px);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
&-name {
|
|
||||||
position: relative;
|
|
||||||
user-select: none;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 3px;
|
|
||||||
|
|
||||||
&-icon {
|
|
||||||
color: #00403e;
|
|
||||||
width: 20px;
|
|
||||||
margin-right: 5px;
|
|
||||||
transition: color 0.15s ease-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-date {
|
|
||||||
user-select: none;
|
|
||||||
font-size: small;
|
|
||||||
text-wrap: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-main-option {
|
|
||||||
height: 100%;
|
|
||||||
width: 20px;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
border-radius: 0 7px 7px 0;
|
|
||||||
background-color: rgba(0, 0, 0, 0);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
transition: background-color 0.3s;
|
|
||||||
|
|
||||||
.item-main-option-icon {
|
|
||||||
color: #000;
|
|
||||||
transition: color 0.15s;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:active {
|
|
||||||
background-color: #8b8b8b;
|
|
||||||
|
|
||||||
.item-main-option-icon {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:active {
|
|
||||||
background-color: #d2d2d2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-main-selected {
|
|
||||||
background-color: rgba(0, 128, 207, 0.32);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: rgba(0, 128, 207, 0.64);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-main-dragBtn {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
position: absolute;
|
|
||||||
right: 5px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,188 +0,0 @@
|
|||||||
<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
|
|
||||||
class="miao-directory-container-items-container"
|
|
||||||
v-for="dir in showData_directory"
|
|
||||||
:key="dir.id"
|
|
||||||
min-height="50px"
|
|
||||||
:disable-lazy="props.index < 20"
|
|
||||||
margin="10px">
|
|
||||||
<miaoDirectoryItem
|
|
||||||
:item="dir"
|
|
||||||
:color="props.color"
|
|
||||||
:selected="selectedItem.includes(dir)"
|
|
||||||
:drop-down-options="itemDropDownOptions(dir).value"
|
|
||||||
@delete="handleItemDelete(dir)"
|
|
||||||
@plugin="(p) => handleItemUsePlugin(dir)(p)"
|
|
||||||
@click="handleItemClick(dir)"
|
|
||||||
@drag-start="(e) => handleItemDragStart(dir)(e)"
|
|
||||||
@rename="handleItemRename(dir)"
|
|
||||||
@on-selected="handleItemSelect(dir)" />
|
|
||||||
</miao-lazy-div>
|
|
||||||
<miao-lazy-div
|
|
||||||
class="miao-directory-container-items-container"
|
|
||||||
v-for="file in showData_files"
|
|
||||||
:key="file.id"
|
|
||||||
min-height="50px">
|
|
||||||
<miaoDirectoryItem
|
|
||||||
:item="file"
|
|
||||||
:color="props.color"
|
|
||||||
:selected="selectedItem.includes(file)"
|
|
||||||
:drop-down-options="itemDropDownOptions(file).value"
|
|
||||||
@click="handleItemClick(file)"
|
|
||||||
@download="handleItemDownload(file)"
|
|
||||||
@delete="handleItemDelete(file)"
|
|
||||||
@drag-start="(e) => handleItemDragStart(file)(e)"
|
|
||||||
@rename="handleItemRename(file)"
|
|
||||||
@plugin="(p) => handleItemUsePlugin(file)(p)"
|
|
||||||
@on-selected="handleItemSelect(file)" />
|
|
||||||
</miao-lazy-div>
|
|
||||||
</n-scrollbar>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { NScrollbar } from 'naive-ui'
|
|
||||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
|
||||||
import miaoDirectoryItem from './miaoDirectoryItem.vue'
|
|
||||||
import miaoLazyDiv from '@/components/miaoLazyDiv.vue'
|
|
||||||
import { computed, ref } from 'vue'
|
|
||||||
import usePluginCenter from '@/hooks/usePluginCenter'
|
|
||||||
import { renderIcon } from '@/utils/miaoTools'
|
|
||||||
|
|
||||||
const pluginCenter = usePluginCenter()
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
color: string
|
|
||||||
index: number
|
|
||||||
showData_directory: VirtualDirectory[]
|
|
||||||
showData_files: VirtualFile[]
|
|
||||||
selectedItem: (VirtualFile | VirtualDirectory)[]
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
'item-click': [item: VirtualDirectory | VirtualFile]
|
|
||||||
'item-download': [item: VirtualFile]
|
|
||||||
'item-delete': [item: VirtualDirectory | VirtualFile]
|
|
||||||
'item-drag-start': [_event: DragEvent, item: VirtualDirectory | VirtualFile]
|
|
||||||
'item-rename': [item: VirtualDirectory | VirtualFile]
|
|
||||||
'item-select': [item: VirtualDirectory | VirtualFile]
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const scrollbarRef = ref()
|
|
||||||
|
|
||||||
const itemDropDownOptions = (item: VirtualDirectory | VirtualFile) =>
|
|
||||||
computed(() => {
|
|
||||||
const items = [...props.selectedItem]
|
|
||||||
const selected = props.selectedItem.includes(item)
|
|
||||||
if (!selected) {
|
|
||||||
items.push(item)
|
|
||||||
}
|
|
||||||
const vDirs = items.filter((v) => v.type === 'directory')
|
|
||||||
const vFiles = items.filter((v) => v.type === 'file')
|
|
||||||
const options = [
|
|
||||||
{
|
|
||||||
label: '重命名',
|
|
||||||
key: 'rename'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '删除',
|
|
||||||
key: 'delete'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
if (item.type === 'file') {
|
|
||||||
options.push(
|
|
||||||
...[
|
|
||||||
{
|
|
||||||
label: '下载',
|
|
||||||
key: 'download'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
)
|
|
||||||
}
|
|
||||||
if (selected === false) {
|
|
||||||
options.push(
|
|
||||||
...[
|
|
||||||
{
|
|
||||||
label: '多选:选择',
|
|
||||||
key: 'select'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
options.push(
|
|
||||||
...[
|
|
||||||
{
|
|
||||||
label: '多选:取消',
|
|
||||||
key: 'select'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
)
|
|
||||||
}
|
|
||||||
options.push(
|
|
||||||
...pluginCenter.getUsablePlugin(vDirs, vFiles).map((v) => ({
|
|
||||||
label: `插件:${v.name}`,
|
|
||||||
key: `plugin:${v.key}`,
|
|
||||||
icon: v.icon ? renderIcon(v.icon) : undefined
|
|
||||||
}))
|
|
||||||
)
|
|
||||||
return options
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
|
|
||||||
emit('item-click', item)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleItemDownload = (item: VirtualFile) => {
|
|
||||||
emit('item-download', item)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleItemDelete = (item: VirtualDirectory | VirtualFile) => {
|
|
||||||
emit('item-delete', item)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleItemDragStart =
|
|
||||||
(item: VirtualDirectory | VirtualFile) => (_event: DragEvent) => {
|
|
||||||
emit('item-drag-start', _event, item)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleItemRename = (item: VirtualDirectory | VirtualFile) => {
|
|
||||||
emit('item-rename', item)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
|
|
||||||
emit('item-select', item)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleItemUsePlugin =
|
|
||||||
(item: VirtualDirectory | VirtualFile) => (plugin: string) => {
|
|
||||||
const items = [...props.selectedItem]
|
|
||||||
const selected = props.selectedItem.includes(item)
|
|
||||||
if (!selected) {
|
|
||||||
items.push(item)
|
|
||||||
}
|
|
||||||
const vDirs = items.filter((v) => v.type === 'directory')
|
|
||||||
const vFiles = items.filter((v) => v.type === 'file')
|
|
||||||
pluginCenter.usePlugin(plugin, vDirs, vFiles)
|
|
||||||
}
|
|
||||||
|
|
||||||
defineExpose({
|
|
||||||
scrollTo: (...args: any) => scrollbarRef.value.scrollTo(...args)
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.miao-directory-container-items {
|
|
||||||
width: 100%;
|
|
||||||
flex: 1;
|
|
||||||
min-height: 0;
|
|
||||||
.miao-directory-container-items-container {
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,204 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="miao-directory-container-top"
|
|
||||||
:style="{
|
|
||||||
backgroundColor: index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
|
|
||||||
}">
|
|
||||||
<div
|
|
||||||
class="container-top-colorfulBar"
|
|
||||||
:style="{ backgroundColor: props.color }"></div>
|
|
||||||
<div class="container-top-breadcrumb">
|
|
||||||
<n-scrollbar
|
|
||||||
ref="scrollbarRef"
|
|
||||||
:x-scrollable="true"
|
|
||||||
class="container-top-breadcrumb-scroll"
|
|
||||||
@wheel="handleWheel">
|
|
||||||
<div class="container-top-breadcrumb-container">
|
|
||||||
<n-breadcrumb
|
|
||||||
separator=">"
|
|
||||||
class="sb-nn"
|
|
||||||
style="margin-left: 5px">
|
|
||||||
<n-breadcrumb-item :clickable="false">
|
|
||||||
<n-icon size="18">
|
|
||||||
<CloudOutline />
|
|
||||||
</n-icon>
|
|
||||||
</n-breadcrumb-item>
|
|
||||||
<n-breadcrumb-item
|
|
||||||
v-for="dir in currentDirectory?.getParents"
|
|
||||||
@click="handleClickBreadcrumbItem(dir)"
|
|
||||||
:clickable="true">
|
|
||||||
<n-ellipsis class="!max-w-[100px]">
|
|
||||||
{{ dir.name }}
|
|
||||||
</n-ellipsis>
|
|
||||||
</n-breadcrumb-item>
|
|
||||||
</n-breadcrumb>
|
|
||||||
</div>
|
|
||||||
</n-scrollbar>
|
|
||||||
</div>
|
|
||||||
<div class="container-top-tools">
|
|
||||||
<n-icon
|
|
||||||
class="container-top-tools-item"
|
|
||||||
size="15"
|
|
||||||
@click="$emit('back')">
|
|
||||||
<ChevronBackOutline />
|
|
||||||
</n-icon>
|
|
||||||
<n-icon
|
|
||||||
class="container-top-tools-item"
|
|
||||||
size="14"
|
|
||||||
@click="$emit('reload')">
|
|
||||||
<ReloadOutline class="container-top-tools-item-reload" />
|
|
||||||
</n-icon>
|
|
||||||
<n-dropdown
|
|
||||||
trigger="click"
|
|
||||||
:options="openMenuOption"
|
|
||||||
@select="(key: string) => emit('menuSelect', key)">
|
|
||||||
<n-icon class="container-top-tools-item" size="14">
|
|
||||||
<EllipsisVertical />
|
|
||||||
</n-icon>
|
|
||||||
</n-dropdown>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import {
|
|
||||||
CloudOutline,
|
|
||||||
ChevronBackOutline,
|
|
||||||
ReloadOutline,
|
|
||||||
EllipsisVertical
|
|
||||||
} from '@vicons/ionicons5'
|
|
||||||
import VirtualDirectory from '@/class/VirtualDirectory'
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import { NScrollbar } from 'naive-ui/es/scrollbar';
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
color: string
|
|
||||||
index: number
|
|
||||||
currentDirectory: VirtualDirectory | undefined
|
|
||||||
openMenuOption: {
|
|
||||||
key: string
|
|
||||||
label: string
|
|
||||||
[key: string]: any
|
|
||||||
}[]
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
back: []
|
|
||||||
reload: []
|
|
||||||
menuSelect: [key: string]
|
|
||||||
'set-current-directory': [virtualDirectory: VirtualDirectory]
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const scrollbarRef = ref<InstanceType<typeof NScrollbar>>()
|
|
||||||
|
|
||||||
const handleClickBreadcrumbItem = (virtualDirectory: VirtualDirectory) => {
|
|
||||||
emit('set-current-directory', virtualDirectory)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleWheel = (event: WheelEvent) => {
|
|
||||||
event.preventDefault()
|
|
||||||
event.stopPropagation()
|
|
||||||
if (scrollbarRef.value) {
|
|
||||||
scrollbarRef.value.scrollBy({
|
|
||||||
left: event.deltaY,
|
|
||||||
behavior: "smooth"
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
defineExpose({
|
|
||||||
// @ts-ignore
|
|
||||||
scrollTo: (...args: any[]) => scrollbarRef.value?.scrollTo(...args)
|
|
||||||
// getRef: () => scrollbarRef.value
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.miao-directory-container-top {
|
|
||||||
height: 30px;
|
|
||||||
width: 100%;
|
|
||||||
user-select: none;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: #f1f1f1;
|
|
||||||
|
|
||||||
.container-top-colorfulBar {
|
|
||||||
height: 70%;
|
|
||||||
width: 5px;
|
|
||||||
margin-left: 10px;
|
|
||||||
border-radius: 3px 0 0 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-top-breadcrumb {
|
|
||||||
position: relative;
|
|
||||||
height: 70%;
|
|
||||||
width: calc(100% - 95px);
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
// overflow: hidden;
|
|
||||||
overflow-y: hidden;
|
|
||||||
overflow-x: hidden;
|
|
||||||
background-color: #ffffff;
|
|
||||||
padding: 0 5px;
|
|
||||||
border-radius: 0 3px 3px 0;
|
|
||||||
|
|
||||||
.container-top-breadcrumb-container {
|
|
||||||
// position: absolute;
|
|
||||||
height: 21px;
|
|
||||||
// right: 0;
|
|
||||||
// top: 0;
|
|
||||||
min-width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-top-tools {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
// width: 70px;
|
|
||||||
padding: 0 5px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.container-top-tools-item {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
margin: 0 1px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background-color: #ffffff00;
|
|
||||||
border-radius: 5px;
|
|
||||||
transition: background-color 0.3s;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.container-top-tools-item-reload {
|
|
||||||
transition: transform 0.6s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: rgba(128, 128, 128, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active .container-top-tools-item-reload {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.container-top-breadcrumb-scroll {
|
|
||||||
.n-scrollbar-rail {
|
|
||||||
transform: translateY(5px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
import { registerComponentOption } from '@/class/PluginCenter'
|
|
||||||
import FileTray from '@vicons/ionicons5/es/FileTray'
|
|
||||||
import MiaoDirectory from '@/plugins/miaoDirectory/miaoDirectory.vue'
|
|
||||||
|
|
||||||
const pluginConfig: registerComponentOption = {
|
|
||||||
key: 'miaoDirectory',
|
|
||||||
name: '文件夹',
|
|
||||||
icon: FileTray,
|
|
||||||
// getComponent: async () =>
|
|
||||||
// (await import('@/plugins/miaoDirectory/miaoDirectory.vue')).default,
|
|
||||||
getComponent: async () => MiaoDirectory,
|
|
||||||
filter: (vDirs, vFiles) => {
|
|
||||||
if (vFiles.length) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
return vDirs.length === 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default pluginConfig
|
|
||||||
|
|
||||||
import { PluginExportType } from '@/types/type'
|
|
||||||
export const type = PluginExportType.component
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
import { Plugin, PluginGroup } from '@/class/PluginCenter'
|
|
||||||
import { PluginExportType } from '@/types/type'
|
|
||||||
import { watch } from 'vue'
|
|
||||||
|
|
||||||
const pluginConfig: Plugin = {
|
|
||||||
name: '初始化完成之后打开miaoDirectory',
|
|
||||||
filter: () => {
|
|
||||||
return false
|
|
||||||
},
|
|
||||||
disable: false,
|
|
||||||
group: [PluginGroup.immediately],
|
|
||||||
func: (_, __, hooks) => {
|
|
||||||
const { getPluginCenter, getRootVDirectory, getViews } = hooks
|
|
||||||
const views = getViews()
|
|
||||||
const pc = getPluginCenter()
|
|
||||||
const root = getRootVDirectory()
|
|
||||||
setTimeout(() => {
|
|
||||||
if (views.length === 0) {
|
|
||||||
pc.usePlugin('miaoDirectory', [root])
|
|
||||||
}
|
|
||||||
watch(
|
|
||||||
() => views.length,
|
|
||||||
() => {
|
|
||||||
if (views.length === 0) {
|
|
||||||
pc.usePlugin('miaoDirectory', [root])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
pc.deregister('miaoDirectory_onInit')
|
|
||||||
})
|
|
||||||
},
|
|
||||||
priority: -1
|
|
||||||
}
|
|
||||||
|
|
||||||
export default pluginConfig
|
|
||||||
|
|
||||||
export const type = PluginExportType.default
|
|
||||||
|
|
||||||
export const key = 'miaoDirectory_onInit'
|
|
||||||
@@ -1,660 +0,0 @@
|
|||||||
<template>
|
|
||||||
<miao-drop-handler
|
|
||||||
@on-virtual-directory="handleDropVDirectory"
|
|
||||||
@on-files="handleDropFiles"
|
|
||||||
@on-virtual-files="handleDropVirtualFiles">
|
|
||||||
<miaoAlertTipProvider ref="miaoAlertTip">
|
|
||||||
<div class="miao-directory-item-container" ref="rootDomRef">
|
|
||||||
<!-- 顶部面包屑导航和工具栏 -->
|
|
||||||
<miao-directory-top
|
|
||||||
ref="miaoDirectoryTopRef"
|
|
||||||
:color="props.color"
|
|
||||||
:current-directory="currentDirectory"
|
|
||||||
@back="handleBack"
|
|
||||||
:open-menu-option="topBarMenuOption"
|
|
||||||
@reload="handleReload"
|
|
||||||
@exit="emit('exit')"
|
|
||||||
:index="index"
|
|
||||||
@set-current-directory="setCurrentDirectory"
|
|
||||||
@search="handleSearch"
|
|
||||||
@menu-select="handleTopBarMenuSelect" />
|
|
||||||
|
|
||||||
<!-- 文件和文件夹列表 -->
|
|
||||||
<miao-directory-items
|
|
||||||
ref="miaoDirectoryItemRef"
|
|
||||||
:color="props.color"
|
|
||||||
:showData_directory="showData_directory"
|
|
||||||
:showData_files="showData_files"
|
|
||||||
:selected-item="selectedItem.value"
|
|
||||||
:index="index"
|
|
||||||
@item-click="handleItemClick"
|
|
||||||
@item-download="handleItemDownload"
|
|
||||||
@item-delete="handleItemDelete"
|
|
||||||
@item-drag-start="handleItemDragStart"
|
|
||||||
@item-rename="handleItemRename"
|
|
||||||
@item-select="handleItemSelect" />
|
|
||||||
|
|
||||||
<!-- 底部工具栏 -->
|
|
||||||
<miao-directory-bottom
|
|
||||||
:index="index"
|
|
||||||
@add-new-item="handleAddNewItem"
|
|
||||||
v-if="false"
|
|
||||||
@pick-files-upload="handlePickFilesUpload" />
|
|
||||||
|
|
||||||
<miao-mask v-model:show="showModel"></miao-mask>
|
|
||||||
<miao-popup-input ref="popupInput"></miao-popup-input>
|
|
||||||
</div>
|
|
||||||
</miaoAlertTipProvider>
|
|
||||||
</miao-drop-handler>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { computed, nextTick, onMounted, reactive, ref } from 'vue'
|
|
||||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
|
||||||
import Config from '@/config'
|
|
||||||
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
|
||||||
import useDataBus from '@/hooks/useDataBus'
|
|
||||||
import useUploadQueue from '@/hooks/useUploadQueue'
|
|
||||||
import useVirtualPages from '@/hooks/useVirtualPages'
|
|
||||||
import { filePicker, renderIcon } from '@/utils/miaoTools'
|
|
||||||
import uniq from 'lodash/uniq'
|
|
||||||
|
|
||||||
import miaoDirectoryTop from './components/miaoDirectoryTop.vue'
|
|
||||||
import MiaoDirectoryItems from './components/miaoDirectoryItemsContainer.vue'
|
|
||||||
import MiaoDirectoryBottom from './components/miaoDirectoryBottom.vue'
|
|
||||||
import MiaoMask from '@/components/miaoMask.vue'
|
|
||||||
import MiaoPopupInput from '@/components/miaoPopupInput.vue'
|
|
||||||
import MiaoDropHandler from '@/components/miaoDropHandler.vue'
|
|
||||||
import miaoAlertTipProvider from '@/components/miaoAlertTipProvider.vue'
|
|
||||||
import {
|
|
||||||
CloseOutline,
|
|
||||||
SearchOutline,
|
|
||||||
FilterOutline,
|
|
||||||
CheckmarkDoneOutline,
|
|
||||||
DocumentText,
|
|
||||||
ExtensionPuzzleOutline,
|
|
||||||
FileTray,
|
|
||||||
AddOutline,
|
|
||||||
CloudUploadOutline
|
|
||||||
} from '@vicons/ionicons5'
|
|
||||||
import usePluginCenter from '@/hooks/usePluginCenter'
|
|
||||||
|
|
||||||
const { baseUrl, api } = Config
|
|
||||||
const dataBus = useDataBus()
|
|
||||||
const views = useVirtualPages()
|
|
||||||
const uploadQueue = useUploadQueue()
|
|
||||||
const miaoFetchApi = useMiaoFetchApi()
|
|
||||||
const pluginCenter = usePluginCenter()
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
color: string
|
|
||||||
id: number
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
exit: []
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const popupInput = ref<InstanceType<typeof MiaoPopupInput>>()
|
|
||||||
// 是否显示模态框
|
|
||||||
const showModel = ref(0)
|
|
||||||
const searchText = ref<string>('')
|
|
||||||
const showDirs = ref<boolean>(true)
|
|
||||||
const showFiles = ref<boolean>(true)
|
|
||||||
const miaoDirectoryItemRef = ref()
|
|
||||||
const miaoDirectoryTopRef = ref<InstanceType<typeof miaoDirectoryTop>>()
|
|
||||||
const miaoAlertTip = ref<InstanceType<typeof miaoAlertTipProvider>>()
|
|
||||||
|
|
||||||
class SelectedItem {
|
|
||||||
constructor() {
|
|
||||||
this._selectedItem = []
|
|
||||||
}
|
|
||||||
_selectedItem: (VirtualDirectory | VirtualFile)[]
|
|
||||||
push(item: VirtualDirectory | VirtualFile) {
|
|
||||||
this._selectedItem = uniq([item, ...this._selectedItem])
|
|
||||||
}
|
|
||||||
pushArray(items: (VirtualDirectory | VirtualFile)[]) {
|
|
||||||
this._selectedItem = uniq([...items, ...this._selectedItem])
|
|
||||||
}
|
|
||||||
remove(item: VirtualDirectory | VirtualFile) {
|
|
||||||
this._selectedItem = this._selectedItem.filter((v) => v !== item)
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* 仅保留filter为true的元素, filter默认为()=>false
|
|
||||||
*/
|
|
||||||
clear(filter?: (item: VirtualDirectory | VirtualFile) => boolean) {
|
|
||||||
filter || (filter = (__) => false)
|
|
||||||
this._selectedItem = this.value.filter(filter)
|
|
||||||
}
|
|
||||||
// 保证内容仍然存在于dir中且各个元素不重复
|
|
||||||
get value() {
|
|
||||||
const _filterList = [
|
|
||||||
...(currentDirectory.value?.directories ?? []),
|
|
||||||
...(currentDirectory.value?.files ?? [])
|
|
||||||
]
|
|
||||||
return uniq(this._selectedItem).filter((v) => {
|
|
||||||
if (currentDirectory.value === undefined) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
// @ts-ignore
|
|
||||||
return _filterList.includes(v)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 已选择的item，用于多选功能
|
|
||||||
const selectedItem = reactive(new SelectedItem())
|
|
||||||
|
|
||||||
const currentDirectories = defineModel<VirtualDirectory[]>(
|
|
||||||
'currentDirectories',
|
|
||||||
{
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
// 目前展示的Dir
|
|
||||||
const currentDirectory = computed(() => {
|
|
||||||
return currentDirectories.value[0]
|
|
||||||
})
|
|
||||||
|
|
||||||
// 当前组件在views中的序号
|
|
||||||
const index = computed(() => {
|
|
||||||
return views.getIndex(props.id)
|
|
||||||
})
|
|
||||||
|
|
||||||
// 用于展示的数据，后续会增加排序等操作
|
|
||||||
const showData_directory = computed<VirtualDirectory[]>(() => {
|
|
||||||
if (showDirs.value === false) {
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
let data = currentDirectory.value?.directories
|
|
||||||
? [...currentDirectory.value?.directories]
|
|
||||||
: []
|
|
||||||
if (searchText.value !== '') {
|
|
||||||
data = data.filter((vd) => vd.name.includes(searchText.value))
|
|
||||||
}
|
|
||||||
return data.sort((a, b) => a.name.localeCompare(b.name))
|
|
||||||
})
|
|
||||||
const showData_files = computed<VirtualFile[]>(() => {
|
|
||||||
if (showFiles.value === false) {
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
let data = currentDirectory.value?.files
|
|
||||||
? [...currentDirectory.value?.files]
|
|
||||||
: []
|
|
||||||
if (searchText.value !== '') {
|
|
||||||
data = data.filter((vd) => vd.name.includes(searchText.value))
|
|
||||||
}
|
|
||||||
return data.sort((a, b) => a.name.localeCompare(b.name))
|
|
||||||
})
|
|
||||||
|
|
||||||
const topBarMenuOption = computed(() => {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
label: '新建',
|
|
||||||
key: 'create',
|
|
||||||
icon: renderIcon(AddOutline)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '上传',
|
|
||||||
key: 'upload',
|
|
||||||
icon: renderIcon(CloudUploadOutline)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '搜索',
|
|
||||||
key: 'search',
|
|
||||||
icon: renderIcon(SearchOutline)
|
|
||||||
},
|
|
||||||
searchText.value !== ''
|
|
||||||
? {
|
|
||||||
label: '重置搜索',
|
|
||||||
key: 'searchReset',
|
|
||||||
icon: renderIcon(SearchOutline)
|
|
||||||
}
|
|
||||||
: undefined,
|
|
||||||
// selectedItem.value.length !== 0
|
|
||||||
// ? {
|
|
||||||
// label: '重置多选',
|
|
||||||
// key: 'selectedItemReset',
|
|
||||||
// icon: renderIcon(CheckmarkDoneOutline)
|
|
||||||
// }
|
|
||||||
// : undefined,
|
|
||||||
{
|
|
||||||
label: '筛选',
|
|
||||||
key: 'filter',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: `${showDirs.value ? '隐藏' : '显示'}文件夹`,
|
|
||||||
key: 'showDirs',
|
|
||||||
icon: renderIcon(FileTray)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: `${showFiles.value ? '隐藏' : '显示'}文件`,
|
|
||||||
key: 'showFiles',
|
|
||||||
icon: renderIcon(DocumentText)
|
|
||||||
}
|
|
||||||
],
|
|
||||||
icon: renderIcon(FilterOutline)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '多选',
|
|
||||||
key: 'multiSelect',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
label: `全选`,
|
|
||||||
key: 'multiSelect:all'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: `全不选`,
|
|
||||||
key: 'multiSelect:reset'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: `反选`,
|
|
||||||
key: 'multiSelect:inversion'
|
|
||||||
},
|
|
||||||
selectedItem.value.length === 2
|
|
||||||
? {
|
|
||||||
label: `区间内全选`,
|
|
||||||
key: 'multiSelect:range'
|
|
||||||
}
|
|
||||||
: undefined
|
|
||||||
].filter((v) => v !== undefined),
|
|
||||||
icon: renderIcon(CheckmarkDoneOutline)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '插件',
|
|
||||||
key: 'plugin',
|
|
||||||
children: [
|
|
||||||
...pluginCenter
|
|
||||||
.getUsablePlugin([currentDirectories.value[0]], [])
|
|
||||||
.map((v) => ({
|
|
||||||
label: `${v.name}`,
|
|
||||||
key: `plugin:${v.key}`,
|
|
||||||
icon: v.icon ? renderIcon(v.icon) : undefined
|
|
||||||
}))
|
|
||||||
],
|
|
||||||
icon: renderIcon(ExtensionPuzzleOutline)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '关闭',
|
|
||||||
key: 'close',
|
|
||||||
icon: renderIcon(CloseOutline)
|
|
||||||
}
|
|
||||||
].filter((v) => v !== undefined)
|
|
||||||
})
|
|
||||||
|
|
||||||
// 设置显示的dir
|
|
||||||
const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
|
|
||||||
try {
|
|
||||||
// 若没有缓存数据则同步刷新，有缓存数据则异步刷新
|
|
||||||
if (!virtualDirectory.isUpdated) {
|
|
||||||
await virtualDirectory.update()
|
|
||||||
} else {
|
|
||||||
virtualDirectory.update()
|
|
||||||
}
|
|
||||||
if (currentDirectories.value[0] !== virtualDirectory) {
|
|
||||||
selectedItem.clear()
|
|
||||||
handleSearchReset()
|
|
||||||
nextTick(() => {
|
|
||||||
miaoDirectoryItemRef.value.scrollTo({
|
|
||||||
top: 0,
|
|
||||||
behavior: 'instant'
|
|
||||||
})
|
|
||||||
// miaoDirectoryTopRef.value &&
|
|
||||||
// miaoDirectoryTopRef.value.scrollTo({
|
|
||||||
// top: 0,
|
|
||||||
// behavior: 'instant'
|
|
||||||
// })
|
|
||||||
miaoDirectoryTopRef.value?.scrollTo({
|
|
||||||
top: 0,
|
|
||||||
left: 999,
|
|
||||||
behavior: 'instant'
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
currentDirectories.value[0] = virtualDirectory
|
|
||||||
} catch (e) {
|
|
||||||
miaoAlertTip.value?.alertTip(`获取文件夹内容出错`, {
|
|
||||||
type: 'error',
|
|
||||||
timeout: 3000
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const reload = () => {
|
|
||||||
setCurrentDirectory(currentDirectory.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
const openUrl = (
|
|
||||||
href: string,
|
|
||||||
config?: {
|
|
||||||
download?: string
|
|
||||||
target?: string
|
|
||||||
}
|
|
||||||
) => {
|
|
||||||
let { target, download } = config ?? {}
|
|
||||||
const a = document.createElement('a')
|
|
||||||
a.setAttribute('href', href)
|
|
||||||
a.setAttribute('target', target ?? '_blank')
|
|
||||||
download && a.setAttribute('download', download)
|
|
||||||
a.click()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleTopBarMenuSelect = (key: string) => {
|
|
||||||
if (key === 'close') {
|
|
||||||
emit('exit')
|
|
||||||
} else if (key === 'search') {
|
|
||||||
handleSearch()
|
|
||||||
} else if (key === 'upload') {
|
|
||||||
handlePickFilesUpload()
|
|
||||||
} else if (key === 'create') {
|
|
||||||
handleAddNewItem()
|
|
||||||
} else if (key === 'searchReset') {
|
|
||||||
handleSearchReset()
|
|
||||||
// } else if (key === 'selectedItemReset') {
|
|
||||||
// selectedItem.clear()
|
|
||||||
} else if (key === 'showDirs') {
|
|
||||||
showDirs.value = !showDirs.value
|
|
||||||
showDirs.value === false &&
|
|
||||||
selectedItem.clear((v) => v.type !== 'directory')
|
|
||||||
} else if (key === 'showFiles') {
|
|
||||||
showFiles.value = !showFiles.value
|
|
||||||
showFiles.value === false && selectedItem.clear((v) => v.type !== 'file')
|
|
||||||
} else if (key.startsWith('plugin:')) {
|
|
||||||
const pluginName = key.split(':')[1]
|
|
||||||
pluginCenter.usePlugin(pluginName, [currentDirectory.value], [])
|
|
||||||
} else if (key.startsWith('multiSelect:')) {
|
|
||||||
const opName = key.split(':')[1]
|
|
||||||
switch (opName) {
|
|
||||||
case 'all':
|
|
||||||
selectedItem.pushArray([
|
|
||||||
...showData_directory.value,
|
|
||||||
...showData_files.value
|
|
||||||
])
|
|
||||||
break
|
|
||||||
case 'reset':
|
|
||||||
selectedItem.clear()
|
|
||||||
break
|
|
||||||
case 'inversion':
|
|
||||||
const sArr = selectedItem.value
|
|
||||||
const arr = [
|
|
||||||
...showData_directory.value,
|
|
||||||
...showData_files.value
|
|
||||||
].filter((i) => !sArr.includes(i))
|
|
||||||
selectedItem.clear()
|
|
||||||
selectedItem.pushArray(arr)
|
|
||||||
break
|
|
||||||
case 'range':
|
|
||||||
const _sArr = selectedItem.value
|
|
||||||
const _arr = [...showData_directory.value, ...showData_files.value]
|
|
||||||
const _nArr = []
|
|
||||||
let _counter = 0
|
|
||||||
for (const i of _arr) {
|
|
||||||
if (_sArr.includes(i)) {
|
|
||||||
_counter++
|
|
||||||
}
|
|
||||||
if (_counter === 1) {
|
|
||||||
_nArr.push(i)
|
|
||||||
} else if (_counter === 2) {
|
|
||||||
_nArr.push(i)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
selectedItem.clear()
|
|
||||||
selectedItem.pushArray(_nArr)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleBack = () => {
|
|
||||||
if (currentDirectory.value?.parent) {
|
|
||||||
setCurrentDirectory(currentDirectory.value.parent)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleReload = () => {
|
|
||||||
reload()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
|
|
||||||
if (selectedItem.value.length > 0) {
|
|
||||||
handleItemSelect(item)
|
|
||||||
} else {
|
|
||||||
if (item.type === 'file') {
|
|
||||||
const useablePlugins = pluginCenter.getUsablePlugin([], [item])
|
|
||||||
if (useablePlugins.length > 0) {
|
|
||||||
pluginCenter.usePlugin(useablePlugins[0].key, [], [item])
|
|
||||||
} else {
|
|
||||||
openUrl(`${baseUrl}${api.get}${item.path}`)
|
|
||||||
}
|
|
||||||
} else if (item.type === 'directory') {
|
|
||||||
setCurrentDirectory(item)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleItemDownload = (item: VirtualFile) => {
|
|
||||||
openUrl(`${baseUrl}${api.get}${item.path}`, {
|
|
||||||
download: item.name
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
|
|
||||||
for (let item of uniq([...selectedItem.value, _item])) {
|
|
||||||
(async () => {
|
|
||||||
const success = await item.delete();
|
|
||||||
if (success) {
|
|
||||||
reload();
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
|
|
||||||
const popupRes = await popupInput.value?.popup({
|
|
||||||
title: '重命名',
|
|
||||||
inputValue: item.name,
|
|
||||||
inputProps: {
|
|
||||||
placeholder: item.name
|
|
||||||
},
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
label: '取消',
|
|
||||||
key: false,
|
|
||||||
type: 'error'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '确认',
|
|
||||||
key: true,
|
|
||||||
type: 'success'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
if (popupRes?.key === false) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const newName = popupRes?.text
|
|
||||||
if (!newName) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const success = await item.rename(newName);
|
|
||||||
if (success) {
|
|
||||||
reload();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleItemDragStart = async (
|
|
||||||
_event: DragEvent,
|
|
||||||
item: VirtualDirectory | VirtualFile
|
|
||||||
) => {
|
|
||||||
const items = uniq([item, ...selectedItem.value])
|
|
||||||
dataBus.set(
|
|
||||||
'dragData_vFiles',
|
|
||||||
items.filter((v) => v.type === 'file')
|
|
||||||
)
|
|
||||||
dataBus.set(
|
|
||||||
'dragData_vDirectory',
|
|
||||||
items.filter((v) => v.type === 'directory')
|
|
||||||
)
|
|
||||||
// selectedItem.clear()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDropFiles = async (files: File[]) => {
|
|
||||||
currentDirectory.value &&
|
|
||||||
uploadQueue.push(files, currentDirectory.value, {
|
|
||||||
onFinish() {
|
|
||||||
reload()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
|
|
||||||
console.log(vDirs, currentDirectory.value)
|
|
||||||
for (let dir of vDirs) {
|
|
||||||
(async () => {
|
|
||||||
const success = await dir.mv(currentDirectory.value);
|
|
||||||
if (success) {
|
|
||||||
reload();
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDropVirtualFiles = (files: VirtualFile[]) => {
|
|
||||||
for (let file of files) {
|
|
||||||
(async () => {
|
|
||||||
const success = await file.moveTo(currentDirectory.value);
|
|
||||||
if (success) {
|
|
||||||
reload();
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handlePickFilesUpload = async () => {
|
|
||||||
const files = await filePicker({
|
|
||||||
multiple: true
|
|
||||||
})
|
|
||||||
const _currDir = currentDirectory.value
|
|
||||||
uploadQueue.push(files, _currDir, {
|
|
||||||
onFinish() {
|
|
||||||
_currDir.update()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleAddNewItem = async () => {
|
|
||||||
const popupRes = await popupInput.value?.popup({
|
|
||||||
title: '新建文件/文件夹',
|
|
||||||
inputProps: {
|
|
||||||
placeholder: ''
|
|
||||||
},
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
label: '取消',
|
|
||||||
key: 'cancel',
|
|
||||||
type: 'error'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '文件',
|
|
||||||
key: 'file',
|
|
||||||
type: 'success'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '文件夹',
|
|
||||||
key: 'dir',
|
|
||||||
type: 'success'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
// todo: 上传前如重名文件夹等等的错误提前检查
|
|
||||||
if (popupRes?.key === 'cancel' || popupRes?.text === '') {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const _currDir = currentDirectory.value
|
|
||||||
const name = popupRes?.text
|
|
||||||
if (!name) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// @ts-ignore
|
|
||||||
const opType: 'file' | 'dir' = popupRes?.key
|
|
||||||
if (opType === 'dir') {
|
|
||||||
const res = await miaoFetchApi.mkdir(currentDirectory.value, name)
|
|
||||||
if (res.message === 'success') {
|
|
||||||
_currDir.update()
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
const { response } = miaoFetchApi.mkFile(currentDirectory.value, name)
|
|
||||||
const res = await response
|
|
||||||
if (res.message === 'success') {
|
|
||||||
_currDir.update()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
|
|
||||||
if (!selectedItem.value.includes(item)) {
|
|
||||||
selectedItem.push(item)
|
|
||||||
} else {
|
|
||||||
selectedItem.remove(item)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSearch = async () => {
|
|
||||||
const popupRes = await popupInput.value?.popup({
|
|
||||||
title: '搜索当前文件夹',
|
|
||||||
inputValue: searchText.value,
|
|
||||||
inputProps: {
|
|
||||||
placeholder: ''
|
|
||||||
},
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
label: '取消',
|
|
||||||
key: 'cancel',
|
|
||||||
type: 'default'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '重置',
|
|
||||||
key: 'reset',
|
|
||||||
type: 'default'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '搜索',
|
|
||||||
key: 'search',
|
|
||||||
type: 'success'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
if (!popupRes) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (popupRes.key === 'search') {
|
|
||||||
searchText.value = popupRes.text
|
|
||||||
} else if (popupRes.key === 'reset') {
|
|
||||||
handleSearchReset()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSearchReset = () => {
|
|
||||||
searchText.value = ''
|
|
||||||
}
|
|
||||||
onMounted(async () => {
|
|
||||||
await setCurrentDirectory(currentDirectory.value)
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
$top-height: 30px;
|
|
||||||
$bottom-bar-height: 60px;
|
|
||||||
|
|
||||||
.miao-directory-item-container {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
width: inherit;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
|
||||||
min-width: 170px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
import { registerComponentOption } from '@/class/PluginCenter'
|
|
||||||
import LogoChrome from '@vicons/ionicons5/es/LogoChrome'
|
|
||||||
|
|
||||||
const pluginConfig: registerComponentOption = {
|
|
||||||
key: 'miaoIframe',
|
|
||||||
name: '框架',
|
|
||||||
icon: LogoChrome,
|
|
||||||
getComponent: async () =>
|
|
||||||
(await import('@/plugins/miaoIframe/miaoIframe.vue')).default,
|
|
||||||
filter: (vDirs, vFiles) => {
|
|
||||||
if (vDirs.length !== 0) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
if (vFiles.length !== 1) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
return vFiles[0].name.endsWith('html')
|
|
||||||
},
|
|
||||||
priority: 2
|
|
||||||
}
|
|
||||||
|
|
||||||
export default pluginConfig
|
|
||||||
|
|
||||||
import { PluginExportType } from '@/types/type'
|
|
||||||
export const type = PluginExportType.component
|
|
||||||
@@ -1,53 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="miao-markdown-container-miaomiaomiao">
|
|
||||||
<iframe
|
|
||||||
ref="iframeRef"
|
|
||||||
:src="iframeSrc"
|
|
||||||
frameborder="0"
|
|
||||||
class="iframe-container-iframe"></iframe>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
|
||||||
import cloneDeep from 'lodash/cloneDeep'
|
|
||||||
import { inject, onMounted, ref } from 'vue'
|
|
||||||
import buildFromTree from '../../utils/buildFromTree'
|
|
||||||
|
|
||||||
const root = inject('rootDirectory') as VirtualDirectory
|
|
||||||
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
|
||||||
required: true
|
|
||||||
})
|
|
||||||
|
|
||||||
const iframeSrc = ref<string>()
|
|
||||||
const iframeRef = ref<HTMLIFrameElement>()
|
|
||||||
|
|
||||||
const sendRootTree = () => {
|
|
||||||
iframeRef.value?.contentWindow &&
|
|
||||||
iframeRef.value.contentWindow.postMessage(cloneDeep(root.tree), '*')
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleIframeMessage = (e: MessageEvent<any>) => {
|
|
||||||
e
|
|
||||||
// const data = e.data;
|
|
||||||
sendRootTree()
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
iframeSrc.value = currentFiles.value[0].url
|
|
||||||
if (typeof window.addEventListener != 'undefined') {
|
|
||||||
window.addEventListener('message', handleIframeMessage, false)
|
|
||||||
}
|
|
||||||
console.log(buildFromTree(cloneDeep(root.tree)))
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.miao-markdown-container-miaomiaomiao {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
.iframe-container-iframe {
|
|
||||||
width: inherit;
|
|
||||||
height: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,48 +0,0 @@
|
|||||||
import { registerComponentOption } from '@/class/PluginCenter'
|
|
||||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
|
||||||
import { Image } from '@vicons/ionicons5'
|
|
||||||
|
|
||||||
const pluginConfig: registerComponentOption = {
|
|
||||||
key: 'miaoImages',
|
|
||||||
name: '图片浏览',
|
|
||||||
icon: Image,
|
|
||||||
getComponent: async () =>
|
|
||||||
(await import('@/plugins/miaoImages/miaoImages.vue')).default,
|
|
||||||
filter: (vDirs: VirtualDirectory[], vFiles: VirtualFile[]) => {
|
|
||||||
if (vDirs.length === 0 && vFiles.length === 0) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
if (vDirs.length) {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
for (let vf of vFiles)
|
|
||||||
for (let end of [
|
|
||||||
'xbm',
|
|
||||||
'tif',
|
|
||||||
'pjp',
|
|
||||||
'svgz',
|
|
||||||
'jpg',
|
|
||||||
'jpeg',
|
|
||||||
'ico',
|
|
||||||
'tiff',
|
|
||||||
'gif',
|
|
||||||
'svg',
|
|
||||||
'jfif',
|
|
||||||
'webp',
|
|
||||||
'png',
|
|
||||||
'.bmp',
|
|
||||||
'pjpeg',
|
|
||||||
'avif'
|
|
||||||
]) {
|
|
||||||
if (vf.name.endsWith(end)) {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default pluginConfig
|
|
||||||
|
|
||||||
import { PluginExportType } from '@/types/type'
|
|
||||||
export const type = PluginExportType.component
|
|
||||||
@@ -1,342 +0,0 @@
|
|||||||
<template>
|
|
||||||
<miao-drop-handler @on-virtual-directory="handleDrop" @on-virtual-files="handleDrop">
|
|
||||||
<miao-message-provider ref="miaoMessageRef">
|
|
||||||
<div class="miaoImage" ref="rootRef">
|
|
||||||
<n-scrollbar ref="NScrollbarRef" style="max-height: 100%">
|
|
||||||
<div class="miaoImage-container" v-for="imageGroup in imageGroupList">
|
|
||||||
<div class="miaoImage-container-day">
|
|
||||||
<!-- <div class="miaoImage-container-divide miaoImage-container-divide-before">
|
|
||||||
<div class="miaoImage-container-divide-line"></div>
|
|
||||||
</div> -->
|
|
||||||
<span class="miaoImage-container-day-text">
|
|
||||||
{{ imageGroup.day }}
|
|
||||||
</span>
|
|
||||||
<!-- <div class="miaoImage-container-divide">
|
|
||||||
<div class="miaoImage-container-divide-line"></div>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
<div class="miaoImage-container-row" v-for="vFile in imageGroup.items" :key="vFile.id">
|
|
||||||
<MiaoDraggableDiv :bind-virtual-files="[vFile]" class="size-full flex justify-center items-center">
|
|
||||||
<img :src="vFile.url" class="miaoImage-container-row-image" loading="lazy" :class="activeImage === vFile
|
|
||||||
? 'miaoImage-container-row-image-active'
|
|
||||||
: ''
|
|
||||||
" @click="activeImage = vFile" />
|
|
||||||
</MiaoDraggableDiv >
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</n-scrollbar>
|
|
||||||
<miao-mask :show="activeImage !== undefined" @click="activeImage = undefined" class="miaoImage-mask"
|
|
||||||
@wheel="handleWheel">
|
|
||||||
<ChevronBack class="miaoImage-mask-btn miaoImage-mask-btn-back" @click="handleActiveImageBack" />
|
|
||||||
<img :src="activeImage?.url" class="miaoImage-mask-active" @click="(e) => e.stopPropagation()"
|
|
||||||
draggable="false" :style="{ transform: `scale(${imgViewScale})` }" />
|
|
||||||
<ChevronForward class="miaoImage-mask-btn miaoImage-mask-btn-forward"
|
|
||||||
@click="handleActiveImageForward" />
|
|
||||||
</miao-mask>
|
|
||||||
</div>
|
|
||||||
</miao-message-provider>
|
|
||||||
</miao-drop-handler>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import miaoMask from '@/components/miaoMask.vue'
|
|
||||||
import miaoDropHandler from '@/components/miaoDropHandler.vue'
|
|
||||||
import miaoMessageProvider from '@/components/miaoAlertTipProvider.vue'
|
|
||||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
|
||||||
import uniq from 'lodash/uniq'
|
|
||||||
import { computed, nextTick, onMounted, ref, watch } from 'vue'
|
|
||||||
import { NScrollbar } from 'naive-ui'
|
|
||||||
import { ChevronBack, ChevronForward } from '@vicons/ionicons5'
|
|
||||||
|
|
||||||
const imageSuffixList = [
|
|
||||||
'xbm',
|
|
||||||
'tif',
|
|
||||||
'pjp',
|
|
||||||
'svgz',
|
|
||||||
'jpg',
|
|
||||||
'jpeg',
|
|
||||||
'ico',
|
|
||||||
'tiff',
|
|
||||||
'gif',
|
|
||||||
'svg',
|
|
||||||
'jfif',
|
|
||||||
'webp',
|
|
||||||
'png',
|
|
||||||
'bmp',
|
|
||||||
'pjpeg',
|
|
||||||
'avif'
|
|
||||||
]
|
|
||||||
|
|
||||||
const currentDirectories = defineModel<VirtualDirectory[]>(
|
|
||||||
'currentDirectories',
|
|
||||||
{
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
)
|
|
||||||
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
|
||||||
required: true
|
|
||||||
})
|
|
||||||
|
|
||||||
const NScrollbarRef = ref()
|
|
||||||
const rootRef = ref<any>()
|
|
||||||
const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
|
|
||||||
const imgViewScale = ref(1)
|
|
||||||
const imageFileList = ref<VirtualFile[]>([])
|
|
||||||
const activeImage = ref<VirtualFile>()
|
|
||||||
|
|
||||||
const imageGroupList = computed(() => {
|
|
||||||
return groupByDay(imageFileList.value)
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(activeImage, () => {
|
|
||||||
nextTick(scrollToActiveImage)
|
|
||||||
imgViewScale.value = 1
|
|
||||||
})
|
|
||||||
|
|
||||||
const groupByDay = (array: VirtualFile[]) => {
|
|
||||||
const result = []
|
|
||||||
let currentDay = null
|
|
||||||
let currentGroup: VirtualFile[] = []
|
|
||||||
|
|
||||||
for (const item of array) {
|
|
||||||
const date = new Date(item.stats.mtimeMs)
|
|
||||||
const day = `${date.getFullYear()}年 ${String(
|
|
||||||
date.getMonth() + 1
|
|
||||||
).padStart(2, '0')}月 ${String(date.getDate()).padStart(2, '0')}日`
|
|
||||||
|
|
||||||
if (day !== currentDay) {
|
|
||||||
if (currentGroup.length > 0) {
|
|
||||||
result.push({
|
|
||||||
day: currentDay,
|
|
||||||
items: currentGroup
|
|
||||||
})
|
|
||||||
}
|
|
||||||
currentDay = day
|
|
||||||
currentGroup = [item]
|
|
||||||
} else {
|
|
||||||
currentGroup.push(item)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (currentGroup.length > 0) {
|
|
||||||
result.push({
|
|
||||||
day: currentDay,
|
|
||||||
items: currentGroup
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return result
|
|
||||||
}
|
|
||||||
|
|
||||||
const scrollToActiveImage = () => {
|
|
||||||
const dom = rootRef.value?.querySelector(
|
|
||||||
'.miaoImage-container-row-image-active'
|
|
||||||
)
|
|
||||||
dom &&
|
|
||||||
NScrollbarRef.value.scrollTo({
|
|
||||||
top: dom.offsetTop - 30,
|
|
||||||
behavior: 'smooth'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleActiveImageBack = (e: any) => {
|
|
||||||
e.stopPropagation()
|
|
||||||
if (!activeImage.value) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const index = imageFileList.value.indexOf(activeImage.value)
|
|
||||||
activeImage.value =
|
|
||||||
imageFileList.value[
|
|
||||||
(index - 1 + imageFileList.value.length) % imageFileList.value.length
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleActiveImageForward = (e: any) => {
|
|
||||||
e.stopPropagation()
|
|
||||||
if (!activeImage.value) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const index = imageFileList.value.indexOf(activeImage.value)
|
|
||||||
activeImage.value =
|
|
||||||
imageFileList.value[
|
|
||||||
(index + 1 + imageFileList.value.length) % imageFileList.value.length
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDrop = async (vItems: (VirtualFile | VirtualDirectory)[]) => {
|
|
||||||
const length_before = imageFileList.value.length
|
|
||||||
if (vItems[0].type === 'directory') {
|
|
||||||
// @ts-ignore
|
|
||||||
currentDirectories.value = [...currentDirectories.value, ...vItems]
|
|
||||||
for (const i of vItems) {
|
|
||||||
// @ts-ignore
|
|
||||||
await updateImageSrcList(i)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// @ts-ignore
|
|
||||||
currentFiles.value = [...currentFiles, ...vItems]
|
|
||||||
// @ts-ignore
|
|
||||||
await updateImageSrcList(vItems)
|
|
||||||
}
|
|
||||||
miaoMessageRef.value?.alertTip(
|
|
||||||
length_before === imageFileList.value.length
|
|
||||||
? '未发现任何可添加图片'
|
|
||||||
: `导入${imageFileList.value.length - length_before}张图片`,
|
|
||||||
{
|
|
||||||
type:
|
|
||||||
length_before === imageFileList.value.length ? 'info' : 'success',
|
|
||||||
timeout: 5000
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const updateImageSrcList = async (source: VirtualFile[] | VirtualDirectory) => {
|
|
||||||
let newFileList: VirtualFile[]
|
|
||||||
if ('type' in source) {
|
|
||||||
await source.update()
|
|
||||||
newFileList = [
|
|
||||||
...(source.files?.filter((v) =>
|
|
||||||
imageSuffixList.includes(v.name.split('.').pop() ?? '')
|
|
||||||
) ?? [])
|
|
||||||
]
|
|
||||||
} else {
|
|
||||||
newFileList = [
|
|
||||||
...(source.filter((v) =>
|
|
||||||
imageSuffixList.includes(v.name.split('.').pop() ?? '')
|
|
||||||
) ?? [])
|
|
||||||
]
|
|
||||||
}
|
|
||||||
imageFileList.value = uniq([...imageFileList.value, ...newFileList]).sort(
|
|
||||||
(a, b) => -a.stats.mtimeMs + b.stats.mtimeMs
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleWheel = (e: WheelEvent) => {
|
|
||||||
if (e.deltaY < 0) {
|
|
||||||
imgViewScale.value *= 1.42857
|
|
||||||
} else {
|
|
||||||
imgViewScale.value /= 1.42857
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
const length_before = imageFileList.value.length
|
|
||||||
for (const i of [currentFiles.value, ...currentDirectories.value]) {
|
|
||||||
await updateImageSrcList(i)
|
|
||||||
}
|
|
||||||
miaoMessageRef.value?.alertTip(
|
|
||||||
length_before === imageFileList.value.length
|
|
||||||
? '未发现任何新增图片'
|
|
||||||
: `导入${imageFileList.value.length - length_before}张图片`,
|
|
||||||
{
|
|
||||||
type:
|
|
||||||
length_before === imageFileList.value.length ? 'info' : 'success',
|
|
||||||
timeout: 5000
|
|
||||||
}
|
|
||||||
)
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.miaoImage {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 10px;
|
|
||||||
|
|
||||||
.miaoImage-container {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
|
|
||||||
.miaoImage-container-day {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
margin: 0 20px;
|
|
||||||
|
|
||||||
.miaoImage-container-divide {
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.miaoImage-container-divide-line {
|
|
||||||
height: 3px;
|
|
||||||
width: 100%;
|
|
||||||
border-radius: 5px;
|
|
||||||
background-color: rgb(244 244 244);
|
|
||||||
}
|
|
||||||
|
|
||||||
.miaoImage-container-divide-before {
|
|
||||||
flex: 0.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.miaoImage-container-day-text {
|
|
||||||
margin: 0 0 0 10px;
|
|
||||||
font-size: 15px;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.miaoImage-container-row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 25%;
|
|
||||||
aspect-ratio: 1;
|
|
||||||
|
|
||||||
.miaoImage-container-row-image {
|
|
||||||
width: 80%;
|
|
||||||
aspect-ratio: 1;
|
|
||||||
object-fit: cover;
|
|
||||||
transition: width 0.25s;
|
|
||||||
box-shadow: 0 0 10px -5px;
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
width: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-active {
|
|
||||||
width: 90%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.miaoImage-mask {
|
|
||||||
background-color: rgba(0, 0, 0, 0.444);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.miaoImage-mask-active {
|
|
||||||
max-width: 80%;
|
|
||||||
max-height: 80%;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.miaoImage-mask-btn {
|
|
||||||
color: #ffffff99;
|
|
||||||
width: 7%;
|
|
||||||
position: absolute;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&-back {
|
|
||||||
left: 1%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-forward {
|
|
||||||
right: 1%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,211 +0,0 @@
|
|||||||
<template>
|
|
||||||
<miao-alert-tip-provider ref="miaoMessageRef">
|
|
||||||
<div class="clipboard-container">
|
|
||||||
<n-card class="clipboard-card" title="剪贴板" size="medium">
|
|
||||||
<div class="key-section">
|
|
||||||
<n-input v-model:value="key" type="text" placeholder="请输入Key值" class="key-input" />
|
|
||||||
<div class="button-group">
|
|
||||||
<n-button @click="getData" type="primary" size="small">查询</n-button>
|
|
||||||
<n-button @click="setData" type="info" size="small">设置</n-button>
|
|
||||||
<n-button @click="deleteData" type="error" size="small">删除</n-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="data-section">
|
|
||||||
<n-input v-model:value="content" type="textarea" placeholder="数据内容"
|
|
||||||
:autosize="{ minRows: 5, maxRows: 15 }" class="data-input" />
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-end items-center gap-3">
|
|
||||||
<n-button @click="clearInput" type="error" size="small">清空输入</n-button>
|
|
||||||
<div class="flex justify-center items-center">
|
|
||||||
<n-checkbox v-model:checked="useDisk">保存到磁盘</n-checkbox>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="status-section" v-if="statusMessage">
|
|
||||||
<n-alert :type="statusType" class="status-alert">
|
|
||||||
{{ statusMessage }}
|
|
||||||
</n-alert>
|
|
||||||
</div>
|
|
||||||
</n-card>
|
|
||||||
</div>
|
|
||||||
</miao-alert-tip-provider>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, computed, inject } from 'vue'
|
|
||||||
import {
|
|
||||||
NCard,
|
|
||||||
NInput,
|
|
||||||
NButton,
|
|
||||||
NCheckbox,
|
|
||||||
NAlert
|
|
||||||
} from 'naive-ui'
|
|
||||||
import miaoAlertTipProvider from '@/components/miaoAlertTipProvider.vue'
|
|
||||||
import { alertTipType } from '@/types/type'
|
|
||||||
|
|
||||||
const key = ref('')
|
|
||||||
const content = ref('')
|
|
||||||
const useDisk = ref(false)
|
|
||||||
const statusMessage = ref('')
|
|
||||||
const statusType = ref<'success' | 'error' | 'info' | 'warning'>('info')
|
|
||||||
const miaoMessageRef = ref<InstanceType<typeof miaoAlertTipProvider>>()
|
|
||||||
const globalAlertTip = inject<alertTipType>('globalAlertTip')
|
|
||||||
|
|
||||||
// 计算磁盘参数
|
|
||||||
const diskParam = computed(() => useDisk.value ? '1' : '0')
|
|
||||||
|
|
||||||
// 显示状态消息
|
|
||||||
const showStatus = (msg: string, type: 'success' | 'error' | 'info' | 'warning' = 'info') => {
|
|
||||||
statusMessage.value = msg
|
|
||||||
statusType.value = type
|
|
||||||
setTimeout(() => {
|
|
||||||
statusMessage.value = ''
|
|
||||||
}, 3000)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 显示消息提示
|
|
||||||
const showMessage = (content: string, type: 'success' | 'error' | 'info' = 'info') => {
|
|
||||||
if (miaoMessageRef.value?.alertTip) {
|
|
||||||
miaoMessageRef.value.alertTip(content, { type, timeout: 3000 })
|
|
||||||
} else if (globalAlertTip) {
|
|
||||||
globalAlertTip(content, { type, timeout: 3000 })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取数据
|
|
||||||
const getData = async () => {
|
|
||||||
if (!key.value.trim()) {
|
|
||||||
showMessage('请输入Key值', 'error')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(`/map/get/${key.value}?disk=${diskParam.value}`)
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
if (response.status === 404) {
|
|
||||||
showStatus('未找到对应的数据', 'warning')
|
|
||||||
showMessage('未找到对应的数据', 'error')
|
|
||||||
} else {
|
|
||||||
showStatus(`获取失败：${response.status}`, 'error')
|
|
||||||
showMessage(`获取失败：${response.status}`, 'error')
|
|
||||||
}
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await response.text()
|
|
||||||
content.value = data
|
|
||||||
showStatus('获取成功', 'success')
|
|
||||||
showMessage('获取成功', 'success')
|
|
||||||
} catch (error) {
|
|
||||||
showStatus(`获取失败：${error}`, 'error')
|
|
||||||
showMessage(`获取失败：${error}`, 'error')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 设置数据
|
|
||||||
const setData = async () => {
|
|
||||||
if (!key.value.trim()) {
|
|
||||||
showMessage('请输入Key值', 'error')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(`/map/set/${key.value}?disk=${diskParam.value}`, {
|
|
||||||
method: 'POST',
|
|
||||||
body: content.value
|
|
||||||
})
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
showStatus(`设置失败：${response.status}`, 'error')
|
|
||||||
showMessage(`设置失败：${response.status}`, 'error')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
showStatus('设置成功', 'success')
|
|
||||||
showMessage('设置成功', 'success')
|
|
||||||
} catch (error) {
|
|
||||||
showStatus(`设置失败：${error}`, 'error')
|
|
||||||
showMessage(`设置失败：${error}`, 'error')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 删除数据
|
|
||||||
const deleteData = async () => {
|
|
||||||
if (!key.value.trim()) {
|
|
||||||
showMessage('请输入Key值', 'error')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(`/map/delete/${key.value}?disk=${diskParam.value}`, {
|
|
||||||
method: 'POST'
|
|
||||||
})
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
showStatus(`删除失败：${response.status}`, 'error')
|
|
||||||
showMessage(`删除失败：${response.status}`, 'error')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
content.value = ''
|
|
||||||
showStatus('删除成功', 'success')
|
|
||||||
showMessage('删除成功', 'success')
|
|
||||||
} catch (error) {
|
|
||||||
showStatus(`删除失败：${error}`, 'error')
|
|
||||||
showMessage(`删除失败：${error}`, 'error')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 清空输入
|
|
||||||
const clearInput = () => {
|
|
||||||
key.value = ''
|
|
||||||
content.value = ''
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.clipboard-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: flex-start;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clipboard-card {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 600px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.key-section {
|
|
||||||
display: flex;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.key-input {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-group {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data-section {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// .disk-option {
|
|
||||||
// // margin-bottom: 16px;
|
|
||||||
// }
|
|
||||||
|
|
||||||
.status-section {
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-alert {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
import { registerComponentOption } from '@/class/PluginCenter'
|
|
||||||
import { PluginExportType } from '@/types/type'
|
|
||||||
import { CopyOutline } from '@vicons/ionicons5'
|
|
||||||
|
|
||||||
const pluginConfig: registerComponentOption = {
|
|
||||||
key: 'miaoKVMap',
|
|
||||||
name: '键值存储',
|
|
||||||
icon: CopyOutline,
|
|
||||||
getComponent: async () => (await import('./KVMapPlugin.vue')).default,
|
|
||||||
filter: (_, __) => _.length === 0 && __.length === 0,
|
|
||||||
disable: false,
|
|
||||||
single: true,
|
|
||||||
priority: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
export default pluginConfig
|
|
||||||
|
|
||||||
export const type = PluginExportType.component
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
import { Plugin, PluginGroup } from '@/class/PluginCenter'
|
|
||||||
import { PluginExportType } from '@/types/type'
|
|
||||||
import { shallowRef } from 'vue'
|
|
||||||
import { CopyOutline } from '@vicons/ionicons5'
|
|
||||||
|
|
||||||
const pluginConfig: Plugin = {
|
|
||||||
name: '键值存储',
|
|
||||||
icon: shallowRef(CopyOutline),
|
|
||||||
filter: (_, __, views) => {
|
|
||||||
return views.find('miaoKVMap').length === 0
|
|
||||||
},
|
|
||||||
disable: false,
|
|
||||||
group: [PluginGroup.mainMenu],
|
|
||||||
func(_, __, hooks) {
|
|
||||||
const { getPluginCenter } = hooks
|
|
||||||
const PluginCenter = getPluginCenter()
|
|
||||||
PluginCenter.usePlugin('miaoKVMap', [], [])
|
|
||||||
},
|
|
||||||
priority: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
export default pluginConfig
|
|
||||||
|
|
||||||
export const type = PluginExportType.default
|
|
||||||
// export const key = 'miaoClipboard_mainMenu'
|
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
import { registerComponentOption } from '@/class/PluginCenter'
|
|
||||||
import DocumentText from '@vicons/ionicons5/es/DocumentText'
|
|
||||||
|
|
||||||
const pluginConfig: registerComponentOption = {
|
|
||||||
key: 'miaoMarkdown',
|
|
||||||
name: 'markdown浏览',
|
|
||||||
icon: DocumentText,
|
|
||||||
getComponent: async () =>
|
|
||||||
(await import('@/plugins/miaoMarkdown/miaoMarkdown.vue')).default,
|
|
||||||
filter: (vDirs, vFiles) => {
|
|
||||||
if (vDirs.length !== 0) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
if (vFiles.length !== 1) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
return vFiles[0].name.endsWith('md')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default pluginConfig
|
|
||||||
|
|
||||||
import { PluginExportType } from '@/types/type'
|
|
||||||
export const type = PluginExportType.component
|
|
||||||
@@ -1,70 +0,0 @@
|
|||||||
<template>
|
|
||||||
<n-scrollbar>
|
|
||||||
<div
|
|
||||||
class="miao-markdown-container-miaomiaomiao"
|
|
||||||
v-html="renderedMarkdown"></div>
|
|
||||||
<div style="height: 50px; width: 100%"></div>
|
|
||||||
</n-scrollbar>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { NScrollbar } from 'naive-ui'
|
|
||||||
import { VirtualFile } from '@/class/VirtualDirectory'
|
|
||||||
import { onMounted, ref } from 'vue'
|
|
||||||
import MarkdownIt from 'markdown-it'
|
|
||||||
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
|
||||||
|
|
||||||
const decoder = new TextDecoder('utf-8')
|
|
||||||
|
|
||||||
const miaoFetchApi = useMiaoFetchApi()
|
|
||||||
|
|
||||||
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
|
||||||
required: true
|
|
||||||
})
|
|
||||||
|
|
||||||
const markdownSrc = ref<string>()
|
|
||||||
const renderedMarkdown = ref<string>('')
|
|
||||||
|
|
||||||
const md = new MarkdownIt()
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
markdownSrc.value = currentFiles.value[0].url
|
|
||||||
const text = decoder.decode(
|
|
||||||
await miaoFetchApi.getFile(currentFiles.value[0]).response
|
|
||||||
)
|
|
||||||
renderedMarkdown.value = md.render(text)
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.miao-markdown-container-miaomiaomiao {
|
|
||||||
width: 95%;
|
|
||||||
margin: 20px;
|
|
||||||
|
|
||||||
table,
|
|
||||||
td,
|
|
||||||
th {
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
th,
|
|
||||||
td {
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr:nth-child(even) {
|
|
||||||
background-color: #f2f2f2;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
background-color: #04aa6d;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,36 +0,0 @@
|
|||||||
import { registerComponentOption } from '@/class/PluginCenter'
|
|
||||||
import { PluginExportType } from '@/types/type'
|
|
||||||
import Disc from '@vicons/ionicons5/es/Disc'
|
|
||||||
|
|
||||||
const pluginConfig: registerComponentOption = {
|
|
||||||
key: 'miaoMusicPlayer',
|
|
||||||
name: '音乐',
|
|
||||||
icon: Disc,
|
|
||||||
getComponent: async () => (await import('./miaoMusicPlayer.vue')).default,
|
|
||||||
filter: (vDirs, vFiles) => {
|
|
||||||
if (vDirs.length === 0 && vFiles.length === 0) {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
if (vDirs.length !== 0) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
if (vFiles.length === 0) {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
for (let i of vFiles) {
|
|
||||||
for (let s of ['mp3', 'flac', 'ogg', 'mp4']) {
|
|
||||||
if (i.name.endsWith(s)) {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false
|
|
||||||
},
|
|
||||||
disable: false,
|
|
||||||
single: true,
|
|
||||||
priority: 5
|
|
||||||
}
|
|
||||||
|
|
||||||
export default pluginConfig
|
|
||||||
|
|
||||||
export const type = PluginExportType.component
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
import { Plugin, PluginGroup } from '@/class/PluginCenter'
|
|
||||||
import { PluginExportType } from '@/types/type'
|
|
||||||
import { shallowRef } from 'vue'
|
|
||||||
import Disc from '@vicons/ionicons5/es/Disc'
|
|
||||||
|
|
||||||
const pluginConfig: Plugin = {
|
|
||||||
name: '音乐',
|
|
||||||
icon: shallowRef(Disc),
|
|
||||||
filter: (_, __, views) => {
|
|
||||||
return views.find('miaoMusicPlayer').length === 0
|
|
||||||
},
|
|
||||||
disable: false,
|
|
||||||
group: [PluginGroup.mainMenu],
|
|
||||||
func(_, __, hooks) {
|
|
||||||
const { getPluginCenter } = hooks
|
|
||||||
const PluginCenter = getPluginCenter()
|
|
||||||
PluginCenter.usePlugin('miaoMusicPlayer', [], [])
|
|
||||||
},
|
|
||||||
priority: -1
|
|
||||||
}
|
|
||||||
|
|
||||||
export default pluginConfig
|
|
||||||
|
|
||||||
export const type = PluginExportType.default
|
|
||||||
|
|
||||||
export const key = 'musicPlayer-mainMenu'
|
|
||||||
Loaded 100 of 148 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user