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

2024-09-02 17:59:49 +08:00
1 parent 78dac7482c
commit 6b8f7aa6b4
@@ -1,22 +1,42 @@
 <template>
-    <div class="miao-directory-container-items" :style="{
-        backgroundColor:
-            index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
-    }">
-        <n-scrollbar ref="scrollbarRef" style="max-height: 100%;">
-            <miao-lazy-div v-for="(dir) 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)"
+    <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)"
                    @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,60 +72,63 @@ const emit = defineEmits<{

 const scrollbarRef = ref()

-const itemDropDownOptions = (item: VirtualDirectory | VirtualFile) => computed(() => {
-    const items = [...props.selectedItem]
-    const selected = props.selectedItem.includes(item)
-    if (!selected) {
-        items.push(item)
-    }
-    const vDirs = items.filter(v => v.type === 'directory')
-    const vFiles = items.filter(v => v.type === 'file')
-    const options = [
-        {
-            label: '重命名',
-            key: 'rename'
-        },
-        {
-            label: '删除',
-            key: 'delete'
-        },
-    ]
-    if (item.type === 'file') {
+const itemDropDownOptions = (item: VirtualDirectory | VirtualFile) =>
+    computed(() => {
+        const items = [...props.selectedItem]
+        const selected = props.selectedItem.includes(item)
+        if (!selected) {
+            items.push(item)
+        }
+        const vDirs = items.filter((v) => v.type === 'directory')
+        const vFiles = items.filter((v) => v.type === 'file')
+        const options = [
+            {
+                label: '重命名',
+                key: 'rename'
+            },
+            {
+                label: '删除',
+                key: 'delete'
+            }
+        ]
+        if (item.type === 'file') {
+            options.push(
+                ...[
+                    {
+                        label: '下载',
+                        key: 'download'
+                    }
+                ]
+            )
+        }
+        if (selected === false) {
+            options.push(
+                ...[
+                    {
+                        label: '多选:选择',
+                        key: 'select'
+                    }
+                ]
+            )
+        } else {
+            options.push(
+                ...[
+                    {
+                        label: '多选:取消',
+                        key: 'select'
+                    }
+                ]
+            )
+        }
        options.push(
-            ...[
-                {
-                    label: '下载',
-                    key: 'download'
-                }
-            ]
+            ...pluginCenter.getUsablePlugin(vDirs, vFiles).map((v) => ({
+                label: `插件:${v.name}`,
+                key: `plugin:${v.key}`,
+                icon: v.icon ? renderIcon(v.icon) : undefined
+            }))
        )
-    }
-    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
-})
-
+        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) => {
-    emit('item-drag-start', _event, item)
-}
+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 items = [...props.selectedItem]
-    const selected = props.selectedItem.includes(item)
-    if (!selected) {
-        items.push(item)
+const handleItemUsePlugin =
+    (item: VirtualDirectory | VirtualFile) => (plugin: string) => {
+        const items = [...props.selectedItem]
+        const selected = props.selectedItem.includes(item)
+        if (!selected) {
+            items.push(item)
+        }
+        const vDirs = items.filter((v) => v.type === 'directory')
+        const vFiles = items.filter((v) => v.type === 'file')
+        pluginCenter.usePlugin(plugin, vDirs, vFiles)
    }
-    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">
@@ -151,4 +178,4 @@ defineExpose({ scrollTo: (...args: any) => scrollbarRef.value.scrollTo(...args)
    flex: 1;
    min-height: 0;
 }
-</style>
+</style>
@@ -1,83 +1,102 @@
 <template>
-  <miao-mask v-model:show="showMask">
-    <n-card class="popup-card" :title="popupConfig?.title" size="medium">
-      {{ popupConfig?.content }}
-      <n-input class="popup-input" v-model:value="inputValue" type="text" v-bind="popupConfig?.inputProps"
-        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>
+    <miao-mask v-model:show="showMask">
+        <n-card class="popup-card" :title="popupConfig?.title" size="medium">
+            {{ popupConfig?.content }}
+            <n-input
+                class="popup-input"
+                v-model:value="inputValue"
+                type="text"
+                v-bind="popupConfig?.inputProps"
+                passively-activated
+                autofocus
+                v-if="popupConfig?.inputProps" />
+            <div class="popup-button-container">
+                <n-button
+                    class="popup-button-container-button"
+                    v-for="option in popupConfig?.options"
+                    :key="option.label"
+                    :type="option.type"
+                    @click="_resolve && _resolve(option.key)">
+                    {{ option.label }}
+                </n-button>
+            </div>
+        </n-card>
+    </miao-mask>
 </template>
 <script lang="ts" setup>
-import { ref, nextTick } from "vue";
-import { NCard, NInput, NButton } from "naive-ui";
-import miaoMask from "./miaoMask.vue";
-import { InputProps } from "naive-ui";
+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,
-  inputProps?: InputProps
-  options: {
-    label: string
-    key: unknown
-    type: 'default' | 'tertiary' | 'primary' | 'success' | 'info' | 'warning' | 'error'
-  }[]
+    title: string
+    content?: string
+    inputValue?: string
+    inputProps?: InputProps
+    options: {
+        label: string
+        key: unknown
+        type:
+            | 'default'
+            | 'tertiary'
+            | 'primary'
+            | 'success'
+            | 'info'
+            | 'warning'
+            | 'error'
+    }[]
 }

 const popupConfig = ref<popupConfigType>()

 const popup = async (config: popupConfigType) => {
-  popupConfig.value = config
-  inputValue.value = config.inputValue ?? ''
-  showMask.value = true
-  const key = await new Promise((resolve: (key: unknown) => unknown) => {
-    _resolve.value = resolve
-  })
-  const text = inputValue.value
-  showMask.value = false;
-  nextTick(() => {
-    inputValue.value = ''
-    _resolve.value = undefined
-  })
-  return {
-    text,
-    key
-  };
-};
+    popupConfig.value = config
+    inputValue.value = config.inputValue ?? ''
+    showMask.value = true
+    const key = await new Promise((resolve: (key: unknown) => unknown) => {
+        _resolve.value = resolve
+    })
+    const text = inputValue.value
+    showMask.value = false
+    nextTick(() => {
+        inputValue.value = ''
+        _resolve.value = undefined
+    })
+    return {
+        text,
+        key
+    }
+}

-defineExpose({ popup });
+defineExpose({ popup })
 </script>

 <style scoped lang="scss">
 .popup-card {
-  width: 80%;
+    width: 80%;

-  .popup-input {
-    margin-bottom: 10px;
-  }
-
-  .popup-button-container {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    justify-content: flex-end;
-    flex-wrap: wrap;
-
-    .popup-button-container-button {
-      margin-top: 3px;
-      &:not(:last-child) {
-        margin-right: 5px;
-      }
+    .popup-input {
+        margin-bottom: 10px;
+    }
+
+    .popup-button-container {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+        flex-wrap: wrap;
+
+        .popup-button-container-button {
+            margin-top: 3px;
+            &:not(:last-child) {
+                margin-right: 5px;
+            }
+        }
    }
-  }
 }
 </style>