Merge branch 'fix/views/10-29/2024' into 'main_dev'

perf(src/packages): 优化图层区域，文本列表展示样式问题

See merge request yunteng/thingskit-view!304

@@ -20,7 +20,9 @@
           <mac-os-control-btn class="list-header-control-btn" :mini="true" :disabled="true"></mac-os-control-btn>
           <mac-os-control-btn class="list-header-control-btn" :mini="true" :disabled="true"></mac-os-control-btn>
           <n-tooltip trigger="hover">
           <n-tooltip trigger="hover">
             <template #trigger>
             <template #trigger>
-              <n-ellipsis style="max-width: 90%; font-size: 12px">{{ t(item.title) }}</n-ellipsis>
+              <n-text style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px">{{
+                t(item.title)
+              }}</n-text>
             </template>
             </template>
             {{ t(item.title) }}
             {{ t(item.title) }}
           </n-tooltip>
           </n-tooltip>
@@ -28,7 +30,13 @@
         <div class="list-center go-flex-center go-transition" draggable="true">
         <div class="list-center go-flex-center go-transition" draggable="true">
           <Icon v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="48" />
           <Icon v-if="item.icon" class="list-img" :icon="item.icon" color="#999" width="48" />
           <div class="list-img" v-else-if="item.threeModelImageUrl">
           <div class="list-img" v-else-if="item.threeModelImageUrl">
-            <n-image height="100" width="140" object-fit="fill" preview-disabled :src="item.threeModelImageUrl"></n-image>
+            <n-image
+              height="100"
+              width="140"
+              object-fit="fill"
+              preview-disabled
+              :src="item.threeModelImageUrl"
+            ></n-image>
           </div>
           </div>
           <chart-glob-image v-else class="list-img" :chartConfig="item" />
           <chart-glob-image v-else class="list-img" :chartConfig="item" />
         </div>
         </div>

@@ -9,11 +9,11 @@
         :fallback-src="requireErrorImg()"
         :fallback-src="requireErrorImg()"
       ></n-image>
       ></n-image>
       <n-ellipsis style="margin-right: auto">
       <n-ellipsis style="margin-right: auto">
-        <span class="list-text">
+        <span class="list-text" :class="{'list-text-mini': selectText }">
           {{ t(props.componentData.chartConfig.title) }}
           {{ t(props.componentData.chartConfig.title) }}
         </span>
         </span>
       </n-ellipsis>
       </n-ellipsis>
-      <div class="list-layers">
+      <div class="list-layers" :class="{'list-layers-mini': selectText }">
         <layers-status :isGroup="isGroup" :hover="hover" :status="status"></layers-status>
         <layers-status :isGroup="isGroup" :hover="hover" :status="status"></layers-status>
       </div>
       </div>
     </div>
     </div>
@@ -157,12 +157,31 @@ $textSize: 10px;
     text-overflow: ellipsis;
     text-overflow: ellipsis;
     white-space: nowrap;
     white-space: nowrap;
   }
   }
+  .list-text-mini{
+    position: absolute;
+    z-index: 99;
+    left: 70px;
+    top: 8px;
+    padding-left: 6px;
+    width: 60px;
+    font-size: $textSize;
+    overflow: hidden;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
 
   .list-layers {
   .list-layers {
     position: absolute;
     position: absolute;
     z-index: 99;
     z-index: 99;
     left: 140px;
     left: 140px;
     top: 15px;
     top: 15px;
+  } 
+  .list-layers-mini {
+    position: absolute;
+    z-index: 99;
+    left: 140px;
+    top: 2px;
   }
   }
 
 
   /* 选中样式 */
   /* 选中样式 */

@@ -54,7 +54,14 @@
           </n-dropdown>
           </n-dropdown>
         </n-space>
         </n-space>
       </div>
       </div>
-      <n-grid style="margin-top: 16px" :x-gap="20" :y-gap="20" cols="2 s:2 m:3 l:4 xl:4 xxl:4" responsive="screen">
+      <n-grid
+        v-if="list && list.length"
+        style="margin-top: 16px"
+        :x-gap="20"
+        :y-gap="20"
+        cols="2 s:2 m:3 l:4 xl:4 xxl:4"
+        responsive="screen"
+      >
         <n-grid-item v-for="(item, index) in list" :key="item.id">
         <n-grid-item v-for="(item, index) in list" :key="item.id">
           <div style="display: none">{{ index }}</div>
           <div style="display: none">{{ index }}</div>
           <project-items-card
           <project-items-card
@@ -68,6 +75,11 @@
           ></project-items-card>
           ></project-items-card>
         </n-grid-item>
         </n-grid-item>
       </n-grid>
       </n-grid>
+      <div  v-else style="height: calc(100vh - 40vh);display: flex;align-items: center;justify-content: center">
+        <n-empty description="暂无数据">
+          <template #extra> </template>
+        </n-empty>
+      </div>
     </div>
     </div>
     <div class="list-pagination">
     <div class="list-pagination">
       <n-pagination
       <n-pagination