539943419/miaoDirectory
1
0 Fork 0
Code Pull Requests Projects Releases 2 Activity

feat: 1.给插件新增一些属性。2.重构图片浏览组件，根据时间分组浏览

Browse Source
This commit is contained in:
539943419 committed 2024-09-02 17:59:49 +08:00
1 parent 78dac7482c
commit 6b8f7aa6b4
10 files changed
+629 -275
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

README.md
+1 -1
View File
@@ -7,7 +7,7 @@
| 完善PDF插件 | ✅ |
| 完善Code插件 | ✅ |
| 实现miaoDirectory的搜索功能 | ✅ |
| plugin增加些选项，icon之类的 | ❌ |
| plugin增加些属性，icon, disable, group之类的 | ❌ |
| 完善miaoDirectory的搜索功能 | ❌ |
| 实现miaoDirectory的排序功能 | ❌ |
| 完善图片浏览插件 | ❌ |
src/App.vue
+48 -16
View File
@@ -59,7 +59,8 @@ const deleteView = (index: number) => {
// 点击标题是隐藏其他标签或显示其他标签，还挺好用的
const handleClickTitle = (index: number) => {
let count = views._views.filter((v) => v.visible).length
let op = !views._views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
let op =
!views._views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
let _index = 0
while (_index < views._views.length) {
if (_index !== index) {
@@ -114,21 +115,37 @@ onMounted(() => {
<n-scrollbar x-scrollable>
<div class="tabs-container">
<transition-group name="tab">
<div class="tab" v-for="(view, index) of views._views" :key="view.id">
<span class="tab-title" :title="view.title" @click="handleClickTitle(index)">
<div
class="tab"
v-for="(view, index) of views._views"
:key="view.id">
<span
class="tab-title"
:title="view.title"
@click="handleClickTitle(index)">
{{
view.title.length > 5 && 0
? `${view.title.substring(0, 5)}...`
: view.title
}}
</span>
<div class="tab-point" :style="{ backgroundColor: view.color }"></div>
<div
class="tab-point"
:style="{ backgroundColor: view.color }"></div>
<div class="tab-control">
<n-icon class="tag-control-icon icon" @click="view.switchShow()">
<EyeOutline v-show="view.visible" class="icon-inner" />
<EyeOffOutline v-show="!view.visible" class="icon-inner" />
<n-icon
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="
<n-icon
class="tag-control-icon icon"
@click="
createView(
view.component,
view.currentDirectories,
@@ -138,7 +155,9 @@ onMounted(() => {
">
<CopyOutline />
</n-icon>
<n-icon class="tag-control-icon icon" @click="deleteView(index)">
<n-icon
class="tag-control-icon icon"
@click="deleteView(index)">
<CloseOutline class="icon-inner" />
</n-icon>
</div>
@@ -148,7 +167,10 @@ onMounted(() => {
</n-scrollbar>
<div class="view-controller-menu">
<div class="view-controller-menu-item">
<n-dropdown trigger="click" :options="openMenuOption" @select="handleMenuSelect">
<n-dropdown
trigger="click"
:options="openMenuOption"
@select="handleMenuSelect">
<n-icon class="icon">
<EllipsisVertical class="icon-inner" />
</n-icon>
@@ -158,10 +180,19 @@ onMounted(() => {
</div>
<div class="view-container">
<transition-group name="page">
<div class="view-container-item" v-for="(view, index) of views._views" v-show="view.visible"
<div
class="view-container-item"
v-for="(view, index) of views._views"
v-show="view.visible"
: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"
<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="views"
@exit="deleteView(index)"></component>
</div>
</transition-group>
@@ -169,8 +200,10 @@ onMounted(() => {
</div>
<!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
<MiaoMask v-model:show="showModal" @click="showModal = false">
<component @click="(e: any) => e.stopPropagation()" :is="modalData?.component" v-bind="modalData?.props">
</component>
<component
@click="(e: any) => e.stopPropagation()"
:is="modalData?.component"
v-bind="modalData?.props"></component>
</MiaoMask>
</template>
@@ -334,7 +367,6 @@ $tag-width: 170px;
.view {
.view-controller {
.tabs-container {
.tab-move,
.tab-enter-active {
transition: all 0.2s ease;
src/class/PluginCenter.ts
+57 -15
View File
@@ -1,13 +1,29 @@
import useVirtualPages from '@/hooks/useVirtualPages'
import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
import { ShallowRef, shallowRef } from 'vue'
type plugin = {
export enum PluginGroup {
default = 'default',
mainMenu = 'mainMenu'
}
type Plugin = {
// 用于显示的名字
name: string
// 判断是否可以使用这个组件
// 代表插件的icon
icon?: ShallowRef<any>
// 是否禁用插件
disable: boolean
// 插件所属的group，用于区分插件使用的场合
group: PluginGroup[]
// 判断在未禁用时是否可以使用这个组件
// 使用组件即调用下面的func
filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
func: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => void
func: (
VDirectories: VirtualDirectory[],
VFiles: VirtualFile[],
...args: any[]
) => void
}
export default class PluginCenter {
@@ -15,30 +31,43 @@ export default class PluginCenter {
this.pluginsMap = {}
}
pluginsMap: {
[key: string]: plugin
[key: string]: Plugin
}
register(key: string, plugin: plugin) {
register(key: string, plugin: Plugin) {
this.pluginsMap[key] = plugin
}
/**
* 便捷地注册一个组件为插件，触发时直接用新页面打开
*/
registerComponent(
key: string,
name: string,
getComponent: () => Promise<any>,
registerComponent(option: {
key: string
name: string
icon?: any
getComponent: () => Promise<any>
group?: PluginGroup[]
filter: (
VDirectories: VirtualDirectory[],
VFiles: VirtualFile[]
) => boolean
): void {
}): void {
const {
key,
name,
getComponent,
icon,
filter,
group = [PluginGroup.default]
} = option
let _component: any
const views = useVirtualPages()
this.register(key, {
name,
filter,
icon: shallowRef(icon),
group,
disable: false,
func: async (
VDirectories: VirtualDirectory[],
VFiles: VirtualFile[]
@@ -52,10 +81,22 @@ export default class PluginCenter {
})
}
getUsablePlugin(VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) {
getUsablePlugin(
VDirectories: VirtualDirectory[],
VFiles: VirtualFile[],
option?: {
group?: PluginGroup[]
}
) {
const { group = [PluginGroup.default] } = option ?? {}
const usableList = []
for (let key of Object.keys(this.pluginsMap)) {
if (this.pluginsMap[key].filter(VDirectories, VFiles)) {
const _plugin = this.pluginsMap[key]
if (
!_plugin.disable &&
_plugin.group.filter((v) => group.includes(v)).length > 0 &&
_plugin.filter(VDirectories, VFiles)
) {
usableList.push(key)
}
}
@@ -67,9 +108,10 @@ export default class PluginCenter {
usePlugin(
key: string,
VDirectories: VirtualDirectory[],
VFiles: VirtualFile[]
VDirectories?: VirtualDirectory[],
VFiles?: VirtualFile[],
...args: any[]
) {
this.pluginsMap[key].func(VDirectories, VFiles)
this.pluginsMap[key].func(VDirectories ?? [], VFiles ?? [], ...args)
}
}
src/components/miaoDirectory/miaoDirectoryItemsContainer.vue
+61 -34
View File
@@ -1,22 +1,42 @@
<template>
<div class="miao-directory-container-items" :style="{
backgroundColor:
index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
<div
class="miao-directory-container-items"
:style="{
backgroundColor: index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
}">
<n-scrollbar ref="scrollbarRef" style="max-height: 100%;">
<miao-lazy-div v-for="(dir) in showData_directory" :key="dir.id" min-height="50px">
<miaoDirectoryItem :item="dir" :color="props.color" :selected="selectedItem.includes(dir)"
:drop-down-options="itemDropDownOptions(dir).value" @delete="handleItemDelete(dir)"
@plugin="p => handleItemUsePlugin(dir)(p)" @click="handleItemClick(dir)"
@drag-start="e => handleItemDragStart(dir)(e)" @rename="handleItemRename(dir)"
<n-scrollbar ref="scrollbarRef" style="max-height: 100%">
<miao-lazy-div
v-for="dir in showData_directory"
:key="dir.id"
min-height="50px">
<miaoDirectoryItem
:item="dir"
:color="props.color"
:selected="selectedItem.includes(dir)"
:drop-down-options="itemDropDownOptions(dir).value"
@delete="handleItemDelete(dir)"
@plugin="(p) => handleItemUsePlugin(dir)(p)"
@click="handleItemClick(dir)"
@drag-start="(e) => handleItemDragStart(dir)(e)"
@rename="handleItemRename(dir)"
@on-selected="handleItemSelect(dir)" />
</miao-lazy-div>
<miao-lazy-div v-for="(file) in showData_files" :key="file.id" min-height="50px">
<miaoDirectoryItem :item="file" :color="props.color" :selected="selectedItem.includes(file)"
:drop-down-options="itemDropDownOptions(file).value" @click="handleItemClick(file)"
@download="handleItemDownload(file)" @delete="handleItemDelete(file)"
@drag-start="e => handleItemDragStart(file)(e)" @rename="handleItemRename(file)"
@plugin="p => handleItemUsePlugin(file)(p)" @on-selected="handleItemSelect(file)" />
<miao-lazy-div
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>
@@ -27,8 +47,9 @@ import { NScrollbar } from 'naive-ui'
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue'
import miaoLazyDiv from '@/components/miaoLazyDiv.vue'
import { computed, ref } from 'vue';
import usePluginCenter from '@/hooks/usePluginCenter';
import { computed, ref } from 'vue'
import usePluginCenter from '@/hooks/usePluginCenter'
import { renderIcon } from '@/hooks/miaoTools'
const pluginCenter = usePluginCenter()
@@ -51,14 +72,15 @@ const emit = defineEmits<{
const scrollbarRef = ref()
const itemDropDownOptions = (item: VirtualDirectory | VirtualFile) => computed(() => {
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 vDirs = items.filter((v) => v.type === 'directory')
const vFiles = items.filter((v) => v.type === 'file')
const options = [
{
label: '重命名',
@@ -67,7 +89,7 @@ const itemDropDownOptions = (item: VirtualDirectory | VirtualFile) => computed((
{
label: '删除',
key: 'delete'
},
}
]
if (item.type === 'file') {
options.push(
@@ -98,13 +120,15 @@ const itemDropDownOptions = (item: VirtualDirectory | VirtualFile) => computed((
]
)
}
options.push(...pluginCenter.getUsablePlugin(vDirs, vFiles).map(v => ({
options.push(
...pluginCenter.getUsablePlugin(vDirs, vFiles).map((v) => ({
label: `插件:${v.name}`,
key: `plugin:${v.key}`
})))
key: `plugin:${v.key}`,
icon: v.icon ? renderIcon(v.icon) : undefined
}))
)
return options
})
})
const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
emit('item-click', item)
@@ -118,9 +142,10 @@ const handleItemDelete = (item: VirtualDirectory | VirtualFile) => {
emit('item-delete', item)
}
const handleItemDragStart = (item: VirtualDirectory | VirtualFile) => (_event: DragEvent) => {
const handleItemDragStart =
(item: VirtualDirectory | VirtualFile) => (_event: DragEvent) => {
emit('item-drag-start', _event, item)
}
}
const handleItemRename = (item: VirtualDirectory | VirtualFile) => {
emit('item-rename', item)
@@ -130,19 +155,21 @@ const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
emit('item-select', item)
}
const handleItemUsePlugin = (item: VirtualDirectory | VirtualFile) => (plugin: string) => {
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')
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) });
defineExpose({
scrollTo: (...args: any) => scrollbarRef.value.scrollTo(...args)
})
</script>
<style scoped lang="scss">
src/components/miaoPopupInput.vue
+34 -15
View File
@@ -2,34 +2,53 @@
<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"
<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>
<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";
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 showMask = ref(false)
const inputValue = ref<string>('')
const _resolve = ref()
type popupConfigType = {
title: string
content?: string
inputValue?: string,
inputValue?: string
inputProps?: InputProps
options: {
label: string
key: unknown
type: 'default' | 'tertiary' | 'primary' | 'success' | 'info' | 'warning' | 'error'
type:
| 'default'
| 'tertiary'
| 'primary'
| 'success'
| 'info'
| 'warning'
| 'error'
}[]
}
@@ -43,7 +62,7 @@ const popup = async (config: popupConfigType) => {
_resolve.value = resolve
})
const text = inputValue.value
showMask.value = false;
showMask.value = false
nextTick(() => {
inputValue.value = ''
_resolve.value = undefined
@@ -51,10 +70,10 @@ const popup = async (config: popupConfigType) => {
return {
text,
key
};
};
}
}
defineExpose({ popup });
defineExpose({ popup })
</script>
<style scoped lang="scss">
src/hooks/init.ts
+80 -41
View File
@@ -1,24 +1,35 @@
import MiaoDirectory from '@/views/miaoDirectory.vue'
import usePluginCenter from './usePluginCenter'
import {
DocumentText,
FileTray,
Image,
LogoChrome,
CodeOutline,
PlayCircle,
} from '@vicons/ionicons5'
export default function init() {
const pluginCenter = usePluginCenter()
pluginCenter.registerComponent(
'miaoDirectory',
'文件夹',
async () => MiaoDirectory,
(vDirs, vFiles) => {
pluginCenter.registerComponent({
key: 'miaoDirectory',
name: '文件夹',
icon: FileTray,
getComponent: async () => MiaoDirectory,
filter: (vDirs, vFiles) => {
if (vFiles.length) {
return false
}
return vDirs.length === 1
}
)
pluginCenter.registerComponent(
'miaoVideoPlayer',
'视频',
async () => (await import('@/views/miaoVideoPlayer.vue')).default,
(vDirs, vFiles) => {
})
pluginCenter.registerComponent({
key: 'miaoVideoPlayer',
name: '视频',
icon: PlayCircle,
getComponent: async () =>
(await import('@/views/miaoVideoPlayer.vue')).default,
filter: (vDirs, vFiles) => {
if (vDirs.length !== 0) {
return false
}
@@ -34,12 +45,15 @@ export default function init() {
}
return false
}
)
pluginCenter.registerComponent(
'miaoIframe',
'框架',
async () => (await import('@/views/miaoIframe.vue')).default,
(vDirs, vFiles) => {
})
pluginCenter.registerComponent({
key: 'miaoIframe',
name: '框架',
icon: LogoChrome,
getComponent: async () =>
(await import('@/views/miaoIframe.vue')).default,
filter: (vDirs, vFiles) => {
if (vDirs.length !== 0) {
return false
}
@@ -48,12 +62,14 @@ export default function init() {
}
return vFiles[0].name.endsWith('html')
}
)
pluginCenter.registerComponent(
'miaoPDF',
'PDF浏览',
async () => (await import('@/views/miaoPDF.vue')).default,
(vDirs, vFiles) => {
})
pluginCenter.registerComponent({
key: 'miaoPDF',
name: 'PDF浏览',
icon: DocumentText,
getComponent: async () => (await import('@/views/miaoPDF.vue')).default,
filter: (vDirs, vFiles) => {
if (vDirs.length !== 0) {
return false
}
@@ -62,12 +78,15 @@ export default function init() {
}
return vFiles[0].name.endsWith('pdf')
}
)
pluginCenter.registerComponent(
'miaoCodeMirror',
'代码编辑',
async () => (await import('@/views/miaoCodeMirror.vue')).default,
(vDirs, vFiles) => {
})
pluginCenter.registerComponent({
key: 'miaoCodeMirror',
name: '代码编辑',
icon: CodeOutline,
getComponent: async () =>
(await import('@/views/miaoCodeMirror.vue')).default,
filter: (vDirs, vFiles) => {
if (vDirs.length !== 0) {
return false
}
@@ -89,7 +108,7 @@ export default function init() {
'yaml',
'txt',
'xml',
'vue',
'vue'
]) {
if (vFiles[0].name.endsWith(end)) {
return true
@@ -97,25 +116,45 @@ export default function init() {
}
return false
}
)
pluginCenter.registerComponent(
"miaoImages",
"图片浏览",
async () => (await import("@/views/miaoImages.vue")).default,
(vDirs, vFiles) => {
})
pluginCenter.registerComponent({
key: 'miaoImages',
name: '图片浏览',
icon: Image,
getComponent: async () =>
(await import('@/views/miaoImages.vue')).default,
filter: (vDirs, vFiles) => {
if (vDirs.length === 0 && vFiles.length === 0) {
return false;
return false
}
if( vDirs.length ) {
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"]) {
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;
return false
}
);
})
}
src/hooks/miaoTools.ts
+38 -26
View File
@@ -1,47 +1,59 @@
import { NIcon } from 'naive-ui'
import { h } from 'vue'
export const filePicker = (() => {
let _resolve: ((files: File[]) => void) | undefined;
return (option?: { accept?: "string"; multiple: boolean }) => {
let _resolve: ((files: File[]) => void) | undefined
return (option?: { accept?: 'string'; multiple: boolean }) => {
if (_resolve) {
_resolve([]);
_resolve = undefined;
_resolve([])
_resolve = undefined
}
return new Promise<File[]>(resolve => {
const inpEle = document.createElement("input");
inpEle.id = `__file_${Math.ceil(Math.random() * 100000000)}`;
inpEle.type = "file";
inpEle.style.display = "none";
_resolve = resolve;
return new Promise<File[]>((resolve) => {
const inpEle = document.createElement('input')
inpEle.id = `__file_${Math.ceil(Math.random() * 100000000)}`
inpEle.type = 'file'
inpEle.style.display = 'none'
_resolve = resolve
// 文件类型限制
// inpEle.accept="image/*"
option?.accept && (inpEle.accept = option?.accept);
option?.accept && (inpEle.accept = option?.accept)
// 多选限制
option?.multiple && (inpEle.multiple = option?.multiple);
option?.multiple && (inpEle.multiple = option?.multiple)
// inpEle.addEventListener("change", event => fn.call(inpEle, event, inpEle.files), { once: true });
inpEle.addEventListener(
"change",
'change',
() => {
if (!inpEle.files) {
return;
return
}
const files: File[] = [];
let i = 0;
const files: File[] = []
let i = 0
while (i < inpEle.files?.length) {
const _file = inpEle?.files?.item(i);
const _file = inpEle?.files?.item(i)
if (_file !== null) {
files.push(_file);
files.push(_file)
}
i += 1;
i += 1
}
resolve(files);
resolve(files)
_resolve = undefined
},
{ once: true }
);
inpEle.click();
});
};
})();
)
inpEle.click()
})
}
})()
export const renderIcon = (icon: any) => {
return () => {
return h(NIcon, null, {
default: () => h(icon)
})
}
}
export default {
filePicker,
};
renderIcon
}
src/views/miaoDirectory.vue
+109 -71
View File
@@ -1,20 +1,42 @@
<template>
<miao-drop-handler @on-virtual-directory="handleDropVDirectory" @on-files="handleDropFiles"
<miao-drop-handler
@on-virtual-directory="handleDropVDirectory"
@on-files="handleDropFiles"
@on-virtual-files="handleDropVirtualFiles">
<div class="miao-directory-item-container" ref="rootDomRef">
<!-- 顶部面包屑导航和工具栏 -->
<miao-directory-top :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-top
: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-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"
<miao-directory-bottom
:index="index"
@add-new-item="handleAddNewItem"
v-if="false"
@pick-files-upload="handlePickFilesUpload" />
<miao-mask v-model:show="showModel"></miao-mask>
@@ -24,14 +46,14 @@
</template>
<script setup lang="ts">
import { computed, h, nextTick, onMounted, reactive, ref } from 'vue'
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 } from '@/hooks/miaoTools'
import { filePicker, renderIcon } from '@/hooks/miaoTools'
import { uniq } from 'lodash'
// 导入子组件
@@ -41,10 +63,13 @@ import MiaoDirectoryBottom from '@/components/miaoDirectory/miaoDirectoryBottom.
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,
CloseOutline,
SearchOutline,
FilterOutline,
CheckmarkDoneOutline,
DocumentText,
ExtensionPuzzleOutline,
FileTray,
AddOutline,
CloudUploadOutline
@@ -93,7 +118,7 @@ class SelectedItem {
get value() {
const _filterList = [
...(currentDirectory.value?.directories ?? []),
...(currentDirectory.value?.files ?? []),
...(currentDirectory.value?.files ?? [])
]
return uniq(this._selectedItem).filter((v) => {
if (currentDirectory.value === undefined) {
@@ -107,9 +132,12 @@ class SelectedItem {
// 已选择的item，用于多选功能
const selectedItem = reactive(new SelectedItem())
const currentDirectories = defineModel<VirtualDirectory[]>('currentDirectories', {
required: true,
})
const currentDirectories = defineModel<VirtualDirectory[]>(
'currentDirectories',
{
required: true
}
)
// 目前展示的Dir
const currentDirectory = computed(() => {
@@ -130,7 +158,7 @@ const showData_directory = computed<VirtualDirectory[]>(() => {
? [...currentDirectory.value?.directories]
: []
if (searchText.value !== '') {
data = data.filter(vd => vd.name.includes(searchText.value))
data = data.filter((vd) => vd.name.includes(searchText.value))
}
return data
})
@@ -138,9 +166,11 @@ const showData_files = computed<VirtualFile[]>(() => {
if (showFiles.value === false) {
return []
}
let data = currentDirectory.value?.files ? [...currentDirectory.value?.files] : []
let data = currentDirectory.value?.files
? [...currentDirectory.value?.files]
: []
if (searchText.value !== '') {
data = data.filter(vd => vd.name.includes(searchText.value))
data = data.filter((vd) => vd.name.includes(searchText.value))
}
return data
})
@@ -162,16 +192,20 @@ const topBarMenuOption = computed(() => {
key: 'search',
icon: renderIcon(SearchOutline)
},
searchText.value !== '' ? {
searchText.value !== ''
? {
label: '重置搜索',
key: 'searchReset',
icon: renderIcon(SearchOutline)
} : undefined,
selectedItem.value.length !== 0 ? {
}
: undefined,
selectedItem.value.length !== 0
? {
label: '重置多选',
key: 'selectedItemReset',
icon: renderIcon(CheckmarkDoneOutline)
} : undefined,
}
: undefined,
{
label: '筛选',
key: 'filter',
@@ -185,7 +219,7 @@ const topBarMenuOption = computed(() => {
label: `${showFiles.value ? '隐藏' : '显示'}文件`,
key: 'showFiles',
icon: renderIcon(DocumentText)
},
}
],
icon: renderIcon(FilterOutline)
},
@@ -193,10 +227,13 @@ const topBarMenuOption = computed(() => {
label: '插件',
key: 'plugin',
children: [
...pluginCenter.getUsablePlugin([currentDirectories.value[0]], []).map(v => ({
...pluginCenter
.getUsablePlugin([currentDirectories.value[0]], [])
.map((v) => ({
label: `${v.name}`,
key: `plugin:${v.key}`
})),
key: `plugin:${v.key}`,
icon: v.icon ? renderIcon(v.icon) : undefined
}))
],
icon: renderIcon(ExtensionPuzzleOutline)
},
@@ -204,22 +241,17 @@ const topBarMenuOption = computed(() => {
label: '关闭',
key: 'close',
icon: renderIcon(CloseOutline)
},
].filter(v => v !== undefined)
})
const renderIcon = (icon: any) => {
return () => {
return h(NIcon, null, {
default: () => h(icon)
})
}
}
].filter((v) => v !== undefined)
})
// 设置显示的dir
const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
// 若没有缓存数据则同步刷新，有缓存数据则异步刷新
if (virtualDirectory.files === undefined || virtualDirectory.directories === undefined) {
if (
virtualDirectory.files === undefined ||
virtualDirectory.directories === undefined
) {
await virtualDirectory.update()
} else {
virtualDirectory.update()
@@ -230,7 +262,7 @@ const setCurrentDirectory = async (virtualDirectory: VirtualDirectory) => {
nextTick(() => {
miaoDirectoryItemRef.value.scrollTo({
top: 0,
behavior: "instant"
behavior: 'instant'
})
})
}
@@ -246,7 +278,7 @@ const openUrl = (
config?: {
download?: string
target?: string
},
}
) => {
let { target, download } = config ?? {}
const a = document.createElement('a')
@@ -303,15 +335,15 @@ const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
const handleItemDownload = (item: VirtualFile) => {
openUrl(`${baseUrl}${api.get}${item.path}`, {
download: item.name,
download: item.name
})
}
const handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
for (let item of uniq([...selectedItem.value, _item])) {
; (async () => {
;(async () => {
const { response } = miaoFetchApi.delete(item, {
retry: 5,
retry: 5
})
// todo: 将删除事件统一用一个事件管理中心管理
const id = (await response).eventId
@@ -329,20 +361,20 @@ const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
title: '重命名',
inputValue: item.name,
inputProps: {
placeholder: item.name,
placeholder: item.name
},
options: [
{
label: '取消',
key: false,
type: 'error',
type: 'error'
},
{
label: '确认',
key: true,
type: 'success',
},
],
type: 'success'
}
]
})
if (popupRes?.key === false) {
return
@@ -352,7 +384,7 @@ const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
return
}
const { response } = miaoFetchApi.rename(item, newName, {
retry: 5,
retry: 5
})
const id = (await response).eventId
const { response: res } = miaoFetchApi.query(id)
@@ -364,11 +396,17 @@ const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
const handleItemDragStart = async (
_event: DragEvent,
item: VirtualDirectory | VirtualFile,
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'))
dataBus.set(
'dragData_vFiles',
items.filter((v) => v.type === 'file')
)
dataBus.set(
'dragData_vDirectory',
items.filter((v) => v.type === 'directory')
)
// selectedItem.clear()
}
@@ -377,7 +415,7 @@ const handleDropFiles = async (files: File[]) => {
uploadQueue.push(files, currentDirectory.value, {
onFinish() {
reload()
},
}
})
}
@@ -392,7 +430,7 @@ const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
}
}
for (let dir of vDirs) {
; (async () => {
;(async () => {
const _from = dir.parent
const { response } = miaoFetchApi.cut(dir, currentDirectory.value)
const id = (await response).eventId
@@ -411,7 +449,7 @@ const handleDropVirtualFiles = (files: VirtualFile[]) => {
return
}
for (let file of files) {
; (async () => {
;(async () => {
const _from = file.parent
const { response } = miaoFetchApi.cut(file, currentDirectory.value)
const id = (await response).eventId
@@ -427,13 +465,13 @@ const handleDropVirtualFiles = (files: VirtualFile[]) => {
const handlePickFilesUpload = async () => {
const files = await filePicker({
multiple: true,
multiple: true
})
const _currDir = currentDirectory.value
uploadQueue.push(files, _currDir, {
onFinish() {
_currDir.update()
},
}
})
}
@@ -441,25 +479,25 @@ const handleAddNewItem = async () => {
const popupRes = await popupInput.value?.popup({
title: '新建文件/文件夹',
inputProps: {
placeholder: '',
placeholder: ''
},
options: [
{
label: '取消',
key: 'cancel',
type: 'error',
type: 'error'
},
{
label: '文件',
key: 'file',
type: 'success',
type: 'success'
},
{
label: '文件夹',
key: 'dir',
type: 'success',
},
],
type: 'success'
}
]
})
// todo: 上传前如重名文件夹等等的错误提前检查
if (popupRes?.key === 'cancel' || popupRes?.text === '') {
@@ -499,25 +537,25 @@ const handleSearch = async () => {
title: '搜索当前文件夹',
inputValue: searchText.value,
inputProps: {
placeholder: '',
placeholder: ''
},
options: [
{
label: '取消',
key: 'cancel',
type: 'default',
type: 'default'
},
{
label: '重置',
key: 'reset',
type: 'default',
type: 'default'
},
{
label: '搜索',
key: 'search',
type: 'success',
},
],
type: 'success'
}
]
})
if (!popupRes) {
return
src/views/miaoImages.vue
+144 -32
View File
@@ -1,33 +1,61 @@
<template>
<miao-drop-handler @on-virtual-directory="handleDrop" @on-virtual-files="handleDrop">
<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
class="miaoImage-container"
v-for="imageGroup in imageGroupList">
<div class="miaoImage-container-day">
<span class="miaoImage-container-day-text">
{{ imageGroup.day }}
</span>
</div>
<div
class="miaoImage-container-row"
v-for="vFile in imageGroup.items"
:key="vFile.id">
<img
:src="vFile.url"
class="miaoImage-container-row-image"
loading="lazy"
:class="
activeImage === vFile
? 'miaoImage-container-row-image-active'
: ''
"
@click="activeImage = vFile" />
</div>
</div>
</n-scrollbar>
<miao-mask :show="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
:show="activeImage !== undefined"
@click="activeImage = undefined"
class="miaoImage-mask">
<ChevronBack
class="miaoImage-mask-btn miaoImage-mask-btn-back"
@click="handleActiveImageBack" />
<img
:src="activeImage?.url"
class="miaoImage-mask-active"
@click="(e) => e.stopPropagation()"
draggable="false" />
<ChevronForward
class="miaoImage-mask-btn miaoImage-mask-btn-forward"
@click="handleActiveImageForward" />
</miao-mask>
</div>
</miao-drop-handler>
</template>
<script setup lang="ts">
import miaoMask from '@/components/miaoMask.vue';
import miaoDropHandler from '@/components/miaoDropHandler.vue';
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 { uniq } from 'lodash'
import { computed, nextTick, onMounted, ref } from 'vue'
import { NScrollbar } from 'naive-ui'
import { ChevronBack, ChevronForward } from '@vicons/ionicons5'
const imageSuffixList = [
@@ -49,38 +77,95 @@ const imageSuffixList = [
'avif'
]
const currentDirectories = defineModel<VirtualDirectory[]>('currentDirectories', {
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 imageFileList = ref<VirtualFile[]>([])
const activeImageIndex = ref(-1)
const imageGroupList = computed(() => {
return groupByDay(imageFileList.value)
})
const activeImage = ref<VirtualFile>()
const groupByDay = (array: VirtualFile[]) => {
const result = []
let currentDay = null
let currentGroup: VirtualFile[] = []
for (const item of array) {
const date = new Date(item.stats.mtimeMs)
const day = `${date.getFullYear()}年 ${String(
date.getMonth() + 1
).padStart(2, '0')}月 ${String(date.getDate()).padStart(2, '0')}日`
if (day !== currentDay) {
if (currentGroup.length > 0) {
result.push({
day: currentDay,
items: currentGroup
})
}
currentDay = day
currentGroup = [item]
} else {
currentGroup.push(item)
}
}
if (currentGroup.length > 0) {
result.push({
day: currentDay,
items: currentGroup
})
}
return result
}
const scrollToActiveImage = () => {
const dom = rootRef.value?.querySelector('.miaoImage-container-row-image-active')
const dom = rootRef.value?.querySelector(
'.miaoImage-container-row-image-active'
)
NScrollbarRef.value.scrollTo({
top: dom.offsetTop - 30,
behavior: "smooth"
behavior: 'smooth'
})
}
const handleActiveImageIndexBack = (e: any) => {
const handleActiveImageBack = (e: any) => {
e.stopPropagation()
activeImageIndex.value = (activeImageIndex.value - 1 + imageSrcList.value.length) % imageSrcList.value.length
if (!activeImage.value) {
return
}
const index = imageFileList.value.indexOf(activeImage.value)
activeImage.value =
imageFileList.value[
(index - 1 + imageFileList.value.length) %
imageFileList.value.length
]
nextTick(scrollToActiveImage)
}
const handleActiveImageIndexForward = (e: any) => {
const handleActiveImageForward = (e: any) => {
e.stopPropagation()
activeImageIndex.value = (activeImageIndex.value + 1 + imageSrcList.value.length) % imageSrcList.value.length
if (!activeImage.value) {
return
}
const index = imageFileList.value.indexOf(activeImage.value)
activeImage.value =
imageFileList.value[
(index + 1 + imageFileList.value.length) %
imageFileList.value.length
]
nextTick(scrollToActiveImage)
}
@@ -92,27 +177,43 @@ const handleDrop = (vItems: (VirtualFile | VirtualDirectory)[]) => {
// @ts-ignore
currentFiles.value = [...currentFiles, ...vItems]
}
vItems.forEach(v => {
vItems.forEach((v) => {
updateImageSrcList(v)
})
}
const updateImageSrcList = async (source: VirtualFile | VirtualDirectory) => {
let newSrcList: string[]
let newFileList: VirtualFile[]
if (source.type === 'directory') {
await source.update()
newSrcList = source.files?.filter(v => imageSuffixList.includes(v.name.split('.').pop() ?? '')).map(v => v.url) ?? []
newFileList = [
...(source.files?.filter((v) =>
imageSuffixList.includes(v.name.split('.').pop() ?? '')
) ?? [])
]
newSrcList =
source.files
?.filter((v) =>
imageSuffixList.includes(v.name.split('.').pop() ?? '')
)
.map((v) => v.url) ?? []
} else {
if (!imageSuffixList.includes(source.name.split('.').pop() ?? '')) {
return
}
newFileList = [source]
newSrcList = [source.url]
}
imageSrcList.value = uniq([...imageSrcList.value, ...newSrcList])
imageFileList.value = uniq([...imageFileList.value, ...newFileList]).sort(
(a, b) => a.stats.mtimeMs - b.stats.mtimeMs
)
}
onMounted(() => {
[...currentDirectories.value, ...currentFiles.value].forEach(updateImageSrcList)
;[...currentFiles.value, ...currentDirectories.value].forEach(
updateImageSrcList
)
})
</script>
@@ -129,6 +230,17 @@ onMounted(() => {
width: 100%;
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
margin-top: 20px;
.miaoImage-container-day {
width: 100%;
.miaoImage-container-day-text {
margin-left: 40px;
font-size: 20px;
user-select: none;
letter-spacing: 1px;
}
}
.miaoImage-container-row {
display: flex;
src/views/miaoPDF.vue
+57 -24
View File
@@ -1,44 +1,74 @@
<template>
<miao-message-provider ref="miaoMessageRef">
<div class="miao-container">
<div class="miao-container-topBar">
<div class="miao-container-topBar-btn" @click="() => handleZoom(10)" title="快速缩小">--</div>
<div class="miao-container-topBar-btn" @click="() => handleZoom()" title="缩小">-</div>
<div class="miao-container-topBar-btn" @click="() => handleResetMargin()" title="还原">还原缩放</div>
<div class="miao-container-topBar-btn" @click="() => handleShrink()" title="放大">+</div>
<div class="miao-container-topBar-btn" @click="() => handleShrink(10)" title="快速放大">++</div>
<div
class="miao-container-topBar-btn"
@click="() => handleZoom(10)"
title="快速缩小">
--
</div>
<div
class="miao-container-topBar-btn"
@click="() => handleZoom()"
title="缩小">
-
</div>
<div
class="miao-container-topBar-btn"
@click="() => handleResetMargin()"
title="还原">
还原缩放
</div>
<div
class="miao-container-topBar-btn"
@click="() => handleShrink()"
title="放大">
+
</div>
<div
class="miao-container-topBar-btn"
@click="() => handleShrink(10)"
title="快速放大">
++
</div>
</div>
<NScrollbar>
<div class="miao-container-pdf" :style="{alignItems: pdfMargin < 0 ? 'baseline' : 'center'}">
<div ref="pdfEl" class="miao-container-pdf-content" :style="{ width: `calc( 100% - ${pdfMargin}px)`}">
</div>
<div
class="miao-container-pdf"
:style="{
alignItems: pdfMargin < 0 ? 'baseline' : 'center'
}">
<div
ref="pdfEl"
class="miao-container-pdf-content"
:style="{
width: `calc( 100% - ${pdfMargin}px)`
}"></div>
</div>
</NScrollbar>
<div class="miao-container-loading" v-if="isLoading">{{ loadingPercent === -1 ? '加载插件中' :
`渲染进度：${canvasList.length}/${pdfPageCount}` }}</div>
</div>
</miao-message-provider>
</template>
<script setup lang="ts">
import { computed, onMounted, ref, shallowReactive } from 'vue'
import miaoMessageProvider from '@/components/miaoMessageProvider.vue'
import { onMounted, ref, shallowReactive } from 'vue'
import PdfjsWorker from 'pdfjs-dist/build/pdf.worker.mjs?worker'
import { VirtualFile } from '@/class/VirtualDirectory'
import { NScrollbar } from 'naive-ui';
import { NScrollbar } from 'naive-ui'
const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
required: true
})
const pdfEl = ref<HTMLDivElement>()
const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
// 通过margin来实现缩小功能
const pdfMargin = ref<number>(0)
const pdfPageCount = ref<number>(-1)
const isLoading = computed(() => {
return canvasList.length !== pdfPageCount.value
})
const canvasList = shallowReactive<HTMLCanvasElement[]>([])
const handleZoom = (index?: number) => {
@@ -58,14 +88,11 @@ const handleResetMargin = () => {
pdfMargin.value = 0
}
const loadingPercent = computed(() => {
if (pdfPageCount.value === -1) {
return -1
}
return canvasList.length / pdfPageCount.value
})
onMounted(async () => {
const setLoadingMessage = miaoMessageRef.value?.message('加载PDF插件中', {
type: 'info',
timeout: -1
})
const pdfSrc = currentFiles.value[0].url
// @ts-ignore
const PDFJS = await import('pdfjs-dist/build/pdf.mjs')
@@ -79,6 +106,7 @@ onMounted(async () => {
pdfPageCount.value = pdf.numPages
// 循环渲染每一页
for (let i = 1; i <= pdf.numPages; i++) {
setLoadingMessage && setLoadingMessage(`渲染进度：${i}/${pdf.numPages}`)
const page = await pdf.getPage(i)
let pixelRatio = 3
let viewport = page.getViewport({ scale: 1 })
@@ -96,6 +124,11 @@ onMounted(async () => {
}
await page.render(renderContext).promise // 一页一页的渲染
}
setLoadingMessage &&
setLoadingMessage(`渲染PDF完成`, {
type: 'success',
timeout: 3456
})
})
</script>