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
+1111 -757
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

README.md
+2 -2
View File
@@ -1,13 +1,13 @@
## TODO list: ## TODO list:
| 计划 | 状态 | | 计划 | 状态 |
|---|---| |---|---|
| 拆分miaoDirectory | ✅ | | 拆分miaoDirectory | ✅ |
| 完善视频插件 | ✅ | | 完善视频插件 | ✅ |
| 完善PDF插件 | ✅ | | 完善PDF插件 | ✅ |
| 完善Code插件 | ✅ | | 完善Code插件 | ✅ |
| 实现miaoDirectory的搜索功能 | ✅ | | 实现miaoDirectory的搜索功能 | ✅ |
| plugin增加些选项，icon之类的 | ❌ | | plugin增加些属性，icon, disable, group之类的 | ❌ |
| 完善miaoDirectory的搜索功能 | ❌ | | 完善miaoDirectory的搜索功能 | ❌ |
| 实现miaoDirectory的排序功能 | ❌ | | 实现miaoDirectory的排序功能 | ❌ |
| 完善图片浏览插件 | ❌ | | 完善图片浏览插件 | ❌ |
src/App.vue
+54 -22
View File
@@ -59,7 +59,8 @@ const deleteView = (index: number) => {
// 点击标题是隐藏其他标签或显示其他标签，还挺好用的 // 点击标题是隐藏其他标签或显示其他标签，还挺好用的
const handleClickTitle = (index: number) => { const handleClickTitle = (index: number) => {
let count = views._views.filter((v) => v.visible).length let count = views._views.filter((v) => v.visible).length
let op = !views._views[index].visible || count > 1 ? 'hideOthers' : 'showOthers' let op =
!views._views[index].visible || count > 1 ? 'hideOthers' : 'showOthers'
let _index = 0 let _index = 0
while (_index < views._views.length) { while (_index < views._views.length) {
if (_index !== index) { if (_index !== index) {
@@ -114,31 +115,49 @@ 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 class="tab" v-for="(view, index) of views._views" :key="view.id"> <div
<span class="tab-title" :title="view.title" @click="handleClickTitle(index)"> 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.length > 5 && 0
? `${view.title.substring(0, 5)}...` ? `${view.title.substring(0, 5)}...`
: view.title : view.title
}} }}
</span> </span>
<div class="tab-point" :style="{ backgroundColor: view.color }"></div> <div
class="tab-point"
:style="{ backgroundColor: view.color }"></div>
<div class="tab-control"> <div class="tab-control">
<n-icon class="tag-control-icon icon" @click="view.switchShow()"> <n-icon
<EyeOutline v-show="view.visible" class="icon-inner" /> class="tag-control-icon icon"
<EyeOffOutline v-show="!view.visible" class="icon-inner" /> @click="view.switchShow()">
<EyeOutline
v-show="view.visible"
class="icon-inner" />
<EyeOffOutline
v-show="!view.visible"
class="icon-inner" />
</n-icon> </n-icon>
<n-icon class="tag-control-icon icon" @click=" <n-icon
createView( class="tag-control-icon icon"
view.component, @click="
view.currentDirectories, createView(
view.currentFiles, view.component,
index + 1 view.currentDirectories,
) view.currentFiles,
index + 1
)
"> ">
<CopyOutline /> <CopyOutline />
</n-icon> </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" /> <CloseOutline class="icon-inner" />
</n-icon> </n-icon>
</div> </div>
@@ -148,7 +167,10 @@ 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 trigger="click" :options="openMenuOption" @select="handleMenuSelect"> <n-dropdown
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>
@@ -158,10 +180,19 @@ onMounted(() => {
</div> </div>
<div class="view-container"> <div class="view-container">
<transition-group name="page"> <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"> :key="view.id">
<component :is="view.component" v-model:current-directories="view.currentDirectories" <component
v-model:current-files="view.currentFiles" :id="view.id" :color="view.color" :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> @exit="deleteView(index)"></component>
</div> </div>
</transition-group> </transition-group>
@@ -169,8 +200,10 @@ onMounted(() => {
</div> </div>
<!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 --> <!-- 模态框展示，用来显示分享二维码，设置菜单之类的东西 -->
<MiaoMask v-model:show="showModal" @click="showModal = false"> <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> </MiaoMask>
</template> </template>
@@ -334,7 +367,6 @@ $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;
src/class/PluginCenter.ts
+57 -15
View File
@@ -1,13 +1,29 @@
import useVirtualPages from '@/hooks/useVirtualPages' import useVirtualPages from '@/hooks/useVirtualPages'
import VirtualDirectory, { VirtualFile } from './VirtualDirectory' import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
import { ShallowRef, shallowRef } from 'vue'
type plugin = { export enum PluginGroup {
default = 'default',
mainMenu = 'mainMenu'
}
type Plugin = {
// 用于显示的名字 // 用于显示的名字
name: string name: string
// 判断是否可以使用这个组件 // 代表插件的icon
icon?: ShallowRef<any>
// 是否禁用插件
disable: boolean
// 插件所属的group，用于区分插件使用的场合
group: PluginGroup[]
// 判断在未禁用时是否可以使用这个组件
// 使用组件即调用下面的func // 使用组件即调用下面的func
filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
func: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => void func: (
VDirectories: VirtualDirectory[],
VFiles: VirtualFile[],
...args: any[]
) => void
} }
export default class PluginCenter { export default class PluginCenter {
@@ -15,30 +31,43 @@ export default class PluginCenter {
this.pluginsMap = {} this.pluginsMap = {}
} }
pluginsMap: { pluginsMap: {
[key: string]: plugin [key: string]: Plugin
} }
register(key: string, plugin: plugin) { register(key: string, plugin: Plugin) {
this.pluginsMap[key] = plugin this.pluginsMap[key] = plugin
} }
/** /**
* 便捷地注册一个组件为插件，触发时直接用新页面打开 * 便捷地注册一个组件为插件，触发时直接用新页面打开
*/ */
registerComponent( registerComponent(option: {
key: string, key: string
name: string, name: string
getComponent: () => Promise<any>, icon?: any
getComponent: () => Promise<any>
group?: PluginGroup[]
filter: ( filter: (
VDirectories: VirtualDirectory[], VDirectories: VirtualDirectory[],
VFiles: VirtualFile[] VFiles: VirtualFile[]
) => boolean ) => boolean
): void { }): void {
const {
key,
name,
getComponent,
icon,
filter,
group = [PluginGroup.default]
} = option
let _component: any let _component: any
const views = useVirtualPages() const views = useVirtualPages()
this.register(key, { this.register(key, {
name, name,
filter, filter,
icon: shallowRef(icon),
group,
disable: false,
func: async ( func: async (
VDirectories: VirtualDirectory[], VDirectories: VirtualDirectory[],
VFiles: VirtualFile[] 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 = [] const usableList = []
for (let key of Object.keys(this.pluginsMap)) { 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) usableList.push(key)
} }
} }
@@ -67,9 +108,10 @@ export default class PluginCenter {
usePlugin( usePlugin(
key: string, key: string,
VDirectories: VirtualDirectory[], VDirectories?: VirtualDirectory[],
VFiles: VirtualFile[] VFiles?: VirtualFile[],
...args: any[]
) { ) {
this.pluginsMap[key].func(VDirectories, VFiles) this.pluginsMap[key].func(VDirectories ?? [], VFiles ?? [], ...args)
} }
} }
src/components/miaoDirectory/miaoDirectoryItemsContainer.vue
+112 -85
View File
@@ -1,22 +1,42 @@
<template> <template>
<div class="miao-directory-container-items" :style="{ <div
backgroundColor: class="miao-directory-container-items"
index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)' :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"> <n-scrollbar ref="scrollbarRef" style="max-height: 100%">
<miaoDirectoryItem :item="dir" :color="props.color" :selected="selectedItem.includes(dir)" <miao-lazy-div
:drop-down-options="itemDropDownOptions(dir).value" @delete="handleItemDelete(dir)" v-for="dir in showData_directory"
@plugin="p => handleItemUsePlugin(dir)(p)" @click="handleItemClick(dir)" :key="dir.id"
@drag-start="e => handleItemDragStart(dir)(e)" @rename="handleItemRename(dir)" 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)" /> @on-selected="handleItemSelect(dir)" />
</miao-lazy-div> </miao-lazy-div>
<miao-lazy-div v-for="(file) in showData_files" :key="file.id" min-height="50px"> <miao-lazy-div
<miaoDirectoryItem :item="file" :color="props.color" :selected="selectedItem.includes(file)" v-for="file in showData_files"
:drop-down-options="itemDropDownOptions(file).value" @click="handleItemClick(file)" :key="file.id"
@download="handleItemDownload(file)" @delete="handleItemDelete(file)" min-height="50px">
@drag-start="e => handleItemDragStart(file)(e)" @rename="handleItemRename(file)" <miaoDirectoryItem
@plugin="p => handleItemUsePlugin(file)(p)" @on-selected="handleItemSelect(file)" /> :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> </miao-lazy-div>
</n-scrollbar> </n-scrollbar>
</div> </div>
@@ -27,8 +47,9 @@ import { NScrollbar } from 'naive-ui'
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory' import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue' import miaoDirectoryItem from '@/components/miaoDirectory/miaoDirectoryItem.vue'
import miaoLazyDiv from '@/components/miaoLazyDiv.vue' import miaoLazyDiv from '@/components/miaoLazyDiv.vue'
import { computed, ref } from 'vue'; import { computed, ref } from 'vue'
import usePluginCenter from '@/hooks/usePluginCenter'; import usePluginCenter from '@/hooks/usePluginCenter'
import { renderIcon } from '@/hooks/miaoTools'
const pluginCenter = usePluginCenter() const pluginCenter = usePluginCenter()
@@ -51,60 +72,63 @@ const emit = defineEmits<{
const scrollbarRef = ref() const scrollbarRef = ref()
const itemDropDownOptions = (item: VirtualDirectory | VirtualFile) => computed(() => { const itemDropDownOptions = (item: VirtualDirectory | VirtualFile) =>
const items = [...props.selectedItem] computed(() => {
const selected = props.selectedItem.includes(item) const items = [...props.selectedItem]
if (!selected) { const selected = props.selectedItem.includes(item)
items.push(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 options = [ const vFiles = items.filter((v) => v.type === 'file')
{ const options = [
label: '重命名', {
key: 'rename' label: '重命名',
}, key: 'rename'
{ },
label: '删除', {
key: 'delete' label: '删除',
}, key: 'delete'
] }
if (item.type === 'file') { ]
if (item.type === 'file') {
options.push(
...[
{
label: '下载',
key: 'download'
}
]
)
}
if (selected === false) {
options.push(
...[
{
label: '多选:选择',
key: 'select'
}
]
)
} else {
options.push(
...[
{
label: '多选:取消',
key: 'select'
}
]
)
}
options.push( options.push(
...[ ...pluginCenter.getUsablePlugin(vDirs, vFiles).map((v) => ({
{ label: `插件:${v.name}`,
label: '下载', key: `plugin:${v.key}`,
key: 'download' icon: v.icon ? renderIcon(v.icon) : undefined
} }))
]
) )
} return options
if (selected === false) { })
options.push(
...[
{
label: '多选:选择',
key: 'select'
}
]
)
} else {
options.push(
...[
{
label: '多选:取消',
key: 'select'
}
]
)
}
options.push(...pluginCenter.getUsablePlugin(vDirs, vFiles).map(v => ({
label: `插件:${v.name}`,
key: `plugin:${v.key}`
})))
return options
})
const handleItemClick = (item: VirtualDirectory | VirtualFile) => { const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
emit('item-click', item) emit('item-click', item)
@@ -118,9 +142,10 @@ const handleItemDelete = (item: VirtualDirectory | VirtualFile) => {
emit('item-delete', item) emit('item-delete', item)
} }
const handleItemDragStart = (item: VirtualDirectory | VirtualFile) => (_event: DragEvent) => { const handleItemDragStart =
emit('item-drag-start', _event, item) (item: VirtualDirectory | VirtualFile) => (_event: DragEvent) => {
} emit('item-drag-start', _event, item)
}
const handleItemRename = (item: VirtualDirectory | VirtualFile) => { const handleItemRename = (item: VirtualDirectory | VirtualFile) => {
emit('item-rename', item) emit('item-rename', item)
@@ -130,19 +155,21 @@ const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
emit('item-select', item) emit('item-select', item)
} }
const handleItemUsePlugin = (item: VirtualDirectory | VirtualFile) => (plugin: string) => { const handleItemUsePlugin =
const items = [...props.selectedItem] (item: VirtualDirectory | VirtualFile) => (plugin: string) => {
const selected = props.selectedItem.includes(item) const items = [...props.selectedItem]
if (!selected) { const selected = props.selectedItem.includes(item)
items.push(item) if (!selected) {
items.push(item)
}
const vDirs = items.filter((v) => v.type === 'directory')
const vFiles = items.filter((v) => v.type === 'file')
pluginCenter.usePlugin(plugin, vDirs, vFiles)
} }
const vDirs = items.filter(v => v.type === 'directory')
const vFiles = items.filter(v => v.type === 'file')
pluginCenter.usePlugin(plugin, vDirs, vFiles)
}
defineExpose({
defineExpose({ scrollTo: (...args: any) => scrollbarRef.value.scrollTo(...args) }); scrollTo: (...args: any) => scrollbarRef.value.scrollTo(...args)
})
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@@ -151,4 +178,4 @@ defineExpose({ scrollTo: (...args: any) => scrollbarRef.value.scrollTo(...args)
flex: 1; flex: 1;
min-height: 0; min-height: 0;
} }
</style> </style>
src/components/miaoPopupInput.vue
+81 -62
View File
@@ -1,83 +1,102 @@
<template> <template>
<miao-mask v-model:show="showMask"> <miao-mask v-model:show="showMask">
<n-card class="popup-card" :title="popupConfig?.title" size="medium"> <n-card class="popup-card" :title="popupConfig?.title" size="medium">
{{ popupConfig?.content }} {{ popupConfig?.content }}
<n-input class="popup-input" v-model:value="inputValue" type="text" v-bind="popupConfig?.inputProps" <n-input
v-if="popupConfig?.inputProps" /> class="popup-input"
<div class="popup-button-container"> v-model:value="inputValue"
<n-button class="popup-button-container-button" v-for="option in popupConfig?.options" :key="option.label" type="text"
:type="option.type" @click="_resolve && _resolve(option.key)">{{ option.label }}</n-button> v-bind="popupConfig?.inputProps"
</div> passively-activated
</n-card> autofocus
</miao-mask> v-if="popupConfig?.inputProps" />
<div class="popup-button-container">
<n-button
class="popup-button-container-button"
v-for="option in popupConfig?.options"
:key="option.label"
:type="option.type"
@click="_resolve && _resolve(option.key)">
{{ option.label }}
</n-button>
</div>
</n-card>
</miao-mask>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, nextTick } from "vue"; import { ref, nextTick } from 'vue'
import { NCard, NInput, NButton } from "naive-ui"; import { NCard, NInput, NButton } from 'naive-ui'
import miaoMask from "./miaoMask.vue"; import miaoMask from './miaoMask.vue'
import { InputProps } from "naive-ui"; import { InputProps } from 'naive-ui'
const showMask = ref(false); const showMask = ref(false)
const inputValue = ref<string>(""); const inputValue = ref<string>('')
const _resolve = ref() const _resolve = ref()
type popupConfigType = { type popupConfigType = {
title: string title: string
content?: string content?: string
inputValue?: string, inputValue?: string
inputProps?: InputProps inputProps?: InputProps
options: { options: {
label: string label: string
key: unknown key: unknown
type: 'default' | 'tertiary' | 'primary' | 'success' | 'info' | 'warning' | 'error' type:
}[] | 'default'
| 'tertiary'
| 'primary'
| 'success'
| 'info'
| 'warning'
| 'error'
}[]
} }
const popupConfig = ref<popupConfigType>() const popupConfig = ref<popupConfigType>()
const popup = async (config: popupConfigType) => { const popup = async (config: popupConfigType) => {
popupConfig.value = config popupConfig.value = config
inputValue.value = config.inputValue ?? '' inputValue.value = config.inputValue ?? ''
showMask.value = true showMask.value = true
const key = await new Promise((resolve: (key: unknown) => unknown) => { const key = await new Promise((resolve: (key: unknown) => unknown) => {
_resolve.value = resolve _resolve.value = resolve
}) })
const text = inputValue.value const text = inputValue.value
showMask.value = false; showMask.value = false
nextTick(() => { nextTick(() => {
inputValue.value = '' inputValue.value = ''
_resolve.value = undefined _resolve.value = undefined
}) })
return { return {
text, text,
key key
}; }
}; }
defineExpose({ popup }); defineExpose({ popup })
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.popup-card { .popup-card {
width: 80%; width: 80%;
.popup-input { .popup-input {
margin-bottom: 10px; margin-bottom: 10px;
} }
.popup-button-container { .popup-button-container {
height: 100%; height: 100%;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
flex-wrap: wrap; flex-wrap: wrap;
.popup-button-container-button { .popup-button-container-button {
margin-top: 3px; margin-top: 3px;
&:not(:last-child) { &:not(:last-child) {
margin-right: 5px; margin-right: 5px;
} }
}
} }
}
} }
</style> </style>
src/hooks/init.ts
+88 -49
View File
@@ -1,24 +1,35 @@
import MiaoDirectory from '@/views/miaoDirectory.vue' import MiaoDirectory from '@/views/miaoDirectory.vue'
import usePluginCenter from './usePluginCenter' import usePluginCenter from './usePluginCenter'
import {
DocumentText,
FileTray,
Image,
LogoChrome,
CodeOutline,
PlayCircle,
} from '@vicons/ionicons5'
export default function init() { export default function init() {
const pluginCenter = usePluginCenter() const pluginCenter = usePluginCenter()
pluginCenter.registerComponent( pluginCenter.registerComponent({
'miaoDirectory', key: 'miaoDirectory',
'文件夹', name: '文件夹',
async () => MiaoDirectory, icon: FileTray,
(vDirs, vFiles) => { getComponent: async () => MiaoDirectory,
filter: (vDirs, vFiles) => {
if (vFiles.length) { if (vFiles.length) {
return false return false
} }
return vDirs.length === 1 return vDirs.length === 1
} }
) })
pluginCenter.registerComponent( pluginCenter.registerComponent({
'miaoVideoPlayer', key: 'miaoVideoPlayer',
'视频', name: '视频',
async () => (await import('@/views/miaoVideoPlayer.vue')).default, icon: PlayCircle,
(vDirs, vFiles) => { getComponent: async () =>
(await import('@/views/miaoVideoPlayer.vue')).default,
filter: (vDirs, vFiles) => {
if (vDirs.length !== 0) { if (vDirs.length !== 0) {
return false return false
} }
@@ -34,12 +45,15 @@ export default function init() {
} }
return false return false
} }
) })
pluginCenter.registerComponent(
'miaoIframe', pluginCenter.registerComponent({
'框架', key: 'miaoIframe',
async () => (await import('@/views/miaoIframe.vue')).default, name: '框架',
(vDirs, vFiles) => { icon: LogoChrome,
getComponent: async () =>
(await import('@/views/miaoIframe.vue')).default,
filter: (vDirs, vFiles) => {
if (vDirs.length !== 0) { if (vDirs.length !== 0) {
return false return false
} }
@@ -48,12 +62,14 @@ export default function init() {
} }
return vFiles[0].name.endsWith('html') return vFiles[0].name.endsWith('html')
} }
) })
pluginCenter.registerComponent(
'miaoPDF', pluginCenter.registerComponent({
'PDF浏览', key: 'miaoPDF',
async () => (await import('@/views/miaoPDF.vue')).default, name: 'PDF浏览',
(vDirs, vFiles) => { icon: DocumentText,
getComponent: async () => (await import('@/views/miaoPDF.vue')).default,
filter: (vDirs, vFiles) => {
if (vDirs.length !== 0) { if (vDirs.length !== 0) {
return false return false
} }
@@ -62,12 +78,15 @@ export default function init() {
} }
return vFiles[0].name.endsWith('pdf') return vFiles[0].name.endsWith('pdf')
} }
) })
pluginCenter.registerComponent(
'miaoCodeMirror', pluginCenter.registerComponent({
'代码编辑', key: 'miaoCodeMirror',
async () => (await import('@/views/miaoCodeMirror.vue')).default, name: '代码编辑',
(vDirs, vFiles) => { icon: CodeOutline,
getComponent: async () =>
(await import('@/views/miaoCodeMirror.vue')).default,
filter: (vDirs, vFiles) => {
if (vDirs.length !== 0) { if (vDirs.length !== 0) {
return false return false
} }
@@ -89,7 +108,7 @@ export default function init() {
'yaml', 'yaml',
'txt', 'txt',
'xml', 'xml',
'vue', 'vue'
]) { ]) {
if (vFiles[0].name.endsWith(end)) { if (vFiles[0].name.endsWith(end)) {
return true return true
@@ -97,25 +116,45 @@ export default function init() {
} }
return false return false
} }
) })
pluginCenter.registerComponent(
"miaoImages", pluginCenter.registerComponent({
"图片浏览", key: 'miaoImages',
async () => (await import("@/views/miaoImages.vue")).default, name: '图片浏览',
(vDirs, vFiles) => { icon: Image,
if (vDirs.length === 0 && vFiles.length === 0) { getComponent: async () =>
return false; (await import('@/views/miaoImages.vue')).default,
} filter: (vDirs, vFiles) => {
if( vDirs.length ) { if (vDirs.length === 0 && vFiles.length === 0) {
return false
}
if (vDirs.length) {
return true return true
} }
for (let vf of vFiles) 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 [
if (vf.name.endsWith(end)) { 'xbm',
return true 'tif',
} 'pjp',
} 'svgz',
return false; 'jpg',
} 'jpeg',
); 'ico',
'tiff',
'gif',
'svg',
'jfif',
'webp',
'png',
'.bmp',
'pjpeg',
'avif'
]) {
if (vf.name.endsWith(end)) {
return true
}
}
return false
}
})
} }
src/hooks/miaoTools.ts
+55 -43
View File
@@ -1,47 +1,59 @@
import { NIcon } from 'naive-ui'
import { h } from 'vue'
export const filePicker = (() => { export const filePicker = (() => {
let _resolve: ((files: File[]) => void) | undefined; let _resolve: ((files: File[]) => void) | undefined
return (option?: { accept?: "string"; multiple: boolean }) => { return (option?: { accept?: 'string'; multiple: boolean }) => {
if (_resolve) { if (_resolve) {
_resolve([]); _resolve([])
_resolve = undefined; _resolve = undefined
} }
return new Promise<File[]>(resolve => { return new Promise<File[]>((resolve) => {
const inpEle = document.createElement("input"); const inpEle = document.createElement('input')
inpEle.id = `__file_${Math.ceil(Math.random() * 100000000)}`; inpEle.id = `__file_${Math.ceil(Math.random() * 100000000)}`
inpEle.type = "file"; inpEle.type = 'file'
inpEle.style.display = "none"; inpEle.style.display = 'none'
_resolve = resolve; _resolve = resolve
// 文件类型限制 // 文件类型限制
// inpEle.accept="image/*" // inpEle.accept="image/*"
option?.accept && (inpEle.accept = option?.accept); option?.accept && (inpEle.accept = option?.accept)
// 多选限制 // 多选限制
option?.multiple && (inpEle.multiple = option?.multiple); option?.multiple && (inpEle.multiple = option?.multiple)
// inpEle.addEventListener("change", event => fn.call(inpEle, event, inpEle.files), { once: true }); // inpEle.addEventListener("change", event => fn.call(inpEle, event, inpEle.files), { once: true });
inpEle.addEventListener( inpEle.addEventListener(
"change", 'change',
() => { () => {
if (!inpEle.files) { if (!inpEle.files) {
return; return
} }
const files: File[] = []; const files: File[] = []
let i = 0; let i = 0
while (i < inpEle.files?.length) { while (i < inpEle.files?.length) {
const _file = inpEle?.files?.item(i); const _file = inpEle?.files?.item(i)
if (_file !== null) { if (_file !== null) {
files.push(_file); files.push(_file)
} }
i += 1; i += 1
} }
resolve(files); resolve(files)
_resolve = undefined _resolve = undefined
}, },
{ once: true } { once: true }
); )
inpEle.click(); inpEle.click()
}); })
}; }
})(); })()
export const renderIcon = (icon: any) => {
return () => {
return h(NIcon, null, {
default: () => h(icon)
})
}
}
export default { export default {
filePicker, filePicker,
}; renderIcon
}
src/views/miaoDirectory.vue
+455 -417
View File
@@ -1,37 +1,59 @@
<template> <template>
<miao-drop-handler @on-virtual-directory="handleDropVDirectory" @on-files="handleDropFiles" <miao-drop-handler
@on-virtual-files="handleDropVirtualFiles"> @on-virtual-directory="handleDropVDirectory"
<div class="miao-directory-item-container" ref="rootDomRef"> @on-files="handleDropFiles"
<!-- 顶部面包屑导航和工具栏 --> @on-virtual-files="handleDropVirtualFiles">
<miao-directory-top :color="props.color" :current-directory="currentDirectory" @back="handleBack" <div class="miao-directory-item-container" ref="rootDomRef">
: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" <miao-directory-items
:showData_files="showData_files" :selected-item="selectedItem.value" :index="index" ref="miaoDirectoryItemRef"
@item-click="handleItemClick" @item-download="handleItemDownload" @item-delete="handleItemDelete" :color="props.color"
@item-drag-start="handleItemDragStart" @item-rename="handleItemRename" @item-select="handleItemSelect" /> :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
@pick-files-upload="handlePickFilesUpload" /> :index="index"
@add-new-item="handleAddNewItem"
v-if="false"
@pick-files-upload="handlePickFilesUpload" />
<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>
</miao-drop-handler> </miao-drop-handler>
</template> </template>
<script setup lang="ts"> <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 VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import Config from '@/config' import Config from '@/config'
import useMiaoFetchApi from '@/hooks/useMiaoFetchApi' import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
import useDataBus from '@/hooks/useDataBus' import useDataBus from '@/hooks/useDataBus'
import useUploadQueue from '@/hooks/useUploadQueue' import useUploadQueue from '@/hooks/useUploadQueue'
import useVirtualPages from '@/hooks/useVirtualPages' import useVirtualPages from '@/hooks/useVirtualPages'
import { filePicker } from '@/hooks/miaoTools' import { filePicker, renderIcon } from '@/hooks/miaoTools'
import { uniq } from 'lodash' import { uniq } from 'lodash'
// 导入子组件 // 导入子组件
@@ -41,13 +63,16 @@ import MiaoDirectoryBottom from '@/components/miaoDirectory/miaoDirectoryBottom.
import MiaoMask from '@/components/miaoMask.vue' import MiaoMask from '@/components/miaoMask.vue'
import MiaoPopupInput from '@/components/miaoPopupInput.vue' import MiaoPopupInput from '@/components/miaoPopupInput.vue'
import MiaoDropHandler from '@/components/miaoDropHandler.vue' import MiaoDropHandler from '@/components/miaoDropHandler.vue'
import { NIcon } from 'naive-ui'
import { import {
CloseOutline, SearchOutline, FilterOutline, CheckmarkDoneOutline, CloseOutline,
DocumentText, ExtensionPuzzleOutline, SearchOutline,
FileTray, FilterOutline,
AddOutline, CheckmarkDoneOutline,
CloudUploadOutline DocumentText,
ExtensionPuzzleOutline,
FileTray,
AddOutline,
CloudUploadOutline
} from '@vicons/ionicons5' } from '@vicons/ionicons5'
import usePluginCenter from '@/hooks/usePluginCenter' import usePluginCenter from '@/hooks/usePluginCenter'
@@ -59,12 +84,12 @@ const miaoFetchApi = useMiaoFetchApi()
const pluginCenter = usePluginCenter() const pluginCenter = usePluginCenter()
const props = defineProps<{ const props = defineProps<{
color: string color: string
id: number id: number
}>() }>()
const emit = defineEmits<{ const emit = defineEmits<{
exit: [] exit: []
}>() }>()
const popupInput = ref<InstanceType<typeof MiaoPopupInput>>() const popupInput = ref<InstanceType<typeof MiaoPopupInput>>()
@@ -76,464 +101,477 @@ const showFiles = ref<boolean>(true)
const miaoDirectoryItemRef = ref() const miaoDirectoryItemRef = ref()
class SelectedItem { class SelectedItem {
constructor() { constructor() {
this._selectedItem = [] this._selectedItem = []
} }
_selectedItem: (VirtualDirectory | VirtualFile)[] _selectedItem: (VirtualDirectory | VirtualFile)[]
push(item: VirtualDirectory | VirtualFile) { push(item: VirtualDirectory | VirtualFile) {
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() {
const _filterList = [ const _filterList = [
...(currentDirectory.value?.directories ?? []), ...(currentDirectory.value?.directories ?? []),
...(currentDirectory.value?.files ?? []), ...(currentDirectory.value?.files ?? [])
] ]
return uniq(this._selectedItem).filter((v) => { return uniq(this._selectedItem).filter((v) => {
if (currentDirectory.value === undefined) { if (currentDirectory.value === undefined) {
return false return false
} }
// @ts-ignore // @ts-ignore
return _filterList.includes(v) return _filterList.includes(v)
}) })
} }
} }
// 已选择的item，用于多选功能 // 已选择的item，用于多选功能
const selectedItem = reactive(new SelectedItem()) const selectedItem = reactive(new SelectedItem())
const currentDirectories = defineModel<VirtualDirectory[]>('currentDirectories', { const currentDirectories = defineModel<VirtualDirectory[]>(
required: true, 'currentDirectories',
}) {
required: true
}
)
// 目前展示的Dir // 目前展示的Dir
const currentDirectory = computed(() => { const currentDirectory = computed(() => {
return currentDirectories.value[0] return currentDirectories.value[0]
}) })
// 当前组件在views中的序号 // 当前组件在views中的序号
const index = computed(() => { const index = computed(() => {
return views.getIndex(props.id) return views.getIndex(props.id)
}) })
// 用于展示的数据，后续会增加排序等操作 // 用于展示的数据，后续会增加排序等操作
const showData_directory = computed<VirtualDirectory[]>(() => { const showData_directory = computed<VirtualDirectory[]>(() => {
if (showDirs.value === false) { if (showDirs.value === false) {
return [] return []
} }
let data = currentDirectory.value?.directories let data = currentDirectory.value?.directories
? [...currentDirectory.value?.directories] ? [...currentDirectory.value?.directories]
: [] : []
if (searchText.value !== '') { if (searchText.value !== '') {
data = data.filter(vd => vd.name.includes(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[]>(() => {
if (showFiles.value === false) { if (showFiles.value === false) {
return [] return []
} }
let data = currentDirectory.value?.files ? [...currentDirectory.value?.files] : [] let data = currentDirectory.value?.files
if (searchText.value !== '') { ? [...currentDirectory.value?.files]
data = data.filter(vd => vd.name.includes(searchText.value)) : []
} if (searchText.value !== '') {
return data data = data.filter((vd) => vd.name.includes(searchText.value))
}
return data
}) })
const topBarMenuOption = computed(() => { const topBarMenuOption = computed(() => {
return [ 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 ? '隐藏' : '显示'}文件夹`, label: '新建',
key: 'showDirs', key: 'create',
icon: renderIcon(FileTray) icon: renderIcon(AddOutline)
}, },
{ {
label: `${showFiles.value ? '隐藏' : '显示'}文件`, label: '上传',
key: 'showFiles', key: 'upload',
icon: renderIcon(DocumentText) icon: renderIcon(CloudUploadOutline)
}, },
], {
icon: renderIcon(FilterOutline) label: '搜索',
}, key: 'search',
{ icon: renderIcon(SearchOutline)
label: '插件', },
key: 'plugin', searchText.value !== ''
children: [ ? {
...pluginCenter.getUsablePlugin([currentDirectories.value[0]], []).map(v => ({ label: '重置搜索',
label: `${v.name}`, key: 'searchReset',
key: `plugin:${v.key}` icon: renderIcon(SearchOutline)
})), }
], : undefined,
icon: renderIcon(ExtensionPuzzleOutline) selectedItem.value.length !== 0
}, ? {
{ label: '重置多选',
label: '关闭', key: 'selectedItemReset',
key: 'close', icon: renderIcon(CheckmarkDoneOutline)
icon: renderIcon(CloseOutline) }
}, : undefined,
].filter(v => v !== undefined) {
label: '筛选',
key: 'filter',
children: [
{
label: `${showDirs.value ? '隐藏' : '显示'}文件夹`,
key: 'showDirs',
icon: renderIcon(FileTray)
},
{
label: `${showFiles.value ? '隐藏' : '显示'}文件`,
key: 'showFiles',
icon: renderIcon(DocumentText)
}
],
icon: renderIcon(FilterOutline)
},
{
label: '插件',
key: 'plugin',
children: [
...pluginCenter
.getUsablePlugin([currentDirectories.value[0]], [])
.map((v) => ({
label: `${v.name}`,
key: `plugin:${v.key}`,
icon: v.icon ? renderIcon(v.icon) : undefined
}))
],
icon: renderIcon(ExtensionPuzzleOutline)
},
{
label: '关闭',
key: 'close',
icon: renderIcon(CloseOutline)
}
].filter((v) => v !== undefined)
}) })
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 (virtualDirectory.files === undefined || virtualDirectory.directories === undefined) { if (
await virtualDirectory.update() virtualDirectory.files === undefined ||
} else { virtualDirectory.directories === undefined
virtualDirectory.update() ) {
} await virtualDirectory.update()
if (currentDirectories.value[0] !== virtualDirectory) { } else {
selectedItem.clear() virtualDirectory.update()
handleSearchReset() }
nextTick(() => { if (currentDirectories.value[0] !== virtualDirectory) {
miaoDirectoryItemRef.value.scrollTo({ selectedItem.clear()
top: 0, handleSearchReset()
behavior: "instant" nextTick(() => {
}) miaoDirectoryItemRef.value.scrollTo({
}) top: 0,
} behavior: 'instant'
currentDirectories.value[0] = virtualDirectory })
})
}
currentDirectories.value[0] = virtualDirectory
} }
const reload = () => { const reload = () => {
setCurrentDirectory(currentDirectory.value) setCurrentDirectory(currentDirectory.value)
} }
const openUrl = ( const openUrl = (
href: string, href: string,
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')
a.setAttribute('href', href) a.setAttribute('href', href)
a.setAttribute('target', target ?? '_blank') a.setAttribute('target', target ?? '_blank')
download && a.setAttribute('download', download) download && a.setAttribute('download', download)
a.click() a.click()
} }
const handleTopBarMenuSelect = (key: string) => { const handleTopBarMenuSelect = (key: string) => {
if (key === 'close') { if (key === 'close') {
emit('exit') emit('exit')
} else if (key === 'search') { } else if (key === 'search') {
handleSearch() handleSearch()
} else if (key === 'upload') { } else if (key === 'upload') {
handlePickFilesUpload() handlePickFilesUpload()
} else if (key === 'create') { } else if (key === 'create') {
handleAddNewItem() handleAddNewItem()
} else if (key === 'searchReset') { } else if (key === 'searchReset') {
handleSearchReset() handleSearchReset()
} else if (key === 'selectedItemReset') { } else if (key === 'selectedItemReset') {
selectedItem.clear() selectedItem.clear()
} else if (key === 'showDirs') { } else if (key === 'showDirs') {
showDirs.value = !showDirs.value showDirs.value = !showDirs.value
} else if (key === 'showFiles') { } else if (key === 'showFiles') {
showFiles.value = !showFiles.value showFiles.value = !showFiles.value
} else if (key.startsWith('plugin:')) { } else if (key.startsWith('plugin:')) {
const pluginName = key.split(':')[1] const pluginName = key.split(':')[1]
pluginCenter.usePlugin(pluginName, [currentDirectory.value], []) 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)
} }
} }
const handleReload = () => { const handleReload = () => {
reload() reload()
} }
const handleItemClick = (item: VirtualDirectory | VirtualFile) => { const handleItemClick = (item: VirtualDirectory | VirtualFile) => {
if (selectedItem.value.length > 0) { if (selectedItem.value.length > 0) {
handleItemSelect(item) handleItemSelect(item)
} else { } else {
if (item.type === 'file') { if (item.type === 'file') {
openUrl(`${baseUrl}${api.get}${item.path}`) openUrl(`${baseUrl}${api.get}${item.path}`)
} else if (item.type === 'directory') { } else if (item.type === 'directory') {
setCurrentDirectory(item) setCurrentDirectory(item)
}
} }
}
} }
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
})
}
const handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
for (let item of uniq([...selectedItem.value, _item])) {
; (async () => {
const { response } = miaoFetchApi.delete(item, {
retry: 5,
})
// todo: 将删除事件统一用一个事件管理中心管理
const id = (await response).eventId
const { response: res } = miaoFetchApi.query(id)
const eventResult = await res
if (eventResult.status === 'success') {
reload()
}
})()
}
}
const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
const popupRes = await popupInput.value?.popup({
title: '重命名',
inputValue: item.name,
inputProps: {
placeholder: item.name,
},
options: [
{
label: '取消',
key: false,
type: 'error',
},
{
label: '确认',
key: true,
type: 'success',
},
],
})
if (popupRes?.key === false) {
return
}
const newName = popupRes?.text
if (!newName) {
return
}
const { response } = miaoFetchApi.rename(item, newName, {
retry: 5,
})
const id = (await response).eventId
const { response: res } = miaoFetchApi.query(id)
const eventResult = await res
if (eventResult.status === 'success') {
reload()
}
}
const handleItemDragStart = async (
_event: DragEvent,
item: VirtualDirectory | VirtualFile,
) => {
const items = uniq([item, ...selectedItem.value])
dataBus.set('dragData_vFiles', items.filter((v) => v.type === 'file'))
dataBus.set('dragData_vDirectory', items.filter((v) => v.type === 'directory'))
// selectedItem.clear()
}
const handleDropFiles = async (files: File[]) => {
currentDirectory.value &&
uploadQueue.push(files, currentDirectory.value, {
onFinish() {
reload()
},
}) })
} }
const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => { const handleItemDelete = async (_item: VirtualDirectory | VirtualFile) => {
// 不能移到自己或自己的子文件夹内 for (let item of uniq([...selectedItem.value, _item])) {
for (let vDir of vDirs) { ;(async () => {
if (currentDirectory.value.getParents.includes(vDir)) { const { response } = miaoFetchApi.delete(item, {
return retry: 5
})
// todo: 将删除事件统一用一个事件管理中心管理
const id = (await response).eventId
const { response: res } = miaoFetchApi.query(id)
const eventResult = await res
if (eventResult.status === 'success') {
reload()
}
})()
} }
if (vDir.parent === currentDirectory.value) { }
return
const handleItemRename = async (item: VirtualDirectory | VirtualFile) => {
const popupRes = await popupInput.value?.popup({
title: '重命名',
inputValue: item.name,
inputProps: {
placeholder: item.name
},
options: [
{
label: '取消',
key: false,
type: 'error'
},
{
label: '确认',
key: true,
type: 'success'
}
]
})
if (popupRes?.key === false) {
return
} }
} const newName = popupRes?.text
for (let dir of vDirs) { if (!newName) {
; (async () => { return
const _from = dir.parent }
const { response } = miaoFetchApi.cut(dir, currentDirectory.value) const { response } = miaoFetchApi.rename(item, newName, {
const id = (await response).eventId retry: 5
const { response: res } = miaoFetchApi.query(id) })
const eventResult = await res const id = (await response).eventId
if (eventResult.status === 'success') { const { response: res } = miaoFetchApi.query(id)
const eventResult = await res
if (eventResult.status === 'success') {
reload() reload()
_from && _from.update() }
} }
})()
} const handleItemDragStart = async (
_event: DragEvent,
item: VirtualDirectory | VirtualFile
) => {
const items = uniq([item, ...selectedItem.value])
dataBus.set(
'dragData_vFiles',
items.filter((v) => v.type === 'file')
)
dataBus.set(
'dragData_vDirectory',
items.filter((v) => v.type === 'directory')
)
// selectedItem.clear()
}
const handleDropFiles = async (files: File[]) => {
currentDirectory.value &&
uploadQueue.push(files, currentDirectory.value, {
onFinish() {
reload()
}
})
}
const handleDropVDirectory = async (vDirs: VirtualDirectory[]) => {
// 不能移到自己或自己的子文件夹内
for (let vDir of vDirs) {
if (currentDirectory.value.getParents.includes(vDir)) {
return
}
if (vDir.parent === currentDirectory.value) {
return
}
}
for (let dir of vDirs) {
;(async () => {
const _from = dir.parent
const { response } = miaoFetchApi.cut(dir, currentDirectory.value)
const id = (await response).eventId
const { response: res } = miaoFetchApi.query(id)
const eventResult = await res
if (eventResult.status === 'success') {
reload()
_from && _from.update()
}
})()
}
} }
const handleDropVirtualFiles = (files: VirtualFile[]) => { const handleDropVirtualFiles = (files: VirtualFile[]) => {
if (files[0].parent === currentDirectory.value) { if (files[0].parent === currentDirectory.value) {
return return
} }
for (let file of files) { for (let file of files) {
; (async () => { ;(async () => {
const _from = file.parent const _from = file.parent
const { response } = miaoFetchApi.cut(file, currentDirectory.value) const { response } = miaoFetchApi.cut(file, currentDirectory.value)
const id = (await response).eventId const id = (await response).eventId
const { response: res } = miaoFetchApi.query(id) const { response: res } = miaoFetchApi.query(id)
const eventResult = await res const eventResult = await res
if (eventResult.status === 'success') { if (eventResult.status === 'success') {
reload() reload()
_from.update() _from.update()
} }
})() })()
} }
} }
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: '新建文件/文件夹',
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 name = popupRes?.text
if (!name) {
return
}
// @ts-ignore
const opType: 'file' | 'dir' = popupRes?.key
if (opType === 'dir') {
const res = await miaoFetchApi.mkdir(currentDirectory.value, name)
if (res.message === 'success') {
_currDir.update()
} }
} else { const _currDir = currentDirectory.value
const { response } = miaoFetchApi.mkFile(currentDirectory.value, name) const name = popupRes?.text
const res = await response if (!name) {
if (res.message === 'success') { return
_currDir.update() }
// @ts-ignore
const opType: 'file' | 'dir' = popupRes?.key
if (opType === 'dir') {
const res = await miaoFetchApi.mkdir(currentDirectory.value, name)
if (res.message === 'success') {
_currDir.update()
}
} else {
const { response } = miaoFetchApi.mkFile(currentDirectory.value, name)
const res = await response
if (res.message === 'success') {
_currDir.update()
}
} }
}
} }
const handleItemSelect = (item: VirtualDirectory | VirtualFile) => { const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
if (!selectedItem.value.includes(item)) { if (!selectedItem.value.includes(item)) {
selectedItem.push(item) selectedItem.push(item)
} else { } else {
selectedItem.remove(item) selectedItem.remove(item)
} }
} }
const handleSearch = async () => { const handleSearch = async () => {
const popupRes = await popupInput.value?.popup({ const popupRes = await popupInput.value?.popup({
title: '搜索当前文件夹', title: '搜索当前文件夹',
inputValue: searchText.value, inputValue: searchText.value,
inputProps: { inputProps: {
placeholder: '', placeholder: ''
}, },
options: [ options: [
{ {
label: '取消', label: '取消',
key: 'cancel', key: 'cancel',
type: 'default', type: 'default'
}, },
{ {
label: '重置', label: '重置',
key: 'reset', key: 'reset',
type: 'default', type: 'default'
}, },
{ {
label: '搜索', label: '搜索',
key: 'search', key: 'search',
type: 'success', type: 'success'
}, }
], ]
}) })
if (!popupRes) { if (!popupRes) {
return return
} }
if (popupRes.key === 'search') { if (popupRes.key === 'search') {
searchText.value = popupRes.text searchText.value = popupRes.text
} else if (popupRes.key === 'reset') { } else if (popupRes.key === 'reset') {
handleSearchReset() handleSearchReset()
} }
} }
const handleSearchReset = () => { const handleSearchReset = () => {
searchText.value = '' searchText.value = ''
} }
onMounted(async () => { onMounted(async () => {
await setCurrentDirectory(currentDirectory.value) await setCurrentDirectory(currentDirectory.value)
}) })
</script> </script>
@@ -542,12 +580,12 @@ $top-height: 30px;
$bottom-bar-height: 60px; $bottom-bar-height: 60px;
.miao-directory-item-container { .miao-directory-item-container {
position: relative; position: relative;
height: 100%; height: 100%;
width: inherit; width: inherit;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
min-width: 170px; min-width: 170px;
} }
</style> </style>
src/views/miaoImages.vue
+145 -33
View File
@@ -1,33 +1,61 @@
<template> <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"> <div class="miaoImage" ref="rootRef">
<n-scrollbar ref="NScrollbarRef"> <n-scrollbar ref="NScrollbarRef">
<div class="miaoImage-container"> <div
<div class="miaoImage-container-row" v-for="(src, index) in imageSrcList" :key="index"> class="miaoImage-container"
<img :src="src" class="miaoImage-container-row-image" loading="lazy" v-for="imageGroup in imageGroupList">
:class="activeImageIndex === index ? 'miaoImage-container-row-image-active' : ''" <div class="miaoImage-container-day">
@click="activeImageIndex = index" /> <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>
</div> </div>
</n-scrollbar> </n-scrollbar>
<miao-mask :show="activeImageIndex !== -1" @click="activeImageIndex = -1" class="miaoImage-mask"> <miao-mask
<ChevronBack class="miaoImage-mask-btn miaoImage-mask-btn-back" @click="handleActiveImageIndexBack" /> :show="activeImage !== undefined"
<img :src="imageSrcList[activeImageIndex]" class="miaoImage-mask-active" @click="activeImage = undefined"
@click="e => e.stopPropagation()" draggable="false"> class="miaoImage-mask">
<ChevronForward class="miaoImage-mask-btn miaoImage-mask-btn-forward" <ChevronBack
@click="handleActiveImageIndexForward" /> 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> </miao-mask>
</div> </div>
</miao-drop-handler> </miao-drop-handler>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import miaoMask from '@/components/miaoMask.vue'; import miaoMask from '@/components/miaoMask.vue'
import miaoDropHandler from '@/components/miaoDropHandler.vue'; import miaoDropHandler from '@/components/miaoDropHandler.vue'
import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory' import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import { uniq } from 'lodash'; import { uniq } from 'lodash'
import { nextTick, onMounted, ref } from 'vue' import { computed, nextTick, onMounted, ref } from 'vue'
import { NScrollbar } from 'naive-ui'; import { NScrollbar } from 'naive-ui'
import { ChevronBack, ChevronForward } from '@vicons/ionicons5' import { ChevronBack, ChevronForward } from '@vicons/ionicons5'
const imageSuffixList = [ const imageSuffixList = [
@@ -49,38 +77,95 @@ const imageSuffixList = [
'avif' 'avif'
] ]
const currentDirectories = defineModel<VirtualDirectory[]>('currentDirectories', { const currentDirectories = defineModel<VirtualDirectory[]>(
required: true 'currentDirectories',
}) {
required: true
}
)
const currentFiles = defineModel<VirtualFile[]>('currentFiles', { const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
required: true required: true
}) })
const NScrollbarRef = ref() const NScrollbarRef = ref()
const rootRef = ref<any>() 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 scrollToActiveImage = () => {
const dom = rootRef.value?.querySelector('.miaoImage-container-row-image-active') const dom = rootRef.value?.querySelector(
'.miaoImage-container-row-image-active'
)
NScrollbarRef.value.scrollTo({ NScrollbarRef.value.scrollTo({
top: dom.offsetTop - 30, top: dom.offsetTop - 30,
behavior: "smooth" behavior: 'smooth'
}) })
} }
const handleActiveImageIndexBack = (e: any) => { const handleActiveImageBack = (e: any) => {
e.stopPropagation() 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) nextTick(scrollToActiveImage)
} }
const handleActiveImageIndexForward = (e: any) => { const handleActiveImageForward = (e: any) => {
e.stopPropagation() 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) nextTick(scrollToActiveImage)
} }
@@ -92,27 +177,43 @@ const handleDrop = (vItems: (VirtualFile | VirtualDirectory)[]) => {
// @ts-ignore // @ts-ignore
currentFiles.value = [...currentFiles, ...vItems] currentFiles.value = [...currentFiles, ...vItems]
} }
vItems.forEach(v => { vItems.forEach((v) => {
updateImageSrcList(v) updateImageSrcList(v)
}) })
} }
const updateImageSrcList = async (source: VirtualFile | VirtualDirectory) => { const updateImageSrcList = async (source: VirtualFile | VirtualDirectory) => {
let newSrcList: string[] let newSrcList: string[]
let newFileList: VirtualFile[]
if (source.type === 'directory') { if (source.type === 'directory') {
await source.update() 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 { } else {
if (!imageSuffixList.includes(source.name.split('.').pop() ?? '')) { if (!imageSuffixList.includes(source.name.split('.').pop() ?? '')) {
return return
} }
newFileList = [source]
newSrcList = [source.url] 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(() => { onMounted(() => {
[...currentDirectories.value, ...currentFiles.value].forEach(updateImageSrcList) ;[...currentFiles.value, ...currentDirectories.value].forEach(
updateImageSrcList
)
}) })
</script> </script>
@@ -129,6 +230,17 @@ onMounted(() => {
width: 100%; width: 100%;
display: flex; display: flex;
flex-wrap: wrap; 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 { .miaoImage-container-row {
display: flex; display: flex;
src/views/miaoPDF.vue
+62 -29
View File
@@ -1,44 +1,74 @@
<template> <template>
<div class="miao-container"> <miao-message-provider ref="miaoMessageRef">
<div class="miao-container-topBar"> <div class="miao-container">
<div class="miao-container-topBar-btn" @click="() => handleZoom(10)" title="快速缩小">--</div> <div class="miao-container-topBar">
<div class="miao-container-topBar-btn" @click="() => handleZoom()" title="缩小">-</div> <div
<div class="miao-container-topBar-btn" @click="() => handleResetMargin()" title="还原">还原缩放</div> class="miao-container-topBar-btn"
<div class="miao-container-topBar-btn" @click="() => handleShrink()" title="放大">+</div> @click="() => handleZoom(10)"
<div class="miao-container-topBar-btn" @click="() => handleShrink(10)" title="快速放大">++</div> title="快速缩小">
</div> --
<NScrollbar> </div>
<div class="miao-container-pdf" :style="{alignItems: pdfMargin < 0 ? 'baseline' : 'center'}"> <div
<div ref="pdfEl" class="miao-container-pdf-content" :style="{ width: `calc( 100% - ${pdfMargin}px)`}"> class="miao-container-topBar-btn"
@click="() => handleZoom()"
title="缩小">
-
</div>
<div
class="miao-container-topBar-btn"
@click="() => handleResetMargin()"
title="还原">
还原缩放
</div>
<div
class="miao-container-topBar-btn"
@click="() => handleShrink()"
title="放大">
+
</div>
<div
class="miao-container-topBar-btn"
@click="() => handleShrink(10)"
title="快速放大">
++
</div> </div>
</div> </div>
</NScrollbar> <NScrollbar>
<div class="miao-container-loading" v-if="isLoading">{{ loadingPercent === -1 ? '加载插件中' : <div
`渲染进度：${canvasList.length}/${pdfPageCount}` }}</div> class="miao-container-pdf"
</div> :style="{
alignItems: pdfMargin < 0 ? 'baseline' : 'center'
}">
<div
ref="pdfEl"
class="miao-container-pdf-content"
:style="{
width: `calc( 100% - ${pdfMargin}px)`
}"></div>
</div>
</NScrollbar>
</div>
</miao-message-provider>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, onMounted, ref, shallowReactive } from 'vue' import miaoMessageProvider from '@/components/miaoMessageProvider.vue'
import { onMounted, ref, shallowReactive } from 'vue'
import PdfjsWorker from 'pdfjs-dist/build/pdf.worker.mjs?worker' import PdfjsWorker from 'pdfjs-dist/build/pdf.worker.mjs?worker'
import { VirtualFile } from '@/class/VirtualDirectory' import { VirtualFile } from '@/class/VirtualDirectory'
import { NScrollbar } from 'naive-ui'; import { NScrollbar } from 'naive-ui'
const currentFiles = defineModel<VirtualFile[]>('currentFiles', { const currentFiles = defineModel<VirtualFile[]>('currentFiles', {
required: true required: true
}) })
const pdfEl = ref<HTMLDivElement>() const pdfEl = ref<HTMLDivElement>()
const miaoMessageRef = ref<InstanceType<typeof miaoMessageProvider>>()
// 通过margin来实现缩小功能 // 通过margin来实现缩小功能
const pdfMargin = ref<number>(0) const pdfMargin = ref<number>(0)
const pdfPageCount = ref<number>(-1) const pdfPageCount = ref<number>(-1)
const isLoading = computed(() => {
return canvasList.length !== pdfPageCount.value
})
const canvasList = shallowReactive<HTMLCanvasElement[]>([]) const canvasList = shallowReactive<HTMLCanvasElement[]>([])
const handleZoom = (index?: number) => { const handleZoom = (index?: number) => {
@@ -58,14 +88,11 @@ const handleResetMargin = () => {
pdfMargin.value = 0 pdfMargin.value = 0
} }
const loadingPercent = computed(() => {
if (pdfPageCount.value === -1) {
return -1
}
return canvasList.length / pdfPageCount.value
})
onMounted(async () => { onMounted(async () => {
const setLoadingMessage = miaoMessageRef.value?.message('加载PDF插件中', {
type: 'info',
timeout: -1
})
const pdfSrc = currentFiles.value[0].url const pdfSrc = currentFiles.value[0].url
// @ts-ignore // @ts-ignore
const PDFJS = await import('pdfjs-dist/build/pdf.mjs') const PDFJS = await import('pdfjs-dist/build/pdf.mjs')
@@ -79,6 +106,7 @@ onMounted(async () => {
pdfPageCount.value = pdf.numPages pdfPageCount.value = pdf.numPages
// 循环渲染每一页 // 循环渲染每一页
for (let i = 1; i <= pdf.numPages; i++) { for (let i = 1; i <= pdf.numPages; i++) {
setLoadingMessage && setLoadingMessage(`渲染进度：${i}/${pdf.numPages}`)
const page = await pdf.getPage(i) const page = await pdf.getPage(i)
let pixelRatio = 3 let pixelRatio = 3
let viewport = page.getViewport({ scale: 1 }) let viewport = page.getViewport({ scale: 1 })
@@ -96,6 +124,11 @@ onMounted(async () => {
} }
await page.render(renderContext).promise // 一页一页的渲染 await page.render(renderContext).promise // 一页一页的渲染
} }
setLoadingMessage &&
setLoadingMessage(`渲染PDF完成`, {
type: 'success',
timeout: 3456
})
}) })
</script> </script>