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

feat: 优化代码表现

Browse Source
This commit is contained in:
539943419 committed 2024-09-01 03:39:50 +08:00
1 parent 8c65e66ab6
commit 8e884eb178
4 files changed
+32 -62
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/App.vue
+20 -48
View File
@@ -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,37 +114,21 @@ 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="
<n-icon class="tag-control-icon icon" @click="
createView(
view.component,
view.currentDirectories,
@@ -154,9 +138,7 @@ 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>
@@ -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;
src/components/miaoDirectory/miaoDirectoryItem.vue
+2 -2
View File
@@ -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;
src/components/miaoDirectory/miaoDirectoryItemsContainer.vue
+5 -6
View File
@@ -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>
src/components/miaoDropHandler.vue
+5 -6
View File
@@ -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 () => {