feat: 屏蔽miaoDirectory底部工具栏，更新readme计划书

feat: 优化代码表现
2024-09-01 04:18:41 +08:00 · 2024-09-01 03:39:50 +08:00
6 changed files with 73 additions and 78 deletions
@@ -1,13 +1,15 @@
 ## TODO list:

-| 任务 | 状态 | 
+| 计划 | 状态 | 
 |---|---|
 | 拆分miaoDirectory | ✅ |
 | 完善视频插件 | ✅ |
 | 完善PDF插件 | ✅ |
 | 完善Code插件 | ✅ |
-| 实现miaoDirectory的搜索功能 | ❌ |
+| 实现miaoDirectory的搜索功能 | ✅ |
 | 完善miaoDirectory的搜索功能 | ❌ |
+| 实现miaoDirectory的排序功能 | ❌ |
 | 完善图片浏览插件 | ❌ |
 | VirtualDirectory更新时更新文件信息 | ❌ |
+| 创建音乐播放器组件（仿QQ音乐移动端吧） | ❌ |
 | miaoDirectory的复制文件/文件夹功能 | ❌ |
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { h, onMounted, reactive, ref, shallowRef } from 'vue'
-import { NIcon, NScrollbar, NDropdown, NQrCode } from 'naive-ui'
+import { NIcon, NScrollbar, NDropdown } from 'naive-ui'
 import {
    EyeOffOutline,
    EyeOutline,
@@ -88,11 +88,11 @@ const openMenuOption = [
    }
 ]

-const handleMenuSelect = (key: string) => {
+const handleMenuSelect = async (key: string) => {
    if (key === 'share') {
        showModal.value = true
        modalData.value = {
-            component: NQrCode,
+            component: (await import('naive-ui/es/qr-code')).NQrCode,
            props: {
                value: baseUrl,
                size: 300,
@@ -114,49 +114,31 @@ 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.uid">
-                            <span
-                                class="tab-title"
-                                :title="view.title"
-                                @click="handleClickTitle(index)">
+                        <div class="tab" v-for="(view, index) of views._views" :key="view.uid">
+                            <span class="tab-title" :title="view.title" @click="handleClickTitle(index)">
                                {{
                                    view.title.length > 5 && 0
                                        ? `${view.title.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="
-                                        createView(
-                                            view.component,
-                                            view.currentDirectories,
-                                            view.currentFiles,
-                                            index + 1
-                                        )
+                                <n-icon class="tag-control-icon icon" @click="
+                                    createView(
+                                        view.component,
+                                        view.currentDirectories,
+                                        view.currentFiles,
+                                        index + 1
+                                    )
                                    ">
                                    <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>
@@ -166,10 +148,7 @@ 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>
@@ -179,17 +158,10 @@ 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.uid">
-                    <component
-                        :is="view.component"
-                        v-model:current-directories="view.currentDirectories"
-                        v-model:current-files="view.currentFiles"
-                        :id="view.uid"
-                        :color="view.color"
+                    <component :is="view.component" v-model:current-directories="view.currentDirectories"
+                        v-model:current-files="view.currentFiles" :id="view.uid" :color="view.color"
                        @exit="deleteView(index)"></component>
                </div>
            </transition-group>
@@ -197,10 +169,8 @@ 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>

@@ -246,6 +216,7 @@ $tag-width: 170px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
+
                    span {
                        user-select: none;
                        cursor: pointer;
@@ -333,7 +304,7 @@ $tag-width: 170px;
        .view-container-item {
            flex: 1;
            height: 100%;
-            min-width: 200px;
+            min-width: 180px;
        }

        &::-webkit-scrollbar {
@@ -363,6 +334,7 @@ $tag-width: 170px;
 .view {
    .view-controller {
        .tabs-container {
+
            .tab-move,
            .tab-enter-active {
                transition: all 0.2s ease;
@@ -7,7 +7,7 @@
                <div class="item-main-info">
                    <div class="item-main-info-name">
                        <Icon class="item-main-info-name-icon" v-if="clientWidth <= 250"></Icon>
-                        <n-ellipsis style="max-width: 80%;">{{ name }}</n-ellipsis>
+                        <n-ellipsis :style="{ maxWidth: clientWidth > 250 ? '80%' : '75%' }">{{ name }}</n-ellipsis>
                    </div>
                    <div class="item-main-info-date" v-if="time">
                        {{ time }}
@@ -238,7 +238,7 @@ onMounted(() => {
 .miao-item {
    cursor: pointer;
    width: calc(100% - 20px);
-    min-width: 170px;
+    // min-width: 170px;
    // aspect-ratio: 66/9;
    height: 50px;
    position: relative;
@@ -276,7 +276,7 @@ onMounted(() => {
        .item-main-info {
            margin-left: 10px;
            height: 100%;
-            width: calc( 100% - 10px );
+            width: calc(100% - 10px);
            display: flex;
            flex-direction: column;

@@ -3,15 +3,13 @@
        backgroundColor:
            index % 2 === 0 ? '#f8f8f8' : 'rgb(240 240 240)'
    }">
-        <n-scrollbar ref="scrollbarRef">
-            <miao-lazy-div v-for="(dir, index) in showData_directory" :key="dir.uid" :disableLazy="index < 20"
-                min-height="50px">
+        <n-scrollbar ref="scrollbarRef" style="max-height: 100%;">
+            <miao-lazy-div v-for="(dir, index) in showData_directory" :key="dir.uid" min-height="50px">
                <miaoDirectoryItem :item="dir" :color="props.color" :selectedItem="selectedItem"
                    @delete="handleItemDelete(dir)" @click="handleItemClick(dir)" @drag-start="handleItemDragStart"
                    @rename="handleItemRename(dir)" @on-selected="handleItemSelect(dir)" />
            </miao-lazy-div>
-            <miao-lazy-div v-for="(file, index) in showData_files" :key="file.uid" :disableLazy="index < 20"
-                min-height="50px">
+            <miao-lazy-div v-for="(file) in showData_files" :key="file.uid" min-height="50px">
                <miaoDirectoryItem :item="file" :color="props.color" :selectedItem="selectedItem"
                    @click="handleItemClick(file)" @download="handleItemDownload(file)" @delete="handleItemDelete(file)"
                    @drag-start="handleItemDragStart" @rename="handleItemRename(file)"
@@ -77,6 +75,7 @@ const handleItemSelect = (item: VirtualDirectory | VirtualFile) => {
 <style scoped lang="scss">
 .miao-directory-container-items {
    width: 100%;
-    height: calc(100% - 30px - 60px);
+    flex: 1;
+    min-height: 0;
 }
 </style>
@@ -1,9 +1,5 @@
 <template>
-    <div
-        class="container"
-        @dragover="handleDragOver"
-        @dragleave="handleDragLeave"
-        @drop="handleDrop">
+    <div class="container" @dragover="handleDragOver" @dragleave="handleDragLeave" @drop="handleDrop">
        <slot></slot>
        <miao-mask v-model:show="showMask"></miao-mask>
    </div>
@@ -63,8 +59,11 @@ const removeDirectory = async (files: File[]) => {
 }

 const handleDragOver = async (event: DragEvent) => {
-    showMask.value += 1
    event.preventDefault()
+    if (showMask.value === 1) {
+        return
+    }
+    showMask.value = 1
 }

 const handleDragLeave = async () => {
@@ -14,7 +14,7 @@
        @item-drag-start="handleItemDragStart" @item-rename="handleItemRename" @item-select="handleItemSelect" />

      <!-- 底部工具栏 -->
-      <miao-directory-bottom :index="index" @add-new-item="handleAddNewItem"
+      <miao-directory-bottom :index="index" @add-new-item="handleAddNewItem" v-if="false"
        @pick-files-upload="handlePickFilesUpload" />

      <miao-mask v-model:show="showModel"></miao-mask>
@@ -44,8 +44,10 @@ import MiaoDropHandler from '@/components/miaoDropHandler.vue'
 import { NIcon } from 'naive-ui'
 import {
  CloseOutline, SearchOutline, FilterOutline, CheckmarkDoneOutline,
-  DocumentText,
-  FileTray
+  DocumentText, ExtensionPuzzleOutline,
+  FileTray,
+  AddOutline,
+  CloudUploadOutline
 } from '@vicons/ionicons5'
 import usePluginCenter from '@/hooks/usePluginCenter'

@@ -145,6 +147,16 @@ const showData_files = computed<VirtualFile[]>(() => {

 const topBarMenuOption = computed(() => {
  return [
+    {
+      label: '新建',
+      key: 'create',
+      icon: renderIcon(AddOutline)
+    },
+    {
+      label: '上传',
+      key: 'upload',
+      icon: renderIcon(CloudUploadOutline)
+    },
    {
      label: '搜索',
      key: 'search',
@@ -177,10 +189,17 @@ const topBarMenuOption = computed(() => {
      ],
      icon: renderIcon(FilterOutline)
    },
-    ...pluginCenter.getUsablePlugin([currentDirectories.value[0]], []).map(v => ({
-      label: `插件:${v.name}`,
-      key: `plugin:${v.key}`
-    })),
+    {
+      label: '插件',
+      key: 'plugin',
+      children: [
+        ...pluginCenter.getUsablePlugin([currentDirectories.value[0]], []).map(v => ({
+          label: `${v.name}`,
+          key: `plugin:${v.key}`
+        })),
+      ],
+      icon: renderIcon(ExtensionPuzzleOutline)
+    },
    {
      label: '关闭',
      key: 'close',
@@ -242,6 +261,10 @@ const handleTopBarMenuSelect = (key: string) => {
    emit('exit')
  } else if (key === 'search') {
    handleSearch()
+  } else if (key === 'upload') {
+    handlePickFilesUpload()
+  } else if (key === 'create') {
+    handleAddNewItem()
  } else if (key === 'searchReset') {
    handleSearchReset()
  } else if (key === 'selectedItemReset') {
Author	SHA1	Message	Date
539943419	938dde4c1c	feat: 屏蔽miaoDirectory底部工具栏，更新readme计划书	2024-09-01 04:18:41 +08:00
539943419	8e884eb178	feat: 优化代码表现	2024-09-01 03:39:50 +08:00