Compare commits
13
Commits
2.0.0
..
938dde4c1c
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
938dde4c1c | ||
|
|
8e884eb178 | ||
|
|
8c65e66ab6 | ||
|
|
a34e27cc65 | ||
|
|
de2e53cbcf | ||
|
|
b3c6dad1b1 | ||
|
|
fcb2fe8f7f | ||
|
|
c02f6743e3 | ||
|
|
3e24d4a363 | ||
|
|
7574acdad2 | ||
|
|
704c80e019 | ||
|
|
210e251b23 | ||
|
|
93ca2a29a6 |
No files matched your search
@@ -1,11 +1,15 @@
|
|||||||
todo: 标签页,miaoDirectory切换动画 [finish]
|
## TODO list:
|
||||||
todo: 重构virtualPage,所有page以插件形式使用 [finish]
|
|
||||||
todo: miaoDirectory插件化,为后续插件功能开发做准备 [finish]
|
| 计划 | 状态 |
|
||||||
todo: miaoPopupInput, 弹出一个输入框 [finish]
|
|---|---|
|
||||||
todo: miaoDirectory的重命名功能 [finish]
|
| 拆分miaoDirectory | ✅ |
|
||||||
todo: miaoDirectory的剪切功能 [finish]
|
| 完善视频插件 | ✅ |
|
||||||
todo: miaoDirectory的上传按钮 [finish]
|
| 完善PDF插件 | ✅ |
|
||||||
todo: miaoDirectory的新建文件/文件夹功能 [finish]
|
| 完善Code插件 | ✅ |
|
||||||
todo: miaoDirectory的多选功能 [finish]
|
| 实现miaoDirectory的搜索功能 | ✅ |
|
||||||
todo: VirtualDirectory更新时更新文件信息
|
| 完善miaoDirectory的搜索功能 | ❌ |
|
||||||
todo: miaoDirectory的复制文件/文件夹功能
|
| 实现miaoDirectory的排序功能 | ❌ |
|
||||||
|
| 完善图片浏览插件 | ❌ |
|
||||||
|
| VirtualDirectory更新时更新文件信息 | ❌ |
|
||||||
|
| 创建音乐播放器组件(仿QQ音乐移动端吧) | ❌ |
|
||||||
|
| miaoDirectory的复制文件/文件夹功能 | ❌ |
|
||||||
+1
-1
@@ -2,7 +2,7 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="./public/favicon.ico" />
|
<link rel="icon" type="image/svg+xml" href="./icon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>MiaoDirectory</title>
|
<title>MiaoDirectory</title>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
+1
-1
@@ -7,7 +7,7 @@
|
|||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"dev:host": "vite --host 0.0.0.0",
|
"dev:host": "vite --host 0.0.0.0",
|
||||||
"build": "vue-tsc -b && vite build",
|
"build": "vue-tsc -b && vite build",
|
||||||
"build:auto": "pnpm run build && rm -rf ./serve/web/* && cp -r ./dist/* ./serve/web/ && cd ./serve && go build && mv ./miao-directory.exe ../",
|
"build:auto": "pnpm run build && rm -rf ./serve/web/* && cp -r ./dist/* ./serve/web/ && cd ./serve && go env -w GOOS=windows && go build -o ../miao-directory.exe",
|
||||||
"build:auto:release": "pnpm run build && rm -rf ./serve/web/* && cp -r ./dist/* ./serve/web/ && cd ./serve && go env -w GOOS=windows GOARCH=amd64 && go build -o ../miao-directory-amd64-win.exe && go env -w GOOS=linux GOARCH=amd64 && go build -o ../miao-directory-amd64-linux",
|
"build:auto:release": "pnpm run build && rm -rf ./serve/web/* && cp -r ./dist/* ./serve/web/ && cd ./serve && go env -w GOOS=windows GOARCH=amd64 && go build -o ../miao-directory-amd64-win.exe && go env -w GOOS=linux GOARCH=amd64 && go build -o ../miao-directory-amd64-linux",
|
||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
|
|||||||
+23
-51
@@ -1,6 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { h, onMounted, reactive, ref, shallowRef } from 'vue'
|
import { h, onMounted, reactive, ref, shallowRef } from 'vue'
|
||||||
import { NIcon, NScrollbar, NDropdown, NQrCode } from 'naive-ui'
|
import { NIcon, NScrollbar, NDropdown } from 'naive-ui'
|
||||||
import {
|
import {
|
||||||
EyeOffOutline,
|
EyeOffOutline,
|
||||||
EyeOutline,
|
EyeOutline,
|
||||||
@@ -42,11 +42,11 @@ const rootDirectory = reactive(
|
|||||||
// component就是一个vue组件,类似于miaoDirectory
|
// component就是一个vue组件,类似于miaoDirectory
|
||||||
const createView = (
|
const createView = (
|
||||||
component: any,
|
component: any,
|
||||||
currentDirectorys?: VirtualDirectory[],
|
currentDirectories?: VirtualDirectory[],
|
||||||
currentFiles?: VirtualFile[],
|
currentFiles?: VirtualFile[],
|
||||||
index?: number
|
index?: number
|
||||||
) => {
|
) => {
|
||||||
views.push(component, currentDirectorys, currentFiles, index)
|
views.push(component, currentDirectories, currentFiles, index)
|
||||||
}
|
}
|
||||||
|
|
||||||
const deleteView = (index: number) => {
|
const deleteView = (index: number) => {
|
||||||
@@ -88,11 +88,11 @@ const openMenuOption = [
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
const handleMenuSelect = (key: string) => {
|
const handleMenuSelect = async (key: string) => {
|
||||||
if (key === 'share') {
|
if (key === 'share') {
|
||||||
showModal.value = true
|
showModal.value = true
|
||||||
modalData.value = {
|
modalData.value = {
|
||||||
component: NQrCode,
|
component: (await import('naive-ui/es/qr-code')).NQrCode,
|
||||||
props: {
|
props: {
|
||||||
value: baseUrl,
|
value: baseUrl,
|
||||||
size: 300,
|
size: 300,
|
||||||
@@ -114,49 +114,31 @@ onMounted(() => {
|
|||||||
<n-scrollbar x-scrollable>
|
<n-scrollbar x-scrollable>
|
||||||
<div class="tabs-container">
|
<div class="tabs-container">
|
||||||
<transition-group name="tab">
|
<transition-group name="tab">
|
||||||
<div
|
<div class="tab" v-for="(view, index) of views._views" :key="view.uid">
|
||||||
class="tab"
|
<span class="tab-title" :title="view.title" @click="handleClickTitle(index)">
|
||||||
v-for="(view, index) of views._views"
|
|
||||||
:key="view.uid">
|
|
||||||
<span
|
|
||||||
class="tab-title"
|
|
||||||
:title="view.title"
|
|
||||||
@click="handleClickTitle(index)">
|
|
||||||
{{
|
{{
|
||||||
view.title.length > 5 && 0
|
view.title.length > 5 && 0
|
||||||
? `${view.title.substring(0, 5)}...`
|
? `${view.title.substring(0, 5)}...`
|
||||||
: view.title
|
: view.title
|
||||||
}}
|
}}
|
||||||
</span>
|
</span>
|
||||||
<div
|
<div class="tab-point" :style="{ backgroundColor: view.color }"></div>
|
||||||
class="tab-point"
|
|
||||||
:style="{ backgroundColor: view.color }"></div>
|
|
||||||
<div class="tab-control">
|
<div class="tab-control">
|
||||||
<n-icon
|
<n-icon class="tag-control-icon icon" @click="view.switchShow()">
|
||||||
class="tag-control-icon icon"
|
<EyeOutline v-show="view.visible" class="icon-inner" />
|
||||||
@click="view.switchShow()">
|
<EyeOffOutline v-show="!view.visible" class="icon-inner" />
|
||||||
<EyeOutline
|
|
||||||
v-show="view.visible"
|
|
||||||
class="icon-inner" />
|
|
||||||
<EyeOffOutline
|
|
||||||
v-show="!view.visible"
|
|
||||||
class="icon-inner" />
|
|
||||||
</n-icon>
|
</n-icon>
|
||||||
<n-icon
|
<n-icon class="tag-control-icon icon" @click="
|
||||||
class="tag-control-icon icon"
|
|
||||||
@click="
|
|
||||||
createView(
|
createView(
|
||||||
view.component,
|
view.component,
|
||||||
view.currentDirectorys,
|
view.currentDirectories,
|
||||||
view.currentFiles,
|
view.currentFiles,
|
||||||
index + 1
|
index + 1
|
||||||
)
|
)
|
||||||
">
|
">
|
||||||
<CopyOutline />
|
<CopyOutline />
|
||||||
</n-icon>
|
</n-icon>
|
||||||
<n-icon
|
<n-icon class="tag-control-icon icon" @click="deleteView(index)">
|
||||||
class="tag-control-icon icon"
|
|
||||||
@click="deleteView(index)">
|
|
||||||
<CloseOutline class="icon-inner" />
|
<CloseOutline class="icon-inner" />
|
||||||
</n-icon>
|
</n-icon>
|
||||||
</div>
|
</div>
|
||||||
@@ -166,10 +148,7 @@ onMounted(() => {
|
|||||||
</n-scrollbar>
|
</n-scrollbar>
|
||||||
<div class="view-controller-menu">
|
<div class="view-controller-menu">
|
||||||
<div class="view-controller-menu-item">
|
<div class="view-controller-menu-item">
|
||||||
<n-dropdown
|
<n-dropdown trigger="click" :options="openMenuOption" @select="handleMenuSelect">
|
||||||
trigger="click"
|
|
||||||
:options="openMenuOption"
|
|
||||||
@select="handleMenuSelect">
|
|
||||||
<n-icon class="icon">
|
<n-icon class="icon">
|
||||||
<EllipsisVertical class="icon-inner" />
|
<EllipsisVertical class="icon-inner" />
|
||||||
</n-icon>
|
</n-icon>
|
||||||
@@ -179,17 +158,10 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
<div class="view-container">
|
<div class="view-container">
|
||||||
<transition-group name="page">
|
<transition-group name="page">
|
||||||
<div
|
<div class="view-container-item" v-for="(view, index) of views._views" v-show="view.visible"
|
||||||
class="view-container-item"
|
|
||||||
v-for="(view, index) of views._views"
|
|
||||||
v-show="view.visible"
|
|
||||||
:key="view.uid">
|
:key="view.uid">
|
||||||
<component
|
<component :is="view.component" v-model:current-directories="view.currentDirectories"
|
||||||
:is="view.component"
|
v-model:current-files="view.currentFiles" :id="view.uid" :color="view.color"
|
||||||
v-model:current-directorys="view.currentDirectorys"
|
|
||||||
v-model:current-files="view.currentFiles"
|
|
||||||
:id="view.uid"
|
|
||||||
:color="view.color"
|
|
||||||
@exit="deleteView(index)"></component>
|
@exit="deleteView(index)"></component>
|
||||||
</div>
|
</div>
|
||||||
</transition-group>
|
</transition-group>
|
||||||
@@ -197,10 +169,8 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
<!-- 模态框展示,用来显示分享二维码,设置菜单之类的东西 -->
|
<!-- 模态框展示,用来显示分享二维码,设置菜单之类的东西 -->
|
||||||
<MiaoMask v-model:show="showModal" @click="showModal = false">
|
<MiaoMask v-model:show="showModal" @click="showModal = false">
|
||||||
<component
|
<component @click="(e: any) => e.stopPropagation()" :is="modalData?.component" v-bind="modalData?.props">
|
||||||
@click="(e:any) => e.stopPropagation()"
|
</component>
|
||||||
:is="modalData?.component"
|
|
||||||
v-bind="modalData?.props"></component>
|
|
||||||
</MiaoMask>
|
</MiaoMask>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -246,6 +216,7 @@ $tag-width: 170px;
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -333,7 +304,7 @@ $tag-width: 170px;
|
|||||||
.view-container-item {
|
.view-container-item {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-width: 200px;
|
min-width: 180px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
@@ -363,6 +334,7 @@ $tag-width: 170px;
|
|||||||
.view {
|
.view {
|
||||||
.view-controller {
|
.view-controller {
|
||||||
.tabs-container {
|
.tabs-container {
|
||||||
|
|
||||||
.tab-move,
|
.tab-move,
|
||||||
.tab-enter-active {
|
.tab-enter-active {
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
|
|||||||
+10
-10
@@ -6,8 +6,8 @@ type plugin = {
|
|||||||
name: string
|
name: string
|
||||||
// 判断是否可以使用这个组件
|
// 判断是否可以使用这个组件
|
||||||
// 使用组件即调用下面的func
|
// 使用组件即调用下面的func
|
||||||
filter: (VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
|
filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
|
||||||
func: (VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) => void
|
func: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class PluginCenter {
|
export default class PluginCenter {
|
||||||
@@ -30,7 +30,7 @@ export default class PluginCenter {
|
|||||||
name: string,
|
name: string,
|
||||||
getComponent: () => Promise<any>,
|
getComponent: () => Promise<any>,
|
||||||
filter: (
|
filter: (
|
||||||
VDirectorys: VirtualDirectory[],
|
VDirectories: VirtualDirectory[],
|
||||||
VFiles: VirtualFile[]
|
VFiles: VirtualFile[]
|
||||||
) => boolean
|
) => boolean
|
||||||
): void {
|
): void {
|
||||||
@@ -40,22 +40,22 @@ export default class PluginCenter {
|
|||||||
name,
|
name,
|
||||||
filter,
|
filter,
|
||||||
func: async (
|
func: async (
|
||||||
VDirectorys: VirtualDirectory[],
|
VDirectories: VirtualDirectory[],
|
||||||
VFiles: VirtualFile[]
|
VFiles: VirtualFile[]
|
||||||
) => {
|
) => {
|
||||||
if (filter(VDirectorys, VFiles) === false) {
|
if (filter(VDirectories, VFiles) === false) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (_component === undefined) _component = await getComponent()
|
if (_component === undefined) _component = await getComponent()
|
||||||
views.push(_component, VDirectorys, VFiles)
|
views.push(_component, VDirectories, VFiles)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
getUsablePlugin(VDirectorys: VirtualDirectory[], VFiles: VirtualFile[]) {
|
getUsablePlugin(VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) {
|
||||||
const usableList = []
|
const usableList = []
|
||||||
for (let key of Object.keys(this.pluginsMap)) {
|
for (let key of Object.keys(this.pluginsMap)) {
|
||||||
if (this.pluginsMap[key].filter(VDirectorys, VFiles)) {
|
if (this.pluginsMap[key].filter(VDirectories, VFiles)) {
|
||||||
usableList.push(key)
|
usableList.push(key)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -67,9 +67,9 @@ export default class PluginCenter {
|
|||||||
|
|
||||||
usePlugin(
|
usePlugin(
|
||||||
key: string,
|
key: string,
|
||||||
VDirectorys: VirtualDirectory[],
|
VDirectories: VirtualDirectory[],
|
||||||
VFiles: VirtualFile[]
|
VFiles: VirtualFile[]
|
||||||
) {
|
) {
|
||||||
this.pluginsMap[key].func(VDirectorys, VFiles)
|
this.pluginsMap[key].func(VDirectories, VFiles)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -43,7 +43,7 @@ class VirtualDirectory {
|
|||||||
// 子文件
|
// 子文件
|
||||||
files?: VirtualFile[];
|
files?: VirtualFile[];
|
||||||
// 子目录
|
// 子目录
|
||||||
directorys?: VirtualDirectory[];
|
directories?: VirtualDirectory[];
|
||||||
// 没啥意义,标注一下就是了
|
// 没啥意义,标注一下就是了
|
||||||
type: "directory";
|
type: "directory";
|
||||||
// 文件夹创建时间等杂项属性
|
// 文件夹创建时间等杂项属性
|
||||||
@@ -98,9 +98,9 @@ class VirtualDirectory {
|
|||||||
|
|
||||||
updateContent(content: (file | directory)[]) {
|
updateContent(content: (file | directory)[]) {
|
||||||
this.files = this.files ?? [];
|
this.files = this.files ?? [];
|
||||||
this.directorys = this.directorys ?? [];
|
this.directories = this.directories ?? [];
|
||||||
const fileNames: string[] = this.files.map(v => v.name);
|
const fileNames: string[] = this.files.map(v => v.name);
|
||||||
const dirNames: string[] = this.directorys.map(v => v.name);
|
const dirNames: string[] = this.directories.map(v => v.name);
|
||||||
const itemNames: string[] = content.map(v => v.name);
|
const itemNames: string[] = content.map(v => v.name);
|
||||||
// 删去远程端已不存在的文件与文件夹
|
// 删去远程端已不存在的文件与文件夹
|
||||||
const _delete = (target: (VirtualFile | VirtualDirectory)[]) => {
|
const _delete = (target: (VirtualFile | VirtualDirectory)[]) => {
|
||||||
@@ -114,7 +114,7 @@ class VirtualDirectory {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
_delete(this.files);
|
_delete(this.files);
|
||||||
_delete(this.directorys);
|
_delete(this.directories);
|
||||||
// 加入新的文件与文件夹
|
// 加入新的文件与文件夹
|
||||||
for (let item of content) {
|
for (let item of content) {
|
||||||
if (item.type === "file") {
|
if (item.type === "file") {
|
||||||
@@ -123,7 +123,7 @@ class VirtualDirectory {
|
|||||||
}
|
}
|
||||||
} else if (item.type === "directory") {
|
} else if (item.type === "directory") {
|
||||||
if (!dirNames.includes(item.name)) {
|
if (!dirNames.includes(item.name)) {
|
||||||
this.directorys.push(new VirtualDirectory(item, this));
|
this.directories.push(new VirtualDirectory(item, this));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -131,7 +131,7 @@ class VirtualDirectory {
|
|||||||
|
|
||||||
hasChild(item: VirtualDirectory | VirtualFile): boolean {
|
hasChild(item: VirtualDirectory | VirtualFile): boolean {
|
||||||
if (item.type === "directory") {
|
if (item.type === "directory") {
|
||||||
return this.directorys?.includes(item) ?? false;
|
return this.directories?.includes(item) ?? false;
|
||||||
} else {
|
} else {
|
||||||
return this.files?.includes(item) ?? false;
|
return this.files?.includes(item) ?? false;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -13,9 +13,9 @@ const getRandomWebSafeColor = (() => {
|
|||||||
})();
|
})();
|
||||||
|
|
||||||
export default class VirtualPage {
|
export default class VirtualPage {
|
||||||
constructor(component: any, initObjects?: { directorys?: VirtualDirectory[]; files?: VirtualFile[] }) {
|
constructor(component: any, initObjects?: { directories?: VirtualDirectory[]; files?: VirtualFile[] }) {
|
||||||
this.component = shallowRef(component);
|
this.component = shallowRef(component);
|
||||||
this.currentDirectorys = initObjects?.directorys ?? [];
|
this.currentDirectories = initObjects?.directories ?? [];
|
||||||
this.currentFiles = initObjects?.files ?? [];
|
this.currentFiles = initObjects?.files ?? [];
|
||||||
this.visible = true;
|
this.visible = true;
|
||||||
this.uid = generateId();
|
this.uid = generateId();
|
||||||
@@ -27,7 +27,7 @@ export default class VirtualPage {
|
|||||||
// 是否可见
|
// 是否可见
|
||||||
visible: boolean;
|
visible: boolean;
|
||||||
// 当前正在使用的文件夹
|
// 当前正在使用的文件夹
|
||||||
currentDirectorys: VirtualDirectory[];
|
currentDirectories: VirtualDirectory[];
|
||||||
// 当前正在使用的文件
|
// 当前正在使用的文件
|
||||||
currentFiles: VirtualFile[];
|
currentFiles: VirtualFile[];
|
||||||
// 区分每一个页面的唯一id
|
// 区分每一个页面的唯一id
|
||||||
@@ -43,7 +43,7 @@ export default class VirtualPage {
|
|||||||
if (this._title) {
|
if (this._title) {
|
||||||
return this._title;
|
return this._title;
|
||||||
}
|
}
|
||||||
return this?.currentDirectorys[0]?.name ?? this?.currentFiles[0]?.name ?? "未命名标签";
|
return this?.currentDirectories[0]?.name ?? this?.currentFiles[0]?.name ?? "未命名标签";
|
||||||
}
|
}
|
||||||
|
|
||||||
setTitle(title: string) {
|
setTitle(title: string) {
|
||||||
@@ -101,14 +101,14 @@ export class VirtualPages {
|
|||||||
/**
|
/**
|
||||||
* 推入一个新的页面
|
* 推入一个新的页面
|
||||||
*/
|
*/
|
||||||
push(component: any, currentDirectorys?: VirtualDirectory[], currentFiles?: VirtualFile[], index?: number) {
|
push(component: any, currentDirectories?: VirtualDirectory[], currentFiles?: VirtualFile[], index?: number) {
|
||||||
index ?? (index = this.length);
|
index ?? (index = this.length);
|
||||||
this._views.splice(
|
this._views.splice(
|
||||||
index,
|
index,
|
||||||
0,
|
0,
|
||||||
reactive<VirtualPage>(
|
reactive<VirtualPage>(
|
||||||
new VirtualPage(component, {
|
new VirtualPage(component, {
|
||||||
directorys: [...(currentDirectorys ?? [])],
|
directories: [...(currentDirectories ?? [])],
|
||||||
files: [...(currentFiles ?? [])]
|
files: [...(currentFiles ?? [])]
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -0,0 +1,77 @@
|
|||||||
|
<template>
|
||||||
|
<div class="miao-directory-container-bottom" :style="{
|
||||||
|
backgroundColor:
|
||||||
|
index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
|
||||||
|
}">
|
||||||
|
<div class="container-bottom-item">
|
||||||
|
<div class="container-bottom-item-icon">
|
||||||
|
<add-outline :style="{
|
||||||
|
color:
|
||||||
|
index % 2 === 0
|
||||||
|
? 'rgb(0 0 0)'
|
||||||
|
: 'rgb(255 255 255)'
|
||||||
|
}" @click="$emit('add-new-item')" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container-bottom-item">
|
||||||
|
<div class="container-bottom-item-icon">
|
||||||
|
<cloud-upload-outline :style="{
|
||||||
|
color:
|
||||||
|
index % 2 === 0
|
||||||
|
? 'rgb(0 0 0)'
|
||||||
|
: 'rgb(255 255 255)'
|
||||||
|
}" @click="$emit('pick-files-upload')" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { AddOutline, CloudUploadOutline } from '@vicons/ionicons5'
|
||||||
|
defineProps<{
|
||||||
|
index: number
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
'add-new-item': []
|
||||||
|
'pick-files-upload': []
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.miao-directory-container-bottom {
|
||||||
|
height: 60px;
|
||||||
|
background-color: bisque;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
user-select: none;
|
||||||
|
box-shadow: 0px 1px 10px #888888;
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
.container-bottom-item {
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.container-bottom-item-icon {
|
||||||
|
svg {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
transition: height 0.3s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
svg {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -7,7 +7,7 @@
|
|||||||
<div class="item-main-info">
|
<div class="item-main-info">
|
||||||
<div class="item-main-info-name">
|
<div class="item-main-info-name">
|
||||||
<Icon class="item-main-info-name-icon" v-if="clientWidth <= 250"></Icon>
|
<Icon class="item-main-info-name-icon" v-if="clientWidth <= 250"></Icon>
|
||||||
<n-ellipsis style="max-width: 80%;">{{ name }}</n-ellipsis>
|
<n-ellipsis :style="{ maxWidth: clientWidth > 250 ? '80%' : '75%' }">{{ name }}</n-ellipsis>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-main-info-date" v-if="time">
|
<div class="item-main-info-date" v-if="time">
|
||||||
{{ time }}
|
{{ time }}
|
||||||
@@ -138,6 +138,7 @@ const dropDownOptions = computed(() => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
// 是不是可以直接在这里面实现?
|
// 是不是可以直接在这里面实现?
|
||||||
|
// 应该将所有事件emit出去才对
|
||||||
const handleDropdownSelect = (key: string) => {
|
const handleDropdownSelect = (key: string) => {
|
||||||
if (key === 'rename') {
|
if (key === 'rename') {
|
||||||
emit('rename')
|
emit('rename')
|
||||||
@@ -177,22 +178,22 @@ const Icon = computed(() => {
|
|||||||
return Disc
|
return Disc
|
||||||
} else if (
|
} else if (
|
||||||
[
|
[
|
||||||
'.xbm',
|
'xbm',
|
||||||
'.tif',
|
'tif',
|
||||||
'pjp',
|
'pjp',
|
||||||
'.svgz',
|
'svgz',
|
||||||
'jpg',
|
'jpg',
|
||||||
'jpeg',
|
'jpeg',
|
||||||
'ico',
|
'ico',
|
||||||
'tiff',
|
'tiff',
|
||||||
'.gif',
|
'gif',
|
||||||
'svg',
|
'svg',
|
||||||
'.jfif',
|
'jfif',
|
||||||
'.webp',
|
'webp',
|
||||||
'.png',
|
'png',
|
||||||
'.bmp',
|
'bmp',
|
||||||
'pjpeg',
|
'pjpeg',
|
||||||
'.avif'
|
'avif'
|
||||||
].includes(aft)
|
].includes(aft)
|
||||||
) {
|
) {
|
||||||
return Image
|
return Image
|
||||||
@@ -237,7 +238,7 @@ onMounted(() => {
|
|||||||
.miao-item {
|
.miao-item {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: calc(100% - 20px);
|
width: calc(100% - 20px);
|
||||||
min-width: 170px;
|
// min-width: 170px;
|
||||||
// aspect-ratio: 66/9;
|
// aspect-ratio: 66/9;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -249,7 +250,6 @@ onMounted(() => {
|
|||||||
.item-main {
|
.item-main {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 200px;
|
|
||||||
height: 95%;
|
height: 95%;
|
||||||
background-color: rgb(255, 255, 255);
|
background-color: rgb(255, 255, 255);
|
||||||
border-radius: 7px;
|
border-radius: 7px;
|
||||||
|
|||||||
@@ -0,0 +1,81 @@
|
|||||||
|
<template>
|
||||||
|
<div class="miao-directory-container-items" :style="{
|
||||||
|
backgroundColor:
|
||||||
|
index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
|
||||||
|
}">
|
||||||
|
<n-scrollbar ref="scrollbarRef" style="max-height: 100%;">
|
||||||
|
<miao-lazy-div v-for="(dir, index) in showData_directory" :key="dir.uid" min-height="50px">
|
||||||
|
<miaoDirectoryItem :item="dir" :color="props.color" :selectedItem="selectedItem"
|
||||||
|
@delete="handleItemDelete(dir)" @click="handleItemClick(dir)" @drag-start="handleItemDragStart"
|
||||||
|
@rename="handleItemRename(dir)" @on-selected="handleItemSelect(dir)" />
|
||||||
|
</miao-lazy-div>
|
||||||
|
<miao-lazy-div v-for="(file) in showData_files" :key="file.uid" min-height="50px">
|
||||||
|
<miaoDirectoryItem :item="file" :color="props.color" :selectedItem="selectedItem"
|
||||||
|
@click="handleItemClick(file)" @download="handleItemDownload(file)" @delete="handleItemDelete(file)"
|
||||||
|
@drag-start="handleItemDragStart" @rename="handleItemRename(file)"
|
||||||
|
@on-selected="handleItemSelect(file)" />
|
||||||
|
</miao-lazy-div>
|
||||||
|
</n-scrollbar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { NScrollbar } from 'naive-ui'
|
||||||
|
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
||||||
|
import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue'
|
||||||
|
import miaoLazyDiv from '@/components/miaoLazyDiv.vue'
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
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()
|
||||||
|
|
||||||
|
defineExpose({ scrollTo: (...args: any) => scrollbarRef.value.scrollTo(...args) });
|
||||||
|
|
||||||
|
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 = (_event: DragEvent, item: VirtualDirectory | VirtualFile) => {
|
||||||
|
emit('item-drag-start', _event, item)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleItemRename = (item: VirtualDirectory | VirtualFile) => {
|
||||||
|
emit('item-rename', item)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
|
||||||
|
emit('item-select', item)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.miao-directory-container-items {
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,152 @@
|
|||||||
|
<template>
|
||||||
|
<div class="miao-directory-container-top" :style="{
|
||||||
|
backgroundColor:
|
||||||
|
index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
|
||||||
|
}">
|
||||||
|
<div class="container-top-colorfulBar" :style="{ backgroundColor: props.color }"></div>
|
||||||
|
<div class="container-top-breadcrumb">
|
||||||
|
<div class="container-top-breadcrumb-container">
|
||||||
|
<n-breadcrumb separator=">" style="margin-left: 5px">
|
||||||
|
<n-breadcrumb-item :clickable="false">
|
||||||
|
<n-icon size="18">
|
||||||
|
<CloudOutline />
|
||||||
|
</n-icon>
|
||||||
|
</n-breadcrumb-item>
|
||||||
|
<n-breadcrumb-item v-for="dir in currentDirectory?.getParents"
|
||||||
|
@click="handleClickBreadcrumbItem(dir)" :clickable="true">
|
||||||
|
<div>{{ dir.name }}</div>
|
||||||
|
</n-breadcrumb-item>
|
||||||
|
</n-breadcrumb>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container-top-tools">
|
||||||
|
<n-icon class="container-top-tools-item" size="15" @click="$emit('back')">
|
||||||
|
<ChevronBackOutline />
|
||||||
|
</n-icon>
|
||||||
|
<n-icon class="container-top-tools-item" size="14" @click="$emit('reload')">
|
||||||
|
<ReloadOutline class="container-top-tools-item-reload" />
|
||||||
|
</n-icon>
|
||||||
|
<n-dropdown trigger="click" :options="openMenuOption" @select="(key: string) => emit('menuSelect', key)">
|
||||||
|
<n-icon class="container-top-tools-item" size="14">
|
||||||
|
<EllipsisVertical />
|
||||||
|
</n-icon>
|
||||||
|
</n-dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { NBreadcrumbItem, NBreadcrumb, NIcon, NDropdown } from 'naive-ui'
|
||||||
|
import {
|
||||||
|
CloudOutline,
|
||||||
|
ChevronBackOutline,
|
||||||
|
ReloadOutline,
|
||||||
|
EllipsisVertical,
|
||||||
|
} from '@vicons/ionicons5'
|
||||||
|
import VirtualDirectory from '@/class/VirtualDirectory'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
color: string;
|
||||||
|
index: number
|
||||||
|
currentDirectory: VirtualDirectory | undefined;
|
||||||
|
openMenuOption: {
|
||||||
|
key: string,
|
||||||
|
label: string,
|
||||||
|
[key: string]: any,
|
||||||
|
}[]
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
back: [],
|
||||||
|
reload: [],
|
||||||
|
menuSelect: [key: string]
|
||||||
|
'set-current-directory': [virtualDirectory: VirtualDirectory]
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const handleClickBreadcrumbItem = (virtualDirectory: VirtualDirectory) => {
|
||||||
|
emit('set-current-directory', virtualDirectory)
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.miao-directory-container-top {
|
||||||
|
height: 30px;
|
||||||
|
width: 100%;
|
||||||
|
user-select: none;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
|
||||||
|
.container-top-colorfulBar {
|
||||||
|
height: 70%;
|
||||||
|
width: 5px;
|
||||||
|
margin-left: 10px;
|
||||||
|
border-radius: 3px 0 0 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-top-breadcrumb {
|
||||||
|
position: relative;
|
||||||
|
height: 70%;
|
||||||
|
width: calc(100% - 95px);
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
// overflow: hidden;
|
||||||
|
overflow-y: hidden;
|
||||||
|
overflow-x: hidden;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 0 5px;
|
||||||
|
border-radius: 0 3px 3px 0;
|
||||||
|
|
||||||
|
.container-top-breadcrumb-container {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
min-width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-top-tools {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
// width: 70px;
|
||||||
|
padding: 0 5px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.container-top-tools-item {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin: 0 1px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #ffffff00;
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.container-top-tools-item-reload {
|
||||||
|
transition: transform 0.6s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(128, 128, 128, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active .container-top-tools-item-reload {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,9 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div class="container" @dragover="handleDragOver" @dragleave="handleDragLeave" @drop="handleDrop">
|
||||||
class="container"
|
|
||||||
@dragover="handleDragOver"
|
|
||||||
@dragleave="handleDragLeave"
|
|
||||||
@drop="handleDrop">
|
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
<miao-mask v-model:show="showMask"></miao-mask>
|
<miao-mask v-model:show="showMask"></miao-mask>
|
||||||
</div>
|
</div>
|
||||||
@@ -63,8 +59,11 @@ const removeDirectory = async (files: File[]) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const handleDragOver = async (event: DragEvent) => {
|
const handleDragOver = async (event: DragEvent) => {
|
||||||
showMask.value += 1
|
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
|
if (showMask.value === 1) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
showMask.value = 1
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleDragLeave = async () => {
|
const handleDragLeave = async () => {
|
||||||
|
|||||||
@@ -0,0 +1,95 @@
|
|||||||
|
<!-- 只适合用于渲染过程较为复杂的组件,不然可能得不偿失
|
||||||
|
这么泛用的组件,性能差点也能理解 -->
|
||||||
|
<template>
|
||||||
|
<div class="miao-lazy" ref="miaoLazyRoot" :style="!show ? { minHeight, minWidth } : {}">
|
||||||
|
<slot v-if="show" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onBeforeUnmount, onMounted, ref } from 'vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
disableLazy: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
// 仅在内容未加载时生效,用于占位
|
||||||
|
minHeight: {
|
||||||
|
type: String,
|
||||||
|
default: 'none',
|
||||||
|
},
|
||||||
|
minWidth: {
|
||||||
|
type: String,
|
||||||
|
default: 'none',
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const miaoLazyRoot = ref<HTMLDivElement>()
|
||||||
|
|
||||||
|
const show = ref<boolean>(props.disableLazy)
|
||||||
|
|
||||||
|
const isVisible = (dom: HTMLDivElement) => {
|
||||||
|
const offset = dom.getBoundingClientRect().top
|
||||||
|
return offset > 0 && offset < 2000
|
||||||
|
}
|
||||||
|
|
||||||
|
const { showSlot, hideSlot, clearTimer } = (() => {
|
||||||
|
let timer: any
|
||||||
|
let timerInterval: any
|
||||||
|
const clearTimer = () => {
|
||||||
|
timer && clearTimeout(timer)
|
||||||
|
timerInterval && clearInterval(timerInterval)
|
||||||
|
timer = undefined
|
||||||
|
timerInterval = undefined
|
||||||
|
}
|
||||||
|
const hideSlot = () => {
|
||||||
|
clearTimer()
|
||||||
|
show.value = false
|
||||||
|
}
|
||||||
|
const showSlot = () => {
|
||||||
|
if (show.value === true) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
clearTimer()
|
||||||
|
// timer = setTimeout(() => {
|
||||||
|
if (!miaoLazyRoot.value || isVisible(miaoLazyRoot.value) === false) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
show.value = true
|
||||||
|
timerInterval = setInterval(() => {
|
||||||
|
if (show.value === false || miaoLazyRoot.value === undefined) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (isVisible(miaoLazyRoot.value) === false) {
|
||||||
|
hideSlot()
|
||||||
|
}
|
||||||
|
}, 1000)
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
return { showSlot, hideSlot, clearTimer }
|
||||||
|
})()
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (show.value === false) {
|
||||||
|
let options = {
|
||||||
|
threshold: 0
|
||||||
|
};
|
||||||
|
|
||||||
|
let observer: IntersectionObserver | undefined = new IntersectionObserver((entries) => {
|
||||||
|
if (entries[0].isIntersecting) {
|
||||||
|
showSlot()
|
||||||
|
// miaoLazyRoot.value && observer?.unobserve(miaoLazyRoot.value)
|
||||||
|
// observer = undefined
|
||||||
|
} else {
|
||||||
|
hideSlot()
|
||||||
|
}
|
||||||
|
}, options);
|
||||||
|
miaoLazyRoot.value && observer.observe(miaoLazyRoot.value);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
clearTimer()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,147 @@
|
|||||||
|
<template>
|
||||||
|
<div class="miao-message-provider" ref="rootRef">
|
||||||
|
<slot></slot>
|
||||||
|
<transition-group name="message-fade" tag="div" class="miao-message-provider-container">
|
||||||
|
<div class="miao-message" v-for="msg in messageList" :key="msg.id"
|
||||||
|
:style="{ maxWidth: maxMessageWidth + 'px' }">
|
||||||
|
<n-icon class="miao-message-item" size="18" :color="msg.iconColor">
|
||||||
|
<component :is="msg.icon"></component>
|
||||||
|
</n-icon>
|
||||||
|
<div class="miao-message-item miao-message-item-content">{{ msg.content }}</div>
|
||||||
|
</div>
|
||||||
|
</transition-group>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import generateId from '@/hooks/generateId';
|
||||||
|
import { NIcon } from 'naive-ui';
|
||||||
|
import { computed, onMounted, ref, shallowReactive } from 'vue';
|
||||||
|
import { InformationCircle, CheckmarkCircle, CloseCircle } from '@vicons/ionicons5'
|
||||||
|
|
||||||
|
interface MessageOptions {
|
||||||
|
type?: 'info' | 'success' | 'error'
|
||||||
|
timeout?: number
|
||||||
|
id?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Message {
|
||||||
|
icon: any,
|
||||||
|
timer: any,
|
||||||
|
iconColor: string,
|
||||||
|
content: string,
|
||||||
|
}
|
||||||
|
|
||||||
|
const iconMap = {
|
||||||
|
'info': { icon: InformationCircle, color: 'blue' },
|
||||||
|
'success': { icon: CheckmarkCircle, color: 'green' },
|
||||||
|
'error': { icon: CloseCircle, color: 'red' },
|
||||||
|
}
|
||||||
|
|
||||||
|
const messageMap = shallowReactive<Record<string, Message | undefined>>({})
|
||||||
|
const rootRef = ref<HTMLDivElement>()
|
||||||
|
const maxMessageWidth = ref<number>(-1)
|
||||||
|
|
||||||
|
const messageList = computed(() => {
|
||||||
|
return Object.keys(messageMap).filter(v => messageMap[v] !== undefined).map(v => ({
|
||||||
|
id: v,
|
||||||
|
...messageMap[v],
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
const message = (content: string, options?: MessageOptions) => {
|
||||||
|
let timer: any
|
||||||
|
const { timeout = 0, type = 'info', id = generateId() } = options ?? {}
|
||||||
|
if (timeout > 0) {
|
||||||
|
messageMap[id]?.timer && clearTimeout(messageMap[id]?.timer)
|
||||||
|
timer = setTimeout(() => {
|
||||||
|
messageMap[id] = undefined
|
||||||
|
}, timeout)
|
||||||
|
}
|
||||||
|
messageMap[id] = {
|
||||||
|
icon: iconMap[type].icon,
|
||||||
|
iconColor: iconMap[type].color,
|
||||||
|
content,
|
||||||
|
timer
|
||||||
|
}
|
||||||
|
return (newContent: string, newOptions?: MessageOptions) => {
|
||||||
|
newOptions = newOptions ?? {}
|
||||||
|
newOptions.id = id
|
||||||
|
message(newContent, newOptions)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
// const set = message('test', { timeout: 5000 })
|
||||||
|
// setTimeout(() => {
|
||||||
|
// set('miao', { type: 'success' })
|
||||||
|
// }, 1000);
|
||||||
|
const observer = new ResizeObserver(entries => {
|
||||||
|
for (let entry of entries) {
|
||||||
|
maxMessageWidth.value = entry.contentRect.width * 0.8;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (rootRef.value) {
|
||||||
|
observer.observe(rootRef.value);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
defineExpose({ message });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.miao-message-provider {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.miao-message-provider-container {
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
left: 50%;
|
||||||
|
top: 30px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
overflow: visible;
|
||||||
|
|
||||||
|
.miao-message {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: max-content;
|
||||||
|
background-color: rgb(249, 249, 249);
|
||||||
|
padding: 5px 10px;
|
||||||
|
background-color: rgb(255 255 255);
|
||||||
|
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
|
||||||
|
border-radius: 5px;
|
||||||
|
user-select: none;
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
.miao-message-item {
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.miao-message-item-content {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-fade-move,
|
||||||
|
.message-fade-enter-active,
|
||||||
|
.message-fade-leave-active {
|
||||||
|
transition: all 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-fade-enter-from,
|
||||||
|
.message-fade-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(30px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-fade-leave-active {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -98,4 +98,24 @@ export default function init() {
|
|||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
pluginCenter.registerComponent(
|
||||||
|
"miaoImages",
|
||||||
|
"图片浏览",
|
||||||
|
async () => (await import("@/views/miaoImages.vue")).default,
|
||||||
|
(vDirs, vFiles) => {
|
||||||
|
if (vDirs.length === 0 && vFiles.length === 0) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if( vDirs.length ) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
for (let vf of vFiles)
|
||||||
|
for (let end of ["xbm", "tif", "pjp", "svgz", "jpg", "jpeg", "ico", "tiff", "gif", "svg", "jfif", "webp", "png", ".bmp", "pjpeg", "avif"]) {
|
||||||
|
if (vf.name.endsWith(end)) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
);
|
||||||
}
|
}
|
||||||
@@ -43,5 +43,5 @@ export const filePicker = (() => {
|
|||||||
})();
|
})();
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
filePicker
|
filePicker,
|
||||||
};
|
};
|
||||||
@@ -3,7 +3,7 @@ import { Reactive, reactive } from "vue"
|
|||||||
|
|
||||||
let views: Reactive<VirtualPages>
|
let views: Reactive<VirtualPages>
|
||||||
|
|
||||||
export default function useViretualPages(){
|
export default function useVirtualPages(){
|
||||||
if(views === undefined) {
|
if(views === undefined) {
|
||||||
// views = reactive<VirtualPage[]>([])
|
// views = reactive<VirtualPage[]>([])
|
||||||
views = reactive(new VirtualPages())
|
views = reactive(new VirtualPages())
|
||||||
|
|||||||
@@ -1,16 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<miao-message-provider ref="miaoMessage">
|
||||||
<div class="codemirror-container" ref="rootRef" :class="`codemirror-container-${theme}`">
|
<div class="codemirror-container" ref="rootRef" :class="`codemirror-container-${theme}`">
|
||||||
<div class="codemirror-container-top">
|
<div class="codemirror-container-top">
|
||||||
<div class="codemirror-container-btn codemirror-container-btn-save" @click="handleSave">保存</div>
|
<div class="codemirror-container-btn codemirror-container-btn-save" @click="handleSave">保存</div>
|
||||||
<div class="codemirror-container-btn codemirror-container-btn-save" @click="handleReset">恢复到上次保存</div>
|
<div class="codemirror-container-btn codemirror-container-btn-save" @click="handleReset">恢复到上次保存</div>
|
||||||
</div>
|
</div>
|
||||||
<NScrollbar>
|
<div class="codemirror-container-main">
|
||||||
<codemirror v-model="codeData" :extensions="extensions" :style="{ height: '100%' }" />
|
<NScrollbar style="max-height: calc( 100% );">
|
||||||
|
<codemirror v-model="codeData" :extensions="extensions" />
|
||||||
</NScrollbar>
|
</NScrollbar>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</miao-message-provider>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import miaoMessageProvider from '@/components/miaoMessageProvider.vue'
|
||||||
import { VirtualFile } from '@/class/VirtualDirectory'
|
import { VirtualFile } from '@/class/VirtualDirectory'
|
||||||
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
||||||
import { onMounted, ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
@@ -23,6 +28,7 @@ const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
|||||||
required: true
|
required: true
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const miaoMessage = ref<InstanceType<typeof miaoMessageProvider>>()
|
||||||
const vFile = ref<VirtualFile>()
|
const vFile = ref<VirtualFile>()
|
||||||
const rootRef = ref<HTMLDivElement>()
|
const rootRef = ref<HTMLDivElement>()
|
||||||
// const _key = ref(Math.random())
|
// const _key = ref(Math.random())
|
||||||
@@ -34,6 +40,10 @@ const theme = ref<'light' | 'dark'>('light')
|
|||||||
|
|
||||||
const handleSave = async () => {
|
const handleSave = async () => {
|
||||||
if (bakData.value === codeData.value || !vFile.value) {
|
if (bakData.value === codeData.value || !vFile.value) {
|
||||||
|
miaoMessage.value?.message('内容未改动', {
|
||||||
|
timeout: 3000,
|
||||||
|
type: 'info'
|
||||||
|
})
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
const parentDir = vFile.value?.parent
|
const parentDir = vFile.value?.parent
|
||||||
@@ -43,8 +53,14 @@ const handleSave = async () => {
|
|||||||
)
|
)
|
||||||
const file = new File([new Blob([codeData.value ?? ''])], vFile.value.name)
|
const file = new File([new Blob([codeData.value ?? ''])], vFile.value.name)
|
||||||
bakData.value = codeData.value
|
bakData.value = codeData.value
|
||||||
miaoFetchApi.upload(file, parentDir)
|
const { response } = miaoFetchApi.upload(file, parentDir)
|
||||||
false && miaoFetchApi.upload(file_bak, parentDir)
|
false && miaoFetchApi.upload(file_bak, parentDir)
|
||||||
|
await response
|
||||||
|
miaoMessage.value?.message('保存成功', {
|
||||||
|
timeout: 5000,
|
||||||
|
type: 'success'
|
||||||
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleReset = async () => {
|
const handleReset = async () => {
|
||||||
@@ -139,8 +155,10 @@ onMounted(async () => {
|
|||||||
.codemirror-container {
|
.codemirror-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
overflow-y: hidden;
|
||||||
|
|
||||||
.codemirror-container-top {
|
.codemirror-container-top {
|
||||||
|
height: 25px;
|
||||||
display: flex;
|
display: flex;
|
||||||
border-bottom: 1px solid #000;
|
border-bottom: 1px solid #000;
|
||||||
}
|
}
|
||||||
@@ -160,6 +178,11 @@ onMounted(async () => {
|
|||||||
background-color: #e8e8e8;
|
background-color: #e8e8e8;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.codemirror-container-main {
|
||||||
|
height: calc(100% - 25px);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.codemirror-container-dark {
|
.codemirror-container-dark {
|
||||||
|
|||||||
+245
-303
@@ -2,88 +2,21 @@
|
|||||||
<miao-drop-handler @on-virtual-directory="handleDropVDirectory" @on-files="handleDropFiles"
|
<miao-drop-handler @on-virtual-directory="handleDropVDirectory" @on-files="handleDropFiles"
|
||||||
@on-virtual-files="handleDropVirtualFiles">
|
@on-virtual-files="handleDropVirtualFiles">
|
||||||
<div class="miao-directory-item-container" ref="rootDomRef">
|
<div class="miao-directory-item-container" ref="rootDomRef">
|
||||||
<div class="container-top" :style="{
|
<!-- 顶部面包屑导航和工具栏 -->
|
||||||
backgroundColor:
|
<miao-directory-top :color="props.color" :current-directory="currentDirectory" @back="handleBack"
|
||||||
index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
|
:open-menu-option="topBarMenuOption" @reload="handleReload" @exit="emit('exit')" :index="index"
|
||||||
}">
|
@set-current-directory="setCurrentDirectory" @search="handleSearch" @menu-select="handleTopBarMenuSelect" />
|
||||||
<div class="container-top-colorfulBar" :style="{ backgroundColor: props.color }"></div>
|
|
||||||
<div class="container-top-breadcrumb">
|
<!-- 文件和文件夹列表 -->
|
||||||
<!-- <n-scrollbar x-scrollable> -->
|
<miao-directory-items ref='miaoDirectoryItemRef' :color="props.color" :showData_directory="showData_directory"
|
||||||
<div class="container-top-breadcrumb-container">
|
:showData_files="showData_files" :selected-item="selectedItem.value" :index="index"
|
||||||
<n-breadcrumb separator=">" style="margin-left: 5px">
|
@item-click="handleItemClick" @item-download="handleItemDownload" @item-delete="handleItemDelete"
|
||||||
<n-breadcrumb-item :clickable="false">
|
@item-drag-start="handleItemDragStart" @item-rename="handleItemRename" @item-select="handleItemSelect" />
|
||||||
<n-icon size="18">
|
|
||||||
<CloudOutline />
|
<!-- 底部工具栏 -->
|
||||||
</n-icon>
|
<miao-directory-bottom :index="index" @add-new-item="handleAddNewItem" v-if="false"
|
||||||
</n-breadcrumb-item>
|
@pick-files-upload="handlePickFilesUpload" />
|
||||||
<n-breadcrumb-item v-for="dir in currentDirectory?.getParents"
|
|
||||||
@click="setCurrentDirectory(dir)" :clickable="true">
|
|
||||||
<div>{{ dir.name }}</div>
|
|
||||||
</n-breadcrumb-item>
|
|
||||||
</n-breadcrumb>
|
|
||||||
</div>
|
|
||||||
<!-- </n-scrollbar> -->
|
|
||||||
</div>
|
|
||||||
<div class="container-top-tools">
|
|
||||||
<n-icon class="container-top-tools-item" size="15" @click="handleBack">
|
|
||||||
<ChevronBackOutline />
|
|
||||||
</n-icon>
|
|
||||||
<n-icon class="container-top-tools-item" size="14" @click="handleReload">
|
|
||||||
<ReloadOutline class="container-top-tools-item-reload" />
|
|
||||||
</n-icon>
|
|
||||||
<n-icon class="container-top-tools-item" size="20" @click="emit('exit')">
|
|
||||||
<CloseOutline />
|
|
||||||
</n-icon>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="container-items" :style="{
|
|
||||||
backgroundColor:
|
|
||||||
index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
|
|
||||||
}">
|
|
||||||
<n-scrollbar>
|
|
||||||
<transition-group name="dirItem">
|
|
||||||
<miaoDirectoryItem v-for="dir in showData_directory" :item="dir" :key="dir.uid"
|
|
||||||
:color="props.color" :selectedItem="selectedItem.value" @delete="handleItemDelete(dir)"
|
|
||||||
@click="handleItemClick(dir)" @drag-start="handleItemDragStart"
|
|
||||||
@rename="handleItemRename(dir)" @on-selected="handleItemSelect(dir)" />
|
|
||||||
</transition-group>
|
|
||||||
<transition-group name="dirItem">
|
|
||||||
<miaoDirectoryItem v-for="file in showData_files" :item="file" :key="file.uid"
|
|
||||||
:color="props.color" :selectedItem="selectedItem.value" @click="handleItemClick(file)"
|
|
||||||
@download="handleItemDownload(file)" @delete="handleItemDelete(file)"
|
|
||||||
@drag-start="handleItemDragStart" @rename="handleItemRename(file)"
|
|
||||||
@on-selected="handleItemSelect(file)" />
|
|
||||||
</transition-group>
|
|
||||||
<!-- <n-virtual-list :item="showData_all" :item-size="50">
|
|
||||||
|
|
||||||
</n-virtual-list> -->
|
|
||||||
</n-scrollbar>
|
|
||||||
</div>
|
|
||||||
<div class="container-bottom" :style="{
|
|
||||||
backgroundColor:
|
|
||||||
index % 2 === 1 ? 'rgb(61 61 61)' : 'rgb(162 162 162)'
|
|
||||||
}">
|
|
||||||
<div class="container-bottom-item">
|
|
||||||
<div class="container-bottom-item-icon">
|
|
||||||
<add-outline :style="{
|
|
||||||
color:
|
|
||||||
index % 2 === 0
|
|
||||||
? 'rgb(0 0 0)'
|
|
||||||
: 'rgb(255 255 255)'
|
|
||||||
}" @click="handleAddNewItem" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="container-bottom-item">
|
|
||||||
<div class="container-bottom-item-icon">
|
|
||||||
<cloud-upload-outline :style="{
|
|
||||||
color:
|
|
||||||
index % 2 === 0
|
|
||||||
? 'rgb(0 0 0)'
|
|
||||||
: 'rgb(255 255 255)'
|
|
||||||
}" @click="handlePickFilesUpload" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<miao-mask v-model:show="showModel"></miao-mask>
|
<miao-mask v-model:show="showModel"></miao-mask>
|
||||||
<miao-popup-input ref="popupInput"></miao-popup-input>
|
<miao-popup-input ref="popupInput"></miao-popup-input>
|
||||||
</div>
|
</div>
|
||||||
@@ -91,34 +24,39 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { NBreadcrumbItem, NBreadcrumb, NIcon, NScrollbar } from 'naive-ui'
|
import { computed, h, nextTick, onMounted, reactive, ref } from 'vue'
|
||||||
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
||||||
import { computed, onMounted, reactive, ref } from 'vue'
|
|
||||||
import Config from '@/config'
|
import Config from '@/config'
|
||||||
import miaoMask from '@/components/miaoMask.vue'
|
|
||||||
import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue'
|
|
||||||
import miaoPopupInput from '@/components/miaoPopupInput.vue'
|
|
||||||
import miaoDropHandler from '@/components/miaoDropHandler.vue'
|
|
||||||
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
|
||||||
import useDataBus from '@/hooks/useDataBus'
|
import useDataBus from '@/hooks/useDataBus'
|
||||||
import {
|
|
||||||
CloudOutline,
|
|
||||||
ChevronBackOutline,
|
|
||||||
ReloadOutline,
|
|
||||||
CloseOutline,
|
|
||||||
CloudUploadOutline,
|
|
||||||
AddOutline
|
|
||||||
} from '@vicons/ionicons5'
|
|
||||||
import useUploadQueue from '@/hooks/useUploadQueue'
|
import useUploadQueue from '@/hooks/useUploadQueue'
|
||||||
import useVirtualPages from '@/hooks/useVirtualPages'
|
import useVirtualPages from '@/hooks/useVirtualPages'
|
||||||
import { filePicker } from '@/hooks/miaoTools'
|
import { filePicker } from '@/hooks/miaoTools'
|
||||||
import { uniq } from 'lodash'
|
import { uniq } from 'lodash'
|
||||||
|
|
||||||
|
// 导入子组件
|
||||||
|
import MiaoDirectoryTop from '@/components/miaoDirectory/miaoDirectoryTop.vue'
|
||||||
|
import MiaoDirectoryItems from '@/components/miaoDirectory/miaoDirectoryItemsContainer.vue'
|
||||||
|
import MiaoDirectoryBottom from '@/components/miaoDirectory/miaoDirectoryBottom.vue'
|
||||||
|
import MiaoMask from '@/components/miaoMask.vue'
|
||||||
|
import MiaoPopupInput from '@/components/miaoPopupInput.vue'
|
||||||
|
import MiaoDropHandler from '@/components/miaoDropHandler.vue'
|
||||||
|
import { NIcon } from 'naive-ui'
|
||||||
|
import {
|
||||||
|
CloseOutline, SearchOutline, FilterOutline, CheckmarkDoneOutline,
|
||||||
|
DocumentText, ExtensionPuzzleOutline,
|
||||||
|
FileTray,
|
||||||
|
AddOutline,
|
||||||
|
CloudUploadOutline
|
||||||
|
} from '@vicons/ionicons5'
|
||||||
|
import usePluginCenter from '@/hooks/usePluginCenter'
|
||||||
|
|
||||||
const { baseUrl, api } = Config
|
const { baseUrl, api } = Config
|
||||||
const dataBus = useDataBus()
|
const dataBus = useDataBus()
|
||||||
const views = useVirtualPages()
|
const views = useVirtualPages()
|
||||||
|
const uploadQueue = useUploadQueue()
|
||||||
const miaoFetchApi = useMiaoFetchApi()
|
const miaoFetchApi = useMiaoFetchApi()
|
||||||
|
const pluginCenter = usePluginCenter()
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
color: string
|
color: string
|
||||||
@@ -129,9 +67,13 @@ const emit = defineEmits<{
|
|||||||
exit: []
|
exit: []
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const popupInput = ref()
|
const popupInput = ref<InstanceType<typeof MiaoPopupInput>>()
|
||||||
// 是否显示模态框
|
// 是否显示模态框
|
||||||
const showModel = ref(0)
|
const showModel = ref(0)
|
||||||
|
const searchText = ref<string>('')
|
||||||
|
const showDirs = ref<boolean>(true)
|
||||||
|
const showFiles = ref<boolean>(true)
|
||||||
|
const miaoDirectoryItemRef = ref()
|
||||||
|
|
||||||
class SelectedItem {
|
class SelectedItem {
|
||||||
constructor() {
|
constructor() {
|
||||||
@@ -142,32 +84,36 @@ class SelectedItem {
|
|||||||
this._selectedItem = [item, ...this._selectedItem]
|
this._selectedItem = [item, ...this._selectedItem]
|
||||||
}
|
}
|
||||||
remove(item: VirtualDirectory | VirtualFile) {
|
remove(item: VirtualDirectory | VirtualFile) {
|
||||||
this._selectedItem = this._selectedItem.filter(v => v !== item)
|
this._selectedItem = this._selectedItem.filter((v) => v !== item)
|
||||||
}
|
}
|
||||||
clear() {
|
clear() {
|
||||||
this._selectedItem = []
|
this._selectedItem = []
|
||||||
}
|
}
|
||||||
// 保证内容仍然存在于dir中且各个元素不重复
|
// 保证内容仍然存在于dir中且各个元素不重复
|
||||||
get value() {
|
get value() {
|
||||||
return uniq(this._selectedItem).filter(v => {
|
const _filterList = [
|
||||||
|
...(currentDirectory.value?.directories ?? []),
|
||||||
|
...(currentDirectory.value?.files ?? []),
|
||||||
|
]
|
||||||
|
return uniq(this._selectedItem).filter((v) => {
|
||||||
if (currentDirectory.value === undefined) {
|
if (currentDirectory.value === undefined) {
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
return [...currentDirectory.value?.directorys, ...currentDirectory.value?.files].includes(v)
|
return _filterList.includes(v)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 已选择的item,用于多选功能
|
// 已选择的item,用于多选功能
|
||||||
const selectedItem = reactive(new SelectedItem())
|
const selectedItem = reactive(new SelectedItem())
|
||||||
|
|
||||||
const currentDirectorys = defineModel<VirtualDirectory[]>('currentDirectorys', {
|
const currentDirectories = defineModel<VirtualDirectory[]>('currentDirectories', {
|
||||||
required: true
|
required: true,
|
||||||
})
|
})
|
||||||
|
|
||||||
// 目前展示的Dir
|
// 目前展示的Dir
|
||||||
const currentDirectory = computed(() => {
|
const currentDirectory = computed(() => {
|
||||||
return currentDirectorys.value[0]
|
return currentDirectories.value[0]
|
||||||
})
|
})
|
||||||
|
|
||||||
// 当前组件在views中的序号
|
// 当前组件在views中的序号
|
||||||
@@ -177,42 +123,118 @@ const index = computed(() => {
|
|||||||
|
|
||||||
// 用于展示的数据,后续会增加排序等操作
|
// 用于展示的数据,后续会增加排序等操作
|
||||||
const showData_directory = computed<VirtualDirectory[]>(() => {
|
const showData_directory = computed<VirtualDirectory[]>(() => {
|
||||||
const data = currentDirectory.value?.directorys
|
if (showDirs.value === false) {
|
||||||
? [...currentDirectory.value?.directorys]
|
return []
|
||||||
|
}
|
||||||
|
let data = currentDirectory.value?.directories
|
||||||
|
? [...currentDirectory.value?.directories]
|
||||||
: []
|
: []
|
||||||
|
if (searchText.value !== '') {
|
||||||
|
data = data.filter(vd => vd.name.includes(searchText.value))
|
||||||
|
}
|
||||||
return data
|
return data
|
||||||
})
|
})
|
||||||
const showData_files = computed<VirtualFile[]>(() => {
|
const showData_files = computed<VirtualFile[]>(() => {
|
||||||
const data = currentDirectory.value?.files
|
if (showFiles.value === false) {
|
||||||
? [...currentDirectory.value?.files]
|
return []
|
||||||
: []
|
}
|
||||||
|
let data = currentDirectory.value?.files ? [...currentDirectory.value?.files] : []
|
||||||
|
if (searchText.value !== '') {
|
||||||
|
data = data.filter(vd => vd.name.includes(searchText.value))
|
||||||
|
}
|
||||||
return data
|
return data
|
||||||
})
|
})
|
||||||
// const showData_all = computed<(VirtualDirectory | VirtualFile)[]>(() => {
|
|
||||||
// const data = currentDirectory.value?.directorys
|
|
||||||
// ? [...currentDirectory.value?.directorys]
|
|
||||||
// : []
|
|
||||||
// data.push(...currentDirectory.value?.files)
|
|
||||||
// return data
|
|
||||||
// })
|
|
||||||
|
|
||||||
// 用于监听拖拽文件事件
|
const topBarMenuOption = computed(() => {
|
||||||
const rootDomRef = ref<HTMLDivElement>()
|
return [
|
||||||
|
{
|
||||||
|
label: '新建',
|
||||||
|
key: 'create',
|
||||||
|
icon: renderIcon(AddOutline)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '上传',
|
||||||
|
key: 'upload',
|
||||||
|
icon: renderIcon(CloudUploadOutline)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '搜索',
|
||||||
|
key: 'search',
|
||||||
|
icon: renderIcon(SearchOutline)
|
||||||
|
},
|
||||||
|
searchText.value !== '' ? {
|
||||||
|
label: '重置搜索',
|
||||||
|
key: 'searchReset',
|
||||||
|
icon: renderIcon(SearchOutline)
|
||||||
|
} : undefined,
|
||||||
|
selectedItem.value.length !== 0 ? {
|
||||||
|
label: '重置多选',
|
||||||
|
key: 'selectedItemReset',
|
||||||
|
icon: renderIcon(CheckmarkDoneOutline)
|
||||||
|
} : undefined,
|
||||||
|
{
|
||||||
|
label: '筛选',
|
||||||
|
key: 'filter',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
label: `${showDirs.value ? '隐藏' : '显示'}文件夹`,
|
||||||
|
key: 'showDirs',
|
||||||
|
icon: renderIcon(FileTray)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: `${showFiles.value ? '隐藏' : '显示'}文件`,
|
||||||
|
key: 'showFiles',
|
||||||
|
icon: renderIcon(DocumentText)
|
||||||
|
},
|
||||||
|
],
|
||||||
|
icon: renderIcon(FilterOutline)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '插件',
|
||||||
|
key: 'plugin',
|
||||||
|
children: [
|
||||||
|
...pluginCenter.getUsablePlugin([currentDirectories.value[0]], []).map(v => ({
|
||||||
|
label: `${v.name}`,
|
||||||
|
key: `plugin:${v.key}`
|
||||||
|
})),
|
||||||
|
],
|
||||||
|
icon: renderIcon(ExtensionPuzzleOutline)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '关闭',
|
||||||
|
key: 'close',
|
||||||
|
icon: renderIcon(CloseOutline)
|
||||||
|
},
|
||||||
|
].filter(v => v !== undefined)
|
||||||
|
})
|
||||||
|
|
||||||
const uploadQueue = useUploadQueue()
|
const renderIcon = (icon: any) => {
|
||||||
|
return () => {
|
||||||
|
return h(NIcon, null, {
|
||||||
|
default: () => h(icon)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 设置显示的dir
|
// 设置显示的dir
|
||||||
const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
|
const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
|
||||||
// 若没有缓存数据则同步刷新,有缓存数据则异步刷新
|
// 若没有缓存数据则同步刷新,有缓存数据则异步刷新
|
||||||
if (
|
if (virtualDirectory.files === undefined || virtualDirectory.directories === undefined) {
|
||||||
virtualDirectory.files === undefined ||
|
|
||||||
virtualDirectory.directorys === undefined
|
|
||||||
) {
|
|
||||||
await virtualDirectory.update()
|
await virtualDirectory.update()
|
||||||
} else {
|
} else {
|
||||||
virtualDirectory.update()
|
virtualDirectory.update()
|
||||||
}
|
}
|
||||||
currentDirectorys.value[0] = virtualDirectory
|
if (currentDirectories.value[0] !== virtualDirectory) {
|
||||||
|
selectedItem.clear()
|
||||||
|
handleSearchReset()
|
||||||
|
nextTick(() => {
|
||||||
|
miaoDirectoryItemRef.value.scrollTo({
|
||||||
|
top: 0,
|
||||||
|
behavior: "instant"
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
currentDirectories.value[0] = virtualDirectory
|
||||||
}
|
}
|
||||||
|
|
||||||
const reload = () => {
|
const reload = () => {
|
||||||
@@ -224,7 +246,7 @@ const openUrl = (
|
|||||||
config?: {
|
config?: {
|
||||||
download?: string
|
download?: string
|
||||||
target?: string
|
target?: string
|
||||||
}
|
},
|
||||||
) => {
|
) => {
|
||||||
let { target, download } = config ?? {}
|
let { target, download } = config ?? {}
|
||||||
const a = document.createElement('a')
|
const a = document.createElement('a')
|
||||||
@@ -234,6 +256,29 @@ const openUrl = (
|
|||||||
a.click()
|
a.click()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleTopBarMenuSelect = (key: string) => {
|
||||||
|
if (key === 'close') {
|
||||||
|
emit('exit')
|
||||||
|
} else if (key === 'search') {
|
||||||
|
handleSearch()
|
||||||
|
} else if (key === 'upload') {
|
||||||
|
handlePickFilesUpload()
|
||||||
|
} else if (key === 'create') {
|
||||||
|
handleAddNewItem()
|
||||||
|
} else if (key === 'searchReset') {
|
||||||
|
handleSearchReset()
|
||||||
|
} else if (key === 'selectedItemReset') {
|
||||||
|
selectedItem.clear()
|
||||||
|
} else if (key === 'showDirs') {
|
||||||
|
showDirs.value = !showDirs.value
|
||||||
|
} else if (key === 'showFiles') {
|
||||||
|
showFiles.value = !showFiles.value
|
||||||
|
} else if (key.startsWith('plugin:')) {
|
||||||
|
const pluginName = key.split(':')[1]
|
||||||
|
pluginCenter.usePlugin(pluginName, [currentDirectory.value], [])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const handleBack = () => {
|
const handleBack = () => {
|
||||||
if (currentDirectory.value?.parent) {
|
if (currentDirectory.value?.parent) {
|
||||||
setCurrentDirectory(currentDirectory.value.parent)
|
setCurrentDirectory(currentDirectory.value.parent)
|
||||||
@@ -258,7 +303,7 @@ const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
|
|||||||
|
|
||||||
const handleItemDownload = (item: VirtualFile) => {
|
const handleItemDownload = (item: VirtualFile) => {
|
||||||
openUrl(`${baseUrl}${api.get}${item.path}`, {
|
openUrl(`${baseUrl}${api.get}${item.path}`, {
|
||||||
download: item.name
|
download: item.name,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -266,7 +311,7 @@ const handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
|
|||||||
for (let item of uniq([...selectedItem.value, _item])) {
|
for (let item of uniq([...selectedItem.value, _item])) {
|
||||||
; (async () => {
|
; (async () => {
|
||||||
const { response } = miaoFetchApi.delete(item, {
|
const { response } = miaoFetchApi.delete(item, {
|
||||||
retry: 5
|
retry: 5,
|
||||||
})
|
})
|
||||||
// todo: 将删除事件统一用一个事件管理中心管理
|
// todo: 将删除事件统一用一个事件管理中心管理
|
||||||
const id = (await response).eventId
|
const id = (await response).eventId
|
||||||
@@ -280,32 +325,34 @@ const handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
|
const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
|
||||||
const popupRes = await popupInput.value.popup({
|
const popupRes = await popupInput.value?.popup({
|
||||||
title: '重命名',
|
title: '重命名',
|
||||||
showInput: true,
|
|
||||||
inputValue: item.name,
|
inputValue: item.name,
|
||||||
inputProps: {
|
inputProps: {
|
||||||
placeholder: item.name
|
placeholder: item.name,
|
||||||
},
|
},
|
||||||
options: [
|
options: [
|
||||||
{
|
{
|
||||||
label: '取消',
|
label: '取消',
|
||||||
key: false,
|
key: false,
|
||||||
type: 'error'
|
type: 'error',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '确认',
|
label: '确认',
|
||||||
key: true,
|
key: true,
|
||||||
type: 'success'
|
type: 'success',
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
})
|
})
|
||||||
if (popupRes.key === false) {
|
if (popupRes?.key === false) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const newName = popupRes?.text
|
||||||
|
if (!newName) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
const newName = popupRes.text
|
|
||||||
const { response } = miaoFetchApi.rename(item, newName, {
|
const { response } = miaoFetchApi.rename(item, newName, {
|
||||||
retry: 5
|
retry: 5,
|
||||||
})
|
})
|
||||||
const id = (await response).eventId
|
const id = (await response).eventId
|
||||||
const { response: res } = miaoFetchApi.query(id)
|
const { response: res } = miaoFetchApi.query(id)
|
||||||
@@ -317,11 +364,11 @@ const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
|
|||||||
|
|
||||||
const handleItemDragStart = async (
|
const handleItemDragStart = async (
|
||||||
_event: DragEvent,
|
_event: DragEvent,
|
||||||
item: VirtualDirectory | VirtualFile
|
item: VirtualDirectory | VirtualFile,
|
||||||
) => {
|
) => {
|
||||||
const items = uniq([item, ...selectedItem.value])
|
const items = uniq([item, ...selectedItem.value])
|
||||||
dataBus.set('dragData_vFiles', items.filter(v => v.type === 'file'))
|
dataBus.set('dragData_vFiles', items.filter((v) => v.type === 'file'))
|
||||||
dataBus.set('dragData_vDirectory', items.filter(v => v.type === 'directory'))
|
dataBus.set('dragData_vDirectory', items.filter((v) => v.type === 'directory'))
|
||||||
// selectedItem.clear()
|
// selectedItem.clear()
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -330,7 +377,7 @@ const handleDropFiles = async (files: File[]) => {
|
|||||||
uploadQueue.push(files, currentDirectory.value, {
|
uploadQueue.push(files, currentDirectory.value, {
|
||||||
onFinish() {
|
onFinish() {
|
||||||
reload()
|
reload()
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -340,6 +387,9 @@ const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
|
|||||||
if (currentDirectory.value.getParents.includes(vDir)) {
|
if (currentDirectory.value.getParents.includes(vDir)) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
if (vDir.parent === currentDirectory.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
}
|
}
|
||||||
for (let dir of vDirs) {
|
for (let dir of vDirs) {
|
||||||
; (async () => {
|
; (async () => {
|
||||||
@@ -377,48 +427,51 @@ const handleDropVirtualFiles = (files: VirtualFile[]) => {
|
|||||||
|
|
||||||
const handlePickFilesUpload = async () => {
|
const handlePickFilesUpload = async () => {
|
||||||
const files = await filePicker({
|
const files = await filePicker({
|
||||||
multiple: true
|
multiple: true,
|
||||||
})
|
})
|
||||||
const _currDir = currentDirectory.value
|
const _currDir = currentDirectory.value
|
||||||
uploadQueue.push(files, _currDir, {
|
uploadQueue.push(files, _currDir, {
|
||||||
onFinish() {
|
onFinish() {
|
||||||
_currDir.update()
|
_currDir.update()
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleAddNewItem = async () => {
|
const handleAddNewItem = async () => {
|
||||||
const popupRes = await popupInput.value.popup({
|
const popupRes = await popupInput.value?.popup({
|
||||||
title: '新建文件/文件夹',
|
title: '新建文件/文件夹',
|
||||||
showInput: true,
|
|
||||||
inputProps: {
|
inputProps: {
|
||||||
placeholder: ''
|
placeholder: '',
|
||||||
},
|
},
|
||||||
options: [
|
options: [
|
||||||
{
|
{
|
||||||
label: '取消',
|
label: '取消',
|
||||||
key: 'cancel',
|
key: 'cancel',
|
||||||
type: 'error'
|
type: 'error',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '文件',
|
label: '文件',
|
||||||
key: 'file',
|
key: 'file',
|
||||||
type: 'success'
|
type: 'success',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '文件夹',
|
label: '文件夹',
|
||||||
key: 'dir',
|
key: 'dir',
|
||||||
type: 'success'
|
type: 'success',
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
})
|
})
|
||||||
// todo: 上传前如重名文件夹等等的错误提前检查
|
// todo: 上传前如重名文件夹等等的错误提前检查
|
||||||
if (popupRes.key === 'cancel' || popupRes.text === '') {
|
if (popupRes?.key === 'cancel' || popupRes?.text === '') {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
const _currDir = currentDirectory.value
|
const _currDir = currentDirectory.value
|
||||||
const name = popupRes.text
|
const name = popupRes?.text
|
||||||
const opType: 'file' | 'dir' = popupRes.key
|
if (!name) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// @ts-ignore
|
||||||
|
const opType: 'file' | 'dir' = popupRes?.key
|
||||||
if (opType === 'dir') {
|
if (opType === 'dir') {
|
||||||
const res = await miaoFetchApi.mkdir(currentDirectory.value, name)
|
const res = await miaoFetchApi.mkdir(currentDirectory.value, name)
|
||||||
if (res.message === 'success') {
|
if (res.message === 'success') {
|
||||||
@@ -440,6 +493,45 @@ const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
|
|||||||
selectedItem.remove(item)
|
selectedItem.remove(item)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleSearch = async () => {
|
||||||
|
const popupRes = await popupInput.value?.popup({
|
||||||
|
title: '搜索当前文件夹',
|
||||||
|
inputValue: searchText.value,
|
||||||
|
inputProps: {
|
||||||
|
placeholder: '',
|
||||||
|
},
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '取消',
|
||||||
|
key: 'cancel',
|
||||||
|
type: 'default',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '重置',
|
||||||
|
key: 'reset',
|
||||||
|
type: 'default',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '搜索',
|
||||||
|
key: 'search',
|
||||||
|
type: 'success',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
if (!popupRes) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (popupRes.key === 'search') {
|
||||||
|
searchText.value = popupRes.text
|
||||||
|
} else if (popupRes.key === 'reset') {
|
||||||
|
handleSearchReset()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSearchReset = () => {
|
||||||
|
searchText.value = ''
|
||||||
|
}
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await setCurrentDirectory(currentDirectory.value)
|
await setCurrentDirectory(currentDirectory.value)
|
||||||
})
|
})
|
||||||
@@ -453,159 +545,9 @@ $bottom-bar-height: 60px;
|
|||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: inherit;
|
width: inherit;
|
||||||
// min-width: 236px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
min-width: 170px;
|
min-width: 170px;
|
||||||
|
|
||||||
.container-top {
|
|
||||||
height: $top-height;
|
|
||||||
width: 100%;
|
|
||||||
user-select: none;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: #f1f1f1;
|
|
||||||
|
|
||||||
.container-top-colorfulBar {
|
|
||||||
height: 70%;
|
|
||||||
width: 5px;
|
|
||||||
margin-left: 10px;
|
|
||||||
border-radius: 3px 0 0 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-top-breadcrumb {
|
|
||||||
position: relative;
|
|
||||||
height: 70%;
|
|
||||||
width: calc(100% - 95px);
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
// overflow: hidden;
|
|
||||||
overflow-y: hidden;
|
|
||||||
overflow-x: hidden;
|
|
||||||
background-color: #ffffff;
|
|
||||||
padding: 0 5px;
|
|
||||||
border-radius: 0 3px 3px 0;
|
|
||||||
|
|
||||||
.container-top-breadcrumb-container {
|
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
min-width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-top-tools {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
width: 70px;
|
|
||||||
padding: 0 5px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.container-top-tools-item {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background-color: #ffffff00;
|
|
||||||
border-radius: 5px;
|
|
||||||
transition: background-color 0.3s;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.container-top-tools-item-reload {
|
|
||||||
transition: transform 0.6s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: rgba(128, 128, 128, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active .container-top-tools-item-reload {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// &::after {
|
|
||||||
// content: '';
|
|
||||||
// height: 60%;
|
|
||||||
// position: absolute;
|
|
||||||
// right: -2px;
|
|
||||||
// width: 2px;
|
|
||||||
// background-color: #828282;
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-items {
|
|
||||||
width: 100%;
|
|
||||||
height: calc(100% - $top-height - $bottom-bar-height);
|
|
||||||
// flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-bottom {
|
|
||||||
height: $bottom-bar-height;
|
|
||||||
background-color: bisque;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
|
||||||
user-select: none;
|
|
||||||
box-shadow: 0px 1px 10px #888888;
|
|
||||||
z-index: 2;
|
|
||||||
|
|
||||||
.container-bottom-item {
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.container-bottom-item-icon {
|
|
||||||
svg {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
svg {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// transition动画相关
|
|
||||||
// .miao-directory-item-container {
|
|
||||||
// .container-items {
|
|
||||||
// .dirItem-move {
|
|
||||||
// transition: all 0.2s ease;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .dirItem-leave-active {
|
|
||||||
// transition: none;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .dirItem-enter-from {
|
|
||||||
// opacity: 0;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// .dirItem-leave-active {
|
|
||||||
// position: absolute;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
</style>
|
</style>
|
||||||
@@ -0,0 +1,185 @@
|
|||||||
|
<template>
|
||||||
|
<miao-drop-handler @on-virtual-directory="handleDrop" @on-virtual-files="handleDrop">
|
||||||
|
<div class="miaoImage" ref="rootRef">
|
||||||
|
<n-scrollbar ref="NScrollbarRef">
|
||||||
|
<div class="miaoImage-container">
|
||||||
|
<div class="miaoImage-container-row" v-for="(src, index) in imageSrcList" :key="index">
|
||||||
|
<img :src="src" class="miaoImage-container-row-image" loading="lazy"
|
||||||
|
:class="activeImageIndex === index ? 'miaoImage-container-row-image-active' : ''"
|
||||||
|
@click="activeImageIndex = index" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</n-scrollbar>
|
||||||
|
<miao-mask :show="activeImageIndex !== -1" @click="activeImageIndex = -1" class="miaoImage-mask">
|
||||||
|
<ChevronBack class="miaoImage-mask-btn miaoImage-mask-btn-back" @click="handleActiveImageIndexBack" />
|
||||||
|
<img :src="imageSrcList[activeImageIndex]" class="miaoImage-mask-active"
|
||||||
|
@click="e => e.stopPropagation()" draggable="false">
|
||||||
|
<ChevronForward class="miaoImage-mask-btn miaoImage-mask-btn-forward"
|
||||||
|
@click="handleActiveImageIndexForward" />
|
||||||
|
</miao-mask>
|
||||||
|
</div>
|
||||||
|
</miao-drop-handler>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import miaoMask from '@/components/miaoMask.vue';
|
||||||
|
import miaoDropHandler from '@/components/miaoDropHandler.vue';
|
||||||
|
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
|
||||||
|
import { uniq } from 'lodash';
|
||||||
|
import { nextTick, onMounted, ref } from 'vue'
|
||||||
|
import { NScrollbar } from 'naive-ui';
|
||||||
|
import { ChevronBack, ChevronForward } from '@vicons/ionicons5'
|
||||||
|
|
||||||
|
const imageSuffixList = [
|
||||||
|
'xbm',
|
||||||
|
'tif',
|
||||||
|
'pjp',
|
||||||
|
'svgz',
|
||||||
|
'jpg',
|
||||||
|
'jpeg',
|
||||||
|
'ico',
|
||||||
|
'tiff',
|
||||||
|
'gif',
|
||||||
|
'svg',
|
||||||
|
'jfif',
|
||||||
|
'webp',
|
||||||
|
'png',
|
||||||
|
'bmp',
|
||||||
|
'pjpeg',
|
||||||
|
'avif'
|
||||||
|
]
|
||||||
|
|
||||||
|
const currentDirectories = defineModel<VirtualDirectory[]>('currentDirectories', {
|
||||||
|
required: true
|
||||||
|
})
|
||||||
|
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
||||||
|
required: true
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
const NScrollbarRef = ref()
|
||||||
|
const rootRef = ref<any>()
|
||||||
|
|
||||||
|
const imageSrcList = ref<string[]>([])
|
||||||
|
|
||||||
|
const activeImageIndex = ref(-1)
|
||||||
|
|
||||||
|
const scrollToActiveImage = () => {
|
||||||
|
const dom = rootRef.value?.querySelector('.miaoImage-container-row-image-active')
|
||||||
|
NScrollbarRef.value.scrollTo({
|
||||||
|
top: dom.offsetTop - 30,
|
||||||
|
behavior: "smooth"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleActiveImageIndexBack = (e: any) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
activeImageIndex.value = (activeImageIndex.value - 1 + imageSrcList.value.length) % imageSrcList.value.length
|
||||||
|
nextTick(scrollToActiveImage)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleActiveImageIndexForward = (e: any) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
activeImageIndex.value = (activeImageIndex.value + 1 + imageSrcList.value.length) % imageSrcList.value.length
|
||||||
|
nextTick(scrollToActiveImage)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDrop = (vItems: (VirtualFile | VirtualDirectory)[]) => {
|
||||||
|
if (vItems[0].type === 'directory') {
|
||||||
|
// @ts-ignore
|
||||||
|
currentDirectories.value = [...currentDirectories.value, ...vItems]
|
||||||
|
} else {
|
||||||
|
// @ts-ignore
|
||||||
|
currentFiles.value = [...currentFiles, ...vItems]
|
||||||
|
}
|
||||||
|
vItems.forEach(v => {
|
||||||
|
updateImageSrcList(v)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateImageSrcList = async (source: VirtualFile | VirtualDirectory) => {
|
||||||
|
let newSrcList: string[]
|
||||||
|
if (source.type === 'directory') {
|
||||||
|
await source.update()
|
||||||
|
newSrcList = source.files?.filter(v => imageSuffixList.includes(v.name.split('.').pop() ?? '')).map(v => v.url) ?? []
|
||||||
|
} else {
|
||||||
|
if (!imageSuffixList.includes(source.name.split('.').pop() ?? '')) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
newSrcList = [source.url]
|
||||||
|
}
|
||||||
|
imageSrcList.value = uniq([...imageSrcList.value, ...newSrcList])
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
[...currentDirectories.value, ...currentFiles.value].forEach(updateImageSrcList)
|
||||||
|
})
|
||||||
|
</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;
|
||||||
|
|
||||||
|
.miaoImage-container-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 25%;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
|
||||||
|
.miaoImage-container-row-image {
|
||||||
|
width: 80%;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: width 0.25s;
|
||||||
|
box-shadow: 0 0 10px -5px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-active {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.miaoImage-mask {
|
||||||
|
background-color: rgba(0, 0, 0, 0.444);
|
||||||
|
}
|
||||||
|
|
||||||
|
.miaoImage-mask-active {
|
||||||
|
max-width: 80%;
|
||||||
|
max-height: 80%;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.miaoImage-mask-btn {
|
||||||
|
color: #ffffff99;
|
||||||
|
width: 7%;
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&-back {
|
||||||
|
left: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-forward {
|
||||||
|
right: 1%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -10,7 +10,7 @@
|
|||||||
import { VirtualFile } from '@/class/VirtualDirectory'
|
import { VirtualFile } from '@/class/VirtualDirectory'
|
||||||
import miaoDropHandler from '@/components/miaoDropHandler.vue'
|
import miaoDropHandler from '@/components/miaoDropHandler.vue'
|
||||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
||||||
// import useViretualPages from '@/hooks/useVirtualPages';
|
// import useVirtualPages from '@/hooks/useVirtualPages';
|
||||||
import XGPlayer from 'xgplayer'
|
import XGPlayer from 'xgplayer'
|
||||||
import '@/style/xgplayer.scss'
|
import '@/style/xgplayer.scss'
|
||||||
import TextTrack from 'xgplayer/es/plugins/track'
|
import TextTrack from 'xgplayer/es/plugins/track'
|
||||||
@@ -26,7 +26,7 @@ const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
|
|||||||
required: true
|
required: true
|
||||||
})
|
})
|
||||||
|
|
||||||
// const views = useViretualPages()
|
// const views = useVirtualPages()
|
||||||
// const view = views.getView(props.id)
|
// const view = views.getView(props.id)
|
||||||
|
|
||||||
// const videoPath = ref<string>('');
|
// const videoPath = ref<string>('');
|
||||||
|
|||||||
Reference in new issue
Block a user