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
|
||||
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
|
||||
|
||||
web/*
|
||||
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))
|
||||
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)
|
||||
})
|
||||
c.JSON(http.StatusOK, gin.H{"eventId": eventId})
|
||||
@@ -64,43 +55,3 @@ func copyFile(src, dst string) error {
|
||||
|
||||
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 {
|
||||
case ".js":
|
||||
case ".cjs":
|
||||
case ".mjs":
|
||||
c.Writer.Header().Set("Content-Type", "application/javascript")
|
||||
case ".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")
|
||||
case ".json":
|
||||
c.Writer.Header().Set("Content-Type", "application/json")
|
||||
case ".wasm":
|
||||
c.Writer.Header().Set("Content-Type", "application/wasm")
|
||||
default:
|
||||
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/validator/v10 v10.22.0 // 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/json-iterator/go v1.1.12 // 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/twitchyliquid64/golang-asm v0.15.1 // 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/crypto v0.26.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
|
||||
google.golang.org/protobuf v1.34.2 // 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/go.mod h1:oq7eo15ShAhp70Anwd5lgX2pLfOS3QCiwU/PULtXL6M=
|
||||
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/go.mod h1:JWzv5rKQr+MmW+LvM412ToT/IkYDZjaclF2pKDss8IY=
|
||||
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/ugorji/go/codec v1.2.12 h1:9LC83zGrHhuUA9l16C9AHXAqEV/2wBQ4nkvumAE65EE=
|
||||
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/go.mod h1:FEVrYAQjsQXMVJ1nsMoVVXPZg6p2JE2mx8psSWTDQys=
|
||||
golang.org/x/crypto v0.26.0 h1:RrRspgV4mU+YwB4FYnuBoKsUapNIL5cohGAmSH3azsw=
|
||||
golang.org/x/crypto v0.26.0/go.mod h1:GY7jblb9wI+FOo5y8/S2oY4zWP07AkOJ4+jxCqdqn54=
|
||||
golang.org/x/net v0.28.0 h1:a9JDOJc5GMUJ0+UDqmLT86WiEy7iWyIhz8gz8E4e5hE=
|
||||
golang.org/x/net v0.28.0/go.mod h1:yqtgsTWOOnlGLG9GFRrK3++bGOUEkNBoHZc8MEDWPNg=
|
||||
golang.org/x/sys v0.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.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
|
||||
golang.org/x/sys v0.24.0 h1:Twjiwq9dn6R1fQcyiK+wQyHWfaz/BJB+YIpzU/Cv3Xg=
|
||||
golang.org/x/sys v0.24.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
|
||||
golang.org/x/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/go.mod h1:BuEKDfySbSR4drPmRPG/7iBdf8hvFMuRexcpahXilzY=
|
||||
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"
|
||||
|
||||
func main() {
|
||||
gin.SetMode(gin.ReleaseMode)
|
||||
// gin.SetMode(gin.ReleaseMode)
|
||||
|
||||
fsOperateEventCenter := fsOperateEventCenter.NewFsOperateEventCenter()
|
||||
|
||||
@@ -31,7 +31,6 @@ func main() {
|
||||
|
||||
router.GET("/query", api.QueryHandler(fsOperateEventCenter))
|
||||
router.GET("/get/*path", api.GetHandler)
|
||||
router.HEAD("/get/*path", api.GetHandler)
|
||||
router.POST("/mkdir/*path", api.MkdirHandler)
|
||||
router.POST("/upload/*path", api.UploadHandler)
|
||||
router.POST("/cut/*path", api.CutHandler(fsOperateEventCenter))
|
||||
@@ -39,14 +38,6 @@ func main() {
|
||||
router.POST("/rename/*path", api.RenameHandler(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/'
|
||||
router.GET("/", func(c *gin.Context) {
|
||||
c.Redirect(http.StatusMovedPermanently, "/web/")
|
||||
@@ -62,22 +53,7 @@ func main() {
|
||||
|
||||
address := "[::]" + port
|
||||
printListeningAddresses(port)
|
||||
|
||||
// 在非阻塞的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 {}
|
||||
}
|
||||
router.Run(address)
|
||||
}
|
||||
|
||||
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,129 +0,0 @@
|
||||
<template>
|
||||
<miao-mask :show="show" @click="$emit('close')" class="miaoImage-mask" @wheel="handleWheel">
|
||||
<ChevronBack class="miaoImage-mask-btn miaoImage-mask-btn-back" @click.stop="$emit('back')" />
|
||||
<MiaoDraggableDiv
|
||||
v-if="file"
|
||||
:is-draggable="isDraggable"
|
||||
:bind-virtual-files="[file]"
|
||||
@dragend="handleDragEnd"
|
||||
@pointerdown="handlePressStart"
|
||||
@pointerup="handlePressEnd"
|
||||
@pointercancel="handlePressEnd"
|
||||
@pointerleave="handlePressEnd"
|
||||
@touchstart.passive="handleTouchStart"
|
||||
@touchend="handleTouchEnd"
|
||||
>
|
||||
<img :src="file.url" class="miaoImage-mask-active" @click="(e) => e.stopPropagation()" draggable="false" :style="{ transform: `scale(${imgViewScale})` }" />
|
||||
</MiaoDraggableDiv>
|
||||
<ChevronForward class="miaoImage-mask-btn miaoImage-mask-btn-forward" @click.stop="$emit('forward')" />
|
||||
</miao-mask>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
import miaoMask from '@/components/miaoMask.vue'
|
||||
import MiaoDraggableDiv from '@/components/miaoDraggableDiv.vue'
|
||||
import { ChevronBack, ChevronForward } from '@vicons/ionicons5'
|
||||
import type { VirtualFile } from '@/class/VirtualDirectory'
|
||||
|
||||
const props = defineProps<{
|
||||
show: boolean
|
||||
file?: VirtualFile
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: []
|
||||
back: []
|
||||
forward: []
|
||||
}>()
|
||||
|
||||
const imgViewScale = ref(1)
|
||||
const isDraggable = ref(false)
|
||||
let pressTimer: number | undefined
|
||||
|
||||
const clearPress = () => {
|
||||
if (pressTimer !== undefined) {
|
||||
clearTimeout(pressTimer)
|
||||
pressTimer = undefined
|
||||
}
|
||||
}
|
||||
|
||||
const handlePressStart = () => {
|
||||
clearPress()
|
||||
pressTimer = window.setTimeout(() => {
|
||||
isDraggable.value = true
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const handlePressEnd = () => {
|
||||
clearPress()
|
||||
// 延迟复位，避免影响 drop
|
||||
setTimeout(() => {
|
||||
isDraggable.value = false
|
||||
}, 0)
|
||||
}
|
||||
|
||||
const handleTouchStart = () => handlePressStart()
|
||||
const handleTouchEnd = () => handlePressEnd()
|
||||
|
||||
const handleDragEnd = () => {
|
||||
isDraggable.value = false
|
||||
}
|
||||
|
||||
const handleWheel = (e: WheelEvent) => {
|
||||
if (e.deltaY < 0) {
|
||||
imgViewScale.value *= 1.42857
|
||||
} else {
|
||||
imgViewScale.value /= 1.42857
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.file,
|
||||
() => {
|
||||
imgViewScale.value = 1
|
||||
isDraggable.value = false
|
||||
clearPress()
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.show,
|
||||
(v) => {
|
||||
if (!v) {
|
||||
imgViewScale.value = 1
|
||||
isDraggable.value = false
|
||||
clearPress()
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.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;
|
||||
z-index: 9999;
|
||||
|
||||
&-back {
|
||||
left: 1%;
|
||||
}
|
||||
|
||||
&-forward {
|
||||
right: 1%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,331 +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>
|
||||
<MiaoImageViewer
|
||||
:show="activeImage !== undefined"
|
||||
:file="activeImage"
|
||||
@close="activeImage = undefined"
|
||||
@back="handleActiveImageBack"
|
||||
@forward="handleActiveImageForward"
|
||||
/>
|
||||
</div>
|
||||
</miao-message-provider>
|
||||
</miao-drop-handler>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
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 MiaoImageViewer from './miaoImageViewer.vue'
|
||||
|
||||
const imageSuffixList = [
|
||||
'xbm',
|
||||
'tif',
|
||||
'pjp',
|
||||
'svgz',
|
||||
'jpg',
|
||||
'jpeg',
|
||||
'ico',
|
||||
'tiff',
|
||||
'gif',
|
||||
'svg',
|
||||
'jfif',
|
||||
'webp',
|
||||
'png',
|
||||
'bmp',
|
||||
'pjpeg',
|
||||
'avif'
|
||||
]
|
||||
|
||||
const currentDirectories = defineModel<VirtualDirectory[]>(
|
||||
'currentDirectories',
|
||||
{
|
||||
required: true
|
||||
}
|
||||
)
|
||||
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
||||
required: true
|
||||
})
|
||||
|
||||
const NScrollbarRef = ref()
|
||||
const rootRef = ref<any>()
|
||||
const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
|
||||
const imageFileList = ref<VirtualFile[]>([])
|
||||
const activeImage = ref<VirtualFile>()
|
||||
|
||||
const imageGroupList = computed(() => {
|
||||
return groupByDay(imageFileList.value)
|
||||
})
|
||||
|
||||
watch(activeImage, () => {
|
||||
nextTick(scrollToActiveImage)
|
||||
})
|
||||
|
||||
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
|
||||
)
|
||||
}
|
||||
|
||||
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;
|
||||
z-index: 9999;
|
||||
|
||||
&-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
|
||||
Loaded 100 of 149 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user