优化文档列表名称显示

blossom-editor/src/renderer/src/views/article/ArticleTreeTitle.vue

@@ -11,9 +11,11 @@
       <svg v-else-if="isNotBlank(props.trees.icon)" class="icon menu-icon" aria-hidden="true">
         <use :xlink:href="'#' + props.trees.icon"></use>
       </svg>
-      <div class="name-wrapper">
+      <el-tooltip :content="props.trees.n" placement="top" :show-after="1000" :hide-after="0" :transition="'none'" :offset="2" :persistent="false">
+        <div class="name-wrapper" :style="nameWrapperStyle">
           {{ props.trees.n }}
         </div>
+      </el-tooltip>
       <bl-tag v-if="props.trees.o === 1 && props.trees.ty != 3" style="margin-top: 5px" :bg-color="'#7AC20C'" :icon="'bl-cloud-line'"></bl-tag>
       <bl-tag v-for="tag in tags" style="margin-top: 5px" :bg-color="tag.bgColor" :icon="tag.icon">{{ tag.content }}</bl-tag>
     </div>
@@ -40,6 +42,12 @@ const levelColor = computed(() => {
   return computedDocTitleColor(props.level)
 })
 
+const nameWrapperStyle = computed(() => {
+  return {
+    maxWidth: isNotBlank(props.trees.icon) ? 'calc(100% - 25px)' : '100%'
+  }
+})
+
 /**
  * 计算标签, 并返回便签对象集合
  */
@@ -78,8 +86,8 @@ $icon-size: 17px;
 
 .doc-title {
   @include flex(row, flex-start, flex-start);
-  max-width: calc(100% - 15px);
+  // max-width: calc(100% - 15px);
-  min-width: calc(100% - 15px);
+  // min-width: calc(100% - 15px);
   width: 100%;
   padding-bottom: 1px;
   position: relative;
@@ -105,14 +113,14 @@ $icon-size: 17px;
 
     .name-wrapper {
       @include ellipsis();
-      max-width: calc(100% - 25px);
     }
   }
 
   .sort {
     position: absolute;
-    right: -15px;
+    right: 0px;
     top: 2px;
+    z-index: 10;
   }
 }
 

blossom-editor/src/renderer/src/views/picture/PictureTreeTitle.vue

@@ -11,9 +11,12 @@
       <svg v-else-if="isNotBlank(props.trees.icon)" class="icon menu-icon" aria-hidden="true">
         <use :xlink:href="'#' + props.trees.icon"></use>
       </svg>
-      <div class="name-wrapper">
+
+      <el-tooltip :content="props.trees.n" placement="top" :show-after="1000" :hide-after="0" :transition="'none'" :offset="2" :persistent="false">
+        <div class="name-wrapper" :style="nameWrapperStyle">
           {{ props.trees.n }}
         </div>
+      </el-tooltip>
       <!-- 如果专题是公开的, 则单独显示公开标签 -->
       <bl-tag v-if="props.trees.o === 1 && isSubjectDoc" style="margin-top: 5px" :bg-color="'#7AC20C'" :icon="'bl-cloud-line'"></bl-tag>
       <bl-tag v-for="tag in tags" :bg-color="tag.bgColor" style="margin-top: 5px" :icon="tag.icon">{{ tag.content }}</bl-tag>
@@ -41,6 +44,12 @@ const levelColor = computed(() => {
   return computedDocTitleColor(props.level)
 })
 
+const nameWrapperStyle = computed(() => {
+  return {
+    maxWidth: isNotBlank(props.trees.icon) ? 'calc(100% - 25px)' : '100%'
+  }
+})
+
 /**
  * 计算标签, 并返回便签对象集合
  */
@@ -69,8 +78,8 @@ $icon-size: 17px;
 
 .doc-title {
   @include flex(row, flex-start, flex-start);
-  max-width: calc(100% - 15px);
+  // max-width: calc(100% - 15px);
-  min-width: calc(100% - 15px);
+  // min-width: calc(100% - 15px);
   width: 100%;
   padding-bottom: 1px;
   position: relative;
@@ -97,7 +106,7 @@ $icon-size: 17px;
 
     .name-wrapper {
       @include ellipsis();
-      max-width: calc(100% - 25px);
+      // max-width: calc(100% - 25px);
     }
   }
 

blossom-web/src/views/article/DocTitle.vue

@@ -8,9 +8,11 @@
       <svg v-else-if="isNotBlank(props.trees.icon)" class="icon menu-icon" aria-hidden="true">
         <use :xlink:href="'#' + props.trees.icon"></use>
       </svg>
-      <div class="name-wrapper">
+      <el-tooltip :content="props.trees.n" placement="top" :show-after="1000" :hide-after="0" :transition="'none'" :offset="2" :persistent="false">
+        <div class="name-wrapper" :style="nameWrapperStyle">
           {{ props.trees.n }}
         </div>
+      </el-tooltip>
       <bl-tag v-for="tag in tags" style="margin-top: 5px" :bg-color="tag.bgColor" :icon="tag.icon">{{ tag.content }}</bl-tag>
     </div>
   </div>
@@ -28,6 +30,12 @@ const props = defineProps({
   trees: { type: Object as PropType<DocTree>, default: {} }
 })
 
+const nameWrapperStyle = computed(() => {
+  return {
+    maxWidth: isNotBlank(props.trees.icon) ? 'calc(100% - 25px)' : '100%'
+  }
+})
+
 /**
  * 计算标签, 并返回便签对象集合
  */
@@ -62,8 +70,6 @@ $icon-size: 17px;
 
 .doc-title {
   @include flex(row, flex-start, flex-start);
-  max-width: calc(100% - 15px);
-  min-width: calc(100% - 15px);
   width: 100%;
   padding-bottom: 1px;
   position: relative;
@@ -88,15 +94,8 @@ $icon-size: 17px;
 
     .name-wrapper {
       @include ellipsis();
-      max-width: calc(100% - 25px);
     }
   }
-
-  .sort {
-    position: absolute;
-    right: -15px;
-    top: 2px;
-  }
 }
 
 // 专题样式, 包括边框和文字样式
@@ -133,7 +132,6 @@ $icon-size: 17px;
 
   .doc-name {
     @include flex(row, flex-start, flex-start);
-    color: var(--el-color-primary);
     align-content: flex-start;
     flex-wrap: wrap;
     width: 100%;
@@ -155,10 +153,5 @@ $icon-size: 17px;
       min-width: calc(100% - 25px);
     }
   }
-
-  .sort {
-    position: absolute;
-    right: -15px;
-  }
 }
 </style>