From 3d22ed0c71e8649b19caad11820c2c59636ad69c Mon Sep 17 00:00:00 2001
From: Miao_Spring <539943419@qq.com>
Date: Mon, 19 Aug 2024 22:39:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20miaoDirectory=E7=9A=84item=E5=9C=A8?=
 =?UTF-8?q?=E5=AE=BD=E5=BA=A6=E4=B8=8D=E8=B6=B3=E6=97=B6=E4=BC=9A=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=E5=B0=8F=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../miaoDirectory/miaoDirectoryItem.vue       | 38 ++++++++++++++++---
 src/views/miaoDirectory.vue                   |  2 +-
 2 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/components/miaoDirectory/miaoDirectoryItem.vue b/src/components/miaoDirectory/miaoDirectoryItem.vue
index c6ce7c1..b3adf0b 100644
--- a/src/components/miaoDirectory/miaoDirectoryItem.vue
+++ b/src/components/miaoDirectory/miaoDirectoryItem.vue
@@ -1,11 +1,12 @@
 <template>
     <div class="miao-item" draggable="true" ref="itemRef" @dragstart="handleDragStart">
         <miaoContextMenu :options="dropDownOptions" :touch-time-out="500" @select="handleDropdownSelect">
-            <div class="item-main">
+            <div class="item-main" ref="mainRef">
                 <div class="item-main-front" :style="{ backgroundColor: props.color }"></div>
-                <Icon class="item-main-icon"></Icon>
+                <Icon class="item-main-icon" v-show="clientWidth > 200"></Icon>
                 <div class="item-main-info">
                     <div class="item-main-info-name">
+                        <Icon class="item-main-info-name-icon" v-show="clientWidth <= 200"></Icon>
                         {{ name }}
                     </div>
                     <div class="item-main-info-date" v-if="time">
@@ -38,11 +39,11 @@ import {
     PlayCircle,
     Disc
 } from '@vicons/ionicons5'
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import dateFormatter from '@/hooks/dateFormatter'
-import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
+// import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
 
-const miaoFetchApi = useMiaoFetchApi()
+// const miaoFetchApi = useMiaoFetchApi()
 
 const props = defineProps<{
     item: VirtualDirectory | VirtualFile
@@ -59,6 +60,11 @@ const emit = defineEmits<{
 
 const itemType = ref<'file' | 'directory'>(props.item.type)
 
+const mainRef = ref<HTMLDivElement>()
+
+// 使用ResizeObserver实现
+const clientWidth = ref<number>(666)
+
 const name = props.name ?? props.item.name
 
 const time = computed(() => {
@@ -164,13 +170,24 @@ const handleDragStart = (event: DragEvent) => {
     emit('dragStart', event, props.item)
     // dataBus.set('dragData', [props.item])
 }
+
+onMounted(() => {
+    const observer = new ResizeObserver(entries => {
+        for (let entry of entries) {
+            clientWidth.value = entry.contentRect.width;
+        }
+    });
+    if (mainRef.value) {
+        observer.observe(mainRef.value);
+    }
+})
 </script>
 
 <style lang="scss" scoped>
 .miao-item {
     cursor: pointer;
     width: calc(100% - 20px);
-    min-width: 250px;
+    min-width: 150px;
     // aspect-ratio: 66/9;
     height: 50px;
     position: relative;
@@ -210,6 +227,15 @@ const handleDragStart = (event: DragEvent) => {
 
             &-name {
                 user-select: none;
+                display: flex;
+                align-items: center;
+                margin-top: 3px;
+
+                &-icon {
+                    color: #00403e;
+                    width: 20px;
+                    margin-right: 5px;
+                }
             }
 
             &-date {
diff --git a/src/views/miaoDirectory.vue b/src/views/miaoDirectory.vue
index 7a72ddf..9577b12 100644
--- a/src/views/miaoDirectory.vue
+++ b/src/views/miaoDirectory.vue
@@ -336,7 +336,7 @@ $bottom-bar-height: 60px;
     position: relative;
     height: 100%;
     width: inherit;
-    min-width: 266px;
+    // min-width: 236px;
     display: flex;
     flex-direction: column;
     overflow: hidden;