管理中心-我的素材-素材列表-搜索后名称显示样式

packages/qjkankan-editor/src/components/table/index.vue

@@ -280,14 +280,6 @@ export default {
         flex-grow: 1;
         .textItem {
           color: #323233;
-          // word-break: keep-all;
-          // white-space: nowrap;
-          word-break: break-all;
-          white-space: normal;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 2;
-          overflow: hidden;
         }
       }
     }

packages/qjkankan-editor/src/views/material/audio/index.vue

@@ -115,16 +115,81 @@
               @click="onClickFolder(lineData)"
             />
           </div>
-          <span
+
+
+
+          <!-- 文字型单元格 -->
+          <div
             v-else
             class="textItem"
-            :class="{
-              dirName: headerItem.key === 'name' && lineData.type === 'dir'
-            }"
-            @click="(headerItem.key === 'name' && lineData.type === 'dir') ? onClickFolder(lineData): null"
           >
-            {{ itemData || "-" }}
-          </span>
+          
+          
+            <!-- 名称 -->
+            <div v-if="headerItem.key === 'name'" class="name">
+              
+              <!-- 不是搜索出来的 -->
+              <div v-if="!lastestUsedSearchKey" class="not-search-res">
+                <!-- 文件夹名称 -->
+                <div
+                  v-if="lineData.type === 'dir'"
+                  class="dirName"
+                  @click="onClickFolder(lineData)"
+                >
+                  {{ itemData || "-" }}
+                </div>
+                <!-- 素材名称 -->
+                <div v-else class="not-dir">
+                  {{ itemData || "-" }}
+                </div>
+              </div>
+              <!-- end of 不是搜索出来的 -->
+              
+              <!-- 搜索出来的 -->
+              <div v-if="lastestUsedSearchKey" class="search-res">
+                <!-- 文件夹名称 -->
+                <div
+                  v-if="lineData.type === 'dir'"
+                  class="dirName"
+                >
+                  <div
+                    class="self-name"
+                    @click="onClickFolder(lineData)"
+                  >
+                    {{ itemData || "-" }}
+                  </div>
+                  <div class="parent-name-wrap">
+                    目录 <span class="parent-name">{{lineData.vName}}</span>
+                  </div>
+                </div>
+                <!-- 素材名称 -->
+                <div v-else class="not-dir">
+                  <div class="self-name">
+                    {{ itemData || "-" }}
+                  </div>
+                  <div class="parent-name-wrap">
+                    目录 <span class="parent-name">{{lineData.dirName}}</span>
+                  </div>
+                </div>
+              </div>
+              <!-- end of 搜索出来的 -->
+              
+            </div>
+            <!-- end of 名称 -->
+            
+            
+            <!-- 不是名称 -->
+            <div v-else class="not-name">
+              {{ itemData || "-" }}
+            </div>
+            <!-- end of 不是名称 -->
+
+            
+          </div>
+          <!-- end of 文字型单元格 -->
+
+
+
         </div>
       </tableList>
       <UploadTaskList

packages/qjkankan-editor/src/views/material/image/index.vue

@@ -109,16 +109,80 @@
               @click="lineData.type === 'dir' ? onClickFolder(lineData) : previewImage(lineData)"
             />
           </div>
-          <span
+
+
+          <!-- 文字型单元格 -->
+          <div
             v-else
             class="textItem"
-            :class="{
-              dirName: headerItem.key === 'name' && lineData.type === 'dir'
-            }"
-            @click="(headerItem.key === 'name' && lineData.type === 'dir') ? onClickFolder(lineData): null"
           >
-            {{ itemData || "-" }}
-          </span>
+          
+          
+            <!-- 名称 -->
+            <div v-if="headerItem.key === 'name'" class="name">
+              
+              <!-- 不是搜索出来的 -->
+              <div v-if="!lastestUsedSearchKey" class="not-search-res">
+                <!-- 文件夹名称 -->
+                <div
+                  v-if="lineData.type === 'dir'"
+                  class="dirName"
+                  @click="onClickFolder(lineData)"
+                >
+                  {{ itemData || "-" }}
+                </div>
+                <!-- 素材名称 -->
+                <div v-else class="not-dir">
+                  {{ itemData || "-" }}
+                </div>
+              </div>
+              <!-- end of 不是搜索出来的 -->
+              
+              <!-- 搜索出来的 -->
+              <div v-if="lastestUsedSearchKey" class="search-res">
+                <!-- 文件夹名称 -->
+                <div
+                  v-if="lineData.type === 'dir'"
+                  class="dirName"
+                >
+                  <div
+                    class="self-name"
+                    @click="onClickFolder(lineData)"
+                  >
+                    {{ itemData || "-" }}
+                  </div>
+                  <div class="parent-name-wrap">
+                    目录 <span class="parent-name">{{lineData.dirName}}</span>
+                  </div>
+                </div>
+                <!-- 素材名称 -->
+                <div v-else class="not-dir">
+                  <div class="self-name">
+                    {{ itemData || "-" }}
+                  </div>
+                  <div class="parent-name-wrap">
+                    目录 <span class="parent-name">{{lineData.dirName}}</span>
+                  </div>
+                </div>
+              </div>
+              <!-- end of 搜索出来的 -->
+              
+            </div>
+            <!-- end of 名称 -->
+            
+            
+            <!-- 不是名称 -->
+            <div v-else class="not-name">
+              {{ itemData || "-" }}
+            </div>
+            <!-- end of 不是名称 -->
+
+            
+          </div>
+          <!-- end of 文字型单元格 -->
+
+
+
         </div>
       </tableList>
       <UploadTaskList

packages/qjkankan-editor/src/views/material/pano/index.vue

@@ -110,28 +110,81 @@
               @click="onClickFolder(lineData)"
             />
           </div>
-          <span
-            v-else-if="headerItem.key == 'name' && lineData.type !== 'dir'"
-            class="textItem"
-            style="cursor: pointer;"
-            @click="previewImage(lineData)"
-          >
-            {{ itemData || "-" }}
-          </span>
-          <span
-            v-else-if="headerItem.key === 'name' && lineData.type === 'dir'"
-            class="textItem dirName"
-            @click="onClickFolder(lineData)"
-          >
-            {{ itemData || "-" }}
-          </span>
+
+
+
           <!-- 文字型单元格 -->
-          <span
+          <div
             v-else
             class="textItem"
           >
-            {{ itemData || "-" }}
-          </span>
+          
+          
+            <!-- 名称 -->
+            <div v-if="headerItem.key === 'name'" class="name">
+              
+              <!-- 不是搜索出来的 -->
+              <div v-if="!lastestUsedSearchKey" class="not-search-res">
+                <!-- 文件夹名称 -->
+                <div
+                  v-if="lineData.type === 'dir'"
+                  class="dirName"
+                  @click="onClickFolder(lineData)"
+                >
+                  {{ itemData || "-" }}
+                </div>
+                <!-- 素材名称 -->
+                <div v-else class="not-dir">
+                  {{ itemData || "-" }}
+                </div>
+              </div>
+              <!-- end of 不是搜索出来的 -->
+              
+              <!-- 搜索出来的 -->
+              <div v-if="lastestUsedSearchKey" class="search-res">
+                <!-- 文件夹名称 -->
+                <div
+                  v-if="lineData.type === 'dir'"
+                  class="dirName"
+                >
+                  <div
+                    class="self-name"
+                    @click="onClickFolder(lineData)"
+                  >
+                    {{ itemData || "-" }}
+                  </div>
+                  <div class="parent-name-wrap">
+                    目录 <span class="parent-name">{{lineData.dirName}}</span>
+                  </div>
+                </div>
+                <!-- 素材名称 -->
+                <div v-else class="not-dir">
+                  <div class="self-name">
+                    {{ itemData || "-" }}
+                  </div>
+                  <div class="parent-name-wrap">
+                    目录 <span class="parent-name">{{lineData.dirName}}</span>
+                  </div>
+                </div>
+              </div>
+              <!-- end of 搜索出来的 -->
+              
+            </div>
+            <!-- end of 名称 -->
+            
+            
+            <!-- 不是名称 -->
+            <div v-else class="not-name">
+              {{ itemData || "-" }}
+            </div>
+            <!-- end of 不是名称 -->
+
+            
+          </div>
+          <!-- end of 文字型单元格 -->
+
+
+
         </div>
       </tableList>
       <UploadTaskList

packages/qjkankan-editor/src/views/material/style.less

@@ -79,8 +79,79 @@
       position: relative;
       text-align: left;
     }
-    .textItem.dirName {
-      cursor: pointer;
+    .textItem {
+      > .name {
+        > .not-search-res {
+          > .dirName {
+            font-size: 14px;
+            word-break: break-all;
+            white-space: normal;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+            cursor: pointer;
+          }
+          > .not-dir {
+            font-size: 14px;
+            word-break: break-all;
+            white-space: normal;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+          }
+        }
+        > .search-res {
+          > .dirName {
+            > .self-name {
+              font-size: 14px;
+              overflow: hidden;
+              white-space: pre;
+              text-overflow: ellipsis;
+              cursor: pointer;
+            }
+            > .parent-name-wrap {
+              margin-top: 7px;
+              margin-left: 4px;
+              font-size: 12px;
+              color: #646566;
+              > .parent-name {
+                color: #0076F6;
+                text-decoration: underline;
+                overflow: hidden;
+                white-space: pre;
+                text-overflow: ellipsis;
+                cursor: pointer;
+              }
+            }
+          }
+          > .not-dir {
+            > .self-name {
+              font-size: 14px;
+              overflow: hidden;
+              white-space: pre;
+              text-overflow: ellipsis;
+            }
+            > .parent-name-wrap {
+              margin-top: 7px;
+              margin-left: 4px;
+              font-size: 12px;
+              color: #646566;
+              > .parent-name {
+                color: #0076F6;
+                text-decoration: underline;
+                overflow: hidden;
+                white-space: pre;
+                text-overflow: ellipsis;
+                cursor: pointer;
+              }
+            }
+          }
+        }
+      }
+      > .not-name {
+      }
     }
     .total-number {
       margin-top: 14px;

packages/qjkankan-editor/src/views/material/video/index.vue

@@ -115,16 +115,81 @@
               @click="onClickFolder(lineData)"
             />
           </div>
-          <span
+
+
+
+          <!-- 文字型单元格 -->
+          <div
             v-else
             class="textItem"
-            :class="{
-              dirName: headerItem.key === 'name' && lineData.type === 'dir'
-            }"
-            @click="(headerItem.key === 'name' && lineData.type === 'dir') ? onClickFolder(lineData): null"
           >
-            {{ itemData || "-" }}
-          </span>
+          
+          
+            <!-- 名称 -->
+            <div v-if="headerItem.key === 'name'" class="name">
+              
+              <!-- 不是搜索出来的 -->
+              <div v-if="!lastestUsedSearchKey" class="not-search-res">
+                <!-- 文件夹名称 -->
+                <div
+                  v-if="lineData.type === 'dir'"
+                  class="dirName"
+                  @click="onClickFolder(lineData)"
+                >
+                  {{ itemData || "-" }}
+                </div>
+                <!-- 素材名称 -->
+                <div v-else class="not-dir">
+                  {{ itemData || "-" }}
+                </div>
+              </div>
+              <!-- end of 不是搜索出来的 -->
+              
+              <!-- 搜索出来的 -->
+              <div v-if="lastestUsedSearchKey" class="search-res">
+                <!-- 文件夹名称 -->
+                <div
+                  v-if="lineData.type === 'dir'"
+                  class="dirName"
+                >
+                  <div
+                    class="self-name"
+                    @click="onClickFolder(lineData)"
+                  >
+                    {{ itemData || "-" }}
+                  </div>
+                  <div class="parent-name-wrap">
+                    目录 <span class="parent-name">{{lineData.dirName}}</span>
+                  </div>
+                </div>
+                <!-- 素材名称 -->
+                <div v-else class="not-dir">
+                  <div class="self-name">
+                    {{ itemData || "-" }}
+                  </div>
+                  <div class="parent-name-wrap">
+                    目录 <span class="parent-name">{{lineData.dirName}}</span>
+                  </div>
+                </div>
+              </div>
+              <!-- end of 搜索出来的 -->
+              
+            </div>
+            <!-- end of 名称 -->
+            
+            
+            <!-- 不是名称 -->
+            <div v-else class="not-name">
+              {{ itemData || "-" }}
+            </div>
+            <!-- end of 不是名称 -->
+
+            
+          </div>
+          <!-- end of 文字型单元格 -->
+
+
+
         </div>
       </tableList>
       <UploadTaskList